/* ============================================================
Daily Dose — Website v4 (Editorial typography pass)
Palette: #43573E moss · #2F542C deep · #F2EDE1 cream · #FFFFFF
Type: Fraunces (display, variable) · General Sans (sub/body)
============================================================ */
:root {
--green: #43573E;
--green-deep: #2F542C;
--cream: #F2EDE1;
--cream-dk: #e8e1cf;
--white: #FFFFFF;
--ink: #1a1a1a;
/* Sampled from the malibu artwork: diagonal moss gradient, light top-right → deep bottom-left */
--green-grad-light: #5a6b52;
--green-grad-mid: #43573E;
--green-grad-dark: #1e2218;
--bg-green-grad: linear-gradient(215deg,
var(--green-grad-light) 0%,
var(--green-grad-mid) 42%,
var(--green-grad-dark) 100%);
--max-w: 1600px;
--pad-x: clamp(20px, 3.2vw, 40px);
--font-display: "Fraunces", "Playfair Display", Georgia, serif;
--font-sub: "General Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-body: "General Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--r-pill: 999px;
--nav-h: 96px;
--nav-h-scrolled: 68px;
--marquee-h: 40px;
/* Signature motion curves — one house language, used everywhere.
--ease-dd default (gentle, confident)
--ease-dd-out long reveals (longer trail, more settle)
--ease-dd-spring subtle overshoot (for reveals that should "land")
--ease-dd-snap short interactive (hover, button press) */
--ease-dd: cubic-bezier(.22, .7, .22, 1);
--ease-dd-out: cubic-bezier(.19, 1, .22, 1);
--ease-dd-spring: cubic-bezier(.34, 1.06, .4, 1);
--ease-dd-snap: cubic-bezier(.4, 0, .2, 1);
--t-fast: 200ms var(--ease-dd-snap);
--t-med: 360ms var(--ease-dd);
--t-slow: 640ms var(--ease-dd-out);
/* Type scale */
--fs-hero: clamp(56px, 9.4vw, 148px);
--fs-h2: clamp(28px, 3vw, 44px);
--fs-lede: clamp(15px, 1.05vw, 17px);
--fs-body: 16px;
--fs-label: 11.5px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
color: var(--green-deep);
background: var(--white);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: var(--fs-body);
line-height: 1.5;
font-weight: 400;
text-rendering: optimizeLegibility;
font-synthesis: none; /* never fake-italic or fake-bold */
font-feature-settings: "ss01", "ss02"; /* General Sans alternates — softer a/g */
}
/* Fraunces variable-font defaults — applied to anything rendered in the
display serif. Optical size tracks element role: body+controls keep
low opsz for legibility; h1/h2/.*-title use a higher opsz for that
editorial display cut. Hero explicitly overrides to opsz 144. */
h1, h2, h3,
[class*="-title"],
[class$="title"] {
font-variation-settings: "opsz" 18, "SOFT" 0, "WONK" 0;
font-weight: 350;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: opacity var(--t-fast); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
border-radius: 4px;
}
::selection { background: var(--green-deep); color: var(--cream); }
/* ============================================================
NAV — thin bar, logo centered, ORDER pill right
============================================================ */
.nav {
position: fixed; top: var(--marquee-h); left: 0; right: 0; z-index: 50;
height: var(--nav-h);
display: flex; align-items: center;
padding: 0 var(--pad-x);
background: transparent;
transition: background var(--t-med), color var(--t-med), border-color var(--t-med), height var(--t-med), box-shadow var(--t-med);
color: var(--cream);
}
.nav.is-scrolled { height: var(--nav-h-scrolled); box-shadow: 0 1px 0 rgba(47,84,44,.08); }
.nav.is-scrolled .nav-logo { height: 34px; }
.nav.is-scrolled,
body.nav-solid .nav {
background: var(--white);
color: var(--green-deep);
border-bottom: 1px solid rgba(47,84,44,.1);
}
body.nav-solid .nav .nav-logo { filter: none; }
.nav-inner {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
.nav-links {
display: flex; gap: 32px;
font-family: var(--font-sub);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.nav-links a { padding: 4px 0; position: relative; }
.nav-mobile-order { display: none; }
.nav-links a::after {
content: ""; position: absolute; left: 0; right: 100%;
bottom: -2px; height: 1px; background: currentColor;
transition: right var(--t-med);
}
.nav-links a:hover::after,
.nav-links a.is-active::after { right: 0; }
.nav-logo-link {
justify-self: center;
display: flex; align-items: center;
}
.nav-logo {
height: 48px; width: auto;
transition: filter var(--t-med), height var(--t-med);
}
.nav:not(.is-scrolled) .nav-logo { filter: brightness(0) invert(1); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 18px; }
.nav-burger {
display: none;
width: 40px; height: 40px;
align-items: center; justify-content: center;
}
.nav-burger span {
display: block; width: 22px; height: 1.5px; background: currentColor;
position: relative;
transition: background var(--t-fast);
}
.nav-burger span::before,
.nav-burger span::after {
content: ""; position: absolute; left: 0; width: 22px; height: 1.5px;
background: currentColor;
transition: top var(--t-fast), transform var(--t-fast);
}
.nav-burger span::before { top: -7px; }
.nav-burger span::after { top: 7px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before {
top: 0;
transform: rotate(45deg);
}
.nav-burger[aria-expanded="true"] span::after {
top: 0;
transform: rotate(-45deg);
}
body.nav-menu-open .nav,
body.is-home.nav-menu-open .nav {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
background: var(--white);
color: var(--green-deep);
border-bottom: 1px solid rgba(47,84,44,.1);
}
body.nav-menu-open .nav-logo { filter: none !important; }
@media (max-width: 880px) {
body.nav-menu-open { overflow: hidden; }
.nav-inner { grid-template-columns: auto 1fr auto; }
.nav-links {
position: fixed; inset: calc(var(--marquee-h) + var(--nav-h)) 0 auto 0;
background: var(--white);
color: var(--green-deep);
padding: 28px var(--pad-x) 36px;
flex-direction: column; gap: 20px;
font-size: 16px;
max-height: calc(100dvh - var(--marquee-h) - var(--nav-h));
overflow-y: auto;
transform: translateY(-110%);
transition: transform var(--t-med), visibility 0s var(--t-med);
border-bottom: 1px solid rgba(47,84,44,.12);
visibility: hidden;
box-shadow: 0 12px 40px -20px rgba(0,0,0,.25);
}
.nav-links.is-open {
transform: translateY(0);
visibility: visible;
transition: transform var(--t-med), visibility 0s;
}
.nav.is-scrolled .nav-links {
inset: calc(var(--marquee-h) + var(--nav-h-scrolled)) 0 auto 0;
max-height: calc(100dvh - var(--marquee-h) - var(--nav-h-scrolled));
}
.nav-mobile-order { display: inline-flex; }
.nav-burger { display: inline-flex; }
.nav-right .btn-order-desktop { display: none; }
}
/* ============================================================
BUTTONS — pill shape, tight caps label
============================================================ */
.btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 24px;
border-radius: var(--r-pill);
font-family: var(--font-sub);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
white-space: nowrap;
transition: color var(--t-med), border-color var(--t-med), transform var(--t-fast), box-shadow var(--t-med);
border: 1px solid transparent;
overflow: hidden;
isolation: isolate;
}
.btn::before {
content: "";
position: absolute; inset: 0;
background: currentColor;
transform: translateX(-101%);
transition: transform 420ms cubic-bezier(.7,.05,.2,1);
z-index: -1;
opacity: .08;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -14px rgba(47,84,44,.35); }
.btn:hover::before { transform: translateX(0); }
.btn:active { transform: translateY(0); }
.btn .arrow { font-size: 13px; letter-spacing: 0; line-height: 1; transition: transform var(--t-med); }
.btn:hover .arrow { transform: translateX(7px); }
.btn-primary { background: var(--cream); color: var(--green-deep); border-color: rgba(47,84,44,.18); }
.btn-primary::before { display: none; }
.btn-primary:hover { color: var(--green-deep); background: var(--cream); border-color: rgba(47,84,44,.35); }
.btn-cream { background: var(--cream); color: var(--green-deep); }
.btn-cream::before { background: var(--green-deep); opacity: 0; }
.btn-cream:hover { color: var(--cream); }
.btn-cream:hover::before { opacity: 1; transform: translateX(0); }
.btn-ghost { background: transparent; color: var(--green-deep); border-color: var(--green-deep); }
.btn-ghost::before { background: var(--green-deep); opacity: 0; }
.btn-ghost:hover { color: var(--cream); }
.btn-ghost:hover::before { opacity: 1; transform: translateX(0); }
.btn-ghost-cream { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-ghost-cream::before { background: var(--cream); opacity: 0; }
.btn-ghost-cream:hover { color: var(--green-deep); }
.btn-ghost-cream:hover::before { opacity: 1; transform: translateX(0); }
/* "Learn more →" text link — the signature BS text link */
.link-more {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-sub);
font-size: 11.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
padding-bottom: 3px;
border-bottom: 1px solid currentColor;
}
.link-more:hover { opacity: .65; }
/* ============================================================
HERO — full viewport image + overlay text bottom-left
============================================================ */
.hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
overflow: hidden;
background: var(--green-deep);
color: var(--cream);
}
.hero-img, .hero-video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.hero-video { z-index: 0; }
.hero::after {
/* gradient so nav (top) and overlay text (bottom) stay legible */
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 22%, rgba(0,0,0,0) 50%, rgba(0,0,0,.6) 100%);
pointer-events: none;
}
.hero-overlay {
position: absolute; inset: auto 0 0 0; z-index: 2;
padding: 0 var(--pad-x) clamp(36px, 5vw, 72px);
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(24px, 4vw, 72px);
align-items: end;
max-width: var(--max-w);
margin: 0 auto;
width: 100%;
}
.hero-title {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-hero);
line-height: 1.02; /* was 0.9 — gives ascenders + descenders breathing room */
letter-spacing: -0.015em;
padding-bottom: 0.08em; /* safety room for descenders like the y in "daily" */
font-variation-settings: "opsz" 14, "SOFT" 0, "WONK" 0;
}
.hero-title em { font-style: italic; font-weight: 300; }
.hero-aside {
display: flex; flex-direction: column; gap: 20px;
padding-bottom: 8px;
max-width: 420px;
}
.hero-sub {
font-family: var(--font-sub);
font-size: var(--fs-lede);
line-height: 1.55;
opacity: .94;
}
.hero-aside .btn { align-self: flex-start; }
@media (max-width: 880px) {
.hero { height: 100dvh; min-height: 560px; }
.hero-overlay {
grid-template-columns: 1fr;
gap: 20px;
}
.hero-aside { max-width: 100%; }
}
/* ============================================================
HERO MINIMAL — home page only
Full-bleed video + centred wordmark + scroll cue.
Nav is hidden until the user scrolls.
============================================================ */
.hero-minimal .hero-overlay { display: none; } /* safety if overlay ever present */
/* Soften the top-dark gradient since there's no nav to sit under */
.hero-minimal::after {
background: linear-gradient(180deg,
rgba(0,0,0,.22) 0%,
rgba(0,0,0,0) 40%,
rgba(0,0,0,0) 62%,
rgba(0,0,0,.62) 100%);
}
.hero-wordmark {
position: absolute;
inset: 0;
margin: 0;
z-index: 2;
display: grid;
place-items: center;
pointer-events: none;
padding: 10vh var(--pad-x);
}
.hero-wordmark img {
width: min(64vw, 820px);
height: auto;
opacity: 1;
transform: translateY(0) scale(1);
animation: wordmark-in 1100ms var(--ease-dd) 80ms both;
filter: drop-shadow(0 14px 38px rgba(0,0,0,0.35));
will-change: opacity, transform;
}
@keyframes wordmark-in {
from { opacity: .88; transform: translateY(12px) scale(0.988); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-scroll-cue {
position: absolute;
left: 50%;
bottom: clamp(24px, 4vh, 44px);
z-index: 2;
transform: translateX(-50%);
font-family: var(--font-sub);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--cream);
opacity: 0;
animation: cue-in 900ms ease 1500ms forwards;
}
.hero-scroll-cue::after {
content: " ↓";
display: inline-block;
animation: cue-bob 2s ease-in-out infinite;
}
@keyframes cue-in {
to { opacity: 0.78; }
}
@keyframes cue-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
/* Nav — hidden until scrolled, on the home page only */
body.is-home .nav {
transform: translateY(calc(-100% - 8px));
opacity: 0;
pointer-events: none;
transition:
transform 520ms var(--ease-dd),
opacity 420ms var(--ease-dd),
background var(--t-med),
color var(--t-med),
border-color var(--t-med),
height var(--t-med),
box-shadow var(--t-med);
}
body.is-home .nav.is-scrolled {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.hero-wordmark img { animation: none; opacity: 1; transform: none; }
.hero-scroll-cue { animation: none; opacity: 0.78; }
.hero-scroll-cue::after { animation: none; }
}
@media (max-width: 600px) {
.hero-wordmark img { width: min(74vw, 420px); }
}
/* ============================================================
SPLIT SECTION — text (L) + big photo (R)
(Blank Street pattern: 50/50 full-bleed, minimal gutter)
============================================================ */
.split-row {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
min-height: clamp(460px, 62vh, 720px);
background: var(--white);
}
.split-row--reverse { direction: rtl; }
.split-row--reverse > * { direction: ltr; }
.split-text {
padding: clamp(40px, 5vw, 88px) clamp(28px, 4vw, 72px);
display: flex; flex-direction: column; justify-content: center;
gap: 20px;
max-width: 560px;
}
.split-text .eyebrow {
font-family: var(--font-sub);
font-size: var(--fs-label);
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: .7;
}
.split-text h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h2);
line-height: 1.02;
letter-spacing: -0.02em;
}
.split-text h2 em { font-style: italic; font-weight: 400; }
.split-text p {
font-family: var(--font-sub);
font-size: var(--fs-lede);
line-height: 1.55;
max-width: 40ch;
}
.split-text .link-more { margin-top: 6px; }
.split-photo { overflow: hidden; background: var(--green); }
.split-photo img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--t-slow);
}
.split-row:hover .split-photo img { transform: scale(1.02); }
/* Darker text-side variant */
.split-row.on-dark { background: var(--bg-green-grad); color: var(--cream); }
.split-row.on-cream { background: var(--cream); color: var(--green-deep); }
@media (max-width: 880px) {
.split-row { grid-template-columns: 1fr; min-height: 0; }
.split-row--reverse { direction: ltr; }
.split-photo { aspect-ratio: 4 / 3; }
.split-text { padding: clamp(40px, 9vw, 72px) var(--pad-x); max-width: 100%; }
}
/* ============================================================
CARD ROW — two cards side-by-side: image on top, text below
============================================================ */
.cards {
padding: clamp(40px, 5vw, 72px) clamp(12px, 1.6vw, 24px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(12px, 1.6vw, 24px);
background: var(--bg-green-grad, var(--green-deep));
color: var(--cream);
}
.cards .card { color: var(--cream); }
.cards .card-body h3,
.cards .card-body p,
.cards .card-body .link-more { color: var(--cream); }
.cards .link-more { border-bottom-color: rgba(245,239,225,0.4); }
.cards .card:hover .link-more { border-bottom-color: var(--cream); }
.cards .card-media { background: rgba(255,255,255,0.06); }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }
/* 3-column variant (used on menu page signatures) */
.cards.cards--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) { .cards.cards--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards.cards--3 { grid-template-columns: 1fr; } }
/* Product-on-plinth variant for menu signatures */
.card--plinth .card-media { background: var(--cream); display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; }
.card--plinth .card-media img { width: 70%; height: 70%; object-fit: contain; }
.card--plinth.on-deep .card-media { background: var(--bg-green-grad); }
.card--plinth.on-green .card-media { background: var(--bg-green-grad); }
.card--plinth .card-body { padding-top: 18px; }
.card--plinth .card-price {
font-family: var(--font-sub);
font-style: italic;
font-size: 15px;
opacity: .75;
margin-top: -2px;
}
.card { display: flex; flex-direction: column; }
.card-media {
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--cream);
}
.card-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--t-slow);
}
.card:hover .card-media img { transform: scale(1.02); }
.card-body {
padding: 22px 6px 4px;
display: flex; flex-direction: column; gap: 10px;
}
.card-body h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.05;
letter-spacing: -0.02em;
}
.card-body h3 em { font-style: italic; font-weight: 400; }
.card-body p {
font-family: var(--font-sub);
font-size: var(--fs-lede);
line-height: 1.5;
max-width: 46ch;
}
.card-body .link-more { margin-top: 6px; }
/* ============================================================
SOCIAL / INSTAGRAM FEED
============================================================ */
.social {
padding: clamp(56px, 7vw, 104px) var(--pad-x) clamp(40px, 5vw, 72px);
background: var(--white);
color: var(--green-deep);
}
.social-inner { max-width: var(--max-w); margin: 0 auto; }
.social-head {
display: flex; align-items: end; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
margin-bottom: clamp(24px, 3vw, 40px);
}
.social-head .eyebrow { display: block; margin-bottom: 10px; opacity: .7; }
.social-head h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h2);
line-height: 1.02;
letter-spacing: -0.02em;
}
.social-head h2 em { font-style: italic; font-weight: 400; }
.social-handle {
font-family: var(--font-sub);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
border-bottom: 1px solid currentColor;
padding-bottom: 3px;
}
.social-handle:hover { opacity: .65; }
.social-head-right {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.social-live {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
background: rgba(47,84,44,0.06);
border: 1px solid rgba(47,84,44,0.14);
border-radius: 999px;
font-family: var(--font-sub);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.social-live .pulse {
position: relative;
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: #5cb458;
}
.social-live .pulse::before,
.social-live .pulse::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #5cb458;
opacity: .55;
animation: live-pulse 2.4s var(--ease-dd) infinite;
}
.social-live .pulse::after { animation-delay: 1.2s; }
.social-live-text strong { font-weight: 700; text-transform: none; letter-spacing: 0.04em; font-style: italic; }
@keyframes live-pulse {
0% { transform: scale(1); opacity: .55; }
70% { transform: scale(2.6); opacity: 0; }
100% { transform: scale(2.6); opacity: 0; }
}
.social-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: clamp(10px, 1.1vw, 18px);
}
.social-tile {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 6px;
background: var(--cream);
display: block;
}
.social-tile img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--t-slow);
}
.social-tile:hover img { transform: scale(1.05); }
.social-tile:first-child {
grid-column: span 2;
grid-row: span 2;
}
.social-tile:nth-child(4) {
grid-row: span 2;
}
/* Stamp (time-ago) in the top-left corner — always visible, subtle */
.ig-stamp {
position: absolute;
top: 12px; left: 12px;
z-index: 2;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px;
background: rgba(26,26,26,0.5);
color: var(--cream);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 999px;
font-family: var(--font-sub);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.ig-stamp::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: #8ddc8a; opacity: .9;
}
/* Hover overlay with caption + likes/comments */
.ig-overlay {
position: absolute;
inset: 0;
padding: 16px 16px 14px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 8px;
color: var(--cream);
background: linear-gradient(180deg, transparent 48%, rgba(26,26,26,0.82) 100%);
opacity: 0;
transition: opacity 320ms var(--ease-dd);
z-index: 1;
}
.social-tile:hover .ig-overlay,
.social-tile:focus-within .ig-overlay { opacity: 1; }
.ig-caption {
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
line-height: 1.25;
transform: translateY(6px);
transition: transform 360ms var(--ease-dd) 60ms;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.social-tile:hover .ig-caption,
.social-tile:focus-within .ig-caption { transform: translateY(0); }
.ig-meta {
display: flex;
gap: 14px;
font-family: var(--font-sub);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
opacity: .9;
transform: translateY(6px);
transition: transform 420ms var(--ease-dd) 120ms;
}
.social-tile:hover .ig-meta,
.social-tile:focus-within .ig-meta { transform: translateY(0); }
.ig-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ig-meta svg { flex: none; }
@media (max-width: 900px) {
.social-grid { grid-template-columns: repeat(3, 1fr); }
.social-tile:first-child { grid-column: span 2; grid-row: span 2; }
.social-tile:nth-child(4) { grid-row: span 1; }
}
@media (max-width: 560px) {
.social-grid { grid-template-columns: repeat(2, 1fr); }
.social-tile:first-child,
.social-tile:nth-child(4) {
grid-column: auto;
grid-row: auto;
}
.ig-caption { font-size: 14px; }
.social-head-right { width: 100%; }
.social-live { font-size: 10.5px; letter-spacing: 0.18em; }
}
/* ============================================================
FOOTER — rich: brand / visit / hours / elsewhere + map
============================================================ */
.footer {
background: var(--bg-green-grad);
color: var(--cream);
border-top: 1px solid rgba(47,84,44,.12);
font-family: var(--font-sub);
}
.footer-top {
padding: clamp(56px, 7vw, 104px) var(--pad-x) clamp(40px, 5vw, 72px);
max-width: var(--max-w);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: clamp(40px, 5vw, 80px);
align-items: stretch;
}
.footer-brand-col {
display: flex;
flex-direction: column;
gap: clamp(32px, 4vw, 52px);
min-width: 0;
}
.footer-info {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 3vw, 48px);
}
.footer-brand .footer-wordmark {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(48px, 6vw, 92px);
line-height: 0.92;
letter-spacing: -0.025em;
}
.footer-brand .footer-wordmark em { font-style: italic; font-weight: 400; }
.footer-brand p {
margin-top: 18px;
max-width: 34ch;
font-size: var(--fs-lede);
line-height: 1.55;
opacity: .82;
}
/* Instagram link — sits directly below the brand tagline.
Cream pill with a subtle border so the icon + handle
reads as a single, tappable target on every page. */
.footer-social {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 22px;
padding: 10px 18px 10px 14px;
border: 1px solid rgba(242, 237, 225, 0.35);
border-radius: 999px;
color: var(--cream);
font-family: var(--font-sub);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: lowercase;
text-decoration: none;
transition: background var(--t-fast) ease,
border-color var(--t-fast) ease,
color var(--t-fast) ease;
}
.footer-social:hover,
.footer-social:focus-visible {
background: var(--cream);
border-color: var(--cream);
color: var(--green-deep);
}
.footer-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
}
.footer-social-icon svg {
display: block;
width: 22px; height: 22px;
}
.footer-social-label em {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 16px;
letter-spacing: -0.005em;
text-transform: lowercase;
margin-left: 4px;
}
.footer-col h4 {
font-family: var(--font-sub);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.26em;
text-transform: uppercase;
opacity: .7;
margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col li, .footer-col a {
font-family: var(--font-sub);
font-size: 15px;
line-height: 1.45;
}
.footer-col a { border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color var(--t-fast), opacity var(--t-fast); }
.footer-col a:hover { border-bottom-color: currentColor; }
/* Footer nav — small row of in-site links at the bottom of the brand column */
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 28px;
margin-top: auto; /* pushes nav to the bottom of the column */
padding-top: clamp(20px, 3vw, 36px);
border-top: 1px solid rgba(242,237,225,.14);
}
.footer-nav a {
font-family: var(--font-sub);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cream);
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: border-color var(--t-fast), opacity var(--t-fast);
}
.footer-nav a:hover { border-bottom-color: currentColor; }
/* Map — now a large, prominent feature filling the right column */
.footer-aside {
display: flex;
flex-direction: column;
min-width: 0;
}
.footer-map {
position: relative;
width: 100%;
height: 100%;
min-height: clamp(360px, 42vw, 560px);
border-radius: 8px;
overflow: hidden;
background: #1a1a1a;
border: 1px solid rgba(242,237,225,.14);
}
.footer-map iframe {
width: 100%; height: 100%;
display: block; border: 0;
pointer-events: none;
}
.footer-map-open {
position: absolute; inset: 0;
display: block;
text-decoration: none;
z-index: 2;
}
.footer-map-open::after {
content: "Open map →";
position: absolute;
left: 18px;
bottom: 18px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(242,237,225,.92);
color: var(--green-deep);
font-family: var(--font-sub);
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.footer-bottom {
max-width: var(--max-w); margin: 0 auto;
padding: 20px var(--pad-x);
display: flex; justify-content: space-between; align-items: center;
gap: 20px; flex-wrap: wrap;
font-size: 11.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: .8;
border-top: 1px solid rgba(242,237,225,.10);
}
@media (max-width: 900px) {
.footer-top {
grid-template-columns: 1fr;
gap: clamp(36px, 5vw, 56px);
}
.footer-map { min-height: 320px; }
}
@media (max-width: 720px) {
.footer-info { grid-template-columns: 1fr; row-gap: 28px; }
}
@media (max-width: 560px) {
.footer-map { min-height: 260px; }
}
/* ============================================================
LEGACY + other pages — kept so menu / visit / story / contact
still render (they'll use this system until fully redesigned)
============================================================ */
.section { padding: clamp(56px, 7vw, 112px) var(--pad-x); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.section--cream { background: var(--cream); color: var(--green-deep); }
.section--white { background: var(--white); color: var(--green-deep); }
.section--green { background: var(--green); color: var(--cream); }
.section--deep { background: var(--green-deep); color: var(--cream); }
.eyebrow {
font-family: var(--font-sub);
font-size: var(--fs-label);
letter-spacing: 0.22em;
text-transform: uppercase;
}
.display {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.022em;
line-height: 1;
}
.display em { font-style: italic; font-weight: 400; }
.page-hero {
padding: calc(var(--marquee-h) + var(--nav-h) + clamp(72px, 9vw, 136px)) var(--pad-x) clamp(40px, 5vw, 72px);
max-width: var(--max-w); margin: 0 auto;
}
.page-hero .eyebrow { margin-bottom: 18px; opacity: .7; }
.page-hero h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(48px, 7vw, 112px);
line-height: 1.02; /* was 0.92 — make room for descenders */
letter-spacing: -0.025em;
max-width: 16ch;
padding-bottom: 0.08em;
}
.page-hero h1 em { font-style: normal; font-weight: 500; }
.page-hero .lede {
margin-top: 28px;
max-width: 60ch;
font-family: var(--font-sub);
font-size: var(--fs-lede);
line-height: 1.55;
}
/* ============================================================
CONTACT PAGE — full-bleed interior hero + simple form
============================================================ */
.contact-hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 560px;
overflow: hidden;
background: var(--green-deep);
color: var(--cream);
}
.contact-hero-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.contact-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,.48) 0%,
rgba(0,0,0,.22) 22%,
rgba(0,0,0,.16) 52%,
rgba(0,0,0,.58) 100%);
pointer-events: none;
z-index: 1;
}
.contact-hero-wordmark {
position: absolute;
left: var(--pad-x);
right: var(--pad-x);
bottom: clamp(36px, 6vh, 72px);
z-index: 2;
margin: 0;
text-align: left;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(64px, 11vw, 172px);
line-height: 0.98;
letter-spacing: -0.03em;
color: var(--cream);
text-shadow: 0 10px 40px rgba(0,0,0,.38);
}
.contact-hero-wordmark em {
font-style: italic;
font-weight: 500;
}
@media (max-width: 880px) {
.contact-hero { height: 100dvh; min-height: 520px; }
}
/* Form section */
.contact-form-section {
background: var(--cream);
color: var(--green-deep);
padding: clamp(72px, 9vw, 136px) var(--pad-x) clamp(96px, 11vw, 160px);
}
.contact-form-inner {
max-width: 720px;
margin: 0 auto;
}
.contact-form-inner .eyebrow { margin-bottom: 14px; opacity: .7; }
.contact-form-inner h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(36px, 4.4vw, 64px);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 18px;
}
.contact-form-inner h2 em { font-style: italic; font-weight: 500; }
.contact-form-inner .lede {
font-family: var(--font-sub);
font-size: var(--fs-lede);
line-height: 1.55;
max-width: 56ch;
opacity: .85;
}
.contact-form-inner .lede a {
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.form-thanks {
grid-column: 1 / -1;
font-family: var(--font-sub);
font-size: var(--fs-lede);
opacity: .85;
margin: 6px 0 0;
}
/* Split-pane: full-column-width wrapper that hosts a constrained .split-text */
.split-pane {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(56px, 7vw, 104px) clamp(28px, 4vw, 72px);
}
.split-pane .split-text {
max-width: 560px;
padding: 0;
width: 100%;
}
.pane-cream { background: var(--cream); color: var(--green-deep); }
.pane-white { background: var(--white); color: var(--green-deep); }
.pane-dark { background: var(--bg-green-grad); color: var(--cream); }
.pane-green { background: var(--bg-green-grad); color: var(--cream); }
@media (max-width: 880px) {
.split-pane { padding: clamp(40px, 9vw, 72px) var(--pad-x); }
}
.contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 24px;
margin-top: 28px;
}
.contact-form .field-wide { grid-column: 1 / -1; }
/* Honeypot anti-spam field — invisible to visitors, irresistible to bots.
Bots fill it in and Netlify silently rejects their submission. */
.contact-form .hp-field {
position: absolute !important;
left: -10000px !important;
width: 1px; height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.contact-form label {
display: flex; flex-direction: column; gap: 8px;
font-family: var(--font-sub);
font-size: var(--fs-label);
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: .8;
}
.contact-form input,
.contact-form textarea {
font: 16px/1.5 var(--font-sub);
background: transparent;
border: none;
border-bottom: 1px solid rgba(47,84,44,.35);
padding: 10px 2px;
color: var(--green-deep);
outline: 2px solid transparent;
outline-offset: 4px;
border-radius: 2px;
transition: border-color var(--t-fast), outline-color var(--t-fast);
}
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--green-deep); }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline-color: rgba(47,84,44,.45); }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form button { justify-self: start; margin-top: 12px; }
.contact-direct {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
margin-top: 28px;
font-family: var(--font-sub);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.contact-direct a {
border-bottom: 1px solid rgba(47,84,44,.35);
padding-bottom: 3px;
}
.contact-direct a:hover { opacity: .65; }
@media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
.contact-direct {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.contact-direct a { padding: 4px 0 5px; }
}
/* Legacy split for old .split usage on other pages */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 72px);
align-items: center;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--green); }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split-copy h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(32px, 4vw, 56px);
line-height: 1;
letter-spacing: -0.022em;
margin-bottom: 18px;
}
.split-copy h2 em { font-style: italic; font-weight: 400; }
.split-copy p {
font-family: var(--font-sub);
font-size: 17px;
line-height: 1.6;
max-width: 50ch;
}
.split-copy p + p { margin-top: 12px; }
.split-copy .btn { margin-top: 24px; }
/* Utility */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ============================================================
PHASE 2 — Motion: reveals, hero word in, breath pulse, grain,
richer hover links, .link-more arrow draw
============================================================ */
/* Scroll-triggered reveals */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 780ms var(--ease-dd),
transform 780ms var(--ease-dd);
will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* Stagger a reveal's direct children */
.reveal-stagger > * {
opacity: 0;
transform: translateY(18px);
transition: opacity 680ms var(--ease-dd),
transform 680ms var(--ease-dd);
}
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1){ transition-delay: 0ms; }
.reveal-stagger.is-in > *:nth-child(2){ transition-delay: 90ms; }
.reveal-stagger.is-in > *:nth-child(3){ transition-delay: 180ms; }
.reveal-stagger.is-in > *:nth-child(4){ transition-delay: 270ms; }
.reveal-stagger.is-in > *:nth-child(5){ transition-delay: 360ms; }
.reveal-stagger.is-in > *:nth-child(6){ transition-delay: 450ms; }
/* Hero title word-by-word reveal.
JS wraps each word of .hero-title in ....
We fade + rise each word — NO overflow clipping, so descenders
like the y in "daily" never get cut off. */
.hero-title .word {
display: inline-block;
vertical-align: baseline;
margin-right: 0.22em;
}
.hero-title .word:last-child { margin-right: 0; }
.hero-title .word .word-inner {
display: inline-block;
opacity: 0;
transform: translateY(28%);
transition: opacity 700ms var(--ease-dd),
transform 900ms cubic-bezier(.2,.72,.15,1);
}
.hero-title.is-in .word .word-inner { opacity: 1; transform: translateY(0); }
.hero-title.is-in .word:nth-child(1) .word-inner { transition-delay: 60ms; }
.hero-title.is-in .word:nth-child(2) .word-inner { transition-delay: 140ms; }
.hero-title.is-in .word:nth-child(3) .word-inner { transition-delay: 220ms; }
.hero-title.is-in .word:nth-child(4) .word-inner { transition-delay: 300ms; }
.hero-title.is-in .word:nth-child(5) .word-inner { transition-delay: 380ms; }
.hero-title.is-in .word:nth-child(6) .word-inner { transition-delay: 460ms; }
.hero-title.is-in .word:nth-child(7) .word-inner { transition-delay: 540ms; }
.hero-title.is-in .word:nth-child(8) .word-inner { transition-delay: 620ms; }
/* Hero aside fades in after the title lands */
.hero-aside {
opacity: 0;
transform: translateY(12px);
transition: opacity 600ms ease 680ms, transform 600ms var(--ease-dd) 680ms;
}
.hero.is-in .hero-aside { opacity: 1; transform: none; }
/* Hero image — slow "breath" brightness pulse */
@keyframes heroBreath {
0%, 100% { filter: brightness(1) saturate(1); }
50% { filter: brightness(1.03) saturate(1.02); }
}
.hero-img, .hero-video {
animation: heroBreath 9s ease-in-out infinite;
transition: transform 1200ms var(--ease-dd);
}
/* Parallax hint — JS sets --py to a tiny translateY; if JS is off, stays at 0 */
.split-photo img {
--py: 0px;
transform: translate3d(0, var(--py), 0) scale(1.04);
}
.split-row:hover .split-photo img { transform: translate3d(0, var(--py), 0) scale(1.06); }
/* Link-more — arrow draws in on hover */
.link-more { position: relative; overflow: hidden; }
.link-more::after {
content: "";
position: absolute; left: 0; bottom: 0;
height: 1px; width: 100%;
background: currentColor;
transform: scaleX(0);
transform-origin: right center;
transition: transform 440ms var(--ease-dd);
}
.link-more:hover { opacity: 1; }
.link-more:hover::after { transform: scaleX(1); transform-origin: left center; }
/* Cards pop softly on hover */
.card, .plinth { transition: transform var(--t-med), box-shadow var(--t-med); }
.card:hover { transform: translateY(-4px); }
.plinth:hover { transform: translateY(-4px); }
/* Ambient film-grain overlay (fixed, non-interactive) */
.grain-overlay {
position: fixed; inset: 0;
pointer-events: none;
z-index: 100;
opacity: 0.11; /* bumped from 0.045 for a more cinematic grain */
mix-blend-mode: overlay; /* overlay reads warmer than multiply */
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
}
/* ============================================================
UNIFIED PHOTOGRAPHY TONE
------------------------------------------------------------
Subtle tone pass so iPhone, R1, and storefront shots feel
like one family. Applied to every ![]()
inside photo-heavy
containers by default; disabled on logos/SVGs/transparent PNGs
via the .no-tone class (add to icon-ish imagery).
============================================================ */
.split-photo img,
.hero-img,
.journey-payoff-bg,
.card-media img,
.social-tile img,
.menu-split-media--photo img,
.hero-visual img,
.contact-hero img {
filter: saturate(0.92) contrast(1.04) brightness(0.98) sepia(0.04);
transition: filter var(--t-slow), transform var(--t-slow);
}
/* Opt-out for transparent PNGs / icons / SVG logos */
.no-tone,
.no-tone img,
.hero-wordmark img,
.footer-wordmark,
.nav-logo {
filter: none !important;
}
/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
.reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
.hero-title .word .word-inner { opacity: 1 !important; transform: none !important; }
.hero-aside { opacity: 1 !important; transform: none !important; }
.hero-img, .hero-video { animation: none !important; }
.grain-overlay { display: none; }
.marquee-track { animation: none !important; }
}
/* ============================================================
INGREDIENT JOURNEY — pinned-scroll cinematic (desktop)
4 stages: entrance → reveal → spotlight (×6) → composition
Falls back to a stacked vertical stack on tablet/mobile and
to a static gallery when (prefers-reduced-motion).
============================================================ */
.journey {
position: relative;
background: var(--white);
color: var(--green-deep);
overflow: hidden;
isolation: isolate;
}
/* Mobile-payoff block — sits at the end of the stacked story on small screens.
Hidden on cinema width; the cinema has its own in-pin payoff. */
.journey-stack-payoff {
position: relative;
max-width: 640px;
margin: 0 auto;
padding: clamp(24px, 4vw, 48px) var(--pad-x) clamp(72px, 10vw, 120px);
text-align: center;
color: var(--green-deep);
}
.journey-stack-payoff .eyebrow { display: inline-block; opacity: .7; margin-bottom: 14px; }
.journey-stack-payoff h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(44px, 10vw, 72px);
line-height: 1.02;
letter-spacing: -0.025em;
padding-bottom: 0.08em;
margin-bottom: 16px;
}
.journey-stack-payoff h2 em { font-style: italic; font-weight: 500; }
.journey-stack-payoff p {
font-family: var(--font-body);
font-size: 16.5px;
line-height: 1.65;
opacity: .85;
max-width: 40ch;
margin: 0 auto 24px;
}
/* ---------- DESKTOP CINEMATIC STAGE (visible ≥1024px) ---------- */
.journey-cinema { display: none; } /* toggled on in the desktop MQ */
/* ---------- MOBILE / TABLET STACK (always in DOM, hidden on cinema width) ---------- */
/* Mobile intro block — gives the stack the same "now serving — blue malibu"
framing the desktop cinema has. Hidden on cinema width. */
.journey-stack-intro {
position: relative;
max-width: 640px;
margin: 0 auto;
padding: clamp(72px, 14vw, 120px) var(--pad-x) clamp(32px, 6vw, 56px);
text-align: center;
color: var(--green-deep);
opacity: 0;
transform: translateY(14px);
transition: opacity 900ms var(--ease-dd-out), transform 900ms var(--ease-dd-out);
}
.journey-stack-intro.is-in {
opacity: 1;
transform: none;
}
.journey-stack-intro .eyebrow {
display: inline-block;
margin-bottom: 20px;
opacity: .7;
}
.journey-stack-intro-headline {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(44px, 11vw, 76px);
line-height: 1.02;
letter-spacing: -0.02em;
padding-bottom: 0.08em;
font-variation-settings: "opsz" 18, "SOFT" 0, "WONK" 0;
margin: 0 auto 18px;
max-width: 14ch;
}
.journey-stack-intro-headline em {
font-style: italic;
font-weight: 300;
}
.journey-stack-intro-sub {
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.55;
opacity: .8;
max-width: 34ch;
margin: 0 auto 28px;
}
.journey-stack-intro-cue {
display: inline-block;
font-family: var(--font-sub);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: .5;
}
/* ---------- MOBILE JOURNEY — per-element stagger + ambient motion ---------- */
/* Per-child stagger on the intro so it lands with rhythm
instead of a single bulk fade. The parent still fades, but each
child arrives with its own delay + easing on top. */
.journey-stack-intro .js-intro-item {
opacity: 0;
transform: translateY(14px);
transition: opacity 820ms var(--ease-dd-out),
transform 820ms var(--ease-dd-out);
}
.journey-stack-intro.is-in .js-intro-item { opacity: 1; transform: none; }
.journey-stack-intro.is-in .eyebrow { transition-delay: 0ms; opacity: .7; }
.journey-stack-intro.is-in .journey-stack-intro-headline { transition-delay: 140ms; }
.journey-stack-intro.is-in .journey-stack-intro-sub { transition-delay: 320ms; opacity: .8; }
.journey-stack-intro.is-in .journey-stack-intro-cue { transition-delay: 480ms; opacity: .55; }
/* Continuous gentle bob on the "ingredients ↓" cue once revealed */
.journey-stack-intro.is-in .journey-stack-intro-cue {
animation: cue-bob 1.9s ease-in-out 1100ms infinite;
}
/* Each ingredient image is always quietly alive */
@keyframes dd-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-7px) rotate(0.5deg); }
}
/* Card cascade — image + wash bloom first, then eyebrow/name/desc/tag stagger in */
.journey-card .journey-card-media img {
opacity: 0;
transition: opacity 900ms var(--ease-dd-out);
}
.journey-card .journey-card-media::before {
opacity: 0;
transform: scale(0.86);
transition: opacity 1200ms var(--ease-dd-out),
transform 1300ms var(--ease-dd-out);
}
.journey-card .journey-card-idx,
.journey-card .journey-card-name,
.journey-card .journey-card-desc,
.journey-card .journey-card-tag {
opacity: 0;
transform: translateY(12px);
transition: opacity 720ms var(--ease-dd-out),
transform 720ms var(--ease-dd-out);
}
.journey-card.is-in .journey-card-media img {
opacity: 1;
animation: dd-float 6s ease-in-out 300ms infinite;
}
.journey-card.is-in .journey-card-media::before { opacity: 1; transform: none; }
.journey-card.is-in .journey-card-idx { opacity: .65; transform: none; transition-delay: 220ms; }
.journey-card.is-in .journey-card-name { opacity: 1; transform: none; transition-delay: 340ms; }
.journey-card.is-in .journey-card-desc { opacity: .84; transform: none; transition-delay: 460ms; }
.journey-card.is-in .journey-card-tag { opacity: .88; transform: none; transition-delay: 600ms; }
/* ---------- Sticky mini progress pill (mobile only) ----------
Anchored to the bottom of the viewport so it never collides with
the marquee + nav at the top. Fades in while inside the stack. */
.journey-stack-progress {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(10px);
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px 10px 14px;
border-radius: 999px;
background: rgba(242, 237, 225, 0.94);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--green-deep);
font-family: var(--font-sub);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
box-shadow: 0 10px 26px rgba(47, 84, 44, .18);
opacity: 0;
pointer-events: none;
z-index: 55;
transition: opacity 420ms var(--ease-dd-out),
transform 420ms var(--ease-dd-out);
}
.journey-stack-progress.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.journey-stack-progress .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--stack-accent, var(--green));
transition: background 500ms var(--ease-dd-out);
}
.journey-stack-progress .label {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 15px;
line-height: 1;
letter-spacing: -0.005em;
text-transform: lowercase;
opacity: .95;
transition: opacity 260ms var(--ease-dd-out);
}
.journey-stack-progress.is-swapping .label { opacity: 0; }
.journey-stack-progress .count { opacity: .5; }
.journey-stack {
position: relative;
max-width: 720px;
margin: 0 auto;
padding: 0 var(--pad-x) clamp(80px, 10vw, 140px);
z-index: 2;
}
.journey-card {
position: relative;
padding: clamp(44px, 8vw, 72px) 0;
border-top: 1px solid rgba(47,84,44,.12);
display: grid;
gap: 22px;
grid-template-columns: minmax(0, 1fr);
}
.journey-card:first-child { border-top: none; padding-top: 20px; }
.journey-card-media {
position: relative;
aspect-ratio: 1 / 1;
max-width: 440px;
margin: 0 auto;
isolation: isolate;
}
.journey-card-media::before {
content: "";
position: absolute; inset: 8%;
background: radial-gradient(circle at 50% 50%,
var(--card-wash, rgba(47,84,44,.22)) 0%,
transparent 62%);
filter: blur(36px);
z-index: 0;
border-radius: 50%;
}
.journey-card-media img {
position: relative;
width: 82%;
height: 82%;
object-fit: contain;
margin: 9% auto;
display: block;
filter: drop-shadow(0 22px 32px rgba(47,84,44,.22));
z-index: 1;
}
.journey-card-copy {
text-align: center;
max-width: 42ch;
margin: 0 auto;
}
.journey-card-idx {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-sub);
font-weight: 700;
font-size: 11.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: .65;
margin-bottom: 12px;
}
.journey-card-idx::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: var(--card-wash, var(--green));
}
.journey-card-name {
font-family: var(--font-display);
font-weight: 500;
font-style: italic;
font-size: clamp(38px, 9vw, 56px);
line-height: 1.02;
letter-spacing: -0.02em;
padding-bottom: 0.06em;
margin-bottom: 14px;
}
.journey-card-desc {
font-family: var(--font-body);
font-size: 16.5px;
line-height: 1.65;
opacity: .84;
}
.journey-card-tag {
display: inline-block;
margin-top: 16px;
padding: 8px 16px;
border: 1px solid rgba(47,84,44,.3);
border-radius: 999px;
font-family: var(--font-sub);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: .88;
}
/* ---------- DESKTOP CINEMATIC (≥1024px) ---------- */
@media (min-width: 1024px) {
/* Hide the stack + its intro + its payoff + its mini progress, show the cinema */
.journey-stack-intro,
.journey-stack,
.journey-stack-progress,
.journey-stack-payoff { display: none; }
.journey-cinema {
display: block;
position: relative;
/* total scrollable height: entrance + 6 spotlights + payoff = ~8 screens */
height: 800vh;
}
/* The pinned inner — GSAP pins this to the viewport */
.journey-pin {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
isolation: isolate;
}
/* Wash — flat white backdrop for the whole pinned sequence.
No colour transitions during the journey; the product is the subject. */
.journey-wash {
position: absolute; inset: 0;
background: var(--white);
z-index: 0;
}
.journey-wash::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(1200px 800px at 20% 30%, rgba(47,84,44,.03) 0%, transparent 60%),
radial-gradient(900px 600px at 80% 70%, rgba(47,84,44,.02) 0%, transparent 60%);
pointer-events: none;
}
/* Drink — lives on its own layer, parallax-drifted by GSAP */
.journey-drink {
position: absolute;
left: 6%;
top: 50%;
width: 38vw;
max-width: 540px;
aspect-ratio: 1 / 1.18;
transform: translate3d(0, -50%, 0);
z-index: 3;
will-change: transform, opacity;
opacity: 0; /* GSAP raises during entrance */
}
.journey-drink img {
width: 100%; height: 100%;
object-fit: contain;
filter: drop-shadow(0 40px 60px rgba(47,84,44,.32));
}
/* Ingredient layers — each absolutely positioned, one visible at a time */
.journey-layers {
position: absolute; inset: 0;
z-index: 4;
pointer-events: none;
}
.journey-ingredient {
position: absolute;
right: 4%;
top: 50%;
width: 36vw;
max-width: 520px;
aspect-ratio: 1 / 1;
transform: translate3d(60px, calc(-50% + 20px), 0) rotate(4deg) scale(.9);
opacity: 0;
will-change: transform, opacity, filter;
}
.journey-ingredient img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 30px 48px rgba(0,0,0,.22));
}
.journey-ingredient.is-active {
transform: translate3d(0, -50%, 0) rotate(0deg) scale(1);
opacity: 1;
}
/* Caption — editorial text panel, bottom-right, one visible at a time */
.journey-captions {
position: absolute;
left: 48%;
right: 8%;
bottom: 9%;
z-index: 5;
pointer-events: none;
}
.journey-caption {
position: absolute;
inset: auto 0 0 0;
opacity: 0;
transform: translate3d(0, 24px, 0);
will-change: transform, opacity;
max-width: 480px;
}
.journey-caption.is-active {
opacity: 1;
transform: translate3d(0, 0, 0);
pointer-events: auto;
}
.journey-caption .eyebrow-row {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-sub);
font-weight: 700;
font-size: 11.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
opacity: .78;
margin-bottom: 18px;
}
.journey-caption .idx {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 28px;
letter-spacing: 0;
line-height: 1;
opacity: .55;
}
.journey-caption .eyebrow-label {
padding-left: 12px;
border-left: 1px solid rgba(47,84,44,.3);
}
.journey-caption h3 {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(56px, 6.4vw, 92px);
line-height: 1;
letter-spacing: -0.025em;
padding-bottom: 0.08em;
margin-bottom: 22px;
}
.journey-caption p {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.6;
opacity: .85;
max-width: 44ch;
}
.journey-caption .tag {
display: inline-block;
margin-top: 22px;
padding: 8px 18px;
border: 1px solid rgba(47,84,44,.3);
border-radius: 999px;
font-family: var(--font-sub);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
opacity: .88;
}
/* Progress rail — bottom-left, shows "01 / 06" and a fill bar */
.journey-progress {
position: absolute;
left: 6%;
bottom: 7%;
z-index: 5;
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-sub);
font-weight: 700;
font-size: 11.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
opacity: .82;
}
.journey-progress-num {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 26px;
letter-spacing: 0;
line-height: 1;
min-width: 2.2ch;
}
.journey-progress-rail {
position: relative;
width: 140px;
height: 1px;
background: rgba(47,84,44,.28);
overflow: hidden;
}
.journey-progress-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: var(--green-deep);
transition: width 380ms var(--ease-dd);
}
.journey-progress-total {
opacity: .55;
}
/* Stage-label (top-left, editorial chapter title) */
.journey-stage-label {
position: absolute;
left: 6%;
top: 7%;
z-index: 5;
font-family: var(--font-sub);
font-weight: 700;
font-size: 11.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
opacity: .6;
}
/* Entrance state (stage 0 — before user scrolls in) */
.journey-intro-hero {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 4;
text-align: center;
width: min(780px, 86vw);
opacity: 1;
transition: opacity 400ms ease;
}
.journey-intro-hero.is-fading { opacity: 0; }
.journey-intro-hero .eyebrow {
font-family: var(--font-sub);
font-weight: 800;
font-size: 18px;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: .9;
color: var(--green-deep);
display: block;
margin-bottom: 28px;
}
.journey-intro-hero .headline {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(52px, 6.6vw, 108px);
line-height: 1.02;
letter-spacing: -0.025em;
padding-bottom: 0.08em;
}
.journey-intro-hero .scroll-cue {
display: block;
margin-top: 36px;
font-family: var(--font-sub);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: .5;
}
.journey-intro-hero .scroll-cue::after {
content: " ↓";
display: inline-block;
animation: j-bob 2s ease-in-out infinite;
}
@keyframes j-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/* Payoff panel — drink sits enlarged behind as a hero backdrop.
Headline sits LOW near the base of the drink, CTA directly below. */
.journey-payoff {
position: absolute;
inset: 0;
z-index: 6;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 0 var(--pad-x) clamp(60px, 9vh, 120px);
gap: clamp(18px, 2.4vh, 32px);
text-align: center;
opacity: 0;
pointer-events: none;
will-change: opacity;
}
.journey-payoff-head {
width: 100%;
max-width: 900px;
}
.journey-payoff-foot {
width: 100%;
max-width: 620px;
display: flex;
flex-direction: column;
align-items: center;
}
.journey-payoff .eyebrow {
display: block;
margin-bottom: 18px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.28em;
opacity: 1;
color: var(--green-deep);
}
.journey-payoff-name {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(64px, 8.4vw, 128px);
line-height: 1;
letter-spacing: -0.03em;
padding-bottom: 0.08em;
margin: 0;
color: var(--green-deep);
text-shadow: 0 2px 30px rgba(255,255,255,.6);
}
.journey-payoff-name em { font-style: italic; font-weight: 500; }
.journey-payoff-cta {
pointer-events: auto;
}
}
/* Wider cinema stages at XL — tighter crops and bigger type */
@media (min-width: 1440px) {
.journey-caption h3 { font-size: 96px; }
.journey-ingredient { max-width: 600px; width: 38vw; }
.journey-drink { max-width: 600px; width: 40vw; }
}
/* Reduced motion — flatten to a simple stack on all widths + stop all ambient loops */
@media (prefers-reduced-motion: reduce) {
.journey-cinema { display: none !important; }
.journey-stack-intro { display: block !important; }
.journey-stack { display: block !important; max-width: 760px; }
.journey-stack-payoff { display: block !important; }
.journey-stack-progress { display: none !important; }
.journey-stack-intro.is-in .journey-stack-intro-cue,
.journey-card.is-in .journey-card-media img {
animation: none !important;
}
}
/* ============================================================
MARQUEE TICKER — sits above nav, full-width, always scrolling
============================================================ */
.marquee {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
height: var(--marquee-h);
background: var(--green-deep);
color: var(--cream);
overflow: hidden;
font-family: var(--font-sub);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: lowercase;
border-bottom: 1px solid rgba(242,237,225,.1);
}
.marquee-track {
display: flex;
width: max-content;
height: var(--marquee-h);
/* --marquee-shift is set by JS (px) to one group's width for a seamless loop.
Falls back to 50% if JS hasn't measured yet. */
--marquee-shift: 50%;
animation: marquee-roll 22s linear infinite;
will-change: transform;
}
.marquee-group {
display: flex;
align-items: center;
gap: 40px;
padding-right: 40px;
white-space: nowrap;
height: 100%;
}
.marquee-group .item { display: inline-flex; align-items: center; gap: 10px; }
.marquee-group .item em { font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0.04em; opacity: .92; }
.marquee-group .dot {
width: 4px; height: 4px; border-radius: 50%;
background: currentColor; opacity: .5;
display: inline-block;
}
.marquee-group .star {
display: inline-block; width: 10px; height: 10px;
background:
radial-gradient(circle at center, currentColor 0 1.4px, transparent 1.5px),
conic-gradient(from 0deg, currentColor 0 3deg, transparent 3deg 90deg,
currentColor 90deg 93deg, transparent 93deg 180deg,
currentColor 180deg 183deg, transparent 183deg 270deg,
currentColor 270deg 273deg, transparent 273deg 360deg);
-webkit-mask: radial-gradient(circle, #000 46%, transparent 47%);
mask: radial-gradient(circle, #000 46%, transparent 47%);
opacity: .8;
}
@keyframes marquee-roll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-1 * var(--marquee-shift)), 0, 0); }
}
/* Keep marquee readable on very small screens */
@media (max-width: 560px) {
:root { --marquee-h: 32px; }
.marquee { font-size: 12.5px; letter-spacing: 0.05em; }
.marquee-group { gap: 28px; padding-right: 28px; }
}
/* ============================================================
MENU PAGE — full-bleed hero + 5 category sections
Brand palette only: cream + green-deep.
Each category: headline, one large image, item list, CTA.
============================================================ */
/* ---- Hero: full-bleed storefront image with soft darken overlay ---- */
.menu-hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 560px;
overflow: hidden;
background: var(--green-deep);
color: var(--cream);
}
.menu-hero-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.menu-hero-overlay {
position: absolute; inset: 0;
/* Darker top so the fixed nav reads clearly; softens through the middle
where the image should shine; darkens again at the bottom to support
the bottom-left wordmark. */
background: linear-gradient(180deg,
rgba(0,0,0,.58) 0%,
rgba(0,0,0,.34) 18%,
rgba(0,0,0,.14) 42%,
rgba(0,0,0,.22) 66%,
rgba(0,0,0,.64) 100%);
pointer-events: none;
z-index: 1;
}
.menu-hero-caption {
position: absolute;
left: var(--pad-x);
right: var(--pad-x);
bottom: clamp(36px, 6vh, 72px);
z-index: 2;
display: flex;
flex-direction: column;
gap: clamp(12px, 1.4vw, 22px);
align-items: flex-start;
color: var(--cream);
}
.menu-hero-eyebrow {
font-family: var(--font-sub);
font-size: 12px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--cream);
opacity: .85;
padding: 6px 12px 6px 0;
border-top: 1px solid rgba(255,237,200,.45);
padding-top: 14px;
}
.menu-hero-wordmark {
margin: 0;
text-align: left;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(64px, 11vw, 172px);
line-height: 0.96;
letter-spacing: -0.03em;
color: var(--cream);
text-shadow: 0 10px 40px rgba(0,0,0,.38);
}
.menu-hero-wordmark em { font-style: italic; font-weight: 500; }
.menu-hero-cue {
position: absolute;
right: var(--pad-x);
bottom: clamp(52px, 7vh, 88px);
z-index: 2;
font-family: var(--font-sub);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cream);
opacity: .82;
writing-mode: vertical-rl;
transform: rotate(180deg);
padding: 28px 0 0;
}
.menu-hero-cue::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 20px;
background: currentColor;
opacity: .55;
}
@media (max-width: 880px) {
.menu-hero { height: 100dvh; min-height: 520px; }
}
/* ---- Category split: text column + image column, alternating side ---- */
.menu-split {
position: relative;
padding: clamp(96px, 12vw, 180px) var(--pad-x);
overflow: hidden;
}
.menu-split.on-cream {
background: var(--cream);
color: var(--green-deep);
}
.menu-split.on-dark {
background: var(--bg-green-grad);
color: var(--cream);
}
/* Dividing hairline at the top of each section — animates in */
.menu-split::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
width: min(90%, 1200px);
height: 1px;
background: currentColor;
opacity: .14;
transition: transform 1100ms var(--ease-dd) 120ms;
}
.menu-split.is-in::before { transform: translateX(-50%) scaleX(1); }
.menu-split-inner {
position: relative;
z-index: 1;
max-width: var(--max-w, 1280px);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(40px, 5vw, 96px);
align-items: center;
}
/* Reverse places the media on the left by visually swapping grid direction */
.menu-split--reverse .menu-split-inner { direction: rtl; }
.menu-split--reverse .menu-split-inner > * { direction: ltr; }
/* ---- Copy column ---- */
.menu-split-copy {
display: flex;
flex-direction: column;
gap: clamp(14px, 1.6vw, 22px);
max-width: 560px;
}
.menu-split .eyebrow {
opacity: 0;
transform: translateY(8px);
transition: opacity 600ms ease, transform 600ms var(--ease-dd);
}
.menu-split.is-in .eyebrow {
opacity: .7;
transform: none;
transition-delay: 160ms;
}
.menu-category-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(56px, 8vw, 128px);
line-height: 0.96;
letter-spacing: -0.03em;
padding-bottom: 0.06em;
margin: 0;
}
.menu-category-title em { font-style: italic; font-weight: 500; }
.menu-category-lede {
font-family: var(--font-sub);
font-size: var(--fs-lede);
line-height: 1.55;
max-width: 44ch;
opacity: 0;
transform: translateY(14px);
transition: opacity 700ms ease, transform 700ms var(--ease-dd);
}
.menu-split.is-in .menu-category-lede {
opacity: .88;
transform: none;
transition-delay: 420ms;
}
/* Inline links inside category ledes — italic editorial underline,
matches the existing in-copy text-link tone instead of default blue. */
.menu-category-lede .lede-link {
color: inherit;
font-style: italic;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: currentColor;
transition: opacity var(--t-fast) ease;
}
.menu-category-lede .lede-link:hover { opacity: .65; }
.menu-split.on-dark .menu-category-lede .lede-link { color: inherit; }
/* ---- Item list (single column inside split) ---- */
.menu-category-list {
width: 100%;
list-style: none;
margin: 8px 0 4px;
padding: 0;
display: flex;
flex-direction: column;
}
.menu-category-list li {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 0;
border-bottom: 1px solid currentColor;
border-color: rgba(47, 84, 44, 0.18);
opacity: 0;
transform: translateY(14px);
transition: opacity 600ms ease, transform 600ms var(--ease-dd);
}
.menu-split.on-dark .menu-category-list li {
border-color: rgba(255, 237, 200, 0.18);
}
.menu-split.is-in .menu-category-list li { opacity: 1; transform: none; }
.menu-split.is-in .menu-category-list li:nth-child(1){ transition-delay: 540ms; }
.menu-split.is-in .menu-category-list li:nth-child(2){ transition-delay: 600ms; }
.menu-split.is-in .menu-category-list li:nth-child(3){ transition-delay: 660ms; }
.menu-split.is-in .menu-category-list li:nth-child(4){ transition-delay: 720ms; }
.menu-split.is-in .menu-category-list li:nth-child(5){ transition-delay: 780ms; }
.menu-split.is-in .menu-category-list li:nth-child(6){ transition-delay: 840ms; }
.menu-split.is-in .menu-category-list li:nth-child(7){ transition-delay: 900ms; }
.menu-split.is-in .menu-category-list li:nth-child(8){ transition-delay: 960ms; }
.menu-split.is-in .menu-category-list li:nth-child(9){ transition-delay: 1020ms; }
.menu-split.is-in .menu-category-list li:nth-child(10){ transition-delay: 1080ms; }
.menu-split.is-in .menu-category-list li:nth-child(11){ transition-delay: 1140ms; }
.menu-split.is-in .menu-category-list li:nth-child(12){ transition-delay: 1200ms; }
.menu-split.is-in .menu-category-list li:nth-child(13){ transition-delay: 1260ms; }
.menu-split.is-in .menu-category-list li:nth-child(14){ transition-delay: 1320ms; }
.menu-split.is-in .menu-category-list li:nth-child(15){ transition-delay: 1380ms; }
.menu-split.is-in .menu-category-list li:nth-child(16){ transition-delay: 1440ms; }
/* ---- Two-column list variant (for long categories: specialty, hot, iced) ---- */
.menu-category-list--two-col {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(24px, 3vw, 44px);
row-gap: 0;
}
.menu-category-list--two-col li {
min-width: 0; /* allows text to wrap inside grid cells */
padding: 14px 0;
}
.menu-category-list--two-col .item-head {
/* name | dots | price — allow the name to wrap if it's too long */
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 8px;
}
.menu-category-list--two-col .item-head .name {
font-size: clamp(17px, 1.25vw, 20px);
line-height: 1.2;
min-width: 0;
/* wrap cleanly to the next line rather than overflowing the column */
overflow-wrap: break-word;
}
.menu-category-list--two-col .item-head .price {
font-size: clamp(16px, 1.1vw, 19px);
}
.menu-category-list--two-col .item-head .dots {
/* dots are mostly decorative and can shrink to nothing on narrow columns */
min-width: 0;
}
.menu-category-list--two-col li .desc {
font-size: 13px;
line-height: 1.45;
}
/* ---- Sub-heading inside a split (bowls / food / add-ons) ---- */
.list-subhead {
display: block;
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(20px, 1.7vw, 26px);
letter-spacing: -0.01em;
margin-top: clamp(20px, 2.4vw, 32px);
margin-bottom: 4px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(47, 84, 44, 0.28);
opacity: 0;
transform: translateY(10px);
transition: opacity 600ms ease, transform 600ms var(--ease-dd);
}
.menu-split.on-dark .list-subhead {
border-bottom-color: rgba(255, 237, 200, 0.28);
}
.list-subhead:first-child { margin-top: 8px; }
.menu-split.is-in .list-subhead {
opacity: 1;
transform: none;
transition-delay: 480ms;
}
/* ---- Add-ons list (compact, 2-column, lighter weight) ---- */
.menu-addons-list {
list-style: none;
margin: 6px 0 4px;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(24px, 3vw, 44px);
row-gap: 0;
}
.menu-addons-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 10px 0;
border-bottom: 1px dotted rgba(47, 84, 44, 0.22);
opacity: 0;
transform: translateY(10px);
transition: opacity 550ms ease, transform 550ms var(--ease-dd);
}
.menu-split.on-dark .menu-addons-list li {
border-bottom-color: rgba(255, 237, 200, 0.22);
}
.menu-addons-list li .name {
font-family: var(--font-sub);
font-size: 14px;
line-height: 1.4;
opacity: .82;
}
.menu-addons-list li .price {
font-family: var(--font-display);
font-weight: 500;
font-size: 15px;
font-feature-settings: "tnum" 1;
opacity: .9;
white-space: nowrap;
}
.menu-split.is-in .menu-addons-list li { opacity: 1; transform: none; }
.menu-split.is-in .menu-addons-list li:nth-child(1){ transition-delay: 900ms; }
.menu-split.is-in .menu-addons-list li:nth-child(2){ transition-delay: 960ms; }
.menu-split.is-in .menu-addons-list li:nth-child(3){ transition-delay: 1020ms; }
.menu-split.is-in .menu-addons-list li:nth-child(4){ transition-delay: 1080ms; }
.menu-split.is-in .menu-addons-list li:nth-child(5){ transition-delay: 1140ms; }
.menu-split.is-in .menu-addons-list li:nth-child(6){ transition-delay: 1200ms; }
/* ---- Inline dietary tag (DF, GF, etc.) ---- */
.tag-inline {
display: inline-block;
margin-left: 8px;
padding: 2px 7px;
font-family: var(--font-sub);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
border: 1px solid currentColor;
border-radius: 999px;
opacity: .55;
vertical-align: middle;
transform: translateY(-2px);
}
.item-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: baseline;
}
.item-head .name {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(19px, 1.5vw, 23px);
letter-spacing: -0.015em;
}
.item-head .dots {
border-bottom: 1px dotted currentColor;
opacity: .35;
transform: translateY(-5px);
}
.item-head .price {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(18px, 1.4vw, 22px);
font-feature-settings: "tnum" 1;
opacity: .9;
}
.menu-category-list li .desc {
font-family: var(--font-sub);
font-size: 14px;
line-height: 1.5;
opacity: .68;
}
.menu-category-cta {
align-self: flex-start;
margin-top: clamp(14px, 2vw, 22px);
opacity: 0;
transform: translateY(10px);
transition: opacity 650ms ease, transform 650ms var(--ease-dd);
}
.menu-split.is-in .menu-category-cta {
opacity: 1;
transform: none;
transition-delay: 1100ms;
}
/* ---- Media column ---- */
.menu-split-media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 3px;
background: rgba(0, 0, 0, 0.04);
}
.menu-split.on-dark .menu-split-media {
background: rgba(255, 237, 200, 0.05);
box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.55);
}
.menu-split-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.12) translateY(var(--py, 0px));
transition: transform 1400ms var(--ease-dd);
will-change: transform;
}
.menu-split.is-in .menu-split-media img {
transform: scale(1.02) translateY(var(--py, 0px));
}
/* Product PNGs (transparent drinks) sit centred, framed — not edge to edge */
.menu-split-media--product {
aspect-ratio: 4 / 5;
background: var(--cream);
border: 1px solid rgba(47, 84, 44, 0.06);
display: grid;
place-items: center;
}
.menu-split.on-dark .menu-split-media--product {
background:
radial-gradient(60% 55% at 50% 40%, rgba(255, 237, 200, 0.10), transparent 70%),
var(--green-deep);
border-color: rgba(255,237,200,.08);
}
.menu-split-media--product img {
position: relative;
inset: auto;
width: 76%;
height: auto;
max-height: 86%;
object-fit: contain;
transform: scale(0.92) translateY(var(--py, 0px));
transition: transform 1400ms var(--ease-dd);
filter: drop-shadow(0 30px 50px rgba(0,0,0,.22));
}
.menu-split.is-in .menu-split-media--product img {
transform: scale(1) translateY(var(--py, 0px));
}
/* Reveal mask — slides away on enter */
.menu-split-media::after {
content: "";
position: absolute;
inset: 0;
background: var(--cream);
z-index: 2;
transform: translateY(0);
transition: transform 1200ms cubic-bezier(.77, 0, .18, 1);
pointer-events: none;
}
.menu-split.on-dark .menu-split-media::after {
background: var(--green-deep);
}
.menu-split.is-in .menu-split-media::after {
transform: translateY(-101%);
}
/* On reverse (image on left), slide the mask the other way for rhythm */
.menu-split--reverse .menu-split-media::after {
transition: transform 1200ms cubic-bezier(.77, 0, .18, 1);
}
.menu-split--reverse.is-in .menu-split-media::after {
transform: translateY(101%);
}
/* Media tag — small label that slides in over the image after reveal */
.menu-split-tag {
position: absolute;
bottom: 18px;
left: 18px;
z-index: 3;
font-family: var(--font-sub);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cream);
background: rgba(0, 0, 0, 0.28);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 7px 12px;
border-radius: 1px;
opacity: 0;
transform: translateY(8px);
transition: opacity 500ms ease, transform 500ms var(--ease-dd);
}
.menu-split.is-in .menu-split-tag {
opacity: .92;
transform: none;
transition-delay: 1100ms;
}
/* ---- Mobile: stack media above copy, keep motion ---- */
@media (max-width: 880px) {
.menu-split { padding: clamp(72px, 14vw, 120px) var(--pad-x); }
.menu-split-inner {
grid-template-columns: 1fr;
gap: clamp(28px, 6vw, 48px);
}
.menu-split--reverse .menu-split-inner { direction: ltr; }
.menu-split-media { aspect-ratio: 4 / 5; order: -1; }
.menu-split-copy { max-width: 100%; }
.menu-split::after {
font-size: clamp(100px, 30vw, 180px);
top: 20px;
}
/* long lists collapse to a single readable column on narrow screens */
.menu-category-list--two-col {
grid-template-columns: 1fr;
}
.menu-addons-list {
grid-template-columns: 1fr;
}
}
/* ============================================================
ORDER PROMPT MODAL
A lightweight, pinned prompt that slides in at the end of the
menu scroll journey. Sits fixed over the page, dismissable,
preserves the cream/green/cream/green/cream colour rhythm
by not claiming a full page section of its own.
============================================================ */
.order-prompt {
position: fixed;
right: clamp(16px, 2.4vw, 28px);
bottom: clamp(16px, 2.4vw, 28px);
z-index: 80; /* above nav and marquee; grain is pointer-events none */
width: min(400px, calc(100vw - 32px));
background: var(--green-deep);
color: var(--cream);
border-radius: 6px;
box-shadow:
0 28px 64px -18px rgba(0, 0, 0, 0.45),
0 4px 12px -4px rgba(0, 0, 0, 0.2);
opacity: 0;
transform: translateY(18px) scale(0.98);
pointer-events: none;
transition:
opacity 480ms var(--ease-dd),
transform 520ms var(--ease-dd);
overflow: hidden;
}
.order-prompt[hidden] { display: none; }
.order-prompt.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.order-prompt.is-dismissed {
opacity: 0;
transform: translateY(18px) scale(0.98);
pointer-events: none;
}
/* Soft radial glow for a polished, not-flat look */
.order-prompt::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(65% 60% at 20% 0%, rgba(255, 237, 200, 0.10), transparent 60%),
radial-gradient(60% 60% at 100% 100%, rgba(255, 237, 200, 0.06), transparent 60%);
pointer-events: none;
}
.order-prompt-inner {
position: relative;
padding: clamp(20px, 2.6vw, 28px) clamp(22px, 2.8vw, 30px);
display: flex;
flex-direction: column;
gap: 10px;
}
.order-prompt-close {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
background: transparent;
border: none;
color: var(--cream);
font-size: 22px;
line-height: 1;
border-radius: 50%;
opacity: .6;
cursor: pointer;
transition: opacity 200ms ease, background 200ms ease;
}
.order-prompt-close:hover,
.order-prompt-close:focus-visible {
opacity: 1;
background: rgba(255, 237, 200, 0.08);
outline: none;
}
.order-prompt-eyebrow {
display: inline-block;
font-family: var(--font-sub);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: .7;
}
.order-prompt-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
padding-right: 28px; /* so the close button never overlaps the last word */
}
.order-prompt-title em { font-style: italic; font-weight: 500; }
.order-prompt-copy {
font-family: var(--font-sub);
font-size: 14px;
line-height: 1.5;
opacity: .78;
margin: 0;
max-width: 40ch;
}
.order-prompt-cta {
align-self: flex-start;
margin-top: 6px;
}
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.order-prompt { transition: opacity 200ms linear; transform: none; }
.order-prompt.is-visible { transform: none; }
.order-prompt.is-dismissed { transform: none; }
}
/* Mobile: full-width strip across the bottom, slightly shorter copy */
@media (max-width: 560px) {
.order-prompt {
left: 12px;
right: 12px;
bottom: 12px;
width: auto;
}
.order-prompt-inner { padding: 18px 18px 20px; gap: 8px; }
.order-prompt-title { font-size: 20px; padding-right: 32px; }
.order-prompt-copy { font-size: 13px; }
}