/* ============================================================================ LANDING-HOME.CSS — the rebuilt homepage (positioning "product → platform") ============================================================================ Ported from docs/reference/homepage-copy-mock.html (approved copy mock). Scope: templates/public/landing-base.html ONLY. Loaded via a direct in that template, AFTER landing.css (so it can lean on landing.css for the shared chrome — .container, .btn*, .reveal, .founder-section, and the reused flow/bento visuals — and win where it overrides). Rules honoured: - No hardcoded colours: every colour is a var() from colours.css / public-tokens.css. The flock section's fixed-dark palette lives in colours.css (--flock-*), never here. - Classes are namespaced `hp-` to avoid colliding with landing.css's older `.hero` / `.pricing-section` / `.faq-section` rules. Genuinely reused chrome (.reveal, .btn, .founder-section, .bento-*, #web-*) keeps its shared name on purpose. ============================================================================ */ /* ── Sticky guard ────────────────────────────────────────────────────────── landing.css sets `body { overflow-x: hidden }`, which turns into a scroll container and kills `position: sticky` on the flock stage and the parts sidebar. `overflow-x: clip` clips the same overflow WITHOUT creating a scroll container, so sticky survives. Scoped to the home page only. */ body.lp-home { overflow-x: clip; overflow-y: visible; } /* ── Native wheel scrolling ──────────────────────────────────────────────── landing.css sets `html { scroll-behavior: smooth }` for anchor links on the other public pages. On the homepage it turns every browser-initiated scroll adjustment into an animated jump that fights the flock section's choreography (the "chunk, pause, chunk" stepping — external analysis, 2026-07-13), and it made hash loads (/#faq) glide THROUGH the flock's trigger zone. This file loads after landing.css, so this wins. Anchor clicks stay smooth via landing.js's scrollTo({behavior:'smooth'}). */ html { scroll-behavior: auto; } /* Same width as the page content (.container in landing.css). */ .hp-wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-xl); } .hp-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bs-primary); } /* ── Hero ──────────────────────────────────────────────────────────────── */ /* Generous top padding clears the fixed navbar pill and gives the headline air (Andrew, 2026-07-13). Backdrop is the previous landing page's gradient + grain treatment (.hero-gradient / .hero-grain in landing.css) with the interactive dashboard mockup fading in below the CTAs — the base background colours here match what those layers expect. */ /* At least one viewport tall, then grows to fit its content (Andrew, 2026-07-13, replacing the fold-cropped "peek"): the full dashboard mockup must be scrollable into view on every screen size — the old height:100vh + overflow crop meant most screens could never see its lower half, and the entry snap then yanked readers to the canvas when they scrolled looking for it. The flock section now starts wherever the hero ends and pins on arrival via its sticky stage — no snap. */ .hp-hero { min-height: 100vh; padding: 220px 0 0; text-align: center; position: relative; overflow: hidden; background: var(--muted); } [data-bs-theme=dark] .hp-hero { background: var(--background); } .hp-hero-inner { position: relative; } .hp-hero h1 { font-size: clamp(40px, 6.2vw, 68px); font-weight: var(--fw-semibold); line-height: 1.04; letter-spacing: -0.035em; color: var(--foreground); text-wrap: balance; } .hp-hero-sub { margin: 26px auto 0; max-width: 600px; text-wrap: pretty; font-size: 19px; line-height: 1.5; color: var(--muted-foreground); } .hp-hero-sub b { color: var(--foreground-soft); font-weight: 500; } /* Accent picks out the two verbs the product is actually judged on. Uses the live theme accent, so it follows a user's accent choice rather than pinning the old landing page's orange. */ .hp-hero-accent { color: var(--bs-primary); } /* Proof block under the subhead — bordered card, matching the stat cards the court-matching flow already ships (.hero-stat-card/-label/-divider live in landing.css; only the hero's wrapper and larger digits are defined here). */ .hp-hero-stats { margin: 32px auto 0; width: max-content; max-width: 100%; display: flex; align-items: center; gap: 24px; padding: 11px 24px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); } .hp-hero-stats .odometer { font-size: 19px; color: var(--foreground); } .hp-hero-stats .hero-stat-label { font-size: 10.5px; color: var(--muted-foreground); } .hp-hero-stats .hero-stat-divider { height: 26px; } .hp-hero-ctas { margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom:4rem; } /* Mobile: less clearance (the pill navbar is the same height as desktop) and smaller type — the desktop clamp floors at 40px, which crowds a 390px viewport. Must sit AFTER the base hero rules (same specificity). */ @media (max-width: 640px) { .hp-hero { padding-top: 150px; } .hp-hero h1 { font-size: 34px; } .hp-hero-sub { font-size: 16.5px; } .hp-hero-stats { margin-top: 26px; gap: 16px; padding: 9px 16px; border-radius: 9px; } .hp-hero-stats .odometer { font-size: 16px; } .hp-hero-stats .hero-stat-divider { height: 22px; } /* Keep both labels on one line — "Courts Monitored" otherwise wraps and the two cards end up different heights. */ .hp-hero-stats .hero-stat-label { font-size: 9.5px; white-space: nowrap; } } /* ── Web / worldview — coalescing flock (fixed-dark, non-flipping) ───────── */ /* 440vh = 100vh stage + 240vh scrub + 100vh curtain. Scroll distance IS the reading time under the free-scroll contract (no input interception, flock.js 2026-07-14): each beat needs roughly a viewport of runway, the Mobbin ratio. At 160vh a strong desktop scroll skipped the scatter copy straight to the payoff (Andrew, 2026-07-14); 240vh gives the copy ~1 viewport of dwell (plus the 100vh approach while the section slides in) and the finished frame ~1 viewport of hold. The last 100vh is the exit: .hp-parts pulls up over the still-stuck stage via its -100vh margin, so the payoff stays lit beneath the incoming sheet and normal scrolling resumes exactly when the parts top reaches the viewport top. */ #web-section { position: relative; height: 440vh; background: var(--flock-bg); } #web-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background-image: radial-gradient(circle, rgba(var(--flock-muted-rgb), .07) 1px, transparent 1.2px); background-size: 34px 34px; background-position: center; } #gl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Copy sizes match the retired tagline section this replaces: the manifesto paragraph and payoff both rendered at --title-5 (h2 scale) there. */ .scatter-copy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(880px, calc(100% - 48px)); text-align: center; color: var(--flock-muted); font-size: var(--title-5); line-height: 1.3; font-weight: var(--fw-semibold); letter-spacing: var(--title-5-ls); will-change: opacity, transform; pointer-events: none; } /* First sentence carries the thesis — payoff-white and a step heavier than the rest of the paragraph (Andrew, 2026-07-14). */ .scatter-copy .scatter-lead { color: var(--flock-ink); font-weight: var(--fw-bold); } .scatter-copy::before { content: ""; position: absolute; inset: -56px -90px; background: radial-gradient(ellipse at center, rgba(var(--flock-bg-rgb), .66) 0%, rgba(var(--flock-bg-rgb), 0) 70%); z-index: -1; } /* No halo behind the particle ball — the #bloom glow was killed 2026-07-13 (Andrew: "particles and too much glow"; the particles themselves define the globe's edge). */ .final-copy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(880px, calc(100% - 48px)); text-align: center; will-change: opacity, transform; pointer-events: none; } .payoff { color: var(--flock-ink); font-size: var(--title-5); line-height: var(--title-5-lh); font-weight: var(--fw-semibold); letter-spacing: var(--title-5-ls); opacity: 0; will-change: opacity, transform; } @media (max-width: 640px) { .scatter-copy { font-size: var(--title-3); } .payoff { font-size: 1.75rem; } } .flock-hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); opacity: .55; color: var(--flock-muted); will-change: opacity; pointer-events: none; } .flock-hint svg { display: block; animation: flock-hint-drift 2.6s ease-in-out infinite; } @keyframes flock-hint-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .flock-hint { display: none; } .flock-hint svg { animation: none; } #web-section { height: 100vh; } .hp-parts { margin-top: 0; } #gl-canvas { display: none; } .scatter-copy, .final-copy { position: static; transform: none; margin-left: auto; margin-right: auto; } .payoff { opacity: 1; } .rm-stack { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; padding: 24px; } } /* ── Navbar over dark bands ──────────────────────────────────────────────── home-parts.js adds .nav-over-dark to .navbar while a fixed-dark band (the flock section, the close) sits under it, and removes it on exit — so in light mode the pill flips to the dark-mode treatment instead of floating as a white glass smudge on black. Values mirror landing.css's [data-bs-theme=dark] navbar rules (in dark mode these are a no-op). Skipped while the mobile menu is open (that sheet is theme-styled). */ .navbar.nav-over-dark .navbar-logo img { content: url('/static/images/acquit-logo-dark.png?v=20260714'); } .navbar.nav-over-dark .navbar-inner:not(.menu-opened) { background: transparent; border-color: transparent; box-shadow: none; } .navbar.nav-over-dark.scrolled .navbar-inner:not(.menu-opened) { background: linear-gradient(var(--landing-glass-pill-bg)); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(var(--bs-white-rgb), 0.08); box-shadow: inset 0 1px 1px 0 rgba(var(--bs-white-rgb), 0.1); } .navbar.nav-over-dark .nav-link, .navbar.nav-over-dark.scrolled .nav-link, .navbar.nav-over-dark .nav-signin, .navbar.nav-over-dark .theme-toggle, .navbar.nav-over-dark .mobile-theme-toggle { color: var(--flock-muted); } .navbar.nav-over-dark .nav-link:hover, .navbar.nav-over-dark.scrolled .nav-link:hover, .navbar.nav-over-dark .nav-signin:hover, .navbar.nav-over-dark .theme-toggle:hover, .navbar.nav-over-dark .mobile-theme-toggle:hover { color: var(--flock-ink); } .navbar.nav-over-dark .nav-link:hover { background: rgba(var(--bs-white-rgb), 0.05); } .navbar.nav-over-dark .theme-toggle:hover { background: rgba(var(--bs-white-rgb), 0.06); } .navbar.nav-over-dark .nav-signin { border-color: rgba(var(--bs-white-rgb), 0.18); } .navbar.nav-over-dark .nav-signin:hover { border-color: rgba(var(--bs-white-rgb), 0.45); } .navbar.nav-over-dark .navbar-inner:not(.menu-opened) .menu-toggle span { background: var(--flock-ink); } /* ── Four parts / sticky sidebar ─────────────────────────────────────────── */ /* Curtain exit: rides up over the flock stage (see #web-section note). Needs its own opaque background + a z-index above the sticky stage. */ .hp-parts { padding: 110px 0 40px; position: relative; z-index: 2; margin-top: -100vh; background: var(--color-paper); } .hp-parts-head { text-align: center; max-width: 620px; margin: 0 auto 84px; } .hp-parts-head h2 { font-size: clamp(30px, 4vw, 44px); font-weight: var(--fw-semibold); color: var(--foreground); } .hp-parts-layout { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; } .hp-parts-nav { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 4px; } .hp-parts-nav a { text-decoration: none; color: var(--muted-foreground-faint); font-size: 16.5px; font-weight: 600; padding: 9px 0 9px 18px; border-left: 2px solid var(--border); letter-spacing: -0.015em; transition: color 0.2s ease, border-color 0.2s ease; } .hp-parts-nav a.active { color: var(--foreground); border-left-color: var(--bs-primary); } .hp-parts-nav a:hover { color: var(--foreground-soft); } /* ── Bento flow grids, homepage variant ──────────────────────────────────── The shared bento components (court-matching-flow / town-agencies-flow) carry a left description cell sized for the full-width sections on /features. Inside the parts column (wrap minus the sticky sidebar) that makes the grid too wide, so the homepage drops the desc cell and shows hatch | flow | sidebar only (Andrew, 2026-07-13). Scoped to .hp-group so /features is untouched. NOTE: the mobile stats odometer lives in the desc cell, so on the homepage stats only show ≥1025px (in the bento sidebar). */ .hp-group .bento-grid { grid-template-columns: 48px 1.6fr 1fr 48px; grid-template-areas: "lhatch flow sidebar rhatch"; } .hp-group .bento-desc { display: none; } @media (max-width: 1024px) { .hp-group .bento-grid { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "flow"; } } .hp-group { padding-bottom: 96px; } .hp-group + .hp-group { border-top: 1px solid var(--border); padding-top: 72px; } .hp-group-intro { margin-top: 14px; font-size: clamp(18px, 1.3vw, 22px); line-height: 1.42; font-weight: 500; letter-spacing: -0.02em; max-width:40rem; color: var(--muted-foreground); } .hp-group-intro strong { color: var(--foreground); font-weight: 650; } .hp-group-kicker { margin-top: 12px; font-size: 14.5px; color: var(--muted-foreground-faint); font-style: italic; } .hp-group-visual { margin: 30px 0 36px; } .hp-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 44px; } .hp-block h4 { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; color: var(--foreground); } .hp-block p { margin-top: 7px; font-size: 15px; color: var(--muted-foreground); line-height: 1.55; } /* ── Details section ─────────────────────────────────────────────────────── */ .hp-depth { background: var(--secondary); padding: 100px 0; } .hp-depth-head { max-width: 560px; margin-bottom: 52px; } .hp-depth-head h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: var(--fw-semibold); color: var(--foreground); } .hp-depth-head p { margin-top: 16px; color: var(--muted-foreground); font-size: 17px; } .hp-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .hp-detail-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; } .hp-detail-card h4 { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--foreground); } .hp-detail-card p { margin-top: 6px; font-size: 14.5px; color: var(--muted-foreground); line-height: 1.5; } .hp-depth-foot { margin-top: 44px; } .hp-depth-foot a { color: var(--foreground); font-weight: 600; text-decoration: none; font-size: 15.5px; border-bottom: 1px solid var(--bs-primary); padding-bottom: 2px; } .hp-depth-foot a:hover { color: var(--bs-primary); } /* ── Pricing (kept from mock's centred treatment) ────────────────────────── */ .hp-pricing { background: var(--secondary); padding: 100px 0; text-align: center; } .hp-pricing h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: var(--fw-semibold); color: var(--foreground); } .hp-price-line { margin-top: 18px; font-size: 18px; color: var(--muted-foreground); max-width: 520px; margin-left: auto; margin-right: auto; } .hp-price-big { margin-top: 34px; font-size: 54px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--foreground); } .hp-price-big small { font-size: 17px; font-weight: 500; color: var(--muted-foreground); letter-spacing: 0; } .hp-price-foot { margin-top: 10px; font-size: 14px; color: var(--muted-foreground-faint); } .hp-pricing .hp-hero-ctas { margin-top: 34px; } /* ── FAQ ("Straight answers") ────────────────────────────────────────────── */ .hp-faq { padding: 104px 0; } .hp-faq-inner { max-width: 720px; margin: 0 auto; } .hp-faq h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: var(--fw-semibold); text-align: center; margin-bottom: 44px; color: var(--foreground); } .hp-faq-list details { border-bottom: 1px solid var(--border); } .hp-faq-list details:first-child { border-top: 1px solid var(--border); } .hp-faq-list summary { cursor: pointer; list-style: none; padding: 20px 4px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--foreground); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .hp-faq-list summary::-webkit-details-marker { display: none; } .hp-faq-list summary::after { content: "+"; color: var(--muted-foreground-faint); font-weight: 500; font-size: 20px; transition: transform 0.2s ease; } .hp-faq-list details[open] summary::after { transform: rotate(45deg); } .hp-faq-list details p { padding: 0 4px 22px; color: var(--muted-foreground); font-size: 15.5px; max-width: 620px; } .hp-faq-list summary:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } .hp-faq-more { margin-top: 28px; text-align: center; font-size: 14.5px; color: var(--muted-foreground); } .hp-faq-more a { color: var(--foreground); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--bs-primary); padding-bottom: 1px; } .hp-faq-more a:hover { color: var(--bs-primary); } /* ── Close (fixed-dark, matches the landing close band) ──────────────────── */ .hp-close { background: var(--flock-bg); padding: 130px 0; text-align: center; } .hp-close h2 { color: var(--flock-ink); font-size: clamp(32px, 4.6vw, 52px); font-weight: var(--fw-semibold); letter-spacing: -0.035em; } .hp-close p { margin-top: 20px; color: var(--flock-muted); font-size: 18px; } .hp-close .hp-hero-ctas { margin-top: 38px; } .hp-close .btn-secondary { background: transparent; color: var(--flock-ink); border-color: color-mix(in srgb, var(--flock-ink) 22%, transparent); } .hp-close .btn-secondary:hover { background: color-mix(in srgb, var(--flock-ink) 8%, transparent); color: var(--flock-ink); border-color: color-mix(in srgb, var(--flock-ink) 40%, transparent); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 860px) { .hp-parts-layout { grid-template-columns: 1fr; gap: 0; } .hp-parts-nav { flex-direction: row; overflow-x: auto; position: sticky; top: 64px; z-index: 40; background: color-mix(in srgb, var(--background) 92%, transparent); backdrop-filter: blur(10px); padding: 10px 0; margin-bottom: 40px; gap: 20px; } .hp-parts-nav a { border-left: none; border-bottom: 2px solid transparent; padding: 4px 2px; white-space: nowrap; } .hp-parts-nav a.active { border-bottom-color: var(--bs-primary); } .hp-blocks { grid-template-columns: 1fr; } .hp-dash-body { grid-template-columns: 1fr; } .hp-dash-side { display: none; } .hp-dash-main { grid-template-columns: 1fr 1fr; } }