/* ========================================================================== Theme: Instrument — Swiss/technical minimalism. Heavy tight-set sans headline, monospace labels, zero corner radius, one exact cobalt accent. Palette/type match the approved Direction B mockup exactly; dark mode is a derived, AA-checked variant. ========================================================================== */ :root { --bg: #ffffff; --surface: #f5f6f7; --ink: #0b0c0e; --muted: #5a6068; --line: #dadde1; --accent: #1f4fff; --accent-ink: #ffffff; --radius: 0px; --cta-radius: 0px; --cta-tracking: 0.04em; --cta-case: uppercase; --font-display: ui-sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: ui-sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-label: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --logo-case: none; --logo-tracking: -0.01em; --logo-size: 0.92rem; --logo-weight: 700; --nav-case: uppercase; --nav-tracking: 0.02em; --nav-size: 0.75rem; --nav-weight: 500; --headline-weight: 800; --headline-lh: 1.05; --headline-tracking: -0.03em; /* Impact-spec derived greys (no new hues) */ --band-muted: #b9bec6; --ghost: #eef0f2; --grid-line: #f2f3f5; } @media (prefers-color-scheme: dark) { :root { --bg: #0b0c0e; --surface: #131417; --ink: #f1f2f4; --muted: #9aa1aa; --line: #2a2d31; --accent: #7891ff; --accent-ink: #0b0c0e; --band-muted: #5a6068; --ghost: #1d2026; --grid-line: #15171a; } } /* Forced modes: the header toggle stamps data-color-mode on . These outrank the :root blocks (including the media query above) in both directions, so an explicit choice always wins over the system. */ html[data-color-mode="light"] { --bg: #ffffff; --surface: #f5f6f7; --ink: #0b0c0e; --muted: #5a6068; --line: #dadde1; --accent: #1f4fff; --accent-ink: #ffffff; --band-muted: #b9bec6; --ghost: #eef0f2; --grid-line: #f2f3f5; } html[data-color-mode="dark"] { --bg: #0b0c0e; --surface: #131417; --ink: #f1f2f4; --muted: #9aa1aa; --line: #2a2d31; --accent: #7891ff; --accent-ink: #0b0c0e; --band-muted: #5a6068; --ghost: #1d2026; --grid-line: #15171a; } /* Hero eyebrow: monospace uppercase cobalt -- the calibration-readout register fits the technical voice. (Hidden by default in base.css.) */ .page p.hero-eyebrow { display: block; font-family: var(--font-label); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.1rem; } /* Technical: a strict grid, ruled dividers, zero radius. The three problems and how-it-works steps snap to grid lines like cells on a spec sheet. */ .home .card-grid { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .home .card { padding: 1.4rem 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } @media (max-width: 700px) { .home .card-grid { border-left: none; } .home .card { border-left: 1px solid var(--line); } } /* ========================================================================== Impact pass — drama from scale, structure, and contrast inversion. No new hues: cobalt + ink + paper + derived greys only. ========================================================================== */ /* Move 1 — oversized hero display scale (home only), tuned down after reader feedback: still a statement, no longer a poster. */ .home .hero h1 { font-size: clamp(2.2rem, 5.5vw + 0.3rem, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; max-width: 22ch; } .home .hero > h1 + p { font-size: clamp(1rem, 1.3vw, 1.1rem); max-width: 50ch; } /* Move 5 — hairline graph-grid motif behind the hero */ .home .hero { background-image: repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 72px), repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 72px); background-position: 0 0; } /* Move 4 — section h2s become mono micro-labels; the weight contrast against the 800-weight display is what carries the page. */ .home section > h2 { font-family: var(--font-label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 0.65rem; margin: 0 0 clamp(1.2rem, 2.5vw, 1.75rem); } .home section > h2::before { content: "/ "; color: var(--accent); } /* Move 3 — ghost numerals behind the three-problems cards */ .problems-grid { counter-reset: problem; } .problems-grid .card { counter-increment: problem; position: relative; overflow: hidden; } .problems-grid .card::before { content: counter(problem, decimal-leading-zero) / ""; position: absolute; top: -0.18em; right: 0.05em; font-family: var(--font-label); font-size: clamp(4.5rem, 7vw, 6.5rem); font-weight: 700; line-height: 1; color: var(--ghost); z-index: 0; pointer-events: none; } .problems-grid .card > * { position: relative; z-index: 1; } /* Move 6 — ruled claim band (ink hairlines, oversized single sentence) */ .home .claim-band { border-block: 1px solid var(--ink); padding-block: clamp(1.6rem, 3.5vw, 2.5rem); } .home .claim-band > p { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; max-width: 38ch; color: var(--ink); margin: 0; } /* Move 2 — inverted full-bleed closing CTA band. Cobalt appears only as the top rule and as a button BACKGROUND — never as text on ink (3.37:1 would fail AA). */ .home .cta-band { background: var(--ink); color: var(--bg); margin-inline: calc(50% - 50vw); padding: clamp(2.25rem, 5vw, 3.75rem) calc(50vw - 50%); border-top: 3px solid var(--accent); margin-top: clamp(2.25rem, 5.5vw, 4rem); } .home .cta-band h2 { font-family: var(--font-display); color: var(--bg); font-size: clamp(1.5rem, 2.7vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; text-transform: none; border-bottom: none; padding-bottom: 0; margin: 0 0 1rem; } .home .cta-band h2::before { content: none; } .home .cta-band p { color: var(--band-muted); } /* The band sits flush against the footer */ .page.home { padding-block-end: 0; } body:has(.home) .site-footer { margin-top: 0; border-top: none; }