/* Animal Life Cycles — Little Explorers theme tokens + main layout. */ :root { /* --- Little Explorers design system (same family as Water Cycle / Frosty) */ --brand: #5ec96b; /* fresh leaf green — Milo's home turf */ --brand2: #7dd36f; --tint: #eaf7ea; /* very pale green page background, easy on young eyes */ --accent: #ffd166; /* sunflower yellow for big primary buttons */ --ink: #1a4d27; /* dark forest text */ --muted: #4a6a4a; --border: #c8dec8; --card: #ffffff; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Nunito', system-ui, sans-serif; color: var(--ink); background: linear-gradient(180deg, var(--tint), #fff); min-height: 100vh; } main { width: 100%; max-width: 720px; margin: 0 auto; padding: 16px; display: none; } main.active { display: block; } /* the 'active' marker is our single visibility toggle (matches app.js/showElement). */ h1, h2 { margin: 0 0 8px; letter-spacing: -0.01em; color: var(--ink); } .topbar { position: sticky; top: 0; z-index: 5; background: var(--tint); padding: 10px 16px; margin-bottom: 12px; border-radius: 12px; box-shadow: 0 2px 12px rgba(94,201,107,.12); } /* -------------------------- hero scene (pure CSS — Milo + sun + grass) ---------- */ .hero { position: relative; height: 260px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #8ecae6 0%, #bde0fe 60%, var(--tint) 100%); margin-bottom: 16px; cursor: pointer; user-select: none; touch-action: manipulation; } .sun { position: absolute; right: 30%; top: 24px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffd166, #ff9f43); box-shadow: 0 0 30px #ffd166a6; animation: sunWander 12s ease-in-out infinite; } @keyframes sunWander { 0%,100%{ transform: translateX(-12px);} 50%{transform: translateX(12px);} } .cloud { position: absolute; background: #fff; border-radius: 50px; opacity: .9; animation: cloudFloat 28s linear infinite; } .cloud::after { content:''; position:absolute; left:22px; top:-18px; width:26px; height:26px; border-radius:50%; background:#fff; } .cloud-1 { width:90px;height:34px;top:36px;left:-110px;animation-duration:26s;} .cloud-2 { width:66px;height:25px;top:64px;left:-70px;animation-duration:31s;} @keyframes cloudFloat { from{left:-160px;} to{left:calc(100% + 40px);} } /* Milo the mouse — built entirely out of CSS shapes so he never pixelates */ .milo { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%) scale(1.0); transition: transform .35s cubic-bezier(.34,1.56,.64,1); z-index: 4; } .milo:hover, .hero:focus-within .milo { transform: translateX(-50%) scale(1.12) rotate(-3deg); } .milo figcaption { position:absolute; top:-58px; left:50%; transform:translateX(-50%); background:#fff;padding:5px 10px;border-radius:20px;font-size:.76rem;color:var(--ink); white-space:nowrap; box-shadow:0 2px 8px rgba(94,201,107,.2); opacity:0; pointer-events:none; transition:opacity .25s; font-weight:700; letter-spacing:.02em; } .milo:hover figcaption, .hero:focus-within .milo figcaption { opacity:1; } .milo .head { width:46px;height:46px;background:radial-gradient(circle at 70% 35%, #c9a27f, #8d6e4b); border-radius:50%; position:relative; margin:0 auto; } .milo .ear { position:absolute; top:-16px;width:18px;height:20px;border-radius:50%;background:#8d6e4b; } .milo .ear::after{content:'';position:absolute;top:3px;left:4px;width:10px;height:8px;border-radius:50%;background:#c9a27f;} .milo .ear.l { left:2px;transform:rotate(-12deg);} .milo .ear.r { right:2px;transform:rotate(12deg);} .milo .eye { position:absolute; top:16px;width:9px;height:9px;background:#1a3a1a;border-radius:50%; } .milo .eye.l { left:11px;} .milo .eye.r { right:11px;animation:blink 4s infinite;} @keyframes blink { 0%,96%,100%{height:9px;} 98%{height:1.5px;} } .milo .nose { position:absolute; top:26px;left:50%;width:6px;height:6px;background:#d17a58;border-radius:50%;transform:translateX(-50%)scaleY(.85); } .milo .body { width:38px;height:42px;background:radial-gradient(circle at 70% 30%, #c9a27f, #8d6e4b); border-radius:50% 50% 46% 46%; margin:-2px auto 0; position:relative; z-index:-1;} .milo .tail { position:absolute; bottom:-18px;right:-14px;width:40px;height:6px; background:#c9a27f;border-radius:10px; transform-origin:left center; animation:tailWag 3s ease-in-out infinite; } @keyframes tailWag { 0%,100%{transform:rotate(8deg);} 50%{transform:rotate(-8deg);} } .milo .paw { position:absolute;bottom:-4px;width:0;height:0; } .milo .paw.l { left:6px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:8px solid #8d6e4b;transform:translateX(-2px);} .milo .paw.r { right:6px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:8px solid #8d6e4b;transform:translateX(2px);} /* -------------------------- stations row (tap targets big enough for small hands) */ .stations { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom: 14px; } .station { appearance:none;border:none;background:var(--card);border:2.5px solid var(--border);border-radius:16px;padding:10px 12px; width: 33%; min-width:150px; max-width:170px; cursor:pointer; transition:all .25s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 4px 12px rgba(94,201,107,.1); position:relative; } .station:before{content:'';position:absolute;inset:-6px;border-radius:20px;border:3px solid transparent;pointer-events:none;transition:border-color .2s;} .station:focus-visible:before{border-color:var(--accent);} .station.active{background:linear-gradient(180deg,#ffffff,#f0fcf0);border-color:var(--brand);box-shadow:0 6px 18px rgba(94,201,107,.28),inset 0 -2px 0 rgba(94,201,107,.25);} .station:hover:not(.active){transform:translateY(-3px);} .station strong{display:block;font-size:.82rem;color:var(--ink);margin-bottom:3px;line-height:1.2} .station .caption{font-size:.72rem;color:var(--muted);margin:4px 0 8px; line-height:1.35; min-height:28px;} .emoji { display:inline-block;font-size:1.45rem;margin-right:4px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.12)); } .play-btn{appearance:none;border:0;background:var(--brand);color:#fff;padding:5px 9px;border-radius:12px;font-size:.7rem;font-weight:700; cursor:pointer; box-shadow:0 2px 6px rgba(94,201,107,.35); transition:transform .15s,box-shadow .15s; margin-top:auto;} .play-btn:hover{transform:scale(1.06);box-shadow:0 3px 9px rgba(94,201,107,.48);} /* -------------------------- "explored" star badge (see DESIGN-PATTERNS.md #2/#4) --------------- Purely passive: lands once a station's fact has actually finished playing. Never graded, never compared, nothing to get "wrong" — just a small visible reward so a child can see which animals' stages they've already listened to, and a parent can see progress through the whole cycle at a glance. */ .station{ overflow: visible; } .station.heard::after{ content:'⭐'; position:absolute; top:-10px; left:-10px; font-size:1.05rem; line-height:1; background:#fff; border-radius:50%; padding:3px; box-shadow:var(--shadow-sm,0 2px 6px rgba(94,201,107,.35)); animation: star-pop .5s cubic-bezier(.34,1.56,.64,1) both; } @keyframes star-pop{ 0%{ transform:scale(0) rotate(-25deg); opacity:0;} 70%{transform:scale(1.25) rotate(8deg); opacity:1;} 100%{transform:scale(1) rotate(0);} } /* -------------------------- story book view ------------------------------------ */ .story-promo{text-align:center;padding:6px 0;} .story-promo a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;gap:6px;transition:all .2s;} .story-promo a:hover{text-decoration:underline;color:var(--brand2);} .storybook-content{display:flex;flex-direction:column;min-height:320px;} .story-page{background:var(--card);border:2px solid var(--border);border-radius:16px;padding:16px;margin-bottom:14px;position:relative;opacity:0;transform:translateY(8px);transition:all .35s ease;} .story-page.active{opacity:1;transform:translateY(0);box-shadow:0 4px 16px rgba(94,201,107,.18);} .book-hd h2{font-size:1.15rem;letter-spacing:-.02em;color:var(--brand2);margin-bottom:8px;} .book-body{font-size:.95rem;line-height:1.5;color:var(--ink);margin-bottom:12px;font-weight:500;} .narrate-btn, .primary-btn{appearance:none;border:0;background:linear-gradient(180deg,#ffd166,#ffb74d);color:#4a2f00;padding:9px 14px; border-radius:12px;font-size:.85rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px; box-shadow:0 3px 8px rgba(255,209,102,.4);transition:transform .15s,box-shadow .15s;} .narrate-btn:hover, .primary-btn:hover{transform:scale(1.06);box-shadow:0 4px 12px rgba(255,209,102,.55);} .counter{display:block;text-align:right;font-size:.72rem;color:var(--muted);padding-top:8px;font-variant-numeric:tabular-nums;} /* -------------------------- page-turn overlay cue ------------------------------ */ .overlay{position:fixed;inset:0;background:rgba(255,255,255,.85);z-index:50;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .2s; backdrop-filter:saturate(1.2) blur(3px);} .overlay.active{opacity:1;pointer-events:auto;} .pulse-ball{background:#fff;border:3px solid var(--brand);border-radius:50%;width:64px;height:64px; display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--ink);font-size:.95rem;letter-spacing:.03em; box-shadow:0 8px 24px rgba(94,201,107,.35),inset 0 -4px 0 #bce0c8;animation:pulse 1.2s ease-in-out infinite;} @keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} } /* -------------------------- "now talking" pulse (see DESIGN-PATTERNS.md #2) ---- Applied via JS to whichever Listen/Hear-it/Play button currently owns the playing