/* ============================================================ ESFERA LÍQUIDA · Identidade dos módulos de crianças e jovens Proposta A3 «MARCADOR FLUOR» — camada ativada por .kids-fluor no . Reveste, sem tocar no markup: os 4 cartões «voz da criança» (.vc-kids) e toda a secção «Jovens». A Home original (sem .kids-fluor) mantém-se coral. Animações reutilizam o IntersectionObserver do site (.fi → .v). ============================================================ */ .kids-fluor{ --k-paper:#f7f4ea; --k-ink:#141414; --k-ink2:#2c2c2c; --k-fluor:#d4f000; --k-fluor-deep:#93ac00; --k-mag:#ff3d8b; --k-red:#e0503a; --k-hand:'Caveat','Segoe Script',cursive; } /* ===================== CARTÕES «VOZ DA CRIANÇA» (×4) ===================== */ .kids-fluor .voz-card.vc-kids{ background:var(--k-paper); border:none; border-radius:6px; transform:rotate(-1deg); box-shadow:0 22px 46px -22px rgba(20,20,20,.42),0 3px 0 #e7e2d0; overflow:visible; background-image: repeating-linear-gradient(0deg,transparent 0 30px,rgba(20,20,20,.06) 30px 31px), linear-gradient(90deg,rgba(224,80,58,.5) 0 2px,transparent 2px); background-position:0 12px,46px 0; background-size:100% 31px,100% 100%; } /* contorno tracejado à mão (reaproveita o ::before do coral) */ .kids-fluor .voz-card.vc-kids::before{ content:""; position:absolute; inset:9px; border:1.7px dashed rgba(20,20,20,.34); border-radius:5px; opacity:1; background:none; pointer-events:none; } /* fita-cola fluor no topo */ .kids-fluor .voz-card.vc-kids::after{ content:""; position:absolute; top:-12px; left:46px; width:96px; height:26px; z-index:2; background:repeating-linear-gradient(90deg,rgba(212,240,0,.75) 0 9px,rgba(212,240,0,.5) 9px 18px); transform:rotate(-4deg); box-shadow:0 2px 6px rgba(0,0,0,.09); } .kids-fluor .vc-kids-inner{position:relative} /* asterisco magenta + estrela fluor (doodles) */ .kids-fluor .vc-kids-inner::after{ content:"✳"; position:absolute; right:2px; bottom:-8px; font-family:var(--k-hand); color:var(--k-mag); font-size:2.1rem; line-height:1; transform-origin:center; z-index:1; } .kids-fluor .vc-kids-inner::before{ content:"★"; position:absolute; right:46px; top:-14px; color:var(--k-fluor); -webkit-text-stroke:1.5px var(--k-ink); font-size:1.5rem; line-height:1; z-index:1; } /* selo: balão magenta + etiqueta manuscrita */ .kids-fluor .vc-kids-selo{align-items:center; gap:.75rem; position:relative; z-index:1} .kids-fluor .vc-kids-selo .vc-kids-balao{ background:var(--k-mag); border-radius:16px 16px 16px 4px; box-shadow:0 6px 14px rgba(255,61,139,.28); } .kids-fluor .vc-kids-selo .vc-kids-balao svg{color:#fff} .kids-fluor .vc-kids-selo .vc-kids-etiqueta{ font-family:var(--k-hand); font-weight:700; font-size:1.5rem; text-transform:none; letter-spacing:0; color:var(--k-mag); line-height:1.1; transform:rotate(-2deg); } /* título: Caveat (já no site), tinta, com marcador fluor por baixo (animável) */ .kids-fluor .vc-kids-titulo{ color:var(--k-ink); display:inline-block; background:linear-gradient(var(--k-fluor),var(--k-fluor)) no-repeat; background-size:100% .34em; background-position:0 90%; } /* corpo: sans, tinta; os ganham marcador fluor */ .kids-fluor .voz-card.vc-kids .voz-content p{font-family:var(--sans); font-style:normal; color:var(--k-ink2)} .kids-fluor .voz-card.vc-kids .voz-content p strong{ color:var(--k-ink); font-weight:700; padding:0 2px; background:linear-gradient(var(--k-fluor),var(--k-fluor)) no-repeat; background-size:100% 44%; background-position:0 78%; } /* ========================= SECÇÃO «JOVENS» ========================= */ .kids-fluor .jovens{background:var(--k-paper)} .kids-fluor .jovens .star-divider::before, .kids-fluor .jovens .star-divider::after{background:linear-gradient(90deg,transparent,var(--k-mag) 50%,transparent)} .kids-fluor .jovens .star-divider .star-icon, .kids-fluor .jovens .star-divider .star-icon.vc-bubble{color:var(--k-mag)} .kids-fluor .jovens-head .eyebrow.light{color:var(--k-ink)} .kids-fluor .jovens-head .eyebrow.light::before{background:var(--k-mag)} .kids-fluor .jovens-head h2{color:var(--k-ink)} .kids-fluor .jovens-head h2 em{ color:var(--k-ink); font-style:italic; background:linear-gradient(var(--k-fluor),var(--k-fluor)) no-repeat; background-size:100% .28em; background-position:0 90%; } /* realces a marcador nos da secção */ .kids-fluor .jovens-intro strong, .kids-fluor .jovens-lead strong, .kids-fluor .jovens-prosa p strong, .kids-fluor .jovens-prosa-mid p strong, .kids-fluor .jovens-final p strong{ color:var(--k-ink); font-style:normal; padding:0 1px; background:linear-gradient(var(--k-fluor),var(--k-fluor)) no-repeat; background-size:100% 38%; background-position:0 82%; } /* checklist «depende de ti» */ .kids-fluor .jovens-checklist{background:#fffdf3; border:1.7px dashed rgba(20,20,20,.3); border-radius:10px} .kids-fluor .jovens-checklist-title{font-family:var(--k-hand); color:var(--k-mag); font-size:1.75rem; font-style:normal} .kids-fluor .jovens-checklist li{color:var(--k-ink2)} .kids-fluor .jovens-checklist li::before{content:"✔"; color:var(--k-fluor-deep); font-weight:700; top:.4rem} /* cartões «Vais aprender a…» como fichas de caderno */ .kids-fluor .jovens-aprender .ja{ background:var(--k-paper); border:1.7px dashed rgba(20,20,20,.28); border-radius:6px; transform:rotate(-.5deg); transition:transform .2s ease, box-shadow .2s ease; } .kids-fluor .jovens-aprender .ja:nth-child(even){transform:rotate(.6deg)} .kids-fluor .jovens-aprender .ja:hover{transform:rotate(0) translateY(-3px); box-shadow:0 14px 26px -14px rgba(20,20,20,.4)} .kids-fluor .jovens-aprender .ja h4{color:var(--k-ink)} .kids-fluor .jovens-aprender .ja p strong{color:var(--k-ink)} .kids-fluor .jovens-fecho-estrela{color:var(--k-mag)} /* ===================== POLAROID de crianças (secção Caderno) ===================== */ .kids-fluor .polaroid.is-kids::before{background:repeating-linear-gradient(90deg,rgba(212,240,0,.85) 0 9px,rgba(212,240,0,.5) 9px 18px)} .kids-fluor .polaroid.is-kids .pol-cap{color:var(--k-mag)} /* ===================== ANIMAÇÕES — lentas, visíveis, repetem a cada passagem ========= Disparadas por .kv, que o kids.js ADICIONA/REMOVE sempre que o módulo entra/sai da viewport. Todos os elementos fluorescentes animam: uns em ENTRADA (uma vez por passagem, lentos), outros em CONTÍNUO (cintilar/rodar/pulsar) — para se verem sempre. Só se esconde/reduz decorativo; o texto mantém-se legível. Reduced-motion = estático. */ @media (prefers-reduced-motion:no-preference){ /* estados iniciais dos que ENTRAM (recolhidos) */ .kids-fluor .vc-kids-titulo{background-size:0% .34em} .kids-fluor .vc-kids .voz-content p strong{background-size:0 44%} .kids-fluor .voz-card.vc-kids::after{transform:translateY(-18px) rotate(-4deg); opacity:0} .kids-fluor .jovens-head h2 em{background-size:0 .28em} .kids-fluor .jovens-intro strong,.kids-fluor .jovens-lead strong,.kids-fluor .jovens-prosa p strong, .kids-fluor .jovens-prosa-mid p strong,.kids-fluor .jovens-final p strong{background-size:0 38%} .kids-fluor .jovens-checklist li::before{opacity:0} .kids-fluor .jovens-aprender .ja{transform:translateY(16px)} /* ---- CARTÕES «VOZ» (quando o cartão entra: .vc-kids.kv) ---- */ .kids-fluor .vc-kids.kv::after{animation:kTape 1s .3s cubic-bezier(.2,1.3,.4,1) forwards} /* fita fluor cai */ .kids-fluor .vc-kids.kv .vc-kids-titulo{animation:kPaintT 1.5s .7s ease forwards} /* marcador do título pinta */ .kids-fluor .vc-kids.kv .voz-content p strong{animation:kPaintV 1.7s 1.5s ease forwards} /* marcadores do corpo pintam */ /* contínuos (sempre visíveis enquanto o cartão está no ecrã) */ .kids-fluor .vc-kids.kv .vc-kids-inner::before{animation:kTwinkle 3s ease-in-out infinite} /* estrela fluor cintila */ .kids-fluor .vc-kids.kv .vc-kids-inner::after{animation:kSpin 12s 1s linear infinite} /* asterisco magenta roda */ .kids-fluor .vc-kids.kv .vc-kids-selo .vc-kids-balao{animation:kPulse 4s ease-in-out infinite} /* balão magenta pulsa */ /* ---- SECÇÃO «JOVENS» (quando a secção entra: .jovens.kv) ---- */ .kids-fluor .jovens.kv .jovens-head h2 em{animation:kPaintEm 1.6s .5s ease forwards} .kids-fluor .jovens.kv .jovens-intro strong,.kids-fluor .jovens.kv .jovens-lead strong, .kids-fluor .jovens.kv .jovens-prosa p strong,.kids-fluor .jovens.kv .jovens-prosa-mid p strong, .kids-fluor .jovens.kv .jovens-final p strong{animation:kPaintJ 1.6s .9s ease forwards} .kids-fluor .jovens.kv .jovens-checklist li::before{animation:kPop .8s ease forwards} .kids-fluor .jovens.kv .jovens-checklist li:nth-child(odd)::before{animation-delay:.8s} .kids-fluor .jovens.kv .jovens-checklist li:nth-child(even)::before{animation-delay:1.15s} .kids-fluor .jovens.kv .jovens-aprender .ja{animation:kRise .9s ease both} .kids-fluor .jovens.kv .jovens-aprender .ja:nth-child(2){animation-delay:.12s} .kids-fluor .jovens.kv .jovens-aprender .ja:nth-child(3){animation-delay:.24s} .kids-fluor .jovens.kv .jovens-aprender .ja:nth-child(4){animation-delay:.36s} .kids-fluor .jovens.kv .jovens-aprender .ja:nth-child(5){animation-delay:.48s} .kids-fluor .jovens.kv .jovens-aprender .ja:nth-child(6){animation-delay:.6s} .kids-fluor .jovens.kv .jovens-aprender .ja:nth-child(7){animation-delay:.72s} .kids-fluor .jovens.kv .jovens-aprender .ja:nth-child(8){animation-delay:.84s} /* contínuos da secção */ .kids-fluor .jovens.kv .star-divider .star-icon{animation:kPulse 3.5s ease-in-out infinite} /* estrelas magenta pulsam */ .kids-fluor .jovens.kv .jovens-fecho-estrela{display:inline-block;animation:kTwinkle 3s ease-in-out infinite} @keyframes kTape{to{transform:translateY(0) rotate(-4deg); opacity:1}} @keyframes kPaintT{to{background-size:100% .34em}} @keyframes kPaintV{to{background-size:100% 44%}} @keyframes kPaintEm{to{background-size:100% .28em}} @keyframes kPaintJ{to{background-size:100% 38%}} @keyframes kRise{from{transform:translateY(16px)}to{transform:translateY(0)}} @keyframes kSpin{to{transform:rotate(360deg)}} @keyframes kPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} @keyframes kTwinkle{0%,100%{opacity:.55;transform:scale(.86)}50%{opacity:1;transform:scale(1.18)}} @keyframes kPop{0%{opacity:0;transform:scale(0) rotate(-20deg)}60%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}} }