/* ========================================================================== FaithfulBiz — Dark Mode CSS User-toggled via .fb-dark-mode on OS preference detected on first visit via JS, then stored in localStorage ========================================================================== */ body.fb-dark-mode { color-scheme: dark; --color-dark: #f8fafc; --color-text: #dde4f0; --color-text-muted: #a0aec0; --color-border: rgba(148,163,184,0.22); --color-bg: #111827; --color-bg-soft: #1a2336; background: var(--color-bg); color: var(--color-text); } /* Global backgrounds */ body.fb-dark-mode .site-content, body.fb-dark-mode .site-main, body.fb-dark-mode .container, body.fb-dark-mode .content-sidebar-wrap, body.fb-dark-mode .main-content-area, body.fb-dark-mode .single-post-wrap, body.fb-dark-mode .post-header, body.fb-dark-mode .entry-content, body.fb-dark-mode article.single-post-wrap { background: var(--color-bg); color: var(--color-text); } /* Headings */ body.fb-dark-mode .post-title, body.fb-dark-mode .entry-content h1, body.fb-dark-mode .entry-content h2, body.fb-dark-mode .entry-content h3, body.fb-dark-mode .entry-content h4, body.fb-dark-mode .entry-content h5, body.fb-dark-mode .entry-content h6, body.fb-dark-mode .entry-content strong, body.fb-dark-mode .toc-title, body.fb-dark-mode .comments-title, body.fb-dark-mode .comment-reply-title, body.fb-dark-mode .card-title, body.fb-dark-mode .hero-title, body.fb-dark-mode .archive-title, body.fb-dark-mode .page-title { color: #f8fafc; } /* Muted text elements */ body.fb-dark-mode .meta-sep, body.fb-dark-mode .breadcrumb .sep, body.fb-dark-mode .share-label { color: #94a3b8; } /* Borders */ body.fb-dark-mode .hero-featured, body.fb-dark-mode .post-card-horizontal, body.fb-dark-mode .latest-grid-card, body.fb-dark-mode .home-section, body.fb-dark-mode .entry-content, body.fb-dark-mode .comments-area, body.fb-dark-mode .post-navigation, body.fb-dark-mode .share-buttons, body.fb-dark-mode .post-meta-row { border-color: var(--color-border); } /* Content boxes */ body.fb-dark-mode .toc-box, body.fb-dark-mode .affiliate-disclosure-notice { background: #1a2336; border-color: var(--color-border); } body.fb-dark-mode .affiliate-disclosure-notice { color: #cbd5e1; } body.fb-dark-mode .entry-content blockquote { background: color-mix(in srgb, var(--color-primary) 12%, #1a2336); border-left-color: var(--color-primary); } body.fb-dark-mode .entry-content code { background: #111827; border-color: var(--color-border); color: #fca5a5; } body.fb-dark-mode .entry-content pre, body.fb-dark-mode .entry-content table th { background: #0d1117; color: #e2e8f0; } body.fb-dark-mode .entry-content table td { border-color: var(--color-border); color: #cbd5e1; } /* Author box */ body.fb-dark-mode .author-box { background: #1a2336; border-color: var(--color-border); } body.fb-dark-mode .author-socials a { background: transparent; border-color: rgba(226,232,240,0.16); color: #f8fafc; } body.fb-dark-mode .author-socials a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* Inputs & placeholders */ body.fb-dark-mode input::placeholder, body.fb-dark-mode textarea::placeholder { color: #94a3b8; } /* Buttons */ body.fb-dark-mode .btn-more-posts { background: #1a2336; border-color: var(--color-border); color: var(--color-dark); } body.fb-dark-mode .btn-more-posts:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* Search overlay in dark */ body.fb-dark-mode .search-overlay { background: rgba(2,6,23,0.82); } body.fb-dark-mode .search-overlay .search-form { background: #111827; border: 1px solid rgba(255,255,255,0.16); } body.fb-dark-mode .search-overlay .search-form .search-field { color: #f8fafc !important; background: #111827 !important; -webkit-text-fill-color: #f8fafc !important; border-color: rgba(255,255,255,0.16); } body.fb-dark-mode .search-overlay .search-form .search-field::placeholder { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } body.fb-dark-mode .search-overlay-close { color: #e5e7eb; } body.fb-dark-mode .search-overlay-close:hover { color: #fff; } /* Header search button */ body.fb-dark-mode .header-search-btn { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); } body.fb-dark-mode .header-search-btn:hover { background: rgba(255,255,255,0.16); } /* Cookie banner */ body.fb-dark-mode #cookie-banner { background: #1a2336; color: #e5e7eb; border-top: 1px solid var(--color-border); box-shadow: 0 -12px 34px rgba(0,0,0,0.45); } body.fb-dark-mode #cookie-banner p { color: #cbd5e1; } body.fb-dark-mode #cookie-banner a { color: var(--color-primary); font-weight: 800; } body.fb-dark-mode #cookie-banner .cookie-accept { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); } body.fb-dark-mode #cookie-banner .cookie-accept:hover { background: var(--color-primary-dark); } body.fb-dark-mode #cookie-banner .cookie-decline { background: rgba(255,255,255,0.06); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.16); } body.fb-dark-mode #cookie-banner .cookie-decline:hover { background: rgba(255,255,255,0.12); color: #fff; } /* Back to top */ body.fb-dark-mode #back-to-top { background: var(--color-primary); color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,0.35); } body.fb-dark-mode #back-to-top:hover { background: var(--color-primary-dark); } /* Ticker */ body.fb-dark-mode .fb-mini-ticker-window { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-bg)), var(--color-bg)); border-color: var(--color-border); } body.fb-dark-mode .fb-mini-ticker-item { background: var(--color-bg-soft); color: var(--color-dark); border-color: var(--color-border); box-shadow: none; } body.fb-dark-mode .fb-mini-ticker-item:hover { color: var(--color-primary); border-color: var(--color-primary); } /* Homepage labels */ body.fb-dark-mode .hero-featured-label { background: color-mix(in srgb, var(--color-primary) 18%, #1a2336); border-color: color-mix(in srgb, var(--color-primary) 42%, transparent); } /* Comments */ body.fb-dark-mode .comments-area-inner.fb-comments-card { background: #1a2336; border-color: var(--color-border); box-shadow: 0 18px 48px rgba(0,0,0,0.28); } body.fb-dark-mode .comments-area-inner.fb-comments-card .comments-title, body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-reply-title, body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-author-name, body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-form label { color: #f8fafc; } body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-date, body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-body, body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-notes, body.fb-dark-mode .fb-comment-toggle-subtext { color: #cbd5e1; } body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-item { border-color: var(--color-border); } body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-form { background: #111827; border-color: var(--color-border); } body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-form input[type="text"], body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-form input[type="email"], body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-form input[type="url"], body.fb-dark-mode .comments-area-inner.fb-comments-card .comment-form textarea { background: #0d1117; border-color: var(--color-border); color: #f8fafc; } body.fb-dark-mode .fb-comment-form-toggle { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, #0d1117), #1a2336); border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border)); color: #f8fafc; } body.fb-dark-mode .fb-show-more-comments { background: color-mix(in srgb, var(--color-primary) 14%, #1a2336); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); color: #e0e7ff; } body.fb-dark-mode .fb-show-more-comments:hover { background: var(--color-primary); color: #fff; } /* Focus outlines */ body.fb-dark-mode a:focus-visible, body.fb-dark-mode button:focus-visible, body.fb-dark-mode input:focus-visible, body.fb-dark-mode textarea:focus-visible, body.fb-dark-mode select:focus-visible, body.fb-dark-mode summary:focus-visible { outline-color: color-mix(in srgb, var(--color-primary) 80%, #fff); } /* Language panel in dark */ body.fb-dark-mode .language-panel-inner { background: #1a2336; color: #f8fafc; border-color: rgba(255,255,255,0.12); } body.fb-dark-mode .language-panel-header { color: #f8fafc; } body.fb-dark-mode .language-panel-close { background: #1e293b; color: #f8fafc; } body.fb-dark-mode .language-panel .fb-language-option { background: #111827; color: #f8fafc; border-color: rgba(255,255,255,0.1); } body.fb-dark-mode .language-panel .fb-language-option:hover, body.fb-dark-mode .language-panel .fb-language-option.is-active { background: #1e293b; color: var(--color-primary); } /* Author archive dark */ body.fb-dark-mode .fb-author-page { --fb-author-line: rgba(226,232,240,0.12); --fb-author-muted: rgba(226,232,240,0.72); } body.fb-dark-mode .fb-author-title, body.fb-dark-mode .fb-author-role, body.fb-dark-mode .fb-author-stat strong, body.fb-dark-mode .fb-author-focus-card h2, body.fb-dark-mode .fb-author-featured-content h3 a { color: #f8fafc; } body.fb-dark-mode .fb-author-featured-card { background: rgba(15,23,42,0.72); border-color: rgba(255,255,255,0.1); box-shadow: none; } /* Author page socials — dark mode */ body.fb-dark-mode .fb-author-hero .author-socials a { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: #f8fafc; } body.fb-dark-mode .fb-author-hero .author-socials a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } body.fb-dark-mode .fb-author-focus-card { background: #1a2336; border-color: var(--color-border); } body.fb-dark-mode .fb-author-tags span { background: color-mix(in srgb, var(--color-primary) 12%, #1a2336); border-color: color-mix(in srgb, var(--color-primary) 42%, transparent); color: var(--color-primary); }