/* ========================================================== DevFolio — dark.css Dark theme variable overrides + component-specific tweaks. Loaded last, only takes effect once has class="dark" (toggled by assets/js/main.js and persisted in localStorage). ========================================================== */ .dark { --bg: #0F1117; --bg-subtle: #14161D; --surface: #171923; --surface-2: #1B1E29; --surface-border: #2A2D3A; --surface-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45); --surface-shadow-hover: 0 4px 10px rgba(0, 0, 0, .4), 0 24px 48px rgba(124, 92, 255, .18); --text: #F2F2F5; --text-muted: #A6ABBA; --text-faint: #7C8194; --nav-bg: rgba(15, 17, 23, .8); --color-primary-light: #A996FF; } /* Trust / stat icon tints need slightly higher opacity backgrounds to read clearly against the dark surface color. */ .dark .trust-icon, .dark .stat-icon { filter: saturate(1.05); } /* Hero dot grid + radial glow read differently on dark backgrounds — boost opacity slightly so the effect remains visible without being harsh. */ .dark .hero { background: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(124,92,255,.28), transparent 60%), var(--bg); } .dark .hero-dots { opacity: .45; } /* Card-hover glow border reads better with a touch more opacity in dark mode */ .dark .card-hover:hover::after { background: linear-gradient(135deg, rgba(124,92,255,.6), rgba(168,85,247,.4)); } /* Phone frame placeholder gradient stays vivid in dark mode already; just deepen the border to separate it from a dark page background. */ .dark .phone-frame { border-color: #23252F; } /* Form inputs need a slightly lighter surface than pure card background so they remain visually distinct in dark mode. */ .dark .form-input, .dark .form-textarea, .dark .form-select { background: var(--surface-2); } /* Search bar / select icon color inherits var(--text-faint) already, no change needed — kept here as a placeholder for future dark-only tweaks. */