/** * Tutor — Recover password page CSS * Scoped to body.tutor-recover-theme * Design: same dark navy glassmorphism as login/register */ /* ─── Reset & base ──────────────────────────────────── */ body.tutor-recover-theme { margin: 0; padding: 0; min-height: 100vh; background: #050d1a; color: #e8f0fe; font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.tutor-recover-theme * { box-sizing: border-box; } /* ─── Hide framework chrome ─────────────────────────── */ body.tutor-recover-theme #large-header, body.tutor-recover-theme .navbar, body.tutor-recover-theme nav.navbar, body.tutor-recover-theme header.navbar, body.tutor-recover-theme > footer:not(.tutor-auth-footer) { display: none !important; } /* ─── Background blobs ──────────────────────────────── */ body.tutor-recover-theme .tutor-blob { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; animation: tutorBlobDrift 14s ease-in-out infinite alternate; } body.tutor-recover-theme .tutor-blob-1 { width: 440px; height: 440px; background: radial-gradient(circle, rgba(0,212,255,0.18) 0%, transparent 70%); top: -80px; left: -80px; animation-delay: -3s; } body.tutor-recover-theme .tutor-blob-2 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(26,108,246,0.16) 0%, transparent 70%); bottom: -60px; right: -40px; animation-delay: -8s; } @keyframes tutorBlobDrift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(30px, 20px) scale(1.06); } } /* ─── Grid overlay ──────────────────────────────────── */ body.tutor-recover-theme .tutor-grid-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(26,108,246,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(26,108,246,0.04) 1px, transparent 1px); background-size: 48px 48px; } /* ─── Auth wrapper ──────────────────────────────────── */ .tutor-auth-wrap { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 28px; } /* ─── Brand ─────────────────────────────────────────── */ .tutor-auth-brand { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .tutor-auth-logo { display: flex; align-items: center; gap: 10px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.9rem; letter-spacing: -0.03em; color: #e8f0fe; } .tutor-logo-icon { font-size: 1.5rem; background: linear-gradient(135deg, #1a6cf6, #00d4ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 10px rgba(0,212,255,0.4)); animation: tutorLogoPulse 3s ease-in-out infinite; } @keyframes tutorLogoPulse { 0%, 100% { filter: drop-shadow(0 0 10px rgba(0,212,255,0.4)); } 50% { filter: drop-shadow(0 0 22px rgba(0,212,255,0.7)); } } .tutor-auth-tagline { margin: 0; font-size: 0.85rem; color: #8fa3bb; } /* ─── Auth card ─────────────────────────────────────── */ .tutor-auth-card { width: 100%; max-width: 400px; background: rgba(15,31,56,0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(26,108,246,0.18); border-radius: 18px; padding: 32px 28px; box-shadow: 0 0 0 1px rgba(0,212,255,0.04), 0 24px 60px rgba(0,0,0,0.5), 0 0 80px rgba(26,108,246,0.06) inset; } /* ─── Step bar ──────────────────────────────────────── */ .tutor-steps-bar { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 24px; } .tutor-step { display: flex; flex-direction: column; align-items: center; gap: 5px; } .tutor-step-circle { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(26,108,246,0.25); background: rgba(15,31,56,0.9); color: #8fa3bb; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .tutor-step-circle.active { border-color: #1a6cf6; background: linear-gradient(135deg, #1a6cf6, #00d4ff); color: #fff; box-shadow: 0 0 14px rgba(26,108,246,0.5); } .tutor-step-circle.done { border-color: rgba(0,212,255,0.5); background: rgba(0,212,255,0.12); color: #00d4ff; } .tutor-step-label { font-size: 0.62rem; color: #8fa3bb; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.3s ease; text-align: center; max-width: 64px; } .tutor-step-label.active { color: #1a6cf6; } .tutor-step-label.done { color: #00d4ff; } .tutor-step-line { flex: 1; height: 2px; min-width: 28px; background: rgba(26,108,246,0.15); margin: 0 4px; margin-bottom: 18px; transition: background 0.3s ease; } .tutor-step-line.done { background: linear-gradient(90deg, #1a6cf6, #00d4ff); } /* ─── Intro text ────────────────────────────────────── */ .tutor-recover-intro { margin-bottom: 18px; } .tutor-recover-intro p { margin: 0; font-size: 0.85rem; color: #8fa3bb; line-height: 1.5; } /* ─── Form fields ───────────────────────────────────── */ body.tutor-recover-theme .tutor-form-group { margin-bottom: 16px; } body.tutor-recover-theme .tutor-field-label { display: block; font-size: 0.72rem; font-weight: 600; color: #8fa3bb; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } body.tutor-recover-theme input[type="text"], body.tutor-recover-theme input[type="email"], body.tutor-recover-theme input[type="password"], body.tutor-recover-theme .form-control { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(26,108,246,0.2); background: rgba(5,13,26,0.7); color: #e8f0fe; font-family: 'DM Sans', sans-serif; font-size: 0.92rem; transition: border-color 0.25s, box-shadow 0.25s; outline: none; } body.tutor-recover-theme input[type="text"]:focus, body.tutor-recover-theme input[type="email"]:focus, body.tutor-recover-theme input[type="password"]:focus, body.tutor-recover-theme .form-control:focus { border-color: #1a6cf6; box-shadow: 0 0 0 3px rgba(26,108,246,0.15); } body.tutor-recover-theme input::placeholder, body.tutor-recover-theme .form-control::placeholder { color: rgba(143,163,187,0.45); } /* ─── Submit button ─────────────────────────────────── */ body.tutor-recover-theme .tutor-btn-recover, body.tutor-recover-theme button[type="submit"] { width: 100%; padding: 12px; border: none; border-radius: 10px; background: linear-gradient(135deg, #1a6cf6 0%, #00d4ff 100%); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 18px rgba(26,108,246,0.35); margin-top: 4px; } body.tutor-recover-theme .tutor-btn-recover:hover, body.tutor-recover-theme button[type="submit"]:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(26,108,246,0.45); } /* ─── Alerts ────────────────────────────────────────── */ body.tutor-recover-theme .alert { border-radius: 10px; border: 1px solid rgba(26,108,246,0.2); background: rgba(26,108,246,0.08); font-size: 0.875rem; padding: 10px 14px; } body.tutor-recover-theme .alert-danger { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); color: #fca5a5; } body.tutor-recover-theme .alert-success { border-color: rgba(0,212,255,0.3); background: rgba(0,212,255,0.06); color: #67e8f9; } /* ─── Links ─────────────────────────────────────────── */ body.tutor-recover-theme a { color: #1a6cf6; text-decoration: none; font-size: 0.85rem; transition: color 0.2s; } body.tutor-recover-theme a:hover { color: #00d4ff; } /* ─── Footer ────────────────────────────────────────── */ .tutor-auth-footer { font-size: 0.75rem; color: rgba(143,163,187,0.45); text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; } .tutor-back-link { color: rgba(143,163,187,0.55) !important; font-size: 0.75rem; transition: color 0.2s; } .tutor-back-link:hover { color: #1a6cf6 !important; } /* ─── Responsive ────────────────────────────────────── */ @media (max-width: 480px) { .tutor-auth-card { padding: 24px 16px; border-radius: 14px; } .tutor-auth-logo { font-size: 1.5rem; } .tutor-step-line { min-width: 20px; } }

Reset your access

1
Email
2
Code
3
New Password

Enter your work email and we'll send you a reset code.