/* * Platform Typography Primitive * * Brief: docs/briefs/platform-typography-1F-002.md * Backlog: closure-backlog #63 * * Owns h1-h4 typography (family, weight, line-height, letter-spacing, * sizing, vertical rhythm) and tabular numerals on data surfaces. * h5 and h6 retain default browser sizing (out of scope per Decision 2). * * Variant scoping driven by [data-typography] on . Default * "product" matches the larger view set; marketing views opt in via * @{ ViewData["Typography"] = "marketing"; } in the consuming view. * * Existing scoped overrides (.legal-document h1/h2/h3, .wiz h1, * .metrics h2) remain in product CSS; their selector specificity (0,1,1) * wins over this primitive's element-level rules inside their wrappers. */ /* ── Custom-property contract ──────────────────────────────────────── */ :root { --platform-font-display: 'Cormorant Garamond', Georgia, serif; --platform-font-body: 'DM Sans', system-ui, sans-serif; --platform-h1-size: clamp(2.6rem, 7vw, 5.5rem); --platform-h2-size: clamp(2rem, 4.5vw, 3.5rem); --platform-space-h1-top: 2.5rem; --platform-space-h2-top: 2rem; --platform-space-h3-top: 1.5rem; --platform-space-h4-top: 1.25rem; --platform-space-p-top: 1rem; } /* Product variant: tighter top-spacing on h1 / h2 (Decision 5). h3 / h4 / p spacing is universal across variants. */ [data-typography="product"] { --platform-h1-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); --platform-h2-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); --platform-space-h1-top: 1.875rem; --platform-space-h2-top: 1.5rem; } /* ── Body ──────────────────────────────────────────────────────────── */ body { font-family: var(--platform-font-body); line-height: 1.6; } /* ── Headings — family, weight, vertical-rhythm convention ─────────── */ /* Margin-top owns the gap between adjacent blocks (Decision 5); margin-bottom: 0 enforces that the next element's margin-top is the sole spacing contributor. */ h1, h2, h3, h4 { font-family: var(--platform-font-display); font-weight: 600; margin-bottom: 0; } /* Line-heights by role (Decision 5). */ h1, h2, h3 { line-height: 1.2; } h4 { line-height: 1.3; } /* Letter-spacing — h1 only, codified from marketing (Decision 7). */ h1 { font-size: var(--platform-h1-size); letter-spacing: -0.01em; } h2 { font-size: var(--platform-h2-size); } /* ── Heading sizes — h3 and h4 are universal across variants ───────── */ h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); } h4 { font-size: 1.125rem; } [data-typography="product"] h1, [data-typography="product"] h2, [data-typography="product"] h3, [data-typography="product"] h4 { color: rgb(0, 40, 104); } /* ── Margin-top by heading level (Decision 5) ──────────────────────── */ h1 { margin-top: var(--platform-space-h1-top); } h2 { margin-top: var(--platform-space-h2-top); } h3 { margin-top: var(--platform-space-h3-top); } h4 { margin-top: var(--platform-space-h4-top); } p { margin-top: var(--platform-space-p-top); } /* First-child reset — first heading or paragraph in its parent has no top gap (Decision 5). */ h1:first-child, h2:first-child, h3:first-child, h4:first-child, p:first-child { margin-top: 0; } /* ── Tabular numerals (Decision 6) ─────────────────────────────────── */ td, th, .tabular, .money { font-variant-numeric: tabular-nums; line-height: 1.4; }