/* ==========================================================================
JJ's Friends — Design Tokens & Base Styles
Source of truth: ../../../content-reference.md (reconstructed from client
brief + mockups — no original CSS was provided).
========================================================================== */
/* --------------------------------------------------------------------------
1. Fonts
Loaded via Google Fonts tags in each page's — not self-hosted,
not @import'd here. Every page must include, in this order:
Archivo is a single variable family (wght + wdth axes). "Expanded" and
"Condensed" from the brief's type scale are NOT separate font-family
names — they're produced with font-stretch on this same family. Google's
hosted CSS may not expose the full wdth range through font-stretch in
every browser; if a page renders Archivo labels/headlines visibly
un-stretched, treat that as a font-loading gap to flag, not something to
silently fall back past into the sans-serif stack below.
Hard rule (CLAUDE.md): never let a system-font fallback stand in for
either face without flagging it. The stacks below exist for the brief
render-blocking gap only, not as a silent substitute.
-------------------------------------------------------------------------- */
:root {
--font-display: 'Archivo', 'Arial Narrow', sans-serif;
--font-body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
--font-stretch-expanded: 125%;
--font-stretch-condensed: 75%;
}
/* --------------------------------------------------------------------------
2. Raw palette
Colorado flag, one job each per the brief. Do not reference these raw
variables directly outside this file — consume the semantic tokens in
section 3 instead, so usage stays tied to the role a color is allowed to
play rather than the value itself.
-------------------------------------------------------------------------- */
:root {
--raw-navy: #002868; /* Foundation */
--raw-white: #FFFFFF; /* Air */
--raw-red: #BF0A30; /* Action */
--raw-gold: #FFC600; /* Arrival */
}
/* --------------------------------------------------------------------------
3. Semantic tokens
This is the enforcement layer for the one hard color rule in the brief:
gold never appears on a light background (~1.6:1 contrast, fails AA/AAA).
Gold-on-navy (~9:1) is the only sanctioned use.
Deliberately absent: any "--color-accent-on-light" token. If a future
page seems to need gold against white, there is nothing to reach for —
that gap is intentional, not an oversight.
-------------------------------------------------------------------------- */
:root {
/* Section backgrounds — alternate white/navy down the page */
--color-bg-light: var(--raw-white);
--color-bg-dark: var(--raw-navy);
/* Text — navy is default on light sections, white on dark sections */
--color-text-on-light: var(--raw-navy);
--color-text-on-dark: var(--raw-white);
/* Interactive — red only. "If it's red, it's clickable." */
--color-interactive: var(--raw-red);
--color-interactive-hover: #99081F; /* hand-darkened ~15% for hover/active state */
/* Accent — gold, navy-context only */
--color-accent-on-dark: var(--raw-gold);
/* Borders / dividers, matched to whichever text color is active */
--color-border-on-light: var(--raw-navy);
--color-border-on-dark: var(--raw-white);
}
/* --------------------------------------------------------------------------
4. Type scale
Base 18px, ratio 1.25, per the brief. Hero/H1 clamp down for mobile per
the brief's explicit mobile values (hero→40, H1→32); body never shrinks
below 18. Line-height and label tracking are not given explicit values
in the brief — reasonable working values, not sourced from it.
-------------------------------------------------------------------------- */
:root {
--text-hero: clamp(2.5rem, 4vw + 1.5rem, 4rem); /* 40px → 64px */
--text-h1: clamp(2rem, 3vw + 1.25rem, 2.75rem); /* 32px → 44px */
--text-h2: 2rem; /* 32px, sentence case */
--text-h3: 1.5rem; /* 24px, sentence case */
--text-lead: 1.25rem; /* 20px */
--text-body: 1.125rem; /* 18px — floor for body copy, does not shrink */
--text-caption: 1rem; /* 16px */
--text-label: 0.875rem; /* 14px — floor for the whole type scale */
/* Line-height — not specified in the brief; tighter for display faces
set in all-caps/short bursts, roomier for body copy read at length. */
--leading-display: 1.1;
--leading-body: 1.5;
/* Label tracking — the one explicit spec given ("+8% tracking") */
--tracking-label: 0.08em;
}
/* --------------------------------------------------------------------------
5. Reset
Minimal — just enough to make box-sizing predictable and remove
default UA spacing/list styling before base element styles apply.
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
}
ul[class],
ol[class] {
list-style: none;
padding: 0;
margin: 0;
}
img,
picture,
svg {
display: block;
max-width: 100%;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
6. Base element styles
Spacing scale is not specified in the brief — an 8px-based scale chosen
to comfortably cover the proportions implied across mockups (tight card
padding up through full section padding), not a value pulled from any
source document.
-------------------------------------------------------------------------- */
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px */
--space-10: 8rem; /* 128px */
--content-max-width: 72rem; /* 1152px — comfortable line-length ceiling for full-bleed sections */
}
body {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-text-on-light);
background-color: var(--color-bg-light);
}
h1, h2, h3 {
font-family: var(--font-display);
line-height: var(--leading-display);
font-weight: 700;
}
h1 {
font-size: var(--text-h1);
text-transform: uppercase;
font-stretch: var(--font-stretch-expanded);
}
h2 {
font-size: var(--text-h2);
}
h3 {
font-size: var(--text-h3);
}
p {
font-size: var(--text-body);
}
/* All-caps labels — per the brief, caps are reserved for labels, never
full sentences. This class is opt-in; headings above are the only
elements that get uppercase by default (h1/hero display treatment). */
.label {
font-family: var(--font-display);
font-stretch: var(--font-stretch-condensed);
font-size: var(--text-label);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
}
a {
color: var(--color-interactive);
}
a:hover {
color: var(--color-interactive-hover);
}
/* Visible, non-color-only focus state — required across the whole build
per the accessibility pass, so it belongs at the base layer rather than
being left to individual components to remember. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--color-interactive);
outline-offset: 2px;
}
strong, b {
font-weight: 700;
}
/* Bold for emphasis, never italic, per the brief — reset UA italic
defaults on em/i so the rule can't be broken by accident. */
em, i {
font-style: normal;
font-weight: 700;
}
/* Skip link — first focusable element on every page, hidden until it
receives focus. Not one of the seven named components; a baseline
accessibility primitive that's needed as soon as real page markup
(nav + main landmark) exists, added here while building index.html. */
.skip-link {
position: absolute;
left: var(--space-3);
top: -100%;
background-color: var(--color-bg-dark);
color: var(--color-text-on-dark);
padding: var(--space-3) var(--space-4);
z-index: 100;
transition: top 0.15s ease;
}
.skip-link:focus {
top: var(--space-3);
}