/*
Global stylesheet — single source of truth for the site.
Structure:
1) Reset and base
2) Design tokens (:root) — palette and typography are owned by the
`brand-guidelines` skill. Spacing, radii, shadows, motion, and layout
tokens are owned here.
3) Layout primitives
4) Components (site-wide reusable primitives only — page-specific
styles live with their page builds, not here)
5) Utilities
*/
/* ===== 1) Reset and base ===== */
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-body);
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
line-height: 1.2;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
}
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ===== 2) Design tokens ===== */
/* Palette and typography are written by the `brand-guidelines` skill from
`build-assets/0-the-brand/tokens.json`. Spacing, radii, shadows, and
transitions are owned here. */
:root {
/* Palette (brand-guidelines) */
--color-bg: #fdf6fb;
--color-surface: #ffffff;
--color-surface-soft: #f8ecf4;
--color-text: #241f28;
--color-text-soft: #6b6570;
--color-primary: #c21a86;
--color-primary-dark: #8f1261;
--color-primary-light: #f7d7ec;
--color-accent: #d81a76;
--color-focus: #c21a86;
/* Key conversion CTA (Join) — deliberately off-brand green so it pops.
Light green -> dark button text for AA contrast. */
--color-cta: #b3d956;
--color-cta-dark: #a3cd3f;
/* Typography (brand-guidelines) */
--font-heading: "Bitter", Georgia, "Times New Roman", serif;
--font-body: "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
/* Radii */
--radius-sm: 0.5rem;
--radius-md: 0.875rem;
--radius-lg: 1.25rem;
--radius-pill: 999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(60, 64, 67, 0.12);
--shadow-md: 0 4px 14px rgba(17, 24, 39, 0.08);
--shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);
/* Motion */
--transition-fast: 180ms ease;
--transition-base: 260ms ease;
/* Layout */
--container-max: 72rem;
/* Aesthetic dials — the `design-system` skill SETS these per brand to diverge
the look (sharp vs soft, flat vs shadowed, square vs pill). Defaults below are
a soft/rounded baseline; a brand's design stage should deliberately override
them so two brands don't look like the same template reskinned. */
--logo-height: 2.75rem; /* prominent by default — the logo is a brand asset, not chrome */
--logo-max-width: 22rem; /* generous, so wide wordmarks stay tall (not width-starved) */
--header-bg: var(--color-surface); /* header band — design-system may set a brand colour */
--header-fg: var(--color-text); /* header text/nav colour — flips for a coloured band */
--btn-radius: var(--radius-pill);
--card-radius: var(--radius-md);
--card-shadow: var(--shadow-sm);
--card-border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
--chip-radius: var(--radius-pill);
}
/* Logo grows on wider screens — override the dial at the breakpoint, never per-page. */
@media (min-width: 1024px) {
:root { --logo-height: 3.5rem; }
}
/* ===== 3) Layout primitives ===== */
.container {
width: min(100% - 2rem, var(--container-max));
margin-inline: auto;
}
.section {
padding: var(--space-10) 0;
}
.grid {
display: grid;
gap: var(--space-4);
}
.grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 600px) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ===== 4) Components ===== */
/* Site header */
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: var(--header-bg);
color: var(--header-fg);
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.site-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
}
.site-logo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* The header logo is an 
whose REAL file is injected by the CMS
at upload — its aspect ratio is unknown at build time. HEIGHT is the primary driver
(a generous --logo-height), so every logo renders at a consistent, prominent height
regardless of ratio; --logo-max-width is a generous, viewport-relative safety cap that
only clamps a very wide logo on small screens (it then scales down proportionally, never
distorts). Never pin width AND height. Tune the dials per brand — never a per-page size. */
.site-logo img {
height: auto;
width: auto;
max-height: var(--logo-height);
max-width: min(var(--logo-max-width, 22rem), 55vw);
object-fit: contain;
}
.site-nav {
display: inline-flex;
align-items: center;
gap: var(--space-4);
}
.site-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* Header actions group — nav then Login/Join, aligned to the far right */
.header-actions { display: flex; align-items: center; gap: var(--space-5); }
/* The CMS nav ({{menu.navigation.default}}) defaults to full width; make it content-width
inside the header so the Login/Join CTAs sit to its right, not pushed off. */
.site-header .hs-canvas-nav { width: auto; }
/* CMS-rendered menus — `{{menu.navigation}}` and `{{menu.footer}}` expand to