/* ================================================================ FONTS — self-hosted latin subsets (see the preloads in ) ================================================================ */ @font-face{ font-family:'Anton';font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/anton-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* one variable file covers every weight the site uses (400/600/700) */ @font-face{ font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap; src:url(../fonts/space-grotesk-latin-var.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* CLS: metric-matched fallbacks. font-display:swap means the fallback paints first, and if it sets type at a different size the swap REFLOWS the page — which is what produced the measured 0.08 CLS and the "fonts look wrong for a second" note in the README. These adjust the fallback to occupy the same space as the real face, so the swap is a restyle instead of a relayout. Values measured in-browser, not guessed. */ @font-face{ font-family:'Anton Fallback';src:local('Impact'),local('Haettenschweiler'),local('Arial Narrow Bold'); size-adjust:98.8%;ascent-override:119.4%;descent-override:33.4%;line-gap-override:0%; } @font-face{ font-family:'Grotesk Fallback';src:local('Segoe UI'),local('Helvetica Neue'),local('Arial'); size-adjust:94%;ascent-override:94.7%;descent-override:23.4%;line-gap-override:0%; } /* ================================================================ TOKENS — semantic, single source of truth ================================================================ */ :root{ --bg:#0c0b09; --bg-2:#12100c; --surface:#171511; --surface-2:#1f1c16; --surface-3:#272318; --cream:#f6f1e6; --muted:#b9b09c; --gold:#f2b705; --gold-2:#ffd23f; --gold-deep:#a87e04; --gold-soft:rgba(242,183,5,.12); --ember:#dc2626; --ember-hot:#ef4444; --green:#34d058; --amber:#f59e0b; --line:rgba(246,241,230,.11); --line-soft:rgba(246,241,230,.06); --max:1180px; --r-sm:10px; --r:16px; --r-lg:22px; --shadow-1:0 10px 30px -14px rgba(0,0,0,.7); --shadow-2:0 26px 60px -24px rgba(0,0,0,.85); --shadow-3:0 44px 100px -36px rgba(0,0,0,.92); /* premium depth & lighting */ --glass-hi:rgba(255,255,255,.07); /* inner top highlight on glass/cards */ --glass-hi-strong:rgba(255,255,255,.13); --glass-lo:rgba(0,0,0,.32); /* inner bottom shade */ --ring-gold:rgba(242,183,5,.55); --glow-gold:0 30px 80px -34px rgba(242,183,5,.27); --glow-gold-soft:0 18px 50px -28px rgba(242,183,5,.19); --ease:cubic-bezier(.22,.7,.25,1); --spring:cubic-bezier(.3,1.4,.4,1); /* z-scale */ --z-grain:60; --z-rail:90; --z-nav:100; --z-bar:110; --z-fab:120; --z-hover:150; --z-modal:210; --z-help:215; --z-loader:300; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:86px;-webkit-text-size-adjust:100%} body{ background:var(--bg);color:var(--cream); font-family:'Space Grotesk','Grotesk Fallback',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16.5px;line-height:1.6; overflow-x:hidden;-webkit-font-smoothing:antialiased; } ::selection{background:var(--gold);color:#1a1305} img{max-width:100%;display:block} [hidden]{display:none!important} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;color:inherit} button,a,input,label{touch-action:manipulation} input{font-family:inherit} .display{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-weight:400;letter-spacing:.01em;line-height:.92} :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px;border:2px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:#3a3424} .wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,5vw,48px)} section{position:relative} .skip{position:fixed;left:14px;top:-60px;z-index:calc(var(--z-loader) + 1);background:var(--gold);color:#1a1305;font-weight:700;padding:12px 20px;border-radius:10px;transition:top .25s var(--ease)} .skip:focus-visible{top:14px} /* film grain — fixed, decorative, under nav/overlays. PERF: inset:0, not -50%. The element is fixed and never transformed, so a viewport-sized box tiles identically — the old -50% made it 2x the viewport in BOTH axes, i.e. 4x the raster area (measured 3059x1464 for a 1540x732 viewport). */ .grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* scroll progress */ .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:calc(var(--z-nav) + 1);pointer-events:none} .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 14px rgba(242,183,5,.5)} /* ================================================================ BUTTONS ================================================================ */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:50px;padding:0 26px;border-radius:12px;border:1.5px solid transparent; font-weight:700;font-size:15.5px;letter-spacing:.02em;line-height:1;white-space:nowrap; transition:transform .22s var(--spring),background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease; overflow:hidden; } .btn:active{transform:scale(.97)} .btn .ar{transition:transform .22s var(--ease)} .btn-primary{background:var(--ember);color:#fff;box-shadow:0 14px 34px -14px rgba(220,38,38,.75)} .btn-ghost{border-color:rgba(246,241,230,.28);color:var(--cream)} .btn-gold{background:linear-gradient(135deg,var(--gold),#e3a904);color:#1a1305;box-shadow:0 14px 34px -16px rgba(242,183,5,.55)} .btn-primary::after,.btn-gold::after{ content:"";position:absolute;top:0;bottom:0;left:-70%;width:36%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent); transform:skewX(-22deg);transition:left .6s var(--ease); } /* hover-capable devices only — on touch, sticky :hover consumed the FIRST tap (it just applied the hover state; a second tap was needed to follow the link). Desktop always matches (hover:hover), so nothing changes there. */ @media (hover:hover){ .btn:hover .ar{transform:translateX(4px)} .btn-primary:hover{background:var(--ember-hot);transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(239,68,68,.8)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)} .btn-gold:hover{background:linear-gradient(135deg,var(--gold-2),var(--gold));transform:translateY(-2px)} .btn-primary:hover::after,.btn-gold:hover::after{left:135%} } .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none} /* ================================================================ NAV ================================================================ */ nav.site{ position:fixed;top:0;left:0;right:0;z-index:var(--z-nav); display:flex;align-items:center;justify-content:space-between; padding:13px clamp(18px,5vw,48px); border-bottom:1px solid transparent; transition:background .35s ease,border-color .35s ease,padding .35s ease,box-shadow .35s ease; } nav.site.scrolled{background:rgba(12,11,9,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line);padding-top:9px;padding-bottom:9px;box-shadow:var(--shadow-1)} .brand{display:flex;align-items:center;gap:11px} .brand-logo{height:46px;width:auto;display:block} .brand .nm{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:19px;line-height:.84;letter-spacing:.02em} .brand .nm b{display:block;color:var(--gold);font-size:12px;letter-spacing:.1em} .nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);list-style:none} .nav-links a:not(.btn){font-weight:600;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--cream);position:relative;padding:8px 2px} .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--gold);transition:width .3s var(--ease)} .nav-links a:not(.btn):hover,.nav-links a:not(.btn).active{color:var(--gold)} .nav-links a:not(.btn):hover::after,.nav-links a:not(.btn).active::after{width:100%} .nav-links .btn{min-height:44px;padding:0 20px;text-transform:none;font-size:14.5px} .burger{display:none;flex-direction:column;justify-content:center;gap:5.5px;background:none;border:none;padding:10px;z-index:calc(var(--z-nav) + 2);min-width:46px;min-height:46px} .burger span{width:26px;height:2.5px;background:var(--cream);border-radius:2px;transition:transform .3s var(--ease),opacity .2s} .nav-scrim{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:rgba(6,5,4,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s} .nav-scrim.show{opacity:1;visibility:visible} @media (max-width:880px){ /* the scrolled nav's backdrop-filter would make the bar a containing block for the fixed dropdown (clipping it to the bar height) — drop it so the panel fills the viewport */ nav.site.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none} .nav-links{ position:fixed;top:0;right:0;bottom:0;width:min(82vw,320px); background:linear-gradient(160deg,var(--surface),var(--bg-2)); flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:clamp(14px,3.2vh,24px); transform:translateX(102%);transition:transform .42s var(--ease); box-shadow:-30px 0 70px rgba(0,0,0,.6); padding:calc(76px + env(safe-area-inset-top)) 34px calc(28px + env(safe-area-inset-bottom)); z-index:calc(var(--z-nav) + 1); overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; } .nav-links.open{transform:none} .nav-links a:not(.btn){font-size:clamp(18px,2.6vh,21px);letter-spacing:.06em} .nav-links li{width:100%} .nav-links .btn{font-size:17px;min-height:52px;width:100%} .nav-links .nav-social{display:flex;gap:10px;margin-top:auto;padding-top:12px} .burger{display:flex} .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} } @media (min-width:881px){.nav-links .nav-social{display:none}} .nav-social a{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;color:var(--muted)} .nav-social a:hover{color:var(--gold);border-color:var(--gold)} /* ================================================================ HERO ================================================================ */ .hero{ min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden; padding:118px 0 64px; background: radial-gradient(90% 70% at 82% 28%, rgba(242,183,5,.13), transparent 60%), radial-gradient(70% 70% at 12% 88%, rgba(220,38,38,.10), transparent 55%), linear-gradient(180deg,#0c0b09,#16130d 55%,#0c0b09); } .hero-ghost{ position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-4deg); font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:clamp(7rem,24vw,21rem);line-height:1; color:transparent;-webkit-text-stroke:1.5px rgba(242,183,5,.09); letter-spacing:.04em;user-select:none;pointer-events:none;white-space:nowrap;z-index:0; } .hero-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;width:100%;position:relative;z-index:2} @media (min-width:881px){.hero-grid{grid-template-columns:0.9fr 1.18fr;gap:clamp(14px,2.4vw,40px)}} .hero-inner{position:relative;z-index:4;animation:heroIn 1s var(--ease) both} @keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--gold); margin-bottom:18px; } .eyebrow::before{content:"";width:28px;height:2px;background:var(--gold)} .hero h1{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:clamp(3rem,12vw,6.4rem);line-height:.9;text-transform:uppercase;letter-spacing:.005em; text-shadow:0 2px 0 #2c2a24,0 4px 0 #201e19,0 6px 0 #151310,0 9px 0 #0e0d0b,0 22px 42px rgba(0,0,0,.72);} .hero h1 em{font-style:normal;color:var(--gold); text-shadow:0 2px 0 #c19104,0 4px 0 #9c7503,0 6px 0 #7a5a03,0 9px 0 #5c4502,0 0 56px rgba(242,183,5,.28),0 20px 40px rgba(0,0,0,.6);} .hero .lede{max-width:44ch;color:var(--muted);font-size:clamp(1.04rem,2.1vw,1.22rem);margin:20px 0 28px} .hero .lede b{color:var(--cream);font-weight:600} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} .pill{ display:inline-flex;align-items:center;gap:8px; background:rgba(23,21,17,.8);border:1px solid var(--line);backdrop-filter:blur(6px); padding:10px 16px;border-radius:50px;font-size:13.5px;color:var(--muted);min-height:40px; } .pill b{color:var(--cream)} .pill .star{color:var(--gold)} .pill .dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none} .pill.is-open .dot{background:var(--green);box-shadow:0 0 0 4px rgba(52,208,88,.16);animation:dotPulse 2.4s ease-in-out infinite} .pill.is-open b{color:var(--green)} .pill.is-soon .dot{background:var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.16)} .pill.is-soon b{color:var(--amber)} .pill.is-closed .dot{background:var(--ember-hot)} .pill.is-closed b{color:var(--ember-hot)} @keyframes dotPulse{0%,100%{box-shadow:0 0 0 3px rgba(52,208,88,.18)}50%{box-shadow:0 0 0 6px rgba(52,208,88,.06)}} .hero-scrolldown{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:11px;letter-spacing:.22em;text-transform:uppercase;pointer-events:none} .hero-scrolldown i{display:block;width:1.5px;height:34px;background:linear-gradient(180deg,var(--gold),transparent);animation:dropline 1.8s var(--ease) infinite} @keyframes dropline{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} @media (max-width:880px){ .hero{min-height:0;padding:104px 0 56px} .hero-scrolldown{display:none} .hero-ghost{top:30%} } /* hero 3D stage */ .hero-stage{position:relative;width:100%;aspect-ratio:1/1;max-height:min(72vh,620px);z-index:3} @media (max-width:880px){.hero-stage{max-width:420px;margin:0 auto}} .hero-stage::before{ content:"";position:absolute;inset:5%;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(50% 50% at 50% 55%,rgba(242,183,5,.2),transparent 70%); animation:stageGlow 5s ease-in-out infinite; } @keyframes stageGlow{0%,100%{opacity:.36;transform:scale(.96)}50%{opacity:.66;transform:scale(1.05)}} /* dashed halo sized as a wide ELLIPSE so it frames the two-cheesesteak pair with small, even "breathing" gaps (the pair is wider than tall). A spinning ellipse would tumble, so the ring gently pulses instead — the model itself provides the rotation. */ .hero-stage .ring{position:absolute;inset:24% 6%;border-radius:50%;border:1px dashed rgba(242,183,5,.22);pointer-events:none;z-index:1;animation:ringPulse 6s ease-in-out infinite} @keyframes ringPulse{0%,100%{opacity:.65;transform:scale(.992)}50%{opacity:1;transform:scale(1.012)}} /* FALLBACK ONLY — hidden by default so a reload never shows a photo→model swap; the 3D module reveals it (.no-3d) solely when WebGL/the GLB can't load at all */ .poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .6s ease;z-index:2} /* the poster composites the real cheesesteak from the signature animation's photo layers (assets/img/cheesesteak/L0–L6) at their assembled offsets — same dish the 3D hero shows, so the rare fallback and the 3D always match */ .poster-steak{position:relative;width:86%;max-width:430px;aspect-ratio:1024/620;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))} .poster-steak img{position:absolute;left:0;width:100%;height:auto} .no-3d .poster{opacity:1;pointer-events:auto} .three-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:2;will-change:transform;transform:translateZ(0);backface-visibility:hidden} .spin-hint{ position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:4; display:inline-flex;align-items:center;gap:7px; font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); background:rgba(12,11,9,.6);border:1px solid var(--line);padding:8px 14px;border-radius:50px; pointer-events:none;opacity:0;transition:opacity .5s ease .2s; } .is-3d .spin-hint{opacity:1} .stamp{position:absolute;top:-4%;right:-2%;width:clamp(86px,12vw,124px);z-index:5;pointer-events:none;animation:stampSpin 16s linear infinite;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))} @keyframes stampSpin{to{transform:rotate(360deg)}} .sparks{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden} /* PERF: no filter:blur(.5px) — a half-pixel blur is invisible but forces a filter render pass (and its own layer) on all five sparks; the box-shadow already provides the soft halo */ .sparks i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:0;box-shadow:0 0 8px rgba(242,183,5,.55);animation:spark 7s linear infinite} .sparks i:nth-child(1){left:12%;bottom:8%;animation-delay:0s} .sparks i:nth-child(2){left:30%;bottom:4%;animation-delay:1.6s} .sparks i:nth-child(3){left:56%;bottom:10%;animation-delay:3.1s} .sparks i:nth-child(4){left:74%;bottom:5%;animation-delay:4.4s} .sparks i:nth-child(5){left:88%;bottom:12%;animation-delay:5.7s} @keyframes spark{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:.85}60%{opacity:.4}100%{transform:translateY(-72vh) scale(1.15);opacity:0}} /* ================================================================ MARQUEE ================================================================ */ .marquee{position:relative;z-index:95;background:linear-gradient(90deg,var(--gold),var(--gold-2),var(--gold));color:#1a1305;overflow:hidden;padding:15px 0;border-top:2px solid #000;border-bottom:2px solid #000;box-shadow:0 12px 34px -14px rgba(242,183,5,.45)} .marquee .track{display:flex;width:max-content;animation:scrollx 34s linear infinite;will-change:transform} .marquee:hover .track{animation-play-state:paused} .marquee span{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:clamp(1.05rem,2.4vw,1.6rem);text-transform:uppercase;display:flex;align-items:center;white-space:nowrap} .marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px #1a1305} .marquee span::after{content:"◆";font-size:.5em;margin:0 30px;color:#1a1305;-webkit-text-stroke:0;transform:translateY(-.12em)} @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ================================================================ SECTION SHELL ================================================================ */ .pad{padding:clamp(68px,10vw,130px) 0} .sec-head{margin-bottom:clamp(34px,6vw,58px);max-width:680px} .kicker{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:12.5px;color:var(--gold);margin-bottom:14px} .kicker::before{content:"";width:30px;height:2px;background:var(--gold)} .sec-title{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:clamp(2.15rem,6.5vw,4rem);line-height:.96;text-transform:uppercase; text-shadow:0 1px 0 #2c2a24,0 2px 0 #232119,0 3px 0 #1a1814,0 5px 0 #12110d,0 12px 26px rgba(0,0,0,.6);} .sec-title em{color:var(--gold);font-style:normal; text-shadow:0 1px 0 #c19104,0 2px 0 #a87e04,0 3px 0 #8a6703,0 5px 0 #6b5002,0 10px 24px rgba(242,183,5,.2),0 14px 30px rgba(0,0,0,.55);} .sec-title .sec-top{display:block;white-space:nowrap;font-size:clamp(1.9rem,3.9vw,3.05rem);letter-spacing:.05em;margin-bottom:4px; text-shadow:0 1px 0 #2c2a24,0 2px 0 #232119,0 3px 0 #1a1814,0 10px 22px rgba(0,0,0,.55)} .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .85s var(--ease)} .reveal.in{opacity:1;transform:none} /* ================================================================ ABOUT ================================================================ */ .about{background:linear-gradient(180deg,var(--bg),var(--bg-2))} .about-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center} @media (min-width:841px){.about-grid{grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,72px)}} .about p{color:var(--muted);font-size:clamp(1.04rem,1.6vw,1.16rem);margin-bottom:18px;max-width:54ch} .about p b{color:var(--cream);font-weight:600} .about p .hl{color:var(--gold);font-weight:600} .stats{display:flex;flex-direction:column;gap:13px;min-width:0} .stat{background:linear-gradient(165deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,32px);text-align:center;position:relative;overflow:hidden} .stat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6} .stat .n{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:clamp(2.1rem,5vw,3.2rem);color:var(--gold);line-height:1;font-variant-numeric:tabular-nums} .stat .l{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:9px} /* about right side — full-bleed cinematic slideshow, stat chips in a row directly below */ .about-side{position:relative;display:flex;flex-direction:column;gap:14px;min-height:clamp(490px,66vw,640px)} @media (min-width:841px){ /* stretch to the text column, then extend a touch beyond it top + bottom for taller, better-proportioned imagery */ .about-side{align-self:stretch;min-height:520px;margin-top:clamp(-60px,-3.2vw,-24px);margin-bottom:clamp(-74px,-4.3vw,-38px)} } .stats{display:flex;flex-direction:row;justify-content:center;gap:12px;min-width:0} /* PERF: no backdrop-filter here. These three chips sit directly on top of the candid slideshow, whose backdrop drifts and crossfades CONTINUOUSLY — so the blur could never be cached and was recomputed every single frame the About section was on screen. A slightly more opaque gradient reads the same against busy photography. */ .stats .stat{flex:0 1 clamp(150px,13vw,196px);min-width:0;padding:13px 8px 12px;border-radius:13px;text-align:center; background:linear-gradient(165deg,rgba(20,18,14,.9),rgba(13,11,8,.84)); border:1px solid rgba(246,241,230,.14)} .stats .stat .n{font-size:clamp(1.3rem,2vw,1.75rem)} .stats .stat .l{font-size:9.5px;letter-spacing:.1em;margin-top:5px;white-space:nowrap} @media (max-width:480px){.stats .stat .l{font-size:8.5px;letter-spacing:.08em}} .about-show{position:relative;flex:1;min-height:0;margin:0;overflow:hidden;border-radius:var(--r);background:linear-gradient(165deg,var(--surface),var(--surface-2));transform:translateZ(0)} .show-img{position:absolute;inset:-2.5%;background-size:cover;background-position:center;opacity:0;transform:scale(1.08);transition:opacity 1.5s ease;will-change:opacity,transform;backface-visibility:hidden} .show-img.on{opacity:1} .about-show::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6} .about-show::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(90deg,rgba(12,11,9,.3),transparent 15%), linear-gradient(180deg,rgba(12,11,9,.22),transparent 30%,transparent 55%,rgba(12,11,9,.62)), radial-gradient(140% 110% at 55% 40%,transparent 60%,rgba(12,11,9,.28))} .show-tag{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;top:14px;z-index:3;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);opacity:.85;text-shadow:0 1px 10px rgba(0,0,0,.55)} /* ≥841px: bleed the imagery to the viewport's right edge (negative margin — the figure is an in-flow flex item); chips stay in the column */ @media (min-width:841px){ .about-show{margin-right:calc(-1 * (max((100vw - var(--max)) / 2, 0px) + clamp(18px,5vw,48px)));border-radius:var(--r) 0 0 var(--r)} /* the chip row spans the same bled width so the group centers under the image itself */ .stats{margin-right:calc(-1 * (max((100vw - var(--max)) / 2, 0px) + clamp(18px,5vw,48px)))} } /* our story — two-page crossfade pager */ .story-view{display:grid;margin-top:24px;cursor:pointer} .story-page{grid-area:1/1;min-width:0} .story-page{will-change:opacity,transform,filter; transition:opacity .45s cubic-bezier(.5,0,.25,1),transform .5s cubic-bezier(.5,0,.25,1),filter .45s ease,visibility 0s linear .5s} .story-page.is-on{opacity:1;transform:none;filter:none;visibility:visible;pointer-events:auto; transition:opacity .85s cubic-bezier(.22,1,.36,1) .18s,transform .95s cubic-bezier(.16,1,.3,1) .18s,filter .85s cubic-bezier(.22,1,.36,1) .18s,visibility 0s} .story-page.is-up{opacity:0;transform:translateY(-14px) scale(.985);filter:blur(7px);visibility:hidden;pointer-events:none} .story-page.is-down{opacity:0;transform:translateY(30px) scale(.99);filter:blur(7px);visibility:hidden;pointer-events:none} .story-next{display:inline-flex;align-items:center;gap:10px;margin-top:4px;padding:9px 16px;border-radius:50px; border:1px solid rgba(242,183,5,.28);background:linear-gradient(180deg,rgba(242,183,5,.1),rgba(242,183,5,.03)); color:var(--gold);font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .3s ease,box-shadow .3s ease,transform .3s var(--ease)} .story-next:hover{border-color:rgba(242,183,5,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 22px rgba(242,183,5,.12);transform:translateY(-1px)} .story-next:active{transform:translateY(0) scale(.96);transition-duration:.12s} .story-next:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .story-cue,.story-step{transition:opacity .2s ease,transform .2s ease} .story-next.swapping .story-cue,.story-next.swapping .story-step{opacity:0;transform:translateY(-3px)} .story-step{color:var(--muted);font-size:10px;letter-spacing:.18em;padding-right:10px;border-right:1px solid rgba(246,241,230,.15);font-variant-numeric:tabular-nums} .story-arr{transition:transform .45s var(--ease);animation:storyNudge 2.2s var(--ease) infinite} .story-next.story-back .story-arr{transform:rotate(180deg);animation:none} @keyframes storyNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}} /* ================================================================ MENU ================================================================ */ /* section backgrounds alternate --bg ↔ --bg-2 as a continuous chain in PAGE ORDER (each section starts on the colour the previous one ended on) — if sections are ever reordered again, re-link this chain or seams appear */ .menu{background:linear-gradient(180deg,var(--bg),var(--bg-2))} .menu-bar{position:sticky;top:64px;z-index:5;display:flex;align-items:center;gap:6px;background:rgba(18,16,12,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin:0 -8px 28px;padding:10px 8px;border-radius:14px} .menu-tabs{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:2px} .menu-tabs::-webkit-scrollbar{height:0} .menu-tab{ flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px; min-height:46px;padding:0 19px;border-radius:50px; border:1.5px solid var(--line);background:transparent;color:var(--muted); font-weight:600;font-size:14.5px;letter-spacing:.02em;white-space:nowrap; transition:color .2s,border-color .2s,background .25s var(--ease),transform .2s var(--spring); } .menu-tab .ct{font-size:11.5px;font-weight:700;background:var(--surface-3);border-radius:50px;padding:2px 8px;color:var(--muted);transition:inherit} .menu-tab:hover{color:var(--cream);border-color:rgba(246,241,230,.3)} .menu-tab:active{transform:scale(.96)} .menu-tab[aria-selected="true"]{background:var(--gold);color:#1a1305;border-color:var(--gold);font-weight:700} .menu-tab[aria-selected="true"] .ct{background:rgba(26,19,5,.18);color:#1a1305} /* slide hint for the category strip — swipe works natively (overflow-x); the arrows sit IN FLOW at either end of the bar (never over the pills), dim when their side has nothing more, and disappear entirely when every tab already fits */ .tabs-nav{flex:none;width:34px;height:34px;border-radius:50%; display:flex;align-items:center;justify-content:center;cursor:pointer; border:1px solid rgba(242,183,5,.45);background:rgba(12,11,9,.88);color:var(--gold); box-shadow:var(--shadow-1); opacity:.28;pointer-events:none;transition:opacity .25s ease,background .2s,color .2s,transform .15s var(--spring)} .tabs-nav.show{opacity:1;pointer-events:auto} .tabs-nav:hover{background:var(--gold);color:#1a1305} .tabs-nav:active{transform:scale(.9)} .tabs-nav svg{display:block} .tabs-nav.next.show svg{animation:tabNudge 2.2s var(--ease) infinite} @keyframes tabNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}} .menu-bar.no-nav .tabs-nav{display:none} .menu-grid{display:grid;grid-template-columns:1fr;gap:14px} @media (min-width:640px){.menu-grid{grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}} .dish{ position:relative;display:flex;gap:14px;align-items:stretch;text-align:left; background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--line-soft);border-radius:var(--r); padding:12px;overflow:hidden; transition:transform .25s var(--ease),border-color .25s ease,box-shadow .25s ease; animation:dishIn .55s var(--ease) both;animation-delay:var(--d,0ms); } @keyframes dishIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}} .dish:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--shadow-2)} .dish-media{position:relative;flex:none;width:96px;border-radius:11px;overflow:hidden;background:radial-gradient(80% 80% at 50% 42%,#1b1810,#000);border:1px solid var(--line-soft)} .dish-media img{width:100%;height:100%;object-fit:contain;padding:5px;transition:filter .4s var(--ease),transform .5s var(--ease)} .dish:hover .dish-media img{filter:brightness(1.08) saturate(1.05);transform:scale(1.03)} .dish-body{flex:1;min-width:0;display:flex;flex-direction:column;padding:4px 4px 4px 0} .dish-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:5px} .dish-name{font-weight:700;font-size:1.06rem;line-height:1.22} .dish-price{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:1.18rem;color:var(--gold);flex:none;font-variant-numeric:tabular-nums} .dish-desc{font-size:.9rem;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .dish-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;flex-wrap:nowrap;min-height:44px} .dish-media .tag{position:absolute;top:9px;left:9px;z-index:3} .tag{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#1a1305;background:var(--gold);padding:4px 9px;border-radius:6px} .tag.spice{background:var(--ember);color:#fff} .tag svg{flex:none} .dish-details{position:static;background:none;border:none;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding:6px 0;margin-left:0;flex:none} .dish-details::after{content:"";position:absolute;inset:0;border-radius:inherit} @media (min-width:640px){ .dish{flex-direction:column;gap:0;padding:0} .dish-media{width:100%;aspect-ratio:4/3;border-radius:0;border:none;border-bottom:1px solid var(--line-soft)} .dish-body{padding:16px 16px 14px} } .menu-note{margin-top:30px;text-align:center;color:var(--muted);font-size:.95rem} .menu-note b{color:var(--gold)} .menu-note p{max-width:56ch;margin:0 auto 18px} /* full-width sub-headings inside a combined section (The Block Party / The Sweet Spot) */ .menu-group{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:16px 0 2px; font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:12.5px;color:var(--gold); animation:dishIn .55s var(--ease) both;animation-delay:var(--d,0ms)} .menu-group::before{content:"";width:26px;height:2px;background:var(--gold);flex:none} .menu-group::after{content:"";flex:1;height:1px;background:var(--line-soft)} .menu-group:first-child{margin-top:0} /* compact high-density layout for the 29-item Drinks list (descriptions live behind Details): tight list rows on phones, small square cards in a dense grid from 640px up. Cards carry no inline description, so every card in a row is the same height. */ .menu-grid.mini{gap:8px} .menu-grid.mini .dish{padding:8px;min-height:104px} /* uniform row height regardless of name wrapping */ .menu-grid.mini .dish-media{width:64px} .menu-grid.mini .dish-body{padding:2px 2px 2px 0} .menu-grid.mini .dish-name{font-size:.85rem;line-height:1.3} .menu-grid.mini .dish-foot{padding-top:6px;min-height:0;justify-content:flex-end;gap:8px} @media (min-width:640px){ .menu-grid.mini{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;grid-auto-rows:1fr} .menu-grid.mini .dish{flex-direction:column;gap:0;padding:0} .menu-grid.mini .dish-media{width:100%;aspect-ratio:1/1;border-radius:0;border:none;border-bottom:1px solid var(--line-soft)} .menu-grid.mini .dish-body{padding:10px} .menu-grid.mini .dish-top{display:block;margin-bottom:2px} .menu-grid.mini .dish-price{font-size:1rem;margin-top:2px} } /* ================================================================ SIGNATURE — the cheesesteak explosion (ported from the Design_Animation_Final handoff; transparent scene — only the food and its shadow render — looping seamlessly while on screen) ================================================================ */ .signature{background:linear-gradient(180deg,var(--bg-2),var(--bg));overflow:hidden} .sig-row{display:grid;grid-template-columns:1fr;gap:34px;align-items:center} @media (min-width:841px){.sig-row{grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}} .sig-stage{position:relative;width:100%;min-width:0;max-width:540px;margin-inline:auto} .sig-stage::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(50% 50% at 50% 55%,rgba(242,183,5,.22),transparent 70%);animation:stageGlow 5s ease-in-out infinite;pointer-events:none} /* PERF: no backdrop-filter — these three chips overlay the signature animation, which repaints every frame of its 7s loop, so the blur was recomputed 3x per frame for the whole time the section was visible. The polish layer below already gives them a near-opaque gradient, so the blur was contributing almost nothing. */ .sig-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(12,11,9,.82);border:1px solid rgba(242,183,5,.4);color:var(--cream);font-weight:700;font-size:12.5px;letter-spacing:.04em;padding:9px 14px;border-radius:50px;box-shadow:var(--shadow-1);animation:chipFloat 6s ease-in-out infinite} .sig-chip b{color:var(--gold)} .sig-chip.c1{top:15%;left:1%;animation-delay:.2s} .sig-chip.c2{top:46%;right:-1%;animation-delay:1.4s} .sig-chip.c3{bottom:21%;left:3%;animation-delay:2.6s} @keyframes chipFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}} @media (max-width:640px){.sig-chip{font-size:11.5px;padding:8px 12px}.sig-chip.c1{left:2%;top:12%}.sig-chip.c2{right:2%}.sig-chip.c3{bottom:24%}} /* ---- cheesesteak explosion stage. Food-motion CSS is verbatim from the handoff; the scene dressing (baked background, vignette, film grain, glow, motes, brand lockup) is NOT rendered — the stage is fully transparent so the sandwich sits directly on the site background. The square mount center-crops the 1920×1080 design stage (the stack is dead-centre at x=960; everything cropped away is empty transparent space). ---- */ .csx{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;transform:translateZ(0)} /* absolute (vs the reference's in-flow scaler): inside a GRID column the un-scaled 1920px stage would otherwise blow the column's min-content width open — out of flow it contributes no intrinsic size, and the .csx aspect-ratio + fit() own the mount size */ .csx-scaler{position:absolute;left:0;top:0;transform-origin:0 0} /* PERF: `contain` applies on EVERY device now (it used to be coarse-pointer only). The animation writes `top` — a layout property — on all seven layers each frame; without containment those invalidations propagate into the whole document's layout tree 60x a second. The stage is fixed-size and overflow:hidden already, so fencing layout + paint inside it changes nothing about what renders. */ .csx-stage{position:relative;width:1920px;height:1080px;overflow:hidden;contain:layout paint} .csx-cam{position:absolute;inset:0;transform-origin:50% 44%;will-change:transform} .csx-floor{position:absolute;left:50%;top:872px;width:640px;height:120px;z-index:3;transform:translateX(-50%);background:radial-gradient(circle,rgba(0,0,0,.62) 0%,rgba(0,0,0,.30) 45%,rgba(0,0,0,0) 72%);filter:blur(8px)} .csx-stack{position:absolute;left:591px;top:0;width:737px;height:1080px;z-index:5;perspective:1600px} .csx-turn{position:relative;width:100%;height:100%;perspective:1600px;transform-origin:50% 46%;will-change:transform} .csx-lw{position:absolute;left:0;width:737px;transform-origin:50% 50%;will-change:transform,top,filter} /* touch devices: the layer filter is applied ONCE at rest values (see the script) and never animated — don't make the compositor reserve a filter-change layer for all seven wrappers */ @media (hover:none) and (pointer:coarse){.csx-lw{will-change:transform,top}} .csx-layer{display:block;width:737px;height:auto} .csx-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-image:linear-gradient(178deg,rgba(255,244,214,.20) 0%,rgba(255,244,214,0) 30%);background-size:100% 100%;background-repeat:no-repeat;opacity:.5;will-change:opacity} .csx-sweep{position:absolute;top:0;bottom:0;left:0;width:320%;background:linear-gradient(104deg,rgba(255,236,190,0) 43%,rgba(255,236,190,.55) 50%,rgba(255,236,190,0) 57%);transform:translateX(-74%);will-change:transform} .csx-drip{position:absolute;width:7px;height:0;border-radius:0 0 6px 6px;background:linear-gradient(to bottom,rgba(244,158,24,0) 0%,rgba(244,158,24,.92) 22%,rgba(214,118,6,.95) 70%,rgba(186,92,0,.9) 100%);opacity:0;pointer-events:none;z-index:30;will-change:top,height,opacity} .sig-copy .sec-title{margin-bottom:16px} .sig-copy p{color:var(--muted);font-size:clamp(1.04rem,1.6vw,1.16rem);margin-bottom:22px;max-width:46ch} .sig-feats{display:flex;flex-direction:column;gap:12px;margin-bottom:28px} .sig-feat{display:flex;align-items:center;gap:13px;font-weight:600} .sig-feat .ic{width:40px;height:40px;flex:none;border-radius:12px;background:var(--gold-soft);border:1px solid rgba(242,183,5,.25);display:flex;align-items:center;justify-content:center;color:var(--gold)} /* ================================================================ GALLERY — THE SPREAD (single cinematic prep-film showcase) ================================================================ */ .gallery{background:linear-gradient(180deg,var(--bg-2),var(--bg))} .spread-show{position:relative;margin:0} /* ambient gold light bleeding out from behind the frame */ .spread-show::before{ content:"";position:absolute;inset:-6% -4%;z-index:0;pointer-events:none;border-radius:50%; background:radial-gradient(55% 52% at 50% 50%,rgba(242,183,5,.18),rgba(242,183,5,.05) 55%,transparent 76%); filter:blur(34px);animation:stageGlow 5.5s ease-in-out infinite; } html.is-scrolling .spread-show::before{animation-play-state:paused!important} .spread-frame{ position:relative;z-index:1;overflow:hidden;border-radius:var(--r-lg); border:1px solid rgba(242,183,5,.24); background:linear-gradient(165deg,var(--surface),var(--surface-2)); box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow-3),var(--glow-gold); transform:translateZ(0); } .spread-frame::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none; background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.65} .spread-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 -34px 60px -38px rgba(0,0,0,.85),inset 0 26px 50px -40px rgba(0,0,0,.55)} .spread-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:radial-gradient(80% 80% at 50% 42%,#1b1810,#000)} /* phones get the vertical cut, framed and centred like the hero stage */ @media (max-width:760px){ .spread-show{max-width:min(430px,100%);margin-inline:auto} .spread-frame video{aspect-ratio:9/16;max-height:78svh} } /* ================================================================ REVIEWS — flowing rail ================================================================ */ .reviews{background:linear-gradient(180deg,var(--bg),var(--bg-2));overflow:hidden} .rev-banner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:30px} .rev-score{display:flex;align-items:center;gap:14px;background:linear-gradient(165deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:var(--r);padding:16px 22px} .rev-score .num{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:2.6rem;color:var(--gold);line-height:1} .rev-score .stars-svg{display:flex;gap:2px;color:var(--gold)} .rev-score small{display:block;color:var(--muted);font-size:.85rem;margin-top:2px} .rev-rail{display:flex;flex-direction:column;gap:14px;margin:0 calc(-1 * clamp(18px,5vw,48px))} .rev-row{display:flex;gap:14px;width:max-content;padding:0 7px;animation:revL 46s linear infinite} .rev-row[data-dir="r"]{animation:revR 54s linear infinite} .rev-rail:hover .rev-row,.rev-rail:focus-within .rev-row{animation-play-state:paused} @keyframes revL{to{transform:translateX(-50%)}} @keyframes revR{from{transform:translateX(-50%)}to{transform:translateX(0)}} .rev{width:min(380px,82vw);flex:none;background:linear-gradient(165deg,var(--surface),var(--surface-2));border:1px solid var(--line-soft);border-radius:var(--r);padding:24px;position:relative;overflow:hidden} .rev::before{content:"“";position:absolute;top:-18px;right:10px;font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:7rem;color:rgba(242,183,5,.08);pointer-events:none} .rev .stars{color:var(--gold);letter-spacing:2px;margin-bottom:11px;font-size:.95rem} .rev p{font-size:1rem;line-height:1.6;margin-bottom:14px} .rev .who{font-weight:700;font-size:.84rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase} /* ================================================================ LOCATIONS ================================================================ */ .locations{background:var(--bg-2)} .loc-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px} @media (min-width:741px){.loc-grid{grid-template-columns:1fr 1fr}} .loc{background:linear-gradient(165deg,var(--surface),var(--surface-2));border:1px solid var(--line-soft);border-radius:var(--r);padding:clamp(24px,3.5vw,34px);position:relative;overflow:hidden} .loc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),transparent)} .loc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px} .loc h3{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:clamp(1.4rem,3vw,1.85rem);text-transform:uppercase} .loc .pc{color:var(--gold);font-weight:600;font-size:.92rem;letter-spacing:.04em;margin-bottom:16px} .loc .row{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px;color:var(--muted);font-size:.97rem} .loc .row svg{flex:none;color:var(--gold);margin-top:2px} .loc .row a{min-height:44px;display:inline-flex;align-items:center} .loc .row a:hover{color:var(--gold)} .loc-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .loc-actions .btn{min-height:46px;padding:0 18px;font-size:14px;flex:1} .hours-stack{display:grid;gap:14px} .hours-strip{background:linear-gradient(165deg,var(--surface),var(--surface-2));border:1px solid var(--line-soft);border-radius:var(--r);padding:clamp(22px,3vw,30px)} .hours-strip h4{font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;font-size:1rem;display:flex;align-items:center;gap:9px} .hours-strip h4 svg{color:var(--gold)} .hours-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:8px 24px} .hours-list .h{display:flex;gap:14px;border-bottom:1px dashed var(--line);padding:5px 0 7px;font-size:.95rem} .hours-list .h.today{border-bottom-color:var(--gold)} .hours-list .h .d{min-width:2.5em;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .hours-list .h.today .d{color:var(--gold)} .hours-list .h .t{font-weight:600;font-variant-numeric:tabular-nums} /* ================================================================ CTA / ORDER ================================================================ */ .cta{text-align:center;background:radial-gradient(70% 120% at 50% 0%, rgba(242,183,5,.15), transparent 55%),linear-gradient(180deg,var(--bg-2),var(--bg))} .cta h2{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:clamp(2.4rem,8vw,5rem);line-height:.92;text-transform:uppercase;margin-bottom:14px; text-shadow:0 2px 0 #2c2a24,0 4px 0 #1a1814,0 6px 0 #12110d,0 16px 32px rgba(0,0,0,.65)} .cta h2 em{color:var(--gold);font-style:normal;text-shadow:0 2px 0 #c19104,0 4px 0 #9c7503,0 6px 0 #7a5a03,0 8px 30px rgba(242,183,5,.26)} .cta p{max-width:46ch;margin:0 auto 30px;color:var(--muted);font-size:1.08rem} .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .follow-row{margin-top:28px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .follow-row a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:50px;padding:10px 17px;font-weight:700;font-size:.9rem;color:var(--cream);transition:.22s;min-height:44px} .follow-row a:hover{background:var(--gold);color:#1a1305;border-color:var(--gold)} /* ================================================================ PRESTO ORDERING EMBED (inside the Hungry Yet? section) Wrapper styling ONLY — the iframes + script inside .presto-embed are verbatim from the Presto integration handoff and must not be edited. ================================================================ */ .presto-embed{ position:relative;margin-top:clamp(36px,5vw,56px); display:flex;flex-direction:column; border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; background:var(--bg-2); box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow-2),var(--glow-gold-soft); } .presto-embed::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6} /* STACKING FIX (desktop item popup): both Presto iframes carry inline z-index:1000, and as flex items of .presto-embed both values apply — the tie fell to DOM order, painting the fixed item POPUP (#iframeModal, first in DOM) BEHIND the shop (#iframe). One step up restores it; !important is required to beat the inline style, since the handoff markup is verbatim and must not be edited. Mobile is unaffected either way (Presto opens the popup inside the shop frame there). */ .presto-embed #iframeModal{z-index:1001!important} /* ---- BRANCH PICKER + VEILED STAGE (same section, above the embed) ---- The visitor must choose a branch before a shop mounts, so the stage sits veiled until they do. The veil is a static blurred layer on ::after — it is painted once and never animated, and it exists ONLY while .is-locked, so the moment a shop mounts there is no filter anywhere near it. That matters: a filter on any ancestor of .presto-embed would become the containing block for Presto's position:fixed item popup, and overflow:hidden would then clip the popup to this box instead of letting it cover the viewport. */ /* ---- PAUSE OFF-SCREEN ANIMATION ---- The section-wide counterpart to .anim-off above (which covers only the marquee and the review rails). PAUSED, not disabled: the animation holds its current frame and resumes from exactly there, so anything actually on screen is pixel-identical. It only ever applies to a section the viewport has left, plus 120px of slack, which is why this is safe to state with !important — nothing visible is ever matched. Measured 14 -> 3 off-screen animations still running. */ .anim-idle,.anim-idle *{animation-play-state:paused!important} .presto-pick{margin-top:clamp(36px,5vw,56px);scroll-margin-top:96px} .pick-title{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-weight:400;font-size:clamp(1.3rem,3.4vw,1.9rem);text-transform:uppercase;letter-spacing:.01em} .pick-sub{color:var(--muted);font-size:.98rem;margin:6px auto 0;max-width:46ch} .tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px} .tab{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:56px;padding:9px 22px;border-radius:14px;border:2px solid var(--line);background:transparent;color:var(--cream);font-family:inherit;font-size:1rem;font-weight:700;line-height:1.25;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)} .tab .tab-addr{font-weight:400;font-size:.76rem;color:var(--muted);letter-spacing:.01em} .tab:hover{border-color:var(--gold)} .tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#1a1305} .tab[aria-selected="true"] .tab-addr{color:rgba(26,19,5,.72)} .presto-stage{margin-top:clamp(18px,3vw,26px)} .presto-stage.is-locked{min-height:320px;align-items:center;justify-content:center} .presto-stage.is-locked::after{content:"";position:absolute;inset:0;pointer-events:none;filter:blur(10px); background:radial-gradient(58% 68% at 50% 32%,rgba(242,183,5,.17),transparent 62%),repeating-linear-gradient(180deg,rgba(246,241,230,.055) 0 13px,transparent 13px 32px)} .presto-veil{display:none} .presto-stage.is-locked .presto-veil{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:44px 22px;position:relative;z-index:2} .presto-veil .veil-ico{color:var(--gold);display:block} .presto-veil b{font-size:1.06rem;letter-spacing:.01em} .presto-veil span{color:var(--muted);font-size:.92rem} /* mirrors the flex context the iframes had as direct children of .presto-embed */ #prestoMount{display:flex;flex-direction:column;width:100%} #prestoMount:empty{display:none} @media (max-width:560px){ .tabs{flex-direction:column;align-items:stretch} .tab{width:100%} .presto-stage.is-locked{min-height:260px} } /* the Start-an-order arrow points down at the widget below — nudge it downwards on hover */ @media (hover:hover){ .cta-actions .btn:hover .ar{transform:translateY(4px)} } /* ================================================================ FOOTER ================================================================ */ footer{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(48px,7vw,72px) 0 30px} .foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:42px} .foot-brand{grid-column:1/-1} @media (min-width:741px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}.foot-brand{grid-column:auto}} @media (min-width:1000px){.foot-grid{gap:38px}} .foot-brand .brand-logo{height:72px} .foot-brand p{color:var(--muted);max-width:34ch;font-size:.96rem;margin:16px 0} .socials{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .socials a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:50px;padding:9px 16px 9px 11px;font-weight:700;font-size:.92rem;transition:.22s;min-height:44px} .socials a:hover{background:var(--gold);color:#1a1305;border-color:var(--gold)} .foot-col h3{font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;font-size:.95rem} .foot-col a{display:flex;align-items:center;color:var(--muted);margin-bottom:4px;font-size:.96rem;min-height:38px} .foot-col a:hover{color:var(--gold)} .foot-bottom{border-top:1px solid var(--line-soft);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.85rem} .foot-bottom .halal{color:var(--gold);font-weight:700;letter-spacing:.06em;text-transform:uppercase} /* ================================================================ TILT + GLARE (mouse only, motion-safe) ================================================================ */ /* PERF: will-change lives on .tilting, NOT .tilt. On .tilt it promoted every review card, dish card and location card to its own permanent GPU layer — measured 31 at rest and ~55 on the Drinks tab. Dozens of always-live layers cost real VRAM and layer-tree churn, which is the jank this was meant to avoid. .tilting is added on pointerenter, so the hint now exists exactly while the card is actually moving. */ .tilt{transform-style:preserve-3d;transition:transform .35s var(--ease)} .tilt.tilting{transition:transform .07s linear;will-change:transform} .glx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;opacity:0;transition:opacity .25s ease;background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.15),transparent 50%)} .tilting .glx{opacity:1} .rev,.loc{overflow:hidden} /* ================================================================ LOADER ================================================================ */ .loader{position:fixed;inset:0;z-index:var(--z-loader);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .55s ease} .loader.gone{opacity:0;pointer-events:none} .loader .brand-logo{height:118px;animation:bob 1.3s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}} .loader .lt{font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-size:12px;animation:pulse 1.3s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}} /* ================================================================ MODALS (dish detail + category variants) ================================================================ */ body.modal-open{overflow:hidden} .modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s} .modal.open{opacity:1;visibility:visible} .modal-scrim{position:absolute;inset:0;background:rgba(5,4,3,.76);backdrop-filter:blur(7px)} .modal-card{position:relative;z-index:1;width:min(760px,100%);max-height:90svh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-2);display:grid;grid-template-columns:1fr;transform:translateY(30px) scale(.96);transition:transform .35s var(--ease)} @media (min-width:641px){.modal-card{grid-template-columns:1fr 1fr}} .modal.open .modal-card{transform:none} .modal-media{position:relative;min-height:0;aspect-ratio:16/10;background:var(--surface-2)} @media (min-width:641px){.modal-media{aspect-ratio:auto;min-height:230px}} .modal-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .modal-body{padding:clamp(22px,3.2vw,34px);position:relative} .modal-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(12,11,9,.65);color:var(--cream);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:3;transition:background .2s,border-color .2s,transform .2s var(--spring)} .modal-x:hover{background:var(--ember);border-color:var(--ember);color:#fff;transform:rotate(90deg)} .modal-tags{display:flex;gap:6px;margin-bottom:10px} .modal-body h3{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:clamp(1.7rem,5vw,2.5rem);text-transform:uppercase;line-height:.95;margin-bottom:6px} .modal-price{font-family:'Anton','Anton Fallback',Impact,sans-serif;color:var(--gold);font-size:1.5rem;margin-bottom:14px} .modal-body>p{color:var(--muted);line-height:1.6;margin-bottom:20px} .modal-body h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px} /* ================================================================ SUPPORT HUB ================================================================ */ .help-fab{position:fixed;left:16px;bottom:18px;z-index:var(--z-fab);display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(242,183,5,.5);background:rgba(23,21,17,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:var(--gold);box-shadow:var(--shadow-1);transition:transform .2s var(--spring),background .2s,color .2s} .help-fab:hover{background:var(--gold);color:#1a1305;transform:translateY(-2px)} .help-fab:active{transform:scale(.93)} /* phones: the fab sits in the natural corner (the action bar it used to clear is gone) — safe-area keeps it above the iPhone home indicator */ @media (max-width:880px){.help-fab{bottom:calc(18px + env(safe-area-inset-bottom))}} @media (max-width:1100px){.help-fab{left:12px}} .help{position:fixed;inset:0;z-index:var(--z-help);visibility:hidden} .help.open{visibility:visible} .help-scrim{position:absolute;inset:0;background:rgba(5,4,3,.62);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s} .help.open .help-scrim{opacity:1} .help-card{position:absolute;left:16px;bottom:84px;width:min(400px,calc(100vw - 32px));max-height:min(76svh,640px);overflow:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-2);transform:translateY(18px) scale(.97);opacity:0;transition:transform .32s var(--spring),opacity .25s ease} .help.open .help-card{transform:none;opacity:1} @media (max-width:560px){ .help-card{left:0;right:0;bottom:0;width:100%;max-height:84svh;border-radius:22px 22px 0 0;border-bottom:none;padding-bottom:env(safe-area-inset-bottom)} } .help-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px 14px;background:var(--surface);border-bottom:1px solid var(--line-soft)} .help-head h2{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:1.35rem;text-transform:uppercase} .help-head .modal-x{position:static} .help-body{padding:16px 20px 22px} .help-status{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted);margin-bottom:14px} .help-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px} .help-grid a{display:flex;flex-direction:column;gap:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:13px 14px;min-height:64px;transition:border-color .2s,background .2s,transform .18s var(--spring)} .help-grid a:hover{border-color:rgba(242,183,5,.5);background:rgba(242,183,5,.06)} .help-grid a:active{transform:scale(.97)} .help-grid a svg{color:var(--gold)} .help-grid a b{font-size:.88rem;line-height:1.2} .help-grid a small{color:var(--muted);font-size:.74rem} .help-body h3{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:4px 0 10px} .faq{border:1px solid var(--line-soft);border-radius:13px;background:var(--surface-2);margin-bottom:8px;overflow:hidden} .faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-weight:600;font-size:.94rem;cursor:pointer;min-height:50px;transition:color .2s} .faq summary::-webkit-details-marker{display:none} .faq summary .pm{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--gold);transition:transform .25s var(--ease),background .2s} .faq summary:hover{color:var(--gold)} .faq[open] summary{color:var(--gold)} .faq[open] summary .pm{transform:rotate(45deg);background:var(--gold-soft)} .faq .fa{padding:0 16px 15px;color:var(--muted);font-size:.9rem;line-height:1.6} .faq .fa b{color:var(--cream)} .help-foot{margin-top:14px;font-size:.8rem;color:var(--muted);line-height:1.55;border-top:1px dashed var(--line-soft);padding-top:13px} .help-foot b{color:var(--gold)} /* ================================================================ LEGAL / POLICY MODAL + help-panel policy list ================================================================ */ .legal-modal{z-index:calc(var(--z-help) + 1)} .legal-modal .modal-card{grid-template-columns:1fr;width:min(720px,100%)} .legal-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px clamp(20px,3.4vw,34px) 15px;background:var(--surface);border-bottom:1px solid var(--line-soft)} .legal-head h3{font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:clamp(1.5rem,4.4vw,2.15rem);text-transform:uppercase;line-height:1;letter-spacing:.01em} .legal-head .modal-x{position:static;flex:none} .legal-body{padding:20px clamp(20px,3.4vw,34px) clamp(26px,3.4vw,36px);color:var(--muted);line-height:1.65;font-size:.96rem} .legal-body .legal-intro{color:var(--cream);font-size:1rem;margin-bottom:6px} .legal-body h4{color:var(--gold);font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;margin:22px 0 9px} .legal-body h4:first-child{margin-top:0} .legal-body p{margin-bottom:12px} .legal-body ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px} .legal-body li{position:relative;padding-left:20px} .legal-body li::before{content:"";position:absolute;left:3px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold)} .legal-body b{color:var(--cream);font-weight:700} .legal-body a{color:var(--gold);text-decoration:underline;text-underline-offset:2px} .legal-body .legal-cta{display:inline-flex;align-items:center;gap:9px;margin-top:20px;background:linear-gradient(135deg,var(--gold),#e3a904);color:#1a1305;font-weight:800;font-size:.95rem;letter-spacing:.01em;text-decoration:none;padding:13px 20px;border-radius:50px;box-shadow:0 14px 30px -12px rgba(242,183,5,.7);transition:transform .2s var(--spring),box-shadow .2s} .legal-body .legal-cta:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(242,183,5,.85);color:#1a1305} .legal-body .legal-cta:active{transform:scale(.97)} .legal-body .legal-cta svg{flex:none} .help-legal{display:flex;flex-direction:column;gap:6px;margin-bottom:6px} .help-legal button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--cream);font-weight:600;font-size:.9rem;min-height:48px;cursor:pointer;transition:border-color .2s,background .2s,transform .18s var(--spring)} .help-legal button:hover{border-color:rgba(242,183,5,.5);background:rgba(242,183,5,.06);color:var(--gold)} .help-legal button:active{transform:scale(.98)} .help-legal button svg{flex:none;color:var(--gold)} .help-legal button .chev{margin-left:auto;color:var(--muted)} .help-legal button:hover .chev{color:var(--gold)} /* ================================================================ SOCIAL SIDE RAIL (desktop) ================================================================ */ .social-rail{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:var(--z-rail);display:flex;flex-direction:column;gap:10px} .social-rail a{display:flex;align-items:center;width:46px;height:46px;border-radius:50px;border:1px solid var(--line);background:rgba(12,11,9,.7);backdrop-filter:blur(8px);color:var(--cream);overflow:hidden;white-space:nowrap;transition:width .3s var(--ease),background .25s,color .25s;padding:0 12px} .social-rail a svg{flex:none} .social-rail a span{opacity:0;margin-left:9px;font-weight:700;font-size:.85rem;transition:opacity .25s} .social-rail a:hover,.social-rail a:focus-visible{width:178px;background:var(--gold);color:#1a1305;border-color:var(--gold)} .social-rail a:hover span,.social-rail a:focus-visible span{opacity:1} @media (max-width:1100px){.social-rail{display:none}} /* ================================================================ REDUCED MOTION The owner's explicit brand direction is an assertive, motion-led showpiece (marquee, parallax, tilt, spinning 3D). We honour that as the intended experience for everyone. We still drop the single thing that can actually disorient — long programmatic smooth-scroll — and guarantee no content depends on motion to become visible. ================================================================ */ /* ================================================================ ✦ PREMIUM POLISH LAYER Layers depth, glassmorphism, lighting & micro-interaction refinement on top of the existing system. Colour identity, copy, menu, layout and behaviour are all unchanged — this only elevates presentation. ================================================================ */ /* ---- ambient light seam at the top edge of each major section ---- whisper-quiet: the section backgrounds already chain seamlessly, so the seam only hints at a fold — any stronger and sections read as blocks */ .about,.menu,.signature,.gallery,.reviews,.locations{position:relative} .about::after,.menu::after,.signature::after,.gallery::after,.reviews::after,.locations::after{ content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(246,241,230,.05),transparent); } /* ---- buttons: a "lit" top highlight + deeper, softer layered shadow ---- */ .btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -10px 22px -14px rgba(0,0,0,.5),0 14px 34px -14px rgba(220,38,38,.55)} .btn-gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -10px 20px -12px rgba(124,90,4,.4),0 14px 34px -16px rgba(242,183,5,.4)} .btn-ghost{background:linear-gradient(180deg,rgba(246,241,230,.05),rgba(246,241,230,.01));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} @media (hover:hover){ /* hover-capable only — sticky tap-hover ate the first tap on touch */ .btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 22px 48px -16px rgba(239,68,68,.6)} .btn-gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 22px 48px -18px rgba(242,183,5,.5)} .btn-ghost:hover{background:linear-gradient(180deg,rgba(242,183,5,.10),rgba(242,183,5,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 30px -18px rgba(242,183,5,.4)} } /* ---- nav: refined frosted glass once scrolled ---- */ /* PERF: blur radius trimmed 18px -> 12px and saturate() dropped. This bar is fixed over moving content, so its backdrop is re-blurred on EVERY scroll frame across the full viewport width; backdrop-filter cost scales with radius, and saturate() was a second full pass for an effect that is imperceptible on this near-monochrome palette. */ nav.site.scrolled{ background:linear-gradient(180deg,rgba(18,16,12,.88),rgba(12,11,9,.78)); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow-1); } /* CRITICAL (mobile): a scrolled nav with backdrop-filter becomes the containing block for the fixed slide-in menu and clips it to the bar height after you scroll. Keep the frosted glass on desktop only so the menu always fills the viewport on phones/tablets. */ @media (max-width:880px){ nav.site.scrolled{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} } .brand-logo{filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))} /* ---- pills & chips: frosted glass with an inner highlight ---- */ /* PERF: 12px -> 8px, saturate() dropped. The hero pills sit over the drifting orbs, so their backdrop is never static. */ .pill{ background:linear-gradient(180deg,rgba(30,27,20,.78),rgba(18,16,12,.7)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 var(--glass-hi),0 8px 22px -16px rgba(0,0,0,.8); } .sig-chip{ background:linear-gradient(180deg,rgba(20,18,13,.9),rgba(12,11,9,.78)); box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 34px -16px rgba(0,0,0,.7),0 0 0 1px rgba(242,183,5,.06); } /* ---- tags: glossy enamel chips ---- */ .tag{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -6px rgba(242,183,5,.55)} .tag.spice{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -6px rgba(220,38,38,.6)} /* ---- generic card depth: dish · stat · loc · rev · vcard ---- */ .dish,.stat,.loc,.rev,.hours-strip,.rev-score{ box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 1px rgba(255,255,255,.012),var(--shadow-1); } .dish:hover{box-shadow:inset 0 1px 0 var(--glass-hi-strong),var(--shadow-3),var(--glow-gold-soft)} .loc:hover{box-shadow:inset 0 1px 0 var(--glass-hi-strong),var(--shadow-3),var(--glow-gold-soft)} .loc{transition:transform .25s var(--ease),border-color .25s ease,box-shadow .3s ease} .loc:hover{transform:translateY(-4px);border-color:var(--line)} .stat{transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease} .stat:hover{transform:translateY(-4px);border-color:rgba(242,183,5,.3);box-shadow:inset 0 1px 0 var(--glass-hi-strong),var(--shadow-2),var(--glow-gold-soft)} .stat .n{text-shadow:0 0 30px rgba(242,183,5,.22)} /* ---- image containers: inner ring, vignette & a gloss sweep on hover ---- */ .dish-media{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 -24px 40px -28px rgba(0,0,0,.9)} .dish-media::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit; background:linear-gradient(120deg,transparent 38%,rgba(255,255,255,.10) 48%,transparent 58%); transform:translateX(-120%);transition:transform .7s var(--ease); } .dish:hover .dish-media::after{transform:translateX(120%)} /* ---- menu category bar: deeper frosted glass + active tab glow ---- */ /* PERF: 16px -> 10px, saturate() dropped. This bar is position:sticky, so while you scroll the menu its backdrop changes every frame and the blur is recomputed each time. */ .menu-bar{ background:linear-gradient(180deg,rgba(24,21,15,.94),rgba(16,14,10,.88)); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 34px -24px rgba(0,0,0,.8); border:1px solid var(--line-soft); } .menu-tab[aria-selected="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px -8px rgba(242,183,5,.55)} /* ---- reviews score badge + flame numbers ---- */ .rev-score .num,.rev-banner .num{text-shadow:0 0 28px rgba(242,183,5,.26)} .rev::before{transition:color .4s var(--ease)} .rev:hover::before{color:rgba(242,183,5,.16)} /* ---- marquee: subtle top gloss for an enamel feel ---- */ .marquee{box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 8px -3px rgba(124,90,4,.34),0 12px 34px -14px rgba(242,183,5,.3)} /* ---- floating action / fabs: glassy gold ---- */ .help-fab{box-shadow:inset 0 1px 0 var(--glass-hi),0 10px 26px -12px rgba(0,0,0,.7)} /* ---- overlays: modals · help — premium glass panels ---- */ .help-card{box-shadow:inset 0 1px 0 var(--glass-hi),-30px 0 80px -30px rgba(0,0,0,.85),var(--shadow-3)} .modal-card{box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow-3)} .modal-scrim,.help-scrim{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)} /* saturate() dropped — second full pass, imperceptible here */ .modal-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(12,11,9,.18),transparent 30%,transparent 70%,rgba(12,11,9,.34))} /* ---- HERO: floating ambient light orbs for layered depth (behind all content) ---- */ .hero-orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} /* PERF: was filter:blur(64px) + mix-blend-mode:screen. The backgrounds are already radial-gradients that fade to transparent, so a 64px blur added almost nothing visually while forcing a large filter pass on every frame of the 19s drift; and `screen` forced a backdrop read-back, which over a near-black page is all but identical to plain alpha compositing. A small blur keeps the edge soft for a fraction of the cost. */ .hero-orbs i{position:absolute;border-radius:50%;filter:blur(24px);will-change:transform;animation:orbDrift 19s ease-in-out infinite} .hero-orbs i:nth-child(1){width:380px;height:380px;left:-7%;top:6%;background:radial-gradient(circle,rgba(242,183,5,.34),transparent 70%);opacity:.29} .hero-orbs i:nth-child(2){width:300px;height:300px;right:-5%;bottom:4%;background:radial-gradient(circle,rgba(220,38,38,.3),transparent 70%);opacity:.26;animation-delay:-6.5s} .hero-orbs i:nth-child(3){width:240px;height:240px;left:44%;top:58%;background:radial-gradient(circle,rgba(255,210,63,.27),transparent 70%);opacity:.2;animation-delay:-12s} @keyframes orbDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(26px,-32px,0) scale(1.08)}66%{transform:translate3d(-22px,18px,0) scale(.94)}} @media (max-width:880px){.hero-orbs i{filter:blur(18px)}.hero-orbs i:nth-child(3){display:none}} /* SCROLL PERF: pause the continuous decorative animations while the page is scrolling. The expensive blurred orbs + glows stop repainting during scroll, freeing the compositor for smooth scrolling, and resume the instant scrolling stops — no change to the static look. The list now covers every always-on decorative animation, not just the hero's: previously stamp/padGlow/chipFloat/nudges kept ticking right through every scroll. */ html.is-scrolling .hero-orbs i, html.is-scrolling .sparks i, html.is-scrolling .ring, html.is-scrolling .stamp, html.is-scrolling .sig-chip, html.is-scrolling .story-arr, html.is-scrolling .tabs-nav.next svg, html.is-scrolling .hero-scrolldown i, html.is-scrolling .sig-stage::before, html.is-scrolling .hero-stage::before, html.is-scrolling .hero-stage::after{animation-play-state:paused!important} /* OFF-SCREEN PERF: the marquee track and both review rails are very wide, permanently transform-animated layers that used to run forever — including far off-screen. An IntersectionObserver toggles .anim-off so they only animate while actually visible. */ .marquee.anim-off .track, .rev-rail.anim-off .rev-row{animation-play-state:paused} /* ---- HERO: deeper immersion — soft vignette + a glowing pedestal under the cheesesteak ---- */ .hero::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(120% 80% at 50% 8%,transparent 55%,rgba(8,7,5,.5) 100%); } .hero-stage::after{ content:"";position:absolute;left:50%;bottom:6%;width:62%;height:8%;z-index:0;pointer-events:none; transform:translateX(-50%);border-radius:50%; background:radial-gradient(closest-side,rgba(242,183,5,.2),rgba(242,183,5,.04) 60%,transparent 78%); filter:blur(7px);animation:padGlow 5s ease-in-out infinite; } @keyframes padGlow{0%,100%{opacity:.32;transform:translateX(-50%) scaleX(.92)}50%{opacity:.55;transform:translateX(-50%) scaleX(1.04)}} .eyebrow{padding:7px 14px;border-radius:50px;background:linear-gradient(180deg,rgba(242,183,5,.12),rgba(242,183,5,.04));border:1px solid rgba(242,183,5,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} .eyebrow::before{margin-right:1px} /* ---- kicker eyebrow on section heads: matching glass token ---- */ .kicker{padding:6px 13px;border-radius:50px;background:linear-gradient(180deg,rgba(242,183,5,.1),rgba(242,183,5,.03));border:1px solid rgba(242,183,5,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} /* ---- sig feature icons: glassy gold tiles ---- */ .sig-feat .ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px -10px rgba(242,183,5,.5)} .sig-feat{transition:transform .25s var(--ease)} .sig-feat:hover .ic{transform:translateY(-2px) scale(1.06)} /* ---- glare overlay: a touch warmer for the gold theme ---- */ .glx{background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),rgba(255,236,190,.18),transparent 50%)} /* ---- reveal: add a hint of scale/blur for a more cinematic entrance ---- */ .reveal{filter:blur(6px)} .reveal.in{filter:blur(0);transition:opacity .8s ease,transform .85s var(--ease),filter .8s ease} /* PERF: the entrance blur re-rasterises the ENTIRE subtree at a new radius on every frame for 800ms — and it fires exactly as you scroll the section into view. On text blocks that is cheap and the effect reads nicely. On these five it is not: the review rail is ~4,500px wide with 24 shadowed cards, the signature stage holds seven 1024px layers, and the others are large media frames. They keep the fade + rise (where the motion actually reads) and drop only the blur. */ .rev-rail.reveal,.rev-rail.reveal.in, .sig-stage.reveal,.sig-stage.reveal.in, .spread-show.reveal,.spread-show.reveal.in, .about-side.reveal,.about-side.reveal.in, .menu-bar.reveal,.menu-bar.reveal.in{filter:none} /* ---- loader: glow under the bobbing logo ---- */ .loader{background:radial-gradient(60% 50% at 50% 46%,rgba(242,183,5,.08),transparent 60%),var(--bg)} .loader .brand-logo{filter:drop-shadow(0 24px 40px rgba(242,183,5,.28))} /* keep heavy blur off the lowest-power phones for smoothness */ @media (max-width:560px){ .pill,.menu-bar{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} } /* ================================================================ ✦ MOBILE POLISH Small-screen-only refinements — nothing here touches ≥761px. ================================================================ */ /* ≤374px (iPhone SE class): the "Birth of a new classic:" strap is nowrap by design; at its old floor it measured 316px — wider than the 284px content column — and dragged the whole page into horizontal overflow. A slightly smaller floor keeps it on one line AND inside the viewport. */ @media (max-width:374px){ .sec-title .sec-top{font-size:1.6rem} } /* ≤639px (phone menu rows): the "★ Signature" / "Spicy" badge sits inside the 96px dish thumbnail, whose overflow:hidden clipped it mid-word. Unclip the thumbnail so the badge (unchanged in style/size/position) can extend past it — the rounded thumb look moves to the image itself, and the desktop-hover gloss sweep (parked off-edge, never plays on touch) is disabled so it can't peek out once unclipped. ≥640px keeps the original full-width layout. */ @media (max-width:639.98px){ .dish-media{overflow:visible} .dish-media img{border-radius:inherit} .dish-media::after{display:none} .dish-media .tag{white-space:nowrap;max-width:none;width:max-content} } /* comfortable touch targets on coarse pointers (44px guideline) — the two controls that measured under it: the story pager pill (35px) and the menu category arrows (34px). Desktop mouse users are untouched. */ @media (hover:none) and (pointer:coarse){ .story-next{min-height:44px} .tabs-nav{width:42px;height:42px} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .hero-stage::after,.hero-orbs i{animation:none} .reveal{filter:none} .dish-media::after{display:none} }