/* =========================================================
MITR THAI — Design System
Inspired by editorial luxury (La Dong NYC), adapted for
Thai fine-dining heritage.
========================================================= */
/* ---------------------------------------------------------
Larken — owner brand display face (from the brand kit).
USED ONLY on the big all-caps hero wordmark (.home-hero__brand):
the DEMO weights draw lowercase i/j WITHOUT dots, which hurts
readability in mixed-case headings/dish names — so body display
text uses Cormorant Garamond (dotted i, full digits/punctuation)
and Larken is reserved for the uppercase "MITR THAI" logo, where
it looks great and has no dotless-i issue. Swap in the full
licensed Larken (proper dotted i + full glyphs) to use it wider.
--------------------------------------------------------- */
@font-face {
font-family: 'Larken';
src: url('/fonts/LarkenDEMO-Light.otf') format('opentype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Larken';
src: url('/fonts/LarkenDEMO-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Larken';
src: url('/fonts/LarkenDEMO-Medium.otf') format('opentype');
font-weight: 500 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Larken';
src: url('/fonts/LarkenDEMO-Bold.otf') format('opentype');
font-weight: 700 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Larken';
src: url('/fonts/LarkenDEMO-Italic.otf') format('opentype');
font-weight: 400 600;
font-style: italic;
font-display: swap;
}
:root {
/* Color palette — warm cream + teak + Thai gold */
--cream: #F7F2E8;
--cream-soft: #FBF7EE;
--cream-warm: #EFE7D6;
--ink: #2A1F17;
--ink-soft: #4A3F35;
--ink-mute: #6A5E50; /* darkened from #7A6E60 for WCAG AA 5.1:1 */
--teak: #3D2817;
--emerald: #1E4A36; /* deep Thai temple emerald — luxury */
--emerald-deep: #14342A;
--gold: #B89968; /* decorative use only — for large display or on-dark */
--gold-deep: #705838; /* darkened from #8C7148 for WCAG AA 4.7:1 on cream */
--gold-on-dark: #C9A876;
--gold-rich: #D4B57A; /* brighter gold for Thai damask on green */
--burgundy: #7A2E2E;
--focus: #705838;
--line: rgba(61, 40, 23, 0.14);
--line-soft: rgba(61, 40, 23, 0.08);
/* Typography */
--font-display: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif;
--font-sans: 'Inter', 'IBM Plex Sans Thai', system-ui, -apple-system, sans-serif;
--font-thai: 'Noto Serif Thai', 'Cormorant Garamond', serif;
/* Spacing */
--section-y: clamp(80px, 12vw, 160px);
--container: 1280px;
--gutter: clamp(20px, 4vw, 48px);
/* Motion */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
/* No native smooth scroll — we use JS easing for silky motion */
scroll-behavior: auto;
-webkit-text-size-adjust: 100%;
scroll-padding-top: 80px; /* keeps anchor targets below sticky nav */
}
/* Focus ring — high-visibility, halo-style for both light and dark backgrounds */
*:focus { outline: none; }
*:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: 2px;
box-shadow: 0 0 0 5px rgba(247, 242, 232, 0.6);
}
/* ============================================================
Splash / Loading screen — deep forest green + gold Mitr Thai mark
============================================================ */
.splash {
position: fixed;
inset: 0;
z-index: 10000;
background:
radial-gradient(ellipse at 50% 35%, #2D4A3E 0%, #1A2F26 70%, #0F1F18 100%);
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.9s var(--ease), visibility 0.9s var(--ease);
visibility: visible;
}
.splash.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.splash__inner {
text-align: center;
animation: splashFadeIn 0.8s var(--ease) both;
}
@keyframes splashFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.splash__lotus {
width: clamp(120px, 16vw, 170px);
height: auto;
display: block;
margin: 0 auto 32px;
animation: splashLotus 2.2s var(--ease) both;
filter: drop-shadow(0 8px 24px rgba(184, 153, 104, 0.35));
}
@keyframes splashLotus {
0% { opacity: 0; transform: scale(0.5) rotate(-30deg); }
60% { opacity: 1; transform: scale(1.06) rotate(0deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.splash__wordmark {
width: clamp(220px, 32vw, 360px);
height: auto;
display: block;
margin: 0 auto 28px;
animation: splashTextIn 1s var(--ease) 0.5s both;
filter: drop-shadow(0 4px 12px rgba(184, 153, 104, 0.25));
}
.splash__tagline {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(232, 201, 151, 0.6);
position: relative;
padding: 0 28px;
animation: splashTextIn 1s var(--ease) 0.75s both;
}
.splash__tagline::before,
.splash__tagline::after {
content: '';
position: absolute;
top: 50%;
width: 18px;
height: 1px;
background: rgba(232, 201, 151, 0.4);
}
.splash__tagline::before { left: 0; }
.splash__tagline::after { right: 0; }
@keyframes splashTextIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.splash__lotus, .splash__title, .splash__thai, .splash__tagline,
.splash__inner {
animation: none;
}
}
/* Skip link */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
padding: 14px 24px;
background: var(--ink);
color: var(--cream-soft);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.skip-link:focus {
left: 12px;
top: 12px;
}
/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hero__bg { animation: none !important; transform: none !important; }
.reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.65;
color: var(--ink-soft);
background-color: var(--cream);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* ============================================================
Decorative paper texture + Thai motif — applied to all light sections
so the pattern is visible (sections used to cover the body bg).
============================================================ */
.story,
.featured,
.experience,
.contact,
.menu-hero,
.reserve-hero,
.reserve-content,
.region-section,
.cocktails,
.gallery,
.video-section,
.explorer {
position: relative;
background-color: var(--cream);
/* Refined Thai emblem — outlined ring with quatrefoil inside (looks like a
Thai medallion, not a plus sign). Sparse and luxurious. */
background-image:
radial-gradient(ellipse 1100px 800px at 8% 4%, rgba(184, 153, 104, 0.11) 0%, transparent 55%),
radial-gradient(ellipse 900px 700px at 92% 96%, rgba(122, 46, 46, 0.055) 0%, transparent 55%),
url("/img/decor/menu-lotus.webp?v=5");
background-size: auto, auto, 420px;
background-position: top left, bottom right, top center;
background-repeat: no-repeat, no-repeat, repeat;
}
/* Slightly different background for "secondary" sections */
.gallery,
.video-section {
background-color: var(--cream-soft);
}
/* Gallery has lots of imagery — softer & sparser pattern */
.gallery {
background-image:
radial-gradient(ellipse 1100px 700px at 50% 50%, rgba(184, 153, 104, 0.06) 0%, transparent 60%),
url("data:image/svg+xml;utf8,");
background-size: auto, 360px 360px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
a:hover { color: var(--gold-deep); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--gold); color: var(--cream-soft); }
/* ---------- Typography ---------- */
.display, h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--ink);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.1;
}
h1 { font-size: clamp(48px, 8vw, 112px); }
h2 { font-size: clamp(36px, 5.5vw, 72px); }
h3 { font-size: clamp(24px, 3vw, 36px); }
h4 { font-size: clamp(18px, 2vw, 22px); font-style: italic; }
.eyebrow {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #5A4628;
display: inline-block;
}
.lead {
font-family: var(--font-display);
font-size: clamp(20px, 2.2vw, 26px);
font-style: italic;
line-height: 1.45;
color: var(--ink-soft);
}
.thai-script {
font-family: var(--font-thai);
font-weight: 400;
}
/* ---------- Layout helpers ---------- */
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
.container-wide {
max-width: 1480px;
margin: 0 auto;
padding: 0 var(--gutter);
}
section { padding: var(--section-y) 0; position: relative; }
.divider {
width: 64px;
height: 1px;
background: var(--gold);
margin: 24px 0;
position: relative;
}
.divider.center { margin: 24px auto; }
/* ============================================================
Thai Ornamental Divider — พุ่มข้าวบิณฑ์ (Phum Khao Bin) center
+ ลายกนก (Kanok flame swirls) as side flourishes.
A traditional Thai temple gable motif, refined for editorial use.
============================================================ */
.divider.ornament {
width: 300px;
height: 44px;
background: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
}
.divider.ornament::before, .divider.ornament::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold) 30%, var(--gold-deep) 100%);
max-width: 60px;
align-self: center;
}
.divider.ornament::after {
background: linear-gradient(to left, transparent, var(--gold) 30%, var(--gold-deep) 100%);
}
/* Central refined Thai ornament — Phum Khao Bin with Kanok flourishes */
.divider.ornament > span {
width: 170px;
height: 44px;
display: inline-block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,");
}
/* Light-gold version for dark sections (regions section, reserve banner) */
.regions .divider.ornament > span,
.reserve-banner .divider.ornament > span {
background-image: url("data:image/svg+xml;utf8,");
}
/* Light gradient lines on dark sections too */
.regions .divider.ornament::before, .reserve-banner .divider.ornament::before {
background: linear-gradient(to right, transparent, %23E8C997 30%, %23D4B582 100%);
background: linear-gradient(to right, transparent, #E8C997 30%, #D4B582 100%);
}
.regions .divider.ornament::after, .reserve-banner .divider.ornament::after {
background: linear-gradient(to left, transparent, #E8C997 30%, #D4B582 100%);
}
/* Full-width section ornament — between major sections (refined) */
.section-ornament {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 0;
position: relative;
}
.section-ornament::before, .section-ornament::after {
content: '';
width: 120px;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.section-ornament::after {
background: linear-gradient(to left, transparent, var(--gold), transparent);
}
.section-ornament__glyph {
margin: 0 24px;
width: 90px;
height: 50px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.95;
}
/* ---------- Nav ---------- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 22px var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
transition: background 0.5s var(--ease), padding 0.4s var(--ease), border-color 0.4s var(--ease);
border-bottom: 1px solid transparent;
}
.nav.scrolled {
background: rgba(247, 242, 232, 0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 14px var(--gutter);
border-bottom-color: var(--line);
}
/* Fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
.nav.scrolled { background: rgba(247, 242, 232, 0.99); }
}
/* Inner pages — keep nav solid always (no transparent over hero) */
.nav.nav--solid,
.nav.nav--solid.scrolled {
background: rgba(247, 242, 232, 0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom-color: var(--line);
padding: 14px var(--gutter);
}
.nav.nav--solid .nav__brand,
.nav.nav--solid .nav__list a,
.nav.nav--solid .nav__cta { color: var(--ink); }
.nav.nav--solid .nav__burger span { background: var(--ink); }
.nav__brand {
font-family: var(--font-display);
font-size: 18px;
letter-spacing: 0.04em;
color: var(--cream-soft);
transition: color 0.4s var(--ease);
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.nav__brand-mark {
width: 32px;
height: auto;
display: block;
flex-shrink: 0;
transition: filter 0.4s var(--ease);
}
.nav.scrolled .nav__brand-mark,
.nav.nav--solid .nav__brand-mark {
/* Convert the gold mark to dark green for cream nav */
filter: hue-rotate(50deg) saturate(0.6) brightness(0.45);
}
.nav__brand-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.nav.scrolled .nav__brand,
.nav.nav--solid .nav__brand { color: var(--ink); }
.nav__brand small {
display: block;
font-family: var(--font-sans);
font-size: 9px;
letter-spacing: 0.32em;
font-weight: 500;
margin-top: 4px;
opacity: 0.75;
}
.nav__list {
display: flex;
gap: 32px;
list-style: none;
}
.nav__list a {
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
color: var(--cream-soft);
position: relative;
padding: 4px 0;
transition: color 0.3s var(--ease);
}
.nav.scrolled .nav__list a { color: var(--ink); }
.nav__list a::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 0; height: 1px;
background: var(--gold);
transition: width 0.4s var(--ease);
}
.nav__list a:hover::after { width: 100%; }
.nav__cta {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
padding: 11px 22px;
border: 1px solid currentColor;
color: var(--cream-soft);
transition: all 0.4s var(--ease);
}
.nav.scrolled .nav__cta { color: var(--ink); }
.nav__cta:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--cream-soft) !important;
}
.nav__burger {
display: none;
flex-direction: column;
gap: 6px;
padding: 12px;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
}
/* Mobile menu — hidden by default (no FOUC), positioned off-screen, displayed only when needed */
.mobile-menu {
display: none;
position: fixed;
inset: 0;
background-color: var(--cream);
z-index: 99;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
transform: translateY(-100%);
transition: transform 0.5s var(--ease);
visibility: hidden;
}
.mobile-menu.open {
transform: translateY(0);
visibility: visible;
}
.mobile-menu a {
font-family: var(--font-display);
font-size: 28px;
color: var(--ink);
}
.nav__burger span {
width: 24px; height: 1.5px;
background-color: var(--cream-soft);
transition: all 0.3s var(--ease);
}
.nav.scrolled .nav__burger span { background: var(--ink); }
/* ---------- Hero ---------- */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--cream-soft);
overflow: hidden;
padding: 0;
}
.hero__bg {
position: absolute;
inset: 0;
background-image: image-set(
url('/img/hero/hero-3.webp') type('image/webp'),
url('/img/hero/hero-3.jpg') type('image/jpeg')
);
background-image: url('/img/hero/hero-3.webp'); /* fallback */
background-size: cover;
background-position: center;
filter: brightness(0.6) saturate(1.05);
transform: scale(1.06);
animation: heroZoom 18s ease-out forwards;
}
@media (max-width: 720px) {
.hero__bg { background-image: url('/img/hero/hero-3-md.webp'); }
}
@keyframes heroZoom {
to { transform: scale(1); }
}
.hero::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.65) 100%);
pointer-events: none;
}
.hero__content {
position: relative;
z-index: 2;
max-width: 980px;
padding: 0 var(--gutter);
animation: heroFadeUp 1.4s var(--ease) 0.3s both;
}
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow {
color: var(--gold);
margin-bottom: 32px;
display: inline-block;
}
.hero h1 {
color: var(--cream-soft);
font-weight: 300;
margin-bottom: 28px;
}
.hero h1 em {
font-style: italic;
color: var(--gold);
}
.hero__sub {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(18px, 2vw, 22px);
color: #FBF7EE;
margin-bottom: 48px;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.hero__actions {
display: flex;
gap: 28px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.hero__text-link {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 500;
color: var(--cream-soft);
padding: 14px 6px;
position: relative;
transition: color 0.4s var(--ease);
}
.hero__text-link::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: 8px;
height: 1px;
background: currentColor;
transform: scaleX(0.3);
transform-origin: left;
transition: transform 0.5s var(--ease);
opacity: 0.5;
}
.hero__text-link:hover {
color: var(--gold);
}
.hero__text-link:hover::after {
transform: scaleX(1);
opacity: 1;
}
.hero__scroll {
position: absolute;
left: 50%; bottom: 40px;
transform: translateX(-50%);
z-index: 2;
font-size: 10px;
letter-spacing: 0.3em;
color: rgba(251, 247, 238, 0.7);
text-transform: uppercase;
}
.hero__scroll::after {
content: '';
display: block;
width: 1px; height: 40px;
background: rgba(251, 247, 238, 0.5);
margin: 14px auto 0;
animation: scrollPulse 2.2s ease-in-out infinite;
transform-origin: top;
}
@keyframes scrollPulse {
0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
50% { transform: scaleY(1); opacity: 1; }
}
/* ---------- Buttons ---------- */
.btn {
display: inline-block;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 500;
padding: 16px 32px;
border: 1px solid currentColor;
transition: all 0.4s var(--ease);
cursor: pointer;
background: transparent;
white-space: nowrap;
}
.btn--light {
color: var(--cream-soft);
border-color: var(--cream-soft);
}
.btn--light:hover {
background-color: var(--cream-soft);
color: var(--ink);
}
.btn--gold {
background: var(--gold);
border-color: var(--gold);
color: var(--cream-soft);
}
.btn--gold:hover {
background: var(--gold-deep);
border-color: var(--gold-deep);
color: var(--cream-soft);
}
.btn--dark {
color: var(--ink);
border-color: var(--ink);
}
.btn--dark:hover {
background: var(--ink);
color: var(--cream-soft);
}
.btn--ghost-dark {
color: var(--ink);
border-color: var(--line);
}
.btn--ghost-dark:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--cream-soft);
}
/* ---------- Story Section ---------- */
.story {
background-color: var(--cream);
}
.story__grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: clamp(40px, 8vw, 120px);
align-items: center;
}
.story__image {
position: relative;
aspect-ratio: 4/5;
}
.story__image__inner {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.story__image img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease);
}
.story__image:hover img { transform: scale(1.04); }
.story__image::after {
content: '';
position: absolute;
inset: 20px -20px -20px 20px;
border: 1px solid var(--gold);
z-index: -1;
pointer-events: none;
}
.story__copy h2 { margin-bottom: 28px; }
.story__copy h2 em {
font-style: italic;
color: var(--gold-deep);
}
.story__copy .lead { margin-bottom: 28px; }
.story__copy p {
margin-bottom: 20px;
font-size: 16px;
line-height: 1.8;
}
.story__signature {
margin-top: 36px;
font-family: var(--font-display);
font-style: italic;
font-size: 20px;
color: var(--ink);
}
.story__signature small {
display: block;
font-family: var(--font-sans);
font-style: normal;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin-top: 8px;
}
/* ---------- Regions Section ---------- */
.regions {
background: var(--teak);
color: var(--cream-soft);
}
.regions h2, .regions h3 { color: var(--cream-soft); }
.regions__intro {
text-align: center;
max-width: 720px;
margin: 0 auto 80px;
}
.regions__intro .eyebrow { color: var(--gold); }
.regions__intro p { color: rgba(251, 247, 238, 0.75); margin-top: 20px; }
.regions__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
background: rgba(184, 153, 104, 0.25);
}
.region {
background: var(--teak);
padding: 56px 36px;
transition: background 0.5s var(--ease);
position: relative;
overflow: hidden;
cursor: default;
}
.region:hover { background: #4A3220; }
.region__num {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.3em;
color: var(--gold);
margin-bottom: 20px;
opacity: 0.8;
}
.region h3 {
font-size: clamp(34px, 3.5vw, 44px);
margin-bottom: 6px;
letter-spacing: -0.01em;
font-weight: 400;
}
.region__thai {
font-family: var(--font-thai);
font-size: 17px;
color: var(--gold);
margin-bottom: 22px;
font-weight: 400;
opacity: 0.78;
letter-spacing: 0.04em;
}
.region__intro {
font-family: var(--font-display);
font-style: italic;
font-size: 16px;
line-height: 1.6;
color: rgba(251, 247, 238, 0.94);
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(184, 153, 104, 0.22);
}
.region__bullets {
list-style: none;
font-size: 13.5px;
color: rgba(251, 247, 238, 0.78);
font-family: var(--font-sans);
line-height: 1.55;
}
.region__bullets li {
padding: 9px 0 9px 16px;
position: relative;
}
.region__bullets li::before {
content: '';
position: absolute;
left: 0;
top: 16px;
width: 6px;
height: 1px;
background: var(--gold);
}
.region__bullets li strong {
color: var(--cream-soft);
font-weight: 600;
letter-spacing: 0.01em;
}
/* Legacy support — keep .region__dishes hidden if any pages still use it */
.region__dishes {
list-style: none;
font-size: 13px;
color: rgba(251, 247, 238, 0.85);
font-family: var(--font-display);
font-style: italic;
}
.region__dishes li {
padding: 8px 0;
border-bottom: 1px solid rgba(184, 153, 104, 0.18);
}
.region__dishes li:last-child { border-bottom: none; }
/* ---------- Video / Atmosphere ---------- */
.video-section {
background-color: var(--cream-soft);
}
.video-section__head {
text-align: center;
margin-bottom: 56px;
}
.video-section__sub {
margin-top: 20px;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
.video-section__frame {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--ink);
box-shadow: 0 30px 80px -30px rgba(42, 31, 23, 0.4);
}
.video-section__frame iframe {
position: absolute;
/* Scale iframe larger so YouTube's bottom-right logo + top title bar
are pushed outside the visible crop. */
top: -8%;
left: -8%;
width: 116%;
height: 116%;
border: 0;
z-index: 2;
pointer-events: none; /* block any YouTube UI clicks */
}
.video-section__placeholder {
position: absolute;
inset: 0;
z-index: 1;
transition: opacity 0.6s var(--ease);
}
.video-section__placeholder img {
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
.video-section__frame.is-playing .video-section__placeholder {
opacity: 0;
pointer-events: none;
}
/* ---------- Featured / Signature ---------- */
.featured {
background-color: var(--cream);
}
.featured__head {
text-align: center;
margin-bottom: 80px;
}
.featured__head p { max-width: 560px; margin: 20px auto 0; }
.featured__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.dish {
position: relative;
}
.dish__media {
aspect-ratio: 4/5;
overflow: hidden;
margin-bottom: 24px;
background: var(--cream-warm);
}
.dish__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease);
}
.dish:hover .dish__media img { transform: scale(1.06); }
.dish__tag {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 10px;
}
.dish__name {
font-family: var(--font-display);
font-size: clamp(26px, 2.4vw, 32px);
color: var(--ink);
margin-bottom: 6px;
line-height: 1.15;
letter-spacing: -0.005em;
}
.dish__thai {
font-family: var(--font-thai);
font-size: 12px;
color: var(--gold-deep);
margin-bottom: 12px;
opacity: 0.7;
letter-spacing: 0.06em;
}
.dish__desc {
font-size: 14px;
line-height: 1.7;
color: var(--ink-soft);
}
.featured__cta {
text-align: center;
margin-top: 80px;
}
/* ---------- Gallery ---------- */
.gallery {
background-color: var(--cream-soft);
padding: var(--section-y) 0;
}
.gallery__head {
text-align: center;
margin-bottom: 64px;
}
.gallery__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 180px;
gap: 12px;
padding: 0 var(--gutter);
max-width: 1600px;
margin: 0 auto;
}
.gallery__item {
overflow: hidden;
position: relative;
background: var(--cream-warm);
}
.gallery__item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease), filter 0.6s var(--ease);
filter: saturate(0.95);
}
.gallery__item:hover img { transform: scale(1.08); filter: saturate(1.1); }
/* Asymmetric grid that resolves cleanly on a 6-col track */
.gallery__item:nth-child(1) { grid-column: span 3; grid-row: span 2; } /* large left tall */
.gallery__item:nth-child(2) { grid-column: span 3; grid-row: span 1; }
.gallery__item:nth-child(3) { grid-column: span 3; grid-row: span 1; }
.gallery__item:nth-child(4) { grid-column: span 2; grid-row: span 1; }
.gallery__item:nth-child(5) { grid-column: span 2; grid-row: span 1; }
.gallery__item:nth-child(6) { grid-column: span 2; grid-row: span 1; }
/* ---------- Experience / Info ---------- */
.experience {
background-color: var(--cream);
}
.experience__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.experience__copy h2 { margin-bottom: 28px; }
.experience__copy p { margin-bottom: 20px; line-height: 1.8; }
.experience__details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid var(--line);
}
.detail__label {
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 12px;
}
.detail__value {
font-family: var(--font-display);
font-size: 18px;
color: var(--ink);
line-height: 1.5;
}
.experience__image {
aspect-ratio: 3/4;
overflow: hidden;
position: relative;
}
.experience__image img {
width: 100%; height: 100%;
object-fit: cover;
}
/* ---------- Reservation Banner ---------- */
.reserve-banner {
position: relative;
background:
linear-gradient(rgba(42, 31, 23, 0.78), rgba(42, 31, 23, 0.78)),
url('/img/hero/hero-3.webp') center / cover no-repeat;
color: var(--cream-soft);
text-align: center;
padding: clamp(100px, 14vw, 180px) 0;
}
/* Parallax only where it works well (desktop, no reduced-motion) */
@media (hover: hover) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
.reserve-banner { background-attachment: fixed; }
}
.reserve-banner h2 {
color: var(--cream-soft);
font-weight: 300;
margin-bottom: 24px;
}
.reserve-banner h2 em { color: var(--gold); font-style: italic; }
.reserve-banner p {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(18px, 2vw, 22px);
color: rgba(251, 247, 238, 0.85);
max-width: 540px;
margin: 0 auto 40px;
}
.reserve-banner__actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ---------- Contact / Footer ---------- */
.contact {
background-color: var(--cream);
padding: var(--section-y) 0 80px;
}
.contact__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: stretch;
}
.contact__info h2 { margin-bottom: 40px; }
.contact__block {
margin-bottom: 36px;
}
.contact__block .detail__label { margin-bottom: 10px; }
.contact__block a, .contact__block address {
font-family: var(--font-display);
font-size: 22px;
font-style: normal;
color: var(--ink);
line-height: 1.5;
}
.contact__hours {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 24px;
font-family: var(--font-display);
font-size: 17px;
color: var(--ink);
}
.contact__hours .day {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-family: var(--font-sans);
color: var(--ink-mute);
align-self: center;
}
.contact__social {
display: flex;
gap: 16px;
margin-top: 12px;
}
.contact__social a {
width: 44px; height: 44px;
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.4s var(--ease);
color: var(--ink);
}
.contact__social a:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--cream-soft);
}
.contact__social svg { width: 16px; height: 16px; }
.contact__map {
min-height: 520px;
background: var(--cream-warm);
position: relative;
}
.contact__map iframe {
width: 100%; height: 100%;
border: none;
filter: saturate(0.85) contrast(0.95);
display: block;
position: absolute;
inset: 0;
}
/* ---------- Footer ---------- */
.footer {
/* owner 2026-08-19: emerald, then darkened one step on request */
background: var(--emerald-deep);
color: rgba(251, 247, 238, 0.75);
padding: 80px 0 40px;
}
.footer__grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
gap: 48px;
margin-bottom: 60px;
}
.footer__brand-mark {
width: 54px;
height: auto;
display: block;
margin-bottom: 16px;
opacity: 0.9;
}
.footer__brand h3 {
color: var(--cream-soft);
font-size: 28px;
margin-bottom: 12px;
}
.footer__brand p {
font-family: var(--font-display);
font-style: italic;
font-size: 16px;
line-height: 1.6;
max-width: 320px;
}
.footer__col h4 {
color: var(--gold);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-family: var(--font-sans);
font-weight: 500;
margin-bottom: 20px;
font-style: normal;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 10px; }
.footer__col a {
font-size: 14px;
color: rgba(251, 247, 238, 0.78);
transition: color 0.3s var(--ease);
display: inline-block;
padding: 6px 0;
}
.contact__block a {
display: inline-block;
padding: 4px 0;
}
.footer__col a:hover { color: var(--gold); }
.footer__bottom {
border-top: 1px solid rgba(184, 153, 104, 0.18);
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
letter-spacing: 0.08em;
color: rgba(251, 247, 238, 0.55);
}
/* ---------- Scroll Reveal Animations ---------- */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger > * {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s var(--ease), transform 1s var(--ease);
}
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger.in > * {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
MENU PAGE — Thailand Map Explorer
============================================================ */
/* Region color palette — warm, regional, cohesive */
:root {
--r-north: #4F6B5A; /* deep mountain sage */
--r-north-soft: #DCE5DD; /* pale for backgrounds */
--r-north-map: #A6BFAB; /* saturated for map regions — visible by default */
--r-northeast: #9B5E2E; /* terracotta plateau */
--r-northeast-soft: #ECD9C2;
--r-northeast-map: #D4A877;
--r-central: #8C6F3F; /* royal gold */
--r-central-soft: #EFE2C7;
--r-central-map: #D7BA7A;
--r-south: #3F6772; /* andaman teal */
--r-south-soft: #D2DFE3;
--r-south-map: #9DBAC2;
--r-street: #6E4A30; /* charcoal brown */
--r-street-soft: #E7D8C8;
--r-signature: #6B3A4F; /* aubergine */
--r-signature-soft: #E5D2DA;
}
/* ---------- Explorer Section (with map) ---------- */
.explorer {
background-color: var(--cream);
padding: clamp(100px, 12vw, 140px) 0 80px;
position: relative;
}
.explorer__head {
text-align: center;
max-width: 720px;
margin: 0 auto 64px;
}
.explorer__head h1 {
font-size: clamp(40px, 6vw, 80px);
margin-bottom: 20px;
}
.explorer__intro {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(17px, 1.8vw, 20px);
color: var(--ink-soft);
}
.explorer__stage {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 80px);
align-items: center;
margin-bottom: 80px;
}
/* ---------- Real Thailand Province Map ---------- */
.map-wrap {
position: relative;
max-width: 460px;
margin: 0 auto;
width: 100%;
}
.thailand-map-mount {
display: block;
width: 100%;
min-height: 480px;
filter: drop-shadow(0 30px 60px rgba(61, 40, 23, 0.18));
position: relative;
}
.thailand-map-mount svg, .thailand-map {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
/* Base province (path) styling */
.thailand-map-mount .th-region path,
.thailand-map .th-region path {
stroke: var(--cream);
stroke-width: 0.6;
stroke-linejoin: round;
fill: currentColor;
transition: fill 0.35s var(--ease), opacity 0.3s var(--ease);
cursor: pointer;
}
/* Region group colors — visible by default so user sees 4 distinct regions on mobile */
.thailand-map-mount .r-north, .thailand-map .r-north { color: var(--r-north-map); }
.thailand-map-mount .r-northeast,.thailand-map .r-northeast{ color: var(--r-northeast-map); }
.thailand-map-mount .r-central, .thailand-map .r-central { color: var(--r-central-map); }
.thailand-map-mount .r-south, .thailand-map .r-south { color: var(--r-south-map); }
/* Hover / active states — color the whole region with its deep tone */
.thailand-map-mount a:hover .r-north,
.thailand-map-mount a:focus-visible .r-north,
.thailand-map-mount .r-north.is-active { color: var(--r-north); }
.thailand-map-mount a:hover .r-northeast,
.thailand-map-mount a:focus-visible .r-northeast,
.thailand-map-mount .r-northeast.is-active { color: var(--r-northeast); }
.thailand-map-mount a:hover .r-central,
.thailand-map-mount a:focus-visible .r-central,
.thailand-map-mount .r-central.is-active { color: var(--r-central); }
.thailand-map-mount a:hover .r-south,
.thailand-map-mount a:focus-visible .r-south,
.thailand-map-mount .r-south.is-active { color: var(--r-south); }
/* When a region is hover/active, dim the others */
.thailand-map-mount.has-hover .th-region:not(.is-active) { opacity: 0.45; }
/* Individual province hover within active region */
.thailand-map-mount .th-region path:hover {
filter: brightness(0.92);
stroke-width: 0.9;
}
/* Region link wrappers — accessible focus */
.thailand-map-mount svg a:focus-visible {
outline: 2px solid var(--gold-deep);
outline-offset: 4px;
border-radius: 4px;
}
.map-hint {
text-align: center;
margin-top: 20px;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
.map-hint::before { content: '· '; }
.map-hint::after { content: ' ·'; }
.map-compass {
position: absolute;
top: 24px;
right: 12px;
width: 44px;
height: 44px;
color: var(--gold-deep);
opacity: 0.6;
}
.map-compass svg { width: 100%; height: 100%; }
.map-compass__n {
position: absolute;
top: -16px; left: 50%;
transform: translateX(-50%);
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.2em;
font-weight: 600;
color: var(--gold-deep);
}
/* ---------- Map Info Panel ---------- */
.map-panel {
position: relative;
min-height: 460px;
}
.map-panel__inner { position: relative; }
.map-panel__card {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
transform: translateY(8px);
}
.map-panel__card[data-state="default"],
.map-panel__card.is-shown {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
position: relative;
}
.map-panel__card:not([data-state="default"]):not(.is-shown) {
display: none;
}
.map-panel__card .eyebrow { color: var(--gold-deep); }
.map-panel__card .divider { margin: 18px 0; }
.map-panel__thai {
font-family: var(--font-thai);
font-size: clamp(48px, 6vw, 72px);
color: var(--gold-deep);
line-height: 1;
margin-bottom: 12px;
font-weight: 500;
}
.map-panel__title {
font-size: clamp(34px, 4.5vw, 52px);
margin-bottom: 20px;
line-height: 1.05;
}
.map-panel__title em {
font-style: italic;
color: var(--gold-deep);
}
.map-panel__card p {
font-family: var(--font-display);
font-style: italic;
font-size: 18px;
line-height: 1.5;
margin-bottom: 24px;
color: var(--ink-soft);
}
.map-panel__dishes {
list-style: none;
margin: 0 0 32px;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 18px;
}
.map-panel__dishes li {
font-family: var(--font-display);
font-size: 15px;
color: var(--ink);
padding: 6px 0;
border-bottom: 1px solid var(--line-soft);
}
.map-panel__cta {
margin-top: 8px;
}
/* Color-coded panel themes when state is set */
.map-panel__card[data-state="north"] .eyebrow,
.map-panel__card[data-state="north"] .map-panel__thai,
.map-panel__card[data-state="north"] .map-panel__title em { color: var(--r-north); }
.map-panel__card[data-state="northeast"] .eyebrow,
.map-panel__card[data-state="northeast"] .map-panel__thai,
.map-panel__card[data-state="northeast"] .map-panel__title em { color: var(--r-northeast); }
.map-panel__card[data-state="central"] .eyebrow,
.map-panel__card[data-state="central"] .map-panel__thai,
.map-panel__card[data-state="central"] .map-panel__title em { color: var(--r-central); }
.map-panel__card[data-state="south"] .eyebrow,
.map-panel__card[data-state="south"] .map-panel__thai,
.map-panel__card[data-state="south"] .map-panel__title em { color: var(--r-south); }
/* ---------- Menu Jump Groups (grouped pills below the map) ---------- */
.menu-jump-groups {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 64px);
padding: 48px 0 16px;
border-top: 1px solid var(--line);
margin-top: 40px;
}
.menu-jump-group {
display: flex;
flex-direction: column;
gap: 18px;
}
.menu-jump-group__label {
display: flex;
align-items: baseline;
gap: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.menu-jump-group__label .num {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--gold-deep);
letter-spacing: 0.04em;
}
.menu-jump-group__label .text {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink);
font-weight: 600;
}
.menu-jump-group__label em {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
text-transform: none;
letter-spacing: 0.02em;
color: var(--ink-mute);
}
.menu-jump-group__pills {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* ---------- Sticky Section Nav (appears after scrolling past map) ---------- */
.section-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 90;
background: rgba(247, 242, 232, 0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
padding: 0;
transform: translateY(-100%);
transition: transform 0.4s var(--ease);
pointer-events: none;
}
.section-nav.is-visible {
transform: translateY(0);
pointer-events: auto;
}
.section-nav__inner {
max-width: 1480px;
margin: 0 auto;
padding: 10px var(--gutter);
display: flex;
align-items: center;
gap: 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.section-nav__inner::-webkit-scrollbar { display: none; }
.section-nav__top {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 600;
color: var(--ink);
padding: 9px 14px;
border: 1px solid var(--line);
background-color: var(--cream-soft);
transition: all 0.3s var(--ease);
flex-shrink: 0;
}
.section-nav__top:hover, .section-nav__top:focus-visible {
background: var(--gold-deep);
border-color: var(--gold-deep);
color: var(--cream-soft);
}
/* Full brand lockup as the section-nav home link (matches the main nav everywhere) */
.section-nav__brand {
flex-shrink: 0;
margin-right: 12px;
font-size: 16px;
color: var(--ink);
}
.section-nav__brand .nav__brand-mark { width: 28px; height: auto; }
.section-nav__brand .nav__brand-text small { color: var(--gold-deep); opacity: 0.8; }
.section-nav__brand:hover { color: var(--gold-deep); }
@media (max-width: 600px) {
.section-nav__brand .nav__brand-text small { display: none; } /* keep it compact on phones */
.section-nav__brand { font-size: 15px; }
}
.section-nav__list {
display: flex;
gap: 4px;
align-items: center;
flex: 1;
}
.section-nav__list a {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--ink-mute);
padding: 14px 12px;
min-height: 44px;
display: inline-flex;
align-items: center;
white-space: nowrap;
transition: color 0.3s var(--ease), background 0.3s var(--ease);
border-radius: 2px;
border-bottom: 2px solid transparent;
}
.section-nav__list a:hover { color: var(--ink); }
.section-nav__list a.is-active {
color: var(--ink);
}
.section-nav__list a[data-target="north"].is-active { border-bottom-color: var(--r-north); }
.section-nav__list a[data-target="northeast"].is-active { border-bottom-color: var(--r-northeast); }
.section-nav__list a[data-target="central"].is-active { border-bottom-color: var(--r-central); }
.section-nav__list a[data-target="south"].is-active { border-bottom-color: var(--r-south); }
.section-nav__list a[data-target="street"].is-active { border-bottom-color: var(--r-street); }
.section-nav__list a[data-target="signature"].is-active { border-bottom-color: var(--r-signature); }
.section-nav__list a[data-target="cocktails"].is-active { border-bottom-color: var(--burgundy); }
.section-nav__sep {
width: 1px;
height: 16px;
background: var(--line);
margin: 0 6px;
flex-shrink: 0;
}
/* When section-nav is visible, push the main nav out of view (it overlaps) */
body.section-nav-visible .nav { opacity: 0; pointer-events: none; }
/* Push region section scroll-margin down for sticky bar */
body.section-nav-visible .region-section,
body.section-nav-visible .cocktails {
scroll-margin-top: 64px;
}
/* ---------- Region Pills (also serves as mobile-first nav) ---------- */
.region-pills {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
padding: 32px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-top: 32px;
}
.region-pill {
display: inline-flex;
flex-direction: column;
align-items: center;
padding: 14px 22px;
border: 1px solid var(--line);
background-color: var(--cream-soft);
text-decoration: none;
transition: all 0.35s var(--ease);
min-width: 110px;
}
.region-pill .en {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
font-weight: 600;
margin-bottom: 4px;
}
.region-pill .thai {
font-family: var(--font-thai);
font-size: 11px;
color: var(--ink-mute);
font-weight: 400;
opacity: 0.7;
letter-spacing: 0.04em;
}
.region-pill:hover, .region-pill:focus-visible {
background: var(--ink);
border-color: var(--ink);
transform: translateY(-2px);
}
.region-pill:hover .thai, .region-pill:focus-visible .thai,
.region-pill:hover .en, .region-pill:focus-visible .en { color: var(--cream-soft); }
.region-pill--north:hover, .region-pill--north:focus-visible { background: var(--r-north); border-color: var(--r-north); }
.region-pill--northeast:hover, .region-pill--northeast:focus-visible { background: var(--r-northeast); border-color: var(--r-northeast); }
.region-pill--central:hover, .region-pill--central:focus-visible { background: var(--r-central); border-color: var(--r-central); }
.region-pill--south:hover, .region-pill--south:focus-visible { background: var(--r-south); border-color: var(--r-south); }
.region-pill--street:hover, .region-pill--street:focus-visible { background: var(--r-street); border-color: var(--r-street); }
.region-pill--signature:hover, .region-pill--signature:focus-visible { background: var(--r-signature); border-color: var(--r-signature); }
.region-pill--cocktails:hover, .region-pill--cocktails:focus-visible { background: var(--burgundy); border-color: var(--burgundy); }
/* ---------- Region Sections ---------- */
.region-section {
background-color: var(--cream);
padding-bottom: clamp(80px, 10vw, 120px);
scroll-margin-top: 80px;
}
.region-section__hero {
position: relative;
min-height: clamp(280px, 38vw, 420px);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--cream-soft);
overflow: visible;
padding: 80px 0;
margin-bottom: 84px;
}
.region-section__hero-overlay {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.region-section__hero-content {
position: relative;
z-index: 2;
}
.region-section__hero h2 {
font-size: clamp(56px, 8vw, 104px);
color: var(--cream-soft);
font-weight: 300;
margin: 4px 0 8px;
letter-spacing: -0.015em;
}
/* Region sticker — hand-painted watercolor cultural illustration.
Positioned to overlap the hero/menu boundary so the sticker's residual
cream wash blends invisibly into the cream menu area below. */
.region-sticker {
position: absolute;
right: clamp(18px, 4vw, 72px);
/* Premium watercolor dish illustration — upright, floating on the dark hero */
top: 50%;
transform: translateY(-50%);
width: clamp(180px, 24vw, 300px);
height: auto;
z-index: 4;
pointer-events: none;
transition: transform 0.7s var(--ease), filter 0.6s var(--ease);
filter:
drop-shadow(0 20px 34px rgba(0, 0, 0, 0.45))
drop-shadow(0 4px 10px rgba(184, 153, 104, 0.4));
}
.region-section:hover .region-sticker {
transform: translateY(-50%) scale(1.045);
}
.region-section__hero-content {
max-width: 760px;
position: relative;
z-index: 2;
}
/* Sticker is now inside hero — no extra room needed */
.region-section__hero { margin-bottom: 64px; }
@media (max-width: 960px) {
.region-sticker {
width: clamp(170px, 26vw, 250px);
right: clamp(8px, 3vw, 32px);
}
}
@media (max-width: 720px) {
/* Stack the hero vertically: text, then the dish illustration centered below */
.region-section__hero {
display: block;
min-height: 0;
padding: 44px 0 38px;
margin-bottom: 24px;
}
.region-sticker {
position: relative;
right: auto;
top: auto;
bottom: auto;
width: 250px;
margin: 18px auto 0;
display: block;
transform: none !important;
animation: none;
transition: none;
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
}
.region-section:hover .region-sticker {
transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.region-sticker { transition: none; }
}
.region-section__hero .eyebrow { color: var(--gold-on-dark); }
.region-section__thai {
font-family: var(--font-thai);
font-size: clamp(16px, 1.6vw, 20px);
color: var(--gold-on-dark);
margin: 18px 0 0;
font-weight: 400;
letter-spacing: 0.06em;
opacity: 0.75;
order: 3;
}
/* Editorial left-aligned region hero — name + long flavor description at the side */
.region-section__hero { justify-content: flex-start; text-align: left; }
.region-section__hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
max-width: 1200px;
}
.region-section__hero-content .region-section__thai { order: 1; }
.region-section__hero-content h2 { order: 2; text-align: left; }
.region-section__hero-content .region-section__desc { order: 3; }
.region-section__hero-content .lead { order: 4; margin-top: 22px; }
.region-section__hero h2 { margin: 2px 0 0; }
.region-section__thai { margin: 0 0 2px !important; opacity: 0.9 !important; order: 1; }
.region-section__desc {
color: rgba(252, 247, 240, 0.97);
font-family: var(--font-display);
font-size: clamp(16px, 1.55vw, 19px);
line-height: 1.72;
max-width: 560px;
margin: 20px 0 0;
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.region-section__hero .lead {
color: rgba(251, 247, 238, 0.9);
max-width: 620px;
margin: 0;
}
/* On tablet widths the sticker overlaps the text, so dim it for readability.
On phones (<=720px) it stacks BELOW the text, so keep it bright like desktop. */
@media (max-width: 860px) {
.region-section__desc { max-width: 100%; }
}
@media (min-width: 721px) and (max-width: 860px) {
.region-sticker { opacity: 0.32; }
}
/* Region-specific hero backgrounds */
.region-section--north .region-section__hero-overlay {
background:
linear-gradient(rgba(20, 35, 25, 0.78), rgba(20, 35, 25, 0.78)),
linear-gradient(135deg, #4F6B5A 0%, #2D4337 100%);
}
.region-section--northeast .region-section__hero-overlay {
background:
linear-gradient(rgba(60, 30, 12, 0.78), rgba(60, 30, 12, 0.78)),
linear-gradient(135deg, #9B5E2E 0%, #5C3818 100%);
}
.region-section--central .region-section__hero-overlay {
background:
linear-gradient(rgba(40, 28, 12, 0.72), rgba(40, 28, 12, 0.78)),
linear-gradient(135deg, #8C6F3F 0%, #4A3818 100%);
}
.region-section--south .region-section__hero-overlay {
background:
linear-gradient(rgba(15, 32, 38, 0.78), rgba(15, 32, 38, 0.78)),
linear-gradient(135deg, #3F6772 0%, #1F3942 100%);
}
.region-section--street .region-section__hero-overlay {
background:
linear-gradient(rgba(28, 18, 10, 0.82), rgba(28, 18, 10, 0.82)),
linear-gradient(135deg, #6E4A30 0%, #3A2818 100%);
}
.region-section--signature .region-section__hero-overlay {
background:
linear-gradient(rgba(30, 14, 22, 0.78), rgba(30, 14, 22, 0.78)),
linear-gradient(135deg, #6B3A4F 0%, #3A1E2A 100%);
}
/* ---------- Menu Sub-categories (Starters / Mains) ---------- */
.menu-subcat {
margin-bottom: 48px;
}
.menu-subcat:last-child { margin-bottom: 0; }
.menu-subcat__title {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-deep);
text-align: center;
font-weight: 600;
margin: 0 0 36px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
position: relative;
}
.menu-subcat__title::before,
.menu-subcat__title::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
width: 40px;
height: 1px;
background: var(--gold);
transform: translateX(-50%);
}
/* Region-themed subcat colors */
.region-section--north .menu-subcat__title { color: var(--r-north); }
.region-section--north .menu-subcat__title::before, .region-section--north .menu-subcat__title::after { background: var(--r-north); }
.region-section--northeast .menu-subcat__title { color: var(--r-northeast); }
.region-section--northeast .menu-subcat__title::before, .region-section--northeast .menu-subcat__title::after { background: var(--r-northeast); }
.region-section--central .menu-subcat__title { color: var(--r-central); }
.region-section--central .menu-subcat__title::before, .region-section--central .menu-subcat__title::after { background: var(--r-central); }
.region-section--south .menu-subcat__title { color: var(--r-south); }
.region-section--south .menu-subcat__title::before, .region-section--south .menu-subcat__title::after { background: var(--r-south); }
.region-section--street .menu-subcat__title { color: var(--r-street); }
.region-section--street .menu-subcat__title::before, .region-section--street .menu-subcat__title::after { background: var(--r-street); }
.region-section--signature .menu-subcat__title { color: var(--r-signature); }
.region-section--signature .menu-subcat__title::before, .region-section--signature .menu-subcat__title::after { background: var(--r-signature); }
/* ---------- Dish Cards ---------- */
.dish-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
margin-bottom: 40px;
}
.dish-card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
background-color: var(--cream-soft);
border: 1px solid var(--line-soft);
padding: 16px;
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.dish-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -20px rgba(61, 40, 23, 0.18);
}
.dish-card__image {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
background: var(--cream-warm);
}
.dish-card__image picture, .dish-card__image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 1.2s var(--ease);
}
.dish-card:hover .dish-card__image img { transform: scale(1.05); }
/* Art placeholder for dishes without photos — uses Thai script as art */
.dish-card__image--art {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(140deg, var(--cream-warm) 0%, var(--cream) 100%);
position: relative;
}
.dish-card__image--art::before {
content: '';
position: absolute;
inset: 12px;
border: 1px solid var(--gold);
opacity: 0.4;
pointer-events: none;
}
.dish-card__image--art::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 80%, rgba(184, 153, 104, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(184, 153, 104, 0.1) 0%, transparent 50%);
}
.dish-card__art {
font-family: var(--font-thai);
font-size: clamp(28px, 3.5vw, 40px);
color: var(--gold-deep);
text-align: center;
font-weight: 500;
line-height: 1.1;
position: relative;
z-index: 1;
padding: 12px;
letter-spacing: -0.01em;
}
.dish-card__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 12px 8px 0;
}
.dish-card__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 12px;
}
.dish-card__name {
font-family: var(--font-display);
font-size: clamp(22px, 2.2vw, 28px);
color: var(--ink);
line-height: 1.12;
font-weight: 400;
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.dish-card__thai {
font-family: var(--font-thai);
font-size: 12px;
color: var(--gold-deep);
font-weight: 400;
letter-spacing: 0.06em;
opacity: 0.7;
}
.dish-card__price {
font-family: var(--font-display);
font-size: clamp(17px, 1.8vw, 20px);
color: var(--ink);
white-space: nowrap;
}
.dish-card__desc {
font-size: 14px;
line-height: 1.6;
color: var(--ink-soft);
margin-bottom: 12px;
}
.dish-card__tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* Region-themed dish card accents */
.region-section--north .dish-card__image--art { background: linear-gradient(140deg, var(--r-north-soft) 0%, var(--cream) 100%); }
.region-section--north .dish-card__image--art::before { border-color: var(--r-north); opacity: 0.5; }
.region-section--north .dish-card__art { color: var(--r-north); }
.region-section--north .dish-card__thai { color: var(--r-north); }
.region-section--northeast .dish-card__image--art { background: linear-gradient(140deg, var(--r-northeast-soft) 0%, var(--cream) 100%); }
.region-section--northeast .dish-card__image--art::before { border-color: var(--r-northeast); opacity: 0.5; }
.region-section--northeast .dish-card__art { color: var(--r-northeast); }
.region-section--northeast .dish-card__thai { color: var(--r-northeast); }
.region-section--central .dish-card__image--art { background: linear-gradient(140deg, var(--r-central-soft) 0%, var(--cream) 100%); }
.region-section--central .dish-card__image--art::before { border-color: var(--r-central); opacity: 0.5; }
.region-section--central .dish-card__art { color: var(--r-central); }
.region-section--central .dish-card__thai { color: var(--r-central); }
.region-section--south .dish-card__image--art { background: linear-gradient(140deg, var(--r-south-soft) 0%, var(--cream) 100%); }
.region-section--south .dish-card__image--art::before { border-color: var(--r-south); opacity: 0.5; }
.region-section--south .dish-card__art { color: var(--r-south); }
.region-section--south .dish-card__thai { color: var(--r-south); }
.region-section--street .dish-card__image--art { background: linear-gradient(140deg, var(--r-street-soft) 0%, var(--cream) 100%); }
.region-section--street .dish-card__image--art::before { border-color: var(--r-street); opacity: 0.5; }
.region-section--street .dish-card__art { color: var(--r-street); }
.region-section--street .dish-card__thai { color: var(--r-street); }
.region-section--signature .dish-card__image--art { background: linear-gradient(140deg, var(--r-signature-soft) 0%, var(--cream) 100%); }
.region-section--signature .dish-card__image--art::before { border-color: var(--r-signature); opacity: 0.5; }
.region-section--signature .dish-card__art { color: var(--r-signature); }
.region-section--signature .dish-card__thai { color: var(--r-signature); }
/* Photo dishes — feature a bit larger */
.dish-card--photo {
grid-column: span 2;
grid-template-columns: 320px 1fr;
}
.dish-card--photo .dish-card__name {
font-size: clamp(24px, 2.4vw, 30px);
}
/* Cocktail image (smaller, inline-left) */
.cocktail__image {
grid-column: 1 / -1;
aspect-ratio: 5/4;
overflow: hidden;
margin-bottom: 14px;
background: var(--cream-warm);
}
.cocktail__image img, .cocktail__image picture {
width: 100%; height: 100%;
display: block;
object-fit: cover;
transition: transform 1.2s var(--ease);
}
.cocktail:hover .cocktail__image img { transform: scale(1.04); }
/* Adjust cocktail card to grid with image */
.cocktail {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 16px;
padding: 20px 0;
border-bottom: 1px solid var(--line-soft);
align-content: start;
}
.cocktail__name { grid-row: 2; grid-column: 1; }
.cocktail__price { grid-row: 2; grid-column: 2; align-self: baseline; }
.cocktail__desc { grid-row: 3; grid-column: 1 / -1; }
/* ---------- Cocktails Section ---------- */
.cocktails {
background-color: var(--cream);
padding-bottom: clamp(80px, 10vw, 120px);
scroll-margin-top: 80px;
}
.cocktails__hero {
position: relative;
min-height: clamp(280px, 38vw, 420px);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--cream-soft);
overflow: hidden;
padding: 80px 0;
margin-bottom: 64px;
}
.cocktails__hero-overlay {
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(rgba(20, 15, 25, 0.78), rgba(20, 15, 25, 0.82)),
linear-gradient(135deg, var(--burgundy) 0%, #2A1F17 100%);
}
.cocktails__hero-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.cocktails__hero-content .eyebrow { color: var(--gold-on-dark); order: 1; }
.cocktails__hero-content h2 {
font-size: clamp(56px, 8vw, 104px);
color: var(--cream-soft);
font-weight: 300;
margin: 4px 0 8px;
letter-spacing: -0.015em;
order: 2;
}
.cocktails__hero-content .region-section__thai { order: 3; color: var(--gold-on-dark); }
.cocktails__hero-content .lead {
color: rgba(251, 247, 238, 0.9);
max-width: 620px;
margin: 22px auto 0;
order: 4;
}
.cocktails__intro {
max-width: 720px;
margin: 0 auto 56px;
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: 18px;
line-height: 1.55;
color: var(--ink-soft);
}
.cocktails__menu {
margin: 0 auto 64px;
max-width: 1200px;
position: relative;
}
.cocktails__menu picture, .cocktails__menu img {
width: 100%;
display: block;
box-shadow: 0 30px 80px -30px rgba(61, 40, 23, 0.4);
}
.cocktails__menu figcaption {
text-align: center;
margin-top: 18px;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
/* ---------- Drink Menu Page (full-bleed PDF page) ---------- */
.cocktails__hint {
margin-top: 16px;
font-family: var(--font-sans);
font-style: normal;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 600;
}
.cocktails__hint::before { content: '↳ '; opacity: 0.6; }
.drink-page {
margin: 0 auto 56px;
max-width: 1280px;
text-align: center;
}
.drink-page > a {
display: block;
background-color: var(--cream-soft);
padding: 12px;
border: 1px solid var(--line);
box-shadow: 0 24px 60px -24px rgba(61, 40, 23, 0.28);
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
cursor: zoom-in;
position: relative;
}
.drink-page > a:hover, .drink-page > a:focus-visible {
transform: translateY(-4px);
box-shadow: 0 32px 80px -24px rgba(61, 40, 23, 0.4);
}
.drink-page picture, .drink-page img {
width: 100%;
height: auto;
display: block;
}
.drink-page figcaption {
margin-top: 18px;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
padding: 0 8px;
}
.drink-page figcaption > span {
font-family: var(--font-display);
font-size: 18px;
color: var(--ink);
font-style: italic;
}
.drink-page__zoom {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 600;
}
.drink-page__zoom:hover { color: var(--ink); }
.cocktails__cta {
text-align: center;
margin: 24px 0 16px;
}
/* Mobile: image displays large with horizontal scroll so menu text stays readable */
@media (max-width: 720px) {
.drink-page > a {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding: 8px;
cursor: pointer;
position: relative;
/* Subtle gradient edges suggesting horizontal scroll */
background:
linear-gradient(90deg, var(--cream-soft), transparent 10%, transparent 90%, var(--cream-soft)),
var(--cream-soft);
}
.drink-page picture, .drink-page img {
/* Render at 1.6x viewport width so text inside the menu image is readable on phones */
width: 160vw;
max-width: none;
}
.drink-page::after {
content: '↔ swipe to read';
display: block;
text-align: center;
margin-top: 8px;
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 600;
opacity: 0.7;
}
.drink-page figcaption {
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.drink-page figcaption > span {
font-size: 15px;
}
}
.cocktails__section-head {
text-align: center;
margin: 64px 0 40px;
}
.cocktails__section-head .eyebrow { color: var(--gold-deep); margin-bottom: 8px; display: inline-block; }
.cocktails__section-head h3 {
font-size: clamp(28px, 3.5vw, 42px);
color: var(--ink);
font-weight: 400;
}
.cocktails__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px 64px;
max-width: 1000px;
margin: 0 auto;
}
.cocktail {
padding: 20px 4px;
border-bottom: 1px solid var(--line-soft);
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 16px;
}
.cocktail__name {
font-family: var(--font-display);
font-size: 22px;
color: var(--ink);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.005em;
grid-column: 1;
}
.cocktail__price {
font-family: var(--font-display);
font-size: 17px;
color: var(--ink);
white-space: nowrap;
align-self: baseline;
grid-column: 2;
}
.cocktail__price small {
font-size: 12px;
color: var(--ink-mute);
font-family: var(--font-sans);
letter-spacing: 0.04em;
}
.cocktail__desc {
font-size: 13.5px;
color: var(--ink-soft);
line-height: 1.55;
grid-column: 1 / -1;
}
.cocktail__tag {
display: inline-block;
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--burgundy);
border: 1px solid rgba(122, 46, 46, 0.3);
padding: 2px 8px;
margin-left: 8px;
vertical-align: middle;
font-weight: 600;
}
.cocktail--feature .cocktail__name {
color: var(--burgundy);
}
/* ---------- Old Menu Page (legacy keep) ---------- */
.menu-hero {
padding: 120px 0 60px;
background-color: var(--cream);
text-align: center;
}
.menu-hero .eyebrow { margin-bottom: 16px; }
.menu-hero p { max-width: 560px; margin: 24px auto 0; font-style: italic; font-family: var(--font-display); font-size: 19px; }
.menu-tabs {
display: flex;
gap: 32px;
justify-content: center;
flex-wrap: wrap;
margin: 56px 0 0;
padding: 0 var(--gutter);
border-bottom: 1px solid var(--line);
}
.menu-tab {
padding: 18px 12px;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 500;
color: var(--ink-mute);
border-bottom: 1px solid transparent;
margin-bottom: -1px;
transition: all 0.3s var(--ease);
min-height: 44px;
}
.menu-tab.active, .menu-tab:hover {
color: var(--ink);
border-bottom-color: var(--gold);
}
.menu-section {
padding: 80px 0;
background-color: var(--cream);
}
.menu-section + .menu-section { border-top: 1px solid var(--line-soft); }
.menu-section__head {
text-align: center;
margin-bottom: 64px;
}
.menu-section__thai {
font-family: var(--font-thai);
font-size: 36px;
color: var(--gold-deep);
margin-bottom: 8px;
}
.menu-section__head p {
max-width: 540px;
margin: 20px auto 0;
font-family: var(--font-display);
font-style: italic;
font-size: 18px;
}
.menu-list {
max-width: 920px;
margin: 0 auto;
padding: 0 var(--gutter);
}
.menu-cat {
margin-bottom: 64px;
}
.menu-cat__title {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-deep);
text-align: center;
margin-bottom: 32px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
font-weight: 500;
font-style: normal;
line-height: 1.4;
}
.menu-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
padding: 22px 0;
border-bottom: 1px solid var(--line-soft);
align-items: baseline;
}
.menu-item:last-child { border-bottom: none; }
.menu-item__name {
font-family: var(--font-display);
font-size: 22px;
color: var(--ink);
margin-bottom: 4px;
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.menu-item__tags {
display: inline-flex;
gap: 6px;
}
.tag {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 3px 9px;
border: 1px solid var(--line);
color: var(--ink-mute);
font-weight: 600;
white-space: nowrap;
}
.tag.spice-1 { color: #8B4A18; border-color: rgba(139, 74, 24, 0.5); } /* AA */
.tag.spice-2 { color: #7D3414; border-color: rgba(125, 52, 20, 0.5); } /* AA */
.tag.spice-3 { color: var(--burgundy); border-color: rgba(122, 46, 46, 0.5); }
.tag.gf { color: #3B5A2A; border-color: rgba(59, 90, 42, 0.5); } /* AA */
.tag.v { color: #3B5A2A; border-color: rgba(59, 90, 42, 0.5); }
.tag.signature { color: var(--gold-deep); border-color: var(--gold); background: rgba(184, 153, 104, 0.12); }
.menu-item__desc {
font-size: 14px;
line-height: 1.7;
color: var(--ink-soft);
font-family: var(--font-sans);
}
.menu-item__price {
font-family: var(--font-display);
font-size: 18px;
color: var(--ink);
white-space: nowrap;
padding-left: 12px;
}
.menu-key {
background: var(--cream-warm);
padding: 32px;
max-width: 920px;
margin: 40px auto 0;
display: flex;
flex-wrap: wrap;
gap: 28px;
justify-content: center;
font-size: 12px;
letter-spacing: 0.04em;
}
.menu-key strong {
font-family: var(--font-sans);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 10px;
color: var(--gold-deep);
margin-right: 6px;
}
/* ---------- Reservations Page ---------- */
.reserve-hero {
padding: 120px 0 60px;
background-color: var(--cream);
text-align: center;
}
.reserve-content {
background-color: var(--cream);
padding-bottom: 120px;
}
.reserve-block {
max-width: 760px;
margin: 0 auto;
padding: 0 var(--gutter);
}
.reserve-policies {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-top: 56px;
padding-top: 56px;
border-top: 1px solid var(--line);
}
.policy h4 {
font-family: var(--font-sans);
font-style: normal;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
margin-bottom: 14px;
}
.policy p {
font-family: var(--font-display);
font-size: 17px;
line-height: 1.55;
color: var(--ink);
}
.party-options {
background: var(--cream-warm);
padding: clamp(28px, 5vw, 48px);
margin: 56px 0;
text-align: center;
}
.party-options h3 { margin-bottom: 24px; }
.party-row {
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 24px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
align-items: center;
text-align: left;
}
.party-row:last-child { border-bottom: none; }
.party-size {
font-family: var(--font-display);
font-size: 22px;
color: var(--ink);
}
.party-method {
font-size: 14px;
color: var(--ink-soft);
}
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.nav__list, .nav__cta { display: none; }
.nav__burger { display: flex; }
.nav__burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.mobile-menu { display: flex; visibility: visible; }
.mobile-menu:not(.open) { transform: translateY(-100%); visibility: hidden; }
.mobile-menu.open { transform: translateY(0); visibility: visible; }
.mobile-menu a {
font-family: var(--font-display);
font-size: 28px;
color: var(--ink);
}
.story__grid,
.experience__grid,
.contact__grid,
.footer__grid {
grid-template-columns: 1fr;
gap: 48px;
}
/* Four regions: 2 × 2 equal-size grid on mobile, compact */
.regions__grid {
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: rgba(184, 153, 104, 0.18);
}
.regions__grid > .region {
padding: 28px 20px;
background: var(--teak);
}
/* Shorten content for compact display */
.region__intro {
font-size: 13px;
line-height: 1.5;
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
/* Limit to 4 lines for visual balance */
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.region h3 {
font-size: clamp(26px, 7vw, 34px);
margin-bottom: 4px;
}
.region__thai {
font-size: 14px;
margin-bottom: 14px;
}
.region__num {
font-size: 11px;
margin-bottom: 12px;
}
.featured__grid { grid-template-columns: 1fr; gap: 48px; }
.reserve-policies { grid-template-columns: 1fr; gap: 24px; }
.experience__details { grid-template-columns: 1fr; gap: 24px; }
.gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
.gallery__item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
.gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.party-row { grid-template-columns: 1fr; gap: 6px; text-align: center; }
.menu-item { grid-template-columns: 1fr; gap: 8px; }
.menu-item__price { padding-left: 0; }
/* Menu page — map explorer */
.explorer__stage { grid-template-columns: 1fr; gap: 32px; }
.menu-jump-groups { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 8px; }
.map-wrap { max-width: 380px; }
.map-panel { min-height: auto; }
.map-panel__card { position: relative !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; display: block !important; }
.map-panel__card:not([data-state="default"]) { display: none !important; }
.map-panel__card[data-state="default"] { display: block !important; }
/* Dish cards stack on mobile */
.dish-cards { grid-template-columns: 1fr; gap: 20px; }
.dish-card { grid-template-columns: 130px 1fr; gap: 16px; padding: 12px; }
.dish-card--photo { grid-column: span 1; grid-template-columns: 130px 1fr; }
.dish-card--photo .dish-card__name { font-size: 22px; }
.dish-card__art { font-size: 22px; }
/* Cocktails */
.cocktails__grid { grid-template-columns: 1fr; gap: 0 0; }
.cocktails__menu { margin-bottom: 48px; }
}
@media (max-width: 560px) {
.dish-card { grid-template-columns: 110px 1fr; gap: 14px; }
.dish-card--photo { grid-template-columns: 110px 1fr; }
.dish-card__art { font-size: 18px; }
.map-panel__dishes { grid-template-columns: 1fr; }
.region-pills { gap: 8px; padding: 24px 12px; }
.region-pill { min-width: 95px; padding: 12px 16px; }
}
@media (max-width: 560px) {
.regions__grid { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr; gap: 32px; }
.hero__actions { flex-direction: column; align-items: stretch; }
.hero__actions .btn { text-align: center; }
.menu-tabs { gap: 18px; overflow-x: auto; flex-wrap: nowrap; }
.menu-tab { white-space: nowrap; }
}
/* Print-friendly menu */
@media print {
.nav, .footer, .reserve-banner, .gallery, .menu-tabs { display: none; }
body { background: white; color: black; }
}
/* ==========================================================================
NAVIGATION HUB (homepage) — categorical cards
========================================================================== */
.nav-hub {
padding: 90px 0;
background: var(--ink-paper);
position: relative;
}
.nav-hub::before {
content: "";
position: absolute; inset: 0;
background-image: var(--thai-pattern);
background-size: 320px 320px;
opacity: 0.06;
pointer-events: none;
}
.nav-hub__head {
text-align: center;
margin-bottom: 56px;
position: relative;
z-index: 1;
}
.nav-hub__head h2 {
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 52px);
margin: 12px 0 0;
letter-spacing: -0.01em;
color: var(--ink);
}
.nav-hub__head h2 em {
color: var(--gold-deep);
font-style: italic;
}
.nav-hub__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
position: relative;
z-index: 1;
}
.nav-hub__card {
display: flex;
flex-direction: column;
padding: 32px 28px;
background: #fff;
border: 1px solid rgba(184, 134, 11, 0.18);
border-radius: 4px;
text-decoration: none;
color: var(--ink);
transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
box-shadow 0.4s ease,
border-color 0.4s ease;
position: relative;
overflow: hidden;
}
.nav-hub__card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-hub__card:hover,
.nav-hub__card:focus-visible {
transform: translateY(-4px);
border-color: var(--gold);
box-shadow: 0 18px 40px -16px rgba(94, 65, 27, 0.25);
}
.nav-hub__card:hover::before,
.nav-hub__card:focus-visible::before {
transform: scaleX(1);
}
.nav-hub__icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold-deep);
margin-bottom: 20px;
}
.nav-hub__icon svg {
width: 100%; height: 100%;
stroke-width: 1.4;
}
.nav-hub__title {
font-family: var(--font-display);
font-size: 26px;
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.nav-hub__thai {
font-family: var(--font-thai);
font-size: 14px;
color: var(--gold-deep);
margin-bottom: 14px;
opacity: 0.85;
}
.nav-hub__desc {
font-size: 14px;
line-height: 1.65;
color: var(--ink-mute);
margin: 0 0 22px;
flex: 1;
}
.nav-hub__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-deep);
border-bottom: 1px solid var(--gold);
align-self: flex-start;
padding-bottom: 2px;
transition: gap 0.3s ease;
}
.nav-hub__card:hover .nav-hub__cta {
gap: 10px;
}
.nav-hub__cta svg {
width: 14px; height: 14px;
stroke-width: 2;
}
@media (max-width: 900px) {
.nav-hub { padding: 64px 0; }
.nav-hub__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.nav-hub__card { padding: 26px 22px; }
.nav-hub__head { margin-bottom: 40px; }
}
@media (max-width: 540px) {
.nav-hub__grid { grid-template-columns: 1fr; gap: 14px; }
.nav-hub__card { padding: 24px 20px; }
.nav-hub__title { font-size: 22px; }
}
/* ==========================================================================
DIETARY FILTER — drawer + dish states
========================================================================== */
.section-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.section-nav__filter {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--ink);
color: #fff;
border: 1px solid var(--ink);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.section-nav__filter:hover,
.section-nav__filter:focus-visible {
background: var(--gold-deep);
border-color: var(--gold-deep);
transform: translateY(-1px);
}
.section-nav__filter[aria-expanded="true"] {
background: var(--gold-deep);
border-color: var(--gold-deep);
}
.section-nav__filter svg { flex-shrink: 0; }
.section-nav__filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: var(--gold);
color: var(--ink);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}
@media (max-width: 720px) {
.section-nav__filter-label { display: none; }
.section-nav__filter { padding: 10px 12px; }
}
.filter-overlay {
position: fixed; inset: 0;
background: rgba(20, 14, 6, 0.55);
backdrop-filter: blur(2px);
z-index: 90;
opacity: 0;
transition: opacity 0.35s ease;
cursor: pointer;
}
.filter-overlay.open { opacity: 1; }
.filter-drawer {
position: fixed;
top: 0; right: 0;
width: min(440px, 100%);
height: 100dvh;
background: var(--ink-paper);
z-index: 95;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
box-shadow: -20px 0 60px -20px rgba(0,0,0,0.3);
}
.filter-drawer.open { transform: translateX(0); }
.filter-drawer__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 28px 28px 20px;
border-bottom: 1px solid rgba(184, 134, 11, 0.18);
background: #fff;
}
.filter-drawer__title {
font-family: var(--font-display);
font-size: 30px;
margin: 8px 0 0;
letter-spacing: -0.005em;
color: var(--ink);
}
.filter-drawer__title em {
font-style: italic;
color: var(--gold-deep);
}
.filter-drawer__close {
width: 38px; height: 38px;
background: transparent;
border: 1px solid rgba(94, 70, 40, 0.18);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
}
.filter-drawer__close:hover,
.filter-drawer__close:focus-visible {
background: var(--ink);
color: #fff;
}
.filter-drawer__body {
flex: 1;
overflow-y: auto;
padding: 26px 28px;
}
.filter-group {
margin-bottom: 28px;
}
.filter-group__title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 14px;
}
.filter-group__title small {
flex-basis: 100%;
font-family: var(--font-display);
font-size: 13px;
font-style: italic;
font-weight: 400;
color: var(--ink-mute);
text-transform: none;
letter-spacing: 0;
margin-top: 4px;
margin-left: 22px;
}
.filter-dot {
width: 12px; height: 12px;
border-radius: 999px;
flex-shrink: 0;
}
.filter-dot--red { background: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15); }
.filter-dot--green { background: #5a8a3a; box-shadow: 0 0 0 3px rgba(90, 138, 58, 0.15); }
.filter-dot--amber { background: #d4a017; box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15); }
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-chip {
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
position: relative;
}
.filter-chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.filter-chip span {
display: inline-block;
padding: 8px 14px;
background: #fff;
border: 1px solid rgba(94, 70, 40, 0.2);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink);
transition: all 0.25s ease;
}
.filter-chip:hover span {
border-color: var(--gold);
color: var(--gold-deep);
}
.filter-chip input:checked + span {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.filter-group--allergy .filter-chip input:checked + span {
background: #c0392b;
border-color: #c0392b;
color: #fff;
}
.filter-group--diet .filter-chip input:checked + span {
background: #5a8a3a;
border-color: #5a8a3a;
color: #fff;
}
.filter-group--pref .filter-chip input:checked + span {
background: #d4a017;
border-color: #d4a017;
color: #fff;
}
.filter-chip input:focus-visible + span {
outline: 2px solid var(--gold-deep);
outline-offset: 2px;
}
.filter-strict {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px;
background: #fff;
border: 1px solid rgba(94, 70, 40, 0.15);
border-radius: 4px;
cursor: pointer;
}
.filter-strict input {
width: 20px; height: 20px;
margin-top: 2px;
accent-color: var(--gold-deep);
cursor: pointer;
flex-shrink: 0;
}
.filter-strict strong {
display: block;
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink);
margin-bottom: 4px;
}
.filter-strict span {
display: block;
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--ink-mute);
line-height: 1.5;
}
.filter-disclaimer {
display: flex;
gap: 12px;
padding: 14px 16px;
background: rgba(212, 160, 23, 0.08);
border-left: 3px solid var(--gold-deep);
border-radius: 0 4px 4px 0;
margin-top: 8px;
}
.filter-disclaimer svg {
flex-shrink: 0;
color: var(--gold-deep);
margin-top: 2px;
}
.filter-disclaimer p {
font-family: var(--font-display);
font-size: 13px;
font-style: italic;
color: var(--ink);
line-height: 1.55;
margin: 0;
}
.filter-drawer__footer {
display: flex;
gap: 10px;
padding: 18px 28px 26px;
border-top: 1px solid rgba(184, 134, 11, 0.18);
background: #fff;
}
.filter-drawer__clear {
padding: 12px 18px;
background: transparent;
border: 1px solid rgba(94, 70, 40, 0.25);
border-radius: 2px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
cursor: pointer;
transition: all 0.25s ease;
}
.filter-drawer__clear:hover {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.filter-drawer__apply { flex: 1; }
@media (max-width: 600px) {
.filter-drawer {
width: 100%;
max-height: 92dvh;
top: auto;
bottom: 0;
height: auto;
border-radius: 16px 16px 0 0;
transform: translateY(100%);
}
.filter-drawer.open { transform: translateY(0); }
.filter-drawer__header { padding: 22px 22px 16px; }
.filter-drawer__body { padding: 20px 22px; }
.filter-drawer__footer { padding: 14px 22px 18px; }
}
/* Dish card filtered states */
.dish-card[data-filtered="hidden"] { display: none !important; }
.dish-card[data-filtered="modify"] { position: relative; }
.dish-card[data-filtered="modify"]::after {
content: "Ask server to modify";
position: absolute;
top: 12px; left: 12px;
background: #d4a017;
color: #fff;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 2px;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.18);
z-index: 2;
pointer-events: none;
}
/* Empty state when all dishes filtered out in a region */
.region-section[data-empty="true"] .menu-subcat,
.region-section[data-empty="true"] .menu-key {
display: none;
}
.region-section[data-empty="true"] > .container::after {
content: "No dishes match your filters in this region.";
display: block;
text-align: center;
padding: 60px 20px;
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
color: var(--ink-mute);
}
/* ==========================================================================
REGION-SECTION BULLETS — flavor markers in each region intro
========================================================================== */
.region-section__bullets {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 520px;
}
.region-section__bullets li {
position: relative;
padding-left: 28px;
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
line-height: 1.5;
color: var(--ink);
opacity: 0.92;
}
.region-section__bullets li::before {
content: "";
position: absolute;
left: 0;
top: 12px;
width: 18px;
height: 1px;
background: var(--gold-deep);
opacity: 0.7;
}
.region-section--north .region-section__bullets li::before { background: var(--r-north); }
.region-section--northeast .region-section__bullets li::before { background: var(--r-northeast); }
.region-section--central .region-section__bullets li::before { background: var(--r-central); }
.region-section--south .region-section__bullets li::before { background: var(--r-south); }
.region-section--street .region-section__bullets li::before { background: var(--r-street); }
.region-section--signature .region-section__bullets li::before { background: var(--r-signature); }
@media (max-width: 720px) {
.region-section__bullets li { font-size: 15px; padding-left: 24px; }
}
/* ==========================================================================
ANNOTATED MAP — region callouts with arrows around the Thailand map
Works on desktop (flanking) and mobile (2x2 below map)
========================================================================== */
/* Map-only explorer — annotations are baked into the SVG itself */
.explorer__map-only {
display: flex;
justify-content: center;
}
.explorer__map-only .map-wrap {
max-width: 560px;
}
@media (max-width: 600px) {
.explorer__map-only .map-wrap { max-width: 100%; }
}
.explorer__annotated {
display: grid;
grid-template-columns: minmax(210px, 1fr) minmax(260px, 380px) minmax(210px, 1fr);
grid-template-rows: auto auto;
grid-template-areas:
"north map northeast"
"central map south";
gap: 22px 30px;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.explorer__annotated .map-wrap {
grid-area: map;
grid-row: 1 / 3;
align-self: center;
}
.region-callout--north { grid-area: north; }
.region-callout--northeast { grid-area: northeast; }
.region-callout--central { grid-area: central; }
.region-callout--south { grid-area: south; }
.region-callout {
position: relative;
display: block;
background: #fff;
border: 1px solid rgba(184, 134, 11, 0.18);
border-left: 3px solid var(--rc-color, var(--gold));
border-radius: 6px;
padding: 16px 18px;
text-decoration: none;
color: var(--ink);
transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.region-callout--north { --rc-color: var(--r-north); }
.region-callout--northeast { --rc-color: var(--r-northeast); }
.region-callout--central { --rc-color: var(--r-central); }
.region-callout--south { --rc-color: var(--r-south); }
.region-callout:hover,
.region-callout:focus-visible,
.region-callout.is-active {
transform: translateY(-2px);
box-shadow: 0 14px 34px -16px rgba(94, 65, 27, 0.3);
border-color: var(--rc-color);
border-left-color: var(--rc-color);
}
.region-callout__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.region-callout__dot {
width: 10px; height: 10px;
border-radius: 999px;
background: var(--rc-color);
flex-shrink: 0;
}
.region-callout__name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
}
.region-callout__th {
font-family: var(--font-thai);
font-size: 13px;
color: var(--ink-mute);
margin-left: 4px;
}
.region-callout__list {
list-style: none;
margin: 0 0 12px;
padding: 0;
}
.region-callout__list li {
position: relative;
padding-left: 16px;
font-size: 13px;
line-height: 1.5;
color: var(--ink-mute);
margin-bottom: 4px;
}
.region-callout__list li::before {
content: "";
position: absolute;
left: 0; top: 9px;
width: 6px; height: 6px;
border-radius: 999px;
background: var(--rc-color);
opacity: 0.6;
}
.region-callout__cta {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rc-color);
transition: gap 0.3s ease;
}
.region-callout:hover .region-callout__cta { gap: 9px; }
/* Arrow pointing toward the map */
.region-callout::after {
content: "";
position: absolute;
width: 0; height: 0;
border: 9px solid transparent;
transition: border-color 0.3s ease;
}
/* left column → arrow on right edge, pointing right */
.region-callout--north::after,
.region-callout--central::after {
right: -18px; top: 50%; transform: translateY(-50%);
border-left-color: var(--rc-color);
}
/* right column → arrow on left edge, pointing left */
.region-callout--northeast::after,
.region-callout--south::after {
left: -18px; top: 50%; transform: translateY(-50%);
border-right-color: var(--rc-color);
}
.map-wrap__hint {
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--ink-mute);
margin: 12px 0 0;
}
/* MOBILE — map on top, callouts 2x2 below */
@media (max-width: 900px) {
.explorer__annotated {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"map map"
"north northeast"
"central south";
gap: 16px;
}
.explorer__annotated .map-wrap { grid-row: auto; max-width: 340px; margin: 0 auto 8px; }
/* arrows point UP toward the map for all cards */
.region-callout::after {
left: 50% !important;
right: auto !important;
top: -18px !important;
transform: translateX(-50%) !important;
border: 9px solid transparent !important;
border-bottom-color: var(--rc-color) !important;
}
.region-callout__name { font-size: 19px; }
}
@media (max-width: 420px) {
.explorer__annotated {
grid-template-columns: 1fr;
grid-template-areas:
"map"
"north"
"northeast"
"central"
"south";
}
/* arrow back to left edge pointing right on single column */
.region-callout::after {
left: -18px !important;
top: 28px !important;
transform: none !important;
border-bottom-color: transparent !important;
border-right-color: var(--rc-color) !important;
}
}
/* ==========================================================================
HOMEPAGE — Forest navy + dusty gold "luxurious but warm" palette
Matches reference: hero-reference.html
========================================================================== */
:root {
--navy: #1f3329;
--navy-deep: #16271e;
--brand-gold: #c2a25e;
--brand-gold-bright: #dcc187;
--brand-cream: #ede6d4;
}
body.home-body {
background: var(--ink-paper);
overflow-x: hidden;
}
/* Transparent nav over hero — solid on scroll */
.nav--transparent {
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.nav--transparent .nav__brand-text,
.nav--transparent .nav__list a {
color: var(--brand-cream);
text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
.nav--transparent .nav__brand-text small { color: var(--brand-gold-bright); opacity: 0.85; }
.nav--transparent .nav__cta {
background: transparent;
color: var(--brand-gold-bright);
border-color: var(--brand-gold);
}
.nav--transparent .nav__cta:hover {
background: var(--brand-gold);
color: var(--navy-deep);
border-color: var(--brand-gold);
}
.nav--transparent .nav__burger span { background: var(--brand-cream); }
.nav--transparent.scrolled {
background: rgba(252, 247, 240, 0.95);
backdrop-filter: saturate(140%) blur(12px);
border-bottom-color: rgba(184, 134, 11, 0.18);
box-shadow: 0 4px 20px -10px rgba(94, 65, 27, 0.15);
}
.nav--transparent.scrolled .nav__brand-text,
.nav--transparent.scrolled .nav__list a { color: var(--ink); text-shadow: none; }
.nav--transparent.scrolled .nav__brand-text small { color: var(--gold-deep); }
.nav--transparent.scrolled .nav__cta {
background: var(--ink); color: #fff; border-color: var(--ink);
}
.nav--transparent.scrolled .nav__cta:hover {
background: var(--gold-deep); border-color: var(--gold-deep);
}
.nav--transparent.scrolled .nav__burger span { background: var(--ink); }
/* ===== HOME HERO ===== */
.home-hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 96px 24px 60px;
box-sizing: border-box;
overflow: hidden;
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--brand-cream);
background:
radial-gradient(ellipse at 50% 35%, rgba(46, 66, 52, 0.6), transparent 70%),
linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
/* Single lotus mark, sparsely spaced — minimal & calm */
.home-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: none; /* hero kept plain dark green — green lotus pattern removed per owner (2026-06-30) */
}
/* deep vignette so buttons pop against quieter background */
.home-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(22, 39, 30, 0.42) 100%);
pointer-events: none;
}
/* Koi swimming in the lotus pond, beside the menu card */
.hero-koi {
position: absolute; z-index: 1; pointer-events: none;
width: min(26vw, 320px); aspect-ratio: 1083 / 590;
background: url("/img/decor/fish.webp") no-repeat center / contain;
opacity: 0.26;
}
.hero-koi--left { left: 1%; top: 28%; transform: scaleX(-1) rotate(-8deg); }
.hero-koi--right { right: 0%; top: 56%; transform: rotate(7deg); }
@media (max-width: 820px) { .hero-koi { display: none; } }
.home-hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 500px;
padding: 42px 40px 32px;
background: rgba(16, 27, 20, 0.42);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
border: 1px solid rgba(194, 162, 94, 0.6);
outline: 1px solid rgba(194, 162, 94, 0.3);
outline-offset: -7px;
border-radius: 2px;
box-shadow: 0 18px 50px rgba(8, 15, 11, 0.4);
animation: hero-rise 1s ease both;
}
@keyframes hero-rise {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: none; }
}
/* logo mark */
.home-hero__mark {
width: 96px;
height: 96px;
margin-bottom: 20px;
opacity: 0.97;
filter: drop-shadow(0 0 30px rgba(194, 162, 94, 0.25));
}
.home-hero__mark img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Brand wordmark */
.home-hero__brand {
font-family: 'Larken', 'Cormorant Garamond', serif;
font-size: 2.2rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--brand-gold-bright);
text-align: center;
line-height: 1.1;
text-transform: uppercase;
margin: 0;
}
.home-hero__brand-th {
display: block;
font-family: 'Noto Serif Thai', 'Cormorant Garamond', serif;
font-size: 1.7rem;
letter-spacing: 0.04em;
text-transform: none;
margin-top: 2px;
}
.home-hero__est {
font-family: 'Outfit', sans-serif;
font-size: 0.62rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: rgba(244, 236, 216, 0.55);
margin-top: 10px;
margin-bottom: 6px;
}
.home-hero__tagline {
font-family: var(--font-display);
font-style: italic;
font-size: 1.18rem;
color: rgba(244, 236, 216, 0.85);
text-align: center;
margin: 26px 0 30px;
}
/* Nav buttons */
.home-hero__buttons {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
align-items: center;
}
.hb {
font-family: var(--font-display);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--navy-deep);
text-decoration: none;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.04);
border-radius: 4px;
padding: 15px 20px;
background: #f4ecdb;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
display: block;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
.hb:hover,
.hb:focus-visible {
background: #fff;
color: var(--navy-deep);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
/* primary = Menu — slightly larger + gold accent on top */
.hb--primary {
width: 78%;
font-size: 1.35rem;
font-weight: 600;
background: #f6efe0;
box-shadow: 0 4px 22px rgba(0, 0, 0, 0.32);
position: relative;
overflow: hidden;
}
.hb--primary::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--brand-gold), transparent);
}
.hb--primary:hover {
background: #fff;
}
.hb--wide {
width: 72%;
font-size: 1.05rem;
}
.hb-row {
display: flex;
gap: 12px;
width: 72%;
justify-content: center;
}
.hb-row .hb {
flex: 1;
font-size: 0.82rem;
padding: 13px 8px;
}
/* ghost = transparent outline cream (for eGift) */
.hb--ghost {
width: 60%;
font-size: 0.92rem;
background: transparent;
color: var(--brand-cream);
border: 1px solid rgba(237, 230, 212, 0.45);
box-shadow: none;
font-weight: 400;
}
.hb--ghost:hover,
.hb--ghost:focus-visible {
background: rgba(237, 230, 212, 0.1);
color: var(--brand-gold-bright);
border-color: rgba(237, 230, 212, 0.6);
box-shadow: none;
}
.home-hero__cue {
margin-top: 38px;
font-family: 'Outfit', sans-serif;
font-size: 0.66rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(244, 236, 216, 0.45);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-decoration: none;
animation: hero-bob 2.4s ease-in-out infinite;
}
@keyframes hero-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(5px); }
}
.home-hero__cue:hover { color: var(--brand-gold-bright); }
.home-hero__cue-arrow {
font-size: 1rem;
color: var(--brand-gold);
line-height: 1;
}
/* Lift hero text off the lotus pattern so it reads clearly */
.home-hero__brand,
.home-hero__brand-th,
.home-hero__est,
.home-hero__tagline,
.home-hero__cue {
text-shadow: 0 2px 16px rgba(8, 15, 11, 0.8), 0 1px 3px rgba(8, 15, 11, 0.72);
}
.home-hero__est { color: rgba(244, 236, 216, 0.82); }
.home-hero__tagline { color: rgba(244, 236, 216, 0.97); }
.home-hero__cue { color: rgba(244, 236, 216, 0.74); }
@media (max-width: 540px) {
.home-hero { padding: 84px 20px 60px; }
.home-hero__inner { padding: 30px 22px 26px; }
.home-hero__mark { width: 80px; height: 80px; }
.home-hero__brand { font-size: 1.85rem; }
.home-hero__brand-th { font-size: 1.4rem; }
.hb--primary { width: 90%; font-size: 1.2rem; }
.hb--wide { width: 86%; font-size: 1rem; }
.hb-row { width: 86%; gap: 10px; }
.hb-row .hb { font-size: 0.74rem; padding: 12px 6px; }
.hb--ghost { width: 70%; font-size: 0.85rem; }
}
/* ===== HOME STORY ===== */
.home-story {
padding: 100px 0 80px;
background: var(--ink-paper);
text-align: center;
position: relative;
}
.home-story__inner {
max-width: 720px;
text-align: center;
}
.home-story__title {
font-family: var(--font-display);
font-size: clamp(34px, 5vw, 52px);
font-weight: 500;
margin: 14px 0 24px;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.15;
}
.home-story__title em {
font-style: italic;
color: var(--gold-deep);
}
.home-story__body {
font-family: var(--font-display);
font-size: clamp(17px, 2vw, 20px);
line-height: 1.7;
color: var(--ink);
margin: 0 0 30px;
}
.home-story__body p { margin: 0 0 18px; }
.home-story__body p:last-child { margin-bottom: 0; }
.home-story__close em {
font-style: italic;
color: var(--gold-deep);
}
.home-story__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-deep);
text-decoration: none;
border-bottom: 1px solid var(--gold);
padding-bottom: 2px;
margin-top: 14px;
transition: gap 0.3s;
}
.home-story__link:hover { gap: 12px; }
/* ===== HOME SIGNATURES ===== */
.home-signatures {
padding: 80px 0 100px;
background: #fff;
position: relative;
}
.home-signatures::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--thai-pattern);
background-size: 280px 280px;
opacity: 0.04;
pointer-events: none;
}
.home-signatures__head {
text-align: center;
margin-bottom: 48px;
position: relative;
}
.home-signatures__head h2 {
font-family: var(--font-display);
font-size: clamp(34px, 5vw, 52px);
font-weight: 500;
margin: 12px 0 12px;
letter-spacing: -0.01em;
color: var(--ink);
}
.home-signatures__head h2 em { font-style: italic; color: var(--gold-deep); }
.home-signatures__head p {
font-family: var(--font-display);
font-style: italic;
font-size: 18px;
color: var(--ink-mute);
margin: 0;
}
.home-signatures__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
position: relative;
}
@media (max-width: 1040px) {
.home-signatures__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 720px; margin: 0 auto; }
}
@media (max-width: 540px) {
.home-signatures__grid { grid-template-columns: 1fr; gap: 18px; max-width: 420px; }
}
.home-sig {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(184, 134, 11, 0.16);
border-radius: 6px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.home-sig:hover {
transform: translateY(-4px);
border-color: var(--gold);
box-shadow: 0 20px 50px -20px rgba(94, 65, 27, 0.25);
}
.home-sig__image {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--ink-paper);
}
.home-sig__image img,
.home-sig__image picture {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.home-sig:hover .home-sig__image img { transform: scale(1.05); }
.home-sig__body {
padding: 22px 24px 26px;
flex: 1;
display: flex;
flex-direction: column;
}
.home-sig__region {
display: inline-block;
font-family: var(--font-sans);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold-deep);
margin-bottom: 8px;
}
.home-sig__body h3 {
font-family: var(--font-display);
font-size: 26px;
font-weight: 500;
margin: 0 0 2px;
letter-spacing: -0.005em;
line-height: 1.15;
}
.home-sig__thai {
font-family: var(--font-thai);
font-size: 14px;
color: var(--ink-mute);
margin-bottom: 14px;
}
.home-sig__body p {
font-family: var(--font-display);
font-style: italic;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
margin: 0;
opacity: 0.85;
}
.home-signatures__cta {
text-align: center;
margin-top: 48px;
position: relative;
}
/* ===== HOME VISIT ===== */
.home-visit {
padding: 90px 0 80px;
background: linear-gradient(180deg, var(--ink-paper) 0%, #f4ecdf 100%);
position: relative;
}
.home-visit__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 900px) {
.home-visit__inner { grid-template-columns: 1fr; gap: 32px; }
}
.home-visit__copy h2 {
font-family: var(--font-display);
font-size: clamp(30px, 4vw, 44px);
font-weight: 500;
margin: 14px 0 18px;
letter-spacing: -0.005em;
line-height: 1.15;
color: var(--ink);
}
.home-visit__copy p {
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
color: var(--ink-mute);
line-height: 1.55;
margin: 0 0 28px;
}
.home-visit__details {
display: grid;
gap: 18px;
margin: 0 0 28px;
}
.home-visit__details div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; }
.home-visit__details dt {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold-deep);
padding-top: 2px;
}
.home-visit__details dd {
margin: 0;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.6;
color: var(--ink);
}
.home-visit__details dd span { display: block; }
.home-visit__details dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.home-visit__details dd a:hover { color: var(--gold-deep); }
.home-visit__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.home-visit__map {
aspect-ratio: 4 / 5;
background: #ddd;
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(184, 134, 11, 0.18);
box-shadow: 0 14px 40px -16px rgba(94, 65, 27, 0.2);
}
@media (max-width: 900px) { .home-visit__map { aspect-ratio: 4 / 3; } }
.home-visit__map a,
.home-visit__map iframe,
.home-visit__map img,
.home-visit__map picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-visit__map img { transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.home-visit__map:hover img { transform: scale(1.04); }
@media (max-width: 540px) {
.home-visit__details div { grid-template-columns: 1fr; gap: 4px; }
}
/* Footer social links (Facebook · Instagram · Yelp) */
.footer__social {
display: flex;
align-items: center;
gap: 18px;
margin-top: 18px;
}
.footer__social a {
display: inline-flex;
align-items: center;
color: var(--cream-soft, #f3efe6);
opacity: 0.65;
text-decoration: none;
transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.footer__social a:hover,
.footer__social a:focus-visible {
opacity: 1;
color: var(--gold);
transform: translateY(-1px);
}
.footer__social svg { width: 20px; height: 20px; display: block; }
.footer__social-text {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
}
/* ============================================================
OWNER-ART DECORATION — textures + gold filigree ornaments
============================================================ */
/* Subtle seigaiha paper texture on the bare cream Story section */
.home-story { position: relative; overflow: hidden; }
.home-story::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: url("/img/decor/texture-seigaiha.webp") repeat;
background-size: 300px;
opacity: 0.28;
pointer-events: none;
}
.home-story__inner { position: relative; z-index: 1; }
/* Official white brand lockup in the footer + faint gold koi watermark */
.footer { position: relative; overflow: hidden; }
.footer__brand-logo {
width: 180px; height: auto; display: block;
margin-bottom: 18px; opacity: 0.96;
}
.footer::after {
content: ""; position: absolute; z-index: 0; pointer-events: none;
right: -50px; bottom: -40px;
width: min(44vw, 480px); aspect-ratio: 1083 / 590;
background: url("/img/decor/fish.webp") no-repeat center / contain;
opacity: 0.14;
}
.footer .container { position: relative; z-index: 1; }
/* Subtle paper texture on the other cream homepage sections */
.home-signatures, .home-visit { position: relative; overflow: hidden; }
.home-signatures::before, .home-visit::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: url("/img/decor/texture-seigaiha.webp") repeat;
background-size: 300px; opacity: 0.2; pointer-events: none;
}
/* Cream seigaiha texture RESTORED on the lower homepage sections — owner likes it; the green hero lotus is removed instead. (2026-06-30) */
/* Keep the koi fully on-screen on phones (no half-cut fish) */
@media (max-width: 720px) {
.home-signatures::after { left: 0; bottom: 0; width: min(42vw, 162px); }
.home-visit::after { right: 0; top: 8px; width: min(42vw, 162px); }
}
.home-signatures > .container, .home-visit > .container { position: relative; z-index: 1; }
/* Faint gold koi drifting through the home sections (echoes the footer koi) */
.home-signatures::after, .home-visit::after {
content: ""; position: absolute; z-index: 0; pointer-events: none;
width: min(44vw, 480px); aspect-ratio: 1083 / 590;
background: url("/img/decor/fish.webp") no-repeat center / contain;
opacity: 0.2;
}
.home-signatures::after { left: -60px; bottom: -40px; transform: scaleX(-1); }
.home-visit::after { right: -50px; top: -28px; }
/* Koi accents on the menu map-explorer and the reservations page */
.explorer { position: relative; overflow: hidden; }
.explorer > .container, .explorer__map-only { position: relative; z-index: 1; }
.explorer::after {
content: ""; position: absolute; z-index: 0; pointer-events: none;
width: min(40vw, 440px); aspect-ratio: 1083 / 590;
background: url("/img/decor/fish.webp") no-repeat center / contain;
opacity: 0.18; left: -50px; bottom: 20px; transform: scaleX(-1);
}
.reserve-content { position: relative; overflow: hidden; }
.reserve-block { position: relative; z-index: 1; }
.reserve-content::after {
content: ""; position: absolute; z-index: 0; pointer-events: none;
width: min(40vw, 450px); aspect-ratio: 1083 / 590;
background: url("/img/decor/fish.webp") no-repeat center / contain;
opacity: 0.2; left: -56px; top: 50px; transform: scaleX(-1);
}
/* Page-wide subtle paper texture for cream pages (menu, reservations) */
.paper-bg::before {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background: url("/img/decor/texture-seigaiha.webp") repeat;
background-size: 300px;
opacity: 0.22;
}
/* ============================================================
DISH LIGHTBOX — tap a dish card to enlarge it (same page)
============================================================ */
.dish-card { cursor: pointer; }
.dish-modal {
position: fixed; inset: 0; z-index: 1200;
display: flex; align-items: center; justify-content: center;
padding: 18px; opacity: 0; transition: opacity 0.24s ease;
}
.dish-modal[hidden] { display: none; }
.dish-modal.open { opacity: 1; }
.dish-modal__overlay {
position: absolute; inset: 0;
background: rgba(22, 39, 30, 0.82);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.dish-modal__panel {
position: relative; z-index: 1;
background: #efe7d6 url("/img/decor/paper.webp") top center / cover;
border-radius: 12px; overflow: hidden;
width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto;
box-shadow: 0 30px 90px -24px rgba(0, 0, 0, 0.7);
transform: translateY(14px) scale(0.97);
transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dish-modal.open .dish-modal__panel { transform: none; }
.dish-modal__close {
position: absolute; top: 12px; right: 12px; z-index: 3;
width: 42px; height: 42px; border: 0; border-radius: 50%;
background: rgba(20, 30, 22, 0.55); color: #fff; font-size: 15px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s ease;
}
.dish-modal__close:hover { background: rgba(20, 30, 22, 0.85); }
.dish-modal__content .dish-card__image { width: 100%; height: min(42vh, 320px); background: #e7ddc9; }
.dish-modal__content .dish-card__image--art { display: flex; align-items: center; justify-content: center; }
.dish-modal__content .dish-card__image picture,
.dish-modal__content .dish-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dish-modal__content .dish-card__art { font-size: clamp(28px, 8vw, 40px); }
.dish-modal__content .dish-card__body { padding: 26px 30px 30px; }
.dish-modal__content .dish-card__name { font-size: clamp(26px, 6vw, 32px); }
.dish-modal__content .dish-card__thai { font-size: 18px; margin-top: 3px; }
.dish-modal__content .dish-card__price { font-size: 24px; }
.dish-modal__content .dish-card__desc { font-size: clamp(17px, 4.4vw, 19px); line-height: 1.65; margin-top: 14px; }
.dish-modal__content .dish-card__tags { margin-top: 16px; }
/* ============ Region-hero motif patterns (faint, per region) ============ */
.region-section--north .region-section__hero::after,
.region-section--central .region-section__hero::after,
.region-section--northeast .region-section__hero::after,
.region-section--south .region-section__hero::after,
.region-section--signature .region-section__hero::after,
.region-section--street .region-section__hero::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.region-section--signature .region-section__hero::after,
.region-section--street .region-section__hero::after {
background: url("/img/patterns/lotus-flame.svg") repeat; background-size: 84px 112px; opacity: 0.1;
}
.region-section--north .region-section__hero::after,
.region-section--central .region-section__hero::after {
background: url("/img/patterns/lotus-flame.svg") repeat; background-size: 84px 112px; opacity: 0.1;
}
.region-section--northeast .region-section__hero::after {
background: url("/img/patterns/ikat.svg") repeat; background-size: 56px 56px; opacity: 0.12;
}
.region-section--south .region-section__hero::after {
background: url("/img/patterns/waves.svg") repeat; background-size: 96px 32px; opacity: 0.11;
}
.cocktails__hero::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: url("/img/patterns/lotus-flame.svg") repeat; background-size: 84px 112px; opacity: 0.09;
}
/* ============ Owner-recommended dishes (gold badge + pulled to top of section) ============ */
.dish-card.is-recommended {
position: relative;
padding-top: 44px;
border-color: rgba(150, 46, 36, 0.55);
}
.dish-rec-badge {
position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none;
height: 30px; display: flex; align-items: center; justify-content: center; gap: 11px;
background: linear-gradient(90deg, #8a2a20 0%, #ab4034 50%, #8a2a20 100%);
color: #f4ecda;
font-family: 'Outfit', sans-serif; font-size: 10.5px; font-weight: 500;
letter-spacing: 0.26em; text-transform: uppercase;
}
.dish-rec-badge::before, .dish-rec-badge::after {
content: "\2666"; font-size: 7px; opacity: 0.85; letter-spacing: 0; color: #e6c47c;
}
/* ============ Thailand-map stickers (overlaid; map stays clickable) ============ */
.map-stickers { position: absolute; inset: 0 0 34px 0; pointer-events: none; z-index: 3; }
.map-sticker { position: absolute; height: auto; }
/* region collage markers at the corners (clear of the SVG name pills) */
.ms-north { top: -1%; left: -1%; width: 22%; }
.ms-northeast { top: 25%; right: -1%; width: 23%; }
.ms-central { top: 47%; left: -3%; width: 22%; }
.ms-south { top: 66%; right: 18%; width: 21%; }
/* dishes grouped inside each region, kept clear of that region's name pill */
.ms-khaosoi { top: 3%; left: 45%; width: 16%; } /* North */
.ms-somtum { top: 42%; left: 57%; width: 14%; } /* North-East — below its pill */
.ms-tomyum { top: 42%; left: 30%; width: 16%; } /* Central — above pill, left */
.ms-padthai { top: 43%; left: 47%; width: 13%; } /* Central — above pill, right */
.ms-greencurry { top: 59%; left: 33%; width: 13%; } /* Central — below pill, left */
.ms-mango { top: 59%; left: 47%; width: 12%; } /* Central — below pill, right */
.ms-massaman { top: 69%; left: 31%; width: 15%; } /* South — above pill */
.ms-satay { top: 85%; left: 31%; width: 14%; } /* South — chicken satay, below pill */
/* Soft seam blending the forest-green hero into the cream story below */
.hero-seam {
height: 110px;
background: linear-gradient(180deg, var(--navy-deep) 0%, var(--ink-paper) 100%);
margin: -1px 0;
pointer-events: none;
}
@media (max-width: 540px) { .hero-seam { height: 80px; } }
/* Region heads: desc width-capped so the watercolor dish sticker (right) never overlaps text */
.region-section__desc { max-width: 600px; }
/* ==========================================================================
DRINKS MENU — text-based cocktails / mocktails / wine / beer
========================================================================== */
.drink-group {
max-width: 1080px;
margin: 0 auto 56px;
}
.drink-group__title {
font-family: var(--font-display);
font-size: clamp(26px, 3vw, 36px);
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
margin: 0 0 24px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(184, 134, 11, 0.25);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.drink-group__note {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-deep);
white-space: nowrap;
}
.drink-cols {
column-count: 2;
column-gap: 48px;
}
@media (max-width: 760px) { .drink-cols { column-count: 1; } }
.drink-list {
list-style: none;
margin: 0;
padding: 0;
}
.drink {
break-inside: avoid;
padding: 10px 0 12px;
border-bottom: 1px dotted rgba(94, 70, 40, 0.18);
}
.drink__head {
display: flex;
align-items: baseline;
gap: 8px;
}
.drink__name {
font-family: var(--font-display);
font-size: 19px;
font-weight: 500;
color: var(--ink);
flex-shrink: 0;
}
.drink__dots {
flex: 1;
border-bottom: 1px dotted rgba(94, 70, 40, 0.3);
transform: translateY(-3px);
min-width: 16px;
}
.drink__price {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--gold-deep);
white-space: nowrap;
flex-shrink: 0;
}
.drink__desc {
font-family: var(--font-display);
font-style: italic;
font-size: 14px;
line-height: 1.5;
color: var(--ink-mute);
margin-top: 3px;
max-width: 92%;
}
.drink-subgroup { margin-bottom: 26px; }
.drink-subgroup:last-child { margin-bottom: 0; }
.drink-subgroup__title {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-deep);
margin: 0 0 12px;
}
.drink-subgroup .drink-list {
column-count: 2;
column-gap: 48px;
}
@media (max-width: 760px) { .drink-subgroup .drink-list { column-count: 1; } }
.cocktails__foot {
max-width: 1080px;
margin: 8px auto 0;
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: 14px;
color: var(--ink-mute);
}
/* ==========================================================================
MENU JUMP CARDS — Seasonal / Street Food / Drinks (distinct sections)
========================================================================== */
.menu-jump-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 28px;
}
@media (max-width: 760px) {
.menu-jump-cards { grid-template-columns: 1fr; gap: 12px; }
}
.jump-card {
display: flex;
flex-direction: column;
padding: 22px 22px 20px;
background: #fff;
border: 1px solid rgba(184, 134, 11, 0.18);
border-top: 3px solid var(--jc-color, var(--gold));
border-radius: 6px;
text-decoration: none;
color: var(--ink);
transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.jump-card--signature { --jc-color: var(--r-signature); }
.jump-card--street { --jc-color: var(--r-street); }
.jump-card--drinks { --jc-color: var(--burgundy, #7a2e3a); }
.jump-card:hover,
.jump-card:focus-visible {
transform: translateY(-3px);
box-shadow: 0 16px 36px -18px rgba(94, 65, 27, 0.3);
border-color: var(--jc-color);
}
.jump-card__title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
margin-bottom: 8px;
display: flex;
align-items: baseline;
gap: 8px;
}
.jump-card__th {
font-family: var(--font-thai);
font-size: 13px;
color: var(--jc-color, var(--gold-deep));
font-weight: 500;
}
.jump-card__desc {
font-family: var(--font-display);
font-style: italic;
font-size: 14.5px;
line-height: 1.5;
color: var(--ink-mute);
margin-bottom: 16px;
flex: 1;
}
.jump-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--jc-color, var(--gold-deep));
transition: gap 0.3s ease;
}
.jump-card:hover .jump-card__cta { gap: 10px; }