/* ════════════════════════════════════════════════════════════════════════ MODO ESCURO — dark-mode.css Sempre carregado; ativado pela class "dark" no (botão na tela). Sobrescreve apenas neutros/superfícies. As cores de marca e ação são herdadas do tema ativo (tema-laranja.css / tema-vermelho.css). ════════════════════════════════════════════════════════════════════════ */ body.dark { --color-text: #e9e7f0; --color-muted: #9a93a8; --color-border: #2a2536; --color-bg: #0d0b14; --color-white: #17141f; --color-brand-light: #221a33; --color-action-bg: #2a1608; color-scheme: dark; } body.dark { background: #08060d; } /* Grão um pouco mais discreto no escuro */ body.dark::before { opacity: .05; } /* Header glass escuro */ body.dark .site-header { background: color-mix(in srgb, #0d0b14 78%, transparent); border-bottom-color: rgba(255,255,255,.06); } /* Superfícies elevadas — leve gradiente p/ profundidade */ body.dark .step-card, body.dark .travel-card, body.dark .benefit-card, body.dark .testimonial-card, body.dark .card-form, body.dark .confirm-card, body.dark .content-doc, body.dark .sv-box, body.dark .info-box, body.dark .contact-card, body.dark .faq-item, body.dark .sidebar, body.dark .dark-toggle, body.dark .hero-stats { background: linear-gradient(180deg, #1b1726, #17141f); border-color: #2a2536; } body.dark .travel-card-footer, body.dark .content-doc-footer, body.dark .sidebar-about, body.dark .detail-tabs, body.dark .info-box, body.dark .captcha-placeholder { background: #110e1a; } body.dark .travel-card-footer { border-top-color: #2a2536; } /* Títulos: var(--color-brand) fica escuro demais no escuro → usar texto claro */ body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark .section-title, body.dark .page-title, body.dark .stat-num, body.dark .faq-q, body.dark .card-form-title, body.dark .step-card h3, body.dark .benefit-card h3, body.dark .travel-card-body h3, body.dark .testimonial-name, body.dark .contact-card-info h4, body.dark .confirm-card h4, body.dark .detail-cta-box h3, body.dark .content-doc-body h3, body.dark .content-doc-body h4, body.dark .form-label { color: var(--color-text); } /* O brand-light vira fundo escuro: garante ícones legíveis */ body.dark .benefit-icon, body.dark .contact-card-icon, body.dark .gallery-item { background: #221a33; color: var(--color-text); } /* Inputs */ body.dark .form-input { background: #0d0b14; border-color: #2a2536; color: var(--color-text); } body.dark .header-tag-form { background: #110e1a; border-color: #2a2536; } body.dark .header-tag-form input { color: var(--color-text); } body.dark .nav-pill-btn { background: #17141f; border-color: #2a2536; color: var(--color-muted); } body.dark .tab-btn.active { background: #1b1726; color: var(--color-text); } /* Quotation mark testimonial */ body.dark .testimonial-card::before { color: #221a33; } /* Alerts */ body.dark .alert-info { background: #1a1530; border-color: var(--color-brand-mid); color: #c9bce8; } body.dark .alert-warning { background: #2a1d05; border-color: var(--color-warning); color: #fbbf24; } body.dark .alert-danger { background: #2c1416; border-color: #e06b6b; color: #f1a1a1; } body.dark .alert-success { background: #0e2a1c; border-color: #4cae87; color: #7ee0a8; } /* Utilitários de cor + corpo da mensagem no escuro (tons mais claros p/ legibilidade) */ body.dark .text-success { color: #7ee0a8; } body.dark .text-danger { color: #f1a1a1; } body.dark .text-warning { color: #fbbf24; } body.dark .text-info { color: #c9bce8; } /* O título herda a cor semântica do alert (sobrepõe a neutralização de h3 acima) */ body.dark .message-alert-title { color: inherit; } /* Scrollbar */ body.dark ::-webkit-scrollbar { width: 9px; } body.dark ::-webkit-scrollbar-track { background: #110e1a; } body.dark ::-webkit-scrollbar-thumb { background: #2a2536; border-radius: 5px; } body.dark ::-webkit-scrollbar-thumb:hover { background: #3a3349; } body.dark .footer-bottom { border-top-color: rgba(255,255,255,.06); } /* Botão de modo escuro no header — contraste no escuro */ body.dark .header-dark-toggle { background: #221a33; color: var(--color-text); } body.dark .header-dark-toggle:hover { color: var(--color-action); } /* ════════════════════════════════════════════════════════════════════════ SUPERFÍCIES DE MARCA E ACENTOS NO ESCURO As cores de marca (roxo) e ação (laranja) não mudam por token, então os blocos que as usam ficavam "presos" na aparência do modo claro. Aqui elas são escurecidas/atenuadas com color-mix(... #000) — continua respeitando o tema ativo (laranja/vermelho), só que num tom fosco compatível com o escuro. ════════════════════════════════════════════════════════════════════════ */ /* Hero */ body.dark .hero { background: radial-gradient(1100px 620px at 88% -12%, rgba(var(--rgb-action), .16), transparent 55%), radial-gradient(800px 500px at -8% 112%, rgba(255, 255, 255, .04), transparent 52%), linear-gradient(150deg, color-mix(in srgb, var(--color-brand) 50%, #000) 0%, color-mix(in srgb, var(--color-brand-mid) 36%, #000) 100%); } /* Cabeçalho de página (breadcrumb) — presente em todas as páginas */ body.dark .breadcrumb-area { background: radial-gradient(700px 320px at 92% 0%, rgba(var(--rgb-action), .14), transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--color-brand) 46%, #000), color-mix(in srgb, var(--color-brand-mid) 32%, #000)); } /* Seção da TAG */ body.dark .tag-section { background: radial-gradient(700px 360px at 50% -20%, rgba(var(--rgb-action), .16), transparent 62%), linear-gradient(150deg, color-mix(in srgb, var(--color-brand) 50%, #000), color-mix(in srgb, var(--color-brand-mid) 36%, #000)); } /* Rodapé */ body.dark .site-footer { background: color-mix(in srgb, var(--color-brand) 42%, #000); } /* Barra de aviso (topo) e botão "voltar ao topo" — laranja fosco no escuro */ body.dark .notice-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--color-action-dark) 55%, #000), color-mix(in srgb, var(--color-action) 58%, #000)); } body.dark .back-to-top { background: linear-gradient(135deg, color-mix(in srgb, var(--color-action) 72%, #000), color-mix(in srgb, var(--color-action-dark) 72%, #000)); } /* Badges de marca/ação: bg-light + texto na cor cheia ficavam escuro-sobre-escuro no modo escuro (o .badge-brand virava uma mancha). O fundo precisa ser OPACO porque o badge fica sobre fotos (cards de viagem): usa um tom escuro tingido pela marca + texto claro da mesma cor — legível nos temas laranja e vermelho. */ body.dark .badge-brand { background: color-mix(in srgb, var(--color-brand-mid) 28%, #17141f); color: color-mix(in srgb, var(--color-brand-mid) 50%, #fff); } body.dark .badge-action { background: color-mix(in srgb, var(--color-action) 24%, #17141f); color: color-mix(in srgb, var(--color-action) 60%, #fff); } /* Botão primário (CTA laranja) — laranja fosco no escuro, com brilho suavizado */ body.dark .btn-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--color-action) 78%, #000), color-mix(in srgb, var(--color-action-dark) 78%, #000)); box-shadow: 0 8px 22px rgba(0, 0, 0, .4); } body.dark .btn-primary:hover { box-shadow: 0 12px 28px rgba(var(--rgb-action), .28); } /* Botão de contorno branco (usado sobre fundos de marca) — brancos atenuados */ body.dark .btn-outline-white { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .4); } body.dark .btn-outline-white:hover { background: rgba(255, 255, 255, .12); } /* Botões de contorno/fantasma: o roxo da marca fica escuro demais sobre o fundo escuro (chegava a sumir) — clareia para um lilás legível. */ body.dark .btn-outline { color: #d4c4ef; border-color: color-mix(in srgb, var(--color-brand-mid) 75%, #fff); } body.dark .btn-outline:hover { background: var(--color-brand-mid); border-color: var(--color-brand-mid); color: #fff; } body.dark .btn-ghost { color: #d4c4ef; } body.dark .btn-ghost:hover { color: var(--color-action); } /* Botão "recusar" (perigo) com contraste no escuro */ body.dark .btn-reject { color: #ef9a9a; border-color: #ef9a9a; } body.dark .btn-reject:hover { background: var(--color-danger); color: #fff; }