/* * Design tokens — single source of truth for all blocks and templates. * Edit ONLY via team agreement (see CLAUDE.md §4 and §12 Decisions log). * * Direction: "Material You" (ENG site, keyword `non GamStop casinos`) — * Material Design 3, seeded from a violet primary (#6750A4). Depth comes from * a TONAL SURFACE LADDER plus soft elevation shadows, never from borders and * never from hard contrast. Shape is the loudest signal in the system: every * button is a pill, every card carries a generous radius, nothing is square. * * THIS SKIN RETURNS TO A LIGHT PAGE after the French dark skin, so every * inherited value is suspect in the opposite direction to last time: * - hovers DARKEN or deepen again; the French "hovers brighten" rule was a * dark-page rule and does not survive here; * - ink on the accent is WHITE, and the accent is a legitimate ink on the * page (6.28:1) — the reverse of the acid-yellow skin, where the accent * could never be text; * - radius and shadow are back from zero, and they now carry the structure * that 2px rules carried on the French page. Borders are used sparingly * ON PURPOSE (MD3 anti-pattern: "rely on tonal backgrounds, not borders"). * * EVERY PAIR BELOW IS MEASURED (WCAG 2.1 relative luminance), not eyeballed. * Four things the measurements decided, all recorded where they apply: * * 1. TWO border tokens, as on the previous skin but for a new reason. * --sn-border (#CAC4D0, MD3 outline-variant) is 1.66:1 on the page — a * hairline divider, never the edge of a control. --sn-border-strong * (#79747E, MD3 outline) measures 4.44 / 3.96 / 3.53 against the three * surfaces, i.e. it clears WCAG 1.4.11 (3:1) on ALL of them, so it is the * only token allowed on an input, a toggle or an outlined button. * * 2. THE SUPPLIED DESIGN SYSTEM'S PRESSED STATE FAILS AA AND IS NOT * IMPLEMENTED AS WRITTEN. It specifies hover = primary at 90% and * active = primary at 80%. Over this page those resolve to #7661AD and * #8572B6, and the white button label measures 5.14:1 and 4.13:1 — the * pressed state is below the 4.5 floor. Hover is kept exactly as * specified; the pressed state DARKENS instead (a 12% black state layer, * #5B4690, white at 7.71:1). It still reads as a state layer, it reads * MORE like a press on a light page, and the design's real press * affordance is the scale-95 transform, which is untouched. * * 3. White on primary is 6.44:1. The design brief calls that "AAA level"; * it is not — AAA is 7:1. It passes AA comfortably at every size and is * used everywhere as On Primary, but nobody should plan a small-text * exception on the assumption it has AAA headroom. * * 4. The semantic callout colours are all ~6.2–6.4 on the page and ~5.6 on a * card, so they work as ink; their 10% tints resolve to near-neutrals on * which body text still reads 14.2–14.5. As on every previous market, * state is never signalled by colour alone — the icon and the heading do * that work. */ /* ---------- Font (self-hosted, latin subset) ---------- */ /* * ONE family, 37KB, and that is the whole typographic system. * * Roboto is canonical Material Design and MD3 uses it for display and body * alike, so the two-family split every previous market shipped (Archivo + * Manrope, 56KB; Space Grotesk + IBM Plex, 64KB) is not just unnecessary here, * it would be wrong — a second display face is the one thing that would stop * the page reading as Material. One variable file also means the LCP heading * and the body text below it never wait on two downloads. * * WEIGHT AXIS, read from the fvar table rather than assumed: wght 100–900. * The design system asks for 400 / 500 / 700 and all three are real. 500 is * the DEFAULT HEADING WEIGHT here, not 700 — MD3 headings are Medium, and * that single choice is most of why the page reads friendly rather than shouty. * * SUBSET: Google's "latin" (U+0000–00FF plus the standard punctuation, dash * and quote ranges, U+20AC, U+2122). It carries £ (U+00A3), the en/em dashes, * curly quotes and U+00A0 — everything an en-GB site needs. Verified against * the file, not assumed. * * WHAT IT DOES NOT CARRY, and this is not new: ✓ (U+2713), ✗, ⚠, ★ and ℹ are * absent — as they were from Archivo, Manrope and every other face this * network has shipped. Symbols are therefore drawn as INLINE SVG, never typed * as characters, so they cannot fall back to whatever the OS supplies and * arrive at a different size and weight on every platform. */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/roboto-vf.woff2') format('woff2'); } /* ---------- Tokens ---------- */ :root { /* THE TONAL SURFACE LADDER. This is the core of MD3 and it replaces the borders and shadows other skins lean on: a card is visible because it is a different TONE, not because it is outlined. Never use pure #FFFFFF as a surface — the warmth in #FFFBFE is what stops the page looking like a default browser document. bg page ground surface cards, panels, the hero container (MD3 surface-container) surface-2 recessed things: inputs, tiles, toned table rows (MD3 surface-container-low) */ --sn-bg: #FFFBFE; /* page — warm off-white, never #FFF */ --sn-surface: #F3EDF7; /* cards / panels — one step up the ladder */ --sn-surface-2: #E7E0EC; /* recessed: inputs, tiles, logo plates */ /* Tonal containers. Used for chips, badges, quiet callouts and any place that needs colour without claiming to be THE action. Their inks are the MD3 "on-" roles: 13.24 and 13.18 respectively. */ --sn-secondary-container: #E8DEF8; --sn-on-secondary-container: #1D192B; --sn-tertiary: #7D5260; /* 6.31 on page — a real ink */ --sn-tertiary-container: #FFD8E4; --sn-on-tertiary-container: #31111D; /* Rules. TWO tokens on purpose — see note 1 in the header. Width is 1px here, not the French 2px: in a system with real shadows and real tonal surfaces a 2px rule is loud, and MD3 explicitly prefers tone to line. */ --sn-border: #CAC4D0; /* hairline dividers only — 1.66 on page */ --sn-border-strong: #79747E; /* control edges — 3.53–4.44, clears 1.4.11 */ --sn-border-w: 1px; /* Text. Near-black WITH WARMTH, never #000 — MD3's on-surface. */ --sn-heading: #1C1B1F; /* 16.71 page / 14.90 card */ --sn-text: #1C1B1F; --sn-text-muted: #49454F; /* on-surface-variant: 9.11 page, 8.13 card, 7.24 on the deepest surface it lands on */ /* Brand. ONE seed colour, spent on the action, on links and on the H2 marker. Legacy token names (--sn-primary-dark, --sn-pink) are kept because 21 block stylesheets reference them; what changed is what they resolve to. --sn-primary-dark means "the ink that sits ON primary". */ --sn-primary: #6750A4; /* 6.28 on page — usable as ink AND as fill */ --sn-primary-hover: color-mix(in srgb, var(--sn-primary) 90%, var(--sn-bg)); --sn-primary-press: color-mix(in srgb, #000 12%, var(--sn-primary)); --sn-primary-dark: #FFFFFF; /* ink ON primary — 6.44 (AA, not AAA) */ --sn-btn-ink: #FFFFFF; /* button label routes through THIS, never `color` — see CLAUDE.md §12 2026-08-10 */ --sn-accent: #6750A4; /* links, markers */ --sn-pink: #7D5260; /* legacy name — now MD3 tertiary, the SECOND colour in the H2 marker and the page-summary/casino-cards accents */ /* State layers. MD3 signals interaction by overlaying a translucent layer, not by swapping colours — these are the overlays, as tints so they can sit on any surface. 8% hover / 12% pressed are the MD3 values. */ --sn-state-hover: color-mix(in srgb, var(--sn-primary) 8%, transparent); --sn-state-press: color-mix(in srgb, var(--sn-primary) 12%, transparent); /* Chrome (header/footer). The header is a LIGHT surface with a hairline under it and a backdrop blur, per the design system — not a coloured bar. So on-chrome is the same near-black as body text. */ --sn-purple: #FFFBFE; --sn-purple-2: #F3EDF7; --sn-purple-deep: #F3EDF7; /* footer ground */ --sn-on-chrome: #1C1B1F; /* 16.71 on the header, 14.90 on the footer */ /* Semantic (callouts). Dark inks for a light page — the inverse of the French skin, where these were light inks for a dark one. Measured on the page: info 6.23, tip 6.37, warning 6.34, danger 6.38. Danger is MD3's own error colour. See note 4: never signal state by colour alone. */ --sn-info: #0B57D0; --sn-tip: #146C2E; --sn-warning: #8A5000; --sn-danger: #B3261E; /* Tints for callout backgrounds — derived from the base tokens so a retint propagates (2026-07-16 decision). At 10% over the page they resolve to #E7EBF9 / #E8EDE9 / #F3EAE5 / #F7E6E8, on which --sn-text reads 14.2–14.5 and --sn-text-muted 7.8–7.9. */ --sn-info-tint: color-mix(in srgb, var(--sn-info) 10%, transparent); --sn-tip-tint: color-mix(in srgb, var(--sn-tip) 10%, transparent); --sn-warning-tint: color-mix(in srgb, var(--sn-warning) 10%, transparent); --sn-danger-tint: color-mix(in srgb, var(--sn-danger) 10%, transparent); --sn-primary-tint: color-mix(in srgb, var(--sn-primary) 10%, transparent); /* Typography — the MD3 type scale, one family. ONE DELIBERATE DEVIATION: MD3 Body Medium is 16px and that is a UI size. These pages are 2000–3000-word articles on an 820px measure, where 16px runs to ~95 characters a line. Body is 18px (--sn-fs-md) for the same reason the French skin used 18px, and --sn-fs-base keeps the true 16px for controls, chips and table cells. Everything else is the scale as supplied: label-small 12, label-medium 14, title-large 24, headline-medium 32, headline-large 48, display-large 56. */ --sn-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --sn-font-display: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --sn-fs-xs: .75rem; /* 12px — label small, captions, metadata */ --sn-fs-sm: .875rem; /* 14px — label medium, button text */ --sn-fs-base: 1rem; /* 16px — body medium, controls, table cells */ --sn-fs-md: 1.125rem; /* 18px — ARTICLE BODY (see note above) */ --sn-fs-lead: 1.25rem; /* 20px — body large, lede paragraphs */ --sn-fs-lg: 1.5rem; /* 24px — title large / h3 */ --sn-fs-xl: 2rem; /* 32px — headline medium / h2 floor */ --sn-fs-2xl: 3rem; /* 48px — headline large / h1 floor */ --sn-fs-3xl: 3.5rem; /* 56px — display large, hero ceiling */ /* Line height. MD3: 1.2–1.3 on display and headlines for impact, 1.5–1.6 on body for readability, 1.4 on compact UI. */ --sn-lh-body: 1.6; --sn-lh-heading: 1.25; --sn-lh-display: 1.15; --sn-lh-compact: 1.4; /* Tracking. MD3 is close to neutral: headings a touch tight, labels a touch open so Medium-weight 14px stays legible. */ --sn-tracking-display: -.01em; --sn-tracking-label: .01em; /* Spacing scale (multiples of 4) */ --sn-sp-1: .25rem; --sn-sp-2: .5rem; --sn-sp-3: .75rem; --sn-sp-4: 1rem; --sn-sp-6: 1.5rem; --sn-sp-8: 2rem; --sn-sp-12: 3rem; --sn-sp-16: 4rem; --sn-sp-24: 6rem; --sn-sp-32: 8rem; /* SHAPE — the single most recognisable thing about this skin. Radius is architectural here, not a finishing touch: it shapes the layout. Buttons, chips and badges are ALWAYS the pill; cards are 24px; hero and major containers are 48px, dropping to 24px on phones where 48 eats the width. Inputs are the MD3 filled field — see base.css, top corners only. */ --sn-radius-sm: 12px; /* compact elements, small cards */ --sn-radius: 24px; /* DEFAULT card radius */ --sn-radius-lg: 32px; /* nested content cards, large panels */ --sn-radius-xl: 48px; /* hero, major section containers */ --sn-radius-pill: 9999px; /* every button, chip and badge. No exceptions. */ /* ELEVATION. Soft and diffuse: large blur, minimal spread, near-black at very low opacity. MD3 prefers tone over shadow, so these are quiet — the ladder above does most of the work and the shadow only says "this responds to you". Level 3 is for FABs and the hero, nothing above it. */ --sn-shadow: 0 1px 2px rgba(28, 27, 31, .06), 0 1px 3px 1px rgba(28, 27, 31, .05); --sn-shadow-md: 0 1px 2px rgba(28, 27, 31, .06), 0 2px 6px 2px rgba(28, 27, 31, .08); --sn-shadow-lg: 0 2px 3px rgba(28, 27, 31, .06), 0 6px 14px 4px rgba(28, 27, 31, .10); --sn-glow: 0 0 0 8px var(--sn-state-hover); /* Motion. The design system's easing is MD3 "emphasized decelerate", and it is a token so 21 stylesheets cannot drift from it. Nothing over 500ms. Every consumer must answer prefers-reduced-motion. */ --sn-motion-fast: 200ms; /* colour-only transitions, small controls */ --sn-motion: 300ms; /* the default — cards, surfaces, shadows */ --sn-motion-slow: 400ms; /* large surfaces */ --sn-ease: cubic-bezier(.2, 0, 0, 1); /* Layout. */ --sn-container: 1320px; --sn-container-wide: 95vw; --sn-content: 820px; /* article measure — the image sizes in img-prompt.md are derived from this */ }