/* ============================================================ DOGUINHO STUDIOS — MODO ESCURO Entra depois do cssGlobal.css e só sobrescreve o que muda. Como quase tudo no site puxa das variáveis da paleta, o grosso do tema é a troca delas, lá no primeiro bloco. O resto do arquivo trata só os pontos onde a cor estava fixa dentro do componente e não tinha como vir de variável. O tema é ligado pela classe .tema-escuro no , que o components/tema.js coloca antes da página pintar. ============================================================ */ /* ------------------------------------------------------------ 1. A PALETA ------------------------------------------------------------ */ .tema-escuro { /* Paleta do tema #f3d76b amarelo -> destaque #f9f6b6 amarelo claro -> texto #681e1e marrom médio -> superfícies e bordas #370808 marrom escuro -> fundo */ --cor-primaria: #f3d76b; --cor-secundaria: #f9f6b6; --cor-suave: #681e1e; --cor-grafite: #f9f6b6; --cor-vinho: #f3d76b; --cor-fundo: #370808; --cor-divisor: rgba(243, 215, 107, 0.28); /* No escuro o destaque não pode ser "mais fechado": sobre marrom, quem pesa mais é o tom mais aceso. */ --cor-destaque: #f3d76b; /* Tons derivados, para superfícies que precisam se destacar do fundo sem chegar no marrom médio */ --cor-superficie: #4a1010; --cor-tinta: #370808; /* texto sobre o amarelo */ --sombra-header: 0 4px 18px rgba(0, 0, 0, 0.45); } /* ------------------------------------------------------------ 2. HEADER ------------------------------------------------------------ */ .tema-escuro .site-header { background: linear-gradient(180deg, var(--cor-superficie) 0%, var(--cor-suave) 100%); } .tema-escuro .site-header.is-scrolled { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5); } /* O mascote do header é pintado por máscara, e a cor vem do header.js como variável inline. Aqui a cor é definida direto na propriedade, que a variável inline não alcança — então o amarelo vence. */ .tema-escuro .brand-mark { background-color: var(--cor-primaria); } /* Os fundos claros dos botões redondos estavam em branco fixo */ .tema-escuro .social-link { background: rgba(249, 246, 182, 0.12); color: var(--cor-primaria); } .tema-escuro .social-link:hover, .tema-escuro .social-link:focus-visible { background: var(--cor-primaria); color: var(--cor-tinta); } .tema-escuro .nav-toggle { background: rgba(249, 246, 182, 0.12); color: var(--cor-primaria); } .tema-escuro .nav-toggle:hover { background: rgba(249, 246, 182, 0.22); } /* Menu da guia de administração */ .tema-escuro .nav-menu { background: var(--cor-superficie); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42); } .tema-escuro .nav-menu-item { color: var(--cor-secundaria); } .tema-escuro .nav-episodios { border-left-color: var(--cor-suave); } .tema-escuro .nav-parte-abre[aria-expanded="true"] { color: var(--cor-primaria); } .tema-escuro .nav-menu-item:hover, .tema-escuro .nav-menu-item:focus-visible { background: var(--cor-suave); color: var(--cor-primaria); } /* Sobre o amarelo, a tinta precisa ser escura */ .tema-escuro .nav-menu-item.is-active { background: var(--cor-primaria); color: var(--cor-tinta); } /* Gaveta do menu no celular. As duas regras precisam ficar DENTRO da media query: no desktop o menu não é uma gaveta, e um fundo aqui viraria um retângulo atrás dos itens. */ @media (max-width: 1080px) { .tema-escuro .main-nav { background: var(--cor-superficie); box-shadow: -6px 0 26px rgba(0, 0, 0, 0.5); } } /* ------------------------------------------------------------ 3. HOME — HERO ------------------------------------------------------------ */ /* A arte do cenário é clara e continua clara; a vinheta é que fecha mais, para o elenco não brigar com o fundo da página */ .tema-escuro .hero-brilho { background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(20, 4, 4, 0.55) 100%), linear-gradient(180deg, rgba(20, 4, 4, 0.3) 0%, transparent 22%); } /* Cards das lojas: fundo branco vira superfície escura */ .tema-escuro .loja-card { background: var(--cor-superficie); border-color: var(--cor-primaria); color: var(--cor-secundaria); } .tema-escuro .loja-card:hover, .tema-escuro .loja-card:focus-visible { border-color: var(--cor-primaria); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.45); } .tema-escuro .loja-texto small { color: var(--cor-primaria); } /* O ícone da Apple e o do PC são pretos fixos e sumiriam no card */ .tema-escuro .loja-icone svg [fill="#1c1c1e"] { fill: var(--cor-secundaria); } .tema-escuro .loja-icone svg [stroke="#1c1c1e"] { stroke: var(--cor-secundaria); } /* Pétalas das florzinhas do mato (o miolo já é a cor de destaque) */ .tema-escuro .hero-mato .flor-petala { fill: var(--cor-secundaria); } .tema-escuro .hero-mato .flor-caule { stroke: var(--cor-secundaria); } .tema-escuro .hero-mato { filter: drop-shadow(0 -4px 10px rgba(0, 0, 0, 0.4)); } /* ------------------------------------------------------------ 4. SOBRE NÓS ------------------------------------------------------------ */ /* As duas camadas da marca são rosa no arquivo. No escuro entram as versões geradas a partir dos mesmos desenhos: o borrão em marrom e a logo em amarelo, mantendo o dois-tons das letras. */ .tema-escuro .sobre-logo-fundo { content: url('../assets/para logo escuro.png'); } .tema-escuro .sobre-logo-frente { content: url('../assets/logocompleta-amarela.png'); } .tema-escuro .sobre-logo-marca { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45)); } .tema-escuro .sobre-logo-marca:hover { filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.55)); } /* Botões das redes: sobre o amarelo, a tinta precisa ser escura */ .tema-escuro .rede-botao { background: var(--cor-primaria); color: var(--cor-tinta); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); } .tema-escuro .sobre-redes .rede-botao:hover, .tema-escuro .sobre-redes .rede-botao:focus-visible { box-shadow: 0 12px 22px rgba(0, 0, 0, 0.45); } /* As cores de marca das redes são escuras demais para este fundo */ .tema-escuro .rede-instagram { background: linear-gradient(120deg, #f3d76b 0%, #e6a94e 100%); } .tema-escuro .rede-x { background: #f9f6b6; } .tema-escuro .rede-tiktok { background: #e8c85f; } .tema-escuro .rede-whatsapp { background: #a8cf7d; } /* O véu do hover clareia; no escuro ele fica mais discreto */ .tema-escuro .rede-botao:hover::before, .tema-escuro .rede-botao:focus-visible::before { opacity: 0.28; } /* ------------------------------------------------------------ 5. CONTAS — LOGIN, CADASTRO E PERFIL ------------------------------------------------------------ */ /* Campos: fundo branco vira superfície escura, e a tinta clareia */ .tema-escuro .campo-entrada { background: var(--cor-superficie); border-color: rgba(243, 215, 107, 0.28); color: var(--cor-secundaria); } .tema-escuro .campo-entrada:focus { border-color: var(--cor-primaria); box-shadow: 0 0 0 4px rgba(243, 215, 107, 0.2); } .tema-escuro .campo-entrada::placeholder { color: rgba(249, 246, 182, 0.45); } /* Sobre o amarelo, a tinta dos botões precisa ser escura */ .tema-escuro .botao-principal { background: var(--cor-primaria); color: var(--cor-tinta); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); } .tema-escuro .botao-secundario { background: var(--cor-suave); color: var(--cor-secundaria); } .tema-escuro .botao-secundario:hover, .tema-escuro .botao-secundario:focus-visible { background: var(--cor-primaria); color: var(--cor-tinta); } .tema-escuro .botao-fantasma { border-color: rgba(243, 215, 107, 0.35); color: var(--cor-secundaria); } .tema-escuro .botao-fantasma:hover, .tema-escuro .botao-fantasma:focus-visible { border-color: var(--cor-primaria); color: var(--cor-primaria); } .tema-escuro .botao-fantasma.is-ativo { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-tinta); } .tema-escuro .botao-sair { border-color: rgba(243, 215, 107, 0.35); color: var(--cor-secundaria); } .tema-escuro .botao-sair:hover, .tema-escuro .botao-sair:focus-visible { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-tinta); } /* Cartões de login e cadastro */ .tema-escuro .cartao-conta { background: var(--cor-superficie); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); } .tema-escuro .cartao-logo { content: url('../assets/logocompleta-amarela.png'); background: var(--cor-suave); } .tema-escuro .cartao-acoes { border-top-color: rgba(243, 215, 107, 0.2); } .tema-escuro .cartao-aviso { background: rgba(243, 215, 107, 0.14); color: var(--cor-primaria); } .tema-escuro .cartao-aviso.is-ok { background: rgba(168, 207, 125, 0.16); color: #bfe09a; } .tema-escuro .grupo-opcional { background: var(--cor-suave); color: var(--cor-secundaria); } /* Sobre o amarelo, a tinta precisa ser escura */ .tema-escuro .grupo-exigido { background: var(--cor-primaria); color: var(--cor-tinta); } /* O vinho do tema claro some no fundo escuro */ .tema-escuro .is-faltando { outline-color: #e8657f; } .tema-escuro .is-faltando legend, .tema-escuro .is-faltando > span { color: #e8657f; } /* Painel do perfil */ .tema-escuro .perfil-bolha { background: rgba(249, 246, 182, 0.12); color: var(--cor-primaria); } .tema-escuro .perfil-bolha:hover, .tema-escuro .perfil-bolha:focus-visible, .tema-escuro .perfil-bolha.is-logado { background: var(--cor-primaria); color: var(--cor-tinta); } .tema-escuro .perfil-bloco { background: var(--cor-superficie); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); } .tema-escuro .perfil-cabecalho { background: linear-gradient(135deg, var(--cor-suave) 0%, var(--cor-superficie) 100%); color: var(--cor-primaria); } .tema-escuro .perfil-avatar, .tema-escuro .perfil-selo, .tema-escuro .perfil-fechar { background: rgba(243, 215, 107, 0.18); } .tema-escuro .perfil-fechar { color: var(--cor-primaria); } .tema-escuro .perfil-bloco { border-bottom-color: rgba(243, 215, 107, 0.18); } .tema-escuro .perfil-bloco-demo { border-color: rgba(243, 215, 107, 0.3); } .tema-escuro .perfil-pontos { background: var(--cor-suave); } .tema-escuro .perfil-pontos-texto { color: var(--cor-secundaria); } /* Notificações. Sobre o amarelo, a tinta precisa ser escura. */ .tema-escuro .notificacao { background: var(--cor-primaria); color: var(--cor-tinta); } .tema-escuro .notificacao.is-erro { background: var(--cor-suave); color: var(--cor-secundaria); } .tema-escuro .confirmacao { background: var(--cor-superficie); } .tema-escuro .confirmacao-fundo { background: rgba(0, 0, 0, 0.62); } /* ------------------------------------------------------------ 6. VAGAS ------------------------------------------------------------ */ .tema-escuro .vaga-cartao, .tema-escuro .vagas-form, .tema-escuro .modal { background: var(--cor-superficie); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32); } .tema-escuro .vaga-cartao:hover { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45); } .tema-escuro .vaga-selo { background: var(--cor-suave); color: var(--cor-secundaria); } .tema-escuro .vaga-selo.is-aberta { background: #2f6d4a; color: #dff3e6; } .tema-escuro .vaga-selo.is-fechada { background: rgba(249, 246, 182, 0.16); color: var(--cor-secundaria); } .tema-escuro .vaga-candidaturas { background: rgba(0, 0, 0, 0.22); } .tema-escuro .vaga-candidatos li { border-top-color: rgba(243, 215, 107, 0.18); } .tema-escuro .vaga-candidato-mensagem { background: rgba(243, 215, 107, 0.1); } .tema-escuro .campo-arquivo { background: rgba(0, 0, 0, 0.22); border-color: rgba(243, 215, 107, 0.3); color: var(--cor-secundaria); } .tema-escuro .campo-arquivo::file-selector-button { background: var(--cor-primaria); color: var(--cor-tinta); } .tema-escuro .vagas-vazio, .tema-escuro .vagas-trancado { border-color: rgba(243, 215, 107, 0.3); } .tema-escuro .vagas-aviso { background: rgba(168, 207, 125, 0.16); color: #bfe09a; } .tema-escuro .vagas-aviso.is-erro { background: rgba(243, 215, 107, 0.14); color: var(--cor-primaria); } .tema-escuro .botao-perigo { border-color: rgba(243, 215, 107, 0.35); color: var(--cor-secundaria); } .tema-escuro .botao-perigo:hover, .tema-escuro .botao-perigo:focus-visible { background: #8e2b2b; border-color: #8e2b2b; color: var(--cor-secundaria); } /* A mesma cor fixa no escuro, usando os tons que estes botões tinham no hover deste tema. Precisa ser repetido aqui: as regras deste arquivo vêm depois e venceriam as do global. */ .tema-escuro .vagas-botoes .botao-fantasma, .tema-escuro .vagas-botoes .botao-fantasma:hover, .tema-escuro .vagas-botoes .botao-fantasma:focus-visible { background: transparent; border-color: var(--cor-primaria); color: var(--cor-primaria); } .tema-escuro .vagas-botoes .botao-secundario, .tema-escuro .vagas-botoes .botao-secundario:hover, .tema-escuro .vagas-botoes .botao-secundario:focus-visible { background: var(--cor-primaria); color: var(--cor-tinta); } .tema-escuro .vagas-botoes .botao-perigo, .tema-escuro .vagas-botoes .botao-perigo:hover, .tema-escuro .vagas-botoes .botao-perigo:focus-visible { background: #8e2b2b; border-color: #8e2b2b; color: var(--cor-secundaria); } .tema-escuro .modal-topo { border-bottom-color: rgba(243, 215, 107, 0.18); } .tema-escuro .modal-fechar { background: rgba(243, 215, 107, 0.14); color: var(--cor-primaria); } .tema-escuro .modal-fechar:hover { background: rgba(243, 215, 107, 0.26); } /* ------------------------------------------------------------ 7. PROGRAMA DE RECOMPENSAS ------------------------------------------------------------ */ .tema-escuro .recompensa-estado, .tema-escuro .recompensa-item, .tema-escuro .recompensa-numero { background: var(--cor-superficie); border-color: rgba(243, 215, 107, 0.28); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); } .tema-escuro .recompensa-estado.is-aprovada { border-color: #6aa383; } .tema-escuro .recompensa-estado.is-recusada { border-color: var(--cor-primaria); } .tema-escuro .recompensa-selo, .tema-escuro .recompensa-status, .tema-escuro .recompensa-selo-tipo { background: var(--cor-suave); border-color: rgba(243, 215, 107, 0.28); color: var(--cor-secundaria); } .tema-escuro .is-aprovada .recompensa-selo, .tema-escuro .recompensa-status.is-aprovada { background: #2f6d4a; color: #dff3e6; } .tema-escuro .is-recusada .recompensa-selo, .tema-escuro .recompensa-status.is-recusada { background: #8e2b2b; color: var(--cor-secundaria); } .tema-escuro .recompensa-status.is-depositada { background: var(--cor-primaria); color: var(--cor-tinta); } /* Cor fixa também no escuro. Precisa do .recompensa-recusa na frente para vencer as regras gerais de hover deste mesmo arquivo. */ .tema-escuro .recompensa-recusa .botao-perigo, .tema-escuro .recompensa-recusa .botao-perigo:hover, .tema-escuro .recompensa-recusa .botao-perigo:focus-visible { background: #8e2b2b; border-color: #8e2b2b; color: var(--cor-secundaria); } .tema-escuro .recompensa-motivo { background: rgba(0, 0, 0, 0.24); } .tema-escuro .recompensa-lembrete { background: var(--cor-suave); color: var(--cor-secundaria); } .tema-escuro .botao-regras { background: var(--cor-superficie); color: var(--cor-secundaria); } .tema-escuro .botao-regras:hover, .tema-escuro .botao-regras:focus-visible { background: var(--cor-primaria); color: var(--cor-tinta); } .tema-escuro .exemplo-item { border-color: var(--cor-divisor); background: var(--cor-superficie); } .tema-escuro .combo-lista { background: var(--cor-superficie); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42); } .tema-escuro .combo-item:hover, .tema-escuro .combo-item:focus-visible { background: var(--cor-suave); } .tema-escuro .campo-olho { color: var(--cor-secundaria); } .tema-escuro .campo-olho:hover, .tema-escuro .campo-olho:focus-visible { background: var(--cor-suave); color: var(--cor-primaria); } .tema-escuro .escolha-conteudo { border-color: rgba(243, 215, 107, 0.28); } .tema-escuro .jogo-remover { background: var(--cor-suave); color: var(--cor-secundaria); } .tema-escuro .jogo-remover:hover { background: var(--cor-primaria); color: var(--cor-tinta); } /* Sobre o amarelo, a tinta precisa ser escura */ .tema-escuro .escolha-cartao input:checked + .escolha-conteudo { border-color: var(--cor-primaria); background: var(--cor-primaria); } .tema-escuro .escolha-cartao input:checked + .escolha-conteudo strong, .tema-escuro .escolha-cartao input:checked + .escolha-conteudo span { color: var(--cor-tinta); } .tema-escuro .botao-whats { background: #2a7a4a; color: var(--cor-secundaria); } .tema-escuro .botao-whats:hover { background: #35915a; color: var(--cor-secundaria); } /* Sobre o amarelo, a tinta precisa ser escura */ /* O cartão em destaque precisa repetir o fundo aqui: o .tema-escuro .recompensa-numero acima vem depois do gradiente no arquivo claro e, com a mesma força, apagava o destaque — sobrava a tinta escura sobre o fundo escuro. */ .tema-escuro .recompensa-numero.is-destaque { background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-secundaria) 100%); color: var(--cor-tinta); } .tema-escuro .recompensa-numero.is-destaque strong { color: var(--cor-tinta); } .tema-escuro .recompensa-numero.is-destaque span { opacity: 0.9; } /* ---------- GUIA DOS JOGOS ---------- */ .tema-escuro .guia-card { background: var(--cor-superficie); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); } .tema-escuro .guia-logo img { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)); } .tema-escuro .guia-categoria-topo { border-bottom-color: var(--cor-divisor); } /* Sobre o amarelo, a tinta precisa ser escura */ .tema-escuro .guia-selo { background: var(--cor-primaria); color: var(--cor-tinta); } /* ---------- FOOTER ---------- Ele é escuro nos dois temas, mas no escuro o --cor-vinho vira amarelo e o --cor-suave vira vinho: sem trocar os dois, o rodapé apareceria amarelo com letra vermelha. */ .tema-escuro .site-footer { background: var(--cor-tinta); color: var(--cor-secundaria); } .tema-escuro .footer-email, .tema-escuro .footer-link { color: var(--cor-secundaria); } /* No escuro o --cor-suave é vinho, e a logo sumiria no hover */ .tema-escuro .footer-logo:hover .footer-logo-marca { background-color: var(--cor-secundaria); } .tema-escuro .footer-email:hover, .tema-escuro .footer-link:hover { color: var(--cor-primaria); } .tema-escuro .footer-redes .social-link { background: rgba(243, 215, 107, 0.14); color: var(--cor-secundaria); } /* Sobre o amarelo, a tinta precisa ser escura */ .tema-escuro .footer-redes .social-link:hover { background: var(--cor-primaria); color: var(--cor-tinta); } /* ---------- SEÇÕES DA HOME ---------- */ .tema-escuro .secao-clara { background: var(--cor-superficie); } .tema-escuro .vitrine-item { background: var(--cor-superficie); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); } .tema-escuro .vitrine-item.is-vazio, .tema-escuro .parceiro-vazio { background: transparent; border-color: var(--cor-divisor); } .tema-escuro .vitrine-selo { background: var(--cor-suave); color: var(--cor-primaria); } .tema-escuro .vitrine-arte { background: var(--cor-suave); } /* Sobre o amarelo, a tinta precisa ser escura */ .tema-escuro .vitrine-inicial { color: var(--cor-tinta); } .tema-escuro .parceiro { background: var(--cor-superficie); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); } .tema-escuro .arte-previa { border-color: var(--cor-divisor); background: var(--cor-superficie); } .tema-escuro .pessoa-alcance li { background: var(--cor-superficie); } /* Sobre o amarelo, a tinta precisa ser escura */ .tema-escuro .aba-conta { background: var(--cor-primaria); color: var(--cor-tinta); } /* No escuro o destaque e a cor primária são o mesmo amarelo: pintar a aba com novidade de destaque a deixaria igual à aba aberta. Ela segue preenchida em vinho com a borda amarela, que é o desenho que já existia aqui. */ .tema-escuro .adm-abas .tem-novidade { background: var(--cor-suave); border-color: var(--cor-primaria); color: var(--cor-primaria); } .tema-escuro .adm-abas .tem-novidade .aba-conta { background: var(--cor-primaria); color: var(--cor-tinta); } /* Sobre o amarelo, a tinta precisa ser escura */ .tema-escuro .adm-abas .botao.is-ativo { color: var(--cor-tinta); } .tema-escuro .adm-abas .is-ativo .aba-conta { background: var(--cor-tinta); color: var(--cor-primaria); } /* Sobre o amarelo, a tinta precisa ser escura */ .tema-escuro .selo-top { background: var(--cor-primaria); color: var(--cor-tinta); } .tema-escuro .metrica-enviada { background: var(--cor-superficie); } .tema-escuro .metrica-print { border-color: var(--cor-divisor); background: var(--cor-superficie); } /* No escuro os botões do cabeçalho ficam vazados em amarelo, e o carimbo de não lidos inverte — amarelo com tinta escura, senão ele sumiria sobre o cabeçalho, que também é escuro */ .tema-escuro .botao-painel { background: rgba(243, 215, 107, 0.14); border-color: rgba(243, 215, 107, 0.5); color: var(--cor-secundaria); } .tema-escuro .botao-painel:hover, .tema-escuro .botao-painel:focus-visible { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-tinta); } .tema-escuro .botao-marcador { background: var(--cor-primaria); color: var(--cor-tinta); } /* ------------------------------------------------------------ 8. BOTÃO QUE TROCA O TEMA ------------------------------------------------------------ */ .tema-escuro .tema-toggle { background: rgba(249, 246, 182, 0.12); color: var(--cor-primaria); } .tema-escuro .tema-toggle:hover { background: rgba(249, 246, 182, 0.22); } /* No claro aparece a lua (clique para escurecer); no escuro, o sol. Os seletores precisam do .tema-toggle na frente para vencer o ".tema-toggle svg { display: block }" do cssGlobal.css. */ .tema-toggle .tema-sol { display: none; } .tema-escuro .tema-toggle .tema-lua { display: none; } .tema-escuro .tema-toggle .tema-sol { display: block; }