/* ==========================================================================
SigaMunicipal — TEMA DIA (versão clara)
Traz para a landing o estilo do painel do Governo Transparente:
"chrome" azul-marinho (header / hero / rodapé) + corpo claro (slate-200)
com cards brancos, cantos 12px, sombra suave e hover que levanta 2px.
COMO ESTÁ LIGADO (index.php):
1. o arquivo entra no , DEPOIS de estilo.css
2. o já nasce com class="tema-dia" — o dia é o padrão, e vale
mesmo com JavaScript desligado
3. um script no remove essa classe se o visitante tiver escolhido
a noite antes (localStorage 'sm-tema'), antes da primeira pintura
4. o botão .tema-toggle no header alterna e grava a escolha
Tudo daqui para baixo está sob html.tema-dia: sem a classe, a página volta
100% ao tema escuro original. A ÚNICA exceção é o bloco 0 (o botão).
Opcional — fonte igual à do painel (hoje Inter/Outfit não são carregadas):
========================================================================== */
/* ==========================================================================
0. ALTERNADOR DIA / NOITE — SEM ESCOPO, de propósito
Este botão vive no header nos dois temas, então não pode ficar sob
html.tema-dia. É o único bloco do arquivo que se aplica sempre.
========================================================================== */
.tema-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 50%;
cursor: pointer;
font-size: .95rem;
color: #fff;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .22);
transition: background .2s ease, border-color .2s ease,
transform .2s ease, color .2s ease;
}
.tema-toggle:hover {
background: rgba(255, 255, 255, .2);
border-color: rgba(255, 255, 255, .45);
transform: translateY(-1px);
}
.tema-toggle:focus-visible {
outline: 2px solid #93c5fd;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.tema-toggle { transition: none; }
}
/* ==========================================================================
1. TOKENS — paleta do painel Governo Transparente
========================================================================== */
html.tema-dia {
/* superfícies */
--color-bg: #e2e8f0; /* slate-200 — fundo do corpo */
--color-surface: #ffffff; /* card branco */
--color-surface-hover: #ffffff;
/* marca */
--color-primary: #2563eb; /* blue-600 */
--color-primary-strong: #1d4ed8; /* blue-700 */
--color-secondary: #0284c7; /* sky-600 */
--color-accent: #059669; /* emerald-600 (contraste em fundo claro) */
--color-primary-glow: rgba(37, 99, 235, 0.18);
--color-accent-glow: rgba(5, 150, 105, 0.18);
/* bordas e texto */
--color-border: #f3f4f6; /* gray-100 — borda do card */
--color-border-hover: #e5e7eb; /* gray-200 */
--color-text: #1f2937; /* gray-800 */
--color-text-soft: #6b7280; /* gray-500 */
--color-text-muted: #9ca3af; /* gray-400 */
/* raios — o painel usa rounded-xl (12px) e rounded-lg (8px) */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 12px;
--radius-xl: 16px;
/* sombras Tailwind shadow-sm / shadow-md / shadow-xl */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
--shadow-glass: var(--shadow-sm);
--shadow-glow: var(--shadow-md);
/* desliga o glassmorphism */
--glass-blur: none;
--transition-smooth: all .2s cubic-bezier(.4, 0, .2, 1);
/* faixa escura (header / hero / rodapé) — blue-950 → blue-900 */
--nav-950: #172554;
--nav-900: #1e3a8a;
--nav-800: #1e40af; /* borda */
--nav-700: #1d4ed8;
--nav-300: #93c5fd; /* blue-300 — texto de apoio sobre azul */
--nav-200: #bfdbfe;
}
/* ==========================================================================
2. BASE
========================================================================== */
html.tema-dia body {
background-color: var(--color-bg);
color: var(--color-text);
-webkit-font-smoothing: antialiased;
}
/* Orbs animadas: some com elas e deixa um fundo claro levemente matizado */
html.tema-dia .bg-orbs {
background: radial-gradient(1200px 600px at 50% -10%, #eef2f7 0%, #e2e8f0 60%);
}
html.tema-dia .orb { display: none; }
/* ==========================================================================
3. HEADER — faixa azul-marinho sólida (from-blue-950 via-blue-900)
========================================================================== */
html.tema-dia .main-header {
background: linear-gradient(to right, var(--nav-950), var(--nav-900), var(--nav-950));
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid var(--nav-800);
box-shadow: var(--shadow-xl);
}
html.tema-dia .main-nav > a:not(.btn-sys) { color: var(--nav-300); }
html.tema-dia .main-nav > a:not(.btn-sys):hover { color: #fff; }
html.tema-dia .main-nav > a:not(.btn-sys)::after {
background: linear-gradient(90deg, #60a5fa, #34d399);
}
html.tema-dia .system-access { border-left-color: rgba(255, 255, 255, .18); }
html.tema-dia .menu-toggle {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .2);
color: #fff;
}
/* dropdown do menu mobile continua escuro (fica sobre o header) */
@media (max-width: 1024px) {
html.tema-dia .main-nav {
background: var(--nav-950);
border-bottom-color: var(--nav-800);
}
html.tema-dia .main-nav > a:not(.btn-sys) {
border-bottom-color: rgba(255, 255, 255, .08);
}
}
/* ==========================================================================
4. HERO — banda escura full-bleed (gradient-to-b from-blue-950 to-blue-900)
Igual ao topo do painel. O ::before sangra além do container centralizado.
========================================================================== */
html.tema-dia .hero {
isolation: isolate;
padding: 4.5rem 0 5rem;
min-height: 0;
}
html.tema-dia .hero::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
margin-left: -50vw;
z-index: -1;
background: linear-gradient(to bottom, var(--nav-950), var(--nav-900));
border-bottom: 1px solid var(--nav-800);
}
html.tema-dia .hero-content h1 { color: #fff; }
html.tema-dia .hero-content p { color: var(--nav-200); font-weight: 400; }
html.tema-dia .hero-content strong { color: #fff; }
/* gradiente do título continua claro — está sobre o azul-marinho */
html.tema-dia .hero .text-gradient {
background: linear-gradient(to right, #93c5fd, #a5b4fc, #6ee7b7);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Selo "Adequado ao Decreto..." — pill do painel: bg /15 + borda /30 */
html.tema-dia .badge-siafic {
background: rgba(16, 185, 129, .15);
border: 1px solid rgba(52, 211, 153, .3);
color: #6ee7b7; /* emerald-300 */
border-radius: 999px;
letter-spacing: .5px;
}
/* Botão do hero — translúcido, porque está sobre o azul-marinho */
html.tema-dia .hero .btn-badge-hero {
background: rgba(16, 185, 129, .15);
border-color: rgba(52, 211, 153, .45);
color: #6ee7b7;
}
html.tema-dia .hero .btn-badge-hero:hover {
background: rgba(16, 185, 129, .25);
border-color: rgba(52, 211, 153, .8);
color: #a7f3d0;
box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
/* O MESMO botão em fundo claro ("Falar com um especialista", no CTA dos
módulos): mantém o gradiente translúcido e o brilho que varre no hover —
só que num verde bem mais fechado, para firmar sobre o fundo claro. */
html.tema-dia .btn-badge-hero {
background: linear-gradient(120deg,
rgba(4, 120, 87, .18),
rgba(6, 95, 70, .09),
rgba(4, 120, 87, .18));
background-size: 200% 100%;
background-position: 0% 50%;
border: 1px solid rgba(4, 120, 87, .45);
color: #064e3b; /* emerald-900 */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-sm);
transition: background-position .5s ease, background-color .2s ease,
border-color .2s ease, color .2s ease,
transform .2s ease, box-shadow .2s ease;
}
html.tema-dia .btn-badge-hero i { color: #047857; transition: color .2s ease; }
/* o brilho translúcido que varre — no claro precisa ser verde, não branco */
html.tema-dia .btn-badge-hero::after {
background: linear-gradient(110deg, transparent 25%,
rgba(4, 120, 87, .18) 50%, transparent 75%);
}
html.tema-dia .btn-badge-hero:hover {
background: linear-gradient(120deg,
rgba(4, 120, 87, .92),
rgba(6, 78, 59, .84),
rgba(4, 120, 87, .92));
background-position: 100% 50%;
border-color: rgba(6, 78, 59, .9);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
html.tema-dia .btn-badge-hero:hover i { color: #fff; }
/* Mockup: mantém a moldura escura, mas com brilho contido */
html.tema-dia .showcase-glow { opacity: .45; filter: blur(56px); }
html.tema-dia .showcase-frame {
box-shadow: 0 24px 60px -20px rgba(2, 6, 23, .7),
0 1px 0 rgba(255, 255, 255, .12) inset;
}
html.tema-dia .showcase-chip {
background: rgba(15, 23, 42, .85);
border-color: rgba(255, 255, 255, .14);
}
/* ==========================================================================
5. SEÇÕES E TÍTULOS
========================================================================== */
html.tema-dia .section-padding { padding: 3rem 0; }
html.tema-dia .section-header h2 { color: var(--color-text); }
html.tema-dia .section-header p { color: var(--color-text-soft); font-weight: 400; }
/* Barra de destaque do painel (h-7 w-1.5 rounded-full), centralizada */
html.tema-dia .section-header h2::after {
content: '';
display: block;
width: 56px;
height: 5px;
margin: .9rem auto 0;
border-radius: 999px;
background: linear-gradient(90deg, #2563eb, #10b981);
}
/* As seções Módulos, Jurisprudência e Links trazem no HTML
style="background: rgba(17,24,39,.4)" — uma camada escura inline. Estilo inline
só cede a !important; aqui vira a faixa clara alternada que dá ritmo à página. */
html.tema-dia #modulos.section-padding,
html.tema-dia #jurisprudencia.section-padding,
html.tema-dia #links.section-padding {
background: #eef2f7 !important;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
/* gradiente de texto em fundo claro precisa escurecer */
html.tema-dia .text-gradient {
background: linear-gradient(to right, #1d4ed8, #4f46e5, #047857);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ==========================================================================
6. CARDS — o núcleo do estilo do painel
bg-white · rounded-xl · border-gray-100 · shadow-sm
hover: shadow-md + translateY(-2px), 200ms
========================================================================== */
html.tema-dia .glass-card,
html.tema-dia .module-card,
html.tema-dia .juris-item,
html.tema-dia .juris-destaque-card,
html.tema-dia .video-card,
html.tema-dia .materia-card,
html.tema-dia .contact-item,
html.tema-dia .modules-cta,
html.tema-dia .metric-card,
html.tema-dia .hero-visual-panel {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
html.tema-dia .glass-card:hover,
html.tema-dia .module-card:hover,
html.tema-dia .video-card:hover,
html.tema-dia .materia-card:hover {
background: #fff;
border-color: var(--color-border-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
html.tema-dia .juris-item:hover,
html.tema-dia .juris-destaque-card:hover {
background: #fff;
border-color: #e5e7eb;
box-shadow: var(--shadow-md);
transform: none; /* lista longa: sem "pulo" */
}
html.tema-dia .glass-card h3,
html.tema-dia .module-head h3,
html.tema-dia .video-info h3,
html.tema-dia .materia-body h3,
html.tema-dia .modules-cta h3 { color: var(--color-text); }
html.tema-dia .glass-card p,
html.tema-dia .module-desc,
html.tema-dia .video-info p,
html.tema-dia .materia-body p,
html.tema-dia .modules-cta p { color: var(--color-text-soft); font-weight: 400; }
/* fita colorida no topo do card de módulo — mais discreta no claro */
html.tema-dia .module-card::before { height: 3px; opacity: 1; }
html.tema-dia .module-card:hover {
border-color: color-mix(in srgb, var(--m, var(--color-primary)) 35%, #fff);
}
/* Ícone do card = badge sólido em gradiente (from-X-500 to-X-700) + ícone branco */
html.tema-dia .module-ico,
html.tema-dia .card-icon-wrap {
width: 48px;
height: 48px;
border: none;
border-radius: 10px;
color: #fff;
font-size: 1.25rem;
background: linear-gradient(
to bottom right,
var(--m, var(--color-primary)),
color-mix(in srgb, var(--m, var(--color-primary)) 55%, #000)
);
box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
html.tema-dia .card-icon-wrap { margin-bottom: 1.1rem; }
html.tema-dia .module-card:hover .module-ico {
box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--m, var(--color-primary)) 60%, transparent);
}
html.tema-dia .module-feats li,
html.tema-dia .module-impact { color: #374151; } /* gray-700 */
html.tema-dia .module-impact { border-top-color: #f3f4f6; }
html.tema-dia .module-tag { color: var(--m, var(--color-primary)); }
html.tema-dia .modules-cta {
background: linear-gradient(135deg, #eff6ff, #ecfdf5);
border-color: #dbeafe;
}
html.tema-dia .metric-value { color: var(--color-text); }
html.tema-dia .metric-label,
html.tema-dia .sys-features li { color: var(--color-text-soft); }
/* ==========================================================================
7. DESTAQUE SIAFIC / PILLS
========================================================================== */
html.tema-dia .siafic-highlight {
background: #fff;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
html.tema-dia .feature-pill {
position: relative;
overflow: hidden;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 10px;
box-shadow: var(--shadow-sm);
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
html.tema-dia .feature-pill:hover {
background: #fff;
border-color: color-mix(in srgb, var(--m, var(--color-accent)) 35%, #fff);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
html.tema-dia .feature-pill i { color: var(--m, var(--color-accent)); }
html.tema-dia .feature-pill span { color: var(--color-text); }
/* Fita de cor no topo — o mesmo recurso dos cards de módulo.
A cor de cada pílula vem por posição, sem precisar tocar no HTML. */
html.tema-dia .feature-pill::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--m, var(--color-accent)), transparent);
}
html.tema-dia .siafic-features .feature-pill:nth-child(1) { --m: #3b82f6; } /* base única */
html.tema-dia .siafic-features .feature-pill:nth-child(2) { --m: #06b6d4; } /* tempo real */
html.tema-dia .siafic-features .feature-pill:nth-child(3) { --m: #f59e0b; } /* auditoria */
html.tema-dia .siafic-features .feature-pill:nth-child(4) { --m: #a855f7; } /* IA — violeta,
destacada de propósito: é o diferencial, não mais um item da lista */
/* ==========================================================================
8. BOTÕES
Em fundo claro os "outline/legacy" invertem; os coloridos continuam.
========================================================================== */
html.tema-dia .btn-legacy,
html.tema-dia .btn-outline {
background: #fff;
color: var(--color-text);
border: 1px solid #e5e7eb;
backdrop-filter: none;
box-shadow: var(--shadow-sm);
}
html.tema-dia .btn-legacy:hover,
html.tema-dia .btn-outline:hover {
background: #fff;
border-color: #cbd5e1;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
html.tema-dia .btn-outline::after,
html.tema-dia .btn-legacy::after { background: none; }
/* dentro do header/hero (fundo escuro) voltam a ser claros */
html.tema-dia .main-header .btn-legacy,
html.tema-dia .main-header .btn-outline,
html.tema-dia .hero .btn-legacy,
html.tema-dia .hero .btn-outline {
background: rgba(255, 255, 255, .08);
color: #fff;
border-color: rgba(255, 255, 255, .25);
box-shadow: none;
}
html.tema-dia .main-header .btn-legacy:hover,
html.tema-dia .main-header .btn-outline:hover,
html.tema-dia .hero .btn-legacy:hover,
html.tema-dia .hero .btn-outline:hover {
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .45);
}
/* SIAFIC (verde) e Premium: sem pulsar/glow — o painel é sóbrio */
html.tema-dia .btn-premium {
animation: btn-aurora 6s ease infinite;
box-shadow: var(--shadow-md);
border-color: transparent;
}
html.tema-dia .btn-premium:hover { box-shadow: var(--shadow-xl); }
html.tema-dia .btn-acesso-siafic {
background: linear-gradient(to bottom right, #10b981, #047857);
border-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
animation: none;
}
html.tema-dia .btn-acesso-siafic:hover {
background: linear-gradient(to bottom right, #059669, #065f46);
box-shadow: var(--shadow-md);
filter: none;
}
html.tema-dia .btn-accent {
background: linear-gradient(to bottom right, #10b981, #047857);
box-shadow: var(--shadow-sm);
}
html.tema-dia .btn-accent:hover {
box-shadow: var(--shadow-md);
filter: none;
background: linear-gradient(to bottom right, #059669, #065f46);
}
/* ==========================================================================
9. FORMULÁRIOS E FILTROS
========================================================================== */
html.tema-dia .form-group label { color: #374151; font-weight: 600; }
html.tema-dia .form-input,
html.tema-dia .form-select {
background: #fff;
border: 1px solid #d1d5db; /* gray-300 */
color: var(--color-text);
border-radius: var(--radius-sm);
}
html.tema-dia .form-input::placeholder { color: var(--color-text-muted); }
html.tema-dia .form-input:focus,
html.tema-dia .form-select:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
html.tema-dia .form-select option { background: #fff; color: var(--color-text); }
html.tema-dia .field-required,
html.tema-dia .field-error,
html.tema-dia .juris-ajax-erro { color: #dc2626; }
html.tema-dia .form-input.input-error,
html.tema-dia .form-select.input-error {
border-color: #dc2626 !important;
box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
/* ==========================================================================
10. JURISPRUDÊNCIA
========================================================================== */
html.tema-dia .juris-destaques-label {
background: #f5f3ff; /* violet-50 */
border: 1px solid #ddd6fe;
border-bottom-color: transparent;
color: #6d28d9;
}
html.tema-dia .juris-destaques-scroll,
html.tema-dia .juris-destaques-cards {
background: #faf9ff;
border: 1px solid #ede9fe;
}
html.tema-dia .juris-destaque-card { border-color: #ede9fe; }
/* Fita de cor no topo, igual à dos cards de módulo e das pílulas.
Violeta nos destaques (identidade do bloco), azul nos resultados. */
html.tema-dia .juris-destaque-card,
html.tema-dia .juris-item {
position: relative;
overflow: hidden;
}
html.tema-dia .juris-destaque-card::before,
html.tema-dia .juris-item::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--m), transparent);
}
html.tema-dia .juris-destaque-card { --m: #a855f7; }
html.tema-dia .juris-item { --m: #3b82f6; }
/* ── Títulos e corpo dos cards de jurisprudência ──────────────────────────
O texto vem com color:var(--color-primary) embutido no atributo style de
juris_busca.php, o que pintava tudo de azul. Estilo inline só cede a
!important; aqui a hierarquia volta a ser a mesma dos outros cards:
título gray-800, corpo gray-500, metadados gray-400. */
html.tema-dia .juris-title {
color: var(--color-text) !important;
font-size: .95rem;
}
/* destaques: 2º div = tema (título) · 3º = processo/data · 4º = ementa */
html.tema-dia .juris-destaque-card > div:nth-of-type(2) { color: var(--color-text) !important; font-size: .95rem !important; }
html.tema-dia .juris-destaque-card > div:nth-of-type(3) { color: var(--color-text-muted) !important; }
html.tema-dia .juris-destaque-card > div:nth-of-type(4) { color: var(--color-text-soft) !important; }
/* resultados: a linha "Tema:" e a ementa */
html.tema-dia .juris-item > div[style],
html.tema-dia .juris-item > p[style] { color: var(--color-text-soft) !important; }
html.tema-dia .juris-resultado-header { color: var(--color-text-soft); }
html.tema-dia .juris-clear-btn,
html.tema-dia .juris-pg-btn {
background: #fff;
border: 1px solid #e5e7eb;
color: var(--color-text-soft);
box-shadow: var(--shadow-sm);
}
html.tema-dia .juris-clear-btn:hover { border-color: #dc2626; color: #dc2626; }
html.tema-dia .juris-pg-btn:hover { background: #f8fafc; color: var(--color-text); }
html.tema-dia .juris-pg-btn.ativo {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
html.tema-dia .tag {
background: #f1f5f9;
border: 1px solid #e2e8f0;
color: #475569;
}
html.tema-dia a.tag:hover {
background: #eff6ff;
border-color: #bfdbfe;
color: var(--color-primary-strong);
}
html.tema-dia .juris-results-scroll { scrollbar-color: #cbd5e1 #f1f5f9; }
html.tema-dia .juris-results-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
html.tema-dia .juris-results-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; }
html.tema-dia .juris-results-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* ==========================================================================
11. MATÉRIAS E VÍDEOS
========================================================================== */
/* Títulos dos cards de vídeo — vêm com color:var(--color-primary) no style=
inline (index.php). Texto preto como nos demais cards; o ícone fica com a
cor da marca do YouTube, que é o que a cor ali estava tentando sinalizar. */
html.tema-dia .video-info h3 { color: var(--color-text) !important; }
html.tema-dia .video-info h3 i { color: #cc0000; }
html.tema-dia .materias-subheader h3 { color: var(--color-text); }
html.tema-dia .materias-subheader p { color: var(--color-text-soft); font-weight: 400; }
html.tema-dia .materia-thumb { background: #f1f5f9; }
html.tema-dia .materia-date { color: var(--color-text-muted); }
html.tema-dia .materia-tag {
color: var(--color-primary-strong);
background: #eff6ff;
border-color: #bfdbfe;
}
html.tema-dia .materia-link:hover { color: var(--color-primary-strong); }
/* ==========================================================================
12. LINKS ESSENCIAIS (minicards)
========================================================================== */
/* Títulos das colunas ("Links Importantes", "Repasses", "Certidões e
Publicações") — também com cor no style= inline. Texto preto; cada ícone
guarda a cor que identificava a coluna. */
html.tema-dia #links .glass-card > h3 { color: var(--color-text) !important; }
html.tema-dia #links .grid-3 > .glass-card:nth-child(1) > h3 i { color: var(--color-primary); }
html.tema-dia #links .grid-3 > .glass-card:nth-child(2) > h3 i { color: var(--color-accent); }
html.tema-dia #links .grid-3 > .glass-card:nth-child(3) > h3 i { color: var(--color-secondary); }
html.tema-dia .link-minicard {
background: #fff;
border: 1px solid var(--color-border);
border-radius: 10px;
color: var(--color-text-soft);
box-shadow: var(--shadow-sm);
}
html.tema-dia .link-minicard:hover {
background: #fff;
border-color: #bfdbfe;
color: var(--color-primary-strong);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* ==========================================================================
13. CONTATO
========================================================================== */
html.tema-dia .contact-item i { color: var(--color-primary); }
html.tema-dia .contact-item div p { color: var(--color-text-soft); }
html.tema-dia .contact-item div strong { color: var(--color-text); }
/* ── Cards de rede social do bloco de contato ──────────────────────────────
Eram blocos de cor chapada com texto branco. Viram vidro: gradiente
translúcido na cor da marca, ícone na cor cheia e texto preto como nos
demais cards. A identidade de cor continua — o que sai é a saturação. */
html.tema-dia .contact-btn {
color: var(--color-text);
border: 1px solid rgba(15, 23, 42, .08);
border-radius: var(--radius-md);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-sm);
transition: background .25s ease, border-color .2s ease,
transform .2s ease, box-shadow .2s ease;
}
html.tema-dia .contact-btn > i,
html.tema-dia .contact-btn > .fsoc-x-icon { color: var(--brand); }
html.tema-dia .contact-btn-label small { color: var(--color-text-soft); opacity: 1; }
/* o brilho que varre passa a ser escuro — no claro, branco não aparece */
html.tema-dia .contact-btn::after {
background: linear-gradient(110deg, transparent 30%,
rgba(15, 23, 42, .06) 50%, transparent 70%);
}
html.tema-dia .contact-btn:hover {
filter: none;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
html.tema-dia .contact-btn-email {
--brand: #1e3a5f;
background: linear-gradient(120deg, rgba(37, 99, 168, .16), rgba(30, 58, 95, .06));
}
html.tema-dia .contact-btn-email:hover {
background: linear-gradient(120deg, rgba(37, 99, 168, .28), rgba(30, 58, 95, .12));
}
html.tema-dia .contact-btn-whatsapp {
--brand: #128c4e;
background: linear-gradient(120deg, rgba(37, 211, 102, .18), rgba(7, 94, 63, .06));
}
html.tema-dia .contact-btn-whatsapp:hover {
background: linear-gradient(120deg, rgba(37, 211, 102, .3), rgba(7, 94, 63, .12));
}
html.tema-dia .contact-btn-instagram {
--brand: #c13584;
background: linear-gradient(120deg, rgba(131, 58, 180, .16),
rgba(225, 48, 108, .13), rgba(247, 119, 55, .13));
}
html.tema-dia .contact-btn-instagram:hover {
background: linear-gradient(120deg, rgba(131, 58, 180, .28),
rgba(225, 48, 108, .24), rgba(247, 119, 55, .24));
}
html.tema-dia .contact-btn-youtube {
--brand: #cc0000;
background: linear-gradient(120deg, rgba(255, 0, 0, .15), rgba(122, 0, 0, .06));
}
html.tema-dia .contact-btn-youtube:hover {
background: linear-gradient(120deg, rgba(255, 0, 0, .26), rgba(122, 0, 0, .12));
}
html.tema-dia .contact-btn-x {
--brand: #111;
background: linear-gradient(120deg, rgba(17, 17, 17, .12), rgba(51, 51, 51, .05));
}
html.tema-dia .contact-btn-x:hover {
background: linear-gradient(120deg, rgba(17, 17, 17, .22), rgba(51, 51, 51, .1));
}
/* ==========================================================================
14. RODAPÉ — bg-blue-950 · text-blue-300 · border-t blue-800
========================================================================== */
html.tema-dia .main-footer {
background: var(--nav-950);
border-top: 1px solid var(--nav-800);
color: var(--nav-300);
margin-top: 4rem;
}
html.tema-dia .main-footer::before { display: none; }
html.tema-dia .footer-title { color: #fff; }
html.tema-dia .footer-brand .footer-tagline,
html.tema-dia .footer-links a,
html.tema-dia .footer-contact a,
html.tema-dia .footer-bottom p { color: var(--nav-300); }
html.tema-dia .footer-links a:hover { color: #fff; }
html.tema-dia .footer-contact a:hover { color: #fff; }
html.tema-dia .footer-contact a i { color: #6ee7b7; }
html.tema-dia .footer-bottom { border-top-color: var(--nav-800); }
html.tema-dia .footer-admin-link { color: var(--nav-300); }
html.tema-dia .footer-admin-link:hover { color: #fff; }
/* botões do rodapé ficam sobre azul-marinho → tratamento "escuro" */
html.tema-dia .main-footer .btn-legacy,
html.tema-dia .main-footer .btn-outline {
background: rgba(255, 255, 255, .08);
color: #fff;
border-color: rgba(255, 255, 255, .25);
box-shadow: none;
}
html.tema-dia .main-footer .btn-legacy:hover,
html.tema-dia .main-footer .btn-outline:hover {
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .45);
}
/* ==========================================================================
15. BARRA SOCIAL FLUTUANTE
========================================================================== */
/* Barra flutuante: vidro claro, ícone na cor da marca. O preenchimento sólido
fica só para o hover — as cores cheias vivem nos cards de contato. */
html.tema-dia .floating-social {
background: rgba(255, 255, 255, .72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(15, 23, 42, .07);
border-right: none;
box-shadow: -2px 4px 20px rgba(15, 23, 42, .12);
gap: 0;
padding: 3px 2px 3px 3px;
}
html.tema-dia .floating-social .fsoc-btn {
background: transparent;
border-radius: 8px;
transition: background .2s ease, color .2s ease;
}
html.tema-dia .floating-social .fsoc-btn::after { background: none; }
html.tema-dia .floating-social .fsoc-email { color: #1e3a5f !important; }
html.tema-dia .floating-social .fsoc-whatsapp { color: #128c4e !important; }
html.tema-dia .floating-social .fsoc-instagram { color: #c13584 !important; }
html.tema-dia .floating-social .fsoc-youtube { color: #cc0000 !important; }
html.tema-dia .floating-social .fsoc-x { color: #111 !important; }
/* O 𝕏 não é ícone de fonte: é um com color:#fff
próprio. Pintar só o pai não alcança — some no vidro claro. */
html.tema-dia .floating-social .fsoc-x .fsoc-x-icon { color: #111 !important; }
/* hover em gradiente translúcido, o mesmo tratamento dos cards de contato */
html.tema-dia .floating-social .fsoc-email:hover { background: linear-gradient(135deg, rgba(37, 99, 168, .2), rgba(30, 58, 95, .1)); }
html.tema-dia .floating-social .fsoc-whatsapp:hover { background: linear-gradient(135deg, rgba(37, 211, 102, .24), rgba(7, 94, 63, .1)); }
html.tema-dia .floating-social .fsoc-instagram:hover { background: linear-gradient(135deg, rgba(131, 58, 180, .2), rgba(225, 48, 108, .18), rgba(247, 119, 55, .18)); }
html.tema-dia .floating-social .fsoc-youtube:hover { background: linear-gradient(135deg, rgba(255, 0, 0, .2), rgba(122, 0, 0, .1)); }
html.tema-dia .floating-social .fsoc-x:hover { background: linear-gradient(135deg, rgba(17, 17, 17, .16), rgba(51, 51, 51, .08)); }
/* No rodapé (azul-marinho) o vidro é escuro, com ícone branco */
html.tema-dia .main-footer .fsoc-btn {
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .16);
color: #fff !important;
}
html.tema-dia .main-footer .fsoc-btn::after { background: none; }
html.tema-dia .main-footer .fsoc-email:hover { background: #1e3a5f; }
html.tema-dia .main-footer .fsoc-whatsapp:hover { background: #128c4e; }
html.tema-dia .main-footer .fsoc-instagram:hover { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
html.tema-dia .main-footer .fsoc-youtube:hover { background: #cc0000; }
html.tema-dia .main-footer .fsoc-x:hover { background: #111; }
/* Os cards de contato mantêm as cores cheias — pedido explícito */
/* ==========================================================================
16. ACESSIBILIDADE
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html.tema-dia .btn-premium,
html.tema-dia .btn-acesso-siafic { animation: none !important; }
}