/* ====================================== CORREIO DIÁRIO - TEMA ESCURO (DARK MODE) Aplicado quando o possui a classe .dark-mode Usa !important para garantir sobreposição dos estilos principais. ====================================== */ /* Variáveis do tema escuro */ body.dark-mode > main.main-content { --cor-fundo: #121218 !important; --cor-branco: #1e1e2a !important; --cor-texto: #e0e0e0 !important; --cor-texto-claro: #a0a0b0 !important; --cor-primaria: #0f0f1a !important; --cor-secundaria: #0a0a14 !important; background-color: #121218 !important; color: #e0e0e0 !important; } /* ====================================== CONTEÚDO PRINCIPAL (main-content) ====================================== */ body.dark-mode, body.dark-mode > main.main-content { background-color: #121218 !important; } /* ====================================== CARDS DE NOTÍCIAS ====================================== */ body.dark-mode > main.main-content .noticia-card { background-color: #1e1e2a !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important; } body.dark-mode > main.main-content .noticia-card:hover { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7) !important; } body.dark-mode > main.main-content .noticia-titulo { color: #e8e8f0 !important; } body.dark-mode > main.main-content .noticia-titulo a { color: #e8e8f0 !important; } body.dark-mode > main.main-content .noticia-titulo a:hover { color: #e94560 !important; } body.dark-mode > main.main-content .noticia-resumo { color: #a0a0b0 !important; } body.dark-mode > main.main-content .noticia-meta { color: #888899 !important; } body.dark-mode > main.main-content .noticia-conteudo { background-color: #1e1e2a !important; } /* ====================================== LISTA DE NOTÍCIAS (editoria) ====================================== */ body.dark-mode > main.main-content .noticia-item { background-color: #1e1e2a !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important; } body.dark-mode > main.main-content .noticia-item:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important; } body.dark-mode > main.main-content .noticia-info { background-color: #1e1e2a !important; } /* ====================================== DETALHE DA NOTÍCIA ====================================== */ body.dark-mode > main.main-content .noticia-detalhe { background-color: #1e1e2a !important; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.6) !important; } body.dark-mode > main.main-content .noticia-titulo-principal { color: #e8e8f0 !important; } body.dark-mode > main.main-content .noticia-meta-principal { color: #a0a0b0 !important; border-color: #2e2e3e !important; } body.dark-mode > main.main-content .noticia-resumo-destaque { color: #d0d0e0 !important; } body.dark-mode > main.main-content .noticia-texto { color: #d0d0e0 !important; } body.dark-mode > main.main-content .noticia-footer { border-color: #2e2e3e !important; } body.dark-mode > main.main-content .share-buttons { background-color: #252535 !important; } body.dark-mode > main.main-content .share-buttons > .share-twitter { background-color: #a5a5a5 !important; } /* body.dark-mode > main.main-content .share-buttons > button { color: #FFF !important; } */ body.dark-mode > main.main-content .noticia-foto figcaption { color: #888899 !important; } body.dark-mode > main.main-content .aviso-ia { background-color: #2a2500 !important; border-color: #ffc107 !important; color: #d4a017 !important; } body.dark-mode > main.main-content .fonte-original { color: #a0a0b0 !important; } /* ====================================== NOTÍCIAS RELACIONADAS ====================================== */ body.dark-mode > main.main-content .relacionadas h2 { color: #e8e8f0 !important; } body.dark-mode > main.main-content .relacionada-card { background-color: #1e1e2a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; } body.dark-mode > main.main-content .relacionada-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7) !important; } body.dark-mode > main.main-content .relacionada-info h3 a { color: #e8e8f0 !important; } body.dark-mode > main.main-content .relacionada-info .data { color: #888899 !important; } body.dark-mode > main.main-content .relacionada-info { background-color: #1e1e2a !important; } /* ====================================== EDITORIA - HEADER E TÍTULOS ====================================== */ body.dark-mode > main.main-content .editoria-header h1 { color: #e8e8f0 !important; } body.dark-mode > main.main-content .editoria-descricao { color: #a0a0b0 !important; } body.dark-mode > main.main-content .section-title { color: #e8e8f0 !important; } body.dark-mode > main.main-content .editoria-titulo { color: #e8e8f0 !important; } body.dark-mode > main.main-content .editoria-bloco { background-color: #1e1e2a !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important; } body.dark-mode > main.main-content .editoria-bloco:hover { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6) !important; } body.dark-mode > main.main-content .editoria-header { border-color: #2e2e3e !important; } /* ====================================== NOTÍCIAS COMPACTAS ====================================== */ body.dark-mode > main.main-content .noticia-compacta { border-color: #2e2e3e !important; } body.dark-mode > main.main-content .noticia-titulo-compacto a { color: #e0e0f0 !important; } body.dark-mode > main.main-content .noticia-titulo-compacto a:hover { color: #e94560 !important; } body.dark-mode > main.main-content .noticia-data-compacta { color: #888899 !important; } /* ====================================== PAGINAÇÃO ====================================== */ body.dark-mode > main.main-content .page-link { background-color: #252535 !important; color: #e0e0e0 !important; } body.dark-mode > main.main-content .page-link:hover { background-color: #e94560 !important; color: #ffffff !important; } body.dark-mode > main.main-content .page-info { color: #a0a0b0 !important; } body.dark-mode > main.main-content .paginacao-btn { background-color: #252535 !important; color: #e0e0e0 !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important; } body.dark-mode > main.main-content .paginacao-btn:hover { background-color: #e94560 !important; color: #ffffff !important; } body.dark-mode > main.main-content .paginacao-info { background-color: #0f0f1a !important; color: #e0e0e0 !important; } /* ====================================== PÁGINA DE BUSCA ====================================== */ body.dark-mode > main.main-content .busca-titulo { color: #e8e8f0 !important; } body.dark-mode > main.main-content .busca-info { color: #a0a0b0 !important; } body.dark-mode > main.main-content .sem-resultados { background-color: #1e1e2a !important; } body.dark-mode > main.main-content .sem-resultados h2 { color: #e8e8f0 !important; } body.dark-mode > main.main-content .sem-resultados p { color: #a0a0b0 !important; } /* ====================================== ESTADOS VAZIOS ====================================== */ body.dark-mode > main.main-content .sem-noticias { color: #888899 !important; } /* ====================================== FAQ ====================================== */ body.dark-mode > main.main-content h2.faq-titulo { color: #e8e8f0 !important; } body.dark-mode > main.main-content .faq-resposta { color: #d0d0e0 !important; } /* ====================================== FORMULÁRIO DE CONTATO ====================================== */ body.dark-mode > main.main-content .form-contato-wrapper { background-color: #1e1e2a !important; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important; } body.dark-mode > main.main-content .form-label { color: #d0d0e0 !important; } body.dark-mode > main.main-content .form-contato input[type="text"], body.dark-mode > main.main-content .form-contato input[type="email"], body.dark-mode > main.main-content .form-contato textarea, body.dark-mode > main.main-content .form-contato select, body.dark-mode > main.main-content .form-contato .form-input { background-color: #252535 !important; border-color: #3a3a4e !important; color: #e0e0e0 !important; } body.dark-mode > main.main-content .form-contato input[type="text"]:focus, body.dark-mode > main.main-content .form-contato input[type="email"]:focus, body.dark-mode > main.main-content .form-contato textarea:focus, body.dark-mode > main.main-content .form-contato select:focus, body.dark-mode > main.main-content .form-contato .form-input:focus { border-color: #e94560 !important; background-color: #2a2a3a !important; box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.2) !important; } /* ====================================== PÁGINA ESTÁTICA ====================================== */ body.dark-mode > main.main-content .pagina-estatica { background-color: #1e1e2a !important; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5) !important; } body.dark-mode > main.main-content .pagina-estatica__cabecalho { border-color: #2e2e3e !important; } body.dark-mode > main.main-content .pagina-estatica__titulo { color: #e8e8f0 !important; } body.dark-mode > main.main-content .pagina-estatica__descricao { color: #a0a0b0 !important; } body.dark-mode > main.main-content .pagina-estatica__conteudo { color: #d0d0e0 !important; } body.dark-mode > main.main-content .pagina-estatica__conteudo h2, body.dark-mode > main.main-content .pagina-estatica__conteudo h3 { color: #e8e8f0 !important; } body.dark-mode > main.main-content .pagina-estatica__link-voltar { border-color: #a0a0b0 !important; color: #d0d0e0 !important; } body.dark-mode > main.main-content .pagina-estatica__link-voltar:hover { background-color: #252535 !important; } /* ====================================== BOTÃO DE ALTERNAR TEMA ====================================== */ .btn-tema { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.4); color: #ffffff; cursor: pointer; padding: 8px 12px; border-radius: 20px; font-size: 1rem; display: flex; align-items: center; gap: 0.4rem; transition: all 0.3s ease; min-width: 48px; min-height: 40px; white-space: nowrap; } main.main-content .btn-tema:hover { background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.7); } body.dark-mode > main.main-content .btn-tema { border-color: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; } body.dark-mode > main.main-content .btn-tema:hover { background-color: rgba(255, 255, 255, 0.1) !important; } /* Texto do botão: oculto em mobile pequeno */ .btn-tema .btn-tema-texto { font-size: 0.8rem; font-weight: 600; } @media (max-width: 480px) { main.main-content .btn-tema .btn-tema-texto { display: none; } }