/* ========================================================================== * Diálogos do Bem Viver – Dark Mode Override * Carregue APÓS o CSS principal (dialogo-css.css) * Ativa via ou via JS toggle * ========================================================================== */ /* ─── TOKENS DE COR ───────────────────────────────────────────────────────── * * Original → Dark equivalent * #700795 → roxo mantido como herança de marca, mas usado pontualmente * #ADC91D → #C9A96E dourado-âmbar (acento quente / bem-estar) * #360049 → texto claro sobre fundo escuro * * Lógica: * - Roxo virou cor de superfície escura (#3E2966) e acento em tags/badges * - Dourado-âmbar #C9A96E substitui o verde-limão como CTA e destaque * - Fundo: camadas de preto-quente (#0E0D0B → #161412 → #1C1A16) * ========================================================================== */ .dark-mode { --first-color: #C9A96E; /* dourado-âmbar: CTAs, links, destaques */ --secondary-color: #C9A96E; /* mesmo token, botões secundários */ --third-color: #C9A96E; --text-color: #F0EBE2; /* creme claro: texto principal */ /* extras exclusivos do dark */ --dm-bg-base: #0E0D0B; --dm-bg-surface: #161412; --dm-bg-card: #1C1A16; --dm-bg-card2: #221F1A; --dm-purple: #3E2966; --dm-purple-mid: #513784; --dm-border: rgba(255,255,255,.07); --dm-border-mid: rgba(255,255,255,.13); --dm-text-muted: #5E5748; --dm-text-second: #A89880; } /* ───────────────────────────────────────────────────────────────────────────── * BASE * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode, .dark-mode html, .dark-mode body { background-color: var(--dm-bg-base); color: var(--text-color); } .dark-mode a { color: var(--first-color); } .dark-mode a:visited { color: var(--dm-text-second); } .dark-mode p { color: var(--dm-text-second); } /* ───────────────────────────────────────────────────────────────────────────── * SCROLLBAR * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode ::-webkit-scrollbar { background-color: var(--dm-bg-card); } .dark-mode ::-webkit-scrollbar-thumb { background: var(--first-color); } .dark-mode ::-webkit-scrollbar-thumb:hover { background: #a8884e; } /* ───────────────────────────────────────────────────────────────────────────── * HEADER / NAV * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode header#masthead { background: rgba(14, 13, 11, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--dm-border); } .dark-mode header#masthead.scrolled, .dark-mode .single header#masthead, .dark-mode .single-post header#masthead, .dark-mode .blog header#masthead, .dark-mode .page-template header#masthead, .dark-mode .archive header#masthead { background: rgba(14, 13, 11, 0.96); } .dark-mode .main-navigation #primary-menu a { color: var(--dm-text-second); } .dark-mode .main-navigation #primary-menu a:hover { color: var(--first-color); text-decoration: none; } .dark-mode .main-navigation .bx-menu-navigation { background: rgba(14, 13, 11, 0.97); border-right: 1px solid var(--dm-border-mid); } .dark-mode .menu__btn > span, .dark-mode .menu__btn > span::before, .dark-mode .menu__btn > span::after { background-color: var(--dm-text-second); } .dark-mode .main-navigation.toggled .menu__btn > span, .dark-mode .main-navigation.toggled .menu__btn > span::before, .dark-mode .main-navigation.toggled .menu__btn > span::after { background-color: var(--first-color); } /* Botões no header (WhatsApp, social etc.) */ .dark-mode .wrp_navigation--secondary a { color: var(--dm-text-second); } .dark-mode .wrp_navigation--secondary a:hover { color: var(--first-color); } .dark-mode .h-buttons a { border-color: var(--dm-border-mid); color: var(--text-color); background: transparent; } .dark-mode .h-buttons a:hover { background: var(--first-color); border-color: var(--first-color); color: var(--dm-bg-base); } /* ───────────────────────────────────────────────────────────────────────────── * HERO – artigo em destaque * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .wrp_hero { background: var(--dm-bg-surface); border-bottom: 1px solid var(--dm-border); } .dark-mode .wrp_hero a { color: inherit; text-decoration: none; } .dark-mode .wrp_post.wrp_post--image { border-radius: 16px; /* escurece ligeiramente a foto para melhor contraste */ filter: brightness(.75) saturate(.85); } .dark-mode .wrp_post:hover:before { filter: brightness(.8); } /* Categoria / tag ao lado do título */ .dark-mode .wrp_post.wrp_post--content header small { color: var(--first-color); border-left-color: var(--first-color); background: rgba(201,169,110,.1); } .dark-mode .wrp_post.wrp_post--content header h2 { color: var(--text-color); } .dark-mode .wrp_post--metadata small { color: var(--dm-text-muted); } .dark-mode .wrp_post--metadata hr { background: var(--dm-border-mid); } /* ───────────────────────────────────────────────────────────────────────────── * LISTA DE POSTS (grid de artigos) * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .wrp_post--main { border-bottom: 1px solid var(--dm-border); } .dark-mode .wrp_post--main:hover .wrp_post.wrp_post--content header h2 { color: var(--first-color); transition: color .25s; } .dark-mode .wrp_post--small.wrp_post--content header h2 { color: var(--text-color); } /* Botão "Veja mais" */ .dark-mode .wrp_button a { background: transparent; border: 1px solid var(--first-color); color: var(--first-color); border-radius: 6px; } .dark-mode .wrp_button a:hover { background: var(--first-color); color: var(--dm-bg-base); } /* ───────────────────────────────────────────────────────────────────────────── * MAIS LIDAS (sidebar / lista ranqueada) * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .wrp_post--main--block { background: var(--dm-bg-card); border-radius: 12px; padding: 24px; } .dark-mode .wrp_post--main--rank .wrp_post.wrp_post--content header h2 { color: var(--text-color); } .dark-mode .wrp_title--rank { color: var(--first-color); } /* ───────────────────────────────────────────────────────────────────────────── * SEÇÃO SOBRE / "TRANSFORME SUA JORNADA" (carousel de quotes) * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .wrp_about--home { background: var(--dm-bg-surface); border-radius: 0; padding: 80px 0; } .dark-mode .wrp_about--home h2 { color: var(--text-color); } /* Slides de quote / timeline */ .dark-mode .swiper-timeline .timeline--item { background: var(--dm-purple); border-color: rgba(201,169,110,.25); color: var(--text-color); } .dark-mode .swiper-wrapper .swiper-slide:nth-child(2n+1) .timeline--item { background: var(--dm-purple-mid); } /* Setas do carrossel */ .dark-mode .swiper-btn-prev, .dark-mode .swiper-btn-next { background: rgba(201,169,110,.1); color: var(--first-color); border: 1px solid var(--dm-border-mid); } .dark-mode .swiper-btn-prev:hover, .dark-mode .swiper-btn-next:hover { background: rgba(201,169,110,.2); } .dark-mode .swiper-button-disabled { opacity: .3; } /* ───────────────────────────────────────────────────────────────────────────── * TRILHAS * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .wrp_trilha--item { background: var(--dm-bg-card); box-shadow: 0 4px 24px rgba(0,0,0,.4); border: 1px solid var(--dm-border); border-radius: 16px; } .dark-mode .wrp_trilha--item h3 { color: var(--text-color); } .dark-mode .wrp_trilha--item p { color: var(--dm-text-second); } .dark-mode .wrp_trilha--item--metadados { color: var(--dm-text-second); } .dark-mode .wrp_trilha--item--metadados .wrp_trilha--item--metadados--tag { background: rgba(201,169,110,.1); color: var(--first-color); } .dark-mode .wrp_trilha--item button { background: var(--first-color); color: var(--dm-bg-base); font-weight: 600; border-radius: 8px; transition: opacity .2s; } .dark-mode .wrp_trilha--item button:hover { opacity: .85; } /* ───────────────────────────────────────────────────────────────────────────── * DEPOIMENTOS * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .depoimentos--home { background: var(--dm-bg-surface); padding: 80px 0; } .dark-mode .depoimentos--home .wrp_header--page h2 { color: var(--text-color); } .dark-mode .depoimentos--item { background: var(--dm-purple); border: 1px solid rgba(201,169,110,.15); color: var(--text-color); } .dark-mode .swiper-wrapper .swiper-slide:nth-child(2n) .depoimentos--item { background: var(--dm-bg-card2); border-color: var(--dm-border-mid); } .dark-mode .depoimentos--item h3 { color: var(--text-color); } .dark-mode .depoimentos--item small { color: var(--first-color); } /* ───────────────────────────────────────────────────────────────────────────── * FAQ / TOGGLE PANEL * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .wrp_header--page--faq h2, .dark-mode .wrp_header--page h2 { color: var(--text-color); } .dark-mode .toggle_panel > li { border-top-color: var(--dm-border-mid); } .dark-mode .toggle_panel li:last-child { border-bottom-color: var(--dm-border-mid); } .dark-mode .toggle_panel h3 { color: var(--first-color); } .dark-mode .toggle_panel h3 span { background: rgba(201,169,110,.1); } .dark-mode .toggle_panel h3 i { color: var(--first-color); } .dark-mode .toggle_panel > li ul { color: var(--dm-text-second); } .dark-mode .toggle_panel .inner { color: var(--dm-text-second); } /* ───────────────────────────────────────────────────────────────────────────── * PAGINAÇÃO * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .navigation ul { color: var(--first-color); } .dark-mode .navigation li a, .dark-mode .navigation li a:hover, .dark-mode .navigation li.active a, .dark-mode .navigation li.disabled { color: var(--first-color); border-color: var(--first-color); } .dark-mode .navigation li a:hover, .dark-mode .navigation li.active a { background: var(--first-color); color: var(--dm-bg-base); border-color: var(--first-color); } /* ───────────────────────────────────────────────────────────────────────────── * FORMULÁRIOS (wpcf7) * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .wrp_form .wpcf7 input:not([type=submit]), .dark-mode .wrp_form .wpcf7 select, .dark-mode .wrp_form .wpcf7 textarea { background: var(--dm-bg-card); border-color: var(--dm-border-mid); color: var(--text-color); } .dark-mode .wrp_form .wpcf7 input:not([type=submit]):focus, .dark-mode .wrp_form .wpcf7 select:focus, .dark-mode .wrp_form .wpcf7 textarea:focus { border-color: var(--first-color); outline: none; } .dark-mode .wrp_form .wpcf7 ::-webkit-input-placeholder { color: var(--dm-text-muted); } .dark-mode .wrp_form .wpcf7 ::-moz-placeholder { color: var(--dm-text-muted); } .dark-mode .wrp_form .wpcf7 :-ms-input-placeholder { color: var(--dm-text-muted); } .dark-mode .wrp_form .wpcf7 :-moz-placeholder { color: var(--dm-text-muted); } .dark-mode .wrp_form .wpcf7 h3 { color: var(--text-color); } .dark-mode .wrp_form .wpcf7 small { color: var(--dm-text-second); } .dark-mode .wrp_form .wpcf7 a { color: var(--first-color); } .dark-mode .wrp_form input[type=submit] { background: var(--first-color); color: var(--dm-bg-base); } .dark-mode .wrp_form input[type=submit]:hover { opacity: .88; } /* ───────────────────────────────────────────────────────────────────────────── * COMENTÁRIOS * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode #comments textarea, .dark-mode #comments input:not([type=submit]) { background: var(--dm-bg-card); border-color: var(--dm-border-mid); color: var(--text-color); } .dark-mode #comments input[type=submit] { background: var(--first-color); color: var(--dm-bg-base); } .dark-mode #comments .comment-reply-title { color: var(--text-color); } /* ───────────────────────────────────────────────────────────────────────────── * SINGLE POST * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .wrp_post--single header h2 { color: var(--text-color); } .dark-mode .wrp_post--single .wrp_post--header--metadata { border-top-color: var(--dm-border-mid); color: var(--dm-text-muted); } .dark-mode .wrp_post--single .wrp_post--header--metadata a { color: var(--dm-text-muted); } .dark-mode .wrp_post--single .wrp_post--header--metadata a:hover { color: var(--first-color); } .dark-mode .wrp_post--single .share-button-wrapper h2 { color: var(--dm-text-second); } .dark-mode .wrp_post--single .share-button-wrapper a { color: var(--first-color); } /* ───────────────────────────────────────────────────────────────────────────── * PÁGINA QUEM SOMOS / SOBRE * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .wrp_header--page--about h2 { color: var(--text-color); } .dark-mode .wrp_about--content img { filter: brightness(.8) saturate(.85); border-radius: 24px; } /* ───────────────────────────────────────────────────────────────────────────── * PÁGINA CONTATO * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .wrp_header--page--contato h2 { color: var(--text-color); } .dark-mode .wrp_page--contato h3 { color: var(--first-color); } .dark-mode .c-social-links a { color: var(--dm-text-second); } .dark-mode .c-social-links a:hover { color: var(--first-color); } .dark-mode .c-buttons a { background: var(--first-color); border-color: var(--first-color); color: var(--dm-bg-base); } /* ───────────────────────────────────────────────────────────────────────────── * FOOTER * ───────────────────────────────────────────────────────────────────────────── */ .dark-mode .site-footer { background: var(--dm-bg-surface); border-top: 1px solid var(--dm-border); color: var(--dm-text-second); } .dark-mode .site-footer h3 { color: var(--first-color); } .dark-mode .site-footer small { color: var(--dm-text-muted); border-top-color: var(--dm-border); } .dark-mode .site-footer .menu a { color: var(--dm-text-second); } .dark-mode .site-footer .menu a:hover { color: var(--first-color); } .dark-mode .f-buttons a { border-color: var(--dm-border-mid); color: var(--text-color); } .dark-mode .f-buttons a:hover { background: var(--first-color); border-color: var(--first-color); color: var(--dm-bg-base); } .dark-mode .f-social a { color: var(--dm-text-second); } .dark-mode .f-social a:hover { color: var(--first-color); } .dark-mode .f-social h4 { color: var(--dm-text-second); } /* ───────────────────────────────────────────────────────────────────────────── * TOGGLE DARK MODE – botão flutuante (opcional) * Adicione no HTML para ativar * ───────────────────────────────────────────────────────────────────────────── */ /* #dm-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 99999; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: #1C1A16; color: #C9A96E; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.4); transition: transform .2s; } #dm-toggle:hover { transform: scale(1.1); } */ #search-bar { position: fixed; top: 107px; /* altura do seu header */ left: 0; width: 100%; z-index: 9998; background: rgba(112, 7, 149, 0.95); backdrop-filter: blur(8px); padding: 16px 24px; display: none; border-bottom: 1px solid rgba(255,255,255,.1); } #search-bar.open { display: block; } #search-bar form { display: flex; align-items: center; max-width: 640px; margin: 0 auto; gap: 12px; } #search-bar input[type=search] { flex: 1; background: transparent; border: none; border-bottom: 2px solid #fff; color: #fff; font-size: 20px; padding: 8px 4px; outline: none; font-family: var(--main-font); } #search-bar input[type=search]::placeholder { color: rgba(255,255,255,.5); } #search-bar button { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 0; } /* Dark mode */ .dark-mode #search-bar { background: rgba(14, 13, 11, 0.97); border-bottom-color: var(--dm-border-mid); } .dark-mode #search-bar input[type=search] { border-bottom-color: var(--first-color); color: var(--text-color); } .dark-mode #search-bar input[type=search]::placeholder { color: var(--dm-text-muted); } .dark-mode #search-bar button { color: var(--first-color); }