/* ═══════════════════════════════════════════════════════════════════════ Dark.css — the dark colour scheme. Loads LAST, after Responsive.css. That's safe, and deliberate: this file contains COLOURS ONLY, inside a single `prefers-color-scheme: dark` query. Responsive.css owns layout and the hero's own colours, and the two never touch the same declarations. Keep it that way — if a layout rule ever needs to land here, it belongs in Responsive.css instead. ⚠️ Scope: everything BELOW the hero, plus the dock. The rest of the hero is not themed, on purpose. It's a stylised macOS desktop — a photographic wallpaper with a replica of the light-appearance app on it — so it reads as a product shot in both schemes. The dock is the exception (Eddy, 2026-11-01): it goes dark glass with a light running dot, like the real one. Base.css pins `color-scheme: light` on .Hero so the browser keeps rendering its form controls light even when the OS is dark. ⚠️ NO filters, transforms or will-change anywhere in this file, with the single exception of .Footer-icon (which already has a filter — see below). Adding any of those to module 3, or to the module 1/2 images, promotes them to compositing layers and brings back the mobile pop-in that took six rounds to kill. See "Module 3's covers popping in" in CLAUDE.md. ═══════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark){ :root{ /* Near-black, as asked — not pure. A little blue in it so it reads as "off black" rather than a dead grey, matching the cool cast of the page's greys in light mode. */ --page-bg: #0B0B0D; /* The footer is a step LIGHTER here, mirroring light mode where it's a step darker than the page. It also gives the near-black app icon a fractionally lighter ground to sit on. */ --footer-bg: #141417; --ink: #F2F2F5; --ink-soft: #A9A9B2; } /* ⚠️ The offset and blur radius must stay 0/4px/12px, identical to the light-mode rule in Page.css. That filter's bounds are load-bearing: they set the clearance between .Module--scatter and the footer that stops module 3 popping in on iOS, which is why .Footer padding-top is 184px. Only the COLOUR changes here — a faint light halo instead of a shadow, because the icon artwork is ~95% darker than this background and would otherwise dissolve into it. */ .Footer-icon{ filter: drop-shadow(0 4px 12px rgba(255,255,255,.16)); } .Footer-sep{ color: rgba(255,255,255,.34); } .Footer-link{ border-bottom-color: rgba(255,255,255,.24); } /* ── The footer's signup form ───────────────────────────────────────── Scoped to --footer throughout. Signup.css styles this form AND the one inside the hero window; the hero's must stay light, so nothing here may target a bare .SignupForm-* selector. */ .SignupForm--footer .SignupForm-input{ background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.11); color: var(--ink); } /* .47 is the alpha that puts placeholder text at 4.5:1 on this field. Light mode's placeholder only reaches 2.07:1 — worth raising there too some day, but that's a change to the light design, not this one. */ .SignupForm--footer .SignupForm-input::placeholder{ color: rgba(255,255,255,.47); } .SignupForm--footer .SignupForm-input:hover{ background: rgba(255,255,255,.08); } .SignupForm--footer .SignupForm-input:focus{ /* Light mode goes to solid #fff on focus, which would flash white here. */ background: rgba(255,255,255,.10); border-color: rgba(10,132,255,.65); } .SignupForm--footer .SignupForm-button{ background: rgba(255,255,255,.10); color: rgba(255,255,255,.56); } /* The ready state keeps #0a84ff on white — it already reads on dark. */ .SignupForm--footer .SignupForm-status{ color: rgba(255,255,255,.58); } /* Light mode's #c93028 / #1c7a3e are far too dark against near-black. */ .SignupForm--footer .SignupForm-status.is-error { color: #FF7B70; } .SignupForm--footer .SignupForm-status.is-success{ color: #5FE08D; } /* ── The dock (2026-11-01, Eddy) ───────────────────────────────────── The one part of the hero that DOES follow dark mode: dark glass and a light running dot, like the real Dock in dark appearance. Colours only; the blur, shape and every measurement stay Dock.css's. The tooltips and divider go dark with it — light pills on a dark dock looked pasted on. */ .Dock-list{ background: rgba(30,30,32,.38); border-color: rgba(255,255,255,.14); box-shadow: 0 8px 26px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10); } .Dock-running{ background: rgba(255,255,255,.75); box-shadow: 0 0 0 .5px rgba(0,0,0,.3); } .Dock-divider{ background: rgba(255,255,255,.22); box-shadow: 1px 0 0 rgba(0,0,0,.25); } .Tip{ color: #F2F2F5; } .Tip--name{ background: rgba(40,40,44,.82); border-color: rgba(255,255,255,.12); box-shadow: 0 4px 14px rgba(0,0,0,.4); } .Tip--upper{ color: rgba(255,255,255,.62); background: rgba(40,40,44,.74); border-color: rgba(255,255,255,.10); } .Tip-platform, .Tip-platformIcon{ color: rgba(255,255,255,.7); } /* ── The hero's signup window (2026-11-01, Eddy) ───────────────────── A macOS window in dark appearance: dark frosted glass, a light hairline along the top edge, a deeper shadow (the shadow and rim follow Iconic's dark window), light text, a dark field. Colours only — every size and position stays Signup.css's and the pages'. Scoped to .Signup: the same .SignupForm-* classes also style the phone and footer forms, which have their own dark looks. */ .Signup{ color-scheme: dark; /* the field's caret and autofill go dark too */ --tl-off: rgba(255,255,255,.25); /* inactive traffic lights, as in dark macOS */ background: rgba(40,40,43,.84); border-color: rgba(255,255,255,.12); box-shadow: inset 0 .5px 0 rgba(255,255,255,.14), 0 0 0 .5px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.5), 0 44px 90px rgba(0,0,0,.35); } .Signup-title{ color: #F2F2F5; } .Signup-subtitle{ color: rgba(255,255,255,.5); } .Signup .SignupForm-input{ color: #F2F2F5; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10); } .Signup .SignupForm-input::placeholder{ color: rgba(255,255,255,.35); } .Signup .SignupForm-input:hover{ background: rgba(255,255,255,.10); } .Signup .SignupForm-input:focus{ background: rgba(24,24,26,.9); border-color: rgba(10,132,255,.7); box-shadow: 0 0 0 3.5px rgba(10,132,255,.28); } .Signup .SignupForm.is-invalid .SignupForm-input{ border-color: rgba(255,105,97,.7); box-shadow: 0 0 0 3.5px rgba(255,105,97,.22); } /* Idle "Get Notified": quiet. The ready state keeps its #0a84ff — it already reads on dark. */ .Signup .SignupForm-button{ background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); } .Signup .SignupForm-status{ color: rgba(255,255,255,.58); } .Signup .SignupForm-status.is-error { color: #FF7B70; } .Signup .SignupForm-status.is-success{ color: #5FE08D; } }