Velvet — Premium Maintenance

<main class="vl-wrap"><div class="vl-orb" aria-hidden="true"></div><div class="vl-inner">
  <span class="vl-mark">VELVET</span>
  <div class="vl-mid">
    <span class="vl-badge"><i aria-hidden="true"></i> Temporarily offline</span>
    <h1 class="vl-h1">Refining every detail.</h1>
    <p class="vl-lead">We've stepped away briefly to polish the experience. Velvet will return shortly, better than before.</p>
    <div class="vl-eta"><span>Back by</span><b>16:00 UTC</b></div>
    <a class="vl-link" href="mailto:concierge@velvet.studio">concierge@velvet.studio</a>
  </div>
  <footer class="vl-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}
.vl-wrap{position:relative;min-height:100vh;display:flex;align-items:stretch;justify-content:center;padding:40px 28px;background:#0c0a13;color:#ece7f5;font-family:'Inter',system-ui,sans-serif;overflow:hidden}
.vl-orb{position:absolute;width:520px;height:520px;border-radius:50%;top:-160px;left:50%;transform:translateX(-50%);background:radial-gradient(circle at 40% 35%,rgba(192,132,252,.5),rgba(99,102,241,.2) 55%,transparent 72%);filter:blur(20px);animation:vlBreath 9s ease-in-out infinite}
@keyframes vlBreath{0%,100%{transform:translateX(-50%) scale(1);opacity:.85}50%{transform:translateX(-50%) scale(1.08);opacity:1}}
.vl-inner{position:relative;z-index:1;width:100%;max-width:560px;display:flex;flex-direction:column;text-align:center}
.vl-mark{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:.42em;font-size:1rem;color:#d8c7f5}
.vl-mid{flex:1;display:flex;flex-direction:column;justify-content:center}
.vl-badge{display:inline-flex;align-items:center;gap:9px;align-self:center;padding:8px 16px;border-radius:999px;font-size:.8rem;font-weight:600;color:#d8b4fe;background:rgba(192,132,252,.1);border:1px solid rgba(192,132,252,.28);margin-bottom:28px}
.vl-badge i{width:8px;height:8px;border-radius:50%;background:#c084fc;box-shadow:0 0 0 5px rgba(192,132,252,.16)}
.vl-h1{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(2.2rem,6vw,3.6rem);letter-spacing:-.02em;margin:0 0 18px;background:linear-gradient(120deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vl-lead{color:#b0a6c8;font-size:1.1rem;line-height:1.65;max-width:42ch;margin:0 auto 32px}
.vl-eta{display:inline-flex;flex-direction:column;gap:3px;align-self:center;padding:14px 30px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);margin-bottom:24px}
.vl-eta span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#8f86a8}
.vl-eta b{font-family:'Sora',sans-serif;font-size:1.3rem;color:#fff}
.vl-link{color:#c4b5fd;font-size:.92rem;text-decoration:none;font-weight:600}.vl-link:hover{text-decoration:underline}.vl-link:focus-visible{outline:2px solid #c084fc;outline-offset:3px}
.vl-foot{padding-top:20px}.x-by{font-size:.8rem;color:#8f86a8}.x-by a{color:#c4b5fd;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.vl-orb{animation:none}}