, never a link. */
.choice-card--disabled {
background: var(--lavender-light);
border-style: dashed;
box-shadow: none;
}
.choice-card--disabled .choice-card__title { color: var(--purple); }
.choice-card__soon {
align-self: flex-start;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-deep); /* deepened gold - AA at label size */
}
.pathway__grid--1 { grid-template-columns: 1fr; max-width: 32rem; }
@media (min-width: 620px) { .pathway__grid { grid-template-columns: repeat(2, 1fr); gap: 1.15rem; } }
@media (min-width: 900px) { .pathway__grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .pathway__grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) {
.choice-card { transition: box-shadow 0.22s ease; }
a.choice-card:hover { transform: none; }
a.choice-card:focus-visible { transform: none; }
}
/* Reassurance close: community line, a compact subline, and a quiet,
lock-marked privacy note. AA on white: line --purple-deep ~14:1, sub
--text-warm ~8.6:1, privacy --text-muted ~4.6:1 at 0.88rem. */
/* 2026-08: the close section moved INSIDE .gateway-scene so the statement
sits within the photograph - its old solid white slab would have hidden
the image. The photograph now runs ALL THE WAY to the footer's top edge
(client request - the white band that used to resolve before the footer
is gone); the bottom padding is breathing room below the statement, over
open field. The statement's veil is ELEMENT-ANCHORED here, so it tracks
the statement at every width (its scene-percentage position drifts from
82% at 1440px to ~94% at 768px). */
.gateway-close { background: transparent; text-align: center; padding-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-bottom: clamp(4.5rem, 8vw, 7rem); }
/* 2026-08: the panel/veil behind the closing statement is REMOVED at the
client's explicit direction - the statement sits directly on the raw
photograph at every width, no replacement treatment. Measured on the raw
field at the statement's position (darkest sub-regions): 10.99:1 at
390px, 3.29:1 at 768px, 1.15:1 at 1440px - the sub-768 figure passes AA,
the desktop figures do not; recorded here and in the task report as the
client's accepted trade-off. */
@media (max-width: 767.98px) {
/* Phones: the scene image lives on the hero only, so the close section
carries its OWN soft-edged band of the same landscape - positioned at
the horizon (center 45%), where the statement measures 10.99:1 raw at
its darkest patch, NO veil needed. The white feather at the TOP blends
from the white cards above; the bottom runs the photograph straight to
the footer's edge. */
.gateway-close {
background-image:
linear-gradient(180deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 16%,
rgba(255, 255, 255, 0) 100%),
url("../img/gateway/gateway-sunrise-mobile.webp");
background-size: cover;
background-position: center 45%;
background-repeat: no-repeat;
}
}
.gateway-close__line {
margin: 0 auto;
max-width: 30ch;
font-family: var(--font-head); /* Lora */
font-weight: 600;
font-size: clamp(1.4rem, 2.9vw, 2rem);
line-height: 1.25;
color: var(--purple-deep);
text-wrap: balance;
}
/* 2026-08: WHITE from 768px (lowered from 1024 when the SUNRISE background
landed - its 768-1023 band is deep blue where purple measured 1.65:1 and
white measures 8.77:1). Below 768 the statement sits on the mobile band's
pale horizon: purple stays right there (6.60:1) and white would fail
(2.19:1). The soft purple shadow reads as depth, not an outline; WCAG
gives shadows no credit - at 1440px white's brightest sunlit patch is
3.29:1, the same shadow-carried trade-off the homepage hero ships by
explicit owner decision. */
@media (min-width: 768px) {
.gateway-close__line {
color: var(--white);
text-shadow: 0 1px 2px rgba(46, 33, 80, 0.45), 0 2px 14px rgba(46, 33, 80, 0.30);
}
}
/* REMOVED Aug 2026 at client request — served only the sub + privacy lines
commented out in gateway.html; retained for restore.
.gateway-close__sub {
margin: 0.6rem auto 0;
font-size: clamp(0.95rem, 2vw, 1.05rem);
letter-spacing: 0.03em;
color: var(--text-warm);
}
.gateway-close__privacy {
margin: 1.5rem auto 0;
display: inline-flex;
align-items: center;
font-size: 0.88rem;
color: var(--text-muted);
}
.gateway-close__privacy svg { width: 16px; height: 16px; flex: 0 0 auto; margin-right: 0.4rem; }
*/
/* REMOVED Aug 2026 - the 620-899px TWO-COLUMN band wrapped three equal cards
2+1, which read as unbalanced (flagged twice). The grid is now single-column
below 900px and three-across from 900px up (the 3-col rule later in the
sheet) - no width shows 2+1. Retained for restore:
@media (min-width: 620px) { .gateway__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
*/
/* Tablet + desktop: deepen the hero's sky band and pull the cards up so their
upper third floats over the sunrise. The hero keeps ~3rem of clear sky
between the subtitle and the card tops. Cards gain a soft depth shadow. */
@media (min-width: 768px) {
/* The sky now spans the whole scene (hero + full card row) and fades to white
BELOW the cards, so the entire card row floats within the sunrise. The
hero's own sky is removed so the tones don't double up. Same purple-leaning
wash: strong up top (heading AA), light through the middle (mountains show),
opaque-light at the foot (clean hand-off to the white close section). */
.gateway-hero {
background-image: none;
padding-bottom: clamp(9.5rem, 15vw, 13.5rem); /* more sunrise above the cards; overlap (pull) unchanged, so they still float */
}
.gateway-scene {
/* 2026-08: NO wash and NO scene-level fade - the photograph runs clean
from the sky through the card row to the closing statement (every
hero text element clears 5.16:1+ raw, darkest sub-regions included).
The statement's veil and the long fade to white are ELEMENT-ANCHORED
on .gateway-close below: the statement's position as a percentage of
the scene varies hugely with width (82% at 1440px, ~94% at 768px
where the stacked cards make the scene very tall), so scene-anchored
stops could never track it. */
background-image: url("../img/gateway/gateway-sunrise.webp");
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
.gateway {
position: relative;
z-index: 2; /* float above the sky */
margin-top: clamp(-9rem, -10vw, -6rem); /* pull cards up into the sky */
padding-top: 0;
}
.gateway-card { box-shadow: 0 16px 36px rgba(46, 33, 80, 0.26); }
.gateway-card:hover,
.gateway-card:focus-within { box-shadow: 0 22px 48px rgba(46, 33, 80, 0.34); }
}
@media (min-width: 900px) {
/* 2026-08 WIDEN + TIGHTEN (client direction; replaces the 255px/157.5px
spread): gap fixed at 40px and the cards take the rest - width =
(100% - 80px) / 3 = 333.3px in the 1080px container (the requested
420-460px cannot physically fit three-up in a 1080px container with 40px
gaps: it needs >=1340px - reported). Flush both edges, zero slack;
aspect 3/4 keeps the cards portrait (333x444). ALSO the tablet fix:
this 3-across now holds down to 900px (cards ~260px there, matching the
old desktop size) and below 900 the grid is single-column - the 620-1099
two-column band that wrapped 2+1 is retired below. */
.gateway__grid { grid-template-columns: repeat(3, calc((100% - 80px) / 3)); justify-content: center; column-gap: 40px; }
.gateway-card { aspect-ratio: 3 / 4; }
}
@media (prefers-reduced-motion: reduce) {
.gateway-card { transition: box-shadow 0.22s ease; }
.gateway-card:hover,
.gateway-card:focus-within { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.expert-card { transition: box-shadow 0.22s ease; }
.expert-card--link:hover { transform: none; } /* shadow only - no lift under reduced motion */
}
/* --- Layered hero → stats → cards overlap (>=900px) ------------------------
The Evidence card now takes over the role the stats strip played: from
tablet up it rides onto the hero's lower portion so the footage stays
visible above and just behind its top edge, and the page reads as one
layered flow (video -> floating card -> rest of page) with no dead gap.
Geometry: the hero reserves a bottom zone under its centred copy; the card
lifts into it by less than that reserve, so the copy is never touched, and
the scroll cue is parked between the two - above the card's top edge and
below the hero copy. Mobile keeps a normal stacked flow (no overlap). */
/* Overlap knob: tune --evidence-overlap per breakpoint (negative = how far the
card's top lifts over the hero's bottom edge). Card corners/shadow/contents/
count-up are untouched. */
@media (max-width: 430px) {
.why-gem {
position: relative;
z-index: 3;
--evidence-overlap: -16px; /* phones: nearly flush lip */
margin-top: var(--evidence-overlap);
padding-top: 0; /* the lift replaces the section's top pad */
}
}
@media (min-width: 768px) {
.hero--editorial { padding-bottom: clamp(4.25rem, 8vh, 5.5rem); } /* breathing room below the doorways + the chevron slot (crisp edge, no fade) */
.why-gem {
position: relative;
z-index: 3; /* above the hero's isolated stack */
--evidence-overlap: -72px; /* tablet + desktop: small lip tucking over the hero's bottom */
margin-top: var(--evidence-overlap);
padding-top: 0; /* the lift replaces the section's top pad */
}
/* (The cue is re-parked for this overlap after its base rule below.) */
}
@media (min-width: 1100px) {
.hero--editorial { padding-bottom: clamp(4.25rem, 8vh, 5.5rem); } /* breathing room below the doorways + the chevron slot (crisp edge, no fade) */
}
/* --- Hero scroll cue --------------------------------------------------------
Gentle 2s bounce at the hero's visual bottom, none under
prefers-reduced-motion (ui.js also swaps smooth scroll for instant). */
/* Editorial hero: the cue sits just beneath the doorway row, over rich video, near
the crisp bottom edge. White + drop-shadow for legibility over the footage (beats
the >=768px re-park overrides via higher specificity). */
.hero--editorial .hero__scroll {
display: inline-flex;
bottom: clamp(0.75rem, 2vh, 1.25rem);
z-index: 3;
color: var(--white);
}
.hero__scroll {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.25rem;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
color: var(--purple); /* over the light mobile still */
}
.hero__scroll svg {
width: 26px;
height: 26px;
filter: drop-shadow(0 1px 2px rgba(24, 16, 44, 0.35));
}
.hero__scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* From tablet up the Evidence card rides onto the hero's bottom, so the cue is
parked in the reserved gap between the hero copy and the card's top edge —
~1.5rem clear of the card, well clear of the copy. (Must sit after the base
rule above: media queries add no specificity.) */
@media (min-width: 768px) {
.hero__scroll { bottom: 5.5rem; color: var(--white); }
}
@media (min-width: 1100px) {
.hero__scroll { bottom: 8rem; }
}
@media (prefers-reduced-motion: no-preference) {
.hero__scroll svg { animation: heroCueBounce 2s ease-in-out infinite; }
}
@keyframes heroCueBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
/* --- Floating AI-assistant button (placeholder) ------------------------------
Fixed lower-right circular FAB using the repo's chatbot icon (deep-purple disc,
gold ring, white bubble — the SVG carries its own design; the button is just a
transparent circular hit area). z-index 90: above page content, below the
header (100). ui.js adds .is-shown past the hero and removes it while the
footer is visible; no-JS shows it always (the .js gate keeps it functional
without JavaScript). Placeholder only — no chat logic. */
/* Shared geometry for the bottom-right FAB STACK: the chat button is anchored in
the corner and the back-to-top button sits directly above it. One set of values
drives both, so the gap can never drift out of sync. */
.chatbot-fab,
.chatbot-bubble,
.to-top {
--fab-inset: clamp(1rem, 2.5vw, 1.5rem); /* distance from the corner */
--fab-size: 60px; /* the chat FAB's diameter — the PRIMARY of the pair */
--fab-size-2: 41.6px; /* 2026-08 demotion (client direction): 52px - 20% = 41.6px (69.3% of the 60px launcher) so the GEM Assistant clearly leads the pair. Visible size only - the 44px hit floor lives on a centred ::after overlay. The derived right-offset ((size - size-2)/2 = 9.2px) keeps both on one centreline. */
--fab-gap: 1rem; /* 2026-08: 16px between the two buttons (was 12px) */
/* ONE shared drop shadow = the pair's shared DNA (soft purple-tinted lift). */
--fab-shadow: 0 8px 22px rgba(75, 46, 131, 0.35), 0 2px 6px rgba(46, 33, 80, 0.25);
--fab-shadow-hover: 0 12px 28px rgba(75, 46, 131, 0.45), 0 3px 8px rgba(46, 33, 80, 0.3);
}
/* DESKTOP-ONLY +15% (2026-08 client direction): the launcher orb 60 -> 69px at
>=1024px - the stylesheet's existing tablet/desktop breakpoint - while
phones and small tablets keep 60px UNTOUCHED pending real-device testing.
Everything derived from --fab-size (the back-to-top's bottom offset and
centring formula, the greeting bubble's offsets, the cookie-bar lift) reads
the variable, so all spacing relationships hold automatically. The inner
PNG is width/height 100% and scales with the box - nothing else to size. */
@media (min-width: 1024px) {
.chatbot-fab,
.chatbot-bubble,
.to-top { --fab-size: 69px; }
}
.chatbot-fab {
position: fixed;
right: var(--fab-inset);
bottom: var(--fab-inset);
z-index: 90;
width: var(--fab-size);
height: var(--fab-size); /* 60px (>=44px tap target); 69px at >=1024px via the --fab-size flip above */
padding: 0;
/* 2026-08 GEM Assistant icon (replaces the drawn robot disc): the PNG is a
transparent orb with its OWN soft outer glow, so the button is now a bare
transparent container - no disc background, no gold ring, no shadow (a
container would fight the artwork's glow). */
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
box-shadow: none; /* the artwork's baked-in glow is the only halo at rest */
transition: box-shadow 0.18s ease;
}
.chatbot-fab__icon {
display: block;
width: 100%;
height: 100%;
}
.js .chatbot-fab { /* hidden until ui.js reveals it */
opacity: 0;
visibility: hidden;
transform: translateY(0.5rem);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.js .chatbot-fab.is-shown {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.chatbot-fab__bot {
width: 100%;
height: 100%;
display: block;
}
/* Idle life (2026-08 robot spec): the WHOLE robot bobs gently and the antennae
tilt with it - replaces the old 1.0<->1.03 breathe pulse on the button. The
transforms live on inner SVG groups, so they can never fight the reveal
fade/rise on the button itself. transform-box: view-box makes the px origins
read in the SVG's own 60x60 coordinate space (engines without it fall back to
a slightly different pivot - motion stays subtle either way). */
/* (INERT since the 2026-08 GEM Assistant icon swap - the drawn robot markup is
gone, so the bob/antennae rules match nothing. RESTING STATE = the icon
as-is, deliberately unanimated. Kept as the robot's restore path.) */
.chatbot-fab__bot-body {
animation: chatBotBob 2.6s ease-in-out infinite;
transform-box: view-box;
transform-origin: 30px 36px;
}
.chatbot-fab__bot-antennae {
animation: chatBotAntennae 2.6s ease-in-out infinite;
transform-box: view-box;
transform-origin: 30px 26px;
}
@keyframes chatBotBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2.5px); }
}
@keyframes chatBotAntennae {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(-5deg); }
}
/* ---- GEM Assistant states (2026-08). Three states, none colour-only:
RESTING = the icon as-is, no animation (the old bob/antennae rules are
inert above). NEW MESSAGE = .has-message dot (presence/shape cue) at the
upper-right - purple-bright fill (5.9:1 on white pages) inside a 2px white
ring, so it separates from both the icon's purple orb and any page ground.
Nothing sets the class on load; ui.js exposes the inactive hook
window.GEM_ASSISTANT_SET_NEW_MESSAGE(bool) for the future backend.
ACTIVE = a soft halo ring on BOTH hover and keyboard focus (size/shape
change, not colour alone); its 0.18s ease is killed under reduced motion so
the ring appears instantly. */
.chatbot-fab.has-message::before {
content: "";
position: absolute;
top: 1px;
right: 1px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--purple-bright); /* 5.9:1 vs white page; the white ring separates it from the orb */
border: 2px solid var(--white);
z-index: 1;
}
.chatbot-fab:hover,
.chatbot-fab:focus-visible {
box-shadow: 0 0 0 6px rgba(107, 79, 160, 0.22), 0 0 20px 6px rgba(107, 79, 160, 0.30); /* the gentle lift halo */
border-radius: 50%;
}
.chatbot-fab:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 3px; } /* NOT the raw --focus token; 5.9:1 on white */
.chatbot-fab__tip { /* "coming soon" — shows on hover/focus */
position: absolute;
right: calc(100% + 0.6rem);
bottom: 50%;
transform: translateY(50%);
white-space: nowrap;
background: var(--purple-deep);
color: var(--white); /* ~13:1 = AA */
font-size: 0.8rem;
padding: 0.35rem 0.65rem;
border-radius: 8px;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
.chatbot-fab:hover .chatbot-fab__tip,
.chatbot-fab:focus-visible .chatbot-fab__tip { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.js .chatbot-fab, .js .chatbot-fab.is-shown, .chatbot-fab, .chatbot-fab__tip { transition: none; }
.chatbot-fab__bot-body, .chatbot-fab__bot-antennae { animation: none; } /* static robot - no bob, no antenna tilt */
}
/* --- "Need help? I'm here." bubble (2026-08, ui.js injects the markup) -------
One line, LEFT of the robot launcher (extends left, never up, so it cannot
collide with the back-to-top button stacked above). Vertically centred on
the 60px disc. Fixed position = zero layout shift; ui.js owns the timing
(appears with the reveal, waits out the cookie card, auto-fades ~7s). */
.chatbot-bubble {
position: fixed;
right: calc(var(--fab-inset) + var(--fab-size) + 12px); /* clear of the disc + a small gap - derived, so the desktop 69px orb pushes it left automatically (identical maths at the mobile 60px) */
bottom: calc(var(--fab-inset) + (var(--fab-size) - 64px) / 2); /* (orb - 64px card)/2 - the bubble's vertical CENTRE sits exactly on the launcher's at BOTH orb sizes (resolves to the old inset - 2px at 60px) */
z-index: 90;
display: flex;
align-items: center;
min-height: 44px;
background: var(--white);
border: 0.5px solid rgba(75, 46, 131, 0.35); /* light purple hairline */
border-radius: 14px 14px 4px 14px; /* tight corner = the tail, pointing at the launcher */
padding: 0.5rem 2.1rem 0.5rem 0.6rem; /* 2026-08 card: right padding clears the corner X */
box-shadow: 0 8px 22px rgba(46, 33, 80, 0.18);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.chatbot-bubble.is-shown {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.35s ease, transform 0.35s ease;
}
/* 2026-08 card restyle (mockup): icon left, two stacked lines, X upper-right. */
.chatbot-bubble__icon {
flex: 0 0 auto;
width: 36px;
height: 36px;
margin-right: 0.55rem; /* margin, not flex gap */
}
.chatbot-bubble__text {
display: block;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.chatbot-bubble__hi {
display: block;
font-family: var(--font-head);
font-size: 14px;
font-weight: 700;
color: var(--purple); /* brand purple on white - 11.7:1 */
}
.chatbot-bubble__sub {
display: block;
margin-top: 1px;
color: var(--text); /* body colour - 14.9:1 on white */
}
.chatbot-bubble__close {
position: absolute; /* upper-right of the card, per the mockup */
top: 0;
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px; /* past the 24px WCAG 2.5.8 minimum; dismisses the BUBBLE only */
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
}
.chatbot-bubble__close:hover { color: var(--purple); }
.chatbot-bubble__close:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 1px; } /* NOT the raw --focus token */
@media (prefers-reduced-motion: reduce) {
.chatbot-bubble, .chatbot-bubble.is-shown { transition: none; transform: none; } /* appears/disappears instantly */
}
/* --- GEM Assistant window (2026-08, ui.js injects the markup) ----------------
NAVIGATION GUIDE, not a chat: header (icon/name/minimise/close), verbatim
greeting, five routing buttons, and the REQUIRED safeguarding footer line.
NO input field by design. Anchored above the launcher, bottom-right, z=110
(above the FABs at 90 and the header at 100, below the cookie card at 120);
while body.has-cookie-bar it lifts with the same formula as the FABs so the
two never collide. Open/close fade is killed under reduced motion. */
.gembot {
position: fixed;
right: var(--fab-inset, 1.5rem);
/* Anchored above the WHOLE corner stack (launcher 60 + gap 12 + back-to-top
52 + 12 clearance) so it can never cover either button; the max-height
mirrors the bottom offset so the top never leaves the viewport. */
bottom: calc(var(--fab-inset, 1.5rem) + 136px);
z-index: 110;
width: min(340px, calc(100vw - 24px));
max-height: min(560px, calc(100dvh - var(--fab-inset, 1.5rem) - 136px - 12px));
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid rgba(58, 42, 102, 0.16);
border-radius: 16px;
box-shadow: 0 22px 54px -18px rgba(20, 12, 40, 0.5);
overflow: hidden;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.gembot.is-open { opacity: 1; transform: none; }
body.has-cookie-bar .gembot {
bottom: calc(var(--fab-inset, 1.5rem) + 136px + var(--cookie-bar-h, 150px) + 24px);
max-height: min(560px, calc(100dvh - var(--fab-inset, 1.5rem) - 136px - var(--cookie-bar-h, 150px) - 24px - 12px));
}
@media (prefers-reduced-motion: reduce) {
.gembot, .gembot.is-open { transition: none; transform: none; } /* no open/close animation */
}
.gembot__head {
display: flex;
align-items: center;
padding: 0.7rem 0.5rem 0.7rem 0.85rem;
background: var(--purple); /* brand purple bar - white text 12.3:1 */
color: var(--white);
}
.gembot__icon { flex: 0 0 auto; width: 36px; height: 36px; margin-right: 0.6rem; } /* margin, not flex gap */
.gembot__id { flex: 1 1 auto; min-width: 0; }
.gembot__name { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.gembot__tag { margin: 0; font-size: 0.78rem; color: #EFEAF6; } /* 10.4:1 on the purple bar */
.gembot__min,
.gembot__close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; /* tap floor */
height: 44px;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--white);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
}
.gembot__min:hover,
.gembot__close:hover { background: rgba(255, 255, 255, 0.14); }
.gembot__min:focus-visible,
.gembot__close:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; } /* white ring on the purple bar (12.3:1); NOT the raw --focus token */
.gembot__body { padding: 0.9rem 0.85rem 0.4rem; overflow-y: auto; }
.gembot__greet { margin: 0 0 0.8rem; font-size: 0.95rem; line-height: 1.5; color: var(--text); }
.gembot__greet strong { font-family: var(--font-head); font-size: 1.02rem; color: var(--purple); }
.gembot__list { display: block; }
.gembot__opt {
display: flex;
align-items: center;
min-height: 44px; /* tap floor */
margin: 0 0 0.45rem;
padding: 0.55rem 0.8rem;
background: var(--lavender-light);
border: 1px solid rgba(58, 42, 102, 0.14);
border-radius: 10px;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.35;
color: var(--purple); /* 11.5:1 on lavender-light */
text-decoration: none;
}
.gembot__opt:hover { background: var(--lavender); border-color: var(--purple-bright); }
.gembot__opt:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; } /* NOT the raw --focus token */
.gembot__foot {
display: flex;
align-items: flex-start;
margin: 0;
padding: 0.6rem 0.85rem 0.7rem;
border-top: 1px solid rgba(58, 42, 102, 0.12);
font-size: 0.78rem;
line-height: 1.45;
color: var(--text-warm); /* 8.9:1 on white */
}
.gembot__shield { flex: 0 0 auto; width: 16px; height: 16px; margin: 0.1rem 0.5rem 0 0; color: var(--gold-deep); }
.gembot__shield svg { width: 16px; height: 16px; display: block; }
/* --- Back-to-top button (shared, every page) ---------------------------------
Fixed LOWER-RIGHT, stacked directly ABOVE the chat FAB (client direction — the
chat FAB now ships on every page, so one shared corner stack is consistent
site-wide). Position is DERIVED from the shared --fab-* values above, not
hand-tuned: bottom = inset + the FAB's diameter + the gap, so the two can never
touch however the clamp resolves; right is nudged by half the size difference
((--fab-size - --fab-size-2) / 2) so the smaller button is optically CENTRED
over the FAB.
Same z-index 90 as the FAB (above page + footer content, below the header at
100), so both stay clickable to the bottom of the page. Hidden until ui.js adds
.is-shown; with no JS it never appears (the .js gate) since nothing would
drive it. */
.to-top {
position: fixed;
/* Optically centred over the primary FAB: right offset = half the size
difference, DERIVED from the shared vars so it can never drift. */
right: calc(var(--fab-inset) + (var(--fab-size) - var(--fab-size-2)) / 2);
bottom: calc(var(--fab-inset) + var(--fab-size) + var(--fab-gap));
z-index: 90;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--fab-size-2);
height: var(--fab-size-2); /* 52px — a small deliberate step under the 60px primary; >=44px target */
padding: 0;
/* 2026-08 FAMILY MATCH (client direction): the old purple disc + gold ring
read as unrelated to the GEM Assistant orb. Now the launcher's own
lavender-glass: fill = the artwork's sampled mid-orb tone
rgb(199,166,241) at 0.9, glow = its sampled halo rgb(229,211,243) at
0.54, NO ring, WHITE geometric chevron matching the orb's white line
art. ⚠️ Reported, not hidden: white on this lavender measures ~2.1:1 -
the same accepted ratio the launcher artwork's own white line art
carries; a purple-deep arrow is the AA alternative if wanted. */
border: 0;
border-radius: 50%;
/* 2026-08 LIGHTENED 15% (client direction, quieter sibling): each channel
moved 15% toward white - r 199+0.15(255-199)=207.4, g 166+0.15(255-166)
=179.35, b 241+0.15(255-241)=243.1 -> rgb(207,179,243).
Same lavender family as the launcher orb, one step lighter. Glow
unchanged: it renders OUTSIDE the disc against the page, so the lighter
fill does not wash it out - no opacity adjustment needed.
Alpha 0.9 -> 0.72 (-20% resting opacity) per GEM, August 2026; the 3:1
non-text contrast floor is client-waived for this control. Hover stays
alpha 1 so the lift reads clearly against the quieter resting state. */
background: rgba(207, 179, 243, 0.72);
color: var(--white);
cursor: pointer;
box-shadow: 0 0 18px 6px rgba(229, 211, 243, 0.54), 0 0 4px 1px rgba(229, 211, 243, 0.4);
transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.to-top svg { width: 17px; height: 17px; display: block; } /* scaled with the 41.6px button - stays ~40% of the diameter (21px of 52px before) */
/* 44px HIT FLOOR (2026-08): the visible disc is 41.6px, under the 44px tap
minimum - a centred transparent overlay carries the hit area without
consuming layout width or changing the visual size. */
.to-top::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.js .to-top { /* hidden until ui.js reveals it */
opacity: 0;
visibility: hidden;
transform: translateY(0.5rem);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.js .to-top.is-shown {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Hover/focus lift lives on colour + shadow only (never transform) so it cannot
fight the reveal's transform, which wins on specificity. */
.to-top:hover {
background: rgba(207, 179, 243, 1); /* settles solid — the gentle lift (lightened with the base fill) */
box-shadow: 0 0 22px 8px rgba(229, 211, 243, 0.62), 0 0 5px 2px rgba(229, 211, 243, 0.45);
}
.to-top:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 3px; } /* NOT the raw --focus token; 5.9:1 on light pages */
@media (prefers-reduced-motion: reduce) {
.js .to-top, .js .to-top.is-shown, .to-top { transition: none; }
}
/* --- Gold eyebrow variant ---------------------------------------------------
Deepened gold for small caps on light surfaces: canonical #BB863F reads
~2.9:1 on lavender-light (fails AA at eyebrow size), so text usages darken
within the gold family — 5.1:1 here. Icons/dividers keep the true gold. */
.eyebrow--gold { color: var(--gold-deep); } /* gold kickers REINSTATED (client direction): matches the base .eyebrow gold; the accessible deep gold, since these sit on light homepage sections */
/* --- The Founder's Vision — full-width portrait + vision --------------------
Portrait ~40% left, text ~60% right from 760px up; stacks portrait-first
below (figure is first in source order). The photo is a square source shown
in a 4/5 PORTRAIT crop via object-fit: cover — cropped, never distorted. AA
on lavender-light: --purple-deep pull-quote ≈ 12:1, --text-warm note ≈ 8.6:1,
--purple name ≈ 10:1, --text-muted role ≈ 6:1, gold eyebrow (#8A6128) 5.1:1. */
.founder-vision { background: var(--lavender-light); }
.founder-vision__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 760px) {
.founder-vision__grid {
grid-template-columns: 40% 1fr; /* portrait ~40%, text ~60% */
gap: clamp(2rem, 4.5vw, 3.75rem);
align-items: center;
}
}
.founder-vision__portrait { margin: 0; }
.founder-vision__photo {
display: block;
width: 100%;
aspect-ratio: 4 / 5; /* large portrait — not a small avatar */
object-fit: cover; /* square source cropped, never stretched */
object-position: center; /* keeps the centred face in frame */
border-radius: 18px;
box-shadow: 0 12px 32px rgba(46, 33, 80, 0.18);
}
.founder-vision__id { margin-top: 1.1rem; }
.founder-vision__name {
margin: 0;
font-family: var(--font-head); /* Lora */
font-weight: 600;
font-size: clamp(1.05rem, 1.7vw, 1.25rem);
line-height: 1.3;
color: var(--purple);
}
.founder-vision__role {
margin: 0.3rem 0 0;
font-size: 0.92rem;
line-height: 1.45;
color: var(--text-muted);
}
.founder-vision__text { max-width: 42rem; }
.founder-vision__quote { margin: 0.7rem 0 0; }
.founder-vision__quote p {
margin: 0;
font-family: var(--font-head); /* Lora italic pull-quote */
font-style: italic;
font-weight: 500;
font-size: clamp(1.4rem, 2.6vw, 2rem); /* large */
line-height: 1.4;
color: var(--purple-deep);
}
.founder-vision__note {
margin: 1.5rem 0 1.9rem;
max-width: 52ch;
font-size: clamp(1rem, 1.4vw, 1.08rem);
line-height: 1.6;
color: var(--text-warm);
}
/* Hidden v3 sections (marquee / experts row / old cta-band) stay hidden even
if a display rule ever lands on them. */
section[hidden] { display: none !important; }
/* --- Closing band — light sunrise (dawn gradient) ---------------------------
The page's warm close before the dark footer, so the run of light sections
ends light -> light -> light-sunrise -> dark footer (no two dark bands
adjacent). A warm gold glow eases down into soft lavender using existing
tokens. Everything centered. AA on the lightest point (the lavender foot):
--purple-deep quote 12.9:1; the source uses the deepened text-gold #8A6128
(5.4:1 at its small-caps size - canonical gold fails on a light ground);
the button is white on opaque --purple-bright (6.5:1). */
.closing-band {
/* Lavender-field image band, layered bottom -> top:
1. ::after (z-1) — the image itself on its OWN layer, cover, nudged right,
with the sharpening filter (contrast/saturate/brightness) that must never
touch the text or scrim;
2. ::before (z0) — the LEFT text-protecting dark-purple scrim, fading to
fully-revealed image on the right;
3. the content (z2).
background-color is the image-missing fallback so text is never stranded on
white. */
position: relative;
isolation: isolate;
background-color: var(--purple-deep); /* image-missing fallback (the image now lives on ::after, below) */
/* TALLER, cinematic band — clearly taller than the footer beneath; the generous
vertical padding gives the lavender scene room to breathe and keeps the
left-aligned content vertically balanced. */
padding-block: clamp(4rem, 8vw, 6.5rem);
text-align: left; /* editorial left-aligned copy; the image owns the right */
/* Step 13: the gold CTA→footer hairline lives ONCE, on .site-footer's border-top.
Removed the duplicate border-bottom here that was stacking into a 2px double line. */
}
/* The ONLY overlay: a NARROW left text-protecting scrim. No full-band frost/tint —
the image shows at near-full clarity and warmth (the mockup look): golden sunrise,
field, path and women all clean and bright across the centre + right. The soft
dark-purple fade lives only behind the left text column and is fully transparent
by ~60% — the right ~40% carries nothing at all. */
.closing-band::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; /* longhand, not `inset` (Safari <14.1) */
z-index: 0;
background: linear-gradient(90deg,
rgba(28, 18, 56, 0.66) 0%,
rgba(28, 18, 56, 0.52) 28%,
rgba(28, 18, 56, 0.26) 46%,
transparent 60%);
}
/* Phones: the left-aligned copy spans most of the narrow width, so the scrim keeps a
floor of protection across the band (text AA wins over full image reveal here). */
@media (max-width: 639.98px) {
.closing-band::before {
background: linear-gradient(90deg, rgba(28, 18, 56, 0.68) 0%, rgba(28, 18, 56, 0.52) 55%, rgba(28, 18, 56, 0.3) 100%);
}
}
/* TABLET (iPad audit fix): between 640-1023px the container has no side gutters, so
the quote's right edge reaches ~60% of the band — exactly where the desktop scrim
has already faded out. Extend the fade to ~76% in this band only, keeping the far
right (women + sun) clear. Desktop (>=1024) keeps the original narrow scrim. */
@media (min-width: 640px) and (max-width: 1023.98px) {
.closing-band::before {
background: linear-gradient(90deg,
rgba(28, 18, 56, 0.7) 0%,
rgba(28, 18, 56, 0.56) 34%,
rgba(28, 18, 56, 0.3) 58%,
transparent 76%);
}
}
/* The IMAGE on its own layer so a sharpening filter can hit ONLY the photo — never
the scrim, text or button. z-index -1 inside the band's isolated stacking context
paints it above the element's fallback colour but below the ::before scrim (z0)
and the content (z2). Filter values (nudge here): contrast 1.15 / saturate 1.1 /
brightness 1.02 — conservative, premium, not cooked. NOTE: the source file is
only 1024x434, so some softness is resolution, not styling. */
.closing-band::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; /* longhand, not `inset` (Safari <14.1) */
z-index: -1;
background-image: url("../img/cta-bg.webp");
background-size: cover;
background-position: 70% center; /* women + sun stay in frame on the right */
background-repeat: no-repeat;
filter: contrast(1.15) saturate(1.1) brightness(1.02);
}
.closing-band > .container { position: relative; z-index: 2; } /* copy + button above the scrim */
/* PHONES ONLY: keep the taller cinematic feel at narrow widths too. */
@media (max-width: 639.98px) {
.closing-band { padding-top: 4.5rem; padding-bottom: 4rem; }
}
.closing-band__quote {
margin: 0; /* left-aligned block at the container's content margin */
max-width: 22ch; /* narrower measure keeps the whole headline INSIDE the left scrim column (AA) while the image stays clear beside it */
font-family: var(--font-head); /* Lora */
font-style: italic;
font-weight: 500;
font-size: clamp(1.5rem, 3vw, 2.2rem);
line-height: 1.4;
color: var(--white); /* headline white over the scrimmed image */
text-shadow: 0 1px 2px rgba(20, 14, 40, 0.7), 0 2px 12px rgba(20, 14, 40, 0.4); /* soft glyph halo — AA held over the image's brighter patches */
}
.closing-band__source {
margin: 1.2rem 0 0; /* left-aligned under the headline */
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold); /* canonical gold on the scrimmed centre */
text-shadow: 0 1px 2px rgba(20, 14, 40, 0.85), 0 1px 6px rgba(20, 14, 40, 0.5); /* the small caps are the tightest AA margin — the shadow + centre scrim carry them */
}
.closing-band__cta { margin: clamp(1.25rem, 3vw, 1.85rem) 0 0; } /* button aligns LEFT under the text */
.closing-band__btn {
font-size: 1.1rem;
padding: 1.05rem 2.1rem; /* large, confident primary */
background: var(--gold); /* Gold #BB863F fill */
color: var(--purple-deep); /* dark label on gold ≈ 4.5:1 = AA */
border-color: var(--gold);
}
.closing-band__btn:hover {
background: var(--gold-deep); /* deepen on hover */
color: var(--white); /* white on gold-deep ≈ 5.5:1 = AA */
border-color: var(--gold-deep);
}
.closing-band__line {
margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0; /* left-aligned closing line */
font-family: var(--font-head); /* Lora italic */
font-style: italic;
font-size: clamp(1rem, 2.2vw, 1.2rem);
line-height: 1.5;
color: rgba(255, 255, 255, 0.9); /* lifted from 0.82 — over the image band, the closing line needs the extra strength */
text-shadow: 0 1px 2px rgba(20, 14, 40, 0.7), 0 1px 8px rgba(20, 14, 40, 0.4);
}
/* --- Mission statement — oversized editorial treatment ----------------------
A deep-breath moment on pure white: display-scale Lora, with the two verbs
italic in --purple-bright (6.5:1 large-text on white; the rest --purple-deep,
14.9:1). The founder's mission runs ~200 characters, so the measure is ~34ch
— narrower would stack it into a tower; at this width it balances into ~6
stately lines at full scale. Now lives on our-story.html (the homepage keeps
a short bridge line in its place). */
.mission {
background: var(--white);
padding-block: clamp(4.5rem, 12vw, 8.5rem);
text-align: center;
}
.mission__statement {
margin: 0 auto;
max-width: 34ch;
font-family: var(--font-head); /* Lora */
font-weight: 600;
font-size: clamp(1.5rem, 3.2vw, 2.5rem); /* sized down (was clamp(2rem, 5vw, 4rem) — display scale read too large under the letter); same family/weight/style/emphasis. 24px min keeps the purple-bright verbs large-text AA (6.5:1) */
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--purple-deep);
text-wrap: balance;
}
.mission__accent { font-style: italic; color: var(--purple-bright); }
/* --- What We Believe (homepage) — belief statement + three movement pillars --
Design Review V2. A MEDIUM-height cream band (warm alternating beat between
the white Evidence section above and the white Founder-quote below): a gold
kicker, a Lora heading, a short italic supporting line, then three equal
on-brand pillar cards (Educate / Connect / Advocate) that stack to one column
on phones and sit 3-across from 640px up. A preserved gold "Read the Founder's
Vision" button closes the section. AA on cream: --gold-deep kicker ≈5.2:1;
--purple-deep heading ≈13:1; --purple lede ≈10:1. On the white pillar cards:
--purple-deep title ≈14:1; --text-warm body ≈8.6:1; icons are decorative. */
.believe {
background: var(--cream);
padding-block: clamp(2.75rem, 6vw, 4.25rem); /* medium height per the visual-rhythm plan */
text-align: center;
}
.believe__heading {
margin: 0.4rem 0 0.75rem;
font-family: var(--font-head); /* Lora */
font-weight: 600;
font-size: var(--fs-h2);
line-height: 1.15;
color: var(--purple-deep);
}
.believe__lede {
margin: 0 auto;
max-width: 40ch;
font-family: var(--font-head); /* Lora */
font-style: italic;
font-weight: 500;
font-size: var(--fs-lede);
line-height: 1.45;
color: var(--purple);
text-wrap: balance;
}
.believe__pillars {
list-style: none;
margin: clamp(2rem, 4.5vw, 3rem) 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr; /* phone: one column */
gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 640px) {
.believe__pillars { grid-template-columns: repeat(3, 1fr); } /* tablet + desktop: 3 pillars across */
}
.pillar {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
padding: clamp(1.5rem, 3vw, 2rem) clamp(1.15rem, 2.5vw, 1.5rem);
/* Display content, not a button: flat on the cream band — no raised white
card, no shadow, no hover affordance (none ever existed; these are plain
display blocks). Border kept but transparent so the box size is
byte-identical to the old card => zero layout shift. */
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius);
box-shadow: none;
}
.pillar__icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin-bottom: 0.35rem;
border-radius: 50%;
background: var(--lavender-light); /* soft brand circle */
color: var(--purple-bright); /* icon stroke — decorative, strong on lavender-light */
}
.pillar__icon svg { width: 28px; height: 28px; display: block; }
.pillar__title {
margin: 0;
font-family: var(--font-head); /* Lora */
font-weight: 600;
font-size: var(--fs-h3);
line-height: 1.2;
color: var(--purple-deep);
}
.pillar__text {
margin: 0;
max-width: 26ch;
font-size: var(--fs-body);
line-height: 1.5;
color: var(--text-warm);
}
.believe__cta { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; }
/* --- Founder quote (homepage) -----------------------------------------------
A quiet, dignified pull-quote from the Founding Chairman on pure white,
sitting between the cream What We Believe section and the lavender Featured
strip so the alternating rhythm holds. One oversized gold opening quotation mark is
the only ornament; the quote is graceful Lora italic, the attribution small
and calm beneath. Quote text, attribution and role line are verbatim.
Quote-only: the Chairman's portrait already appears twice on this page.
AA on white: --purple-deep quote 12.9:1; --gold-deep attribution ≈5.4:1 at
its size; --text-muted role ≈7:1. */
.founder-quote {
background: var(--white);
padding-block: clamp(3.5rem, 8vw, 5.75rem);
text-align: center;
}
.founder-quote__inner {
margin: 0 auto;
max-width: 44rem;
padding: 0 1.25rem;
}
.founder-quote__mark {
display: block;
font-family: var(--font-display); /* Playfair — a graceful quotation mark */
font-size: clamp(3.25rem, 8vw, 5rem);
line-height: 0.7;
color: var(--gold);
margin-bottom: 0.4rem;
}
.founder-quote__text {
margin: 0;
font-family: var(--font-head); /* Lora */
font-style: italic;
font-weight: 500;
font-size: clamp(1.55rem, 3.4vw, 2.35rem);
line-height: 1.4;
color: var(--purple-deep);
text-wrap: balance;
}
.founder-quote__text p { margin: 0; }
.founder-quote__cite {
display: block;
margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}
.founder-quote__attr {
display: block;
font-family: var(--font-head); /* Lora */
font-weight: 600;
font-size: clamp(1rem, 2.2vw, 1.1rem);
letter-spacing: 0.01em;
color: var(--gold-deep); /* deepened text-gold — AA on white */
}
.founder-quote__role {
display: block;
margin-top: 0.35rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
/* ============================================================================
Fused band (Part A): the evidence stats (light lavender) flow straight into
the two-column belief + founder quote (cream) as ONE continuous band — the
only seam is the background tint change; both regions share the container so
they read as a single unit. (The old .why-gem__card / .founder-quote* rules
above are now unused and can be pruned later.)
============================================================================ */
/* TOP — light-lavender stats strip */
.fusion__stats-wrap {
background: var(--lavender-light);
/* Step 13: medium-tall band — airier TOP so the transition line gets a quiet breath
before the stats; bottom kept moderate leading into the belief block. */
padding-top: clamp(2.5rem, 5vw, 3.75rem);
padding-bottom: clamp(1.75rem, 4vw, 3rem);
}
/* Reuse the approved transition-line treatment as the band's lead-in; trim its
large standalone padding so it sits directly above the stats (0,2,0 beats the
base .hero-bridge rules, incl. the >=768px one). */
.fusion__stats-wrap .hero-bridge {
padding-top: 0;
padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.fusion__stats {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr); /* desktop: one row of four */
gap: clamp(1rem, 2.5vw, 2rem);
align-items: start;
}
.fusion-stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.25rem;
padding: 0 clamp(0.25rem, 1.5vw, 1rem);
}
.fusion-stat__figure {
font-family: var(--font-head); /* Lora */
font-weight: 700;
font-size: clamp(1.5rem, 2.6vw, 2.1rem); /* Phase 3: clearly BELOW the section-heading scale (--fs-h2 caps at 2.3rem) while staying the row's prominent display (was 2rem-2.9rem) */
line-height: 1.05;
color: var(--purple); /* #3A2A66 on lavender-light ≈ 9.5:1 */
}
.fusion-stat__label {
margin-top: 0.15rem;
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(0.98rem, 1.8vw, 1.1rem);
line-height: 1.25;
color: var(--purple-deep); /* ≈ 13:1 */
}
.fusion-stat__sub {
max-width: 24ch;
font-size: var(--fs-body);
line-height: 1.4;
color: var(--text-muted); /* ≈ 6:1 on lavender-light = AA */
}
/* "One Global Movement" emphasis (2026-08): the intentional resolution of the
stats row - number ~18% larger than its siblings, number + label in deep
gold #8A6222 (5.01:1 on the lavender band; brand #BB863F measured 2.92:1
here and fails AA, per the task's escape hatch). Same rhythm, same grid. */
.fusion-stat--one .fusion-stat__figure {
/* SHINE PASS (2026-08): larger still (~1.4x the sibling numbers) and
metallic - a gold gradient clipped to the glyph, dark accessible ends
with a champagne highlight streak, plus a soft gold glow that lifts it
off the pale band. AA strategy: the flat #8A6222 below is BOTH the
no-clip fallback and the gradient's dominant tone (measured 5.01:1 on
the band; large-text bar is 3:1) - the light streak is a highlight
accent, not the carrier. Static - nothing animates. */
font-size: clamp(2.1rem, 3.6vw, 3rem);
color: #8A6222; /* fallback + AA anchor */
filter: drop-shadow(0 1px 6px rgba(187, 134, 63, 0.45));
}
@supports (-webkit-background-clip: text) {
.fusion-stat--one .fusion-stat__figure {
background: linear-gradient(163deg, #8A6222 0%, #8A6222 34%, #E9C97C 52%, #B0842F 68%, #8A6222 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.fusion-stat--one .fusion-stat__label { color: #8A6222; font-size: clamp(1.078rem, 1.98vw, 1.21rem); } /* 2026-08: +10% at EVERY stop of the shared clamp(0.98rem,1.8vw,1.1rem) - 19.36px at desktop, 17.25px at 375 - so this label alone grows and keeps its proportion to the siblings at all widths; colour/weight/tracking/gradient treatment untouched */
.fusion-stat__note {
margin-top: 0.3rem;
font-style: italic;
font-size: 0.74rem;
line-height: 1.35;
color: var(--text-muted); /* muted placeholder flag, still AA */
}
/* "Explore More Evidence" — lower-right of the Evidence band; reuses the existing
ghost-button styling (.btn--ghost: purple-bright outline/text, AA on lavender-light). */
.fusion__more { margin: clamp(1.25rem, 3vw, 1.75rem) 0 0; text-align: right; max-width: none; }
/* DEMOTED (2026-08): "Explore More Evidence" is a quiet underlined text link
(same treatment as the demoted footer Join link) - the outlined pill is
retired so it stops competing with the stats band. 44px tap via min-height. */
.fusion__more-link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.2rem 0.1rem;
font-weight: 600;
font-size: 0.95rem;
color: var(--purple);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.18s ease;
}
.fusion__more-link:hover { color: var(--purple-bright); }
.fusion__more-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; } /* max-width:none defeats the base p{max-width:72ch} cap — without it the 72ch box ended mid-container and the right-aligned button LOOKED centered; now it right-aligns to the section's full content width, flush with the 4th stat column's edge */
.fusion__more .btn > span { margin-left: 0.4rem; } /* label<->arrow via margin (Safari <14.1 flex-gap) */
/* Stats reflow: 2x2 on tablet, single column on the smallest phones. */
@media (max-width: 899.98px) {
.fusion__stats { grid-template-columns: repeat(2, 1fr); row-gap: clamp(1.5rem, 4vw, 2rem); }
}
@media (max-width: 479.98px) {
.fusion__stats { grid-template-columns: 1fr; }
}
/* LOWER — cream two-column belief + founder quote */
.fusion__belief-wrap {
background: var(--cream);
padding-block: clamp(2.5rem, 5.5vw, 4rem);
}
.fusion__cols {
display: grid;
grid-template-columns: 1fr; /* stack: belief first, founder below */
gap: clamp(2rem, 4vw, 2.75rem);
}
@media (min-width: 900px) {
.fusion__cols {
grid-template-columns: 0.85fr 1.3fr; /* 2026-08 second rebalance: the compact icon trio needs less width - the founder quote takes the difference */
gap: 0; /* the divider + column paddings own the gap */
align-items: start;
}
/* Faint vertical divider between the two columns (desktop only). */
.fusion__belief {
padding-right: clamp(2.25rem, 4vw, 3.5rem);
border-right: 1px solid rgba(58, 42, 102, 0.14);
}
.fusion__founder { padding-left: 1.5rem; } /* 2026-08 widen: explicit 24px off the divider (the old clamp resolved to 56px measured at a 1440px-wide viewport) - the quote takes the reclaimed width */
}
/* LEFT column — reuse the belief type, left-aligned for the two-column layout. */
.fusion__belief { text-align: left; }
.fusion__belief .believe__heading { margin-top: 0; }
.fusion__belief .believe__lede { margin-left: 0; margin-right: 0; max-width: 42ch; }
.fusion__belief .believe__pillars { margin-top: clamp(1rem, 2vw, 1.4rem); gap: clamp(0.35rem, 0.9vw, 0.55rem); }
/* 2026-08 horizontal tighten (>=640px only - phones keep the stacked rows):
auto tracks shrink each item to its content and the trio centers as one
compact, evenly-gapped group instead of stretching across 1fr tracks. */
@media (min-width: 640px) {
.fusion__belief .believe__pillars { grid-template-columns: repeat(3, auto); justify-content: center; column-gap: clamp(1.1rem, 2.2vw, 1.9rem); }
}
/* Compact the pillar cards a touch for the narrower column (icons + text unchanged). */
.fusion__belief .pillar { padding: clamp(0.35rem, 0.8vw, 0.55rem) clamp(0.6rem, 1.4vw, 0.9rem); } /* 2026-08 tighten: ~60% less vertical padding per item */
.fusion__belief .pillar__icon { width: 46px; height: 46px; }
.fusion__belief .pillar__icon svg { width: 24px; height: 24px; }
/* Pillar title + text inherit the unified --fs-h3 / --fs-body scale (no size override). */
/* PHONE (<640px — where the pillars stack single-column): each belief pillar
becomes a compact horizontal row: small FIXED-size icon left, title + text
stacked right, left-aligned, tight vertical rhythm (~40% shorter than the
stacked layout). Grid with grid-gap (no flex gap, per compat rules); keeps
the flat display treatment. Placed AFTER the .fusion__belief overrides so
these equal-specificity rules win the cascade. Tablet/desktop untouched. */
@media (max-width: 639.98px) {
.believe__pillars .pillar {
display: grid;
grid-template-columns: 28px auto; /* auto (not 1fr) so the title track shrinks to the word - the icon+label pair can center as a unit (2026-08 mobile centering) */
grid-column-gap: 0.85rem;
grid-row-gap: 0.15rem;
align-items: center; /* icon + lone title sit centered (2026-08, subtitles removed) */
justify-content: center; /* 2026-08: phone view reads CENTERED, not left-flush rows */
text-align: left;
padding: 0.6rem 0;
}
.believe__pillars .pillar__icon {
grid-column: 1;
grid-row: 1; /* single row now - subtitles removed (2026-08) */
width: 28px; /* explicit fixed size, not viewport-scaled */
height: 28px;
margin-bottom: 0;
margin-top: 0.15rem; /* optical alignment with the title cap */
background: transparent; /* flat: bare stroke icon, no badge circle */
border-radius: 0;
}
.believe__pillars .pillar__icon svg { width: 26px; height: 26px; }
.believe__pillars .pillar__title { grid-column: 2; }
.believe__pillars .pillar__text { grid-column: 2; max-width: none; }
.fusion__belief .believe__pillars { gap: 0.3rem; }
/* 2026-08 mobile centering, Evidence band: "Explore More Evidence ->" sits
centred on phones (desktop keeps the right-align from the base rule).
nowrap keeps label + arrow on ONE line; the .arrowlink-text underline
treatment is untouched. */
.fusion__more { text-align: center; }
.fusion__more-link { white-space: nowrap; }
}
/* RIGHT column — founder quote, portrait, attribution, button */
.fusion__founder {
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.fusion__founder-quote {
margin: 0;
font-family: var(--font-head); /* Lora */
font-style: italic;
font-weight: 500;
/* Sized for the four-decades excerpt (a multi-line quote, not the old
one-liner): calmer scale + taller leading + a capped measure so it reads
as an editorial passage and never crowds the photo/name/button below
(the figure is a flex column, so they simply flow after it). */
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
line-height: 1.55;
max-width: 70ch; /* 2026-08 widen: guard cap only - the column width is the real measure; 46ch was binding at tablet widths and starving the line length */
color: var(--purple-deep); /* ≈ 13:1 on cream */
/* text-wrap: balance removed 2026-08: balance evens every line at the
SHORTEST equal length (~40ch here), visually re-narrowing the measure
the widen pass just reclaimed - normal greedy wrap lets lines fill the
full column width. */
}
/* Two stacked paragraphs (2026-08); the opening mark lives inline at the start
of p1, the closing mark at the end of p2. */
.fusion__founder-quote p { margin: 0 0 0.7em; display: block; }
.fusion__founder-quote p:last-child { margin-bottom: 0; }
.fusion__founder-mark--close { margin-right: 0; margin-left: 0.08em; }
.fusion__founder-mark {
font-family: var(--font-display); /* Playfair */
color: var(--gold);
font-weight: 700;
font-size: 1.5em;
line-height: 0;
margin-right: 0.1em;
vertical-align: -0.32em;
}
.fusion__founder-person {
display: flex;
align-items: center;
gap: 0.9rem;
}
.fusion__founder-photo {
flex: 0 0 auto;
width: clamp(68px, 12vw, 88px);
height: clamp(68px, 12vw, 88px);
border-radius: 50%;
object-fit: cover; /* no distortion */
}
.fusion__founder-cite { display: flex; flex-direction: column; gap: 0.1rem; }
.fusion__founder-name {
font-family: var(--font-head);
font-weight: 600;
font-size: var(--fs-h3);
color: var(--purple-deep);
}
.fusion__founder-role {
font-size: 0.9rem;
font-weight: 600;
color: var(--gold-deep); /* ≈ 5.2:1 on cream = AA */
}
.fusion__founder-org {
font-size: 0.85rem;
color: var(--text-muted);
}
/* 2026-08: signature row - person LEFT, quiet Founder's Vision arrow-link
RIGHT, vertically centered; the link drops below full-row on phones. */
.fusion__founder-row {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between; /* 2026-08 client direction: signature flush LEFT on the quote text's edge, button flush RIGHT on the quote's right edge - one shared container, one rectangle. (Replaces the earlier right-anchored flex-end pairing; the phone query below centres instead.) */
flex-wrap: wrap;
}
.fusion__founder-row .fusion__founder-person { margin-right: 0; } /* no independent inset - the row's left edge IS the signature's left edge (space-between owns the middle gap) */
/* Fit the pair on one line in the ~420px column: slightly smaller photo in
this row + the long org line wraps (21ch) - measured 475px needed vs 418px
available before this squeeze. */
.fusion__founder-row .fusion__founder-photo { width: 72px; height: 72px; }
.fusion__founder-row .fusion__founder-org { max-width: 150px; } /* only the long org line wraps; the name stays one line */
.fusion__founder-row .fusion__founder-name { font-size: 1.05rem; } /* signature scale beside the 72px photo (was --fs-h3 21.6px, too wide for the shared row) */
.fusion__founder-cta { margin: 0; }
.fusion__founder-link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.2rem 0.1rem;
font-weight: 600;
font-size: 0.95rem;
color: var(--purple);
text-decoration: none; /* the inner .arrowlink-text carries the continuous underline */
transition: color 0.18s ease;
}
.fusion__founder-link:hover { color: var(--purple-bright); }
.fusion__founder-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 479.98px) {
/* Button drops to its own full row: kill the shared-row gap and centre it
(2026-08 mobile centering - matches the centred signature above). */
.fusion__founder-row .fusion__founder-cta { flex-basis: 100%; margin-top: 0.75rem; margin-left: 0; text-align: center; } /* 2026-08: signature->button gap 8px -> 12px (1.5x) above the quieter CTA */
}
/* 2026-08 mobile centering, founder block (same 639.98 phone query as the
belief-pillars centering; placed AFTER the base founder rules so it wins
the cascade - the earlier phone flex-start block that sat here was
superseded by this, client direction). The quote container, the photo+
signature pair, and the Founder's Vision button all centre on phones;
tablet/desktop keep their own alignment from the base rules above.
Quote wording/size untouched. */
@media (max-width: 639.98px) {
.fusion__founder { align-items: center; }
.fusion__founder-row { justify-content: center; }
.fusion__founder-row .fusion__founder-person { margin-right: 0; } /* no off-centre bias from the old signature->button gap */
.fusion__founder-row .fusion__founder-cta { margin-left: 2.25rem; } /* the pair's gap, on the button side (480-639.98 shared row) */
/* 2026-08 phone CTA refinement: quieter secondary action - side padding
22.4px -> 16px, vertical 13.6px -> 8px; the 44px min-height is the tap
floor (unpadded height would be ~39px). Font/border/radius/colour/label
untouched. */
.fusion__founder-cta .btn {
padding: 0.5rem 1rem;
min-height: 44px;
}
/* FOUNDER QUOTE MOBILE ALIGNMENT — change to `center` to fully centre the quote text */
.fusion__founder-quote p { text-align: left; }
}
@media (max-width: 479.98px) {
/* Button on its own full row (<480): kill the shared-row gap so the row
above centres truly; the full-row button centres via its own text-align
(set in the flex-basis:100% rule earlier). */
.fusion__founder-row .fusion__founder-cta { margin-left: 0; }
}
/* ===================================================================
12. Cinematic dark hero (homepage, ALL widths) — dark-to-light arc
The page OPENS dark (the suffering) and brightens down the scroll
(the hope): full-bleed footage — phones included — with a dark text
scrim + dark top strip, light copy, white header items at the top
state; the floating stats band below is the "dawn" handover to the
bright page. These rules override the light-hero rules earlier in
the sheet by file order at every width; phone-specific scrim shape
and video framing sit at the end of this section.
=================================================================== */
/* TEXT-ANCHORED SCRIM (2026-08, replaces the left-anchored horizontal
fog that reached 82% of the frame): one feathered plum POOL sits
behind the headline + subtitle block (upper-left) and fades to
NOTHING by 85% of its ellipse, so the footage plays clear across the
rest of the frame. SIZED FOR THE WORST POSSIBLE FRAME BY
CONSTRUCTION, not by sampling: at the 0.60 core even a PURE WHITE
frame composites to 4.91:1 under white text (both hero elements are
large text, 3.0 required) - no frame the footage can contain can
break it. (A 39-step seek sweep of the real footage was attempted
first; a headless pane returns undecoded black frames, so the
guarantee was moved into the math; the bright final-scene still
measures 5.8-6.6:1 as the realistic case.) Every corner of both text
rects measures inside the 0.60 core at 1440px. The text shadows
below stay as the second belt. */
.hero--editorial::after {
background-image: radial-gradient(75% 80% at 30% 38%,
rgba(20, 14, 40, 0.62) 0%,
rgba(20, 14, 40, 0.60) 60%,
rgba(20, 14, 40, 0) 85%);
}
/* Copy flips light-on-dark. Soft layered shadows (v3 pattern) insure
the tails where the scrim thins. Entrance choreography untouched. */
.hero--editorial .hero__headline {
color: var(--white);
/* Subtle layered glow — a tight dark edge + two soft haloes — for depth and
legibility over the video, while the headline stays powerful white. */
text-shadow: 0 1px 3px rgba(20, 14, 40, 0.6), 0 3px 22px rgba(20, 14, 40, 0.55), 0 0 46px rgba(20, 14, 40, 0.32);
}
/* Accent: soft light lavender — purple-bright is too dark on dark.
#CDBBEB holds ≥3:1 large-text through the scrim even vs pure white. */
.hero--editorial .hero__line--accent { color: #CDBBEB; }
/* Subtitle — a two-line hierarchy for emotional impact (line 1 is the hopeful,
human focus). Both lines sit in the strengthened left scrim; the layered
shadow gives each glyph a dark halo so the light warm/cool tints stay legible
over the footage's bright tail (the owner-approved v3 shadow-carried pattern).
Tested over both the dark opening frame (very high contrast) and the bright
sunrise frame (scrim + shadow carry it). */
.hero--editorial .hero__subtitle {
color: var(--white); /* fallback; the two lines set their own tones below */
text-shadow: 0 1px 2px rgba(20, 14, 40, 0.92), 0 1px 10px rgba(20, 14, 40, 0.72), 0 3px 22px rgba(20, 14, 40, 0.5);
}
/* Short, thin gold accent rule between the headline and the subtitle. */
.hero--editorial .hero__subtitle::before {
content: "";
display: block;
width: 2.75rem;
height: 2px;
margin-bottom: 0.9rem;
border-radius: 2px;
background: var(--gold); /* #BB863F — a subtle premium editorial accent */
box-shadow: 0 1px 6px rgba(20, 14, 40, 0.5);
}
/* Line 1 — larger, warm soft cream-gold, serif italic: the hopeful, human line. */
.hero--editorial .hero__subtitle-line:first-child {
font-size: clamp(1.4rem, 2.7vw, 1.95rem); /* larger than line 2 — the emotional focus */
font-style: italic;
color: #ECD6AE; /* soft champagne — a light, legible tint of brand gold #BB863F */
margin-bottom: 0.1rem; /* tight — the two lines read as ONE flowing paragraph */
}
/* Line 2 — same serif italic as line 1, sentence case, slightly smaller, in a
soft lavender-cream, tight beneath line 1: one continuous subtitle (not a
separate tagline/kicker). */
.hero--editorial .hero__subtitle-line:last-child {
font-family: var(--font-head); /* Lora serif italic — same family as line 1 */
font-style: italic;
font-weight: 500;
font-size: clamp(1.15rem, 2.2vw, 1.55rem); /* slightly smaller than line 1 */
line-height: 1.3;
letter-spacing: normal; /* remove the small-caps tracking */
text-transform: none; /* sentence case */
color: #E7DEEA; /* soft lavender-cream */
}
/* Scroll cue rides the dark footage from tablet width up. */
.hero__scroll { color: var(--white); }
/* Header top state (transparent over the dark strip): every visible
control flips white — including the tablet cluster's icons and
hamburger — and eases back (~0.25s) to the existing solid state on
scroll. The crest keeps its real colours in every state (NO filter); only
the white HTML wordmark carries the "white on dark" treatment. */
.site-header--floating .header-search,
.site-header--floating .lang-switcher__button,
.site-header--floating .header-signin { transition: color 0.25s ease, border-color 0.25s ease; }
.site-header--floating:not(.is-scrolled) .header-search,
.site-header--floating:not(.is-scrolled) .lang-switcher__button,
.site-header--floating:not(.is-scrolled) .header-signin { color: var(--white); }
.site-header--floating:not(.is-scrolled) .nav-toggle-bar { background: var(--white); }
/* Video framing per breakpoint: the 16:9 footage keeps its key subject (the
seated/rising woman) on the right third. Wide frames show enough at the
default center; smaller frames slide toward her. */
@media (min-width: 760px) and (max-width: 1023.98px) {
.hero--editorial .hero__video { object-position: 70% center; } /* tablet portrait */
}
@media (max-width: 759.98px) {
.hero--editorial .hero__video { object-position: 78% center; } /* phone: woman + sunrise */
/* Phone scrim (2026-08, reshaped): the copy spans nearly the full width
of the top ~44%, so the scrim is a TOP BAND that fades to NOTHING by
68% - the lower third of the footage plays clear (the old band held
0.4 fog to the very bottom). Same 0.60 pure-white-frame guarantee as
the desktop pool (4.91:1 under white text); the doorways below carry
their own self-contained per-column scrims. */
.hero--editorial::after {
background-image: linear-gradient(180deg,
rgba(20, 14, 40, 0.62) 0%,
rgba(20, 14, 40, 0.60) 46%,
rgba(20, 14, 40, 0) 68%);
}
}
/* (The old phone letterbox/zoom "is-panning" opening was removed: it existed to
reveal a sentence burned into the previous hero video. The footage is now
text-free and the opening is coded (.hero__opening), so phones just use the
standard object-fit:cover framing.) */
@media (min-width: 1400px) {
/* Desktop nav links + EN pill at the top state. TOP-LEVEL links only
(> ul > li > a): the broader "> ul a" also caught the dropdown-panel
links and painted them white on the white panel — invisible menus.
Hover is the same minimal label fade as the rest of the nav (Part A) — no
veil, box or underline. */
.site-header--floating .primary-nav > ul > li > a,
.site-header--floating .nav-menu__toggle { transition: color 0.25s ease, opacity 0.2s ease; }
.site-header--floating:not(.is-scrolled) .primary-nav > ul > li > a,
.site-header--floating:not(.is-scrolled) .nav-menu__toggle { color: var(--white); }
.site-header--floating:not(.is-scrolled) .primary-nav > ul > li > a:hover,
.site-header--floating:not(.is-scrolled) .nav-menu__toggle:hover {
opacity: 0.7;
color: var(--white);
}
.site-header--floating:not(.is-scrolled) .lang-switcher__button { border-color: rgba(255, 255, 255, 0.65); }
.site-header--floating:not(.is-scrolled) .header-divider { background: rgba(255, 255, 255, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
.site-header--floating .header-search,
.site-header--floating .lang-switcher__button,
.site-header--floating .header-signin,
.site-header--floating .primary-nav > ul a,
.site-header--floating .nav-menu__toggle { transition: none; } /* instant state swap */
}
/* --- Pinned masthead (inner pages) ------------------------------------------
Same fixed positioning as the homepage's floating header, but always solid
(cream on mobile, white on desktop via the editorial rules) so navigating
between pages never jumps. Because the header sits out of flow, is
padded down by the measured header height (ui.js sets --header-h; the
static values are a close no-JS fallback). */
.site-header--pinned {
position: fixed;
top: 0;
left: 0;
right: 0;
}
/* Sibling selector, not body:has() — :has is Safari 15.4+; without this rule
inner-page content would sit hidden UNDER the fixed header on older Safari.
The header and are body-level siblings on every page. */
.site-header--pinned ~ main { padding-top: var(--header-h, 4.35rem); }
@media (min-width: 1400px) {
.site-header--pinned ~ main { padding-top: var(--header-h, 3.9rem); }
}
/* Mobile menu "Join Us" — the pill joins the open hamburger panel (the top-bar
pill stays desktop-only). Hidden wherever the desktop row shows the real one. */
.header-join--menu {
display: inline-flex;
min-height: 44px; /* comfortable tap target in the panel */
margin: 0.35rem 0.4rem 0.5rem;
}
/* 2026-08 centering fix: the drawer's shared link rule (.primary-nav a,
specificity 0,1,1) beats both .header-join rules (0,1,0) and forces
display:block - so the pill rendered as a full-width LEFT-aligned list
item and the base rule's flex centering never applied. This 0,2,0 rule
outranks it: still a full-width block-level box (same size, zero layout
shift), but the label is centred both ways. Drawer-scoped - the desktop
pill never carries --menu. */
.primary-nav .header-join--menu {
display: flex;
align-items: center; /* vertical centring within the >=44px box */
justify-content: center; /* horizontal centring */
text-align: center;
}
@media (min-width: 1400px) {
.nav-item--join { display: none; }
}
/* ===================================================================
13. Plum-glass sticky header — homepage scrolled + all inner pages
The settled header is semi-transparent deep plum (rgba of --purple-deep =
rgb(46,33,80)) with a 12px backdrop blur + a light hairline; a more opaque
solid is the no-backdrop-filter fallback. Header items stay WHITE (never
purple) over it, and it shrinks ~17% vs the top state. AA: white over the
0.75 glass composited on the LIGHTEST band it floats over (white) ≈ 6.5:1
(pass); over cream/lavender/dark bands it only darkens (higher). The
homepage TOP state stays transparent with white items (§12). Inner pages
(.site-header--pinned) wear this glass from the start (no transparent state).
=================================================================== */
/* ============ Three-stage progressive frosted glass (scroll-driven) ==========
ui.js toggles .is-scrolled (past the first threshold, 80px) and then
.is-scrolled-deep (past the second, 560px) on the header. The bar background
deepens in three stages; the LOGO never changes (constant size, full colour)
— ONLY this background does. Tint is the mockup's deep purple #4B2E83
(rgb 75,46,131) — deep enough that white items stay AA even at ~72%; never
the rejected light #9E7AC8. Each stage has a SOLID fallback first, then an
@supports layer adds the real backdrop blur WITH the -webkit- prefix.
STAGE 1 (top) solid #4B2E83, no blur, fully opaque
STAGE 2 (.is-scrolled) ~82% purple + blur 12px + 1px white hairline
STAGE 3 (.is-scrolled-deep) ~72% purple + blur 18px (visibly stronger)
Applies to both variants (floating homepage + pinned inner pages). */
.site-header--editorial {
transition: background-color 0.3s ease, -webkit-backdrop-filter 0.3s ease,
backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* TWO-STATE HEADER (client direction — unified glass):
TRANSPARENT STATE — homepage at/near the top (intro + the whole video-watching
period): COMPLETELY INVISIBLE bar; WHITE logo; light nav items. Untouched.
GLASS STATE — scrolled past HEADER_FROST_AT (ui.js), and ALL inner pages from
the top: a NEAR-TRANSPARENT watery tint (--glass-bg-header, tokens.css) with
no blur and no inner gradient — per-glyph shadows carry the text. Nav
items stay light; the LOGO cross-fades to the BLACK wordmark on scroll
(client direction — see the .brand-logo rules).
.is-scrolled-deep is kept in sync by JS for compatibility but renders
identically to .is-scrolled; .is-intro-dark only suppresses the glass if the
user scrolls mid-intro. */
.site-header--floating {
background: transparent; /* STATES A + B — genuinely no bar */
border-bottom: 1px solid transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.site-header--pinned,
.site-header--floating.is-scrolled,
.site-header--floating.is-scrolled-deep,
.site-header--pinned.is-scrolled,
.site-header--pinned.is-scrolled-deep {
/* STATE 2 — FLAT TRANSLUCENT PURPLE (2026-08 deepen, client direction): one
even, uniform tint across the whole bar — the deep brand purple #4B2E83 at
72%, the MINIMUM that carries white nav text to AA over the lightest
content it can float above (measured 4.74:1 composited on pure white)
while still clearly reading as see-through. Same violet hue family as the
old 0.14 "water" whisper (which measured 1.24:1 - glyph shadows were doing
all the work). NO blur, NO gradient, and the old soft drop shadow is
REMOVED per direction - only the hairline bottom edge remains. The token
--glass-bg-header is deliberately NOT touched: the homepage doorway panels
still share it; this deeper tint is scoped to the header alone. */
/* RESTORED 2026-08 (client direction, reference image; recovered verbatim
from commit bbc7f74): LIGHT FROSTED LAVENDER on the solid/scrolled state
of EVERY page - homepage and inner pages now share one treatment (the
purple rgba(75,46,131,0.72) state and the blur-less 0.50 lavender pass
are both replaced). SOLID --lavender #F2EEF8 is the no-blur fallback
(WeChat / old engines read a clean matte panel - a translucent tint
WITHOUT blur lets hard edges ghost through, which the reference's soft
show-through is not); the @supports block below layers the true frosted
glass: 0.80 tint + 16px blur, both prefixes.
⚠️ CONTRAST (measured, reported, NOT gated - client's decision): white
nav items ~1.1:1 on this pale panel; the black wordmark ~15:1. Item
colours are scope-locked and unchanged. The homepage's transparent
over-hero state and the .is-intro-dark suppressor are untouched and
still outrank this by specificity/order. */
background-color: #F2EEF8;
border-bottom: var(--glass-border);
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.site-header--pinned,
.site-header--floating.is-scrolled,
.site-header--floating.is-scrolled-deep,
.site-header--pinned.is-scrolled,
.site-header--pinned.is-scrolled-deep {
background-color: rgba(242, 238, 248, 0.80);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
}
/* REPLACED 2026-08 - the short-lived homepage-only translucent 0.50 no-blur
override; the unified frosted rule above now covers the homepage's scrolled
state too. Retained for restore:
.site-header--floating.is-scrolled,
.site-header--floating.is-scrolled-deep {
background-color: #F2EEF8;
background-color: rgba(242, 238, 248, 0.5);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
*/
/* (2026-08: a short-lived unification rule here composited the pinned bar's
tint over a constant WHITE underlay — it made every inner header identical
but read as a SOLID bar, so it was reverted per client direction. Inner
pages use the plain translucent --glass-bg-header tint from the state-2 rule
above, identical CSS on every inner page; what shows through is the page
beneath. The homepage (--floating) was never affected either way. */
/* ============ FROSTED GLASS - ALL PAGES (2026-08) ============================
The homepage trial's scrolled-state glass, promoted SITE-WIDE per client
authorisation (appearance values only - markup, heights, nav and behaviour
untouched): the back-to-top button's own lavender rgb(199,166,241) carried
up to the bar. Inner pages (.site-header--pinned) wear it from the start,
exactly as they wore the previous 0.80 lavender; the homepage keeps its own
states - transparent at top, this glass once .is-scrolled, and the
.is-intro-dark suppressor (three classes) still outranks everything here.
Three glass elements:
1. TINT rgba(199,166,241,0.30) - high transparency, lavender visible
2. BLUR 11.5px, both prefixes, inside @supports; solid #C7A6F1 fallback
3. EDGE inset 1px white 0.40 top rim (inset shadow - no layout shift),
1px white 0.22 bottom hairline, and a narrow white 0.14->0
vertical gradient (depth in the material, fading by 60% of the
bar height). */
.site-header--pinned,
.site-header--pinned.is-scrolled,
.site-header--pinned.is-scrolled-deep,
.site-header--floating.is-scrolled,
.site-header--floating.is-scrolled-deep {
background-color: #C7A6F1; /* solid fallback for engines without blur/rgba layering */
/* 2026-08 +15% STRENGTHENING (client direction) across all three glass
components - tint colour/alpha deliberately UNCHANGED:
gradient 0.12 -> 0.14, rim 0.35 -> 0.40, blur 10px -> 11.5px (under
the 18px Safari cap). */
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40); /* lit glass rim along the top edge */
border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.site-header--pinned,
.site-header--pinned.is-scrolled,
.site-header--pinned.is-scrolled-deep,
.site-header--floating.is-scrolled,
.site-header--floating.is-scrolled-deep {
background-color: rgba(199, 166, 241, 0.30);
-webkit-backdrop-filter: blur(11.5px);
backdrop-filter: blur(11.5px);
}
}
/* STATE A — intro active: the header stays COMPLETELY INVISIBLE (zero bar) over the
dark opening; only the logo swap below reacts to this class. The .is-scrolled
compounds keep it invisible even if the user scrolls mid-intro. */
.site-header--floating.is-intro-dark,
.site-header--floating.is-intro-dark.is-scrolled,
.site-header--floating.is-intro-dark.is-scrolled-deep {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom-color: transparent;
box-shadow: none;
}
/* STACKED LOGO PAIR (all pages share the markup): the BLACK-wordmark original is
the default everywhere; the WHITE variant sits absolutely over it (same box —
ZERO layout shift). The swap is SCROLL-DRIVEN, matched to the frost: while the
homepage header is TRANSPARENT (:not(.is-scrolled) — the intro AND the whole
time the video plays at the top, including the reduced-motion/blocked-autoplay
poster case, where the top is equally dark) the WHITE logo shows; crossing
HEADER_FROST_AT flips .is-scrolled, so the frost and the ~600ms white -> black
cross-fade arrive together. Inner pages (--pinned) never match: black from the
top. The BLACK logo keeps NO glow, halo, plate or shadow in any state; the
WHITE twin carries a soft per-glyph drop-shadow (client direction after the
hero top wash was removed — it replaces that strip as the ONLY legibility aid,
hugging the alpha channel, no plate/tint over the video). */
.brand { position: relative; flex-shrink: 0; }
.brand-logo--white {
/* The markup carries `hidden` as a STALE-CSS SAFETY NET: if this stylesheet ever
fails to load (or an old cached copy without these rules is served), the white
twin simply doesn't render — the two-logos-side-by-side failure is impossible
at the markup level. When THIS stylesheet is live, display:block re-enables it
(author rules beat the UA's [hidden] default) and the stack works as designed.
ZERO SELF-SIZING (Safari overlap fix): the white twin is bound to the black
logo's box on every edge — width/height 100%, no auto anything — so no engine
can resolve it wider than the box the nav aligns against. Both files are
exactly 1600x715, so object-fit:contain fills the box perfectly (no visible
shrink); object-position keeps it pinned left like the black one. */
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; /* longhand, not `inset` (Safari <14.1) */
width: 100%;
height: 100%;
max-width: none; /* the box, not the ratio cap, is the constraint here */
object-fit: contain;
object-position: left center;
opacity: 0;
/* Localized legibility aid (replaces the removed hero top wash): a tight dark
edge + a faint lift following the logo's OWN alpha channel — the video around
the mark stays untouched. REFINED with the nav text (client: premium, no
visible halo — was 0.55 3px + 0.35 12px). Worst-case (pure-white frame) the
composited glyph edge reads ≈5:1 against the white mark (graphic floor 3:1). */
filter: drop-shadow(0 1px 2px rgba(20, 14, 40, 0.5)) drop-shadow(0 2px 6px rgba(20, 14, 40, 0.18));
}
.brand-logo--black,
.brand-logo--white { transition: opacity 0.6s ease; } /* the transparent<->frosted logo cross-fade */
.site-header--floating:not(.is-scrolled) .brand-logo--black { opacity: 0; }
.site-header--floating:not(.is-scrolled) .brand-logo--white { opacity: 1; }
/* Mid-intro edge case: if the user scrolls DURING the intro, the header stays
invisible (see the .is-intro-dark rules above) — keep the logo white with it. */
.site-header--floating.is-intro-dark .brand-logo--black { opacity: 0; }
.site-header--floating.is-intro-dark .brand-logo--white { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.brand-logo--black, .brand-logo--white { transition: none; }
}
/* WHITE items in BOTH states (transparent top + near-transparent water): the dark
text/glyph shadows now apply everywhere — over the video they carry the top
state, and on the watery bar they alone carry AA over the palest band the
header can float over (the old inner top gradient is gone). */
@media (min-width: 1400px) {
.site-header--floating .primary-nav > ul > li > a,
.site-header--floating .nav-menu__toggle,
.site-header--floating .lang-switcher__label,
.site-header--pinned .primary-nav > ul > li > a,
.site-header--pinned .nav-menu__toggle,
.site-header--pinned .lang-switcher__label {
/* REFINED (client: premium, no visible halo): one crisp low-opacity edge + a
whisper of ambient lift — replaces the old heavy triple shadow
(0.8 / 0.55 6px / 0.35 14px). AA floor: the 0.55 tight edge is as subtle as
worst-case allows — composited on a pure-white frame the glyph edge reads
≈5.5:1 (≥4.5 AA); at 0.45 it drops to ≈3.9:1 and fails. */
text-shadow: 0 1px 2px rgba(20, 14, 40, 0.55), 0 1px 8px rgba(20, 14, 40, 0.18);
}
}
.site-header--floating .header-search__icon,
.site-header--floating .lang-switcher__globe,
.site-header--floating .header-signin__icon,
.site-header--pinned .header-search__icon,
.site-header--pinned .lang-switcher__globe,
.site-header--pinned .header-signin__icon {
filter: drop-shadow(0 1px 2px rgba(20, 14, 40, 0.55)); /* refined with the nav text (was 0.65); graphics floor 3:1 holds at ≈3.9:1 worst-case */
}
.site-header--floating .nav-toggle-bar,
.site-header--pinned .nav-toggle-bar {
box-shadow: 0 1px 2px rgba(20, 14, 40, 0.5);
}
/* GLASS STATE — WHITE items (same as the top state) on the near-transparent watery
bar; the per-glyph shadows above carry AA (no gradient, no blur). */
.site-header--floating.is-scrolled .header-search,
.site-header--floating.is-scrolled .header-tools .lang-switcher__button,
.site-header--floating.is-scrolled .header-signin,
.site-header--pinned .header-search,
.site-header--pinned .header-tools .lang-switcher__button,
.site-header--pinned .header-signin { color: var(--white); } /* .header-tools raises specificity so EN follows the glass state */
.site-header--floating.is-scrolled .nav-toggle-bar,
.site-header--pinned .nav-toggle-bar { background: var(--white); }
/* Active-page link: white in every state (transparent top + glass).
TOP-LEVEL ONLY (> ul > li > a): the broader ".primary-nav a[aria-current]"
also matched links INSIDE the dropdown panel and painted them white on the
panel's white background — an invisible item on whichever page the nav marks
as current (same class of bug the top-level colour rules already avoid). */
.site-header--floating .primary-nav > ul > li > a[aria-current="page"],
.site-header--pinned .primary-nav > ul > li > a[aria-current="page"] { color: var(--white); }
/* (Logo swap RESTORED per client direction: the scroll-driven white -> black
cross-fade rules earlier in the sheet are authoritative again — white at the
transparent top, BLACK on the glass, black-from-top on inner pages. Only the
glass BACKGROUND kept the panels-matching treatment.) */
/* Smooth ~0.25s height/logo shrink, in step with the background change. The
crest tracks --crest-h (height) and the wordmark tracks it via font-size. */
.site-header--editorial .header-inner { transition: padding-block 0.25s ease; }
/* Logo size is frozen on scroll — the crest/wordmark keep a constant --crest-h in
every state, so no height animation (only the header padding + glass background
transition on scroll). */
@media (min-width: 1400px) {
/* GLASS STATE: desktop nav + utilities stay WHITE on the dark translucent glass
(one treatment across both states). "Join the Movement" keeps its own pill. */
.site-header--floating.is-scrolled .primary-nav > ul > li > a,
.site-header--floating.is-scrolled .nav-menu__toggle,
.site-header--pinned .primary-nav > ul > li > a,
.site-header--pinned .nav-menu__toggle { color: var(--white); }
.site-header--floating.is-scrolled .primary-nav > ul > li > a:hover,
.site-header--floating.is-scrolled .nav-menu__toggle:hover,
.site-header--pinned .primary-nav > ul > li > a:hover,
.site-header--pinned .nav-menu__toggle:hover { opacity: 0.7; color: var(--white); } /* Part A: label fade, no veil box */
.site-header--floating.is-scrolled .lang-switcher__button,
.site-header--pinned .lang-switcher__button { border-color: rgba(255, 255, 255, 0.55); }
.site-header--floating.is-scrolled .header-divider,
.site-header--pinned .header-divider { background: rgba(255, 255, 255, 0.4); }
/* Settled header shrinks (crest + tighter padding) but keeps some top
breathing room; the top->scroll compaction feel is preserved. */
.site-header--floating.is-scrolled .header-inner,
.site-header--pinned .header-inner { padding-block: 0.6rem; }
/* Logo size frozen on scroll — no --crest-h change here (see below). */
/* ---- DROPDOWN PANEL COLOUR LOCK (self-contained; must stay last) --------
The dropdown is its own LIGHT surface (white panel, §6), so its text is
DARK on every page and in BOTH header states. The header-state rules above
correctly paint the BAR's items white over the video/glass — this lock
stops any of them (now or later) leaking into the panel and producing a
white-on-white menu. The [aria-current] twin is listed explicitly so it
outranks the active-page rule by specificity, not just source order.
Mobile is deliberately NOT included: inside the open hamburger the panel is
solid plum and its links are white by design. */
.site-header .primary-nav .nav-menu a,
.site-header .primary-nav .nav-menu a[aria-current="page"] {
color: var(--purple); /* #3A2A66 on white ≈ 11.7:1 — AAA */
}
.site-header .primary-nav .nav-menu a:hover,
.site-header .primary-nav .nav-menu a[aria-current="page"]:hover {
color: var(--purple-bright); /* #6B4FA0 on lavender ≈ 5.6:1 — AA */
opacity: 1; /* never inherit the bar's hover fade */
}
}
@media (max-width: 1399.98px) {
/* ~17% shorter settled header on mobile. The 44x44 utility icons floor the
bar height once the logo shrinks under them, so the reduction comes from
tighter padding — the icons stay full 44px tap targets. */
.site-header--floating.is-scrolled .header-inner,
.site-header--pinned .header-inner { padding-block: 0.55rem; }
/* Logo size frozen on scroll — no --crest-h change here. */
/* Opened hamburger menu (COOKIE-BANNER MATCH, GEM Aug 2026): the panel is the
banner's lavender (#F2EEF8, set on .primary-nav.is-open in §6) and the nav
text takes the banner's heading/body colour (--purple-deep). Scoped to the
OPEN drawer only - the header's inline nav (>=1400px) has its own rules and
is untouched. The Join button is EXCLUDED (its own purple/white styling
stands); chevrons are pinned WHITE per client instruction below. The hover
veil flips to the banner's dark 0.10 veil - the old white 0.10 (and white
hover text) would be invisible on the light panel. */
.site-header--editorial .primary-nav.is-open a:not(.header-join),
.site-header--editorial .primary-nav.is-open .nav-menu__toggle { color: var(--purple-deep); }
.site-header--editorial .primary-nav.is-open a:not(.header-join):hover,
.site-header--editorial .primary-nav.is-open .nav-menu__toggle:hover { background: rgba(46, 33, 80, 0.10); color: var(--purple-deep); }
.site-header--editorial .primary-nav.is-open a[aria-current="page"]:not(.header-join) { color: var(--purple-deep); }
/* Chevrons stay WHITE (client decision) - they would otherwise inherit the
new dark currentColor from their toggle. */
.site-header--editorial .primary-nav.is-open .nav-menu__caret { color: var(--white); }
/* The Join button previously took its white label from the drawer's old
blanket `a` rule; excluded from the dark text above, it needs the white
restored explicitly (solid purple button, white label - unchanged look). */
.site-header--editorial .primary-nav.is-open a.header-join { color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
.site-header--editorial .header-inner,
.site-header--editorial .brand-crest,
.site-header--editorial .brand-wordmark { transition: none; }
}
/* --- Experts page: card language aligned with the homepage ------------------
Same resting shadow and hover depth as the homepage tiles/CTA boxes. */
.expert-tile { box-shadow: 0 2px 10px rgba(46, 33, 80, 0.08); }
.expert-tile:hover { box-shadow: 0 10px 24px rgba(46, 33, 80, 0.16); }
.expert-tile:focus-visible { box-shadow: 0 10px 24px rgba(46, 33, 80, 0.16); }
.board-card { box-shadow: 0 2px 10px rgba(46, 33, 80, 0.08); }
@media (prefers-reduced-motion: reduce) {
.expert-tile { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.expert-tile:hover { transform: none; }
.expert-tile:focus-visible { transform: none; }
}
/* Mobile hero still (poster/CSS fallback only — reduced-motion, data-saver,
or a failed video load): match the video's phone framing so the women AND
the golden light stay in the 375px-portrait crop. */
@media (max-width: 759px) {
.hero--editorial { background-position: 78% center; }
}
/* ===================================================================
14. Relocated homepage content on inner pages
The feature-card row ("Explore GEM", above the footer on our-story /
experts / get-involved / support). (The Latest Insights band's rules
were DELETED Aug 2026 with the sample section on the Publications
page - the homepage still carries a [hidden] copy of that band's
markup; restore the rules from git history before un-hiding it.)
=================================================================== */
/* ===================================================================
16. Safari 14 compatibility fallbacks
Modern browsers support aspect-ratio and never enter this block, so
Chrome/Firefox rendering is untouched. Safari 14 drops aspect-ratio;
the two card types below hold ONLY absolutely-positioned children, so
without a ratio they collapse to zero height — percentage padding
recreates the same box (padding % resolves against width).
=================================================================== */
@supports not (aspect-ratio: 1 / 1) {
.feature-card--editorial { padding-bottom: 125%; } /* Part B: 4:5 portrait (was 66.667% = 3:2) */
.gateway-card { padding-bottom: 125%; } /* 4:5 */
@media (min-width: 1100px) {
.gateway-card { padding-bottom: 133.333%; } /* 3:4 (desktop override) */
}
}
/* ===================================================================
Cookie consent banner (site-wide; built by ui.js on first visit only).
Brand direction: soft LAVENDER card, rounded, light and quiet — not a
cold legal popup. Fixed at the bottom (never a blocking modal), z=120:
above the FABs (90) and header (100) until a choice is made. Buttons
reuse the site button system: .btn--primary purple; .btn--ghost gets a
WHITE fill here per the spec ("white background, outlined"); tertiary is
a text link. position:fixed = zero layout shift. AA on lavender: heading
purple-deep ~12.6:1, body/labels --text ~13:1, links purple-bright 5.6:1,
legal line --text (not muted) for small-size safety.
=================================================================== */
/* RESTYLED AGAIN 2026-08 (client direction): the full-width bottom bar is now a
COMPACT CARD pinned to the BOTTOM-RIGHT corner, rounded.
SOLID + LIGHTER 2026-08 (client decision): the translucent glass recipe is
gone — transparency was what blocked the requested lightening (at 0.72 alpha
the max AA-passing lighten was 2.7%). The card is now SOLID #816CA8: the
original rgba(75,46,131) base lightened 30% toward white per channel
(75+0.3*180=129, 46+0.3*209=108.7 -> 108 [floored: 109 rounds to 4.48:1,
just under AA; 108 = 4.52:1 passes], 131+0.3*124=168.2 -> 168). Blur and its
@supports wrapper removed entirely. Being solid, the card reads identically
over any page ground. All white text/labels on #816CA8 = 4.52:1 AA; primary
button stays white with purple-deep label. FOCUS RINGS on the card switched
to WHITE (4.52:1) — gold measures 1.42:1 and the global --focus ring 2.73:1
on this lighter ground, both invisible; prefs-panel inputs keep gold on
their WHITE inset (3.18:1 non-text). position:fixed = zero layout shift;
z=120 above FABs + header. */
.cookie-banner {
position: fixed;
right: clamp(12px, 2vw, 24px);
bottom: clamp(12px, 2vw, 24px);
left: auto;
z-index: 120;
/* 2026-08 further reduction, HEIGHT-FIRST: the wording is fixed and the body
is pinned at the 14px consent floor, so NARROWING would grow the text
block TALLER - width stays 300 by design and the cuts land on heights:
tighter paddings/margins, smaller heading, 14px button labels with
slimmer padding so both action buttons share ONE row (the old 16px pair
wrapped to two). 44px hit floors everywhere are untouched. */
width: min(300px, calc(100vw - 24px));
/* 2026-08 DRAWER TREATMENT (client direction; supersedes the 0.65 no-blur
pass, which itself replaced the solid #816CA8 + white-text card): the
mobile drawer's exact recipe - SOLID #F2EEF8 no-blur fallback here, and
the @supports block below layers rgba(242,238,248,0.80) + blur(18px),
both prefixes, matching the drawer line for line. Text stayed
--purple-deep in the earlier pass, so the old "no transparency passes
with white text" constraint no longer applies: purple-deep measures
13.4:1 composited over pure-white page content at 0.80. */
background: #F2EEF8;
border: 1px solid rgba(46, 33, 80, 0.18); /* hairline flipped dark - the old white one vanishes on a light card */
border-radius: 16px;
box-shadow: 0 18px 44px -16px rgba(20, 12, 40, 0.55);
padding: 0.5rem 0.65rem 0.45rem; /* 2026-08 demotion pass: shaved again (was 0.6/0.75/0.55); heights govern, wording is fixed */
opacity: 0;
transform: translateY(16px);
visibility: hidden; /* not clickable before its entrance */
transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.cookie-banner {
background: rgba(242, 238, 248, 0.80); /* --lavender at 0.80 + 18px blur = the drawer's frosted glass */
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
}
/* While the card is up, the corner FABs LIFT above it (ui.js sets the measured
--cookie-bar-h and the body class; both clear on dismissal) — the card sits
in the FAB corner, so the lift keeps back-to-top / chatbot tappable. */
body.has-cookie-bar .chatbot-fab { bottom: calc(var(--fab-inset) + var(--cookie-bar-h, 150px) + 24px); }
body.has-cookie-bar .to-top { bottom: calc(var(--fab-inset) + var(--fab-size) + var(--fab-gap) + var(--cookie-bar-h, 150px) + 24px); }
.cookie-banner.is-shown {
opacity: 1;
transform: none;
visibility: visible;
transition: opacity 0.45s ease, transform 0.45s ease;
}
@media (prefers-reduced-motion: reduce) {
.cookie-banner, .cookie-banner.is-shown { transition: none; transform: none; }
}
/* Dismiss X (2026-08): upper-right corner of the card. X = reject/dismiss,
not consent - it carries data-cc="essential" so it behaves exactly like
"Reject Non-Essential". 44x44 target, real button, gold focus ring. */
.cookie-banner__close {
position: absolute;
top: 4px;
right: 4px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: none;
border: 0;
border-radius: 10px;
color: var(--purple-deep); /* 2026-08 translucent card: dark on light */
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
/* 2026-08 hover CONTAINED (client direction): the old hover lit the whole
44x44 hit tile - a slab far taller than the heading's text line, reading as
a bleed onto it. The visible hover is now a 30px circle centred on the
glyph (a ::before layer, painted under the x), so it stays within the
control's own area; the 44x44 HIT AREA is the button box, unchanged. */
.cookie-banner__close::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: transparent;
}
.cookie-banner__close:hover::before { background: rgba(46, 33, 80, 0.10); }
.cookie-banner__close > span { position: relative; } /* the x paints above the hover circle */
.cookie-banner__close:focus-visible { outline: 3px solid var(--purple-deep); outline-offset: 2px; } /* 2026-08 translucent card: purple-deep ring ~14:1 (white measured 1.08:1 here) */
.cookie-banner__heading {
margin: 0 0 0.25rem;
padding-right: 2.6rem; /* clears the corner X */
font-family: var(--font-head);
font-weight: 600;
font-size: 0.85rem; /* 2026-08 demotion pass: 14 -> 13.6px (weight + serif keep the hierarchy; BODY copy holds its 14px consent floor) */
color: var(--purple-deep); /* 13.4:1 over the frosted card on white */
}
.cookie-banner__body {
margin: 0;
font-size: 0.875rem; /* 2026-08: 14px EXACTLY - the hard consent-copy floor; a true 2/3 scale would be 9.8px, floored here */
line-height: 1.5;
color: var(--purple-deep); /* 14.2:1 over the translucent card on white */
}
.cookie-banner__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 0.35rem; /* 2026-08 demotion pass (was 0.45rem) */
}
.cookie-banner__actions .btn {
display: inline-flex;
align-items: center;
position: relative; /* anchors the 44px hit overlay below */
min-height: 35px; /* 2026-08: VISIBLE height 44 -> 35 (the 44px floor moved to the ::after hit overlay) */
margin: 0 0.4rem 0.3rem 0; /* margin, not flex gap (Safari <14.1) */
padding: 0.3rem 0.6rem; /* 2026-08 further reduction; with the 14px labels both buttons now fit one row */
font-size: 0.875rem; /* 14px labels (were 16px) */
}
/* 44px HIT FLOOR (2026-08): visible buttons are 35px tall - a centred
transparent overlay carries the tap area without consuming layout space.
Applies identically to BOTH consent actions (equal prominence held). */
.cookie-banner__actions .btn::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 44px;
transform: translateY(-50%);
}
/* DEMOTED + EQUALISED 2026-08 (client direction): both consent actions now
share ONE identical quiet treatment - transparent fill, the same hairline
purple border, the same 13px label, the same padding - because giving
Accept All a heavier fill than Reject Non-Essential is a dark pattern on a
consent notice. Purple-deep labels 13.4:1 over the frosted card on white.
44px hit floors untouched. */
.cookie-banner .btn--primary,
.cookie-banner .btn--ghost {
background: transparent;
color: var(--purple-deep);
border: 1px solid rgba(46, 33, 80, 0.75);
padding: 0.17rem 0.55rem; /* 2026-08: vertical 4px -> 2.7px (one third off); horizontal UNCHANGED; label size UNCHANGED */
font-size: 0.8125rem; /* 13px labels (consent BODY copy stays at its own 14px floor; button labels are controls) */
}
.cookie-banner .btn--primary:hover,
.cookie-banner .btn--ghost:hover { background: rgba(46, 33, 80, 0.08); color: var(--purple-deep); }
/* (Superseded by the equalised pair above - retained for restore:
PRIMARY solid white fill + GHOST outline.) */
/* 2026-08 translucent card pass (SUPERSEDED by the equalised pair above -
PRIMARY's solid white fill made Accept All heavier than Reject):
.cookie-banner .btn--primary { background: var(--white); color: var(--purple-deep); border-color: var(--white); }
.cookie-banner .btn--primary:hover { background: var(--cream); color: var(--purple-deep); }
.cookie-banner .btn--ghost { background: transparent; color: var(--purple-deep); border-color: rgba(46, 33, 80, 0.75); }
.cookie-banner .btn--ghost:hover { background: rgba(46, 33, 80, 0.08); color: var(--purple-deep); }
*/
.cookie-banner__settings {
background: none;
border: 0;
min-height: 44px; /* tap target - UNCHANGED floor */
padding: 0.3rem 0.3rem; /* 2026-08 further reduction; min-height 44 governs */
margin: 0 0 0.25rem;
font: inherit;
font-size: 0.8125rem; /* 2026-08: 14 -> 13px, matching the demoted button labels */
font-weight: 600;
color: var(--purple-deep);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.cookie-banner__settings:hover { color: var(--purple-bright); }
.cookie-banner__settings:focus-visible,
.cookie-banner__legal a:focus-visible,
.cookie-banner__actions .btn:focus-visible { outline: 3px solid var(--purple-deep); outline-offset: 2px; border-radius: 4px; } /* 2026-08 translucent card: purple-deep rings ~14:1 (the old white rings measure 1.08:1 here) */
.cookie-banner__prefs input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; } /* prefs inputs sit on the WHITE inset — gold 3.18:1 there */
.cookie-banner__legal {
margin: 0.2rem 0 0;
font-size: 0.75rem; /* 12px acknowledgement line - HELD (consent-adjacent copy; not reduced further) */
line-height: 1.4;
color: var(--purple-deep);
}
.cookie-banner__legal a { color: var(--purple-deep); font-weight: 600; }
/* Prefs open as a WHITE inset panel — dark text inside, unchanged AA. */
.cookie-banner__prefs {
margin: 0.6rem 0 0.2rem;
padding: 0.6rem 0.75rem 0.7rem; /* 2026-08 scaled */
background: var(--white);
border: 1px solid rgba(58, 42, 102, 0.12);
border-radius: 12px;
}
.cookie-pref {
display: flex;
align-items: flex-start;
margin: 0 0 0.55rem;
font-size: 0.92rem;
line-height: 1.5;
color: var(--text);
cursor: pointer;
}
.cookie-pref input {
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 0.15rem 0.55rem 0 0; /* margin, not flex gap */
accent-color: var(--purple-bright);
}
.cookie-pref input:disabled + span { color: var(--text); } /* Essential stays readable, not greyed */
.cookie-banner__save { margin-top: 0.2rem; }
/* PHONES: COMPACT BAR, NOT A PANEL (2026-08) ---------------------------------
The floating card was 366x312 at 390px - a third of the screen - sitting at
z-index 120 with pointer-events auto until answered, and it returns every
browsing session. Hit-tests showed it swallowing taps meant for links and
buttons beneath it, including "Verify code" on both login pages. Below 640px
it becomes a short bar pinned to the bottom edge instead: same wording, same
consent logic, same storage - only the presentation changes.
- Full-bleed to the bottom edge, so it reads as chrome, not page content.
- OPAQUE (no backdrop-filter, Safari-14-safe) with a solid top rule and a
lifted shadow, so it can never be mistaken for part of the page.
- The heading and the legal acknowledgement line are dropped from view at
this width to keep the bar short; both policy links they carried
(Cookie Policy, Privacy Policy) sit in the footer of all 41 pages, so
nothing becomes unreachable. The consent BODY stays, clamped to two
lines - the full sentence remains in the DOM for assistive technology.
- Buttons keep their 44px hit overlay; only the visible box is compact. */
@media (max-width: 639.98px) {
.cookie-banner {
left: 0;
right: 0;
bottom: 0;
width: auto;
max-width: none;
padding: 0.5rem 0.7rem 0.55rem;
border: 0;
border-top: 2px solid var(--purple-deep);
border-radius: 0;
background: #F2EEF8; /* opaque - never translucent over content */
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 -10px 28px rgba(20, 12, 40, 0.30);
transform: translateY(100%); /* slides up FROM the edge; .is-shown clears it */
}
.cookie-banner__heading { display: none; }
.cookie-banner__legal { display: none; }
.cookie-banner__close { top: 0; right: 2px; }
.cookie-banner__body {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* visually two lines; full text stays in the DOM */
overflow: hidden;
padding-right: 2.8rem; /* clears the corner X */
line-height: 1.4;
}
/* Controls stay INLINE at phone widths: full-width stacking was what made
the old card 300px+ tall (three 44px rows). They wrap only if they must,
and each keeps its invisible 44px hit overlay. */
.cookie-banner__actions { margin-top: 0.3rem; }
.cookie-banner__actions .btn {
width: auto;
margin: 0 0.35rem 0 0;
justify-content: center;
}
.cookie-banner__settings { width: auto; text-align: left; }
}
/* Narrow phones: the three control labels cannot share one row at this width
(the wording is fixed), so they wrap to two - the consent line drops to a
single clamped line to keep the bar short. */
@media (max-width: 399.98px) {
.cookie-banner__body { -webkit-line-clamp: 1; }
.cookie-banner__actions { margin-top: 0.2rem; }
}
/* Warm line above the Share Your Story submit (client design doc) — the
letter voice: Lora italic in brand purple, quiet, AA (~11.7:1 on the white
form card). Generic class so future forms can reuse it. */
.form-warm {
margin: 1.4rem 0 1.1rem;
font-family: var(--font-head);
font-style: italic;
font-size: 1.05rem;
line-height: 1.6;
color: var(--purple);
}
/* ===================================================================
Patient Stories redesign (2026-08) — two equal story slots + support bands.
Page-scoped classes (only patient-stories.html carries them).
=================================================================== */
/* Hero polish: a small reassurance line under the CTA. (The "How sharing
works" link was removed 2026-08 by client direction — its rules retired.)
KICKER SIZE: the hero kicker already inherits the shared .eyebrow
--fs-kicker scale — measured pixel-identical to the homepage kickers
(23px/38px/0.02em at desktop); pinned explicitly here so a future banner
change can never shrink it out of step. */
.page-banner--stories .eyebrow {
font-size: var(--fs-kicker);
line-height: 1.65;
letter-spacing: 0.02em;
}
.page-banner--stories .page-banner__reassure {
margin: 0.5rem 0 0;
font-size: 0.95rem;
color: #EFEAF6;
text-shadow: 0 1px 2px rgba(20, 14, 40, 0.6);
}
.page-banner--stories .page-banner__lock {
width: 15px; height: 15px;
margin-right: 0.45rem;
vertical-align: -2px;
filter: drop-shadow(0 1px 2px rgba(20, 14, 40, 0.6));
}
/* (The hero reassurance band was removed 2026-08 by client direction — its
.stories-reassure rules went with the markup; restore both from history if
the band ever returns.) */
/* THE PAIR — two slots, EQUAL size and dignity (no featured hierarchy):
side by side from 860px, stacked below; stretch so both match heights.
The opened Yifei letter still spans the full row (grid-column 1/-1). */
.stories-feed__list--pair { grid-template-columns: 1fr; align-items: stretch; }
/* 2026-08 strip-down: ONE story card (Yifei) — a centered comfortable column
at every width, never a half-width orphan of the old pair grid. */
.stories-feed__list--single { grid-template-columns: 1fr; max-width: 680px; margin-left: auto; margin-right: auto; }
/* Pending-approval marker on the summary slot: visibly provisional, AA text. */
.story-entry__pending-tag {
margin: 0 0 0.4rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--purple-deep);
background: var(--lavender-light);
border: 1px dashed var(--gold);
border-radius: 999px;
display: inline-block;
padding: 0.15rem 0.6rem;
}
/* Yifei's closing reflections — standalone panel between the story card and the
coda (2026-08; her heading + three bullets moved VERBATIM out of the letter).
REUSES the site's established callout pattern (.chair__welcome / .form-note:
gold left rule + rounded panel) on the story card's own letter-paper cream,
at the same 680px measure as the card and coda — one vertical rhythm, no new
visual language. The __by attribution is required content (a patient's words,
not GEM guidance). AA on cream #FBF9F4: heading/attribution --purple 11.9:1,
bullets --text 13.4:1. */
.story-reflections {
/* 2026-08 rework: now a SIDEBAR TIPS BOX - smaller type and padding than the
story card so it reads as supporting material; at >=1024px it occupies the
right third beside the card (grid below), top-aligned; under 1024px it
stacks below the card full-width (this base rule). */
max-width: 680px;
margin: clamp(1.5rem, 3.5vw, 2.25rem) auto 0;
padding: 1rem 1.15rem;
/* 2026-08 (client direction, reference panel): soft LIGHT-PURPLE tint -
--lavender #F2EEF8 - clearly lighter than the mid purples, distinguishing
the box from the cream story card beside it. Heading 10.78:1, bullets
12.12:1 on the tint - AA kept. NOT drifted toward #9E7AC8 (rejected). */
background: var(--lavender);
border: 1px solid rgba(58, 42, 102, 0.10);
border-left: 4px solid var(--gold);
border-radius: var(--radius);
color: var(--text);
font-size: 0.95rem;
line-height: 1.65;
}
.story-reflections__title {
margin: 0 0 0.75rem;
font-family: var(--font-head);
font-weight: 600;
font-size: 1.08rem;
line-height: 1.35;
color: var(--purple); /* 11.9:1 on cream */
}
/* Sidebar layout: the container becomes a two-column grid - the 680px story
column left, the tips box in the remaining right third, ALIGNED TO THE
CARD'S TOP (align-self start; deliberately NOT sticky - when the letter
expands to ~1,500 words the box stays quietly at the top of the column
rather than following the reader down alongside her story). The coda stays
under the story column. */
@media (min-width: 1024px) {
.stories-feed .container {
display: grid;
grid-template-columns: minmax(0, 680px) minmax(240px, 1fr);
column-gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: start;
}
.stories-feed__list--single { grid-column: 1; margin-left: 0; margin-right: 0; }
.story-reflections { grid-column: 2; grid-row: 1; align-self: start; margin: 0; max-width: none; }
.stories-feed__coda { grid-column: 1; margin-left: 0; margin-right: 0; }
}
.story-reflections p { margin: 0 0 1.05rem; }
.story-reflections > :last-child { margin-bottom: 0; }
.story-reflections__heading {
margin: 0 0 1.1rem;
font-family: var(--font-head); /* the story's italic serif (.story-lede voice) */
font-style: italic;
font-size: 1.3rem;
line-height: 1.7;
color: var(--purple);
}
.story-reflections__by { /* attribution — matches .chair__welcome cite */
display: block;
margin-top: 0.9rem;
font-style: normal;
font-weight: 600;
color: var(--purple);
}
/* ============ NEWS ARTICLE (2026-08, first article) ==========================
Single centred reading column at a 68ch measure (measured 67 chars/line at
1440). Figures are CONTAINED - the portrait hero renders at its native
424px, never stretched. The clinical close-up sits behind a click-to-reveal
(trauma-informed default for readers facing surgery). The pull-quote reuses
the site's cream panel + gold rule + italic serif recipe. */
.article-date { margin: 0.5rem 0 0; font-size: 0.9rem; font-weight: 600; color: var(--gold-deep); }
/* Article hero alignment (2026-08, scoped to the News article page): the
hero's inner container adopts the article body column's EXACT geometry -
the same 62ch measure resolved at the same 1.1rem context, centred - so the
kicker, headline, standfirst, date and every body paragraph share one left
axis. LEFT-ALIGNED, deliberately not centred (the body is left-aligned text
in a centred column; centring the hero would split the axis - the centred
Our Story hero was a fix for that page's centred letter, not a house
style). Each element keeps its own rem-based type size; the container
font-size below only resolves the ch measure. Background, height and copy
untouched. */
/* ============ NEWS ARTICLE - three-column editorial grid (2026-08) ==========
Shared by the hero and the body so their columns align exactly:
col 1 LEFT MARGIN tools / kicker / date (quiet, small)
col 2 CENTRE the UNCHANGED 62ch reading measure (resolved at the
grid's 1.1rem context = the body's own size)
col 3 RIGHT the lead photograph, <=424px native (downscales in a
narrower track, never upscales)
Below 1100px the grid collapses to one linear column in DOM order. */
.article-grid {
max-width: 1360px;
margin-inline: auto;
padding-inline: 1.25rem;
display: grid;
grid-template-columns: minmax(130px, 170px) 62ch minmax(240px, 424px); /* centre HARD at the 62ch measure - the image track flexes (downscale only) */
column-gap: clamp(1.5rem, 3vw, 2.5rem);
justify-content: center;
font-size: 1.1rem; /* resolves the 62ch track to the body's own measure; every child sets its size in rem, so nothing inherits this */
}
.article-crumb {
grid-column: 1 / -1;
margin: 0 0 1.1rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-muted);
}
.article-crumb__sep { margin: 0 0.35rem; color: rgba(187, 134, 63, 0.8); }
.article-grid__side { grid-column: 1; }
.article-grid__main { grid-column: 2; }
.article-grid--hero .eyebrow { margin-bottom: 0.4rem; }
.article-grid--hero .article-date { margin-top: 0.15rem; }
.page-banner--article h1 { max-width: none; } /* the shared 22ch cap forced 3 lines; the column width now bounds the headline */
.article-grid__body { grid-column: 2; grid-row: 2; }
.article-grid > .article-grid__figure { /* (0,2,0): outranks .article__fig's own 1.5rem top margin further down */
grid-column: 3;
grid-row: 2;
align-self: start; /* top of the figure = top of the first paragraph */
margin: 0;
}
.article-grid:not(.article-grid--hero) { grid-template-rows: 0 auto; } /* row 1 unused in the body grid */
.article__fig-note { margin: 0.35rem 0 0; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
/* LEFT-MARGIN TOOLS (2026-08, mockup): quiet share group - small gold label,
white hairline-bordered buttons, purple-bright focus rings. */
.article-grid__tools { grid-column: 1; grid-row: 2; align-self: start; }
.article-tools__head { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); }
.article-tools__btn {
display: block;
width: 100%;
min-height: 44px;
margin: 0 0 0.5rem;
padding: 0.35rem 0.7rem;
background: var(--white);
border: 1px solid rgba(58, 42, 102, 0.25);
border-radius: 8px;
font: inherit;
font-size: 0.85rem;
font-weight: 600;
color: var(--purple-deep);
cursor: pointer;
}
.article-tools__btn:hover { background: var(--lavender-light); }
.article-tools__btn:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; } /* NOT the raw --focus token */
.article-tools__status { margin: 0; min-height: 1.2em; font-size: 0.75rem; font-weight: 600; color: var(--gold-deep); }
/* ACCOUNTABILITY SLOT - ships [hidden] (empty by instruction); the rule +
heading render only once GEM supplies the author content. */
.article__author { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(187, 134, 63, 0.35); } /* the site's standard gold hairline */
.article__author-head { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); }
@media (max-width: 1199.98px) {
.article-grid__tools { margin: 2rem 0 0; max-width: 320px; }
}
@media (max-width: 1199.98px) {
/* SINGLE LINEAR COLUMN below 1200 (the hard 62ch centre + both side
minimums need ~1130px): hero already reads metadata -> headline; the
body grid stacks image, then body, in DOM order. */
.article-grid { display: block; max-width: calc(62ch + 2.5rem); } /* the stacked column keeps the same reading measure (+ its own padding) */
.article-grid > .article-grid__figure { margin: 0 0 1.5rem; }
.article-grid__figure img { width: 100%; max-width: 424px; height: auto; }
.article-grid--hero .article-grid__main { margin-top: 0.5rem; }
}
.article__col {
max-width: 62ch; /* renders ~69 average prose chars/line at 1440 (ch is the '0' width; prose runs wider) - inside the 62-72 window */
font-size: 1.1rem;
line-height: 1.75;
color: var(--text);
}
.article__col > p { margin: 0 0 1.15rem; }
.article__subhead {
margin: 2rem 0 0.75rem;
font-family: var(--font-head);
font-weight: 600;
font-size: 1.45rem;
color: var(--purple);
}
.article__fig { margin: 1.5rem 0 1.75rem; }
.article__fig img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.article__fig--portrait img { width: 424px; max-width: 100%; } /* native scale, contained - no upscaling */
.article__caption {
margin: 0.5rem 0 0;
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-muted);
}
.article__reveal { margin: 1.5rem 0 1.75rem; }
/* Disclosure CARD (2026-08, mockup): the bare button becomes a bordered block
- the site's standard card recipe (white, hairline border, --radius; same
treatment as the login card / tips box). Reveal behaviour, aria wiring and
the 44px button are untouched. */
.article__reveal--card {
padding: 1rem 1.15rem;
background: var(--white);
border: 1px solid rgba(58, 42, 102, 0.12);
border-radius: var(--radius);
}
.article__reveal-head { margin: 0 0 0.1rem; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--purple); }
.article__reveal-sub { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-deep); }
.article__reveal--card .article__reveal-note { margin: 0 0 0.75rem; }
.article__reveal-btn {
display: inline-flex;
align-items: center;
min-height: 44px; /* tap floor */
padding: 0.5rem 1.1rem;
background: var(--lavender-light);
border: 1px solid rgba(58, 42, 102, 0.25);
border-radius: 10px;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--purple); /* 11.5:1 on lavender-light */
cursor: pointer;
}
.article__reveal-btn:hover { background: var(--lavender); }
.article__reveal-btn:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; } /* NOT the raw --focus token */
.article__reveal-note { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.article__reveal .article__fig { margin-top: 1rem; }
.article__pull {
margin: 3.5rem 0 2.75rem; /* 2026-08 given more space (was 2.25rem/1.5rem = 36/24px -> 56/44px) */
padding: 1.1rem 1.35rem;
background: var(--cream);
border: 1px solid rgba(58, 42, 102, 0.10);
border-left: 4px solid var(--gold);
border-radius: var(--radius);
font-family: var(--font-head);
font-style: italic;
font-size: 1.25rem;
line-height: 1.6;
color: var(--purple); /* 11.9:1 on cream */
}
.article__back { margin: 2rem 0 0; }
.article__back a { color: var(--purple-bright); font-weight: 600; text-underline-offset: 3px; }
/* News page rhythm (2026-08): more air below the hero hairline so the lead
breathes, less trailing space before the footer so the page ends
deliberately. Scoped to the News listing section only. */
/* Bottom padding (2026-08 polish): no override - the bottom falls back to
the base .section rhythm (clamp(2.5rem, 6vw, 4.5rem) = 72px desktop, 40px
mobile), the same rhythm every content page uses. Only the top stays
custom (space under the banner). */
.section--news { padding-top: 88px; }
@media (max-width: 759.98px) {
.section--news { padding-top: 56px; }
}
/* Quiet sign-in context line under Share-your-story CTAs (2026-08 site-wide
login rule). Small, muted, secondary - --text-muted measures 6.9:1 on the
white/cream/light-banner grounds it sits over. */
.cta-note { margin: 0.45rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
/* ============ News index - EDITORIAL ROWS (2026-08, replaces the featured
lead + compact list; those styles below are INERT - no markup uses them -
and retained as the restore path) =========================================
Desktop: [ meta 150px | text 1fr | image 200px ], thin gold hairline
between rows. Existing tokens only: Lora serif headline (--font-head) in
--purple, small uppercase gold-deep label, muted date, warm standfirst,
the standard rgba(187,134,63,0.35) rule. The 424x524 image DOWNSCALES to
its 200px track - never upscaled; width/height attrs reserve the box. */
.news-rows { max-width: 1000px; }
.news-row {
display: grid;
grid-template-columns: 150px minmax(0, 1fr) 200px;
column-gap: clamp(0.85rem, 1.7vw, 1.65rem); /* 2026-08 polish: ~2/3 of the old clamp(1.25rem,2.5vw,2.5rem) - meta + headline read as one unit */
padding: 1.75rem 0;
/* Closing rule (2026-08 polish): EVERY row carries its own bottom rule,
matching the page-banner's border above (2px gold @0.55) - rows stack
with a single rule between them (no top rules), and the last row closes
the page instead of floating. Replaces the old 1px @0.35 between-row
hairline (`.news-row + .news-row` border-top). */
border-bottom: 2px solid rgba(187, 134, 63, 0.55);
}
/* Cap-height alignment (2026-08 polish): the category's CAP TOP sits ~2px
lower than the headline's when both boxes share a top edge (Lora 1.45rem
@1.3 puts its cap ~7.1px down; Inter 0.72rem @1.6 puts its ~5.0px down) -
this 2px nudge makes the CAP tops align optically. Desktop only: the
mobile stack resets it (meta is its own full-width line there). */
.news-row__meta { min-width: 0; padding-top: 0.125rem; }
.news-row__cat { margin: 0 0 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); }
.news-row__date { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.news-row__text { min-width: 0; }
.news-row__title { margin: 0 0 0.5rem; font-family: var(--font-head); font-weight: 600; font-size: 1.45rem; line-height: 1.3; }
.news-row__title a { color: var(--purple); text-decoration: none; }
.news-row__title a:hover { color: var(--purple-bright); }
.news-row__title a:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 3px; border-radius: 4px; } /* NOT the raw --focus token */
.news-row__standfirst { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--text-warm); }
/* "Read article →" - the ACCESSIBLE deep gold (--gold-deep, 5.45:1 on the
white page), never the lighter --gold. Same destination as the headline. */
/* Rhythm (2026-08 polish): the 44px link box vertically CENTRES its ~24px
text line, adding ~10px of built-in visual space above the label - the
negative margin compensates, so the VISUAL gap above "Read article" lands
~5px, smaller than the 8px headline-to-summary gap (hierarchy restored).
The 44px hit target itself is untouched. Mobile resets to 0 (its own rule
below). */
.news-row__more { margin: -0.3rem 0 0; }
.news-row__link {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 0.9rem;
font-weight: 600;
color: var(--gold-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
.news-row__link:hover { color: var(--purple-bright); }
.news-row__link:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; border-radius: 4px; } /* NOT the raw --focus token */
/* Landscape crop (2026-08 polish): the TEXT column drives row height, the
image NEVER does. Desktop: the media box is position:relative with no
intrinsic height and the img absolute-fills it, so the row is sized by the
text alone and the image is centre-cropped (object-fit) to exactly that
height - measured 200x126 with today's copy; a strict in-flow 4:3 box
(200x150) was tried first and still overran the text by 24px, which the
spec's "never" forbids. The img attrs carry 4:3 (424x318) so the pre-CSS
reserved box is landscape (no layout shift). Mobile keeps the in-flow
4:3 crop (96x72) beside the headline - static positioning restored in the
mobile block below. Longhand offsets, not `inset` (Safari <14.1). */
.news-row__media { margin: 0; position: relative; min-height: 0; }
.news-row__media img { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 200px; height: 100%; object-fit: cover; object-position: center; border-radius: 8px; }
/* NO-IMAGE VARIANT (exists ahead of need - today's single article has an
image): add news-row--no-image to the and OMIT .news-row__media
entirely. The text may run into the freed span - its own line lengths keep
the right margin as intentional whitespace - and NO empty frame, grey box,
or placeholder image ever renders. */
.news-row--no-image .news-row__text { grid-column: 2 / -1; }
/* MOBILE STACK (<768px): category left + date right on one line; headline
beside a small image on the right; standfirst full width beneath.
display:contents lifts the text wrapper's children into the row grid so
the headline and standfirst can occupy different areas. */
@media (max-width: 767.98px) {
.news-row {
grid-template-columns: minmax(0, 1fr) 96px;
grid-template-areas:
"meta meta"
"title media"
"sf sf"
"more more";
row-gap: 0.55rem;
column-gap: 1rem;
padding: 1.4rem 0;
}
.news-row__meta { grid-area: meta; display: flex; justify-content: space-between; align-items: baseline; padding-top: 0; } /* cap-align nudge is desktop-only */
.news-row__meta .news-row__cat { margin: 0; }
.news-row__text { display: contents; }
.news-row__title { grid-area: title; margin: 0; font-size: 1.15rem; }
.news-row__media { grid-area: media; position: static; }
.news-row__media img { position: static; height: auto; aspect-ratio: 4 / 3; max-width: 96px; } /* in-flow 4:3 (96x72) beside the headline */
.news-row__standfirst { grid-area: sf; }
.news-row__more { grid-area: more; margin: 0; }
/* No-image rows on mobile: the headline takes the full width - no reserved
96px image column, no empty frame. */
.news-row--no-image {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"meta"
"title"
"sf"
"more";
}
.news-row--no-image .news-row__text { grid-column: auto; display: contents; }
}
/* News - FEATURED lead article (2026-08 editorial rework, replaces the card):
content sits directly on the page - no border, background or shadow. Image
left at its NATIVE 424px width (424x524 source - never upscaled), text
right; a gold hairline (the site's standard 1px rgba(187,134,63,0.35)
treatment) closes the block and separates it from the list beneath. */
.news-featured {
border-bottom: 1px solid rgba(187, 134, 63, 0.35); /* same hairline as the CTA→footer + footer-legal dividers */
padding-bottom: 2.5rem;
}
.news-featured__link {
display: flex;
/* 2026-08: flex-start -> center. The 400px portrait image is ~494px tall
against ~217px of text; top-aligning left ~278px of dead space UNDER the
text. Centring keeps the text column sized to its content (no stretch)
and splits the remainder evenly above/below, so the row reads as a
deliberate editorial lockup instead of trailing off. Full elimination
would require cropping the image or shrinking it below the 380-420px
bound - reported, not done. */
align-items: center;
gap: 2.5rem;
text-decoration: none;
color: var(--text);
}
.news-featured__link:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 3px; border-radius: 4px; } /* NOT the raw --focus token */
.news-featured__link:hover .news-featured__title { color: var(--purple-bright); }
.news-featured__img {
flex: 0 0 auto;
width: 400px; /* 2026-08 reduced (was 424 native): below native width - downscaled, never upscaled, renders sharp; the freed 24px goes to the text column so the headline leads the row */
max-width: 100%;
height: auto;
border-radius: 8px;
}
.news-featured__body { display: block; min-width: 0; } /* 2026-08: the 0.35rem top-align optical nudge dropped - the row centres now */
.news-featured__kicker { display: block; margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); }
.news-featured__title { display: block; margin: 0 0 0.75rem; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.22; color: var(--purple); }
.news-featured__standfirst { display: block; margin: 0 0 0.9rem; font-size: 1.1rem; line-height: 1.6; color: var(--text-warm); max-width: 52ch; }
.news-featured__date { display: block; margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
@media (max-width: 899.98px) {
/* Stack: image above the text at full column width - but CAPPED at its
424px native width so it is never upscaled. */
.news-featured__link { display: block; }
.news-featured__img { width: 100%; max-width: 424px; margin: 0 0 1.25rem; }
}
/* News list - compact rows for OLDER articles beneath the featured lead
(2026-08 rework of the former card row: no border-box, no shadow - a quiet
hairline-separated index). One per article, newest
first: small thumbnail, kicker, headline, date. EMPTY today by design -
an empty renders nothing (see the maintenance comment in news.html). */
.news-list { list-style: none; margin: 2.25rem 0 0; padding: 0; max-width: 780px; }
.news-list:empty { display: none; } /* no placeholder rows while only the featured article exists */
.news-item + .news-item { border-top: 1px solid rgba(187, 134, 63, 0.35); } /* same gold hairline as the featured divider */
.news-item__link {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.1rem 0;
min-height: 44px;
text-decoration: none;
color: var(--text);
}
.news-item__link:hover .news-item__title { color: var(--purple-bright); }
.news-item__link:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; border-radius: 4px; } /* NOT the raw --focus token */
.news-item__thumb {
flex: 0 0 auto;
width: 72px;
height: 89px; /* the 424x524 portrait ratio, downscaled - never stretched */
object-fit: cover;
border-radius: 6px;
}
.news-item__body { display: block; min-width: 0; }
.news-item__kicker { display: block; margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); }
.news-item__title { display: block; margin: 0 0 0.3rem; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; line-height: 1.3; color: var(--purple); }
.news-item__date { display: block; margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
/* Quiet coda under the lone story card - LEFT-ALIGNED to the card edge
(2026-08): same 680px centered measure as the card list, so the coda's
left edge sits exactly on the card's left edge. */
.stories-feed__coda {
margin: clamp(1.5rem, 3.5vw, 2.25rem) auto 0;
max-width: 680px;
text-align: left;
font-family: var(--font-head);
font-style: italic;
font-size: 1.02rem;
line-height: 1.6;
color: var(--purple);
}
@media (min-width: 860px) {
.stories-feed__list--pair { grid-template-columns: repeat(2, 1fr); }
}
/* SLOT 1 — subtle letter/paper feel behind the REAL story only: warm paper
gradient + faint ruled lines (pure CSS, no image), soft gold edge, and a
large ghosted quotation mark (mockup) in the corner. Light, elegant, fully
readable (text contrast unchanged on the pale ground). */
.story-entry--paper {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 40%),
repeating-linear-gradient(0deg, rgba(58, 42, 102, 0.03) 0 1px, transparent 1px 28px),
linear-gradient(180deg, #FDFBF6 0%, #F7F1E6 100%);
border-color: rgba(187, 134, 63, 0.3);
}
.story-entry--paper::after {
content: "\201C";
position: absolute;
top: -0.5rem;
right: 1.25rem;
font-family: var(--font-head);
font-size: clamp(6rem, 12vw, 9rem);
line-height: 1.4;
color: rgba(58, 42, 102, 0.07); /* ghosted — decorative only */
pointer-events: none;
}
.story-entry__quote {
margin: 1.1rem 0 0;
font-family: var(--font-head);
font-style: italic;
font-weight: 500;
font-size: clamp(1.35rem, 2.6vw, 1.8rem);
line-height: 1.4;
color: var(--purple); /* ~9:1 on the paper ground */
}
.js .story-entry.is-open .story-entry__quote { display: none; } /* the opened letter begins with the same line */
/* SLOT 2 — honest invitation panel: clean and warm, deliberately NOT paper
(that is reserved for real stories). Content vertically centred so the two
equal slots read as designed peers. */
.story-entry--invite {
justify-content: center;
background: linear-gradient(180deg, var(--white) 0%, #F6F2FB 100%);
border-top: 4px solid var(--gold);
text-align: left;
}
.story-entry__tag--invite { color: var(--gold-deep); } /* 5.4:1 on the light panel */
.story-invite__head { display: flex; align-items: center; }
.story-invite__badge {
flex-shrink: 0;
display: grid;
place-items: center;
width: 44px; height: 44px;
margin-right: 0.7rem; /* margin, not flex gap */
border-radius: 50%;
background: var(--lavender-light);
border: 1px solid rgba(58, 42, 102, 0.2);
color: var(--purple);
}
.story-invite__badge svg { width: 22px; height: 22px; }
.story-invite__head .story-entry__tag { margin-bottom: 0; }
.story-invite__headline {
margin: 1rem 0 0;
font-family: var(--font-head);
font-style: italic;
font-weight: 600;
font-size: clamp(1.25rem, 2.4vw, 1.6rem);
line-height: 1.35;
color: var(--purple-deep);
}
/* Subtitle folded in from the page's old standalone closing line (2026-08).
HIERARCHY CLARIFIED (client direction): four distinct levels — kicker
(small caps) -> heading (display italic 600) -> THIS deck/standfirst
(clearly larger than body, italic 500) -> body. Wording unchanged. */
.story-invite__subtitle {
margin: 0.6rem 0 0;
font-family: var(--font-head);
font-style: italic;
font-weight: 500;
font-size: clamp(1.15rem, 2.2vw, 1.35rem); /* deck scale — clearly above the 1rem body (was 1.02rem, body-sized) */
line-height: 1.5;
color: var(--purple); /* ~9:1 on the light panel */
}
.story-invite__support { margin: 1rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--text-warm); }
.story-invite__cta { margin: 1.4rem 0 0; }
.story-invite__consent { margin: 0.9rem 0 0; font-size: 0.95rem; }
.story-invite__consent a { color: var(--purple-bright); font-weight: 600; text-underline-offset: 3px; }
.story-invite__lock { width: 14px; height: 14px; margin-right: 0.4rem; vertical-align: -2px; color: var(--purple-mid); }
/* Band 2 — "Your story, your choices": an OPEN row (de-boxed 2026-08 by
client direction — border/shadow/panel background removed so it blends
into the page ground). Kicker + three divided columns, icon left of text. */
.stories-choices { background: var(--white); padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }
.stories-choices__card {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.stories-choices__kicker {
margin: 0 0 1rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--gold-deep); /* 5.4:1 on white = AA */
}
.stories-choices__row {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 760px) { .stories-choices__row { grid-template-columns: repeat(3, 1fr); } }
.stories-choice {
display: flex;
align-items: flex-start;
text-align: left;
padding: 0.7rem 0;
}
@media (min-width: 760px) {
.stories-choice { padding: 0.35rem clamp(0.9rem, 2vw, 1.5rem); }
.stories-choice:first-child { padding-left: 0; }
.stories-choice + .stories-choice { border-left: 1px solid rgba(58, 42, 102, 0.14); }
}
@media (max-width: 759.98px) {
.stories-choice + .stories-choice { border-top: 1px solid rgba(58, 42, 102, 0.1); }
}
.stories-choice__icon {
flex-shrink: 0;
display: grid;
place-items: center;
width: 48px; height: 48px;
margin-right: 0.9rem; /* margin, not flex gap */
border-radius: 50%;
background: var(--lavender-light);
border: 1px solid rgba(58, 42, 102, 0.18);
color: var(--purple);
}
.stories-choice__icon svg { width: 24px; height: 24px; }
.stories-choice__text { display: flex; flex-direction: column; min-width: 0; }
.stories-choice__title { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; line-height: 1.3; color: var(--purple-deep); }
.stories-choice__sub { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.5; color: var(--text-warm); }
/* Band 3 — "Your experience matters" (restyled 2026-08 per mockup): a
FULL-BLEED soft-lavender band (background on the full-width section; the
content stays in the centred container), sitting FLUSH against the footer.
The inner card is de-boxed — envelope art | copy | actions sit directly on
the lavender. AA on --lavender-light: heading purple-deep ~12.6:1, body
--text ~13:1, primary button self-contained; the gold-outline button gets
a WHITE fill here so its ring keeps UI contrast (gold on lavender alone is
~2.8:1). */
.stories-closing {
background: var(--lavender-light);
padding-block: clamp(1.75rem, 4vw, 3rem);
margin-bottom: 0; /* flush to the footer — no gap band */
}
.stories-closing__card {
display: flex;
align-items: center;
flex-wrap: wrap;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
}
/* (.stories-closing .btn--gold white-fill rule retired 2026-08 — the
secondary "See the questions first" button was removed.) */
.stories-closing__art {
flex-shrink: 0;
display: grid;
place-items: center;
width: 48px; height: 48px; /* matches the "Your story, your choices" icon circles (was 64px) */
margin-right: 0.9rem; /* matches the choices' icon-to-text gap; margin, not flex gap */
border-radius: 50%;
background: var(--white); /* the section's intended equivalent of the choices' lavender-light discs — lavender-light would vanish on this lavender band */
border: 1px solid rgba(58, 42, 102, 0.18); /* matches the choices' border weight */
color: var(--purple);
}
.stories-closing__art svg { width: 24px; height: 24px; } /* glyph scaled with the disc (matches the choices' 24px), grid-centred */
.stories-closing__copy { flex: 1 1 300px; min-width: 0; margin: 0.4rem 0; }
.stories-closing__heading {
margin: 0;
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(1.35rem, 2.6vw, 1.8rem);
color: var(--purple-deep);
}
.stories-closing__line { margin: 0.45rem 0 0; max-width: 60ch; font-size: 1rem; line-height: 1.6; color: var(--text); }
.stories-closing__actions { display: flex; flex-wrap: wrap; align-items: center; margin-left: auto; padding-left: 0.5rem; }
/* No trailing right margin (a two-button-era leftover that parked the lone
button 9.6px off the shared column edge): its RIGHT edge now lands exactly
on the same content boundary as the icon row and footer. */
.stories-closing__actions .btn { margin: 0.4rem 0 0.4rem 0; }
@media (max-width: 759.98px) {
.stories-closing__actions { margin-left: 0; padding-left: 0; width: 100%; }
}
/* (.stories-closing__growing retired 2026-08 — the line now lives inside the
invitation panel as .story-invite__subtitle.) */
/* ---- ARROW TEXT-LINKS, shared (2026-08): ONE continuous underline through
label AND arrow. The anchors are inline-flex (for the 44px tap box), and
text-decoration cannot draw a single line across flex items - the arrow
span + its margin gap broke the underline. Fix: the label + arrow sit in
ONE inner .arrowlink-text span (a single flex item); the underline lives on
it and propagates continuously through its inline children, including the
arrow and the space before it. Instances: footer "Join the Movement" (all
37 pages), homepage "Explore More Evidence", homepage "Meet Our
Professionals". Hover/focus states unchanged (color lives on the anchor). */
.site-footer .footer-cta__btn,
.fusion__more-link,
.meet-experts__link,
.fusion__founder-link { text-decoration: none; }
/* FIX 2026-08: text-decoration is painted only under inline boxes, so it
SKIPPED the arrow span's 0.4rem margin - the line broke between text and
arrow. A border-bottom on the wrapper spans its whole box (text + gap +
arrow) as ONE continuous line, and follows hover color via currentColor. */
.arrowlink-text {
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
}
.arrowlink-text > span { margin-left: 0.4rem; } /* label-arrow via margin (Safari <14.1) */
/* ============ LOGIN CHOOSER (2026-08, demo-mode flow) ============
The header person icon now shows on DESKTOP too (the editorial header used
to hide it entirely) and opens a small two-item popover: Patient login /
Professional login. Icon-only in the utility cluster (same grammar as the
search + globe icons); the popover is a white card matching the nav
dropdown panels. 44px targets throughout. */
.login-menu { position: relative; display: inline-flex; }
.site-header--editorial .header-signin {
display: inline-flex; /* overrides the 3381 hide - the icon is back, as the chooser toggle */
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.site-header--editorial .header-signin__icon { display: inline-block; width: 18px; height: 18px; }
.site-header--editorial .header-signin__label { display: none; } /* icon-only, like search/globe */
.login-menu__list {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 130;
min-width: 210px;
margin: 0;
padding: 0.4rem;
list-style: none;
background: var(--white);
border: 1px solid rgba(58, 42, 102, 0.14);
border-radius: 12px;
box-shadow: 0 12px 32px -10px rgba(46, 33, 80, 0.4);
}
.login-menu__item {
display: flex;
align-items: center;
min-height: 44px;
padding: 0.55rem 0.8rem;
border-radius: 8px;
font-size: 0.98rem;
font-weight: 600;
color: var(--purple);
text-decoration: none;
}
.login-menu__item:hover { background: var(--lavender-light); color: var(--purple-deep); }
.login-menu__item:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
/* ============ HERO STATIC-IMAGE FALLBACK (2026-08) ============
ui.js adds .hero--fallback when the video cannot play (play() rejected,
'error' fired, the 1.8s silent-failure check tripped - WeChat's no-op -
or the no-video/reduced-motion path). The dark-first underlay then paints
the fallback PHOTO under a deep-purple scrim, the video is hidden, and the
headline/CTA render in their final state - an intentional photo hero, never
a broken intro. Scrim is heaviest across the upper text zone so the WHITE
headline holds AA over any part of the image. WebP assets (supported by
current WeChat/iOS/Android); a desktop JPEG was not supplied, so engines
without WebP keep the solid dark layer - dark, legible, never broken. */
.hero--fallback .hero__video { display: none !important; }
.hero--fallback .hero__opening { display: none !important; }
.hero--fallback .hero__dark {
background-color: #2E2150;
/* 2026-08: the fallback's own dark wash is gone - the still gets the SAME
text-anchored scrim as the video (.hero::after applies over this layer),
so the fallback photograph plays clear outside the text pool too. */
background-image: url("../img/hero/hero-fallback.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 700px) {
.hero--fallback .hero__dark {
background-image:
/* 2026-08: own dark wash removed - the shared text-anchored scrim
(.hero::after) is the only treatment, same as the video path. */
url("../img/hero/hero-fallback-mobile.webp");
/* 2026-08 focal-point shift (MOBILE ONLY - desktop keeps the base rule's
center): the portrait crop shows only ~21% of this 1280x720 frame, and
the group of women on the path sits at 60-69% of the image width - just
past the right edge of a centred crop, so phones saw only the ridge.
69% centres the figures in the visible slice (54.5%-75.4% at 375px);
100% is the pan limit (cover cannot expose an empty edge). */
background-position: 69% center;
}
}
/* ============ STICKY FOOTER (2026-08, site-wide) ============
Short pages (standardized empty pages, legal pages, 404) left a white
body strip below the footer when content + footer < viewport. Standard
flex column on : the MAIN area absorbs the spare height, the footer
lands on the viewport bottom edge; long pages are untouched (flex-grow
only distributes SURPLUS space - it never shrinks or stretches the footer,
whose own height/padding/layout are unchanged). CSS-only: every page is
body > [skip-link, header, main, footer, fixed FABs] - no wrapper needed.
dvh where supported keeps iOS URL-bar math honest; vh is the fallback. */
body {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
body > main { flex: 1 0 auto; width: 100%; }
body > .site-header,
body > .site-footer { flex-shrink: 0; }