/* ========================================================================== MODO ESCURO — cores usadas quando o leitor liga o botão da lua no topo ========================================================================== O QUE ESTE ARQUIVO FAZ 1. Troca as cores "por função" (fundo, texto, linhas, cor primária...) quando a página está no modo escuro. Como os outros arquivos usam essas variáveis, quase tudo muda sozinho. 2. Ajusta os poucos detalhes que têm cor própria (tabelas, campos de formulário, iniciais dos comentários, selos de situação). 3. Mostra a lua (modo claro) ou o sol (modo escuro) no botão do topo. 4. Troca o logo pelo "Logo para o modo escuro", se ele foi enviado em Aparência > Personalizar > Identidade do site. COMO FUNCIONA O site sempre começa no modo CLARO. Ao tocar na lua, o JavaScript (assets/js/navegacao.js, item 5) coloca data-tema="escuro" na página e guarda a escolha no navegador do leitor. Na próxima visita, um pequeno código no (inc/desempenho/otimizacoes.php) liga o modo escuro antes de a página aparecer, para não "piscar" branco. O QUE PODE SER ALTERADO - Os valores das cores abaixo. Confira o contraste (mínimo 4,5:1 para textos); veja docs/GUIA-DE-MANUTENCAO.md. CUIDADOS - Este arquivo é carregado POR ÚLTIMO (inc/configuracao/estilos-e-scripts.php), para vencer as regras dos outros arquivos. Mantenha assim. - O rodapé verde e a seção Finanças (marinho) continuam com as mesmas cores: já são escuros. ========================================================================== */ /* -------------------------------------------------------------------------- 1. CORES DO MODO ESCURO -------------------------------------------------------------------------- */ :root[data-tema="escuro"] { color-scheme: dark; /* Barras de rolagem e campos nativos também ficam escuros. */ --cor-fundo: #111714; /* Fundo das páginas (verde quase preto). */ --cor-superficie: #1A221E; /* Fundo de seções e caixas. */ --cor-marfim-escuro: #25302B; /* Hover e divisórias sobre as caixas. */ --cor-linha: #2B3631; /* Linhas finas. */ --cor-texto: #E9E7E1; /* Texto principal (marfim claro). */ --cor-texto-secundario: #C3C8C3; /* Resumos e linhas finas. */ --cor-texto-suave: #9EA59F; /* Datas e metadados. */ --cor-cinza-sobre-marfim: #9EA59F; --cor-primaria: #8CCFB2; /* Links e botões: verde-claro legível sobre o fundo escuro. */ --cor-primaria-hover: #A9DEC6; --cor-sobre-primaria: #0E1A15; /* Texto escuro sobre botões verde-claros. */ --cor-verde-claro: #1D3A30; /* Fundo da caixa de dica e da situação "aberto". */ --cor-dourado-escuro: #E3B868; /* Dourado legível sobre fundo escuro. */ --cor-dourado-claro: #2E2618; /* Fundo da caixa de atenção. */ --cor-foco: #8CCFB2; /* Contorno de foco do teclado. */ --sombra-painel: 0 18px 48px rgba(0, 0, 0, 0.5); --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.4); } /* As seções de fundo marfim trocam o cinza dos metadados no modo claro (base/variaveis.css). No escuro, todas usam o mesmo cinza claro. */ :root[data-tema="escuro"] .secao--concursos, :root[data-tema="escuro"] .guias, :root[data-tema="escuro"] .ficha-concurso, :root[data-tema="escuro"] .relacionados, :root[data-tema="escuro"] .busca-cabecalho, :root[data-tema="escuro"] .is-style-caixa-resumo, :root[data-tema="escuro"] .caixa-resumo { --cor-texto-suave: #9EA59F; } /* -------------------------------------------------------------------------- 2. DETALHES COM COR PRÓPRIA -------------------------------------------------------------------------- */ /* Campos de formulário (busca, comentários). */ :root[data-tema="escuro"] input[type="text"], :root[data-tema="escuro"] input[type="email"], :root[data-tema="escuro"] input[type="url"], :root[data-tema="escuro"] input[type="search"], :root[data-tema="escuro"] input[type="password"], :root[data-tema="escuro"] textarea { background: #0C110F; } :root[data-tema="escuro"] input:hover, :root[data-tema="escuro"] textarea:hover { border-color: #46544D; } /* Linhas alternadas da "Tabela comparativa". */ :root[data-tema="escuro"] .wp-block-table.is-style-comparativo tbody tr:nth-child(even) td, :root[data-tema="escuro"] .wp-block-table.is-style-comparativo tbody tr:nth-child(even) td:first-child { background: #161E1A; } /* "Lista de verificação": o sinal de certo fica verde-claro. */ :root[data-tema="escuro"] ul.is-style-lista-de-verificacao li::before, :root[data-tema="escuro"] ul.lista-de-verificacao li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CCFB2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); } /* Selo de situação "em andamento" (marinho). */ :root[data-tema="escuro"] .situacao--em-andamento { background: #22304A; color: #BCCBE2; } /* Iniciais dos comentários. */ :root[data-tema="escuro"] .comentario__avatar--1 { background: #1D3A30; color: #A9DEC6; } :root[data-tema="escuro"] .comentario__avatar--2 { background: #3A2F1A; color: #E8C37E; } :root[data-tema="escuro"] .comentario__avatar--3 { background: #22304A; color: #BCCBE2; } :root[data-tema="escuro"] .comentario__avatar--4 { background: #2B3631; color: #E9E7E1; } :root[data-tema="escuro"] .comentario__moderacao { color: #E3B868; } /* Fotos e imagens um pouco menos brilhantes, para não ofuscar no escuro. */ :root[data-tema="escuro"] .conteudo img, :root[data-tema="escuro"] .card img { filter: brightness(0.92); } /* -------------------------------------------------------------------------- 3. BOTÃO DO TOPO (lua / sol) -------------------------------------------------------------------------- */ .cabecalho__botao-tema { cursor: pointer; } .cabecalho__icone-sol, :root[data-tema="escuro"] .cabecalho__icone-lua { display: none; } .cabecalho__icone-lua, :root[data-tema="escuro"] .cabecalho__icone-sol { display: inline-flex; } /* Sem JavaScript o botão não funcionaria: fica escondido. */ .no-js .cabecalho__botao-tema { display: none; } /* -------------------------------------------------------------------------- 4. LOGO DO MODO ESCURO (opcional) -------------------------------------------------------------------------- */ .marca__logo-escuro { display: none; } :root[data-tema="escuro"] .marca__logo-escuro { display: block; } :root[data-tema="escuro"] .marca--com-logo-escuro .custom-logo-link { display: none; }