/* ============================================================================ SAINT SUSHI — Design system Layout aesthetic from bokman.co.uk (full-bleed photography, uppercase nav, pill outline buttons, generous whitespace, colour-panel sections), recoloured to the Saint Sushi brand kit (saint-sushi-colors.md): coral #F76A68 primary brand — colour panels (menu, footer), CTAs, splash gold #A08400 accent — eyebrows, feature tags, "today" hours charcoal #333333 headings · slate #666666 body · muted #999999 white #FFFFFF background · panel #F5F5F5 · pale #EAEAEA Typeface: Inter (free stand-in for Bokman's paid Neue Haas Grotesk). ========================================================================== */ /* ---- Tokens ---------------------------------------------------------------*/ :root { /* Saint Sushi brand kit — coral primary, gold accent, charcoal/slate on white */ --accent: #F76A68; /* coral — primary brand */ --accent-deep: #E2504E; /* deeper coral for hover states */ --gold: #A08400; /* gold — accent (labels, prices, times) */ --gold-deep: #7D6800; --gold-bright: #ECD48E; /* pale champagne gold — intro hero */ --paper: #FFFFFF; /* page background */ --paper-2: #F5F5F5; /* panel gray */ --pale: #EAEAEA; /* subtle bars / dividers */ --cream: #F6F1E4; /* warm cream — soft fills */ --ink: #333333; /* charcoal — headings */ --ink-soft: #666666; /* slate — body copy */ --muted: #999999; /* muted gray — placeholders/captions */ --on-accent: #FFFFFF; --line: rgba(51, 51, 51, 0.12); --line-light: rgba(255, 255, 255, 0.4); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --maxw: 1360px; --gut: clamp(20px, 5vw, 72px); --nav-h: 74px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---- Reset ----------------------------------------------------------------*/ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--paper); color: var(--ink); font-size: 17px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; /* clip (not hidden) so position: sticky keeps working */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } [hidden] { display: none !important; } ::selection { background: var(--accent); color: #fff; } /* ---- Typography -----------------------------------------------------------*/ h1, h2, h3, h4 { font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; } .display { font-size: clamp(2.6rem, 8vw, 6.4rem); text-transform: uppercase; letter-spacing: -0.03em; } .eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 600; color: var(--gold); } .eyebrow.on-accent { color: rgba(255,255,255,0.85); } .lede { font-size: clamp(1.15rem, 2.2vw, 1.7rem); line-height: 1.4; letter-spacing: -0.01em; } .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } section { position: relative; } .section-pad { padding-block: clamp(48px, 6.5vw, 104px); } /* language visibility helpers (set on ) */ [data-l="fr"], [data-l="en"] { display: none; } html[data-lang="fr"] [data-l="fr"] { display: revert; } html[data-lang="en"] [data-l="en"] { display: revert; } /* inline variants keep flow */ .lang-inline[data-l] { display: none; } html[data-lang="fr"] .lang-inline[data-l="fr"] { display: inline; } html[data-lang="en"] .lang-inline[data-l="en"] { display: inline; } /* ---- Buttons --------------------------------------------------------------*/ /* squared, wide-tracked buttons — a more premium CTA than pills */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.7em; padding: 1.05em 2.15em; border-radius: 1px; border: 1px solid currentColor; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; background: transparent; color: var(--ink); transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); white-space: nowrap; -webkit-tap-highlight-color: transparent; } /* nudge text right to visually offset the trailing letter-spacing */ .btn > * { transform: translateX(0.1em); } .btn--accent { color: #fff; background: var(--accent); border-color: var(--accent); } .btn--on-accent { color: #fff; border-color: rgba(255,255,255,.75); } .btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--lg { padding: 1.2em 2.7em; font-size: 0.76rem; } /* keyboard focus ring only — taps/clicks never leave a stuck highlight */ .btn:focus { outline: none; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* hover effects only on real pointer devices, so a tap doesn't stick */ @media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); color:#fff; } .btn--on-accent:hover { background: #fff; color: var(--ink); border-color:#fff; } .btn--solid:hover { background: transparent; color: var(--ink); } } /* Sticky-bar CTAs (Reserve / Order) — a light orbits the outline. Applies on both mobile and desktop (both use .mobilebar__btn). The moving glow defines the edge, so the static border is dropped; an inset coral mask keeps the interior the same colour as the bar. */ .mobilebar__btn { border-color: transparent; overflow: hidden; } .mobilebar__btn > * { position: relative; z-index: 2; } /* labels above the animation */ .mobilebar__btn::before { content: ""; position: absolute; inset: -60%; z-index: 0; background: conic-gradient(from 0deg, transparent 0 72%, #fff 84%, transparent 92%); animation: mb-orbit 3s linear infinite; } .mobilebar__btn::after { content: ""; position: absolute; inset: 2px; z-index: 1; background: var(--accent); border-radius: 1px; /* interior = coral bar colour */ } @keyframes mb-orbit { to { transform: rotate(1turn); } } @media (hover: hover) and (pointer: fine) { /* neutralise the generic .btn hover (white fill/dark text) so the orbit stays the feedback; speed the light up on hover */ .mobilebar__btn:hover { background: transparent; color: #fff; border-color: transparent; } .mobilebar__btn:hover::before { animation-duration: 1.2s; } } @media (prefers-reduced-motion: reduce) { /* no motion → fall back to the original static ghost outline */ .mobilebar__btn { border-color: rgba(255,255,255,.75); } .mobilebar__btn::before, .mobilebar__btn::after { display: none; } } /* ============================================================================ NAV ========================================================================== */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gut); color: var(--gold-bright); /* transparent bar — sits directly over the page/hero */ background: transparent; transition: color .4s var(--ease); } /* nav stays fully transparent everywhere — the controls carry their own shadow so they read on both the dark hero and white content below */ .nav.is-stuck { background: transparent; box-shadow: none; } .nav__logo { display: flex; align-items: center; gap: .6rem; height: 100%; z-index: 2; -webkit-tap-highlight-color: transparent; } /* emblem masked to the same pale gold as the main page */ .nav__logo-mark { display: block; width: 54px; height: 54px; background-color: var(--gold-bright); -webkit-mask: url("../images/logo.png") center / contain no-repeat; mask: url("../images/logo.png") center / contain no-repeat; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); } .nav__logo-word { font-family: "Montserrat", "Inter", system-ui, sans-serif; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.22em; font-size: 2.3rem; line-height: 1; } .nav__logo-text { font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.9rem; } /* ---- left slide-in drawer (all breakpoints) --------------------------- */ .nav__links { position: fixed; top: 0; left: 0; bottom: 0; width: min(264px, 82vw); z-index: 100; /* burger (102) stays clickable above it */ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(22px, 4vh, 40px); padding: calc(var(--nav-h) + 20px) clamp(28px, 5vw, 48px) 40px; color: var(--gold-bright); background: linear-gradient(120deg, rgba(16,16,16,0.97) 0%, rgba(34,21,20,0.97) 60%, rgba(48,24,23,0.97) 100%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-right: 1px solid rgba(236,212,142,.22); box-shadow: 26px 0 70px rgba(0,0,0,.5); transform: translateX(-100%); visibility: hidden; transition: transform .45s var(--ease), visibility .45s var(--ease); } .nav__links.is-open { transform: translateX(0); visibility: visible; } .nav__links { overflow: hidden; } /* drawer itself never scrolls */ /* lock the page behind the open drawer */ html.nav-open, html.nav-open body { overflow: hidden; } .nav__link { position: relative; font-family: "Montserrat", "Inter", sans-serif; /* match the main page */ font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; line-height: 1.1; color: var(--gold-bright); display: flex; flex-direction: column; align-items: flex-start; -webkit-tap-highlight-color: transparent; } .nav__link .sub { font-size: 0.62rem; letter-spacing: 0.1em; color: var(--gold-bright); opacity: .65; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1.5px; width: 0; background: var(--gold-bright); transition: width .35s var(--ease); } .nav__link:hover::after { width: 100%; } /* ---- location switcher (top of the drawer) ---------------------------- */ .nav__head { width: 100%; display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid rgba(236,212,142,.2); } .nav__loc { display: flex; flex-direction: column; gap: 4px; width: 100%; -webkit-tap-highlight-color: transparent; } .nav__loc-eyebrow { font-family: "Montserrat", "Inter", sans-serif; font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(236,212,142,.6); } .nav__loc-name { font-family: "Montserrat", "Inter", sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; line-height: 1.05; } .nav__loc-alt { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; font-family: "Montserrat", "Inter", sans-serif; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-bright); opacity: .9; } .nav__loc:hover .nav__loc-alt { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } /* ---- drawer zones: logo (top) · links (middle) · socials (bottom) ----- */ .nav__home { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; -webkit-tap-highlight-color: transparent; } .nav__home-word { font-family: "Montserrat", "Inter", sans-serif; font-weight: 600; color: var(--gold-bright); text-transform: uppercase; letter-spacing: 0.28em; font-size: 1.3rem; line-height: 1; } .nav__home .nav__logo-mark { display: block; width: 66px; height: 66px; background-color: var(--gold-bright); -webkit-mask: url("../images/logo.png") center / contain no-repeat; mask: url("../images/logo.png") center / contain no-repeat; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); transition: transform .3s var(--ease); } .nav__home:hover .nav__logo-mark { transform: scale(1.05); } .nav__group { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; width: 100%; } /* drawer info: open status · address · phone */ .nav__info { display: flex; flex-direction: column; gap: 9px; width: 100%; } .nav__info-status { display: inline-flex; align-items: center; gap: 8px; font-family: "Montserrat", "Inter", sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; color: #7bd88f; } .nav__info-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(123,216,143,.18); } .nav__info-status.is-closed { color: #ff8f8f; } .nav__info-status.is-closed::before { box-shadow: 0 0 0 3px rgba(255,143,143,.18); } .nav__info-row { display: inline-flex; align-items: center; gap: 10px; font-size: 0.84rem; letter-spacing: 0.01em; color: rgba(236,212,142,.92); -webkit-tap-highlight-color: transparent; transition: color .2s var(--ease); } .nav__info-row svg { width: 16px; height: 16px; flex: none; color: var(--gold-bright); opacity: .85; } .nav__info-row:hover { color: #fff; } .nav__info-row:hover svg { opacity: 1; } /* premium social block (icon-only, no pills) */ .nav__social { display: flex; flex-direction: column; gap: 12px; width: 100%; } .nav__social-label { font-family: "Montserrat", "Inter", sans-serif; font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(236,212,142,.55); } .nav__social-icons { display: flex; align-items: center; gap: 20px; } .nav__soc { display: inline-flex; color: var(--gold-bright); opacity: .82; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease), opacity .25s var(--ease); } .nav__soc svg { width: 23px; height: 23px; } .nav__soc:hover { opacity: 1; transform: translateY(-2px) scale(1.1); } /* left-drawer backdrop scrim (created in JS) */ .nav__scrim { position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s var(--ease), visibility .45s var(--ease); } .nav__scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .nav__right { display: flex; align-items: center; gap: 14px; } .lang-toggle { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; background: transparent; color: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; filter: drop-shadow(0 0 10px rgba(0,0,0,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.85)); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .lang-toggle { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .lang-toggle:focus { outline: none; } /* hover fill only on real pointer devices — never sticks after a tap */ @media (hover: hover) and (pointer: fine) { .lang-toggle:hover { background: var(--gold-bright); color: #1a1a1a; border-color: var(--gold-bright); } } /* nav content stays pale gold on the dark bar in every state */ .nav--over { color: var(--gold-bright); } .nav--over .nav__link .sub { color: var(--gold-bright); } .nav--over.is-stuck { color: var(--gold-bright); } .nav--over.is-stuck .nav__link .sub { color: var(--gold-bright); } /* burger — always visible, far left, sits above the drawer */ .nav__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 20px; margin-right: auto; background: none; border: 0; z-index: 102; cursor: pointer; color: var(--gold-bright); -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 0 10px rgba(0,0,0,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.85)); } .nav__burger span { height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .25s var(--ease); } .nav__burger.is-active { color: var(--gold-bright); } .nav__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger.is-active span:nth-child(2) { opacity: 0; } .nav__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================================ HERO ========================================================================== */ /* hero is pinned; the content below scrolls up and covers it (reveal parallax) */ .hero { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; z-index: 0; } /* everything after the hero rides above it on an opaque layer */ .page-flow { position: relative; z-index: 1; background: var(--paper); } .hero__img { position: absolute; left: 0; right: 0; top: -12%; height: 124%; z-index: 0; will-change: transform; } .hero__img picture { display: contents; } /* mobile + desktop behave as a direct child */ .hero__img img { width: 100%; height: 100%; object-fit: cover; } .hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%); } .hero__inner { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(48px, 8vw, 96px); } .hero__eyebrow { color: rgba(255,255,255,.85); margin-bottom: 1rem; } .hero__title { color: #fff; margin-bottom: 1.6rem; } .hero__tagline { /* matches the intro "SAINT" wordmark: Montserrat Light + wide tracking */ color: #fff; font-family: "Montserrat", "Inter", sans-serif; font-weight: 300; font-size: clamp(1.8rem, 4.5vw, 3.4rem); line-height: 1.12; letter-spacing: 0.18em; padding-left: 0.18em; /* offsets the tracking on EVERY line, so wrapped lines share a left edge */ margin: 0 0 clamp(20px, 3vw, 32px); max-width: 22ch; text-shadow: 0 2px 24px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); } .hero__ctas { display: flex; flex-wrap: nowrap; gap: 14px; } .hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1; font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,.8); display: flex; flex-direction: column; align-items: center; gap: 8px; } .hero__scroll::after { content: ""; width: 1px; height: 34px; background: rgba(255,255,255,.6); animation: scroll-pulse 1.8s var(--ease) infinite; } @keyframes scroll-pulse { 0%,100% { transform: scaleY(.4); opacity:.4;} 50%{transform:scaleY(1); opacity:1;} } /* ============================================================================ ABOUT ========================================================================== */ .about { background: var(--paper); } /* schedule hugs its content — trim whitespace, especially below the button */ .about .about__info { padding-block: clamp(22px, 2.6vw, 36px) clamp(32px, 5vw, 64px); } .about .about__info .display { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.6rem; } .about .info-card { margin-top: 1rem; padding-top: 1rem; } .about .hours-cta { margin-top: 1.4rem; } .about__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 90px); align-items: start; } .about__copy .display { font-size: clamp(2rem, 5vw, 3.6rem); margin: 1rem 0 1.4rem; } .about__text { max-width: 46ch; color: var(--ink-soft); font-size: 1.08rem; } .about__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; } .info-card { border-top: 1.5px solid var(--ink); padding-top: 1.4rem; margin-top: 2.6rem; } .info-card h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 1rem; } .hours { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .hours td { padding: 0.5em 0; border-bottom: 1px solid var(--line); } .hours td:first-child { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--ink-soft); } .hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; } .hours tr.is-today td { color: var(--gold); font-weight: 700; } .hours .closed { color: var(--ink-soft); font-style: italic; } .meta-line { display: flex; flex-direction: column; gap: 4px; margin-top: 1.4rem; } .meta-line a { border-bottom: 1px solid var(--line); width: max-content; padding-bottom: 2px; } .meta-line a:hover { border-color: var(--accent); color: var(--accent); } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.6rem; } .tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; border: 1px solid var(--line); border-radius: 100px; padding: 0.5em 1em; color: var(--ink-soft); } .tag--on { border-color: var(--gold); color: var(--gold); } /* ============================================================================ MENU (tabbed PDF) ========================================================================== */ /* coral menu + reservation sections framed with the FancyWaves art: split into a top band + bottom band, pinned to each edge at native scale (avoids the upscaling blur of stretching one image over the tall sections) */ .menu, #reservation { background-color: var(--accent); background-image: url("../images/wave-top.png"), url("../images/wave-bottom.png"); background-image: image-set(url("../images/wave-top.webp") type("image/webp"), url("../images/wave-top.png") type("image/png")), image-set(url("../images/wave-bottom.webp") type("image/webp"), url("../images/wave-bottom.png") type("image/png")); background-repeat: no-repeat, no-repeat; background-position: top center, bottom center; background-size: 100% auto, 100% auto; } .menu { color: #fff; } .menu .eyebrow { color: rgba(255,255,255,.85); } .menu__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 2.4rem; } .menu__head .display { color:#fff; font-size: clamp(2rem, 5vw, 3.6rem); } .menu__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.8rem; } .menu__tab { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 1px; padding: 0.75em 1.5em; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); -webkit-tap-highlight-color: transparent; } .menu__tab[aria-selected="true"] { background: #fff; color: var(--accent); border-color: #fff; } /* photo-menu tab is a link to its own page */ .menu__tab--link { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; } .menu__tab-ext { font-size: 1em; opacity: .85; } @media (hover: hover) and (pointer: fine) { .menu__tab--link:hover { background: #fff; color: var(--accent); border-color: #fff; } } .menu__panel { background: #fff; border-radius: 4px; overflow: hidden; min-height: 60vh; } .menu__view { background: #fff; } .menu__panel iframe, .menu__panel embed { width: 100%; height: 78vh; border: 0; display: block; } .menu__placeholder { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--ink-soft); padding: 40px; } .menu__placeholder .ph-mark { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 100px; padding: 0.4em 1em; } /* ============================================================================ ORDER ========================================================================== */ .order { background: var(--paper); text-align: center; } .order .display { font-size: clamp(2rem, 5vw, 3.6rem); margin: 0.8rem 0 2rem; } .order__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } /* ============================================================================ GIFT CARDS + RESERVATION (embed sections) ========================================================================== */ .embed-sec { background: var(--paper-2); } .embed-sec.alt { background: var(--paper); } .embed-sec__head { text-align: center; margin-bottom: 2.4rem; } .embed-sec__head .display { font-size: clamp(2rem, 5vw, 3.4rem); margin-top: 0.6rem; } .embed-frame { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .embed-frame iframe { width: 100%; min-height: 640px; border: 0; display: block; } .embed-placeholder { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: var(--ink-soft); padding: 48px; } .embed-placeholder .ph-mark { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 100px; padding: 0.4em 1em; } /* gift-card CTA (opens storefront in a new tab) */ .cta-wrap { text-align: center; } .cta-block { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; padding: clamp(24px, 5vw, 56px) 0; } .cta-block p { max-width: 44ch; color: var(--ink-soft); font-size: 1.1rem; } /* ============================================================================ REVIEWS ========================================================================== */ .reviews { background: var(--ink); color: var(--paper); text-align: center; } .reviews .eyebrow { color: #ff8a8a; } .reviews__count { font-size: clamp(3rem, 9vw, 6rem); line-height: 1; letter-spacing: -0.04em; margin: 1rem 0 0.4rem; } .reviews__count span { color: var(--accent); } .reviews__sub { color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem; margin-bottom: 2.4rem; } .reviews__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .reviews .btn { color:#fff; } .reviews .btn:hover { background:#fff; color: var(--ink); } /* ============================================================================ CONTACT ========================================================================== */ /* ---- Gift cards (between Reviews and Contact) --------------------------- */ .gc { background: var(--cream); overflow: hidden; } .gc__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .gc .eyebrow { color: var(--accent); } .gc .display { margin: .6rem 0 1.2rem; } .gc__text { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.6; max-width: 44ch; margin-bottom: 1.8rem; text-wrap: balance; } .gc__amounts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 2rem; } .gc__amt { font: 600 .82rem/1 var(--font); letter-spacing: .06em; color: var(--ink); padding: .85em 1.25em; border: 1px solid rgba(51,51,51,.22); border-radius: 999px; background: #fff; transition: color .25s var(--ease), border-color .25s var(--ease); } @media (hover: hover) and (pointer: fine) { .gc__amt:hover { border-color: var(--accent); color: var(--accent); } } .gc__cta { display: inline-flex; } .gc__note { margin-top: 1.1rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .gc__dot { color: var(--gold); padding-inline: .5em; } .gc__fan { position: relative; aspect-ratio: 4 / 3.1; max-width: 560px; width: 100%; justify-self: center; } .gc__fan img { position: absolute; width: 74%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.12); } .gc__fan img:nth-child(1) { left: 0; top: 26%; transform: rotate(-9deg); } .gc__fan img:nth-child(2) { left: 13%; top: 12%; transform: rotate(-1.5deg); } .gc__fan img:nth-child(3) { left: 26%; top: 0; transform: rotate(7deg); } @media (max-width: 860px) { .gc__grid { grid-template-columns: 1fr; } .gc__fan { order: -1; max-width: 420px; } /* single column: centre the whole block */ .gc__copy { text-align: center; } .gc__text { margin-inline: auto; } /* one fact per line instead of an awkward wrap mid-phrase */ .gc__fact { display: block; } .gc__fact + .gc__fact { margin-top: .35em; } .gc__dot { display: none; } .gc__cta { width: 100%; max-width: 420px; justify-content: center; } /* equal-width chips on a 6-track grid, 3 per row; with five amounts the last two sit centred under the first three (3 + 2) */ .gc__amounts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 360px; margin-inline: auto; } .gc__amt { grid-column: span 2; text-align: center; padding-inline: .5em; } .gc__amt:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; } .gc__amt:nth-child(5):last-child { grid-column: 4 / span 2; } } .contact { background: var(--paper); } .contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; } .contact__intro .display { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0.8rem 0 1.2rem; } .contact__note { margin-top: 1.6rem; padding: 1rem 1.2rem; border-left: 3px solid var(--accent); background: var(--paper-2); font-size: 0.92rem; color: var(--ink-soft); } .form { display: grid; gap: 16px; } .form input, .form textarea { width: 100%; font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--line); padding: 0.9em 0.2em; transition: border-color .3s; } .form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); } .form textarea { resize: vertical; min-height: 140px; } .form ::placeholder { color: var(--ink-soft); opacity: .7; } .form button { justify-self: start; } .form__status { font-size: 0.85rem; color: var(--accent); min-height: 1.2em; } /* gallery — auto-scrolling image strip (after the contact section). Native horizontal scroll (JS auto-advances scrollLeft); swipeable. */ .gallery { background: var(--cream); padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(28px, 4vw, 56px); } .gallery__title { text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); } .gallery__strip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gallery__strip::-webkit-scrollbar { display: none; } .gallery__track { display: flex; gap: 6px; width: max-content; } .gallery__track img { flex: 0 0 auto; height: clamp(220px, 46vw, 380px); width: auto; object-fit: cover; display: block; -webkit-user-select: none; user-select: none; pointer-events: none; } /* ============================================================================ FOOTER ========================================================================== */ .footer { background: var(--accent); color: #fff; padding-top: clamp(40px, 6vw, 72px); } .footer a:hover { opacity: .7; } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-block: clamp(56px, 8vw, 96px); } .footer__brand .display { font-size: clamp(2.4rem, 6vw, 4.2rem); color:#fff; } .footer__brand img { filter: brightness(0) invert(1); } /* white logo on coral footer */ .footer__brand p { color: rgba(255,255,255,.8); max-width: 32ch; margin-top: 1rem; } .footer h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 1.2rem; color: rgba(255,255,255,.7); } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.98rem; } .footer__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; } .footer__bottom { border-top: 1px solid var(--line-light); padding-block: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,.75); } .footer__bottom .lang-toggle { border-color: rgba(255,255,255,.55); } @media (hover: hover) and (pointer: fine) { .footer__bottom .lang-toggle:hover { background: #fff; color: var(--accent); border-color: #fff; } } .footer__bottom a { border-bottom: 1px solid rgba(255,255,255,.4); } .footer__legal { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; } /* agency credit: present but quiet — dimmer, smaller, no underline */ .footer__bottom a.footer__credit { border-bottom: 0; opacity: .6; font-size: 0.66rem; } .footer__bottom a.footer__credit:hover { opacity: 1; } /* ============================================================================ LEGAL PAGES (/privacy, /terms) — bilingual, prose ========================================================================== */ .legal-body { background: var(--paper); color: var(--ink); } .legal-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--gut); background: var(--accent); color: #fff; } .legal-nav a { color: #fff; } .legal-nav .legal-back { font-size: 0.9rem; letter-spacing: 0.02em; } .legal-nav .legal-brand { font-family: "Montserrat", "Inter", sans-serif; font-weight: 300; letter-spacing: 0.28em; text-indent: 0.28em; color: var(--gold-bright); font-size: 1.1rem; } .legal-nav .lang-toggle { border-color: rgba(255,255,255,.6); color: #fff; } @media (hover: hover) and (pointer: fine) { .legal-nav .lang-toggle:hover { background: #fff; color: var(--accent); border-color: #fff; } } .legal { max-width: 820px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gut); } .legal h1 { font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -0.02em; margin-bottom: 0.4rem; } .legal .legal-updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; } .legal h2 { font-size: 1.15rem; margin: 2rem 0 0.6rem; color: var(--ink); letter-spacing: -0.01em; } .legal p, .legal li { color: var(--ink-soft); line-height: 1.7; } .legal p { margin-bottom: 0.9rem; } .legal ul { margin: 0.4rem 0 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; } .legal a { color: var(--gold-deep); border-bottom: 1px solid var(--line); } .legal .legal-note { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); } /* ============================================================================ HOMEPAGE — full-screen intro / location selector ========================================================================== */ .intro { position: relative; min-height: 100vh; min-height: 100svh; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .intro__bg { position: absolute; inset: 0; z-index: 0; background: url("../images/hero-home.jpg") center/cover no-repeat; background-image: image-set(url("../images/hero-home.webp") type("image/webp"), url("../images/hero-home.jpg") type("image/jpeg")); filter: brightness(1.06) saturate(1.05); transform-origin: center; will-change: transform; animation: kenburns 26s ease-in-out infinite alternate; } /* slow Ken Burns pan/zoom */ @keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1.18) translate(-2%, -1.5%); } } .intro__bg::after { /* very light scrim, just enough for the pills/icons */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.16) 100%); } /* "EST. 2012" pinned to the top — same Montserrat + pale gold as SAINT */ .intro__est { position: absolute; z-index: 1; top: clamp(20px, 4vh, 44px); left: 0; right: 0; margin: 0; text-align: center; /* centred without a transform -> crisp text */ font-family: "Montserrat", "Inter", sans-serif; font-weight: 400; color: var(--gold-bright); text-transform: uppercase; letter-spacing: 0.34em; text-indent: 0.34em; /* offset keeps it optically centred */ font-size: clamp(0.72rem, 1.6vw, 0.95rem); text-shadow: 0 1px 3px rgba(0,0,0,.5); /* tight shadow so the true pale gold shows */ } .intro__inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 4vw, 42px); padding: 40px var(--gut); text-align: center; } .intro__brand { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vw, 12px); } /* soft dark halo so the pale gold logo + SAINT read on the bright photo */ .intro__brand::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 155%; height: 215%; background: radial-gradient(ellipse at center, rgba(0,0,0,.52) 0%, rgba(0,0,0,.32) 42%, rgba(0,0,0,0) 72%); } /* emblem masked with the SAINT gold so it always matches, on a transparent bg */ .intro__logo { width: clamp(144px, 22.5vw, 270px); height: clamp(144px, 22.5vw, 270px); background-color: var(--gold-bright); -webkit-mask: url("../images/logo.png") center / contain no-repeat; mask: url("../images/logo.png") center / contain no-repeat; filter: drop-shadow(0 2px 14px rgba(0,0,0,.4)); } .intro__title { font-family: "Montserrat", "Inter", sans-serif; /* matches the site's display type */ font-weight: 300; color: var(--gold-bright); font-size: clamp(3.2rem, 12vw, 9.5rem); line-height: 0.9; letter-spacing: 0.28em; text-indent: 0.28em; /* indent offsets the tracking to keep it centred */ text-shadow: 0 2px 24px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); } .intro__locs { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.5vw, 26px); justify-content: center; } /* squared, wide-tracked location buttons — matches the site's premium CTAs */ .loc-pill { display: inline-flex; align-items: center; justify-content: center; width: clamp(180px, 24vw, 240px); /* equal size for both pills */ padding: 1.15em 1em; border-radius: 1px; border: 1px solid rgba(236,212,142,.6); /* thin gold edge */ background: rgba(0,0,0,.26); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--gold-bright); font-family: "Montserrat", "Inter", sans-serif; font-weight: 600; font-size: clamp(0.78rem, 1.5vw, 0.95rem); text-transform: uppercase; letter-spacing: 0.2em; text-shadow: 0 1px 8px rgba(0,0,0,.45); -webkit-tap-highlight-color: transparent; /* no grey tap box on mobile */ transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); } /* hover effects only on real pointer devices — never sticks after a mobile tap */ @media (hover: hover) and (pointer: fine) { .loc-pill:hover { background: var(--gold-bright); color: #1a1a1a; border-color: var(--gold-bright); text-shadow: none; transform: translateY(-2px); } .social:hover { background: rgba(16,16,16,.72); color: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 8px 20px rgba(0,0,0,.3); transform: translateY(-3px); } } .intro__social { display: flex; gap: clamp(14px, 2vw, 20px); justify-content: center; margin-top: clamp(28px, 7vh, 76px); } .social { width: clamp(50px, 7vw, 60px); height: clamp(50px, 7vw, 60px); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(236,212,142,.9); /* gold rim for definition */ background: rgba(24,24,24,.6); /* dark disc so the glyph reads on the photo */ -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--gold-bright); box-shadow: 0 4px 14px rgba(0,0,0,.35); -webkit-tap-highlight-color: transparent; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .social svg { width: 50%; height: 50%; display: block; } /* ---- reveal-on-scroll ----------------------------------------------------*/ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ============================================================================ LOCATION PAGE — schedule, full-bleed images, menu, reviews, minimal footer ========================================================================== */ /* full-bleed image band (fills the page width, no borders) */ .full-img { display: block; width: 100%; height: clamp(320px, 46vw, 620px); object-fit: cover; } /* full-bleed parallax image band */ .imgband { position: relative; width: 100%; height: clamp(280px, 44vw, 540px); overflow: hidden; } .imgband img { position: absolute; left: 0; top: -14%; width: 100%; height: 128%; object-fit: cover; will-change: transform; } /* schedule / address */ .about__info { max-width: 640px; } .about__info .display { margin-bottom: 1.2rem; } .about__addr { display: inline-block; margin-bottom: 1.2rem; font-size: 1.1rem; color: var(--ink); border-bottom: 1.5px solid var(--line); padding-bottom: 3px; transition: color .25s, border-color .25s; } .about__addr:hover { color: var(--accent); border-color: var(--accent); } .about__addr .addr-arrow { color: var(--accent); } /* order message */ .order__msg { max-width: 46ch; margin: 0 auto 2rem; color: var(--ink-soft); font-size: 1.1rem; } /* gift CTA — coral + attention pulse */ .gift-cta { animation: giftPulse 2.6s var(--ease) infinite; } @keyframes giftPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(247,106,104,.5); transform: translateY(0); } 55% { box-shadow: 0 0 0 16px rgba(247,106,104,0); transform: translateY(-2px); } } /* reservation — a little bigger */ #reservation .embed-frame, #reservation .embed-frame iframe { min-height: 800px; } /* reservation section — coral + seigaiha, trimmed top padding. Top + bottom seigaiha waves (both from the shared rule above); normal section-pad bottom so the bottom wave hugs the content like the menu. */ #reservation { padding-top: clamp(24px, 3.5vw, 48px); } #reservation .display { color: #fff; } #reservation .eyebrow { color: rgba(255,255,255,.88); } /* reservation heading left-aligned (eyebrow + title) */ #reservation .embed-sec__head { text-align: left; } /* reveal parallax: a section pins and the next (opaque) section scrolls up and covers it — same mechanic as the hero reveal, with a soft top shadow for depth. Applied to Reservation-over-About and Contact-over-Reviews so both read the same. */ #about, #reviews { position: sticky; top: 0; z-index: 0; } #reservation, #contact { position: relative; z-index: 1; box-shadow: 0 -22px 48px rgba(0,0,0,.16); } /* the gallery + footer follow the pinned sticky sections, so they must be positioned to paint ABOVE them — otherwise the pinned #about/#reviews cover them (same reason as .mobile-interlude). */ .gallery, .footer { position: relative; z-index: 1; } /* inline PDF menu (rendered with pdf.js) */ .menu__panel { min-height: auto; } /* photo menu flows with the page (no nested scroll box) so the PDF top scrolls naturally with the page instead of shifting inside an inner scroller. No top padding so the first photo sits flush with the panel top. */ .menu__pages { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 12px 12px; overflow-x: hidden; background: #fff; } /* .menu__page is a wrapper around one page's canvas band(s); bands stack flush */ .menu__page { width: 100%; max-width: 900px; box-shadow: 0 2px 12px rgba(0,0,0,.14); border-radius: 2px; overflow: hidden; display: block; font-size: 0; } .menu__page canvas { display: block; width: 100%; height: auto; } .menu__loading { text-align: center; padding: 56px 20px; color: var(--ink-soft); } /* cute bouncing-dots loader shown while a PDF renders */ .menu__loading-txt { display: block; margin-top: 16px; font-size: .9rem; letter-spacing: .04em; } .menu__spinner { display: inline-flex; gap: 9px; } .menu__spinner > span { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: menu-bounce 1.1s ease-in-out infinite both; } .menu__spinner > span:nth-child(2) { animation-delay: .16s; background: var(--gold); } .menu__spinner > span:nth-child(3) { animation-delay: .32s; } @keyframes menu-bounce { 0%, 70%, 100% { transform: translateY(0) scale(.85); opacity: .55; } 35% { transform: translateY(-14px) scale(1); opacity: 1; } } .menu__open { display: block; text-align: center; padding: 12px; color: var(--accent); font-weight: 600; } /* à la carte — page-by-page pager (arrows + swipe) */ .menu__view--paged { position: relative; background: #fff; } .menu__pager { display: flex; /* height follows the page — viewer == PDF height */ max-width: 900px; margin-inline: auto; /* hit/scroll frame matches the PDF width */ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; background: #fff; cursor: grab; overscroll-behavior-x: contain; } .menu__pager::-webkit-scrollbar { display: none; } .menu__pager.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; } .menu__slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: flex-start; justify-content: center; } .menu__slide .menu__page { max-width: 100%; } .menu__slide .menu__page canvas { -webkit-user-select: none; user-select: none; pointer-events: none; } /* bottom control row: ‹ 1 / N › — arrows styled like the nav controls */ .menu__controls { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 46px); padding: 14px; background: #fff; } .menu__nav { background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--gold-bright); font-size: 2rem; line-height: 1; filter: drop-shadow(0 0 10px rgba(0,0,0,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.85)); transition: opacity .2s var(--ease), transform .2s var(--ease); -webkit-tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) { .menu__nav:hover { transform: scale(1.15); } } .menu__nav:disabled { opacity: .25; pointer-events: none; } .menu__counter { text-align: center; color: var(--ink-soft); min-width: 4.5em; font-size: 0.78rem; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; } /* reviews — horizontal scrolling strip */ .reviews__marquee { margin-top: 2.6rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; } .reviews__marquee.is-dragging { cursor: grabbing; } .reviews__marquee::-webkit-scrollbar { display: none; } .rev-track { display: flex; gap: 20px; width: max-content; padding-inline: var(--gut); } .rev-card { flex: 0 0 auto; width: min(82vw, 360px); scroll-snap-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 26px 28px; text-align: left; -webkit-user-select: none; user-select: none; } .rev-stars { color: var(--gold-bright); letter-spacing: 2px; margin-bottom: 12px; } .rev-card blockquote { color: #fff; font-size: 1rem; line-height: 1.5; margin: 0 0 14px; } .rev-card figcaption { color: rgba(255,255,255,.6); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; } .rev-link { display: inline-block; margin-top: 2rem; color: var(--gold-bright); border-bottom: 1.5px solid currentColor; padding-bottom: 3px; } /* minimal footer — phone + social pills */ .footer--min { background: var(--accent); color: #fff; } .footer__min { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-block: clamp(40px, 7vw, 72px); text-align: center; } .footer__phone { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 600; color: #fff; } .footer__social { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .footer__pill { border: 1.5px solid rgba(255,255,255,.7); border-radius: 100px; padding: .7em 1.6em; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: #fff; transition: background .25s var(--ease), color .25s var(--ease); } .footer__pill:hover { background: #fff; color: var(--accent); } /* hero — Ken Burns motion, clickable address, live open/closed status */ .hero__img img { animation: kenburns 26s ease-in-out infinite alternate; transform-origin: center; will-change: transform; } /* gentler zoom on mobile — the image was over-magnified (pixelated); keep the slow pan */ @keyframes kenburns-soft { from { transform: scale(1.0); } to { transform: scale(1.035) translate(-0.6%, -0.5%); } } .hero__addr { display: inline-block; width: max-content; max-width: 100%; color: #fff; font-size: clamp(.9rem, 2.4vw, 1.05rem); border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 2px; margin: 0 0 1.4rem; } .hero__addr:hover { border-color: var(--accent); } .hero__addr .addr-arrow { color: var(--accent); } .hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 1.6rem; font-size: .92rem; } .hero__status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; } .hero__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #7bd88f; box-shadow: 0 0 0 3px rgba(123,216,143,.25); } .hero__status.is-closed { color: rgba(255,255,255,.88); } .hero__status.is-closed::before { background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,.25); } .hero__seats { color: rgba(255,255,255,.82); } @media (prefers-reduced-motion: reduce) { .gift-cta { animation: none; } /* stays a swipeable strip; main.js just doesn't auto-scroll or double it. (Wrapping it stacked every card — ~5,000px of reviews on a phone.) */ .rev-track { animation: none; } } /* ============================================================================ RESPONSIVE ========================================================================== */ @media (max-width: 900px) { .about__grid, .contact__grid { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } .select-grid { grid-template-columns: 1fr; } } /* mobile sticky action bar (Reserve / Order) — hidden on desktop */ .mobilebar { display: none; } /* interlude image between Reservation and Reviews — mobile only */ .mobile-interlude { display: none; } @media (max-width: 720px) { .footer__top { grid-template-columns: 1fr; } /* the Reserve/Order CTAs live in the sticky bottom bar on mobile */ .hero__ctas { display: none; } /* the pink sections (menu, reservation, contact) use the mobile-specific seigaiha art on phones — full-width gold waves top + bottom */ .menu, #reservation, .contact { background-image: url("../images/wave-top-mobile.png"), url("../images/wave-bottom-mobile.png"); background-image: image-set(url("../images/wave-top-mobile.webp") type("image/webp"), url("../images/wave-top-mobile.png") type("image/png")), image-set(url("../images/wave-bottom-mobile.webp") type("image/webp"), url("../images/wave-bottom-mobile.png") type("image/png")); } /* contact gets the coral + seigaiha treatment on mobile (like menu/reservation): top + bottom waves, normal section-pad so the bottom wave hugs the content */ .contact { background-color: var(--accent); background-position: top center, bottom center; background-size: 100% auto, 100% auto; background-repeat: no-repeat, no-repeat; } .contact .display, .contact [data-contact-intro] { color: #fff; } .contact__note { background: rgba(255,255,255,.12); border-left-color: rgba(255,255,255,.65); color: rgba(255,255,255,.92); } /* the form sits on its own white panel (like the menu/reservation content) so the waves only frame it as clean bands — no stray wave bits behind the form. The panel keeps the default dark-on-white inputs and charcoal Send button. */ .contact .form { background: #fff; border-radius: 6px; padding: clamp(20px, 5vw, 28px); box-shadow: 0 12px 34px rgba(0,0,0,.14); } /* Opening Hours (#about) on mobile: portrait photo background, content pinned to the left in white. Taller than one screen (like desktop) so the pinned section dwells instead of flashing past; content is centred within the first screen so it stays viewport-centred while pinned. */ .about { /* one screen tall so the whole portrait image fits in view (zoomed out enough to show the sushi at the bottom); anchored to the bottom so the sushi is prioritised. */ background: url("../images/about-bg-mobile.jpg") center bottom / cover no-repeat; background-image: image-set(url("../images/about-bg-mobile.webp") type("image/webp"), url("../images/about-bg-mobile.jpg") type("image/jpeg")); min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-start; } .about::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15,10,8,.82) 0%, rgba(15,10,8,.6) 34%, rgba(15,10,8,.28) 66%, rgba(15,10,8,.12) 100%); } .about .about__info { position: relative; z-index: 1; /* content sits in the upper area so the sushi at the bottom stays visible */ padding-top: calc(var(--nav-h) + 24px); text-align: left; /* everything to the left */ } .about .about__info .display { color: #fff; } .about .about__addr { color: #fff; border-bottom-color: rgba(255,255,255,.5); } .about .info-card { border-top-color: rgba(255,255,255,.4); } .about .hours td { color: #fff; border-bottom-color: rgba(255,255,255,.18); } .about .hours td:first-child { color: rgba(255,255,255,.72); } .about .hours td:last-child { color: #fff; } .about .hours tr.is-today td { color: var(--gold-bright); font-weight: 700; } .mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--accent); /* solid coral */ box-shadow: 0 -8px 24px rgba(0,0,0,.18); } .mobilebar__btn { flex: 1 1 0; max-width: 210px; } /* keep the last content clear of the fixed bar. The footer is the last element and is coral like the bar, so reserving space on it is seamless (no white/cream strip) whatever the bar's height. */ .footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .photomain { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* interlude image (between Reservation and Reviews) shows full-width on mobile. It must be positioned (z-index) so it paints ABOVE the sticky #about section, which stays pinned at top:0 for the whole page — a plain in-flow would be painted behind it and the Opening Hours would show through. */ .mobile-interlude { display: block; position: relative; z-index: 1; margin: 0; } .mobile-interlude img { display: block; width: 100%; height: auto; } /* order nudge overlaid on the platter, anchored to the bottom */ .mobile-interlude__caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 80px 24px 28px; text-align: center; background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.6) 45%, rgba(0,0,0,.15) 80%, transparent); } .mobile-interlude__nudge { margin: 0; max-width: 20ch; color: #fff; font-family: "Montserrat", "Inter", sans-serif; font-weight: 300; font-size: 1.2rem; line-height: 1.35; letter-spacing: 0.02em; text-shadow: 0 1px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); } .hero { align-items: flex-end; } /* full-height hero on mobile. kenburns-soft (max 1.035x) keeps the 1920x1080 source at/under native scale even at 100svh, so no upscaling/pixelation; the trimmed overscan pulls the image to its least-zoomed cover position. */ .hero { height: 100vh; height: 100svh; } /* true cover (no parallax overscan) = least-zoomed image; hero parallax is disabled on phones in main.js so no edge gap is revealed */ .hero__img { top: 0; height: 100%; } .hero__img img { animation-name: kenburns-soft; } .menu__panel iframe, .menu__panel embed { height: 70vh; } /* Ken Burns 2x faster on mobile so the motion is noticeable */ .intro__bg { animation-duration: 13s; } /* on mobile: brand anchored near the top, social icons pushed to the bottom */ .intro__inner { min-height: 100vh; min-height: 100svh; justify-content: flex-start; padding: clamp(56px, 11vh, 120px) var(--gut) clamp(28px, 5vh, 56px); } .intro__brand { margin-top: 0; } .intro__social { margin-top: auto; } } /* narrow phones: keep the two sticky-bar buttons on one line with longer FR labels */ @media (max-width: 430px) { .mobilebar { gap: 9px; } .mobilebar__btn { padding: 1em 1.1em; font-size: 0.72rem; letter-spacing: 0.1em; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } } /* ============================================================================ DESKTOP CONTROLS (min-width:721px — above the mobile breakpoint) Placed last so it overrides the base .hero__ctas / .mobilebar rules above. - nav controls (burger + FR/EN toggle) enlarged 1.6× - taller bar so the larger controls sit lower and stay fully on-screen - Reserve/Order CTAs moved out of the hero into a sticky bottom bar, styled exactly like the mobile one Mobile is intentionally left untouched. ========================================================================== */ @media (min-width: 721px) { .nav { height: 100px; } .nav__burger { width: 48px; height: 32px; gap: 8px; } .nav__burger span { height: 3.2px; } .nav__burger.is-active span:nth-child(1) { transform: translateY(11.2px) rotate(45deg); } .nav__burger.is-active span:nth-child(3) { transform: translateY(-11.2px) rotate(-45deg); } .lang-toggle { width: 67.2px; height: 67.2px; border-width: 2.4px; font-size: 1.152rem; } /* CTAs move out of the hero and into the sticky bottom bar */ .hero__ctas { display: none; } .mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--accent); /* solid coral — same as mobile */ box-shadow: 0 -8px 24px rgba(0,0,0,.18); } .mobilebar__btn { flex: 1 1 0; max-width: 210px; } /* keep the last content clear of the fixed bar. The footer is the last element and is coral like the bar, so reserving space on it is seamless. */ .footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* Opening Hours (#about): photo background, content pushed to the left. A left-heavy dark scrim keeps the hours legible; text recoloured to white. */ .about { background: url("../images/about-bg.jpg") center center / cover no-repeat; background-image: image-set(url("../images/about-bg.webp") type("image/webp"), url("../images/about-bg.jpg") type("image/jpeg")); /* taller than one screen so the pinned section dwells (stays fully visible) for ~half a screen before Reservation reveals over it, instead of flashing past at exactly 100svh. The content is centred within the first screen (below) so it stays viewport-centred while pinned; the extra height is pure dwell scroll. */ min-height: 150vh; min-height: 150svh; display: flex; align-items: flex-start; } .about::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(18,11,7,.88) 0%, rgba(18,11,7,.74) 34%, rgba(18,11,7,.30) 62%, rgba(18,11,7,0) 100%); } .about .about__info { position: relative; z-index: 1; margin-inline: 0; /* was auto-centred → anchor to the left */ max-width: 560px; /* centre the content within the first screen so it stays viewport-centred while the taller section is pinned */ min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } /* recolour content to read over the dark photo */ .about .about__info .display { color: #fff; } .about .about__addr { color: #fff; border-bottom-color: rgba(255,255,255,.5); } .about .about__addr:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); } .about .info-card { border-top-color: rgba(255,255,255,.4); } .about .hours td { color: #fff; border-bottom-color: rgba(255,255,255,.18); } .about .hours td:first-child { color: rgba(255,255,255,.72); } .about .hours td:last-child { color: #fff; } .about .hours tr.is-today td { color: var(--gold-bright); font-weight: 700; } /* Contact (#contact): full-screen photo background (like the hero), content pushed to the right. A right-heavy dark scrim keeps the copy legible; the form sits on a white panel (same as mobile) so its inputs stay usable. */ .contact { background: url("../images/contact-bg.jpg") center center / cover no-repeat; background-image: image-set(url("../images/contact-bg.webp") type("image/webp"), url("../images/contact-bg.jpg") type("image/jpeg")); min-height: 100vh; min-height: 100svh; display: flex; align-items: center; } .contact::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(18,11,7,0) 0%, rgba(18,11,7,.30) 38%, rgba(18,11,7,.76) 66%, rgba(18,11,7,.90) 100%); } .contact .contact__grid { position: relative; z-index: 1; grid-template-columns: 1fr; /* single column */ margin-inline: auto 0; /* push the block to the right */ max-width: 560px; gap: 28px; } /* recolour intro copy to read over the dark photo */ .contact .contact__intro .display { color: #fff; } .contact [data-contact-intro] { color: rgba(255,255,255,.9); } .contact .contact__note { background: rgba(255,255,255,.12); border-left-color: rgba(255,255,255,.65); color: rgba(255,255,255,.92); } /* form on its own white panel — keeps the default dark-on-white inputs */ .contact .form { background: #fff; border-radius: 6px; padding: clamp(22px, 2.4vw, 30px); box-shadow: 0 12px 34px rgba(0,0,0,.2); } /* Menu à-la-carte pager: float the ‹/› arrows to the vertical middle of the viewer (one on each side) and make them 3× bigger. The counter stays in the bottom control row on its own. */ .menu__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; font-size: 6rem; /* 3× the base 2rem */ } .menu__nav--prev { left: clamp(8px, 3vw, 44px); } .menu__nav--next { right: clamp(8px, 3vw, 44px); } .menu__nav:hover { transform: translateY(-50%) scale(1.12); } } /* ============================================================================ PHOTO MENU — standalone page (/menu-photo/) ========================================================================== */ .photobody { background: var(--paper); } .photobar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 12px var(--gut); background: var(--accent); } /* back button uses the site .btn/.btn--on-accent pill; just tune size + chevron */ .photobar__back { gap: .45em; padding: .8em 1.6em; } .photobar__chev { font-size: 1.35em; line-height: 1; } .photomain { max-width: 960px; margin-inline: auto; padding: clamp(22px, 4vw, 44px) 0 64px; } .photomenu { max-width: 900px; margin-inline: auto; } /* ============================================================ POP-UP — client message published from the Catlas portal. Always a centred card, on every screen size. It sits above .nav__scrim (z-index 99) and scrolls inside itself rather than growing past the viewport on a short phone screen. ============================================================ */ .popup { position: fixed; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(420px, calc(100vw - 32px)); padding: 30px 28px; background: var(--cream, #F6F1E4); border: 1px solid rgba(51,51,51,.12); border-radius: 2px; text-align: center; max-height: calc(100vh - 32px); overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease); } .popup.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); } .popup__title { font-family: var(--font-display, "Montserrat", sans-serif); font-size: 1.12rem; font-weight: 600; color: var(--ink, #333); margin-bottom: 8px; } .popup__body { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--ink-soft, #666); } .popup__x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #999; font-size: .78rem; line-height: 1; cursor: pointer; } .popup__x:hover { color: var(--ink, #333); } @media (prefers-reduced-motion: reduce) { .popup { transition: none; } } /* ============================================================================ READABLE À LA CARTE — structured menu (assets/js/menu-data.js) Real, reflowing text instead of a shrunken US-Letter PDF: upright type at 16-17px, dark-gray descriptions, prices in the darker gold for contrast, and section chips that stick under the transparent nav. ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* the menu scrolls inside a capped-height window so the page stays a normal length; chips stay pinned at the window's top, a fade marks more below, and reaching the end hands the scroll back to the page */ .menu__view--html { position: relative; background: #fff; border-radius: 4px; max-height: 70vh; max-height: min(70svh, 760px); overflow-y: auto; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(51,51,51,.25) transparent; } .menu__view--html::after { content: ""; position: sticky; bottom: 0; display: block; height: 44px; margin-top: -44px; background: linear-gradient(rgba(255,255,255,0), #fff 85%); pointer-events: none; } .hm { --hm-pad: clamp(18px, 4vw, 56px); max-width: 900px; margin: 0 auto; padding: 0 var(--hm-pad) clamp(28px, 4vw, 48px); color: var(--ink); } /* sticky bar (no clipping) wraps the sideways-scrolling chip strip */ .hm__bar { position: sticky; top: 0; z-index: 3; margin: 0 calc(-1 * var(--hm-pad)); background: #fff; border-bottom: 1px solid var(--line); border-radius: 4px 4px 0 0; } .hm__chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px var(--hm-pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hm__chips::-webkit-scrollbar { display: none; } .hm__chip { flex: none; font: 600 .78rem/1 Montserrat, sans-serif; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; padding: .75em 1.1em; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); background: #fff; transition: background .2s, color .2s, border-color .2s; } .hm__chip:hover { border-color: var(--accent); } .hm__chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .hm__section { padding-top: 2.4rem; scroll-margin-top: 80px; } .hm__title { margin: 0; font: 700 clamp(1.3rem, 3.4vw, 1.65rem)/1.2 Montserrat, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); } .hm__title::after { content: ""; display: block; width: 44px; height: 3px; margin-top: .65rem; background: var(--accent); border-radius: 2px; } .hm__note { margin: .8rem 0 0; font: 400 1rem/1.55 var(--font); color: #555; } .hm__note--foot { margin-top: 1.2rem; font-size: .92rem; font-style: italic; } .hm__items { list-style: none; margin: .6rem 0 0; padding: 0; } @media (min-width: 760px) { .hm__items--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.75rem; } } .hm__item { padding: 1.05rem 0; border-bottom: 1px solid var(--line); } .hm__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .hm__name { font: 600 1.05rem/1.35 Montserrat, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); } .hm__price { font: 600 1.05rem/1.35 Montserrat, sans-serif; color: var(--gold-deep); white-space: nowrap; font-variant-numeric: tabular-nums; } .hm__desc { margin: .35rem 0 0; max-width: 62ch; font: 400 1rem/1.55 var(--font); color: #555; } .hm__incl { margin: .45rem 0 0; padding: 0 0 0 1.1rem; font: 400 1rem/1.6 var(--font); color: var(--ink); } .hm__incl li::marker { color: var(--accent); } .hm__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0 1.75rem; margin: .7rem 0 0; } .hm__opt { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px dotted rgba(51,51,51,.25); font: 400 .98rem/1.35 var(--font); color: var(--ink); } .hm__opt b { font: 600 .98rem/1.35 Montserrat, sans-serif; color: var(--gold-deep); font-variant-numeric: tabular-nums; white-space: nowrap; } .hm__groups { display: grid; gap: 1.6rem 2.75rem; margin-top: 1.2rem; } @media (min-width: 760px) { .hm__groups { grid-template-columns: 1fr 1fr; } } .hm__gtitle { margin: 0; font: 600 .8rem/1 Montserrat, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); } .hm__group .hm__opts { grid-template-columns: 1fr; margin-top: .4rem; } .hm__table { width: 100%; margin-top: 1rem; border-collapse: collapse; } .hm__table th { padding: 0 0 .5rem .5rem; font: 600 .74rem/1.25 Montserrat, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-align: right; vertical-align: bottom; border-bottom: 2px solid var(--ink); } .hm__table th:first-child { padding-left: 0; text-align: left; } .hm__table td { padding: .8rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; } .hm__table td.n { font: 600 1.02rem/1.3 Montserrat, sans-serif; color: var(--ink); padding-right: .75rem; } .hm__table td.n small { display: block; margin-top: .15rem; font: 400 .88rem/1.35 var(--font); color: var(--ink-soft); } /* a row's description gets its own full-width line beneath it */ .hm__table tr.has-d td { border-bottom: 0; padding-bottom: .3rem; } .hm__table tr.dr td { padding: 0 0 .85rem; font: 400 .95rem/1.5 var(--font); color: #555; } .hm__table td.p { width: 4.5rem; text-align: right; font: 600 1.02rem/1.3 Montserrat, sans-serif; color: var(--gold-deep); font-variant-numeric: tabular-nums; white-space: nowrap; } .hm__table td.p.none { color: var(--muted); font-weight: 400; } .hm__pdf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2.6rem; padding: 1.1rem 1.25rem; background: var(--cream); border-radius: 6px; font: 400 .95rem/1.45 var(--font); color: var(--ink); } .hm__pdf a { font: 600 .8rem/1 Montserrat, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ink); padding: .9em 1.3em; border-radius: 999px; text-decoration: none; white-space: nowrap; } /* end-of-tab link to the sibling tab ("See the Drinks Menu →") */ .hm__switch { display: block; width: 100%; margin-top: 2.4rem; padding: 1rem 1.25rem; border: 2px solid var(--accent); border-radius: 999px; background: #fff; color: var(--accent-deep); font: 600 .9rem/1.2 Montserrat, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; } .hm__switch:hover, .hm__switch:focus-visible { background: var(--accent); color: #fff; } .hm__switch + .hm__pdf { margin-top: 1.25rem; }