/*
Theme Name: Spellbound
Theme URI: https://spellbound.example/
Author: Spellbound
Description: A custom WordPress theme for Spellbound — a charity programme helping people find their voice. Hand-built from designer-supplied HTML/CSS, with editorial typography, layered orb illustrations, and warm earth-tone palette.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spellbound
Tags: custom-theme, charity, editorial, full-width
*/
/* ── FONTS ── */
@font-face {
font-family: 'AlteHaasGrotesk';
src: url('assets/fonts/AlteHaasGrotesk.woff2') format('woff2'),
url('assets/fonts/AlteHaasGrotesk.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'AlteHaasGrotesk';
src: url('assets/fonts/AlteHaasGrotesk_Bold.woff2') format('woff2'),
url('assets/fonts/AlteHaasGrotesk_Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'PerfectlyNineties';
src: url('assets/fonts/PerfectlyNineties-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'PerfectlyNineties';
src: url('assets/fonts/PerfectlyNineties-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
/* ── RESET ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ── VARIABLES ── */
:root {
--bark: #331C12;
--olive: #4D5E3C;
--dusk: #59748B;
--dawn: #FFF4AE;
--spell: #DDD7FF;
--parchment: #F7F7F7;
--ink: #1D1E1B;
--white: #ffffff;
--green: #4D5E3C;
--container-max: 1300px;
--pad-desktop: 60px;
--pad-tablet: 30px;
--pad-mobile: 20px;
--nav-gap: 40px;
--logo-height: 63px;
--border-color: #ffffff;
--dot-size: 10px;
}
/* ── BASE ── */
/* Clip horizontal overflow at the root as well as the body. body alone
isn't enough because is the page's scroll container, so a few
wide/decorative elements could still stretch the page sideways. No
position:sticky is used anywhere, so this is side-effect free; nested
horizontal scrollers (alumni, trustees, photo-scroll) keep their own
overflow and are unaffected. */
html {
overflow-x: hidden;
}
body {
background: #111;
font-family: 'AlteHaasGrotesk', sans-serif;
overflow-x: hidden;
}
/* Smooth scrolling for in-page anchor links — the homepage intro
CTA's #choose jump, the Programme partnership pills (For
Organisations / For Communities), the skip-to-content link, and
any future ACF Link field the editor sets to `#section-id` all
inherit smooth behaviour from this single declaration on .
The existing JS handler in assets/js/main.js (the `.subnav a`
click listener) still wraps sub-nav anchors so their hash
changes use history.replaceState instead of pushState — that's
the one bit of behaviour CSS scroll-behavior can't replicate,
and we keep it so repeated sub-nav clicks don't pile up history
entries that would noisify the back button.
Wrapped in `prefers-reduced-motion: no-preference` so visitors
who've configured their OS for reduced motion (vestibular
sensitivity, motion-triggered nausea, etc.) get the instant
jump back. WCAG Success Criterion 2.3.3 / Apple HIG both
identify this guard as the expected accessible shape — without
it, we'd be overriding a user's explicit OS-level preference. */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* ── PAPER TEXTURE OVERLAY ──────────────────────────────────────────
Repeating paper-scan texture sits over the entire viewport via a
fixed pseudo-element on . The texture supplies the subtle
creased-paper grain the design specifies; mix-blend-mode:multiply
darkens content slightly wherever the texture has darker patches
so the effect reads as "site printed on paper" rather than "site
covered by paper".
Critical rules:
• pointer-events: none — the overlay sits ABOVE the entire page
in the visual stack but is invisible to hit-testing, so every
button / link / form field beneath it stays clickable. Without
this rule the overlay would swallow every click.
• z-index: 500 — high enough to overlay the site header (z:130),
mobile menu (z:110), and all page content; low enough to sit
BELOW the modal stack (z:9999–10000) so apply-now and
watch-video modals render cleanly over the texture rather than
getting tinted by it. The modal's own dark backdrop replaces
the texture in the visible portion of the viewport while the
modal is open.
• mix-blend-mode: multiply — the texture is mostly white with
darker fibre / crease patches. Multiply lets the white areas
pass through (multiply by 1 = no change) while the darker
patches darken the content beneath. The net effect is the
grain of the paper bleeding into the page colours, not a
"white veil" obscuring them.
• opacity: 0.5 — tunes the strength of the effect. Lower = more
subtle, higher = more obvious paper. Adjust to taste.
• background-size: 400px — matches the source image's native
width so the texture tiles at 1:1 without scaling artefacts.
The film grain layer (body::before below) stacks ON TOP of this
paper layer via a higher z-index, producing the "printed paper
with film-grain shimmer" effect the design specifies.
Note on performance: a fixed full-viewport element with mix-blend-
mode triggers a compositor repaint of the whole viewport on
scroll. On low-end hardware this can soften the scroll feel
slightly. If profiling shows a measurable hit, the texture can be
moved into the body's `background-image` with
`background-blend-mode:multiply` instead — cheaper on the GPU
but only visible in places where no section bg covers the body
(so it wouldn't reach .post-content, .alumni-cards, etc).
───────────────────────────────────────────────────────────────── */
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 500;
pointer-events: none;
background-image: url('assets/images/paper-texture.jpg');
background-repeat: repeat;
background-size: 400px auto;
mix-blend-mode: multiply;
opacity: 0.5;
}
/* ── FILM GRAIN OVERLAY ─────────────────────────────────────────────
Fine-grain noise layer stacked above the paper texture via a
second fixed pseudo-element (body::before). Same click-pass-
through + sub-modal stacking pattern as the paper overlay; the
only differences are:
• z-index: 501 — exactly one step above body::after so the
grain renders ON TOP of the paper, not under it. (Both sit
well below the modal stack at 9999+ so modals stay clean.)
• mix-blend-mode: soft-light — the standard choice for film
grain. Soft-light brightens content where the grain is light
and darkens it where the grain is dark, but with a much
gentler curve than overlay — so the grain reads as shimmer
across the surface rather than as a posterised stipple. The
grain image has black + white speckles on a neutral mid
ground, so soft-light produces the classic film-photograph
shimmer.
• background-size: 60px — the image's native size, giving a
fine pixel-dense grain. Random noise hides its own repeat
even at this small tile.
• opacity: 0.08 — film grain wants to be felt more than seen.
The very low alpha means the grain is barely-there shimmer
rather than visible noise; push higher (0.15–0.25) for a
more obviously photographic feel.
───────────────────────────────────────────────────────────────── */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 501;
pointer-events: none;
background-image: url('assets/images/film-grain.png');
background-repeat: repeat;
background-size: 60px auto;
mix-blend-mode: soft-light;
opacity: 0.08;
}
/* ── CONTAINER ── */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--pad-desktop);
padding-right: var(--pad-desktop);
}
@media (max-width: 1024px) {
.container {
padding-left: var(--pad-tablet);
padding-right: var(--pad-tablet);
}
}
@media (max-width: 767px) {
.container {
padding-left: var(--pad-mobile);
padding-right: var(--pad-mobile);
}
}
/* ═══════════════════════════════════════════════
HEADER
═══════════════════════════════════════════════ */
#site-header {
background-color: var(--green);
width: 100%;
position: relative;
z-index: 130; /* above .mobile-menu (110) so burger + logo stay interactive */
display: flex;
align-items: stretch;
}
/* Logo — flush to left page edge */
.header-logo {
display: flex;
align-items: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.header-logo img {
height: var(--logo-height);
width: auto;
display: block;
}
/* Nav wrapper — fills remaining space, right-aligned */
.header-nav-wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: var(--pad-desktop);
position: relative;
z-index: 1;
}
nav ul {
list-style: none;
display: flex;
align-items: center;
gap: 40px;
}
nav ul li a {
display: block;
color: var(--white);
text-decoration: none;
font-family: 'AlteHaasGrotesk', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
padding: 22px 0;
}
nav ul li a:hover {
opacity: 0.75;
}
/* Bottom border line */
.header-border-line {
position: absolute;
bottom: -1px;
right: 0;
height: 2px;
background: var(--border-color);
pointer-events: none;
z-index: 2;
/* width injected by JS */
}
/* Default-template / unlisted pages (Privacy Policy, search, 404…) have
no active primary-nav item, so the JS positioner falls back to the
first link (Home) and the line would wrongly read as "homepage".
Hide it entirely on those pages. */
body.spellbound-no-active-nav .header-border-line {
display: none;
}
.header-border-dot {
position: absolute;
top: 50%;
left: 0;
width: var(--dot-size);
height: var(--dot-size);
border-radius: 50%;
background: var(--white);
transform: translate(-50%, -50%);
}
/* Burger — three spans that transform into a cross when open.
The spans stay in the same three-span vertical layout; CSS
rotates the top and bottom into an X and fades the middle. */
.burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
cursor: pointer;
padding: 0 var(--pad-tablet);
margin-left: auto;
background: none;
border: none;
flex-shrink: 0;
position: relative;
/* z-index not needed — the whole header sits above the
mobile menu via its own stacking context at z-index: 130 */
}
.burger span {
display: block;
width: 24px;
height: 2px;
background: var(--white);
transition: transform 0.3s ease, opacity 0.2s ease;
transform-origin: center;
}
/* Open state — animate into a cross.
Each bar is 2px tall with 5px gap → centre-to-centre distance
between top and bottom bars is 7px. To meet at the centre,
the top bar translates +7px down and the bottom bar -7px up,
then both rotate 45°. Middle bar simply fades out. */
.burger.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.burger.is-open span:nth-child(2) {
opacity: 0;
}
.burger.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile menu — full-screen olive overlay with vertically
stacked, centred nav links. Hidden by default; revealed
when .is-open is toggled on the element. */
.mobile-menu {
display: none; /* only ever shown at <=1024px via media query */
position: fixed;
inset: 0;
background-color: var(--olive);
z-index: 110;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.mobile-menu.is-open {
opacity: 1;
pointer-events: auto;
}
.mobile-menu nav {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
text-align: center;
}
.mobile-menu li {
margin: 0;
padding: 0;
}
.mobile-menu a {
display: block;
padding: 0;
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 21px;
letter-spacing: 0.02em;
color: var(--parchment);
text-decoration: none;
}
.mobile-menu a:hover {
opacity: 0.7;
}
/* Header responsive */
@media (max-width: 1024px) {
.header-nav-wrapper { display: none; }
.header-border-line { display: none; }
.burger { display: flex; }
.mobile-menu { display: block; }
/* Sub-nav is a desktop-only construct. At the burger breakpoint the
primary nav is hidden, so its anchor-X positioning has nothing to
line up with — and the design has no separate mobile placement
for it. Hide everywhere so it can't appear on touch. */
.subnav-wrap { display: none; }
}
@media (max-width: 767px) {
.burger { padding: 0 var(--pad-mobile); }
}
@media (max-width: 450px) {
:root { --logo-height: 43px; }
.burger span { width: 20px; }
}
/* ═══════════════════════════════════════════════
HERO
═══════════════════════════════════════════════ */
.hero {
position: relative;
width: 100%;
height: calc(100vh - var(--logo-height));
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Background image */
.hero-bg {
position: absolute;
inset: 0;
background: url('assets/images/hero-bg.jpg') center center / cover no-repeat; background-image: image-set(url('assets/images/hero-bg.webp') type('image/webp'), url('assets/images/hero-bg.jpg') type('image/jpeg'));
z-index: 0;
}
/* Orb — above bg */
.hero-orb {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1;
line-height: 0;
}
@media (min-width: 1025px) {
.hero-orb { bottom: -50%; }
}
.hero-orb img {
width: 100%;
display: block;
}
/* Gradient fade — above orb, behind text.
Covers bottom 35% and bleeds into the green section below */
.hero-fade {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 35%;
background: linear-gradient(to top, var(--olive) 0%, rgba(77, 94, 60, 0) 100%);
pointer-events: none;
z-index: 2;
}
/* Content — above everything */
.hero-content {
position: relative;
z-index: 3;
}
/* Heading + logo wrapper */
.hero-text-logo {
position: relative;
width: 100%;
}
@media (max-width: 1024px) {
.hero-text-logo {
display: flex;
flex-direction: column;
align-items: center;
}
}
/* Heading — absolutely positioned above the logo.
On desktop, centred between 'b' and 'd' of the wordmark
(approx midpoint ~76% from left). */
.hero-heading {
position: absolute;
bottom: 100%;
left: 72.5%;
transform: translateX(-50%);
white-space: nowrap;
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-style: normal;
font-size: 38px;
color: var(--white);
line-height: 1.2;
padding-bottom: 4px;
}
.hero-heading em {
font-style: italic;
}
/* Full-width wordmark */
.hero-logo {
display: block;
width: 100%;
height: auto;
}
/* Hero responsive */
@media (max-width: 1024px) {
.hero-heading {
position: relative;
bottom: auto;
left: auto;
transform: none;
font-size: 28px;
text-align: center;
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.hero-heading {
font-size: 22px;
white-space: normal;
}
}
/* ── CONTAINER NARROW ── */
.container-narrow {
max-width: 1100px;
margin: 0 auto;
padding-left: var(--pad-desktop);
padding-right: var(--pad-desktop);
}
@media (max-width: 1024px) {
.container-narrow {
padding-left: var(--pad-tablet);
padding-right: var(--pad-tablet);
}
}
@media (max-width: 767px) {
.container-narrow {
padding-left: var(--pad-mobile);
padding-right: var(--pad-mobile);
}
}
/* ═══════════════════════════════════════════════
INTRO SECTION
═══════════════════════════════════════════════ */
.intro {
position: relative;
background-color: var(--green);
overflow: hidden;
padding: 270px 0 315px;
/* Establish a local stacking context so the orb (z-index 1)
and the content (z-index 2) inside this section stack
predictably against each other, isolated from the rest of
the page. Without this, the orb's transform — applied by
the mouse-follow JS — creates its own stacking context
that can paint above the content depending on what other
stacking contexts surround the section. */
isolation: isolate;
}
/* Floating orb — JS moves this, offset left of centre */
.intro-orb {
position: absolute;
top: 50%;
left: 85%;
width: 320px;
height: 320px;
pointer-events: none;
z-index: 1;
will-change: transform;
transition: transform 0.08s linear;
}
.intro-orb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Content sits above orb */
.intro-content {
position: relative;
z-index: 2;
}
/* Heading */
.intro-heading {
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-style: normal;
font-size: 38px;
color: var(--white);
line-height: 1.35;
text-align: center;
/* margin-bottom reduced from 150px in v1.26.2 — the CTA button
added in this round sits between the heading and the stats
row, so the heading no longer needs to carry the full
heading-to-stats rhythm by itself. .intro-cta below supplies
the bottom half of the gap. */
margin-bottom: 50px;
}
/* Intro CTA — the primary pill button between the intro paragraph
and the stats row. Centred horizontally; its margin-bottom (plus
the intro-heading's reduced margin-bottom above) recreates the
original ~150px rhythm with the new element inserted. */
.intro-cta {
display: flex;
justify-content: center;
margin: 0 0 90px;
}
/* The intro-heading was originally a single
element. The wysiwyg ACF field that now drives this content wraps
its output in
via wpautop, so the live markup is
. The inner paragraph
inherits typography from .intro-heading fine, but contributes its
own default top/bottom margin which adds unwanted whitespace
inside the wrapper. Reset to zero so the visual matches the
original single-paragraph layout. */
.intro-heading p {
margin: 0;
}
.intro-heading em {
font-style: italic;
}
/* Stats row */
.intro-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
text-align: center;
}
.stat-label {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--white);
margin-bottom: 12px;
display: block;
}
.stat-number {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 120px;
color: var(--white);
line-height: 1;
display: block;
}
/* Intro responsive */
@media (max-width: 1024px) {
.intro { padding: 120px 0 150px; }
.intro-heading { font-size: 30px; margin-bottom: 40px; }
.intro-cta { margin-bottom: 65px; }
.intro-orb { width: 320px; height: 320px; }
.stat-number { font-size: 90px; }
}
@media (max-width: 767px) {
.intro { padding: 90px 0 120px; }
.intro-heading { font-size: 24px; margin-bottom: 30px; }
.intro-cta { margin-bottom: 45px; }
.intro-stats { gap: 20px; }
.intro-orb { width: 220px; height: 220px; left: 85%; }
.stat-number { font-size: 63px; }
.stat-label { font-size: 10px; }
}
/* ═══════════════════════════════════════════════
SESSIONS SECTION
═══════════════════════════════════════════════ */
.sessions {
position: relative;
background-color: var(--green);
padding: 0 0 180px;
}
.sessions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: var(--parchment);
padding: 5px;
gap: 0;
border-radius: 4px;
}
.session-card {
padding: 48px 40px;
display: flex;
flex-direction: column;
border: 1px solid var(--ink);
}
/* No double borders — remove left border on cards 2 and 3 */
.session-card:not(:first-child) {
border-left: none;
}
/* Corner radii — desktop: card 1 left corners, card 3 right corners */
.session-card:first-child {
border-radius: 2px 0 0 2px;
}
.session-card:last-child {
border-radius: 0 2px 2px 0;
}
.session-title {
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-size: 32px;
color: var(--ink);
text-align: center;
line-height: 1.2;
margin-bottom: 24px;
}
/* Session body styles target the paragraphs inside .session-card
directly, not a `.session-body` class. The original markup put
class="session-body" on each , but the wysiwyg field that
now drives this content emits bare
tags. Selecting via the
parent .session-card matches any paragraph or the editor
produces, regardless of class. The legacy `.session-body`
selector is kept alongside so any older markup still works.
text-indent: 15px gives the book-style indent that distinguishes
consecutive paragraphs without needing blank lines between them
(margin: 0). */
.session-card p,
.session-body {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 12px;
color: var(--ink);
line-height: 1.7;
text-align: justify;
text-indent: 15px;
margin: 0;
}
.session-btn {
display: block;
margin-top: 24px;
padding: 16px 24px;
border: 1px solid var(--ink);
background: none;
color: var(--ink);
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.session-btn:hover {
background: var(--dawn);
color: var(--ink);
}
/* Dawn text highlight — inline marker effect. Same parent-scoped
selector as the body rule above so it applies regardless of
what classes the wysiwyg output uses. */
.session-card mark,
.session-body mark {
background: var(--dawn);
color: inherit;
padding: 6px 3px 12px;
}
/* Sessions responsive */
@media (max-width: 1024px) {
.sessions { padding-bottom: 80px; }
.session-card { padding: 36px 28px; }
.session-title { font-size: 26px; }
}
@media (max-width: 767px) {
.sessions { padding-bottom: 60px; }
.sessions-grid { grid-template-columns: 1fr; }
.session-card {
border-left: 1px solid var(--ink);
border-top: none;
border-radius: 0;
padding: 32px 24px;
}
/* Restore left border on cards 2+ that was removed for desktop */
.session-card:not(:first-child) {
border-left: 1px solid var(--ink);
}
/* Mobile: top-left and top-right radius on first card */
.session-card:first-child {
border-top: 1px solid var(--ink);
border-radius: 2px 2px 0 0;
}
/* Mobile: bottom-left and bottom-right radius on last card */
.session-card:last-child {
border-radius: 0 0 2px 2px;
}
.session-title { font-size: 28px; }
}
/* ═══════════════════════════════════════════════
TESTIMONIAL SECTION
═══════════════════════════════════════════════ */
.testimonial {
position: relative;
background-color: var(--olive);
overflow: visible;
}
/* Dusk-to-transparent gradient overlay — bottom upward */
.testimonial-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--dusk) 0%, rgba(89, 116, 139, 0) 55%);
pointer-events: none;
z-index: 0;
}
/* ── SECTION BOUNDARY ORB ──
Zero-height element placed BETWEEN two sections in the DOM.
Takes no space; the img is absolutely centred on the boundary line.
z-index: 2 in root context sits above all section backgrounds
(block elements, step 3) but below section content at z:3. */
.orb-divider {
position: relative;
height: 0;
overflow: visible;
pointer-events: none;
z-index: 2;
line-height: 0;
}
.orb-divider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: translateY(-50%);
display: block;
}
/* Two-column inner layout — explicit 50/50 */
.testimonial-inner {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 50% 50%;
align-items: stretch;
min-height: 80vh;
gap: 40px;
}
/* Left — image sits naturally, no stretching */
.testimonial-left {
display: flex;
align-items: center;
justify-content: center;
}
.testimonial-image {
display: block;
max-width: 100%;
height: auto;
}
/* Right — layout column, no background here */
.testimonial-right {
padding: 90px 0;
display: flex;
flex-direction: column;
gap: 24px;
/* justify-content: center — was flex-end before v1.26.2.
Centring puts the quote + body + CTA stack vertically
in the middle of the photo's height instead of dropping
it against the bottom edge, matching the redesigned
testimonial layout where the quote is no longer
visually anchored to the ELOISE.png background-art that
used to occupy the top half. */
justify-content: center;
}
/* Blockquote — ELOISE.png as background, quote padded clear of graphic */
.testimonial-quote {
/* Background ELOISE.png art + its associated padding offsets
were removed in v1.26.2 — the quote no longer composites
over a portrait image, so the position:relative anchor is
also gone (nothing left to layer against). The natural
flow now positions the text directly inside its flex
column. */
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-size: 46px;
color: var(--parchment);
line-height: 1.25;
}
.testimonial-quote-wrap {
display: flex;
flex-direction: column;
gap: 16px;
}
.testimonial-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.testimonial-meta-row {
display: flex;
gap: 24px;
align-items: baseline;
}
.meta-label {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 12px;
color: var(--parchment);
opacity: 0.7;
min-width: 48px;
}
.meta-value {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 12px;
color: var(--parchment);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.testimonial-body {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 12px;
color: var(--parchment);
line-height: 1.7;
margin: 0;
max-width: 60%;
}
/* ── TESTIMONIAL CONTAINER ── */
.container-testimonial {
max-width: 1200px;
margin: 0 auto;
padding-left: var(--pad-desktop);
padding-right: var(--pad-desktop);
}
/* Stacked testimonials (home_testimonials repeater): space each
duplicated block apart. Single-testimonial pages are unaffected
(no adjacent sibling); each block keeps its min-height: 80vh from
.testimonial-inner. */
.container-testimonial + .container-testimonial {
margin-top: 100px;
}
@media (max-width: 1024px) {
.container-testimonial {
padding-left: var(--pad-tablet);
padding-right: var(--pad-tablet);
}
}
@media (max-width: 767px) {
.container-testimonial {
padding-left: var(--pad-mobile);
padding-right: var(--pad-mobile);
}
}
.testimonial-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
max-width: 60%;
}
/* ═══════════════════════════════════════════════
PILL BUTTON (shared across CTAs and filter pills)
Background artwork comes from a ![]()
dropped in as a child of the button. Colour modifier
(.pill--) only sets the text colour.
═══════════════════════════════════════════════ */
.pill {
position: relative;
display: inline-block;
/* Consistent pill sizing across the theme. 240px fits the widest
label currently in use ("Corporate Training", measured at ~235px
rendered at 12px / 700 / 0.08em letter-spacing including the
40px+40px horizontal padding) with a small buffer for kerning
variance. min-width (rather than fixed width) lets a future
longer label grow gracefully instead of clipping or wrapping —
white-space: nowrap below would otherwise force overflow. */
min-width: 240px;
padding: 30px 40px;
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
text-align: center;
border: none;
background: transparent;
cursor: pointer;
}
.pill-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 125%;
height: 125%;
object-fit: contain;
pointer-events: none;
z-index: 0;
/* Source artwork is a glow-on-black plate (uniform 572x216). Screen
blend drops the black to transparent and additively brightens the
underlying section with the centre colour, which is what gives the
pill its luminous halo on parchment/olive/bark backdrops. */
mix-blend-mode: screen;
}
.pill > span {
position: relative;
z-index: 1;
}
/* Text colour per image variant */
.pill--dawn,
.pill--spell { color: var(--ink); }
.pill--dusk,
.pill--olive,
.pill--bark { color: var(--parchment); }
/* Tighter padding for the testimonial CTA */
.testimonial-cta .pill { padding: 30px; }
.testimonial-arrow {
height: 12px;
width: auto;
display: block;
flex-shrink: 0;
}
/* Testimonial responsive */
@media (max-width: 1024px) {
.testimonial-inner {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.testimonial-quote {
/* Base rule (v1.26.2+) no longer carries a background or
padding; only the responsive font-size step-down remains
here. */
font-size: 28px;
}
.testimonial-body { max-width: 100%; }
.testimonial-cta { max-width: 100%; }
}
@media (max-width: 767px) {
.testimonial {
padding-top: 90px;
}
.testimonial-inner {
grid-template-columns: 1fr;
min-height: auto;
gap: 40px;
}
.testimonial-left { height: auto; }
.testimonial-image { width: 100%; height: auto; max-width: 100%; }
.testimonial-right { padding: 0 0 60px; }
.testimonial-quote { font-size: 24px; }
.testimonial-body { max-width: 100%; }
.testimonial-cta { max-width: 100%; }
}
/* ═══════════════════════════════════════════════
PARTNERS SECTION
═══════════════════════════════════════════════ */
.partners {
background-color: var(--dusk);
padding: 120px 0;
overflow: hidden;
position: relative;
}
.partners-row {
overflow: hidden;
margin-bottom: 40px;
position: relative;
z-index: 3;
}
.partners-row:last-child {
margin-bottom: 0;
}
/* The track holds two identical sets of logos back-to-back.
Animating to -50% (left) or from -50% to 0 (right) loops seamlessly. */
.partners-track {
display: flex;
align-items: center;
width: max-content;
gap: 100px;
}
.partners-track--left {
animation: marquee-left 42s linear infinite;
}
.partners-track--right {
animation: marquee-right 42s linear infinite;
}
.partners-track:hover {
animation-play-state: paused;
}
.partner-logo {
height: 30px;
width: auto;
display: block;
flex-shrink: 0;
opacity: 0.85;
}
@keyframes marquee-left {
from { transform: translateX(0); }
to { transform: translateX(-25%); }
}
@keyframes marquee-right {
from { transform: translateX(-25%); }
to { transform: translateX(0); }
}
@media (max-width: 767px) {
.partners { padding: 60px 0; }
.partners-row { margin-bottom: 28px; }
}
/* ═══════════════════════════════════════════════
STORIES SECTION
═══════════════════════════════════════════════ */
/* NO z-index on .stories — avoids creating a stacking context that
traps children. Orb and grid participate directly in root context. */
.stories {
background-color: var(--dusk);
padding: 120px 0 315px;
position: relative;
overflow: visible;
}
/* Outer wrapper removed — z-index moved to stories-grid directly */
.stories-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
position: relative;
z-index: 3;
}
/* ───────────────────────────────────────────────────────────────
.story-card — homepage + archive card.
Layout mirrors .resource-card on Learn:
• Top half: featured image (aspect-ratio 572/228) with a
CATEGORY (top-left) + date (top-right) overlay in parchment.
• Bottom half: colour-bg body with serif title, optional
description paragraph, and a CTA button pinned to the bottom
(left-aligned). The CTA uses inherit/currentColor so it
picks up the card's text colour automatically.
The 5px outer padding + 1px inner frame creates the inset-border
treatment used elsewhere on the site (.event-card, .alumni-card).
─────────────────────────────────────────────────────────────── */
.story-card {
position: relative;
border-radius: 4px;
padding: 5px;
display: flex;
flex-direction: column;
}
/* 5 colour variants — applied to BOTH posts and videos.
Variant for a given post is deterministic from its ID via
spellbound_post_card_variant_for_id() in inc/post-card.php. */
.story-card--dusk { background: var(--dusk); color: var(--parchment); }
.story-card--spell { background: var(--spell); color: var(--ink); }
.story-card--dawn { background: var(--dawn); color: var(--ink); }
.story-card--olive { background: var(--olive); color: var(--parchment); }
.story-card--bark { background: var(--bark); color: var(--parchment); }
/* Parchment — added in v1.25.2 for the homepage's fixed
(parchment/spell/olive/dawn) 4-card colour sequence. Treated as
a "light card" like spell + dawn for hover purposes, so the
button flip target below also lists it. The variant is NOT
added to spellbound_post_card_variant_for_id's ID-based cycle
in inc/post-card.php — that cycle stays at 5 colours so archive
page cards keep their existing distribution. Parchment is
reached only when a caller passes a fixed variant sequence
(currently just the homepage's stories grid). */
.story-card--parchment { background: var(--parchment); color: var(--ink); }
/* Inner bordered rectangle — currentColor picks up the card's
text colour so the frame reads parchment on dark cards
(dusk / olive / bark) and ink on light cards (spell / dawn). */
.story-card-inner {
border: 1px solid currentColor;
border-radius: 2px;
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1;
}
/* Image area — top half. Fixed aspect-ratio so the card's image
half is consistent regardless of the source image's dimensions.
Dark fallback bg means cards without a featured image still
render a deliberate surface for the CATEGORY/date overlay. */
.story-card-image {
position: relative;
aspect-ratio: 572 / 228;
flex-shrink: 0;
overflow: hidden;
background: var(--ink);
border-bottom: 1px solid currentColor;
}
.story-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* CATEGORY (left) + date (right) overlay sits at the top of the
image. Always parchment colour because the overlay reads over
a (presumed) dark/photographic image surface — not over the
card body's variant colour. The .story-card-category PHP
helper sends the category in its natural case; the uppercase
transform is applied at output via strtoupper() in the
markup helper (so screen readers get the natural case where
available). */
.story-card-meta {
position: absolute;
top: 20px;
left: 25px;
right: 25px;
display: flex;
justify-content: space-between;
align-items: baseline;
z-index: 2;
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--parchment);
}
/* Body — bottom half. flex:1 + flex-direction:column lets the CTA
pin to the bottom via margin-top:auto on .story-card-btn while
the title and description sit naturally at the top of the body
area. */
.story-card-body {
padding: 25px 25px 28px;
display: flex;
flex-direction: column;
flex: 1;
}
.story-card-title {
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-size: clamp(28px, 2.5vw, 36px);
line-height: 1.15;
margin: 0 0 14px;
letter-spacing: -0.005em;
color: inherit;
}
.story-card-title em { font-style: italic; }
.story-card-description {
font-family: 'AlteHaasGrotesk', sans-serif;
font-size: 14px;
line-height: 1.6;
text-align: justify;
margin: 0 0 24px;
color: inherit;
}
/* CTA button — pinned to the bottom of the body via margin-top:auto.
align-self:flex-start keeps it left-aligned at its natural width
instead of stretching across the full body. Border + text pick
up currentColor so the button matches the card's text colour;
hover flips bg/text per variant via the rules below. */
.story-card-btn {
display: inline-block;
align-self: flex-start;
margin-top: auto;
padding: 12px 24px;
border: 1px solid currentColor;
background: transparent;
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: inherit;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
/* Hover — flip to a contrasting fill per variant. Light cards
(parchment, spell, dawn) flip to ink-bg/parchment-text; dark
cards (dusk, olive, bark) flip to parchment-bg/ink-text. */
.story-card--parchment .story-card-btn:hover,
.story-card--spell .story-card-btn:hover,
.story-card--dawn .story-card-btn:hover {
background: var(--ink);
color: var(--parchment);
}
.story-card--dusk .story-card-btn:hover,
.story-card--olive .story-card-btn:hover,
.story-card--bark .story-card-btn:hover {
background: var(--parchment);
color: var(--ink);
}
/* ─── STORY CARD: COMPACT VARIANT ─────────────────────────────────
Homepage-only no-image variant per Figma 1050:606.
Applied via the `story-card--compact` class added by
spellbound_render_story_card_markup when its $compact arg is
true (currently passed only by the homepage stories grid).
Visual differences from the standard imaged card:
- Featured image is removed entirely (the
wrapper is not rendered — saving a thumbnail fetch + the
overlay markup).
- Date moves from the image-overlay header into the top of
the body section. Renders bold, ink-on-card-bg, with mild
letter-spacing — no longer uppercase like the overlay
variant (the Figma shows the natural "10.02.26" date format).
- Title is larger (42px Perfectly Nineties at desktop scale)
so it carries more visual weight as the card's primary
hook. Italic emphasis via
in the headline is rendered
in Perfectly Nineties' italic cut and is the design's
trademark editorial flourish for this card.
- Body description is justified with a 20px first-line indent
— Figma's deliberate book-set treatment. Capped at 5 lines
via -webkit-line-clamp as a visual safety net for any
excerpt the editor pastes that's longer than the 35-word
trim spellbound_render_story_card_post/_video already apply.
- CTA button is full-width with its own bordered rectangle —
reads as the card's primary action instead of a corner CTA.
The 1px ink/currentColor frame inside .story-card-inner and the
per-variant background/text colours are inherited unchanged
from the base .story-card rules above. */
.story-card--compact .story-card-image {
/* Image block isn't rendered when compact, but this guard
ensures nothing weird shows up if a third party / future
caller hands us a story-card--compact element that still
contains an image child. */
display: none;
}
.story-card--compact .story-card-body {
/* Figma padding: 25px sides, 20–25px top/bottom inside the inner
bordered rectangle. The image-on-top variant's 25/25/28 was
fine; compact carries a touch more breathing room because
the card is busier vertically without the image break. */
padding: 26px 30px;
/* Body owns the entire inner card height (no image taking
half), so it needs flex column with the .story-card-btn
pinned to the bottom via margin-top:auto. Already inherited
from the base .story-card-body rule, but re-asserting here
keeps the intent explicit and survives any future base
tweaks. */
display: flex;
flex-direction: column;
}
/* Date — moved from the image overlay into the top of the body.
The .story-card-meta rule above only applies inside .story-card-image
(because of the wrapper),
so the date here is unstyled by that rule and we set it
from scratch. Uses `inherit` for colour so the date reads
ink on light cards (parchment/spell/dawn) and parchment on
dark cards (olive) — matches the body text it sits with. */
.story-card--compact .story-card-date {
display: block;
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.04em;
text-transform: none;
color: inherit;
margin: 0 0 18px;
}
/* Title — Perfectly Nineties at 42px per Figma. clamp gives
responsive shrinkage on narrow viewports while keeping the
42px ceiling. */
.story-card--compact .story-card-title {
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-size: clamp(28px, 3.2vw, 42px);
line-height: 1.17;
letter-spacing: -0.01em;
margin: 0 0 24px;
}
.story-card--compact .story-card-title em {
font-style: italic;
}
/* Body — Alte Haas Grotesk Regular (not Bold like the overlay
meta), 14px / 22px line-height, justified, with a 20px first-
line indent for the book-set look Figma calls for. Line-clamped
to 5 to keep the card height stable across posts of varying
excerpt length — combined with the 35-word PHP trim, this gives
a reliable visual envelope. */
.story-card--compact .story-card-description {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 22px;
text-align: justify;
text-indent: 20px;
color: inherit;
margin: 0 0 24px;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* CTA — full-width bordered button at the bottom of the card.
Overrides the base inline-block / align-self:flex-start / small-
padding pattern to render as the design's prominent block CTA.
margin-top:auto (inherited from the base) pushes the button to
the bottom when the description is shorter than the line-clamp
ceiling. Hover/focus colours are inherited from the existing
light-card / dark-card hover rules above. */
.story-card--compact .story-card-btn {
display: block;
align-self: stretch;
width: 100%;
padding: 19px 24px;
font-size: 14px;
letter-spacing: 0.06em;
}
/* ───────────────────────────────────────────────────────────────
.story-card--video-bg — applied (in compact mode only) to video
items in the homepage stories grid, so they read as photographic
features alongside the solid-colour post cards.
Composition (v1.28.4):
• The cover image lives on the OUTER .story-card, so it
extends edge-to-edge — including the 5px ring that's
otherwise the variant-colour padding. The variant colour
is hidden underneath the image (background-image paints
over background-color in CSS).
• A ::before pseudo-element on the OUTER .story-card holds
an 80%-opaque parchment wash, covering the whole card to
its rounded corners (border-radius: inherit). This includes
both the 5px ring AND the inner content area — a uniform
tonal pass across the whole card.
• The 1px inner border on .story-card-inner sits 5px inset
from the card edge, painted ABOVE the overlay via the
inner element's z-index: 1, drawn over the image+overlay
like a thin decorative frame line. So the border reads as
a single 5px-inset rectangle on top of a uniformly
parchment-overlay'd image.
• Text + button border colours are forced to ink — the
parchment overlay would clash with the variant-specific
parchment text used on dark variants like olive/bark/dusk,
and ink reads cleanly against parchment regardless of
what's underneath.
• The button hover state mirrors the parchment-variant card's
hover (ink fill, parchment text), keeping a consistent
contrast invert across all video-bg cards regardless of
which variant colour they happen to also carry.
URL delivery: PHP sets the cover URL via a CSS custom property
`--video-bg-image` on the inline style attribute (rather than
writing the url() directly into a background-image inline style)
so this rule stays in CSS and only the URL value travels inline.
─────────────────────────────────────────────────────────────── */
.story-card--video-bg {
/* Cover image fills the outer card edge-to-edge. The base
.story-card already has position:relative + 5px padding +
border-radius:4px; we just add the bg-image atop the variant
colour (which is then visually hidden by the image cover). */
background-image: var(--video-bg-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.story-card--video-bg .story-card-inner {
/* z-index: 1 (v1.28.4) — promotes the inner element to its own
stacking context above the ::before overlay below, so the 1px
border on this element paints OVER the overlay rather than
under it. Without this, the overlay (a positioned descendant
with z-index: 0) would paint after the inner element's
non-positioned border in CSS stacking order and obscure it. */
position: relative;
z-index: 1;
color: var(--ink);
}
.story-card--video-bg::before {
/* Parchment overlay on the OUTER .story-card (v1.28.4 — was on
.story-card-inner through v1.28.3). Covers the whole card,
including the 5px ring of cover image that's otherwise visible
outside the inner element's border. The 1px inner border still
reads as a decorative inset frame line because .story-card-inner
above is lifted to z-index: 1, painting the border above this
overlay.
`border-radius: inherit` picks up the parent's `border-radius:
4px` so the overlay matches the card's rounded corners rather
than rendering as a sharp-cornered rectangle bleeding past them.
Required because absolutely-positioned children aren't clipped
by their parent's border-radius unless overflow:hidden is set
on the parent (which would have side effects on other behaviour). */
content: '';
position: absolute;
inset: 0;
background: var(--parchment);
opacity: 0.8;
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
/* Body content above the overlay. Redundant now that
.story-card-inner above carries z-index: 1 (the body sits inside
the inner's own stacking context, so it paints above the overlay
regardless), but kept as explicit documentation of intent and as
defence against any future change that removes the inner's
z-index. */
.story-card--video-bg .story-card-body {
position: relative;
z-index: 1;
}
/* Force ink text + meta across all interior elements. The
compact variant uses `color: inherit` on each of these so this
single override on the wrapper cascades down. Listed explicitly
for two reasons: defence against any future child-element rule
that resets the inherit chain, and so the override is visible
when grepping the file for any of these selectors. */
.story-card--video-bg .story-card-title,
.story-card--video-bg .story-card-description,
.story-card--video-bg .story-card-date {
color: var(--ink);
}
/* Button hover invert — matches the parchment-variant card hover
pattern (ink fill, parchment text). Specificity 0,2,0 equals the
existing per-variant hover rules; later source order wins, so
make sure this rule stays AFTER the variant hover block above. */
.story-card--video-bg .story-card-btn:hover {
background: var(--ink);
color: var(--parchment);
}
/* ─── Equal-height cards in the homepage stories grid (v1.28.3) ────
Scoped to .stories-grid--compact so only the homepage instance is
affected; the Stories archive grid (.stories-grid--archive) stays
on the original auto-row sizing.
Two halves to this fix:
1. The CSS half (here): `flex: 1` on the body so the body stretches
to fill the inner card vertically. Without this, the body sizes
to its content height and any extra vertical space sits as gap
at the bottom of the card — so even when the card's outer
box is forced to a taller min-height (by the JS below), the
body content (title + description + CTA) would clump at the top
with empty space below. With it, the body fills the available
space and the existing `margin-top: auto` on the CTA button
bottom-pins it within that stretched body — titles top-align,
descriptions sit in the middle, CTA buttons bottom-align
cleanly across all four cards.
2. The JS half (in assets/js/main.js, initEqualHeightStoriesGrid):
measures each card's natural height and sets min-height on
every card to the tallest. Re-runs on viewport resize.
Why JS rather than pure CSS: CSS Grid's `align-items: stretch`
only equalises cards WITHIN A ROW, and `grid-auto-rows: 1fr`
doesn't actually equalise across rows when the grid container
has no explicit height (the spec falls back to per-row max-
content sizing in that case). So for a 2-column / 2-row
layout where row 1 and row 2 can have different tallest cells,
JS is the only reliable way to equalise all four to the global
max.
─────────────────────────────────────────────────────────────── */
.stories-grid--compact .story-card-body {
flex: 1;
}
@media (max-width: 1024px) {
.stories-grid { gap: 40px; }
.stories { padding-bottom: 225px; }
}
@media (max-width: 768px) {
.stories { padding: 60px 0 120px; }
.stories-grid { grid-template-columns: 1fr; gap: 24px; }
.story-card-body { padding: 20px; }
.story-card-meta { top: 16px; left: 18px; right: 18px; font-size: 13px; }
}
/* ═══════════════════════════════════════════════
CHOOSE SECTION
═══════════════════════════════════════════════ */
.choose {
position: relative;
background-color: var(--bark);
padding: 270px 0 150px;
overflow: visible;
z-index: 5;
}
/* Seven white circles straddling the top border.
Container extends 10px beyond each viewport edge so the
first and last circles are exactly half off-screen. */
.choose-circles {
position: absolute;
top: 0;
left: -10px;
right: -10px;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
z-index: 3;
}
.choose-circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--white);
flex-shrink: 0;
}
/* Floating orb — inverted mouse/scroll movement */
.choose-orb {
position: absolute;
top: 50%;
left: 20%;
width: 320px;
height: 320px;
pointer-events: none;
z-index: 1;
will-change: transform;
transition: transform 0.08s linear;
line-height: 0;
}
.choose-orb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Content above orb */
.choose-content {
position: relative;
z-index: 2;
}
.choose-heading {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 140px;
line-height: 0.95;
color: var(--parchment);
text-transform: uppercase;
letter-spacing: -0.01em;
text-align: center;
}
/* Choose responsive */
@media (max-width: 1024px) {
.choose { padding-top: 120px; }
.choose-heading { font-size: 120px; }
.choose-orb { width: 240px; height: 240px; }
}
@media (max-width: 767px) {
.choose { padding: 90px 0 80px; }
.choose-heading { font-size: 72px; }
.choose-orb { width: 180px; height: 180px; left: 15%; }
.choose-circles { left: -10px; right: -10px; }
}
/* ═══════════════════════════════════════════════
CHOOSE IMAGES SECTION
═══════════════════════════════════════════════ */
.choose-images {
background-color: var(--bark);
padding: 0 0 0;
position: relative;
z-index: 5;
}
.choose-images img {
display: block;
width: 100%;
height: auto;
}
/* ═══════════════════════════════════════════════
PATHS MARQUEE SECTION
═══════════════════════════════════════════════ */
.paths {
background-color: var(--bark);
padding: 120px 0;
overflow: hidden;
position: relative;
z-index: 5;
}
.paths-track {
/* Note (v1.27.4): the inter-item spacing now lives as a
* `margin-right: 80px` on each `.path-item` below, not as
* `gap: 80px` here. The reason is purely about marquee
* seam math.
*
* With N items per pass duplicated to 2 passes (so 2N items
* total), `gap` adds spacing BETWEEN items but not AFTER
* the last item — so the track's natural width comes out to
* 2N × item + (2N − 1) × gap
* which is gap/2 shorter than two full passes laid head-to-
* tail. The animation translates `0 → −50%`, but −50% of the
* above width lands HALFWAY THROUGH the gap that should sit
* between pass 1 and pass 2 — not at the start of pass 2.
*
* When the animation snaps back to 0 each cycle that gap/2
* misalignment shows up as a visible 40px backwards jump in
* the marquee. Replacing `gap` with per-item `margin-right`
* makes the track width exactly 2N × (item + 80) so −50%
* lands precisely on the seam between passes, and the loop
* reads as truly seamless. */
display: flex;
align-items: center;
width: max-content;
animation: paths-left 54s linear infinite;
}
.paths-track:hover {
animation-play-state: paused;
}
@keyframes paths-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Each heading/button pair */
.path-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
flex-shrink: 0;
/* Inter-item horizontal spacing — see the long note on
.paths-track above for why this is margin-right per item
rather than `gap` on the track. The trailing margin on
the very last item of pass 2 doesn't show visually
because the section has overflow:hidden; it exists to
make the animation translate distance match the seam. */
margin-right: 80px;
}
/* Static mode reset: when the marquee isn't animating (1 or 2
items, centred in the track via .paths--static .paths-track's
`justify-content: center`), the last item's trailing
margin-right would shift the centred group ~40px to the left
of true centre. Clearing it on the static last child keeps
the centring visually balanced. The animated case wants the
trailing margin and so isn't affected — those tracks have 4+
items and use the animation, not the static override. */
.paths--static .path-item:last-child {
margin-right: 0;
}
.path-heading {
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-size: 38px;
color: var(--parchment);
white-space: nowrap;
line-height: 1;
}
.path-heading em {
font-style: italic;
}
@media (max-width: 767px) {
.paths { padding: 60px 0; }
.path-heading { font-size: 28px; }
}
/* ═══════════════════════════════════════════════
FIND YOUR VOICE SECTION
═══════════════════════════════════════════════ */
.voice {
position: relative;
background-color: var(--bark);
padding: 270px 0;
overflow: hidden;
z-index: 5;
}
/* Voice section colour modifier. The base .voice rule defaults to
bark (homepage); pages where the design calls for a different
colour add the modifier class. About uses olive so the section
reads as a soft sunset finale after the dusk-coloured values band. */
.voice--olive {
background-color: var(--olive);
}
/* Orb — bottom aligned, full width, above bg, behind content */
.voice-orb {
position: absolute;
bottom: -200px;
left: 0;
width: 100%;
z-index: 1;
line-height: 0;
pointer-events: none;
}
.voice-orb img {
width: 100%;
display: block;
}
.voice-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
}
.voice-heading {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 140px;
line-height: 0.95;
color: var(--parchment);
text-transform: uppercase;
letter-spacing: -0.01em;
text-align: center;
}
@media (max-width: 1024px) {
.voice { padding: 80px 0 150px; }
.voice-heading { font-size: 100px; }
.voice-orb { bottom: 0; }
}
@media (max-width: 767px) {
.voice { padding: 60px 0 120px; }
.voice-heading { font-size: 60px; }
}
/* ─── VOICE SUBSCRIBE ─────────────────────────────────────────────
A smaller "Stay up to date" heading + email-subscribe form
sitting below the main voice CTA pill, still inside .voice.
Reuses the work-with-us-form aesthetic (parchment field cell
with uppercase ink text, dusk-on-hover submit) but in a single-
row two-cell card — slim and self-contained so it doesn't
compete visually with the giant voice headline above.
The form posts to admin-post.php?action=spellbound_subscribe;
the handler in inc/form-handler.php saves a Submission CPT post
with form_type='subscribe' and emails the configured inbox. */
.voice-subscribe {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
margin-top: 24px;
width: 100%;
/* Cap the form width so the email field stays readable on wide
screens; centred under the CTA via .voice-content's align-items. */
max-width: 560px;
}
.voice-subscribe-heading {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.2;
color: var(--parchment);
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
margin: 0;
}
.subscribe-form {
width: 100%;
}
/* Inset-border treatment matching the work-with-us-form-card:
outer parchment band carries the 5px frame, inner card has the
1px ink border. The light parchment card reads well against the
dark bark .voice ground. */
.subscribe-form-card {
background: var(--parchment);
padding: 5px;
border-radius: 4px;
}
.subscribe-form-row {
display: flex;
border: 1px solid var(--ink);
min-height: 59px;
}
.subscribe-form-cell {
position: relative;
flex: 1 1 0;
min-width: 0;
}
.subscribe-form-cell--email {
flex: 1 1 auto;
}
.subscribe-form-cell--submit {
flex: 0 0 auto;
/* The submit cell is intrinsically sized to the button text +
padding; the email field's flex grows to fill the rest. The
left border draws the divider between the two cells. */
border-left: 1px solid var(--ink);
min-width: 160px;
}
.subscribe-form-email {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 18px 24px;
background: transparent;
border: 0;
outline: 0;
border-radius: 0;
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.06em;
color: var(--ink);
text-transform: uppercase;
-webkit-appearance: none;
appearance: none;
}
.subscribe-form-email::placeholder {
color: var(--ink);
opacity: 0.5;
}
.subscribe-form-email:focus-visible {
outline: 2px solid var(--dusk);
outline-offset: -2px;
}
.subscribe-form-submit {
width: 100%;
height: 100%;
min-height: 59px;
margin: 0;
padding: 0 24px;
background: transparent;
border: 0;
outline: 0;
cursor: pointer;
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.06em;
color: var(--ink);
text-transform: uppercase;
transition: background 0.25s ease, color 0.25s ease;
-webkit-appearance: none;
appearance: none;
}
.subscribe-form-submit:hover,
.subscribe-form-submit:focus-visible {
background: var(--dusk);
color: var(--parchment);
}
@media (max-width: 600px) {
/* On narrow viewports the inline row layout puts both cells too
tight to be tappable; stack into two rows with the divider
becoming a top-border on the submit cell. */
.subscribe-form-row {
flex-direction: column;
min-height: 0;
}
.subscribe-form-cell--email {
min-height: 59px;
}
.subscribe-form-cell--submit {
border-left: 0;
border-top: 1px solid var(--ink);
min-width: 0;
}
.voice-subscribe-heading {
font-size: 20px;
}
}
/* ═══════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════ */
.footer {
background-color: var(--olive);
position: relative;
overflow: visible;
z-index: 5;
}
/* 7 circles at the top — same pattern as choose section */
.footer-circles {
position: absolute;
top: 0;
left: -10px;
right: -10px;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
z-index: 3;
}
.footer-circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--white);
flex-shrink: 0;
}
/* Info bar — full width, own side padding, no max-width */
.footer-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px var(--pad-desktop) 0;
width: 100%;
}
.footer-left,
.footer-right {
display: flex;
gap: 32px;
align-items: center;
}
.footer-left span,
.footer-left a,
.footer-right a {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--parchment);
text-decoration: none;
white-space: nowrap;
}
.footer-left a:hover,
.footer-right a:hover {
opacity: 0.7;
}
/* Logo — full width, pulled up 15px to overlap the info row.
.footer-logo-wrap sits after .footer-info in the DOM, so the
full-width wordmark paints over that 15px overlap strip. The
artwork's top edge is transparent (nothing visible covers the
text), but the ![]()
box would still swallow clicks on the
Privacy Policy + social links beneath it. pointer-events: none
lets those clicks pass through — the logo is decorative, not a
link, so nothing here needs to be interactive. */
.footer-logo-wrap {
margin-top: -15px;
line-height: 0;
pointer-events: none;
}
.footer-logo-wrap img {
display: block;
width: 100%;
height: auto;
}
/* Footer responsive — stack at tablet and below */
@media (max-width: 1024px) {
.footer-info {
flex-direction: column;
align-items: center;
gap: 48px;
padding: 50px var(--pad-tablet) 0;
text-align: center;
}
.footer-left {
flex-direction: column;
gap: 8px;
align-items: center;
}
.footer-right {
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.footer-logo-wrap { margin-top: 40px; }
}
@media (max-width: 767px) {
.footer-info { padding-left: var(--pad-mobile); padding-right: var(--pad-mobile); }
}
/* ═══════════════════════════════════════════════
FADE-IN REVEAL
═══════════════════════════════════════════════ */
.fade-up {
opacity: 0;
transition: opacity 0.7s ease;
}
.fade-up.in {
opacity: 1;
}
/* ═══════════════════════════════════════════════
ABOUT PAGE STYLES
═══════════════════════════════════════════════ */
/* ── FONTS ── */
/* ── RESET ── */
/* ── VARIABLES ── */
/* ── BASE ── */
/* ── CONTAINER ── */
/* ═══════════════════════════════════════════════
HEADER (same structure as homepage)
═══════════════════════════════════════════════ */
/* Bottom border line + dot (anchored to active nav item) */
/* Burger — three spans that transform into a cross when open.
The spans stay in the same three-span vertical layout; CSS
rotates the top and bottom into an X and fades the middle. */
/* Open state — animate into a cross.
Each bar is 2px tall with 5px gap → centre-to-centre distance
between top and bottom bars is 7px. To meet at the centre,
the top bar translates +7px down and the bottom bar -7px up,
then both rotate 45°. Middle bar simply fades out. */
/* Mobile menu — full-screen olive overlay with vertically
stacked, centred nav links. Hidden by default; revealed
when .is-open is toggled on the element. */
/* ═══════════════════════════════════════════════
SUB-NAV (per-page in-page section links)
The wrap is rendered on EVERY page (header.php emits it as a
sibling of inside .header-stack; programme renders its
own wrap inline so the orb-divider can sit visually behind the
pill). It contains ALL registered subnavs as siblings, with only
the active page's `hidden` attribute removed — JS toggles those
attributes on hover to swap which subnav is visible.
Layout depends on whether the active page has a default subnav:
• body.has-subnav (About, Programme, Learn) — wrap is part of the
page layout: a 50px green strip below the header that pushes
content down. Matches the original design.
• everywhere else (Home, Stories, Watch …) — wrap collapses to
height:0 with a transparent background, taking NO layout space.
The .subnav child (position:absolute; top:0) renders at the
wrap's top, which is right below the header — so on hover the
pill appears as a floating dropdown without shifting the page
content beneath. When the visitor moves away, JS re-applies the
`hidden` attribute and the dropdown disappears with no layout
change. This is the "highly styled dropdown menu" behaviour.
Positioned so its LEFT edge aligns with the centre of the
hovered/active nav link. JS sets the .subnav child's `left`.
═══════════════════════════════════════════════ */
/* The .header-stack wraps and the always-rendered .subnav-wrap.
Currently it adds no visual styling — the two children flow normally
and the subnav-wrap's `height: 0` trick on no-default pages doesn't
need a positioning context. The class exists structurally so the two
can be scoped together for potential future shared behaviour (e.g.
making the whole chrome sticky) without affecting the rest of the
document. */
.header-stack {
position: relative;
}
.subnav-wrap {
background-color: var(--green);
position: relative;
width: 100%;
height: 50px;
z-index: 50;
}
/* Overlay mode (Home, Stories, Watch — any page without a current-page
subnav). The wrap is rendered into the DOM on every page so that
hover-preview works globally, but on pages without their own subnav
it collapses to zero height and goes transparent — taking no layout
space until the visitor hovers a primary-nav item that has a
registered subnav. The .subnav child is already position:absolute
(top:0 inside the wrap), so when un-hidden it appears as a 50px-tall
strip floating immediately below the header, OVER the page hero
rather than pushing it down. This avoids a layout shift on hover. */
body:not(.has-subnav) .subnav-wrap {
height: 0;
background-color: transparent;
overflow: visible;
}
.subnav {
position: absolute;
top: 0;
/* left set by JS on desktop to align with header dot */
height: 50px;
display: inline-flex;
align-items: center;
gap: 40px;
padding: 0 30px;
background: var(--green);
border-left: 1px solid var(--parchment);
border-right: 1px solid var(--parchment);
border-bottom: 1px solid var(--parchment);
white-space: nowrap;
}
/* Native HTML5 `hidden` attribute would normally apply `display: none`,
but we override it with `display: none !important` to ensure it wins
regardless of source-order or specificity quirks. The JS toggles the
attribute directly (subnav.hidden = true/false) which is the most
accessible approach — screen readers honour the attribute. */
.subnav[hidden] { display: none; }
.subnav a {
font-family: 'AlteHaasGrotesk', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--white);
text-decoration: none;
transition: opacity 0.2s;
}
.subnav a:hover { opacity: 0.75; }
/* Tablet & below: main nav is hidden, so subnav becomes
a simple centered row below the burger header. */
/* ═══════════════════════════════════════════════
STORY HERO
═══════════════════════════════════════════════ */
.story {
position: relative;
background-color: var(--olive);
padding: 120px 0 80px;
overflow: hidden;
}
/* ── STORY / HERO ORB DIVIDER ──
Placed BEFORE in the DOM (mirrors
homepage .orb-divider pattern). Zero-height, takes no
layout space; image absolutely positioned so its TOP edge
sits at the story section's top edge. Image extends
downward by its natural height into the story section
(and beyond if it's tall enough).
z-index: 2 sits above section backgrounds (default 0)
but below anything with z-index: 3+ (content). */
.story-orb-divider {
position: relative;
height: 0;
overflow: visible;
pointer-events: none;
z-index: 2;
line-height: 0;
}
.story-orb-divider img {
position: absolute;
top: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
display: block;
}
.story-content {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: end;
}
.story-heading {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 140px;
line-height: 0.95;
color: var(--parchment);
text-transform: uppercase;
letter-spacing: -0.01em;
}
.story-copy {
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-size: 36px;
line-height: 1.25;
color: var(--parchment);
padding-bottom: 12px; /* nudge off absolute bottom of heading descender line */
}
/* ═══════════════════════════════════════════════
TIMELINE (horizontal carousel)
Layout anatomy (per item):
[ DATE ]
● A Moment For A Key
│ Milestone Achieved
──┼────────────────────── ← full-page-width axis,
│ midway between title
│ Timeline body text… block and body
● ← bottom dot at end of body (variable height)
• Arrows align with the container edges.
• Axis spans full viewport width, rendered on the
.timeline section (NOT the viewport/track).
• Items use align-items: flex-start so bottom dots
fall at each item's own natural content end.
═══════════════════════════════════════════════ */
.timeline {
position: relative;
background-color: var(--olive);
padding: 30px 0 140px;
}
/* Full-width horizontal axis, rendered on the section.
Position is tuned to sit between title-block and body.
z-index: 3 matches the timeline's other positioned children
so the axis stays above the hero orb (z-index: 2) that can
bleed through from above. */
.timeline-axis {
position: absolute;
top: 255px;
left: 0;
right: 0;
height: 1px;
background: var(--parchment);
z-index: 3;
pointer-events: none;
}
/* Arrows — align with the container edges, above content */
.timeline-arrows {
position: relative;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--pad-desktop);
height: 20px;
margin-bottom: 60px;
z-index: 3;
}
.timeline-arrow {
position: absolute;
top: 0;
width: 40px;
height: 20px;
background: none;
border: none;
cursor: pointer;
color: var(--parchment);
padding: 0;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.25s ease;
}
.timeline-arrow-prev { left: var(--pad-desktop); }
.timeline-arrow-next { right: var(--pad-desktop); }
.timeline-arrow svg {
display: block;
width: 40px;
height: 10px;
overflow: visible;
}
/* Stroke weight for the prev/next arrow lines. Set here rather than on
each inline so the triplicated arrow SVG (about, stories,
partners) has one source of truth; CSS stroke-width overrides the
presentation attribute on the elements. */
.timeline-arrow svg line {
stroke-width: 2;
}
.timeline-arrow:hover { opacity: 0.7; }
.timeline-arrow[hidden],
.timeline-arrow:disabled {
opacity: 0;
pointer-events: none;
}
/* Viewport — clips the track horizontally.
Left/right padding matches the container so items align with it. */
.timeline-viewport {
position: relative;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--pad-desktop);
overflow: hidden;
z-index: 3;
}
/* Track — holds all items, slides horizontally on arrow click */
.timeline-track {
display: flex;
align-items: flex-start; /* keep items naturally sized */
gap: 60px;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* Each item — fixed proportional width, stem on left,
body extends as tall as it needs to. */
.timeline-item {
flex: 0 0 calc((100% - 120px) / 3); /* 3 visible + 2 gaps */
position: relative;
padding-left: 32px;
color: var(--parchment);
box-sizing: border-box;
}
/* Top dot — aligned with the DATE row, not the title.
The date is 12px uppercase; the 11px dot sits with its
top edge ≈ the date's cap-top so the dot-centre aligns
with the date's vertical midpoint. */
.timeline-top-dot {
position: absolute;
top: 3px;
left: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--parchment);
z-index: 2;
}
/* Stem — from just below top dot (next to the date)
all the way to bottom dot (end of body). */
.timeline-stem {
position: absolute;
top: 14px;
bottom: 5.5px;
left: 5px;
width: 1px;
background: var(--parchment);
z-index: 2;
}
/* Bottom dot — sits at the end of the body text.
Left: -0.5px nudges the 11px circle so its centre column
aligns with the 1px stem's column. */
.timeline-bottom-dot {
position: absolute;
bottom: 0;
left: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--parchment);
z-index: 2;
}
.timeline-date {
display: block;
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--parchment);
margin-bottom: 14px;
}
.timeline-title {
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-size: 32px;
line-height: 1.2;
color: var(--parchment);
margin-bottom: 64px; /* breathing room above the axis */
}
.timeline-title em { font-style: italic; }
.timeline-body {
font-family: 'AlteHaasGrotesk', sans-serif;
font-size: 12px;
line-height: 1.7;
color: var(--parchment);
text-align: justify;
margin: 0;
padding-top: 20px; /* breathing room below the axis */
}
/* Tablet: 2 visible items */
@media (max-width: 1024px) {
.timeline { padding: 20px 0 100px; }
.timeline-axis { top: 225px; }
.timeline-arrows {
padding: 0 var(--pad-tablet);
margin-bottom: 50px;
}
.timeline-arrow-prev { left: var(--pad-tablet); }
.timeline-arrow-next { right: var(--pad-tablet); }
.timeline-viewport { padding: 0 var(--pad-tablet); }
.timeline-item { flex: 0 0 calc((100% - 60px) / 2); }
.timeline-title { font-size: 26px; margin-bottom: 50px; }
}
/* Mobile: 1 visible item */
@media (max-width: 767px) {
.timeline { padding: 20px 0 80px; }
.timeline-axis { top: 215px; }
.timeline-arrows {
padding: 0 var(--pad-mobile);
margin-bottom: 40px;
}
.timeline-arrow-prev { left: var(--pad-mobile); }
.timeline-arrow-next { right: var(--pad-mobile); }
.timeline-viewport { padding: 0 var(--pad-mobile); }
.timeline-item { flex: 0 0 100%; }
.timeline-title { font-size: 24px; margin-bottom: 64px; }
.timeline-body { padding-top: 30px; }
}
/* ═══════════════════════════════════════════════
PHOTO SCROLL
Controlled by the timeline arrows — moves one photo
left/right when a timeline arrow is pressed.
JS wires .photo-track's transform to the same index
as .timeline-track (see initTimeline below).
═══════════════════════════════════════════════ */
.photo-scroll {
background-color: var(--olive);
padding: 60px 0 120px;
overflow: hidden;
position: relative;
}
/* Viewport — same overflow clipping approach as timeline */
.photo-viewport {
position: relative;
overflow: hidden;
/* Negative margin lets tilted cards overflow the viewport
top/bottom without being clipped by overflow:hidden — we
only want horizontal clipping. So use clip-path for x-only. */
clip-path: inset(-200px 0 -200px 0);
z-index: 3;
}
/* Track — holds all photo cards, transform set by JS */
.photo-track {
display: flex;
align-items: center;
gap: 0;
padding: 60px 0; /* vertical room for tilted cards */
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* Cards overlap slightly so the row reads as a "stack of polaroids"
rather than a row of separate frames. -40px right-margin on every
card except the last creates a 40px overlap with the next card.
The JS that drives this carousel reads marginRight via
getComputedStyle and includes it in the per-step offset, so the
scroll math stays accurate per click. */
.photo-card + .photo-card {
margin-left: -40px;
}
.photo-card {
width: 360px;
height: 460px;
flex-shrink: 0;
padding: 5px;
background: var(--parchment);
border-radius: 2px;
position: relative;
}
.photo-card-inner {
position: relative;
width: 100%;
height: 100%;
border: 1px solid var(--ink);
border-radius: 2px;
overflow: hidden;
background-color: var(--ink);
}
.photo-card-inner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Dot motif overlay — the visible dot grid is now gated by the
per-section `data-show-dots="1"` attribute applied by the
About template when the editor toggles "Show dot overlay" on.
The selector rule itself lives further down with the shared
image-card dot rule (search for `.image-card[data-show-dots`),
so the photo scroll and the homepage galleries get a single,
consistent dot pattern (7-column grid, parchment, anchored to
edges) when enabled. */
/* Staggered rotations for scrapbook feel */
.photo-card:nth-child(5n+1) { transform: rotate(-6deg) translateY(20px); }
.photo-card:nth-child(5n+2) { transform: rotate(4deg) translateY(-15px); }
.photo-card:nth-child(5n+3) { transform: rotate(-3deg) translateY(25px); }
.photo-card:nth-child(5n+4) { transform: rotate(8deg) translateY(-5px); }
.photo-card:nth-child(5n+5) { transform: rotate(-8deg) translateY(10px); }
/* ═══════════════════════════════════════════════
IMPACT (bark gradient starts here)
═══════════════════════════════════════════════ */
.impact {
position: relative;
background-color: var(--olive);
padding: 180px 0 120px;
overflow: hidden;
/* Local stacking context — see the matching comment on
`.intro` for the why. Without this, the impact orb's
transform (mouse-follow JS) can paint above the stats
despite the explicit z-index ordering on its siblings. */
isolation: isolate;
}
/* Floating orb — mirrors homepage .intro-orb:
anchored right-of-centre, mouse-follow (desktop) +
scroll-drift (touch) driven by JS. Non-inverted
movement (same direction as cursor / scroll). */
.impact-orb {
position: absolute;
top: 50%;
left: 85%;
width: 320px;
height: 320px;
pointer-events: none;
z-index: 1;
will-change: transform;
transition: transform 0.08s linear;
}
.impact-orb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.impact-content {
position: relative;
z-index: 2;
}
.impact-heading {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 140px;
line-height: 0.95;
color: var(--parchment);
text-transform: uppercase;
letter-spacing: -0.01em;
text-align: center;
margin-bottom: 100px;
}
.impact-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
text-align: center;
}
.impact-stat-label {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--parchment);
margin-bottom: 12px;
display: block;
}
.impact-stat-number {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 120px;
color: var(--parchment);
line-height: 1;
display: block;
}
/* ═══════════════════════════════════════════════
QUOTE CAROUSEL
Same arrow pattern as the timeline. On desktop,
arrows sit vertically centred at the page edges.
On mobile, arrows sit above the content (same as
the timeline's mobile treatment).
═══════════════════════════════════════════════ */
.quote {
background-color: var(--olive);
padding: 80px 0 120px;
position: relative;
}
/* Desktop arrow wrapper — constrains arrows to container
width, matching the timeline. Vertically centred on
the section via absolute positioning + translate. */
.quote-arrows-desktop {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--pad-desktop);
height: 20px;
pointer-events: none; /* wrapper shouldn't block clicks */
z-index: 4;
}
.quote-arrow {
position: absolute;
top: 0;
width: 40px;
height: 20px;
background: none;
border: none;
cursor: pointer;
color: var(--parchment);
padding: 0;
pointer-events: auto; /* re-enable on the buttons themselves */
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.25s ease;
}
.quote-arrow-prev { left: var(--pad-desktop); }
.quote-arrow-next { right: var(--pad-desktop); }
.quote-arrow svg {
display: block;
width: 40px;
height: 10px;
overflow: visible;
}
.quote-arrow:hover { opacity: 0.7; }
.quote-arrow[hidden],
.quote-arrow:disabled {
opacity: 0;
pointer-events: none;
}
/* Viewport — clips horizontal scrolling of the track */
.quote-viewport {
position: relative;
z-index: 3;
max-width: 900px;
margin: 0 auto;
overflow: hidden;
}
.quote-track {
display: flex;
align-items: flex-start;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* Each testimonial takes 100% of the viewport width */
.quote-slide {
flex: 0 0 100%;
text-align: center;
padding: 0 20px;
box-sizing: border-box;
}
.quote-text {
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-size: 36px;
line-height: 1.2;
color: var(--parchment);
margin: 0 auto 40px;
}
.quote-text em { font-style: italic; }
.quote-meta {
font-family: 'AlteHaasGrotesk', sans-serif;
font-size: 12px;
letter-spacing: 0.06em;
color: var(--parchment);
text-align: center;
}
.quote-meta-name {
font-weight: 700;
text-transform: uppercase;
display: block;
margin-bottom: 4px;
}
.quote-meta-cohort {
font-weight: 400;
}
/* Arrow wrapper for mobile — hidden on desktop, shown on mobile */
.quote-arrows-mobile {
display: none;
}
/* ═══════════════════════════════════════════════
MEET OUR TEAM
═══════════════════════════════════════════════ */
.team {
position: relative;
background: linear-gradient(to bottom, var(--olive) 0%, var(--olive) 60%, var(--bark) 100%);
padding: 80px 0 120px;
/* overflow removed so team-orb-divider can extend up/down
into neighbouring sections */
}
.team-heading {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 140px;
line-height: 0.95;
color: var(--parchment);
text-transform: uppercase;
letter-spacing: -0.01em;
text-align: center;
margin-bottom: 80px;
position: relative;
z-index: 3;
}
/* ── TEAM ORB DIVIDER ──
Placed BETWEEN and in the DOM (mirrors homepage
.orb-divider pattern). Zero-height, takes no layout
space; image absolutely centred on the element's top
edge (the section boundary). JS then translates the
whole divider upward so the image lands visually
between the first and second rows of the team grid.
z-index: 2 sits above section backgrounds (default 0)
but below anything in sections with z-index: 3+. */
.team-orb-divider {
position: relative;
height: 0;
overflow: visible;
pointer-events: none;
z-index: 2;
line-height: 0;
will-change: transform;
}
.team-orb-divider img {
position: absolute;
top: 0;
left: 50%;
width: 100vw;
transform: translate(-50%, -50%);
display: block;
}
.team-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
position: relative;
z-index: 3;
}
/* Individual team card — horizontal layout: photo left, text right */
.team-card {
display: flex;
padding: 5px;
background: var(--parchment);
border-radius: 4px;
min-height: 380px;
}
.team-card-photo {
width: 40%;
flex-shrink: 0;
border: 1px solid var(--ink);
border-radius: 2px 0 0 2px;
overflow: hidden;
background: var(--ink);
}
.team-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-card-body {
flex: 1;
border: 1px solid var(--ink);
border-left: none;
border-radius: 0 2px 2px 0;
padding: 30px;
display: flex;
flex-direction: column;
}
.team-card-name {
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-size: 32px;
line-height: 1.15;
color: var(--ink);
margin-bottom: 14px;
}
.team-card-name em { font-style: italic; }
.team-card-title {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 24px;
display: block;
}
/* Team / trustee card body — typography for paragraphs.
The original markup put `class="team-card-copy"` on each .
The wysiwyg ACF field that now drives this bio content emits
bare
tags, so the CSS selects on the parent `.team-card-body`
to catch any paragraph, regardless of class. The legacy
`.team-card-copy` selector is kept alongside for backwards
compatibility with any older markup. Same pattern as the
sessions / intro fix. */
.team-card-body p,
.team-card-copy {
font-family: 'AlteHaasGrotesk', sans-serif;
font-size: 12px;
line-height: 1.7;
color: var(--ink);
text-align: justify;
text-indent: 15px;
margin: 0 0 14px;
}
.team-card-body p:last-child,
.team-card-copy:last-child {
margin-bottom: 0;
}
.team-card-body strong,
.team-card-copy strong {
font-weight: 700;
}
.team-card-body mark,
.team-card-copy mark {
background: var(--dawn);
color: inherit;
padding: 2px 3px;
}
/* ═══════════════════════════════════════════════
MEET OUR TRUSTEES
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
MEET OUR TRUSTEES
Arrow-controlled carousel. The active card sits
centered in the viewport; neighbour cards peek in
from either side. Arrow pattern mirrors timeline
(edges on desktop, above content on mobile).
═══════════════════════════════════════════════ */
.trustees {
background-color: var(--bark);
padding: 80px 0 160px;
overflow: hidden;
position: relative;
}
.trustees-heading {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 140px;
line-height: 0.95;
color: var(--parchment);
text-transform: uppercase;
letter-spacing: -0.01em;
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 3;
}
/* Arrows wrapper — container-aligned, like timeline */
.trustees-arrows {
position: relative;
max-width: var(--container-max);
margin: 0 auto 60px;
padding: 0 var(--pad-desktop);
height: 20px;
z-index: 3;
}
.trustees-arrow {
position: absolute;
top: 0;
width: 40px;
height: 20px;
background: none;
border: none;
cursor: pointer;
color: var(--parchment);
padding: 0;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.25s ease;
}
.trustees-arrow-prev { left: var(--pad-desktop); }
.trustees-arrow-next { right: var(--pad-desktop); }
.trustees-arrow svg {
display: block;
width: 40px;
height: 10px;
overflow: visible;
}
.trustees-arrow:hover { opacity: 0.7; }
.trustees-arrow[hidden],
.trustees-arrow:disabled {
opacity: 0;
pointer-events: none;
}
/* Viewport spans full page width so off-centre cards
can peek past the container edges. */
.trustees-viewport {
position: relative;
width: 100%;
overflow: hidden;
z-index: 3;
}
.trustees-track {
display: flex;
align-items: stretch;
gap: 40px;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.trustee-card {
flex-shrink: 0;
width: 582px;
min-height: 380px;
}
/* ═══════════════════════════════════════════════
VALUES SECTION (dusk blue)
Layout on desktop: zig-zag in a 2-column grid
Row 1: Courage — left col
Row 2: Trust — right col
Row 3: Vulnerability — left col, right-edge-at-centre,
stem on the RIGHT side
Stems run full height of each item so bottom dot
aligns with the end of the paragraph.
═══════════════════════════════════════════════ */
.values {
position: relative;
background-color: var(--dusk);
padding: 270px 0 200px;
/* overflow removed so top circles aren't clipped */
z-index: 5;
}
/* Floating orb — mouse-follow (desktop) / scroll-drift (touch).
Same mechanics as homepage .choose-orb: JS sets a translate3d
transform that centres the orb around its anchor point (top/left)
and applies an offset (dx, dy) for movement. */
.values-orb {
position: absolute;
top: 50%;
left: 50%;
width: 1000px;
height: 1000px;
pointer-events: none;
z-index: 1;
will-change: transform;
transition: transform 0.08s linear;
line-height: 0;
}
.values-orb img,
.values-orb picture {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* 7 circles straddling the top border */
.values-circles {
position: absolute;
top: 0;
left: -10px;
right: -10px;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
z-index: 10;
}
.values-circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--white);
flex-shrink: 0;
}
.values-heading {
font-family: 'AlteHaasGrotesk', sans-serif;
font-weight: 400;
font-size: 140px;
line-height: 0.95;
color: var(--parchment);
text-transform: uppercase;
letter-spacing: -0.01em;
text-align: center;
margin-bottom: 120px;
position: relative;
z-index: 2;
}
/* 2-column grid; items placed via grid-column to create the
zig-zag. Row gap provides vertical breathing room. */
.values-grid {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 40px;
column-gap: 0;
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.values-item {
position: relative;
color: var(--parchment);
padding-left: 40px;
max-width: 340px;
}
/* Placement: each value gets its own row.
Row 1: Courage → left column, stem on the RIGHT
Row 2: Trust → right column, stem on the LEFT
Row 3: Vulnerability → left column, right-edge-at-centre,
stem on the RIGHT */
.values-item:nth-child(1) {
grid-column: 1;
grid-row: 1;
justify-self: start;
padding-left: 0;
padding-right: 40px; /* stem on the RIGHT */
}
.values-item:nth-child(2) { grid-column: 2; grid-row: 2; justify-self: end; }
.values-item:nth-child(3) {
grid-column: 1;
grid-row: 3;
justify-self: end; /* right edge at centre of grid */
padding-left: 0;
padding-right: 40px; /* stem on the RIGHT instead */
}
/* Stem on the RIGHT for items 1 and 3 */
.values-item:nth-child(1)::before,
.values-item:nth-child(3)::before {
left: auto;
right: 8px;
}
.values-item:nth-child(1)::after,
.values-item:nth-child(3)::after {
left: auto;
right: 3px;
}
.values-item:nth-child(1) .values-dot-bottom,
.values-item:nth-child(3) .values-dot-bottom {
left: auto;
right: 3px;
}
/* Stem — runs from top dot down to bottom dot,
stretched between absolute top/bottom offsets so
its length follows each item's natural height. */
.values-item::before {
content: '';
position: absolute;
top: 8px;
bottom: 8px;
left: 8px;
width: 1px;
background: var(--parchment);
}
/* Top dot */
.values-item::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--parchment);
}
/* Bottom dot — at natural end of content */
.values-item .values-dot-bottom {
position: absolute;
bottom: 3px;
left: 3px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--parchment);
}
.values-name {
font-family: 'PerfectlyNineties', serif;
font-weight: 400;
font-size: 42px;
line-height: 1.15;
color: var(--parchment);
margin-bottom: 20px;
}
.values-copy {
font-family: 'AlteHaasGrotesk', sans-serif;
font-size: 12px;
line-height: 1.7;
color: var(--parchment);
text-align: justify;
margin: 0;
}
/* Tablet & mobile: all three stacked, left-aligned,
stem on the left (matches the mobile Figma design). */
/* ═══════════════════════════════════════════════
FEATURE CARD (big parchment card with photo)
═══════════════════════════════════════════════ */
.feature {
position: relative;
background-color: var(--olive);
padding: 150px 0 150px;
/* overflow removed so top circles aren't clipped */
z-index: 5;
}
/* 7 circles at top */
.feature-circles {
position: absolute;
top: 0;
left: -10px;
right: -10px;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
z-index: 10;
}
.feature-circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--white);
flex-shrink: 0;
}
.feature-card {
background: var(--parchment);
padding: 5px;
border-radius: 4px;
position: relative;
}
.feature-card-inner {
position: relative;
border: 1px solid var(--ink);
border-radius: 2px;
overflow: hidden;
min-height: 600px;
background-color: var(--ink);
}
.feature-card-inner img {
width: 100%;
height: 100%;
min-height: 600px;
object-fit: cover;
display: block;
}
/* Horizontal rule with dot on the card */
.feature-card-rule {
position: absolute;
left: 50px;
right: 50px;
bottom: 54px;
height: 1px;
background: var(--parchment);
z-index: 2;
}
.feature-card-rule::before {
content: '';
position: absolute;
top: 50%;
left: 80px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--parchment);
transform: translateY(-50%);
}
/* Feature video — inline player variant of .feature-card.
The cover image fills the card initially with a centred play
button overlay; clicking either triggers JS to inject a native