BrightCart — Store Maintenance

<main class="bm-wrap"><div class="bm-inner">
  <a class="bm-brand" href="#">🛍 BrightCart</a>
  <div class="bm-emoji" aria-hidden="true">🧰</div>
  <h1 class="bm-h1">We're restocking the shelves</h1>
  <p class="bm-lead">Our store is briefly closed for maintenance and a fresh new look. We'll reopen very soon — and there's a treat waiting for you.</p>
  <div class="bm-promo">🎁 Get <b>15% off</b> your first order when we reopen — sign up below</div>
  <form class="bm-notify" data-notify novalidate>
    <label class="visually-hidden" for="bm-e">Email</label>
    <input id="bm-e" type="email" placeholder="you@email.com" autocomplete="email" required>
    <button type="submit">Email me + 15% off</button>
  </form>
  <div class="bm-eta">🕑 Reopening today around <b>15:00</b></div>
  <div class="bm-trust"><span>✓ Secure checkout</span><span>✓ Free returns</span><span>✓ 24/7 support</span></div>
  <footer class="bm-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)}
.bm-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 22px;background:linear-gradient(170deg,#f0fdf4,#dcfce7);color:#143222;font-family:'Inter',system-ui,sans-serif}
.bm-inner{width:100%;max-width:520px;text-align:center}
.bm-brand{display:inline-block;font-family:'Sora',sans-serif;font-weight:800;font-size:1.2rem;color:#16a34a;text-decoration:none;margin-bottom:22px}
.bm-emoji{font-size:3.4rem;margin-bottom:14px}
.bm-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(1.9rem,5.5vw,2.8rem);margin:0 0 14px}
.bm-lead{color:#4a6353;font-size:1.06rem;line-height:1.65;max-width:44ch;margin:0 auto 22px}
.bm-promo{padding:13px 22px;border-radius:14px;background:#fff;border:1px dashed #86efac;font-size:.98rem;margin-bottom:24px;display:inline-block}
.bm-promo b{color:#16a34a}
.bm-notify{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:440px;margin:0 auto}
.bm-notify input{flex:1;min-width:200px;padding:13px 16px;border:2px solid #bbf7d0;border-radius:13px;font:inherit;font-size:.97rem;color:#143222;background:#fff}
.bm-notify input:focus{outline:none;border-color:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.16)}
.bm-notify button{padding:13px 22px;border:0;border-radius:13px;background:#16a34a;color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s}
.bm-notify button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(22,163,74,.3)}.bm-notify button:focus-visible{outline:3px solid #86efac;outline-offset:2px}
.bm-eta{margin:22px 0 0;font-size:.96rem;color:#3f6650}.bm-eta b{color:#15803d}
.bm-trust{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:18px;font-size:.84rem;font-weight:600;color:#3f6650}
.bm-foot{margin-top:28px}.x-by{font-size:.82rem;color:#6b8576}.x-by a{color:#16a34a;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.bm-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>';});})();