/* ============================================================ Think Camp — Design Tokens (drop-in) ============================================================ Sister brand to RocketHour. The only token that changes between brands is --brand. Everything else is shared. Default here is Think Camp (--think-crimson). Switch to RocketHour with [data-brand="rocket"] on or any container. Verified against rockethour-website-v4 production CSS (May 2026). ============================================================ */ /* ─── Self-hosted fonts ───────────────────────────────────── Bricolage Grotesque variable + JetBrains Mono + Syne Mono. Adjust the src path to wherever you host the woff2 files. In this folder they live in ./fonts/. ─────────────────────────────────────────────────────────── */ @font-face { font-family: "Bricolage Grotesque"; src: url("./fonts/bricolage-variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("./fonts/jetbrains-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Syne Mono"; src: url("./fonts/syne-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Fallback metric overrides — zero CLS on font swap. */ @font-face { font-family: "Bricolage Grotesque Fallback Display"; src: local("Arial Bold"); ascent-override: 89.13%; descent-override: 25.88%; line-gap-override: 0%; size-adjust: 104.34%; } @font-face { font-family: "Bricolage Grotesque Fallback UI"; src: local("Arial"); ascent-override: 82.39%; descent-override: 23.92%; line-gap-override: 0%; size-adjust: 112.88%; } @font-face { font-family: "JetBrains Mono Fallback"; src: local("Courier New"); ascent-override: 102.02%; descent-override: 30%; line-gap-override: 0%; size-adjust: 99.98%; } /* ─── Tokens ───────────────────────────────────────────── */ :root { /* Brand primaries — Think Camp is the default in this file */ --rocket-violet: #bb24ed; --think-crimson: #e61a43; --brand: var(--think-crimson); --brand-on: #ffffff; /* CTA-only accent — same on both brands */ --spark-volt: #c7f900; --volt-on: #141210; /* Brand tonal scale (Think Camp) */ --brand-wash: rgba(230, 26, 67, 0.12); --brand-mid: #fa9899; --brand-shade: #90000e; /* Neutrals — warm, high-contrast 8-stop ladder */ --white: #ffffff; --canvas: #f5f2ee; --cloud: #e8e4df; --fog: #c2beba; --graphite: #6e6b66; --dusk: #302e2b; --ash: #252321; --ink: #141210; /* Status & utility */ --live: #00d97e; --success: #16a22d; --danger: #dc2837; --warning: #d97706; --star: #fbbf24; /* Hairlines */ --hair: rgba(20, 18, 16, .10); --hair-strong: rgba(20, 18, 16, .18); --border-on-dark: rgba(245, 242, 238, .12); /* Font families */ --display: "Bricolage Grotesque", "Bricolage Grotesque Fallback Display", Arial, sans-serif; --ui: "Bricolage Grotesque", "Bricolage Grotesque Fallback UI", Arial, sans-serif; --mono: "JetBrains Mono", "JetBrains Mono Fallback", "Courier New", ui-monospace, monospace; --texture: "Syne Mono", ui-monospace, monospace; /* Type scale */ --fs-hero: clamp(44px, 6vw, 84px); --fs-display: clamp(36px, 4.5vw, 60px); --fs-stat: clamp(32px, 3.5vw, 48px); --fs-h3: 22px; --fs-lede: 19px; --fs-body: 16px; --fs-body-s: 15px; --fs-small: 14px; --fs-mono-l: 12px; --fs-mono: 11px; --fs-micro: 10px; --fs-nano: 9px; --tracking-tight: -.02em; --tracking-mono: .14em; --lh-hero: .94; --lh-display: .98; --lh-tight: 1.05; --lh-body: 1.55; /* Border widths */ --bw-hair: 1.5px; --bw: 2px; /* Shadows — hard stamp, no blur. The only shadow system. */ --shadow-rest: 0 4px 0 var(--ink); --shadow-lift: 0 6px 0 var(--ink); --shadow-press: 0 1px 0 var(--ink); --shadow-light-rest: 0 3px 0 var(--canvas); /* Spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px; --sp-10: 96px; /* Radii — canonical scale */ --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 999px; /* Layout */ --rail-w: 280px; --main-max: 1240px; --main-pad-x: 48px; /* Motion */ --ease: cubic-bezier(.2,.8,.2,1); --t-fast: 120ms; --t-base: 150ms; --t-slow: 250ms; } /* ─── Sister-brand swap ─────────────────────────────────── */ [data-brand="rocket"] { --brand: var(--rocket-violet); --brand-wash: rgba(187, 36, 237, 0.12); --brand-mid: #da9af6; --brand-shade: #6f0096; } [data-brand="think"], [data-brand="thinkcamp"] { --brand: var(--think-crimson); --brand-wash: rgba(230, 26, 67, 0.12); --brand-mid: #fa9899; --brand-shade: #90000e; } /* ─── Base reset (minimal) ──────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { font-synthesis: none; } html, body { margin: 0; padding: 0; } body { background: var(--canvas); color: var(--ink); font-family: var(--ui); font-weight: 500; /* body weight is 500, not 400 */ font-variation-settings: "wdth" 100; font-optical-sizing: auto; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--brand); color: var(--canvas); } /* ─── Type classes ──────────────────────────────────────── */ .h1, .t-hero { font-family: var(--display); font-weight: 800; font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--tracking-tight); margin: 0; } .h1 em, .t-hero em { font-style: normal; color: var(--brand); } .h2, .t-display { font-family: var(--display); font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); margin: 0; } .h2 em, .t-display em { font-style: normal; color: var(--brand); } .h3 { font-family: var(--display); font-weight: 800; font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: -.01em; margin: 0 0 8px; } .lede { font-size: var(--fs-lede); font-weight: 500; line-height: 1.5; margin: 0; } .body, p.body, .t-body { font-family: var(--ui); font-weight: 500; font-size: var(--fs-body); line-height: var(--lh-body); } .t-body-l { font-family: var(--ui); font-weight: 400; font-size: var(--fs-body); line-height: 1.6; } .small, .t-meta { font-family: var(--ui); font-weight: 500; font-size: 12px; line-height: 1.4; } /* Mono uppercase label — used on every system element */ .mono-label, .t-label { font-family: var(--mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: var(--tracking-mono); text-transform: uppercase; font-feature-settings: "tnum" 1; } /* Tabular figures — apply to anything numeric */ .tabular, .t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Atmospheric texture — Syne Mono. Background wash ONLY. */ .texture { font-family: var(--texture); font-size: 64px; line-height: 1.05; color: rgba(245, 242, 238, .045); /* on dark; flip for light */ white-space: nowrap; pointer-events: none; user-select: none; } /* ─── Buttons ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-family: var(--mono); font-size: var(--fs-mono-l); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-radius: var(--r-md); border: 2px solid var(--ink); box-shadow: var(--shadow-rest); transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); cursor: pointer; } .btn:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); } .btn:active { box-shadow: var(--shadow-press); transform: translateY(2px); } .btn--volt { background: var(--spark-volt); color: var(--volt-on); } .btn--ghost-dark { background: transparent; color: var(--canvas); border-color: var(--border-on-dark); box-shadow: 0 4px 0 rgba(245,242,238,.12); } .btn--ghost-light { background: transparent; color: var(--ink); border-color: var(--ink); } /* ─── Card (canonical) ──────────────────────────────────── */ .card { background: var(--white); border: 2px solid var(--ink); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-rest); } .card--ink { background: var(--ink); color: var(--canvas); } .card--brand { background: var(--brand); color: var(--canvas); } /* ─── Pulse animation (live indicator) ──────────────────── */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }