766 lines
20 KiB
Vue
766 lines
20 KiB
Vue
<template>
|
|
<div class="password-reset-container">
|
|
<div class="card-modern auth-card">
|
|
<div class="auth-header">
|
|
<div class="logo-wrapper">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
|
|
<path v-if="!resetLinkSent" d="M12 13V17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
<circle v-if="!resetLinkSent" cx="12" cy="10" r="1" fill="currentColor"/>
|
|
<path v-else d="m9 13 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h1>{{ resetLinkSent ? 'Check Your Email!' : 'Reset Password' }}</h1>
|
|
<p class="subtitle">
|
|
{{ resetLinkSent
|
|
? 'We\'ve sent you instructions to reset your password'
|
|
: 'No worries! Enter your email and we\'ll send you reset instructions'
|
|
}}
|
|
</p>
|
|
</div>
|
|
|
|
<form v-if="!resetLinkSent" @submit.prevent="handleRequestReset" class="form-modern">
|
|
<!-- Email Field -->
|
|
<div class="form-group-modern">
|
|
<label for="email" class="form-label-modern">
|
|
<svg class="label-icon" viewBox="0 0 24 24" fill="none">
|
|
<rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M2 6L12 13L22 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
Email Address
|
|
</label>
|
|
<input
|
|
id="email"
|
|
v-model="email"
|
|
type="email"
|
|
class="form-input-modern"
|
|
placeholder="your@email.com"
|
|
required
|
|
:disabled="auth.loading"
|
|
autocomplete="email"
|
|
/>
|
|
<span class="form-helper-text">Enter the email address associated with your account</span>
|
|
</div>
|
|
|
|
<!-- Info Box -->
|
|
<div class="info-box info-box-info">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
<line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<div>
|
|
<strong>Security Note:</strong> For your protection, we'll only send a reset link if this email is registered with RideAware.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<div v-if="auth.error" class="info-box info-box-danger">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
<div>
|
|
<div class="form-error-text">
|
|
<strong>Error:</strong> {{ auth.error }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button type="submit" :disabled="auth.loading" class="btn-modern btn-modern-primary btn-modern-large">
|
|
<span v-if="auth.loading" class="loading-content">
|
|
<svg class="spinner" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/>
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416" opacity="0.75"/>
|
|
</svg>
|
|
Sending reset link...
|
|
</span>
|
|
<span v-else>
|
|
<svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
|
|
<rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M2 6L12 13L22 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
Send Reset Link
|
|
</span>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Success Section -->
|
|
<div v-else class="success-section">
|
|
<div class="info-box info-box-success mb-lg">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
|
<path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<div>
|
|
<strong>Email Sent Successfully!</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="email-display">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M2 6L12 13L22 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
{{ email }}
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
<h3>What's Next?</h3>
|
|
<div class="instruction-step">
|
|
<div class="step-number">1</div>
|
|
<div class="step-content">
|
|
<strong>Check your inbox</strong>
|
|
<p>Look for an email from RideAware with your password reset link</p>
|
|
</div>
|
|
</div>
|
|
<div class="instruction-step">
|
|
<div class="step-number">2</div>
|
|
<div class="step-content">
|
|
<strong>Click the reset link</strong>
|
|
<p>The link will take you to a secure page to create your new password</p>
|
|
</div>
|
|
</div>
|
|
<div class="instruction-step">
|
|
<div class="step-number">3</div>
|
|
<div class="step-content">
|
|
<strong>Log in with new password</strong>
|
|
<p>Use your new password to securely access your account</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-box info-box-warning">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="12" y1="9" x2="12" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
<line x1="12" y1="17" x2="12.01" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<div>
|
|
<strong>Didn't receive the email?</strong> Check your spam folder, or click below to try a different email address. Reset links expire after 24 hours.
|
|
</div>
|
|
</div>
|
|
|
|
<button @click="resetForm" class="btn-modern btn-modern-secondary">
|
|
<svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
|
|
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M21 3v5h-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M3 21v-5h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Try Another Email
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div v-if="!resetLinkSent" class="auth-divider">
|
|
<span>Remember your password?</span>
|
|
</div>
|
|
|
|
<!-- Links Section -->
|
|
<div v-if="!resetLinkSent" class="auth-footer">
|
|
<RouterLink to="/login" class="btn-modern btn-modern-secondary">
|
|
<svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
|
|
<path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M15 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Back to Login
|
|
</RouterLink>
|
|
|
|
<div class="signup-prompt">
|
|
<p>New to RideAware?</p>
|
|
<RouterLink to="/signup" class="link-text">
|
|
Create a free account
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Links -->
|
|
<div v-else class="auth-footer">
|
|
<RouterLink to="/login" class="btn-modern btn-modern-primary">
|
|
<svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
|
|
<path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M15 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Return to Login
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Background Decorations -->
|
|
<div class="background-decoration">
|
|
<div class="decoration-blob blob-1"></div>
|
|
<div class="decoration-blob blob-2"></div>
|
|
<div class="decoration-blob blob-3"></div>
|
|
</div>
|
|
|
|
<!-- Bottom Link -->
|
|
<div class="bottom-link">
|
|
<RouterLink to="/" class="btn-modern btn-modern-secondary">
|
|
<svg viewBox="0 0 24 24" fill="none" style="width: 16px; height: 16px;">
|
|
<path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Back to Home
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
|
|
const auth = useAuth()
|
|
const email = ref('')
|
|
const resetLinkSent = ref(false)
|
|
|
|
async function handleRequestReset() {
|
|
try {
|
|
await auth.requestPasswordReset(email.value)
|
|
resetLinkSent.value = true
|
|
} catch (error) {
|
|
console.error('Password reset request failed:', error)
|
|
}
|
|
}
|
|
|
|
function resetForm() {
|
|
resetLinkSent.value = false
|
|
email.value = ''
|
|
auth.error = ''
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.password-reset-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--gradient-primary);
|
|
padding: var(--spacing-md);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ============================================
|
|
AUTH CARD
|
|
============================================ */
|
|
.auth-card {
|
|
max-width: 560px;
|
|
width: 100%;
|
|
animation: slideUp var(--transition-slower) cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* ============================================
|
|
AUTH HEADER
|
|
============================================ */
|
|
.auth-header {
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-2xl);
|
|
}
|
|
|
|
.logo-wrapper {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto var(--spacing-lg);
|
|
padding: var(--spacing-lg);
|
|
background: var(--gradient-primary);
|
|
border-radius: var(--radius-2xl);
|
|
color: var(--color-text-inverse);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: iconBounce var(--transition-slower) ease-out 0.2s both;
|
|
}
|
|
|
|
.logo-wrapper svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 var(--spacing-sm) 0;
|
|
color: var(--color-text-primary);
|
|
font-size: var(--font-size-3xl);
|
|
font-weight: var(--font-weight-bold);
|
|
animation: titleSlide var(--transition-slower) ease-out 0.3s both;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-base);
|
|
line-height: var(--line-height-relaxed);
|
|
margin: var(--spacing-sm) 0 0 0;
|
|
animation: subtitleFade var(--transition-slower) ease-out 0.4s both;
|
|
}
|
|
|
|
/* ============================================
|
|
FORM ENHANCEMENTS
|
|
============================================ */
|
|
.label-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: var(--spacing-xs);
|
|
vertical-align: middle;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTON ENHANCEMENTS
|
|
============================================ */
|
|
.btn-modern-large {
|
|
width: 100%;
|
|
padding: 16px 32px;
|
|
font-size: var(--font-size-lg);
|
|
min-height: 56px;
|
|
}
|
|
|
|
.loading-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.spinner {
|
|
width: 22px;
|
|
height: 22px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* ============================================
|
|
INFO BOXES
|
|
============================================ */
|
|
.info-box {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.info-box svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
SUCCESS SECTION
|
|
============================================ */
|
|
.success-section {
|
|
animation: formSlide var(--transition-slower) ease-out;
|
|
}
|
|
|
|
.email-display {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-sm);
|
|
color: var(--color-primary);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-size: var(--font-size-lg);
|
|
background: rgba(0, 102, 204, 0.1);
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--radius-lg);
|
|
margin: var(--spacing-lg) 0;
|
|
word-break: break-all;
|
|
border: 2px solid rgba(0, 102, 204, 0.2);
|
|
}
|
|
|
|
.email-display svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
INSTRUCTIONS
|
|
============================================ */
|
|
.instructions {
|
|
margin: var(--spacing-xl) 0;
|
|
}
|
|
|
|
.instructions h3 {
|
|
font-size: var(--font-size-xl);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-text-primary);
|
|
margin: 0 0 var(--spacing-lg) 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.instruction-step {
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
background: var(--color-surface-hover);
|
|
border-radius: var(--radius-lg);
|
|
border-left: 4px solid var(--color-primary);
|
|
margin-bottom: var(--spacing-md);
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.instruction-step:hover {
|
|
transform: translateX(4px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.instruction-step:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.step-number {
|
|
width: 40px;
|
|
height: 40px;
|
|
min-width: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--gradient-primary);
|
|
color: var(--color-text-inverse);
|
|
border-radius: var(--radius-full);
|
|
font-weight: var(--font-weight-bold);
|
|
font-size: var(--font-size-lg);
|
|
box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
|
|
}
|
|
|
|
.step-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.step-content strong {
|
|
display: block;
|
|
color: var(--color-text-primary);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-semibold);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.step-content p {
|
|
margin: 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-relaxed);
|
|
}
|
|
|
|
/* ============================================
|
|
DIVIDER
|
|
============================================ */
|
|
.auth-divider {
|
|
position: relative;
|
|
text-align: center;
|
|
margin: var(--spacing-2xl) 0 var(--spacing-xl) 0;
|
|
}
|
|
|
|
.auth-divider::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--color-divider);
|
|
}
|
|
|
|
.auth-divider span {
|
|
position: relative;
|
|
background: var(--color-surface);
|
|
padding: 0 var(--spacing-lg);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
/* ============================================
|
|
AUTH FOOTER
|
|
============================================ */
|
|
.auth-footer {
|
|
text-align: center;
|
|
}
|
|
|
|
.auth-footer .btn-modern {
|
|
width: 100%;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.signup-prompt {
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
|
|
.signup-prompt p {
|
|
margin: 0 0 var(--spacing-sm) 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.link-text {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
font-weight: var(--font-weight-semibold);
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.link-text:hover {
|
|
color: var(--color-primary-dark);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============================================
|
|
BACKGROUND DECORATIONS
|
|
============================================ */
|
|
.background-decoration {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.decoration-blob {
|
|
position: absolute;
|
|
border-radius: var(--radius-full);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
animation: float 8s ease-in-out infinite;
|
|
}
|
|
|
|
.blob-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
top: -10%;
|
|
left: -10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.blob-2 {
|
|
width: 300px;
|
|
height: 300px;
|
|
bottom: -5%;
|
|
right: -5%;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.blob-3 {
|
|
width: 200px;
|
|
height: 200px;
|
|
top: 50%;
|
|
left: -5%;
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
/* ============================================
|
|
BOTTOM LINK
|
|
============================================ */
|
|
.bottom-link {
|
|
position: absolute;
|
|
bottom: var(--spacing-2xl);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10;
|
|
}
|
|
|
|
.bottom-link .btn-modern {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(10px);
|
|
color: white;
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.bottom-link .btn-modern:hover {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
/* ============================================
|
|
ANIMATIONS
|
|
============================================ */
|
|
@keyframes slideUp {
|
|
from {
|
|
transform: translateY(50px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes iconBounce {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes titleSlide {
|
|
from {
|
|
transform: translateY(20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes subtitleFade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes formSlide {
|
|
from {
|
|
transform: translateY(20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-30px) rotate(180deg);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE DESIGN
|
|
============================================ */
|
|
@media (max-width: 640px) {
|
|
.password-reset-container {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.auth-card {
|
|
padding: var(--spacing-xl);
|
|
}
|
|
|
|
.auth-header {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.logo-wrapper {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-bottom: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.instructions {
|
|
margin: var(--spacing-lg) 0;
|
|
}
|
|
|
|
.instruction-step {
|
|
gap: var(--spacing-sm);
|
|
padding: var(--spacing-sm);
|
|
}
|
|
|
|
.step-number {
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.email-display {
|
|
font-size: var(--font-size-base);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.auth-divider {
|
|
margin: var(--spacing-xl) 0 var(--spacing-md) 0;
|
|
}
|
|
|
|
.blob-1 {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.blob-2 {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.blob-3 {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.auth-card {
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.auth-header {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.logo-wrapper {
|
|
width: 56px;
|
|
height: 56px;
|
|
}
|
|
|
|
.step-content strong {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.step-content p {
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.bottom-link {
|
|
bottom: var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* Accessibility */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.auth-card,
|
|
.logo-wrapper,
|
|
h1,
|
|
.subtitle,
|
|
.decoration-blob,
|
|
.instruction-step {
|
|
animation: none;
|
|
}
|
|
|
|
.instruction-step:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
</style>
|