:root{
--black:#050505;
--black-soft:#141414;
--gold:#D49B3A; /* brand fill / borders / decorative only */
--gold-hover:#B87A25; /* 3.16:1 on cream — non-text UI (focus rings, field borders) */
--gold-ink:#8A5A0F; /* WCAG-AA accessible gold for TEXT/links/prices on light (5.2:1 cream, 5.9:1 white) */
--gold-light:#E8BE72; /* text only on dark nav (10.6:1) */
--gold-soft:#F3E0BB;
--white:#FFFFFF;
--ivory:#F8F7F4;
--cream:#F3EEE5;
--charcoal:#333333;
--gray:#616161; /* was #6E6E6E — now 5.46:1 on cream (AA) */
--beige:#C3B295;
--danger:#C0392B;
--success:#2C7340; /* was #3A8A4E — now 5.09:1 cream / 5.78:1 white (AA) */
/* cohesive warm brand background used site-wide */
--bg:#F5F0E7;
/* solid opaque surface for fixed/sticky panels — nothing may bleed through */
--surface-solid:#FCF9F3;
/* The nav's opaque stand-in for --nav-glass-bg, used by the
prefers-reduced-transparency block at the end of this file. It lives here
rather than beside --nav-glass-bg because that token is scoped to
.nav-theme-dark, while the rule consuming this one matches .nav-liquid /
.nav-mobile with no theme class -- defined there it would never resolve
and the inline fallback would silently do all the work, which is exactly
the state this replaces. Same colour as that fallback. */
--nav-glass-solid:#16161A;
/* space reserved by the floating fixed nav (nav height + top gap + notch).
Static fallback; main.js measures the real nav and keeps this exact. */
--nav-space:calc(112px + env(safe-area-inset-top, 0px));
/* height of the fixed mobile bottom action bar (0 on desktop) */
--bottombar-space:0px;
}
@media(max-width:768px){
:root{ --bottombar-space:calc(70px + env(safe-area-inset-bottom, 0px)); }
}
@media(max-width:560px){
:root{ --nav-space:calc(100px + env(safe-area-inset-top, 0px)); }
}
*{box-sizing:border-box; margin:0; padding:0;}
/* every in-page anchor target lands BELOW the floating nav, never under it */
[id]{ scroll-margin-top:calc(var(--nav-space) + 12px); }
html{scroll-behavior:smooth; background:var(--bg);}
body{
background:var(--bg);
color:var(--charcoal);
font-family:'Inter',sans-serif;
overflow-x:hidden;
position:relative;
margin:0;
padding:0;
/* no top padding here — the hero/page-hero background must touch the very
top edge of the page with zero gap. Clearance for the floating nav is
handled per-section (see .hero/.page-hero/.error-page padding below),
so only the TEXT content is pushed down, never the background photo. */
}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif; font-weight:700; letter-spacing:.01em;}
/* TRACKING IS SIZE-SPECIFIC -- one value cannot serve the whole scale.
The +.01em above is right for h3/h4 at body-ish sizes, where a little air
helps legibility. It is wrong for the display headings below: as Cormorant
grows past ~2.5rem the letters read too far apart, so tracking has to go
negative, and further negative the larger the type gets. Sizes here mirror
the clamp() maximums on each selector -- if you change a clamp, revisit the
value next to it. */
.ask-chef-card h2{ letter-spacing:-.008em; } /* max 2.6rem */
.section-head h2,
.final-cta h2,
.page-hero h1{ letter-spacing:-.014em; } /* max 3.1-3.6rem */
.hero-glass h1{ letter-spacing:-.02em; } /* max 4.8rem */
.error-page .code{ letter-spacing:-.03em; } /* max 8rem */
a{ outline-offset:3px; }
img{ max-width:100%; }
.eyebrow{
font-family:'Poppins',sans-serif;
font-size:.72rem;
letter-spacing:.28em;
text-transform:uppercase;
color:var(--gold-ink);
font-weight:600;
}
/* ---------- ACCESSIBILITY ---------- */
.skip-link{
position:absolute; left:-999px; top:auto; background:var(--black); color:var(--white);
padding:12px 20px; z-index:999; border-radius:8px; text-decoration:none; font-size:.85rem;
}
.skip-link:focus{ left:16px; top:16px; }
:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:3px; }
/* ---------- READABILITY OVERRIDES (text on glass) ---------- */
.glass .wi-desc, .glass .ps-desc, .glass .pkg-guests{ color:#4A4540; }
.glass .pkg-price span{ color:#57514B; }
.glass-dark, .glass-dark .ec-title, .glass-dark .si-name, .glass-dark h1, .glass-dark h2{ text-shadow:0 1px 12px rgba(0,0,0,.35); }
.glass-dark .ec-desc{ color:rgba(255,255,255,.82); }
.glass-dark .trust-item .label{ color:rgba(255,255,255,.82); }
/* ---------- LIQUID BACKDROP ---------- */
.liquid-canvas{
position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--bg);
}
/* No filter:blur() here — the gaussian softness is baked into the gradient
stops instead. A 70px blur on four 500-700px layers was the single
heaviest GPU cost on the page; multi-stop radial gradients rasterize once
and composite for free, and the drift animation stays transform-only. */
.blob{
position:absolute; border-radius:50%; opacity:.55;
will-change:transform;
}
.blob.b1{ width:640px; height:640px; top:-160px; left:-120px; background:radial-gradient(circle, rgba(212,155,58,.5) 0%, rgba(212,155,58,.3) 38%, rgba(212,155,58,.12) 58%, transparent 78%); animation:drift1 26s ease-in-out infinite; }
.blob.b2{ width:560px; height:560px; top:20%; right:-160px; background:radial-gradient(circle, rgba(212,155,58,.36) 0%, rgba(212,155,58,.22) 38%, rgba(212,155,58,.09) 58%, transparent 78%); animation:drift2 32s ease-in-out infinite; }
.blob.b3{ width:520px; height:520px; bottom:0; left:10%; background:radial-gradient(circle, rgba(195,178,149,.4) 0%, rgba(195,178,149,.24) 38%, rgba(195,178,149,.1) 58%, transparent 78%); animation:drift3 30s ease-in-out infinite; }
.blob.b4{ width:700px; height:700px; bottom:-220px; right:-100px; background:radial-gradient(circle, rgba(5,5,5,.11) 0%, rgba(5,5,5,.07) 38%, rgba(5,5,5,.03) 58%, transparent 78%); animation:drift1 36s ease-in-out infinite reverse; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(60px,50px) scale(1.08);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-50px,60px) scale(.95);} }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,-40px) scale(1.06);} }
@media (prefers-reduced-motion: reduce){
.blob, .reveal, .hero-glass h1, .hero-glass p, .hero-btns, .trust-bar{ animation:none !important; opacity:1 !important; transform:none !important; }
html{ scroll-behavior:auto; }
}
/* ---------- GLASS PRIMITIVES ---------- */
.glass{
position:relative;
background:linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.14));
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
border:1px solid rgba(255,255,255,.6);
box-shadow:0 8px 32px rgba(20,15,5,.12), inset 0 1px 0 rgba(255,255,255,.7);
color:var(--charcoal);
}
.glass::before{
content:''; position:absolute; top:0; left:8%; right:8%; height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
.glass-dark{
position:relative;
background:linear-gradient(135deg, rgba(18,16,12,.34), rgba(8,7,5,.24));
backdrop-filter:blur(24px) saturate(150%);
-webkit-backdrop-filter:blur(24px) saturate(150%);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
color:#FFFFFF;
}
.glass-dark::before{
content:''; position:absolute; top:0; left:8%; right:8%; height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
/* ================= APPLE-STYLE LIQUID GLASS NAV ================= */
/* Apple system font stack, scoped to the nav only per spec ("For Menu Bar"). */
.nav-liquid, .nav-mobile{
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Inter", sans-serif;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* Adaptive palette — swapped by JS (applyNavTheme in main.js) based on the
actual luminance of whatever is rendered behind the nav at scroll time.
Per spec: exact #FFFFFF on dark backgrounds, exact #1C1C1E on light ones.
The glass material itself (background/blur/border) stays constant —
only text/icon color and hover/active tint adapt. */
.nav-liquid.nav-theme-dark, .nav-mobile.nav-theme-dark{
--nav-fg:#FFFFFF;
--nav-fg-dim:rgba(255,255,255,.92); /* .78 measured 4.21:1 -- under AA */
--nav-border-strong:rgba(255,255,255,.85);
--nav-active-bg:rgba(255,255,255,.20);
--nav-hover-bg:rgba(255,255,255,.12);
--nav-text-shadow:0 1px 8px rgba(0,0,0,.35);
/* darker, smokier vibrancy tint when floating over dark hero/photo content */
/* .62, not .42: at .42 this composites over a light backdrop to a mid
grey and white nav links fall to 2.76:1. The adaptive nav theming in
main.js usually hides that, but WCAG conformance must not depend on a
luminance sampler running (or running in time). */
--nav-glass-bg:rgba(18,18,20,.62);
--nav-glass-border:rgba(255,255,255,.16);
}
.nav-liquid.nav-theme-light, .nav-mobile.nav-theme-light{
--nav-fg:#1C1C1E;
--nav-fg-dim:rgba(28,28,30,.68);
--nav-border-strong:rgba(255,246,230,.9);
--nav-active-bg:rgba(212,155,58,.16);
--nav-hover-bg:rgba(212,155,58,.1);
--nav-text-shadow:0 1px 2px rgba(255,255,255,.4);
/* warm cream liquid glass — matches the footer panel for a cohesive flow */
/* .90, not .72: over a dark hero this composited down far enough that
the gold-ink tagline hit ~3.1:1. Mirror of the dark-theme fix. */
--nav-glass-bg:rgba(250,244,233,.90);
--nav-glass-border:rgba(212,155,58,.34);
}
/* Liquid-glass material — exact spec:
background rgba(255,255,255,.12), blur(20px) saturate(180%),
border 1px solid rgba(255,255,255,.18), radius 28px, no shadow.
A hairline top highlight + soft diagonal sheen are layered on top so the
surface reads as glass rather than a flat translucent rectangle. */
.nav-liquid, .nav-mobile{
position:relative; overflow:hidden;
background:var(--nav-glass-bg, rgba(255,255,255,.12));
backdrop-filter:blur(26px) saturate(200%);
-webkit-backdrop-filter:blur(26px) saturate(200%);
border:1px solid var(--nav-glass-border, rgba(255,255,255,.18));
/* soft warm float shadow — matches the footer panel's depth */
box-shadow:0 16px 44px rgba(120,90,40,.14), inset 0 1px 0 rgba(255,255,255,.55);
color:var(--nav-fg);
/* only theme colors ever change at runtime — never transition box geometry */
transition:color .35s ease, background-color .45s ease, border-color .45s ease;
}
.nav-liquid, .nav-liquid h1, .nav-liquid h2,
.nav-mobile, .nav-mobile h1, .nav-mobile h2{ text-shadow:var(--nav-text-shadow); }
/* bright top edge highlight — the "glass rim catching light" */
.nav-liquid::before, .nav-mobile::before{
content:''; position:absolute; top:0; left:6%; right:6%; height:1px; z-index:1;
background:linear-gradient(90deg, transparent, var(--nav-border-strong), transparent);
}
/* diagonal specular sheen sweeping across the glass */
.nav-liquid::after{
content:''; position:absolute; top:-70%; left:-15%; width:55%; height:230%; z-index:1;
background:radial-gradient(ellipse at center, rgba(255,255,255,.4), transparent 65%);
pointer-events:none; filter:blur(10px); transform:rotate(-14deg); mix-blend-mode:overlay;
}
/* ...but NOT on the mobile menu, which also carries .nav-liquid. That panel
is a scroll container (max-height + overflow-y:auto), and an absolutely
positioned box at top:-70%/height:230% counts toward its scrollable
overflow -- it added ~270px of scroll that led to nothing, so the menu
appeared scrollable while every link was already on screen. The menu's
glass is near-opaque anyway, so the sheen was barely visible there. */
.nav-mobile::after{ content:none; }
/* subtle frosted noise texture so the glass never looks like a flat rectangle */
.nav-noise{
position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
.nav-liquid > *, .nav-mobile > *{ position:relative; z-index:2; }
.glass-gold{
position:relative;
/* near-opaque: at .72/.58 a dark backdrop shows through and the black
label drops to 2.98:1. Opaque gold gives the label 5.1:1 minimum. */
background:linear-gradient(135deg, rgba(212,155,58,.97), rgba(184,122,37,.94));
backdrop-filter:blur(18px) saturate(180%);
-webkit-backdrop-filter:blur(18px) saturate(180%);
border:1px solid rgba(255,235,190,.6);
box-shadow:0 8px 28px rgba(184,122,37,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
/* ---------- BUTTONS ---------- */
.btn{
font-family:'Poppins',sans-serif;
font-weight:600;
font-size:.92rem;
letter-spacing:.01em;
padding:15px 32px;
border-radius:100px;
border:none;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:10px;
position:relative;
overflow:hidden;
transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
text-decoration:none;
}
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn-primary{ color:var(--black); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(184,122,37,.45); }
/* shine sweep runs on transform (compositor) — never animate left/top */
.btn-primary::after{
content:''; position:absolute; top:0; left:0; width:60%; height:100%;
background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
transform:translateX(-200%); transition:transform .7s ease;
}
.btn-primary:hover::after{ transform:translateX(280%); }
.btn-outline{
background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
color:var(--gold-light);
border:1px solid rgba(212,155,58,.5);
}
.btn-outline:hover{
background:rgba(212,155,58,.18);
border-color:var(--gold);
transform:translateY(-3px);
}
.btn-outline-dark{
background:rgba(5,5,5,.03);
color:var(--gold-ink);
border:1px solid rgba(212,155,58,.5);
}
.btn-outline-dark:hover{ background:rgba(212,155,58,.12); transform:translateY(-3px); }
.btn-sm{ padding:10px 20px; font-size:.8rem; }
/* ---------- NAV — locked, fixed, non-jumping liquid-glass pill ----------
Pure CSS fixed positioning: no scroll-driven resize/opacity/class toggles,
so there is nothing for a scroll listener to change (no jump, no flicker,
no resize). GPU-friendly: only backdrop-filter/transform are animated. */
/* Sticky per spec: nav is the first element in the document flow (the
skip-link above it is position:absolute and takes no flow space), so it
is already at its "stuck" offset on load — it never scrolls with the
page, only the content below it does. */
#nav{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
width:min(95%,1600px);
z-index:99999;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
border-radius:999px;
}
.logo-link{ display:flex; align-items:center; text-decoration:none; }
.logo-chip{ display:flex; align-items:center; }
.logo-img{ height:56px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
/* logo + "PREMIUM CATERING" tagline stacked (nav only) — centered under the
logo so the pair stays aligned at every logo size / breakpoint */
#nav .logo-chip, .nav-mobile .logo-chip{ flex-direction:column; align-items:center; gap:3px; }
.logo-tagline{
font-family:'Poppins',sans-serif; font-size:.58rem; font-weight:600; letter-spacing:.34em;
text-transform:uppercase; color:var(--gold-ink); line-height:1;
text-align:center; text-indent:.34em; /* offset trailing letter-spacing so it optically centers */
white-space:nowrap;
}
/* --gold-light is a display gold; at this size it measured 3.26:1 on the
nav glass. Small caps text needs the AA figure, not the pretty one. */
.nav-theme-dark .logo-tagline{ color:#F7EBD2; }
/* light theme floats over dark heroes too -- gold-ink needs to go darker */
.nav-theme-light .logo-tagline{ color:#6E4409; }
@media(max-width:560px){ .logo-tagline{ font-size:.52rem; letter-spacing:.28em; text-indent:.28em; } }
/* respect the iPhone notch/Dynamic Island without altering desktop offset */
@media(max-width:768px){
nav{ top:calc(20px + env(safe-area-inset-top, 0px)); }
}
@media(max-width:560px){
.logo-img{ height:44px; }
/* nav is shorter on small phones (smaller logo) — match the pull-up */
.hero, .page-hero, .error-page{ margin-top:-0; }
}
/* ---- nav links: icon + label, adaptive color, animated active pill ---- */
.nav-links{ display:flex; align-items:center; gap:24px; list-style:none; flex-wrap:nowrap; position:relative; }
.nav-active-pill{
position:absolute; z-index:1; border-radius:20px;
background:var(--nav-active-bg);
box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 2px 10px rgba(0,0,0,.08);
opacity:0; transition:transform .38s cubic-bezier(.32,.72,0,1), width .38s cubic-bezier(.32,.72,0,1), opacity .3s ease;
pointer-events:none;
}
.nav-active-pill.ready{ opacity:1; }
.nav-link{
position:relative; z-index:2; display:flex; align-items:center; gap:8px;
color:var(--nav-fg-dim);
text-decoration:none;
font-size:.96rem;
font-weight:650;
letter-spacing:-.01em;
white-space:nowrap;
padding:12px 14px;
border-radius:28px;
transition:color .3s ease, background .3s cubic-bezier(.32,.72,0,1), transform .3s cubic-bezier(.32,.72,0,1);
}
.nav-link .nav-ico{ width:22px; height:22px; display:flex; flex-shrink:0; }
.nav-link .nav-ico svg{ width:100%; height:100%; }
.nav-link:hover{ color:var(--nav-fg); background:var(--nav-hover-bg); transform:scale(1.02); }
.nav-link:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* every interactive control on the dark nav gets a high-contrast light-gold focus ring */
.nav-theme-dark a:focus-visible, .nav-theme-dark button:focus-visible{ outline:2px solid var(--gold-light); outline-offset:2px; }
.nav-link.active{ color:var(--nav-fg); }
/* icon-only nav: hide the label visually but keep it as the link's accessible name (WCAG 2.4.4/4.1.2) */
@media(max-width:1300px){ .nav-link .nav-label{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .nav-link{ padding:12px; } .nav-links{ gap:10px; } }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-cta .btn{padding:11px 22px; font-size:.82rem; white-space:nowrap;}
.nav-cta-arrow{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; }
.nav-cta-arrow svg{ width:100%; height:100%; }
.nav-cta-btn .nav-cta-arrow{ transition:transform .3s ease; }
.nav-cta-btn:hover .nav-cta-arrow{ transform:translateX(3px); }
.nav-toggle{
display:none; background:none; border:none; cursor:pointer; padding:8px;
flex-direction:column; gap:5px; align-items:center; justify-content:center;
}
.nav-toggle span{ width:22px; height:2px; background:var(--nav-fg); display:block; transition:transform .3s ease, opacity .3s ease, background .4s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-mobile{
display:none;
position:fixed; top:var(--nav-space); left:50%; transform:translateX(-50%);
width:min(92%,1180px); z-index:9998;
max-height:calc(100vh - var(--nav-space) - 16px); overflow-y:auto;
border-radius:28px; padding:14px;
padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
flex-direction:column;
opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.nav-mobile.open{ display:flex; opacity:1; pointer-events:auto; }
/* the open panel floats over page content — force a near-opaque surface so
body text never bleeds through the links (readability over flair) */
.nav-mobile.nav-theme-dark{ --nav-glass-bg:rgba(26,21,13,.97); }
.nav-mobile.nav-theme-light{ --nav-glass-bg:rgba(252,247,238,.98); }
/* dimmed page behind the open menu; tap to close */
.nav-backdrop{
position:fixed; inset:0; z-index:9997; background:rgba(15,10,4,.45);
opacity:0; pointer-events:none; transition:opacity .25s ease; border:none; padding:0; cursor:pointer;
}
.nav-backdrop.show{ opacity:1; pointer-events:auto; }
.nav-mobile-links{ display:flex; flex-direction:column; }
.nav-mobile-link{
display:flex; align-items:center; gap:12px;
color:var(--nav-fg-dim); text-decoration:none; padding:14px 16px; border-radius:14px;
font-size:.98rem; font-weight:500; min-height:48px;
transition:color .3s ease, background .3s ease;
}
.nav-mobile-link .nav-ico{ width:20px; height:20px; display:flex; flex-shrink:0; }
.nav-mobile-link .nav-ico svg{ width:100%; height:100%; }
.nav-mobile-chev{ margin-left:auto; width:18px; height:18px; display:flex; color:var(--nav-fg-dim); opacity:.6; }
.nav-mobile-chev svg{ width:100%; height:100%; }
.nav-mobile-link.active{ color:var(--gold-ink); background:rgba(212,155,58,.16); font-weight:600; }
.nav-theme-dark .nav-mobile-link.active{ color:var(--gold-light); }
.nav-mobile-link.active .nav-mobile-chev{ color:var(--gold-light); opacity:1; }
.nav-mobile-link:hover{ background:var(--nav-hover-bg); color:var(--nav-fg); }
.nav-mobile-cta{ margin:12px 6px 4px; justify-content:center; min-height:50px; width:auto; }
@media(max-width:1050px){
.nav-links{display:none;}
.nav-toggle{ display:flex; min-width:44px; min-height:44px; }
}
/* small phones: the top bar is just logo + hamburger — the fixed bottom CTA
bar (see .mobile-cta) carries the "Build a Plate" action instead */
@media(max-width:768px){
.nav-cta-btn{ display:none; }
}
/* ---------- HERO ---------- */
.hero{
position:relative;
/* the sticky nav still reserves its own box height in the flow (that's
how position:sticky works) — pull the hero up underneath it so the
photo keeps touching the very top of the page with zero gap, while
the nav still visually floats above via its own z-index. */
margin-top:0;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
/* JPEG declaration first, image-set second: a browser that does not know
image-set() drops the whole declaration, and without the plain one first
the hero would render with no photograph at all. */
background-image:
linear-gradient(180deg, rgba(5,5,5,.86) 0%, rgba(5,5,5,.66) 35%, rgba(5,5,5,.82) 78%, var(--black) 100%),
url('../images/hero-bg.jpg');
/* noinspection CssInvalidFunction */
background-image:
linear-gradient(180deg, rgba(5,5,5,.86) 0%, rgba(5,5,5,.66) 35%, rgba(5,5,5,.82) 78%, var(--black) 100%),
image-set(url('../images/hero-bg.webp') type('image/webp'),
url('../images/hero-bg.jpg') type('image/jpeg'));
background-size:cover, cover;
background-position:center, center 30%;
background-repeat:no-repeat;
overflow:hidden;
padding:110px 6% 80px;
}
.hero-arch{
position:absolute; top:9%; left:50%; transform:translateX(-50%);
width:320px; height:320px; opacity:.5;
}
.hero-arch svg{ width:100%; height:100%; }
.hero-glass{
position:relative; z-index:2; max-width:900px; text-align:center;
margin-top:60px; padding:56px 48px; border-radius:32px;
overflow:hidden;
/* slightly brighter, more defined glass edge than the generic .glass-dark */
border-color:rgba(255,255,255,.28);
box-shadow:0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.32);
}
/* soft specular glow catching the top-right corner of the glass — the
"shine at the edges" that reads as real liquid glass rather than a flat
translucent box. */
.hero-glass::after{
content:''; position:absolute; top:-45%; right:-18%; width:55%; height:170%; z-index:1;
background:radial-gradient(ellipse at center, rgba(255,255,255,.4), transparent 65%);
pointer-events:none; filter:blur(12px); transform:rotate(-16deg); mix-blend-mode:overlay;
}
.hero-glass > *{ position:relative; z-index:2; }
.hero-glass .eyebrow{ color:var(--gold-light); margin-bottom:22px; display:inline-block; }
.hero-glass h1{
color:var(--white);
font-size:clamp(2.4rem, 5.6vw, 4.8rem);
line-height:1.08;
margin-bottom:24px;
opacity:0; transform:translateY(24px);
animation:riseIn 1s cubic-bezier(.22,1,.36,1) .2s forwards;
}
.hero-glass h1 em{ font-style:italic; color:var(--gold-light); }
.hero-glass p{
color:rgba(255,255,255,.78);
font-size:1.14rem;
line-height:1.65;
max-width:600px;
margin:0 auto 38px;
opacity:0; transform:translateY(24px);
animation:riseIn 1s cubic-bezier(.22,1,.36,1) .45s forwards;
}
.hero-btns{
display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
opacity:0; transform:translateY(24px);
animation:riseIn 1s cubic-bezier(.22,1,.36,1) .65s forwards;
}
@keyframes riseIn{ to{opacity:1; transform:translateY(0);} }
.trust-bar{
position:relative; z-index:2;
margin-top:56px;
display:flex; flex-wrap:wrap; justify-content:center;
gap:14px;
opacity:0; animation:riseIn 1s cubic-bezier(.22,1,.36,1) .9s forwards;
}
/* every badge the same footprint (equal width + height) regardless of its
text length, so the row reads as one tidy set rather than mismatched pills */
.trust-item{
flex:0 0 148px; box-sizing:border-box;
padding:14px 12px; text-align:center; color:var(--white);
border-radius:16px;
}
a.trust-item{ display:block; text-decoration:none; }
.trust-item .num{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.35rem; color:var(--gold-light); display:block; white-space:nowrap; line-height:1.2; }
.trust-item .label{ font-size:.68rem; letter-spacing:.06em; color:rgba(255,255,255,.6); text-transform:uppercase; margin-top:3px; white-space:nowrap; }
/* phones: two equal columns that fill the available width (last badge centered) */
@media(max-width:560px){
.trust-bar{ gap:10px; margin-top:40px; }
.trust-item{ flex:0 0 calc(50% - 5px); padding:13px 6px; }
.trust-item .num{ font-size:1.15rem; }
.trust-item .label{ font-size:.6rem; letter-spacing:.05em; }
}
/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
position:relative;
margin-top:0;
min-height:56vh;
display:flex; align-items:center; justify-content:center; text-align:center;
/* plain JPEG first, image-set second -- see .hero above for why */
background-image:
linear-gradient(180deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.72) 45%, rgba(5,5,5,.9) 100%),
url('../images/hero-bg.jpg');
/* noinspection CssInvalidFunction */
background-image:
linear-gradient(180deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.72) 45%, rgba(5,5,5,.9) 100%),
image-set(url('../images/hero-bg.webp') type('image/webp'),
url('../images/hero-bg.jpg') type('image/jpeg'));
background-size:cover; background-position:center 30%; background-repeat:no-repeat;
padding:calc(var(--nav-space) + 40px) 6% 70px;
}
.page-hero-inner{ position:relative; z-index:2; max-width:760px; }
.page-hero .eyebrow{ color:var(--gold-light); margin-bottom:18px; display:inline-block; }
.page-hero h1{ color:var(--white); font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.12; margin-bottom:16px; }
.page-hero p{ color:rgba(255,255,255,.78); font-size:1.08rem; line-height:1.6; max-width:600px; margin:0 auto; }
.breadcrumb{ margin-top:22px; font-size:.82rem; color:rgba(255,255,255,.55); }
.breadcrumb a{ color:rgba(255,255,255,.75); text-decoration:none; }
.breadcrumb a:hover{ color:var(--gold-light); }
/* ---------- SECTION GENERIC ---------- */
section{ padding:130px 6%; position:relative; }
section.tight{ padding:90px 6%; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 70px; }
.section-head.left{ text-align:left; margin:0 0 50px; }
.section-head .eyebrow{ display:block; margin-bottom:16px; }
.section-head h2{ font-size:clamp(2rem,3.6vw,3.1rem); color:var(--black); line-height:1.15; }
.section-head.on-dark h2, .section-head.on-dark .eyebrow{ color:var(--white); }
.section-head.on-dark .eyebrow{ color:var(--gold-light); }
.section-head p{ margin-top:18px; color:var(--gray); font-size:1.05rem; line-height:1.65; }
/* ---------- SECTION SEAM (small ornament marking the transition into each home band) ---------- */
.section-seam{
display:flex; align-items:center; justify-content:center; gap:14px;
max-width:200px; margin:0 auto 40px;
}
.section-seam::before, .section-seam::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(212,155,58,.5)); }
.section-seam::after{ background:linear-gradient(90deg, rgba(212,155,58,.5), transparent); }
.section-seam span{
flex-shrink:0; width:7px; height:7px; transform:rotate(45deg);
background:var(--gold); box-shadow:0 0 0 4px rgba(212,155,58,.14);
}
@media(max-width:560px){ .section-seam{ max-width:140px; margin-bottom:26px; } }
.section-head p a{ color:var(--gold-ink); font-weight:600; text-decoration-color:rgba(212,155,58,.5); }
.section-head p a:hover{ color:var(--gold-ink); }
.section-head.on-dark p{ color:rgba(255,255,255,.6); }
.section-head.on-dark p a{ color:var(--gold-light); }
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
/* ---------- EVENT TYPES ---------- */
.event-grid{
display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
gap:22px; max-width:1240px; margin:0 auto;
}
.event-card{
padding:28px; border-radius:24px;
aspect-ratio:4/5;
display:flex; flex-direction:column; justify-content:flex-end;
cursor:pointer;
transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .5s ease;
}
.event-card:hover, .event-card:focus-within{ transform:translateY(-10px) scale(1.01); border-color:rgba(212,155,58,.55); }
.event-card .ec-title{ font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--white); font-size:1.4rem; position:relative; z-index:2; margin-bottom:8px;}
.event-card .ec-desc{ color:rgba(255,255,255,.66); font-size:.88rem; position:relative; z-index:2; line-height:1.5; max-height:0; overflow:hidden; transition:max-height .5s ease, margin .5s ease; margin-top:0;}
.event-card:hover .ec-desc, .event-card:focus-within .ec-desc{ max-height:80px; margin-top:6px;}
.event-card .ec-icon{
width:46px; height:46px; border-radius:14px;
display:flex; align-items:center; justify-content:center; color:var(--gold-light);
margin-bottom:16px; font-size:1.2rem; position:relative; z-index:2;
background:rgba(212,155,58,.16); border:1px solid rgba(212,155,58,.4);
}
/* ---------- PACKAGES ---------- */
.pkg-grid{
display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:22px; max-width:1180px; margin:0 auto;
}
/* The 7 catering packages fill a row of 4 and leave an orphan row of 3, which
would otherwise sit left-aligned. Once the grid resolves to 4 columns, lay it
out as 8 half-columns instead: a card spanning 2 of them is (W - 66px) / 4
wide -- exactly its 4-column width, so nothing about the cards changes -- and
starting the orphan row one half-column in centres it under the row above.
Narrower widths keep the auto-fit rule above. Scoped to the packages tab so
the homepage grid is untouched. */
@media(min-width:1257px){
/* minmax(0,1fr), not 1fr: a bare 1fr floors each column at its content's
min width, which lets a long dish line widen its own column and throw the
row out of alignment. */
#tab-packages .pkg-grid{ grid-template-columns:repeat(8,minmax(0,1fr)); }
#tab-packages .pkg-grid > .pkg-card{ grid-column:span 2; }
/* start AND span together -- setting only the start line would leave the end
at auto and collapse this card to a single half-column. */
#tab-packages .pkg-grid > .pkg-card:nth-child(5){ grid-column:2 / span 2; }
}
.pkg-card{
border-radius:24px;
padding:40px 32px;
transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
display:flex; flex-direction:column;
scroll-margin-top:calc(var(--nav-space) + 12px);
}
.pkg-card:hover{ transform:translateY(-8px); }
/* "Most Popular" card: same light glass as the others, set apart by a thicker gold border */
.pkg-card.featured{ border:2px solid var(--gold); }
.pkg-badge{
align-self:flex-start; font-family:'Poppins',sans-serif; font-size:.68rem; font-weight:600;
letter-spacing:.08em; text-transform:uppercase; color:var(--black); background:var(--gold-light);
padding:5px 12px; border-radius:100px; margin-bottom:14px;
}
.pkg-name{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.55rem; color:var(--black); margin-bottom:6px; }
.pkg-guests{ font-size:.8rem; color:var(--gray); letter-spacing:.04em; text-transform:uppercase; margin-bottom:22px; }
.pkg-list{ list-style:none; margin-bottom:28px; flex-grow:1; }
.pkg-list li{
font-size:.92rem; color:var(--charcoal); padding:9px 0; border-bottom:1px dashed rgba(195,178,149,.35);
display:flex; align-items:center; gap:10px;
}
.pkg-list li::before{ content:'✦'; color:var(--gold); font-size:.7rem; }
.pkg-price{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.75rem; color:var(--black); margin-bottom:22px;}
.pkg-price span{ font-family:'Inter',sans-serif; font-size:.8rem; color:var(--gray); font-weight:400;}
.pkg-card .btn{ width:100%; justify-content:center; }
/* §12: a 22%/8% gold wash sitting on a 42%/14% white card is light glass on
light glass -- the two materials collapse into one and the primary action
stops reading as a control. The card stays glass; the BUTTON becomes a
solid material on top of it. That is the hierarchy the rule is protecting. */
.pkg-card:not(.featured) .btn-primary{ background:linear-gradient(135deg, var(--gold), var(--gold-hover)); backdrop-filter:none; color:var(--black); border:1px solid rgba(138,90,15,.45); }
.pkg-card:not(.featured) .btn-primary:hover{ background:rgba(212,155,58,.32); }
/* Home packages (#packages): every "Request This Package" button shares the
same look; the featured card is flagged by a centred "Most Popular" ribbon
instead of a distinct button. Scoped to #packages so packages.html is untouched. */
#packages .pkg-card.featured{ position:relative; }
#packages .pkg-card.featured .pkg-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); margin:0; box-shadow:0 4px 14px rgba(184,122,37,.28); }
#packages .pkg-card.featured .btn-primary{ background:linear-gradient(135deg, var(--gold), var(--gold-hover)); backdrop-filter:none; color:var(--black); border:1px solid rgba(138,90,15,.45); } /* see above */
#packages .pkg-card.featured .btn-primary:hover{ background:rgba(212,155,58,.32); }
/* ---------- PACKAGE COMPARISON TABLE ---------- */
.compare-wrap{ overflow-x:auto; max-width:1180px; margin:0 auto; border-radius:24px; }
table.compare{ width:100%; border-collapse:collapse; min-width:720px; }
table.compare th, table.compare td{ padding:16px 18px; text-align:left; font-size:.88rem; border-bottom:1px solid rgba(195,178,149,.3); }
table.compare thead th{ font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:var(--black); }
table.compare tbody th{ font-weight:600; color:var(--charcoal); }
table.compare td{ color:var(--gray); text-align:center; }
table.compare .yes{ color:var(--success); font-weight:700; }
table.compare .no{ color:var(--gray); opacity:.4; }
/* ---------- HOME SECTION BANDS ----------
Every home section shares one light, even wash so the page reads as a
single continuous surface rather than alternating color blocks — the
.section-seam ornaments and tightened padding carry the section-to-
section separation instead. Full-bleed like .stations-wrap. */
/* overflow:clip (not hidden): decorative glow orbs hang past the section
edges, and a hidden-overflow box can still be scrolled programmatically
(anchor jumps would shift content sideways) — clip forbids that */
/* noinspection CssInvalidPropertyValue */
/* NO negative side margin. has zero horizontal padding, so there is
nothing to break out of: `margin:0 -6%` made this section 12% WIDER than
the viewport, which body{overflow-x:hidden} then quietly clipped. On a
phone that clipping is what pushed the hero sideways and cut its text off.
margin 0 + the same inner padding keeps the content exactly where it was. */
/* noinspection CssInvalidPropertyValue */
.band{ position:relative; margin:0; padding:92px 0; overflow:clip; }
.band > *{ position:relative; z-index:1; }
.band-ivory{
background:
radial-gradient(900px 420px at 85% 0%, rgba(255,255,255,.65), transparent 60%),
linear-gradient(180deg, #FAF6EE 0%, #F8F3E9 100%);
}
/* phones: content in full-bleed bands keeps 14px clear of both screen edges */
@media(max-width:560px){ .band{ padding:56px 14px 60px; } }
/* ---------- LIVE STATIONS (light liquid glass) ---------- */
/* noinspection CssInvalidPropertyValue */
.stations-wrap{
position:relative; margin:0; padding:110px 0 118px; overflow:clip; /* see .band */
scroll-margin-top:var(--nav-space);
background:
radial-gradient(1100px 480px at 18% 20%, rgba(212,155,58,.12), transparent 60%),
radial-gradient(900px 480px at 92% 80%, rgba(184,122,37,.08), transparent 60%),
var(--bg);
}
.stations-wrap::before{
content:''; position:absolute; top:-12%; right:-8%; width:46%; height:60%; z-index:0;
background:radial-gradient(circle, rgba(212,155,58,.16), transparent 70%);
filter:blur(50px); pointer-events:none;
}
/* homepage stations only: same light wash as the bands around it, tighter
gap between sections — .stations-wrap (base) stays untouched for the
About page, which still wants the deeper gold wash + full padding */
#stations{
padding:92px 6% 98px;
background:
radial-gradient(900px 420px at 85% 0%, rgba(255,255,255,.65), transparent 60%),
linear-gradient(180deg, #FAF6EE 0%, #F8F3E9 100%);
}
#stations::before{ display:none; }
@media(max-width:560px){ #stations{ padding:56px calc(6% + 14px) 60px; } }
.stations-wrap > *{ position:relative; z-index:1; }
.station-grid{
display:flex; flex-wrap:wrap; justify-content:center;
gap:18px; max-width:1240px; margin:0 auto;
}
.station-item{
position:relative; overflow:hidden;
flex:0 1 212px; min-width:180px;
padding:34px 20px 30px; border-radius:22px; text-align:center;
background:linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
border:1px solid rgba(255,255,255,.9);
box-shadow:0 12px 30px rgba(90,62,20,.10), inset 0 1px 0 rgba(255,255,255,.95);
transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.station-item::before{
content:''; position:absolute; top:0; left:14%; right:14%; height:1px; z-index:2;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.98), transparent);
}
.station-item::after{
content:''; position:absolute; top:15px; right:15px; width:8px; height:8px; border-radius:50%;
background:#2fbf6b; box-shadow:0 0 0 0 rgba(47,191,107,.5); animation:siPulse 2s infinite;
}
@keyframes siPulse{
0%{ box-shadow:0 0 0 0 rgba(47,191,107,.5); }
70%{ box-shadow:0 0 0 10px rgba(47,191,107,0); }
100%{ box-shadow:0 0 0 0 rgba(47,191,107,0); }
}
.station-item:hover{
transform:translateY(-8px); border-color:rgba(212,155,58,.55);
box-shadow:0 20px 44px rgba(90,62,20,.16), 0 0 0 1px rgba(212,155,58,.35), inset 0 1px 0 rgba(255,255,255,.98);
}
.station-item .si-icon{
display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
width:66px; height:66px; border-radius:50%; font-size:2rem; line-height:1;
background:radial-gradient(circle at 32% 28%, rgba(255,226,170,.85), rgba(212,155,58,.32) 60%, rgba(212,155,58,.12));
border:1px solid rgba(212,155,58,.5);
box-shadow:0 6px 16px rgba(212,155,58,.30), inset 0 2px 6px rgba(255,255,255,.7);
transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
/* illustrated dish icon fills the gold badge as a circle */
.station-item .si-icon{ overflow:hidden; }
.station-item .si-icon img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.station-item:hover .si-icon{ transform:scale(1.1) rotate(-4deg); }
.station-item .si-name{
font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--black);
font-size:1.16rem; letter-spacing:.01em;
}
/* phones: cards become slim horizontal glass pills (icon left, name right)
— half the height of the stacked tiles, so the section stops swallowing
the whole screen and matches the site's pill language (nav, buttons) */
@media(max-width:560px){
/* same 14px edge clearance as the other mobile bands */
.stations-wrap{ padding:76px 14px 80px; }
.station-grid{ gap:10px; }
.station-item{
flex:0 1 calc(50% - 5px); min-width:calc(50% - 5px);
display:flex; align-items:center; justify-content:space-between; gap:8px;
text-align:center; padding:7px 12px 7px 8px; border-radius:999px; min-height:54px;
}
.station-item::after{ top:6px; right:12px; width:6px; height:6px; }
.station-item .si-icon{ width:40px; height:40px; margin:0; flex-shrink:0; }
/* justified row: icon pinned to the left edge, name centered in the rest */
.station-item .si-name{ flex:1; font-size:.9rem; line-height:1.15; }
}
@media(max-width:359px){
.station-item .si-name{ font-size:.84rem; }
.station-item .si-icon{ width:36px; height:36px; }
}
@media (prefers-reduced-motion: reduce){
.station-item::after{ animation:none; }
.station-item, .station-item .si-icon{ transition:none; }
.station-item:hover{ transform:none; }
.station-item:hover .si-icon{ transform:none; }
}
/* ---------- WHY CHOOSE US ---------- */
.why-grid{
display:flex; flex-wrap:wrap; justify-content:center;
gap:18px; max-width:1200px; margin:0 auto;
}
.why-item{ flex:1 1 240px; max-width:300px; padding:34px 20px; text-align:center; border-radius:22px; transition:transform .4s ease; }
@media(max-width:560px){ .why-item{ max-width:100%; } }
.why-item:hover{ transform:translateY(-6px); }
.why-item .wi-icon{
width:56px; height:56px; margin:0 auto 18px; border-radius:16px;
display:flex; align-items:center; justify-content:center;
font-size:1.4rem; color:var(--gold-ink);
background:linear-gradient(135deg, rgba(212,155,58,.22), rgba(212,155,58,.06));
border:1px solid rgba(212,155,58,.3);
}
.why-item .wi-title{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.1rem; color:var(--black); margin-bottom:6px; }
.why-item .wi-desc{ font-size:.85rem; color:var(--gray); line-height:1.5; }
/* ---------- PROCESS ---------- */
.process-wrap{ max-width:900px; margin:0 auto; position:relative; }
.process-step{ display:flex; gap:24px; padding:14px 0; align-items:flex-start; }
.process-step .ps-glass{
display:flex; gap:24px; align-items:flex-start; padding:22px 26px; border-radius:20px; width:100%;
/* same frosted-white glass recipe as the Live Station cards */
position:relative; overflow:hidden;
background:linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
border:1px solid rgba(255,255,255,.9);
box-shadow:0 12px 30px rgba(90,62,20,.10), inset 0 1px 0 rgba(255,255,255,.95);
}
.process-step .ps-glass::before{
content:''; position:absolute; top:0; left:14%; right:14%; height:1px; z-index:2;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.98), transparent);
}
.process-step .ps-num{
width:56px; height:56px; flex-shrink:0; border-radius:16px;
display:flex; align-items:center; justify-content:center;
font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--gold-ink); font-size:1.1rem;
background:linear-gradient(135deg, rgba(212,155,58,.25), rgba(212,155,58,.06));
border:1px solid rgba(212,155,58,.35);
}
.process-step .ps-title{ font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--black); font-size:1.22rem; margin-bottom:6px; }
.process-step .ps-desc{ color:var(--gray); font-size:.9rem; line-height:1.5; max-width:500px; }
/* ---------- TESTIMONIAL ---------- */
.testimonial-wrap{ max-width:780px; margin:0 auto; text-align:center; padding:56px 48px; border-radius:28px; }
.testimonial-wrap .quote{
font-family:'Cormorant Garamond',serif; font-weight:600; font-style:italic; font-size:1.5rem;
color:var(--black); line-height:1.5; margin-bottom:24px;
}
.stars{ color:var(--gold-ink); font-size:1.1rem; margin-bottom:18px; letter-spacing:2px; }
.testimonial-wrap .author{ font-family:'Poppins',sans-serif; font-weight:600; color:var(--charcoal); font-size:.95rem; }
.testimonial-wrap .author span{ display:block; font-weight:400; color:var(--gray); font-size:.8rem; margin-top:2px; }
.testimonial-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; max-width:1180px; margin:0 auto; }
.testimonial-grid .testimonial-wrap{ max-width:none; padding:36px 32px; text-align:left; }
.testimonial-grid .stars{ margin-bottom:14px; }
.testimonial-grid .quote{ font-size:1.15rem; margin-bottom:18px; }
/* ---------- HOME REVIEW CARDS (4 short reviews under the featured quote) */
.review-grid{
display:flex; flex-wrap:wrap; justify-content:center;
gap:18px; max-width:1180px; margin:44px auto 0;
}
.review-item{
flex:1 1 250px; max-width:300px;
padding:26px 22px; border-radius:24px; text-align:center;
display:flex; flex-direction:column;
}
.review-item .stars{ font-size:.92rem; margin-bottom:10px; }
.review-item .rv-author{ font-family:'Poppins',sans-serif; font-weight:600; color:var(--charcoal); font-size:.92rem; }
.review-item .rv-author span{ display:block; font-weight:400; color:var(--gray); font-size:.76rem; margin-top:2px; }
.review-item .rv-quote{
font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--charcoal);
font-size:1.06rem; line-height:1.5; margin-top:14px; text-align:justify;
}
.review-item .rv-toggle{ display:none; }
/* phones: each review becomes a How-It-Works-style glass card; "Read more" expands */
@media(max-width:560px){
.review-grid{ gap:14px; margin-top:28px; }
.review-item{
flex:1 1 100%; max-width:none;
flex-direction:row; flex-wrap:wrap; align-items:center; text-align:justify;
gap:2px 10px; padding:22px 26px; border-radius:20px; overflow:hidden;
/* same frosted-white glass recipe as the How It Works cards */
background:linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
border:1px solid rgba(255,255,255,.9);
box-shadow:0 12px 30px rgba(90,62,20,.10), inset 0 1px 0 rgba(255,255,255,.95);
}
.review-item::before{
left:14%; right:14%; z-index:2;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.98), transparent);
}
.review-item .stars{ font-size:.8rem; margin:0; order:1; }
.review-item .rv-author{ order:2; flex-basis:100%; font-size:.9rem; }
.review-item .rv-quote{
order:3; flex-basis:100%; margin:0;
max-height:0; opacity:0; overflow:hidden;
transition:max-height .4s ease-out, opacity .4s ease-out, margin .4s ease-out;
}
.review-item .rv-toggle{
display:inline-block; order:4; margin-left:auto;
background:none; border:none; cursor:pointer; padding:6px 0 0 12px;
font-family:'Poppins',sans-serif; font-size:.78rem; font-weight:600; color:var(--gold-ink);
}
.review-item.open .rv-quote{ max-height:320px; opacity:1; margin-top:10px; }
}
@media (prefers-reduced-motion: reduce){
.review-item .rv-quote{ transition:none; }
}
/* ---------- FINAL CTA ---------- */
.final-cta{ margin:0; padding:120px 6%; text-align:center; position:relative; overflow:hidden; } /* see .band */
.final-cta-glass{ max-width:700px; margin:0 auto; padding:60px 48px; border-radius:32px; }
.final-cta h2{ color:var(--white); font-size:clamp(1.9rem,4vw,3.2rem); margin-bottom:18px;}
.final-cta p{ color:rgba(255,255,255,.62); max-width:520px; margin:0 auto 34px; font-size:1.05rem; }
/* ---------- FOOTER : light warm Liquid Glass ---------- */
footer{ padding:40px 3vw 46px; font-size:.94rem; position:relative; }
.footer-panel{
position:relative; max-width:1500px; margin:0 auto; overflow:hidden;
padding:56px 56px 24px; border-radius:34px; isolation:isolate; color:var(--charcoal);
/* fallback for no backdrop-filter -> warm cream base */
background:linear-gradient(150deg, rgba(255,255,255,.92), rgba(245,239,229,.86));
-webkit-backdrop-filter:blur(28px) saturate(150%);
backdrop-filter:blur(28px) saturate(150%);
border:1px solid rgba(212,155,58,.32);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 22px 60px rgba(120,90,40,.13);
}
/* very faint warm food blur for glass depth + light wash to keep it readable */
.footer-panel::before{
content:""; position:absolute; inset:0; z-index:-2;
background:url('../images/hero-bg.jpg') center/cover no-repeat;
/* noinspection CssInvalidFunction */
background-image:image-set(url('../images/hero-bg.webp') type('image/webp'),
url('../images/hero-bg.jpg') type('image/jpeg'));
filter:blur(12px) saturate(115%); transform:scale(1.15); opacity:.1;
}
.footer-panel::after{
content:""; position:absolute; inset:0; z-index:-1;
background:
radial-gradient(130% 90% at 88% -12%, rgba(232,190,114,.16), transparent 55%),
linear-gradient(150deg, rgba(255,255,255,.6), rgba(243,238,229,.5));
}
.footer-shine{
position:absolute; top:0; left:0; right:0; height:2px; z-index:1; pointer-events:none;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}
.footer-grid{ display:grid; grid-template-columns:1.35fr .85fr .95fr 1.25fr; gap:0; margin-bottom:34px; }
.footer-grid > *{ padding:2px 38px; }
.footer-grid > .footer-brand{ padding-left:0; }
.footer-grid > .footer-col{ border-left:1px solid rgba(212,155,58,.22); }
/* column heading (plain title on desktop, accordion button on mobile) */
.footer-heading{
display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:default;
margin:0; padding:0; font-family:'Poppins',sans-serif;
color:var(--gold-ink); font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.footer-h{ display:none; }
.footer-h-ico{ display:none; width:18px; height:18px; color:var(--gold-ink); }
.footer-h-ico svg{ width:100%; height:100%; }
.footer-h-chev{ display:none; margin-left:auto; width:18px; height:18px; color:var(--gold-ink); transition:transform .25s ease; }
.footer-h-chev svg{ width:100%; height:100%; }
.footer-hr{ display:block; position:relative; width:54px; height:14px; margin:11px 0 18px; }
.footer-hr::before{ content:""; position:absolute; top:50%; left:0; width:54px; height:1px; background:linear-gradient(90deg, rgba(212,155,58,.7), rgba(212,155,58,.05)); }
.footer-hr::after{ content:"\2666"; position:absolute; left:19px; top:50%; transform:translateY(-50%); color:var(--gold); font-size:.6rem; }
.footer-grid ul{ list-style:none; }
.footer-grid li{ margin-bottom:12px; }
.footer-grid a{ color:var(--charcoal); text-decoration:none; transition:color .25s ease, transform .25s ease; }
.footer-col-body li a{ display:inline-block; }
.footer-col-body li a:hover{ color:var(--gold-ink); transform:translateX(3px); }
/* brand column */
.footer-brand .logo-chip{ margin-bottom:18px; }
.footer-logo{ height:58px; width:auto; }
.footer-desc{ color:var(--charcoal); line-height:1.7; max-width:300px; margin-bottom:22px; font-size:.96rem; }
.footer-badges{ display:flex; flex-wrap:wrap; gap:14px; }
.footer-badge{ text-align:center; width:80px; }
a.footer-badge{ text-decoration:none; color:inherit; transition:transform .18s ease; }
a.footer-badge:hover{ transform:translateY(-2px); }
a.footer-badge:hover .footer-badge-ico{ border-color:var(--gold); }
.footer-badge-ico{
display:flex; align-items:center; justify-content:center; width:54px; height:54px; margin:0 auto 8px;
border-radius:18px; color:var(--gold-ink);
background:linear-gradient(160deg, rgba(212,155,58,.14), rgba(212,155,58,.04));
border:1px solid rgba(212,155,58,.35);
}
.footer-badge-ico svg{ width:25px; height:25px; }
.footer-badge-label{ font-size:.74rem; font-weight:600; color:var(--charcoal); line-height:1.25; display:block; }
/* contact items (.footer-col-body .footer-cinfo beats the li a inline-block rule) */
.footer-col-body .footer-cinfo{ display:flex; align-items:flex-start; gap:11px; line-height:1.5; color:var(--charcoal); }
.footer-col-body .footer-cinfo:hover{ transform:none; }
.footer-ico{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:18px; height:18px; color:var(--gold-ink); margin-top:1px; }
.footer-ico svg{ width:18px; height:18px; display:block; }
/* Contact Us CTA (a.footer-cta beats .footer-grid a specificity).
Geometry is DELIBERATELY IDENTICAL to a.footer-rest-cta below -- same
display, gap, padding, radius, icon chip and arrow box -- so the two stack
as one matched pair rather than a pill above a card. Only the colour differs.
Change one and you must change the other.
The gold is NOT declared here: the element carries the shared .glass-gold
class, the same one on the hero's "Build Your Own Plate" and the nav's
"Build a Plate", so the fill, border and shadow all come from that single
declaration and composite over the footer exactly as they do for the mobile
CTA bar. A hand-picked hex looked right in isolation and read a shade too
saturated next to the real thing. */
a.footer-cta{
margin-top:22px; display:flex; align-items:center; gap:10px;
padding:10px 10px 10px 12px; border-radius:18px; text-decoration:none;
font-family:'Poppins',sans-serif; color:#3A2708; letter-spacing:.01em;
transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, filter .3s ease;
}
/* `a.footer-cta:hover` (0,1,1 + pseudo) beats .glass-gold's box-shadow */
a.footer-cta:hover{
transform:translateY(-2px); filter:brightness(1.04); color:#3A2708;
box-shadow:0 14px 34px rgba(184,122,37,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.footer-cta-ico{
display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
width:34px; height:34px; border-radius:11px; color:#3A2708;
background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.5);
}
.footer-cta-ico svg{ width:19px; height:19px; }
.footer-cta-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.footer-cta-t{ font-weight:700; font-size:.86rem; line-height:1.25; color:#2B1D06; white-space:nowrap; }
.footer-cta-d{ font-size:.72rem; line-height:1.3; color:#2B1D06; } /* was rgba(58,39,8,.7) -> 3.61:1 */
.footer-cta-arrow{
display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
width:20px; height:20px; color:#3A2708;
}
.footer-cta-arrow svg{ width:16px; height:16px; }
a.footer-cta:hover .footer-cta-arrow{ transform:translateX(3px); transition:transform .18s ease; }
/* "Order Food Online" CTA -> the restaurant site.
DARK, where .footer-cta is gold. Two gold pills stacked in one column read
as two equally-weighted primary actions and blunt the catering CTA this site
is built to win; dark-on-ivory is the higher-contrast thing in the footer
while still obviously reading as the second choice. The gold hairline and
gold arrow keep it inside the palette. */
/* Metrics are tuned to the 253px footer column, which is the narrowest place
this button appears on desktop: icon + gaps + arrow leave ~160px for the
label, and "Order Food Online" at .86rem needs ~140px. Widen the chrome and
the label wraps to two lines. */
a.footer-rest-cta{
margin-top:12px; display:flex; align-items:center; gap:10px;
padding:10px 10px 10px 12px; border-radius:18px; text-decoration:none;
color:#FBF6EC; background:linear-gradient(140deg, #2E2A25, #443C31);
border:1px solid rgba(212,155,58,.5);
box-shadow:0 8px 20px rgba(46,42,37,.24);
transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
a.footer-rest-cta:hover{
color:#FBF6EC; transform:translateY(-2px); border-color:var(--gold);
box-shadow:0 14px 28px rgba(46,42,37,.32);
}
.footer-rest-ico{
display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
width:34px; height:34px; border-radius:11px; color:var(--gold);
background:rgba(212,155,58,.16); border:1px solid rgba(212,155,58,.34);
}
.footer-rest-ico svg{ width:19px; height:19px; }
.footer-rest-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.footer-rest-t{
font-family:'Poppins',sans-serif; font-weight:700; font-size:.86rem;
letter-spacing:0; line-height:1.25; color:#FBF6EC; white-space:nowrap;
}
.footer-rest-d{ font-size:.72rem; line-height:1.3; color:rgba(251,246,236,.68); }
.footer-rest-arrow{
display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
width:20px; height:20px; color:var(--gold);
}
.footer-rest-arrow svg{ width:16px; height:16px; }
a.footer-rest-cta:hover .footer-rest-arrow{ transform:translateX(3px); transition:transform .18s ease; }
/* bottom bar: copyright | social | legal */
.footer-bottom{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
border-top:1px solid rgba(212,155,58,.22); padding-top:22px; margin-top:6px;
color:var(--gray); font-size:.83rem;
}
.footer-social{ display:flex; gap:11px; }
.footer-soc{
display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
color:var(--gold-ink); background:rgba(255,255,255,.6); border:1px solid rgba(212,155,58,.35);
transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.footer-soc:hover{ background:var(--gold); color:#fff; border-color:var(--gold); transform:translateY(-2px); }
.footer-soc svg{ width:19px; height:19px; }
.footer-legal a{ color:var(--gray); text-decoration:none; transition:color .25s ease; }
.footer-legal a:hover{ color:var(--gold-ink); }
.footer-legal i{ color:var(--gray); font-style:normal; margin:0 5px; } /* was .5 alpha gold -> 1.45:1 */
/* --- tablet: 2 columns, brand full width --- */
@media(max-width:900px) and (min-width:821px){
.footer-panel{ padding:48px 40px 22px; }
.footer-grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
.footer-grid > *{ padding:2px 0; }
.footer-grid > .footer-col{ border-left:none; }
.footer-grid > .footer-col:nth-child(even){ padding-left:34px; border-left:1px solid rgba(212,155,58,.2); }
}
/* --- mobile: single column, COMPANY/SERVICES/CONTACT accordions --- */
@media(max-width:820px){
footer{ padding:26px 18px 34px; }
.footer-panel{ padding:34px 24px 22px; border-radius:26px; }
.footer-grid{ grid-template-columns:1fr; row-gap:6px; margin-bottom:24px; }
.footer-grid > *{ padding:0; }
.footer-grid > .footer-col{ border-left:none; border-top:1px solid rgba(212,155,58,.2); }
.footer-brand{ padding-bottom:22px; }
.footer-desc{ max-width:none; }
.footer-heading{ display:none; }
.footer-h{
display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
background:none; border:none; padding:16px 2px; font-family:'Poppins',sans-serif;
color:var(--gold-ink); font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.footer-h-ico, .footer-h-chev{ display:inline-flex; }
.footer-hr{ display:none; }
.footer-col-body{ display:none; padding:0 2px 16px; }
.footer-col.footer-open > .footer-col-body{ display:block; animation:pFade .25s ease; }
.footer-col.footer-open .footer-h-chev{ transform:rotate(180deg); }
/* contact items become bordered cards on mobile */
.footer-contact-list li{ margin-bottom:10px; }
.footer-cinfo{
padding:12px 14px; border-radius:12px; align-items:center;
border:1px solid rgba(212,155,58,.28); background:rgba(255,255,255,.55);
}
a.footer-cta, a.footer-rest-cta{ width:100%; }
.footer-bottom{ flex-direction:column; text-align:center; gap:18px; padding-top:22px; }
.footer-legal{ line-height:2; order:3; }
.footer-social{ order:2; }
.footer-copy{ order:1; }
}
@media (prefers-reduced-motion: reduce){
a.footer-cta, a.footer-rest-cta, .footer-col-body li a, .footer-soc, .footer-h-chev{ transition:none; }
a.footer-cta:hover, a.footer-cta:hover .footer-cta-arrow,
a.footer-rest-cta:hover, a.footer-rest-cta:hover .footer-rest-arrow{ transform:none; }
.footer-col.footer-open > .footer-col-body{ animation:none; }
}
/* ================= NEW: FORMS ================= */
.form-wrap{ max-width:760px; margin:0 auto; padding:48px 44px; border-radius:28px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-family:'Poppins',sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.03em; color:var(--charcoal); }
.form-field .req{ color:var(--danger); }
.form-field input, .form-field select, .form-field textarea{
font-family:'Inter',sans-serif; font-size:.94rem; padding:13px 16px; border-radius:12px;
border:1px solid #8F8160; background:rgba(255,255,255,.7); color:var(--charcoal);
transition:border-color .25s ease, box-shadow .25s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
outline:2px solid var(--gold-ink); outline-offset:2px; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,155,58,.18);
}
.form-field textarea{ resize:vertical; min-height:110px; font-family:'Inter',sans-serif; }
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(192,57,43,.12); }
.field-error{ font-size:.76rem; color:var(--danger); min-height:1em; display:none; }
.form-field.invalid .field-error{ display:block; }
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{
display:none; margin-bottom:22px; padding:16px 18px; border-radius:14px; font-size:.9rem; line-height:1.5;
}
.form-status.show{ display:block; }
.form-status.success{ background:rgba(58,138,78,.12); border:1px solid rgba(58,138,78,.35); color:#256137; }
.form-status.error{ background:rgba(192,57,43,.1); border:1px solid rgba(192,57,43,.32); color:#8a2a20; }
.form-submit-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.form-hint{ font-size:.78rem; color:var(--gray); }
/* The quote form is the whole point of this page, and on a phone it was the
one thing that did not fit: .form-grid held two columns at every width and
.form-wrap kept 44px of padding on each side, which pushed the fields
~145px past a 375px viewport and made the page scroll sideways. One column,
tighter padding, and a 16px input font (anything smaller makes iOS Safari
zoom on focus, which then strands the user mid-form). */
@media(max-width:560px){
.form-wrap{ padding:26px 16px; border-radius:20px; }
/* minmax(0,1fr), not 1fr: a grid item defaults to min-width:auto, so a long
placeholder or a wide