/* ============================================================================ thornberry — colors & type The trading desk for wizards. Decryptofy Inc. · thornberry.ai Source of truth: globals.css + brand-book.md (this file mirrors them) Two modes exist: GROOVY (default — the signature aesthetic) and NORMIE (data-mode="normie" — the WCAG-AA accessibility path: glow stripped, flat borders, fades only). Tokens below are the GROOVY defaults; the "NORMIE OVERRIDES" block at the bottom restains them. Fonts: ALL FOUR families are SELF-HOSTED from /fonts (brand-supplied TTFs). Syne · Questrial · PT Sans · JetBrains Mono. No CDN dependency. See README "Typography". ========================================================================= */ /* ---- Syne (self-hosted) — variable font covers the full 400..800 axis ----- Path is relative to this stylesheet; resolves to /fonts from anywhere that imports colors_and_type.css (root cards via ../, ui kits via ../../). Static weights also live in /fonts if a non-variable build is ever needed. */ @font-face { font-family: 'Syne'; font-weight: 400 800; font-style: normal; font-display: swap; src: url("/fonts/Syne-Variable.ttf") format('truetype'); } /* ---- Questrial (self-hosted) --------------------------------------------- */ @font-face { font-family: 'Questrial'; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/Questrial-Regular.ttf") format('truetype'); } /* ---- PT Sans (self-hosted) — 400/700, roman + italic --------------------- */ @font-face { font-family: 'PT Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/PTSans-Regular.ttf") format('truetype'); } @font-face { font-family: 'PT Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/PTSans-Bold.ttf") format('truetype'); } @font-face { font-family: 'PT Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/PTSans-Italic.ttf") format('truetype'); } @font-face { font-family: 'PT Sans'; font-weight: 700; font-style: italic; font-display: swap; src: url("/fonts/PTSans-BoldItalic.ttf") format('truetype'); } /* ---- JetBrains Mono (self-hosted) — numbers & code, 300..700 + italics ---- Uses the standard (ligature) cut; the NL/no-ligature cut also ships in /fonts. */ @font-face { font-family: 'JetBrains Mono'; font-weight: 300; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-Light.ttf") format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-Regular.ttf") format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-Medium.ttf") format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-SemiBold.ttf") format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-Bold.ttf") format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/JetBrainsMono-Italic.ttf") format('truetype'); } :root { /* ---- BACKGROUND SCALE (deep → light) ---------------------------------- */ --deep: #020617; /* page floor, hero base, behind glass */ --primary: #0F172A; /* default page background */ --secondary: #1E293B; /* card / surface background */ --tertiary: #334155; /* raised surface, hover fills */ --border: #475569; /* hairline dividers, input borders */ /* ---- BRAND ACCENTS ---------------------------------------------------- */ --cyan: #14B8A6; /* PRIMARY · CTAs · focus · the brand's working color */ --green: #2DD4BF; /* positive · up · win */ --pink: #EC4899; /* negative · down · loss (magenta, NOT red) */ --amber: #FFB020; /* warning · threshold */ --purple: #A78BFA; /* decorative · glow */ --gold: #FBBF24; /* decorative */ --blue: #3B82F6; /* utility */ /* ---- TEXT ------------------------------------------------------------- */ --text: #F1F5F9; /* primary text on dark */ --text2: #CBD5E1; /* secondary / body-dim */ --muted: #94A3B8; /* meta, captions, disabled */ --on-accent: #020617; /* text that sits on top of a bright accent fill */ /* ---- 7-TIER ALPHA LADDER (ADR-0002) ---------------------------------- One alpha, one role. Don't invent a new value. Defined here on purple; swap the base color as needed (cyan / pink). */ --a05: color-mix(in srgb, var(--purple) 5%, transparent); /* whisper */ --a08: color-mix(in srgb, var(--purple) 8%, transparent); /* inset */ --a10: color-mix(in srgb, var(--purple) 10%, transparent); /* wash */ --a15: color-mix(in srgb, var(--purple) 15%, transparent); /* hint */ --a20: color-mix(in srgb, var(--purple) 20%, transparent); /* accent */ --a25: color-mix(in srgb, var(--purple) 25%, transparent); /* edge */ --a50: color-mix(in srgb, var(--purple) 50%, transparent); /* beacon */ /* cyan ladder (focus rings, positive washes) */ --c04: color-mix(in srgb, var(--cyan) 4%, transparent); --c10: color-mix(in srgb, var(--cyan) 10%, transparent); --c20: color-mix(in srgb, var(--cyan) 20%, transparent); /* ---- SEMANTIC ROLES --------------------------------------------------- */ --bg: var(--primary); --surface: var(--secondary); --surface-2: var(--tertiary); --fg: var(--text); --fg2: var(--text2); --fg-muted: var(--muted); --accent: var(--cyan); /* the one you reach for first */ --positive: var(--green); --negative: var(--pink); --warning: var(--amber); --decorative: var(--purple); --focus-ring: var(--cyan); --hairline: color-mix(in srgb, var(--border) 50%, transparent); /* ---- TYPE FAMILIES (four typefaces, four jobs) ------------------------ */ --font-display: 'Syne', system-ui, sans-serif; /* headings h1–h6 */ --font-ui: 'Questrial', system-ui, sans-serif; /* buttons/labels */ --font-body: 'PT Sans', system-ui, sans-serif; /* paragraph copy */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* numbers/code */ /* ---- TYPE SCALE ------------------------------------------------------- */ --fs-eyebrow: 12px; --fs-label: 12px; --fs-caption: 13px; --fs-ui: 15px; --fs-body: 17px; --fs-lead: 18px; --fs-h4: 20px; --fs-h3: 28px; --fs-h2: clamp(30px, 4.4vw, 46px); --fs-h1: clamp(40px, 7vw, 76px); --fs-wordmark:clamp(52px, 8.4vw, 112px); --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.55; --tracking-display: -0.01em; /* Syne sits tight */ --tracking-eyebrow: 0.28em; /* eyebrows are wide */ --tracking-label: 0.16em; /* ---- RADII ------------------------------------------------------------ */ --r-sm: 4px; /* swatches, tiny chips */ --r-md: 11px; /* nav rows, inputs */ --r-lg: 12px; /* glass cards, panels */ --r-xl: 14px; /* tiles, gallery items */ --r-pill: 30px; /* chips, pills */ --r-full: 50%; /* dots, avatars */ /* ---- SPACING (4px base) ----------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 28px; --sp-7: 40px; --sp-8: 56px; --sp-9: 84px; /* ---- ELEVATION / GLOW ------------------------------------------------- */ /* The signature "glass card" shadow — depth + faint purple + cyan halo. */ --shadow-glass: 0 4px 24px rgba(0,0,0,.25), 0 0 12px color-mix(in srgb, var(--purple) 6%, transparent), 0 0 24px var(--c04), inset 0 1px 0 var(--a08); --shadow-glass-hover: 0 8px 30px rgba(0,0,0,.32), 0 0 16px color-mix(in srgb, var(--purple) 14%, transparent), 0 0 36px color-mix(in srgb, var(--cyan) 8%, transparent); --shadow-soft: 0 4px 24px rgba(0,0,0,.25); --glow-cyan: 0 0 18px color-mix(in srgb, var(--cyan) 45%, transparent); --glow-purple: 0 0 18px color-mix(in srgb, var(--purple) 45%, transparent); --glow-pink: 0 0 22px color-mix(in srgb, var(--pink) 35%, transparent); /* ---- SIGNATURE GRADIENTS ---------------------------------------------- */ /* The brand gradient: cyan → purple → pink. Used on wordmark & big type. */ --grad-brand: linear-gradient(100deg, #14B8A6 0%, #A78BFA 52%, #EC4899 100%); --grad-title: linear-gradient(100deg, #F1F5F9, #2DD4BF); --grad-brandbar: linear-gradient(90deg, var(--purple) 0 50%, var(--cyan) 50% 100%); /* Hero ambient field — layered radial nebula over the deep floor */ --grad-hero: radial-gradient(1100px 600px at 18% 18%, rgba(70,45,140,.50), transparent), radial-gradient(1000px 600px at 88% 92%, rgba(8,90,90,.55), transparent), radial-gradient(520px 320px at 80% 12%, rgba(120,25,70,.50), transparent), var(--deep); /* ---- MOTION ----------------------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: .25s; --dur-base: .3s; --dur-slow: .4s; /* fade-in-up element entry (+8px) */ --dur-ambient: 3s; /* glow-pulse / neon-breathe — ambient, never frenetic*/ --stagger: 60ms; /* list reveal step, up to 10 items */ } /* ============================================================================ SEMANTIC TYPE PRIMITIVES Apply these classes (or copy the rules) for consistent text styling. ========================================================================= */ .t-wordmark { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-wordmark); line-height: .95; letter-spacing: var(--tracking-display); background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .t-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); } .t-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-display); background: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; } .t-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: var(--tracking-display); color: var(--fg); } .t-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--fg); } .t-eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--fs-eyebrow); font-weight: 700; color: var(--cyan); } .t-label { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-label); font-weight: 700; color: var(--cyan); } .t-lead { font-family: var(--font-body); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg2); } .t-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); } .t-ui { font-family: var(--font-ui); font-size: var(--fs-ui); color: var(--fg); } .t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .t-quote { font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: var(--lh-snug); color: var(--fg); } /* P&L numerals — always mono + tabular */ .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; } .num-up { color: var(--green); } .num-down { color: var(--pink); } /* ============================================================================ NORMIE OVERRIDES — data-mode="normie" The accessibility path: kill glow, flatten surfaces, neutralize headings. ========================================================================= */ [data-mode="normie"] { --shadow-glass: 0 1px 0 var(--hairline); --shadow-glass-hover: 0 1px 0 var(--hairline); --glow-cyan: none; --glow-purple: none; --glow-pink: none; --grad-title: none; --font-display: 'Questrial', system-ui, sans-serif; /* calm headings */ } [data-mode="normie"] .t-h2 { color: var(--fg); background: none; } [data-mode="normie"] .t-wordmark { background: none; color: var(--fg); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: .01ms; --dur-base: .01ms; --dur-slow: .01ms; --dur-ambient: .01ms; } }