/* reppo.games BRAND CONTRACT - the single source of truth for chrome, typography and motion
across all 14 games (epic mreppo/reppo-games#65, phase 2).
The problem it solves: the games look like 14 unrelated projects. Measured 24.07.2026 - nine CSS
token naming conventions and four font strategies, so nothing was shareable even in principle.
Recognition is meant to come from TYPE, CHROME and MOTION.
===========================================================================================
SCOPE - read before editing
===========================================================================================
IN scope: typography, motion, radii, elevation, focus ring, hit targets, and the furniture
every game reinvented (buttons, modal, toast, result card).
OUT of scope, deliberately: GAME PALETTES. Sudoku is a light paper grid, Rallijs is a 3D
outdoor rally - a forced shared palette makes both worse. The `--brand-*` colours
below dress the FURNITURE only. Never point a board, field, tile, card-face or piece
of game art at them, and never change a game's own `--rl-*` / `--rw-*` / etc.
===========================================================================================
HOW THIS REACHES THE SHARED HEADER - the part that is easy to get wrong
===========================================================================================
The hosted header (a custom element with Shadow DOM) reads `--font-display`, `--font-body` and
`--font-logo`. This file defines those three names canonically, so consistent type lands
portfolio-wide with ZERO changes to the header's own source.
The selector list matters, and NOT for style reasons. Verified in Chrome against the real header:
:root { --font-body: X } -> does NOT reach the header. Its shadow stylesheet sets
the property on `:host`, i.e. directly on the host
element, and a direct declaration beats an inherited
one. Adding `!important` does not help either.
reppo-header { --font-body: X } -> DOES reach it. A document-tree rule matching the host
outranks the shadow tree's own `:host` rule.
So the contract is declared on BOTH `:root` (for the game's own DOM) and `reppo-header` (for the
shared header). Dropping the second selector silently leaves the header in its built-in fallback
font on every game - which is the exact defect this epic exists to fix. Keep both.
===========================================================================================
LATVIAN - a hard gate, enforced by a test
===========================================================================================
Every one of the 22 Latvian diacritics lives ONLY in the latin-ext subset; the plain latin subset
has zero of them. Both @font-face blocks below must ship, with these exact unicode-ranges. If you
"optimise" to latin only, strings like `Kalnu serpentins` (long i) render in fallback glyphs
MID-WORD and nothing else goes red. `scripts/font-coverage.test.mjs` asserts the shipped bytes
really contain U+0122/0123/0136/0137/013B/013C/0145/0146 - do not delete it.
No Google Fonts CDN: traffic is EU, so the font is self-hosted and there is no third-party
request. Licence OFL. */
/* ---- Space Grotesk, self-hosted, variable (wght 300-700) --------------------------------------
Ranges copied verbatim from Google's own stylesheet so the browser fetches latin-ext ONLY for
pages that actually use those codepoints - which is every page in LV mode and none in EN mode. */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
/* THE LATVIAN SUBSET. All 22 diacritics are here and nowhere else. */
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/fonts/space-grotesk-latin-ext-wght-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
/* ---- the contract ----------------------------------------------------------------------------
Theme sets appear THREE times on purpose, and the selector lists are load-bearing:
:root, [data-theme='light'], reppo-header the light set
[data-theme='dark'] the dark set
:root:not([data-theme]) + prefers-color-scheme the no-JS OS fallback
`[data-theme='light']` is not redundant. Without it a subtree forced to light inside a dark page
has nothing to re-assert and inherits the DARK values - so a game could not put a light modal on
a dark page, and the component gallery's light-vs-dark comparison silently collapsed to dark-vs-
dark whenever the theme cookie was dark. Both directions have to be declared. */
/* GROUP 1 - the font tokens, and the ONLY group the shared header's host is given. Keeping the
host out of the colour groups is deliberate: the header dresses itself from its own theme
tokens, so handing it brand colours here would make it a light-token island on a dark page, and
would silently start mattering the day the header consumes a `--brand-*` colour. */
:root,
reppo-header {
/* These three names are the ones the shared header consumes - see the note above on why
`reppo-header` has to be in the selector list. A game defines them NOWHERE else. */
--font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* The brand coin ("r.") stays Fraunces - it is a logotype, not body copy. Declared here so a
game cannot repoint it by accident; the header loads the file itself. */
--font-logo: 'Fraunces', Georgia, serif;
/* Un-namespaced deliberately: `--font-mono` is not a NEW concern, it is an existing global (the
portal's tokens.css and tanku-kauja both already define it), and splitting the four font
tokens across two naming schemes would be worse than the collision risk - any game defining it
wants the same thing, a mono stack. Everything genuinely new below is `--brand-*`. */
--font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}
/* GROUP 2 - theme-INDEPENDENT tokens. On `:root` only, deliberately: nothing re-declares them per
theme, so the `prefers-reduced-motion` override further down cannot be beaten by a themed subtree
re-asserting the normal durations. Anything whose value depends on light-vs-dark belongs in
group 3 instead. */
:root {
/* Type scale. Sizes are rem so a user's browser setting still scales the whole portfolio. */
--brand-text-xs: 0.75rem;
--brand-text-sm: 0.8125rem;
--brand-text-md: 0.9375rem;
--brand-text-lg: 1.125rem;
--brand-text-xl: 1.5rem;
--brand-text-2xl: 2rem;
--brand-text-3xl: 2.75rem;
--brand-leading-tight: 1.15;
--brand-leading-body: 1.55;
/* Space Grotesk is already fairly tight; display sizes want a touch more negative tracking. */
--brand-tracking-display: -0.02em;
--brand-tracking-body: 0;
--brand-tracking-caps: 0.08em;
--brand-weight-body: 400;
--brand-weight-medium: 500;
--brand-weight-bold: 700;
/* MOTION. Two curves and four durations - deliberately few, so 14 games cannot each invent one.
`ease-out` for anything entering or responding to a tap; `ease-in-out` for anything that moves
and settles; `ease-emphasis` overshoots slightly, for a result card landing. */
--brand-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--brand-ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
--brand-ease-emphasis: cubic-bezier(0.34, 1.32, 0.64, 1);
--brand-dur-instant: 80ms;
--brand-dur-fast: 140ms;
--brand-dur-base: 240ms;
--brand-dur-slow: 380ms;
/* RADII. */
--brand-radius-sm: 10px;
--brand-radius-md: 14px;
--brand-radius-lg: 20px;
--brand-radius-xl: 26px;
--brand-radius-pill: 999px;
/* ELEVATION is theme-dependent, so it is declared in group 3 below alongside the colours.
FOCUS RING. One ring everywhere, always visible against both themes.
`--brand-focus-color` is REPEATED in each theme block below, and must stay that way: a custom
property is substituted at computed-value time, so declaring it only here would bake in this
block's accent and a subtree forced to the other theme would inherit that literal - measured at
2.7:1 against the dark surface, under the 3:1 WCAG minimum for a non-text indicator. */
--brand-focus-width: 2px;
--brand-focus-offset: 2px;
/* HIT TARGETS. 44px is the floor for anything a thumb has to hit (WCAG 2.5.5, Apple HIG).
Half the portfolio's surfaces are small, so this is a real constraint, not a nicety. */
--brand-hit-min: 44px;
--brand-hit-min-dense: 36px;
}
/* GROUP 3 - theme-DEPENDENT tokens: the furniture colours, the elevation shadows and the focus
colour. Declared for BOTH themes (see the note at the top of this section on why
`[data-theme='light']` is not redundant), because a subtree forced to either theme has to be able
to re-assert the whole set.
CHROME COLOUR is furniture only, never game art (see SCOPE). Neutral surfaces plus one brand
accent: the violet from the logo coin, so a primary button reads as reppo.games rather than as
whatever blue the platform defaults to. A game may repoint --brand-accent if it must. */
:root,
[data-theme='light'] {
--brand-ink: #14141a;
--brand-ink-muted: rgba(24, 24, 34, 0.66);
--brand-ink-faint: rgba(24, 24, 34, 0.42);
--brand-surface: rgba(255, 255, 255, 0.72);
--brand-surface-strong: #ffffff;
--brand-surface-sunken: rgba(18, 18, 28, 0.04);
--brand-line: rgba(16, 16, 26, 0.12);
--brand-line-strong: rgba(16, 16, 26, 0.2);
--brand-accent: #5b3fd6;
--brand-accent-hover: #4c33bd;
--brand-accent-active: #402ba1;
--brand-accent-ink: #ffffff;
--brand-accent-soft: rgba(91, 63, 214, 0.12);
--brand-ok: #1f8a44;
--brand-warn: #b26a00;
--brand-danger: #cc2f26;
--brand-scrim: rgba(10, 10, 16, 0.44);
--brand-focus-color: var(--brand-accent);
/* Elevation lives here, not in group 2: the dark block overrides it, so a light subtree needs its
own copy or it would inherit the dark shadows. */
--brand-shadow-1: 0 1px 2px rgba(16, 16, 24, 0.06), 0 2px 8px rgba(16, 16, 24, 0.06);
--brand-shadow-2: 0 1px 3px rgba(16, 16, 24, 0.08), 0 8px 24px rgba(16, 16, 24, 0.1);
--brand-shadow-3: 0 2px 6px rgba(16, 16, 24, 0.12), 0 18px 50px rgba(16, 16, 24, 0.18);
}
/* Dark. Attribute selector (not `:root[data-theme]`) on purpose: it lets any SUBTREE be forced to a
theme, which is what the component gallery uses to show light and dark side by side. */
[data-theme='dark'] {
--brand-ink: #f4f4f7;
--brand-ink-muted: rgba(255, 255, 255, 0.62);
--brand-ink-faint: rgba(255, 255, 255, 0.4);
--brand-surface: rgba(255, 255, 255, 0.08);
--brand-surface-strong: #16161c;
--brand-surface-sunken: rgba(255, 255, 255, 0.05);
--brand-line: rgba(255, 255, 255, 0.14);
--brand-line-strong: rgba(255, 255, 255, 0.26);
--brand-accent: #a78bfa;
--brand-accent-hover: #b9a3fc;
--brand-accent-active: #c9b8fd;
--brand-accent-ink: #17111f;
--brand-accent-soft: rgba(167, 139, 250, 0.18);
--brand-focus-color: #a78bfa; /* see the note on --brand-focus-color above - must be re-declared */
--brand-ok: #4ade80;
--brand-warn: #fbbf24;
--brand-danger: #fb7185;
--brand-scrim: rgba(4, 4, 8, 0.62);
--brand-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.32);
--brand-shadow-2: 0 1px 3px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.45);
--brand-shadow-3: 0 2px 8px rgba(0, 0, 0, 0.5), 0 22px 56px rgba(0, 0, 0, 0.6);
}
/* No-JS dark: the theme attribute is set by script from the shared cookie, so without JS fall back
to the OS preference. Scoped to :root only, so an explicitly themed subtree still wins. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--brand-ink: #f4f4f7;
--brand-ink-muted: rgba(255, 255, 255, 0.62);
--brand-ink-faint: rgba(255, 255, 255, 0.4);
--brand-surface: rgba(255, 255, 255, 0.08);
--brand-surface-strong: #16161c;
--brand-surface-sunken: rgba(255, 255, 255, 0.05);
--brand-line: rgba(255, 255, 255, 0.14);
--brand-line-strong: rgba(255, 255, 255, 0.26);
--brand-accent: #a78bfa;
--brand-accent-hover: #b9a3fc;
--brand-accent-active: #c9b8fd;
--brand-accent-ink: #17111f;
--brand-accent-soft: rgba(167, 139, 250, 0.18);
--brand-focus-color: #a78bfa; /* see --brand-focus-color above - must be re-declared per theme */
--brand-ok: #4ade80;
--brand-warn: #fbbf24;
--brand-danger: #fb7185;
--brand-scrim: rgba(4, 4, 8, 0.62);
--brand-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.32);
--brand-shadow-2: 0 1px 3px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.45);
--brand-shadow-3: 0 2px 8px rgba(0, 0, 0, 0.5), 0 22px 56px rgba(0, 0, 0, 0.6);
}
}
/* Reduced motion, once, for the whole portfolio: collapse the durations rather than ask 14 games to
each remember a media query. Anything that reads the duration tokens becomes instant. */
@media (prefers-reduced-motion: reduce) {
:root {
--brand-dur-instant: 1ms;
--brand-dur-fast: 1ms;
--brand-dur-base: 1ms;
--brand-dur-slow: 1ms;
}
}
/* ADOPTING THIS FILE IS NOT ENOUGH ON ITS OWN. It defines tokens and ships the kit; it deliberately
does NOT restyle a game's existing markup, because a contract that silently repaints `body` on
drop-in is not safe to roll into 14 repos at once. Seven of the fourteen games hardcode a bare
system stack, so for those, phase 3 must ALSO point the game's own root/body `font-family` at
`var(--font-body)` - otherwise the header renders in Space Grotesk on a system-font page, which is
the same split-typeface defect moved somewhere new. That per-game edit is a phase-3 checklist item.
==============================================================================================
UI KIT - the furniture every game currently reinvents.
Classes are `.brand-*`, matching the custom-property prefix. Self-contained: nothing here needs
the portal's own styles.css, so a game can adopt this file alone.
============================================================================================== */
/* ---- buttons ---------------------------------------------------------------------------------
EVERY :hover RULE BELOW IS WRAPPED IN `@media (hover: hover)`. Keep it that way, and wrap any
hover state added later the same way.
Without the guard iOS Safari leaves `:hover` applied after a tap - it sticks until the user taps
something else - so a button holds its hover fill after every press. Most reppo.games play is on
phones, so an unguarded hover is a live bug on the majority platform, not a desktop nicety.
Several games had guarded their own buttons for exactly this reason (novuss `.nv-btn-primary`,
rallijs `.rl-btn`) and CONVERTING TO THE KIT SILENTLY LOST THAT GUARD, because these rules
replace theirs. Fixed centrally in #69 rather than per repo: this file is a verbatim copy in
fourteen repos and the drift check pins its hash, so a local fix is a fork.
What deliberately stays UNGUARDED, and why:
`:active` - the real press feedback on touch. It is the only one of the three that
fires on a phone, so guarding it would remove the last bit of feedback.
`:focus-visible` - keyboard affordance; the browser already withholds it for touch taps.
`:disabled` - state, not input modality.
`:active` rules are also kept AFTER their `:hover` counterpart in source order, so on a
hover-capable device a press still beats the hover fill at equal specificity. A media query adds
no specificity, so moving the guarded block below `:active` would silently invert that.
---------------------------------------------------------------------------------------------- */
.brand-btn {
/* Layout + type. `min-height` is the hit-target floor; dense variants opt down explicitly. */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: var(--brand-hit-min);
padding: 0.5rem 1.125rem;
border: 1px solid transparent;
border-radius: var(--brand-radius-pill);
font-family: var(--font-body);
font-size: var(--brand-text-md);
font-weight: var(--brand-weight-medium);
line-height: 1.2;
letter-spacing: var(--brand-tracking-body);
text-align: center;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color var(--brand-dur-fast) var(--brand-ease-out),
border-color var(--brand-dur-fast) var(--brand-ease-out),
color var(--brand-dur-fast) var(--brand-ease-out),
box-shadow var(--brand-dur-fast) var(--brand-ease-out),
transform var(--brand-dur-instant) var(--brand-ease-out);
/* Stops a double-tap zoom eating the second tap on a mobile control. */
touch-action: manipulation;
}
.brand-btn:focus-visible {
outline: var(--brand-focus-width) solid var(--brand-focus-color);
outline-offset: var(--brand-focus-offset);
}
/* Press is a 1px settle, not a scale: a scaling button on a 44px target reads as a wobble. */
.brand-btn:active:not(:disabled):not([aria-disabled='true']) {
transform: translateY(1px);
}
.brand-btn:disabled,
.brand-btn[aria-disabled='true'] {
cursor: not-allowed;
opacity: 0.45;
box-shadow: none;
transform: none;
}
.brand-btn--primary {
background: var(--brand-accent);
color: var(--brand-accent-ink);
box-shadow: var(--brand-shadow-1);
}
/* HOVER IS GUARDED, ON PURPOSE - see the note above the kit's button block. */
@media (hover: hover) {
.brand-btn--primary:hover:not(:disabled):not([aria-disabled='true']) {
background: var(--brand-accent-hover);
}
}
.brand-btn--primary:active:not(:disabled):not([aria-disabled='true']) {
background: var(--brand-accent-active);
}
.brand-btn--secondary {
background: var(--brand-surface);
color: var(--brand-ink);
border-color: var(--brand-line-strong);
box-shadow: var(--brand-shadow-1);
}
@media (hover: hover) {
.brand-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) {
background: var(--brand-surface-strong);
border-color: var(--brand-accent);
}
}
.brand-btn--secondary:active:not(:disabled):not([aria-disabled='true']) {
background: var(--brand-surface-sunken);
}
.brand-btn--ghost {
background: transparent;
color: var(--brand-ink-muted);
}
@media (hover: hover) {
.brand-btn--ghost:hover:not(:disabled):not([aria-disabled='true']) {
background: var(--brand-accent-soft);
color: var(--brand-ink);
}
}
.brand-btn--ghost:active:not(:disabled):not([aria-disabled='true']) {
background: var(--brand-surface-sunken);
}
/* DESTRUCTIVE, and deliberately an OUTLINE rather than a fill (reppo-games#82).
A filled variant would need three colours the kit does not have: --primary reads
--brand-accent PLUS -hover, -active and -ink, and danger has exactly one token. Picking
a plausible hover shade is how a contract stops being one, so the fill is left as an
open Design question and this variant is built from what already exists.
Surfaces come from the same three tokens --secondary uses, so it sits at the same
elevation in every theme; only the ink, the border and the focus ring are semantic.
--brand-danger is already consumed as `color` (.brand-field__error), `border-color` and
`outline-color` (.brand-input error state), so all three uses have precedent here. */
.brand-btn--danger {
background: var(--brand-surface);
color: var(--brand-danger);
border-color: var(--brand-danger);
box-shadow: var(--brand-shadow-1);
}
@media (hover: hover) {
.brand-btn--danger:hover:not(:disabled):not([aria-disabled='true']) {
background: var(--brand-surface-strong);
}
}
.brand-btn--danger:active:not(:disabled):not([aria-disabled='true']) {
background: var(--brand-surface-sunken);
}
/* The ring follows the button, not the global accent: a green ring on a destructive
control says the opposite of the control. Same override .brand-input's error state makes. */
.brand-btn--danger:focus-visible {
outline-color: var(--brand-danger);
}
/* Dense: for a HUD row where 44px genuinely does not fit. Opt in, never the default. */
.brand-btn--dense {
min-height: var(--brand-hit-min-dense);
padding: 0.3125rem 0.75rem;
font-size: var(--brand-text-sm);
}
/* ---- text input + field ------------------------------------------------------------------------
THE KIT'S FIRST FORM CONTROL (rallijs#50). Until multiplayer arrived no game in the portfolio
asked a player to type anything, so the kit shipped buttons, a modal, a toast and a result card
and no input at all - and the first screen that needed one (rallijs' "Race online") rendered two
raw browser inputs on a blank page. That was the kit's gap, not that game's carelessness.
It carries two DIFFERENT shapes on purpose, because the first two consumers are not alike:
- a DISPLAY NAME, which is free text and can be anything a person calls themselves. It gets the
plain `.brand-input`: no transform, no tracking, nothing that fights a name.
- a ROOM CODE, which is a short fixed alphabet the player reads off someone else's screen. That
gets `.brand-input--code`.
Keeping the base neutral is what lets one class serve both; a base that shouted in caps would
make every name field wrong.
HOVER IS GUARDED - see the long note above the button block. Same trap (#69), same reason: iOS
Safari leaves `:hover` applied after a tap, so an unguarded hover border sticks on a field the
player has finished with. `:focus-visible`, `:disabled` and the invalid state stay unguarded -
none of them is about pointer capability.
FOCUS USES `:focus-visible`, and for a text input that is not the same bet it is on a button. A
UA always indicates focus for elements that expect text entry, so `:focus-visible` matches on a
click and a tap as well as on Tab - which is what a form wants. The same selector on a button
deliberately withholds the ring for a mouse press. One selector, correct in both places.
------------------------------------------------------------------------------------------------ */
.brand-input {
display: block;
/* Full width of whatever the FIELD gives it. A bare input's default width comes from its `size`
attribute and differs per browser, so "as wide as its container" is the only predictable
default; a consumer that wants a narrow field sizes the container, not the control. */
width: 100%;
/* Declared, not assumed. The file's own header promises a game can adopt it ALONE - and without a
reset an is `content-box`, so `width: 100%` plus padding and border overflows its
container and the 44px floor becomes 62px. Every game on disk happens to ship a `*` reset, so
this costs nothing today and makes the promise true tomorrow. */
box-sizing: border-box;
min-height: var(--brand-hit-min);
padding: 0.5rem 0.875rem;
border: 1px solid var(--brand-line-strong);
border-radius: var(--brand-radius-md);
/* SOLID, not the translucent `--brand-surface`. This one class ships to fourteen games whose
backgrounds run from a paper sudoku grid to a 3D rally scene, and a glassy field would take
the colour of whatever is behind it - which is fine for chrome and bad for something you have
to read your own typing in. */
background: var(--brand-surface-strong);
color: var(--brand-ink);
font-family: var(--font-body);
/* NOT `--brand-text-md` alone, and this is a mobile bug rather than a taste call: iOS Safari
zooms the viewport when a focused input computes under 16px, and the scale it applies is not
undone when the field blurs. `--brand-text-md` is 0.9375rem = 15px at the default root, so the
token on its own would zoom every form in the portfolio on an iPhone. `max()` keeps 16px as
the floor while still honouring a user who has set a LARGER root size. */
font-size: max(1rem, var(--brand-text-md));
font-weight: var(--brand-weight-body);
line-height: 1.4;
letter-spacing: var(--brand-tracking-body);
-webkit-appearance: none;
appearance: none;
/* No `background-color` here: the read-only and disabled fills are LAYERED backgrounds, which do
not interpolate, so listing it would promise a transition that never happens. */
transition: border-color var(--brand-dur-fast) var(--brand-ease-out),
box-shadow var(--brand-dur-fast) var(--brand-ease-out);
touch-action: manipulation;
}
.brand-input::placeholder {
/* MUTED, NOT FAINT. Measured against `--brand-surface-strong`, `--brand-ink-faint` is 2.67:1
(light) and 3.82:1 (dark) - both under the 4.5:1 AA floor for text, and this file holds itself
to WCAG explicitly elsewhere. `--brand-ink-muted` measures 5.65:1 and 7.46:1 and is already the
help text's colour two rules down, so the field reads as one family. */
color: var(--brand-ink-muted);
/* Some engines dim the placeholder further on top of the colour; pin it so the two themes agree. */
opacity: 1;
}
/* HOVER IS GUARDED, ON PURPOSE - see the note above this block and above the buttons.
It also EXCLUDES the invalid state, and that exclusion is not tidiness. `:hover:not():not()` is
specificity (0,4,0) and `[aria-invalid='true']` is (0,2,0), so without it hover simply outranks
invalid - and source order cannot save it, unlike the button's hover-vs-press pair. A player who
submits a bad room code and then moves the pointer to the field that is wrong would watch the red
border turn violet under the cursor, losing the signal exactly when it is being pointed at.
`:user-invalid` is excluded through `:not(:is(...))`, not `:not(:user-invalid)`, and the wrapper
is load-bearing: `:not()` is NOT forgiving, so an engine that does not know `:user-invalid` would
throw away this whole hover rule. `:is()` is forgiving, so there the argument evaluates to
"matches nothing" and hover simply applies - which is right, because on that engine the state
does not exist. Same specificity either way. */
@media (hover: hover) {
.brand-input:hover:not(:disabled):not([readonly]):not([aria-invalid='true']):not(:is(:user-invalid)) {
border-color: var(--brand-accent);
}
}
.brand-input:focus-visible {
outline: var(--brand-focus-width) solid var(--brand-focus-color);
outline-offset: var(--brand-focus-offset);
border-color: var(--brand-accent);
}
/* INVALID IS BOUND TO `aria-invalid`, NEVER TO `:invalid`. `:invalid` matches from first paint - an
empty `required` field is invalid before the player has typed a character - so a kit built on it
would greet every form in red. `aria-invalid` is set by the consumer when it has actually decided
something is wrong, and it is the attribute assistive tech reads, so the visual and the announced
state cannot disagree. Colour is never the only signal: pair it with `.brand-field__error`. */
.brand-input[aria-invalid='true'] {
border-color: var(--brand-danger);
}
.brand-input[aria-invalid='true']:focus-visible {
outline-color: var(--brand-danger);
border-color: var(--brand-danger);
}
/* `:user-invalid` is the bridge for a consumer using NATIVE constraint validation and no JS: unlike
`:invalid` it matches only after the player has interacted, so it cannot paint an untouched field
red.
IN ITS OWN RULES, NEVER COMMA-JOINED TO THE `aria-invalid` ONES. A comma-separated selector list
is NOT forgiving - one selector the engine cannot parse invalidates the ENTIRE rule - so joining
them would make the universally-supported path contingent on support for the optional one, and an
older Safari or Android WebView would lose invalid styling altogether. (`:is()` is the forgiving
construct; a plain comma list is not. Same trap, same fix, as the `:autofill` pair below.) */
.brand-input:user-invalid {
border-color: var(--brand-danger);
}
.brand-input:user-invalid:focus-visible {
outline-color: var(--brand-danger);
border-color: var(--brand-danger);
}
/* READONLY is not disabled: still focusable, still copyable, which is what a "here is your room
code" field wants. It reads as inert rather than unavailable. */
/* The tint is LAYERED OVER the solid, never swapped for it. `--brand-surface-sunken` is a 4-5%
alpha, so assigning it alone would leave the field effectively transparent - the exact glassy
result the solid fill above exists to avoid, and worst on the background this state is FOR (a
room code shown over a 3D rally scene). Two gradient stops of the same colour is the shortest way
to composite a translucent tint onto an opaque base in one property. */
.brand-input[readonly] {
background: linear-gradient(var(--brand-surface-sunken), var(--brand-surface-sunken)),
var(--brand-surface-strong);
/* Full-strength ink, unlike disabled: read-only content is meant to be READ and copied, and it is
also what stops the two states looking identical. */
color: var(--brand-ink);
cursor: default;
}
.brand-input:disabled {
cursor: not-allowed;
opacity: 0.45;
/* Matches the button's disabled treatment, so a disabled row reads as one thing. Layered over the
solid for the same reason as read-only above. */
background: linear-gradient(var(--brand-surface-sunken), var(--brand-surface-sunken)),
var(--brand-surface-strong);
}
/* AUTOFILL. Chromium paints its own background and text colour over a filled field and ignores
`background`, so without this a name field the browser remembers renders as a pale blue box with
near-black text - unreadable in dark mode, and off-brand in both. The inset shadow is the only
way to repaint that background; `-webkit-text-fill-color` is the only way to repaint the text.
Named for the first consumer that will hit it: a remembered display name. */
.brand-input:-webkit-autofill {
-webkit-text-fill-color: var(--brand-ink);
-webkit-box-shadow: 0 0 0 100px var(--brand-surface-strong) inset;
caret-color: var(--brand-ink);
}
/* The standard pseudo-class, in its OWN rule. Never comma-joined to the -webkit- one: an engine
that knows only one of the two would drop the whole selector list and with it the fix. */
.brand-input:autofill {
-webkit-text-fill-color: var(--brand-ink);
box-shadow: 0 0 0 100px var(--brand-surface-strong) inset;
caret-color: var(--brand-ink);
}
/* A short fixed-alphabet code read off someone else's screen: a join code, a seed, a share code.
Uppercase and spaced so O/0 and I/1 are told apart at a glance, centred because the content is
shorter than the field.
NO MONOSPACE FACE. Adding one would be a fifteenth type decision for every game to ship, for a
field a few characters long; `tabular-nums` fixes the only thing that actually jitters, which is
digit width. `text-transform` is presentational only - the VALUE the consumer reads is unchanged,
so uppercase it in code too if the comparison matters. */
.brand-input--code {
text-transform: uppercase;
letter-spacing: var(--brand-tracking-caps);
text-align: center;
font-variant-numeric: tabular-nums;
}
.brand-input--code::placeholder {
/* The caps tracking pushes a placeholder off-centre otherwise. */
letter-spacing: var(--brand-tracking-caps);
}
/* The field wrapper: label, control, then help OR error - and optionally a trailing action, which
is the shape the first consumer actually needs (a room code with a Join button under it). Nothing
here is required - a bare `.brand-input` is valid - but a label always is, in markup terms. */
.brand-field {
display: flex;
flex-direction: column;
}
/* Spaced with margins rather than `gap`, so an EMPTY error node can stay rendered at zero height
and cost no space - see the note on `.brand-field__error` for why it must stay rendered.
The reset comes FIRST and is not optional: a `
` carries a UA `margin-block: 1em`, so without
it an empty error node still cost 12px and the "costs no space" claim was only half true. Both
selectors are (0,1,0), so reversing these two would wipe the spacing instead. */
.brand-field > * {
margin: 0;
}
.brand-field > * + * {
margin-top: 0.375rem;
}
.brand-field__label {
font-family: var(--font-body);
font-size: var(--brand-text-sm);
font-weight: var(--brand-weight-medium);
line-height: var(--brand-leading-tight);
color: var(--brand-ink);
}
.brand-field__help {
font-family: var(--font-body);
font-size: var(--brand-text-xs);
line-height: var(--brand-leading-body);
color: var(--brand-ink-muted);
}
.brand-field__error {
font-family: var(--font-body);
font-size: var(--brand-text-xs);
line-height: var(--brand-leading-body);
font-weight: var(--brand-weight-medium);
color: var(--brand-danger);
}
/* An error node is meant to be in the DOM BEFORE it has anything to say - a live region inserted
already-populated is commonly treated as a NEW region rather than an update, and the first message
is dropped. So the consumer renders an empty `role="status"` node and fills it later.
THIS IS WHY IT IS NOT `display: none`. Hiding it removes it from the accessibility tree, so while
empty it is not a registered live region at all - and revealing it and filling it in the same
frame recreates the exact "region appeared already populated" case above. Zeroing the margin
instead leaves an empty
rendered at zero height: it costs no space and stays announced.
(Note `:empty` is literal - `
\n
` contains a text node and does
NOT match, so write the node with no whitespace inside it.) */
.brand-field__error:empty {
margin-top: 0;
}
/* ---- modal dialog ---------------------------------------------------------------------------- */
/* Built on