/* Diego design system — Men-Audience (WHOOP-inspired). Dark only. This is the landing page's live tokens.css (www.diego.app) — the same tokens as design-system/men-audience/tokens.css and men-audience/tokens.css, copied here the same way those copy design-system/men-audience/tokens.css. This copy's font @import was replaced with a in index.html's : an @import inside a stylesheet is a render-blocking fetch the browser can't discover until tokens.css itself has downloaded — a full extra round-trip on the slow mobile connections most ad traffic arrives on. Keep this in sync with design-system/men-audience/tokens.css when re-copying — only drop the @import again here, not there. */ @font-face { font-family: "Hubot Sans Condensed"; src: url("./fonts/HubotSansCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --font-metric: "Hubot Sans Condensed", "Arial Narrow", sans-serif; --text-display: 700 72px/1 var(--font-sans); --text-h1: 700 40px/1.05 var(--font-sans); --text-h2: 700 22px/1.2 var(--font-sans); --text-body: 400 16px/26px var(--font-sans); --text-small: 500 13px/18px var(--font-sans); --text-label: 700 11px/16px var(--font-sans); --text-numeral: 700 56px/1 var(--font-metric); --tracking-headline: 0.09em; /* WHOOP-style: bold, uppercase, ~8-10% tracking */ --tracking-label: 0.1em; /* rhythm — unchanged from the core system so components sit on either grid */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-sm: 2px; --radius-card: 2px; --radius-sheet: 2px; --notch: 16px; /* the system's one shape: a diagonal corner cut, not a radius */ --track-height: 8px; /* dark only — this system has no light mode */ color-scheme: dark; --canvas: #000000; /* WHOOP Black */ --surface: #101518; /* WHOOP background gradient, dark end */ --surface-raised: #283339; /* WHOOP background gradient, light end */ --gradient: linear-gradient(180deg, #283339 0%, #101518 100%); /* WHOOP's documented background gradient, for hero-scale surfaces only */ --hairline: rgba(255, 255, 255, 0.12); --hairline-strong: rgba(255, 255, 255, 0.24); --ink: #FFFFFF; /* WHOOP White */ --ink-soft: rgba(255, 255, 255, 0.64); --ink-quiet: rgba(255, 255, 255, 0.40); --on-brand: #000000; --cta: #00F19F; /* WHOOP Teal — CTAs, highlights, positive evaluations, Sleep Need */ --on-cta: #000000; --brand: #00F19F; --brand-soft: rgba(0, 241, 159, 0.16); --strain: #0093E7; /* WHOOP Strain — Activities & Strain-related topics */ --accent: var(--strain); /* second data series only */ --accent-soft: rgba(0, 147, 231, 0.16); --recovery-blue: #67AEE6; /* WHOOP Recovery Blue — recovery data, no valuation attached */ --sleep: #7BA1BB; /* WHOOP Sleep — Sleep-related data */ /* WHOOP's own documented recovery scale (100-67% / 66-34% / 33-0%) — used as-is for any on-track/attention/behind reading, not just recovery. */ --optimal: #16EC06; /* High Recovery */ --attention: #FFDE00; /* Medium Recovery */ --poor: #FF0026; /* Low Recovery */ --track: rgba(255, 255, 255, 0.12); --shadow: 0 12px 32px rgba(0, 0, 0, 0.6); } /* base */ body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--text-body); -webkit-font-smoothing: antialiased; } h1 { font: var(--text-h1); letter-spacing: var(--tracking-headline); text-transform: uppercase; margin: 0; } h2 { font: var(--text-h2); letter-spacing: var(--tracking-headline); text-transform: uppercase; margin: 0; } .display { font: var(--text-display); letter-spacing: var(--tracking-headline); text-transform: uppercase; } .label { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-soft); } .numeral { font: var(--text-numeral); font-variant-numeric: tabular-nums; font-stretch: condensed; letter-spacing: -0.01em; } .small { font: var(--text-small); color: var(--ink-soft); } /* the notch — clip one corner instead of rounding any */ .notch { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); } .notch-sm { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); } /* components */ .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-sm); border: 1px solid transparent; font: 700 15px/1 var(--font-sans); letter-spacing: 0.01em; cursor: pointer; } .btn-primary { background: var(--cta); color: var(--on-cta); } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--hairline-strong); } .btn-ghost { background: transparent; color: var(--ink-soft); } .btn-danger { background: transparent; color: var(--poor); border-color: var(--poor); } .btn:disabled { opacity: 0.35; cursor: default; } .btn-sm { height: 36px; padding: 0 var(--space-4); font-size: 13px; } .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .card-raised { background: var(--gradient); box-shadow: var(--shadow); } .stat { display: flex; flex-direction: column; gap: var(--space-2); } .stat .delta { font: var(--text-label); letter-spacing: var(--tracking-label); } .stat .delta-up { color: var(--optimal); } .stat .delta-down { color: var(--poor); } .chip { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-3); border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink); font: 700 13px/1 var(--font-sans); } .chip-selected { background: var(--ink); color: var(--canvas); border-color: var(--ink); } .input { appearance: none; height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: var(--surface-raised); color: var(--ink); font: 400 15px/1 var(--font-sans); } .input:focus { outline: none; border-color: var(--brand); } .bar { height: var(--track-height); background: var(--track); position: relative; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--brand); } .status-dot { width: 8px; height: 8px; display: inline-block; background: var(--ink-quiet); }