/* =============================================================================
reidexa-tokens.css
reidEXA.design — Design System Foundation
v2.0 · May 2026
USAGE
─────
Import this file once, before any page-specific stylesheet:
Or in CSS:
@import url('reidexa-tokens.css');
This file exports:
1. CSS custom properties (:root) — all design tokens
2. CSS reset + body base
3. Atmospheric background layers (body::before / ::after)
4. Section atmosphere utility classes
5. Surface & glass primitive classes
6. Tactile hover interaction
7. Layout containers
8. Navigation shell
9. Section label pattern
10. Footer shell
11. Accessibility utilities (skip link, focus ring, sr-only)
12. CTA button variants
13. Responsive rules + prefers-reduced-motion override
RULES
─────
• Reference tokens via var(--token-name) — never hardcode hex/rgba/shadow.
• Alpha overlays: hsl(var(--electric-hsl) / 0.06) — never rgba() decompose.
• Shadows: only --elev-*, --bevel-*, --glass-*. No bespoke box-shadow.
• New colors: NEVER. Palette is locked.
• New fonts: NEVER. Three families only — Geist, Inter Tight, JetBrains Mono.
• All changes must preserve WCAG 2.1 AA on every text/surface pair.
FONT LOADING (add to on every page before this stylesheet)
──────────────────────────────────────────────────────────────────
============================================================================= */
/* =============================================================================
1. METRIC FALLBACK FONTS
Prevents cumulative layout shift while Google Fonts loads.
============================================================================= */
@font-face {
font-family: 'Geist Fallback';
src: local('Arial');
size-adjust: 105%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Inter Tight Fallback';
src: local('Arial');
size-adjust: 102%;
ascent-override: 92%;
descent-override: 23%;
line-gap-override: 0%;
}
/* =============================================================================
2. DESIGN TOKENS — :root
Single source of truth for all values. Change a token here;
every consumer updates automatically.
============================================================================= */
:root {
/* ── Type families ──────────────────────────────────────────────────────── */
--display: 'Geist', 'Geist Fallback', system-ui, sans-serif; /* headlines */
--sans: 'Inter Tight', 'Inter Tight Fallback', system-ui, sans-serif; /* body + UI */
--mono: 'JetBrains Mono', monospace; /* labels, tech */
/* ── Color — HSL channel triplets (no hsl() wrapper intentionally)
Use as: hsl(var(--midnight-hsl)) for solid color
Use as: hsl(var(--midnight-hsl) / 0.18) for alpha overlays
NEVER decompose into rgba() — this is the single source of truth. ───── */
--midnight-hsl: 216 48% 11%; /* Primary brand dark */
--midnight-2-hsl: 218 32% 15%; /* Slightly lifted dark surface */
--midnight-3-hsl: 219 37% 21%; /* Elevated dark cards */
--midnight-4-hsl: 214 29% 25%; /* Dark borders / dividers */
--electric-hsl: 212 74% 52%; /* EXA accent — CTAs, emphasis, focus */
--electric-soft-hsl: 212 77% 60%; /* CTA hover ONLY */
--slate-hsl: 212 24% 31%; /* Secondary body text */
--slate-light-hsl: 210 27% 54%; /* Nav links, captions, meta labels */
--slate-dim-hsl: 212 28% 65%; /* Body text on dark backgrounds */
--cloud-hsl: 213 31% 93%; /* Light borders, dividers */
--paper-hsl: 216 33% 97%; /* Alternate light section background */
--white-hsl: 0 0% 100%; /* Primary light background */
/* ── Color — composed solids ──────────────────────────────────────────── */
--midnight: hsl(var(--midnight-hsl));
--midnight-2: hsl(var(--midnight-2-hsl));
--midnight-3: hsl(var(--midnight-3-hsl));
--midnight-4: hsl(var(--midnight-4-hsl));
--electric: hsl(var(--electric-hsl));
--electric-soft: hsl(var(--electric-soft-hsl));
--slate: hsl(var(--slate-hsl));
--slate-light: hsl(var(--slate-light-hsl));
--slate-dim: hsl(var(--slate-dim-hsl));
--cloud: hsl(var(--cloud-hsl));
--paper: hsl(var(--paper-hsl));
--white: hsl(var(--white-hsl));
/*
APPROVED CONTRAST PAIRS (measured — WCAG 2.1)
─────────────────────────────────────────────
Midnight on White 17.61:1 AAA — body text OK
Midnight on Paper 16.40:1 AAA — body text OK
Slate on White 8.54:1 AAA — body text OK
White on Midnight 17.61:1 AAA — body text OK
White on Midnight 3 13.23:1 AAA — body text OK
Slate Dim on Midnight 6.87:1 AA — body text OK
Slate Light on Midnight 4.88:1 AA — body text OK
Electric on Midnight 4.36:1 AA large/bold ONLY — never body text
Electric on White 4.04:1 AA large/bold ONLY — never body text
White on Electric 4.04:1 AA large/bold ONLY — CTA label OK (bold ≥14px)
Slate Light on White 3.61:1 AA large ONLY — captions ≥18px only
*/
/* ── Elevation — Material 3-style triple-shadow stacks
Use: box-shadow: var(--elev-2);
Compose with bevel: box-shadow: var(--elev-2), var(--bevel-dark);
Tier map: 0=flush 1=at-rest 2=interactive 3=hover/focus 4=modal ── */
--elev-0: none;
--elev-1:
0 1px 1px hsl(var(--midnight-hsl) / 0.06),
0 1px 2px hsl(var(--midnight-hsl) / 0.08),
0 0 0 1px hsl(var(--midnight-hsl) / 0.02);
--elev-2:
0 1px 2px hsl(var(--midnight-hsl) / 0.08),
0 4px 12px hsl(var(--midnight-hsl) / 0.10),
0 0 0 1px hsl(var(--midnight-hsl) / 0.03);
--elev-3:
0 2px 4px hsl(var(--midnight-hsl) / 0.08),
0 12px 28px hsl(var(--midnight-hsl) / 0.14),
0 0 0 1px hsl(var(--midnight-hsl) / 0.04);
--elev-4:
0 4px 8px hsl(var(--midnight-hsl) / 0.10),
0 24px 48px hsl(var(--midnight-hsl) / 0.18),
0 0 0 1px hsl(var(--midnight-hsl) / 0.05);
/* Dark-surface elevation — cards living over Midnight backgrounds */
--elev-dark-1:
0 1px 1px hsl(0 0% 0% / 0.18),
0 1px 2px hsl(0 0% 0% / 0.22);
--elev-dark-2:
0 1px 2px hsl(0 0% 0% / 0.22),
0 8px 20px hsl(0 0% 0% / 0.32);
--elev-dark-3:
0 2px 4px hsl(0 0% 0% / 0.24),
0 18px 40px hsl(0 0% 0% / 0.42);
/* ── Bevel — 1px translucent inner edge, composable with elevation
Light bevel on dark surfaces; dark bevel on light surfaces.
Use: box-shadow: var(--elev-2), var(--bevel-dark); ──────────────────── */
--bevel-light: inset 0 1px 0 hsl(var(--white-hsl) / 0.06);
--bevel-light-strong: inset 0 1px 0 hsl(var(--white-hsl) / 0.10);
--bevel-dark: inset 0 1px 0 hsl(var(--midnight-hsl) / 0.04);
/* ── Glass — restrained backdrop blur
Only for: nav overlay, lightboxes, translucent containers above mesh.
Always include the @supports fallback in §6. ───────────────────────── */
--glass-blur: saturate(140%) blur(14px);
--glass-tint-light: hsl(var(--white-hsl) / 0.62);
--glass-tint-dark: hsl(var(--midnight-2-hsl) / 0.62);
--glass-edge-light: hsl(var(--white-hsl) / 0.10);
--glass-edge-dark: hsl(var(--midnight-4-hsl) / 0.55);
/* ── Atmospheric mesh gradients — layered radials
Applied automatically to body::before (light theme).
Opt in per-section via .atmos-light / .atmos-dark / .atmos-paper.
Opt out at body level: ──────────────────── */
--mesh-light:
radial-gradient(1100px 720px at 12% -10%,
hsl(var(--electric-hsl) / 0.06), transparent 60%),
radial-gradient(900px 600px at 100% 0%,
hsl(var(--electric-soft-hsl) / 0.04), transparent 55%),
radial-gradient(1200px 800px at 60% 100%,
hsl(var(--cloud-hsl) / 0.55), transparent 60%),
linear-gradient(180deg,
var(--white) 0%, var(--paper) 60%, var(--white) 100%);
--mesh-dark:
radial-gradient(900px 620px at 8% 0%,
hsl(var(--electric-hsl) / 0.10), transparent 60%),
radial-gradient(1100px 760px at 100% 100%,
hsl(var(--midnight-3-hsl) / 0.85), transparent 55%),
radial-gradient(700px 500px at 50% -10%,
hsl(var(--electric-soft-hsl) / 0.05), transparent 60%),
linear-gradient(180deg,
var(--midnight) 0%, var(--midnight-2) 100%);
/* Vignette — soft inward corner fade for depth at page edges */
--vignette-light:
radial-gradient(120% 80% at 50% 0%,
transparent 40%, hsl(var(--midnight-hsl) / 0.03) 100%);
--vignette-dark:
radial-gradient(120% 80% at 50% 0%,
transparent 40%, hsl(0 0% 0% / 0.18) 100%);
/* ── Motion — every transition uses one of these, nothing custom ───────── */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 160ms; /* quick interactions, micro feedback */
--dur-base: 220ms; /* default transitions */
--dur-slow: 360ms; /* slow reveals, page-level transitions */
/* ── Radius — always from this scale, never freeform ───────────────────── */
--r-sm: 6px; /* CTAs, buttons, inputs, logo */
--r-md: 10px; /* medium composed surfaces */
--r-lg: 14px; /* larger cards and panels */
--r-xl: 20px; /* large floating surfaces */
/* Hardcoded values still in use (not tokenized by design):
3px — progress bars, small indicators, checkboxes
4px — pills, tags, badges, chips
8px — cards, metric tiles (actual site usage) */
}
/* =============================================================================
3. RESET & BASE
============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
color: var(--midnight);
background: var(--white);
line-height: 1.6;
font-size: 16px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'kern', 'ss01', 'cv11';
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* =============================================================================
4. ATMOSPHERIC FOUNDATION
body::before = mesh gradient layer (light theme by default)
body::after = SVG fractal-noise grain overlay (~3.5% opacity)
Opt out:
Dark theme:
============================================================================= */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -2;
background: var(--mesh-light);
pointer-events: none;
}
body::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.035;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
mix-blend-mode: multiply;
}
/* Dark theme variant */
body.theme-dark {
background: var(--midnight);
color: var(--white);
}
body.theme-dark::before { background: var(--mesh-dark); }
body.theme-dark::after {
opacity: 0.05;
mix-blend-mode: screen;
background-image: url("data:image/svg+xml;utf8,");
}
/* Opt-out */
body.no-atmosphere::before,
body.no-atmosphere::after { display: none; }
/* =============================================================================
5. SECTION ATMOSPHERE UTILITIES
Opt-in classes for individual elements.
Usage: or
============================================================================= */
.atmos-light,
.atmos-dark,
.atmos-paper {
position: relative;
isolation: isolate;
}
.atmos-light::before,
.atmos-dark::before,
.atmos-paper::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.atmos-light::before { background: var(--mesh-light); }
.atmos-dark::before { background: var(--mesh-dark); }
.atmos-paper::before {
background:
radial-gradient(900px 500px at 100% 0%,
hsl(var(--electric-hsl) / 0.04), transparent 60%),
radial-gradient(700px 460px at 0% 100%,
hsl(var(--cloud-hsl) / 0.70), transparent 60%),
var(--paper);
}
/* Vignette — composable with .atmos-* for edge depth */
.vignette-light,
.vignette-dark { position: relative; isolation: isolate; }
.vignette-light::after,
.vignette-dark::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.vignette-light::after { background: var(--vignette-light); }
.vignette-dark::after { background: var(--vignette-dark); }
/* =============================================================================
6. SURFACE PRIMITIVES
Compose elevation + bevel. Extend these in page stylesheets via existing
class hooks; never hardcode shadows.
============================================================================= */
/* Light surfaces */
.surface {
background: var(--white);
border-radius: var(--r-md);
box-shadow: var(--elev-2), var(--bevel-dark);
transition:
box-shadow var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.surface-elevated {
background: var(--white);
border-radius: var(--r-lg);
box-shadow: var(--elev-3), var(--bevel-dark);
}
.surface-floating {
background: var(--white);
border-radius: var(--r-lg);
box-shadow: var(--elev-4), var(--bevel-dark);
}
/* Dark surfaces */
.surface-dark {
background: var(--midnight-3);
border-radius: var(--r-md);
box-shadow: var(--elev-dark-2), var(--bevel-light);
}
.surface-dark-elevated {
background: var(--midnight-3);
border-radius: var(--r-lg);
box-shadow: var(--elev-dark-3), var(--bevel-light-strong);
}
/* Glass surfaces — nav overlay, lightboxes, translucent containers only */
.glass-light {
background: var(--glass-tint-light);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-edge-light);
box-shadow: var(--elev-2), var(--bevel-light-strong);
border-radius: var(--r-md);
}
.glass-dark {
background: var(--glass-tint-dark);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-edge-dark);
box-shadow: var(--elev-dark-2), var(--bevel-light);
border-radius: var(--r-md);
}
/* Fallback: bump opacity so contrast stays AA without backdrop-filter blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass-light { background: hsl(var(--white-hsl) / 0.92); }
.glass-dark { background: hsl(var(--midnight-2-hsl) / 0.92); }
}
/* Tactile hover lift — add .tactile to any .surface-like card */
.tactile {
transition:
box-shadow var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out),
background-color var(--dur-base) var(--ease-out);
}
.tactile:hover {
transform: translateY(-2px);
box-shadow: var(--elev-3), var(--bevel-dark);
}
.surface-dark.tactile:hover,
.surface-dark-elevated.tactile:hover {
box-shadow: var(--elev-dark-3), var(--bevel-light-strong);
}
/* =============================================================================
7. LAYOUT CONTAINERS
.container — max 1240px, standard sections
.container-narrow — max 880px, long-form prose
============================================================================= */
.container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
position: relative;
}
.container-narrow {
max-width: 880px;
margin: 0 auto;
padding: 0 40px;
position: relative;
}
/* =============================================================================
8. NAVIGATION
Glass sticky bar with backdrop-filter. Falls back to solid Midnight.
============================================================================= */
.nav {
background: hsl(var(--midnight-hsl) / 0.78);
-webkit-backdrop-filter: saturate(160%) blur(16px);
backdrop-filter: saturate(160%) blur(16px);
padding: 18px 0;
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid hsl(var(--white-hsl) / 0.06);
box-shadow:
inset 0 1px 0 hsl(var(--white-hsl) / 0.04),
0 8px 24px hsl(0 0% 0% / 0.18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav { background: var(--midnight); }
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
display: flex;
align-items: center;
gap: 12px;
}
/* SVG logomark rendered at 36px — structure defined in HTML */
.nav-mark { width: 36px; height: 36px; }
.nav-name {
color: var(--white);
font-family: var(--display);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.025em;
}
/* "EXA" portion of the wordmark — always Electric Blue */
.nav-name span { color: var(--electric); }
.nav-links { display: flex; gap: 34px; }
.nav-link {
color: var(--slate-light);
font-family: var(--sans);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.02em;
position: relative;
padding: 6px 2px;
transition: color var(--dur-fast) var(--ease-out);
}
/* Underline accent — grows from 0 to 100% on hover/active */
.nav-link::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 0;
background: var(--electric);
transition: width var(--dur-base) var(--ease-out);
}
.nav-link:hover,
.nav-link.active { color: var(--white); }
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
/* =============================================================================
9. SECTION LABEL PATTERN
Monospace category header with leading Electric accent line.
Usage: 01 · EXA Framework
============================================================================= */
.section-label {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: var(--electric);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 12px;
}
/* 24px × 1px Electric accent line */
.section-label::before {
content: '';
flex-shrink: 0;
width: 24px;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--electric) 30%,
var(--electric) 100%
);
}
/* =============================================================================
10. FOOTER
Midnight background matching nav glass treatment for symmetry.
Footer stacks vertically below 700px (primary nav hides at 900px).
============================================================================= */
.footer {
background: var(--midnight);
padding: 32px 0;
border-top: 1px solid var(--midnight-4);
position: relative;
isolation: isolate;
}
/* Faint top bevel highlight */
.footer::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
hsl(var(--white-hsl) / 0.08) 50%,
transparent 100%
);
pointer-events: none;
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px 24px;
}
.footer-url {
font-family: var(--mono);
color: var(--slate-light);
font-size: 12px;
}
.footer-links {
display: flex;
gap: 24px;
flex-wrap: wrap;
row-gap: 8px;
}
.footer-link {
color: var(--slate-dim);
font-size: 12px;
transition: color var(--dur-fast) var(--ease-out);
}
.footer-link:hover { color: var(--white); }
/* Active state — current page in footer mirrors nav active treatment */
.footer-link.active,
.footer-link[aria-current="page"] { color: var(--white); }
.footer-link[aria-current="page"] { cursor: default; }
/* =============================================================================
11. ACCESSIBILITY UTILITIES
============================================================================= */
/* Skip link — visually hidden until focused, then slides into view */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
background: var(--electric);
color: var(--white);
padding: 12px 20px;
border-radius: var(--r-sm);
font-weight: 500;
font-size: 14px;
z-index: 9999;
transition: top var(--dur-fast) var(--ease-out);
box-shadow: var(--elev-3);
}
.skip-link:focus {
top: 16px;
outline: 2px solid var(--white);
outline-offset: 2px;
}
/* Global focus ring — 2px Electric Blue, 3px offset on all interactive elements
NEVER remove without an equivalent visible replacement (WCAG 2.1 §2.4.7) */
:focus-visible {
outline: 2px solid var(--electric);
outline-offset: 3px;
border-radius: 4px;
}
.nav-logo:focus-visible { outline-offset: 6px; }
/* Screen-reader only — visually hidden but announced by assistive tech */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =============================================================================
12. CTA BUTTONS
Three variants: primary, secondary, ghost.
All use elevation + tactile press interactions.
============================================================================= */
/* Shared base */
.cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
border-radius: var(--r-sm);
position: relative;
isolation: isolate;
cursor: pointer;
border: none;
transition:
background-color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
/* Primary — Electric gradient, white label.
One per page section maximum. Pair with arrow glyph → */
.cta-primary {
background: linear-gradient(
180deg,
hsl(var(--electric-soft-hsl)) 0%,
hsl(var(--electric-hsl)) 100%
);
color: var(--white);
border: 1px solid hsl(var(--electric-hsl) / 0.95);
box-shadow:
var(--elev-2),
inset 0 1px 0 hsl(var(--white-hsl) / 0.18),
inset 0 -1px 0 hsl(var(--midnight-hsl) / 0.18);
}
.cta-primary:hover {
background: linear-gradient(
180deg,
hsl(var(--electric-soft-hsl)) 0%,
hsl(var(--electric-soft-hsl)) 100%
);
border-color: var(--electric-soft);
box-shadow:
var(--elev-3),
inset 0 1px 0 hsl(var(--white-hsl) / 0.22),
inset 0 -1px 0 hsl(var(--midnight-hsl) / 0.18);
}
.cta-primary:active {
transform: translateY(1px);
box-shadow: var(--elev-1);
}
/* Secondary — ghost with Slate border; used for supporting/outbound actions */
.cta-secondary {
background: hsl(var(--white-hsl) / 0.04);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--white);
border: 1px solid hsl(var(--white-hsl) / 0.20);
box-shadow: inset 0 1px 0 hsl(var(--white-hsl) / 0.06);
}
.cta-secondary:hover {
border-color: hsl(var(--white-hsl) / 0.45);
background: hsl(var(--white-hsl) / 0.08);
}
.cta-secondary:active { transform: translateY(1px); }
/* Ghost — inline/quiet; used for nav bookends and quiet returns */
.cta-ghost {
background: transparent;
color: var(--electric);
border: 1px solid transparent;
padding: 14px 8px;
}
.cta-ghost:hover {
color: var(--midnight);
background: hsl(var(--electric-hsl) / 0.06);
}
/* Disabled state — applies to all variants */
.cta[aria-disabled="true"],
.cta.disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* =============================================================================
13. RESPONSIVE — single breakpoint at 900px
All page-specific grid/layout rules live in per-page stylesheets.
Shared mobile overrides only here.
============================================================================= */
@media (max-width: 900px) {
/* Nav links hide; mobile menu pattern handled per-page */
.nav-links { display: none; }
/* Container side padding reduces from 40px to 24px */
.container,
.container-narrow { padding: 0 24px; }
/* Soften mesh on small screens so it doesn't compete with content */
body::before { opacity: 0.85; }
}
/* Footer stacks vertically below 700px (primary nav already hidden at 900px,
so the footer link row is the only wayfinding on small screens) */
@media (max-width: 700px) {
.footer-inner {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.footer-links {
width: 100%;
gap: 18px;
}
}
/* =============================================================================
14. MOTION — prefers-reduced-motion (REQUIRED, WCAG 2.1 §2.3)
Neutralizes all animations and transitions for users who request it.
Every animation in this codebase must be defeatable by this block.
============================================================================= */
@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;
}
.tactile:hover { transform: none; }
}
/* =============================================================================
END OF reidexa-tokens.css
This file is the shared foundation. Load it on every page before any
page-specific stylesheet. Do not override tokens here — extend in
per-page CSS using existing class hooks.
============================================================================= */