/* ============================================================================ HALL OF FAME — Full Landing Page Styles ============================================================================ */ /* Visually hidden but readable by screen readers & search engines (SEO h1) */ .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; } :root { /* Palette: warm, dark pub tones */ --black: #0A0806; --dark: #131110; --dark-2: #1A1715; --wood: #2A2018; --amber: #D4A574; --gold: #C89B3C; --cream: #F4E9D1; --cream-muted:#BCB09C; --white: #FAFAF8; --red: #C0392B; --green: #3BA058; --green-dark: #2E7D45; /* Type */ --font-display: 'Archivo Black', 'Impact', sans-serif; --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Motion */ --ease-out-expo: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ===== RESET ===== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Horizontal clipping must NOT turn an element into a scroll container, or position:fixed children stop being viewport-anchored on the compositor and lag behind during fast scrolling (the navbar renders partway down the page). `overflow-x: hidden` does exactly that: it forces overflow-y to compute to `auto`. `overflow-x: clip` leaves overflow-y `visible`, so the viewport stays the only scroller. Kept on rather than so iOS Safari doesn't reassign the root scroller either. `hidden` stays as the fallback for browsers without `clip`. */ overflow-x: hidden; } @supports (overflow: clip) { html { overflow-x: clip; } } body { margin: 0; padding: 0; background: var(--black); color: var(--cream); font-family: var(--font-body); line-height: 1.6; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5, h6, p { margin: 0; } /* ===== CONTAINER ===== */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 3rem); } /* ============================================================================ LOADING SCREEN ============================================================================ */ .loader { position: fixed; inset: 0; z-index: 9999; background: var(--black); display: flex; align-items: center; justify-content: center; animation: hide-loader 0.4s ease forwards 1.2s; } @keyframes hide-loader { to { opacity: 0; pointer-events: none; visibility: hidden; } } .loader__logo-wrap { position: relative; width: clamp(140px, 25vw, 200px); } .loader__logo { width: 100%; height: auto; display: block; } .loader__logo--base { opacity: 0.15; filter: grayscale(100%); } .loader__shine { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; clip-path: inset(0 100% 0 0); animation: shine-sweep 1s cubic-bezier(0.65, 0, 0.35, 1) forwards 0.1s; } @keyframes shine-sweep { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } } /* ============================================================================ NAVBAR ============================================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 2.2rem 0; background: transparent; transition: background 0.5s ease, padding 0.5s ease, backdrop-filter 0.5s ease, transform 0.5s var(--ease-out-expo); transform: translateY(0); } .nav.is-scrolled { background: rgba(10, 8, 6, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 1rem 0; border-bottom: 1px solid rgba(212, 165, 116, 0.12); } .nav__inner { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1rem, 2vw, 1.5rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } .nav__inner > .nav__left { justify-self: start; } .nav__inner > .nav__links { justify-self: center; } .nav__inner > .nav__actions { justify-self: end; } .nav__left { display: flex; align-items: center; gap: 0.6rem; } .nav__actions { display: flex; align-items: center; gap: 1rem; } .nav__logo { display: flex; align-items: center; transition: opacity 0.45s var(--ease-out-expo), transform 0.45s var(--ease-out-expo); opacity: 0; transform: translateY(-6px) scale(0.92); pointer-events: none; } .nav.is-scrolled .nav__logo { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .nav__logo:hover { opacity: 0.75; } .nav__logo-img { height: 54px; width: auto; display: block; mix-blend-mode: screen; } @media (max-width: 768px) { .nav__logo-img { height: 44px; } } .nav__links { display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.75rem); } .nav__links a { position: relative; font-family: var(--font-heading); font-size: 1rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); transition: color 0.3s; } /* Animated gold underline that grows on hover */ .nav__links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out-expo); } .nav__links a:hover { color: var(--amber); } .nav__links a:hover::after { transform: scaleX(1); } .nav__cta { background: var(--gold); color: var(--black); padding: 0.6rem 1.6rem; border-radius: 100px; border: none; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.03em; transition: transform 0.3s var(--ease-out-expo), opacity 0.3s; } .nav__cta:hover { transform: scale(1.04); opacity: 0.9; } .nav__lang { background: transparent; border: 1px solid rgba(245, 235, 217, 0.25); color: var(--cream-muted); padding: 0.45rem 0.85rem; border-radius: 100px; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: color 0.3s, border-color 0.3s, background 0.3s; } .nav__lang:hover { color: var(--cream); border-color: var(--amber); } .nav__ig { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(245, 235, 217, 0.25); color: var(--cream-muted); transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s; } .nav__ig:hover { color: var(--cream); border-color: var(--amber); transform: translateY(-1px); } .nav__ig--mobile { width: 34px; height: 34px; } .nav__mobile-actions { display: none; align-items: center; gap: 0.6rem; } .nav__mobile-social { display: none; align-items: center; gap: 0.6rem; } .nav__cta--mobile { padding: 0.5rem 1rem; font-size: 0.75rem; } /* Language toggle straight on the mobile bar, so it can be switched without opening the drawer. Tighter than the desktop pill — it shares the bar with the Order button and the burger. Hidden on desktop by its parent (.nav__mobile-actions), which is display:none above 768px. */ .nav__lang--mobile { padding: 0.42rem 0.6rem; font-size: 0.66rem; letter-spacing: 0.04em; white-space: nowrap; flex: none; } .mobile-menu__lang { margin-top: 0.5rem; background: rgba(245, 235, 217, 0.05); border: 1px solid rgba(245, 235, 217, 0.25); color: var(--cream-muted); padding: 0.7rem 1.6rem; border-radius: 100px; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.1em; cursor: pointer; /* Entrance (paired with .mobile-menu.is-open rule above) */ opacity: 0; transform: translateY(24px); transition: color 0.3s, border-color 0.3s, background 0.3s, opacity 0.5s ease, transform 0.5s var(--ease-out-expo); } .mobile-menu__lang:hover { color: var(--cream); border-color: var(--amber); background: rgba(212, 165, 116, 0.12); } .nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav__burger span { display: block; width: 24px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } .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); } /* Mobile menu */ .mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; background: rgba(10, 8, 6, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; opacity: 0; pointer-events: none; /* visibility (not just opacity) so the links leave the tab order while the drawer is closed — otherwise keyboard users tab into invisible controls. */ visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; } .mobile-menu.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.4s ease, visibility 0s; } .mobile-menu__link { position: relative; font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3rem); text-transform: uppercase; color: var(--cream); /* Entrance: each item rises + fades when the drawer opens */ opacity: 0; transform: translateY(24px); transition: color 0.3s, opacity 0.5s ease, transform 0.5s var(--ease-out-expo); } .mobile-menu__link:hover { color: var(--amber); } .mobile-menu.is-open .mobile-menu__link, .mobile-menu.is-open .mobile-menu__lang { opacity: 1; transform: translateY(0); } .mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.06s; } .mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.12s; } .mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.18s; } .mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 0.24s; } .mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: 0.30s; } .mobile-menu.is-open .mobile-menu__lang { transition-delay: 0.38s; } .mobile-menu__cta { font-size: clamp(1rem, 3vw, 1.2rem) !important; font-family: var(--font-heading) !important; background: var(--gold); color: var(--black) !important; padding: 0.8rem 2.4rem; border-radius: 100px; margin-top: 0.5rem; transition: color 0.3s, opacity 0.5s ease, transform 0.5s var(--ease-out-expo), box-shadow 0.3s ease; } .mobile-menu__cta:hover { box-shadow: 0 10px 30px rgba(200, 155, 60, 0.35); } /* Social row inside the drawer — where the icons live now that they've left the crowded top bar on mobile. */ .mobile-menu__social { display: flex; gap: 1.1rem; margin-top: 1.25rem; opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s var(--ease-out-expo); } .mobile-menu.is-open .mobile-menu__social { opacity: 1; transform: translateY(0); transition-delay: 0.44s; } .mobile-menu__social .nav__ig { width: 46px; height: 46px; } @media (max-width: 768px) { .nav__links { display: none; } .nav__actions { display: none; } .nav__inner { grid-template-columns: auto 1fr auto; } .nav__inner > .nav__mobile-actions { justify-self: end; } .nav__mobile-social { display: flex; } .nav__mobile-actions { display: flex; } .nav__burger { display: flex; } } /* ============================================================================ HERO ============================================================================ */ .hero { position: relative; width: 100%; height: calc(100vh - 3.7rem); /* dvh tracks the browser chrome's real, current height on mobile instead of the old 100vh (which used the largest possible viewport). Without this the hero is sized taller than the visible area while the address bar is showing, so the page loads pre-scrolled and the fixed navbar reads as floating with a gap above it. Browsers without dvh support just ignore this line and keep the vh value above. */ height: calc(100dvh - 3.7rem); min-height: 580px; overflow: hidden; isolation: isolate; background: var(--black); } .hero__bg { position: absolute; inset: -4%; z-index: 0; background-image: url('assets/img/hero-pub.webp'); background-size: cover; background-position: center; transform: scale(1.08); will-change: transform; animation: hero-bg-in 1s var(--ease-out-expo) both; } .hero__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 55% 45%, transparent 30%, rgba(10, 8, 6, 0.6) 85%), linear-gradient(180deg, rgba(10, 8, 6, 0.3) 0%, transparent 40%, rgba(10, 8, 6, 0.6) 100%); } .hero__ambient { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero__spotlight { position: absolute; inset: 0; background: radial-gradient(circle at 55% 20%, rgba(212, 165, 116, 0.18) 0%, transparent 50%); mix-blend-mode: screen; } /* Content (text sits behind the foreground cutout) */ .hero__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 clamp(1.5rem, 5vw, 6rem); pointer-events: none; text-align: center; } /* Logo watermark shown on entry (replaces the old headline text) */ .hero__logo-mark { position: relative; width: clamp(200px, 34vw, 420px); max-width: 72vw; opacity: 0; transform: scale(0.84); animation: hero-logo-in 1.2s var(--ease-out-expo) 0.25s forwards; will-change: transform, opacity; filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.55)); } .hero__logo-img { width: 100%; height: auto; display: block; } @keyframes hero-logo-in { 0% { opacity: 0; transform: scale(0.84); filter: blur(8px) drop-shadow(0 8px 28px rgba(0,0,0,0.55)); } 100% { opacity: 0.65; transform: scale(1); filter: blur(0) drop-shadow(0 8px 28px rgba(0,0,0,0.55)); } } .hero__title { font-family: var(--font-display); font-size: clamp(3.5rem, 10vw, 13rem); font-weight: 900; line-height: 0.82; letter-spacing: -0.04em; color: var(--cream); margin: 0; mix-blend-mode: screen; will-change: transform, opacity; text-transform: uppercase; font-style: normal; font-synthesis: none; } .hero__title-line { display: block; clip-path: inset(0 50% 0 50%); filter: blur(12px); opacity: 0; animation: title-reveal 0.9s var(--ease-out-expo) forwards; } .hero__title-line:nth-child(1) { animation-delay: 0.3s; } .hero__title-line:nth-child(2) { animation-delay: 0.5s; } .hero__subtitle { font-family: var(--font-heading); font-weight: 500; font-size: clamp(0.75rem, 1vw, 0.95rem); letter-spacing: 0.25em; text-transform: uppercase; color: var(--amber); margin-top: clamp(1rem, 2vw, 1.75rem); opacity: 0; transform: translateY(8px); animation: fade-up 0.6s var(--ease-out-expo) 1.2s forwards; } .hero__subtitle .dot { color: var(--gold); margin: 0 0.5em; opacity: 0.7; } /* Particles */ .hero__particles { position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1.2s ease-out; } .hero__particles.is-active { opacity: 1; } /* Grain */ .hero__grain { position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: overlay; opacity: 0.04; } .hero__grain svg { width: 100%; height: 100%; opacity: 0.85; } /* Vignette */ .hero__vignette { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(10, 8, 6, 0.5) 100%); } /* Scroll indicator */ .hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; flex-direction: column; align-items: center; opacity: 0; animation: fade-up 0.6s var(--ease-out-expo) 1.8s forwards; } .hero__scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--amber), transparent); animation: scroll-pulse 2s var(--ease-in-out) infinite; } /* Keyframes */ @keyframes hero-bg-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1.08); } } @keyframes title-reveal { to { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; } } @keyframes fade-up { to { opacity: 0.9; transform: translateY(0); } } @keyframes scroll-pulse { 0%, 100% { opacity: 0.3; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.1); } } /* Hero responsive */ @media (max-width: 768px) { .hero__title { font-size: clamp(2.5rem, 12vw, 4.5rem); } .hero__subtitle { font-size: 0.7rem; letter-spacing: 0.18em; } /* On a tall narrow screen the crest landed dead-centre on the burger tower and the two competed. Lift it into the upper third — over the calmer part of the shot — and give it a touch more presence + a soft dark pad so it reads cleanly against the busy photo. */ .hero__content { justify-content: flex-start; padding-top: 15vh; } .hero__logo-mark { width: clamp(190px, 52vw, 260px); max-width: 74vw; } .hero__logo-img { filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.7)); } /* Deepen the photo so the white crest and headline stay legible */ .hero__bg::after { background: radial-gradient(ellipse at 50% 30%, transparent 24%, rgba(10, 8, 6, 0.72) 92%), linear-gradient(180deg, rgba(10, 8, 6, 0.45) 0%, transparent 42%, rgba(10, 8, 6, 0.72) 100%); } } /* ============================================================================ MARQUEE ============================================================================ */ .marquee { position: relative; z-index: 10; background: var(--black); border-top: 1px solid rgba(200, 155, 60, 0.2); border-bottom: 1px solid rgba(200, 155, 60, 0.2); overflow: hidden; padding: 1.15rem 0; width: 100%; margin-top: -2.5rem; } .marquee__track { display: flex; align-items: center; white-space: nowrap; animation: marquee-scroll 30s linear infinite; width: max-content; will-change: transform; } .marquee__track > * { margin-right: 2.5rem; flex-shrink: 0; } .marquee__track span { font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.4rem); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } .marquee__dot { width: 7px !important; height: 7px !important; border-radius: 50%; background: var(--gold); display: inline-block; flex-shrink: 0; opacity: 0.7; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================================ SECTIONS (shared) ============================================================================ */ .section { padding: clamp(5rem, 10vw, 8rem) 0; } .section-header { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); } .section-label { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.75rem; } .section-title { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); text-transform: uppercase; letter-spacing: -0.02em; color: var(--cream); line-height: 1; } /* ============================================================================ MENU SECTION ============================================================================ */ .menu-section { background: var(--black); position: relative; overflow: hidden; } /* The dark wood from the printed posters, kept barely-there so the cutouts sit on their native material without stealing contrast from the food. */ .menu-section::before { content: ''; position: absolute; inset: 0; background-image: url('assets/menu/wood-backdrop.webp'); background-size: cover; background-position: center; opacity: 0.34; pointer-events: none; } /* Vignette so the wood dissolves into pure black at the section edges */ .menu-section::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--black) 0%, transparent 18%, transparent 82%, var(--black) 100%), radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(10, 8, 6, 0.75) 100%); pointer-events: none; } .menu-section .container { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- Signature showcase — the two promo posters brought to life: real cutout photography floating over a pool of warm light, named in the campaign's green script (Lobster). Layers: .signature__layer carries scroll parallax (--par, set in JS), .signature__float carries the idle bobbing animation, and the itself carries the hover response — three separate elements so the transforms never fight each other. -------------------------------------------------------------------------- */ .signatures { display: flex; flex-direction: column; gap: clamp(4.5rem, 9vw, 7.5rem); } .signature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); } /* Flipped row: mirror the columns so the burger stage keeps the WIDER track (order alone would hand the wide 1.15fr column to the text instead). */ .signature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .signature--flip .signature__stage { order: 2; } .signature--flip .signature__text { order: 1; } /* Stage: where the cutouts live */ .signature__stage { position: relative; min-height: clamp(280px, 40vw, 500px); display: flex; align-items: center; justify-content: center; /* Reveal: the plate rises and settles */ opacity: 0; transform: translateY(56px) scale(0.96); transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo); } .signature.is-visible .signature__stage { opacity: 1; transform: none; } .signature__glow { position: absolute; inset: 4%; background: radial-gradient(closest-side, rgba(212, 165, 116, 0.16), rgba(59, 160, 88, 0.05) 55%, transparent 75%); filter: blur(12px); opacity: 0; transform: scale(0.85); transition: opacity 1.6s ease 0.3s, transform 1.6s var(--ease-out-expo) 0.3s; } .signature.is-visible .signature__glow { opacity: 1; transform: scale(1); } .signature__layer { position: relative; z-index: 2; width: 100%; transform: translate3d(0, var(--par, 0px), 0); will-change: transform; } .signature__layer--bottle { position: absolute; z-index: 1; width: 24%; right: 4%; top: -14%; } .signature__float { animation: sig-float 7s ease-in-out infinite alternate; } .signature__float--slow { animation: sig-float-alt 9.5s ease-in-out infinite alternate; } .signature__float--offset { animation-delay: -3.5s; } @keyframes sig-float { from { transform: translateY(-7px) rotate(-0.7deg); } to { transform: translateY(8px) rotate(0.7deg); } } @keyframes sig-float-alt { from { transform: translateY(6px); } to { transform: translateY(-10px); } } .signature__cutout { display: block; width: 100%; max-width: 620px; margin: 0 auto; height: auto; filter: drop-shadow(0 34px 42px rgba(0, 0, 0, 0.62)); transition: transform 0.6s var(--ease-out-expo), filter 0.6s ease; } .signature__stage:hover .signature__cutout { transform: scale(1.045) rotate(-1.4deg); filter: drop-shadow(0 48px 56px rgba(0, 0, 0, 0.72)); } .signature__bottle { display: block; width: 100%; height: auto; transform: rotate(7deg); filter: drop-shadow(0 26px 32px rgba(0, 0, 0, 0.55)); opacity: 0.94; } /* Copy: eyebrow → green script → description, cascading in */ .signature__eyebrow, .signature__title, .signature__desc { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); } .signature.is-visible .signature__eyebrow { opacity: 1; transform: none; transition-delay: 0.2s; } .signature.is-visible .signature__title { opacity: 1; transform: none; transition-delay: 0.32s; } .signature.is-visible .signature__desc { opacity: 1; transform: none; transition-delay: 0.46s; } .signature__eyebrow { font-family: var(--font-heading); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; } .signature__title { font-family: 'Lobster', cursive; font-weight: 400; color: var(--green); line-height: 1.02; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 10px 34px rgba(59, 160, 88, 0.22); } .signature__title-main { font-size: clamp(2.7rem, 5.5vw, 4.4rem); } .signature__title-sub { font-size: clamp(1.6rem, 3.2vw, 2.5rem); margin-left: 0.35rem; } .signature__desc { margin-top: 1.4rem; font-size: 0.95rem; line-height: 1.7; color: var(--cream-muted); max-width: 46ch; } @media (max-width: 860px) { .signature, .signature--flip { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; } .signature--flip .signature__stage { order: 0; } .signature--flip .signature__text { order: 1; } .signature__stage { min-height: 0; } .signature__cutout { max-width: min(500px, 88vw); } .signature__layer--bottle { width: 17%; right: 4%; top: -6%; } .signature__desc { margin-left: auto; margin-right: auto; } } /* Intro note under the section title */ .section-note { max-width: 640px; margin: 1rem auto 0; font-size: 0.92rem; line-height: 1.6; color: var(--cream-muted); } /* -------------------------------------------------------------------------- Menu intro — the "Home of Best Tasting Burger" poster rebuilt live: the green script headline stacked like the print artwork, the three-burger cutout on its plank, and the starred tagline underneath. -------------------------------------------------------------------------- */ .menu-intro { text-align: center; margin-bottom: clamp(4.5rem, 9vw, 7.5rem); } .menu-intro .section-label { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .menu-intro.is-visible .section-label { opacity: 1; transform: none; } .menu-intro__title { font-family: 'Lobster', cursive; font-weight: 400; color: var(--green); line-height: 0.98; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 12px 38px rgba(59, 160, 88, 0.2); margin-bottom: clamp(0.5rem, 2vw, 1.5rem); } .menu-intro__line { display: block; opacity: 0; transform: translateY(26px) rotate(-1.5deg); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); } .menu-intro.is-visible .menu-intro__line { opacity: 1; transform: none; } .menu-intro.is-visible .menu-intro__line--sm { transition-delay: 0.1s; } .menu-intro.is-visible .menu-intro__line--lg { transition-delay: 0.22s; } .menu-intro.is-visible .menu-intro__line--md { transition-delay: 0.34s; } .menu-intro__line--sm { font-size: clamp(1.7rem, 3.4vw, 2.7rem); } .menu-intro__line--lg { font-size: clamp(2.9rem, 6.2vw, 5rem); } .menu-intro__line--md { font-size: clamp(2.2rem, 4.6vw, 3.7rem); } .menu-intro__stage { position: relative; max-width: 980px; margin: clamp(1rem, 3vw, 2rem) auto 0; } .menu-intro__glow { position: absolute; inset: -18% 4%; background: radial-gradient(closest-side, rgba(212, 165, 116, 0.15), rgba(59, 160, 88, 0.05) 55%, transparent 78%); filter: blur(12px); opacity: 0; transform: scale(0.85); transition: opacity 1.6s ease 0.5s, transform 1.6s var(--ease-out-expo) 0.5s; } .menu-intro.is-visible .menu-intro__glow { opacity: 1; transform: scale(1); } .menu-intro__layer { position: relative; transform: translate3d(0, var(--par, 0px), 0); will-change: transform; } .menu-intro__trio { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 38px rgba(0, 0, 0, 0.6)); /* The plank is cropped square in the source photo — fade its cut ends into the black stage so the board appears to emerge from the dark. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); opacity: 0; transform: translateY(46px) scale(0.96); transition: opacity 1s var(--ease-out-expo) 0.35s, transform 1s var(--ease-out-expo) 0.35s; } .menu-intro.is-visible .menu-intro__trio { opacity: 1; transform: none; } .menu-intro__tagline { font-family: 'Lobster', cursive; font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--green); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); margin-top: clamp(1.5rem, 3.5vw, 2.5rem); opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-out-expo) 0.55s, transform 0.8s var(--ease-out-expo) 0.55s; } .menu-intro.is-visible .menu-intro__tagline { opacity: 1; transform: none; } .menu-intro__star { font-family: var(--font-body); font-size: 0.55em; vertical-align: 0.35em; margin: 0 0.6rem; } /* View full catalog */ .menu-cta { display: flex; justify-content: center; margin-top: clamp(3rem, 6vw, 4.5rem); } .menu-catalog-btn { position: relative; font-family: var(--font-heading); font-weight: 600; font-size: clamp(0.92rem, 1.3vw, 1.05rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); /* Matte: flat, muted forest green — no gloss, no glow */ background: var(--green-dark); border: 1px solid rgba(244, 233, 209, 0.16); padding: 1.05rem 2.8rem; border-radius: 100px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); transition: transform 0.3s var(--ease-out-expo), background 0.3s ease, border-color 0.3s ease; } /* Trailing arrow nudges toward the catalog */ .menu-catalog-btn::after { content: '\2192'; display: inline-block; margin-left: 0.65rem; opacity: 0.85; transition: transform 0.3s var(--ease-out-expo); } .menu-catalog-btn:hover { transform: translateY(-3px) scale(1.02); background: var(--green); border-color: rgba(244, 233, 209, 0.34); box-shadow: 0 13px 28px rgba(0, 0, 0, 0.42); } .menu-catalog-btn:hover::after { transform: translateX(4px); } .menu-catalog-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; } /* ============================================================================ GALLERY SECTION ============================================================================ */ .gallery-section { background: var(--dark); } .gallery { position: relative; margin-top: clamp(2rem, 4vw, 3rem); border-radius: 18px; overflow: hidden; border: 1px solid rgba(212, 165, 116, 0.12); background: #000; opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .gallery.is-visible { opacity: 1; transform: translateY(0); } .gallery__track { display: flex; width: 100%; transition: transform 0.8s var(--ease-out-expo); will-change: transform; } .gallery__slide { flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; } .gallery__btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.45); color: var(--cream); border: 1px solid rgba(212, 165, 116, 0.25); width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.3s, border-color 0.3s, transform 0.3s; display: grid; place-items: center; z-index: 2; } .gallery__btn:hover { background: rgba(212, 165, 116, 0.2); border-color: rgba(212, 165, 116, 0.5); } .gallery__btn--prev { left: 14px; } .gallery__btn--next { right: 14px; } .gallery__dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; } .gallery__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); background: transparent; padding: 0; cursor: pointer; transition: background 0.3s, transform 0.3s, border-color 0.3s; } .gallery__dot.is-active { background: var(--amber, #d4a574); border-color: var(--amber, #d4a574); transform: scale(1.2); } @media (max-width: 768px) { .gallery__slide { aspect-ratio: 4 / 3; } .gallery__btn { width: 40px; height: 40px; font-size: 1.3rem; } .gallery__btn--prev { left: 8px; } .gallery__btn--next { right: 8px; } } /* ============================================================================ ABOUT SECTION ============================================================================ */ .about-section { background: var(--black); } .about-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; max-width: 1050px; margin: 0 auto; } .about-mark { display: flex; justify-content: center; } .about-mark__img { width: clamp(200px, 28vw, 340px); height: auto; mix-blend-mode: screen; } .about-text p { font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.8; color: var(--cream-muted); margin-bottom: 1.1rem; } .about-text .about-closing { color: var(--cream); font-style: italic; } .about-sign { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(212, 165, 116, 0.18); } .about-sign__name { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.02em; color: var(--amber); } .about-sign__role { font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-muted); margin-top: 0.25rem; } @media (max-width: 880px) { .about-wrap { grid-template-columns: 1fr; text-align: center; } .about-sign { display: inline-block; } } /* ============================================================================ FIND US SECTION ============================================================================ */ .findus-section { background: var(--black); } .findus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(212, 165, 116, 0.06); border: 1px solid rgba(212, 165, 116, 0.06); border-radius: 16px; overflow: hidden; margin-bottom: clamp(3rem, 6vw, 4rem); } .findus-card { background: var(--dark); padding: clamp(2rem, 4vw, 3rem); /* Reveal */ opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); } .findus-card.is-visible { opacity: 1; transform: translateY(0); } .findus-card:nth-child(2).is-visible { transition-delay: 0.1s; } .findus-card:nth-child(3).is-visible { transition-delay: 0.2s; } .findus-card h3 { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--cream); margin-bottom: 1rem; letter-spacing: 0.02em; } .findus-card p { font-size: 0.9rem; line-height: 1.7; color: var(--cream-muted); } .findus-closed { color: var(--amber); opacity: 0.7; } .findus-link { display: inline-block; margin-top: 1rem; font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; color: var(--amber); letter-spacing: 0.02em; transition: opacity 0.3s; } .findus-link:hover { opacity: 0.7; } .findus-map { border-radius: 16px; overflow: hidden; border: 1px solid rgba(212, 165, 116, 0.06); /* Reveal */ opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .findus-map.is-visible { opacity: 1; transform: translateY(0); } .findus-map iframe { display: block; width: 100%; } @media (max-width: 768px) { .findus-grid { grid-template-columns: 1fr; } } /* ============================================================================ FOOTER ============================================================================ */ .footer { background: var(--dark); border-top: 1px solid rgba(212, 165, 116, 0.06); padding: clamp(3rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem); } .footer-inner { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 2rem; } .footer-logo-img { height: 56px; width: auto; display: block; margin-bottom: 0.75rem; mix-blend-mode: screen; } .footer-brand p { font-size: 0.85rem; color: var(--cream-muted); } .footer-links { display: flex; gap: 2rem; } .footer-links a { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 500; color: var(--cream-muted); transition: color 0.3s; } .footer-links a:hover { color: var(--cream); } .footer-copy { width: 100%; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid rgba(212, 165, 116, 0.06); } .footer-copy p { font-size: 0.78rem; color: var(--cream-muted); opacity: 0.5; } /* ============================================================================ ORDER MODAL ============================================================================ */ .order-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; /* Keeps the close button / phone link out of the tab order while closed. */ visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; } .order-modal.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.35s ease, visibility 0s; } .order-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .order-modal__panel { position: relative; background: var(--dark); border: 1px solid rgba(212, 165, 116, 0.12); border-radius: 20px; padding: clamp(2rem, 5vw, 3rem); max-width: 440px; width: 90%; text-align: center; transform: translateY(20px) scale(0.96); transition: transform 0.4s var(--ease-out-expo); } .order-modal.is-open .order-modal__panel { transform: translateY(0) scale(1); } .order-modal__close { position: absolute; top: 1rem; right: 1.25rem; background: none; border: none; color: var(--cream-muted); font-size: 1.8rem; cursor: pointer; line-height: 1; transition: color 0.2s, transform 0.2s; } .order-modal__close:hover { color: var(--cream); transform: scale(1.15); } .order-modal__logo { width: 72px; height: auto; margin: 0 auto 1.25rem; display: block; mix-blend-mode: screen; } .order-modal__title { font-family: var(--font-heading); font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 600; color: var(--cream); margin-bottom: 1.75rem; } .order-modal__options { display: flex; flex-direction: column; gap: 0.75rem; } .order-modal__btn { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-radius: 14px; border: 1px solid rgba(212, 165, 116, 0.1); background: var(--dark-2); text-decoration: none; transition: background 0.3s, border-color 0.3s, transform 0.25s var(--ease-out-expo); } .order-modal__btn:hover { background: var(--wood); border-color: rgba(212, 165, 116, 0.25); transform: translateY(-2px); } .order-modal__btn-icon { font-size: 1.6rem; flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .order-modal__btn--efood .order-modal__btn-icon { background: rgba(212, 165, 116, 0.15); padding: 2px; } .order-modal__btn-icon--efood svg { width: 100%; height: 100%; border-radius: 8px; } .order-modal__btn--phone .order-modal__btn-icon { background: rgba(76, 175, 80, 0.15); } .order-modal__btn-text { text-align: left; } .order-modal__btn-text strong { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: var(--cream); display: block; line-height: 1.3; } .order-modal__btn-text small { font-size: 0.78rem; color: var(--cream-muted); display: block; margin-top: 0.15rem; } /* ============================================================================ CATALOG LIGHTBOX ============================================================================ */ .catalog-modal { position: fixed; inset: 0; z-index: 210; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; /* Keeps the close button / "open full size" links out of the tab order. */ visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; } .catalog-modal.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.35s ease, visibility 0s; } .catalog-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .catalog-modal__panel { position: relative; z-index: 1; max-width: min(96vw, 1300px); max-height: 94vh; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; transform: scale(0.97); transition: transform 0.4s var(--ease-out-expo); } .catalog-modal.is-open .catalog-modal__panel { transform: scale(1); } .catalog-modal__img { max-width: 100%; max-height: 88vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } .catalog-modal__open { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); } .catalog-modal__open:hover { color: var(--cream); } .catalog-modal__close { position: absolute; top: -2.6rem; right: 0; background: none; border: none; color: var(--cream); font-size: 2.2rem; line-height: 1; cursor: pointer; transition: transform 0.2s, color 0.2s; } .catalog-modal__close:hover { transform: scale(1.15); color: var(--amber); } @media (max-width: 768px) { .catalog-modal__close { top: -2.2rem; right: 0.25rem; } .catalog-modal__img { max-height: 82vh; } } /* Flip-card hint & animation */ .catalog-modal__flip-hint { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); opacity: 0.75; margin: 0 0 0.75rem; cursor: pointer; transition: opacity 0.3s; text-align: center; user-select: none; } .catalog-modal__flip-hint:hover { opacity: 1; } .catalog-modal__panel { perspective: 1400px; } .catalog-card { display: grid; max-width: min(94vw, 860px); width: 100%; transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .catalog-card.is-flipped { transform: rotateY(180deg); } .catalog-card__face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .catalog-card__back { transform: rotateY(180deg); } /* ============================================================================ ATMOSPHERE STRIP ============================================================================ */ .atmosphere { padding: 0; background: var(--black); } .atmosphere__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 clamp(1.5rem, 4vw, 3rem); max-width: 1200px; margin: 0 auto; } .atmosphere__img { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background-size: cover; background-position: center; position: relative; overflow: hidden; /* Reveal */ opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .atmosphere__img.is-visible { opacity: 1; transform: translateY(0); } .atmosphere__img:nth-child(2).is-visible { transition-delay: 0.12s; } .atmosphere__img::after { content: ''; position: absolute; inset: 0; border-radius: 12px; border: 1px solid rgba(212, 165, 116, 0.06); } @media (max-width: 600px) { .atmosphere__grid { grid-template-columns: 1fr; } } /* ============================================================================ REDUCED MOTION ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero__title-line { clip-path: inset(0); filter: none; opacity: 1; } .hero__bg, .hero__foreground { opacity: 1; transform: none; animation: none; } .hero__particles { display: none; } .signature__stage, .signature__glow, .signature__eyebrow, .signature__title, .signature__desc, .menu-intro .section-label, .menu-intro__line, .menu-intro__glow, .menu-intro__trio, .menu-intro__tagline, .about-text, .about-visual, .findus-card, .findus-map, .atmosphere__img { opacity: 1; transform: none; } .signature__float, .signature__float--slow { animation: none; } .signature__layer, .menu-intro__layer { transform: none !important; } }