: buttons carry their own
ink, and a bare a:hover (0,1,1) would outrank .btn--primary (0,1,0) and turn
a hovered button's text charcoal — 2.74:1 on terracotta-dark. The exclusion
sits inside :where() so it adds no specificity; a plain :not(.btn) would
lift these rules above every single-class link override (.brand, .skip-link,
.play-badge). */
:where(a:not(.btn)) {
color: var(--colour-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
transition: color var(--transition-fast),
text-decoration-color var(--transition-fast);
}
:where(a:not(.btn)):hover {
color: var(--colour-link-hover);
text-decoration-thickness: 2px;
}
/* Links inside the footer or any dark band. Terracotta on charcoal is only
3.86:1, so it is not allowed here — cream at 14.74:1 is. */
.on-dark :where(a:not(.btn)) {
color: var(--colour-text-inverse);
}
.on-dark :where(a:not(.btn)):hover {
color: var(--colour-text-inverse-muted);
}
/* ============================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
min-height: var(--control-min-height);
padding: var(--space-m) var(--space-xl);
border: 0;
border-radius: var(--radius-button);
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: var(--weight-bold);
line-height: 1;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: filter var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
/* Terracotta-dark, not terracotta. White on #C4622D is 4.09:1 and fails AA;
white on #A04F22 is 5.78:1 and passes. */
.btn--primary {
background-color: var(--colour-button-primary);
color: var(--colour-button-primary-ink);
}
/* Hover darkens rather than lightens, so contrast only ever improves —
brightness(0.93) takes white-on-fill from 5.78:1 to 6.46:1. This is a render
effect on an existing token, not a new colour. */
.btn--primary:hover { filter: brightness(0.93); }
.btn--secondary {
background-color: var(--colour-button-secondary);
color: var(--colour-button-secondary-ink);
}
.btn--secondary:hover { filter: brightness(0.96); }
.btn:active { transform: translateY(1px); }
.btn[disabled],
.btn[aria-disabled='true'] {
opacity: 0.5;
cursor: not-allowed;
filter: none;
transform: none;
}
/* ============================================================================
Focus — keyboard only, never removed
========================================================================== */
:focus-visible {
outline: 3px solid var(--colour-focus-ring);
outline-offset: 2px;
}
/* Rounds the ring on plain text links. Deliberately not on the universal rule
above: a border-radius there outranks .btn's own and reshapes a button from
16px to 8px corners the moment it takes keyboard focus. */
:where(a:not(.btn)):focus-visible { border-radius: var(--radius-s); }
/* The offset gap shows the page ground, so the ring is measured against cream
at 14.74:1 rather than against the control it surrounds. */
.on-dark :focus-visible {
outline-color: var(--colour-focus-ring-inverse);
}
/* Mouse users do not get a ring, but :focus-visible handles that on its own —
so nothing here suppresses :focus for browsers that lack it. */
/* Skip link — visible the moment it takes focus. */
.skip-link {
position: absolute;
top: var(--space-xs);
left: var(--space-xs);
z-index: 100;
padding: var(--space-s) var(--space-m);
background-color: var(--colour-charcoal);
color: var(--colour-text-inverse);
border-radius: var(--radius-s);
text-decoration: none;
transform: translateY(-200%);
}
.skip-link:focus-visible { transform: translateY(0); }
/* ============================================================================
Layout utilities
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--hero { padding-block: var(--section-y-hero); }
.section--alt { background-color: var(--colour-page-alt); }
.section--accent { background-color: var(--colour-page-accent); }
.section--dark {
background-color: var(--colour-footer);
color: var(--colour-text-inverse);
}
.card {
background-color: var(--colour-card);
border-radius: var(--radius-card);
padding: var(--space-l);
box-shadow: var(--shadow-card);
/* Deliberately no border. Tonal contrast separates the card from the ground —
the app's STYLE.md rule 1. */
}
/* A white card on a white band would vanish, so it steps down a tone instead. */
.section--alt .card { background-color: var(--colour-card-on-alt); }
.eyebrow {
font-size: var(--text-eyebrow);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--colour-text-muted);
}
/* Bold variant for a tag or flag that labels a block rather than introduces one. */
.eyebrow--strong { font-weight: var(--weight-bold); }
.text-muted { color: var(--colour-text-muted); }
/* Escape hatch for the measure cap on , e.g. a centred hero standfirst
that is already constrained by its container. */
.u-measure-none { max-width: none; }
/* Grid and flex children default to min-width:auto, which is the usual cause of
a page that scrolls sideways on a narrow phone. */
.u-min-width-0 { min-width: 0; }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ============================================================================
Reduced motion
========================================================================== */
@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;
scroll-behavior: auto !important;
}
}