/* ================================================================== assets/css/theme.css Tema claro/escuro do Nosso Futuro. - As variáveis `--nf-*` definem a paleta semântica. - O tema escuro é ativado pelo atributo `data-theme="dark"` no (aplicado por /assets/js/theme.js e por um script inline no ). - As regras de tema escuro usam o prefixo [data-theme="dark"], o que lhes dá especificidade suficiente para sobrescrever os CSS legados. ================================================================== */ /* ---------- Paleta: tema claro ---------- */ :root { --nf-bg: #ededed; --nf-surface: #ffffff; --nf-surface-2: #f7f7f7; --nf-surface-3: #f9f9f9; --nf-text: #0b2330; --nf-text-soft: #4b5a66; --nf-text-muted: #5a6b78; --nf-border: #dddddd; --nf-border-strong: #cccccc; --nf-heading: #0b4f7a; --nf-primary: #0b4f7a; --nf-primary-hover: #007bff; --nf-on-primary: #ffffff; --nf-input-bg: #ffffff; --nf-input-border: #e6eef3; --nf-input-placeholder: #8a99a6; --nf-table-head: #eeeeee; --nf-table-stripe: #f2f2f2; --nf-shadow: rgba(0, 0, 0, 0.1); --nf-shadow-strong: rgba(0, 0, 0, 0.18); --nf-danger: #dc3545; --nf-success: #28a745; --nf-hover-tint: #d4efc0; --nf-hover-tint-text: #1e7a33; --nf-focus-ring: #007bff; /* Corrige contraste de textos secundários legados (style.css usa --muted) */ --muted: #5a6b78; } /* ---------- Paleta: tema escuro ---------- */ [data-theme="dark"] { --nf-bg: #0f1720; --nf-surface: #1b2733; --nf-surface-2: #16212c; --nf-surface-3: #121c26; --nf-text: #e6edf3; --nf-text-soft: #c2ccd6; --nf-text-muted: #9fb0bf; --nf-border: #2a3947; --nf-border-strong: #3a4b5c; --nf-heading: #8ccbf0; --nf-primary: #1f6fa8; --nf-primary-hover: #2b82c0; --nf-on-primary: #ffffff; --nf-input-bg: #121c26; --nf-input-border: #2a3947; --nf-input-placeholder: #7d8f9e; --nf-table-head: #1b2733; --nf-table-stripe: #16212c; --nf-shadow: rgba(0, 0, 0, 0.45); --nf-shadow-strong: rgba(0, 0, 0, 0.6); --nf-danger: #ff6b6b; --nf-success: #4cd07d; --nf-hover-tint: #1f3a2a; --nf-hover-tint-text: #8ee6a1; --nf-focus-ring: #6cb6e6; /* Variável legada usada para textos secundários em style.css */ --muted: #9fb0bf; color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* ---------- Transições suaves ao trocar de tema ---------- */ body, .card, .auth-container, .modal-content, .modal-content-rf, .js-accordion-section, input, select, textarea, button, .tab-item, .search-form-container, .user-table th, .user-table td { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ================================================================== Botão de alternância de tema ================================================================== */ .theme-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--nf-border-strong); background: var(--nf-surface); color: var(--nf-text); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px var(--nf-shadow); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease; } .theme-toggle:hover { background: var(--nf-surface-2); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0) scale(0.96); } .theme-toggle:focus-visible { outline: 2px solid var(--nf-focus-ring); outline-offset: 2px; } /* Botão flutuante para páginas sem .site-header */ .theme-toggle--fixed { position: fixed; top: 12px; right: 12px; z-index: 5000; } @media (max-width: 480px) { .theme-toggle { width: 36px; height: 36px; font-size: 16px; } } /* ================================================================== Ajustes de contraste (aplicam-se aos dois temas) ================================================================== */ /* Aba ativa: azul da marca (contraste adequado sobre o fundo claro) */ .tab-item.active { color: var(--nf-heading); border-bottom-color: var(--nf-heading); } /* Botão dourado da área privativa: texto escuro para contraste adequado (branco sobre #d9b631 tinha contraste ~1.9:1) */ .btn-auth { color: #241d00; } .btn-auth:hover { color: #241d00; } /* Título "Área Privativa" (substitui o antigo style="color:brown" inline) */ .titulo-privativa { color: #a52a2a; } [data-theme="dark"] .titulo-privativa { color: #e8b07a; } /* Banner de cookies (usa estilos inline no HTML) */ [data-theme="dark"] #cookie-banner { background: var(--nf-surface) !important; color: var(--nf-text); box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6); } [data-theme="dark"] #cookie-banner strong { color: var(--nf-text) !important; } [data-theme="dark"] #cookie-banner p { color: var(--nf-text-muted) !important; } [data-theme="dark"] #cookie-banner button[onclick="recusarCookies()"] { color: var(--nf-text-muted) !important; border-color: var(--nf-border-strong) !important; } /* ================================================================== Overrides globais — tema escuro (style.css) ================================================================== */ [data-theme="dark"] body { background: var(--nf-bg); color: var(--nf-text); } /* Títulos e marca */ [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] .brand h1, [data-theme="dark"] .card h2, [data-theme="dark"] #user-avaliacao-modal h2 { color: var(--nf-heading); } [data-theme="dark"] .brand .slogan { color: var(--nf-text-muted); } [data-theme="dark"] .logo { filter: brightness(1.12) saturate(1.08); } /* Superfícies */ [data-theme="dark"] .video-wrap { background: var(--nf-surface); box-shadow: 0 8px 18px var(--nf-shadow); } [data-theme="dark"] .card { background-color: var(--nf-surface-2); box-shadow: 0 4px 6px var(--nf-shadow); } [data-theme="dark"] .card label { color: var(--nf-text-muted); } [data-theme="dark"] #form-register .card label { background: var(--nf-surface); color: var(--nf-text-soft); } [data-theme="dark"] #form-register .card label:hover { background: var(--nf-hover-tint); color: var(--nf-hover-tint-text); } /* Abas */ [data-theme="dark"] .tabs-nav { border-bottom-color: var(--nf-border-strong); } [data-theme="dark"] .tab-item { color: var(--nf-text-soft); } [data-theme="dark"] .tab-item.active { color: var(--nf-heading); border-bottom-color: var(--nf-heading); background-color: var(--nf-surface-3); } [data-theme="dark"] .scroll-arrow { background: var(--nf-surface); color: var(--nf-heading); border-bottom-color: var(--nf-border-strong); } [data-theme="dark"] .next-arrow { border-left-color: var(--nf-border-strong); } [data-theme="dark"] .prev-arrow { border-right-color: var(--nf-border-strong); } /* Questionário / termos */ [data-theme="dark"] #quiz-container .input-wrap label, [data-theme="dark"] #register-section-termo .input-wrap label { border-color: var(--nf-border-strong); color: var(--nf-text); } [data-theme="dark"] #quiz-container .input-wrap label:hover, [data-theme="dark"] #register-section-termo .input-wrap label:hover { background-color: var(--nf-hover-tint); color: var(--nf-hover-tint-text); } [data-theme="dark"] #termo-content-container ol li::marker { color: var(--nf-text); } /* Formulários / inputs */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--nf-input-bg); color: var(--nf-text); border-color: var(--nf-input-border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--nf-input-placeholder); opacity: 1; } [data-theme="dark"] .card input, [data-theme="dark"] .search-form-container input[type="text"], [data-theme="dark"] .search-form-container select { border-color: var(--nf-input-border); } [data-theme="dark"] .card input:focus, [data-theme="dark"] .search-form-container input[type="text"]:focus, [data-theme="dark"] .search-form-container select:focus { border-color: var(--nf-focus-ring); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .input-wrap .clear-input { color: var(--nf-text-muted); } [data-theme="dark"] .campo-cpf .toggleCpf, [data-theme="dark"] .campo-senha .toggleSenha, [data-theme="dark"] .campo-cpf .toggleCpfReg { color: var(--nf-text-muted); } /* Botões */ [data-theme="dark"] button { background: var(--nf-primary); color: var(--nf-on-primary); } [data-theme="dark"] button:hover:not(#btn-logout) { background-color: var(--nf-primary-hover); } [data-theme="dark"] button.link { background: transparent; color: var(--nf-heading); } /* Mensagens */ [data-theme="dark"] .error { color: var(--nf-danger); } /* Barra de busca */ [data-theme="dark"] .search-form-container { background-color: var(--nf-surface-3); border-color: var(--nf-border); } [data-theme="dark"] .search-form-container label { color: var(--nf-text-soft); } /* Acordeões */ [data-theme="dark"] .js-accordion-section { background-color: var(--nf-surface-2); box-shadow: 0 4px 6px var(--nf-shadow); } [data-theme="dark"] .js-accordion-section h3:hover, [data-theme="dark"] .js-accordion-section h3.active-accordion { background: #1e3a4a; } [data-theme="dark"] .accordion-title { border-bottom-color: var(--nf-border); } /* Tabelas */ [data-theme="dark"] .user-table th, [data-theme="dark"] .user-table td { border-color: var(--nf-border); } [data-theme="dark"] .user-table th { background-color: var(--nf-table-head); color: var(--nf-text); } [data-theme="dark"] .user-table tr:nth-child(even) { background-color: var(--nf-table-stripe); } [data-theme="dark"] .user-table .situacao-select { background-color: var(--nf-input-bg); color: var(--nf-text); border-color: var(--nf-border-strong); } [data-theme="dark"] .user-details-link { color: var(--nf-heading); } /* Modais */ [data-theme="dark"] .modal-content, [data-theme="dark"] #confirm-modal .modal-content { background-color: var(--nf-surface); color: var(--nf-text); box-shadow: 0 4px 10px var(--nf-shadow-strong); } [data-theme="dark"] .modal-header { border-bottom-color: var(--nf-border-strong); } [data-theme="dark"] .modal-close-btn { color: var(--nf-text-muted); } /* Mantém modais de vídeo/slides escuros como já eram */ [data-theme="dark"] #video-modal .modal-content, [data-theme="dark"] #slide-modal .modal-content { background-color: #000; } /* Rolagem */ [data-theme="dark"] { scrollbar-color: #3a4b5c #0f1720; } /* ================================================================== Overrides — página privativa (home.css) ================================================================== */ [data-theme="dark"] .auth-container { background: var(--nf-surface-2); box-shadow: 0 10px 25px var(--nf-shadow-strong); color: var(--nf-text); } [data-theme="dark"] .auth-container h2 { color: var(--nf-heading); } [data-theme="dark"] .auth-container p { color: var(--nf-text-muted); } [data-theme="dark"] .auth-input-group label { color: var(--nf-text-soft); } [data-theme="dark"] .auth-input-group input { background-color: var(--nf-input-bg); color: var(--nf-text); border-color: var(--nf-input-border); } [data-theme="dark"] .req-list, [data-theme="dark"] .req-list li { color: var(--nf-text-muted); } [data-theme="dark"] .toggle-password { color: var(--nf-text-muted); } /* ================================================================== Overrides — comissões (usuario.css) ================================================================== */ [data-theme="dark"] .comissoes-table th, [data-theme="dark"] .comissoes-table td { border-bottom-color: var(--nf-border); } [data-theme="dark"] .comissoes-table th { background: var(--nf-table-head); color: var(--nf-text); } [data-theme="dark"] .modal-user-content { background: var(--nf-surface); color: var(--nf-text); } /* ================================================================== Overrides — ebook/pagamento (ebook.css) ================================================================== */ [data-theme="dark"] #preview-container { background: var(--nf-surface-3); border-color: var(--nf-border-strong); color: var(--nf-text); } [data-theme="dark"] .active-book-display { box-shadow: 0 10px 25px var(--nf-shadow-strong); } /* ================================================================== Overrides — painel admin (gestaoPedidos.css) ================================================================== */ [data-theme="dark"] select { background-color: var(--nf-input-bg); color: var(--nf-text); border-color: var(--nf-border-strong); } [data-theme="dark"] .btn-load-more { background: var(--nf-surface-3); border-color: var(--nf-border-strong); color: var(--nf-text); } [data-theme="dark"] .btn-load-more:hover { background: #22303d; } [data-theme="dark"] .input-wrap input { background-color: var(--nf-input-bg); color: var(--nf-text); border-color: var(--nf-border-strong); } [data-theme="dark"] .viewer-container { background: #0b131b; } [data-theme="dark"] .img-wrapper img { border-color: var(--nf-border); } [data-theme="dark"] .tab-container { border-bottom-color: var(--nf-border); } [data-theme="dark"] .text-small, [data-theme="dark"] .img-counter { color: var(--nf-text-muted); } [data-theme="dark"] mark.hl { background: #6b5d00; color: #fff8c5; } /* ================================================================== Overrides — módulo ebook dinâmico (index.css) ================================================================== */ [data-theme="dark"] .container { background: var(--nf-surface); color: var(--nf-text); } [data-theme="dark"] .container h2 { color: var(--nf-text); } [data-theme="dark"] .container label { color: var(--nf-text-muted); } [data-theme="dark"] .container input, [data-theme="dark"] .container select { background-color: var(--nf-input-bg); color: var(--nf-text); border-color: var(--nf-input-border); } [data-theme="dark"] .container select { background-color: var(--nf-surface-3); color: var(--nf-text); } [data-theme="dark"] .container .modal-content { background: var(--nf-surface); color: var(--nf-text); } [data-theme="dark"] .modo-destaque { background-color: #1f2a1a !important; } /* O modal fica fora de .container em index.php */ [data-theme="dark"] .modal-content { background: var(--nf-surface); color: var(--nf-text); box-shadow: 0 10px 25px var(--nf-shadow-strong); } [data-theme="dark"] .modal-actions { background-color: var(--nf-surface); color: var(--nf-text); } /* index.css força background:#fff no :focus; mantém o campo escuro */ [data-theme="dark"] .container input:focus, [data-theme="dark"] .container select:focus { background-color: var(--nf-input-bg); border-color: var(--nf-focus-ring); } /* Preserva o significado das cores dos botões com contraste adequado */ [data-theme="dark"] .container .btn-preview { background-color: var(--nf-surface-3); color: var(--nf-text); border: 1px solid var(--nf-border-strong); } [data-theme="dark"] .container .btn-preview:hover { background-color: var(--nf-surface-2) !important; } [data-theme="dark"] .container .btn-submit, [data-theme="dark"] .container .btn-next, [data-theme="dark"] .container .btn-close { color: #ffffff; } [data-theme="dark"] .container .btn-submit { background-color: #157347; } [data-theme="dark"] .container .btn-submit:hover { background-color: #1a8a55 !important; } [data-theme="dark"] .container .btn-next { background-color: var(--nf-primary); } [data-theme="dark"] .container .btn-next:hover { background-color: var(--nf-primary-hover) !important; } [data-theme="dark"] .container .btn-close { background-color: #b02a37; } [data-theme="dark"] .container .btn-close:hover { background-color: #c0394a !important; } /* Dicas de senha (index.css usa variáveis locais, não as --nf-*) */ [data-theme="dark"] .valid { color: var(--nf-success); } [data-theme="dark"] .invalid { color: var(--nf-danger); } [data-theme="dark"] .container { box-shadow: 0 10px 25px var(--nf-shadow-strong); } /* ================================================================== Responsividade do botão de tema no cabeçalho ================================================================== */ @media (max-width: 600px) { .site-header { flex-wrap: wrap; } .site-header .theme-toggle { order: 3; margin-left: auto; } }