/* * Sometimes Weekly Dark Mode - front-end structural styles. * Colors come from the CSS variables printed in (see class-sw-frontend.php). * Most of the site flips because we also remap Neve's --nv-* variables; the rules * below cover elements that hardcode colors or need explicit treatment. */ html[data-theme="dark"] body { background-color: var(--sw-bg); color: var(--sw-text); } @media (prefers-reduced-motion: no-preference) { html[data-theme="dark"] body, html[data-theme="dark"] .site-header, html[data-theme="dark"] .nv-navbar, html[data-theme="dark"] a, html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } } /* Headings */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .entry-title, html[data-theme="dark"] .entry-title a { color: var(--sw-heading); } /* Content links */ html[data-theme="dark"] .entry-content a, html[data-theme="dark"] .nv-content-wrap a, html[data-theme="dark"] article a, html[data-theme="dark"] .widget a, html[data-theme="dark"] .comment-content a { color: var(--sw-link); } html[data-theme="dark"] .entry-content a:hover, html[data-theme="dark"] .nv-content-wrap a:hover, html[data-theme="dark"] article a:hover, html[data-theme="dark"] .widget a:hover, html[data-theme="dark"] .comment-content a:hover { color: var(--sw-link-hover); } /* Header & footer surfaces */ html[data-theme="dark"] .site-header, html[data-theme="dark"] .header-main, html[data-theme="dark"] .nv-navbar, html[data-theme="dark"] .hfg_header .header-main-inner { background-color: var(--sw-surface); } html[data-theme="dark"] .site-footer, html[data-theme="dark"] footer.site-footer, html[data-theme="dark"] .nv-footers-wrapper { background-color: var(--sw-surface); color: var(--sw-text); } /* Generic cards / panels */ html[data-theme="dark"] .nv-card, html[data-theme="dark"] .wp-block-group.has-background { background-color: var(--sw-surface); border-color: var(--sw-border); } /* Sidebar should match the primary page background, not a raised surface. */ html[data-theme="dark"] .nv-sidebar-wrap .widget, html[data-theme="dark"] .nv-sidebar-wrap .wp-block-group, html[data-theme="dark"] .widget-area .widget { background-color: transparent !important; } html[data-theme="dark"] .wp-block-separator, html[data-theme="dark"] .nv-sidebar-wrap hr { background-color: var(--sw-border); border-color: var(--sw-border); color: var(--sw-border); } /* Nav menu links */ html[data-theme="dark"] .nav-menu a, html[data-theme="dark"] .primary-menu-ul a, html[data-theme="dark"] .header--row a, html[data-theme="dark"] .nv-navbar a { color: var(--sw-text); } html[data-theme="dark"] .nav-menu a:hover, html[data-theme="dark"] .primary-menu-ul a:hover { color: var(--sw-link); } /* Neve sets the menu hover/active color to a dark gray (--nv-secondary-accent), which is unreadable on dark. Remap those custom properties. */ html[data-theme="dark"] .builder-item--primary-menu, html[data-theme="dark"] .builder-item--footer-menu { --hovercolor: var(--sw-link); --hovertextcolor: var(--sw-link); --activecolor: var(--sw-link); } /* Form fields */ html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--sw-raised); color: var(--sw-text); border-color: var(--sw-border); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--sw-muted); } /* Dividers, tables, quotes, code */ html[data-theme="dark"] hr, html[data-theme="dark"] table, html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: var(--sw-border); } html[data-theme="dark"] blockquote { border-color: var(--sw-link); color: var(--sw-text); } html[data-theme="dark"] code, html[data-theme="dark"] pre, html[data-theme="dark"] kbd { background-color: var(--sw-raised); color: var(--sw-text); } /* Muted / meta text */ html[data-theme="dark"] .nv-meta-list, html[data-theme="dark"] .entry-meta, html[data-theme="dark"] .post-meta, html[data-theme="dark"] time, html[data-theme="dark"] .nv-meta-list a { color: var(--sw-muted); } /* Primary buttons / CTAs */ html[data-theme="dark"] .button, html[data-theme="dark"] .wp-block-button__link, html[data-theme="dark"] button.submit, html[data-theme="dark"] input[type="submit"], html[data-theme="dark"] .nv-ctas .button.button-primary { background-color: var(--sw-cta); color: var(--sw-cta-text); border-color: var(--sw-cta); } /* Remap block-editor palette colors that resolve dark, so utility classes like .has-neve-link-color-color become readable without per-element rules. */ html[data-theme="dark"] { --wp--preset--color--neve-link-color: var(--sw-link); } /* Striped table block: replace the light pink odd-row fill and black borders with dark-consistent surfaces (the Greatest Hits table). */ html[data-theme="dark"] .wp-block-table { color: var(--sw-text); } html[data-theme="dark"] .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--sw-raised); } html[data-theme="dark"] .wp-block-table td, html[data-theme="dark"] .wp-block-table th, html[data-theme="dark"] .wp-block-table.is-style-stripes td, html[data-theme="dark"] .wp-block-table.is-style-stripes th { border-color: var(--sw-border); } html[data-theme="dark"] .wp-block-table a { color: var(--sw-link); } /* ---------- Standardize author-set light & gradient surfaces ---------- */ /* Neve header/footer rows (fixes the white strip near the footer). These set a --bgcolor custom property that the row background reads from. */ html[data-theme="dark"] .header-top, html[data-theme="dark"] .header-main, html[data-theme="dark"] .header-bottom, html[data-theme="dark"] .footer-top, html[data-theme="dark"] .footer-main, html[data-theme="dark"] .footer-bottom { --bgcolor: var(--sw-surface); --rowbcolor: var(--sw-surface); --color: var(--sw-text); } /* Light / pale background utility classes -> dark surface. (Saturated brand colors like vivid-red are intentionally left alone.) */ html[data-theme="dark"] .has-white-background-color, html[data-theme="dark"] .has-very-light-gray-background-color, html[data-theme="dark"] .has-subtle-light-gray-background-color, html[data-theme="dark"] .has-subtle-pale-pink-background-color, html[data-theme="dark"] .has-subtle-pale-green-background-color, html[data-theme="dark"] .has-subtle-pale-blue-background-color, html[data-theme="dark"] .has-pale-pink-background-color, html[data-theme="dark"] .has-pale-cyan-blue-background-color, html[data-theme="dark"] .has-cyan-bluish-gray-background-color, html[data-theme="dark"] .has-nv-light-bg-background-color, html[data-theme="dark"] .has-nv-site-bg-background-color, html[data-theme="dark"] .has-nv-text-dark-bg-background-color { background-color: var(--sw-surface) !important; } /* Columns/cards that carry their own light background -> raised surface */ html[data-theme="dark"] .wp-block-column.has-senary-background-color, html[data-theme="dark"] .wp-block-column.has-white-background-color, html[data-theme="dark"] .wp-block-column.has-nv-text-dark-bg-background-color, html[data-theme="dark"] .wp-block-column.has-nv-light-bg-background-color { background-color: var(--sw-raised) !important; } /* Wrapper columns that hold a bordered inner card (e.g. the membership tiers): make the wrapper transparent so the page shows through instead of a second color band below the card's border. */ html[data-theme="dark"] .wp-block-column.has-background:has(.wp-block-group.has-background) { background-color: transparent !important; } /* Gradient backgrounds -> solid dark surface (gated by the "flatten gradients" setting; cover-image overlays excluded so photos behind a gradient stay). */ html[data-theme="dark"] .sw-flatten-gradients [class*="-gradient-background"]:not(.wp-block-cover__gradient-background):not(.sw-dark-toggle), html[data-theme="dark"] .sw-flatten-gradients [style*="gradient"]:not(.wp-block-cover__gradient-background):not(.wp-block-cover):not(.sw-dark-toggle) { background-image: none !important; background-color: var(--sw-gradient-bg, var(--sw-surface)) !important; } /* Striped tables: neutralize the bright base fill so alternation is subtle. */ html[data-theme="dark"] .wp-block-table.is-style-stripes { background-color: transparent !important; } /* ---------- Social icons ---------- */ /* Logos-only icons. Mono: all icons light. Brand: keep brand colors but lift the near-black brands (X, Patreon, Threads, etc.) so they stay visible. */ html[data-theme="dark"] .sw-social-mono .wp-block-social-links.is-style-logos-only .wp-social-link { color: var(--sw-text) !important; } html[data-theme="dark"] .sw-social-brand .wp-block-social-links.is-style-logos-only .wp-social-link-x, html[data-theme="dark"] .sw-social-brand .wp-block-social-links.is-style-logos-only .wp-social-link-patreon, html[data-theme="dark"] .sw-social-brand .wp-block-social-links.is-style-logos-only .wp-social-link-threads, html[data-theme="dark"] .sw-social-brand .wp-block-social-links.is-style-logos-only .wp-social-link-medium, html[data-theme="dark"] .sw-social-brand .wp-block-social-links.is-style-logos-only .wp-social-link-tumblr, html[data-theme="dark"] .sw-social-brand .wp-block-social-links.is-style-logos-only .wp-social-link-fivehundredpx { color: var(--sw-text) !important; } /* Default chip style: a hairline ring so black-brand chips read on dark. */ html[data-theme="dark"] .wp-block-social-links:not(.is-style-logos-only) .wp-social-link { box-shadow: inset 0 0 0 1px var(--sw-border); } /* Content image dimming (logo and mapped images excluded) */ html[data-theme="dark"] img:not(.sw-no-dark):not([data-sw-dark-src]) { filter: brightness(var(--sw-img-dim, 1)); } /* Disable transitions during a theme switch so the readability pass reads the final colors (and the switch is instant rather than mid-fade). */ html.sw-switching, html.sw-switching *, html.sw-switching *::before, html.sw-switching *::after { transition: none !important; } /* ---------- Toggle control ---------- */ /* !important resets so theme menu/button styling can't draw a border or box around the control (it sits inside the nav menu as a menu item). */ .sw-dark-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent !important; border: 0 !important; padding: 6px; margin: 0; cursor: pointer; color: inherit; line-height: 0; -webkit-appearance: none; appearance: none; box-shadow: none !important; text-shadow: none; } /* Neutralize the theme's default button hover/focus decoration (the stray black box that appeared around the switch on hover). */ .sw-dark-toggle:hover, .sw-dark-toggle:focus, .sw-dark-toggle:active { box-shadow: none; outline: none; } .sw-dark-toggle:focus-visible { outline: 2px solid var(--sw-link, #6ea0e6); outline-offset: 2px; border-radius: 6px; } .sw-dark-toggle__sun { display: none; } html[data-theme="dark"] .sw-dark-toggle__sun { display: inline-block; } html[data-theme="dark"] .sw-dark-toggle__moon { display: none; } /* Icon style hides the switch track */ .sw-dark-toggle--icon .sw-dark-toggle__track { display: none; } /* Switch style hides the icons */ .sw-dark-toggle--switch svg { display: none !important; } .sw-dark-toggle--switch .sw-dark-toggle__track { display: inline-block; position: relative; width: 42px; height: 22px; border-radius: 999px; background: #b8bcc4; transition: background 0.2s ease; } html[data-theme="dark"] .sw-dark-toggle--switch .sw-dark-toggle__track { background: var(--sw-cta, #e63946); } .sw-dark-toggle--switch .sw-dark-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; } html[data-theme="dark"] .sw-dark-toggle--switch .sw-dark-toggle__thumb { transform: translateX(20px); } /* Sliding switch with the sun/moon icon inside the knob. */ .sw-dark-toggle__knob-sun, .sw-dark-toggle__knob-moon { display: none; } .sw-dark-toggle--switch-icon .sw-dark-toggle__track { display: inline-block; position: relative; width: 46px; height: 24px; border-radius: 999px; background: #b8bcc4; transition: background 0.2s ease; } html[data-theme="dark"] .sw-dark-toggle--switch-icon .sw-dark-toggle__track { background: var(--sw-cta, #e63946); } .sw-dark-toggle--switch-icon .sw-dark-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #1d3557; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } html[data-theme="dark"] .sw-dark-toggle--switch-icon .sw-dark-toggle__thumb { transform: translateX(22px); } .sw-dark-toggle--switch-icon > .sw-dark-toggle__sun, .sw-dark-toggle--switch-icon > .sw-dark-toggle__moon { display: none !important; } .sw-dark-toggle--switch-icon .sw-dark-toggle__knob-sun { display: block; } html[data-theme="dark"] .sw-dark-toggle--switch-icon .sw-dark-toggle__knob-sun { display: none; } html[data-theme="dark"] .sw-dark-toggle--switch-icon .sw-dark-toggle__knob-moon { display: block; } /* Floating placement */ .sw-dark-toggle-floating { position: fixed; right: 18px; bottom: 18px; z-index: 9999; } .sw-dark-toggle-floating .sw-dark-toggle { width: 46px; height: 46px; border-radius: 50%; background: var(--sw-cta, #e63946) !important; color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .sw-dark-toggle-floating .sw-dark-toggle { background: var(--sw-surface) !important; color: var(--sw-link); border: 1px solid var(--sw-border) !important; } /* Menu / inline placements inherit header colors */ .sw-dark-toggle-menu-item { display: flex; align-items: center; background: transparent !important; border: 0 !important; box-shadow: none !important; }