/* ========================= HOMEPAGE v3 | THEME SYSTEM + LIGHT/DARK MODE v0.6 assets/css/themes.css ========================= */ /* ========================= HOMEPAGE v3 THEME SYSTEM + LIGHT/DARK MODE assets/css/themes.css ========================= */ /* ===================================================== DARK MODE | HEADER ===================================================== */ /* body.dark-mode .topbar{ background:var(--color-dark-bg); } body.dark-mode .topbar a{ color:var(--color-dark-text); } body.dark-mode .topbar a:hover{ color:var(--color-hover); } body.dark-mode .topbar span{ color:rgba(255,255,255,.35); } */ /* HEADER PRINCIPAL */ body.dark-mode .main-header{ background:var(--color-dark-bg); } /* Logo clara/escura (2026-08-03, item 7) — ver header-logo-light/-dark em includes/header.php. Sem regra de "span" aqui — a legenda agora vem desenhada dentro da própria imagem da logo, não é texto solto. */ body.dark-mode .header-logo-light{ display:none; } body.dark-mode .header-logo-dark{ display:inline-block; } /* MENU */ body.dark-mode .main-nav a{ color:var(--color-dark-text); } body.dark-mode .main-nav a:hover{ color:var(--color-hover); } /* Menu horizontal fixo do desktop (2026-08-21, ver assets/css/header.css) — só o FUNDO precisa de override aqui: era ".main-nav-fixo{background: var(--color-white)}" fixo em header.css, sem token nenhum, então não acompanhava o dark mode sozinho (ficaria uma barra branca "acesa" no meio de um header escuro). O TEXTO dos links (".main-nav-fixo a") já usa var(--color-title), que o dark mode redefine mais abaixo neste arquivo — não precisa de regra própria aqui. */ body.dark-mode .main-nav-fixo{ background:var(--color-dark-bg); border-top-color:var(--color-dark-border); } /* 2026-08-22 (print 144): o destaque do item pai aberto (ver header.css, ".main-nav-fixo .has-submenu.aberto > a") usa um tom escuro (rgba(0,0,0,.05)) pensado pro fundo BRANCO do modo claro; no dark mode o fundo do menu fixo já é escuro (--color-dark-bg logo acima), então trocamos por um tom claro pra continuar dando destaque em vez de só escurecer ainda mais um fundo que já é escuro. */ body.dark-mode .main-nav-fixo .has-submenu.aberto > a{ background:rgba(255,255,255,.06); } /* SUBMENUS */ body.dark-mode .submenu{ background:var(--color-dark-bg); border:1px solid var(--color-dark-border); box-shadow: 0 12px 28px rgba(0,0,0,.35); } body.dark-mode .submenu a{ color:var(--color-dark-text); } body.dark-mode .submenu a:hover{ background:var(--color-hover); color:var(--color-white); } /* ===================================================== DARK MODE | IDIOMAS ===================================================== */ body.dark-mode .language-btn{ color:var(--color-dark-text); } body.dark-mode .language-menu{ background:var(--color-dark-bg); border:1px solid var(--color-dark-border); } body.dark-mode .language-menu a{ color:var(--color-dark-text); } body.dark-mode .language-menu a:hover{ background:var(--color-hover); color:var(--color-white); } body.dark-mode .language-menu a.active-language{ background:var(--color-hover); color:var(--color-white); } /* ===================================================== DARK MODE | BUSCA ===================================================== */ body.dark-mode .search-toggle{ color:var(--color-dark-text); } body.dark-mode .search-form{ background:var(--color-dark-bg); border:1px solid var(--color-dark-border); box-shadow: 0 12px 28px rgba(0,0,0,.35); } body.dark-mode .search-form input{ background:var(--color-dark-bg); color:var(--color-dark-text); border:1px solid var(--color-dark-border); } body.dark-mode .search-form input::placeholder{ color:var(--color-dark-text-soft); } /* ===================================================== DARK MODE | HEADER INFORME (renomeado de "BANNER" 2026-08-03, ver assets/css/header.css) ===================================================== */ body.dark-mode .header-informe{ background:var(--color-dark-bg); } body.dark-mode .header-informe .container{ background:transparent; } body.dark-mode .header-informe img{ filter: brightness(.75) contrast(1.08) saturate(.90); transition:var(--transition-medium); } /* ===================================================== DARK MODE | MAIN V3 ===================================================== */ body.dark-mode .homepage{ background:var(--color-dark-bg); } /* ===================================================== DARK MODE | DESTAQUE ===================================================== */ /* "Últimas Notícias" embutido (2026-08-04, print 45/49) — a linha divisória acima do carrossel (".featured-ultimas", border-top) usa var(--color-border) por padrão (cinza claro, pensado pra fundo branco) — troca pra a borda-padrão do modo escuro, mais discreta e consistente com o resto (".featured-card"/".news-card" já usam a mesma). */ /* ===================================================== DARK MODE | ÚLTIMAS NOTÍCIAS ===================================================== */ /* ===================================================== DARK MODE | PÁGINAS INTERNAS — MAIN (2026-07-10) Até aqui, TODO o CSS deste arquivo só cobria o header (sempre presente) e componentes exclusivos da homepage (.homepage, .home-featured, .featured-*, .news-*) — nenhuma regra existia pros templates internos (pagina.php, noticia.php, boletim.php/ boletins.php, contato.php, noticias.php, 404.php). O JS que liga o dark mode (assets/js/header.js) sempre funcionou certo em toda página (document.body.classList.add('dark-mode')) — o toggle e a persistência (localStorage) nunca foram o problema. O problema era puramente CSS: sem nenhuma regra "body.dark-mode X" pra essas classes, o MAIN continuava sempre com as cores do modo claro. O "footer parece funcionar" é coincidência — footer.css define um fundo escuro FIXO, incondicional, que nunca muda com o toggle (só parece reagir porque já nasce escuro dos dois jeitos). Estratégia (híbrida, registrar pra próximos projetos também — ver LUCIANO.md): 1) Regra base em body.dark-mode + redefinição dos TOKENS semânticos de conteúdo (--color-text/--color-title/ --color-muted/--color-border) — qualquer elemento que já usa var(--color-text) etc. (a grande maioria do texto do site) passa a responder ao dark mode automaticamente, sem precisar de uma regra própria pra cada seletor. NÃO redefine --color-white/--color-bg (tokens usados também por "superfície sempre branca" tipo texto de botão colorido — redefinir esses quebraria coisa que deveria continuar branca). 2) Overrides pontuais só pro que sobrou: cor/fundo escritos direto em hexadecimal (não usa variável) nos CSS de cada template — esses nunca reagiriam à troca de token nenhuma. ===================================================== */ body.dark-mode{ background:var(--color-dark-bg); color:var(--color-dark-text-soft); --color-text:var(--color-dark-text-soft); --color-title:var(--color-dark-text); --color-muted:var(--color-dark-text-soft); --color-border:var(--color-dark-border); } /* ----------------------------------------------------- TÍTULO DE PÁGINA INTERNA — .cabecalho-interno h1 (pagina.php, boletim.php, 404.php etc.) e .noticia-titulo (noticia.php). 2026-07-10, correção de contraste pedida pelo Luciano: em modo claro o título usa var(--color-primary) (azul do Staecnon) — decisão de padronização visual já registrada antes neste arquivo, mantida. Mas em modo ESCURO esse mesmo azul sobre o fundo var(--color-dark-bg) (também um tom de azul, só mais escuro) ficava com contraste ruim — "azul sobre azul". Regra agora: dark mode ligado = título em branco/quase-branco (var(--color-dark-text), mesmo tom usado pelos outros títulos do site em dark mode, ex. .featured-title/.section-header h2); dark mode desligado = título volta pro azul normal (nada mudou no CSS base, só este override dentro de body.dark-mode). ----------------------------------------------------- */ body.dark-mode .cabecalho-interno h1, body.dark-mode .noticia-titulo{ color:var(--color-dark-text); } /* 2026-09-11 (pedido do Luciano): título de notícia relacionada virou cor fixa #1B506F ("Azul Staecnon", ver noticia.css) em vez de var(--color-title) — que antes já virava clara sozinha aqui dentro do dark mode (--color-title é redefinida lá em cima). Cor fixa não acompanha mais isso sozinha, então ganha a mesma troca aqui, explícita. (.noticias-content h3 é do header NOVO — noticias.php usa html.homepage2-base-dark, não body.dark-mode — ver override em noticias_listagem.css, não aqui.) */ body.dark-mode .staecnon-noticia-relacionada-conteudo h3{ color:var(--color-dark-text); } /* ----------------------------------------------------- PÁGINA INSTITUCIONAL (pagina.php) — inclui Estatuto via documento-juridico.css, que não define cor própria nenhuma e por isso já fica coberto só com isto aqui. ----------------------------------------------------- */ body.dark-mode .pagina-texto blockquote{ background:rgba(255,255,255,.05); color:var(--color-dark-text); } /* ----------------------------------------------------- NOTÍCIA (noticia.php) ----------------------------------------------------- */ body.dark-mode .noticia-resumo, body.dark-mode .meta-item, body.dark-mode .noticia-conteudo{ color:var(--color-dark-text-soft); } body.dark-mode .meta-sep{ color:rgba(255,255,255,.25); } body.dark-mode .noticia-meta{ border-top:1px solid var(--color-dark-border); border-bottom:1px solid var(--color-dark-border); } body.dark-mode .noticia-conteudo blockquote{ background:rgba(255,255,255,.05); color:var(--color-dark-text); } body.dark-mode .staecnon-noticia-relacionada-card{ background:var(--color-dark-bg); border:1px solid var(--color-dark-border); } body.dark-mode .staecnon-noticia-relacionada-thumb, body.dark-mode .staecnon-noticia-relacionada-thumb-vazio{ background:rgba(255,255,255,.05); } body.dark-mode .staecnon-noticia-relacionadas{ border-top:1px solid var(--color-dark-border); } /* ----------------------------------------------------- NOTÍCIAS — listagem (noticias.php) ----------------------------------------------------- */ body.dark-mode .noticias-card{ background:var(--color-dark-bg); border:1px solid var(--color-dark-border); } /* ----------------------------------------------------- BOLETINS (boletins.php / boletim.php) .boletins-destaque-imagem e .boletins-grid-item-imagem continuam com fundo branco DE PROPÓSITO (a arte do boletim já é branca — ver comentário original em boletins.css) — não mexer. ----------------------------------------------------- */ body.dark-mode .boletins-meta{ border-top:1px solid var(--color-dark-border); border-bottom:1px solid var(--color-dark-border); } /* ----------------------------------------------------- CONTATO (contato.php) — .contato-info mantém o próprio gradiente azul, já funciona igual nos dois modos. ----------------------------------------------------- */ body.dark-mode .contato-form-wrap{ background:var(--color-dark-bg); border:1px solid var(--color-dark-border); } body.dark-mode .contato-form-campo input, body.dark-mode .contato-form-campo textarea{ background:rgba(255,255,255,.06); color:var(--color-dark-text); border-color:var(--color-dark-border); } body.dark-mode .contato-form-campo input:focus, body.dark-mode .contato-form-campo textarea:focus{ background:rgba(255,255,255,.1); } /* ----------------------------------------------------- DENÚNCIA (denuncia.php) — 2026-07-11. Achado pelo Luciano num print: a página nasceu SEM nenhuma regra de dark mode (mesma família de bug já catalogada nesta seção pra contato.php/boletins.php/etc. — página nova, ninguém lembrou de cobrir as 3 camadas na hora de criar). O problema mais sério aqui não era só "sem cor nenhuma mudando" — era pior: o texto (que já usa var(--color-text)) ficava CLARO automaticamente pela regra base (linha ~333 acima), mas o FUNDO de vários elementos continuava hardcoded claro (`.denuncia-caixa` branco, inputs `#fbfcfd`, abas `#f3f4f6`, aviso `#fef2f2`) — texto claro sobre fundo claro é pior que "não mudou nada", fica ilegível de verdade. Regra geral (ver LUCIANO.md): sempre que o TEXTO responde a um token semântico mas o FUNDO do mesmo elemento é hexadecimal fixo, os dois precisam ser corrigidos JUNTOS — senão a correção de um lado quebra o contraste do outro. ----------------------------------------------------- */ body.dark-mode .denuncia-caixa{ background:var(--color-dark-bg); border:1px solid var(--color-dark-border); } body.dark-mode .denuncia-aviso{ background:rgba(211,35,35,.12); border-color:rgba(211,35,35,.35); } body.dark-mode .denuncia-form-campo input, body.dark-mode .denuncia-form-campo select, body.dark-mode .denuncia-form-campo textarea{ background:rgba(255,255,255,.06); color:var(--color-dark-text); border-color:var(--color-dark-border); } body.dark-mode .denuncia-form-campo input:focus, body.dark-mode .denuncia-form-campo select:focus, body.dark-mode .denuncia-form-campo textarea:focus{ background:rgba(255,255,255,.1); } /* datalist/option do navegador não é estilizável via CSS — sem mudança possível aqui, é o próprio SO/navegador quem desenha. */ /* ----------------------------------------------------- 404 ----------------------------------------------------- */