/* * Design tokens — Carnival of the Commons * Source: Figma Style Guide (node 10:800), confirmed 21 May 2026. * * Font files: place .woff2 files in assets/fonts/ per the instructions there. * Buttons: not yet designed in Figma — styles are provisional pending Web basics frame. */ /* ── Font loading ───────────────────────────────────────────────────────── */ /* * Circus Heavy — local woff2/woff (assets/fonts/). * Besley — Google Fonts (loaded via enqueue.php in WP; prototype link). */ @font-face { font-family: 'Circus Heavy'; /* v2: patched to add parenleft/parenright (synthesized) + ellipsis (period×3 composite); the shipped font mapped those to empty 0-contour glyphs. ?v= busts the font cache. */ src: url('../fonts/circus-heavy.woff2?v=2') format('woff2'), url('../fonts/circus-heavy.woff?v=2') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* * Citrus Gothic — condensed display face with an imperfect ink/letterpress texture * baked into the glyphs. A third display voice for headlines and callouts, alongside * Circus Heavy. Uses CitrusGothic-Regular (the cut with the ink texture Olly wants). */ @font-face { font-family: 'Citrus Gothic'; src: url('../fonts/CitrusGothic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Citrus Gothic'; src: url('../fonts/CitrusGothic-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* ── Brand palette — primary ────────────────────────────────────────── */ --color-fluoro-green: #EAFF1E; /* Fluoro Green */ --color-fire-songs: #FE7F2D; /* Fire Songs */ --color-pink-velvet: #FC086A; /* Pink Velvet — AA-checked for CTAs */ --color-pink-velvet-br: #FF3385; /* Pink Velvet bright — fluoro card stock (Figma var, 14 Jun) */ --color-night-ink: #233D4D; /* Night Ink */ /* ── Brand palette — secondary (darker) ────────────────────────────── */ --color-fluoro-green-dk: #9AAB00; --color-fire-songs-dk: #D25401; --color-pink-velvet-dk: #B40249; --color-night-ink-dk: #15252E; /* ── Semantic color assignments ─────────────────────────────────────── */ /* * Background: Night Ink dark — the deepest colour, near-black navy. * Surface: Night Ink — for cards, panels, alternate sections. * Text: warm off-white — not in the brand palette (inferred for dark bg). * Accent: Pink Velvet — highest visual energy, used for primary CTAs. * White text on Pink Velvet: contrast ~4.8:1 (AA large text / UI components). * Pink Velvet is NOT safe for body-size text on dark bg — use for headings * and buttons (white text on pink) only. * Highlight: Fluoro Green — 14:1 contrast on bg, safe for any text size. */ --color-bg: var(--color-night-ink-dk); /* #15252E */ --color-surface: var(--color-night-ink); /* #233D4D */ --color-surface-alt: #1C303C; /* midpoint, for hover states */ --color-text-primary: #F5F0E0; /* warm off-white */ --color-text-secondary: #9DAFBA; /* muted blue-grey */ --color-accent: var(--color-pink-velvet); /* #FC086A — CTAs */ --color-accent-hover: var(--color-pink-velvet-dk); /* #B40249 */ --color-highlight: var(--color-fluoro-green); /* #EAFF1E — callouts */ --color-warm: var(--color-fire-songs); /* #FE7F2D — warm accent */ --color-border: #2D4A5A; /* subtle rule on dark bg */ /* ── Daytime palette — day-to-night arc ────────────────────────────────── */ --color-day-cream: #F7F0E3; /* warm morning light — hero bg */ --color-day-surface: #EFE7D4; /* slightly richer cream — carousel bg */ --color-day-text: #15252E; /* Night Ink dark on cream */ --color-day-border: #D9CEBC; /* subtle warm rule on cream */ /* ── Typography ─────────────────────────────────────────────────────── */ /* * Circus Heavy — display font only. Applied via .display class, never via * heading tags directly (per Figma style guide note on H1-6 hierarchy). * Fallback: Impact is a rough analogue for weight; Georgia for legibility. * * Besley — all HTML headings (H1-H6) and body text (Google Fonts). * Slab serif; fallback to Georgia preserves the serif personality. */ --font-display: 'Circus Heavy', Impact, Georgia, serif; --font-display-alt: 'Citrus Gothic', 'Circus Heavy', Impact, serif; /* ink-textured callouts */ --font-body: 'Besley', Georgia, 'Times New Roman', serif; --font-mono: 'Courier New', monospace; /* ── Type scale — Circus Heavy (display class) ──────────────────────── */ /* * Figma spec: 56 / 46 / 36 / 24 / 18 / 16 px, weight 700, letter-spacing -1px */ --text-display-h1: 3.5rem; /* 56px */ --text-display-h2: 2.875rem; /* 46px */ --text-display-h3: 2.25rem; /* 36px */ --text-display-h4: 1.5rem; /* 24px */ --text-display-h5: 1.125rem; /* 18px */ --text-display-h6: 1rem; /* 16px */ --text-display-ls: -0.04em; /* approx -1px at 24px; scales with font size */ /* ── Editorial display — large Besley section headlines ─────────────── */ /* * Wireframe (14 Jun) sets section headlines in Besley SemiBold ~64px * (e.g. "Consume? / Or create?", "The Crowd isn't the audience"). * These are NOT Circus Heavy — they are big, warm, bookish Besley. * Fluid so they hold their proportion without a stack of breakpoints. */ --text-editorial: clamp(2.5rem, 1.6rem + 4vw, 4rem); /* 40 → 64px */ --text-editorial-sm: clamp(2rem, 1.4rem + 2.6vw, 3rem); /* 32 → 48px */ --lh-editorial: 1.11; /* Figma h2 line-height */ /* ── Type scale — Besley (H1–H6 + body) ────────────────────────────── */ /* * Figma spec: 36 / 26 / 22 / 18 / 16 / 14 px, weight 400/500 */ --text-h1: 2.25rem; /* 36px */ --text-h2: 1.625rem; /* 26px */ --text-h3: 1.375rem; /* 22px */ --text-h4: 1.125rem; /* 18px */ --text-h5: 1rem; /* 16px */ --text-h6: 0.875rem; /* 14px */ /* ── Body text scale ────────────────────────────────────────────────── */ --text-xs: 0.875rem; /* 14px — captions, small labels */ --text-sm: 1rem; /* 16px — secondary body */ --text-base: 1.125rem; /* 18px — primary body (Besley default) */ --text-md: 1.375rem; /* 22px */ --text-lg: 1.5rem; /* 24px */ --text-xl: 1.625rem; /* 26px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 2.875rem; /* 46px */ --text-4xl: 3.5rem; /* 56px */ /* ── Spacing (base unit: 8px) ───────────────────────────────────────── */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px; --space-16: 128px; --space-20: 160px; /* ── Layout ─────────────────────────────────────────────────────────── */ --content-width: 1200px; --content-width-narrow: 720px; --content-width-wide: 1400px; --site-padding: var(--space-6); /* ── Border radius ──────────────────────────────────────────────────── */ /* * Buttons not yet designed — using sharp/minimal radii to honour the * woodblock-print, show-print aesthetic. Revisit when Web basics is done. */ --radius-sm: 0px; /* sharp — matches print aesthetic */ --radius-md: 2px; /* near-sharp for buttons */ --radius-lg: 4px; --radius-full: 9999px; /* ── Shadows ────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7); /* ── Motion ─────────────────────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-default: 250ms ease; --transition-slow: 400ms ease; /* Expressive easing — the "designed" feel (follow.art / griflan register) */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1); --ease-back: cubic-bezier(0.34, 1.4, 0.5, 1); --reveal-dur: 0.9s; /* ── Z-index ────────────────────────────────────────────────────────── */ --z-base: 0; --z-above: 10; --z-nav: 100; --z-overlay: 200; --z-modal: 300; }