/* ==========================================================
KiddiesTV — one stylesheet for the whole site.
No frameworks, no web fonts, no image files. Round shapes only.
The look: a flat illustrated SCENE, not a page.
Sky at the top, a curved hill along the bottom, things growing
at the edges, and fat-ringed buttons sitting on the ground.
========================================================== */
/* ---------- tokens ---------- */
:root {
/* scene */
--sky-1:#35C4F0; --sky-2:#84DEF9;
--hill:#FFD84D; --hill-dark:#F5C528;
--grass:#4FC978;
/* brand palette (flat, no gradients) */
--blue-1:#0B8FD4; --blue-2:#BFE6FF;
--green-1:#3FA85B; --green-2:#B8EFC9;
--orange-1:#E2620E;--orange-2:#FFD9B0;
--purple-1:#7B3FF2;--purple-2:#DCCBFF;
--pink-1:#D91B6E; --pink-2:#FFC6E0;
--yellow-1:#C98A00;--yellow-2:#FFE9A8;
--teal-1:#00998A; --teal-2:#B5F0E8;
--red-1:#D93B4C; --red-2:#FFCBD0;
--cream:#FFF7EA;
--ink:#2A2E43;
--ink-soft:#5C6280;
--shadow-s: 0 4px 0 rgba(42,46,67,.10), 0 6px 18px rgba(42,46,67,.10);
--shadow-m: 0 8px 0 rgba(42,46,67,.10), 0 14px 34px rgba(42,46,67,.14);
--shadow-l: 0 12px 0 rgba(42,46,67,.10), 0 22px 50px rgba(42,46,67,.18);
--round: 34px;
--pill: 999px;
--font: "Nunito", "Quicksand", ui-rounded, "SF Pro Rounded",
"Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* colour themes — set --c1 (strong) / --c2 (soft) on any element */
.c-blue { --c1:var(--blue-1); --c2:var(--blue-2); }
.c-green { --c1:var(--green-1); --c2:var(--green-2); }
.c-orange { --c1:var(--orange-1); --c2:var(--orange-2); }
.c-purple { --c1:var(--purple-1); --c2:var(--purple-2); }
.c-pink { --c1:var(--pink-1); --c2:var(--pink-2); }
.c-yellow { --c1:var(--yellow-1); --c2:var(--yellow-2); }
.c-teal { --c1:var(--teal-1); --c2:var(--teal-2); }
.c-red { --c1:var(--red-1); --c2:var(--red-2); }
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font);
font-size: clamp(16px, 1.05vw + 13px, 19px);
line-height: 1.6;
color: var(--ink);
background: var(--cream);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .4em; font-weight: 900; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
p { margin: 0 0 1em; }
:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; border-radius: var(--pill); }
.wrap { width: min(1180px, 100% - clamp(1.5rem, 5vw, 4rem)); margin-inline: auto; }
.center { text-align: center; }
.lede { color: var(--ink-soft); font-size: 1.05em; max-width: 60ch; }
.center .lede { margin-inline: auto; }
.sr-only {
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ==========================================================
THE SCENE
========================================================== */
.stage {
/* One source of truth for how tall the hill is. Everything that stands on
the ground is positioned from THIS, not from a percentage of the hero —
the three hero types are different heights, so percentages put the same
element on the hill on one page and floating in the sky on another. */
--hill-h: clamp(140px, 26vw, 260px);
/* Same idea for the green band in front of it. The cast line-up is stood on
the grass by subtracting from THIS, so if the band ever changes height the
characters follow it instead of drifting off. */
--grass-h: clamp(34px, 5vw, 54px);
position: relative;
isolation: isolate;
background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 62%, #CFF2FD 100%);
padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(11rem, 25vw, 19rem);
overflow: hidden;
}
/* the curved yellow ground (furthest back) */
.stage::after {
content: "";
position: absolute; left: -6%; right: -6%; bottom: 0;
height: var(--hill-h);
background: var(--hill);
border-radius: 50% 50% 0 0 / clamp(50px, 8vw, 95px) clamp(50px, 8vw, 95px) 0 0;
z-index: -2;
}
/* a band of grass along the very bottom, plus dot texture so it isn't dead flat */
.stage::before {
content: "";
position: absolute; left: -6%; right: -6%; bottom: 0;
height: var(--grass-h);
background:
radial-gradient(circle at 12px 60%, rgba(255,255,255,.30) 2.5px, transparent 3px) 0 0/34px 26px,
var(--grass);
border-radius: 50% 50% 0 0 / 26px 26px 0 0;
z-index: -1;
}
/* short version for the inner pages — the extra bottom padding is what keeps
Humpty down on the hill instead of climbing into the intro text */
/* taller than it needs to be for the text alone — the sky band between the
intro line and the horizon is where the clouds and balloons live */
/* padding-bottom minus --hill-h IS the clear sky between the intro line and
the horizon. At 13rem/188px that gap was about 20px, which is why the
clouds ended up hugging the hill. */
.stage-slim { padding-bottom: clamp(12rem, 24vw, 19rem); --hill-h: clamp(108px, 17vw, 175px); }
.stage-slim .humpty { right: 11%; width: clamp(64px, 9.5vw, 134px); }
/* The full cast line-up standing on the grass of the inner-page heroes.
The plane and the flying egg have been cropped out of this image and now
fly around the margins instead (see .pd-plane / .pd-egg), which is what
paid for the characters growing without the strip getting any taller. */
.cast-line {
/* Width drives everything else, so it gets a name we can do maths on.
One clamp rather than a separate mobile rule: the old phone override was
wider than the desktop formula, so the line-up jumped *smaller* as the
window got wider through 700px. This grows monotonically all the way. */
--cw: clamp(344px, 78vw, 1081px);
position: absolute; left: 50%; translate: -50% 0;
width: var(--cw); height: auto;
/* Measured, not guessed: across the line-up the feet sit between 75.4% and
80% of the way down the image. Aligning the SHALLOWEST of those with the
top of the grass means every character stands on or slightly in the green
and none of them float — the deepest sinks about 11px into a 54px band,
which just reads as standing in grass. The image is 5:1, so its drawn
height is --cw/5 and the gap below the feet is 25% of that = --cw * .05.
Both terms are derived, so this holds at every window width instead of
only the one it happened to be tuned at. */
bottom: calc(var(--grass-h) - var(--cw) * .05);
}
/* ---- the same scene, recomposed for the shorter inner-page hero ----
The inner stage is well under half the height of the home one, so every
percentage that works there lands in the wrong place here. Clouds in
particular would otherwise sit below the horizon and overlap the hill. */
/* only sizes here now — the vertical placement comes from --hill-h above,
which is what keeps every hero type consistent */
.stage-slim .rays, .stage-hero .rays { width: clamp(300px, 52vw, 700px); }
.stage-slim .m1, .stage-hero .m1 { width: clamp(90px, 11vw, 170px); height: clamp(34px, 4.5vw, 72px); }
.stage-slim .m2, .stage-hero .m2 { width: clamp(60px, 7.5vw, 110px); height: clamp(24px, 3.2vw, 50px); }
.stage-slim .m3, .stage-hero .m3 { width: clamp(110px, 14vw, 205px); height: clamp(42px, 5.5vw, 88px); }
.stage-slim .m4, .stage-hero .m4 { width: clamp(66px, 8vw, 120px); height: clamp(26px, 3.5vw, 55px); }
.stage-slim .bushes, .stage-hero .bushes { width: clamp(110px, 14vw, 200px); }
.stage-slim .rainbow, .stage-hero .rainbow { width: clamp(96px, 12vw, 175px); }
/* Thinned out and dropped below the headline. On the home page the sky is
900px tall and everything fits above the hill; here there is one usable
band, so five clouds and three balloons would pile onto the text. */
.stage-slim .cloud-d,
.stage-slim .cloud-e,
.stage-slim .balloon-2 { display: none; }
/* up in the sky rather than hugging the horizon, matching how they sit on
the home page. They pass behind the intro line, which is dark text on a
white cloud and stays perfectly readable — the white headline above is
what they must stay clear of. */
.stage-slim .sun { top: 18%; right: 2%; width: clamp(46px, 6vw, 84px); }
.stage-slim .cloud-c { top: 40%; }
.stage-slim .cloud-a { top: 48%; }
.stage-slim .cloud-b { top: 56%; }
.stage-slim .balloon { top: 43%; width: clamp(30px, 3.6vw, 56px); }
.stage-slim .balloon-3 { top: 52%; width: clamp(36px, 4.4vw, 68px); }
/* ==========================================================
APPS PAGE HERO — two columns: the pitch, and a tablet
showing the real app icons.
========================================================== */
.stage-hero { padding-bottom: clamp(6rem, 13vw, 10.5rem); }
.stage-hero .humpty { right: 3%; width: clamp(54px, 6.5vw, 96px); }
/* the left cloud sits right behind the headline, and the trident tangles
with Humpty once the device column takes the right side — drop both here */
.stage-hero .cloud-a,
.stage-hero .plant-b { display: none; }
/* same thinning as the other inner heroes */
.stage-hero .cloud-d,
.stage-hero .cloud-e,
.stage-hero .balloon-2 { display: none; }
.stage-hero .sun { top: 24%; right: 2%; width: clamp(46px, 6vw, 84px); }
.stage-hero .cloud-b { top: 52%; }
.stage-hero .cloud-c { top: 44%; }
.stage-hero .balloon { top: 40%; width: clamp(30px, 3.6vw, 56px); }
.stage-hero .balloon-3 { top: 50%; width: clamp(36px, 4.4vw, 68px); }
.hero-split {
position: relative; z-index: 2;
display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
grid-template-columns: 1.05fr .95fr; align-items: center;
margin-top: clamp(1rem, 3vw, 2rem);
}
.hero-copy h1 {
color: #fff; text-shadow: 0 4px 0 rgba(6,58,84,.34);
font-size: clamp(1.7rem, 3.6vw, 3rem); max-width: 15ch; margin: .5rem 0 .6rem;
}
.hero-copy h1 span { color: var(--hill); }
.hero-copy .lede { color: #06415A; font-weight: 700; max-width: 46ch; }
.eyebrow, .tagpill {
display: inline-flex; align-items: center; gap: .45rem;
background: #fff; border-radius: var(--pill);
padding: .5rem 1.1rem; font-weight: 800; font-size: .85rem;
color: #0C4A63; box-shadow: 0 4px 0 rgba(10,80,110,.14);
}
.tagpill { margin-top: 1.1rem; background: #FFF4DC; color: #6B4A12; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
/* Apple mark sits slightly high in its own glyph, so nudge it down to sit on the text baseline */
.apple-mark { width: 1.05em; height: 1.05em; margin-top: -.16em; flex: none; }
/* the tablet */
.hero-device { position: relative; display: grid; place-items: center; }
.device {
width: min(100%, 340px); border-radius: 34px;
background: var(--purple-1); border: 6px solid #fff;
box-shadow: 0 14px 0 rgba(10,80,110,.18), 0 24px 44px rgba(10,80,110,.22);
padding: clamp(1rem, 2.2vw, 1.5rem);
transform: rotate(-2.5deg);
}
.device-title {
color: #fff; font-weight: 900; margin: .2rem 0 1rem;
font-size: clamp(1rem, 1.7vw, 1.3rem); line-height: 1.25;
}
.device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.device-grid span {
display: block; border-radius: 22%; overflow: hidden;
background: #fff; box-shadow: 0 3px 0 rgba(10,40,70,.22);
}
.device-grid img { width: 100%; height: auto; display: block; }
/* two icons escaping the tablet, so it does not read as a flat panel */
.chip {
position: absolute; width: clamp(46px, 5.5vw, 74px); height: auto;
border-radius: 24%; border: 4px solid #fff;
box-shadow: 0 7px 0 rgba(10,80,110,.16), 0 12px 22px rgba(10,80,110,.18);
animation: bob 7s ease-in-out infinite;
}
.chip-a { top: 4%; left: -2%; transform: rotate(-10deg); }
.chip-b { bottom: 6%; right: -1%; transform: rotate(9deg); animation-delay: -3.4s; }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
/* feature row under the hero */
.features {
list-style: none; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; padding: 0;
display: grid; gap: clamp(.6rem, 1.6vw, 1.1rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.feature {
display: flex; align-items: center; gap: .7rem;
background: #fff; border-radius: var(--pill);
border: 3px solid var(--c1); padding: .55rem 1.1rem .55rem .55rem;
font-weight: 800; font-size: .86rem;
box-shadow: 0 5px 0 rgba(42,46,67,.09);
}
.feature-ico {
width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none;
display: grid; place-items: center; background: var(--c2); font-size: 1.05rem;
}
@media (max-width: 860px) {
.hero-split { grid-template-columns: 1fr; text-align: center; }
.hero-copy h1, .hero-copy .lede { max-width: none; margin-inline: auto; }
.hero-cta { justify-content: center; }
.stage-hero .humpty { display: none; }
.device { transform: rotate(-2deg); }
}
.stage-slim .stage-copy .lede { max-width: 46ch; }
.stage-copy { position: relative; z-index: 2; }
.stage .lede { color: #06415A; font-weight: 800; }
/* the headline keeps to a centre lane so the scenery owns the edges */
.stage h1 {
color: #fff;
text-shadow: 0 4px 0 rgba(6,58,84,.34);
font-size: clamp(1.6rem, 3.7vw, 2.9rem);
max-width: 21ch; margin-inline: auto;
}
.stage h1 span { color: var(--hill); }
/* distant mounds — z-index puts them BEHIND the hill, so only their
tops show above the horizon, like far-off hills */
.mounds { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.mound {
position: absolute; bottom: calc(var(--hill-h) * .86);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
background: var(--m);
}
/* light fanning up from behind the hill; the mask fades it out at the edges
so it reads as a glow rather than a hard fan of stripes */
.rays {
position: absolute; left: 50%; bottom: calc(var(--hill-h) * .78); transform: translateX(-50%);
/* pivot at the bottom centre, where the rays converge, so the sweep looks
like light shifting rather than the whole fan spinning */
transform-origin: 50% 100%;
animation: raySweep 46s ease-in-out infinite;
width: clamp(420px, 74vw, 1000px); aspect-ratio: 2 / 1;
background: repeating-conic-gradient(from 180deg at 50% 100%,
rgba(255,255,255,.20) 0 3deg, transparent 3deg 11deg);
-webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 32%, transparent 74%);
mask-image: radial-gradient(ellipse at 50% 100%, #000 32%, transparent 74%);
}
@keyframes raySweep {
0%, 100% { rotate: -5deg; }
50% { rotate: 5deg; }
}
.rainbow { position: absolute; right: -2%; bottom: calc(var(--hill-h) * .73); width: clamp(130px, 17vw, 255px); height: auto; }
.bushes { position: absolute; left: -2%; bottom: calc(var(--hill-h) * .76); width: clamp(150px, 19vw, 285px); height: auto; }
.m1 { left: 2%; width: clamp(120px, 15vw, 235px); height: clamp(48px, 6.5vw, 105px); --m: #C9A0FF; }
.m2 { left: 21%; width: clamp(80px, 10vw, 150px); height: clamp(34px, 4.5vw, 72px); --m: #D9BDFF; }
.m3 { right: 4%; width: clamp(150px, 19vw, 285px); height: clamp(60px, 8vw, 130px); --m: #B98CFF; }
.m4 { right: -3%; width: clamp(90px, 11vw, 170px); height: clamp(38px, 5vw, 80px); --m: #D9BDFF; }
/* --- scenery bits, scattered on purpose (never a tidy grid).
Sits in front of the hill so plants and the train grow out of it. --- */
.scenery { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scenery > * { position: absolute; }
/* Everything is kept clear of the header band and the centre text lane. */
.sun { top: 15%; right: 2%; width: clamp(64px, 9vw, 122px); animation: spin 70s linear infinite; }
/* Clouds sail right across the sky and loop. They start from left:0 and are
carried entirely by the animation, so each one needs a negative delay to
spread them out — otherwise they all enter together in a line.
Kept below the headline so they never pass behind white text. */
.cloud-a { top: 36%; left: 0; width: clamp(86px, 14vw, 180px); animation: sail 304s linear infinite -38s; }
.cloud-b { top: 47%; left: 0; width: clamp(70px, 11vw, 140px); animation: sail 416s linear infinite -224s; opacity: .9; }
.cloud-c { top: 58%; left: 0; width: clamp(54px, 8vw, 104px); animation: sail 358s linear infinite -128s; opacity: .8; }
.cloud-d { top: 41%; left: 0; width: clamp(96px, 16vw, 205px); animation: sail 480s linear infinite -312s; opacity: .95; }
.cloud-e { top: 62%; left: 0; width: clamp(44px, 6.5vw, 86px); animation: sail 397s linear infinite -96s; opacity: .75; }
@keyframes sail {
from { translate: -28vw 0; }
to { translate: 132vw 0; }
}
/* Ground level: green curl far left, the train centred on the hill,
Humpty standing to its right, magenta trident far right. */
.plant-a { bottom: 3%; left: 2%; width: clamp(54px, 8vw, 104px); transform: rotate(-6deg); }
.plant-b { bottom: 4%; right: 3%; width: clamp(60px, 9vw, 118px); transform: rotate(5deg); }
/* the full cast line-up — wide and short, so it spans the hill without
reaching up into the four circles */
/* Characters stand at different depths in this artwork: the children's feet
are 79.9% down the image, the bear's and elephant's only 75.9%. Aligning to
the children left the bear floating, so the offset is set from the BEAR —
the children's feet then sit slightly into the grass, which reads correctly
as them standing a little nearer. 24.1% of the image height is shadow below
the bear, hence the offset below. */
.cast { bottom: -29px; left: 50%; width: clamp(340px, 64vw, 880px); height: auto; transform: translateX(-50%); }
/* extra growth rooted near the horizon; they sit behind the circles, which
reads as depth rather than collision */
/* The balloon crosses even more slowly than the clouds, rising and falling
as it goes. Both motions live in one keyframe because they share the
`translate` property — two separate animations would fight over it. */
.balloon { top: 24%; left: 0; width: clamp(44px, 5.5vw, 86px); animation: sailBob 528s linear infinite -80s; }
.balloon-2 { top: 39%; left: 0; width: clamp(30px, 3.8vw, 58px); animation: sailBob2 752s linear infinite -480s; }
.balloon-3 { top: 52%; left: 0; width: clamp(52px, 6.6vw, 104px); animation: sailBob 627s linear infinite -272s; }
@keyframes sailBob {
0% { translate: -22vw 0; }
25% { translate: 17vw -16px; }
50% { translate: 56vw 0; }
75% { translate: 95vw -16px; }
100% { translate: 130vw 0; }
}
/* a different rise-and-fall rhythm so the balloons never bob in step */
@keyframes sailBob2 {
0% { translate: -20vw 0; }
20% { translate: 12vw 11px; }
45% { translate: 45vw -13px; }
70% { translate: 82vw 9px; }
100% { translate: 128vw -6px; }
}
.sparkle { opacity: .85; animation: twinkle 4s ease-in-out infinite; }
.sp1 { top: 16%; left: 18%; width: clamp(13px, 1.5vw, 22px); }
.sp2 { top: 30%; left: 3%; width: clamp(10px, 1.2vw, 17px); animation-delay: -1.1s; }
.sp3 { top: 13%; right: 17%; width: clamp(12px, 1.4vw, 20px); animation-delay: -2.2s; }
.sp4 { top: 34%; right: 8%; width: clamp(9px, 1.1vw, 15px); animation-delay: -3.1s; }
.sp5 { top: 24%; left: 30%; width: clamp(9px, 1.1vw, 16px); animation-delay: -0.6s; animation-duration: 5.2s; }
.sp6 { top: 45%; left: 8%; width: clamp(11px, 1.3vw, 19px); animation-delay: -2.7s; animation-duration: 4.6s; }
.sp7 { top: 20%; right: 30%; width: clamp(10px, 1.2vw, 17px); animation-delay: -1.8s; animation-duration: 5.6s; }
.sp8 { top: 48%; right: 20%; width: clamp(8px, 1vw, 14px); animation-delay: -3.6s; animation-duration: 4.2s; }
.sp9 { top: 9%; left: 40%; width: clamp(8px, 1vw, 14px); animation-delay: -4.2s; animation-duration: 6s; }
@keyframes twinkle { 0%,100% { opacity: .3; scale: .75; } 50% { opacity: .95; scale: 1; } }
.plant-d { bottom: calc(var(--hill-h) * .83); right: 15%; width: clamp(30px, 4vw, 58px); transform: rotate(6deg); }
.plant-e { bottom: calc(var(--hill-h) * .86); right: 6%; width: clamp(32px, 4.2vw, 62px); transform: rotate(-5deg); }
.plant-f { bottom: calc(var(--hill-h) * .83); left: 9%; width: clamp(30px, 4vw, 58px); transform: rotate(-8deg); }
/* Humpty himself, standing on the hill — the real character art.
height:auto is load-bearing: the ![]()
carries a height attribute, and without
this the browser keeps that height and stretches him vertically. */
.humpty { bottom: 2%; right: 20%; width: clamp(66px, 10vw, 148px); height: auto; }
@keyframes drift { 0%,100%{transform:translateX(0)} 50%{transform:translateX(26px)} }
@keyframes spin { to { transform: rotate(360deg); } }
/* ==========================================================
HEADER
========================================================== */
.site-head {
position: relative; z-index: 3;
display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap;
padding: clamp(1rem, 2.5vw, 1.5rem) 0;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; }
/* the real KiddiesTV wordmark */
.brand-logo {
width: clamp(148px, 17vw, 230px); height: auto;
filter: drop-shadow(0 3px 2px rgba(10,80,110,.30));
transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .brand-logo { transform: rotate(-2deg) scale(1.03); }
.nav {
margin-left: auto; display: flex; gap: .45rem; align-items: center;
overflow-x: auto; scrollbar-width: none; max-width: 100%;
padding: 4px; margin-block: -4px;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
flex: none; text-decoration: none; font-weight: 800; font-size: .92rem;
padding: .5rem 1.1rem; border-radius: var(--pill);
color: #0C4A63; background: rgba(255,255,255,.78);
transition: background .18s, transform .18s;
}
.nav a:hover { background: #fff; transform: translateY(-2px); }
.nav a[aria-current="page"] { background: var(--ink); color: #fff; }
/* ==========================================================
THE BIG ROUND CHOICES — flat fill, fat contrasting ring
========================================================== */
.choices {
position: relative; z-index: 2;
display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
gap: clamp(1rem, 3vw, 2.2rem);
margin-top: clamp(1.5rem, 4vw, 3rem);
}
.bubble {
--size: clamp(150px, 20.5vw, 248px);
width: var(--size); aspect-ratio: 1; border-radius: 50%;
display: grid; place-content: center; gap: .3rem; justify-items: center;
text-align: center; text-decoration: none;
background: var(--fill);
color: var(--ring);
border: clamp(6px, .9vw, 11px) solid var(--ring);
box-shadow: 0 10px 0 rgba(42,46,67,.13), 0 18px 34px rgba(42,46,67,.16);
transition: translate .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.bubble svg { width: clamp(42px, 6.4vw, 72px); height: auto; }
/* shapes knocked out of a solid glyph show the button's fill colour through */
.bubble svg .knock { fill: var(--fill); }
.bubble b {
font-size: clamp(.95rem, 1.5vw, 1.4rem); font-weight: 900;
text-transform: uppercase; letter-spacing: -.01em;
}
.bubble small { font-size: clamp(.66rem, .85vw, .8rem); font-weight: 800; opacity: .78; }
/* Sit them along the curve of the hill and tilt each one a little, so the row
reads as hand-placed rather than ruler-straight.
These use the individual `translate` and `rotate` properties rather than
`transform`, which leaves `scale` free for the squish animation to own —
otherwise the animation would wipe out the arc offset and the tilt. */
.bubble:nth-child(1) { translate: 0 26px; rotate: -3deg; }
.bubble:nth-child(2) { translate: 0 -8px; rotate: 2deg; }
.bubble:nth-child(3) { translate: 0 -8px; rotate: -2deg; }
.bubble:nth-child(4) { translate: 0 26px; rotate: 3deg; }
.bubble:nth-child(1):hover, .bubble:nth-child(1):focus-visible { translate: 0 12px; }
.bubble:nth-child(2):hover, .bubble:nth-child(2):focus-visible { translate: 0 -22px; }
.bubble:nth-child(3):hover, .bubble:nth-child(3):focus-visible { translate: 0 -22px; }
.bubble:nth-child(4):hover, .bubble:nth-child(4):focus-visible { translate: 0 12px; }
.bubble:hover { box-shadow: 0 16px 0 rgba(42,46,67,.13), 0 26px 46px rgba(42,46,67,.2); }
/* The squash-and-stretch bounce: the circle compresses, overshoots wide,
springs tall, then settles. Same shape of motion PBS Kids uses. */
.bubble:hover, .bubble:focus-visible { animation: jellySquish .62s ease; }
@keyframes jellySquish {
0% { scale: 1 1; }
10% { scale: .88 .94; }
26% { scale: 1.06 .91; }
43% { scale: 1.10 .86; }
76% { scale: .95 1.11; }
93% { scale: .97 1.05; }
100% { scale: 1 1; }
}
.b-videos { --fill:#FFE05C; --ring:#D91B6E; }
.b-songs { --fill:#A6EFCF; --ring:#6B2FE0; }
.b-apps { --fill:#FFC6E0; --ring:#0B7FBF; }
/* part-transparent so the sky shows through instead of a solid blue disc;
40% is also enough to carry the orange label past the 3:1 contrast floor */
.b-books { --fill:rgba(191,230,255,.40); --ring:#D2560B; }
/* ==========================================================
PIECES
========================================================== */
/* stat circles */
/* ---- the stats band: a warm confetti-flecked panel with things floating in it ---- */
.stats-band {
position: relative; isolation: isolate;
border-radius: clamp(40px, 7vw, 84px);
padding: clamp(.5rem, 2vw, 1.25rem) clamp(1rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem);
/* the dots are confetti — cheaper as gradients than as elements */
background:
radial-gradient(circle at 14% 20%, rgba(255,190,70,.45) 4px, transparent 5px),
radial-gradient(circle at 31% 79%, rgba(255,120,180,.45) 3.5px, transparent 4.5px),
radial-gradient(circle at 52% 11%, rgba(110,200,255,.5) 3.5px, transparent 4.5px),
radial-gradient(circle at 69% 85%, rgba(140,220,120,.5) 4px, transparent 5px),
radial-gradient(circle at 87% 28%, rgba(190,150,255,.5) 3.5px, transparent 4.5px),
radial-gradient(circle at 23% 53%, rgba(110,200,255,.38) 3px, transparent 4px),
radial-gradient(circle at 63% 44%, rgba(255,190,70,.32) 3px, transparent 4px),
radial-gradient(circle at 78% 62%, rgba(255,120,180,.32) 3px, transparent 4px),
radial-gradient(ellipse at 50% 38%, #FFF8E9 0%, #FCEDD7 100%);
}
.stats-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.stats-deco > * { position: absolute; }
.d-star-big { left: 2%; top: 30%; width: clamp(44px, 5.2vw, 72px); transform: rotate(-12deg); }
.d-heart { left: 9%; top: 6%; width: clamp(26px, 3vw, 40px); transform: rotate(10deg); }
.d-spark-a { left: 1%; bottom: 16%; width: clamp(20px, 2.4vw, 32px); }
.d-star-purple { left: 13%; bottom: 4%; width: clamp(24px, 2.8vw, 38px); transform: rotate(14deg); }
.d-rocket { right: 5%; top: 9%; width: clamp(42px, 5vw, 68px); transform: rotate(28deg); }
.d-trail { right: 9%; top: 26%; width: clamp(80px, 10vw, 140px); opacity: .85; }
.d-star-green { right: 2%; bottom: 20%; width: clamp(24px, 2.8vw, 38px); transform: rotate(-10deg); }
.d-spark-b { right: 14%; bottom: 3%; width: clamp(20px, 2.4vw, 32px); }
.stats {
position: relative; z-index: 1;
display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
gap: clamp(.75rem, 2.5vw, 2rem);
padding-top: clamp(2.75rem, 6vw, 5rem); /* headroom for the characters on top */
}
/* below this the circles fill the width and the floaters would collide with them */
@media (max-width: 900px) {
.stats-deco { display: none; }
}
.stat {
position: relative;
width: clamp(112px, 15vw, 164px); aspect-ratio: 1; border-radius: 50%;
display: grid; place-content: center; text-align: center; gap: .1rem;
background: var(--c2); border: 5px solid var(--c1);
box-shadow: 0 7px 0 rgba(42,46,67,.10);
}
/* stitched inner ring, like a sticker */
.stat::before {
content: ""; position: absolute; inset: 9px;
border: 3px dashed var(--c1); border-radius: 50%; opacity: .4;
}
.stat:nth-child(odd) { transform: rotate(-3deg); }
.stat:nth-child(even) { transform: rotate(3deg); }
/* the character perched on the rim */
.stat-buddy {
position: absolute; left: 50%; top: -33%;
width: 58%; line-height: 0; color: var(--c1);
transform: translateX(-50%) rotate(-7deg);
filter: drop-shadow(0 4px 0 rgba(42,46,67,.10));
}
.stat:nth-child(even) .stat-buddy { transform: translateX(-50%) rotate(7deg); }
.stat b {
display: block; font-weight: 900; color: var(--c1);
font-size: clamp(1.35rem, 2.8vw, 2.15rem); letter-spacing: -.02em;
/* white outline so the number pops off the pastel fill */
text-shadow:
-2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff;
}
/* :not(.stat-buddy) matters — the character is a too, and without this
the label rule wins on specificity and paints it ink-coloured. */
.stat span:not(.stat-buddy) {
/* floor raised from .68rem — that rendered these labels at 10.9px on phones
and tablets, the smallest type on the site. There is room inside the
circle for it: the number and two wrapped lines still clear the ring. */
font-size: clamp(.78rem, 1vw, .86rem); color: var(--ink); font-weight: 800; padding-inline: .6rem;
}
.section { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.section-head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
/* cards */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.card {
background: #fff; border-radius: var(--round);
padding: clamp(1.1rem, 2vw, 1.5rem);
border: 4px solid var(--c1);
box-shadow: 0 8px 0 rgba(42,46,67,.10);
display: flex; flex-direction: column; gap: .6rem;
transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 14px 0 rgba(42,46,67,.10); }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--ink-soft); font-size: .92em; flex: 1; }
.card-ico {
width: clamp(58px, 8vw, 76px); aspect-ratio: 1; border-radius: 50%;
display: grid; place-items: center; font-size: clamp(1.6rem, 3vw, 2.1rem);
background: var(--c2); border: 4px solid var(--c1);
flex: none; overflow: hidden;
}
.card-ico img { width: 100%; height: 100%; object-fit: cover; }
/* real app icons: native squircle, so the corner KiddiesTV badge is not cropped away */
.card-ico-app { border-radius: 26%; background: #fff; }
.card-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
/* book covers — portrait, so they get their own shape rather than a circle
that would crop the title straight off the artwork */
.book-cover {
width: clamp(120px, 15vw, 158px); align-self: center;
border-radius: 18px; overflow: hidden;
border: 4px solid var(--c1); background: var(--c2);
box-shadow: 0 8px 0 rgba(42,46,67,.14);
transform: rotate(-2deg);
transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.card:nth-child(even) .book-cover { transform: rotate(2deg); }
.card:hover .book-cover { transform: rotate(0deg) scale(1.05); }
.book-cover img { width: 100%; height: auto; display: block; }
/* pills */
.pill {
display: inline-flex; align-items: center; gap: .4rem;
padding: .55rem 1.15rem; border-radius: var(--pill);
font-weight: 800; font-size: .86rem; text-decoration: none;
background: var(--ink); color: #fff; border: none; cursor: pointer;
box-shadow: 0 4px 0 rgba(42,46,67,.22);
transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
white-space: nowrap;
}
.pill:hover { transform: translateY(-3px); box-shadow: 0 7px 0 rgba(42,46,67,.22); }
.pill-color { background: var(--c1); color: #fff; }
.pill-ghost { background: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(42,46,67,.14); }
.pill-lg { padding: .9rem 1.9rem; font-size: 1.05rem; }
/* channel circles */
.channels { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.9rem, 2.5vw, 1.75rem); }
.channel {
width: clamp(112px, 15vw, 156px); text-decoration: none; text-align: center;
display: grid; justify-items: center; gap: .5rem;
transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.channel:nth-child(odd) .channel-face { transform: rotate(-4deg); }
.channel:nth-child(even) .channel-face { transform: rotate(4deg); }
.channel:hover { transform: translateY(-7px) scale(1.05); }
.channel-face {
width: clamp(88px, 12vw, 124px); aspect-ratio: 1; border-radius: 50%;
display: grid; place-items: center; font-size: clamp(2rem, 4vw, 2.9rem);
background: var(--c2); border: 5px solid var(--c1);
box-shadow: 0 8px 0 rgba(42,46,67,.12);
overflow: hidden;
}
.channel-face img { width: 100%; height: 100%; object-fit: cover; }
.channel b { font-size: .95rem; font-weight: 900; }
.channel small { display: block; font-size: .78rem; color: var(--ink-soft); font-weight: 700; }
/* ==========================================================
PLAYLIST ARCHES — domed tiles standing in a little meadow
========================================================== */
.meadow {
position: relative; overflow: hidden;
border-radius: clamp(36px, 6vw, 72px);
background: linear-gradient(180deg, #FFFCF4 0%, #FFF6E4 100%);
padding: clamp(1.5rem, 4vw, 2.75rem) clamp(.75rem, 3vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem);
}
.meadow-hills { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(60px, 9vw, 120px); z-index: 0; }
.meadow-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.meadow-deco > * { position: absolute; font-size: clamp(.9rem, 1.6vw, 1.5rem); opacity: .75; }
.n1 { top: 8%; left: 4%; transform: rotate(-14deg); }
.n2 { top: 20%; right: 5%; transform: rotate(12deg); }
.n3 { bottom: 30%; left: 12%; transform: rotate(9deg); }
.n4 { top: 6%; left: 46%; transform: rotate(-8deg); }
.s1 { top: 34%; left: 27%; }
.s2 { top: 14%; right: 26%; }
/* tree and flowers standing at the edges, behind the tiles */
.meadow-side { position: absolute; bottom: 4%; z-index: 0; height: auto; }
.side-l { left: 1%; width: clamp(74px, 9.5vw, 132px); }
.side-r { right: 1%; width: clamp(84px, 10.5vw, 146px); bottom: 3%; }
/* below this the tiles fill the width and the scenery would sit on top of them */
@media (max-width: 900px) { .meadow-side { display: none; } }
.arches {
position: relative; z-index: 1;
display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
gap: clamp(.7rem, 2.4vw, 1.8rem);
}
.arch {
width: clamp(108px, 13vw, 168px);
text-decoration: none; display: grid; justify-items: center;
transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.arch:hover, .arch:focus-visible { transform: translateY(-7px); }
/* dome: round on top, gently squared at the base so it stands up */
.arch-dome {
position: relative; width: 100%; aspect-ratio: 1;
border-radius: 50% 50% 30px 30px / 50% 50% 26px 26px;
border: 7px solid var(--c1);
display: grid; place-items: center;
/* sparkles scattered inside, as gradients rather than extra elements */
background:
radial-gradient(circle at 21% 27%, rgba(255,255,255,.95) 2.6px, transparent 3.2px),
radial-gradient(circle at 77% 21%, rgba(255,255,255,.85) 2px, transparent 2.6px),
radial-gradient(circle at 31% 71%, rgba(255,255,255,.8) 2px, transparent 2.6px),
radial-gradient(circle at 83% 63%, rgba(255,255,255,.9) 2.6px, transparent 3.2px),
radial-gradient(circle at 58% 14%, rgba(255,255,255,.75) 1.8px, transparent 2.4px),
var(--c2);
box-shadow: 0 9px 0 rgba(42,46,67,.13), inset 0 -10px 18px rgba(0,0,0,.05);
}
.arch-dome svg {
width: 47%; height: auto; color: #6B2FE0;
filter: drop-shadow(0 3px 0 rgba(42,46,67,.16));
}
/* the language motifs — big one low-left, smaller one high-right */
.arch-deco { position: absolute; line-height: 1; }
.arch-deco.d1 { bottom: 7%; left: 5%; font-size: clamp(1.3rem, 2.4vw, 2.05rem); transform: rotate(-10deg); }
.arch-deco.d2 { top: 8%; right: 6%; font-size: clamp(1rem, 1.8vw, 1.55rem); transform: rotate(11deg); }
/* the name pill straddles the base of the dome */
.arch-label {
position: relative; z-index: 2; margin-top: -1.05em;
background: var(--c1); color: #fff; font-weight: 900;
font-size: clamp(.82rem, 1.15vw, 1rem);
padding: .35em .9em; border-radius: var(--pill);
border: 3px solid #fff; box-shadow: 0 4px 0 rgba(42,46,67,.16);
/* long hyphenated names wrap at the hyphens rather than overflowing;
the pill may sit a little wider than its tile, which reads fine */
max-width: 122%; text-align: center; line-height: 1.2;
}
.arch-cap {
margin-top: .5rem; background: #fff; color: var(--ink);
/* These captions carry Devanagari and Bangla ("हिन्दी", "বাংলা"), whose
conjuncts and matras need more height than Latin to stay legible. The old
floor rendered them at 11.2px on phones, which was too small to read. */
font-weight: 800; font-size: clamp(.82rem, .95vw, .9rem);
padding: .35em .9em; border-radius: 14px;
box-shadow: 0 3px 0 rgba(42,46,67,.08);
}
/* two per row on a phone, so the labels stay readable */
@media (max-width: 560px) {
.arch { width: clamp(120px, 40vw, 160px); }
.meadow-deco { display: none; }
}
/* two embedded videos side by side; they stack once there is no room */
.video-pair {
display: grid; gap: clamp(1rem, 2.5vw, 2rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.feature-title {
margin: .75rem 0 0; font-weight: 800; font-size: .88rem;
color: var(--ink); line-height: 1.35;
}
/* ---- home page: horizontal strip of app icons, links to the apps page ---- */
.app-strip {
display: block; text-decoration: none;
border-radius: clamp(28px, 4vw, 52px);
padding: clamp(.9rem, 2vw, 1.4rem) clamp(.6rem, 2vw, 1.4rem);
background: linear-gradient(180deg, #FFFCF4 0%, #FFF4E2 100%);
box-shadow: 0 8px 0 rgba(42,46,67,.08);
transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.app-strip:hover { transform: translateY(-5px); box-shadow: 0 13px 0 rgba(42,46,67,.08); }
/* scrolls sideways rather than wrapping, so it stays one clean row */
.app-strip-row {
display: flex; gap: clamp(.5rem, 1.4vw, 1rem);
justify-content: flex-start; align-items: center;
overflow-x: auto; scrollbar-width: none;
padding: .35rem;
}
.app-strip-row::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .app-strip-row { justify-content: center; overflow-x: visible; } }
.app-tile {
flex: none; width: clamp(58px, 7.5vw, 96px); aspect-ratio: 1;
border-radius: 24%; overflow: hidden; background: #fff;
border: 4px solid var(--c1);
box-shadow: 0 5px 0 rgba(42,46,67,.12);
transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.app-tile:nth-child(odd) { transform: rotate(-3deg); }
.app-tile:nth-child(even) { transform: rotate(3deg); }
.app-strip:hover .app-tile { transform: rotate(0deg); }
.app-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* book covers are portrait — a square tile would crop the title off the art */
.book-tile {
aspect-ratio: 3 / 4; border-radius: 12%;
width: clamp(64px, 8vw, 104px);
}
.app-strip-cta {
display: inline-flex; align-items: center; gap: .4rem;
margin-top: clamp(.8rem, 2vw, 1.2rem);
background: var(--purple-1); color: #fff;
font-weight: 900; font-size: .9rem;
padding: .6rem 1.5rem; border-radius: var(--pill);
box-shadow: 0 4px 0 rgba(42,46,67,.22);
}
.app-strip:hover .app-strip-cta { background: #5A26C9; }
/* ---- subscribe circles ---- */
.subscribe-row {
display: flex; flex-wrap: wrap; justify-content: center;
gap: clamp(.9rem, 2.5vw, 1.9rem);
}
.sub-card { width: clamp(104px, 13vw, 148px); }
.sub-pill {
display: inline-block; margin-top: .45rem;
background: var(--red-1); color: #fff;
font-weight: 900; font-size: .8rem; letter-spacing: .01em;
padding: .3rem .85rem; border-radius: var(--pill);
border: 2px solid #fff; box-shadow: 0 3px 0 rgba(42,46,67,.18);
transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.sub-card:hover .sub-pill { transform: translateY(-2px) scale(1.05); }
/* video player */
.player {
border-radius: var(--round); overflow: hidden;
border: 6px solid var(--ink); box-shadow: 0 10px 0 rgba(42,46,67,.16);
background: var(--ink); aspect-ratio: 16 / 9; width: 100%;
}
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ---- About page: the story sits in a warm confetti panel, not a white box ---- */
.story-band {
position: relative; isolation: isolate;
border-radius: clamp(36px, 6vw, 76px);
padding: clamp(1.25rem, 3vw, 2.25rem);
background:
radial-gradient(circle at 12% 18%, rgba(255,190,70,.42) 4px, transparent 5px),
radial-gradient(circle at 88% 26%, rgba(255,120,180,.42) 3.5px, transparent 4.5px),
radial-gradient(circle at 22% 82%, rgba(110,200,255,.45) 3.5px, transparent 4.5px),
radial-gradient(circle at 76% 86%, rgba(140,220,120,.45) 4px, transparent 5px),
radial-gradient(circle at 50% 8%, rgba(190,150,255,.4) 3px, transparent 4px),
radial-gradient(ellipse at 50% 40%, #FFF8E9 0%, #FCEDD7 100%);
}
/* fat, kid-like outline rather than the thin card border */
.story-band .prose {
position: relative; z-index: 1;
border: 9px solid var(--pink-1);
border-radius: clamp(28px, 4vw, 44px);
box-shadow: 0 10px 0 rgba(42,46,67,.14);
}
.story-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.story-deco > * { position: absolute; font-size: clamp(.95rem, 1.7vw, 1.6rem); opacity: .8; }
.s-a { top: 7%; left: 4%; transform: rotate(-12deg); }
.s-b { top: 24%; right: 4%; transform: rotate(10deg); }
.s-c { bottom: 26%; left: 3%; }
.s-d { bottom: 8%; right: 6%; transform: rotate(8deg); }
.s-e { top: 6%; right: 22%; }
/* squiggles tucked around the edges of the card */
.sq { position: absolute; width: clamp(48px, 6vw, 86px); height: auto; opacity: .9; }
.sq-1 { top: 3%; left: 14%; transform: rotate(-6deg); }
.sq-2 { bottom: 5%; left: 8%; transform: rotate(5deg); }
.sq-3 { top: 12%; right: 6%; transform: rotate(9deg); }
.sq-4 { bottom: 30%; right: 3%; transform: rotate(-8deg); }
/* Humpty's train and the children, in a column beside the card.
The artwork carries a city street baked into it, so the edges are faded
with a mask — otherwise it reads as a photo pasted into the panel. */
.story-cast-wrap { position: relative; z-index: 2; align-self: stretch; min-height: 190px; }
/* A clean transparent cutout, so no edge-fading mask is needed — and being
near-square it fills the card's height without cropping anyone out. */
.story-cast {
position: absolute; inset: 0;
width: 100%; height: 100%; max-width: none; object-fit: contain;
filter: drop-shadow(0 5px 0 rgba(42,46,67,.08));
}
/* two columns on wide screens: the card, then the artwork matched to its height */
@media (min-width: 981px) {
.story-band {
display: grid; align-items: stretch;
grid-template-columns: minmax(0, 1fr) clamp(210px, 25vw, 340px);
gap: clamp(1rem, 2.5vw, 2rem);
}
/* grid-row is load-bearing: the artwork sits before the card in the markup,
so without it auto-placement drops the card onto a second row instead of
putting the two side by side */
.story-band .prose { grid-column: 1; grid-row: 1; margin-inline: 0; max-width: none; }
.story-cast-wrap { grid-column: 2; grid-row: 1; }
}
@media (max-width: 980px) { .story-cast-wrap { display: none; } }
@media (max-width: 820px) { .story-deco { display: none; } }
/* ---- About page: the four things we make, as picture circles ---- */
.offerings {
display: flex; flex-wrap: wrap; justify-content: center;
gap: clamp(1.1rem, 3vw, 2.4rem);
}
.offering {
width: clamp(140px, 19vw, 218px); text-align: center;
transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.offering-face {
width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
border: 7px solid var(--c1); background: var(--c2);
display: grid; place-items: center; font-size: 2.2rem;
box-shadow: 0 10px 0 rgba(42,46,67,.13);
transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.offering:nth-child(odd) .offering-face { transform: rotate(-3deg); }
.offering:nth-child(even) .offering-face { transform: rotate(3deg); }
.offering:hover .offering-face { transform: rotate(0deg) scale(1.05); }
.offering-face img { width: 100%; height: 100%; object-fit: cover; }
.offering h3 { margin: .9rem 0 .3rem; color: var(--c1); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.offering p { margin: 0; color: var(--ink-soft); font-size: .86em; }
/* ---- About page: photos in circles ---- */
.photos { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 3vw, 2.2rem); }
.photo { margin: 0; width: clamp(120px, 16vw, 190px); text-align: center; }
.photo-ring {
width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
border: 6px solid var(--c1); background: var(--c2);
box-shadow: 0 9px 0 rgba(42,46,67,.12);
transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.photo:nth-child(odd) .photo-ring { transform: rotate(-3deg); }
.photo:nth-child(even) .photo-ring { transform: rotate(3deg); }
.photo:hover .photo-ring { transform: rotate(0deg) scale(1.05); }
.photo-ring img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { margin-top: .7rem; font-weight: 800; font-size: .88rem; color: var(--c1); }
/* ---- perks list ---- */
.perks {
list-style: none; padding: 0; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
max-width: 900px;
}
.perk {
display: flex; align-items: center; gap: .6rem; text-align: left;
background: #fff; border: 3px solid var(--c1); border-radius: var(--pill);
padding: .5rem 1.1rem .5rem .5rem; font-weight: 800; font-size: .88rem;
box-shadow: 0 5px 0 rgba(42,46,67,.09);
}
.perk-ico {
width: 2rem; height: 2rem; border-radius: 50%; flex: none;
display: grid; place-items: center; background: var(--c2); font-size: 1rem;
}
/* ---- forms ---- */
.formcard {
background: #fff; border-radius: var(--round);
border: 4px solid var(--c1);
box-shadow: 0 8px 0 rgba(42,46,67,.10);
padding: clamp(1.35rem, 3.5vw, 2.5rem);
max-width: 720px; margin-inline: auto; text-align: left;
}
.formcard-narrow { max-width: 560px; }
.formcard h2 { color: var(--c1); margin-top: 0; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 800; font-size: .9rem; margin-bottom: .35rem; }
.field input, .field textarea {
/* 16px is a floor, not a preference: iOS Safari zooms the whole page in when
you focus a field smaller than that, and the visitor is then left on a
zoomed-in page with no obvious way back. .95rem was 15.2px. */
width: 100%; font: inherit; font-size: max(16px, .95rem); color: var(--ink);
padding: .7rem 1rem; border-radius: 20px;
border: 3px solid var(--blue-2); background: #FFFDF8;
transition: border-color .15s;
}
.field textarea { border-radius: 20px; resize: vertical; min-height: 7rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c1); }
.field input.is-bad, .field textarea.is-bad { border-color: var(--red-1); background: #FFF4F5; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; font-weight: 700; margin-bottom: 1.1rem; }
.check input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .1rem; accent-color: var(--c1); }
/* the spam trap must be unreachable, not merely invisible */
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: .8rem 0 0; font-weight: 800; font-size: .88rem; min-height: 1.2em; }
.form-status.is-ok { color: var(--green-1); }
.form-status.is-bad { color: var(--red-1); }
.form-alt { margin: 1.1rem 0 0; font-size: .86rem; color: var(--ink-soft); font-weight: 700; }
.form-alt a { color: var(--c1); font-weight: 800; }
/* prose */
.prose {
background: #fff; border-radius: var(--round);
padding: clamp(1.5rem, 4vw, 3rem);
border: 4px solid var(--blue-2);
box-shadow: 0 8px 0 rgba(42,46,67,.08);
max-width: 74ch; margin-inline: auto;
}
.prose h2 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); margin-top: 1.8em; color: var(--blue-1); }
.prose h2:first-of-type { margin-top: .5em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose a { color: var(--blue-1); font-weight: 800; }
.note { background: var(--yellow-2); border-radius: var(--round); padding: 1rem 1.4rem; font-size: .92em; }
.empty { text-align: center; color: var(--ink-soft);
background: #fff; border-radius: var(--round); padding: clamp(1.5rem, 4vw, 2.5rem); }
/* footer */
.site-foot {
margin-top: clamp(2rem, 6vw, 4rem);
background: #fff;
border-radius: clamp(36px, 6vw, 64px) clamp(36px, 6vw, 64px) 0 0;
padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem);
box-shadow: 0 -8px 40px rgba(42,46,67,.08);
}
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; }
.foot-note { text-align: center; color: var(--ink-soft); font-size: .82rem; }
.foot-note a { color: var(--blue-1); font-weight: 800; }
/* ==========================================================
DEVICE TUNING
========================================================== */
/* phones: 2x2 bubbles, and the arc flattens so rows stay tidy */
@media (max-width: 560px) {
.bubble { --size: clamp(132px, 40vw, 172px); }
.bubble:nth-child(1), .bubble:nth-child(2) { translate: 0 0; rotate: -3deg; }
.bubble:nth-child(3), .bubble:nth-child(4) { translate: 0 0; rotate: 3deg; }
.bubble:hover, .bubble:focus-visible { translate: 0 -10px; }
.brand { flex: 1 1 100%; justify-content: center; }
.nav { margin: 0; width: 100%; }
/* the ground gets crowded on a phone — the cast art carries it alone */
.humpty, .plant-b { display: none; }
.cast { width: 74vw; }
}
/* tablets: all four on one row, sized to survive a visible scrollbar */
@media (min-width: 561px) and (max-width: 900px) {
.bubble { --size: clamp(128px, 17.5vw, 178px); }
.choices { gap: clamp(.9rem, 2.4vw, 1.6rem); }
}
/* decorative music notes in the songs hero — not a button, nothing to click */
.sing-graphic { margin: 1.1rem 0 0; pointer-events: none; }
.sing-graphic svg {
width: clamp(150px, 24vw, 250px); height: auto; margin-inline: auto;
filter: drop-shadow(0 4px 0 rgba(10,80,110,.16));
animation: singBob 5.5s ease-in-out infinite;
}
@keyframes singBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
/* ==========================================================
MARGIN DECORATION — fills the empty columns either side of the
content on wide screens. Ornamental only.
========================================================== */
main { position: relative; }
.page-deco {
position: absolute; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
display: none; /* switched on only when margins exist */
}
.page-deco > * { position: absolute; }
/* --gutter is the real width of one empty margin: half of whatever is left
after the 1180px content column. Every ornament is capped to it, so none
can ever creep over the text however wide the window gets.
--slot is half a gutter, and it is what keeps the scattering safe. Ornaments
are offset by up to .45 of a gutter and are never wider than --slot, so the
furthest any of them can reach is .95 of a gutter — still short of the text.
Offsets are fractions of --gutter rather than fixed pixels for the same
reason: on a 1920px screen the margin is over three times what it is at
1400px, and fixed offsets would leave everything huddled against the window
edge in a straight line no matter how much room opened up beside it. */
.page-deco {
--gutter: calc((100vw - 1180px) / 2);
/* --band is the gutter with a 12px keep-out strip next to the text. The
wiggling ornaments rotate +-10deg, and a rotated box measures wider than
the element, so at the 1400px minimum the widest of them reached the text
edge exactly. The strip gives that rotation somewhere to go. */
--band: calc(var(--gutter) - 12px);
--slot: calc(var(--band) * .45);
}
/* Below 1400px the gutters are too slim to hold anything without crowding
the content, so nothing is drawn at all. */
@media (min-width: 1400px) { .page-deco { display: block; } }
/* sizes, each capped to half a gutter so the offsets below can never push one
into the text. On wide screens --slot is far bigger than any of these, so
they all render at their natural size. */
.pd-balloon { width: min(62px, var(--slot)); }
.pd-cloud { width: min(92px, var(--slot)); }
.pd-line { width: min(60px, var(--slot)); }
.pd-star { width: min(34px, var(--slot)); }
.pd-heart { width: min(28px, var(--slot)); }
.pd-confetti { width: min(44px, var(--slot)); }
.pd-ring { width: min(32px, var(--slot)); }
.pd-twink { width: min(22px, var(--slot)); }
/* The two photographic ornaments — the plane and the flying egg lifted out of
the cast line-up. height:auto is not optional: unlike the inline SVGs above
these carry width/height attributes, and without it the browser keeps the
attribute height and stretches them. */
.pd-plane { width: min(104px, var(--slot)); height: auto; }
.pd-egg { width: min(54px, var(--slot)); height: auto; }
/* mirrored so the right-hand plane flies into the page, not off it */
.pd-flip { scale: -1 1; }
/* --- motion, deliberately varied so the columns never move in step --- */
.pd-float { animation: pdFloat 7s ease-in-out infinite; }
.pd-drift { animation: pdDrift 11s ease-in-out infinite; }
.pd-wiggle { animation: pdWiggle 4.5s ease-in-out infinite; }
.pd-spin { animation: pdSpin 16s linear infinite; }
.pd-pulse { animation: pdPulse 3.4s ease-in-out infinite; }
.pd-glide { animation: pdGlide 13s ease-in-out infinite; }
.twink { animation: twinkle 4.5s ease-in-out infinite; }
@keyframes pdFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -26px; } }
@keyframes pdDrift { 0%,100% { translate: 0 0; } 50% { translate: 16px -10px; } }
@keyframes pdWiggle { 0%,100% { rotate: -10deg; } 50% { rotate: 10deg; } }
@keyframes pdSpin { to { rotate: 360deg; } }
@keyframes pdPulse { 0%,100% { scale: .82; } 50% { scale: 1.12; } }
/* a longer, banking arc for the plane — it should read as flying, not bobbing.
No scale here, so .pd-flip's mirror survives the animation. */
@keyframes pdGlide { 0%,100% { translate: 0 0; rotate: -4deg; }
50% { translate: 14px -22px; rotate: 4deg; } }
/* Scatter, not a grid. Two things made the old set read as two straight lines:
the tops stepped down in near-identical ~7% increments, and every offset sat
within 8-44px of the window edge whatever the gutter width.
So the vertical gaps below are deliberately uneven — 2% in places, 9% in
others — and the depth is a fraction of --gutter spanning .03 to .45, which
spreads them across the whole margin instead of stacking them along its
edge. No two ornaments on the same side share a depth.
A handful of heights carry TWO ornaments a couple of percent apart at
clearly different depths (marked "pair"), so the eye meets an occasional
cluster instead of an unbroken one-at-a-time rhythm. The rest are single. */
/* ---- left margin ---- */
.p1 { left: calc(var(--band) * .30); top: 3%; animation-delay: -2.2s; }
.p4 { left: calc(var(--band) * .05); top: 9%; animation-delay: -7.4s; } /* pair */
.p13 { left: calc(var(--band) * .38); top: 10.5%; animation-delay: -4.1s; } /* pair */
.p7 { left: calc(var(--band) * .16); top: 17%; animation-delay: -0.7s; }
.p16 { left: calc(var(--band) * .43); top: 25%; animation-delay: -3.3s; }
.p9 { left: calc(var(--band) * .08); top: 31%; animation-delay: -1.9s; } /* pair */
.p22 { left: calc(var(--band) * .34); top: 33%; animation-delay: -1.1s; } /* pair */
.p18 { left: calc(var(--band) * .22); top: 41%; animation-delay: -5.8s; }
.p2 { left: calc(var(--band) * .03); top: 50%; animation-delay: -3.2s; }
.p25 { left: calc(var(--band) * .13); top: 57%; animation-delay: -9.5s; }
.p11 { left: calc(var(--band) * .28); top: 64%; animation-delay: -1.8s; } /* pair */
.p14 { left: calc(var(--band) * .06); top: 66%; animation-delay: -6s; } /* pair */
.p20 { left: calc(var(--band) * .40); top: 74%; animation-delay: -2.7s; }
.p5 { left: calc(var(--band) * .12); top: 83%; animation-delay: -5s; }
.p27 { left: calc(var(--band) * .33); top: 89%; animation-delay: -2.5s; }
/* ---- right margin ---- */
.p6 { right: calc(var(--band) * .27); top: 6%; animation-delay: -7s; }
.p3 { right: calc(var(--band) * .06); top: 14%; animation-delay: -5.5s; }
.p8 { right: calc(var(--band) * .36); top: 21%; animation-delay: -1.2s; } /* pair */
.p23 { right: calc(var(--band) * .10); top: 23%; animation-delay: -2.4s; } /* pair */
.p26 { right: calc(var(--band) * .17); top: 32%; animation-delay: -6s; }
.p15 { right: calc(var(--band) * .45); top: 40%; animation-delay: -9s; }
.p10 { right: calc(var(--band) * .09); top: 47%; animation-delay: -2.6s; } /* pair */
.p24 { right: calc(var(--band) * .32); top: 49%; animation-delay: -3.1s; } /* pair */
.p19 { right: calc(var(--band) * .20); top: 56%; animation-delay: -4.4s; }
.p17 { right: calc(var(--band) * .41); top: 63%; animation-delay: -1.6s; }
.p28 { right: calc(var(--band) * .12); top: 71%; animation-delay: -4.5s; }
.p12 { right: calc(var(--band) * .30); top: 79%; animation-delay: -3.4s; }
.p21 { right: calc(var(--band) * .04); top: 88%; animation-delay: -8s; }
.p13, .p14, .p15 { animation-duration: 20s; }
/* ---------- scroll controls: an up and a down button, centred together ----------
The pair is centred as a group. Hidden buttons are display:none rather than
just faded, so whichever remains stays centred instead of sitting off to
one side. */
/* Anchored from the RIGHT rather than the left, because that is what makes the
two positions animatable: right goes 50% -> 18px and translate 50% -> 0, and
both are lengths the browser can interpolate. Anchoring left would need
"left: auto", which cannot be transitioned. */
.scroll-nav {
position: fixed; right: 50%; bottom: clamp(12px, 2vw, 18px); z-index: 60;
translate: 50% 0;
display: flex; align-items: center; gap: .45rem;
transition: right .3s cubic-bezier(.34,1.56,.64,1),
translate .3s cubic-bezier(.34,1.56,.64,1),
opacity .2s ease;
}
/* Centred is the resting position. app.js adds .is-aside when the pair would
otherwise sit on top of a form field or a button, and it glides to the
bottom-right corner until the control is clear again. */
.scroll-nav.is-aside { right: clamp(12px, 2vw, 18px); translate: 0 0; }
/* Sliding aside only works while there is somewhere to slide TO. On a phone
the form fields run the full width of the screen, so the corner is still on
top of them — measured at 375px, the corner clipped 70px of the email and
message fields. When there is no room to move, the pair fades out instead
and lets the tap through, then comes back once the control is past. */
.scroll-nav.is-clear { opacity: 0; pointer-events: none; }
/* On touch it does not slide around: a fingertip is imprecise, and a button
that moves while you are reaching for it is worse than one that is simply
not in the way. It sits in the corner and uses .is-clear instead. */
@media (pointer: coarse) {
.scroll-nav {
right: clamp(12px, 2vw, 18px); translate: 0 0;
transition: opacity .2s ease;
}
}
.scroll-cue, .scroll-top {
width: clamp(28px, 2.9vw, 36px); aspect-ratio: 1; border-radius: 50%;
display: grid; place-items: center; text-decoration: none;
background: var(--hill); border: 3px solid var(--pink-1); color: var(--pink-1);
box-shadow: 0 4px 0 rgba(42,46,67,.18), 0 8px 18px rgba(42,46,67,.16);
transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s;
}
.scroll-cue svg, .scroll-top svg { width: 52%; height: auto; }
.scroll-top svg { rotate: 180deg; }
.scroll-cue:hover, .scroll-top:hover { background: #FFE9A8; transform: translateY(-3px); }
/* the down arrow bobs to draw the eye; the up arrow is a plain control */
.scroll-cue { animation: cueBounce 1.7s ease-in-out infinite; }
@keyframes cueBounce {
0%, 100% { translate: 0 0; }
50% { translate: 0 -6px; }
}
.scroll-cue.is-gone, .scroll-top.is-gone { display: none; }
/* ==========================================================
TOUCH TARGETS
Scoped to (pointer: coarse) — a fingertip covers roughly 44px, a mouse
cursor one. Enlarging everything unconditionally would loosen a desktop
layout that is already comfortable, so phones and tablets get the bigger
hit areas and desktop keeps the tighter spacing it was designed with.
These grow the tappable box only; nothing here changes type size or
colour, so the pages look the same, they are just easier to hit. This
matters more than usual here — a lot of the people using this site are
between one and eight years old.
========================================================== */
@media (pointer: coarse) {
/* nav pills were 40px tall */
.nav a { display: inline-flex; align-items: center; min-height: 44px; }
/* the logo link was only 33px tall, well under a fingertip */
.brand { min-height: 44px; }
/* call-to-action pills, 40px tall */
.pill { min-height: 44px; }
/* the scroll up/down controls were 28px across on a phone — the smallest
targets on the site, and among the most used */
.scroll-cue, .scroll-top { width: 44px; }
/* consent checkbox, 20px */
.check input { width: 1.5rem; height: 1.5rem; }
}
/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important;
}
}