/* =========================================================== WOLF MC — shared stylesheet (v3) Theme is switched per-page via [data-theme] on =========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap'); :root{ --bg:#000000; --bg-soft:#000000; --panel:#000000; --panel-2:#030303; --line:rgba(255,255,255,.1); --text:#f1ecf9; --text-dim:#a199b3; --text-faint:#6d6680; /* default = purple (main site) */ --accent:#a855f7; --accent-2:#7c3aed; --accent-dark:#3b0f66; --accent-glow:rgba(168,85,247,.45); --accent-rgb:168,85,247; } html[data-theme="boxpvp"]{ --accent:#fb923c; --accent-2:#ea580c; --accent-dark:#5c2400; --accent-glow:rgba(251,146,60,.45); --accent-rgb:251,146,60; } html[data-theme="lifesteal"]{ --accent:#f43f5e; --accent-2:#be123c; --accent-dark:#4c0519; --accent-glow:rgba(244,63,94,.45); --accent-rgb:244,63,94; } html[data-theme="practice"]{ --accent:#38bdf8; --accent-2:#0284c7; --accent-dark:#022c40; --accent-glow:rgba(56,189,248,.45); --accent-rgb:56,189,248; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ background:#000000; color:var(--text); font-family:'Inter', 'Segoe UI', sans-serif; min-height:100vh; overflow-x:hidden; position:relative; } /* pure black backdrop, flat grey square grid only — no colour gradient */ .voxel-bg{ position:fixed; inset:0; z-index:-2; background:#000000; } .glow-orb{ display:none; } .glow-orb.one{ width:520px; height:520px; background:var(--accent); top:-200px; left:-140px;} .glow-orb.two{ width:420px; height:420px; background:var(--accent-2); bottom:-180px; right:-120px;} a{color:inherit; text-decoration:none;} ul{list-style:none;} img{max-width:100%; display:block;} button{font-family:'Inter',sans-serif; cursor:pointer;} .wrap{max-width:1180px; margin:0 auto; padding:0 24px;} /* -------- headings — normal typeface, accent-coloured depth shadow, static -------- */ h1, h2, h3, h4, .sticker{ font-family:'Inter', sans-serif; font-weight:800; letter-spacing:-.2px; } .sticker, .section-head h2, .card h3, .mini-card h4, .store-tile h3, .step-card h4, .feat-card h4, .status-card h3{ color:var(--text); text-shadow: 0 1px 0 rgba(var(--accent-rgb),.9), 0 2px 0 rgba(var(--accent-rgb),.75), 0 3px 0 rgba(var(--accent-rgb),.6), 0 4px 8px rgba(0,0,0,.65), 0 0 22px rgba(var(--accent-rgb),.4); } .hero h1.sticker{ text-shadow: 0 1px 0 rgba(var(--accent-rgb),.95), 0 2px 0 rgba(var(--accent-rgb),.85), 0 3px 0 rgba(var(--accent-rgb),.72), 0 4px 0 rgba(var(--accent-rgb),.6), 0 5px 0 rgba(var(--accent-rgb),.48), 0 6px 10px rgba(0,0,0,.7), 0 0 30px rgba(var(--accent-rgb),.5); } /* -------- brand wordmark "WOLF MC" — bold gradient, normal typeface -------- */ .brand-glow{ font-family:'Inter', sans-serif; font-weight:900; letter-spacing:-.5px; background:linear-gradient(90deg,#e8b8ff,#c084fc 30%,#e879f9 55%,#f472b6 80%,#e8b8ff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 8px rgba(232,121,249,.3), 0 0 18px rgba(168,85,247,.22); display:inline-block; } .brand-glow.hero-size{font-size:clamp(3.4rem,11vw,7.2rem); line-height:1; letter-spacing:1px;} .brand-glow.small{font-size:1.05rem; letter-spacing:.2px;} /* -------- top bar -------- */ .topbar{ position:sticky; top:0; z-index:50; background:rgba(0,0,0,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);} .topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1180px; margin:0 auto; gap:16px;} .brand{display:flex; align-items:center; gap:10px;} .brand img{width:36px; height:36px; border-radius:8px; box-shadow:0 0 16px var(--accent-glow);} .nav-links{display:flex; gap:4px; align-items:center; background:var(--panel); border:1px solid var(--line); padding:5px; border-radius:99px;} .nav-links a{display:flex; align-items:center; gap:7px; font-size:.82rem; font-weight:700; color:var(--text-dim); padding:9px 15px; border-radius:99px; transition:.18s;} .nav-links a svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;} .nav-links a:hover{color:var(--text); background:rgba(255,255,255,.07);} .nav-links a.active{color:#0a0710; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 4px 14px rgba(var(--accent-rgb),.4);} .topbar-actions{display:flex; align-items:center; gap:10px;} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:9px; font-weight:600; font-size:.85rem; border:1px solid transparent; transition:.18s ease; white-space:nowrap;} .btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a0710; box-shadow:0 6px 18px rgba(var(--accent-rgb),.35);} .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(var(--accent-rgb),.45);} .btn-ghost{background:rgba(255,255,255,.04); border-color:var(--line); color:var(--text);} .btn-ghost:hover{border-color:var(--accent); color:var(--accent);} .btn-sm{padding:7px 12px; font-size:.78rem;} .btn-block{width:100%;} .btn-danger{background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(239,68,68,.35);} .btn-danger:hover{background:rgba(239,68,68,.2);} /* -------- currency switcher -------- */ .curr-switch{position:relative;} .curr-btn{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.04); border:1px solid var(--line); padding:8px 12px; border-radius:9px; font-size:.82rem; font-weight:600; color:var(--text);} .curr-btn:hover{border-color:var(--accent);} .curr-menu{ position:absolute; right:0; top:calc(100% + 8px); background:var(--panel-2); border:1px solid var(--line); border-radius:10px; min-width:210px; padding:6px; display:none; flex-direction:column; gap:2px; box-shadow:0 20px 40px rgba(0,0,0,.6); z-index:60; max-height:320px; overflow-y:auto;} .curr-menu.open{display:flex;} .curr-opt{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; font-size:.84rem; color:var(--text-dim);} .curr-opt:hover{background:rgba(var(--accent-rgb),.12); color:var(--text);} .curr-opt.active{color:var(--accent); background:rgba(var(--accent-rgb),.12);} .curr-flag{font-size:1.05rem;} .burger{display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--text);} /* -------- hero -------- */ .hero{ padding:96px 24px 56px; text-align:center; position:relative;} .eyebrow{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:rgba(var(--accent-rgb),.08); color:var(--accent); font-size:.76rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; padding:7px 14px; border-radius:99px; margin-bottom:22px;} .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent);} .hero h1{font-size:clamp(2.6rem,6vw,4.8rem); line-height:1.03; margin-bottom:18px;} .hero p.lead{color:var(--text-dim); font-size:1.08rem; max-width:600px; margin:0 auto 34px; line-height:1.6;} .hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:36px;} .ip-pill{ display:inline-flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); padding:10px 18px; border-radius:11px; font-family:'JetBrains Mono','Inter',monospace;} .ip-pill b{color:var(--accent);} .ip-pill button{background:none; border:none; color:var(--text-dim); font-size:.75rem;} .ip-pill button:hover{color:var(--accent);} /* -------- quick-jump subnav (moved out of the top bar, sits under the hero) -------- */ .subnav{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:-20px auto 0; padding-bottom:46px;} .subnav-pill{ background:var(--panel); border:1px solid var(--line); color:var(--text-dim); font-size:.82rem; font-weight:600; padding:9px 18px; border-radius:99px; transition:.18s;} .subnav-pill:hover{border-color:var(--accent); color:var(--text); transform:translateY(-2px);} /* -------- store switcher (jump between Lifesteal / BoxPvP / Practice) -------- */ .store-switch{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0 auto 34px;} .store-switch-pill{display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); padding:9px 18px; border-radius:99px; font-size:.83rem; font-weight:700; color:var(--text-dim); transition:.18s;} .store-switch-pill:hover{border-color:rgba(var(--accent-rgb),.5); color:var(--text); transform:translateY(-2px);} .store-switch-pill.is-active{border-color:var(--accent); color:var(--text); background:rgba(var(--accent-rgb),.12);} .ssdot{width:8px; height:8px; border-radius:50%; flex-shrink:0;} /* -------- section shell -------- */ .section{padding:70px 24px;} .section-head{text-align:center; max-width:640px; margin:0 auto 46px;} .section-tag{color:var(--accent); font-weight:700; font-size:.78rem; letter-spacing:2px; text-transform:uppercase; display:block; margin-bottom:10px;} .section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:12px;} .section-head p{color:var(--text-dim); line-height:1.6;} /* -------- store cards -------- */ .store-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:22px; max-width:1180px; margin:0 auto;} .card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 22px; display:flex; flex-direction:column; transition:.22s ease; box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03);} .card:hover{border-color:rgba(var(--accent-rgb),.5); transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.5);} .card.popular{border-color:var(--accent); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.4), 0 16px 40px rgba(var(--accent-rgb),.18);} .badge{ position:absolute; top:-12px; left:22px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a0710; font-size:.68rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:5px 12px; border-radius:99px;} .card h3{font-size:1.3rem; margin-bottom:4px;} .card .tag-line{color:var(--text-faint); font-size:.82rem; margin-bottom:16px;} .price{font-family:'JetBrains Mono','Inter',monospace; font-size:2.1rem; font-weight:600; color:var(--accent); margin-bottom:4px;} .price small{font-size:.95rem; color:var(--text-faint); font-weight:500;} .perks{flex:1; margin-bottom:20px;} .perks li{ display:flex; gap:9px; align-items:flex-start; font-size:.85rem; color:var(--text-dim); padding:5px 0; line-height:1.4;} .perks li::before{content:"◆"; color:var(--accent); font-size:.65rem; margin-top:5px;} .perk-divider{font-size:.68rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-faint); margin:10px 0 4px; font-weight:700;} .coin-bonus{ display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:600; color:#facc15; background:rgba(250,204,21,.08); border:1px solid rgba(250,204,21,.25); padding:6px 10px; border-radius:8px; margin-bottom:14px; width:fit-content;} .coin-bonus svg{width:14px; height:14px; flex-shrink:0;} .mini-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; max-width:1180px; margin:0 auto;} .mini-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:10px; transition:.2s; box-shadow:0 8px 20px rgba(0,0,0,.5);} .mini-card:hover{border-color:rgba(var(--accent-rgb),.5); transform:translateY(-3px);} .mini-card h4{font-size:1.02rem;} .mini-card .price{font-size:1.5rem; margin:0;} .mini-card p{color:var(--text-faint); font-size:.78rem; line-height:1.4;} /* -------- currency exchanger widget -------- */ .exchanger{ max-width:640px; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:0 20px 50px rgba(0,0,0,.4);} .exchanger-row{display:flex; align-items:center; gap:14px; margin-bottom:16px;} .exchanger-field{flex:1;} .exchanger-field label{font-size:.74rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; display:block;} .exchanger-field input, .exchanger-field select{ width:100%; background:var(--bg-soft); border:1px solid var(--line); color:var(--text); padding:12px 14px; border-radius:10px; font-family:'JetBrains Mono','Inter',monospace; font-size:1rem;} .exchanger-field select{cursor:pointer;} .exchanger-swap{ background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.4); color:var(--accent); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; margin-top:20px; flex-shrink:0; transition:.2s;} .exchanger-swap:hover{transform:rotate(180deg);} .exchanger-result{ background:rgba(var(--accent-rgb),.08); border:1px dashed rgba(var(--accent-rgb),.4); border-radius:12px; padding:16px; text-align:center; font-family:'JetBrains Mono','Inter',monospace; font-size:1.5rem; color:var(--accent);} .exchanger-note{text-align:center; color:var(--text-faint); font-size:.72rem; margin-top:10px;} /* -------- FAQ -------- */ .faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px;} .faq-item{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden;} .faq-q{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; font-weight:600; font-size:.94rem; cursor:pointer;} .faq-q::after{content:"+"; color:var(--accent); font-size:1.3rem; transition:.2s; flex-shrink:0;} .faq-item.open .faq-q::after{transform:rotate(45deg);} .faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 20px;} .faq-item.open .faq-a{max-height:220px; padding-bottom:18px;} .faq-a p{color:var(--text-dim); font-size:.87rem; line-height:1.6;} /* -------- features — clean line-art SVG badges, no emoji -------- */ .feat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; max-width:1180px; margin:0 auto;} .feat-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; transition:.2s; box-shadow:0 8px 20px rgba(0,0,0,.5);} .feat-card:hover{border-color:rgba(var(--accent-rgb),.4); transform:translateY(-3px);} .icon-badge{ width:44px; height:44px; border-radius:12px; background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.3); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:14px;} .icon-badge svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;} .feat-card h4{font-size:1rem; margin-bottom:8px;} .feat-card p{color:var(--text-faint); font-size:.83rem; line-height:1.55;} /* -------- stores index cards (main page) -------- */ .stores-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; max-width:1180px; margin:0 auto;} .store-tile{ position:relative; border-radius:18px; padding:30px 26px; overflow:hidden; border:1px solid var(--line); background:var(--panel); box-shadow:0 10px 26px rgba(0,0,0,.5);} .store-tile::before{ content:""; position:absolute; inset:0; opacity:.16; z-index:0; background:radial-gradient(circle at 30% 0%, var(--tile-accent), transparent 60%);} .store-tile > *{position:relative; z-index:1;} .store-tile .tile-tag{font-size:.72rem; letter-spacing:1.6px; text-transform:uppercase; font-weight:700; color:var(--tile-accent); margin-bottom:10px; display:block;} .store-tile h3{font-size:1.5rem; margin-bottom:10px; text-shadow:none;} .store-tile p{color:var(--text-dim); font-size:.87rem; line-height:1.55; margin-bottom:22px;} .store-tile .btn-primary{background:linear-gradient(135deg,var(--tile-accent),var(--tile-accent-2)); color:#0a0710; box-shadow:none;} /* -------- how it works -------- */ .steps-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; max-width:1180px; margin:0 auto;} .step-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px; position:relative; box-shadow:0 8px 20px rgba(0,0,0,.5);} .step-num{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a0710; display:flex; align-items:center; justify-content:center; font-weight:800; font-family:'JetBrains Mono','Inter',monospace; margin-bottom:16px;} .step-card h4{font-size:1.05rem; margin-bottom:8px;} .step-card p{color:var(--text-faint); font-size:.85rem; line-height:1.55;} /* -------- status section (honest — links out, no fabricated live numbers) -------- */ .status-card{ max-width:640px; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:34px; text-align:center; box-shadow:0 10px 26px rgba(0,0,0,.5);} .status-pulse{ width:14px; height:14px; border-radius:50%; background:#4ade80; margin:0 auto 16px; box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:statusPulse 2s infinite;} @keyframes statusPulse{ 0%{box-shadow:0 0 0 0 rgba(74,222,128,.55);} 70%{box-shadow:0 0 0 12px rgba(74,222,128,0);} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0);} } .status-card h3{font-size:1.3rem; margin-bottom:8px;} .status-card p{color:var(--text-dim); font-size:.9rem; line-height:1.6; margin-bottom:22px; max-width:460px; margin-left:auto; margin-right:auto;} /* -------- footer -------- */ .site-footer{border-top:1px solid var(--line); padding:50px 24px 26px; margin-top:40px;} .footer-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; max-width:1180px; margin:0 auto 30px;} .footer-brand p{color:var(--text-faint); font-size:.85rem; max-width:320px; margin-top:10px; line-height:1.6;} .footer-col h5{font-size:.78rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-faint); margin-bottom:14px;} .footer-col a, .footer-col button{display:block; color:var(--text-dim); font-size:.87rem; margin-bottom:9px; background:none; border:none; text-align:left; font-family:'Inter',sans-serif; cursor:pointer;} .footer-col a:hover, .footer-col button:hover{color:var(--accent);} .footer-bottom{text-align:center; color:var(--text-faint); font-size:.78rem; border-top:1px solid var(--line); padding-top:22px; max-width:1180px; margin:0 auto;} /* -------- modal (shared) -------- */ .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.82); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; overflow-y:auto;} .modal-overlay.open{display:flex;} .modal{ background:var(--panel-2); border:1px solid var(--line); border-radius:18px; max-width:440px; width:100%; padding:28px; box-shadow:0 30px 70px rgba(0,0,0,.7); position:relative; margin:auto;} .modal.wide{max-width:540px;} .modal-close{position:absolute; top:16px; right:16px; background:none; border:none; color:var(--text-faint); font-size:1.3rem;} .modal-close:hover{color:var(--accent);} .modal h3{font-size:1.2rem; margin-bottom:6px; text-shadow:none;} .modal .item-line{color:var(--accent); font-family:'JetBrains Mono','Inter',monospace; font-size:.85rem; margin-bottom:20px;} .modal-step{display:flex; gap:12px; margin-bottom:16px;} .modal-step .num{ width:26px; height:26px; border-radius:50%; background:rgba(var(--accent-rgb),.15); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; flex-shrink:0;} .modal-step p{font-size:.85rem; color:var(--text-dim); line-height:1.5;} .modal-step b{color:var(--text);} /* -------- vote modal -------- */ .vote-options{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;} .vote-option{ display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; transition:.2s;} .vote-option:hover{border-color:var(--accent); transform:translateY(-2px);} .vote-option .vn{ width:30px; height:30px; border-radius:9px; background:rgba(var(--accent-rgb),.15); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0;} .vote-option .vt{display:flex; flex-direction:column; gap:2px;} .vote-option .vt b{font-size:.9rem; font-weight:700;} .vote-option .vt span{color:var(--text-faint); font-size:.76rem;} .vote-option .va{margin-left:auto; color:var(--accent); font-size:1.1rem;} .vote-note{color:var(--text-faint); font-size:.76rem; line-height:1.5; text-align:center;} /* -------- auth modal -------- */ .auth-banner{display:flex; align-items:center; gap:14px; margin-bottom:22px;} .auth-banner-av{ width:46px; height:46px; border-radius:12px; overflow:hidden; flex-shrink:0; box-shadow:0 8px 20px rgba(var(--accent-rgb),.35); background:var(--bg-soft); border:1px solid var(--line);} .auth-banner-av img{width:100%; height:100%; object-fit:cover;} .auth-banner h3{margin-bottom:2px;} .auth-banner p{color:var(--text-faint); font-size:.8rem;} .auth-tabs{display:flex; gap:6px; margin-bottom:20px; background:var(--bg-soft); padding:4px; border-radius:10px;} .auth-tab{flex:1; text-align:center; padding:9px; border-radius:8px; font-size:.85rem; font-weight:600; color:var(--text-faint);} .auth-tab.active{background:rgba(var(--accent-rgb),.15); color:var(--accent);} .auth-form, .profile-tab{display:none; flex-direction:column; gap:12px;} .auth-form.active, .profile-tab.active{display:flex;} .auth-form input, .profile-tab input, .profile-tab select, .profile-tab textarea{ background:var(--bg-soft); border:1px solid var(--line); color:var(--text); padding:11px 14px; border-radius:9px; font-size:.88rem; font-family:'Inter',sans-serif; width:100%;} .auth-form input:focus, .profile-tab input:focus, .profile-tab select:focus, .profile-tab textarea:focus{outline:none; border-color:var(--accent);} .field-label{font-size:.72rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; display:block;} .field-icon{position:relative; display:flex; align-items:center;} .field-icon .fi{position:absolute; left:13px; color:var(--text-faint); display:flex; width:16px; height:16px;} .field-icon .fi svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7;} .field-icon input{padding-left:38px !important; padding-right:38px !important;} .toggle-pass{position:absolute; right:10px; background:none; border:none; color:var(--text-faint); display:flex; align-items:center;} .toggle-pass:hover{color:var(--accent);} .toggle-pass svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;} .auth-hint{color:var(--text-faint); font-size:.72rem; line-height:1.5;} .auth-msg{font-size:.78rem; color:var(--text-faint); text-align:center; margin-top:4px;} .auth-msg.err{color:#f87171;} .auth-msg.ok{color:#4ade80;} /* -------- profile modal -------- */ .profile-avatar-row{display:flex; gap:16px; align-items:flex-start;} .profile-avatar-preview{ width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.9rem; flex-shrink:0; box-shadow:0 10px 26px rgba(0,0,0,.4);} .emoji-grid{display:flex; flex-wrap:wrap; gap:7px;} .emoji-opt{ width:38px; height:38px; border-radius:10px; background:var(--bg-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:.15s;} .emoji-opt:hover{border-color:var(--accent);} .emoji-opt.selected{border-color:var(--accent); background:rgba(var(--accent-rgb),.15); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.3);} .color-swatch-row{display:flex; flex-wrap:wrap; gap:9px;} .color-swatch{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer;} .color-swatch.selected{border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.3);} .banner-swatch-row{display:flex; flex-wrap:wrap; gap:9px;} .banner-swatch{ width:52px; height:28px; border-radius:8px; border:2px solid transparent; cursor:pointer;} .banner-swatch.selected{border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.3);} .profile-meta{color:var(--text-faint); font-size:.76rem; text-align:center;} .profile-divider{border:none; border-top:1px solid var(--line); margin:4px 0;} .user-chip{ display:flex; align-items:center; gap:8px; background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.35); padding:6px 12px 6px 6px; border-radius:99px; font-size:.82rem; font-weight:600; transition:.2s;} .user-chip:hover{border-color:var(--accent);} .user-chip .av{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem;} /* -------- Discord-style live profile preview -------- */ .profile-preview{border-radius:14px; overflow:hidden; border:1px solid var(--line); margin-bottom:20px; background:var(--bg-soft);} .pp-banner{height:72px; background:linear-gradient(90deg,#a855f7,#7c3aed); transition:.25s;} .pp-main{display:flex; gap:14px; padding:0 16px 16px; margin-top:-30px; align-items:flex-end;} .pp-avatar-wrap{position:relative; flex-shrink:0;} .pp-avatar{width:64px; height:64px; border-radius:16px; border:4px solid var(--bg-soft); display:flex; align-items:center; justify-content:center; font-size:1.8rem; background:#a855f7; transition:.2s;} .pp-status-dot{position:absolute; bottom:1px; right:1px; width:17px; height:17px; border-radius:50%; border:3px solid var(--bg-soft); background:#4ade80; transition:.2s;} .pp-info{padding-bottom:2px; min-width:0; flex:1;} .pp-name-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .pp-name{font-weight:700; font-size:1.05rem; word-break:break-word;} .pp-badge{font-size:.66rem; font-weight:700; color:var(--accent); background:rgba(var(--accent-rgb),.15); border:1px solid rgba(var(--accent-rgb),.3); padding:2px 8px; border-radius:99px; white-space:nowrap;} .pp-status-text{font-size:.78rem; color:var(--text-dim); margin-top:3px; min-height:1.1em;} .pp-bio{font-size:.78rem; color:var(--text-faint); margin-top:5px; line-height:1.4; min-height:1.1em;} .status-select-row{display:flex; gap:8px; flex-wrap:wrap;} .status-opt{ display:flex; align-items:center; gap:7px; background:var(--bg-soft); border:1px solid var(--line); padding:8px 12px; border-radius:9px; font-size:.78rem; color:var(--text-dim); transition:.15s;} .status-opt .dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;} .status-opt:hover{border-color:rgba(var(--accent-rgb),.5);} .status-opt.selected{border-color:var(--accent); color:var(--text); background:rgba(var(--accent-rgb),.1);} /* -------- support chat widget -------- */ .chat-launcher{ position:fixed; bottom:24px; right:24px; z-index:150; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border:none; box-shadow:0 12px 30px rgba(var(--accent-rgb),.5); display:flex; align-items:center; justify-content:center; padding:13px;} .chat-launcher img{width:100%; height:100%; object-fit:contain; border-radius:50%;} .chat-launcher:hover{transform:scale(1.06);} .chat-panel{ position:fixed; bottom:92px; right:24px; z-index:150; width:340px; max-width:calc(100vw - 32px); background:var(--panel-2); border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 60px rgba(0,0,0,.7); display:none; flex-direction:column; overflow:hidden; height:440px;} .chat-panel.open{display:flex;} .chat-head{padding:14px 16px; background:linear-gradient(135deg,rgba(var(--accent-rgb),.25),rgba(var(--accent-rgb),.05)); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px;} .chat-head .av{width:30px; height:30px; border-radius:8px; overflow:hidden; flex-shrink:0;} .chat-head .av img{width:100%; height:100%; object-fit:cover;} .chat-head b{font-size:.88rem;} .chat-head span{display:block; font-size:.7rem; color:#4ade80;} .chat-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px;} .msg{max-width:82%; padding:9px 12px; border-radius:12px; font-size:.82rem; line-height:1.45;} .msg.bot{background:var(--bg-soft); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:3px;} .msg.user{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a0710; align-self:flex-end; border-bottom-right-radius:3px; font-weight:500;} .chat-suggest{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px;} .chip-btn{background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.3); color:var(--accent); font-size:.72rem; padding:6px 10px; border-radius:99px;} .chip-btn:hover{background:rgba(var(--accent-rgb),.22);} .chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line);} .chat-input-row input{flex:1; background:var(--bg-soft); border:1px solid var(--line); color:var(--text); padding:10px 12px; border-radius:9px; font-size:.83rem;} .chat-input-row input:focus{outline:none; border-color:var(--accent);} .chat-input-row button{background:var(--accent); border:none; color:#0a0710; width:38px; border-radius:9px; font-weight:700;} /* -------- scroll-to-top -------- */ .scroll-top{ position:fixed; bottom:24px; left:24px; z-index:150; width:44px; height:44px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:translateY(10px); transition:.25s;} .scroll-top.show{opacity:1; pointer-events:auto; transform:translateY(0);} .scroll-top:hover{border-color:var(--accent); color:var(--accent);} .scroll-top svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;} /* -------- toast notifications -------- */ #toastStack{position:fixed; top:20px; right:20px; z-index:400; display:flex; flex-direction:column; gap:10px; max-width:320px;} .toast{ background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:12px 16px; font-size:.85rem; color:var(--text); box-shadow:0 16px 34px rgba(0,0,0,.5); opacity:0; transform:translateX(30px); transition:.3s; display:flex; align-items:center; gap:9px;} .toast.show{opacity:1; transform:translateX(0);} .toast .ti{font-size:1rem; flex-shrink:0;} /* -------- scroll-reveal -------- */ .reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease;} .reveal.show{opacity:1; transform:translateY(0);} /* -------- utils -------- */ .center{text-align:center;} .mt{margin-top:14px;} ::-webkit-scrollbar{width:8px;} ::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.4); border-radius:99px;} ::-webkit-scrollbar-track{background:transparent;} @media (max-width:860px){ .nav-links{position:fixed; top:66px; left:0; right:0; background:var(--bg-soft); border:none; border-radius:0; flex-direction:column; padding:20px; border-bottom:1px solid var(--line); display:none; gap:4px; align-items:flex-start; max-height:calc(100vh - 66px); overflow-y:auto;} .nav-links.open{display:flex;} .nav-links a{width:100%; padding:12px 14px; border-radius:10px;} .burger{display:flex;} } /* -------- first-visit welcome gate -------- */ .welcome-gate{position:fixed; inset:0; z-index:500; background:#000000; display:flex; align-items:center; justify-content:center; padding:24px;} .welcome-gate.hide{display:none;} .wg-inner{max-width:420px; width:100%; text-align:center; animation:wgIn .5s ease;} @keyframes wgIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}} .wg-logo{width:76px; height:76px; margin:0 auto 22px; border-radius:18px; box-shadow:0 0 34px rgba(232,121,249,.45);} .wg-title{font-size:clamp(2.4rem,10vw,3.6rem); margin-bottom:12px;} .wg-sub{color:var(--text-dim); font-size:.92rem; margin-bottom:32px; line-height:1.6;} .wg-actions{display:flex; flex-direction:column; gap:12px; margin-bottom:20px;} .wg-skip{background:none; border:none; color:var(--text-faint); font-size:.82rem; text-decoration:underline; text-underline-offset:3px;} .wg-skip:hover{color:var(--accent);} .wg-badges{display:flex; gap:10px; justify-content:center; margin-top:26px; flex-wrap:wrap;} .wg-badge{font-size:.68rem; color:var(--text-faint); border:1px solid var(--line); padding:5px 11px; border-radius:99px;} /* -------- toggle switch -------- */ .toggle-row{display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--bg-soft); border:1px solid var(--line); padding:13px 15px; border-radius:11px;} .toggle-row .tr-label{font-size:.85rem; font-weight:600;} .toggle-row .tr-sub{font-size:.74rem; color:var(--text-faint); margin-top:3px; line-height:1.4;} .switch{position:relative; width:42px; height:24px; flex-shrink:0; display:inline-block;} .switch input{opacity:0; width:0; height:0; position:absolute;} .switch .slider{position:absolute; inset:0; background:var(--line); border-radius:99px; cursor:pointer; transition:.2s;} .switch .slider::before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;} .switch input:checked + .slider{background:var(--accent);} .switch input:checked + .slider::before{transform:translateX(18px);} /* -------- avatar / banner image upload -------- */ .upload-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;} .profile-avatar-preview img, .pp-avatar img{width:100%; height:100%; object-fit:cover; border-radius:inherit;} .pp-banner.has-image{background-size:cover; background-position:center;} .hidden-file-input{display:none;} /* -------- social links row (preview) -------- */ .pp-social{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;} .pp-social span{font-size:.72rem; color:var(--text-faint); background:var(--panel); border:1px solid var(--line); padding:3px 9px; border-radius:99px;} .pp-pronouns{color:var(--text-faint); font-size:.76rem; font-weight:600;} /* -------- export / import row -------- */ .io-row{display:flex; gap:10px;} .io-row .btn{flex:1;} /* -------- accessibility: reduce motion (user preference) -------- */ html.reduce-motion *{transition:none !important; animation:none !important;} /* -------- profile completion meter -------- */ .completion-row{display:flex; align-items:center; gap:12px; margin-bottom:18px;} .completion-bar{flex:1; height:8px; border-radius:99px; background:var(--bg-soft); border:1px solid var(--line); overflow:hidden;} .completion-fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:99px; transition:width .4s ease;} .completion-pct{font-size:.78rem; color:var(--text-faint); font-weight:700; white-space:nowrap;} /* -------- quick theme presets -------- */ .theme-preset-row{display:flex; gap:10px; flex-wrap:wrap;} .theme-preset{ display:flex; align-items:center; gap:8px; background:var(--bg-soft); border:1px solid var(--line); padding:9px 13px; border-radius:10px; font-size:.8rem; color:var(--text-dim);} .theme-preset .dot{width:14px; height:14px; border-radius:50%; flex-shrink:0;} .theme-preset:hover{border-color:rgba(var(--accent-rgb),.5);} .theme-preset.selected{border-color:var(--accent); color:var(--text); background:rgba(var(--accent-rgb),.1);} /* -------- security / typed confirmation -------- */ .danger-box{border:1px solid rgba(239,68,68,.3); background:rgba(239,68,68,.06); border-radius:12px; padding:16px;} .danger-box p{font-size:.82rem; color:var(--text-dim); line-height:1.5; margin-bottom:10px;} /* -------- activity / meta row -------- */ .activity-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:6px;} .activity-chip{background:var(--bg-soft); border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:.76rem; color:var(--text-faint); flex:1; min-width:140px;} .activity-chip b{display:block; color:var(--text); font-size:.9rem; margin-bottom:2px;} /* -------- checklist (fun self-tracked milestones) -------- */ .checklist{display:flex; flex-direction:column; gap:8px;} .checklist-item{display:flex; align-items:center; gap:10px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:.85rem; cursor:pointer;} .checklist-item input{width:16px; height:16px; accent-color:var(--accent);} .checklist-item.done span{text-decoration:line-through; color:var(--text-faint);} /* -------- full-page profile layout (profile.html) -------- */ .profile-page{max-width:1080px; margin:0 auto; padding:110px 24px 80px; display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start;} .profile-sidebar{position:sticky; top:100px; display:flex; flex-direction:column; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px;} .profile-sidebar-head{font-size:.68rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-faint); font-weight:700; padding:8px 13px 10px;} .profile-side-link{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:9px; font-size:.86rem; font-weight:600; color:var(--text-dim);} .profile-side-link svg{width:17px; height:17px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;} .profile-side-link:hover{background:rgba(var(--accent-rgb),.08); color:var(--text);} .profile-side-link.active{background:rgba(var(--accent-rgb),.14); color:var(--accent); box-shadow:inset 3px 0 0 var(--accent);} .profile-content{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:30px; box-shadow:0 10px 30px rgba(0,0,0,.5);} .profile-guest{max-width:480px; margin:120px auto; text-align:center; padding:20px;} .profile-guest h2{margin-bottom:12px;} .profile-guest p{color:var(--text-dim); margin-bottom:26px; line-height:1.6;} /* -------- mobile refinements -------- */ @media (max-width:760px){ .profile-page{grid-template-columns:1fr; padding:100px 16px 60px;} .profile-sidebar{position:static; flex-direction:row; overflow-x:auto; gap:6px;} .profile-side-link{white-space:nowrap;} .pp-main{flex-direction:column; align-items:flex-start;} .pp-avatar-wrap{margin-top:-30px;} } @media (max-width:520px){ .hero{padding:80px 16px 40px;} .section{padding:46px 16px;} .store-grid, .mini-grid, .feat-grid, .steps-row, .stores-grid, .payout-grid{grid-template-columns:1fr;} .payout-head{padding-left:14px;} .topbar-inner{padding:12px 14px; gap:10px;} .brand img{width:30px; height:30px;} .brand-glow.small{font-size:.92rem;} .curr-btn{padding:7px 9px; font-size:.74rem;} .nav-links{top:60px;} .chat-panel{right:10px; left:10px; width:auto; max-width:none;} .chat-launcher{right:14px; bottom:14px; width:52px; height:52px;} .scroll-top{left:14px; bottom:14px; width:40px; height:40px;} .wg-inner{padding:0;} .wg-badges{gap:6px;} .modal{padding:22px 18px;} .exchanger-row{flex-direction:column; align-items:stretch;} .exchanger-swap{align-self:center; margin-top:0;} .footer-grid{flex-direction:column;} } /* -------- payouts page -------- */ .payout-season{max-width:900px; margin:0 auto 70px;} .payout-head{border-left:4px solid var(--season-color, var(--accent)); padding-left:18px; margin-bottom:22px;} .payout-head h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:8px;} .payout-head p{color:var(--text-dim); line-height:1.6; max-width:680px;} .payout-stats{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px;} .payout-stat{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; flex:1; min-width:150px;} .payout-stat b{display:block; font-size:1.3rem; color:var(--season-color, var(--accent)); font-family:'Inter',sans-serif; font-weight:800;} .payout-stat span{font-size:.76rem; color:var(--text-faint);} .payout-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;} .payout-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:0 8px 20px rgba(0,0,0,.5); transition:.2s;} .payout-card:hover{border-color:rgba(var(--accent-rgb),.4); transform:translateY(-3px);} .payout-card .icon-badge{background:color-mix(in srgb, var(--season-color) 14%, transparent); border-color:color-mix(in srgb, var(--season-color) 35%, transparent); color:var(--season-color, var(--accent));} .payout-card h4{font-size:1rem; margin-bottom:12px;} .payout-card .pc-reward{ display:inline-block; font-size:.78rem; color:var(--season-color, var(--accent)); font-weight:700; background:color-mix(in srgb, var(--season-color) 12%, transparent); border:1px solid color-mix(in srgb, var(--season-color) 30%, transparent); padding:6px 11px; border-radius:8px; margin-bottom:12px;} .payout-card .pc-req{font-size:.82rem; color:var(--text-faint); line-height:1.55;} .payout-note{ background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--season-color, var(--accent)); border-radius:10px; padding:18px 20px; margin-top:24px;} .payout-note-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;} .payout-note-head .icon-badge{width:32px; height:32px; margin-bottom:0; background:color-mix(in srgb, var(--season-color) 14%, transparent); border-color:color-mix(in srgb, var(--season-color) 35%, transparent); color:var(--season-color, var(--accent));} .payout-note-head .icon-badge svg{width:16px; height:16px;} .payout-note-head b{font-size:.92rem;} .payout-note p{font-size:.84rem; color:var(--text-dim); line-height:1.6;} .payout-note ul{margin:8px 0 0 18px; list-style:disc;} .payout-note li{font-size:.84rem; color:var(--text-dim); line-height:1.7;} /* -------- accessibility: visible keyboard focus -------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } .btn:focus-visible, .card:focus-visible, .store-tile:focus-visible{outline-offset:3px;} /* -------- smooth page-load fade-in -------- */ body{animation:pageFadeIn .45s ease both;} @keyframes pageFadeIn{ from{opacity:0;} to{opacity:1;} } /* -------- micro-interactions -------- */ .btn:active{transform:translateY(0) scale(.98);} .card, .mini-card, .feat-card, .store-tile, .payout-card{ will-change:transform;} a, button{ -webkit-tap-highlight-color:transparent;} /* -------- selection colour -------- */ ::selection{background:rgba(var(--accent-rgb),.35); color:#fff;} /* -------- cart trigger + badge -------- */ .cart-trigger-btn{position:relative; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.04); border:1px solid var(--line); width:38px; height:38px; border-radius:9px; color:var(--text-dim);} .cart-trigger-btn:hover{border-color:var(--accent); color:var(--text);} .cart-trigger-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;} .cart-badge{position:absolute; top:-6px; right:-6px; background:var(--accent); color:#0a0710; font-size:.65rem; font-weight:800; min-width:17px; height:17px; border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--bg);} .cart-badge.hide{display:none;} /* -------- add-to-cart mini button next to Buy buttons -------- */ .buy-row{display:flex; gap:8px;} .buy-row .btn{flex:1;} .cart-add-btn{ flex-shrink:0; width:42px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:9px; color:var(--text-dim); transition:.18s;} .cart-add-btn:hover{border-color:var(--accent); color:var(--accent); background:rgba(var(--accent-rgb),.08);} .cart-add-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9;} .cart-add-btn.added{border-color:var(--accent); color:var(--accent);} /* -------- cart drawer/modal -------- */ .cart-items{display:flex; flex-direction:column; gap:10px; max-height:320px; overflow-y:auto; margin-bottom:18px;} .cart-item{display:flex; align-items:center; gap:12px; background:var(--bg-soft); border:1px solid var(--line); border-radius:11px; padding:12px 14px;} .cart-item-info{flex:1; min-width:0;} .cart-item-info b{display:block; font-size:.86rem;} .cart-item-info span{font-size:.72rem; color:var(--text-faint);} .qty-stepper{display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:3px;} .qty-stepper button{width:22px; height:22px; border-radius:6px; background:none; border:none; color:var(--text-dim); font-weight:700;} .qty-stepper button:hover{background:rgba(var(--accent-rgb),.15); color:var(--accent);} .qty-stepper span{font-size:.82rem; font-weight:700; min-width:16px; text-align:center; font-family:'JetBrains Mono',monospace;} .cart-item-price{font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--accent); font-weight:700; white-space:nowrap;} .cart-remove-btn{background:none; border:none; color:var(--text-faint); flex-shrink:0;} .cart-remove-btn:hover{color:#f87171;} .cart-remove-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;} .cart-empty{padding:40px 20px; text-align:center; color:var(--text-faint); font-size:.87rem;} .cart-empty svg{width:40px; height:40px; margin:0 auto 14px; color:var(--text-faint); fill:none; stroke:currentColor; stroke-width:1.5; display:block;} .cart-summary{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-top:1px solid var(--line); margin-bottom:16px;} .cart-summary b{font-size:1.3rem; color:var(--accent); font-family:'JetBrains Mono',monospace;} .cart-note{font-size:.74rem; color:var(--text-faint); text-align:center; margin-top:10px; line-height:1.5;} .cart-view{display:none;} .cart-view.active{display:block;} /* -------- order confirmation panel -------- */ .order-confirm{text-align:center;} .order-confirm .icon-badge{width:52px; height:52px; margin:0 auto 16px; background:rgba(74,222,128,.12); border-color:rgba(74,222,128,.35); color:#4ade80;} .order-confirm .icon-badge svg{width:24px; height:24px;} .order-id{font-family:'JetBrains Mono',monospace; font-size:1.1rem; color:var(--accent); background:var(--bg-soft); border:1px dashed var(--line); border-radius:10px; padding:12px; margin:14px 0; word-break:break-all;} .order-summary-box{background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:14px; text-align:left; font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--text-dim); white-space:pre-wrap; max-height:180px; overflow-y:auto; margin-bottom:16px;} /* -------- order stepper (cart page) -------- */ .order-stepper{display:flex; align-items:flex-start; justify-content:space-between; max-width:640px; margin:0 auto 50px; position:relative;} .order-stepper::before{content:""; position:absolute; top:17px; left:8%; right:8%; height:2px; background:var(--line); z-index:0;} .os-step{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; flex:1;} .os-dot{width:34px; height:34px; border-radius:50%; background:var(--panel); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:var(--text-faint); transition:.25s;} .os-step.done .os-dot{background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:var(--accent); color:#0a0710;} .os-step.active .os-dot{border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15);} .os-label{font-size:.72rem; color:var(--text-faint); text-align:center; max-width:100px; font-weight:600;} .os-step.done .os-label, .os-step.active .os-label{color:var(--text-dim);} /* -------- order history -------- */ .order-history-item{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:10px;} .ohi-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:6px;} .ohi-head b{font-family:'JetBrains Mono',monospace; color:var(--accent); font-size:.85rem;} .ohi-head span{font-size:.74rem; color:var(--text-faint);} .ohi-items{font-size:.8rem; color:var(--text-dim); line-height:1.7;} .ohi-total{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--accent); margin-top:8px;} .order-history-empty{text-align:center; color:var(--text-faint); font-size:.85rem; padding:20px;} /* -------- confirmation "create a ticket now" callout -------- */ .ticket-cta{background:linear-gradient(135deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.04)); border:1px solid rgba(var(--accent-rgb),.3); border-radius:14px; padding:20px; margin:20px 0; text-align:left;} .ticket-cta h4{font-size:1rem; margin-bottom:12px; text-align:center;} .ticket-step{display:flex; gap:12px; margin-bottom:12px; align-items:flex-start;} .ticket-step:last-child{margin-bottom:0;} .ticket-step .num{width:24px; height:24px; border-radius:50%; background:rgba(var(--accent-rgb),.18); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; flex-shrink:0;} .ticket-step p{font-size:.83rem; color:var(--text-dim); line-height:1.5;} .ticket-step b{color:var(--text);} .legal-content{max-width:820px; margin:0 auto;} .legal-section{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 24px; margin-bottom:14px;} .legal-section h3{font-size:1.02rem; margin-bottom:10px;} .legal-section p{color:var(--text-dim); font-size:.87rem; line-height:1.7;} .legal-section p + p{margin-top:10px;} .legal-section a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;} .legal-section code{font-family:'JetBrains Mono',monospace; background:var(--bg-soft); border:1px solid var(--line); padding:1px 6px; border-radius:5px; font-size:.82em; color:var(--accent);} .rank-notice{max-width:680px; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:40px 32px; text-align:center; box-shadow:0 14px 34px rgba(0,0,0,.5);} .rank-notice .icon-badge{margin:0 auto 20px; width:56px; height:56px;} .rank-notice .icon-badge svg{width:26px; height:26px;} .rank-notice h3{font-size:1.3rem; margin-bottom:14px;} .rank-notice p{color:var(--text-dim); line-height:1.65; font-size:.92rem; margin-bottom:24px;} .rank-perk-highlights{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:28px; text-align:left;} .rank-perk-highlights li{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-dim); background:var(--bg-soft); border:1px solid var(--line); padding:10px 14px; border-radius:10px;} .rank-perk-highlights li::before{content:"✓"; color:var(--accent); font-weight:700; flex-shrink:0;} /* -------- command palette (Ctrl/Cmd+K) -------- */ .cmdk-trigger-btn{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border:1px solid var(--line); padding:8px 12px; border-radius:9px; color:var(--text-dim); font-size:.78rem;} .cmdk-trigger-btn:hover{border-color:var(--accent); color:var(--text);} .cmdk-trigger-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;} .cmdk-kbd-inline{font-size:.68rem; border:1px solid var(--line); padding:1px 5px; border-radius:4px; color:var(--text-faint); font-family:'JetBrains Mono',monospace;} @media (max-width:640px){ .cmdk-kbd-inline{display:none;} } .cmdk-overlay{position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.75); backdrop-filter:blur(4px); display:none; align-items:flex-start; justify-content:center; padding:12vh 20px 20px;} .cmdk-overlay.open{display:flex;} .cmdk-box{width:100%; max-width:560px; background:var(--panel-2); border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.75); overflow:hidden;} .cmdk-input-row{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line);} .cmdk-input-row svg{width:18px; height:18px; color:var(--text-faint); flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2;} .cmdk-input-row input{flex:1; background:none; border:none; color:var(--text); font-size:1rem; font-family:'Inter',sans-serif; min-width:0;} .cmdk-input-row input:focus{outline:none;} .cmdk-kbd{font-size:.68rem; color:var(--text-faint); border:1px solid var(--line); padding:2px 6px; border-radius:5px; font-family:'JetBrains Mono',monospace; flex-shrink:0;} .cmdk-results{max-height:360px; overflow-y:auto; padding:8px;} .cmdk-group-label{font-size:.66rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-faint); padding:10px 12px 4px; font-weight:700;} .cmdk-item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; cursor:pointer; font-size:.87rem;} .cmdk-item .ci-icon{width:32px; height:32px; border-radius:8px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0;} .cmdk-item .ci-icon svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;} .cmdk-item .ci-text{min-width:0;} .cmdk-item .ci-text b{display:block; font-size:.87rem; font-weight:600;} .cmdk-item .ci-text span{font-size:.74rem; color:var(--text-faint);} .cmdk-item:hover, .cmdk-item.active{background:rgba(var(--accent-rgb),.14);} .cmdk-empty{padding:34px 20px; text-align:center; color:var(--text-faint); font-size:.85rem;} .cmdk-footer{display:flex; gap:16px; padding:10px 16px; border-top:1px solid var(--line); font-size:.7rem; color:var(--text-faint);} @media (max-width:640px){ .cmdk-overlay{padding-top:8vh;} } /* -------- Tebex-style themed package cards (BoxPvP) — clean, refined -------- */ .pack-card{position:relative; border-top:3px solid var(--pack-color, var(--accent)); padding-top:28px;} .pack-card.popular{box-shadow:0 0 0 2px var(--pack-color, var(--accent)), 0 16px 40px rgba(0,0,0,.5);} .pack-card.rainbow-border{ border-top:3px solid transparent; border-image:linear-gradient(90deg,#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#a855f7) 1; border-image-slice:1 0 0 0; } .pack-emblem{width:64px; height:auto; margin:0 auto 16px; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));} .pack-card h3{ text-shadow: 0 1px 0 color-mix(in srgb, var(--pack-color, var(--accent)) 90%, transparent), 0 2px 0 color-mix(in srgb, var(--pack-color, var(--accent)) 75%, transparent), 0 3px 6px rgba(0,0,0,.6), 0 0 20px color-mix(in srgb, var(--pack-color, var(--accent)) 35%, transparent); } .pack-card.rainbow-border h3{ background:linear-gradient(90deg,#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#a855f7); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; } .pack-tag{ display:inline-flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--pack-color, var(--accent)) 15%, transparent); color:var(--pack-color, var(--accent)); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.9px; padding:5px 11px; border-radius:99px; margin-bottom:12px;} .pack-tag.rainbow-text{ background:rgba(255,255,255,.06); background-image:linear-gradient(90deg,#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#a855f7); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;} .pack-card .price{color:var(--pack-color, var(--accent));} .pack-card .price.rainbow-text{ background:linear-gradient(90deg,#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#a855f7); -webkit-background-clip:text; background-clip:text; color:transparent;} .pack-card .perks li::before{color:var(--pack-color, var(--accent));} .pack-card .coin-bonus{color:var(--pack-color, var(--accent));} .pack-mini{border-top:3px solid var(--pack-color, var(--accent));} .pack-mini h4{color:var(--pack-color, var(--accent)); text-shadow:none;} .pack-mini .price{color:var(--pack-color, var(--accent));} /* -------- hero banner image -------- */ /* -------- full-bleed hero background image (covers ~half the page, like a real site hero) -------- */ .hero-bg{ position:relative; min-height:64vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:100px 24px 70px; background-size:cover; background-position:center 30%; background-repeat:no-repeat; overflow:hidden; margin-top:-1px; } .hero-bg::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.85) 80%, #000 100%), linear-gradient(90deg, rgba(0,0,0,.5) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.5) 100%); z-index:0; } .hero-bg > *{position:relative; z-index:1;} @media (max-width:640px){ .hero-bg{min-height:56vh; padding:90px 18px 50px;} } /* -------- trust strip (below hero) -------- */ .trust-strip{display:flex; justify-content:center; gap:34px; flex-wrap:wrap; padding:22px 24px; background:var(--panel); border-bottom:1px solid var(--line); position:relative; z-index:2;} .trust-item{display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--text-dim); font-weight:600;} .trust-item svg{width:17px; height:17px; color:var(--accent); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;} /* -------- rank emblem images (sit above the colored header band) -------- */ .pack-emblem{width:84px; height:auto; margin:0 auto 14px; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));} /* -------- Tebex-style store shell (sidebar nav + subtle branded background) -------- */ .store-page-bg{position:fixed; inset:0; z-index:-4; background-image:var(--store-bg-image); background-size:cover; background-position:center; filter:blur(9px) brightness(.28) saturate(1.1); transform:scale(1.05);} .store-page-bg::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.45);} .store-shell{display:flex; align-items:flex-start; max-width:1400px; margin:0 auto; min-height:calc(100vh - 66px);} .store-sidebar{width:250px; flex-shrink:0; background:rgba(6,6,8,.7); backdrop-filter:blur(10px); border-right:1px solid var(--line); padding:26px 16px; position:sticky; top:66px; height:calc(100vh - 66px); overflow-y:auto;} .store-side-brand{text-align:center; padding-bottom:20px; margin-bottom:16px; border-bottom:1px solid var(--line);} .store-side-brand .ip-pill{width:100%; justify-content:center; font-size:.78rem; margin-top:10px;} .store-nav{display:flex; flex-direction:column; gap:3px;} .store-nav-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 12px; border-radius:9px; color:var(--text-dim); font-weight:700; font-size:.86rem; width:100%; background:none; border:none; text-align:left; font-family:'Inter',sans-serif; cursor:pointer;} .store-nav-item:hover{background:rgba(var(--accent-rgb),.08); color:var(--text);} .store-nav-item.active{background:rgba(var(--accent-rgb),.16); color:var(--accent);} .store-nav-item .snl{display:flex; align-items:center; gap:9px;} .store-nav-item svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; flex-shrink:0;} .store-soon-badge{font-size:.6rem; background:rgba(255,255,255,.08); color:var(--text-faint); padding:2px 7px; border-radius:99px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;} .store-subnav{margin-left:15px; padding:2px 0 10px; display:flex; flex-direction:column; gap:1px; border-left:1px solid var(--line);} .store-subnav a{padding:8px 14px; font-size:.8rem; color:var(--text-faint); border-radius:0 7px 7px 0;} .store-subnav a:hover{color:var(--text); background:rgba(255,255,255,.04);} .store-main{flex:1; min-width:0; padding:36px 32px 60px;} .store-view{display:none;} .store-view.active{display:block;} .store-widget{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:20px; max-width:520px;} .store-widget h5{font-size:.68rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-faint); margin-bottom:12px; font-weight:800;} .store-widget-row{display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--text-dim); padding:7px 0;} .store-widget-row svg{width:16px; height:16px; color:var(--accent); flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2;} @media (max-width:960px){ .store-shell{flex-direction:column;} .store-sidebar{width:100%; position:static; height:auto; border-right:none; border-bottom:1px solid var(--line);} .store-main{padding:26px 18px 50px;} } /* -------- cart page: two-column checkout layout -------- */ .cart-layout{display:grid; grid-template-columns:1fr 340px; gap:30px; align-items:start; max-width:980px; margin:0 auto;} .cart-col-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;} .cart-col-head h3{font-size:1.1rem;} .cart-count-pill{background:rgba(var(--accent-rgb),.14); color:var(--accent); font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:99px;} .cart-summary-card{position:sticky; top:90px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 14px 34px rgba(0,0,0,.5);} .cart-summary-card h5{font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-faint); margin-bottom:16px; font-weight:800;} .cart-username-box{background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:13px 14px; margin-bottom:18px;} .cart-username-box .cu-label{display:flex; align-items:center; gap:6px; color:var(--text-faint); font-size:.68rem; text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px; font-weight:700;} .cart-username-box .cu-label svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2;} .cart-username-box .cu-value{font-weight:700; color:var(--text); font-size:.92rem;} .cart-username-box .cu-value.unset{color:var(--text-faint); font-weight:500; font-style:italic;} .cart-empty-state{ text-align:center; padding:60px 24px; background:var(--panel); border:1px dashed var(--line); border-radius:16px;} .cart-empty-state svg{width:56px; height:56px; margin:0 auto 18px; color:var(--text-faint); fill:none; stroke:currentColor; stroke-width:1.4; display:block;} .cart-empty-state h4{font-size:1.1rem; margin-bottom:8px;} .cart-empty-state p{color:var(--text-faint); font-size:.87rem; margin-bottom:22px;} @media (max-width:820px){ .cart-layout{grid-template-columns:1fr;} .cart-summary-card{position:static;} } /* -------- store home intro (category tiles) -------- */ .store-home-intro{margin-bottom:44px;} .store-home-intro p{color:var(--text-dim); font-size:.9rem; line-height:1.6; max-width:640px; margin-bottom:22px;} .store-category-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;} .store-category-tile{ display:block; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; transition:.2s; border-top:3px solid var(--cat-color, var(--accent));} .store-category-tile:hover{transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.4); box-shadow:0 12px 26px rgba(0,0,0,.5);} .store-category-tile h4{font-size:1.05rem; margin-bottom:6px; color:var(--cat-color, var(--accent)); text-shadow:none;} .store-category-tile p{color:var(--text-faint); font-size:.8rem; margin:0;} /* -------- donation widgets (honest — empty until real orders exist) -------- */ .donation-widgets{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:40px;} .donation-empty{text-align:center; padding:18px 10px;} .donation-empty svg{width:30px; height:30px; margin:0 auto 8px; color:var(--text-faint); fill:none; stroke:currentColor; stroke-width:1.6; display:block;} .donation-empty p{font-size:.78rem; color:var(--text-faint); line-height:1.4;} .donation-empty b{display:block; color:var(--text-dim); font-size:.84rem; margin-bottom:3px; font-weight:700;} @media (max-width:640px){ .donation-widgets{grid-template-columns:1fr;} } /* -------- donation list items (real data, Minecraft skin avatars) -------- */ .donation-list{display:flex; flex-direction:column; gap:9px;} .donation-row{display:flex; align-items:center; gap:10px;} .d-avatar{width:32px; height:32px; border-radius:7px; background:var(--bg-soft); border:1px solid var(--line); flex-shrink:0; overflow:hidden;} .d-avatar img{width:100%; height:100%; image-rendering:pixelated; display:block;} .donation-row .d-info{flex:1; min-width:0;} .donation-row .d-info b{display:block; font-size:.84rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .donation-row .d-amount{font-family:'JetBrains Mono',monospace; font-weight:700; color:#4ade80; font-size:.82rem; flex-shrink:0;} .top-donator-card{display:flex; align-items:center; gap:14px; padding:6px 0;} .top-donator-card .d-avatar{width:56px; height:56px; border-radius:12px; box-shadow:0 0 0 2px rgba(250,204,21,.4), 0 8px 18px rgba(0,0,0,.4);} .top-donator-card .td-name{font-size:1rem; font-weight:800;} .top-donator-card .td-amount{font-family:'JetBrains Mono',monospace; color:#4ade80; font-weight:700; font-size:.9rem;} .td-badge{font-size:.65rem; color:#facc15; text-transform:uppercase; letter-spacing:.6px; font-weight:800;} /* -------- Independence Day sale -------- */ .sale-was{font-size:.82rem; color:var(--text-faint); text-decoration:line-through; margin-bottom:2px;} .sale-badge-inline{display:inline-block; background:rgba(74,222,128,.14); color:#4ade80; font-size:.68rem; font-weight:800; padding:3px 9px; border-radius:99px; margin-bottom:12px;} .sale-broadcast{background:linear-gradient(90deg,#0f3d1f,#155e2b,#0f3d1f); border-bottom:1px solid rgba(74,222,128,.35); padding:11px 20px; text-align:center; position:relative; z-index:3;} .sale-broadcast-inner{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; font-size:.83rem; font-weight:700; color:#eafff0;} .sale-broadcast-inner svg{width:16px; height:16px; color:#4ade80; fill:none; stroke:currentColor; stroke-width:2; flex-shrink:0;} .sale-broadcast .sb-pct{background:#0a0710; color:#4ade80; padding:2px 9px; border-radius:99px; font-weight:800; font-size:.76rem;} /* -------- team section (owner + staff) -------- */ .team-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:40px;} .team-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center;} .team-card .d-avatar{width:64px; height:64px; border-radius:12px; margin:0 auto 12px;} .team-card .t-name{font-weight:800; font-size:.94rem;} .team-card .t-role{font-size:.72rem; color:var(--accent); text-transform:uppercase; letter-spacing:.6px; font-weight:700; margin-top:2px;} .team-card.owner .d-avatar{box-shadow:0 0 0 2px rgba(250,204,21,.4), 0 8px 18px rgba(0,0,0,.4);} .team-card.owner .t-role{color:#facc15;}