/* ========================================================================== AspectGraph marketing site — shared component system. Three ad-test variants share this file; theme is switched by the `data-variant` attribute on (command | overtake | advantage). Only tokens, the hero background, and the hero visual differ per variant; every other section is identical so the A/B test isolates the hook. Dependency-free, system fonts only (no CDN), committed brand look per variant. ========================================================================== */ /* ---------- structural tokens (variant-neutral) ---------- */ :root{ --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --serif: ui-serif, "New York", Georgia, "Times New Roman", serif; --maxw: 1140px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --pad: clamp(20px, 5vw, 40px); --sec-y: clamp(56px, 9vw, 108px); } /* ---------- variant palettes ---------- */ :root[data-variant="command"]{ --bg:#07111b; --bg-2:#0b1826; --panel:#0e1e30; --panel-2:#132840; --ink:#e8f0fa; --ink-strong:#ffffff; --muted:#9fb3ce; --faint:#6a819e; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15); --accent:#3b82f6; --accent-2:#60a5fa; --on-accent:#04101f; --ok:#22c55e; --warn:#f59e0b; color-scheme: dark; } :root[data-variant="overtake"]{ --bg:#0a0705; --bg-2:#120c09; --panel:#170f0a; --panel-2:#20140d; --ink:#fdefe4; --ink-strong:#ffffff; --muted:#d0b4a6; --faint:#9a7362; --line:rgba(255,255,255,.08); --line-2:rgba(255,140,80,.22); --accent:#ff7a18; --accent-2:#ff3b30; --on-accent:#1a0603; --ok:#5fd08a; --warn:#ffb03a; color-scheme: dark; } :root[data-variant="advantage"]{ --bg:#f2f3ef; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f6f7f3; --ink:#0c1310; --ink-strong:#05100c; --muted:#516059; --faint:#7c8a82; --line:rgba(12,19,16,.10); --line-2:rgba(12,19,16,.16); --accent:#0e7c66; --accent-2:#1f9d82; --on-accent:#ffffff; --ok:#0e7c66; --warn:#c77b16; color-scheme: light; } /* ---------- base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit; text-decoration:none} img{max-width:100%; display:block} h1,h2,h3{text-wrap:balance; margin:0} p{margin:0} :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)} .kicker{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)} .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font:inherit; font-weight:600; font-size:15px; line-height:1; padding:13px 20px; border-radius:var(--r-sm); border:1px solid transparent; transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; white-space:nowrap; } .btn:active{transform:translateY(1px)} .btn--primary{background:var(--accent); color:var(--on-accent); box-shadow:0 12px 30px -14px color-mix(in srgb, var(--accent) 85%, transparent)} .btn--primary:hover{background:var(--accent-2)} .btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)} .btn--ghost:hover{border-color:var(--accent); color:var(--accent)} .btn .arrow{transition:transform .16s ease} .btn:hover .arrow{transform:translateX(3px)} /* ---------- nav ---------- */ .nav{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)} .nav-inner{display:flex; align-items:center; gap:22px; height:64px} .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; font-size:17px; color:var(--ink-strong)} .brand svg{width:24px; height:24px; display:block} .nav-links{display:flex; gap:26px; margin-left:14px} .nav-links a{color:var(--muted); font-size:14.5px; transition:color .15s} .nav-links a:hover{color:var(--ink)} .nav-actions{margin-left:auto; display:flex; align-items:center; gap:12px} .nav-actions .btn{padding:10px 16px; font-size:14px} @media(max-width:820px){ .nav-links{display:none} } /* beta badge — brand-consistent, themed per variant */ .beta-badge{ display:inline-flex; align-items:center; align-self:center; white-space:nowrap; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 42%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); border-radius:999px; padding:4px 9px; line-height:1; } .nav-inner .beta-badge{margin-left:-10px} .cta-band .beta-badge{margin-bottom:20px} /* waitlist / email capture */ .waitlist{display:flex; gap:10px; max-width:480px; margin:30px auto 0; flex-wrap:wrap; justify-content:center} .waitlist .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none} .waitlist input[type=email]{ flex:1 1 260px; min-width:0; font:inherit; font-size:15px; line-height:1.2; padding:13px 16px; border-radius:var(--r-sm); background:var(--panel); color:var(--ink); border:1px solid var(--line-2); transition:border-color .16s ease; } .waitlist input[type=email]::placeholder{color:var(--faint)} .waitlist input[type=email]:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)} .waitlist .btn{flex:0 0 auto} .waitlist[hidden]{display:none} .waitlist-msg{max-width:480px; margin:16px auto 0; font-size:15px; font-weight:500} .waitlist-msg[hidden]{display:none} .waitlist-msg.ok{color:var(--ok)} .waitlist-msg.err{color:var(--warn)} .waitlist-alt{margin-top:18px; font-size:14px} .waitlist-alt a{color:var(--muted); border-bottom:1px solid var(--line-2); padding-bottom:1px} .waitlist-alt a:hover{color:var(--ink); border-color:var(--accent)} /* ---------- hero (shared frame) ---------- */ .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)} .hero-inner{padding:clamp(48px,8vw,92px) 0 clamp(40px,7vw,72px); display:grid; gap:clamp(36px,5vw,56px); grid-template-columns:1fr; align-items:center} @media(min-width:940px){ .hero-inner{grid-template-columns:1.08fr .92fr} } .hero h1{font-size:clamp(34px,5.6vw,60px); line-height:1.02; letter-spacing:-.032em; font-weight:780; color:var(--ink-strong)} .hero h1 em{font-style:normal; color:var(--accent)} .hero .lede{margin-top:22px; font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:44ch} .hero .lede b{color:var(--ink); font-weight:600} .hero-cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px} .trust{margin-top:30px; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--faint)} .trust .dot{width:5px; height:5px; border-radius:50%; background:var(--accent); display:inline-block; margin-right:8px; vertical-align:middle} /* hero backgrounds per variant */ :root[data-variant="command"] .hero{background:radial-gradient(120% 90% at 84% -6%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 55%), linear-gradient(180deg,#08131f,var(--bg))} :root[data-variant="overtake"] .hero{background:radial-gradient(120% 90% at 88% -8%, color-mix(in srgb,var(--accent-2) 26%, transparent), transparent 52%), radial-gradient(80% 80% at -5% 110%, color-mix(in srgb,var(--accent) 18%, transparent), transparent 55%), linear-gradient(180deg,var(--bg-2),var(--bg))} :root[data-variant="advantage"] .hero{background:radial-gradient(110% 80% at 94% -8%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 55%), linear-gradient(180deg,#f6f7f4,var(--bg))} /* ---------- hero visual card ---------- */ .visual{background:color-mix(in srgb,var(--panel) 80%, transparent); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:16px; box-shadow:0 40px 90px -60px rgba(0,0,0,.8); font-family:var(--mono)} .visual-head{display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:4px 6px 12px} .visual-head .live{color:var(--ok)} /* command — roster */ .agent{display:flex; align-items:center; gap:11px; padding:11px 8px; font-size:13px} .agent+.agent{border-top:1px solid var(--line)} .agent .nm{color:var(--ink); font-weight:500} .agent .rl{color:var(--faint); margin-left:3px} .agent .ml{margin-left:8px; font-size:10px; letter-spacing:.03em; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%, transparent); border-radius:5px; padding:2px 6px} .agent .st{margin-left:auto; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:7px} .d{width:9px; height:9px; border-radius:50%; flex:none} .d.on{background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%, transparent)} .d.work{background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%, transparent)} .d.idle{background:var(--faint)} .st.working{color:var(--warn)} /* overtake — race lanes */ .lane{display:grid; grid-template-columns:66px 1fr auto; gap:11px; align-items:center; margin:9px 4px; font-size:12px} .lane .ln{color:var(--muted)} .track{height:9px; border-radius:99px; background:color-mix(in srgb,var(--ink) 8%, transparent); overflow:hidden} .fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2))} .lane .stt{font-size:10.5px; color:var(--faint); letter-spacing:.04em} .lane.done .stt{color:var(--accent)} .compare{margin-top:12px; padding:11px 6px 4px; border-top:1px dashed var(--line-2); display:flex; justify-content:space-between; font-size:10.5px; color:var(--faint)} .compare b{color:var(--muted)} @media (prefers-reduced-motion:no-preference){ .fill.wip{background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-2)); background-size:220% 100%; animation:slide 1.7s linear infinite} @keyframes slide{0%{background-position:120% 0}100%{background-position:-120% 0}} } /* advantage — proof stats */ .proofrow{display:flex; flex-direction:column; gap:20px; font-family:var(--sans)} .stack{display:flex; align-items:center} .stack .av{width:46px; height:46px; border-radius:13px; margin-left:-12px; border:3px solid var(--panel); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; box-shadow:0 8px 18px -10px rgba(0,0,0,.5)} .stack .av:first-child{margin-left:0} .av.g1{background:#0e7c66} .av.g2{background:#1f9d82} .av.g3{background:#134e4a} .av.g4{background:#0c1310; font-size:22px} .vals{display:flex; gap:28px; flex-wrap:wrap} .vals .v{display:flex; flex-direction:column} .vals .v b{font-size:30px; font-weight:780; letter-spacing:-.02em; line-height:1; color:var(--ink-strong); font-variant-numeric:tabular-nums} .vals .v.em b{color:var(--accent)} .vals .v span{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:7px} /* ---------- generic section ---------- */ .sec{padding:var(--sec-y) 0} .sec-head{max-width:60ch; margin-bottom:clamp(30px,5vw,52px)} .sec-head h2{font-size:clamp(26px,3.6vw,40px); letter-spacing:-.025em; font-weight:740; color:var(--ink-strong); margin-top:12px} .sec-head p{margin-top:16px; color:var(--muted); font-size:18px} .alt{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)} /* ---------- how it works ---------- */ .steps{display:grid; gap:20px; grid-template-columns:1fr} @media(min-width:760px){ .steps{grid-template-columns:repeat(3,1fr)} } .step{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:26px; position:relative} .step .n{font-family:var(--mono); font-size:13px; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 38%, transparent); border-radius:7px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; margin-bottom:18px} .step h3{font-size:19px; letter-spacing:-.01em; color:var(--ink-strong)} .step p{margin-top:10px; color:var(--muted); font-size:15.5px} /* ---------- product proof (board + chat) ---------- */ .product{display:grid; gap:18px; grid-template-columns:1fr} @media(min-width:960px){ .product{grid-template-columns:1.35fr .95fr; align-items:stretch} } .panel{background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 40px 90px -70px rgba(0,0,0,.7)} .panel-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted)} .panel-head .tt{font-weight:600; color:var(--ink)} .panel-head .badge{margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ok); display:flex; align-items:center; gap:6px} .panel-head .badge .d{width:7px;height:7px} .board{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; flex:1} .col-head{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:2px 4px 10px; display:flex; justify-content:space-between} .card{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px; margin-bottom:9px} .card .t{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3} .card .meta{display:flex; align-items:center; gap:7px; margin-top:10px; font-size:11px; color:var(--muted)} .mini{width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex:none} .mini.b1{background:#3b82f6} .mini.b2{background:#a855f7} .mini.b3{background:#0ea5a3} .mini.b4{background:#64748b} .modeltag{margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.03em; color:var(--faint); border:1px solid var(--line); border-radius:5px; padding:2px 5px} .card.working{border-color:color-mix(in srgb,var(--warn) 45%, var(--line))} .card .wk{display:flex; align-items:center; gap:6px; margin-top:9px; font-family:var(--mono); font-size:10px; color:var(--warn)} .card .wk .d{width:7px;height:7px} .card.donec{opacity:.72} .card .done-k{color:var(--ok); font-family:var(--mono); font-size:10px; margin-top:9px; display:flex; align-items:center; gap:5px} .chat{display:flex; flex-direction:column; gap:12px; padding:16px; flex:1} .msg{display:flex; flex-direction:column; gap:5px} .msg .who{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--faint)} .msg .who .mini{width:18px;height:18px;border-radius:5px} .msg .who b{color:var(--ink); font-weight:600; font-size:12px} .msg .who .mt{font-family:var(--mono); font-size:9.5px; color:var(--faint); border:1px solid var(--line); border-radius:4px; padding:1px 4px} .msg .bubble{font-size:13.5px; color:var(--ink); line-height:1.45; padding-left:26px} .msg .bubble .at{color:var(--accent); font-weight:600} .msg.you .bubble{color:var(--muted)} .decision{margin-left:26px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink); background:color-mix(in srgb,var(--accent) 12%, transparent); border:1px solid color-mix(in srgb,var(--accent) 34%, transparent); border-radius:99px; padding:6px 12px} .decision .ic{color:var(--accent)} /* ---------- features ---------- */ .feat-grid{display:grid; gap:16px; grid-template-columns:1fr} @media(min-width:640px){ .feat-grid{grid-template-columns:repeat(2,1fr)} } @media(min-width:980px){ .feat-grid{grid-template-columns:repeat(4,1fr)} } .feat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:24px} .feat .ic{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; background:color-mix(in srgb,var(--accent) 14%, transparent); color:var(--accent)} .feat .ic svg{width:21px; height:21px} .feat h3{font-size:17px; letter-spacing:-.01em; color:var(--ink-strong)} .feat p{margin-top:9px; color:var(--muted); font-size:14.5px} /* ---------- CTA band ---------- */ .cta-band{position:relative; overflow:hidden; text-align:center; padding:clamp(56px,9vw,100px) 0} .cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 50% 0%, color-mix(in srgb,var(--accent) 20%, transparent), transparent 60%); pointer-events:none} .cta-band .inner{position:relative} .cta-band h2{font-size:clamp(28px,4.4vw,46px); letter-spacing:-.03em; font-weight:780; color:var(--ink-strong); max-width:20ch; margin:0 auto} .cta-band p{margin:18px auto 0; color:var(--muted); max-width:52ch; font-size:18px} .cta-band .btns{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px} .cta-band .fine{margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--faint)} /* ---------- thank-you page ---------- */ .thanks{min-height:72vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 0} .thanks .check{width:66px; height:66px; border-radius:50%; margin-bottom:26px; display:flex; align-items:center; justify-content:center; color:var(--ok); background:color-mix(in srgb, var(--ok) 16%, transparent); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent)} .thanks .check svg{width:32px; height:32px} .thanks h1{font-size:clamp(30px,5vw,46px); letter-spacing:-.03em; font-weight:760; color:var(--ink-strong)} .thanks p{margin-top:16px; color:var(--muted); font-size:18px; max-width:46ch} .thanks .btns{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:32px} /* ---------- footer ---------- */ .foot{border-top:1px solid var(--line); padding:52px 0 40px; color:var(--muted); font-size:14px} .foot-top{display:flex; flex-wrap:wrap; gap:28px 60px; justify-content:space-between} .foot .brand{margin-bottom:14px} .foot .tag{max-width:34ch; color:var(--faint)} .foot-cols{display:flex; gap:56px; flex-wrap:wrap} .foot-cols h4{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; font-weight:600} .foot-cols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px} .foot-cols a{color:var(--muted)} .foot-cols a:hover{color:var(--ink)} .foot-bottom{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12.5px; color:var(--faint); font-family:var(--mono); letter-spacing:.03em} @media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important} }