/** * Moonshop "deep space" backdrop — sparse starfield + subtle depth. * Inspired by the Diagram premium dark aesthetic (see diagram-figma on Webflow). * Apply: */ body.moonshop-deep-space { /* Void: near-black, slightly cool (prints still use foreground content). */ --moonshop-void: #050508; position: relative; overflow-x: hidden; } /* Pages that don’t already set a dark base (e.g. checkout) */ body.moonshop-deep-space:not(.diagram-phase1):not(.diagram-phase2) { background-color: var(--moonshop-void); color: #e8ecf4; } body.moonshop-deep-space::before, body.moonshop-deep-space::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; } /* Star layer: many tiny dots, varied opacity — sparse “Diagram” feel */ body.moonshop-deep-space::before { transform: translate3d(0, calc(var(--diagramParallaxY, 0) * -0.035px), 0); background: radial-gradient(1px 1px at 4% 8%, rgba(255, 255, 255, 0.62) 50%, transparent 52%), radial-gradient(1px 1px at 11% 22%, rgba(255, 255, 255, 0.38) 50%, transparent 52%), radial-gradient(1px 1px at 18% 6%, rgba(255, 255, 255, 0.48) 50%, transparent 52%), radial-gradient(1px 1px at 26% 34%, rgba(255, 255, 255, 0.33) 50%, transparent 52%), radial-gradient(1px 1px at 33% 12%, rgba(255, 255, 255, 0.55) 50%, transparent 52%), radial-gradient(1px 1px at 41% 45%, rgba(255, 255, 255, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 47% 19%, rgba(255, 255, 255, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 55% 52%, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 62% 28%, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 69% 61%, rgba(255, 255, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 76% 14%, rgba(255, 255, 255, 0.45) 50%, transparent 52%), radial-gradient(1px 1px at 84% 38%, rgba(255, 255, 255, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 92% 22%, rgba(255, 255, 255, 0.52) 50%, transparent 52%), radial-gradient(1px 1px at 96% 55%, rgba(255, 255, 255, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 7% 48%, rgba(255, 255, 255, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 14% 72%, rgba(255, 255, 255, 0.25) 50%, transparent 52%), radial-gradient(1px 1px at 22% 58%, rgba(255, 255, 255, 0.46) 50%, transparent 52%), radial-gradient(1px 1px at 31% 81%, rgba(255, 255, 255, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 38% 66%, rgba(255, 255, 255, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 45% 88%, rgba(255, 255, 255, 0.44) 50%, transparent 52%), radial-gradient(1px 1px at 52% 74%, rgba(255, 255, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 58% 92%, rgba(255, 255, 255, 0.36) 50%, transparent 52%), radial-gradient(1px 1px at 66% 78%, rgba(255, 255, 255, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 73% 95%, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 81% 68%, rgba(255, 255, 255, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 88% 84%, rgba(255, 255, 255, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 94% 72%, rgba(255, 255, 255, 0.33) 50%, transparent 52%), radial-gradient(1px 1px at 3% 92%, rgba(255, 255, 255, 0.2) 50%, transparent 52%), radial-gradient(1px 1px at 9% 38%, rgba(200, 215, 255, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 28% 96%, rgba(255, 220, 200, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 51% 4%, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 71% 42%, rgba(180, 210, 255, 0.3) 50%, transparent 52%), radial-gradient(2px 2px at 43% 26%, rgba(255, 255, 255, 0.5) 50%, transparent 55%), radial-gradient(2px 2px at 79% 48%, rgba(255, 255, 255, 0.35) 50%, transparent 55%), radial-gradient(1px 1px at 59% 8%, rgba(255, 255, 255, 0.58) 50%, transparent 52%); opacity: 0.92; } /* Depth: faint nebula + bottom “orbital” horizon (very subtle) */ body.moonshop-deep-space::after { transform: translate3d(0, calc(var(--diagramParallaxY, 0) * -0.02px), 0); background: radial-gradient(ellipse 140% 55% at 50% 118%, rgba(80, 110, 160, 0.07) 0%, transparent 48%), radial-gradient(ellipse 90% 45% at 18% 108%, rgba(217, 68, 50, 0.045) 0%, transparent 42%), radial-gradient(ellipse 70% 35% at 88% 102%, rgba(217, 68, 50, 0.035) 0%, transparent 40%), radial-gradient(ellipse 1200px 520px at 50% -8%, rgba(255, 255, 255, 0.02), transparent 55%), radial-gradient(820px 420px at 12% 18%, rgba(217, 68, 50, 0.045), transparent 58%), radial-gradient(760px 380px at 88% 24%, rgba(98, 154, 255, 0.05), transparent 58%); opacity: 0.88; } /* Checkout success: align top bar with dark space pages */ body.moonshop-deep-space .checkout-topnav { background: rgba(5, 6, 12, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(226, 232, 240, 0.12); } body.moonshop-deep-space .checkout-topnav .logo { color: #f2f4f8; } body.moonshop-deep-space .checkout-topnav .nav-link { color: rgba(226, 232, 240, 0.76); } body.moonshop-deep-space .checkout-topnav .nav-link:hover { color: #d94432; } body.moonshop-deep-space .checkout-topnav .nav-agent { background: rgba(255, 255, 255, 0.06); border-color: rgba(226, 232, 240, 0.14); color: rgba(242, 244, 248, 0.9); } body.moonshop-deep-space .checkout-topnav .nav-agent-soon { background: rgba(255, 255, 255, 0.04); color: rgba(226, 232, 240, 0.55); } body.moonshop-deep-space .checkout-topnav .nav-cta { background: #d94432; color: #fff; } body.moonshop-deep-space .checkout-topnav .nav-user { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(226, 232, 240, 0.12); color: rgba(242, 244, 248, 0.88); } body.moonshop-deep-space .checkout-topnav .nav-logout { background: transparent; border: 1px solid rgba(226, 232, 240, 0.22); color: rgba(242, 244, 248, 0.85); }