| |
| |
| |
| :root { |
| --blue:#2563EB;--blue-light:#3B82F6;--blue-dark:#1D4ED8; |
| --teal:#14B8A6;--purple:#7C3AED;--green:#10B981;--red:#EF4444; |
| --bg:#0F172A;--surface:rgba(30,41,59,0.85);--surface-2:#1E293B; |
| --border:rgba(148,163,184,0.2); |
| --text:#F1F5F9;--text-muted:#94A3B8;--text-light:#64748B; |
| --radius:16px;--radius-lg:24px; |
| --shadow-lg:0 24px 64px rgba(0,0,0,0.5); |
| --font-display:'Space Grotesk',sans-serif; |
| --font-body:'Inter',sans-serif; |
| --transition:.25s ease; |
| } |
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} |
| html{scroll-behavior:smooth;} |
| body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow-x:hidden;} |
|
|
| |
| .auth-bg{position:fixed;inset:0;z-index:0;overflow:hidden;} |
| .auth-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;animation:orbFloat 8s ease-in-out infinite;} |
| .orb-1{width:600px;height:600px;background:radial-gradient(circle,#2563EB,transparent);top:-200px;left:-200px;animation-delay:0s;} |
| .orb-2{width:500px;height:500px;background:radial-gradient(circle,#7C3AED,transparent);bottom:-150px;right:-150px;animation-delay:3s;} |
| .orb-3{width:400px;height:400px;background:radial-gradient(circle,#14B8A6,transparent);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:6s;} |
| @keyframes orbFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-30px) scale(1.05);}} |
| .auth-particles{position:absolute;inset:0;} |
|
|
| |
| .auth-wrapper{position:relative;z-index:10;width:100%;max-width:500px;padding:20px;} |
| .auth-card{background:rgba(15,23,42,0.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-lg);} |
|
|
| |
| .auth-logo{display:flex;align-items:center;gap:14px;margin-bottom:28px;} |
| .auth-logo-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--blue),var(--teal));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;flex-shrink:0;} |
| .auth-logo-text{font-family:var(--font-display);font-size:1.3rem;font-weight:700;display:block;} |
| .logo-ai{background:linear-gradient(135deg,var(--blue-light),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} |
| .auth-logo-sub{font-size:0.78rem;color:var(--text-muted);margin-top:2px;} |
| .auth-title{font-family:var(--font-display);font-size:1.7rem;font-weight:700;margin-bottom:6px;} |
| .auth-subtitle{color:var(--text-muted);font-size:0.9rem;margin-bottom:28px;line-height:1.5;} |
|
|
| |
| .form-group{margin-bottom:18px;} |
| .form-label{display:flex;align-items:center;gap:7px;font-size:0.85rem;font-weight:600;color:var(--text-muted);margin-bottom:8px;} |
| .input-wrap{position:relative;} |
| .form-input{width:100%;padding:13px 16px;background:rgba(30,41,59,0.8);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:0.95rem;font-family:var(--font-body);outline:none;transition:border var(--transition),box-shadow var(--transition);} |
| .form-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,0.15);} |
| .form-input.input-error{border-color:var(--red);} |
| .form-input.input-ok{border-color:var(--green);} |
| .toggle-pass{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;padding:4px;} |
| .toggle-pass:hover{color:var(--blue);} |
| .form-error{display:block;font-size:0.8rem;color:var(--red);margin-top:5px;min-height:16px;} |
| .form-success{display:block;font-size:0.85rem;color:var(--green);margin-top:5px;} |
| .text-center{text-align:center;} |
| .form-group.has-error .form-input{border-color:var(--red);} |
| .form-group.has-ok .form-input{border-color:var(--green);} |
|
|
| |
| .strength-meter{margin-top:8px;display:flex;align-items:center;gap:10px;} |
| .strength-bar{flex:1;height:5px;background:rgba(255,255,255,0.1);border-radius:10px;overflow:hidden;} |
| .strength-fill{height:100%;width:0%;border-radius:10px;transition:width .4s,background .4s;} |
| .strength-label{font-size:0.78rem;font-weight:600;color:var(--text-muted);white-space:nowrap;} |
|
|
| |
| .btn-auth{width:100%;padding:14px;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:20px;transition:all var(--transition);box-shadow:0 4px 20px rgba(37,99,235,0.35);} |
| .btn-auth:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,99,235,0.45);} |
| .btn-auth:active{transform:translateY(0);} |
| .btn-auth-outline{width:100%;padding:13px;background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:12px;font-size:0.95rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;transition:all var(--transition);text-decoration:none;} |
| .btn-auth-outline:hover{border-color:var(--blue);color:var(--blue);background:rgba(37,99,235,0.07);} |
|
|
| |
| .auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0 0;color:var(--text-light);font-size:0.82rem;} |
| .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);} |
|
|
| |
| .particle{position:absolute;background:rgba(99,179,237,.5);border-radius:50%;animation:floatUp linear infinite;pointer-events:none;} |
| @keyframes floatUp{0%{transform:translateY(0) rotate(0deg);opacity:.6;}100%{transform:translateY(-100vh) rotate(360deg);opacity:0;}} |
|
|
| |
| @media(max-width:520px){.auth-card{padding:28px 20px;}.auth-wrapper{padding:12px;}} |
|
|
