/* ===================================================================== THE BARRACKS BAR — concept site Design system + layout + motion Palette pulled from the emblem: matte black, burnt orange, brushed chrome. ===================================================================== */ /* ---------- Design tokens ---------- */ :root{ --black:#09090a; --ink:#0d0c0b; --panel:#141110; --panel-2:#1b1714; --char:#241d18; --orange:#c4581b; --ember:#e8722c; --ember-hot:#ff8a3d; --orange-deep:#7a3410; --steel-1:#eef1f4; --steel-2:#c4c9d0; --steel-3:#8b9199; --steel-4:#5b6068; --bone:#ece4d8; --bone-dim:#b3ab9e; --muted:#8a8377; --muted-2:#6a6459; --line:rgba(236,228,216,.12); --line-2:rgba(236,228,216,.07); --f-display:"Anton", Impact, sans-serif; --f-cond:"Oswald", "Arial Narrow", sans-serif; --f-body:"Inter", system-ui, sans-serif; --ease:cubic-bezier(.22,1,.36,1); --ease-2:cubic-bezier(.65,.05,.36,1); --maxw:1320px; --pad:clamp(1.25rem,5vw,5rem); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ font-family:var(--f-body); background:var(--black); color:var(--bone); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ::selection{background:var(--orange);color:#fff} /* ---------- Chrome / brushed-steel text ---------- */ .chrome{ color:var(--steel-1); /* fallback */ } @supports((-webkit-background-clip:text) or (background-clip:text)){ .chrome{ background:linear-gradient(176deg, #f6f8fa 0%, #d3d8de 20%, #8b9199 46%, #f1f4f7 56%, #6d737b 78%, #b7bcc4 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; text-shadow:none; } } /* ---------- Shared type ---------- */ .h-display{ font-family:var(--f-display); font-weight:400; line-height:.92; letter-spacing:.01em; font-size:clamp(2.6rem,7vw,6rem); text-transform:uppercase; color:var(--bone); } .eyebrow{ font-family:var(--f-cond); font-weight:600; letter-spacing:.32em; text-transform:uppercase; font-size:.78rem; color:var(--ember); display:inline-flex;align-items:center;gap:.7rem; margin-bottom:1.1rem; } .eyebrow::before{content:"";width:2.2rem;height:1px;background:var(--orange)} .eyebrow--center{justify-content:center} .eyebrow--center::before{display:none} .section{ position:relative; padding:clamp(4.5rem,11vw,9rem) var(--pad); max-width:var(--maxw); margin-inline:auto; } /* ---------- Reveal (word masks) ---------- */ /* Text is VISIBLE by default. The hidden/animated state applies ONLY after reveal.js adds .reveal-armed to . So if the script never runs (blocked CDN, cache/parse failure, JS off), content shows normally instead of staying invisible. reveal.js then reveals per-element via .is-revealed. */ [data-reveal]{opacity:1} .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em} .word__in{display:inline-block} html.reveal-armed .word__in{transform:translateY(110%);opacity:0;will-change:transform} html.reveal-armed .is-revealed .word__in{transform:translateY(0);opacity:1; transition:transform .9s var(--ease),opacity .9s var(--ease); transition-delay:calc(var(--i,0)*.045s)} @media (prefers-reduced-motion:reduce){ html.reveal-armed .word__in{transform:none!important;opacity:1!important;transition:none!important} } /* ===================================================================== BUTTONS ===================================================================== */ .btn{ --bg:transparent; position:relative;display:inline-flex;align-items:center;justify-content:center; gap:.6rem; font-family:var(--f-cond);font-weight:600;letter-spacing:.14em;text-transform:uppercase; font-size:.86rem; padding:1.05rem 2.1rem;border-radius:2px; color:var(--bone); will-change:transform; transition:color .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease); } .btn span{position:relative;z-index:2;display:block;will-change:transform} .btn--solid{background:var(--orange);color:#120a05;box-shadow:0 10px 30px -12px rgba(196,88,27,.8)} .btn--solid::after{content:"";position:absolute;inset:0;border-radius:2px; background:linear-gradient(180deg,var(--ember-hot),var(--orange)); opacity:0;transition:opacity .4s var(--ease);z-index:1} .btn--solid:hover{color:#0a0603} .btn--solid:hover::after{opacity:1} .btn--ghost{border:1px solid var(--line);color:var(--bone)} .btn--ghost::after{content:"";position:absolute;inset:0;background:var(--bone);transform:scaleX(0); transform-origin:left;transition:transform .5s var(--ease);z-index:1} .btn--ghost:hover{color:var(--ink);border-color:var(--bone)} .btn--ghost:hover::after{transform:scaleX(1)} .btn--sm{padding:.7rem 1.25rem;font-size:.76rem} .btn--block{width:100%} .btn:disabled{opacity:.4;pointer-events:none} /* ===================================================================== EMBLEM ===================================================================== */ .emblem{width:100%;height:100%;overflow:visible} .em-ring-o{fill:none;stroke:var(--orange);stroke-width:2.5} .em-ring-i{fill:none;stroke:var(--steel-3);stroke-width:1;opacity:.6} .em-arc{fill:var(--steel-2);font-family:var(--f-cond);font-size:12px;font-weight:600;letter-spacing:2px} .em-star{fill:var(--orange)} .em-plume{fill:var(--orange)} .em-helm-body{fill:none;stroke:var(--steel-2);stroke-width:3} .em-nose{fill:none;stroke:var(--steel-2);stroke-width:3} .em-eye{fill:var(--orange)} .em-est{fill:var(--ember);font-family:var(--f-cond);font-size:11px;font-weight:600;letter-spacing:3px;text-anchor:middle} /* preloader emblem draw-in */ .emblem--load .em-ring-o,.emblem--load .em-ring-i{ stroke-dasharray:600;stroke-dashoffset:600; animation:draw 1.5s var(--ease) forwards} .emblem--load .em-helm,.emblem--load .em-star-g,.emblem--load .em-arc,.emblem--load .em-est{ opacity:0;animation:fadeIn .8s ease .7s forwards} @keyframes draw{to{stroke-dashoffset:0}} @keyframes fadeIn{to{opacity:1}} /* ===================================================================== PRELOADER ===================================================================== */ .preloader{ position:fixed;inset:0;z-index:2000; background:var(--black); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem; } .preloader__badge{width:118px;height:118px} .preloader__word{ font-family:var(--f-display);font-size:clamp(1.6rem,5vw,2.4rem);letter-spacing:.06em; opacity:0;transform:translateY(14px);animation:fadeUp .7s var(--ease) .5s forwards} .preloader__count{ font-family:var(--f-cond);font-weight:500;color:var(--muted);letter-spacing:.2em;font-size:.9rem} .preloader__pct{color:var(--orange)} @keyframes fadeUp{to{opacity:1;transform:none}} /* shutter wipe */ .preloader__shutter{position:absolute;inset:0;display:flex;pointer-events:none;z-index:-1} .preloader__shutter span{flex:1;background:var(--ink);transform:scaleY(0);transform-origin:top} .preloader.is-done .preloader__shutter{z-index:5} .preloader.is-done .preloader__shutter span{transform:scaleY(1); transition:transform .7s var(--ease-2)} .preloader.is-done .preloader__shutter span:nth-child(2){transition-delay:.08s} .preloader.is-done .preloader__shutter span:nth-child(3){transition-delay:.16s} .preloader.is-done .preloader__shutter span:nth-child(4){transition-delay:.24s} .preloader.is-gone{opacity:0;visibility:hidden;transition:opacity .5s ease .5s,visibility 0s .9s} body.is-loading{overflow:hidden;height:100vh} /* ===================================================================== CUSTOM CURSOR ===================================================================== */ .cursor{position:fixed;top:0;left:0;z-index:1500;pointer-events:none; mix-blend-mode:difference;display:none} .cursor__dot{position:fixed;width:6px;height:6px;border-radius:50%;background:#fff; transform:translate(-50%,-50%)} .cursor__ring{position:fixed;width:38px;height:38px;border:1px solid rgba(255,255,255,.6); border-radius:50%;transform:translate(-50%,-50%); transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),border-color .3s; display:flex;align-items:center;justify-content:center} .cursor__label{font-family:var(--f-cond);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase; color:#fff;opacity:0;transition:opacity .3s} .cursor.is-hover .cursor__ring{width:54px;height:54px;background:rgba(255,255,255,.08)} .cursor.is-view .cursor__ring{width:74px;height:74px;background:var(--orange);border-color:var(--orange);mix-blend-mode:normal} .cursor.is-view .cursor__label{opacity:1} .cursor.is-down .cursor__ring{width:30px;height:30px} @media (hover:hover) and (pointer:fine){ .cursor{display:block} /* hide native cursor only where we control it */ body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none} } /* ===================================================================== NAV ===================================================================== */ .nav{ position:fixed;top:0;left:0;width:100%;z-index:1000; display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.15rem var(--pad); transition:background .5s var(--ease),padding .5s var(--ease),backdrop-filter .5s; } .nav.is-scrolled{ background:rgba(9,9,10,.82);backdrop-filter:blur(14px); padding-top:.75rem;padding-bottom:.75rem; border-bottom:1px solid var(--line-2); } .nav__brand{display:flex;align-items:center;gap:.7rem} .emblem--nav{width:38px;height:38px;flex:0 0 auto} .nav__name{font-family:var(--f-display);font-size:1.15rem;letter-spacing:.04em} .nav__links{display:flex;gap:2rem} .nav__links a{ font-family:var(--f-cond);font-weight:500;letter-spacing:.12em;text-transform:uppercase; font-size:.82rem;color:var(--bone-dim);position:relative;padding:.3rem 0; transition:color .3s} .nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px; background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)} .nav__links a:hover{color:var(--bone)} .nav__links a:hover::after{transform:scaleX(1);transform-origin:left} .nav__cta{flex:0 0 auto} .nav__burger{display:none;width:44px;height:44px;flex-direction:column;gap:6px;align-items:center;justify-content:center} .nav__burger span{width:24px;height:2px;background:var(--bone);transition:transform .4s var(--ease),opacity .3s} .nav.is-open .nav__burger span:nth-child(1){transform:translateY(4px) rotate(45deg)} .nav.is-open .nav__burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)} @media (max-width:920px){ .nav__cta{display:none} .nav__burger{display:flex} /* Closed drawer hides via opacity/visibility (NOT translateX) so it can never add horizontal scroll width on mobile. Sits full-viewport. */ .nav__links{ position:fixed;inset:0;background:var(--ink);flex-direction:column; align-items:center;justify-content:center;gap:1.6rem; opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px); transition:opacity .4s var(--ease),transform .5s var(--ease-2),visibility 0s .5s; z-index:1} .nav.is-open .nav__links{opacity:1;visibility:visible;pointer-events:auto;transform:none; transition:opacity .4s var(--ease),transform .5s var(--ease-2)} .nav__burger{position:relative;z-index:2} .nav__links a{font-size:1.4rem;font-family:var(--f-display);letter-spacing:.06em;color:var(--bone)} .nav__links a::after{display:none} } /* ===================================================================== HERO ===================================================================== */ .hero{ position:relative;min-height:100svh; display:flex;align-items:center;justify-content:center;text-align:center; padding:5.25rem var(--pad) 3.5rem; overflow:hidden; background: radial-gradient(120% 85% at 50% 6%, rgba(196,88,27,.16), transparent 55%), radial-gradient(90% 70% at 50% 100%, rgba(122,52,16,.22), transparent 60%), var(--black); } .hero__embers{position:absolute;inset:0;width:100%;height:100%;z-index:1} /* warm halo behind the emblem */ .hero__glow{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%); width:min(88vw,660px);aspect-ratio:1;border-radius:50%;z-index:1;pointer-events:none; background:radial-gradient(circle, rgba(232,114,44,.30), rgba(196,88,27,.10) 42%, transparent 68%); animation:glowPulse 6s ease-in-out infinite} @keyframes glowPulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}} .hero__grain,.hero__vignette{position:absolute;inset:0;pointer-events:none} .hero__grain{z-index:2;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"); mix-blend-mode:overlay} .hero__vignette{z-index:2; background:radial-gradient(120% 100% at 50% 42%,transparent 46%,rgba(0,0,0,.72) 100%)} .hero__inner{position:relative;z-index:3;max-width:60rem;margin-inline:auto;width:100%; display:flex;flex-direction:column;align-items:center;gap:1.05rem} .hero__eyebrow{ font-family:var(--f-cond);font-weight:500;letter-spacing:.3em;text-transform:uppercase; font-size:clamp(.66rem,1.5vw,.84rem);color:var(--bone-dim)} .hero__eyebrow span{color:var(--ember)} /* the emblem is the wordmark — feature it big and centered */ /* big centerpiece — fills the view, caps near the video's native 624px so it never blurs, and shrinks to fit narrow phones via the vw term */ .hero__emblem{width:min(92vw,64vh,660px);aspect-ratio:1;margin:.1rem 0; filter:drop-shadow(0 26px 54px rgba(0,0,0,.55)); animation:heroFloat 6.5s ease-in-out infinite} .hero__emblem .emblem, .hero__video{width:100%;height:100%;object-fit:cover;display:block; opacity:0;animation:heroIn 1s var(--ease) .25s forwards} @keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes heroIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}} .hero__tag{font-size:clamp(1.05rem,2.3vw,1.5rem);color:var(--bone);max-width:24ch; font-weight:500;line-height:1.35} .hero__hours{font-family:var(--f-cond);font-weight:500;letter-spacing:.2em;text-transform:uppercase; font-size:clamp(.72rem,1.5vw,.85rem);color:var(--ember)} .hero__hours span{font-family:var(--f-body);text-transform:lowercase;letter-spacing:0} .hero__cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem} .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} .hero__scroll{position:absolute;left:50%;bottom:1.8rem;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:.6rem; font-family:var(--f-cond);letter-spacing:.24em;font-size:.66rem;color:var(--muted)} .hero__scroll i{width:1px;height:42px;background:linear-gradient(var(--orange),transparent);position:relative;overflow:hidden} .hero__scroll i::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%; background:var(--ember-hot);animation:scrollDash 1.8s var(--ease) infinite} @keyframes scrollDash{0%{top:-50%}60%,100%{top:100%}} @media (prefers-reduced-motion:reduce){ .hero__glow,.hero__emblem{animation:none} .hero__emblem .emblem,.hero__video{opacity:1;animation:none} } /* ===================================================================== STORY ===================================================================== */ .story__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:center} .story__media{position:relative} .media-slot{ position:relative;overflow:hidden;border-radius:4px; background: radial-gradient(120% 120% at 30% 20%, rgba(196,88,27,.28), transparent 55%), linear-gradient(160deg,var(--panel-2),var(--ink) 70%); border:1px solid var(--line); display:flex;align-items:center;justify-content:center; } .media-slot::after{content:"";position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); mix-blend-mode:overlay;pointer-events:none} .media-slot__tag{position:relative;z-index:2;font-family:var(--f-cond);letter-spacing:.24em; font-size:.7rem;color:var(--muted);text-transform:uppercase;padding:.5rem .8rem; border:1px dashed var(--line);border-radius:2px} .media-slot__tag--br{position:absolute;right:.8rem;bottom:.8rem} .media-slot--portrait{aspect-ratio:4/5} .story__tags{position:absolute;right:-.6rem;bottom:1.4rem;display:flex;gap:.5rem} .dogtag{font-family:var(--f-cond);font-weight:600;letter-spacing:.1em;font-size:.82rem; color:var(--steel-2);background:linear-gradient(160deg,#2a2420,#171310); border:1px solid var(--line);padding:.5rem .8rem;border-radius:20px; box-shadow:0 8px 20px -10px #000} .story__copy p{color:var(--bone-dim);margin-top:1rem;max-width:52ch} .story__copy p:first-child{margin-top:1.4rem} .story__stamps{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.2rem} .stamp{border-left:2px solid var(--orange);padding-left:.9rem} .stamp b{display:block;font-family:var(--f-cond);font-weight:600;text-transform:uppercase; letter-spacing:.1em;font-size:.9rem;color:var(--bone)} .stamp span{font-size:.82rem;color:var(--muted)} @media (max-width:820px){.story__grid{grid-template-columns:1fr}.story__tags{right:1rem}} /* ===================================================================== ALL DAY — biscuits & gravy hero moment ===================================================================== */ .allday{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center; text-align:center;padding:6rem var(--pad);overflow:hidden;isolation:isolate} .allday__bg{position:absolute;inset:0;border-radius:0;border:none;z-index:-2} .allday__embers{position:absolute;inset:0;z-index:-1;width:100%;height:100%} .allday__scrim{position:absolute;inset:0;z-index:-1; background: radial-gradient(80% 80% at 50% 50%, transparent, rgba(9,9,10,.86)), linear-gradient(0deg,var(--black),transparent 30%,transparent 70%,var(--black))} .allday__inner{position:relative;z-index:2;max-width:60rem} .allday__title{margin:.4rem 0} .allday__line{display:block;overflow:hidden;font-family:var(--f-display);text-transform:uppercase; line-height:.9;letter-spacing:.01em} .allday__line--chrome{font-size:clamp(3rem,10vw,8.5rem)} .allday__super{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.4rem 0 1.2rem; font-family:var(--f-cond);font-weight:700;letter-spacing:.2em;text-transform:uppercase; font-size:clamp(1.1rem,3vw,2rem);color:var(--orange)} .allday__amp{color:var(--muted)} .allday__note{color:var(--bone-dim);max-width:44ch;margin:0 auto 2rem;font-size:1.05rem} .allday__price{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap} .chip{font-family:var(--f-cond);letter-spacing:.06em;text-transform:uppercase;font-size:.9rem; color:var(--bone-dim);border:1px solid var(--line);border-radius:40px;padding:.55rem 1.1rem; display:inline-flex;gap:.5rem;align-items:baseline;background:rgba(20,17,16,.5)} .chip b{font-family:var(--f-display);color:var(--bone);font-size:1.05rem} .chip--o{border-color:var(--orange);color:var(--ember)} .chip--o b{color:var(--ember)} /* ===================================================================== MENU ===================================================================== */ .menu__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.4rem} .menu__sub{color:var(--muted);max-width:34ch} .menu__filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.4rem; position:sticky;top:64px;z-index:20;padding:.8rem 0; background:linear-gradient(var(--black) 70%,transparent)} .mfilter{font-family:var(--f-cond);font-weight:500;letter-spacing:.1em;text-transform:uppercase; font-size:.8rem;color:var(--bone-dim);padding:.55rem 1.05rem;border:1px solid var(--line); border-radius:40px;transition:all .3s var(--ease);white-space:nowrap} .mfilter:hover{border-color:var(--bone-dim);color:var(--bone)} .mfilter.is-active{background:var(--orange);border-color:var(--orange);color:#120a05} .menu__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1px; background:var(--line-2);border:1px solid var(--line-2)} .mcard{ position:relative;background:var(--ink);padding:1.5rem 1.4rem; display:flex;flex-direction:column;gap:.35rem; transition:transform .5s var(--ease),background .4s var(--ease); transform-style:preserve-3d;will-change:transform} .mcard:hover{background:var(--panel);z-index:2} .mcard__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem} .mcard__name{font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em; font-size:1.06rem;color:var(--bone)} .mcard__price{font-family:var(--f-display);font-size:1.15rem;color:var(--steel-2);flex:0 0 auto; transition:color .3s,transform .3s var(--ease)} .mcard:hover .mcard__price{color:var(--ember);transform:scale(1.08)} .mcard__desc{font-size:.84rem;color:var(--muted);line-height:1.45} .mcard__variants{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem} .mtag{font-family:var(--f-cond);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase; color:var(--bone-dim);border:1px solid var(--line);border-radius:3px;padding:.2rem .5rem} .mtag b{color:var(--ember);font-weight:600} .mcard__badge{position:absolute;top:1rem;right:1.4rem;font-family:var(--f-cond);font-size:.6rem; letter-spacing:.16em;text-transform:uppercase;color:var(--ember);border:1px solid var(--orange); border-radius:2px;padding:.15rem .4rem;opacity:.9} .mcard.is-hidden{display:none} /* filter re-enter animation */ .mcard.is-enter{animation:cardIn .5s var(--ease) both} @keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .menu__foot{margin-top:1.6rem;color:var(--muted-2);font-size:.8rem;text-align:center} /* ===================================================================== THIS WEEK — pinned horizontal ===================================================================== */ .week{position:relative;background:linear-gradient(180deg,var(--black),var(--ink))} .week__pin{min-height:100vh;display:flex;align-items:center;gap:clamp(2rem,5vw,5rem); padding:0 var(--pad);overflow:hidden} .week__intro{flex:0 0 auto;max-width:26rem} .week__hint{margin-top:1.4rem;font-family:var(--f-cond);letter-spacing:.2em;text-transform:uppercase; color:var(--muted);font-size:.8rem;display:flex;gap:.5rem;align-items:center} .week__hint i{color:var(--orange);animation:nudge 1.4s var(--ease) infinite} @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}} .week__track{display:flex;gap:1.4rem;will-change:transform} .wcard{ flex:0 0 clamp(230px,26vw,320px); background:linear-gradient(165deg,var(--panel-2),var(--ink)); border:1px solid var(--line);border-radius:6px;padding:2rem 1.6rem; min-height:clamp(300px,42vh,420px);position:relative; display:flex;flex-direction:column; transition:transform .5s var(--ease),border-color .5s} .wcard:hover{border-color:var(--orange);transform:translateY(-6px)} .wcard__day{font-family:var(--f-cond);font-weight:600;letter-spacing:.2em;text-transform:uppercase; font-size:.72rem;color:var(--ember)} .wcard__title{font-family:var(--f-display);font-size:clamp(1.8rem,3vw,2.6rem);line-height:.92; text-transform:uppercase;margin:.8rem 0 1rem;color:var(--bone)} .wcard p{color:var(--bone-dim);font-size:.92rem;margin-top:auto} .wcard__no{position:absolute;top:1.4rem;right:1.6rem;font-family:var(--f-display);font-size:1.4rem; color:var(--char)} @media (max-width:820px){ .week__pin{flex-direction:column;align-items:flex-start;justify-content:center; min-height:auto;padding:clamp(4rem,10vw,7rem) var(--pad)} .week__track{overflow-x:auto;max-width:100%;padding-bottom:1rem;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch} .wcard{scroll-snap-align:start} .week__hint{display:none} } /* ===================================================================== ORDER — mock pickup flow ===================================================================== */ .order__head{text-align:center;max-width:44rem;margin:0 auto 3rem} .order__head .eyebrow{justify-content:center} .order__head .eyebrow::before{display:none} .order__sub{color:var(--muted);margin-top:1rem} .order__app{position:relative;display:grid;grid-template-columns:1.5fr .9fr;gap:1.4rem; background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.4rem; min-height:520px} .order__cats{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem} .ocat{font-family:var(--f-cond);letter-spacing:.08em;text-transform:uppercase;font-size:.76rem; color:var(--bone-dim);padding:.45rem .9rem;border-radius:30px;border:1px solid var(--line);transition:all .3s} .ocat.is-active{background:var(--bone);color:var(--ink);border-color:var(--bone)} .order__items{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} .oitem{display:flex;justify-content:space-between;align-items:center;gap:1rem; background:var(--ink);border:1px solid var(--line-2);border-radius:6px;padding:.9rem 1rem; transition:border-color .3s,transform .3s var(--ease)} .oitem:hover{border-color:var(--line);transform:translateY(-2px)} .oitem__info b{display:block;font-family:var(--f-cond);font-weight:600;text-transform:uppercase; letter-spacing:.03em;font-size:.9rem;color:var(--bone)} .oitem__info span{font-size:.82rem;color:var(--muted)} .oitem__add{width:34px;height:34px;border-radius:50%;background:var(--orange);color:#120a05; font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 auto; transition:transform .3s var(--ease),background .3s} .oitem__add:hover{transform:scale(1.12) rotate(90deg);background:var(--ember-hot)} .order__cart{background:var(--ink);border:1px solid var(--line);border-radius:8px; display:flex;flex-direction:column;overflow:hidden} .cart__head{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.2rem; border-bottom:1px solid var(--line);font-family:var(--f-cond);text-transform:uppercase; letter-spacing:.1em;font-size:.85rem} .cart__pickup{color:var(--ember);font-size:.72rem} .cart__lines{flex:1;overflow-y:auto;padding:.8rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;min-height:180px} .cart__empty{color:var(--muted-2);font-size:.88rem;margin:auto;text-align:center} .cline{display:flex;align-items:center;gap:.7rem;animation:cardIn .3s var(--ease) both} .cline__qty{display:flex;align-items:center;gap:.5rem;flex:0 0 auto} .cline__qty button{width:24px;height:24px;border:1px solid var(--line);border-radius:50%; color:var(--bone-dim);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center; transition:all .25s} .cline__qty button:hover{border-color:var(--orange);color:var(--ember)} .cline__qty b{min-width:1.1rem;text-align:center;font-family:var(--f-cond)} .cline__name{flex:1;font-size:.86rem;color:var(--bone-dim)} .cline__price{font-family:var(--f-cond);color:var(--bone);font-size:.86rem} .cart__foot{border-top:1px solid var(--line);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.8rem} .cart__total{display:flex;justify-content:space-between;align-items:baseline; font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.08em} .cart__total span:last-child{font-family:var(--f-display);font-size:1.5rem;color:var(--ember)} .cart__fine{font-size:.68rem;color:var(--muted-2);text-align:center} .order__done{position:absolute;inset:0;background:rgba(9,9,10,.97);z-index:5; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; padding:2rem;border-radius:10px; opacity:0;visibility:hidden;transform:scale(.98); transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s} .order__done.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s,transform .5s} .check{width:82px;height:82px;margin-bottom:1.2rem} .check circle{fill:none;stroke:var(--orange);stroke-width:3; stroke-dasharray:208;stroke-dashoffset:208} .check path{fill:none;stroke:var(--ember);stroke-width:4;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:60;stroke-dashoffset:60} .order__done.is-on .check circle{animation:draw .7s var(--ease) .1s forwards} .order__done.is-on .check path{animation:draw .5s var(--ease) .6s forwards} .order__done h3{font-family:var(--f-display);font-size:2rem;text-transform:uppercase;color:var(--bone)} .order__done-sub{color:var(--bone-dim);margin:.6rem 0 1.2rem} .order__done-sub b{color:var(--ember)} .order__recap{font-size:.85rem;color:var(--muted);max-width:30ch;margin-bottom:1.2rem;line-height:1.7} .order__addr{font-family:var(--f-cond);letter-spacing:.06em;color:var(--bone-dim);font-size:.8rem;margin-bottom:1.6rem} @media (max-width:820px){ .order__app{grid-template-columns:1fr} .order__items{grid-template-columns:1fr} } /* ===================================================================== PROOF ===================================================================== */ .proof__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2); border-block:1px solid var(--line-2);margin-bottom:clamp(3rem,7vw,5rem)} .stat{background:var(--black);padding:clamp(1.6rem,4vw,3rem) 1.2rem;text-align:center} .stat b{display:block;font-family:var(--f-display);font-size:clamp(2.6rem,6vw,4.4rem);line-height:1} .stat span{font-family:var(--f-cond);letter-spacing:.14em;text-transform:uppercase;font-size:.74rem; color:var(--muted);margin-top:.6rem;display:block} .proof__quotes{text-align:center} .proof__quotes .eyebrow{justify-content:center} .proof__quotes .eyebrow::before{display:none} .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.6rem} .quote{background:linear-gradient(160deg,var(--panel-2),var(--ink));border:1px solid var(--line); border-radius:6px;padding:1.8rem;text-align:left;position:relative} .quote::before{content:"“";position:absolute;top:.4rem;left:1rem;font-family:var(--f-display); font-size:3rem;color:var(--orange);opacity:.5} .quote blockquote{color:var(--bone-dim);font-size:1rem;line-height:1.6;margin-bottom:1rem;padding-top:.8rem} .quote figcaption{font-family:var(--f-cond);letter-spacing:.1em;text-transform:uppercase; font-size:.74rem;color:var(--ember)} .proof__disclaimer{margin-top:1.6rem;font-size:.76rem;color:var(--muted-2)} @media (max-width:820px){.proof__stats{grid-template-columns:repeat(2,1fr)}.quotes{grid-template-columns:1fr}} /* ===================================================================== VISIT ===================================================================== */ .visit__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:stretch} .visit__row{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:1.2rem 0; border-top:1px solid var(--line);align-items:start} .visit__row:first-of-type{border-top:none} .visit__k{font-family:var(--f-cond);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem; color:var(--muted);padding-top:.15rem} .visit__k--o{color:var(--ember)} .visit__v{color:var(--bone);font-size:1.02rem} .visit__v em{color:var(--muted);font-style:italic;font-size:.9rem} a.visit__row{transition:padding-left .3s var(--ease)} a.visit__row:hover{padding-left:.6rem} a.visit__row:hover .visit__v{color:var(--ember)} .visit__cta{margin-top:1.8rem} .visit__map{aspect-ratio:auto;min-height:340px;flex-direction:column;gap:1rem;position:relative; background: repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(236,228,216,.03) 39px), repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(236,228,216,.03) 39px), radial-gradient(90% 90% at 50% 40%, rgba(196,88,27,.16), transparent 60%), linear-gradient(160deg,var(--panel-2),var(--ink))} .visit__pin{width:78px;height:78px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6))} .visit__maplabel{font-family:var(--f-cond);letter-spacing:.12em;text-transform:uppercase; font-size:.8rem;color:var(--bone-dim)} @media (max-width:820px){.visit__grid{grid-template-columns:1fr}} /* ===================================================================== FOOTER ===================================================================== */ .footer{background:var(--ink);border-top:1px solid var(--line);padding:clamp(3rem,7vw,5rem) var(--pad) 2rem} .footer__top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:2rem; padding-bottom:2.6rem;border-bottom:1px solid var(--line-2)} .footer__brand{display:flex;align-items:center;gap:.8rem;font-family:var(--f-display);font-size:1.4rem} .emblem--foot{width:46px;height:46px} .footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem} .footer__col h4{font-family:var(--f-cond);letter-spacing:.16em;text-transform:uppercase; font-size:.78rem;color:var(--ember);margin-bottom:.9rem} .footer__col a,.footer__col span{display:block;color:var(--bone-dim);font-size:.9rem;margin-bottom:.5rem; transition:color .3s} .footer__col a:hover{color:var(--ember)} .footer__bar{max-width:var(--maxw);margin:1.6rem auto 0;display:flex;justify-content:space-between; flex-wrap:wrap;gap:1rem;font-size:.78rem;color:var(--muted-2)} .footer__credit b{color:var(--bone-dim)} @media (max-width:820px){.footer__top{grid-template-columns:1fr}.footer__cols{grid-template-columns:1fr 1fr}} /* ===================================================================== MOTION SAFETY ===================================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .hero__scroll i::after,.week__hint i{animation:none} }