/* ================================================================ UNDRRTD FTNSS — Design tokens ================================================================ Ported from the production web app (`Pulse/pulse/app/static/app.css`) and the native Expo app (`dev/undrrtd-native/src/theme.ts`). This file is the single source of truth for colors, type, spacing, radius, shadow and motion in the brand. Usage: … */ @font-face { font-family: "Saira Stencil One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/SairaStencilOne-Regular.ttf") format("truetype"); } :root { /* ── Surfaces (always dark — UNDRRTD has no light mode) ────────── */ --bg: #0a0a0a; /* page background */ --bg-true: #000000; /* true black — used on edges/nav */ --panel: #111111; /* nav, sticky bars */ --card: #1a1a1a; /* primary card surface */ --card-2: #141414; /* alt card / nested */ --surface-1: #141414; --surface-2: #1c1c1c; --surface-3: #262626; /* ── Text ──────────────────────────────────────────────────────── */ --text: #ffffff; /* primary */ --muted: #b8b8b8; /* secondary body */ --muted-soft: #8a8a8a; /* tertiary, placeholders */ --muted-2: #888888; /* spec "secondary text" alias */ /* ── Borders / dividers ────────────────────────────────────────── */ --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); --line-dark: #1a1a1a; /* spec divider on near-black */ --line-mid: #2a2a2a; /* spec divider on cards */ /* ── Brand accent — electric yellow-green ──────────────────────── */ --accent: #e8ff00; --accent-dim: rgba(232, 255, 0, 0.10); --accent-border: rgba(232, 255, 0, 0.15); --accent-glow: rgba(232, 255, 0, 0.35); /* The neutral primary — used for "white pill" buttons in the nav. */ --primary: #ffffff; --on-accent: #000000; /* foreground on accent backgrounds */ /* ── Status / semantic ─────────────────────────────────────────── */ --good: #34d399; /* easy intensity, success */ --warn: #fbbf24; /* moderate intensity, warning */ --bad: #fb7185; /* hard intensity, error-soft */ --done: #22c55e; /* completion check */ --danger: #ef4444; /* destructive */ /* ── Coach identity ────────────────────────────────────────────── */ --coach-miles: #f59e0b; /* running specialist */ --coach-cadence: #60a5fa; /* cycling specialist */ --coach-apex: #f87171; /* strength specialist */ --coach-prime: #a78bfa; /* head coordinator */ /* ── Sport accents ─────────────────────────────────────────────── */ --sport-run: #fc5200; /* Strava-orange — running, the "main" sport */ --sport-bike: #3b82f6; --sport-sc: #8b5cf6; /* strength & conditioning */ --sport-swim: #06b6d4; --sport-brick: #f59e0b; /* multi-sport */ --streak: #fc5200; --kudos: #ff6b35; /* ── Type families ─────────────────────────────────────────────── */ --font-brand: "Saira Stencil One", "Stencil Std", "Arial Black", sans-serif; --font-display: "Saira Stencil One", "Stencil Std", "Arial Black", sans-serif; --font-condensed:"Barlow Condensed", "Oswald", "Impact", sans-serif; --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace; /* ── Type scale (mobile-first; works at 1280 desktop too) ──────── */ --fs-hero: 44px; /* login screen brand, big race-day numbers */ --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 20px; --fs-h4: 17px; --fs-body: 15px; --fs-body-sm: 13px; --fs-caption: 12px; --fs-eyebrow: 11px; --fs-micro: 10px; /* ── Tracking / casing helpers ─────────────────────────────────── */ --tracking-brand: 0.04em; /* logotype lock-up */ --tracking-nav: 0.05em; --tracking-eyebrow: 0.10em; /* "COACH BRIEFING" labels */ /* ── Spacing scale (4-pt grid, matches native theme.space) ─────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-2xl: 24px; --space-3xl: 32px; --space-4xl: 48px; --space-5xl: 64px; /* ── Radii ─────────────────────────────────────────────────────── */ --radius-sm: 8px; /* buttons, inputs, chips */ --radius-md: 12px; /* the spec — cards */ --radius-lg: 16px; --radius-xl: 20px; /* modals */ --radius-card: 22px; /* coach chat bubbles, hero cards */ --radius-pill: 9999px; /* ── Shadows / elevation ───────────────────────────────────────── */ --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.12); --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.40); --shadow-bar: 0 -4px 20px rgba(0, 0, 0, 0.40); --shadow-accent: 0 0 24px rgba(232, 255, 0, 0.25); /* "glow" on active accent */ --shadow-pill: 0 4px 12px rgba(255, 255, 255, 0.12); /* white pill on dark */ /* ── Motion ────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; } /* ================================================================ Semantic element styles — opt in by setting class="undrrtd" on a wrapper (or ). ================================================================ */ .undrrtd { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .undrrtd .brand, .undrrtd .wordmark { font-family: var(--font-brand); letter-spacing: var(--tracking-brand); text-transform: uppercase; color: var(--text); } .undrrtd h1, .undrrtd .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 400; color: var(--text); } .undrrtd h2, .undrrtd .h2 { font-family: var(--font-condensed); font-size: var(--fs-h2); line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 800; color: var(--text); } .undrrtd h3, .undrrtd .h3 { font-family: var(--font-condensed); font-size: var(--fs-h3); line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; color: var(--text); } .undrrtd h4, .undrrtd .h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; color: var(--text); } .undrrtd p, .undrrtd .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; color: var(--text); } .undrrtd .eyebrow { font-family: var(--font-condensed); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); } .undrrtd .stat-num { font-family: var(--font-body); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 28px; letter-spacing: -0.01em; color: var(--text); } .undrrtd .coach-voice { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.7; color: var(--text); } .undrrtd code, .undrrtd .mono { font-family: var(--font-mono); font-size: 13px; color: var(--muted); } .undrrtd small, .undrrtd .caption { font-size: var(--fs-caption); color: var(--muted); line-height: 1.45; } /* ================================================================ Core element primitives (used by preview cards + ui_kits) ================================================================ */ /* Primary CTA — solid accent pill with black bold text */ .undrrtd .btn-primary { background: var(--accent); color: var(--on-accent); font-family: var(--font-body); font-weight: 800; font-size: 15px; border: none; border-radius: var(--radius-sm); padding: 14px 22px; cursor: pointer; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .undrrtd .btn-primary:hover { opacity: 0.9; } .undrrtd .btn-primary:active { transform: scale(0.98); } /* Secondary — outline on dark */ .undrrtd .btn-secondary { background: transparent; color: var(--text); font-family: var(--font-body); font-weight: 700; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 13px 21px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .undrrtd .btn-secondary:hover { background: rgba(255,255,255,0.04); } /* Ghost — for in-card actions */ .undrrtd .btn-ghost { background: transparent; color: var(--muted); font-weight: 700; border: none; border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; transition: color var(--dur-fast); } .undrrtd .btn-ghost:hover { color: var(--text); } /* Stencil display CTA — used by Record buttons / brand moments */ .undrrtd .btn-stencil { background: var(--accent); color: var(--on-accent); font-family: var(--font-display); letter-spacing: 0.08em; font-size: 15px; border: none; border-radius: var(--radius-sm); padding: 14px 22px; text-transform: uppercase; } /* Card */ .undrrtd .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-lg); } /* Input */ .undrrtd .input { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 15px; font-family: var(--font-body); width: 100%; outline: none; transition: border-color var(--dur-fast) var(--ease-out); } .undrrtd .input::placeholder { color: var(--muted-soft); } .undrrtd .input:focus { border-color: var(--accent); } /* Pill chip */ .undrrtd .chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted); } .undrrtd .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }