Recover — Password Reset

<main class="rc-wrap"><div class="rc-card">
  <div class="rc-icon" aria-hidden="true">✉</div>
  <div class="rc-state" data-state="request">
    <h1 class="rc-h1">Reset your password</h1>
    <p class="rc-sub">Enter the email linked to your account and we'll send you a secure link to set a new password.</p>
    <form class="rc-form" novalidate>
      <div class="rc-field"><label for="rc-email">Email address</label><input id="rc-email" type="email" autocomplete="email" placeholder="you@email.com" required></div>
      <button type="submit" class="rc-btn">Send reset link</button>
    </form>
  </div>
  <div class="rc-state" data-state="sent" hidden>
    <h1 class="rc-h1">Check your inbox</h1>
    <p class="rc-sub">We've sent a password reset link to <b class="rc-email-out">your email</b>. The link expires in 30 minutes.</p>
    <p class="rc-resend">Didn't get it? <button type="button" class="rc-link" data-resend>Resend email</button></p>
  </div>
  <a href="#" class="rc-back">← Back to login</a>
  <footer class="rc-foot"><span class="x-by">Built with <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></span></footer>
</div></main>

*{box-sizing:border-box}
.rc-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 20px;background:radial-gradient(70% 50% at 50% 0%,#cffafe,#ecfeff);color:#0c2629;font-family:'Inter',system-ui,sans-serif}
.rc-card{width:100%;max-width:420px;background:#fff;border:1px solid #cdeef2;border-radius:20px;padding:38px 32px;box-shadow:0 16px 50px rgba(8,145,178,.12);text-align:center}
.rc-icon{width:62px;height:62px;border-radius:18px;margin:0 auto 22px;display:grid;place-items:center;font-size:1.7rem;color:#fff;background:linear-gradient(135deg,#0891b2,#06b6d4)}
.rc-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;margin:0 0 8px}
.rc-sub{color:#4b6e72;font-size:.96rem;line-height:1.6;margin:0 0 24px}
.rc-sub b{color:#0c2629}
.rc-field{margin-bottom:16px;text-align:left}
.rc-field label{display:block;font-size:.84rem;font-weight:600;margin-bottom:6px;color:#2d5256}
.rc-field input{width:100%;padding:13px 15px;border:1.5px solid #c3e6ea;border-radius:11px;font:inherit;font-size:.97rem;color:#0c2629;background:#f7fdfe}
.rc-field input::placeholder{color:#8fb4b8}
.rc-field input:focus{outline:none;border-color:#0891b2;box-shadow:0 0 0 3px rgba(8,145,178,.18);background:#fff}
.rc-field input[aria-invalid=true]{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.14)}
.rc-btn{width:100%;padding:13px;border:0;border-radius:11px;background:linear-gradient(135deg,#0891b2,#06b6d4);color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s}
.rc-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(8,145,178,.34)}.rc-btn:focus-visible{outline:3px solid #67e8f9;outline-offset:2px}
.rc-resend{font-size:.9rem;color:#4b6e72;margin:0}
.rc-link{border:0;background:transparent;color:#0891b2;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;padding:0}
.rc-link:focus-visible{outline:2px solid #0891b2;outline-offset:2px;border-radius:4px}
.rc-back{display:inline-block;margin-top:24px;color:#0891b2;font-weight:600;font-size:.9rem;text-decoration:none}
.rc-back:hover{text-decoration:underline}.rc-back:focus-visible{outline:2px solid #0891b2;outline-offset:2px}
.rc-foot{margin-top:24px;padding-top:18px;border-top:1px solid #eef7f8}
.x-by{font-size:.8rem;color:#8fb4b8}.x-by a{color:#0891b2;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.rc-btn{transition:none}}

(function(){var card=document.querySelector('.rc-card');if(!card)return;var form=card.querySelector('.rc-form');var req=card.querySelector('[data-state=request]');var sent=card.querySelector('[data-state=sent]');var out=card.querySelector('.rc-email-out');
if(form){form.addEventListener('submit',function(e){e.preventDefault();var i=card.querySelector('#rc-email');if(!i.value||!i.checkValidity()){i.setAttribute('aria-invalid','true');i.focus();return;}if(out)out.textContent=i.value;req.hidden=true;sent.hidden=false;});}
var rs=card.querySelector('[data-resend]');if(rs){rs.addEventListener('click',function(){rs.textContent='Sent again ✓';rs.disabled=true;});}})();