/* Lateral — theme tokens. --------------------------------------------------------------------------- Every page consumes these; no page should hardcode a colour again. THE SITE IS LIGHT. Apple's grammar: a white page, a #f5f5f7 tint for the alternating band, near-black type, and a hairline that is a real grey rather than black-at-8%-alpha (which reads as dirt on paper, not as an edge). Resolution order: 1. html[data-theme="light|dark"] — an explicit choice, if a toggle returns 2. light — the default, and the brand's home Light is DESIGNED, not inverted. Two things a naive flip gets wrong: THERE IS NO SINGLE BRAND COLOUR. Apple does not have one either: the page is neutral, anything you can press is the system blue, and colour arrives from the SUBJECT — the hue belongs to what the section is about, not to the company. So this file ships two things instead of one accent: - --accent / --accent-text / --accent-ink: the SYSTEM colour. Blue. Buttons, links, focus rings, the active state of a control. It never varies by section, because "this is pressable" must not change meaning page to page. Its exact values live in the --sys block below, which is the only place to change them. - --hue-*: the SECTION colours. A block opts into one by setting --accent and --accent-text from a hue (see the .tint-* helpers), so every component built on the accent tokens re-tints with no new rules. Hazard is the orange→red severity ramp because there the colour carries MEANING, not decoration; weather is sky; fleet is indigo; the marketplace is green. Every hue below is listed with its contrast against white. Anything under 4.5:1 is a FILL or a graphic only, and has a darker -text twin beside it. The dark tokens below are kept complete and correct: the homepage's art-directed dark bands (the hazard engine scene, the R2 die) opt into them with .on-dark, the same way Apple runs a black section inside a white page. */ :root { /* ── The system colour ──────────────────────────────────────────────── ONE place. Everything that means "you can press this" — every button, the nav CTA, links — reads these and nothing else, so trying a different system colour is editing this block and nothing more. Blue. #0071e3 is 4.7:1 against white BOTH ways — the same hex works as a fill carrying white text and as text on the page — which is why --sys-ink is white here. --sys-text is a step darker for small type and links. The neon orange was tried in this slot and taken back out. If it returns: --sys #FF4F00 · --sys-hover #E64700 · --sys-text #CC3E00 --sys-ink #17130b · --sys-dark #FF6A2A · --sys-dark-text #FF8A5C Note --sys-ink goes NEAR-BLACK with it, not white: white on #FF4F00 is 3.3:1 and fails at button sizes, near-black is 5.5:1. That, rather than the hue, is what made the buttons look different. */ --sys: #0071e3; --sys-hover: #0a7cf0; --sys-text: #0066cc; --sys-ink: #ffffff; --sys-soft: rgba(0,113,227,.10); --sys-dark: #0A84FF; /* lifted for near-black backgrounds */ --sys-dark-text: #6bb7ff; --sys-dark-soft: rgba(10,132,255,.18); /* ── Section hues ── fill/graphic first, then the twin that can carry text */ --hue-hazard: #FF4F00; /* 3.3:1 — the severity ramp's high end */ --hue-hazard-text: #CC3E00; /* 4.9:1 */ --hue-weather: #0A84FF; /* 3.5:1 — sky */ --hue-weather-text:#0066cc; /* 5.6:1 */ --hue-fleet: #5E5CE6; /* 4.7:1 — indigo */ --hue-fleet-text: #4B49C6; /* 6.0:1 */ --hue-schedule: #A755C2; /* 3.9:1 — violet */ --hue-schedule-text:#8339A0; /* 5.9:1 */ --hue-market: #1a9d5c; /* 3.0:1 — green */ --hue-market-text: #10733f; /* 4.9:1 */ /* Plan had no hue and fell through to --sys, which put its heading within a few degrees of Weather's sky blue and read as a mistake. Teal is the one gap left in the set: not the two blues, not the hazard ramp (where orange carries meaning and must not be spent on a product name). */ --hue-plan: #12B5C9; /* 2.5:1 — teal, fills and graphics only */ --hue-plan-text: #0E7C8B; /* 4.9:1 */ --amber: #F5A524; /* the hazard ramp's LOW end — meaning, not brand */ --ember: #FB7233; --green: #34D399; --disp: "Space Grotesk", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif; --ease: cubic-bezier(.2,.6,.2,1); --on-solid: #ffffff; /* text on a saturated fill — never flips */ color-scheme: light; } /* ── Light (default) ─────────────────────────────────────────────────────── */ :root, :root[data-theme="light"] { color-scheme: light; --ink: #ffffff; /* page background — NOT the text colour */ --bg: #ffffff; --bg-tint: #f5f5f7; /* Apple's alternating band */ --panel: #ffffff; --panel-2: #f5f5f7; --card: #ffffff; --card-brd: #e3e3e8; --line: #e3e3e8; --line-strong: #d2d2d7; --txt: #1d1d1f; --txt-body: #424245; --txt-dim: #6e6e73; --accent: var(--sys); /* the system colour: pressable, nothing else */ --accent-text: var(--sys-text); /* a step darker, for small type and links */ --accent-ink: var(--sys-ink); /* text sitting ON the accent */ --accent-soft: var(--sys-soft); --shadow: 0 4px 24px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05); --ok-bg: rgba(21,128,61,.10); --ok-text: #15803d; --warn-bg: rgba(146,97,10,.12); --warn-text: #92610a; } /* ── Dark ──────────────────────────────────────────────────────────────── Reachable two ways: html[data-theme="dark"] for a whole page, and .on-dark for one art-directed band inside a light page. Both set the same tokens, so anything built on tokens simply works in either. */ :root[data-theme="dark"], .on-dark, .card.dark { /* a black tile inside the light grid is a dark context */ color-scheme: dark; --ink: #070809; --bg: #080c10; --bg-tint: #0d0f12; --panel: #0d0f12; --panel-2: #111419; --card: rgba(255,255,255,.04); --card-brd: rgba(255,255,255,.09); --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.14); --txt: #f5f5f7; --txt-body: rgba(255,255,255,.72); --txt-dim: rgba(255,255,255,.45); --accent: var(--sys-dark); --accent-text: var(--sys-dark-text); --accent-ink: var(--sys-ink); --accent-soft: var(--sys-dark-soft); --shadow: 0 18px 50px rgba(0,0,0,.45); --ok-bg: rgba(34,197,94,.13); --ok-text: #6ee7a0; --warn-bg: rgba(245,158,11,.14); --warn-text: #fcd34d; } /* An .on-dark band paints itself, so a section only has to carry the class. */ .on-dark { background: var(--ink); color: var(--txt-body); } /* ── Theme switching ─────────────────────────────────────────────────────── */ /* Suppress transitions during a theme switch. Without this every colour on the page animates at once, which looks like a fault rather than a change. */ :root.theme-switching, :root.theme-switching * { transition: none !important; } /* Native form controls, scrollbars and selection follow the page, not the OS. */ ::selection { background: rgba(0,113,227,.20); color: #1d1d1f; } /* Buttons are NOT tinted, for the same reason the nav is not: on Apple's site every button is the one blue, everywhere, and the section's colour lives in eyebrows, tags, meters, marks and imagery instead. A Download button that was orange on /hazard/ and indigo on /fleet/ would be teaching the reader that colour means "which page am I on" rather than "you can press this". These re-pin the system colour on the element itself, so a .tint-* on any ancestor re-tints everything around the button and not the button. */ .pill-btn.solid, .btn:not(.ghost), a.cta, .cta, button.primary, .suite a.on, .hero-ctas .pill-btn.solid { --accent: var(--sys); --accent-text: var(--sys-text); --accent-ink: var(--sys-ink); } :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track) :is(.pill-btn.solid, .btn:not(.ghost), a.cta, .cta, .suite a.on) { --accent: var(--sys-dark); --accent-text: var(--sys-dark-text); --accent-ink: var(--sys-ink); } /* ── Section tints ──────────────────────────────────────────────────────── Put one of these on a section and everything inside it that was built on --accent re-tints: buttons, eyebrows, rules, meters, tags. This is the whole mechanism — there is no per-section stylesheet anywhere. */ .tint-hazard { --accent: var(--hue-hazard); --accent-text: var(--hue-hazard-text); --accent-soft: rgba(255,79,0,.10); --accent-ink: #17130b; } .tint-weather { --accent: var(--hue-weather); --accent-text: var(--hue-weather-text); --accent-soft: rgba(10,132,255,.10); } .tint-fleet { --accent: var(--hue-fleet); --accent-text: var(--hue-fleet-text); --accent-soft: rgba(94,92,230,.10); } .tint-schedule { --accent: var(--hue-schedule); --accent-text: var(--hue-schedule-text); --accent-soft: rgba(167,85,194,.10); } .tint-market { --accent: var(--hue-market); --accent-text: var(--hue-market-text); --accent-soft: rgba(26,157,92,.10); } .tint-plan { --accent: var(--hue-plan); --accent-text: var(--hue-plan-text); --accent-soft: rgba(18,181,201,.10); } /* On a dark band the same hues need lifting, and the ink on a fill flips. */ /* `dark` here is every way a dark context is declared — a pinned page, an art-directed band, or a single black tile in the light grid. */ :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track):is(.tint-hazard), :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track) .tint-hazard { --accent: #FF6A2A; --accent-text: #FF8A5C; --accent-soft: rgba(255,106,42,.18); --accent-ink: #17130b; } :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track):is(.tint-weather), :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track) .tint-weather { --accent: #0A84FF; --accent-text: #6bb7ff; --accent-soft: rgba(10,132,255,.20); } :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track):is(.tint-fleet), :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track) .tint-fleet { --accent: #7D7BFF; --accent-text: #A5A3FF; --accent-soft: rgba(125,123,255,.20); } :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track):is(.tint-schedule), :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track) .tint-schedule { --accent: #C77BDE; --accent-text: #DDA8EE; --accent-soft: rgba(199,123,222,.20); } :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track):is(.tint-market), :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track) .tint-market { --accent: #34D399; --accent-text: #6ee7a0; --accent-soft: rgba(52,211,153,.18); --accent-ink: #17130b; } :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track):is(.tint-plan), :is(:root[data-theme="dark"], .on-dark, .card.dark, .engine-track, .isl-track) .tint-plan { --accent: #2AC7DA; --accent-text: #62DCEB; --accent-soft: rgba(42,199,218,.20); --accent-ink: #17130b; }