/* ============================================================
Trattoria Antica — public site
Palette: wine + warm gold + cream + ink
Design: restrained. Color used sparingly. Generous whitespace.
============================================================ */
:root {
/* wine */
--wine-50: #fbf3f3;
--wine-100: #f5e3e4;
--wine-200: #e7c2c5;
--wine-500: #8c4a4f;
--wine-700: #5a2d33;
--wine-800: #3e2024;
--wine-900: #2a161a;
--wine-950: #190b0e;
/* gold */
--gold-100: #f4e6c7;
--gold-300: #e0c884;
--gold-500: #c9a961;
--gold-600: #b08e44;
--gold-700: #8a6e2f;
/* cream / ivory */
--cream-50: #fdfaf3;
--cream-100: #faf1e0;
--cream-200: #f5e6d3;
/* ink */
--ink-100: #ebe6df;
--ink-200: #d6cfc4;
--ink-300: #b0a89c;
--ink-400: #857d72;
--ink-500: #5f5851;
--ink-700: #3a342e;
--ink-800: #25211d;
--ink-900: #181513;
--wine: var(--wine-800);
--gold: var(--gold-500);
--cream: var(--cream-200);
--ivory: var(--cream-50);
--ink: var(--ink-900);
--ink-2: var(--ink-700);
--ink-3: var(--ink-500);
--line: var(--ink-100);
--line-soft: #f0ebe2;
--white: #ffffff;
--bad: #9b2c2c;
--ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--ff-body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
--shadow-xs: 0 1px 2px rgba(24, 21, 19, .05);
--shadow-sm: 0 2px 6px rgba(24, 21, 19, .06);
--shadow-md: 0 10px 30px rgba(24, 21, 19, .08);
--shadow-lg: 0 28px 64px rgba(24, 21, 19, .14);
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 18px;
--container: 1240px;
--container-narrow: 880px;
--container-text: 680px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--header-h: 92px;
--catnav-h: 58px;
}
@media (max-width: 720px) { :root { --header-h: 68px; --catnav-h: 54px; } }
/* ---------- reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scrollbar-color: var(--ink-200) transparent;
scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 999px; }
html::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
body {
margin: 0;
font-family: var(--ff-body);
font-size: 16px;
line-height: 1.65;
color: var(--ink);
background: var(--ivory);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, iframe { max-width: 100%; display: block; }
iframe { border: 0; width: 100%; height: 100%; }
h1, h2, h3, h4 {
font-family: var(--ff-display);
font-weight: 500;
color: var(--ink);
margin: 0 0 .6rem;
line-height: 1.06;
letter-spacing: -.012em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: 1.4rem; line-height: 1.25; }
h4 {
font-size: .76rem; font-weight: 500;
font-family: var(--ff-body);
letter-spacing: .22em; text-transform: uppercase;
color: var(--ink-3);
line-height: 1.4;
}
p { margin: 0 0 1rem; color: var(--ink-2); }
.lead { font-size: 1.08rem; color: var(--ink-2); line-height: 1.7; }
a { color: var(--wine); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--gold-600); }
ul, ol { padding-left: 1.2rem; }
::selection { background: var(--wine-800); color: var(--cream-100); }
:focus-visible {
outline: 2px solid var(--gold-500);
outline-offset: 3px;
border-radius: 2px;
}
.skip-link {
position: absolute; top: -40px; left: 0;
background: var(--wine); color: var(--cream-50);
padding: .6rem 1rem; z-index: 1000;
border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { top: 0; color: var(--cream-50); }
/* ---------- layout ----------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 1.6rem;
}
.container--narrow { max-width: var(--container-narrow); }
.container--text { max-width: var(--container-text); }
.section { padding: clamp(5rem, 9vw, 8rem) 0; background: var(--ivory); position: relative; }
.section--cream { background: var(--cream-50); }
.section--wine { background: var(--wine-900); color: var(--cream-100); }
.section--wine h2, .section--wine h3, .section--wine h4 { color: var(--cream-100); }
.section--wine p { color: rgba(245, 230, 211, .82); }
.section--tight { padding: clamp(2.4rem, 5vw, 4rem) 0 1.5rem; }
.eyebrow {
display: inline-flex; align-items: center; gap: .8rem;
font-family: var(--ff-body);
font-size: .72rem;
font-weight: 500;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold-700);
margin-bottom: 1.4rem;
}
.eyebrow::before {
content: "";
width: 1.4rem; height: 1px;
background: var(--gold-500);
display: inline-block;
}
.section__eyebrow { /* legacy alias */ }
.section__eyebrow { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--ff-body); font-size: .72rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-700); margin-bottom: 1.4rem; }
.section__eyebrow::before { content: ""; width: 1.4rem; height: 1px; background: var(--gold-500); display: inline-block; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 4rem; }
.section-head .section__eyebrow,
.section-head .eyebrow { justify-content: center; }
.section-head .section__eyebrow::before,
.section-head .eyebrow::before { display: none; }
.section-head h2 { margin-bottom: 1rem; font-style: italic; }
/* ---------- buttons ---------------------------------------------------- */
.btn {
--bg: var(--wine-800);
--fg: var(--cream-50);
--bd: var(--wine-800);
display: inline-flex;
align-items: center; justify-content: center;
gap: .55rem;
font-family: var(--ff-body);
font-size: .88rem;
font-weight: 500;
letter-spacing: .04em;
padding: .9rem 1.7rem;
border-radius: 999px;
border: 1px solid var(--bd);
background: var(--bg);
color: var(--fg);
cursor: pointer;
transition:
background .3s var(--ease),
color .3s var(--ease),
border-color .3s var(--ease),
box-shadow .3s var(--ease);
text-decoration: none;
white-space: nowrap;
}
.btn:hover { background: var(--wine-900); color: var(--cream-50); border-color: var(--wine-900); box-shadow: var(--shadow-md); }
.btn--gold { --bg: var(--gold-500); --fg: var(--ink-900); --bd: var(--gold-500); }
.btn--gold:hover { background: var(--gold-600); border-color: var(--gold-600); color: var(--ink-900); }
.btn--ghost { --bg: transparent; --fg: var(--wine-800); --bd: var(--wine-800); }
.btn--ghost:hover { background: var(--wine-800); color: var(--cream-50); }
.btn--outline { --bg: transparent; --fg: var(--ink-900); --bd: var(--ink-300); }
.btn--outline:hover { background: var(--ink-900); color: var(--cream-50); border-color: var(--ink-900); }
/* light pill for use over dark hero media */
.btn--cream { --bg: transparent; --fg: var(--cream-50); --bd: rgba(253, 249, 241, .85); }
.btn--cream:hover { background: var(--cream-50); color: var(--wine-900); border-color: var(--cream-50); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: .95rem; }
.btn--sm { padding: .5rem 1.05rem; font-size: .78rem; letter-spacing: .06em; }
.btn .arrow { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
/* ---------- header ----------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: transparent; /* default; admin can override via inline style */
border-bottom: 1px solid transparent;
transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
/* once scrolled, a subtle backdrop so text stays readable. The backdrop
tints follow the admin's text-color choice. */
.site-header.is-scrolled {
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
box-shadow: 0 4px 18px rgba(24, 21, 19, .12);
}
.site-header--text-dark.is-scrolled {
background: rgba(253, 250, 243, .92);
border-bottom-color: var(--line-soft);
}
.site-header--text-light.is-scrolled {
background: rgba(26, 11, 14, .94);
border-bottom-color: rgba(201, 169, 97, .25);
}
/* Light-text variant — for dark admin-chosen header backgrounds */
.site-header--text-light .brand__wordmark { color: var(--cream-50); }
.site-header--text-light .primary-nav a { color: rgba(253, 249, 241, .82); }
.site-header--text-light .primary-nav a:hover,
.site-header--text-light .primary-nav a.is-active { color: var(--cream-50); }
.site-header--text-light .lang-dd__btn {
border-color: rgba(253, 249, 241, .25);
color: rgba(253, 249, 241, .85);
}
.site-header--text-light .lang-dd__btn:hover { color: var(--cream-50); border-color: rgba(253, 249, 241, .55); }
.site-header--text-light .lang-dd__btn[aria-expanded="true"] {
background: rgba(253, 249, 241, .08);
border-color: rgba(253, 249, 241, .55);
color: var(--cream-50);
}
.site-header--text-light .lang-dd__caret { color: rgba(253, 249, 241, .55); }
.site-header--text-light .nav-toggle span { background: var(--cream-50); }
.site-header--text-light .nav-cta {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
}
.site-header--text-light .nav-cta:hover {
background: var(--wine-900);
border-color: var(--wine-900);
color: var(--cream-50);
}
.site-header__inner {
display: flex;
align-items: center;
gap: 2.5rem;
height: var(--header-h);
}
/* push the nav (and everything after it) hard to the right;
the brand gets all the breathing room on the left */
.site-header__inner > .primary-nav { margin-left: auto; }
@media (max-width: 720px) {
.site-header__inner { gap: 1rem; }
.site-header__inner > .primary-nav { margin-left: 0; }
}
.brand {
display: inline-flex;
align-items: center;
color: var(--ink);
text-decoration: none;
line-height: 1;
}
.brand__logo {
height: 64px;
width: auto;
max-width: 300px;
object-fit: contain;
transition: opacity .25s var(--ease), height .3s var(--ease);
}
.brand:hover .brand__logo { opacity: .85; }
.site-header.is-scrolled .brand__logo { height: 52px; }
.brand__wordmark {
font-family: var(--ff-display);
font-style: italic;
font-size: 1.5rem;
font-weight: 500;
color: var(--ink);
letter-spacing: -.01em;
line-height: 1;
}
.primary-nav { display: flex; align-items: center; }
.primary-nav__list {
display: flex;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.primary-nav a {
color: var(--ink-2);
font-family: "Mirza", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
position: relative;
padding: .35rem 0;
transition: color .25s var(--ease);
}
.primary-nav a:hover { color: var(--wine); }
.primary-nav a.is-active { color: var(--wine); }
.primary-nav a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: var(--gold-500);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a.is-active::after { transform: scaleX(1); }
.primary-nav a.is-active { color: var(--cream-50); }
.site-header__actions { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
/* drawer-only block is hidden on desktop */
.primary-nav__drawer-only { display: none; }
/* language dropdown */
.lang-dd { position: relative; }
.lang-dd__btn {
display: inline-flex;
align-items: center;
gap: .45rem;
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
/* WCAG 2.5.5 target size — keep ≥44px tall on touch */
min-height: 44px;
min-width: 44px;
padding: .55rem .85rem;
font-family: var(--ff-body);
font-size: .78rem;
font-weight: 500;
letter-spacing: .12em;
color: var(--ink-2);
cursor: pointer;
transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.lang-dd__btn:hover { border-color: var(--ink-300); color: var(--ink); }
.lang-dd__btn[aria-expanded="true"] { background: var(--cream-100); border-color: var(--ink-300); color: var(--ink); }
.lang-dd__caret { transition: transform .25s var(--ease); color: var(--ink-3); }
.lang-dd__btn[aria-expanded="true"] .lang-dd__caret { transform: rotate(180deg); color: var(--ink); }
.lang-dd__menu {
position: absolute;
top: calc(100% + .55rem);
right: 0;
margin: 0;
padding: .35rem;
list-style: none;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
min-width: 180px;
opacity: 0;
transform: translateY(-6px) scale(.98);
pointer-events: none;
transition: opacity .25s var(--ease), transform .25s var(--ease);
z-index: 110;
}
.lang-dd__menu:not([hidden]) {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.lang-dd__item {
display: flex; align-items: center; gap: .85rem;
padding: .65rem .85rem;
border-radius: var(--radius-sm);
color: var(--ink);
font-size: .88rem;
text-decoration: none;
transition: background .2s var(--ease);
}
.lang-dd__item:hover { background: var(--cream-100); color: var(--wine); }
.lang-dd__item-code {
font-family: var(--ff-body);
font-size: .7rem;
font-weight: 600;
letter-spacing: .14em;
color: var(--ink-3);
min-width: 22px;
}
.lang-dd__item-name { flex: 1; }
.lang-dd__item.is-active { background: var(--cream-100); color: var(--wine); }
.lang-dd__item.is-active::after {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold-500);
}
/* Reserve CTA in the header — cream pill on the dark wine bar */
.nav-cta {
font-weight: 600;
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
}
.nav-cta::before { background: var(--wine-800); }
.nav-cta:hover {
background: var(--wine-900);
border-color: var(--wine-900);
color: var(--cream-50);
box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.nav-toggle {
display: none;
background: transparent;
border: 0;
padding: .5rem;
cursor: pointer;
flex-direction: column;
gap: 5px;
}
.nav-toggle span {
display: block; width: 24px; height: 2px;
background: var(--ink);
border-radius: 999px;
transition: transform .35s var(--ease), opacity .25s ease, background .25s ease;
transform-origin: center;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
/* ---------- hero ------------------------------------------------------- */
.hero {
padding: clamp(6rem, 13vw, 11rem) 0 clamp(5rem, 11vw, 9rem);
background: var(--ivory);
text-align: center;
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero::before {
content: "";
position: absolute;
inset: -10% -5%;
background:
radial-gradient(40rem 28rem at 20% 18%, rgba(62, 32, 36, .07), transparent 60%),
radial-gradient(36rem 24rem at 82% 12%, rgba(201, 169, 97, .14), transparent 65%);
z-index: -1;
}
.hero--has-media::before { display: none; }
/* Hero with image or video backdrop */
.hero--has-media {
background: var(--wine-950);
color: var(--cream-50);
min-height: 78vh;
display: flex;
align-items: center;
padding: clamp(8rem, 15vw, 13rem) 0 clamp(6rem, 12vw, 10rem);
}
.hero--has-media h1 { color: var(--cream-50); }
.hero--has-media .hero__subtitle { color: rgba(253, 249, 241, .88); }
.hero--has-media .hero__eyebrow { color: var(--gold-300); }
.hero--has-media .hero__rule { background: linear-gradient(to bottom, transparent, rgba(253, 249, 241, .55), transparent); }
.hero__media {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}
.hero__media img,
.hero__media video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
animation: heroZoom 24s ease-out forwards;
}
@keyframes heroZoom {
from { transform: scale(1.04); }
to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.hero__media img, .hero__media video { animation: none; }
}
/* dark gradient overlay so text reads on top of any image */
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(15, 13, 12, .35) 0%, rgba(15, 13, 12, .55) 60%, rgba(15, 13, 12, .8) 100%),
radial-gradient(ellipse at top, rgba(201, 169, 97, .08), transparent 60%);
transition: opacity .3s var(--ease);
}
/* Admin-chosen text-colour overrides (any hero variant) */
.hero--text-light h1 { color: var(--cream-50); }
.hero--text-light .hero__eyebrow { color: var(--gold-300); }
.hero--text-light .hero__subtitle { color: rgba(253, 249, 241, .88); }
.hero--text-light .hero__rule { background: linear-gradient(to bottom, transparent, rgba(253, 249, 241, .55), transparent); }
.hero--text-dark h1 { color: var(--ink-900); }
.hero--text-dark .hero__eyebrow { color: var(--gold-700); }
.hero--text-dark .hero__subtitle { color: var(--ink-700); }
.hero--text-dark .hero__rule { background: linear-gradient(to bottom, transparent, var(--ink-300), transparent); }
/* When forcing dark text on a media hero, soften the dark overlay so the
bright image stays bright behind the dark type. */
.hero--has-media.hero--text-dark .hero__media::after {
background:
linear-gradient(to bottom, rgba(253, 249, 241, .35) 0%, rgba(253, 249, 241, .55) 60%, rgba(253, 249, 241, .75) 100%),
radial-gradient(ellipse at top, rgba(201, 169, 97, .12), transparent 60%);
}
.hero__inner { position: relative; max-width: 880px; margin: 0 auto; }
.hero__eyebrow {
display: inline-block;
font-family: var(--ff-body);
font-size: .72rem;
font-weight: 500;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold-700);
margin-bottom: 2rem;
}
.hero h1, .hero__h1 {
font-size: clamp(2.8rem, 8vw, 6rem);
font-style: italic;
font-weight: 500;
margin-bottom: 2rem;
color: var(--ink-900);
letter-spacing: -.022em;
line-height: .98;
}
/* When an image replaces the headline text */
.hero__h1--image {
margin: 0 auto 1.6rem;
line-height: 0;
font-style: normal;
}
.hero__h1--image img {
max-width: min(620px, 90%);
max-height: 200px;
height: auto;
width: auto;
margin: 0 auto;
display: block;
object-fit: contain;
filter: drop-shadow(0 6px 20px rgba(0,0,0,.25));
}
@media (max-width: 720px) {
.hero__h1--image img { max-width: 86%; max-height: 140px; }
}
.hero__subtitle {
font-size: clamp(1.02rem, 1.5vw, 1.18rem);
line-height: 1.7;
color: var(--ink-2);
max-width: 560px;
margin: 0 auto 2.6rem;
}
.hero__ctas { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.hero__rule {
width: 1px; height: 56px;
background: linear-gradient(to bottom, transparent, var(--ink-300), transparent);
margin: 4rem auto 0;
}
/* =====================================================================
3D PIZZA HERO — pure CSS scene
Layered discs in a preserve-3d stage. Outer .pizza-3d gets a JS
mouse-parallax tilt (--mx/--my). Inner .pizza-3d__spinner runs the
continuous rotation. Toppings translate up in Z to read as raised.
Honors prefers-reduced-motion (animations off, parallax JS skipped).
===================================================================== */
.hero--with-pizza .hero__inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 5vw, 4.5rem);
max-width: 1180px;
}
.hero--with-pizza .hero__copy { text-align: left; max-width: 580px; }
.hero--with-pizza .hero__copy .hero__eyebrow {
margin-bottom: 1.4rem;
padding-bottom: 0;
}
.hero--with-pizza .hero__copy .hero__eyebrow::after { display: none; }
.hero--with-pizza .hero__h1 { text-align: left; }
.hero--with-pizza .hero__subtitle { margin-left: 0; margin-right: auto; }
.hero--with-pizza .hero__ctas { justify-content: flex-start; }
.hero--with-pizza .hero__rule { display: none; }
.hero__pizza {
position: relative;
perspective: 1400px;
aspect-ratio: 1 / 1;
width: 100%;
max-width: 480px;
margin: 0 auto;
}
@media (max-width: 900px) {
.hero--with-pizza .hero__inner {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero--with-pizza .hero__copy { max-width: 100%; text-align: center; }
.hero--with-pizza .hero__h1 { text-align: center; }
.hero--with-pizza .hero__ctas { justify-content: center; }
.hero__pizza { max-width: 340px; order: -1; }
}
/* ── Pizza core scene ─────────────────────────────────────────────── */
.pizza-3d {
position: absolute;
inset: 0;
transform-style: preserve-3d;
/* Gentle top-down tilt — keeps the photo readable while adding
enough perspective that the mouse parallax has somewhere to go. */
transform: rotateX(calc(16deg + var(--my, 0deg))) rotateY(var(--mx, 0deg));
transition: transform .5s var(--ease);
will-change: transform;
}
.pizza-3d__spinner {
position: absolute;
inset: 0;
transform-style: preserve-3d;
/* Slower for a real photo — gives the dish a calm, contemplative
lazy-susan feel rather than a tech-demo spin. */
animation: pizzaSpin 42s linear infinite;
will-change: transform;
}
@keyframes pizzaSpin {
from { transform: rotateZ(0deg); }
to { transform: rotateZ(360deg); }
}
/* Drop-shadow ellipse beneath, parented to the stage (NOT in preserve-3d) */
.pizza-3d__shadow {
position: absolute;
inset: 0;
transform: translateZ(-50px) scale(.95);
border-radius: 50%;
background: radial-gradient(ellipse 60% 28% at 50% 78%, rgba(40, 18, 22, .55), transparent 70%);
filter: blur(18px);
pointer-events: none;
}
/* Warm under-glow */
.pizza-3d__glow {
position: absolute;
inset: -10%;
transform: translateZ(-40px);
background:
radial-gradient(circle at 50% 55%, rgba(201, 169, 97, .35), transparent 60%),
radial-gradient(circle at 50% 55%, rgba(184, 92, 56, .15), transparent 80%);
filter: blur(24px);
animation: pizzaGlow 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes pizzaGlow {
50% { opacity: .8; transform: translateZ(-40px) scale(1.05); }
}
/* The dish photo — transparent PNG on a perspective-tilted stage.
Continuous rotation comes from .pizza-3d__spinner above; this img just
fills the rotated container and adds a warm drop shadow + slight
saturation lift so it pops on cream/wine backgrounds. */
.pizza-3d__dish {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transform: translateZ(8px);
filter:
drop-shadow(0 22px 30px rgba(40, 18, 22, .38))
drop-shadow(0 6px 10px rgba(40, 18, 22, .25))
saturate(1.06)
contrast(1.03);
user-select: none;
-webkit-user-drag: none;
}
/* ── Steam puffs ─────────────────────────────────────────────────── */
.pizza-3d__steam {
position: absolute;
top: -8%; left: 50%;
transform: translateX(-50%);
width: 120px; height: 160px;
z-index: 1;
pointer-events: none;
}
.pizza-3d__steam span {
position: absolute;
top: 100%; left: 50%;
width: 36px; height: 36px;
margin-left: calc(-18px + var(--x, 0px));
background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
filter: blur(9px);
opacity: 0;
animation: pizzaSteam 5s cubic-bezier(.2, .6, .25, 1) infinite;
animation-delay: var(--d, 0s);
}
@keyframes pizzaSteam {
0% { transform: translate(0, 0) scale(.6); opacity: 0; }
18% { opacity: .7; }
100% { transform: translate(var(--xEnd, 14px), -160px) scale(1.4); opacity: 0; }
}
/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
.pizza-3d__spinner,
.pizza-3d__glow,
.pizza-3d__steam span { animation: none; }
.pizza-3d__steam span { opacity: .25; }
.pizza-3d { transition: none; }
}
/* ---------- reservation inline (home) ---------------------------------- */
.reserve-inline {
background: var(--cream-50);
padding: clamp(4rem, 8vw, 6.5rem) 0;
}
.reserve-inline__card {
max-width: 880px;
margin: 0 auto;
background: var(--white);
border-radius: var(--radius-lg);
padding: clamp(2rem, 4vw, 3rem);
box-shadow: var(--shadow-md);
border: 1px solid var(--line-soft);
}
.reserve-inline__head { text-align: center; margin-bottom: 2rem; }
.reserve-inline__head h2 { margin: .5rem 0 .7rem; font-style: italic; }
.reserve-inline__head p { color: var(--ink-3); margin: 0; }
/* ---------- story / about ---------------------------------------------- */
/* ── Two-column "story + offset gallery" layout ─────────────────────── */
.story-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2.5rem, 6vw, 5rem);
align-items: center;
}
.story-cta__text { max-width: 540px; }
.story-cta__text .eyebrow { display: inline-block; }
.story-cta__text h2 { margin-top: .8rem; }
.story-cta__text .lead { margin: 1rem 0 1.8rem; }
/* Staggered fade-in for each text element (matches the React ContainerStagger pattern) */
.story-cta__text[data-stagger] [data-stagger-item] {
opacity: 0;
filter: blur(10px);
transform: translateY(8px);
transition: opacity .55s var(--ease), filter .55s var(--ease), transform .55s var(--ease);
}
.story-cta__text[data-stagger].is-visible [data-stagger-item] {
opacity: 1;
filter: blur(0);
transform: none;
}
.story-cta__text[data-stagger].is-visible [data-stagger-item]:nth-child(1) { transition-delay: .15s; }
.story-cta__text[data-stagger].is-visible [data-stagger-item]:nth-child(2) { transition-delay: .30s; }
.story-cta__text[data-stagger].is-visible [data-stagger-item]:nth-child(3) { transition-delay: .45s; }
.story-cta__text[data-stagger].is-visible [data-stagger-item]:nth-child(4) { transition-delay: .60s; }
/* Asymmetric 4-cell collage. The pattern is a 2-col × 5-row track where the
left + right columns are vertically offset, producing a "staircase" look
identical to the React component's gallery. */
.story-cta__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 40px 170px 40px 170px 40px;
gap: 1rem;
max-width: 520px;
margin-left: auto;
}
.story-cta__cell {
position: relative;
overflow: hidden;
border-radius: 18px;
box-shadow: 0 14px 40px -8px rgba(58, 32, 36, .28), 0 2px 8px rgba(0, 0, 0, .08);
opacity: 0;
transition: opacity .55s var(--ease), transform .8s var(--ease);
transform: scale(.96);
}
.story-cta__cell img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
.story-cta__cell--1 { grid-column: 2 / 3; grid-row: 1 / 3; }
.story-cta__cell--2 { grid-column: 1 / 2; grid-row: 2 / 4; }
.story-cta__cell--3 { grid-column: 1 / 2; grid-row: 4 / 6; }
.story-cta__cell--4 { grid-column: 2 / 3; grid-row: 3 / 5; }
/* Reveal cells one-by-one when the section enters the viewport. */
.story-cta.is-visible .story-cta__cell { opacity: 1; transform: scale(1); }
.story-cta.is-visible .story-cta__cell--1 { transition-delay: .10s; }
.story-cta.is-visible .story-cta__cell--2 { transition-delay: .30s; }
.story-cta.is-visible .story-cta__cell--3 { transition-delay: .50s; }
.story-cta.is-visible .story-cta__cell--4 { transition-delay: .70s; }
@media (max-width: 860px) {
.story-cta {
grid-template-columns: 1fr;
gap: 2.4rem;
}
/* Mobile order: photo first, text after — covers both the 4-cell grid
and the single-image fallback figure on the About page. */
.story-cta__grid,
.story-cta > .story-photo { order: 1; margin: 0 auto; max-width: 440px; }
.story-cta__text { order: 2; text-align: left; }
}
@media (max-width: 480px) {
.story-cta__grid {
grid-template-rows: 32px 140px 32px 140px 32px;
gap: .7rem;
}
}
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.story__image {
aspect-ratio: 4/5;
background: linear-gradient(155deg, var(--wine-700) 0%, var(--wine-900) 65%, var(--wine-950) 100%);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.story__image::before {
content: "TA";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
font-size: clamp(5rem, 12vw, 9rem);
color: rgba(201, 169, 97, .18);
letter-spacing: -.04em;
}
.story__image::after {
content: "";
position: absolute;
inset: 18px;
border: 1px solid rgba(201, 169, 97, .25);
border-radius: calc(var(--radius-lg) - 6px);
pointer-events: none;
}
/* Photo variant: admin uploaded an image — hide the monogram, keep the inner gold border on top */
.story__image--photo {
background-color: var(--cream-100);
background-size: cover;
background-position: center;
}
.story__image--photo::before { display: none; }
.story__image--photo::after {
inset: 14px;
border-color: rgba(245, 230, 211, .35);
border-radius: calc(var(--radius-lg) - 4px);
}
/* ============================================================
story-photo — editorial single-image presentation
Cream matting around the photo (like a real picture frame),
thin gold pinstripe inside, floating "Since 2001" badge,
subtle hover lift. Vertical 4:5 aspect, brand-coloured.
============================================================ */
.story-photo {
position: relative;
margin: 0;
aspect-ratio: 4 / 5;
background: var(--white);
padding: 14px;
border-radius: 20px;
box-shadow:
0 30px 60px -20px rgba(28, 21, 19, .35),
0 14px 28px -14px rgba(62, 32, 36, .25),
0 0 0 1px rgba(201, 169, 97, .25);
transition: transform .5s var(--ease), box-shadow .5s var(--ease);
overflow: hidden;
isolation: isolate;
}
.story-photo:hover {
transform: translateY(-3px);
box-shadow:
0 38px 72px -22px rgba(28, 21, 19, .42),
0 18px 36px -16px rgba(62, 32, 36, .32),
0 0 0 1px rgba(201, 169, 97, .4);
}
/* gold pinstripe inside the cream mat */
.story-photo::before {
content: "";
position: absolute;
inset: 8px;
border-radius: 14px;
border: 1px solid rgba(201, 169, 97, .28);
pointer-events: none;
z-index: 3;
}
/* corner ornaments — diagonal hair-line accents in gold */
.story-photo::after {
content: "";
position: absolute;
top: 18px; left: 18px;
width: 28px; height: 28px;
border-top: 1.5px solid var(--gold);
border-left: 1.5px solid var(--gold);
border-top-left-radius: 6px;
z-index: 4;
pointer-events: none;
opacity: .85;
}
/* photo itself fills the inner frame, slow zoom on hover.
With multiple photos, they stack absolutely and crossfade. */
.story-photo__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 22px;
transition: transform 1.2s var(--ease);
}
.story-photo:hover .story-photo__img.is-on { transform: scale(1.03); }
/* Crossfade stack — when multiple .story-photo__img exist */
.story-photo[data-story-fade] {
/* keep the photo frame; stack images inside the matting */
}
.story-photo[data-story-fade] .story-photo__img {
position: absolute;
inset: 14px;
width: calc(100% - 28px);
height: calc(100% - 28px);
opacity: 0;
transition: opacity 1.4s ease, transform 1.2s var(--ease);
z-index: 1;
}
.story-photo[data-story-fade] .story-photo__img.is-on {
opacity: 1;
z-index: 2;
}
/* monogram fallback — when no story image is uploaded */
.story-photo:not(.story-photo--has-image) {
background: linear-gradient(155deg, var(--wine-700) 0%, var(--wine-900) 65%, var(--wine-950) 100%);
}
.story-photo:not(.story-photo--has-image)::before {
border-color: rgba(201, 169, 97, .35);
}
.story-photo__monogram {
position: absolute;
inset: 14px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
font-size: clamp(5rem, 12vw, 9rem);
color: rgba(201, 169, 97, .25);
letter-spacing: -.04em;
border-radius: 10px;
}
/* floating year badge — bottom-right, cream pill with gold accent */
.story-photo__badge {
position: absolute;
bottom: 24px;
right: 24px;
z-index: 5;
display: inline-flex;
flex-direction: column;
align-items: center;
padding: .7rem 1.1rem;
background: var(--cream-50);
color: var(--wine);
border-radius: 14px;
box-shadow:
0 10px 24px rgba(28, 21, 19, .3),
0 0 0 1px rgba(201, 169, 97, .45);
font-family: var(--ff-display);
font-style: italic;
font-size: 1.4rem;
font-weight: 600;
line-height: 1;
letter-spacing: -.01em;
transition: transform .35s var(--ease);
}
.story-photo:hover .story-photo__badge {
transform: rotate(-2deg);
}
.story-photo__badge small {
display: block;
font-family: var(--ff-body);
font-style: normal;
font-size: .58rem;
font-weight: 600;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--gold-700);
margin-bottom: .25rem;
line-height: 1;
}
@media (max-width: 960px) {
.story-photo { aspect-ratio: 16 / 10; max-height: 440px; padding: 10px; }
.story-photo::after { top: 14px; left: 14px; width: 22px; height: 22px; }
.story-photo__badge { bottom: 16px; right: 16px; padding: .55rem .9rem; font-size: 1.15rem; }
.story-photo__badge small { font-size: .52rem; }
}
@media (prefers-reduced-motion: reduce) {
.story-photo, .story-photo__img, .story-photo__badge { transition: none; }
}
/* ---------- story coverflow carousel ---------------------------------- */
.story-carousel {
position: relative;
width: 100%;
aspect-ratio: 4/5;
user-select: none;
}
.story-carousel__stage {
position: relative;
width: 100%;
height: 100%;
perspective: 1100px;
}
.story-carousel__item {
position: absolute;
top: 50%;
left: 50%;
width: 78%;
height: 95%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
transition:
transform .65s cubic-bezier(.22, 1, .36, 1),
opacity .55s ease,
filter .55s ease,
visibility .55s ease;
transform-origin: center center;
transform: translate(-50%, -50%);
will-change: transform, opacity;
-webkit-tap-highlight-color: transparent;
}
.story-carousel__item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow:
0 20px 50px rgba(28, 21, 19, .35),
0 0 0 1px rgba(201, 169, 97, .25);
display: block;
}
.story-carousel__item:focus-visible img {
box-shadow:
0 20px 50px rgba(28, 21, 19, .35),
0 0 0 3px var(--gold-500);
}
.story-carousel__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
width: 42px; height: 42px;
border-radius: 50%;
border: 1px solid rgba(201, 169, 97, .35);
background: rgba(253, 250, 243, .85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--wine);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.story-carousel__nav:hover {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
transform: translateY(-50%) scale(1.06);
}
.story-carousel__nav--prev { left: -10px; }
.story-carousel__nav--next { right: -10px; }
.story-carousel__dots {
position: absolute;
bottom: -22px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 10;
}
.story-carousel__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ink-200);
transition: background .3s var(--ease), transform .3s var(--ease);
cursor: pointer;
}
.story-carousel__dot.is-active {
background: var(--gold);
transform: scale(1.5);
}
@media (max-width: 720px) {
.story-carousel__nav { width: 36px; height: 36px; }
.story-carousel__nav--prev { left: -4px; }
.story-carousel__nav--next { right: -4px; }
}
@media (prefers-reduced-motion: reduce) {
.story-carousel__item { transition: opacity .25s linear; }
}
.story__content h2 { font-style: italic; margin-bottom: 1.2rem; }
.story__content .btn { margin-top: 1.4rem; }
/* ---------- featured dishes ------------------------------------------- */
.dish-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 1.6rem;
}
.dish {
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
display: flex; flex-direction: column;
}
.dish:hover {
border-color: var(--ink-200);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.dish__image {
aspect-ratio: 4/3;
overflow: hidden;
background: var(--cream-100);
position: relative;
}
.dish__image img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s var(--ease);
}
.dish:hover .dish__image img { transform: scale(1.05); }
.dish__main {
padding: 1.4rem 1.5rem 1.5rem;
display: flex; flex-direction: column;
flex: 1;
}
.dish__header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin-bottom: .6rem;
padding-bottom: .7rem;
border-bottom: 1px solid var(--line);
}
.dish__name {
font-family: var(--ff-display);
font-size: 1.3rem;
font-weight: 500;
color: var(--ink);
margin: 0;
letter-spacing: -.005em;
}
.dish__price {
font-family: var(--ff-display);
font-size: 1.18rem;
color: var(--wine);
font-weight: 500;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.dish__desc { font-size: .92rem; line-height: 1.6; color: var(--ink-2); margin: .6rem 0; }
.dish__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.tag {
display: inline-flex; align-items: center;
font-size: .66rem;
letter-spacing: .12em;
text-transform: uppercase;
padding: .22rem .65rem;
border-radius: 999px;
background: var(--cream-50);
color: var(--ink-3);
border: 1px solid var(--line);
font-weight: 500;
}
.tag--veg { background: rgba(74,93,35,.06); color: #4a5d23; border-color: rgba(74,93,35,.2); }
.tag--allergen { background: var(--cream-100); color: var(--gold-700); border-color: rgba(201,169,97,.3); }
/* ---------- gallery ---------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery__item {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: var(--radius);
background: var(--cream);
margin: 0;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery__item:hover img { transform: scale(1.06); }
/* ---------- bento gallery + lightbox ----------------------------------- */
.bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 150px;
gap: 14px;
max-width: 1100px;
margin: 0 auto;
}
.bento-tile {
--b-overlay: linear-gradient(to top, rgba(26, 11, 14, .78) 0%, rgba(26, 11, 14, .25) 35%, transparent 60%);
position: relative;
overflow: hidden;
border: 0;
padding: 0;
border-radius: var(--radius-lg);
background: var(--wine-900);
cursor: zoom-in;
transition: transform .5s var(--ease), box-shadow .5s var(--ease);
grid-column: span 1; grid-row: span 2;
box-shadow: var(--shadow-sm);
isolation: isolate;
-webkit-tap-highlight-color: transparent;
}
.bento-tile::after {
/* hairline gold inner edge */
content: "";
position: absolute; inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(201, 169, 97, .14);
pointer-events: none;
z-index: 3;
}
.bento-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.bento-tile:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.bento-tile img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.1s var(--ease), filter .5s var(--ease);
filter: saturate(1.02);
}
.bento-tile:hover img { transform: scale(1.07); filter: saturate(1.1); }
.bento-tile__overlay {
position: absolute; inset: 0;
z-index: 2;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 16px 18px;
color: var(--cream-50);
text-align: left;
background: var(--b-overlay);
opacity: 0;
transition: opacity .35s var(--ease);
pointer-events: none;
}
.bento-tile:hover .bento-tile__overlay,
.bento-tile:focus-visible .bento-tile__overlay { opacity: 1; }
.bento-tile__title {
font-family: var(--ff-display);
font-style: italic;
font-size: 1.15rem;
line-height: 1.1;
color: var(--cream-50);
}
.bento-tile__desc {
margin-top: .35rem;
font-size: .78rem;
line-height: 1.4;
color: rgba(245, 230, 211, .78);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* span variants for asymmetric bento layout */
.bento-tile--hero { grid-column: span 2; grid-row: span 3; }
.bento-tile--wide { grid-column: span 2; grid-row: span 2; }
.bento-tile--tall { grid-column: span 1; grid-row: span 3; }
@media (max-width: 960px) {
.bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 110px; gap: 10px; }
.bento-tile { grid-column: span 2; grid-row: span 2; }
.bento-tile--hero { grid-column: span 4; grid-row: span 2; }
.bento-tile--wide { grid-column: span 2; grid-row: span 2; }
.bento-tile--tall { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 560px) {
.bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; gap: 8px; }
.bento-tile,
.bento-tile--hero,
.bento-tile--wide,
.bento-tile--tall { grid-column: span 1; grid-row: span 1; }
.bento-tile--hero { grid-column: span 2; grid-row: span 2; }
.bento-tile__overlay { opacity: 1; background: linear-gradient(to top, rgba(26, 11, 14, .8), transparent 55%); }
.bento-tile__desc { display: none; }
.bento-tile__title { font-size: .98rem; }
}
/* lightbox */
.lightbox {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(15, 13, 12, .92);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
display: flex;
align-items: center;
justify-content: center;
padding: 4vh 5vw;
opacity: 0;
pointer-events: none;
transition: opacity .3s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__stage {
margin: 0;
max-width: min(1100px, 92vw);
max-height: 84vh;
display: flex; flex-direction: column; align-items: center;
gap: 1.2rem;
transform: scale(.97);
transition: transform .35s var(--ease);
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }
.lightbox__img {
max-width: 100%;
max-height: 70vh;
object-fit: contain;
border-radius: var(--radius-lg);
box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 169, 97, .18) inset;
}
.lightbox__caption { text-align: center; max-width: 720px; }
.lightbox__title {
display: block;
font-family: var(--ff-display);
font-style: italic;
font-size: clamp(1.3rem, 2.5vw, 1.7rem);
color: var(--cream-50);
margin-bottom: .35rem;
}
.lightbox__desc {
display: block;
font-size: .92rem;
color: rgba(245, 230, 211, .72);
line-height: 1.5;
}
.lightbox__close,
.lightbox__nav {
position: absolute;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(245, 230, 211, .1);
border: 1px solid rgba(201, 169, 97, .35);
color: var(--cream-50);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover {
background: rgba(201, 169, 97, .25);
border-color: var(--gold-500);
transform: scale(1.06);
}
.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__dots {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
.lightbox__dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(245, 230, 211, .3);
transition: background .25s var(--ease), transform .25s var(--ease);
}
.lightbox__dot.is-active { background: var(--gold-500); transform: scale(1.4); }
@media (max-width: 720px) {
.lightbox__close { top: 16px; right: 16px; width: 38px; height: 38px; }
.lightbox__nav { width: 38px; height: 38px; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.bento-tile, .bento-tile img, .lightbox, .lightbox__stage { transition: none; }
}
/* ---------- info grid (hours + map) ------------------------------------ */
.info-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2.6rem; align-items: stretch; }
.hours-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 2.2rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--line-soft);
}
.hours-card h3 { font-style: italic; margin-bottom: 1.1rem; color: var(--ink); }
.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: .7rem 0;
border-bottom: 1px solid var(--line);
font-size: .94rem;
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list li.is-today .day { color: var(--wine); font-weight: 600; }
.hours-list li.is-today .time { color: var(--wine); }
.hours-list .day { color: var(--ink); font-weight: 500; }
.hours-list .time { color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* ─── Find-Us section (Quandoo/TheFork-style) ─────────────────────── */
.findus__header {
text-align: center;
max-width: 640px;
margin: 0 auto 2.4rem;
}
.findus__header h2 {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
margin: .4rem 0 .6rem;
}
.findus {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: 1.6rem;
max-width: 1100px;
margin: 0 auto;
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 6px 28px rgba(58, 32, 36, .08);
}
.findus__card {
padding: 1.8rem 1.6rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.findus__status {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem .85rem;
background: var(--cream-50);
border-radius: 999px;
width: max-content;
font-size: .85rem;
}
.findus__status strong { color: var(--wine-800); letter-spacing: .02em; }
.findus__status small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.findus__dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ink-300);
}
.findus__dot--on {
background: #3e7f3e;
box-shadow: 0 0 0 4px rgba(62, 127, 62, .15);
animation: findusPulse 2.4s ease-in-out infinite;
}
.findus__dot--off { background: var(--ink-300); }
@keyframes findusPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(62, 127, 62, .15); }
50% { box-shadow: 0 0 0 7px rgba(62, 127, 62, .05); }
}
.findus__block { display: flex; flex-direction: column; gap: .35rem; }
.findus__label {
font-size: .68rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-3);
}
.findus__addr {
margin: 0;
font-style: normal;
line-height: 1.6;
color: var(--ink);
font-size: 1rem;
}
.findus__transit {
display: inline-flex;
align-items: center;
gap: .45rem;
margin: 0;
color: var(--wine-800);
font-size: .92rem;
line-height: 1.4;
}
.findus__transit svg { color: var(--gold-600); flex: 0 0 auto; }
.findus__actions { display: flex; gap: .6rem; margin-top: .4rem; flex-wrap: wrap; }
.findus__btn { padding: .7rem 1.1rem; font-size: .9rem; }
.findus__secondary {
display: flex;
gap: 1.4rem;
flex-wrap: wrap;
font-size: .82rem;
padding-top: .9rem;
border-top: 1px solid var(--line-soft);
}
.findus__link {
background: transparent;
border: 0;
padding: 0;
color: var(--ink-3);
cursor: pointer;
font: inherit;
text-decoration: none;
transition: color .15s var(--ease);
}
.findus__link:hover { color: var(--wine-800); }
.findus__map {
position: relative;
min-height: 360px;
background: var(--cream-100);
}
.findus__map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) {
.findus { grid-template-columns: 1fr; }
.findus__map { min-height: 280px; order: -1; } /* map first on mobile */
.findus__card { padding: 1.4rem 1.2rem; }
}
.map-card {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--cream);
box-shadow: var(--shadow-sm);
height: 420px;
border: 1px solid var(--line-soft);
display: flex; /* lets the iframe stretch via flex:1 */
}
.map-card iframe {
flex: 1 1 auto;
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 720px) { .map-card { height: 320px; } }
.map-card-wrap { position: relative; }
.map-directions {
position: absolute;
bottom: 14px;
right: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: .45rem;
background: var(--white);
color: var(--wine);
padding: .65rem 1.05rem;
border-radius: 999px;
border: 1px solid var(--line);
box-shadow: 0 8px 22px rgba(24, 21, 19, .18), 0 0 0 1px rgba(0,0,0,.03);
font-family: var(--ff-body);
font-size: .85rem;
font-weight: 600;
letter-spacing: .04em;
text-decoration: none;
transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.map-directions:hover {
transform: translateY(-2px);
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
box-shadow: 0 14px 32px rgba(62, 32, 36, .35);
}
.map-directions svg { transition: transform .2s var(--ease); }
.map-directions:hover svg { transform: translateX(3px); }
@media (max-width: 720px) {
.map-directions { bottom: 10px; right: 10px; padding: .55rem .85rem; font-size: .78rem; }
}
/* ---------- menu page -------------------------------------------------- */
.menu-intro {
background: var(--ivory);
padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
text-align: center;
}
.menu-intro .container { max-width: 720px; }
.menu-intro h1 { font-style: italic; color: var(--ink); margin-bottom: 1rem; }
.cat-nav {
position: sticky;
top: var(--header-h);
z-index: 50;
background: rgba(253, 250, 243, .92);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
margin-bottom: 3rem;
transition: box-shadow .3s var(--ease);
}
.cat-nav.is-stuck { box-shadow: 0 4px 16px rgba(24,21,19,.05); }
.cat-nav__track {
display: flex;
gap: .5rem;
padding: .9rem 1.6rem;
max-width: var(--container);
margin: 0 auto;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.cat-nav__track::-webkit-scrollbar { display: none; }
.cat-nav::before, .cat-nav::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 32px;
pointer-events: none;
z-index: 2;
}
.cat-nav::before { left: 0; background: linear-gradient(to right, rgba(253,250,243,.96), transparent); }
.cat-nav::after { right: 0; background: linear-gradient(to left, rgba(253,250,243,.96), transparent); }
.cat-chip {
flex: 0 0 auto;
scroll-snap-align: center;
display: inline-flex;
align-items: center;
padding: .58rem 1.1rem;
border-radius: 999px;
background: transparent;
color: var(--ink-2);
font-size: .85rem;
font-weight: 500;
letter-spacing: .015em;
border: 1px solid var(--line);
text-decoration: none;
white-space: nowrap;
transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.cat-chip:hover { color: var(--wine); border-color: var(--ink-300); }
.cat-chip.is-active {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
}
.cat-chip:active { transform: scale(.97); }
.menu-section { padding: 0 0 6rem; }
.menu-category {
margin-bottom: 5rem;
scroll-margin-top: calc(var(--header-h) + var(--catnav-h) + 12px);
}
.menu-category__header { text-align: center; margin-bottom: 2.6rem; max-width: 580px; margin-inline: auto; }
.menu-category__header h2 {
font-style: italic;
color: var(--ink);
margin-bottom: .6rem;
}
.menu-category__intro { color: var(--ink-3); font-size: .94rem; }
.menu-list { display: grid; gap: 1rem; max-width: 880px; margin: 0 auto; }
.menu-card {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
padding: 1.2rem 1.3rem;
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
text-decoration: none;
color: inherit;
}
.menu-card.has-image { grid-template-columns: 1fr 132px; }
.menu-card:hover { border-color: var(--ink-200); box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }
.menu-card:hover .menu-card__name { color: var(--wine); }
.menu-card__body { display: flex; flex-direction: column; min-width: 0; }
.menu-card__name {
font-family: var(--ff-display);
font-size: 1.3rem;
font-weight: 500;
color: var(--ink);
margin: 0 0 .35rem;
letter-spacing: -.005em;
line-height: 1.2;
}
.menu-card__desc {
font-size: .92rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 .85rem;
/* clamp to keep cards even */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.menu-card__bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
margin-top: auto;
}
.menu-card__meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.menu-card__price {
font-family: var(--ff-display);
font-size: 1.35rem;
color: var(--wine);
font-weight: 500;
white-space: nowrap;
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
.menu-card__image {
width: 132px;
height: 132px;
border-radius: var(--radius);
overflow: hidden;
background: var(--cream-100);
align-self: center;
position: relative;
}
.menu-card__image img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
}
.menu-card:hover .menu-card__image img { transform: scale(1.04); }
.allergen-key {
text-align: center;
color: var(--ink-3);
font-size: .82rem;
margin-top: 3rem;
padding: 1.6rem 1rem;
border-top: 1px solid var(--line);
line-height: 1.85;
max-width: 880px;
margin-inline: auto;
}
.allergen-key strong { color: var(--ink-2); }
/* ---------- reservation wizard --------------------------------------- */
.rw {
background: var(--white);
border-radius: var(--radius-xl);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-md);
padding: clamp(1.5rem, 4vw, 2.4rem);
}
.rw__head { margin-bottom: 1.4rem; }
.rw__title {
font-family: var(--ff-display);
font-size: clamp(1.6rem, 3.2vw, 2.1rem);
font-weight: 500;
color: var(--ink);
margin: 0 0 .35rem;
line-height: 1.1;
}
.rw__title em { font-style: italic; color: var(--wine); font-weight: 600; }
.rw__sub { margin: 0 0 .9rem; color: var(--ink-3); font-size: .94rem; }
.rw__badge {
display: inline-flex; align-items: center; gap: .45rem;
padding: .45rem .9rem;
background: var(--cream-100);
border: 1px solid rgba(201, 169, 97, .35);
border-radius: 999px;
font-size: .8rem;
color: var(--ink-2);
letter-spacing: .02em;
}
/* Stepper */
.rw__stepper {
display: flex;
gap: 4px;
margin-bottom: 1.6rem;
border-radius: var(--radius);
overflow: hidden;
background: var(--cream-50);
padding: 4px;
}
.rw__step {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
padding: .75rem .7rem;
background: var(--wine-800);
color: var(--cream-50);
border: 0;
border-radius: 6px;
font-family: var(--ff-body);
font-size: .82rem;
font-weight: 500;
cursor: pointer;
transition: opacity .25s var(--ease), background .25s var(--ease);
opacity: .35;
white-space: nowrap;
}
.rw__step.is-current { opacity: 1; box-shadow: 0 0 0 2px var(--gold-500) inset; }
.rw__step:not(:disabled):not(.is-current) { opacity: .7; }
.rw__step:disabled { cursor: default; }
.rw__step-label { overflow: hidden; text-overflow: ellipsis; }
.rw__step--last { flex: 0 0 auto; padding: .75rem 1rem; }
.rw__step--last .rw__step-label { display: none; }
/* Panels */
.rw__panel { animation: rwIn .35s var(--ease); }
@keyframes rwIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.rw__panel-title {
font-family: var(--ff-body);
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
margin: 0 0 1rem;
letter-spacing: -.005em;
}
/* Date quick-pick row */
.rw__quick {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .55rem;
margin-bottom: 1.1rem;
}
.rw__pill {
background: var(--white);
border: 1.5px solid var(--line);
border-radius: var(--radius);
padding: .85rem .6rem;
cursor: pointer;
font-family: var(--ff-body);
transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: .15rem;
}
.rw__pill:hover { border-color: var(--wine); }
.rw__pill:active { transform: scale(.97); }
.rw__pill.is-on {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
}
.rw__pill strong { font-weight: 600; font-size: .92rem; }
.rw__pill small { font-size: .72rem; color: var(--ink-3); letter-spacing: .02em; }
.rw__pill.is-on small { color: rgba(253, 249, 241, .7); }
.rw__date-field {
display: flex;
flex-direction: column;
gap: .35rem;
margin-top: .4rem;
}
.rw__date-field > span {
font-size: .78rem;
color: var(--ink-3);
letter-spacing: .14em;
text-transform: uppercase;
}
/* ─── FAQ page accordion ─────────────────────────────────────────── */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: 12px;
margin-bottom: .75rem;
overflow: hidden;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item[open] {
border-color: var(--gold-300);
box-shadow: 0 4px 18px rgba(58, 32, 36, .06);
}
.faq-item__q {
list-style: none;
cursor: pointer;
padding: 1.1rem 1.3rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
font-family: var(--ff-display);
font-style: italic;
font-size: 1.1rem;
color: var(--wine-800);
font-weight: 500;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { display: none; }
.faq-item__icon {
flex: 0 0 auto;
color: var(--gold-700);
transition: transform .25s var(--ease);
}
.faq-item[open] .faq-item__icon { transform: rotate(180deg); }
.faq-item__a {
padding: 0 1.3rem 1.2rem;
color: var(--ink-2);
line-height: 1.7;
font-size: .98rem;
}
.faq-item__a a {
color: var(--wine-800);
text-decoration: underline;
text-decoration-color: var(--gold-300);
text-underline-offset: 3px;
}
.faq-item__a a:hover { color: var(--gold-700); text-decoration-color: var(--gold-500); }
.faq-cta {
max-width: 760px;
margin: 3rem auto 0;
text-align: center;
padding: 2rem 1.4rem;
background: var(--cream-50);
border: 1px solid var(--line-soft);
border-radius: 14px;
}
.faq-cta p {
margin: 0 0 1.2rem;
color: var(--ink-2);
font-style: italic;
}
.faq-cta__ctas {
display: flex;
gap: .6rem;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 540px) {
.faq-item__q { padding: .9rem 1rem; font-size: 1rem; gap: .55rem; }
.faq-item__a { padding: 0 1rem 1rem; font-size: .92rem; }
.faq-cta { padding: 1.4rem 1rem; }
.faq-cta__ctas { flex-direction: column; }
.faq-cta__ctas .btn { width: 100%; justify-content: center; }
}
/* ─── Single-dish SEO page ────────────────────────────────────────── */
.dish-page__crumbs {
margin-bottom: 1.4rem;
font-size: .82rem;
color: var(--ink-3);
letter-spacing: .02em;
}
.dish-page__crumbs a {
color: var(--ink-3);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.dish-page__crumbs a:hover { color: var(--wine-800); border-color: var(--gold-300); }
.dish-page__crumb-sep { margin: 0 .5rem; color: var(--ink-300); }
.dish-page__article {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
.dish-page__photo {
margin: 0;
overflow: hidden;
border-radius: 18px;
box-shadow: 0 12px 32px -8px rgba(58, 32, 36, .22);
aspect-ratio: 4 / 3;
background: var(--cream-100);
}
.dish-page__photo img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
.dish-page__body { padding-top: .4rem; }
.dish-page__title {
font-family: var(--ff-display);
font-style: italic;
font-size: clamp(1.8rem, 4vw, 2.6rem);
color: var(--wine-800);
margin: .4rem 0 .6rem;
line-height: 1.15;
}
.dish-page__price {
display: inline-block;
font-family: var(--ff-display);
font-size: 1.6rem;
color: var(--wine-800);
font-weight: 600;
background: var(--cream-100);
padding: .25em .8em;
border-radius: 999px;
border: 1px solid var(--gold-300);
margin: .2rem 0 1.2rem;
}
.dish-page__desc {
font-size: 1.05rem;
line-height: 1.65;
color: var(--ink-2);
margin: 0 0 1.4rem;
}
.dish-page__meta {
display: flex; flex-wrap: wrap; gap: .4rem;
margin: 0 0 1.2rem;
}
.dish-page__allergen-key {
color: var(--ink-3);
font-size: .82rem;
line-height: 1.55;
padding: .8rem 1rem;
background: var(--cream-50);
border-left: 3px solid var(--gold-300);
border-radius: 4px;
margin: 0 0 1.6rem;
}
.dish-page__ctas { display: flex; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 720px) {
.dish-page__article { grid-template-columns: 1fr; gap: 1.4rem; }
.dish-page__photo { aspect-ratio: 16 / 10; border-radius: 14px; }
.dish-page__price { font-size: 1.35rem; }
}
/* ─── Custom inline calendar (replaces native ) ─────── */
.rw__cal-label {
font-size: .78rem;
color: var(--ink-3);
letter-spacing: .14em;
text-transform: uppercase;
margin: 1rem 0 .55rem;
}
.rw__cal {
background: var(--cream-50);
border: 1px solid var(--line-soft);
border-radius: 14px;
padding: 1rem;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.rw__cal-head {
display: grid;
grid-template-columns: 36px 1fr 36px;
align-items: center;
gap: .6rem;
margin-bottom: .9rem;
}
.rw__cal-nav {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line);
background: var(--white);
color: var(--wine-800);
border-radius: 999px;
cursor: pointer;
transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.rw__cal-nav:hover:not(:disabled) {
background: var(--wine-800);
border-color: var(--wine-800);
color: var(--cream-50);
}
.rw__cal-nav:disabled {
opacity: .35;
cursor: not-allowed;
}
.rw__cal-title {
text-align: center;
font-family: var(--ff-display);
font-style: italic;
font-size: 1.15rem;
color: var(--wine-800);
text-transform: capitalize;
letter-spacing: .01em;
}
.rw__cal-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 6px;
}
.rw__cal-week > span {
text-align: center;
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-3);
padding: 4px 0;
}
.rw__cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.rw__cal-cell {
aspect-ratio: 1 / 1;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--white);
border: 1px solid transparent;
border-radius: 10px;
font-family: var(--ff-body);
font-size: .95rem;
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition: background .15s var(--ease), color .15s var(--ease),
border-color .15s var(--ease), transform .15s var(--ease);
padding: 0;
}
.rw__cal-cell:hover:not(.is-disabled) {
background: var(--wine-50);
border-color: var(--gold-300);
transform: translateY(-1px);
}
.rw__cal-cell.is-today {
box-shadow: inset 0 -2px 0 var(--gold-500);
font-weight: 700;
}
.rw__cal-cell.is-selected,
.rw__cal-cell.is-selected:hover {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
box-shadow: 0 4px 14px rgba(58, 32, 36, .25);
transform: none;
}
.rw__cal-cell.is-disabled {
color: var(--ink-300);
background: transparent;
cursor: not-allowed;
text-decoration: line-through;
text-decoration-color: var(--ink-300);
}
.rw__cal-cell.is-closed {
color: var(--bad);
text-decoration-color: var(--bad);
}
.rw__cal-cell.is-holiday {
color: var(--gold-700);
background: rgba(201, 169, 97, .1);
text-decoration: line-through;
text-decoration-color: var(--gold-500);
cursor: not-allowed;
position: relative;
}
.rw__cal-cell.is-holiday::after {
content: "★";
position: absolute;
top: 1px; right: 4px;
font-size: .55em;
color: var(--gold-500);
line-height: 1;
}
.rw__cal-cell--blank {
background: transparent;
cursor: default;
}
@media (max-width: 540px) {
.rw__cal { padding: .6rem; }
.rw__cal-head { grid-template-columns: 32px 1fr 32px; gap: .4rem; }
.rw__cal-nav { width: 32px; height: 32px; }
.rw__cal-title { font-size: 1rem; }
.rw__cal-cell { font-size: .85rem; border-radius: 8px; }
.rw__cal-week > span { font-size: .58rem; letter-spacing: .08em; }
.rw__cal-grid { gap: 3px; }
.rw__cal-week { gap: 3px; }
}
/* ─── Full reservation wizard mobile responsiveness ─────────────────── */
@media (max-width: 540px) {
.rw { padding: 1.2rem 1rem; border-radius: 14px; }
.rw__title { font-size: 1.25rem; line-height: 1.25; }
.rw__sub { font-size: .88rem; }
.rw__head { margin-bottom: 1rem; }
/* Stepper — squeeze, hide labels except for the active one */
.rw__stepper { gap: 2px; padding: 3px; margin-bottom: 1.1rem; }
.rw__step { padding: .55rem .35rem; font-size: .78rem; gap: .2rem; }
.rw__step svg { width: 16px; height: 16px; }
.rw__step:not(.is-current) .rw__step-label { display: none; }
.rw__step.is-current .rw__step-label { font-size: .76rem; }
.rw__step--last { padding: .55rem .55rem; }
/* Quick-date pills — bigger touch target, tighter */
.rw__quick { gap: .4rem; }
.rw__pill { padding: .65rem .35rem; min-height: 56px; }
.rw__pill strong { font-size: .82rem; }
.rw__pill small { font-size: .68rem; }
/* Time grid — fit 4 columns on phone */
.rw__time-grid { grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.rw__time { padding: .65rem .3rem; font-size: .85rem; }
.rw__time-group h3 { font-size: .82rem; }
/* Guest grid — 4 columns on phone (1..15 → 4 rows) */
.rw__guest-grid { grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.rw__guest { padding: .85rem .3rem; font-size: 1.05rem; }
/* Details step — single column already on small via .rw__row, but tighten */
.rw__fields { gap: .75rem; }
.rw__input { font-size: .95rem; padding: .7rem .85rem; }
.rw__textarea { min-height: 64px; }
.rw__panel-title { font-size: 1.1rem; margin-bottom: .8rem; }
/* Submit row */
.rw__submit-row { flex-direction: column; align-items: stretch; gap: .55rem; }
.rw__submit-row .rw__back-btn { order: 2; text-align: center; padding: .7rem 0; }
.rw__submit { width: 100%; padding: .95rem 1rem; font-size: .95rem; }
}
@media (max-width: 360px) {
/* Ultra-narrow phones */
.rw { padding: 1rem .85rem; }
.rw__time-grid { grid-template-columns: repeat(3, 1fr); }
.rw__guest-grid { grid-template-columns: repeat(3, 1fr); }
.rw__pill strong { font-size: .75rem; }
}
/* ─── Contact card below the reservation wizard ─────────────────────── */
.rw-contact {
margin: 2.4rem auto 0;
max-width: 720px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
padding: 2rem;
background: var(--cream-50);
border: 1px solid var(--line-soft);
border-radius: 16px;
box-shadow: 0 2px 18px rgba(58, 32, 36, .06);
}
.rw-contact__title {
font-family: var(--ff-display);
font-style: italic;
font-size: 1.3rem;
color: var(--wine-800);
margin: 0 0 1rem;
letter-spacing: .005em;
}
.rw-contact__list { margin: 0; }
.rw-contact__list dt {
font-size: .68rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 1rem;
}
.rw-contact__list dt:first-child { margin-top: 0; }
.rw-contact__list dd {
margin: .35rem 0 0;
color: var(--ink);
font-size: .98rem;
line-height: 1.55;
}
.rw-contact__list dd a {
color: var(--wine-800);
text-decoration: none;
border-bottom: 1px solid var(--gold-300);
transition: color .15s var(--ease), border-color .15s var(--ease);
}
.rw-contact__list dd a:hover {
color: var(--gold-700);
border-color: var(--gold-500);
}
.rw-contact__hours {
margin: 0;
padding: 0;
list-style: none;
}
.rw-contact__hours li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: .55rem 0;
border-bottom: 1px solid var(--line-soft);
font-size: .95rem;
}
.rw-contact__hours li:last-child { border-bottom: 0; }
.rw-contact__hours li.is-today {
background: linear-gradient(90deg, rgba(201, 169, 97, .12), transparent);
padding-left: .6rem;
margin-left: -.6rem;
margin-right: -.6rem;
padding-right: .6rem;
border-radius: 6px;
font-weight: 600;
}
.rw-contact__hours li.is-today .rw-contact__day::before {
content: "●";
color: var(--gold-500);
margin-right: .35em;
font-size: .7em;
vertical-align: 2px;
}
.rw-contact__day { color: var(--ink); }
.rw-contact__time {
color: var(--wine-800);
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
.rw-contact__closed {
color: var(--ink-3);
font-style: italic;
font-size: .9em;
}
@media (max-width: 600px) {
.rw-contact {
grid-template-columns: 1fr;
gap: 1.6rem;
padding: 1.4rem;
margin-top: 2rem;
}
.rw-contact__title { font-size: 1.15rem; }
}
/* Upcoming-closure banner shown above the reservation wizard */
.rw__holiday-notice {
display: flex;
gap: .6rem;
align-items: baseline;
flex-wrap: wrap;
padding: .85rem 1.1rem;
margin: 0 0 1.4rem;
background: rgba(201, 169, 97, .14);
border-left: 4px solid var(--gold-500);
border-radius: 6px;
font-size: .9rem;
color: var(--ink);
}
.rw__holiday-notice strong { color: var(--wine-800); }
.rw__holiday-notice em { color: var(--ink-3); font-style: italic; }
.rw__holiday-icon {
color: var(--gold-700);
font-size: 1.1rem;
line-height: 1;
}
/* Closed-day feedback */
.rw__closed-msg {
margin: .9rem 0 0;
padding: .7rem 1rem;
background: #faf1e0;
border-left: 3px solid var(--gold-500);
color: var(--wine-800);
font-size: .92rem;
border-radius: 4px;
}
.rw__pill.is-closed {
opacity: .45;
cursor: not-allowed;
text-decoration: line-through;
text-decoration-color: var(--ink-3);
}
.rw__input.is-error,
input.rw__input.is-error {
border-color: var(--bad);
background: #fdf3f3;
}
.rw__input {
font-family: var(--ff-body);
font-size: 16px;
padding: .85rem 1rem;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
background: var(--cream-50);
color: var(--ink);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
width: 100%;
}
.rw__input:focus {
outline: 0;
border-color: var(--wine);
background: var(--white);
box-shadow: 0 0 0 4px rgba(62, 32, 36, .1);
}
.rw__textarea { min-height: 80px; resize: vertical; font-family: var(--ff-body); }
/* Time grid */
/* Dynamic time-window indicator — shows the chosen day's open–close range */
.rw__time-window {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: .4rem;
padding: .6rem .9rem;
margin-bottom: .85rem;
background: var(--cream-50);
border-left: 3px solid var(--gold-500);
border-radius: 4px;
}
.rw__time-window-label {
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-3);
}
.rw__time-window-value {
font-family: var(--ff-body);
font-weight: 600;
color: var(--wine-800);
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
}
.rw__time-group { margin-bottom: 1.2rem; }
.rw__time-group h3 {
font-family: var(--ff-body);
font-size: .76rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--gold-700);
margin: 0 0 .6rem;
}
.rw__time-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: .4rem;
}
.rw__time {
background: var(--white);
border: 1.5px solid var(--line);
color: var(--ink);
padding: .75rem .4rem;
border-radius: 8px;
font-family: var(--ff-body);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s ease, color .2s var(--ease);
font-variant-numeric: tabular-nums;
}
.rw__time:hover { border-color: var(--wine); color: var(--wine); }
.rw__time:active { transform: scale(.96); }
.rw__time.is-on {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
}
/* Guest grid */
.rw__guest-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
margin-bottom: .9rem;
}
@media (min-width: 480px) { .rw__guest-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 720px) { .rw__guest-grid { grid-template-columns: repeat(5, 1fr); } }
.rw__guest {
background: var(--white);
border: 1.5px solid var(--line);
border-radius: 10px;
padding: 1.1rem .4rem;
font-family: var(--ff-body);
font-size: 1.25rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s ease, color .2s var(--ease);
}
.rw__guest:hover { border-color: var(--wine); color: var(--wine); }
.rw__guest:active { transform: scale(.97); }
.rw__guest.is-on {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
}
.rw__hint {
font-size: .82rem;
color: var(--ink-3);
margin: .6rem 0 0;
text-align: center;
}
/* Custom guest count input — for groups > 15 */
.rw__guest-custom {
margin-top: 1.1rem;
padding: 1rem 1.1rem;
background: var(--cream-50);
border: 1px solid var(--line-soft);
border-radius: 12px;
}
.rw__guest-custom-label {
display: block;
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: .55rem;
}
.rw__guest-custom-row {
display: flex;
gap: .55rem;
align-items: stretch;
}
.rw__guest-custom-input {
flex: 1 1 auto;
min-width: 0;
text-align: center;
font-size: 1.15rem;
font-weight: 600;
color: var(--wine-800);
font-variant-numeric: tabular-nums;
}
.rw__guest-custom-input.is-error {
border-color: var(--bad);
background: #fdf3f3;
}
.rw__guest-custom-go {
flex: 0 0 auto;
padding: 0 1.1rem;
white-space: nowrap;
}
.rw__guest-custom-hint {
font-size: .78rem;
color: var(--ink-3);
margin: .65rem 0 0;
line-height: 1.5;
}
@media (max-width: 480px) {
.rw__guest-custom { padding: .85rem .9rem; }
.rw__guest-custom-row { flex-direction: column; gap: .5rem; }
.rw__guest-custom-go { width: 100%; padding: .75rem; }
}
/* Details step */
.rw__fields { display: flex; flex-direction: column; gap: .9rem; }
.rw__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 540px) { .rw__row { grid-template-columns: 1fr; } }
.rw__field { display: flex; flex-direction: column; gap: .35rem; }
.rw__field > label {
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--ink-3);
font-weight: 500;
}
.rw__help {
margin: -.2rem 0 0;
font-size: .8rem;
color: var(--ink-3);
padding: .55rem .85rem;
background: var(--cream-50);
border-left: 3px solid var(--gold-300);
border-radius: 4px;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.rw__help.is-warn {
background: rgba(155, 44, 44, .06);
border-left-color: var(--bad);
color: var(--bad);
}
/* Back + Submit */
.rw__back, .rw__submit-row {
margin-top: 1.1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.rw__back button, .rw__back-btn {
background: transparent;
border: 0;
color: var(--ink-3);
font-family: var(--ff-body);
font-size: .88rem;
cursor: pointer;
padding: .55rem 0;
}
.rw__back button:hover, .rw__back-btn:hover { color: var(--wine); }
.rw__submit {
padding: 1rem 2.2rem;
font-size: 1rem;
font-weight: 600;
letter-spacing: .04em;
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
border-radius: 999px;
box-shadow: 0 10px 26px rgba(62, 32, 36, .28);
transition: transform .25s var(--ease-out-back, var(--ease)), box-shadow .25s var(--ease), background .25s var(--ease);
}
.rw__submit:hover {
background: var(--wine-900);
border-color: var(--wine-900);
color: var(--cream-50);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(62, 32, 36, .4);
}
.rw__submit:active { transform: translateY(0); }
.rw__submit:focus-visible {
outline: 2px solid var(--gold-500);
outline-offset: 3px;
}
.rw__estim {
margin-top: 1.2rem;
padding-top: 1.1rem;
border-top: 1px dashed var(--line);
font-size: .78rem;
color: var(--ink-3);
text-align: center;
}
.rw__success {
text-align: center;
padding: 1.5rem 1rem .8rem;
}
.rw__success-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--gold-500);
color: var(--cream-50);
font-size: 1.8rem;
margin-bottom: 1rem;
box-shadow: 0 8px 24px rgba(201, 169, 97, .4);
}
.rw__success h3 {
font-family: var(--ff-display);
font-style: italic;
font-size: 1.7rem;
color: var(--ink);
margin: 0 0 .4rem;
}
.rw__success p { color: var(--ink-2); margin: 0; }
/* Mobile tightening */
@media (max-width: 600px) {
.rw__step { padding: .65rem .5rem; font-size: .76rem; gap: .3rem; }
.rw__step-label { display: none; }
.rw__step.is-current .rw__step-label { display: inline; }
.rw__quick { grid-template-columns: 1fr; }
.rw__time-grid { grid-template-columns: repeat(3, 1fr); }
.rw__guest-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- contact + form -------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; }
.contact-info {
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
padding: 2.2rem;
box-shadow: var(--shadow-sm);
}
.contact-info h3 { font-style: italic; color: var(--ink); margin-bottom: 1rem; }
.contact-info dl { margin: 0; }
.contact-info dt {
font-size: .68rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 1.2rem;
font-weight: 500;
}
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { margin: .4rem 0 0; color: var(--ink); font-size: .98rem; }
.form {
background: var(--white);
border-radius: var(--radius-lg);
padding: 2.2rem 2.4rem 2rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--line-soft);
}
.form h2 { font-style: italic; color: var(--ink); margin-bottom: 1.4rem; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
.form__field { display: flex; flex-direction: column; position: relative; }
.form__field--full { grid-column: 1 / -1; }
.form__label {
font-size: .74rem;
font-weight: 500;
color: var(--ink-3);
margin-bottom: .45rem;
letter-spacing: .14em;
text-transform: uppercase;
}
.form__input, .form__select, .form__textarea {
font-family: var(--ff-body);
font-size: 1rem;
padding: .85rem 1rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--ivory);
color: var(--ink);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
width: 100%;
}
.form__textarea { min-height: 110px; resize: vertical; }
.form__input:focus, .form__select:focus, .form__textarea:focus {
outline: 0;
border-color: var(--wine);
background: var(--white);
box-shadow: 0 0 0 4px rgba(62, 32, 36, .08);
}
.form__input.is-invalid { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(155, 44, 44, .08); }
.form__alert {
padding: 1rem 1.2rem;
border-radius: var(--radius-sm);
font-size: .92rem;
margin-bottom: 1.3rem;
line-height: 1.5;
}
.form__alert--success { background: rgba(74,93,35,.07); color: #364419; border-left: 3px solid var(--gold-500); }
.form__alert--error { background: rgba(155,44,44,.05); color: var(--bad); border-left: 3px solid var(--bad); }
.form__actions { margin-top: 1.6rem; display: flex; justify-content: flex-end; }
/* ---------- legal page ------------------------------------------------ */
.legal { max-width: 760px; margin: 0 auto; padding: 2rem 0 4rem; }
.legal h1 { font-style: italic; color: var(--ink); margin-bottom: 1.8rem; }
.legal h2, .legal h3 { margin-top: 2rem; }
.legal p, .legal li { color: var(--ink-2); }
.legal a { color: var(--wine); text-decoration: underline; text-decoration-color: rgba(62,32,36,.3); text-underline-offset: 3px; }
/* legal page typography for content body (rendered via safe_html) */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 {
font-family: var(--ff-display);
font-style: italic;
font-size: 1.8rem;
color: var(--ink);
margin: 2.2rem 0 .8rem;
font-weight: 500;
}
.prose h3 {
font-family: var(--ff-body);
font-size: .82rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-700);
font-weight: 600;
margin: 1.6rem 0 .5rem;
}
.prose h4 { font-size: 1rem; font-family: var(--ff-body); font-weight: 600; color: var(--ink); margin: 1.4rem 0 .4rem; }
.prose p { color: var(--ink-2); line-height: 1.72; margin: 0 0 1rem; }
.prose ul, .prose ol { color: var(--ink-2); line-height: 1.72; margin: 0 0 1rem; padding-left: 1.4rem; }
.prose li { margin-bottom: .35rem; }
.prose a {
color: var(--wine);
text-decoration: underline;
text-decoration-color: rgba(62, 32, 36, .35);
text-underline-offset: 3px;
word-break: break-word;
}
.prose a:hover { color: var(--gold-700); text-decoration-color: var(--gold-500); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose blockquote {
border-left: 3px solid var(--gold-500);
background: var(--cream-50);
padding: 1rem 1.3rem;
margin: 1.4rem 0;
font-style: italic;
color: var(--ink-2);
}
.legal-meta {
margin: 2.5rem 0 0;
padding-top: 1.2rem;
border-top: 1px dashed var(--line);
font-size: .82rem;
color: var(--ink-3);
letter-spacing: .04em;
}
.legal-meta time { color: var(--ink-2); font-weight: 500; }
/* "Stand: 12. Mai 2026" pill shown right under the page title */
.legal-stamp {
display: inline-block;
margin: .8rem 0 0;
padding: .3rem .85rem;
border-radius: 999px;
background: var(--cream-100);
color: var(--ink-3);
font-size: .78rem;
letter-spacing: .04em;
}
.legal-stamp time { color: var(--wine-800); font-weight: 600; }
/* Top variant — same buttons but with extra breathing room below */
.legal-nav--top {
margin-top: 0;
margin-bottom: 2.4rem;
padding-top: 0;
border-top: 0;
}
/* "Back to top" link after the bottom nav on long pages */
.legal-top-link {
text-align: center;
margin: 1.4rem 0 0;
font-size: .85rem;
}
.legal-top-link a {
color: var(--ink-3);
text-decoration: none;
border-bottom: 1px solid var(--line);
padding-bottom: 2px;
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.legal-top-link a:hover { color: var(--wine-800); border-color: var(--gold-500); }
/* Scroll-anchor offset so #anchor-jumps don't hide under the sticky header */
.prose h2, .prose h3, .prose h4 { scroll-margin-top: 90px; }
/* Long content fits cleanly on phones */
@media (max-width: 720px) {
.prose { max-width: 100%; padding: 0 .25rem; }
.prose h2 { font-size: 1.45rem; margin-top: 1.6rem; }
.prose h3 { font-size: .75rem; margin-top: 1.3rem; }
.prose p, .prose ul, .prose ol { font-size: .96rem; line-height: 1.7; }
.legal-nav--top { gap: .4rem; }
.legal-nav__link { padding: .45rem .85rem; font-size: .82rem; }
}
/* legal page footer nav (between legal pages) */
.legal-nav {
max-width: 760px;
margin: 3.5rem auto 0;
padding-top: 2rem;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: .6rem;
justify-content: center;
}
.legal-nav__link {
display: inline-flex;
align-items: center;
padding: .55rem 1.2rem;
border-radius: 999px;
border: 1px solid var(--ink-200);
background: transparent;
color: var(--ink-2);
font-size: .88rem;
font-weight: 500;
text-decoration: none;
letter-spacing: .02em;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.legal-nav__link:hover {
background: var(--ink-900);
color: var(--cream-50);
border-color: var(--ink-900);
}
.legal-nav__link.is-active {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
box-shadow: 0 4px 14px rgba(62, 32, 36, .22);
}
.legal-nav__link.is-active:hover {
background: var(--wine-900);
color: var(--cream-50);
border-color: var(--wine-900);
}
/* ---------- footer ---------------------------------------------------- */
.site-footer {
background: var(--wine-900);
color: rgba(245, 230, 211, .78);
padding-top: clamp(4rem, 7vw, 6rem);
margin-top: 0;
}
.site-footer a { color: rgba(245, 230, 211, .88); transition: color .2s var(--ease); }
.site-footer a:hover { color: var(--gold-300); }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 3.5rem; padding-bottom: 3rem; }
.site-footer__brand { font-family: var(--ff-display); font-style: italic; font-size: 1.7rem; color: var(--cream-100); font-weight: 500; margin: 0 0 .8rem; letter-spacing: -.01em; }
.site-footer__logo {
display: block;
height: 64px;
max-width: 260px;
width: auto;
object-fit: contain;
margin: 0 0 1rem;
}
@media (max-width: 720px) {
.site-footer__logo { height: 52px; max-width: 220px; }
}
.site-footer__addr {
font-size: .94rem;
line-height: 1.85;
margin: 0;
color: var(--cream-100); /* brighter than the footer base text */
}
.site-footer__addr a {
color: var(--cream-50); /* phone + email links — high contrast */
text-decoration: none;
border-bottom: 1px solid rgba(201, 169, 97, .35);
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.site-footer__addr a:hover {
color: var(--gold-300);
border-color: var(--gold-500);
}
.site-footer h4 {
color: var(--gold-300);
font-family: var(--ff-body);
font-size: .7rem;
letter-spacing: .26em;
text-transform: uppercase;
margin-bottom: 1.1rem;
font-weight: 500;
}
.site-footer__hours, .site-footer__links {
list-style: none;
margin: 0;
padding: 0;
font-size: .9rem;
line-height: 1.9;
}
.site-footer__hours li {
display: flex;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid rgba(245,230,211,.1);
padding: .25rem 0;
}
.site-footer__hours li:last-child { border-bottom: 0; }
.site-footer__h4--follow { margin-top: 1.6rem; }
.site-footer__social {
display: flex; flex-wrap: wrap; gap: .5rem;
margin-top: .65rem;
font-size: .8rem;
}
.site-footer__social-link {
display: inline-flex; align-items: center;
padding: .38rem .85rem;
border: 1px solid rgba(201,169,97,.35);
border-radius: 999px;
color: rgba(245, 230, 211, .85);
text-decoration: none;
transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
white-space: nowrap;
}
.site-footer__social-link:hover {
background: rgba(201,169,97,.12);
border-color: var(--gold-300);
color: var(--cream-50);
}
.site-footer__bar { border-top: 1px solid rgba(245,230,211,.1); padding: 1.3rem 0; }
.site-footer__bar .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
font-size: .78rem;
color: rgba(245,230,211,.55);
}
.back-to-top {
color: rgba(245,230,211,.55);
display: inline-flex; align-items: center; gap: .35rem;
}
.back-to-top:hover { color: var(--gold-300); }
/* ---------- testimonials (scrolling 3-column carousel) ---------------- */
.testimonials { position: relative; overflow: hidden; }
.tm-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.4rem;
max-height: 720px;
overflow: hidden;
mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}
@media (min-width: 720px) {
.tm-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.tm-grid { grid-template-columns: repeat(3, 1fr); }
}
.tm-col { overflow: hidden; }
.tm-col--md { display: none; }
.tm-col--lg { display: none; }
@media (min-width: 720px) { .tm-col--md { display: block; } }
@media (min-width: 1024px) { .tm-col--lg { display: block; } }
.tm-col__track {
display: flex;
flex-direction: column;
gap: 1.4rem;
animation: tm-scroll var(--dur, 40s) linear infinite;
will-change: transform;
}
.tm-col:hover .tm-col__track { animation-play-state: paused; }
@keyframes tm-scroll {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
.tm-card {
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
padding: 1.4rem 1.4rem 1.2rem;
box-shadow: var(--shadow-sm);
flex: 0 0 auto;
}
.tm-card__stars {
display: flex;
gap: 2px;
margin-bottom: .7rem;
font-size: 1rem;
line-height: 1;
color: var(--ink-200);
}
.tm-card__stars .is-on { color: var(--gold-500); }
.tm-card__text {
margin: 0 0 1.1rem;
color: var(--ink-2);
font-size: .95rem;
line-height: 1.55;
font-family: var(--ff-body);
/* a soft drop-quote feel */
position: relative;
quotes: "“" "”";
}
.tm-card__author {
display: flex;
align-items: center;
gap: .75rem;
padding-top: .8rem;
border-top: 1px dashed var(--line);
}
.tm-card__avatar {
width: 38px; height: 38px;
flex-shrink: 0;
border-radius: 50%;
color: var(--cream-50);
font-size: .82rem;
font-weight: 600;
letter-spacing: .04em;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
font-family: var(--ff-body);
}
.tm-card__meta { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.tm-card__name { font-weight: 600; color: var(--ink); font-size: .92rem; letter-spacing: -.005em; }
.tm-card__sub { font-size: .72rem; color: var(--ink-3); margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-card__source {
width: 26px; height: 26px;
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #4285F4, #34A853 50%, #FBBC04 75%, #EA4335);
color: #fff;
font-family: "Inter", system-ui, sans-serif;
font-size: .82rem;
font-weight: 700;
line-height: 1;
}
/* Respect reduced motion + small screens */
@media (prefers-reduced-motion: reduce) {
.tm-col__track { animation: none; }
.tm-grid { max-height: none; mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 720px) {
.tm-grid { max-height: 620px; }
.tm-card { padding: 1.2rem 1.2rem 1rem; }
}
/* ---------- cookie consent banner ------------------------------------ */
.cc {
position: fixed;
inset: auto 16px 16px auto;
width: min(420px, calc(100vw - 32px));
z-index: 250;
transform: translateY(20px);
opacity: 0;
transition: transform .35s var(--ease), opacity .3s var(--ease);
pointer-events: none;
}
.cc.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cc__card {
background: #fdfaf3;
border: 1px solid rgba(201, 169, 97, .35);
border-radius: var(--radius-lg);
box-shadow: 0 24px 60px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .04);
padding: 1.4rem 1.4rem 1.2rem;
color: var(--ink);
max-height: 80vh;
overflow-y: auto;
}
.cc__head { margin-bottom: 1rem; }
.cc__head strong {
display: block;
font-family: var(--ff-display);
font-style: italic;
font-size: 1.25rem;
color: var(--ink);
margin-bottom: .35rem;
}
.cc__head p {
margin: 0;
font-size: .88rem;
line-height: 1.55;
color: var(--ink-2);
}
.cc__details {
margin: 1rem 0;
padding: .9rem 0;
border-top: 1px dashed var(--ink-100);
border-bottom: 1px dashed var(--ink-100);
display: flex;
flex-direction: column;
gap: .85rem;
}
.cc__cat {
display: grid;
grid-template-columns: auto 1fr;
gap: .75rem;
cursor: pointer;
user-select: none;
}
.cc__cat input {
width: 16px;
height: 16px;
margin-top: 4px;
accent-color: var(--wine-800);
}
.cc__cat input:disabled { opacity: .55; cursor: not-allowed; }
.cc__cat strong {
display: block;
font-size: .88rem;
color: var(--ink);
margin-bottom: .15rem;
letter-spacing: .005em;
}
.cc__cat small { display: block; font-size: .78rem; line-height: 1.45; color: var(--ink-3); }
.cc__actions {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin-top: .8rem;
}
.cc__btn {
flex: 1;
min-width: 0;
padding: .65rem .9rem;
border-radius: 999px;
border: 1px solid transparent;
font-family: var(--ff-body);
font-size: .82rem;
font-weight: 500;
letter-spacing: .03em;
cursor: pointer;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
white-space: nowrap;
}
.cc__btn--primary {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
}
.cc__btn--primary:hover { background: var(--wine-900); border-color: var(--wine-900); }
.cc__btn--ghost {
background: transparent;
color: var(--ink-2);
border-color: var(--ink-200);
}
.cc__btn--ghost:hover { color: var(--wine); border-color: var(--wine); }
.cc__footer {
margin-top: .85rem;
font-size: .76rem;
text-align: right;
}
.cc__footer a { color: var(--ink-3); text-decoration: underline; text-decoration-color: rgba(122,118,108,.4); text-underline-offset: 3px; }
.cc__footer a:hover { color: var(--wine); }
@media (max-width: 720px) {
.cc { inset: auto 0 0 0; width: 100vw; }
.cc__card { border-radius: 18px 18px 0 0; padding: 1.3rem 1.2rem 1.4rem calc(1.2rem + env(safe-area-inset-left)); padding-right: calc(1.2rem + env(safe-area-inset-right)); padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)); }
.cc__btn { flex: 1 1 calc(50% - .25rem); }
}
@media (prefers-reduced-motion: reduce) {
.cc { transition: opacity .2s linear; transform: none; }
}
/* footer bar — links cluster on the right */
.site-footer__bar-links {
display: inline-flex;
align-items: center;
gap: 1.2rem;
font-size: .8rem;
}
@media (max-width: 720px) {
.site-footer__bar-links { flex-direction: row; gap: .9rem; flex-wrap: wrap; justify-content: flex-end; }
}
/* ---------- announcement popup --------------------------------------- */
.ann {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 3vw, 2rem);
opacity: 0;
pointer-events: none;
transition: opacity .3s var(--ease);
}
.ann.is-open { opacity: 1; pointer-events: auto; }
.ann__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 13, 12, .65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.ann__card {
position: relative;
background: var(--cream-50);
border-radius: var(--radius-lg);
max-width: 520px;
width: 100%;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(201, 169, 97, .25);
transform: translateY(20px) scale(.96);
transition: transform .35s var(--ease);
}
.ann.is-open .ann__card { transform: translateY(0) scale(1); }
.ann__image {
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-color: var(--cream-100);
}
.ann__close {
position: absolute;
top: 12px; right: 12px;
z-index: 2;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(253, 250, 243, .85);
border: 1px solid var(--line);
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center; justify-content: center;
transition: background .2s var(--ease), transform .15s ease;
}
.ann__close:hover { background: var(--cream-50); transform: scale(1.06); }
.ann__body {
padding: clamp(1.4rem, 4vw, 2.2rem);
text-align: center;
}
.ann__title {
font-family: var(--ff-display);
font-style: italic;
font-size: clamp(1.7rem, 4.5vw, 2.4rem);
font-weight: 500;
color: var(--ink);
margin: 0 0 .8rem;
line-height: 1.15;
letter-spacing: -.01em;
}
.ann__text {
color: var(--ink-2);
line-height: 1.65;
margin: 0 0 1.4rem;
font-size: 1rem;
}
.ann__cta {
display: inline-block;
background: var(--wine-800);
color: var(--cream-50);
padding: .85rem 2rem;
border-radius: 999px;
font-weight: 500;
font-family: var(--ff-body);
text-decoration: none;
letter-spacing: .04em;
transition: background .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.ann__cta:hover {
background: var(--wine-900);
color: var(--cream-50);
transform: translateY(-2px);
box-shadow: var(--shadow-wine, 0 14px 32px rgba(62, 32, 36, .35));
}
@media (max-width: 540px) {
.ann { padding: .8rem; align-items: flex-end; }
.ann__card { transform: translateY(40px); }
}
@media (prefers-reduced-motion: reduce) {
.ann, .ann__card { transition: opacity .2s linear; transform: none; }
}
/* ---------- mobile bottom nav ----------------------------------------- */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 120;
display: none;
background: rgba(42, 22, 26, .92);
backdrop-filter: saturate(160%) blur(18px);
-webkit-backdrop-filter: saturate(160%) blur(18px);
border-top: 1px solid rgba(201, 169, 97, .18);
padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
}
.bottom-nav__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .2rem;
padding: .55rem .3rem .35rem;
color: rgba(253, 249, 241, .65);
text-decoration: none;
font-family: var(--ff-body);
font-size: .68rem;
letter-spacing: .04em;
font-weight: 500;
transition: color .2s var(--ease), transform .2s var(--ease);
position: relative;
-webkit-tap-highlight-color: transparent;
}
.bottom-nav__item:active { transform: scale(.96); }
.bottom-nav__item.is-active {
color: var(--cream-50);
}
.bottom-nav__item.is-active::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 26px;
height: 2px;
transform: translateX(-50%);
background: var(--gold-500);
border-radius: 999px;
}
.bottom-nav__icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .25s var(--ease);
}
.bottom-nav__icon svg {
width: 22px;
height: 22px;
display: block;
}
.bottom-nav__item.is-active .bottom-nav__icon { transform: translateY(-2px); }
.bottom-nav__label {
font-size: .66rem;
letter-spacing: .04em;
line-height: 1;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* Only show on phones; flex-row inside the media query */
@media (max-width: 720px) {
.bottom-nav { display: flex; }
/* push footer + body content above the bar so nothing is hidden */
body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
.site-footer { padding-bottom: calc(env(safe-area-inset-bottom) + .5rem); }
}
/* hide on print */
@media print { .bottom-nav { display: none !important; } }
/* ---------- utilities -------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .9s var(--ease), transform .9s var(--ease);
/* CSS-only safety net — content fades in 1s after first paint even
if the IntersectionObserver in main.js never fires (CSP block,
JS error, ad-blocker, slow connection). The JS .is-visible path
still works and is preferred — its rule below disables this
fallback animation when JS has run. */
animation: revealFallback .9s 1s var(--ease) both;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
animation: none; /* JS path active — skip the fallback */
}
@keyframes revealFallback {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal[data-delay="1"] { transition-delay: .08s; animation-delay: 1.08s; }
.reveal[data-delay="2"] { transition-delay: .16s; animation-delay: 1.16s; }
.reveal[data-delay="3"] { transition-delay: .24s; animation-delay: 1.24s; }
.reveal[data-delay="4"] { transition-delay: .32s; animation-delay: 1.32s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; animation: none; }
html { scroll-behavior: auto; }
}
/* ---------- responsive ------------------------------------------------- */
@media (max-width: 960px) {
.story { grid-template-columns: 1fr; }
.story__image { aspect-ratio: 16/10; max-height: 440px; }
.info-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.gallery { grid-template-columns: repeat(2, 1fr); }
.site-footer__grid { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (max-width: 720px) {
.nav-toggle { display: inline-flex; }
/* mobile top bar: logo + hamburger only — hide inline lang DD + Reserve */
.site-header__actions .lang-dd,
.site-header__actions .nav-cta { display: none; }
/* Drawer sits between the sticky header (z=100) and the rest of the page.
It fills the viewport from below the header to the bottom. */
.primary-nav {
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
bottom: 0;
background: var(--cream-50);
padding: 1.2rem 1.6rem 2rem;
display: none;
z-index: 95;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.primary-nav.is-open { display: block; animation: slideDown .3s var(--ease); }
/* When drawer is open: scroll-lock the body (without knocking the sticky
header off-screen by repositioning the body). Force the header to STAY
at top:0 of the viewport — when the user was scrolled, sticky alone
could fail in some browsers, so we promote it to fixed. */
html.is-drawer-open,
body.is-drawer-open {
overflow: hidden;
height: 100%;
touch-action: none;
overscroll-behavior: none;
}
body.is-drawer-open .site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 100;
/* Kill backdrop-filter — its containing-block side-effect breaks
position:fixed on the drawer inside in Safari. */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.is-drawer-open .site-header--text-dark { background: var(--cream-50) !important; }
body.is-drawer-open .site-header--text-light { background: var(--wine-900) !important; }
/* Burger → X animation */
body.is-drawer-open .nav-toggle span:nth-child(1) { transform: translateY(3.5px) rotate( 45deg); }
body.is-drawer-open .nav-toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.primary-nav__list {
flex-direction: column;
gap: 0;
}
.primary-nav__list li { border-bottom: 1px solid var(--line-soft); }
.primary-nav__list li:last-child { border-bottom: 0; }
.primary-nav__list a,
.site-header--text-light .primary-nav__list a,
.site-header--text-dark .primary-nav__list a {
display: block;
padding: 1rem 0;
font-size: 1.25rem;
font-family: "Mirza", "Cormorant Garamond", Georgia, serif;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
font-style: normal;
color: var(--ink) !important;
}
.primary-nav__list a::after { display: none; }
/* Drawer is cream-on-mobile — force readable colors regardless of header text mode */
.site-header--text-light .primary-nav__lang { color: var(--ink-2); border-color: var(--line); }
.site-header--text-light .primary-nav__lang small { color: var(--ink-3); }
.site-header--text-light .primary-nav__lang.is-active {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
}
.site-header--text-light .primary-nav__lang.is-active small { color: rgba(253, 249, 241, .7); }
.site-header--text-light .primary-nav__cta {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
/* drawer extras: language row + Reserve CTA */
.primary-nav__drawer-only {
display: block;
margin-top: 1.2rem;
padding-top: 1.2rem;
border-top: 1px solid var(--line);
}
.primary-nav__langs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
margin-bottom: 1.1rem;
}
.primary-nav__lang {
display: flex;
flex-direction: column;
align-items: center;
gap: .15rem;
padding: .75rem .5rem;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ink-2);
font-size: .82rem;
font-weight: 600;
letter-spacing: .12em;
text-decoration: none;
transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.primary-nav__lang small {
font-size: .7rem;
letter-spacing: 0;
font-weight: 400;
color: var(--ink-3);
text-transform: none;
}
.primary-nav__lang:hover { border-color: var(--wine); color: var(--wine); }
.primary-nav__lang.is-active {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
}
.primary-nav__lang.is-active small { color: rgba(253, 249, 241, .7); }
.primary-nav__cta,
.site-header--text-light .primary-nav__cta,
.site-header--text-dark .primary-nav__cta {
width: 100%;
padding: .9rem 1.2rem;
font-size: .95rem;
background: var(--wine-800) !important;
color: var(--cream-50) !important;
border-color: var(--wine-800) !important;
font-family: var(--ff-body);
font-weight: 600;
letter-spacing: .04em;
text-transform: none;
}
.primary-nav__cta:hover {
background: var(--wine-900) !important;
color: var(--cream-50) !important;
}
.form__grid { grid-template-columns: 1fr; }
.gallery { grid-template-columns: 1fr; }
.cat-nav { top: var(--header-h); }
.cat-nav__track { padding: .7rem 1rem; gap: .4rem; }
.cat-chip { padding: .5rem .9rem; font-size: .82rem; }
.brand__logo { height: 46px; max-width: 220px; }
.site-header.is-scrolled .brand__logo { height: 40px; }
.menu-card { padding: .95rem 1rem; gap: .85rem; }
.menu-card.has-image { grid-template-columns: 1fr 96px; }
.menu-card__image { width: 96px; height: 96px; }
.menu-card__name { font-size: 1.15rem; }
.menu-card__desc { font-size: .88rem; -webkit-line-clamp: 2; margin-bottom: .55rem; }
.menu-card__price { font-size: 1.2rem; }
.menu-list { gap: .75rem; }
}
/* ════════════════════════════════════════════════════════════════════════
SITE-WIDE MOBILE RESPONSIVE GUARDRAILS
Catch-all fixes so nothing on any page overflows or breaks below 720px.
════════════════════════════════════════════════════════════════════════ */
/* 1. Prevent horizontal scroll no matter what */
html, body { overflow-x: clip; max-width: 100%; }
/* 2. Media never overflows its container */
img, video, iframe, svg, canvas, picture {
max-width: 100%;
height: auto;
}
iframe { display: block; }
/* 3. Long words / URLs wrap instead of pushing the layout wide */
.lead, .menu-card__desc, .dish-page__desc, .rw-contact__list dd, p, h1, h2, h3, h4 {
overflow-wrap: anywhere;
word-break: break-word;
}
/* 4. Tables scroll horizontally inside a wrapper if too wide */
table { max-width: 100%; }
/* Targeted phone fixes */
@media (max-width: 720px) {
/* Tighter container padding so content uses more of the screen */
.container { padding: 0 1.1rem; }
/* Sections breathe less on phones */
.section { padding: clamp(3rem, 8vw, 4.5rem) 0; }
.section--tight { padding: clamp(2rem, 6vw, 3rem) 0; }
/* Hero scales down */
.hero__h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
.hero__subtitle { font-size: 1rem; padding: 0 .4rem; }
.hero__eyebrow { font-size: .7rem; }
.hero__ctas { flex-direction: column; gap: .55rem; }
.hero__ctas .btn { width: 100%; justify-content: center; }
/* Contact page wizard wrapper */
section[id="reserve"] > .container { padding-left: .85rem; padding-right: .85rem; }
/* Hours/map: map card height shrinks */
.map-card { height: 280px; }
}
/* Ultra-narrow phones (≤ 380px) */
@media (max-width: 380px) {
.container { padding: 0 .85rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
.hero__h1 { font-size: 1.8rem; }
.menu-card.has-image { grid-template-columns: 1fr 80px; }
.menu-card__image { width: 80px; height: 80px; }
}
/* Print: hide the bottom nav + cookie consent + announcement */
@media print {
.bottom-nav, .cookie-consent, .announcement-popup, .nav-toggle, .site-header__actions { display: none !important; }
}
/* =====================================================================
PREVIEW ISOLATION — used by the admin live-preview iframes.
When body has .is-preview + .is-preview-, hide every major
region of the page and reveal ONLY the requested section(s). Operator
sees pixel-exact rendering of just the block they're editing.
===================================================================== */
body.is-preview { background: var(--ivory); padding: 0; margin: 0; }
/* Hide everything by default in preview mode */
body.is-preview > header.site-header,
body.is-preview > main > section,
body.is-preview > footer.site-footer,
body.is-preview > .bottom-nav,
body.is-preview > .cookie-consent,
body.is-preview .announcement-popup { display: none !important; }
/* Strip the sticky-header offset so isolated sections start at the top
of the iframe, not at clamp(8rem, 15vw, 13rem) padding. */
body.is-preview > main { padding-top: 0 !important; }
body.is-preview > main > section { padding-top: clamp(1.5rem, 4vw, 3rem) !important;
padding-bottom: clamp(1.5rem, 4vw, 3rem) !important; }
body.is-preview .reveal { opacity: 1 !important; transform: none !important; }
/* Header preview — show only the header. */
body.is-preview-header > header.site-header {
display: block !important;
position: static !important; /* don't float over an empty page */
}
/* Hero preview — show only the hero. Drop its huge top padding so the
section sits flush with the iframe top edge. */
body.is-preview-hero > main > #hero {
display: flex !important;
align-items: center !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: auto !important;
}
body.is-preview-hero > main > #hero .hero__inner { padding: 3rem 1.2rem !important; }
body.is-preview-hero > main > #hero .hero__rule { display: none !important; }
/* Story / Partners / Find-us / Featured / Testimonials / Gallery — each
target shown when its body class is present. */
body.is-preview-story > main > #story,
body.is-preview-partners > main > #partners,
body.is-preview-find-us > main > #find-us { display: block !important; }
/* Footer — used when business_info edits address/phone/email/socials. */
body.is-preview-footer > footer.site-footer { display: block !important; }
/* Compact footer in preview mode — no need for the dark bar at the
very bottom with cookie/back-to-top links. */
body.is-preview > footer.site-footer .site-footer__bar { display: none !important; }
/* =====================================================================
PARTNERS MARQUEE — auto-scrolling "Our partners" strip on the home page.
Logos preserve aspect ratio (object-fit: contain, fixed-height rail),
no circular masks, no cropping. Pauses on hover and respects
prefers-reduced-motion.
===================================================================== */
.partners-strip {
background: var(--ivory);
padding: clamp(2rem, 4.5vw, 3.6rem) 0 clamp(1.6rem, 4vw, 3rem);
overflow: hidden;
border: 1px solid var(--line-soft);
border-radius: clamp(14px, 3vw, 28px);
/* sit inside the page width with a comfortable inset on desktop,
and full-width with a softer radius on phones */
margin: clamp(1.4rem, 4vw, 3.2rem) clamp(.9rem, 4vw, 2.6rem);
}
@media (max-width: 720px) {
.partners-strip {
margin: 1.2rem .75rem;
padding: 1.6rem 0 1.4rem;
border-radius: 16px;
}
}
.section--cream + .partners-strip,
.partners-strip + .section--cream { border-color: transparent; }
.partners-strip__title {
text-align: center;
margin: 0 0 1.6rem;
font-family: var(--ff-body);
font-size: .72rem;
font-weight: 500;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold-700);
}
.partners-strip__viewport {
position: relative;
overflow: hidden;
/* Fade-out gradient on the edges so logos enter and leave gently. */
-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.partners-strip__track {
display: flex;
align-items: center;
gap: clamp(2rem, 5vw, 4.5rem);
width: max-content;
animation: partners-scroll 38s linear infinite;
will-change: transform;
}
.partners-strip__viewport:hover .partners-strip__track { animation-play-state: paused; }
.partners-strip__item {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 64px;
/* No fixed width — let aspect ratio dictate the visible logo footprint. */
padding: 0 .4rem;
transition: filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
/* Subtle desaturation so mismatched logo palettes don't fight the brand */
filter: grayscale(.4) brightness(.95);
opacity: .82;
color: inherit;
text-decoration: none;
}
.partners-strip__item:hover {
filter: grayscale(0) brightness(1);
opacity: 1;
transform: translateY(-2px);
}
.partners-strip__item img {
max-height: 100%;
max-width: 200px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
@keyframes partners-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.partners-strip__track { animation: none; }
.partners-strip__viewport {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
}
@media (max-width: 720px) {
.partners-strip__item { height: 72px; padding: 0 .35rem; }
.partners-strip__item img { max-width: 170px; }
.partners-strip__item--chip { padding: .8rem 1.05rem; }
.partners-strip__title { font-size: .68rem; letter-spacing: .22em; margin-bottom: 1.1rem; }
.partners-strip__track { gap: 2rem; }
}
@media (max-width: 380px) {
.partners-strip__item { height: 62px; }
.partners-strip__item img { max-width: 140px; }
.partners-strip__item--chip { padding: .65rem .85rem; }
.partners-strip__track { gap: 1.6rem; }
}
/* Admin-chosen dark background — flip title to cream and let the logos
sit at full opacity so light-coloured logos don't fight the bg. */
.partners-strip--dark { color: var(--cream-50); border-color: rgba(253, 249, 241, .08); }
.partners-strip--dark .partners-strip__title { color: var(--gold-300); }
.partners-strip--dark .partners-strip__item {
filter: grayscale(.15) brightness(1.1);
opacity: .92;
}
.partners-strip--dark .partners-strip__item:hover {
filter: grayscale(0) brightness(1.15);
opacity: 1;
}
/* Light bg variant — slight tweak so the desaturation is gentler when
admin picks a softer cream than the default ivory. */
.partners-strip--light { border-color: var(--line-soft); }
/* ── Per-partner chip background ────────────────────────────────────
When the admin picks a bg_color for a specific logo (white behind
dark logos, black/brown behind white logos, etc.) the item turns
into a soft rounded chip carrying that exact colour. We drop the
desaturation/brightness filter so the logo reads with full fidelity
on the colour it was designed for, and pad the chip so the artwork
has air on all sides. */
.partners-strip__item--chip {
padding: .85rem 1.2rem;
border-radius: 10px;
box-shadow:
0 1px 0 rgba(15, 11, 9, .04),
0 8px 24px -14px rgba(15, 11, 9, .35);
/* Defeat the strip-level grayscale/opacity so brand colours render true */
filter: none;
opacity: 1;
transition:
transform .35s var(--ease),
box-shadow .35s var(--ease);
}
.partners-strip__item--chip:hover {
filter: none;
opacity: 1;
transform: translateY(-3px);
box-shadow:
0 1px 0 rgba(15, 11, 9, .05),
0 14px 32px -14px rgba(15, 11, 9, .5);
}
/* Slightly tighter on mobile so the chip footprint doesn't dominate */
@media (max-width: 720px) {
.partners-strip__item--chip { padding: .55rem .8rem; border-radius: 8px; }
}
/* If the dark-strip parent forces logo brightening, undo it on chips —
the chip carries its own background, so the logo treatment is bound
to the chip colour, not the section colour. */
.partners-strip--dark .partners-strip__item--chip {
filter: none;
opacity: 1;
}
/* Hairline edge so a pure-white chip on a near-white strip is still
visible as a distinct shape, and a dark chip on a dark strip too. */
.partners-strip__item--on-light { box-shadow:
inset 0 0 0 1px rgba(15, 11, 9, .06),
0 1px 0 rgba(15, 11, 9, .04),
0 8px 24px -14px rgba(15, 11, 9, .35); }
.partners-strip__item--on-dark { box-shadow:
inset 0 0 0 1px rgba(253, 249, 241, .08),
0 1px 0 rgba(0, 0, 0, .25),
0 12px 28px -14px rgba(0, 0, 0, .6); }
/* =====================================================================
GROUPS PAGE — /groups.php
===================================================================== */
.groups-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(7rem, 14vw, 12rem) 0 clamp(5rem, 10vw, 8rem);
color: var(--cream-50);
background: var(--wine-950);
}
.groups-hero__bg {
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(60rem 36rem at 18% 22%, rgba(201, 169, 97, .22), transparent 62%),
radial-gradient(60rem 36rem at 86% 78%, rgba(184, 92, 56, .16), transparent 62%),
linear-gradient(160deg, #1c0b0f 0%, #2a161a 50%, #3e2024 100%);
}
.groups-hero__bg::after {
/* faint grain — adds the editorial feel without weighing the page down */
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: .12;
mix-blend-mode: overlay;
pointer-events: none;
}
.groups-hero__inner {
position: relative;
max-width: 880px;
text-align: center;
}
.groups-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: .8rem;
font-family: var(--ff-body);
font-size: .72rem;
font-weight: 500;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold-300);
margin-bottom: 1.6rem;
}
.groups-hero__eyebrow::before,
.groups-hero__eyebrow::after {
content: ""; width: 1.6rem; height: 1px; background: var(--gold-500);
}
.groups-hero__h1 {
font-family: var(--ff-display);
font-size: clamp(2.6rem, 7vw, 5rem);
font-weight: 500;
line-height: 1.02;
letter-spacing: -.022em;
color: var(--cream-50);
margin: 0 auto 1.4rem;
max-width: 18ch;
}
.groups-hero__h1 em {
display: block;
font-style: italic;
color: var(--gold-300);
font-size: .82em;
margin-top: .2em;
}
.groups-hero__sub {
color: rgba(253, 249, 241, .85);
font-size: clamp(1.02rem, 1.5vw, 1.18rem);
line-height: 1.7;
max-width: 620px;
margin: 0 auto 2.4rem;
}
.groups-hero__ctas {
display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap;
margin-bottom: 3rem;
}
.groups-hero .btn--primary {
--bg: var(--gold-500); --fg: var(--wine-900); --bd: var(--gold-500);
}
.groups-hero .btn--primary:hover {
background: var(--gold-600); border-color: var(--gold-600); color: var(--wine-900);
}
.groups-hero .btn--ghost {
--bg: transparent; --fg: var(--cream-50); --bd: rgba(253, 249, 241, .55);
}
.groups-hero .btn--ghost:hover {
background: var(--cream-50); color: var(--wine-900); border-color: var(--cream-50);
}
.groups-hero__highlights {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.4rem 2rem;
max-width: 920px;
margin: 0 auto;
text-align: left;
border-top: 1px solid rgba(253, 249, 241, .14);
padding-top: 2.4rem;
}
.groups-hero__highlights li {
display: flex; flex-direction: column; gap: .35rem;
padding-left: 1.1rem;
border-left: 1px solid rgba(201, 169, 97, .35);
}
.groups-hero__highlights strong {
color: var(--cream-50);
font-family: var(--ff-display);
font-size: 1.2rem;
font-style: italic;
line-height: 1.2;
}
.groups-hero__highlights span {
font-size: .88rem;
color: rgba(253, 249, 241, .72);
line-height: 1.55;
}
/* Package grid */
.pkg-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 1.6rem;
margin-top: 2.2rem;
}
.pkg-card {
position: relative;
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
padding: 1.8rem 1.8rem 1.6rem;
display: flex; flex-direction: column;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
box-shadow: var(--shadow-sm);
}
.pkg-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: rgba(201, 169, 97, .45);
}
.pkg-card.is-featured {
border: 1px solid rgba(201, 169, 97, .55);
background:
linear-gradient(180deg, rgba(244, 230, 199, .35), transparent 35%),
var(--white);
box-shadow: 0 18px 38px rgba(58, 32, 36, .10);
}
.pkg-card__badge {
position: absolute;
top: -.7rem; left: 1.6rem;
background: var(--wine-800);
color: var(--cream-50);
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
padding: .35rem .8rem;
border-radius: 999px;
box-shadow: 0 6px 14px rgba(58, 32, 36, .25);
}
.pkg-card.is-featured .pkg-card__badge {
background: var(--gold-500);
color: var(--wine-900);
}
.pkg-card__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: .6rem;
}
.pkg-card__name {
font-family: var(--ff-display);
font-style: italic;
font-size: 1.5rem;
line-height: 1.15;
margin: 0;
color: var(--wine-800);
}
.pkg-card__price {
text-align: right; flex-shrink: 0;
}
.pkg-card__price-amt {
display: block;
font-family: var(--ff-display);
font-size: 1.45rem;
font-weight: 600;
color: var(--ink);
line-height: 1;
}
.pkg-card__price-per {
display: block;
margin-top: .15rem;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--ink-3);
}
.pkg-card__lead {
color: var(--ink-2);
font-size: .95rem;
line-height: 1.6;
margin: 0 0 1.2rem;
}
.pkg-card__meta {
list-style: none; padding: 0; margin: 0 0 1.2rem;
display: flex; flex-wrap: wrap; gap: .4rem .8rem;
font-size: .76rem;
color: var(--ink-3);
}
.pkg-card__meta li {
background: var(--cream-100);
padding: .3rem .65rem;
border-radius: 999px;
display: inline-flex; align-items: center; gap: .35rem;
font-family: var(--ff-body);
}
.pkg-card__courses h4 {
font-size: .68rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--gold-700);
font-family: var(--ff-body);
margin: 0 0 .6rem;
}
.pkg-card__courses ol {
list-style: none;
counter-reset: course;
padding: 0; margin: 0 0 1.4rem;
}
.pkg-card__courses > ol > li {
counter-increment: course;
position: relative;
padding: .65rem 0 .65rem 2.1rem;
font-size: .94rem;
color: var(--ink-2);
line-height: 1.5;
border-top: 1px solid var(--line-soft);
}
.pkg-card__courses > ol > li:first-child { border-top: none; }
.pkg-card__courses > ol > li::before {
content: counter(course);
position: absolute; left: 0; top: .65rem;
width: 1.5rem; height: 1.5rem;
border-radius: 50%;
background: var(--cream-100);
color: var(--gold-700);
font-family: var(--ff-display);
font-style: italic;
font-size: .85rem;
font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
/* Multi-option course: small "Choose one" badge above a clean bullet list */
.pkg-card__courses .course-choose {
display: inline-block;
font-family: var(--ff-body);
font-size: .62rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-700);
background: var(--cream-100);
padding: .15rem .55rem;
border-radius: 999px;
margin-bottom: .35rem;
}
.pkg-card__courses .course-alts {
list-style: none;
padding: 0;
margin: 0;
}
.pkg-card__courses .course-alts li {
position: relative;
padding: .25rem 0 .25rem 1rem;
border-top: none;
counter-increment: none;
font-size: .94rem;
color: var(--ink-2);
line-height: 1.45;
}
.pkg-card__courses .course-alts li::before {
content: "";
position: absolute;
left: 0; top: .65rem;
width: 5px; height: 5px;
background: var(--gold-500);
border-radius: 50%;
color: transparent;
font-family: inherit;
font-style: normal;
box-shadow: none;
display: block;
}
.pkg-card__cta { margin-top: auto; align-self: flex-start; }
/* Group inquiry form */
.group-form {
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
padding: clamp(1.6rem, 4vw, 2.6rem);
box-shadow: var(--shadow-md);
}
.group-form__hp {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0; padding: 0;
}
.form-errors-banner {
background: #fbe9e9;
color: var(--bad);
border-left: 3px solid var(--bad);
padding: .8rem 1rem;
border-radius: 4px;
margin: 0 0 1.4rem;
font-size: .92rem;
}
.group-form__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.1rem 1.2rem;
}
.group-form__field--wide { grid-column: span 2; }
.group-form__field--full { grid-column: 1 / -1; }
.group-form .field {
display: flex; flex-direction: column; gap: .35rem;
}
.group-form .field__label {
font-size: .76rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-3);
font-family: var(--ff-body);
}
.group-form .req { color: var(--bad); }
.group-form .field__input {
width: 100%;
border: 1px solid var(--ink-200);
background: var(--ivory);
padding: .85rem 1rem;
border-radius: var(--radius);
font-family: var(--ff-body);
font-size: 1rem;
color: var(--ink);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.group-form .field__input:focus {
outline: none;
border-color: var(--gold-500);
background: var(--white);
box-shadow: 0 0 0 3px rgba(201, 169, 97, .18);
}
.group-form .field__input--textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.group-form .field.is-error .field__input {
border-color: var(--bad);
background: #fff8f8;
}
.group-form__actions {
display: flex; justify-content: center;
margin-top: 1.8rem;
}
.form-success {
text-align: center;
background: #f3faf3;
border: 1px solid #d1ead1;
border-radius: var(--radius-lg);
padding: 2.6rem 2rem;
}
.form-success__icon {
display: inline-flex; width: 56px; height: 56px;
border-radius: 50%;
background: #3e7f3e; color: #fff;
align-items: center; justify-content: center;
font-size: 1.6rem; font-weight: 700;
margin-bottom: 1rem;
}
.form-success h3 {
font-family: var(--ff-display);
font-style: italic;
color: #2c5a2c;
margin: 0 0 .5rem;
}
.form-success p {
margin: 0; color: #3a6a3a;
max-width: 480px; margin-inline: auto;
}
/* FAQ list on /groups.php — reuse pattern from /faq.php but standalone */
.faq-list { display: flex; flex-direction: column; gap: .65rem; max-width: 760px; margin: 0 auto; }
.faq-list .faq-item {
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
padding: 0;
overflow: hidden;
transition: border-color .25s var(--ease);
}
.faq-list .faq-item[open] {
border-color: rgba(201, 169, 97, .45);
box-shadow: var(--shadow-sm);
}
.faq-list .faq-item summary {
list-style: none;
cursor: pointer;
padding: 1.1rem 1.3rem;
font-family: var(--ff-display);
font-size: 1.15rem;
font-style: italic;
color: var(--wine-800);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.faq-list .faq-item summary::-webkit-details-marker { display: none; }
.faq-list .faq-item summary::after {
content: "+";
font-family: var(--ff-body);
color: var(--gold-500);
font-size: 1.3rem;
font-weight: 400;
transition: transform .25s var(--ease);
}
.faq-list .faq-item[open] summary::after { transform: rotate(45deg); }
.faq-list .faq-item p {
margin: 0;
padding: 0 1.3rem 1.2rem;
color: var(--ink-2);
font-size: .96rem;
line-height: 1.7;
}
/* ── Online-ordering wizard on /groups.php ──────────────────────── */
.order-form {
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: 20px;
padding: clamp(1.6rem, 4vw, 2.8rem);
box-shadow: 0 18px 50px rgba(58, 32, 36, .08);
max-width: 980px;
margin: 0 auto;
position: relative;
}
/* Top step progress bar */
.order-progress {
list-style: none;
padding: 0;
margin: 0 0 1.8rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: .25rem;
position: relative;
background: var(--cream-50);
border-radius: 999px;
padding: .55rem .8rem;
flex-wrap: wrap;
}
.order-progress__step {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--ink-3);
font-size: .82rem;
font-weight: 500;
letter-spacing: .02em;
transition: color .25s var(--ease);
flex: 1 1 auto;
justify-content: center;
min-width: 0;
}
.order-progress__bullet {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--ink-200);
color: var(--ink-3);
font-size: .72rem;
font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.order-progress__step.is-active { color: var(--wine-800); }
.order-progress__step.is-active .order-progress__bullet {
background: var(--gold-500);
color: var(--wine-900);
border-color: var(--gold-500);
box-shadow: 0 1px 3px rgba(201, 169, 97, .35);
}
.order-progress__step.is-done .order-progress__bullet {
background: var(--wine-800);
color: var(--cream-50);
border-color: var(--wine-800);
}
.order-progress__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
.order-progress { gap: 0; padding: .4rem .35rem; }
.order-progress__step { gap: .3rem; font-size: .68rem; }
.order-progress__label { display: none; }
.order-progress__step.is-active .order-progress__label { display: inline; }
}
.order-step {
border: 0;
padding: 0 0 1.8rem;
margin: 0 0 1.8rem;
border-bottom: 1px solid var(--line-soft);
/* fieldset has default min-width:min-content — kill it so flex layouts work right */
min-width: 0;
}
.order-step:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: .8rem; }
.order-step > legend {
display: flex; align-items: center; gap: .7rem;
font-family: var(--ff-display);
font-style: italic;
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
color: var(--wine-800);
margin: 0 0 .5rem;
padding: 0;
width: 100%;
line-height: 1.15;
}
.order-step__num {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--gold-500);
color: var(--wine-900);
font-family: var(--ff-body);
font-style: normal;
font-weight: 700;
font-size: 1rem;
line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(201, 169, 97, .25);
}
.order-step__help {
margin: 0 0 1.3rem;
color: var(--ink-3);
font-size: .94rem;
line-height: 1.6;
padding-left: calc(36px + .7rem); /* indent to match the title text after the step number */
}
@media (max-width: 540px) { .order-step__help { padding-left: 0; } }
/* Placeholder shown until a package is picked */
.order-dishes-placeholder .order-step__empty {
display: flex; align-items: center; gap: .9rem;
padding: 1.4rem 1.4rem;
background: var(--cream-50);
border: 1px dashed var(--ink-200);
border-radius: 12px;
}
.order-step__empty-icon {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--ink-200);
color: var(--gold-700);
font-size: 1.2rem;
font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.order-step__empty p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
/* Guest stepper */
.order-step__guest {
display: inline-flex; align-items: center; gap: .6rem;
background: var(--cream-50);
padding: .4rem;
border-radius: 12px;
border: 1px solid var(--line-soft);
}
.order-step__guest-label {
margin-left: .6rem;
color: var(--ink-3);
font-size: .85rem;
}
.qty-num--lg {
width: 80px;
text-align: center;
font-size: 1.4rem;
font-weight: 600;
color: var(--wine-800);
border: 0;
background: transparent;
-moz-appearance: textfield;
font-family: var(--ff-body);
}
.qty-num--lg::-webkit-outer-spin-button,
.qty-num--lg::-webkit-inner-spin-button { -webkit-appearance: none; }
/* Package radio cards — 2-up on tablet/desktop, single column on phone */
.order-pkg {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: .8rem;
}
.order-pkg__choice {
position: relative;
display: flex;
align-items: flex-start;
gap: .9rem;
padding: 1.1rem 1.2rem;
background: var(--ivory);
border: 1.5px solid var(--ink-200);
border-radius: 14px;
cursor: pointer;
transition: border-color .2s var(--ease), background .2s var(--ease),
transform .15s var(--ease), box-shadow .2s var(--ease);
}
.order-pkg__choice:hover {
border-color: var(--gold-500);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(58, 32, 36, .06);
}
.order-pkg__choice.is-checked {
border-color: var(--gold-500);
background: rgba(201, 169, 97, .08);
box-shadow: 0 6px 18px rgba(201, 169, 97, .14);
}
.order-pkg__choice.is-checked::after {
content: "✓";
position: absolute;
top: .7rem; right: .7rem;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--gold-500);
color: var(--wine-900);
font-weight: 700;
font-size: .82rem;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(201, 169, 97, .35);
}
/* Custom radio mark — hide the native control, draw a gold ring */
.order-pkg__choice input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 18px; height: 18px;
flex-shrink: 0;
margin-top: .25rem;
border: 1.5px solid var(--ink-200);
border-radius: 50%;
background: var(--white);
cursor: pointer;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.order-pkg__choice input[type="radio"]:checked {
border-color: var(--gold-500);
background:
radial-gradient(circle, var(--gold-500) 0 4px, transparent 5px);
}
.order-pkg__choice input[type="radio"]:focus-visible {
outline: 2px solid var(--gold-500);
outline-offset: 2px;
}
.order-pkg__choice > div { flex: 1; min-width: 0; }
.order-pkg__head {
display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
margin-bottom: .3rem;
padding-right: 2rem; /* clear the ✓ corner badge */
}
.order-pkg__head strong {
font-family: var(--ff-display);
font-size: 1.22rem;
font-style: italic;
color: var(--wine-800);
line-height: 1.15;
}
.order-pkg__price {
background: var(--gold-500);
color: var(--wine-900);
font-family: var(--ff-body);
font-weight: 600;
font-size: .78rem;
letter-spacing: .04em;
padding: .18rem .6rem;
border-radius: 999px;
white-space: nowrap;
}
.order-pkg__sum {
margin: 0;
color: var(--ink-2);
font-size: .88rem;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.order-pkg__choice--kitchen {
background: var(--cream-50);
border-style: dashed;
grid-column: 1 / -1; /* span full width below the package cards */
}
/* Per-course dishes */
.order-course {
background: var(--cream-50);
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: 1rem 1.1rem;
margin-bottom: .8rem;
}
.order-course--extras { background: rgba(201, 169, 97, .07); }
.order-course__head {
display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem;
flex-wrap: wrap;
}
.order-course__head h4 {
margin: 0;
font-family: var(--ff-display);
font-style: italic;
font-size: 1.25rem;
color: var(--wine-800);
}
.order-course__cp {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--wine-800);
color: var(--cream-50);
font-family: var(--ff-display);
font-style: italic;
font-size: .9rem;
font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.order-course--extras .order-course__cp { background: var(--gold-500); color: var(--wine-900); }
.order-course__total {
margin-left: auto;
font-size: .82rem;
color: var(--ink-3);
background: var(--white);
border: 1px solid var(--line);
border-radius: 999px;
padding: .18rem .65rem;
font-variant-numeric: tabular-nums;
}
.order-course__total strong { color: var(--ink); font-size: 1rem; }
.order-course.is-done .order-course__total { color: #2c5a2c; border-color: #b7d8b7; background: #eef9ee; }
.order-course.is-over .order-course__total { color: var(--bad); border-color: rgba(155,44,44,.4); background: #fbe9e9; }
.order-course__hint {
margin: .55rem 0 0; font-size: .82rem; color: var(--ink-3); font-style: italic;
}
.order-course.is-done .order-course__hint { color: #2c5a2c; font-style: normal; font-weight: 500; }
.order-course.is-over .order-course__hint { color: var(--bad); font-style: normal; font-weight: 500; }
.order-course__items { display: flex; flex-direction: column; gap: .55rem; }
.order-item {
display: flex; align-items: center; gap: .9rem;
padding: .75rem .85rem;
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: 12px;
transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.order-item:hover { border-color: var(--ink-200); }
.order-item:has(.qty-num:not([value="0"])) {
border-color: var(--gold-500);
background: rgba(201, 169, 97, .05);
box-shadow: 0 2px 8px rgba(201, 169, 97, .1);
}
.order-item__img {
width: 64px; height: 64px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
background: linear-gradient(135deg, var(--cream-100), var(--cream-200));
box-shadow: 0 2px 6px rgba(58, 32, 36, .06);
}
.order-item__img--placeholder {
display: inline-flex; align-items: center; justify-content: center;
color: var(--gold-500);
font-family: var(--ff-display);
font-style: italic;
font-size: 1.8rem;
line-height: 1;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 60%),
linear-gradient(135deg, var(--cream-100), var(--gold-100));
}
.order-item__img--placeholder::before {
content: "·"; opacity: 0;
}
.order-item__img--placeholder::after {
content: "✦";
font-size: 1.05rem;
color: var(--gold-700);
opacity: .55;
}
.order-item__body { flex: 1; min-width: 0; }
.order-item__title { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.order-item__title span { font-weight: 600; color: var(--ink); }
.order-item__tag {
font-style: normal; font-size: .62rem; letter-spacing: .06em;
padding: .08rem .35rem; border-radius: 3px;
background: rgba(74,93,35,.12); color: #4a5d23;
}
.order-item__tag--V { background: rgba(74,93,35,.22); color: #38461a; }
.order-item__desc { margin: .15rem 0 0; font-size: .82rem; color: var(--ink-3); line-height: 1.45; }
.order-item__note { display: block; color: var(--ink-3); font-size: .76rem; font-style: italic; margin-top: .15rem; }
.order-item__included {
width: 28px; height: 28px; border-radius: 50%;
background: rgba(74,93,35,.15); color: #4a5d23;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
/* +/- quantity stepper (shared) */
.order-qty {
display: inline-flex; align-items: center; gap: .25rem;
background: var(--cream-50);
border: 1px solid var(--line-soft);
border-radius: 999px;
padding: .25rem;
flex-shrink: 0;
}
.qty-btn {
width: 32px; height: 32px;
border-radius: 50%;
border: 0;
background: var(--white);
color: var(--wine-800);
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
line-height: 1;
transition: background .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
-webkit-tap-highlight-color: transparent;
box-shadow: 0 1px 2px rgba(58, 32, 36, .08);
}
.qty-btn:hover { background: var(--wine-800); color: var(--cream-50); }
.qty-btn:active { transform: scale(.94); }
.qty-num {
width: 44px;
text-align: center;
border: 0;
background: transparent;
font-size: 1rem;
font-weight: 600;
color: var(--ink);
font-family: var(--ff-body);
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.qty-num::-webkit-outer-spin-button,
.qty-num::-webkit-inner-spin-button { -webkit-appearance: none; }
/* Dietary rows — 3 across on desktop, stacked on mobile */
.order-diet {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .65rem;
}
.order-diet__row {
display: flex; align-items: center; justify-content: space-between;
background: var(--cream-50);
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: .8rem 1rem;
transition: border-color .2s var(--ease);
}
.order-diet__row:has(.qty-num:not([value="0"])) {
border-color: var(--gold-500);
background: rgba(201, 169, 97, .06);
}
.order-diet__row label {
font-weight: 600;
color: var(--ink);
font-size: .92rem;
}
/* Form-wide error banner */
.order-form__error {
background: #fbe9e9; color: var(--bad);
border-left: 3px solid var(--bad);
padding: .75rem 1rem; border-radius: 6px;
margin: 0 0 1rem; font-size: .92rem;
}
/* Submit area */
.group-form__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: .8rem;
padding-top: 1.2rem;
margin-top: .4rem;
border-top: 1px solid var(--line-soft);
}
.group-form__actions .btn { align-self: center; min-width: 240px; }
.group-form__actions .btn:disabled,
.group-form__actions .btn[disabled] {
opacity: .55;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* Mobile */
@media (max-width: 720px) {
.order-form { padding: 1.2rem 1rem; border-radius: 14px; }
.order-step { padding-bottom: 1.4rem; margin-bottom: 1.4rem; }
.order-step > legend { font-size: 1.2rem; gap: .55rem; }
.order-step__num { width: 30px; height: 30px; font-size: .9rem; }
.order-pkg { grid-template-columns: 1fr; gap: .65rem; }
.order-pkg__choice { padding: .95rem 1rem; }
.order-pkg__choice--kitchen { grid-column: auto; }
.order-pkg__head strong { font-size: 1.1rem; }
.order-pkg__head { padding-right: 1.6rem; }
.order-item { gap: .55rem; padding: .55rem .65rem; flex-wrap: wrap; }
.order-item__img { width: 44px; height: 44px; }
.order-item__body { flex: 1 1 100%; order: 2; }
.order-qty { order: 3; margin-left: auto; }
.order-item__title { font-size: .92rem; }
.order-item__desc { font-size: .78rem; -webkit-line-clamp: 2; }
.order-step__guest { width: 100%; justify-content: center; }
.order-step__guest-label { display: none; }
.qty-btn { min-width: 38px; min-height: 38px; }
.qty-num--lg { font-size: 1.5rem; width: 70px; }
.order-course { padding: .85rem .9rem; }
.order-course__head h4 { font-size: 1.1rem; }
.order-course__total { font-size: .78rem; }
.group-form__actions .btn { width: 100%; min-width: 0; }
}
/* Admin tag colours for inquiry status */
.tag--new { background: rgba(201, 169, 97, .15); color: var(--gold-700); border-color: rgba(201, 169, 97, .35); }
.tag--contacted { background: rgba(56, 110, 184, .12); color: #2a5b9e; border-color: rgba(56, 110, 184, .3); }
.tag--confirmed { background: rgba(46, 125, 50, .12); color: #2c7a2c; border-color: rgba(46, 125, 50, .3); }
.tag--cancelled { background: rgba(155, 44, 44, .10); color: var(--bad); border-color: rgba(155, 44, 44, .3); }
@media (max-width: 720px) {
.group-form__grid { grid-template-columns: 1fr; }
.group-form__field--wide { grid-column: auto; }
.pkg-card { padding: 1.5rem 1.4rem 1.4rem; }
.pkg-card__name { font-size: 1.35rem; }
.groups-hero__highlights { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 1.6rem; }
.groups-hero__highlights li { padding-left: .9rem; }
}
/* =====================================================================
/groups.php — comprehensive mobile pass.
Fixes: pkg-grid overflow on iPhone SE, order-form padding crammed,
groups-hero clipping on small screens, order-progress overflow,
long-package-name overflow, pkg-card CTA touch target, order-item
layout on narrow screens, course total badge wrapping.
===================================================================== */
@media (max-width: 720px) {
/* Container tightens so the form has more room to breathe. */
#inquiry .container, #group-faq .container { padding-left: .9rem; padding-right: .9rem; }
/* Package cards in the discovery section — single column, no overflow risk. */
.pkg-grid {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.5rem;
}
.pkg-card { padding: 1.25rem 1.15rem 1.25rem; border-radius: 14px; }
.pkg-card__name { font-size: 1.25rem; line-height: 1.2; }
.pkg-card__head { flex-wrap: wrap; gap: .5rem; }
.pkg-card__price { flex-shrink: 0; }
.pkg-card__cta { width: 100%; justify-content: center; }
.pkg-card__lead { font-size: .92rem; line-height: 1.55; }
.pkg-card__meta { gap: .35rem .55rem; font-size: .72rem; }
/* Order form (booking wizard) — tighter, no fixed widths that overflow. */
.order-form {
padding: 1.1rem .9rem 1.4rem;
border-radius: 14px;
max-width: 100%;
}
.order-progress {
padding: .35rem .4rem;
gap: .15rem;
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.order-progress::-webkit-scrollbar { display: none; }
.order-progress__step { flex: 0 0 auto; padding: 0 .35rem; }
.order-progress__bullet { width: 20px; height: 20px; font-size: .66rem; }
/* Radio package picker — single column, ✓ badge stays clear */
.order-pkg { grid-template-columns: 1fr !important; gap: .55rem; }
.order-pkg__choice {
padding: .85rem .95rem;
border-radius: 12px;
}
.order-pkg__choice.is-checked::after { width: 18px; height: 18px; font-size: .72rem; }
.order-pkg__choice--kitchen { grid-column: auto; }
.order-pkg__head { padding-right: 1.4rem; gap: .4rem; }
.order-pkg__head strong { font-size: 1.05rem; line-height: 1.2; }
.order-pkg__price { font-size: .72rem; padding: .15rem .55rem; }
.order-pkg__sum { font-size: .82rem; line-height: 1.5; }
/* Each course block in the dish picker */
.order-course { padding: .85rem .9rem; border-radius: 10px; }
.order-course__head { gap: .5rem; flex-wrap: wrap; }
.order-course__head h4 { font-size: 1.05rem; flex: 1 1 auto; min-width: 0; }
.order-course__cp { width: 26px; height: 26px; font-size: .82rem; }
.order-course__total {
margin-left: 0;
margin-top: .15rem;
flex: 1 1 100%;
text-align: center;
font-size: .8rem;
}
/* Individual dish row — image | (title + qty) stacked */
.order-item {
gap: .55rem;
padding: .55rem .65rem;
align-items: center;
flex-wrap: wrap;
border-radius: 10px;
}
.order-item__img { width: 48px; height: 48px; border-radius: 8px; }
.order-item__body { flex: 1 1 calc(100% - 60px); min-width: 0; }
.order-item__title { gap: .35rem; }
.order-item__title span { font-size: .9rem; line-height: 1.3; }
.order-item__desc { font-size: .76rem; -webkit-line-clamp: 2; }
.order-qty {
order: 3;
flex: 0 0 auto;
margin-left: auto;
}
.order-item__included { width: 26px; height: 26px; }
/* Dietary count rows — single column, full-width */
.order-diet { grid-template-columns: 1fr; gap: .5rem; }
.order-diet__row { padding: .7rem .85rem; }
/* Step legends + help text tighten */
.order-step { padding: 0 0 1.4rem; margin: 0 0 1.4rem; }
.order-step > legend { font-size: 1.1rem; gap: .55rem; flex-wrap: wrap; }
.order-step__num { width: 28px; height: 28px; font-size: .82rem; }
.order-step__help { padding-left: 0; font-size: .88rem; margin: 0 0 1rem; }
/* Guest stepper centers and fills width */
.order-step__guest { width: 100%; justify-content: center; padding: .35rem; }
.qty-num--lg { font-size: 1.35rem; width: 64px; }
/* Quantity buttons — Apple HIG 44pt minimum */
.qty-btn { min-width: 40px; min-height: 40px; font-size: 1.05rem; }
/* Step-3 placeholder for "no package picked yet" */
.order-dishes-placeholder .order-step__empty { flex-wrap: wrap; padding: 1.1rem 1rem; gap: .65rem; }
.order-step__empty-icon { width: 34px; height: 34px; font-size: 1.05rem; }
.order-step__empty p { flex: 1 1 100%; font-size: .88rem; }
/* Submit button area */
.group-form__actions { flex-direction: column; align-items: stretch; gap: .55rem; padding-top: 1rem; }
.group-form__actions .btn { width: 100%; min-width: 0; min-height: 50px; font-size: .95rem; }
/* /groups.php hero — smaller copy, less padding, no horizontal scroll */
.groups-hero { padding: clamp(4.5rem, 14vw, 7rem) 0 clamp(3rem, 8vw, 4.5rem); }
.groups-hero__h1 { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; max-width: 100%; }
.groups-hero__h1 em { font-size: .85em; }
.groups-hero__sub { font-size: 1rem; line-height: 1.6; }
.groups-hero__eyebrow { font-size: .62rem; letter-spacing: .22em; margin-bottom: 1rem; gap: .55rem; }
.groups-hero__ctas { flex-direction: column; gap: .55rem; width: 100%; }
.groups-hero__ctas .btn { width: 100%; justify-content: center; }
.groups-hero__highlights strong { font-size: 1.05rem; }
/* FAQ items don't overflow on narrow screens */
#group-faq .faq-list .faq-item summary { padding: .9rem 1rem; font-size: 1rem; gap: .65rem; }
#group-faq .faq-list .faq-item p { padding: 0 1rem 1rem; font-size: .9rem; }
}
/* iPhone SE-class viewports (≤375px) — extra tightening */
@media (max-width: 380px) {
.order-form { padding: 1rem .75rem 1.2rem; border-radius: 12px; }
.order-pkg__choice { padding: .75rem .85rem; }
.order-pkg__head strong { font-size: 1rem; }
.order-step > legend { font-size: 1.05rem; }
.qty-btn { min-width: 36px; min-height: 36px; }
.qty-num { width: 38px; font-size: .92rem; }
.order-item__img { width: 42px; height: 42px; }
.groups-hero__h1 { font-size: 1.85rem; }
.pkg-card { padding: 1.1rem 1rem; }
}
/* =====================================================================
PREMIUM HERO + HEADER POLISH
Layered cinematic vignette, subtle film grain, refined nav typography,
sharper micro-interactions. Builds on the existing .hero rules above
without breaking the layout.
===================================================================== */
/* Soft film-grain overlay on every media-backed hero. Lifts the image
into editorial territory without darkening the photograph. */
.hero--has-media::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: .14;
}
/* A cinematic warm-graded vignette on the image, applied via the existing
::after overlay — keeps the centre bright and corners atmospheric. */
.hero--has-media .hero__media::after {
background:
radial-gradient(ellipse 70% 60% at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.6) 100%),
linear-gradient(to bottom, rgba(15, 8, 4, .15) 0%, rgba(15, 8, 4, .35) 55%, rgba(15, 8, 4, .82) 100%),
radial-gradient(ellipse at top, rgba(201, 169, 97, .14), transparent 65%);
}
/* Slow Ken-Burns drift — gentler than the original snap-zoom */
.hero__media img,
.hero__media video {
animation: heroDrift 38s ease-out forwards;
}
@keyframes heroDrift {
from { transform: scale(1.08) translate3d(-1%, 1%, 0); }
to { transform: scale(1) translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero__media img, .hero__media video { animation: none; }
}
/* Refined hero typography — larger leading display swash + serif-italic
subhead, a hairline gold divider above the headline. */
.hero__eyebrow {
position: relative;
padding: 0 0 .85rem;
margin-bottom: 1.6rem;
}
.hero__eyebrow::after {
content: "";
position: absolute;
left: 50%; transform: translateX(-50%);
bottom: 0;
width: 64px; height: 1px;
background: linear-gradient(to right, transparent, var(--gold-500), transparent);
}
.hero h1, .hero__h1 {
text-wrap: balance;
}
.hero__h1::first-letter {
/* tiny editorial flourish — slightly oversized opening glyph */
font-size: 1.06em;
}
/* Refined hero CTAs — gold-edged primary on dark hero */
.hero--has-media .hero__ctas .btn--primary,
.hero--text-light .hero__ctas .btn--primary {
--bg: var(--gold-500); --fg: var(--wine-900); --bd: var(--gold-500);
box-shadow: 0 14px 30px rgba(201, 169, 97, .22);
}
.hero--has-media .hero__ctas .btn--primary:hover,
.hero--text-light .hero__ctas .btn--primary:hover {
background: var(--gold-600); border-color: var(--gold-600); color: var(--wine-900);
transform: translateY(-1px);
box-shadow: 0 18px 36px rgba(201, 169, 97, .3);
}
/* Hero — promote the rule into a marker glyph */
.hero__rule {
position: relative;
margin-top: 3.4rem;
}
.hero__rule::before,
.hero__rule::after {
content: "";
position: absolute;
left: 50%; transform: translateX(-50%);
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold-500);
opacity: .85;
}
.hero__rule::before { top: -6px; }
.hero__rule::after { bottom: -6px; }
/* Header polish — backdrop blur + softer scrolled state, nav-link gold
underline on hover. */
.site-header {
-webkit-backdrop-filter: blur(6px) saturate(110%);
backdrop-filter: blur(6px) saturate(110%);
}
.site-header.is-scrolled {
box-shadow: 0 1px 0 rgba(24, 21, 19, .04), 0 14px 38px rgba(24, 21, 19, .08);
}
.primary-nav__list a {
position: relative;
padding-bottom: 2px;
transition: color .25s var(--ease);
}
.primary-nav__list a::after {
content: "";
position: absolute;
left: 12%; right: 12%;
bottom: -3px;
height: 1px;
background: var(--gold-500);
transform: scaleX(0);
transform-origin: center;
transition: transform .35s var(--ease);
}
.primary-nav__list a:hover::after,
.primary-nav__list a.is-active::after { transform: scaleX(1); }
.primary-nav__list a:hover { color: var(--gold-700); }
.site-header--text-light .primary-nav__list a:hover { color: var(--cream-50); }
.site-header--text-light .primary-nav__list a::after { background: var(--gold-300); }
/* Brand mark — gentle hover lift */
.brand { transition: transform .35s var(--ease); }
.brand:hover { transform: translateY(-1px); }
/* Refined nav CTA on dark headers — outline-gold with smooth fill */
.nav-cta {
transition: background .25s var(--ease), color .25s var(--ease),
border-color .25s var(--ease), transform .25s var(--ease),
box-shadow .25s var(--ease);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(58, 32, 36, .15); }
@media (max-width: 720px) {
.hero__rule { margin-top: 2.4rem; }
.groups-hero { padding: clamp(5.5rem, 16vw, 9rem) 0 clamp(3.5rem, 9vw, 5.5rem); }
}
/* =====================================================================
HERO — editorial cinematic frame (premium polish, pass 2)
===================================================================== */
/* Inset gold hairline frame on media hero — like a printed magazine
spread. Sits inside the section, behind text, always visible. */
.hero--has-media .hero__inner::before {
content: "";
position: absolute;
inset: clamp(2rem, 6vw, 3.6rem) clamp(.6rem, 3vw, 1.5rem);
border: 1px solid rgba(201, 169, 97, .28);
pointer-events: none;
z-index: -1;
border-radius: 2px;
transition: opacity .8s var(--ease);
}
@media (max-width: 720px) {
.hero--has-media .hero__inner::before { display: none; }
}
/* Corner accents — top-right + bottom-left for the editorial feel. */
.hero--has-media .hero__inner::after {
content: "";
position: absolute;
top: clamp(2rem, 6vw, 3.6rem);
right: clamp(.6rem, 3vw, 1.5rem);
width: 28px; height: 28px;
border-top: 1px solid var(--gold-500);
border-right: 1px solid var(--gold-500);
pointer-events: none;
}
@media (max-width: 720px) {
.hero--has-media .hero__inner::after { display: none; }
}
/* A cascading entrance for the hero block — only on the home media hero.
Honours prefers-reduced-motion. */
.hero--has-media .hero__eyebrow,
.hero--has-media .hero__h1,
.hero--has-media .hero__subtitle,
.hero--has-media .hero__ctas,
.hero--has-media .hero__rule {
opacity: 0;
transform: translateY(14px);
animation: heroEntrance .9s var(--ease) forwards;
}
.hero--has-media .hero__eyebrow { animation-delay: .15s; }
.hero--has-media .hero__h1 { animation-delay: .35s; }
.hero--has-media .hero__subtitle { animation-delay: .55s; }
.hero--has-media .hero__ctas { animation-delay: .75s; }
.hero--has-media .hero__rule { animation-delay: .95s; }
@keyframes heroEntrance {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero--has-media .hero__eyebrow,
.hero--has-media .hero__h1,
.hero--has-media .hero__subtitle,
.hero--has-media .hero__ctas,
.hero--has-media .hero__rule { opacity: 1; transform: none; animation: none; }
}
/* Refined typographic rhythm on the headline */
.hero--has-media .hero__h1 {
text-wrap: balance;
word-spacing: .04em;
text-shadow: 0 2px 28px rgba(0,0,0,.35);
}
/* Sharper scrolled-state header — finer bottom border, denser padding,
smaller logo. Builds on the existing .is-scrolled rules. */
.site-header {
transition: padding .35s var(--ease), background .35s var(--ease),
box-shadow .35s var(--ease), border-color .35s var(--ease);
border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
border-bottom-color: rgba(24, 21, 19, .06);
}
.site-header__inner {
transition: padding .35s var(--ease);
}
.site-header.is-scrolled .site-header__inner {
padding-top: .55rem;
padding-bottom: .55rem;
}
.brand__logo,
.brand__wordmark { transition: transform .35s var(--ease), opacity .35s var(--ease); }
.site-header.is-scrolled .brand__wordmark { font-size: 1.2rem; }
/* Editorial caption strip — decorative line below the hero CTAs.
Uses ::before pseudo so it doesn't require HTML edits, sits between
the CTAs and the rule. */
.hero--has-media .hero__inner > .hero__rule::before {
/* Already styled — but reinforce the entrance gap visually. */
}
/* =====================================================================
EDITORIAL REDESIGN — inspired by the-italian.at
Full-bleed hero with mega all-caps headline overlay, generous section
rhythm, conversational taglines, dark editorial footer rhythm, and a
horizontal-scroll menu-category strip on the home page.
Keeps the wine + gold + cream palette and the Cormorant / Inter / Mirza
font stack — only the LAYOUT changes.
Selectors here win because they appear last; nothing above is removed.
===================================================================== */
/* ── Hero editorial ──────────────────────────────────────────────── */
.hero--editorial.hero {
/* Always full-bleed and edge-to-edge — the image isn't a backdrop,
it IS the section. Min-height makes it feel like a curtain rather
than a banner. */
min-height: 92vh;
padding: clamp(8rem, 16vw, 13rem) 0 clamp(6rem, 12vw, 10rem);
display: flex;
align-items: center;
text-align: center;
background: var(--ink-900);
color: var(--cream-50);
}
.hero--editorial.hero::before { display: none; } /* drop the radial glows */
.hero--editorial.hero--has-media .hero__media::after {
/* Darker, more cinematic overlay — pulls focus to the type */
background:
linear-gradient(to bottom, rgba(15,11,9,.42) 0%, rgba(15,11,9,.58) 55%, rgba(15,11,9,.86) 100%),
radial-gradient(ellipse at top, rgba(201,169,97,.10), transparent 65%);
}
.hero--editorial .hero__inner {
max-width: 1100px;
padding: 0 1.4rem;
}
.hero--editorial .hero__copy { max-width: none; text-align: center; }
.hero--editorial .hero__eyebrow {
font-family: var(--ff-body);
font-size: .72rem;
font-weight: 500;
letter-spacing: .42em;
text-transform: uppercase;
color: var(--gold-300);
display: inline-flex;
align-items: center;
gap: 1rem;
margin-bottom: 2.2rem;
}
.hero--editorial .hero__eyebrow::before,
.hero--editorial .hero__eyebrow::after {
content: "";
width: 2.2rem;
height: 1px;
background: rgba(224, 200, 132, .55);
}
.hero--editorial .hero__h1 {
/* The signature move: HUGE all-caps Cormorant. Italic stays in our
brand voice, but the tracking pulls it taut. */
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(2.6rem, 9.2vw, 7.2rem);
line-height: .95;
letter-spacing: -.012em;
color: var(--cream-50);
text-shadow: 0 2px 28px rgba(0,0,0,.45);
margin: 0 auto 2rem;
max-width: 14em;
}
.hero--editorial .hero__subtitle {
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.7;
color: rgba(253, 249, 241, .92);
max-width: 640px;
margin: 0 auto 2.6rem;
}
.hero--editorial .hero__ctas { gap: 1rem; }
.hero--editorial .hero__rule {
margin-top: 3.5rem;
height: 44px;
background: linear-gradient(to bottom, transparent, rgba(224, 200, 132, .65), transparent);
}
/* Optional vertical "scroll" cue at the bottom of the hero */
.hero--editorial::after {
content: "";
position: absolute;
left: 50%;
bottom: 2.2rem;
width: 1px;
height: 56px;
background: linear-gradient(to bottom, rgba(253,249,241,.15), rgba(224,200,132,.7));
transform: translateX(-50%);
z-index: 2;
}
@media (max-width: 720px) {
.hero--editorial::after { display: none; }
.hero--editorial.hero { min-height: 82vh; }
.hero--editorial .hero__eyebrow { letter-spacing: .34em; gap: .65rem; }
.hero--editorial .hero__eyebrow::before,
.hero--editorial .hero__eyebrow::after { width: 1.2rem; }
.hero--editorial .hero__h1 { font-size: clamp(2.2rem, 11vw, 3.8rem); }
}
/* ── Editorial section head ─────────────────────────────────────── */
.section-head--editorial { max-width: 720px; margin: 0 auto 4.5rem; text-align: center; }
.section-head--editorial .eyebrow,
.section-head--editorial .section__eyebrow {
justify-content: center;
font-size: .7rem;
letter-spacing: .42em;
color: var(--gold-700);
margin-bottom: 1.4rem;
}
.section-head--editorial h2 {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(2rem, 4.6vw, 3.4rem);
line-height: 1.02;
letter-spacing: -.005em;
margin: 0 auto 1.2rem;
max-width: 16em;
}
.section-head--editorial .lead {
font-family: var(--ff-display);
font-style: italic;
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
line-height: 1.6;
color: var(--ink-2);
max-width: 560px;
margin: 0 auto;
}
/* ── Split-CTA editorial block ──────────────────────────────────── */
/* A standalone centered moment between sections — the equivalent of the
"REAL TASTE. REAL MOMENTS." block on the-italian.at. Sits on a tinted
strip so the page breathes between dense areas. */
.split-cta {
padding: clamp(5rem, 10vw, 8rem) 0;
background: var(--wine-900);
color: var(--cream-100);
text-align: center;
position: relative;
overflow: hidden;
}
.split-cta::before {
/* a single decorative gold line at the top, the kind of editorial
restraint you see on premium hospitality sites */
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 64px;
height: 1px;
background: var(--gold-500);
}
.split-cta .container { max-width: 760px; }
.split-cta__eyebrow {
display: inline-flex; align-items: center; gap: 1rem;
font-family: var(--ff-body);
font-size: .7rem;
font-weight: 500;
letter-spacing: .42em;
text-transform: uppercase;
color: var(--gold-300);
margin-bottom: 1.6rem;
}
.split-cta__eyebrow::before,
.split-cta__eyebrow::after {
content: ""; width: 2rem; height: 1px; background: rgba(224,200,132,.55);
}
.split-cta h2 {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(2rem, 5vw, 3.6rem);
line-height: 1.02;
letter-spacing: -.01em;
color: var(--cream-50);
margin: 0 auto 1.4rem;
max-width: 16em;
}
.split-cta p {
font-family: var(--ff-display);
font-style: italic;
font-size: clamp(1.05rem, 1.5vw, 1.22rem);
line-height: 1.7;
color: rgba(245, 230, 211, .88);
max-width: 560px;
margin: 0 auto 2.2rem;
}
.split-cta__link {
display: inline-block;
font-family: var(--ff-body);
font-size: .78rem;
font-weight: 500;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--gold-300);
padding-bottom: .35rem;
border-bottom: 1px solid rgba(224, 200, 132, .55);
transition: color .25s var(--ease), border-color .25s var(--ease);
}
.split-cta__link:hover { color: var(--cream-50); border-color: var(--cream-50); }
@media (max-width: 720px) {
.split-cta__eyebrow { letter-spacing: .3em; gap: .6rem; }
.split-cta__eyebrow::before, .split-cta__eyebrow::after { width: 1rem; }
}
/* ── Menu categories carousel ───────────────────────────────────── */
/* Horizontally scrolling row of category tiles, edge-to-edge on mobile.
Each tile is a square photo with the category name + tagline overlaid
on a darkened lower-half gradient (so the type stays legible on any
image). Tiles are equal-width on desktop, snap-scrolling on mobile. */
.menu-cats {
padding: clamp(5rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem);
background: var(--ivory);
}
.menu-cats__strip {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 1fr);
gap: 1.2rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 1.4rem;
padding: 0 1.4rem 1.4rem;
margin: 0 calc(-1 * var(--container-pad, 1.4rem));
scrollbar-width: thin;
scrollbar-color: var(--ink-200) transparent;
}
.menu-cats__strip::-webkit-scrollbar { height: 8px; }
.menu-cats__strip::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 999px; }
@media (min-width: 980px) {
.menu-cats__strip {
grid-auto-columns: 1fr;
overflow-x: visible;
scroll-snap-type: none;
margin: 0;
padding: 0;
}
}
.menu-cat {
scroll-snap-align: start;
position: relative;
aspect-ratio: 4 / 5;
border-radius: 6px;
overflow: hidden;
background: var(--wine-900);
color: var(--cream-50);
text-decoration: none;
isolation: isolate;
transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.menu-cat:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(15, 11, 9, .55); }
.menu-cat__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: -2;
transition: transform 1.2s var(--ease);
}
.menu-cat:hover .menu-cat__img { transform: scale(1.06); }
.menu-cat::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(15, 11, 9, .85) 0%, rgba(15, 11, 9, .35) 45%, rgba(15, 11, 9, 0) 75%);
z-index: -1;
}
.menu-cat__body {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 1.6rem 1.5rem 1.5rem;
}
.menu-cat__eyebrow {
display: inline-block;
font-family: var(--ff-body);
font-size: .65rem;
font-weight: 500;
letter-spacing: .38em;
text-transform: uppercase;
color: var(--gold-300);
margin-bottom: .55rem;
}
.menu-cat__name {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(1.5rem, 2.2vw, 2rem);
line-height: 1;
letter-spacing: -.005em;
margin: 0 0 .35rem;
color: var(--cream-50);
}
.menu-cat__tagline {
font-family: var(--ff-display);
font-style: italic;
font-size: 1rem;
line-height: 1.4;
color: rgba(253, 249, 241, .85);
margin: 0;
}
.menu-cat__arrow {
position: absolute;
top: 1.2rem; right: 1.2rem;
width: 36px; height: 36px;
border-radius: 999px;
border: 1px solid rgba(253, 249, 241, .35);
display: inline-flex; align-items: center; justify-content: center;
color: var(--cream-50);
transition: background .25s var(--ease), border-color .25s var(--ease), transform .35s var(--ease);
}
.menu-cat:hover .menu-cat__arrow {
background: var(--gold-500);
border-color: var(--gold-500);
color: var(--ink-900);
transform: translate(2px, -2px);
}
/* ── Section rhythm bump on home ────────────────────────────────── */
/* Slightly more generous vertical padding between the editorial blocks
on the home page, matching the-italian.at's breathing room. */
.page-home .section { padding-top: clamp(6rem, 11vw, 9rem); padding-bottom: clamp(6rem, 11vw, 9rem); }
.page-home .split-cta + .section { padding-top: clamp(5rem, 9vw, 7rem); }
/* =====================================================================
SEASONAL MENUS — Spargel, game, truffle, pumpkin, etc.
When a menu_categories row has seasonal=1 and is inside its window,
the home page surfaces a banner directly under the hero AND the menu
page renders the category with an optional hero image + ribbon.
===================================================================== */
/* ── Home-page banner ───────────────────────────────────────────── */
.seasonal-banner {
position: relative;
isolation: isolate;
padding: clamp(4.5rem, 9vw, 7rem) 0;
color: var(--cream-50);
background: linear-gradient(135deg, var(--wine-800), var(--wine-900) 70%);
overflow: hidden;
}
.seasonal-banner--has-image { background: var(--ink-900); }
.seasonal-banner__media {
position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.seasonal-banner__media img {
width: 100%; height: 100%; object-fit: cover; object-position: center;
transform: scale(1.04);
animation: seasonalZoom 22s ease-out forwards;
}
@keyframes seasonalZoom { to { transform: scale(1); } }
.seasonal-banner--has-image::after {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to right, rgba(15, 11, 9, .82) 0%, rgba(15, 11, 9, .58) 45%, rgba(15, 11, 9, .35) 100%),
radial-gradient(ellipse at top right, rgba(201, 169, 97, .12), transparent 60%);
}
@media (max-width: 720px) {
.seasonal-banner--has-image::after {
background:
linear-gradient(to bottom, rgba(15, 11, 9, .55) 0%, rgba(15, 11, 9, .82) 80%);
}
}
.seasonal-banner__inner { max-width: 760px; }
.seasonal-banner__ribbon {
display: inline-flex; align-items: center; gap: .65rem;
padding: .42rem .9rem;
font-family: var(--ff-body);
font-size: .72rem;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--ink-900);
background: var(--gold-300);
border-radius: 999px;
margin-bottom: 1.3rem;
}
.seasonal-banner__dot {
width: .55rem; height: .55rem; border-radius: 999px;
background: var(--wine-800);
box-shadow: 0 0 0 3px rgba(253, 249, 241, .55);
animation: seasonalPulse 2.4s ease-in-out infinite;
}
@keyframes seasonalPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.18); opacity: .7; }
}
.seasonal-banner__sep { opacity: .55; margin: 0 .25rem; }
.seasonal-banner__title {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(2rem, 5vw, 3.4rem);
line-height: 1.02;
letter-spacing: -.01em;
color: var(--cream-50);
margin: 0 0 1.1rem;
}
.seasonal-banner__intro {
font-family: var(--ff-display);
font-style: italic;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.6;
color: rgba(253, 249, 241, .9);
max-width: 560px;
margin: 0 0 2rem;
}
.seasonal-banner__cta {
display: inline-block;
padding: .85rem 1.5rem;
font-family: var(--ff-body);
font-size: .82rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-900);
background: var(--gold-300);
border: 1px solid var(--gold-300);
border-radius: 4px;
transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.seasonal-banner__cta:hover {
background: var(--cream-50);
border-color: var(--cream-50);
color: var(--wine-900);
transform: translateY(-2px);
}
/* ── Menu page — seasonal category treatment ───────────────────── */
.menu-category--seasonal {
position: relative;
padding: 2.5rem 0 1rem;
margin-top: 1rem;
}
.menu-category__hero {
position: relative;
margin: 0 0 2rem;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 16 / 7;
background: var(--ink-200);
}
.menu-category__hero img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.menu-category__hero::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(15, 11, 9, .35) 0%, transparent 55%);
}
@media (max-width: 720px) {
.menu-category__hero { aspect-ratio: 4 / 3; }
}
.menu-category__ribbon {
display: inline-flex; align-items: center; gap: .65rem;
padding: .35rem .8rem;
font-family: var(--ff-body);
font-size: .68rem;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--ink-900);
background: var(--gold-300);
border-radius: 999px;
margin-bottom: 1rem;
}
.menu-category__ribbon-dot {
width: .5rem; height: .5rem; border-radius: 999px;
background: var(--wine-800);
box-shadow: 0 0 0 3px rgba(253, 249, 241, .55);
animation: seasonalPulse 2.4s ease-in-out infinite;
}
.menu-category__ribbon-sep { opacity: .55; }
.menu-category__ribbon-end { font-weight: 500; letter-spacing: .14em; }