/* ========================================================================= vnv-dark.css — Camada de Dark Mode (estrutura TOTALMENTE separada) ------------------------------------------------------------------------- - Carregada em TODA página (light e dark), inclusive no portal público que não puxa o app.css do Vite. Em light mode este arquivo só fornece o visual do alternador; tudo que muda cor está escopado sob `html.dark`. - Ativação: o ShareTheme middleware injeta class="dark" no a partir do cookie `theme` (render server-side → sem flash/FOUC, sem JS inline). - Paleta: CARVÃO NEUTRO (quase-preto). Cinza puro R=G=B — sem viés de marrom e sem viés de azul. Fundo profundo (#0d0d0d), alto contraste. - Mecanismo: as utilities do Tailwind v4 (app.css) referenciam var(--color-brand-*) etc.; redefinindo essas variáveis sob html.dark, a UI inteira vira sem tocar templates. Para o bundle estático do portal (cores hex inline), há overrides explícitos de .bg-white / slate-* / etc. - Regras fora de @layer: vencem as utilities (que ficam em camadas) por ordem de cascata de layers, além da especificidade html.dark + classe. ========================================================================= */ /* ========================================================================= 1. ALTERNADOR SOL/LUA (sempre ativo — light e dark) ========================================================================= */ .vnv-theme-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.45rem; border: 0; border-radius: 9999px; background: transparent; cursor: pointer; line-height: 0; color: #4b5563; transition: background-color 0.15s ease; } .vnv-theme-toggle:hover { background-color: rgb(0 0 0 / 0.05); } html.dark .vnv-theme-toggle:hover { background-color: rgb(255 255 255 / 0.07); } .vnv-theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .vnv-theme-toggle__icon { display: inline-flex; width: 1rem; height: 1rem; flex: none; transition: color 0.2s ease, opacity 0.2s ease; } .vnv-theme-toggle__icon svg { width: 100%; height: 100%; } /* Light: sol em destaque, lua apagada. */ .vnv-theme-toggle__sun { color: #f59e0b; opacity: 1; } .vnv-theme-toggle__moon { color: #9ca3af; opacity: 0.45; } /* Dark: lua em destaque (prata neutra), sol apagado. */ html.dark .vnv-theme-toggle__sun { color: #6b6b6b; opacity: 0.45; } html.dark .vnv-theme-toggle__moon { color: #e5e5e5; opacity: 1; } /* Trilho + botão (knob) que desliza para a direita no dark. */ .vnv-theme-toggle__track { position: relative; width: 2.1rem; height: 1.15rem; flex: none; border-radius: 9999px; background-color: #e5e7eb; transition: background-color 0.2s ease; } html.dark .vnv-theme-toggle__track { background-color: #3a3a3a; } .vnv-theme-toggle__knob { position: absolute; top: 50%; left: 0.15rem; width: 0.85rem; height: 0.85rem; transform: translateY(-50%); border-radius: 9999px; background-color: #ffffff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); transition: left 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } html.dark .vnv-theme-toggle__knob { left: calc(100% - 0.15rem); transform: translate(-100%, -50%); background-color: #fafafa; } /* ========================================================================= 2. TOKENS DARK — redefinição das variáveis @theme (rampa carvão neutro) Light (cinza-frio) é INVERTIDO: índice baixo = superfície escura, índice alto = texto claro. Cinza puro R=G=B, nada de marrom nem azul. ========================================================================= */ html.dark { color-scheme: dark; /* Rampa brand — carvão neutro (invertida, R=G=B) */ --color-brand-50: #171717; /* superfície base (cards, hovers claros) */ --color-brand-100: #1f1f1f; /* superfície elevada / btn secundário */ --color-brand-200: #262626; /* bordas, divisores */ --color-brand-300: #404040; /* bordas em hover / disabled */ --color-brand-400: #737373; /* ícones/placeholder apagados */ --color-brand-500: #9e9e9e; /* texto apagado / secundário */ --color-brand-600: #b5b5b5; /* texto secundário */ --color-brand-700: #c4c4c4; /* texto de apoio / anel de foco */ --color-brand-800: #d2d2d2; /* texto forte */ --color-brand-900: #dedede; /* texto principal (cinza claro suave, sem glow de branco puro) */ --color-brand-950: #f0f0f0; /* contraste máximo / btn primário (bg) */ /* Acentos ajustados para fundo escuro (mantêm bg de botão sólido). */ --color-success-50: #112a1f; --color-success-500: #34d399; --color-success-600: #10b981; --color-success-700: #047857; --color-success-800: #065f46; --color-warning-50: #2a2110; --color-warning-400: #fbbf24; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-danger-50: #2a1414; --color-danger-500: #f87171; --color-danger-600: #dc2626; --color-danger-700: #b91c1c; --color-info-50: #11203a; --color-info-500: #60a5fa; --color-info-600: #3b82f6; /* Sombras mais densas no escuro (preto puro some sobre fundo escuro). */ --shadow-card: 0 1px 2px rgb(0 0 0 / 0.5), 0 4px 12px rgb(0 0 0 / 0.45); --shadow-lift: 0 10px 24px rgb(0 0 0 / 0.55); --shadow-popup: 0 8px 32px rgb(0 0 0 / 0.6); --shadow-button-hover: 0 4px 12px rgb(0 0 0 / 0.5); } /* ========================================================================= 3. PÁGINA + SUPERFÍCIES LITERAIS (bg-white, slate-*, gray-*) Cobre tanto o app.css (Vite) quanto o bundle estático do portal. ========================================================================= */ /* Fundo da página: 1 nível mais escuro que as superfícies. */ html.dark body { background-color: #0d0d0d; color: var(--color-brand-900); } /* bg-white → superfície escura (cards, navs, dropdowns, inputs). */ html.dark .bg-white { background-color: var(--color-brand-50) !important; } html.dark .bg-white\/95, html.dark .bg-white\/90, html.dark .bg-white\/80 { background-color: rgb(13 13 13 / 0.95) !important; } /* slate-* (portal público + checkout — bundle estático com hex inline). COBERTURA EXAUSTIVA da escala: slate é a paleta MAIS azulada do Tailwind (B>G>R em todos os tons). Qualquer tom não-mapeado renderiza azulado no carvão neutro. O ofensor crônico era text-slate-300 (#cbd5e1, claro e azulado, usado como texto sobre superfícies escuras → ~120× por página). Mapeamos TODA a escala (50→950) para a rampa cinza R=G=B, preservando a ordem de luminosidade. */ /* TEXTO — tons escuros (700-950) = texto principal → claro forte. */ html.dark .text-slate-950, html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700 { color: var(--color-brand-900) !important; } /* TEXTO — tons médios (400-600) = muted/secundário. */ html.dark .text-slate-600, html.dark .text-slate-500, html.dark .text-slate-400 { color: var(--color-brand-500) !important; } /* TEXTO — tons claros (50-300) = texto claro sobre superfície escura (heros, cards escuros). NÃO podem virar azul nem sumir: cinza claro neutro. */ html.dark .text-slate-300, html.dark .text-slate-200 { color: var(--color-brand-700) !important; } html.dark .text-slate-100, html.dark .text-slate-50 { color: var(--color-brand-800) !important; } /* SUPERFÍCIES — bg claros → superfície escura elevada (por luminosidade). */ html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: var(--color-brand-100) !important; } html.dark .bg-slate-200, html.dark .bg-slate-300 { background-color: var(--color-brand-200) !important; } html.dark .bg-slate-400, html.dark .bg-slate-500, html.dark .bg-slate-600 { background-color: var(--color-brand-300) !important; } /* BORDAS — divisores e contornos slate → cinza neutro. */ html.dark .border-slate-50, html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300 { border-color: var(--color-brand-200) !important; } html.dark .border-slate-400, html.dark .border-slate-500 { border-color: var(--color-brand-300) !important; } /* DIVISORES (divide-slate-*): o utilitário pinta a borda entre filhos. */ html.dark [class*="divide-slate-"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-brand-200) !important; } /* HOVERS slate. */ html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover, html.dark .hover\:bg-slate-200:hover { background-color: var(--color-brand-100) !important; } html.dark .hover\:text-slate-900:hover, html.dark .hover\:text-slate-800:hover, html.dark .hover\:text-slate-700:hover { color: var(--color-brand-900) !important; } /* gray-* literais (cupons / utilitários ad-hoc). */ html.dark .bg-gray-50 { background-color: var(--color-brand-50) !important; } html.dark .bg-gray-100 { background-color: var(--color-brand-100) !important; } html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700 { color: var(--color-brand-900); } html.dark .text-gray-600, html.dark .text-gray-500, html.dark .text-gray-400 { color: var(--color-brand-500); } /* ========================================================================= 4. BOTÕES bg-gray-* LITERAIS (admin: catálogo/cupons/planos) — bg escuro vira CLARO (rampa invertida): texto/ícone branco precisa virar escuro. bg-brand-950/900 NÃO entram aqui: as seções 9 (botões com .text-white) e 10 (contêineres sem .text-white) os tratam separadamente, evitando o conflito de tornar contêineres escuros em branco. ========================================================================= */ html.dark .bg-gray-950, html.dark .bg-gray-900 { color: #141414; } html.dark .bg-gray-950 { background-color: var(--color-brand-950); } html.dark .bg-gray-900 { background-color: var(--color-brand-900); } html.dark .bg-gray-950 svg, html.dark .bg-gray-900 svg { color: #141414; stroke: #141414; } /* ========================================================================= 5. TEXTO SEMÂNTICO (badges/alertas *-50 com texto *-600/700) Os vars *-600/700 ficam reservados para bg/hover de botão; o texto semântico sobre superfície escura precisa de tom claro. ========================================================================= */ html.dark .text-success-600, html.dark .text-success-700, html.dark .text-success-800 { color: #6ee7b7; } html.dark .text-danger-600, html.dark .text-danger-700 { color: #fca5a5; } html.dark .text-warning-600, html.dark .text-warning-700 { color: #fcd34d; } html.dark .text-info-600, html.dark .text-info-700 { color: #93c5fd; } /* ========================================================================= 6. AJUSTES PONTUAIS DE COMPONENTES COM COR LITERAL (#fff) no app.css ========================================================================= */ /* Blocos de código: manter escuros de propósito (não inverter p/ claro). */ html.dark .prose-editorial pre, html.dark .rich-editor-content pre { background-color: #0a0a0a; color: var(--color-brand-800); } /* Editor de seções de destino (admin PA GEO) — usava #fff literal. */ html.dark .geo-section { background-color: var(--color-brand-50); border-color: var(--color-brand-200); } html.dark .geo-section-icon { background-color: var(--color-brand-100); color: var(--color-brand-700); } html.dark .geo-section-badge { color: #141414; } html.dark .geo-month-input, html.dark .geo-matrix-input { background-color: var(--color-brand-50); color: var(--color-brand-900); border-color: var(--color-brand-200); } /* Botões sociais (login/signup) — usavam #fff literal. */ html.dark .social-btn { background-color: var(--color-brand-50); border-color: var(--color-brand-300); color: var(--color-brand-900); } html.dark .social-btn:hover { background-color: var(--color-brand-100); } /* ========================================================================= 7. DIVERSOS ========================================================================= */ html.dark *:focus-visible { outline-color: var(--color-brand-700); } html.dark ::placeholder { color: var(--color-brand-500); opacity: 1; } /* Inputs nativos / select com aparência herdada do SO. */ html.dark input, html.dark textarea, html.dark select { color-scheme: dark; } /* ========================================================================= 8. LOGOTIPOS — o logo é um PNG raster preto embutido num SVG (não tem currentColor para herdar). No fundo escuro ele some; invertido vira branco. Atinge todas as variantes (.vnv-logo PNG, header/drawer SVG, footer dessaturado, print). brightness(0) zera p/ preto puro e invert(1) → branco; assim independe da cor original. ========================================================================= */ html.dark .vnv-logo, html.dark img[src*="/logo.svg"], html.dark img[src*="/logo/logo.svg"], html.dark img[src*="/logo/logo.png"], html.dark img[src*="/logo/logo.webp"] { filter: brightness(0) invert(1); } /* Logos decorativos já dessaturados (grayscale opacity-*) ganham só o invert p/ aparecerem suaves no escuro, mantendo a opacidade baixa. */ html.dark img.grayscale[src*="/logo"] { filter: brightness(0) invert(1) opacity(0.5); } /* ========================================================================= 9. BOTÕES PREENCHIDOS DE MARCA — no light são ESCUROS (brand é a paleta cinza: 950=#030712 … 500=#6b7280) com texto branco. A rampa invertida os tornaria cinza-claro mantendo o texto branco → ilegível. Solução: fundo CLARO sólido + texto/ícone escuros. Identificamos BOTÃO pela co-ocorrência de bg + `.text-white` NO MESMO elemento (contêineres como avatar/drawer põem o text-white nos FILHOS → tratados na seção 10). ========================================================================= */ html.dark .bg-brand-500.text-white, html.dark .bg-brand-600.text-white, html.dark .bg-brand-700.text-white, html.dark .bg-brand-800.text-white, html.dark .bg-brand-900.text-white, html.dark .bg-brand-950.text-white, html.dark .bg-gray-900.text-white, html.dark .bg-gray-950.text-white { background-color: var(--color-brand-900); /* #fafafa — destaca no escuro */ color: #141414; } html.dark .bg-brand-500.text-white svg, html.dark .bg-brand-600.text-white svg, html.dark .bg-brand-700.text-white svg, html.dark .bg-brand-800.text-white svg, html.dark .bg-brand-900.text-white svg, html.dark .bg-brand-950.text-white svg, html.dark .bg-gray-900.text-white svg, html.dark .bg-gray-950.text-white svg { color: #141414; stroke: #141414; } /* Hover dos botões preenchidos (mantém escuro o texto, clareando levemente). */ html.dark .bg-brand-950.text-white:hover, html.dark .bg-brand-900.text-white:hover, html.dark .hover\:bg-brand-800:hover, html.dark .hover\:bg-brand-700:hover, html.dark .hover\:bg-gray-800:hover { background-color: var(--color-brand-800); /* #e5e5e5 */ color: #141414; } /* Descendentes com .text-white dentro de um botão invertido (ex.: o total e o ícone do botão de carrinho do header — bg-gray-950 com ): o fundo virou claro, então o texto branco filho precisa escurecer também. */ html.dark .bg-gray-950 .text-white, html.dark .bg-gray-900 .text-white, html.dark .bg-brand-950 .text-white, html.dark .bg-brand-900 .text-white { color: #141414; } /* Barras de progresso / pontos / indicadores preenchidos (bg-brand-* SEM texto): a rampa já os deixa claros sobre trilho escuro — só reforça contraste do trilho/fundo. Nenhuma ação extra necessária além da rampa. */ /* ========================================================================= 10. CONTÊINERES ESCUROS DE MARCA — avatar, cabeçalho de drawer, tooltip, seções com bg-brand-900/950 cujo texto claro vive nos FILHOS. A rampa os tornaria brancos (texto-branco-em-branco). Mantemos ESCUROS (superfície elevada). O :not(.text-white) os separa dos botões da seção 9. ========================================================================= */ html.dark .bg-brand-950:not(.text-white), html.dark .bg-brand-900:not(.text-white) { background-color: var(--color-brand-200); /* #262626 elevado */ } /* ========================================================================= 11. ÍCONES E TEXTO APAGADOS — text-brand-400 (#737373 no dark) é fraco demais para ícones de navegação/ação; sobe um degrau. text-gray-* já tratado na seção 3. ========================================================================= */ html.dark .text-brand-400 { color: var(--color-brand-500); /* #9e9e9e — mais legível */ } /* ========================================================================= 12. GRADIENTES E PLACEHOLDERS CLAROS — from/to-slate-*/gray-*/white viram blocos claros gritantes (placeholders de imagem, heros sutis). Trocamos por superfície escura sólida. ========================================================================= */ html.dark .from-slate-50, html.dark .from-slate-100, html.dark .from-slate-200, html.dark .from-gray-50, html.dark .from-gray-100, html.dark .from-white { background-image: none !important; background-color: var(--color-brand-100) !important; } /* ========================================================================= 13. ANÉIS / OVERLAYS PRETOS TRANSLÚCIDOS — ring-black/5 etc. somem no escuro; viram branco translúcido. ========================================================================= */ html.dark .ring-black\/5 { --tw-ring-color: rgb(255 255 255 / 0.08); } html.dark .ring-black\/10 { --tw-ring-color: rgb(255 255 255 / 0.12); } /* ========================================================================= 14. CLASSES CUSTOM DO BUNDLE DO TEMA (mega-menu/drawer mobile, depoimentos) O bundle.css minificado do tema usa cores HEX literais em classes próprias (não-utilitárias) que escapam dos overrides por var/classe das seções acima. !important porque o bundle é minificado e pode ter alta especificidade. Dois sintomas: texto escuro (#0f172a/#1e293b) que some no fundo, e realces azuis (#3b82f6) que destoam do carvão neutro. ========================================================================= */ /* 14a. Textos escuros que somem no fundo (#0d0d0d) → claros. */ html.dark .mobile-menu-logo, html.dark .mobile-menu-category-icon, html.dark .mobile-menu-category-title, html.dark .mobile-menu-subpanel-title, html.dark .mobile-menu-cta-secondary, html.dark .testimonial-name { color: var(--color-brand-900) !important; } html.dark .mobile-menu-item { color: var(--color-brand-800) !important; } /* 14b. Setas/realces azuis (#3b82f6) e logo SVG → cinza claro neutro. */ html.dark .mobile-menu-category-arrow, html.dark .mobile-menu-item-arrow { color: var(--color-brand-600) !important; } html.dark .mobile-menu-logo svg { color: var(--color-brand-900) !important; } /* 14c. Utilitárias de texto azul (badges/realces no conteúdo) → tom claro neutro. O carvão neutro não admite viés de azul (decisão do Pablo). */ html.dark .text-blue-300, html.dark .text-blue-600, html.dark .text-blue-700 { color: var(--color-brand-900) !important; } /* 14d. Superfícies de marca literais ainda não cobertas. */ html.dark .bg-gray-800 { background-color: var(--color-brand-100); } /* 14e. Conteúdo editorial do post no portal (app.css do Vite NÃO carrega aqui): a cor base vem de .vnv-entry-content (slate-700 literal) e os headings/links/strong nus herdam dela — força claro para todos. */ html.dark .vnv-entry-content { color: var(--color-brand-800); } html.dark .vnv-entry-content h1, html.dark .vnv-entry-content h2, html.dark .vnv-entry-content h3, html.dark .vnv-entry-content h4, html.dark .vnv-entry-content strong, html.dark .vnv-entry-content b { color: var(--color-brand-900); }