/* ========================================================================== Dark Mode — Full variable overrides + component inversions Activated by adding [data-theme="dark"] to via dark-mode.js ========================================================================== */ [data-theme="dark"] { /* --- Brand Colors --------------------------------------------------- */ --color-primary: #e2e8f0; --color-primary-light: #cbd5e1; --color-accent: #f472b6; --color-accent-hover: #ec4899; /* --- Neutral Palette ------------------------------------------------ */ --color-white: #0f172a; --color-off-white: #1e293b; --color-light-gray: #334155; --color-mid-gray: #64748b; --color-dark-gray: #e2e8f0; --color-black: #f1f5f9; /* --- Shadows (softer — dark bg needs subtler depth) ----------------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7); --shadow-glow:0 0 24px rgba(244, 114, 182, 0.4); color-scheme: dark; } /* --- Global Background & Text ------------------------------------------- */ [data-theme="dark"] body { background-color: #0f172a; color: #e2e8f0; } /* --- Headings ------------------------------------------------------------ */ [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: #f1f5f9; } /* --- Links --------------------------------------------------------------- */ [data-theme="dark"] a { color: var(--color-accent); } /* --- Header -------------------------------------------------------------- */ [data-theme="dark"] .site-header, [data-theme="dark"] #masthead { background: #0f172a !important; border-bottom: 1px solid #1e293b; } [data-theme="dark"] .site-header.is-scrolled, [data-theme="dark"] #masthead.is-scrolled { background: rgba(15, 23, 42, 0.95) !important; backdrop-filter: blur(12px); } /* --- Cards --------------------------------------------------------------- */ [data-theme="dark"] .card { background: #1e293b; border: 1px solid #334155; } /* --- Inputs -------------------------------------------------------------- */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: #1e293b; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.2); } /* --- Navigation ---------------------------------------------------------- */ [data-theme="dark"] .main-navigation a, [data-theme="dark"] .nav-link { color: #e2e8f0; } /* --- Footer -------------------------------------------------------------- */ [data-theme="dark"] .site-footer, [data-theme="dark"] #colophon { background: #020617; border-top: 1px solid #1e293b; } /* --- Prose --------------------------------------------------------------- */ [data-theme="dark"] .prose { color: #cbd5e1; } [data-theme="dark"] .prose blockquote { background: #1e293b; border-color: var(--color-accent); } [data-theme="dark"] .prose code { background: #334155; color: #f472b6; } [data-theme="dark"] .prose th { background: #334155; } [data-theme="dark"] .prose td { border-color: #334155; } [data-theme="dark"] .prose tr:nth-child(even) td { background: #1e293b; } /* --- Modal --------------------------------------------------------------- */ [data-theme="dark"] .modal-container { background: #1e293b; border: 1px solid #334155; } /* --- Toast --------------------------------------------------------------- */ [data-theme="dark"] .toast { background: #1e293b; border-color: #334155; color: #e2e8f0; } /* --- Tabs & Accordion ---------------------------------------------------- */ [data-theme="dark"] .tabs-nav-btn { color: #94a3b8; } [data-theme="dark"] .tabs-nav-btn.is-active { color: var(--color-accent); border-color: var(--color-accent); } [data-theme="dark"] .accordion-header { background: #1e293b; color: #e2e8f0; border-color: #334155; } [data-theme="dark"] .accordion-body { background: #0f172a; border-color: #334155; color: #cbd5e1; } /* --- Preloader ----------------------------------------------------------- */ [data-theme="dark"] .preloader { background: #0f172a; } /* --- Back to top --------------------------------------------------------- */ [data-theme="dark"] .back-to-top { background: var(--color-accent); color: #0f172a; } /* --- Divider ------------------------------------------------------------- */ [data-theme="dark"] .divider, [data-theme="dark"] hr { border-color: #334155; } /* --- Dark mode toggle button -------------------------------------------- */ .dark-mode-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 2px solid var(--color-light-gray); background: transparent; cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base); color: inherit; } .dark-mode-toggle:hover { border-color: var(--color-accent); background: var(--color-off-white); transform: rotate(20deg); } .dark-mode-toggle .icon-sun, .dark-mode-toggle .icon-moon { width: 18px; height: 18px; transition: opacity var(--transition-base), transform var(--transition-base); } /* Light mode: show sun; hide moon */ .dark-mode-toggle .icon-moon { display: none; } .dark-mode-toggle .icon-sun { display: block; } [data-theme="dark"] .dark-mode-toggle .icon-sun { display: none; } [data-theme="dark"] .dark-mode-toggle .icon-moon { display: block; } /* Smooth full-page theme transition */ html { transition: background-color var(--duration-slow) var(--ease-in-out), color var(--duration-slow) var(--ease-in-out); } /* System preference fallback (no JS) */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --color-primary: #e2e8f0; --color-off-white: #1e293b; --color-light-gray: #334155; --color-dark-gray: #e2e8f0; --color-white: #0f172a; color-scheme: dark; } }