Vista — Split Screen Login

<main class="vs-wrap">
  <section class="vs-form-side"><div class="vs-fw">
    <a class="vs-brand" href="#">▦ Vista</a>
    <h1 class="vs-h1">Sign in</h1><p class="vs-sub">Access your Vista workspace.</p>
    <form data-auth novalidate>
      <div class="vs-field"><label for="vs-email">Email</label><input id="vs-email" type="email" autocomplete="email" placeholder="you@vista.app" required></div>
      <div class="vs-field"><label for="vs-pw">Password</label><div class="vs-pw"><input id="vs-pw" type="password" autocomplete="current-password" placeholder="Your password" required><button type="button" class="vs-toggle" data-pw-toggle="vs-pw" aria-pressed="false" aria-label="Toggle password">Show</button></div></div>
      <div class="vs-row"><label class="vs-check"><input type="checkbox"> Remember me</label><a href="#" class="vs-link">Forgot password?</a></div>
      <button type="submit" class="vs-btn">Sign in</button>
      <div class="vs-ssos"><button type="button">Google</button><button type="button">GitHub</button></div>
    </form>
    <p class="vs-foot-t">No account yet? <a href="#" class="vs-link">Create one</a></p>
    <footer class="vs-foot"><span class="x-by">Built with <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></span></footer>
  </div></section>
  <aside class="vs-brand-side" aria-hidden="true"><div class="vs-quote"><p>"Vista replaced four tools for our whole team. We never looked back."</p><div class="vs-q-by"><span>SJ</span><div><b>Sara Jensen</b><i>Head of Ops, Lumen</i></div></div></div></aside>
</main>

*{box-sizing:border-box}
.vs-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#0b1413;color:#e6f2f0;font-family:'Inter',system-ui,sans-serif}
.vs-form-side{display:flex;align-items:center;justify-content:center;padding:40px 28px}
.vs-fw{width:100%;max-width:370px}
.vs-brand{font-family:'Sora',sans-serif;font-weight:800;font-size:1.2rem;color:#2dd4bf;text-decoration:none;display:inline-block;margin-bottom:30px}
.vs-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.8rem;margin:0 0 6px;color:#fff}
.vs-sub{color:#8aa6a2;font-size:.94rem;margin:0 0 26px}
.vs-field{margin-bottom:15px}
.vs-field label{display:block;font-size:.84rem;font-weight:600;margin-bottom:6px;color:#bcd4d0}
.vs-field input{width:100%;padding:12px 14px;border:1px solid #234440;border-radius:10px;font:inherit;font-size:.96rem;color:#fff;background:#11211f}
.vs-field input::placeholder{color:#6b8b86}
.vs-field input:focus{outline:none;border-color:#0d9488;box-shadow:0 0 0 3px rgba(13,148,136,.3)}
.vs-field input[aria-invalid=true]{border-color:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.22)}
.vs-pw{position:relative}
.vs-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#7fa39d;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;padding:6px 8px}
.vs-toggle:hover{color:#fff}.vs-toggle:focus-visible{outline:2px solid #0d9488;outline-offset:1px;border-radius:6px}
.vs-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 20px;font-size:.86rem}
.vs-check{display:flex;align-items:center;gap:7px;color:#bcd4d0;cursor:pointer}.vs-check input{width:15px;height:15px;accent-color:#0d9488}
.vs-link{color:#5eead4;font-weight:600;text-decoration:none}.vs-link:hover{text-decoration:underline}
.vs-btn{width:100%;padding:13px;border:0;border-radius:11px;background:linear-gradient(135deg,#0d9488,#0ea5a0);color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s}
.vs-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(13,148,136,.4)}.vs-btn:focus-visible{outline:3px solid #5eead4;outline-offset:2px}
.vs-ssos{display:flex;gap:10px;margin-top:14px}
.vs-ssos button{flex:1;padding:11px;border:1px solid #234440;border-radius:10px;background:#11211f;color:#cfe6e2;font:inherit;font-weight:600;cursor:pointer;transition:.15s}
.vs-ssos button:hover{border-color:#0d9488;background:#15302d}.vs-ssos button:focus-visible{outline:2px solid #0d9488;outline-offset:2px}
.vs-foot-t{text-align:center;font-size:.88rem;color:#8aa6a2;margin:22px 0 0}
.vs-foot{text-align:center;margin-top:22px;padding-top:18px;border-top:1px solid #1c302d}
.x-by{font-size:.8rem;color:#6b8b86}.x-by a{color:#5eead4;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
.vs-brand-side{position:relative;display:flex;align-items:flex-end;padding:46px;background:linear-gradient(155deg,#0d9488,#0f766e 55%,#134e4a);overflow:hidden}
.vs-brand-side::before{content:'';position:absolute;inset:-25% auto auto -20%;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.1)}
.vs-quote{position:relative;z-index:1}
.vs-quote>p{font-family:'Sora',sans-serif;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:700;line-height:1.25;color:#fff;margin:0 0 22px;max-width:20ch}
.vs-q-by{display:flex;align-items:center;gap:12px}
.vs-q-by span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#0d9488;background:#fff}
.vs-q-by b{display:block;color:#fff}.vs-q-by i{font-style:normal;font-size:.86rem;color:rgba(255,255,255,.8)}
@media(max-width:820px){.vs-wrap{grid-template-columns:1fr}.vs-brand-side{display:none}}
@media(prefers-reduced-motion:reduce){.vs-btn{transition:none}}

(function(){document.querySelectorAll('[data-pw-toggle]').forEach(function(b){b.addEventListener('click',function(){var inp=document.getElementById(b.getAttribute('data-pw-toggle'));if(!inp)return;var show=inp.type==='password';inp.type=show?'text':'password';b.setAttribute('aria-pressed',show?'true':'false');b.textContent=show?'Hide':'Show';});});var f=document.querySelector('form[data-auth]');if(f){f.addEventListener('submit',function(e){e.preventDefault();var ok=true;f.querySelectorAll('input[required]').forEach(function(i){if(!i.value||!i.checkValidity()){ok=false;i.setAttribute('aria-invalid','true');}else{i.removeAttribute('aria-invalid');}});if(!ok)return;var btn=f.querySelector('[type=submit]');if(btn){btn.textContent='Signing in…';setTimeout(function(){btn.textContent='✓ Signed in';},700);}});}})();