/* ═══════════════════════════════════════════════════════════════════════ YallaPOS — single-page site. Brand hand ported from the main site (tokens, fonts, indigo accent, spec-tile blue stagger + hover). Custom simplified nav + footer. ONE GSAP/Lenis driver. Native hero word-rotator, per-section visual panels, trimmed type. Resting states complete. ═══════════════════════════════════════════════════════════════════════ */ :root{ --ink-0:#0c0d11; --ink-1:#1d1f25; --ink-2:#21252e; --ink:#f5f4f2; --ink-dim:#b4b0a8; --ink-mute:#807b73; --line:rgba(245,242,236,.10); --line-2:rgba(245,242,236,.17); --bone:#efece4; --bone-ink:#17181a; --bone-dim:#5d5a54; --bone-line:rgba(20,20,18,.14); --accent:#5B73F0; --accent-soft:#8ea0f4; --mint:#10B981; --amber:#F59E0B; --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.22,1,.36,1); --maxw:1140px; --pad:clamp(20px,5vw,40px); --navh:68px; /* Display face for the rotating hero word ONLY. Swap by changing this token (each candidate is self-hosted in ./fonts/). Default: Bricolage Grotesque. */ --rotor-font:'Bricolage Grotesque'; --rotor-weight:700; } /* Self-hosted display candidates (no CDN at runtime). Latin woff2, swap subset. */ @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/bricolage.woff2') format('woff2')} @font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/fraunces.woff2') format('woff2')} @font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/unbounded.woff2') format('woff2')} *{box-sizing:border-box} /* Lenis drives scroll frame-by-frame; native CSS smooth scroll (set on in base.css) re-animates toward each per-frame target and fights it — the page freezes then snaps. Lenis REQUIRES scroll-behavior:auto. Anchor clicks still smooth-scroll via lenis.scrollTo (JS), so this changes nothing for clicks. */ html{scroll-behavior:auto} body{margin:0;background:var(--ink-0);color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer} ::selection{background:var(--accent);color:#fff} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:1} /* ── Nav — transparent, SECTION-ADAPTIVE (Square-style) ────────────────── No solid fill: the header floats over the section beneath it. A foreground token (--nav-fg) flips ink↔white per the tone of the section under the bar (class toggled from app.js, off each section's own s-dark/s-cream). Base values = on-LIGHT so JS-off / the cream hero are correct by default. */ .nav{position:fixed;top:0;inset-inline:0;z-index:100;height:var(--navh);display:flex;align-items:center; background:transparent;border-bottom:1px solid transparent;transform:translateZ(0); --nav-fg:#17181a; --nav-fg-dim:rgba(23,24,26,.64); --nav-line:rgba(20,20,18,.16); --nav-hover:rgba(20,20,18,.05)} .nav--on-dark{ --nav-fg:#f6f5f3; --nav-fg-dim:rgba(246,245,243,.74); --nav-line:rgba(245,242,236,.20); --nav-hover:rgba(255,255,255,.06)} /* scrolled backdrop — the JS has always toggled .scrolled; without this rule the bar stayed fully transparent mid-page and its controls collided with section content. Tone-matched to the adaptive nav (light on cream, dark on ink). */ .nav{transition:background-color .3s ease,border-color .3s ease} .nav.scrolled{background:rgba(246,245,243,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--nav-line)} .nav.scrolled.nav--on-dark{background:rgba(10,12,18,.78)} /* tone cross-fade ONLY on the few elements that recolor (no universal * rule → smaller style-recalc scope; the swap is event-driven, not per-frame). */ .nav-logo-img,.nav-links a,.nav-lang,.nav-burger span{transition:color .3s ease,border-color .3s ease,background-color .3s ease,filter .3s ease} /* 3-ZONE grid: left(logo) | center(links) | right(lang+book). The 1fr side columns are always equal, so the center column sits dead-centre of the nav axis regardless of how wide either side cluster is → links optically centred, neither cluster pulls centre off-axis. */ .nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:100%} .nav-right{justify-self:end} /* Real brand mark — self-hosted transparent PNG (the actual Logo.png, cropped). ONE asset, two tone variants by CSS recolor (not redrawn): natural dark-navy ink on cream sections; filtered to white on dark sections. */ .nav-logo{display:inline-flex;align-items:center;justify-self:start;text-decoration:none} .nav-logo-img{height:40px;width:auto;display:block;filter:brightness(1) invert(0)} .nav--on-dark .nav-logo-img{filter:brightness(0) invert(1)} .nav-links{display:flex;align-items:center;gap:4px} .nav-links a{padding:8px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--nav-fg-dim);white-space:nowrap} .nav-links a:hover{color:var(--nav-fg);background:var(--nav-hover)} .nav-right{display:flex;align-items:center;gap:10px} .nav-lang{font-family:'Cairo','Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--nav-fg-dim);padding:8px 12px;border-radius:9px;border:1px solid var(--nav-line)} .nav-lang:hover{color:var(--nav-fg);border-color:var(--nav-fg)} .nav-burger{display:none;flex-direction:column;gap:5px;padding:8px} .nav-burger span{width:20px;height:2px;background:var(--nav-fg);border-radius:2px;transition:transform .25s,opacity .25s} .nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-burger.open span:nth-child(2){opacity:0} .nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ── Buttons (+ hover polish) ───────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:12px;font-weight:600;font-size:14.5px;letter-spacing:-.01em;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .25s,border-color .25s,color .25s} .btn svg{width:16px;height:16px;transition:transform .3s var(--ease-out)} .btn:hover svg{transform:translateX(3px)} .btn--primary{background:var(--accent);color:#fff;box-shadow:0 8px 24px -10px rgba(91,115,240,.65)} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(91,115,240,.9)} .btn--ghost{border-color:var(--line-2);color:var(--ink);background:transparent} .btn--ghost:hover{border-color:rgba(91,115,240,.5);background:rgba(91,115,240,.08)} .s-cream .btn--ghost{border-color:var(--bone-line);color:var(--bone-ink)} .s-cream .btn--ghost:hover{border-color:rgba(91,115,240,.5);background:rgba(91,115,240,.07)} .btn--lg{padding:15px 26px;font-size:15.5px} /* ── Type (TRIMMED) ─────────────────────────────────────────────────── */ .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);opacity:.7;flex:none} h1,h2{letter-spacing:-.03em;line-height:1.06;font-weight:800;margin:0} .display{font-size:clamp(34px,5.2vw,62px);letter-spacing:-.035em;line-height:1.04;color:var(--ink)} .h2{font-size:clamp(23px,2.9vw,37px);letter-spacing:-.025em;color:var(--ink)} .s-cream .h2,.s-cream .display{color:var(--bone-ink)} .lead{font-size:clamp(15.5px,1.35vw,18px);line-height:1.55;color:var(--ink-dim);max-width:46ch;margin:0} .s-cream .lead{color:var(--bone-dim)} .center{text-align:center;margin-inline:auto}.center .lead{margin-inline:auto} /* ── Section rhythm + full-screen products ──────────────────────────── */ .s-dark{background:var(--ink-0);color:var(--ink)} .s-cream{background:var(--bone);color:var(--bone-ink)} .product{min-height:100vh;display:flex;align-items:center;padding-block:clamp(80px,11vh,112px);position:relative} /* §01 is now dark like §02 below it — a hairline seam keeps them distinct */ #waiter{border-bottom:1px solid var(--line)} .section{padding-block:clamp(60px,9vw,108px);position:relative} /* ── Hero — centered giant rotating word ────────────────────────────── */ /* LIGHT hero: cream surface (same --bone as the alternating sections). Bottom hairline + shelf-shadow gives a clear seam to §01 (also cream → same token, RGB delta 0 by design; the divider is what keeps them visually distinct). */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center; padding-top:var(--navh);padding-block:clamp(90px,12vh,120px);overflow:clip;border-bottom:1px solid var(--bone-line)} .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(60% 50% at 50% 20%,rgba(255,255,255,.6),transparent 60%),radial-gradient(46% 40% at 50% 88%,rgba(91,115,240,.06),transparent 64%)} .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:0;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(20,20,18,.055))} /* Cursor-reactive dot field (single , JS-drawn). Masked fade-to-CENTRE so the headline area stays clean; never intercepts clicks (pointer-events:none, below content). JS-off → empty canvas (hero still perfect). */ .hero-dots{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none; /* JS-off / pre-paint fallback: a static masked dot grid so the base field is visible even without JS. Once the canvas draws, html.js-canvas drops this. */ background-image:radial-gradient(rgba(23,24,26,.34) 1.3px,transparent 1.5px); background-size:34px 34px;background-position:center; -webkit-mask:radial-gradient(ellipse 60% 56% at 50% 46%,transparent 0%,transparent 33%,#000 80%); mask:radial-gradient(ellipse 60% 56% at 50% 46%,transparent 0%,transparent 33%,#000 80%)} html.js-canvas .hero-dots{background-image:none} /* Word-synced accent glow — sits behind/below the rotating word, above the dots. Soft-masked accent blob (no filter); the rotor timeline animates opacity/scale/ background only. Static accent under reduced-motion / JS-off. */ .hero-glow{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none} .hero-glow-core{width:min(560px,80vw);height:250px;margin-top:64px;border-radius:50%; background:var(--accent);opacity:.4;will-change:transform,opacity;transform:translateZ(0); -webkit-mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.5) 44%,transparent 72%); mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.5) 44%,transparent 72%)} @media(prefers-reduced-motion:reduce){ .hero-glow-core{opacity:.34} } .hero-inner{position:relative;z-index:3;width:100%;max-width:min(1040px,94vw);margin-inline:auto; display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.6vw,30px)} .hero-inner .eyebrow{justify-content:center} /* the GIANT two-line headline; both lines share the clamp; the longest product name sets the reserved slot so swaps never wrap or reflow */ .hero-h1{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.06;color:var(--bone-ink); font-size:clamp(1.7rem,6vw,4.25rem)} /* the rotating slot: a fixed-height window over a vertical STACK of word spans. The list slides up one word per beat (app.js). overflow:hidden shows one word; the soft mask fades words at the top/bottom edges as they slide through. */ .rotor{display:inline-block;height:1.18em;line-height:1.18em;overflow:hidden;vertical-align:bottom;text-align:center; -webkit-mask:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);mask:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent)} .rotor-list{display:flex;flex-direction:column;will-change:transform} /* rotating word: ACCENT + the self-hosted display face (this element ONLY). */ .rotor-word{display:block;height:1.18em;line-height:1.18em;color:var(--accent);white-space:nowrap; font-family:var(--rotor-font),'Inter',sans-serif;font-weight:var(--rotor-weight,700);letter-spacing:-.01em} /* ── Hero BESPOKE micro-demos — 5 original live scenes (one per word), stacked in ONE fixed frame directly below the rotating word and PLAYED by the same timeline. Shared frame language: product-surface card, header strip (status dot + mono context tag), hairline geometry, ink at low opacity; accent only for the action element, mint/amber only for status. CSS defaults below are each demo's SETTLED end-state → JS-off / reduced-motion = complete stills. Fixed slot → zero reflow, CLS 0. */ .hero-echo{position:relative;width:260px;height:88px;flex:none;border:1px solid var(--bone-line); background:#fbfaf7;border-radius:16px;box-shadow:0 16px 34px -20px rgba(20,20,18,.28);overflow:hidden} .hd{position:absolute;inset:0;padding:11px 16px 12px;display:flex;flex-direction:column;gap:6px;opacity:0} .hd-waiter{opacity:1} /* resting/static pair = first word */ /* shared bits */ .hd-top{display:flex;align-items:center;gap:6px;margin-bottom:1px} .hd-dot{width:5px;height:5px;border-radius:50%;background:var(--mint);flex:none} .hd-tag{font-family:'JetBrains Mono',monospace;font-size:7.5px;font-weight:700;letter-spacing:.14em;color:rgba(23,24,26,.42);white-space:nowrap} .hd-bar{display:inline-block;height:5px;border-radius:3px;background:rgba(23,24,26,.15)} .hd-num{font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;color:rgba(23,24,26,.5)} .hd-row{display:flex;align-items:center;justify-content:space-between;gap:8px} .hd-flex{display:flex;align-items:center;gap:14px;flex:1;min-height:0} .hd-col{display:flex;flex-direction:column;gap:6px;flex:1;justify-content:center} .hd-col-num{align-items:flex-start;gap:2px} /* 01 waiter — rows land, then the FIRE pill sweeps + confirms */ .hd-fire{position:relative;height:16px;border:1px solid var(--bone-line);border-radius:9px;overflow:hidden;margin-top:1px} .hd-fire-fill{position:absolute;inset:0;background:var(--accent);opacity:.92;transform-origin:left center} html[dir="rtl"] .hd-fire-fill{transform-origin:right center} .hd-fire-lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:'JetBrains Mono',monospace;font-size:7px;font-weight:700;letter-spacing:.12em;color:#fff} /* 02 qr — mark + sweeping scanline → menu rows → paid chip */ .hd-qr-mark{position:relative;width:30px;height:30px;flex:none;color:rgba(23,24,26,.55);overflow:hidden;border-radius:4px} .hd-scan{position:absolute;inset-inline:0;top:0;height:2px;border-radius:1px;opacity:0; background:linear-gradient(90deg,transparent,var(--accent),transparent)} .hd-paid{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:700;color:rgba(23,24,26,.6)} .hd-tickchip{width:12px;height:12px;border-radius:50%;background:var(--mint);color:#fff;font-size:7px;display:grid;place-items:center;flex:none;font-style:normal} /* 03 dashboard — bars + live figure */ .hd-bars{display:flex;align-items:flex-end;gap:4px;height:38px;flex:none} .hd-bars i{width:7px;border-radius:2.5px 2.5px 1px 1px;background:rgba(23,24,26,.15);transform-origin:bottom center} .hd-bars i.hi{background:rgba(91,115,240,.6)} .hd-fig{font-family:'JetBrains Mono',monospace;font-size:13.5px;font-weight:800;letter-spacing:-.02em;color:rgba(23,24,26,.78)} .hd-up{font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;color:var(--mint)} .hd-sublbl{font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(23,24,26,.4)} /* 04 alfredo — question bubble → typing → answer */ .hd-ai-q{align-self:flex-end;font-family:'JetBrains Mono',monospace;font-size:8px;color:rgba(23,24,26,.55); background:rgba(23,24,26,.06);border:1px solid var(--bone-line);border-radius:8px;border-bottom-right-radius:3px;padding:3px 8px} .hd-ai-arow{position:relative;display:flex;align-items:center;gap:6px} .hd-av{width:13px;height:13px;border-radius:4.5px;background:linear-gradient(135deg,#b3a6ff,#7c63f0);flex:none} .hd-ai-a{font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:700;color:rgba(23,24,26,.7); background:rgba(91,115,240,.1);border:1px solid rgba(91,115,240,.26);border-radius:8px;border-bottom-left-radius:3px;padding:3px 8px} .hd-ai-dots{position:absolute;inset-inline-start:19px;display:inline-flex;gap:3px;opacity:0} .hd-ai-dots i{width:4px;height:4px;border-radius:50%;background:rgba(91,115,240,.55)} /* 05 reservations — floor cells pop, bookings land amber */ .hd-grid{display:grid;grid-template-columns:repeat(3,24px);gap:5px;flex:none} .hd-grid i{height:14px;border-radius:4px;border:1px solid rgba(23,24,26,.18)} .hd-grid i[data-f-book]{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.12)} @media(max-width:560px){ .hero-echo{width:212px;height:76px} .hd{padding:9px 12px 10px;gap:5px} .hd-bars{height:30px}.hd-flex{gap:10px}.hd-grid{grid-template-columns:repeat(3,20px)}.hd-grid i{height:12px} } .hero-sub{margin:0;font-size:clamp(15.5px,1.45vw,18.5px);line-height:1.55;color:var(--bone-dim);max-width:42rem} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .proof{display:flex;flex-wrap:wrap;gap:9px;justify-content:center} .proof span{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-dim);border:1px solid var(--bone-line);background:rgba(20,20,18,.03);padding:7px 12px;border-radius:100px} .proof span i{width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none} /* hero entrance hidden only when motion armed (html.anim); resting visible */ html.anim .hero-rise{opacity:0;transform:translateY(22px)} /* ── Device mock + leader callouts ──────────────────────────────────── */ .media-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:330px} .media-stage::before{content:"";position:absolute;width:72%;height:72%;border-radius:50%;background:radial-gradient(circle,rgba(91,115,240,.20),transparent 66%);filter:blur(36px);z-index:0} .device{width:238px;background:linear-gradient(160deg,#222a44,#0e1326);border-radius:34px;padding:11px;position:relative;z-index:1;box-shadow:0 40px 80px -28px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12)} /* device on a CREAM section — a heavy black shadow reads harsh on light; soften + warm it and add a hairline ring so the bezel still lifts cleanly off the surface (screen itself is unchanged — it's already a fixed light UI). */ .s-cream .device{box-shadow:0 26px 54px -28px rgba(20,20,18,.30),0 0 0 1px rgba(20,20,18,.05),inset 0 1px 0 rgba(255,255,255,.12)} .device::after{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:52px;height:5px;border-radius:3px;background:rgba(255,255,255,.16)} .screen{position:relative;background:#f7f8fb;border-radius:25px;overflow:hidden;color:#0f1424;aspect-ratio:9/18;display:flex;flex-direction:column} /* ^ position:relative so screen-inset overlays (e.g. the §02 pay sheet) contain + CLIP to the screen — nothing may spill past the device frame */ .sc-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 6px;font-size:11px;font-weight:600;color:#3a4156} .sc-head{display:flex;align-items:center;justify-content:space-between;padding:6px 15px 12px;border-bottom:1px solid #e7e9f0} .sc-table{font-weight:800;letter-spacing:-.02em;font-size:15px}.sc-sub{font-size:10.5px;color:#8890a6} .sc-live{display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:#0f9d6b} .sc-live i{width:6px;height:6px;border-radius:50%;background:#10b981} .sc-body{padding:13px 15px;display:flex;flex-direction:column;gap:9px;flex:1} .sc-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px} .sc-row .q{font-family:'JetBrains Mono',monospace;color:#9aa1b8;margin-inline-end:7px}.sc-row b{font-family:'JetBrains Mono',monospace;font-weight:700} .sc-note{font-size:10.5px;color:#5b73f0;margin:-4px 0 2px 18px} .sc-tot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:11px;border-top:1px dashed #d4d8e4;font-weight:800} .sc-cta{margin-top:11px;background:var(--accent);color:#fff;text-align:center;padding:11px;border-radius:13px;font-weight:700;font-size:13px} .callout{position:absolute;z-index:3;display:flex;align-items:center;pointer-events:none} .callout-line{height:1px;width:34px;background:var(--accent);opacity:.75} .callout-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(91,115,240,.6);flex:none} .callout-pill{font-family:'JetBrains Mono',monospace;font-size:10px;white-space:nowrap;color:var(--ink);background:rgba(18,22,40,.9);border:1px solid var(--line-2);padding:4px 9px;border-radius:6px} .callout--a{top:18%;inset-inline-start:-12%} .callout--b{bottom:22%;inset-inline-end:-13%;flex-direction:row-reverse} @media(max-width:980px){.callout{display:none}} /* ── Reusable VISUAL PANEL (per-section), same card language ────────── */ .viz{position:relative;z-index:1;border-radius:22px;padding:16px;width:100%;max-width:380px;margin-inline:auto; border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); box-shadow:0 34px 70px -36px rgba(0,0,0,.7)} .s-cream .viz{background:#fbfaf7;border-color:var(--bone-line);box-shadow:0 30px 60px -36px rgba(20,20,18,.32);color:var(--bone-ink)} .viz-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .viz-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)} .s-cream .viz-tag{color:var(--bone-dim)} .viz-live{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--mint)} .viz-live i{width:6px;height:6px;border-radius:50%;background:var(--mint)} .viz .num{font-family:'JetBrains Mono',monospace;font-weight:700} /* ticket (waiter terminal) */ .ticket-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;padding:7px 0;border-bottom:1px dashed var(--bone-line)} .s-dark .ticket-row{border-bottom-color:var(--line)} .ticket-row .nm{display:flex;gap:8px}.ticket-row .q{font-family:'JetBrains Mono',monospace;color:var(--bone-dim)} .s-dark .ticket-row .q{color:var(--ink-mute)} .ticket-mod{font-size:11px;color:var(--accent);margin:2px 0 4px 22px} .ticket-tot{display:flex;justify-content:space-between;align-items:center;padding-top:11px;margin-top:6px;font-weight:800;font-size:15px} .chip{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.08em;padding:3px 8px;border-radius:7px;background:rgba(91,115,240,.14);color:var(--accent)} /* qr phone (reuses .device) — LOOPING scan → menu → select → pay → sheet → paid flow. Default (unconditional) CSS shows the COMPLETE resting story — items already picked, total shown, sheet docked showing "Paid" — so JS-off / reduced-motion / pre-scroll all look finished. The GSAP loop (app.js) only overrides these via gsap.set()/tweens once §02 is in view + motion is on. */ .qr-stage{position:relative;flex:1;overflow:hidden} .qr-menu{display:flex;flex-direction:column;gap:7px;padding:10px 13px;flex:1} .qr-pay{margin:6px 13px 13px;background:var(--accent);color:#fff;border-radius:11px;text-align:center;padding:10px;font-weight:700;font-size:12.5px;transform-origin:center} /* state 1 — scan (hidden by default; JS reveals it as the loop's opening beat) */ .qr-scanview{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;background:#f7f8fb} .qr-code{position:relative;color:#1b2032;width:76px;height:76px;overflow:visible;border-radius:8px} .qr-code svg{display:block} .qr-scanline{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 8px rgba(91,115,240,.8)} 50%{top:100%}90%{opacity:1}100%{top:100%;opacity:0}} .qr-scan-check{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--mint);display:grid;place-items:center;opacity:0;transform:scale(.6)} .qr-scan-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:#8890a6} /* states 2–4 — menu + running cart (visible by default = the resting story) */ .qr-cartview{position:absolute;inset:0;display:flex;flex-direction:column;opacity:1} /* stylized pay sheet — ORIGINAL design (no Apple wordmark/logo/button). Docked + showing "Paid" by default; JS slides it down off-screen to open the loop, then back up mid-cycle to replay the pay moment. */ .qr-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;background:#fff;border-radius:16px 16px 0 0; box-shadow:0 -14px 34px -18px rgba(15,20,36,.28);padding:9px 15px 14px;text-align:center;transform:translateY(0)} .qr-sheet-handle{width:30px;height:4px;border-radius:3px;background:#dfe2ea;margin:0 auto 8px} .qr-sheet-amt{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:19px;color:#0f1424;margin-bottom:6px} .qr-sheet-row{display:flex;align-items:center;justify-content:center;gap:7px;font-size:10.5px;color:#5b6272;padding:7px 0;border-top:1px dashed #e7e9f0;border-bottom:1px dashed #e7e9f0;margin-bottom:9px} .qr-sheet-row-icon{color:#8890a6;display:flex} .qr-sheet-confirm{display:flex;flex-direction:column;align-items:center;gap:5px;opacity:1} .qr-face{color:var(--accent);position:relative;width:46px;height:46px} .qr-face-track{fill:none;stroke:rgba(91,115,240,.16)} .qr-face-ring{fill:none;stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:119.4;stroke-dashoffset:119.4} .qr-sheet-confirm-label{font-size:10.5px;font-weight:700;color:#5b6272} /* confirm / processing / done are 3 STACKED sub-states of one fixed-height slot (transform/opacity only — same pattern as other section swaps on this page) */ .qr-sheet-status{position:relative;height:70px} .qr-sheet-confirm{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;opacity:0} .qr-sheet-processing{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:600;color:#5b6272;opacity:0} .qr-dots{display:inline-flex;gap:3px} .qr-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5} html.anim .qr-dots i{animation:qr-dot 1s ease-in-out infinite} html.anim .qr-dots i:nth-child(2){animation-delay:.15s} html.anim .qr-dots i:nth-child(3){animation-delay:.3s} @keyframes qr-dot{0%,100%{opacity:.35}50%{opacity:1}} .qr-sheet-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:13px;color:#0c7d55;opacity:1} .qr-check{width:17px;height:17px;border-radius:50%;background:var(--mint);display:grid;place-items:center;flex:none} /* one-pager gating: pause decorative CSS keyframes when §02 is off-screen / tab hidden */ .qr-paused,.qr-paused *{animation-play-state:paused !important} /* §02 ONLY — generous, intentional vertical rhythm (more air eyebrow→headline→ subhead→tiles; bigger tile gaps + inner padding). Scoped to #qr; no other section's spacing changes. */ #qr .split-copy .eyebrow{margin-bottom:20px} #qr .split-copy .lead{margin-top:18px} #qr .spec-grid{gap:16px;margin-top:32px} #qr .spec{padding:20px 18px} /* size the phone as a peer to the text column (same approach used on §01) */ #qr .split-viz .device{margin-inline:auto;width:310px;aspect-ratio:9/19.5;display:flex;flex-direction:column;transform:scale(0.72) rotate(-2deg);transform-origin:center center} #qr .split-viz .screen{aspect-ratio:auto;flex:1;min-height:0} @media(max-width:560px){#qr .split-viz .device{transform:scale(0.6) rotate(-2deg)}} /* dashboard card */ .dash-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:8px} .dash-big{font-family:'JetBrains Mono',monospace;font-size:clamp(24px,3vw,30px);font-weight:700;letter-spacing:-.02em} .dash-up{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--mint)} .bars{display:flex;align-items:flex-end;gap:6px;height:74px;margin:8px 0 12px} .bars span{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--accent-soft),rgba(91,115,240,.18));transform-origin:bottom} .bars span.hi{background:linear-gradient(180deg,#5ee9b5,rgba(16,185,129,.2))} .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px} .kpi{border:1px solid var(--bone-line);border-radius:11px;padding:10px 12px} .s-dark .kpi{border-color:var(--line)} .kpi b{display:block;font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700} .kpi span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim)} .s-dark .kpi span{color:var(--ink-mute)} /* alfredo chat */ .chat{display:flex;flex-direction:column;gap:10px} .bubble{max-width:84%;padding:11px 13px;font-size:13px;line-height:1.45;border-radius:14px} .bubble.q{align-self:flex-end;background:rgba(255,255,255,.06);border:1px solid var(--line);border-bottom-right-radius:4px} .s-cream .bubble.q{background:rgba(20,20,18,.05);border-color:var(--bone-line)} .bubble.a{align-self:flex-start;display:flex;gap:9px;background:transparent;padding:0;max-width:90%} .bubble.a .av{flex:none;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#b3a6ff,#7c63f0);display:grid;place-items:center} .bubble.a .av svg{width:15px;height:15px} .bubble.a .txt{background:rgba(91,115,240,.10);border:1px solid rgba(91,115,240,.24);border-radius:14px;border-bottom-left-radius:4px;padding:11px 13px} .bubble.a .txt b{color:var(--accent)} /* reservations floor map (STATUS colors only) */ .floor{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .tbl{aspect-ratio:1.25;border-radius:11px;border:1px solid var(--bone-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:'JetBrains Mono',monospace;font-size:10px} .s-dark .tbl{border-color:var(--line)} .tbl b{font-family:'Inter',sans-serif;font-weight:700;font-size:13px} .tbl.open{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.10);color:#0c8f63} .tbl.seated{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.12);color:#b9770b} .tbl.booked{border-color:rgba(245,158,11,.22);background:rgba(245,158,11,.05);color:var(--bone-dim)} .s-dark .tbl.booked{color:var(--ink-mute)} .floor-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--bone-dim)} .s-dark .floor-legend{color:var(--ink-mute)} .floor-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-inline-end:6px;vertical-align:middle} /* ── Visual fidelity polish (real product-surface feel) ─────────────── */ .viz{padding:18px} .ticket-tot{border-top:1px solid var(--line)} .s-cream .ticket-tot{border-top-color:var(--bone-line)} .viz-live i,.sc-live i{animation:live-pulse 2.2s ease-in-out infinite} @keyframes live-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,.45)}50%{opacity:.85;box-shadow:0 0 0 4px rgba(16,185,129,0)}} .tbl{transition:transform .3s var(--ease-out),background-color .35s,border-color .35s,color .35s} .viz .num,.dash-big,.qr-mi b,.tbl,.kpi b{font-variant-numeric:tabular-nums} /* ── Section-visual reveals — armed (hidden) ONLY under html.anim, so JS-off / reduced-motion shows the complete final surface ────────── */ html.anim #alfredo .bubble{opacity:0;transform:translateY(10px)} @keyframes typing-bounce{0%,65%,100%{transform:translateY(0);opacity:.4}32%{transform:translateY(-4px);opacity:1}} /* ── Product split + tiles ──────────────────────────────────────────── */ .split{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,5vw,60px);align-items:center;width:100%} .split--rev .split-viz{order:-1} .split-copy .eyebrow{margin-bottom:14px}.split-copy .lead{margin-top:14px} .spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px} .spec{padding:16px 16px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.022);position:relative;transition:background .4s var(--ease-out),border-color .4s var(--ease-out),box-shadow .4s var(--ease-out),transform .45s var(--ease-out),opacity .5s var(--ease-out)} .s-cream .spec{border-color:var(--bone-line);background:rgba(20,20,18,.02)} .spec dt{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:7px;transition:color .4s} .s-cream .spec dt{color:var(--bone-dim)} .spec dd{margin:0;font-size:13px;line-height:1.45;color:var(--ink);font-weight:500} .s-cream .spec dd{color:var(--bone-ink)} .spec.is-lit{background:rgba(91,115,240,.10);border-color:rgba(91,115,240,.36);box-shadow:0 0 0 1px rgba(91,115,240,.10)} .spec.is-lit dt{color:var(--accent)} .s-cream .spec.is-lit{background:rgba(91,115,240,.09)} .spec:hover{background:rgba(91,115,240,.16);border-color:rgba(91,115,240,.55);transform:translateY(-3px);box-shadow:0 16px 36px -20px rgba(91,115,240,.7)} .spec:hover dt{color:var(--accent)} .spec.armed{opacity:0;transform:translateY(16px)} /* ── Footer (simplified + contact) ──────────────────────────────────── */ .foot{background:var(--ink-0);border-top:1px solid var(--line);padding-block:clamp(44px,6vw,68px) 28px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr auto;gap:40px;align-items:start} .foot-brand img{height:26px;width:auto;margin-bottom:14px} .foot-brand p{color:var(--ink-dim);font-size:14.5px;max-width:30ch;margin:0 0 16px} .foot-contact{font-size:14px;color:var(--ink-dim);margin:0 0 18px}.foot-contact a{color:var(--accent)} .foot-col h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 14px} .foot-col a{display:block;color:var(--ink-dim);font-size:14px;margin-bottom:10px;transition:color .2s} .foot-col a:hover{color:var(--ink)} .foot-social{display:flex;gap:10px} .foot-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-dim);transition:.2s} .foot-social a:hover{color:var(--ink);border-color:var(--line-2);background:rgba(255,255,255,.04);transform:translateY(-2px)} .foot-social svg{width:16px;height:16px} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:38px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-mute);font-size:13px} .foot-bottom a{color:var(--ink-mute)}.foot-bottom a:hover{color:var(--ink-dim)} /* ── Reveal (resting visible; hidden only under html.anim) ──────────── */ .reveal{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} html.anim .reveal{opacity:0;transform:translateY(22px)} html.anim .reveal.is-in{opacity:1;transform:none} /* ── Responsive ─────────────────────────────────────────────────────── */ @media(max-width:920px){ .hero-grid{grid-template-columns:1fr;gap:34px}.hero-media{max-width:360px;margin-inline:auto} .split{grid-template-columns:1fr;gap:28px}.split--rev .split-viz{order:0} .foot-grid{grid-template-columns:1fr 1fr;gap:32px} } @media(max-width:820px){ /* mobile dropdown has its OWN fixed dark panel → force light links here, independent of the adaptive --nav-fg (which colours the transparent bar). */ .nav-links{position:fixed;top:var(--navh);inset-inline:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(10,12,18,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:8px var(--pad) 14px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s var(--ease-out)} .nav-links.open{transform:none;opacity:1;pointer-events:auto} .nav-links a{padding:13px 6px;font-size:16px;border-bottom:1px solid var(--line);color:rgba(246,245,243,.82)} .nav-links a:hover{color:#fff;background:transparent} .nav-burger{display:flex} } @media(max-width:560px){ .hero-actions .btn{flex:1;justify-content:center}.foot-grid{grid-template-columns:1fr}.viz{max-width:340px} } @media(max-width:480px){ .nav-inner{gap:10px} .nav-lang{padding:8px 9px;font-size:13px} .nav-book{padding:11px 14px;font-size:13.5px} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal,html.anim .reveal{opacity:1;transform:none}.spec.armed{opacity:1;transform:none} html.anim .hero-rise,html.anim .hero-media{opacity:1;transform:none} } /* ── RTL ────────────────────────────────────────────────────────────── */ html[dir="rtl"] .eyebrow::before{transform:scaleX(-1)} html[dir="rtl"] .btn:hover svg{transform:translateX(-4px)} html[dir="rtl"] .btn svg{transform:scaleX(-1)} html[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(-4px)} /* ── Arabic locale — Cairo-first stack (Inter/JetBrains Mono carry no Arabic glyphs; Cairo is already loaded and is the site's Arabic face). Negative tracking breaks Arabic letter-joining → neutralized. ── */ html[lang="ar"] body{font-family:'Cairo','Inter',system-ui,sans-serif} html[lang="ar"] .hero-h1{letter-spacing:0} html[lang="ar"] .h2{letter-spacing:0} html[lang="ar"] .eyebrow,html[lang="ar"] .foot-col h4{font-family:'Cairo','Inter',sans-serif;letter-spacing:.05em} /* ── §02 CRAFT PASS — richer beats, same flow/timeline ─────────────────── */ /* viewfinder corner brackets around the QR (tighten on lock) */ .qr-fb{position:absolute;width:14px;height:14px;border:2.5px solid var(--accent);opacity:.9} .fb-tl{top:-7px;left:-7px;border-right:none;border-bottom:none;border-radius:4px 0 0 0} .fb-tr{top:-7px;right:-7px;border-left:none;border-bottom:none;border-radius:0 4px 0 0} .fb-bl{bottom:-7px;left:-7px;border-right:none;border-top:none;border-radius:0 0 0 4px} .fb-br{bottom:-7px;right:-7px;border-left:none;border-top:none;border-radius:0 0 4px 0} /* scanline (timeline-driven now) + lock flash */ .qr-scanline{z-index:2} .qr-lockflash{position:absolute;inset:-8px;border-radius:10px;background:rgba(91,115,240,.28);opacity:0;pointer-events:none} /* cart badge on the pay bar — pops as items land */ .qr-badge{display:inline-grid;place-items:center;min-width:16px;height:16px;border-radius:9px;padding:0 4px; margin-inline-end:7px;background:#fff;color:var(--accent);font-family:'JetBrains Mono',monospace; font-size:9.5px;font-weight:700;vertical-align:-2px} /* success tick draws itself + one soft green glow (defaults = DRAWN + no glow → resting/JS-off complete) */ .qr-done-tick{stroke-dasharray:16;stroke-dashoffset:0} .qr-done-glow{position:absolute;inset:-14px -30px;border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(closest-side,rgba(16,185,129,.30),transparent 70%)} .qr-sheet-done{position:absolute} /* (keeps its slot behavior; glow anchors to it) */ /* ambient aura behind the phone — pulses only at scan-lock + payment-success */ .qr-aura{position:absolute;left:50%;top:50%;width:min(420px,60vw);height:min(420px,60vw);z-index:0; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(closest-side,rgba(91,115,240,.22),transparent 70%)} /* ── §02 REAL MENU — photo cards, modifiers, qty steppers (like a live QR menu) ── */ .qr-cats{display:flex;gap:6px;padding:10px 13px 2px} .qr-cats i{font-style:normal;font-size:10px;font-weight:600;color:#5b6272;border:1px solid #e2e5ec;border-radius:20px;padding:3.5px 10px;background:#fff} .qr-cats i.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700} .qr-mi{position:relative;display:flex;align-items:center;gap:10px;padding:8px 9px;border:1px solid #e7e9f0;border-radius:13px;background:#fff;color:#0f1424;transition:background .25s,border-color .25s,box-shadow .25s} .qr-mi.is-sel{border-color:rgba(91,115,240,.45);background:rgba(91,115,240,.045);box-shadow:0 3px 12px -6px rgba(91,115,240,.35)} /* the "photo" — food shot on a soft appetizing tile */ .qr-ph{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:22px; box-shadow:inset 0 -8px 12px -8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.5)} .ph-cburger{background:linear-gradient(145deg,#ffe9c9,#f6c98d)} .ph-bburger{background:linear-gradient(145deg,#ffdfc2,#eeb27c)} .ph-fries{background:linear-gradient(145deg,#fff3c4,#f5d878)} .ph-drink{background:linear-gradient(145deg,#ffd9d4,#f0a8a0)} .ph-juice{background:linear-gradient(145deg,#ffe3bd,#f4bf82)} .qr-mi-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .qr-mi-nm{font-size:12px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .qr-mi-mod{font-size:9.5px;color:#8890a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .qr-mi-right{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px} .qr-mi-right b{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700} /* qty stepper — appears when the item is in the order */ .qr-qty{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(91,115,240,.4);border-radius:9px;padding:1.5px 7px; opacity:0;transform:scale(.82);transition:opacity .25s,transform .3s cubic-bezier(.34,1.56,.64,1)} .qr-qty i{font-style:normal;font-size:11px;font-weight:700;color:var(--accent);line-height:1} .qr-qty b{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:#0f1424} .qr-mi.is-sel .qr-qty{opacity:1;transform:scale(1)} /* menu spacing for the taller rows */ .qr-menu{gap:8px;padding:8px 13px} /* ── §03 "THE DAY REPLAYS" — chart-scrub playhead + per-hour readout ────── Defaults (playhead + readout hidden, bars/figures at their settled values) ARE the complete story → reduced-motion / JS-off need nothing further. */ .bars{position:relative} .dash-ph{position:absolute;top:-4px;bottom:-2px;left:0;width:2px;border-radius:2px;background:var(--accent); opacity:0;pointer-events:none} .dash-hr{position:absolute;top:-6px;left:0;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9.5px; font-weight:700;white-space:nowrap;color:#17181a;background:#fff;border:1px solid var(--bone-line);border-radius:8px; padding:3px 8px;box-shadow:0 8px 18px -10px rgba(20,20,18,.35);opacity:0;pointer-events:none} /* ── §04 "NIGHT WATCH" — ambient presence line + typed/streamed replies ── */ .chat-status{display:flex;align-items:center;gap:7px;margin-bottom:12px;font-family:'JetBrains Mono',monospace; font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)} .chat-status i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--mint)} html.anim .chat-status i{animation:live-pulse 2.2s ease-in-out infinite} .chat-status.is-think i{background:var(--accent);animation:none} .al-dots{display:none;gap:3px;align-items:center} .chat-status.is-think .al-dots{display:inline-flex} .al-dots b{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.5} html.anim .al-dots b{animation:typing-bounce 1s infinite ease-in-out} .al-dots b:nth-child(2){animation-delay:.16s} .al-dots b:nth-child(3){animation-delay:.32s} .al-ch{white-space:pre} .al-w{display:inline-block} .al-paused,.al-paused *{animation-play-state:paused !important} /* ── §05 "ONE TABLE'S NIGHT" — spotlight arc + waitlist ticket ────────── Defaults (no ring, ticket hidden, floor at the 8:30 snapshot) are the complete story → reduced-motion / JS-off need nothing further. */ .viz-tag b{font-weight:700;color:inherit} .tbl.paid{border-color:rgba(16,185,129,.55);background:rgba(16,185,129,.14);color:#0c8f63} .floor{position:relative} .tbl.spot{box-shadow:0 0 0 2px rgba(91,115,240,.45)} /* accent ring — spotlight only */ .fl-ticket{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;gap:6px; background:#fff;border:1px solid rgba(91,115,240,.4);border-radius:9px;padding:5px 9px; font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:#17181a;white-space:nowrap; box-shadow:0 10px 22px -10px rgba(20,20,18,.4);opacity:0;pointer-events:none} .fl-ticket i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}