/* =========================================================================== docs/assets/site.css — the one stylesheet for the whole site. WHY THIS FILE EXISTS Seven pages (home, learn, cards, rules, builder, play, my collection) are written by different hands at different times. Without a single source of colour, type and spacing they drift into seven products. Everything below is a CONTRACT: other pages code against these names, so renaming one is a breaking change. WHY THE PALETTE LOOKS LIKE THIS The dark values are lifted verbatim from docs/play/index.html, which was tuned against real card art on a dark table. The site should feel like the same product as the board, so the board's palette is the canonical one and light is the derived counterpart — not the other way round. THE PUBLIC API — the only names another page should rely on --------------------------------------------------------------------------- TOKENS (on :root) colour --bg --panel --panel-2 --line --ink --dim --accent --good --warn --bad tinted --accent-soft --accent-line --accent-ink --good-soft --warn-soft --bad-soft card --c-red --c-green --c-blue --c-purple --c-black --c-yellow — the game's six colours (CR 2-3-3). Identity, not intent: never let one stand in for --good/--warn/--bad. Applied via the matching .c-red….c-yellow class. --cb-deepen — how much black §6b's PRINTED card back folds into one of those six. 0 in light, 32% in dark; read by .card-back alone. surface --hover --focus --shadow-1 --shadow-2 radius --radius --radius-sm --radius-lg --radius-pill type --font-sans --font-mono --fs-2xs..--fs-3xl space --sp-1..--sp-8 layout --site-max --measure --card-min LAYOUT .site-nav the shared header (rendered by site.js mountNav) .site-main the page's content column; centred, capped at --site-max .skip-link keyboard escape hatch to #main, visible only on focus BLOCKS .panel a bordered surface. Padded by default; .panel.flush is not, for the .panel-head / .panel-body split. .card-grid responsive grid of card art, 360px to 2560px .card-tile one card in that grid; art keeps 63:88 and is never squashed .card-back the CSS-drawn card back — what a card-shaped box shows when there is no image, coloured via .c-red….c-yellow. Takes three child spans, __frame __ring __mark, in that order; §6b has the markup. docs/art/ is gitignored, so THIS is the normal rendering on any host that is not the one that built the site, not an error state. .stat-grid a row of .stat number tiles .notice a boxed statement; .notice.good/.warn/.bad .bar a coverage meter; .bar > .bar-fill .harbor the home page's full-bleed sea band; .harbor__inner is the ordinary content column inside it, and .seascape is the drawn horizon behind it. §11. .hand the home page's doors, as a hand of cards. One .hand-door is a .card-back with a nameplate struck into it. §11. CONTROLS .btn button or link; .btn.primary .btn.ghost .btn.sm .input input, select, textarea .chip a filter toggle; reads [aria-pressed="true"] .pill a small status label; .pill.good .pill.warn .pill.bad TEXT / UTILITY .mono .dim .empty .eyebrow .lede .meta .kbd .tag .cluster .stack .scroll-x .sr-only RULES THIS FILE OBEYS 1. Nothing hardcodes a colour. Every value is a token, so the light theme is a token swap and not a second stylesheet. 2. Both themes, always. @media (prefers-color-scheme: dark) is the default signal; :root[data-theme="dark"|"light"] overrides it and WINS, because an explicit choice beats an inferred one. Attribute selectors outrank the bare :root inside the media query on specificity, so order cannot break it. 3. No horizontal page scroll at any width. Wide things scroll inside their own box (.scroll-x, .panel-body, pre, table) — the page never does. 4. Focus is visible. A keyboard user can always see where they are. =========================================================================== */ /* --------------------------------------------------------------------------- 1. TOKENS --------------------------------------------------------------------------- */ :root { /* Tells the UA to render form controls and scrollbars for the right theme. Overridden per explicit theme further down. */ color-scheme: light dark; /* --- type --------------------------------------------------------------- The scale is in rem so a reader who raises their browser's base font size scales the WHOLE site, not just the paragraphs. 1rem = 16px by default; body text sits at --fs-md (14px), which is the density the builder and the board already use. */ --font-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* 12px, was 11px (0.6875rem). Two page audits reached this token from opposite ends of the site — the card browser's pills and tile metadata, the landing page's `.chip .n` stacking 11px mono with `--dim` and 0.75 opacity — and both stopped short of changing it because it reflows every page. It is still the right change: this token carries the "engine gap" and "banned" pills, which are CAVEATS, and a warning set in the smallest type on the page is a warning designed to be skipped. Badges and axis labels lose nothing at 12px. It now equals --fs-xs; the two are kept as separate names because they mean different things and may diverge again. */ --fs-2xs: 0.75rem; /* 12px — badges, axis labels */ --fs-xs: 0.75rem; /* 12px — captions, table meta */ --fs-sm: 0.8125rem; /* 13px — secondary body */ --fs-md: 0.875rem; /* 14px — body */ --fs-lg: 1rem; /* 16px — lede, panel titles */ --fs-xl: 1.25rem; /* 20px — h2 */ --fs-2xl: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem); /* h1 on inner pages */ --fs-3xl: clamp(1.9rem, 1.35rem + 2.4vw, 3rem); /* the home hero only */ --lh-tight: 1.18; --lh-snug: 1.35; --lh-body: 1.55; /* --- space -------------------------------------------------------------- A 4px base, doubling with two half-steps. Every margin, gap and padding in this file comes from here; nothing invents a 7px. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; /* --- shape --- */ --radius: 8px; --radius-sm: 5px; --radius-lg: 14px; --radius-pill: 999px; /* --- layout ------------------------------------------------------------- --site-max caps the column so a 2560px monitor gets a readable page rather than a 40-word line. --card-min drives .card-grid: 150px means a 300px thumbnail renders at 2x with nothing invented, and two cards still fit a 360px phone. */ --site-max: 1400px; --measure: 74ch; --card-min: 150px; --nav-h: 52px; /* --- colour: LIGHT is the base, dark is applied below -------------------- */ --bg: #f2f4f8; --panel: #ffffff; --panel-2: #e9edf5; --line: #ccd3e2; --ink: #161922; --dim: #59617a; --accent: #2158c9; --good: #17784a; --warn: #8a5b00; --bad: #c02c2c; /* The game's six colours (CR 2-3-3) — identity, not intent. A red card is not an error and a green one is not success; never substitute one of these for --good/--warn/--bad. Canonical lowercase names, per .claude/skills/optcg-design. */ --c-red: #c0393e; --c-green: #2e8455; --c-blue: #2a659f; --c-purple: #6f4590; --c-black: #414852; --c-yellow: #bf9312; /* Derived. Kept as explicit tokens rather than colour-mix() at each use so a theme is one block to read and one block to change. */ --accent-ink: #ffffff; /* text drawn ON an accent fill */ --accent-soft: rgba(33, 88, 201, 0.09); /* accent as a background wash */ --accent-line: rgba(33, 88, 201, 0.42); --good-soft: rgba(23, 120, 74, 0.10); --warn-soft: rgba(138, 91, 0, 0.11); --bad-soft: rgba(192, 44, 44, 0.09); --hover: #dfe5f1; /* control background on hover */ --focus: #1544a8; /* focus ring; darker than accent so it is still visible ON an accent fill, where accent-on-accent is not */ --shadow-1: 0 1px 2px rgba(20, 26, 40, 0.07); --shadow-2: 0 18px 40px -20px rgba(20, 26, 40, 0.30); --art-bg: #dfe4ee; /* behind a card image while it loads */ /* HOW MUCH BLACK THE PRINTED CARD BACK FOLDS INTO ITS OWN COLOUR (§6b). The six card colours are UI ink and lighten in the dark theme so they stay legible on a dark panel — correct for a badge, wrong for a card, which is a physical object whose printing does not change because the reader changed their theme. Left alone, a dark-theme back came out pastel while the light one was deep, and the pair did not look like the same card. This is the one number that reconciles them: 0 in light, and enough in dark to land the ramp back where the light theme already had it. It is a token rather than a mix inside the component so the whole correction is one value to read. */ --cb-deepen: 0%; } /* The default signal: no stored choice, so follow the operating system. */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --bg: #12141a; --panel: #1b1e27; --panel-2: #232734; --line: #333a4d; --ink: #e6e9f2; --dim: #939cb4; --accent: #6ea8fe; --good: #6bd08a; --warn: #ffb84d; --bad: #ff6b6b; --c-red: #e0656a; --c-green: #5fbc84; --c-blue: #6aa5db; --c-purple: #a67cc7; --c-black: #8b96a3; --c-yellow: #dcb845; --accent-ink: #08101f; --accent-soft: rgba(110, 168, 254, 0.14); --accent-line: rgba(110, 168, 254, 0.45); --good-soft: rgba(107, 208, 138, 0.14); --warn-soft: rgba(255, 184, 77, 0.14); --bad-soft: rgba(255, 107, 107, 0.14); --hover: #2b3142; --focus: #9dc4ff; /* LIGHTER than accent here — same reasoning, inverted, because the fill is now light-on-dark */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-2: 0 18px 44px -18px rgba(0, 0, 0, 0.8); --art-bg: #0b0d12; --cb-deepen: 32%; } } /* An explicit choice, written by site.js from localStorage 'optcg.theme'. Specificity (0,2,0) beats the (0,1,0) of :root inside the media query, so these win in both directions regardless of source order. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #12141a; --panel: #1b1e27; --panel-2: #232734; --line: #333a4d; --ink: #e6e9f2; --dim: #939cb4; --accent: #6ea8fe; --good: #6bd08a; --warn: #ffb84d; --bad: #ff6b6b; --c-red: #e0656a; --c-green: #5fbc84; --c-blue: #6aa5db; --c-purple: #a67cc7; --c-black: #8b96a3; --c-yellow: #dcb845; --accent-ink: #08101f; --accent-soft: rgba(110, 168, 254, 0.14); --accent-line: rgba(110, 168, 254, 0.45); --good-soft: rgba(107, 208, 138, 0.14); --warn-soft: rgba(255, 184, 77, 0.14); --bad-soft: rgba(255, 107, 107, 0.14); --hover: #2b3142; --focus: #9dc4ff; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-2: 0 18px 44px -18px rgba(0, 0, 0, 0.8); --art-bg: #0b0d12; --cb-deepen: 32%; } :root[data-theme="light"] { color-scheme: light; --bg: #f2f4f8; --panel: #ffffff; --panel-2: #e9edf5; --line: #ccd3e2; --ink: #161922; --dim: #59617a; --accent: #2158c9; --good: #17784a; --warn: #8a5b00; --bad: #c02c2c; --c-red: #c0393e; --c-green: #2e8455; --c-blue: #2a659f; --c-purple: #6f4590; --c-black: #414852; --c-yellow: #bf9312; --accent-ink: #ffffff; --accent-soft: rgba(33, 88, 201, 0.09); --accent-line: rgba(33, 88, 201, 0.42); --good-soft: rgba(23, 120, 74, 0.10); --warn-soft: rgba(138, 91, 0, 0.11); --bad-soft: rgba(192, 44, 44, 0.09); --hover: #dfe5f1; --focus: #1544a8; --shadow-1: 0 1px 2px rgba(20, 26, 40, 0.07); --shadow-2: 0 18px 40px -20px rgba(20, 26, 40, 0.30); --art-bg: #dfe4ee; } /* --------------------------------------------------------------------------- 2. RESET AND BASE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* [hidden] must win. Components below set display on .bar, .notice and others, which would otherwise beat the UA's [hidden] rule and leave a "hidden" element on screen — and on this site a stray empty meter reads as a measurement of zero. */ [hidden] { display: none !important; } /* overflow-x: clip, not hidden. `hidden` on the root silently breaks position: sticky for every descendant, which would kill the nav. `clip` is the backstop for a rogue wide element; the RIGHT fix is still to wrap wide content in .scroll-x, and everything below does. */ html { overflow-x: clip; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100%; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--lh-tight); font-weight: 650; letter-spacing: -0.012em; /* Long card names and clause headings must break rather than push the page sideways. */ overflow-wrap: anywhere; } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4, h5, h6 { font-size: var(--fs-md); } p, ul, ol, dl, figure, pre, table { margin: 0; } p { max-width: var(--measure); } a { color: var(--accent); text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } /* Images never exceed their box, and never carry the inline-baseline gap. */ img, svg, video { max-width: 100%; display: block; } /* Long ids, URLs and pasted decklists are the usual cause of a sideways page. */ code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; } pre { overflow-x: auto; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; } /* The nav is sticky, so a jump to #cr-8-4-1-1 would park the clause underneath it. Every anchorable thing keeps the bar's height clear. */ :target, h1[id], h2[id], h3[id], h4[id], [id].anchor { scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); } html { scroll-behavior: smooth; } /* disabled under prefers-reduced-motion */ /* Numbers that change (counts, prices, timers) must not jitter their column. */ [data-count], .stat b, .meta, .mono { font-variant-numeric: tabular-nums; } /* --- focus --------------------------------------------------------------- One visible ring for everything focusable, on both themes. --focus is deliberately NOT --accent: an accent ring on an accent-filled button is invisible, so the token is the contrasting sibling of the accent instead. The soft halo underneath keeps the ring readable against card art too. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--accent-soft); } /* Browsers that never learned :focus-visible still get a ring rather than none. */ :focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; left: var(--sp-3); top: var(--sp-3); z-index: 200; transform: translateY(-160%); padding: var(--sp-2) var(--sp-4); background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm); font-weight: 650; text-decoration: none; } .skip-link:focus { transform: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 3. SHELL — nav and main --------------------------------------------------------------------------- */ /* Styled on both the class and the id: pages ship