/* ============================================================
TYPOGRAPHY — Karina Zakharash
------------------------------------------------------------
Restrained pairing: 1 serif display + 1 sans body.
All sizes/weights/spacing pulled from tokens.css.
Mobile-first. Selectors use `.ds-*` namespace to coexist with
existing style.css without overriding it.
============================================================ */
/* ---------- 1. FONT LOADING (preconnect + display=swap) ----------
Note: also include these tags in for preload:
*/
/* Belt-and-braces fallback import (used only if missing) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
/* ---------- 2. ROOT SETTINGS (scoped to .ds-typography wrapper) ----------
Apply `.ds-typography` to any container (e.g. , )
to opt into the new system without disrupting global rules.
*/
.ds-typography {
font-family: var(--ds-font-body);
font-size: var(--ds-text-body);
line-height: var(--ds-lh-body);
color: var(--ds-text);
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ---------- 3. DISPLAY & HEADINGS ---------- */
.ds-display {
font-family: var(--ds-font-display);
font-size: var(--ds-text-display);
font-weight: var(--ds-fw-light);
line-height: var(--ds-lh-display);
letter-spacing: var(--ds-tracking-tight);
color: var(--ds-text);
margin: 0;
}
.ds-display em,
.ds-h1 em,
.ds-h2 em {
font-style: italic;
font-weight: var(--ds-fw-regular);
}
.ds-h1,
.ds-typography h1 {
font-family: var(--ds-font-display);
font-size: var(--ds-text-h1);
font-weight: var(--ds-fw-light);
line-height: var(--ds-lh-display);
letter-spacing: var(--ds-tracking-tight);
color: var(--ds-text);
margin: 0 0 var(--ds-space-5);
}
.ds-h2,
.ds-typography h2 {
font-family: var(--ds-font-display);
font-size: var(--ds-text-h2);
font-weight: var(--ds-fw-light);
line-height: var(--ds-lh-heading);
letter-spacing: var(--ds-tracking-tight);
color: var(--ds-text);
margin: 0 0 var(--ds-space-5);
}
.ds-h3,
.ds-typography h3 {
font-family: var(--ds-font-display);
font-size: var(--ds-text-h3);
font-weight: var(--ds-fw-regular);
line-height: var(--ds-lh-heading);
letter-spacing: var(--ds-tracking-normal);
color: var(--ds-text);
margin: 0 0 var(--ds-space-4);
}
.ds-h4,
.ds-typography h4 {
font-family: var(--ds-font-body);
font-size: var(--ds-text-lead);
font-weight: var(--ds-fw-medium);
line-height: var(--ds-lh-snug);
letter-spacing: var(--ds-tracking-wide);
color: var(--ds-text);
margin: 0 0 var(--ds-space-3);
}
.ds-h5,
.ds-typography h5 {
font-family: var(--ds-font-body);
font-size: var(--ds-text-body);
font-weight: var(--ds-fw-medium);
line-height: var(--ds-lh-snug);
letter-spacing: var(--ds-tracking-wide);
color: var(--ds-text);
text-transform: uppercase;
margin: 0 0 var(--ds-space-3);
}
.ds-h6,
.ds-typography h6 {
font-family: var(--ds-font-body);
font-size: var(--ds-text-small);
font-weight: var(--ds-fw-semibold);
line-height: var(--ds-lh-snug);
letter-spacing: var(--ds-tracking-wider);
color: var(--ds-text-muted);
text-transform: uppercase;
margin: 0 0 var(--ds-space-2);
}
/* ---------- 4. BODY, LEAD, CAPTION, MICRO ---------- */
.ds-lead {
font-family: var(--ds-font-body);
font-size: var(--ds-text-lead);
font-weight: var(--ds-fw-light);
line-height: var(--ds-lh-relaxed);
color: var(--ds-text-muted);
margin: 0 0 var(--ds-space-5);
max-width: 56ch;
}
.ds-body,
.ds-typography p {
font-family: var(--ds-font-body);
font-size: var(--ds-text-body);
font-weight: var(--ds-fw-regular);
line-height: var(--ds-lh-body);
color: var(--ds-text);
margin: 0 0 var(--ds-space-4);
max-width: 64ch;
}
.ds-small {
font-size: var(--ds-text-small);
line-height: var(--ds-lh-snug);
color: var(--ds-text-muted);
}
.ds-caption {
font-family: var(--ds-font-body);
font-size: var(--ds-text-caption);
font-weight: var(--ds-fw-regular);
line-height: var(--ds-lh-snug);
letter-spacing: var(--ds-tracking-wide);
color: var(--ds-text-muted);
font-style: italic;
}
.ds-micro {
font-family: var(--ds-font-body);
font-size: var(--ds-text-micro);
font-weight: var(--ds-fw-medium);
letter-spacing: var(--ds-tracking-widest);
text-transform: uppercase;
color: var(--ds-text-subtle);
}
/* Eyebrow label — used above section titles ("FEATURED WORK") */
.ds-eyebrow {
display: inline-block;
font-family: var(--ds-font-body);
font-size: var(--ds-text-micro);
font-weight: var(--ds-fw-medium);
letter-spacing: var(--ds-tracking-eyebrow);
text-transform: uppercase;
color: var(--ds-accent);
margin: 0 0 var(--ds-space-4);
padding: 0 0 var(--ds-space-2);
position: relative;
}
.ds-eyebrow::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 32px;
height: 1px;
background: var(--ds-accent);
}
.ds-eyebrow.ds-eyebrow-center {
display: block;
text-align: center;
}
.ds-eyebrow.ds-eyebrow-center::after {
left: 50%;
transform: translateX(-50%);
}
/* Label — form labels, metadata */
.ds-label {
font-family: var(--ds-font-body);
font-size: var(--ds-text-caption);
font-weight: var(--ds-fw-medium);
letter-spacing: var(--ds-tracking-wider);
text-transform: uppercase;
color: var(--ds-text-muted);
}
/* ---------- 5. ITALIC PAIRS — serif italic accents ---------- */
.ds-italic {
font-style: italic;
font-weight: var(--ds-fw-regular);
}
.ds-serif-italic {
font-family: var(--ds-font-display);
font-style: italic;
font-weight: var(--ds-fw-regular);
}
/* "Karina Zakharash" pattern — name with italic surname */
.ds-name-pair em,
.ds-name-pair .ds-pair {
font-family: var(--ds-font-display);
font-style: italic;
font-weight: var(--ds-fw-regular);
color: var(--ds-accent);
}
/* ---------- 6. DROP-CAP — for biographical / About paragraphs ---------- */
.ds-drop-cap::first-letter {
font-family: var(--ds-font-display);
font-weight: var(--ds-fw-light);
font-size: 4.5em;
line-height: 0.85;
float: left;
margin: 0.05em 0.12em 0 0;
color: var(--ds-accent);
font-style: italic;
}
@supports (initial-letter: 3) {
.ds-drop-cap::first-letter {
font-size: 1em;
-webkit-initial-letter: 3 2;
initial-letter: 3 2;
margin-right: 0.5rem;
}
}
/* ---------- 7. KINETIC TEXT base classes ---------- */
.ds-kinetic {
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: bottom;
}
.ds-kinetic-line {
display: block;
overflow: hidden;
}
.ds-kinetic-word,
.ds-kinetic-char {
display: inline-block;
transform: translateY(105%);
opacity: 0;
transition:
transform var(--ds-dur-slower) var(--ds-ease-luxury),
opacity var(--ds-dur-slow) var(--ds-ease-decelerate);
will-change: transform, opacity;
}
.ds-kinetic.is-revealed .ds-kinetic-word,
.ds-kinetic.is-revealed .ds-kinetic-char {
transform: translateY(0);
opacity: 1;
}
/* Stagger via inline `style="--i: N"` set by JS */
.ds-kinetic .ds-kinetic-word,
.ds-kinetic .ds-kinetic-char {
transition-delay: calc(var(--i, 0) * 40ms);
}
/* Hover float (use sparingly — hero name only) */
.ds-kinetic-float .ds-kinetic-char {
transition: transform var(--ds-dur-slow) var(--ds-ease-luxury);
}
.ds-kinetic-float:hover .ds-kinetic-char {
transform: translateY(calc(-2px * var(--depth, 1)));
}
/* ---------- 8. LINKS & INLINE EMPHASIS ---------- */
.ds-typography a:not(.ds-no-underline) {
color: var(--ds-text);
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: color var(--ds-dur-normal) var(--ds-ease-standard),
background-size var(--ds-dur-slow) var(--ds-ease-luxury);
}
.ds-typography a:not(.ds-no-underline):hover {
color: var(--ds-accent);
background-size: 0 1px;
}
.ds-typography strong { font-weight: var(--ds-fw-semibold); color: var(--ds-text); }
.ds-typography em { font-style: italic; }
.ds-typography blockquote {
font-family: var(--ds-font-display);
font-size: var(--ds-text-h3);
font-weight: var(--ds-fw-light);
font-style: italic;
line-height: var(--ds-lh-snug);
color: var(--ds-text);
margin: var(--ds-space-7) 0;
padding-left: var(--ds-space-5);
border-left: 2px solid var(--ds-accent);
max-width: 60ch;
}
.ds-typography blockquote cite {
display: block;
margin-top: var(--ds-space-3);
font-family: var(--ds-font-body);
font-size: var(--ds-text-caption);
font-style: normal;
letter-spacing: var(--ds-tracking-wider);
text-transform: uppercase;
color: var(--ds-text-muted);
}
/* ---------- 9. UTILITIES ---------- */
.ds-text-balance { text-wrap: balance; }
.ds-text-pretty { text-wrap: pretty; }
.ds-text-center { text-align: center; }
.ds-text-right { text-align: right; }
.ds-text-mute { color: var(--ds-text-muted); }
.ds-text-subtle { color: var(--ds-text-subtle); }
.ds-text-accent { color: var(--ds-accent); }
.ds-text-inverse { color: var(--ds-text-inverse); }
.ds-uppercase { text-transform: uppercase; letter-spacing: var(--ds-tracking-wider); }
.ds-tracked { letter-spacing: var(--ds-tracking-eyebrow); }
.ds-no-underline {
background-image: none;
}