/* ════════════════════════════════════════════════════════════ LOGIN VARIANT ENGINE — palette + layout + entrance per variant Applied via ════════════════════════════════════════════════════════════ */ /* ---- shared base (inherited from existing login.html) ---- */ .login-wrap { --p-bg:#0a0e21; --p-accent:#4b8df0; --p-accent2:#6c5ce7; --p-accent3:#a55eea; --p-text:#fff; --p-muted:rgba(255,255,255,.45); --p-card:rgba(255,255,255,.04); --p-card-brd:rgba(255,255,255,.08); } /* ============ 1. AURORA ============ */ .variant-aurora { --p-bg:#0a0e21; --p-accent:#4b8df0; --p-accent2:#6c5ce7; --p-accent3:#a55eea; --p-text:#fff; --p-muted:rgba(255,255,255,.45); --p-card:rgba(255,255,255,.04); --p-card-brd:rgba(255,255,255,.08); } /* ============ 2. SUNSET ============ */ .variant-sunset { --p-bg:#1a0e1f; --p-accent:#ff8a5c; --p-accent2:#ff5e8a; --p-accent3:#ffc15e; --p-text:#fff; --p-muted:rgba(255,235,225,.5); --p-card:rgba(255,255,255,.06); --p-card-brd:rgba(255,180,150,.15); } /* ============ 3. EMERALD ============ */ .variant-emerald { --p-bg:#06140f; --p-accent:#2dd4bf; --p-accent2:#10b981; --p-accent3:#34d399; --p-text:#eafff8; --p-muted:rgba(200,255,240,.45); --p-card:rgba(255,255,255,.05); --p-card-brd:rgba(45,212,191,.18); } /* ============ 4. INK (editorial mono) ============ */ .variant-ink { --p-bg:#0b0b0d; --p-accent:#e8e8ea; --p-accent2:#9a9aa2; --p-accent3:#c8c8d0; --p-text:#f2f2f4; --p-muted:rgba(255,255,255,.4); --p-card:rgba(255,255,255,.03); --p-card-brd:rgba(255,255,255,.1); } /* ============ 5. SAKURA ============ */ .variant-sakura { --p-bg:#1a1014; --p-accent:#ff9ec7; --p-accent2:#ffc2dd; --p-accent3:#c8a2ff; --p-text:#fff; --p-muted:rgba(255,225,240,.5); --p-card:rgba(255,255,255,.06); --p-card-brd:rgba(255,180,210,.16); } /* ============ 6. TERMINAL ============ */ .variant-terminal { --p-bg:#05070a; --p-accent:#34ff9b; --p-accent2:#22d3ee; --p-accent3:#a3ff12; --p-text:#d6ffe9; --p-muted:rgba(120,255,190,.45); --p-card:rgba(0,255,140,.04); --p-card-brd:rgba(52,255,155,.2); } /* ============ 7. LIQUID ============ */ .variant-liquid { --p-bg:#0c0a1e; --p-accent:#7c5cff; --p-accent2:#ff5cc8; --p-accent3:#5cc8ff; --p-text:#fff; --p-muted:rgba(255,255,255,.45); --p-card:rgba(255,255,255,.05); --p-card-brd:rgba(160,120,255,.2); } /* ============ 8. GRID 3D ============ */ .variant-grid3d { --p-bg:#04060f; --p-accent:#5eead4; --p-accent2:#6366f1; --p-accent3:#22d3ee; --p-text:#eaf2ff; --p-muted:rgba(180,210,255,.45); --p-card:rgba(20,30,60,.4); --p-card-brd:rgba(99,102,241,.25); } /* ============ 9. STARFIELD ============ */ .variant-starfield { --p-bg:#02030a; --p-accent:#a5b4fc; --p-accent2:#818cf8; --p-accent3:#c4b5fd; --p-text:#f5f7ff; --p-muted:rgba(200,210,255,.5); --p-card:rgba(255,255,255,.04); --p-card-brd:rgba(165,180,252,.18); } /* ============ 10. FROST ============ */ .variant-frost { --p-bg:#0d1428; --p-accent:#8ec5ff; --p-accent2:#b8a4ff; --p-accent3:#7ef0ff; --p-text:#f4f8ff; --p-muted:rgba(220,235,255,.5); --p-card:rgba(255,255,255,.08); --p-card-brd:rgba(180,210,255,.22); } /* ============ 11. WAVE ============ */ .variant-wave { --p-bg:#07131c; --p-accent:#38bdf8; --p-accent2:#22d3ee; --p-accent3:#5eead4; --p-text:#eafaff; --p-muted:rgba(200,240,255,.5); --p-card:rgba(255,255,255,.05); --p-card-brd:rgba(56,189,248,.18); } /* ============ 12. NEON PULSE ============ */ .variant-neon { --p-bg:#0a0414; --p-accent:#ff2bd6; --p-accent2:#00e5ff; --p-accent3:#ff2bd6; --p-text:#fff; --p-muted:rgba(255,210,255,.5); --p-card:rgba(255,43,214,.05); --p-card-brd:rgba(255,43,214,.22); } /* ═══════════════ ENTRANCE ANIMATIONS ═══════════════ */ @keyframes ln-slideUp { from{opacity:0;transform:translateY(34px)} to{opacity:1;transform:none} } @keyframes ln-zoomIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:none} } @keyframes ln-floatUp{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} } @keyframes ln-blurIn { from{opacity:0;filter:blur(14px);transform:scale(1.02)} to{opacity:1;filter:none;transform:none} } @keyframes ln-type { from{width:0} to{width:100%} } .entrance-slideUp .login-card{animation:ln-slideUp .7s cubic-bezier(.16,1,.3,1) both} .entrance-zoomIn .login-card{animation:ln-zoomIn .8s cubic-bezier(.16,1,.3,1) both} .entrance-floatUp .login-card{animation:ln-floatUp .8s cubic-bezier(.16,1,.3,1) both} .entrance-blurIn .login-card{animation:ln-blurIn .9s ease both} .entrance-typewriter .login-card h1{overflow:hidden;white-space:nowrap; border-right:2px solid var(--p-accent);width:0;animation:ln-type 1s steps(20) .3s forwards, blink 1s step-end infinite} @keyframes blink{50%{border-color:transparent}} /* left-side brand elements animate per variant */ .variant-aurora .hero-title .gradient-text, .variant-liquid .hero-title .gradient-text, .variant-neon .hero-title .gradient-text{background-size:200% auto; animation:gradientShift 4s linear infinite} @keyframes gradientShift{0%,100%{background-position:0% center}50%{background-position:200% center}} /* neon pulse glow */ .variant-neon .login-card{box-shadow:0 0 40px rgba(255,43,214,.25)} .variant-neon .submit-btn{animation:neonPulse 2.4s ease-in-out infinite} @keyframes neonPulse{0%,100%{box-shadow:0 0 18px rgba(255,43,214,.4)}50%{box-shadow:0 0 34px rgba(0,229,255,.6)}} /* terminal accent */ .variant-terminal .login-card{border-color:var(--p-card-brd);font-family:"JetBrains Mono",monospace} .variant-terminal .hero-title{font-family:"JetBrains Mono",monospace} /* responsive: centered layouts collapse to single column already via existing media query */