/* ========================================================================= 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 — mas não escuro demais. */ html.dark .vnv-theme-toggle__sun { color: #858585; opacity: 0.5; } 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; } /* Header sticky (#vnv-site-header) — a regra genérica de bg-white/95 acima o pinta com o fundo da PÁGINA (#0d0d0d), o que deixa a barra preta demais. O header é "1 nível elevado" (mesma lógica do .mobile-menu-subpanel-header): sobe à superfície base (brand-50 #171717), mantendo a translucidez do backdrop-blur. Seletor por id → especificidade maior, vence a regra acima. */ html.dark #vnv-site-header { background-color: rgb(23 23 23 / 0.95) !important; } /* Botão "Escolha um país" (estado vazio do carrinho, .js-header-empty) — usa border-gray-200, que NÃO tem mapeamento dark global → renderiza clara (#e5e7eb) sobre o header escuro, parecendo uma borda grossa/destacada. Suaviza para o cinza de divisor do dark (brand-200 #262626), borda fina/discreta como a do botão do country strip. */ html.dark .js-header-empty { border-color: var(--color-brand-200) !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; } /* Card "Teste de Elegibilidade" (sidebar do post/FAQ) no DARK. Antes: fundo #1f1f1f (quase colado no #0d0d0d da página), título #dedede (branco gritante) e botão que a rampa do primário invertia p/ quase-branco ("branco demais"). Reequilibrado p/ UX: superfície cinza elevada, textos em tons mais contidos (sem glow) e botão sólido que sobe levemente sobre o card p/ ler como CTA — sem nenhum bloco branco. Escopo pela classe do container (.vnv-elig-cta) p/ NÃO mexer nos outros cards from-slate-50 do portal. !important + especificidade (.classe descendente) vencem os mapeamentos globais de superfície/texto/borda (seções 8/9/12). Só dark: em light o card mantém o estilo Tailwind original (nenhuma regra .vnv-elig-cta fora daqui). */ html.dark .vnv-elig-cta { background-image: none !important; background-color: #2a2a2a !important; /* superfície cinza elevada (era #1f1f1f) */ border-color: #3a3a3a !important; /* borda definida (era #262626, invisível) */ } html.dark .vnv-elig-cta h5 { color: #b5b5b5 !important; /* título: tom mais contido/escuro (era #dedede) */ } html.dark .vnv-elig-cta p { color: #969696 !important; /* descrição: muted, ainda legível (~AA) */ } html.dark .vnv-elig-cta svg { color: #8a8a8a !important; /* ícone: discreto */ } html.dark a.vnv-elig-cta-btn { background-color: #4a4a4a !important; /* botão sobe sobre o card p/ ler como CTA */ color: #e8e8e8 !important; /* rótulo nítido, um tom menos branco */ } html.dark a.vnv-elig-cta-btn:hover { background-color: #585858 !important; /* clareia no hover */ } /* ========================================================================= 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. (movido) As utilitárias de texto azul agora têm cobertura completa de toda a família fria na seção 16. */ /* 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); } /* ========================================================================= 15. MEGA-MENU DESKTOP (#vnv-mega-nav) + DRAWER MOBILE — cobertura COMPLETA O bundle pinta estes componentes (sempre presentes no header) com cores frias literais — hex E rgb() funcional (slate-50..700, blue-500). Ficam fora do alcance das utilities. Mapeia cada superfície/texto/borda/acento para a rampa cinza neutra. !important vence a especificidade do bundle (muitos seletores têm #id ou !important). ========================================================================= */ /* 15a. Mega-nav desktop — botões de nav principais (aria-controls^=mega-). */ html.dark #vnv-mega-nav button[aria-controls^="mega-"] { color: var(--color-brand-900) !important; } html.dark #vnv-mega-nav button[aria-controls^="mega-"]:hover { background-color: var(--color-brand-100) !important; } html.dark #vnv-mega-nav button[aria-controls^="mega-"] svg { color: var(--color-brand-500) !important; } html.dark #vnv-mega-nav button[aria-controls^="mega-"]:hover svg { color: var(--color-brand-700) !important; } /* 15b. Mega-nav desktop — abas de país/carreira (ativa/inativa) + setas. */ html.dark #vnv-mega-nav .career-tab-btn[data-active="false"], html.dark #vnv-mega-nav .country-tab-btn[data-active="false"] { color: var(--color-brand-600) !important; } html.dark #vnv-mega-nav .career-tab-btn[data-active="false"]:hover, html.dark #vnv-mega-nav .country-tab-btn[data-active="false"]:hover { background-color: var(--color-brand-100) !important; color: var(--color-brand-900) !important; } html.dark #vnv-mega-nav .career-tab-btn[data-active="true"], html.dark #vnv-mega-nav .country-tab-btn[data-active="true"] { background-color: var(--color-brand-200) !important; color: var(--color-brand-900) !important; --tw-ring-color: var(--color-brand-300) !important; } html.dark #vnv-mega-nav .country-arrow, html.dark #vnv-mega-nav .career-arrow { color: var(--color-brand-600) !important; stroke: var(--color-brand-600) !important; } /* 15c0. Drawer mobile — SUPERFÍCIES. O bundle pinta o drawer com #fff literal e o header sticky dos subpainéis com #f8fafc — classes próprias (não .bg-white), logo fora do alcance dos overrides. Sem isto o menu mobile abre BRANCO no dark. Drawer = fundo da página (#0d0d0d); header sticky = 1 nível elevado. */ html.dark .mobile-menu-drawer { background: #0d0d0d !important; } html.dark .mobile-menu-subpanel-header { background: var(--color-brand-50) !important; } /* :active já é coberto na seção 16; faltava o :hover (pisca slate claro ao tocar). */ html.dark .mobile-menu-category:hover { background: var(--color-brand-100) !important; } /* Divisor do header sticky dos subpainéis (par do .mobile-menu-header::after). */ html.dark .mobile-menu-subpanel-header::after { background: var(--color-brand-200) !important; background-image: none !important; } /* 15c. Drawer mobile — botões close/back. */ html.dark .mobile-menu-close, html.dark .mobile-menu-back-btn { background: var(--color-brand-100) !important; color: var(--color-brand-600) !important; border-color: var(--color-brand-200) !important; } html.dark .mobile-menu-close:hover, html.dark .mobile-menu-back-btn:hover { background: var(--color-brand-200) !important; color: var(--color-brand-900) !important; } /* 15d. Drawer mobile — ícone/legenda das categorias e seções. */ html.dark .mobile-menu-category-icon { background: var(--color-brand-100) !important; } html.dark .mobile-menu-category:hover .mobile-menu-category-icon { background: var(--color-brand-200) !important; color: var(--color-brand-900) !important; } html.dark .mobile-menu-category-subtitle, html.dark .mobile-menu-section-title { color: var(--color-brand-500) !important; } /* 15e. Drawer mobile — itens (fundo/borda) + setas (inclusive o hover azul). */ html.dark .mobile-menu-item { background: var(--color-brand-50) !important; border-color: var(--color-brand-200) !important; } html.dark .mobile-menu-item:hover { background: var(--color-brand-100) !important; border-color: var(--color-brand-300) !important; } html.dark .mobile-menu-category:hover .mobile-menu-category-arrow, html.dark .mobile-menu-item:hover .mobile-menu-item-arrow { color: var(--color-brand-700) !important; } /* 15f. Drawer mobile — CTAs. Primário era bg escuro (#0f172a) + texto branco → vira botão claro (igual à seção 9). Secundário era bg branco. */ html.dark .mobile-menu-cta-primary { background: var(--color-brand-900) !important; color: #141414 !important; border-color: var(--color-brand-900) !important; } html.dark .mobile-menu-cta-primary:hover { background: var(--color-brand-800) !important; } html.dark .mobile-menu-cta-secondary { background: var(--color-brand-50) !important; border-color: var(--color-brand-200) !important; } html.dark .mobile-menu-cta-secondary:hover { background: var(--color-brand-100) !important; border-color: var(--color-brand-300) !important; } /* 15g. Outros componentes do bundle com cor fria literal. */ html.dark .orbit-icon { --icon-bg: var(--color-brand-900); } html.dark .firm-marquee__mark:hover, html.dark .firm-marquee__mark:focus-visible { color: var(--color-brand-900) !important; } html.dark .partner-logo .partner-logo__container { background: var(--color-brand-100) !important; } html.dark .faq-card:hover { color: var(--color-brand-900) !important; border-color: var(--color-brand-300) !important; } /* ========================================================================= 16. PALETAS AZUIS/FRIAS GENÉRICAS — blue/sky/indigo/cyan/violet/purple usadas como realce em telas específicas (afiliados, autor, api-connections, payment, iqf, badges). Decisão do Pablo: carvão neutro SEM viés de azul. Neutraliza toda a família para a rampa cinza, por luminosidade (igual ao tratamento do slate). Acentos SEMÂNTICOS (info/success/warning/danger) ficam de fora — são funcionais e tratados nas seções 2/5. ========================================================================= */ /* TEXTO — tons escuros/médios (500-900) → claro forte; claros (50-400) → claro. */ html.dark .text-blue-500, html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900, html.dark .text-sky-500, html.dark .text-sky-600, html.dark .text-sky-700, html.dark .text-sky-800, html.dark .text-sky-900, html.dark .text-indigo-500, html.dark .text-indigo-600, html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-indigo-900, html.dark .text-cyan-600, html.dark .text-cyan-700, html.dark .text-cyan-800, html.dark .text-violet-500, html.dark .text-violet-600, html.dark .text-violet-700, html.dark .text-violet-800, html.dark .text-purple-500, html.dark .text-purple-600, html.dark .text-purple-700, html.dark .text-purple-800 { color: var(--color-brand-900) !important; } html.dark .text-blue-300, html.dark .text-blue-400, html.dark .text-sky-300, html.dark .text-sky-400, html.dark .text-indigo-300, html.dark .text-indigo-400, html.dark .text-cyan-300, html.dark .text-cyan-400, html.dark .text-violet-300, html.dark .text-violet-400, html.dark .text-purple-300, html.dark .text-purple-400 { color: var(--color-brand-700) !important; } html.dark .text-blue-50, html.dark .text-blue-100, html.dark .text-blue-200, html.dark .text-sky-50, html.dark .text-sky-100, html.dark .text-sky-200, html.dark .text-indigo-100,html.dark .text-indigo-200, html.dark .text-purple-100,html.dark .text-purple-200 { color: var(--color-brand-800) !important; } /* SUPERFÍCIES — badges/realces (50-200) → superfície escura; saturados → elevada. */ html.dark .bg-blue-50, html.dark .bg-blue-100, html.dark .bg-sky-50, html.dark .bg-sky-100, html.dark .bg-indigo-50, html.dark .bg-indigo-100, html.dark .bg-cyan-50, html.dark .bg-cyan-100, html.dark .bg-violet-50, html.dark .bg-violet-100, html.dark .bg-purple-50, html.dark .bg-purple-100 { background-color: var(--color-brand-100) !important; } html.dark .bg-blue-200, html.dark .bg-blue-300, html.dark .bg-sky-200, html.dark .bg-sky-300, html.dark .bg-indigo-200, html.dark .bg-indigo-300, html.dark .bg-purple-200, html.dark .bg-purple-300 { background-color: var(--color-brand-200) !important; } html.dark .bg-blue-400, html.dark .bg-blue-500, html.dark .bg-blue-600, html.dark .bg-blue-700, html.dark .bg-sky-400, html.dark .bg-sky-500, html.dark .bg-sky-600, html.dark .bg-indigo-500, html.dark .bg-indigo-600, html.dark .bg-indigo-700, html.dark .bg-violet-500, html.dark .bg-violet-600, html.dark .bg-purple-500, html.dark .bg-purple-600, html.dark .bg-purple-700 { background-color: var(--color-brand-300) !important; } /* BORDAS frias → cinza neutro. */ html.dark .border-blue-100, html.dark .border-blue-200, html.dark .border-blue-300, html.dark .border-sky-100, html.dark .border-sky-200, html.dark .border-sky-300, html.dark .border-indigo-200, html.dark .border-indigo-300, html.dark .border-purple-200, html.dark .border-purple-300 { border-color: var(--color-brand-200) !important; } /* GRADIENTES com parada azul (from/to/via) → cinza neutro. */ html.dark .from-blue-500, html.dark .from-blue-600, html.dark .from-blue-700, html.dark .from-indigo-500, html.dark .from-indigo-600, html.dark .from-sky-500, html.dark .from-sky-600 { --tw-gradient-from: var(--color-brand-200) var(--tw-gradient-from-position) !important; } html.dark .to-blue-500, html.dark .to-blue-600, html.dark .to-blue-700, html.dark .to-indigo-600, html.dark .to-indigo-700, html.dark .to-sky-600, html.dark .to-sky-700 { --tw-gradient-to: var(--color-brand-300) var(--tw-gradient-to-position) !important; } /* ============================================================================ 17. SELETORES CUSTOMIZADOS DO BUNDLE (não-utility) com cor FRIA LITERAL. Estes escapam dos overrides por classe das seções 3/16 porque o bundle.css pinta diretamente no seletor do componente (`.faq-answer { color: rgb(71 85 105) }`), em rgb()/hex slate, às vezes já com !important e/ou especificidade de ID (#conteudo). Eram a fonte das "coisas isoladas" azuladas. Mapa neutro: slate-900→brand-900, 700→brand-800, 600→brand-700, 500→brand-600, 400→brand-500; bg slate-50/100→brand-100; border slate-200→brand-200, slate-300→brand-300. Tudo !important p/ bater os !important do bundle. ========================================================================== */ /* 17a — Conteúdo de artigo (#conteudo): corpo, links, listas, definições. */ html.dark #conteudo.vnv-entry-content, html.dark #conteudo dd { color: var(--color-brand-800) !important; } html.dark #conteudo a { color: var(--color-brand-900) !important; } html.dark #conteudo a:hover { color: var(--color-brand-950) !important; } html.dark #conteudo dt { color: var(--color-brand-900) !important; } html.dark #conteudo li::marker, html.dark #conteudo figcaption, html.dark #conteudo blockquote cite { color: var(--color-brand-600) !important; } /* 17b — Tabelas do conteúdo de artigo. */ html.dark #conteudo th { background: var(--color-brand-100) !important; color: var(--color-brand-900) !important; border-bottom-color: var(--color-brand-300) !important; } html.dark #conteudo td { color: var(--color-brand-800) !important; border-bottom-color: var(--color-brand-200) !important; } html.dark #conteudo tbody tr:hover { background: var(--color-brand-100) !important; } /* 17c — Code inline do conteúdo (era slate-100 bg + slate-800 texto). */ html.dark #conteudo code { background: var(--color-brand-100) !important; color: var(--color-brand-900) !important; } /* 17d — TOC ativo (era slate-900). */ html.dark #vnv-toc-nav .vnv-toc-link.vnv-toc-link--active { color: var(--color-brand-900) !important; } /* 17e — Eligibility benefits (ícone slate-100/700, título slate-900, desc slate-600). */ html.dark .eligibility-benefits__icon { background: var(--color-brand-100) !important; color: var(--color-brand-800) !important; } html.dark .eligibility-benefits__title { color: var(--color-brand-900) !important; } html.dark .eligibility-benefits__desc { color: var(--color-brand-700) !important; } /* 17f — FAQ (resposta slate-600, hover do card slate-900). */ html.dark .faq-answer { color: var(--color-brand-700) !important; } html.dark .faq-card:hover { color: var(--color-brand-900) !important; } /* 17g — Marquees de artigos/notícias (borda slate-200, hover slate-300). */ html.dark .articles-marquee__card, html.dark .news-marquee__card { border-color: var(--color-brand-200) !important; } html.dark .articles-marquee__card:hover, html.dark .news-marquee__card:hover { border-color: var(--color-brand-300) !important; } /* 17h — Card de destinos (borda slate-200 !important). */ html.dark .destinations-card { border-color: var(--color-brand-200) !important; } /* 17i — Faixa de país do rodapé (texto slate-500 sobre chip slate-100). */ html.dark .footer-visa-country { color: var(--color-brand-600) !important; background-color: var(--color-brand-100) !important; } /* 17j — Seção alternada (bg slate-50) e nome de depoimento (slate-900). */ html.dark .bg-section-alternate { background-color: var(--color-brand-50) !important; } html.dark .testimonial-name { color: var(--color-brand-900) !important; } /* 17k — Shimmer button: o gradiente decorativo terminava em #1d4ed8 (azul). Neutraliza para um gradiente de carvão (mantém o brilho, sem viés frio). */ html.dark .shimmer-button { background: linear-gradient(135deg, var(--color-brand-700), var(--color-brand-900)) !important; } /* ============================================================================ 18. COBERTURA GERADA — seletores CUSTOM de componente com cor fria literal. Auditoria exaustiva (2026-06-20): varredura de TODOS os CSS de componente do tema (exceto tailwind-built = utilities já cobertas pela Seção 3/16). Cada regra que pinta slate/blue/cool-gray (viés B>R) em color/bg/border vira cinza NEUTRO (rampa brand carvão). Gerado por scripts/dark-cold-audit (determinístico). Mapa: color escuro->brand-900..600, bg claro->brand-100..50, border->brand-200/300. ========================================================================== */ html.dark .footer-visa-country { color: var(--color-brand-600) !important; } html.dark .stack-card { border: var(--color-brand-200) !important; } html.dark .benefit-icon { background: var(--color-brand-100) !important; background-image: none !important; border: var(--color-brand-200) !important; } html.dark .stack-card:hover .benefit-icon { background: var(--color-brand-100) !important; background-image: none !important; } html.dark #hero-gradient-text { color: var(--color-brand-900) !important; } html.dark #affiliates-hero .hero-stack-card { border: var(--color-brand-200) !important; } html.dark .affiliates-review-card { border: var(--color-brand-200) !important; } html.dark .affiliates-review-card:hover { border-color: var(--color-brand-200) !important; } html.dark :focus-visible { outline-color: var(--color-brand-300) !important; } html.dark .shimmer-button { background: var(--color-brand-50) !important; background-image: none !important; } html.dark .visa-requirements__grid { background: var(--color-brand-50) !important; background-image: none !important; } html.dark #vnv-mega-nav button[aria-controls^=mega-] { color: var(--color-brand-800) !important; } html.dark #vnv-mega-nav button[aria-controls^=mega-] svg { color: var(--color-brand-600) !important; } html.dark #vnv-mega-nav button[aria-controls^=mega-]:hover svg { color: var(--color-brand-800) !important; } html.dark #vnv-mega-nav .career-tab-btn[data-active=false], html.dark #vnv-mega-nav .country-tab-btn[data-active=false] { color: var(--color-brand-800) !important; } html.dark #vnv-mega-nav .career-tab-btn[data-active=false]:hover, html.dark #vnv-mega-nav .country-tab-btn[data-active=false]:hover { color: var(--color-brand-900) !important; } html.dark #vnv-mega-nav .career-tab-btn[data-active=true], html.dark #vnv-mega-nav .country-tab-btn[data-active=true] { color: var(--color-brand-900) !important; } html.dark #vnv-mega-nav .country-arrow { color: var(--color-brand-800) !important; stroke: var(--color-brand-800) !important; } html.dark #vnv-mega-nav .career-tab-btn[data-active=true] .career-arrow { color: var(--color-brand-800) !important; } html.dark .mobile-menu-backdrop { background: var(--color-brand-50) !important; background-image: none !important; } html.dark .mobile-menu-header::after { background: var(--color-brand-200) !important; background-image: none !important; } html.dark .mobile-menu-logo { color: var(--color-brand-900) !important; } html.dark .mobile-menu-logo svg { color: var(--color-brand-600) !important; } html.dark .mobile-menu-close { color: var(--color-brand-600) !important; } html.dark .mobile-menu-close:hover { background-color: var(--color-brand-100) !important; color: var(--color-brand-900) !important; } html.dark .mobile-menu-category:active { background-color: var(--color-brand-100) !important; } html.dark .mobile-menu-category-icon { color: var(--color-brand-600) !important; } html.dark .mobile-menu-category:hover .mobile-menu-category-icon { background-color: var(--color-brand-100) !important; color: var(--color-brand-900) !important; } html.dark .mobile-menu-category-title { color: var(--color-brand-900) !important; } html.dark .mobile-menu-category-subtitle { color: var(--color-brand-600) !important; } html.dark .mobile-menu-category-arrow { color: var(--color-brand-500) !important; } html.dark .mobile-menu-category:hover .mobile-menu-category-arrow { color: var(--color-brand-600) !important; } html.dark .mobile-menu-subpanel-header::after { background: var(--color-brand-200) !important; background-image: none !important; } html.dark .mobile-menu-back-btn { border: var(--color-brand-200) !important; color: var(--color-brand-600) !important; } html.dark .mobile-menu-back-btn:hover { color: var(--color-brand-900) !important; } html.dark .mobile-menu-subpanel-title { color: var(--color-brand-900) !important; } html.dark .mobile-menu-item { border: var(--color-brand-200) !important; color: var(--color-brand-900) !important; } html.dark .mobile-menu-item:hover { border-color: var(--color-brand-200) !important; } html.dark .mobile-menu-item-icon { background: var(--color-brand-100) !important; background-image: none !important; } html.dark .mobile-menu-item-arrow { color: var(--color-brand-500) !important; } html.dark .mobile-menu-item:hover .mobile-menu-item-arrow { color: var(--color-brand-600) !important; } html.dark .mobile-menu-section-title { color: var(--color-brand-500) !important; } html.dark .mobile-menu-footer { border-top: var(--color-brand-200) !important; } html.dark .mobile-menu-cta-primary { background-color: var(--color-brand-50) !important; } html.dark .mobile-menu-cta-primary:hover { background-color: var(--color-brand-50) !important; } html.dark .mobile-menu-cta-secondary { color: var(--color-brand-900) !important; border: var(--color-brand-200) !important; } html.dark .mobile-menu-cta-secondary:hover { border-color: var(--color-brand-200) !important; } html.dark .footer-social-links a:active { background-color: var(--color-brand-200) !important; } html.dark .carousel-next, html.dark .carousel-prev { color: var(--color-brand-900) !important; } html.dark .carousel-next:hover, html.dark .carousel-prev:hover { background-color: var(--color-brand-50) !important; } html.dark .testimonial-card { border: var(--color-brand-300) !important; box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; } html.dark .testimonial-avatar { border: var(--color-brand-300) !important; } html.dark .testimonial-name { color: var(--color-brand-900) !important; } html.dark .testimonial-role { color: var(--color-brand-800) !important; } html.dark .testimonial-location { color: var(--color-brand-800) !important; } html.dark .firm-marquee__mark { color: var(--color-brand-800) !important; } html.dark .firm-marquee__mark:focus-visible, html.dark .firm-marquee__mark:hover { color: var(--color-brand-900) !important; } html.dark .firm-marquee__symbol { background-color: var(--color-brand-200) !important; } html.dark .orbit-ring { border: var(--color-brand-300) !important; } html.dark .orbit-ring--outer { border-color: var(--color-brand-300) !important; } html.dark .orbit-ring--inner { border-color: var(--color-brand-300) !important; } html.dark .orbit-icon::before { background-color: var(--color-brand-50) !important; } html.dark .orbit-glow { background: var(--color-brand-50) !important; background-image: none !important; } html.dark .articles-marquee__card { border: var(--color-brand-200) !important; } html.dark .articles-marquee__card:hover { border-color: var(--color-brand-200) !important; } html.dark .news-marquee__card { border: var(--color-brand-200) !important; } html.dark .news-marquee__card:hover { border-color: var(--color-brand-200) !important; } /* Hero de elegibilidade (home + destino /pais/) é SUPERFÍCIE DE MÍDIA — escuro POR DESIGN: foto (.eligibility-hero__bg, z0) + overlay gradiente TRANSLÚCIDO (::before, z1) + texto/CTA claros. A rampa de superfície do dark NÃO se aplica: a regra antiga pintava o ::before com brand-50 SÓLIDO/opaco, cobrindo 100% a foto (ela "sumia"). Solução: sem override no ::before → herda o gradiente translúcido do tema (styles.css), idêntico ao light; a foto reaparece. Só o fundo de fallback (atrás da foto) acompanha o carvão do dark. */ html.dark .eligibility-hero__card { background-color: #0d0d0d !important; } /* CTA do hero (bg-white/text-gray-950) é branco sobre foto escura — re-fixar no dark, senão a rampa global .bg-white → superfície escura o funde no fundo. */ html.dark .eligibility-hero__card a.bg-white { background-color: #ffffff !important; color: #030712 !important; } html.dark .eligibility-hero__card a.bg-white:hover { background-color: #f1f5f9 !important; } html.dark .eligibility-benefits__icon { color: var(--color-brand-800) !important; } html.dark .eligibility-benefits__title { color: var(--color-brand-900) !important; } html.dark .eligibility-benefits__desc { color: var(--color-brand-800) !important; } /* faq-card: `border: ` sem largura/estilo é shorthand inválido (border-style → none) → no dark o card ficava SEM a linha separadora do light. Restaura a borda fina (1px solid) na linha de divisor da rampa; realça no hover. */ html.dark .faq-card { border: 1px solid var(--color-brand-300) !important; color: var(--color-brand-900) !important; } html.dark .faq-card:hover { color: var(--color-brand-900) !important; border-color: var(--color-brand-400) !important; } html.dark .faq-answer { color: var(--color-brand-800) !important; border-top: var(--color-brand-300) !important; } html.dark .destinations-card { border: var(--color-brand-200) !important; } /* Cards do carrossel "top 10" de destino = SUPERFÍCIE DE MÍDIA (foto + overlay gradiente + label clara). O overlay ::after AGORA é o mesmo nos 2 modos: o base rule (bundle.css/styles.css) usa gradiente PRETO PURO (rgba(0,0,0) — R=G=B, neutro, sem tom azulado possível), então NÃO há override dark do ::after — o dark herda idêntico ao light (decisão Pablo 2026-06-22: mesma coisa nos 2 modos, base bem mais escura). Mantemos só o fundo de fallback no navy do tema (igual ao light, rgb(10 15 25)), visível apenas atrás da faixa transparente do topo. */ html.dark .destination-image-container { background-color: rgb(10 15 25) !important; } html.dark .destinations-section--dark { background-color: var(--color-brand-50) !important; } html.dark .destinations-section--dark::after { background: var(--color-brand-50) !important; background-image: none !important; } html.dark #vnv-toc-nav .vnv-toc-link.vnv-toc-link--active { color: var(--color-brand-900) !important; } html.dark #conteudo.vnv-entry-content { color: var(--color-brand-800) !important; } html.dark #conteudo a { color: var(--color-brand-800) !important; text-decoration-color: var(--color-brand-500) !important; } html.dark #conteudo a:hover { color: var(--color-brand-900) !important; text-decoration-color: var(--color-brand-800) !important; } html.dark #conteudo b, html.dark #conteudo strong { color: var(--color-brand-900) !important; } html.dark #conteudo h2, html.dark #conteudo h2.wp-block-heading { color: var(--color-brand-900) !important; border-bottom: var(--color-brand-200) !important; } html.dark #conteudo h3, html.dark #conteudo h3.wp-block-heading { color: var(--color-brand-900) !important; } html.dark #conteudo h4, html.dark #conteudo h4.wp-block-heading { color: var(--color-brand-800) !important; } html.dark #conteudo h5, html.dark #conteudo h5.wp-block-heading { color: var(--color-brand-800) !important; } html.dark #conteudo h6, html.dark #conteudo h6.wp-block-heading { color: var(--color-brand-600) !important; } html.dark #conteudo li::marker { color: var(--color-brand-600) !important; } html.dark #conteudo hr, html.dark #conteudo hr.wp-block-separator { border-top: var(--color-brand-200) !important; } html.dark #conteudo blockquote, html.dark #conteudo blockquote.wp-block-quote { border-left: var(--color-brand-300) !important; color: var(--color-brand-800) !important; } html.dark #conteudo blockquote cite { color: var(--color-brand-600) !important; } html.dark #conteudo th { color: var(--color-brand-900) !important; border-bottom: var(--color-brand-200) !important; } html.dark #conteudo td { color: var(--color-brand-800) !important; } html.dark #conteudo .wp-block-table figcaption { color: var(--color-brand-600) !important; } html.dark #conteudo code { color: var(--color-brand-900) !important; } html.dark #conteudo pre, html.dark #conteudo pre.wp-block-code { background-color: var(--color-brand-50) !important; color: var(--color-brand-500) !important; } html.dark #conteudo figcaption { color: var(--color-brand-600) !important; } html.dark #conteudo dt { color: var(--color-brand-900) !important; } html.dark #conteudo dd { color: var(--color-brand-800) !important; } html.dark .destinations-country-card { background-color: var(--color-brand-50) !important; } html.dark .destinations-country-card__overlay { background: var(--color-brand-50) !important; background-image: none !important; } html.dark .city-hero-btn:hover { color: var(--color-brand-900) !important; } html.dark .city-hero-progress { background-color: var(--color-brand-200) !important; } html.dark .dest-section__title { color: var(--color-brand-900) !important; } html.dark .dest-section__summary { color: var(--color-brand-600) !important; } html.dark .dest-section__body, html.dark .dest-section__body p { color: var(--color-brand-800) !important; } html.dark .dv-stat__value { color: var(--color-brand-900) !important; } html.dark .dv-stat__label { color: var(--color-brand-600) !important; } html.dark .dv-stat__sub { color: var(--color-brand-600) !important; } html.dark .dv-gauge__label { color: var(--color-brand-800) !important; } html.dark .dv-gauge__value { color: var(--color-brand-900) !important; } html.dark .dv-gauge__track { background-color: var(--color-brand-50) !important; } html.dark .dv-dual__label { color: var(--color-brand-800) !important; } html.dark .dv-dual__value { color: var(--color-brand-900) !important; } html.dark .dv-dual__track { background-color: var(--color-brand-50) !important; } html.dark .dv-dual__row--good .dv-dual__fill { background: var(--color-brand-50) !important; background-image: none !important; } html.dark .dv-dual__row--bad .dv-dual__fill { background: var(--color-brand-200) !important; background-image: none !important; } html.dark .dv-chipset__title { color: var(--color-brand-600) !important; } html.dark .dv-chip { background-color: var(--color-brand-100) !important; color: var(--color-brand-800) !important; } html.dark .dv-chip--more { color: var(--color-brand-600) !important; } html.dark .dv-chip:has(> a):hover { background-color: var(--color-brand-50) !important; } html.dark .dv-bars__title { color: var(--color-brand-600) !important; } html.dark .dv-bar__label { color: var(--color-brand-800) !important; } html.dark .dv-bar__value { color: var(--color-brand-900) !important; } html.dark .dv-bar__track { background-color: var(--color-brand-50) !important; } html.dark .dv-bar__fill { background: var(--color-brand-50) !important; background-image: none !important; } html.dark .dv-months__title { color: var(--color-brand-600) !important; } html.dark .dv-months__col { background-color: var(--color-brand-50) !important; } html.dark .dv-months__col-fill { background-color: var(--color-brand-200) !important; } html.dark .dv-months--blue .dv-months__col-fill { background: var(--color-brand-50) !important; background-image: none !important; } html.dark .dv-months--rose .dv-months__col-fill { background: var(--color-brand-50) !important; background-image: none !important; } html.dark .dv-months--sky .dv-months__col-fill { background: var(--color-brand-200) !important; background-image: none !important; } html.dark .dv-months__bar--empty .dv-months__col { border: var(--color-brand-300) !important; } html.dark .dv-months__lbl { color: var(--color-brand-500) !important; } html.dark .dv-ranked__num { border: var(--color-brand-200) !important; color: var(--color-brand-800) !important; } html.dark .dv-ranked__name { color: var(--color-brand-900) !important; } html.dark .dv-badge--good { background-color: var(--color-brand-50) !important; } html.dark .dv-badge--bad { background-color: var(--color-brand-50) !important; color: var(--color-brand-600) !important; } html.dark .dv-badge--neutral { background-color: var(--color-brand-50) !important; color: var(--color-brand-800) !important; } html.dark .dv-note__title { color: var(--color-brand-800) !important; } html.dark .dv-note__body { color: var(--color-brand-900) !important; } html.dark .dv-visa-pill { background-color: var(--color-brand-50) !important; } html.dark a.dv-visa-pill:hover, html.dark a.dv-visa-pill:focus { background-color: var(--color-brand-50) !important; } html.dark .dv-visa-pill--inactive { background-color: var(--color-brand-100) !important; color: var(--color-brand-600) !important; } html.dark .dv-visa-pill--secondary { color: var(--color-brand-800) !important; } html.dark a.dv-visa-pill--secondary:hover, html.dark a.dv-visa-pill--secondary:focus { background-color: var(--color-brand-100) !important; color: var(--color-brand-900) !important; } html.dark .dv-card__lede { color: var(--color-brand-600) !important; } html.dark .dv-stack-card__label { color: var(--color-brand-600) !important; } html.dark .dv-stack-card__sub { color: var(--color-brand-800) !important; } html.dark .dv-stack-card__value { color: var(--color-brand-900) !important; } html.dark .dv-stack-card__value-unit { color: var(--color-brand-600) !important; } html.dark .dv-cost-grid__source { color: var(--color-brand-600) !important; } html.dark .dv-radial__bg { stroke: var(--color-brand-900) !important; } html.dark .dv-radial--slate-400 .dv-radial__fill { stroke: var(--color-brand-500) !important; } html.dark .dv-radial--slate-500 .dv-radial__fill { stroke: var(--color-brand-600) !important; } html.dark .dv-radial--slate-700 .dv-radial__fill { stroke: var(--color-brand-800) !important; } html.dark .dv-radial--slate-900 .dv-radial__fill { stroke: var(--color-brand-900) !important; } html.dark .dv-radial__value { color: var(--color-brand-900) !important; } html.dark .dv-radial__label { color: var(--color-brand-600) !important; } html.dark .dest-section--cluster .cluster-section__icon-wrap { color: var(--color-brand-800) !important; } html.dark .cluster-section__hero-img { box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; } html.dark .career-skills-band { border-bottom: var(--color-brand-200) !important; } html.dark .career-section__icon-xl { color: var(--color-brand-800) !important; } html.dark .cluster-signals__title { color: var(--color-brand-800) !important; } html.dark .cluster-forces__card { border-bottom: var(--color-brand-200) !important; } html.dark .cluster-forces__num { background-color: var(--color-brand-50) !important; } html.dark .cluster-forces__card h4.cluster-forces__headline { color: var(--color-brand-900) !important; } html.dark .cluster-forces__desc { color: var(--color-brand-600) !important; } html.dark .cluster-forces--slider .cluster-forces__slider-head { color: var(--color-brand-600) !important; } html.dark .cluster-forces--slider .cluster-forces__slider-count { color: var(--color-brand-900) !important; } html.dark .cluster-forces--slider .cluster-forces__slider-dots button { background-color: var(--color-brand-100) !important; } html.dark .cluster-forces--slider .cluster-forces__slider-dots button.is-active { background-color: var(--color-brand-50) !important; } html.dark .cluster-forces--slider .cluster-forces__slider-arrows button { border: var(--color-brand-200) !important; color: var(--color-brand-900) !important; } html.dark .cluster-forces--slider .cluster-forces__slider-arrows button:hover { border-color: var(--color-brand-300) !important; } html.dark .destination-section-fields { border-top: var(--color-brand-300) !important; } html.dark .destination-content-prose, html.dark .destination-content-prose p { color: var(--color-brand-800) !important; } html.dark .pageo-front-field dt { color: var(--color-brand-600) !important; } html.dark .pageo-front-field dd { color: var(--color-brand-900) !important; } html.dark .pageo-front-list li { background-color: var(--color-brand-50) !important; color: var(--color-brand-900) !important; } html.dark .pageo-front-months th { color: var(--color-brand-600) !important; border-bottom: var(--color-brand-300) !important; } html.dark .pageo-front-months td { color: var(--color-brand-900) !important; } html.dark .destinations-hero-form button[type="submit"] { color: var(--color-brand-900) !important; } html.dark .vnv-dest-map-prose, html.dark .vnv-dest-map-prose p { color: var(--color-brand-800) !important; } /* Mapa de destino (Leaflet) — MESMO tratamento do #home-radar (seção 20): basemap escurecido por FILTRO NEUTRO só no tile-pane (markers/popups/coords ficam intactos) + superfícies escuras p/ canvas, badge e controles de zoom. Antes só o texto/zoom era coberto e o mapa renderizava CLARO. */ html.dark .vnv-dest-map-canvas { background-color: #0d0d0d !important; } html.dark .vnv-dest-map-canvas .leaflet-container { background: #0d0d0d !important; } html.dark .vnv-dest-map-canvas .leaflet-tile-pane { filter: invert(1) grayscale(1) brightness(0.9) contrast(0.86); } html.dark .vnv-dest-map-coords { background: rgba(26, 26, 26, 0.95) !important; border: 1px solid var(--color-brand-300) !important; color: var(--color-brand-900) !important; } html.dark .vnv-dest-map-canvas .leaflet-control-zoom a { background: #1a1a1a !important; color: var(--color-brand-900) !important; } html.dark .vnv-dest-map-canvas .leaflet-control-zoom a:hover { background: #2a2a2a !important; color: var(--color-brand-900) !important; } html.dark .vnv-dest-marker-pulse { border-color: rgba(255, 255, 255, 0.55) !important; } html.dark .eligibility-test-page .border-gray-300 { border-color: var(--color-brand-200) !important; } html.dark .eligibility-test-page .hover\:bg-gray-800:hover { background-color: var(--color-brand-50) !important; } html.dark .eligibility-test-page .hover\:text-gray-600:hover { color: var(--color-brand-800) !important; } html.dark .eligibility-test-page .focus\:border-gray-950:focus { border-color: var(--color-brand-300) !important; } html.dark .eligibility-test-page .placeholder\:text-gray-400::placeholder { color: var(--color-brand-500) !important; } html.dark .eligibility-test-page .group:hover .group-hover\:text-gray-800 { color: var(--color-brand-900) !important; } html.dark .country-card.group:hover .js-add-to-cart:not([disabled]) { background-color: var(--color-brand-50) !important; border-color: var(--color-brand-300) !important; } html.dark .firm-marquee__name { color: var(--color-brand-800) !important; } html.dark .gallery-glow { background: var(--color-brand-200) !important; background-image: none !important; } html.dark .particle { background-color: var(--color-brand-50) !important; } html.dark .gallery-ring { border: var(--color-brand-300) !important; } html.dark .gallery-ring-inner { border: var(--color-brand-300) !important; } html.dark .gallery-ring::before { border: var(--color-brand-300) !important; } html.dark .vnv-home-vitrine { background-color: var(--color-brand-100) !important; } html.dark .vnv-home-map { background-color: var(--color-brand-100) !important; } html.dark .vnv-home-map .leaflet-container { background-color: var(--color-brand-100) !important; } html.dark .vnv-home-strip { box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; } html.dark .vnv-home-card:hover { border-color: var(--color-brand-200) !important; box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; } html.dark .vnv-home-cart-btn:hover { background-color: var(--color-brand-50) !important; } html.dark .vnv-home-checkout { box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; } html.dark .vnv-home-marker img { box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; } html.dark .home-strip-empty { color: var(--color-brand-600) !important; } html.dark .home-strip-empty:hover { color: var(--color-brand-800) !important; } html.dark .home-strip-clear-btn { color: var(--color-brand-600) !important; } html.dark .home-strip-clear-btn:hover { color: var(--color-brand-800) !important; } html.dark .home-strip-footer-links a:hover { border-color: var(--color-brand-200) !important; } html.dark .home-media-btn { background-color: var(--color-brand-50) !important; } html.dark .home-media-btn:hover { background-color: var(--color-brand-50) !important; } html.dark .home-strip-toggle { color: var(--color-brand-600) !important; } html.dark .home-strip-toggle:hover { color: var(--color-brand-800) !important; } html.dark .home-country-cta { color: var(--color-brand-500) !important; } html.dark .home-country-cart-btn { color: var(--color-brand-500) !important; border-color: var(--color-brand-200) !important; } html.dark .home-country-card:hover .home-country-cart-btn { border-color: var(--color-brand-200) !important; } html.dark .home-country-cart-btn:hover { color: var(--color-brand-500) !important; border-color: var(--color-brand-200) !important; } html.dark .home-country-cta--credits { color: var(--color-brand-500) !important; border: var(--color-brand-200) !important; border-color: var(--color-brand-200) !important; } html.dark .home-country-cta--credits:hover { color: var(--color-brand-500) !important; border-color: var(--color-brand-200) !important; } html.dark .hp-card-type { color: var(--color-brand-600) !important; } html.dark .hp-card-country { color: var(--color-brand-900) !important; } html.dark .hp-card-desc { color: var(--color-brand-600) !important; } html.dark .hp-card-price { color: var(--color-brand-900) !important; } html.dark .hp-card-action-btn { color: var(--color-brand-600) !important; border: var(--color-brand-200) !important; } html.dark .hp-card-action-btn:hover { color: var(--color-brand-800) !important; border-color: var(--color-brand-300) !important; } html.dark .hp-card-cart-btn { background-color: var(--color-brand-50) !important; border: var(--color-brand-300) !important; } html.dark a.hp-card-cart-btn--credits, html.dark a.hp-card-cart-btn--credits:link, html.dark a.hp-card-cart-btn--credits:visited { color: var(--color-brand-600) !important; } html.dark .hp-card-cart-btn:hover { background-color: var(--color-brand-50) !important; border-color: var(--color-brand-300) !important; } html.dark .hp-card-cart-btn--remove { color: var(--color-brand-600) !important; border: var(--color-brand-200) !important; } html.dark .hp-card-cart-btn--remove:hover { color: var(--color-brand-800) !important; border-color: var(--color-brand-300) !important; } html.dark .hp-card-owned-label { color: var(--color-brand-600) !important; } html.dark .hp-card-cart-btn--view { background-color: var(--color-brand-50) !important; border-color: var(--color-brand-300) !important; } html.dark .hp-card-cart-btn--view:hover { background-color: var(--color-brand-50) !important; border-color: var(--color-brand-300) !important; } html.dark .hp-card-cart-btn--credits { color: var(--color-brand-600) !important; border: var(--color-brand-200) !important; } html.dark .hp-card-cart-btn--credits:hover { color: var(--color-brand-800) !important; border-color: var(--color-brand-300) !important; } html.dark .marker-cluster-small, html.dark .marker-cluster-medium, html.dark .marker-cluster-large { background-color: var(--color-brand-50) !important; } html.dark .coupon-lightbox-overlay { background-color: var(--color-brand-50) !important; } html.dark .coupon-lightbox-content { background-color: var(--color-brand-50) !important; } html.dark .coupon-lightbox-close { color: var(--color-brand-500) !important; } html.dark .coupon-lightbox-icon { background-color: var(--color-brand-50) !important; } html.dark .coupon-lightbox-message { color: var(--color-brand-500) !important; } html.dark .coupon-lightbox-code { background-color: var(--color-brand-50) !important; } html.dark .coupon-copy-btn { color: var(--color-brand-500) !important; } html.dark .coupon-lightbox-apply { color: var(--color-brand-900) !important; } html.dark #vnv-mega-nav button[aria-controls^="mega-"] { color: var(--color-brand-800) !important; } html.dark #vnv-mega-nav button[aria-controls^="mega-"] svg { color: var(--color-brand-600) !important; } html.dark #vnv-mega-nav button[aria-controls^="mega-"]:hover svg { color: var(--color-brand-800) !important; } html.dark #vnv-mega-nav .country-tab-btn[data-active="false"], html.dark #vnv-mega-nav .career-tab-btn[data-active="false"] { color: var(--color-brand-800) !important; } html.dark #vnv-mega-nav .country-tab-btn[data-active="false"]:hover, html.dark #vnv-mega-nav .career-tab-btn[data-active="false"]:hover { color: var(--color-brand-900) !important; } html.dark #vnv-mega-nav .country-tab-btn[data-active="true"], html.dark #vnv-mega-nav .career-tab-btn[data-active="true"] { color: var(--color-brand-900) !important; } html.dark #vnv-mega-nav .career-tab-btn[data-active="true"] .career-arrow { color: var(--color-brand-800) !important; } html.dark .news-gallery-btn:hover { color: var(--color-brand-900) !important; } html.dark .newsletter-form-box { background-color: var(--color-brand-50) !important; border-color: var(--color-brand-300) !important; } html.dark .newsletter-form-box.newsletter-form-box { background-color: var(--color-brand-50) !important; } html.dark .newsletter-form-box p { color: var(--color-brand-500) !important; } html.dark .newsletter-form-box input, html.dark .newsletter-form-box select { color: var(--color-brand-900) !important; } html.dark .newsletter-form-box input::placeholder { color: var(--color-brand-600) !important; } html.dark .newsletter-form-box select { color: var(--color-brand-900) !important; } html.dark .newsletter-form-box select option { color: var(--color-brand-900) !important; } html.dark .newsletter-submit-btn { color: var(--color-brand-900) !important; } html.dark .newsletter-field-icon { color: var(--color-brand-600) !important; } html.dark .vnv-scroll-progress__bar { background-color: var(--color-brand-50) !important; } html.dark #home-hero-globe.theme-light { border-bottom-color: var(--color-brand-200) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column > p:first-child { color: var(--color-brand-600) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column h2 { color: var(--color-brand-900) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column > p:not(:first-child) { color: var(--color-brand-800) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column dt { color: var(--color-brand-600) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column dd { color: var(--color-brand-900) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column a.bg-white { background-color: var(--color-brand-50) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column a.bg-white:hover { background-color: var(--color-brand-50) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column a.border-white { border-color: var(--color-brand-300) !important; color: var(--color-brand-900) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column input[type="email"] { background-color: var(--color-brand-50) !important; border-color: var(--color-brand-300) !important; color: var(--color-brand-900) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column input[type="email"]::placeholder { color: var(--color-brand-600) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column button[type="submit"] { background-color: var(--color-brand-50) !important; } html.dark #home-hero-globe.theme-light .hero-globe-text-column button[type="submit"]:hover { background-color: var(--color-brand-50) !important; } html.dark .carousel-prev, html.dark .carousel-next { color: var(--color-brand-900) !important; } html.dark .carousel-prev:hover, html.dark .carousel-next:hover { background-color: var(--color-brand-50) !important; } html.dark #conteudo strong, html.dark #conteudo b { color: var(--color-brand-900) !important; } html.dark .tabs-nav { border-bottom: var(--color-brand-200) !important; } html.dark .tab-button { color: var(--color-brand-600) !important; } html.dark .tab-button:hover { color: var(--color-brand-900) !important; } html.dark .tab-button.active { color: var(--color-brand-900) !important; border-bottom-color: var(--color-brand-300) !important; } /* 18-prose — @tailwindcss/typography (prose / prose-slate): redefine TODAS as --tw-prose-* (que nascem slate) para a rampa carvão neutra. Pega headings, links, bold, listas, bordas, citações e código do conteúdo de artigo/mapa. */ html.dark .prose { --tw-prose-body: var(--color-brand-800) !important; --tw-prose-headings: var(--color-brand-900) !important; --tw-prose-lead: var(--color-brand-700) !important; --tw-prose-links: var(--color-brand-900) !important; --tw-prose-bold: var(--color-brand-900) !important; --tw-prose-counters: var(--color-brand-600) !important; --tw-prose-bullets: var(--color-brand-500) !important; --tw-prose-hr: var(--color-brand-200) !important; --tw-prose-quotes: var(--color-brand-800) !important; --tw-prose-quote-borders: var(--color-brand-300) !important; --tw-prose-captions: var(--color-brand-600) !important; --tw-prose-code: var(--color-brand-900) !important; --tw-prose-pre-code: var(--color-brand-900) !important; --tw-prose-pre-bg: var(--color-brand-100) !important; --tw-prose-th-borders: var(--color-brand-300) !important; --tw-prose-td-borders: var(--color-brand-200) !important; } /* ============================================================================ 19. UTILITIES BRAND → rampa dark. CAUSA-RAIZ do azul remanescente: a paleta "brand" da marca é AZUL-ACINZENTADA (brand-600=#5a6787, 500=#7e8aa6, …) e as utilities .text-brand-*/.bg-brand-*/.border-brand-* no tailwind-built.css usam esses valores LITERAIS — não var(--color-brand-*) — então a redefinição da Seção 2 nunca as alcançava. Aqui reconectamos cada utility (texto/bg/borda/ ring/gradiente/hover/group-hover) à variável, que sob html.dark é carvão neutro. Gerado a partir do próprio tailwind-built (seletor preservado, valor → var). ========================================================================== */ html.dark .bg-brand-50 { background-color: var(--color-brand-50) !important; } html.dark .bg-brand-700 { background-color: var(--color-brand-700) !important; } html.dark .to-brand-700 { --tw-gradient-to: var(--color-brand-700) var(--tw-gradient-to-position) !important; } html.dark .text-brand-200 { color: var(--color-brand-200) !important; } html.dark .text-brand-300 { color: var(--color-brand-300) !important; } html.dark .text-brand-500 { color: var(--color-brand-500) !important; } html.dark .text-brand-600 { color: var(--color-brand-600) !important; } html.dark .text-brand-700 { color: var(--color-brand-700) !important; } html.dark .hover\:border-brand-200:hover { border-color: var(--color-brand-200) !important; } html.dark .hover\:bg-brand-100:hover { background-color: var(--color-brand-100) !important; } html.dark .hover\:bg-brand-800:hover { background-color: var(--color-brand-800) !important; } html.dark .hover\:text-brand-700:hover { color: var(--color-brand-700) !important; } html.dark .hover\:text-brand-800:hover { color: var(--color-brand-800) !important; } html.dark .focus\:border-brand-700:focus { border-color: var(--color-brand-700) !important; } html.dark .focus\:ring-brand-700:focus { --tw-ring-color: var(--color-brand-700) !important; } html.dark .group:hover .group-hover\:text-brand-600 { color: var(--color-brand-600) !important; } html.dark .group:hover .group-hover\:text-brand-700 { color: var(--color-brand-700) !important; } /* ========================================================================= 20. HOME RADAR (homepage `/`) — mapa Leaflet + country strip flutuante home-radar.css usa cinzas LITERAIS (#fff, #f3f4f6, #6b7280, #030712…) e variáveis --home-*; nenhum desses passava pela cobertura por-classe das seções anteriores (o arquivo só carrega na home). Aqui: (a) redefine os tokens --home-* para a rampa carvão (card escuro); (b) escurece o basemap Leaflet por FILTRO NEUTRO (grayscale, sem azul) só no tile-pane → markers/popups intactos; (c) ajusta literais, botões (pílula clara no card escuro), popup e o lightbox de cupom (que vinha em cinza-FRIO #374151/#1F2937). ========================================================================= */ /* (a) Tokens da home no dark — rampa neutra (R=G=B). Markers/clusters seguem usando --home-primary (#030712) de propósito: ficam escuros com borda branca sobre o mapa escuro, onde leem bem. */ html.dark #home-radar, html.dark .home-strip, html.dark .coupon-lightbox { --home-bg: #262626; --home-card-bg: #1a1a1a; --home-border: #2e2e2e; --home-text: #e5e5e5; --home-text-muted: #a3a3a3; --home-text-light: #8a8a8a; --home-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4); --home-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4); } /* (b) Basemap escuro por filtro NEUTRO — só os tiles raster (tile-pane), deixando markers (marker-pane) e popups (popup-pane) intactos. */ html.dark #home-radar .leaflet-container { background: #0d0d0d !important; } html.dark #home-radar .leaflet-tile-pane { filter: invert(1) grayscale(1) brightness(0.9) contrast(0.86); } /* (c) Literais e superfícies do strip ----------------------------------- */ /* Botão de toggle (minimizar). */ html.dark .home-strip-toggle { background: #222 !important; border-color: #2e2e2e !important; color: #a3a3a3 !important; } html.dark .home-strip-toggle:hover { background: #2a2a2a !important; color: #e5e5e5 !important; } /* Divisor vertical entre cards de país. */ html.dark .home-country-card::after { background: linear-gradient(to bottom, transparent, #3a3a3a, transparent) !important; } /* CTA principal de checkout → pílula CLARA (ação primária no card escuro). */ html.dark .home-strip-checkout-btn { background: #ededed !important; color: #0d0d0d !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; } html.dark .home-strip-checkout-btn:hover { background: #d9d9d9 !important; } html.dark .home-strip-checkout-badge { background: #0d0d0d !important; color: #ededed !important; } /* "Escolha um país" (carrinho vazio) → cinza neutro. */ html.dark .home-strip-empty { background: #222 !important; color: #a3a3a3 !important; border-color: #2e2e2e !important; } html.dark .home-strip-empty:hover { background: #2a2a2a !important; color: #e5e5e5 !important; } /* Botão limpar carrinho. */ html.dark .home-strip-clear-btn { color: #a3a3a3 !important; } html.dark .home-strip-clear-btn:hover { background: #2a2a2a !important; color: #e5e5e5 !important; } /* Botões de mídia (pílula cinza, se renderizados). */ html.dark .home-media-btn { background: #2d2d2d !important; color: #e5e5e5 !important; } html.dark .home-media-btn:hover { background: #383838 !important; color: #fff !important; } /* Links do rodapé do strip. */ html.dark .home-strip-footer-links a { border-color: #2e2e2e !important; } html.dark .home-strip-footer-links a:hover { border-color: #3a3a3a !important; background: rgba(255, 255, 255, 0.04) !important; color: #e5e5e5 !important; } /* Cards de país — CTAs/preço/botão add. */ html.dark .home-country-cta { color: #8a8a8a !important; } html.dark .home-country-cart-btn { color: #8a8a8a !important; border-color: #3a3a3a !important; } html.dark .home-country-card:hover .home-country-cart-btn { border-color: #4a4a4a !important; } html.dark .home-country-cart-btn:hover { color: #e5e5e5 !important; border-color: #5a5a5a !important; } html.dark .home-country-cta--credits { color: #8a8a8a !important; border-color: #3a3a3a !important; } html.dark .home-country-cta--credits:hover { color: #e5e5e5 !important; border-color: #5a5a5a !important; } /* (c) Popup do mapa --------------------------------------------------------- */ html.dark .home-popup .leaflet-popup-content-wrapper, html.dark .home-popup .leaflet-popup-tip { background: #1a1a1a !important; } html.dark .hp-card-type, html.dark .hp-card-desc, html.dark .hp-card-owned-label, html.dark a.hp-card-cart-btn--credits, html.dark a.hp-card-cart-btn--credits:link, html.dark a.hp-card-cart-btn--credits:visited { color: #a3a3a3 !important; } html.dark .hp-card-country, html.dark .hp-card-price { color: #f0f0f0 !important; } html.dark .hp-card-flag { border-color: #2e2e2e !important; } /* Botões secundários do popup (ver/remover/creditos). */ html.dark .hp-card-action-btn, html.dark .hp-card-cart-btn--remove, html.dark .hp-card-cart-btn--credits { color: #cfcfcf !important; border-color: #3a3a3a !important; background: transparent !important; } html.dark .hp-card-action-btn:hover, html.dark .hp-card-cart-btn--remove:hover, html.dark .hp-card-cart-btn--credits:hover { background: #262626 !important; color: #fff !important; border-color: #5a5a5a !important; } /* Botão primário do popup (adicionar/ver caso) → pílula clara. */ html.dark .hp-card-cart-btn, html.dark .hp-card-cart-btn--view, html.dark a.hp-card-cart-btn--view, html.dark a.hp-card-cart-btn--view:link, html.dark a.hp-card-cart-btn--view:visited { background: #ededed !important; color: #0d0d0d !important; border-color: #ededed !important; } html.dark .hp-card-cart-btn:hover, html.dark .hp-card-cart-btn--view:hover { background: #d9d9d9 !important; border-color: #d9d9d9 !important; } /* (c) Lightbox de cupom — neutraliza os cinzas-FRIOS para carvão neutro. */ html.dark .coupon-lightbox-overlay { background: rgba(13, 13, 13, 0.8) !important; } html.dark .coupon-lightbox-content { background: #1f1f1f !important; } html.dark .coupon-lightbox-icon { background: #333 !important; } html.dark .coupon-lightbox-code { background: #0d0d0d !important; } html.dark .coupon-lightbox-message { color: #b5b5b5 !important; } html.dark .coupon-lightbox-close, html.dark .coupon-copy-btn { color: #a3a3a3 !important; } html.dark .coupon-lightbox-close:hover, html.dark .coupon-copy-btn:hover { color: #f0f0f0 !important; } html.dark .coupon-lightbox-apply { background: #ededed !important; color: #0d0d0d !important; } html.dark .coupon-lightbox-apply:hover { background: #d9d9d9 !important; } /* ========================================================================= 21. CHECKOUT (variante B) — layouts/checkout.blade.php (body .checkout-page). checkout.css é escopado em .checkout-page e usa tokens --ck-* + cinzas LITERAIS (#fff, #f3f4f6, #030712, #e5e7eb…). Carrega só no checkout, então nenhuma seção anterior o alcançava. Aqui: (a) redefine os tokens --ck-* p/ a rampa carvão (card destaca da página); botões primários viram PÍLULA CLARA (ação primária no fundo escuro); (b) cobre lacunas de utilitárias Tailwind escopadas ao checkout (border-gray-*, bg-gray-200, hovers, vermelhos/verdes/âmbar semânticos); (c) ajusta literais de componente (inputs, cupom, quantidade, autocomplete, divisores, slider, rodapé) que não passam por var. Os usam stroke="currentColor" → seguem o `color` herdado; basta acertar o color do container (sem mexer em stroke). As iframes do Stripe (Payment/Express) recebem appearance carvão por JS (resources/js/checkout). ========================================================================= */ /* (a) Tokens --ck-* no dark — rampa neutra (R=G=B). --ck-primary CLARO tem dupla função: fundo das pílulas primárias E borda de foco dos inputs. */ html.dark .checkout-page { --ck-primary: #ededed; --ck-primary-hover: #ffffff; --ck-bg: #161616; --ck-card-bg: #1f1f1f; --ck-border: #2e2e2e; --ck-text: #e5e5e5; --ck-text-muted: #a3a3a3; --ck-text-light: #8a8a8a; --ck-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --ck-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4); } /* Cards: contorno sutil p/ destacar do fundo #0d0d0d (no light era só sombra). */ html.dark .checkout-page .checkout-card, html.dark .checkout-page .express-checkout-card { border: 1px solid var(--ck-border) !important; } /* Botões primários → pílula CLARA com texto/ícone escuros (currentColor). */ html.dark .checkout-page .btn-primary { background: #ededed !important; color: #0d0d0d !important; } html.dark .checkout-page .btn-primary:hover { background: #ffffff !important; color: #0d0d0d !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; } html.dark .checkout-page .btn-primary:disabled { background: #3a3a3a !important; color: #8a8a8a !important; } html.dark .checkout-page .btn-pay { background: #ededed !important; } html.dark .checkout-page .btn-pay:hover { background: #ffffff !important; } /* CTAs "vazio"/"continuar" usam bg-gray-950 (Seção 4 já inverte p/ pílula clara + texto escuro); só falta o hover (variante :hover não coberta globalmente). */ html.dark .checkout-page .hover\:bg-gray-950:hover, html.dark .checkout-page .hover\:bg-gray-900:hover { background-color: #d9d9d9 !important; } /* Step indicator: passo ativo = pílula clara; concluído = cinza médio; divisor. */ html.dark .checkout-page .step-number.active { background: #ededed !important; color: #0d0d0d !important; } html.dark .checkout-page .step-number.completed { background: #404040 !important; color: #e5e5e5 !important; } html.dark .checkout-page .step-divider.completed { background: #737373 !important; } /* Foco legado (literal #030712) → borda/realce claros neutros. */ html.dark .checkout-page input:focus, html.dark .checkout-page select:focus { border-color: #ededed !important; box-shadow: 0 0 0 3px rgba(237, 237, 237, 0.12) !important; } /* Inputs/selects de fundo branco → superfície escura. */ html.dark .checkout-page .form-input, html.dark .checkout-page .coupon-input, html.dark .checkout-page .case-selector { background: #1a1a1a !important; } html.dark .checkout-page .form-input:disabled, html.dark .checkout-page .coupon-input:disabled { background: #161616 !important; } /* Campo somente-leitura da quantidade (input nu dentro do controle escuro). */ html.dark .checkout-page .quantity-value { background: transparent !important; color: #e5e5e5 !important; } /* Botão "Aplicar" cupom (literal cinza-claro) → cinza médio neutro. */ html.dark .checkout-page .coupon-btn { background-color: #333333 !important; color: #e5e5e5 !important; } html.dark .checkout-page .coupon-btn:hover:not(:disabled) { background-color: #404040 !important; } /* Quantidade (±): pílula escura, ícone claro (currentColor). */ html.dark .checkout-page .quantity-btn { background: #262626 !important; border-color: #525252 !important; color: #e5e5e5 !important; } html.dark .checkout-page .quantity-btn:hover:not(:disabled) { background: #333333 !important; border-color: #737373 !important; color: #ffffff !important; } html.dark .checkout-page .quantity-btn:active:not(:disabled) { background: #1a1a1a !important; } html.dark .checkout-page .quantity-btn:disabled, html.dark .checkout-page .quantity-btn[disabled] { background: #161616 !important; border-color: #2e2e2e !important; color: #525252 !important; } /* Imagem redonda do item (fundo claro → escuro; ícone herda cor clara). */ html.dark .checkout-page .cart-item-image { background: #262626 !important; color: #a3a3a3 !important; } /* Item "já adquirido" (gradiente claro + tracejado claro). */ html.dark .checkout-page .cart-item-disabled { background: #161616 !important; border-color: #404040 !important; } /* Dots do slider de benefícios. */ html.dark .checkout-page .slider-dot { background: #404040 !important; } html.dark .checkout-page .slider-dot:hover { background: #737373 !important; } html.dark .checkout-page .slider-dot.active { background: #e5e5e5 !important; } /* Slider de benefícios — ícone/título/descrição (literais escuros). Desfaz também a colisão com .benefit-icon da Seção 18 (que pinta bg/borda brand-100; no checkout o .benefit-icon é só um contêiner de ícone, sem caixa). */ html.dark .checkout-page .benefit-icon { background: transparent !important; background-image: none !important; border: 0 !important; color: #c4c4c4 !important; } html.dark .checkout-page .benefit-title { color: #e5e5e5 !important; } html.dark .checkout-page .benefit-description { color: #a3a3a3 !important; } /* Grade-resumo: borda-topo clara → neutra + hover do ícone (group-hover). */ html.dark .checkout-page .benefits-summary-grid { border-top-color: #2e2e2e !important; } html.dark .checkout-page .group:hover .group-hover\:text-gray-900 { color: #e5e5e5 !important; } /* Divisor "or pay with card" do Express (span branco). */ html.dark .checkout-page #express-checkout-divider span { background: #1f1f1f !important; } /* Autocomplete de país (dropdown branco). */ html.dark .checkout-page .checkout-country-dropdown { background: #1f1f1f !important; border-color: #2e2e2e !important; } html.dark .checkout-page .ck-country-item:hover, html.dark .checkout-page .ck-country-item:focus, html.dark .checkout-page .ck-country-item.active { background-color: #2a2a2a !important; } html.dark .checkout-page .ck-country-item span { color: #e5e5e5 !important; } html.dark .checkout-page .ck-country-empty { color: #8a8a8a !important; } /* Overlay de loading de passo (rgba branco → carvão). */ html.dark .checkout-page .step-loading-overlay { background: rgba(13, 13, 13, 0.8) !important; } /* Card de erro genérico (branco → escuro). */ html.dark .checkout-page .checkout-error-card { background-color: #1f1f1f !important; } /* (b) Lacunas de utilitárias Tailwind (escopadas ao checkout) ------------- */ /* Bordas cinza não cobertas globalmente. */ html.dark .checkout-page .border-gray-200 { border-color: #2e2e2e !important; } html.dark .checkout-page .border-gray-300 { border-color: #404040 !important; } /* Hairlines do divisor Express. */ html.dark .checkout-page .bg-gray-200 { background-color: #2e2e2e !important; } /* Hover claro de botões secundários (add-another / buy-credits). */ html.dark .checkout-page .hover\:bg-gray-50:hover { background-color: #262626 !important; } /* Ícone do estado vazio (cinza muito claro → menos berrante). */ html.dark .checkout-page .text-gray-300, html.dark .checkout-page .text-gray-200 { color: #6b6b6b !important; } /* Vermelhos semânticos: superfície clara → tinta escura translúcida + texto claro. */ html.dark .checkout-page .bg-red-50 { background-color: rgba(248, 113, 113, 0.12) !important; } html.dark .checkout-page .border-red-200 { border-color: rgba(248, 113, 113, 0.30) !important; } html.dark .checkout-page .text-red-700, html.dark .checkout-page .text-red-600 { color: #fca5a5 !important; } html.dark .checkout-page .text-red-500, html.dark .checkout-page .hover\:text-red-700:hover { color: #f87171 !important; } /* .error-message + .coupon-message (literais #fef2f2/#fecaca/#dc2626). */ html.dark .checkout-page .error-message { background: rgba(248, 113, 113, 0.12) !important; border-color: rgba(248, 113, 113, 0.30) !important; color: #fca5a5 !important; } html.dark .checkout-page .coupon-message { color: #fca5a5 !important; } /* Verdes semânticos (cupom aplicado, sucesso). */ html.dark .checkout-page .coupon-applied { background-color: rgba(52, 211, 153, 0.12) !important; border-color: rgba(52, 211, 153, 0.30) !important; } html.dark .checkout-page .coupon-applied-info, html.dark .checkout-page .coupon-applied-discount, html.dark .checkout-page .coupon-remove-btn, html.dark .checkout-page .coupon-discount-label, html.dark .checkout-page .coupon-discount-amount { color: #6ee7b7 !important; } html.dark .checkout-page .bg-emerald-100 { background-color: rgba(52, 211, 153, 0.14) !important; } html.dark .checkout-page .text-emerald-600 { color: #6ee7b7 !important; } /* Âmbar (processando). */ html.dark .checkout-page .bg-amber-100 { background-color: rgba(251, 191, 36, 0.14) !important; } html.dark .checkout-page .text-amber-600 { color: #fcd34d !important; } /* Checkboxes de termos/LGPD (border-gray-300 + estado marcado). */ html.dark .checkout-page input[type="checkbox"] { border-color: #525252 !important; } html.dark .checkout-page input[type="checkbox"]:checked { background-color: #737373 !important; border-color: #737373 !important; } /* (c) Rodapé do checkout: logo dessaturado (brightness(0) → preto, sumia). */ html.dark .checkout-page .checkout-footer-logo img { filter: brightness(0) invert(1) !important; opacity: 0.35 !important; } html.dark .checkout-page .checkout-footer-logo:hover img { opacity: 0.55 !important; } /* ============================================================================ 19. PÁGINA DE VISTO (single-visa) — playbook, histórias de sucesso, FAQ. Superfície de referência da página = a seção de requisitos: bg-white → --color-brand-50 (#171717), a "superfície base" da rampa. Playbook e depoimentos seguem ESTA cor (não o carvão da página #0d0d0d). (a) Playbook: todas as cores fluem dos tokens --pb-* definidos só em :root (#fff, slate-*). Nunca eram redefinidos no dark → a seção inteira renderizava clara. Redefinir os tokens sob #playbook conserta cards, texto, bordas e rail de uma vez (a cascata de custom properties propaga p/ todos os descendentes). A banda da seção (--pb-bg-soft) usa #171717 = requisitos; os cards (--pb-bg) levam 1 nível de lift (#1f1f1f) p/ destacar. (b) bg-slate-50/50 (depoimentos) e bg-slate-50/40 (vistos relacionados): a cobertura da Seção 3 casa `.bg-slate-50`, NÃO as variantes com opacidade (`.bg-slate-50\/50`). Apontam p/ a superfície base #171717 (= requisitos). (c) Fades dos marquees: gradientes BRANCOS no tema claro. Depoimentos fecham em #171717 (cor da banda); FAQ e benefits fecham em #0d0d0d (seção transparente sobre o fundo da página / mídia escura do hero). (d) Requisitos: o quadradinho do ícone (.bg-brand-50, literal claro no tailwind-built) renderizava branco no dark → fundo removido. ========================================================================== */ /* (a) Playbook — rampa carvão neutro nos tokens (R=G=B, sem viés). */ html.dark #playbook, html.dark .playbook-stack { --pb-bg: #1f1f1f; /* brand-100 — card (1 nível de lift sobre a banda) */ --pb-bg-soft: #171717; /* brand-50 — banda da seção = mesma cor dos requisitos */ --pb-bg-muted: #262626; /* brand-200 — superfície muted (inner) */ --pb-text: #dedede; /* brand-900 — texto principal */ --pb-text-dim: #c4c4c4; /* brand-700 — corpo / secundário */ --pb-text-mute: #9e9e9e; /* brand-500 — labels / numeração mono */ --pb-border: #262626; /* brand-200 — bordas dos cards */ --pb-border-soft: #1f1f1f; /* brand-100 — bordas suaves */ --pb-border-strong: #404040; /* brand-300 — dots inativos / divisores */ } /* (b) Bandas de seção com opacidade (depoimentos /50, vistos relacionados /40, heros de FAQ/arquivo e índice de dúvidas /80) → superfície base #171717 (mesma cor da seção de requisitos), não o carvão da página. A Seção 3 casa só `.bg-slate-50` PURO — as variantes com opacidade têm outro seletor (`.bg-slate-50\/80`), então sem isto a faixa renderiza slate claro literal (#f8fafc a 80%) sobre o #0d0d0d. Casa com o destino dos fades abaixo. */ html.dark .bg-slate-50\/80, html.dark .bg-slate-50\/50, html.dark .bg-slate-50\/40 { background-color: var(--color-brand-50) !important; } /* Hover das linhas de pergunta (cards de visto no índice de dúvidas + itens do arquivo) usam `hover:bg-slate-50/80` — variante com opacidade não coberta pelo hover puro da Seção 3. Mapeia para a superfície elevada de hover (brand-100). */ html.dark .hover\:bg-slate-50\/80:hover { background-color: var(--color-brand-100) !important; } /* (d) Requisitos — o quadradinho do ícone usa .bg-brand-50, que no tailwind-built é LITERAL claro (rgb(246 248 251)), não a variável → renderiza branco no dark. Remove o fundo claro; o glifo (Lucide, currentColor herdado de .text-brand-600 literal azulado) vira o cinza neutro da rampa. */ html.dark .visa-requirements__icon { background-color: transparent !important; color: var(--color-brand-600) !important; } /* (c) Fades dos depoimentos — fade a partir de #171717 (cor da banda /50, igual aos requisitos). Vertical no desktop, horizontal no mobile; mesmo perfil de stops do tema (styles.css). */ html.dark .testimonial-fade--top { background: linear-gradient( to bottom, rgba(23, 23, 23, 1) 0%, rgba(23, 23, 23, 0) 100% ) !important; } html.dark .testimonial-fade--bottom { background: linear-gradient( to bottom, rgba(23, 23, 23, 0.98) 0%, rgba(23, 23, 23, 0.88) 28%, rgba(23, 23, 23, 0.52) 68%, rgba(23, 23, 23, 0.08) 94%, rgba(23, 23, 23, 0) 100% ) !important; box-shadow: none !important; /* removia o glow branco do tema claro */ } html.dark .testimonial-fade--left { background: linear-gradient( to right, rgba(23, 23, 23, 1) 0%, rgba(23, 23, 23, 0.85) 28%, rgba(23, 23, 23, 0.48) 58%, rgba(23, 23, 23, 0.12) 82%, rgba(23, 23, 23, 0) 100% ) !important; } html.dark .testimonial-fade--right { background: linear-gradient( to left, rgba(23, 23, 23, 1) 0%, rgba(23, 23, 23, 0.85) 28%, rgba(23, 23, 23, 0.48) 58%, rgba(23, 23, 23, 0.12) 82%, rgba(23, 23, 23, 0) 100% ) !important; } /* (c) Fades do FAQ — fecham em #171717. A seção é transparente, mas o carrega .bg-gray-50, que no dark mapeia p/ --color-brand-50 (#171717) com !important → vence `html.dark body` (#0d0d0d). Logo o fundo REAL atrás do marquee é #171717, não o carvão da página; o fade precisa casar com ele. */ html.dark .faq-fade--left { background: linear-gradient( to right, rgba(23, 23, 23, 1) 0%, rgba(23, 23, 23, 0.85) 28%, rgba(23, 23, 23, 0.48) 58%, rgba(23, 23, 23, 0.12) 82%, rgba(23, 23, 23, 0) 100% ) !important; } html.dark .faq-fade--right { background: linear-gradient( to left, rgba(23, 23, 23, 1) 0%, rgba(23, 23, 23, 0.85) 28%, rgba(23, 23, 23, 0.48) 58%, rgba(23, 23, 23, 0.12) 82%, rgba(23, 23, 23, 0) 100% ) !important; } /* (c) Fades do benefits-marquee (mobile-only, dentro do hero de elegibilidade — superfície de mídia escura). O fade branco do tema gerava barras claras sobre a foto escura; recolore p/ o carvão do hero (#0d0d0d, fallback do card). */ html.dark .vnv-benefits-fade--l { background: linear-gradient( to right, rgba(13, 13, 13, 1) 0%, rgba(13, 13, 13, 0.85) 28%, rgba(13, 13, 13, 0.48) 58%, rgba(13, 13, 13, 0.12) 82%, rgba(13, 13, 13, 0) 100% ) !important; } html.dark .vnv-benefits-fade--r { background: linear-gradient( to left, rgba(13, 13, 13, 1) 0%, rgba(13, 13, 13, 0.85) 28%, rgba(13, 13, 13, 0.48) 58%, rgba(13, 13, 13, 0.12) 82%, rgba(13, 13, 13, 0) 100% ) !important; } /* ========================================================================= 22. ARCHIVE DE DESTINOS (cidades/estados) — destinations-archive.blade.php. Toolbar (busca/ordenar/filtrar) e botão "Carregar mais" usam slate-* LITERAL sem rampa global: bg-white/border-slate-300 já caem nas seções anteriores, MAS bg-slate-900 (botão), text-white e ring-slate-900 (anéis de foco) ficaram de fora — o botão azulava e os focos sumiam no carvão. Aqui o botão primário vira PÍLULA CLARA (mesma lógica do checkout) e os anéis de foco passam p/ a rampa. Escopo por id (#vnv-dest-archive-*) → zero efeito em outros slate-900 da base. ========================================================================= */ html.dark #vnv-dest-archive-loadmore { background-color: var(--color-brand-900) !important; /* #dedede */ color: #141414 !important; } html.dark #vnv-dest-archive-loadmore:hover { background-color: var(--color-brand-800) !important; /* #d2d2d2 */ color: #141414 !important; } html.dark #vnv-dest-archive-search:focus, html.dark #vnv-dest-archive-sort:focus, html.dark #vnv-dest-archive-filter:focus, html.dark #vnv-dest-archive-loadmore:focus { --tw-ring-color: var(--color-brand-700) !important; /* #c4c4c4 */ border-color: var(--color-brand-700) !important; } /* ========================================================================= 15g. Drawer mobile — itens LOGADOS (conta + notificações) ------------------------------------------------------------------------ No mobile, os itens logados (Notificações, Mensagens, Minha conta) vivem DENTRO do hamburger, em sequência com as outras categorias. O drawer NÃO é branco no escuro — §15 já tematiza .mobile-menu-drawer (#0d0d0d) e .mobile-menu-item (#171717). As categorias logadas reaproveitam essas classes, então já ficam corretas. Faltam só as peças .mm-* próprias dos subpainéis (cards de conta, logout, "Ver todas", divisor, "Em breve"); os textos .vnv-* herdam html.dark .vnv-* de header-account.css (texto claro). Escopo por .mm-* → zero efeito fora do drawer logado. ========================================================================= */ /* Cabeçalho da conta no subpainel: divisor claro → divisor escuro. */ html.dark .mm-acct-head { border-color: var(--color-brand-200) !important; /* #262626 */ } /* Cards do menu de conta + botão de logout: superfície clara → superfície escura, espelhando .mobile-menu-item (os irmãos do drawer). */ html.dark .mm-acct-menu .vnv-acct__item, html.dark .mm-acct-logout-btn { background: var(--color-brand-50) !important; /* #171717 */ border-color: var(--color-brand-200) !important; /* #262626 */ } html.dark .mm-acct-menu .vnv-acct__item:hover, html.dark .mm-acct-logout-btn:hover { background: var(--color-brand-100) !important; /* #1f1f1f */ border-color: var(--color-brand-300) !important; /* #404040 */ } /* "Ver todas as notificações": era near-black (#0f172a) → sumia no #0d0d0d. Vira pílula CLARA, igual a .mobile-menu-cta-primary. */ html.dark .mm-notif-all { background: var(--color-brand-900) !important; /* #dedede */ color: #141414 !important; } html.dark .mm-notif-all:hover { background: var(--color-brand-800) !important; /* #d2d2d2 */ } /* Estado vazio: texto apagado legível no escuro. */ html.dark .mm-notif-empty { color: var(--color-brand-500) !important; /* #9e9e9e */ } /* Pílula "Em breve" (Mensagens): sky-100 clara sumiria no escuro → superfície e texto da rampa, mantendo o tom de "ainda não disponível". */ html.dark .mm-soon-pill { background: var(--color-brand-100) !important; /* #1f1f1f */ color: var(--color-brand-700) !important; /* #c4c4c4 */ } /* Linha de ícones logados (Notificações, Mensagens, Minha conta): em claro são superfícies slate sobre fundo branco; no carvão viram superfícies da rampa. O divisor inferior e as superfícies dos botões espelham .mm-acct-head / .mobile-menu-item (os irmãos do drawer). O badge vermelho (#dc2626) e o ponto sky-400 mantêm-se — contrastam bem sobre o carvão. */ html.dark .mm-auth-icons { border-color: var(--color-brand-200) !important; /* #262626 */ } html.dark .mm-auth-icon { background: var(--color-brand-50) !important; /* #171717 */ color: var(--color-brand-700) !important; /* #c4c4c4 */ } html.dark .mm-auth-icon:hover { background: var(--color-brand-100) !important; /* #1f1f1f */ color: var(--color-brand-900) !important; /* #dedede */ } html.dark .mm-auth-icon--soon, html.dark .mm-auth-icon--soon:hover { background: var(--color-brand-50) !important; /* #171717 — sem realce */ color: var(--color-brand-500) !important; /* #9e9e9e */ } /* "Mais" achatado ao 1º nível: o divisor superior claro → divisor da rampa. */ html.dark .mobile-menu-secondary { border-top-color: var(--color-brand-200) !important; /* #262626 */ }