/* ============================================================================
3SIXTY — Typography
Playfair Display (display/headings) + Manrope (UI/body)
Load fonts in :
============================================================================ */
/* --- Base reset for type --------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-normal);
font-weight: var(--weight-regular);
color: var(--text-primary);
background: var(--surface-canvas);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* --- Display & headings (Playfair Display) --------------------------------- */
.ds-display,
.ds-h1, .ds-h2, .ds-h3 {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
color: var(--text-primary);
margin: 0;
}
.ds-display {
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
font-weight: var(--weight-bold);
}
.ds-h1 {
font-size: var(--fs-h1);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
}
.ds-h2 {
font-size: var(--fs-h2);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
}
.ds-h3 {
font-size: var(--fs-h3);
line-height: var(--lh-snug);
}
/* Optional italic for an elegant editorial accent (Playfair shines here) */
.ds-display--italic,
.ds-h1--italic { font-style: italic; font-weight: var(--weight-medium); }
/* --- Sub-headings, body, support (Manrope) --------------------------------- */
.ds-subhead {
font-family: var(--font-sans);
font-size: var(--fs-subhead);
line-height: var(--lh-snug);
font-weight: var(--weight-medium);
color: var(--text-secondary);
}
.ds-body-lg {
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
}
.ds-body {
font-size: var(--fs-body);
line-height: var(--lh-normal);
}
.ds-small {
font-size: var(--fs-small);
line-height: var(--lh-normal);
color: var(--text-secondary);
}
.ds-caption {
font-size: var(--fs-caption);
line-height: var(--lh-normal);
color: var(--text-muted);
}
/* --- Eyebrow / micro-label (uppercase, tracked — echoes the logo lockup) --- */
.ds-eyebrow {
font-family: var(--font-sans);
font-size: var(--fs-small);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--text-brand);
}
/* --- Gilded text: metallic gold gradient (for hero accents, the brand name) */
.ds-gilded {
background: linear-gradient(
100deg,
var(--gold-grad-dark) 0%,
var(--gold-grad-light) 45%,
var(--gold-grad-mid) 75%,
var(--gold-grad-dark) 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* --- Helpers --------------------------------------------------------------- */
.ds-measure { max-width: 65ch; } /* readable line length */
.ds-text-secondary { color: var(--text-secondary); }
.ds-text-muted { color: var(--text-muted); }
.ds-text-brand { color: var(--text-brand); }
.ds-on-inverse { color: var(--text-on-inverse); }
.ds-balance { text-wrap: balance; } /* tidy heading line breaks */