/* ========================================================================== RAZE LINE — design system Dark / neon-gradient. Built for a premium subscription product. ========================================================================== */ :root{ /* base */ --void:#07050C; --bg:#0A0710; --bg-2:#0E0A18; --panel:rgba(255,255,255,.035); --panel-solid:#120C1E; --line:rgba(242,231,218,.09); --line-2:rgba(242,231,218,.16); /* type */ --text:#F2E7DA; --muted:#9C93A8; --dim:#6B6379; /* neon */ --n1:#8B5CFF; /* violet */ --n2:#FF2E88; /* magenta */ --n3:#22E0FF; /* cyan */ --win:#2BF5B0; --lose:#FF4E6A; --gold:#FFD166; --grad:linear-gradient(120deg,#8B5CFF 0%,#FF2E88 52%,#22E0FF 100%); --grad-soft:linear-gradient(120deg,rgba(139,92,255,.22),rgba(255,46,136,.16),rgba(34,224,255,.20)); --radius:16px; --radius-lg:22px; --shadow:0 24px 70px rgba(0,0,0,.6); --glow:0 0 40px rgba(139,92,255,.35); --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --display:'Space Grotesk','Onest','Inter',sans-serif; --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace; } *{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip} body{ margin:0;color:var(--text); /* The ambient glow lives in the page background itself. Three separate translucent layers stacked over the page look identical but cost roughly 20x more to composite every frame, so they are not worth it. */ background-color:var(--bg); background-image: radial-gradient(900px 700px at 12% 1%, rgba(139,92,255,.26), transparent 62%), radial-gradient(820px 640px at 90% 5%, rgba(255,46,136,.20), transparent 62%), radial-gradient(780px 640px at 46% 62%, rgba(34,224,255,.13), transparent 62%); background-attachment:fixed;background-repeat:no-repeat; font-family:var(--font);font-size:15px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; min-height:100vh;display:flex;flex-direction:column;overflow-x:clip; } /* ---------- ambient background is painted on above ---------- */ .aurora{display:none} /* fine grid + grain */ body::before{ content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.30;contain:strict; background-image:linear-gradient(rgba(242,231,218,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(242,231,218,.035) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 70%); -webkit-mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 70%); } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 22px;position:relative;z-index:2} main{flex:1;position:relative;z-index:2} /* ---------- typography ---------- */ h1,h2,h3,h4{font-family:var(--display);margin:0 0 .45em;line-height:1.06;font-weight:700;letter-spacing:-.02em} h1{font-size:clamp(38px,6vw,76px)} h2{font-size:clamp(28px,3.6vw,44px)} h3{font-size:21px;letter-spacing:-.01em} p{margin:0 0 1em} .muted{color:var(--muted)} .dim{color:var(--dim)} .small{font-size:13.5px} .tiny{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .center{text-align:center} .gt{ /* the gradient is a palindrome so the loop has no visible seam, and it must repeat — with no-repeat the text turns invisible once it scrolls past */ background-image:linear-gradient(100deg,#8B5CFF 0%,#FF2E88 25%,#22E0FF 50%,#FF2E88 75%,#8B5CFF 100%); background-size:200% auto;background-repeat:repeat;background-origin:border-box; -webkit-background-clip:text;background-clip:text;color:transparent; animation:shine 9s linear infinite} @keyframes shine{from{background-position:0% center}to{background-position:200% center}} .win{color:var(--win)}.lose{color:var(--lose)} .kicker{ display:inline-flex;align-items:center;gap:8px; font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--n3);margin-bottom:16px;font-weight:500; } .kicker::before{content:'';width:22px;height:1px;background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat} /* ---------- header ---------- */ header.site{position:sticky;top:0;z-index:60; background:rgba(10,7,16,.86);backdrop-filter:blur(14px) saturate(130%); border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;gap:28px;height:72px} .logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700; font-size:19px;letter-spacing:.20em;text-transform:uppercase} .logo .mark{width:32px;height:32px;border-radius:10px;flex:none;background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat; display:grid;place-items:center;color:#0A0710;font-size:16px;font-weight:800; box-shadow:0 0 24px rgba(139,92,255,.55)} .nav .links{display:flex;gap:26px;margin-left:12px} .nav .links a{font-size:14px;color:var(--muted);font-weight:500;position:relative;padding:4px 0;transition:.18s} .nav .links a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:1.5px; background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat;transition:right .25s ease} .nav .links a:hover{color:var(--text)} .nav .links a:hover::after,.nav .links a.on::after{right:0} .nav .links a.on{color:var(--text)} .only-sm{display:none} .nav .spacer{flex:1} .nav .right{display:flex;align-items:center;gap:10px} .burger{display:none;background:none;border:0;color:var(--text);font-size:22px;cursor:pointer} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:12px 22px;border-radius:12px;border:1px solid transparent;font-family:var(--font); font-weight:600;font-size:14px;cursor:pointer;transition:.2s cubic-bezier(.2,.8,.2,1); white-space:nowrap;position:relative;overflow:hidden; /* a styled as a button would otherwise inherit the uppercase, letter-spaced treatment that form labels get */ text-transform:none;letter-spacing:normal;line-height:1.2; /* A transparent 1px border makes the browser paint the background into the border box while positioning it from the padding box — so the strip under the border shows the edge of the next repeated gradient tile as a stray line down the left side. Anchoring and not repeating removes it. */ background-origin:border-box;background-repeat:no-repeat} .btn-primary{background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat;background-size:180% auto;color:#0A0710;font-weight:700; box-shadow:0 10px 34px rgba(139,92,255,.34)} .btn-primary:hover{background-position:right center;transform:translateY(-2px); box-shadow:0 16px 46px rgba(255,46,136,.42)} .btn-ghost{background:rgba(242,231,218,.05);border-color:var(--line-2);color:var(--text)} .btn-ghost:hover{background:rgba(242,231,218,.10);border-color:rgba(242,231,218,.28);transform:translateY(-1px)} .btn-neon{background:rgba(34,224,255,.09);border-color:rgba(34,224,255,.4);color:var(--n3)} .btn-neon:hover{background:rgba(34,224,255,.16);box-shadow:0 0 26px rgba(34,224,255,.3)} .btn-danger{background:rgba(255,78,106,.10);border-color:rgba(255,78,106,.38);color:#FF8A9C} .btn-danger:hover{background:rgba(255,78,106,.18)} .btn-lg{padding:16px 32px;font-size:15.5px;border-radius:14px} .btn-sm{padding:8px 14px;font-size:13px;border-radius:9px} .btn-block{width:100%} .btn:disabled{opacity:.45;cursor:not-allowed} /* ---------- glass card with gradient hairline ---------- */ .card{position:relative;border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); border:1px solid var(--line);overflow:hidden} .card::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px; background-image:var(--grad-soft);background-origin:border-box;background-repeat:no-repeat; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none} .card-pad{padding:26px} .card-flat{background:var(--panel);backdrop-filter:none} .card-flat::after{display:none} .section{padding:88px 0} .section-sm{padding:44px 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px; margin-bottom:34px;flex-wrap:wrap} .sec-head p{margin:0;color:var(--muted);max-width:560px} .grid{display:grid;gap:20px} .grid>*,.hero-grid>*,.admin-shell>*{min-width:0} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} /* ---------- hero ---------- */ .hero{padding:104px 0 64px;position:relative} .hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center} .hero h1{margin-bottom:22px} .hero .lead{font-size:18px;color:var(--muted);max-width:540px;margin-bottom:32px;line-height:1.65} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px} .hero-trust{display:grid;grid-template-columns:repeat(4,auto);gap:26px;justify-content:start} .hero-trust>div{position:relative;padding-left:16px} .hero-trust>div::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px; background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat;border-radius:2px;opacity:.8} .hero-trust b{display:block;font-family:var(--display);font-size:27px;line-height:1.1;font-weight:700} .hero-trust span{color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase} /* ---------- marquee ---------- */ .marquee{overflow:hidden;position:relative;padding:18px 0;border-top:1px solid var(--line); border-bottom:1px solid var(--line); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee ul{display:flex;gap:52px;list-style:none;margin:0;padding:0;width:max-content; animation:slide 34s linear infinite} .marquee li{font-family:var(--display);font-weight:700;letter-spacing:.16em;font-size:14px; color:var(--dim);white-space:nowrap} @keyframes slide{to{transform:translateX(-50%)}} /* ---------- stat tile ---------- */ .stat{position:relative;padding:22px 24px;border-radius:14px;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--line)} .stat .v{font-family:var(--display);font-size:34px;font-weight:700;line-height:1;letter-spacing:-.03em} .stat .l{color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:8px;font-weight:600} .stat.up .v{color:var(--win)} .stat.down .v{color:var(--lose)} .stat.grad .v{background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- match card ---------- */ .match{position:relative;display:flex;flex-direction:column;border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--line);overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s} .match:hover{transform:translateY(-4px);border-color:rgba(139,92,255,.4); box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 40px rgba(139,92,255,.12)} .match .top{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:13px 18px;min-height:52px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.22)} .match .top .badge{white-space:nowrap} .match .top .flex{flex:none} .match .tour{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.04em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)} .match .body{padding:24px 18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px} .team{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0} .team .lg{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;position:relative; font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.01em; background:linear-gradient(150deg,rgba(139,92,255,.20),rgba(255,46,136,.10)); border:1px solid var(--line-2);color:var(--text)} .team .nm{font-weight:600;font-size:14px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .team .rp{font-family:var(--mono);font-size:11px;color:var(--n3);letter-spacing:.04em} .fm{display:flex;gap:3px} .fm i{width:14px;height:4px;border-radius:2px;background:rgba(242,231,218,.16);font-style:normal} .fm i.w{background:var(--win);box-shadow:0 0 8px rgba(43,245,176,.5)} .fm i.l{background:var(--lose)} .vs{font-family:var(--display);color:var(--dim);font-size:12px;letter-spacing:.2em;font-weight:700} .match .foot{margin-top:auto;padding:15px 18px;border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:10px} /* pick box */ .pickline{padding:0 18px 18px} .pickbox{position:relative;border-radius:13px;padding:15px 16px;overflow:hidden; background:linear-gradient(135deg,rgba(139,92,255,.13),rgba(34,224,255,.07)); border:1px solid rgba(139,92,255,.28)} .pickbox.locked{background:rgba(242,231,218,.035);border-color:var(--line)} .pickbox .lab{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);font-weight:500;margin-bottom:5px} .pickbox .val{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25} .blur{filter:blur(8px);user-select:none;pointer-events:none;opacity:.7} .lock-overlay{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600} .meter{height:5px;border-radius:999px;background:rgba(242,231,218,.09);overflow:hidden;margin-top:12px} .meter i{display:block;height:100%;border-radius:999px;background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat; box-shadow:0 0 14px rgba(139,92,255,.6)} .conf-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted); margin-top:7px;font-family:var(--mono)} /* ---------- badges ---------- */ .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px; position:relative;background-origin:border-box;background-repeat:no-repeat; font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;font-family:var(--font)} .badge-grad{background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat;color:#0A0710} .badge-violet{background:rgba(139,92,255,.14);color:#B69BFF;border:1px solid rgba(139,92,255,.34)} .badge-pink{background:rgba(255,46,136,.13);color:#FF7CB4;border:1px solid rgba(255,46,136,.34)} .badge-cyan{background:rgba(34,224,255,.11);color:var(--n3);border:1px solid rgba(34,224,255,.32)} .badge-win{background:rgba(43,245,176,.11);color:var(--win);border:1px solid rgba(43,245,176,.3)} .badge-lose{background:rgba(255,78,106,.11);color:#FF8A9C;border:1px solid rgba(255,78,106,.3)} .badge-gold{background:rgba(255,209,102,.11);color:var(--gold);border:1px solid rgba(255,209,102,.3)} .badge-grey{background:rgba(242,231,218,.06);color:var(--muted);border:1px solid var(--line-2)} .live-dot{width:6px;height:6px;border-radius:50%;background:var(--n2); box-shadow:0 0 0 0 rgba(255,46,136,.7);animation:pulse 1.8s infinite} @keyframes pulse{70%{box-shadow:0 0 0 9px rgba(255,46,136,0)}100%{box-shadow:0 0 0 0 rgba(255,46,136,0)}} /* ---------- raze points ring ---------- */ .rp-ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;position:relative;flex:none} .rp-ring span{font-family:var(--mono);font-size:16px;font-weight:600} .rp-ring::before{content:'';position:absolute;inset:0;border-radius:50%; background:conic-gradient(var(--n1) calc(var(--p)*1%),rgba(242,231,218,.08) 0); -webkit-mask:radial-gradient(farthest-side,transparent 72%,#000 73%); mask:radial-gradient(farthest-side,transparent 72%,#000 73%)} /* ---------- pricing ---------- */ .plan{position:relative;padding:34px 28px;border-radius:var(--radius-lg);display:flex;flex-direction:column; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--line);transition:.25s cubic-bezier(.2,.8,.2,1)} .plan:hover{transform:translateY(-5px);border-color:var(--line-2)} .plan.best{border-color:transparent;background:linear-gradient(180deg,rgba(139,92,255,.16),rgba(255,46,136,.06)); box-shadow:0 30px 80px rgba(139,92,255,.22)} .plan.best::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px; background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .plan .pname{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:11px; color:var(--muted);font-weight:500} .plan .price{font-family:var(--display);font-size:58px;font-weight:700;line-height:1;margin:14px 0 2px;letter-spacing:-.04em} .plan .price small{font-size:16px;color:var(--muted);font-weight:600;letter-spacing:0} .plan ul{list-style:none;padding:0;margin:24px 0 28px;display:flex;flex-direction:column;gap:11px} .plan li{display:flex;gap:11px;font-size:14px;color:var(--muted);align-items:flex-start} .plan li::before{content:'';width:16px;height:16px;border-radius:50%;flex:none;margin-top:3px; background-image:var(--grad-soft);background-origin:border-box;background-repeat:no-repeat;border:1px solid rgba(139,92,255,.4); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%2322E0FF' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .plan .cta{margin-top:auto} .badge.ribbon,.ribbon{position:absolute;top:20px;right:20px;z-index:3} .plan .pname{padding-right:120px} /* ---------- tables ---------- */ table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--dim);font-weight:500;padding:13px 14px;border-bottom:1px solid var(--line)} td{padding:14px;border-bottom:1px solid var(--line);vertical-align:middle} tr:last-child td{border-bottom:0} tbody tr{transition:background .15s} tbody tr:hover{background:rgba(242,231,218,.03)} .table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))} /* ---------- forms ---------- */ label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);font-weight:500;margin-bottom:8px} input,select,textarea{width:100%;padding:12px 14px;border-radius:11px; background:rgba(7,5,12,.62);border:1px solid var(--line-2);color:var(--text); font-family:var(--font);font-size:14px;outline:none;transition:.18s} input:focus,select:focus,textarea:focus{border-color:rgba(139,92,255,.7); box-shadow:0 0 0 3px rgba(139,92,255,.16)} input::placeholder,textarea::placeholder{color:var(--dim)} textarea{min-height:120px;resize:vertical;line-height:1.65} .field{margin-bottom:18px} .row{display:grid;gap:16px} .checkbox{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted); text-transform:none;letter-spacing:0;font-weight:500;font-family:var(--font)} .checkbox input{width:auto;margin:0;accent-color:#8B5CFF} select option{background:#120C1E} /* ---------- alerts ---------- */ .alert{padding:14px 18px;border-radius:12px;margin-bottom:20px;font-size:14px;border:1px solid} .alert-ok{background:rgba(43,245,176,.08);border-color:rgba(43,245,176,.28);color:#8DFAD8} .alert-err{background:rgba(255,78,106,.08);border-color:rgba(255,78,106,.3);color:#FFA3B1} .alert-info{background:rgba(139,92,255,.08);border-color:rgba(139,92,255,.28);color:#C4AEFF} /* ---------- auth ---------- */ .auth{max-width:452px;margin:70px auto} .auth .card-pad{padding:38px} /* ---------- paywall ---------- */ .paywall{position:relative;border-radius:var(--radius-lg);padding:38px;text-align:center;overflow:hidden; background:linear-gradient(135deg,rgba(139,92,255,.14),rgba(255,46,136,.07))} .paywall::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px; background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;pointer-events:none} /* ---------- steps ---------- */ .step{position:relative;padding:30px 26px;border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); border:1px solid var(--line)} .step .no{font-family:var(--display);font-size:46px;font-weight:700;line-height:1; background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent; opacity:.9;margin-bottom:14px} /* ---------- testimonial ---------- */ .quote{padding:28px;border-radius:var(--radius);border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))} .quote p{font-size:15px;line-height:1.7;margin-bottom:18px} .quote .who{display:flex;align-items:center;gap:12px} .quote .av{width:38px;height:38px;border-radius:50%;background-image:var(--grad-soft);background-origin:border-box;background-repeat:no-repeat; border:1px solid var(--line-2);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none} /* ---------- comparison ---------- */ .compare td:first-child{color:var(--muted)} .compare .yes{color:var(--win);font-weight:700} .compare .no{color:var(--dim)} /* ---------- faq ---------- */ .faq{border-bottom:1px solid var(--line);padding:20px 0} .faq summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none; display:flex;justify-content:space-between;gap:14px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';color:var(--n3);font-size:22px;line-height:1;font-family:var(--mono)} .faq[open] summary::after{content:'−'} .faq p{margin:14px 0 0;color:var(--muted);font-size:14.5px} /* ---------- admin ---------- */ .admin-shell{display:grid;grid-template-columns:244px 1fr;gap:28px;padding:30px 0} .side{position:sticky;top:96px;align-self:start;padding:16px;border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--line)} .side a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px; color:var(--muted);font-size:14px;font-weight:500;margin-bottom:2px;transition:.15s} .side a:hover{background:rgba(242,231,218,.05);color:var(--text)} .side a.on{background:linear-gradient(90deg,rgba(139,92,255,.20),rgba(139,92,255,0));color:#C4AEFF; box-shadow:inset 2px 0 0 #8B5CFF} .side .grp{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--dim);font-weight:500;padding:14px 13px 7px} .admin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px; margin-bottom:26px;flex-wrap:wrap} .admin-head h2{margin-bottom:0} /* ---------- footer ---------- */ footer.site{border-top:1px solid var(--line);padding:48px 0 34px;margin-top:70px; color:var(--dim);font-size:13.5px;position:relative;z-index:2} footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px} footer.site a{color:var(--muted);transition:.15s} footer.site a:hover{color:var(--text)} footer .stack a{display:block;margin-bottom:9px} /* ---------- utils ---------- */ .divider{height:1px;background:var(--line);margin:26px 0} .flex{display:flex;align-items:center;gap:10px} .between{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .stack{display:flex;flex-direction:column;gap:9px} .mt0{margin-top:0}.mb0{margin-bottom:0}.mt8{margin-top:8px}.mt16{margin-top:16px} .mt24{margin-top:24px}.mt40{margin-top:40px}.mb24{margin-bottom:24px} .nowrap{white-space:nowrap} .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} /* ---------- responsive ---------- */ @media(max-width:1020px){ .hero-grid{grid-template-columns:1fr;gap:44px} .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:1fr} .admin-shell{grid-template-columns:1fr} .side{position:static} footer.site .cols{grid-template-columns:1fr 1fr} } @media(max-width:700px){ .nav{gap:10px;height:64px} .logo{font-size:15px;letter-spacing:.12em;white-space:nowrap} .logo .mark{width:28px;height:28px;font-size:14px} .nav .right .btn{padding:8px 12px;font-size:13px} .hide-sm{display:none} .nav .links{display:none} .nav .links a.only-sm{display:block} .nav .links.open{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--bg-2); flex-direction:column;padding:16px 22px;border-bottom:1px solid var(--line)} .burger{display:block} .g2,.g4{grid-template-columns:1fr} .section{padding:56px 0} .hero{padding:60px 0 40px} .hero-trust{grid-template-columns:repeat(2,1fr);gap:18px} .card-pad{padding:20px} footer.site .cols{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} } /* ========================================================================== MOTION LAYER Everything below is what makes the page feel alive: pointer-reactive ambience, entrance choreography, self-drawing data. All of it is disabled under prefers-reduced-motion at the bottom of this file. ========================================================================== */ /* The cursor spotlight was removed: a glow chasing the pointer fought with the card hover states for attention and made long pages feel busy. The .spotlight element is gone from the markup too, so there is nothing left to hide. */ /* ---------- scroll progress ---------- */ .scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none} .scroll-progress i{display:block;height:100%;width:100%;background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat; transform:scaleX(0);transform-origin:0 50%; box-shadow:0 0 12px rgba(139,92,255,.8)} /* ---------- logo: a cut gem ---------- */ .logo .mark{position:relative;overflow:hidden} .logo svg{width:100%;height:100%;display:block} .logo .gem-out{stroke-dasharray:62;stroke-dashoffset:62; animation:draw 1.5s cubic-bezier(.22,.7,.28,1) .2s forwards} .logo .gem-in{transform:scale(0);transform-origin:center;transform-box:fill-box; animation:pop .5s cubic-bezier(.2,1.6,.4,1) 1.05s forwards} .logo:hover .gem-out{animation:draw .8s cubic-bezier(.22,.7,.28,1) forwards} .logo:hover .gem-in{animation:pop .45s cubic-bezier(.2,1.6,.4,1) .35s forwards} .logo .mark::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%; background-image:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); animation:sheen 5.5s ease-in-out 1.6s infinite} @keyframes draw{to{stroke-dashoffset:0}} @keyframes pop{to{transform:scale(1)}} @keyframes sheen{0%,72%{left:-120%}88%,100%{left:130%}} /* ---------- loading screen ---------- Hides itself on a CSS timer as well as from JS, so a script failure can never leave a visitor staring at a covered page. */ .preload{position:fixed;inset:0;z-index:200;display:grid;place-items:center; background:var(--bg); animation:preload-out .5s ease 1.5s forwards} .preload-inner{display:flex;flex-direction:column;align-items:center;gap:22px; animation:preload-rise .6s cubic-bezier(.22,.7,.28,1) both} .preload .logo{letter-spacing:.22em} .preload-bar{width:190px;height:2px;border-radius:2px;overflow:hidden; background:rgba(242,231,218,.10)} .preload-bar i{display:block;height:100%;width:100%;transform-origin:0 50%; background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat; animation:preload-fill 1.5s cubic-bezier(.3,.8,.3,1) forwards} .preload.done{animation:preload-out .45s ease forwards} @keyframes preload-fill{0%{transform:scaleX(.02)}60%{transform:scaleX(.75)}100%{transform:scaleX(1)}} @keyframes preload-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes preload-out{to{opacity:0;visibility:hidden;pointer-events:none}} /* ---------- hero choreography ---------- */ .hero .kicker,.hero h1 .l1,.hero h1 .l2,.hero .lead,.hero-cta,.hero-trust>div,.hero-panel{ opacity:0;transform:translateY(26px); transition:opacity .85s cubic-bezier(.22,.7,.28,1),transform .85s cubic-bezier(.22,.7,.28,1)} .hero h1 .l1,.hero h1 .l2{display:block;transform:translateY(105%)} .hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em} .hero.ready .kicker{opacity:1;transform:none;transition-delay:.05s} .hero.ready h1 .l1{opacity:1;transform:none;transition-delay:.18s} .hero.ready h1 .l2{opacity:1;transform:none;transition-delay:.30s} .hero.ready .lead{opacity:1;transform:none;transition-delay:.46s} .hero.ready .hero-cta{opacity:1;transform:none;transition-delay:.58s} .hero.ready .hero-trust>div:nth-child(1){opacity:1;transform:none;transition-delay:.68s} .hero.ready .hero-trust>div:nth-child(2){opacity:1;transform:none;transition-delay:.76s} .hero.ready .hero-trust>div:nth-child(3){opacity:1;transform:none;transition-delay:.84s} .hero.ready .hero-trust>div:nth-child(4){opacity:1;transform:none;transition-delay:.92s} .hero.ready .hero-panel{opacity:1;transform:none;transition-delay:.34s} /* featured card breathes */ .hero-panel{animation:float 7s ease-in-out 1.6s infinite} @keyframes float{50%{transform:translateY(-9px)}} .hero.ready .hero-panel{transform:none} /* ---------- pointer-lit cards ---------- */ .lit{--mx:50%;--my:50%;--rx:0deg;--ry:0deg} .lit::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; z-index:-1;opacity:0;transition:opacity .35s ease; background:radial-gradient(340px circle at var(--mx) var(--my), rgba(139,92,255,.16),rgba(255,46,136,.07) 42%,transparent 70%)} .lit:hover::before{opacity:1} .match,.plan{transform-style:preserve-3d} .match{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s} .match:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px)} .plan{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s} .plan:hover{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-7px)} .stat{transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s} .stat:hover{transform:translateY(-3px);border-color:var(--line-2)} .step,.quote{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s} .step:hover,.quote:hover{transform:translateY(-4px);border-color:var(--line-2)} /* Keep card content above the pointer light without touching any child's position: `isolation` gives the card its own stacking context, so a z-index:-1 pseudo paints над the card background but under the content. */ .lit{isolation:isolate} /* ---------- button shine sweep ---------- */ .btn::after{content:'';position:absolute;top:0;left:-140%;width:55%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent); transition:left .65s cubic-bezier(.22,.7,.28,1);pointer-events:none} .btn:hover::after{left:150%} .btn-primary{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background-position .4s} .btn-primary:hover{box-shadow:0 16px 46px rgba(255,46,136,.45),0 0 0 1px rgba(255,255,255,.08) inset} /* ---------- meters & rings ---------- */ .meter i{will-change:width} .rp-ring{transition:filter .3s} .rp-ring:hover{filter:drop-shadow(0 0 10px rgba(139,92,255,.55))} /* ---------- equity curve ---------- */ .curve .curve-area{opacity:0} .curve .curve-dot{opacity:0;transform:scale(0);transform-origin:center;transform-box:fill-box} .curve.drawn .curve-area{opacity:1} .curve.drawn .curve-dot{opacity:1;transform:scale(1)} .curve .curve-line{filter:drop-shadow(0 0 8px rgba(139,92,255,.45))} /* ---------- marquee: pause on hover, tighter loop ---------- */ .marquee:hover ul{animation-play-state:paused} .marquee li{transition:color .3s} .marquee li:hover{color:var(--text)} /* ---------- live badge on the featured card ---------- */ .badge-grad{overflow:hidden} .badge-grad::after{content:'';position:absolute;top:0;left:-140%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent); animation:sheen 4.5s ease-in-out 2s infinite} /* ---------- section headings underline on reveal ---------- */ .sec-head h2{position:relative;display:inline-block} .sec-head h2::after{content:'';position:absolute;left:0;bottom:-8px;height:2px;width:0; background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat;border-radius:2px;transition:width 1s cubic-bezier(.22,.7,.28,1) .2s} .reveal.in .sec-head h2::after,.sec-head.reveal.in h2::after{width:56px} /* ---------- reveal defaults ---------- */ .reveal{opacity:0;transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,.7,.28,1),transform .8s cubic-bezier(.22,.7,.28,1)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .aurora i,.logo .spark,.logo .mark::after,.hero-panel,.badge-grad::after,.marquee ul{animation:none!important} .hero .kicker,.hero h1 .l1,.hero h1 .l2,.hero .lead,.hero-cta,.hero-trust>div,.hero-panel, .reveal{opacity:1!important;transform:none!important;transition:none!important} .curve .curve-area,.curve .curve-dot{opacity:1!important;transform:none!important} .btn::after{display:none} } /* ---------- team crests ---------- Every logo is stored as a 256x256 PNG and drawn inside a fixed square with object-fit:contain, so a tall crest and a wide wordmark end up the same size. The pale plate exists because most esports logos are dark artwork that would vanish against this background. */ .crest{background:linear-gradient(180deg,#F7F4EF,#E4DED3);border-color:rgba(0,0,0,.25)} .crest img{width:100%;height:100%;object-fit:contain;padding:6px;display:block} .team .lg.crest{padding:0;overflow:hidden} .crest-sm{width:38px;height:38px;border-radius:10px;flex:none;overflow:hidden; background:linear-gradient(180deg,#F7F4EF,#E4DED3);border:1px solid rgba(0,0,0,.2); display:grid;place-items:center} .crest-sm img{width:100%;height:100%;object-fit:contain;padding:4px} .crest-sm.empty{background:linear-gradient(150deg,rgba(139,92,255,.22),rgba(255,46,136,.10)); border-color:var(--line-2);font-family:var(--display);font-weight:700;font-size:12px;color:var(--text)} .logo-drop{display:flex;align-items:center;gap:12px} .logo-drop input[type=file]{font-size:12px;padding:8px} .logo-hint{font-size:11px;color:var(--dim);line-height:1.5} /* ---------- compact ratings editor in the teams table ---------- */ .rate-form{display:grid;grid-template-columns:repeat(5,60px) auto;gap:7px;align-items:end} .rate-form label{font-size:9px;letter-spacing:.09em;margin-bottom:4px} .rate-form input{padding:8px 4px;font-size:13px;text-align:center;border-radius:8px; -moz-appearance:textfield;appearance:textfield} .rate-form input::-webkit-outer-spin-button, .rate-form input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .logo-drop input[type=file]{padding:7px;border-radius:9px} /* The admin tables carry more columns than a marketing page ever will, so admin screens get a wider container than the public site. */ .wrap-wide{max-width:1560px} /* ---------- back to top ---------- */ .to-top{position:fixed;right:26px;bottom:26px;z-index:70;width:46px;height:46px; display:grid;place-items:center;cursor:pointer;border-radius:14px; border:1px solid rgba(139,92,255,.42);color:var(--n3); background:rgba(18,12,30,.82);backdrop-filter:blur(10px); box-shadow:0 10px 28px rgba(0,0,0,.45); opacity:0;visibility:hidden;transform:translateY(14px) scale(.9); transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1), visibility .3s,border-color .2s,box-shadow .2s} .to-top.on{opacity:1;visibility:visible;transform:none} .to-top:hover{border-color:rgba(34,224,255,.75);color:#fff; box-shadow:0 12px 34px rgba(139,92,255,.4),0 0 0 1px rgba(34,224,255,.25) inset} .to-top:active{transform:translateY(1px)} .to-top:focus-visible{outline:2px solid var(--n3);outline-offset:3px} .to-top svg{width:20px;height:20px;display:block} @media(max-width:700px){.to-top{right:16px;bottom:16px;width:42px;height:42px}} @media(prefers-reduced-motion:reduce){.to-top{transition:opacity .2s ease,visibility .2s}} /* ========================================================================== TIERS, LIVE SIGNALS, MEMBER CONSTELLATION ========================================================================== */ /* ---------- tier badge beside the wordmark ---------- */ .tier-badge{display:inline-flex;align-items:center;gap:5px;margin-left:10px; padding:3px 9px 3px 7px;border-radius:999px;font-family:var(--font); font-size:10.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase; border:1px solid;white-space:nowrap;vertical-align:middle} .tier-badge svg{width:12px;height:12px;display:block} .tier-badge.tier-base{color:#C4AEFF;border-color:rgba(139,92,255,.45);background:rgba(139,92,255,.13)} .tier-badge.tier-pro{color:#0A0710;border-color:transparent; background-image:var(--grad);background-origin:border-box;background-repeat:no-repeat; box-shadow:0 0 16px rgba(255,46,136,.4)} @media(max-width:700px){.tier-badge{display:none}} .tier-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px; font-size:9.5px;letter-spacing:.14em;font-weight:700;vertical-align:middle; font-family:var(--font);border:1px solid} .tier-chip.tier-base{color:#C4AEFF;border-color:rgba(139,92,255,.4);background:rgba(139,92,255,.12)} .tier-chip.tier-pro{color:#FF7CB4;border-color:rgba(255,46,136,.45);background:rgba(255,46,136,.13)} .plan.is-pro{border-color:rgba(255,46,136,.30)} .plan .freeze-line{color:var(--n3)} .plan .freeze-line::before{background-image:linear-gradient(120deg,rgba(34,224,255,.3),rgba(34,224,255,.1)); border-color:rgba(34,224,255,.5)} .live-count{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px; margin-left:5px;border-radius:999px;font-size:10px;font-weight:700;font-family:var(--mono); background:var(--n2);color:#0A0710;vertical-align:middle} .freeze-on{color:var(--n3)} /* ---------- live signal card ---------- */ .signal{position:relative;display:flex;flex-direction:column;border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,46,136,.07),rgba(255,255,255,.015)); border:1px solid rgba(255,46,136,.22);overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s} .signal:hover{transform:translateY(-3px);border-color:rgba(255,46,136,.45); box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 34px rgba(255,46,136,.10)} .signal.locked{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)); border-color:var(--line)} .sig-top{display:flex;align-items:center;gap:10px;padding:12px 18px; border-bottom:1px solid var(--line);background:rgba(0,0,0,.22)} .sig-top .tour{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-family:var(--mono);font-size:11.5px;color:var(--muted)} .sig-age{font-size:11px;color:var(--dim);white-space:nowrap} .sig-body{padding:18px} .sig-match{font-weight:600;font-size:14.5px;margin-bottom:14px} .sig-call{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.01em} .sig-odds{font-family:var(--display);font-size:20px;font-weight:700} .sig-note{font-size:13.5px;margin:14px 0 0;line-height:1.6} .sig-foot{margin-top:auto;padding:14px 18px;border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:10px} /* ---------- member constellation ---------- */ .plexus{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0; transition:opacity 1.2s ease} body[data-tier="base"] .plexus,body[data-tier="pro"] .plexus{opacity:1} /* The admin panel is a work surface — the ambience would fight the tables. */ body.is-admin .plexus{display:none} /* ---------- purchase celebration ---------- */ .celebrate-layer{position:fixed;inset:0;z-index:150;display:grid;place-items:center; background:radial-gradient(circle at 50% 45%,rgba(10,7,16,.86),rgba(7,5,12,.96)); opacity:0;transition:opacity .6s ease;cursor:pointer} .celebrate-layer.show{opacity:1} .celebrate-layer.gone{opacity:0} .celebrate-layer canvas{position:absolute;inset:0} .celebrate-copy{position:relative;isolation:isolate;text-align:center;padding:0 24px; opacity:0;transform:translateY(14px); transition:opacity .8s ease,transform .8s cubic-bezier(.22,.7,.28,1)} /* Clears the lines out from behind the wordmark so it stays readable. */ .celebrate-copy::before{content:"";position:absolute;z-index:-1; left:50%;top:50%;width:150%;height:260%;transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(8,6,13,.95),rgba(8,6,13,.75) 55%,transparent)} .celebrate-layer.settle .celebrate-copy{opacity:1;transform:none} .celebrate-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em; text-transform:uppercase;color:var(--n3);margin-bottom:14px} .celebrate-tier{font-family:var(--display);font-size:clamp(48px,10vw,104px);font-weight:700; line-height:1;letter-spacing:-.04em; background-image:var(--grad);background-size:200% auto;background-repeat:repeat; -webkit-background-clip:text;background-clip:text;color:transparent; animation:shine 6s linear infinite} .celebrate-sub{color:var(--muted);margin-top:16px;font-size:15px} @media(prefers-reduced-motion:reduce){ .celebrate-layer,.celebrate-copy{transition:opacity .2s ease} .celebrate-tier{animation:none} } /* ---------- admin: rating editor ---------- */ .rp-edit{display:flex;align-items:center;gap:8px} .rp-edit input{width:62px;padding:8px 4px;text-align:center;font-size:13px;border-radius:8px; -moz-appearance:textfield;appearance:textfield} .rp-edit input::-webkit-outer-spin-button, .rp-edit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* ═══════════════════════════════════════════════════════════════════ Productisation pass — empty states, teams, guide, calculator ═══════════════════════════════════════════════════════════════════ */ /* ---------- lettermark crests ---------- */ .crest-sm,.crest-sm.empty{flex:none} .crest-sm.empty{ background:linear-gradient(150deg,hsl(var(--hue,270) 62% 26%),hsl(var(--hue,270) 58% 15%)); border:1px solid hsl(var(--hue,270) 60% 40% / .38); color:hsl(var(--hue,270) 85% 84%); font-family:var(--display);font-weight:700;letter-spacing:.02em; display:grid;place-items:center;border-radius:11px; font-size:clamp(10px,32%,17px);line-height:1} /* ---------- deliberate empty states ---------- */ .empty-state{ display:flex;flex-direction:column;align-items:center;text-align:center; padding:46px 26px;border:1px dashed var(--line);border-radius:var(--radius); background:rgba(255,255,255,.012)} .empty-mark{width:38px;height:38px;color:var(--n3);opacity:.55;margin-bottom:16px} .empty-mark svg{width:100%;height:100%} .empty-state h3{font-size:19px;margin:0 0 8px} .empty-state p{color:var(--muted);max-width:460px;margin:0;font-size:14.5px;line-height:1.7} .empty-action{margin-top:20px} .card-pad>.empty-state{border:0;padding:26px 0 8px;background:none} /* ---------- teams ---------- */ .team-card{ display:flex;align-items:center;gap:13px;padding:14px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid var(--line);border-radius:var(--radius); text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,background .2s} .team-card:hover{border-color:var(--n1);transform:translateY(-2px);background:rgba(255,255,255,.028)} .tc-name{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tc-rating{margin-left:auto;flex:none;font-size:13px;color:var(--n3); background:rgba(139,92,255,.12);border:1px solid rgba(139,92,255,.26); padding:4px 9px;border-radius:8px} .team-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .team-strip{display:flex;flex-wrap:wrap;gap:10px} .team-chip{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 7px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid var(--line);border-radius:999px; text-decoration:none;color:var(--muted);font-size:13.5px;font-weight:500; transition:border-color .2s,color .2s} .team-chip:hover{border-color:var(--n1);color:var(--text)} .team-link{color:inherit;text-decoration:none} .team-link:hover{color:var(--n3)} .roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px} .player{padding:12px;background:rgba(255,255,255,.022);border:1px solid var(--line);border-radius:12px} .player .handle{font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:3px} .matchup-row{display:flex;align-items:center;gap:13px} .matchup-row>.mono{margin-left:auto;color:var(--muted);letter-spacing:.14em} /* ---------- match page ---------- */ .pick-headline{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1.15} .figure{font-size:20px;font-weight:600} .prose p{color:var(--muted);line-height:1.78;margin:0 0 15px} .prose p:last-child{margin-bottom:0} .factor-list{padding-left:20px;margin:0;color:var(--muted);line-height:1.7} .factor-list li{margin-bottom:11px} .factor-list li:last-child{margin-bottom:0} .factor-list b{color:var(--text)} /* ---------- guide ---------- */ .toc{display:flex;flex-wrap:wrap;gap:8px;padding:16px; background:rgba(255,255,255,.022);border:1px solid var(--line);border-radius:var(--radius)} .toc a{font-size:13px;color:var(--muted);text-decoration:none;padding:6px 11px; border:1px solid var(--line);border-radius:999px;transition:border-color .2s,color .2s} .toc a:hover{color:var(--text);border-color:var(--n1)} .anchor-h{font-size:clamp(24px,3.2vw,32px);margin:52px 0 18px;scroll-margin-top:90px} .metric-card .metric-head{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)} .metric-card h3{font-size:22px;margin:0 0 6px} .metric-sum{color:var(--muted);margin:0;font-size:14.5px} .calc-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:11px 14px;margin-bottom:8px;border-radius:10px; background:rgba(255,255,255,.024);font-size:14.5px;color:var(--muted)} .calc-line .op{color:var(--n3);font-family:var(--mono);font-weight:600} .calc-line b{margin-left:auto;font-family:var(--mono)} .formula{font-family:var(--mono);font-size:15px;text-align:center;color:var(--text); padding:18px;margin:18px 0;border-radius:12px; background:rgba(139,92,255,.08);border:1px solid rgba(139,92,255,.24)} .example-box{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:16px 0} .ex-row{display:flex;justify-content:space-between;align-items:center;gap:16px; padding:12px 15px;font-size:14.5px;color:var(--muted);border-bottom:1px solid var(--line)} .ex-row:last-child{border-bottom:0} .ex-row.total{background:rgba(255,255,255,.03);color:var(--text);font-weight:600} /* ---------- calculator ---------- */ .input-prefix{display:flex;align-items:center;border:1px solid var(--line); border-radius:11px;background:rgba(7,5,12,.62);overflow:hidden} .input-prefix span{padding:0 4px 0 13px;color:var(--muted);font-family:var(--mono);font-size:14px} .input-prefix input{border:0;background:none;flex:1;min-width:0} .input-prefix:focus-within{border-color:var(--n1)} .calc-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .calc-cell{padding:16px;border-radius:12px;background:rgba(255,255,255,.026); border:1px solid var(--line)} .calc-cell .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--n3);margin-bottom:8px} .calc-cell .val{font-family:var(--mono);font-size:22px;font-weight:600;line-height:1.1} .calc-cell .sub{font-size:12px;color:var(--muted);margin-top:5px} /* ---------- results range tabs ---------- */ .range-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:12px; background:rgba(255,255,255,.03);border:1px solid var(--line)} .range-tab{padding:8px 15px;border-radius:9px;font-size:13.5px;color:var(--muted); text-decoration:none;transition:background .2s,color .2s} .range-tab:hover{color:var(--text)} .range-tab.on{background:rgba(139,92,255,.18);color:#fff} /* ---------- intro strip when there is no record yet ---------- */ .hero-trust-intro b{font-family:var(--display);font-size:15px;font-weight:600;display:block} @media(max-width:640px){ .team-head{gap:14px} .calc-out{grid-template-columns:1fr 1fr} .roster{grid-template-columns:1fr 1fr} .anchor-h{margin-top:40px} } /* ---------- admin: team editor ---------- */ .roster-head,.roster-row{display:grid;grid-template-columns:1.1fr 1.3fr .9fr .9fr;gap:10px} .roster-head{margin-bottom:8px} .roster-head span{font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim)} .roster-row{margin-bottom:9px} .roster-row input{padding:10px 12px;font-size:13.5px} .mini-row{display:flex;justify-content:space-between;align-items:center;gap:14px; padding:11px 13px;border-radius:10px;background:rgba(255,255,255,.026); border:1px solid var(--line);font-size:13.5px;transition:border-color .2s} .mini-row:hover{border-color:var(--n1)} @media(max-width:900px){ .roster-head{display:none} .roster-row{grid-template-columns:1fr 1fr} } .content-block{padding:18px;margin-bottom:14px;border-radius:14px; background:rgba(255,255,255,.02);border:1px solid var(--line)} /* ---------- collapsible explainers ---------- */ .drops{display:flex;flex-direction:column;gap:12px} .drop{border:1px solid var(--line);border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); overflow:hidden;transition:border-color .25s} .drop:hover{border-color:var(--line-2)} .drop[open]{border-color:rgba(139,92,255,.34)} .drop summary{display:flex;align-items:center;gap:18px;padding:20px 22px;cursor:pointer; list-style:none;user-select:none} .drop summary::-webkit-details-marker{display:none} .drop summary:focus-visible{outline:2px solid var(--n1);outline-offset:-2px} .drop-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .drop-title{font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.01em} .drop-teaser{font-size:13px;color:var(--muted)} .drop-arrow{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; color:var(--n3);background:rgba(34,224,255,.09);border:1px solid rgba(34,224,255,.24); transition:transform .3s cubic-bezier(.2,.8,.2,1),background .25s} .drop-arrow svg{width:16px;height:16px} .drop summary:hover .drop-arrow{background:rgba(34,224,255,.17)} .drop[open] .drop-arrow{transform:rotate(180deg)} .drop-body{padding:0 22px 22px;animation:dropIn .3s cubic-bezier(.2,.8,.2,1)} .drop-body>.prose>:first-child{margin-top:0} @keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .calc-card{border-color:rgba(139,92,255,.3)} @media(prefers-reduced-motion:reduce){ .drop-arrow{transition:none} .drop-body{animation:none} } @media(max-width:640px){ .drop summary{padding:16px 17px;gap:12px} .drop-body{padding:0 17px 18px} .drop-title{font-size:16px} } /* ---------- guide header: compact so the accordion is above the fold ---------- */ .guide-head{text-align:center;max-width:660px;margin:0 auto 28px} .guide-head h1{font-size:clamp(30px,4.4vw,46px);margin-bottom:10px} .guide-head p{font-size:16px;margin:0} /* ---------- accordion: real height animation ----------

cannot transition its own height, so the body is wrapped in a grid row that animates from 0fr to 1fr. The [open] state is driven by JS one frame later, which is what makes the closing direction animate too. */ .drop-body{display:grid;grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.22,.8,.24,1),opacity .26s ease; opacity:0;padding:0 22px;animation:none} .drop-body>.prose{overflow:hidden;min-height:0} .drop.is-open .drop-body{grid-template-rows:1fr;opacity:1;padding-bottom:22px} @media(prefers-reduced-motion:reduce){ .drop-body{transition:none} } @media(max-width:640px){ .drop-body{padding:0 17px} .drop.is-open .drop-body{padding-bottom:18px} } /* ---------- claim code ---------- */ .claim-code{display:flex;align-items:center;justify-content:space-between;gap:14px; margin-top:14px;padding:16px 18px;border-radius:13px;cursor:pointer; background:rgba(139,92,255,.10);border:1px dashed rgba(139,92,255,.45); transition:background .2s,border-color .2s} .claim-code:hover{background:rgba(139,92,255,.17);border-color:rgba(139,92,255,.7)} .claim-code span.mono{font-size:22px;font-weight:600;letter-spacing:.08em} .claim-copy{font-size:12px;color:var(--n3);font-weight:600;text-transform:uppercase;letter-spacing:.1em} .claim-code.copied .claim-copy{color:var(--win)} /* ---------- admin: bulk crest upload ---------- */ .bulk-drop{padding:26px;border:1px dashed var(--line-2);border-radius:var(--radius); text-align:center;background:rgba(255,255,255,.02)} .bulk-list{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px} .bulk-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px; background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:12.5px} .bulk-item.ok{border-color:rgba(43,245,176,.4)} .bulk-item.miss{border-color:rgba(255,78,106,.4);color:var(--muted)} .bulk-item img{width:26px;height:26px;object-fit:contain;flex:none} /* ---------- free plan card ---------- */ .plan-free{opacity:.94} .plan-free .price{color:var(--muted)} .tier-chip.tier-free{background:rgba(242,231,218,.08);border:1px solid var(--line-2);color:var(--muted)} /* ---------- guide: the accordion must be reachable without scrolling ---------- */ .section-guide{padding:44px 0 88px} @media(max-width:640px){.section-guide{padding:28px 0 64px}} /* ---------- admin: payment providers ---------- */ .pay-card{padding:22px;margin-bottom:14px;border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); border:1px solid var(--line);transition:border-color .2s} .pay-card.on{border-color:rgba(139,92,255,.5);background:rgba(139,92,255,.06)} /* ========================================================================== Champions 2026 — toasts, the pick board, the leaderboard ========================================================================== */ /* ---------- toasts ---------- Bottom-right, above everything, and wide enough to read at a glance. They stack downward and each one carries its own life bar so the countdown is visible rather than a surprise. */ .toasts{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;flex-direction:column-reverse; gap:12px;pointer-events:none;max-width:min(420px,calc(100vw - 32px))} .toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;gap:14px;align-items:flex-start; padding:18px 46px 18px 18px;border-radius:16px;border:1px solid var(--line-2); background:rgba(18,13,26,.94);backdrop-filter:blur(18px); box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset; transform:translateY(18px) scale(.97);opacity:0; transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .32s ease} .toast.is-in{transform:none;opacity:1} .toast.is-gone{transform:translateX(26px) scale(.97);opacity:0} .toast-mark{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center; font-family:var(--mono);font-size:15px;font-weight:600} .toast-body{min-width:0} .toast-body b{display:block;font-size:14px;letter-spacing:-.01em;margin-bottom:3px} .toast-body p{margin:0;font-size:14px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere} .toast-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;border:0; background:transparent;color:var(--n3);font-size:19px;line-height:1;cursor:pointer;transition:.2s} .toast-x:hover{background:rgba(255,255,255,.07);color:var(--text)} .toast-life{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left; animation:toastLife linear forwards} .toast.is-held .toast-life{animation-play-state:paused} @keyframes toastLife{from{transform:scaleX(1)}to{transform:scaleX(0)}} .toast-ok .toast-mark{background:rgba(43,245,176,.14);color:#8DFAD8} .toast-ok .toast-life{background:linear-gradient(90deg,#2BF5B0,rgba(43,245,176,.2))} .toast-err .toast-mark{background:rgba(255,78,106,.14);color:#FFA3B1} .toast-err .toast-life{background:linear-gradient(90deg,#FF4E6A,rgba(255,78,106,.2))} .toast-info .toast-mark{background:rgba(139,92,255,.16);color:#C4AEFF} .toast-info .toast-life{background:linear-gradient(90deg,#8B5CFF,rgba(139,92,255,.2))} @media (max-width:620px){ .toasts{right:12px;left:12px;bottom:12px;max-width:none} } @media (prefers-reduced-motion:reduce){ .toast{transition:opacity .2s ease} .toast-life{animation:none;display:none} } /* ---------- a plan card is one click target ---------- */ .plan.is-clickable{cursor:pointer} .plan.is-clickable:focus-visible{outline:2px solid var(--violet);outline-offset:4px} .plan.is-clickable:hover .cta.btn-ghost{border-color:var(--line-3);background:rgba(255,255,255,.05)} .plan.is-clickable:hover .cta.btn-primary{filter:brightness(1.08)} /* ---------- a field you cannot edit should not look like one ---------- */ .field input[readonly],.field input:disabled,.field textarea:disabled{ background:rgba(255,255,255,.02);border-color:var(--line-1);color:var(--n3); cursor:not-allowed;box-shadow:none} .field input[readonly]:focus,.field input:disabled:focus{border-color:var(--line-1);box-shadow:none} .field .locked-note{display:flex;align-items:center;gap:6px;margin-top:7px; font-size:12px;color:var(--n3)} .field .locked-note::before{content:'';width:11px;height:11px;flex:none; background:currentColor;-webkit-mask:var(--lock) center/contain no-repeat;mask:var(--lock) center/contain no-repeat} :root{--lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V7a6 6 0 0 1 12 0v3' fill='none' stroke='black' stroke-width='2.4'/%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5' fill='black'/%3E%3C/svg%3E")} /* ---------- the pick board ---------- */ .pick-board{display:flex;flex-direction:column;gap:10px} .pick-row{display:grid;grid-template-columns:180px 1fr 190px;gap:18px;align-items:center; padding:14px 18px;border-radius:14px;border:1px solid var(--line-1);background:var(--surface-1); transition:border-color .25s,background .25s} .pick-row:hover{border-color:var(--line-2)} .pick-meta{display:flex;flex-direction:column;gap:3px;min-width:0} .pick-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pick-sides{display:grid;grid-template-columns:1fr 34px 1fr;gap:10px;align-items:center} .pick-vs{text-align:center;color:var(--n3);font-size:12px} .pick-side{display:block;border-radius:11px;border:1px solid var(--line-1);background:rgba(255,255,255,.015); transition:border-color .2s,background .2s,transform .2s} .pick-in{width:100%;display:flex;align-items:center;gap:11px;padding:9px 12px;border:0; background:none;color:inherit;font:inherit;text-align:left} button.pick-in{cursor:pointer} .pick-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pick-side.is-live:hover{border-color:var(--line-3);background:rgba(255,255,255,.05);transform:translateY(-1px)} .pick-side.is-on{border-color:rgba(139,92,255,.55);background:rgba(139,92,255,.12)} .pick-side.is-right{border-color:rgba(43,245,176,.5);background:rgba(43,245,176,.1)} .pick-side.is-wrong{border-color:rgba(255,78,106,.42);background:rgba(255,78,106,.08)} .pick-side.is-tbd{justify-content:center;opacity:.5} .pick-state{text-align:right} .contest-cta{margin-top:20px} @media (max-width:860px){ .pick-row{grid-template-columns:1fr;gap:12px} .pick-meta{flex-direction:row;justify-content:space-between} .pick-state{text-align:left} } /* ---------- leaderboard ---------- */ .segbar{display:inline-flex;gap:4px;padding:4px;border-radius:12px;border:1px solid var(--line-1); background:var(--surface-1);flex-wrap:wrap} .seg{padding:8px 16px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted); text-decoration:none;transition:.2s} .seg:hover{color:var(--text);background:rgba(255,255,255,.04)} .seg.on{color:#0A0710;background:linear-gradient(120deg,#8B5CFF,#FF2E88)} table.lb td,table.lb th{padding:13px 14px} table.lb tr.is-me{background:rgba(139,92,255,.08)} .rank{font-weight:700;font-size:15px} .rank-1{color:#FFD76A}.rank-2{color:#D6DCE8}.rank-3{color:#E0A06A} .prize{color:#2BF5B0;font-weight:600} .prize-card{text-align:center} .prize-big{font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:-.03em;margin-bottom:6px} .rules{margin:14px 0 0;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.75} .rules li{margin-bottom:4px} /* ---------- bankroll ---------- */ .bank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:18px} .bank-tile{padding:16px 18px;border-radius:13px;border:1px solid var(--line-1);background:rgba(255,255,255,.02)} .bank-tile b{display:block;font-family:var(--mono);font-size:24px;letter-spacing:-.02em;margin-bottom:3px} .bank-tile span{font-size:12px;color:var(--n3);text-transform:uppercase;letter-spacing:.09em} .bank-tile.up b{color:#2BF5B0}.bank-tile.down b{color:#FF4E6A} /* ---------- tournament header strip ---------- */ .tour-strip{display:flex;flex-wrap:wrap;gap:26px;padding:20px 24px;border-radius:16px; border:1px solid var(--line-1);background:var(--surface-1);margin-top:22px} .tour-strip div{display:flex;flex-direction:column;gap:3px} .tour-strip b{font-family:var(--mono);font-size:17px} .tour-strip span{font-size:11px;color:var(--n3);text-transform:uppercase;letter-spacing:.11em} /* Monospace block for the import format — a format spec you copy should look like something you copy. */ pre.code{margin:8px 0 18px;padding:14px 16px;border-radius:11px;border:1px solid var(--line-1); background:rgba(0,0,0,.28);font-family:var(--mono);font-size:13px;color:var(--n2); overflow-x:auto;white-space:pre} textarea.mono{font-family:var(--mono);font-size:13px;line-height:1.7} .alert ul{color:inherit} /* ---------- pricing grid ---------- The grid follows the number of cards. Two cards in a three-column grid is what put a lonely gap on the right and made the page look broken. */ .plan-grid{display:grid;gap:20px;align-items:stretch} .plan-grid[data-cards="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin:0 auto} .plan-grid[data-cards="3"]{grid-template-columns:repeat(3,minmax(0,1fr))} .plan-grid[data-cards="4"]{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:980px){.plan-grid[data-cards="3"],.plan-grid[data-cards="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:720px){.plan-grid{grid-template-columns:1fr!important;max-width:460px}} .plan .price small{white-space:nowrap} .pick-pending{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px; border:1px dashed var(--line-2);background:rgba(255,255,255,.012);color:var(--n3);font-size:13px;line-height:1.55} .pick-pending b{font-size:22px;color:var(--muted);flex:none} /* A value you cannot change is not a disabled text box — a disabled text box still looks like somewhere to type, and browsers happily autofill and highlight it. It is a piece of text in a frame. */ .static-value{padding:12px 14px;border-radius:11px;border:1px dashed var(--line-1); background:rgba(255,255,255,.015);color:var(--n3);font-size:14px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all} /* ========================================================================== Round 4 — languages, Google, the prize flag, the bank ========================================================================== */ /* ---------- language switcher ---------- A

menu: no JavaScript, keyboard-operable, and the names stay in their own alphabets because that is how people find their language. */ .langpick{position:relative} .langpick>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px; padding:7px 11px;border-radius:10px;border:1px solid var(--line-1);color:var(--muted); font-size:13px;font-weight:600;transition:.2s;user-select:none} .langpick>summary::-webkit-details-marker{display:none} .langpick>summary:hover{color:var(--text);border-color:var(--line-2);background:rgba(255,255,255,.04)} .lp-globe{display:block;width:15px;height:15px;opacity:.75} .lp-globe svg{width:100%;height:100%} .lp-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:190px;padding:6px; border-radius:13px;border:1px solid var(--line-2);background:rgba(18,13,26,.97); backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(0,0,0,.5)} .lp-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px; font-size:14px;color:var(--muted);text-decoration:none;transition:.16s} .lp-menu a:hover{background:rgba(255,255,255,.06);color:var(--text)} .lp-menu a.on{color:var(--text);background:rgba(139,92,255,.14)} .lp-code{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--n3); min-width:24px} .lp-menu a.on .lp-code{color:#C4AEFF} @media (max-width:620px){.langpick>summary b{display:none}.langpick>summary{padding:7px 9px}} /* A page whose body is still English says so rather than pretending. */ .en-only{padding:11px 16px;border-radius:11px;border:1px dashed var(--line-2); background:rgba(255,255,255,.015);color:var(--n3);font-size:13px;margin-bottom:24px} /* ---------- Google button ---------- */ .btn-google{display:flex;align-items:center;justify-content:center;gap:10px; background:#fff;color:#1F1F1F;border:1px solid #fff;font-weight:600} .btn-google:hover{background:#F1F3F4;border-color:#F1F3F4;color:#1F1F1F} .btn-google svg{flex:none} .or-line{display:flex;align-items:center;gap:14px;margin:20px 0 4px; color:var(--n3);font-size:12px;text-transform:uppercase;letter-spacing:.09em} .or-line::before,.or-line::after{content:'';flex:1;height:1px;background:var(--line-1)} /* ---------- the free prize flag on the hero ---------- The single most persuasive fact on the page is that a thousand dollars is available for nothing, so it gets its own object above the buttons rather than a clause inside a paragraph nobody finishes. */ .free-flag{display:flex;align-items:center;gap:15px;margin:26px 0 22px;padding:15px 18px; max-width:600px; border-radius:16px;text-decoration:none;position:relative;overflow:hidden; border:1px solid rgba(43,245,176,.30); background:linear-gradient(100deg,rgba(43,245,176,.12),rgba(34,224,255,.06) 55%,transparent); transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s} .free-flag:hover{transform:translateY(-2px);border-color:rgba(43,245,176,.55)} .ff-tag{flex:none;padding:5px 11px;border-radius:99px;background:#2BF5B0;color:#04120C; font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .ff-text{font-size:14px;color:var(--muted);line-height:1.5} .ff-text b{display:block;color:var(--text);font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:2px} .ff-go{margin-left:auto;flex:none;color:#2BF5B0;font-size:20px;transition:transform .3s} .free-flag:hover .ff-go{transform:translateX(4px)} @media (max-width:560px){.free-flag{flex-wrap:wrap}.ff-go{display:none}} /* ---------- track record, grouped by tournament ---------- */ .tour-panels{display:flex;flex-direction:column;gap:12px} .tour-panel{border:1px solid var(--line-1);border-radius:16px;background:var(--surface-1); overflow:hidden;transition:border-color .25s} .tour-panel[open],.tour-panel:hover{border-color:var(--line-2)} .tour-panel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px; padding:20px 22px;user-select:none} .tour-panel>summary::-webkit-details-marker{display:none} .tp-name{min-width:0;flex:1} .tp-name b{display:block;font-size:16px;letter-spacing:-.01em;margin-bottom:3px} .tp-sub{font-size:13px;color:var(--n3)} .tp-figure{text-align:right;flex:none} .tp-figure b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em} .tp-figure span{font-size:11px;color:var(--n3);text-transform:uppercase;letter-spacing:.09em} .tp-figure.up b{color:#2BF5B0} .tp-figure.down b{color:#FF4E6A} .tour-panel .drop-body{padding:0 22px 6px} .tour-panel[open] .drop-arrow{transform:rotate(180deg)} .record-note{border-color:rgba(139,92,255,.28)} @media (max-width:640px){ .tour-panel>summary{flex-wrap:wrap;gap:12px} .tp-figure{text-align:left} } /* ---------- the bank simulator ---------- */ .input-money{display:flex;align-items:center;border-radius:11px;border:1px solid var(--line-2); background:rgba(7,5,12,.62);overflow:hidden;transition:.18s} .input-money:focus-within{border-color:rgba(139,92,255,.7);box-shadow:0 0 0 3px rgba(139,92,255,.16)} .input-money span{padding:0 4px 0 14px;color:var(--n3);font-family:var(--mono);font-size:15px} .input-money input{border:0;background:none;box-shadow:none!important;padding-left:4px} .input-money input:focus{border:0} .sim-out{display:flex;flex-direction:column;gap:10px;margin-top:20px} .sim-row{display:grid;grid-template-columns:1fr auto auto;gap:22px;align-items:center; padding:15px 18px;border-radius:13px;border:1px solid var(--line-1);background:rgba(255,255,255,.015)} .sim-when b{display:block;font-size:15px;margin-bottom:2px} .sim-when span{font-size:12px;color:var(--n3)} .sim-end{text-align:right} .sim-end b{display:block;font-size:21px;letter-spacing:-.02em} .sim-end span{font-size:12px;color:var(--n3)} .sim-row.up .sim-end b{color:#2BF5B0} .sim-row.down .sim-end b{color:#FF4E6A} .sim-dip{text-align:right;min-width:88px} .sim-dip b{display:block;font-size:15px;color:#FF9AA8} .sim-dip span{font-size:11px;color:var(--n3);text-transform:uppercase;letter-spacing:.08em} @media (max-width:640px){ .sim-row{grid-template-columns:1fr 1fr;gap:14px} .sim-dip{grid-column:1/-1;text-align:left;border-top:1px solid var(--line-1);padding-top:10px} } /* ---------- the member's own bank ---------- */ .bank-headline{text-align:right} .bank-headline b{display:block;font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.03em} .bank-headline span{font-size:13px;color:var(--n3)} .bank-headline.up b{color:#2BF5B0} .bank-headline.down b{color:#FF4E6A} .bank-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:18px} .bank-form .field{flex:1;min-width:180px;max-width:260px} .backtest{margin-top:24px;padding-top:22px;border-top:1px solid var(--line-1)} table.bank-log td,table.bank-log th{padding:11px 13px} .stake-you{margin-top:5px;font-size:13px;font-weight:600;color:#22E0FF} .stake-you span{display:block;font-size:11px;font-weight:400;color:var(--n3)} /* A section heading sat on the same line as its kicker, because .kicker is inline-flex and .sec-head h2 is inline-block — two inline-level boxes flow side by side. The kicker becomes a block of its own width inside a heading group; the underline animation on the h2 still needs inline-block, so that stays as it was. */ .sec-head .kicker,.guide-head .kicker,.hero .kicker{display:flex;width:fit-content} /* The tournament panels reuse .drop-body, which starts collapsed and is opened by the shared JS adding .is-open. Without this rule a panel rendered with the `open` attribute would show its arrow turned and nothing underneath it. */ .tour-panel.is-open .drop-body{grid-template-rows:1fr;opacity:1} /* With JavaScript off there is no .is-open to add, and a track record nobody can read is worse than one that does not animate. The flag is set by a one-line script in the head, so this branch only applies when it is not. */ html:not(.js) .tour-panel[open] .drop-body, html:not(.js) .drop[open] .drop-body{grid-template-rows:1fr;opacity:1} .tour-panel .drop-body{padding-left:22px;padding-right:22px} /* ========================================================================== Round 5 — quiet loading, live picking, error screens, the bank log ========================================================================== */ /* The loading screen, second time onwards: no bar, no logo rise, just enough of a fade that the page does not flash. `gone` is the JS hand-off; the CSS timer underneath it is still the safety net. */ .preload.is-quick{animation:none;background:var(--bg)} .preload.is-quick .preload-inner{display:none} .preload.gone{animation:preload-out .35s ease forwards} /* A row mid-request, and the flash when a pick lands. Both are deliberately small: the point of not reloading is that nothing jumps. */ .pick-row.is-sending{opacity:.72} .pick-row.is-sending .pick-side{pointer-events:none} .pick-side.just-picked{animation:pickFlash .5s ease} @keyframes pickFlash{ 0%{box-shadow:0 0 0 0 rgba(139,92,255,.5)} 100%{box-shadow:0 0 0 12px rgba(139,92,255,0)} } @media (prefers-reduced-motion:reduce){.pick-side.just-picked{animation:none}} /* The board is readable but not clickable until the address is confirmed. */ .pick-board[data-locked] .pick-side.is-live{opacity:.55;pointer-events:none} .verify-cta{border-color:rgba(255,209,102,.4)} /* ---------- 404, 500, banned ---------- */ .status-screen{max-width:640px;margin:40px auto;text-align:center;padding:52px 32px; border-radius:24px;border:1px solid var(--line-1);background:var(--surface-1);position:relative} .status-code{font-size:88px;font-weight:700;line-height:1;letter-spacing:-.05em; background-image:var(--grad);background-origin:border-box;-webkit-background-clip:text; background-clip:text;color:transparent;opacity:.85;margin-bottom:10px} .status-screen h1{font-size:clamp(26px,4vw,38px);margin-bottom:12px} .status-screen p{max-width:460px;margin:0 auto} .status-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px} .status-bad{border-color:rgba(255,78,106,.3)} .status-bad .status-code{background-image:linear-gradient(120deg,#FF4E6A,#FF9AA8)} .ban-screen{border-color:rgba(255,78,106,.45); background:linear-gradient(180deg,rgba(255,78,106,.10),rgba(255,78,106,.02))} .ban-mark{width:66px;height:66px;margin:0 auto 18px;color:#FF4E6A} .ban-mark svg{width:100%;height:100%} .ban-reason{margin:22px auto 0;max-width:460px;padding:16px 18px;border-radius:13px; border:1px solid rgba(255,78,106,.3);background:rgba(255,78,106,.06);text-align:left} .ban-reason p{margin:6px 0 0;color:var(--text);font-size:15px} .ban-contact{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:5px} .ban-contact a{color:#22E0FF;font-size:15px} /* ---------- verification ---------- */ .code-input{text-align:center;font-size:30px;letter-spacing:.4em;padding:16px 14px} .code-input::placeholder{letter-spacing:.4em;opacity:.25} /* ---------- the bank, managed ---------- */ .bank-actions{margin-top:22px;border-top:1px solid var(--line-1);padding-top:18px} .bank-actions>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px; font-size:14px;font-weight:600;color:var(--muted);user-select:none} .bank-actions>summary::-webkit-details-marker{display:none} .bank-actions>summary::after{content:'';width:8px;height:8px;border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-left:2px;margin-top:-3px; transition:transform .25s} .bank-actions[open]>summary::after{transform:rotate(-135deg);margin-top:2px} .bank-actions>summary:hover{color:var(--text)} .bank-actions-body{padding-top:16px} .bank-row{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end} .bank-row .bank-form{margin-top:0} table.bank-log tr.log-money{background:rgba(139,92,255,.07)} table.bank-log tr.log-money td{border-top:1px solid rgba(139,92,255,.18)} /* ---------- skipping one of our picks ---------- */ .skip-form{margin-top:14px} .skip-form.is-skipped .btn{border-color:rgba(255,209,102,.5);color:#FFD76A} .kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0; border-bottom:1px solid var(--line-1);font-size:14px} .kv:last-of-type{border-bottom:0} .kv span{color:var(--n3)} .dup-group{padding:16px 18px;border-radius:14px;border:1px solid var(--line-1); background:rgba(255,255,255,.015)} .mb8{margin-bottom:8px} .mt8{margin-top:8px} /* The analysis is written once, in one language. When that is not the reader's language, the page says so instead of pretending or machine-translating it. */ .orig-lang{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; padding:4px 9px;border-radius:99px;border:1px solid var(--line-2);color:var(--n3);cursor:help} /* ========================================================================== Ported from v6: avatars, the bank chart, the pass celebration. Same components, recoloured onto this palette — violet/magenta/cyan, never gold. Aliases first, because the v6 markup asks for a couple of token names this sheet never had. ========================================================================== */ :root{ --line-1:var(--line); --line-3:var(--line-2); --surface-1:var(--panel); --ember:var(--n2); } /* ---------- the two hero buttons, equal width ---------- */ .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;max-width:600px} .hero-cta .btn{width:100%} /* ---------- avatars ---------- No picture means initials on a violet tile, not a grey silhouette: a silhouette reads as "this person never finished setting up". */ .avatar{border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center; background:linear-gradient(150deg,rgba(139,92,255,.28),rgba(34,224,255,.08)); border:1px solid var(--line-2);color:#DCD4E8;font-family:var(--mono);font-weight:600; letter-spacing:.02em;user-select:none} .avatar img{width:100%;height:100%;object-fit:cover} .avatar-xs{width:24px;height:24px;font-size:9px} .avatar-sm{width:32px;height:32px;font-size:11px} .avatar-md{width:56px;height:56px;font-size:17px} .avatar-lg{width:96px;height:96px;font-size:30px;border-width:2px} .avatar-edit{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .avatar-drop{position:relative;border-radius:50%;cursor:pointer; transition:transform .25s,box-shadow .25s} .avatar-drop:hover{transform:scale(1.03);box-shadow:0 0 0 4px rgba(139,92,255,.18)} .avatar-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%} .avatar-drop.is-over{box-shadow:0 0 0 4px rgba(34,224,255,.32)} .avatar-hint{font-size:13px;color:var(--muted);max-width:34ch;line-height:1.6} /* ---------- the bank curve ---------- Three layers in order: the drawdown band, the line, then a dot on every deposit and withdrawal so a jump is never mistaken for a won pick. */ .bank-chart{position:relative;margin-top:22px;border-radius:16px;border:1px solid var(--line); background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.12));padding:20px 20px 14px; overflow:hidden} .bank-chart svg{width:100%;display:block;overflow:visible} .bc-grid line{stroke:rgba(242,231,218,.07);stroke-width:1} .bc-zero{stroke:rgba(139,92,255,.30);stroke-width:1;stroke-dasharray:4 4} .bc-area{opacity:0} .bank-chart.in .bc-area{animation:fadeIn .9s ease .55s forwards} .bc-line{stroke-dasharray:3000;stroke-dashoffset:3000} .bank-chart.in .bc-line{animation:draw 1.6s cubic-bezier(.3,.8,.3,1) forwards} .bc-dd{fill:rgba(255,78,106,.20);opacity:0} .bank-chart.in .bc-dd{animation:fadeIn .8s ease .9s forwards} .bc-dot{fill:var(--bg);stroke:var(--n3);stroke-width:2.4;opacity:0} .bank-chart.in .bc-dot{animation:fadeIn .4s ease 1.2s forwards} .bc-dot.is-money{stroke:var(--n2)} .bc-label{font-family:var(--mono);font-size:10px;fill:var(--dim)} .bc-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px} .bc-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)} .bc-legend i{width:14px;height:2px;border-radius:2px;display:block} .bc-legend i.line{background:var(--n3)} .bc-legend i.money{background:var(--n2)} .bc-legend i.dd{background:rgba(255,78,106,.5);height:9px;border-radius:2px} .bc-peak{font-family:var(--mono);font-size:10px;fill:var(--n3)} /* ---------- the pass celebration ---------- The old version drew the same node-and-edge network as the background. This one is a shockwave: rings, shards along the ring, sparks that fall. */ .celebrate-layer{position:fixed;inset:0;z-index:140;display:grid;place-items:center; pointer-events:none;opacity:0;transition:opacity .45s ease; background:radial-gradient(circle at 50% 50%,rgba(139,92,255,.30),rgba(10,7,16,.92))} .celebrate-layer.show{opacity:1;pointer-events:auto} .celebrate-layer.gone{opacity:0} .celebrate-layer canvas{position:absolute;inset:0} .celebrate-copy{position:relative;text-align:center; animation:riseIn .9s cubic-bezier(.22,.8,.24,1) both .25s} .celebrate-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.3em; text-transform:uppercase;color:var(--n3);margin-bottom:10px} .celebrate-tier{font-family:var(--display);font-size:clamp(44px,8vw,92px);font-weight:700; line-height:1;background-image:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent} .celebrate-sub{color:var(--muted);margin-top:12px} @keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* ---------- the background cracks ---------- Kintsugi from the key art, kept quiet: one wide glow and one hairline, both pinned BEHIND the content (z-index:-1) so no crack ever crosses a headline or a card the way it did on the first pass. */ body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='900'%3E%3Cg fill='none' stroke='%23FF2E88' stroke-width='8' opacity='0.11'%3E%3Cpath d='M-20 170 L215 295 L305 245 L520 415 L615 375 L900 555 L1125 495 L1460 685'/%3E%3C/g%3E%3Cg fill='none' stroke='%23FF7FB4' stroke-width='1' opacity='0.45'%3E%3Cpath d='M-20 170 L215 295 L305 245 L520 415 L615 375 L900 555 L1125 495 L1460 685'/%3E%3Cpath d='M305 245 L360 118 L432 58'/%3E%3Cpath d='M615 375 L682 248 L702 120'/%3E%3Cpath d='M1125 495 L1205 378 L1262 298'/%3E%3Cpath d='M520 415 L470 560 L522 700 L440 880'/%3E%3Cpath d='M900 555 L960 690 L920 860'/%3E%3C/g%3E%3C/svg%3E"); background-size:cover;background-position:center} .plexus{display:none} /* ========================================================================== Typesetting and rhythm ========================================================================== */ /* `balance` evens the lines of a short block, which is what stops a new sentence from starting with one orphaned word at the end of a line — "… read properly. Form," was the case that prompted this. `pretty` does the same job for longer runs without the line-count limit. */ h1, h2, h3, .hero h1, .celebrate-tier { text-wrap: balance; } .lead, .free-flag .ff-text, .card-pad > p, .kicker + h2 + p { text-wrap: balance; } p, li, .muted, .prose p { text-wrap: pretty; } /* The tournament facts are a thin bar, so the full 44+88px of section padding under it read as a hole rather than as breathing room. */ section.section-sm:has(.tour-strip) { padding-bottom: 0; } /* ========================================================================== Narrow screens ========================================================================== */ /* A grid item's default min-width is auto, so a long team name refuses to shrink and pushes the whole row past the edge of the phone. Every grid that holds text needs this; the pick board was the one that showed it. */ .pick-row, .pick-sides, .pick-meta, .pick-side, .pick-in { min-width: 0; } .pick-name, .pick-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 560px) { /* Two buttons side by side at 390px leaves 167px each, which truncates the label that matters most. One per line, full width. */ .hero-cta { grid-template-columns: 1fr; } /* Two crests and a dash do not fit beside two full club names at 390px, so the sides stack and the dash becomes a divider. */ .pick-sides { grid-template-columns: 1fr; gap: 8px; } .pick-vs { display: none; } .pick-meta { flex-direction: column; align-items: flex-start; gap: 4px; } .pick-row { padding: 12px 14px; } }