/* ============================================================================ XARQ — design tokens ---------------------------------------------------------------------------- Every colour on this site resolves through a variable declared here. Nothing downstream hard-codes a hex value, which is what makes the light/dark swap a single attribute flip on rather than a parallel stylesheet. The brand ramp is sampled directly from the logo artwork (assets/images/LOGO.png): violet at the lower-left tip, through royal blue at the crossing, to cyan at the upper-right. Read in that order it is also the story the page tells — idea, build, live — so the accent travels along the ramp as the visitor scrolls. ========================================================================== */ :root { /* ------------------------------------------------ brand ramp (fixed) */ --violet: #8b5cf6; --violet-lt: #a78bfa; --magenta: #e879f9; --blue: #2563eb; --blue-lt: #3b82f6; --azure: #1a5cff; --cyan: #22d3ee; --cyan-lt: #67e8f9; --electric: #00e5ff; /* The three story accents. scroll-scenes.js retargets --accent between them as each chapter takes the viewport, so a button in the footer is a different colour than the same button in the hero — on purpose. */ --accent-ideas: var(--violet); --accent-build: var(--blue-lt); --accent-digital: var(--cyan); /* live accent — animated, never set by hand in another file */ --accent: var(--blue-lt); --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent); --accent-line: color-mix(in oklab, var(--accent) 34%, transparent); /* the signature gradient, used for text, borders and glows alike */ --grad-brand: linear-gradient(115deg, var(--violet) 0%, var(--azure) 46%, var(--cyan) 100%); --grad-brand-soft: linear-gradient( 115deg, color-mix(in oklab, var(--violet) 22%, transparent) 0%, color-mix(in oklab, var(--azure) 22%, transparent) 50%, color-mix(in oklab, var(--cyan) 22%, transparent) 100% ); /* ------------------------------------------------------- typography */ --font-display: 'Clash Display', 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* Italic only, a word or two at a time, inside headings. The contrast with the grotesk is the point — used for whole sentences it stops being an accent and starts being a second typeface competing with the first. */ --font-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; /* Fluid type. Every step is a clamp between a 360px phone and a 1600px desktop, so there is no breakpoint at which text jumps a size. */ --t-xs: clamp(0.72rem, 0.69rem + 0.12vw, 0.78rem); --t-sm: clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem); --t-base: clamp(0.95rem, 0.9rem + 0.24vw, 1.08rem); --t-lg: clamp(1.1rem, 1.02rem + 0.4vw, 1.32rem); --t-xl: clamp(1.32rem, 1.16rem + 0.72vw, 1.75rem); --t-2xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem); --t-3xl: clamp(2.2rem, 1.65rem + 2.6vw, 4rem); --t-4xl: clamp(2.8rem, 1.8rem + 4.6vw, 6rem); --t-mega: clamp(3.4rem, 1.4rem + 9vw, 11rem); --lh-tight: 0.98; --lh-snug: 1.12; --lh-body: 1.62; --ls-tight: -0.03em; --ls-wide: 0.16em; /* ------------------------------------------------------------ space */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(4rem, 2.6rem + 6vw, 8rem); --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3rem); --maxw: 1280px; --maxw-prose: 62ch; /* ----------------------------------------------------------- shape */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; /* ---------------------------------------------------------- motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 720ms; --z-bg: 0; --z-content: 10; /* The header sits ABOVE the mobile drawer, not below it. With the overlay on top, the burger it was opened from is covered the moment the drawer expands — and on a phone, where there is no Escape key, that leaves a full-screen menu with no way out. */ --z-overlay: 80; --z-nav: 90; --z-cursor: 99; } /* ============================================================ dark (default) The default canvas. Near-black rather than black so the WebGL bloom in the hero has something to sit against and the glass panels read as glass. */ :root, :root[data-theme='dark'] { color-scheme: dark; --bg: #05060b; --bg-deep: #020308; --surface: #0a0c14; --surface-2: #10131f; --elevated: #151a28; --text: #edf0f7; --text-2: #b9c0d1; --muted: #8b93a8; --faint: #5b6377; --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16); /* glass: a translucent panel plus a 1px inner highlight along the top edge */ --glass: rgba(255, 255, 255, 0.035); --glass-2: rgba(255, 255, 255, 0.06); --glass-line: rgba(255, 255, 255, 0.1); --glass-blur: 22px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.8); --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.9); --glow: 0 0 80px -20px color-mix(in oklab, var(--accent) 70%, transparent); --noise-opacity: 0.05; --aurora-opacity: 0.55; /* The sticky header's plate. High enough that a headline or a card passing underneath cannot be read through it — at 0.72 the glass looked elegant on an empty section and turned into a smear over a 4rem heading. */ --scrim: rgba(5, 6, 11, 0.92); } /* ===================================================================== light Not an inversion — a different material. The dark theme is lit from within (glow, bloom, additive particles); the light theme is lit from above (soft shadow, tinted paper, the same gradient used sparingly as ink). */ :root[data-theme='light'] { color-scheme: light; --bg: #fafafc; --bg-deep: #f2f3f8; --surface: #ffffff; --surface-2: #f5f6fb; --elevated: #ffffff; --text: #0a0b12; --text-2: #363c4d; --muted: #5b6376; --faint: #8d94a6; --line: rgba(10, 11, 18, 0.1); --line-strong: rgba(10, 11, 18, 0.18); --glass: rgba(255, 255, 255, 0.66); --glass-2: rgba(255, 255, 255, 0.82); --glass-line: rgba(255, 255, 255, 0.9); --glass-blur: 18px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 14px 34px -16px rgba(16, 24, 40, 0.22); --shadow-lg: 0 44px 90px -34px rgba(16, 24, 40, 0.3); --glow: 0 24px 70px -30px color-mix(in oklab, var(--accent) 55%, transparent); --noise-opacity: 0.035; --aurora-opacity: 0.3; --scrim: rgba(250, 250, 252, 0.92); /* The ramp is tuned down a step in light: full-strength cyan on white is unreadable as text and fluoresces as a border. */ --cyan: #0891b2; --blue-lt: #2563eb; --violet: #7c3aed; --accent-digital: #0891b2; }