/* ========================================================================== Halal Food Pass — shared design system (v2, "ticket" redesign) Factored from web/preview/home.html — the canonical design reference. Every public page imports this ONE file. Brand constants are LOCKED. Themes: dark (default) + light via [data-theme] on ; key: hfp-theme. ========================================================================== */ /* ── self-hosted fonts (owner 2026-07-20, cold-connection tier) ─────────── Was Google Fonts (2 extra origins on the critical path). Same families, same weights, latin subset, served same-origin (~94 KB total, cached like any asset). font-display: swap — text paints instantly in the fallback, never invisible. Files: web/assets/fonts/ (from @fontsource, OFL licence). */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-500-normal.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} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-600-normal.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} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-700-normal.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-400-normal.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-500-normal.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-600-normal.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-700-normal.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} /* ── brand constants (never change) ────────────────────────────────────── */ :root{ --ink:#0e1712;--ink-soft:#17231c;--ink-2:#2d382e; --lime:#8fd94a;--lime-600:#6fbf2e;--lime-700:#5aa62a;--lime-050:#eef7df; --cream:#f4f1e7;--cream-100:#eee6d4;--cream-200:#e5ddcb; --amber:#ffb020;--coral:#ff5f57;--green-700:#1a7d4f;--green-600:#3f7a1e; --surface:#fff;--surface-sunken:#faf8f1;--text-muted:#556158; --fd:'Space Grotesk','Poppins',ui-sans-serif,system-ui,sans-serif; --fb:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif; --fm:ui-monospace,'SFMono-Regular',Menlo,monospace; --r-xl:26px;--r-lg:20px;--r-md:14px;--r-pill:999px; --shadow-lg:0 18px 60px rgba(14,23,18,.35);--focus:0 0 0 3px rgba(143,217,74,.6); } /* ── theme tokens (flip on data-theme) ─────────────────────────────────── */ :root,[data-theme="dark"]{ --page:var(--ink);--panel:var(--ink-soft); --fg:var(--cream);--fg-muted:#b9c1b8;--fg-faint:#8a948b; --border:rgba(244,241,231,.12);--top-bg:rgba(14,23,18,.82); --hero-glow:rgba(143,217,74,.16);--hero-glow2:rgba(143,217,74,.07); --accent-ink:var(--lime);--accent-stroke:var(--lime); --field:var(--ink-soft); --media:linear-gradient(160deg,rgba(143,217,74,.24),rgba(143,217,74,.05) 55%),var(--ink-2); --media-word:rgba(143,217,74,.5); } [data-theme="light"]{ --page:var(--cream);--panel:var(--surface); --fg:var(--ink);--fg-muted:var(--text-muted);--fg-faint:#5f6b61; --border:rgba(14,23,18,.11);--top-bg:rgba(244,241,231,.85); --hero-glow:rgba(143,217,74,.30);--hero-glow2:rgba(143,217,74,.13); --accent-ink:var(--green-700);--accent-stroke:var(--lime-700); --field:var(--surface-sunken); --media:linear-gradient(160deg,rgba(143,217,74,.32),rgba(143,217,74,.08) 55%),var(--cream-100); --media-word:rgba(63,122,30,.42); } /* ── base ──────────────────────────────────────────────────────────────── */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--fb);background:var(--page);color:var(--fg);font-size:16px;line-height:1.55;overflow-x:hidden;transition:background .25s ease,color .25s ease} /* Light theme, ENTIRE public site (owner 2026-07-15): cream → WHITE at every screen size. One token override flips every cream surface (pages, sections, sheets, header bar, footer, chips, inputs) while the ink manifesto/Lime Card sections and the lime ticker keep their deliberate colours. Dark theme is untouched. */ [data-theme="light"] body{ --page:#fff;--panel:#fff;--field:#fff;--top-bg:rgba(255,255,255,.88); background:#fff; } h1,h2,h3{font-family:var(--fd);line-height:1.02;letter-spacing:-.03em;margin:0;font-weight:700} a{color:inherit}img{max-width:100%;display:block} .wrap{max-width:1140px;margin-inline:auto;padding-inline:20px} .wrap-narrow{max-width:760px;margin-inline:auto;padding-inline:20px} :focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px} .kicker{font-family:var(--fm);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--fd);font-weight:600;font-size:1.02rem;border-radius:var(--r-pill);padding:1rem 1.5rem;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,box-shadow .15s,border-color .15s,color .15s} .btn:active{transform:scale(.98)} .btn-lime{background:var(--lime);color:var(--ink);box-shadow:0 8px 30px rgba(143,217,74,.35)} .btn-lime:hover{background:var(--lime-600)} .btn-outline{background:transparent;color:var(--fg);border-color:var(--border)} .btn-outline:hover{border-color:var(--accent-ink);color:var(--accent-ink)} .btn-ink{background:var(--ink);color:var(--cream)} .btn-ink:hover{background:var(--ink-soft)} .btn-sm{padding:.6rem 1.05rem;font-size:.92rem} .btn-block{width:100%} .btn[disabled],.btn.is-disabled{opacity:.55;cursor:not-allowed;box-shadow:none} .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} @media(max-width:479px){.hide-xs{display:none}} .skip:focus{left:10px;top:10px;width:auto;height:auto;margin:0;clip:auto;overflow:visible;z-index:100;background:var(--lime);color:var(--ink);padding:.6rem 1rem;border-radius:10px;position:fixed} .muted{color:var(--fg-muted)} .mono{font-family:var(--fm)} /* ── top bar ───────────────────────────────────────────────────────────── */ .top{position:sticky;top:0;z-index:60;background:var(--top-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)} .top .wrap{display:flex;align-items:center;justify-content:space-between;height:58px} /* Header middle slot holds the mobile distance control (Logo | distance | Menu). Hidden on desktop, where the distance pill lives in the hero instead. */ .hdr-mid{display:none;min-width:0;justify-content:center} .brand{display:inline-flex;align-items:center;text-decoration:none;border-radius:11px} .brand .mk{width:38px;height:38px;border-radius:11px;background:var(--lime);color:var(--ink);display:grid;place-items:center} .brand .mk svg{width:23px;height:23px} .topnav{display:flex;align-items:center;gap:.35rem} .toplink{font-weight:600;font-size:.92rem;text-decoration:none;color:var(--fg-muted);padding:.5rem .75rem;border-radius:var(--r-pill);background:none;border:0;cursor:pointer;font-family:var(--fb);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center} @media(max-width:430px){.toplink{padding:.5rem .55rem;font-size:.88rem}} .toplink:hover{color:var(--accent-ink)} .toplink.solid{background:var(--lime);color:var(--ink);font-family:var(--fd)} .toplink.solid:hover{background:var(--lime-600);color:var(--ink)} .toplink[aria-current="page"]{color:var(--fg)} /* ── responsive nav: section links collapse into a menu under 840px ─────── */ /* (Audit W1: the old nav only collapsed under 480px, so every page scrolled horizontally — up to +290px — across the whole 480–795px range.) */ .nav-burger{display:none;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border);background:transparent;border-radius:var(--r-pill);cursor:pointer;color:var(--fg);flex:0 0 auto} .nav-burger:hover{color:var(--accent-ink);border-color:var(--accent-ink)} .nav-burger svg{width:20px;height:20px} .nav-burger[aria-expanded="true"] svg{opacity:.55} .mobile-nav{display:none} @media(max-width:839px){ .toplink.hide-md{display:none} .nav-burger{display:grid} .mobile-nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--page);border-bottom:1px solid var(--border);padding:.4rem 12px .8rem;box-shadow:0 18px 40px rgba(14,23,18,.18)} .mobile-nav a{padding:.8rem .65rem;font-weight:600;font-size:1rem;text-decoration:none;color:var(--fg);border-radius:12px} .mobile-nav a:hover{color:var(--accent-ink);background:rgba(143,217,74,.08)} .mobile-nav a[aria-current="page"]{color:var(--accent-ink)} } .theme-toggle{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--border);background:transparent;border-radius:var(--r-pill);cursor:pointer;color:var(--fg)} .theme-toggle:hover{color:var(--accent-ink);border-color:var(--accent-ink)} .theme-toggle svg{width:19px;height:19px} [data-theme="dark"] .ic-sun{display:block}[data-theme="dark"] .ic-moon{display:none} [data-theme="light"] .ic-sun{display:none}[data-theme="light"] .ic-moon{display:block} /* Phones (approved design): the logo is hidden and the header becomes a 2-column grid — [Any distance ▼] on the LEFT, [Menu] on the RIGHT. The distance column may shrink to 0 so it never collides with the menu. Sign in / Join collapse into the burger menu; the theme toggle already hides ≤839px. */ @media(max-width:559px){ /* Homepage only: logo hides and the distance selector takes the left slot. */ .top-home .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px} .top-home .brand{display:none} .top-home .hdr-mid{display:flex;justify-content:flex-start;justify-self:start;min-width:0} .top-home .hdr-mid .hdr-loc{max-width:250px;min-height:48px} .topnav .toplink{display:none} } /* ── live ticker ───────────────────────────────────────────────────────── */ .ticker{background:var(--lime);color:var(--ink);overflow:hidden;border-bottom:1px solid rgba(14,23,18,.15)} /* --tick-mult scales the duration with the number of repeated sets the server renders (short streams repeat more so the loop never runs dry on wide screens) — the visible SPEED stays at the owner-tuned 12.5s-per-set. */ .ticker-inner{display:flex;width:max-content;animation:tick calc(12.5s * var(--tick-mult,1)) linear infinite;will-change:transform}/* desktop: 8s → 10s → 12.5s (owner 2026-07-15, two 20% slowdowns); phones: 10.92s/set below (owner 2026-07-16 30%+20% slower; owner 2026-07-27 a further 25% slower) */ .ticker-set{display:flex;align-items:center;gap:2.2rem;padding:.5rem 1.1rem;font-family:var(--fd);font-weight:600;font-size:.85rem;white-space:nowrap} .ticker-set .dotb{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:pulse 1.6s ease-in-out infinite} @keyframes tick{to{transform:translateX(-50%)}} @keyframes pulse{50%{opacity:.35}} @media (prefers-reduced-motion:reduce){.ticker-inner{animation:none}.ticker-set .dotb{animation:none}} /* Static ticker (ZERO live deals — owner 2026-07-16: with any live deal the marquee loops instead): ONE centred line, never wrapped or stacked. */ .ticker--static .ticker-inner{animation:none;width:100%;justify-content:center} .ticker--static .ticker-set{white-space:nowrap;flex-wrap:nowrap;justify-content:center;overflow:hidden;gap:.9rem;padding:.5rem 16px;max-width:100%} @media(max-width:559px){.ticker--static .ticker-set{font-size:.7rem;gap:.6rem}} /* ── hero (home) ───────────────────────────────────────────────────────── */ .hero{padding:2.6rem 0 2rem;background:radial-gradient(900px 480px at 85% -10%,var(--hero-glow),transparent 60%),radial-gradient(700px 420px at -15% 30%,var(--hero-glow2),transparent 55%),var(--page)} /* Light theme: the home hero sits on plain white (no green glow tint). */ [data-theme="light"] .hero{background:#fff} .hero h1{margin-top:.9rem;font-size:clamp(2.7rem,1.6rem + 6vw,5.6rem);max-width:12ch;color:var(--fg)} /* Phones: larger hero headline; wrapping allowed (no clipping) so it never overflows on narrow screens. */ @media(max-width:559px){.hero{padding-top:1.2rem}.hero h1{max-width:none;font-size:clamp(36px,10.5vw,42px);line-height:1.05;margin-top:.3rem}} .hero h1 .out{color:transparent;-webkit-text-stroke:2px var(--accent-stroke)} .hero h1 .lime{color:var(--accent-ink)} .hero p.sub{margin:1.1rem 0 0;font-size:1.15rem;color:var(--fg-muted);max-width:42ch} .hero p.sub b{color:var(--fg)} /* Hero grid + real-card stack (owner 2026-07-15): ONE full-size tilted card, always — two cards crushed the layout (truncated names, wrapped labels). The second ranked card stays in the DOM but peeks out rotated BEHIND the first as a decorative hint of depth, never competing for width. */ .hero-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:center} .hero-stack{display:none} @media(min-width:960px){ .hero-grid{grid-template-columns:1.1fr .9fr} .hero-stack{display:grid;grid-template-columns:minmax(0,340px);justify-content:center;align-items:start;position:relative;isolation:isolate}/* isolate: the peeking card's z-index:-1 stays inside the stack, never behind the hero */ .hero-stack .ticket{box-shadow:0 18px 44px rgba(14,23,18,.16);transform:rotate(-3deg) translateX(-24px);grid-area:1/1} .hero-stack .ticket:nth-child(2){transform:rotate(7deg) translateX(96px) translateY(-14px);z-index:-1;filter:brightness(.97)} .hero-stack{padding-right:70px}/* room for the fanned-out back card */ /* back card keeps its real stub — name, %, status show in the exposed band (owner 2026-07-15); it was a blank white slab when hidden */ } /* CTA hierarchy under the hero search (owner mock 2026-07-15): outline "Start free month" + soft-lime nudge chip "Browse what's live near me →". Hidden ≤559px — the approved mobile design leads with the deals sheet and keeps membership CTAs in the sticky bar / Lime Card section. */ .hero-actions{margin-top:1rem} .hero-price-note{color:var(--fg-muted);margin:.45rem 0 0} /* Phones (owner 2026-07-15): keep ONLY the soft Browse chip from the CTA row — the outline "Start free month" pill and the desktop price note are hidden (the mobile link line below carries join + price). .hero over-qualified so the later .hero-cta{display:flex} base rule can never resurrect them. */ @media(max-width:559px){ .hero .hero-price-note{display:none} .hero .hero-actions .btn-outline{display:none} } /* Mobile hero note (phones only): Start-free-month link + price line. */ .hero-mcta{display:none} .mlink{color:var(--accent-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px} @media(max-width:559px){ .hero-mcta{display:block;margin-top:.2rem} .hero-mnote{margin:.6rem 0 0;color:var(--fg-muted)} /* headline wraps naturally on phones (mock 7a) — no forced two-line break */ .hero-br{display:none} .hero .hero-promo-card .hl{white-space:normal} } /* Mobile filter chips in the deals sheet (owner mock 2026-07-15) */ .mfilters{display:none} @media(max-width:559px){ .mfilters{display:flex;gap:.5rem;overflow-x:auto;padding-top:1.1rem;padding-bottom:.2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch} .mfilters::-webkit-scrollbar{display:none} .mchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;background:var(--page);border:1px solid var(--border);border-radius:999px;padding:.5rem .85rem;font:inherit;font-size:.88rem;font-weight:600;color:var(--fg);min-height:44px;cursor:pointer} .mchip[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink)} .mchip-loc svg{color:var(--fg-muted);flex:0 0 auto} .mchip-loc select{border:0;background:transparent;font:inherit;font-weight:700;color:var(--fg);outline:none;appearance:none;-webkit-appearance:none;padding-right:1rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f4f1e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:10px 7px} [data-theme="light"] .mchip-loc select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230e1712' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .mchip-loc select option{color:var(--ink)} } /* Compact 264px cards on phone rails (owner mock 2026-07-15): shorter photo, tags hidden (the chips filter instead), % + arrow on one bottom row. */ @media(max-width:559px){ /* .rail.hscroll (double class) — must OUTRANK the later .hscroll base rule (grid-auto-columns:min(340px,82vw)), which beat a plain .rail at equal specificity and kept phone tiles at ~330px (owner report 2026-07-15) */ .rail.hscroll,.rail{grid-auto-columns:264px} .rail .ticket .t-media{aspect-ratio:16/10} .rail .ticket .tags{display:none} .rail .ticket .stub{display:grid;grid-template-columns:1fr auto;grid-template-areas:"info info" "pct go";align-items:center;gap:.3rem .6rem;padding:.85rem 1rem 1rem} .rail .ticket .stub .info{grid-area:info} .rail .ticket .stub .pct{grid-area:pct;display:flex;align-items:baseline;gap:.25rem;font-size:1.25rem;max-width:none} .rail .ticket .stub .pct small{display:inline;margin-top:0;font-size:.66rem} .rail .ticket .t-go{grid-area:go;width:38px;height:38px} } /* Mobile-only location-status line (fills in from home-live updateGeoNote — the hero copy of this note is display:none on phones with the hero search) */ .hdr-geo{display:none} @media(max-width:559px){.hdr-geo:not([hidden]){display:block;padding-top:.6rem}} /* Server homepage hero (owner 2026-07-14): headline + sub each on ONE line on tablet/desktop; the
only applies on phones. Each sentence is a no-wrap span so any forced wrap breaks between sentences. */ .hero-promo-card .hl{white-space:nowrap} @media(min-width:560px){ .hero-promo-card .hero-br{display:none} .hero h1.hero-promo-card{max-width:none} .hero p.sub.home-sub{max-width:none} } .searchbar{margin-top:1.5rem;display:flex;gap:.55rem;flex-wrap:wrap;max-width:640px} .pillfield{flex:1 1 100%;display:flex;align-items:center;gap:.65rem;background:var(--field);border:1px solid var(--border);border-radius:var(--r-pill);padding:.95rem 1.15rem;min-width:0} .pillfield:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px rgba(143,217,74,.18)} .pillfield svg{flex:0 0 auto;color:var(--fg-muted)} .pillfield input,.pillfield select{border:0;background:transparent;color:var(--fg);font:inherit;width:100%;outline:none} .pillfield select option{color:var(--ink)} /* Distance control is responsive: on PHONES it lives in the header's middle slot (.hdr-mid) and the in-hero pill (.loc-inline) is hidden; on desktop the header slot is hidden and the in-hero pill shows in front of the search bar. */ @media(max-width:559px){.searchbar .pillfield.loc-inline{display:none}} .loc-note{color:var(--fg-muted);min-width:0} .geo-note{margin:.7rem 0 0} /* Combined hero search bar (owner mock 2026-07-15): one white pill with two labelled segments — NEAR (distance select) · divider · CRAVING (query) — and a lime "Search deals" button on the right. The mobile header pill and sticky search keep their lime treatment; this bar is ≥560px only. */ .hero-search{margin-top:1.5rem;max-width:660px;display:block} .search-combo{display:flex;align-items:center;gap:1.1rem;background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:.45rem .45rem .45rem 1.5rem;box-shadow:0 12px 34px rgba(14,23,18,.09)} .search-combo:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px rgba(143,217,74,.18),0 12px 34px rgba(14,23,18,.09)} .sc-seg{display:flex;flex-direction:column;gap:.1rem;min-width:0;padding:.25rem 0} .sc-near{flex:0 0 auto} .sc-crave{flex:1;min-width:0} .sc-label{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)} /* neat select: strip the native rectangle/stepper, add our own chevron */ .sc-near select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:0;background:transparent;color:var(--fg);font:inherit;font-weight:700;outline:none;cursor:pointer;padding:0 1.15rem 0 0;max-width:11rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f4f1e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:11px 7px} [data-theme="light"] .sc-near select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230e1712' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .sc-near select::-ms-expand{display:none} .sc-near select option{color:var(--ink)} .sc-crave input{border:0;background:transparent;color:var(--fg);font:inherit;width:100%;outline:none;padding:0} .sc-crave input::placeholder{color:var(--fg-faint)} .sc-div{width:1px;align-self:stretch;background:var(--border);flex:0 0 auto} .sc-btn{flex:0 0 auto;gap:.5rem;padding:.85rem 1.4rem} /* Nudge chip (owner mock 2026-07-15): soft lime chip; the arrow gently bounces toward it. Reduced motion switches the bounce off. */ .btn-nudge{background:var(--lime-050);color:var(--accent-ink);border:1.5px solid transparent;font-weight:700} .btn-nudge:hover{background:#e2f2cc} [data-theme="dark"] .btn-nudge{background:rgba(143,217,74,.16)} [data-theme="dark"] .btn-nudge:hover{background:rgba(143,217,74,.24)} .nudge-arrow{display:inline-block;animation:hfp-nudge 1.8s ease-in-out infinite} @keyframes hfp-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}} @media(prefers-reduced-motion:reduce){.nudge-arrow{animation:none}} .hdr-loc{display:inline-flex;align-items:center;gap:.4rem;background:var(--lime);border:1px solid var(--lime);border-radius:var(--r-pill);padding:.4rem .7rem;min-height:44px;flex:0 0 auto} .hdr-loc svg{flex:0 0 auto;color:var(--ink)} .hdr-loc select{border:0;background:transparent;color:var(--ink);font:inherit;font-size:.92rem;font-weight:700;outline:none;cursor:pointer} .hdr-loc select option{color:var(--ink)} .hdr-loc:focus-within{border-color:var(--lime-700);box-shadow:0 0 0 3px rgba(143,217,74,.35)} .hero-cta{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap} @media(min-width:560px){.searchbar .pillfield.city{flex:0 0 205px}.searchbar .pillfield.q{flex:1}} /* ── approved mobile homepage: promo card + rounded deals panel + float search ─ These treatments are MOBILE-only (≤559px). On tablet/desktop the hero headline, search bar and sections keep their existing appearance. */ .hero-promo{position:relative} .live-deals-panel{background:transparent} @media(max-width:559px){ .hero{padding-top:1.1rem;padding-bottom:0} .hero-promo{padding:0} /* Option 1 — clean typographic hero (no card): big ink headline, lime-outlined "out", green "less". Sized up for mobile impact; wraps to two lines. */ .hero .hero-promo-card{ margin:.15rem 0 0;max-width:none; font-size:clamp(40px,13vw,60px); line-height:.92;font-weight:700;letter-spacing:-.045em; color:var(--fg); } .hero .hero-promo-card .out{color:transparent;-webkit-text-stroke:2.5px var(--lime)} .hero .hero-promo-card .lime{color:var(--accent-ink)} .hero .hero-promo-card::before,.hero .hero-promo-card::after{display:none} .hero p.sub{margin-top:1.05rem} /* rounded off-white "sheet" that holds the first deals section + the search */ .live-deals-panel{ position:relative; background:var(--panel); border-radius:34px 34px 0 0; margin-top:1.4rem; padding:4px 0 8px; /* was 22px — closed the blank band under the card rail */ box-shadow:0 -8px 26px rgba(14,23,18,.06); } .live-deals-panel .feed{background:transparent;padding-top:1.1rem;padding-bottom:.4rem} /* phones: the hero search is hidden — the bottom sticky bar IS the search */ .hero-search{display:none} } /* readable fallback where -webkit-text-stroke is unsupported: solid fill */ @supports not ((-webkit-text-stroke:2px #fff) or (text-stroke:2px #fff)){ .hero h1 .out{color:var(--accent-ink);-webkit-text-stroke:0} .hero .hero-promo-card .out{color:var(--accent-ink);-webkit-text-stroke:0} } /* ── page hero (inner pages) ───────────────────────────────────────────── */ .phero{padding:2.4rem 0 1.6rem;background:radial-gradient(760px 380px at 88% -12%,var(--hero-glow),transparent 60%),var(--page)} /* City + cuisine (dish) pages: a soft lime wash across the WHOLE page — same brand glow as the homepage hero, extended behind the listing grid so the page reads warm rather than flat (owner 2026-07-18). Uses the existing --hero-glow tokens (theme-aware, light + dark); fixed so it stays under the grid as you scroll. The hero's own glow goes transparent to avoid stacking. Reversible: delete these two rules + the `page-collection` body class. */ body.page-collection{background: radial-gradient(920px 500px at 86% -8%,var(--hero-glow),transparent 60%), radial-gradient(780px 560px at -12% 38%,var(--hero-glow2),transparent 55%), var(--page);background-attachment:fixed} body.page-collection .phero{background:transparent} /* Explore-deals hero: plain white in light theme (owner 2026-07-15) — no green glow */ [data-theme="light"] .phero-board{background:#fff} .phero h1{font-size:clamp(2rem,1.3rem + 3.4vw,3.4rem);margin-top:.7rem;color:var(--fg);max-width:20ch} .phero h1 .lime{color:var(--accent-ink)} .phero h1 .out{color:transparent;-webkit-text-stroke:2px var(--accent-stroke)} .phero p.sub{margin:1rem 0 0;font-size:1.08rem;color:var(--fg-muted);max-width:52ch} .phero .statline{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.1rem;font-size:.92rem;color:var(--fg-muted)} .phero .statline b{font-family:var(--fd);color:var(--fg)} /* ── breadcrumbs ───────────────────────────────────────────────────────── */ /* padding-top only — the shorthand used to zero out .wrap's side padding, pinning breadcrumbs to the screen edge (audit W2) */ .crumbs{font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);padding-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center} .crumbs a{color:var(--fg-muted);text-decoration:none} .crumbs a:hover{color:var(--accent-ink)} .crumbs .sep{opacity:.6} .crumbs [aria-current="page"]{color:var(--fg)} /* ── feed / ticket cards ───────────────────────────────────────────────── */ section.feed{background:var(--page);padding:1.4rem 0 2.6rem} /* Homepage rails sit tight (owner 2026-07-15, tuned 4×): Save 20% → 15% → 10% read as one flowing board. 4rem → 2rem → 1.4rem → 1.1rem → .75rem. */ section.feed[data-home-sec]{padding:.35rem 0 .4rem} .feed-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem} .feed-head h2{font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem);color:var(--fg);display:flex;align-items:center;gap:.7rem} .feed-head h2 i{width:11px;height:11px;border-radius:50%;background:var(--lime);animation:pulse 1.6s infinite;flex:0 0 auto} .feed-head .clock{font-family:var(--fm);color:var(--fg-muted);font-size:.82rem;letter-spacing:.08em} .rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,84vw);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .rail::-webkit-scrollbar{display:none} @media(min-width:980px){.rail{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible}} .ticket{scroll-snap-align:start;position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--fg);display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease} .ticket:hover{transform:translateY(-5px);border-color:rgba(143,217,74,.5)}/* no rotate: sub-degree rotation resamples the photo and reads as blur (owner 2026-07-15) */ @media (prefers-reduced-motion:reduce){.ticket:hover{transform:none}} .t-media{aspect-ratio:3/2;position:relative;overflow:hidden;background:var(--media)} /* Directory-only cards — "not accepting the Lime Card" (owner 2026-07-17): WHITE media tile in both themes, so the lime tile stays reserved for restaurants ON the card. Word outline switches to the green that reads on white; a hairline inset keeps the tile's edge on white page backgrounds. (A photo, once an owner claims the page and adds one, simply covers this.) */ .ticket.t-npart .t-media{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)} .ticket.t-npart .t-media .word{-webkit-text-stroke:1.5px rgba(63,122,30,.38)} .t-media img{width:100%;height:100%;object-fit:cover} .t-media .word{position:absolute;inset:auto -6% 6% -6%;font-family:var(--fd);font-weight:700;font-size:3.2rem;letter-spacing:.02em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--media-word);white-space:nowrap;transform:rotate(-4deg);pointer-events:none} .t-media .feat{position:absolute;top:12px;right:12px;background:var(--lime);color:var(--ink);font-family:var(--fd);font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .55rem;border-radius:var(--r-pill)} .perf{position:relative;height:0;border-top:2px dashed var(--border);margin:0 14px} .perf::before,.perf::after{content:"";position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--page)} .perf::before{left:-25px}.perf::after{right:-25px} .stub{display:flex;gap:1rem;align-items:center;padding:1rem 1.1rem 1.15rem} /* Owner 2026-07-20: the % block TOP-ALIGNS with the card title, not centred — cards carry different tag counts, so centring floated 5%/10%/15% to different heights across a row. Top edge = one straight line everywhere. */ .stub .pct{font-family:var(--fd);font-weight:700;font-size:2.5rem;letter-spacing:-.04em;color:var(--accent-ink);line-height:.9;flex:0 0 auto;max-width:7.5rem;align-self:flex-start;margin-top:.15rem} .stub .pct.words{font-size:1.5rem;letter-spacing:-.02em} .stub .pct small{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-top:.3rem;font-family:var(--fm);font-weight:500} .stub .pct.words small{letter-spacing:.08em} .stub .info{min-width:0} .stub h3{font-size:1.12rem;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stub .meta{color:var(--fg-muted);font-size:.84rem;margin:.15rem 0 .4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stat{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.84rem} .stat i{width:8px;height:8px;border-radius:50%;flex:0 0 8px}/* flex:0 0 — never squished into an oval when the label wraps */ .st-live{color:var(--accent-ink)} .st-live i{background:var(--lime);animation:pulse 1.6s infinite} .st-soon{color:var(--amber)} [data-theme="light"] .st-soon{color:#9a6a00} .st-soon i{background:var(--amber)} .st-off{color:var(--fg-faint)} .st-off i{background:var(--fg-faint)} .st-sched{color:var(--fg-muted)} .st-sched i{background:var(--fg-faint)} /* Owner 2026-07-18: ticking "Starts in …" countdowns render GREEN everywhere — an upcoming deal is a positive state, not a dormant grey/amber one. Solid dot on purpose: the PULSING lime dot stays reserved for live-right-now. */ .st-count{color:var(--accent-ink)} .st-count i{background:var(--lime)} .tags{display:flex;gap:.35rem;margin-top:.45rem;flex-wrap:wrap} .tag{font-size:.7rem;font-weight:600;color:var(--fg-muted);border:1px solid var(--border);padding:.22rem .5rem;border-radius:var(--r-pill)} a.tag{text-decoration:none;transition:color .15s,border-color .15s} a.tag:hover{color:var(--accent-ink);border-color:var(--accent-ink)} /* Semantic pill tiers (owner 2026-07-18): colour encodes MEANING, learnable in one visit — never one colour per pill. Words always carry the meaning; the colour reinforces it (§19, colour-blind safe). AA contrast in both themes. Tier 1 · DISCLOSURE (deep amber, bold) → "Partially halal menu" only. Tier 2 · RESTRICTION (soft warm sand) → anything that limits the deal: Selected dishes only · Some menu items excluded · Takeout only · Dine-in only · Min spend. Tier 3 · NEUTRAL (existing outline) → plain facts: cuisines, the ordinary Dine-in + Takeout pair on a both-channel offer. */ .tag.tag-cond,.tag.tag-min{background:#f6edd8;color:#6d5524;border:1px solid #e3d3a8;opacity:1} [data-theme="dark"] .tag.tag-cond,[data-theme="dark"] .tag.tag-min{background:#37301c;color:#e8d49a;border-color:#57492a} .tag.tag-halal{background:#ffe3a1;color:#5d4300;border:1px solid #dcb35e;font-weight:700} [data-theme="dark"] .tag.tag-halal{background:#4a3a12;color:#ffd977;border-color:#77621f} .t-go{margin-left:auto;flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;transition:transform .18s} .ticket:hover .t-go{transform:rotate(-35deg)} .emptyfeed{border:1.5px dashed var(--border);border-radius:var(--r-lg);padding:1.6rem;color:var(--fg-muted);text-align:center} /* ── tier explorer / filters ───────────────────────────────────────────── */ section.tiers{background:var(--page);padding:2.4rem 0 2.6rem} .tiers h2{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.6rem);margin-top:.5rem;color:var(--fg)} .bignums{display:flex;gap:.6rem;margin:1.4rem 0 1.2rem;flex-wrap:wrap} .bignum{font-family:var(--fd);font-weight:700;font-size:clamp(2.4rem,1.8rem + 3.5vw,4.4rem);letter-spacing:-.05em;line-height:1;background:none;border:0;cursor:pointer;color:transparent;-webkit-text-stroke:2px var(--fg);padding:.2rem .35rem;border-radius:14px;transition:all .15s} .bignum small{font-size:.4em;-webkit-text-stroke:0;color:var(--fg-muted);font-family:var(--fm);letter-spacing:.06em;display:block;text-align:left;margin-top:.2rem} .bignum[aria-pressed="true"]{color:var(--fg);-webkit-text-stroke:0} .bignum[aria-pressed="true"] small{color:var(--accent-ink)} .bignum:hover{color:var(--accent-ink);-webkit-text-stroke:0} .subfilters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem} .fchip{font-family:var(--fd);font-weight:600;font-size:.88rem;padding:.55rem 1rem;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--panel);cursor:pointer;color:var(--fg)} .fchip[aria-pressed="true"]{background:var(--fg);color:var(--page);border-color:var(--fg)} .fchip svg{vertical-align:-2px;margin-right:5px} .lm .rt-star{vertical-align:-2px} .tiergrid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem} @media(min-width:640px){.tiergrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:980px){.tiergrid{grid-template-columns:repeat(3,minmax(0,1fr))}} .later{margin-top:2.2rem} .later h2{font-size:1.3rem;margin-bottom:.8rem;color:var(--fg)} .lrow{display:flex;align-items:center;gap:.7rem;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);padding:.8rem .9rem;text-decoration:none;color:var(--fg);margin-bottom:.6rem;transition:transform .15s;overflow:hidden} .lrow:hover{transform:translateX(4px)} @media (prefers-reduced-motion:reduce){.lrow:hover{transform:none}} .lrow .when{flex:0 1 auto;max-width:46%;overflow:hidden;text-overflow:ellipsis;font-family:var(--fm);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:#b98600;background:rgba(255,176,32,.14);border:1px solid rgba(255,176,32,.32);padding:.3rem .5rem;border-radius:var(--r-pill);white-space:nowrap} [data-theme="light"] .lrow .when{color:#9a6a00} .lrow .when.off{color:var(--fg-faint);background:transparent;border-color:var(--border)} /* A long offer label truncates instead of squeezing the restaurant name to nothing (audit W3 — long-content robustness) */ .lrow .off{flex:0 1 auto;max-width:38%;overflow:hidden;text-overflow:ellipsis;font-family:var(--fd);font-weight:700;color:var(--accent-ink);white-space:nowrap} .lrow b{font-family:var(--fd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:7ch;flex:1 1 auto} .lrow .lm{flex:1 1 auto;min-width:0;color:var(--fg-muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lrow .arr{flex:0 0 auto;margin-left:auto;color:var(--fg-faint)} @media(max-width:430px){.lrow .lm{display:none}} /* ── always-dark accent panels ─────────────────────────────────────────── */ section.manifesto{background:var(--ink);color:var(--cream);padding:4rem 0;border-radius:34px 34px 0 0} .manifesto .wrap{max-width:920px} .manifesto p.big{font-family:var(--fd);font-weight:700;letter-spacing:-.03em;line-height:1.08;font-size:clamp(1.9rem,1.2rem + 3.6vw,3.6rem);color:var(--cream);margin:0} .manifesto p.big .mark{color:var(--lime)} .manifesto p.big .strike{position:relative;color:#b9c1b8} .manifesto p.big .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.09em;background:var(--coral);transform:rotate(-2deg);border-radius:2px} .manifesto .small{color:#b9c1b8;margin-top:1.2rem;max-width:52ch;font-size:1.05rem} section.card-sec{background:var(--ink);color:var(--cream);padding:1rem 0 4rem} .card-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center} .card-grid>div{min-width:0} @media(min-width:880px){.card-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem}} .card-sec h2{color:var(--cream);font-size:clamp(1.7rem,1.2rem + 2.4vw,2.6rem);margin-top:.5rem} .card-sec .kicker{color:var(--lime)} .limecard{width:100%;aspect-ratio:1.585;max-width:460px;border-radius:22px;background:radial-gradient(120% 160% at 20% 0%,#b7ef7d 0%,var(--lime) 45%,var(--lime-600) 100%);color:var(--ink);padding:clamp(1rem,4vw,1.5rem);display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;transform:rotate(-3deg);transition:transform .3s ease} .limecard:hover{transform:rotate(0) scale(1.02)} .limecard::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 46%,transparent 60%);transform:translateX(-120%);animation:shine 5.5s ease-in-out infinite} @keyframes shine{12%{transform:translateX(120%)}100%{transform:translateX(120%)}} @media (prefers-reduced-motion:reduce){.limecard::before{animation:none}.limecard{transform:none}} .limecard::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.22);top:-105px;right:-85px;pointer-events:none} .payoff{margin-top:2.2rem;display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;background:var(--ink-soft);border:1px solid rgba(244,241,231,.14);border-left:4px solid var(--lime);border-radius:var(--r-md);padding:1.1rem 1.2rem} .payoff .po-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--lime);color:var(--ink);display:grid;place-items:center} .payoff .po-tx{flex:1 1 260px;min-width:0} .payoff .po-tx b{display:block;font-family:var(--fd);font-weight:700;font-size:1.08rem;color:var(--cream);letter-spacing:-.01em} .payoff .po-tx .hl{color:var(--lime)} .payoff .po-tx>span{display:block;color:#b9c1b8;font-size:.92rem;margin-top:.25rem} .payoff .po-cta{flex:0 0 auto} .lc-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--fd);font-weight:700;font-size:1.05rem} .lc-top .lcmk{width:30px;height:30px;border-radius:8px;background:var(--ink);color:var(--lime);display:grid;place-items:center} .lc-top .lcmk svg{width:17px;height:17px} .lc-mid .lbl{font-family:var(--fm);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75} .lc-mid .save{font-family:var(--fd);font-weight:700;font-size:clamp(1.15rem,3.4vw,1.6rem);letter-spacing:-.02em;margin-top:.15rem} .lc-bot{display:flex;justify-content:space-between;align-items:flex-end} .lc-no{font-family:var(--fm);letter-spacing:.16em;font-weight:600;font-size:.85rem} .lc-live{font-family:var(--fm);font-size:.8rem;display:flex;align-items:center;gap:.4rem} .lc-live i{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:pulse 1.6s infinite} .card-sec .steps{display:flex;gap:.6rem;margin-top:1.4rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:none} .card-sec .steps::-webkit-scrollbar{display:none} .step{flex:1 0 150px;background:var(--ink-soft);border:1px solid rgba(244,241,231,.12);border-radius:var(--r-md);padding:.9rem 1rem} .step b{font-family:var(--fd);color:var(--lime);display:block;margin-bottom:.2rem} .step span{color:#b9c1b8;font-size:.9rem} /* Savings receipt (owner 2026-07-15): white receipt on the ink section — the concrete proof next to the product. Fixed brand colours (this section is always ink), so it reads identically in both themes. */ .receipt{background:#fff;color:#0e1712;border-radius:14px;padding:1.05rem 1.25rem;margin:1.3rem 0 .2rem;max-width:380px;box-shadow:0 14px 38px rgba(0,0,0,.28)} .rc-row{display:flex;justify-content:space-between;gap:1rem;font-weight:600;padding:.18rem 0;font-size:.95rem} .rc-save{color:#3f7a1e;font-weight:700} .rc-sep{border-top:2px dashed rgba(14,23,18,.18);margin:.5rem 0} .rc-total{font-family:var(--fd);font-weight:700;font-size:1.1rem} .rc-punch{margin:.7rem 0 0;font-size:.86rem;color:#556158;line-height:1.45} .rc-punch b{color:#3f7a1e;font-family:var(--fd);font-size:1rem} .pricebar{margin-top:1.4rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap} .pricebar .p{font-family:var(--fd);font-weight:700;font-size:1.5rem;color:var(--cream)} .pricebar .p small{font-size:.9rem;color:#b9c1b8;font-weight:500} .pricebar .note{color:#b9c1b8;font-size:.88rem} /* generic always-dark CTA panel (statement band on any page) */ section.cta-sec{background:var(--ink);color:var(--cream);padding:3.2rem 0;border-radius:34px 34px 0 0;margin-top:2.4rem} .cta-sec h2{color:var(--cream);font-size:clamp(1.7rem,1.2rem + 2.6vw,2.8rem);max-width:18ch} .cta-sec .kicker{color:var(--lime)} .cta-sec p{color:#b9c1b8;max-width:52ch} .cta-sec .hero-cta{margin-top:1.3rem} /* ── trust + partner ───────────────────────────────────────────────────── */ section.trust{background:var(--page);color:var(--fg);padding:3rem 0} .tgrid{display:grid;gap:1rem;grid-template-columns:1fr} @media(min-width:720px){.tgrid{grid-template-columns:1fr 1fr}} .tcard{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.4rem} .tcard h3{font-size:1.12rem;margin-bottom:.4rem;color:var(--fg)} .tcard p{color:var(--fg-muted);margin:0;font-size:.95rem} .partner{margin-top:1.6rem;background:var(--ink);color:var(--cream);border-radius:var(--r-lg);padding:1.6rem;display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap} .partner h3{font-size:1.35rem} .partner p{color:#b9c1b8;margin:.35rem 0 0;max-width:46ch} /* ── info cards / key-value rows (detail pages) ────────────────────────── */ .icard{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.3rem 1.4rem;margin-top:1rem} .icard h2{font-size:1.15rem;color:var(--fg)} .icard .note{color:var(--fg-faint);font-size:.82rem;margin:.25rem 0 0} .kv{margin-top:.8rem} .kv .row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-top:1px solid var(--border);font-size:.92rem} .kv .row:first-child{border-top:0} .kv .k{color:var(--fg-muted)} .kv .v{font-weight:600;text-align:right;color:var(--fg)} /* ── restaurant detail ─────────────────────────────────────────────────── */ .rd-hero{aspect-ratio:5/2;position:relative;overflow:hidden;background:var(--media);border-radius:var(--r-lg);margin-top:1.2rem} @media(max-width:560px){.rd-hero{aspect-ratio:3/2}} .rd-hero img{width:100%;height:100%;object-fit:cover} .rd-hero .word{position:absolute;inset:auto -4% 5% -4%;font-family:var(--fd);font-weight:700;font-size:clamp(2.6rem,8vw,4.6rem);letter-spacing:.02em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--media-word);white-space:nowrap;transform:rotate(-3deg);pointer-events:none} .rd-hero .feat{position:absolute;top:14px;right:14px;background:var(--lime);color:var(--ink);font-family:var(--fd);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .6rem;border-radius:var(--r-pill)} .rd-head{margin-top:1.3rem} .rd-head h1{font-size:clamp(2rem,1.4rem + 3vw,3.2rem);color:var(--fg)} .rd-head .meta{color:var(--fg-muted);margin-top:.35rem;font-size:1rem} .rd-head .stat{margin-top:.55rem;font-size:.92rem} /* Similar-restaurants rail (owner 2026-07-19): detail pages interlink 3–4 listings at the bottom. The 760px column caps at 2 tiles across. */ .rd-similar{margin-top:1.6rem} .rd-similar h2{font-size:1.15rem;margin:0 0 .9rem} @media(min-width:980px){.rd-similar .tiergrid{grid-template-columns:repeat(2,minmax(0,1fr))}} .offer-ticket{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);margin-top:1.4rem;overflow:hidden} .offer-ticket .stub{padding:1.25rem 1.3rem} .offer-ticket .stub .pct{font-size:3.1rem} .offer-ticket .stub .pct.words{font-size:1.8rem} .offer-ticket .terms{padding:0 1.3rem 1.15rem;color:var(--fg-muted);font-size:.88rem} .offer-ticket .cta{padding:0 1.3rem 1.3rem} .offer-ticket.is-off .pct{color:var(--fg-faint)} .rd-actions{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap} /* ── prose (content/legal/blog) ────────────────────────────────────────── */ .prose{max-width:70ch} .prose h1{font-size:clamp(1.9rem,1.3rem + 2.8vw,3rem);color:var(--fg)} .prose h2{font-size:1.45rem;margin-top:2.2rem;color:var(--fg)} .prose h3{font-size:1.12rem;margin-top:1.5rem;color:var(--fg)} .prose p{margin:.9rem 0 0;color:var(--fg-muted)} .prose p.lead{font-size:1.12rem;color:var(--fg)} .prose li{color:var(--fg-muted);margin-top:.45rem} .prose ul,.prose ol{padding-left:1.2rem;margin:.9rem 0 0} .prose a{color:var(--accent-ink);text-decoration-color:rgba(143,217,74,.5)} .prose strong,.prose b{color:var(--fg)} .prose hr{border:0;border-top:1px solid var(--border);margin:2rem 0} .prose .tablewrap{overflow-x:auto;margin-top:1rem;border:1px solid var(--border);border-radius:var(--r-md)} .prose table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:430px} .prose .tablewrap table{margin:0} .prose th{font-family:var(--fd);text-align:left;color:var(--fg);padding:.55rem .7rem;border-bottom:2px solid var(--border)} .prose td{padding:.55rem .7rem;border-bottom:1px solid var(--border);color:var(--fg-muted)} .prose .mini{font-size:.82rem;color:var(--fg-faint)} /* ── FAQ ───────────────────────────────────────────────────────────────── */ .faq{margin-top:1.4rem} .faq details{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:.6rem;overflow:hidden} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.15rem;font-family:var(--fd);font-weight:600;color:var(--fg)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--fd);font-size:1.3rem;color:var(--accent-ink);flex:0 0 auto;line-height:1} .faq details[open] summary::after{content:"–"} .faq details p{margin:0;padding:0 1.15rem 1.05rem;color:var(--fg-muted);font-size:.95rem} /* ── forms ─────────────────────────────────────────────────────────────── */ .field{margin-top:1rem} .field label{display:block;font-family:var(--fd);font-weight:600;font-size:.88rem;margin-bottom:.35rem;color:var(--fg)} .input,.textarea,select.input{width:100%;background:var(--field);border:1px solid var(--border);border-radius:var(--r-md);color:var(--fg);font:inherit;padding:.8rem .95rem} .input:focus,.textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(143,217,74,.18)} .textarea{resize:vertical;min-height:110px} .form-note{color:var(--fg-faint);font-size:.82rem;margin-top:.6rem} /* ── step cards (how-it-works / for-restaurants) ───────────────────────── */ .stepgrid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.4rem} @media(min-width:720px){.stepgrid{grid-template-columns:repeat(3,1fr)}.stepgrid.four{grid-template-columns:repeat(4,1fr)}} .stepcard{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.3rem} .stepcard .n{font-family:var(--fd);font-weight:700;font-size:2rem;color:transparent;-webkit-text-stroke:1.5px var(--accent-stroke);line-height:1} .stepcard h3{font-size:1.08rem;margin-top:.7rem;color:var(--fg)} .stepcard p{color:var(--fg-muted);margin:.4rem 0 0;font-size:.93rem} /* ── pricing ───────────────────────────────────────────────────────────── */ .plan-toggle{display:inline-flex;gap:.3rem;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-pill);padding:.3rem;margin-top:1.4rem} .plan-toggle button{font-family:var(--fd);font-weight:600;font-size:.9rem;border:0;background:transparent;color:var(--fg-muted);padding:.55rem 1.1rem;border-radius:var(--r-pill);cursor:pointer} .plan-toggle button[aria-pressed="true"]{background:var(--lime);color:var(--ink)} .pricecard{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.8rem;margin-top:1.4rem;overflow:hidden} .pricecard .flag{position:absolute;top:16px;right:16px;background:var(--lime);color:var(--ink);font-family:var(--fd);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .6rem;border-radius:var(--r-pill)} .pricecard .amt{font-family:var(--fd);font-weight:700;font-size:clamp(3rem,2.2rem + 4vw,4.6rem);letter-spacing:-.04em;color:var(--fg);line-height:1;margin-top:1rem} .pricecard .amt small{font-size:.32em;color:var(--fg-muted);letter-spacing:0;font-weight:500} .pricecard .note{color:var(--accent-ink);font-family:var(--fm);font-size:.8rem;letter-spacing:.04em;margin-top:.5rem} .pricecard ul{list-style:none;margin:1.2rem 0 0;padding:0} .pricecard li{padding:.5rem 0;border-top:1px solid var(--border);color:var(--fg-muted);font-size:.95rem;display:flex;gap:.6rem;align-items:baseline} .pricecard li::before{content:"✓";color:var(--accent-ink);font-family:var(--fd);font-weight:700} .pricecard .cta{margin-top:1.4rem} /* ── newsletter mini form ──────────────────────────────────────────────── */ .nlform{display:flex;gap:.55rem;margin-top:1rem;flex-wrap:wrap} .nlform .input{flex:1 1 220px;border-radius:var(--r-pill);padding:.7rem 1.05rem} .nlform .btn{flex:0 0 auto} /* ── footer ────────────────────────────────────────────────────────────── */ footer.foot{background:var(--page);color:var(--fg-muted);padding:2.4rem 0 6rem;font-size:.9rem;border-top:1px solid var(--border)} .foot-grid{display:grid;gap:1.6rem;grid-template-columns:1fr} @media(min-width:760px){ .foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr} /* Popular dishes column (owner 2026-07-17): 5 tracks when it renders. :has() everywhere modern; older browsers wrap the 5th column below — fine. */ .foot-grid:has(.foot-col[aria-label="Popular dishes"]){grid-template-columns:1.3fr 1fr 1fr 1fr 1fr} } .foot-brand .brand{margin-bottom:.7rem} .foot-brand p{margin:.3rem 0 0;max-width:34ch;font-size:.86rem;color:var(--fg-faint)} .foot-col h4{font-family:var(--fm);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 .6rem} .foot-col a{display:block;color:var(--fg-muted);text-decoration:none;padding:.22rem 0;font-size:.9rem} .foot-col a:hover{color:var(--accent-ink)} .foot-legal{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--fg-faint)} .foot-legal span{max-width:72ch} /* ── sticky mobile CTA ─────────────────────────────────────────────────── */ .sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:.7rem 16px calc(.7rem + env(safe-area-inset-bottom));background:var(--top-bg);backdrop-filter:blur(14px);border-top:1px solid var(--border);transform:translateY(120%);transition:transform .3s ease} .sticky.show{transform:none}.sticky .btn{width:100%} @media(min-width:880px){.sticky{display:none}} /* Reserve room for the sticky bar (bar height + its padding + safe area) so it can never sit on top of the last cards, controls or footer content. 560–879px only — phones have no sticky bar (owner 2026-07-15). */ @media(min-width:560px) and (max-width:879px){body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}} /* Visible keyboard focus for every interactive element on the page — cards, buttons, links, pills, rails. Uses the accent stroke so it reads in both themes and never relies on colour alone (outline + offset shape). */ a.ticket:focus-visible,.btn:focus-visible,.toplink:focus-visible,.chip:focus-visible, .hdr-loc select:focus-visible,.pillfield input:focus-visible,.pillfield select:focus-visible, .sticky-search input:focus-visible,.rail:focus-visible,.hscroll:focus-visible,.tiergrid:focus-visible{ outline:3px solid var(--accent-stroke);outline-offset:2px} /* Homepage-only (owner 2026-07-14): on PHONES the sticky bar is a lime search pill (ink text, dish-names placeholder) and fully replaces the CTA. Larger screens (560–879px) keep the "Unlock these deals" CTA. Other pages keep their sticky CTA everywhere (they don't carry .sticky-home). */ /* Phones (owner 2026-07-15): NO sticky bar at all — the filter chips carry distance + cuisine, and membership CTAs live in the hero link + Lime Card section. 560–879px keeps the sticky "Unlock these deals" CTA. */ @media(max-width:559px){.sticky-home{display:none}} /* ---- HOT (flame outline, auto-clears when the deal drops out of the live feed) ---- */ .ticket.is-hot{position:relative;border-color:#ff7a1a!important;box-shadow:0 0 0 2px rgba(255,122,26,.35),0 8px 26px rgba(255,122,26,.18)} .ticket.is-hot::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:linear-gradient(120deg,#ff9d2f,#ff5e3a,#ffbe3d,#ff5e3a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9;animation:hotpulse 2.4s ease-in-out infinite;pointer-events:none} @keyframes hotpulse{0%,100%{opacity:.55}50%{opacity:1}} .hot-badge{position:absolute;top:10px;left:10px;z-index:2;background:linear-gradient(120deg,#ff7a1a,#ff4d2e);color:#fff;font:700 .7rem/1 'Space Grotesk',sans-serif;letter-spacing:.04em;padding:.32rem .55rem;border-radius:999px;box-shadow:0 2px 8px rgba(255,77,46,.4)} .trend-badge{position:absolute;top:10px;left:10px;z-index:2;background:rgba(14,23,18,.82);color:#8fd94a;font:700 .68rem/1 'Space Grotesk',sans-serif;padding:.3rem .5rem;border-radius:999px} @media(prefers-reduced-motion:reduce){.ticket.is-hot::after{animation:none}} /* Google rating chip */ .rt-row{margin:.25rem 0} .rt{display:inline-flex;align-items:center;gap:.25rem;font-weight:700;font-size:.82rem} .rt-star{color:#f5a623} .rt-n{font-weight:500;opacity:.7} .rt-g{font-weight:600;font-size:.68rem;opacity:.55;border:1px solid currentColor;border-radius:4px;padding:0 .25rem;letter-spacing:.02em} .later-sub{font:600 .72rem 'Space Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin:1rem 0 .4rem;padding-top:.6rem;border-top:1px dashed rgba(14,23,18,.12)} .hot-badge,.trend-badge{display:inline-flex;align-items:center;gap:.25rem} .hot-badge svg,.trend-badge svg{flex:none} /* ---- horizontal showcase rails (homepage) ---- */ /* ── Explore-deals board v2 (owner mock 2026-07-15) ──────────────────────── */ /* hero: headline left, combo search right (stacks on phones) */ .phero-board .phero-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;align-items:center} @media(min-width:880px){.phero-board .phero-grid{grid-template-columns:1fr minmax(0,560px);gap:2rem}} .phero-board h1{margin:0} .sc2{display:flex;align-items:center;gap:.8rem;background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:.4rem .4rem .4rem .5rem;box-shadow:0 10px 30px rgba(14,23,18,.08)} .sc2:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px rgba(143,217,74,.18),0 10px 30px rgba(14,23,18,.08)} .sc2-loc{display:inline-flex;align-items:center;gap:.35rem;background:var(--page);border:1px solid var(--border);border-radius:999px;padding:.5rem .8rem;flex:0 0 auto;color:var(--fg-muted)} .sc2-loc select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--fg);font:inherit;font-weight:700;outline:none;cursor:pointer;padding-right:.9rem;max-width:9.5rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f4f1e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:10px 7px} [data-theme="light"] .sc2-loc select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230e1712' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .sc2-loc select option{color:var(--ink)} .sc2 input{border:0;background:transparent;color:var(--fg);font:inherit;flex:1;min-width:0;outline:none} .sc2 input::placeholder{color:var(--fg-faint)} .sc2-go{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;background:var(--lime);color:var(--ink);display:grid;place-items:center;cursor:pointer} .sc2-go:hover{background:var(--lime-600)} /* filter row: chips left, sort select right */ .bsort-wrap{margin-left:auto} .bsort{appearance:none;-webkit-appearance:none;border:1.5px solid var(--border);background:var(--panel);color:var(--fg);font:inherit;font-size:.88rem;font-weight:600;border-radius:999px;padding:.5rem 2rem .5rem .9rem;outline:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f4f1e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:10px 7px} [data-theme="light"] .bsort{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230e1712' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .bsort option{color:var(--ink)} /* section headers: dot + title + mono count */ .bsec{margin-top:1.6rem} .bsec-h{display:flex;align-items:baseline;gap:.55rem;font-size:clamp(1.25rem,1.05rem+1vw,1.6rem);margin:0 0 .8rem} .bsec-h .bdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;align-self:center} .bsec-live .bdot{background:var(--lime)} .bsec-later .bdot{background:var(--amber,#e5a50a)} .bsec-notnow .bdot{background:var(--amber,#e5a50a)} .bsec-rest .bdot{background:var(--fg-faint)} .bsec-sub{font-size:.78rem;letter-spacing:.08em;color:var(--accent-ink)} .bsec-later .bsec-sub{color:var(--amber,#9a6a00)} .bsec-notnow .bsec-sub{color:var(--fg-muted)} .bsec-rest .bsec-sub{color:var(--fg-muted)} /* card v2 */ .bcard{display:flex;flex-direction:column;padding:0} .bcard .t-media{aspect-ratio:16/9} .bcard .bpct{position:absolute;left:12px;bottom:12px;background:#fff;color:#0e1712;font-family:var(--fd);font-weight:700;font-size:.85rem;padding:.35rem .75rem;border-radius:999px;box-shadow:0 4px 14px rgba(14,23,18,.22)} .bcard .bpct.on{background:var(--lime)} .bcard .bmin{position:absolute;left:12px;bottom:52px;background:rgba(255,255,255,.92);color:#0e1712;font-size:.72rem;font-weight:700;padding:.25rem .6rem;border-radius:999px} .bcard .binfo{padding:.85rem 1.05rem .1rem} .bcard .binfo h3{margin:0;font-size:1.05rem} .bcard .binfo .meta{color:var(--fg-muted);font-size:.88rem;margin-top:.15rem} .bcard .bfoot{display:flex;align-items:center;gap:.4rem;padding:.55rem 1.05rem .95rem;margin-top:auto} .bcard .bfoot .t-go{margin-left:auto} .bcard .bpct-inline,.bcard .bmeta-city,.bcard .bmin-foot{display:none} /* mobile board (owner mock 2026-07-15): live = single-column full cards with "status · city"; later/rest = compact thumbnail rows with inline % */ @media(max-width:559px){ /* (white background now applies site-wide via the global light-theme rule) */ /* combo search must never overflow the viewport: everything can shrink */ .phero-board .phero-grid > *{min-width:0} .bsearch,.bsearch .sc2{min-width:0;width:100%} .sc2{gap:.5rem;padding:.35rem .35rem .35rem .4rem} .sc2-loc{padding:.45rem .6rem;gap:.25rem} .sc2-loc select{max-width:6.8rem;font-size:.9rem} .sc2-go{width:42px;height:42px;flex:0 0 42px} /* compact rows: two flowing grid rows (name line, then status line) — the old fixed-offset overlay collided with long names/labels (owner report) */ .bcard .bmeta-city{display:inline;color:var(--fg-muted);font-size:.85rem} .bcard .binfo .meta{display:none} [data-bsec="live"] .tiergrid{grid-template-columns:1fr} [data-bsec="later"] .bcard,[data-bsec="rest"] .bcard{display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"media info go" "media foot go";align-items:center;gap:.15rem .8rem;padding:.65rem .8rem} [data-bsec="later"] .bcard .t-media,[data-bsec="rest"] .bcard .t-media{grid-area:media;width:64px;height:64px;aspect-ratio:1;border-radius:12px;align-self:center} [data-bsec="later"] .bcard .binfo,[data-bsec="rest"] .bcard .binfo{grid-area:info;padding:0;align-self:end} [data-bsec="later"] .bcard .bfoot,[data-bsec="rest"] .bcard .bfoot{grid-area:foot;padding:0;margin:0;align-self:start;flex-wrap:wrap;row-gap:.05rem} [data-bsec="later"] .bcard .binfo h3,[data-bsec="rest"] .bcard .binfo h3{font-size:1rem;line-height:1.25} [data-bsec="later"] .bcard .bpct,[data-bsec="rest"] .bcard .bpct,[data-bsec="later"] .bcard .bmin,[data-bsec="rest"] .bcard .bmin,[data-bsec="later"] .bcard .tk-rate,[data-bsec="rest"] .bcard .tk-rate,[data-bsec="later"] .bcard .hot-badge,[data-bsec="rest"] .bcard .hot-badge,[data-bsec="later"] .bcard .trend-badge,[data-bsec="rest"] .bcard .trend-badge,[data-bsec="later"] .bcard .feat,[data-bsec="rest"] .bcard .feat{display:none} [data-bsec="later"] .bcard .bpct-inline,[data-bsec="rest"] .bcard .bpct-inline{display:inline;color:var(--accent-ink);font-family:var(--fd);font-weight:700;font-size:.9rem;margin-left:.15rem} [data-bsec="later"] .bcard .bmin-foot,[data-bsec="rest"] .bcard .bmin-foot{display:inline;color:var(--fg-muted);font-size:.85rem} [data-bsec="later"] .bcard .t-go,[data-bsec="rest"] .bcard .t-go{grid-area:go;width:auto;height:auto;background:none;color:var(--fg-faint)} [data-bsec="later"] .bcard .bfoot .stat,[data-bsec="rest"] .bcard .bfoot .stat{font-size:.85rem} } .hscroll{display:grid !important;grid-template-columns:none !important;grid-auto-flow:column;grid-auto-columns:min(340px,82vw);overflow-x:auto;scroll-snap-type:x proximity;gap:1rem;padding:.2rem .2rem .8rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .hscroll>*{scroll-snap-align:start} .more-card{display:flex;align-items:center;justify-content:center;text-align:center;font:700 1.05rem 'Space Grotesk',sans-serif;border:2px dashed rgba(14,23,18,.25);background:transparent;min-height:240px} .more-card:hover{border-color:#8fd94a} /* Sample/preview listings are display-only — never clickable, never "real". */ .ticket.is-sample,.lrow.is-sample{cursor:default;opacity:.8} .ticket.is-sample:hover,.lrow.is-sample:hover{transform:none} /* Coming-up rail: real tickets, dimmed until the deal goes live (owner, 11 Jul) */ /* owner 2026-07-18: dimming retired — every restaurant card renders full-colour regardless of state. The rule is intentionally EMPTY (not deleted) so stale cached JS that still adds .is-dim has no visual effect. */ .ticket.is-dim{} /* Mobile: the marquee walks, it doesn't sprint. */ /* Phones (owner 2026-07-16 evening): 30% slower than that day's speed, then nudged a further 20% (6.55s → 8.19s per set — ~44% slower overall). This ALSO fixed a real bug: the old fixed 13.75s dropped the --tick-mult scaling, so the marquee sped up whenever more deals were live (3 sets ran ~3× desktop speed). With the multiplier restored the px/s speed is constant forever. */ @media (max-width:640px){.ticker-inner{animation-duration:calc(10.92s * var(--tick-mult,1))}}/* 2026-07-27 owner: 25% slower again on phones — speed x0.75 => 8.19s / 0.75 = 10.92s per set */ /* Google rating on the photo (owner, 11 Jul). HOT shares the corner — stack below it. */ .tk-rate{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:.28rem;background:var(--lime);color:var(--ink);font:700 .74rem/1 'Space Grotesk',sans-serif;padding:.34rem .55rem;border-radius:999px} .tk-rate .rt-star{color:var(--ink)} .tk-rate-n{font-weight:600;opacity:.7;margin-left:.15rem} .t-media:has(.feat) .tk-rate{top:46px} .lc-exp{opacity:.72;font-size:.68em;letter-spacing:.08em;margin-left:.8rem;font-weight:600} /* Phone header = logo + burger. Theme, Sign in and Join move into the menu. */ @media (max-width:839px){ .topnav .theme-toggle{display:none} .topnav .toplink{display:none} } .mobile-nav .mnav-extra{display:flex;flex-direction:column;border-top:1px solid var(--border);margin-top:.5rem;padding-top:.5rem} .mobile-nav .mnav-extra a{padding:.8rem .65rem;font-weight:600;text-decoration:none;color:var(--fg);border-radius:12px} .mobile-nav .mnav-join{background:var(--lime);color:var(--ink)!important;text-align:center;font-weight:700;margin:.35rem 0} .mobile-nav .mnav-theme{margin:.35rem 0 0;padding:.8rem .65rem;border:1px solid var(--border);background:transparent;color:var(--fg);border-radius:12px;font-weight:600;font-size:1rem;font-family:inherit;text-align:left;cursor:pointer} /* Lime Card mock: number + VALID THRU stack cleanly instead of wrapping */ .limecard .lc-no{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.2rem} .limecard .lc-exp{margin-left:0;letter-spacing:.12em} /* Breathing room between the redemption checklist and the deal CTA. */ .offer-ticket .cta{margin-top:1.15rem} /* ── marquee pause (WCAG 2.2.2, §25) ────────────────────────────────────── Auto-moving content pauses on hover/keyboard focus AND via a visible, keyboard-operable control ([data-ticker-pause], wired in hfp-ui.js with aria-pressed). Reduced-motion already disables the animation entirely, so the control hides there. */ .ticker{position:relative} .ticker:hover .ticker-inner,.ticker:focus-within .ticker-inner,.ticker.is-paused .ticker-inner{animation-play-state:paused} .ticker:hover .dotb,.ticker:focus-within .dotb,.ticker.is-paused .dotb{animation-play-state:paused} .ticker-pause{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:inline-grid;place-items:center;width:30px;height:30px;min-height:0;border-radius:50%;border:1.5px solid rgba(14,23,18,.5);background:rgba(244,241,231,.65);color:var(--ink);cursor:pointer;padding:0;z-index:2} .ticker-pause:hover{background:rgba(244,241,231,.9)} .ticker-pause:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .ticker-pause .tp-play{display:none} .ticker.is-paused .tp-pause{display:none} .ticker.is-paused .tp-play{display:block} .ticker--static .ticker-pause{display:none} @media (prefers-reduced-motion:reduce){.ticker-pause{display:none}} /* ── visible + accessible form validation (§24) ─────────────────────────── */ .ferr{color:#9c1e14;font-size:.85rem;margin:.35rem 0 0;font-weight:600} [data-theme="dark"] .ferr{color:#ffb3ab} .input[aria-invalid="true"],.textarea[aria-invalid="true"],select.input[aria-invalid="true"]{border-color:#9c1e14} [data-theme="dark"] .input[aria-invalid="true"],[data-theme="dark"] .textarea[aria-invalid="true"]{border-color:#ffb3ab} .form-errsum{border:1.5px solid #9c1e14;border-radius:14px;padding:.8rem 1rem;margin:.8rem 0 0;color:#9c1e14;font-weight:600;font-size:.9rem} [data-theme="dark"] .form-errsum{border-color:#ffb3ab;color:#ffb3ab} /* Signed-in header chip (2026-07-18): long emails must not blow up the nav. */ .toplink.is-me{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── Directory filter bar (2026-07-28 audit): dropdowns + count + clear ──── */ .fbar{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin:0 0 1.15rem} .fbar .fsel{display:inline-flex;min-width:0} .fbar .bsort{min-height:44px} .fbar .fchip{min-height:44px} .fcount{margin-left:auto;font-size:.78rem;letter-spacing:.08em;color:var(--accent-ink);white-space:nowrap} @media(max-width:719px){ .fbar{gap:.5rem} .fbar .fsel{flex:1 1 46%} .fbar .fsel select{width:100%} .fcount{margin-left:0;flex-basis:100%;white-space:normal} } @media(max-width:359px){ .fbar .fsel{flex-basis:100%} } /* ── Directory pagenav (2026-07-28): layout for the client-built nav ── */ .pagenav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.65rem;margin-top:1.6rem}