/* ===================================================================== NOVI DESIGN SYSTEM · novi-system.css The single source of truth for tokens, type roles, and core components, shared by every core page. Pages must: 1. link the fonts (Instrument Serif · Inter · Geist Mono) in 2. link this file 3. compose from the role classes (.t-*) + tokens — never invent font-sizes, line-heights, or colours. (home.html still carries an inline copy pending migration onto this file.) ===================================================================== */ /* ── Tokens — semantic, theme-driven ───────────────────────────────── */ :root, [data-theme="light"] { color-scheme: light; --bg: #FAFAF8; --surface: #FFFFFF; --surface-2: #F4F4F0; --text: #0F1115; --text-muted: #5E626C; --text-faint: #8F94A0; --border: #E5E5E1; --border-strong: #D2D2CD; --accent-model: #A6772A; --accent-model-on: #F59E0B; --accent-operate: #4A7AAF; --accent-operate-on: #60A5FA; --accent-tell: #3D8F6E; --accent-tell-on: #34D399; --accent-clara: #6E5DB0; --accent-clara-on: #A78BFA; /* Modelling-primitive icon colours — matched to the Novi app */ --model-icon-color: #6366F1; /* Indigo — the Model */ --icon-dictionary-color: #10B981; /* Emerald — Dictionaries */ --icon-table-color: #F59E0B; /* Amber — Tables */ --table-analysis-color: #F59E0B; --icon-link-color: #C087F2; /* Amethyst — Links */ --cta: #FCD34D; --cta-hover: #FBC119; --cta-text: #0F1115; --color-error: #DC2626; --media-scrim: rgba(15,17,21,0.55); --nav-bg: rgba(250,250,248,0.82); --spotlight: rgba(15,17,21,0.04); --grid-dot: rgba(15,17,21,0.05); --grid-line: rgba(15,17,21,0.035); --arch-line: rgba(15,17,21,0.18); /* ── Type scale — single source of truth. Sizes are theme-independent; the only responsive bumps live in one @media block below the palettes. Display is bespoke per page (the hero moments). */ --fs-h2: 40px; /* section titles (serif) */ --fs-lead: 26px; /* big statements / quotes (serif) */ --fs-statement: 22px; /* card titles / statements (serif) */ --fs-body: 17px; /* running prose (sans) */ --fs-caption: 14px; /* small / supporting (sans) */ --fs-eyebrow: 13px; /* section numerals (mono) */ --fs-label: 12px; /* component labels (mono) */ --fs-label-sm: 11px; /* micro labels (mono) */ --fs-small: 15px; /* interactive / standalone UI text (buttons, links, fine prose) */ --lh-tight: 1.1; /* headings */ --lh-snug: 1.25; /* statements / leads */ --lh-body: 1.6; /* prose */ --lh-caption:1.55; /* small text */ /* ── Spacing scale (4-based) — the standard for layout rhythm. ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 120px; } /* Responsive type bumps — the one place sizes change by viewport */ @media (min-width: 768px) { :root { --fs-h2: 52px; --fs-lead: 28px; } } [data-theme="dark"] { color-scheme: dark; --bg: #171714; --surface: #1E1E1A; --surface-2: #23231F; --text: #EDEAE2; --text-muted: #9A968B; --text-faint: #6B6862; --border: rgba(237,234,226,0.10); --border-strong: rgba(237,234,226,0.18); --accent-model: #D4A24A; --accent-model-on: #FBBF24; --accent-operate: #7AAEE5; --accent-operate-on: #7DB6FB; --accent-tell: #6FC5A2; --accent-tell-on: #4ADBA4; --accent-clara: #9F8FE0; --accent-clara-on: #BFA6FF; --model-icon-color: #6366F1; --icon-dictionary-color: #10B981; --icon-table-color: #F59E0B; --table-analysis-color: #F59E0B; --icon-link-color: #C087F2; --cta: #FCD34D; --cta-hover: #FBC119; --cta-text: #171714; --color-error: #F87171; --media-scrim: rgba(15,17,21,0.55); --nav-bg: rgba(23,23,20,0.78); --spotlight: rgba(237,234,226,0.04); --grid-dot: rgba(237,234,226,0.06); --grid-line: rgba(237,234,226,0.045); --arch-line: rgba(237,234,226,0.18); } /* ── Reset + base ──────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--surface); color: var(--text); text-wrap: pretty; font-size: 16px; line-height: 1.6; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 200ms ease-out, color 200ms ease-out; } h1, h2, h3, h4, .t-h2, .t-lead, .t-statement { text-wrap: balance; } a { color: inherit; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; border-radius: 2px; } img { display: block; max-width: 100%; height: auto; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } @media (min-width: 768px) { .container { padding: 0 48px; } } @media (min-width: 1024px) { .container { padding: 0 64px; } } /* ── Font utilities ────────────────────────────────────────────────── */ .serif { font-family: 'Instrument Serif', 'Times New Roman', serif; font-weight: 400; } .mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; } .mono-label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .mono-numeral { font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } /* ===================================================================== TYPE ROLES — the public API. Compose pages from these. ===================================================================== */ .t-h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.01em; } .t-lead { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-snug); letter-spacing: -0.005em; } .t-statement { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: var(--fs-statement); line-height: var(--lh-snug); letter-spacing: -0.005em; } .t-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); } .t-body-strong { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); font-weight: 600; } .t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .t-eyebrow { font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } .t-label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } .t-label-sm { font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } /* Accent doctrine — colour is a signal, not decoration. The only accents: • one per section — its number + eyebrow (--accent, set inline per section) • the modelling primitives in their blocks: Model=Indigo, Dictionaries=Emerald, Tables=Amber, Links=Amethyst • gold (--cta) for primary CTAs only • green (--accent-tell-on) for the "live" pulse dot only Everything else is --text / --text-muted / --text-faint. No new colour enters a page without first becoming a token. */ /* ── Section numerals — the rhythm ─────────────────────────────────── */ .section-num { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; } .section-num::before { content: ""; width: 6px; height: 6px; display: inline-block; background: var(--accent); border-radius: 1px; } .section-num .num, .section-num .label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } .section-num .num { color: var(--text); } /* ── Reveal on scroll ──────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(8px); transition: opacity 500ms ease-out, transform 500ms ease-out; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } } /* ── Bracketed card — the signature move ───────────────────────────── */ .bracket { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: var(--space-5); } .bracket::before, .bracket::after, .bracket > .br-bl, .bracket > .br-br { content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--accent, var(--text-muted)); border-style: solid; border-width: 0; transition: border-color 150ms ease-out, transform 150ms ease-out; pointer-events: none; } .bracket::before { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; } .bracket::after { top: -1px; right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; } .bracket > .br-bl { bottom: -1px; left: -1px; border-bottom-width: 1.5px; border-left-width: 1.5px; } .bracket > .br-br { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; } .bracket:hover::before, .bracket:hover::after, .bracket:hover > .br-bl, .bracket:hover > .br-br { transform: translate(0,0); } /* ── Buttons + links ───────────────────────────────────────────────── */ .btn-primary { display: inline-block; font-weight: 600; font-size: var(--fs-small); padding: 14px 22px; border-radius: 4px; background: var(--cta); color: var(--cta-text); border: 1px solid var(--cta); text-decoration: none; line-height: 1; transition: background 150ms ease-out; } .btn-primary:hover { background: var(--cta-hover); } .link-arrow { font-size: var(--fs-small); font-weight: 500; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border-strong); padding-bottom: 2px; transition: border-color 150ms ease-out; } .link-arrow:hover { border-color: var(--cta); } /* In-text link — woven into running prose; inherits prose colour, underline lights to cta on hover */ .ilink { color: inherit; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--border-strong); padding-bottom: 1px; transition: border-color 150ms ease-out; } .ilink:hover { border-color: var(--cta); } .section-divider { border: 0; border-top: 1px solid var(--border); margin: 0; }