/* ============================================================================
theme.css — single styling source of truth for the entire site.
To REBRAND: edit site-config.php → 'theme' (primary, accent, optional
neutral and bg). bootstrap.php injects those as --brand-* custom props
into ; everything else in this file derives from them via color-mix.
To restyle a section, edit the section blocks below.
============================================================================ */
:root {
/* Brand seeds — DEFAULTS only. bootstrap.php overrides these from config.
Don't edit values here for a single client; edit site-config.php → 'theme'. */
--brand-primary: #1b3f8f; /* FCA royal blue (cross) */
--brand-accent: #f3b019; /* FCA gold (laurel + stripe) */
--brand-maroon: #7a2531; /* FCA maroon (banner) */
--brand-neutral: #14181f;
--brand-bg: #ffffff;
--brand-on-primary: #ffffff; /* text color that reads on top of --brand-primary */
/* Brand — derived (do not hardcode brand colors below this line) */
--color-primary: var(--brand-primary);
--color-primary-hover: color-mix(in oklch, var(--brand-primary) 85%, black);
--color-primary-soft: color-mix(in oklch, var(--brand-primary) 12%, transparent);
--color-primary-ring: color-mix(in oklch, var(--brand-primary) 35%, transparent);
--color-accent: var(--brand-accent);
--color-accent-soft: color-mix(in oklch, var(--brand-accent) 12%, transparent);
/* Neutrals — derived from --brand-neutral + --brand-bg */
--color-text: var(--brand-neutral);
--color-text-muted: color-mix(in oklch, var(--brand-neutral) 60%, var(--brand-bg));
--color-bg: var(--brand-bg);
--color-bg-alt: color-mix(in oklch, var(--brand-neutral) 4%, var(--brand-bg));
--color-bg-elev: var(--brand-bg);
--color-border: color-mix(in oklch, var(--brand-neutral) 10%, var(--brand-bg));
/* Status */
--color-success: #0e9c6d;
--color-error: #e0413a;
/* Typography — system stack: zero load time, ages perfectly */
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Oswald", "Inter", "Arial Narrow", Impact, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--fs-display: clamp(2.75rem, 5vw + 1rem, 4.75rem);
--fs-h1: clamp(2.25rem, 4vw + 1rem, 3.5rem);
--fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
--fs-h3: clamp(1.375rem, 1.5vw + 1rem, 1.625rem);
--fs-h4: 1.0625rem;
--fs-body: 1rem;
--fs-lead: 1.1875rem;
--fs-small: 0.875rem;
--fs-eyebrow: 0.8125rem;
--lh-tight: 1.08;
--lh-snug: 1.3;
--lh-normal: 1.65;
/* Spacing scale */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem;
--sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
--sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem;
--sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;
--sp-32: 8rem;
/* Layout */
--content-max: 72rem;
--reading-max: 42rem;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
/* Header */
--nav-height: 72px;
--nav-bg: color-mix(in oklch, var(--brand-bg) 78%, transparent);
--nav-blur: 16px;
--nav-border: color-mix(in oklch, var(--brand-neutral) 8%, transparent);
/* Shadows — tinted with the brand neutral so they match cool/warm palettes */
--shadow-sm: 0 1px 2px color-mix(in oklch, var(--brand-neutral) 4%, transparent);
--shadow-md: 0 4px 16px color-mix(in oklch, var(--brand-neutral) 6%, transparent),
0 1px 3px color-mix(in oklch, var(--brand-neutral) 4%, transparent);
--shadow-lg: 0 24px 48px -12px color-mix(in oklch, var(--brand-neutral) 18%, transparent);
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 150ms;
--dur-base: 250ms;
--dur-slow: 500ms;
}
/* Dark-mode auto-flip intentionally disabled for FCA - the brand reads in
royal blue / gold / maroon on white consistently across all devices.
Light-only is declared, not just implied: html { color-scheme: light } here plus
in header.php, so native form
controls and scrollbars stay light too. No theme_dark seeds in site-config. */
/* ============================================================================
Reset + base
============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-height) + 1rem); }
body {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-normal);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
.skip-link {
position: absolute; left: -9999px;
background: var(--color-primary); color: var(--brand-on-primary);
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius-sm);
font-weight: 600;
z-index: 100;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }
/* ============================================================================
Typography
============================================================================ */
h1, h2, h3, h4 {
font-family: var(--font-display);
line-height: var(--lh-tight);
letter-spacing: -0.025em;
font-weight: 750;
color: var(--color-text);
}
h1 { font-size: var(--fs-h1); margin-block: var(--sp-6) var(--sp-4); }
h2 { font-size: var(--fs-h2); margin-block: var(--sp-12) var(--sp-5); letter-spacing: -0.022em; }
h3 { font-size: var(--fs-h3); margin-block: var(--sp-8) var(--sp-3); letter-spacing: -0.018em; }
h4 { font-size: var(--fs-h4); margin-block: var(--sp-5) var(--sp-2); letter-spacing: -0.005em; font-weight: 700; }
p { margin-block: 0 var(--sp-4); max-width: 70ch; }
a {
color: var(--color-primary);
text-decoration: none;
text-underline-offset: 3px;
transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--color-primary-hover); text-decoration: underline; }
a:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
border-radius: 2px;
}
::selection { background: var(--color-primary); color: var(--brand-on-primary); }
code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--color-bg-alt);
padding: 0.15em 0.4em;
border-radius: 4px;
border: 1px solid var(--color-border);
}
/* ============================================================================
Layout
============================================================================ */
.container {
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--sp-6);
}
main { display: block; min-height: 60vh; }
section + section { margin-top: var(--sp-12); }
.eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: var(--fs-eyebrow);
font-weight: 600;
color: var(--color-primary);
margin-bottom: var(--sp-3);
}
/* Eyebrow sits directly on top of its heading: kill the heading's large default
top margin so the gap is just the eyebrow's margin-bottom (site-wide, matches
the .section-title blocks). Fixes the oversized eyebrow-to-heading gap. */
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3, .eyebrow + h4 { margin-top: 0; }
/* ============================================================================
Header / nav
============================================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 50;
height: var(--nav-height);
background: var(--nav-bg);
backdrop-filter: blur(var(--nav-blur)) saturate(180%);
-webkit-backdrop-filter: blur(var(--nav-blur)) saturate(180%);
border-bottom: 1px solid var(--nav-border);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--sp-6);
}
.brand {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.1875rem;
letter-spacing: -0.025em;
color: var(--color-text);
display: inline-flex;
align-items: center;
gap: var(--sp-3);
}
.brand:hover { text-decoration: none; color: var(--color-primary); }
.brand__mark { display: inline-flex; flex-shrink: 0; }
.brand__mark svg { width: 32px; height: 32px; border-radius: 9px; }
.nav-desktop { display: none; }
@media (min-width: 880px) {
.nav-desktop { display: flex; align-items: center; gap: var(--sp-2); }
}
.nav-desktop ul {
list-style: none; padding: 0; margin: 0;
display: flex; align-items: center; gap: var(--sp-1);
}
.nav-desktop a {
color: var(--color-text);
font-weight: 500;
font-size: 0.9375rem;
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-sm);
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-desktop a:hover {
background: var(--color-bg-alt);
color: var(--color-primary);
text-decoration: none;
}
.nav-desktop a[aria-current="page"] { color: var(--color-primary); }
.nav-desktop a.cta {
background: var(--color-primary);
color: var(--brand-on-primary);
margin-left: var(--sp-3);
box-shadow: 0 1px 2px color-mix(in oklch, var(--brand-primary) 30%, transparent);
}
.nav-desktop a.cta:hover {
background: var(--color-primary-hover);
color: var(--brand-on-primary);
box-shadow: 0 4px 12px color-mix(in oklch, var(--brand-primary) 35%, transparent);
transform: translateY(-1px);
}
/* Desktop dropdowns */
.has-dropdown { position: relative; }
.has-dropdown > a::after {
content: "";
display: inline-block;
width: 0; height: 0;
margin-left: 0.4em;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
opacity: 0.55;
vertical-align: middle;
}
.dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 240px;
background: var(--color-bg-elev);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: var(--sp-2);
list-style: none !important;
display: flex !important;
flex-direction: column;
gap: 2px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--dur-base) var(--ease),
transform var(--dur-base) var(--ease-out),
visibility 0s linear var(--dur-base);
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
.dropdown a { display: block; padding: var(--sp-2) var(--sp-3); font-size: 0.9375rem; }
/* Hamburger */
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border: 1px solid var(--color-border);
background: transparent;
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--color-text);
}
.nav-toggle:hover { background: var(--color-bg-alt); }
@media (min-width: 880px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 22px; height: 22px; }
/* Mobile drawer */
.nav-mobile {
position: fixed;
inset: 0 0 0 auto;
width: min(360px, 90vw);
height: 100vh;
margin: 0;
border: none;
padding: var(--sp-12) var(--sp-6) var(--sp-6);
background: var(--color-bg);
border-left: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
color: var(--color-text);
}
.nav-mobile::backdrop { background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
.nav-mobile__close {
position: absolute; top: var(--sp-3); right: var(--sp-3);
width: 40px; height: 40px;
background: transparent; border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text);
}
.nav-mobile__close:hover { background: var(--color-bg-alt); }
.nav-mobile ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.nav-mobile a {
display: block;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius-sm);
color: var(--color-text);
font-weight: 500;
font-size: 1rem;
}
.nav-mobile a:hover { background: var(--color-bg-alt); text-decoration: none; }
.nav-mobile a[aria-current="page"] { color: var(--color-primary); background: var(--color-bg-alt); }
.nav-mobile details summary {
padding: var(--sp-3) var(--sp-4);
cursor: pointer;
border-radius: var(--radius-sm);
font-weight: 500;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-mobile details summary::-webkit-details-marker { display: none; }
.nav-mobile details summary::after {
content: "+";
font-size: 1.25rem;
font-weight: 400;
color: var(--color-text-muted);
transition: transform var(--dur-base) var(--ease);
}
.nav-mobile details[open] summary::after { transform: rotate(45deg); }
.nav-mobile details[open] summary { color: var(--color-primary); }
.nav-mobile details ul { padding-left: var(--sp-4); margin-top: var(--sp-1); margin-bottom: var(--sp-3); }
/* ============================================================================
Footer
============================================================================ */
.site-footer {
background: var(--color-bg-alt);
border-top: 1px solid var(--color-border);
padding-block: var(--sp-20) var(--sp-8);
margin-top: var(--sp-32);
}
.site-footer__grid {
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: var(--sp-12);
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--sp-6);
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__tagline { margin-top: var(--sp-3); color: var(--color-text-muted); }
.site-footer__address {
font-style: normal;
margin-top: var(--sp-4);
color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.7;
}
.site-footer h4 {
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
margin: 0 0 var(--sp-4);
font-weight: 600;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer a { color: var(--color-text); font-size: 0.9375rem; }
.site-footer a:hover { color: var(--color-primary); }
.site-footer__bottom {
max-width: var(--content-max);
margin: var(--sp-16) auto 0;
padding: var(--sp-6) var(--sp-6) 0;
border-top: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-4);
font-size: var(--fs-small);
color: var(--color-text-muted);
}
/* ============================================================================
Buttons
============================================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-6);
font-size: 0.9375rem;
font-weight: 600;
border-radius: 999px; /* pill — matches the hero CTAs site-wide */
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
text-decoration: none;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-primary {
background: var(--color-primary);
color: var(--brand-on-primary);
/* Stronger resting shadow so primary buttons feel raised, not flat. (2026-06-18) */
box-shadow: 0 4px 12px color-mix(in oklch, var(--brand-primary) 32%, transparent);
}
.btn-primary:hover {
background: var(--color-primary-hover);
color: var(--brand-on-primary);
box-shadow: 0 12px 22px color-mix(in oklch, var(--brand-primary) 32%, transparent);
}
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { background: var(--color-bg-alt); }
.btn-lg { padding: var(--sp-4) var(--sp-8); font-size: 1rem; }
/* ============================================================================
Forms
============================================================================ */
.form { display: grid; gap: var(--sp-5); max-width: 36rem; }
.form-row { display: grid; gap: var(--sp-2); }
.form label { font-weight: 500; font-size: 0.9375rem; }
.form input, .form textarea, .form select {
width: 100%;
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form input:focus, .form textarea:focus, .form select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand-primary) 18%, transparent);
}
.form textarea { min-height: 140px; resize: vertical; }
.form .hp { position: absolute; left: -10000px; opacity: 0; pointer-events: none; }
.form-help { font-size: var(--fs-small); color: var(--color-text-muted); }
.form-status { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); display: none; font-size: 0.9375rem; }
.form-status[data-state="ok"] { display: block; background: color-mix(in oklch, var(--color-success) 12%, transparent); color: var(--color-success); border: 1px solid color-mix(in oklch, var(--color-success) 30%, transparent); }
.form-status[data-state="error"] { display: block; background: color-mix(in oklch, var(--color-error) 12%, transparent); color: var(--color-error); border: 1px solid color-mix(in oklch, var(--color-error) 30%, transparent); }
/* ============================================================================
Hero — the "beautiful" landing section
============================================================================ */
.hero {
position: relative;
isolation: isolate;
/* Pull the hero up so its background sits BEHIND the floating dock nav
(no hard cut-off line). The extra top padding cancels the negative
margin so the hero content stays in its original visual position. */
margin-top: calc(-1 * var(--nav-height));
padding-block: calc(var(--sp-24) + var(--nav-height)) var(--sp-20);
text-align: center;
overflow: hidden;
}
/* Decorative gradient glow (a real element, not a pseudo, so the cursor-parallax
can transform just this layer in JS - no whole-hero style recalc, no blur re-composite). */
.hero__glow {
position: absolute;
inset: -20% -10%;
z-index: -2;
pointer-events: none;
background:
radial-gradient(45% 55% at 18% 20%, color-mix(in oklch, var(--brand-primary) 20%, transparent), transparent 70%),
radial-gradient(40% 50% at 85% 25%, color-mix(in oklch, var(--brand-accent) 16%, transparent), transparent 70%),
radial-gradient(50% 50% at 50% 110%, color-mix(in oklch, var(--brand-primary) 12%, transparent), transparent 70%);
transition: transform 0.4s var(--ease-out);
will-change: transform;
}
/* Inner-page heroes have no .hero__glow div — give them the same soft brand
glow so every page's hero matches the homepage reference. :has() keeps the
home hero (which already has the div) from doubling up. */
.hero:not(:has(.hero__glow))::before {
content: "";
position: absolute;
inset: -20% -10%;
z-index: -2;
pointer-events: none;
background:
radial-gradient(45% 55% at 18% 20%, color-mix(in oklch, var(--brand-primary) 20%, transparent), transparent 70%),
radial-gradient(40% 50% at 85% 25%, color-mix(in oklch, var(--brand-accent) 16%, transparent), transparent 70%),
radial-gradient(50% 50% at 50% 110%, color-mix(in oklch, var(--brand-primary) 12%, transparent), transparent 70%);
}
.hero::after {
/* Subtle organic grain texture (no grid). Whisper-faint, faded at the edges. */
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.05;
-webkit-mask-image: radial-gradient(ellipse at center, black, transparent 80%);
mask-image: radial-gradient(ellipse at center, black, transparent 80%);
}
.hero h1 {
font-size: var(--fs-display);
letter-spacing: -0.035em;
line-height: 1.04;
font-weight: 800;
margin-block: 0 var(--sp-6);
max-width: 18ch;
margin-inline: auto;
}
.hero p.lead {
font-size: var(--fs-lead);
color: var(--color-text-muted);
max-width: 52ch;
margin-inline: auto;
margin-bottom: var(--sp-8);
line-height: 1.55;
}
.hero__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.hero__highlight {
background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-accent) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ============================================================================
Cards / sections
============================================================================ */
.section-title {
text-align: center;
margin-bottom: var(--sp-10);
}
.section-title h2 { margin-top: 0; }
.section-title p { margin-inline: auto; color: var(--color-text-muted); font-size: var(--fs-lead); }
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--sp-5);
}
.card {
position: relative;
padding: var(--sp-8) var(--sp-6);
/* Stronger resting border (was 10% neutral — nearly invisible) + a resting
shadow so cards read as lifted at rest, not flat outlines. (2026-06-18) */
border: 1px solid color-mix(in oklch, var(--brand-neutral) 18%, var(--brand-bg));
border-radius: var(--radius-lg);
background: var(--color-bg-elev);
box-shadow: var(--shadow-md);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.card h3 { margin-top: var(--sp-3); margin-bottom: var(--sp-2); }
.card p { color: var(--color-text-muted); margin-bottom: 0; }
.card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--color-primary-soft), var(--color-accent-soft));
color: var(--color-primary);
}
.card__icon svg { width: 22px; height: 22px; }
/* Stats strip */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--sp-6);
padding: var(--sp-10);
background: var(--color-bg-alt);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
text-align: center;
}
.stats__num {
font-family: var(--font-display);
font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stats__label { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: var(--sp-1); }
/* CTA section */
.cta-band {
text-align: center;
padding: var(--sp-16) var(--sp-6);
background: linear-gradient(135deg, var(--color-primary), color-mix(in oklch, var(--color-primary) 70%, var(--color-accent)));
color: var(--brand-on-primary);
border-radius: var(--radius-xl);
margin-block: var(--sp-16);
}
.cta-band h2 { color: var(--brand-on-primary); margin-top: 0; }
.cta-band p { color: color-mix(in oklch, var(--brand-on-primary) 85%, transparent); margin-inline: auto; max-width: 50ch; font-size: var(--fs-lead); }
.cta-band .btn-primary { background: var(--brand-on-primary); color: var(--color-primary); }
.cta-band .btn-primary:hover { background: color-mix(in oklch, var(--brand-on-primary) 90%, var(--brand-neutral)); color: var(--color-primary-hover); }
/* Ghost CTA on the blue band: keep white text legible on hover (don't flip to the light bg) */
.cta-band .btn-ghost:hover { background: color-mix(in oklch, var(--brand-on-primary) 16%, transparent); }
/* Reading content (about/service body) */
.prose { max-width: var(--reading-max); margin-inline: auto; }
.prose h2:first-child, .prose h1:first-child { margin-top: 0; }
/* Anchor offset for sticky header */
:target { scroll-margin-top: calc(var(--nav-height) + var(--sp-6)); }
/* ============================================================================
Breadcrumbs
============================================================================ */
.breadcrumbs {
font-size: var(--fs-small);
color: var(--color-text-muted);
margin-top: var(--sp-12);
margin-bottom: 0;
}
.breadcrumbs ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
align-items: center;
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs li:not(:last-child)::after {
content: "›";
color: var(--color-text-muted);
opacity: 0.55;
}
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 500; }
/* ============================================================================
Accessibility & motion
============================================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ============================================================================
FCA brand layer — Saline River Fellowship of Christian Athletes
Royal blue #1b3f8f · Gold #f3b019 · Maroon #7a2531.
Built on the native Spark design system above; adds FCA components + Oswald.
============================================================================ */
/* Oswald display tuning (condensed font wants near-zero tracking) */
h1, h2, h3, h4 { letter-spacing: 0; font-weight: 600; text-wrap: balance; }
.hero h1 { letter-spacing: -0.005em; font-weight: 700; line-height: 1.05; max-width: 20ch; }
.stats__num { font-weight: 700; }
/* Hero highlight recolored blue -> maroon (gold-on-white read too light) */
.hero__highlight {
background: linear-gradient(120deg, var(--color-primary) 0%, var(--brand-maroon) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* Brand mark = real FCA logo */
.brand__logo { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; }
.brand__name { font-weight: 600; letter-spacing: 0.01em; line-height: 1.05; }
.brand__name small {
display: block; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--color-text-muted); font-family: var(--font-sans);
}
/* Full-bleed bands + section helpers */
.band { padding-block: var(--sp-20); }
.band--muted { background: var(--color-bg-alt); }
.band--primary {
position: relative;
isolation: isolate;
background: linear-gradient(135deg, var(--color-primary), color-mix(in oklch, var(--color-primary) 62%, black));
color: var(--brand-on-primary);
}
.band--primary::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.09; mix-blend-mode: overlay;
}
.band--primary h2, .band--primary h3 { color: var(--brand-on-primary); }
.band--primary p { color: color-mix(in oklch, var(--brand-on-primary) 86%, transparent); }
.band--primary .eyebrow { color: var(--brand-on-primary); opacity: 0.85; }
.lead { font-size: var(--fs-lead); color: var(--color-text-muted); line-height: 1.55; }
.section-title .lead { max-width: 56ch; margin-inline: auto; }
/* center: text AND the block itself. margin-inline:auto is required because the
base `p { max-width: 70ch }` leaves a constrained anchored left, so
text-align alone only centers within that left box. (2026-06-18) */
.center { text-align: center; margin-inline: auto; }
/* Media slot — placeholder for the photos/video the admin adds later */
.media-slot {
position: relative; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: var(--sp-3);
aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
border: 2px dashed color-mix(in oklch, var(--color-primary) 35%, var(--color-border));
background:
radial-gradient(120% 120% at 0% 0%, var(--color-primary-soft), transparent 60%),
radial-gradient(120% 120% at 100% 100%, var(--color-accent-soft), transparent 60%),
var(--color-bg-alt);
color: var(--color-primary); text-align: center; overflow: hidden;
}
.media-slot svg { width: 48px; height: 48px; opacity: 0.85; }
.media-slot__label { font-size: var(--fs-small); color: var(--color-text-muted); padding-inline: var(--sp-5); max-width: 36ch; }
.media-slot--tall { aspect-ratio: 4 / 5; }
/* Two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: var(--sp-8); } }
/* "Who we are" intro: pull the headline up close under the eyebrow (kill the large default h2 top margin) */
#intro .eyebrow { margin-bottom: var(--sp-2); }
#intro h2 { margin-top: 0; }
.hero__logo { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto var(--sp-5); box-shadow: var(--shadow-md); }
.hero__media { max-width: 60rem; margin: var(--sp-12) auto 0; }
/* Card media strip + tags */
.card__media { height: 150px; border-radius: var(--radius-md); margin-bottom: var(--sp-5); }
.card__tag { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--color-primary); }
img.card__media { width: 100%; object-fit: cover; object-position: center 30%; }
.card .bio { margin-top: var(--sp-3); }
.card .bio > summary { list-style: none; cursor: pointer; color: var(--color-primary); font-weight: 600; font-size: var(--fs-small); display: inline-flex; align-items: center; gap: .3em; width: max-content; }
.card .bio > summary::-webkit-details-marker { display: none; }
.card .bio > summary::after { content: "\25BE"; font-size: .8em; }
.card .bio[open] > summary::after { content: "\25B4"; }
.card .bio .less { display: none; }
.card .bio[open] .more { display: none; }
.card .bio[open] .less { display: inline; }
.card .bio p { margin-top: var(--sp-3); }
/* ---- Team member cards (2026-08-06) -------------------------------------
Cason asked that no one on Our Team be bigger than anyone else, and that
the full photos be visible rather than cropped. Two things follow:
1. The 150px .card__media strip above is a ~2.2:1 letterbox that cuts heads
off. Person cards get a 4/3 frame instead — which is the NATIVE ratio of
three of the four photos (1000x750), so those crop by nothing at all.
Only Cason's 900x1125 portrait crops, top and bottom, and `center 25%`
keeps all four faces in his family shot.
2. An explicit 4-up grid, not auto-fit. auto-fit at minmax(280px) leaves a
3+1 orphan in a 72rem container, and one person sitting alone on a
second row is exactly the "standing out" being complained about.
Scoped to .card--person so the icon cards on the other four pages are
untouched. Everything else — border, shadow, hover lift, .bio read-more —
is inherited from .card unchanged.
------------------------------------------------------------------------ */
.cards--team { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .cards--team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards--team { grid-template-columns: 1fr; } }
.card--person { display: flex; flex-direction: column; }
.card--person .card__media { height: auto; aspect-ratio: 4 / 3; object-position: center 25%; }
.card--person h3 { font-size: var(--fs-h4); }
/* Pins every "Read more" to the foot of its card so the four line up even when
the teaser paragraphs run to different lengths. Beats `.card .bio` above on
source order (equal specificity). */
.card--person .bio { margin-top: auto; padding-top: var(--sp-3); }
/* The "Join the team" CTA that used to close the director band. `max-width` and
`margin-inline: auto` are both required: the global reading-width rule caps
at --reading-max, so text-align:center alone centres the button inside a
672px box pinned to the left edge, not inside the container. */
.team-cta { max-width: none; margin: var(--sp-10) auto 0; text-align: center; }
/* Monthly spotlight (Coach/Volunteer of the Month) */
.spotlight__photo { position: relative; }
.spotlight__badge { position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 2; background: var(--brand-accent); color: #3a2a00; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); letter-spacing: .02em; padding: .4em .95em; border-radius: 999px; box-shadow: var(--shadow-md); }
.spotlight__quote { margin: var(--sp-5) 0; padding-left: var(--sp-4); border-left: 3px solid var(--brand-accent); font-style: italic; color: var(--color-text-muted); }
/* Areas We Serve — city cards with school link lists */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 880px) { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .areas { grid-template-columns: 1fr; } }
.area-card { padding: var(--sp-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-elev); }
.area-card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.area-card__head .pin { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); flex-shrink: 0; }
.area-card__head h3 { margin: 0; font-size: var(--fs-h3); }
.area-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.area-card li a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--color-text); font-weight: 500; }
.area-card li a:hover { background: var(--color-bg-alt); color: var(--color-primary); text-decoration: none; }
.area-card li a span { font-size: var(--fs-small); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 4px; }
.area-card > .btn { width: 100%; justify-content: center; gap: var(--sp-2); }
/* District cards (huddle schedules): 5 cards, so a centred flex row instead of
the grid - the short second row sits in the middle, not hard left. The bottom
margin keeps the homepage cards off the Scripture band, which has no top margin. */
.areas--districts { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: var(--sp-12); }
.areas--districts > .area-card { flex: 0 1 calc((100% - 2 * var(--sp-5)) / 3); }
@media (max-width: 880px) { .areas--districts > .area-card { flex-basis: calc((100% - var(--sp-5)) / 2); } }
@media (max-width: 560px) { .areas--districts > .area-card { flex-basis: 100%; } }
/* Events list */
.events { display: flex; flex-direction: column; gap: var(--sp-4); }
.event { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5); align-items: center; padding: var(--sp-5) var(--sp-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-elev); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.event:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.event__date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary), color-mix(in oklch, var(--color-primary) 66%, black)); color: var(--brand-on-primary); line-height: 1; flex-shrink: 0; }
.event__date .m { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.event__date .d { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.event__body h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-h4); }
.event__body p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-small); }
@media (max-width: 640px) { .event { grid-template-columns: auto 1fr; } .event .btn { grid-column: 1 / -1; } }
/* Featured event card (Fields of Faith 2026, includes/fof-feature.php): Cason's
banner + event facts + his vertical info video, in one card above the events
list. The video gets its own column beside the banner + details. */
.fof { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--sp-8); align-items: center; margin-bottom: var(--sp-6); padding: var(--sp-8); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg-elev); box-shadow: var(--shadow-lg); }
.fof__banner { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.fof__body { margin-top: var(--sp-6); }
.fof__body h3 { margin: 0 0 var(--sp-4); }
.fof__facts { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.fof__facts li { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: 999px; background: var(--color-primary-soft); color: var(--color-text); font-weight: 600; font-size: var(--fs-small); white-space: nowrap; }
.fof__facts svg { width: 18px; height: 18px; flex: none; color: var(--color-primary); }
.fof__text { color: var(--color-text-muted); margin: 0; max-width: 60ch; }
.fof__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.fof .video-facade--portrait { max-width: none; width: 100%; margin: 0; }
@media (max-width: 900px) {
.fof { grid-template-columns: 1fr; padding: var(--sp-5); gap: var(--sp-6); }
.fof__body { margin-top: var(--sp-5); }
.fof__video { width: 100%; max-width: 20rem; margin-inline: auto; }
}
/* Sponsors strip */
.sponsors { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); }
.sponsor { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: var(--sp-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elev); color: var(--color-text-muted); font-weight: 600; text-align: center; font-size: var(--fs-small); }
/* Sponsor logos, sized OPTICALLY rather than to one fixed height (2026-08-06).
These four marks range from 4.0:1 (ACDI) to 0.93:1 (Fence Brokers); a single
max-height makes the tall one postage-stamp sized and lets the solid-fill one
dominate the row. Each class is a weight adjustment, not a new look.
No grayscale-on-hover filter: these are real businesses giving to a nonprofit
and their marks should read in full colour. */
.sponsor img { max-width: 100%; width: auto; height: auto; object-fit: contain; max-height: 54px; }
.sponsor--wide img { max-height: 62px; } /* detailed wide mark (Baldwin & Shell) */
.sponsor--block img { max-height: 40px; } /* solid colour block (ACDI) */
.sponsor--tall img { max-height: 76px; } /* upright badge (Fence Brokers) */
/* Scripture / verse band */
.verse blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.4vw + 1rem, 2.25rem); line-height: 1.25; max-width: 26ch; margin: 0 auto var(--sp-4); }
.verse cite { font-style: normal; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85; }
/* Testimonials */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); }
.quote { padding: var(--sp-8); border-radius: var(--radius-lg); background: var(--color-bg-elev); border: 1px solid var(--color-border); }
.quote p { font-size: var(--fs-lead); color: var(--color-text); margin-bottom: var(--sp-3); }
.quote cite { font-style: normal; font-size: var(--fs-small); color: var(--color-text-muted); font-weight: 600; }
/* Pill row (areas teaser / quick links) */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-5); border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg-elev); font-weight: 600; color: var(--color-text); }
.pill:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
/* Footer logo + agency credit */
.site-footer .brand__logo { width: 42px; height: 42px; }
.agency-credit a { color: var(--color-text-muted); text-decoration: underline; }
.agency-credit a:hover { color: var(--color-primary); }
/* Reveal-on-scroll (progressive enhancement; no-JS shows everything) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }
/* ============================================================================
Interactive: hero media carousel (auto-rotating photos/video slides)
============================================================================ */
.carousel { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.carousel__track { position: relative; aspect-ratio: 16 / 9; }
.carousel__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease); will-change: opacity; }
.carousel__slide.is-active { opacity: 1; visibility: visible; }
/* Placeholder slide panels (admin replaces each with a real ![]()
or video embed) */
.slide-panel { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); text-align: center; padding: var(--sp-8); color: var(--brand-on-primary); }
.slide-panel svg { width: 52px; height: 52px; }
.slide-panel__cap { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.slide-panel__note { font-size: var(--fs-small); opacity: 0.85; max-width: 34ch; }
.slide-panel--a { background: linear-gradient(135deg, var(--color-primary), color-mix(in oklch, var(--color-primary) 58%, var(--brand-maroon))); }
.slide-panel--b { background: linear-gradient(135deg, var(--brand-maroon), color-mix(in oklch, var(--brand-maroon) 55%, var(--color-primary))); }
.slide-panel--c { background: linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 78%, black), var(--color-primary)); }
.slide-panel--gold { background: linear-gradient(135deg, var(--color-accent), color-mix(in oklch, var(--color-accent) 62%, var(--brand-maroon))); color: #3a2410; }
.carousel__play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: none; background: color-mix(in oklch, #fff 90%, transparent); color: var(--color-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform var(--dur-fast) var(--ease); z-index: 2; }
.carousel__play:hover { transform: scale(1.06); }
.carousel__play svg { width: 32px; height: 32px; margin-left: 4px; }
.carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: color-mix(in oklch, #fff 82%, transparent); color: #1a1a1a; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 3; transition: background var(--dur-fast) var(--ease); }
.carousel__nav:hover { background: #fff; }
.carousel__nav--prev { left: var(--sp-4); }
.carousel__nav--next { right: var(--sp-4); }
.carousel__nav svg { width: 22px; height: 22px; display: block; }
.carousel__pause { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 36px; height: 36px; border-radius: 50%; border: none; background: color-mix(in oklch, #fff 82%, transparent); color: #1a1a1a; cursor: pointer; z-index: 3; display: grid; place-items: center; }
.carousel__pause svg { width: 16px; height: 16px; }
.carousel__dots { position: absolute; bottom: var(--sp-4); left: 0; right: 0; display: flex; justify-content: center; gap: var(--sp-2); z-index: 3; }
.carousel__dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: color-mix(in oklch, #fff 55%, transparent); cursor: pointer; padding: 0; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.carousel__dot.is-active { background: #fff; transform: scale(1.3); }
/* Standalone click-to-play video facade (e.g. Fields of Faith on What is FCA).
Brand-gradient poster + center play button; app.js swaps in the Vimeo iframe. */
.video-facade {
position: relative; aspect-ratio: 16 / 9; max-width: 60rem; margin-inline: auto;
border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
box-shadow: var(--shadow-lg); display: grid; place-items: center; gap: var(--sp-4);
background: linear-gradient(135deg, var(--color-primary), color-mix(in oklch, var(--color-primary) 58%, var(--brand-maroon)));
color: var(--brand-on-primary); text-align: center;
}
.video-facade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 45%, transparent 42%, rgba(0,0,0,.22)); }
.video-facade__play {
position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%;
background: color-mix(in oklch, #fff 90%, transparent); color: var(--color-primary);
display: grid; place-items: center; box-shadow: var(--shadow-lg);
transition: transform var(--dur-fast) var(--ease);
}
.video-facade__cap { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.video-facade:hover .video-facade__play, .video-facade:focus-visible .video-facade__play { transform: scale(1.06); }
.video-facade__play svg { width: 32px; height: 32px; margin-left: 4px; }
.video-facade__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.video-facade.is-playing { cursor: default; background: #000; }
.video-facade.is-playing::after { display: none; }
/* --bar: controls in a bottom-left bar instead of dead centre. Use on any facade
whose poster is a talking-head frame - the subject is centred in shot, so a
centred play button lands squarely on someone's face. The centre stays clear,
and the ::after radial is swapped for a bottom scrim to keep the caption
legible over an arbitrary photo. */
.video-facade--bar {
display: flex; align-items: flex-end; justify-content: flex-start;
gap: var(--sp-3); padding: var(--sp-4); text-align: left;
}
/* Scrim strength is a contrast requirement, not decoration: the caption is white
and the poster underneath is arbitrary. Tuned against the brightest poster we
ship (stadium-lit turf) - at .62 that caption measured 3.79:1 and failed AA.
axe cannot resolve contrast over a photo, so it reports nothing here: measure
by hand before weakening this. */
.video-facade--bar::after { background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.64) 26%, rgba(0,0,0,.16) 58%, transparent 80%); }
.video-facade--bar .video-facade__play { width: 48px; height: 48px; flex: none; }
.video-facade--bar .video-facade__play svg { width: 20px; height: 20px; margin-left: 2px; }
.video-facade--bar .video-facade__cap { font-size: 1.05rem; padding-bottom: 11px; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
/* Several facades side by side (e.g. Stories on What is FCA). --grid only drops
the 60rem cap above so each facade fills its cell; it composes with --bar. */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: start; }
.video-facade--grid { max-width: none; margin-inline: 0; }
/* --portrait: vertical (9:16) phone video, e.g. Fields of Faith info on Get Involved.
The poster is shown whole (contain) over the facade's brand gradient, so a
landscape title card does not get its sides cropped off. */
.video-facade--portrait { aspect-ratio: 9 / 16; max-width: 22rem; margin-top: var(--sp-8); }
.video-facade--portrait .video-facade__poster { object-fit: contain; }
@media (max-width: 62rem) { .video-grid { grid-template-columns: 1fr; max-width: 40rem; margin-inline: auto; } }
/* Real photo inside a carousel slide (fills the 16:9 slide) + caption chip. */
.carousel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carousel__cap {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: left;
padding: var(--sp-10) var(--sp-6) var(--sp-5); color: #fff;
font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
background: linear-gradient(to top, rgba(0,0,0,.62), transparent);
}
/* Framed photo (rounded) for the page media slots, replaces .media-slot. */
.media-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.media-frame--tall { aspect-ratio: 4 / 5; }
.media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ============================================================================
Just-for-fun: "Take your shot" mini game (pure engagement)
============================================================================ */
.shotgame { max-width: 40rem; margin-inline: auto; text-align: center; }
.shot-score { display: flex; gap: var(--sp-8); justify-content: center; margin-bottom: var(--sp-5); color: var(--color-text-muted); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; }
.shot-score b { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--color-primary); letter-spacing: 0; }
.court {
position: relative; height: 320px; max-width: 420px; margin: 0 auto var(--sp-6);
border-radius: var(--radius-lg); overflow: hidden;
background: linear-gradient(180deg, color-mix(in oklch, var(--color-primary) 12%, var(--color-bg)), var(--color-bg-alt));
border: 1px solid var(--color-border);
}
.hoop { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); width: 96px; z-index: 1; }
.hoop__board { width: 96px; height: 62px; border: 4px solid var(--brand-maroon); border-radius: 6px; background: color-mix(in oklch, #fff 65%, var(--color-bg-alt)); }
.hoop__rim { width: 66px; height: 16px; margin: -6px auto 0; border: 4px solid var(--color-accent); border-top: none; border-radius: 0 0 40px 40px; }
.ball {
position: absolute; bottom: 16px; left: 50%; width: 46px; height: 46px; border-radius: 50%;
transform: translateX(-50%);
background: radial-gradient(circle at 35% 30%, #ff9d4d, #cf6a1f 72%);
box-shadow: inset -4px -6px 9px rgba(0,0,0,0.28), var(--shadow-md);
z-index: 2;
}
.ball::before, .ball::after { content: ""; position: absolute; background: rgba(70,25,0,0.5); }
.ball::before { top: 2px; bottom: 2px; left: 50%; width: 2px; transform: translateX(-50%); }
.ball::after { left: 2px; right: 2px; top: 50%; height: 2px; transform: translateY(-50%); }
.ball.is-make { animation: shotMake 0.9s var(--ease) forwards; }
.ball.is-miss { animation: shotMiss 0.95s var(--ease) forwards; }
@keyframes shotMake {
0% { transform: translateX(-50%) translateY(0) scale(1); }
55% { transform: translateX(-50%) translateY(-212px) scale(0.66); }
100% { transform: translateX(-50%) translateY(-150px) scale(0.4); opacity: 0; }
}
@keyframes shotMiss {
0% { transform: translateX(-50%) translateY(0) scale(1); }
55% { transform: translateX(-50%) translateY(-200px) scale(0.68); }
72% { transform: translateX(-18%) translateY(-168px) scale(0.66) rotate(20deg); }
100% { transform: translateX(70%) translateY(60px) scale(0.85) rotate(90deg); opacity: 0; }
}
.shot-msg { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; min-height: 1.6em; color: var(--color-primary); margin-bottom: var(--sp-5); }
@media (prefers-reduced-motion: reduce) { .ball.is-make, .ball.is-miss { animation: none; } }
/* ============================================================================
FCA MOTION & ENERGY LAYER — added 2026-05-28
Hero entrance + cursor-parallax + court draw · livelier carousel ·
stat count-up pulse · staggered/varied reveals · richer card hover ·
living scripture band · skill-based "aim" mini-game.
All gated behind prefers-reduced-motion (see blocks below + global reset).
============================================================================ */
:root { --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); }
/* ---- Hero: cursor parallax --------------------------------------------- */
/* JS sets transform directly on .hero__glow (see app.js) - transition lives on the rule above. */
/* ---- Hero: interactive sports balls (grab & fling) ---------------------- */
.hero__balls { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.ball-toy {
position: absolute; left: 0; top: 0; width: var(--ball-size, 56px); height: var(--ball-size, 56px);
pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
filter: drop-shadow(0 4px 6px rgba(20, 24, 31, 0.20)); will-change: transform;
}
.ball-toy:active { cursor: grabbing; }
.ball-toy svg { width: 100%; height: 100%; display: block; pointer-events: none; }
/* initial scatter (also the static layout when JS / motion is off) */
.ball-toy--basketball { left: 6%; top: 16%; --ball-size: 66px; }
.ball-toy--baseball { left: 84%; top: 24%; --ball-size: 46px; }
.ball-toy--soccer { left: 12%; top: 62%; --ball-size: 54px; }
.ball-toy--football { left: 80%; top: 58%; --ball-size: 62px; }
.ball-toy--softball { left: 46%; top: 6%; --ball-size: 46px; }
.ball-toy--bowling { left: 4%; top: 42%; --ball-size: 50px; }
.ball-toy--golf { left: 90%; top: 80%; --ball-size: 36px; }
@media (max-width: 640px) {
.ball-toy--basketball { --ball-size: 52px; left: 4%; top: 12%; }
.ball-toy--baseball { --ball-size: 40px; left: 80%; top: 14%; }
.ball-toy--softball { --ball-size: 42px; left: 68%; top: 70%; }
.ball-toy--soccer, .ball-toy--football, .ball-toy--bowling, .ball-toy--golf { display: none; }
}
/* ---- Hero: staggered entrance ------------------------------------------- */
.js .hero__line { display: block; }
.js .hero:not(.is-in) .hero__logo,
.js .hero:not(.is-in) .eyebrow,
.js .hero:not(.is-in) .hero__line,
.js .hero:not(.is-in) p.lead,
.js .hero:not(.is-in) .hero__actions,
.js .hero:not(.is-in) .hero__media { opacity: 0; }
.hero.is-in .hero__logo { animation: heroPop 0.8s var(--ease-out) both; }
.hero.is-in .eyebrow { animation: heroPop 0.8s var(--ease-out) 0.1s both; }
.hero.is-in .hero__line:nth-child(1) { animation: heroPop 0.85s var(--ease-out) 0.2s both; }
.hero.is-in .hero__line:nth-child(2) { animation: heroPop 0.85s var(--ease-out) 0.34s both; }
.hero.is-in p.lead { animation: heroFade 0.8s var(--ease-out) 0.5s both; }
.hero.is-in .hero__actions { animation: heroPop 0.8s var(--ease-out) 0.62s both; }
.hero.is-in .hero__media { animation: heroFade 0.9s var(--ease-out) 0.74s both; }
@keyframes heroPop { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* ---- Hero: headline shine sweep ----------------------------------------- */
.hero__highlight {
background: linear-gradient(110deg, var(--color-primary) 0%, var(--brand-maroon) 44%, #e0939d 50%, var(--brand-maroon) 56%, var(--color-primary) 100%);
background-size: 230% 100%; background-position: 130% 0;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.hero.is-in .hero__highlight { animation: shineSweep 6.5s ease-in-out 1.1s infinite; }
@keyframes shineSweep { 0% { background-position: 130% 0; } 32%, 100% { background-position: -30% 0; } }
/* ---- Carousel: livelier transition + slow drift ------------------------- */
.carousel__slide { transition: opacity var(--dur-slow) var(--ease), transform 1.2s var(--ease-out); transform: scale(1.06); }
.carousel__slide.is-active { transform: scale(1); }
.carousel__slide.is-active .slide-panel { animation: kenBurns 14s ease-out both; }
@keyframes kenBurns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
/* ---- Stats: solid color (no gradient) + count-up pulse ------------------ */
.stats__num { background: none; color: var(--color-primary); -webkit-text-fill-color: currentColor; }
.stats__num.is-pop { animation: statPulse 0.55s var(--ease-back); }
@keyframes statPulse { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
/* ---- Reveals: directional / pop variants (stagger delay set in JS) ------ */
.js .reveal--pop { transform: translateY(28px) scale(0.95); }
.js .reveal--left { transform: translateX(-30px); }
.js .reveal--right { transform: translateX(30px); }
.js .reveal--pop.is-visible,
.js .reveal--left.is-visible,
.js .reveal--right.is-visible { transform: none; }
/* ---- Cards: richer hover ------------------------------------------------ */
/* overflow:hidden also clips .card__media to the card's radius — keep it even
though the accent bar it originally contained is gone. */
.card { overflow: hidden; }
/* The blue->gold 3px top accent bar that used to live here was removed
2026-08-06: it sat on all 20 cards plus the 3 testimonials, identical
everywhere, and read as generic template decoration. The card's border,
resting shadow, hover lift and icon chip are all deliberately unchanged. */
/* doubled .card / .event class beats the reveal's `.is-visible { transform: none }`
(equal specificity, later source) so the hover lift actually applies. */
.card.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.card__icon { transition: transform var(--dur-base) var(--ease-out); }
.card:hover .card__icon { transform: scale(1.04); }
.event.event:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* ---- Card treatment: BLUE TINT + GOLD ACCENT (2026-08-06) ---------------
Replaces the white-box-with-border-and-shadow on the icon cards with a soft
blue wash. Every card is the SAME blue — an earlier pass rotated the tint
blue/gold/maroon down the row and it read as busy; the gold now arrives as
an accent on a consistent ground instead of as a whole-card colour.
Mixed from the brand SEED, not hardcoded hex, so the tint tracks a rebrand.
Person cards opt back out below: a colour wash behind a photograph fights
the photograph. `.cards--team .card` is 0,2,0 so it beats `.card` on source
order.
------------------------------------------------------------------------ */
.card {
border: 0;
box-shadow: none;
background: color-mix(in oklch, var(--brand-primary) 7%, var(--brand-bg));
}
/* Body copy is darkened INSIDE cards only. --color-text-muted is tuned for
white; on the tint it measured 4.80:1, which passes AA but with almost no
margin — one nudge to the tint and it fails. This buys back headroom
without touching the site-wide token. */
.card p { color: color-mix(in oklch, var(--brand-neutral) 72%, var(--brand-bg)); }
/* The chip flips to solid white so it still lifts off the coloured ground. */
.card .card__icon {
background: var(--brand-bg);
box-shadow: 0 1px 3px color-mix(in oklch, var(--brand-neutral) 12%, transparent);
}
/* The gold accent: a folded corner in the top right. Drawn with borders rather
than a clip-path so it renders identically everywhere and costs no extra
element. `.card { overflow: hidden }` above clips its outer point to the
card's 16px radius, which is what stops it looking like a stuck-on triangle.
Purely decorative — empty content on a pseudo-element is not announced, and
it carries no information, so it has no contrast requirement. It also does
NOT reinstate the old top bar: that spanned the full width and read as
chrome; this is a corner mark.
::after is free here — it used to hold the blue->gold gradient bar that was
removed earlier today.
------------------------------------------------------------------------ */
.card::after {
content: "";
position: absolute; top: 0; right: 0;
width: 0; height: 0;
border-style: solid;
border-width: 0 52px 52px 0;
border-color: transparent var(--color-accent) transparent transparent;
pointer-events: none;
}
/* Narrower cards (the 4-up rows) get a proportionally smaller fold, otherwise
it eats the corner. */
@media (max-width: 1100px) {
.card::after { border-width: 0 44px 44px 0; }
}
/* Softer lift than the old white card: there is no border to lose, so the
shadow is doing all the work and 8px read as too much. */
.card.card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px -12px color-mix(in oklch, var(--brand-neutral) 26%, transparent);
}
/* ---- Four-card sections: explicit 4-up, never 3+1 -----------------------
`.cards` is auto-fit minmax(280px), which in a 72rem container resolves to
three columns — so a four-card section stranded its last card alone on a
second row. That was always true; white cards just hid it. A tinted block
sitting by itself makes it obvious, so the two four-card grids
(what-is-fca #areas-of-ministry, get-involved #ways) get explicit tracks.
2x2 at tablet rather than 3+1.
------------------------------------------------------------------------ */
.cards--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .cards--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards--four { grid-template-columns: 1fr; } }
/* ---- Team members: NO card at all (2026-08-06) --------------------------
The card chrome is stripped off this section entirely — no tint, no border,
no shadow, no gold fold, no hover lift. Photo, name, role, bio and the
read-more sit directly on the page.
The padding goes too. Without it the portraits align to the grid columns;
with it they float inset inside an invisible box, which is the giveaway
that a card used to be there. `overflow: visible` for the same reason —
there is no longer a rounded box to clip to (the photo keeps its own
radius from .card__media).
Each declaration below is undoing a specific .card rule, so the specificity
has to clear it: `.cards--team .card` is 0,2,0 and beats `.card`, and
`.cards--team .card.card:hover` is 0,4,0 to out-rank the doubled
`.card.card:hover` that exists to beat the scroll-reveal transform.
------------------------------------------------------------------------ */
.cards--team .card {
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.cards--team .card::after { content: none; } /* no gold fold */
.cards--team .card.card:hover { transform: none; box-shadow: none; }
/* Wider gutter than the card grids use. The 1.25rem gap was sized for cards
whose own padding held the copy apart; with the boxes gone that padding is
no longer there and the columns of text crowd each other. */
.cards--team { gap: var(--sp-8); }
/* The role label stays one colour for everyone — never let an accent single
out one person on this page. */
.cards--team .card .card__tag { color: var(--color-primary); }
/* ---- Scripture band: living gradient + drifting glow -------------------- */
.verse.band--primary {
margin-block: 0; /* full-bleed band: remove the white gap above (padding stays default) */
background: linear-gradient(120deg,
var(--color-primary) 0%,
color-mix(in oklch, var(--color-primary) 80%, black) 60%,
color-mix(in oklch, var(--color-primary) 65%, black) 100%);
background-size: 150% 150%;
animation: verseShift 38s ease-in-out infinite;
}
.verse.band--primary + section { margin-top: 0; } /* remove the white gap below the band */
/* ...except the FAQ, which now follows the verse band on /what-is-fca. The rule
above was written when a section that reads fine flush against the band sat
there. The FAQ does not: its eyebrow collided with the band edge. Give it back
the standard `section + section` rhythm every other .container section gets. */
.verse.band--primary + section#faq { margin-top: var(--sp-12); }
@keyframes verseShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
/* Rotating verses: stack in one grid cell (height = tallest verse, no reflow) and crossfade. */
.verse-rotator { display: grid; align-items: center; justify-items: center; }
.verse-quote { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 0.8s var(--ease); }
.verse-quote.is-active { opacity: 1; pointer-events: auto; }
/* ---- Mini-game: aim arrow + target zone --------------------------------- */
.aim { position: absolute; left: 22px; right: 22px; top: 52%; height: 30px; z-index: 1; pointer-events: none; }
.aim__target {
position: absolute; top: 50%; left: 50%; height: 30px; transform: translate(-50%, -50%);
border-radius: 8px; background: color-mix(in oklch, var(--color-accent) 24%, transparent);
border: 1px solid color-mix(in oklch, var(--color-accent) 70%, transparent);
box-shadow: 0 0 12px color-mix(in oklch, var(--color-accent) 38%, transparent);
transition: width 0.3s var(--ease-out), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.aim__marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color-primary); will-change: left; }
.aim__marker svg { display: block; width: 26px; height: 26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28)); }
.aim.is-make .aim__marker { color: var(--color-success); }
.aim.is-miss .aim__marker { color: var(--color-error); }
.aim.is-make .aim__target { background: color-mix(in oklch, var(--color-success) 26%, transparent); border-color: var(--color-success); }
.aim.is-miss .aim__target { background: color-mix(in oklch, var(--color-error) 22%, transparent); border-color: var(--color-error); }
/* ---- Reduced-motion: neutralize all of the above ------------------------ */
@media (prefers-reduced-motion: reduce) {
.hero__glow { transform: none; }
.hero.is-in .hero__highlight, .carousel__slide.is-active .slide-panel,
.verse.band--primary, .stats__num.is-pop { animation: none; }
.js .hero:not(.is-in) .hero__logo, .js .hero:not(.is-in) .eyebrow, .js .hero:not(.is-in) .hero__line,
.js .hero:not(.is-in) p.lead, .js .hero:not(.is-in) .hero__actions, .js .hero:not(.is-in) .hero__media { opacity: 1; }
.hero.is-in .hero__logo, .hero.is-in .eyebrow, .hero.is-in .hero__line,
.hero.is-in p.lead, .hero.is-in .hero__actions, .hero.is-in .hero__media { animation: none; }
.carousel__slide { transform: none; }
.hero__highlight { background: linear-gradient(120deg, var(--color-primary), var(--brand-maroon)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
/* ============================================================================
Cookie / consent banner (JS-injected; see app.js)
============================================================================ */
.consent-banner {
position: fixed; left: 50%; bottom: var(--sp-4); z-index: 1100;
width: min(680px, calc(100% - var(--sp-6)));
transform: translate(-50%, calc(100% + var(--sp-8)));
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6);
padding: var(--sp-4) var(--sp-5);
background: var(--color-bg-elev); color: var(--color-text);
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
transition: transform 0.35s var(--ease-out);
}
.consent-banner.is-in { transform: translate(-50%, 0); }
.consent-banner__text { margin: 0; flex: 1 1 16rem; font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-muted); }
.consent-banner__text a { color: var(--color-primary); text-decoration: underline; }
.consent-banner__actions { display: flex; gap: var(--sp-3); flex: 0 0 auto; }
.consent-banner__btn { padding: var(--sp-2) var(--sp-5); }
@media (max-width: 560px) { .consent-banner__actions { width: 100%; } .consent-banner__btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .consent-banner { transition: none; } }
/* ============================================================================
DIRECTION A — Floating pill-dock header (site-wide nav).
Ported from HTML pages/index1b.html. Replaces .site-header markup in
includes/header.php. To revert to the standard header: restore
includes/header.php.bak and delete this block.
============================================================================ */
.dockA{
position: sticky;
top: clamp(.5rem, 2vw, 1rem);
z-index: 60;
padding-inline: clamp(.6rem, 1.4vw, 1rem);
}
.dockA__bar{
display: flex;
align-items: center;
gap: var(--sp-3);
max-width: none;
margin: clamp(.5rem, 2vw, 1rem) auto 0;
padding: .5rem .55rem .5rem .8rem;
background: color-mix(in oklch, #ffffff 80%, transparent);
-webkit-backdrop-filter: saturate(1.5) blur(14px);
backdrop-filter: saturate(1.5) blur(14px);
border: 1px solid color-mix(in oklch, var(--brand-primary) 14%, transparent);
border-radius: 999px;
box-shadow:
0 16px 36px -12px color-mix(in oklch, var(--brand-primary) 42%, transparent),
0 2px 6px rgba(0,0,0,.05),
inset 0 1px 0 rgba(255,255,255,.7);
animation: dockA-pop .55s cubic-bezier(.34,1.56,.5,1) both;
}
@keyframes dockA-pop{ from{ transform: translateY(-16px); opacity: 0 } to{ transform: none; opacity: 1 } }
.dockA__brand{
display: inline-flex; align-items: center; gap: .55rem;
text-decoration: none; color: var(--brand-primary);
font-family: var(--font-display); font-weight: 700;
flex-shrink: 0; padding-right: .25rem;
}
.dockA__brand:hover{ text-decoration: none; color: var(--brand-primary); }
.dockA__logo{ width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.dockA__name{ font-size: 1.04rem; letter-spacing: .01em; white-space: nowrap; }
.dockA__nav{ display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.dockA__nav a{
position: relative;
display: inline-block;
padding: .5rem .9rem;
border-radius: 999px;
font-weight: 600; font-size: .95rem; line-height: 1;
color: var(--brand-primary);
text-decoration: none;
background: transparent;
transition:
transform .2s cubic-bezier(.34,1.8,.5,1),
background-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.dockA__nav a:hover,
.dockA__nav a:focus-visible{
background: color-mix(in oklch, var(--brand-primary) 10%, white);
transform: translateY(-3px) scale(1.06);
box-shadow: 0 9px 18px -7px color-mix(in oklch, var(--brand-primary) 50%, transparent);
outline: none;
text-decoration: none;
}
.dockA__nav a[aria-current="page"]{
background: var(--brand-accent);
color: #3a2a00;
box-shadow: 0 7px 15px -5px color-mix(in oklch, var(--brand-accent) 75%, transparent);
}
.dockA__nav a[aria-current="page"]:hover{
background: color-mix(in oklch, var(--brand-accent) 92%, white);
}
.dockA__go{
background: var(--brand-primary); color: #fff;
margin-left: .3rem;
box-shadow: 0 7px 15px -5px color-mix(in oklch, var(--brand-primary) 70%, transparent);
}
.dockA__go:hover{ background: var(--brand-primary); color: #fff; }
.dockA__go[aria-current="page"]{ color:#fff; }
.dockA__toggle{
display: none; margin-left: auto;
width: 42px; height: 42px;
align-items: center; justify-content: center;
border: none; border-radius: 50%;
background: color-mix(in oklch, var(--brand-primary) 10%, white);
color: var(--brand-primary); cursor: pointer;
transition: transform .2s cubic-bezier(.34,1.8,.5,1), background-color .18s ease;
}
.dockA__toggle:hover{ transform: scale(1.08); background: color-mix(in oklch, var(--brand-primary) 16%, white); }
.dockA__toggle svg{ width: 22px; height: 22px; }
@media (max-width: 880px){
.dockA__nav{ display: none; }
.dockA__toggle{ display: inline-flex; }
.dockA__name{ font-size: .98rem; }
}
@media (prefers-reduced-motion: reduce){
.dockA__bar{ animation: none; }
.dockA__nav a, .dockA__toggle{ transition: background-color .18s ease, color .18s ease; }
.dockA__nav a:hover, .dockA__nav a:focus-visible, .dockA__toggle:hover{ transform: none; }
}
/* ============================================================================
DESIGN POLISH — 2026-06-17
Carries the homepage hero's energy across the whole site:
· reusable drifting color blobs + decorative sports-ball accents on every
inner-page hero (the home hero keeps its own page-local FX in index.php);
· bouncier pill CTAs site-wide;
· the new .cta-ribbon call-to-action (replaces the centered .cta-band).
All motion is gated behind prefers-reduced-motion at the bottom.
============================================================================ */
/* Framed photos always clip to the frame radius (belt-and-suspenders for any
image that doesn't perfectly fill its container). */
.media-frame img { border-radius: inherit; }
/* ---- Inner-page hero: drifting color blobs ------------------------------- */
.hero__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__fx::before, .hero__fx::after { content: ""; position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; }
.hero__fx::before {
width: 340px; height: 340px; left: -60px; top: 2%;
background: radial-gradient(circle, color-mix(in oklch, var(--brand-accent) 52%, transparent), transparent 70%);
animation: heroFxFloat1 16s ease-in-out infinite alternate;
}
.hero__fx::after {
width: 420px; height: 420px; right: -80px; bottom: -60px;
background: radial-gradient(circle, color-mix(in oklch, var(--brand-primary) 46%, transparent), transparent 70%);
animation: heroFxFloat2 20s ease-in-out infinite alternate;
}
@keyframes heroFxFloat1 { from { transform: translate(0,0) scale(1); } to { transform: translate(42px,30px) scale(1.15); } }
@keyframes heroFxFloat2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-50px,-28px) scale(1.12); } }
/* ---- Inner-page hero: decorative (non-interactive) sports balls ----------
Distinct from .ball-toy so the homepage drag JS never touches them. */
.hero__accents { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__ball-accent { position: absolute; width: var(--bs, 60px); height: var(--bs, 60px); filter: drop-shadow(0 4px 8px rgba(20,24,31,.16)); }
.hero__ball-accent svg { width: 100%; height: 100%; display: block; }
.hero__ball-accent--1 { left: 4%; top: 24%; --bs: 62px; animation: heroFxFloat1 9s ease-in-out infinite alternate; }
.hero__ball-accent--2 { right: 5%; top: 34%; --bs: 50px; animation: heroFxFloat2 11s ease-in-out infinite alternate; }
.hero__ball-accent--3 { left: 7%; top: 60%; --bs: 48px; animation: heroFxFloat2 10s ease-in-out infinite alternate; }
.hero__ball-accent--4 { right: 7%; top: 62%; --bs: 54px; animation: heroFxFloat1 12s ease-in-out infinite alternate; }
.hero__ball-accent--5 { right: 12%; top: 15%; --bs: 38px; animation: heroFxFloat2 8.5s ease-in-out infinite alternate; }
@media (max-width: 760px) { .hero__ball-accent { display: none; } }
/* ---- Pill CTAs: the hero's bouncy lift, everywhere ----------------------- */
.btn:hover { transform: translateY(-3px) scale(1.04); }
/* ============================================================================
CTA ribbon — vibrant action strip (replaces the old centered .cta-band).
Headline + supporting line on the left, pill action(s) on the right, on a
brand gradient with a soft color blob + a faint sports-ball motif. Vary the
ball glyph per page and add .cta-ribbon--alt to flip the accent corner so
the CTA reads as a cohesive family, never a photocopied block.
============================================================================ */
.cta-ribbon {
position: relative; isolation: isolate; overflow: hidden;
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-5) var(--sp-10); flex-wrap: wrap;
padding: var(--sp-10) clamp(var(--sp-6), 4vw, var(--sp-12));
margin-block: var(--sp-16);
background: linear-gradient(115deg, var(--color-primary), color-mix(in oklch, var(--color-primary) 62%, black));
color: var(--brand-on-primary);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.cta-ribbon::before { /* drifting accent blob */
content: ""; position: absolute; z-index: -1; width: 320px; height: 320px;
right: -70px; top: -120px; border-radius: 50%; filter: blur(48px); opacity: .5;
background: radial-gradient(circle, color-mix(in oklch, var(--brand-accent) 58%, transparent), transparent 70%);
}
.cta-ribbon__ball { /* faint ball motif bleeding off a corner */
position: absolute; z-index: -1; width: 200px; height: 200px;
right: -34px; bottom: -56px; opacity: .15; color: #fff; pointer-events: none;
}
.cta-ribbon__ball svg { width: 100%; height: 100%; display: block; }
.cta-ribbon__text { max-width: 46ch; }
.cta-ribbon h2 { color: var(--brand-on-primary); margin: 0 0 var(--sp-2); font-size: clamp(1.6rem, 1.2vw + 1.25rem, 2.2rem); }
.cta-ribbon p { color: color-mix(in oklch, var(--brand-on-primary) 86%, transparent); margin: 0; font-size: var(--fs-lead); max-width: 46ch; }
.cta-ribbon__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.cta-ribbon .btn-primary { background: var(--brand-on-primary); color: var(--color-primary); }
.cta-ribbon .btn-primary:hover { background: color-mix(in oklch, var(--brand-on-primary) 90%, var(--brand-neutral)); color: var(--color-primary-hover); }
.cta-ribbon .btn-ghost { color: var(--brand-on-primary); border-color: color-mix(in oklch, var(--brand-on-primary) 45%, transparent); }
.cta-ribbon .btn-ghost:hover { background: color-mix(in oklch, var(--brand-on-primary) 16%, transparent); }
/* flipped accent corner + gradient for alternating pages */
.cta-ribbon--alt { background: linear-gradient(245deg, var(--color-primary), color-mix(in oklch, var(--color-primary) 62%, black)); }
.cta-ribbon--alt::before { right: auto; left: -70px; }
.cta-ribbon--alt .cta-ribbon__ball { right: auto; left: -34px; transform: scaleX(-1); }
/* larger variant for the primary giving ask on Donate */
.cta-ribbon--lg { padding-block: var(--sp-12); }
.cta-ribbon--lg h2 { font-size: clamp(1.9rem, 1.6vw + 1.3rem, 2.6rem); }
@media (max-width: 720px) {
.cta-ribbon { flex-direction: column; align-items: flex-start; text-align: left; padding: var(--sp-8) var(--sp-6); }
.cta-ribbon__actions { width: 100%; }
}
/* ---- Reduced motion: still + readable ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.hero__fx::before, .hero__fx::after, .hero__ball-accent { animation: none; }
.btn:hover { transform: none; }
}
/* ============================================================================
ACCENT KIT — 2026-06-18
Carries the homepage hero's vibrancy through the BODY of every inner page
(the 6/17 pass covered the heroes + CTAs). All token-driven; motion gated.
· .mark — the hero's gold "marker-swipe" highlight, reusable on a key
word inside any heading.
· ctaPulse — the hero's gold CTA pulse ring, on the closing .cta-ribbon's
primary button (the page's main ask only — not form buttons).
· .has-brand-glow — soft hero-style brand glow behind otherwise-flat feature
sections (sign-up form, sponsors, contact column).
· card-family resting lift — sponsors + testimonial quotes get the same
visible border + resting shadow as .card (James: "more lift").
============================================================================ */
/* ---- Gold marker-swipe highlight (reusable) ------------------------------ */
.mark { position: relative; isolation: isolate; white-space: nowrap; color: inherit; }
.mark::before {
content: ""; position: absolute; left: -.1em; right: -.1em; bottom: .06em; height: .42em;
background: color-mix(in oklch, var(--brand-accent) 88%, white);
border-radius: .2em; z-index: -1; rotate: -1.5deg;
transform: scaleX(0); transform-origin: left center;
animation: markSwipe .6s cubic-bezier(.7,0,.25,1) .45s forwards;
}
@keyframes markSwipe { to { transform: scaleX(1); } }
/* ---- Closing CTA: the hero's gold pulse ring ----------------------------- */
@keyframes ctaPulse {
0%, 100% { box-shadow: 0 3px 10px color-mix(in oklch, var(--brand-neutral) 22%, transparent),
0 0 0 0 color-mix(in oklch, var(--brand-accent) 55%, transparent); }
50% { box-shadow: 0 3px 10px color-mix(in oklch, var(--brand-neutral) 22%, transparent),
0 0 0 12px color-mix(in oklch, var(--brand-accent) 0%, transparent); }
}
.cta-ribbon .btn-primary { animation: ctaPulse 2.8s ease-in-out 1.4s infinite; }
.cta-ribbon .btn-primary:hover { animation-play-state: paused; }
/* ---- Soft brand glow behind flat feature sections ------------------------ */
.has-brand-glow { position: relative; isolation: isolate; }
.has-brand-glow::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(40% 60% at 12% 18%, color-mix(in oklch, var(--brand-primary) 12%, transparent), transparent 70%),
radial-gradient(38% 55% at 88% 84%, color-mix(in oklch, var(--brand-accent) 12%, transparent), transparent 70%);
}
/* ---- Card-family resting lift (match .card) ------------------------------ */
.sponsor, .quote {
border-color: color-mix(in oklch, var(--brand-neutral) 18%, var(--brand-bg));
box-shadow: var(--shadow-sm);
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.sponsor:hover, .quote:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.mark::before { animation: none; transform: scaleX(1); }
.cta-ribbon .btn-primary { animation: none; }
.sponsor:hover, .quote:hover { transform: none; }
}
/* ============================================================================
PUNCH-LIST POLISH — 2026-06-18 (post accent-kit review)
============================================================================ */
/* Testimonials: big gold quote glyph + blue cite so "What people are saying"
reads as a vibrant section, not flat cards. The blue->gold top accent bar
that matched .card was removed here too (2026-08-06) — see the note in the
MOTION & ENERGY layer. The padding-top stays: it is what keeps the glyph
clear of the quote text, not spacing for the bar. */
.quote { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--sp-12); }
.quote::before { /* decorative opening-quote glyph (fully visible, not clipped) */
content: "\201C"; position: absolute; z-index: -1;
top: .2em; left: var(--sp-8);
font-family: Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1;
font-size: 4rem; color: color-mix(in oklch, var(--brand-accent) 72%, white);
pointer-events: none;
}
.quote cite { color: var(--color-primary); }
/* "Powered by Spark" credit mark — fixed brand orange (#f15924) on any footer
background. display:inline-block required (global reset sets svg{display:block}). */
.spark-mark {
display: inline-block;
width: 1.6em; height: 1.6em;
margin-left: 0.15em;
vertical-align: -0.5em;
}
/* Nav Contact CTA: keep it a solid blue pill at rest AND on hover. The generic
`.dockA__nav a:hover` (0,2,1) was out-ranking `.dockA__go:hover` (0,2,0) and
washing the CTA out to a pale tint with blue-on-pale text. Raising these to
`.dockA__nav a.dockA__go` wins reliably. */
.dockA__nav a.dockA__go {
background: var(--brand-primary); color: #fff;
box-shadow: 0 7px 15px -5px color-mix(in oklch, var(--brand-primary) 70%, transparent);
}
.dockA__nav a.dockA__go:hover,
.dockA__nav a.dockA__go:focus-visible {
background: var(--color-primary-hover); color: #fff;
box-shadow: 0 9px 18px -7px color-mix(in oklch, var(--brand-primary) 60%, transparent);
}
.dockA__nav a.dockA__go[aria-current="page"] { background: var(--brand-primary); color: #fff; }
/* Doubled Powered-by-Spark footer badge - 2026-07-07 (LINGO-SPARK-BADGE-2X) */
.spark-mark { width: 3.2em; height: 3.2em; vertical-align: middle; margin-left: -0.63em; margin-top: -0.8em; margin-bottom: -0.8em; }
/* ============================================================================
FAQ accordion - /what-is-fca. Content comes from site-config.php ('faq') and
is mirrored into FAQPage JSON-LD, so the panel must stay visible (no JS gate).
============================================================================ */
.faq {
max-width: 52rem;
margin-inline: auto;
display: grid;
gap: var(--sp-4);
}
.faq__item {
border: 1px solid color-mix(in oklch, var(--brand-neutral) 18%, var(--brand-bg));
border-radius: var(--radius-lg);
background: var(--color-bg-elev);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.faq__item:hover { box-shadow: var(--shadow-md); }
.faq__item[open] {
border-color: color-mix(in oklch, var(--brand-primary) 45%, var(--brand-bg));
box-shadow: var(--shadow-md);
}
.faq__q {
list-style: none; /* kill the default disclosure triangle */
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-5) var(--sp-6);
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: 600;
line-height: var(--lh-snug);
color: var(--color-text);
transition: color var(--dur-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover,
.faq__item[open] .faq__q { color: var(--color-primary); }
.faq__q:focus-visible {
outline: 2px solid var(--color-primary-ring);
outline-offset: -2px;
}
/* Plus sign that rotates into an x on open (two bars, one rotates away). */
.faq__q::after {
content: "";
flex: 0 0 auto;
width: 1.5rem; height: 1.5rem;
border-radius: 50%;
background:
linear-gradient(currentColor, currentColor) center / 0.75rem 2px no-repeat,
linear-gradient(currentColor, currentColor) center / 2px 0.75rem no-repeat,
var(--color-accent-soft);
color: var(--color-primary);
transition: transform var(--dur-base) var(--ease-out),
background-color var(--dur-base) var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: rotate(135deg); }
.faq__a {
padding: 0 var(--sp-6) var(--sp-6);
border-top: 1px solid color-mix(in oklch, var(--brand-neutral) 10%, var(--brand-bg));
padding-top: var(--sp-5);
margin-top: calc(var(--sp-2) * -1);
}
.faq__a p {
margin: 0;
max-width: none; /* base p{max-width} would left-pin the copy */
color: var(--color-text-muted);
line-height: var(--lh-normal);
}
.faq__item[open] .faq__a { animation: faq-open var(--dur-base) var(--ease-out) both; }
@keyframes faq-open {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
.faq__q { padding: var(--sp-4) var(--sp-5); }
.faq__a { padding-inline: var(--sp-5); padding-bottom: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) {
.faq__item[open] .faq__a { animation: none; }
.faq__q::after { transition: none; }
}
/* Contact map (Google keyless embed) */
.map-embed { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-bg-alt); }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }