/** * SoftPress — Dark Mode Stylesheet * Nordic Editorial Design System — v2.3 * * Applied via [data-theme="dark"] on . * Colors are configurable via Customizer (injected as CSS variables). * * KEY FIX: --sp-white stays #FFFFFF so hero overlay text remains pure white. * All text elements explicitly set to high-contrast colors. * * @package SoftPress * @since 2.3.0 */ [data-theme="dark"] { --sp-bg: var(--sp-dark-bg, #1A1A18); --sp-fg: var(--sp-dark-text, #EDECE8); --sp-accent: var(--sp-dark-accent, #D4785E); --sp-accent-hover: #E08A6E; --sp-accent-light: rgba(212, 120, 94, 0.15); --sp-border: #3A3A38; --sp-surface: var(--sp-dark-surface, #252523); --sp-muted: #A0A09C; --sp-white: #FFFFFF; --sp-dark: #111110; --sp-shadow-card: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.4); --sp-shadow-elevated: 0 4px 12px rgba(0,0,0,0.4); --sp-shadow-overlay: 0 8px 30px rgba(0,0,0,0.5); color-scheme: dark; } /* ─── Base ─── */ [data-theme="dark"] body, [data-theme="dark"] { background-color: var(--sp-bg); color: var(--sp-fg); } /* ─── Links ─── */ [data-theme="dark"] a { color: var(--sp-fg); } [data-theme="dark"] a:hover { color: var(--sp-accent); } /* ─── Header ─── */ [data-theme="dark"] .sp-header { background-color: var(--sp-bg); border-bottom-color: var(--sp-border); } [data-theme="dark"] .sp-header__logo, [data-theme="dark"] .sp-header__logo a { color: var(--sp-fg); } [data-theme="dark"] .sp-header__nav a, [data-theme="dark"] .sp-header__nav .wp-block-navigation-item__content { color: var(--sp-fg); } [data-theme="dark"] .sp-header__nav a:hover, [data-theme="dark"] .sp-header__nav .wp-block-navigation-item__content:hover { color: var(--sp-accent); } [data-theme="dark"] .sp-header__actions button { color: var(--sp-fg); } [data-theme="dark"] .sp-header__actions button:hover { background: var(--sp-surface); } [data-theme="dark"] .sp-header__nav .wp-block-navigation__submenu-container { background: var(--sp-surface); border-color: var(--sp-border); } /* ─── Breaking News ─── */ [data-theme="dark"] .sp-breaking-news { background-color: #111110; border-bottom-color: #2A2A28; } /* ─── Mobile Drawer ─── */ [data-theme="dark"] .sp-mobile-drawer__panel { background: var(--sp-bg); border-right-color: var(--sp-border); } [data-theme="dark"] .sp-mobile-drawer .sp-mobile-nav a, [data-theme="dark"] .sp-mobile-drawer .wp-block-navigation-item__content { color: var(--sp-fg); border-bottom-color: var(--sp-border); } [data-theme="dark"] .sp-mobile-drawer__footer { border-top-color: var(--sp-border); } [data-theme="dark"] .sp-mobile-drawer__footer .sp-mobile-search input { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-fg); } /* ─── Search Overlay ─── */ [data-theme="dark"] .sp-search-overlay__content { background: var(--sp-surface); border: 1px solid var(--sp-border); } [data-theme="dark"] .sp-search-overlay__header { border-bottom-color: var(--sp-border); } [data-theme="dark"] .sp-search-overlay__input { color: var(--sp-fg); } [data-theme="dark"] .sp-search-overlay__kbd { background: var(--sp-bg); border-color: var(--sp-border); color: var(--sp-muted); } [data-theme="dark"] .sp-search-result-item { border-bottom-color: var(--sp-border); color: var(--sp-fg); } [data-theme="dark"] .sp-search-result-item:hover { background: rgba(255,255,255,0.05); } [data-theme="dark"] .sp-search-result-item__title { color: var(--sp-fg); } /* ─── Hero (new pattern) ─── */ [data-theme="dark"] .sp-hero__placeholder { background: linear-gradient(135deg, var(--sp-surface) 0%, var(--sp-border) 100%); } [data-theme="dark"] .sp-hero__cat { background: rgba(0,0,0,0.5); } [data-theme="dark"] .sp-hero--empty { background: var(--sp-surface); } /* Hero title MUST stay pure white on dark gradient overlay */ [data-theme="dark"] .sp-hero__title { color: #FFFFFF; } [data-theme="dark"] .sp-hero__excerpt { color: rgba(255,255,255,0.85); } [data-theme="dark"] .sp-hero__btn { color: #FFFFFF; } /* ─── Hero (legacy) ─── */ [data-theme="dark"] .sp-hero-post__overlay { background: linear-gradient( to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100% ); } /* Hero title MUST stay pure white on dark gradient overlay */ [data-theme="dark"] .sp-hero-post__title, [data-theme="dark"] .sp-hero-post__title a { color: #FFFFFF; } [data-theme="dark"] .sp-hero-post__category, [data-theme="dark"] .sp-hero-post__category a { color: var(--sp-accent); } [data-theme="dark"] .sp-hero-post__meta, [data-theme="dark"] .sp-hero-post__meta a, [data-theme="dark"] .sp-hero-post__sep { color: rgba(255,255,255,0.85); } /* ─── Sidebar Cards ─── */ [data-theme="dark"] .sp-sidebar-card { background: var(--sp-surface); border-color: var(--sp-border); } /* Section labels — must be visible against dark surface */ [data-theme="dark"] .sp-section-label { color: #EDECE8; } [data-theme="dark"] .sp-section-label::after { background: var(--sp-accent); } /* All headings in dark mode must be high-contrast */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #EDECE8; } /* Widget titles */ [data-theme="dark"] .sp-widget__title, [data-theme="dark"] .widget-title { color: #EDECE8; } /* Sidebar card titles */ [data-theme="dark"] .sp-sidebar-card__title, [data-theme="dark"] .sp-sidebar-card .sp-section-label { color: #EDECE8; } /* Category Chips */ [data-theme="dark"] .sp-category-chips .wp-block-categories-list li a { color: var(--sp-fg); border-bottom-color: var(--sp-border); } [data-theme="dark"] .sp-category-chips .wp-block-categories-list li a::before { background: var(--sp-accent); } [data-theme="dark"] .sp-category-chips .wp-block-categories-list li a:hover { color: var(--sp-accent); } /* Numbered Posts (Trending / Most Read) */ [data-theme="dark"] .sp-numbered-post, [data-theme="dark"] .sp-trending-item { border-bottom-color: var(--sp-border); } [data-theme="dark"] .sp-numbered-post::before, [data-theme="dark"] .sp-trending-item::before, [data-theme="dark"] .sp-trending-items .sp-numbered-post::before, [data-theme="dark"] .sp-most-read-items .sp-numbered-post::before, [data-theme="dark"] .sp-trending-list .sp-trending-item::before, [data-theme="dark"] .sp-most-read-list .sp-trending-item::before { color: var(--sp-muted); } [data-theme="dark"] .sp-numbered-post__title, [data-theme="dark"] .sp-numbered-post__title a, [data-theme="dark"] .sp-trending-item__title, [data-theme="dark"] .sp-trending-item__title a { color: #EDECE8; } [data-theme="dark"] .sp-numbered-post__date, [data-theme="dark"] .sp-trending-item__date { color: var(--sp-muted); } /* Editor's Picks */ [data-theme="dark"] .sp-pick-item { border-bottom-color: var(--sp-border); } [data-theme="dark"] .sp-pick-item__title, [data-theme="dark"] .sp-pick-item__title a { color: #EDECE8; } [data-theme="dark"] .sp-pick-item__date { color: var(--sp-muted); } /* Newsletter */ [data-theme="dark"] .sp-newsletter-card__title { color: #EDECE8; } [data-theme="dark"] .sp-newsletter-card__text { color: var(--sp-muted); } [data-theme="dark"] .sp-newsletter-form__input { background: var(--sp-bg); border-color: var(--sp-border); color: var(--sp-fg); } [data-theme="dark"] .sp-newsletter-form__input::placeholder { color: var(--sp-muted); } /* About Card */ [data-theme="dark"] .sp-about-card__text { color: var(--sp-muted); } /* App CTA */ [data-theme="dark"] .sp-app-cta { background: #111110; border-color: #2A2A28; } [data-theme="dark"] .sp-app-cta__title { color: #FFFFFF; } [data-theme="dark"] .sp-app-cta__text { color: rgba(255,255,255,0.7); } /* ─── Latest Story Items ─── */ [data-theme="dark"] .sp-latest-item { border-bottom-color: var(--sp-border); } [data-theme="dark"] .sp-latest-item__title, [data-theme="dark"] .sp-latest-item__title a { color: #EDECE8; } [data-theme="dark"] .sp-latest-item__category, [data-theme="dark"] .sp-latest-item__category a { color: var(--sp-accent); } [data-theme="dark"] .sp-latest-item__excerpt { color: var(--sp-muted); } [data-theme="dark"] .sp-latest-item__date { color: var(--sp-muted); } /* Grid layout mode */ [data-theme="dark"] body.stories-layout-grid .sp-latest-item { background: var(--sp-surface); border-color: var(--sp-border); } /* Compact layout mode */ [data-theme="dark"] body.stories-layout-compact .sp-latest-item { border-bottom-color: var(--sp-border); } /* ─── Post Cards (Don't Miss / Related / Archive) ─── */ [data-theme="dark"] .sp-post-card { background: var(--sp-surface); border-color: var(--sp-border); } [data-theme="dark"] .sp-post-card__title, [data-theme="dark"] .sp-post-card__title a { color: #EDECE8; } [data-theme="dark"] .sp-post-card__category, [data-theme="dark"] .sp-post-card__category a { color: var(--sp-accent); } [data-theme="dark"] .sp-post-card__excerpt { color: var(--sp-muted); } [data-theme="dark"] .sp-post-card__meta { border-top-color: var(--sp-border); color: var(--sp-muted); } [data-theme="dark"] .sp-post-card:hover { box-shadow: var(--sp-shadow-elevated); } /* ─── Single Post ─── */ [data-theme="dark"] .sp-single-header__title { color: #EDECE8; } [data-theme="dark"] .sp-single-header__category, [data-theme="dark"] .sp-single-header__category a { color: var(--sp-accent); } [data-theme="dark"] .sp-single-header__meta { color: var(--sp-muted); } [data-theme="dark"] .sp-single-header__meta a { color: var(--sp-fg); } [data-theme="dark"] .sp-single-header__meta .wp-block-post-author__name { color: var(--sp-fg); } [data-theme="dark"] .sp-single-header__meta .wp-block-post-author__avatar img { border-color: var(--sp-border); } [data-theme="dark"] .sp-single-header__sep, [data-theme="dark"] .sp-single-header__date, [data-theme="dark"] .sp-single-header__reading-time { color: var(--sp-muted); } /* Author bio avatar in dark mode */ [data-theme="dark"] .sp-author-bio .wp-block-post-author__avatar img { border-color: var(--sp-border); } /* Text Controls */ [data-theme="dark"] .sp-text-controls__label { color: var(--sp-muted); } [data-theme="dark"] .sp-text-controls__btn { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-fg); } [data-theme="dark"] .sp-text-controls__btn:hover, [data-theme="dark"] .sp-text-controls__btn.is-active { background: var(--sp-accent-light); border-color: var(--sp-accent); color: var(--sp-accent); } /* Content Body */ [data-theme="dark"] .sp-single-content__body { color: var(--sp-fg); } [data-theme="dark"] .sp-single-content__body h2, [data-theme="dark"] .sp-single-content__body h3, [data-theme="dark"] .sp-single-content__body h4, [data-theme="dark"] .sp-single-content__body h5, [data-theme="dark"] .sp-single-content__body h6 { color: var(--sp-fg); } [data-theme="dark"] .sp-single-content__body blockquote { background: var(--sp-surface); border-left-color: var(--sp-accent); color: var(--sp-fg); } [data-theme="dark"] .sp-single-content__body code { background: var(--sp-surface); color: var(--sp-accent); } [data-theme="dark"] .sp-single-content__body pre { background: #111110; color: var(--sp-fg); } [data-theme="dark"] .sp-single-content__body th { background: var(--sp-bg); color: var(--sp-fg); } [data-theme="dark"] .sp-single-content__body th, [data-theme="dark"] .sp-single-content__body td { border-color: var(--sp-border); } [data-theme="dark"] .sp-single-content__body figcaption { color: var(--sp-muted); } [data-theme="dark"] .sp-single-content__body hr { border-color: var(--sp-border); } /* ─── Tags ─── */ [data-theme="dark"] .sp-post-tags__label { color: var(--sp-muted); } [data-theme="dark"] .sp-post-tags a { background: var(--sp-surface); color: var(--sp-muted); border-color: var(--sp-border); } [data-theme="dark"] .sp-post-tags a:hover { background: var(--sp-accent-light); color: var(--sp-accent); border-color: var(--sp-accent); } /* ─── Share Buttons ─── */ [data-theme="dark"] .sp-share-buttons__label { color: var(--sp-muted); } [data-theme="dark"] .sp-share-btn { border-color: var(--sp-border); color: var(--sp-fg); } [data-theme="dark"] .sp-share-btn:hover { border-color: var(--sp-accent); color: var(--sp-accent); background: var(--sp-accent-light); } /* ─── Author Bio ─── */ [data-theme="dark"] .sp-author-bio { background: var(--sp-surface); border-color: var(--sp-border); } [data-theme="dark"] .sp-author-bio__name, [data-theme="dark"] .sp-author-bio__name a { color: var(--sp-fg); } [data-theme="dark"] .sp-author-bio__role { color: var(--sp-accent); } [data-theme="dark"] .sp-author-bio__text { color: var(--sp-muted); } /* ─── Post Navigation ─── */ [data-theme="dark"] .sp-post-nav__item { border-color: var(--sp-border); } [data-theme="dark"] .sp-post-nav__item:hover { border-color: var(--sp-accent); background: var(--sp-surface); } [data-theme="dark"] .sp-post-nav__item .wp-block-post-navigation-link__title { color: var(--sp-fg); } /* ─── Breadcrumbs ─── */ [data-theme="dark"] .sp-breadcrumbs a { color: var(--sp-muted); } [data-theme="dark"] .sp-breadcrumbs a:hover { color: var(--sp-accent); } [data-theme="dark"] .sp-breadcrumbs__sep, [data-theme="dark"] .sp-breadcrumbs__current { color: var(--sp-muted); } /* ─── Archive ─── */ [data-theme="dark"] .sp-archive-hero { background: var(--sp-surface); } [data-theme="dark"] .sp-archive-hero__title { color: #EDECE8; } [data-theme="dark"] .sp-archive-hero__desc { color: var(--sp-muted); } [data-theme="dark"] .sp-archive-hero__label { color: var(--sp-accent); } [data-theme="dark"] .sp-filter-sidebar a { color: var(--sp-fg); } [data-theme="dark"] .sp-filter-sidebar a:hover { color: var(--sp-accent); } [data-theme="dark"] .sp-filter-categories li { border-bottom-color: var(--sp-border); } [data-theme="dark"] .sp-tag-cloud a { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-muted); } [data-theme="dark"] .sp-tag-cloud a:hover { background: var(--sp-accent-light); color: var(--sp-accent); border-color: var(--sp-accent); } /* ─── Pagination ─── */ [data-theme="dark"] .sp-pagination .page-numbers, [data-theme="dark"] .sp-pagination a, [data-theme="dark"] .sp-pagination span { border-color: var(--sp-border); color: var(--sp-fg); } [data-theme="dark"] .sp-pagination .page-numbers.current, [data-theme="dark"] .sp-pagination span.current { background: var(--sp-accent); color: #FFFFFF; border-color: var(--sp-accent); } [data-theme="dark"] .sp-pagination a:hover { background: var(--sp-surface); } /* ─── 404 Page ─── */ [data-theme="dark"] .sp-404__number { color: var(--sp-border); } [data-theme="dark"] .sp-404__title { color: #EDECE8; } [data-theme="dark"] .sp-404__text { color: var(--sp-muted); } /* ─── Search Page ─── */ [data-theme="dark"] .sp-search-page__form input[type="search"] { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-fg); } [data-theme="dark"] .sp-search-page__form input[type="search"]::placeholder { color: var(--sp-muted); } /* ─── Footer ─── */ [data-theme="dark"] .sp-footer { background-color: var(--sp-bg); border-top-color: var(--sp-border); } [data-theme="dark"] .sp-footer-widgets { border-bottom-color: var(--sp-border); } [data-theme="dark"] .sp-footer-widget-title, [data-theme="dark"] .sp-footer-widget__title { color: #EDECE8; } [data-theme="dark"] .sp-footer-widgets a, [data-theme="dark"] .sp-footer-widget a, [data-theme="dark"] .sp-footer-categories a { color: var(--sp-muted); } [data-theme="dark"] .sp-footer-widgets a:hover, [data-theme="dark"] .sp-footer-widget a:hover, [data-theme="dark"] .sp-footer-categories a:hover { color: var(--sp-accent); } [data-theme="dark"] .sp-footer-about { color: var(--sp-muted); } [data-theme="dark"] .sp-footer-newsletter input[type="email"] { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-fg); } [data-theme="dark"] .sp-footer-newsletter input[type="email"]::placeholder { color: var(--sp-muted); } [data-theme="dark"] .sp-footer__nav a, [data-theme="dark"] .sp-footer__nav .wp-block-navigation-item__content { color: var(--sp-muted); } [data-theme="dark"] .sp-footer__nav a:hover { color: var(--sp-accent); } [data-theme="dark"] .sp-footer__copyright { color: var(--sp-muted); } [data-theme="dark"] .sp-footer__social a { color: var(--sp-muted); } [data-theme="dark"] .sp-footer__social a:hover { color: var(--sp-accent); } /* ─── Buttons ─── */ [data-theme="dark"] .sp-btn--outline { border-color: var(--sp-border); color: var(--sp-fg); } [data-theme="dark"] .sp-btn--outline:hover { border-color: var(--sp-accent); color: var(--sp-accent); } /* Load More */ [data-theme="dark"] .sp-load-more-btn { border-color: var(--sp-border); color: var(--sp-fg); } [data-theme="dark"] .sp-load-more-btn:hover { border-color: var(--sp-accent); color: var(--sp-accent); } /* ─── Back to Top ─── */ [data-theme="dark"] .sp-back-to-top { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-fg); } [data-theme="dark"] .sp-back-to-top:hover { background: var(--sp-accent); color: #FFFFFF; } /* ─── Comments ─── */ [data-theme="dark"] .comment { border-bottom-color: var(--sp-border); } [data-theme="dark"] .comment-author-name, [data-theme="dark"] .comment-author-name a { color: var(--sp-fg); } [data-theme="dark"] .comment-metadata, [data-theme="dark"] .comment-metadata a { color: var(--sp-muted); } [data-theme="dark"] .comment-content { color: var(--sp-fg); } [data-theme="dark"] .comment-respond label { color: var(--sp-fg); } [data-theme="dark"] .comment-respond input, [data-theme="dark"] .comment-respond textarea { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-fg); } [data-theme="dark"] .comment-respond input::placeholder, [data-theme="dark"] .comment-respond textarea::placeholder { color: var(--sp-muted); } /* ─── Podcast Card ─── */ [data-theme="dark"] .sp-podcast-card__episode { background: var(--sp-bg); } [data-theme="dark"] .sp-podcast-card__ep-label { color: var(--sp-muted); } [data-theme="dark"] .sp-podcast-card__ep-title { color: var(--sp-fg); } [data-theme="dark"] .sp-podcast-card__desc { color: var(--sp-muted); } /* ─── App CTA Store Buttons ─── */ [data-theme="dark"] .sp-app-cta__store-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #FFFFFF; } [data-theme="dark"] .sp-app-cta__store-btn:hover { background: rgba(255,255,255,0.18); } /* ─── Mobile Drawer Header ─── */ [data-theme="dark"] .sp-mobile-drawer__header { border-bottom-color: var(--sp-border); } [data-theme="dark"] .sp-mobile-drawer__header .sp-mobile-drawer__title { color: var(--sp-fg); } [data-theme="dark"] .sp-mobile-drawer__close { color: var(--sp-fg); } [data-theme="dark"] .sp-mobile-drawer__close:hover { color: var(--sp-accent); } /* ─── Mobile Drawer Nav ─── */ [data-theme="dark"] .sp-mobile-nav li a { color: var(--sp-fg); border-bottom-color: var(--sp-border); } [data-theme="dark"] .sp-mobile-nav .sp-submenu-toggle { color: var(--sp-muted); } [data-theme="dark"] .sp-mobile-nav .sub-menu li a { color: var(--sp-muted); } /* ─── Reading Progress Bar ─── */ [data-theme="dark"] .sp-reading-progress { background: var(--sp-bg); } /* ─── Ad Slots ─── */ [data-theme="dark"] .sp-ad-slot--in-content { background: var(--sp-surface); } [data-theme="dark"] .sp-ad-label { color: var(--sp-muted); } /* ─── WordPress Blocks ─── */ [data-theme="dark"] .wp-block-quote { border-left-color: var(--sp-accent); color: var(--sp-fg); } [data-theme="dark"] .wp-block-quote cite { color: var(--sp-muted); } [data-theme="dark"] .wp-block-code { background: var(--sp-surface); color: var(--sp-fg); } [data-theme="dark"] .wp-block-separator { border-color: var(--sp-border); } [data-theme="dark"] .wp-block-table th, [data-theme="dark"] .wp-block-table td { border-color: var(--sp-border); } [data-theme="dark"] .wp-block-table th { background: var(--sp-surface); } [data-theme="dark"] .wp-block-pullquote { border-top-color: var(--sp-accent); border-bottom-color: var(--sp-accent); color: var(--sp-fg); } /* ─── Images — subtle brightness reduction ─── */ [data-theme="dark"] img:not(.sp-header__logo img):not(.custom-logo) { filter: brightness(0.92); } [data-theme="dark"] img:hover { filter: brightness(1); } /* ─── Selection ─── */ [data-theme="dark"] ::selection { background: var(--sp-accent); color: #FFFFFF; } [data-theme="dark"] ::-moz-selection { background: var(--sp-accent); color: #FFFFFF; } /* ─── Scrollbar ─── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--sp-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--sp-border); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--sp-muted); }