html[data-theme="dark"] { /* Token overrides — cascade to every style.css var(--sd-color-*) surface AND to Blocksy's --theme-* vars (the child theme aliases --theme-text-color:var(--sd-color-text) etc. at priority 9, so re-pointing the SD token re-points Blocksy too). */ --sd-color-bg: #14171d; --sd-color-surface: #1e2128; --sd-color-text: #e6e9ef; --sd-color-heading: #f2f5fb; --sd-color-border: #2c313b; /* accent gold stays readable on dark; header/footer keep their own literals */ --sd-color-accent: #f0ba37; /* Local dark helpers reused by the rules below. */ --sdk-panel: #1e2128; /* neutral card */ --sdk-panel-warm: #241f16; /* gold-tinted callout (was cream #fff8df) */ --sdk-panel-spot: #2b2410; /* spotlight callout (was #ffef9e) */ --sdk-panel-2: #24272f; /* secondary surface / inputs */ --sdk-border-warm: #3a3324; /* border on warm callouts (was #e7ddbd) */ --sdk-gold-text: #e8c979; /* text on warm callouts (was #5a4a00/#6a5a1a) */ --sdk-muted: #9aa3b2; --sdk-link: #66b2ff; --sdk-bar-bg: #1b1e24; /* header menu bar (was #fff090) */ --sdk-bar-ink: #f0ba37; /* top-level menu ink = gold */ --sdk-bar-hair: #3a3324; /* bar top/bottom hairline (was #f0ba37) */ --sdk-bar-hover: rgba(240, 186, 55, 0.16); --sdk-drop-bg: #24272f; /* dropdown panel (was #fffacd) */ --sdk-drop-ink: #e8c979; /* dropdown ink */ --sdk-foot-bg: #1b1e24; /* footer (was #ffff99) */ --sdk-foot-ink: #e8c979; /* footer copyright/links ink */ --sdk-foot-hair: #6a531c; /* footer top rule (was #e1a400) */ --sdk-oc-bg: #1b1e24; /* mobile off-canvas panel (was #ffeb99) */ --sdk-title-ink: #66b2ff; /* page title (operator override, was navy #000088) */ --sdk-slogan-bg: #2b2410; /* slogan chip (was neon #ffff33) */ --sdk-slogan-ink: #e8c979; --sdk-subtitle: #8ea2ff; /* blue menu subtitles lifted for dark (was #0000ff) */ } /* ---- Page field (body shows through the transparent content wrapper) ---- */ html[data-theme="dark"] body { background-color: var(--sd-color-bg) !important; } /* Blocksy content-area headings/links follow the tokens already; nudge muted meta. */ html[data-theme="dark"] .entry-content, html[data-theme="dark"] main.site-main { color: var(--sd-color-text); } html[data-theme="dark"] :is(code, kbd, samp, pre) { background-color: var(--sdk-panel-2); color: var(--sd-color-text); border-color: var(--sd-color-border); } /* A mark inside a link/heading keeps that element's colour (a gold link stays gold). */ html[data-theme="dark"] :is(a, h1, h2, h3, h4) :is(code, kbd, samp) { color: inherit; } /* ---- Home sections (cream cards with gold left bar) ---- */ html[data-theme="dark"] .tssd-home-section:not(.tssd-home-hero) { background: var(--sdk-panel-warm); border-color: var(--sdk-border-warm); } html[data-theme="dark"] .tssd-home-section:has(.tssd-daily-teaser):not(.tssd-home-hero) { background: var(--sdk-panel-spot); } html[data-theme="dark"] .tssd-home-section .tssd-home-h2, html[data-theme="dark"] .tssd-home-section h2, html[data-theme="dark"] .tssd-home-section h3 { color: var(--sd-color-heading); } /* Hero CTA bar + its buttons */ html[data-theme="dark"] .tssd-home-cta { background: var(--sdk-panel-spot); border-color: #6a531c; } html[data-theme="dark"] .tssd-home-cta .tssd-cta--play .wp-block-button__link { background: var(--sd-white); color: var(--sd-text); border-color: var(--sd-line); } html[data-theme="dark"] .tssd-home-cta .tssd-cta--play .wp-block-button__link:hover { background: var(--sd-surface-2); } html[data-theme="dark"] .tssd-home-cta__micro { color: var(--sdk-gold-text); } html[data-theme="dark"] .wp-block-button__link:not(.is-style-outline), html[data-theme="dark"] .ct-button:not(.ct-button-ghost), html[data-theme="dark"] main.site-main .button:not(.is-style-outline), html[data-theme="dark"] .woocommerce a.button:not(.is-style-outline), html[data-theme="dark"] .woocommerce button.button, html[data-theme="dark"] .woocommerce input.button, html[data-theme="dark"] .woocommerce #respond input#submit, html[data-theme="dark"] .woocommerce-Button.button { color: #2a1f00; font-weight: var(--sd-btn-weight); } html[data-theme="dark"] .wp-block-button__link:not(.is-style-outline):hover, html[data-theme="dark"] .wp-block-button__link:not(.is-style-outline):focus, html[data-theme="dark"] .ct-button:not(.ct-button-ghost):hover, html[data-theme="dark"] .ct-button:not(.ct-button-ghost):focus, html[data-theme="dark"] main.site-main .button:not(.is-style-outline):hover, html[data-theme="dark"] main.site-main .button:not(.is-style-outline):focus, html[data-theme="dark"] .woocommerce a.button:hover, html[data-theme="dark"] .woocommerce a.button:focus, html[data-theme="dark"] .woocommerce button.button:hover, html[data-theme="dark"] .woocommerce button.button:focus, html[data-theme="dark"] .woocommerce input.button:hover, html[data-theme="dark"] .woocommerce input.button:focus { color: #2a1f00; } /* Points box (#fff8df) inside home sections */ html[data-theme="dark"] .tssd-home-section [style*="#fff8df"], html[data-theme="dark"] .tssd-daily-teaser { background: var(--sdk-panel-warm) !important; color: var(--sd-color-text); } /* ---- Search & blog cards ---- */ html[data-theme="dark"] body.search-results .entry-card, html[data-theme="dark"] body.search .entry-card { background: var(--sdk-panel-spot) !important; border-color: var(--sdk-border-warm) !important; } html[data-theme="dark"] body.blog .entries .entry-card, html[data-theme="dark"] body.archive:not(.search-results) .entries .entry-card { background: var(--sdk-panel-warm) !important; border-color: var(--sdk-border-warm) !important; } html[data-theme="dark"] .entry-card .entry-title, html[data-theme="dark"] .entry-card .entry-excerpt, html[data-theme="dark"] .entry-card .entry-meta { color: var(--sd-color-text); } /* ---- WooCommerce cards / tables (shop, cart, checkout, account) ---- */ html[data-theme="dark"] .woocommerce ul.products li.product, html[data-theme="dark"] .woocommerce table.shop_table, html[data-theme="dark"] .woocommerce .cart-collaterals .cart_totals, html[data-theme="dark"] .woocommerce-checkout #order_review, html[data-theme="dark"] .woocommerce-checkout .woocommerce-checkout-review-order, html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-content, html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation { background: var(--sdk-panel-warm) !important; border-color: var(--sdk-border-warm) !important; color: var(--sd-color-text); } html[data-theme="dark"] .woocommerce-cart table.cart thead th, html[data-theme="dark"] .woocommerce-cart .cart_totals h2 { color: var(--sdk-gold-text); border-bottom-color: var(--sdk-border-warm); } html[data-theme="dark"] .woocommerce-cart table.cart tbody td { border-top-color: var(--sdk-border-warm); } html[data-theme="dark"] .woocommerce-cart table.cart td.product-quantity input.qty { background: var(--sdk-panel-2) !important; border-color: var(--sdk-border-warm) !important; color: var(--sd-color-text); } html[data-theme="dark"] .woocommerce-products-header, html[data-theme="dark"] .woocommerce .woocommerce-notices-wrapper + .woocommerce-result-count { border-bottom-color: var(--sdk-border-warm); } /* ---- Cart FAB (floating cart button) ---- */ html[data-theme="dark"] .tssd-cart-fab { background: var(--sdk-panel-warm); border-color: var(--sdk-border-warm); color: var(--sdk-gold-text); } html[data-theme="dark"] .tssd-cart-fab .tssd-cart-fab__count { background: #3a3f49; } /* ---- Generic form fields inside the content area ---- */ html[data-theme="dark"] main.site-main input:not([type="submit"]):not([type="button"]), html[data-theme="dark"] main.site-main select, html[data-theme="dark"] main.site-main textarea { background: var(--sdk-panel-2); border-color: var(--sd-color-border); color: var(--sd-color-text); } html[data-theme="dark"] main.site-main .tssd-nap-inline .tssd-nap-grid .c input { background: transparent; color: var(--nnum); } /* ---- Search page (/suche/) form + result list ---- */ html[data-theme="dark"] .search-form, html[data-theme="dark"] .search-results .search-form input[type="search"] { background: var(--sdk-panel-2); color: var(--sd-color-text); border-color: var(--sd-color-border); } /* ---- E5 · Page title (was navy #000088, unreadable 1.3:1 on dark) ---- */ html[data-theme="dark"] .ct-header .site-title, html[data-theme="dark"] .ct-header .site-title a { color: var(--sdk-title-ink) !important; /* #66b2ff, 7.4:1 — operator choice */ } /* ---- E6 · Slogan chip (native .site-description + ::after fallback) ---- */ html[data-theme="dark"] .ct-header .site-description, html[data-theme="dark"] .ct-header .site-title-container::after { background-color: var(--sdk-slogan-bg) !important; color: var(--sdk-slogan-ink) !important; } /* ---- E1 · Header menu bar ---- */ html[data-theme="dark"] [data-header*="type-1"] .ct-header [data-row="bottom"] { background-color: var(--sdk-bar-bg) !important; border-top-color: var(--sdk-bar-hair) !important; border-bottom-color: var(--sdk-bar-hair) !important; } /* Max Mega Menu top-level links → gold ink; hover = soft gold tint (keep the ACTIVE item's solid gold field #f0ba37 from style.css — the "you are here" cue). */ html[data-theme="dark"] [id^="mega-menu-wrap-"] ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link { color: var(--sdk-bar-ink) !important; } html[data-theme="dark"] [id^="mega-menu-wrap-"] ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link:hover, html[data-theme="dark"] [id^="mega-menu-wrap-"] ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link:focus { background-color: var(--sdk-bar-hover) !important; color: var(--sdk-bar-ink) !important; } html[data-theme="dark"] .ct-header [data-row="bottom"] .menu > li.menu-item > .ct-menu-link { color: var(--sdk-bar-ink) !important; } html[data-theme="dark"] .ct-header [data-row="bottom"] .menu > li.menu-item > .ct-menu-link:hover, html[data-theme="dark"] .ct-header [data-row="bottom"] .menu > li.current-menu-item > .ct-menu-link { background-color: var(--sdk-bar-hover) !important; color: var(--sdk-bar-ink) !important; } /* Dropdown toggle arrows on the bar follow the gold ink. */ html[data-theme="dark"] .ct-header [data-row="bottom"] .menu .ct-toggle-dropdown-desktop, html[data-theme="dark"] .ct-header [data-row="bottom"] .menu .ct-toggle-dropdown-desktop .ct-icon { color: var(--sdk-bar-ink) !important; } /* ---- E2 · Dropdowns (mega + native). Gold top-border stays as the brand tie. ---- */ html[data-theme="dark"] [id^="mega-menu-wrap-"] ul[id^="mega-menu-"] li.mega-menu-item ul.mega-sub-menu { background-color: var(--sdk-drop-bg) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] [id^="mega-menu-wrap-"] ul[id^="mega-menu-"] li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link { color: var(--sdk-drop-ink) !important; } html[data-theme="dark"] [id^="mega-menu-wrap-"] ul[id^="mega-menu-"] li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover { background-color: var(--sdk-bar-hover) !important; } html[data-theme="dark"] .ct-header .menu .sub-menu, html[data-theme="dark"] .ct-header .header-menu-1 .sub-menu { background-color: var(--sdk-drop-bg) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important; --theme-palette-color-8: var(--sdk-drop-bg); } html[data-theme="dark"] .ct-header .menu .sub-menu .ct-menu-link, html[data-theme="dark"] .ct-header .menu .sub-menu .sd-mm-title { color: var(--sdk-drop-ink) !important; } html[data-theme="dark"] .ct-header .menu .sub-menu .menu-item:hover > .ct-menu-link, html[data-theme="dark"] .ct-header .menu .sub-menu .menu-item.current-menu-item > .ct-menu-link, html[data-theme="dark"] .ct-header .menu .sub-menu .menu-item.current-menu-ancestor > .ct-menu-link, html[data-theme="dark"] .ct-header .menu .sub-menu .menu-item.current-menu-parent > .ct-menu-link { background-color: var(--sdk-bar-hover) !important; color: var(--sdk-drop-ink) !important; } /* Dashed separators between dropdown items → faint gold instead of black. */ html[data-theme="dark"] .ct-header .menu .sub-menu > li.menu-item + li.menu-item { border-top-color: rgba(240, 186, 55, 0.22); } /* Blue menu subtitles (bar + dropdown) lifted to a readable light navy. */ html[data-theme="dark"] .ct-header .menu .sub-menu .sd-mm-desc, html[data-theme="dark"] #offcanvas .mobile-menu .sd-mm-desc, html[data-theme="dark"] .ct-header [data-row="bottom"] .menu > li.menu-item > .ct-menu-link .sd-mm-desc { color: var(--sdk-subtitle) !important; } html[data-theme="dark"] .sd-mm-icon:not(.sd-mm-icon--dark-swapped) { filter: brightness(2.4) saturate(0.9); } html[data-theme="dark"] img[src*="/sd-menu-icons/info-"], html[data-theme="dark"] img.tssd-home-ico[src*="/sd-menu-icons/menu-trophy"] { filter: brightness(2.4) saturate(0.9); } /* ---- E4 · Mobile off-canvas panel ---- */ html[data-theme="dark"] #offcanvas .ct-panel-inner { background-color: var(--sdk-oc-bg) !important; } html[data-theme="dark"] #offcanvas .ct-toggle-close, html[data-theme="dark"] #offcanvas .ct-toggle-close .ct-icon { color: var(--sdk-bar-ink) !important; } html[data-theme="dark"] #offcanvas .mobile-menu { background-color: rgba(255, 255, 255, 0.05); border-color: var(--sdk-bar-hair); } html[data-theme="dark"] #offcanvas .mobile-menu .ct-menu-link { color: var(--sdk-bar-ink) !important; } html[data-theme="dark"] #offcanvas .mobile-menu li + li { border-top-color: rgba(240, 186, 55, 0.28); } html[data-theme="dark"] #offcanvas .mobile-menu .ct-menu-link:hover, html[data-theme="dark"] #offcanvas .mobile-menu .current-menu-item > .ct-menu-link, html[data-theme="dark"] #offcanvas .mobile-menu .current-menu-item > .ct-sub-menu-parent > .ct-menu-link { background-color: var(--sdk-bar-hover) !important; color: var(--sdk-bar-ink) !important; } html[data-theme="dark"] #offcanvas .mobile-menu .ct-toggle-dropdown-mobile, html[data-theme="dark"] #offcanvas .mobile-menu .ct-toggle-dropdown-mobile .ct-icon { color: var(--sdk-bar-ink) !important; } html[data-theme="dark"] #offcanvas .mobile-menu .sub-menu, html[data-theme="dark"] #offcanvas .mobile-menu .ct-sub-menu { background-color: rgba(255, 255, 255, 0.05) !important; } /* ---- E3 · Footer ---- */ html[data-theme="dark"] .ct-footer { background-color: var(--sdk-foot-bg) !important; border-top-color: var(--sdk-foot-hair) !important; color: var(--sdk-foot-ink); } /* Top footer menu links (were black on yellow). */ html[data-theme="dark"] .ct-footer #menu-footer-oben li.menu-item > .ct-menu-link { color: var(--sdk-foot-ink) !important; } html[data-theme="dark"] .ct-footer #menu-footer-oben li.menu-item:hover { background-color: var(--sdk-bar-hover); } html[data-theme="dark"] .ct-footer #menu-footer-oben li.menu-item > .ct-menu-link:hover, html[data-theme="dark"] .ct-footer #menu-footer-oben li.menu-item > .ct-menu-link:focus { color: var(--sdk-foot-ink) !important; } /* Lower footer gold links (#e1a400) stay — they read better on dark than on yellow. Their gold hover pill also stays. Copyright / free text picks up the ink above. */ html[data-theme="dark"] .ct-footer #mega-menu-wrap-max_mega_menu_1 { border-top-color: var(--sdk-foot-hair) !important; } /* ---- E7 · Yellow section banners (main h1/h2/h3 across content pages) ---- */ html[data-theme="dark"] main h1, html[data-theme="dark"] main h2, html[data-theme="dark"] main h3 { color: var(--sdk-bar-ink) !important; border-top-color: var(--sdk-foot-hair) !important; /* orange rule → muted gold */ border-bottom-color: var(--sdk-foot-hair) !important; } html[data-theme="dark"] main h1 { background-color: var(--sd-color-surface) !important; /* #1e2128, was neon #ffff33 */ border-left: 4px solid var(--sd-color-accent) !important; } /* Blue source-reference examples: the