/* ==========================================================================
WILDKATZ GYMNASTICS — SITE DESIGN
--------------------------------------------------------------------------
This one file controls how EVERY page looks. Change a colour here and it
updates across the whole site at once.
Contents:
1. Colours and sizes 7. Class cards
2. Basics 8. Membership box
3. Buttons 9. FAQs
4. Header and menu 10. Bottom banner and footer
5. Hero 11. Phones and tablets
6. Year filter
========================================================================== */
/* ==========================================================================
1. COLOURS AND SIZES
Every colour on the site comes from this list. Taken from the logo.
========================================================================== */
:root{
--orange:#F07E1E; /* brand orange, straight from the logo */
--orange-deep:#B85508; /* darker orange, for orange text on white */
--orange-tint:#FDF0E2; /* pale wash, for soft background blocks */
--charcoal:#2A242A; /* headings and dark text, also from the logo */
--body:#5C5359; /* normal paragraph text */
--line:#EDE7E0; /* thin borders */
--page:#FBF7F3; /* page background */
--white:#FCFCFC;
--radius:16px; /* corner roundness — raise for softer */
--shadow:0 1px 2px rgba(42,36,42,.04), 0 8px 24px rgba(42,36,42,.06);
--font-head:'Baloo 2', 'Plus Jakarta Sans', sans-serif;
--font-body:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ==========================================================================
2. BASICS
========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font-body);
color:var(--body);background:var(--page);
-webkit-font-smoothing:antialiased;line-height:1.6;
}
/* h4 belongs in here too. Left out, it fell back to the body font and the
grey body colour, so h4 headings looked like plain bold text sitting in a
different colour from every other heading on the page. */
h1,h2,h3,h4{font-family:var(--font-head);color:var(--charcoal);line-height:1.15;font-weight:700}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
/* Invisible on screen, but keyboards and screen readers still find it.
Used for the filter radio buttons and the menu checkbox. */
.visually-hidden{
position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* Orange outline when tabbing with a keyboard — needed for accessibility */
a:focus-visible,summary:focus-visible,input:focus-visible + .filters label{
outline:3px solid var(--orange-deep);outline-offset:3px;border-radius:8px;
}
/* ==========================================================================
3. BUTTONS
--------------------------------------------------------------------------
Currently white text on orange, turning charcoal on hover and when pressed.
NOTE: white on this orange scores 2.72:1, below the 4.5:1 readability
standard, and phones have no hover so they only ever see the white.
To switch to charcoal permanently, change color:#fff to
color:var(--charcoal) in .btn-primary below. Nothing else needs touching.
========================================================================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:14px 28px;border-radius:999px;font-weight:600;font-size:15px;
font-family:var(--font-body);white-space:nowrap;
transition:background .15s ease,color .15s ease,transform .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 4px 14px rgba(240,126,30,.28)}
.btn-primary:hover,.btn-primary:active{color:var(--charcoal)}
.btn-ghost{background:#fff;color:var(--charcoal);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--orange);background:var(--orange-tint)}
.btn-white{background:#fff;color:var(--orange-deep)}
.btn-white:hover{background:var(--orange-tint);color:var(--charcoal)}
.btn-sm{padding:11px 22px;font-size:14px}
/* ==========================================================================
4. HEADER AND MENU
The mobile menu is a checkbox. Ticking it reveals the links. No JavaScript.
========================================================================== */
header{
position:sticky;top:0;z-index:60;background:rgba(252,252,252,.94);
backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:96px;position:relative}
/* ---- LOGO -----------------------------------------------------------------
Sits inside the bar, vertically centred. The header is 96px and the logo
is 68px, which leaves 14px of clear space above and below it.
To resize: change the height below. Keep it at least 20px smaller than the
header height or it'll feel jammed against the edges.
Uses logo-trimmed.png, not logo.png. The original is a square with half its
height as empty transparent space — the browser was sizing that padding
rather than the cat, which is what left a gap above it.
--------------------------------------------------------------------------- */
.logo{line-height:0}
.logo img{height:68px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:15px;font-weight:600;transition:color .15s}
.nav-links a:hover{color:var(--orange-deep)}
.nav-links a.active{color:var(--orange-deep);position:relative}
.nav-links a.active::after{
content:"";position:absolute;left:0;right:0;bottom:-7px;height:3px;
background:var(--orange);border-radius:2px;
}
.burger{display:none;cursor:pointer;padding:8px;color:var(--charcoal)}
/* ---- CLASSES DROPDOWN -----------------------------------------------------
On a computer, hovering Classes opens a small panel. "Classes" itself stays
a normal link, so clicking it still goes to the page — the panel is a
shortcut, not a gate.
:focus-within is what makes it work for someone tabbing with a keyboard
rather than using a mouse. Don't remove it.
On phones this all switches off — see section 11. The sub-items just sit
indented in the open menu instead, because a hover doesn't exist there.
--------------------------------------------------------------------------- */
.has-sub{position:relative;display:flex;align-items:center;gap:5px}
.has-sub > .caret{transition:transform .15s ease;color:var(--body)}
.has-sub:hover > .caret,.has-sub:focus-within > .caret{transform:rotate(180deg);color:var(--orange-deep)}
.submenu{
display:none;position:absolute;top:100%;left:-18px;min-width:210px;
background:#fff;border:1px solid var(--line);border-radius:14px;
box-shadow:0 8px 28px rgba(42,36,42,.12);padding:8px;
}
/* The invisible strip that stops the panel vanishing as the cursor travels
down to it. Without this the menu flickers shut halfway. */
.submenu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{display:block}
.submenu a{
display:block;padding:11px 14px;border-radius:10px;font-size:14.5px;font-weight:600;
}
.submenu a small{display:block;font-size:12px;font-weight:400;color:var(--body);margin-top:1px}
.submenu a:hover{background:var(--orange-tint);color:var(--charcoal)}
/* Artistic and Tumble sit indented under Recreational. This is only an indent,
NOT a second dropdown — nested dropdowns are miserable to use. */
.submenu a.nested{padding-left:30px;font-size:13.5px;font-weight:500;position:relative}
.submenu a.nested::before{
content:"";position:absolute;left:16px;top:50%;width:7px;height:1.5px;
background:var(--line);
}
.submenu hr{border:none;border-top:1px solid var(--line);margin:7px 10px}
/* ==========================================================================
5. HERO — full width photo with the heading sitting on top
The dark gradient is what keeps the words readable whatever photo is used.
========================================================================== */
/* min-height is how tall the photo is. Raise it to fill more of the screen,
but much past 700px and people have to scroll before they see any classes. */
/* Height of the Classes page banner. Raise or lower this one number to make
the banner taller or shorter — the photo and the words follow it. */
.hero{position:relative;min-height:840px;display:flex;align-items:flex-end;overflow:hidden}
.hero-photo{position:absolute;inset:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* The gradient. Raise the .75 to darken if a photo is too bright for the text. */
.hero-scrim{
position:absolute;inset:0;
background:linear-gradient(to top, rgba(42,36,42,.86) 0%, rgba(42,36,42,.55) 38%, rgba(42,36,42,.10) 72%, rgba(42,36,42,0) 100%);
}
/* The bottom padding here has to clear the white panel below, which pulls
itself UP by 52px (see .panel margin-top). So the real gap you see is
this number minus 52. 104 gives roughly 50px of breathing room. */
.hero-copy{position:relative;padding:0 0 104px;max-width:620px}
.hero h1{color:#fff;font-size:clamp(36px,5.6vw,60px);margin-bottom:16px}
.hero-copy > p{color:rgba(255,255,255,.94);font-size:17px;max-width:440px;margin-bottom:28px}
.eyebrow{
font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--orange);margin-bottom:16px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
/* ==========================================================================
5b. VIDEO HERO — home page only
--------------------------------------------------------------------------
The video fills the screen with a dark wash over it so the words stay
readable. If the video is missing, slow or blocked, the poster image shows
instead — that's the fallback, and it needs no code to make it work.
The video tag needs all four of these or it won't behave:
autoplay muted browsers only autoplay silent video
loop runs continuously
playsinline stops iPhones hijacking the screen into fullscreen
========================================================================== */
.video-hero{
position:relative;min-height:88vh;display:flex;align-items:center;
overflow:hidden;background:var(--charcoal);
}
.video-hero video,.video-hero .poster{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* The dark wash. Raise .62 towards 1 if a clip is too bright for the text. */
.video-hero .scrim{
position:absolute;inset:0;
background:linear-gradient(to top, rgba(42,36,42,.82) 0%, rgba(42,36,42,.62) 45%, rgba(42,36,42,.48) 100%);
}
.video-hero .wrap{position:relative;z-index:2;text-align:center}
.video-hero h1{color:#fff;font-size:clamp(40px,7vw,76px);margin-bottom:18px}
.video-hero > .wrap > p{
color:rgba(255,255,255,.94);font-size:19px;max-width:560px;margin:0 auto 32px;
}
.video-hero .hero-actions{justify-content:center}
/* If someone has "reduce motion" switched on in their system settings,
the video is hidden and they get the still poster instead. */
@media (prefers-reduced-motion:reduce){
.video-hero video{display:none}
}
/* ==========================================================================
5c. SCROLLING SLOGAN
--------------------------------------------------------------------------
The text is written twice in the HTML and slides left by exactly half its
width, so the moment it finishes it's back where it started — the join is
invisible. The second copy is marked aria-hidden so screen readers only
ever read the slogan once.
Speed: raise the 34s to slow it down, lower it to speed it up.
========================================================================== */
.marquee{background:var(--charcoal);overflow:hidden;white-space:nowrap;padding:16px 0}
.marquee-track{display:inline-block;animation:marquee 34s linear infinite}
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee span{
font-family:var(--font-head);font-weight:700;font-size:21px;color:#fff;padding:0 4px;
}
.marquee i{font-style:normal;color:var(--orange);padding:0 18px;font-size:18px}
@media (prefers-reduced-motion:reduce){
.marquee-track{animation:none}
}
/* ==========================================================================
5d. HOME PAGE SECTIONS
========================================================================== */
/* LEAD PHOTO on a class page — a portrait photo beside the opening text.
Portrait, because that's the shape the class photos are. To swap the photo,
change the src in the page; nothing here needs touching. */
.lead{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:start;
margin-bottom:30px}
.lead-img{position:relative;border-radius:var(--radius);overflow:hidden;
background:var(--orange-tint);aspect-ratio:3/4;box-shadow:var(--shadow)}
.lead-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lead > div > p:first-child{margin-top:0}
@media (max-width:820px){
.lead{grid-template-columns:1fr;gap:24px}
.lead-img{max-width:340px;margin:0 auto}
}
.welcome{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.welcome h2{font-size:clamp(26px,3.4vw,38px)}
.welcome p{font-size:16px;margin-bottom:16px}
/* ---- TRUST BADGES ---------------------------------------------------------
Only put things here that are actually true. Parents check.
--------------------------------------------------------------------------- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trust-item{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:26px 24px;text-align:center;box-shadow:var(--shadow);
display:block;transition:box-shadow .15s ease,border-color .15s ease;
}
/* Only the ones that are links react to hover. Same rule as .route below —
the card must not move, or it flickers under the pointer. */
a.trust-item:hover{
border-color:var(--orange);
box-shadow:0 2px 4px rgba(42,36,42,.06), 0 12px 28px rgba(42,36,42,.12);
}
a.trust-item:hover .trust-icon{background:var(--orange);color:#fff}
.trust-item .go{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--orange-deep)}
.trust-icon{
width:52px;height:52px;border-radius:50%;background:var(--orange-tint);
color:var(--orange-deep);display:flex;align-items:center;justify-content:center;
margin:0 auto 14px;
}
.trust-item h3{font-size:18px;margin-bottom:5px}
.trust-item p{font-size:14px}
/* ---- "HOW OUR RECREATIONAL GYMNASTICS WORKS" -------------------------------
The explainer block above the class cards. It replaced a "what they'll
learn" dropdown on every single card, so it carries a fair bit of text and
needs the structure to stop it reading as one slab.
It sits in its own white panel, and the two sub-topics below the opening
paragraph sit side by side. On phones they stack — see the media query.
--------------------------------------------------------------------------- */
.howitworks{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:32px 34px;box-shadow:var(--shadow);margin-bottom:38px;
}
.howitworks h3{font-size:22px;margin-bottom:12px}
.howitworks > p{font-size:16px;margin-bottom:24px}
.howitworks b{color:var(--charcoal)} /* bold matches the headings, as elsewhere */
/* The two sub-topics. A line and a gap between them rather than a box each,
so they read as parts of the same explanation. */
.hiw-grid{
display:grid;grid-template-columns:1fr 1fr;gap:34px;
border-top:1px solid var(--line);padding-top:26px;
}
.hiw-grid h4{
font-size:17px;margin-bottom:10px;
display:flex;align-items:center;gap:9px;
}
.hiw-grid h4 svg{color:var(--orange-deep);flex:none}
.hiw-grid p{font-size:15px;margin-bottom:12px}
.hiw-grid p:last-child{margin-bottom:0}
.hiw-grid ol{margin:0 0 0 18px}
.hiw-grid li{font-size:15px;margin-bottom:8px}
.hiw-grid li:last-child{margin-bottom:0}
/* ---- ROUTE CARDS — the three ways in ---------------------------------------
Bigger than the old tiles, with room for a real description.
Change grid-template-columns to repeat(2,1fr) if you drop to two.
--------------------------------------------------------------------------- */
/* Six cards flow into two rows of three by themselves. row-gap is larger than
column-gap so the two rows read as rows rather than one dense block. */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 22px}
.route{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
transition:box-shadow .15s ease,border-color .15s ease;
}
/* DON'T make this move the card (no translateY, no margin change).
These cards used to lift 4px on hover, which caused a flicker: with the
pointer in the bottom few pixels, the card moved out from under it, lost
hover, dropped back, regained hover, and juddered on a loop.
The card now stays put and only the shadow and border change, so there is
nothing for the pointer to fall out of. */
.route:hover{
border-color:var(--orange);
box-shadow:0 2px 4px rgba(42,36,42,.06), 0 14px 34px rgba(42,36,42,.13);
}
/* position:relative is essential. The "photo needed" placeholder (.ph) is
pinned to all four edges of its container, so it needs a container to be
pinned TO. Without this it escapes the card and stretches across the whole
section instead, covering every card behind it. */
.route-img{height:210px;background:var(--orange-tint);flex:none;position:relative}
/* HOW THE PHOTO IS CROPPED IN THESE CARDS
The panel is short and wide but the photos are tall, so most of each photo
is cropped away. "center 20%" keeps a band starting a fifth of the way down
— which is where faces usually are. Left to itself the browser takes the
middle of the photo and cuts heads off.
20% suits most photos. Any that doesn't can override it on the ![]()
itself:
style="object-position:center 32%"
Bigger number = slide the crop DOWN the photo. Smaller = further UP. */
.route-img img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
/* A card with no photo yet: class="route-img logo" shows the Wildkatz logo
sitting on the pale orange instead. The logo is shown whole rather than
cropped to fill, which is why these rules undo the ones above.
When the real photo arrives, drop the word "logo" from the class and
point the img at the new file. */
.route-img.logo{display:flex;align-items:center;justify-content:center;padding:26px}
.route-img.logo img{
position:static;width:auto;height:auto;
max-width:100%;max-height:100%;object-fit:contain;
}
.route-body{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
.route-age{
font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--orange-deep);margin-bottom:8px;
}
.route-body h3{font-size:24px;margin-bottom:10px}
.route-body p{font-size:15px;margin-bottom:20px;flex:1}
.route .go{font-size:14.5px;font-weight:600;color:var(--orange-deep)}
.route:hover .go{color:var(--charcoal)}
/* ---- SMALL QUICK LINKS ----------------------------------------------------*/
.quicklinks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.quick{
background:var(--orange-tint);border-radius:var(--radius);padding:22px 24px;
display:flex;align-items:center;justify-content:space-between;gap:14px;
transition:background .15s ease;
}
.quick:hover{background:#FBE3CC}
.quick h3{font-size:17px;margin-bottom:2px}
.quick p{font-size:13.5px}
.quick .arrow{color:var(--orange-deep);flex:none}
/* ---- TESTIMONIALS ---------------------------------------------------------*/
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:26px 26px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.quote .mark{font-family:var(--font-head);font-size:44px;color:var(--orange);line-height:.7;margin-bottom:10px}
.quote p{font-size:15px;flex:1;margin-bottom:16px}
.quote .who{display:flex;align-items:center;gap:11px}
.quote .who span{
width:38px;height:38px;border-radius:50%;background:var(--orange-tint);flex:none;
display:flex;align-items:center;justify-content:center;
font-weight:700;color:var(--orange-deep);font-size:15px;
}
.quote .who b{display:block;font-size:14.5px;color:var(--charcoal)}
.quote .who i{font-style:normal;font-size:13px}
/* ---- GALLERY --------------------------------------------------------------
A mosaic rather than a row of tall portraits — the first photo takes up a
2x2 block and the rest fill in around it. Far shorter to scroll past.
grid-auto-rows is the height of one block. The whole gallery ends up
roughly twice that tall, whatever the shape of the photos you drop in.
--------------------------------------------------------------------------- */
/* FOURTEEN photos tile exactly in four columns. Two of them — the 1st and the
8th — are "feature" tiles spanning 2 across and 2 down. That's 4+4 cells for
the two big ones plus 12 for the rest = 20 cells = 5 full rows, no gaps.
Change the number of photos and this stops adding up, leaving a hole at the
end. If you add more, the next tidy counts are 18 and 22. */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:176px;gap:12px}
.gallery a{
display:block;overflow:hidden;border-radius:var(--radius);
background:var(--orange-tint);position:relative;
}
.gallery a:first-child,
.gallery a:nth-child(8){grid-column:span 2;grid-row:span 2}
/* Gallery tiles are wide and short, so a tall photo loses most of itself.
25% keeps the upper quarter, where faces are, rather than the default
middle — which lands on waists. Each photo can override this on its own
![]()
with style="object-position:center 30%": bigger = crop lower down.
Only the tile is cropped. Clicking it opens the whole photo, uncropped. */
.gallery img{
width:100%;height:100%;object-fit:cover;object-position:center 25%;
transition:transform .3s ease;
}
.gallery a:hover img{transform:scale(1.04)}
/* ---- FULL-SIZE PHOTO VIEWER -----------------------------------------------
No JavaScript. Each thumbnail links to #photo1, #photo2 and so on, and the
:target rule below means "when the page address points at me, show me".
Clicking the dark background or the X links back to #gallery, which closes it.
--------------------------------------------------------------------------- */
.lightbox{
display:none;position:fixed;inset:0;z-index:200;
background:rgba(24,20,24,.94);padding:44px 24px;
}
.lightbox:target{display:flex;align-items:center;justify-content:center}
.lightbox .backdrop{position:absolute;inset:0} /* click anywhere to close */
.lightbox img{
position:relative;max-width:min(1000px,100%);max-height:88vh;
width:auto;height:auto;border-radius:12px;
}
.lightbox .close{
position:absolute;top:20px;right:24px;z-index:2;
width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);
color:#fff;display:flex;align-items:center;justify-content:center;
}
.lightbox .close:hover{background:var(--orange);color:var(--charcoal)}
/* ---- VENUE AND CONTACT ----------------------------------------------------*/
.venue{
display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:38px 40px;box-shadow:var(--shadow);
}
.venue h2{font-size:clamp(24px,3vw,32px);margin-bottom:14px}
.contact-list{list-style:none;margin:20px 0 24px}
.contact-list li{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px;font-size:15px}
.contact-list svg{color:var(--orange-deep);flex:none;margin-top:3px}
.contact-list a:hover{color:var(--orange-deep)}
.venue-map{
background:var(--orange-tint);border-radius:var(--radius);min-height:260px;
display:flex;align-items:center;justify-content:center;text-align:center;
padding:24px;color:var(--orange-deep);font-size:14px;font-weight:600;
overflow:hidden;position:relative;
}
/* A .venue-map holding a photo gets class="venue-map photo". The box then
takes the same 3:2 shape as the photo instead of a fixed height, so the
picture fits exactly and nothing is cropped off.
If you swap in a photo of a different shape, change 3/2 below to match it
— 4/3 for a squarer picture, 16/9 for a wider one. Width ÷ height. */
.venue-map.photo{padding:0;min-height:0;aspect-ratio:3/2}
.venue-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ==========================================================================
6. THE YEAR FILTER
--------------------------------------------------------------------------
Hidden radio buttons, one per year group. The chips are labels attached to
them, so clicking a chip ticks its radio.
"~" means "any element after this one". So
"#f-y23:checked ~ .cards .card.yr-y23" reads as:
when the Year 2-3 radio is ticked, show cards tagged yr-y23.
========================================================================== */
.panel{
background:#fff;border-radius:26px;box-shadow:var(--shadow);
padding:48px 40px;margin-top:-52px;position:relative;z-index:5;
}
.section{padding:60px 0}
/* SECTION DIVIDERS
A hairline wherever one section meets the next, so the joins read clearly
even when both sections share a background colour. It uses --line, the same
thin-border colour as the cards, so it can never clash with anything.
To remove the line from a section that should flow on from the one above it
(the closing "Ready to get started?" block, for instance), add class="joined"
to that . Those blocks also carry style="padding-top:0". */
.section + .section{border-top:1px solid var(--line)}
.section.joined{border-top:0}
.section-title{text-align:center;font-size:clamp(23px,2.8vw,29px);margin-bottom:28px}
/* ---- SECTION BACKGROUNDS --------------------------------------------------
The page is cream. Add one of these to a to change its background
and break up a long page. Alternate them — cream, white, cream, tint — so
each section reads as its own block.
--------------------------------------------------------------------------- */
.band-white{background:#fff}
.band-tint{background:var(--orange-tint)}
.band-dark{background:var(--charcoal)}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p{color:rgba(255,255,255,.82)}
/* ---- YOUNGER AGES BAND ----------------------------------------------------
Sits above the year filter on the Classes page, routing parents of
under-4s to the Baby Gym and Preschool pages before they read any further.
--------------------------------------------------------------------------- */
.younger-note{text-align:center;font-size:14px;margin-bottom:12px}
.younger{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:34px}
.ycard{
background:var(--orange-tint);border-radius:var(--radius);padding:18px 22px;
display:flex;align-items:center;justify-content:space-between;gap:14px;
color:var(--orange-deep);transition:background .15s ease;
}
.ycard:hover{background:#FBE3CC}
.ycard b{font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--charcoal);display:block;line-height:1.2}
.ycard i{font-style:normal;font-size:13.5px;color:var(--body)}
.finder{position:relative}
/* ---- DISCIPLINE TOGGLE ----------------------------------------------------
This one works off the page ADDRESS rather than radio buttons, which is what
lets other pages link straight to it — classes.html#tumble arrives with
Tumble already chosen. Radios can't be set from a link; addresses can.
The three empty tags at the top of the finder are the targets.
":target" means "the thing the address is currently pointing at".
Side effect: choosing a discipline changes the address, so the back button
steps back through your choices. That's normal and usually what people expect.
--------------------------------------------------------------------------- */
.disc-target{display:block;height:0;scroll-margin-top:130px} /* clears the sticky header */
.disciplines{
display:inline-flex;background:var(--orange-tint);border-radius:999px;padding:5px;
margin:0 auto 22px;gap:4px;
}
.disciplines-wrap{text-align:center}
.disc{
padding:11px 26px;border-radius:999px;font-size:14.5px;font-weight:700;
color:var(--orange-deep);cursor:pointer;user-select:none;transition:all .15s ease;
}
.disc:hover{color:var(--charcoal)}
/* "Both" is what you get by default, so it starts out looking selected */
.disciplines a[href="#both"]{background:#fff;color:var(--charcoal);box-shadow:0 1px 3px rgba(42,36,42,.10)}
/* ...unless one of the other two is chosen, in which case Both goes plain */
#artistic:target ~ .disciplines-wrap a[href="#both"],
#tumble:target ~ .disciplines-wrap a[href="#both"]{
background:transparent;color:var(--orange-deep);box-shadow:none;
}
#artistic:target ~ .disciplines-wrap a[href="#artistic"],
#tumble:target ~ .disciplines-wrap a[href="#tumble"]{
background:#fff;color:var(--charcoal);box-shadow:0 1px 3px rgba(42,36,42,.10);
}
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}
.chip{
display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;
border:1.5px solid var(--line);background:#fff;font-size:14.5px;font-weight:600;
color:var(--body);cursor:pointer;transition:all .15s ease;user-select:none;
}
/* Hover behaves like the buttons — text goes charcoal, orange comes in */
.chip:hover{border-color:var(--orange);background:var(--orange-tint);color:var(--charcoal)}
/* Which chip looks selected */
#f-all:checked ~ .filters label[for="f-all"],
#f-recy1:checked ~ .filters label[for="f-recy1"],
#f-y23:checked ~ .filters label[for="f-y23"],
#f-y45:checked ~ .filters label[for="f-y45"],
#f-y6:checked ~ .filters label[for="f-y6"]{
background:var(--orange);border-color:var(--orange);color:#fff;
}
/* The already-selected chip also goes charcoal on hover, same as a button */
#f-all:checked ~ .filters label[for="f-all"]:hover,
#f-recy1:checked ~ .filters label[for="f-recy1"]:hover,
#f-y23:checked ~ .filters label[for="f-y23"]:hover,
#f-y45:checked ~ .filters label[for="f-y45"]:hover,
#f-y6:checked ~ .filters label[for="f-y6"]:hover{
background:var(--orange);color:var(--charcoal);
}
/* ---- STEP ONE: show cards matching the chosen YEAR -------------------------
Hide everything, then bring back whatever matches. A class can carry
several yr- tags, so a mixed group like Savannahs appears under every year.
--------------------------------------------------------------------------- */
.cards .card{display:none}
#f-all:checked ~ .cards .card,
#f-recy1:checked ~ .cards .card.yr-recy1,
#f-y23:checked ~ .cards .card.yr-y23,
#f-y45:checked ~ .cards .card.yr-y45,
#f-y6:checked ~ .cards .card.yr-y6{
display:grid;
}
/* ---- STEP TWO: take away anything of the wrong DISCIPLINE ------------------
Rather than writing a rule for every year-and-discipline pairing, step one
handles the year and this handles the discipline. :not(.tumble) means
"every card that isn't tumble".
These MUST stay below step one — later rules win when specificity is equal,
and the leading .finder is there to make sure these are the stronger rules.
--------------------------------------------------------------------------- */
.finder #artistic:target ~ .cards .card:not(.artistic){display:none}
.finder #tumble:target ~ .cards .card:not(.tumble){display:none}
/* NOTE: pure CSS can't tell when a filter combination has come back empty.
So every discipline-and-year combination must have at least one class in it.
If you add a year chip or a discipline, check each combination shows
something — otherwise a parent hits a blank space with no explanation. */
/* A short highlighted line — used for the half-term note beside the pricing */
.highlight-line{
background:#fff;border:1px solid rgba(240,126,30,.35);border-radius:12px;
padding:14px 16px;font-size:14px;margin-top:18px;display:flex;gap:11px;align-items:flex-start;
}
.highlight-line svg{color:var(--orange-deep);flex:none;margin-top:2px}
.highlight-line b{color:var(--charcoal)}
/* ==========================================================================
7. CLASS CARDS
--------------------------------------------------------------------------
Two parts stacked:
TOP photo on the left, name and description on the right
BOTTOM the days, running the full width of the card
The days go along the bottom rather than in a side column because Leopards
and Jaguars each run five times a week. Five in a narrow column made the
card very tall; across the bottom they fit in one row.
It also evens the cards out — a group that runs once a week gets one wide
button instead of one lonely narrow one.
========================================================================== */
.cards{display:flex;flex-direction:column;gap:16px}
.card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;box-shadow:var(--shadow);
grid-template-columns:1fr; /* the two rows stack */
grid-template-rows:auto auto;
}
/* --- top row: photo + words ---
THE PHOTO MUST NOT SET THE CARD HEIGHT.
Our photos are portrait (1200x1600). Left to itself, a portrait image in a
270px column renders about 360px tall and drags the whole card down with
it, leaving the text floating in a sea of white space.
So the image is positioned absolutely inside its box. That takes it out of
the height calculation completely: the TEXT decides how tall the card is,
and the photo crops to fill whatever space that leaves.
min-height on .card-top is the floor, so a card with a short description
still looks substantial rather than squashed.
--- */
.card-top{
display:grid;grid-template-columns:270px 1fr;
min-height:250px; /* every card the same height — sized for the longest
description (Home School Gym) so nothing overflows.
Shorter descriptions get a little more breathing room,
which is the trade-off for keeping them uniform. */
}
.card-img{position:relative;background:var(--orange-tint);overflow:hidden}
.card-img img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover; /* crop rather than squash */
/* Favour the top of the photo — that's where faces are. Override per photo
on the ![]()
itself with style="object-position:center 32%" if one needs
a different crop. Bigger = crop lower down, smaller = higher up. */
object-position:center 18%;
}
.ph{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
text-align:center;padding:20px;background:var(--orange-tint);
color:var(--orange-deep);font-size:13px;font-weight:600;
}
.card-body{padding:26px 30px;display:flex;flex-direction:column;justify-content:center}
.card-head{margin-bottom:10px}
.card-head h3{font-size:25px;margin-bottom:2px}
.card-head .yr{font-size:14px;font-weight:600;color:var(--orange)}
.card-body > p{font-size:15.5px;line-height:1.62;margin-bottom:0}
/* ---- THE DAYS, ALONG THE BOTTOM -------------------------------------------
Every day is a separate booking on ClassForKids, so each one is its own
link straight to that session rather than one button dumping the parent on
a general list.
auto-fit means the row fills the width whatever the number of days: five
sit side by side, one stretches across.
--------------------------------------------------------------------------- */
.card-side{border-top:1px solid var(--line);padding:18px 30px 22px}
.sessions-label{
font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--body);margin-bottom:10px;
}
.sessions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.session{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:11px 14px;border-radius:11px;border:1px solid var(--line);
transition:background .12s ease,border-color .12s ease;
}
.session:hover{background:var(--orange-tint);border-color:var(--orange)}
.session b{display:block;font-size:13.5px;font-weight:700;color:var(--charcoal);line-height:1.2}
.session i{font-style:normal;font-size:12.5px;color:var(--body)}
.session svg{color:var(--orange-deep);flex:none;opacity:.55}
/* Same look as a session tile, but it isn't a link — used where a class has
no booking page because you just turn up (Lions & Cubs). No arrow, no
hover, so nobody clicks expecting a booking form. */
.session-plain{
display:inline-block;max-width:340px;
padding:11px 16px;border-radius:11px;border:1px solid var(--line);
background:var(--orange-tint);
}
.session-plain b{display:block;font-size:13.5px;font-weight:700;color:var(--charcoal);line-height:1.2}
.session-plain i{font-style:normal;font-size:12.5px;color:var(--body)}
.session:hover svg{opacity:1}
/* "Pick one day, not all of them" — used on Tumble */
.session-note{font-size:12.5px;margin-top:12px;line-height:1.45}
/* ==========================================================================
8. MEMBERSHIP BOX
========================================================================== */
.membership{
display:grid;grid-template-columns:1fr auto auto;gap:34px;align-items:center;
background:var(--orange-tint);border-radius:var(--radius);padding:28px 32px;margin-top:28px;
}
.mem-left{display:flex;gap:16px;align-items:flex-start}
.mem-icon{
width:48px;height:48px;border-radius:14px;background:#fff;flex:none;
display:flex;align-items:center;justify-content:center;color:var(--orange-deep);
}
.mem-left h3{font-size:20px;margin-bottom:4px}
.mem-left p{font-size:14.5px;max-width:300px}
.mem-price b{font-family:var(--font-head);font-size:34px;color:var(--charcoal);font-weight:700}
.mem-price span{font-size:14px;font-weight:600}
.mem-price ul{list-style:none;margin-top:8px}
.mem-price li{font-size:13.5px;display:flex;align-items:center;gap:7px;margin-bottom:3px}
.mem-price li::before{content:"✓";color:#3E9B5F;font-weight:700}
/* ---- FULL PRICE LIST ------------------------------------------------------
Headline price stays on show; the full breakdown opens on demand. Same
element as the FAQs, so it needs no JavaScript either.
--------------------------------------------------------------------------- */
.pricing{margin-top:20px;border-top:1px solid rgba(240,126,30,.28);padding-top:16px}
.pricing > summary{
list-style:none;cursor:pointer;font-size:14px;font-weight:700;color:var(--orange-deep);
display:inline-flex;align-items:center;gap:7px;
}
.pricing > summary::-webkit-details-marker{display:none}
.pricing > summary .caret{transition:transform .2s ease}
.pricing[open] > summary .caret{transform:rotate(180deg)}
.price-table{width:100%;border-collapse:collapse;margin-top:14px}
.price-table th{
text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--body);padding:0 0 8px;
}
.price-table th:last-child{text-align:right}
.price-table td{
font-size:14px;padding:9px 0;border-top:1px solid rgba(240,126,30,.22);vertical-align:top;
}
.price-table td:last-child{text-align:right;font-weight:700;color:var(--charcoal);white-space:nowrap}
.price-table .save{display:block;font-size:12px;font-weight:400;color:#3E7C52}
.price-note{font-size:13px;margin-top:14px;line-height:1.6}
.price-note b{color:var(--charcoal)}
/* ==========================================================================
8b. THE FLARE — leopard print at the edges
--------------------------------------------------------------------------
Add class="flare" to any and the print appears down both edges,
behind everything. It never sits under text, so it can't hurt readability.
To make it stronger or weaker, change the two opacity values below.
0.16 is deliberately faint — it should register without being noticed.
========================================================================== */
.flare{position:relative}
.flare::before,.flare::after{
content:"";position:absolute;top:0;bottom:0;width:170px;
pointer-events:none;z-index:0;opacity:.15;
background-repeat:no-repeat;background-position:center;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27210%27%20height%3D%27300%27%20viewBox%3D%270%200%20210%20300%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23F07E1E%27%20stroke-width%3D%275%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M24%2030c14-11%2031-5%2027%209-4%2012-23%2015-30%206z%27%2F%3E%3Cpath%20d%3D%27M92%2062c11-9%2025-4%2022%207-3%2010-19%2012-24%205z%27%2F%3E%3Cpath%20d%3D%27M38%20104c12-10%2027-4%2024%208-3%2010-20%2013-26%205z%27%2F%3E%3Cpath%20d%3D%27M112%20140c10-8%2022-3%2020%206-3%209-17%2011-21%204z%27%2F%3E%3Cpath%20d%3D%27M20%20176c13-10%2029-4%2026%208-4%2011-22%2014-28%206z%27%2F%3E%3Cpath%20d%3D%27M86%20214c11-8%2024-3%2021%207-3%209-18%2011-23%204z%27%2F%3E%3Cpath%20d%3D%27M40%20258c12-9%2026-4%2023%207-3%2010-19%2012-25%205z%27%2F%3E%3Cpath%20d%3D%27M126%2020c9-7%2020-3%2018%205-2%208-15%2010-19%203z%27%2F%3E%3Cpath%20d%3D%27M132%20246c10-8%2022-3%2020%206-3%209-17%2011-21%204z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.flare::before{left:0}
.flare::after{right:0;transform:scaleX(-1)} /* mirrored, so it's not an obvious repeat */
.flare > *{position:relative;z-index:1}
/* Below 1300px the side gutters get too narrow and the print would creep
under the text, so it switches off. Wide screens only. */
@media (max-width:1300px){ .flare::before,.flare::after{display:none} }
/* ==========================================================================
9. FAQS
========================================================================== */
.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.faq > summary{
list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
gap:12px;font-size:15px;font-weight:600;color:var(--charcoal);
}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary .caret{flex:none;transition:transform .2s ease;color:var(--body)}
.faq[open] > summary .caret{transform:rotate(180deg)}
.faq p{font-size:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
/* ==========================================================================
9b. PLACEHOLDER PAGES
Used by preschool.html and adult-gym.html until we design them properly.
Delete this section once both pages are built.
========================================================================== */
.stub{padding:90px 0 40px;text-align:center}
.stub h1{font-size:clamp(34px,5vw,52px);margin-bottom:14px}
.stub > p{font-size:17px;max-width:520px;margin:0 auto 30px}
.stub .badge{
display:inline-block;background:var(--orange-tint);color:var(--orange-deep);
font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
padding:7px 16px;border-radius:999px;margin-bottom:20px;
}
/* ==========================================================================
10. BOTTOM BANNER AND FOOTER
========================================================================== */
.cta{
background:var(--orange);border-radius:var(--radius);
display:flex;align-items:center;justify-content:space-between;gap:26px;
padding:34px 40px;margin-top:36px;flex-wrap:wrap;
}
.cta h2{color:var(--charcoal);font-size:27px;margin-bottom:4px}
.cta p{font-size:15px;color:rgba(42,36,42,.82)}
/* ---- FOOTER ---------------------------------------------------------------
Appears on every page. Four columns on a computer, stacked on a phone.
The bottom strip carries the policies, which is where people expect them.
--------------------------------------------------------------------------- */
footer{background:var(--charcoal);color:rgba(255,255,255,.72);margin-top:70px;padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:44px}
.foot-brand img{height:64px;width:auto;margin-bottom:16px}
.foot-brand p{font-size:14px;max-width:270px;margin-bottom:18px;color:rgba(255,255,255,.72)}
.socials{display:flex;gap:10px}
.socials a{
width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.10);
display:flex;align-items:center;justify-content:center;color:#fff;
transition:background .15s ease,color .15s ease;
}
.socials a:hover{background:var(--orange);color:var(--charcoal)}
footer h4{
font-family:var(--font-head);font-size:15px;font-weight:700;color:#fff;
margin-bottom:14px;letter-spacing:.01em;
}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:9px}
.foot-col a{font-size:14px;color:rgba(255,255,255,.72)}
.foot-col a:hover{color:var(--orange)}
.foot-contact li{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;font-size:14px}
.foot-contact svg{color:var(--orange);flex:none;margin-top:3px}
.foot-contact a{color:rgba(255,255,255,.72)}
.foot-contact a:hover{color:var(--orange)}
.foot-bottom{
border-top:1px solid rgba(255,255,255,.12);padding:20px 0 26px;
display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.foot-bottom p{font-size:13px;color:rgba(255,255,255,.55)}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-legal a{font-size:13px;color:rgba(255,255,255,.55)}
.foot-legal a:hover{color:var(--orange)}
/* ---- ABOUT / CONTACT / 1-TO-1 PAGES ---------------------------------------*/
/* ---- PAGE BANNER (for pages with no hero photo) ---------------------------
Carries the leopard print, brighter than the light-background version since
it has a dark banner to sit against. This is what stops these pages looking
bare next to the ones with big photos.
--------------------------------------------------------------------------- */
.page-head{
background:var(--charcoal);padding:70px 0 64px;text-align:center;
position:relative;overflow:hidden;
}
.page-head h1{color:#fff;font-size:clamp(34px,5vw,54px);margin-bottom:12px}
.page-head p{color:rgba(255,255,255,.82);font-size:17px;max-width:560px;margin:0 auto}
.page-head .eyebrow{color:var(--orange)}
.page-head .wrap{position:relative;z-index:1}
.page-head::before,.page-head::after{
content:"";position:absolute;top:-30px;bottom:-30px;width:240px;
pointer-events:none;z-index:0;opacity:.30;
background-repeat:no-repeat;background-position:center;background-size:contain;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27210%27%20height%3D%27300%27%20viewBox%3D%270%200%20210%20300%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23F07E1E%27%20stroke-width%3D%275%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M24%2030c14-11%2031-5%2027%209-4%2012-23%2015-30%206z%27%2F%3E%3Cpath%20d%3D%27M92%2062c11-9%2025-4%2022%207-3%2010-19%2012-24%205z%27%2F%3E%3Cpath%20d%3D%27M38%20104c12-10%2027-4%2024%208-3%2010-20%2013-26%205z%27%2F%3E%3Cpath%20d%3D%27M112%20140c10-8%2022-3%2020%206-3%209-17%2011-21%204z%27%2F%3E%3Cpath%20d%3D%27M20%20176c13-10%2029-4%2026%208-4%2011-22%2014-28%206z%27%2F%3E%3Cpath%20d%3D%27M86%20214c11-8%2024-3%2021%207-3%209-18%2011-23%204z%27%2F%3E%3Cpath%20d%3D%27M40%20258c12-9%2026-4%2023%207-3%2010-19%2012-25%205z%27%2F%3E%3Cpath%20d%3D%27M126%2020c9-7%2020-3%2018%205-2%208-15%2010-19%203z%27%2F%3E%3Cpath%20d%3D%27M132%20246c10-8%2022-3%2020%206-3%209-17%2011-21%204z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.page-head::before{left:-40px}
.page-head::after{right:-40px;transform:scaleX(-1)}
/* On phones the print would run under the heading, so it goes */
@media (max-width:820px){ .page-head::before,.page-head::after{display:none} }
/* ---- FINDING US -----------------------------------------------------------*/
.find-note{
background:var(--orange-tint);border-radius:12px;padding:14px 16px;
font-size:13.5px;margin:16px 0 20px;
}
.find-note b{color:var(--charcoal)}
.find-note code{
font-family:var(--font-mono,ui-monospace,monospace);background:#fff;
padding:2px 7px;border-radius:6px;font-size:13px;color:var(--orange-deep);
}
.w3w{color:#E11F26;font-weight:700}
.prose{max-width:720px;margin:0 auto}
.prose p{font-size:16.5px;margin-bottom:18px}
.prose h2{font-size:clamp(24px,3vw,32px);margin:34px 0 14px}
.prose h3{font-size:20px;margin:26px 0 10px}
.prose ul{margin:0 0 18px 20px}
.prose li{font-size:16px;margin-bottom:8px}
/* ---- COACHES --------------------------------------------------------------
Two per row, each with a photo, a short bio and a fun fact. Add a third or
fourth coach and they'll flow onto the next row by themselves.
--------------------------------------------------------------------------- */
/* Coaches are stacked one per row, not side by side. Full width means every
bio fits without one card ending up much taller than the next, and it
leaves room for a bigger photo. */
.coaches{display:grid;grid-template-columns:1fr;gap:20px}
.coach{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:32px 34px;box-shadow:var(--shadow);display:flex;gap:30px;align-items:flex-start;
}
.coach-img{
width:150px;height:150px;flex:none;border-radius:50%;background:var(--orange-tint);
overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;
color:var(--orange-deep);font-size:12px;font-weight:600;text-align:center;padding:12px;
}
/* The photo is pinned to all four edges so it fills the whole circle and gets
clipped to the curve. Without this it sits inside the 12px padding, ending up
as a square smaller than the circle — so its corners never get cut off.
The padding is still needed for the "photo needed" text on coaches
who don't have one yet. */
.coach-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Caps the line length. Without this the text runs the full width of the card,
which is tiring to read. The white space to the right is deliberate. */
.coach-txt{max-width:660px}
.coach h3{font-size:21px;margin-bottom:2px}
.coach .role{
font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--orange-deep);margin-bottom:12px;
}
.coach .bio{font-size:14.5px;margin-bottom:14px}
.coach .bio:last-child{margin-bottom:0}
/* The fun fact — deliberately styled differently so it reads as an aside */
.fact{
background:var(--orange-tint);border-radius:12px;padding:12px 14px;
font-size:13.5px;display:flex;gap:10px;align-items:flex-start;
}
.fact svg{color:var(--orange-deep);flex:none;margin-top:2px}
.fact b{color:var(--charcoal)}
/* Contact form. Netlify processes this for free — see the note in contact.html */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--charcoal);margin-bottom:6px}
.field input,.field textarea,.field select{
width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
font-family:var(--font-body);font-size:15px;color:var(--charcoal);background:#fff;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,126,30,.16);
}
.field-full{margin-bottom:16px}
.form-note{font-size:13px;margin-top:14px}
/* ==========================================================================
11. PHONES AND TABLETS
These rules only apply below the screen width shown.
========================================================================== */
/* Six menu items plus the Register button is a full bar. Between the phone
breakpoint and a wide laptop, close the gaps up rather than let it overflow. */
@media (max-width:1080px){
.nav-links{gap:20px}
.nav-links a{font-size:14.5px}
}
@media (max-width:900px){
.nav-links{gap:15px}
.nav-links a{font-size:14px}
.nav-links .btn-sm{padding:10px 16px;font-size:13.5px}
}
@media (max-width:980px){
.routes,.quotes,.trust,.quicklinks{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr;gap:32px}
.gallery{grid-auto-rows:140px}
.venue{grid-template-columns:1fr;gap:28px;padding:30px 26px}
.welcome{grid-template-columns:1fr;gap:24px}
.faq-grid{grid-template-columns:1fr}
.membership{grid-template-columns:1fr;gap:22px}
.card-top{grid-template-columns:1fr}
.hiw-grid{grid-template-columns:1fr;gap:22px}
.card-top{min-height:0}
.card-img{height:200px} /* stacked above the text, so it needs a set height */
}
@media (max-width:760px){
/* Smaller bar and logo on phones */
.nav{height:84px}
.logo img{height:56px}
.nav-links{
display:none;position:absolute;top:84px;left:-24px;right:-24px;background:#fff;
flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;
border-bottom:1px solid var(--line);box-shadow:var(--shadow);
}
#menu:checked ~ .nav-links{display:flex}
.nav-links a{padding:14px 0;border-bottom:1px solid var(--line)}
.nav-links a.active::after{display:none}
.nav-links .btn{margin-top:14px;border-bottom:none}
.burger{display:block}
/* No hover on a touchscreen, so the dropdown becomes a plain indented list
that's always visible. Nothing to discover, nothing extra to tap. */
.has-sub{display:block}
.has-sub > .caret{display:none}
.submenu{
display:block;position:static;border:none;box-shadow:none;padding:0;
background:transparent;min-width:0;
}
.submenu::before{display:none}
.submenu a{padding:12px 0 12px 20px;border-radius:0;font-size:14px;font-weight:500}
.submenu a small{display:inline;margin-left:6px}
.submenu a:hover{background:transparent;color:var(--orange-deep)}
.hero{min-height:690px} /* the phone version, kept in step with the 840px above */
.video-hero{min-height:76vh}
.video-hero > .wrap > p{font-size:17px}
/* Two columns on a phone. The big first photo still spans both. */
/* On a phone it's two columns, and the big first tile goes back to normal
size — six equal tiles make three tidy rows. Leave it spanning and the
last row ends up half empty. */
.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}
.gallery a:first-child,
.gallery a:nth-child(8){grid-column:auto;grid-row:auto}
.lightbox{padding:20px 14px}
.marquee span{font-size:18px}
.hero-copy{padding-bottom:76px} /* panel pulls up 34px here, so ~42px gap */
.hero-actions{width:100%}
.hero-actions .btn{flex:1}
.panel{padding:32px 20px;margin-top:-34px;border-radius:20px}
.card-body{padding:22px}
.card-side{padding:16px 22px 20px}
.sessions{grid-template-columns:1fr}
.filters{flex-direction:column;align-items:stretch}
.chip{justify-content:center}
.younger{grid-template-columns:1fr;gap:10px}
.howitworks{padding:24px 20px}
.disciplines{width:100%;justify-content:center}
.disc{flex:1;text-align:center;padding:11px 8px}
.coach{flex-direction:column;align-items:center;text-align:center;padding:24px 20px}
.coach .fact{text-align:left}
.foot-grid{grid-template-columns:1fr;gap:30px;padding-bottom:34px}
.foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}
.form-grid{grid-template-columns:1fr}
.page-head{padding:52px 0 48px}
.cta{flex-direction:column;text-align:center;padding:30px 24px}
.cta .btn{width:100%}
}