/* * Color mode + touch targets (inc/color-mode.php). * * Loaded only when a site turns on Color mode or the 44px touch target * option. Every color rule is scoped to html[data-color-mode], which exists * only while Color mode is on, and reads the --dash-mode-* palette printed in * (id revdash-color-mode-palette). The touch target rules are scoped * to body.touch-target-44. * * Content built in Revolutionary Blocks keeps its own colors: those rules use * zero-specificity :where() selectors, so any color or background set on a * section or widget in the builder wins over the mode default. */ /* ── Theme tokens follow the mode ─────────────────────────────────────── */ html[data-color-mode] { --dash-text: var(--dash-mode-text); --dash-gray: var(--dash-mode-muted); --dash-muted: var(--dash-mode-muted); --dash-gray-light: var(--dash-mode-surface-alt); --dash-light: var(--dash-mode-surface-alt); --dash-border: var(--dash-mode-border); /* Suite-wide button contract: every theme, Revolutionary Blocks and plugin button that reads the --rev-btn-* tokens takes the accent. */ --rev-btn-bg: var(--dash-mode-accent); --rev-btn-bg-hover: var(--dash-mode-accent-hover); --rev-btn-color: var(--dash-mode-accent-text); --rev-btn-color-hover: var(--dash-mode-accent-text); --rev-btn-shadow: none; --dash-btn-hover: var(--dash-mode-accent-hover); /* Header foreground, solid state. */ --dash-header-bg: var(--dash-mode-surface); --dash-header-fg-solid: var(--dash-mode-text); --dash-header-fg-solid-hover: var(--dash-mode-text); --dash-header-link-hover-bg: var(--dash-mode-surface-alt); } html[data-color-mode] body { background: var(--dash-mode-bg); color: var(--dash-mode-text); } /* Headings follow the text around them, so a heading inside a section the builder colored keeps that section's color. The html part sits in :where() so these match the specificity of style.css's own element rules (and win by load order) while any class rule, such as a builder widget color, still wins over them. */ :where(html[data-color-mode]) :is(h1, h2, h3, h4, h5, h6) { color: inherit; } /* Links: color from the palette. Links in running text are underlined in the accent so they read as links even when the link color matches the text. */ :where(html[data-color-mode]) a, :where(html[data-color-mode]) a:hover { color: var(--dash-mode-link); } :where(html[data-color-mode]) :where(#dash-main) :where(p, li, dd, td, blockquote, figcaption) > a:where(:not(.btn):not([class*="button"])) { text-decoration: underline; text-decoration-color: var(--dash-mode-link-underline); text-decoration-thickness: 2px; text-underline-offset: 3px; } :where(html[data-color-mode]) :is(code, blockquote) { background: var(--dash-mode-surface-alt); color: inherit; } /* ── Header ───────────────────────────────────────────────────────────── */ html[data-color-mode] #dash-header.header-light, html[data-color-mode] #dash-header.scrolled, html[data-color-mode] #dash-header.header-light.scrolled, html[data-color-mode] #dash-header.header-transparent.scrolled { background: var(--dash-mode-surface); border-bottom: 1px solid var(--dash-mode-border); box-shadow: none; --dash-hdr-fg: var(--dash-mode-text); --dash-hdr-fg-hover: var(--dash-mode-text); } html[data-color-mode] #dash-header .logo-name { color: var(--dash-hdr-fg); } html[data-color-mode] #dash-header .logo-tagline { color: var(--dash-mode-muted); } html[data-color-mode] #dash-header:not(.header-transparent) .primary-nav > li > a, html[data-color-mode] #dash-header:not(.header-transparent) .header-right-nav > li > a, html[data-color-mode] #dash-header.scrolled .primary-nav > li > a, html[data-color-mode] #dash-header.scrolled .header-right-nav > li > a { color: var(--dash-hdr-fg); } html[data-color-mode] #dash-header .primary-nav > li.current-menu-item > a, html[data-color-mode] #dash-header .primary-nav > li > a:hover, html[data-color-mode] #dash-header .header-right-nav > li > a:hover { text-decoration-color: var(--dash-mode-accent); } html[data-color-mode] #dash-header .menu-toggle span { background: var(--dash-hdr-fg); } html[data-color-mode] body.nav-open #dash-header .menu-toggle span { background: var(--dash-mode-text); } html[data-color-mode] #dash-header .header-cta .btn-outline { color: var(--dash-mode-text); border-color: var(--dash-mode-border); } /* Dropdowns */ html[data-color-mode] #dash-header .sub-menu { background: var(--dash-mode-surface); border-color: var(--dash-mode-border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } html[data-color-mode] #dash-header .sub-menu a { color: var(--dash-mode-text); } html[data-color-mode] #dash-header .sub-menu a:hover, html[data-color-mode] #dash-header .sub-menu a:focus-visible { background: var(--dash-mode-surface-alt); color: var(--dash-mode-text); } html[data-color-mode] #dash-header :is(.menu-item-desc, .sub-menu .description) { color: var(--dash-mode-muted); } /* Top bar (two-tier header) keeps its own colors when set; otherwise it takes the alternate surface. */ html[data-color-mode] #dash-header .hdr-topbar { background: var(--hdr-topbar-bg, var(--dash-mode-surface-alt)); color: var(--hdr-topbar-fg, var(--dash-mode-muted)); } html[data-color-mode] #dash-header .hdr-topbar a { color: inherit; } /* Mobile menu, every style (fullscreen, drawers, sheet, tab bar). */ html[data-color-mode] #mobile-nav.mobile-nav { background: var(--dash-mode-bg); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--dash-mode-text); border-color: var(--dash-mode-border); } html[data-color-mode] #mobile-nav a { color: var(--dash-mode-text); border-color: var(--dash-mode-border); } html[data-color-mode] #mobile-nav .sub-menu a, html[data-color-mode] #mobile-nav .mobile-right-nav a { color: var(--dash-mode-muted); } html[data-color-mode] #mobile-nav a:hover, html[data-color-mode] #mobile-nav a:focus-visible { color: var(--dash-mode-text); text-decoration: underline; text-decoration-color: var(--dash-mode-accent); } html[data-color-mode] #mobile-nav .mobile-nav-close { color: var(--dash-mode-text); } html[data-color-mode] .hdr-tabbar { background: var(--dash-mode-surface); border-color: var(--dash-mode-border); color: var(--dash-mode-text); } html[data-color-mode] .hdr-tabbar .hdr-tab { color: var(--dash-mode-muted); } html[data-color-mode] .hdr-tabbar .hdr-tab.is-current { color: var(--dash-mode-text); } /* ── Footer ───────────────────────────────────────────────────────────── */ html[data-color-mode] #dash-footer { background: var(--dash-mode-surface-alt); color: var(--dash-mode-muted); border-top: 1px solid var(--dash-mode-border); } html[data-color-mode] #dash-footer :is(h2, h3, h4, .logo-name) { color: var(--dash-mode-text); } html[data-color-mode] #dash-footer :is(p, li, .logo-tagline, .footer-credit, .dash-ci-row) { color: var(--dash-mode-muted); } html[data-color-mode] #dash-footer a { color: var(--dash-mode-text); } html[data-color-mode] #dash-footer :is(.footer-col ul li a, .footer-bottom-links a, .footer-credit a, .dash-ci-text a) { color: var(--dash-mode-muted); } html[data-color-mode] #dash-footer a:hover, html[data-color-mode] #dash-footer a:focus-visible { color: var(--dash-mode-text); text-decoration: underline; text-decoration-color: var(--dash-mode-accent); } html[data-color-mode] #dash-footer :is(.footer-grid, .footer-bottom) { border-color: var(--dash-mode-border); } html[data-color-mode] #dash-footer .social-link { border-color: var(--dash-mode-border); color: var(--dash-mode-muted); } html[data-color-mode] #dash-footer .social-link:hover { background: var(--dash-mode-accent); border-color: var(--dash-mode-accent); color: var(--dash-mode-accent-text); text-decoration: none; } html[data-color-mode] #dash-footer .dash-ci-icon { background: var(--dash-mode-surface); color: var(--dash-mode-text); } /* ── Logos per mode (revdash_color_mode_logo_imgs) ────────────────────── */ html[data-color-mode="dark"] .cm-logo--light, html[data-color-mode="light"] .cm-logo--dark { display: none !important; } /* ── Surfaces: theme sections and cards ───────────────────────────────── */ html[data-color-mode] :is(.services-section, .tech-stack-section, .contact-section, .features-section) { background: var(--dash-mode-bg); } html[data-color-mode] :is(.process-section, .testimonials-section) { background: var(--dash-mode-surface-alt); } html[data-color-mode] :is(.service-card, .testimonial-card, .blog-card, .card, .widget, .post-nav-link, .comment-body) { background: var(--dash-mode-surface); border-color: var(--dash-mode-border); color: var(--dash-mode-text); } html[data-color-mode] :is(.service-card, .testimonial-card, .blog-card) :is(p, .blog-excerpt, .blog-meta) { color: var(--dash-mode-muted); } /* ── Forms ────────────────────────────────────────────────────────────── */ html[data-color-mode] :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) { background-color: var(--dash-mode-surface); color: var(--dash-mode-text); border-color: var(--dash-mode-border); } html[data-color-mode] ::placeholder { color: var(--dash-mode-muted); opacity: 1; } html[data-color-mode] :is(input, select, textarea):focus-visible { border-color: var(--dash-mode-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dash-mode-accent) 45%, transparent); } html[data-color-mode] :is(label, .form-group label) { color: inherit; } /* ── Buttons (the --rev-btn-* tokens above do the fill) ───────────────── */ html[data-color-mode] .btn-primary, html[data-color-mode] .btn-primary:hover { color: var(--dash-mode-accent-text); } html[data-color-mode] .btn-primary:hover { background: var(--dash-mode-accent-hover); border-color: var(--dash-mode-accent-hover); } html[data-color-mode] .btn-outline { color: var(--dash-mode-text); border-color: var(--dash-mode-text); } html[data-color-mode] .btn-outline:hover { background: var(--dash-mode-accent); border-color: var(--dash-mode-accent); color: var(--dash-mode-accent-text); } html[data-color-mode] :is(.btn, button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--dash-mode-accent); outline-offset: 2px; } html[data-color-mode="light"] :is(.btn, button, a, input, select, textarea, summary, [tabindex]):focus-visible { /* The default accent is pale; an accent ring alone would disappear on white, so light mode adds a dark inner ring. */ outline-color: var(--dash-mode-text); box-shadow: 0 0 0 5px var(--dash-mode-accent); } /* ── Revolutionary Blocks ─────────────────────────────────────────────── */ /* Zero specificity: anything set in the builder wins. */ :where(html[data-color-mode]) :where(.rb-document) { background-color: var(--dash-mode-bg); color: var(--dash-mode-text); } :where(html[data-color-mode]) :where(.rb-section) { border-color: var(--dash-mode-border); } /* Opt-in bands: add the CSS class color-mode-surface or color-mode-alt to a section in the builder to give it the mode's surface colors. */ html[data-color-mode] .rb-section.color-mode-surface { background-color: var(--dash-mode-surface); color: var(--dash-mode-text); } html[data-color-mode] .rb-section.color-mode-alt { background-color: var(--dash-mode-surface-alt); color: var(--dash-mode-text); } html[data-color-mode] :where(.color-mode-muted) { color: var(--dash-mode-muted); } html[data-color-mode] #dash-header .rb-document, html[data-color-mode] #dash-footer .rb-document { background-color: transparent; color: inherit; } /* ── Toggle button ────────────────────────────────────────────────────── */ .cm-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 44px; min-height: 44px; padding: 0 10px; margin: 0; border: 1px solid var(--dash-mode-border, currentColor); border-radius: 999px; background: transparent; color: var(--dash-hdr-fg, var(--dash-mode-text, currentColor)); font: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer; flex-shrink: 0; transition: background-color 0.15s ease, border-color 0.15s ease; } .cm-toggle:hover { background: var(--dash-mode-surface-alt, rgba(127, 127, 127, 0.12)); } .cm-toggle:focus-visible { outline: 3px solid var(--dash-mode-accent, currentColor); outline-offset: 2px; } .cm-toggle__icon { display: block; width: 20px; height: 20px; } /* The icon shows the mode the button switches TO, matching its label. */ html[data-color-mode="dark"] .cm-toggle__icon--moon, html[data-color-mode="light"] .cm-toggle__icon--sun { display: none; } #dash-header.header-transparent:not(.scrolled) .cm-toggle { border-color: rgba(255, 255, 255, 0.45); } /* Desktop: the toggle sits first inside .header-cta, so it follows the CTA in every header layout. Phones and tablets hide .header-cta, so a compact copy sits beside the hamburger instead. */ .hdr-color-mode-compact { display: none; align-items: center; margin-left: auto; margin-right: -1rem; } @media (max-width: 1024px) { .hdr-color-mode-compact { display: flex; } } body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .header-cta .cm-toggle { align-self: flex-start; } /* Icon rail: the header button fades in with the opened rail, but the toggle stays visible on the collapsed rail so it is always one click away. */ @media (min-width: 1025px) { body.hdr-layout-rail #dash-header .header-cta { opacity: 1; } body.hdr-layout-rail #dash-header .header-cta > :not(.cm-toggle) { opacity: 0; transition: opacity 0.3s ease; } body.hdr-layout-rail #dash-header:is(:hover, :focus-within) .header-cta > :not(.cm-toggle) { opacity: 1; } } .mobile-nav .cm-toggle--mobile { margin-top: 1.5rem; padding: 0 16px; color: var(--dash-mode-text, #fff); } .cm-toggle--inline { color: inherit; } @media (prefers-reduced-motion: reduce) { .cm-toggle { transition: none; } } /* ── Accessibility: minimum 44px touch targets on phones ──────────────── */ @media (max-width: 768px) { body.touch-target-44 :is(#dash-header, #mobile-nav, #dash-footer, .hdr-tabbar, .hdr-topbar) :is(a, button, [role="button"], input[type="submit"]) { min-height: 44px; min-width: 44px; } body.touch-target-44 :is(#dash-header, #mobile-nav, #dash-footer, .hdr-topbar) :is(nav a, .menu-item > a, .footer-col a, .footer-bottom-links a, .footer-contact a, .hdr-topbar-link) { display: inline-flex; align-items: center; } body.touch-target-44 #mobile-nav .menu-item > a { display: flex; } body.touch-target-44 :is(#dash-footer .footer-col ul li, #dash-footer .footer-contact li) { margin-bottom: 0.25rem; } body.touch-target-44 #dash-footer .footer-bottom-links { flex-wrap: wrap; column-gap: 1rem; row-gap: 0; } body.touch-target-44 #dash-footer .social-link { width: 44px; height: 44px; } body.touch-target-44 #dash-header .menu-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } body.touch-target-44 #scroll-top { min-width: 44px; min-height: 44px; } }