/* Accounts auth (login + register). Set --auth-bg-image on in the template. */ /* ----- Shared ----- */ .auth-page { font-family: "DM Sans", sans-serif; position: relative; color: #1a202c; background: linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)), var(--auth-bg-image) center/cover no-repeat, radial-gradient(circle at 12% 8%, rgba(0, 82, 255, 0.32), transparent 34%), radial-gradient(circle at 88% 18%, rgba(0, 178, 255, 0.28), transparent 30%), radial-gradient(circle at 15% 85%, rgba(55, 118, 255, 0.32), transparent 36%), linear-gradient(180deg, #f1f6ff 0%, #e6efff 100%); } .auth-page::before, .auth-page::after { content: ""; position: fixed; width: 520px; height: 520px; border-radius: 999px; filter: blur(80px); opacity: 0.45; z-index: 0; pointer-events: none; } .auth-page::before { top: -120px; right: -160px; background: radial-gradient(circle, rgba(0, 82, 255, 0.7), transparent 68%); } .auth-page::after { bottom: -160px; left: -180px; background: radial-gradient(circle, rgba(75, 142, 255, 0.65), transparent 68%); } .auth-page--login { overflow: hidden; } .auth-page--register { overflow-x: hidden; } .pwd-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0, 82, 255, 0.08); color: #1f2a44; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .pwd-toggle:hover { background: rgba(0, 82, 255, 0.16); color: #0052ff; } /* ----- Login ----- */ .auth-page--login .login-shell { position: relative; z-index: 1; } .auth-page--login .login-card { background: rgba(255, 255, 255, 0.84); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 24px 56px rgba(15, 23, 42, 0.1); } .auth-page--login .login-button { background: #259a6e; color: #fff; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; } .auth-page--login .login-button:hover { transform: translateY(-1px); background: #fff; color: #259a6e; border: 2px solid #259a6e; } .auth-page--login .login-button:disabled { opacity: 0.76; cursor: wait; transform: none; } .auth-page--login .login-card form input[type="text"], .auth-page--login .login-card form input[type="email"], .auth-page--login .login-card form input[type="password"], .auth-page--login .login-card form input:not([type]) { width: 100%; border-radius: 1rem; padding: 0.875rem 1rem; font-size: 0.875rem; font-weight: 600; color: #0f172a; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(245, 248, 253, 0.98); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .auth-page--login .login-card form input[type="password"] { padding-right: 3rem; } .auth-page--login .login-card form input:focus { outline: none; border-color: rgba(0, 82, 255, 0.45); box-shadow: 0 0 0 4px rgba(0, 82, 255, 0.11); background: #fff; } /* ----- Register ----- */ .auth-page--register .register-card { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); box-shadow: 0 24px 52px rgba(15, 23, 42, 0.1); } .auth-page--register .register-card.register-card--tint { background-color: rgba(238, 238, 238, 0.84) !important; } .auth-page--register #registerForm input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]), .auth-page--register #registerForm select, .auth-page--register #registerForm textarea { width: 100%; box-sizing: border-box; border-radius: 0.85rem; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(245, 248, 253, 0.98); padding: 0.78rem 1rem; font-size: 0.95rem; font-weight: 600; color: #0f172a; font-family: inherit; line-height: 1.35; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .auth-page--register #registerForm .relative > input { padding-right: 3rem; } .auth-page--register #registerForm input:focus, .auth-page--register #registerForm select:focus, .auth-page--register #registerForm textarea:focus { outline: none; border-color: rgba(0, 82, 255, 0.45); box-shadow: 0 0 0 4px rgba(0, 82, 255, 0.12); background: #fff; } .auth-page--register #registerForm input::placeholder, .auth-page--register #registerForm textarea::placeholder { color: #94a3b8; font-weight: 500; } .auth-page--register .register-shell { min-height: 100vh; display: block; } @media (min-width: 768px) { .auth-page--register .register-shell { display: flex; align-items: center; justify-content: center; } }