/* ================================================ DARK MODE — Cosméticos Labs Arquivo: css/dark-mode.css Carregado APÓS style.css — 100% aditivo Nunca sobrescreve: transforms do carrossel, animation do track, JS-controlled sliders ================================================ */ /* ------------------------------------------------ 1. VARIÁVEIS DARK — aplicadas via classe no ------------------------------------------------ */ html.dark-mode { --dm-bg: #0f1117; --dm-bg-secao: #161b24; --dm-bg-card: #1e2534; --dm-bg-card-alt: #252d3d; --dm-borda: rgba(255,255,255,0.07); --dm-texto: #e8eaf0; --dm-texto-sec: #9ba3b4; --dm-texto-muted: #5c6478; --dm-verde: #4caf6e; --dm-verde-hover: #3d9b5c; --dm-vermelho: #e05555; --dm-sombra: 0 8px 32px rgba(0,0,0,0.5); --dm-sombra-card: 0 4px 16px rgba(0,0,0,0.4); } /* ------------------------------------------------ 2. BASE — body e fundo geral ------------------------------------------------ */ html.dark-mode body { background-color: var(--dm-bg); color: var(--dm-texto); } /* ------------------------------------------------ 3. HEADER ------------------------------------------------ */ html.dark-mode .header-fixo { border-bottom-color: var(--dm-borda); box-shadow: 0 4px 20px rgba(0,0,0,0.4); } html.dark-mode .header-fixo::before { filter: brightness(0.25) saturate(0.5); } html.dark-mode .menu-desktop a { color: var(--dm-texto); } html.dark-mode .menu-desktop a:hover { color: var(--dm-verde); } html.dark-mode .hamburger span { background: var(--dm-texto); } /* ------------------------------------------------ 4. BARRA DE URGÊNCIA — mantém o vermelho, escurece ------------------------------------------------ */ html.dark-mode .barra-urgencia { background: linear-gradient(135deg, #b71c1c, #c62828); } /* ------------------------------------------------ 5. HERO ------------------------------------------------ */ html.dark-mode .hero::before { filter: brightness(0.3) saturate(0.6); } html.dark-mode .hero-titulo { color: var(--dm-verde); text-shadow: 0 2px 20px rgba(76,175,110,0.2); } html.dark-mode .hero-subtitulo { color: var(--dm-texto-sec); } html.dark-mode .avaliacoes span { color: var(--dm-texto-sec); } html.dark-mode .badge { background: linear-gradient(135deg, #2a5e30, #1e4a26); border: 1px solid rgba(76,175,110,0.3); } /* ------------------------------------------------ 6. SEÇÃO PROBLEMA ------------------------------------------------ */ html.dark-mode .secao-problema::before { filter: brightness(0.15) saturate(0.3); } html.dark-mode .problema-card { background: var(--dm-bg-card); border: 1px solid var(--dm-borda); box-shadow: var(--dm-sombra-card); } html.dark-mode .problema-card h3 { color: var(--dm-verde); } html.dark-mode .problema-card p { color: var(--dm-texto-sec); } html.dark-mode .problema-conclusao { color: var(--dm-verde); background: rgba(76,175,110,0.08); border-left-color: var(--dm-verde); } /* ------------------------------------------------ 7. SEÇÃO SOLUÇÃO ------------------------------------------------ */ html.dark-mode .secao-solucao::before { filter: brightness(0.12) saturate(0.3); } html.dark-mode .solucao-conteudo h2 { color: var(--dm-texto); } html.dark-mode .solucao-conteudo h2::after { background: var(--dm-verde); } html.dark-mode .badge-exclusivo { background: linear-gradient(135deg, #1a4a20, #0f3015); border: 1px solid rgba(76,175,110,0.3); } html.dark-mode .intro-texto { color: var(--dm-texto-sec); } html.dark-mode .diferencial-box { background: linear-gradient(135deg, #1a2515, #0f1a0d); border-left-color: var(--dm-verde); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } html.dark-mode .diferencial-box h3 { color: var(--dm-verde); } html.dark-mode .diferencial-box p { color: var(--dm-texto-sec); } /* ------------------------------------------------ 8. AUTORIDADE ------------------------------------------------ */ html.dark-mode .autoridade::before { filter: brightness(0.12) saturate(0.3); } html.dark-mode .autoridade-conteudo h2 { color: var(--dm-texto); } html.dark-mode .cargo { color: var(--dm-verde); } html.dark-mode .bio { color: var(--dm-texto-sec); border-left-color: var(--dm-verde); } html.dark-mode .credencial { background: var(--dm-bg-card); border-color: var(--dm-borda); color: var(--dm-texto-sec); } /* ------------------------------------------------ 9. ANTES E DEPOIS — NÃO toca em transforms/track ------------------------------------------------ */ html.dark-mode .antes-depois::before { filter: brightness(0.12) saturate(0.3); } html.dark-mode .antes-depois-card { background: var(--dm-bg-card); border-color: var(--dm-verde); } html.dark-mode .legenda { background: rgba(0,0,0,0.9); } html.dark-mode .ad-seta { background: var(--dm-bg-card); border-color: var(--dm-borda); color: var(--dm-verde); } html.dark-mode .ad-seta:hover { background: var(--dm-verde); color: #fff; } html.dark-mode .indicador { background: rgba(76,175,110,0.2); } html.dark-mode .indicador.ativo { background: var(--dm-verde); } /* ------------------------------------------------ 10. DEPOIMENTOS — NÃO toca em transform do track ------------------------------------------------ */ html.dark-mode .depoimentos::before { filter: brightness(0.12) saturate(0.3); } html.dark-mode .depoimento-card { background: var(--dm-bg-card); border-color: var(--dm-borda); box-shadow: var(--dm-sombra-card); } html.dark-mode .depoimento-header h4 { color: var(--dm-texto); } html.dark-mode .cidade { color: var(--dm-texto-muted); } html.dark-mode .depoimento-card > p { color: var(--dm-texto-sec); } html.dark-mode .dep-rodape { border-top-color: var(--dm-borda); } html.dark-mode .dep-tempo { color: var(--dm-texto-muted); } /* Tags de problema no dark */ html.dark-mode .dep-tag--acne { background: #2d1515; color: #e57373; border-color: #5c2020; } html.dark-mode .dep-tag--oleosidade { background: #0d1f35; color: #64b5f6; border-color: #1a3a5c; } html.dark-mode .dep-tag--manchas { background: #1e1535; color: #ce93d8; border-color: #3d2060; } html.dark-mode .dep-tag--foliculite { background: #2d1e0d; color: #ffb74d; border-color: #5c3a10; } html.dark-mode .dep-tag--sensivel { background: #0d2515; color: #81c784; border-color: #1a4a20; } html.dark-mode .dep-tag--rotina { background: #2d2800; color: #fff176; border-color: #5c5000; } /* ------------------------------------------------ 11. BENEFÍCIOS ------------------------------------------------ */ html.dark-mode .beneficios-detalhados::before { filter: brightness(0.12) saturate(0.3); } html.dark-mode .beneficio-card { background: var(--dm-bg-card); box-shadow: var(--dm-sombra-card); } html.dark-mode .beneficio-card h3 { color: var(--dm-verde); } html.dark-mode .beneficio-card p { color: var(--dm-texto-sec); } /* ------------------------------------------------ 12. INGREDIENTES — NÃO toca no scroll horizontal ------------------------------------------------ */ html.dark-mode .ingredientes::before { filter: brightness(0.12) saturate(0.3); } html.dark-mode .ingrediente-card { background-color: var(--dm-bg-card) !important; background-blend-mode: luminosity; filter: brightness(0.9) saturate(0.7); border: 1px solid var(--dm-borda); } html.dark-mode .ingrediente-card:hover { filter: brightness(1) saturate(0.9); } html.dark-mode .ingrediente-card h3 { color: var(--dm-verde); text-shadow: 0 1px 8px rgba(0,0,0,0.5); } html.dark-mode .ingrediente-card p { color: var(--dm-texto-sec); } html.dark-mode .ingrediente-selo { background: var(--dm-verde); } html.dark-mode .ingrediente-numero { background: var(--dm-verde); } /* ------------------------------------------------ 13. COMO USAR ------------------------------------------------ */ html.dark-mode .como-usar::before { filter: brightness(0.12) saturate(0.3); } html.dark-mode .passo-item h3 { color: var(--dm-texto); } html.dark-mode .passo-item p { color: var(--dm-texto-sec); } html.dark-mode .passo-icone { background: var(--dm-bg-card); border-color: var(--dm-verde); } html.dark-mode .passo-numero { background: var(--dm-verde); } html.dark-mode .como-usar-obs { color: var(--dm-texto-sec); background: rgba(76,175,110,0.08); border-left-color: var(--dm-verde); } /* ------------------------------------------------ 14. TABELA COMPARATIVA ------------------------------------------------ */ html.dark-mode .comparacao::before { filter: brightness(0.12) saturate(0.3); } html.dark-mode .tabela-comparativa { background: var(--dm-bg-card); box-shadow: var(--dm-sombra); } html.dark-mode .tabela-comparativa th { background: linear-gradient(135deg, #1a4a20, #0f3015); } html.dark-mode .comparacao .tabela-comparativa thead th.destaque { background: linear-gradient(135deg, #2a6e35, #1a5025) !important; } html.dark-mode .tabela-comparativa td { border-bottom-color: var(--dm-borda); color: var(--dm-texto-sec); } html.dark-mode .comparacao .tabela-comparativa tbody td.destaque { background: rgba(76,175,110,0.08) !important; border-color: rgba(76,175,110,0.2); } html.dark-mode .comparacao .tabela-comparativa tbody tr:hover > td.destaque { background: rgba(76,175,110,0.14) !important; } /* ------------------------------------------------ 15. OFERTAS ------------------------------------------------ */ html.dark-mode .ofertas { background-color: var(--dm-bg-secao); background-image: none; } html.dark-mode .recomendacao-texto { color: var(--dm-texto-sec); } html.dark-mode .ofertas .card-oferta { background: var(--dm-bg-card); border-color: var(--dm-borda); box-shadow: var(--dm-sombra-card); } html.dark-mode .ofertas .card-oferta:hover { border-color: var(--dm-verde); } html.dark-mode .ofertas .card-destaque { border-color: var(--dm-verde); box-shadow: 0 10px 30px rgba(76,175,110,0.15); } html.dark-mode .ofertas .titulo { color: var(--dm-texto); } html.dark-mode .ofertas .preco-antigo { color: var(--dm-texto-muted); } html.dark-mode .ofertas .parcelas, html.dark-mode .ofertas .valor-inteiro, html.dark-mode .ofertas .centavos { color: var(--dm-verde); } html.dark-mode .ofertas .preco-vista { color: var(--dm-texto-sec); } html.dark-mode .ofertas .preco-vista strong { color: var(--dm-verde); } html.dark-mode .ofertas .faixa-vermelha { background: linear-gradient(135deg, #b71c1c, #c62828); } html.dark-mode .ofertas .btn-comprar { background: linear-gradient(135deg, var(--dm-verde), var(--dm-verde-hover)); } html.dark-mode .ofertas .btn-comprar:hover { background: linear-gradient(135deg, var(--dm-verde-hover), #2d7a42); } html.dark-mode .ofertas .frete { color: var(--dm-verde); } html.dark-mode .ofertas .badge-desconto-tag { background: var(--dm-bg); border-color: var(--dm-vermelho); color: var(--dm-vermelho); } /* ------------------------------------------------ 16. BÔNUS ------------------------------------------------ */ html.dark-mode .bonus::before { filter: brightness(0.12) saturate(0.3); } html.dark-mode .bonus-item { background: var(--dm-bg-card); border-color: var(--dm-borda); } html.dark-mode .bonus-item:hover { border-color: var(--dm-verde); } html.dark-mode .bonus-conteudo h3 { color: var(--dm-texto); } html.dark-mode .bonus-conteudo p { color: var(--dm-texto-sec); } html.dark-mode .bonus-total { background: var(--dm-bg-card); border-color: var(--dm-verde); } html.dark-mode .bonus-valor { color: var(--dm-verde); } /* ------------------------------------------------ 17. GARANTIA ------------------------------------------------ */ html.dark-mode .garantia::before { filter: brightness(0.12) saturate(0.3); } html.dark-mode .garantia-conteudo h2 { color: var(--dm-verde); } html.dark-mode .garantia-conteudo p { color: var(--dm-texto-sec); } html.dark-mode .garantia-lista li { color: var(--dm-texto-sec); border-bottom-color: var(--dm-borda); } html.dark-mode .garantia-obs { background: rgba(76,175,110,0.08); border-left-color: var(--dm-verde); color: var(--dm-texto-sec); } /* ------------------------------------------------ 18. FAQ ------------------------------------------------ */ html.dark-mode .faq::before { filter: brightness(0.12) saturate(0.3); } html.dark-mode .faq-item { border-bottom-color: var(--dm-borda); } html.dark-mode .faq-pergunta { color: var(--dm-texto); } html.dark-mode .faq-pergunta:hover { color: var(--dm-verde); background: rgba(76,175,110,0.06); } html.dark-mode .faq-icone { color: var(--dm-verde); } html.dark-mode .faq-resposta p { color: var(--dm-texto-sec); } /* ------------------------------------------------ 19. CTA FINAL — mantém o vermelho mas ajusta ------------------------------------------------ */ html.dark-mode .cta-final { background: linear-gradient(135deg, #7f0000, #930000); } html.dark-mode .cta-resumo { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); } html.dark-mode .cta-resumo li { border-bottom-color: rgba(255,255,255,0.08); } html.dark-mode .btn-cta-gigante { background: var(--dm-verde); } html.dark-mode .btn-cta-gigante:hover { background: var(--dm-verde-hover); } /* ------------------------------------------------ 20. FOOTER ------------------------------------------------ */ html.dark-mode .footer { background: #0a1a0c; } html.dark-mode .footer .tag-seguranca { background: var(--dm-bg-card); color: var(--dm-verde); } /* ------------------------------------------------ 21. MENU MOBILE ------------------------------------------------ */ html.dark-mode .menu-mobile::before { filter: brightness(0.1) saturate(0.2); background-color: var(--dm-bg); } html.dark-mode .menu-mobile a { color: var(--dm-texto); border-bottom-color: var(--dm-borda); } html.dark-mode .menu-mobile a:hover { color: var(--dm-verde); } /* ------------------------------------------------ 22. ELEMENTOS FLUTUANTES ------------------------------------------------ */ html.dark-mode .notificacao-compra { background: var(--dm-bg-card); border-color: var(--dm-borda); border-left-color: var(--dm-verde); } html.dark-mode .notif-nome { color: var(--dm-texto); } html.dark-mode .notif-info { color: var(--dm-texto-sec); } html.dark-mode .exit-popup-modal { background: var(--dm-bg-card); border-color: var(--dm-verde); } html.dark-mode .exit-popup-modal h2 { color: var(--dm-vermelho); } html.dark-mode .exit-popup-texto { color: var(--dm-texto-sec); } html.dark-mode .exit-input { background: var(--dm-bg); border-color: var(--dm-borda); color: var(--dm-texto); } html.dark-mode .exit-input:focus { border-color: var(--dm-verde); } html.dark-mode .exit-garantia { color: var(--dm-texto-muted); } html.dark-mode .voltar-topo { background: var(--dm-verde); } /* ------------------------------------------------ 23. TÍTULOS E PARÁGRAFOS GLOBAIS ------------------------------------------------ */ html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5 { color: var(--dm-texto); } html.dark-mode p { color: var(--dm-texto-sec); } html.dark-mode .titulo-secao { color: var(--dm-texto); } html.dark-mode .subtitulo-secao { color: var(--dm-texto-muted); } /* ------------------------------------------------ 24. BOTÃO TOGGLE — fixo no canto superior direito Posicionado abaixo do header (80px) + margem ------------------------------------------------ */ #dm-toggle { position: fixed; top: 92px; right: 18px; z-index: 999; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); background: rgba(30,37,52,0.85); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease; line-height: 1; padding: 0; } #dm-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,0.4); } /* No modo claro, o botão fica mais neutro */ html:not(.dark-mode) #dm-toggle { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.1); color: #333; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* Tooltip acessível */ #dm-toggle::after { content: attr(aria-label); position: absolute; right: 52px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.8); color: #fff; font-size: 12px; font-family: 'Lato', sans-serif; white-space: nowrap; padding: 4px 10px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; } #dm-toggle:hover::after { opacity: 1; } /* Mobile — menor e sem tooltip */ @media (max-width: 768px) { #dm-toggle { width: 38px; height: 38px; font-size: 17px; top: 88px; right: 14px; } #dm-toggle::after { display: none; } } /* ------------------------------------------------ 25. TRANSIÇÃO SUAVE ao alternar modo Não aplica em transforms (protege carrosséis) ------------------------------------------------ */ html.dm-transition body, html.dm-transition .header-fixo, html.dm-transition .depoimento-card, html.dm-transition .problema-card, html.dm-transition .beneficio-card, html.dm-transition .ingrediente-card, html.dm-transition .card-oferta, html.dm-transition .bonus-item, html.dm-transition .garantia-conteudo, html.dm-transition .faq-item, html.dm-transition .tabela-comparativa, html.dm-transition .diferencial-box, html.dm-transition p, html.dm-transition h1, html.dm-transition h2, html.dm-transition h3 { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; }