/* ============================================================ TechPulse Pro — Dark Mode Overrides Applied when [data-theme="dark"] is set on CSS custom properties in style.css handle most theming. This file handles component-specific overrides that need more than token swaps. ============================================================ */ /* -------------------------------------------------------- Topbar -------------------------------------------------------- */ [data-theme="dark"] .topbar { background: var(--color-dark-surface); border-bottom-color: var(--color-dark-border); } /* -------------------------------------------------------- Site Header -------------------------------------------------------- */ [data-theme="dark"] .site-header { background: rgba(30, 41, 59, 0.95); border-bottom-color: var(--color-dark-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } /* -------------------------------------------------------- Navigation Dropdowns -------------------------------------------------------- */ [data-theme="dark"] .dropdown-menu { background: var(--color-dark-surface); border-color: var(--color-dark-border); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } /* -------------------------------------------------------- Cards -------------------------------------------------------- */ [data-theme="dark"] .card { background: var(--color-dark-surface); border-color: var(--color-dark-border); } [data-theme="dark"] .card__footer { border-top-color: var(--color-dark-border-light); } /* -------------------------------------------------------- Live Search Bar -------------------------------------------------------- */ [data-theme="dark"] .live-search-bar { background: rgba(30, 41, 59, 0.98); border-bottom-color: var(--color-dark-border); } [data-theme="dark"] .live-search__form-wrap { background: var(--color-dark-surface-2); border-color: var(--color-dark-border); } [data-theme="dark"] .live-search__form-wrap:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2); } [data-theme="dark"] .live-search__results { background: var(--color-dark-surface); border-color: var(--color-dark-border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } [data-theme="dark"] .search-result-item:hover { background: var(--color-dark-surface-2); } [data-theme="dark"] .search-result-item { border-bottom-color: var(--color-dark-border); } /* -------------------------------------------------------- Mobile Menu -------------------------------------------------------- */ [data-theme="dark"] .mobile-menu__inner { background: var(--color-dark-surface); } [data-theme="dark"] .mobile-menu__close { background: var(--color-dark-surface-2); border-color: var(--color-dark-border); color: var(--color-dark-text); } [data-theme="dark"] .mobile-nav-menu > li { border-bottom-color: var(--color-dark-border); } [data-theme="dark"] .mobile-menu__dark-toggle { border-top-color: var(--color-dark-border); } /* -------------------------------------------------------- Search Trigger -------------------------------------------------------- */ [data-theme="dark"] .search-trigger { background: var(--color-dark-surface-2); border-color: var(--color-dark-border); color: var(--color-dark-muted); } /* -------------------------------------------------------- Mobile Menu Toggle -------------------------------------------------------- */ [data-theme="dark"] .mobile-menu-toggle { background: var(--color-dark-surface-2); border-color: var(--color-dark-border); } [data-theme="dark"] .hamburger span { background: var(--color-dark-text); } /* -------------------------------------------------------- Category Badge -------------------------------------------------------- */ [data-theme="dark"] .cat-badge { background: color-mix(in srgb, var(--cat-color, #1a73e8) 20%, transparent); } /* -------------------------------------------------------- Tags -------------------------------------------------------- */ [data-theme="dark"] .tag { background: var(--color-dark-surface-2); border-color: var(--color-dark-border); color: var(--color-dark-muted); } /* -------------------------------------------------------- Code Blocks -------------------------------------------------------- */ [data-theme="dark"] code, [data-theme="dark"] kbd, [data-theme="dark"] samp { background: rgba(255, 255, 255, 0.06); border-color: var(--color-dark-border); color: #7dd3fc; } [data-theme="dark"] pre { background: #0d1117; border-color: var(--color-dark-border); } /* -------------------------------------------------------- Blockquotes -------------------------------------------------------- */ [data-theme="dark"] blockquote { background: rgba(26, 115, 232, 0.08); border-color: var(--color-primary); } /* -------------------------------------------------------- Widgets -------------------------------------------------------- */ [data-theme="dark"] .widget-area .widget { background: var(--color-dark-surface); border-color: var(--color-dark-border); } /* -------------------------------------------------------- Buttons — Ghost -------------------------------------------------------- */ [data-theme="dark"] .btn--ghost { border-color: var(--color-dark-border); color: var(--color-dark-text); } [data-theme="dark"] .btn--ghost:hover { background: var(--color-dark-surface-2); color: var(--color-dark-heading); } /* -------------------------------------------------------- Pagination -------------------------------------------------------- */ [data-theme="dark"] .page-numbers, [data-theme="dark"] .nav-links a { background: var(--color-dark-surface); border-color: var(--color-dark-border); color: var(--color-dark-text); } /* -------------------------------------------------------- Tag Cloud -------------------------------------------------------- */ [data-theme="dark"] .tagcloud a { background: var(--color-dark-surface-2); border-color: var(--color-dark-border); color: var(--color-dark-muted); } /* -------------------------------------------------------- Notices -------------------------------------------------------- */ [data-theme="dark"] .notice--info { background: rgba(59, 130, 246, 0.1); } [data-theme="dark"] .notice--success { background: rgba(16, 185, 129, 0.1); } [data-theme="dark"] .notice--warning { background: rgba(245, 158, 11, 0.1); } [data-theme="dark"] .notice--danger { background: rgba(239, 68, 68, 0.1); } /* -------------------------------------------------------- Ad Zones -------------------------------------------------------- */ [data-theme="dark"] .ad-zone--in-content { background: var(--color-dark-surface-2); border-color: var(--color-dark-border); } [data-theme="dark"] .ad-zone--footer { background: var(--color-dark-surface); border-color: var(--color-dark-border); } /* -------------------------------------------------------- Footer stays dark in both modes (it's always dark) -------------------------------------------------------- */ .site-footer { color-scheme: dark; } /* -------------------------------------------------------- Selection Color -------------------------------------------------------- */ [data-theme="dark"] ::selection { background: rgba(26, 115, 232, 0.4); color: #fff; } ::selection { background: rgba(26, 115, 232, 0.2); color: var(--color-primary-hover); } /* -------------------------------------------------------- Scrollbar (Webkit) -------------------------------------------------------- */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-dark-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-dark-border); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--color-dark-muted); } /* Light mode scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-surface-2); } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }