/* ========================================================================== MyGymDay — Design tokens for the web · V2 EDITORIAL -------------------------------------------------------------------------- A MIRROR of the shared design system for everything that names a COLOUR or a MEASURE — and deliberately NOT a mirror for anything that encodes a visual effect V2 has abolished. Upstream source of truth: packages/tokens/src/tokens.ts (color, space, radius, layout) packages/tokens/src/typography.ts (the named type ramp) Naming follows packages/ui-web/src/cssVars.ts exactly (camelCase keys are kebab-cased, so `surfaceSunken` -> --mgd-color-surface-sunken and `xl2` -> --mgd-space-xl-2). That keeps this site and the admin panel speaking one language. RULE 1 — when a colour or a measure changes in packages/tokens, change it here in the same commit, and never introduce a hex here that does not exist upstream. RULE 2 — an effect token is mirrored only if V2 is allowed to use it. WHAT IS DELIBERATELY MISSING, AND WHY. Read this before "restoring" any of it. (Sources: IMPLEMENTATION_PLAN_WEBSITE_V2_EDITORIAL.md §4.1 and §4.4; _reference/LADDER_TEARDOWN.md §7.) --mgd-paper-* Never created. The reference is a near-black page and so is our app; a warm-paper ground would have diverged from both, and it would have turned the legal-page restyle into a rewrite. --mgd-glow V2 has no glow. Anywhere. Neon bloom on charcoal --mgd-glow-soft was the single strongest reason V1 read as "a game website" rather than as sport. --mgd-gradient-* ×7 No gradient fill. Lime is a FLAT fill under dark ink, or it is not lime. --mgd-material-* ×5 No frosted glass, no backdrop-filter, no translucent pane. --mgd-elev-1..4 Shadows: none. Cards do not lift. The header earns one 1px hairline once it has left the top of the page, and that is the only edge any chrome grows. Depth, therefore, comes from exactly three things: a hairline rule, the edge of an image, and a step in the surface ramp. The intent in one line: ONE near-black ground, warm-white type, a condensed display face doing the shouting, and electric lime appearing at most twice per viewport as a flat fill, a rule or a small mark. ========================================================================== */ :root { color-scheme: dark; /* ── Colour — brand ────────────────────────────────────────────── */ --mgd-color-primary: #B7FF3C; /* electric lime */ --mgd-color-primary-pressed: #9FE62F; --mgd-color-primary-wash: #26331A; --mgd-color-secondary: #9FE62F; /* ── Colour — ink ──────────────────────────────────────────────── */ --mgd-color-ink: #050706; /* deepest: bled bands, footer */ /* ── Colour — text ramp (warm white, never pure #FFF) ─────────── */ /* Contrast against --mgd-color-bg, measured, not estimated. The three ratios below were RE-measured in Phase 7 with the WCAG 2.x relative- luminance formula; the tertiary rung's old annotation said 5.0 : 1 and was wrong, which is why the re-measurement was worth doing. Read the tertiary line carefully before using it for words. At 4.24 : 1 it clears the 3 : 1 required of a line, a dot or a large glyph and it does NOT clear the 4.5 : 1 required of body-size text — and it gets worse, not better, one surface step up (3.86 : 1 on --mgd-color-surface, 3.28 : 1 on --mgd-color-surface-strong). Small text that used to take this value now takes --mgd-site-text-quiet, below. This token stays exactly as upstream has it, per RULE 1. */ --mgd-color-text: #F5F7F0; /* 18.3 : 1 */ --mgd-color-text-secondary: #A5AAA3; /* 8.4 : 1 */ --mgd-color-text-tertiary: #70766F; /* 4.2 : 1 — lines, dots, large glyphs */ --mgd-color-text-inverse: #080B0A; /* ink ON lime — 16.4 : 1 */ /* ── Colour — surfaces ────────────────────────────────────────── */ --mgd-color-bg: #080B0A; /* the page, everywhere */ --mgd-color-bg-alt: #0D110F; --mgd-color-surface: #131815; --mgd-color-surface-sunken: #191F1B; --mgd-color-surface-strong: #202721; /* ── Colour — lines ───────────────────────────────────────────── */ --mgd-color-border: #242A25; --mgd-color-divider: #1C221D; /* ── Colour — status (meaning, not decoration) ────────────────── */ --mgd-color-success: #62D68A; --mgd-color-success-wash: #122117; --mgd-color-warning: #E8B44F; --mgd-color-warning-wash: #241E10; --mgd-color-danger: #E66B70; --mgd-color-danger-wash: #241315; --mgd-color-info: #78AFA0; /* ── Colour — crowd occupancy ramp ────────────────────────────── */ --mgd-color-crowd-low: #62D68A; --mgd-color-crowd-moderate: #E8B44F; --mgd-color-crowd-busy: #E8934F; --mgd-color-crowd-very-busy: #E66B70; /* ── Colour — utility ─────────────────────────────────────────── */ --mgd-color-overlay: rgba(4, 6, 5, 0.72); --mgd-color-white: #FFFFFF; /* ── Spacing — the shared 4pt scale, untouched ────────────────── */ --mgd-space-none: 0px; --mgd-space-hair: 2px; --mgd-space-xs: 4px; --mgd-space-sm: 8px; --mgd-space-md: 12px; --mgd-space-lg: 16px; --mgd-space-xl: 20px; --mgd-space-xl-2: 24px; --mgd-space-xl-3: 32px; --mgd-space-xl-4: 40px; --mgd-space-xl-5: 48px; --mgd-space-xl-6: 64px; /* ── Radius — shared ramp (app UI) ────────────────────────────── */ /* The site uses only `sm` (focus rings) and `pill` (buttons) from this ramp. Editorial layouts are squarer than app UI, so the site's own radii are separate and live under --mgd-site-radius-* below. The middle rungs are kept because this file is the app's mirror, not the site's private stylesheet. */ --mgd-radius-none: 0px; --mgd-radius-sm: 10px; --mgd-radius-md: 14px; --mgd-radius-lg: 18px; --mgd-radius-xl: 24px; --mgd-radius-pill: 999px; /* ── Layout ───────────────────────────────────────────────────── */ --mgd-layout-gutter: 20px; --mgd-layout-hairline: 1px; --mgd-layout-min-touch: 44px; --mgd-layout-control-sm: 40px; --mgd-layout-control-md: 48px; --mgd-layout-control-lg: 56px; /* ── Type — the two faces ─────────────────────────────────────── */ /* V1 loaded no web font, and that was the mistake that made every size on the page speak in the same voice. The premium signal in the reference is the CONTRAST between a condensed display face and a normal-width text face — not the size of either one. Anton is the free equivalent of the licensed Druk-family face the reference uses: one very heavy condensed weight, drawn for uppercase poster setting, no italic and no weight axis. That is a feature — there is exactly one way to set a headline. Inter is the text face. Both load from Google Fonts with display=swap, and both fall back to a full system stack, so a blocked or slow CDN costs the page its voice but never its legibility. No layout may depend on Anton's width. */ --mgd-font-display: "Anton", "Archivo Narrow", "Arial Narrow", "Helvetica Neue Condensed", Impact, "Haettenschweiler", sans-serif; --mgd-font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* Upstream FONT_FAMILY is `undefined` (the platform system font). On the web the equivalent role is the text face, so --mgd-font aliases it and the app's named ramp below needs no edit. */ --mgd-font: var(--mgd-font-text); /* ── Type — the app's named ramp, transcribed 1:1 ─────────────── */ /* Used by the small UI rungs the site shares with the product: labels, captions, the sub-heading inside prose. The display rungs are NOT used on the web — the site has its own fluid ramp below. */ --mgd-type-display-xl: 800 44px/48px var(--mgd-font); --mgd-type-display: 800 34px/40px var(--mgd-font); --mgd-type-title: 800 28px/34px var(--mgd-font); --mgd-type-heading: 700 22px/28px var(--mgd-font); --mgd-type-subheading: 600 17px/24px var(--mgd-font); --mgd-type-body: 400 15px/22px var(--mgd-font); --mgd-type-label: 600 13px/18px var(--mgd-font); --mgd-type-caption: 500 12px/16px var(--mgd-font); /* ══ Web-only extensions ═══════════════════════════════════════════ Everything above is a transcription. Everything below is additive and exists ONLY on the web, because a 2560px poster headline has needs a 390px phone screen does not. Prefixed --mgd-site-* so a reader can tell an extension from a shared token at a glance. ================================================================== */ /* ── Site colour — one extension, and only one ────────────────── */ /* The site's quietest TEXT rung. Not a fifth grey for taste: the mirrored --mgd-color-text-tertiary measures 4.24 : 1 on this page's ground, and the web paints that rung at 12px uppercase (every .eyebrow, .chip, .rule label, .footer-group__title) and 13px (.t-caption, .card__foot, the footer legal line) — body-size text, where WCAG asks for 4.5 : 1. The app never faces that combination: it uses the tertiary grey on app surfaces at app sizes. So the fix is a web-only value rather than an edit to a mirrored token, which RULE 1 forbids. Measured on every ground the site actually paints small text on: --mgd-color-bg #080B0A 5.16 : 1 --mgd-color-ink #050706 5.27 : 1 --mgd-color-bg-alt #0D110F 4.96 : 1 --mgd-color-surface #131815 4.69 : 1 Lines, dots, hover borders, the 26px+ step numeral and the FAQ +/− glyph stay on --mgd-color-text-tertiary: all are non-text or large text, where 4.24 : 1 is already past the 3 : 1 bar, and keeping them one step darker is what preserves the ramp. */ --mgd-site-text-quiet: #7E847C; /* ── Site type ramp ───────────────────────────────────────────── */ /* Fluid at the top, fixed at the bottom: a headline should fill a wide screen, a paragraph should never grow past comfortable reading size. Display rungs are set UPPERCASE by their class, not in the markup, so the HTML keeps normal sentence case for copy, search and screen readers. Uppercase wants a hair of POSITIVE tracking — the negative tracking a mixed-case grotesk wants would close Anton's counters. */ --mgd-site-poster: 400 clamp(44px, 11vw, 148px) / 0.88 var(--mgd-font-display); /* The hero rung exists because .t-hero used to be a literal alias of .t-poster, which meant a page's one h1 and its six band headlines all rendered at the same 148px and nothing led. It sits between the poster and the display rung — 112px at the top, 39px at the bottom — so the ladder reads 148 / 112 / 88 / 44 on a desktop and 44 / 39 / 34 / 26 on a phone, always a visible step and never a tie. 8.6vw is the poster's 11vw scaled by the same 112/148 ratio, so the two rungs converge and cross nowhere between 320px and 2560px. */ --mgd-site-hero: 400 clamp(39px, 8.6vw, 112px) / 0.90 var(--mgd-font-display); --mgd-site-display: 400 clamp(34px, 6.4vw, 88px) / 0.92 var(--mgd-font-display); --mgd-site-title: 400 clamp(26px, 3.4vw, 44px) / 0.96 var(--mgd-font-display); --mgd-site-heading: 700 clamp(19px, 1.8vw, 24px) / 1.30 var(--mgd-font-text); --mgd-site-lead: 400 clamp(17px, 1.4vw, 20px) / 1.50 var(--mgd-font-text); --mgd-site-body: 400 16px / 1.60 var(--mgd-font-text); --mgd-site-eyebrow: 700 12px / 1 var(--mgd-font-text); --mgd-site-caption: 500 13px / 1.40 var(--mgd-font-text); /* Tracking. Positive on the uppercase display rungs, slightly negative on the one text rung big enough to want it. */ --mgd-site-track-poster: 0.005em; --mgd-site-track-display: 0.008em; --mgd-site-track-title: 0.01em; --mgd-site-track-heading: -0.01em; --mgd-site-track-eyebrow: 0.18em; /* ── Measures ─────────────────────────────────────────────────── */ /* In `ch`, not px, so a measure follows its own font size instead of drifting as the clamp() grows. This is what makes a poster wrap at two to four words a line the way the reference does. */ --mgd-site-measure-poster: 16ch; --mgd-site-measure-display: 20ch; --mgd-site-measure-title: 24ch; --mgd-site-measure-heading: 34ch; --mgd-site-measure-lead: 46ch; --mgd-site-measure-body: 62ch; --mgd-site-measure-prose: 68ch; /* the four legal documents */ /* ── Page geometry ────────────────────────────────────────────── */ --mgd-site-page-max: 1280px; --mgd-site-gutter: clamp(20px, 5vw, 64px); --mgd-site-header-h: 64px; --mgd-site-header-h-scrolled: 56px; /* Two vertical scales, because a quiet type section and a full-bleed band do not need the same air. Between them they roughly double V1's rhythm: empty space is the cheapest luxury signal there is, and V1 spent none. */ --mgd-site-section-y: clamp(80px, 11vw, 176px); --mgd-site-band-y: clamp(112px, 15vw, 240px); /* ── Site radii — squarer than app UI ─────────────────────────── */ --mgd-site-radius-card: 6px; /* hairline block, no fill, no shadow */ --mgd-site-radius-media: 8px; /* an image inside a frame */ --mgd-site-radius-device: 44px; /* the phone shell's outer corner */ --mgd-site-radius-screen: 36px; /* 44 − 8px bezel, so corners are concentric */ --mgd-site-bezel: 8px; /* Full-bleed media has NO radius at all: edge to edge, like the reference. */ /* ── Scrim ────────────────────────────────────────────────────── */ /* The one legal way to put type over an image. Three stops, not two, and the middle one is the whole point: the type in a .band--media sits in the vertical middle of the band (the .shell's own band-y padding puts it there), so that is where the scrim has to do its work — not at the bottom edge, where a two-stop ramp put its weight and no words. The arithmetic, worst case, a photograph that is pure white exactly where the headline crosses it. At the old 50%-of-the-way alpha of ~0.5 the composite ground measured L≈0.224 and warm-white type came out at 3.6 : 1 — a fail. At 0.62 it composites to L≈0.133 and the same type measures 5.3 : 1. The top stop is untouched at 0.15, so the top third of the frame still reads as a photograph rather than as a dark panel, which is the only reason the scrim is weighted at all. */ --mgd-site-scrim: linear-gradient( 180deg, rgba(8, 11, 10, 0.15) 0%, rgba(8, 11, 10, 0.62) 52%, rgba(8, 11, 10, 0.90) 100% ); /* ── Motion — three primitives, nothing else ──────────────────── */ /* reveal 24px rise + fade on entry, 60ms stagger dur-slow settle image scale(1.06) -> 1 as its band enters dur-settle shrink header 64 -> 56px + hairline after 24px dur-fast, linear Every number motion uses is a token, including the stagger step, so the media query below can still the site from one place. There is no --mgd-site-dur-ambient any more: V2 contains no looping animation at all, and that is a rule rather than a preference. Durations go to 1ms under reduced motion rather than 0ms on purpose: base.css hides a reveal block until a class arrives, and a 0s transition fires no transitionend in some engines. 1ms is imperceptible and still completes. */ --mgd-site-dur-fast: 160ms; --mgd-site-dur-base: 320ms; --mgd-site-dur-slow: 720ms; --mgd-site-dur-settle: 1200ms; --mgd-site-stagger: 60ms; --mgd-site-ease: cubic-bezier(0.22, 1, 0.36, 1); --mgd-site-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); } /* Honour the OS setting, exactly as the apps honour Reduce Motion. Zeroing the duration tokens and the stagger stills every transition on the site from one place, without disabling a single piece of functionality. Three things sit outside this block and have to be maintained by hand, so they are named rather than implied. They are named by SELECTOR and not by line, because Phase 7 found the line numbers a previous revision wrote here had already drifted: base.css html scroll-behavior back to auto base.css .js-reveal [data-reveal] the 24px offset and the stagger site.css [data-settle] settle's scale held at 1, not shortened */ @media (prefers-reduced-motion: reduce) { :root { --mgd-site-dur-fast: 1ms; --mgd-site-dur-base: 1ms; --mgd-site-dur-slow: 1ms; --mgd-site-dur-settle: 1ms; --mgd-site-stagger: 0ms; } }