/* ============================================================================
ReadyForce — design tokens (prototyping drop-in)
Mirrors apps/cms/src/app/(frontend)/globals.css. Plain CSS custom properties +
canonical base typography, so it works in any HTML prototype (no Tailwind
required). Pair with DESIGN.md.
FONTS — two steps before this file looks right:
1. Neue Haas Grotesk Text (body/UI/h2–h4): add to :
(Adobe kit is domain-allowlisted — if it doesn't load, the fallback stack
below renders cleanly. Upright weights 400 + 500 only.)
2. GT America Condensed (h1 + stat numerals): licensed, NOT on a CDN. Upload
the woff2 files and uncomment the @font-face block below. Without them, h1
falls back to Arial Narrow (a provisional stand-in, not the brand face).
============================================================================ */
/* --- GT America Condensed (Bold 700 + Bold-Italic only). Bold is the brand h1
weight; the app uses Bold (700) only — deliberately NOT Black (900). ------ */
@font-face { font-family: "GT America Condensed"; font-weight: 700; font-style: normal; font-display: swap;
src: url("assets/fonts/GT-America-Condensed-Bold.woff2") format("woff2"); }
@font-face { font-family: "GT America Condensed"; font-weight: 700; font-style: italic; font-display: swap;
src: url("assets/fonts/GT-America-Condensed-Bold-Italic.woff2") format("woff2"); }
:root {
/* ── Color (the 5 brand colors + white, plus derived utility values) ─────── */
--ink: #111822; /* "Black" — primary text on light; hero/statement surfaces */
--red: #e10d18; /* Ready Red — primary action, headline emphasis, CTA panels */
--red-light: #f5333d; /* lightened red — icons/graphics/underlines ON INK only */
--grey: #989796; /* Light Grey — surface/border on light; text on ink only */
--cobalt: #282889; /* Cobalt Blue — sparing secondary accent */
--paper: #f1f1ef; /* warm off-white — quiet alternate surface */
--white: #ffffff;
--background: var(--white);
--foreground: var(--ink);
--muted-foreground: #4a5260; /* secondary body text on light (brand grey fails AA as text) */
--border: #e4e4e1; /* hairline dividers / card borders on light */
--destructive: #a61b12; /* error — distinct from Ready Red */
/* ── Type families ───────────────────────────────────────────────────────── */
--font-display: "GT America Condensed", "Arial Narrow", Arial, sans-serif;
--font-sans: "neue-haas-grotesk-text", "Helvetica Neue", Arial, system-ui, sans-serif;
/* ── Display type scale (clamp min/max land on px divisible by 4) ─────────── */
--text-display: clamp(3.5rem, 8vw, 7rem); /* h1: 56 → 112 */
--text-display-xl: 8.75rem; /* h1 ≥1280px: 140px (fixed) */
--text-display-sm: clamp(2.75rem, 5.5vw, 4.75rem); /* h2: 44 → 76 */
--text-title: clamp(2.25rem, 3.5vw, 3.25rem); /* utility display: 36 → 52 */
--text-title-sm: clamp(1.5rem, 2.25vw, 2rem); /* h3: 24 → 32 */
--tracking-eyebrow: 0.18em;
/* ── Spacing / layout ──────────────────────────────────────────────────────
px-gutter and py-section are media-query-driven — see the utility classes
below (custom properties can't carry breakpoints). */
--container-page: 1320px; /* rare centered exception — sections are full-bleed by default */
--radius: 0; /* SQUARE everywhere; the ONE exception is buttons (4px) */
--radius-button: 4px;
/* ── Motion ──────────────────────────────────────────────────────────────── */
--ease-brand: cubic-bezier(0.4, 0, 0.2, 1);
--duration-ui: 200ms;
}
/* ── Base typography — canonical tags, styled once (do not restyle per-block) ── */
html { scroll-behavior: smooth; }
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
font-weight: 400;
margin: 0;
}
h1, h2, h3 { font-family: var(--font-sans); font-weight: 500; text-wrap: balance; margin: 0; }
/* h1 = GT America Condensed Bold, UPPERCASE — hero only, one per page */
h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-display);
line-height: 0.92;
letter-spacing: -0.01em;
text-transform: uppercase;
}
@media (min-width: 1280px) { h1 { font-size: var(--text-display-xl); } }
h2 { font-size: calc(var(--text-display-sm) - 4px); line-height: 1.12; letter-spacing: -0.005em; }
h3 { font-size: 44px; line-height: 1.2; font-weight: 400; }
@media (min-width: 1280px) { h3 { font-size: 48px; } }
h4 { font-family: var(--font-sans); font-weight: 500; font-size: 1.25rem; line-height: 1.3; margin: 0; }
p {
font-size: 1.125rem; /* 18px body (matches stat descriptions) */
line-height: 1.65;
max-width: 65ch; /* readable measure; override to none for labels/captions */
margin: 0;
}
/* Eyebrow / overline — always a , never a heading */
.eyebrow {
font-size: 0.875rem; /* 14px */
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
color: var(--red); /* on ink surfaces use var(--grey) instead */
}
/* Lead paragraph — opt-in 18px step up */
.lead { font-size: 1.125rem; line-height: 1.6; }
/* ── Buttons — Ready Red fill, the one element with a radius ──────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--red);
color: var(--white);
border: none;
border-radius: var(--radius-button); /* 4px */
padding: 0.875rem 1.5rem;
font-family: var(--font-sans);
font-weight: 500;
font-size: 0.8125rem; /* 13px */
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
transition: background var(--duration-ui) var(--ease-brand), transform 150ms var(--ease-brand);
}
.btn:active { transform: scale(0.98); }
/* ── Layout utilities — the breakpoint-driven gutter + section rhythm ──────── */
.px-gutter { padding-inline: 1.5rem; } /* 24px (<768) */
@media (min-width: 768px) { .px-gutter { padding-inline: 2rem; } } /* 32px */
@media (min-width: 1441px) { .px-gutter { padding-inline: 4rem; } } /* 64px (>1440) */
.py-section { padding-block: 5rem; } /* 80px */
@media (min-width: 768px) { .py-section { padding-block: 8rem; } } /* 128px */
@media (min-width: 1280px) { .py-section { padding-block: 10rem; } } /* 160px */
.py-section-sm { padding-block: 3rem; } /* 48px */
@media (min-width: 768px) { .py-section-sm { padding-block: 4.5rem; } } /* 72px */
@media (min-width: 1280px) { .py-section-sm { padding-block: 6rem; } } /* 96px */
/* 12-column grid: gap 16px mobile → 32px at ≥1024px. Mobile stacks (1 col). */
.grid-12 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .grid-12 { grid-template-columns: repeat(12, 1fr); } }
@media (min-width: 1024px) { .grid-12 { gap: 2rem; } }
/* Surfaces */
.surface-ink { background: var(--ink); color: var(--white); }
.surface-red { background: var(--red); color: var(--white); }
.surface-paper { background: var(--paper); color: var(--ink); }
/* Reduced motion — honor the user preference (enforced in the real app) */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ── Hero + nav load-in ───────────────────────────────────────────────────────
The initial-hidden state lives here (a
stylesheet) so it is applied
BEFORE the first paint — without this, the headline paints at full opacity for
one frame before the animation's opacity:0 kicks in (a white flash). */
@keyframes rfIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rf-header .wordmark,
.rf-header .navlink,
.rf-header .nav-right > *,
[data-screen-label="Hero"] .c9 > * {
opacity: 0;
animation: rfIn 0.6s cubic-bezier(.2,.6,.2,1) forwards;
}
.rf-header .wordmark { animation-delay: .05s; }
.rf-header .navlink:nth-child(1) { animation-delay: .12s; }
.rf-header .navlink:nth-child(2) { animation-delay: .18s; }
.rf-header .navlink:nth-child(3) { animation-delay: .24s; }
.rf-header .navlink:nth-child(4) { animation-delay: .30s; }
.rf-header .nav-right > *:nth-child(1) { animation-delay: .20s; }
.rf-header .nav-right > *:nth-child(2) { animation-delay: .26s; }
.rf-header .nav-right > *:nth-child(3) { animation-delay: .32s; }
[data-screen-label="Hero"] .c9 > *:nth-child(1) { animation-delay: .34s; }
[data-screen-label="Hero"] .c9 > *:nth-child(2) { animation-delay: .46s; }
[data-screen-label="Hero"] .c9 > *:nth-child(3) { animation-delay: .58s; }
/* reduced motion: skip the entrance entirely, show immediately */
@media (prefers-reduced-motion: reduce) {
.rf-header .wordmark,
.rf-header .navlink,
.rf-header .nav-right > *,
[data-screen-label="Hero"] .c9 > * { opacity: 1 !important; animation: none !important; }
}