/* ============================================================ Blitzball Labs — Pricing page Two-step flow: product chooser → themed per-product tiers. Theme is driven by [data-theme] on , so the whole page (background, glows, buttons) recolors per product. ============================================================ */ /* ---- theme tokens ---- */ body[data-theme="hub"]{ --px-a:#8b5cf6; --px-b:#00ffd5; --px-c:#f72585; --px-bg:#05010f; --px-card:rgba(18,8,42,.66); --px-bd:rgba(139,92,246,.22); --px-bd-hi:rgba(139,92,246,.55); --px-glow:rgba(139,92,246,.4); --px-font:'Sora',sans-serif; } body[data-theme="blitz"]{ --px-a:#8b5cf6; --px-b:#f72585; --px-c:#4cc9f0; --px-bg:#02000a; --px-card:rgba(14,6,32,.72); --px-bd:rgba(139,92,246,.24); --px-bd-hi:rgba(167,139,250,.6); --px-glow:rgba(139,92,246,.45); --px-font:'Sora',sans-serif; } body[data-theme="closecrab"]{ --px-a:#00ffd5; --px-b:#39ff7a; --px-c:#ff2e88; --px-bg:#020610; --px-card:rgba(8,18,38,.74); --px-bd:rgba(0,255,213,.18); --px-bd-hi:rgba(0,255,213,.55); --px-glow:rgba(0,255,213,.38); --px-font:'Orbitron',sans-serif; } body{background:var(--px-bg);transition:background .7s ease} /* ---- animated backdrop ---- */ .px-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .px-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.55; transition:background 1s ease;animation:pxFloat 26s ease-in-out infinite} .px-orb1{width:720px;height:720px;top:-18%;left:-12%;background:radial-gradient(circle,var(--px-a),transparent 70%)} .px-orb2{width:600px;height:600px;bottom:-14%;right:-10%;background:radial-gradient(circle,var(--px-b),transparent 70%);animation-delay:-9s} .px-orb3{width:520px;height:520px;top:42%;left:52%;background:radial-gradient(circle,var(--px-c),transparent 70%);animation-delay:-17s;opacity:.32} @keyframes pxFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(46px,-34px) scale(1.07)}66%{transform:translate(-34px,44px) scale(.93)}} .px-beam{position:absolute;inset:0; background:conic-gradient(from 0deg at 50% 0%,transparent 0deg,var(--px-glow) 12deg,transparent 26deg); opacity:.13;animation:pxSpin 34s linear infinite;transform-origin:50% 0} @keyframes pxSpin{to{transform:rotate(360deg)}} /* ---- shared layout ---- */ .px-wrap,.px-tiers-sec{position:relative;z-index:5;max-width:1200px;margin:0 auto; padding:150px clamp(20px,5vw,48px) 90px} .px-tiers-sec{padding-top:120px} .px-tiers-sec[hidden]{display:none} .px-head{text-align:center;max-width:760px;margin:0 auto 60px} .px-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono); font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--px-a); border:1px solid var(--px-bd-hi);border-radius:100px;padding:7px 18px;margin-bottom:26px; background:rgba(255,255,255,.03);backdrop-filter:blur(10px)} .px-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--px-a); box-shadow:0 0 12px var(--px-a);animation:pxPulse 2s ease-in-out infinite} @keyframes pxPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}} .px-head h1{font-family:'Sora',sans-serif;font-weight:900;letter-spacing:-.045em;line-height:1.03; font-size:clamp(2.5rem,6.2vw,4.9rem)} .px-grad{background:linear-gradient(110deg,var(--px-a),var(--px-b) 52%,var(--px-c)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; background-size:220% auto;animation:pxShift 7s ease infinite} @keyframes pxShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}} .px-head p{color:var(--text-dim);font-size:1.06rem;margin-top:20px} /* ---- step 1: product chooser cards ---- */ .px-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px} .px-card{position:relative;border:1px solid var(--px-bd);border-radius:26px;padding:0; background:var(--px-card);backdrop-filter:blur(16px);cursor:pointer;overflow:hidden; text-align:left;color:inherit;font:inherit; transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s,box-shadow .45s} .px-card:hover,.px-card:focus-visible{transform:translateY(-10px) scale(1.014);outline:none} .px-card:focus-visible{box-shadow:0 0 0 3px var(--px-bd-hi)} .px-card-body{display:block;padding:44px 38px 38px;position:relative;z-index:2} .px-card-glow{position:absolute;inset:-40%;opacity:0;transition:opacity .5s;z-index:1; background:radial-gradient(circle at 50% 0%,var(--cg,rgba(139,92,246,.3)),transparent 62%)} .px-card:hover .px-card-glow{opacity:1} .px-card-ico{display:flex;align-items:center;justify-content:center;width:62px;height:62px; border-radius:18px;font-size:30px;margin-bottom:24px; background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff; box-shadow:0 12px 34px -8px var(--c1)} .px-card-name{display:block;font-family:'Sora',sans-serif;font-weight:900;font-size:2.15rem; letter-spacing:-.035em;line-height:1.1} .px-card-name em{font-style:normal;color:var(--c1)} .px-card-tag{display:block;color:var(--text-dim);font-size:.95rem;margin-top:8px} .px-card-meta{display:flex;gap:22px;flex-wrap:wrap;margin:26px 0 28px; padding:16px 0;border-top:1px solid var(--px-bd);border-bottom:1px solid var(--px-bd)} .px-card-meta b{font-family:var(--font-mono);font-size:15px;color:var(--c1);display:block} .px-card-meta i{font-style:normal;font-size:11.5px;color:var(--text-muted); letter-spacing:.06em;display:block;margin-top:2px} .px-card-price{display:flex;align-items:baseline;gap:8px;font-family:'Sora',sans-serif; font-weight:900;font-size:2.9rem;letter-spacing:-.03em;line-height:1} .px-card-price small{font-size:1.15rem;color:var(--text-muted);font-weight:700} .px-card-price i{font-style:normal;font-family:var(--font-mono);font-size:12px; color:var(--text-muted);font-weight:500;letter-spacing:.1em;text-transform:uppercase} .px-card-cta{display:inline-block;margin-top:28px;font-family:var(--font-mono);font-size:13px; font-weight:600;color:var(--c1);letter-spacing:.04em; border-bottom:1px solid transparent;transition:border-color .3s,gap .3s} .px-card:hover .px-card-cta{border-bottom-color:var(--c1)} /* per-card accent injection */ .px-card-blitz{--c1:#a78bfa;--c2:#f72585;--cg:rgba(139,92,246,.32)} .px-card-blitz:hover{border-color:rgba(167,139,250,.6);box-shadow:0 28px 70px -20px rgba(139,92,246,.55)} .px-card-crab{--c1:#00ffd5;--c2:#39ff7a;--cg:rgba(0,255,213,.24)} .px-card-crab:hover{border-color:rgba(0,255,213,.55);box-shadow:0 28px 70px -20px rgba(0,255,213,.4)} .px-card-crab .px-card-name,.px-card-crab .px-card-price{font-family:'Orbitron',sans-serif;letter-spacing:-.02em} /* card 1 flourish: audio waveform */ .px-wave{position:absolute;left:0;right:0;bottom:0;height:76px;display:flex;align-items:flex-end; gap:5px;padding:0 38px 26px;z-index:2;opacity:.5;transition:opacity .4s} .px-card:hover .px-wave{opacity:1} .px-wave i{flex:1;background:linear-gradient(180deg,#f72585,#a78bfa);border-radius:3px; height:16%;animation:pxBar 1.25s ease-in-out infinite} .px-wave i:nth-child(2n){animation-delay:-.18s} .px-wave i:nth-child(3n){animation-delay:-.42s;background:linear-gradient(180deg,#4cc9f0,#8b5cf6)} .px-wave i:nth-child(4n){animation-delay:-.62s} .px-wave i:nth-child(5n){animation-delay:-.85s} @keyframes pxBar{0%,100%{height:14%}50%{height:76%}} /* card 2 flourish: terminal lines */ .px-term{position:absolute;left:38px;right:38px;bottom:24px;z-index:2; font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#39ff7a;opacity:.55; transition:opacity .4s;line-height:1.9} .px-card:hover .px-term{opacity:1} .px-term i{display:block;font-style:normal} .px-term i:nth-child(2){color:#00ffd5} .px-term i:nth-child(3){animation:pxBlink 1.05s steps(1) infinite;color:#00ffd5} @keyframes pxBlink{50%{opacity:0}} .px-hint{text-align:center;margin-top:52px;color:var(--text-muted);font-size:13.5px; font-family:var(--font-mono)} .px-hint a{color:var(--px-a);border-bottom:1px solid transparent;transition:border-color .3s} .px-hint a:hover{border-bottom-color:var(--px-a)} @media(max-width:900px){ .px-cards{grid-template-columns:1fr} .px-card-body{padding:34px 26px 30px} .px-wave,.px-term{left:26px;right:26px;padding-left:0;padding-right:0} } /* ============ step 2: per-product tiers ============ */ .px-back-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap; gap:14px;margin-bottom:44px} .px-back{font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim);cursor:pointer; background:var(--px-card);border:1px solid var(--px-bd);border-radius:100px;padding:10px 20px; backdrop-filter:blur(10px);transition:border-color .3s,color .3s} .px-back:hover{border-color:var(--px-bd-hi);color:var(--text)} .px-switch{display:flex;gap:6px;background:var(--px-card);border:1px solid var(--px-bd); border-radius:100px;padding:5px;backdrop-filter:blur(10px)} .px-switch button{font-family:var(--font-mono);font-size:12px;padding:8px 20px;border:none; border-radius:100px;background:transparent;color:var(--text-muted);cursor:pointer; transition:background .3s,color .3s;white-space:nowrap} .px-switch button:hover{color:var(--text)} .px-switch button.on{color:#04010c;font-weight:700} .px-switch button.px-sw-b.on{background:linear-gradient(135deg,#a78bfa,#8b5cf6)} .px-switch button.px-sw-c.on{background:linear-gradient(135deg,#00ffd5,#39ff7a)} .px-prod-head{text-align:center;margin-bottom:52px} .px-prod-ico{width:74px;height:74px;margin:0 auto 22px;border-radius:22px;display:flex; align-items:center;justify-content:center;font-size:36px;color:#fff; background:linear-gradient(135deg,var(--px-a),var(--px-b)); box-shadow:0 18px 50px -12px var(--px-a);animation:pxBob 5s ease-in-out infinite} @keyframes pxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .px-prod-head h2{font-family:var(--px-font);font-weight:900;font-size:clamp(2.1rem,5vw,3.4rem); letter-spacing:-.035em;line-height:1.08} .px-prod-head p{color:var(--text-dim);margin-top:10px;font-size:1.02rem} .px-prod-link{display:inline-block;margin-top:16px;font-family:var(--font-mono);font-size:12.5px; color:var(--px-a);border-bottom:1px solid transparent;transition:border-color .3s} .px-prod-link:hover{border-bottom-color:var(--px-a)} .px-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:880px;margin:0 auto} .px-tier{position:relative;background:var(--px-card);border:1px solid var(--px-bd); border-radius:22px;padding:38px 32px;display:flex;flex-direction:column; backdrop-filter:blur(16px);overflow:hidden; transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s} .px-tier:hover{transform:translateY(-6px);border-color:var(--px-bd-hi)} .px-tier.feat{border-color:var(--px-bd-hi);box-shadow:0 22px 64px -22px var(--px-glow)} .px-tier.feat::before{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 50% -10%,var(--px-glow),transparent 58%);opacity:.4} .px-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%); background:linear-gradient(135deg,var(--px-a),var(--px-b));color:#04010c; font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; padding:6px 18px;border-radius:0 0 10px 10px;font-weight:800} .px-tier h3{font-family:var(--px-font);font-weight:800;font-size:1.45rem;margin-bottom:6px; position:relative;z-index:2} .px-tier .px-sub{color:var(--text-muted);font-size:13px;min-height:38px;position:relative;z-index:2} .px-price{display:flex;align-items:baseline;gap:7px;font-family:var(--px-font);font-weight:900; font-size:3.1rem;letter-spacing:-.03em;margin:18px 0 4px;line-height:1;position:relative;z-index:2} .px-price small{font-size:1.2rem;color:var(--text-muted);font-weight:700} .px-per{color:var(--text-muted);font-size:11.5px;font-family:var(--font-mono); letter-spacing:.08em;text-transform:uppercase;margin-bottom:26px;position:relative;z-index:2} .px-tier ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column; gap:11px;flex:1;position:relative;z-index:2} .px-tier li{font-size:13.5px;color:var(--text-dim);display:flex;gap:10px;align-items:flex-start} .px-tier li::before{content:"✓";color:var(--px-b);font-weight:800;flex:0 0 auto} .px-buy{position:relative;z-index:2;display:flex;align-items:center;justify-content:center; gap:9px;width:100%;border:none;cursor:pointer;border-radius:100px;padding:15px 26px; font-family:var(--font-body);font-weight:700;font-size:14.5px;color:#04010c; background:linear-gradient(135deg,var(--px-a),var(--px-b)); box-shadow:0 12px 34px -10px var(--px-glow); transition:transform .25s,box-shadow .25s,filter .25s} .px-buy:hover{transform:translateY(-2px);filter:brightness(1.1); box-shadow:0 18px 46px -10px var(--px-glow)} .px-buy.sec{background:transparent;color:var(--text);border:1px solid var(--px-bd-hi); box-shadow:none} .px-buy.sec:hover{background:rgba(255,255,255,.05)} .px-buy[disabled]{opacity:.5;cursor:not-allowed;transform:none} .px-pay{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:58px 0 6px} .px-paym{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);padding:10px 17px; border-radius:12px;border:1px solid var(--px-bd);background:var(--px-card); display:flex;align-items:center;gap:8px;backdrop-filter:blur(10px)} .px-paym b{color:var(--text);font-weight:600} .px-note{text-align:center;color:var(--text-muted);font-size:12.5px;max-width:660px; margin:16px auto 0;line-height:1.75} .px-note b{color:var(--px-a)} .px-note a{color:var(--px-a);text-decoration:underline;text-decoration-color:var(--px-bd-hi)} .px-note-dim{font-size:11.5px;opacity:.72;font-family:var(--font-mono)} @media(max-width:760px){ .px-tiers{grid-template-columns:1fr;max-width:420px} .px-back-row{justify-content:center} } @media(prefers-reduced-motion:reduce){ .px-orb,.px-beam,.px-wave i,.px-term i,.px-prod-ico,.px-grad{animation:none} }