/* ===================================================================== World Explorers · client/brand.css Purpose: The shared visual language — the COMPLETE design-token layer (REQ-WEX-037 / CODE-WEX-018). Every themeable color, radius, and shadow is a CSS custom property; a theme is one day/night token block and night mode is a pure variable swap (no component restates a dark value). Day/night follows the OS preference by default and a manual [data-theme] override when the user or kit sets one (via theme.js). Author: Frontend / UX (2026-07-17). Notes: Zero-build — link it, don't import. Per-kit palette tokens (--accent, --ink, --paper, …) are layered on top at runtime by render.js from the active kit's palette{day,night}. ===================================================================== */ :root { /* Semantic colors (day). */ --navy:#1E2A44; --ink:#243038; --teal:#2E8B9B; --pink:#E8657A; --gold:#FBD45E; --green:#6FBE7A; --sky:#6FB7D6; --purple:#B58CD6; --orange:#F2A03D; --paper:#ffffff; --muted:#5f7686; --card:rgba(255,255,255,.90); --cardline:#e3ebf2; /* The kit-supplied tokens' NO-KIT defaults. Pre-auth and grown-up pages (verify/app/migrate) never load a kit, so without these they had to declare their own `:root` block — which then shadowed this file and broke their night mode. Owning the defaults here is what lets those blocks go away (ADR-WEX-029 D3). Kit Zero's values, so a kit swap is a no-op on day one. */ --accent:#2E8B9B; --coral:#E8657A; /* Text drawn ON an accent/teal fill (headers, primary buttons). White reads on the saturated day accent; in dark the kit's night accent is pale, so this flips to a dark ink for legibility (the idiomatic bright-accent/dark-text dark treatment). --error: danger/validation text, brightened for dark. */ --on-accent:#ffffff; --error:#c0392b; --success:#1b7a3d; /* Text drawn ON a --gold fill (selected chips, "done" rows, win banners). Deliberately does NOT flip in night: unlike accent, gold stays bright in both modes, so the readable pairing is a dark ink in both. Rules that let this inherit --ink instead went light-on-gold at night (REQ-WEX-040 AC-6). */ --on-gold:#1E2A44; /* Page background gradient stops. */ --bg1:#BCE2F4; --bg2:#CFEAF6; --bg3:#D9F0DC; --bg4:#C7E9B6; /* Hub-tile paintbox (REQ-WEX-040 FR-5) — six fills a grid of choices cycles through, so adjacent tiles never share a colour and the grid reads as a paintbox rather than a table. Supplied per kit (declared or derived by Kit.kitPalette); these are the no-kit defaults. */ --tile1:#FBE08A; --tile2:#A9DCEC; --tile3:#BFE6C9; --tile4:#C9C2EE; --tile5:#FFCF9E; --tile6:#F6B6C0; /* Type. ONE scale for the whole product (REQ-WEX-040). Headings had been declared per page and had drifted — h2 rendered at 16, 18, 19 and clamp(19–26)px across five pages, so the same rank of subheading changed size as a child moved around. Each step is fluid so it holds from a 390px phone to a wide tablet without a breakpoint. */ --font:"Trebuchet MS","Segoe UI",system-ui,Verdana,sans-serif; --fs-title:clamp(24px,5vw,40px); /* the page's own name */ --fs-h2:clamp(19px,3.4vw,26px); /* a section / band heading */ --fs-h3:clamp(17px,2.4vw,20px); /* a card or group heading */ --fs-pagehead:clamp(20px,4vw,27px); /* the h1 inside a page-header card */ --fs-body:16px; --fs-small:13.5px; /* captions, meta, sub-lines */ /* Content-column widths. These had accreted rather than been chosen: in-app pages ran at 560 / 620 / 640 / 760 / 820px, so the page-header card — which is as wide as its column — visibly changed size between pages that are otherwise identical (Mysteries 560 next to Post Box 640). Three deliberate widths replace five accidental ones. */ --w-read:640px; /* the default: a reading / list column */ --w-wide:860px; /* galleries and cast grids that need the room */ --w-narrow:520px; /* one focused task (onboarding, a game board) */ --pad-col:18px; /* the content column's inset (was 16 on 17 pages, 18 on 9) */ /* Radii + shadows (tokenized — no component carries a literal). */ --radius-sm:12px; --radius:18px; --radius-lg:24px; --pill:999px; --shadow-card:0 8px 30px rgba(30,42,68,.12); --shadow-btn:0 4px 16px rgba(46,139,155,.34); /* The play-surface shadows (ADR-WEX-029 D1). A HARD, un-blurred offset shadow is what makes a tile read as a physical, pressable thing rather than a div — the blurred pair underneath only grounds it. --press-depth is how far a pressed element travels; it must equal the hard shadow's offset so the element visually lands flush on press. */ --shadow-lift:0 7px 0 rgba(30,42,68,.13), 0 10px 20px rgba(30,42,68,.10); --shadow-lift-sm:0 4px 0 rgba(30,42,68,.13), 0 6px 14px rgba(30,42,68,.09); --press-depth:7px; --disc:rgba(255,255,255,.92); /* the white circle behind every tile icon */ } /* Night tokens — the ONLY place dark values live. Applied when the OS prefers dark (unless the user forced light), OR when the user forces dark. The two selectors carry the same token block by necessity (CSS cannot share a declaration set across a media-nested and a top-level rule); keep them in sync. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy:#EAF0FA; --ink:#EAF0FA; --muted:#9fb2c6; --paper:#233246; --card:rgba(40,52,79,.90); --cardline:#33425c; --accent:#7FD0DD; --coral:#F2889A; --bg1:#1b2740; --bg2:#20304c; --bg3:#233650; --bg4:#1d3346; --on-accent:#10233a; --error:#ff8a80; --success:#8fe0a5; --shadow-card:0 8px 30px rgba(0,0,0,.45); --shadow-btn:0 4px 16px rgba(0,0,0,.40); /* Night tiles are DARKENED, never inverted: --ink flips light in night, so a pastel fill would drop the label under AA. Each stays a dark hue-tinted surface a light ink clears comfortably (REQ-WEX-040 AC-6). */ --tile1:#5e563d; --tile2:#405367; --tile3:#3b5751; --tile4:#365566; --tile5:#5b3e51; --tile6:#5d4b46; --shadow-lift:0 7px 0 rgba(0,0,0,.45), 0 10px 20px rgba(0,0,0,.35); --shadow-lift-sm:0 4px 0 rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.30); --disc:rgba(240,246,255,.88); } } :root[data-theme="dark"] { --navy:#EAF0FA; --ink:#EAF0FA; --muted:#9fb2c6; --paper:#233246; --card:rgba(40,52,79,.90); --cardline:#33425c; --accent:#7FD0DD; --coral:#F2889A; --bg1:#1b2740; --bg2:#20304c; --bg3:#233650; --bg4:#1d3346; --on-accent:#10233a; --error:#ff8a80; --success:#8fe0a5; --shadow-card:0 8px 30px rgba(0,0,0,.45); --shadow-btn:0 4px 16px rgba(0,0,0,.40); --tile1:#5e563d; --tile2:#405367; --tile3:#3b5751; --tile4:#365566; --tile5:#5b3e51; --tile6:#5d4b46; --shadow-lift:0 7px 0 rgba(0,0,0,.45), 0 10px 20px rgba(0,0,0,.35); --shadow-lift-sm:0 4px 0 rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.30); --disc:rgba(240,246,255,.88); } /* Base page surface — the calm sky→meadow gradient, safe-area aware. Opt-in by class (ADR-WEX-029 D5) so an immersive game page or a print sheet can stay flat simply by not carrying it. The stops match the source's weighting (0/30/60/100) rather than an even split: sky holds the top third, the meadow arrives late. */ .wex, body.wex { font-family:var(--font); color:var(--ink); margin:0; min-height:100vh; background:linear-gradient(var(--bg1) 0%, var(--bg2) 30%, var(--bg3) 60%, var(--bg4) 100%) fixed; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .wex * { box-sizing:border-box; } /* The heading ranks, scoped to the opt-in page surface. Element selectors are used deliberately here — the point is that EVERY heading on a shelled page lands on the scale without each page opting in per element, which is what let them drift in the first place. A page that does not carry `.wex` is untouched, so this stays page-by-page and revertible (ADR-WEX-029 D5). Pages may still override margins; the sizes are the shared contract. */ .wex h1 { font-size:var(--fs-title); font-weight:800; line-height:1.15; color:var(--navy); } .wex h2 { font-size:var(--fs-h2); font-weight:800; line-height:1.2; color:var(--navy); } .wex h3 { font-size:var(--fs-h3); font-weight:800; line-height:1.25; color:var(--navy); } .wex header h1 { color:inherit; font-size:var(--fs-pagehead); } /* A shelled page is a flex COLUMN (for the sticky footer), and `main { margin:0 auto }` sets auto margins on the cross axis — which disables `align-items:stretch` and makes main shrink-wrap to its content. So every page's content column, and the header card inside it, was sized by its own longest line rather than by the column: Post Box rendered 346px wide next to Mysteries at 608px purely because their ledes differ. width:100% restores the fill, and the auto margins then do what they were written for — centring within the max-width. */ .wex-shelled > main { width:100%; } /* Shared components (opt-in classes; never restyle existing ids). Every themeable value is a token — night mode swaps the tokens, not these rules. */ .wex-card { background:var(--card); border:1.5px solid var(--cardline); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:22px; } .wex-h { color:var(--navy); font-weight:800; line-height:1.1; } .wex-btn { font:inherit; font-weight:800; font-size:17px; text-decoration:none; cursor:pointer; border:0; border-radius:var(--pill); padding:14px 26px; min-height:52px; display:inline-flex; align-items:center; justify-content:center; color:var(--on-accent); background:var(--teal); box-shadow:var(--shadow-btn); } .wex-btn:active { transform:scale(.98); } .wex-btn.ghost { color:var(--navy); background:var(--card); border:1.5px solid var(--cardline); box-shadow:none; } .wex-brand { font-weight:800; color:var(--navy); letter-spacing:.2px; } .wex-muted { color:var(--muted); } /* Shared shell (shell.js): a compact sticky header bar + footer. The bar is NOT a page surface — it must never carry the .wex full-page (min-height:100vh) class. */ /* Mobile-first: the base carries generous, touch-friendly sizing (CODE-WEX-021). The hamburger + toggle are real ≥48px targets, the wordmark reads at 20px, and the bar breathes at 14px vertical padding. A min-width:768px step below scales back to the compact desktop treatment (regression-neutral on wide viewports). */ .wex-shellbar { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--card); border-bottom:1.5px solid var(--cardline); position:sticky; top:0; z-index:10; /* Shell.mount() builds this bar as a
, so every page that styles a bare `header {}` element selector — most of them do, for their own page header — was also styling the shared bar. It has been silently inheriting page radii ever since the shell rolled out; the REQ-WEX-040 header pass (flush band -> rounded floating card) turned that into a visibly detached, rounded bar. Pinning the three properties a page header sets makes the bar immune: a class beats an element selector, so no page can reach it by accident again. */ border-radius:0; margin:0; box-shadow:none; } .wex-shellbar .wex-brand { flex:1 1 auto; font-size:20px; } .wex-themetoggle { font:inherit; font-size:20px; line-height:1; background:none; border:0; cursor:pointer; min-width:48px; min-height:48px; border-radius:var(--pill); } .wex-themetoggle:active { transform:scale(.94); } /* Sticky footer: any shelled page (Shell.footer marks `into` with .wex-shelled) is a min-height flex column so the footer is pushed to the bottom of the page — pinned to the viewport bottom on short pages, below the content on long ones. */ .wex-shelled { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; } .wex-shellfoot { text-align:left; padding:18px; font-size:13px; margin-top:auto; } /* The primary-action button (ISSUE-WEX-065). `.go` is the product's de-facto primary control — Send, Make, Print, Play — and it is declared LOCALLY on 42 pages, none of which set a height. Padding alone put it at 43px: five short of the FR-8 floor, on the most important control of every maker a child uses. ONE SITE, NOT FORTY-TWO. The same reasoning as scoreKey() in ISSUE-WEX-041 and the push() helper in ISSUE-WEX-064: a value that has to be repeated per page will be missed on the forty-third. Declaring the FLOOR here and leaving the look to each page's own rule is the smallest thing that cannot drift — the cascade is per-property, so a page that sets padding, colour and radius but no min-height still inherits the floor, and a page that genuinely needs something else can still say so. Not a visual change: 43 -> 48 grows the hit area, and a button centres its own content, so the label does not move relative to the box. */ .go, button.go { min-height:48px; min-width:48px; } /* ---- Play lattices (REQ-WEX-040 FR-8 Class 2; ISSUE-WEX-065) -------------- A fixed-geometry play grid — a chess board, the pop grid, the build yard — whose cell size falls out of its column count and the width it is given. At `--pad-col` (18px) a 390px phone leaves 354px, so eight columns land at 42.5px and miss the 44px lattice floor. Nothing about the BOARD is wrong; the gutter is simply not the board's to spend. So on a narrow screen the lattice bleeds out to a 6px inset while the prose around it keeps its comfortable 18px. That is the better layout anyway: the surface a child aims at gets the width, and the text does not. 378px box -> (378 - 7x2 gap) / 8 = 45.5px per cell. Deliberately NOT `width:100vw` + centring: that ignores a notch/safe-area and overflows a scrollbar-inset viewport. A negative inline margin stays inside whatever box the page actually has. `!important` is deliberate and is the right tool exactly once here: every board declares `margin:0 auto` on its own ID (`#board`, `#yard`, `#grid`), and an id beats a class, so the un-flagged version of this rule lost silently and the boards stayed at 354px. This is an accessibility floor overriding page-local layout — the case the keyword exists for — rather than a specificity shortcut. The alternative was naming all six ids in the shared stylesheet, which couples brand.css to pages it should not know about. */ @media (max-width: 480px) { .play-lattice { margin-inline: calc(6px - var(--pad-col)) !important; } } /* Hamburger + grouped drop-down menu (shell.js + nav.js). One menu on every page that adopts the shell (ISSUE-WEX-018), themed by the same tokens. */ .wex-hamburger { font:inherit; font-size:24px; line-height:1; background:none; border:0; cursor:pointer; min-width:48px; min-height:48px; border-radius:var(--pill); color:var(--navy); } .wex-hamburger:active { transform:scale(.94); } .wex-menu { position:sticky; top:78px; z-index:9; background:var(--card); border-bottom:1.5px solid var(--cardline); padding:12px 14px 16px; box-shadow:var(--shadow-card); /* The full nav is taller than a phone viewport; cap it to the space below the sticky bar and scroll internally so every group is reachable without scrolling to the end of the page content first. (dvh keeps the fit exact on mobile where browser chrome eats vh; vh is the fallback.) */ max-height:calc(100vh - 78px); max-height:calc(100dvh - 78px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; /* Full-bleed on a phone (where it IS the screen), but a drawer anchored under the hamburger on anything wider — a full-viewport panel left the links stranded at the far edge of a desktop window with a field of empty card to their right (REQ-WEX-040 layout pass). */ width:min(340px, 100%); margin-right:auto; border-right:1.5px solid var(--cardline); border-radius:0 0 var(--radius) 0; } .wex-menu[hidden] { display:none; } .wex-menu-grp { margin:6px 0 10px; } .wex-menu-h { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin:0 0 4px; } /* Mobile-first ≥48px tap target (REQ-WEX-040 FR-8). Padding alone gave 37px — below the floor the rest of the shell already meets, and the nav is the single most-tapped surface in the product. min-height + flex centring is used rather than more padding so the target height is stated, not derived from line-height. */ .wex-menu-link { display:flex; align-items:center; min-height:48px; padding:6px 10px; color:var(--navy); text-decoration:none; font-weight:700; border-radius:10px; } /* An opt-in menu action (shell.js menuActions, e.g. home's "Switch player") is a