/* Tema de Natal da página inicial (cursos e as pastas de cada curso). Só visual: enfeites em CSS, nenhuma função. Vale quando (a senha mestra liga no painel, aba Temas; js/layout.js põe o atributo antes de a página ser pintada). Cada layout tem o seu: clássico: flat e cartunesco, como os desenhos dos cursos (pisca-pisca, gorro no maracujá, neve nos cartões, azevinho, boneco de neve, flocos caindo); novo: minimalista (fio de luzinhas na linha do cabeçalho, estrela dourada no nome, brilho no canto dos cartões, azevinho em traço fino, neve sutil). Os enfeites são desenhos SVG dentro deste arquivo e nunca recebem toque (pointer-events:none). Com "reduzir movimento", a neve fica parada. */ /* ======================================================= comum: a neve fica ATRÁS do conteúdo */ :root[data-tema="natal"] body{position:relative;isolation:isolate} :root[data-tema="natal"] body::before{content:"";position:fixed;left:0;right:0;top:-320px;bottom:0;z-index:-1;pointer-events:none;will-change:transform;animation:natalNeve 28s linear infinite} @keyframes natalNeve{to{transform:translateY(320px)}} @keyframes natalNeveDevagar{to{transform:translateY(480px)}} /* ======================================================= CLÁSSICO: flat e cartunesco */ :root[data-tema="natal"][data-layout="classico"] body{padding-top:max(54px,env(safe-area-inset-top))} /* flocos de neve desenhados (azul-claro no tema claro, brancos no escuro) */ :root[data-tema="natal"][data-layout="classico"] body::before{background:url("data:image/svg+xml,") 0 0/320px 320px repeat;animation-duration:36s} @media (prefers-color-scheme:dark){:root[data-tema="natal"][data-layout="classico"] body::before{opacity:.55;filter:brightness(1.6) saturate(.4)}} /* pisca-pisca no alto da página: fio verde e lâmpadas nas cores do site */ :root[data-tema="natal"][data-layout="classico"] body::after{content:"";position:absolute;left:0;right:0;top:0;height:40px;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,") 0 0/160px 40px repeat-x} /* gorro de Papai Noel no maracujá do logo */ :root[data-tema="natal"][data-layout="classico"] .hero{position:relative} :root[data-tema="natal"][data-layout="classico"] .hero::before{content:"";position:absolute;pointer-events:none;z-index:1;background:url("data:image/svg+xml,") center/contain no-repeat} :root[data-tema="natal"][data-layout="classico"] .hero:not(.min)::before{width:76px;height:66px;left:calc(50% - 46px);top:-34px;transform:rotate(-14deg)} :root[data-tema="natal"][data-layout="classico"] .hero.min::before{width:34px;height:30px;left:-7px;top:-15px;transform:rotate(-16deg)} @media (max-width:560px){ :root[data-tema="natal"][data-layout="classico"] .hero:not(.min)::before{width:64px;height:56px;left:calc(50% - 39px);top:-28px} :root[data-tema="natal"][data-layout="classico"] .hero.min::before{width:26px;height:23px;left:-6px;top:-12px} } /* neve no alto dos cartões dos cursos e na aba das pastas (ciclos, períodos, disciplinas) */ :root[data-tema="natal"][data-layout="classico"] .curso{position:relative} :root[data-tema="natal"][data-layout="classico"] .curso::before, :root[data-tema="natal"][data-layout="classico"] .pasta::after{content:"";position:absolute;pointer-events:none;background:url("data:image/svg+xml,") 0 0/100% 100% no-repeat} :root[data-tema="natal"][data-layout="classico"] .curso::before{left:16px;right:16px;top:-11px;height:26px} :root[data-tema="natal"][data-layout="classico"] .pasta::after{left:-4px;width:calc(46% + 6px);top:-21px;height:16px} /* azevinho ao lado do título (Cursos, o nome do curso, do ciclo...) */ :root[data-tema="natal"][data-layout="classico"] .pasta-h h2::after{content:"";display:inline-block;width:1.25em;height:1em;margin-left:.3em;vertical-align:-.08em;pointer-events:none;background:url("data:image/svg+xml,") center/contain no-repeat} /* rodapé: morrinho de neve com pinheiros e um boneco de neve */ :root[data-tema="natal"][data-layout="classico"] footer::before{content:"";display:block;width:260px;max-width:100%;height:72px;margin:0 auto 10px;pointer-events:none;background:url("data:image/svg+xml,") center bottom/contain no-repeat} /* ======================================================= NOVO: minimalista, com acabamento premium */ :root[data-tema="natal"][data-layout="novo"]{--natal-vermelho:#b3122e;--natal-verde:#1f6a4a;--natal-ouro:#b8913f} @media (prefers-color-scheme:dark){:root[data-tema="natal"][data-layout="novo"]{--natal-vermelho:#ef5a64;--natal-verde:#4bb486;--natal-ouro:#dcbd6e}} /* neve sutil, em dois planos (os flocos maiores caem mais devagar) */ :root[data-tema="natal"][data-layout="novo"] body::before{opacity:.5;background:url("data:image/svg+xml,") 0 0/320px 320px repeat} :root[data-tema="natal"][data-layout="novo"] body::after{content:"";position:fixed;left:0;right:0;top:-480px;bottom:0;z-index:-1;pointer-events:none;opacity:.4;will-change:transform;animation:natalNeveDevagar 52s linear infinite;background:url("data:image/svg+xml,") 0 0/480px 480px repeat} @media (prefers-color-scheme:dark){ :root[data-tema="natal"][data-layout="novo"] body::before{opacity:.45;filter:brightness(2.2)} :root[data-tema="natal"][data-layout="novo"] body::after{opacity:.35;filter:brightness(2.2)} } /* a linha fina do cabeçalho vira um fio de luzinhas */ :root[data-tema="natal"][data-layout="novo"] .hero.min{position:relative} :root[data-tema="natal"][data-layout="novo"] .hero.min::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:5px;pointer-events:none; background:radial-gradient(circle,var(--natal-vermelho) 1.6px,transparent 2.1px) 0 0/66px 5px repeat-x, radial-gradient(circle,var(--natal-verde) 1.6px,transparent 2.1px) 22px 0/66px 5px repeat-x, radial-gradient(circle,var(--natal-ouro) 1.6px,transparent 2.1px) 44px 0/66px 5px repeat-x} @media (prefers-color-scheme:dark){:root[data-tema="natal"][data-layout="novo"] .hero.min::after{filter:drop-shadow(0 0 3px rgba(255,214,140,.45))}} /* estrela dourada ao lado do nome */ :root[data-tema="natal"][data-layout="novo"] .hero h1::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.22em;vertical-align:.5em;pointer-events:none;background:var(--natal-ouro); -webkit-mask:url("data:image/svg+xml,") center/contain no-repeat; mask:url("data:image/svg+xml,") center/contain no-repeat} /* brilho dourado no canto dos cartões (cursos e pastas) */ :root[data-tema="natal"][data-layout="novo"] .curso{position:relative} :root[data-tema="natal"][data-layout="novo"] .curso::before, :root[data-tema="natal"][data-layout="novo"] .pasta::after{content:"";position:absolute;top:12px;right:12px;width:10px;height:10px;pointer-events:none;background:var(--natal-ouro);opacity:.85; -webkit-mask:url("data:image/svg+xml,") center/contain no-repeat; mask:url("data:image/svg+xml,") center/contain no-repeat} :root[data-tema="natal"][data-layout="novo"] .curso::before{right:auto;left:12px} /* (no canto direito fica o cadeado da página pública) */ :root[data-tema="natal"][data-layout="novo"] .curso:not(.embreve):hover{border-color:color-mix(in srgb,var(--natal-vermelho) 45%,var(--bd))} /* bolinha de árvore em traço fino ao lado do título */ :root[data-tema="natal"][data-layout="novo"] .pasta-h h2::after{content:"";display:inline-block;width:.62em;height:.74em;margin-left:.32em;vertical-align:-.04em;pointer-events:none;background:url("data:image/svg+xml,") center/contain no-repeat} @media (prefers-color-scheme:dark){:root[data-tema="natal"][data-layout="novo"] .pasta-h h2::after{filter:brightness(1.7)}} /* ======================================================= quem pediu menos movimento: a neve fica parada */ @media (prefers-reduced-motion:reduce){ :root[data-tema="natal"] body::before,:root[data-tema="natal"] body::after{animation:none} } @media print{:root[data-tema="natal"] body::before,:root[data-tema="natal"] body::after,:root[data-tema="natal"] .hero::before,:root[data-tema="natal"] footer::before{display:none}}