/* ===== overrides.css ===== */
/* =============================================================================
Table Alert — Sawada paid LP (/lp/restaurants/sawada-v2)
Native overrides layered on the graduated (static) Framer base.
Loaded AFTER the Framer-embedded styles so it wins without runtime patching.
Tokens + black-start + appear-reset live here; section components append below.
========================================================================== */
/* ---- Self-hosted BRAND fonts (Latin subset, woff2): DM Sans + Playfair Display,
matching the organic Table Alert pages. (woff2 produced by the font executor) ---- */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap;
src:url('/static/restaurants/lp/v2/fonts/dm-sans-400.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap;
src:url('/static/restaurants/lp/v2/fonts/dm-sans-500.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:700; font-display:swap;
src:url('/static/restaurants/lp/v2/fonts/dm-sans-700.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400; font-display:swap;
src:url('/static/restaurants/lp/v2/fonts/playfair-400.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:600; font-display:swap;
src:url('/static/restaurants/lp/v2/fonts/playfair-600.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap;
src:url('/static/restaurants/lp/v2/fonts/playfair-700.woff2') format('woff2'); }
/* Playfair 900 dropped 2026-06-05 — no element uses weight 900 (one fewer @font-face). */
/* ---- Design tokens (Flighty-exact, confirmed against the live site) ---- */
:root{
/* Table Alert BRAND tokens (match the organic Sawada page + base.css) */
--ta-gold:#C8AA6E; /* Table Alert brand gold */
--ta-bg:#000000; /* FULL BLACK background (no gradient) */
--ta-bg-pure:#000000;
--ta-ink:#ffffff; /* headline white */
--ta-muted:rgba(255,255,255,.64);
--ta-card:rgba(255,255,255,.045);
--ta-hairline:rgba(255,255,255,.08);
--ta-serif:'Playfair Display', Georgia, serif; /* brand serif */
--ta-sans:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* brand sans */
--ta-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* monitor/data mono — mirrors live.css --lv-monof */
/* ---- SPACING SCALE — 8-point grid (industry standard; Google Material, IBM
Carbon, Apple HIG all build on multiples of 8). 4px is the only half-step,
reserved for icon<->label gaps. Use these for any new padding/margin/gap so the
whole page stays on one grid.
Refs: designsystems.com/space-grids-and-layouts, cieden 8pt best-practices. ---- */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
--sp-7:48px; --sp-8:64px; --sp-9:80px; --sp-10:96px; --sp-11:128px;
/* Section vertical rhythm, identical on every section: 96px desktop (8pt + matches
Flighty's ~86-96px), easing to 60px mobile (documented landing-page section value).
The hero->coverage boundary is the one deliberate exception (hero.css/coverage.css)
so it reads as a single rhythm unit, not a doubled black void. */
--ta-sec-pad: clamp(60px, 7vw, 96px);
/* Content container tiers — the page's ad-hoc widths collapse toward these three
(all 8pt multiples): wide grids 1120, default content 920, narrow text 720. */
--ta-container: 1120px;
--ta-container-mid: 920px;
--ta-container-narrow: 720px;
}
/* ---- MOBILE: only the hero CTA + the sticky bottom CTA remain. Hide the
standalone "Get my table" CTA bands (cta-a/cta-b) and the final-CTA button so the
phone flow isn't cluttered with repeated CTAs; the sticky bar carries conversion.
(Pricing plan buttons + hero CTA kept.) !important because the bands' display is
set later in the bundle (pricing.css/social.css). ---- */
@media (max-width:820px){
.ta-ctaband, .ta-fc__actions{ display:none !important; }
}
/* ---- BLACK START: kill the Framer white SSR background everywhere it leaks.
The bundle ships an inline `:root body{background:#fff}` + a white page wrapper
+ a white hero section. We target OUR stable hooks (added by the build script)
so this never depends on Framer's hashed class names. ---- */
html, body{ background:var(--ta-bg) !important; margin:0; padding:0; }
/* The vertical scrollbar (≈15px on classic scrollbars) sits only on the right
edge, so the content box centres ~half-a-scrollbar LEFT of the true window
centre — every max-width;margin:auto container looked shifted left. We fixed
this with JS (the INLINE_JS `ta-center-compensate` block in the built HTML),
which measures the REAL scrollbar width via `innerWidth − documentElement
.clientWidth` and sets `--ta-sbw`, applied as left padding below. This is
accurate in every browser INCLUDING Safari/macOS overlay scrollbars (where it
resolves to 0 — no shift, correct). We do NOT use `calc(100vw − 100%)` (Safari
counts a phantom scrollbar in 100vw, over-shifting) nor `scrollbar-gutter`
(spotty support). The page is all-black, so the reserved gutter is invisible. */
body.ta-page{ padding-left: var(--ta-sbw, 0px); }
/* Horizontal-overflow guard, scoped to MOBILE/TABLET only (<=820px) — that's
where narrow widths push the hero hand / marquee past 100vw, and where the
hero STACKS (no sticky pin to risk). `clip` (not `hidden`) doesn't create a
scroll container. Desktop (>820px) has room + the hero pins, so no clip there. */
@media (max-width:820px){ html, body{ overflow-x:clip; } }
/* ---- SECTION DIVIDERS: soft, centred, fading hairlines between sections
(the look from the old "Sound familiar?" rules). Rendered as a ::before at the
top of each block section EXCEPT the FIRST section after the hero (now .ta-problem —
coverage moved to its own /restaurants page), so there's no hairline right under the hero.
Replaces the earlier full-width border-top lines. ---- */
.ta-cover, .ta-problem, .ta-flow, .ta-live, .ta-tm, .ta-pricing, .ta-faq, .ta-fc{ position:relative; }
.ta-flow::before, .ta-live::before, .ta-tm::before,
.ta-pricing::before, .ta-faq::before, .ta-fc::before{
content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:min(680px,82%); height:1px; pointer-events:none;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.14) 22%, rgba(255,255,255,.14) 78%, transparent);
}
/* ---- BRAND: un-clip the "Table Alert" wordmark in the nav (Framer sized the
slot for the short "Flighty" word) and keep it on one line. The wordmark
text node sits in a fixed-width Framer slot, so widen the link AND its
children and stop the clip. ---- */
[data-ta-brand]{ width:auto !important; max-width:none !important; overflow:visible !important; }
[data-ta-brand] *{ white-space:nowrap !important; width:auto !important; max-width:none !important; overflow:visible !important; }
/* ---- APPEAR-RESET: without the Framer runtime, elements with appear-animation
hooks stay at opacity:0. Force them to their final, visible state at the source.
We re-introduce tasteful scroll-reveals ourselves in a tiny IntersectionObserver. ---- */
[data-framer-appear-id]{ opacity:1 !important; transform:none !important; }
/* prefers-reduced-motion: belt-and-suspenders, freeze our own motion */
@media (prefers-reduced-motion: reduce){
*{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
/* =============================================================================
SECTION COMPONENT STYLES (appended by build squads below this line)
========================================================================== */
/* ===== css/nav.css ===== */
/* Table Alert — original top nav. Dark, non-sticky on desktop. Inter throughout
(wordmark matches the links). Tokens from overrides.css. */
.ta-nav{
position:relative;
z-index:50;
background:transparent;
font-family:var(--ta-sans);
/* The body has padding-left:var(--ta-sbw) for scrollbar-aware centering, which
would shift this full-bleed header right and leave a gap on the left. Break
the header back out to the full content width, then re-pad its inner so the
nav content stays centred on the window. (--ta-sbw is 0 with no/overlay
scrollbar → no-op.) */
box-sizing:border-box;
margin-left:calc(-1 * var(--ta-sbw, 0px));
width:calc(100% + var(--ta-sbw, 0px));
padding-left:var(--ta-sbw, 0px);
}
/* desktop: sticky header (translucent black + blur so content reads under it).
The hero phone pins at top:191px, well below the ~68px nav — no overlap. */
@media (min-width:821px){
.ta-nav{
position:sticky; top:0;
background:rgba(0,0,0,.72);
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
border-bottom:1px solid var(--ta-hairline);
}
}
.ta-nav__inner{
max-width:1200px;margin:0 auto;
display:flex;align-items:center;gap:24px;
padding:10px 28px; /* shorter header (was 22px) */
}
.ta-nav__brand{
display:inline-flex;align-items:center;gap:10px;
text-decoration:none;
flex:1 1 0; min-width:0; /* equal side column → centered links (see __links) */
}
.ta-nav__mark{ width:28px;height:28px;border-radius:7px;display:block;flex:0 0 auto; }
.ta-nav__word{
/* match the landing page brand wordmark (.nav-brand): serif, bold */
font-family:var(--ta-serif);
font-weight:700;font-size:19px;line-height:1;color:var(--ta-ink);
white-space:nowrap;letter-spacing:-0.02em;
}
.ta-nav__links{
display:flex;align-items:center;justify-content:center;gap:14px;
flex:0 0 auto; /* natural width; truly page-centered by the equal flex side columns */
}
.ta-nav__links a{
font-size:15px;font-weight:400;color:rgba(255,255,255,.72); /* thinner (was 500) */
text-decoration:none;transition:color .15s ease;
/* Equal-width slots + centred text so the MIDDLE link sits at the group's
centre (= page centre). Otherwise the unequal word widths (Restaurants ≫
Pricing) push the middle link right of centre, so it didn't line up with
the centred "What we track" eyebrow below. */
min-width:104px; text-align:center;
}
.ta-nav__links a:hover{ color:var(--ta-ink); }
/* right-side actions: Log in (text link) directly left of the gold CTA.
flex:1 (equal to the brand) + right-aligned → the centre links stay page-centered. */
.ta-nav__actions{
flex:1 1 0; min-width:0;
display:inline-flex; align-items:center; justify-content:flex-end; gap:18px;
}
/* Log in — styled exactly like the nav links (15px / 400 / muted) */
.ta-nav__login{
font-size:15px; font-weight:400; color:rgba(255,255,255,.72);
text-decoration:none; transition:color .15s ease;
}
.ta-nav__login:hover{ color:var(--ta-ink); }
.ta-nav__cta{
flex:0 0 auto;
display:inline-flex;align-items:center;gap:7px;
background:var(--ta-gold);color:#1a1206;
font-weight:400;font-size:15px; /* thinner CTA label (was 500) */
padding:8px 16px;border-radius:999px;text-decoration:none;
transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ta-nav__cta:hover{ filter:brightness(1.04); transform:translateY(-1px); }
/* ---- mobile hamburger (hidden on desktop) ---- */
.ta-nav__burger{
display:none;
width:38px; height:38px; flex:0 0 auto;
background:transparent; border:0; position:relative; cursor:pointer;
padding:0; -webkit-tap-highlight-color:transparent;
}
.ta-nav__bar{
display:block; position:absolute; left:8px; width:22px; height:2px;
border-radius:1px; background:var(--ta-ink);
transform-origin:center;
transition:transform .22s cubic-bezier(.3,0,0,1), top .22s cubic-bezier(.3,0,0,1), opacity .12s linear;
}
.ta-nav__bar:nth-child(1){ top:12px; }
.ta-nav__bar:nth-child(2){ top:18px; }
.ta-nav__bar:nth-child(3){ top:24px; }
.ta-nav__burger.is-open .ta-nav__bar:nth-child(1){ top:18px; transform:rotate(45deg); }
.ta-nav__burger.is-open .ta-nav__bar:nth-child(2){ opacity:0; transform:scaleX(.2); }
.ta-nav__burger.is-open .ta-nav__bar:nth-child(3){ top:18px; transform:rotate(-45deg); }
/* ---- mobile drawer (fly from right) ---- */
.ta-mm-overlay{
position:fixed; inset:0;
background:rgba(0,0,0,.75);
opacity:0; pointer-events:none;
transition:opacity .24s cubic-bezier(.3,0,0,1);
z-index:1019;
}
.ta-mm-overlay.is-open{ opacity:1; pointer-events:auto; }
.ta-mm{
position:fixed; top:0; right:0;
/* border-box + 100% (NOT 100vw): the LP has no global border-box reset, so a
content-box drawer added its 56px padding on top of 100vw → 446px, overflowing
~71px off-screen left (clipped the item text). 100% excludes the scrollbar gutter. */
box-sizing:border-box;
width:min(420px,100%); height:100vh; height:100dvh;
background:#0a0908;
padding:96px 28px 32px;
z-index:1020;
transform:translateX(100%); opacity:0; visibility:hidden;
transition:transform .24s cubic-bezier(1,0,.7,1), opacity .24s cubic-bezier(1,0,.7,1), visibility 0s linear .24s;
overflow-y:auto; -webkit-overflow-scrolling:touch;
display:flex; flex-direction:column;
}
.ta-mm.is-open{
transform:translateX(0); opacity:1; visibility:visible;
transition:transform .24s cubic-bezier(.3,0,0,1), opacity .24s cubic-bezier(.3,0,0,1), visibility 0s linear 0s;
}
.ta-mm__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.ta-mm__item a{
display:block;
font-family:var(--ta-serif);
font-size:24px; font-weight:600;
color:var(--ta-ink); text-decoration:none;
padding:12px 4px; letter-spacing:-.015em;
transition:color .15s;
}
.ta-mm__item a:hover{ color:#fff; }
.ta-mm__sep{ height:1px; background:rgba(255,255,255,.12); margin:14px 0; }
.ta-mm__sep ~ .ta-mm__item a{ font-size:17px; font-weight:500; padding:10px 4px; }
.ta-mm__close{
position:absolute; top:18px; right:20px; width:38px; height:38px;
background:transparent; border:0; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent;
}
.ta-mm__close span{
display:block; position:absolute; width:20px; height:2px; border-radius:1px;
background:var(--ta-ink); left:9px; top:18px;
}
.ta-mm__close span:first-child{ transform:rotate(45deg); }
.ta-mm__close span:last-child{ transform:rotate(-45deg); }
/* item stagger — fly from right */
.ta-mm__item{
opacity:0; transform:translateX(80px);
transition:opacity .3s cubic-bezier(.3,0,0,1), transform .3s cubic-bezier(.3,0,0,1);
}
.ta-mm.is-open .ta-mm__item{ opacity:1; transform:translateX(0); }
.ta-mm.is-open .ta-mm__item:nth-child(1){ transition-delay:60ms; }
.ta-mm.is-open .ta-mm__item:nth-child(2){ transition-delay:77ms; }
.ta-mm.is-open .ta-mm__item:nth-child(3){ transition-delay:94ms; }
.ta-mm.is-open .ta-mm__item:nth-child(4){ transition-delay:111ms; }
.ta-mm.is-open .ta-mm__item:nth-child(5){ transition-delay:128ms; }
.ta-mm.is-open .ta-mm__item:nth-child(6){ transition-delay:145ms; }
body.ta-menu-open{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){
.ta-mm, .ta-mm-overlay, .ta-mm__item, .ta-nav__bar{ transition:none; }
}
@media (max-width:820px){
.ta-nav__inner{ padding:9px 14px; gap:10px; } /* smaller, tighter header on mobile */
.ta-nav__links{ display:none; } /* nav links live in the drawer on mobile */
.ta-nav__actions{ display:none; } /* Log in + CTA move into the drawer */
.ta-nav__brand{ gap:8px; }
.ta-nav__mark{ width:22px; height:22px; border-radius:6px; } /* smaller brand icon */
.ta-nav__word{ font-size:15px; } /* smaller wordmark */
.ta-nav__burger{ display:block; margin-left:auto; width:30px; height:30px; } /* smaller hamburger */
.ta-nav__bar{ left:6px; width:18px; }
.ta-nav__bar:nth-child(1){ top:10px; }
.ta-nav__bar:nth-child(2){ top:15px; }
.ta-nav__bar:nth-child(3){ top:20px; }
.ta-nav__burger.is-open .ta-nav__bar:nth-child(1){ top:15px; transform:rotate(45deg); }
.ta-nav__burger.is-open .ta-nav__bar:nth-child(3){ top:15px; transform:rotate(-45deg); }
}
/* Desktop: the hamburger drawer is mobile-only — keep it OUT of the layout so its
off-screen (translateX(100%)) box can never extend past the viewport edge. */
@media (min-width:821px){
.ta-mm, .ta-mm-overlay{ display:none !important; }
}
/* ===== css/hero.css ===== */
/* =============================================================================
Table Alert — HERO (Sawada paid LP, /lp/restaurants/sawada-v2)
The hero centerpiece. Full-black bg, muted-gold accent, scroll-driven
phone + variable-width gold pill. Tokens (--ta-*) live in overrides.css;
this file ONLY consumes them. All classes ta- prefixed. GPU-friendly:
animation limited to transform / opacity. hero.js drives step/pill/screen
state from scroll; the phone pins via position:sticky declared HERE.
========================================================================== */
/* ---- the tall scroll range. Height controls the scroll cadence of the
choreography. At 240vh on a 900px viewport the pinned scroll distance is
~1260px; across 3 step transitions that's ~315px / step, matching the
measured ~320px/step cadence. INTEGRATION: bump for slower, drop for faster. */
.ta-hero{
position:relative;
background:var(--ta-bg);
color:var(--ta-ink);
font-family:var(--ta-sans);
/* height flows from intro + stagewrap(210vh) + the sticky-bottom step bar */
isolation:isolate;
/* Breathing room BELOW the step pill: the pill is position:sticky;bottom, so at the
end of the scroll it releases to its resting flow position at the hero's bottom
edge. Without this padding it lands flush against the next section. This keeps a
deliberate gap so the pill never looks glued to the coverage section at rest. */
padding-bottom:clamp(72px,10vh,132px);
}
/* No decorative gradient bloom — flat black background per brand. */
.ta-hero__glow{
display:none;
}
/* =========================================================================
LAYOUT — centred single column with a pin-to-centre phone.
1) .ta-hero__intro : normal flow, centred, at the TOP. Scrolls away as the
user scrolls (NOT pinned).
2) .ta-hero__stagewrap : a tall block (provides the choreography scroll
range). Inside it, .ta-hero__stage is a sticky FULL-VIEWPORT layer that
pins from the moment the intro has scrolled past — it holds the phone
(vertically CENTRED) and the gold stepper (pinned near the bottom),
combined in one robust sticky layer.
========================================================================= */
/* (1) intro — centred copy that scrolls away */
.ta-hero__intro{
position:relative; z-index:2;
max-width:820px;
margin:0 auto;
/* more top whitespace on desktop — pushes the header/subtext/hero down a bit. */
padding:clamp(44px,6.5vh,88px) clamp(20px,5vw,40px) clamp(12px,2.4vh,22px);
text-align:center;
display:flex; flex-direction:column; align-items:center;
box-sizing:border-box;
}
/* (2) the tall scroll range for the pinned phase. Height = how long the phone
stays pinned. With top:180px the sticky stage is (100vh - 180px) tall, so
the pinned scroll distance = height - (100vh - 180px).
Target ~320px/step at 900px viewport (4 steps, 3 transitions, LEAD=0.07):
usable = 320 * 3 / 0.86 ≈ 1116px → stagewrapH = 1116 + (900-180) = 1836px
≈ 204vh. Set 210vh for a comfortable cushion. INTEGRATION: bump for slower,
drop for faster. */
.ta-hero__stagewrap{
position:relative; z-index:1;
/* taller scroll range = more scroll distance per step, so each of the 4 sections
(watch/alert/book/in) is clearly seen even on a fast scroll. */
height:200vh; /* shorter scroll range -> steps advance faster (was 280vh) */
/* margin-top sets ONLY the scroll-0 START position of the phone — it does NOT
change where the stage PINS (that's the sticky `top` below) nor the pinned
scroll distance (offsetHeight - stageHeight is unchanged). Tuned so the phone's
top edge lands ~y440 (~49% of a 900px viewport) at scroll 0 to match flighty's
same phone-in-hand placement (was ~y356). The phone eases UP to its pin as you
scroll — flighty does the same. */
/* FIXED px (not vh!) — a vh margin shrinks when you drag the window shorter, which
pulled the phone UP into the headline/CTA/trust. A fixed offset keeps the phone's
start position height-independent: a shorter window just shows LESS of the phone
(clipped at the bottom), it's never pushed up. Lowered 60->32 to lift the scroll-0
phone slightly so a touch more of it shows on landing. */
margin-top:32px;
}
/* the pinned full-viewport layer: phone centred, stepper near the bottom.
top:180px → phone plateaus ~180px from the top rather than flush to the edge,
giving the scroll choreography a generous catch window (CATCH=180). */
.ta-hero__stage{
position:sticky;
top:150px; /* lifted 191->150 so the pinned phone sits higher / more centred (was bottom-heavy on laptop heights) */
height:calc(100vh - 150px);
min-height:420px;
display:flex; /* phone only now (stepper is a sticky sibling) */
/* TOP-anchored (not centred): the phone pins to the TOP of the stage, so zooming
out reveals MORE of the page below (no growing gap above the phone), and a
SHORTER viewport just clips the phone's bottom instead of pushing it up into
the headline/CTA/trust row. */
align-items:flex-start; justify-content:center;
padding:clamp(10px,2.2vh,28px) clamp(20px,5vw,48px) clamp(28px,5vh,56px);
box-sizing:border-box;
}
/* =========================================================================
INTRO — copy
========================================================================= */
.ta-hero__copy{ max-width:600px; }
.ta-hero__eyebrow{
display:inline-flex; align-items:center; gap:9px;
font:600 12px/1 var(--ta-sans);
letter-spacing:.13em; text-transform:uppercase;
color:rgba(255,255,255,.78);
margin:0 0 22px;
padding:8px 14px 8px 12px;
border-radius:999px;
background:var(--ta-card);
border:1px solid var(--ta-hairline);
}
.ta-hero__eyebrow-dot{
width:7px; height:7px; border-radius:50%;
background:var(--ta-gold);
animation:taHeroPulse 2.4s ease-out infinite;
}
.ta-hero__title{
font-family:var(--ta-serif);
font-weight:600; /* lighter, less heavy (was 700) — cleaner, à la vercel/diffusion */
font-size:clamp(40px,5.4vw,62px);
line-height:1.06;
letter-spacing:-.04em; /* tight tracking like the reference sites */
margin:0 0 18px;
color:var(--ta-ink);
}
.ta-hero__title-accent{ color:var(--ta-gold); display:inline; }
.ta-hero__sub{
font:400 clamp(16px,1.55vw,18px)/1.6 var(--ta-sans);
color:var(--ta-muted);
margin:0 auto 30px; /* centred within its max-width */
max-width:600px; /* wraps to ~2 lines (the longer monitor/price copy) */
white-space:normal;
}
.ta-hero__cta{
display:flex; align-items:center; justify-content:center; flex-wrap:wrap; /* centred */
gap:12px 18px; /* button + text link sit as a tighter pair */
margin:0;
}
.ta-hero__btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
font:500 18px/1 var(--ta-sans); letter-spacing:-.005em; /* larger desktop CTA */
color:var(--ta-bg);
text-decoration:none;
padding:17px 44px; /* wider desktop CTA */
border-radius:999px;
background:var(--ta-gold);
transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
will-change:transform;
}
.ta-hero__btn-arrow{ flex:0 0 auto; transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.ta-hero__btn:hover .ta-hero__btn-arrow{ transform:translateX(3px); }
/* trust row under the CTA (30-day guarantee + alerts sent) */
.ta-hero__trust{
display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
gap:6px 8px; margin-top:28px; /* tighter spacing around the "·" separator */
font:400 12px/1.4 var(--ta-sans); color:var(--ta-muted); /* smaller trust text on desktop */
}
/* "N tables unlocked so far" — a THIRD trust-row item: MUTED + same font size as the
guarantee/price (inherits .ta-hero__trust). Desktop: same row, dot-separated. Mobile:
the trust row wraps and this drops to its own line (see the mobile block). The number
is injected by render_lp_v3 from the 24h-cached slot count. */
.ta-hero__unlocked{ white-space:nowrap; }
.ta-hero__trust-item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.ta-hero__trust-item svg{ flex:none; transform:translateY(-1px); } /* nudge UP to the text's optical centre (line-box centre reads low next to the cap-height) */
/* price trust item — NOT inline-flex, so the "$"/"€" .ta-cur span and "5/mo" aren't
split by the flex gap (which produced "$ 5/mo"). Normal text flow keeps "$5/mo". */
.ta-hero__trust-price{ white-space:nowrap; }
.ta-hero__trust-sep{ opacity:.35; }
.ta-hero__btn:hover{ transform:translateY(-2px); opacity:.88; }
.ta-hero__btn:active{ transform:translateY(0); }
.ta-hero__btn:focus-visible{ outline:2px solid var(--ta-gold); outline-offset:3px; }
/* Secondary CTA — plain TEXT hyperlink (no button/outline); smooth-scrolls to coverage */
.ta-hero__btn--ghost{
display:inline-flex; align-items:center; justify-content:center;
font:500 17px/1 var(--ta-sans); letter-spacing:-.005em;
color:rgba(255,255,255,.66);
text-decoration:none;
padding:6px 2px; /* no pill padding — just a comfortable click target */
background:transparent; border:0;
transition:color .18s ease;
}
.ta-hero__btn--ghost:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.ta-hero__btn--ghost:active{ color:#fff; }
.ta-hero__btn--ghost:focus-visible{ outline:2px solid rgba(255,255,255,.4); outline-offset:3px; border-radius:6px; }
.ta-hero__ghost{
display:inline-flex; align-items:center; gap:7px;
font:600 14px/1 var(--ta-sans);
color:rgba(255,255,255,.8);
text-decoration:none;
transition:color .2s ease;
}
.ta-hero__ghost span{ transition:transform .2s ease; }
.ta-hero__ghost:hover{ color:#fff; }
.ta-hero__ghost:hover span{ transform:translateY(2px); }
.ta-hero__ghost:focus-visible{ outline:2px solid rgba(255,255,255,.5); outline-offset:3px; border-radius:4px; }
/* scroll cue under the intro — a gentle "scroll" hint with a bobbing dot.
Signals the pinned choreography below. Hidden on static/reduced-motion. */
.ta-hero__scrollcue{
display:inline-flex; flex-direction:column; align-items:center; gap:8px;
margin-top:clamp(26px,5vh,46px);
color:rgba(255,255,255,.4);
}
.ta-hero__scrollcue-txt{
font:600 10px/1 var(--ta-sans); letter-spacing:.22em; text-transform:uppercase;
}
.ta-hero__scrollcue-rail{
position:relative; width:22px; height:34px; border-radius:999px;
border:1.5px solid rgba(255,255,255,.28);
}
.ta-hero__scrollcue-dot{
position:absolute; left:50%; top:7px; width:4px; height:4px; border-radius:50%;
background:var(--ta-gold); transform:translateX(-50%);
animation:taHeroScroll 1.8s ease-in-out infinite;
}
@keyframes taHeroScroll{
0%{ opacity:0; transform:translate(-50%,0); }
30%{ opacity:1; }
70%{ opacity:1; transform:translate(-50%,14px); }
100%{ opacity:0; transform:translate(-50%,16px); }
}
/* =========================================================================
PHONE STAGE — centred device-in-hand + floating cards
========================================================================= */
/* grid row 1: vertically + horizontally centres the device-in-hand. */
.ta-hero__center{
position:relative;
align-self:flex-start; justify-self:center; /* TOP-anchor the phone in the stage (was center -> re-centred per viewport height, causing the push-up on shorter windows) */
display:flex; align-items:center; justify-content:center;
width:100%;
min-height:0;
}
/* =========================================================================
DEVICE — user-supplied phone-in-hand photo (generic Apple mockup, UPRIGHT,
rights confirmed). PNG has a transparent background, so it sits cleanly on
the black page (no blend-mode / masking). The narrative is carried by the
Sawada booking film rendered ON the screen (see SCREEN FILM below). The
device is the positioning context for the screen overlay.
========================================================================= */
.ta-hero__device{
position:relative; z-index:2;
display:flex; align-items:center; justify-content:center;
pointer-events:none;
/* the screen sits left-of-centre inside phone-in-hand.png (hand on the right),
so nudge the whole device right to centre the SCREEN like the original; the
small downward nudge realigns the screen-top to the original's after the
glass-fit cut. Tuned to measured Δx/Δy in scripts/compare_hero.py. */
transform:none; /* SVG phone is centred (no hand to offset for) */
}
/* The photo: PNG has transparent bg. UPRIGHT — no tilt (matches the original). */
.ta-hero__photo{
display:block;
width:clamp(220px,24vw,320px); /* phone-only SVG — narrower than the old hand photo */
height:auto;
/* recolor the titanium/rosé frame to a clean BLACK phone (grayscale kills the tint,
brightness darkens it; the render's edge highlights survive as subtle catch-light so
the black frame still reads against the black page). Only the frame is visible — our
screen overlays the rest. */
filter:grayscale(1) brightness(.46) contrast(1.12) drop-shadow(0 38px 64px rgba(0,0,0,.66));
}
/* eyebrow dot (pulse keyframe kept for .ta-hero__eyebrow-dot) */
.ta-hero__pulse{
width:7px; height:7px; border-radius:50%;
background:var(--ta-gold);
animation:taHeroPulse 2s ease-out infinite;
flex:none;
}
/* =========================================================================
SCREEN FILM — our Sawada booking film, rendered ON the phone's screen glass.
Rect measured upright against phone-in-hand.png (left/top/width/height as % of
the photo box). Frames cross-fade by .ta-hero[data-ta-step] (set by hero.js):
watch -> alert -> book -> confirm. container-type lets the frame internals
scale with the screen via cq* units, so it stays crisp at any phone size.
========================================================================= */
.ta-hero__screen{
position:absolute;
/* screen-as-%-of-the-iPhone-15-Pro SVG, measured via canvas pixel-scan of the
rendered SVG (356x730): left 4.5 / top 2.05 / width 91 / height 95.9. */
left:4.5%; top:2.05%; width:91%; height:95.9%;
border-radius:13% / 6.2%; /* matches the 15 Pro display corner radius */
overflow:hidden;
background:#0b0a09; /* warm screen base — covers the SVG's blank screen */
z-index:3; /* above the photo */
container-type:size; /* enable cqw/cqh for the frame internals */
pointer-events:none;
}
/* each frame fills the screen and cross-fades. Proportions ported 1:1 from the
ORIGINAL Sawada page's sv-* design (authored at a 320px-wide logical stage), so
px-at-320 -> cqw via x*0.3125 — this is why the frames now fit the phone like
the original. */
.svf{
position:absolute; inset:0;
opacity:0; transition:opacity .45s ease;
will-change:opacity;
font-family:var(--ta-sans); color:#EAE3D8;
}
.svf--alert{ opacity:1; } /* default-visible (also the pre-JS state) — demo now opens on the alert */
/* ---- CONFIRM card (photo on top, detail card below) ---- */
.svf--confirm{
display:flex; flex-direction:column; background:#0b0a09;
}
.svf-shot{ position:relative; width:100%; height:32%; flex:0 0 auto; overflow:hidden; }
.svf-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.svf-shot::after{ content:""; position:absolute; inset:0;
/* reach solid #0b0a09 before the very edge so the photo can't leak a warm sliver
at the photo->card boundary (the reported seam). */
background:linear-gradient(180deg, rgba(0,0,0,.05) 36%, #0b0a09 92%, #0b0a09 100%); }
/* solid card bg + 1px overlap kills the subpixel seam between the faded photo box and
the card box (they're separate stacked flex children → rounding can leave a hairline). */
.svf-card{ position:relative; flex:1; display:flex; flex-direction:column; padding:5.6cqw 6.9cqw;
background:#0b0a09; margin-top:-1px; }
.svf-name{ font-family:var(--ta-serif); font-weight:700; font-size:10.6cqw;
line-height:1; letter-spacing:-.01em; color:#EAE3D8; }
/* CA cohort: "The French Laundry" is long — shrink + nowrap so the phone name fits one row. */
html[data-ta-geo="ca"] .svf-name{ font-size:7.8cqw; white-space:nowrap; }
.svf-sub{ font-size:4.4cqw; color:rgba(247,244,239,.5); margin-top:2.8cqw; }
.svf-status{ display:flex; align-items:center; gap:2.8cqw; font-size:4.5cqw;
color:#EAE3D8; margin-top:5.6cqw; }
.svf-dot{ width:2.5cqw; height:2.5cqw; border-radius:50%; background:#56c06a; flex:none;
animation:svfBeep 1.5s ease-in-out infinite; } /* functional live-status indicator */
.svf-status--ok{ color:var(--ta-gold); font-weight:600; }
.svf-ck{ width:5.3cqw; height:5.3cqw; flex:none; }
.svf-div{ height:1px; background:rgba(247,244,239,.1); margin:5cqw 0; }
.svf-row{ display:flex; align-items:center; justify-content:space-between;
font-size:4.5cqw; padding:2.2cqw 0; }
.svf-row span{ color:rgba(247,244,239,.45); }
.svf-row b{ color:#EAE3D8; font-weight:600; }
/* ---- ALERT (step 1) — genuine iOS 26 ("Liquid Glass") LOCK SCREEN ----
NO restaurant photo. A premium dark wallpaper gradient (deep charcoal -> near
black with a faint warm pool top-centre, so the frosted clock + notification POP).
Apple's real SF font renders on the visitor's device via -apple-system. The date
is a small line ABOVE a large frosted clock that dominates the upper third; the
notification card sits lower as a single frosted-glass banner with a soft glow. */
.svf--alert{
/* BRAND black-and-gold wallpaper (NO photo): a rich warm-gold pool up top behind
the clock, a softer gold pool lower-right, over a black -> warm-black vertical
fade. Black-dominant, gold-accented — the brand gradient, not muted gray — so the
frosted clock + notification POP against real depth. */
background:
radial-gradient(92% 52% at 50% 1%, rgba(200,170,110,.55) 0%, rgba(160,124,62,.24) 30%, transparent 60%),
radial-gradient(120% 95% at 82% 112%, rgba(200,170,110,.18) 0%, transparent 56%),
linear-gradient(176deg, #1b1509 0%, #130d05 36%, #0a0702 68%, #000 100%);
}
.svf-lock{ position:absolute; inset:0; overflow:hidden; }
/* iOS clock face uses real SF on Apple devices; graceful system-ui fallback elsewhere */
.svf-lock-date, .svf-lock-time{
font-family:-apple-system, 'SF Pro Display', 'SF Pro', system-ui, var(--ta-sans);
}
/* DATE — small, semibold, centred, sitting just ABOVE the big clock */
.svf-lock-date{ position:absolute; top:11.5cqw; left:0; right:0; text-align:center;
font-weight:600; font-size:4.7cqw; line-height:1; letter-spacing:.005em;
color:rgba(255,255,255,.78); }
/* CLOCK — large (dominates the upper third), MEDIUM weight (not black). Liquid-glass:
a translucent near-white fill (transparent-clipped gradient) plus a soft drop-shadow
for depth and a faint top light-edge highlight, approximating iOS 26's frosted glass
with thin strands of light on the edges. */
.svf-lock-time{ position:absolute; top:16cqw; left:0; right:0; text-align:center;
font-weight:600; font-size:30cqw; line-height:1; letter-spacing:-.022em;
/* Liquid-glass fill: a bright translucent near-white gradient (brighter up top like
a lit glass edge, cooler at the base) clipped to the glyphs. */
color:#fff; /* fallback if background-clip:text unsupported */
background:linear-gradient(176deg,
rgba(255,255,255,1) 0%, rgba(255,255,255,.97) 45%, rgba(236,240,249,.88) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
/* a crisp white top light-edge + a soft dark drop for depth so it reads as frosted
glass floating over the wallpaper rather than flat painted type. */
filter:
drop-shadow(0 -.15cqw 0 rgba(255,255,255,.55))
drop-shadow(0 .5cqw .5cqw rgba(255,255,255,.22))
drop-shadow(0 1.6cqw 2.8cqw rgba(0,0,0,.55));
}
/* the notification — iOS geometry: rounded app-icon tile on the LEFT, then title + "now"
on one row and the dynamic slot body below. Frosted glass + soft brand glow; pops in
(slide + scale + fade) on step 1. NO app-name line. */
.svf-banner{ position:absolute; left:4cqw; right:4cqw; top:15cqw; z-index:3;
pointer-events:auto; cursor:pointer; /* tappable: jumps the film to "You book" (.ta-hero__screen is pointer-events:none) */
display:flex; align-items:center; gap:3.2cqw;
padding:3.6cqw 4cqw; border-radius:5.8cqw;
/* black / black-golden frosted card: deep warm-black translucent fill (not gray) +
strong blur, ringed in gold with a warm gold glow halo so it reads premium. */
background:linear-gradient(155deg, rgba(36,29,16,.84) 0%, rgba(13,10,5,.88) 100%);
-webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
border:1px solid rgba(200,170,110,.38);
box-shadow:0 6cqw 22cqw rgba(0,0,0,.6), 0 0 20cqw rgba(200,170,110,.5),
inset 0 1px 0 rgba(255,255,255,.1); /* gold glow + top light edge */
transform:translateY(-7cqw) scale(.96); opacity:0; /* drops DOWN from the top into place */
transition:transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .4s ease; }
/* Banner pops in (transform+opacity transition) on step 0. */
.ta-hero[data-ta-step="0"] .svf-banner{ transform:translateY(0) scale(1); opacity:1; }
.svf-bn-ic{ width:12.5cqw; height:12.5cqw; border-radius:2.9cqw; overflow:hidden; flex:none;
background:#9b3b30; } /* brand bordeaux behind the mark */
.svf-bn-ic img{ width:100%; height:100%; display:block; }
.svf-bn-txt{ flex:1; min-width:0; }
.svf-bn-head{ display:flex; align-items:baseline; gap:2cqw; }
.svf-bn-title{ font-size:4.8cqw; font-weight:700; color:#fff; line-height:1.2; }
.svf-bn-now{ margin-left:auto; font-size:3.8cqw; color:rgba(255,255,255,.6); flex:none; }
/* date/time/guest + "Book now" share ONE line */
.svf-bn-bodyrow{ display:flex; align-items:baseline; gap:1.4cqw; margin-top:.9cqw; }
.svf-bn-body{ font-size:3.9cqw; font-weight:400; color:rgba(255,255,255,.84); line-height:1.32;
white-space:nowrap; min-width:0; }
/* "— Book now" — flows right after the slot, SAME size/weight/colour as the slot text */
.svf-bn-cta{ flex:0 0 auto; font-size:3.9cqw; font-weight:400; color:rgba(255,255,255,.84); white-space:nowrap; }
/* the phone is a STATIC demo — the notification isn't clickable (no frame advance) */
.svf-banner{ pointer-events:none; cursor:default; }
/* tab bar (We alert you / You book / You're in) removed everywhere — static first frame only */
.ta-hero__steps{ display:none !important; }
/* pulsating "scroll down" cue — desktop-only (shown in the ≥821 block) */
.ta-hero__scroll{ display:none; }
@keyframes taScrollCue{
0%,100%{ transform:translateY(0); opacity:.4; }
50%{ transform:translateY(7px); opacity:.95; }
}
/* ---- BOOK (booking via Omakase loader) ---- */
.svf--book{ display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:5cqw; text-align:center; padding:0 8cqw;
background:radial-gradient(ellipse 80% 60% at 50% 40%, rgba(140,80,45,.5), transparent 65%), #0d0907; }
.svf-spin{ width:13cqw; height:13cqw; border-radius:50%;
border:.94cqw solid rgba(200,170,110,.25); border-top-color:var(--ta-gold);
animation:svfSpin .9s linear infinite; }
.svf-omk{ width:37.5cqw; height:auto; filter:brightness(0) invert(1) opacity(.85); } /* renders the logo white */
.svf-load{ font-size:4.4cqw; color:rgba(247,244,239,.8); font-weight:500; }
@keyframes svfSpin{ to{ transform:rotate(360deg); } }
@keyframes svfBeep{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
/* ---- step -> frame visibility (driven by hero.js [data-ta-step]) ----
"We watch" was removed, so the demo now opens on the alert: step 0 = alert,
step 1 = book, step 2 = confirm. */
.ta-hero[data-ta-step="0"] .svf--alert{ opacity:1; }
.ta-hero[data-ta-step="1"] .svf--alert{ opacity:0; }
.ta-hero[data-ta-step="1"] .svf--book{ opacity:1; }
.ta-hero[data-ta-step="2"] .svf--alert{ opacity:0; }
.ta-hero[data-ta-step="2"] .svf--confirm{ opacity:1; }
/* =========================================================================
STEP BAR + variable-width gold pill
========================================================================= */
.ta-hero__steps{
/* Sticky, visible from the moment you land, overlaying the phone's lower area.
GLUED TO THE PHONE (not the viewport bottom): the phone pins at top:191px and
the bar should sit at a CONSTANT viewport-y (~797, over the phone's tab area)
regardless of window height. A plain `bottom:6vh` is measured from the viewport
bottom, so dragging the window shorter makes the bar ride UP off the phone toward
the headline. Anchoring `bottom: calc(100vh - 846px)` instead pins the bar's TOP
at a fixed 797px (846 = 797 bar-top + 49 bar-height): on h900 → bottom:54px
(identical to the old clamp), on taller windows it stays glued at 797, and on
SHORTER windows `bottom` goes negative so the bar clips below the fold TOGETHER
with the phone (you just see less) instead of detaching and floating upward.
Scroll-0 + scroll behavior are unchanged on a normal-height window. Mobile
re-anchors to the viewport bottom in the media query below (no window-resize there). */
position:sticky;
bottom:calc(100vh - 818px); /* keeps the bar's top at a fixed ~769px = glued to the pinned phone (between the original 797 and the lifted 741) */
z-index:6; /* above the device (z-index:2) */
margin:0 auto; /* centred horizontally in .ta-hero */
width:max-content; max-width:calc(100% - 36px); /* 100% (not 100vw) — 100vw includes the scrollbar gutter and can cause sub-pixel h-overflow */
pointer-events:auto;
display:flex; align-items:stretch;
gap:0; /* exact spacing comes from step padding */
padding:3px; /* matches the original bar padding */
border-radius:999px; /* = original 70px pill shape */
background:rgba(0,0,0,.85); /* matches the original bar bg */
border:1px solid rgba(255,255,255,.06); /* hairline for definition on pure black */
}
/* the pill — JS sets left + width to hug the active label exactly */
.ta-hero__pill{
position:absolute; top:6px; bottom:6px; left:0; /* anchored at 0; JS drives x via transform */
width:112px; /* JS overwrites — never relied on as fixed */
border-radius:999px;
background:var(--ta-gold);
/* Static / click snap mode keeps a CSS transition for a smooth slide. In
scroll mode the JS scrubs transform+width every frame, so the hero gets the
.ta-hero--scrub class which kills the transition (JS owns the easing).
Position is GPU `transform` (compositor) — no per-frame layout for movement. */
transition:transform .42s cubic-bezier(.2,.7,.2,1), width .42s cubic-bezier(.2,.7,.2,1),
height .42s cubic-bezier(.2,.7,.2,1);
z-index:0;
will-change:transform, width;
}
.ta-hero--scrub .ta-hero__pill{ transition:none; } /* JS drives per-frame */
.ta-hero__pill[data-ta-noanim]{ transition:none; }
.ta-hero__step{
position:relative; z-index:1;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
flex:1 1 0;
white-space:nowrap;
/* 9px vertical gives the pill a ~37px height (9+1.1em×13px≈14px+9 = ~32px inner;
with 6px bar padding top/bottom → ~37px bar height — down from 40px). */
padding:12px clamp(16px,1.9vw,26px); /* scaled up — taller + wider tab bar */
border:0; background:transparent; cursor:pointer;
border-radius:999px;
font:500 14.5px/1 var(--ta-sans); /* lighter (was 600) — cleaner tab-bar à la vercel/diffusion */
color:rgba(255,255,255,.79); /* matches the original's inactive step colour (~rgb 201) */
transition:none; /* color is INSTANT — text under the pill goes black the moment it's active (no white->black fade) */
-webkit-tap-highlight-color:transparent;
}
/* step icon (matches the original's stroked step icons), follows label color */
.ta-hero__step-ic{ display:inline-flex; align-items:center; flex:none; color:inherit; }
.ta-hero__step-ic svg{ width:17px; height:17px; display:block; }
.ta-hero__step-lab{ transition:none; }
/* active step (set by JS via aria-current) — text + icon flip to dark on the gold pill */
.ta-hero__step[aria-current="true"]{ color:var(--ta-bg); }
.ta-hero__step:focus-visible{ outline:2px solid var(--ta-gold); outline-offset:2px; }
/* =========================================================================
KEYFRAMES
========================================================================= */
/* Simple opacity pulse — no gold box-shadow glow. */
@keyframes taHeroPulse{
0%,100%{ opacity:1; }
50%{ opacity:.45; }
}
@keyframes taHeroBob{
0%,100%{ transform:translate3d(0,0,0); }
50%{ transform:translate3d(0,-10px,0); }
}
/* =========================================================================
RESPONSIVE — tablet
========================================================================= */
@media (max-width:1080px){
.ta-hero__photo{ width:clamp(220px,30vw,320px); }
}
/* =========================================================================
MOBILE — clean static stack: intro, then phone + stepper. No pinned
choreography (the pin-to-centre film is desktop-only). The .ta-hero range
and stagewrap collapse to auto height so the page scrolls normally; the
stepper is tappable to swap screens.
========================================================================= */
@media (max-width:820px){
/* mobile KEEPS the pinned scroll film (the original pins on mobile too —
verified via scripts/compare_hero.py). Only sizes/paddings differ. */
/* intro pulled UP + tighter spacing so the big headline + small CTA clear the phone */
.ta-hero__intro{
padding:clamp(72px,17vh,170px) 22px clamp(6px,1.2vh,12px); /* push the whole copy block well down from the top */
}
/* MOBILE hero->coverage boundary: the hero already supplies the gap below the step
pill, so keep this modest (the pill still clears the next section — same intent as
the desktop padding-bottom, scaled down). Pairs with the reduced .ta-cover padding-
top so the boundary is ONE rhythm unit, not a doubled black void. */
/* MOBILE: the hero FILLS the screen (below the static nav), with the cropped phone
pinned to the bottom so its cut-off IS the bottom of the hero — the "Restaurants we
watch" section starts below the fold. */
.ta-hero{
display:flex; flex-direction:column;
min-height:calc(100vh - 48px);
min-height:calc(100svh - 48px); /* svh (NOT dvh): the hero height is STABLE as the
mobile address bar collapses, so the bottom-pinned phone doesn't drift/"scroll
with you" while the browser chrome animates. dvh resizes on scroll → that drift. */
padding-bottom:0;
}
/* headline sized to land in exactly THREE rows on mobile: two black-text rows + the
gold "impossible" row. (8pt-aware: smaller than before so "you thought was" fits.) */
/* nowrap so "Stop missing tables." / "We'll alert you." each stay on ONE row
(the
already splits them); font sized so even a wider serif fallback
(Georgia, ~12% wider than Playfair) fits the line without clipping. */
.ta-hero__title{ font-size:clamp(34px,10vw,52px); line-height:1.07; margin:0 0 16px; white-space:nowrap; }
.ta-hero__title-accent{ display:block; } /* "impossible" on its own row on mobile */
.ta-hero__sub{ font-size:clamp(12.5px,3.4vw,14px); max-width:34ch; margin:0 0 clamp(34px,7vh,68px); white-space:normal; } /* big gap → pushes CTA + trust further down */
/* much smaller CTA on mobile so it doesn't overlap the phone */
.ta-hero__btn{ font-size:16px; padding:15px 22px; } /* taller + larger text, same width */
.ta-hero__btn--ghost{ font-size:14.5px; padding:12px 20px; }
/* MOBILE ORDER: primary CTA → trust row → "Find my restaurant" text link.
Dissolve the .ta-hero__cta wrapper (display:contents) so its two children join
the intro's flex column directly; then `order` interleaves the trust row (a
sibling that follows the wrapper in source) between the primary button and the
ghost link. See gotcha #3 in the handoff. */
.ta-hero__cta{ display:contents; }
.ta-hero__btn, .ta-hero__btn--ghost{ width:100%; max-width:300px; box-sizing:border-box; }
/* trust sits right under the primary button, on ONE line (no wrap, no stacking) */
.ta-hero__trust{ margin-top:16px; flex-wrap:wrap; font-size:11.5px; gap:6px 10px; }
/* "tables unlocked" drops to its OWN row on mobile (no leading dot), with a bit
more breathing room above it than the default trust row-gap */
.ta-hero__unlocked{ flex-basis:100%; margin-top:7px; }
.ta-hero__trust-sep--unlocked{ display:none; }
.ta-hero__trust-item{ gap:5px; }
.ta-hero__trust-item svg{ width:10px; height:10px; } /* slightly smaller trust icons */
/* push the ghost text link below the trust row */
.ta-hero__btn--ghost{ order:1; margin-top:14px; }
/* Big phone to match the original's mobile screen size. Hand can exceed the
viewport; html,body{overflow-x:clip} (<=820px) clips it with NO h-scroll. */
.ta-hero__photo{ width:min(340px,84vw); } /* phone-only SVG, mobile */
/* CROP the phone on mobile: show only the TOP — frame top → screen top → notification —
cut just below the notification, with the SAME margin above (inner-screen-top → notif)
as below (notif → cut). Measured visible height ≈ 0.42 × phone width. The device
renders full size (screen %-positions stay correct); the clip just hides the bottom. */
.ta-hero__center{ align-items:flex-start; overflow:hidden; max-height:min(142px,35vw); }
/* translateX keeps the phone SCREEN centred (the phone sits left-of-centre in the
hand photo). translateY:0 — no pull-up, so the phone clears the strip above it. */
.ta-hero__device{ transform:none; }
.svf-banner{ top:10.5cqw; } /* notification a touch higher on the phone screen (mobile) */
/* MOBILE is now STATIC: no pin, no tall scroll range, no tab bar. */
.ta-hero__stage{ position:static; height:auto; min-height:0; padding:0; }
.ta-hero__steps{ display:none; } /* remove the We-alert-you / You-book / You're-in tab bar on mobile */
/* push the scroll-0 phone DOWN so its top lands ~y543 (~64% of an 844px viewport)
to match flighty, and so the CTA no longer overlaps the phone (was ~y363, the
reported overlap). Only the scroll-0 start moves — the pin (top:172px) and the
pinned scroll distance are unchanged, so the choreography still plays. */
/* phone position on mobile (margin-top) + SHORTER scroll range so the 4 steps
advance with much less scrolling (280vh felt too long, esp. watch->alert).
margin-top raised 150px -> 12px so the phone sits MUCH higher (was barely
visible below the fold on shorter phones). */
/* gap above the phone — vh-based so it scales with phone height: bigger on tall
phones (phone sits lower), smaller on short phones (phone stays visible). */
.ta-hero__stagewrap{ margin-top:auto; height:auto; } /* push the cropped phone to the bottom of the full-height hero */
/* MOBILE PHOTO REVEAL: on landing the restaurant photo is collapsed (height 0) so
the Sawada card (title + Monitoring + Dates/Party rows) fills the phone screen
from the top. As you scroll, hero.js grows --svf-reveal 0->1 and the photo wipes
in ABOVE the card (the card slides down), ending at the standard 32% photo / card-
below layout. Scoped to the WATCH frame; desktop + no-JS default to 1 (full photo)
via the var fallback so nothing changes there. */
.svf--watch .svf-shot{ height:calc(32% * var(--svf-reveal, 1)); }
/* On first start (reveal 0) the card fills the screen with its title jammed at the
top edge. Add extra top padding that FADES OUT as the photo reveals, so the Sawada
title sits comfortably lower on landing without changing the revealed/standard
layout (at reveal 1 this resolves back to the base 5.6cqw). */
.svf--watch .svf-card{ padding-top:calc(5.6cqw + (1 - var(--svf-reveal, 1)) * 11cqw); }
/* mobile tab bar (Flighty-style): icons only; the ACTIVE step shows its label and
the gold pill SLIDES to it (hero.js re-measures the icon-only layout on each step
change and slides the pill via its CSS transition).
position: FIXED here (override the desktop sticky glue) with the vertical
`top` driven LIVE by hero.js:placeStepsMobile() to track the phone screen's
bottom. A single mechanism (fixed + JS top) — no sticky+transform compound —
so the bar stays glued just inside the phone's bottom AND rides up/away WITH
the phone when you scroll past the demo (never drifts down, never shoots up
through the phone). Horizontal centring via left/right:0 + margin:0 auto. */
.ta-hero__steps{ position:fixed; left:0; right:0; top:60vh; bottom:auto; flex-wrap:nowrap; gap:2px; padding:5px; width:max-content; max-width:calc(100vw - 24px); box-sizing:border-box; }
.ta-hero__step{ flex:0 0 auto; padding:12px 14px; gap:7px; font-size:13.5px; transition:color .38s ease; } /* scaled up; color tracks the sliding pill */
.ta-hero__step-ic{ display:inline-flex; } /* icons always visible */
.ta-hero__step-lab{ display:none; font-size:12px; white-space:nowrap; } /* hidden by default */
.ta-hero__step[aria-current="true"] .ta-hero__step-lab{ display:inline; } /* only the active shows text */
}
@media (max-width:420px){
/* Horizontal overflow at 390px is handled by body { overflow-x:clip } in
overrides.css at <=820px — no need to duplicate here. */
.ta-hero__title{ font-size:clamp(31px,10.2vw,50px); } /* keep "Stop missing tables." one row on tight phones (nowrap inherited); 31px floor fits 320px even with the wider serif fallback */
/* keep the two trust items on ONE line on tight phones (no stacking) */
.ta-hero__trust{ gap:4px 8px; font-size:10.5px; }
.ta-hero__trust-item svg{ width:9px; height:9px; }
}
/* =========================================================================
DESKTOP (≥821px) — TWO-COLUMN, AUTO-PLAYING hero (no scroll choreography).
Copy left-aligned on the left; the phone sits on the right and auto-plays the
alert → book → you're-in film (hero.js startAutoplay). The step pill rides on
the phone (position:absolute, top/left set by hero.js:placeStepsDesktop). This
overrides the base scroll-pinned single-column design for desktop widths.
========================================================================= */
@media (min-width:821px){
.ta-hero{
display:grid;
grid-template-columns:minmax(0,1.18fr) minmax(0,0.82fr); /* wider left so the strip stays one row */
align-items:center; /* phone vertically centred (equal gaps); strip aligned to its bottom via the strip's own translate below */
column-gap:clamp(28px,4.5vw,80px);
/* match the nav's content box (max-width:1200 + 28px sides) so the right-aligned
phone lines up with the nav's "Start watching" CTA at the end of the header */
max-width:1200px; margin:0 auto;
/* FILL the viewport below the (sticky ~56px) nav so the grid-centred phone sits
vertically centred between the header and the bottom of the screen — equal gap
above (header→phone) and below (screen-bottom→phone). border-box so the padding
is included (otherwise the hero overshoots the viewport). */
box-sizing:border-box;
min-height:calc(100vh - 56px);
padding:clamp(28px,5vh,64px) 28px clamp(28px,5vh,64px);
}
/* (1) copy — left column, LEFT-aligned. Stretch to the full row height so the
copy stays at the top and the strip can be pushed to the bottom (margin-top:auto
below) to line its bottom up with the phone's bottom. */
.ta-hero__intro{
grid-column:1; grid-row:1;
margin:0; max-width:none; padding:0;
text-align:left; align-items:flex-start;
}
.ta-hero__title{ text-align:left; }
/* the base sub has margin:0 auto (centres it) — reset so it left-aligns flush with the headline */
.ta-hero__sub{ text-align:left; margin-left:0; margin-right:0; }
.ta-hero__cta, .ta-hero__trust{ justify-content:flex-start; }
/* (2) phone — right column, static (no pin / no tall scroll range) */
.ta-hero__stagewrap{
grid-column:2; grid-row:1;
position:relative;
height:auto; min-height:0; margin:0;
}
.ta-hero__stage{
position:static; height:auto; min-height:0;
display:block; padding:0;
}
.ta-hero__center{ min-height:0; display:block; }
/* push the phone toward the RIGHT edge of its column (margin-left:auto) */
.ta-hero__device{ width:100%; max-width:300px; margin:0 0 0 auto; transform:none; }
/* Nudge the strip DOWN so its bottom lines up with the phone's lower body — at the
point where the side is still vertical, just ABOVE the rounded bottom corner (not
the absolute bottom). 68px would hit the absolute bottom; ~45px of bottom corner
radius means ~23px lands at the start of the curve. transform (not margin) so it
doesn't change the grid-centred layout. Tuned for ≥1024px widths. */
.ta-rstrip{ transform:translateY(23px); }
/* pulsating scroll-down cue, pinned to the hero bottom; fades on scroll (visuals.js) */
.ta-hero__scroll{
display:block; position:absolute; left:50%; bottom:clamp(14px,2.2vh,28px);
transform:translateX(-50%); color:var(--ta-muted); pointer-events:none; z-index:3;
transition:opacity .3s ease;
}
.ta-hero__scroll svg{ display:block; animation:taScrollCue 1.8s ease-in-out infinite; }
.ta-hero__scroll.is-hidden{ opacity:0; }
/* keep the restaurant strip on ONE row — never wrap ROW onto a second line */
.ta-rstrip__regions{ flex-wrap:nowrap; gap:0; }
.ta-rstrip__region{ padding:0 13px; }
.ta-rstrip__rn{ font-size:11.5px; }
/* CRITICAL: the photo must FILL the device box (base CSS gives it an independent
clamp() width that overflowed the capped device → the %-positioned screen film no
longer lined up with the phone in the photo). width:100% makes device box == photo,
so the screen rect aligns again. */
.ta-hero__photo{ width:100%; height:auto; }
/* (3) the step pill rides on the phone — absolute within .ta-hero, scrolls with it.
hero.js sets top + left; translateX(-50%) centres it on the computed screen-x.
Same compact ICON-ONLY tab bar as mobile: inactive steps show only their icon,
the active step reveals its label inside the gold pill (so the bar stays narrow
enough to sit on the phone instead of spanning ~2× its width). */
.ta-hero__steps{
position:absolute; right:auto; bottom:auto; margin:0;
transform:translateX(-50%);
flex-wrap:nowrap; gap:2px; padding:5px; width:max-content;
}
.ta-hero__step{ flex:0 0 auto; padding:11px 13px; gap:7px; font-size:13px; transition:color .38s ease; }
.ta-hero__step-ic{ display:inline-flex; } /* icons always visible */
.ta-hero__step-lab{ display:none; white-space:nowrap; } /* hidden by default */
.ta-hero__step[aria-current="true"] .ta-hero__step-lab{ display:inline; } /* only the active step shows text */
}
/* =========================================================================
INLINE RESTAURANT STRIP — lives in .ta-hero__intro. DESKTOP (default): a
horizontal row of regions (Japan/NYC/Cali/EU/ROW), each = name + count + the
restaurant names (names only). MOBILE (≤820, below): a tabbed browser — region
tabs + the active region's names as a divided list. Uses the LP design tokens.
========================================================================= */
.ta-rstrip{ width:100%; margin-top:clamp(22px,2.6vh,32px); text-align:left; }
.ta-rstrip__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ta-rstrip__label{ font:500 11px/1 var(--ta-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ta-muted); }
.ta-rstrip__tabs{ display:none; } /* desktop: all regions shown, no tabs */
.ta-rstrip__regions{ display:flex; flex-wrap:wrap; gap:16px 0; }
.ta-rstrip__region{ padding:0 18px; border-right:1px solid var(--ta-hairline); }
.ta-rstrip__region:first-child{ padding-left:0; }
.ta-rstrip__region:last-child{ border-right:none; padding-right:0; }
.ta-rstrip__rhead{ display:flex; align-items:baseline; gap:6px; margin-bottom:9px; }
.ta-rstrip__rname{ font:500 13px/1 var(--ta-sans); color:var(--ta-ink); }
.ta-rstrip__rcount{ font:400 11px/1 var(--ta-sans); color:var(--ta-muted); }
.ta-rstrip__list{ display:flex; flex-direction:column; gap:4px; }
/* DESKTOP: names only — the row collapses to just the name; the award icon + the
"+N more" line are hidden (the per-region count already shows in __rhead).
Restaurant names use the brand SERIF (matching .ta-cover__name), weight 400. */
.ta-rstrip__row{ display:block; }
.ta-rstrip__rn{ font:400 12.5px/1.45 var(--ta-serif); letter-spacing:.002em; color:var(--ta-muted); white-space:nowrap; }
.ta-rstrip__award, .ta-rstrip__tabelog{ display:none; }
.ta-rstrip__rmore{ display:none; }
@media (max-width:820px){
/* MOBILE: tabbed browser — tabs switch the visible region (hero.js wireRegionTabs).
margin-top is vh-based so the strip sits lower below the trust row on tall phones
and tightens on short phones (scales with available height). */
/* MOBILE: the inline hero strip is replaced by the dedicated "Restaurants we watch"
section under the phone (sections/restaurants-watch.html). Desktop keeps the strip. */
.ta-rstrip{ display:none; }
.ta-rstrip__tabs{ display:flex; gap:8px; margin-bottom:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.ta-rstrip__tabs::-webkit-scrollbar{ display:none; }
.ta-rstrip__tab{ flex:0 0 auto; padding:7px 16px; border-radius:100px; border:1px solid var(--ta-hairline);
background:transparent; font:500 12px/1 var(--ta-sans); color:var(--ta-muted); white-space:nowrap; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.ta-rstrip__tab.is-active{ background:rgba(200,170,110,.12); border-color:rgba(200,170,110,.32); color:var(--ta-gold); }
/* region count lives IN the tab, shown only when that tab is selected */
.ta-rstrip__tabct{ display:none; margin-left:6px; font-weight:600; }
.ta-rstrip__tab.is-active .ta-rstrip__tabct{ display:inline; }
.ta-rstrip__regions{ display:block; }
.ta-rstrip__region{ display:none; padding:0; border:none; }
.ta-rstrip__region.is-active{ display:block; }
.ta-rstrip__rhead{ display:none; } /* the active tab already names the region */
.ta-rstrip__list{ gap:0; }
/* restaurant rows: serif name LEFT (not bold), real award icon RIGHT, divided rows */
.ta-rstrip__row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:10px 0; border-bottom:1px solid var(--ta-hairline); }
.ta-rstrip__row:last-child{ border-bottom:none; }
.ta-rstrip__rn{ font:400 15px/1.3 var(--ta-serif); letter-spacing:.002em; color:var(--ta-ink); white-space:normal; }
/* the SAME award icons the coverage section uses, sized small to fit one line */
.ta-rstrip__award{ display:block; flex:0 0 auto; height:13px; width:auto; }
/* keep the logo badges (50 Top Pizza / 50 Best) close to the star height + under the
name line-height so NYC's rows don't stand taller than the other regions */
.ta-rstrip__award--badge{ height:16px; border-radius:4px; }
.ta-rstrip__award--50best{ height:17px; border-radius:0; }
.ta-rstrip__tabelog{ display:inline-flex; flex:0 0 auto; align-items:center; padding:3px 8px; border-radius:999px;
border:1px solid rgba(200,170,110,.42); background:rgba(200,170,110,.09); font:600 8.5px/1 var(--ta-sans);
letter-spacing:.05em; text-transform:uppercase; color:var(--ta-gold); white-space:nowrap; }
/* "+N more in " line under the three — surfaces the region's true scale */
.ta-rstrip__rmore{ display:block; padding-top:11px; font:500 11.5px/1 var(--ta-sans); color:var(--ta-gold); }
}
/* =========================================================================
SHORT PHONES — compress the whole stack so the phone + its notification still
fit. Everything above (copy, strip, gaps) tightens AND the phone is capped by
vh, so a 667px-tall device scales down instead of pushing the notification off
the fold. Tall phones (>760px) keep the roomier layout above.
========================================================================= */
@media (max-width:820px) and (max-height:650px){
.ta-hero__intro{ padding:clamp(8px,1.4vh,16px) 22px clamp(4px,1vh,10px); }
.ta-hero__title{ font-size:clamp(23px,6.4vw,33px); line-height:1.06; margin:0 0 6px; }
.ta-hero__sub{ margin:0 0 9px; }
.ta-hero__trust{ margin-top:8px; }
.ta-rstrip{ margin-top:clamp(8px,1.6vh,16px); }
.ta-rstrip__tabs{ margin-bottom:9px; }
.ta-rstrip__row{ padding:7px 0; }
.ta-rstrip__rmore{ padding-top:8px; }
.ta-hero__stagewrap{ margin-top:clamp(8px,1.6vh,16px); }
/* cap the phone by viewport HEIGHT so short screens get a smaller phone (its
notification then sits higher) */
.ta-hero__photo{ width:min(230px,62vw,52vh); }
}
/* =========================================================================
REDUCED MOTION — freeze: no scroll film, static stack, show the alert step,
pill sized under "We alert you" (hero.js sizes it once), cards static.
========================================================================= */
@media (prefers-reduced-motion: reduce){
.ta-hero{ height:auto; }
.ta-hero__stagewrap{ height:auto; margin-top:0; }
.ta-hero__stage{
position:static; height:auto; min-height:0;
grid-template-rows:auto auto; gap:clamp(28px,5vh,44px);
padding:clamp(8px,3vh,28px) clamp(20px,5vw,48px) clamp(40px,7vh,64px);
}
.ta-hero__center{ min-height:clamp(440px,46vh,560px); }
.ta-hero__pill{ transition:none; }
.ta-hero__eyebrow-dot, .ta-hero__pulse{ animation:none; }
.ta-hero__photo{ filter:grayscale(1) brightness(.46) contrast(1.12); } /* keep the black frame; drop only the heavy shadow */
.svf{ transition:none !important; }
.svf-banner{ transition:none !important; }
.svf-spin{ animation:none !important; }
.ta-hero__scroll svg{ animation:none !important; }
.ta-hero__btn, .ta-hero__btn--ghost, .ta-hero__ghost span{ transition:none; }
.ta-hero__scrollcue{ display:none; }
}
/* ===== css/visuals.css ===== */
/* =============================================================================
Table Alert — tailored visuals (Sawada paid LP, /lp/restaurants/sawada-v2)
Styles for BOTH:
1) .ta-dash — "10-second live dashboard" operations console
2) .ta-phone — phone with a notification that swaps every 5s
Tokens (--ta-*) are defined in overrides.css; this file ONLY consumes them.
All classes are ta- prefixed to avoid Framer collisions.
GPU-friendly: animation limited to transform/opacity; no layout thrash.
========================================================================== */
/* ---- shared scroll-reveal (driven by visuals.js adding .ta-in) ---- */
[data-ta-reveal]{
opacity:0;
transform:translate3d(0,26px,0);
transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
will-change:opacity, transform;
}
[data-ta-reveal].ta-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
[data-ta-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}
/* =============================================================================
COMPONENT 1 — .ta-dash : the live operations console
========================================================================== */
.ta-dash{
background:var(--ta-bg);
color:var(--ta-ink);
padding:clamp(64px,9vw,140px) 20px;
font-family:var(--ta-sans);
}
.ta-dash__inner{ max-width:1120px; margin:0 auto; }
/* intro copy */
.ta-dash__intro{ max-width:760px; margin:0 auto clamp(40px,5vw,68px); text-align:center; }
.ta-dash__eyebrow{
font:600 12px/1 var(--ta-sans);
letter-spacing:.22em; text-transform:uppercase;
color:var(--ta-gold);
margin:0 0 18px;
}
.ta-dash__title{
font-family:var(--ta-serif);
font-weight:500;
font-size:clamp(34px,5.4vw,60px);
line-height:1.04;
letter-spacing:-.01em;
margin:0 0 22px;
color:var(--ta-ink);
}
.ta-dash__body{
font:400 clamp(16px,1.5vw,19px)/1.62 var(--ta-sans);
color:var(--ta-muted);
margin:0 auto 30px;
max-width:60ch;
}
.ta-dash__stat{
display:inline-flex; align-items:baseline; gap:14px;
margin:0;
}
.ta-dash__stat-num{
font-family:var(--ta-serif);
font-weight:600;
font-size:clamp(48px,8vw,84px);
line-height:.9;
color:var(--ta-gold);
}
.ta-dash__stat-label{
font:500 13px/1.3 var(--ta-sans);
letter-spacing:.04em; text-transform:uppercase;
color:var(--ta-muted);
}
/* console card — flat black, hairline border, no bloom */
.ta-dash__console{
position:relative;
display:grid;
grid-template-columns:1.55fr 1fr;
gap:clamp(20px,3vw,42px);
align-items:stretch;
padding:clamp(20px,2.6vw,34px);
border-radius:28px;
background:rgba(255,255,255,.03);
border:1px solid var(--ta-hairline);
box-shadow:0 40px 120px -50px rgba(0,0,0,.9);
overflow:hidden;
}
/* scanline shimmer removed — decorative gradient per ruling */
.ta-dash__scan{ display:none; }
/* ---- LEFT: feed ---- */
.ta-dash__feed{ position:relative; z-index:2; min-width:0; }
.ta-dash__feed-head{
display:flex; align-items:center; justify-content:space-between;
padding:2px 4px 16px;
border-bottom:1px solid var(--ta-hairline);
margin-bottom:8px;
}
.ta-dash__feed-title{
font:600 12px/1 var(--ta-sans); letter-spacing:.16em; text-transform:uppercase;
color:var(--ta-muted);
}
.ta-dash__feed-live{
display:inline-flex; align-items:center; gap:7px;
font:600 11px/1 var(--ta-sans); letter-spacing:.14em; text-transform:uppercase;
color:var(--ta-gold);
}
.ta-dash__live-dot{
width:7px; height:7px; border-radius:50%;
background:var(--ta-gold);
}
.ta-dash__console[data-ta-active] .ta-dash__live-dot{ animation:taPulse 2.2s ease-out infinite; }
.ta-dash__rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.ta-dash__row{
display:grid;
grid-template-columns:auto 1fr auto auto;
align-items:center;
gap:14px;
padding:15px 6px;
border-bottom:1px solid var(--ta-hairline);
transition:background .5s ease;
border-radius:10px;
}
.ta-dash__row:last-child{ border-bottom:0; }
.ta-dash__dot{
width:9px; height:9px; border-radius:50%;
background:var(--ta-gold);
flex:none;
}
.ta-dash__console[data-ta-active] .ta-dash__dot{ animation:taPulse 2.6s ease-out infinite; }
.ta-dash__rmeta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ta-dash__rname{
font:600 15px/1.2 var(--ta-sans);
color:var(--ta-ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ta-dash__rplat{
font:600 10px/1 var(--ta-sans); letter-spacing:.1em; text-transform:uppercase;
color:var(--ta-muted);
}
.ta-dash__rstate{ justify-self:end; }
.ta-dash__rbooked{
font:500 12px/1 var(--ta-sans);
color:rgba(255,255,255,.46);
white-space:nowrap;
}
.ta-dash__rfound{
display:inline-flex; align-items:center;
font:600 11px/1 var(--ta-sans); letter-spacing:.08em; text-transform:uppercase;
color:var(--ta-bg);
background:var(--ta-gold);
padding:6px 10px; border-radius:999px;
white-space:nowrap;
}
/* explicit display above beats the UA [hidden] rule — restore it so JS toggling works */
.ta-dash__rfound[hidden], .ta-dash__rbooked[hidden]{ display:none; }
.ta-dash__toast[hidden]{ display:none; }
.ta-dash__rage{
justify-self:end;
font:500 12px/1 var(--ta-sans);
color:var(--ta-muted);
font-variant-numeric:tabular-nums;
white-space:nowrap;
min-width:62px; text-align:right;
}
.ta-dash__rage b{ color:rgba(255,255,255,.82); font-weight:600; }
/* the "found" flash on the row */
.ta-dash__row.ta-dash__row--found{
background:rgba(200,170,110,.06);
box-shadow:inset 0 0 0 1px var(--ta-hairline);
}
.ta-dash__row.ta-dash__row--found .ta-dash__dot{
background:var(--ta-gold);
}
/* toast */
.ta-dash__toast{
position:absolute; left:6px; right:6px; bottom:6px; z-index:5;
display:flex; align-items:center; gap:12px;
padding:12px 14px;
border-radius:14px;
background:rgba(18,15,8,.96);
border:1px solid var(--ta-hairline);
box-shadow:0 22px 50px -18px rgba(0,0,0,.9);
transform:translate3d(0,18px,0); opacity:0;
transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
will-change:transform, opacity;
}
.ta-dash__toast[data-show]{ transform:none; opacity:1; }
.ta-dash__toast-mark{
flex:none; width:30px; height:30px; border-radius:50%;
display:grid; place-items:center;
background:var(--ta-gold);
color:var(--ta-bg); font-size:15px;
}
.ta-dash__toast-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ta-dash__toast-txt b{ font:600 13px/1.2 var(--ta-sans); color:var(--ta-ink); }
.ta-dash__toast-txt span{ font:400 12px/1.2 var(--ta-sans); color:var(--ta-muted);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ---- RIGHT: radial clock ---- */
.ta-dash__clock{
position:relative; z-index:2;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:18px;
padding:8px;
border-left:1px solid var(--ta-hairline);
}
.ta-dash__ring{
position:relative; width:min(248px,46vw); aspect-ratio:1;
}
.ta-dash__ring-svg{ width:100%; height:100%; display:block; transform:rotate(-90deg); }
.ta-dash__ring-track{
fill:none; stroke:rgba(255,255,255,.07); stroke-width:8;
}
.ta-dash__ring-prog{
fill:none; stroke-width:8; stroke-linecap:round;
stroke-dasharray:603; /* 2*pi*96 ≈ 603 */
stroke-dashoffset:603;
transition:stroke-dashoffset .25s linear;
}
/* sweeping tick hand */
.ta-dash__hand{
position:absolute; left:50%; top:50%;
width:2px; height:42%;
background:var(--ta-gold);
transform-origin:50% 100%;
transform:translate(-50%,-100%) rotate(0deg);
border-radius:2px;
}
.ta-dash__ring-core{
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; text-align:center;
}
.ta-dash__ring-num{
font-family:var(--ta-serif); font-weight:600;
font-size:clamp(30px,5vw,46px); line-height:.9;
color:var(--ta-ink);
}
.ta-dash__ring-num span{ font-size:.5em; color:var(--ta-gold); margin-left:2px; }
.ta-dash__ring-cap{
font:600 10px/1 var(--ta-sans); letter-spacing:.18em; text-transform:uppercase;
color:var(--ta-muted);
}
.ta-dash__clock-cap{
font:500 12px/1.3 var(--ta-sans); letter-spacing:.04em;
color:var(--ta-muted); margin:0; text-align:center;
}
/* responsive: stack console */
@media (max-width:760px){
.ta-dash__console{ grid-template-columns:1fr; }
.ta-dash__clock{ border-left:0; border-top:1px solid var(--ta-hairline); padding-top:26px; }
.ta-dash__ring{ width:min(220px,62vw); }
}
@media (prefers-reduced-motion: reduce){
.ta-dash__scan{ display:none; }
.ta-dash__live-dot, .ta-dash__dot{ animation:none !important; }
.ta-dash__toast{ transition:none; }
.ta-dash__ring-prog{ transition:none; }
}
/* =============================================================================
COMPONENT 2 — .ta-phone : phone + 5s notification swap
========================================================================== */
.ta-phone{
background:var(--ta-bg);
color:var(--ta-ink);
padding:clamp(64px,9vw,140px) 20px;
font-family:var(--ta-sans);
}
.ta-phone__inner{
max-width:1120px; margin:0 auto;
display:grid; grid-template-columns:1fr minmax(280px,360px);
gap:clamp(36px,6vw,80px);
align-items:center;
}
.ta-phone__eyebrow{
font:600 12px/1 var(--ta-sans);
letter-spacing:.22em; text-transform:uppercase;
color:var(--ta-gold); margin:0 0 18px;
}
.ta-phone__title{
font-family:var(--ta-serif); font-weight:500;
font-size:clamp(34px,5.2vw,58px); line-height:1.05; letter-spacing:-.01em;
margin:0 0 22px; color:var(--ta-ink);
}
.ta-phone__body{
font:400 clamp(16px,1.5vw,19px)/1.62 var(--ta-sans);
color:var(--ta-muted); margin:0; max-width:46ch;
}
/* stage + device */
.ta-phone__stage{
position:relative;
display:flex; align-items:center; justify-content:center;
justify-self:center;
}
.ta-phone__stage::before{ content:none; } /* no glow — flat black per brand */
.ta-phone__device{
position:relative; z-index:1;
width:min(320px,80vw); aspect-ratio:9/19.3;
border-radius:46px;
padding:11px;
background:linear-gradient(160deg,#26262b,#0a0a0d 60%);
box-shadow:
0 60px 120px -40px rgba(0,0,0,.9),
inset 0 0 0 1px rgba(255,255,255,.08);
}
.ta-phone__notch{
position:absolute; top:15px; left:50%; transform:translateX(-50%);
width:34%; height:26px; border-radius:0 0 16px 16px;
background:#000; z-index:3;
}
.ta-phone__screen{
position:relative; overflow:hidden;
width:100%; height:100%;
border-radius:36px;
background:#08080e;
display:flex; flex-direction:column;
}
/* No decorative glow — flat screen per brand. */
.ta-phone__glow{ display:none; }
/* lock-screen clock */
.ta-phone__lock{
text-align:center; padding:46px 0 0; color:#fff;
}
.ta-phone__date{
font:500 13px/1 var(--ta-sans); color:rgba(255,255,255,.7); margin-bottom:8px;
}
.ta-phone__time{
font:300 64px/1 var(--ta-sans); letter-spacing:-.02em; color:#fff;
text-shadow:0 2px 30px rgba(0,0,0,.4);
}
/* notification stack */
.ta-phone__notifs{
position:relative; z-index:2;
margin-top:auto;
padding:0 12px 8px;
display:flex; flex-direction:column; gap:9px;
min-height:96px;
justify-content:flex-end;
}
/* a single banner — real Table Alert notification style (scout-confirmed):
frosted dark pill, rgba(80,72,68,.55) + blur(20px) + hairline border */
.ta-notif{
display:grid;
grid-template-columns:auto 1fr auto;
grid-template-areas:
"icon title time"
"icon body book";
column-gap:10px; row-gap:2px;
align-items:start;
padding:11px 12px;
border-radius:13px;
background:rgba(80,72,68,.55);
-webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.06);
box-shadow:0 8px 22px rgba(0,0,0,.38);
/* enter/exit driven by JS classes; transform+opacity only */
transform:translate3d(0,0,0); opacity:1;
transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .42s ease, filter .42s ease;
will-change:transform, opacity;
}
.ta-notif--enter{ transform:translate3d(0,-16px,0); opacity:0; }
.ta-notif--exit{ transform:translate3d(0,14px,0); opacity:0; }
.ta-notif--dim{ opacity:.42; filter:saturate(.7); transform:scale(.97); }
.ta-notif--active{
border-color:rgba(255,255,255,.1);
box-shadow:0 8px 22px rgba(0,0,0,.38);
}
/* Notification icon: clean flat-gold rounded-rect with TA logo. */
.ta-notif__icon{
grid-area:icon; align-self:center;
width:34px; height:34px; border-radius:9px;
display:grid; place-items:center;
background:var(--ta-gold);
}
.ta-notif__icon img{ display:block; width:20px; height:20px; }
.ta-notif__title{
grid-area:title;
font:600 13px/1.1 var(--ta-sans); color:#fff;
}
.ta-notif__time{
grid-area:time; justify-self:end;
font:400 11px/1.2 var(--ta-sans); color:rgba(255,255,255,.5);
white-space:nowrap;
}
.ta-notif__body{
grid-area:body;
font:400 12px/1.4 var(--ta-sans); color:rgba(255,255,255,.82);
}
.ta-notif__body b{ color:#fff; font-weight:600; }
.ta-notif__book{
grid-area:book; align-self:end; justify-self:end; margin-top:6px;
font:600 11px/1 var(--ta-sans); letter-spacing:.02em;
color:var(--ta-bg);
background:var(--ta-gold);
padding:6px 12px; border-radius:999px;
white-space:nowrap;
}
/* home indicator bar */
.ta-phone__bar{
position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
width:34%; height:4px; border-radius:999px;
background:rgba(255,255,255,.55);
}
@media (max-width:860px){
.ta-phone__inner{ grid-template-columns:1fr; text-align:center; }
.ta-phone__intro{ max-width:560px; margin:0 auto; }
.ta-phone__body{ margin:0 auto; }
}
@media (prefers-reduced-motion: reduce){
.ta-notif{ transition:none; }
.ta-notif--enter, .ta-notif--exit{ transform:none; opacity:1; }
}
/* ===== css/flow.css ===== */
/* =============================================================================
Table Alert — Sawada paid LP (/lp/restaurants/sawada-v2)
Styles for TWO sections:
1) .ta-flow — "How it works" 3-card explainer (text on top, big visual)
2) .ta-reasons — "The case" 3-card why-you'll-love-it grid (unused; kept)
Tokens (--ta-*) are defined in overrides.css; this file ONLY consumes them.
All classes are ta- prefixed to avoid Framer collisions.
GPU-friendly: motion limited to transform/opacity; honors reduced-motion.
========================================================================== */
/* ---- shared scroll-reveal (driven by visuals.js adding .ta-in to the section)
Matches the fade/translate-up used by the other sections. ---- */
.ta-flow[data-ta-reveal],
.ta-reasons[data-ta-reveal]{
opacity:0;
transform:translate3d(0,24px,0);
transition:opacity .6s ease, transform .6s ease;
will-change:opacity, transform;
}
.ta-flow[data-ta-reveal].ta-in,
.ta-reasons[data-ta-reveal].ta-in{ opacity:1; transform:none; }
/* =============================================================================
SECTION 1 — .ta-flow : "How it works" — 3 vertical cards
Each card: head + (max-2-line) lede on TOP, then ONE large product-UI visual
below (the single inner rectangle inside the card outline). Cards stretch to
equal height; the visual is flex:1 so all three visuals align top AND bottom.
No step numbers — left-to-right order is self-evident.
========================================================================== */
.ta-flow{
background:var(--ta-bg);
color:var(--ta-ink);
/* uniform section rhythm: equal top padding + hairline. Bottom stays tight (48)
because the cta-a band sits right under the cards (66px CTA gap). */
padding:clamp(60px,7vw,96px) 20px 48px;
font-family:var(--ta-sans);
}
.ta-flow__inner{ max-width:1120px; margin:0 auto; }
/* intro — centred above the cards. No max-width cap: the one-line headline (~990px)
must NOT be constrained to a narrow box, or the nowrap text overflows it and anchors
left instead of centering. Full inner width + text-align:center = true centering. */
.ta-flow__intro{ text-align:center; margin:0 auto clamp(40px,5vw,64px); }
.ta-flow__eyebrow{
font:600 12px/1 var(--ta-sans);
letter-spacing:.22em; text-transform:uppercase;
color:var(--ta-gold);
margin:0 0 18px;
}
.ta-flow__title{
/* consistent with the other section headlines (coverage "impossible tables…"):
serif 600, same size/tracking; one line on desktop. */
font-family:var(--ta-serif);
font-weight:600;
font-size:clamp(24px,5.6vw,48px); /* unified page headline size (= landing .sec-title-center) */
line-height:1.1;
letter-spacing:-.03em;
margin:0;
color:var(--ta-ink);
white-space:nowrap;
}
/* ---- the 3-card grid (cards stretch to equal height) ---- */
.ta-flow__grid{
list-style:none; margin:0; padding:0;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(16px,2.1vw,24px);
align-items:stretch;
}
.ta-flow__card{
display:flex; flex-direction:column;
gap:clamp(16px,1.6vw,20px);
padding:clamp(18px,1.9vw,24px);
box-sizing:border-box; /* LP has no global border-box reset — without this, width:100% + padding overflows the column on mobile */
border-radius:22px;
background:rgba(255,255,255,.025);
border:1px solid var(--ta-hairline);
box-shadow:0 40px 100px -60px rgba(0,0,0,.9);
/* soft float-in, staggered off the section .ta-in */
opacity:0; transform:translate3d(0,18px,0);
transition:opacity .6s ease, transform .6s ease, border-color .4s ease, box-shadow .4s ease;
}
.ta-flow.ta-in .ta-flow__card{ opacity:1; transform:none; }
.ta-flow.ta-in .ta-flow__card:nth-child(1){ transition-delay:.04s; }
.ta-flow.ta-in .ta-flow__card:nth-child(2){ transition-delay:.14s; }
.ta-flow.ta-in .ta-flow__card:nth-child(3){ transition-delay:.24s; }
.ta-flow__card:hover{
border-color:rgba(200,170,110,.22);
box-shadow:0 44px 110px -52px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
}
/* ---- card text (on top) ---- */
.ta-flow__text{ flex:none; }
.ta-flow__head{
font-family:var(--ta-serif);
font-weight:600; /* consistent serif weight with the section headlines */
font-size:clamp(21px,2vw,26px);
line-height:1.15;
letter-spacing:-.005em;
margin:0 0 9px;
color:var(--ta-ink);
}
.ta-flow__lede{
font:400 clamp(14px,1.35vw,15.5px)/1.55 var(--ta-sans);
color:var(--ta-muted);
margin:0;
/* reserve 2 lines so the visuals below start at the same y across all 3 cards */
min-height:3.1em;
}
/* ---- the ONE large visual rectangle (fills the rest of the card) ---- */
.ta-flow__add,
.ta-flow__mon,
.ta-flow__lock{
flex:1; width:100%; box-sizing:border-box;
border-radius:14px;
border:1px solid var(--ta-hairline);
background:rgba(8,8,9,.72);
overflow:hidden;
}
/* =============================================================================
VISUAL 1 — "Add a restaurant" : a watch-summary card (fills the card height)
========================================================================== */
.ta-flow__add{
display:flex; flex-direction:column;
padding:clamp(16px,1.5vw,20px);
}
.ta-flow__add-head{
display:flex; align-items:baseline; justify-content:space-between; gap:10px;
padding-bottom:10px; margin-bottom:4px;
border-bottom:1px solid var(--ta-hairline);
}
/* name → matches .ta-live__r-name (serif 500 / 19px / 1.2) */
.ta-flow__add-title{
font-family:var(--ta-serif); font-weight:500; font-size:19px; line-height:1.2;
letter-spacing:-.005em; color:var(--ta-ink);
}
/* location → matches .ta-live__r-meta (sans 400 / 12px) */
.ta-flow__add-loc{
font:400 12px/1.5 var(--ta-sans);
color:var(--ta-muted); white-space:nowrap;
}
.ta-flow__fields{
margin:0; display:flex; flex-direction:column;
flex:1; justify-content:center; /* center the rows in the available height */
}
.ta-flow__field{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:7px 0;
border-bottom:1px solid rgba(255,255,255,.05);
}
.ta-flow__field:last-child{ border-bottom:0; }
/* field label → mono uppercase micro-label, matches .ta-live__topbar-label */
.ta-flow__field dt{
font:500 10.5px/1 var(--ta-mono); letter-spacing:.1em; text-transform:uppercase;
color:var(--ta-muted);
}
/* field value → sans body, matches .ta-live__slot data values */
.ta-flow__field dd{
margin:0; font:400 14px/1.2 var(--ta-sans); color:var(--ta-ink); text-align:right;
}
.ta-flow__addcta{
display:block; text-align:center;
margin-top:10px;
font:500 13.5px/1 var(--ta-sans); letter-spacing:.005em;
color:var(--ta-bg);
background:var(--ta-gold);
padding:10px; border-radius:11px;
text-decoration:none; cursor:pointer; /* now a real link -> /register */
transition:filter .15s ease;
}
.ta-flow__addcta:hover{ filter:brightness(1.05); }
/* =============================================================================
VISUAL 2 — "We track it nonstop" : a live, code-like monitor feed
Rows are injected by flow.js with the visitor's real local time (newest on top).
========================================================================== */
.ta-flow__mon{ display:flex; flex-direction:column; }
.ta-flow__mon-head{
display:flex; align-items:center; justify-content:space-between;
padding:12px 15px;
border-bottom:1px solid var(--ta-hairline);
background:rgba(255,255,255,.02);
}
/* header label → mono uppercase, matches .ta-live__topbar-label (keeps the gold accent) */
.ta-flow__mon-live{
display:inline-flex; align-items:center; gap:8px;
font:500 11px/1 var(--ta-mono); letter-spacing:.12em; text-transform:uppercase;
color:var(--ta-gold);
}
.ta-flow__pulse{
width:7px; height:7px; border-radius:50%;
background:var(--ta-gold);
animation:taFlowPulse 2.2s ease-out infinite;
}
@keyframes taFlowPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.ta-flow__mon-every{
font:500 11px/1 var(--ta-sans); letter-spacing:.02em; color:var(--ta-muted);
font-variant-numeric:tabular-nums;
}
.ta-flow__log{
flex:1;
display:flex; flex-direction:column;
font-variant-numeric:tabular-nums;
}
.ta-flow__logrow{
display:flex; align-items:center; gap:10px;
padding:9px 15px;
border-bottom:1px solid rgba(255,255,255,.045);
font:400 12px/1.3 var(--ta-mono);
/* slide-in transition for live-appended rows (flow.js toggles --enter) */
transition:opacity .35s ease, transform .35s ease;
}
.ta-flow__logrow:last-child{ border-bottom:0; }
.ta-flow__logrow--enter{ opacity:0; transform:translateY(-8px); }
.ta-flow__logrow--hit{ background:rgba(200,170,110,.08); }
.ta-flow__logt{ color:rgba(255,255,255,.45); flex:none; }
.ta-flow__logm{ color:rgba(255,255,255,.72); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ta-flow__logr{ color:rgba(255,255,255,.4); flex:none; }
.ta-flow__logr--ok{ color:var(--ta-gold); font-weight:700; }
/* =============================================================================
VISUAL 3 — "You get the alert" : an iOS lock-screen push (real-time clock)
========================================================================== */
.ta-flow__lock{
position:relative;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:0;
padding:clamp(16px,1.8vw,22px) clamp(16px,1.6vw,20px);
/* brand black-gold wallpaper (mirrors the hero lock screen, scaled down) */
background:
radial-gradient(92% 46% at 50% 4%, rgba(200,170,110,.42) 0%, rgba(160,124,62,.16) 34%, transparent 64%),
linear-gradient(176deg, #1b1509 0%, #130d05 40%, #0a0702 72%, #000 100%);
}
.ta-flow__push{
width:100%;
display:flex; align-items:center; gap:11px;
padding:12px 13px; border-radius:17px;
/* frosted gold-black banner */
background:linear-gradient(155deg, rgba(36,29,16,.86) 0%, rgba(13,10,5,.9) 100%);
-webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
border:1px solid rgba(200,170,110,.34);
box-shadow:0 14px 34px -16px rgba(0,0,0,.7), 0 0 26px -8px rgba(200,170,110,.4);
}
.ta-flow__push-ic{
width:36px; height:36px; border-radius:9px; overflow:hidden; flex:none;
background:#9b3b30; display:grid; place-items:center;
}
.ta-flow__push-ic img{ width:100%; height:100%; display:block; }
.ta-flow__push-txt{ flex:1; min-width:0; }
.ta-flow__push-head{ display:flex; align-items:baseline; gap:8px; }
.ta-flow__push-app{ font:700 13px/1.2 var(--ta-sans); color:#fff; }
.ta-flow__push-now{ margin-left:auto; font:400 11px/1 var(--ta-sans); color:rgba(255,255,255,.6); flex:none; }
.ta-flow__push-body{
font:400 12px/1.35 var(--ta-sans); color:rgba(255,255,255,.86);
margin-top:3px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* MOBILE: drop the lock-screen "block" around the alert in the 3rd flow card —
show just the push notification itself (desktop keeps the framed lock-screen mock). */
@media (max-width:820px){
.ta-flow__lock{
background:none; border:0; border-radius:0; padding:0; overflow:visible;
}
}
/* ---- responsive: 3 cols -> 1 col on narrow screens ---- */
@media (max-width:900px){
.ta-flow__grid{ grid-template-columns:1fr; gap:clamp(16px,4vw,22px); }
.ta-flow__card{ max-width:480px; margin-inline:auto; width:100%; }
.ta-flow__lede{ min-height:0; } /* no need to reserve 2 lines when stacked */
.ta-flow__title{ white-space:normal; } /* one line is desktop-only; wrap on mobile */
}
@media (prefers-reduced-motion: reduce){
.ta-flow[data-ta-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
.ta-flow__card{ opacity:1 !important; transform:none !important; transition:border-color .2s ease, box-shadow .2s ease; }
.ta-flow__pulse{ animation:none; }
.ta-flow__logrow{ transition:none; }
}
/* =============================================================================
SECTION 2 — .ta-reasons : 3-card grid
========================================================================== */
.ta-reasons{
background:var(--ta-bg);
color:var(--ta-ink);
padding:clamp(64px,9vw,140px) 20px;
font-family:var(--ta-sans);
}
.ta-reasons__inner{ max-width:1120px; margin:0 auto; }
.ta-reasons__intro{ max-width:760px; margin:0 0 clamp(34px,4.4vw,56px); }
.ta-reasons__eyebrow{
font:600 12px/1 var(--ta-sans);
letter-spacing:.22em; text-transform:uppercase;
color:var(--ta-gold);
margin:0 0 18px;
}
.ta-reasons__title{
font-family:var(--ta-serif);
font-weight:500;
font-size:clamp(34px,5.4vw,60px);
line-height:1.04;
letter-spacing:-.01em;
margin:0;
color:var(--ta-ink);
}
.ta-reasons__grid{
list-style:none; margin:0; padding:0;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(16px,2.2vw,26px);
}
.ta-reasons__card{
position:relative;
display:flex; flex-direction:column;
padding:clamp(26px,2.6vw,34px);
border-radius:22px;
background:rgba(255,255,255,.04);
border:1px solid var(--ta-hairline);
box-shadow:0 40px 100px -56px rgba(0,0,0,.9);
/* soft float-in: staggered transform/opacity, driven off the section .ta-in */
opacity:0; transform:translate3d(0,18px,0);
transition:opacity .6s ease, transform .6s ease, border-color .4s ease, box-shadow .4s ease;
}
.ta-reasons.ta-in .ta-reasons__card{ opacity:1; transform:none; }
.ta-reasons.ta-in .ta-reasons__card:nth-child(1){ transition-delay:.04s; }
.ta-reasons.ta-in .ta-reasons__card:nth-child(2){ transition-delay:.14s; }
.ta-reasons.ta-in .ta-reasons__card:nth-child(3){ transition-delay:.24s; }
.ta-reasons__card:hover{
border-color:rgba(200,170,110,.24);
box-shadow:0 44px 110px -48px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
}
.ta-reasons__icon{
display:inline-grid; place-items:center;
width:46px; height:46px;
border-radius:13px;
margin-bottom:22px;
color:var(--ta-gold);
background:rgba(200,170,110,.08);
border:1px solid rgba(200,170,110,.24);
}
.ta-reasons__icon svg{ width:23px; height:23px; display:block; }
.ta-reasons__head{
font-family:var(--ta-serif);
font-weight:500;
font-size:clamp(20px,2vw,25px);
line-height:1.16;
letter-spacing:-.005em;
margin:0 0 14px;
color:var(--ta-ink);
}
.ta-reasons__body{
font:400 clamp(14px,1.4vw,16px)/1.6 var(--ta-sans);
color:var(--ta-muted);
margin:0;
}
.ta-reasons__tags{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin-top:20px;
}
.ta-reasons__chip{
font:600 13px/1 var(--ta-sans); letter-spacing:.01em;
color:var(--ta-bg);
background:var(--ta-gold);
padding:8px 13px; border-radius:999px;
}
.ta-reasons__badge{
font:600 11px/1 var(--ta-sans); letter-spacing:.06em; text-transform:uppercase;
color:var(--ta-gold);
background:rgba(200,170,110,.08);
border:1px solid rgba(200,170,110,.28);
padding:8px 12px; border-radius:999px;
}
/* responsive */
@media (max-width:860px){
.ta-reasons__grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
.ta-reasons[data-ta-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
.ta-reasons__card{
opacity:1 !important; transform:none !important;
transition:border-color .2s ease, box-shadow .2s ease;
}
}
/* ===== css/marquee.css ===== */
/* =============================================================================
Table Alert — Marquee components (dark luxury LP)
Two infinite, GPU-friendly, CSS-driven marquees:
1) .ta-mq-restaurants — photo-tile strip ("what we watch")
2) .ta-mq-platforms — wordmark trust strip
Relies on tokens from overrides.css (--ta-gold / --ta-bg / --ta-ink /
--ta-muted / --ta-card / --ta-hairline / --ta-serif / --ta-sans).
All classes are .ta-* prefixed. Transform-only animation. No layout shift.
========================================================================== */
/* ---- Shared marquee scaffold ------------------------------------------------ */
.ta-marquee{
position:relative;
width:100%;
overflow:hidden;
/* Edge fade masks: content dissolves into the page bg at both ends. */
-webkit-mask-image:linear-gradient(to right,
transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image:linear-gradient(to right,
transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* The track holds both sets side-by-side and is what actually translates.
Each set is exactly 50% of the track, so a -50% shift lands the clone
precisely where the original began -> seamless, jump-free wrap. */
.ta-marquee__track{
display:flex;
flex-wrap:nowrap;
width:max-content;
will-change:transform;
animation:ta-marquee-x var(--ta-mq-duration, 60s) linear infinite;
}
.ta-marquee--words .ta-marquee__track{
/* wordmarks are shorter -> a touch slower feels calmer */
--ta-mq-duration:48s;
}
/* reverse direction option (data-ta-speed="reverse") */
.ta-marquee[data-ta-speed="reverse"] .ta-marquee__track{
animation-direction:reverse;
}
.ta-marquee__set{
display:flex;
flex-wrap:nowrap;
align-items:center;
margin:0;
padding:0;
list-style:none;
flex:0 0 auto;
}
/* Pause-on-hover (class toggled by marquee.js) + pause when off-screen
(also toggled by JS via IntersectionObserver to save battery). */
.ta-marquee.is-paused .ta-marquee__track{
animation-play-state:paused;
}
@keyframes ta-marquee-x{
from{ transform:translate3d(0,0,0); }
to { transform:translate3d(-50%,0,0); }
}
/* =============================================================================
COMPONENT 1 — Restaurant photo-tile marquee
========================================================================== */
.ta-mq-restaurants{
position:relative;
padding:88px 0 96px;
background:var(--ta-bg);
overflow:hidden; /* clips the wide marquee track — must not be removed */
max-width:100%; /* belt-and-suspenders: section never stretches past viewport */
}
.ta-mq-rest-head{
max-width:760px;
margin:0 auto 44px;
padding:0 24px;
text-align:center;
}
.ta-mq-eyebrow{
margin:0 0 18px;
font-family:var(--ta-sans);
font-weight:600;
font-size:12px;
line-height:1;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--ta-gold);
}
.ta-mq-title{
margin:0;
font-family:var(--ta-serif);
font-weight:500;
font-size:clamp(26px, 4.2vw, 44px);
line-height:1.16;
letter-spacing:-.01em;
color:var(--ta-ink);
text-wrap:balance;
}
@media (max-width:560px){
.ta-mq-br{ display:none; }
}
/* tile strip duration: 19 tiles x 2 -> long, slow drift */
.ta-marquee--tiles .ta-marquee__track{ --ta-mq-duration:78s; }
.ta-marquee--tiles .ta-marquee__set{ gap:18px; padding-inline:9px; }
.ta-tile{
flex:0 0 auto;
width:clamp(150px, 17vw, 214px);
}
.ta-tile__inner{
position:relative;
display:block;
aspect-ratio:1 / 1;
border-radius:16px;
overflow:hidden;
text-decoration:none;
background:var(--ta-card);
border:1px solid var(--ta-hairline);
box-shadow:0 10px 30px -16px rgba(0,0,0,.7), 0 2px 8px -4px rgba(0,0,0,.5);
transform:translateZ(0); /* own compositing layer -> crisp hover, no repaint */
transition:transform .45s cubic-bezier(.2,.7,.2,1),
box-shadow .45s ease,
border-color .45s ease;
}
.ta-tile__img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:saturate(1) brightness(.92);
transition:filter .45s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
/* bottom gradient scrim so the name stays legible over any photo */
.ta-tile__inner::after{
content:"";
position:absolute;
inset:auto 0 0 0;
height:62%;
background:linear-gradient(to top,
rgba(5,1,13,.92) 0%,
rgba(5,1,13,.62) 38%,
rgba(5,1,13,0) 100%);
pointer-events:none;
}
.ta-tile__meta{
position:absolute;
left:14px;
right:14px;
bottom:13px;
z-index:2;
display:flex;
flex-direction:column;
gap:1px;
text-align:left;
}
.ta-tile__name{
font-family:var(--ta-sans);
font-weight:600;
font-size:14px;
line-height:1.2;
color:var(--ta-ink);
letter-spacing:-.005em;
text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.ta-tile__city{
font-family:var(--ta-sans);
font-weight:400;
font-size:11.5px;
line-height:1.3;
color:var(--ta-muted);
letter-spacing:.01em;
}
/* gold "WATCHING" status pill — hidden until hover */
.ta-tile__pill{
position:absolute;
top:11px;
left:11px;
z-index:3;
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 9px 5px 8px;
border-radius:999px;
font-family:var(--ta-sans);
font-weight:600;
font-size:9.5px;
line-height:1;
letter-spacing:.13em;
text-transform:uppercase;
color:#1a1300;
background:var(--ta-gold);
opacity:0;
transform:translateY(-4px) scale(.96);
transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
pointer-events:none;
}
.ta-tile__pill::before{
content:"";
width:5px;
height:5px;
border-radius:50%;
background:#1a1300;
box-shadow:0 0 0 0 rgba(26,19,0,.5);
animation:ta-tile-blip 1.6s ease-out infinite;
}
@keyframes ta-tile-blip{
0% { box-shadow:0 0 0 0 rgba(26,19,0,.55); }
70% { box-shadow:0 0 0 5px rgba(26,19,0,0); }
100% { box-shadow:0 0 0 0 rgba(26,19,0,0); }
}
/* hover state — neutral elevation lift, no gold ring */
.ta-tile__inner:hover,
.ta-tile__inner:focus-visible{
transform:translateY(-4px);
border-color:rgba(255,255,255,.18);
box-shadow:0 22px 44px -18px rgba(0,0,0,.85);
}
.ta-tile__inner:hover .ta-tile__img,
.ta-tile__inner:focus-visible .ta-tile__img{
filter:saturate(1.04) brightness(1.02);
transform:scale(1.045);
}
.ta-tile__inner:hover .ta-tile__pill,
.ta-tile__inner:focus-visible .ta-tile__pill{
opacity:1;
transform:translateY(0) scale(1);
}
/* =============================================================================
COMPONENT 2 — Platform wordmark strip
========================================================================== */
.ta-mq-platforms{
position:relative;
padding:18px 0 56px;
background:var(--ta-bg);
overflow:hidden;
max-width:100%;
}
.ta-words{ gap:0; }
.ta-word{
flex:0 0 auto;
position:relative;
display:inline-flex;
align-items:center;
padding:0 30px;
font-family:var(--ta-sans);
font-weight:600;
font-size:clamp(15px, 1.7vw, 19px);
line-height:1;
letter-spacing:.005em;
white-space:nowrap;
color:rgba(255,255,255,.55);
transition:color .3s ease;
}
/* gold separator dot between wordmarks */
.ta-word::after{
content:"";
position:absolute;
right:-3px;
top:50%;
width:5px;
height:5px;
margin-top:-2.5px;
border-radius:50%;
background:var(--ta-gold);
opacity:.85;
}
.ta-word:hover{ color:var(--ta-ink); }
.ta-mq-plat-caption{
margin:30px auto 0;
padding:0 24px;
text-align:center;
font-family:var(--ta-sans);
font-weight:400;
font-size:13px;
line-height:1.4;
letter-spacing:.02em;
color:var(--ta-muted);
}
/* =============================================================================
prefers-reduced-motion — freeze the auto-scroll, hand control to the user.
marquee.js also sets data-ta-static="true" + makes the viewport scrollable;
this block is the CSS belt-and-suspenders so it works even if JS never runs.
========================================================================== */
@media (prefers-reduced-motion: reduce){
.ta-marquee__track{
animation:none !important;
will-change:auto;
}
/* allow manual horizontal scroll of the (now static) strip */
.ta-marquee{
overflow-x:auto;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.ta-tile{ scroll-snap-align:start; }
/* hide the duplicate set so reduced-motion users don't scroll a doubled list */
.ta-marquee__set[aria-hidden="true"]{ display:none; }
.ta-tile__pill{
opacity:1;
transform:none;
transition:none;
}
.ta-tile__pill::before{ animation:none; }
}
/* JS-applied static mode (mirrors the media query for robustness across
browsers whose pointer interactions race the media query). */
.ta-marquee[data-ta-static="true"] .ta-marquee__track{
animation:none !important;
will-change:auto;
}
.ta-marquee[data-ta-static="true"]{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.ta-marquee[data-ta-static="true"] .ta-marquee__set[aria-hidden="true"]{
display:none;
}
/* ===== css/problem.css ===== */
/* =============================================================================
Table Alert — Sawada LP · PROBLEM / pain-point section.
The "Fully booked" card mirrors the LIVE MONITOR panel (css/live.css): same warm
near-black panel, mono topbar, row + pill-badge geometry and tokens — only the
badge is RED ("Fully booked") instead of green ("Monitoring"), and rows are name-
only (location/platform omitted). Headline = the unified page headline (serif 600,
clamp(24px,5.6vw,48px)). Fonts: Playfair serif + DM Sans + system mono (LP tokens).
Scroll-reveal is the shared global [data-ta-reveal] -> .ta-in contract (visuals.css)
— deliberately NOT redefined here.
========================================================================== */
.ta-problem{
/* panel-local palette — mirrors live.css's --lv-* (warm near-blacks), plus RED accent */
--pr-panel:#110f0d; --pr-top:#161513;
--pr-t1:#F5F0E8; --pr-t2:#A39E93; --pr-t3:#6B665E;
--pr-bdr:rgba(245,240,232,.05); --pr-bdr-m:rgba(245,240,232,.08); --pr-bdr-s:rgba(245,240,232,.11);
--pr-red:#EF4444; --pr-red-dim:rgba(239,68,68,.10); --pr-red-bdr:rgba(239,68,68,.24);
--pr-monof:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
background:var(--ta-bg); color:var(--pr-t1); font-family:var(--ta-sans);
/* FIRST section after the hero (no divider): reduced top padding so there's no big
black gap under the hero. Bottom keeps the normal section rhythm. */
padding:clamp(28px,3.4vw,48px) clamp(20px,5vw,40px) clamp(60px,7vw,96px);
}
.ta-problem__inner{ max-width:680px; margin:0 auto; text-align:center; }
/* eyebrow (matches the live eyebrow weight/size, brand gold, no pulse) */
.ta-problem__eyebrow{
font:500 11px/1 var(--ta-sans);
letter-spacing:.2em; text-transform:uppercase;
color:var(--ta-gold);
margin:0 0 18px;
}
/* headline — unified page headline size + weight */
.ta-problem__title{
font-family:var(--ta-serif); font-weight:600;
font-size:clamp(24px,5.6vw,48px);
line-height:1.1; letter-spacing:-.03em;
color:var(--pr-t1);
margin:0 0 clamp(32px,3.6vw,48px);
}
/* ---- "Fully booked" card — same shape as the live monitor panel ---- */
.ta-problem__panel{
max-width:480px; margin:0 auto;
background:var(--pr-panel); border:.5px solid var(--pr-bdr-s); border-radius:16px; overflow:hidden;
box-shadow:0 4px 32px rgba(0,0,0,.35), inset 0 0 0 .5px rgba(255,255,255,.02);
text-align:left;
}
.ta-problem__topbar{
display:flex; align-items:center;
padding:12px 24px;
border-bottom:.5px solid var(--pr-bdr-m); background:var(--pr-top);
}
.ta-problem__topbar-label{
font:500 11px/1 var(--pr-monof); letter-spacing:.12em; text-transform:uppercase;
color:var(--pr-t3);
}
.ta-problem__entries{ display:flex; flex-direction:column; }
.ta-problem__entry{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:18px 24px;
border-bottom:.5px solid var(--pr-bdr);
}
.ta-problem__entry:last-child{ border-bottom:none; }
.ta-problem__r-name{
font-family:var(--ta-serif); font-weight:500; font-size:19px; line-height:1.2;
color:var(--pr-t1); min-width:0;
}
/* RED counterpart of .ta-live__badge--m / --found */
.ta-problem__badge{
display:inline-flex; align-items:center; gap:5px;
padding:5px 12px; border-radius:100px;
font:500 10px/1 var(--pr-monof); letter-spacing:.08em; text-transform:uppercase;
color:var(--pr-red); background:var(--pr-red-dim); border:.5px solid var(--pr-red-bdr);
flex-shrink:0; white-space:nowrap;
}
.ta-problem__bd{ width:5px; height:5px; border-radius:50%; background:var(--pr-red); }
/* payoff — italic serif, muted (sits below the card). ONE line on desktop (fits inside
the 680px inner); wraps on mobile (see the media query). */
.ta-problem__payoff{
font-family:var(--ta-serif); font-weight:400; font-style:italic;
font-size:clamp(17px,2vw,20px); line-height:1.5;
color:var(--pr-t2);
max-width:none; white-space:nowrap; margin:clamp(32px,3.6vw,48px) auto 0;
}
@media (max-width:768px){
.ta-problem{ padding:clamp(60px,7vw,96px) 22px; }
.ta-problem__topbar{ padding:11px 18px; }
.ta-problem__entry{ padding:15px 18px; }
/* smaller name on mobile so the longest ("The French Laundry") + badge stays on ONE
line down to ~360px (was 17px → wrapped at 360). */
.ta-problem__r-name{ font-size:15px; }
/* mobile: allow the payoff to wrap again (one line is desktop-only) */
.ta-problem__payoff{ font-size:17px; white-space:normal; max-width:34ch; }
}
/* ===== css/coverage.css ===== */
/* =============================================================================
Table Alert — Sawada LP · COVERAGE ("What we track").
A command-palette search (SERVER-SIDE: debounced fetch to
/api/lp/restaurant-search) + a sleek near-black coverage table. Table card =
[square thumb][serif name + award]. The award lives INSIDE the cell body: on a
wide column it rides to the RIGHT of the name; when the column is too narrow it
auto-wraps to a line UNDER the name. Region header = [gold name][muted count]
(no flags). Desktop: a 5-column table (subgrid-aligned rows). Below 1080px each
region collapses into a single-open ACCORDION (Tokyo open). Tokens (--ta-*) from
overrides.css. Fonts: Playfair Display (serif) + DM Sans. Restaurant NAMES
(table cells AND search-result names) use the HEADLINE serif de-bolded —
Playfair 400 — sized so the longest name fits on one line at the narrowest
5-col width. Region headers use a de-bolded gold uppercase DM-Sans treatment.
All classes ta-cover- prefixed; no inline styles, no !important.
========================================================================== */
/* Shared name treatment — one var so table cells + search results never drift.
Playfair Display 400 (de-bolded headline serif), tight tracking. Size tuned
so the longest table NAME ("The French Laundry") fits on ONE line inside its
cell-body at the narrowest 5-column width (just above the accordion breakpoint
at 1080px). The award rides inside the cell body and auto-wraps under the name
when the column is too tight, so the name alone is the layout constraint. */
.ta-cover{
--ta-cover-name: 400 13px/1.3 var(--ta-serif);
--ta-cover-name-tracking: 0.002em;
background:var(--ta-bg); color:var(--ta-ink);
/* Coverage is now its OWN page (/restaurants), sitting directly under the nav, so the
top padding is reduced (no preceding hero to clear). Bottom keeps the section rhythm. */
padding:clamp(28px,3.4vw,48px) clamp(20px,5vw,40px) clamp(56px,7vw,88px);
font-family:var(--ta-sans);
}
@media (max-width:820px){ .ta-cover{ padding-top:clamp(18px,5vw,30px); } }
/* The header/search/works strip stay narrow + centred; only the coverage TABLE
widens (below) so each card has room for [thumb][name][award] on one line. */
.ta-cover__inner{ max-width:1280px; margin:0 auto; }
/* ---- section header (mirrors features.css eyebrow/title pattern) ---- */
.ta-cover__head{
text-align:center;
margin:0 auto clamp(28px,3.4vw,40px);
max-width:1000px; /* wide enough for the one-line title */
}
.ta-cover__eyebrow{
font:600 12px/1 var(--ta-sans);
letter-spacing:.22em; text-transform:uppercase;
color:var(--ta-gold); margin:0 0 18px;
}
.ta-cover__title{
font-family:var(--ta-serif); font-weight:600; /* unified headline weight (was 700) */
/* sized to stay on ONE line on desktop (>1080px); wraps on the accordion/mobile */
font-size:clamp(24px,5.6vw,48px); /* unified page headline size (= landing .sec-title-center) */
line-height:1.1; letter-spacing:-.03em;
margin:0; color:var(--ta-ink);
white-space:nowrap;
}
/* "possible" — final word in gold */
.ta-cover__possible{ color:var(--ta-gold); }
.ta-cover__subtitle{
font:400 clamp(14px,1.3vw,16px)/1.6 var(--ta-sans);
color:var(--ta-muted);
margin:18px auto 0; max-width:520px;
}
/* =============================================================================
"WORKS WITH" PLATFORM STRIP — muted label + hairline rounded pills.
========================================================================== */
.ta-cover__works{
display:flex; flex-direction:column; flex-wrap:wrap; align-items:center; justify-content:center;
gap:10px 12px;
margin:0 auto clamp(36px,4.4vw,52px);
max-width:760px;
}
.ta-cover__works-label{
font:600 11px/1 var(--ta-sans);
letter-spacing:.14em; text-transform:uppercase;
color:rgba(255,255,255,.42);
}
.ta-cover__works-list{
list-style:none; margin:0; padding:0;
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:8px;
}
.ta-cover__works-pill{
display:inline-flex; align-items:center;
padding:6px 13px;
border-radius:999px;
border:1px solid var(--ta-hairline);
background:rgba(255,255,255,.025);
font:500 12.5px/1 var(--ta-sans); letter-spacing:.005em;
color:var(--ta-muted);
transition:border-color .16s ease, color .16s ease, background-color .16s ease;
}
/* full-width zero-height spacers that force a row break in the flex-wrap list.
Desktop: only break A (after the 6th pill) → rows of 6 / 3.
Mobile: both breaks + `order` overrides → rows of 4 / 3 / 2. */
.ta-cover__works-break{ flex:0 0 100%; width:100%; height:0; margin:0; padding:0; border:0; list-style:none; }
.ta-cover__works-break--b{ display:none; } /* desktop: single break */
@media (max-width:820px){
/* tighten pills so the 4-wide first row (incl. OpenTable + SevenRooms) fits
a phone row down to ~360px. */
.ta-cover__works-list{ gap:6px; }
.ta-cover__works-pill{ padding:5px 9px; font-size:11.5px; }
/* mobile sequence: Resy OpenTable Tock SevenRooms | Pocket Omakase TableCheck | CatchTable Zenchef */
.ta-cover__works-list [data-p="resy"]{ order:1; }
.ta-cover__works-list [data-p="opentable"]{ order:2; }
.ta-cover__works-list [data-p="tock"]{ order:3; }
.ta-cover__works-list [data-p="sevenrooms"]{ order:4; }
.ta-cover__works-break--a{ order:5; }
.ta-cover__works-list [data-p="pocket"]{ order:6; }
.ta-cover__works-list [data-p="omakase"]{ order:7; }
.ta-cover__works-list [data-p="tablecheck"]{ order:8; }
.ta-cover__works-break--b{ order:9; display:block; }
.ta-cover__works-list [data-p="catchtable"]{ order:10; }
.ta-cover__works-list [data-p="zenchef"]{ order:11; }
}
/* =============================================================================
COMMAND-PALETTE SEARCH
Rounded hairline field with a leading glyph + a subtle ⌥K hint; a soft focus
ring (faint light halo + brighter border, never a heavy blue outline); a
bordered results popover that drops in beneath the field.
========================================================================== */
.ta-cover__search{
position:relative;
max-width:560px;
margin:0 auto clamp(36px,4.4vw,56px);
}
.ta-cover__search-field{
position:relative;
display:flex; align-items:center; gap:11px;
height:52px;
padding:0 14px 0 16px;
border-radius:14px;
border:1px solid var(--ta-hairline);
background:rgba(255,255,255,.035);
transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.ta-cover__search-field:hover{ border-color:rgba(255,255,255,.16); }
/* focus ring driven by JS adding .is-focused (so we can ring the wrapper, not
just the bare input) — refined linear/vercel halo */
.ta-cover__search.is-focused .ta-cover__search-field{
border-color:rgba(200,170,110,.55);
background:rgba(255,255,255,.05);
box-shadow:0 0 0 3px rgba(200,170,110,.12);
}
.ta-cover__search-ic{
flex:none; color:var(--ta-muted);
transition:color .18s ease;
}
.ta-cover__search.is-focused .ta-cover__search-ic{ color:var(--ta-gold); }
.ta-cover__search-input{
flex:1; min-width:0;
appearance:none; border:0; outline:0; background:transparent;
font:400 16px/1.2 var(--ta-sans);
letter-spacing:-.01em;
color:var(--ta-ink);
padding:0;
}
.ta-cover__search-input::placeholder{ color:rgba(255,255,255,.4); letter-spacing:0; }
.ta-cover__search-kbd{
flex:none;
display:inline-flex; align-items:center; justify-content:center;
min-width:34px; height:24px; padding:0 7px;
border-radius:7px;
border:1px solid var(--ta-hairline);
background:rgba(255,255,255,.04);
font:500 11px/1 var(--ta-sans); letter-spacing:.02em;
color:var(--ta-muted);
}
/* tiny inline spinner shown while a fetch is in flight (replaces the kbd hint) */
.ta-cover__search-spin{
flex:none; width:16px; height:16px;
border:2px solid rgba(255,255,255,.18);
border-top-color:var(--ta-gold);
border-radius:50%;
animation:taCoverSpin .7s linear infinite;
display:none;
}
.ta-cover__search.is-loading .ta-cover__search-spin{ display:block; }
.ta-cover__search.is-loading .ta-cover__search-kbd{ display:none; }
@keyframes taCoverSpin{ to{ transform:rotate(360deg); } }
/* ---- results popover ---- */
.ta-cover__results{
position:absolute; left:0; right:0; top:calc(100% + 8px);
z-index:20;
max-height:340px; overflow-y:auto; overscroll-behavior:contain;
padding:6px;
border-radius:14px;
border:1px solid var(--ta-hairline);
background:#0a0a0b; /* near-black popover, slightly above page */
box-shadow:0 18px 48px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
/* enter transition */
opacity:0; transform:translateY(-4px);
transition:opacity .16s ease, transform .16s ease;
}
.ta-cover__results:not([hidden]){ opacity:1; transform:translateY(0); }
/* slim, unobtrusive scrollbar (webkit) */
.ta-cover__results::-webkit-scrollbar{ width:8px; }
.ta-cover__results::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.12); border-radius:8px;
border:2px solid transparent; background-clip:padding-box;
}
/* ---- a single result row ---- */
.ta-cover__res{
display:flex; align-items:center; gap:11px;
padding:9px 12px;
border-radius:10px;
cursor:default;
transition:background-color .14s ease;
}
.ta-cover__res:hover,
.ta-cover__res.is-active{ background:rgba(255,255,255,.06); }
/* result thumb — always the placeholder (the search API has no images) */
.ta-cover__res-thumb{
position:relative; flex:none;
width:38px; height:38px;
border-radius:7px; overflow:hidden;
border:1px solid var(--ta-hairline);
display:grid; place-items:center;
background:
radial-gradient(120% 120% at 30% 20%, rgba(200,170,110,.16), transparent 60%),
linear-gradient(160deg, #1b1b1e, #0d0d0f);
}
.ta-cover__res-thumb span{
font-family:var(--ta-serif); font-weight:400; font-size:16px;
color:rgba(255,255,255,.55); user-select:none;
}
.ta-cover__res-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ta-cover__res-name{
/* MUST match .ta-cover__name exactly (font + size) — Playfair 400 */
font:var(--ta-cover-name); letter-spacing:var(--ta-cover-name-tracking);
color:var(--ta-ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* highlighted matched substring — gold, but stays regular weight (no bold) */
.ta-cover__res-name mark{
background:transparent; color:var(--ta-gold); font-weight:400;
}
.ta-cover__res-meta{
font:400 12px/1.3 var(--ta-sans); color:var(--ta-muted);
letter-spacing:0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* "Tracked" tick badge */
.ta-cover__res-tick{
flex:none;
display:inline-flex; align-items:center; gap:5px;
padding:4px 9px 4px 7px;
border-radius:999px;
border:1px solid rgba(200,170,110,.32);
background:rgba(200,170,110,.1);
font:600 10.5px/1 var(--ta-sans); letter-spacing:.04em; text-transform:uppercase;
color:var(--ta-gold);
white-space:nowrap;
}
.ta-cover__res-tick svg{ display:block; }
/* ---- empty state (query >=2, total 0). Less top gap — text sits high. ---- */
.ta-cover__empty{
padding:14px 16px;
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:12px 16px;
}
.ta-cover__empty-text{
flex:1 1 220px; min-width:0;
display:flex; flex-direction:column; gap:3px;
}
.ta-cover__empty-lead{
font:500 14px/1.45 var(--ta-sans); color:var(--ta-ink);
letter-spacing:-.01em;
margin:0;
}
.ta-cover__empty-sub{
font:400 13px/1.5 var(--ta-sans); color:var(--ta-muted);
margin:0;
}
.ta-cover__empty-btn{
appearance:none; cursor:pointer;
flex:none; white-space:nowrap;
display:inline-flex; align-items:center; gap:6px;
padding:8px 14px;
border-radius:999px;
border:1px solid rgba(200,170,110,.4);
background:rgba(200,170,110,.1);
font:600 13px/1 var(--ta-sans); letter-spacing:.005em;
color:var(--ta-gold);
transition:background-color .16s ease, border-color .16s ease, gap .16s ease;
}
.ta-cover__empty-btn:hover{
background:rgba(200,170,110,.18);
border-color:rgba(200,170,110,.6);
gap:9px;
}
.ta-cover__empty-btn svg{ display:block; }
/* =============================================================================
REQUEST MODAL — "Ask us to add it"
Centred, near-black sheet over a dim backdrop; linear/vercel-grade.
========================================================================== */
.ta-cover__modal{
position:fixed; inset:0; z-index:1000;
display:flex; align-items:center; justify-content:center;
padding:20px;
background:rgba(0,0,0,.66);
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
opacity:0;
transition:opacity .2s ease;
}
.ta-cover__modal.is-open{ opacity:1; }
.ta-cover__modal[hidden]{ display:none; }
.ta-cover__dialog{
width:100%; max-width:500px; /* wider so the sub fits on one line on desktop */
box-sizing:border-box;
padding:26px 26px 24px;
border-radius:18px;
border:1px solid var(--ta-hairline);
background:#0b0b0c;
box-shadow:0 28px 70px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.5);
transform:translateY(8px) scale(.985);
transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.ta-cover__modal.is-open .ta-cover__dialog{ transform:translateY(0) scale(1); }
.ta-cover__dialog-close{
position:absolute; top:14px; right:14px;
appearance:none; cursor:pointer;
width:32px; height:32px;
display:inline-flex; align-items:center; justify-content:center;
border:0; border-radius:9px;
background:transparent; color:var(--ta-muted);
transition:background-color .16s ease, color .16s ease;
}
.ta-cover__dialog{ position:relative; }
.ta-cover__dialog-close:hover{ background:rgba(255,255,255,.06); color:var(--ta-ink); }
.ta-cover__dialog-title{
font-family:var(--ta-serif); font-weight:700;
font-size:22px; line-height:1.2; letter-spacing:-.01em;
color:var(--ta-ink);
margin:0 28px 6px 0;
}
.ta-cover__dialog-title b{ color:var(--ta-gold); font-weight:700; }
.ta-cover__dialog-sub{
font:400 13.5px/1.5 var(--ta-sans); color:var(--ta-muted);
margin:0 0 18px;
}
.ta-cover__form{ display:flex; flex-direction:column; gap:10px; }
.ta-cover__input{
width:100%; box-sizing:border-box;
height:46px; padding:0 14px;
appearance:none;
border-radius:11px;
border:1px solid var(--ta-hairline);
background:rgba(255,255,255,.04);
font:400 15px/1.2 var(--ta-sans); letter-spacing:-.005em;
color:var(--ta-ink);
outline:0;
transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.ta-cover__input::placeholder{ color:rgba(255,255,255,.38); }
.ta-cover__input:focus{
border-color:rgba(200,170,110,.55);
background:rgba(255,255,255,.055);
box-shadow:0 0 0 3px rgba(200,170,110,.12);
}
.ta-cover__form.has-error .ta-cover__input{
border-color:rgba(255,107,107,.6);
box-shadow:0 0 0 3px rgba(255,107,107,.1);
}
.ta-cover__error{
font:400 12.5px/1.4 var(--ta-sans); color:#ff8585;
margin:0; min-height:0;
display:none;
}
.ta-cover__form.has-error .ta-cover__error{ display:block; }
.ta-cover__submit{
appearance:none; cursor:pointer;
margin-top:4px;
height:46px; padding:0 18px;
border:0; border-radius:11px;
background:var(--ta-gold);
color:#1a1407;
font:600 14.5px/1 var(--ta-sans); letter-spacing:.005em;
transition:filter .16s ease, opacity .16s ease;
}
.ta-cover__submit:hover{ filter:brightness(1.06); }
.ta-cover__submit:disabled{ opacity:.6; cursor:default; }
/* success state replaces the form body. NOTE: an explicit display value would
defeat the [hidden] attribute (equal specificity, author wins), so guard it. */
.ta-cover__success[hidden]{ display:none; }
.ta-cover__success{
display:flex; flex-direction:column; align-items:center; text-align:center;
gap:10px; padding:6px 0 2px;
}
.ta-cover__success-ic{
width:46px; height:46px; border-radius:50%;
display:grid; place-items:center;
background:rgba(200,170,110,.14);
border:1px solid rgba(200,170,110,.4);
color:var(--ta-gold);
}
.ta-cover__success-ic svg{ display:block; }
.ta-cover__success-msg{
font:500 15px/1.5 var(--ta-sans); color:var(--ta-ink);
letter-spacing:-.005em; margin:0;
}
/* =============================================================================
MARQUEE TABLE — desktop 5-column, subgrid row alignment
Subgrid keeps all 5 columns sharing the SAME 4 row tracks (header + 3 cells),
so the hairline dividers line up even when an award wraps under a name.
========================================================================== */
.ta-cover__table{
display:grid;
grid-template-columns:repeat(5, 1fr);
grid-template-rows:auto repeat(3, auto);
/* widen beyond the 1280 inner container so each card fits [thumb][name][award]
on one line — "The French Laundry" + a 3-star strip is the tightest pair.
Stays within viewport via the section's clamp() side padding. */
width:min(1420px, 100%);
margin-inline:auto;
border-radius:16px;
border:1px solid var(--ta-hairline);
background:var(--ta-card);
overflow:hidden; /* clip column hover fills to the rounded corners */
}
/* ---- one region column: spans all 4 rows + inherits their heights ---- */
.ta-cover__col{
display:grid;
grid-template-rows:subgrid;
grid-row:1 / -1;
min-width:0; /* let the award wrap, never force overflow */
border-left:1px solid var(--ta-hairline);
}
.ta-cover__col:first-child{ border-left:0; }
/* ---- column header (region name + count). It IS a