/* AtomicCTF — Theme: POSTER
* Direction 2 from Retro Directions exploration.
* Big Shoulders Display (display) + Archivo (body) + DM Mono (meta).
*
* USAGE
* -----
* 1. Load the fonts (Google Fonts):
*
*
*
*
* 2. Load the brand color tokens (colors_and_type.css) BEFORE this file.
*
* 3. Load this file, then activate by setting an attribute on or :
*
*
* Slice 8G — selectors namespaced as data-brand-theme so they don't
* collide with the SPA's user-appearance data-theme attribute used
* for light/dark (core/atomic-dark). Site-wide brand voice picks
* poster vs eames; user appearance picks core vs atomic-dark.
*
* Or scope it under any container if you want side-by-side previews.
*
* Voice: travel poster / WPA / "VISIT YOSEMITE" — bold, capitalized, declarative.
* Best for: marketing pages, hero blocks, big-impact moments.
*/
[data-brand-theme="poster"] {
/* Font families */
--font-display: "Big Shoulders Display", "Anton", "Arial Black", sans-serif;
--font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
--font-mono: "DM Mono", ui-monospace, "SF Mono", monospace;
--font-stencil: "Special Elite", "Courier New", monospace;
/* Type scale tweaks for poster voice */
--t-h1-size: 120px;
--t-h1-weight: 900;
--t-h1-line: 0.85;
--t-h1-tracking: 0.005em;
--t-h1-transform: uppercase;
--t-h2-size: 56px;
--t-h2-weight: 800;
--t-h2-line: 0.9;
--t-h2-tracking: 0.005em;
--t-h2-transform: uppercase;
--t-h3-size: 34px;
--t-h3-weight: 800;
--t-h3-line: 0.95;
--t-h3-tracking: 0.01em;
--t-h3-transform: uppercase;
--t-body-size: 15px;
--t-body-weight: 400;
--t-body-line: 1.55;
--t-meta-size: 11px;
--t-meta-tracking: 0.04em;
--t-meta-transform: uppercase;
--t-eyebrow-size: 11px;
--t-eyebrow-tracking: 0.24em;
--t-eyebrow-transform: uppercase;
font-family: var(--font-sans);
}
[data-brand-theme="poster"] h1,
[data-brand-theme="poster"] .h1 {
font-family: var(--font-display);
font-weight: var(--t-h1-weight);
font-size: var(--t-h1-size);
line-height: var(--t-h1-line);
letter-spacing: var(--t-h1-tracking);
text-transform: var(--t-h1-transform);
color: var(--ac-midnight);
margin: 0;
}
[data-brand-theme="poster"] h2,
[data-brand-theme="poster"] .h2 {
font-family: var(--font-display);
font-weight: var(--t-h2-weight);
font-size: var(--t-h2-size);
line-height: var(--t-h2-line);
letter-spacing: var(--t-h2-tracking);
text-transform: var(--t-h2-transform);
color: var(--ac-midnight);
margin: 0;
}
[data-brand-theme="poster"] h3,
[data-brand-theme="poster"] .h3 {
font-family: var(--font-display);
font-weight: var(--t-h3-weight);
font-size: var(--t-h3-size);
line-height: var(--t-h3-line);
letter-spacing: var(--t-h3-tracking);
text-transform: var(--t-h3-transform);
color: var(--ac-midnight);
}
[data-brand-theme="poster"] p,
[data-brand-theme="poster"] .body {
font-family: var(--font-sans);
font-size: var(--t-body-size);
font-weight: var(--t-body-weight);
line-height: var(--t-body-line);
color: var(--fg);
}
[data-brand-theme="poster"] .meta {
font-family: var(--font-mono);
font-size: var(--t-meta-size);
letter-spacing: var(--t-meta-tracking);
text-transform: var(--t-meta-transform);
color: var(--fg-muted);
}
[data-brand-theme="poster"] .eyebrow {
font-family: var(--font-stencil);
font-size: var(--t-eyebrow-size);
letter-spacing: var(--t-eyebrow-tracking);
text-transform: var(--t-eyebrow-transform);
color: var(--accent);
}
/* Big numeric callouts (e.g. flag counts, scores) — poster voice loves these */
[data-brand-theme="poster"] .num,
[data-brand-theme="poster"] .stat-num {
font-family: var(--font-display);
font-weight: 900;
font-size: 96px;
line-height: 0.85;
color: var(--ac-orange);
}