Atrium — Corporate ERP Login

<div class="at-wrap"><div class="at-card"><div class="row g-0">
  <div class="col-md-5 at-brand p-4 p-lg-5 d-flex flex-column">
    <div class="fw-bold fs-5 mb-4"><i class="bi bi-buildings me-1"></i>Atlas ERP</div>
    <h4 class="fw-bold mb-3">Enterprise control panel</h4>
    <div class="d-grid gap-3 small at-feat">
      <div class="d-flex gap-2"><i class="bi bi-shield-lock-fill"></i> SOC 2 Type II compliant infrastructure</div>
      <div class="d-flex gap-2"><i class="bi bi-clock-history"></i> Full audit trail on every admin action</div>
      <div class="d-flex gap-2"><i class="bi bi-people-fill"></i> Role-based access for 50+ seat teams</div>
    </div>
    <div class="mt-auto pt-4 small opacity-75">support@convertatlas.org · v8.2</div>
  </div>
  <div class="col-md-7 p-4 p-lg-5">
    <div class="d-flex justify-content-between align-items-center mb-4"><h4 class="fw-bold mb-0">Admin sign in</h4><span class="at-badge"><i class="bi bi-lock-fill me-1"></i>SSL secured</span></div>
    <label class="form-label small fw-semibold">Corporate email</label>
    <input type="email" class="form-control mb-3" placeholder="you@convertatlas.org">
    <label class="form-label small fw-semibold">Password</label>
    <input type="password" class="form-control mb-3" placeholder="••••••••••">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <div class="form-check"><input class="form-check-input" type="checkbox" id="atr"><label class="form-check-label small" for="atr">Trust this device for 30 days</label></div>
      <a href="#" class="small text-decoration-none">Reset password</a>
    </div>
    <button class="btn btn-at text-white w-100 mb-3">Sign in securely</button>
    <button class="btn btn-light w-100 mb-4"><i class="bi bi-key me-1"></i>Sign in with company SSO</button>
    <p class="small text-secondary mb-0 text-center">Unauthorized access is prohibited and monitored.</p>
  </div>
</div></div></div>
<div style="text-align:center;padding:18px 12px;font:500 12px system-ui;opacity:.6">Template by <a href="https://convertatlas.org" style="color:inherit;font-weight:700;text-decoration:none">ConvertAtlas</a> · Developer Tools</div>

body{min-height:100vh;margin:0;font-family:'Segoe UI',system-ui,sans-serif;background:#eef2f7}
.at-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.at-card{max-width:860px;width:100%;border-radius:22px;overflow:hidden;box-shadow:0 24px 70px rgba(15,35,75,.16);background:#fff}
.at-brand{background:#0f2347;color:#fff;position:relative}
.at-brand::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(37,99,235,.35),transparent 55%)}
.at-brand>*{position:relative;z-index:1}
.at-feat i{color:#60a5fa}
.form-control{border-radius:10px;padding:.7rem .9rem;border:1.5px solid #dbe3ef}
.form-control:focus{border-color:#2563eb;box-shadow:0 0 0 .2rem rgba(37,99,235,.12)}
.btn-at{background:#2563eb;border:0;border-radius:10px;padding:.7rem;font-weight:600}
.btn-at:hover{background:#1d4ed8}
.at-badge{background:#eef2f7;border-radius:8px;padding:6px 10px;font-size:.75rem;color:#475569}