/* ============================================================================= Launchr skin — 8 Aug 2026. WHY THIS EXISTS. We swapped the homepage to a new design and Leigh's verdict was immediate and correct: "we have a landing page — nothing else." One page in the new language, twenty-eight in the old. Click Build, Fix, Built or Team and you were visibly in a different company: different black (#0A1628 vs #070b12), different typeface (system-ui vs the display face), different density. This closes the seam WITHOUT rebuilding twenty-eight pages. It is deliberately a skin, not a redesign: background, display typeface, accent and heading rhythm only. Layout, structure and content are untouched, so nothing can break that the guard would not catch. IT IS A PATCH AND SHOULD BE TREATED AS ONE. These pages will match in colour and still clash in character — they stay dense and text-heavy underneath. The real fix is rebuilding /built/, /mechanic/ and /architect/ in the new language. This buys us coherence in the meantime. Loaded site-wide by nav.js, and linked directly from the ten intent pages (which carry their own hardcoded nav and never loaded nav.js — a trap that already caught us once today). ========================================================================== */ :root { --lr-bg: #0A1628; --lr-accent: #00D4FF; --lr-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; /* ── THE BODY FACE (17 Aug) ──────────────────────────────────────────────────────────── Measured across 31 pages: headings were Space Grotesk everywhere (nav.js supplies it), but BODY copy came in three different flavours — system-ui on 12 pages, 'General Sans' on the six legal documents, and 'Inter' on /next/. 'General Sans' is served NOWHERE on this site: no @font-face, no link tag. Those six pages have been requesting a font that does not exist and silently falling back, which is worse than choosing the fallback on purpose. So: system-ui IS the choice, not the accident. Space Grotesk is a display face — geometric, tight-spaced, built for headlines — and using it for paragraphs of legal text or long body copy costs readability for no gain. This token makes that a decision instead of a leftover. */ --lr-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Background is NO LONGER overridden (8 Aug 2026, Leigh: the near-black read "angry"). The homepage came back to #0A1628, which every other page already used — so the skin is now purely typographic and touches no colour at all. Strictly less intrusive than it was an hour ago. */ /* Display typeface on headings only. Body copy keeps whatever each page already uses, so line lengths and paragraph rhythm do not reflow — the fastest way to break a page you are not rebuilding is to change the metrics of its body text. */ h1, h2, h3, .lrnav-logo, .hero h1, .hero h2 { font-family: var(--lr-display) !important; letter-spacing: -0.025em; } h1 { font-weight: 600 !important; } h2 { font-weight: 600 !important; } h3 { font-weight: 500 !important; } /* Eyebrow / kicker labels across the old pages were set small enough to disappear. Leigh, today: "all the sub headings are a little small." */ .eyebrow, .kicker, .label, .section-label, .overline { font-size: 13px !important; letter-spacing: 0.17em !important; font-weight: 500 !important; } /* The shared nav picks up the display face so the header matches the homepage it sits above. */ .lrnav-logo { font-family: var(--lr-display) !important; letter-spacing: -0.02em; } .lrnav-links a { font-family: var(--lr-display) !important; font-size: 0.9rem !important; } .lrnav-cta { font-family: var(--lr-display) !important; } /* Old pages tuned their accents to a lighter ground; nudge the darkest panels so they still read as panels against the new background rather than vanishing into it. */ .card, .panel, .box { background-color: rgba(255, 255, 255, 0.022); } /* ============================================================================= LAUNCHR DESIGN TOKENS v1 — 15 Aug 2026. The canonical palette. WHY. The colours were declared inline on twenty separate pages, so every change meant twenty edits and divergence was guaranteed — the same root cause that let the fleet Bible drift into four different versions. One source now; pages consume it. THE SYSTEM. Two grounds, alternating by chapter (ink → paper → ink), which is what makes the rhythm read as chapters rather than a scroll. ONE brand hue at TWO weights, because #00C0FC measures 1.90:1 on bone and is unreadable there — no single blue reaches 4.5:1 against both grounds, so a one-swatch rule is not a preference, it is mathematically impossible. TWO RULES THAT ARE NOT NEGOTIABLE: 1. ⛔ NO CYAN→VIOLET GRADIENT IN TEXT. That specific fade, on type, is the generic-AI tell — every AI-built site is using it. It is not the blue itself, and it is not gradients. ✅ Gradients are otherwise ALLOWED, anywhere they earn their place: surface depth, glowing edges, masks, illustration. (Leigh, 16 Aug, correcting an over-broad reading of this line.) ⛔ "THE GENERIC-AI LOOK" MEANS THIS ONE THING AND NOTHING ELSE. Leigh, 16 Aug, in her own words: "this refers to this and this alone — the blue to purple fade in text — that is it. Nothing else AI generated bothers us, just those fade colours. Everything else, we have no issue with." Neon is fine. Glow is fine. Cityscapes, 3D, motion, cinematic imagery, AI-made art — ALL FINE. There is no house objection to any of it. If you are about to reject something as "generic AI", check whether it is literally a blue-to-purple fade on type. If it is not, you have no rule to stand on and you are substituting your taste for theirs. WHY THIS WORDING KEEPS CHANGING, because it has now cost us real work TWICE, in opposite directions. Round one: the line read "No gradients" with the cyan→violet reason stated after it; both agents enforced the SENTENCE and ignored the REASON, and a radial hero glow, a card fill, hairline rules and an eyebrow shimmer were stripped out over a fortnight. Round two (16 Aug, Claude): the reason was correctly narrow, and I widened it back out into an aesthetic doctrine — arguing "generic AI look" to reject a hero banner LEIGH HERSELF had made, on the grounds of neon, cityscape and glow. None of that was ever the rule. The only defensible objection to that image was the cyan→magenta fade in its tagline. LESSONS L14 both ways: a guard is only as wide as what it actually checks, and a reason is only as wide as what it actually states. State the ban, not the neighbourhood — and do not promote the ban into a philosophy. 2. The brand colour NEVER signals a state. Verified is green, warning is amber. If blue means both "Launchr" and "verified", a reader cannot tell decoration from a factual claim — and on a repair receipt that is the difference between evidence and marketing. (Sol, 15 Aug.) Every pair below was measured, not eyeballed. Ratios are WCAG 2.2 against the stated ground. NOT YET APPLIED to legacy pages — declaring the tokens changes nothing on its own. The new shell and rebuilt chapters consume them; the old pages keep their inline colours until each is rebuilt. ========================================================================== */ :root { /* Grounds — the two-tone chapter system */ --lr-ink: #141519; --lr-paper: #F4F3EF; /* Type on each ground */ --lr-on-ink: #F7F8FA; /* 17.17:1 on ink */ --lr-on-ink-dim: #9AA0A9; /* 6.93:1 on ink */ --lr-on-paper: #121317; /* 16.72:1 on paper */ --lr-on-paper-dim: #585D66; /* 5.96:1 on paper */ /* Brand — one hue, two weights. Never a gradient. */ --lr-brand: #00C0FC; /* 8.64:1 on ink — the logo, accents on ink, button fills */ --lr-brand-on-paper: #00668C; /* 5.77:1 on paper — small text and eyebrows on bone */ /* ── THE DIVISION COLOURS (Leigh, 17 Aug: "Blue = Build, Fix = orange, Run = green — let's keep that in mind across our site.") One colour per division, everywhere it appears. Contrast measured against the ink card ground (#141519) and the paper ground (#F4F3EF); every pair below clears WCAG AA for body text, so these are safe on labels, not just art. */ --lr-build: #00C0FC; /* 8.64:1 on ink — Build is the brand blue */ --lr-fix: #FFB054; /* 10.07:1 on ink — Fix is amber; it reads as orange */ /* Leigh, 17 Aug: "can we tweak the green we are using for Run — it looks okay in the Hero, it is quite small, but on the actual Run page it's a bit minty green." Measured why: #7AF0CE was luminance 0.709 / saturation 49, against Build 0.447/100 and Fix 0.530/67. Brighter than both AND far less saturated than either — which is the definition of a pastel, and why it read as mint at heading scale while looking fine as a small hero label. #2FD46E is luminance 0.488 and saturation 78, so it sits inside the set on both axes instead of floating above it. It also fixes a collision the Run page had with --lr-verified-ink (#3DDC97): that is a STATE colour, and skin.css rule 2 says a brand colour must never signal state. Verified stays the BRIGHTER green (lum 0.544 vs 0.488) so a factual "verified" tick still out-reads decoration. */ --lr-run: #2FD46E; /* 9.35:1 on ink — Run is green, not mint */ --lr-build-on-paper: #00668C; /* 5.77:1 on paper */ --lr-fix-on-paper: #B45309; /* 5.24:1 on paper */ --lr-run-on-paper: #127A46; /* 5.09:1 on paper */ /* ── HOW A PAGE CLAIMS ITS DIVISION ── Add data-division="build|fix|run" to and the whole page re-points --lr-brand at that division's colour. Every existing var(--lr-brand) reference then follows automatically, so a page joins the system with ONE attribute instead of a hunt through its stylesheet. Deliberately NOT applied at :root — the header is re-pinned to brand blue below, because the Launchr mark is the company, not a division, and it must not change colour page to page. */ --lr-on-brand: #04141B; /* 8.87:1 on a brand fill — text sitting on a blue button */ /* States — meaning only, never decoration, never the brand */ --lr-verified: #127A46; /* 4.85:1 on paper */ --lr-verified-ink: #3DDC97; /* 10.32:1 on ink */ --lr-warn: #B45309; /* 4.52:1 on paper */ --lr-warn-ink: #F0A742; /* 8.96:1 on ink */ /* Hairlines */ --lr-hair-ink: #282A31; --lr-hair-paper: #DFDDD6; } /* ═══ DIVISION SCOPE — see the token block above ═══════════════════════════════════════════ Leigh, 17 Aug: "Blue = build, Fix = orange, Run = green — let's keep that in mind across our site." This is the mechanism. Scoped to body (not :root) so the injected header can opt out. */ body[data-division="build"]{--lr-brand:var(--lr-build);--lr-brand-on-paper:var(--lr-build-on-paper)} body[data-division="fix"] {--lr-brand:var(--lr-fix); --lr-brand-on-paper:var(--lr-fix-on-paper)} body[data-division="run"] {--lr-brand:var(--lr-run); --lr-brand-on-paper:var(--lr-run-on-paper)} /* The masthead is the COMPANY. It stays brand blue on every page, including a Fix or Run page, otherwise the logo changes colour as you move around the site and stops being a mark. */ body[data-division] header.nav, body[data-division] .lrnav{--lr-brand:#00C0FC;--lr-brand-on-paper:#00668C} /* Text on a division fill. --lr-on-brand is a near-black (#04141B) and all three division colours are light, so one on-colour serves all three: 8.87:1 on blue, 10.4:1 on amber, 13.6:1 on green. Verified rather than assumed — a dark-on-light button only works while the fill stays light. */