/* ===== GLOBAL THEME SYSTEM ===== */ /* Dark is the default. Light mode activates via [data-theme="light"] on */ :root { /* These are the shared theme tokens. Each page CSS can override or extend them. */ --theme-bg: #0A0A0F; --theme-bg-elevated: rgba(255,255,255,0.04); --theme-text: #F8F8F8; --theme-text-secondary: #94A3B8; --theme-surface: rgba(255,255,255,0.03); --theme-border: rgba(255,255,255,0.08); --theme-border-hover: rgba(0,167,138,0.4); --theme-nav-bg: rgba(10,10,15,0.82); --theme-mobile-bg: rgba(10,10,15,0.97); --theme-dropdown-bg: rgba(10,10,15,0.96); --theme-card-shadow: none; --theme-invert: 0; } [data-theme="light"] { --theme-bg: #F5F5F7; --theme-bg-elevated: rgba(0,0,0,0.04); --theme-text: #1A1A2E; --theme-text-secondary: #64748B; --theme-surface: rgba(0,0,0,0.03); --theme-border: rgba(0,0,0,0.08); --theme-border-hover: rgba(0,167,138,0.35); --theme-nav-bg: rgba(245,245,247,0.85); --theme-mobile-bg: rgba(245,245,247,0.97); --theme-dropdown-bg: rgba(245,245,247,0.96); --theme-card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); --theme-invert: 1; } /* Smooth transitions for theme switching */ html { transition: background-color 0.3s ease; } body, .nav, .topbar, .glass, .nav-mobile, .nav-dropdown-menu { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ===== THEME TOGGLE BUTTON ===== */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--theme-border); background: var(--theme-bg-elevated); color: var(--theme-text-secondary); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; flex-shrink: 0; } .theme-toggle:hover { color: var(--theme-text); border-color: var(--theme-border-hover); } .theme-toggle svg { width: 18px; height: 18px; transition: transform 0.3s ease; } .theme-toggle:hover svg { transform: rotate(15deg); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Language switcher in topbar */ .topbar-lang { font-size: 13px; font-weight: 600; color: var(--theme-text-secondary); letter-spacing: 0.05em; padding: 6px 10px; border: 1px solid var(--theme-border); border-radius: 6px; text-decoration: none; transition: color 0.2s, border-color 0.2s; } .topbar-lang:hover { color: #00a78a; border-color: #00a78a; } /* Logo: show white version by default, dark version in light mode */ .logo-dark { display: none; } .logo-white { display: inline; } [data-theme="light"] .logo-dark { display: inline; } [data-theme="light"] .logo-white { display: none; }