/* ========================================================================== Sail Tactician — Design Tokens colors_and_type.css Drop into any HTML page: Defines: • Brand + signal + surface color tokens • Type families (Space Grotesk / Geist / JetBrains Mono) • Type scale (display, h1-h4, body, caption, instrument readouts) • Spacing, radii, shadow, motion tokens • Semantic element styles (h1/h2/p/code/etc.) Mode: defaults to dark. Add data-theme="light" to for light surfaces. ========================================================================== */ /* --- Web fonts -------------------------------------------------------------- Brand families: Archivo (display + body, self-hosted variable font) Chivo Mono (numerics, Google Fonts CDN) NB: @import MUST precede @font-face / any other rules, or browsers ignore it. */ @import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@300;400;500;700&display=swap'); @font-face { font-family: "Archivo"; src: url("fonts/Archivo-VariableFont_wdth_wght.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62.5% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("fonts/Archivo-Italic-VariableFont_wdth_wght.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62.5% 125%; font-style: italic; font-display: swap; } /* ---- Tokens ---- */ :root { /* Brand */ --brand-tactic: #0E66A8; /* primary brand blue */ --brand-tactic-hi: #1F86D1; /* hovered */ --brand-deep: #0A2A44; /* hero deep navy */ --brand-deeper: #08080A; /* darker still */ --brand-wash: #1B4F7E; /* mid wash */ /* Surfaces (dark — default) */ --canvas: #000000; /* watch race UI background */ --surface: #0E0E10; /* iPhone dark mode bg */ --surface-2: #1C1C1F; /* dark cards */ --surface-3: #28282B; /* hover / depressed */ --hairline: rgba(255,255,255,.10); --hairline-soft: rgba(255,255,255,.06); /* Foreground (dark) */ --fg: #F4F7FA; /* primary text on dark */ --fg-2: #A9B7C5; /* secondary text on dark */ --fg-3: #6F7E8E; /* tertiary / muted */ --fg-disabled: rgba(244,247,250,.40); --fg-on-brand: #FFFFFF; /* Signal (data colors) */ --lift: #3CE0A1; /* good / on-pace / layline made */ --burn: #FFB300; /* countdown urgency / OCS pending */ --foul: #FF3B47; /* danger / OCS / capsize */ --lay: #46C5FF; /* laylines, course indicators */ /* Soft tints — for backgrounds */ --lift-soft: rgba(60,224,161,.14); --burn-soft: rgba(255,179,0,.16); --foul-soft: rgba(255,59,71,.16); --lay-soft: rgba(70,197,255,.14); /* Type families */ --font-display: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale (in rem; root = 16px) */ --t-display: 4.5rem; /* 72 — marketing hero */ --t-h1: 2.5rem; /* 40 */ --t-h2: 1.875rem; /* 30 */ --t-h3: 1.375rem; /* 22 */ --t-h4: 1.125rem; /* 18 */ --t-body: 1rem; /* 16 */ --t-small: 0.875rem; /* 14 */ --t-caption: 0.75rem; /* 12 */ --t-overline: 0.6875rem;/* 11 — uppercase tracked label */ /* Race-UI instrument readouts (numerals) */ --t-readout-xl: 5.5rem; /* 88 — hero numeral on iPhone race */ --t-readout-l: 3.5rem; /* 56 — primary watch numeral */ --t-readout-m: 2.25rem;/* 36 — secondary watch numeral */ --t-readout-s: 1.5rem; /* 24 — tertiary */ /* Tracking */ --tr-tight: -0.02em; --tr-snug: -0.01em; --tr-normal: 0; --tr-loose: 0.04em; --tr-label: 0.12em; /* ALL CAPS instrument labels */ /* Line height */ --lh-tight: 1.05; --lh-snug: 1.20; --lh-body: 1.55; --lh-loose: 1.7; /* Spacing — 4px base */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* Radius */ --r-0: 0; --r-1: 2px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-5: 20px; --r-pill: 999px; /* Borders */ --bw-1: 1px; --bw-2: 2px; /* Elevation (light surfaces) */ --elev-1-light: 0 1px 2px rgba(10,42,68,.06), 0 4px 12px rgba(10,42,68,.06); --elev-2-light: 0 1px 2px rgba(10,42,68,.08), 0 8px 24px rgba(10,42,68,.10); --elev-3-light: 0 2px 6px rgba(10,42,68,.10), 0 24px 48px rgba(10,42,68,.14); /* Elevation (dark surfaces) */ --elev-1-dark: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px rgba(0,0,0,.35); --elev-2-dark: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.45); --elev-3-dark: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 48px rgba(0,0,0,.55); /* Signal glow — used for live race numerals */ --glow-lift: 0 0 0 1px rgba(60,224,161,.30), 0 0 16px rgba(60,224,161,.35); --glow-burn: 0 0 0 1px rgba(255,179,0,.40), 0 0 18px rgba(255,179,0,.45); --glow-foul: 0 0 0 1px rgba(255,59,71,.40), 0 0 16px rgba(255,59,71,.45); --glow-lay: 0 0 0 1px rgba(70,197,255,.35), 0 0 14px rgba(70,197,255,.40); /* Motion */ --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in: cubic-bezier(.6,0,1,1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; } /* ---- Light theme overrides ---- */ [data-theme="light"] { --canvas: #FFFFFF; --surface: #F4F6F8; /* light canvas */ --surface-2: #FFFFFF; /* light card */ --surface-3: #ECEFF3; --hairline: rgba(10,42,68,.10); --hairline-soft: rgba(10,42,68,.06); --fg: #0A2A44; --fg-2: #3D586E; --fg-3: #6A8197; --fg-disabled: rgba(10,42,68,.40); } /* ============================================================================ Base / reset ============================================================================ */ html { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } body { margin: 0; font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } ::selection { background: var(--brand-tactic); color: white; } /* ============================================================================ Semantic typography ============================================================================ */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tr-tight); line-height: var(--lh-tight); margin: 0 0 var(--s-4); color: var(--fg); text-wrap: balance; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); letter-spacing: var(--tr-snug); } h3 { font-size: var(--t-h3); letter-spacing: var(--tr-snug); font-weight: 600; } h4 { font-size: var(--t-h4); font-weight: 600; letter-spacing: var(--tr-snug); } .t-display { font-family: var(--font-display); font-size: var(--t-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); } p { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0 0 var(--s-4); text-wrap: pretty; } a { color: var(--brand-tactic); text-decoration: none; transition: color var(--dur-1) var(--ease-out); } a:hover { color: var(--brand-tactic-hi); text-decoration: underline; text-underline-offset: 3px; } small, .t-small { font-size: var(--t-small); color: var(--fg-2); } .t-caption { font-size: var(--t-caption); color: var(--fg-3); line-height: var(--lh-snug); } /* Instrument label — short, tracked, uppercase, used everywhere in race UI */ .t-label { font-family: var(--font-display); font-size: var(--t-overline); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-3); line-height: 1; } /* Numeric readouts — TABULAR, MONO, NEVER substitute */ .t-readout, .t-readout-l, .t-readout-m, .t-readout-s, .t-readout-xl { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; font-variant-numeric: tabular-nums slashed-zero; font-weight: 700; line-height: 1; letter-spacing: var(--tr-tight); color: var(--fg); } .t-readout-xl { font-size: var(--t-readout-xl); } .t-readout-l { font-size: var(--t-readout-l); } .t-readout-m { font-size: var(--t-readout-m); } .t-readout-s { font-size: var(--t-readout-s); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-3); padding: 0.1em 0.35em; border-radius: var(--r-2); color: var(--fg); } hr { border: none; border-top: 1px solid var(--hairline); margin: var(--s-6) 0; } /* ============================================================================ Reusable structural classes (used by preview cards & ui kits) ============================================================================ */ .card { background: var(--surface-2); border-radius: var(--r-4); padding: var(--s-5); box-shadow: var(--elev-2-dark); } [data-theme="light"] .card { border: 1px solid var(--hairline); box-shadow: var(--elev-2-light); } .btn { font-family: var(--font-body); font-size: var(--t-body); font-weight: 600; letter-spacing: var(--tr-snug); border: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .btn:active { transform: scale(.98); } .btn-primary { background: var(--brand-tactic); color: var(--fg-on-brand); } .btn-primary:hover { background: var(--brand-tactic-hi); } .btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--hairline); } .btn-secondary:hover { background: rgba(70,197,255,.08); border-color: var(--lay); } .btn-ghost { background: transparent; color: var(--fg-2); padding: var(--s-2) var(--s-3); } .btn-ghost:hover { color: var(--fg); } .btn-destructive { background: transparent; color: var(--foul); } /* Compact pill button used in race UI */ .btn-compact { padding: 6px 12px; font-size: var(--t-small); border-radius: var(--r-pill); } /* ============================================================================ Race-UI helpers ============================================================================ */ .signal-lift { color: var(--lift); } .signal-burn { color: var(--burn); } .signal-foul { color: var(--foul); } .signal-lay { color: var(--lay); } .bg-canvas { background: var(--canvas); } .bg-surface { background: var(--surface); } .bg-surface-2 { background: var(--surface-2); } .bg-brand { background: var(--brand-tactic); } .bg-brand-deep{ background: var(--brand-deep); } /* Ocean texture — uses the brand voronoi/cellular feel via SVG noise. For real hero use, layer the ocean photo or the logo bg PNG on top. */ .bg-brand-textured { background: radial-gradient(120% 80% at 50% 0%, var(--brand-tactic) 0%, var(--brand-deep) 60%, var(--brand-deeper) 100%); position: relative; isolation: isolate; } .bg-brand-textured::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 12%, transparent 13%), radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 0 10%, transparent 11%), radial-gradient(circle at 80% 20%, rgba(255,255,255,.04) 0 8%, transparent 9%), radial-gradient(circle at 30% 80%, rgba(255,255,255,.05) 0 11%, transparent 12%); mix-blend-mode: screen; pointer-events: none; z-index: -1; }