/* ========================================================================== NILECODES — Dark Mode Overrides Applied via [data-theme="dark"] on . CSS custom property values are set in style.css. This file handles component-specific dark mode adjustments. ========================================================================== */ /* ── Global Transitions ────────────────────────────────────────────────────── */ html { transition: background-color 0.3s ease, color 0.3s ease; } /* ── Cards ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .nc-card { background-color: var(--nc-surface); border-color: var(--nc-border); } [data-theme="dark"] .nc-card:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } /* ── Header ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .nc-header { background-color: var(--nc-surface); border-block-end-color: var(--nc-border); } [data-theme="dark"] .nc-header--scrolled { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .nc-header__logo-text { color: #FFFFFF; } /* ── Navigation Dropdowns ──────────────────────────────────────────────────── */ [data-theme="dark"] .nc-nav__list .sub-menu { background-color: var(--nc-surface); border-color: var(--nc-border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .nc-nav__list .sub-menu .menu-item > a:hover { background-color: var(--nc-surface-alt); } /* ── Search Overlay ────────────────────────────────────────────────────────── */ [data-theme="dark"] .nc-search-overlay { background-color: var(--nc-surface); border-block-end-color: var(--nc-border); } [data-theme="dark"] .search-form .search-field { background-color: var(--nc-surface-alt); border-color: var(--nc-border); color: var(--nc-text); } /* ── Mobile Nav ────────────────────────────────────────────────────────────── */ [data-theme="dark"] .nc-mobile-nav__inner { background-color: var(--nc-surface); } [data-theme="dark"] .nc-mobile-nav__header { border-block-end-color: var(--nc-border); } /* ── Pagination ────────────────────────────────────────────────────────────── */ [data-theme="dark"] .page-numbers { background-color: var(--nc-surface-alt); border-color: var(--nc-border); } /* ── Widgets ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] .nc-widget__title { color: var(--nc-text); } /* ── Ad Slots ──────────────────────────────────────────────────────────────── */ [data-theme="dark"] .nc-ad-slot { background-color: var(--nc-surface-alt); } /* ── Section Alternates ────────────────────────────────────────────────────── */ [data-theme="dark"] .nc-section--alt { background-color: var(--nc-surface-alt); } /* ── No Results ────────────────────────────────────────────────────────────── */ [data-theme="dark"] .nc-no-results__content p { color: var(--nc-text-muted); } /* ── Footer (already dark, subtle adjustments) ─────────────────────────────── */ [data-theme="dark"] .nc-footer { background-color: #060D17; } [data-theme="dark"] .nc-footer__widgets { border-block-end-color: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .nc-footer__middle { border-block-end-color: rgba(255, 255, 255, 0.05); } /* ── Scrollbar (Webkit) ────────────────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background-color: var(--nc-surface-alt); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--nc-border); border-radius: var(--nc-radius-full); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--nc-text-muted); } /* ── Selection ─────────────────────────────────────────────────────────────── */ [data-theme="dark"] ::selection { background-color: rgba(var(--nc-accent-green-rgb), 0.3); color: #FFFFFF; }