/* ════════════════════════════════════════════════════════════════════ Cradl Design System — consolidated stylesheet Adopted from the claude.ai/design "Cradl Design System" (project f15f1b9c) — a dark-first revamp ("evolve, don't reinvent"). Order: color → type → spacing → radii → shadow → motion → base+motifs → back-compat aliases → shared component skin. Fonts (Archivo / Hanken Grotesk / JetBrains Mono) are linked from base.html via the Google Fonts CSS2 API (preconnect + swap). ════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── COLOR TOKENS — dark-first. Teal (#34d399) on a green-tinted ink ramp. ───────────────────────────────────────────────────────────────────── */ :root { /* ── INK — green-tinted dark neutral ramp (backgrounds → borders) ── */ --ink-1000: #070b09; /* deepest — letterbox / behind everything */ --ink-950: #0a0f0d; /* page background */ --ink-900: #0e1412; /* app shell / raised page */ --ink-850: #121a16; /* sunken wells, table stripes */ --ink-800: #161e1b; /* card surface (brand original card-bg) */ --ink-750: #1b2521; /* elevated card / card hover */ --ink-700: #232f2a; /* inputs, chips, pressed surfaces */ --ink-600: #2f3d37; /* strong dividers, control borders */ /* ── TEAL — the signature ── */ --teal-300: #6ee7b7; /* hover / highlight */ --teal-400: #4ade80; /* bright variant (shared with positive) */ --teal-500: #34d399; /* PRIMARY brand teal */ --teal-600: #25a87a; /* pressed / darker */ --teal-700: #1b7d5b; /* deep / on-light text */ /* Teal washes — tinted surfaces, borders, glows */ --teal-soft: rgba(52, 211, 153, 0.08); --teal-softer: rgba(52, 211, 153, 0.04); --teal-muted: rgba(52, 211, 153, 0.15); --teal-line: rgba(52, 211, 153, 0.22); --teal-glow: rgba(52, 211, 153, 0.30); /* ── PURE / TEXT ── */ --white: #ffffff; --text-1: #e8efec; /* primary text on dark */ --text-2: rgba(255, 255, 255, 0.70); /* secondary */ --text-3: rgba(255, 255, 255, 0.58); /* muted / captions — .58 = WCAG-AA floor on ink (was .45) */ --text-4: rgba(255, 255, 255, 0.28); /* faint / disabled */ /* ── HAIRLINES ── */ --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14); --line-faint: rgba(255, 255, 255, 0.05); /* ── SEMANTIC STATUS ── */ --positive: #4ade80; /* win / cover / over-performing */ --negative: #f87171; /* loss / fade */ --live: #ef4444; /* live game pulse (red) */ --warning: #fbbf24; /* moderate edge / caution / gold */ --info: #60a5fa; /* upcoming / neutral note (blue) */ --gold: #fbe28a; /* #1 rank / elite tier accent */ --positive-soft: rgba(74, 222, 128, 0.12); --negative-soft: rgba(248, 113, 113, 0.12); --live-soft: rgba(239, 68, 68, 0.15); --warning-soft: rgba(251, 191, 36, 0.12); --info-soft: rgba(96, 165, 250, 0.15); /* ── PODIUM (leaderboard / ranking top-3) — one gold/silver/bronze system ── Single source of truth for medal colors across every stat table (power rankings, player rankings, national leaderboards, picks leaderboard). The *-tint values are whole-row background fades — never side-stripes. */ --rank-1: var(--gold); /* gold — matches the elite-tier accent (#fbe28a) */ --rank-2: #cbd5e1; /* silver */ --rank-3: #d99a6c; /* bronze */ --rank-1-tint: rgba(251, 226, 138, 0.10); --rank-2-tint: rgba(203, 213, 225, 0.08); --rank-3-tint: rgba(217, 154, 108, 0.09); /* ── EDGE / CONFIDENCE (AI verdict strength) ── */ --edge-strong: #4ade80; --edge-moderate: #fbbf24; --edge-slight: rgba(255, 255, 255, 0.45); --edge-none: #f87171; /* ── POSITION badge accents (lacrosse roles) ── */ --pos-att: #f87171; /* Attack */ --pos-mid: #60a5fa; /* Midfield */ --pos-def: #a78bfa; /* Defense */ --pos-lsm: #c084fc; /* Long-stick mid */ --pos-ssdm: #818cf8; /* Short-stick D mid */ --pos-fo: #fbbf24; /* Faceoff */ --pos-goalie: #34d399; /* Goalie */ /* ════ SEMANTIC ALIASES — prefer these in new product code ════ */ --bg-page: var(--ink-950); --bg-app: var(--ink-900); --bg-sunken: var(--ink-850); --surface: var(--ink-800); /* default card */ --surface-raised: var(--ink-750); /* hover / elevated card */ --surface-input: var(--ink-700); --surface-accent: var(--teal-soft); /* tinted callout surface */ --border: var(--line); --border-strong: var(--line-strong); --border-accent: var(--teal-line); --text-primary: var(--text-1); --text-secondary: var(--text-2); --text-muted: var(--text-3); --text-faint: var(--text-4); --accent: var(--teal-500); --accent-hover: var(--teal-300); --accent-press: var(--teal-600); --on-accent: var(--ink-950); /* text/icon on a solid teal fill */ /* Brand-motif decorative values */ --grid-line: rgba(52, 211, 153, 0.035); --top-bar: linear-gradient(90deg, var(--teal-500), var(--teal-glow)); --glow-radial: radial-gradient(circle, rgba(52,211,153,.10) 0%, transparent 70%); --navbar-bg: linear-gradient(135deg, #0c1210 0%, #131c18 60%, #16211c 100%); } /* ───────────────────────────────────────────────────────────────────── TYPOGRAPHY TOKENS Display: Archivo · Sans: Hanken Grotesk · Mono: JetBrains Mono ───────────────────────────────────────────────────────────────────── */ :root { --font-display: "Archivo", "Hanken Grotesk", system-ui, sans-serif; --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Type scale (rem, 16px root) */ --text-2xs: 0.625rem; /* 10px — micro labels, trend badges */ --text-xs: 0.6875rem; /* 11px — meta, odds context */ --text-sm: 0.8125rem; /* 13px — secondary UI, table cells */ --text-base: 0.9375rem; /* 15px — body */ --text-md: 1.0625rem; /* 17px — emphasized body / list titles */ --text-lg: 1.25rem; /* 20px — card titles */ --text-xl: 1.5rem; /* 24px — section headers */ --text-2xl: 2rem; /* 32px — page titles */ --text-3xl: 2.75rem; /* 44px — hero / display */ --text-4xl: 3.75rem; /* 60px — marketing hero */ --text-stat: 2.25rem; /* 36px — big stat numbers */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.16em; --type-display-font: var(--font-display); --type-display-weight: var(--fw-extrabold); --type-display-tracking: var(--tracking-tighter); --type-eyebrow-font: var(--font-sans); --type-eyebrow-weight: var(--fw-bold); --type-eyebrow-tracking: var(--tracking-wider); --type-numeric-font: var(--font-mono); --type-numeric-weight: var(--fw-bold); } .cr-display { font-family: var(--font-display); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tighter); line-height: var(--leading-tight); } .cr-eyebrow { font-family: var(--font-sans); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-size: var(--text-2xs); color: var(--accent); } .cr-numeric { font-family: var(--font-mono); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } .cr-body { font-family: var(--font-sans); font-weight: var(--fw-regular); line-height: var(--leading-normal); } /* ───────────────────────────────────────────────────────────────────── SPACING TOKENS — 4px base grid ───────────────────────────────────────────────────────────────────── */ :root { --space-0: 0; --space-1: 0.125rem; /* 2 */ --space-2: 0.25rem; /* 4 — xs */ --space-3: 0.5rem; /* 8 — sm */ --space-4: 0.75rem; /* 12 — md */ --space-5: 1rem; /* 16 — lg */ --space-6: 1.5rem; /* 24 — xl */ --space-7: 2rem; /* 32 — xxl */ --space-8: 2.5rem; /* 40 */ --space-9: 3rem; /* 48 */ --space-10: 4rem; /* 64 */ --space-11: 5rem; /* 80 */ --space-12: 6rem; /* 96 */ --gap-card: var(--space-4); --gap-section: var(--space-7); --pad-card: var(--space-5); --pad-card-lg: var(--space-6); --pad-control: var(--space-3); --container: 1200px; --container-wide: 1440px; --container-prose:720px; --mobile-frame: 390px; } /* ───────────────────────────────────────────────────────────────────── RADIUS TOKENS ───────────────────────────────────────────────────────────────────── */ :root { --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 999px; --radius-card: var(--radius-lg); --radius-card-lg: var(--radius-xl); --radius-chip: var(--radius-sm); --radius-control: var(--radius-md); --radius-badge: var(--radius-xs); } /* ───────────────────────────────────────────────────────────────────── ELEVATION & EFFECT TOKENS ───────────────────────────────────────────────────────────────────── */ :root { --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.38); --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.50); --glow-teal: 0 0 24px rgba(52, 211, 153, 0.18); --glow-teal-sm: 0 0 12px rgba(52, 211, 153, 0.25); --shadow-card-glow: 0 20px 60px rgba(0,0,0,.45), 0 0 40px rgba(52,211,153,.06); --glow-positive: 0 0 6px rgba(74, 222, 128, 0.45); --glow-warning: 0 0 6px rgba(251, 191, 36, 0.35); --glow-live: 0 0 8px rgba(239, 68, 68, 0.50); --inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.04); --inset-line: inset 0 0 0 1px var(--line); --ring: 0 0 0 2px var(--ink-950), 0 0 0 4px var(--teal-500); --shadow-card: var(--shadow-sm); --shadow-card-hover: var(--shadow-lg); --shadow-pop: var(--shadow-md); --shadow-modal: var(--shadow-xl); --blur-sm: blur(8px); --blur-md: blur(16px); --blur-lg: blur(28px); } /* ───────────────────────────────────────────────────────────────────── MOTION TOKENS — quick, confident, no bounce. ───────────────────────────────────────────────────────────────────── */ :root { --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 400ms; --dur-meter: 600ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); /* (--ease-spring overshoot easing intentionally dropped — the DS mandates "no bounce"; reintroduce with intent only for a specific micro-moment.) */ --transition-base: all var(--dur-fast) var(--ease-out); --transition-hover: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); --transition-meter: width var(--dur-meter) var(--ease-out); --lift-hover: translateY(-2px); --press-scale: scale(0.97); } @keyframes cr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes cr-live-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } @keyframes cr-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes cr-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @media (prefers-reduced-motion: reduce) { :root { --transition-base: none; --transition-hover: none; --transition-meter: none; --lift-hover: none; --press-scale: none; } } /* ───────────────────────────────────────────────────────────────────── BASE LAYER — dark-first reset + brand defaults + motif utilities ───────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--bg-page); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-ligatures: none; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } ::selection { background: var(--teal-muted); color: var(--white); } /* Keyboard focus only — never on mouse click */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); } /* Numbers default to tabular alignment in tables */ table { font-variant-numeric: tabular-nums; } /* Faint teal grid texture — layer behind hero / app shells */ .cr-grid-bg { position: relative; background-color: var(--bg-page); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; } /* Soft radial teal glow — absolute-position inside a relative parent */ .cr-glow { position: absolute; width: 500px; height: 500px; background: var(--glow-radial); pointer-events: none; z-index: 0; } /* Top accent bar — 3px teal gradient at the very top of a surface */ .cr-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--top-bar); } /* Hairline divider with faded ends (brand card divider) */ .cr-divider { height: 1px; border: 0; background: linear-gradient(to right, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent); margin: var(--space-4) 0; } /* Screen-reader only */ .cr-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; } /* ═════════════════════════════════════════════════════════════════════ BACK-COMPAT ALIASES The app's templates reference the legacy token names inline. Keep them all defined, remapped onto the DS values, so nothing breaks. The only two that intentionally FLIP are --bg (light→dark) and --text (dark→ light) — that flip IS the dark-first revamp. ═════════════════════════════════════════════════════════════════════ */ :root { --navy: var(--ink-900); /* structural dark (was #111816) */ --navy-mid: var(--ink-850); --teal: var(--teal-500); --teal-light: var(--teal-soft); --teal-border: var(--teal-line); --bg: var(--bg-page); /* FLIP: #f5f4f1 → #0a0f0d */ --card-bg: var(--surface); /* #161e1b (unchanged) */ --card-text: var(--text-primary); /* #e8efec */ --text: var(--text-primary); /* FLIP: #1a1f1d → light */ --muted: #8a9e96; /* slate — passes AA on ink */ --win: var(--positive); --loss: var(--negative); --ai-purple: #a78bfa; --border-legacy: var(--line); /* legacy --border already aliased above */ } /* ═════════════════════════════════════════════════════════════════════ SHARED COMPONENT SKIN — the app-wide vocabulary, re-skinned to the DS. (Migrated out of base.html's inline