/* ==================================================================== KiwiLiteracy v2 — shared stylesheet Base palette: teal + kōwhai (from v1) Zone accents: Teachers (teal/blue) · Parents (pōhutukawa coral) · Students (purple/fern) ==================================================================== */ :root{ /* base */ --teal:#0f8a8a; --teal-dk:#0c6b6b; --teal-lt:#e6f4f4; --kowhai:#f4c20d; --kowhai-dk:#c79a00; --ink:#0c2a2a; --ink-2:#33514f; --paper:#fffdf7; --cloud:#f3f8f8; --line:#e2ebe9; --white:#ffffff; --muted:#7d9491; /* zone accents */ --teachers:#0f8a8a; --teachers-lt:#e3f3f3; --teachers-dk:#0a6363; --parents:#e8553b; --parents-lt:#fdebe6; --parents-dk:#c23d27; /* pōhutukawa */ --students:#7b4dd8; --students-lt:#efe8fc; --students-dk:#5d33b0; /* playful purple */ --fern:#2f9e57; --ocean:#1f7fc4; --sky:#eaf6ff; /* shape */ --r:18px; --r-lg:26px; --r-sm:11px; --shadow:0 12px 30px -14px rgba(12,42,42,.28); --shadow-lg:0 26px 60px -22px rgba(12,42,42,.40); --maxw:1160px; --zone:var(--teal); --zone-lt:var(--teal-lt); --zone-dk:var(--teal-dk); } /* zone theming: add class to */ body.t-teachers{--zone:var(--teachers);--zone-lt:var(--teachers-lt);--zone-dk:var(--teachers-dk);} body.t-parents {--zone:var(--parents); --zone-lt:var(--parents-lt); --zone-dk:var(--parents-dk);} body.t-students{--zone:var(--students);--zone-lt:var(--students-lt);--zone-dk:var(--students-dk);} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} img{max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,h4{line-height:1.12;letter-spacing:-.02em;font-weight:800} section{padding:74px 0} .center{text-align:center} .muted{color:var(--muted)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px; padding:13px 24px;border-radius:999px;cursor:pointer;border:0;transition:.2s transform,.2s box-shadow; font-family:inherit} .btn:hover{transform:translateY(-2px)} .btn-primary{background:var(--zone);color:#fff;box-shadow:0 10px 22px -10px var(--zone)} .btn-kowhai{background:var(--kowhai);color:var(--ink);box-shadow:0 10px 22px -10px var(--kowhai-dk)} .btn-ghost{background:#fff;color:var(--zone);border:2px solid var(--zone)} .btn-dark{background:var(--ink);color:#fff} .btn-sm{padding:9px 17px;font-size:14px} .btn-lg{padding:16px 30px;font-size:17px} /* ---------- header ---------- */ header.site{position:sticky;top:0;z-index:50;background:rgba(255,253,247,.86); backdrop-filter:blur(11px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:68px} .brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:800} .brand .mark{width:38px;height:38px;flex:none} .brand b{color:var(--zone)} .menu{display:flex;align-items:center;gap:7px} .menu a{padding:9px 13px;border-radius:10px;font-weight:600;font-size:15px;color:var(--ink-2);transition:.15s} .menu a:hover{background:var(--zone-lt);color:var(--zone-dk)} .menu a.active{color:var(--zone);font-weight:700} .menu a.cta{background:var(--kowhai);color:var(--ink)} .menu a.ext{background:var(--ink);color:#fff} .menu a.cta:hover,.menu a.ext:hover{opacity:.9;background:var(--kowhai)} .menu a.ext:hover{background:var(--ink)} .menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} .menu-toggle span{width:24px;height:2.5px;background:var(--ink);border-radius:2px} /* ---------- generic sections ---------- */ .eyebrow{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase; color:var(--zone);background:var(--zone-lt);padding:6px 14px;border-radius:999px;margin-bottom:14px} .sec-head{max-width:720px;margin:0 auto 44px;text-align:center} .sec-head h2{font-size:clamp(28px,4vw,40px);margin-bottom:12px} .sec-head p{color:var(--ink-2);font-size:17px} .tag{display:inline-block;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px; background:var(--cloud);color:var(--ink-2)} .tag.kowhai{background:rgba(244,194,13,.2);color:#8a6a00} .tag.teal{background:var(--teal-lt);color:var(--teal-dk)} .tag.phase{background:var(--zone-lt);color:var(--zone-dk)} /* ---------- hero ---------- */ .hero{padding:64px 0 40px;position:relative;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center} .hero h1{font-size:clamp(34px,5.4vw,58px);margin:14px 0 16px} .hero .hl{color:var(--zone);position:relative;white-space:nowrap} .hero .hl::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:12px; background:var(--kowhai);opacity:.45;z-index:-1;border-radius:4px} .lead{font-size:18px;color:var(--ink-2);max-width:560px} .cta-row{display:flex;gap:13px;flex-wrap:wrap;margin:26px 0 18px} .trust{display:flex;align-items:center;gap:11px;flex-wrap:wrap;color:var(--muted);font-size:14px} /* floating hero blobs / kiwi */ .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;z-index:-1} .float{animation:float 6s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}} @keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}} .pop{animation:pop .5s cubic-bezier(.18,.89,.32,1.28) both} @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .reveal{opacity:0} .reveal.in{animation:fadeUp .6s ease both} /* ---------- zone cards (home) ---------- */ .zones{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .zone-card{position:relative;border-radius:var(--r-lg);padding:34px 28px;color:#fff;overflow:hidden; box-shadow:var(--shadow);transition:.25s transform,.25s box-shadow;display:flex;flex-direction:column;min-height:340px} .zone-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)} .zone-card .emoji{font-size:50px;line-height:1;margin-bottom:14px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))} .zone-card h3{font-size:27px;margin-bottom:8px} .zone-card p{font-size:15.5px;opacity:.95;flex:1} .zone-card .go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-weight:700; background:rgba(255,255,255,.22);padding:11px 20px;border-radius:999px;width:max-content;backdrop-filter:blur(4px)} .zone-card::after{content:"";position:absolute;right:-40px;bottom:-40px;width:170px;height:170px; border-radius:50%;background:rgba(255,255,255,.12)} .zc-teachers{background:linear-gradient(150deg,#13a0a0,#0a6363)} .zc-parents {background:linear-gradient(150deg,#f06b4f,#c23d27)} .zc-students{background:linear-gradient(150deg,#8a5ee6,#5d33b0)} /* ---------- generic card grid ---------- */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid.four{grid-template-columns:repeat(4,1fr)} .grid.two{grid-template-columns:repeat(2,1fr)} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px; box-shadow:var(--shadow);transition:.2s transform,.2s box-shadow;display:block} a.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .card .ico{font-size:38px;margin-bottom:12px;line-height:1} .card h3{font-size:20px;margin-bottom:7px} .card p{color:var(--ink-2);font-size:15px} .pill-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px} /* ---------- game cards ---------- */ .games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .game-card{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow); transition:.22s transform,.22s box-shadow;color:#fff;display:flex;flex-direction:column;min-height:230px; padding:24px;isolation:isolate} .game-card:hover{transform:translateY(-6px) scale(1.012);box-shadow:var(--shadow-lg)} .game-card .gemoji{font-size:44px;line-height:1;margin-bottom:auto} .game-card h3{font-size:22px;margin:14px 0 4px} .game-card .sub{font-size:14px;opacity:.95} .game-card .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px} .game-card .meta .tag{background:rgba(255,255,255,.22);color:#fff;font-size:11.5px} .game-card .play{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.25); border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px;backdrop-filter:blur(4px)} .gc-1{background:linear-gradient(150deg,#13a0a0,#0a6363)} .gc-2{background:linear-gradient(150deg,#f06b4f,#c23d27)} .gc-3{background:linear-gradient(150deg,#8a5ee6,#5d33b0)} .gc-4{background:linear-gradient(150deg,#2f9e57,#1c6e3c)} .gc-5{background:linear-gradient(150deg,#1f7fc4,#155a8c)} .gc-6{background:linear-gradient(150deg,#f4a712,#c77f00)} /* phase band */ .phase-band{display:flex;align-items:center;gap:14px;margin:42px 0 20px} .phase-band .dot{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:23px;flex:none; background:var(--zone-lt)} .phase-band h2{font-size:24px} .phase-band .ph-sub{color:var(--muted);font-size:14px} .phase-band .line{flex:1;height:2px;background:var(--line)} /* ---------- funnel / CTA band ---------- */ .funnel{background:linear-gradient(135deg,#fff7dc,#ffedc2)} .funnel-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center; background:#fff;border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow)} .funnel h2{font-size:28px;margin:10px 0} .funnel p{color:var(--ink-2)} /* ---------- footer ---------- */ footer.site{background:var(--ink);color:#cfe3e1;padding:54px 0 26px;margin-top:10px} footer .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px} footer h5{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:13px} footer ul{list-style:none} footer ul li{margin-bottom:8px} footer a{color:#cfe3e1;font-size:14.5px} footer a:hover{color:var(--kowhai)} .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;font-size:13px;color:#90aba9} .blurb{font-size:14.5px;margin:12px 0;max-width:330px;color:#a9c5c3} .disclaimer{font-size:12px;color:#809997;margin-top:14px;max-width:760px} /* ---------- game play screen (shared) ---------- */ .game-stage{min-height:100vh;display:flex;flex-direction:column;background: radial-gradient(900px 500px at 80% -10%,var(--zone-lt),transparent),var(--paper)} .game-top{display:flex;align-items:center;justify-content:space-between;padding:16px 22px; border-bottom:1px solid var(--line);background:rgba(255,255,255,.8);backdrop-filter:blur(8px)} .game-top .back{font-weight:700;color:var(--zone)} .score-pill{display:flex;gap:16px;align-items:center;font-weight:700} .score-pill b{color:var(--zone)} .game-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:30px 18px;text-align:center} .curric-tag{display:inline-flex;gap:8px;align-items:center;background:var(--zone-lt);color:var(--zone-dk); font-weight:600;font-size:13px;padding:7px 15px;border-radius:999px;margin-bottom:20px} .bigword{font-size:clamp(40px,9vw,86px);font-weight:800;letter-spacing:.04em;margin:10px 0} .tiles{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:24px 0} .tile{min-width:74px;padding:20px 22px;font-size:30px;font-weight:800;border-radius:16px;cursor:pointer; background:#fff;border:3px solid var(--line);transition:.15s;user-select:none;box-shadow:var(--shadow)} .tile:hover{transform:translateY(-4px);border-color:var(--zone)} .tile.sel{background:var(--zone);color:#fff;border-color:var(--zone);transform:translateY(-4px)} .tile.right{background:var(--fern);color:#fff;border-color:var(--fern);animation:pop .4s both} .tile.wrong{background:var(--parents);color:#fff;border-color:var(--parents);animation:shake .4s} @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}} .slot-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0} .slot{width:64px;height:74px;border-radius:14px;border:3px dashed var(--zone);background:var(--zone-lt); display:grid;place-items:center;font-size:28px;font-weight:800;color:var(--zone-dk)} .slot.filled{border-style:solid;background:#fff} .feedback{font-size:22px;font-weight:700;min-height:34px;margin:8px 0} .feedback.good{color:var(--fern)} .feedback.bad{color:var(--parents)} .progress{width:min(440px,90%);height:12px;background:var(--line);border-radius:999px;overflow:hidden;margin:8px auto 0} .progress > i{display:block;height:100%;background:var(--zone);border-radius:999px;transition:.4s width} .confetti{position:fixed;top:-10px;width:11px;height:16px;z-index:90;border-radius:2px;animation:fall linear forwards} @keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.9}} .win-card{background:#fff;border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow-lg);max-width:480px} .win-card .big{font-size:60px} .streak{display:inline-flex;gap:5px;align-items:center;background:var(--kowhai);color:var(--ink); font-weight:700;padding:6px 14px;border-radius:999px;font-size:14px} /* ---------- responsive ---------- */ @media(max-width:880px){ .hero-grid,.funnel-inner{grid-template-columns:1fr} .zones,.grid,.grid.four,.games-grid{grid-template-columns:1fr 1fr} .menu{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--paper); padding:14px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)} .menu.open{display:flex} .menu-toggle{display:flex} footer .foot-grid{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .zones,.grid,.grid.four,.grid.two,.games-grid{grid-template-columns:1fr} section{padding:52px 0} footer .foot-grid{grid-template-columns:1fr 1fr} } /* ==================================================================== ARCADE FUN LAYER (v3 homepages) — chunky, colourful, springy Needs Fredoka font linked in the page . ==================================================================== */ .fun h1,.fun h2,.fun h3,.fun .fred{font-family:'Fredoka','Poppins',sans-serif;font-weight:700} /* animated rainbow gradient hero */ .arcade-hero{position:relative;text-align:center;color:#fff;padding:70px 20px 96px;overflow:hidden;border-radius:0 0 44px 44px} .rainbow-bg{background:linear-gradient(125deg,#4cc3ff,#7b4dd8 45%,#a06bff 70%,#ff6ec7); background-size:260% 260%;animation:rainbow 14s ease infinite} @keyframes rainbow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .arcade-hero h1{font-family:'Fredoka','Poppins',sans-serif;font-weight:700; font-size:clamp(42px,9vw,88px);line-height:1;text-shadow:0 5px 0 rgba(0,0,0,.13);margin:6px 0} .arcade-hero p.lead2{font-size:clamp(17px,2.5vw,22px);font-weight:600;max-width:660px;margin:14px auto 0; color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.18)} .kiwi-hero{font-size:clamp(86px,16vw,138px);display:inline-block;line-height:1; animation:bob 3s ease-in-out infinite;filter:drop-shadow(0 14px 16px rgba(0,0,0,.28))} .title-pop{animation:titlePop .7s cubic-bezier(.18,.89,.32,1.4) both} @keyframes titlePop{0%{transform:scale(.5) rotate(-4deg);opacity:0}100%{transform:none;opacity:1}} .stars{font-size:27px;margin-top:12px;letter-spacing:6px} .stars span{display:inline-block;animation:twinkle 1.6s ease-in-out infinite} @keyframes twinkle{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.35) rotate(12deg);opacity:1}} .big-play{font-family:'Fredoka','Poppins',sans-serif;font-size:23px;background:#fff;color:#e23c1f;border:0; border-radius:999px;padding:18px 42px;margin-top:28px;cursor:pointer;font-weight:700;text-decoration:none; display:inline-block;box-shadow:0 14px 0 rgba(0,0,0,.16);transition:.12s;position:relative;overflow:hidden} .big-play:hover{transform:translateY(-4px);box-shadow:0 18px 0 rgba(0,0,0,.16)} .big-play:active{transform:translateY(5px);box-shadow:0 6px 0 rgba(0,0,0,.16)} .hero-floats{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0} .hero-floats span{position:absolute;font-size:30px;opacity:.5;animation:floaty 9s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(8deg)}} .arcade-hero > *{position:relative;z-index:1} /* playful arcade game cards */ .arcade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .ac{position:relative;border-radius:28px;padding:30px 22px;color:#fff;text-align:center; box-shadow:0 16px 30px -14px rgba(0,0,0,.45);transition:.2s transform,.2s box-shadow;overflow:hidden;display:block} .ac:hover{transform:translateY(-10px) rotate(-1.5deg) scale(1.04);box-shadow:0 26px 44px -18px rgba(0,0,0,.5)} .ac .em{font-size:60px;display:block;line-height:1;transition:.2s} .ac:hover .em{animation:cheer .7s ease} @keyframes cheer{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-10deg)}75%{transform:translateY(-10px) rotate(10deg)}} .ac h3{font-family:'Fredoka','Poppins',sans-serif;font-weight:700;font-size:25px;margin:12px 0 4px;color:#fff} .ac .sub{font-size:14px;opacity:.96;font-weight:600} .ac .lvl{display:inline-block;margin-top:13px;background:rgba(255,255,255,.28);border-radius:999px; padding:5px 14px;font-size:13px;font-weight:700} .ac .num{position:absolute;top:10px;left:16px;font-family:'Fredoka',sans-serif;font-size:30px;opacity:.4;font-weight:700} .a1{background:linear-gradient(150deg,#15c2c2,#0a7a7a)} .a2{background:linear-gradient(150deg,#ff7a59,#e23c1f)} .a3{background:linear-gradient(150deg,#a06bff,#6a2fd0)} .a4{background:linear-gradient(150deg,#4cc3ff,#1f7fc4)} .a5{background:linear-gradient(150deg,#ffb627,#f4870d)} .a6{background:linear-gradient(150deg,#3ad29f,#1c9e63)} .fun-band{font-family:'Fredoka','Poppins',sans-serif;font-weight:700;display:flex;align-items:center;gap:13px;margin:46px 0 18px} .fun-band .dot{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:26px;flex:none;background:var(--zone-lt)} .fun-band h2{font-family:'Fredoka','Poppins',sans-serif;font-size:27px;margin:0} .fun-band .ph-sub{color:var(--muted);font-size:14px;font-weight:600} .fun-band .line{flex:1;height:3px;background:var(--line);border-radius:3px} @media(max-width:880px){.arcade-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.arcade-grid{grid-template-columns:1fr}} /* ==================================================================== FX LAYER CSS — the lost animations, restored. fx.js creates .fx-bg / .orb / .shape / .mascot but never had styling saved. This makes the floating background + cheering kiwi work again. ==================================================================== */ /* ===== Phase hub (landscape phase cards on the homepage) ===== */ .phase-hub{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .phase-hub-card{position:relative;border-radius:26px;padding:26px 22px 24px;color:#fff;text-decoration:none; box-shadow:0 18px 34px -16px rgba(0,0,0,.45);transition:.2s transform,.2s box-shadow;display:flex;flex-direction:column; justify-content:space-between;gap:16px;min-height:430px;overflow:hidden;isolation:isolate} .phase-hub-card .ph-mid{display:flex;flex-direction:column;gap:8px} .phase-hub-card::after{content:"";position:absolute;right:-36px;bottom:-36px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.13);z-index:-1} .phase-hub-card:hover{transform:translateY(-10px) scale(1.03) rotate(-.6deg);box-shadow:0 30px 50px -18px rgba(0,0,0,.5)} .phase-hub-card .ph-top{display:flex;align-items:center;justify-content:space-between} .phase-hub-card .ph-emoji{font-size:58px;line-height:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.22));transition:.2s transform} .phase-hub-card:hover .ph-emoji{transform:scale(1.12) rotate(-8deg)} .phase-hub-card .ph-count{background:rgba(255,255,255,.28);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:800;white-space:nowrap;backdrop-filter:blur(4px)} .phase-hub-card h3{font-family:'Fredoka','Poppins',sans-serif;font-weight:700;font-size:32px;margin:0} .phase-hub-card .ph-en{font-size:13px;opacity:.92;font-weight:700;letter-spacing:.02em;text-transform:uppercase} .phase-hub-card p{font-size:15.5px;opacity:.97;margin:0;line-height:1.45} .phase-hub-card .ph-previews{display:flex;gap:8px;margin:0} .phase-hub-card .ph-previews .pv{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.92); display:grid;place-items:center;font-size:26px;box-shadow:0 4px 10px -4px rgba(0,0,0,.3)} .phase-hub-card .ph-go{margin:0;font-family:'Fredoka','Poppins',sans-serif;font-weight:700;font-size:17px; background:#fff;color:var(--ink);border-radius:999px;padding:12px 24px;width:max-content; box-shadow:0 8px 0 rgba(0,0,0,.14);transition:.12s} .phase-hub-card:hover .ph-go{transform:translateY(-2px);box-shadow:0 11px 0 rgba(0,0,0,.14)} @media(max-width:900px){.phase-hub{grid-template-columns:1fr 1fr}} @media(max-width:520px){.phase-hub{grid-template-columns:1fr}.phase-hub-card{min-height:0}} /* phase-page header */ .phase-head{text-align:center;padding:8px 0 4px} .phase-head .ph-emoji-big{font-size:clamp(54px,9vw,84px);line-height:1;display:block} /* coloured phase-page hero banner */ .phase-banner{color:#fff;text-align:center;padding:clamp(26px,5vh,52px) 16px clamp(30px,6vh,60px); border-radius:0 0 40px 40px;position:relative;overflow:hidden;background:var(--zone)} .phase-banner .phase-head{color:#fff} .phase-banner .phase-head h1{color:#fff} .phase-banner .phase-head .lead{color:rgba(255,255,255,.95)} /* ===== Nav "Phases" dropdown ===== */ .navdrop{position:relative} .navdrop-btn{font-family:inherit;font-weight:600;font-size:15px;color:var(--ink-2);background:none;border:0; cursor:pointer;padding:9px 13px;border-radius:10px;display:inline-flex;align-items:center;gap:5px} .navdrop-btn:hover,.navdrop.open .navdrop-btn{background:var(--zone-lt);color:var(--zone-dk)} .navdrop-btn.active{color:var(--zone)} .navdrop-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:200px;background:#fff;border:1px solid var(--line); border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;display:none;flex-direction:column;gap:2px;z-index:60} /* invisible bridge over the 6px gap so moving the mouse down keeps it open */ .navdrop-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} .navdrop:hover .navdrop-menu,.navdrop.open .navdrop-menu{display:flex;animation:fadeUp .18s ease both} .navdrop-menu a{padding:10px 12px;border-radius:10px;font-weight:600;font-size:15px;color:var(--ink-2);white-space:nowrap;display:flex;gap:9px;align-items:center} .navdrop-menu a:hover{background:var(--zone-lt);color:var(--zone-dk)} .navdrop-menu hr{border:0;border-top:1px solid var(--line);margin:5px 2px} /* hero phase buttons (jump straight to a phase from the hero) */ .hero-phases{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px} .hero-phase-chip{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink); font-family:'Fredoka','Poppins',sans-serif;font-weight:700; padding:11px 20px;border-radius:18px;text-decoration:none;box-shadow:0 8px 0 rgba(0,0,0,.16);transition:.12s} .hero-phase-chip:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 11px 0 rgba(0,0,0,.16)} .hero-phase-chip:active{transform:translateY(3px);box-shadow:0 4px 0 rgba(0,0,0,.16)} .hero-phase-chip .he-emoji{font-size:28px;line-height:1} .hero-phase-chip .he-txt{display:flex;flex-direction:column;line-height:1.15;text-align:left} .hero-phase-chip .he-txt b{font-size:clamp(16px,1.9vw,19px)} .hero-phase-chip .he-txt small{font-weight:600;font-size:11.5px;color:var(--ink-2)} @media(max-width:480px){ .hero-phases{flex-direction:column;align-items:stretch;max-width:300px;margin-left:auto;margin-right:auto} } /* homepage hub mascot greeting */ .hub-mascot{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 22px;max-width:560px} .hub-mascot .hm-kiwi{font-size:clamp(48px,8vw,68px);line-height:1;animation:bob 3s ease-in-out infinite;flex:none} .hub-mascot .hm-bubble{background:#fff;border:2px solid var(--line);border-radius:18px 18px 18px 5px; padding:12px 18px;font-family:'Fredoka','Poppins',sans-serif;font-weight:600;font-size:clamp(15px,2vw,18px); color:var(--ink);box-shadow:var(--shadow);text-align:left} @media(max-width:880px){ /* dropdown opens inline inside the mobile menu */ .navdrop-menu{position:static;display:flex;box-shadow:none;border:0;padding:2px 0 2px 14px;min-width:0} .navdrop:hover .navdrop-menu{animation:none} } /* ===== KiwiABC kiwi logo mark + constant top-bar brand (all pages) ===== */ .logo-kiwi{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:none; background:linear-gradient(150deg,#8a5ee6,#5d33b0);font-size:23px;line-height:1; box-shadow:0 6px 14px -6px rgba(93,51,176,.6)} .brand-sm{font-size:17px} .brand-sm .logo-kiwi{width:32px;height:32px;font-size:19px;border-radius:9px} .brand-badge{font-size:12px;font-weight:700;color:var(--students);border:1px solid var(--line); border-radius:6px;padding:1px 6px;vertical-align:middle;white-space:nowrap} .game-top{background:rgba(255,253,247,.86);backdrop-filter:blur(11px); /* match the homepage header */ display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center} /* 3 cols → title always centred */ .game-top .gt-side{justify-self:start} .game-top > b{justify-self:center;text-align:center} .game-top .score-pill{justify-self:end} .game-top .brand{color:var(--ink);font-weight:800} .game-top .brand b{color:var(--zone)} .gt-side{display:flex;align-items:center;gap:12px;min-width:0} .back-btn{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;white-space:nowrap; background:var(--zone-lt);color:var(--zone-dk);padding:8px 16px;border-radius:999px;transition:.15s} .back-btn:hover{background:var(--zone);color:#fff;transform:translateY(-1px)} .game-top > b{font-size:clamp(15px,2.2vw,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px} @media(max-width:640px){ .game-top > b{display:none} } /* hide game title first when tight */ @media(max-width:560px){ .game-top .brand span:last-child{display:none} } /* then drop brand text, keep kiwi mark */ /* ----- consistent game top bar: brand + compact nav (Phases ▾ + Shop) | title | Back + Score ----- */ .game-top{position:relative;z-index:30} /* keep the bar + its dropdown above the game card */ .game-top .gt-side{flex-wrap:nowrap} .game-top .gt-right{justify-self:end;display:flex;align-items:center;gap:14px} .game-top .gt-shop{background:var(--ink);color:#fff;padding:8px 13px;border-radius:10px;font-weight:700;font-size:14px;white-space:nowrap;text-decoration:none} .game-top .gt-shop:hover{opacity:.9;color:#fff} .game-top .navdrop-menu a{font-size:14px} @media(max-width:820px){ .game-top .gt-shop{display:none} } /* tighten as the screen narrows */ @media(max-width:760px){ .game-top .navdrop{display:none} } /* games stay clean on mobile (no menu) */ /* ===== NEW game layout (gp2): real site header on top + intro/Start screen + in-card HUD ===== */ body.gp2{height:100dvh;display:flex;flex-direction:column;overflow:hidden} body.gp2 header.site{flex:none;z-index:60} body.gp2 header.site .menu .back-btn{margin-right:2px} .gp2 .game-stage{flex:1 1 auto;min-height:0;height:auto;max-height:none; grid-template-columns:minmax(0,1fr) 320px; /* right rail fits a standard 300px ad unit */ grid-template-rows:minmax(0,1fr); grid-template-areas:"main ad"} .gp2 .game-ad{width:100%;max-width:300px;margin-left:auto;margin-right:auto;align-self:center;min-height:min(440px,90%);max-height:600px;justify-content:space-evenly} /* 300px ad unit, centred in the rail */ .ad-banner{display:none} /* reserved mobile banner slot — enable later (e.g. 320x50) */ @media(max-width:900px){ .gp2 .game-stage{grid-template-columns:1fr;grid-template-areas:"main"} .gp2 .game-ad{display:none} } /* score / streak HUD lives inside the card now (top-right) */ .game-hud{position:absolute;top:clamp(8px,1.5vh,16px);right:clamp(12px,1.6vw,22px);z-index:6; display:flex;align-items:center;gap:14px;font-weight:700} .game-hud .score-pill{font-size:clamp(13px,1.7vh,16px)} /* intro / start screen inside the card */ #intro{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly; gap:clamp(8px,1.6vh,18px);padding:clamp(16px,4vh,52px) 0;flex:1 1 auto;min-height:0;width:100%;text-align:center} #intro .intro-emoji{font-size:clamp(64px,15vh,140px);line-height:1;animation:bob 3s ease-in-out infinite} #intro .intro-title{font-family:'Fredoka','Poppins',sans-serif;font-size:clamp(34px,7.5vh,66px);margin:0;line-height:1.05} #intro .intro-dirs{font-size:clamp(16px,2.6vh,22px);max-width:600px;color:var(--ink-2);margin:0 auto;line-height:1.5} #intro .btn{margin-top:clamp(4px,1vh,10px)} /* floating animated background (sits behind transparent sections) */ .fx-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .fx-bg .orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.30;mix-blend-mode:multiply; animation:orbFloat 16s ease-in-out infinite} @keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(34px,-44px) scale(1.14)}66%{transform:translate(-28px,26px) scale(.92)}} .fx-bg .shape{position:absolute;bottom:-70px;will-change:transform; animation-name:rise;animation-timing-function:linear;animation-iteration-count:infinite} @keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.5}88%{opacity:.5}100%{transform:translateY(-114vh) rotate(240deg);opacity:0}} /* let the animated layer glow through the game stage */ body .game-stage{background:linear-gradient(180deg,rgba(255,253,247,.80),rgba(243,248,248,.90))} .game-stage > *{position:relative;z-index:1} /* cheering kiwi mascot (game pages) */ .mascot{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:flex-end;gap:8px; transform:translateY(150%) scale(.8);opacity:0;pointer-events:none; transition:transform .45s cubic-bezier(.18,.89,.32,1.5),opacity .3s} .mascot.show{transform:translateY(0) scale(1);opacity:1} .mascot .kiwi{font-size:62px;line-height:1;filter:drop-shadow(0 9px 11px rgba(0,0,0,.28))} .mascot.cheer .kiwi{animation:masCheer .8s ease} .mascot.sad .kiwi{animation:masSad .7s ease} @keyframes masCheer{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-20px) rotate(-13deg)}45%{transform:translateY(-6px) rotate(11deg)}70%{transform:translateY(-15px) rotate(-8deg)}} @keyframes masSad{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(5px) rotate(-7deg)}70%{transform:translateY(3px) rotate(5deg)}} .mascot .bubble{background:#fff;border:2px solid var(--line);border-radius:16px 16px 4px 16px; padding:9px 14px;font-weight:700;font-size:15px;color:var(--ink);box-shadow:var(--shadow);max-width:210px; font-family:'Fredoka','Poppins',sans-serif} /* the words jump up, tilt, overshoot, then drop & settle — re-fired each time via the .jump class */ .mascot .bubble.jump{animation:bubbleJump .8s cubic-bezier(.2,.85,.25,1.3) both} @keyframes bubbleJump{ 0%{transform:translateY(24px) scale(.5) rotate(0);opacity:0} 30%{transform:translateY(-30px) scale(1.18) rotate(-8deg);opacity:1} 50%{transform:translateY(-8px) scale(1.0) rotate(6deg)} 68%{transform:translateY(4px) scale(1.04) rotate(-3deg)} 84%{transform:translateY(-2px) scale(1.0) rotate(1deg)} 100%{transform:translateY(0) scale(1) rotate(0);opacity:1} } /* right / wrong full-screen flash */ .flash-good{animation:flashGood .55s ease} .flash-bad{animation:flashBad .55s ease} @keyframes flashGood{0%{box-shadow:inset 0 0 0 0 rgba(47,158,87,0)}30%{box-shadow:inset 0 0 130px 10px rgba(47,158,87,.32)}100%{box-shadow:inset 0 0 0 0 rgba(47,158,87,0)}} @keyframes flashBad{0%{box-shadow:inset 0 0 0 0 rgba(232,85,59,0)}30%{box-shadow:inset 0 0 130px 10px rgba(232,85,59,.28)}100%{box-shadow:inset 0 0 0 0 rgba(232,85,59,0)}} /* keep homepage content above the floating layer */ body.fun section,body.fun footer{position:relative;z-index:1} body.fun header.site{z-index:50} /* keep header + its dropdown above the page */ /* ==================================================================== VIEWPORT-FIT GAME LAYOUT — one screen, no page scroll. Title bar across the top, the adaptive game card filling the space, and an ad panel down the RIGHT side. The card scales to the screen; the mascot lives INSIDE the card (bottom-left). All 10 games, CSS-only. Grid areas: "top top" / "main ad" ==================================================================== */ html,body{height:100%} body:has(.game-stage){overflow:hidden} .game-stage{height:100vh;height:100dvh;max-height:100dvh; display:grid; grid-template-columns:minmax(0,1fr) clamp(160px,17vw,300px); grid-template-rows:auto minmax(0,1fr); grid-template-areas:"top top" "main ad"; overflow:hidden} .game-top{grid-area:top} .game-main{ grid-area:main; position:relative;min-height:0; margin:clamp(8px,1.4vh,16px) clamp(6px,0.8vw,12px) clamp(10px,1.6vh,18px) clamp(10px,1.4vw,18px); padding:clamp(14px,2.2vh,32px) clamp(18px,3vw,46px) clamp(40px,6vh,68px); background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:clamp(20px,2.4vw,32px); box-shadow:0 30px 70px -30px rgba(12,42,42,.5); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;overflow:hidden; /* never scroll — auto-fit shrinks content instead */ animation:panelIn .5s cubic-bezier(.18,.89,.32,1.2) both; } @keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} /* auto-fit wrapper (fx.js moves the card's content inside this and scales it). flex:1 makes it STRETCH to fill the whole card height (height:100% on a flex item doesn't reliably resolve, which left the content clustered in the centre). */ .game-main{align-items:stretch} /* let the wrapper stretch full width */ .game-fit{flex:1 1 auto;min-height:0;align-self:stretch; max-height:820px; /* cap so spacing stays this nice on big screens (centres instead of blowing out) */ display:flex;flex-direction:column;align-items:center;justify-content:center; width:100%;transform-origin:center center;will-change:transform} /* the PLAY area fills the card and spreads its pieces evenly top-to-bottom — airy and generous for 5–10 year olds, not cramped in the middle */ .game-main #play{ flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center; justify-content:space-evenly;gap:clamp(12px,2.4vh,30px);width:100%} /* WIN screen: keep the celebration card neatly centred */ .game-main .win-card{margin:auto} /* big, kid-friendly in-card sizing (auto-fit reins it in only if a screen is tiny) */ .game-main .curric-tag{margin:0;font-size:clamp(12px,1.7vh,15px)} .game-main p{font-size:clamp(16px,2.2vh,21px)} .game-main .tiles{margin:0;gap:clamp(10px,1.6vw,18px)} .game-main .tile{min-width:clamp(56px,7vw,90px);padding:clamp(14px,2.3vh,24px) clamp(16px,2vw,26px);font-size:clamp(26px,4.4vh,38px)} .game-main .bigword{font-size:clamp(40px,9vh,92px);margin:0} .game-main .btn,.game-main .btn-lg{padding:clamp(13px,2.2vh,18px) clamp(24px,3.2vw,36px);font-size:clamp(16px,2.3vh,19px)} .game-main .feedback{font-size:clamp(18px,2.8vh,26px);min-height:0;margin:0} .game-main .games-grid{gap:clamp(14px,2vw,24px)} .game-main .card{padding:clamp(16px,2.6vh,30px) clamp(14px,2vw,26px)} .game-main .card div{font-size:clamp(46px,9vh,76px)!important} /* picture-choice emoji — big for young kids */ .game-main .card b{font-size:clamp(18px,2.6vh,24px)!important} .game-main .progress{margin:0;height:clamp(12px,1.8vh,16px)} .game-main .win-card{padding:clamp(26px,4.5vh,46px)} .game-main .win-card .big{font-size:clamp(46px,8vh,66px)} /* adaptive shop promo down the RIGHT side (drives sales to kiwilandeducation.com) */ .game-ad{ grid-area:ad; margin:clamp(8px,1.4vh,16px) clamp(10px,1.4vw,18px) clamp(10px,1.6vh,18px) clamp(6px,0.8vw,12px); display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; gap:clamp(6px,1vh,12px);padding:clamp(12px,1.6vw,20px) clamp(8px,1vw,14px); border:0;border-radius:18px;text-decoration:none;color:var(--ink); background:linear-gradient(160deg,#fff7dc,#ffe3b3); box-shadow:0 16px 34px -18px rgba(199,122,0,.55); transition:.18s transform,.18s box-shadow;overflow:hidden} .game-ad:hover{transform:translateY(-3px);box-shadow:0 22px 42px -18px rgba(199,122,0,.6)} .game-ad .ad-emoji{font-size:clamp(28px,4vw,46px);line-height:1} .game-ad .ad-title{font-family:'Fredoka','Poppins',sans-serif;font-weight:700;font-size:clamp(15px,1.5vw,20px);line-height:1.1} .game-ad .ad-sub{font-size:clamp(11px,1.05vw,13px);font-weight:600;color:var(--ink-2);line-height:1.3} .game-ad .ad-go{margin-top:2px;font-weight:700;font-size:clamp(11px,1vw,12.5px);color:var(--kowhai-dk); background:rgba(255,255,255,.7);padding:5px 11px;border-radius:999px} .game-ad .ad-tag{position:absolute;top:8px;left:0;right:0;font-size:9px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);font-weight:700} /* mascot INSIDE the card — bottom-LEFT, big & bold */ .game-main .mascot{position:absolute;left:clamp(12px,2vw,26px);bottom:clamp(12px,2vh,22px);right:auto; flex-direction:row-reverse;align-items:flex-end;gap:10px;z-index:6} .game-main .mascot .kiwi{font-size:clamp(58px,7.5vw,98px)} .game-main .mascot .bubble{border-radius:16px 16px 16px 4px;font-size:clamp(14px,1.6vw,18px);max-width:240px} /* narrow screens: drop the side rail, game takes the full width */ @media(max-width:760px){ .game-stage{grid-template-columns:1fr;grid-template-areas:"top" "main"} .game-ad{display:none} .game-main{margin:clamp(8px,1.4vh,16px) 9px;border-radius:22px;padding-bottom:clamp(84px,16vh,120px)} }