Meridian — Enterprise Maintenance

<main class="me-wrap"><div class="me-card">
  <header class="me-top"><a class="me-brand" href="#"><span class="me-mark" aria-hidden="true">◆</span> Meridian Systems</a><span class="me-state">Scheduled maintenance</span></header>
  <h1 class="me-h1">Planned maintenance window in progress</h1>
  <p class="me-lead">As part of our committed reliability programme, Meridian is performing scheduled infrastructure maintenance. Service will be fully restored within the published window below.</p>
  <div class="me-grid">
    <div class="me-cell"><span>Window</span><b>14:00–16:00 UTC</b></div>
    <div class="me-cell"><span>Status</span><b class="me-amber">In progress</b></div>
    <div class="me-cell"><span>SLA impact</span><b>Within agreement</b></div>
    <div class="me-cell"><span>Data</span><b class="me-green">Safe &amp; intact</b></div>
  </div>
  <div class="me-support">
    <h2 class="me-h2">Need assistance during the window?</h2>
    <ul class="me-contacts">
      <li><b>Enterprise support</b><a href="mailto:enterprise@meridian.io">enterprise@meridian.io</a></li>
      <li><b>Priority hotline</b><a href="tel:+18005551234">+1 (800) 555-1234</a></li>
    </ul>
  </div>
  <div class="me-actions"><a class="me-btn" href="#">Open status page</a></div>
  <footer class="me-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}
.me-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 20px;background:#f1f5f9;color:#0f172a;font-family:'Inter',system-ui,sans-serif}
.me-card{width:100%;max-width:620px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:34px 34px;box-shadow:0 12px 44px rgba(15,23,42,.08)}
.me-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid #eef2f6}
.me-brand{font-family:'Sora',sans-serif;font-weight:800;font-size:1.16rem;color:#1e3a8a;text-decoration:none;display:flex;align-items:center;gap:8px}
.me-state{font-size:.76rem;font-weight:700;color:#b45309;background:#fef3c7;padding:6px 12px;border-radius:999px}
.me-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;line-height:1.2;margin:0 0 12px}
.me-lead{color:#475569;font-size:1rem;line-height:1.65;margin:0 0 24px}
.me-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}
.me-cell{padding:14px 16px;border-radius:12px;background:#f8fafc;border:1px solid #eef2f6}
.me-cell span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:4px}
.me-cell b{font-family:'Sora',sans-serif;font-size:1.04rem;color:#0f172a}
.me-amber{color:#b45309}.me-green{color:#15803d}
.me-support{padding:20px;border-radius:14px;background:#f8fafc;border:1px solid #eef2f6;margin-bottom:24px}
.me-h2{font-size:1rem;font-weight:700;margin:0 0 14px;color:#1e293b}
.me-contacts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.me-contacts li{display:flex;flex-direction:column;gap:3px}
.me-contacts b{font-size:.82rem;color:#64748b;font-weight:600}
.me-contacts a{color:#1e3a8a;font-weight:700;text-decoration:none}.me-contacts a:hover{text-decoration:underline}
.me-actions{text-align:center}
.me-btn{display:inline-block;padding:13px 30px;border-radius:11px;background:#1e3a8a;color:#fff;font-weight:700;text-decoration:none;transition:.15s}
.me-btn:hover{background:#1e40af}.me-btn:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.me-foot{text-align:center;margin-top:26px;padding-top:18px;border-top:1px solid #eef2f6}
.x-by{font-size:.82rem;color:#94a3b8}.x-by a{color:#1e3a8a;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(max-width:520px){.me-grid,.me-contacts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.me-btn{transition:none}}