/* ChipFlip — marketing landing page (Fable design, reports/landing-mockup-v1.html). Only classes NOT already in site.css — the landing header/footer/buttons reuse .site-header/.site-footer/.logo/.wrap/.btn/.eyebrow/.disclosure as-is (they're already loaded on this page and already match). */ /* First-visit gating — default state is the tool, landing.js is the exception. static/js/landing-gate.js (blocking, loads first) adds "landing" to before first paint when there's no returning- visitor signal in localStorage; without JS (or with it disabled) this stays absent and the tool shows, same as it always has. The tool isn't one element — .cf-root, the Screener overlay, the mobile tab bar, the mobile search overlay, and every modal/sheet are all separate direct children of (see templates/index.html), not nested inside .cf-root. Hiding .cf-root alone left the mobile tab bar and Screener overlay visibly bleeding through on top of the landing page — found live, not guessed. Hiding everything under except #landing-root by exclusion is what actually covers all of them, present and future, instead of chasing each class by name. */ #landing-root { display: none; } html.landing #landing-root { display: block; } html.landing body > *:not(#landing-root):not(noscript) { display: none; } /* Real links for crawl discovery (a category page's own product list, and every page's "browse by category" footer nav) — not meant to be seen, the real interactive versions live in the JS-driven tool. Hidden unconditionally, independent of the landing/tool toggle above: #landing-root itself IS visible on the actual landing page, and this content was never part of that approved design. See the HTML comment above these elements in templates/index.html for why they exist. */ .cf-crawl-links { display: none; } /* scanner.css locks html/body to a fixed, non-scrolling viewport height (height:100%; overflow:hidden) — correct for the tool's fixed 3-pane shell, but it silently clipped the landing page to one screenful with no way to scroll to anything below the fold. Found live: the page only ever showed ~550-800px of content regardless of viewport size. Higher specificity than scanner.css's plain `html,body` selector, so this wins regardless of link order. */ html.landing, html.landing body { height: auto; overflow: visible; } .nav-skip { font-family: var(--mono); font-size: 13px; color: var(--text-secondary); } .nav-skip:hover { color: var(--text-primary); } /* ---- Hero ---- */ .hero { padding: 84px 0 56px; } .hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.06; margin: 14px 0 18px; letter-spacing: -.01em; } .hero h1 em { font-style: normal; color: var(--margin); } .hero .sub { font-size: 18px; line-height: 1.6; color: var(--text-secondary); max-width: 46ch; margin: 0 0 30px; } .cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cta-row .btn-ghost { border: none; padding: 0; } .op-note { font-family: var(--mono); font-size: 13px; } /* DYNAMIC: rendered by landing.js from /api/products — see its comment for exactly which fields feed which span. Never hardcoded. */ .stat-line { margin-top: 34px; font-family: var(--mono); font-size: 13px; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; min-height: 1.4em; } .stat-line b { color: var(--text-primary); font-weight: 600; } /* ---- Hero proof card: a real slice of the Screener, filled by landing.js ---- */ .proof-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(46,60,86,.12); overflow: hidden; } .proof-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--used); box-shadow: 0 0 0 3px rgba(22,163,74,.18); animation: cf-pulse 2s infinite; flex-shrink: 0; } @keyframes cf-pulse { 50% { box-shadow: 0 0 0 6px rgba(22,163,74,.06); } } .proof-table { width: 100%; border-collapse: collapse; font-size: 14px; } .proof-table th { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); text-align: right; padding: 10px 16px 8px; border-bottom: 1px solid var(--border); } .proof-table th:first-child { text-align: left; } .proof-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-family: var(--mono); text-align: right; } .proof-table tr:last-child td { border-bottom: none; } .proof-table td:first-child { text-align: left; font-family: var(--sans); font-weight: 500; } .px-new { color: var(--new); } .px-used { color: var(--used); } .px-margin { color: var(--margin); font-weight: 600; } .proof-foot { padding: 10px 16px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); text-align: center; } .proof-foot a { color: var(--text-secondary); border-bottom: 1px solid var(--border); } .proof-loading td { text-align: center; color: var(--text-muted); font-family: var(--sans); padding: 24px 16px; } /* ---- How it works / feature sections ---- */ .landing-section { padding: 64px 0; } .landing-section-head { max-width: 62ch; margin-bottom: 40px; } .landing-section h2 { font-family: var(--serif); font-weight: 600; font-size: 32px; margin: 10px 0 12px; } .landing-section-head p { color: var(--text-secondary); line-height: 1.65; margin: 0; font-size: 16px; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .step { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; } .step-num { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--margin); letter-spacing: .1em; } .step h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 10px 0 8px; } .step p { color: var(--text-secondary); line-height: 1.6; font-size: 14.5px; margin: 0; } .step-op { font-family: var(--mono); font-size: 13px; background: var(--bg); padding: 1px 5px; border-radius: 4px; } .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .feature { display: flex; gap: 16px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .feature-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 16px; } .fi-blue { background: rgba(55,138,221,.12); color: var(--new); } .fi-green { background: rgba(22,163,74,.12); color: var(--used); } .fi-ochre { background: rgba(208,119,18,.12); color: var(--margin); } .fi-indigo { background: rgba(46,60,86,.09); color: var(--text-primary); } .feature h3 { font-size: 16px; font-weight: 600; margin: 2px 0 6px; } .feature p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0; } /* ---- Trust band ---- */ .trust { background: var(--text-primary); color: var(--bg); border-radius: var(--radius); padding: 44px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .trust h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0 0 10px; color: #fff; } .trust p { color: rgba(234,236,238,.75); line-height: 1.65; font-size: 15px; margin: 0; } .trust-points { display: grid; gap: 14px; font-family: var(--mono); font-size: 14px; } .trust-points div::before { content: "\2713 "; color: var(--used); font-weight: 600; } /* ---- Final CTA ---- */ .final-cta { text-align: center; padding: 72px 0 84px; } .final-cta h2 { font-family: var(--serif); font-size: 36px; font-weight: 600; margin: 8px 0 24px; } @media (max-width: 860px) { .hero { padding: 48px 0 40px; } .hero .wrap { grid-template-columns: 1fr; gap: 36px; } .steps, .features, .trust { grid-template-columns: 1fr; } .trust { padding: 32px 26px; } }