/* ============================================================================ RegWatch Landing v6 — cinematic civic dossier All styles scoped under .lv6 so they never collide with the rest of the app. Fonts pulled from Fontshare CDN (Zodiak + Satoshi, free commercial license). ============================================================================ */ @import url('https://api.fontshare.com/v2/css?f[]=zodiak@400,500,600&f[]=satoshi@400,500,600,700&display=swap'); /* ───────────────────────── tokens ─────────────────────────────────────── */ .lv6 { --display: 'Zodiak', 'Iowan Old Style', Georgia, serif; --sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; --bg: oklch(10% 0.025 258); --bg-elevated: oklch(14% 0.028 258); --bg-raised: oklch(18% 0.03 258); --border: oklch(28% 0.02 258 / 0.6); --text: oklch(96% 0.01 258); --text-2: oklch(72% 0.02 258); --text-3: oklch(50% 0.02 258); --amber: oklch(76% 0.14 58); --amber-deep: oklch(66% 0.15 42); --amber-soft: oklch(80% 0.1 64); --lv6-bg: var(--bg); --lv6-bg-2: var(--bg-elevated); --lv6-bg-3: var(--bg-raised); --lv6-border: var(--border); --lv6-border-2: oklch(35% 0.02 258 / 0.5); --lv6-text: var(--text); --lv6-text-2: var(--text-2); --lv6-text-3: var(--text-3); --lv6-amber: var(--amber); --lv6-amber-2: var(--amber-deep); --lv6-display: var(--display); --lv6-sans: var(--sans); --lv6-mono: var(--mono); color-scheme: dark; font-family: var(--sans); color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'cv11'; } .lv6 * { box-sizing: border-box; } .lv6 *:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; } .lv6 a { color: inherit; text-decoration: none; } .lv6 button { font-family: inherit; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; } .lv6 input, .lv6 button, .lv6 textarea { font-family: inherit; font-size: inherit; } .lv6 h1, .lv6 h2, .lv6 h3, .lv6 h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; } .lv6 p { margin: 0; } .lv6 ul { list-style: none; margin: 0; padding: 0; } .lv6 ::selection { background: color-mix(in oklch, var(--amber) 30%, transparent); color: var(--text); } .lv6 .amb { color: var(--amber); } .lv6-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-x: clip; } /* Belt-and-suspenders horizontal overflow guard. `overflow-x: clip` on the shell prevents any rogue child (thread SVG past its bounds, absolute- positioned decorative elements, wide-set transforms) from introducing horizontal scroll on mobile. clip (vs hidden) doesn't create a new scroll container, so sticky/fixed children still work. */ .lv6, .lv6-main { overflow-x: clip; } .lv6-main { flex: 1; } /* ───────────────────────── nav ────────────────────────────────────────── */ .lv6-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 14px 32px; background: color-mix(in oklch, var(--bg) 82%, transparent); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent); } .lv6-nav-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); } .lv6-nav-links { display: flex; align-items: center; gap: 4px; } /* Selector must outweigh the global `.lv6 button { padding: 0 }` reset (specificity 0,1,1). Without the `.lv6 ` prefix, the "Product" button rendered at padding 0 while the nav-links got padding 8px 14px, making Product look out of place vs Coverage/Pricing/How-it-works. Also ensure line-height / display match across a and button so baselines align. */ .lv6 .lv6-nav-link { position: relative; display: inline-flex; align-items: center; padding: 8px 14px; font-size: 13px; font-weight: 500; line-height: 1; color: var(--text-2); letter-spacing: -0.002em; border-radius: 3px; transition: color 160ms, background 160ms; } .lv6 .lv6-nav-link:hover { color: var(--text); background: color-mix(in oklch, var(--bg-raised) 60%, transparent); } .lv6 .lv6-nav-link[aria-expanded='true'] { color: var(--text); background: color-mix(in oklch, var(--bg-raised) 60%, transparent); } .lv6-nav-chev { display: inline-block; margin-left: 5px; font-size: 9px; color: var(--text-3); transform: translateY(-1px); } .lv6-nav-spacer { flex: 1; } .lv6-nav-meta { font-family: var(--mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.12em; text-transform: uppercase; } .lv6-nav-signin { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text-2); } .lv6-nav-signin:hover { color: var(--text); } .lv6-nav-cta { padding: 9px 16px; font-size: 13px; font-weight: 600; background: var(--amber); color: oklch(12% 0.025 258); border-radius: 3px; letter-spacing: -0.002em; transition: transform 120ms, box-shadow 200ms, background 200ms; } .lv6-nav-cta:hover { background: color-mix(in oklch, var(--amber) 90%, white); transform: translateY(-1px); box-shadow: 0 8px 18px color-mix(in oklch, var(--amber) 35%, transparent); } .lv6-mega { position: absolute; top: 100%; left: 0; display: none; padding: 24px; min-width: 720px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,0.55); grid-template-columns: repeat(3, 1fr); gap: 22px; } .lv6-mega[data-open='true'] { display: grid; } .lv6-mega-col-head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .lv6-mega-item { display: block; padding: 8px 10px; border-radius: 3px; transition: background 140ms; } .lv6-mega-item:hover { background: color-mix(in oklch, var(--bg-raised) 70%, transparent); } .lv6-mega-item-name { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; } .lv6-mega-item-sub { font-size: 11px; color: var(--text-3); margin-top: 3px; line-height: 1.4; } .lv6-mega-item-status { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; } .lv6-mega-item-status[data-s='live'] { color: oklch(12% 0.025 258); background: var(--amber); } .lv6-mega-item-status[data-s='soon'] { color: var(--text-3); border: 1px solid var(--lv6-border-2); } .lv6-foryou { position: absolute; top: 100%; left: 0; display: none; min-width: 280px; padding: 10px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,0.55); } .lv6-foryou[data-open='true'] { display: block; } .lv6-foryou-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 3px; transition: background 140ms; } .lv6-foryou-item:hover { background: color-mix(in oklch, var(--bg-raised) 70%, transparent); } .lv6-foryou-item-glyph { width: 28px; height: 28px; flex-shrink: 0; border-radius: 3px; background: color-mix(in oklch, var(--amber) 12%, transparent); display: grid; place-items: center; color: var(--amber); font-family: var(--mono); font-size: 11px; font-weight: 700; } .lv6-foryou-item-name { font-size: 13px; font-weight: 600; color: var(--text); } .lv6-foryou-item-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; } /* 44px min tap target (WCAG 2.2 AA) — the burger only shows at ≤980px so every user who ever sees it is on touch. */ .lv6-nav-burger { display: none; width: 44px; height: 44px; border-radius: 3px; align-items: center; justify-content: center; } .lv6-nav-burger:hover { background: color-mix(in oklch, var(--bg-raised) 60%, transparent); } .lv6-nav-burger svg { width: 20px; height: 20px; } .lv6-nav-drawer { display: none; position: fixed; inset: 56px 0 0; z-index: 49; background: var(--bg); padding: 24px 20px; overflow-y: auto; } .lv6-nav-drawer[data-open='true'] { display: block; } /* Tap-anywhere-outside close: the drawer covers the full area under the nav on mobile by design (inset: 56px 0 0). The real concern the audit flagged was a backdrop — but because the drawer itself fills the viewport under the nav, there is no uncovered page behind it to mis-tap. Keeping the single-surface drawer — a separate overlay would only matter if we switched to a side-sheet, which we haven't. */ .lv6-nav-drawer-section { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .lv6-nav-drawer-head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; } /* 44px min tap target on drawer links — padding 14px + line-height 1.5 on 15px type ≈ 50px total tap height. Comfortable on iPhone. */ .lv6-nav-drawer a { display: block; padding: 14px 0; font-size: 15px; color: var(--text); font-weight: 500; } .lv6-skip { position: absolute; top: -40px; left: 16px; background: var(--amber); color: oklch(12% 0.025 258); padding: 8px 14px; border-radius: 3px; font-size: 12px; font-weight: 600; transition: top 160ms; z-index: 100; } .lv6-skip:focus { top: 12px; } /* reveal helper */ .lv6 [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1); } .lv6 [data-reveal='in'] { opacity: 1; transform: none; } /* ══════════════════════════════════════════════════════════════ SCENE 1 · HERO — dusk skyline, day/night cycle ══════════════════════════════════════════════════════════════ */ .lv6-s1 { position: relative; /* Hero fills the viewport MINUS the sticky nav that sits above it in the document flow. Without subtracting the nav height, the bottom of the hero (search bar + caption) gets pushed below the visible viewport and users see a cropped hero on first paint. The 56px matches the nav's computed height (14px vertical padding + ~24px line-height + 1px border-bottom ≈ 53-56px). svh = viewport minus mobile browser chrome so iOS address-bar resize doesn't jump the layout. min-height removed deliberately — it forced overflow on short windows and never helped; svh already caps the hero correctly on every size. */ height: calc(100vh - 56px); height: calc(100svh - 56px); /* `overflow: hidden` clipped the autocomplete dropdown when it extended past the hero bottom. Horizontal containment still comes from `.lv6-shell { overflow-x: clip }`; all decorative children use `position: absolute; inset: 0` or their own overflow:hidden wrappers, so removing the vertical clip here just lets the dropdown escape. */ background: radial-gradient(ellipse 900px 400px at 50% 64%, oklch(16% 0.05 55 / 0.14), transparent 60%), linear-gradient(180deg, oklch(4% 0.018 260) 0%, oklch(6% 0.022 258) 28%, oklch(9% 0.032 254) 52%, oklch(7% 0.025 256) 74%, oklch(3% 0.012 258) 100%); } .lv6-s1-sun, .lv6-s1-moon { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .lv6-s1-sun-halo, .lv6-s1-sun-core, .lv6-s1-moon-glow, .lv6-s1-moon-disk { position: absolute; left: 0; top: 0; transform-origin: center; will-change: transform, opacity; } .lv6-s1-sun-halo { width: 85vmin; height: 85vmin; margin: -42.5vmin 0 0 -42.5vmin; background: radial-gradient(circle at center, oklch(74% 0.13 62 / 0.38) 0%, oklch(66% 0.10 56 / 0.22) 14%, oklch(52% 0.08 50 / 0.10) 32%, oklch(40% 0.05 48 / 0.04) 54%, transparent 76%); filter: blur(44px); animation: lv6-sun-arc 12s cubic-bezier(0.45, 0, 0.55, 1) infinite, lv6-halo-fade 12s ease-in-out infinite; } .lv6-s1-sun-core { width: 20vmin; height: 20vmin; margin: -10vmin 0 0 -10vmin; background: radial-gradient(circle at center, oklch(96% 0.17 82 / 0.95) 0%, oklch(90% 0.18 76 / 0.6) 22%, oklch(78% 0.17 68 / 0.3) 48%, oklch(62% 0.13 58 / 0.12) 70%, transparent 90%); filter: blur(9px); animation: lv6-sun-arc 12s cubic-bezier(0.45, 0, 0.55, 1) infinite, lv6-core-visibility 12s ease-in-out infinite; } @keyframes lv6-sun-arc { 0% { transform: translate(-6vw, 46vh); } 12% { transform: translate(14vw, 30vh); } 25% { transform: translate(55vw, 16vh); } 38% { transform: translate(88vw, 30vh); } 50% { transform: translate(108vw, 46vh); } 75% { transform: translate(55vw, 80vh); } 100% { transform: translate(-6vw, 46vh); } } /* Sun. Slow rise, peak at 25%, dimming starts at the final position stop (38%), then a fast cut as the ball actually exits the screen (47-50%). */ @keyframes lv6-core-visibility { 0%, 10% { opacity: 0 } 20% { opacity: 0.5 } 27% { opacity: 1 } 38% { opacity: 1 } /* still full at the final descending stop (x=88vw) */ 44% { opacity: 0.55 } /* gentle dim as it coasts toward the edge */ 47% { opacity: 0.25 } 50% { opacity: 0 } /* quick cut once off-screen */ 100% { opacity: 0 } } @keyframes lv6-halo-fade { 0% { opacity: 0 } 8% { opacity: 1 } 38% { opacity: 1 } /* halo holds full at the final stop */ 46% { opacity: 0.7 } /* softens a beat behind the disk */ 50% { opacity: 0.25 } 53% { opacity: 0 } /* halo snuffs out just after the disk is gone */ 100% { opacity: 0 } } .lv6-s1-moon-glow { width: 58vmin; height: 58vmin; margin: -29vmin 0 0 -29vmin; background: radial-gradient(circle at center, oklch(85% 0.035 235 / 0.28) 0%, oklch(78% 0.03 230 / 0.18) 18%, oklch(68% 0.025 225 / 0.08) 38%, transparent 78%); filter: blur(36px); animation: lv6-moon-arc 12s cubic-bezier(0.45, 0, 0.55, 1) infinite, lv6-moon-glow-fade 12s ease-in-out infinite; } .lv6-s1-moon-disk { width: 7vmin; height: 7vmin; margin: -3.5vmin 0 0 -3.5vmin; background: radial-gradient(circle at 42% 38%, oklch(96% 0.015 240 / 0.98) 0%, oklch(90% 0.02 235 / 0.85) 40%, oklch(78% 0.025 230 / 0.45) 70%, transparent 95%); border-radius: 50%; box-shadow: 0 0 16px oklch(90% 0.02 238 / 0.35), 0 0 40px oklch(85% 0.025 235 / 0.22); filter: blur(1.5px); animation: lv6-moon-arc 12s cubic-bezier(0.45, 0, 0.55, 1) infinite, lv6-moon-disk-visibility 12s ease-in-out infinite; } @keyframes lv6-moon-arc { 0%, 50% { transform: translate(-6vw, 46vh); } 62% { transform: translate(14vw, 30vh); } 75% { transform: translate(55vw, 18vh); } 88% { transform: translate(88vw, 30vh); } 100% { transform: translate(108vw, 46vh); } } /* Moon: same exit pattern as sun — dim at the final stop (88% = x=88vw), fast cut off-screen (97-100%). */ @keyframes lv6-moon-disk-visibility { 0%, 58% { opacity: 0 } 70% { opacity: 0.5 } 77% { opacity: 1 } 88% { opacity: 1 } /* full at final stop */ 94% { opacity: 0.55 } /* gentle dim as it coasts */ 97% { opacity: 0.25 } 100% { opacity: 0 } /* quick cut once off-screen */ } @keyframes lv6-moon-glow-fade { 0%, 52% { opacity: 0 } 62% { opacity: 1 } 88% { opacity: 1 } 95% { opacity: 0.7 } 99% { opacity: 0.25 } 100% { opacity: 0 } } .lv6-s1-bloom { position: absolute; left: -28%; top: 34%; width: 64vw; height: 30vh; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 46% 70% at 50% 90%, oklch(68% 0.12 62 / 0.22) 0%, oklch(58% 0.09 56 / 0.12) 24%, transparent 74%); mix-blend-mode: screen; filter: blur(32px); animation: lv6-bloom-track 12s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes lv6-bloom-track { 0% { transform: translateX(-10%) translateY(22%); opacity: 0 } 8% { opacity: 0.4 } 25% { transform: translateX(50%) translateY(-6%); opacity: 0.75 } 42% { opacity: 0.4 } 50% { transform: translateX(120%) translateY(22%); opacity: 0 } 50.1%, 100% { opacity: 0 } } .lv6-s1-moonlight { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 80vw 40vh at 50% 55%, oklch(74% 0.04 235 / 0.16) 0%, oklch(62% 0.03 230 / 0.08) 30%, transparent 80%); mix-blend-mode: screen; opacity: 0; animation: lv6-moonlight-cycle 12s ease-in-out infinite; } @keyframes lv6-moonlight-cycle { 0%,50%,100% { opacity: 0 } 62% { opacity: 0.6 } 75% { opacity: 1 } 88% { opacity: 0.6 } } /* Fallback SVG silhouette — always in DOM, covered by the photo when it loads. Flipped horizontally so its anchor building sits on the right instead of the left. */ .lv6-s1-skyline-fallback { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: url('/images/nyc-skyline-harbor.png'); background-size: 100% auto; background-position: center bottom; background-repeat: no-repeat; opacity: 0.85; transform: scaleX(-1); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 40%, black 70%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 40%, black 70%); } /* Primary photo — same Unsplash source as the design you approved. mix-blend-mode: multiply + the filter below preserves the midtown silhouette with sun bleed. */ .lv6-s1-skyline { position: absolute; inset: 0; z-index: 4; pointer-events: none; background-image: url('/images/nyc-midtown-dusk.jpg'); background-size: cover; background-position: center 72%; filter: saturate(0.26) brightness(0.62) contrast(1.72) hue-rotate(12deg); mix-blend-mode: multiply; opacity: 1; animation: lv6-sky-lighting 12s ease-in-out infinite; } /* Day/night lighting cycle — ported from the approved design-review */ @keyframes lv6-sky-lighting { 0%,100% { filter: saturate(0.26) brightness(0.62) contrast(1.72) hue-rotate(12deg); } 15% { filter: saturate(0.34) brightness(0.82) contrast(1.58) hue-rotate(2deg); } 25% { filter: saturate(0.42) brightness(0.96) contrast(1.48) hue-rotate(-4deg); } 35% { filter: saturate(0.34) brightness(0.82) contrast(1.58) hue-rotate(2deg); } 50% { filter: saturate(0.24) brightness(0.58) contrast(1.75) hue-rotate(14deg); } 65% { filter: saturate(0.22) brightness(0.68) contrast(1.68) hue-rotate(22deg); } 75% { filter: saturate(0.2) brightness(0.76) contrast(1.62) hue-rotate(24deg); } 85% { filter: saturate(0.22) brightness(0.68) contrast(1.68) hue-rotate(22deg); } } .lv6-s1-rimlight { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 42%, oklch(64% 0.09 58 / 0.09) 45%, oklch(56% 0.07 52 / 0.03) 50%, transparent 58%); mix-blend-mode: screen; animation: lv6-rim-pulse 12s ease-in-out infinite; } @keyframes lv6-rim-pulse { 0%,100% { opacity: 0.18 } 25% { opacity: 0.75 } 50% { opacity: 0.15 } 75% { opacity: 0.4 } } /* Sparkles (building lights) */ .lv6-s1-sparkles { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; animation: lv6-sparkles-cycle 12s ease-in-out infinite; } @keyframes lv6-sparkles-cycle { 0%,100% { opacity: 0.85 } 20%,30% { opacity: 0.4 } 70%,80% { opacity: 1 } } .lv6-sparkle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 5px var(--amber), 0 0 12px color-mix(in oklch, var(--amber) 40%, transparent); opacity: 0; animation: lv6-sparkle-twinkle var(--pulse, 4800ms) ease-in-out var(--delay, 1500ms) infinite; } @keyframes lv6-sparkle-twinkle { 0% { opacity: 0; transform: scale(0.4) } 6% { opacity: 1; transform: scale(1) } 40% { opacity: 0.35; transform: scale(0.85) } 58% { opacity: 1; transform: scale(1) } 78% { opacity: 0.6 } 100% { opacity: 1; transform: scale(1) } } /* Timeline thread */ /* Thread sits BETWEEN the two headlines. The upper headline is a two-line block (clamp 52-112px × 0.96 line-height ≈ 22-23% of hero height), so with upper top: 30%, its bottom lives around 53%. Thread at 55% clears the upper cleanly; italic lower at 62% sits just below the thread. Prior 42% had the thread cutting through the upper headline. */ .lv6-s1-thread { position: absolute; left: 0; right: 0; top: 55%; height: 100px; z-index: 8; overflow: visible; pointer-events: none; } .lv6-s1-thread svg { width: 100%; height: 100%; overflow: visible; } .lv6-s1-thread path { fill: none; stroke: var(--amber); stroke-width: 1.2; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--amber)) drop-shadow(0 0 18px color-mix(in oklch, var(--amber) 40%, transparent)); opacity: 0.78; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: lv6-thread-trace 2600ms cubic-bezier(0.33, 0, 0.17, 1) 1500ms forwards; } @keyframes lv6-thread-trace { to { stroke-dashoffset: 0 } } .lv6-s1-thread .ev { opacity: 0; transform-box: fill-box; transform-origin: center; animation: lv6-fade-in 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .lv6-s1-thread .ev:nth-child(2) { animation-delay: 1800ms } .lv6-s1-thread .ev:nth-child(3) { animation-delay: 2150ms } .lv6-s1-thread .ev:nth-child(4) { animation-delay: 2550ms } .lv6-s1-thread .ev:nth-child(5) { animation-delay: 2950ms } .lv6-s1-thread .ev:nth-child(6) { animation-delay: 3300ms } .lv6-s1-thread .ev:nth-child(7) { animation-delay: 3700ms } @keyframes lv6-fade-in { to { opacity: 1 } } .lv6-s1-thread .dot { fill: var(--amber); filter: drop-shadow(0 0 6px var(--amber)); } .lv6-s1-thread .tick { stroke: var(--amber); stroke-width: 0.8; opacity: 0.5 } .lv6-s1-thread .ripple { fill: none; stroke: var(--amber); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: lv6-ripple 2400ms ease-out infinite; } @keyframes lv6-ripple { 0% { transform: scale(1); opacity: 0.7 } 100% { transform: scale(4.5); opacity: 0 } } /* Desktop hero stack: upper 30% → thread 55% → lower 68%. Upper headline is 2 lines of clamp(52-112)*0.96 ≈ 25% of hero, so top 30% + height 25% puts its bottom at 55% — directly on the thread. Thread (100px tall = ~12%) ends at ~67%. Lower italic at 68% starts just below. Prior bug: lower at 52% sat ABOVE thread at 55% which flipped the intended visual order. */ .lv6-s1-headline-upper { position: absolute; top: 30%; left: 72px; right: 72px; z-index: 11; font-family: var(--display); font-weight: 500; font-size: clamp(52px, 7vw, 112px); line-height: 0.96; letter-spacing: -0.028em; color: var(--text); max-width: 960px; opacity: 0; animation: lv6-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 600ms forwards; } .lv6-s1-headline-upper em { font-style: normal; color: var(--amber); } .lv6-s1-headline-lower { position: absolute; top: 68%; left: 72px; right: 72px; z-index: 11; font-family: var(--display); font-weight: 500; font-style: italic; font-size: clamp(52px, 7vw, 112px); line-height: 0.96; letter-spacing: -0.025em; color: var(--amber); opacity: 0; animation: lv6-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 1100ms forwards; } @keyframes lv6-rise { to { opacity: 1; transform: none } } .lv6-s1-caption { position: absolute; bottom: 40px; left: 72px; right: 72px; z-index: 11; display: flex; justify-content: space-between; align-items: flex-end; color: var(--text-3); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 500; opacity: 0; animation: lv6-fade 700ms ease 1600ms forwards; } /* Hero search bar — the primary interactive element. Sits above the caption so the hero does immediate work: "show me this address." Delayed fade-in so it arrives AFTER the headlines + thread, feeling like the scene lands on a question the user can answer. */ .lv6-s1-search { position: absolute; bottom: 104px; left: 72px; right: 72px; z-index: 12; max-width: 640px; opacity: 0; animation: lv6-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 1800ms forwards; } .lv6-s1-search-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklch, var(--amber) 70%, var(--text-3)); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .lv6-s1-search-label::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); } /* No framing wrap around the input any more. The input (.rw-ac-bar) owns its own 3px sharp border + amber focus ring, and the "bar inside a bar" look (rounded-input-in-a-rectangle) was fighting the linear-sharp style. Keeping the class as a layout container only — no bg, no border, no padding, no backdrop-filter — so the input sits directly on the hero without chrome. */ .lv6-s1-search-wrap { background: none; border: none; border-radius: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: none; } /* Focus state handled entirely by .rw-ac-bar:focus-within now. */ .lv6-s1-search-wrap:focus-within { box-shadow: none; } /* The SearchBar composite (.rw-search) manages its own internal spacing between label / slider / input via gap: var(--space-2). No extra rules needed here — keeping the old .lv6-s1-search-slider selector removed so it doesn't drift out of sync. */ @keyframes lv6-fade { to { opacity: 1 } } .lv6-s1-caption-soon { color: color-mix(in oklch, var(--amber) 58%, var(--text-3)); font-style: italic; font-weight: 400; letter-spacing: 0.04em; text-transform: none; font-size: 0.92em; opacity: 0.82; margin-left: 6px; padding-left: 10px; border-left: 1px solid color-mix(in oklch, var(--amber) 28%, transparent); } .lv6-s1-scroll { display: flex; align-items: center; gap: 10px; } .lv6-s1-scrolldot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: lv6-scrolldot 1800ms ease-in-out infinite; } @keyframes lv6-scrolldot { 0%, 100% { transform: translateY(0); opacity: 0.6 } 40% { transform: translateY(6px); opacity: 1 } 60% { transform: translateY(6px); opacity: 1 } } /* ───── Short-height desktop rebalance ───────────────────────────────── Base hero positions headlines at `top: 30%/55%/68%` but the search bar at `bottom: 104px`. That mix of percent-from-top + pixels-from-bottom collapses when the viewport is short: on a 982px-tall Macbook Pro 15" the italic "We keep watch." lands on top of the state slider, and at 1080p the gap is only ~15px. Cleanly separates only at ~1200+ tall. Fix: at short-to-mid heights, flip the italic to bottom-anchored so it keeps a fixed 30-40px gap above the search bar regardless of viewport height. Upper headline + thread also shift up so the overall stack stays balanced, and the italic drops one font-size tier so two-line wraps don't eat back into the search zone. Desktop widths only (>=981px); the 980-max mobile rule below handles the phone layout with its own rhythm. */ @media (min-width: 981px) and (max-height: 1100px) { .lv6-s1-headline-upper { top: 20%; font-size: clamp(44px, 6vw, 88px); } .lv6-s1-thread { top: 46%; } .lv6-s1-headline-lower { top: auto; bottom: 260px; font-size: clamp(40px, 5.2vw, 76px); } .lv6-s1-search { bottom: 84px; } .lv6-s1-caption { bottom: 22px; } } /* Ultra-short desktop (external 900p, half-height panels, in-car kiosks). Further tightens so the whole hero still fits without scroll. */ @media (min-width: 981px) and (max-height: 820px) { .lv6-s1-headline-upper { top: 14%; font-size: clamp(36px, 5vw, 72px); } .lv6-s1-thread { top: 42%; height: 80px; } .lv6-s1-headline-lower { bottom: 230px; font-size: clamp(34px, 4.4vw, 64px); } .lv6-s1-search { bottom: 68px; } .lv6-s1-caption { bottom: 16px; font-size: 10px; } } /* ══════════════════════════════════════════════════════════════ SCENE 2 · SCALE — parcel ignition grid ══════════════════════════════════════════════════════════════ */ /* Edge-to-edge scene. Outer vertical-only padding keeps the headline breathing; horizontal is 0 so the parcel grid underneath can bleed to the viewport edges (the "data ocean" should feel boundless). Text inset is handled by .lv6-s2-content's own max-width + centering below, NOT by this section's padding. */ .lv6-s2 { position: relative; padding: 140px 0 120px; background: var(--bg); overflow: hidden; } /* Grid also loses its 40px inset so tiles reach the browser edges. */ .lv6-s2-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(56, 1fr); grid-template-rows: repeat(32, 1fr); gap: 1px; opacity: 0.85; pointer-events: none; } .lv6-s2-parcel { background: oklch(18% 0.022 258 / 0.28); border-radius: 1px; } .lv6-s2-parcel.live { animation: lv6-parcel-pulse 2800ms ease-in-out var(--d, 0ms) infinite; } .lv6-s2-parcel.p2 { animation-name: lv6-parcel-pulse-2; } .lv6-s2-parcel.p3 { animation-name: lv6-parcel-pulse-3; } .lv6-s2-parcel.p4 { animation-name: lv6-parcel-pulse-4; } @keyframes lv6-parcel-pulse { 0%,100% { background: oklch(18% 0.022 258 / 0.28) } 50% { background: var(--amber); box-shadow: 0 0 5px var(--amber) } } @keyframes lv6-parcel-pulse-2 { 0%,100% { background: oklch(18% 0.022 258 / 0.28) } 50% { background: oklch(68% 0.17 25); box-shadow: 0 0 5px oklch(68% 0.17 25) } } @keyframes lv6-parcel-pulse-3 { 0%,100% { background: oklch(18% 0.022 258 / 0.28) } 50% { background: oklch(82% 0.14 90); box-shadow: 0 0 5px oklch(82% 0.14 90) } } @keyframes lv6-parcel-pulse-4 { 0%,100% { background: oklch(18% 0.022 258 / 0.28) } 50% { background: oklch(64% 0.14 55); box-shadow: 0 0 5px oklch(64% 0.14 55) } } /* Center spotlight: opaque core over the full text box, blurred fade out to reveal grid at the edges. */ .lv6-s2-mask { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( ellipse 54vw 42vh at 50% 50%, var(--bg) 0%, var(--bg) 32%, color-mix(in oklch, var(--bg) 88%, transparent) 50%, color-mix(in oklch, var(--bg) 45%, transparent) 72%, transparent 95% ); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Content gets a horizontal inset (previously the parent section's padding) so headline + body stay away from the viewport edges even though the scene itself is edge-to-edge. Vertical position unchanged. */ .lv6-s2-content { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 56px; text-align: center; } .lv6-s2-content > * { position: relative; z-index: 1; } .lv6-s2-eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-bottom: 24px; } .lv6-s2-headline { font-family: var(--display); font-size: clamp(40px, 6vw, 88px); line-height: 1.02; letter-spacing: -0.025em; color: var(--text); font-weight: 500; margin-bottom: 32px; } .lv6-s2-headline .num { color: var(--amber); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .lv6-s2-headline em { font-style: italic; color: var(--text-2); font-weight: 400; } .lv6 .lv6-s2-sub { font-size: clamp(14px, 3.6vw, 15px); color: var(--text-2); max-width: 64ch; margin: 0 auto 36px; line-height: 1.6; text-align: center; } .lv6-s2-legend { display: flex; justify-content: center; gap: 28px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); flex-wrap: wrap; } .lv6-s2-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); margin-right: 8px; vertical-align: middle; } .lv6-s2-legend .lg-dot-2 { background: oklch(68% 0.17 25); box-shadow: 0 0 6px oklch(68% 0.17 25) } .lv6-s2-legend .lg-dot-3 { background: oklch(82% 0.14 90); box-shadow: 0 0 6px oklch(82% 0.14 90) } .lv6-s2-legend .lg-dot-4 { background: oklch(64% 0.14 55); box-shadow: 0 0 6px oklch(64% 0.14 55) } /* ══════════════════════════════════════════════════════════════ SCENE 3 · VERTICALS — six interactions ══════════════════════════════════════════════════════════════ */ .lv6-v5 { padding: 120px 56px 120px; background: var(--bg); max-width: 100vw; } .lv6-v5-intro { max-width: 1200px; margin: 0 auto 72px; } .lv6-v5-eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-bottom: 18px; } .lv6-v5-head { font-family: var(--display); font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.022em; color: var(--text); font-weight: 500; margin-bottom: 18px; max-width: 20ch; } .lv6-v5-sub { font-size: clamp(14px, 3.6vw, 15px); line-height: 1.55; color: var(--text-2); max-width: 62ch; margin: 0 0 28px; } /* Workflow-jump rail. Sharp square buttons with white-ish borders on the landing's dark bg so they read as obvious tappable controls instead of a row of inline text. Active state stays amber-filled. Min-height 36px desktop / 44px mobile for proper tap targets. Sharp corners (no border-radius) per project design preference. */ .lv6-v5-jump { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; padding: 6px 0; } /* Specificity bump (.lv6 prefix): .lv6 button at line 55 sets border:0 with specificity (0,1,1), which beats the bare .lv6-v5-jump-chip class (0,1,0). Using .lv6 .lv6-v5-jump-chip gives us (0,2,0) so the border + padding declarations actually land. */ .lv6 .lv6-v5-jump-chip { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--text-2); padding: 9px 16px; min-height: 36px; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 0; background: transparent; cursor: pointer; transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), border-color 160ms cubic-bezier(0.4, 0, 0.2, 1), background 160ms cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; } .lv6 .lv6-v5-jump-chip:hover { color: var(--text); border-color: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 0.05); } .lv6 .lv6-v5-jump-chip:active { background: rgba(255, 255, 255, 0.08); } .lv6 .lv6-v5-jump-chip[data-active='true'] { color: oklch(12% 0.025 248); /* dark ink on amber fill */ border-color: var(--amber); background: var(--amber); font-weight: 600; } .lv6 .lv6-v5-jump-chip[data-active='true']:hover { background: var(--amber); border-color: var(--amber); } .lv6 .lv6-v5-jump-chip:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; } /* Stage: chips drive a single visible workflow at a time. The two edges peek behind the active block to suggest a dossier of more workflows waiting in the stack. Cuts ~3000px of vertical scroll vs. the old linear layout while preserving every per-block gesture. */ .lv6-v5-stage { position: relative; max-width: 1200px; margin: 0 auto; padding-right: 18px; padding-bottom: 18px; } /* Stack edges are real