/* ========================================================================== BROS — prototype design system Dark canvas + brand yellow. Mobile-first; desktop layers on at 900px. ========================================================================== */ :root { --ink: #0a0a0c; /* page background */ --panel: #131316; /* card background */ --panel-2: #1a1a1f; /* raised card background */ --yellow: #ffff00; /* brand yellow (matches logo art) */ --yellow-dim: rgba(255, 255, 0, .30); --yellow-faint: rgba(255, 255, 0, .12); --text: #ffffff; --muted: #b6b6bd; --radius: 18px; --topbar-h: 60px; --bottomnav-h: 66px; --font-display: 'Koulen', 'Arial Narrow', sans-serif; --font-body: 'Barlow', -apple-system, 'Segoe UI', Roboto, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Kill the browser's default tap-highlight everywhere — it's a square, semi-transparent overlay that ignores border-radius, so it flashes as a hard-cornered box over our rounded cards/chips/buttons on every tap. We already draw our own tap/active feedback (border glow, badge, expand animation), so the native one is only ever in the way. */ html { -webkit-tap-highlight-color: transparent; } /* overscroll-behavior stops iOS's rubber-band bounce, which otherwise lets the fixed bottom nav and sticky header momentarily slide off-screen at the scroll ends. overflow-x: clip prevents horizontal overflow WITHOUT turning into a scroll container (plain `hidden` does, which is what let the sticky header drift). */ /* Root-level guards against the Android Chrome "pannable viewport" bug: if the layout ever ends up wider than the screen (Chrome's device-only font boosting can do this), the page becomes pinch-out-able and fixed bars stop tracking the visible screen while scrolling. text-size-adjust disables the font boosting; overflow-x: clip on the ROOT clamps the layout viewport to device width no matter what. */ html { scroll-behavior: smooth; overscroll-behavior-y: none; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } body { background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; padding-top: 0; /* header is sticky/in-flow, so no compensating offset needed */ padding-bottom: var(--bottomnav-h); /* clears the fixed bottom nav */ overflow-x: clip; overscroll-behavior-y: none; } img { max-width: 100%; height: auto; display: block; } a { color: var(--yellow); text-decoration: none; } a:hover { text-decoration: none; } ::selection { background: var(--yellow); color: #000; } /* --------------------------------------------------- cross-page transition -- */ /* Native cross-document view transitions: a quick crossfade between pages on same-origin navigation (Chrome/Safari; a silent no-op in browsers without support, which just navigate instantly as before). The fixed bars are named so they're captured as their own persistent groups and hold steady instead of crossfading with the page body. */ @view-transition { navigation: auto; } .topbar { view-transition-name: bros-topbar; } .bottomnav { view-transition-name: bros-bottomnav; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* subtle top glow so the black canvas isn't flat */ .page-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 40% at 50% -10%, rgba(255,255,0,.07), transparent 60%), radial-gradient(50% 35% at 85% 110%, rgba(255,255,0,.04), transparent 60%); } main { position: relative; z-index: 1; } /* ---------------------------------------------------------------- type -- */ h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; line-height: .95; text-transform: uppercase; } h1 { font-size: clamp(2.6rem, 11vw, 4.6rem); } h2 { font-size: clamp(1.9rem, 7vw, 3rem); } h3 { font-size: clamp(1.25rem, 5vw, 1.6rem); letter-spacing: .04em; } .eyebrow { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); } .eyebrow .bolt { width: 14px; height: 14px; flex: none; } .lead { color: var(--muted); font-size: 1.06rem; max-width: 60ch; } .accent { color: var(--yellow); } .bolt { fill: var(--yellow); } /* ------------------------------------------------------------- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .09em; text-transform: uppercase; padding: .72rem 1.5rem .58rem; /* Koulen sits high; nudge optical center */ border-radius: 12px; border: 2px solid var(--yellow); transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; cursor: pointer; white-space: nowrap; } .btn-solid { background: var(--yellow); color: #000; box-shadow: 0 6px 24px -8px rgba(255,255,0,.5); } .btn-solid:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(255,255,0,.65); } .btn-ghost { background: transparent; color: var(--yellow); } .btn-ghost:hover { background: var(--yellow-faint); transform: translateY(-2px); } .btn-lg { font-size: 1.25rem; padding: .9rem 2rem .72rem; border-radius: 14px; } /* -------------------------------------------------------------- topbar -- */ /* Fixed (not sticky) and no backdrop-filter: Android Chrome mis-anchors blurred sticky/fixed layers after its URL-bar show/hide resize, leaving the bars persistently offset off-screen. The live site's plain fixed bars never did this — mirror that architecture. */ .topbar { /* Sticky (kept in normal flow) instead of fixed: Chrome for iOS drops plain position:fixed during scroll and lets the header slide away (Safari on the same device and every desktop browser are fine). Sticky sidesteps that. Being in-flow, it no longer needs body { padding-top } to compensate. */ position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 12, .97); border-bottom: 1px solid rgba(255,255,0,.16); box-shadow: 0 4px 18px -6px rgba(255,255,0,.18); } .tb-inner { max-width: 1160px; margin: 0 auto; height: var(--topbar-h); display: flex; align-items: center; gap: .9rem; padding: 0 1rem; } .tb-brand { display: flex; align-items: center; gap: .6rem; flex: none; } .tb-brand img.badge { width: 42px; height: auto; } .tb-brand img.wordmark { height: 30px; width: auto; } .tb-spacer { flex: 1; } .tb-nav { display: none; } .tb-order-mobile { flex: none; } .tb-order-mobile .btn { font-size: .92rem; padding: .5rem 1rem .4rem; border-width: 2px; } /* ----------------------------------------------------- mobile bottom nav -- */ .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; /* above the More sheet so it stays usable while the sheet is open */ transform: translateZ(0); /* own compositor layer -- compositing hint to help this fixed bar stay pinned during scroll on Chrome for iOS */ /* Fixed height only. env(safe-area-inset-bottom) was in here, but with no viewport-fit=cover it resolves to 0 anyway on iOS -- and Android Chrome transiently reports ~15px for it during the page-load/URL-bar settle, spiking this fixed bar to ~82px for a few frames (visible height glitch). */ height: var(--bottomnav-h); padding: 0 .4rem; background: rgba(12, 12, 14, .985); border-top: 1px solid rgba(255,255,0,.22); border-radius: 18px 18px 0 0; box-shadow: 0 -4px 18px -6px rgba(255,255,0,.25); display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; } .bn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #9a9aa2; font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: none; border: 0; font-family: var(--font-body); cursor: pointer; } .bn-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .bn-item[aria-current="page"], .bn-item.active { color: var(--yellow); } /* instant press feedback: light up on touch, before the tap even releases (the Order disc has its own :active scale, so it's excluded here) */ .bn-item:not(.bn-order):active { color: var(--yellow); } .bn-order { position: relative; color: #000; } .bn-order .bn-disc { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 54px; height: 54px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px -4px rgba(255,255,0,.55), 0 0 0 5px var(--ink); transition: transform .18s ease; } .bn-order:active .bn-disc { transform: translateX(-50%) scale(.94); } .bn-order .bn-disc svg { width: 26px; height: 26px; stroke: #000; } .bn-order span.lbl { margin-top: 26px; color: var(--yellow); } /* ------------------------------------------------------------ more sheet -- */ .sheet { position: fixed; inset: 0; z-index: 70; visibility: hidden; /* Hold visibility until AFTER the close animation. Without the delayed flip, removing .open would set visibility:hidden instantly and cut off the panel slide-down + scrim fade, so the sheet appeared to just vanish on close. */ transition: visibility 0s .34s; } .sheet.open { visibility: visible; transition: visibility 0s 0s; } .sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s ease; } .sheet.open .sheet-scrim { opacity: 1; } .sheet-panel { position: absolute; left: 0; right: 0; bottom: var(--bottomnav-h); /* sits on top of the fixed bottom nav */ background: var(--panel-2); border-radius: 22px 22px 0 0; border: 1px solid rgba(255,255,0,.25); border-bottom: 0; padding: 1.1rem 1.2rem 1.3rem; transform: translateY(130%); /* Close curve mirrors the open curve (open's reversed bezier) so the visible slide-down takes as long as the slide-up instead of snapping away early -- the 130% overshoot + ease-out otherwise front-loads the close motion. */ transition: transform .34s cubic-bezier(.7, 0, .7, .1); } .sheet.open .sheet-panel { transform: translateY(0); transition: transform .3s cubic-bezier(.3, .9, .3, 1); } .sheet-grab { width: 42px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); margin: 0 auto .9rem; } .sheet-title { font-family: var(--font-display); letter-spacing: .12em; color: var(--yellow); font-size: 1rem; margin-bottom: .5rem; } .sheet-link { display: flex; align-items: center; justify-content: space-between; padding: .8rem .2rem; color: var(--text); font-weight: 600; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.08); } .sheet-link:last-of-type { border-bottom: 0; } .sheet-link .chev { color: var(--yellow); font-family: var(--font-display); } .sheet-social { display: flex; gap: 1rem; margin-top: 1rem; } .sheet-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--yellow-dim); } .sheet-social svg { width: 20px; height: 20px; fill: var(--yellow); } /* ---------------------------------------------------------------- hero -- */ .hero { position: relative; max-width: 1160px; margin: 0 auto; padding: 2.2rem 1.25rem 2.6rem; display: flex; flex-direction: column; gap: 1.4rem; overflow: visible; } .hero h1 { font-size: clamp(2.3rem, 9.4vw, 3.9rem); } .hero h1 .accent { color: var(--yellow); } .hero-sub { font-family: var(--font-display); font-size: clamp(1.4rem, 6.2vw, 2.2rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1; margin-top: .45rem; } .hero-copy p.lead { margin-top: .9rem; } .hero-award { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: 1.1rem; padding: .55rem 1.15rem; box-sizing: border-box; border: 1px solid var(--yellow-dim); border-radius: 999px; color: var(--text); background: var(--yellow-faint); transition: border-color .15s ease, background .15s ease; } .hero-award:hover { border-color: var(--yellow); background: rgba(255, 255, 0, .12); } .hero-award .num { font-family: var(--font-display); color: var(--yellow); font-size: 1.55rem; line-height: 1; } .hero-award .award-lines { display: flex; flex-direction: column; text-align: left; line-height: 1.3; } .hero-award .award-what { font-weight: 700; font-size: .88rem; letter-spacing: .03em; } .hero-award .award-who { font-weight: 500; font-size: .74rem; letter-spacing: .04em; color: var(--muted); } .hero-ctas { display: flex; gap: .7rem; flex-wrap: nowrap; margin-top: 1.3rem; } .hero-ctas .btn { flex: 1 1 0; min-width: 0; font-size: 1.02rem; letter-spacing: .07em; padding: .78rem .5rem .6rem; } .hero-img { position: relative; width: 100%; } .hero-img img { width: 100%; filter: drop-shadow(0 26px 40px rgba(0,0,0,.65)); } .hero-img img.promo { border-radius: 20px; border: 1.5px solid rgba(255,255,0,.35); box-shadow: 0 18px 44px -10px rgba(0,0,0,.75), 0 0 34px -8px rgba(255,255,0,.35); filter: none; } /* hero slideshow — square crossfading promos */ .hero-slider { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; border: 1.5px solid rgba(255,255,0,.35); box-shadow: 0 18px 44px -10px rgba(0,0,0,.75), 0 0 34px -8px rgba(255,255,0,.35); overflow: hidden; background: var(--panel); } .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; opacity: 0; transition: opacity .8s ease; } .hero-slide.is-active { opacity: 1; } .no-anim .hero-slide { transition: none; } .hero-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; justify-content: center; gap: 8px; } .hero-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); background: transparent; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.5); transition: background .2s ease, border-color .2s ease, transform .2s ease; } .hero-dot:hover { transform: scale(1.15); } .hero-dot.is-active { background: var(--yellow); border-color: var(--yellow); } .hero-img::before { content: ''; position: absolute; inset: -8%; background: radial-gradient(50% 50% at 50% 55%, rgba(255,255,0,.14), transparent 70%); z-index: -1; } .hero-bolt { position: absolute; width: 34px; height: 34px; z-index: 4; } .hero-bolt.b1 { top: -6px; right: 4%; transform: rotate(14deg); } .hero-bolt.b2 { bottom: 10%; left: -2%; transform: rotate(-12deg); width: 24px; height: 24px; opacity: .8; } /* ----------------------------------------------------------- award band -- */ .band { background: var(--yellow); color: #000; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 1.02rem; padding: .62rem 1rem .5rem; text-align: center; } .band a { color: #000; text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------- sections -- */ .sec { max-width: 1160px; margin: 0 auto; padding: 3rem 1.25rem 1rem; } .sec-head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; } .sec-head .lead { margin-top: .2rem; } /* --------------------------------------------------------- category cards -- */ .cat-grid { display: grid; gap: 1rem; } .cat-card { position: relative; display: flex; align-items: center; gap: .6rem; background: linear-gradient(160deg, var(--panel-2), var(--panel) 70%); border: 1.5px solid var(--yellow-dim); border-radius: var(--radius); padding: 1.15rem 0.4rem 1.15rem 1.25rem; min-height: 128px; overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .cat-card:hover { border-color: var(--yellow); transform: translateY(-3px); box-shadow: 0 14px 32px -14px rgba(255,255,0,.35); } .cat-copy { flex: 1 1 55%; min-width: 0; } .cat-copy h3 { color: var(--text); } .cat-copy p { color: var(--muted); font-size: .92rem; margin-top: .15rem; } .cat-copy .chev { display: inline-block; margin-left: .3em; color: var(--yellow); font-family: var(--font-display); font-size: .8em; letter-spacing: .05em; vertical-align: baseline; transition: transform .2s ease; } .cat-card:hover .chev { transform: translateX(5px); } .cat-img { flex: 0 0 42%; display: flex; justify-content: center; } .cat-img img { width: 100%; max-width: 190px; max-height: 168px; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.6)); transform: rotate(-3deg); transition: transform .25s ease; } .cat-card:hover .cat-img img { transform: rotate(0deg) scale(1.04); } .cat-img img.round { border-radius: 50%; aspect-ratio: 1; object-fit: cover; border: 2px solid rgba(255,255,0,.25); } /* ------------------------------------------------------------ menu page -- */ .menu-hero { padding-top: 2rem; padding-bottom: .4rem; } .menu-hero h1 { margin-top: .3rem; } .menu-hero .lead { margin-top: .7rem; } .chips { position: sticky; top: var(--topbar-h); z-index: 40; background: rgba(10, 10, 12, .97); padding: .7rem 0; border-bottom: 1px solid rgba(255,255,0,.14); } .chips-inner { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chips-inner::-webkit-scrollbar { display: none; } .chip { flex: none; font-family: var(--font-display); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1.5px solid rgba(255,255,255,.18); padding: .42rem .9rem .3rem; border-radius: 999px; transition: color .2s, border-color .2s, background .2s; } .chip:hover { color: var(--text); border-color: rgba(255,255,255,.4); } .chip.active { color: #000; background: var(--yellow); border-color: var(--yellow); } .menu-sec { scroll-margin-top: calc(var(--topbar-h) + 64px); padding-bottom: .4rem; } .menu-sec .sec-head { margin-bottom: 1.1rem; } /* category titles on the menu itself: brand yellow with a soft glow */ .menu-sec .sec-head h2 { color: var(--yellow); text-shadow: 0 0 15px rgba(255,255,0,.35); } .menu-note { color: var(--muted); font-size: .92rem; } .menu-note strong { color: var(--yellow); font-weight: 700; } /* stretch = every card in a row matches the tallest, so cards are always equal height regardless of description length / image aspect. This would normally make a card's row-mate grow when it expands; that's prevented in JS by pinning the row-mate's height for the duration of the expansion. */ .item-grid { display: grid; gap: 1rem; align-items: stretch; } .item-card { position: relative; -webkit-tap-highlight-color: transparent; background: linear-gradient(165deg, var(--panel-2), var(--panel) 75%); border: 1.5px solid rgba(255,255,0,.22); border-radius: var(--radius); padding: 1.1rem 1.15rem 1.25rem; display: grid; grid-template-columns: 1fr 118px; grid-template-areas: "title img" "desc img"; gap: .35rem 1rem; align-items: start; align-content: start; /* extra height in a stretched card goes to the bottom, keeping every title top-aligned */ cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } .item-card:hover { border-color: var(--yellow); box-shadow: 0 12px 28px -14px rgba(255,255,0,.3); } .item-card.expanded { border-color: var(--yellow); box-shadow: 0 16px 34px -16px rgba(255,255,0,.4); } .item-title { grid-area: title; color: var(--text); margin: 0; padding-right: 30px; } .item-desc { grid-area: desc; color: var(--muted); font-size: .93rem; margin: .1rem 0 0; } .item-desc .fine { display: block; margin-top: .35rem; font-size: .78rem; font-style: italic; color: #85858c; } /* gram counts use the body font — the display font (Koulen) is caps-only, so "40g" would render as "40G" */ .list-row .grams { font-family: var(--font-body); font-weight: 700; font-size: .85rem; color: var(--yellow); letter-spacing: .02em; } /* expand affordance: a small, dim + tucked in the top-right corner that rotates to x when open (no circle — just a quiet hint) */ .item-card::after { content: ""; position: absolute; top: 10px; right: 10px; z-index: 2; width: 13px; height: 13px; background-image: linear-gradient(var(--yellow), var(--yellow)), linear-gradient(var(--yellow), var(--yellow)); background-size: 13px 2px, 2px 13px; background-position: center, center; background-repeat: no-repeat; opacity: .38; pointer-events: none; transition: transform .4s cubic-bezier(.2,.75,.25,1), opacity .2s ease; } .item-card:hover::after { opacity: .8; } .item-card.expanded::after { transform: rotate(45deg); opacity: .9; } .item-img { grid-area: img; align-self: center; justify-self: end; } /* fixed image box (object-fit: contain) so every product renders at a uniform height regardless of its aspect ratio — otherwise the varying image heights drive uneven card heights across a row. Cutouts are transparent, so the letterbox space is invisible. */ .item-img img { width: 118px; height: 100px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.6)); transition: none; } .item-img img.round { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,0,.25); } /* expanded: image drops full-width under the title, description below it */ .item-card.expanded { grid-template-columns: 1fr; grid-template-areas: "title" "img" "desc"; } .item-card.expanded .item-img { justify-self: stretch; margin: .5rem 0 .2rem; } .item-card.expanded .item-img img { width: 100%; height: auto; object-fit: contain; } .item-card.expanded .item-img img.round { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; } .item-card.expanded .item-desc { font-size: 1rem; } /* Featured Veggie Bowl card: it gets stretched tall to match the protein-list card beside it, so a thumbnail-sized image looks lost. Give it a big image that fills the card height. Display card (no tap-to-expand, no + badge). */ #bowls .item-card { cursor: default; } #bowls .item-card::after { display: none; } /* wide screens: description left, big image filling the height on the right */ @media (min-width: 900px) { #bowls .item-card { grid-template-columns: 1fr auto; grid-template-areas: "title title" "desc img"; align-content: start; } #bowls .item-card .item-img { align-self: stretch; justify-self: end; } #bowls .item-card .item-img img { width: auto; height: 100%; max-height: 230px; max-width: 260px; object-fit: contain; } #bowls .item-card .item-desc { align-self: start; padding-right: .5rem; } } /* narrower 2-col (landscape phone / small tablet): image stacked underneath */ @media (min-width: 640px) and (max-width: 899px), (min-aspect-ratio: 1/1) and (min-width: 560px) and (max-width: 899px) { #bowls .item-card { grid-template-columns: 1fr; grid-template-areas: "title" "desc" "img"; align-content: start; } #bowls .item-card .item-img { align-self: stretch; justify-self: stretch; margin-top: .5rem; } #bowls .item-card .item-img img { width: auto; height: auto; max-height: 190px; max-width: 100%; margin: 0 auto; object-fit: contain; } } /* shakes */ .shake-cat { color: var(--yellow); font-size: 1.35rem; letter-spacing: .12em; margin: 1.6rem 0 .8rem; } .menu-sec h3.shake-cat:first-of-type { margin-top: 0; } .shake-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } .shake-card { background: var(--panel); border: 1.5px solid rgba(255,255,0,.22); border-radius: var(--radius); overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .shake-card:hover { border-color: var(--yellow); transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(255,255,0,.3); } .shake-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .shake-card h3 { padding: .7rem .9rem .75rem; text-align: center; font-size: 1.05rem; } /* simple text rows (drinks, sauces) */ .list-card { background: var(--panel); border: 1.5px solid rgba(255,255,0,.22); border-radius: var(--radius); padding: 1.2rem 1.25rem; } .list-card h3 { color: var(--text); margin-bottom: .4rem; } .list-row { display: flex; align-items: baseline; gap: .6rem; padding: .45rem 0; } .list-row .nm { font-weight: 600; } .list-row .dots { flex: 1; border-bottom: 2px dotted rgba(255,255,255,.18); transform: translateY(-4px); } .list-row .price { font-family: var(--font-display); color: var(--yellow); letter-spacing: .05em; } .tag-cloud { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; } .tag { font-size: .82rem; font-weight: 600; color: var(--muted); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .28rem .7rem; } .disclaimer { color: #85858c; font-size: .8rem; max-width: 70ch; margin: 1.6rem auto 0; padding: 0 1.25rem 1rem; } /* --------------------------------------------------------- feature rows -- */ .feature { display: flex; gap: 1rem; align-items: flex-start; background: var(--panel); border: 1.5px solid rgba(255,255,0,.18); border-radius: var(--radius); padding: 1.15rem 1.2rem; } .feature + .feature { margin-top: .9rem; } .feature-icon { flex: none; width: 58px; height: 58px; border-radius: 14px; background: var(--yellow-faint); border: 1px solid var(--yellow-dim); display: flex; align-items: center; justify-content: center; } .feature-icon img { width: 38px; height: 38px; object-fit: contain; } .feature h3 { margin-bottom: .25rem; } .feature p { color: var(--muted); font-size: .95rem; } .feature .num { flex: none; font-family: var(--font-display); font-size: 1.9rem; color: var(--yellow); width: 58px; text-align: center; line-height: 1; padding-top: .3rem; } .callout { background: linear-gradient(160deg, rgba(255,255,0,.10), rgba(255,255,0,.03) 60%); border: 1.5px solid var(--yellow-dim); border-radius: var(--radius); padding: .85rem 1.3rem 1.35rem; margin: 1.4rem 0; } .callout h2, .prose .callout h2 { color: var(--yellow); font-size: clamp(2.2rem, 9vw, 3rem); line-height: .9; margin: 0 0 .55rem; } .callout h3 { color: var(--yellow); margin-bottom: .4rem; } .callout p { color: var(--text); } .callout p + p { margin-top: .6rem; } /* ------------------------------------------------------------ locations -- */ .loc-grid { display: grid; gap: 1.1rem; } .loc-card { background: var(--panel); border: 1.5px solid rgba(255,255,0,.25); border-radius: var(--radius); overflow: hidden; } .loc-head { padding: 1.15rem 1.25rem .9rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; } .loc-head h3 { font-size: 1.7rem; } .loc-head .loc-sub { color: var(--muted); font-size: .88rem; text-align: right; } .loc-map { aspect-ratio: 16 / 9; background: #000; } .loc-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(1.05); } .loc-body { padding: 1.05rem 1.25rem 1.25rem; } .loc-meta { list-style: none; display: grid; gap: .55rem; margin-bottom: 1rem; } .loc-meta li { display: flex; gap: .65rem; align-items: flex-start; color: var(--text); font-size: .97rem; } .loc-meta .sub { color: var(--muted); } .loc-meta svg { flex: none; width: 19px; height: 19px; stroke: var(--yellow); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; } .loc-meta a { color: var(--text); font-weight: 600; } .loc-actions { display: flex; gap: .7rem; flex-wrap: wrap; } /* -------------------------------------------------------------- CTA band -- */ .cta-band { max-width: 1160px; margin: 2.6rem auto 0; padding: 0 1.25rem; } .cta-inner { position: relative; background: var(--yellow); border-radius: 22px; color: #000; text-align: center; padding: 2.2rem 1.4rem 2.4rem; overflow: hidden; } .cta-inner h2 { font-size: clamp(2rem, 8vw, 3rem); } .cta-inner p { font-weight: 600; margin: .35rem 0 1.2rem; } .cta-inner .btn { background: #000; color: var(--yellow); border-color: #000; } .cta-inner .btn:hover { transform: translateY(-2px); } .cta-inner .bolt-bg { position: absolute; width: 130px; height: 130px; fill: rgba(0,0,0,.08); } .cta-inner .bolt-bg.l { left: -22px; bottom: -28px; transform: rotate(-16deg); } .cta-inner .bolt-bg.r { right: -18px; top: -30px; transform: rotate(18deg); } /* --------------------------------------------------------------- footer -- */ footer { margin-top: 3rem; border-top: 1px solid rgba(255,255,0,.18); background: #0d0d10; } .ft-inner { max-width: 1160px; margin: 0 auto; padding: 2.2rem 1.25rem 1.6rem; } .ft-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; } .ft-brand img.badge { width: 52px; } .ft-brand img.wordmark { height: 33px; } .ft-cols { display: grid; gap: 1.6rem; grid-template-columns: 1fr 1fr; } .ft-col h4 { font-family: var(--font-display); color: var(--yellow); letter-spacing: .12em; font-size: .95rem; margin-bottom: .55rem; } .ft-col a, .ft-col p { display: block; color: var(--muted); font-size: .95rem; padding: .22rem 0; } .ft-col a:hover { color: var(--text); } .ft-social { display: flex; gap: .8rem; margin-top: .4rem; } .ft-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--yellow-dim); } .ft-social a:hover { border-color: var(--yellow); } .ft-social svg { width: 18px; height: 18px; fill: var(--yellow); } .ft-legal { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; color: #7d7d84; font-size: .84rem; } .ft-legal a { color: #9d9da4; } /* ---------------------------------------------------------- about pages -- */ .prose { max-width: 780px; } .prose h1 { margin: .4rem 0 1rem; } .prose h2 { font-size: 1.5rem; margin: 1.8rem 0 .5rem; } .prose p { color: var(--muted); } .prose p + p { margin-top: .8rem; } .prose strong { color: var(--text); } .prose ul { color: var(--muted); padding-left: 1.2rem; margin: .6rem 0; } .prose li { margin: .35rem 0; } .cta-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; } .award-hero { background: linear-gradient(160deg, rgba(255,255,0,.12), rgba(255,255,0,.02) 65%); border: 1.5px solid var(--yellow); border-radius: var(--radius); padding: 1.5rem 1.4rem; margin: 1.5rem 0; box-shadow: 0 0 40px -12px rgba(255,255,0,.35); } .award-hero .award-rank { font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.3rem); color: var(--yellow); line-height: 1.05; margin-bottom: .5rem; } .award-hero p { color: var(--text); } .award-hero p + p { margin-top: .6rem; } /* ------------------------------------------------------------ story page -- */ /* story strip — the current site's illustrated story graphics */ .story-strip { max-width: 1000px; margin: 0 auto; padding-bottom: .5rem; } .story-strip img { width: 100%; display: block; } .story-d { display: none; } .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; } /* keyboard users: hidden until focused, then drops in under the top-left. Hidden via transform (not off-screen left) so it can never contribute to layout-viewport width. */ .skip-link { position: fixed; left: 0; top: 0; z-index: 200; transform: translateY(-150%); background: var(--yellow); color: #000; font-weight: 700; font-size: .95rem; padding: .65rem 1.1rem; border-radius: 0 0 12px 0; transition: transform .15s ease; } .skip-link:focus { transform: translateY(0); } /* ------------------------------------------------------------- reveal -- */ .rv { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; } .rv.in { opacity: 1; transform: none; } .no-anim .rv { opacity: 1; transform: none; transition: none; } /* ============================================================= desktop == */ @media (min-width: 640px), (min-aspect-ratio: 1/1) and (min-width: 560px) { .cat-grid { grid-template-columns: 1fr 1fr; } .item-grid { grid-template-columns: 1fr 1fr; } .loc-grid { grid-template-columns: 1fr 1fr; } .ft-cols { grid-template-columns: 1.4fr 1fr 1fr; } } /* Desktop layout kicks in at >=900px OR whenever the viewport is landscape (wider than tall) — so tilting a phone sideways gives the desktop version. The 560px floor keeps tiny squarish windows on the mobile layout, which handles any width; below that the desktop top nav can't fit. */ @media (min-width: 900px), (min-aspect-ratio: 1/1) and (min-width: 560px) { :root { --topbar-h: 68px; } body { padding-bottom: 0; } .bottomnav, .sheet { display: none; } .tb-order-mobile { display: none; } .tb-nav { display: flex; align-items: center; gap: 1.4rem; } .tb-nav a.tlink { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text); transition: color .15s ease, text-shadow .15s ease; } .tb-nav a.tlink:hover, .tb-nav a.tlink[aria-current="page"] { color: var(--yellow); text-shadow: 0 0 14px rgba(255,255,0,.55); } .tb-nav .btn { font-size: .95rem; padding: .5rem 1.1rem .4rem; } .hero { flex-direction: row; align-items: center; gap: 2rem; padding-top: 3.4rem; padding-bottom: 3.6rem; } .hero-copy { flex: 1 1 52%; } .hero-img { flex: 1 1 48%; width: auto; max-width: 520px; } .hero-ctas .btn { flex: none; font-size: 1.25rem; letter-spacing: .09em; padding: .9rem 2rem .72rem; } .hero-award { display: inline-flex; } /* buttons are content-width on desktop, so the pill is too */ .cat-grid { grid-template-columns: repeat(4, 1fr); } .cat-card { flex-direction: column; align-items: stretch; text-align: left; padding: 1.3rem 1.2rem .6rem; min-height: 0; } /* flex: none cancels the mobile flex-basis (42%), which otherwise overrides the fixed height in column layout and let the image box size to its content — so titles started at different Y positions. Fixed box + capped image = every title on the same line. */ .cat-img { order: -1; flex: none; height: 150px; align-items: center; margin-bottom: .4rem; } .cat-img img { max-width: 165px; max-height: 130px; } .cat-copy { padding-bottom: .8rem; } .item-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem; } .item-img img { width: 132px; height: 116px; } .item-img img.round { width: 116px; height: 116px; } .item-card { grid-template-columns: 1fr 132px; } .shake-grid { grid-template-columns: repeat(4, 1fr); } .menu-sec { scroll-margin-top: calc(var(--topbar-h) + 70px); } .story-d { display: block; } .story-m { display: none; } .sec { padding-top: 3.6rem; } } @media (min-width: 1160px) { .cat-img { height: 170px; } .cat-img img { max-height: 150px; } } /* Compact desktop nav for landscape phones / small landscape windows, where the full brand wordmark + 7 links + Order button won't fit on one row. */ @media (max-width: 899px) and (min-width: 560px) and (min-aspect-ratio: 1/1) { .tb-brand img.wordmark { display: none; } .tb-nav { gap: clamp(.45rem, 1.5vw, 1rem); } .tb-nav a.tlink { font-size: .92rem; letter-spacing: .03em; } .tb-nav .btn { font-size: .88rem; padding: .45rem .8rem .35rem; } }