/* MOGLIBONUS — 3 selectable design themes (set via ). Loaded after main.css + tailwind.css so these overrides win. Temporary: a floating picker lets us compare; once a winner is chosen it becomes the default + picker removed. */ /* ════════════ PREMIUM — refined dark, blue+gold, soft glows ════════════ */ [data-theme="premium"] body{ background-color:#0a0e16 !important; background-image: radial-gradient(58% 48% at 5% -5%, rgba(43,144,240,.20), transparent 60%), radial-gradient(52% 44% at 97% -3%, rgba(61,131,247,.14), transparent 58%), radial-gradient(80% 60% at 50% 116%, rgba(43,144,240,.13), transparent 62%), linear-gradient(180deg,#0c1019,#080b11 55%,#06080d) !important; background-attachment:scroll !important; } [data-theme="premium"] .surface{ background:linear-gradient(165deg,#1a222e 0%,#10151d 70%,#0c1016 100%) !important; } [data-theme="premium"] .card{ border-radius:15px; border:1px solid rgba(255,255,255,.08); box-shadow:0 14px 40px -24px rgba(0,0,0,.8); } [data-theme="premium"] .card:hover{ border-color:rgba(61,131,247,.5); box-shadow:0 0 0 1px rgba(61,131,247,.18),0 18px 44px -22px rgba(0,0,0,.85); transform:translateY(-2px); } [data-theme="premium"] .btn-mint{ background:linear-gradient(180deg,#5fa0ff,#3d83f7) !important; color:#ffffff !important; border:0 !important; box-shadow:0 8px 20px -8px rgba(61,131,247,.5); border-radius:.7rem; font-weight:800; } [data-theme="premium"] .btn-mint:hover{ filter:brightness(1.06); transform:translateY(-1px); } [data-theme="premium"] .btn-ghost{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:.7rem; } [data-theme="premium"] .btn-ghost:hover{ border-color:rgba(56,168,255,.55); color:#fff; } [data-theme="premium"] .header-mint-glow::after{ background:radial-gradient(60% 120% at 30% 0,rgba(43,144,240,.5),transparent 70%),radial-gradient(60% 120% at 70% 0,rgba(61,131,247,.4),transparent 70%) !important; } /* ════════════ CLEAN — flat, crisp, minimal, more breathing room ════════════ */ [data-theme="clean"] body{ background-color:#0a0c11 !important; background-image: radial-gradient(72% 42% at 50% -12%, rgba(56,168,255,.10), transparent 66%), linear-gradient(180deg,#0c0f15,#0a0c11) !important; background-attachment:scroll !important; } [data-theme="clean"] .surface{ background:#11161d !important; } [data-theme="clean"] .card{ border-radius:12px; border:1px solid rgba(255,255,255,.1); box-shadow:none; } [data-theme="clean"] .card:hover{ border-color:rgba(56,168,255,.45); box-shadow:none; transform:none; } [data-theme="clean"] .btn-mint{ background:#3d83f7 !important; color:#ffffff !important; border:0 !important; border-radius:.55rem; font-weight:700; box-shadow:none; } [data-theme="clean"] .btn-mint:hover{ background:#5fa0ff !important; transform:none; filter:none; } [data-theme="clean"] .btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.14); border-radius:.55rem; } [data-theme="clean"] .btn-ghost:hover{ border-color:rgba(255,255,255,.42); color:#fff; } [data-theme="clean"] .header-mint-glow::after{ background:none !important; } [data-theme="clean"] header.header-mint-glow{ border-bottom:1px solid rgba(255,255,255,.09); } /* ════════════ NEON — vivid gaming, glowing glass ════════════ */ [data-theme="neon"] body{ background-color:#0a0a0e !important; background-image: radial-gradient(45% 35% at 4% -8%, rgba(61,131,247,.06), transparent 78%), radial-gradient(42% 38% at 98% -5%, rgba(84,180,255,.06), transparent 80%), linear-gradient(180deg,#101015,#0a0a0e) !important; background-attachment:scroll !important; } [data-theme="neon"] .surface{ background:#1c1e26 !important; backdrop-filter:none; } [data-theme="neon"] .card{ border-radius:12px; border:1px solid rgba(255,255,255,.08); box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 16px -12px rgba(0,0,0,.5); } [data-theme="neon"] .card:hover{ border-color:rgba(255,255,255,.18); box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 12px 24px -10px rgba(0,0,0,.5); transform:translateY(-2px); } [data-theme="neon"] .btn-mint{ background:#3d83f7 !important; color:#ffffff !important; border:0 !important; border-radius:8px; font-weight:700; box-shadow:0 4px 12px -6px rgba(61,131,247,.35); } [data-theme="neon"] .btn-mint:hover{ background:#5fa0ff !important; filter:none; box-shadow:0 6px 14px -6px rgba(61,131,247,.4); transform:translateY(-1px); } [data-theme="neon"] .btn-ghost{ background:#2a2d37; border:1px solid rgba(255,255,255,.08); border-radius:8px; color:#cdd2dc; } [data-theme="neon"] .btn-ghost:hover{ background:#34383f; border-color:rgba(255,255,255,.16); color:#fff; box-shadow:none; } [data-theme="neon"] .header-mint-glow::after{ background:radial-gradient(40% 100% at 25% 0,rgba(56,168,255,.18),transparent 80%),radial-gradient(40% 100% at 75% 0,rgba(61,131,247,.14),transparent 80%) !important; height:1px; } /* ════════════ Header points pill (balance display — all pages, all themes) ════════════ */ .hdr-points{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:12px;background:linear-gradient(180deg,rgba(61,131,247,.10),rgba(61,131,247,.03));border:1px solid rgba(61,131,247,.22);box-shadow:none;font-family:'Sora',system-ui,sans-serif;white-space:nowrap;line-height:1} .hdr-points i{color:#3d83f7;font-size:14px} .hdr-points b{color:#fff;font-weight:800;font-size:14px} .hdr-points .hdr-points-l{color:rgba(255,255,255,.5);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em} @media(max-width:680px){.hdr-points .hdr-points-l{display:none}.hdr-points{padding:7px 11px}} /* center it in the header (top center, like a wallet balance) on tablet+ ; header is position:sticky so it's the containing block */ @media(min-width:768px){.hdr-points{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}}