/** * tema.css — Modo escuro do Portal Mamborê. * * POR QUE ESTE ARQUIVO EXISTE, E NÃO classes "dark:" espalhadas * ------------------------------------------------------------ * O site usa Tailwind por CDN, com as cores escritas direto nas classes * (bg-white, text-slate-800...). O jeito idiomático seria acrescentar * "dark:bg-slate-900" ao lado de cada uma — só que elas aparecem 639 vezes * em 194 arquivos, e todo ajuste futuro exigiria lembrar de escrever a * versão escura junto. Um canto esquecido = área branca acesa no escuro. * * Aqui as ~20 classes claras que o site realmente usa são redefinidas uma * vez só, dentro de html.escuro. Uma página nova ganha o modo escuro de * graça, sem ninguém precisar lembrar de nada. * * COMO LIGAR NUMA PÁGINA * (../tema.css em /noticias/) * + o botão e o script de alternância (ver tema.js) * * O ?v= NÃO É ENFEITE. A hospedagem serve este arquivo com * "cache-control: max-age=604800" — sete dias. Sem trocar o ?v=, quem já * visitou o site continua com o CSS velho enquanto o HTML novo já chegou, e * qualquer componente que dependa de regra nova aparece cru na tela dele. * Ao mexer aqui, trocar o ?v= das páginas (a data de hoje serve): * sed -i -E "s#tema[.]css[?]v=[0-9]+#tema.css?v=AAAAMMDD#" *.html noticias/*.html * (painel/pagina-empresa.php já faz isso sozinho, pelo filemtime.) * * REGRA DE OURO AO EDITAR O SITE * Se aparecer uma classe de cor CLARA nova (ex.: bg-slate-300), acrescente * a contraparte aqui. As classes que já vivem sobre fundo escuro * (text-white, bg-brand, border-white/10, text-blue-200) NÃO entram — elas * funcionam igual nos dois temas. */ :root { /* Paleta do escuro: grafite neutro, perto do preto. A primeira versão era azul-marinho (#0b1120 e parentes) e o site inteiro ficava azul — o azul agora sobrou só onde ele significa alguma coisa: links, ícones de marca e o banner do tempo. Superfície é cinza neutro. */ --esc-fundo: #0b0b0d; /* plano de fundo da página */ --esc-fundo-topo: #17171c; /* topo do degradê do corpo */ --esc-cartao: #141417; /* superfície de cartão (era branco) */ --esc-cartao-2: #1c1c21; /* superfície um degrau acima (era slate-100) */ --esc-barra: #101014; /* cabeçalho e rodapé */ --esc-borda: #26262c; --esc-borda-forte: #35353d; --esc-texto: #ececef; /* texto principal */ --esc-texto-2: #b8b9c0; /* secundário */ --esc-texto-3: #8a8b93; /* apoio / legendas */ /* O ACENTO É O AMARELO DO LOGO (#FCC300, tirado do próprio arquivo do "M"). Antes era um azul clareado (#9ab4dd), que só existia porque a cor da marca no claro é azul-marinho — e azul-marinho clareado não vira nada, vira azul genérico. O amarelo do logo sobre grafite é a mesma dupla da marca, e o site passa a ter uma cor própria no escuro em vez de emprestada. Contraste sobre o cartão (#141417): ~11:1, folgado. */ --esc-marca: #fcc300; /* botões sólidos, links, ícones, barrinhas */ --esc-marca-2: #ffd452; /* o mesmo amarelo aceso, para o hover */ } /* Sem transição na carga, senão a página "pisca" do claro pro escuro. */ html.escuro body, html.escuro .bg-white, html.escuro .bg-bglight { transition: background-color .18s ease, color .18s ease; } /* ───────── Fundos ───────── */ /* O degradê do corpo é de propósito quase imperceptível: clareia uns poucos pontos no topo e some antes da metade da tela. Serve pra tirar o aspecto de "preto chapado" sem virar um efeito. `fixed` pra ele não se repetir ao rolar. */ /* O degradê vai no , não no : `bg-bglight` mora na tag body e viria com !important do Tailwind por cima de qualquer fundo que eu pusesse lá. */ html.escuro { background-color: var(--esc-fundo); background-image: linear-gradient(180deg, var(--esc-fundo-topo) 0%, #0d0d10 38%, var(--esc-fundo) 100%); background-attachment: fixed; } html.escuro body { color: var(--esc-texto); } html.escuro .bg-bglight { background-color: transparent !important; } /* Cartões: mesma ideia, um degrau de luz de cima pra baixo (~3%). */ html.escuro .bg-white { background-color: var(--esc-cartao) !important; background-image: linear-gradient(165deg, #17171b 0%, var(--esc-cartao) 62%) !important; } html.escuro .bg-slate-50, html.escuro .bg-blue-50 { background-color: var(--esc-cartao-2) !important; } html.escuro .bg-slate-100 { background-color: var(--esc-cartao-2) !important; } html.escuro .bg-slate-200 { background-color: var(--esc-borda) !important; } /* Véus de branco sobre fundo escuro: já funcionam, só ficam sutis demais quando o fundo geral escurece. */ html.escuro .bg-white\/5 { background-color: rgba(255,255,255,.07) !important; } html.escuro .bg-white\/10 { background-color: rgba(255,255,255,.10) !important; } /* Selos e avisos coloridos claros (verde de "atualizado", âmbar de aviso, vermelho de alerta). Viram versões translúcidas da própria cor, que leem bem no escuro sem perder o significado. */ html.escuro .bg-emerald-50 { background-color: rgba(16,185,129,.14) !important; } html.escuro .bg-red-50 { background-color: rgba(239,68,68,.14) !important; } html.escuro .bg-orange-100 { background-color: rgba(249,115,22,.16) !important; } html.escuro .text-emerald-700 { color: #6ee7b7 !important; } html.escuro .text-yellow-900 { color: #713f12 !important; } /* fica sobre bg-yellow-400, que não muda */ html.escuro .border-emerald-200 { border-color: rgba(16,185,129,.35) !important; } /* ───────── O azul-marinho da marca, no escuro ───────── `bg-brand` (#0F172A) é o azul-marinho do portal. No claro ele é a identidade; no escuro ele cobre cabeçalho, rodapé, chips e botões — e era metade do "azul demais". Aqui ele vira grafite, papel de cada elemento respeitado. */ /* Chip / selo: cinza visível sobre o cartão, texto branco continua legível. */ html.escuro .bg-brand { background-color: var(--esc-borda-forte) !important; } /* Algumas páginas escrevem o azul cru em vez de usar o apelido `brand` (tempo.html: cartão do tempo e cabeçalho da gaveta). São superfícies escuras — viram cartão. */ html.escuro .bg-\[\#0F172A\] { background-color: var(--esc-cartao) !important; background-image: linear-gradient(165deg, #17171b 0%, var(--esc-cartao) 62%) !important; } /* MENU LATERAL DO CELULAR. O painel inteiro é escrito com valores crus (#1E293B no painel, #0F172A no cabeçalho, #334155 no realce dos itens) — nenhum deles passa pelas regras de `brand` acima. Ele ganha o mesmo degradê vertical leve, e o cabeçalho fica transparente: quem separa é a linha, não um bloco de cor. */ html.escuro #mobile-menu, html.escuro .bg-\[\#1E293B\] { background-color: #121216 !important; background-image: linear-gradient(180deg, #1a1a20 0%, #0f0f13 100%) !important; } html.escuro #mobile-menu .bg-\[\#0F172A\] { background-color: transparent !important; background-image: none !important; } /* Realce dos itens do menu (passar o dedo / segurar). */ html.escuro .bg-\[\#334155\], html.escuro .hover\:bg-\[\#334155\]:hover { background-color: #2b2b33 !important; } html.escuro .active\:bg-\[\#334155\]\/80:active { background-color: rgba(43,43,51,.8) !important; } /* Faixas grandes (o topo "Previsão do Tempo"): cinza-chip numa área dessas fica chapado e sem graça — recebem o mesmo degradê das barras. */ html.escuro section.bg-brand { background-color: var(--esc-barra) !important; background-image: linear-gradient(180deg, #1a1a20 0%, #0e0e12 100%) !important; } /* Cabeçalho e rodapé: a barra quase preta, com o mesmo degradê leve. (O cabeçalho é