/* ============================================================ DARK GLOBAL — Dark mode pro site público ------------------------------------------------------------ Cobre layouts NÃO-membro (front, captcha, interstitial, banner, error, auth) + tema SkyPrimeTheme (home, páginas públicas). Paleta consistente com member_dashboard.css (GitHub Dark / Linear). Carregado por: - plugins/SkyPrimeTheme/src/Template/Element/front_head.ctp - src/Template/Layout/front.ctp - src/Template/Layout/captcha.ctp - src/Template/Layout/go_banner.ctp - src/Template/Layout/go_interstitial.ctp - src/Template/Layout/error.ctp - src/Template/Layout/auth.ctp NÃO carregado por: actions.ctp (intencional — já é dark próprio), admin.ctp (fora de escopo), install.ctp, member.ctp (já tem dark). ============================================================ */ /* ---------- Design tokens ---------- Declarados em `.dark-mode` puro (não `body.dark-mode`) pra que valham tanto se a classe estiver no (preload script no head) quanto no (theme_toggle script no fim do body). */ .dark-mode { --bg-canvas: #0d1117; --bg-surface: #161b22; --bg-elevated: #1c2128; --bg-overlay: #21262d; --bg-sunken: #010409; --border-subtle: #21262d; --border-default: #30363d; --border-strong: #484f58; --text-primary: #e6edf3; --text-secondary: #adbac7; --text-muted: #768390; --text-disabled: #484f58; --accent: #4c8bf5; --accent-hover: #6ea3ff; --accent-muted: rgba(76, 139, 245, 0.15); --accent-strong: rgba(76, 139, 245, 0.35); --success: #3fb950; --success-bg: rgba(63, 185, 80, 0.15); --warning: #d29922; --warning-bg: rgba(210, 153, 34, 0.15); --danger: #f85149; --danger-bg: rgba(248, 81, 73, 0.15); --info: #58a6ff; --info-bg: rgba(88, 166, 255, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); } /* ============================================================ BASE — html, body, sections ------------------------------------------------------------ `html.dark-mode body` cobre o anti-flash: o preload script no adiciona `dark-mode` no , e o navegador já pinta o body escuro no primeiro paint — antes do theme_toggle.ctp aplicar no . `color-scheme: dark` instrui o BROWSER a renderizar form controls NATIVOS (checkbox, radio, scrollbar, input[type=date], select arrow, etc.) usando a paleta dark do sistema operacional. Sem isso, o checkbox de "Adicionar ações sociais" e similares ficavam brancos no meio de um fundo escuro. ============================================================ */ html.dark-mode, html.dark-mode body, body.dark-mode { background-color: var(--bg-canvas) !important; color: var(--text-secondary) !important; color-scheme: dark; } body.dark-mode section, body.dark-mode .section, body.dark-mode main { background-color: var(--bg-canvas) !important; color: var(--text-secondary) !important; } /* Tipografia base — não branco puro pra evitar fadiga */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: var(--text-primary) !important; } body.dark-mode p, body.dark-mode label { color: var(--text-secondary) !important; } body.dark-mode small, body.dark-mode .small, body.dark-mode .text-muted { color: var(--text-muted) !important; } body.dark-mode hr { border-color: var(--border-default) !important; } body.dark-mode code, body.dark-mode kbd { background-color: var(--bg-overlay) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle) !important; } body.dark-mode pre { background-color: var(--bg-sunken) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-default) !important; } body.dark-mode blockquote { border-left-color: var(--border-strong) !important; color: var(--text-secondary) !important; } /* ============================================================ LINKS ============================================================ */ body.dark-mode a { color: var(--accent); transition: color 0.15s; } body.dark-mode a:hover, body.dark-mode a:focus { color: var(--accent-hover); } /* ============================================================ NAVBAR (SkyPrimeTheme usa .navbar-default + .navbar-fixed-top) ============================================================ */ body.dark-mode .navbar, body.dark-mode .navbar-default, body.dark-mode .navbar-fixed-top, body.dark-mode .navbar-static-top { background-color: var(--bg-surface) !important; border-color: var(--border-subtle) !important; box-shadow: 0 1px 0 var(--border-subtle), 0 2px 8px rgba(0,0,0,0.3) !important; } body.dark-mode .navbar-default .navbar-brand, body.dark-mode .navbar-brand { color: var(--text-primary) !important; } body.dark-mode .navbar-default .navbar-brand:hover { color: var(--accent-hover) !important; } body.dark-mode .navbar-default .navbar-nav > li > a, body.dark-mode .navbar-nav > li > a { color: var(--text-secondary) !important; transition: color 0.15s, background 0.15s; } body.dark-mode .navbar-default .navbar-nav > li > a:hover, body.dark-mode .navbar-default .navbar-nav > li > a:focus, body.dark-mode .navbar-nav > li > a:hover, body.dark-mode .navbar-nav > li > a:focus { color: var(--text-primary) !important; background-color: var(--bg-elevated) !important; } body.dark-mode .navbar-default .navbar-nav > .active > a, body.dark-mode .navbar-default .navbar-nav > .active > a:hover, body.dark-mode .navbar-nav > .active > a { background-color: var(--bg-elevated) !important; color: var(--accent-hover) !important; } body.dark-mode .navbar-default .navbar-toggle { border-color: var(--border-default) !important; background-color: transparent !important; } body.dark-mode .navbar-default .navbar-toggle:hover, body.dark-mode .navbar-default .navbar-toggle:focus { background-color: var(--bg-elevated) !important; } body.dark-mode .navbar-default .navbar-toggle .icon-bar { background-color: var(--text-secondary) !important; } body.dark-mode .navbar-default .navbar-collapse, body.dark-mode .navbar-default .navbar-form { border-color: var(--border-subtle) !important; } /* Dropdowns no navbar */ body.dark-mode .dropdown-menu { background-color: var(--bg-overlay) !important; border: 1px solid var(--border-default) !important; box-shadow: var(--shadow-md) !important; } body.dark-mode .dropdown-menu > li > a { color: var(--text-secondary) !important; } body.dark-mode .dropdown-menu > li > a:hover, body.dark-mode .dropdown-menu > li > a:focus { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; } body.dark-mode .dropdown-menu .divider { background-color: var(--border-default) !important; } /* ============================================================ HERO / SHORTEN HEADER (SkyPrimeTheme home) Containers principais da home pública ============================================================ */ body.dark-mode header, body.dark-mode .shorten, body.dark-mode header.shorten, body.dark-mode .header-section, body.dark-mode .hero, body.dark-mode .hero-section { background-color: var(--bg-canvas) !important; background-image: none !important; /* tira backgrounds-img claros */ } body.dark-mode .shorten h1, body.dark-mode .shorten p, body.dark-mode .header-section h1, body.dark-mode .header-section p { color: var(--text-primary) !important; } /* Caixa central de encurtar link (.shorten-box, .add-link-result) */ body.dark-mode .shorten-box, body.dark-mode .shorten .add-link-result, body.dark-mode .add-link-result { background-color: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-md) !important; } /* ============================================================ FORMS / INPUTS (públicos: encurtar, login, captcha, busca) ============================================================ */ body.dark-mode .form-control, body.dark-mode .input-group-addon, body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="password"], body.dark-mode input[type="url"], body.dark-mode input[type="number"], body.dark-mode input[type="search"], body.dark-mode input[type="tel"], body.dark-mode input[type="date"], body.dark-mode textarea, body.dark-mode select { background-color: var(--bg-sunken) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; } body.dark-mode .form-control:focus, body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-muted) !important; outline: none !important; } body.dark-mode .form-control::placeholder, body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: var(--text-muted) !important; opacity: 1; } body.dark-mode .input-group-addon { background-color: var(--bg-elevated) !important; color: var(--text-secondary) !important; } body.dark-mode input[type="checkbox"], body.dark-mode input[type="radio"] { accent-color: var(--accent); } /* ============================================================ BOTÕES — variantes preservando semântica ============================================================ */ body.dark-mode .btn, body.dark-mode .btn-default { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: background 0.15s, border-color 0.15s, color 0.15s; } body.dark-mode .btn:hover, body.dark-mode .btn-default:hover { background-color: var(--bg-overlay) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; } body.dark-mode .btn-primary, body.dark-mode .stn-btn, body.dark-mode .btn-submit { background-color: var(--accent) !important; border: 1px solid var(--accent) !important; color: #ffffff !important; } body.dark-mode .btn-primary:hover, body.dark-mode .btn-primary:active, body.dark-mode .btn-primary:focus, body.dark-mode .stn-btn:hover, body.dark-mode .btn-submit:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: #ffffff !important; } body.dark-mode .btn-success { background-color: var(--success) !important; border-color: var(--success) !important; color: #ffffff !important; } body.dark-mode .btn-success:hover { background-color: #46c75a !important; border-color: #46c75a !important; } body.dark-mode .btn-danger { background-color: var(--danger) !important; border-color: var(--danger) !important; color: #ffffff !important; } body.dark-mode .btn-danger:hover { background-color: #ff6359 !important; border-color: #ff6359 !important; } body.dark-mode .btn-warning { background-color: var(--warning) !important; border-color: var(--warning) !important; color: #0d1117 !important; } body.dark-mode .btn-info { background-color: var(--info) !important; border-color: var(--info) !important; color: #ffffff !important; } body.dark-mode .btn[disabled], body.dark-mode .btn.disabled { opacity: 0.5; cursor: not-allowed; } /* Botão "Continue" típico de captcha/interstitial — mantemos verde pra preservar o sinal visual de "ação principal positiva" */ body.dark-mode .btn-continue, body.dark-mode #btn-main { background-color: var(--success) !important; border-color: var(--success) !important; color: #ffffff !important; } body.dark-mode .btn-continue:hover, body.dark-mode #btn-main:hover { background-color: #46c75a !important; } /* ============================================================ CARDS / BOXES ============================================================ */ body.dark-mode .card, body.dark-mode .panel, body.dark-mode .box, body.dark-mode .f-box { background-color: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-secondary) !important; box-shadow: var(--shadow-sm) !important; } body.dark-mode .card-header, body.dark-mode .panel-heading, body.dark-mode .box-header { background-color: var(--bg-elevated) !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; } body.dark-mode .card-body, body.dark-mode .panel-body, body.dark-mode .box-body { background-color: var(--bg-surface) !important; color: var(--text-secondary) !important; } body.dark-mode .card-footer, body.dark-mode .panel-footer, body.dark-mode .box-footer { background-color: var(--bg-elevated) !important; border-top: 1px solid var(--border-subtle) !important; } /* Feature boxes da home do SkyPrimeTheme (.f-box) */ body.dark-mode .f-box h3, body.dark-mode .f-box h4 { color: var(--text-primary) !important; } body.dark-mode .f-box p { color: var(--text-secondary) !important; } body.dark-mode .f-box .icon, body.dark-mode .f-box i { color: var(--accent) !important; } /* ============================================================ FOOTER ============================================================ */ body.dark-mode footer, body.dark-mode .footer, body.dark-mode .footer-section, body.dark-mode .main-footer { background-color: var(--bg-surface) !important; color: var(--text-muted) !important; border-top: 1px solid var(--border-subtle) !important; } body.dark-mode footer h3, body.dark-mode footer h4, body.dark-mode footer h5, body.dark-mode .footer h3, body.dark-mode .footer h4, body.dark-mode .footer h5 { color: var(--text-primary) !important; } body.dark-mode footer a, body.dark-mode .footer a, body.dark-mode .footer-links a { color: var(--text-secondary) !important; } body.dark-mode footer a:hover, body.dark-mode .footer a:hover, body.dark-mode .footer-links a:hover { color: var(--accent-hover) !important; } /* ============================================================ CAPTCHA / INTERSTITIAL / BANNER (páginas de espera/redirect) ============================================================ */ body.dark-mode.captcha-page, body.dark-mode.interstitial-page, body.dark-mode.banner-page, body.dark-mode .captcha-page, body.dark-mode .interstitial-page, body.dark-mode .banner-page { background-color: var(--bg-canvas) !important; color: var(--text-secondary) !important; } /* Box central com timer / botão continuar */ body.dark-mode .captcha-box, body.dark-mode .interstitial-box, body.dark-mode .banner-box, body.dark-mode .countdown, body.dark-mode .timer-box, body.dark-mode .continue-section { background-color: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-md) !important; } /* Cabeçalho top-nav usado em interstitial/banner */ body.dark-mode .layout-top-nav .main-header, body.dark-mode .layout-top-nav .navbar { background-color: var(--bg-surface) !important; } /* ============================================================ ARTICLE PAGE — quando o link redireciona pra artigo ============================================================ */ body.dark-mode .article-page, body.dark-mode article, body.dark-mode .article-content, body.dark-mode .article-body { background-color: var(--bg-canvas) !important; color: var(--text-secondary) !important; } body.dark-mode .article-title, body.dark-mode article h1, body.dark-mode article h2, body.dark-mode article h3 { color: var(--text-primary) !important; } body.dark-mode article p, body.dark-mode .article-body p { color: var(--text-secondary) !important; } /* ============================================================ AUTH (login / signup / recuperação) ============================================================ */ body.dark-mode .login-page, body.dark-mode .register-page, body.dark-mode .lockscreen { background-color: var(--bg-canvas) !important; } body.dark-mode .login-box-body, body.dark-mode .register-box-body, body.dark-mode .login-box, body.dark-mode .register-box { background-color: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-md) !important; } body.dark-mode .login-logo a, body.dark-mode .register-logo a { color: var(--text-primary) !important; } body.dark-mode .login-box-msg, body.dark-mode .register-box-msg { color: var(--text-secondary) !important; } /* ============================================================ ALERTS / FLASH MESSAGES ============================================================ */ body.dark-mode .alert { border: 1px solid var(--border-default); background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; } body.dark-mode .alert-success, body.dark-mode .message.success { background-color: var(--success-bg) !important; border-color: var(--success) !important; } body.dark-mode .alert-danger, body.dark-mode .alert-error, body.dark-mode .message.error { background-color: var(--danger-bg) !important; border-color: var(--danger) !important; } body.dark-mode .alert-warning, body.dark-mode .message.warning { background-color: var(--warning-bg) !important; border-color: var(--warning) !important; } body.dark-mode .alert-info, body.dark-mode .message.info { background-color: var(--info-bg) !important; border-color: var(--info) !important; } body.dark-mode .alert .close { color: var(--text-primary) !important; opacity: 0.6; text-shadow: none !important; } body.dark-mode .alert .close:hover { opacity: 1; } /* ============================================================ BADGES / LABELS ============================================================ */ body.dark-mode .badge { background-color: var(--bg-overlay) !important; color: var(--text-primary) !important; } body.dark-mode .label-primary { background-color: var(--accent) !important; color: #fff !important; } body.dark-mode .label-success { background-color: var(--success) !important; color: #fff !important; } body.dark-mode .label-danger { background-color: var(--danger) !important; color: #fff !important; } body.dark-mode .label-warning { background-color: var(--warning) !important; color: #0d1117 !important; } body.dark-mode .label-info { background-color: var(--info) !important; color: #fff !important; } body.dark-mode .label-default { background-color: var(--bg-overlay) !important; color: var(--text-secondary) !important; } /* ============================================================ ERROR PAGES (404/500) ============================================================ */ body.dark-mode .error-page, body.dark-mode .error-content { background-color: var(--bg-canvas) !important; color: var(--text-secondary) !important; } body.dark-mode .error-page h1, body.dark-mode .error-page h2, body.dark-mode .headline { color: var(--text-primary) !important; } /* ============================================================ TABLES (caso apareçam em páginas públicas) ============================================================ */ body.dark-mode .table { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; } body.dark-mode .table > thead > tr > th, body.dark-mode .table > thead > tr > td { background-color: var(--bg-elevated) !important; color: var(--text-secondary) !important; border-color: var(--border-default) !important; } body.dark-mode .table > tbody > tr > td, body.dark-mode .table > tbody > tr > th { border-color: var(--border-subtle) !important; } body.dark-mode .table-hover > tbody > tr:hover { background-color: var(--bg-overlay) !important; } /* ============================================================ SCROLLBAR ============================================================ */ body.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; } body.dark-mode ::-webkit-scrollbar-track { background: var(--bg-canvas); } body.dark-mode ::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 5px; border: 2px solid var(--bg-canvas); } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } body.dark-mode { scrollbar-color: var(--border-default) var(--bg-canvas); scrollbar-width: thin; } /* ============================================================ FOCUS RING acessível ============================================================ */ body.dark-mode *:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; } /* ============================================================ AJUSTES ESPECÍFICOS DO SKYPRIMETHEME (cores hardcoded que aparecem na home/footer/seções) ============================================================ */ /* Backgrounds claros usados em seções (.bg-light-gray) */ body.dark-mode .bg-light-gray, body.dark-mode .bg-light, body.dark-mode .bg-white { background-color: var(--bg-surface) !important; color: var(--text-secondary) !important; } /* Backgrounds escuros do tema (.bg-darkest-gray) — mantém escuro */ body.dark-mode .bg-darkest-gray, body.dark-mode .bg-dark { background-color: var(--bg-elevated) !important; } /* Inline-styled #fff backgrounds (super comum no AdLinkFly) */ body.dark-mode div[style*="background-color: #FFFFFF"], body.dark-mode div[style*="background-color: #ffffff"], body.dark-mode div[style*="background:#FFFFFF"], body.dark-mode div[style*="background:#ffffff"], body.dark-mode div[style*="background:#fff"], body.dark-mode div[style*="background: #fff"] { background-color: var(--bg-surface) !important; color: var(--text-secondary) !important; } body.dark-mode div[style*="color: #000"], body.dark-mode div[style*="color:#000"], body.dark-mode span[style*="color: #000"], body.dark-mode span[style*="color:#000"], body.dark-mode p[style*="color: #000"], body.dark-mode p[style*="color:#000"] { color: var(--text-primary) !important; } /* ============================================================ IMAGENS / LOGOS — leve dessaturação pra não destoarem ============================================================ */ body.dark-mode .navbar-brand img, body.dark-mode .logo img, body.dark-mode .footer-logo img { /* Não inverte logos coloridos — só suaviza brilho */ filter: brightness(0.95); } /* ============================================================ COPY-IT BUTTON (botão de copiar link curto) ============================================================ */ body.dark-mode .copy-it, body.dark-mode .input-group-addon.copy-it { background-color: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } body.dark-mode .copy-it:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } /* ============================================================ MODAL OVERLAY (compartilhado com captcha/interstitial) ============================================================ */ body.dark-mode .modal-content { background-color: var(--bg-overlay) !important; border: 1px solid var(--border-default) !important; color: var(--text-secondary) !important; } body.dark-mode .modal-header { background-color: var(--bg-elevated) !important; border-bottom: 1px solid var(--border-subtle) !important; } body.dark-mode .modal-header .close { color: var(--text-primary) !important; opacity: 0.7; text-shadow: none !important; } body.dark-mode .modal-footer { background-color: var(--bg-elevated) !important; border-top: 1px solid var(--border-subtle) !important; } body.dark-mode .modal-title { color: var(--text-primary) !important; } /* ============================================================ SKYPRIMETHEME — HOMEPAGE específica ------------------------------------------------------------ O tema usa cores cinza-escuro hardcoded (body color #515151, h* color #5a5a5a) que ficam ILEGÍVEIS sobre fundo escuro. Aqui forçamos os textos e backgrounds das seções específicas da home pra serem consistentes com o design system. ============================================================ */ /* Sections principais — fundo canvas escuro */ body.dark-mode .intro-section, body.dark-mode .steps-section, body.dark-mode .stats-section, body.dark-mode .different-section, body.dark-mode .cta-section, body.dark-mode .payment-section, body.dark-mode .reviews, body.dark-mode .reviews-section, body.dark-mode .home { background-color: var(--bg-canvas) !important; background-image: none !important; color: var(--text-secondary) !important; } /* Hero / Intro — título principal e subtítulo */ body.dark-mode .intro-heading, body.dark-mode .intro-lead-in { color: var(--text-primary) !important; } body.dark-mode .intro-text, body.dark-mode .intro-text p { color: var(--text-secondary) !important; } /* STEPS — "1. Crie uma conta" etc. — esse é o caso reportado */ body.dark-mode .steps-container { background-color: transparent !important; } body.dark-mode .step-box { background-color: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; border-radius: 10px; color: var(--text-secondary) !important; box-shadow: var(--shadow-sm) !important; padding: 24px; } body.dark-mode .step-title, body.dark-mode .step-box h1, body.dark-mode .step-box h2, body.dark-mode .step-box h3, body.dark-mode .step-box h4 { color: var(--text-primary) !important; } body.dark-mode .step-desc, body.dark-mode .step-box p { color: var(--text-secondary) !important; } /* Step icon containers */ body.dark-mode .step-img { filter: brightness(1.05); /* leve clareada pra SVGs/PNGs coloridos */ } /* ============================================================ DIFFERENT (seção "o que nos torna diferentes") ------------------------------------------------------------ CRÍTICO: o tema (styles.min.css linha 14538) define: .different-content { background: #fff; box-shadow: ...; } .different-content h2 { color: #333; } .different-content p { color: #444; } Sem cobrir o background do .different-content, ele fica branco e nossos textos (var(--text-secondary)) ficam invisíveis sobre branco. .different-block é o wrapper flex; .different-content é o card real. ============================================================ */ body.dark-mode .different-block, body.dark-mode .different-block.block-left, body.dark-mode .different-block.block-right { background-color: transparent !important; /* wrapper só faz layout */ color: var(--text-secondary) !important; } body.dark-mode .different-content { background-color: var(--bg-surface) !important; background: var(--bg-surface) !important; border-color: var(--border-default) !important; color: var(--text-secondary) !important; box-shadow: var(--shadow-md) !important; } body.dark-mode .different-img-box { background-color: var(--bg-surface) !important; background: var(--bg-surface) !important; border-color: var(--border-default) !important; } body.dark-mode .different-title, body.dark-mode .different-title span, body.dark-mode .different-content h1, body.dark-mode .different-content h2, body.dark-mode .different-content h3, body.dark-mode .different-content h4 { color: var(--text-primary) !important; } /* `span` interno em headings (ex: "Saques imediatos") fica destacado em accent — preserva intenção de "highlight" do tema. */ body.dark-mode .different-content h2 span, body.dark-mode .different-content h3 span, body.dark-mode .different-title span { color: var(--accent) !important; } body.dark-mode .different-content p, body.dark-mode .different-content li, body.dark-mode .different-content, body.dark-mode .different-content-box, body.dark-mode .different-content-box p, body.dark-mode .different-content-box h2 { color: var(--text-secondary) !important; } /* STATS (números/estatísticas) */ body.dark-mode .stat-box { background-color: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-secondary) !important; box-shadow: var(--shadow-sm) !important; } body.dark-mode .stat-box h1, body.dark-mode .stat-box h2, body.dark-mode .stat-box h3, body.dark-mode .stat-box .stat-number { color: var(--text-primary) !important; } body.dark-mode .stat-box p, body.dark-mode .stat-box .stat-label { color: var(--text-secondary) !important; } /* PAYMENT methods */ body.dark-mode .payment-card { background-color: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-secondary) !important; box-shadow: var(--shadow-sm) !important; } body.dark-mode .payment-card h1, body.dark-mode .payment-card h2, body.dark-mode .payment-card h3 { color: var(--text-primary) !important; } body.dark-mode .payment-card p { color: var(--text-secondary) !important; } /* REVIEWS / TESTIMONIALS (swiper carousel) */ body.dark-mode .review-item, body.dark-mode .swiper-slide.review-item { background-color: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-secondary) !important; border-radius: 10px; box-shadow: var(--shadow-sm) !important; } body.dark-mode .review-item p, body.dark-mode .review-item .review-text { color: var(--text-secondary) !important; } body.dark-mode .reviewer, body.dark-mode .reviewer-name { color: var(--text-primary) !important; } body.dark-mode .reviewer-title, body.dark-mode .reviewer-role { color: var(--text-muted) !important; } /* Swiper pagination bullets */ body.dark-mode .swiper-pagination-bullet { background-color: var(--border-strong) !important; opacity: 0.5; } body.dark-mode .swiper-pagination-bullet-active { background-color: var(--accent) !important; opacity: 1; } /* CTA — Call to Action */ body.dark-mode .cta-box { background-color: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-secondary) !important; box-shadow: var(--shadow-md) !important; } body.dark-mode .cta-text, body.dark-mode .cta-box h1, body.dark-mode .cta-box h2, body.dark-mode .cta-box h3 { color: var(--text-primary) !important; } body.dark-mode .cta-box p { color: var(--text-secondary) !important; } /* Botões customizados do tema */ body.dark-mode .home-btn, body.dark-mode .cr-btn { background-color: var(--accent) !important; color: #ffffff !important; border: 1px solid var(--accent) !important; } body.dark-mode .home-btn:hover, body.dark-mode .cr-btn:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } /* ============================================================ BOX-MAIN — usado em página de artigo e similares ------------------------------------------------------------ `.box-main` tem `background-color: #f5f5f5` hardcoded no front.css linha 720 — sobrescrevemos aqui. ============================================================ */ body.dark-mode .box-main { background-color: var(--bg-surface) !important; border-top: 3px solid var(--accent) !important; color: var(--text-secondary) !important; box-shadow: var(--shadow-sm) !important; } body.dark-mode .box-main .blog-item { color: var(--text-secondary) !important; } body.dark-mode .box-main .page-header, body.dark-mode .blog-item .page-header { border-bottom-color: var(--border-default) !important; } body.dark-mode .box-main .page-header h1, body.dark-mode .box-main .page-header h2, body.dark-mode .box-main .page-header h3, body.dark-mode .blog-item .page-header h1, body.dark-mode .blog-item .page-header h2, body.dark-mode .blog-item .page-header h3 { color: var(--text-primary) !important; } body.dark-mode .box-main .blog-content, body.dark-mode .blog-content { color: var(--text-secondary) !important; } body.dark-mode .blog-content p, body.dark-mode .blog-content li, body.dark-mode .blog-content span, body.dark-mode .blog-content div { color: var(--text-secondary) !important; } body.dark-mode .blog-content h1, body.dark-mode .blog-content h2, body.dark-mode .blog-content h3, body.dark-mode .blog-content h4, body.dark-mode .blog-content h5, body.dark-mode .blog-content h6 { color: var(--text-primary) !important; } body.dark-mode .blog-content a { color: var(--accent) !important; } body.dark-mode .blog-content a:hover { color: var(--accent-hover) !important; } /* Link details (usado em algumas páginas de view) */ body.dark-mode .box-main .link-details, body.dark-mode .link-details { color: var(--text-secondary) !important; } body.dark-mode .link-details .link-title { color: var(--text-primary) !important; } body.dark-mode .link-details .link-description { color: var(--text-secondary) !important; } /* Article continue section (botão de "continuar" no fim da página de artigo) */ body.dark-mode #article-continue-section { background-color: transparent !important; } /* ============================================================ TEXT-MUTED / SMALL — reforço (já tinha mas com prioridade maior aqui pra cobrir cascade do tema) ============================================================ */ body.dark-mode .text-muted, body.dark-mode small.text-muted, body.dark-mode p.text-muted { color: var(--text-muted) !important; } /* ============================================================ AUTH PAGES — login, signup, forgot-password (layout auth.ctp) ------------------------------------------------------------ O body tem classes `.hold-transition .login-page` (AdminLTE) que força `background: #d2d6de` (cinza claro). E o `.auth-box-body` do AdLinkFly tem `background: #fff` hardcoded em app.css linha 5850. ============================================================ */ /* Body do AdminLTE pra páginas de login */ body.dark-mode.login-page, body.dark-mode.register-page, body.dark-mode .login-page, body.dark-mode .register-page, html.dark-mode body.login-page, html.dark-mode body.register-page { background-color: var(--bg-canvas) !important; background-image: none !important; } /* Container externo da auth */ body.dark-mode .auth-page { background-color: var(--bg-canvas) !important; color: var(--text-secondary) !important; } body.dark-mode .auth-box { background-color: transparent !important; } /* Logo (texto do site no topo da box) */ body.dark-mode .auth-logo, body.dark-mode .auth-logo a { color: var(--text-primary) !important; } /* Título da auth box ("Bem-vindo de volta", "Criar conta", etc.) */ body.dark-mode .auth-box-title { background: var(--accent-muted) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-subtle) !important; } /* Corpo da box — onde estão os campos */ body.dark-mode .auth-box-body { background-color: var(--bg-surface) !important; background: var(--bg-surface) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-subtle) !important; box-shadow: var(--shadow-md) !important; } body.dark-mode .auth-box-body:hover { box-shadow: var(--shadow-lg) !important; } /* Labels e texto dentro da auth */ body.dark-mode .auth-box-body label, body.dark-mode .auth-box-body .help-block, body.dark-mode .auth-box-body p, body.dark-mode .auth-box-body a { color: var(--text-secondary) !important; } body.dark-mode .auth-box-body a { color: var(--accent) !important; } body.dark-mode .auth-box-body a:hover { color: var(--accent-hover) !important; } /* Checkboxes "Lembrar-me" e similares */ body.dark-mode .auth-box-body .checkbox label { color: var(--text-secondary) !important; } /* Captcha button (specialty pro login) */ body.dark-mode .btn-captcha { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; } body.dark-mode .btn-captcha:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } /* Social auth links (Login com Google/Facebook) */ body.dark-mode .social-auth-links { color: var(--text-muted) !important; } body.dark-mode .social-auth-links .btn { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; } body.dark-mode .social-auth-links .btn:hover { background-color: var(--bg-overlay) !important; border-color: var(--border-strong) !important; } /* Mensagens de erro/validação inline */ body.dark-mode .auth-box-body .error-message, body.dark-mode .auth-box-body .text-danger { color: var(--danger) !important; } /* Footer da auth page (copyright) */ body.dark-mode .auth-page + footer, body.dark-mode footer { background-color: var(--bg-surface) !important; color: var(--text-muted) !important; } /* ============================================================ FALLBACK CASCATA — garantir que NENHUM texto fique invisível ------------------------------------------------------------ Esta regra TEM peso menor (sem !important) e atua como "rede de segurança" pra qualquer elemento de texto que o tema base ainda não tenha sobrescrito explicitamente. ============================================================ */ body.dark-mode { color: var(--text-secondary); } body.dark-mode .container, body.dark-mode .row, body.dark-mode .col, body.dark-mode [class*="col-"] { color: inherit; }