/* ============================================================================ LIGHT-THEME TRIAL for landing_v2.html — loaded only with ?theme=light ---------------------------------------------------------------------------- Question being tested: the app is dark, but would the *landing page* read better light (Koyfin)? Koyfin is not uniformly light — it alternates white, a pale grey band, and one dark band. This follows that: The whole page is light (decided 2026-09-28 — no dark bands): hero (dune photo) dark photo, unchanged testimonials LIGHT exchange logos LIGHT (marks flip to black) AI research LIGHT, in the "Air" treatment the user picked "Why" statement LIGHT tool deck LIGHT page and LIGHT app snapshots (tools-light/) stack cards LIGHT — four pale tints so they still read as four cards people / bento LIGHT footer LIGHT Rule of thumb for this conversion: a colour used as a light-on-dark FILL (the sand bars and chart marks) cannot simply be kept — cream on white is invisible. Those become ink or brand blue. Sand survives only where it is a background (the CTA pill, the bento tile, the footer's arrow bar). See docs/features/landing-and-billing.md. ========================================================================== */ /* ---------- 0. page shell -------------------------------------------------- */ body { background: #FFFFFF; } /* ---------- 0b. floating nav: frosted light pills instead of dark ---------- */ /* The hero itself stays a dark photo, so the pills only flip once the page has scrolled onto the white body (.nav-float is added by JS at scrollY > 24). */ @media (min-width: 901px) { body .nav.nav-float > .nav-left, body .nav.nav-float > .nav-right { background: rgba(255,255,255,0.82) !important; border-color: rgba(0,0,0,0.10) !important; box-shadow: 0 10px 30px -14px rgba(0,0,0,.28) !important; } body .nav.nav-float > .nav-left, body .nav.nav-float > .nav-left a, body .nav.nav-float > .nav-left button, body .nav.nav-float > .nav-left .logo-mark, body .nav.nav-float > .nav-right a:not(.btn-primary) { color: #0B0B0A !important; } /* keep the primary CTA a solid dark pill so it still reads as the action */ body .nav.nav-float > .nav-right .btn-primary { background: #0B0B0A !important; color: #fff !important; } } /* ---------- 1. page base: most of the page reads through these vars --------- */ .fx { --fx-bg: #FFFFFF; --fx-card: #FFFFFF; --fx-card2: #F7F7F5; --fx-line: rgba(0,0,0,0.10); --fx-text: #0B0B0A; --fx-muted: #6A6A64; --fx-acc: #455DDC; --lt-ink: #0B0B0A; --lt-ink2: #55554F; --lt-ink3: #8C8C85; --lt-hair: rgba(0,0,0,0.10); --lt-hair2: rgba(0,0,0,0.055); --lt-band: #F7F7F5; } .fx h2 { color: var(--lt-ink); } .fx .fx-eyebrow { color: var(--lt-ink3); } .fx .fx-eyebrow::before { display: none; } /* ---------- 2. testimonials ------------------------------------------------ */ .fx .fx-tm { border-color: var(--lt-hair); box-shadow: 0 1px 2px rgba(0,0,0,.03); } .fx .fx-tm b { color: var(--lt-ink); } .fx .fx-tm blockquote { color: var(--lt-ink2); } .fx .fx-tm-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .fx .fx-av { border-color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 12px 24px -12px rgba(0,0,0,.25); } /* ---------- 3. exchange logo band ------------------------------------------ */ /* the marks are rendered flat; flip them from white to black for a light band */ .fx .fx-exl img { filter: brightness(0) !important; opacity: .68 !important; } .fx .fx-exl:hover img { opacity: .95 !important; } .fx .fx-caption { color: var(--lt-ink3); } /* ---------- 4. "Why" statement --------------------------------------------- */ .fx .wf-h-lines { color: #CFCFC9; } .fx .wf-h-lines b { color: var(--lt-ink); } .fx .wf-h-note { color: var(--lt-ink3); } .fx .wf-h-text .wf-w { opacity: .16; } /* ---------- 5. tool deck: light page, dark app cards ----------------------- */ .fx .k4-icons { background: var(--lt-band); border-color: var(--lt-hair); } .fx .k4-sep { background: rgba(0,0,0,.10); } .fx .k4-ic, .fx .k4-arr { color: var(--lt-ink3); } .fx .k4-ic:hover { color: var(--lt-ink); background: rgba(0,0,0,.05); } .fx .k4-ic.is-on { color: #fff; background: var(--fx-acc); } .fx .k4-arr { border-color: var(--lt-hair); color: var(--lt-ink); } .fx .k4-arr:hover { background: rgba(0,0,0,.05); } .fx .k4-now b { color: var(--lt-ink); } .fx .k4-now span { color: var(--lt-ink2); } .fx .k4-now small { color: var(--lt-ink3); } /* the cards are frozen snapshots of the real app, now captured in its LIGHT theme (static/landing/tools-light/, built by `landing_snapshots.py --light`) */ .fx .k4-card { background: #fff; box-shadow: 0 40px 90px -50px rgba(0,0,0,.45); border-color: rgba(0,0,0,.12); } .fx .k4-card::after { background: #fff; } .fx .fx-kit { border-color: var(--lt-hair); } .fx .fx-kit-head { background: var(--lt-band); border-bottom-color: var(--lt-hair); } .fx .fx-kit-head b, .fx .fx-kit-txt b { color: var(--lt-ink); } .fx .fx-kit-row { border-top-color: var(--lt-hair); } .fx .fx-kit-row:hover { background: rgba(0,0,0,.03); } .fx .fx-kit-row:hover .fx-kit-go { color: var(--lt-ink); } .fx .fx-kit-ic { background: rgba(69,93,220,.10); color: #3B4FBF; } /* ---------- 6. mp-* sections + footer: converted to light ------------------ */ /* "Four ways in" stack cards, "Research that fits your life", "One subscription, every tool" and the footer. These were art-directed round dark colours, so this is a re-tint, not a recolour: every surface gets a pale counterpart, and anything that was a light-on-dark FILL (the sand bars, the sand chart marks) becomes an ink/blue fill — cream on white is invisible. */ .fx .mp, .fx .lf { --fx-card: #FFFFFF; --fx-card2: #F4F2EE; --fx-line: rgba(0,0,0,0.10); --fx-text: #0B0B0A; --fx-muted: #6A6A64; --mp-fill: #455DDC; /* replaces sand wherever sand was a fill on dark */ color: var(--lt-ink); } .fx .mp h2, .fx .lf h2 { color: var(--lt-ink); } .fx .mp .fx-eyebrow { color: var(--lt-ink3); } .fx .mp-head p { color: var(--lt-ink2); } /* --- 6a. stacked feature cards: four pale tints so they still read as four --- */ .fx .mp-card { box-shadow: 0 -12px 40px rgba(0,0,0,.07); border-color: rgba(0,0,0,.08); } /* Keyed to the card, not its position: the AI card came out on 2026-09-28 and :nth-child would have handed every survivor the wrong tint. */ .fx .mp-card[data-c="screener"] { background: #EEF0FB; } .fx .mp-card[data-c="charts"] { background: #F4F2EE; } .fx .mp-card[data-c="investors"] { background: #EAF5F0; } .fx .mp-card h3 { color: var(--lt-ink); } .fx .mp-card[data-c="screener"] h3 { color: #2E3E9E; } .fx .mp-card[data-c="investors"] h3 { color: #146B52; } .fx .mp-card > div > p { color: var(--lt-ink2); } /* the inner "screenshot" panel */ .fx .mp-vis { background: #fff; border-color: rgba(0,0,0,.08); box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* chat */ .fx .mp-me { background: #EFEDE9; } .fx .mp-ava { background: rgba(150,70,239,.14); color: #6B2FB5; } .fx .mp-gen { background: #F7F6F3; } .fx .mp-gen figcaption, .fx .mp-gq span { color: var(--lt-ink3); } .fx .mp-gq i.a { background: var(--mp-fill); } /* the NVDA key swatch is an inline style="background:#F3DFC3" in the markup */ .fx .mp-key i:first-child { background: var(--mp-fill) !important; } .fx .mp-srcs span { background: #F2F0EC; color: var(--lt-ink2); } /* screener */ .fx .mp-fbar { background: #F7F6F3; color: var(--lt-ink2); } .fx .mp-fbar span { background: rgba(69,93,220,.12); color: #2E3E9E; } .fx .mp-srow { border-bottom-color: rgba(0,0,0,.07); } .fx .mp-srow.h, .fx .mp-gfoot { color: var(--lt-ink3); } /* line items */ /* `color` here is the sparkline's currentColor, not text: make it match the bars */ .fx .mp-g4 figure { background: #F7F6F3; color: var(--mp-fill); } .fx .mp-g4 figcaption { color: var(--lt-ink3); } .fx .mp-g4 figcaption b { color: var(--lt-ink); } .fx .mp-g4 .bar { fill: rgba(69,93,220,.28); } .fx .mp-g4 .bar.hot { fill: var(--mp-fill); } .fx .mp-tk u { color: var(--lt-ink3); } /* investors */ .fx .mp-inv { border-bottom-color: rgba(0,0,0,.07); } .fx .mp-wbar { background: rgba(0,0,0,.07); } .fx .mp-inv .nm u, .fx .mp-inv .hold { color: var(--lt-ink3); } .fx .mp-inv .hold b { color: var(--lt-ink); } /* --- 6b. trust row + report preview (not called today; kept in step) -------- */ .fx .mp-tr { background: #fff; border-color: rgba(0,0,0,.08); } .fx .mp-tr i { background: rgba(69,93,220,.10); color: #2E3E9E; } .fx .mp-rep-copy p, .fx .mp-rmeta { color: var(--lt-ink2); } .fx .mp-rmeta b { color: var(--lt-ink); } .fx .mp-rp { box-shadow: 0 30px 80px -40px rgba(0,0,0,.30); } /* --- 6c. people carousel: the photos carry it, so just the chrome ----------- */ .fx .mp-arrows button { background: #fff; border-color: rgba(0,0,0,.12); color: var(--lt-ink); } .fx .mp-arrows button:hover { background: #F4F2EE; } .fx .mp-pc h3 { color: var(--lt-ink); } .fx .mp-pc p { color: var(--lt-ink2); } .fx .mp-pc-img { background: #F4F2EE; } /* --- 6d. bento: white tiles; blue and sand stay (both read on white) -------- */ .fx .mp-t { background: #fff; border-color: rgba(0,0,0,.09); box-shadow: 0 1px 2px rgba(0,0,0,.03); } .fx .mp-t .lab { color: var(--lt-ink3); } .fx .mp-t h3, .fx .mp-t .v { color: var(--lt-ink); } .fx .mp-t .mp-sub { color: var(--lt-ink2); } .fx .mp-t.blue { background: #455DDC; border-color: transparent; color: #fff; } .fx .mp-t.blue h3, .fx .mp-t.blue .v { color: #fff; } .fx .mp-t.blue .lab { color: rgba(255,255,255,.7); } .fx .mp-t.sand { background: var(--mp-sand); color: var(--mp-ink); border-color: transparent; } .fx .mp-t.sand h3, .fx .mp-t.sand .v { color: var(--mp-ink); } .fx .mp-t.sand .mp-sub { color: rgba(21,18,13,.65); } .fx .mp-t.sand .lab { color: rgba(21,18,13,.6); } /* the fair-value slider sat on a dark tile: light track, white pin rings */ .fx .mp-fv-track { background: #E8E6E1; } .fx .mp-fv-track .px, .fx .mp-fv-track .fv { border-color: #fff; } .fx .mp-fv-track .px { background: var(--lt-ink); } .fx .mp-fv-track .band { background: rgba(67,209,167,.30); } .fx .mp-fv-lab span:last-child { color: #17916D; } /* teal darkened to read on white */ .fx .mp-faces img { border-color: #fff; } .fx .mp-bb i { background: var(--mp-fill); } .fx .mp-toast { border: 1px solid rgba(0,0,0,.08); box-shadow: 0 8px 24px rgba(0,0,0,.08); } /* --- 6e. footer ------------------------------------------------------------ */ .fx .lf .lf-lit { color: var(--lt-ink); } /* NOTE: `.lf-armed` is set on , so it is an ANCESTOR of .fx — `.fx .lf-armed` never matches. The override has to lead with the html class. */ html.lf-armed .fx .lf-lit span { color: rgba(0,0,0,0.13); } html.lf-armed .fx .lf-lit span.on { color: var(--lt-ink); } /* the cream arrow bar already reads on white — left as it is */ .fx .lf-links a { color: var(--lt-ink); border-bottom-color: rgba(0,0,0,0.25); } .fx .lf-links a:hover { border-bottom-color: var(--lt-ink); } .fx .lf-links a + a { color: var(--lt-ink3); border-bottom-color: transparent; } .fx .lf-links a + a:hover { color: var(--lt-ink); } .fx .lf-row, .fx .lf-legal { border-top-color: rgba(0,0,0,0.10); } .fx .lf-brand { color: var(--lt-ink); } .fx .lf-about p, .fx .lf-cols a, .fx .lf-legal, .fx .lf-legal a { color: var(--lt-ink2); } .fx .lf-cols h5 { color: var(--lt-ink); } .fx .lf-cols a:hover, .fx .lf-legal a:hover { color: var(--lt-ink); } /* ============================================================================ 7. AI RESEARCH SECTION — "Air" (the treatment the user picked) Paper base + centred type, pill steps, narrower window on a shadow. The chart SVGs hard-code dark colours as presentation attributes, so each one needs an explicit CSS override (CSS beats a value inherited from ). ========================================================================== */ .fx .wf-ai-top h2 { color: var(--lt-ink); letter-spacing: -.035em; } .fx .wf-ai-step { color: var(--lt-ink3); } .fx .wf-ai-step.on, .fx .wf-ai-step.done { color: var(--lt-ink); } .fx .wf-ai-foot { color: var(--lt-ink3); } .fx .wf-ai-win { background: #fff; } .fx .wf-ai-rail { background: var(--lt-band); border-right-color: var(--lt-hair2); } .fx .wf-ai-new { color: var(--lt-ink); border-color: var(--lt-hair); } .fx .wf-ai-rail small { color: var(--lt-ink3); } .fx .wf-ai-hist { color: var(--lt-ink2); } .fx #wf-ai-hist-new.on { background: rgba(0,0,0,.055); color: var(--lt-ink); } .fx .wf-ai-railfoot { color: var(--lt-ink3); } .fx .wf-ai-main { background: #fff; } .fx .wf-ai-bar { border-bottom-color: var(--lt-hair2); } .fx .wf-ai-model { color: var(--lt-ink3); border-color: var(--lt-hair); } .fx .wf-ai-view::after { background: linear-gradient(rgba(255,255,255,0), #fff); } .fx .wf-ai-greet { color: var(--lt-ink); } .fx .wf-ai-user { background: #F2F2F0; color: var(--lt-ink); } .fx .wf-ai-tool { color: var(--lt-ink2); } .fx .wf-ai-tool em { color: var(--lt-ink3); } .fx .wf-ai-tool .ic { border-color: rgba(0,0,0,.16); border-top-color: var(--lt-ink2); } .fx .wf-ai-comp { background: #fff; border-color: var(--lt-hair); } .fx .wf-ai-comp.typing { border-color: rgba(0,0,0,.28); } .fx .wf-ai-ph { color: var(--lt-ink3); } .fx .wf-ai-caret { background: var(--lt-ink); } .fx .wf-ai-send { background: rgba(0,0,0,.06); color: var(--lt-ink3); } .fx .wf-ai-send.ready { background: var(--lt-ink); color: #fff; } .fx .wf-ai-hd-t small, .fx .wf-ai-donut .c small, .fx .wf-ai-range .note, .fx .wf-ai-range .ax { color: var(--lt-ink3); } .fx .wf-ai-hd-t h3, .fx .wf-ai-donut .c b, .fx .wf-ai-range .nm { color: var(--lt-ink); } .fx .wf-ai-logos span { border-color: #fff; } .fx .wf-ai-stream { color: var(--lt-ink2); } .fx .wf-ai-sum { color: var(--lt-ink); } .fx .wf-ai-stream .sw.head::after { background: var(--lt-ink2); } .fx .wf-ai-kpi > small { color: var(--lt-ink2); } .fx .wf-ai-kpi > small em { color: var(--lt-ink3); } .fx .wf-ai-kpi .row b { color: var(--lt-ink); } .fx .wf-ai-kpi .row + .row b { color: var(--lt-ink2); } .fx .wf-ai-kpi .tr { background: rgba(0,0,0,.06); } .fx .wf-ai-ch { color: var(--lt-ink2); } .fx .wf-ai-ch .lg { color: var(--lt-ink3); } .fx .wf-ai-range .trk { background: rgba(0,0,0,.06); } .fx .wf-ai-range .band { background: rgba(0,0,0,.10); } .fx .wf-ai-range .med { background: var(--lt-ink3); } .fx .wf-ai-range .mk { border-color: #fff; } .fx .wf-ai-conf .dots i { background: var(--lt-ink); } .fx .wf-ai-conf .dots i.off { background: rgba(0,0,0,.10); } .fx .wf-ai-conf span { color: var(--lt-ink); } .fx .wf-ai-conf small { color: var(--lt-ink3); } .fx .wf-ai-donut ul { color: var(--lt-ink2); } /* SVG presentation-attribute overrides */ .fx .wf-ai-area g[stroke] line { stroke: rgba(0,0,0,.08); } .fx .wf-ai-area text { fill: var(--lt-ink3); } .fx .wf-ai-endl text { fill: var(--lt-ink); } .fx .wf-ai-endl circle { stroke: #fff; } .fx .wf-ai-radar g[stroke] polygon, .fx .wf-ai-radar g[stroke] path { stroke: rgba(0,0,0,.10); } .fx .wf-ai-radar text { fill: var(--lt-ink2); } .fx .wf-ai-donut svg > circle { stroke: rgba(0,0,0,.07); } /* --- Air layout: centred type, pill steps, narrower window ----------------- */ .fx .wf-ai-pin { padding-top: 92px; } .fx .wf-ai-top { flex-direction: column; align-items: center; text-align: center; gap: 0; margin-bottom: 26px; } .fx .wf-ai-top h2 { font-size: clamp(32px, 3.7vw, 52px); letter-spacing: -.04em; line-height: 1.03; max-width: 16ch; } .fx .wf-ai-top .fx-eyebrow { display: none; } .fx .wf-ai-steps { gap: 0; margin-top: 18px; border: 1px solid var(--lt-hair); border-radius: 99px; padding: 4px; } .fx .wf-ai-step { padding: 7px 20px; min-width: 0; font-size: 13px; border-radius: 99px; transition: background .3s, color .3s; } .fx .wf-ai-step small, .fx .wf-ai-step .bar { display: none; } .fx .wf-ai-step.on, .fx .wf-ai-step.done { background: #F2F2F0; } .fx .wf-ai-win { max-width: 1080px; margin: 0 auto; border: 1px solid var(--lt-hair2); border-radius: 16px; box-shadow: 0 30px 70px -40px rgba(0,0,0,.35); height: min(calc(100vh - 372px), 620px); } .fx .wf-ai-foot { text-align: center; margin-top: 16px; } /* report: hairline sections instead of filled tiles */ .fx .wf-ai-rep { gap: 22px; } .fx .wf-ai-kpi, .fx .wf-ai-card { border-radius: 0; border: 0; border-top: 1px solid var(--lt-hair); background: none; padding-left: 0; padding-right: 0; } .fx .wf-ai-kpis, .fx .wf-ai-row2, .fx .wf-ai-row3 { gap: 0 26px; } .fx .wf-ai-verdict { background: none; border: 0; border-left: 1px solid var(--lt-hair); border-radius: 0; padding: 2px 0 2px 16px; } .fx .wf-ai-verdict small { color: var(--lt-ink3); } .fx .wf-ai-bl { background: none; border: 0; border-top: 2px solid var(--lt-ink); border-radius: 0; padding: 14px 0 0; } .fx .wf-ai-bl small { color: var(--lt-ink3); } .fx .wf-ai-bl .wf-ai-stream { color: var(--lt-ink); } .fx .wf-ai-src { gap: 4px 18px; } .fx .wf-ai-src span { border: 0; background: none; padding: 4px 0; color: var(--lt-ink2); } .fx .wf-ai-src span::before { color: var(--lt-ink3); } .fx .wf-ai-follow span { color: var(--lt-ink2); border-color: var(--lt-hair); } @media (max-width: 900px) { .fx .wf-ai-top { margin-bottom: 16px; } .fx .wf-ai-win { height: calc(100vh - 300px); } .fx .wf-ai-foot { text-align: center; } } /* ============================================================================ 8. FOLLOW-UPS (2026-09-28) — hero, Products dropdown, deck arrows, footer logo ========================================================================== */ /* ---- 8a. Hero ------------------------------------------------------------- DECIDED 2026-09-28: plain white, no photo. ?hero= still switches for comparison: white (default) no photo at all bright the dune photo lifted to a pale wash photo the old dark hero The hero markup is unchanged; this only re-skins it. */ html:not([data-hero="bright"]):not([data-hero="photo"]) .hero-card { background: #FFFFFF; } html:not([data-hero="bright"]):not([data-hero="photo"]) .hero-card-bg { display: none !important; } html:not([data-hero="bright"]):not([data-hero="photo"]) .hero-card::after { display: none !important; } html:not([data-hero="bright"]):not([data-hero="photo"]) .hero-grain { display: none; } html[data-hero="bright"] .hero-card { background: #FFFFFF; } html[data-hero="bright"] .hero-card-bg { filter: brightness(1.72) saturate(.62) contrast(.78); opacity: calc((1 - var(--hp, 0) * 1.3) * .85); } html[data-hero="bright"] .hero-card::after { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 35%, rgba(255,255,255,.45) 65%, #FFFFFF 100%); } html[data-hero="bright"] .hero-grain { opacity: 0; } /* ink type + a light ask bar for both light heroes */ html:not([data-hero="photo"]) .hq-h { color: #0B0B0A; text-shadow: none; } html:not([data-hero="photo"]) .hq-h span { color: rgba(11,11,10,.42); } html:not([data-hero="photo"]) .hq-sub, html:not([data-hero="photo"]) .hero-sub { color: rgba(11,11,10,.55); } html:not([data-hero="photo"]) .hq-meta { color: rgba(11,11,10,.45); } html:not([data-hero="photo"]) .hq-ask { background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.12); color: #0B0B0A; box-shadow: 0 12px 40px -22px rgba(0,0,0,.35); } html:not([data-hero="photo"]) .hq-ask:hover { border-color: rgba(0,0,0,.24); } html:not([data-hero="photo"]) .hq-in > svg { color: #8C8C85; } html:not([data-hero="photo"]) .hq-q::after { background: #0B0B0A; } html:not([data-hero="photo"]) .hq-go { background: #0B0B0A; color: #fff; } html:not([data-hero="photo"]) .hq-res { border-top-color: rgba(0,0,0,.09); } html:not([data-hero="photo"]) .hq-ic { background: #F0EEEA; color: #55554F; } html:not([data-hero="photo"]) .hq-ic.ai { background: rgba(150,70,239,.14); color: #6B2FB5; } html:not([data-hero="photo"]) .hq-v { color: #8C8C85; } /* the nav sits on the hero before it scrolls, so its bare state needs ink too */ html:not([data-hero="photo"]) body > .nav .nav-links > a, html:not([data-hero="photo"]) body > .nav .dd-trigger { color: rgba(11,11,10,.62); } html:not([data-hero="photo"]) body > .nav .nav-links > a:hover, html:not([data-hero="photo"]) body > .nav .dd-trigger:hover { color: #0B0B0A; background: rgba(0,0,0,.05); } html:not([data-hero="photo"]) body > .nav .brand, html:not([data-hero="photo"]) body > .nav .logo-mark { color: #0B0B0A; } html:not([data-hero="photo"]) body > .nav .btn-ghost { color: rgba(11,11,10,.65); border-color: rgba(0,0,0,.18); } html:not([data-hero="photo"]) .hero-explore span, html:not([data-hero="photo"]) .hero-explore svg { color: rgba(11,11,10,.45) !important; } /* ---- 8b. Products dropdown (the .pm-panel mega menu) ---------------------- */ .pm-panel { background: rgba(255,255,255,0.96); color: #0B0B0A; border-color: rgba(0,0,0,0.10); box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset, 0 24px 60px -20px rgba(0,0,0,0.22); } .pm-label { color: rgba(11,11,10,0.45); border-bottom-color: rgba(0,0,0,0.08); } .pm-name { color: rgba(11,11,10,0.92); } .pm-desc { color: rgba(11,11,10,0.52); } .pm-item:hover .pm-name, .pm-item:focus-visible .pm-name { color: #455DDC; } .pm-new { color: #2E3E9E; background: rgba(69,93,220,0.10); border-color: rgba(69,93,220,0.22); } .pm-feature { background: #F7F6F3; border-color: rgba(0,0,0,0.07); } .pm-feature:hover { border-color: rgba(0,0,0,0.18); } /* the featured card's screenshot is a static asset; use the light capture (app/static/img/pipeline-screener-light.png, taken with the same script idea as the tool snapshots). CSS can't change an src, so swap it for a background. */ .pm-shot { background: #ECEAE5 url("/static/img/pipeline-screener-light.png") center top / cover no-repeat; } .pm-shot img { display: none; } .pm-ft-label { color: #455DDC; } .pm-ft-title { color: #0B0B0A; } .pm-ft-desc { color: rgba(11,11,10,0.5); } /* mobile menu sheet */ @media (max-width: 900px) { .mnav { background: rgba(255,255,255,0.95); color: #0B0B0A; } .mnav-top .brand .b-mark { color: #0B0B0A; } .mnav-x { border-color: rgba(0,0,0,0.14); background: rgba(0,0,0,0.03); color: #0B0B0A; } .mnav-label { color: rgba(11,11,10,0.45); border-bottom-color: rgba(0,0,0,0.08); } .mnav-desc { color: rgba(11,11,10,0.5); } .mnav-item:active .mnav-name { color: #455DDC; } .mnav-row { border-top-color: rgba(0,0,0,0.08); } .mnav-row svg { color: rgba(11,11,10,0.4); } .mnav-cta { border-top-color: rgba(0,0,0,0.08); } .mnav-ghost { border-color: rgba(0,0,0,0.22); } .mnav-solid { background: #0B0B0A; color: #fff !important; } } /* ---- 8c. Tool-deck arrows: invisible on white (white icon, faint border) --- */ .fx .k4-arr { background: #fff !important; border: 1px solid rgba(0,0,0,0.14) !important; color: #0B0B0A !important; box-shadow: 0 2px 10px -4px rgba(0,0,0,.22); } .fx .k4-arr:hover { background: #F4F2EE !important; border-color: rgba(0,0,0,0.28) !important; } .fx .k4-arr:focus-visible { outline: 2px solid #455DDC; outline-offset: 2px; } /* ---- 8d. Footer CTA strip: put the logo mark in the cream bar ------------- */ .fx .lf-cbar::before { content: ""; flex: none; width: 46px; height: 46px; margin-right: 4px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; } @media (max-width: 720px) { .fx .lf-cbar::before { width: 34px; height: 34px; } } /* ============================================================================ 9. HERO TUNING (2026-09-28) — the meta line, the ask bar, and a bottom peek Three independent switches, so they can be judged separately: ?meta=0|1|2|3 0 = the original mono line, 1 = default ?bar=0|1|2|3 0 = the plain bar, 1 = default ?peek=0|1|2|3 0 = default (nothing), 2 = the real screener peeking ?tune=1 shows a small panel to flip them live. Restraint on purpose: no glows, no heavy shadows, no terminal styling. ========================================================================== */ /* ---- 9a. "7-day trial · No credit card" ---------------------------------- */ /* 1: plain Inter — the mono read as terminal-y and the user disliked it */ html[data-meta="1"] .hq-meta { font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: rgba(11,11,10,.5); margin-top: 26px; } /* 2 (PICKED, default): Inter with a teal dot leading it */ html:not([data-meta]) .hq-meta, html[data-meta="2"] .hq-meta { font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: rgba(11,11,10,.55); margin-top: 26px; display: inline-flex; align-items: center; gap: 8px; } html:not([data-meta]) .hq-meta::before, html[data-meta="2"] .hq-meta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #43D1A7; flex: none; } /* 3: one quiet pill */ html[data-meta="3"] .hq-meta { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: rgba(11,11,10,.62); margin-top: 26px; display: inline-block; padding: 7px 16px; border-radius: 999px; background: #F4F2EE; border: 1px solid rgba(0,0,0,.06); } /* ---- 9b. the ask bar ------------------------------------------------------ */ /* 1: brand-blue send button + a tinted search icon. One colour, nothing else. */ html[data-bar="1"] .hq-go { background: #455DDC; color: #fff; } html[data-bar="1"] .hq-in > svg { color: #455DDC; } html[data-bar="1"] .hq-q::after { background: #455DDC; } /* 2 (PICKED, default): a brand edge down the left of the bar */ html:not([data-bar]) .hq-ask, html[data-bar="2"] .hq-ask { position: relative; } html:not([data-bar]) .hq-ask::after, html[data-bar="2"] .hq-ask::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(#455DDC, #43D1A7); } html:not([data-bar]) .hq-in, html[data-bar="2"] .hq-in { padding-left: 26px; } html:not([data-bar]) .hq-go, html[data-bar="2"] .hq-go { background: #0B0B0A; color: #fff; } /* 3: a gradient hairline round the whole bar (padding-box/border-box trick, no glow) */ html[data-bar="3"] .hq-ask { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #455DDC, #9646EF 45%, #43D1A7) border-box; } html[data-bar="3"] .hq-ask:hover { border-color: transparent; } html[data-bar="3"] .hq-go { background: #455DDC; color: #fff; } html[data-bar="3"] .hq-in > svg { color: #6B2FB5; } /* ---- 9c. something peeking at the bottom, so the hero is less bare -------- */ /* Only for the white / bright heroes: on the photo hero ::after is the scrim. */ html:not([data-hero="photo"]) .hq { padding-bottom: 0; } html:not([data-hero="photo"])[data-peek="1"] .hero-card::after, html:not([data-hero="photo"])[data-peek="2"] .hero-card::after { content: ""; display: block !important; position: absolute; z-index: 2; /* the base rule uses `inset: 0`, so top/right must be cleared or the height is measured from the TOP of the hero and the peek lands under the nav */ top: auto; right: auto; left: 50%; transform: translateX(-50%); bottom: 0; width: min(1100px, 88vw); height: clamp(90px, 14vh, 170px); background: #fff; border: 1px solid rgba(0,0,0,.10); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -18px 50px -30px rgba(0,0,0,.35); pointer-events: none; } /* 2: the real light screener, cropped by the fold */ html:not([data-hero="photo"])[data-peek="2"] .hero-card::after { background: #fff url("/static/img/pipeline-screener-light.png") center top / 100% auto no-repeat; } /* 3: a quiet scroll cue instead of a card */ html:not([data-hero="photo"])[data-peek="3"] .hero-card::after { content: "Scroll"; display: grid !important; place-items: center; position: absolute; top: auto; right: auto; left: 50%; transform: translateX(-50%); /* .hero-card is 100vh + 40px, so 26px from its bottom is off-screen */ bottom: 66px; z-index: 2; width: auto; height: auto; padding: 0; font: 500 12.5px var(--sans); letter-spacing: .14em; text-transform: none; color: rgba(11,11,10,.38); border: 0; background: none; pointer-events: none; } /* ---- 9d. the tuner panel (?tune=1) --------------------------------------- */ #hero-tune { position: fixed; left: 16px; bottom: 16px; z-index: 999; font: 500 12px var(--sans); background: rgba(20,20,20,.94); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; backdrop-filter: blur(8px); } #hero-tune .r { display: flex; align-items: center; gap: 6px; } #hero-tune .r > b { width: 44px; font-weight: 500; color: #8A92A6; } #hero-tune button { font: inherit; color: #B9BECB; background: none; border: 1px solid rgba(255,255,255,.16); padding: 5px 10px; border-radius: 7px; cursor: pointer; } #hero-tune button.on { background: #fff; color: #111; border-color: #fff; } /* ---- 9e. peeks that FLOW into the page (2026-09-28) ----------------------- peek=2 was liked but it is clipped dead by `.hero-card { overflow: hidden }`, so it ends in a hard horizontal cut. Three ways to fix that: 4 same card, masked so the screenshot dissolves into the page 5 the window straddles the fold and carries on INTO the next section 6 5 + a soft bottom, so the window ends by fading rather than stopping 4 stays inside the hero. 5 and 6 cannot: anything in `.hero-card` is clipped, so they hang off the first section below it (`.fx-join::before`) with a negative margin that pulls them up over the hero, and a z-index above the hero's 60. */ /* 4: dissolve, no hard edge */ html:not([data-hero="photo"])[data-peek="4"] .hero-card::after { content: ""; display: block !important; position: absolute; z-index: 2; top: auto; right: auto; left: 50%; transform: translateX(-50%); bottom: 0; width: min(1100px, 88vw); height: clamp(150px, 22vh, 260px); background: #fff url("/static/img/pipeline-screener-light.png") center top / 100% auto no-repeat; border: 1px solid rgba(0,0,0,.10); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -18px 50px -30px rgba(0,0,0,.30); pointer-events: none; -webkit-mask-image: linear-gradient(#000 38%, rgba(0,0,0,.35) 76%, transparent 100%); mask-image: linear-gradient(#000 38%, rgba(0,0,0,.35) 76%, transparent 100%); } /* 5 + 6: a real window that continues into the page */ /* `.fx` is `position: relative; z-index: 1`, which is a stacking context — a big z-index on the pseudo-element inside it still loses to `.hero`'s z-index: 60. The section itself has to be lifted above the hero. */ html:not([data-hero="photo"])[data-peek="5"] .fx, html:not([data-hero="photo"])[data-peek="6"] .fx { z-index: 61; } html:not([data-hero="photo"])[data-peek="5"] .fx-join, html:not([data-hero="photo"])[data-peek="6"] .fx-join { position: relative; padding-top: 0; } html:not([data-hero="photo"])[data-peek="5"] .fx-join::before, html:not([data-hero="photo"])[data-peek="6"] .fx-join::before { content: ""; display: block; position: relative; z-index: 61; width: min(1100px, 88vw); height: clamp(340px, 46vh, 560px); /* the extra 40px cancels `.hero-card`'s `100vh + 40px` buffer */ margin: calc(-40px - clamp(190px, 25vh, 300px)) auto 100px; background: #fff url("/static/img/pipeline-screener-light.png") center top / 100% auto no-repeat; border: 1px solid rgba(0,0,0,.10); border-radius: 16px; box-shadow: 0 30px 70px -45px rgba(0,0,0,.40); pointer-events: none; } /* 6: no bottom border, image fades out — the window ends softly */ html:not([data-hero="photo"])[data-peek="6"] .fx-join::before { border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -18px 50px -30px rgba(0,0,0,.28); -webkit-mask-image: linear-gradient(#000 60%, transparent 100%); mask-image: linear-gradient(#000 60%, transparent 100%); } /* ---- 9f. peek, round 2 (2026-09-28) -------------------------------------- The user rejected 1–6: a mocked window or a screenshot of the app is not what should sit under the hero. Two directions instead — A. lift something the page ALREADY has up under the hero: 7 the testimonial cards (they are the next section anyway) 8 the "26 exchanges" logo band B. something new that is not a picture of the product: 9 a live ticker strip (revives `.ticker-strip` + `buildTicker()`, which are still in landing_v2.html but had lost their markup) 10 a band of the three numbers the page already claims PICKED 2026-09-28: 8, and it is the default. 7/8 use the same trick as 5/6: `.hero-card` is `overflow: hidden`, so a real peek has to come from OUTSIDE the hero and be pulled up over it. */ /* The peek rules below lift `.fx` to z-index 61 so the band can sit over the hero. The fixed nav is z-index 80 AND lives outside .hero now (see landing_v2.html) — inside it, it inherited .hero's z-index 60 and every section scrolling past painted over it. */ html:not([data-hero="photo"]):not([data-peek]) .fx, html:not([data-hero="photo"])[data-peek="7"] .fx, html:not([data-hero="photo"])[data-peek="8"] .fx, html:not([data-hero="photo"])[data-peek="9"] .fx, html:not([data-hero="photo"])[data-peek="10"] .fx { z-index: 61; } /* 7: the review cards rise above the fold, ahead of their own heading */ html:not([data-hero="photo"])[data-peek="7"] .fx-join { display: flex; flex-direction: column; padding-top: 0; } html:not([data-hero="photo"])[data-peek="7"] .fx-tm-marquee { order: -1; position: relative; z-index: 61; margin-top: calc(-40px - clamp(150px, 19vh, 230px)); margin-bottom: 110px; } /* 8: the exchange band moves up under the hero (logo strip under a hero is the oldest trick there is, and it is already written) */ html:not([data-hero="photo"]):not([data-peek]) .fx, html:not([data-hero="photo"])[data-peek="8"] .fx { display: flex; flex-direction: column; } html:not([data-hero="photo"]):not([data-peek]) .fx-exch, html:not([data-hero="photo"])[data-peek="8"] .fx-exch { order: -1; position: relative; z-index: 61; margin-top: calc(-40px - clamp(140px, 17vh, 200px)); padding-top: 0; padding-bottom: 110px; } html:not([data-hero="photo"]):not([data-peek]) .fx-exch .fx-logo-grid, html:not([data-hero="photo"])[data-peek="8"] .fx-exch .fx-logo-grid { margin-top: 30px; } /* 9 + 10: injected by the trial script, just under the hero */ .hero-peek { position: relative; z-index: 61; pointer-events: none; margin-top: calc(-40px - clamp(90px, 12vh, 140px)); } /* 9: ticker */ .hero-peek.tick { border-top: 1px solid rgba(0,0,0,.09); border-bottom: 1px solid rgba(0,0,0,.09); background: #fff; overflow: hidden; white-space: nowrap; margin-bottom: 96px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); } .hero-peek.tick .track { display: inline-flex; gap: 48px; padding: 16px 0; animation: marquee 50s linear infinite; font-family: var(--mono); font-size: 12.5px; color: #55554F; } .hero-peek.tick .track span b { color: #0B0B0A; font-weight: 500; margin-right: 8px; } .hero-peek.tick .track span .up { color: #17916D; margin-left: 8px; } .hero-peek.tick .track span .dn { color: #C2264B; margin-left: 8px; } @media (prefers-reduced-motion: reduce) { .hero-peek.tick .track { animation: none; } } /* 10: three numbers */ .hero-peek.nums { display: grid; grid-template-columns: repeat(3, 1fr); width: min(1100px, 88vw); margin-left: auto; margin-right: auto; margin-bottom: 110px; border-top: 1px solid rgba(0,0,0,.10); } .hero-peek.nums div { padding: 34px 10px 0; text-align: center; } .hero-peek.nums b { display: block; font-family: var(--display); font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.035em; color: #0B0B0A; font-variant-numeric: tabular-nums; } .hero-peek.nums span { display: block; margin-top: 6px; font-size: 13.5px; color: rgba(11,11,10,.5); } @media (max-width: 700px) { .hero-peek.nums { grid-template-columns: 1fr; gap: 22px; } } /* ---- 9g. where "Join thousands of investors" sits (2026-09-28) ------------ With the exchange band peeking (peek 8), the reviews land immediately after it, so the page opens with two blocks of social proof before showing anything. `?join=` moves the section, using flex order on `.fx` (already a flex column for the peek). Every sibling gets an explicit order so the section can be dropped between any two of them. 0 where it is now, straight after the peek 1 after the AI research section 2 after the tool deck 3 last, just before the footer (PICKED 2026-09-28, the default) */ html:not([data-hero="photo"]) .fx { display: flex; flex-direction: column; } html:not([data-hero="photo"]) .fx-exch { order: -10; } html:not([data-hero="photo"]) .wf-ai-track { order: 10; } html:not([data-hero="photo"]) .wf-h-track { order: 20; } html:not([data-hero="photo"]) .mp[data-port="stack"] { order: 30; } html:not([data-hero="photo"]) .fx-kit-sec { order: 40; } html:not([data-hero="photo"]) .mp[data-port="people"] { order: 50; } html:not([data-hero="photo"]) .mp[data-port="bento"] { order: 60; } html:not([data-hero="photo"]) .lf { order: 70; } /* _landing_footer.html emits TWO siblings —
and