: a mid-page .k-sea has land above it and must stay where it sits. This is the case the bar's glass was built for — see §3a of site.css. */ [data-brand="kids"] main>.k-sea:first-child{ margin-top:calc(var(--nav-h) * -1); padding-top:calc(var(--nav-h) + clamp(3.5rem,9vw,7rem))} [data-brand="kids"] .k-sea::before{ content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(180deg,rgba(9,30,40,.62) 0%,rgba(9,30,40,.34) 42%,rgba(9,30,40,.72) 100%), url("../assets/kids/kids-underwater.jpg") no-repeat center/cover} [data-brand="kids"] .k-sea .k, [data-brand="kids"] .k-sea .l{color:#D8EFE6} [data-brand="kids"] .k-sea h1, [data-brand="kids"] .k-sea h2{color:#FFFFFF} /* the hero's own actions sit on water, so they invert */ [data-brand="kids"] .k-sea .pill--o{color:#FFFFFF;border-color:rgba(255,255,255,.5)} [data-brand="kids"] .k-sea .pill--o:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.7)} [data-brand="kids"] .k-sea :where(a,button):focus-visible{outline-color:#FFFFFF} /* ---- 6b. BUBBLES ------------------------------------------- * * Ten shapes cut out of the source strip (kids-bubbles.png) and * traced to SVG in assets/kids/bubbles/, so every bubble is its own * element on its own clock instead of one repeating texture. Each is * a mask over currentColor — the hero sets that to white — which is * how the mark, the wave edge and the creature figures already work. * * The layer sits at z-index:-1: above the photo and its scrim, under * the type. Bubbles drifting through a headline would cost more * legibility than they are worth. * * Geometry: each is a full-height column with the bubble parked * at its foot, one bubble-height below the panel. Translating the * column up by its own height — the panel plus that one bubble — * carries the bubble from just under the bottom edge to just past * the top, at whatever height the hero happens to be. Nothing to * re-tune when the hero grows. * * Authored per bubble in the markup: --x across, --s size jitter, * --o opacity, --d rise time, --sd/--sx the sway, --r a resting tilt * so a reused shape does not read as a copy, and --p — where in the * trip the bubble starts. --p seeds both animation delays, and with * motion off it is simply where the bubble parks, so the reduced * -motion page still gets the still bubble field it had before. * ------------------------------------------------------------ */ [data-brand="kids"] .k-bubbles{ position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden} [data-brand="kids"] .k-bubbles i{ /* one pixel of the source drawing, on screen. Every bubble shares it, so the marker stroke keeps one weight across the whole field the way it does in the artwork — size varies by shape, not by zoom. */ --k-bu:clamp(.62px,.5px + .036vw,1.05px); --bw:calc(var(--w) * var(--s) * var(--k-bu)); --bh:calc(var(--h) * var(--s) * var(--k-bu)); position:absolute;left:var(--x);margin-left:calc(var(--bw) / -2); bottom:calc(var(--bh) * -1);width:var(--bw);height:calc(100% + var(--bh)); display:flex;align-items:flex-end;opacity:var(--o); transform:translateY(calc(var(--p) * -100%))} [data-brand="kids"] .k-bubbles i::after{ content:"";display:block;width:100%;height:var(--bh); background:currentColor;transform:rotate(var(--r)); -webkit-mask:var(--b) no-repeat center/contain; mask:var(--b) no-repeat center/contain} /* the shapes — natural size in source pixels, and the file */ [data-brand="kids"] .b1 {--w:68;--h:64;--b:url("../assets/kids/bubbles/b1.svg")} [data-brand="kids"] .b2 {--w:64;--h:56;--b:url("../assets/kids/bubbles/b2.svg")} [data-brand="kids"] .b3 {--w:63;--h:59;--b:url("../assets/kids/bubbles/b3.svg")} [data-brand="kids"] .b4 {--w:57;--h:64;--b:url("../assets/kids/bubbles/b4.svg")} [data-brand="kids"] .b5 {--w:51;--h:47;--b:url("../assets/kids/bubbles/b5.svg")} [data-brand="kids"] .b6 {--w:51;--h:42;--b:url("../assets/kids/bubbles/b6.svg")} [data-brand="kids"] .b7 {--w:50;--h:51;--b:url("../assets/kids/bubbles/b7.svg")} [data-brand="kids"] .b8 {--w:47;--h:40;--b:url("../assets/kids/bubbles/b8.svg")} [data-brand="kids"] .b9 {--w:37;--h:37;--b:url("../assets/kids/bubbles/b9.svg")} [data-brand="kids"] .b10{--w:33;--h:33;--b:url("../assets/kids/bubbles/b10.svg")} /* ---- 7. THE ROSTER ----------------------------------------- * * Six classrooms, six creatures, six colours. This is brand data, * so it lives here rather than in a style attribute on the page — * the roster is the same wherever it is printed. * * Markup: .rooms.rooms--sea > li.is- * ------------------------------------------------------------ */ [data-brand="kids"] .rooms--sea{ grid-template-columns:repeat(6,1fr);gap:clamp(.5rem,1.2vw,1rem);margin-top:2.2rem} [data-brand="kids"] .rooms--sea li{ position:relative;text-align:center;background:var(--card); border:.5px solid var(--hair-soft);border-radius:var(--r-tile); padding:1.1rem .7rem 1.3rem;overflow:hidden} /* the creature colour arrives as a wash from the floor of the card, so six saturated illustrations sit in one calm row */ [data-brand="kids"] .rooms--sea li::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--c)} [data-brand="kids"] .rooms--sea li::before{ content:"";position:absolute;left:50%;top:8%;width:104%;aspect-ratio:1; transform:translateX(-50%);border-radius:50%;z-index:0; background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 26%,transparent),transparent)} [data-brand="kids"] .rooms--sea .fig{ position:relative;z-index:1;height:clamp(78px,9vw,112px);margin:0 auto .6rem; aspect-ratio:1;background:var(--fig) no-repeat center/contain} [data-brand="kids"] .rooms--sea b{ position:relative;z-index:1;font-family:var(--kf);font-weight:400;letter-spacing:0; font-size:clamp(1.35rem,2.1vw,1.7rem);line-height:1.1;margin-bottom:.15rem} [data-brand="kids"] .rooms--sea span{ position:relative;z-index:1;display:block;color:var(--tx-dim);letter-spacing:.08em} [data-brand="kids"] .rooms--sea em{ position:relative;z-index:1;display:block;font-style:normal;font-size:.82rem; color:var(--tx-dim);margin-top:.55rem;max-width:22ch;margin-inline:auto} [data-brand="kids"] .is-shrimp {--c:var(--k-shrimp); --fig:url("../assets/kids/kids-shrimp.png")} [data-brand="kids"] .is-turtle {--c:var(--k-turtle); --fig:url("../assets/kids/kids-turtle.png")} [data-brand="kids"] .is-seahorse{--c:var(--k-seahorse);--fig:url("../assets/kids/kids-seahorse.png")} [data-brand="kids"] .is-crab {--c:var(--k-crab); --fig:url("../assets/kids/kids-crab.png")} [data-brand="kids"] .is-jelly {--c:var(--k-jelly); --fig:url("../assets/kids/kids-jellyfish.png")} [data-brand="kids"] .is-shark {--c:var(--k-shark); --fig:url("../assets/kids/kids-shark.png")} /* The shark is the only creature drawn side-on, so matching the others on height makes it read twice their size. It is sized off a shorter height of its own and the difference is paid back as margin, which keeps the optical weight even and the six card heights equal. Driving it off width instead breaks at the 2-column layout, where the cards get much wider. */ [data-brand="kids"] .is-shark .fig{ aspect-ratio:560/318;height:clamp(58px,6.6vw,84px);width:auto; margin-block:clamp(8px,1.1vw,14px) calc(.6rem + clamp(8px,1.1vw,14px))} /* the sticky mobile action bar follows the sub-brand on kids surfaces — its CTA is a kids destination, so it takes the kids action colour */ [data-brand="kids"] .m-bar a.is-cta{ background:var(--k-splash);border-color:var(--k-splash);color:#16171B} /* ---- 8. KIDS BLOCK ON A PARENT PAGE ------------------------ * * data-brand="kids" on a single
gives a kids teaser its * own water without repainting the page around it. * ------------------------------------------------------------ */ section[data-brand="kids"]{ position:relative;background:var(--surface);color:var(--tx); border-radius:var(--r-frame);padding:clamp(2rem,4vw,3.2rem)} /* ---- 8b. HEADER VARIANT ------------------------------------ * * .nav--kids — the site header in kids colour. * * It paints three things and nothing else: the mark, the link text * and the controls. The bar keeps whatever ground the page already * gives it — --nav-bg, the blur and the hairline are untouched — * because a tinted header band would put a second full-width colour * directly above a hero that is already water, and the two would * fight. The sub-brand arrives as ink on the chrome, not as another * surface. * * This is the one rule set in this file that is not scoped to * [data-brand="kids"]. The class is its own opt-in, and it carries * local copies of the few water values it needs, so it can sit on * the header of a page whose is not kids-scoped — a kids * landing page, a kids event page — without dragging the rest of * the ocean along. Values are duplicated as hex rather than read * from §2 for exactly that reason; each names its token. * * Governance: this is a sanctioned exception to "the sub-brand stays * out of the site chrome". The church mark still holds the header — * only its colour changes, and only on pages whose subject is the * ministry. See the Header section of kids-brand.html. * ------------------------------------------------------------ */ .nav--kids{ --k-nav-mark:#1B4C50; /* --k-lagoon-deep */ --k-nav-tx:#1B4C50; --k-nav-accent:var(--k-splash-deep);/* lives in site.css — always available */ --k-nav-hair:rgba(27,76,80,.24); --k-nav-press:rgba(27,76,80,.07); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .nav--kids{ --k-nav-mark:var(--k-mint); --k-nav-tx:#CFE9E2; --k-nav-accent:var(--k-splash); --k-nav-hair:rgba(198,231,195,.26); --k-nav-press:rgba(198,231,195,.09); } } :root[data-theme="dark"] .nav--kids{ --k-nav-mark:var(--k-mint); --k-nav-tx:#CFE9E2; --k-nav-accent:var(--k-splash); --k-nav-hair:rgba(198,231,195,.26); --k-nav-press:rgba(198,231,195,.09); } /* the logo — the same church mark, in kids ink. It is an alpha mask on currentColor, so this is the whole change; there is no second file. */ .nav--kids .mark{color:var(--k-nav-mark)} /* the links. Scoped to the top row on purpose: a group's dropdown is a card, not chrome, so it keeps the parent's ink. Painting it teal would put the sub-brand on a second surface, which is the thing §8b exists to avoid. */ .nav--kids .nav__l>li>a{color:var(--k-nav-tx)} /* the current page. The weight and the rule beneath it are the parent's — §3a of site.css draws both on every page — so all the variant does here is put the rule in kids water. Geometry stays in one file; only the ink moves. */ .nav--kids .nav__l>li>a[aria-current="page"]::after, .nav--kids .nav__l>li>a.is-here::after{background:var(--k-nav-accent)} /* the controls. The theme toggle is not among them — it sits in the footer, which is never a kids surface, so it keeps the parent's ink everywhere. */ .nav--kids .m-burger{color:var(--k-nav-mark)} .nav--kids .m-burger:hover{background:var(--k-nav-press)} /* the action. The markup does not change — Give stays the church's own .pill--give and the variant repaints it, the same way the token overlay repaints every other component on a kids page. One bar, one voice: a sky or a lime pill in a header that is otherwise entirely teal reads as a stray, not as a distinction. Both fills are listed because the bar's single action is Give today and could be the page's own lime tomorrow. */ .nav--kids .pill--lime, .nav--kids .pill--give{background:var(--k-splash);border-color:var(--k-splash);color:#0F1F27} .nav--kids .pill--lime:hover, .nav--kids .pill--give:hover, .nav--kids .pill--kids:hover{background:var(--k-splash-deep);border-color:var(--k-splash-deep)} .nav--kids .pill--o{color:var(--k-nav-tx);border-color:var(--k-nav-hair)} .nav--kids .pill--o:hover{background:var(--k-nav-press);border-color:var(--k-nav-hair)} /* the ring joins the same set rather than staying on the parent's steel */ .nav--kids :where(a,button):focus-visible{outline-color:var(--k-nav-accent)} /* ---- 9. MOTION --------------------------------------------- * * Two things the sub-brand adds to the parent's motion rules: the * creatures drift and the bubbles rise. Amplitude is 5px and the * period is long and prime-ish per creature so the row never falls * into lockstep and never reads as a loading state. Everything else * — entrances, curves, stagger — is inherited unchanged from * site.css. * ------------------------------------------------------------ */ @media (prefers-reduced-motion:no-preference){ @keyframes k-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } [data-brand="kids"] .rooms--sea .fig{animation:k-bob 7s var(--ease) infinite} [data-brand="kids"] .is-turtle .fig{animation-duration:8.5s;animation-delay:-1.2s} [data-brand="kids"] .is-seahorse .fig{animation-duration:6.5s;animation-delay:-2.4s} [data-brand="kids"] .is-crab .fig{animation-duration:9s; animation-delay:-3.1s} [data-brand="kids"] .is-jelly .fig{animation-duration:7.5s;animation-delay:-.7s} [data-brand="kids"] .is-shark .fig{animation-duration:10s; animation-delay:-4.3s} /* The rise is linear on purpose: a bubble does not accelerate, and any easing at the ends would read as the loop restarting. The sway is the only place the sub-brand reaches past the parent's two curves — a wobble has to be symmetric, and --ease decelerates. Both delays are negative and scaled by --p, so the field is already mid-drift on the first frame rather than starting as a row along the bottom edge. The sway runs against a different multiple of --p so the two never sync up. Only the top of the trip fades. At the bottom the wave edge is already covering the hand-off, and a bubble rising out from behind it is the nicer entrance; at the top there is nothing to hide behind, and a bubble that simply got cut off at the edge read as a glitch. */ @keyframes k-rise{ 0% {transform:translateY(0); opacity:var(--o)} 88% { opacity:var(--o)} 100%{transform:translateY(-100%);opacity:0} } @keyframes k-sway{ from{transform:translateX(calc(var(--sx) * -1)) rotate(calc(var(--r) - 5deg))} to {transform:translateX(var(--sx)) rotate(calc(var(--r) + 5deg))} } [data-brand="kids"] .k-bubbles i{ animation:k-rise var(--d) linear calc(var(--p) * var(--d) * -1) infinite} [data-brand="kids"] .k-bubbles i::after{ animation:k-sway var(--sd) ease-in-out calc(var(--p) * var(--sd) * -3) infinite alternate} } /* ---- 10. RESPONSIVE ---------------------------------------- */ @media(max-width:1000px){ [data-brand="kids"] .rooms--sea{grid-template-columns:repeat(3,1fr)} } @media(max-width:640px){ [data-brand="kids"] .rooms--sea{grid-template-columns:repeat(2,1fr)} [data-brand="kids"] .rooms--sea em{display:none} /* the bubble field is authored for the width of the desktop hero. On a phone the same twenty land in a third of the space and start to read as foam, so a third of them sit this one out — the shapes are in --x order, so dropping every third thins the field without opening a gap. */ [data-brand="kids"] .k-bubbles i:nth-child(3n){display:none} }