/* ============================================================================ VECTR — Editorial Instrument design system Shared across all pages. Brand is fixed: orange #F27A1A, Libre Baskerville, JetBrains Mono, the V. mark, the Dan·alytics wordmark. Aesthetic: a published statistical release crossed with a precise instrument. No uniform glassmorphism. No gradient numbers. No neon glow. Let the substance speak; the type and the figures carry the authority. ========================================================================== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} /* ---- Tokens (dark is the brand default) -------------------------------- */ :root{ /* Ink & paper */ --void:#070b1c; /* page base — deep tinted navy, never pure black */ --deep:#0a0f24; --surface:#0d142e; /* raised surface */ --surface-2:#111a38; --hair:rgba(231,236,255,0.10); /* hairline rules */ --hair-strong:rgba(231,236,255,0.18); /* Type colours — warm off-white, tinted toward the navy */ --t100:#eef1fa; --t80:rgba(238,241,250,0.80); --t60:rgba(238,241,250,0.60); --t40:rgba(238,241,250,0.52); --t25:rgba(238,241,250,0.22); /* Brand accent */ --orange:#F27A1A; --orange-bright:#ff9038; --orange-soft:rgba(242,122,26,0.12); --orange-line:rgba(242,122,26,0.32); /* Quiet secondary hues — used only as thin section signifiers */ --green:#3fae6b; --blue:#3d8fd6; --violet:#9d6fd0; --grey:#9aa0b4; --red:#e0533f; --gold:#d9a521; /* Per-page accent (defaults to brand orange; overridden on ) */ --accent:var(--orange); --accent-line:var(--orange-line); --accent-soft:var(--orange-soft); /* Type */ --serif:'Libre Baskerville',Constantia,Georgia,serif; --body:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif; --num:'Helvetica Neue',Arial,'Liberation Sans',sans-serif; /* tabular figures */ --mono:'JetBrains Mono','SF Mono',ui-monospace,Consolas,monospace; /* Fluid type scale (editorial) */ --fs-display:clamp(2.6rem,1.6rem + 4.6vw,5.4rem); --fs-h1:clamp(2.1rem,1.4rem + 3.2vw,4rem); --fs-h2:clamp(1.7rem,1.25rem + 1.9vw,2.9rem); --fs-h3:clamp(1.18rem,1.05rem + 0.5vw,1.4rem); --fs-lede:clamp(1.12rem,1rem + 0.7vw,1.5rem); --fs-body:1.0625rem; /* 17px */ --fs-small:0.875rem; --fs-micro:0.75rem; /* Space scale */ --sp-1:0.5rem; --sp-2:0.75rem; --sp-3:1rem; --sp-4:1.5rem; --sp-5:2rem; --sp-6:3rem; --sp-7:4.5rem; --sp-8:7rem; --section-y:clamp(4.5rem,3rem + 7vw,9rem); /* Layout */ --wrap:1180px; --measure:64ch; /* Motion */ --ease:cubic-bezier(.2,.7,.2,1); /* ease-out-quint-ish */ --ease-soft:cubic-bezier(.16,1,.3,1); --dur:.6s; color-scheme:dark; } /* Per-page accent themes (quiet) */ body[data-accent="social"] {--accent:var(--green); --accent-line:rgba(63,174,107,0.34); --accent-soft:rgba(63,174,107,0.12)} body[data-accent="gov"] {--accent:var(--blue); --accent-line:rgba(61,143,214,0.34); --accent-soft:rgba(61,143,214,0.12)} body[data-accent="research"] {--accent:var(--violet);--accent-line:rgba(157,111,208,0.34);--accent-soft:rgba(157,111,208,0.12)} body[data-accent="data"] {--accent:var(--grey); --accent-line:rgba(154,160,180,0.34);--accent-soft:rgba(154,160,180,0.10)} body[data-accent="buy"] {--accent:var(--gold); --accent-line:rgba(217,165,33,0.34); --accent-soft:rgba(217,165,33,0.12)} /* ---- Light mode: warm paper, like a printed release --------------------- */ @media (prefers-color-scheme:light){ :root{ --void:#f4f2ea; /* warm paper */ --deep:#efece1; --surface:#fbfaf5; --surface-2:#ffffff; --hair:rgba(28,26,20,0.12); --hair-strong:rgba(28,26,20,0.22); --t100:#1a1c24; --t80:rgba(26,28,36,0.82); --t60:rgba(26,28,36,0.62); --t40:rgba(26,28,36,0.62); --t25:rgba(26,28,36,0.20); --orange:#ad540c; /* deepened for AA-normal on paper: 4.65:1 (small accent text) */ --orange-bright:#a64f08; --orange-soft:rgba(194,94,13,0.10); --orange-line:rgba(194,94,13,0.30); --green:#2b7a4b;--blue:#2c6ca8;--violet:#7a52a8;--grey:#686c7c;--red:#bd3a28;--gold:#89670e; /* green/grey/gold deepened for AA-normal on paper (~4.67:1); blue/violet/red already pass */ color-scheme:light; } } /* ---- Base --------------------------------------------------------------- */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--void);color:var(--t100); font-family:var(--body);font-size:var(--fs-body);line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } ::selection{background:var(--accent-soft);color:var(--t100)} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.08;letter-spacing:-0.012em;text-wrap:balance} h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);line-height:1.25} em{font-style:italic} strong{font-weight:700} p{text-wrap:pretty} .serif{font-family:var(--serif)} .mono{font-family:var(--mono)} .num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-0.01em} /* Prose measure */ .lede{font-size:var(--fs-lede);line-height:1.5;color:var(--t80);max-width:var(--measure)} .prose{max-width:var(--measure);color:var(--t80)} .prose p+p{margin-top:1em} .prose em{color:var(--t100);font-style:italic} .muted{color:var(--t60)} .ink-accent{color:var(--accent)} /* ---- Texture host (grid removed 2026-08-19) ------------------------------ The faint engineering grid that lived here was the SECOND grid source: static, but the cursor light brightened it as it passed, so it still read as "a grid following the mouse" after the moving .cursor-grid layer was cut. Dan: it shouldn't be visible. The element stays as the host for the ambient wash below. */ .field{ position:fixed;inset:0;z-index:0;pointer-events:none; } .field::after{ /* one soft ambient wash for depth — not three neon orbs */ content:"";position:absolute;inset:0; background:radial-gradient(60% 40% at 78% 8%,var(--accent-soft),transparent 70%); opacity:.7; } /* ---- Layout ------------------------------------------------------------- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)} main{position:relative;z-index:1} section{position:relative;padding-block:var(--section-y)} .rule-top{border-top:1px solid var(--hair)} /* Section header with a report-style index in the margin */ .section-head{margin-bottom:var(--sp-5)} .index{ font-family:var(--mono);font-size:var(--fs-micro);font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:var(--accent); display:flex;align-items:center;gap:.6rem;margin-bottom:1rem; } .index::before{content:"";width:1.6rem;height:1px;background:var(--accent-line)} .section-head .lede{margin-top:.9rem} @media (min-width:1000px){ .section-head.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(2rem,5vw,5rem);align-items:end} .section-head.cols .index{margin-bottom:0} } /* Generic editorial label/tag */ .label{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--mono);font-size:var(--fs-micro);font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--accent); } .tag{ display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--t60); border:1px solid var(--hair-strong);border-radius:2px;padding:.28em .6em; } .tag-accent{color:var(--accent);border-color:var(--accent-line)} /* ---- Skip link / focus -------------------------------------------------- */ /* The skip-link sits ON the accent, so its text colour has to follow the accent between schemes. Measured both palettes: black clears AA on all eight DARK accents (5.16:1 violet to 8.82:1 gold) and on none of the light ones; white clears AA on all eight LIGHT accents (5.09:1 teal to 5.83:1 violet) and on none of the dark ones. One value cannot serve both, and the element that exists for people who need assistive navigation should not be the least legible on the page in either mode. */ .skip-link{position:absolute;left:16px;top:-120%;z-index:300;background:var(--accent);color:#0a0a0a; padding:10px 16px;border-radius:4px;font-weight:700;font-size:var(--fs-small)} .skip-link:focus{top:14px} @media(prefers-color-scheme:light){.skip-link{color:#fff}} /* ---- Wordmark ---------------------------------------------------------- The breadcrumb lockup. These were literal hexes in style= attributes on six pages, which meant they had no light-mode path and painted the DARK palette onto warm paper: 2.60:1 and 2.32:1. As classes they can be themed. Light values hold hue and saturation and move only lightness. */ .wm-dan{color:#41a4b5} .wm-lytics{color:#9aa0b4} @media(prefers-color-scheme:light){ .wm-dan{color:#307885} /* 4.51:1 on #f4f2ea */ .wm-lytics{color:#666e8a} /* 4.50:1 */ } :where(a,button,input,select,textarea):focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} /* ---- Nav ---------------------------------------------------------------- */ nav.site{ position:fixed;top:0;left:0;width:100%;z-index:100; display:flex;align-items:center;justify-content:space-between; padding:14px clamp(20px,5vw,48px); background:color-mix(in srgb,var(--void) 78%,transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent;transition:border-color .3s,background .3s; } nav.site.scrolled{border-bottom-color:var(--hair);background:color-mix(in srgb,var(--void) 90%,transparent)} .nav-mark{font-family:var(--serif);font-size:1.32rem;font-weight:700;letter-spacing:.01em;color:var(--t100)} .nav-mark b{color:var(--orange);font-weight:700} .nav-links{display:flex;gap:clamp(1rem,2.2vw,1.9rem);align-items:center} .nav-links a{font-size:.83rem;color:var(--t60);letter-spacing:.01em;transition:color .2s;position:relative;padding-block:4px} .nav-links a:hover{color:var(--t100)} .nav-links a.cta{color:var(--t100);border:1px solid var(--orange-line);border-radius:3px;padding:7px 16px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase} .nav-links a.cta:hover{background:var(--orange-soft)} .nav-burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px;z-index:101} .nav-burger span{width:22px;height:1.5px;background:var(--t80);border-radius:1px;transition:transform .3s,opacity .3s} .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .breadcrumb{ position:fixed;top:54px;left:0;width:100%;z-index:99; padding:7px clamp(20px,5vw,48px); font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--t40); background:color-mix(in srgb,var(--void) 70%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--hair); } .breadcrumb a:hover{color:var(--t80)} .breadcrumb .sep{margin-inline:.5rem;opacity:.5} .breadcrumb .here{color:var(--t60)} @media (max-width:860px){ .nav-burger{display:flex} .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start; gap:1rem;padding:20px clamp(20px,5vw,48px);display:none; background:color-mix(in srgb,var(--void) 97%,transparent);border-bottom:1px solid var(--hair)} .nav-links.open{display:flex} .nav-links a{font-size:.95rem} } /* ---- Buttons ------------------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;gap:.6rem;cursor:pointer; font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; padding:.85em 1.5em;border-radius:3px;border:1px solid transparent;transition:transform .15s var(--ease),background .2s,border-color .2s,color .2s} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--orange);color:#0a0a0a;border-color:var(--orange)} .btn-primary:hover{background:var(--orange-bright);border-color:var(--orange-bright)} /* Same split as the skip link: the label sits ON the accent, so its colour has to follow the accent between schemes. Measured — black on the dark orange #F27A1A is 7.14:1 and on --orange-bright 8.77:1; on the light-mode orange #ad540c it is only 3.82:1, under AA for 12.5px/600. White inverts it exactly: 5.18:1 light, 2.77:1 dark. One value cannot serve both, and this is the page's primary call to action. */ @media(prefers-color-scheme:light){.btn-primary{color:#fff}} .btn-ghost{color:var(--t100);border-color:var(--hair-strong)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .arrow-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--accent);font-family:var(--mono); font-size:.82rem;letter-spacing:.04em;transition:gap .2s} .arrow-link:hover{gap:.85rem} /* ---- Hero --------------------------------------------------------------- */ .hero{padding-top:clamp(8rem,12vh,11rem);padding-bottom:var(--section-y);position:relative;overflow:hidden} .hero .wrap{position:relative;z-index:2} .hero h1{font-size:var(--fs-display);max-width:18ch} .hero .kicker{color:var(--accent)} .hero .lede{margin-top:clamp(1.2rem,3vw,2rem)} .hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(1.6rem,3vw,2.4rem)} .hero-map{position:absolute;inset:0;z-index:0;filter:grayscale(.3) brightness(.42) contrast(1.15) saturate(.6)} @media (prefers-color-scheme:light){.hero-map{filter:grayscale(.2) brightness(1.02) contrast(.96) saturate(.7);opacity:.5}} .hero-veil{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,color-mix(in srgb,var(--void) 40%,transparent),var(--void) 86%)} /* Fourth instance of the same finding as the ledger row and the is-code core card: the light accents were each derived against the warm paper, and an aerial photograph is a different backdrop. Measured at the top of the hero, where the eyebrow and headline sit: the veil is only 40% there and the map runs at opacity .5 beneath it, so --accent lands on roughly rgb(184,183,176) and drops to 2.60:1 — the gate reads 4.63 because it composites against paper and cannot see a raster. Veiling alone cannot fix it (95% only reaches 4.43 and hides the photograph), so: lift the veil's first stop to 70%, and give the hero's small accent text a darker value derived against THAT composite. #8a4208 measures 4.98:1 on the veiled map and 6.54:1 on paper. The kicker is large text (AA 3.0) and clears it either way. */ @media(prefers-color-scheme:light){ .hero-veil{background:linear-gradient(180deg,color-mix(in srgb,var(--void) 70%,transparent),var(--void) 86%)} /* scoped by the map's presence: #8a4208 was derived against the veiled aerial, and only landing has one. The other five heroes sit on plain paper where every accent already passes AA (4.66-5.20) and the data-accent identity should stand. */ .hero-map~.wrap .label{color:#8a4208} .hero-map~.wrap .kicker{color:#8a4208} } /* ---- Stat: solid ink, tabular, no gradient ------------------------------ */ .statline{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2rem,4vw,3rem)} .stat .figure{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums; font-size:clamp(2rem,1.3rem + 2.4vw,3.4rem);line-height:1;color:var(--t100);letter-spacing:-0.02em} .stat .figure .unit{font-size:.5em;color:var(--accent);font-weight:700;margin-left:.15em} .stat .cap{display:block;margin-top:.55rem;font-family:var(--mono);font-size:var(--fs-micro); letter-spacing:.08em;text-transform:uppercase;color:var(--t60)} .stat.lead .figure{font-size:clamp(3rem,2rem + 5vw,6rem)} /* ---- Plate: flat bordered block (sparingly; replaces glass) ------------- */ .plate{border:1px solid var(--hair);background:color-mix(in srgb,var(--surface) 60%,transparent); border-radius:4px;padding:clamp(1.3rem,2.5vw,2rem);transition:border-color .25s,transform .25s var(--ease)} .plate:hover{border-color:var(--hair-strong)} .plate h3{margin-bottom:.5rem} .plate p{color:var(--t60);font-size:var(--fs-small);line-height:1.55} /* ---- Q&A rows (replaces card wall) -------------------------------------- */ .qa{border-top:1px solid var(--hair)} .qa-row{display:grid;grid-template-columns:1fr;gap:.4rem;padding:clamp(1rem,2vw,1.5rem) 0;border-bottom:1px solid var(--hair)} .qa-row .q{font-family:var(--serif);font-size:1.12rem;line-height:1.4;color:var(--t100)} .qa-row .a{font-family:var(--mono);font-size:.82rem;color:var(--accent);letter-spacing:.02em} @media (min-width:760px){ .qa-row{grid-template-columns:1.5fr 1fr;gap:2rem;align-items:baseline} .qa-row .a{text-align:right} } /* worked-example block */ .example{border-left:2px solid var(--accent-line);padding:1.1rem 0 1.1rem 1.4rem;margin-top:var(--sp-4)} .example .q{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--t100);line-height:1.45} .example .out{margin-top:.8rem;font-family:var(--mono);font-size:.86rem;color:var(--t80);line-height:1.65} .example .out b{color:var(--accent);font-weight:600} /* ---- Pull quote --------------------------------------------------------- */ .pull{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,1rem + 1.8vw,2.2rem); line-height:1.35;color:var(--t100);max-width:24ch;border-left:2px solid var(--accent);padding-left:1.4rem} /* ---- Modes list (CLI-first) -------------------------------------------- */ .modes{display:grid;gap:0;border-top:1px solid var(--hair)} .mode{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:clamp(1.2rem,2.4vw,1.8rem) 0;border-bottom:1px solid var(--hair);align-items:start} .mode .sigil{font-family:var(--mono);font-size:1.1rem;color:var(--accent);padding-top:.2rem;min-width:2.5rem} .mode h3{margin-bottom:.35rem} .mode .role{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t40);margin-left:.6rem} .mode p{color:var(--t60);font-size:var(--fs-small);max-width:60ch} /* ---- Compact definition list: a title line over its gloss, in columns --- */ .measure-cols{columns:3;column-gap:2.5rem;margin-top:var(--sp-5)} .measure-cols li{break-inside:avoid;list-style:none;padding:.5rem 0;border-bottom:1px solid var(--hair);font-size:.9rem;color:var(--t80)} .measure-cols li b{display:block;font-family:var(--serif);color:var(--t100);font-size:.95rem} @media(max-width:860px){.measure-cols{columns:2}} @media(max-width:560px){.measure-cols{columns:1}} /* ---- Ledger table (published-release look) ------------------------------ */ .ledger-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:4px} .ledger{width:100%;border-collapse:collapse;font-size:.8rem;min-width:880px} .ledger th,.ledger td{padding:9px 12px;text-align:center;border-bottom:1px solid var(--hair);vertical-align:middle} .ledger thead th{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:var(--t60);background:color-mix(in srgb,var(--surface) 50%,transparent);line-height:1.4;white-space:nowrap} .ledger th.lcol,.ledger td.lcol{text-align:left;min-width:180px} .ledger .name{font-weight:600;color:var(--t100)} .ledger .meta{font-size:.66rem;color:var(--t60)} .ledger tbody tr:hover{background:color-mix(in srgb,var(--surface) 35%,transparent)} .ledger .group td{text-align:left;background:color-mix(in srgb,var(--surface) 40%,transparent); font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t40);padding:6px 12px} .ledger .vectr td{background:var(--orange-soft)} .ledger .vectr td.lcol{box-shadow:inset 2px 0 0 var(--orange)} .ledger .vectr .name{color:var(--orange)} /* Same finding as the is-code core card: on warm paper the orange fill drops the row's own name to 4.11:1 and the green ticks sitting on it to 4.17:1 — measured, both under AA. The light accents were derived against paper, not against a tint. In light the row takes a neutral raised fill; the inset orange left edge above still marks it as ours. */ @media(prefers-color-scheme:light){ .ledger .vectr td{background:color-mix(in srgb,var(--surface) 55%,transparent)} } .ledger .y{color:var(--green)} /* The ✗ carries information — "this model does not do that" — so it has to clear AA like any other text. --t25 rendered it at 1.83:1 in dark, which is invisible rather than quiet. --t60 is the existing token already verified in both schemes (6.55:1 dark, 8.88:1 light); the ✓ stays green and the ◑ gold, so colour still separates the three states. */ .ledger .n{color:var(--t60)} .ledger .p{color:var(--gold);font-size:.72rem} .table-note{font-family:var(--mono);font-size:.68rem;color:var(--t40);margin-top:1rem;line-height:1.6;max-width:80ch} /* data registry table */ .data-table{width:100%;border-collapse:collapse;font-size:.82rem} .data-table th,.data-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--hair);vertical-align:top} .data-table thead th{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t60)} .data-table .src{color:var(--t100);font-weight:600} .data-table .vintage{font-family:var(--mono);color:var(--accent);font-size:.76rem;white-space:nowrap} .data-table tbody tr:hover{background:color-mix(in srgb,var(--surface) 30%,transparent)} /* ---- Disclosure / callout ----------------------------------------------- */ .callout{border:1px solid var(--hair);border-left:2px solid var(--accent);border-radius:4px; padding:clamp(1.2rem,2.5vw,1.8rem);background:color-mix(in srgb,var(--surface) 45%,transparent)} .callout h3{margin-bottom:.6rem} .callout p{color:var(--t70,var(--t60));font-size:var(--fs-small);line-height:1.6} .callout p+p{margin-top:.7em} /* ---- Footer ------------------------------------------------------------- */ footer.site{border-top:1px solid var(--hair);padding:clamp(2.5rem,5vw,3.5rem) 0;color:var(--t60);font-size:var(--fs-small)} footer.site .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center} footer.site a{color:var(--t80)}footer.site a:hover{color:var(--accent)} footer.site .legal{font-size:var(--fs-micro);color:var(--t40)} /* page-turn nav at foot of sub-pages */ .pageturn{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:4px;overflow:hidden;margin-top:var(--sp-6)} @media(min-width:760px){.pageturn{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}} .pageturn a{padding:1.1rem 1.3rem;background:var(--void);transition:background .2s} .pageturn a:hover{background:color-mix(in srgb,var(--surface) 50%,transparent)} .pageturn .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t40);display:block;margin-bottom:.3rem} .pageturn .v{font-family:var(--serif);color:var(--t100);font-size:1rem} /* ============================================================================ SIGNATURE — "Months → Seconds" (the one overdrive moment) A scroll-driven contrast between the status-quo turnaround and VECTR. ========================================================================== */ .race{position:relative;padding-block:var(--section-y)} .race-track{position:relative;display:grid;gap:clamp(1.5rem,4vw,3rem)} .lane{position:relative;border:1px solid var(--hair);border-radius:5px;overflow:hidden;background:color-mix(in srgb,var(--surface) 35%,transparent)} .lane-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1rem 1.3rem;border-bottom:1px solid var(--hair)} .lane-head .who{font-family:var(--serif);font-size:1.15rem;color:var(--t100)} .lane-head .clock{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:700;font-size:1.05rem;color:var(--t60)} .lane.vectr .lane-head{border-color:var(--orange-line)} .lane.vectr .clock{color:var(--orange)} .lane-body{position:relative;padding:1.3rem;min-height:88px} /* the progress fill driven by scroll */ .lane-fill{position:absolute;left:0;top:0;bottom:0;width:0%; background:linear-gradient(90deg,transparent,var(--accent-soft)); border-right:1px solid var(--accent-line)} .lane.status .lane-fill{--accent-soft:rgba(224,83,63,0.10);--accent-line:rgba(224,83,63,0.3)} .lane .steps{position:relative;display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap} .lane .step{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--t40); display:flex;flex-direction:column;gap:.3rem;flex:1;min-width:80px} .lane .step b{color:var(--t80);font-weight:600;font-size:.74rem} .lane.vectr .step.live b{color:var(--orange)} .race-readout{margin-top:clamp(2rem,5vw,3.5rem);text-align:left} .race-readout .big{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums; font-size:clamp(2.4rem,1.5rem + 4vw,5rem);line-height:1;color:var(--t100)} .race-readout .big .x{color:var(--orange)} /* Scroll-driven enhancement where supported; static (full) fallback otherwise */ @keyframes fillgrow{from{width:0%}to{width:100%}} @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .lane.status .lane-fill{width:0%;animation:fillgrow linear both; animation-timeline:view();animation-range:entry 10% cover 60%} .lane.vectr .lane-fill{width:0%;animation:fillgrow linear both; animation-timeline:view();animation-range:entry 12% cover 30%} /* fills far sooner: seconds vs months */ } } @supports not (animation-timeline:view()){ .lane .lane-fill{width:100%} .lane.vectr .lane-fill{background:linear-gradient(90deg,transparent,var(--orange-soft))} } /* ---- Reveal-on-scroll --------------------------------------------------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-soft),transform .7s var(--ease-soft)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.40s} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} .lane .lane-fill{width:100%} } /* ---- Utilities ---------------------------------------------------------- */ .grid{display:grid;gap:clamp(1rem,2vw,1.5rem)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}} .mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)} .maxw{max-width:var(--measure)} .linz{position:fixed;right:10px;bottom:8px;z-index:40;font-family:var(--mono);font-size:.6rem; color:var(--t40);background:color-mix(in srgb,var(--void) 75%,transparent);padding:3px 7px;border-radius:3px} /* ============================================================================ DELIGHT — the instrument lights up around you Cursor illumination + refined hover spotlights + button shine + count-up. Sophisticated, not loud. Fully disabled under prefers-reduced-motion. ========================================================================== */ :root{--mx:50vw;--my:28vh} /* soft warm light that trails the cursor (lifts the whole page subtly). Launch-day feedback (Dan, 2026-08-19): the grid pool that followed it is gone entirely, and the light is dimmed a step — .85→.70 dark, .42→.34 light. */ .cursor-light{position:fixed;top:0;left:0;width:1000px;height:1000px;margin:-500px 0 0 -500px;z-index:0;pointer-events:none; transform:translate3d(var(--mx),var(--my),0);will-change:transform;opacity:.70; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 62%)} @media(prefers-color-scheme:light){.cursor-light{opacity:.34}} /* hover spotlight: cards & rows catch the light where the cursor is over them */ .glow{position:relative} .glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0; transition:opacity .35s var(--ease); background:radial-gradient(280px circle at var(--lx,50%) var(--ly,50%),color-mix(in srgb,var(--accent) 18%,transparent),transparent 48%)} .glow.is-hot::after{opacity:1} .glow.is-hot{border-color:var(--accent-line);box-shadow:0 12px 36px -16px color-mix(in srgb,var(--accent) 55%,transparent)} .glow>*{position:relative;z-index:1} .plate:hover{transform:translateY(-3px)} /* button shine sweep */ .btn{position:relative;overflow:hidden} .btn::after{content:"";position:absolute;top:0;bottom:0;left:-130%;width:55%;transform:skewX(-18deg);pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.15),transparent);transition:left .55s var(--ease)} .btn:hover::after{left:150%} @media(prefers-reduced-motion:reduce){ .cursor-light,.btn::after{display:none} .glow::after{transition:none} }