/* ============================================================================
KRUSH ORGANICS — PLATINUM PDP — TYPOGRAPHY
----------------------------------------------------------------------------
Concrete classes for every type role. Pure CSS, no preprocessor.
Import order: tokens.css → THIS FILE → components.css → motion.css
PRINCIPLE: sentence case is the default. ALL CAPS is reserved for eyebrows
and badge text only. The current Krush homepage shouts in CAPS — we are
deliberately dialling that down to lift perceived premium tier (per the
benchmarks vs Seed, JSHealth).
============================================================================ */
/* ----------------------------------------------------------------------------
FONT LOAD HINT
----------------------------------------------------------------------------
The build subagent MUST include this in :
---------------------------------------------------------------------------- */
/* ============================================================================
DISPLAY — hero headline ONLY. One per page.
============================================================================ */
.t-display {
font-family: var(--font-display);
font-weight: var(--weight-regular); /* 400 — brand-verified */
font-size: var(--text-display);
line-height: var(--leading-display);
letter-spacing: var(--tracking-display);
color: var(--color-text-high);
margin: 0;
text-wrap: balance; /* prevents widows in display */
}
/* ============================================================================
HEADINGS
---------------------------------------------------------------------------- */
.t-h1, h1.t-h1 {
font-family: var(--font-display);
font-weight: var(--weight-regular); /* 400 */
font-size: var(--text-h1);
line-height: var(--leading-h1);
letter-spacing: var(--tracking-h1);
color: var(--color-text-high);
margin: 0;
text-wrap: balance;
}
.t-h2, h2.t-h2 {
font-family: var(--font-display);
font-weight: var(--weight-regular); /* 400 */
font-size: var(--text-h2);
line-height: var(--leading-h2);
letter-spacing: var(--tracking-h2);
color: var(--color-text-high);
margin: 0;
text-wrap: balance;
}
.t-h3, h3.t-h3 {
font-family: var(--font-display);
font-weight: var(--weight-semibold); /* 600 — brand-verified */
font-size: var(--text-h3);
line-height: var(--leading-h3);
letter-spacing: var(--tracking-h3);
color: var(--color-text-high);
margin: 0;
text-wrap: balance;
}
.t-h4, h4.t-h4 {
font-family: var(--font-display);
font-weight: var(--weight-semibold); /* 600 */
font-size: var(--text-h4);
line-height: var(--leading-h4);
letter-spacing: var(--tracking-h4);
color: var(--color-text-high);
margin: 0;
}
/* H5 + H6 — same family, smaller sizes. Rarely needed on a PDP. */
.t-h5 {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: var(--text-body);
line-height: 1.4;
letter-spacing: -0.005em;
color: var(--color-text-high);
margin: 0;
}
.t-h6 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--text-small);
line-height: 1.4;
letter-spacing: 0;
color: var(--color-text-high);
margin: 0;
}
/* ============================================================================
BODY VARIANTS
============================================================================ */
.t-lead {
font-family: var(--font-body);
font-weight: var(--weight-light); /* 300 */
font-size: var(--text-lead);
line-height: var(--leading-lead);
letter-spacing: 0;
color: var(--color-text-body);
margin: 0;
text-wrap: pretty;
}
.t-body, p.t-body {
font-family: var(--font-body);
font-weight: var(--weight-light); /* 300 — brand fingerprint */
font-size: var(--text-body);
line-height: var(--leading-body);
letter-spacing: var(--tracking-body);
color: var(--color-text-body);
margin: 0;
text-wrap: pretty;
}
.t-body-strong {
font-family: var(--font-body);
font-weight: var(--weight-semibold); /* 600 */
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-text-high);
margin: 0;
}
.t-small {
font-family: var(--font-body);
font-weight: var(--weight-light);
font-size: var(--text-small);
line-height: var(--leading-small);
letter-spacing: var(--tracking-small);
color: var(--color-text-mid);
margin: 0;
}
.t-micro {
font-family: var(--font-body);
font-weight: var(--weight-regular); /* 400 — micro needs a touch more weight */
font-size: var(--text-micro);
line-height: var(--leading-micro);
letter-spacing: var(--tracking-micro);
color: var(--color-text-mid);
margin: 0;
}
/* ============================================================================
EYEBROW — short ALL-CAPS section label above an H2.
Use sparingly. ONE eyebrow per section, max.
============================================================================ */
.t-eyebrow {
font-family: var(--font-body);
font-weight: var(--weight-eyebrow); /* 700 */
font-size: var(--text-eyebrow);
line-height: var(--leading-eyebrow);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-brand-green); /* default — brand-accent eyebrow */
margin: 0 0 var(--space-3);
display: inline-block;
}
.t-eyebrow--platinum { color: var(--color-platinum-500); }
.t-eyebrow--ink { color: var(--color-text-high); }
.t-eyebrow--inverse { color: var(--color-platinum-200); }
/* Eyebrow with leading rule (Hyro-style) — for hero / statement sections */
.t-eyebrow--ruled {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.t-eyebrow--ruled::before {
content: '';
display: inline-block;
width: 24px;
height: 1px;
background: currentColor;
opacity: 0.6;
}
/* ============================================================================
BLOCKQUOTE — for testimonials / founder quotes
============================================================================ */
.t-blockquote {
font-family: var(--font-display);
font-weight: var(--weight-regular);
font-size: var(--text-h3);
line-height: 1.35;
letter-spacing: -0.012em;
color: var(--color-text-high);
margin: 0;
font-style: normal; /* Poppins italic is weak — skip it */
}
.t-blockquote::before {
content: '“';
display: block;
font-size: 1.3em;
line-height: 0.6;
color: var(--color-brand-green);
opacity: 0.5;
margin-bottom: var(--space-3);
}
.t-blockquote-cite {
display: block;
margin-top: var(--space-5);
font-family: var(--font-body);
font-weight: var(--weight-semibold);
font-size: var(--text-small);
letter-spacing: 0.02em;
color: var(--color-text-mid);
text-transform: uppercase;
}
/* ============================================================================
LISTS
============================================================================ */
.t-list {
font-family: var(--font-body);
font-weight: var(--weight-light);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-text-body);
list-style: none;
padding: 0;
margin: 0;
}
.t-list > li {
position: relative;
padding-left: 1.75rem;
margin-bottom: var(--space-3);
}
.t-list > li::before {
content: '';
position: absolute;
left: 0;
top: 0.7em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-brand-green);
}
.t-list > li:last-child { margin-bottom: 0; }
/* Checkmark list — for benefits / comparison */
.t-list--check > li::before {
content: '';
position: absolute;
left: 0;
top: 0.45em;
width: 16px;
height: 16px;
background-color: var(--color-brand-green);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
border-radius: 0;
padding-left: 0;
}
/* Numbered list — for "how it works" sequences */
.t-list--numbered {
counter-reset: stepcount;
}
.t-list--numbered > li {
counter-increment: stepcount;
padding-left: 3rem;
}
.t-list--numbered > li::before {
content: counter(stepcount, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
width: auto;
height: auto;
background: none;
border-radius: 0;
font-family: var(--font-display);
font-weight: var(--weight-regular);
font-size: 1.25rem;
line-height: 1.4;
color: var(--color-platinum-500);
letter-spacing: 0.04em;
}
/* ============================================================================
LINKS
============================================================================ */
.t-link, a.t-link {
color: var(--color-text-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(104, 158, 72, 0.4);
transition: color var(--duration-fast) var(--ease-default),
text-decoration-color var(--duration-fast) var(--ease-default);
}
.t-link:hover {
color: var(--color-text-link-hover);
text-decoration-color: currentColor;
}
.t-link:focus-visible {
outline: 2px solid var(--color-brand-green);
outline-offset: 3px;
border-radius: 2px;
}
/* ============================================================================
UTILITY MODIFIERS
============================================================================ */
/* Text balance — for headings and short copy blocks */
.t-balance { text-wrap: balance; }
.t-pretty { text-wrap: pretty; }
.t-nowrap { white-space: nowrap; }
/* Color overrides */
.t-color-high { color: var(--color-text-high); }
.t-color-body { color: var(--color-text-body); }
.t-color-mid { color: var(--color-text-mid); }
.t-color-low { color: var(--color-text-low); }
.t-color-inverse { color: var(--color-text-inverse); }
.t-color-brand { color: var(--color-brand-green); }
.t-color-platinum { color: var(--color-platinum-500); }
/* Alignment */
.t-left { text-align: left; }
.t-center { text-align: center; }
.t-right { text-align: right; }
/* Tracking utilities — tightens display sizes above 32px (already baked into
t-display/h1/h2, but exposed for one-off overrides) */
.t-tight { letter-spacing: -0.02em; }
.t-tighter { letter-spacing: -0.03em; }
.t-wide { letter-spacing: 0.05em; }
.t-wider { letter-spacing: 0.1em; }
.t-widest { letter-spacing: 0.14em; }
/* Weight overrides */
.t-w-light { font-weight: var(--weight-light); }
.t-w-regular { font-weight: var(--weight-regular); }
.t-w-semibold { font-weight: var(--weight-semibold); }
.t-w-bold { font-weight: var(--weight-bold); }
/* Case */
.t-upper { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); }
.t-sentence { text-transform: none; }
/* Tabular figures — for prices, statistics, COA dates */
.t-tabular { font-variant-numeric: tabular-nums; }
/* Truncation */
.t-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.t-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.t-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Prose container — anchor for long-form body copy (FAQ, story sections) */
.t-prose {
max-width: var(--container-prose);
}
.t-prose > * + * {
margin-top: var(--space-4);
}
.t-prose > h2 + *, .t-prose > h3 + * {
margin-top: var(--space-3);
}
.t-prose > * + h2 {
margin-top: var(--space-10);
}
.t-prose > * + h3 {
margin-top: var(--space-8);
}
/* ============================================================================
DROP CAPS — for editorial story moment (§5 "Most people…" hook).
Use sparingly. One per page maximum.
============================================================================ */
.t-dropcap::first-letter {
float: left;
font-family: var(--font-display);
font-weight: var(--weight-regular);
font-size: 4.5em;
line-height: 0.85;
margin: 0.05em 0.12em 0 0;
color: var(--color-brand-green);
letter-spacing: -0.03em;
}
/* ============================================================================
PRICE TYPOGRAPHY — opinionated, used in buy-box and tier cards.
============================================================================ */
.t-price {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: var(--text-h2);
line-height: 1;
letter-spacing: -0.025em;
color: var(--color-text-high);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.t-price__currency {
font-size: 0.55em;
font-weight: var(--weight-regular);
color: var(--color-text-mid);
margin-right: 2px;
}
.t-price__strike {
font-size: 0.55em;
font-weight: var(--weight-light);
color: var(--color-text-low);
text-decoration: line-through;
margin-left: var(--space-2);
align-self: baseline;
}
.t-price__per {
font-size: 0.45em;
font-weight: var(--weight-light);
color: var(--color-text-mid);
margin-left: var(--space-2);
letter-spacing: 0.02em;
}