/* ============================================================ SCALE20 — colors & type tokens "Spectral Signal" — black/white core, spectrum accents, editorial-grotesk type stack with a script for human voice. ============================================================ */ /* ---------- Webfonts ------------------------------------------------------ */ /* Display: Neue Haas Grotesk Display Pro (provided) */ @font-face { font-family: "Neue Haas Display"; src: url("./fonts/NeueHaasDisplayThin.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Neue Haas Display"; src: url("./fonts/NeueHaasDisplayLight.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Neue Haas Display"; src: url("./fonts/NeueHaasDisplayRoman.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Neue Haas Display"; src: url("./fonts/NeueHaasDisplayMediu.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Neue Haas Display"; src: url("./fonts/NeueHaasDisplayBold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Neue Haas Display"; src: url("./fonts/NeueHaasDisplayBlack.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } /* Tertiary: Biro Script Plus (substitute — see README, font flagged) */ @font-face { font-family: "Biro Script"; src: url("./fonts/BiroScript.otf") format("opentype"), url("./fonts/BiroScript.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* Primary + Secondary: Space Grotesk + Space Mono — Google Fonts NOTE: loaded via in each HTML head (with preconnect) instead of @import here, so the font CSS doesn't block render behind this stylesheet. See in each page. */ /* ---------- Color palette ------------------------------------------------- */ :root { /* Core */ --s20-black: #000000; --s20-white: #FFFFFF; --s20-silver-grey: #9E9E9E; /* Spectrum accents — the seven "signal" colors */ --s20-amber-shift: #F1612F; --s20-green-light: #08A269; --s20-electric-indigo: #0D00ED; --s20-solar-yellow: #F6D201; --s20-infra-red: #C12703; --s20-aqua-ray: #43DEE0; --s20-ultraviolet: #883794; /* Spectrum chromatic-aberration trio (used on the "20" mark + accents) */ --s20-aberration-cyan: #00E5FF; --s20-aberration-magenta: #FF008C; --s20-aberration-yellow: #FFD400; /* Semantic foreground / background (LIGHT mode default) */ --bg: var(--s20-white); --bg-elev: #F7F7F7; /* slightly lifted surface */ --bg-mute: #EEEEEE; --fg: var(--s20-black); --fg-mute: #4A4A4A; --fg-soft: var(--s20-silver-grey); --border: #E2E2E2; --border-strong: #1A1A1A; --accent: var(--s20-electric-indigo); --accent-fg: var(--s20-white); /* Status (mapped to spectrum) */ --success: var(--s20-green-light); --warning: var(--s20-solar-yellow); --danger: var(--s20-infra-red); --info: var(--s20-aqua-ray); /* Gradients — from brand book (silver / warm / cool / spectrum) */ --grad-silver: linear-gradient(135deg, #FFFFFF 0%, #D9D9D9 50%, #9E9E9E 100%); --grad-warm: linear-gradient(135deg, #F6D201 0%, #F1612F 55%, #C12703 100%); --grad-cool: linear-gradient(135deg, #43DEE0 0%, #0D00ED 60%, #883794 100%); --grad-spectrum: linear-gradient(90deg, #883794 0%, #0D00ED 18%, #43DEE0 36%, #08A269 54%, #F6D201 72%, #F1612F 86%, #C12703 100%); /* "Aberration" gradient text — used to tint the 20 / accent words */ --grad-aberration: linear-gradient(90deg, var(--s20-aberration-cyan) 0%, var(--s20-aberration-magenta) 50%, var(--s20-aberration-yellow) 100%); /* ---------- Type families ---------------------------------------------- */ --font-display: "Neue Haas Display", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --font-mono: "Space Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; --font-script: "Biro Script", "Caveat", "Bradley Hand", cursive; /* ---------- Type scale (for 16px root) --------------------------------- */ --fs-caption: 12px; --lh-caption: 1.4; --fs-label: 13px; --lh-label: 1.3; --fs-body: 16px; --lh-body: 1.55; --fs-lead: 20px; --lh-lead: 1.45; --fs-h6: 18px; --fs-h5: 22px; --fs-h4: 28px; --fs-h3: 36px; --fs-h2: 52px; --fs-h1: 80px; --fs-display: 120px; /* ---------- Spacing ----------------------------------------------------- */ --sp-0: 0px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- Radius ------------------------------------------------------ */ --r-0: 0px; /* default — Scale20 leans hard into hard corners */ --r-1: 2px; --r-2: 4px; --r-pill: 999px; /* used for tags, status capsules */ /* ---------- Shadows / elevation ---------------------------------------- */ --shadow-1: 0 1px 2px rgba(0,0,0,0.06); --shadow-2: 0 4px 12px rgba(0,0,0,0.08); --shadow-3: 0 12px 32px rgba(0,0,0,0.12); --shadow-glow: 0 0 0 1px rgba(13,0,237,0.25), 0 8px 24px rgba(13,0,237,0.18); /* ---------- Motion ------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ---------- Dark mode (black background variant from brand) -------------- */ .theme-dark, [data-theme="dark"] { --bg: var(--s20-black); --bg-elev: #0E0E0E; --bg-mute: #1A1A1A; --fg: var(--s20-white); --fg-mute: #BDBDBD; --fg-soft: var(--s20-silver-grey); --border: #2A2A2A; --border-strong: #FFFFFF; --accent-fg: var(--s20-black); } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Headlines — Neue Haas Display, sentence case */ h1, .h1, .display, h2, .h2, h3, .h3, h4, .h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; margin: 0 0 0.4em; } .display { font-size: var(--fs-display); font-weight: 500; letter-spacing: -0.035em; line-height: 0.96; } h1, .h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; } h2, .h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; } h3, .h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.1; } h4, .h4 { font-size: var(--fs-h4); letter-spacing: -0.015em; line-height: 1.15; } /* Subheads — Space Grotesk, can be all caps */ h5, .h5 { font-family: var(--font-sans); font-size: var(--fs-h5); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 0.5em; } h6, .h6 { font-family: var(--font-sans); font-size: var(--fs-h6); font-weight: 600; line-height: 1.3; margin: 0 0 0.5em; } /* Body */ p, .body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; margin: 0 0 1em; text-wrap: pretty; } .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 400; color: var(--fg); } small, .caption { font-family: var(--font-mono); font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: 0.02em; } /* Labels / buttons / nav — Space Mono, ALL CAPS */ .label, .eyebrow, button.label-btn { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; } .eyebrow { display: inline-block; padding-bottom: 0.4em; border-bottom: 1px solid currentColor; } /* Quotes / annotations — Biro Script */ .script, blockquote.script, .annotation { font-family: var(--font-script); font-weight: 400; font-size: 1.4em; line-height: 1.2; letter-spacing: 0; } /* Mono / code */ code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; } pre { background: var(--bg-mute); padding: var(--sp-4); border: 1px solid var(--border); overflow-x: auto; } /* Links — underline on hover, no chrome by default */ a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity var(--dur-fast) var(--ease-out); } a:hover { opacity: 0.6; } /* hr — thin signal line */ hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; } /* ============================================================ BRAND UTILITIES ============================================================ */ /* The "spectrum signal" gradient text — used for accent words like the "20" in the wordmark, or to spotlight a single phrase. */ .spectrum-text { background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Chromatic aberration text — RGB layered offsets, the brand's signature */ .aberration { position: relative; color: var(--s20-black); text-shadow: -0.03em 0 0 var(--s20-aberration-cyan), 0.03em 0 0 var(--s20-aberration-yellow), 0 0.02em 0 var(--s20-aberration-magenta); } .theme-dark .aberration, [data-theme="dark"] .aberration { color: var(--s20-white); } /* Crossed-out text (from brand "We BUILD BRANDS NOT FUNNELS" treatment) */ .strike-through-bold { position: relative; display: inline-block; } .strike-through-bold::after { content: ""; position: absolute; left: -0.05em; right: -0.05em; top: 50%; height: 0.12em; background: currentColor; transform: translateY(-50%) rotate(-4deg); } /* Highlighter — used on key phrases */ .hl-yellow { background: var(--s20-solar-yellow); padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .hl-cyan { background: var(--s20-aqua-ray); padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .hl-amber { background: var(--s20-amber-shift); color: var(--s20-white); padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Visible grid utility — brand uses thin grid lines as decorative element */ .grid-overlay { background-image: linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px); background-size: 64px 64px; }