File size: 7,231 Bytes
67eb5fb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | /* ============================================================
SpeakFlow AI – signup.css (shared base with login.css)
============================================================ */
: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;}
/* ── Animated Background ─────────────────────────────────── */
.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 ────────────────────────────────────────── */
.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);}
/* ── Logo ────────────────────────────────────────────────── */
.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 ────────────────────────────────────────────────── */
.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 ──────────────────────────────────────── */
.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;}
/* ── Buttons ─────────────────────────────────────────────── */
.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);}
/* ── Divider ─────────────────────────────────────────────── */
.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);}
/* ── Particles ───────────────────────────────────────────── */
.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;}}
/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:520px){.auth-card{padding:28px 20px;}.auth-wrapper{padding:12px;}}
|