AtlasCRM — SaaS Maintenance

<main class="as-wrap"><div class="as-card">
  <header class="as-top"><a class="as-brand" href="#">▰ AtlasCRM</a><span class="as-state"><i aria-hidden="true"></i> Maintenance in progress</span></header>
  <h1 class="as-h1">We're performing scheduled maintenance</h1>
  <p class="as-lead">We're upgrading our database to improve performance and reliability. Your data is safe. Most features will return shortly.</p>
  <div class="as-progress" role="img" aria-label="Maintenance 65% complete"><div class="as-bar" style="width:65%"></div></div>
  <p class="as-pct">65% complete · Next update in ~15 min</p>
  <div class="as-services">
    <div class="as-svc"><span class="as-led as-down"></span> Dashboard <em>Maintenance</em></div>
    <div class="as-svc"><span class="as-led as-down"></span> API <em>Maintenance</em></div>
    <div class="as-svc"><span class="as-led as-ok"></span> Authentication <em>Operational</em></div>
    <div class="as-svc"><span class="as-led as-ok"></span> Billing <em>Operational</em></div>
  </div>
  <div class="as-actions"><a class="as-btn" href="#">View status page</a><a class="as-btn2" href="mailto:support@atlascrm.com">Contact support</a></div>
  <footer class="as-foot"><span class="x-by">Powered by <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></span></footer>
</div></main>

*{box-sizing:border-box}
.as-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 20px;background:radial-gradient(70% 50% at 50% 0%,#1a1f3d,#0d1020);color:#e8eaf6;font-family:'Inter',system-ui,sans-serif}
.as-card{width:100%;max-width:560px;background:#141832;border:1px solid #262a4a;border-radius:20px;padding:34px 32px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.as-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.as-brand{font-family:'Sora',sans-serif;font-weight:800;font-size:1.18rem;color:#a5a0ff;text-decoration:none}
.as-state{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:#fbbf24;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3);padding:6px 12px;border-radius:999px}
.as-state i{width:8px;height:8px;border-radius:50%;background:#fbbf24;animation:asP 1.8s infinite}@keyframes asP{50%{opacity:.4}}
.as-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.6rem;line-height:1.2;margin:0 0 12px;color:#fff}
.as-lead{color:#9aa0c5;font-size:1rem;line-height:1.6;margin:0 0 24px}
.as-progress{height:10px;border-radius:999px;background:#262a4a;overflow:hidden}
.as-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#4f46e5,#7c3aed);transition:width .4s}
.as-pct{font-size:.84rem;color:#8b91bd;margin:10px 0 24px}
.as-services{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:26px}
.as-svc{display:flex;align-items:center;gap:9px;font-size:.9rem;color:#c2c7e6;background:#1a1f3d;border:1px solid #262a4a;border-radius:10px;padding:11px 13px}
.as-svc em{font-style:normal;margin-left:auto;font-size:.74rem;font-weight:700}
.as-led{width:9px;height:9px;border-radius:50%;flex:none}
.as-down{background:#fbbf24}.as-down~em,.as-svc .as-down+em{}
.as-ok{background:#34d399}
.as-svc .as-down{} .as-svc:nth-child(-n+2) em{color:#fbbf24}.as-svc:nth-child(n+3) em{color:#34d399}
.as-actions{display:flex;gap:12px;flex-wrap:wrap}
.as-btn{flex:1;text-align:center;padding:12px;border-radius:11px;background:#4f46e5;color:#fff;font-weight:700;text-decoration:none;transition:.15s}
.as-btn:hover{background:#4338ca}.as-btn:focus-visible{outline:3px solid #a5a0ff;outline-offset:2px}
.as-btn2{flex:1;text-align:center;padding:12px;border-radius:11px;border:1px solid #2a2e4a;color:#e8eaf6;font-weight:700;text-decoration:none;transition:.15s}
.as-btn2:hover{border-color:#4f46e5}.as-btn2:focus-visible{outline:3px solid #a5a0ff;outline-offset:2px}
.as-foot{text-align:center;margin-top:26px;padding-top:18px;border-top:1px solid #222640}
.x-by{font-size:.82rem;color:#7178a0}.x-by a{color:#a5a0ff;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(max-width:520px){.as-services{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.as-state i{animation:none}}