/* Run DNA — colors_and_type.css
* Tokens derived from the official Figma reskin (HOME PAGE — RESKIN – DESKTOP, LANDING PAGE,
* App Store Presence 2, RunDNA Footer, Email templates). Numbers preserved verbatim.
*/
/* ── Type stack: DM Sans + Fraunces (hosted via Google Fonts) ──────────
* Decimal (Monotype) was the brand intent, but we are not self-hosting
* the font files. DM Sans is the documented free substitute (geometric
* grotesque, closest open-source match to Decimal). Fraunces stands in
* for Quarto on the editorial pull-quote variant.
* Note: + tags should
* also be added to each page for first-paint performance — the
* @import below is the no-build-step safety net.
*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,700&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,700;1,9..144,500;1,9..144,700&display=swap");
:root {
/* ── Core palette (Figma exact RGB) ──────────────────────────────── */
--rd-ink: rgb(37, 41, 48); /* #252930 — primary dark */
--rd-ink-2: rgb(27, 36, 43); /* #1B242B — deeper bg */
--rd-ink-3: rgb(37, 40, 47); /* #25282F — alt dark */
--rd-bone: rgb(247, 247, 247); /* #F7F7F7 — page bg + on-dark text */
--rd-white: #ffffff;
--rd-black: #000000;
/* Accent gradient stops — the brand "DNA" mark uses these */
--rd-amber: rgb(252, 175, 23); /* #FCAF17 */
--rd-amber-2: rgb(255, 180, 5); /* #FFB405 — alt amber */
--rd-yellow: rgb(255, 221, 0); /* #FFDD00 — pure cadmium */
--rd-coral: rgb(255, 102, 107); /* #FF666B */
--rd-crimson: rgb(241, 91, 108); /* #F15B6C */
/* Neutrals */
--rd-mute: rgb(125, 133, 139); /* #7D858B — subtitle / form line */
--rd-rule: rgb(217, 217, 217); /* #D9D9D9 — dividers */
/* Shadow tokens (rgba — Figma drop shadows) */
--rd-shadow-soft: rgba(37, 41, 49, 0.33);
--rd-shadow-25: rgba(0, 0, 0, 0.25);
--rd-shadow-33: rgba(0, 0, 0, 0.33);
/* ── Signature gradients ─────────────────────────────────────────── */
--rd-grad-mark: linear-gradient(180deg, var(--rd-amber) 0%, var(--rd-crimson) 100%);
--rd-grad-mark-alt: linear-gradient(180deg, var(--rd-amber-2) 0%, var(--rd-coral) 100%);
--rd-grad-card: linear-gradient(180deg, var(--rd-yellow) 0%, var(--rd-coral) 100%);
--rd-grad-radial: radial-gradient(circle, var(--rd-amber) 33%, var(--rd-coral) 100%);
/* ── Semantic colors ─────────────────────────────────────────────── */
--color-bg: var(--rd-bone);
--color-bg-dark: var(--rd-ink);
--color-fg: var(--rd-ink);
--color-fg-on-dark: var(--rd-bone);
--color-fg-mute: var(--rd-mute); /* on light */
--color-fg-mute-dark: rgba(247, 247, 247, 0.66); /* on dark — opacity:0.66 in Figma */
--color-rule: var(--rd-rule);
--color-accent: var(--rd-coral);
--color-accent-warm: var(--rd-amber);
/* ── Type families ───────────────────────────────────────────────── */
--font-display: "Decimal", "DM Sans", system-ui, -apple-system, sans-serif;
--font-body: "Decimal", "DM Sans", system-ui, -apple-system, sans-serif;
--font-editorial:"Quarto", "Fraunces", Georgia, "Times New Roman", serif;
--font-fallback: Arial, Helvetica, sans-serif; /* Figma uses Arial Bold in a few buttons */
/* ── Type weights (from Figma usage) ─────────────────────────────── */
--w-book: 400;
--w-medium: 500; /* the workhorse */
--w-semibold: 600;
--w-bold: 700;
/* ── Letter-spacing rhythm ───────────────────────────────────────── */
/* Headlines & body: -0.030em (tight). Buttons / labels: 0.090em (wide caps). */
--ls-tight: -0.030em;
--ls-wide: 0.090em;
--ls-wide-sm: 0.060em;
/* ── Type scale — px values come straight from Figma ─────────────── */
--fs-display-xl: 96px; /* "Run Better" hero */
--fs-display-l: 60px; /* landing hero */
--fs-display-m: 54px; /* mobile hero */
--fs-h1: 45px; /* "Helping Runners…" */
--fs-h2: 36px; /* card titles, editorial pull-quote */
--fs-h3: 27px; /* hero subtitle desktop */
--fs-eyebrow: 21px; /* wide-tracked labels */
--fs-body-l: 24px;
--fs-body: 18px; /* default running copy */
--fs-body-s: 16px; /* button text, form labels */
--fs-caption: 15px;
--fs-tiny: 12px;
/* ── Radii (Figma values) ────────────────────────────────────────── */
--r-card: 27px; /* hero/feature cards & community panel */
--r-pill: 34.5px; /* buttons (inner) */
--r-cta: 121px; /* large CTA pill */
--r-nav: 55.25px;/* floating nav bar */
--r-circle: 9999px;
/* ── Spacing ─────────────────────────────────────────────────────── */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--sp-9: 96px; --sp-10: 128px;
/* ── Elevation ───────────────────────────────────────────────────── */
--sh-nav: 3px 3px 6px 3px var(--rd-shadow-soft);
--sh-card: 0px 4px 4px 0px var(--rd-shadow-25);
--sh-pop: 6px 6px 6px 3px var(--rd-shadow-33);
}
/* ── Semantic type roles ───────────────────────────────────────────── */
.rd-display-xl,
.rd-h0 {
font-family: var(--font-display);
font-weight: var(--w-medium);
font-size: var(--fs-display-xl);
line-height: 100%;
letter-spacing: var(--ls-tight);
}
.rd-h1 {
font-family: var(--font-display);
font-weight: var(--w-medium);
font-size: var(--fs-h1);
line-height: 100%;
letter-spacing: var(--ls-tight);
}
.rd-h2 {
font-family: var(--font-display);
font-weight: var(--w-medium);
font-size: var(--fs-h2);
line-height: 100%;
letter-spacing: var(--ls-tight);
}
.rd-h3 {
font-family: var(--font-display);
font-weight: var(--w-medium);
font-size: var(--fs-h3);
line-height: 1.45;
letter-spacing: var(--ls-tight);
}
.rd-eyebrow {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--fs-eyebrow);
line-height: 39px;
letter-spacing: var(--ls-wide);
text-transform: lowercase; /* Figma uses lowercase here, e.g. "find a specialist" */
}
.rd-eyebrow-caps {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--fs-eyebrow);
line-height: 1.85;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
.rd-body { font-family: var(--font-body); font-weight: var(--w-medium); font-size: var(--fs-body); line-height: 30px; letter-spacing: var(--ls-tight); }
.rd-body-l { font-family: var(--font-body); font-weight: var(--w-medium); font-size: var(--fs-body-l); line-height: 36px; letter-spacing: var(--ls-tight); }
.rd-body-s { font-family: var(--font-body); font-weight: var(--w-medium); font-size: var(--fs-body-s); line-height: 21px; letter-spacing: var(--ls-wide); }
.rd-pull-quote {
font-family: var(--font-editorial);
font-weight: var(--w-medium);
font-size: var(--fs-h2);
line-height: 1.35;
font-style: normal;
}
.rd-pull-quote-italic {
font-family: var(--font-editorial);
font-weight: var(--w-bold);
font-style: italic;
font-size: var(--fs-h2);
line-height: 39px;
letter-spacing: var(--ls-wide);
}
/* ── Helpers ───────────────────────────────────────────────────────── */
.rd-on-dark { color: var(--color-fg-on-dark); }
.rd-on-dark-mute { color: var(--color-fg-on-dark); opacity: 0.66; }
.rd-on-light { color: var(--color-fg); }
.rd-on-light-mute { color: var(--color-fg); opacity: 0.66; }
/* ── Responsive layout utilities ───────────────────────────────────── */
/* Section inner padding — section itself must be container-type:inline-size */
.rd-section-pad {
padding: 88px 72px;
box-sizing: border-box;
}
/* Section h2 — scales with container width via cqi */
.rd-section-h2 {
margin: 0;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(32px, 5.5cqi, 64px);
line-height: 1.05;
letter-spacing: -0.030em;
}
/* Hero display text */
.rd-display-hero {
font-weight: 500;
line-height: 0.96;
letter-spacing: -0.030em;
font-size: clamp(44px, 8.5cqi, 104px);
}
.rd-display-compact {
font-weight: 500;
line-height: 1;
letter-spacing: -0.030em;
font-size: clamp(32px, 7cqi, 72px);
}
/* Hero content positioning block — hero outer div must be container-type:inline-size */
.rd-hero-content-lg {
position: absolute;
left: 72px;
right: 72px;
bottom: 96px;
display: flex;
flex-direction: column;
gap: 36px;
max-width: 920px;
}
.rd-hero-content-sm {
position: absolute;
left: 72px;
right: 72px;
bottom: 80px;
display: flex;
flex-direction: column;
gap: 28px;
max-width: 760px;
}
/* Two-column section grid (EventDetails) */
.rd-grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
/* 2×2 metadata sub-grid (EventDetails right column) */
.rd-grid-meta {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 40px;
column-gap: 32px;
padding-top: 36px;
}
/* RSVP two-column grid */
.rd-grid-rsvp {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 96px;
align-items: start;
}
/* Footer four-column grid */
.rd-grid-footer {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 56px;
align-items: start;
}
/* Nav items — hidden on narrow containers */
.rd-nav-links {
display: flex;
gap: 28px;
justify-content: center;
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rd-ink);
font-weight: 700;
}
.rd-nav-location {
display: flex;
align-items: center;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
height: 28px;
}
/* CTA button row — stacks to full-width columns on mobile */
.rd-cta-row {
display: flex;
gap: 14px;
}
/* ── Container query breakpoints ───────────────────────────────────── */
/* Landing pill wrapper — left tracks the hero content gutter */
.rd-pill-wrapper {
position: absolute; top: 36px; left: 72px;
z-index: 5; height: 76px;
display: flex; align-items: center;
}
/* Landing pill — swap desktop ↔ mobile asset via parent container width */
.rd-pill-desktop { display: block; height: 76px; width: auto; }
.rd-pill-mobile { display: none; height: 64px; width: auto; }
@container (max-width: 680px) {
.rd-pill-wrapper { left: 24px; }
.rd-pill-desktop { display: none; }
.rd-pill-mobile { display: block; }
}
@container (max-width: 680px) {
.rd-section-pad { padding: 48px 24px; }
.rd-grid-2col { grid-template-columns: 1fr; gap: 40px; }
.rd-grid-meta { grid-template-columns: 1fr; row-gap: 28px; padding-top: 0; }
.rd-grid-rsvp { grid-template-columns: 1fr; gap: 40px; }
.rd-grid-footer { grid-template-columns: 1fr 1fr; gap: 24px; }
.rd-hero-content-lg { left: 24px; right: 24px; bottom: 96px; gap: 24px; }
.rd-hero-content-sm { left: 24px; right: 24px; bottom: 64px; gap: 20px; }
.rd-nav-links { display: none; }
.rd-nav-location { display: none; }
.rd-cta-row { flex-direction: column; }
.rd-cta-row > * { width: 100%; box-sizing: border-box; }
}
@container (max-width: 420px) {
.rd-grid-footer { grid-template-columns: 1fr; gap: 32px; }
}