/* ========================================================================= * REHAB REJECTS — Premium Landing Page * ========================================================================= */ :root { --bg: #09090b; --bg2: #0e0e12; --card: #111115; --card2: #17171c; --border: rgba(255,255,255,0.08); --text: #fafafa; --textsub: #a1a1aa; --muted: #71717a; --pink: #ec4899; --pink2: #f472b6; --pinkdark: #db2777; --gold: #ffcc00; --gold2: #ff9e00; --em: #10b981; --radius: 18px; --maxw: 1120px; --font: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif; --display: 'Russo One', var(--font); } * { box-sizing: border-box; -webkit-font-smoothing: antialiased; } /* overflow-x: clip na zabija fantomowy poziomy scroll z dekoracyjnych, pozycjonowanych elementów (bloby/floating-badge wychodzące poza ekran). Pewniejsze niż 'hidden' — nie tworzy kontekstu scrollowania. Fallback: body hidden. */ html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; max-width: 100vw; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3 { line-height: 1.1; margin: 0; } section { position: relative; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .display { font-family: var(--display); letter-spacing: .02em; } .accent { color: var(--pink); } .gold { color: var(--gold); } /* ── Noise texture overlay ────────────────────────────────────────────── */ .noise-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; } /* ── Blobs ────────────────────────────────────────────────────────────── */ .bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(100px); } .blob.b1 { width: 600px; height: 600px; background: #ec489944; top: -200px; left: -150px; animation: float1 16s ease-in-out infinite; } .blob.b2 { width: 500px; height: 500px; background: #a855f733; bottom: -200px; right: -150px; animation: float2 20s ease-in-out infinite; } .blob.b3 { width: 400px; height: 400px; background: #ffcc0018; top: 45%; left: 55%; animation: float1 24s ease-in-out infinite; } @keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,35px)} } @keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,-35px)} } /* ── Scroll progress bar ──────────────────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60; background: linear-gradient(90deg, #f472b6, #ec4899 45%, #ffcc00); box-shadow: 0 0 12px rgba(236,72,153,.55); will-change: width; } /* ── Header ───────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(9,9,11,.65); border-bottom: 1px solid var(--border); transition: background .3s, box-shadow .3s, border-color .3s; } .site-header.scrolled { background: rgba(9,9,11,.88); box-shadow: 0 8px 30px rgba(0,0,0,.4); border-bottom-color: rgba(236,72,153,.15); } .site-header .wrap { display: flex; align-items: center; gap: 14px; height: 64px; } .logo-row { display: flex; align-items: center; gap: 10px; } .logo-row img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #27272b, 0 0 16px rgba(236,72,153,.35); } .logo-name { font-family: var(--display); font-size: 16px; letter-spacing: .12em; background: linear-gradient(90deg,#f9a8d4,#ec4899 45%,#db2777); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: gradMove 6s linear infinite; } @keyframes gradMove { to { background-position: 200% center; } } .nav { margin-left: auto; display: flex; align-items: center; gap: 6px; } .nav a { padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--textsub); transition: .18s; position: relative; } .nav a:hover { color: var(--text); background: rgba(255,255,255,.05); } .nav .btn { margin-left: 6px; } .nav a:not(.btn)::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: linear-gradient(90deg,#f472b6,#a855f7); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .nav a:not(.btn):hover::after { transform: scaleX(1); } .menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 10px; width: 42px; height: 42px; font-size: 20px; cursor: pointer; } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; white-space: nowrap; position: relative; overflow: hidden; } .btn:active { transform: scale(.97); } .btn::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); transition: left .55s ease; } .btn:hover::after { left: 140%; } .btn-primary { background: linear-gradient(135deg,#f472b6,#ec4899 55%,#db2777); color: #fff; box-shadow: 0 8px 24px rgba(236,72,153,.35); } .btn-primary:hover { box-shadow: 0 12px 34px rgba(236,72,153,.5); transform: translateY(-2px); } .btn-ghost { background: rgba(255,255,255,.04); border-color: var(--border); color: var(--text); } .btn-ghost:hover { background: rgba(255,255,255,.08); } .btn-gold { background: linear-gradient(135deg,#ffe566,#ffcc00 45%,#ff9e00); color: #2a1c00; box-shadow: 0 8px 24px rgba(255,170,0,.3); } .btn-gold:hover { box-shadow: 0 12px 34px rgba(255,170,0,.5); transform: translateY(-2px); } /* ── Store badges ─────────────────────────────────────────────────────── */ .stores { display: flex; flex-wrap: wrap; gap: 12px; } .store-badge { display: inline-flex; align-items: center; gap: 11px; padding: 10px 18px; border-radius: 14px; background: #000; border: 1px solid rgba(255,255,255,.14); transition: transform .15s, border-color .2s, box-shadow .2s; min-width: 184px; } .store-badge:hover { transform: translateY(-2px); border-color: rgba(236,72,153,.5); box-shadow: 0 10px 30px rgba(0,0,0,.5); } .store-badge .ic { font-size: 26px; line-height: 1; } .store-badge .tt { display: flex; flex-direction: column; line-height: 1.15; } .store-badge .tt small { font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; } .store-badge .tt b { font-size: 16px; font-weight: 700; } .store-badge.soon { opacity: .6; cursor: default; } .store-badge .pill { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: .06em; background: rgba(255,204,0,.15); color: var(--gold); padding: 3px 7px; border-radius: 999px; } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { padding: 64px 0 72px; } .hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); background: rgba(236,72,153,.1); border: 1px solid rgba(236,72,153,.25); padding: 6px 12px; border-radius: 999px; margin-bottom: 20px; animation: eyebrowGlow 3.2s ease-in-out infinite; } @keyframes eyebrowGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(236,72,153,0); } 50% { box-shadow: 0 0 22px 0 rgba(236,72,153,.28); } } .hero h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.02em; } .hero h1 .grad { background: linear-gradient(90deg,#f9a8d4,#ec4899 50%,#a855f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: gradMove 6s linear infinite; } .hero p.lead { font-size: 18px; color: var(--textsub); margin: 18px 0 26px; max-width: 520px; } .hero-cta { display: flex; flex-direction: column; gap: 18px; } /* ── Phone mockup ─────────────────────────────────────────────────────── */ .phone-stage { display: flex; justify-content: center; perspective: 1400px; position: relative; } .phone { width: 280px; aspect-ratio: 9/19.5; border-radius: 38px; padding: 10px; background: linear-gradient(160deg,#1a1a20,#0a0a0e); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(236,72,153,.12), 0 0 70px rgba(236,72,153,.18); animation: phoneFloat 6s ease-in-out infinite; position: relative; z-index: 2; } @keyframes phoneFloat { 0%,100% { transform: rotateY(-12deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(-8deg) rotateX(2deg) translateY(-14px); } } /* Glow ring under phone */ .phone::before { content: ''; position: absolute; inset: -2px; border-radius: 40px; z-index: -1; background: conic-gradient(from 0deg, rgba(236,72,153,.0), rgba(236,72,153,.35), rgba(168,85,247,.35), rgba(255,204,0,.25), rgba(236,72,153,.0)); filter: blur(14px); opacity: .55; animation: ringSpin 9s linear infinite; } @keyframes ringSpin { to { transform: rotate(360deg); } } .phone-screen { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #1b1020, #09090b 60%); position: relative; display: flex; flex-direction: column; } .phone-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 92px; height: 18px; background: #000; border-radius: 12px; z-index: 3; } .ps-head { padding: 30px 16px 10px; display: flex; align-items: center; gap: 9px; } .ps-head img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px #27272b; } .ps-head .nm { font-family: var(--display); font-size: 12px; letter-spacing: .08em; color: #ec4899; } .ps-card { margin: 8px 14px; padding: 12px; border-radius: 14px; background: #111115; border: 1px solid rgba(255,255,255,.07); } .ps-goal-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 9px; } .ps-goal-num { font-family: var(--display); font-size: 22px; color: #fafafa; } .ps-goal-num small { font-family: var(--font); font-size: 12px; color: #71717a; } .ps-bar { height: 9px; background: #1e1e24; border-radius: 999px; overflow: hidden; } .ps-bar > i { display: block; height: 100%; width: 72%; border-radius: 999px; background: linear-gradient(90deg,#f472b6,#ec4899); } .ps-rank { margin: 8px 14px; display: flex; flex-direction: column; gap: 6px; } .ps-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 11px; background: #0e0e12; border: 1px solid rgba(255,255,255,.05); } .ps-row .pos { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; } .ps-row .nick { font-family: var(--display); font-size: 12px; flex: 1; } .ps-row .pts { font-family: var(--display); font-size: 12px; } /* Karty celu w mockupie (kroki / treningi) — jak realny ekran Home */ .ps-grow { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } .ps-emoji { font-size: 15px; line-height: 1; } .ps-lbl { font-size: 9px; font-weight: 700; letter-spacing: .1em; color: #a1a1aa; text-transform: uppercase; } .ps-val { margin-left: auto; font-family: var(--display); font-size: 16px; color: #fafafa; } .ps-val small { font-family: var(--font); font-size: 10px; color: #71717a; } .ps-bar > i.em { background: linear-gradient(90deg, #34d399, #10b981); } .ps-foot { font-size: 9px; font-weight: 700; color: #71717a; margin-top: 7px; } .ps-foot.ok { color: #10b981; } /* ── Social proof ─────────────────────────────────────────────────────── */ .proof { padding: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .proof-item { display: flex; flex-direction: column; gap: 6px; } .proof-num { font-family: var(--display); font-size: clamp(28px,4vw,42px); line-height: 1; background: linear-gradient(135deg,#f9a8d4,#ec4899 50%,#a855f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: gradMove 6s linear infinite; } .proof-label { font-size: 14px; color: var(--muted); letter-spacing: .04em; } /* ── Section headings ─────────────────────────────────────────────────── */ .sec { padding: 72px 0; } .sec-head { text-align: center; max-width: 680px; margin: 0 auto 48px; } .sec-head .kicker { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); } .sec-head h2 { font-size: clamp(26px,3.4vw,38px); font-weight: 800; letter-spacing: -.02em; margin: 12px 0 10px; } .sec-head p { color: var(--textsub); font-size: 17px; } /* ── Feature grid ─────────────────────────────────────────────────────── */ .grid { display: grid; gap: 16px; } .grid.f2 { grid-template-columns: repeat(2, 1fr); } .feature { padding: 28px; border-radius: var(--radius); transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s; position: relative; overflow: hidden; } .feature .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: rgba(236,72,153,.12); border: 1px solid rgba(236,72,153,.25); margin-bottom: 16px; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s; } .feature:hover .ic { transform: scale(1.12) rotate(-4deg); box-shadow: 0 8px 22px rgba(236,72,153,.35); background: rgba(236,72,153,.18); } .feature h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .feature p { color: var(--textsub); font-size: 15px; margin: 0; } /* Glass card variant */ .feature.glass { background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); } .feature.glass:hover { transform: translateY(-4px); border-color: rgba(236,72,153,.35); box-shadow: 0 16px 40px rgba(0,0,0,.4); } /* ── Steps ────────────────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; counter-reset: step; } .step { background: linear-gradient(160deg, var(--card2), var(--card)); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; position: relative; transition: transform .25s, border-color .25s, box-shadow .25s; } .step:hover { transform: translateY(-4px); border-color: rgba(236,72,153,.35); box-shadow: 0 16px 40px rgba(0,0,0,.4); } .step::before { counter-increment: step; content: counter(step); position: absolute; top: -16px; left: 22px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); background: linear-gradient(135deg,#f472b6,#db2777); color: #fff; box-shadow: 0 6px 18px rgba(236,72,153,.4); } .step h3 { margin: 14px 0 8px; font-size: 18px; } .step p { color: var(--textsub); margin: 0; font-size: 15px; } /* ── CTA band ─────────────────────────────────────────────────────────── */ .cta-band { margin: 30px auto; max-width: var(--maxw); } .cta-inner { border-radius: 26px; padding: 46px 32px; text-align: center; position: relative; overflow: hidden; background: radial-gradient(120% 130% at 50% 0%, rgba(236,72,153,.22), rgba(17,17,21,.9) 60%); border: 1px solid rgba(236,72,153,.3); } .cta-inner h2 { font-size: clamp(24px,3vw,34px); font-weight: 800; margin-bottom: 12px; } .cta-inner p { color: var(--textsub); margin: 0 auto 24px; max-width: 520px; } .cta-inner .stores { justify-content: center; } /* ── FAQ ──────────────────────────────────────────────────────────────── */ .faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq details { background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 14px; transition: border-color .25s; } .faq details[open] { border-color: rgba(236,72,153,.25); } .faq summary { cursor: pointer; padding: 16px 18px; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--pink); font-size: 22px; transition: transform .25s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { color: var(--textsub); margin: 0 0 16px; padding: 0 18px; } /* ── Footer ───────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding: 44px 0 30px; margin-top: 40px; background: var(--bg2); } .footer-grid { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; } .footer-brand { max-width: 320px; } .footer-brand p { color: var(--muted); font-size: 14px; margin-top: 12px; } .footer-col h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .footer-col a { display: block; color: var(--textsub); font-size: 14px; padding: 5px 0; } .footer-col a:hover { color: var(--pink); } .footer-bottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; color: var(--muted); font-size: 13px; } /* ── Legal / doc pages ────────────────────────────────────────────────── */ .doc { max-width: 820px; margin: 0 auto; padding: 50px 0 30px; } .doc h1 { font-size: 34px; font-weight: 800; margin-bottom: 8px; } .doc .updated { color: var(--muted); font-size: 14px; margin-bottom: 30px; } .doc h2 { font-size: 22px; margin: 34px 0 12px; } .doc h3 { font-size: 17px; margin: 22px 0 8px; } .doc p, .doc li { color: var(--textsub); font-size: 16px; } .doc ul { padding-left: 20px; } .doc a { color: var(--pink); } .doc .box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin: 20px 0; } /* ── Ranking page ─────────────────────────────────────────────────────── */ .rank-hero { padding: 40px 0 10px; text-align: center; } .rank-hero h1 { font-size: clamp(28px,4vw,42px); font-weight: 800; } .rank-hero p { color: var(--textsub); margin-top: 10px; } .code-form { display: flex; gap: 10px; max-width: 440px; margin: 26px auto 0; } .code-form input { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 15px 18px; color: var(--text); font-size: 20px; letter-spacing: .3em; text-align: center; font-weight: 800; text-transform: uppercase; } .code-form input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(236,72,153,.18); } .rank-status { text-align: center; color: var(--muted); margin-top: 22px; min-height: 24px; } .rank-status.err { color: #f87171; } .rank-wrap { max-width: 720px; margin: 24px auto 0; } .rank-group-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; } .rank-group-head .em { font-size: 30px; } .rank-group-head .em-logo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 3px; } .rank-group-head .em-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .rank-group-head .nm { font-family: var(--display); font-size: 22px; background: linear-gradient(90deg,#f9a8d4,#ec4899 45%,#db2777); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: gradMove 6s linear infinite; } .tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; background: rgba(10,10,14,.6); padding: 5px; border-radius: 14px; border: 1px solid var(--border); width: fit-content; margin-inline: auto; } .tab-btn { border: none; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 10px; cursor: pointer; transition: .18s; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: #fff; background: linear-gradient(135deg,#f472b6,#db2777); box-shadow: 0 4px 14px rgba(236,72,153,.35); } .periods { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin: 14px 0 22px; } .period-btn { border: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: 12px; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: .18s; } .period-btn.active { color: #2a1c00; background: linear-gradient(135deg,#ffe566,#ffcc00,#ff9e00); border-color: transparent; font-weight: 800; } .rank-list { display: flex; flex-direction: column; gap: 8px; } .rcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); transition: transform .12s, box-shadow .12s; } .rcard:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.45); } .rcard .pos { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; } .rcard .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; } .rcard .av img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; } .rcard .meta { flex: 1; min-width: 0; } .rcard .meta .nk { font-family: var(--display); font-size: 15px; } .rcard .meta .sub { font-size: 11px; color: var(--muted); } .rcard .pts { font-family: var(--display); font-size: 16px; text-align: right; } .rcard .pts small { display: block; font-family: var(--font); font-size: 8px; letter-spacing: .1em; color: var(--muted); font-weight: 700; } .rcard.top1 { border-color: rgba(255,204,0,.4); box-shadow: 0 0 0 1px rgba(255,204,0,.18), 0 8px 30px rgba(0,0,0,.5); } .rcard.top2 { border-color: rgba(96,165,250,.35); } .rcard.top3 { border-color: rgba(248,113,113,.35); } .pos.p1 { background: linear-gradient(145deg,#ffe566,#ffcc00,#ff9e00); color:#3b1f00; } .pos.p2 { background: linear-gradient(145deg,#93c5fd,#3b82f6); color:#fff; } .pos.p3 { background: linear-gradient(145deg,#fca5a5,#ef4444); color:#fff; } .pos.pN { background: #27272b; color: #a1a1aa; } /* ── Avatar (shared by podium + cards) ────────────────────────────────── */ .rcard .rav, .rpod .rav { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; font-family: var(--display); flex-shrink: 0; background: var(--card2); } .rcard .rav { width: 40px; height: 40px; font-size: 15px; } .rcard .rav img, .rpod .rav img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .rcard .meta .nk-row { display: flex; align-items: center; gap: 8px; } /* ── Sync badge ───────────────────────────────────────────────────────── */ .rsync { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 999px; border: 1px solid transparent; line-height: 1; white-space: nowrap; } .rsync.fresh { background: rgba(16,185,129,.16); color: #34d399; border-color: rgba(16,185,129,.35); } .rsync.warn { background: rgba(245,158,11,.16); color: #f59e0b; border-color: rgba(245,158,11,.35); } .rsync.dead { background: rgba(239,68,68,.14); color: #f87171; border-color: rgba(239,68,68,.30); } .rsync.none { background: rgba(113,113,122,.14); color: #a1a1aa; border-color: rgba(113,113,122,.30); } /* ── In-group player search ───────────────────────────────────────────── */ .rank-search-wrap { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 0 12px; } .rank-search-wrap:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(236,72,153,.15); } .rank-search-ic { font-size: 15px; opacity: .7; } .rank-search { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 15px; font-family: var(--font); padding: 13px 0; } .rank-search::placeholder { color: var(--muted); } .rank-search-clear { background: rgba(255,255,255,.06); border: none; color: var(--textsub); cursor: pointer; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: background .15s; } .rank-search-clear:hover { background: rgba(255,255,255,.12); color: var(--text); } .rank-empty { text-align: center; color: var(--muted); padding: 40px 0; } /* ── Podium ───────────────────────────────────────────────────────────── */ .rpodium { display: grid; grid-template-columns: 1fr 1.16fr 1fr; gap: 8px; align-items: end; margin: 4px 0 20px; } .rpod { border-radius: 18px; padding: 16px 8px 0; text-align: center; position: relative; border: 2px solid transparent; min-width: 0; cursor: pointer; transition: transform .14s; } .rpod:hover { transform: translateY(-3px); } .rpod-1 { background: linear-gradient(160deg,rgba(255,204,0,.22),rgba(255,160,0,.06)); border-color: #ffcc00; box-shadow: 0 0 34px rgba(255,204,0,.24), 0 8px 26px rgba(0,0,0,.5); animation: rpodGlow 3s ease-in-out infinite; } .rpod-2 { background: linear-gradient(160deg,rgba(37,99,235,.18),rgba(30,58,138,.05)); border-color: #2563eb; box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 24px rgba(37,99,235,.22); } .rpod-3 { background: linear-gradient(160deg,rgba(220,38,38,.18),rgba(153,27,27,.05)); border-color: #dc2626; box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 20px rgba(220,38,38,.2); } @keyframes rpodGlow { 0%,100% { box-shadow: 0 0 24px rgba(255,204,0,.2), 0 8px 26px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 40px rgba(255,204,0,.4), 0 8px 26px rgba(0,0,0,.5); } } .rpod-medal { font-size: 24px; line-height: 1; } .rpod .rav { margin: 8px auto 6px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; font-family: var(--display); } .rpod-1 .rav { width: 54px; height: 54px; font-size: 21px; } .rpod-2 .rav, .rpod-3 .rav { width: 44px; height: 44px; font-size: 17px; } .rpod-name { font-family: var(--display); font-size: 14px; line-height: 1.15; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rpod-pts { font-family: var(--display); font-size: 17px; font-weight: 900; margin-top: 3px; font-variant-numeric: tabular-nums; } .rpod-base { margin-top: 12px; border-radius: 8px 8px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform .6s cubic-bezier(.22,.61,.36,1); } .rpod-base.grown { transform: scaleY(1); } .rpod-1 .rpod-base { height: 30px; background: linear-gradient(180deg,rgba(255,204,0,.5),rgba(255,204,0,.1)); } .rpod-2 .rpod-base { height: 18px; background: linear-gradient(180deg,rgba(37,99,235,.45),rgba(37,99,235,.08)); } .rpod-3 .rpod-base { height: 12px; background: linear-gradient(180deg,rgba(220,38,38,.5),rgba(220,38,38,.1)); } @media (max-width: 360px) { .rpod { padding: 12px 5px 0; } .rpod-name { font-size: 12px; } .rpod-pts { font-size: 15px; } } /* ── Lang toggle ──────────────────────────────────────────────────────── */ .lang-toggle { transition: color .18s, border-color .18s, background .18s; } .lang-toggle:hover { color: var(--text); border-color: rgba(236,72,153,.5); background: rgba(236,72,153,.08); } /* ── Scroll reveal ────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; } .reveal.in { opacity: 1; transform: none; } /* Stagger children */ .grid .reveal:nth-child(1){transition-delay:.00s} .grid .reveal:nth-child(2){transition-delay:.10s} .grid .reveal:nth-child(3){transition-delay:.20s} .grid .reveal:nth-child(4){transition-delay:.30s} .grid .reveal:nth-child(5){transition-delay:.40s} .grid .reveal:nth-child(6){transition-delay:.50s} .steps .reveal:nth-child(2){transition-delay:.10s} .steps .reveal:nth-child(3){transition-delay:.20s} /* ── Skeleton ─────────────────────────────────────────────────────────── */ .skel { background: linear-gradient(90deg,#15151a 25%,#1d1d24 50%,#15151a 75%); background-size: 200% 100%; animation: sh 1.4s infinite; border-radius: 14px; height: 62px; margin-bottom: 8px; } @keyframes sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* ── Rank hero reveal stagger ─────────────────────────────────────────── */ .rank-hero .reveal:nth-child(2) { transition-delay: .1s; } .rank-hero .reveal:nth-child(3) { transition-delay: .2s; } /* ── Rank start note ──────────────────────────────────────────────────── */ .rank-startnote { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: -6px auto 16px; font-size: 12px; font-weight: 700; color: var(--em); background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.30); padding: 6px 14px; border-radius: 999px; } /* ── Extra effects ────────────────────────────────────────────────────── */ /* Code input glow */ .code-form input:not(:focus) { animation: codeGlow 2.8s ease-in-out infinite; } @keyframes codeGlow { 0%,100% { border-color: var(--border); } 50% { border-color: rgba(236,72,153,.45); } } /* Tap pop */ .tab-btn.active, .period-btn.active { animation: tapPop .3s ease; } @keyframes tapPop { 0%{transform:scale(.9)} 60%{transform:scale(1.04)} 100%{transform:scale(1)} } /* Rank cards entrance */ .rank-list .rcard { animation: rcardIn .42s cubic-bezier(.22,1,.36,1) both; } .rank-list .rcard:nth-child(1){animation-delay:.02s} .rank-list .rcard:nth-child(2){animation-delay:.07s} .rank-list .rcard:nth-child(3){animation-delay:.12s} .rank-list .rcard:nth-child(4){animation-delay:.17s} .rank-list .rcard:nth-child(5){animation-delay:.22s} .rank-list .rcard:nth-child(n+6){animation-delay:.27s} @keyframes rcardIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } /* Gold pulse #1 */ .rcard.top1 { animation: goldPulse 2.6s ease-in-out infinite; } @keyframes goldPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(255,204,0,.18), 0 8px 30px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 0 1px rgba(255,204,0,.45), 0 10px 38px rgba(255,170,0,.22); } } /* ── Reduced motion ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .rank-hero .reveal { transition-delay: 0s !important; } .phone, .blob, .logo-name, .hero h1 .grad, .proof-num { animation: none !important; } .eyebrow, .phone::before, .rank-list .rcard, .rcard.top1, .tab-btn.active, .period-btn.active, .code-form input { animation: none !important; } .grid .reveal, .steps .reveal { transition-delay: 0s !important; } } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; } .phone-stage { order: -1; } .grid.f2 { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .proof-grid { grid-template-columns: repeat(2, 1fr); } .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: rgba(9,9,11,.97); padding: 12px; gap: 4px; border-bottom: 1px solid var(--border); } .nav.open { display: flex; } .menu-toggle { display: block; } } @media (max-width: 560px) { .store-badge { min-width: 0; flex: 1; } .code-form { flex-direction: column; } }