/** * File Path: assets/css/front/mbs-front-dark.css * * Dark Mode Token Overrides (F-007) * * Activated when data-mbs-theme="dark" is set on by the * MBS_Front_Assets::output_dark_mode_attribute() inline script. * Triggered by the global Enable Dark Mode setting OR a per-post * mbs_theme_override = 'dark' meta value. * * All rules are flat (no CSS nesting) for maximum theme compatibility, * including classic themes such as Graphene Plus (CSS-002). * * Selector specificity: [data-mbs-theme="dark"] (0,1,0) + .mbs-wrapper * (0,1,0) = (0,2,0) — intentionally higher than the base .mbs-wrapper * token block (0,1,0) so dark values reliably win. * * Enqueued unconditionally (not just when setting is on) because per-post * overrides can activate dark mode independently of the global toggle. * * @package MyBookShowroom * @since 1.0.0 */ /* ========================================================================== Core token overrides — applied whenever data-mbs-theme="dark" is on ========================================================================== */ [data-mbs-theme="dark"] .mbs-wrapper { /* Surfaces */ --mbs-card-bg: #1E2A3A; --mbs-hero-bg: #16213E; --mbs-surface-muted: #16213E; /* Borders */ --mbs-border: #2D3748; --mbs-border-ui: #4A5568; /* Text */ --mbs-text: #ECF0F1; --mbs-text-strong: #F5F5F5; --mbs-text-light: #B0BEC5; --mbs-text-muted: #9AABBA; --mbs-ink: #ECF0F1; /* Accent / interactive — slightly brightened for dark backgrounds */ --mbs-accent: #5BBCC8; --mbs-link: #5BBCC8; /* Buttons — navy reads well on dark; keep bg, lighten hover */ --mbs-button-bg: #2C3E6B; --mbs-button-hover: #3A5080; --mbs-button-text: #FFFFFF; } /* ========================================================================== Component-level overrides Handles elements that use hard-coded colors instead of tokens, or that need structural adjustments in dark mode. ========================================================================== */ /* Teaser / pull-quote block */ [data-mbs-theme="dark"] .mbs-teaser { background: #16213E; border-left-color: var(--mbs-accent, #5BBCC8); color: #ECF0F1; } /* Book hero section */ [data-mbs-theme="dark"] .mbs-book-hero { background: #16213E; } /* Per-format metadata rows */ [data-mbs-theme="dark"] .mbs-meta-row dt { color: #B0BEC5; } [data-mbs-theme="dark"] .mbs-meta-row dd { color: #ECF0F1; } /* Book cover watermark (FREE tier) — keep visible on dark bg */ [data-mbs-theme="dark"] .mbs-watermark { opacity: 0.6; } /* Series / author grid book titles */ [data-mbs-theme="dark"] .mbs-series-book h4 a, [data-mbs-theme="dark"] .mbs-author-book h4 a { color: #ECF0F1; } /* Buy link buttons */ [data-mbs-theme="dark"] .mbs-buy-link { background: #1E2A3A; border-color: #4A5568; color: #ECF0F1; } [data-mbs-theme="dark"] .mbs-buy-link:hover, [data-mbs-theme="dark"] .mbs-buy-link:focus { background: var(--mbs-button-bg, var(--mbs-navy)); border-color: var(--mbs-button-bg, var(--mbs-navy)); color: #ffffff; } /* External link buttons (Goodreads / StoryGraph) */ [data-mbs-theme="dark"] .mbs-external-link-btn { background: #1E2A3A; border-color: #4A5568; color: #ECF0F1; } [data-mbs-theme="dark"] .mbs-external-link-btn:hover { background: var(--mbs-accent, #5BBCC8); border-color: var(--mbs-accent, #5BBCC8); color: #fff; } /* Section headings */ [data-mbs-theme="dark"] .mbs-wrapper h1, [data-mbs-theme="dark"] .mbs-wrapper h2, [data-mbs-theme="dark"] .mbs-wrapper h3, [data-mbs-theme="dark"] .mbs-wrapper h4 { color: #F5F5F5; } /* Archive page header */ [data-mbs-theme="dark"] .mbs-archive-header { border-bottom-color: #2D3748; } /* Book cards in grid/list layouts */ [data-mbs-theme="dark"] .mbs-book-card { background: #1E2A3A; border-color: #2D3748; } [data-mbs-theme="dark"] .mbs-book-card .mbs-book-title { color: #ECF0F1; } [data-mbs-theme="dark"] .mbs-book-card .mbs-book-author { color: #B0BEC5; } /* Breadcrumbs */ [data-mbs-theme="dark"] .mbs-breadcrumbs { color: #B0BEC5; } [data-mbs-theme="dark"] .mbs-breadcrumbs a { color: var(--mbs-link, #5BBCC8); } /* Search input */ [data-mbs-theme="dark"] .mbs-search-input { background: #1E2A3A; border-color: #4A5568; color: #ECF0F1; } /* Search result cards */ [data-mbs-theme="dark"] .mbs-search-result-card { border-bottom-color: #2D3748; } /* Series complete note */ [data-mbs-theme="dark"] .mbs-series-complete-note { color: #B0BEC5; } /* Term description on archive pages */ [data-mbs-theme="dark"] .mbs-term-description { color: #B0BEC5; } /* Format selector tabs (hero area) — .mbs-format-tab has background:#fff hardcoded * in mbs-front.css (CSS nesting). White buttons on a dark hero background look jarring. * Specificity (0,2,0) matches base nested rule; dark CSS loads after so it wins. */ [data-mbs-theme="dark"] .mbs-format-tab { background: #2D3748; color: #ECF0F1; border-color: #4A5568; } [data-mbs-theme="dark"] .mbs-format-tab:hover { background: #374151; color: var(--mbs-accent, #5BBCC8); border-color: var(--mbs-accent, #5BBCC8); } /* active state already uses --mbs-accent which dark mode overrides to #5BBCC8 */ [data-mbs-theme="dark"] .mbs-format-tab.active { background: var(--mbs-accent, #5BBCC8); border-color: var(--mbs-accent, #5BBCC8); color: #fff; } /* ========================================================================== Categorization pills — genre, tag, theme, content warning (mbs-front-categorization.css — all four pill types use light fallback colors that wash out against dark card/page backgrounds) ========================================================================== */ /* Genre — dark teal family */ [data-mbs-theme="dark"] .mbs-genre-link { background: #0D3D47; color: #7ECFD8; border-color: #1E6A78; } [data-mbs-theme="dark"] .mbs-genre-link:hover, [data-mbs-theme="dark"] .mbs-genre-link:focus { background: var(--mbs-accent, #5BBCC8); color: #fff; border-color: var(--mbs-accent, #5BBCC8); } /* Tag — dark neutral */ [data-mbs-theme="dark"] .mbs-tag-link { background: #374151; color: #D1D5DB; border-color: #4B5563; } [data-mbs-theme="dark"] .mbs-tag-link:hover, [data-mbs-theme="dark"] .mbs-tag-link:focus { background: #4B5563; color: #fff; border-color: #6B7280; } /* Theme — dark indigo/purple family */ [data-mbs-theme="dark"] .mbs-theme-link { background: #2E1D47; color: #C4B5FD; border-color: #5B3E8A; } [data-mbs-theme="dark"] .mbs-theme-link:hover, [data-mbs-theme="dark"] .mbs-theme-link:focus { background: #5B3E8A; color: #fff; border-color: #7C5FBF; } /* Content warning — dark amber family */ [data-mbs-theme="dark"] .mbs-warning-item { background: #3B2007; color: #FCD34D; border-color: #78350F; } /* ========================================================================== FSE (block theme) context — supplement the fse.css FSE token bridge ========================================================================== */ :where(.wp-site-blocks, .editor-styles-wrapper, .entry-content) [data-mbs-theme="dark"] .mbs-wrapper { --mbs-card-bg: #1E2A3A; --mbs-text: #ECF0F1; } /* ========================================================================== Signup widget + Coming Soon badge — dark mode overrides Phase 1.3 (beige assignment): signup widget dark surface. Phase 2.5 (coming-soon badge): badge dark palette. ========================================================================== */ /* ESP Reader Signup Widget — dark surface (Phase 1.3) */ [data-mbs-theme="dark"] .mbs-esp-signup-widget { background: #1E2A3A; border-color: #2D3E52; } /* Coming Soon Badge — dark palette (Phase 2.5) */ [data-mbs-theme="dark"] .mbs-coming-soon-badge { background: var(--mbs-coming-soon-bg, #92400E); color: var(--mbs-coming-soon-text, #FEF3C7); border-color: rgba(255, 255, 255, 0.12); }