BrightCart — Online Store Coming Soon

<main class="bk-wrap"><header class="bk-nav"><a class="bk-brand" href="#">🛍 BrightCart</a><span class="bk-pill">Grand opening soon</span></header>
 <section class="bk-hero">
  <span class="bk-badge">Get 20% off everything on launch day</span>
  <h1>Something good is in the basket.</h1>
  <p class="bk-lead">BrightCart opens its doors in a few weeks with curated home, lifestyle and tech picks. Drop your email to lock in your launch-day discount code.</p>
  <form class="bk-form" novalidate><label class="visually-hidden" for="bk-e">Email</label>
   <input id="bk-e" type="email" placeholder="you@email.com" autocomplete="email" required><button type="submit">Claim 20% off</button></form>
  <p class="bk-note">🔒 We'll only email you your code and the launch date.</p>
  <div class="bk-count" role="group" aria-label="Opening in"><div><b>14</b><span>Days</span></div><div><b>06</b><span>Hrs</span></div><div><b>22</b><span>Min</span></div></div>
  <div class="bk-teaser" aria-hidden="true"><div class="bk-prod"><span>🪴</span></div><div class="bk-prod"><span>🎧</span></div><div class="bk-prod"><span>🕯</span></div><div class="bk-prod"><span>👜</span></div></div>
 </section>
 <footer class="bk-foot"><div class="bk-trust"><span>✓ Free shipping</span><span>✓ 30-day returns</span><span>✓ Secure checkout</span></div><span class="x-by">Powered by <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></span></footer></main>

*{box-sizing:border-box}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.bk-wrap{min-height:100vh;background:linear-gradient(170deg,#f3fbf5,#e7f7ec);color:#143222;font-family:'Inter',system-ui,sans-serif;display:flex;flex-direction:column;padding:30px 22px}
.bk-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;max-width:900px;margin:0 auto;width:100%}
.bk-brand{font-weight:800;font-size:1.2rem;color:#16a34a;text-decoration:none}
.bk-pill{padding:7px 14px;border-radius:999px;font-size:.78rem;font-weight:700;color:#16a34a;background:#d6f5e0}
.bk-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:680px;margin:0 auto;width:100%;padding:40px 0}
.bk-badge{display:inline-block;margin-bottom:20px;padding:9px 18px;border-radius:999px;font-size:.86rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#16a34a,#34d399)}
.bk-hero h1{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 16px}
.bk-lead{color:#4a6353;font-size:1.08rem;line-height:1.6;max-width:48ch;margin:0 0 28px}
.bk-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:460px;width:100%}
.bk-form input{flex:1;min-width:180px;padding:14px 16px;border-radius:13px;border:2px solid #b9e6c8;background:#fff;font:inherit;font-size:1rem;color:#143222}
.bk-form input:focus{outline:none;border-color:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.16)}
.bk-form button{padding:14px 24px;border:0;border-radius:13px;font:inherit;font-weight:700;color:#fff;background:#16a34a;cursor:pointer;transition:transform .2s,box-shadow .2s}
.bk-form button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(22,163,74,.3)}.bk-form button:focus-visible{outline:3px solid #86e0a4;outline-offset:2px}
.bk-note{margin:13px 0 0;font-size:.84rem;color:#5e7768}
.bk-count{display:flex;gap:14px;justify-content:center;margin:30px 0}
.bk-count div{background:#fff;border:1px solid #c9ecd5;border-radius:14px;padding:14px 18px;min-width:74px}
.bk-count b{display:block;font-family:'Sora',sans-serif;font-size:1.7rem;font-weight:800;color:#16a34a;line-height:1}
.bk-count span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#7d9488;margin-top:4px;display:block}
.bk-teaser{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.bk-prod{width:84px;height:84px;border-radius:18px;background:#fff;border:1px solid #d6efdd;display:grid;place-items:center;font-size:2rem;box-shadow:0 8px 22px rgba(22,163,74,.1)}
.bk-foot{max-width:900px;margin:0 auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:24px}
.bk-trust{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;font-size:.84rem;font-weight:600;color:#3f6650}
.x-by{font-size:.83rem;color:#6b8576}.x-by a{color:#16a34a;font-weight:700;text-decoration:none}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.bk-form button{transition:none}}

(function(){var f=document.querySelector('.bk-form');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='#dc2626';return;}f.innerHTML='<p style="margin:0;color:#16a34a;font-weight:700">✓ Code reserved! Check your email on launch day.</p>';});})();