Onboard — Multi-Step Signup

<main class="ob-wrap"><div class="ob-card">
  <header class="ob-head"><a class="ob-brand" href="#">◆ Onboard</a>
    <ol class="ob-steps" aria-label="Signup progress">
      <li class="is-active" data-step-dot="1"><span>1</span> Account</li>
      <li data-step-dot="2"><span>2</span> Profile</li>
      <li data-step-dot="3"><span>3</span> Done</li>
    </ol>
  </header>
  <form class="ob-form" novalidate>
    <section class="ob-step is-active" data-step="1">
      <h1 class="ob-h1">Create your account</h1><p class="ob-sub">Step 1 of 3 — your login details.</p>
      <div class="ob-field"><label for="ob-email">Work email</label><input id="ob-email" type="email" autocomplete="email" placeholder="you@company.com" required></div>
      <div class="ob-field"><label for="ob-pw">Password</label><input id="ob-pw" type="password" autocomplete="new-password" placeholder="At least 8 characters" minlength="8" required></div>
      <div class="ob-nav"><span></span><button type="button" class="ob-next" data-next>Continue →</button></div>
    </section>
    <section class="ob-step" data-step="2" hidden>
      <h1 class="ob-h1">Tell us about you</h1><p class="ob-sub">Step 2 of 3 — set up your profile.</p>
      <div class="ob-field"><label for="ob-name">Full name</label><input id="ob-name" type="text" autocomplete="name" placeholder="Maya Rivera" required></div>
      <div class="ob-field"><label for="ob-co">Company</label><input id="ob-co" type="text" autocomplete="organization" placeholder="Acme Inc." required></div>
      <div class="ob-field"><label for="ob-role">Role</label><select id="ob-role" class="ob-select"><option>Founder</option><option>Engineer</option><option>Designer</option><option>Marketing</option><option>Other</option></select></div>
      <div class="ob-nav"><button type="button" class="ob-back" data-back>← Back</button><button type="button" class="ob-next" data-next>Continue →</button></div>
    </section>
    <section class="ob-step" data-step="3" hidden>
      <div class="ob-done"><div class="ob-check" aria-hidden="true">✓</div><h1 class="ob-h1">You're all set, Maya!</h1><p class="ob-sub">Your Onboard workspace is ready. We've sent a confirmation to your inbox.</p><button type="submit" class="ob-finish">Go to dashboard</button></div>
    </section>
  </form>
  <footer class="ob-foot">Already have an account? <a href="#" class="ob-link">Log in</a> · <span class="x-by">Built with <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></span></footer>
</div></main>

*{box-sizing:border-box}
.ob-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 20px;background:#f5f3ff;color:#1e1b2e;font-family:'Inter',system-ui,sans-serif}
.ob-card{width:100%;max-width:460px;background:#fff;border:1px solid #ece9f7;border-radius:20px;padding:30px 32px;box-shadow:0 16px 50px rgba(124,58,237,.12)}
.ob-head{margin-bottom:24px}
.ob-brand{font-family:'Sora',sans-serif;font-weight:800;font-size:1.15rem;color:#7c3aed;text-decoration:none;display:inline-block;margin-bottom:18px}
.ob-steps{list-style:none;display:flex;gap:8px;padding:0;margin:0}
.ob-steps li{flex:1;display:flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:#a99fc4}
.ob-steps li span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;background:#ece9f7;color:#a99fc4;flex:none;transition:.2s}
.ob-steps li.is-active span,.ob-steps li.is-done span{background:#7c3aed;color:#fff}
.ob-steps li.is-active{color:#7c3aed}
.ob-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.45rem;margin:0 0 5px}
.ob-sub{color:#6b6488;font-size:.92rem;margin:0 0 22px}
.ob-field{margin-bottom:15px}
.ob-field label{display:block;font-size:.84rem;font-weight:600;margin-bottom:6px;color:#4a4368}
.ob-field input,.ob-select{width:100%;padding:12px 14px;border:1.5px solid #ded8f0;border-radius:10px;font:inherit;font-size:.96rem;color:#1e1b2e;background:#faf9ff}
.ob-field input::placeholder{color:#a99fc4}
.ob-field input:focus,.ob-select:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.16);background:#fff}
.ob-field input[aria-invalid=true]{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.14)}
.ob-select{cursor:pointer}
.ob-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px}
.ob-back{border:1.5px solid #ded8f0;background:#fff;color:#4a4368;font:inherit;font-weight:600;padding:11px 18px;border-radius:10px;cursor:pointer;transition:.15s}
.ob-back:hover{border-color:#7c3aed;color:#7c3aed}.ob-back:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}
.ob-next,.ob-finish{border:0;background:#7c3aed;color:#fff;font:inherit;font-weight:700;padding:11px 22px;border-radius:10px;cursor:pointer;transition:transform .15s,background .15s}
.ob-next:hover,.ob-finish:hover{background:#6d28d9;transform:translateY(-1px)}.ob-next:focus-visible,.ob-finish:focus-visible{outline:3px solid #c4b5fd;outline-offset:2px}
.ob-done{text-align:center;padding:10px 0}
.ob-check{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;font-size:1.8rem;color:#fff;background:linear-gradient(135deg,#7c3aed,#a855f7)}
.ob-finish{width:100%;margin-top:18px;padding:13px}
.ob-foot{text-align:center;margin-top:24px;padding-top:18px;border-top:1px solid #f0eef8;font-size:.85rem;color:#6b6488}
.ob-link{color:#7c3aed;font-weight:600;text-decoration:none}.ob-link:hover{text-decoration:underline}
.x-by{font-size:.82rem;color:#a99fc4}.x-by a{color:#7c3aed;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.ob-next,.ob-finish{transition:none}}

(function(){var form=document.querySelector('.ob-form');if(!form)return;var cur=1;var steps=form.querySelectorAll('[data-step]');var dots=document.querySelectorAll('[data-step-dot]');
function show(n){steps.forEach(function(s){s.hidden=+s.getAttribute('data-step')!==n;});dots.forEach(function(d){var dn=+d.getAttribute('data-step-dot');d.classList.toggle('is-active',dn===n);d.classList.toggle('is-done',dn<n);});cur=n;}
function valid(n){var sec=form.querySelector('[data-step="'+n+'"]');var ok=true;sec.querySelectorAll('input[required]').forEach(function(i){if(!i.value||!i.checkValidity()){ok=false;i.setAttribute('aria-invalid','true');}else{i.removeAttribute('aria-invalid');}});return ok;}
form.querySelectorAll('[data-next]').forEach(function(b){b.addEventListener('click',function(){if(valid(cur))show(cur+1);else{var bad=form.querySelector('[data-step="'+cur+'"] [aria-invalid=true]');if(bad)bad.focus();}});});
form.querySelectorAll('[data-back]').forEach(function(b){b.addEventListener('click',function(){show(cur-1);});});
form.addEventListener('submit',function(e){e.preventDefault();var btn=form.querySelector('.ob-finish');if(btn){btn.textContent='Loading…';setTimeout(function(){btn.textContent='✓ Welcome aboard';},700);}});})();