Calm — Minimal Maintenance

<main class="cm-wrap"><div class="cm-inner">
  <span class="cm-badge"><i class="cm-dot" aria-hidden="true"></i> Scheduled maintenance</span>
  <h1 class="cm-h1">We're making things better.</h1>
  <p class="cm-lead">Our site is down for a short scheduled upgrade. Everything will be back to normal shortly — thanks for your patience.</p>
  <div class="cm-eta"><span>Estimated return</span><b>Today, 14:30 UTC</b></div>
  <form class="cm-notify" data-notify novalidate>
    <label class="visually-hidden" for="cm-e">Email</label>
    <input id="cm-e" type="email" placeholder="Email me when it's back" autocomplete="email" required>
    <button type="submit">Notify me</button>
  </form>
  <p class="cm-help">Need urgent help? <a href="mailto:support@calm.app">support@calm.app</a></p>
  <footer class="cm-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}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.cm-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 22px;background:#f8fafc;color:#0f172a;font-family:'Inter',system-ui,sans-serif}
.cm-inner{width:100%;max-width:560px;text-align:center}
.cm-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:700;color:#475569;background:#fff;border:1px solid #e2e8f0;margin-bottom:26px}
.cm-dot{width:9px;height:9px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.16);animation:cmP 2.2s infinite}
@keyframes cmP{0%,100%{opacity:1}50%{opacity:.4}}
.cm-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(2rem,6vw,3.2rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 16px}
.cm-lead{color:#64748b;font-size:1.08rem;line-height:1.65;max-width:46ch;margin:0 auto 30px}
.cm-eta{display:inline-flex;flex-direction:column;gap:3px;padding:14px 28px;border-radius:14px;background:#fff;border:1px solid #e2e8f0;margin-bottom:30px}
.cm-eta span{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8}
.cm-eta b{font-family:'Sora',sans-serif;font-size:1.2rem;color:#0f172a}
.cm-notify{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:420px;margin:0 auto}
.cm-notify input{flex:1;min-width:200px;padding:13px 16px;border:1.5px solid #cbd5e1;border-radius:12px;font:inherit;font-size:.97rem;color:#0f172a;background:#fff}
.cm-notify input:focus{outline:none;border-color:#0f172a;box-shadow:0 0 0 3px rgba(15,23,42,.12)}
.cm-notify button{padding:13px 22px;border:0;border-radius:12px;background:#0f172a;color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:.15s}
.cm-notify button:hover{background:#1e293b}.cm-notify button:focus-visible{outline:3px solid #94a3b8;outline-offset:2px}
.cm-help{margin:22px 0 0;font-size:.9rem;color:#64748b}.cm-help a{color:#0f172a;font-weight:600}
.cm-foot{margin-top:30px}.x-by{font-size:.82rem;color:#94a3b8}.x-by a{color:#0f172a;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.cm-dot{animation:none}.cm-notify button{transition:none}}

(function(){var f=document.querySelector('[data-notify]');if(!f)return;f.addEventListener('submit',function(e){e.preventDefault();var i=f.querySelector('input');if(!i.value||!i.checkValidity()){i.focus();i.style.borderColor='#ef4444';return;}f.innerHTML='<p style="margin:0;font-weight:700">✓ We\'ll email you the moment we\'re back.</p>';});})();