/* Olam 1.9.14: optional site-wide dark palette. * Only active when the existing header's sun/moon toggle sets * document.documentElement.dataset.hitTheme = "dark". * No icon, image, video, editor, iframe or embedded game is filtered. */ :root[data-hit-theme="dark"] { color-scheme: dark; --cb-ink: #f3e9df; --cb-accent: #eac586; --cb-paper: #171b23; --cb-night: #12151b; --cb-text: #e8e3dc; --cb-muted: #b7b8bd; --cb-line: #39404c; --cb-white: #242a35; --cb-shadow: 0 18px 50px rgba(0,0,0,.24); --olam-dark-surface: #222834; --olam-dark-surface-raised: #2a303b; --olam-dark-field: #202633; --olam-dark-link: #eed098; --olam-dark-subtle: #bcb9b3; --olam-dark-border: #414957; } :root[data-hit-theme="dark"] body, :root[data-hit-theme="dark"] #chronos-site-frame, :root[data-hit-theme="dark"] #primary-content { background-color: var(--cb-paper); color: var(--cb-text); } /* Custom article canvas colors are light-mode presentation choices. */ :root[data-hit-theme="dark"] body.single-post.olam-article-custom-bg, :root[data-hit-theme="dark"] body.single-post.olam-article-custom-bg .cb-site-frame > .cb-content { background-color: var(--cb-paper) !important; } /* Native Olam page and article templates. The existing header/footer remain * deliberately unchanged; they use a separate wine/gold palette. */ :root[data-hit-theme="dark"] :is(.cb-page,.cb-article,.olam-standard-page,.olam-editorial-article,.olam-listing,.cb-home,.cb-home-content,.olam-page-canvas) { color: var(--cb-text); } :root[data-hit-theme="dark"] :is(.cb-title,.cb-card-title,.cb-section-head h2,.cb-prose h1,.cb-prose h2,.cb-prose h3,.cb-prose h4) { color: var(--cb-ink); } :root[data-hit-theme="dark"] :is(.cb-hero-intro > p,.cb-article-deck,.cb-article-meta,.cb-breadcrumb,.cb-card-desc,.cb-card-meta,.cb-listing-desc,.cb-hero-index) { color: var(--cb-muted); } :root[data-hit-theme="dark"] :is(.cb-prose,.olam-page-content,.olam-article-body,.wp-block-post-content) { color: var(--cb-text); } :root[data-hit-theme="dark"] .cb-prose :is(a:not(.wp-block-button__link), a:visited:not(.wp-block-button__link)) { color: var(--olam-dark-link); } :root[data-hit-theme="dark"] .cb-prose :is(a:hover,a:focus-visible) { color: #ffdea3; } :root[data-hit-theme="dark"] :is(.cb-category-item:hover,.cb-card-media,.cb-image-fallback) { background-color: var(--olam-dark-surface); } :root[data-hit-theme="dark"] .cb-category-item:hover { background: var(--olam-dark-surface); } :root[data-hit-theme="dark"] :is(.cb-prose blockquote,.wp-block-quote:not([style*="background"])) { background: var(--olam-dark-surface); color: var(--cb-text); border-color: var(--cb-accent); } :root[data-hit-theme="dark"] :is(.cb-prose td,.cb-prose th,.wp-block-table td,.wp-block-table th) { border-color: var(--cb-line); } :root[data-hit-theme="dark"] :is(.cb-prose th,.wp-block-table thead,.wp-block-table tfoot) { background-color: var(--olam-dark-surface); } :root[data-hit-theme="dark"] :is(.cb-prose pre,.cb-prose code,.wp-block-preformatted,.wp-block-code,.wp-block-verse) { color: #eee6d7; background-color: var(--olam-dark-surface); border-color: var(--cb-line); } :root[data-hit-theme="dark"] :is(.cb-prose hr,.wp-block-separator) { border-color: var(--cb-line); color: var(--cb-line); } :root[data-hit-theme="dark"] :is(.cb-article-tags a,.cb-pagination .page-numbers,.cb-desktop-nav .sub-menu,.cb-search-flyout,.cb-mobile-nav nav) { border-color: var(--cb-line); } :root[data-hit-theme="dark"] :is(.cb-search-flyout,.cb-desktop-nav .sub-menu,.cb-mobile-nav nav) { background-color: var(--olam-dark-surface); color: var(--cb-text); } :root[data-hit-theme="dark"] .cb-pagination :is(.current,.page-numbers:hover) { background-color: var(--olam-dark-surface-raised); color: var(--cb-ink); border-color: var(--cb-accent); } :root[data-hit-theme="dark"] :is(.olam-listing,.olam-search-listing) .cb-listing-head .cb-title { color: var(--cb-ink); } /* Native controls, searches and forms. Restricted to the main content so custom * site overlays and their own button styling are not repainted. */ :root[data-hit-theme="dark"] :is(#primary-content,.woocommerce) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),select,textarea) { background: var(--olam-dark-field); color: var(--cb-text); border-color: var(--olam-dark-border); } :root[data-hit-theme="dark"] :is(#primary-content,.woocommerce) :is(input,textarea)::placeholder { color: #b4b4b8; opacity: 1; } :root[data-hit-theme="dark"] #primary-content :is(button,.button,.wp-block-button__link):not([style]):not(.cb-btn):not(.cb-search-form button) { border-color: var(--cb-line); } :root[data-hit-theme="dark"] .cb-search-form button { background-color: var(--olam-dark-surface-raised); color: var(--cb-ink); } /* CTA buttons use --cb-ink as a light-mode background; avoid pale-on-pale * when the ink token changes to light text in dark mode. */ :root[data-hit-theme="dark"] :is(.cb-btn-dark,.cb-btn-dark:hover) { color: #fff7eb; background-color: #303947; } :root[data-hit-theme="dark"] .cb-btn-dark:hover { background-color: #785436; } /* WordPress core blocks which default to white/light backgrounds. * Explicit inline block colors are respected as authored content. */ :root[data-hit-theme="dark"] :is(.wp-block-group,.wp-block-columns,.wp-block-column,.wp-block-media-text,.wp-block-query,.wp-block-post-template) { color: inherit; } :root[data-hit-theme="dark"] :is(.wp-block-search__input,.wp-block-search__button) { border-color: var(--cb-line); } :root[data-hit-theme="dark"] :is(.wp-block-latest-posts,.wp-block-categories-list,.wp-block-archives-list) { color: var(--cb-text); } /* WooCommerce basic theme integration, without restyling product photography. */ :root[data-hit-theme="dark"] :is(.woocommerce,.woocommerce-page) { color: var(--cb-text); } :root[data-hit-theme="dark"] .woocommerce :is(.woocommerce-message,.woocommerce-info,.woocommerce-error,.shop_table,.cart_totals,.woocommerce-checkout-review-order,.woocommerce-MyAccount-content) { background-color: var(--olam-dark-surface); color: var(--cb-text); border-color: var(--cb-line); } :root[data-hit-theme="dark"] .woocommerce :is(.button,button.button,a.button) { background-color: var(--olam-dark-surface-raised); color: var(--cb-ink); } :root[data-hit-theme="dark"] .woocommerce :is(a,button):focus-visible { outline-color: var(--cb-accent); } /* Respect reduced motion. No broad theme-transition on large surfaces. */ @media (prefers-reduced-motion: reduce) { :root[data-hit-theme="dark"] { scroll-behavior: auto; } } /* Olam authored text palette fixes. Restrict to normal article/page reading areas, not hero images, colored content cards, embeds, buttons or plugins. */ :root[data-hit-theme="dark"] :is(.olam-article-body,.olam-page-content) :is( .has-olam-burgundy-color,.has-ink-color,.has-primary-color ):not(.has-background) { color: #f0e8e0 !important; } :root[data-hit-theme="dark"] :is(.olam-article-body,.olam-page-content) :is(p,li,h2,h3,h4,h5,h6,strong,span)[style*="color:#4c2d33" i]:not([style*="background" i]), :root[data-hit-theme="dark"] :is(.olam-article-body,.olam-page-content) :is(p,li,h2,h3,h4,h5,h6,strong,span)[style*="color: #4c2d33" i]:not([style*="background" i]), :root[data-hit-theme="dark"] :is(.olam-article-body,.olam-page-content) :is(p,li,h2,h3,h4,h5,h6,strong,span)[style*="color:#662830" i]:not([style*="background" i]), :root[data-hit-theme="dark"] :is(.olam-article-body,.olam-page-content) :is(p,li,h2,h3,h4,h5,h6,strong,span)[style*="color: #662830" i]:not([style*="background" i]) { color: #f0e8e0 !important; } /* Olam's own hard-coded muted/brown text colors. */ :root[data-hit-theme="dark"] :is(.cb-article-deck,.cb-breadcrumb,.cb-article-meta,.cb-feature-credit,.olam-feature-credit) { color: #c9c4c0; } /* Olam 1.9.15: Gutenberg homepage's authored latest-articles HTML block. * Tested against the markup in Chronos Studio's original latest-articles widget. * COLOR-ONLY: no layout, typography metrics, media dimensions, filter or animation * changes. Higher specificity than the CSS