/* ═══════════════════════════════════════════════════════════════════════
Serving with Care — Homepage polish layer
Sits on top of the design-system tokens (assets/ds/styles.css).
Colour, type, spacing, radii, shadows and motion easing all reference
DS custom properties — no new brand values are invented here.
═══════════════════════════════════════════════════════════════════════ */
/* ── Astra Global Palette → SWC brand ───────────────────────────────────
Native / core / Spectra blocks colour themselves from Astra's Global
Palette variables (--ast-global-color-0…8), NOT our DS tokens. inc/
astra-brand.php maps the brand into Astra's settings so the editor picker
+ Astra's own CSS use it; this hard override is the belt-and-suspenders on
the front end, because Astra's dynamic-CSS is cached per-environment
(uploads/astra-addon/*.css, loaded AFTER this file) and wouldn't pick up a
code-only settings change until regenerated. `!important` on the custom-
property definitions wins the cascade regardless of load order. Slots keep
Astra's semantic meaning (0 accent · 1 accent-hover · 2 heading · 3 body ·
4 base bg · 5 light surface · 6/8 dark · 7 border). */
:root {
--ast-global-color-0: #004fa3 !important; /* blue — accent */
--ast-global-color-1: #011935 !important; /* navy — accent hover */
--ast-global-color-2: #011935 !important; /* navy — headings */
--ast-global-color-3: #011935 !important; /* navy — body text */
--ast-global-color-4: #ffffff !important; /* base background */
--ast-global-color-5: #edf7fd !important; /* pale-sky light surface */
--ast-global-color-6: #011935 !important; /* navy — dark */
--ast-global-color-7: #e0e0e0 !important; /* border */
--ast-global-color-8: #011935 !important; /* navy — dark */
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
overflow-x: hidden;
background: var(--surface-page);
cursor: default;
}
img { max-width: 100%; display: block; }
::selection { background: var(--swc-sky); color: #fff; }
a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }
/* Shared layout shell */
.shell {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 var(--gutter);
width: 100%;
}
/* Section rhythm — generous negative space */
.section { padding: var(--space-xl) 0; position: relative; }
.section.tight { padding: var(--space-lg) 0; }
.wash-blue { background: var(--surface-wash-blue); }
.wash-green { background: var(--surface-wash-green); }
/* Fine top hairline where washes meet white */
.wash-blue::before, .wash-green::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent);
}
.eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-eyebrow);
color: var(--color-accent);
margin: 0 0 var(--space-sm);
display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow.green { color: var(--swc-green); }
.eyebrow.white { color: rgba(255,255,255,0.9); }
.eyebrow::before {
content: ""; width: 26px; height: 2px; border-radius: 2px;
background: currentColor; opacity: 0.55;
}
.section-head { max-width: 640px; }
.section-head.center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin: 0 0 var(--space-sm); }
.section-head .lead {
font-size: var(--fs-h3); color: var(--color-body);
line-height: 1.45; margin: 0;
}
.lead { font-size: var(--fs-h3); line-height: 1.45; }
p { color: var(--color-body); }
.muted { color: var(--color-muted); }
/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-body); font-weight: var(--fw-bold);
font-size: 16px; line-height: 1;
padding: 15px 30px; border-radius: var(--radius);
border: 2px solid transparent; cursor: pointer; text-decoration: none;
will-change: transform;
transition: transform var(--dur-med) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out),
background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.btn .btn-label { display: inline-block; transition: transform var(--dur-med) var(--ease-out); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-lg { padding: 18px 38px; font-size: 18px; }
.btn-primary { background: var(--swc-blue); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--swc-navy); color: #fff; box-shadow: var(--shadow-btn-hover); transform: translateY(-3px); }
.btn-secondary { background: transparent; color: var(--swc-blue); border-color: var(--swc-blue); }
.btn-secondary:hover { background: rgba(0,79,163,0.06); color: var(--swc-blue); transform: translateY(-3px); }
.btn-on-dark.btn-secondary { color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-on-dark.btn-secondary:hover { background: rgba(255,255,255,0.12); color: #fff; transform: translateY(-3px); }
.btn .arrow { transition: transform var(--dur-med) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
/* Text link with animated underline + arrow */
.link-arrow {
display: inline-flex; align-items: center; gap: 8px;
font-weight: var(--fw-semibold); color: var(--swc-blue);
text-decoration: none; position: relative;
}
.link-arrow::after {
content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform var(--dur-med) var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow .arrow { transition: transform var(--dur-med) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }
/* ── Site header ───────────────────────────────────────────────────── */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: transparent;
border-bottom: 1px solid transparent;
transition: border-color var(--dur-med) var(--ease-out),
background-color var(--dur-med) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out);
}
.site-header.is-stuck {
background: rgba(255,255,255,0.78);
backdrop-filter: saturate(150%) blur(14px);
-webkit-backdrop-filter: saturate(150%) blur(14px);
border-bottom-color: var(--border-subtle);
box-shadow: none;
}
/* Scroll progress meter */
.scroll-progress {
position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: transparent; overflow: hidden;
}
.scroll-progress span {
display: block; height: 100%; width: 100%;
transform: scaleX(0); transform-origin: left;
background: linear-gradient(90deg, var(--swc-sky), var(--swc-blue));
}
.header-inner {
max-width: var(--content-width); margin: 0 auto;
padding: 16px var(--gutter);
display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.brand { display: grid; align-items: center; }
.brand img {
grid-area: 1 / 1; height: 50px; width: auto;
transition: height var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
.brand .logo-dark { opacity: 0; }
.site-header.is-stuck .brand .logo-ko { opacity: 0; }
.site-header.is-stuck .brand .logo-dark { opacity: 1; }
.site-header.is-stuck .brand img { height: 42px; }
.primary-nav ul {
display: flex; align-items: center; gap: 80px;
list-style: none; margin: 0; padding: 0;
}
.primary-nav a {
font-weight: var(--fw-bold); font-size: 1.25rem;
color: rgba(255,255,255,0.82); text-decoration: none;
position: relative; padding: 4px 0;
transition: color var(--dur-med) var(--ease-out);
}
.site-header.is-stuck .primary-nav a { color: var(--color-heading); }
.primary-nav a::after {
content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
background: currentColor; border-radius: 2px;
transform: scaleX(0); transform-origin: left;
transition: transform var(--dur-med) var(--ease-out);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: #fff; }
.site-header.is-stuck .primary-nav a[aria-current="page"] { color: var(--swc-blue); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-toggle { display: none; }
/* ── Hero ──────────────────────────────────────────────────────────── */
.hero {
position: relative; overflow: hidden;
color: #fff; isolation: isolate;
min-height: min(94vh, 900px);
display: flex; align-items: center;
padding: calc(var(--space-xl) + 44px) 0 var(--space-xl);
background: radial-gradient(120% 120% at 15% 10%, #0b3160 0%, var(--swc-navy) 45%, #01142b 100%);
}
/* Luminous aurora mesh — large soft light bodies, additive */
.hero-aurora { position: absolute; inset: -18%; z-index: -2; filter: blur(70px); }
.aurora {
position: absolute; border-radius: 50%;
mix-blend-mode: screen; will-change: transform;
}
.aurora.a1 { width: 60vw; height: 60vw; left: -12vw; top: -18vw; opacity: 1;
background: radial-gradient(circle at 40% 40%, rgba(0,172,229,1), transparent 60%);
animation: drift1 24s ease-in-out infinite; }
.aurora.a2 { width: 50vw; height: 50vw; right: -10vw; bottom: -18vw; opacity: 0.95;
background: radial-gradient(circle at 55% 45%, rgba(21,110,92,0.95), transparent 58%);
animation: drift2 30s ease-in-out infinite; }
.aurora.a3 { width: 46vw; height: 46vw; right: 6vw; top: -6vw; opacity: 0.85;
background: radial-gradient(circle at 50% 50%, rgba(122,194,237,0.95), transparent 58%);
animation: drift3 34s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(5vw,3vw) scale(1.1); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6vw,-3vw) scale(1.14); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vw,5vw) scale(0.9); } }
/* Focused spotlight behind the headline for depth */
.hero-spot {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(56% 56% at 26% 44%, rgba(0,172,229,0.34), transparent 70%);
}
/* Vignette to deepen the frame edges (cinematic depth) */
.hero::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(130% 120% at 50% 42%, transparent 52%, rgba(0,10,26,0.55) 100%);
}
/* Oversized brand watermark bleeding off-canvas (editorial depth). Sized and
positioned to stay clear of .hero-visual's floating frosted-glass cards
(.hv-card) — their backdrop-filter blur made this watermark visible as a
distracting rectangular smudge/box wherever a card floated over it. */
.hero-ghost {
position: absolute; left: -2vw; bottom: -6vh; z-index: 0; pointer-events: none; user-select: none;
font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase;
font-size: clamp(16rem, 30vw, 40rem); line-height: 0.7; letter-spacing: -0.04em;
color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.05);
text-stroke: 1px rgba(255,255,255,0.05);
}
@media (min-width: 901px) {
.hero-ghost { max-width: 48%; overflow: hidden; }
}
/* Diagonal sky accent slice (from DS Hero) */
.hero-slice {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(115deg, transparent 54%, rgba(0,172,229,0.28) 55%, transparent 58.5%);
}
/* Subtle film grain for textured depth */
.hero-grain {
position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
/* Two-column art-directed composition */
.hero-grid {
display: grid; grid-template-columns: 1.02fr 0.98fr;
gap: var(--space-xl); align-items: center; width: 100%;
}
.hero-inner { position: relative; z-index: 2; max-width: 640px; }
/* Layered glass composition (right) */
.hero-visual { position: relative; z-index: 2; min-height: 480px; }
.hv-plate {
position: absolute; inset: 6% 0 6% 6%; border-radius: var(--radius-lg); overflow: hidden;
background: linear-gradient(155deg, var(--swc-sky) 0%, var(--swc-blue) 48%, var(--swc-forest) 100%);
box-shadow: none;
will-change: transform;
}
.hv-plate::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: radial-gradient(circle at 74% 22%, rgba(134,221,196,0.55), transparent 52%),
radial-gradient(circle at 20% 84%, rgba(0,172,229,0.4), transparent 50%);
}
.hv-plate-photo {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover;
}
.hv-plate .plate-grain {
position: absolute; inset: 0; opacity: 0.45; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n3)' opacity='0.5'/%3E%3C/svg%3E");
}
.hv-plate .plate-caption {
position: absolute; left: 22px; bottom: 20px; color: rgba(255,255,255,0.72);
font-size: var(--fs-small); letter-spacing: 0.01em;
}
/* Floating glass cards */
.hv-card {
position: absolute; z-index: 3; will-change: transform;
background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.32);
backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
box-shadow: none;
color: #fff;
}
.hv-card.count {
left: -6%; bottom: 12%; padding: 20px 26px; border-radius: var(--radius-lg);
}
.hv-card.count .n {
display: block; font-family: var(--font-display); font-weight: var(--fw-bold);
font-size: 3.4rem; line-height: 0.9; color: #fff; letter-spacing: -0.01em;
}
.hv-card.count .n .plus { color: var(--swc-mint); }
.hv-card.count .l { font-size: 13px; color: rgba(255,255,255,0.82); margin-top: 4px; max-width: 15ch; }
.hv-card.ticker {
right: 0; top: 8%; padding: 14px 18px; border-radius: var(--radius-pill);
display: flex; align-items: center; gap: 11px; max-width: 70%;
transition: width 0.4s var(--ease-out);
}
.hv-card.ticker .pulse {
width: 9px; height: 9px; border-radius: 50%; background: var(--swc-mint); flex: none;
box-shadow: 0 0 0 0 rgba(134,221,196,0.6); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(134,221,196,0.55); } 70% { box-shadow: 0 0 0 12px rgba(134,221,196,0); } 100% { box-shadow: 0 0 0 0 rgba(134,221,196,0); } }
.hv-card.ticker .t { font-size: 13px; line-height: 1.25; overflow: hidden; }
.hv-card.ticker .t .lab { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.hv-card.ticker .t .venue { display: block; font-weight: var(--fw-semibold); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.hv-card.ticker .t .venue.swap { opacity: 0; transform: translateY(-6px); }
.hero h1 {
display: flex; flex-direction: column; align-items: flex-start;
color: #fff; margin: 0 0 var(--space-md); letter-spacing: -0.01em;
}
/* Kinetic line-mask reveal. The mask (overflow:hidden) only needs to hide
the pre-transform text during the slide-up entrance — left on permanently
it also hard-clips the accent word's text-shadow glow at the mask's tight
bounding box (a rectangular cutoff right behind the glow). site.js adds
.is-revealed once the entrance finishes (or immediately under reduced
motion) so the glow can bleed freely afterward. */
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero h1 .line.is-revealed { overflow: visible; }
.hero h1 .line-in { display: block; transform: translateY(115%); }
[data-hero-ready] .hero h1 .line-in {
transform: none;
transition: transform 0.95s var(--ease-out);
}
[data-hero-ready] .hero h1 .line:nth-child(1) .line-in { transition-delay: 0.05s; }
[data-hero-ready] .hero h1 .line:nth-child(2) .line-in { transition-delay: 0.16s; }
.hero h1 .h1-lead {
font-size: clamp(1.5rem, 3.2vw, 2.5rem);
font-weight: var(--fw-medium); color: rgba(255,255,255,0.82);
line-height: 1; letter-spacing: 0.03em;
}
.hero h1 .h1-accent {
position: relative;
font-size: clamp(4.5rem, 13vw, 9.5rem);
color: var(--swc-sky); line-height: 0.86;
}
/* The glow lives on a transparent ghost clone (not the accent text itself)
so it can fade in with its own opacity transition once the reveal mask
relaxes (see .line.is-revealed above) — the base text has no text-shadow
of its own, so nothing "pops" the instant the mask lets the shadow bleed
past its edge; the glow simply isn't drawn yet, then fades in cleanly. */
.hero h1 .h1-accent::after {
content: attr(data-text);
position: absolute; inset: 0; left: 0;
color: transparent;
text-shadow: 0 4px 60px rgba(0,172,229,0.4);
opacity: 0;
transition: opacity 0.7s var(--ease-out);
pointer-events: none;
}
.hero h1 .line.is-revealed .h1-accent::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.hero h1 .h1-accent::after { transition: none; }
}
/* In-canvas heading/subheading (nested native blocks, when an editor has
added them — see the InnerBlocks fallback in render.php) */
.hero-heading-inner { color: #fff; margin: 0 0 var(--space-md); max-width: 640px; }
.hero-heading-inner h1, .hero-heading-inner h2, .hero-heading-inner h3 {
font-family: var(--font-display); font-weight: var(--fw-bold);
font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.01em;
color: #fff; margin: 0 0 var(--space-sm);
}
.hero-heading-inner p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255,255,255,0.82); line-height: 1.5; margin: 0; }
/* Hero eyebrow with live count */
.hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; }
.hero-eyebrow .eyebrow-sep { width: 1px; height: 13px; background: rgba(255,255,255,0.32); }
.hero-eyebrow .eyebrow-count {
color: rgba(255,255,255,0.62); font-weight: var(--fw-medium);
letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-size: var(--fs-eyebrow);
}
.hero .hero-sub {
color: rgba(255,255,255,0.86); font-size: clamp(1.1rem, 2.2vw, 1.6rem);
max-width: 620px; margin: 0 0 var(--space-lg); line-height: 1.4;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
/* Trust strip beneath hero copy */
.hero-trust {
display: flex; flex-wrap: wrap; align-items: center; gap: 28px;
margin-top: var(--space-lg); color: rgba(255,255,255,0.7); font-size: 14px;
}
.hero-trust .item { display: inline-flex; align-items: center; gap: 9px; }
.hero-trust svg { width: 18px; height: 18px; flex: none; }
.hero-trust .dashicons { width: 18px; height: 18px; font-size: 18px; line-height: 1; flex: none; color: var(--swc-mint); }
.hero-trust-icon-img { width: 18px; height: 18px; flex: none; object-fit: contain; border-radius: 2px; }
/* Scroll cue */
.scroll-cue {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
color: rgba(255,255,255,0.6); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.scroll-cue .mouse {
width: 22px; height: 34px; border: 2px solid rgba(255,255,255,0.4); border-radius: 12px;
position: relative;
}
.scroll-cue .mouse::after {
content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; border-radius: 2px;
background: rgba(255,255,255,0.75); transform: translateX(-50%);
animation: cue 1.8s var(--ease-out) infinite;
}
@keyframes cue { 0% { opacity: 0; transform: translate(-50%,0); } 30% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,10px); } }
/* ── Hero — photo redesign (Figma 220:481) ─────────────────────────────
Full-bleed background photo + dark overlay, oversized sky accent word,
single rounded feature photo. Overrides the earlier aurora/glass hero;
the old decorative rules above are simply no longer emitted by render.php
(the shared .aurora rules stay — the inner-page .page-hero still uses them). */
.hero--photo {
background: var(--swc-navy);
min-height: min(88vh, 820px);
}
.hero--photo .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero--photo .hero-bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--photo .hero-bg-overlay {
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(1,13,30,0.84) 0%, rgba(1,13,30,0.74) 46%, rgba(1,13,30,0.60) 100%);
}
.hero--photo .shell { position: relative; z-index: 2; }
.hero--photo h1 { text-transform: uppercase; margin-bottom: var(--space-md); }
.hero--photo h1 .h1-lead {
font-size: clamp(1.9rem, 4.4vw, 3.375rem); color: #fff;
font-weight: var(--fw-medium); letter-spacing: 0.02em;
}
.hero--photo h1 .h1-accent {
font-size: clamp(4.75rem, 13.5vw, 9.375rem); color: var(--swc-sky); line-height: 0.83;
}
.hero--photo .hero-sub {
font-size: clamp(1.25rem, 2.4vw, 2rem); color: rgba(255,255,255,0.9);
max-width: 40ch; margin-bottom: var(--space-lg);
}
.hero--photo .hero-visual { min-height: 0; }
.hero--photo .hero-photo {
position: relative; width: 100%; aspect-ratio: 428 / 390;
border-radius: 15px; overflow: hidden;
box-shadow: none;
}
.hero--photo .hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ── Intro split ───────────────────────────────────────────────────── */
.intro-grid {
display: grid; grid-template-columns: 1.05fr 0.95fr;
gap: var(--space-xl); align-items: center;
}
.intro-copy h2 { margin-top: 0; }
.intro-copy p { max-width: 46ch; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-md); }
/* Image-position toggle (media_position: left) — swap the two columns via
`order` so the DOM stays copy-first (reading order / SEO) while the media
panel renders on the left above the 900px stacking breakpoint. */
.intro-section--media-left .intro-grid { grid-template-columns: 0.95fr 1.05fr; }
.intro-section--media-left .media-panel { order: 1; }
.intro-section--media-left .intro-copy { order: 2; }
/* Media panel (abstract brand gradient in place of photography) */
.media-panel {
position: relative; border-radius: var(--radius-lg); overflow: hidden;
min-height: 440px; will-change: transform;
background: linear-gradient(140deg, var(--swc-green) 0%, var(--swc-forest) 100%);
box-shadow: var(--shadow-card);
}
.media-panel::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(circle at 72% 28%, rgba(134,221,196,0.5), transparent 55%),
radial-gradient(circle at 20% 82%, rgba(0,172,229,0.32), transparent 52%);
}
.panel-photo {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover;
}
.media-panel .panel-grain {
position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)' opacity='0.5'/%3E%3C/svg%3E");
}
.media-panel .panel-caption {
position: absolute; left: 24px; right: 24px; bottom: 22px;
color: rgba(255,255,255,0.82); font-size: var(--fs-small);
}
/* Static informational tags on the media panel (not interactive) */
.panel-tags {
position: absolute; top: 22px; left: 22px; z-index: 2;
display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.panel-tag {
display: inline-flex; align-items: center; gap: 9px;
padding: 8px 14px; border-radius: var(--radius-pill);
background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
color: rgba(255,255,255,0.92); font-weight: var(--fw-semibold); font-size: 13px;
cursor: default;
}
.panel-tag svg { width: 15px; height: 15px; color: var(--swc-mint); flex: none; }
/* ── Stat band (editorial) ─────────────────────────────────────────── */
.stat-band-head {
display: flex; justify-content: space-between; align-items: flex-end;
gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-xl);
}
.stat-band-head .section-head { max-width: 30ch; }
.stat-band-note { max-width: 40ch; }
.stat-band-note p { margin: 0 0 var(--space-sm); }
.stat-row {
display: grid; grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--border-subtle);
}
.stat-item { padding: var(--space-lg) var(--space-lg) 0 0; }
.stat-item + .stat-item {
padding-left: var(--space-lg);
border-left: 1px solid var(--border-subtle);
}
.stat-num {
display: flex; align-items: flex-start;
font-family: var(--font-display); font-weight: var(--fw-bold);
font-size: clamp(4rem, 8vw, 6.6rem); line-height: 0.86;
color: var(--swc-sky); letter-spacing: -0.02em;
}
.stat-num .pct { font-size: 0.42em; margin-top: 0.35em; opacity: 0.65; }
.stat-label { margin: var(--space-sm) 0 0; color: var(--color-body); font-size: 1.05rem; line-height: 1.45; max-width: 30ch; }
.stats-footnote { max-width: 720px; }
/* Stat-band "proof" row: supporting copy beside overlapping placeholder
photography (mirrors the hero's floating-card-over-plate treatment). */
.stat-proof {
display: grid; grid-template-columns: 1fr 1fr; align-items: center;
gap: var(--space-xl); margin-top: var(--space-xl);
}
.stat-proof-copy { max-width: 46ch; }
.stat-proof-lead { font-weight: var(--fw-semibold); font-size: 1.1rem; color: var(--color-heading); margin: 0 0 var(--space-sm); }
.stat-proof-copy p { margin: 0 0 var(--space-md); color: var(--color-body); }
.stat-proof-copy .btn { margin-top: var(--space-xs); }
.stat-proof-media { position: relative; min-height: 380px; }
.proof-panel { position: absolute; min-height: 220px; margin: 0; }
.proof-panel-a { inset: 0 14% 20% 0; z-index: 1; }
.proof-panel-b {
inset: 20% 0 0 24%; z-index: 2;
box-shadow: none;
}
/* Generic glass card (used by directory-adjacent surfaces) */
.card {
background: rgba(255,255,255,0.72);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-md);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: rgba(0,79,163,0.16); }
/* Section background mesh accent (very subtle) */
.mesh-soft { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mesh-soft::before, .mesh-soft::after {
content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5;
}
.mesh-soft::before { width: 520px; height: 520px; top: -160px; right: -120px;
background: radial-gradient(circle, rgba(0,172,229,0.12), transparent 70%); }
.mesh-soft::after { width: 460px; height: 460px; bottom: -180px; left: -140px;
background: radial-gradient(circle, rgba(134,221,196,0.16), transparent 70%); }
.section > .shell { position: relative; z-index: 1; }
/* ── Signatory marquee ─────────────────────────────────────────────── */
.marquee {
position: relative; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee.paused .marquee-track { animation-play-state: paused; }
.marquee-track.row-a { animation: marquee 42s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Spacing is a per-chip margin, not a flex `gap` on the track. The track
holds two identical copies of the chip list back to back so the loop can
jump from -50% to 0 seamlessly — but flex `gap` adds one extra "seam" gap
between the two copies that isn't part of either copy's own width, so
-50% lands half a gap short of one true copy-width and the loop visibly
snaps on every cycle. Giving each chip its own trailing margin (including
the last chip of each copy) makes both copies exactly the same width, so
-50% is exact and the loop is seamless. */
.sig-chip {
flex: none; display: flex; align-items: center; justify-content: center;
height: 84px; min-width: 190px; padding: 0 30px; margin-right: 20px; white-space: nowrap;
background: var(--surface-card); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em;
font-size: 20px; color: var(--color-muted);
transition: color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.sig-chip:hover { color: var(--swc-blue); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
@media (max-width: 620px) {
.sig-chip { height: 66px; min-width: 0; padding: 0 22px; margin-right: 14px; font-size: 16px; }
}
/* ── Member directory: full-column layout ("Full-directory layout" field) ─
A roomier, denser directory than the default side-by-side full-list —
used to be scoped to a dedicated Members page via a page-slug stylesheet;
now it's a block-level layout choice so it works on any page the Member
Directory block is embedded on (moved verbatim from page-members.css). */
.members-section--wide .members-grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.members-section--wide .members-intro { max-width: 720px; }
.members-section--wide .directory { padding: var(--space-lg); }
.members-section--wide .dir-scroll { max-height: 620px; }
.members-section--wide .dir-tiles { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .members-section--wide .dir-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .members-section--wide .dir-tiles { grid-template-columns: 1fr; } }
/* ── Members directory teaser ──────────────────────────────────────── */
.members-grid {
display: grid; grid-template-columns: 0.85fr 1.15fr;
gap: var(--space-xl); align-items: center;
}
.members-count {
font-family: var(--font-display); font-weight: var(--fw-bold);
font-size: clamp(5rem, 11vw, 8.5rem); line-height: 0.9; color: var(--swc-green);
letter-spacing: -0.02em;
}
.members-count .plus { color: var(--swc-mint); }
.members-headline { font-size: var(--fs-h3); color: var(--color-body); margin: 8px 0 var(--space-md); }
.members-headline-inner { margin: 8px 0 var(--space-md); }
.members-headline-inner > :first-child { font-size: var(--fs-h3); color: var(--color-body); }
/* Directory: search + low-weight tile field */
.directory {
background: rgba(255,255,255,0.66);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-md);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: var(--shadow-card);
}
.dir-search {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; border-radius: var(--radius-pill);
background: #fff; border: 1px solid var(--border-color);
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.dir-search:focus-within { border-color: var(--swc-blue); box-shadow: 0 0 0 4px rgba(0,79,163,0.12); }
.dir-search svg { width: 18px; height: 18px; color: var(--color-muted); flex: none; }
.dir-search input {
border: none; outline: none; background: transparent; flex: 1;
font-family: var(--font-body); font-size: 15px; color: var(--color-heading);
}
.dir-search input::placeholder { color: var(--color-muted); }
.dir-meta {
display: flex; align-items: center; justify-content: space-between;
margin: 14px 2px 12px; font-size: 13px; color: var(--color-muted);
}
.dir-scroll { max-height: 268px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.dir-scroll::-webkit-scrollbar { width: 8px; }
.dir-scroll::-webkit-scrollbar-thumb { background: rgba(1,25,53,0.14); border-radius: 8px; }
.dir-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.member-tile {
display: flex; flex-direction: column; gap: 3px; justify-content: center;
min-height: 74px; padding: 12px 14px;
background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius);
transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.member-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: rgba(0,79,163,0.18); }
/* Tiles that carry a member website render as links — keep the card look.
text-decoration is forced (!important) to beat Astra's default link
underline, whose generated CSS loads after this file. */
a.member-tile,
a.member-tile:hover,
a.member-tile:focus { text-decoration: none !important; color: inherit; cursor: pointer; }
a.member-tile:hover { border-color: rgba(0,79,163,0.35); }
.member-tile .m-name {
font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em;
font-size: 15px; color: var(--color-heading); line-height: 1.1;
}
.member-tile .m-meta { font-size: 12px; color: var(--color-muted); }
.dir-empty { padding: 28px 8px; text-align: center; color: var(--color-muted); font-size: 14px; }
.dir-footer { margin-top: var(--space-md); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* ── CTA Band (elevated conversion bar: heading + single button) ───────
Rebuilt (round 7) from a flat full-bleed wash strip + outline button
into a contained, ELEVATED card matching the site's design bar (cf.
.footer-cta / .hv-card / .stat-band, which the client cited as the
target). One component, two polished modes:
• default (no background option) — bold blue→navy gradient card with a
radial brand glow, deep drop shadow and a white→mint button. This is
the maximal-punch .footer-cta-style treatment.
• .wash-gray / .wash-blue / .wash-green — a premium *light* card (subtle
white→wash gradient, hairline ring, soft card shadow, dark heading,
solid primary button). Keeps the Figma's light-gray CTA-bar intent
while shedding the flat/unpolished look the client flagged.
The card lives inside .shell, so it's contained to the reading width
rather than spanning edge-to-edge like the old strip. */
.cta-band { padding: var(--space-lg) 0; background: none; }
.cta-band.wash-gray, .cta-band.wash-blue, .cta-band.wash-green { background: none; }
/* cancel the global .wash-*::before top hairline — the card owns its edges */
.cta-band::before { content: none; }
.cta-band-inner {
position: relative; overflow: hidden;
display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
gap: var(--space-sm) var(--space-lg);
border-radius: var(--radius-lg);
padding: clamp(var(--space-md), 3.5vw, 44px) clamp(var(--space-md), 5vw, var(--space-xl));
background: linear-gradient(135deg, var(--swc-blue) 0%, var(--swc-navy) 72%);
box-shadow: none;
transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.cta-band-inner::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle at 15% 18%, rgba(0, 172, 229, 0.5), transparent 46%),
radial-gradient(circle at 90% 92%, rgba(29, 75, 65, 0.55), transparent 52%);
}
.cta-band-inner > * { position: relative; z-index: 1; }
/* Heading takes the available width (flex:1) so the copy fills the bar and
wraps to ~2 lines instead of a narrow 3-line column, and the button sits
right after it rather than across a wide empty gulf.
NOTE the selector specificity: Astra's `.entry-content … p` sets
margin-bottom: 1.6em, which (0,2,0) out-specifies a plain
`.cta-band-heading` (0,1,0). That stray bottom margin inflates the
heading's flex margin-box, so its text sits at the top of the bar while
the button centres in the taller line — reading as an off-centre heading.
`.cta-band-inner p.cta-band-heading` (0,2,1) beats it and zeroes it. */
.cta-band-inner p.cta-band-heading {
margin: 0; flex: 1 1 0; min-width: 0; /* basis 0 so it shares the row with the button and wraps its own text, instead of forcing the button onto a second line */
font-family: var(--font-display); text-transform: uppercase;
font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.1rem); line-height: 1.12;
letter-spacing: 0.01em; color: #fff;
align-self: center;
}
.cta-band .btn { flex: 0 0 auto; align-self: center; }
/* Button pop on the dark gradient (default mode) */
.cta-band-inner .btn-primary {
background: #fff; color: var(--swc-navy); border-color: #fff;
box-shadow: none;
}
.cta-band-inner .btn-primary:hover {
background: var(--swc-mint); color: var(--swc-navy); border-color: var(--swc-mint);
transform: translateY(-3px); box-shadow: none;
}
/* Light card variants — the wash goes into the card, not the section */
.cta-band.wash-gray .cta-band-inner,
.cta-band.wash-blue .cta-band-inner,
.cta-band.wash-green .cta-band-inner {
color: var(--color-heading);
border: 1px solid var(--swc-border);
box-shadow: var(--shadow-card);
}
.cta-band.wash-gray .cta-band-inner { background: linear-gradient(135deg, #fff 0%, var(--swc-ink-08) 100%); }
.cta-band.wash-blue .cta-band-inner { background: linear-gradient(135deg, #fff 0%, var(--surface-wash-blue) 100%); }
.cta-band.wash-green .cta-band-inner { background: linear-gradient(135deg, #fff 0%, var(--surface-wash-green) 100%); }
.cta-band.wash-gray .cta-band-inner::before,
.cta-band.wash-blue .cta-band-inner::before,
.cta-band.wash-green .cta-band-inner::before {
background: radial-gradient(circle at 92% 90%, rgba(0, 172, 229, 0.12), transparent 55%);
}
.cta-band.wash-gray .cta-band-heading,
.cta-band.wash-blue .cta-band-heading,
.cta-band.wash-green .cta-band-heading { color: var(--color-heading); }
.cta-band.wash-gray .cta-band-inner .btn-primary,
.cta-band.wash-blue .cta-band-inner .btn-primary,
.cta-band.wash-green .cta-band-inner .btn-primary {
background: var(--swc-blue); color: #fff; border-color: var(--swc-blue);
box-shadow: var(--shadow-btn);
}
.cta-band.wash-gray .cta-band-inner .btn-primary:hover,
.cta-band.wash-blue .cta-band-inner .btn-primary:hover,
.cta-band.wash-green .cta-band-inner .btn-primary:hover {
background: var(--swc-navy); color: #fff; border-color: var(--swc-navy);
transform: translateY(-3px); box-shadow: var(--shadow-btn-hover);
}
@media (max-width: 768px) {
.cta-band-inner { flex-direction: column; align-items: flex-start; text-align: left; }
.cta-band .btn { width: 100%; }
}
/* ── Feature Panel (photo + overlaid two-list card) ─────────────────
Join page's "How it Works" / "What you Get" pairing. Rebuilt (round 7):
the photo and card now share ONE CSS-grid cell (both on grid row 1), so
the row height is driven by whichever is taller. With the media set to
`align-self: stretch`, the PHOTO always grows to the full height of the
card — killing the round-6 bug where a short, wide photo left the taller
card hanging over empty space below it. It does this WITHOUT the
absolute-positioning / internal-scroll hacks that made the first retry
worse (§7): because both items live in the same auto-sized grid row, the
section always fully contains the card and can never overlap the next
section. A min-height floor keeps the photo photo-forward when the card
content is short, and a modest vertical margin lets the photo frame the
card top/bottom. Reuses the .panel-photo/.panel-grain placeholder
convention from Hero/Intro Split/Stat Highlight. */
.feature-panel > .shell {
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: center;
}
.feature-panel-media {
grid-area: 1 / 1 / 2 / 13; /* full width, row 1 */
align-self: stretch; /* grow to the card-driven row height */
position: relative;
min-height: 480px; /* floor when the card content is short */
border-radius: var(--radius-lg);
overflow: hidden;
}
.feature-panel-media .panel-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-panel-media .panel-grain {
position: absolute; inset: 0;
background: linear-gradient(135deg, var(--swc-sky), var(--swc-blue));
}
.feature-panel-media::after { /* soft scrim so the card reads cleanly over the photo */
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, transparent 34%, rgba(1, 25, 53, 0.30) 100%);
}
.feature-panel-card {
grid-area: 1 / 6 / 2 / 13; /* right side, same row → overlaps the photo */
justify-self: end; align-self: center;
position: relative; z-index: 1;
width: min(440px, 100%);
/* Equal frame on all sides the photo shows: top/bottom via the block
margin, right via the same value (justify-self:end + margin-right keeps
the card off the photo's right edge instead of flush against it). */
margin: var(--space-lg);
background: var(--surface-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: var(--space-lg);
}
.feature-panel-card h3 { font-size: 1.15rem; margin: 0 0 10px; }
.feature-list { margin: 0 0 var(--space-md); padding-left: 1.3em; }
.feature-list:last-child { margin-bottom: 0; }
.feature-list--numbered { list-style: decimal; }
.feature-list li { margin-bottom: 8px; line-height: 1.55; color: var(--color-body); }
@media (max-width: 720px) {
.feature-panel > .shell { display: block; }
.feature-panel-media { min-height: 0; aspect-ratio: 4 / 3; }
.feature-panel-media::after { background: linear-gradient(180deg, transparent 45%, rgba(1, 25, 53, 0.30) 100%); }
.feature-panel-card {
width: calc(100% - var(--gutter) * 2);
margin: -48px auto 0; /* overlap the photo's bottom edge on mobile */
}
}
/* ── Footer ────────────────────────────────────────────────────────── */
.site-footer { background: var(--surface-dark); color: rgba(255,255,255,0.85); }
.footer-cta {
position: relative; overflow: hidden;
border-radius: var(--radius-lg);
margin: 0 auto; max-width: var(--content-width);
transform: translateY(calc(var(--space-xl) * -1 + var(--space-lg)));
padding: var(--space-lg) var(--space-lg);
background: linear-gradient(135deg, var(--swc-blue) 0%, var(--swc-navy) 70%);
color: #fff; text-align: center;
box-shadow: none;
}
.footer-cta::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 18% 20%, rgba(0,172,229,0.5), transparent 45%),
radial-gradient(circle at 85% 85%, rgba(29,75,65,0.6), transparent 52%);
}
.footer-cta > * { position: relative; }
.footer-cta h2 { color: #fff; margin: 0 0 var(--space-sm); }
.footer-cta p { color: rgba(255,255,255,0.85); max-width: 500px; margin: 0 auto var(--space-md); }
.footer-main {
max-width: var(--content-width); margin: 0 auto;
padding: var(--space-lg) var(--gutter);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg);
}
.footer-main img { height: 44px; width: auto; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 26px; list-style: none; margin: 0; padding: 0; }
.footer-nav a { color: rgba(255,255,255,0.85); font-weight: var(--fw-medium); font-size: 15px; text-decoration: none; }
.footer-nav a:hover { color: #fff; }
.footer-legal {
border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-legal p {
max-width: var(--content-width); margin: 0 auto; padding: var(--space-sm) var(--gutter);
font-size: var(--fs-small); color: rgba(255,255,255,0.6);
}
/* ── Scroll orchestration ──────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-visible {
opacity: 1; transform: none;
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
transition-delay: var(--reveal-delay, 0s);
}
}
/* ── Shimmer skeleton ──────────────────────────────────────────────── */
.shimmer {
position: relative; overflow: hidden;
background: rgba(1,25,53,0.06);
}
.shimmer::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
transform: translateX(-100%);
animation: shimmer 1.4s var(--ease-out) infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-tile { min-height: 74px; border-radius: var(--radius); }
.skeleton-chip { height: 84px; min-width: 190px; border-radius: var(--radius-lg); }
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 2px solid var(--swc-sky); outline-offset: 3px; border-radius: 4px;
}
/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.primary-nav { display: none; }
.hero-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
.hero-inner { max-width: none; }
.hero .hero-sub { max-width: none; }
.hero-visual { min-height: 300px; margin-top: var(--space-sm); }
.hv-card.count { left: 0; bottom: 6%; }
.hv-card.ticker { right: 0; top: 4%; }
.intro-grid, .members-grid, .stat-proof { grid-template-columns: 1fr; gap: var(--space-lg); }
.intro-section--media-left .intro-copy, .intro-section--media-left .media-panel { order: 0; } /* copy leads when stacked */
.stat-row { grid-template-columns: 1fr; }
.stat-item { padding: var(--space-md) 0; }
.stat-item + .stat-item { padding-left: 0; border-left: none; border-top: 1px solid var(--border-subtle); }
.media-panel { min-height: 320px; }
.stat-proof-media { min-height: 320px; margin-top: var(--space-sm); }
.stat-proof-copy { max-width: none; }
.members-count { font-size: clamp(4.5rem, 22vw, 7rem); }
}
@media (max-width: 620px) {
.section { padding: var(--space-lg) 0; }
.dir-tiles { grid-template-columns: 1fr; }
.hero { min-height: auto; padding: calc(var(--space-xl) + 64px) 0 var(--space-lg); }
.footer-main { flex-direction: column; align-items: flex-start; }
/* Scroll cue collides with hero content on short screens */
.scroll-cue { display: none; }
/* Tighten condensed all-caps display headings on narrow screens */
h1, h2, .section-head h2 { line-height: 1.08; }
.hero h1 .h1-accent { line-height: 0.9; }
.members-headline { font-size: 1.25rem; }
/* Give footer nav real breathing room when it wraps */
.footer-nav ul { gap: 16px 26px; }
}
@media (prefers-reduced-motion: reduce) {
.aurora, .marquee-track.row-a, .scroll-cue .mouse::after, .shimmer::after { animation: none !important; }
.hero h1 .line-in { transform: none !important; }
html { scroll-behavior: auto; }
}
/* ═══════════════════════════════════════════════════════════════════════
WordPress / Astra integration layer
Everything below adapts the design system to the WP + Astra + ACF-block
render environment. It references DS tokens only — no new brand values.
═══════════════════════════════════════════════════════════════════════ */
/* ── Astra: let SWC pages run full-bleed so our sections own their width ─ */
.swc-page .site-content .ast-container,
.swc-page .site-content > .ast-container { max-width: 100%; padding: 0; }
.swc-page #primary,
.swc-page .site-main,
.swc-page .entry-content { margin: 0; padding: 0; max-width: none; }
.swc-page .entry-content > * { margin-block: 0; }
/* Astra sometimes wraps content in a max-width article — neutralize it */
.swc-page .ast-article-single,
.swc-page .ast-article-post { padding: 0; border: 0; }
/* Kill Astra's default page title / breadcrumb on SWC pages (belt & braces
alongside the astra_the_title_enabled filter) */
.swc-page .ast-single-post .entry-title,
.swc-page .ast-archive-description,
.swc-page .ast-breadcrumbs { display: none; }
/* Astra adds body padding for its own header; ours is fixed + transparent */
.swc-page .site-content { padding-top: 0; }
/* ── Fixed-header offset for pages without a full hero ──────────────────
Home starts with the dark .hero (its own top padding). Every other page
starts with the .page-hero band, which needs to clear the fixed header. */
/* ── Inner-page hero band ───────────────────────────────────────────────
Compact navy mesh header used on About / Principles / Join / Members. */
.page-hero {
position: relative; overflow: hidden; isolation: isolate; color: #fff;
padding: calc(var(--space-xl) + 60px) 0 var(--space-xl);
background: radial-gradient(120% 140% at 12% 0%, #0b3160 0%, var(--swc-navy) 48%, #01142b 100%);
}
.page-hero-aurora { position: absolute; inset: -20%; z-index: -2; filter: blur(70px); }
.page-hero-aurora .aurora { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.page-hero-aurora .a1 { width: 44vw; height: 44vw; left: -8vw; top: -16vw; opacity: 0.9;
background: radial-gradient(circle at 45% 45%, rgba(0,172,229,0.95), transparent 60%);
animation: drift1 26s ease-in-out infinite; }
.page-hero-aurora .a2 { width: 40vw; height: 40vw; right: -8vw; bottom: -20vw; opacity: 0.85;
background: radial-gradient(circle at 55% 45%, rgba(21,110,92,0.9), transparent 58%);
animation: drift2 32s ease-in-out infinite; }
.page-hero::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(115deg, transparent 56%, rgba(0,172,229,0.22) 57%, transparent 60%);
}
.page-hero .shell { position: relative; z-index: 1; max-width: var(--content-width); }
.page-hero .eyebrow { color: rgba(255,255,255,0.82); }
.page-hero .eyebrow::before { background: var(--swc-sky); opacity: 1; }
.page-hero-title {
color: #fff; margin: 0 0 var(--space-sm); max-width: 20ch;
font-size: clamp(2.6rem, 6vw, var(--fs-h1)); line-height: 1.02;
}
.page-hero-sub {
color: rgba(255,255,255,0.82); font-size: clamp(1.05rem, 2vw, 1.35rem);
max-width: 62ch; margin: 0; line-height: 1.45;
}
@media (max-width: 620px) {
.page-hero { padding: calc(var(--space-lg) + 64px) 0 var(--space-lg); }
.page-hero-title { line-height: 1.06; }
}
/* ── Override Astra's "underline content links" default ─────────────────
Astra's global typography setting (on by default — see
astra/inc/class-astra-dynamic-css.php) underlines every anchor inside
`.entry-content` via `.ast-single-post .entry-content a`. Our ACF blocks
render inside post_content, so it catches .btn / .link-arrow too (and
doubles up with .link-arrow's own hover underline). Its selector already
out-specifies our single-class components; !important is extra insurance
against stylesheet load order. Genuine inline prose links keep their
deliberate underline (.prose-section a, the entry-content > p/li a rules
above) — this only targets interactive UI elements. */
.swc-page .entry-content a.btn,
.swc-page .entry-content a.link-arrow,
.swc-page .entry-content .wp-block-button__link {
text-decoration: none !important;
}
/* ── Core-block buttons → design buttons ────────────────────────────────
Editors sometimes use core wp:buttons; make them read as brand buttons. */
.swc-page .wp-block-button__link {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 16px; line-height: 1;
padding: 15px 30px; border-radius: var(--radius); border: 2px solid transparent;
background: var(--swc-blue); color: #fff; box-shadow: var(--shadow-btn);
transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.swc-page .wp-block-button__link:hover { background: var(--swc-navy); color: #fff; box-shadow: var(--shadow-btn-hover); transform: translateY(-3px); }
.swc-page .is-style-outline .wp-block-button__link,
.swc-page .wp-block-button.is-style-outline .wp-block-button__link {
background: transparent; color: var(--swc-blue); border-color: var(--swc-blue); box-shadow: none;
}
.swc-page .is-style-outline .wp-block-button__link:hover { background: rgba(0,79,163,0.06); color: var(--swc-blue); }
.swc-page .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; }
/* ── Prose (About + free-text sections) in the DS scale ─────────────────
Applied to core blocks that render inside a .prose-section .shell. */
.prose-section { padding: var(--space-xl) 0; }
.prose-section .shell { max-width: 760px; }
.prose-section h2 { margin: var(--space-lg) 0 var(--space-sm); }
.prose-section h2:first-child { margin-top: 0; }
.prose-section h3 { margin: var(--space-md) 0 var(--space-sm); }
.prose-section p { color: var(--color-body); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 var(--space-md); }
.prose-section ul, .prose-section ol { margin: 0 0 var(--space-md); padding-left: 1.2em; }
.prose-section li { margin: 0 0 8px; line-height: 1.6; }
.prose-section a { color: var(--swc-blue); text-decoration: underline; text-underline-offset: 3px; }
.prose-section a:hover { color: var(--swc-navy); }
/* ── Principle cards (Principles + Join) ────────────────────────────────
Card grid; the "advanced" set uses the calmer green register. */
.principle-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md);
margin-top: var(--space-lg);
}
.principle-card {
position: relative; background: var(--surface-card);
border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
padding: var(--space-md) var(--space-md) calc(var(--space-md) + 4px);
box-shadow: var(--shadow-card);
transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.principle-card:hover { transform: translateY(-4px); box-shadow: none; border-color: rgba(0,79,163,0.16); }
.principle-card .p-index {
font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.6rem;
color: var(--swc-sky); line-height: 1; letter-spacing: -0.01em;
}
.principle-card .p-title { font-size: 1.2rem; margin: 10px 0 8px; color: var(--color-heading); }
.principle-card .p-desc { color: var(--color-body); font-size: 1rem; line-height: 1.55; margin: 0; text-transform: none; }
.principle-list.advanced .principle-card .p-index { color: var(--swc-green); }
.principle-list.advanced .principle-card:hover { border-color: rgba(29,75,65,0.22); }
@media (max-width: 720px) { .principle-grid { grid-template-columns: 1fr; } }
/* ── Principle cards: per-card brand fill (optional, "Card colour") ──────
A fixed brand palette with text colours hard-paired for WCAG contrast —
dark fills (blue/navy/green) take light text, light fills (sky/mint) take
navy text. Same contrast strategy as the flip-card back face, here on the
standard grid card. The `.p-desc` selectors also cover the inner
/
/ the wysiwyg field emits (the global `p` colour would
otherwise repaint them). */
.principle-card--bg-blue { background: var(--swc-blue); border-color: transparent; }
.principle-card--bg-navy { background: var(--swc-navy); border-color: transparent; }
.principle-card--bg-green { background: var(--swc-green); border-color: transparent; }
.principle-card--bg-sky { background: var(--swc-sky); border-color: transparent; }
.principle-card--bg-mint { background: var(--swc-mint); border-color: transparent; }
:is(.principle-card--bg-blue, .principle-card--bg-navy, .principle-card--bg-green) .p-index { color: rgba(255,255,255,0.72); }
:is(.principle-card--bg-blue, .principle-card--bg-navy, .principle-card--bg-green) .p-title { color: #fff; }
:is(.principle-card--bg-blue, .principle-card--bg-navy, .principle-card--bg-green) :is(.p-desc, .p-desc p, .p-desc li, .p-desc strong, .p-desc a) { color: rgba(255,255,255,0.9); }
:is(.principle-card--bg-sky, .principle-card--bg-mint) .p-index { color: rgba(1,25,53,0.55); }
:is(.principle-card--bg-sky, .principle-card--bg-mint) .p-title { color: var(--swc-navy); }
:is(.principle-card--bg-sky, .principle-card--bg-mint) :is(.p-desc, .p-desc p, .p-desc li, .p-desc strong, .p-desc a) { color: var(--swc-navy); }
.principle-card[class*="principle-card--bg-"]:hover { border-color: transparent; }
.principle-card[class*="principle-card--bg-"] .p-desc a { text-decoration: underline; text-underline-offset: 3px; }
/* ── Principle cards: flip layout (optional, "Flip cards on hover/tap") ──
The front face shows only the index + title; hovering (mouse) or the
.flip-toggle button (keyboard/touch/screen readers) flips the card to
reveal the description on a vibrant fill. Both faces stay in the DOM at
all times — the flip is a sighted-pointer affordance layered on top, not
a way of hiding the description from anyone who can't hover. */
.principle-card--flip {
background: transparent; border: 0; box-shadow: none; padding: 0;
}
.principle-card--flip:hover { transform: none; box-shadow: none; }
.principle-card--flip .flip-inner {
position: relative; width: 100%; height: 100%; min-height: 220px;
/* Longer + a symmetric ease-in-out — the default fast-start --ease-out
read as an abrupt "snap" for a full 180deg rotation. */
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); transform-style: preserve-3d;
}
.principle-card--flip:hover .flip-inner,
.principle-card--flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
padding: var(--space-md) var(--space-md) calc(var(--space-md) + 4px);
box-shadow: var(--shadow-card);
display: flex; flex-direction: column; justify-content: center;
}
.flip-face--back {
background: var(--flip-bg, var(--swc-blue)); border-color: transparent;
color: #fff; transform: rotateY(180deg);
}
.flip-face--back .p-index { color: rgba(255,255,255,0.72); }
.flip-face--back .p-title { color: #fff; }
/* The description is a wysiwyg field, so it renders inside /
/
tags. The global `p { color: var(--color-body) }` (dark) out-specifies a
plain color on .p-desc and was painting the copy dark-on-dark on the
vibrant flip fill — an accessibility bug. Force light on every inner
element so the whole description reads white on the dark fills. */
.flip-face--back .p-desc,
.flip-face--back .p-desc p,
.flip-face--back .p-desc li,
.flip-face--back .p-desc strong,
.flip-face--back .p-desc a { color: rgba(255,255,255,0.9); }
.flip-face--back .p-desc a { text-decoration: underline; text-underline-offset: 3px; }
/* Light flip fills (sky/mint) — dark text instead, for contrast. */
.principle-card--flip-light .flip-face--back .p-index { color: rgba(1,25,53,0.55); }
.principle-card--flip-light .flip-face--back .p-title,
.principle-card--flip-light .flip-face--back .p-desc,
.principle-card--flip-light .flip-face--back .p-desc p,
.principle-card--flip-light .flip-face--back .p-desc li,
.principle-card--flip-light .flip-face--back .p-desc strong,
.principle-card--flip-light .flip-face--back .p-desc a { color: var(--swc-navy); }
.flip-toggle {
position: absolute; top: 14px; right: 14px; z-index: 2;
width: 34px; height: 34px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center;
background-color: rgba(255,255,255,0.85) !important; background-image: none !important;
border: 1px solid var(--border-subtle) !important; border-radius: 50%; cursor: pointer;
color: var(--swc-blue) !important;
transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.flip-toggle:hover { background-color: #fff !important; }
.flip-toggle-icon {
width: 14px !important; height: 14px !important; display: block !important;
fill: none !important; stroke: currentColor !important; stroke-width: 2.4 !important;
opacity: 1 !important; visibility: visible !important; pointer-events: none;
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.principle-card--flip.is-flipped .flip-toggle-icon,
.principle-card--flip:hover .flip-toggle-icon { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
.principle-card--flip .flip-inner { transition: none; }
.flip-toggle-icon { transition: none; }
}
/* ── Principle cards: carousel layout (optional, "Display as a carousel") ─
A native horizontally-scrolling + scroll-snap track — touch swipe and
keyboard-focused scrolling work with zero JS; the Prev/Next buttons are a
progressive-enhancement layer on top (see site.js). */
.principle-carousel { position: relative; margin-top: var(--space-lg); }
/* Where the shadow-clip breathing room actually belongs: the TRACK.
The track is the scroll container (overflow-x:auto), and a one-axis
scroller clips the OTHER axis too — overflow-x:auto silently promotes
overflow-y to `auto`, so the track hard-clips the vertical hover-lift
shadow (top/bottom) as well as the first/last card's side shadow. The
round-6 attempt put the padding on the outer .viewport wrapper, but the
track clips first, so it never helped. Fix: pad the track itself —
vertical room for the hover shadow (0 18px 38px → ~56px below), inline
room + matching scroll-padding for the edge cards' side shadow — with
negative margins so surrounding layout is unchanged. The viewport no
longer clips anything. */
.principle-carousel-viewport { overflow: visible; }
.principle-carousel-track {
display: flex; gap: var(--space-md);
overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; -ms-overflow-style: none;
padding: 56px var(--gutter);
margin: -56px calc(var(--gutter) * -1);
scroll-padding-inline: var(--gutter);
}
.principle-carousel-track::-webkit-scrollbar { display: none; }
.principle-carousel-slide {
flex: 0 0 calc((100% - (var(--carousel-visible, 3) - 1) * var(--space-md)) / var(--carousel-visible, 3));
min-width: 0; scroll-snap-align: start;
}
.principle-carousel-slide .principle-card { height: 100%; }
/* Arrows overlay the carousel's left/right edges, vertically centred and
straddling into the gutter — "inline with the cards" — instead of sitting
in a row beneath them, which was adding a tall empty band between the
carousel and the next section. */
.principle-carousel-nav {
position: absolute; inset: 0; margin: 0; z-index: 3;
display: flex; align-items: center; justify-content: space-between;
pointer-events: none;
}
/* Arrows: a plain gray circle-chevron icon (Figma #929292) — no fill, border
or shadow — straddling the carousel's left/right edges. */
.carousel-arrow {
pointer-events: auto;
width: 37px; height: 37px; padding: 0 !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: none !important; background-image: none !important; border: 0 !important;
color: #929292 !important; box-shadow: none !important; cursor: pointer;
transition: color var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.carousel-arrow.prev { margin-left: calc(var(--gutter) * -1); }
.carousel-arrow.next { margin-right: calc(var(--gutter) * -1); }
.carousel-arrow svg { width: 37px !important; height: 37px !important; display: block !important; flex: none; fill: none !important; stroke: currentColor !important; }
.carousel-arrow:hover { color: var(--swc-navy) !important; transform: scale(1.06); }
@media (max-width: 720px) {
.principle-carousel-slide { flex-basis: 88%; }
/* keep the arrows fully on-screen on narrow viewports */
.carousel-arrow.prev { margin-left: 0; }
.carousel-arrow.next { margin-right: 0; }
}
/* ── FAQ accordion (native ) ───────────────────────────────────
Each Q&A is its own rounded card (per the wireframe): a light fill when
closed, white + a soft lift when open, with a rounded-square +/× button
that rotates to a × on open. The card grows via the existing Web-Animations
height transition in site.js — which measures `summary.offsetHeight`, so
`.faq-item` keeps zero padding (the summary/panel own the inner spacing)
and the JS manages `overflow` during the animation (so the summary's
keyboard focus ring isn't clipped at rest). */
.faq { max-width: 820px; margin: var(--space-lg) auto 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.faq-item {
background: rgba(255,255,255,0.55);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.faq-item[open] { background: #fff; border-color: transparent; box-shadow: var(--shadow-card); }
.faq-item summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
list-style: none; cursor: pointer; padding: var(--space-md);
font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em;
font-size: 1.15rem; color: var(--color-heading);
transition: color var(--dur-fast) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--swc-blue); }
.faq-item summary .q { margin: 0; font: inherit; font-weight: inherit; color: inherit; }
.faq-item .faq-icon {
flex: none; width: 32px; height: 32px; position: relative;
border-radius: var(--radius); border: 1px solid var(--border-color);
background: #fff; color: var(--swc-blue);
transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.faq-item .faq-icon::before, .faq-item .faq-icon::after {
content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 2px;
}
.faq-item .faq-icon::before { width: 12px; height: 2px; transform: translate(-50%,-50%); }
.faq-item .faq-icon::after { width: 2px; height: 12px; transform: translate(-50%,-50%); transition: transform var(--dur-med) var(--ease-out); }
.faq-item[open] .faq-icon { transform: rotate(135deg); background: var(--swc-blue); border-color: var(--swc-blue); color: #fff; }
.faq-item .faq-a { padding: 0 var(--space-md) var(--space-md); max-width: 68ch; }
.faq-item .faq-a p { color: var(--color-body); line-height: 1.6; margin: 0 0 var(--space-sm); }
.faq-item .faq-a p:last-child { margin-bottom: 0; }
/* ── Gravity Forms — brand skin (Apply / Contact) ───────────────────────*/
.swc-page .gform_wrapper { max-width: 760px; }
.swc-page .gform_wrapper .gform_title { font-family: var(--font-display); text-transform: uppercase; color: var(--color-heading); }
.swc-page .gform_wrapper .gfield_label {
font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-small);
color: var(--color-heading); letter-spacing: 0.01em;
}
.swc-page .gform_wrapper .gfield { margin-bottom: var(--space-md); }
.swc-page .gform_wrapper input[type="text"],
.swc-page .gform_wrapper input[type="email"],
.swc-page .gform_wrapper input[type="url"],
.swc-page .gform_wrapper input[type="tel"],
.swc-page .gform_wrapper select,
.swc-page .gform_wrapper textarea {
width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--color-heading);
padding: 12px 16px; border: 1px solid var(--border-color); border-radius: var(--radius);
background-color: #fff; background-image: none !important; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.swc-page .gform_wrapper input:hover,
.swc-page .gform_wrapper select:hover,
.swc-page .gform_wrapper textarea:hover,
.swc-page .gform_wrapper input:focus,
.swc-page .gform_wrapper select:focus,
.swc-page .gform_wrapper textarea:focus {
background-image: none !important;
outline: none; border-color: var(--swc-blue); box-shadow: 0 0 0 4px rgba(0,79,163,0.12);
}
.swc-page .gform_wrapper .gform_footer input[type="submit"],
.swc-page .gform_wrapper .gform_footer button {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 16px; line-height: 1;
padding: 15px 32px; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer;
background: var(--swc-blue); color: #fff; box-shadow: var(--shadow-btn);
transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.swc-page .gform_wrapper .gform_footer input[type="submit"]:hover { background: var(--swc-navy); transform: translateY(-3px); box-shadow: var(--shadow-btn-hover); }
.swc-page .gform_wrapper .gfield_required { color: var(--swc-blue); }
.swc-page .gform_wrapper .gform_validation_errors,
.swc-page .gform_wrapper .validation_message { border-radius: var(--radius); }
/* A form embedded on the Join page gets a light card frame + anchor offset */
.apply-form-section { padding: var(--space-xl) 0; }
.apply-form-section .shell { max-width: 860px; }
.apply-form-section .form-card {
background: var(--surface-card); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-card);
margin-top: var(--space-lg);
}
:target { scroll-margin-top: 96px; }
/* ── Inner-page content flow ────────────────────────────────────────────
SWC section blocks (, incl. .hero/.page-hero) run full-bleed and
own their width via .shell. Everything else defaults to a centered
readable column — this used to be an allowlist of specific core-block
tags/classes, which silently let any block NOT on the list (Columns,
Group, any Spectra container) span full-bleed with no constraint at all.
Inverted: every direct child is constrained by default, and only our own
full-bleed elements (a , or an explicit alignfull/alignwide)
opt out — so new block types just work without a selector-list update.
The max-widths below are forced (!important) because Astra's "Page Builder"
template emits an inline