/*
* PLATINUM TYPOGRAPHY SYSTEM — Component 7
* ============================================================
* Complete type scale for premium local-service brands.
* Industry-agnostic. No external dependencies (system-ui
* stack as fallback). Works with or without Google Fonts.
*
* FONT STACK
* ----------
* Display/serif: Fraunces (if loaded) → Georgia → serif
* Best for: headlines, pull quotes, display text
* Feel: warm, authoritative, editorial
*
* Body/sans: IBM Plex Sans (if loaded) → system-ui → sans-serif
* Best for: body text, UI labels, navigation
* Feel: clean, legible, professional
*
* Mono: IBM Plex Mono (if loaded) → ui-monospace → monospace
* Best for: code, data, precision labels
*
* To load fonts (paste in ):
*
*
*
*
* TYPE SCALE
* ----------
* display — hero headlines, major impact moments
* h1 — page title
* h2 — section titles
* h3 — card/subsection titles
* h4 — minor section heads
* body — main reading text
* body-sm — secondary text, descriptions
* caption — labels, metadata, timestamps
* eyebrow — uppercase category labels above headings
* pull-quote — large italic quotes for emotional emphasis
* ============================================================
*/
/* ---- Font stacks -------------------------------------------------------- */
:root {
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
}
/* ---- Base document -------------------------------------------------------- */
html {
font-size: 16px; /* 1rem = 16px */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: 1rem; /* 16px */
line-height: 1.65;
color: #12171C;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ---- Display (hero, landing impact) ------------------------------------- */
.pt-type-display {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
line-height: 1.0;
font-weight: 700;
letter-spacing: -0.01em;
color: #12171C;
}
/* ---- H1 ----------------------------------------------------------------- */
h1,
.pt-type-h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
line-height: 1.05;
font-weight: 600;
letter-spacing: -0.005em;
color: #12171C;
margin: 0 0 20px;
}
/* ---- H2 ----------------------------------------------------------------- */
h2,
.pt-type-h2 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.5vw + 0.5rem, 2.6rem);
line-height: 1.1;
font-weight: 600;
color: #12171C;
margin: 0 0 16px;
}
/* ---- H3 ----------------------------------------------------------------- */
h3,
.pt-type-h3 {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.2vw + 0.5rem, 1.4rem);
line-height: 1.25;
font-weight: 600;
color: #12171C;
margin: 0 0 12px;
}
/* ---- H4 ----------------------------------------------------------------- */
h4,
.pt-type-h4 {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.35;
font-weight: 700;
letter-spacing: 0.005em;
color: #12171C;
margin: 0 0 10px;
}
/* ---- Body --------------------------------------------------------------- */
p,
.pt-type-body {
font-family: var(--font-body);
font-size: 1rem; /* 16px */
line-height: 1.65;
color: #4C5C68;
margin: 0 0 16px;
}
/* Remove bottom margin on last-child paragraphs */
p:last-child { margin-bottom: 0; }
/* ---- Body small --------------------------------------------------------- */
.pt-type-body-sm {
font-size: 0.9rem; /* 14.4px */
line-height: 1.6;
color: #4C5C68;
}
/* ---- Caption ------------------------------------------------------------ */
.pt-type-caption,
figcaption {
font-family: var(--font-body);
font-size: 0.8rem; /* 12.8px */
line-height: 1.5;
color: #6B7A87;
letter-spacing: 0.01em;
}
/* ---- Eyebrow (uppercase category label above headings) ------------------ */
.pt-eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 0.75rem; /* 12px */
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #C8841A;
margin-bottom: 10px;
}
/* ---- Pull quote --------------------------------------------------------- */
.pt-pull-quote {
font-family: var(--font-display);
font-size: clamp(1rem, 1.2vw + 0.5rem, 1.35rem);
font-style: italic;
line-height: 1.55;
color: #12171C;
border-left: 3px solid #C8841A;
padding: 16px 24px;
margin: 32px 0;
}
.pt-pull-quote footer {
display: block;
font-size: 0.8rem;
font-style: normal;
font-weight: 600;
letter-spacing: 0.05em;
color: #4C5C68;
margin-top: 12px;
}
/* ---- Stat number (large, display face) ---------------------------------- */
.pt-type-stat {
font-family: var(--font-display);
font-size: clamp(2rem, 3vw, 3rem);
font-weight: 700;
color: #12171C;
line-height: 1;
display: block;
}
/* ---- Monospace ---------------------------------------------------------- */
code,
kbd,
samp,
pre,
.pt-type-mono {
font-family: var(--font-mono);
font-size: 0.875em;
}
/* ---- Link styles -------------------------------------------------------- */
a {
color: #C8841A;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
a:hover { color: #B6720F; }
/* ---- Prose container (long-form reading) -------------------------------- */
.pt-prose {
max-width: 68ch;
line-height: 1.75;
}
.pt-prose h2 { margin-top: 48px; }
.pt-prose h3 { margin-top: 36px; }
.pt-prose p { margin-bottom: 20px; }
.pt-prose ul,
.pt-prose ol {
margin-bottom: 20px;
padding-left: 24px;
line-height: 1.7;
}
.pt-prose li { margin-bottom: 8px; }
/* ---- Dark surface overrides -------------------------------------------- */
.pt-surface--dark h1,
.pt-surface--dark h2,
.pt-surface--dark h3,
.pt-surface--dark h4,
.pt-surface--dark .pt-type-h1,
.pt-surface--dark .pt-type-h2,
.pt-surface--dark .pt-type-h3,
.pt-surface--dark .pt-type-stat {
color: #EEF1F0;
}
.pt-surface--dark p,
.pt-surface--dark .pt-type-body,
.pt-surface--dark .pt-type-body-sm {
color: rgba(238,241,240,0.75);
}
/* ---- Accessible text — minimum sizes ------------------------------------ */
/* Never go below 14px (0.875rem) for any reading text */
/* Caption minimum: 12px (0.75rem) — only for non-essential metadata */
/* ---- Responsive type adjustments ---------------------------------------- */
@media (max-width: 480px) {
body { font-size: 0.9375rem; } /* 15px on small screens */
.pt-prose { line-height: 1.7; }
}