/* ========================================================================== SaptRishi PreSchool — Design System Joyful, colourful, modern. Mobile-first. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ /* Brand palette */ --purple:#7C3AED; --purple-d:#5B21B6; --indigo:#4F46E5; --pink:#EC4899; --pink-l:#F9A8D4; --amber:#FBBF24; --orange:#FB923C; --mint:#34D399; --mint-d:#10B981; --sky:#38BDF8; --coral:#FB7185; --lime:#A3E635; /* Neutrals */ --ink:#1E1B4B; --ink-2:#312E5F; --muted:#635E85; --line:#EDE9F7; --cream:#FFF9F2; --cream-2:#FDF2F8; --white:#FFFFFF; /* Effects */ --radius:26px; --radius-sm:16px; --radius-lg:40px; --shadow-sm:0 4px 16px rgba(30,27,75,.07); --shadow:0 14px 40px rgba(30,27,75,.10); --shadow-lg:0 28px 70px rgba(30,27,75,.16); --shadow-color:0 16px 40px rgba(124,58,237,.28); --grad-brand:linear-gradient(135deg,var(--indigo),var(--purple) 45%,var(--pink)); --grad-sun:linear-gradient(135deg,var(--amber),var(--orange)); --grad-candy:linear-gradient(135deg,var(--pink),var(--coral)); --grad-fresh:linear-gradient(135deg,var(--mint),var(--sky)); --font-head:'Baloo 2','Fredoka',system-ui,-apple-system,'Segoe UI',sans-serif; --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --nav-h:78px; --hero-curve:clamp(38px,6.5vw,96px); --container:1200px; } /* ---------- 2. Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* No overflow-x here on purpose. Clipping/hiding overflow on or makes mobile browsers mis-paint the sticky header (it vanishes mid-scroll and pops back when scrolling stops). The layout is clean at every width instead, so nothing needs clipping. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px} /* NOTE: do NOT put overflow-x:hidden here. With overflow-x:clip on it would stop propagating to the viewport, body would become its own scroll container (hidden on one axis forces the other to auto), and that breaks position:sticky on the header. The clip on already blocks sideways scrolling on its own. */ body{ font-family:var(--font-body); font-size:17px; line-height:1.75; color:var(--ink-2); background:var(--white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{max-width:100%;display:block} a{color:var(--purple);text-decoration:none} ul{list-style:none} button,input,textarea,select{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px} /* ---------- 3. Typography ---------- */ h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--ink);line-height:1.15;font-weight:800} h1{font-size:clamp(2.5rem,6.2vw,4.6rem);letter-spacing:-1.5px} h2{font-size:clamp(2rem,4.6vw,3.35rem);letter-spacing:-1px} h3{font-size:clamp(1.3rem,2.3vw,1.65rem);letter-spacing:-.3px} h4{font-size:1.15rem} p{margin:0} .lead{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--muted);line-height:1.8} .tiny{font-size:.86rem} /* Text helpers */ .grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent} .grad-sun-text{background:var(--grad-sun);-webkit-background-clip:text;background-clip:text;color:transparent} .text-center{text-align:center} .text-white{color:#fff!important} .text-white h1,.text-white h2,.text-white h3{color:#fff} .text-white .lead{color:rgba(255,255,255,.9)} /* Hand-drawn underline squiggle behind a word */ .squiggle{position:relative;display:inline-block;white-space:nowrap} .squiggle::after{ content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.34em; background:var(--amber);border-radius:50%;opacity:.55;z-index:-1; transform:rotate(-1.2deg); } .squiggle.pink::after{background:var(--pink-l)} .squiggle.mint::after{background:var(--mint)} /* ---------- 4. Layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px} .container-narrow{max-width:880px} /* Sections clip their own overflow so decorative blobs, doodles and the tilted photo frames can hang off their edges without ever widening the page. */ .section{position:relative;overflow:hidden;padding:clamp(64px,9vw,118px) 0} .section-tight{position:relative;overflow:hidden;padding:clamp(48px,6vw,80px) 0} .section-head{max-width:760px;margin:0 auto clamp(38px,5vw,62px);text-align:center} .section-head p{margin-top:16px} .section-head.left{margin-inline:0;text-align:left} .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-head);font-weight:700;font-size:.82rem; letter-spacing:1.6px;text-transform:uppercase; color:var(--purple);background:#F3EEFF; padding:8px 18px;border-radius:99px;margin-bottom:18px; border:1.5px solid #E3D8FF; } .eyebrow.on-dark{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)} .eyebrow.pink{color:#BE185D;background:#FDF2F8;border-color:#FBCFE8} .eyebrow.mint{color:#047857;background:#ECFDF5;border-color:#A7F3D0} .grid{display:grid;gap:26px} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} .g-auto{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} /* Auto-fit grids sized so a card is never too narrow for a full email address on one line: they drop from 3-up to 2-up to 1-up on their own. */ .branch-grid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))} .quick-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} /* slightly tighter side padding buys the email the room it needs */ .quick-grid .card{padding-inline:18px} /* `.card p` further down is (0,1,1) and would win over a bare `.email-1line`, so the second selector is needed to actually set the size inside a card. */ .email-1line,.card p.email-1line{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:clamp(.72rem,.95vw,.82rem); } /* ---- Section backgrounds ---- Deliberately stronger than a wash: the old tints were so pale that most of every page read as plain white. Still light enough for dark body text. */ .bg-cream{background:linear-gradient(180deg,#FFF4E4,#FFFCF6)} .bg-soft{background:linear-gradient(180deg,#FFF,#F3EDFF)} .bg-blush{background:linear-gradient(180deg,#FFEDF6,#F1E9FF)} .bg-mint{background:linear-gradient(180deg,#E4FAF0,#F6FFFB)} .bg-sky{background:linear-gradient(180deg,#E6F4FF,#F6FBFF)} .bg-lemon{background:linear-gradient(180deg,#FFF8DF,#FFFEF6)} .bg-brand{background:var(--grad-brand);color:#fff} .bg-brand h2,.bg-brand h3{color:#fff} .bg-mesh{ background: radial-gradient(circle at 12% 18%,rgba(251,191,36,.34),transparent 44%), radial-gradient(circle at 88% 12%,rgba(236,72,153,.30),transparent 42%), radial-gradient(circle at 70% 88%,rgba(56,189,248,.30),transparent 46%), linear-gradient(180deg,#FFFCF2,#F4EDFF); } /* Soft colour blobs bleeding in from the corners of a tinted section. Sections clip their own overflow (below), so these never widen the page. */ .tinted::before,.tinted::after{ content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0; filter:blur(80px); } .tinted::before{ width:min(38vw,420px);aspect-ratio:1;top:-14%;left:-8%; background:var(--blob-a,rgba(251,191,36,.5)); } .tinted::after{ width:min(34vw,380px);aspect-ratio:1;bottom:-16%;right:-7%; background:var(--blob-b,rgba(236,72,153,.42)); } .tinted > *{position:relative;z-index:1} .bg-cream.tinted{--blob-a:rgba(251,191,36,.55);--blob-b:rgba(251,146,60,.38)} .bg-blush.tinted{--blob-a:rgba(236,72,153,.42);--blob-b:rgba(167,139,250,.45)} .bg-mint.tinted{--blob-a:rgba(52,211,153,.45);--blob-b:rgba(163,230,53,.38)} .bg-sky.tinted{--blob-a:rgba(56,189,248,.45);--blob-b:rgba(124,58,237,.30)} .bg-lemon.tinted{--blob-a:rgba(251,191,36,.5);--blob-b:rgba(52,211,153,.34)} .bg-mesh.tinted::before,.bg-mesh.tinted::after{display:none} /* Crayon-ish doodles drifting in the empty page margins. Hidden below 1300px, where there are no margins left and they would crowd the content. */ .doodle{ position:absolute;z-index:0;pointer-events:none;user-select:none; font-size:clamp(1.5rem,2vw,2.3rem);opacity:.5;line-height:1; filter:drop-shadow(0 8px 14px rgba(30,27,75,.10)); animation:floatY 9s ease-in-out infinite; } .doodle.dl{left:2.4%} .doodle.dr{right:2.4%} .doodle:nth-of-type(2n){animation-duration:11.5s;animation-delay:1.2s} .doodle:nth-of-type(3n){animation-duration:8s;animation-delay:.6s} @media (max-width:1300px){.doodle{display:none}} /* ---------- 5. Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--font-head);font-weight:700;font-size:1rem; padding:15px 30px;border-radius:99px;border:none;cursor:pointer; text-decoration:none;white-space:nowrap;position:relative;overflow:hidden; transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,background .22s ease; } .btn:hover{transform:translateY(-3px)} .btn:active{transform:translateY(-1px)} .btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-color)} .btn-primary:hover{box-shadow:0 22px 46px rgba(124,58,237,.4)} .btn-sun{background:var(--grad-sun);color:#4A2E00;box-shadow:0 14px 34px rgba(251,146,60,.38)} .btn-sun:hover{box-shadow:0 20px 44px rgba(251,146,60,.5)} .btn-white{background:#fff;color:var(--purple);box-shadow:0 14px 34px rgba(0,0,0,.18)} .btn-outline{background:transparent;color:var(--purple);box-shadow:inset 0 0 0 2.5px var(--purple)} .btn-outline:hover{background:var(--purple);color:#fff} .btn-outline-white{background:transparent;color:#fff;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.75)} .btn-outline-white:hover{background:#fff;color:var(--purple)} .btn-sm{padding:11px 22px;font-size:.92rem} .btn-lg{padding:18px 38px;font-size:1.08rem} .btn-group{display:flex;gap:14px;flex-wrap:wrap} .btn-group.center{justify-content:center} /* ---------- 6. Header / Nav ---------- */ .site-header{ position:sticky;top:0;z-index:900; background:rgba(255,255,255,.82); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-bottom:1.5px solid rgba(124,58,237,.09); transition:box-shadow .3s ease,background .3s ease; } .site-header.scrolled{box-shadow:0 8px 30px rgba(30,27,75,.09);background:rgba(255,255,255,.95)} .nav{display:flex;align-items:center;gap:20px;min-height:var(--nav-h)} .brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;text-decoration:none} /* ---- Brand: the logo file only ---- No tile, no emoji, no wordmark beside it — the SVG carries the whole brand. Height is fixed and width is auto, so any aspect ratio is respected. */ .brand-logo{ display:block;flex:0 0 auto; height:clamp(38px,4.2vw,52px);width:auto; max-width:min(240px,54vw);object-fit:contain; transition:transform .4s cubic-bezier(.34,1.56,.64,1); } .brand:hover .brand-logo{transform:scale(1.04)} .site-footer .brand-logo{height:clamp(42px,4.6vw,58px);max-width:min(260px,60vw)} /* The text lockup is kept in the markup purely as a safety net: it stays hidden unless the logo file is missing, so the header can never render empty while the SVG is still being uploaded. */ .brand .brand-txt{display:none} .brand.logo-missing .brand-txt{display:block} .brand-txt b{ display:block;font-family:var(--font-head);font-size:1.32rem;font-weight:800; color:var(--ink);line-height:1.1;letter-spacing:-.4px; } .brand-txt span{ display:block;font-size:.63rem;letter-spacing:2.6px;text-transform:uppercase; color:var(--pink);font-weight:800; } .nav-links{display:flex;align-items:center;gap:4px;margin-left:auto} .nav-links a{ font-family:var(--font-head);font-weight:600;font-size:.98rem;color:var(--ink-2); padding:10px 15px;border-radius:99px;position:relative;transition:color .2s,background .2s; } .nav-links a:hover{color:var(--purple);background:#F5F1FF} .nav-links a.active{color:var(--purple)} .nav-links a.active::after{ content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%); width:20px;height:3.5px;border-radius:99px;background:var(--grad-sun); } .nav-cta{margin-left:10px} .nav-toggle{ display:none;width:48px;height:48px;border:none;border-radius:14px; background:#F5F1FF;cursor:pointer;place-items:center;margin-left:auto;flex:0 0 auto; } .nav-toggle span{display:block;width:22px;height:2.6px;border-radius:9px;background:var(--purple);transition:transform .3s,opacity .2s} .nav-toggle span+span{margin-top:5px} body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7.6px) rotate(45deg)} body.nav-open .nav-toggle span:nth-child(2){opacity:0} body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)} /* Mobile drawer */ .nav-drawer{ position:fixed;inset:var(--nav-h) 0 0;z-index:880; background:linear-gradient(160deg,#FFF,#F6F1FF 60%,#FDF2F8); padding:30px 24px 44px;overflow-y:auto; transform:translateX(100%);opacity:0;visibility:hidden; transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .3s; } body.nav-open .nav-drawer{transform:translateX(0);opacity:1;visibility:visible} .nav-drawer a{ display:flex;align-items:center;gap:14px; font-family:var(--font-head);font-weight:700;font-size:1.2rem;color:var(--ink); padding:16px 18px;border-radius:18px;background:#fff;margin-bottom:11px; box-shadow:var(--shadow-sm);border:1.5px solid var(--line); } .nav-drawer a .ic{font-size:1.35rem;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#F5F1FF;flex:0 0 auto} .nav-drawer a.active{background:var(--grad-brand);color:#fff;border-color:transparent} .nav-drawer a.active .ic{background:rgba(255,255,255,.22)} .nav-drawer .btn{width:100%;margin-top:16px} .drawer-contact{margin-top:26px;padding-top:22px;border-top:2px dashed #E4DCF7;text-align:center} .drawer-contact a{display:inline;background:none;box-shadow:none;border:none;padding:0;font-size:1rem;color:var(--purple)} /* ---------- 7. Hero ---------- */ .hero{ position:relative;overflow:hidden; padding:clamp(48px,7vw,86px) 0 clamp(96px,12vw,150px); background: radial-gradient(circle at 8% 8%,rgba(251,191,36,.28),transparent 40%), radial-gradient(circle at 95% 18%,rgba(236,72,153,.24),transparent 42%), radial-gradient(circle at 50% 100%,rgba(56,189,248,.22),transparent 50%), linear-gradient(165deg,#FFFCF5 0%,#F7F2FF 55%,#FDF0F8 100%); } .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,60px);align-items:center} .hero-copy h1{margin-bottom:20px} .hero-copy .lead{max-width:530px;margin-bottom:32px} .hero-copy .btn-group{margin-bottom:34px} .hero-badges{display:flex;gap:12px;flex-wrap:wrap} .hero-badge{ display:inline-flex;align-items:center;gap:9px;background:#fff; padding:10px 18px;border-radius:99px;box-shadow:var(--shadow-sm); font-weight:700;font-size:.88rem;color:var(--ink);border:1.5px solid var(--line); } .hero-badge .ic{font-size:1.1rem} /* Hero image collage */ .hero-art{position:relative;min-height:min(72vw,470px)} .hero-photo{ position:absolute;border-radius:34px;overflow:hidden; box-shadow:var(--shadow-lg);border:7px solid #fff; } /* The frame's own inset/aspect-ratio defines the shape, so the placeholder fills it. */ .hero-photo .ph{width:100%;height:100%} .hero-photo.p1{inset:0 22% 26% 0;z-index:2;animation:floatY 7s ease-in-out infinite} .hero-photo.p2{width:46%;aspect-ratio:1;right:0;top:14%;z-index:3;animation:floatY 8.5s ease-in-out infinite .6s} .hero-photo.p3{width:42%;aspect-ratio:4/3;left:10%;bottom:0;z-index:4;animation:floatY 6.4s ease-in-out infinite 1.2s} .hero-chip{ position:absolute;z-index:6;background:#fff;border-radius:20px; padding:12px 18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px; font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--ink); } .hero-chip .em{font-size:1.5rem} .hero-chip .sub{display:block;font-family:var(--font-body);font-size:.72rem;font-weight:600;color:var(--muted)} .hero-chip.c1{top:2%;left:-4%;animation:floatY 5.5s ease-in-out infinite} .hero-chip.c2{bottom:12%;right:-3%;animation:floatY 6.8s ease-in-out infinite .9s} @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} /* Decorative floating shapes */ .shape{position:absolute;pointer-events:none;z-index:1;opacity:.85} .shape.s1{top:12%;left:4%;font-size:2.4rem;animation:drift 11s ease-in-out infinite} .shape.s2{top:8%;right:9%;font-size:2rem;animation:drift 9s ease-in-out infinite reverse} .shape.s3{bottom:22%;left:8%;font-size:2.2rem;animation:spin 16s linear infinite} .shape.s4{bottom:30%;right:5%;font-size:1.9rem;animation:drift 13s ease-in-out infinite 1s} @keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(18px,-24px) rotate(12deg)}} @keyframes spin{to{transform:rotate(360deg)}} /* Blurred colour blobs (page-level decor) */ .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;pointer-events:none;z-index:0} .blob.amber{background:var(--amber)} .blob.pink{background:var(--pink)} .blob.mint{background:var(--mint)} .blob.sky{background:var(--sky)} /* Wave dividers */ .wave{position:absolute;left:0;width:100%;line-height:0;z-index:3;pointer-events:none} .wave.top{top:-1px} .wave.bottom{bottom:-1px} .wave svg{width:100%;height:clamp(48px,7vw,96px);display:block} /* ---------- 8. Photo placeholder system ---------- */ /* A .ph shows a colourful gradient + emoji; the real photo fades in when it loads. */ .ph{ position:relative;overflow:hidden;background:var(--grad-brand); display:grid;place-items:center;isolation:isolate; } .ph::before{ content:"";position:absolute;inset:0;z-index:1; background: radial-gradient(circle at 25% 25%,rgba(255,255,255,.35),transparent 45%), radial-gradient(circle at 78% 72%,rgba(255,255,255,.22),transparent 42%); } .ph .ph-label{ position:relative;z-index:2;text-align:center;color:#fff;padding:16px; font-family:var(--font-head);font-weight:700;font-size:.9rem; text-shadow:0 2px 10px rgba(0,0,0,.25); } .ph .ph-label .em{display:block;font-size:2.6rem;margin-bottom:6px;line-height:1} /* Visible by default. These used to start at opacity:0 and only appear once JS added .is-loaded — which meant a slow or failed script left every photo on the site invisible. The coloured placeholder still shows underneath until the file paints, and main.js hides genuinely broken images via its error handler. */ .ph img,.ph video{ position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover; opacity:1; } .ph-sun{background:var(--grad-sun)} .ph-candy{background:var(--grad-candy)} .ph-fresh{background:var(--grad-fresh)} .ph-lime{background:linear-gradient(135deg,var(--lime),var(--mint))} .ph-sky{background:linear-gradient(135deg,var(--sky),var(--indigo))} .ph-coral{background:linear-gradient(135deg,var(--coral),var(--amber))} /* ---------- 9. Cards ---------- */ .card{ background:linear-gradient(180deg,#fff,#FCFAFF);border-radius:var(--radius);padding:32px 28px; box-shadow:var(--shadow);border:2px solid #EFE9FF; position:relative;overflow:hidden;height:100%; transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease; } /* a touch of tilt on hover — same trick as the footer's link stickers */ .card:hover{transform:translateY(-8px) rotate(-.7deg);box-shadow:var(--shadow-lg)} /* Card body tinted to match its own icon colour, so a row of cards reads as a set of colours rather than a row of white boxes. */ .card.t-sun{background:linear-gradient(180deg,#FFF7E8,#FFFDF7);border-color:#FBE3B8} .card.t-candy{background:linear-gradient(180deg,#FFF0F7,#FFFAFD);border-color:#FACFE4} .card.t-fresh{background:linear-gradient(180deg,#ECFBF4,#F7FFFC);border-color:#B4EBD3} .card.t-sky{background:linear-gradient(180deg,#ECF6FF,#F7FCFF);border-color:#BEE0FA} .card.t-lime{background:linear-gradient(180deg,#F5FCE4,#FCFFF3);border-color:#D7ECA4} .card.t-purple{background:linear-gradient(180deg,#F5F0FF,#FCFAFF);border-color:#E0D4FF} .card h3{margin-bottom:10px} .card p{color:var(--muted);font-size:.97rem} .card-ico{ width:64px;height:64px;border-radius:20px;display:grid;place-items:center; font-size:30px;margin-bottom:20px;background:var(--grad-brand); box-shadow:0 10px 24px rgba(124,58,237,.28); transition:transform .4s cubic-bezier(.34,1.56,.64,1); } .card:hover .card-ico{transform:rotate(-8deg) scale(1.08)} .card-ico.sun{background:var(--grad-sun);box-shadow:0 10px 24px rgba(251,146,60,.3)} .card-ico.candy{background:var(--grad-candy);box-shadow:0 10px 24px rgba(236,72,153,.3)} .card-ico.fresh{background:var(--grad-fresh);box-shadow:0 10px 24px rgba(52,211,153,.3)} .card-ico.sky{background:linear-gradient(135deg,var(--sky),var(--indigo));box-shadow:0 10px 24px rgba(56,189,248,.3)} .card-ico.lime{background:linear-gradient(135deg,var(--lime),var(--mint));box-shadow:0 10px 24px rgba(163,230,53,.3)} /* top colour stripe */ .card.striped::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--grad-brand)} .card.striped.sun::before{background:var(--grad-sun)} .card.striped.candy::before{background:var(--grad-candy)} .card.striped.fresh::before{background:var(--grad-fresh)} /* Program cards */ .prog{ background:#fff;border-radius:var(--radius);overflow:hidden;height:100%; box-shadow:var(--shadow);border:1.5px solid var(--line);display:flex;flex-direction:column; transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s; } .prog:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)} .prog .ph{aspect-ratio:4/3} .prog-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1} .prog-age{ display:inline-flex;align-self:flex-start;align-items:center;gap:7px; font-family:var(--font-head);font-weight:700;font-size:.78rem;letter-spacing:.6px; padding:6px 15px;border-radius:99px;margin-bottom:13px; background:#F3EEFF;color:var(--purple); } .prog-age.sun{background:#FFF7E6;color:#B45309} .prog-age.candy{background:#FDF2F8;color:#BE185D} .prog-age.fresh{background:#ECFDF5;color:#047857} .prog h3{margin-bottom:9px} .prog p{color:var(--muted);font-size:.95rem;margin-bottom:18px} .prog ul{margin-top:auto;display:grid;gap:9px;padding-top:16px;border-top:2px dashed var(--line)} .prog ul li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;font-weight:600;color:var(--ink-2)} .prog ul li::before{content:"✦";color:var(--pink);font-size:.95rem;flex:0 0 auto;line-height:1.6} /* Stat counters */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .stat{ text-align:center;background:#fff;border-radius:var(--radius);padding:30px 16px; box-shadow:var(--shadow);border:1.5px solid var(--line); transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .stat:hover{transform:translateY(-6px)} .stat .num{ font-family:var(--font-head);font-weight:800;font-size:clamp(2.1rem,4.4vw,3rem); line-height:1;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent; } .stat .lbl{margin-top:9px;font-weight:700;font-size:.88rem;color:var(--muted);letter-spacing:.3px} .stat:nth-child(2) .num{background:var(--grad-sun);-webkit-background-clip:text;background-clip:text;color:transparent} .stat:nth-child(3) .num{background:var(--grad-candy);-webkit-background-clip:text;background-clip:text;color:transparent} .stat:nth-child(4) .num{background:var(--grad-fresh);-webkit-background-clip:text;background-clip:text;color:transparent} .stats.on-dark .stat{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.24);backdrop-filter:blur(10px)} .stats.on-dark .stat .num{background:none;-webkit-text-fill-color:#fff;color:#fff} .stats.on-dark .stat .lbl{color:rgba(255,255,255,.85)} /* Split media + text */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,66px);align-items:center} .split.reverse .split-media{order:2} .split-media{position:relative} /* Photos sit slightly off-square like a pinned-up print, and straighten when you hover them. The section clips overflow, so the tilt is safe. */ .split-media .ph{ aspect-ratio:4/3.2;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:8px solid #fff; transform:rotate(-1.4deg); transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s ease; } .split-media:hover .ph{transform:rotate(0deg);box-shadow:0 34px 80px rgba(30,27,75,.2)} .split.reverse .split-media .ph{transform:rotate(1.4deg)} .split.reverse .split-media:hover .ph{transform:rotate(0deg)} /* Rotated sticker badge that sits on the corner of a photo */ .photo-sticker{ position:absolute;top:-16px;right:6px;z-index:6; display:inline-flex;align-items:center;gap:7px; font-family:var(--font-head);font-weight:800;font-size:.9rem; color:#4A2E00;background:var(--grad-sun); padding:10px 20px;border-radius:99px; border:3.5px solid #fff;box-shadow:var(--shadow); transform:rotate(5deg); transition:transform .35s cubic-bezier(.34,1.56,.64,1); } .split-media:hover .photo-sticker{transform:rotate(-3deg) scale(1.05)} .photo-sticker.candy{background:var(--grad-candy);color:#fff} .photo-sticker.fresh{background:var(--grad-fresh);color:#053B2B} .photo-sticker.sky{background:linear-gradient(135deg,var(--sky),var(--indigo));color:#fff} .split-media .deco{ position:absolute;width:130px;height:130px;border-radius:34px;z-index:-1; background:var(--grad-sun);opacity:.5;filter:blur(2px); } /* -18px keeps these decorations inside the container's 22px padding */ .split-media .deco.d1{top:-18px;left:-18px;animation:floatY 7s ease-in-out infinite} .split-media .deco.d2{bottom:-18px;right:-18px;background:var(--grad-fresh);animation:floatY 9s ease-in-out infinite .8s} .float-card{ position:absolute;bottom:-28px;right:-14px;z-index:5; background:#fff;border-radius:22px;padding:16px 22px;box-shadow:var(--shadow-lg); display:flex;align-items:center;gap:13px;animation:floatY 6s ease-in-out infinite; } .float-card .em{font-size:2rem} .float-card b{display:block;font-family:var(--font-head);font-size:1.35rem;color:var(--ink);line-height:1} .float-card span{font-size:.78rem;color:var(--muted);font-weight:700} /* Tick list */ .ticks{display:grid;gap:14px;margin:26px 0} .ticks li{display:flex;gap:14px;align-items:flex-start;font-weight:600} .ticks li .tk{ width:28px;height:28px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center; background:var(--grad-fresh);color:#fff;font-size:.82rem;font-weight:800;margin-top:2px; box-shadow:0 5px 12px rgba(52,211,153,.35); } /* ---------- 10. Marquee ---------- */ .marquee{ overflow:hidden;padding:20px 0;background:var(--grad-brand); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee-track{display:flex;gap:44px;width:max-content;animation:scrollX 34s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-track span{ display:inline-flex;align-items:center;gap:12px;white-space:nowrap; font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:#fff; } .marquee-track span .em{font-size:1.5rem} @keyframes scrollX{to{transform:translateX(-50%)}} /* ---------- 11. Gallery ---------- */ .gal-filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:38px} .gal-filters button{ font-family:var(--font-head);font-weight:700;font-size:.92rem; padding:11px 24px;border-radius:99px;border:2px solid var(--line); background:#fff;color:var(--ink-2);cursor:pointer; transition:all .25s cubic-bezier(.34,1.56,.64,1); } .gal-filters button:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-2px)} .gal-filters button.active{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--shadow-color)} .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px} .gal-item{ position:relative;border-radius:22px;overflow:hidden;cursor:pointer; box-shadow:var(--shadow);aspect-ratio:1;background:#eee; transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s; } .gal-item.tall{aspect-ratio:3/4} .gal-item.wide{grid-column:span 2;aspect-ratio:16/10} .gal-item:hover{transform:translateY(-7px) scale(1.015);box-shadow:var(--shadow-lg)} .gal-item .ph{position:absolute;inset:0} .gal-item .gal-cap{ position:absolute;inset:auto 0 0 0;z-index:5;padding:34px 18px 16px; background:linear-gradient(transparent,rgba(30,27,75,.85)); color:#fff;font-family:var(--font-head);font-weight:700;font-size:.96rem; transform:translateY(8px);opacity:0;transition:all .3s ease; } .gal-item:hover .gal-cap{transform:translateY(0);opacity:1} .gal-item .play-badge{ position:absolute;z-index:6;top:12px;right:12px; width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92); display:grid;place-items:center;color:var(--purple);font-size:.9rem; box-shadow:0 6px 16px rgba(0,0,0,.2); } .gal-empty{grid-column:1/-1;text-align:center;padding:40px;color:var(--muted)} /* Lightbox */ .lightbox{ position:fixed;inset:0;z-index:1000;background:rgba(20,16,45,.94); backdrop-filter:blur(10px);display:grid;place-items:center;padding:22px; opacity:0;visibility:hidden;transition:opacity .3s; } .lightbox.open{opacity:1;visibility:visible} .lightbox-stage{max-width:min(1080px,92vw);max-height:82vh;position:relative} .lightbox-stage img,.lightbox-stage video{ max-width:100%;max-height:82vh;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.6); animation:popIn .35s cubic-bezier(.34,1.56,.64,1); } @keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}} .lightbox-cap{ text-align:center;color:#fff;margin-top:16px;font-family:var(--font-head); font-weight:600;font-size:1rem; } .lb-btn{ position:absolute;z-index:5;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer; background:rgba(255,255,255,.16);color:#fff;font-size:1.4rem; display:grid;place-items:center;backdrop-filter:blur(8px); transition:background .2s,transform .2s; } .lb-btn:hover{background:rgba(255,255,255,.32);transform:scale(1.08)} .lb-close{top:20px;right:20px;position:fixed} .lb-prev{left:14px;top:50%;transform:translateY(-50%);position:fixed} .lb-next{right:14px;top:50%;transform:translateY(-50%);position:fixed} .lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.08)} /* Video feature block */ /* The school's clips are filmed vertically on a phone, so the player is portrait and capped in width — a 16/9 frame would either crop heads off or leave huge black pillars either side. */ .video-frame{ position:relative;border-radius:var(--radius-lg);overflow:hidden; box-shadow:var(--shadow-lg);border:8px solid #fff;background:#1B1442; aspect-ratio:9/16;max-width:340px;margin-inline:auto; } .video-frame video{width:100%;height:100%;object-fit:cover;display:block} .video-frame iframe{width:100%;height:100%;border:0;display:block} /* Shows the real opening frame of the clip, the same still the gallery tiles use. The gradient stays only as a fallback if that image is ever missing. */ .video-poster{ position:absolute;inset:0;z-index:4;display:grid;place-items:center;cursor:pointer; background:var(--grad-brand);overflow:hidden; } .video-poster img{ position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block; } /* scrim, so the white play button stays readable over any frame */ .video-poster::after{ content:"";position:absolute;inset:0;z-index:2; background:linear-gradient(rgba(30,27,75,.18),rgba(30,27,75,.48)); } .video-poster.hidden{display:none} .play-btn{ width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.95); display:grid;place-items:center;font-size:1.9rem;color:var(--purple); box-shadow:0 12px 40px rgba(0,0,0,.35);position:relative;z-index:3;padding-left:6px; transition:transform .25s; } .video-poster:hover .play-btn{transform:scale(1.1)} .play-btn::after{ content:"";position:absolute;inset:-14px;border-radius:50%; border:3px solid rgba(255,255,255,.55);animation:pulseRing 2.2s ease-out infinite; } @keyframes pulseRing{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}} /* ---------- 12. Testimonials ---------- */ .quote-card{ background:#fff;border-radius:var(--radius);padding:32px 28px;height:100%; box-shadow:var(--shadow);border:1.5px solid var(--line);position:relative; display:flex;flex-direction:column; transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s; } .quote-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)} .quote-card .qmark{ font-family:var(--font-head);font-size:4rem;line-height:.7;color:var(--pink-l); margin-bottom:8px;opacity:.75; } .quote-card p{color:var(--ink-2);font-size:1rem;line-height:1.85;margin-bottom:22px;flex:1} .stars{color:var(--amber);letter-spacing:2px;margin-bottom:14px;font-size:1rem} .who{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:2px dashed var(--line)} .who .av{ width:48px;height:48px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; font-family:var(--font-head);font-weight:800;color:#fff;font-size:1.05rem; background:var(--grad-brand); } .who .av.sun{background:var(--grad-sun);color:#4A2E00} .who .av.candy{background:var(--grad-candy)} .who .av.fresh{background:var(--grad-fresh)} .who b{display:block;font-family:var(--font-head);font-size:1rem;color:var(--ink)} .who span{font-size:.82rem;color:var(--muted);font-weight:600} /* ---------- 13. Branch cards ---------- */ .branch{ background:#fff;border-radius:var(--radius);overflow:hidden;height:100%; box-shadow:var(--shadow);border:1.5px solid var(--line);display:flex;flex-direction:column; transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s; } .branch:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)} .branch-top{padding:26px 26px 0;display:flex;align-items:center;gap:14px} .branch-top .pin{ width:52px;height:52px;border-radius:17px;flex:0 0 auto;display:grid;place-items:center; font-size:24px;background:var(--grad-brand);box-shadow:0 8px 20px rgba(124,58,237,.28); } .branch:nth-child(2) .branch-top .pin{background:var(--grad-sun)} .branch:nth-child(3) .branch-top .pin{background:var(--grad-fresh)} .branch-top .no{font-size:.72rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--pink)} .branch-top h3{font-size:1.12rem;line-height:1.3} .branch-body{padding:20px 26px 26px;display:flex;flex-direction:column;flex:1} .branch address{font-style:normal;color:var(--muted);font-size:.95rem;line-height:1.7;margin-bottom:20px} .branch .contacts{display:grid;gap:11px;margin-top:auto;padding-top:18px;border-top:2px dashed var(--line)} /* One line per row — never wrap an email onto a second line. display:block (not flex) with an inline icon so text-overflow can act as a safety net; at every breakpoint the address is sized to fit without it. */ .branch .contacts a{ display:block;font-weight:700;color:var(--ink-2); font-size:clamp(.72rem,.92vw,.82rem); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color .2s; } .branch .contacts a:hover{color:var(--purple)} .branch .contacts a .ic{ display:inline-grid;place-items:center;vertical-align:middle; width:26px;height:26px;border-radius:8px;margin-right:8px; background:#F5F1FF;font-size:.82rem; } .branch .map-embed{aspect-ratio:16/9;background:#EEE9F8} .branch .map-embed iframe{width:100%;height:100%;border:0;display:block;filter:saturate(1.1)} /* ---------- 14. Forms ---------- */ .form-card{ background:#fff;border-radius:var(--radius-lg);padding:clamp(28px,4vw,48px); box-shadow:var(--shadow-lg);border:1.5px solid var(--line);position:relative;overflow:hidden; } .form-card::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:var(--grad-brand)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .field{display:flex;flex-direction:column;gap:8px} .field.full{grid-column:1/-1} .field label{font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--ink)} .field label .req{color:var(--pink)} .field input,.field select,.field textarea{ width:100%;padding:14px 18px;border-radius:16px;border:2px solid var(--line); background:#FCFBFF;font-size:.98rem;font-weight:600;color:var(--ink); transition:border-color .2s,box-shadow .2s,background .2s; } .field textarea{min-height:130px;resize:vertical;line-height:1.7} .field select{cursor:pointer;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;background-size:16px;padding-right:44px; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(124,58,237,.13); } .field input::placeholder,.field textarea::placeholder{color:#A9A2C4;font-weight:500} .field .err{font-size:.8rem;color:#DC2626;font-weight:700;min-height:16px;display:none} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#F87171;background:#FEF2F2} .field.invalid .err{display:block} /* honeypot — off-screen for people, still fillable by bots */ .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .form-note{font-size:.84rem;color:var(--muted);margin-top:16px;text-align:center} .form-msg{ margin-top:18px;padding:16px 20px;border-radius:16px;font-weight:700;font-size:.95rem; display:none;align-items:center;gap:12px; } .form-msg.show{display:flex;animation:popIn .35s cubic-bezier(.34,1.56,.64,1)} .form-msg.ok{background:#ECFDF5;color:#047857;border:2px solid #A7F3D0} .form-msg.bad{background:#FEF2F2;color:#B91C1C;border:2px solid #FECACA} /* ---------- 15. FAQ accordion ---------- */ .faq{display:grid;gap:14px} .faq-item{ background:#fff;border-radius:22px;border:1.5px solid var(--line); box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .3s,border-color .3s; } .faq-item.open{box-shadow:var(--shadow);border-color:#DDD0FF} .faq-q{ width:100%;text-align:left;background:none;border:none;cursor:pointer; padding:22px 26px;display:flex;align-items:center;gap:16px; font-family:var(--font-head);font-weight:700;font-size:1.04rem;color:var(--ink); } .faq-q .plus{ margin-left:auto;flex:0 0 auto;width:32px;height:32px;border-radius:50%; background:#F3EEFF;color:var(--purple);display:grid;place-items:center; font-size:1.15rem;transition:transform .3s,background .3s; } .faq-item.open .faq-q .plus{transform:rotate(135deg);background:var(--grad-brand);color:#fff} .faq-a{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1)} .faq-a p{padding:0 26px 24px;color:var(--muted);font-size:.97rem;line-height:1.85} /* ---------- 16. Page hero (inner pages) ---------- */ .page-hero{ position:relative;overflow:hidden;text-align:center; padding:clamp(56px,8vw,96px) 0 clamp(76px,10vw,120px); background: radial-gradient(circle at 15% 20%,rgba(251,191,36,.3),transparent 42%), radial-gradient(circle at 85% 25%,rgba(236,72,153,.26),transparent 44%), var(--grad-brand); color:#fff; } /* ---- Wave boundary under the hero ---- The shape is applied as a MASK on the element that follows the hero, not as a coloured SVG on top of it. That matters: the section's own tint, gradient and blur-blobs show through the wave, and the cut-away parts reveal the hero underneath — so it blends with any hero/section pairing and never needs re-colouring. (A filled SVG divider has to be told what colour to be, which is exactly why the old white one stopped matching once sections got tints.) Each page sets its own shape via --wave. */ .after-hero{ --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,58 C240,8 480,108 720,58 C960,8 1200,108 1440,58 L1440,100 L0,100 Z'/%3E%3C/svg%3E"); margin-top:calc(-1 * var(--hero-curve)); -webkit-mask-image:var(--wave),linear-gradient(rgba(0,0,0,1),rgba(0,0,0,1)); mask-image:var(--wave),linear-gradient(rgba(0,0,0,1),rgba(0,0,0,1)); -webkit-mask-size:100% var(--hero-curve),100% calc(100% - var(--hero-curve) + 1px); mask-size:100% var(--hero-curve),100% calc(100% - var(--hero-curve) + 1px); -webkit-mask-position:top center,bottom center; mask-position:top center,bottom center; -webkit-mask-repeat:no-repeat,no-repeat; mask-repeat:no-repeat,no-repeat; } /* put back the height eaten by the negative margin */ .section.after-hero{padding-top:calc(clamp(64px,9vw,118px) + var(--hero-curve))} .section-tight.after-hero{padding-top:calc(clamp(48px,6vw,80px) + var(--hero-curve))} .marquee.after-hero{padding-top:calc(20px + var(--hero-curve))} /* one shape per page */ .w-flow{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,58 C240,8 480,108 720,58 C960,8 1200,108 1440,58 L1440,100 L0,100 Z'/%3E%3C/svg%3E")} .w-cloud{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,100 V62 q60,-56 120,0 q60,-56 120,0 q60,-56 120,0 q60,-56 120,0 q60,-56 120,0 q60,-56 120,0 q60,-56 120,0 q60,-56 120,0 q60,-56 120,0 q60,-56 120,0 q60,-56 120,0 q60,-56 120,0 V100 Z'/%3E%3C/svg%3E")} .w-hills{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,100 V72 C180,18 360,22 540,58 C720,94 900,18 1080,38 C1260,58 1350,86 1440,68 V100 Z'/%3E%3C/svg%3E")} .w-zig{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,100 V44 L90,92 L180,44 L270,92 L360,44 L450,92 L540,44 L630,92 L720,44 L810,92 L900,44 L990,92 L1080,44 L1170,92 L1260,44 L1350,92 L1440,44 V100 Z'/%3E%3C/svg%3E")} .w-arch{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,100 V88 C300,4 1140,4 1440,88 V100 Z'/%3E%3C/svg%3E")} .w-torn{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,100 V64 C120,44 200,90 320,68 C440,46 520,88 660,66 C800,44 900,86 1040,64 C1180,42 1300,82 1440,60 V100 Z'/%3E%3C/svg%3E")} /* ---- A different hero colour per page ---- Same brand palette, but each page arrives with its own mood instead of the identical purple every time. */ .page-hero.h-about{ background: radial-gradient(circle at 15% 20%,rgba(251,191,36,.30),transparent 42%), radial-gradient(circle at 85% 25%,rgba(236,72,153,.28),transparent 44%), linear-gradient(135deg,#4F46E5,#7C3AED 45%,#DB2777); } .page-hero.h-programs{ background: radial-gradient(circle at 18% 22%,rgba(255,255,255,.26),transparent 44%), radial-gradient(circle at 82% 18%,rgba(124,58,237,.34),transparent 46%), linear-gradient(135deg,#F59E0B,#FB7185 48%,#9333EA); } .page-hero.h-gallery{ background: radial-gradient(circle at 15% 20%,rgba(251,191,36,.26),transparent 42%), radial-gradient(circle at 84% 24%,rgba(255,255,255,.22),transparent 44%), linear-gradient(135deg,#EC4899,#A855F7 50%,#6366F1); } .page-hero.h-admissions{ background: radial-gradient(circle at 16% 20%,rgba(163,230,53,.30),transparent 44%), radial-gradient(circle at 84% 26%,rgba(255,255,255,.20),transparent 42%), linear-gradient(135deg,#10B981,#0EA5E9 52%,#6366F1); } .page-hero.h-contact{ background: radial-gradient(circle at 15% 18%,rgba(255,255,255,.24),transparent 42%), radial-gradient(circle at 86% 26%,rgba(236,72,153,.28),transparent 44%), linear-gradient(135deg,#0EA5E9,#6366F1 50%,#A855F7); } .page-hero h1{color:#fff;margin-bottom:16px;text-shadow:0 6px 26px rgba(0,0,0,.2)} .page-hero p{color:rgba(255,255,255,.93);max-width:640px;margin:0 auto;font-size:clamp(1rem,1.6vw,1.15rem)} .crumb{ display:inline-flex;align-items:center;gap:9px;margin-top:22px; font-size:.85rem;font-weight:700;color:rgba(255,255,255,.85); } .crumb a{color:#fff;opacity:.85} .crumb a:hover{opacity:1;text-decoration:underline} /* ---------- 17. CTA band ---------- */ .cta-band{ position:relative;overflow:hidden;border-radius:var(--radius-lg); padding:clamp(40px,6vw,72px) clamp(26px,5vw,64px); background:var(--grad-brand);color:#fff;text-align:center; box-shadow:var(--shadow-lg); } .cta-band::before,.cta-band::after{ content:"";position:absolute;border-radius:50%;filter:blur(50px);opacity:.5; } .cta-band::before{width:280px;height:280px;background:var(--amber);top:-90px;left:-70px} .cta-band::after{width:240px;height:240px;background:var(--sky);bottom:-80px;right:-60px} .cta-band > *{position:relative;z-index:2} .cta-band h2{color:#fff;margin-bottom:14px} .cta-band p{color:rgba(255,255,255,.92);max-width:600px;margin:0 auto 30px;font-size:1.06rem} /* ========================================================================== 18. Footer — "The Playground at Dusk" An evening sky holding the content, a rolling hillside scene along the bottom, and links styled as cubby-name stickers. All CSS + inline SVG. ========================================================================== */ .site-footer{ /* No overflow:hidden here — it would clip the scallop, which sits above the footer's own box. The sky layer clips its own drifting props instead. */ position:relative;color:rgba(255,255,255,.76); padding:clamp(64px,8vw,96px) 0 0; background: radial-gradient(ellipse at 50% 0%,rgba(124,58,237,.55),transparent 60%), linear-gradient(178deg,#3B2A72 0%,#2A1F5C 38%,#1B1442 100%); } /* --- cloud-scallop top edge --- Bumps are drawn in the footer's OWN colour and sit above its box, so whatever section precedes the footer (white, cream or blush) shows between them. */ .footer-scallop{ /* radius == strip height, tile == 2x radius → clean semicircles that just touch */ position:absolute;top:-25px;left:0;right:0;height:26px;z-index:4;pointer-events:none; background:radial-gradient(circle at 50% 100%,#3B2A72 0 26px,rgba(59,42,114,0) 26.5px) repeat-x 0 100%/52px 26px; } /* --- sky decor layer --- */ .footer-sky{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .footer-sky .moon{ position:absolute;top:9%;right:9%;width:52px;height:52px;border-radius:50%; background:radial-gradient(circle at 34% 32%,#FFFBEB,#FBBF24 78%); box-shadow:0 0 46px rgba(251,191,36,.5),0 0 90px rgba(251,191,36,.22); } .footer-sky .star{ position:absolute;width:4px;height:4px;border-radius:50%;background:#fff; opacity:.75;animation:twinkle 3.4s ease-in-out infinite; } .footer-sky .star.big{width:6px;height:6px} @keyframes twinkle{0%,100%{opacity:.22;transform:scale(.7)}50%{opacity:.95;transform:scale(1)}} .footer-sky .s1{top:12%;left:8%} .footer-sky .s2{top:22%;left:20%;animation-delay:.7s} .footer-sky .s3{top:8%;left:34%;animation-delay:1.4s} .footer-sky .s4{top:30%;left:47%;animation-delay:.3s} .footer-sky .s5{top:14%;left:62%;animation-delay:1.9s} .footer-sky .s6{top:26%;left:76%;animation-delay:1.1s} .footer-sky .s7{top:38%;left:88%;animation-delay:2.3s} .footer-sky .s8{top:44%;left:5%;animation-delay:1.6s} .footer-sky .cloud{ position:absolute;background:rgba(255,255,255,.075);border-radius:99px;filter:blur(14px); } .footer-sky .cloud.k1{top:16%;left:-14%;width:280px;height:56px;animation:driftX 44s linear infinite} .footer-sky .cloud.k2{top:40%;left:-24%;width:210px;height:44px;animation:driftX 62s linear infinite 8s} @keyframes driftX{to{transform:translateX(160vw)}} .footer-sky .balloon,.footer-sky .kite{position:absolute;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3))} .footer-sky .balloon{font-size:2rem} .footer-sky .kite{font-size:2.1rem} .footer-sky .bl1{bottom:26%;left:6%;animation:floatUp 9s ease-in-out infinite} .footer-sky .bl2{top:18%;left:29%;font-size:1.6rem;animation:floatUp 11.5s ease-in-out infinite 1.4s} .footer-sky .bl3{bottom:34%;right:12%;font-size:1.7rem;animation:floatUp 10.2s ease-in-out infinite .8s} .footer-sky .kt1{top:13%;left:52%;animation:sway 7.5s ease-in-out infinite} @keyframes floatUp{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-26px) rotate(4deg)}} @keyframes sway{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(20px,-16px) rotate(10deg)}} /* --- admissions ribbon --- */ .footer-ribbon{ position:relative;z-index:3;display:flex;justify-content:center;margin-bottom:clamp(34px,4.5vw,54px); } .footer-ribbon a{ position:relative; /* anchors the pulse ring to the pill, not the row */ display:inline-flex;align-items:center;gap:11px; font-family:var(--font-head);font-weight:800;font-size:clamp(.9rem,1.5vw,1.02rem); color:#4A2E00;background:var(--grad-sun); padding:13px 28px;border-radius:99px;text-decoration:none; box-shadow:0 12px 32px rgba(251,146,60,.42); border:2.5px solid rgba(255,255,255,.5); transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s; } .footer-ribbon a::after{ content:"";position:absolute;inset:-6px;border-radius:99px; border:2px solid rgba(251,191,36,.45);animation:pulseRing 2.6s ease-out infinite; } .footer-ribbon a:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 42px rgba(251,146,60,.55)} /* --- content grid --- */ /* Last column widened so the full email fits on one line; the link columns only need enough width for their widest chip. */ .footer-grid{ display:grid;grid-template-columns:1.45fr .85fr 1.15fr 1.55fr;gap:clamp(28px,3.4vw,44px); position:relative;z-index:3;padding-bottom:clamp(30px,4vw,48px); } /* Below this the four columns get too tight for a chip or an email, so go 2-up. */ @media (max-width:1150px){ .footer-grid{grid-template-columns:1fr 1fr;gap:32px} } .site-footer h4{ color:#fff;font-size:1.06rem;margin-bottom:20px;letter-spacing:.2px; display:flex;align-items:center;gap:9px; } .site-footer h4 .h-em{font-size:1.15rem} .site-footer .brand-txt b{color:#fff} .site-footer p{font-size:.94rem;line-height:1.8} .footer-brand p{margin-top:18px;max-width:330px} /* --- link stickers --- One chip per row, left-aligned, so the column reads as a tidy list rather than a ragged wrap. align-items keeps each pill only as wide as its text. */ .footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:9px} .footer-links a{ display:inline-flex;align-items:center;gap:8px;white-space:nowrap; font-family:var(--font-head);font-weight:600;font-size:.9rem; color:rgba(255,255,255,.9);text-decoration:none; background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.15); padding:8px 15px;border-radius:99px; transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .25s,border-color .25s,color .25s; } .footer-links a .le{font-size:1rem;line-height:1} .footer-links a:hover{ transform:translateY(-3px) rotate(-2.5deg); background:var(--chip,rgba(255,255,255,.2)); border-color:transparent;color:var(--chip-ink,#fff); } /* programme chips carry their own colour, matching the programme cards */ .footer-links a.c-sun{--chip:var(--grad-sun);--chip-ink:#4A2E00} .footer-links a.c-candy{--chip:var(--grad-candy);--chip-ink:#fff} .footer-links a.c-fresh{--chip:var(--grad-fresh);--chip-ink:#053B2B} .footer-links a.c-sky{--chip:linear-gradient(135deg,var(--sky),var(--indigo));--chip-ink:#fff} /* --- notice-board contact card --- */ .notice{ position:relative;background:rgba(255,255,255,.06); border:2px dashed rgba(255,255,255,.24);border-radius:22px; padding:26px 22px 22px;transform:rotate(-1.2deg); transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .notice:hover{transform:rotate(0deg)} .notice::before{ content:"📌";position:absolute;top:-15px;left:50%;transform:translateX(-50%); font-size:1.45rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); } .fcontact{display:grid;gap:13px} /* One line per row — the email must never split across two lines. The address still breaks where its
is; nowrap does not override that. min-width/overflow are a backstop so a long value clips instead of widening the page. */ .fcontact a,.fcontact span{ display:flex;gap:11px;align-items:flex-start;line-height:1.6; color:rgba(255,255,255,.82);font-weight:600; font-size:clamp(.72rem,.95vw,.88rem); text-decoration:none;white-space:nowrap;min-width:0;overflow:hidden; transition:color .2s,transform .2s; } .fcontact a:hover{color:var(--amber);transform:translateX(3px)} .fcontact .ic{flex:0 0 auto;font-size:1rem} /* --- social bubbles --- */ .fsocial{display:flex;gap:11px;margin-top:22px} .fsocial a{ width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.18); color:#fff;font-weight:700;font-size:1.05rem;text-decoration:none; transition:all .3s cubic-bezier(.34,1.56,.64,1); } .fsocial a:hover{transform:translateY(-6px) scale(1.1);border-color:transparent;color:#fff} .fsocial a.fb:hover{background:#1877F2} .fsocial a.ig:hover{background:linear-gradient(45deg,#F09433,#DC2743,#BC1888)} .fsocial a.yt:hover{background:#FF0000} .fsocial a.wa:hover{background:#25D366} /* --- ground scene --- height:auto scales the whole scene proportionally, so nothing is ever cropped at any viewport width and the hills always reach both edges. (A fixed height + preserveAspectRatio="slice" clipped the rainbow apex — and on very wide screens it also cut the school roof.) */ .footer-scene{position:relative;z-index:2;line-height:0;margin-top:clamp(18px,3vw,34px)} .footer-scene svg{width:100%;height:auto;display:block} /* --- rainbow crayon stripe + bottom bar --- */ .crayon-stripe{ height:7px;position:relative;z-index:3; background:linear-gradient(90deg, #FB7185 0 16.6%,#FB923C 16.6% 33.2%,#FBBF24 33.2% 49.8%, #34D399 49.8% 66.4%,#38BDF8 66.4% 83%,#A78BFA 83% 100%); } /* full-bleed bar; the inner .container holds the two text blocks */ .footer-bottom{position:relative;z-index:3;background:#160F36;padding:22px 0} .footer-bottom .container{ display:flex;justify-content:space-between;align-items:center; gap:14px;flex-wrap:wrap;font-size:.86rem;color:rgba(255,255,255,.62); } .footer-bottom a{color:var(--amber);text-decoration:none} .footer-bottom a:hover{text-decoration:underline} .footer-bottom .bye{font-family:var(--font-head);font-weight:700;color:rgba(255,255,255,.9)} /* ---------- 19. Floating WhatsApp ---------- */ .wa-float{ position:fixed;right:20px;bottom:20px;z-index:850; width:60px;height:60px;border-radius:50%; background:linear-gradient(135deg,#25D366,#128C7E); display:grid;place-items:center; box-shadow:0 12px 32px rgba(37,211,102,.48); transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s; } .wa-float svg{width:32px;height:32px;fill:#fff} .wa-float::after{ content:"";position:absolute;inset:0;border-radius:50%; border:2.5px solid rgba(37,211,102,.6);animation:pulseRing 2.4s ease-out infinite; } /* Touch devices: no hover state to get stuck in, and no pulsing ring — on a phone the expanding ring reads as the button itself jiggling. */ @media (hover:hover){ .wa-float:hover{transform:scale(1.1) rotate(6deg);box-shadow:0 16px 42px rgba(37,211,102,.6)} } @media (hover:none){ .wa-float::after{display:none} } .wa-float .tip{ position:absolute;right:74px;top:50%;transform:translateY(-50%) translateX(8px); background:var(--ink);color:#fff;padding:9px 16px;border-radius:12px; font-size:.82rem;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none; transition:opacity .25s,transform .25s; } .wa-float:hover .tip{opacity:1;transform:translateY(-50%) translateX(0)} /* Back to top */ .to-top{ position:fixed;right:22px;bottom:92px;z-index:840; width:46px;height:46px;border-radius:50%;border:none;cursor:pointer; background:#fff;color:var(--purple);box-shadow:var(--shadow); display:grid;place-items:center;font-size:1.1rem; opacity:0;visibility:hidden;transform:translateY(12px); transition:all .3s cubic-bezier(.34,1.56,.64,1); } .to-top.show{opacity:1;visibility:visible;transform:translateY(0)} @media (hover:hover){ .to-top:hover{background:var(--purple);color:#fff;transform:translateY(-4px)} } /* ---------- 20. Scroll reveal ---------- */ .reveal{opacity:0;transform:translateY(34px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none} /* Offset stays under the container's 22px side padding, so a section that has not been revealed yet can never push past the viewport edge. */ .reveal.from-left{transform:translateX(-20px)} .reveal.from-right{transform:translateX(20px)} /* Media columns carry decorations that already hang -18px outside them; adding a sideways slide on top would stack past the padding, so these rise instead. */ .split-media.reveal.from-left,.split-media.reveal.from-right{transform:translateY(28px)} .reveal.zoom{transform:scale(.92)} .reveal.in.from-left,.reveal.in.from-right,.reveal.in.zoom{transform:none} [data-delay="1"]{transition-delay:.1s} [data-delay="2"]{transition-delay:.2s} [data-delay="3"]{transition-delay:.3s} [data-delay="4"]{transition-delay:.4s} [data-delay="5"]{transition-delay:.5s} [data-delay="6"]{transition-delay:.6s} /* ---------- 21. Responsive ---------- */ @media (max-width:1024px){ :root{--nav-h:70px} .nav-links,.nav-cta{display:none} .nav-toggle{display:grid} /* backdrop-filter on a sticky element is the classic reason a mobile header disappears while scrolling and reappears a moment after you stop — the blurred layer fails to repaint during the scroll. Opaque background here: cheaper to composite and it stays put. */ .site-header,.site-header.scrolled{ backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff; } .footer-grid{grid-template-columns:1fr 1fr;gap:32px} .g-4{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} .hero-inner{grid-template-columns:1fr;gap:52px} .hero-copy{text-align:center} .hero-copy .lead{margin-inline:auto} .hero-copy .btn-group,.hero-badges{justify-content:center} /* width:100% is required — auto margins on a grid item make it shrink-to-fit, and every child here is absolutely positioned, so it would collapse to 0. */ .hero-art{width:100%;max-width:520px;margin-inline:auto;min-height:min(84vw,430px)} .form-grid{grid-template-columns:1fr} } @media (max-width:860px){ .split,.split.reverse{grid-template-columns:1fr;gap:40px} .split.reverse .split-media{order:0} .g-3{grid-template-columns:1fr} .split-media .ph{aspect-ratio:16/11} /* Stacked layouts have no left/right relationship, and a sideways start offset would let the page be dragged horizontally before the section reveals. */ .reveal.from-left,.reveal.from-right{transform:translateY(34px)} } @media (max-width:640px){ body{font-size:16px} :root{--radius:22px;--radius-lg:30px} .g-2,.g-4{grid-template-columns:1fr} .gal-grid{grid-template-columns:repeat(2,1fr);gap:12px} .gal-item.wide{grid-column:span 2} .gal-item.tall{aspect-ratio:1} .card{padding:26px 22px} .hero-chip{padding:10px 14px;font-size:.8rem} .hero-chip .em{font-size:1.2rem} .hero-chip.c1{left:-2%} .hero-chip.c2{right:-1%} .float-card{right:50%;transform:translateX(50%);bottom:-24px;padding:13px 18px} .btn{padding:14px 26px;font-size:.95rem} .btn-group{gap:11px} .footer-grid{grid-template-columns:1fr;gap:32px} .footer-bottom .container{flex-direction:column;text-align:center} /* smaller sky props so they never crowd the text on a phone */ .footer-sky .moon{width:40px;height:40px;top:7%;right:7%} .footer-sky .balloon{font-size:1.5rem} .footer-sky .kite{font-size:1.6rem} /* keep one balloon, low and clear of the contact card */ .footer-sky .bl2,.footer-sky .bl3,.footer-sky .kt1{display:none} .footer-sky .bl1{bottom:15%;left:4%} .notice{transform:rotate(0deg)} .marquee-track{gap:28px} .marquee-track span{font-size:1rem} /* env() keeps both buttons clear of the iOS home indicator */ .wa-float{width:54px;height:54px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))} .wa-float svg{width:28px;height:28px} .wa-float .tip{display:none} .to-top{right:18px;bottom:calc(80px + env(safe-area-inset-bottom));width:42px;height:42px} .lb-prev,.lb-next{width:44px;height:44px;font-size:1.2rem} } @media (max-width:400px){ .gal-grid{grid-template-columns:1fr} .gal-item.wide{grid-column:span 1} .brand-txt b{font-size:1.15rem} .brand-mark{width:42px;height:42px;font-size:21px} } /* ---------- 22. Motion & print preferences ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .reveal{opacity:1!important;transform:none!important} } @media print{ .site-header,.nav-drawer,.wa-float,.to-top,.lightbox,.marquee{display:none!important} body{color:#000} .reveal{opacity:1!important;transform:none!important} }