/* ===================================================================== ACADEMIA APLOUS, TEMA NOTURNO ILUMINADO Mesma linguagem caravaggesca, mas com a luz entrando na sala. O preto sai do quase absoluto e vira um marrom quente iluminado, com feixes de sol e mais presença do âmbar. Aplicado por . Carregar DEPOIS de aplous.css. ===================================================================== */ .tema-noturno { /* base levantada: marrom quente no lugar do preto */ --bg: #171208; --bg-2: #1f180d; --bg-3: #291f11; --ink: #f7efdd; --ink-soft: #dbcfb5; --ink-mute: #9c8f76; --gold: #f0b054; --gold-soft: #e2a141; --gold-deep: #c08a2c; --sol: rgba(255, 188, 96, .13); --sol-forte: rgba(255, 200, 118, .2); color: var(--ink-soft); background: linear-gradient(104deg, transparent 56%, rgba(255, 196, 108, .085) 64%, transparent 71%), linear-gradient(104deg, transparent 72%, rgba(255, 205, 128, .05) 79%, transparent 85%), radial-gradient(1300px 780px at 82% -10%, rgba(255, 198, 110, .2), transparent 64%), radial-gradient(1000px 700px at 12% 34%, rgba(255, 186, 96, .075), transparent 62%), linear-gradient(180deg, #1d1610 0%, #171208 42%, #140f07 100%); background-attachment: fixed; } .tema-noturno::before { opacity: .02; } /* ---- Feixes de sol ---- Sem mix-blend-mode: blend sobre seções com z-index estourava o fundo para branco. Os feixes viram camadas de gradiente dentro do fundo de cada seção, que é previsível e funciona em todo navegador. */ .tema-noturno { --feixe-a: linear-gradient(104deg, transparent 56%, rgba(255, 196, 108, .09) 64%, transparent 71%); --feixe-b: linear-gradient(104deg, transparent 72%, rgba(255, 205, 128, .055) 79%, transparent 85%); } /* ---- Seções: alternância quente em vez de preto contínuo ---- */ .tema-noturno .hero::before { width: 900px; height: 900px; background: radial-gradient(circle, rgba(255, 202, 118, .3), transparent 68%); } .tema-noturno .divider-section { background: var(--feixe-b), radial-gradient(900px 420px at 70% 0%, rgba(255, 196, 106, .11), transparent 66%), var(--bg-2); } .tema-noturno .encontra { background: radial-gradient(circle at 50% 36%, rgba(255, 196, 106, .1) 0%, transparent 66%), var(--bg); } .tema-noturno .professor { background: var(--feixe-a), radial-gradient(820px 460px at 18% 22%, rgba(255, 190, 100, .1), transparent 64%), var(--bg-2); } .tema-noturno .cursos { background: radial-gradient(1000px 520px at 50% 4%, rgba(255, 196, 106, .09), transparent 66%), linear-gradient(180deg, var(--bg) 0%, #1b150b 50%, var(--bg) 100%); } .tema-noturno .planos { background: radial-gradient(900px 500px at 50% 0%, rgba(255, 196, 106, .12), transparent 64%), var(--bg-2); } .tema-noturno .faq { background: var(--bg); } .tema-noturno .cta-final { background: var(--feixe-a), var(--feixe-b), radial-gradient(820px 460px at 76% 8%, rgba(255, 202, 118, .18), transparent 66%), var(--bg-2); } .tema-noturno .cta-final::before { background: radial-gradient(circle, rgba(255, 202, 118, .22), transparent 70%); } .tema-noturno footer { background: #100c06; border-top-color: rgba(240, 176, 84, .18); } /* A faixa clara continua sendo o respiro, agora um pouco mais quente */ .tema-noturno .light-band { background: linear-gradient(180deg, #f6eee0 0%, #efe3d0 100%); } /* ---- Superfícies: cartões deixam de ser buracos pretos ---- */ .tema-noturno .curso-yt { background: rgba(255, 236, 205, .035); border-color: rgba(240, 176, 84, .14); box-shadow: inset 0 1px 0 rgba(255, 236, 205, .05); } .tema-noturno .curso-yt:hover { border-color: rgba(240, 176, 84, .34); } .tema-noturno .curso-yt.is-open { background: rgba(255, 236, 205, .055); border-color: rgba(240, 176, 84, .48); } .tema-noturno .encontra-card, .tema-noturno .plano-card, .tema-noturno .depo-card { background: linear-gradient(180deg, rgba(255, 236, 205, .06), rgba(255, 236, 205, .025)); border-color: rgba(240, 176, 84, .16); } .tema-noturno .plano-card.featured { background: linear-gradient(180deg, rgba(255, 214, 150, .1), rgba(255, 236, 205, .035)); border-color: rgba(240, 176, 84, .5); } .tema-noturno .faq-item { border-bottom-color: rgba(240, 176, 84, .14); } .tema-noturno .combo-box { background: rgba(240, 176, 84, .075); border-color: rgba(240, 176, 84, .3); } .tema-noturno .curso-bonus { background: rgba(240, 176, 84, .085); } .tema-noturno .acervo-strip { border-color: rgba(240, 176, 84, .2); } .tema-noturno .hero-badge { background: rgba(31, 24, 13, .92); border-color: rgba(240, 176, 84, .24); } /* ---- Imagens: menos afundadas no escuro ---- */ .tema-noturno .hero-image-wrap img, .tema-noturno .professor-img-wrap img, .tema-noturno .cta-img-wrap img { filter: brightness(1.1) saturate(1.06); } .tema-noturno .curso-yt-cover img { filter: saturate(1.06) brightness(1.06) contrast(1.01); } .tema-noturno .hero-image-wrap, .tema-noturno .professor-img-wrap, .tema-noturno .cta-img-wrap { border: 1px solid rgba(240, 176, 84, .16); } /* ---- Detalhes em âmbar mais presentes ---- */ .tema-noturno .divider-rule { background: var(--gold); opacity: .85; } .tema-noturno .cred { border-color: rgba(240, 176, 84, .3); } .tema-noturno .btn-ghost { border-color: rgba(240, 176, 84, .34); } .tema-noturno .curso-toggle { border-color: rgba(240, 176, 84, .38); } .tema-noturno .curso-pagina { border-color: rgba(240, 176, 84, .48); } .tema-noturno .selo-incluso { border-color: rgba(240, 176, 84, .38); background: rgba(240, 176, 84, .09); } .tema-noturno .btn-gold { background: linear-gradient(180deg, #f8c471 0%, var(--gold) 55%, #e0a141 100%); color: #1a1206; box-shadow: 0 1px 0 rgba(255, 255, 255, .32) inset, 0 10px 26px -14px rgba(240, 176, 84, .8); } .tema-noturno .sticky-cta { background: rgba(23, 18, 8, .96); } /* ---- Páginas de curso ---- */ .tema-noturno .curso-abertura { background: radial-gradient(900px 480px at 72% 0%, rgba(255, 196, 106, .12), transparent 66%), var(--bg-2); } .tema-noturno .curso-grade { background: var(--bg); } .tema-noturno .curso-paraquem { background: var(--bg-2); } .tema-noturno .curso-fechamento { background: radial-gradient(820px 440px at 50% 0%, rgba(255, 202, 118, .18), transparent 68%), var(--bg); } .tema-noturno .fechamento-box { background: linear-gradient(180deg, rgba(255, 236, 205, .07), rgba(255, 236, 205, .025)); border-color: rgba(240, 176, 84, .24); } .tema-noturno .curso-hero-cover { border-color: rgba(240, 176, 84, .2); }