/* ============================================================
Initiative Cents — compiled theme stylesheet (main.css)
Flattened from the design system: tokens + base + site + content.
No @import chains (Lighthouse). Fonts loaded separately (see functions.php).
Edit the design-system sources, not this file — regenerate to update.
============================================================ */
/* ---- tokens: colors ---- */
/* ============================================================
Initiative Cents — Color tokens
Sampled from the association's bilingual community posters.
A warm, vibrant, multi-color palette: deep blue + sky blue
lead, with coral, indigo, maroon and sun-yellow accents
drawn from the signature crowd illustration.
============================================================ */
:root {
/* ---- Brand blues (primary) ---- */
--ic-blue: #1C4587; /* primary blue — headlines, brand */
--ic-blue-600: #173A72; /* hover / pressed blue */
--ic-blue-deep: #13295D; /* deep navy — footer bands */
--ic-blue-700: #0F2048; /* deepest navy — text on light */
--ic-sky: #2693C5; /* bright sky — illustration tie-in */
--ic-sky-soft: #8EC7E1; /* soft sky — tint backgrounds */
/* ---- Warm accents ---- */
--ic-coral: #EC5A44; /* coral-red — warm headlines, CTAs */
--ic-coral-600: #D8462F; /* hover / pressed coral */
--ic-maroon: #8E1B26; /* deep red — emphasis sublines */
--ic-sun: #F4B63C; /* sun yellow — balloons, highlights */
--ic-sun-soft: #FBE6B0; /* soft yellow — tint backgrounds */
/* ---- Cool accent ---- */
--ic-indigo: #3A3F8F; /* indigo — dates, secondary headings */
--ic-indigo-600: #2E3375; /* hover / pressed indigo */
--ic-indigo-soft: #D5D7EC; /* soft indigo — tint backgrounds */
/* ---- Neutrals (warm) ---- */
--ic-ink: #232020; /* near-black warm — primary text */
--ic-body: #46423E; /* body text */
--ic-muted: #7C766E; /* secondary / captions */
--ic-faint: #ACA59B; /* placeholders, disabled text */
--ic-line: #E6E1D8; /* hairline borders */
--ic-line-strong: #D2CABD; /* stronger borders */
--ic-cream: #FAF6EE; /* warm off-white surface */
--ic-paper: #FFFFFF; /* card / page white */
/* ---- Semantic aliases ---- */
--color-brand: var(--ic-blue);
--color-brand-deep: var(--ic-blue-deep);
--color-accent: var(--ic-coral);
--color-accent-cool: var(--ic-indigo);
--text-heading: var(--ic-blue-700);
--text-body: var(--ic-body);
--text-muted: var(--ic-muted);
--text-on-brand: var(--ic-paper);
--text-link: var(--ic-indigo);
--surface-page: var(--ic-cream);
--surface-card: var(--ic-paper);
--surface-tint: var(--ic-sky-soft);
--surface-brand: var(--ic-blue);
--surface-footer: var(--ic-blue-deep);
--border-subtle: var(--ic-line);
--border-default: var(--ic-line-strong);
--focus-ring: var(--ic-indigo);
}
/* ---- tokens: typography ---- */
/* ============================================================
Initiative Cents — Typography tokens
Fredoka → display & UI headings (friendly, rounded)
Nunito → body copy (warm humanist)
Fredoka → event-poster titles (chunky all-caps, weight 700)
============================================================ */
:root {
/* ---- Families ---- */
--font-poster: 'Fredoka', system-ui, sans-serif; /* big event titles */
--font-display: 'Fredoka', system-ui, sans-serif; /* headings, UI */
--font-body: 'Nunito', system-ui, -apple-system, sans-serif; /* body copy */
/* ---- Weights ---- */
--fw-regular: 400; /* @kind font */
--fw-medium: 500; /* @kind font */
--fw-semibold: 600; /* @kind font */
--fw-bold: 700; /* @kind font */
--fw-extrabold: 800; /* @kind font */
/* ---- Type scale (clamped, fluid) ---- */
--fs-poster: clamp(2.75rem, 6vw, 4.5rem); /* @kind font */
--fs-display: clamp(2rem, 4vw, 3rem); /* @kind font */
--fs-h1: 2rem; /* @kind font */
--fs-h2: 1.5rem; /* @kind font */
--fs-h3: 1.25rem; /* @kind font */
--fs-h4: 1.0625rem; /* @kind font */
--fs-lg: 1.125rem; /* @kind font */
--fs-body: 1rem; /* @kind font */
--fs-sm: 0.875rem; /* @kind font */
--fs-xs: 0.75rem; /* @kind font */
/* ---- Line heights ---- */
--lh-tight: 1.05; /* @kind font */
--lh-snug: 1.2; /* @kind font */
--lh-normal: 1.5; /* @kind font */
--lh-relaxed: 1.65; /* @kind font */
/* ---- Letter spacing ---- */
--ls-poster: 0.005em; /* @kind font */
--ls-tight: -0.01em; /* @kind font */
--ls-normal: 0; /* @kind font */
--ls-wide: 0.04em; /* @kind font */
--ls-caps: 0.08em; /* @kind font */
/* ---- Semantic roles ---- */
--text-poster-family: var(--font-poster);
--text-heading-family: var(--font-display);
--text-body-family: var(--font-body);
}
/* ---- tokens: spacing/radius/shadow ---- */
/* ============================================================
Initiative Cents — Spacing, radius, shadow, layout tokens
4px base grid. Friendly rounded geometry; soft warm shadows.
============================================================ */
:root {
/* ---- Spacing scale (4px base) ---- */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-16: 4rem; /* 64 */
--space-20: 5rem; /* 80 */
--space-24: 6rem; /* 96 */
/* ---- Radius (rounded, friendly) ---- */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 26px;
--radius-2xl: 36px;
--radius-pill: 999px;
/* ---- Borders ---- */
--border-width: 1.5px; /* @kind other */
--border-width-thick: 3px; /* @kind other */
/* ---- Shadows (soft, warm, low-spread) ---- */
--shadow-xs: 0 1px 2px rgba(35, 32, 32, 0.06);
--shadow-sm: 0 2px 6px rgba(35, 32, 32, 0.08);
--shadow-md: 0 6px 18px rgba(35, 32, 32, 0.10);
--shadow-lg: 0 14px 34px rgba(35, 32, 32, 0.14);
--shadow-brand: 0 10px 26px rgba(19, 41, 93, 0.22); /* blue-tinted lift */
/* ---- Layout ---- */
--content-max: 1120px; /* @kind other */
--prose-max: 64ch; /* @kind other */
--poster-w: 698px; /* @kind other */
--gutter: var(--space-6);
/* ---- Motion ---- */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
--dur-fast: 140ms; /* @kind other */
--dur-base: 220ms; /* @kind other */
--dur-slow: 360ms; /* @kind other */
}
/* ---- base ---- */
/* ============================================================
Initiative Cents — Design System
Global stylesheet entry point. Consumers link THIS file only.
Keep this file as @import lines (plus light base resets) only.
============================================================ */
/* ---- Minimal, shared base ---- */
:root {
color-scheme: light;
}
body {
font-family: var(--font-body);
color: var(--text-body);
background: var(--surface-page);
font-size: var(--fs-body);
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Headings default to the display face */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--text-heading);
line-height: var(--lh-snug);
font-weight: var(--fw-bold);
}
a {
color: var(--text-link);
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
}
::selection {
background: var(--ic-sky);
color: var(--ic-blue-700);
}
/* A small-caps brand label used across materials, e.g. "Initiative Cents" */
.ic-eyebrow {
font-family: var(--font-display);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
font-size: var(--fs-sm);
color: var(--ic-ink);
}
/* ---- site shell ---- */
/* ============================================================
Initiative Cents — Website
Shared shell: tokens, base, layout, header, buttons, badges,
footer. Re-skinned to the Initiative Cents design system
(blue/coral, Fredoka/Nunito, Chango poster titles, cream).
Pages link: styles via this file's @import, plus content.css.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--ic-cream);
color: var(--ic-body);
font-family: var(--font-body);
font-size: 16px;
line-height: var(--lh-normal);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--ic-sky); color: var(--ic-blue-700); }
/* ---- Layout helpers ---- */
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 28px; }
.eyebrow {
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ic-muted);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--ic-blue);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ic-blue) 25%, transparent);
}
.poster {
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.01em;
line-height: 1.02;
}
.section-head {
display: flex; align-items: baseline; gap: 16px;
padding: 16px 0; margin-bottom: 22px;
border-top: 2px solid var(--ic-ink);
}
.section-head h2 {
font-family: var(--font-display); font-weight: 700; font-size: 22px;
margin: 0; text-transform: uppercase; letter-spacing: 0.02em;
color: var(--ic-blue-deep);
}
.section-head .meta {
font-family: var(--font-display); font-weight: 600; font-size: 13px;
letter-spacing: 0.04em; color: var(--ic-muted); text-transform: uppercase;
}
.section-head .rule { flex: 1; height: 1.5px; background: var(--ic-line); align-self: center; }
.section-head .all {
margin-left: auto; font-family: var(--font-display); font-weight: 600;
font-size: 14px; color: var(--ic-blue-deep);
border-bottom: 1.5px solid var(--ic-blue);
}
/* ============================================================
Header
============================================================ */
.site-header {
position: sticky; top: 0; z-index: 30;
background: color-mix(in oklab, var(--ic-paper) 90%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1.5px solid var(--ic-line);
}
.site-header__inner {
max-width: 1180px; margin: 0 auto;
padding: 14px 28px;
display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
width: 38px; height: 38px; border-radius: 50%;
background: var(--ic-blue); color: #fff;
display: grid; place-items: center;
font-family: var(--font-display); font-weight: 700; font-size: 15px;
box-shadow: var(--shadow-brand);
}
.brand__name {
font-family: var(--font-display); font-weight: 700; font-size: 19px;
letter-spacing: -0.01em; color: var(--ic-blue-deep); white-space: nowrap;
}
.brand__name b { color: var(--ic-blue); font-weight: 700; }
.brand__name .pt { color: var(--ic-coral); }
.site-nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.site-nav a {
font-family: var(--font-display); font-weight: 600; font-size: 15px;
color: var(--ic-body); padding: 6px 2px; position: relative;
transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--ic-blue); }
.site-nav a.active { color: var(--ic-blue-deep); }
.site-nav a.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 2.5px;
background: var(--ic-blue); border-radius: 2px;
}
.lang {
display: inline-flex; gap: 2px;
border: 1.5px solid var(--ic-line); border-radius: var(--radius-pill);
padding: 3px;
}
.lang a {
font-family: var(--font-display); font-weight: 700; font-size: 12px;
padding: 5px 11px; border-radius: var(--radius-pill); color: var(--ic-muted);
}
.lang a.on { background: var(--ic-blue); color: #fff; }
/* Hamburger + mobile menu */
.hamb {
display: none; width: 40px; height: 40px; border-radius: 50%;
border: 1.5px solid var(--ic-line); align-items: center; justify-content: center;
color: var(--ic-ink); margin-left: auto;
}
.hamb:hover { border-color: var(--ic-ink); background: var(--ic-cream); }
.hamb svg { width: 18px; height: 18px; }
.hamb .ico-close { display: none; }
body.menu-open .hamb .ico-open { display: none; }
body.menu-open .hamb .ico-close { display: block; }
.mobile-menu {
display: none; position: fixed; left: 0; right: 0; top: 67px;
background: var(--ic-paper); border-bottom: 1.5px solid var(--ic-ink);
box-shadow: var(--shadow-lg); padding: 16px 20px 22px; z-index: 25;
transform: translateY(-12px); opacity: 0; pointer-events: none;
transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
body.menu-open .mobile-menu { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu a {
display: block; padding: 14px 4px;
font-family: var(--font-display); font-weight: 600; font-size: 22px;
color: var(--ic-body); text-transform: uppercase; letter-spacing: 0.01em;
border-bottom: 1.5px solid var(--ic-line);
}
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu a.active { color: var(--ic-blue); }
.mobile-menu .lbl {
font-family: var(--font-display); font-weight: 700; font-size: 12px;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--ic-faint);
margin-bottom: 6px;
}
/* ============================================================
Buttons
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-display); font-weight: 600; font-size: 15px;
padding: 12px 22px; min-height: 46px;
border-radius: var(--radius-pill);
border: 1.5px solid transparent;
background: var(--ic-blue); color: #fff;
box-shadow: var(--shadow-sm);
transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--ic-blue-600); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn .arrow { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.btn--coral { background: var(--ic-coral); }
.btn--coral:hover { background: var(--ic-coral-600); }
.btn--indigo { background: var(--ic-indigo); }
.btn--indigo:hover { background: var(--ic-indigo-600); }
.btn--ghost { background: transparent; color: var(--ic-ink); border-color: var(--ic-line-strong); box-shadow: none; }
.btn--ghost:hover { background: var(--ic-cream); border-color: var(--ic-ink); }
.btn--block { width: 100%; justify-content: space-between; }
.btn--lg { font-size: 17px; padding: 15px 28px; min-height: 54px; }
.btn[disabled], .btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
/* core/button block — same look as .btn, used via the "Ghost" block style
registered in inc/blocks.php (replaces the [ic_btn] shortcode). */
.wp-block-button__link {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-display); font-weight: 600; font-size: 15px;
padding: 12px 22px; min-height: 46px;
border-radius: var(--radius-pill);
border: 1.5px solid transparent;
background: var(--ic-blue); color: #fff;
box-shadow: var(--shadow-sm);
transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wp-block-button__link:hover { background: var(--ic-blue-600); box-shadow: var(--shadow-md); color: #fff; }
.wp-block-button__link:active { transform: translateY(1px) scale(0.99); }
.wp-block-button__link::after { content: '→'; font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-left: 2px; }
.is-style-ghost .wp-block-button__link { background: transparent; color: var(--ic-ink); border-color: var(--ic-line-strong); box-shadow: none; }
.is-style-ghost .wp-block-button__link:hover { background: var(--ic-cream); border-color: var(--ic-ink); color: var(--ic-ink); }
/* ============================================================
Badges / category chips
============================================================ */
.badge {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display); font-weight: 600; font-size: 12px;
letter-spacing: 0.01em; padding: 4px 11px; border-radius: var(--radius-pill);
background: var(--ic-sky-soft); color: var(--ic-blue-700);
}
.badge--coral { background: #FBD9D1; color: var(--ic-coral-600); }
.badge--indigo { background: var(--ic-indigo-soft); color: var(--ic-indigo); }
.badge--sun { background: var(--ic-sun-soft); color: #7A5A12; }
.badge--solid { background: var(--ic-blue); color: #fff; }
/* Category dot colors (shared by chips, rows, cards) */
.cat { display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-display); font-weight: 600; font-size: 12px;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--ic-muted); }
/* The colour rides on --cat, so any element carrying data-cat (chip, agenda
row, hero tag, filter pill) tints its own dot — not just .cat.
These are only the fallback: when a category has a colour set in Events
Manager, the template writes it inline as --cat and that wins. */
[data-cat="lang"] { --cat: var(--ic-indigo); }
[data-cat="kids"] { --cat: var(--ic-sun); }
[data-cat="cook"] { --cat: var(--ic-coral); }
[data-cat="med"] { --cat: var(--ic-blue); }
[data-cat="walk"] { --cat: var(--ic-sky); }
[data-cat="up"] { --cat: var(--ic-maroon); }
[data-cat="read"] { --cat: var(--ic-indigo); }
[data-cat="self"] { --cat: var(--ic-blue-deep); }
.cat .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--ic-blue)); }
/* An event can carry several categories — topics, then flags like Featured. */
.cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cat--featured { background: var(--ic-sun-soft); color: #7A5A12; padding: 3px 10px;
border-radius: var(--radius-pill); letter-spacing: 0.08em; }
/* ============================================================
Footer
============================================================ */
.ic-site-footer { background: var(--ic-paper); border-top: 6px solid var(--ic-blue); font-family: var(--font-body); color: var(--ic-ink); margin-top: 64px; }
.ic-site-footer * { box-sizing: border-box; }
.ic-site-footer__inner { max-width: 1180px; margin: 0 auto; padding: 56px 32px 0; display: flex; flex-direction: column; gap: 40px; }
.ic-site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px 48px; align-items: start; }
.ic-site-footer__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ic-site-footer__label {
font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ic-indigo); margin: 0;
}
.ic-site-footer__url { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.05; color: var(--ic-coral); }
.ic-site-footer__desc { font-size: 16px; line-height: 1.55; color: var(--ic-body); text-wrap: pretty; margin: 0; }
.ic-site-footer__addr { font-size: 15px; line-height: 1.5; color: var(--ic-body); padding-top: 12px; border-top: 1.5px solid var(--ic-line); margin: 0; font-style: normal; }
.ic-site-footer strong { color: var(--ic-ink); font-weight: 700; }
.ic-site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.4; }
.ic-site-footer a { color: var(--ic-body); text-decoration: none; transition: color 140ms cubic-bezier(.22,.61,.36,1); }
.ic-site-footer a:hover { color: var(--ic-coral); }
.ic-site-footer a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 63, 143, 0.16); border-radius: 4px; }
.ic-site-footer__partners { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; border-top: 1.5px solid var(--ic-line); padding: 20px 0 24px; }
.ic-site-footer__note { flex: 1 1 280px; min-width: 0; font-size: 15px; line-height: 1.5; color: var(--ic-muted); margin: 0; text-wrap: pretty; }
.ic-site-footer__logos { display: flex; align-items: center; gap: 32px; flex: none; }
.ic-site-footer__logos img { display: block; }
.ic-site-footer__logo-tl { width: 72px; height: auto; }
/* VDL PNG already contains the official clear space — never crop it.
Negative margin only lets that transparent margin overlap the row padding. */
.ic-site-footer__logo-vdl { height: 96px; width: auto; margin: -12px 0; }
.ic-site-footer__band { background: var(--ic-blue-deep); color: var(--ic-paper); }
.ic-site-footer__band-inner {
max-width: 1180px; margin: 0 auto; padding: 18px 32px;
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 8px 24px; font-size: 15px; line-height: 1.4; text-align: center;
}
.ic-site-footer__band-url { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.ic-site-footer__sep { color: var(--ic-sky-soft); }
.ic-site-footer__band a { color: var(--ic-paper); }
.ic-site-footer__band a:hover { color: var(--ic-sky-soft); }
/* ============================================================
Responsive
============================================================ */
@media (max-width: 960px) {
.wrap { padding-inline: 20px; }
.site-header__inner { padding: 12px 20px; gap: 14px; }
.site-nav { display: none; }
.hamb { display: inline-flex; }
.mobile-menu { display: block; }
}
@media (max-width: 600px) {
.wrap { padding-inline: 16px; }
.site-header__inner { padding: 10px 16px; gap: 10px; }
.brand__name { font-size: 17px; }
.mobile-menu { top: 61px; }
.section-head h2 { font-size: 18px; }
.ic-site-footer__inner { padding: 40px 20px 0; }
.ic-site-footer__band-inner { padding: 16px 20px; flex-direction: column; }
.ic-site-footer__sep { display: none; }
}
/* ---- content ---- */
/* ============================================================
Initiative Cents — Website · content.css
Page-section styles: masthead, agenda, blog, event detail,
forms, prose. Pairs with site.css (link both per page).
============================================================ */
/* ---- Masthead (home) ---- */
/* One scale drives the whole band. The title size, the height it holds open
and the room left under the text all derive from --mast-title, so anything
that makes the title bigger — a wider viewport, or a visitor whose browser
font size is larger, which is why this is rem and not px — grows the photo
with it instead of pushing the text down into the faded-out bottom edge. */
.mast { position: relative; isolation: isolate; overflow: hidden;
--mast-title: clamp(2.875rem, 6.4vw, 5.25rem); }
.mast::before {
content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: 100vw; height: 100%;
background-image: url('../img/community-header.jpg');
background-size: cover; background-position: center 32%;
opacity: 1; z-index: -2;
}
.mast::after {
content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: 100vw; height: 100%;
/* Fades to solid cream so the band melts into the page. The top half stays
nearly clear so the photo carries the band, then the wash ramps hard over
the last quarter. The 92% stop keeps a little photo behind the lowest line
of the title — without it the wash is already opaque where the text sits,
and a wrapped second line reads as if it had fallen off the image. */
background: linear-gradient(180deg,
color-mix(in oklab, var(--ic-cream) 12%, transparent) 0%,
color-mix(in oklab, var(--ic-cream) 22%, transparent) 50%,
color-mix(in oklab, var(--ic-cream) 70%, transparent) 78%,
color-mix(in oklab, var(--ic-cream) 90%, transparent) 92%,
var(--ic-cream) 100%);
z-index: -1;
}
.mast__inner { max-width: 1180px; margin: 0 auto;
padding: 60px 28px calc(var(--mast-title) * 0.42);
display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
/* Hold the band open so the header photo behind it stays visible — with or
without a title (.mast--bare is the untitled variant, which would otherwise
collapse to its padding). Raise the multiplier for more image. */
.mast__inner { min-height: calc(var(--mast-title) * 6); }
.mast h1 {
font-family: var(--font-poster); font-weight: 700;
font-size: var(--mast-title); line-height: 1.05; letter-spacing: 0.01em;
margin: 14px 0 0; color: var(--ic-blue-deep); text-wrap: balance;
/* "Initiative Cents" is 16 characters, so a 16ch cap wrapped it as soon as
the font rendered a hair wide. Long titles still break; this one doesn't. */
max-width: 20ch;
}
.mast h1 .pt { color: var(--ic-coral); }
.tagline { max-width: 1180px; margin: 0 auto; padding: 14px 28px 36px;
font-size: 18px; line-height: 1.6; color: var(--ic-body); }
.tagline { max-inline-size: 64ch; }
.tagline b { color: var(--ic-ink); font-weight: 800; }
/* ---- Motto call-out (home) ----
The devise, promoted out of the chapeau: display type reversed out of the
brand blue with a sky edge. Text only: the calls to action live in the two
.invites cards right under it, so this block says why and they say how.
Solid blue rather than a tint — this is the one block on the page that has
to stop the eye. The small bottom margin keeps it tied to those cards. */
.motto { max-width: 1180px; margin: 0 auto 18px; padding: 0 28px; }
.motto__inner {
padding: 26px 30px 30px;
background: var(--ic-blue);
border: 1.5px solid var(--ic-sky);
border-left: 5px solid var(--ic-sky);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.motto__inner .eyebrow { color: var(--ic-sky-soft); }
.motto__inner .eyebrow .dot { background: var(--ic-sun);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ic-sun) 30%, transparent); }
.motto__text {
margin: 12px 0 0;
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.3;
letter-spacing: -0.005em; color: var(--ic-paper);
text-wrap: balance;
}
/* The motto is a kses'd Customizer field, so it may well hold a link. */
.motto__text b, .motto__text strong { color: var(--ic-sun); font-weight: 700; }
.motto__text a { color: var(--ic-sun); border-bottom: 1.5px solid color-mix(in oklab, var(--ic-sun) 55%, transparent); }
.motto__text a:hover { border-bottom-color: var(--ic-sun); }
.motto__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.motto__cta svg { flex-shrink: 0; }
/* On blue, the ghost variant would read as a disabled button — give it the
reversed treatment in case a second action is ever added here. */
.motto__actions .btn--ghost { color: var(--ic-paper); border-color: color-mix(in oklab, var(--ic-paper) 55%, transparent); }
.motto__actions .btn--ghost:hover { background: color-mix(in oklab, var(--ic-paper) 12%, transparent); border-color: var(--ic-paper); }
@media (max-width: 720px) {
.motto__inner { padding: 20px 20px 22px; }
.motto__actions .btn { width: 100%; }
}
/* ---- The two invitations (home) ----
Under the motto: how to join an activity, and how to bring one. Two equal
columns from 720px up so neither reads as the main one; stacked below.
Cards sit on paper with a coloured spine, the same device as the circles,
and the actions are pinned to the bottom so the buttons line up across the
pair whatever the copy length. */
.invites { max-width: 1180px; margin: 0 auto 30px; padding: 0 28px;
display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.invite { position: relative; overflow: hidden;
display: flex; flex-direction: column;
padding: 26px 28px 28px;
background: var(--ic-paper);
border: 1.5px solid var(--ic-line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); }
.invite::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--ic-coral); }
.invite--offer::before { background: var(--ic-indigo); }
.invite--offer .eyebrow .dot { background: var(--ic-indigo);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ic-indigo) 25%, transparent); }
.invite .eyebrow .dot { background: var(--ic-coral);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ic-coral) 25%, transparent); }
.invite__title { font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.25;
color: var(--ic-blue-deep); margin: 12px 0 0; text-wrap: balance; }
.invite__text { font-size: 16px; line-height: 1.65; color: var(--ic-body); margin: 10px 0 0; }
/* Push the buttons down, not the text — the cards are equal height. */
.invite__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 22px; }
.invite__cta svg { flex-shrink: 0; }
@media (max-width: 720px) {
.invites { grid-template-columns: 1fr; gap: 16px; }
.invite { padding: 20px 20px 22px; }
.invite__actions .btn { width: 100%; }
}
/* ---- News ticker ---- */
.newsline { max-width: 1180px; margin: 0 auto; padding: 0 28px 22px; }
.newsline__in {
display: flex; align-items: flex-start; gap: 14px;
padding: 14px 18px; background: var(--ic-paper);
border: 1.5px solid var(--ic-line); border-left: 3px solid var(--ic-coral);
border-radius: var(--radius-md);
}
.newsline .badge-live {
flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 11px;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--ic-coral-600);
padding: 4px 9px; border: 1.5px solid color-mix(in oklab, var(--ic-coral) 35%, transparent);
border-radius: var(--radius-sm); display: flex; align-items: center; gap: 6px; margin-top: 1px;
}
.newsline .badge-live::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ic-coral);
animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }
.newsline .body { flex: 1; min-width: 0; line-height: 1.55; }
.newsline .body .t { font-weight: 800; font-size: 16px; color: var(--ic-ink); }
.newsline .body .x { font-size: 15px; color: var(--ic-body); margin-left: 6px; }
.newsline .more { color: var(--ic-blue-deep); border-bottom: 1.5px solid var(--ic-blue);
font-family: var(--font-display); font-weight: 600; font-size: 14px; margin-left: 6px; white-space: nowrap; }
.newsline .when { flex-shrink: 0; font-family: var(--font-display); font-weight: 600; font-size: 13px;
color: var(--ic-faint); margin-top: 2px; white-space: nowrap; }
/* ---- Next-up hero card ---- */
.nextup { max-width: 1180px; margin: 0 auto 52px; padding: 0 28px; }
.hero-card {
position: relative; display: grid; grid-template-columns: 360px 1fr;
background: var(--ic-paper); border: 1.5px solid var(--ic-line);
border-left: 4px solid var(--ic-blue); border-radius: var(--radius-lg); overflow: hidden;
box-shadow: var(--shadow-sm);
}
.hero-img { position: relative; background: var(--ic-sky-soft); background-size: cover; background-position: center; min-height: 280px; }
.hero-img::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(160deg, color-mix(in oklab, var(--ic-blue) 16%, transparent), transparent 55%); }
.hero-date { position: absolute; left: 22px; bottom: 22px; z-index: 2;
background: var(--ic-paper); padding: 14px 18px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.hero-date .day { font-family: var(--font-poster); font-weight: 700; font-size: 60px; line-height: 0.9; color: var(--ic-blue); }
.hero-date .month { font-family: var(--font-display); font-weight: 700; font-size: 12px;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--ic-body); margin-top: 6px; }
.hero-date .weekday { font-family: var(--font-display); font-weight: 600; font-size: 15px;
text-transform: uppercase; letter-spacing: 0.04em; color: var(--ic-ink); margin-top: 8px; }
.hero-date .time { font-family: var(--font-display); font-weight: 500; font-size: 13px; color: var(--ic-muted); margin-top: 3px; }
.hero-body { padding: 16px 32px; display: flex; flex-direction: column; }
.hero-body h3 {
font-family: var(--font-poster); font-weight: 600; text-transform: uppercase;
font-size: 22px; line-height: 1.04; margin: 12px 0 6px; color: var(--ic-blue-deep); text-wrap: balance;
}
.hero-body h3 .pt { color: var(--ic-coral); }
.hero-body p { font-size: 16px; line-height: 1.4; color: var(--ic-body); margin: 0 0 12px; max-width: 64ch; }
.hero-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 24px; font-size: 14px;
color: var(--ic-body); margin-top: 0; padding-top: 12px; border-top: 1.5px dashed var(--ic-line); }
.hero-meta .m { display: flex; flex-direction: column; gap: 3px; }
.hero-meta .lbl { font-family: var(--font-display); font-weight: 700; font-size: 11px;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-faint); }
.hero-meta b { color: var(--ic-ink); font-weight: 700; line-height: 1.4; }
/* Stretched link: the title's covers the whole card, so the card stays
clickable without wrapping it in an anchor — which would make the circle's
WhatsApp button an illegal nested . */
.hero-card .hero-link { color: inherit; text-decoration: none; }
.hero-card .hero-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.hero-card:hover .hero-link { color: var(--ic-blue); }
/* stretch, so both buttons share a height even when one wraps to two lines. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 12px; }
/* .hero-cta keeps its own margin for the featured hero, which has no wrapper. */
.hero-cta { align-self: flex-start; margin-top: 22px; }
/* Both actions are real links, lifted above the stretched overlay so they take
their own clicks, focus and :hover. Sizing comes from .btn — do not restate
padding/min-height here or the two go out of step. */
.hero-actions .hero-cta,
.hero-wa { position: relative; z-index: 4; }
.hero-actions .hero-cta { margin-top: 0; align-self: stretch; }
/* Hovering anywhere on the card also darkens the primary action. */
.hero-card:hover .hero-cta { background: var(--ic-blue-600); box-shadow: var(--shadow-md); }
.hero-wa svg { flex-shrink: 0; color: var(--ic-blue-deep); }
.hero-wa:hover { border-color: var(--ic-blue); color: var(--ic-blue-deep); }
.hero-side { display: flex; flex-direction: column; gap: 14px; padding: 32px 26px;
border-left: 1.5px solid var(--ic-line); background: var(--ic-cream); }
.spots { background: var(--ic-paper); border: 1.5px solid var(--ic-line); padding: 14px 16px; border-radius: var(--radius-md); }
.spots .num { font-family: var(--font-poster); font-weight: 700; font-size: 34px; color: var(--ic-ink); line-height: 1; }
.spots .num b { color: var(--ic-blue); }
.spots .lbl { font-family: var(--font-display); font-weight: 600; font-size: 12px;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--ic-muted); margin-top: 4px; }
.bar { height: 5px; background: var(--ic-sky-soft); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.bar > span { display: block; height: 100%; background: var(--ic-blue); }
/* ---- Filters ---- */
.filters { max-width: 1180px; margin: 0 auto 18px; padding: 0 28px;
display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .lbl { font-family: var(--font-display); font-weight: 700; font-size: 12px;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-faint); margin-right: 8px; }
.chip { font-family: var(--font-display); font-weight: 600; font-size: 14px; padding: 8px 14px;
border: 1.5px solid var(--ic-line); border-radius: var(--radius-pill); color: var(--ic-body);
background: var(--ic-paper); display: inline-flex; align-items: center; gap: 7px;
transition: all var(--dur-fast) var(--ease-out); }
.chip:hover { border-color: var(--ic-ink); color: var(--ic-ink); }
.chip .cd { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.chip[data-cat] .cd { background: var(--cat); opacity: 1; }
.chip.on { background: var(--ic-blue); color: #fff; border-color: var(--ic-blue); }
.chip.on .cd { background: #fff; opacity: 1; }
/* ---- Agenda list ---- */
.agenda { max-width: 1180px; margin: 0 auto; padding: 12px 28px 40px; }
.agenda .hero-card { margin-bottom: 18px; }
.agenda .hero-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); transition: all var(--dur-base) var(--ease-out); }
/* Homepage only: the hand-off from the ten-event excerpt to the full agenda. */
.agenda-more { display: flex; justify-content: center; margin-top: 34px; }
.event { display: grid; grid-template-columns: 92px 116px 1.4fr 1.6fr; column-gap: 22px; row-gap: 16px;
padding: 22px 0; border-bottom: 1.5px solid var(--ic-line); align-items: start; cursor: pointer; position: relative;
transition: all var(--dur-base) var(--ease-out); }
.event::before { content: ""; position: absolute; left: -14px; top: 22px; bottom: 22px; width: 2.5px;
background: transparent; border-radius: 2px; transition: background var(--dur-fast) var(--ease-out); }
.event:hover::before { background: var(--ic-blue); }
.event:hover .ev-title { color: var(--ic-blue); }
.ev-time { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.ev-time .ev-dd { font-family: var(--font-poster); font-weight: 700; font-size: 38px; color: var(--ic-blue); }
.ev-time .ev-mon { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--ic-ink); margin-top: 2px; }
.ev-time .ev-hr { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ic-body); margin-top: 8px; }
.ev-time .dur { font-family: var(--font-display); font-weight: 500; font-size: 12px; color: var(--ic-muted); margin-top: 2px; }
.ev-img { width: 104px; height: 104px; background: var(--ic-sky-soft); background-size: cover; background-position: center;
border-radius: var(--radius-md); overflow: hidden; }
.ev-main { min-width: 0; }
.ev-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.15;
margin: 8px 0 0; color: var(--ic-ink); text-wrap: balance; transition: color var(--dur-fast) var(--ease-out); }
.ev-title .pt { color: var(--ic-blue); }
.ev-sub { margin-top: 6px; font-size: 14.5px; color: var(--ic-muted); line-height: 1.55; max-width: 48ch; }
.ev-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; font-size: 14px; }
.ev-meta .m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-meta .lbl { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ic-faint); }
.ev-meta b { color: var(--ic-ink); font-weight: 700; line-height: 1.35; }
.ev-cta { grid-column: 1 / -1; display: flex; }
.ev-spots { font-family: var(--font-poster); font-weight: 700; font-size: 22px; color: var(--ic-ink); line-height: 1; white-space: nowrap; }
.ev-spots b { color: var(--ic-blue); }
.ev-spots.full b { color: var(--ic-faint); }
.ev-action { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
color: #fff; background: var(--ic-blue); border: 1.5px solid var(--ic-blue);
padding: 13px 20px; border-radius: var(--radius-md);
transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.ev-action .arrow { font-weight: 700; transition: transform var(--dur-fast); }
.event:hover .ev-action { background: var(--ic-blue-deep); border-color: var(--ic-blue-deep); }
.event:hover .ev-action .arrow { transform: translateX(3px); }
.ev-action:active { transform: translateY(1px) scale(0.995); }
.event.cancelled .ev-action { background: var(--ic-paper); color: var(--ic-coral-600); border-color: var(--ic-coral-600); }
.event.cancelled:hover .ev-action { background: #FCEEEA; border-color: var(--ic-coral-600); }
/* ---- Cancelled variant ---- */
.event.cancelled .ev-img { filter: grayscale(0.85) brightness(0.95); position: relative; }
.event.cancelled .ev-img::before {
content: "Annulée"; position: absolute; left: 50%; top: 50%;
transform: translate(-50%,-50%) rotate(-6deg);
background: rgba(255,255,255,0.92); color: var(--ic-coral-600);
border: 1.5px solid var(--ic-coral-600); font-family: var(--font-display); font-weight: 700;
font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-sm); z-index: 2; }
.event.cancelled .ev-time, .event.cancelled .ev-time .dur,
.event.cancelled .ev-title, .event.cancelled .ev-sub { text-decoration: line-through; text-decoration-color: var(--ic-faint); }
.event.cancelled .ev-title { color: var(--ic-muted); }
.event.cancelled .cat .dot { background: var(--ic-coral) !important; }
.event.cancelled .cat { color: var(--ic-coral-600); }
.event.cancelled .ev-spots { color: var(--ic-coral-600); font-size: 18px; text-decoration: none; }
.event.cancelled .ev-bar > span { background: var(--ic-coral); opacity: 0.4; }
.event.cancelled .ev-action { color: var(--ic-coral-600); border-color: color-mix(in oklab, var(--ic-coral) 35%, transparent); }
.hero-card.cancelled { border-left-color: var(--ic-coral); background: #FCEEEA; }
.hero-card.cancelled .hero-img { filter: grayscale(0.8) brightness(0.95); }
.hero-card.cancelled .hero-img::before {
content: "Annulée"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-6deg);
background: rgba(255,255,255,0.92); color: var(--ic-coral-600); border: 2px solid var(--ic-coral-600);
font-family: var(--font-poster); font-weight: 700; font-size: 26px; letter-spacing: 0.04em; text-transform: uppercase;
padding: 8px 20px; border-radius: var(--radius-sm); z-index: 3; }
.hero-card.cancelled .hero-body h3 { color: var(--ic-muted); text-decoration: line-through; text-decoration-color: var(--ic-faint); }
.cancel-banner { grid-column: 1 / -1; background: #FCEEEA; border-top: 1.5px solid #E6C6BD;
padding: 14px 28px; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ic-body); }
.cancel-banner .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--ic-coral); color: #fff;
display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; flex-shrink: 0; }
.cancel-banner b { color: var(--ic-ink); font-weight: 700; }
.cancel-banner a { color: var(--ic-coral-600); border-bottom: 1.5px solid var(--ic-coral); margin-left: auto;
font-family: var(--font-display); font-weight: 600; font-size: 13px; white-space: nowrap; }
/* Cancelled event-detail treatment */
.detail-hero--cancelled .detail-hero__img { filter: grayscale(0.78) brightness(0.95); }
.detail-hero--cancelled .detail-hero__img::before {
content: "Annulée"; position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%) rotate(-6deg); z-index: 3;
background: rgba(255,255,255,0.93); color: var(--ic-coral-600); border: 2.5px solid var(--ic-coral-600);
font-family: var(--font-poster); font-weight: 700; font-size: 34px; letter-spacing: 0.04em; text-transform: uppercase;
padding: 8px 24px; border-radius: var(--radius-md); }
.notice { max-width: 1180px; margin: 24px auto 0; padding: 0 28px; }
.notice__in { display: flex; gap: 16px; align-items: flex-start; background: #FCEEEA;
border: 1.5px solid #E6C6BD; border-left: 4px solid var(--ic-coral); border-radius: var(--radius-lg); padding: 20px 22px; }
.notice .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--ic-coral); color: #fff;
display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; flex-shrink: 0; }
.notice h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ic-maroon); margin: 0 0 4px; }
.notice p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ic-body); }
.notice p b { color: var(--ic-ink); font-weight: 700; }
.reg.is-cancelled { border-color: var(--ic-coral); }
.reg.is-cancelled .price { color: var(--ic-coral-600); }
.reg .closed-note { font-size: 14px; color: var(--ic-muted); line-height: 1.5; margin-top: 14px;
padding-top: 14px; border-top: 1.5px solid var(--ic-line); }
.reg .closed-note b { color: var(--ic-ink); }
/* "No registration needed" panel — same voice as .closed-note, blue not grey. */
.reg .reg-note { font-size: 14px; color: var(--ic-body); line-height: 1.5; margin-top: 16px;
background: color-mix(in oklab, var(--ic-blue) 8%, transparent); border: 1.5px solid var(--ic-line);
border-left: 4px solid var(--ic-blue); border-radius: var(--radius-md); padding: 14px 16px; }
.reg .reg-note b { display: block; color: var(--ic-blue-deep); font-family: var(--font-display); font-weight: 700; margin-bottom: 3px; }
/* Editor-supplied booking copy can carry a link (join the WhatsApp group…) —
give it the same pairing links get everywhere else in the theme. */
.reg .reg-note a { color: var(--ic-blue-deep); border-bottom: 1.5px solid var(--ic-blue); }
/* The date is the one fact a cancelled page must not state flatly. Same
treatment the agenda row gives .ev-time, so the two read as one language. */
.facts.is-cancelled .fact--date .val { color: var(--ic-coral-600);
text-decoration: line-through; text-decoration-color: var(--ic-faint); }
/* Join-the-circle button under the registration panel. .btn sizes it; only the
full width and the centred icon+label are ours — .btn--block would push them
to opposite ends, which is right for a CTA with an arrow and wrong here. */
.reg-wa { width: 100%; justify-content: center; margin-top: 16px; }
.reg-wa svg { flex-shrink: 0; color: var(--ic-blue-deep); }
.reg-wa:hover { border-color: var(--ic-blue); color: var(--ic-blue-deep); }
/* ---- Blog grid ---- */
.from-blog { max-width: 1180px; margin: 48px auto 0; padding: 0 28px; }
.blog-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-top: 1.5px solid var(--ic-line); }
.blog-card { padding: 22px 26px 22px 0; border-right: 1.5px solid var(--ic-line); cursor: pointer;
display: flex; flex-direction: column; transition: transform var(--dur-fast) var(--ease-out); }
.blog-card:not(:first-child) { padding-left: 26px; }
.blog-card:last-child { border-right: 0; padding-right: 0; }
.blog-card:hover { transform: translateY(-2px); }
.blog-card:hover .bc-title { color: var(--ic-blue); }
.bc-date { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ic-blue-deep);
margin: 10px 0 6px; letter-spacing: 0.03em; }
.bc-title { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 10px;
color: var(--ic-ink); text-wrap: balance; transition: color var(--dur-fast) var(--ease-out); }
.bc-title .pt { color: var(--ic-blue); }
.blog-card.lead .bc-title { font-size: 28px; }
.blog-card .bc-title { font-size: 20px; }
.bc-excerpt { font-size: 14.5px; color: var(--ic-body); line-height: 1.55; margin: 0 0 14px; max-width: 42ch; }
.blog-card.lead .bc-excerpt { font-size: 15.5px; max-width: 48ch; }
.bc-meta { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 14px;
border-top: 1.5px dashed var(--ic-line); font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ic-muted); }
.bc-meta .arrow { margin-left: auto; font-family: var(--font-display); font-weight: 700; color: var(--ic-blue); transition: transform var(--dur-fast); }
.blog-card:hover .arrow { transform: translateX(3px); }
.bc-author { display: inline-flex; align-items: center; gap: 8px; }
.bc-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--ic-blue), var(--ic-sky));
color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 10px; }
/* Full blog (list page) */
.blog-list { max-width: 1180px; margin: 0 auto; padding: 8px 28px 40px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.post-card { background: var(--ic-paper); border: 1.5px solid var(--ic-line); border-radius: var(--radius-lg);
overflow: hidden; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card .pc-img { height: 190px; background: var(--ic-sky-soft); background-size: cover; background-position: center; }
.post-card .pc-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.18;
margin: 10px 0 8px; color: var(--ic-ink); }
.post-card h3 .pt { color: var(--ic-blue); }
.post-card p { font-size: 14.5px; color: var(--ic-body); line-height: 1.55; margin: 0 0 16px; }
.post-card:hover h3 { color: var(--ic-blue); }
/* ============================================================
Event detail
============================================================ */
.page-head { position: relative; isolation: isolate; padding-bottom: 26px; }
.page-head::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: 100vw; height: 100%; background-image: url('../img/community-header.jpg');
background-size: cover; background-position: center 30%; opacity: 0.5; z-index: -2; }
.page-head::after { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: 100vw; height: 100%;
background: linear-gradient(180deg, color-mix(in oklab, var(--ic-cream) 35%, transparent) 0%,
color-mix(in oklab, var(--ic-cream) 65%, transparent) 60%, var(--ic-cream) 100%); z-index: -1; }
.crumbs { max-width: 1180px; margin: 0 auto; padding: 50px 28px 0;
font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.02em;
color: var(--ic-muted); display: flex; gap: 10px; align-items: center; }
.crumbs a { color: var(--ic-muted); border-bottom: 1.5px solid transparent; }
.crumbs a:hover { color: var(--ic-ink); border-color: var(--ic-ink); }
.crumbs .sep { opacity: 0.5; }
.crumbs .here { color: var(--ic-ink); }
.detail-hero { max-width: 1180px; margin: 22px auto 0; padding: 0 28px; }
.detail-hero__img { position: relative; height: 420px; background-size: cover; background-position: center 60%;
border-radius: var(--radius-lg); overflow: hidden; border: 1.5px solid var(--ic-line); background-color: var(--ic-sky-soft); }
.detail-hero__img::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(18,25,38,0.66) 100%); }
.detail-hero .tag { position: absolute; top: 22px; left: 22px; z-index: 2; white-space: nowrap;
display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600;
font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255,255,255,0.94);
color: var(--ic-blue-deep); padding: 7px 13px; border-radius: var(--radius-pill); }
.detail-hero .tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--ic-blue)); }
.detail-hero .overlay { position: absolute; bottom: 24px; left: 26px; right: 26px; z-index: 2; color: #fff; }
.detail-hero .overlay .meta { font-family: var(--font-display); font-weight: 600; font-size: 14px;
letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; margin-bottom: 10px; }
/* The global heading rule sets color: var(--text-heading) (deep navy), and a
matching rule beats inheritance — so the title never picked up the white on
.overlay and sat dark-on-dark over the gradient. Re-link it to the overlay. */
.detail-hero .overlay h1 { color: inherit;
font-family: var(--font-poster); font-weight: 700; text-transform: uppercase;
font-size: clamp(38px, 5.2vw, 64px); line-height: 1.0; margin: 0;
text-shadow: 0 2px 20px rgba(0,0,0,0.35); }
.detail-hero .overlay h1 .pt { color: var(--ic-sun); }
/* auto-fit, not repeat(4): Lieu / Organisé par / Pour are optional, and fixed
tracks left empty columns (and a stray divider) when an event omits them. */
.facts { max-width: 1180px; margin: 28px auto 0; padding: 0 28px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-bottom: 1.5px solid var(--ic-line); }
.fact { padding: 22px 24px 22px 0; border-right: 1.5px solid var(--ic-line); }
.fact:last-child { border-right: 0; }
.fact:not(:first-child) { padding-left: 24px; }
.fact .lbl { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ic-faint); margin-bottom: 8px; }
.fact .val { font-family: var(--font-display); font-weight: 600; font-size: 23px; line-height: 1.15;
color: var(--ic-blue-deep); text-transform: uppercase; }
/* Month keeps its own element for the markup, but the whole date/time line
reads as one blue unit — no coral accent here. */
.fact .val .pt { color: inherit; }
.fact .sub { font-size: 14px; color: var(--ic-body); margin-top: 4px; }
.detail-body { max-width: 1180px; margin: 0 auto; padding: 48px 28px 0;
display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: start; }
.detail-main section { margin-bottom: 44px; }
.detail-main h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; text-transform: uppercase;
letter-spacing: 0.02em; color: var(--ic-blue-deep); margin: 0 0 16px; padding-top: 14px; border-top: 2px solid var(--ic-ink); }
.lead, .is-style-lead { font-size: 19px; line-height: 1.6; color: var(--ic-ink); font-weight: 600; margin: 0 0 24px; max-width: 60ch; text-wrap: pretty; }
.lead .pt, .is-style-lead .pt { color: var(--ic-blue); font-weight: 700; }
.detail-main p { font-size: 16px; line-height: 1.65; color: var(--ic-body); margin: 0 0 16px; max-width: 62ch; }
.detail-main p b { color: var(--ic-ink); font-weight: 700; }
.pulled { border-left: 4px solid var(--ic-blue); padding: 4px 0 4px 22px; margin: 28px 0;
font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.5; color: var(--ic-ink); max-width: 54ch; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ic-body);
padding: 8px 0; border-bottom: 1.5px dashed var(--ic-line); }
.checklist .ic { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--ic-sky-soft);
color: var(--ic-blue-700); display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.checklist b { color: var(--ic-ink); font-weight: 700; }
/* core/list block — "Checklist" style registered in inc/blocks.php
(replaces the [ic_check]/[ic_checklist] shortcodes). core/list-item has
no slot for the circular ✓ badge markup, so it's reproduced as a
li::before instead of a nested span. */
.is-style-checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.is-style-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ic-body);
padding: 8px 0; border-bottom: 1.5px dashed var(--ic-line); }
.is-style-checklist li::before {
content: '✓'; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--ic-sky-soft);
color: var(--ic-blue-700); display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px;
}
.is-style-checklist b { color: var(--ic-ink); font-weight: 700; }
.programme { list-style: none; padding: 0; margin: 0; }
.programme li { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 14px 0;
border-bottom: 1.5px solid var(--ic-line); align-items: start; }
.programme .when { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ic-blue-deep); padding-top: 2px; }
.programme .what { font-size: 14.5px; color: var(--ic-body); line-height: 1.55; }
.programme .what b { color: var(--ic-ink); display: block; font-weight: 700; font-family: var(--font-display); font-size: 16px; }
.organiser { background: var(--ic-cream); border: 1.5px solid var(--ic-line); padding: 24px; border-radius: var(--radius-lg);
display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; }
.organiser .avatar { width: 64px; height: 64px; border-radius: 50%;
background: linear-gradient(135deg, var(--ic-blue), var(--ic-sky)); display: grid; place-items: center;
font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 22px; }
.organiser .role { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ic-faint); margin-bottom: 6px; }
.organiser .name { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 6px; color: var(--ic-ink); }
.organiser p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ic-body); }
.organiser .links { margin-top: 10px; display: flex; gap: 14px; font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.organiser .links a { color: var(--ic-blue-deep); border-bottom: 1.5px solid var(--ic-blue); }
/* Sidebar registration card */
.side { position: sticky; top: 86px; }
.reg { background: var(--ic-paper); border: 1.5px solid var(--ic-ink); border-radius: var(--radius-lg);
padding: 24px; box-shadow: var(--shadow-md); }
.reg .price { font-family: var(--font-poster); font-weight: 700; font-size: 30px; color: var(--ic-blue); }
.reg .pricesub { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ic-muted); margin-bottom: 18px; }
.reg-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0;
border-bottom: 1.5px solid var(--ic-line); font-size: 15px; }
.reg-row:last-of-type { border-bottom: 0; }
.reg-row .k { color: var(--ic-faint); font-family: var(--font-display); font-weight: 700; font-size: 14px;
letter-spacing: 0.06em; text-transform: uppercase; }
.reg-row .v { color: var(--ic-ink); font-weight: 700; font-family: var(--font-display); }
.reg-row .v b { color: var(--ic-blue); }
.progress { margin: 18px 0 6px; }
.progress .lbl { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700;
font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ic-faint); margin-bottom: 6px; }
.progress .lbl b { color: var(--ic-blue); }
.progress .bar { height: 6px; background: var(--ic-sky-soft); border-radius: 3px; overflow: hidden; }
.progress .bar > span { display: block; height: 100%; background: var(--ic-blue); }
.share { margin-top: 22px; padding-top: 18px; border-top: 1.5px solid var(--ic-line); display: flex; gap: 12px; align-items: center; }
.share .lbl { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ic-faint); }
.share-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ic-line);
display: grid; place-items: center; color: var(--ic-body); transition: all var(--dur-fast); }
.share-btn:hover { border-color: var(--ic-ink); color: var(--ic-ink); background: var(--ic-cream); }
.share-btn svg { width: 16px; height: 16px; }
.map-card { margin-top: 24px; background: var(--ic-paper); border: 1.5px solid var(--ic-line); border-radius: var(--radius-lg); overflow: hidden; }
.map-canvas { height: 200px; background: linear-gradient(135deg, var(--ic-sky-soft), #b1d6e7); position: relative; overflow: hidden; }
.map-canvas::before { content: ""; position: absolute; inset: 0;
background-image: linear-gradient(0deg, transparent 49%, rgba(255,255,255,0.6) 49%, rgba(255,255,255,0.6) 51%, transparent 51%),
linear-gradient(90deg, transparent 49%, rgba(255,255,255,0.6) 49%, rgba(255,255,255,0.6) 51%, transparent 51%);
background-size: 36px 36px; }
.map-canvas::after { content: ""; position: absolute; width: 32px; height: 32px; left: 50%; top: 50%;
transform: translate(-50%,-50%); border-radius: 50%; background: var(--ic-blue);
box-shadow: 0 0 0 6px rgba(28,69,135,0.25), 0 0 0 16px rgba(28,69,135,0.12), 0 6px 14px -4px rgba(35,32,32,0.4); }
.map-canvas .pinlabel { position: absolute; left: 50%; top: calc(50% - 30px); transform: translate(-50%,-100%);
background: #fff; border: 1.5px solid var(--ic-line); padding: 5px 10px; border-radius: var(--radius-sm);
font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ic-ink); white-space: nowrap;
z-index: 2; box-shadow: var(--shadow-sm); }
.map-meta { padding: 16px 18px; font-size: 14px; color: var(--ic-body); line-height: 1.5; }
.map-meta b { color: var(--ic-ink); font-family: var(--font-display); font-weight: 700; font-size: 16px; display: block; margin-bottom: 4px; }
.map-meta .open-link { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ic-blue-deep);
border-bottom: 1.5px solid var(--ic-blue); padding-bottom: 1px; }
/* Related */
.related { max-width: 1180px; margin: 40px auto 0; padding: 24px 28px 0; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rel-card { border: 1.5px solid var(--ic-line); border-radius: var(--radius-lg); overflow: hidden;
background: var(--ic-paper); cursor: pointer; transition: all var(--dur-base) var(--ease-out); box-shadow: var(--shadow-sm); }
.rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.rel-img { height: 160px; background-size: cover; background-position: center; background-color: var(--ic-sky-soft); }
.rel-body { padding: 18px; }
.rel-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.18;
text-transform: uppercase; color: var(--ic-ink); margin: 8px 0 8px; text-wrap: balance; }
.rel-card h3 .pt { color: var(--ic-blue); }
.rel-meta { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ic-muted); display: flex; gap: 12px; }
.rel-meta .when { color: var(--ic-blue-deep); }
/* ============================================================
Static pages — hero, prose, forms
============================================================ */
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero__inner { max-width: 1180px; margin: 0 auto; padding: 64px 28px 36px; }
.page-hero h1 { font-family: var(--font-poster); font-weight: 700; text-transform: uppercase;
font-size: clamp(44px, 6vw, 76px); line-height: 1.0; margin: 14px 0 0; color: var(--ic-blue-deep); max-width: 16ch; }
.page-hero h1 .pt { color: var(--ic-coral); }
.page-hero .lead { margin-top: 18px; max-width: 60ch; font-size: 19px; }
.prose { max-width: 740px; margin: 0 auto; padding: 8px 28px 0; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ic-blue-deep);
margin: 40px 0 14px; text-transform: uppercase; letter-spacing: 0.01em; }
.prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ic-ink); margin: 28px 0 10px; }
.prose p { font-size: 17px; line-height: 1.7; color: var(--ic-body); margin: 0 0 18px; }
.prose p b { color: var(--ic-ink); font-weight: 700; }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 18px; }
.prose ul li { position: relative; padding: 8px 0 8px 28px; font-size: 16px; color: var(--ic-body);
border-bottom: 1.5px dashed var(--ic-line); }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 9px; height: 9px;
border-radius: 50%; background: var(--ic-sky); }
.prose .big-quote { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.4;
color: var(--ic-ink); border-left: 4px solid var(--ic-coral); padding-left: 24px; margin: 32px 0; }
.stat-row { max-width: 1180px; margin: 8px auto; padding: 0 28px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat { background: var(--ic-paper); border: 1.5px solid var(--ic-line); border-radius: var(--radius-lg);
padding: 26px 24px; box-shadow: var(--shadow-sm); }
.stat .num { font-family: var(--font-poster); font-weight: 700; font-size: 52px; color: var(--ic-blue); line-height: 1; }
.stat .lbl { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ic-body); margin-top: 8px; }
.split { max-width: 1180px; margin: 0 auto; padding: 36px 28px;
display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split__media { border-radius: var(--radius-xl); overflow: hidden; border: 1.5px solid var(--ic-line); box-shadow: var(--shadow-sm); }
.split h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--ic-blue-deep);
text-transform: uppercase; margin: 8px 0 14px; }
.split p { font-size: 16px; line-height: 1.65; color: var(--ic-body); margin: 0 0 14px; }
/* Forms */
.form-card { background: var(--ic-paper); border: 1.5px solid var(--ic-line); border-radius: var(--radius-xl);
padding: 32px; box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ic-ink); }
.field input, .field select, .field textarea {
font-family: var(--font-body); font-size: 16px; color: var(--ic-ink); background: var(--ic-paper);
padding: 12px 14px; min-height: 46px; border: 1.5px solid var(--ic-line-strong); border-radius: var(--radius-md);
outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); width: 100%; }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--ic-indigo); box-shadow: 0 0 0 3px rgba(58,63,143,0.16); }
.field .hint { font-size: 13px; color: var(--ic-muted); }
/* Contact split */
.contact-grid { max-width: 1180px; margin: 0 auto; padding: 8px 28px 0;
display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
.info-card { background: var(--ic-cream); border: 1.5px solid var(--ic-line); border-radius: var(--radius-lg); padding: 24px; }
.info-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--ic-blue-deep); margin: 0 0 12px; }
.info-card p { font-size: 15px; color: var(--ic-body); line-height: 1.6; margin: 0 0 6px; }
.info-card a { color: var(--ic-blue-deep); border-bottom: 1.5px solid var(--ic-blue); }
.info-card + .info-card { margin-top: 20px; }
/* Article (single post) */
.article-head { max-width: 740px; margin: 0 auto; padding: 8px 28px 0; text-align: center; }
.article-head .cat { justify-content: center; }
.article-head h1 { font-family: var(--font-poster); font-weight: 700; text-transform: uppercase;
font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; color: var(--ic-blue-deep); margin: 14px 0 0; }
.article-head h1 .pt { color: var(--ic-coral); }
.article-meta { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
margin-top: 20px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ic-muted); }
.article-meta .who { display: inline-flex; align-items: center; gap: 9px; color: var(--ic-ink); }
.article-meta .av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--ic-blue), var(--ic-sky));
color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.article-meta .sep { opacity: 0.5; }
.article-figure { max-width: 980px; margin: 32px auto 0; padding: 0 28px; }
.article-figure__img { height: 440px; border-radius: var(--radius-xl); overflow: hidden; border: 1.5px solid var(--ic-line);
background-size: cover; background-position: center; background-color: var(--ic-sky-soft); }
.article-figure figcaption { font-size: 13px; color: var(--ic-muted); margin-top: 10px; text-align: center; }
.article-share { max-width: 740px; margin: 32px auto 0; padding: 24px 28px; border-top: 1.5px solid var(--ic-line);
border-bottom: 1.5px solid var(--ic-line); display: flex; align-items: center; gap: 14px; }
.article-share .lbl { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ic-faint); }
.author-bio { max-width: 740px; margin: 32px auto 0; padding: 0 28px; }
/* ============================================================
Cercles (page-circles.php)
============================================================ */
.circles-grid { max-width: 1180px; margin: 36px auto 12px; padding: 0 28px;
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; align-items: stretch; }
.circle-card { display: flex; flex-direction: column; padding: 26px 26px 24px;
background: var(--ic-paper); border: 1.5px solid var(--ic-line); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
/* Coloured spine, so a wall of cards still reads as a list of distinct circles. */
.circle-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--cat, var(--ic-blue)); }
.circle-card:hover { border-color: var(--ic-line-strong); box-shadow: var(--shadow-md); }
.circle-card-img { margin: -26px -26px 20px; aspect-ratio: 16 / 9; overflow: hidden; }
.circle-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.circle-card-eyebrow { display: inline-flex; align-items: center; gap: 9px;
font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ic-faint); margin-bottom: 12px; }
.circle-card-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ic-blue);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ic-blue) 25%, transparent); flex-shrink: 0; }
.circle-card-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15;
text-transform: uppercase; color: var(--ic-ink); text-wrap: balance; margin: 0 0 12px; }
.circle-card-sub { font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
color: var(--ic-blue-deep); margin: -6px 0 16px; }
.circle-card-desc { font-size: 15px; line-height: 1.6; color: var(--ic-body); margin: 0 0 20px; }
.circle-card-name:last-child, .circle-card-sub:last-child, .circle-card-desc:last-child { margin-bottom: 0; }
/* margin-top:auto pins the button to the bottom so cards with short and long
descriptions still line up; the 20px above comes from the preceding element,
which auto margins do not swallow. */
.circle-card-wa { align-self: flex-start; margin-top: auto; gap: 9px; }
.circle-card-wa svg { flex-shrink: 0; }
.circle-card-wa:hover .arrow { transform: translateX(3px); }
.circle-card-wa .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.circles-empty { max-width: 1180px; margin: 0 auto; padding: 40px 28px 60px;
color: var(--ic-muted); font-style: italic; }
/* ============================================================
Responsive (content)
============================================================ */
@media (max-width: 960px) {
.mast__inner { grid-template-columns: 1fr; gap: 16px; padding: 44px 20px 22px; }
.mast__inner { min-height: calc(var(--mast-title) * 8); }
/* Zoom the header photo instead of fitting it whole.
`cover` picks whichever axis needs the most scaling, and on a phone the
band is far wider than it is tall (390 × 210 = 1.86) compared with the
picture (1600 × 960 = 1.67), so the width binds: the entire frame is
shown and only the top and bottom are trimmed. Sizing on the width
instead — 150% of the band, centred — crops the sides and keeps the
middle of the photo. Anything over 100% can never leave a horizontal
gap, and 150% stays taller than the band down to the narrowest phone. */
.mast::before { height:155%; }
.tagline { padding: 12px 20px 30px; }
.newsline, .nextup, .filters, .agenda, .from-blog, .crumbs, .detail-hero, .facts, .detail-body, .related, .blog-list, .stat-row, .split, .contact-grid, .circles-grid, .circles-empty { padding-inline: 20px; }
.hero-card { grid-template-columns: 1fr; }
.hero-img { min-height: 220px; }
.hero-side { border-left: 0; border-top: 1.5px solid var(--ic-line); flex-direction: row;
flex-wrap: wrap; align-items: center; padding: 20px 22px; gap: 12px; }
.hero-side .spots { flex: 1; min-width: 160px; }
.hero-side .btn { flex: 1; min-width: 150px; }
.hero-body { padding: 24px 22px; }
.hero-body h3 { font-size: 30px; }
.hero-meta { grid-template-columns: 1fr 1fr; }
.blog-grid { grid-template-columns: 1fr; border-top: 0; }
.blog-card { border-right: 0; border-top: 1.5px solid var(--ic-line); padding: 22px 0 !important; }
.blog-card:first-child { border-top: 0; }
.blog-list { grid-template-columns: 1fr 1fr; }
.detail-hero__img { height: 300px; }
.facts { grid-template-columns: 1fr 1fr; }
.fact { padding: 18px 0; border-right: 0; border-bottom: 1.5px solid var(--ic-line); }
.fact:nth-child(odd) { padding-right: 18px; border-right: 1.5px solid var(--ic-line); }
.fact:nth-child(even) { padding-left: 18px; }
.detail-body { grid-template-columns: 1fr; gap: 0; }
.side { position: static; margin-bottom: 40px; }
.checklist { grid-template-columns: 1fr; }
.related-grid { grid-template-columns: 1fr 1fr; }
/* Event rows become compact cards — like a tighter .hero-card.
Full-bleed image w/ overlaid time badge, padded body, footer CTA bar. */
.agenda { display: block; }
.event { display: flex; flex-direction: column; align-items: stretch; gap: 0; grid-template-columns: none;
background: var(--ic-paper); border: 1.5px solid var(--ic-line); border-radius: var(--radius-lg);
overflow: hidden; box-shadow: var(--shadow-sm); padding: 0; margin-bottom: 16px; position: relative; }
.event:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.event::before { display: none; }
.event > .ev-img { order: 1; width: 100%; height: 176px; border-radius: 0; }
.event > .ev-time { order: 0; position: absolute; left: 14px; top: 14px; z-index: 2;
background: var(--ic-paper); box-shadow: var(--shadow-md); border-radius: var(--radius-md);
padding: 8px 12px; align-items: center; }
.event > .ev-time .ev-dd { font-size: 26px; }
.event > .ev-time .ev-mon { font-size: 11px; }
.event > .ev-time .ev-hr { margin-top: 4px; font-size: 13px; }
.event > .ev-time .dur { display: none; }
.event > .ev-main { order: 2; padding: 16px 18px 0; }
.event > .ev-main .ev-title { font-size: 20px; }
.event > .ev-main .ev-sub { max-width: none; }
.event > .ev-meta { order: 3; padding: 14px 18px 2px; display: grid;
grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.event > .ev-cta { order: 4; padding: 4px 18px 18px; margin-top: 8px; align-self: stretch; }
.stat-row { grid-template-columns: 1fr; }
.split { grid-template-columns: 1fr; gap: 24px; }
.form-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.detail-hero__img { height: 240px; }
.facts { grid-template-columns: 1fr; }
.fact { border-right: 0 !important; padding: 16px 0 !important; }
.blog-list { grid-template-columns: 1fr; }
.related-grid { grid-template-columns: 1fr; }
.event > .ev-meta { grid-template-columns: 1fr; gap: 6px; }
.event > .ev-img { height: 156px; }
.hero-img { min-height: 190px; }
.detail-body { padding-top: 30px; }
.programme li { grid-template-columns: 1fr; gap: 4px; }
.organiser { grid-template-columns: 1fr; }
}
/* ============================================================
WordPress glue — a11y, core classes, comments, pagination.
(Appended after the design-system CSS. If main.css is
regenerated from the design system, re-append this block.)
============================================================ */
.screen-reader-text {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link.screen-reader-text:focus {
position: fixed !important; top: 12px; left: 12px; z-index: 100; width: auto; height: auto;
clip: auto; padding: 12px 18px; background: var(--ic-blue); color: #fff;
border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 600;
box-shadow: var(--shadow-md);
}
.site-main { display: block; }
/* Inline link in body copy.
The base reset (`a { color: inherit; text-decoration: none }`) strips link
styling site-wide so cards and rows can be fully clickable, which leaves
links inside prose invisible — this is the opt-in that puts them back.
Same pairing the theme already uses in .info-card a, .organiser .links a,
.section-head .all and .map-meta .open-link: blue-deep text over a blue
rule, which reads as an underline without colliding with the text colour. */
.ic-link {
color: var(--ic-blue-deep);
border-bottom: 1.5px solid var(--ic-blue);
padding-bottom: 1px;
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ic-link:hover { color: var(--ic-blue-700); border-color: var(--ic-blue-600); }
/* Core image / caption / alignment */
.alignleft { float: left; margin: 6px 24px 16px 0; }
.alignright { float: right; margin: 6px 0 16px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { font-size: 13px; color: var(--ic-muted); margin-top: 8px; text-align: center; }
.wp-block-image img { border-radius: var(--radius-md); }
figure { margin: 0; }
/* Sticky / password-protected post states */
.sticky .ev-title::after { content: " ★"; color: var(--ic-sun); }
/* Pagination */
.ic-pagination { max-width: 1180px; margin: 36px auto 0; padding: 0 28px;
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ic-pagination .page-numbers {
font-family: var(--font-display); font-weight: 600; font-size: 15px;
min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center;
justify-content: center; border: 1.5px solid var(--ic-line); border-radius: var(--radius-pill);
color: var(--ic-body); background: var(--ic-paper); transition: all var(--dur-fast) var(--ease-out);
}
.ic-pagination .page-numbers:hover { border-color: var(--ic-ink); color: var(--ic-ink); }
.ic-pagination .page-numbers.current { background: var(--ic-blue); color: #fff; border-color: var(--ic-blue); }
.ic-pagination .page-numbers.dots { border-color: transparent; }
/* Agenda: month headings + the month pager above and below the list.
One pill per month — three of them at most — so a visitor jumps straight to
a month instead of walking there. The pager sits inside .agenda, which
already carries the page gutter. */
.agenda-month { margin-top: 34px; }
.agenda-month:first-child { margin-top: 0; }
.agenda-month .meta { white-space: nowrap; }
.agenda-pager { max-width: none; padding: 0; justify-content: center; align-items: center; gap: 10px; }
.agenda-pager--top { margin: 0 0 26px; }
.agenda-pager--bottom { margin: 34px 0 0; }
.agenda-pager .page-numbers { text-transform: capitalize; }
#agenda { scroll-margin-top: 96px; }
@media (max-width: 720px) {
.agenda-pager { gap: 8px; }
.agenda-pager .page-numbers { font-size: 14px; padding: 0 14px; }
}
/* Comments (kept minimal & on-brand) */
.ic-comments { max-width: 740px; margin: 48px auto 0; padding: 0 28px; }
.ic-comments h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px;
text-transform: uppercase; color: var(--ic-blue-deep); border-top: 2px solid var(--ic-ink);
padding-top: 14px; margin: 0 0 18px; }
.ic-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.ic-comments .comment-list li { padding: 16px 0; border-bottom: 1.5px solid var(--ic-line); }
.ic-comments .comment-author { font-family: var(--font-display); font-weight: 700; color: var(--ic-ink); }
.ic-comments .comment-meta { font-size: 13px; color: var(--ic-faint); margin-bottom: 6px; }
/* ---- Events Manager booking form (restyled) ---- */
.ic-booking { margin-top: 16px; }
.ic-booking .em-booking-form label,
.ic-booking label { font-family: var(--font-display); font-weight: 600; font-size: 14px;
color: var(--ic-ink); display: block; margin: 12px 0 5px; }
/* Required marker only — the label text around it keeps its own colour. */
.ic-booking .em-form-required { color: var(--ic-coral-600); font-weight: 700; }
/* EM's booking JS shows and hides elements by toggling a .hidden class, but the
rule behind it (.em .hidden) ships in EM's core stylesheet, which we dequeue
above. Without this the confirm headers never toggle and the form does not
collapse after a successful booking. Scoped so it can't reach anything else. */
.ic-booking .hidden { display: none !important; }
/* Text-like fields only: a checkbox or radio must not become a full-width
44px box, and submit keeps its own button styling below. */
.ic-booking input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.ic-booking select, .ic-booking textarea {
font-family: var(--font-body); font-size: 16px; color: var(--ic-ink); background: var(--ic-paper);
padding: 11px 13px; min-height: 44px; width: 100%;
border: 1.5px solid var(--ic-line-strong); border-radius: var(--radius-md); outline: none;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.ic-booking input[type="checkbox"], .ic-booking input[type="radio"] {
width: 17px; height: 17px; min-height: 0; margin: 0; padding: 0;
accent-color: var(--ic-blue); cursor: pointer; }
/* EM nests the box inside its own