/* ==================== MODO ESCURO — site público do jornal ==================== Tudo aqui é aditivo: só regras "html.dark ...". Sem a classe "dark" em (padrão de hoje), nada aqui tem efeito — o modo claro fica pixel-idêntico ao que já era. A classe "dark" é controlada por public/JS/theme-toggle.js + o script anti-flash inline no de cada página (jornal.html/categoria.html/materia.html). Paleta reaproveitada do painel admin (public/Gerenciamento/style.css) — mesmo grafite já usado lá, não uma cor nova — pra manter coerência entre o site público e o admin: body #111, superfícies/cards #1e1e1e, bordas #2a2a2a. Navbar/footer do jornal já são pretos hoje (#000) e não mudam — só a área de conteúdo (hoje branca) ganha o grafite. */ /* Valor padrão (modo claro) — até agora só existia dentro de "html.dark", então nada fora do dark mode conseguia referenciar "a cor do card atual" de forma genérica. Necessário pra componentes cujo efeito visual (ex.: fade de imagem) precisa terminar exatamente na cor do card em QUALQUER tema, sem duplicar a lógica claro/escuro (ver .secundaria-card-fade em jornal.css). */ :root { --nopic-surface: #ffffff; } html.dark { --nopic-bg: #111111; --nopic-surface: #1e1e1e; --nopic-border: #2a2a2a; --nopic-fg: #e5e5e5; --nopic-muted: #9ca3af; } html.dark body { background: var(--nopic-bg); color: var(--nopic-fg); } /* ---- Fundos ---- */ html.dark .bg-white { background-color: var(--nopic-surface); } /* Só usado como placeholder de banner/anúncio nas 5 páginas do jornal (sem conflito com card de conteúdo) — um pouco mais claro que o fundo da página, pra ainda ler como "caixa vazia". */ html.dark .bg-gray-200 { background-color: var(--nopic-border); } /* ---- Textos ---- */ html.dark .text-gray-800, html.dark .text-gray-700, html.dark .text-gray-600 { color: var(--nopic-fg); } html.dark .text-gray-500, html.dark .text-gray-400 { color: var(--nopic-muted); } /* ---- Bordas ---- */ html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-800 { border-color: var(--nopic-border); } /* ---- Sombras — a sombra clara padrão do Tailwind some contra fundo escuro; troca por uma sombra mais profunda/opaca, que ainda lê contra o grafite. ---- */ html.dark .shadow, html.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5); } html.dark .hover\:shadow-lg:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7); } /* ---- Transição suave ao trocar de tema (public/JS/theme-toggle.js) ---- Classe temporária (~320ms), removida logo depois pelo próprio JS — não é uma transição permanente em tudo, que poderia interferir com outras animações/carrosséis já existentes no site. Só liga durante a troca. */ html.theme-transitioning, html.theme-transitioning * { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; }