/* ========================================================================== EPHRAIX — SHARED BRAND THEME v2 Matches the live ephraix.com aesthetic: deep space-black background, violet→cyan gradient accents, glassmorphic cards, gradient headline text. Toggle between themes by adding/removing class "light-mode" on (handled by assets/js/theme-toggle.js — now wired into ALL pages). ========================================================================== */ :root{ /* ---- DARK (default) ---- */ --bg: #05040c; --bg-alt: #0a0818; --surface: rgba(255,255,255,0.045); --surface-solid: #100d20; --surface-2: rgba(255,255,255,0.07); --border: rgba(255,255,255,0.10); --border-strong: rgba(147,112,255,0.35); --accent-1: #8b5cf6; --accent-2: #6366f1; --accent-3: #22d3ee; --gradient: linear-gradient(120deg, var(--accent-1) 0%, var(--accent-2) 55%, var(--accent-3) 100%); --gradient-soft: linear-gradient(120deg, rgba(139,92,246,0.18), rgba(34,211,238,0.12)); --glow: 0 0 0 1px rgba(139,92,246,0.15), 0 8px 40px rgba(99,102,241,0.18); --text: #f5f4fb; --text-muted: #a8a3c4; --text-dim: #716c94; --success: #34e0a1; --warning: #ffc061; --danger: #ff5c8a; --radius: 18px; --radius-sm: 10px; --font: 'Poppins','Inter','Segoe UI',system-ui,-apple-system,sans-serif; --shadow: 0 20px 60px rgba(0,0,0,0.55); /* Tells the browser to render native UI (incl. dropdown readability (dark + light) ---------- color-scheme (set on :root / body.light-mode above) fixes this in most modern browsers, but we set explicit colors too as a safety net for browsers/platforms that ignore color-scheme for the popup list. */ select{ color-scheme: inherit; } select option{ background: var(--surface-solid); color: var(--text); } select option:checked, select option:hover{ background: var(--accent-2); color: #fff; } /* ---------- Utility ---------- */ .container{ max-width:1200px; margin:0 auto; padding:0 24px; } .pill{ display:inline-block; padding:4px 13px; border-radius:999px; font-size:.74rem; font-weight:600; } .pill-published{ background:rgba(52,224,161,.15); color:var(--success); } .pill-draft{ background:rgba(255,192,97,.15); color:var(--warning); }