/* ============================================================
Creche / Kleuterskool Template — warm premium, playful accents
Fonts: Baloo 2 (headings) + Nunito Sans (body), Google Fonts
RE-SKIN NOTE: to rebrand for a client, edit the VALUES in
:root below and nothing else. Keep every variable NAME.
BILINGUAL: this template is the only one in the set that ships
Afrikaans and English side by side. See the ".lang" block below
and TEMPLATE-README section 4 before touching the markup.
============================================================ */
:root {
/* Every value below is sampled from the Klein Akker logo and then darkened
until it clears WCAG AA against the surface it actually sits on. The logo's
own tints are too light for body text — do not paste them back in raw.
Measured ratios are noted per token; re-check them if you change a value. */
/* --- surfaces: the logo's cream --- */
--bg: #FAF6EF;
--surface: #FFFDF9;
--surface-2: #F1EBE0;
--line: rgba(74, 58, 46, 0.10);
--line-strong: rgba(74, 58, 46, 0.22);
/* --- text: the logo's trunk brown --- */
--text: #4A3A2E; /* 10.1:1 on --bg */
--muted: #6E6053; /* 5.6:1 on --bg, 5.1:1 on --surface-2 */
/* --- accents: sage green + terracotta, from the wordmark and the children --- */
--accent: #4F6B3C; /* 5.6:1 on --bg; --on-accent over it is 5.8:1 */
--accent-dark: #3F5730; /* hover — 7.8:1 against --on-accent */
--accent-2: #9C5236; /* terracotta — eyebrows, badges, section labels.
5.3:1 on --bg, 4.8:1 on --surface-2 */
--accent-soft: rgba(79, 107, 60, 0.10);
--accent-line: rgba(79, 107, 60, 0.38);
/* mustard, from the logo's leaves and the third child — crayon underline,
squiggle dividers, timeline dots, big display numerals. 3.5:1 on --bg and
3.2:1 on --surface-2, so it clears AA for LARGE text (24px+) only.
Never use it for body copy or small text. */
--gold: #A87C22;
/* text colour that sits ON --accent — must stay AA (4.5:1) */
--on-accent: #FDFBF6;
--font-head: 'Baloo 2', 'Trebuchet MS', sans-serif;
--font-body: 'Nunito Sans', system-ui, sans-serif;
--wrap: 1180px;
--radius: 20px;
/* clay-lite: a tight contact shadow under a soft wide one */
--shadow: 0 2px 6px rgba(74, 58, 46, 0.06), 0 18px 40px rgba(74, 58, 46, 0.12);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.7;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: var(--font-head);
/* 1.24 rather than a tighter display setting: the crayon underline lives
inside the line box, and Afrikaans headings wrap more often than English */
line-height: 1.24;
letter-spacing: -0.005em;
font-weight: 600;
text-wrap: balance;
}
/* the signature: the emphasised phrase goes apricot, and (on h1/h2) picks up
the hand-drawn crayon underline defined further down */
h1 em, h2 em, h3 em { font-style: normal; font-weight: 700; color: var(--accent); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
::selection { background: var(--accent); color: var(--on-accent); }
/* ---------- bilingual ----------
Every string ships twice, as sibling elements carrying class="lang" and a
real lang attribute. The value decides which one renders;
an inline script in each sets it before first paint, so there is no
flash and no layout shift. With JavaScript off, the markup default (en) is
what you get — a complete English site, with Afrikaans one tap away.
Switching the default is a markup change, not a CSS one: flip
and data-lang, flip which half of each data-*-af / data-*-en pair the plain
attribute mirrors, and flip aria-pressed on the toggle buttons.
HARD RULE: never put .reveal and .lang on the SAME element. A hidden-language
element is display:none, so it never intersects the viewport, never gets .in,
and would sit at opacity 0 forever once the visitor switched language. Reveals
go on the structural wrapper; the lang pair lives inside it. */
html[data-lang="af"] .lang[lang="en"] { display: none !important; }
html[data-lang="en"] .lang[lang="af"] { display: none !important; }
.lang-switch {
display: inline-flex; align-items: center; flex-shrink: 0;
border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px;
background: var(--surface);
}
.lang-switch button {
font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em;
min-width: 42px; min-height: 34px; padding: 6px 12px;
border: 0; border-radius: 999px; background: transparent; color: var(--muted);
cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
/* the switch is a 34px control inside a 44px-tall strip — the strip is the tap target */
.header .lang-switch { min-height: 44px; padding: 4px; }
/* ---------- skip link ---------- */
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 200;
background: var(--accent); color: var(--on-accent); padding: 10px 18px; border-radius: 0 0 12px 0;
font-weight: 700;
}
.skip-link:focus { left: 0; }
/* ---------- reveal animations ---------- */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
transition-delay: var(--d, 0ms);
will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.float { animation: none !important; transform: none !important; }
.hero__bg img { animation: none !important; transform: none !important; }
.crayon path { stroke-dashoffset: 0 !important; transition: none !important; }
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* ---------- crayon underline ----------
Signature motion #2. A hand-drawn stroke under the emphasised words that
draws itself in as the heading reveals. Purely decorative, aria-hidden in
the markup, and it animates stroke-dashoffset only — no layout involved. */
.pen { position: relative; display: inline-block; }
/* Sits inside the line box, not below it. A larger negative offset dropped the
stroke onto the following line whenever the heading wrapped. */
.crayon {
position: absolute; left: -2%; right: -2%; bottom: -0.04em; width: 104%; height: 0.26em;
overflow: visible; pointer-events: none;
}
.crayon path {
fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round;
stroke-dasharray: 320; stroke-dashoffset: 320;
transition: stroke-dashoffset 0.6s var(--ease) 0.3s;
}
.reveal.in .crayon path, .in .crayon path { stroke-dashoffset: 0; }
/* ---------- floating shapes ----------
Signature motion #1. Three soft shapes drifting behind the hero copy at
different periods so they never sync up into a pulse. */
/* the decor layer sits above the hero scrim (z-index -1) and below the copy */
.hero__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero > .wrap { position: relative; z-index: 1; }
/* Kept to the right third, clear of the copy column — an earlier placement put
the sun behind the hero trust list and made it hard to read. */
.float { position: absolute; opacity: 0.5; }
.float--1 { right: 5%; top: 24%; width: 138px; animation: float1 7s ease-in-out infinite alternate; }
.float--2 { right: 7%; bottom: 20%; width: 72px; animation: float2 9s ease-in-out infinite alternate; }
.float--3 { right: 15%; top: 12%; width: 56px; animation: float3 6s ease-in-out infinite alternate; }
@media (max-width: 1180px) { .float--2 { display: none; } }
@keyframes float1 { from { transform: translateY(-9px) rotate(-2deg); } to { transform: translateY(9px) rotate(2deg); } }
@keyframes float2 { from { transform: translateY(8px) rotate(2deg); } to { transform: translateY(-8px) rotate(-3deg); } }
@keyframes float3 { from { transform: translateY(-6px) rotate(3deg); } to { transform: translateY(10px) rotate(-2deg); } }
@media (max-width: 900px) { .float { display: none; } }
/* ---------- squiggle divider ---------- */
.squiggle { display: block; width: 148px; height: 14px; margin: 0 auto; color: var(--gold); opacity: 0.55; }
.squiggle path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-body); font-weight: 700; font-size: 0.98rem;
letter-spacing: 0.01em;
padding: 15px 30px; border-radius: 999px; border: 1px solid transparent;
cursor: pointer; transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
min-height: 48px;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 2px 5px rgba(74, 58, 46, 0.10); }
.btn--primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(79, 107, 60, 0.30); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--lg { padding: 18px 36px; font-size: 1.02rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 8px;
}
/* ---------- header ---------- */
.header {
position: fixed; inset: 0 0 auto 0; z-index: 100;
transition: background 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
border-bottom: 1px solid transparent;
}
.header.scrolled {
background: rgba(250, 246, 239, 0.93);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom-color: var(--line);
box-shadow: 0 8px 28px rgba(74, 58, 46, 0.08);
}
.header__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 18px; padding: 14px 24px; max-width: 1320px; margin: 0 auto;
}
/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; min-height: 44px; }
/* This template ships no logo file — the monogram IS the mark. If a client has
real artwork, add an ![]()
and drop the monogram; use one
or the other, never both. */
.brand__mark {
width: 46px; height: 46px; border-radius: 15px; flex-shrink: 0;
display: grid; place-items: center; position: relative;
background: var(--accent);
color: var(--on-accent);
font-family: var(--font-head); font-weight: 700; font-size: 1.32rem;
box-shadow: 0 2px 5px rgba(74, 58, 46, 0.14);
}
/* the acorn dot from the favicon, carried through to the header mark */
.brand__mark::after {
content: ""; position: absolute; top: 7px; right: 7px;
width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent); opacity: 0.9;
}
.brand__logo { height: 46px; width: auto; flex-shrink: 0; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.01em; }
.brand__tag {
font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted); font-weight: 700;
}
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
font-family: var(--font-body); font-weight: 600; font-size: 0.96rem;
padding: 10px 13px; border-radius: 10px; color: var(--text);
position: relative; transition: color 0.2s;
}
.nav a::after {
content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; border-radius: 2px;
background: var(--accent);
transform: scaleX(0); transform-origin: left; transition: transform 0.2s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--accent); }
.header__cta { display: flex; align-items: center; gap: 14px; }
.header__phone {
font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; white-space: nowrap;
color: var(--text); transition: color 0.2s;
}
.header__phone:hover { color: var(--accent); }
.header__cta .btn { padding: 11px 22px; min-height: 44px; }
/* the switch inside the collapsed nav panel — hidden until the panel exists */
.nav__lang { display: none; }
.nav-toggle {
display: none; background: none; border: 1px solid var(--line-strong); border-radius: 12px;
width: 46px; height: 44px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1020px) {
.nav {
position: fixed; top: 76px; left: 16px; right: 16px; z-index: 99;
flex-direction: column; align-items: stretch; gap: 2px;
background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
padding: 12px; box-shadow: var(--shadow);
opacity: 0; transform: translateY(-12px); pointer-events: none;
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav.open { opacity: 1; transform: none; pointer-events: auto; }
.nav a { padding: 13px 16px; }
.nav a::after { display: none; }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
/* the header switch goes away with the desktop layout; this one takes over,
so the language control is never more than one tap from any page */
.nav__lang {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 8px; padding: 12px 16px 4px; border-top: 1px solid var(--line);
font-size: 0.85rem; color: var(--muted); font-weight: 600;
}
.nav-toggle { display: inline-flex; }
.header__phone { display: none; }
.header .lang-switch { display: none; }
}
@media (max-width: 560px) {
.header__cta .btn { display: none; }
.brand__mark { width: 42px; height: 42px; font-size: 1.2rem; }
.brand__name { font-size: 1.1rem; }
}
@media (max-width: 370px) {
.brand__tag { display: none; }
}
/* ---------- hero ----------
Light theme: legibility comes from a CREAM SCRIM laid over the photo, not
from darkening the image. Text always sits on cream, so the crop can shift
at any breakpoint without contrast ever failing. */
.hero {
position: relative; display: flex; align-items: center;
min-height: min(92dvh, 880px); padding: 180px 0 100px; overflow: hidden; isolation: isolate;
}
.hero--page { min-height: min(58dvh, 600px); padding: 158px 0 76px; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 10s var(--ease) forwards; }
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero::after {
content: ""; position: absolute; inset: 0; z-index: -1;
/* .hero__content is 700px wide inside an 1180px wrap, so on a 1280px viewport
the copy runs to roughly 77% of the frame. Hold the scrim near-opaque to
just past that, then fall away — a softer ramp put the last words of a
wrapped h1 and the trust list straight onto the photo. */
background:
linear-gradient(100deg,
rgba(250, 246, 239, 0.98) 0%,
rgba(250, 246, 239, 0.96) 46%,
rgba(250, 246, 239, 0.88) 68%,
rgba(250, 246, 239, 0.34) 88%,
rgba(250, 246, 239, 0.10) 100%),
linear-gradient(180deg, rgba(250, 246, 239, 0.38) 0%, rgba(250, 246, 239, 0) 45%);
}
.hero__content { max-width: 700px; position: relative; }
.eyebrow {
display: inline-flex; align-items: center; gap: 13px;
font-family: var(--font-body); font-weight: 700; font-size: 0.75rem;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2);
margin-bottom: 24px;
}
.eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--gold); flex-shrink: 0; }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); margin-bottom: 22px; }
.hero__lede { font-size: clamp(1.04rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 560px; margin-bottom: 34px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 26px; border-top: 1px solid var(--line-strong); }
.hero__trust li { display: flex; align-items: center; gap: 10px; font-size: 0.93rem; color: var(--muted); }
.hero__trust svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
@media (max-width: 700px) {
/* content goes full-width on mobile, so the scrim has to cover more of the frame */
.hero::after {
background:
linear-gradient(180deg,
rgba(250, 246, 239, 0.91) 0%,
rgba(250, 246, 239, 0.95) 45%,
rgba(250, 246, 239, 0.98) 100%);
}
}
/* ---------- sections ---------- */
.section { padding: clamp(72px, 9vw, 112px) 0; position: relative; }
.section--tint { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { max-width: 700px; margin-bottom: clamp(44px, 5vw, 66px); }
.section__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 16px; }
.section__head p { color: var(--muted); font-size: 1.05rem; }
.section__head--row {
max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.section__head--row > div { max-width: 640px; }
.section__head--mid { margin-left: auto; margin-right: auto; text-align: center; }
/* ---------- age-group pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1020px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s;
}
.pillar__media { overflow: hidden; }
/* height:auto is load-bearing. The width/height attributes on ![]()
are
presentational hints, so without it the attribute height (900) stays definite,
aspect-ratio is ignored, and the card grows to a 900px-tall image. */
.pillar img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s var(--ease); }
/* signature motion #3: the card lifts AND tips a fraction of a degree — enough
to read as playful, small enough that the type never looks crooked */
.pillar:hover { transform: translateY(-4px) rotate(-0.7deg); box-shadow: var(--shadow); border-color: var(--accent-line); }
.pillar:hover img { transform: scale(1.05); }
.pillar:active { transform: scale(0.98); }
.pillar__body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.pillar__age {
display: inline-flex; align-self: flex-start; align-items: center;
font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent-2); background: rgba(156, 82, 54, 0.10); border-radius: 999px; padding: 5px 12px;
margin-bottom: 13px;
}
.pillar h3 { font-size: 1.36rem; margin-bottom: 10px; }
.pillar p { font-size: 0.95rem; color: var(--muted); margin-bottom: 18px; flex-grow: 1; }
.pillar__link {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.9rem; font-weight: 700; color: var(--accent);
}
.pillar__link svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.pillar:hover .pillar__link svg { transform: translateX(5px); }
/* ---------- value tiles ---------- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .values { grid-template-columns: 1fr; } }
.value {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 30px 26px; transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s var(--ease);
}
.value:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.value__icon {
width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center;
background: var(--accent-soft); color: var(--accent); margin-bottom: 20px;
}
.value__icon svg { width: 26px; height: 26px; }
.value h3 { font-size: 1.16rem; margin-bottom: 10px; }
.value p { color: var(--muted); font-size: 0.95rem; }
/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 24px 22px; text-align: center;
}
.stat strong {
display: block; font-family: var(--font-head); font-weight: 700; font-size: 2.1rem;
color: var(--gold); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat span { font-size: 0.87rem; color: var(--muted); }
/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.split--flip .split__media { order: 2; }
@media (max-width: 900px) {
.split { grid-template-columns: 1fr; }
.split--flip .split__media { order: 0; }
}
.split__media { position: relative; }
.split__media img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; height: 100%; object-fit: cover; }
/* organic blob mask — feature images only. Grids stay rounded-rect so the page
never turns into a lava lamp. */
.split__media--blob img { border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%; border: 0; }
.split__media--stack { display: grid; gap: 18px; }
.split__badge {
position: absolute; left: -16px; bottom: 26px;
background: var(--accent); color: var(--on-accent); border-radius: 18px; padding: 18px 22px;
font-family: var(--font-head); box-shadow: var(--shadow);
}
.split__badge strong { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1; }
.split__badge small { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; opacity: 0.9; }
@media (max-width: 560px) { .split__badge { left: 10px; } }
.split__content h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); margin-bottom: 20px; }
.split__content > p { color: var(--muted); margin-bottom: 16px; font-size: 1.03rem; }
.ticklist { margin-top: 26px; display: grid; gap: 15px; }
.ticklist li { display: flex; gap: 13px; align-items: flex-start; }
.ticklist svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 5px; }
.ticklist strong { font-family: var(--font-head); font-weight: 600; }
.ticklist span { color: var(--muted); }
/* ---------- programme blocks ---------- */
.prog { scroll-margin-top: 100px; }
.prog + .prog { margin-top: clamp(56px, 7vw, 92px); }
.prog__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.chip {
display: inline-flex; align-items: center; gap: 7px;
border-radius: 999px; padding: 7px 15px; font-size: 0.83rem; font-weight: 700;
background: var(--accent-soft); color: var(--accent);
}
.chip--blue { background: rgba(156, 82, 54, 0.10); color: var(--accent-2); }
.chip svg { width: 15px; height: 15px; }
/* ---------- daily routine timeline ---------- */
.timeline { position: relative; max-width: 760px; margin: 0 auto; padding-left: 34px; }
.timeline::before {
content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px;
background: linear-gradient(180deg, var(--accent-line), rgba(168, 124, 34, 0.18));
}
.timeline li { position: relative; padding: 0 0 30px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
content: ""; position: absolute; left: -34px; top: 8px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--gold); border: 3px solid var(--bg);
transform: scale(0.5); opacity: 0;
transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
transition-delay: var(--d, 0ms);
}
.timeline li.in::before { transform: scale(1); opacity: 1; }
.timeline time {
display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.06rem;
color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: 2px;
}
.timeline h3 { font-size: 1.1rem; margin-bottom: 4px; }
.timeline p { color: var(--muted); font-size: 0.95rem; }
.timeline .half {
display: inline-block; margin-top: 7px;
font-size: 0.8rem; font-weight: 700; color: var(--accent-2);
background: rgba(156, 82, 54, 0.10); border-radius: 999px; padding: 4px 12px;
}
/* ---------- fees table ---------- */
/* wrapper scrolls rather than the page — a four-column money table cannot be
made to fit a 320px screen without shrinking the figures past readability */
.table-wrap {
overflow-x: auto; -webkit-overflow-scrolling: touch;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.fees { width: 100%; border-collapse: collapse; min-width: 460px; }
.fees caption { text-align: left; padding: 22px 24px 0; color: var(--muted); font-size: 0.92rem; }
.fees th, .fees td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.fees thead th {
font-family: var(--font-body); font-size: 0.74rem; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2);
border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.fees tbody th { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; }
.fees tbody th small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.84rem; color: var(--muted); }
.fees td {
font-family: var(--font-head); font-weight: 600; font-size: 1.08rem;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fees tbody tr:last-child th, .fees tbody tr:last-child td { border-bottom: 0; }
.fees tbody tr { transition: background 0.2s var(--ease); }
.fees tbody tr:hover { background: var(--accent-soft); }
/* the one figure that carries the hand-drawn circle */
.fees .ringed { position: relative; color: var(--accent); display: inline-block; padding: 2px 10px; }
.ring { position: absolute; inset: -8px -6px; width: calc(100% + 12px); height: calc(100% + 16px); overflow: visible; pointer-events: none; }
.ring path {
fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round;
stroke-dasharray: 300; stroke-dashoffset: 300;
transition: stroke-dashoffset 0.8s var(--ease) 0.35s;
}
.in .ring path { stroke-dashoffset: 0; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
@media (max-width: 900px) { .notes { grid-template-columns: 1fr; } }
.note-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
}
.note-card h3 { font-size: 1.08rem; margin-bottom: 9px; }
.note-card p { color: var(--muted); font-size: 0.94rem; }
.note-card strong { color: var(--text); }
/* ---------- staff cards ---------- */
.staff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .staff { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .staff { grid-template-columns: 1fr; } }
.person {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 28px 26px; transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s var(--ease);
}
.person:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.person__initials {
width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center;
background: var(--accent-soft); color: var(--accent);
font-family: var(--font-head); font-weight: 700; font-size: 1.24rem; margin-bottom: 18px;
}
.person h3 { font-size: 1.16rem; margin-bottom: 2px; }
.person__role { display: block; font-size: 0.87rem; font-weight: 700; color: var(--accent-2); margin-bottom: 14px; }
.person p { color: var(--muted); font-size: 0.94rem; margin-bottom: 16px; }
.person__quals { display: flex; flex-wrap: wrap; gap: 7px; }
.person__quals li {
font-size: 0.76rem; font-weight: 700; color: var(--muted);
border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 11px;
}
/* ---------- registration badges ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.badge {
display: flex; align-items: center; gap: 13px;
background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
padding: 13px 22px 13px 15px; box-shadow: 0 2px 5px rgba(74, 58, 46, 0.06);
transition: transform 0.2s var(--ease), border-color 0.2s;
}
/* sticker feel: each one sits at a slightly different angle, and straightens on hover */
.badge:nth-child(odd) { transform: rotate(-1.6deg); }
.badge:nth-child(even) { transform: rotate(1.4deg); }
.badge:hover { transform: rotate(0deg) translateY(-3px); border-color: var(--accent-line); }
.badge__icon {
width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
background: var(--accent-soft); color: var(--accent);
}
.badge__icon svg { width: 19px; height: 19px; }
.badge strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; line-height: 1.25; }
.badge span { font-size: 0.8rem; color: var(--muted); }
/* ---------- gallery mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
.mosaic figure {
position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
aspect-ratio: 4 / 3; margin: 0;
}
.mosaic figure.tall { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 560px) { .mosaic figure.tall { grid-row: span 1; aspect-ratio: 4 / 3; } }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.mosaic figure:hover img { transform: scale(1.04); }
/* caption sits on a dark scrim because it overlays photography, not the page */
.mosaic figcaption {
position: absolute; inset: auto 0 0 0; padding: 44px 18px 15px;
background: linear-gradient(180deg, transparent, rgba(46, 36, 28, 0.88));
font-size: 0.87rem; font-weight: 600; color: #FFFCF7;
opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mosaic figure:hover figcaption, .mosaic figure:focus-within figcaption { opacity: 1; transform: none; }
/* ---------- pill list ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills li {
border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 18px;
font-size: 0.89rem; font-weight: 600; color: var(--text);
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pills li:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* ---------- opening hours ---------- */
.hours { margin-top: 2px; }
.hours div {
display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem;
}
.hours div:last-child { border-bottom: 0; }
.hours dt { color: var(--muted); }
.hours dd { font-family: var(--font-head); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---------- CTA band ---------- */
.cta-band {
position: relative; overflow: hidden;
background: var(--surface);
border: 1px solid var(--accent-line);
border-radius: 26px; padding: clamp(46px, 6vw, 74px); text-align: center;
}
.cta-band::before {
content: ""; position: absolute; inset: -50%;
background:
radial-gradient(circle at 78% 16%, rgba(79, 107, 60, 0.10), transparent 44%),
radial-gradient(circle at 16% 84%, rgba(156, 82, 54, 0.10), transparent 46%);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 14px; }
.cta-band p { color: var(--muted); max-width: 580px; margin: 0 auto 30px; font-size: 1.04rem; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.contact-card h3 { font-size: 1.36rem; margin-bottom: 20px; }
.contact-card ul { display: grid; gap: 19px; }
.contact-card li { display: flex; gap: 15px; align-items: flex-start; }
.contact-card li svg { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; margin-top: 4px; }
.contact-card li > div { min-width: 0; }
.contact-card li strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; margin-bottom: 2px; }
.contact-card li a, .contact-card li span { color: var(--muted); font-size: 0.96rem; }
.contact-card li a:hover { color: var(--accent); }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.form h3 { font-size: 1.36rem; margin-bottom: 8px; }
.form > p { color: var(--muted); font-size: 0.96rem; margin-bottom: 24px; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.89rem; margin-bottom: 7px; }
.form-row .req { color: var(--accent); }
.form-row input, .form-row select, .form-row textarea {
width: 100%; padding: 14px 16px; min-height: 48px;
background: var(--bg); color: var(--text);
border: 1px solid var(--line-strong); border-radius: 12px;
font-family: var(--font-body); font-size: 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row small { display: block; margin-top: 7px; font-size: 0.85rem; color: var(--muted); }
.form-row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .form-row--pair { grid-template-columns: 1fr; } }
/* radio pair — the whole pill is the target, never the 16px dot */
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-row label {
display: inline-flex; align-items: center; gap: 9px; margin: 0;
border: 1px solid var(--line-strong); border-radius: 999px; padding: 11px 18px; min-height: 46px;
cursor: pointer; font-weight: 600; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.radio-row label:hover { border-color: var(--accent); color: var(--accent); }
.radio-row input { width: auto; min-height: 0; accent-color: var(--accent); margin: 0; }
.radio-row input:focus-visible + span { text-decoration: underline; }
.form-note { margin-top: 16px; font-size: 0.95rem; color: var(--accent-2); font-weight: 600; min-height: 1.4em; }
.form__legal { margin-top: 14px; font-size: 0.84rem; color: var(--muted); }
/* ---------- page hero breadcrumbs ---------- */
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 0.88rem; color: var(--muted); margin-bottom: 6px; }
/* padded so the breadcrumb link still clears a 44px tap target on mobile */
.crumbs a { display: inline-block; padding: 11px 0; }
.crumbs a:hover { color: var(--accent); }
/* separator stays --muted, not --gold: at 14px it needs the full 4.5:1 */
.crumbs span { color: var(--muted); }
/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--surface-2); padding: 66px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 34px; margin-bottom: 44px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .brand { margin-bottom: 18px; }
.footer__brand p { color: var(--muted); font-size: 0.95rem; max-width: 300px; }
.footer h4 {
font-family: var(--font-body); font-size: 0.73rem; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 18px;
}
.footer ul { display: grid; gap: 11px; }
.footer ul a, .footer ul span { color: var(--muted); font-size: 0.95rem; transition: color 0.2s; }
.footer ul a:hover { color: var(--accent); }
.footer__bottom {
border-top: 1px solid var(--line); padding-top: 24px;
display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
color: var(--muted); font-size: 0.86rem;
}
/* ---------- floating call button (mobile) ---------- */
.call-fab {
position: fixed; right: 18px; bottom: 18px; z-index: 90;
width: 58px; height: 58px; border-radius: 50%;
background: var(--accent); color: var(--on-accent); display: none; place-items: center;
box-shadow: 0 12px 30px rgba(79, 107, 60, 0.38);
transition: transform 0.2s var(--ease);
}
.call-fab:hover { transform: scale(1.06); }
.call-fab svg { width: 23px; height: 23px; }
@media (max-width: 700px) {
.call-fab { display: grid; }
/* comfortable tap targets + clearance so the FAB never sits on the last line */
.footer ul { gap: 2px; }
.footer ul a, .footer ul span { display: inline-block; padding: 10px 0; }
.contact-card li a { display: inline-block; padding: 10px 0; }
}
/* ---------- demo ribbon (remove when handing a real site over) ---------- */
.demo-note {
background: var(--surface); border-top: 1px solid var(--line);
padding: 15px 24px; text-align: center; font-size: 0.83rem; color: var(--muted);
}
.demo-note strong { color: var(--accent-2); font-weight: 700; }
/* ---------- WhatsApp ---------- */
/* WhatsApp is how most South African parents actually make first contact, so this
float shows on every breakpoint, not just mobile. The green is WhatsApp's own
brand colour and is deliberately NOT driven from the :root tokens — leave it
alone when re-skinning. */
.wa-fab {
position: fixed; right: 18px; bottom: 18px; z-index: 91;
width: 58px; height: 58px; border-radius: 50%;
background: #25d366; color: #04240f; display: grid; place-items: center;
box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42);
transition: transform 0.2s var(--ease);
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 28px; height: 28px; }
.btn--whatsapp { background: #25d366; color: #04240f; border-color: #25d366; }
.btn--whatsapp:hover { background: #1fbe5b; border-color: #1fbe5b; color: #04240f; }
.btn--whatsapp svg { width: 20px; height: 20px; }
@media (max-width: 700px) {
/* stack the call button above the WhatsApp float so they never overlap */
.call-fab { bottom: 86px; }
/* Two stacked floats reach 144px up the viewport. Reserve room below the
footer's last line so neither ever lands on it. This MUST hang off .footer,
not .demo-note, for two reasons: the demo note is deleted at go-live and the
clearance has to survive that, and .demo-note's base rule appears LATER in
this file with a `padding` shorthand that would silently reset any
padding-bottom set here. */
.footer { padding-bottom: 172px; }
}