/* ============================================================================ GESDA DESIGN SYSTEM — TOKENS · Experiences landing page v4 v2.1 · design-system/designv2.1.md (approved 2026-09-02), §2–§8. This page's own copy, taken from Portal/assets/css/tokens.css and kept separate from it: the two pages do not share a token file. It adds the two graphics exceptions this page's figures need (after §3.2). The ONLY file in this build permitted to contain raw colour values. Every page loads this file first. No page defines its own :root block. Signal-layer tokens (§3.3) are omitted: this is a Class A page with no analytical figures. ========================================================================= */ :root { /* -- §3.1 Primitives · purple ramp (ratios against #FFFFFF) ------------ */ --purple-900: #27053D; /* 17.9:1 */ --purple-800: #420866; /* 14.4:1 — hover on 700 */ --purple-700: #530982; /* 12.1:1 — the action colour */ --purple-600: #5C0C8E; /* 11.1:1 */ --purple-300: #B570E0; /* 3.3:1 — never body text on light */ --purple-100: #DAB7EF; /* 1.8:1 — fills, muted text on dark */ --purple-050: #F7F2FD; /* 1.1:1 — tinted canvas, ink on dark */ --neutral-body: #333840; --neutral-muted: #5A5560; /* -- §3.2 Primitives · platform colours (strong on light, soft on dark) - */ --p1-violet: #440B47; --p1-violet-soft: #966993; --p2-blue: #00747D; --p2-blue-soft: #44AFCD; --p3-green: #008F7B; /* fails body-text contrast both ways */ --p3-green-soft: #98D0C5; --p3-green-deep: #006F5F; /* derived; the text-bearing green */ --p4-orange: #F39323; /* fill only on light; 7.7:1 on purple-900 */ --p4-yellow: #F9EA31; --p5-grey: #505050; --p5-grey-soft: #A2A2A2; /* -- Graphics exception, user-approved 2026-09-24 ------------------------ Violet sampled from experiences-page/gesda-graphics/radial-radar.html. Outside the §3 palette; decorative only: the radar hub's orbit rings, the sparkle round the section-3 and section-4 labels, and the line and sparkle round the formats window. */ --graphic-violet: #8A3FFC; /* -- Graphics exception, user-approved 2026-09-25 ------------------------ The five platform colours of the published GESDA Science Breakthrough Radar, taken from experiences-page/radar-canvas/gesda-radar-canvas.html. Used by the Radar canvas and the radar hub's core so the two figures match. Decorative fills only; never text. */ --radar-ahp: #2EAAD4; /* Augmenting Human Potential */ --radar-ebs: #56A78D; /* Engineering Biological Systems */ --radar-cpf: #F39A2B; /* Charting Planetary Frontiers */ --radar-esw: #D95F36; /* Exploring Social Worlds */ --radar-dmr: #975A90; /* Designing Machine Realities */ /* -- §3.4 Semantics · light theme (the tier components reference) ------ */ --color-canvas: #FFFFFF; --color-canvas-tinted: var(--purple-050); --color-canvas-pressed: var(--purple-100); --color-ink: var(--purple-900); --color-body: var(--neutral-body); --color-muted: var(--neutral-muted); --color-hairline-on-light: rgba(39, 5, 61, 0.14); --color-hairline-soft-on-light: rgba(39, 5, 61, 0.07); --color-hairline: var(--color-hairline-on-light); --color-hairline-soft: var(--color-hairline-soft-on-light); --color-disabled: #ECEDEF; /* neutral grey, not purple: a button that is not live yet */ --color-on-disabled: #646972; /* 4.7:1 on --color-disabled */ --color-action-primary: var(--purple-700); --color-action-primary-hover: var(--purple-800); --color-action-primary-active: var(--purple-900); --color-on-action: #FFFFFF; --color-focus-ring: var(--purple-700); /* Fixed values that do not invert inside a coloured band */ --color-white: #FFFFFF; --color-scrim: rgba(39, 5, 61, 0.6); /* modal backdrop */ --color-scrim-strong: rgba(39, 5, 61, 0.9); /* lightbox backdrop */ --color-photo-wash: rgba(39, 5, 61, 0.25); /* §14.2 overlay on a poster */ --color-topbar: rgba(255, 255, 255, 0.72); --color-topbar-sheen: rgba(255, 255, 255, 0.4); /* the topbar glass's top rim and gloss */ --color-hairline-on-band: rgba(247, 242, 253, 0.22); --color-hairline-on-band-soft: rgba(247, 242, 253, 0.12); --color-wash-on-band: rgba(255, 255, 255, 0.10); --color-wash-on-band-strong: rgba(255, 255, 255, 0.18); /* -- §3.6 Dark theme semantics · part 2's dark and brand bands ---------- */ --color-canvas-dark: var(--purple-900); --color-surface-dark: var(--purple-800); --color-ink-on-dark: var(--purple-050); /* 16.2:1 on purple-900 */ --color-body-on-dark: var(--purple-100); /* 10.2:1 on purple-900, 6.9:1 on purple-700 */ --color-muted-on-dark: var(--purple-300); /* 5.4:1 on purple-900; 3.7:1 on purple-700, so not text there */ --color-hairline-on-dark: rgba(247, 242, 253, 0.16); --color-focus-ring-dark: var(--purple-300); --color-on-disabled-dark: rgba(255, 255, 255, 0.6); /* -- Photographs --------------------------------------------------------- The photo tint: a §14.2 purple-ramp wash (purple-700) towards the lower right, to unify varied source photography. */ --color-photo-tint: rgba(83, 9, 130, 0.28); /* -- The formats window's card photographs (§14.2) ---------------------- Each card's photo sits under a purple-ramp wash: solid purple-900 where the text starts on the left, thinning to a purple-700 tint on the right so the photo shows. Ratios below are over a white patch of photo. The right-hand end of the text sits between veil-mid and veil: purple-100 text holds 5.3:1 on veil, purple-050 and white more. Purple-300 text needs 0.94 and so stays on the solid part (the eyebrow). Below 1024px the text spans the card, so the photo takes the strong veil: purple-300 labels hold 4.7:1 on it. */ --color-photo-veil-mid: rgba(39, 5, 61, 0.88); --color-photo-veil: rgba(39, 5, 61, 0.78); --color-photo-veil-strong: rgba(39, 5, 61, 0.94); --color-photo-glow: rgba(83, 9, 130, 0.32); --color-photo-glow-soft: rgba(83, 9, 130, 0.12); /* -- The formats window's Online card radar ----------------------------- Purple-300 and purple-050 at low alpha over the purple-900 card. Decorative only; it never sits under text. */ --color-radar-ring: rgba(181, 112, 224, 0.20); --color-radar-trail: rgba(181, 112, 224, 0.06); --color-radar-sweep: rgba(181, 112, 224, 0.42); --color-radar-beam: rgba(247, 242, 253, 0.85); --color-radar-halo: rgba(181, 112, 224, 0.55); /* -- §3.5 Status ------------------------------------------------------- */ --color-success: var(--p3-green-deep); --color-warning: #A85C08; /* darkened p4-orange; 5.0:1 with white */ --color-error: #B3122B; --color-info: var(--p2-blue); /* -- §3.7 Gradients · one per page, on the hero band ------------------- */ --gradient-signature: linear-gradient(135deg, var(--purple-700) 0%, var(--p3-green-deep) 100%); --gradient-mesh: radial-gradient(circle at 82% 12%, rgba(181, 112, 224, 0.45), transparent 42%), radial-gradient(circle at 70% 100%, rgba(0, 111, 95, 0.40), transparent 40%), linear-gradient(135deg, var(--purple-800) 0%, var(--purple-900) 100%); /* -- §4 Typography ----------------------------------------------------- */ --font-display: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: var(--font-display); --font-accent: "Space Grotesk", "DM Sans", system-ui, sans-serif; --type-display: clamp(2.5rem, 5vw, 4rem); --type-h1: clamp(2rem, 3.5vw, 2.75rem); --type-h2: clamp(1.5rem, 2.5vw, 1.875rem); --type-h3: clamp(1.25rem, 1.8vw, 1.5rem); --type-h4: 1.125rem; --type-subhead: 1.125rem; --type-lead: 1.125rem; --type-body: 1rem; --type-body-sm: 0.875rem; --type-label: 0.875rem; --type-button: 1rem; --type-eyebrow: 0.6875rem; --type-data-label: 0.875rem; --type-caption: 0.8125rem; /* -- §5 Spacing · 4px base --------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-section: var(--space-12); /* mobile; scales below */ --layout-container-max: 1200px; --layout-container-narrow: 760px; --layout-topbar: 64px; /* 76px from tablet up */ /* -- §6 Shape ---------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --radius-full: 50%; /* -- §7 Elevation · purple-tinted, never neutral black ----------------- */ --shadow-sm-on-light: 0 2px 8px rgba(39, 5, 61, 0.06); --shadow-md-on-light: 0 8px 24px rgba(39, 5, 61, 0.10); --shadow-sm: var(--shadow-sm-on-light); --shadow-md: var(--shadow-md-on-light); --shadow-lg: 0 20px 50px rgba(39, 5, 61, 0.08); /* The formats window, over the page with no scrim: deeper than {shadow.lg}, so the window visibly lifts off the page behind. */ --shadow-window: 0 40px 100px rgba(39, 5, 61, 0.3), 0 12px 32px rgba(39, 5, 61, 0.16); /* -- §8 Motion --------------------------------------------------------- */ --motion-fast: 160ms ease-out; --motion-medium: 260ms ease; --motion-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); } /* §5.2 Section rhythm · §10.7 topbar */ @media (min-width: 768px) { :root { --space-section: var(--space-16); --layout-topbar: 76px; } } @media (min-width: 1024px) { :root { --space-section: var(--space-24); } } /* §8.3 Reduced motion. Mandatory, and on its own not sufficient: nothing on this page starts hidden or offset, so every element is already in its final state without motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }