/* Typography v2 — experimental parallel scale (S17). Toggle ON: localStorage.setItem('tv_typography_v2', 'true') Toggle OFF: localStorage.removeItem('tv_typography_v2') Refresh after toggling. When/if v2 is committed: flatten into styles.css, drop this file, remove the .typography-v2 class hook (#55 in backlog). Implementation: - Class .typography-v2 is added to before SPA boots via a pre-stylesheet script in index.html. No flash of unstyled content. - Every top-level selector starts with .typography-v2 — flag UNSET means zero rules match; revert is byte-identical to current state. - One @media (max-width: 600px) block redefines variables for mobile; the prefix is preserved inside the media block too. - Selectors with BOTH size and family changes use one rule, not two. Scale: 1.25 (major-third) ratio from 16px base. */ /* ── SCALE VARIABLES ───────────────────────────────────────────── Each variable is the size for ONE role. Consumers reference the variable instead of declaring px directly so the next retune is a 9-line edit. Mobile overrides redefine these inside the media query below — every consumer updates automatically. */ .typography-v2 { /* Body baseline */ --text-body: 16px; /* step 0 — body prose (BASE) */ /* Smaller */ --text-small: 13px; /* step -1 — small UI / chip / pill / hint */ --text-micro: 11px; /* step -2 — eyebrow / classifier pill (mono) */ /* Larger */ --text-lead: 20px; /* step +1 — card title / lead body */ --text-subhead: 25px; /* step +2 — view sub-heading */ --text-section: 32px; /* step +3 — section heading */ --text-headline: 40px; /* step +4 — view headline */ --text-hero: 50px; /* step +5 — hero h1 */ /* Brand display (V-ones mark only) */ --text-brand-lg: 140px; /* .vm-v */ --text-brand-sm: 48px; /* .vm-the / .vm-ones */ --text-brand-xs: 30px; /* .vm-erified */ } /* ── BODY BASELINE ─────────────────────────────────────────────── */ .typography-v2 body { font-size: var(--text-body); line-height: 1.65; } /* ── STEP 0 — BODY PROSE (16px sans 400 lh 1.65) ─────────────── The user's primary perception complaint area. Bumped from 13/13.5/14/15 to 16 to maintain rhythm in wider columns. */ .typography-v2 .sr-r-why-list li { font-size: var(--text-body); line-height: 1.65; } .typography-v2 .wc-outcome, .typography-v2 .wc-bestfor, .typography-v2 .sr-r-bestfor { font-size: var(--text-body); line-height: 1.55; } .typography-v2 .modal-sub { font-size: var(--text-body); line-height: 1.6; } .typography-v2 .linkedin-only-note { font-size: var(--text-body); line-height: 1.55; } .typography-v2 .persona-desc { font-size: var(--text-body); line-height: 1.55; } .typography-v2 .ip-desc, .typography-v2 .ifc-bio { font-size: var(--text-body); line-height: 1.65; } .typography-v2 .gap-deeper-sub { font-size: var(--text-body); line-height: 1.55; } .typography-v2 .sr-browse-all-text { font-size: var(--text-body); line-height: 1.55; } .typography-v2 .ic-p, .typography-v2 .comment-body, .typography-v2 .d-block-text { font-size: var(--text-body); line-height: 1.65; } /* Mono → Sans family change for prose-shaped content (per pruning targets in the brief). One rule per group, size + family + lh together. */ .typography-v2 .attest-desc, .typography-v2 .vc-desc, .typography-v2 .finder-toggle-sub, .typography-v2 .np-cell-label { font-size: var(--text-body); font-family: var(--sans); line-height: 1.55; } /* Form inputs — bring text to body baseline (also avoids iOS zoom-on-focus). */ .typography-v2 .finder-radio, .typography-v2 .finder-textarea, .typography-v2 .finder-combo-input, .typography-v2 .modal-input, .typography-v2 .gap-volume-row input[type=number], .typography-v2 .gap-field input[type=text], .typography-v2 .gap-field textarea, .typography-v2 .gap-field select, .typography-v2 .search-input { font-size: var(--text-body); } /* ── STEP -1 — SMALL UI (13px sans 500-600 lh 1.45) ──────────── */ .typography-v2 .modal-note { font-size: var(--text-small); line-height: 1.5; } .typography-v2 .hint, .typography-v2 .share-toast { font-size: var(--text-small); } .typography-v2 .nav-link, .typography-v2 .nav-ghost, .typography-v2 .nav-primary, .typography-v2 .user-chip { font-size: var(--text-small); line-height: 1.45; } .typography-v2 .btn, .typography-v2 .btn-sm, .typography-v2 .btn-primary, .typography-v2 .btn-secondary, .typography-v2 .search-btn { font-size: var(--text-small); line-height: 1.45; } .typography-v2 .sr-r-action-h, .typography-v2 .gap-cta-h { font-size: var(--text-small); line-height: 1.3; } .typography-v2 .sr-refine-chip { font-size: var(--text-small); line-height: 1.4; } .typography-v2 .sr-r-tool { font-size: var(--text-small); } .typography-v2 .wc-num, .typography-v2 .wc-num-sub, .typography-v2 .wc-cat, .typography-v2 .wc-run { font-size: var(--text-small); } /* Fractional cleanups → 13 (Anomaly 4 for non-prose-shaped uses). */ .typography-v2 .sr-finder-active-vals, .typography-v2 .sr-browse-all-finder, .typography-v2 .sr-finder-invite-btn-inline { font-size: var(--text-small); } /* ── STEP -2 — EYEBROW / MICRO-LABEL (11px mono 600 lh 1.4) ──── Mono kept here — these are uppercase labels and counts. 11px > 9/9.5/10/10.5 cases (anomaly cleanup); mono needs +1 over sans for equivalent legibility. */ .typography-v2 .sr-r-class, .typography-v2 .sr-r-class-type, .typography-v2 .sr-r-class-detail-high, .typography-v2 .sr-r-class-detail-medium, .typography-v2 .sr-r-class-detail-low, .typography-v2 .sr-r-class-evidence, .typography-v2 .sr-r-class-steps, .typography-v2 .wc-class { font-size: var(--text-micro); line-height: 1.4; } .typography-v2 .sr-r-meta, .typography-v2 .sr-r-stat-l, .typography-v2 .sr-r-action-sub, .typography-v2 .sr-r-bestfor-label, .typography-v2 .wc-bestfor-label, .typography-v2 .sr-r-why-label { font-size: var(--text-micro); line-height: 1.4; } .typography-v2 .hero-credo, .typography-v2 .sr-methodology, .typography-v2 .sr-tail-divider-text { font-size: var(--text-micro); line-height: 1.4; } .typography-v2 .sr-refine-label, .typography-v2 .sr-refine-h, .typography-v2 .sr-refine-hint, .typography-v2 .sr-refine-clear, .typography-v2 .sr-refine-count { font-size: var(--text-micro); line-height: 1.4; } .typography-v2 .sr-finder-active-lbl, .typography-v2 .sr-extracted-lbl { font-size: var(--text-micro); line-height: 1.4; } .typography-v2 .cap-cat, .typography-v2 .cap-tool-tag, .typography-v2 .cap-badge, .typography-v2 .cap-pilot-status, .typography-v2 .vc-tier-e, .typography-v2 .vc-tier-g, .typography-v2 .vc-tier-s, .typography-v2 .gap-compare-mini, .typography-v2 .gap-optional, .typography-v2 .showcase-teaser-badge { font-size: var(--text-micro); line-height: 1.4; } .typography-v2 .section-eyebrow, .typography-v2 .finder-inline-eyebrow, .typography-v2 .modal-divider { font-size: var(--text-micro); line-height: 1.4; } .typography-v2 .np-label, .typography-v2 .d-block-label, .typography-v2 .dt-label, .typography-v2 .pub-stat, .typography-v2 .rep-label, .typography-v2 .pub-rep, .typography-v2 .pub-linkedin-badge { font-size: var(--text-micro); line-height: 1.4; } .typography-v2 .d-cat, .typography-v2 .showcase-eyebrow { font-size: var(--text-micro); line-height: 1.4; } /* ── STEP +1 — CARD TITLE / LEAD BODY (20px lh 1.4) ──────────── Card titles in serif (Spectral) — brand voice for workflow names. Lead body in sans for hero-sub and form persona titles. */ .typography-v2 .sr-r-title, .typography-v2 .wc-title, .typography-v2 .cap-title { font-size: var(--text-lead); font-family: var(--serif); font-weight: 400; line-height: 1.4; } .typography-v2 .hero-sub { font-size: var(--text-lead); font-family: var(--sans); font-weight: 400; line-height: 1.55; } .typography-v2 .persona-title, .typography-v2 .d-outcome-text { font-size: var(--text-lead); font-family: var(--sans); font-weight: 600; line-height: 1.4; } /* ── STEP +2 — SUB-HEADING (25px serif 400 lh 1.3) ─────────────── */ .typography-v2 .ip-title { font-size: var(--text-subhead); font-family: var(--serif); font-weight: 400; line-height: 1.3; } /* ── STEP +3 — SECTION HEADING (32px sans 700 lh 1.2) ────────── .modal-h had `font-weight:700; font-weight:400` (double declaration, 400 won). v2 declares 700 once — section headings stand up. */ .typography-v2 .modal-h, .typography-v2 .rep-score { font-size: var(--text-section); font-family: var(--sans); font-weight: 700; line-height: 1.2; } .typography-v2 .hstat-n { font-size: var(--text-section); font-family: var(--sans); font-weight: 700; line-height: 1.1; } /* ── STEP +4 — VIEW HEADLINE (40px sans 700 lh 1.1) ────────────── */ .typography-v2 .section-title, .typography-v2 .d-h1, .typography-v2 .showcase-title { font-size: var(--text-headline); font-family: var(--sans); font-weight: 700; line-height: 1.1; } .typography-v2 .p-h { font-size: var(--text-headline); font-family: var(--serif); font-weight: 400; line-height: 1.1; } /* ── STEP +5 — HERO H1 (50px sans 700 lh 1.05) ───────────────── DELIBERATE BRAND-VOICE CHANGE: hero h1 family switches from the hardcoded 'Outfit' (display) family in styles.css to --sans (Inter) per the v2 proposal table — step +5 = --sans. The --display family (Outfit) is reserved for the V-ones brand mark only (.vm-the, .vm-v, .vm-erified, .vm-ones). This is the most prominent text on the page, so the change is consequential — it's intentional per S17 proposal, not an oversight. If the next session decides Inter feels wrong here and wants display-family hero text back, the right move is to widen the family system (e.g. introduce a 'display-secondary' role) rather than diverge the variable's contract case-by-case. */ .typography-v2 .hero h1, .typography-v2 .hero-headline { font-size: var(--text-hero); font-family: var(--sans); font-weight: 700; line-height: 1.05; letter-spacing: -0.5px; } /* ── BRAND DISPLAY (V-ones logo only) ─────────────────────────── Anomaly 1: line-height:126 typo at .vm-v fixed to 1.26. Anomaly 2: 4 hardcoded 'Outfit' switched to var(--display). */ .typography-v2 .vm-the, .typography-v2 .vm-ones { font-family: var(--display); font-size: var(--text-brand-sm); } .typography-v2 .vm-v { font-family: var(--display); font-size: var(--text-brand-lg); line-height: 1.26; } .typography-v2 .vm-erified { font-family: var(--display); font-size: var(--text-brand-xs); } /* ── SOFT WALL — rem→px reconciliation (Anomaly 3) ───────────── styles.css lines 1840-1923 use a rem-based island disconnected from the rest of the file (1.15rem, 1.05rem, 0.95rem, 0.9rem, 0.85rem). Reconcile each to the nearest scale step. Soft-wall heading is a genuine heading so it lifts from ~17px to step +2 (25px). */ .typography-v2 .tv-sw-heading { font-size: var(--text-subhead); font-family: var(--serif); font-weight: 400; line-height: 1.3; } .typography-v2 .tv-sw-body { font-size: var(--text-body); line-height: 1.55; } .typography-v2 .tv-sw-cta, .typography-v2 .tv-sw-secondary, .typography-v2 .tv-sb-text, .typography-v2 .tv-sb-btn, .typography-v2 .tv-sb-small-btn { font-size: var(--text-small); line-height: 1.45; } /* ── MOBILE OVERRIDES (@media max-width: 600px) ───────────────── Body / small / micro unchanged (browser & a11y convention — 16px body avoids iOS zoom-on-focus on inputs). Larger steps compress so headlines don't break narrow viewports. Single declaration redefines the consumer-facing variables; every rule that uses them updates automatically. */ @media (max-width: 600px) { .typography-v2 { --text-lead: 18px; --text-subhead: 21px; --text-section: 25px; --text-headline: 30px; --text-hero: 34px; --text-brand-lg: 90px; --text-brand-sm: 36px; } }