/* =====================================================================
FRANKLIN PARK CO-OP PRESCHOOL — REDESIGN SYSTEM
FP-blue-led · warm cream · Poppins (display) + Nunito Sans (text)
Modular sections: every top-level section is independent and
swappable for the client design conversation.
TYPE: swap the whole site's personality by editing --display / --sans
below and the Google Fonts in _includes/layouts/redesign.njk.
===================================================================== */
:root {
/* ---- Palette: FP blue leads, warm earthy support ---- */
--fp-blue: #004f98; /* brand blue (from the FP hand logo) — CTAs, links, accents */
--fp-blue-deep: #003a70; /* hover / dark accents */
--fp-blue-soft: #72a4d7; /* logo's light blue — kickers, rules on dark */
--fp-navy: #101b3f; /* near-navy ink for hero overlay + footer text */
--fp-sky: #92e5ff; /* current-site sky — rare small accents */
--fp-sky-wash: #e9f6fc; /* pale sky tint band */
--fp-gold: #ffc439; /* donate / warm highlight */
--cream: #f6f8fb; /* warm page background */
--cream-deep: #e9eef5; /* deeper cream band / cards */
--paper: #ffffff; /* card surface */
--ink: #1d2530; /* warm near-black headings */
--body: #4d5562; /* warm gray body text */
--line: #dce3ec; /* hairline on cream */
--footer-tint: #edf2f7; /* cool-tinted footer per ref pattern */
--fp-link: #004f98; /* blue TEXT — see the dark-mode note below */
/* ---- Type ---- */
--display: "Poppins", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
--sans: "Nunito Sans", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
/* Poppins runs large and geometric — headings sit a notch smaller and
tighter than the previous serif scale so they read confident, not shouty. */
--t-hero: clamp(2.3rem, 5.2vw, 3.9rem);
--t-title: clamp(1.8rem, 3.4vw, 2.5rem);
--t-sub: clamp(1.15rem, 2vw, 1.4rem);
--t-body: 1.05rem;
--t-small: 0.88rem;
--track-label: 0.08em;
/* ---- Shape & motion ---- */
--pill: 999px;
--radius: 14px;
--shadow-soft: 0 10px 40px rgba(29, 37, 48, 0.1);
--shadow-card: 0 4px 18px rgba(29, 37, 48, 0.08);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur: 0.3s;
--container: 72rem;
}
/* ===================== BASE ===================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
font-size: var(--t-body);
line-height: 1.7;
color: var(--body);
background: var(--cream);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--fp-link); }
h1, h2, h3, h4 {
font-family: var(--display);
color: var(--ink);
line-height: 1.12;
margin: 0 0 0.5em;
font-weight: 600;
text-wrap: balance;
}
.container {
width: min(92%, var(--container));
margin-inline: auto;
}
/* Eyebrow label */
.eyebrow {
display: block;
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--fp-link);
margin-bottom: 1.1em;
}
/* Centered section title + short solid underline.
(Deliberately NOT a hairline-with-a-diamond — plain, confident, ours.) */
.section-title {
font-size: var(--t-title);
text-align: center;
font-weight: 700;
letter-spacing: -0.015em;
}
.section-title.left { text-align: left; }
.rule {
width: 52px;
height: 5px;
border-radius: var(--pill);
background: var(--fp-blue);
margin: 0.9rem auto 1.6rem;
}
.section-title.left + .rule { margin-inline: 0; }
/* Lede: plain text at a larger size. No italic serif. */
.lede {
font-family: var(--sans);
font-size: var(--t-sub);
font-weight: 400;
color: var(--body);
text-align: center;
max-width: 52ch;
margin: 0 auto 1.5rem;
line-height: 1.6;
}
/* ===================== FOCUS =====================
One visible ring for keyboard users everywhere. Mouse users never see it
(:focus-visible), so it costs the visual design nothing. */
:focus-visible {
outline: 3px solid var(--fp-blue);
outline-offset: 3px;
border-radius: 4px;
}
/* On dark photo backdrops the blue ring disappears — go white there. */
.hero :focus-visible,
.inner-hero :focus-visible,
.reasons :focus-visible,
.site-nav :focus-visible,
.mobile-menu :focus-visible,
.cta-band :focus-visible {
outline-color: #fff;
}
body.dark :focus-visible { outline-color: var(--fp-blue-soft); }
/* ===================== BUTTONS ===================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
white-space: nowrap;
font-family: var(--sans);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
border-radius: var(--pill);
padding: 1.05em 2.3em;
border: 2px solid var(--fp-blue);
background: var(--fp-blue);
color: #fff;
cursor: pointer;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover {
background: var(--fp-blue-deep);
border-color: var(--fp-blue-deep);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 49, 152, 0.28);
}
.btn:active { transform: translateY(0); }
.btn.ghost {
background: transparent;
color: var(--fp-blue);
}
.btn.ghost:hover { background: var(--fp-blue); color: #fff; }
.btn.on-photo {
border-color: #fff;
background: #fff;
color: var(--ink);
}
.btn.on-photo:hover { background: var(--fp-blue); border-color: var(--fp-blue); color: #fff; }
.btn.gold {
background: var(--fp-gold);
border-color: var(--fp-gold);
color: var(--ink);
}
.btn.gold:hover { background: #f0b41f; border-color: #f0b41f; box-shadow: 0 8px 24px rgba(255, 196, 57, 0.4); }
/* ===================== NAV ===================== */
.site-nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 900;
transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-nav .nav-inner {
width: min(94%, 80rem);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2.2rem;
height: 4.6rem;
/* Reserve the badge logo's footprint. The logo is absolutely positioned, so
without this the left-most links slide underneath it between the mobile
breakpoint (760px) and roughly 1200px. */
padding-left: calc(clamp(96px, 10vw, 138px) + 1.2rem);
}
/* Tighten the run between tablet and small laptop, where all six links,
the theme toggle and both buttons have to share one row. */
@media (min-width: 1150px) and (max-width: 1439px) {
.site-nav .nav-inner { gap: 1.4rem; }
.site-nav a.nav-link { font-size: 0.72rem; letter-spacing: 0.09em; }
.site-nav .btn.nav-cta { padding: 0.65em 1.2em; font-size: 0.68rem; }
}
.site-nav a.nav-link {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: #fff;
padding: 0.4em 0;
position: relative;
transition: color var(--dur) var(--ease);
}
.site-nav a.nav-link::after {
content: "";
position: absolute;
left: 0; right: 100%;
bottom: 0;
height: 2px;
background: currentColor;
transition: right var(--dur) var(--ease);
}
.site-nav a.nav-link:hover::after,
.site-nav a.nav-link[aria-current="page"]::after { right: 0; }
.site-nav .btn.nav-cta { padding: 0.7em 1.6em; font-size: 0.74rem; }
/* badge logo overlapping hero (ref pattern, kept) */
.badge-logo {
position: absolute;
top: 1.1rem;
left: max(3vw, 1.2rem);
width: clamp(96px, 10vw, 138px);
aspect-ratio: 1;
border-radius: 50%;
background: #fff;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
text-decoration: none;
z-index: 950;
transition: transform var(--dur) var(--ease);
}
.badge-logo:hover { transform: scale(1.04) rotate(-1.5deg); }
.badge-logo img { width: 52%; }
.badge-logo .est {
font-family: var(--sans);
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.22em;
/* fixed, not var(--fp-blue): the badge disc is white in both themes */
color: #004f98;
text-transform: uppercase;
}
/* scrolled state */
body.nav-solid .site-nav {
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
box-shadow: 0 4px 24px rgba(29, 37, 48, 0.1);
}
body.nav-solid .site-nav a.nav-link { color: var(--ink); }
body.nav-solid .site-nav a.nav-link:hover { color: var(--fp-blue); }
body.nav-solid .badge-logo { transform: scale(0.62); transform-origin: top left; }
body.nav-solid .badge-logo:hover { transform: scale(0.65); }
/* ===================== HERO (video anchor) ===================== */
.hero {
position: relative;
min-height: min(100svh, 56rem);
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--fp-navy);
}
.hero-media,
.hero-media video,
.hero-media .slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-media .slide {
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.6s ease;
}
.hero-media .slide.on { opacity: 1; }
/* No JS: the carousel never starts, so show the first frame rather than a
blank navy hero. */
html:not(.js) .hero-media .slide:first-of-type { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.hero-media .slide.on { animation: heroKen 9s ease-out forwards; }
}
@keyframes heroKen {
from { transform: scale(1); }
to { transform: scale(1.07); }
}
.hero-scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(16, 27, 63, 0.88) 0%, rgba(16, 27, 63, 0.72) 45%, rgba(16, 27, 63, 0.78) 100%);
}
.hero-content {
position: relative;
z-index: 2;
width: min(92%, var(--container));
margin-inline: auto;
padding: 9rem 0 5.5rem;
text-align: center;
color: #fff;
}
.hero-content .kicker {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
/* was --fp-blue-soft: light blue on a bright photo, unreadable */
color: #fff;
text-shadow: 0 1px 12px rgba(10, 18, 40, 0.75);
margin-bottom: 1.4rem;
display: block;
}
.hero-content h1 {
font-size: var(--t-hero);
color: #fff;
font-weight: 600;
margin-bottom: 0.35em;
text-shadow: 0 2px 18px rgba(10, 18, 40, 0.5);
}
.hero-content .tagline {
/* Upright, not italic: Poppins ships no italic here and the browser would
synthesise a slanted fake. */
font-family: var(--display);
font-weight: 500;
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
color: #fff;
text-shadow: 0 1px 14px rgba(10, 18, 40, 0.6);
margin: 0 auto 2.2rem;
max-width: 38ch;
}
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-sound {
position: absolute;
right: 1.6rem;
bottom: 1.6rem;
z-index: 3;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.7);
background: rgba(16, 27, 63, 0.4);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--dur) var(--ease);
}
.hero-sound:hover { background: var(--fp-blue); }
.hero-sound svg { width: 19px; height: 19px; }
/* Year banner (CMS-managed) */
.year-banner {
background: var(--fp-blue);
color: #fff;
text-align: center;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.8em 1em;
}
.year-banner strong { color: var(--fp-gold); font-weight: 700; }
/* ===================== SECTION SHELL ===================== */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section.tint { background: var(--cream-deep); }
.section.sky { background: var(--fp-sky-wash); }
/* Scroll reveal.
Gated on html.js: if JavaScript is off, blocked, or the script fails to
load, every .reveal block must still be visible. Without the gate the
entire site renders as an empty page. */
@media (prefers-reduced-motion: no-preference) {
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
}
/* ===================== TESTIMONIALS ===================== */
.testimonials { text-align: center; position: relative; }
.testimonials .quote-mark { color: var(--fp-blue); opacity: 0.25; margin: 0 auto 0.6rem; width: 44px; }
.t-track { position: relative; min-height: 15.5rem; }
.t-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s var(--ease);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.t-slide.on { opacity: 1; visibility: visible; position: relative; }
.t-quote {
font-family: var(--display);
font-weight: 500;
font-size: clamp(1.25rem, 2.4vw, 1.65rem);
line-height: 1.5;
color: var(--ink);
max-width: 56ch;
margin: 0 auto 1.6rem;
}
.t-author { display: flex; align-items: center; gap: 0.9rem; justify-content: center; }
.t-author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 25%; }
.t-author .who { text-align: left; line-height: 1.3; }
.t-author .who b { display: block; color: var(--fp-blue); font-size: 0.95rem; letter-spacing: 0.02em; }
.t-author .who span { font-size: 0.82rem; color: var(--body); }
/* The dot stays 9px visually; the button around it is a 24px tap target
(WCAG 2.2 minimum) drawn with a pseudo-element. */
.t-dots { display: flex; gap: 0.2rem; justify-content: center; margin-top: 2.2rem; }
.t-dots button {
width: 26px; height: 26px;
border: none;
padding: 0;
background: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.t-dots button::before {
content: "";
width: 9px; height: 9px;
border-radius: 50%;
background: rgba(29, 37, 48, 0.18);
transition: background var(--dur), transform var(--dur);
}
.t-dots button.on::before { background: var(--fp-blue); transform: scale(1.25); }
body.dark .t-dots button::before { background: rgba(240, 238, 231, 0.25); }
body.dark .t-dots button.on::before { background: var(--fp-blue); }
/* ===================== AUDIENCE CARDS ===================== */
.aud-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
gap: 1.6rem;
margin-top: 2.6rem;
}
.aud-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.aud-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.aud-card .photo { height: 13rem; overflow: hidden; }
.aud-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.aud-card:hover .photo img { transform: scale(1.05); }
.aud-card .pad { padding: 2rem 2.2rem 2.2rem; display: flex; flex-direction: column; flex: 1; }
.aud-card h3 { font-size: 1.45rem; font-weight: 600; margin-bottom: 0.5em; }
.aud-card p { margin: 0 0 1.6rem; flex: 1; font-size: 0.97rem; }
/* One primary action per card, pinned to the bottom so both cards line up.
Everything else is a plain link row — three competing pill buttons was the mess. */
.aud-card .row { margin-top: auto; }
.aud-card .row .btn { width: 100%; padding: 0.95em 1.7em; font-size: 0.78rem; }
.aud-card .links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.4rem;
margin: 1.1rem 0 0;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
}
.aud-card .links a {
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
color: var(--fp-blue);
border-bottom: 1px solid transparent;
transition: border-color var(--dur) var(--ease);
}
.aud-card .links a:hover { border-bottom-color: currentColor; }
/* ===================== REASONS (cards over photo) ===================== */
.reasons {
position: relative;
padding: clamp(4rem, 8vw, 7rem) 0;
background: var(--fp-navy);
overflow: hidden;
}
.reasons .bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 30%;
opacity: 0.92;
}
.reasons .bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(16, 27, 63, 0.55), rgba(16, 27, 63, 0.65));
}
.reasons .container { position: relative; z-index: 2; }
.reasons .section-title, .reasons .lede { color: #fff; }
.reasons .rule { background: var(--fp-blue-soft); }
.reasons .rule::after { border-color: var(--fp-blue-soft); background: transparent; }
.reason-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
gap: 1.2rem;
margin-top: 2.8rem;
}
/* Cards are equal-height flex columns so every "Learn more" sits on the
same baseline no matter how long the blurb runs. */
.reason-card {
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(4px);
border-radius: var(--radius);
padding: 1.9rem 1.9rem 1.8rem;
display: flex;
flex-direction: column;
transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.reason-card:hover { transform: translateY(-5px); background: #fff; }
/* Solid numeral chip, not an italic serif flourish */
.reason-card .num {
font-family: var(--display);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
background: var(--fp-blue);
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
min-width: 2.5rem;
height: 1.7rem;
padding: 0 0.6rem;
border-radius: var(--pill);
margin-bottom: 0.9rem;
}
.reason-card h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.45em; }
.reason-card p { font-size: 0.92rem; margin: 0 0 1.4rem; flex: 1; }
.reason-card a {
align-self: flex-start;
margin-top: auto; /* pins every link to the card's bottom */
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: var(--fp-blue);
border-bottom: 2px solid currentColor;
padding-bottom: 2px;
transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.reason-card a::after { content: " →"; }
.reason-card a:hover { color: var(--fp-blue-deep); }
/* ===================== CTA BAND ===================== */
.cta-band {
background: var(--fp-blue);
color: #fff;
text-align: center;
padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.cta-band h2 { color: #fff; font-size: var(--t-title); max-width: 26ch; margin-inline: auto; }
.cta-band p { color: rgba(255, 255, 255, 0.85); max-width: 52ch; margin: 0 auto 2rem; }
.cta-band .btn { background: #fff; border-color: #fff; color: var(--fp-blue); }
.cta-band .btn:hover { background: var(--fp-gold); border-color: var(--fp-gold); color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
/* ===================== FOOTER ===================== */
.site-footer {
background: var(--footer-tint);
border-top: 1px solid var(--line);
padding: clamp(3.5rem, 6vw, 5rem) 0 0;
font-size: 0.92rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: 2.6rem;
}
.site-footer h2 {
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--fp-blue);
margin-bottom: 1.2rem;
}
.site-footer .map {
border: 0;
width: 100%;
height: 11rem;
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li {
display: flex;
gap: 0.9rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--line);
align-items: baseline;
}
.agenda .when {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fp-blue);
white-space: nowrap;
min-width: 6.4rem;
}
.agenda .what { display: block; flex: 1; }
.agenda .what b { display: block; color: var(--ink); font-size: 0.92rem; }
.agenda .what span { font-size: 0.82rem; }
.cal-links { display: flex; gap: 1.2rem; margin-top: 1rem; flex-wrap: wrap; }
.cal-links a { font-size: 0.8rem; font-weight: 600; }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.news-list b { display: block; color: var(--ink); font-size: 0.92rem; }
.news-list span { font-size: 0.78rem; }
.newsletter input {
width: 100%;
font-family: var(--sans);
font-size: 0.92rem;
padding: 0.85em 1.2em;
border: 1px solid var(--line);
border-radius: var(--pill);
background: var(--paper);
margin-bottom: 0.7rem;
color: var(--ink);
}
.newsletter input:focus { outline: 2px solid var(--fp-blue); outline-offset: 1px; border-color: transparent; }
.newsletter .btn { width: 100%; padding: 0.9em; }
.footer-bar {
margin-top: 3rem;
border-top: 1px solid var(--line);
padding: 1.4rem 0;
text-align: center;
font-size: 0.8rem;
color: var(--body);
}
.footer-bar a { color: var(--fp-link); }
/* ===================== INNER PAGE ===================== */
.inner-hero {
position: relative;
padding: 9.5rem 0 3.2rem;
background: var(--fp-navy);
overflow: hidden;
text-align: center;
}
.inner-hero .bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center 35%;
}
.inner-hero .bg::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(16,27,63,0.84), rgba(16,27,63,0.76) 40%, rgba(16,27,63,0.82));
}
.inner-hero .container { position: relative; z-index: 2; }
.inner-hero h1 { color: #fff; font-size: var(--t-title); margin-bottom: 0.2em; text-shadow: 0 2px 16px rgba(10, 18, 40, 0.5); }
.inner-hero .rule { background: var(--fp-blue-soft); margin-bottom: 1.2rem; }
.sublinks {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.3rem 0;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.sublinks a {
color: #fff;
text-shadow: 0 1px 10px rgba(10, 18, 40, 0.6);
text-decoration: none;
white-space: nowrap;
/* vertical padding is for the tap target, not the look — these were
~19px tall, under the 24px minimum */
padding: 0.45rem 1rem;
display: inline-flex;
align-items: center;
min-height: 24px;
border-right: 1px solid rgba(255, 255, 255, 0.3);
transition: color var(--dur);
}
.sublinks a:last-child { border-right: none; }
.sublinks a:hover { color: var(--fp-blue-soft); }
/* program cards */
.prog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
gap: 1.6rem;
margin-top: 2.4rem;
}
.prog-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.prog-card .photo { height: 14rem; overflow: hidden; }
.prog-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.prog-card .pad { padding: 2rem 2.2rem 2.3rem; }
.prog-card h3 { font-size: 1.8rem; margin-bottom: 0.1em; }
.prog-card .meta {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fp-blue);
display: block;
margin-bottom: 1rem;
}
.fee {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
border-top: 1px solid var(--line);
padding: 0.65rem 0;
font-size: 0.95rem;
}
.fee b { color: var(--ink); font-size: 1.18rem; font-family: var(--display); }
/* ---- "Good to know" callout ----
This carries the money rules (when the registration fee and tuition are
actually due), so it gets real presence instead of reading as a footnote. */
.note {
position: relative;
font-size: 0.95rem;
line-height: 1.65;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--line);
border-left: 6px solid var(--fp-blue);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
padding: 1.5rem 1.8rem;
margin-top: 2.2rem;
}
.note b:first-child {
display: block;
font-family: var(--display);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fp-blue);
margin-bottom: 0.5rem;
}
/* split feature */
.split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
gap: 3rem;
align-items: center;
}
.split .photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.split h2 { font-size: var(--t-title); }
.split .crest {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--pill);
padding: 0.6rem 1.4rem 0.6rem 0.8rem;
margin-top: 1.4rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--ink);
}
.split .crest .dot {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--fp-blue);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 700;
}
/* accordion */
.acc { border-top: 1px solid var(--line); margin-top: 2rem; }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1.15rem 0.2rem;
font-family: var(--display);
font-size: 1.25rem;
font-weight: 600;
color: var(--ink);
transition: color var(--dur);
}
.acc summary:hover { color: var(--fp-blue); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
content: "+";
font-family: var(--sans);
font-weight: 400;
font-size: 1.4rem;
color: var(--fp-blue);
transition: transform var(--dur) var(--ease);
}
.acc details[open] summary::after { transform: rotate(45deg); }
.acc .acc-body { padding: 0 0.2rem 1.3rem; max-width: 65ch; }
/* tour form */
.tour-form {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
padding: 2.4rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.1rem;
}
.tour-form label {
display: block;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 0.4rem;
}
.tour-form input, .tour-form textarea, .tour-form select {
width: 100%;
font-family: var(--sans);
font-size: 0.95rem;
color: var(--ink);
padding: 0.85em 1.1em;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--cream);
}
.tour-form input:focus, .tour-form textarea:focus, .tour-form select:focus {
outline: 2px solid var(--fp-blue);
outline-offset: 1px;
}
.tour-form .full { grid-column: 1 / -1; }
.tour-form textarea { min-height: 6.5rem; resize: vertical; }
/* CMS badges (toggle for design conversation) */
.cms-badge {
display: none;
position: absolute;
top: 0.9rem;
right: 0.9rem;
z-index: 50;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.45em 1em;
border-radius: var(--pill);
pointer-events: none;
}
.cms-badge.cms { background: var(--fp-gold); color: var(--ink); }
.cms-badge.static { background: rgba(29, 37, 48, 0.75); color: #fff; }
body.show-cms .cms-badge { display: inline-block; }
body.show-cms [data-cms] { outline: 2px dashed rgba(255, 196, 57, 0.9); outline-offset: -2px; }
.has-badge { position: relative; }
/* ===================== DARK MODE ===================== */
.theme-toggle {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.55);
background: transparent;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color var(--dur), border-color var(--dur), background var(--dur), transform var(--dur);
}
.theme-toggle:hover { transform: rotate(12deg) scale(1.06); border-color: var(--fp-gold); color: var(--fp-gold); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
body.nav-solid .theme-toggle { border-color: rgba(38, 37, 31, 0.35); color: var(--ink); }
body.dark .theme-toggle .moon { display: none; }
body.dark .theme-toggle .sun { display: block; }
body.dark {
--cream: #12151d;
--cream-deep: #181c28;
--paper: #1c2230;
--ink: #f0eee7;
--body: #b4b1a8;
--line: #2b3040;
--footer-tint: #151926;
--fp-sky-wash: #16202c;
--fp-blue: #4287cf !important; /* button/rule FILL — keep it saturated */
--fp-blue-deep: #72a4d7 !important;
/* Separate token for blue TEXT. A fill and a label have different contrast
requirements: #4287cf measures 4.24:1 for small text on the dark card
surface (needs 4.5), but lightening the fill to compensate makes every
button look washed out. So text gets its own value. */
--fp-link: #8cbdea;
--shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.5);
--shadow-card: 0 4px 18px rgba(0, 0, 0, 0.4);
}
body.dark .year-banner { background: #003a70; }
body.dark .btn { color: #0e1118; }
body.dark .btn.ghost { color: var(--fp-blue); background: transparent; }
body.dark .btn.ghost:hover { color: #0e1118; background: var(--fp-blue); }
body.dark .cta-band { background: #003a70; }
body.dark .cta-band .btn { background: #fff; border-color: #fff; color: #003a70; }
body.dark.nav-solid .site-nav { background: rgba(18, 21, 29, 0.94); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
body.dark.nav-solid .site-nav a.nav-link { color: var(--ink); }
body.dark.nav-solid .theme-toggle { border-color: rgba(240, 238, 231, 0.4); color: var(--ink); }
body.dark .reason-card { background: rgba(28, 34, 48, 0.93); }
body.dark .reason-card:hover { background: #1c2230; }
body.dark .rule::after { background: var(--cream); }
body.dark .note { background: #1d2433; }
/* ===================== RESPONSIVE ===================== */
/* Below this width the full link row no longer fits alongside the logo,
the theme toggle and both buttons — the burger takes over. */
@media (max-width: 1149px) {
.site-nav a.nav-link:not(.keep) { display: none; }
.site-nav .nav-inner { padding-left: 0; }
}
@media (max-width: 760px) {
.site-nav .nav-inner { gap: 1.2rem; height: 4.1rem; }
.hero-content { padding: 8rem 0 4.5rem; }
.t-track { min-height: 21rem; }
.tour-form { grid-template-columns: 1fr; padding: 1.6rem; }
.sublinks a { border-right: none; }
}
/* =====================================================================
PRODUCTION ADDITIONS (Eleventy integration) — not in the prototype:
skip link, mobile menu, board grid, gallery, prose, checklists.
===================================================================== */
.skip-link {
position: absolute;
left: -9999px;
z-index: 999;
background: var(--fp-blue);
color: #fff;
padding: 0.8em 1.4em;
border-radius: var(--pill);
}
.skip-link:focus { left: 1rem; top: 1rem; }
/* ---- Mobile menu (the prototype hid nav links under 760px with no
replacement; production needs one) ---- */
.nav-burger { display: none; }
.mobile-menu { display: none; }
@media (max-width: 1149px) {
.nav-burger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
/* clears the badge logo, which is still full-size until 760px */
margin-left: calc(clamp(96px, 10vw, 138px) + max(3vw, 1.2rem) - 0.4rem);
margin-right: auto;
padding: 8px;
position: relative;
z-index: 960;
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.55);
border-radius: 50%;
cursor: pointer;
}
.nav-burger span {
display: block;
height: 2px;
width: 100%;
background: #fff;
border-radius: 2px;
transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
body.nav-solid .nav-burger { border-color: rgba(29, 37, 48, 0.35); }
body.nav-solid .nav-burger span { background: var(--ink); }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.menu-open .nav-burger span { background: #fff; }
.mobile-menu {
position: fixed;
inset: 0;
/* above the badge logo (950), below the burger (960) — the logo was
floating over the top menu items on short screens */
z-index: 955;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.6rem;
background: rgba(16, 27, 63, 0.97);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.mobile-menu[hidden] { display: flex; }
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu a {
font-family: var(--display);
font-size: 1.6rem;
color: #fff;
text-decoration: none;
}
.mobile-menu a[aria-current="page"] { color: var(--fp-blue-soft); }
}
@media (max-width: 760px) {
/* badge logo shrinks out of the way on small screens */
.badge-logo { width: 76px; }
.badge-logo .est { display: none; }
.nav-burger { margin-left: calc(76px + max(3vw, 1.2rem)); }
}
@media (max-width: 520px) {
/* Donate stays reachable via the menu and footer */
.site-nav .btn.gold.nav-cta { display: none; }
}
/* ---- Board grid (About page) ---- */
/* Flex + center, NOT auto-fit grid: the board is a different size every year
and a grid leaves orphans stretched across the last row. Centering keeps
odd and even counts looking equally deliberate. */
.board-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.6rem;
margin-top: 2.6rem;
}
.board-grid > * { flex: 0 1 13.5rem; }
.board-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
padding: 1.4rem 1.2rem 1.5rem;
text-align: center;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.board-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.board-card img,
.board-card .board-initials {
width: 8.5rem;
height: 8.5rem;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 1rem;
background: var(--cream-deep); /* holds the circle while the photo loads */
}
/* Initials stand-in for a member with no headshot — every year has one */
.board-card .board-initials {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-size: 2.1rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--fp-blue);
background: var(--fp-sky-wash);
}
/* Name and role share a fixed block so cards stay level when a role wraps
to two lines (e.g. "Early Learners Class Rep") */
.board-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25em; }
.board-card .role {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.4;
text-transform: uppercase;
color: var(--fp-blue);
text-wrap: balance;
}
/* ---- Gallery grid (About page) ---- */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: 1rem;
margin-top: 2.4rem;
}
.gallery-grid img {
width: 100%;
height: 15rem;
object-fit: cover;
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
/* ---- Long-form client text ---- */
.prose { max-width: 65ch; margin-inline: auto; }
.prose p { margin: 0 0 1.2em; }
/* ---- Checklists (membership, Positive Discipline) ---- */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
position: relative;
padding: 0.45rem 0 0.45rem 1.9rem;
}
.check-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.78em;
width: 0.95rem;
height: 0.55rem;
border-left: 2.5px solid var(--fp-blue);
border-bottom: 2.5px solid var(--fp-blue);
transform: rotate(-45deg);
}
/* ---- Crest with real badge artwork ----
A card AT REST, not only on hover: without a resting background/border the
badge and label float loose and a ghost card materialises on hover. */
.crest img { width: 56px; height: 56px; border-radius: 50%; object-fit: contain; background: #fff; }
a.crest {
display: inline-flex;
align-items: center;
text-decoration: none;
background: var(--paper);
border: 1px solid var(--line);
box-shadow: var(--shadow-card);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.crest:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
/* ---- Reason cards on light backgrounds (Positive Discipline page) ---- */
.reason-card.on-cream { border: 1px solid var(--line); background: var(--paper); }
.reason-card.on-cream:hover { background: var(--paper); }
/* ---- Google Calendar embed ---- */
.cal-embed iframe {
width: 100%;
height: min(70vh, 38rem);
border: 0;
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow-card);
}
/* ---- Info cards (About membership) — even, non-stretching ---- */
/* ---- Membership / info cards (About) ----
Equal-height columns with a coloured header rail so three very different
kinds of content (a duty list, a rules list, a price table) read as one set
instead of three mismatched boxes. */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
gap: 1.4rem;
margin-top: 2.6rem;
align-items: stretch;
}
.info-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.info-card > * { display: flex; flex-direction: column; flex: 1; padding: 1.6rem 1.8rem 1.9rem; }
/* Header rail: heading sits on a tinted band, same height in every card */
.info-card h3 {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--fp-blue);
background: var(--fp-sky-wash);
border-bottom: 1px solid var(--line);
margin: -1.6rem -1.8rem 1.4rem;
padding: 1.05rem 1.8rem;
}
.info-card p { margin: 0 0 0.8rem; font-size: 0.95rem; }
.info-card .check-list { font-size: 0.95rem; }
.info-card .check-list li { padding-block: 0.35rem; }
/* the legal/disclaimer paragraph and anything else pinned to the bottom */
.info-card .fine { margin-top: auto; padding-top: 1rem; font-size: 0.8rem; color: var(--body); }
/* Non-discrimination statement: school-wide, so it sits under the whole grid
rather than inside the "Admission Requirements" card (which also let that
card run much taller than its neighbours). */
.nondiscrimination {
max-width: 62ch;
margin: 1.8rem auto 0;
text-align: center;
font-size: 0.82rem;
line-height: 1.6;
color: var(--body);
}
/* The costs card is the decision card — give it weight. */
.info-card.accent { border-color: var(--fp-blue); box-shadow: 0 6px 26px rgba(0, 79, 152, 0.16); }
.info-card.accent h3 { background: var(--fp-blue); color: #fff; border-bottom-color: var(--fp-blue); }
.info-card.accent .cta { margin-top: auto; padding-top: 1.5rem; }
.info-card.accent .cta .btn { width: 100%; }
/* ---- Large PDA crest (Positive Discipline intro) ---- */
.crest.large {
flex-direction: column;
padding: 1.9rem 3rem 1.6rem;
gap: 1.1rem;
border-radius: var(--radius);
}
.crest.large img { width: 118px; height: 118px; }
.crest.large .crest-name {
font-family: var(--display);
font-weight: 600;
font-size: 1.05rem;
color: var(--ink);
}
.crest.large .crest-link {
font-size: 0.78rem;
font-weight: 600;
color: var(--fp-link);
}
.crest.large .crest-link::after { content: " →"; }
/* ---- Testimonial read-more ---- */
.t-more {
font-family: var(--sans);
font-style: normal;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
border-bottom: 2px solid currentColor;
}
/* ---- Brochure inline embed (About) ---- */
/* Some card headings are h2 rather than h3 for document outline reasons
(they sit directly under the page h1). Match the h3 card look exactly. */
.prog-card h2 { font-size: 1.32rem; font-weight: 600; margin-bottom: 0.4em; }
.aud-card h2 { font-size: 1.45rem; font-weight: 600; margin-bottom: 0.5em; }
/* ---- Document card ----
Replaces the inline