/* =============================================================================
TekFocus — typography.css
Web-font loading and applied type styles.
Families (locked):
Fraunces display serif — headings, hero, pull quotes
IBM Plex Sans body — paragraphs, UI, navigation
IBM Plex Mono operational — eyebrows, section markers (01 /), labels,
metadata, the "terminal" accent layer
========================================================================== */
/* -----------------------------------------------------------------------------
1. Font loading
-----------------------------------------------------------------------------
@import keeps this stylesheet self-contained. For the production build it is
FASTER to move font loading into the HTML so it is not blocked behind
the CSS request — add these to the page (and drop the @import below):
`display=swap` keeps text visible during load (no FOIT) — helps LCP and CLS.
Weights are intentionally limited to the four sans / four serif / three mono
the design system actually uses; add weights here only when a token needs one.
Loaded from the page (see partials/head.html) so the font request is
not blocked behind this stylesheet. The former @import is intentionally gone.
-------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
2. Heading defaults
-------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-optical-sizing: auto; /* drive Fraunces opsz axis from font-size */
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-heading);
text-wrap: balance;
}
h1 {
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
}
h2 {
font-size: var(--text-2xl);
line-height: var(--leading-snug);
}
h3 {
font-size: var(--text-xl);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
}
h4 {
font-size: var(--text-lg);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
}
h5 {
font-size: var(--text-md);
letter-spacing: var(--tracking-normal);
}
h6 {
font-size: var(--text-base);
letter-spacing: var(--tracking-normal);
}
p {
font-size: var(--text-base);
line-height: var(--leading-normal);
}
strong,
b {
font-weight: var(--weight-semibold);
}
small {
font-size: var(--text-sm);
}
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
/* -----------------------------------------------------------------------------
3. Display type utilities
-----------------------------------------------------------------------------
Detached from heading levels so semantic order (one
per page, correct
hierarchy) is never compromised for visual size. Style with a class; choose
the tag for meaning.
-------------------------------------------------------------------------- */
.text-display {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-optical-sizing: auto;
font-size: var(--text-4xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-heading);
text-wrap: balance;
}
.text-display--lead {
/* Hero headline: Fraunces at its most expressive optical size. */
font-weight: var(--weight-bold);
}
.text-title {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-optical-sizing: auto;
font-size: var(--text-3xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-heading);
}
.text-heading {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: var(--text-2xl);
line-height: var(--leading-snug);
color: var(--color-heading);
}
.text-subheading {
font-family: var(--font-display);
font-weight: var(--weight-medium);
font-size: var(--text-xl);
line-height: var(--leading-snug);
color: var(--color-heading);
}
/* Size-only helpers (do not change family/weight). */
.text-xs {
font-size: var(--text-xs);
}
.text-sm {
font-size: var(--text-sm);
}
.text-base {
font-size: var(--text-base);
}
.text-md {
font-size: var(--text-md);
}
.text-lg {
font-size: var(--text-lg);
}
.text-xl {
font-size: var(--text-xl);
}
/* -----------------------------------------------------------------------------
4. Body / lead / muted text
-------------------------------------------------------------------------- */
.lead {
font-size: var(--text-md);
line-height: var(--leading-normal);
color: var(--color-text-muted);
max-inline-size: var(--measure);
text-wrap: pretty;
}
.text-body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
}
.text-muted {
color: var(--color-text-muted);
}
.text-faint {
color: var(--color-text-faint);
}
.text-on-inverse {
color: var(--color-text-on-inverse);
}
/* -----------------------------------------------------------------------------
5. Operational / monospace layer
-----------------------------------------------------------------------------
The IBM Plex Mono accent layer is core to the brand's terminal aesthetic:
eyebrows above headings, section markers (01 /), metadata, and small labels.
The .eyebrow / .section-marker components live in components.css; these are
the raw type treatments they build on.
-------------------------------------------------------------------------- */
.text-mono {
font-family: var(--font-mono);
font-feature-settings: "kern", "calt";
}
/* Eyebrow: small uppercase mono label that sits above a heading. */
.text-eyebrow {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--color-text-muted);
}
/* Small all-caps label — wider tracking, used for tags and meta rows. */
.text-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--color-text-faint);
}
/* -----------------------------------------------------------------------------
6. Quotes
-------------------------------------------------------------------------- */
.text-quote {
font-family: var(--font-display);
font-weight: var(--weight-medium);
font-size: var(--text-xl);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
color: var(--color-heading);
text-wrap: balance;
}
/* -----------------------------------------------------------------------------
7. Inline & alignment helpers
-------------------------------------------------------------------------- */
.text-balance {
text-wrap: balance;
}
.text-pretty {
text-wrap: pretty;
}
.text-nowrap {
white-space: nowrap;
}
.text-center {
text-align: center;
}
.text-start {
text-align: start;
}
.text-end {
text-align: end;
}
.font-regular {
font-weight: var(--weight-regular);
}
.font-medium {
font-weight: var(--weight-medium);
}
.font-semibold {
font-weight: var(--weight-semibold);
}
.font-bold {
font-weight: var(--weight-bold);
}
.color-accent {
color: var(--color-accent);
}
.color-brand {
color: var(--color-brand);
}
/* -----------------------------------------------------------------------------
8. Prose — long-form content blocks (.prose)
-----------------------------------------------------------------------------
Wrap converted final-copy markdown in
to get sensible
vertical rhythm and a comfortable reading measure without per-element classes.
-------------------------------------------------------------------------- */
.prose {
max-inline-size: var(--measure);
color: var(--color-text);
}
.prose > * + * {
margin-block-start: var(--space-md);
}
.prose h2 {
margin-block-start: var(--space-2xl);
margin-block-end: var(--space-sm);
}
.prose h3 {
margin-block-start: var(--space-xl);
margin-block-end: var(--space-xs);
}
.prose h4 {
margin-block-start: var(--space-lg);
margin-block-end: var(--space-2xs);
}
/* First heading should not push a big gap at the top of the column. */
.prose > :is(h2, h3, h4):first-child {
margin-block-start: 0;
}
.prose p,
.prose li {
line-height: var(--leading-relaxed);
}
.prose ul,
.prose ol {
padding-inline-start: 1.5em;
}
.prose li + li {
margin-block-start: var(--space-2xs);
}
.prose blockquote {
margin-block: var(--space-lg);
padding-inline-start: var(--space-md);
border-inline-start: var(--border-width-thick) solid var(--color-accent);
color: var(--color-text-muted);
font-style: italic;
}
.prose a {
text-underline-offset: 0.2em;
}
.prose :is(h2, h3, h4) {
color: var(--color-heading);
}