/** * Dark Mode — Veen Child * Escopo: apenas quando possui .vch-dark-mode. */ :root { --vch-dark-bg: #111318; --vch-dark-surface: #171a20; --vch-dark-surface-2: #1d2129; --vch-dark-input: #20242c; --vch-dark-text: #c7ccd6; --vch-dark-title: #f7f8fa; --vch-dark-muted: #9ba3b2; --vch-dark-border: #2a2f39; --vch-dark-shadow: rgba(0, 0, 0, .34); } /* Botão global ---------------------------------------------------------- */ .vch-dark-mode-toggle { position: fixed; right: 22px; bottom: 22px; z-index: 10050; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; margin: 0; border: 1px solid rgba(36, 35, 35, .12); border-radius: 999px; background: rgba(255, 255, 255, .96); color: #111318; box-shadow: 0 8px 26px rgba(20, 22, 26, .14); cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform 180ms ease, background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } /* Quando o Veen exibe o botão “voltar ao topo”, o tênis fica exatamente acima dele. */ .vch-dark-mode-toggle.vch-dark-mode-toggle--above-backtop { right: 15px; bottom: 72px; } .vch-dark-mode-toggle:hover, .vch-dark-mode-toggle:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 11px 30px rgba(20, 22, 26, .19); } .vch-dark-mode-toggle:focus-visible { outline: 3px solid #FF486A; outline-offset: 3px; } .vch-theme-icon { display: block; width: 24px; height: 24px; overflow: visible; filter: none !important; transition: opacity 180ms ease, transform 220ms ease, color 220ms ease; } .vch-theme-icon--sun { display: none; } .vch-dark-mode-toggle:hover .vch-theme-icon { transform: rotate(-8deg) scale(1.04); } html.vch-dark-mode .vch-theme-icon--moon { display: none; } html.vch-dark-mode .vch-theme-icon--sun { display: block; } html.vch-dark-mode .vch-dark-mode-toggle { border-color: rgba(255, 255, 255, .12); background: rgba(24, 27, 34, .95); color: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .38); } /* Base ------------------------------------------------------------------ */ html.vch-dark-mode { color-scheme: dark; background: var(--vch-dark-bg); } html.vch-dark-mode body, html.vch-dark-mode body:before { background-color: var(--vch-dark-bg) !important; } html.vch-dark-mode body { color: var(--vch-dark-text) !important; } html.vch-dark-mode #wrapper, html.vch-dark-mode main, html.vch-dark-mode .main-content, html.vch-dark-mode .content, html.vch-dark-mode .section { color: inherit; } html.vch-dark-mode .title, html.vch-dark-mode .title a, html.vch-dark-mode h1, html.vch-dark-mode h2, html.vch-dark-mode h3, html.vch-dark-mode h4, html.vch-dark-mode h5, html.vch-dark-mode h6, html.vch-dark-mode div.text h1, html.vch-dark-mode div.text h2, html.vch-dark-mode div.text h3, html.vch-dark-mode div.text h4, html.vch-dark-mode div.text h5, html.vch-dark-mode div.text h6, html.vch-dark-mode div.text b, html.vch-dark-mode div.text strong, html.vch-dark-mode .widget_calendar table caption, html.vch-dark-mode .widget_rss .rsswidget, html.vch-dark-mode #single #comments.hosted .comment .comment-author, html.vch-dark-mode .wpcf7 label { color: var(--vch-dark-title) !important; } html.vch-dark-mode p, html.vch-dark-mode div.text, html.vch-dark-mode div.text li, html.vch-dark-mode div.text dd, html.vch-dark-mode div.text figcaption, html.vch-dark-mode .post-excerpt, html.vch-dark-mode .author-meta, html.vch-dark-mode .widget, html.vch-dark-mode .widget_text, html.vch-dark-mode #single #comments.hosted .comment .right .text { color: var(--vch-dark-text); } html.vch-dark-mode time:not(.icon), html.vch-dark-mode .widget_rss .rss-date:not(.icon), html.vch-dark-mode div.meta, html.vch-dark-mode div.meta a, html.vch-dark-mode .widget_recent_entries .post-date, html.vch-dark-mode div.text blockquote cite, html.vch-dark-mode div.text blockquote__citation, html.vch-dark-mode div.text .gallery-caption { color: var(--vch-dark-muted) !important; } /* Links preservam o rosa do Veen; links estruturais ficam claros. */ html.vch-dark-mode #header .logo a, html.vch-dark-mode #header nav ul.menu > li > a:not(.epcl-button), html.vch-dark-mode .main-nav ul.menu li a, html.vch-dark-mode .main-nav ul.sub-menu li a, html.vch-dark-mode .widget:not(.widget_epcl_about) a:not(.tag-cloud-link), html.vch-dark-mode div.tags a, html.vch-dark-mode .widget_tag_cloud a:not(:hover), html.vch-dark-mode .widget_epcl_tag_cloud a:not(:hover) { color: var(--vch-dark-title) !important; } html.vch-dark-mode div.text a:not([class]) { color: #ff6a86 !important; } html.vch-dark-mode div.text a:not([class]):hover { color: #ffffff !important; } /* Cabeçalho e navegação ------------------------------------------------- */ html.vch-dark-mode #header, html.vch-dark-mode #header .menu-wrapper { color: var(--vch-dark-title); } html.vch-dark-mode #header.is-sticky div.menu-wrapper, html.vch-dark-mode .main-nav ul.sub-menu, html.vch-dark-mode nav.mobile.main-nav, html.vch-dark-mode .menu-overlay { background: var(--vch-dark-surface) !important; } html.vch-dark-mode #header.is-sticky div.menu-wrapper, html.vch-dark-mode .main-nav ul.sub-menu { box-shadow: 0 8px 28px var(--vch-dark-shadow) !important; } html.vch-dark-mode #header.minimalist .search-menu-item svg, html.vch-dark-mode #header div.menu-mobile svg, html.vch-dark-mode .main-nav ul.menu li.menu-item-has-children:after { fill: var(--vch-dark-title) !important; color: var(--vch-dark-title) !important; } html.vch-dark-mode .main-nav ul.sub-menu li a { background-image: linear-gradient(to right, rgba(255,255,255,.04), rgba(255,255,255,.04)) !important; } /* Superfícies, bordas e elementos de conteúdo -------------------------- */ html.vch-dark-mode a.hover-effect, html.vch-dark-mode .widget_media_image a, html.vch-dark-mode #single section.siblings article, html.vch-dark-mode div.text blockquote, html.vch-dark-mode div.text pre, html.vch-dark-mode div.text pre:not([class*="language-"]), html.vch-dark-mode div.text code:not([class*="language-"]) { background-color: var(--vch-dark-surface-2) !important; } html.vch-dark-mode .mask-effect .mask, html.vch-dark-mode #single.fullcover .featured-image .title, html.vch-dark-mode #single.standard .featured-image .title, html.vch-dark-mode #single.fullcover .featured-image .wpcf7 label, html.vch-dark-mode #single.standard .featured-image .wpcf7 label { background: var(--vch-dark-surface) !important; border-color: var(--vch-dark-surface) !important; color: var(--vch-dark-title) !important; } html.vch-dark-mode hr, html.vch-dark-mode .epcl-border, html.vch-dark-mode #sidebar .widget, html.vch-dark-mode #single .share-buttons, html.vch-dark-mode #single #comments.hosted .comment, html.vch-dark-mode .widget_recent_entries ul > li, html.vch-dark-mode .widget_categories ul > li, html.vch-dark-mode .widget_archive ul > li, html.vch-dark-mode .widget_recent_comments ul > li, html.vch-dark-mode .widget_meta ul > li, html.vch-dark-mode .widget_nav_menu ul > li, html.vch-dark-mode .widget_pages ul > li, html.vch-dark-mode .widget_rss ul > li, html.vch-dark-mode .widget_calendar table td, html.vch-dark-mode div.text table, html.vch-dark-mode div.text table th, html.vch-dark-mode div.text table td, html.vch-dark-mode div.text pre:not([class*="language-"]), html.vch-dark-mode div.text code:not([class*="language-"]) { border-color: var(--vch-dark-border) !important; } html.vch-dark-mode div.text table th { color: var(--vch-dark-title) !important; } html.vch-dark-mode .widget_calendar table thead { background: #0c0e12 !important; } /* Formulários ----------------------------------------------------------- */ html.vch-dark-mode input[type="text"], html.vch-dark-mode input[type="password"], html.vch-dark-mode input[type="email"], html.vch-dark-mode input[type="tel"], html.vch-dark-mode input[type="url"], html.vch-dark-mode input[type="search"], html.vch-dark-mode textarea, html.vch-dark-mode select, html.vch-dark-mode #single .share-buttons .permalink input { background-color: var(--vch-dark-input) !important; color: var(--vch-dark-title) !important; border-color: var(--vch-dark-border) !important; } html.vch-dark-mode input::placeholder, html.vch-dark-mode textarea::placeholder { color: #858e9e !important; opacity: 1; } html.vch-dark-mode select option { background: var(--vch-dark-input) !important; color: var(--vch-dark-title) !important; } /* Footer --------------------------------------------------------------- */ html.vch-dark-mode #footer, html.vch-dark-mode #footer .widgets { color: var(--vch-dark-text); } html.vch-dark-mode #footer .logo a, html.vch-dark-mode #footer .published, html.vch-dark-mode #footer .published a, html.vch-dark-mode #footer .widget .title, html.vch-dark-mode #footer .widget-title { color: var(--vch-dark-title) !important; } /* Carrossel do tema filho --------------------------------------------- */ html.vch-dark-mode .vch-carousel__title { color: var(--vch-dark-title) !important; } html.vch-dark-mode .vch-carousel__arrow, html.vch-dark-mode .vch-carousel__pause { background: var(--vch-dark-surface-2) !important; color: var(--vch-dark-title) !important; border-color: var(--vch-dark-border) !important; box-shadow: 0 7px 18px rgba(0,0,0,.24) !important; } html.vch-dark-mode .vch-carousel__dot { background: #3a404b; } html.vch-dark-mode .vch-carousel__dot[aria-current="true"] { background: var(--vch-accent, #ef5350); } /* WordPress / Gutenberg ----------------------------------------------- */ html.vch-dark-mode .wp-block-table, html.vch-dark-mode .wp-block-code, html.vch-dark-mode .wp-block-preformatted, html.vch-dark-mode .wp-block-group.has-background:not([style*="background-color"]), html.vch-dark-mode .wp-block-columns.has-background:not([style*="background-color"]) { color: var(--vch-dark-text); } html.vch-dark-mode .wp-block-separator { border-color: var(--vch-dark-border) !important; } /* Scrollbar discreta em navegadores compatíveis ----------------------- */ html.vch-dark-mode { scrollbar-color: #3b414c var(--vch-dark-bg); } html.vch-dark-mode ::-webkit-scrollbar-track { background: var(--vch-dark-bg); } html.vch-dark-mode ::-webkit-scrollbar-thumb { background: #3b414c; border-radius: 999px; } /* Cabeçalho no Dark Mode — opção configurável -------------------------- */ /* * Branco: mantém logos pretos exatamente como foram enviados. * Chumbo: converte visualmente imagens de logo pretas para branco. * A regra vale também para o cabeçalho sticky do Veen. */ html.vch-dark-mode body.vch-dark-header-white #header, html.vch-dark-mode body.vch-dark-header-white #header .menu-wrapper, html.vch-dark-mode body.vch-dark-header-white #header.is-sticky div.menu-wrapper { background: #ffffff !important; color: #111318 !important; } html.vch-dark-mode body.vch-dark-header-white #header .logo a, html.vch-dark-mode body.vch-dark-header-white #header nav ul.menu > li > a:not(.epcl-button) { color: #111318 !important; } html.vch-dark-mode body.vch-dark-header-white #header .logo img, html.vch-dark-mode body.vch-dark-header-white #header .sticky-logo img { filter: none !important; } html.vch-dark-mode body.vch-dark-header-white #header.minimalist .search-menu-item svg, html.vch-dark-mode body.vch-dark-header-white #header .epcl-search-button svg, html.vch-dark-mode body.vch-dark-header-white #header div.menu-mobile svg { fill: #111318 !important; color: #111318 !important; } html.vch-dark-mode body.vch-dark-header-white #header .main-nav ul.menu > li.menu-item-has-children:after { color: #111318 !important; } html.vch-dark-mode body.vch-dark-header-white #header nav ul.menu > li > a:hover, html.vch-dark-mode body.vch-dark-header-white #header nav ul.menu > li.current-menu-item > a, html.vch-dark-mode body.vch-dark-header-white #header nav ul.menu > li.current-menu-ancestor > a { color: var(--vch-accent, #ff486a) !important; } html.vch-dark-mode body.vch-dark-header-white #header.is-sticky div.menu-wrapper { box-shadow: 0 6px 22px rgba(0, 0, 0, .12) !important; } html.vch-dark-mode body.vch-dark-header-charcoal #header, html.vch-dark-mode body.vch-dark-header-charcoal #header .menu-wrapper, html.vch-dark-mode body.vch-dark-header-charcoal #header.is-sticky div.menu-wrapper { background: #2d3035 !important; color: #ffffff !important; } html.vch-dark-mode body.vch-dark-header-charcoal #header .logo a, html.vch-dark-mode body.vch-dark-header-charcoal #header nav ul.menu > li > a:not(.epcl-button) { color: #ffffff !important; } html.vch-dark-mode body.vch-dark-header-charcoal #header .logo img, html.vch-dark-mode body.vch-dark-header-charcoal #header .sticky-logo img { filter: brightness(0) invert(1) !important; } html.vch-dark-mode body.vch-dark-header-charcoal #header.minimalist .search-menu-item svg, html.vch-dark-mode body.vch-dark-header-charcoal #header .epcl-search-button svg, html.vch-dark-mode body.vch-dark-header-charcoal #header div.menu-mobile svg { fill: #ffffff !important; color: #ffffff !important; } html.vch-dark-mode body.vch-dark-header-charcoal #header .main-nav ul.menu > li.menu-item-has-children:after { color: #ffffff !important; } html.vch-dark-mode body.vch-dark-header-charcoal #header nav ul.menu > li > a:hover, html.vch-dark-mode body.vch-dark-header-charcoal #header nav ul.menu > li.current-menu-item > a, html.vch-dark-mode body.vch-dark-header-charcoal #header nav ul.menu > li.current-menu-ancestor > a { color: var(--vch-accent, #ff486a) !important; } html.vch-dark-mode body.vch-dark-header-charcoal #header.is-sticky div.menu-wrapper { box-shadow: 0 8px 28px rgba(0, 0, 0, .28) !important; } @media (max-width: 767px) { .vch-dark-mode-toggle { right: 16px; bottom: 18px; width: 46px; height: 46px; } .vch-dark-mode-toggle.vch-dark-mode-toggle--above-backtop { right: 17px; bottom: 72px; } .vch-theme-icon { width: 22px; height: 22px; } } @media (prefers-reduced-motion: reduce) { .vch-dark-mode-toggle, .vch-theme-icon { transition: none !important; } } /* v1.8.0 — compatibilidade reforçada do alternador --------------------- */ #vch-dark-mode-toggle.vch-dark-mode-toggle { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 2147483000 !important; }