Sunny — Friendly Maintenance

<main class="su-wrap"><div class="su-inner">
  <div class="su-art" aria-hidden="true"><div class="su-sun"></div><div class="su-cloud su-c1"></div><div class="su-cloud su-c2"></div><div class="su-gear"></div></div>
  <h1 class="su-h1">We'll be right back!</h1>
  <p class="su-lead">PixelNest is taking a quick break for some maintenance. Grab a coffee — we'll be up and running again very soon. ☕</p>
  <div class="su-eta">⏱ Back in about <b>30 minutes</b></div>
  <form class="su-notify" data-notify novalidate>
    <label class="visually-hidden" for="su-e">Email</label>
    <input id="su-e" type="email" placeholder="Tell me when you're back" autocomplete="email" required>
    <button type="submit">Notify me</button>
  </form>
  <p class="su-help">Questions? Reach us at <a href="mailto:hello@pixelnest.app">hello@pixelnest.app</a></p>
  <footer class="su-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)}
.su-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 22px;background:linear-gradient(170deg,#fffbeb,#fef3c7);color:#4a3c12;font-family:'Inter',system-ui,sans-serif}
.su-inner{width:100%;max-width:520px;text-align:center}
.su-art{position:relative;width:180px;height:130px;margin:0 auto 28px}
.su-sun{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fde047,#f59e0b);box-shadow:0 0 0 10px rgba(245,158,11,.18);animation:suSpin 22s linear infinite}
.su-gear{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;border:9px dashed #fff;opacity:.7;animation:suSpin 8s linear infinite}
.su-cloud{position:absolute;height:26px;border-radius:999px;background:#fff;box-shadow:0 6px 16px rgba(245,158,11,.18)}
.su-c1{width:80px;bottom:20px;left:6px;animation:suFloat 5s ease-in-out infinite}
.su-c2{width:64px;bottom:6px;right:8px;animation:suFloat 6s ease-in-out infinite reverse}
@keyframes suSpin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes suFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.su-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(2rem,6vw,2.9rem);margin:0 0 14px;color:#3a2f0e}
.su-lead{color:#7a6420;font-size:1.06rem;line-height:1.65;max-width:42ch;margin:0 auto 24px}
.su-eta{display:inline-block;padding:12px 24px;border-radius:14px;background:#fff;border:1px solid #fde68a;font-size:.98rem;margin-bottom:26px}
.su-eta b{color:#d97706}
.su-notify{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:420px;margin:0 auto}
.su-notify input{flex:1;min-width:200px;padding:13px 16px;border:2px solid #fcd34d;border-radius:13px;font:inherit;font-size:.97rem;color:#4a3c12;background:#fff}
.su-notify input::placeholder{color:#caa83f}
.su-notify input:focus{outline:none;border-color:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.18)}
.su-notify button{padding:13px 24px;border:0;border-radius:13px;background:#f59e0b;color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s}
.su-notify button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(245,158,11,.32)}.su-notify button:focus-visible{outline:3px solid #fcd34d;outline-offset:2px}
.su-help{margin:22px 0 0;font-size:.9rem;color:#7a6420}.su-help a{color:#d97706;font-weight:600}
.su-foot{margin-top:28px}.x-by{font-size:.82rem;color:#a8893a}.x-by a{color:#d97706;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.su-sun,.su-gear,.su-cloud{animation:none}.su-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>';});})();