/* ========================================================================== World Accelerator — Petrol & Copper -------------------------------------------------------------------------- Colour-only overlay. No markup, copy, layout or animation is touched: it is loaded AFTER the compiled stylesheet and re-points colour utilities. The idea -------- The page keeps its original light/dark rhythm — dark hero, light proposition, dark gateway, light why, dark impact and network, light join, dark close — but both halves change temperature so the alternation reads as a decision rather than an accident: dark = deep petrol teal (#12333A). Cool, institutional, and not the near-black it started as, which absorbed light and looked unbranded. light = warm bone and sand (#FBF8F1 / #F2ECE1). Warm, so the light sections feel like paper instead of a screen, and never wash out. Cool dark against warm light is what stops the page reading as "too dark" or "too light" — neither half is neutral, so each one supports the other. Teal leads and copper answers it: they sit opposite each other, so copper is the loudest possible accent at the smallest possible dose. Two values of each, because a colour that carries on petrol cannot carry on bone. Selectors are attribute matchers ([class~=…] / [class*=…]) rather than escaped class selectors, so arbitrary Tailwind variants (bg-white/[0.028], supports-[backdrop-filter]:bg-ink-950/65, shadow-[…rgba(47,93,255,0.85)], …) are covered without enumerating every compiled name. They carry class-level specificity, so load order is what makes them win — keep this file last in . ========================================================================== */ :root { /* ---- dark half: petrol teal ---- */ --d-base: #12333a; /* main dark surface */ --d-raise: #143943; /* raised dark section — deliberately only a step above --d-base: lifting it further washed the copper text on it down to 4.1:1, and pastelling the copper to compensate cost more than the extra separation was worth */ --d-line: rgb(150 205 208 / 0.2); /* hairline on petrol */ --d-card: rgb(255 255 255 / 0.055); /* glass card fill on petrol */ /* ---- light half: warm bone & sand ---- */ --l-page: #fbf8f1; /* the white sections, warmed */ --l-soft: #f2ece1; /* the alternating sand sections */ --l-line: #e4dac9; /* hairline on bone */ /* ---- teal: the lead accent ---- */ --t-fill: #0b7a77; /* solid fills and buttons; carries white text at 5.2:1 */ --t-fill-hi: #0e8f8b; /* hover */ --t-dark: #5ad6ce; /* teal that has to read on petrol */ --t-light: #0a6b69; /* teal that has to read on bone */ --t-wash: #e3efec; /* tinted chip background on bone */ /* ---- copper: the answer ---- */ --c-dark: #e58540; /* copper graphics on petrol: dots, glows, gradients */ --c-text: #F5AE74; /* copper *text* on petrol — #e58540 only reaches 3.1:1 against the raised section */ --c-light: #9b4e20; /* copper text on bone */ /* ---- type ---- */ --tx-d-head: #f4f1ea; --tx-d-body: #c3d6d6; --tx-d-mute: #93afb0; --tx-l-head: #12262a; --tx-l-body: #3a5257; --tx-l-mute: #4e6b6f; } /* Overscroll ground behind the app, also set inline in . */ html, body { background: var(--d-base); } /* =============================================== 1. surfaces: the dark half */ [class~='bg-ink-950'] { background-color: var(--d-base); } [class~='bg-ink-900'] { background-color: var(--d-raise); } /* Translucent variants: header glass, mobile drawer, overlays. */ [class*='bg-ink-950/'] { background-color: rgb(18 51 58 / 0.82); } [class*='bg-ink-900/'] { background-color: rgb(20 57 67 / 0.9); } /* The selected layer tab, a glass panel over the dark ground. */ [class~='glass-dark'] { background: linear-gradient(150deg, rgb(11 122 119 / 0.34), rgb(18 51 58 / 0.55)); } /* Rule grid over dark sections. */ [class~='bg-grid-dark'] { background-image: linear-gradient(90deg, rgb(150 205 208 / 0.1) 1px, #0000 1px), linear-gradient(rgb(150 205 208 / 0.1) 1px, #0000 1px); } /* Gradient stops that fade artwork into the dark ground. */ [class~='from-ink-950'] { --tw-gradient-from: var(--d-base) var(--tw-gradient-from-position); --tw-gradient-to: rgb(18 51 58 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [class*='via-ink-950/'] { --tw-gradient-to: rgb(18 51 58 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(18 51 58 / 0.85) var(--tw-gradient-via-position), var(--tw-gradient-to); } /* Glass cards and hairlines on petrol. */ [class*='bg-white/['] { background-color: var(--d-card); } [class*='border-white/'] { border-color: var(--d-line); } [class~='hairline-dark'] { box-shadow: inset 0 0 0 1px rgb(150 205 208 / 0.2); } /* Ambient blobs behind the hero and the closing panel. */ [class*='bg-accel-700/'], [class*='bg-accel-600/'] { background-color: rgb(11 122 119 / 0.34); } /* ============================================== 2. surfaces: the light half */ /* Warmed, so the light sections read as paper. The cards that sit on them are the same family one step brighter, and keep their existing elevation shadow to separate — which is why both can share this value without flattening. */ [class~='bg-white'] { background-color: var(--l-page); } [class~='bg-paper-50'] { background-color: var(--l-soft); } [class~='bg-paper-200'] { background-color: var(--l-line); } [class~='border-paper-200'] { border-color: var(--l-line); } [class~='hairline-light'] { box-shadow: inset 0 0 0 1px rgb(18 38 42 / 0.12); } [class~='bg-grid-light'] { background-image: linear-gradient(90deg, rgb(18 38 42 / 0.07) 1px, #0000 1px), linear-gradient(rgb(18 38 42 / 0.07) 1px, #0000 1px); } /* The tinted chip background used on light sections. */ [class~='bg-accel-50'] { background-color: var(--t-wash); } /* ==================================================== 3. teal: the lead hue */ /* Solid fills: primary buttons, dots, rails, dividers. */ [class~='bg-accel-500'], [class~='bg-accel-400'], [class~='bg-accel-300'], [class*='bg-accel-300/'], [class*='bg-accel-500/'] { background-color: var(--t-fill); } [class~='hover:bg-accel-400']:hover { background-color: var(--t-fill-hi); } [class~='border-accel-500'], [class*='border-accel-400/'] { border-color: var(--t-fill); } /* Gradient rules and sheens drawn in the accent. */ [class*='from-accel-500'], [class*='from-accel-400/'], [class*='from-accel-300/'] { --tw-gradient-from: rgb(11 122 119 / 0.75) var(--tw-gradient-from-position); --tw-gradient-to: rgb(11 122 119 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [class*='via-accel-400'] { --tw-gradient-to: rgb(11 122 119 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--t-dark) var(--tw-gradient-via-position), var(--tw-gradient-to); } /* Accent text. The 100–300 steps live on petrol, the 500–600 steps on bone. */ [class*='text-accel-100'], [class*='text-accel-200'], [class*='text-accel-300'] { color: var(--t-dark); } [class*='text-accel-500'], [class~='text-accel-600'] { color: var(--t-light); } /* The brand glow under the primary button, and the ring on the active tab. */ [class*='rgba(47,93,255'] { box-shadow: 0 14px 36px -14px rgb(11 122 119 / 0.85); } [class*='rgba(94,133,255'] { box-shadow: inset 0 0 0 1px rgb(90 214 206 / 0.42); } /* ================================================= 4. copper: the answer */ /* The cyan signal held the secondary-accent role; copper takes it. Every place it lands is a dark section, so the bright value is the one in play. */ [class~='text-signal-cyan'] { color: var(--c-text); } [class~='bg-signal-cyan'], [class*='bg-signal-cyan/'] { background-color: var(--c-dark); } [class*='via-signal-cyan'] { --tw-gradient-to: rgb(229 133 64 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--c-dark) var(--tw-gradient-via-position), var(--tw-gradient-to); } [class*='to-signal-cyan'] { --tw-gradient-to: var(--c-dark) var(--tw-gradient-to-position); } [class*='rgba(59,214,240'] { box-shadow: 0 0 14px 3px rgb(229 133 64 / 0.55); } /* One warm ambient wash, so the hero is not uniformly cool. */ [class*='bg-signal-cyan/['] { background-color: rgb(229 133 64 / 0.14); } /* The animated wordmark sheen — same animation, landing on copper. Kept inside the warm family end to end: a teal-to-copper ramp desaturates through grey at the midpoint, which turned the middle word of the headline muddy. */ [class~='text-gradient'] { background: linear-gradient(96deg, #f7f4ed 4%, #ffd9a8 28%, var(--c-dark) 62%, #f7f4ed 94%) 0 0 / 200%; color: #0000; -webkit-background-clip: text; background-clip: text; } /* The metric strip carried four accents at once, which pulls against a two-hue palette. Narrowed to teal + copper here only — emerald and violet stay untouched elsewhere, where they identify Layer 02 and Layer 03 site-wide. */ /* Sand gold, the fourth page accent, matching the sub-pages. */ [class~='text-signal-amber'] { color: #e8bc6e; } [class~='bg-signal-amber'], [class*='bg-signal-amber/'] { background-color: #e8bc6e; } /* ================================================================= 5. type */ /* On petrol. paper-300 at 35–75% opacity was tuned against near-black; petrol is lighter, so those steps lose contrast. Replaced with three solid steps that keep the original hierarchy (meta < secondary < body) and each clear AA. */ [class~='text-white'], [class*='text-white/'] { color: var(--tx-d-head); } [class~='text-paper-100'], [class~='text-paper-200'], [class*='text-paper-200/'] { color: var(--tx-d-body); } [class*='text-paper-300/7'], [class*='text-paper-300/65'] { color: var(--tx-d-body); } [class*='text-paper-300/5'] { color: #a8c2c3; } [class*='text-paper-300/4'], [class*='text-paper-300/3'] { color: var(--tx-d-mute); } /* On bone. */ [class~='text-ink-900'], [class*='text-ink-900/'] { color: var(--tx-l-head); } [class~='text-ink-800'], [class*='text-ink-800/'] { color: var(--tx-l-body); } [class*='text-ink-700/8'], [class*='text-ink-700/7'] { color: var(--tx-l-body); } [class*='text-ink-700/6'], [class*='text-ink-700/5'] { color: var(--tx-l-mute); } [class*='text-ink-700/4'], [class*='text-ink-700/3'] { color: #6d8a8d; /* the oversized decorative numerals */ } /* White stays white where it sits on a solid teal fill. Two classes, so these outrank the single-class rule above. */ [class~='bg-accel-500'][class~='text-white'], [class~='bg-accel-400'][class~='text-white'], [class~='bg-accel-500'][class*='hover:text-white'], [class*='group-hover:bg-accel-500'][class*='group-hover:text-white'] { color: #fff; } /* Layer 02 and Layer 03 keep their own identity hues, but those are now drawn from the palette too: sea green and slate teal, matching what the 38 sub-pages compile from shared/tailwind.preset.ts. */ [class~='text-signal-emerald'] { color: #57c7ab; } [class~='bg-signal-emerald'], [class*='bg-signal-emerald/'] { background-color: #2e9e86; } [class~='text-signal-violet'] { color: #7fb4cd; } [class~='bg-signal-violet'], [class*='bg-signal-violet/'] { background-color: #3e7c99; } #impact [class~='text-signal-emerald'] { color: var(--t-dark); } #impact [class~='text-signal-violet'] { color: var(--c-text); } /* ====================================================== 6. hero artwork */ /* The globe is a