/* * SMTPaid — Shared Theme System * Supports light & dark mode via [data-theme="dark"] attribute on * Toggle is stored in localStorage under key: "smtpaid-theme" */ /* ── LIGHT THEME (default) ── */ :root { --bg: #f8fafc; --bg2: #f1f5f9; --bg3: #e2e8f0; --surface: #ffffff; --surface2: #f8fafc; --border: #e2e8f0; --border-glow: rgba(0, 180, 96, 0.3); --green: #00b460; --green-dim: #009950; --green-glow: rgba(0, 180, 96, 0.1); --green-text: #007a3d; --text: #0f172a; --text-muted: #64748b; --text-dim: #94a3b8; --card-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.04); --nav-bg: rgba(248, 250, 252, 0.88); --code-bg: #1e293b; --code-text: #e2e8f0; } /* ── DARK THEME ── */ [data-theme="dark"] { --bg: #0a0f1a; --bg2: #0d1422; --bg3: #111827; --surface: #161f31; --surface2: #1c2741; --border: rgba(255,255,255,0.07); --border-glow: rgba(0, 255, 136, 0.25); --green: #00ff88; --green-dim: #00cc6a; --green-glow: rgba(0,255,136,0.12); --green-text: rgba(0,255,136,0.9); --text: #f1f5f9; --text-muted: #64748b; --text-dim: #334155; --card-shadow: 0 8px 40px rgba(0,0,0,0.4); --nav-bg: rgba(10, 15, 26, 0.88); --code-bg: #0d1117; --code-text: #e2e8f0; } /* ── THEME TOGGLE BUTTON ── */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--green); color: var(--green); background: var(--green-glow); } .theme-toggle svg { pointer-events: none; } .icon-sun { display: none; } .icon-moon { display: block; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } /* ── SHARED NAV STYLES ── */ .shared-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; border-bottom: 1px solid var(--border); background: var(--nav-bg); backdrop-filter: blur(16px); position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.3s, border-color 0.3s; } .shared-logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.5px; color: var(--text); text-decoration: none; } .shared-logo span { color: var(--green); } /* ── SHARED BUTTON STYLES ── */ .s-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; font-family: 'Inter', sans-serif; } .s-btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); } .s-btn-ghost:hover { color: var(--text); border-color: var(--border-glow); background: var(--green-glow); } .s-btn-green { background: var(--green); color: #0a0f1a; border-color: transparent; box-shadow: 0 0 18px rgba(0,180,96,0.25); } [data-theme="dark"] .s-btn-green { box-shadow: 0 0 24px rgba(0,255,136,0.3); } .s-btn-green:hover { filter: brightness(1.1); transform: translateY(-1px); } /* ── SMOOTH TRANSITIONS ── */ body, .shared-nav, .s-btn, .theme-toggle { transition: background-color 0.25s, border-color 0.25s, color 0.25s; } /* ── THEME TOGGLE SCRIPT (include this in every page) ── */