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;
|
|||
|
|
}
|