/* ============================================================================ site.css — Haul IQ marketing-site shell (Felix LIGHT HD). R107 (Daniil 2026-06-07): shared across /how-it-works, /platform, /pricing, /get, /faq. Wave 73 (2026-08-07): canonical CLEAN LIGHT theme — soft near-white canvas, crisp white cards, hairline borders, Sora + the blue→green→gold Felix gradient kept as the brand signature. This :root is THE canonical token contract for every Haul IQ surface (marketing, auth, OS, portals). All text pairs verified WCAG AA (>=4.5:1 body) — see theme-cohesion notes. 2026-09-26 (site/homepage): the homepage no longer loads this file (its own /vendor/site/home-v1.css), and the nav, phone menu and footer — once injected by site.js and styled here — are server-rendered on every marketing page and styled by /vendor/site/chrome-v1.css, which also carries the Sora faces now. What stays here is the content of the five other pages. ============================================================================ */ :root { /* --- canvas & surfaces (light HD) --- */ --bg-0:#f7f9fc; /* app/page canvas — soft near-white, no pure-white glare */ --bg-1:#ffffff; /* cards / raised surfaces */ --bg-2:#f1f5fa; /* inset / subtle fill */ --bg-3:#e7edf5; /* hover / active fill */ --border:#dde5ef; --border-hot:#c3d0e0; --border-bright:#c3d0e0; /* --- text (AA on bg-0/bg-1/bg-2) --- */ --text-0:#0d1520; /* primary — 17.4:1 on bg-0 */ --text-1:#4a5a6f; /* secondary — 7.0:1 on bg-1 */ --text-2:#5c6f88; /* muted — 5.1:1 on bg-1, 4.7:1 on bg-2 */ /* --- brand (front-page identity, kept) --- */ --accent:#2da8ff; /* brand blue — FILLS/gradients/marks ONLY (2.6:1 as text = fails AA) */ --accent-dim:#2da8ff40; --accent-rgb:45,168,255; --accent-ink:#0a66c2; /* brand blue for TEXT/links/icons on light — 5.7:1 on white */ --on-accent:#04202f; /* text ON accent/gradient fills — 6.5:1 on accent, 9.4:1 mid-grad */ --green:#3ddc84; --green-ink:#147a46; /* fill / text-on-light */ --gold:#f5c518; --gold-ink:#8a6a00; /* fill / text-on-light */ --grad:linear-gradient(135deg,#2da8ff 0%,#3ddc84 55%,#f5c518 100%); --grad-cta:linear-gradient(135deg,#2da8ff,#3ddc84); /* 2026-09-25 QA WEB-10: TEXT painted with --grad measured 1.55:1 on --bg-0 in Chromium and WebKit (its gold stop; a headline needs 3:1, the 19px wordmark 4.5:1). --grad stays for fills. Text uses the three INK tokens instead, through var() so the dark palette (haul-palette.css) re-points the gradient with them. */ --grad-ink:linear-gradient(135deg,var(--accent-ink) 0%,var(--green-ink) 55%,var(--gold-ink) 100%); /* --- semantic states, retuned for light (all AA as text on bg-0/1/2) --- */ --red:#c9271b; --error:#c9271b; /* danger / overdue — 5.5:1 */ --amber:#b45309; --warn:#b45309; /* warning / due-soon — 5.0:1 */ --blue:#1a68c4; /* info / dispatched — 5.0:1+ */ --indigo:#4f46e5; /* in-transit — 6.3:1 */ --gray:#5b6b7f; /* neutral / pending — 5.5:1 */ /* --- elevation & rows (light: soft ink shadows, never glows) --- */ --shadow-1:0 1px 2px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.04); --shadow-tint:rgba(16,24,40,.04); /* hairline ambient shadow (Wave 80) */ --shadow-2:0 6px 16px rgba(16,24,40,.10),0 1px 3px rgba(16,24,40,.06); --shadow-3:0 16px 44px rgba(16,24,40,.16),0 4px 14px rgba(16,24,40,.10); --shadow-focus:0 0 0 3px rgba(45,168,255,.22); --row-zebra:rgba(13,21,32,.025); --row-hover:var(--bg-2); /* --- type: Sora everywhere (brand), mono for numeric/tabular --- */ --font:"Sora",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif; --font-ui:var(--font); --mono:"SF Mono","JetBrains Mono",Menlo,Monaco,ui-monospace,monospace; --font-mono:var(--mono); --nav-h:60px; --maxw:1180px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--bg-0);color:var(--text-0);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:var(--accent-ink);text-decoration:none} img{max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} .grad-text{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent} /* fixed light backdrop wash — brand blue/green tints on the near-white canvas */ .bg-fx{position:fixed;inset:0;z-index:-1;background: radial-gradient(1100px 560px at 82% -10%,rgba(45,168,255,0.08),transparent 60%), radial-gradient(820px 480px at 8% 8%,rgba(61,220,132,0.05),transparent 55%);} /* ===================== BUTTONS ===================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;font-weight:700;font-size:15px;padding:14px 24px;cursor:pointer;border:1px solid transparent;transition:transform .15s,filter .15s,box-shadow .15s,border-color .15s;font-family:inherit} .btn.primary{background:var(--grad-cta);color:var(--on-accent);box-shadow:0 6px 18px rgba(45,168,255,0.30)} .btn.primary:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 10px 26px rgba(45,168,255,0.38)} .btn.ghost{background:var(--bg-1);border-color:var(--border-hot);color:var(--text-0);box-shadow:var(--shadow-1)} .btn.ghost:hover{border-color:var(--accent-dim);color:var(--accent-ink)} /* ===================== SECTIONS / TYPE ===================== */ section{padding:84px 0} section.bordered{border-top:1px solid var(--border)} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px} /* Wave 75 — the hero eyebrow looked "a little dull" (founder, on the live site). It was a CSS COLLISION, not a taste problem: the generic .chip rule further down this file (used for the dim/lit feature chips) declared color:var(--text-2), opacity:.35 and font-size: 11px (the opacity went in 2026-09-25, QA WEB-10). It sits AFTER .eyebrow at EQUAL specificity, so it won — the hero eyebrow rendered in muted grey at 35% opacity, about 1.5:1 contrast, i.e. the "unlit" treatment meant for a chip that is switched off. Measured live: color rgb(92,111,136), opacity 0.35. Declaring the three properties here (specificity 0,2,0) closes the leak for good, and the eyebrow gets its intended brand-blue at full strength — supporting the gradient headline rather than competing with it. */ .eyebrow.chip{display:inline-block;padding:7px 16px;border:1px solid var(--accent-dim);border-radius:999px;background:rgba(45,168,255,0.10);color:var(--accent-ink);opacity:1;font-size:12px;font-weight:600;box-shadow:0 1px 2px var(--shadow-tint)} h1{font-size:clamp(38px,7.5vw,84px);font-weight:800;letter-spacing:-0.04em;line-height:0.98} h2{font-size:clamp(28px,5vw,46px);font-weight:800;letter-spacing:-0.03em;line-height:1.04} h3{font-size:19px;font-weight:700;letter-spacing:-0.01em} .lead{font-size:clamp(16px,2.2vw,20px);color:var(--text-1);max-width:640px;line-height:1.5} .section-head{margin-bottom:42px} .section-head .lead{margin-top:14px} /* hero */ .hero{min-height:calc(92vh - var(--nav-h));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 0} .hero h1{max-width:1000px;margin-bottom:22px} .hero .lead{margin:0 auto 34px;text-align:center} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} /* card grids */ .grid{display:grid;gap:16px} .grid.c4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .card{background:var(--bg-1);border:1px solid var(--border);border-radius:13px;padding:24px;box-shadow:var(--shadow-1);transition:transform .18s,border-color .18s,box-shadow .18s} .card:hover{transform:translateY(-3px);border-color:var(--border-hot);box-shadow:var(--shadow-2)} .card .code{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--accent-ink);display:block;margin-bottom:9px} /* 2026-09-25 QA WEB-10: a card or step heading that follows the page h1 is an h2 (no level skip), drawn at the card size; an h3 stays for cards that follow an h2. */ .card h2,.step h2{font-size:19px;font-weight:700;letter-spacing:-0.01em;line-height:1.3} .card h2,.card h3{margin-bottom:6px} .card p{color:var(--text-1);font-size:14px;line-height:1.55} .card.link{cursor:pointer} .card.link .more{margin-top:14px;font-size:13px;font-weight:700;color:var(--accent-ink)} /* step cards w/ gradient top bar */ .step{position:relative;background:var(--bg-1);border:1px solid var(--border);border-radius:13px;padding:26px;overflow:hidden;box-shadow:var(--shadow-1)} .step::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)} .step .n{font-family:var(--mono);font-size:11px;letter-spacing:0.15em;color:var(--accent-ink);margin-bottom:12px} .step h2,.step h3{margin-bottom:8px} .step p{color:var(--text-1);font-size:14.5px;line-height:1.6} /* ===================== PRICING ===================== */ .pilot-banner{display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between; background:linear-gradient(135deg,rgba(45,168,255,0.10),rgba(61,220,132,0.06));border:1px solid var(--accent-dim);border-radius:14px;padding:22px 26px;margin-bottom:24px} .pilot-banner b{font-size:17px;color:var(--text-0)} .pilot-banner span{display:block;color:var(--text-1);font-size:14px;margin-top:4px;font-weight:400} /* 2026-09-25 QA WEB-10: --text-2 measured 4.47:1 on the banner tint; --text-1 is 6.5:1 */ .ptable-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--bg-1)} .ptable{width:100%;border-collapse:collapse;min-width:560px} .ptable th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-2);padding:15px 20px;border-bottom:1px solid var(--border)} .ptable td{padding:16px 20px;border-bottom:1px solid var(--border);font-size:15px;color:var(--text-1);vertical-align:middle} .ptable tr:last-child td{border-bottom:none} .ptable tbody tr:hover td{background:rgba(45,168,255,0.04)} .ptable tr.pop td{background:rgba(45,168,255,0.06)} .ptable .tier{font-weight:700;color:var(--text-0);font-size:16px;white-space:nowrap} .ptable .price{font-weight:800;color:var(--text-0);font-size:17px;font-family:var(--mono);white-space:nowrap} .ptable .price .u{font-size:12px;color:var(--text-2);font-weight:400} .badge{display:inline-block;margin-left:8px;background:var(--accent);color:var(--on-accent);font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:2px 7px;border-radius:4px;vertical-align:middle} .tbl-cta{display:inline-block;padding:8px 15px;border-radius:6px;font-size:13px;font-weight:700;white-space:nowrap} .tbl-cta.primary{background:var(--grad-cta);color:var(--on-accent)} .tbl-cta.ghost{border:1px solid var(--border-hot);color:var(--text-0)} .tbl-cta.ghost:hover{color:var(--accent-ink);border-color:var(--accent-dim)} /* FAQ */ .faq{max-width:760px;margin:0 auto} .faq details{border:1px solid var(--border);border-radius:11px;background:var(--bg-1);margin-bottom:12px;overflow:hidden} .faq summary{padding:18px 20px;font-weight:600;font-size:16px;cursor:pointer;list-style:none;display:flex;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';margin-left:auto;color:var(--accent-ink);font-size:22px;font-weight:400} .faq details[open] summary::after{content:'\2212'} .faq details p{padding:0 20px 18px;color:var(--text-1);font-size:14.5px;line-height:1.6} .faq .faq-group{font-size:22px;letter-spacing:-0.02em;margin:34px 0 14px} /* /faq section titles (2026-09-25 QA WEB-09) */ .faq .faq-group:first-child{margin-top:0} /* ===================== INTERACTIVE DEMO ===================== */ .demo{background:var(--bg-1);border:1px solid var(--border);border-radius:16px;overflow:hidden;max-width:980px;margin:0 auto} .demo-bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--border);background:var(--bg-2)} .demo-bar .dots{display:flex;gap:6px} .demo-bar .dots i{width:11px;height:11px;border-radius:50%;background:var(--bg-3);display:block} .demo-bar .ttl{font-family:var(--mono);font-size:12px;color:var(--text-1)} .demo-bar .replay{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent-ink);background:none;border:1px solid var(--accent-dim);border-radius:6px;padding:5px 11px;cursor:pointer;font-family:inherit} .demo-stage{display:grid;grid-template-columns:1.1fr 1fr;gap:0;min-height:330px} .demo-left{padding:24px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:14px} .demo-right{padding:24px;display:flex;flex-direction:column;gap:12px} .demo-cap{font-family:var(--mono);font-size:12px;letter-spacing:0.02em;color:var(--text-2)} .doc{border:1px dashed var(--border-hot);border-radius:11px;background:var(--bg-2);padding:16px;opacity:0;transform:translateY(-14px) scale(.97);transition:opacity .5s,transform .5s} .doc.in{opacity:1;transform:none} .doc .dh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-0)} .doc .dh .pg{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--text-2)} .doc .row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-1);margin-top:8px;padding-top:8px;border-top:1px solid var(--border)} .chips{display:flex;flex-wrap:wrap;gap:7px} /* 2026-09-25 QA WEB-10: the unlit chip used to fade the whole element to 35% — measured 1.58:1 at 11px. It now reads in --text-2 at full strength (4.7:1 on --bg-2); "lit" is still the gradient fill, so the state change stays visible. */ .chip{font-size:11px;font-weight:600;padding:5px 10px;border-radius:7px;border:1px solid var(--border);color:var(--text-2);background:var(--bg-2);transition:.35s} .chip.lit{color:var(--on-accent);background:var(--grad-cta);border-color:transparent} .lc{border:1px solid var(--border);border-radius:11px;background:var(--bg-2);padding:14px;opacity:0;transform:translateY(10px);transition:.45s} .lc.in{opacity:1;transform:none} .lc .lh{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px} .lc .lstat{margin-left:auto;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--bg-3);color:var(--text-1);transition:.35s} .lc .lstat.live{background:rgba(61,220,132,0.18);color:var(--green-ink)} .lc .lrow{display:flex;justify-content:space-between;font-size:12px;color:var(--text-1);margin-top:9px} .lc .lrow b{color:var(--text-0)} .demo-steps{display:flex;gap:6px;padding:12px 18px;border-top:1px solid var(--border);background:var(--bg-2);flex-wrap:wrap} .demo-steps .s{font-size:11px;color:var(--text-2);padding:4px 9px;border-radius:6px;transition:.3s} .demo-steps .s.on{color:var(--on-accent);background:var(--grad-cta);font-weight:700} /* teaser cards (/get) */ .teaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} /* ===================== RESPONSIVE ===================== */ @media (max-width:760px){ .wrap{padding:0 20px} /* the chrome's 20 px gutter (chrome-v1.css), so the page lines up under it */ section{padding:60px 0} .demo-stage{grid-template-columns:1fr} .demo-left{border-right:none;border-bottom:1px solid var(--border)} .ptable{min-width:500px} .ptable-wrap{-webkit-overflow-scrolling:touch} /* 2026-09-26 (site/homepage): finger-sized — the table's Start buttons measured 36-38 px tall, the demo's Replay 27 px. */ .tbl-cta{display:inline-flex;align-items:center;min-height:48px} .demo-bar .replay{min-height:48px;padding:0 14px} } /* ===================== ICONS (WS-F, 2026-09-09) ===================== site.js hand-inlines Lucide paths (the marketing site loads no icon library) in place of the ↺ glyph and the 📄 🚛 🧾 demo-card emoji. These rules give the icon-only controls a real box and keep the labelled ones on the optical centre instead of the text baseline. */ .demo-bar .replay{display:inline-flex;align-items:center;gap:6px} .doc .dh .ico,.lc .lh .ico{flex:none;color:var(--accent-ink)} .demo-bar .ico{flex:none} /* ===================== GET THE APP (MOBILE-INSTALL, 2026-09-21) ===================== /get — the "Which app?" chooser and the per-platform install panel. Reuses .card/.step/.btn/.eyebrow rather than inventing a new visual language. MOBILE-INSTALL-2 fix round (V-MOBILE-INSTALL-2, F6): the two doors are real elements now (were