Bradley Nelson
83 lines
2.2 KiB
CSS
83 lines
2.2 KiB
CSS
/* ============================================================
|
||
* Typography utilities — Fase 0 foundations.
|
||
*
|
||
* Semantic heading roles DECOUPLED from element level, so any
|
||
* h1–h6 can carry the correct visual weight while the document
|
||
* keeps a correct, accessible heading order. All values route
|
||
* through the type/leading/weight/tracking tokens in variables.css.
|
||
*
|
||
* Views are migrated onto these classes in Fase 1 (replacing the
|
||
* per-page raw font-size/weight headings the audit flagged).
|
||
* ============================================================ */
|
||
|
||
/* Page title — one per page (the h1 role). */
|
||
.heading-page {
|
||
font-size: var(--text-2xl);
|
||
line-height: var(--leading-tight);
|
||
font-weight: var(--weight-bold);
|
||
letter-spacing: var(--tracking-tight);
|
||
color: var(--color-text-heading);
|
||
}
|
||
|
||
/* Section heading. */
|
||
.heading-section {
|
||
font-size: var(--text-xl);
|
||
line-height: var(--leading-snug);
|
||
font-weight: var(--weight-semibold);
|
||
letter-spacing: var(--tracking-tight);
|
||
color: var(--color-text-heading);
|
||
}
|
||
|
||
/* Card / panel heading. */
|
||
.heading-card {
|
||
font-size: var(--text-md);
|
||
line-height: var(--leading-snug);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--color-text-heading);
|
||
}
|
||
|
||
/* Eyebrow / overline label (uppercase caps with tracking). */
|
||
.heading-eyebrow {
|
||
font-size: var(--text-xs);
|
||
line-height: var(--leading-normal);
|
||
font-weight: var(--weight-semibold);
|
||
letter-spacing: var(--tracking-widest);
|
||
text-transform: uppercase;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
/* Constrain running text to a comfortable measure (~65ch). */
|
||
.prose {
|
||
max-width: var(--measure-prose);
|
||
}
|
||
|
||
/* Headings wrap with balanced line lengths (no single orphan word). */
|
||
h1,
|
||
h2,
|
||
h3,
|
||
.heading-page,
|
||
.heading-section,
|
||
.heading-card,
|
||
.page-title {
|
||
text-wrap: balance;
|
||
}
|
||
|
||
/* Running prose wraps "pretty" (avoids orphans and short last lines). */
|
||
.prose,
|
||
.empty-state p,
|
||
.about-description,
|
||
.auth-subtitle,
|
||
.auth-hint,
|
||
.language-subtitle {
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
/* Tabular figures for numeric UI so digits align and don't jitter as they
|
||
change (storage readouts, badges, stat counters). */
|
||
.storage-info,
|
||
.user-menu-storage-text,
|
||
.notif-badge,
|
||
.stat-value {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|