/* ==================== ОСНОВНЫЕ СТИЛИ (iOS-style) ==================== */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* === Theming === Default = LIGHT (per latest brief). Dark is opt-in via the toggle in profile (sets ``). All themable colours come from CSS variables; the `--overlay-N` set replaces the rgba(255,255,255,0.0X) tints that used to be hard-coded for the dark theme — on light theme they become near-black tints, so hover states and subtle dividers survive the flip without a white-on-white mess. */ :root { --primary-bg: #F2F2F7; --secondary-bg: #FFFFFF; --card-bg: #FFFFFF; --accent-blue: #007AFF; --accent-light-blue: #5AC8FA; --text-primary: #000000; --text-secondary: #6E6E73; --border-color: rgba(0,0,0,0.10); /* Overlays — stronger than 0.03 on white otherwise balance rows and chips become near-invisible. */ --overlay-1: rgba(0,0,0,0.06); --overlay-2: rgba(0,0,0,0.10); --overlay-3: rgba(0,0,0,0.16); --overlay-fade: rgba(0,0,0,0.05); /* Hover/pressed surfaces on top of card-bg */ --surface-elevated: #FFFFFF; --surface-pressed: rgba(0,0,0,0.05); --tabbar-bg: rgba(255,255,255,0.92); --tabbar-shadow: 0 8px 28px rgba(0,0,0,0.12); --progress-shell-from: rgba(245,245,247,0.98); --progress-shell-to: rgba(230,230,235,0.98); --progress-inner-bg: rgba(245,245,247,0.92); --progress-track-bg: rgba(0,0,0,0.06); /* Text inside the lg progress shell — needs to flip per theme so the shell isn't a "white-on-white" wash on light. */ --progress-text: #1C1C1E; --progress-text-muted: rgba(60,60,67,0.55); --progress-caption-text: #FFFFFF; --progress-caption-bg: rgba(110,110,120,0.78); /* Per-theme shadow stack so cards lift off the light background; keeps the same vertical hierarchy users got used to in dark. */ --shadow-small: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06); --shadow-medium: 0 2px 6px rgba(0,0,0,0.06), 0 12px 28px rgba(0,0,0,0.10); --shadow-large: 0 4px 12px rgba(0,0,0,0.10), 0 24px 48px rgba(0,0,0,0.14); /* Brand / status palette. Pulled out of inline hex colours so the dark theme can adjust contrast against its darker surfaces. The light values stay close to the iOS HIG palette since most users open the app in Telegram's light theme on iPhone. */ --color-success: #34C759; --color-warning: #FF9500; --color-danger: #FF3B30; --color-info: #007AFF; --color-ton: #0088CC; --color-ton-dark: #005F99; --color-usdt: #26A17B; --color-stars: #FFD700; /* Secondary-button surface: needs to be visibly different from card-bg AND from the modal sheet, otherwise the button blends into white. F2F2F7 matches Apple HIG's "fill" surface and reads clearly on every screen. */ --btn-secondary-bg: #F2F2F7; --btn-secondary-bg-hover: #E5E5EA; --btn-secondary-border: rgba(0,0,0,0.16); } :root[data-theme="dark"] { --primary-bg: #000000; --secondary-bg: #1C1C1E; --card-bg: #2C2C2E; --accent-blue: #0A84FF; --accent-light-blue: #64D2FF; --text-primary: #FFFFFF; --text-secondary: #8E8E93; --border-color: #38383A; --overlay-1: rgba(255,255,255,0.04); --overlay-2: rgba(255,255,255,0.08); --overlay-3: rgba(255,255,255,0.14); --overlay-fade: rgba(255,255,255,0.04); --surface-elevated: #2C2C2E; --surface-pressed: rgba(255,255,255,0.06); --tabbar-bg: rgba(28,28,30,0.72); --tabbar-shadow: 0 8px 32px rgba(0,0,0,0.6); --progress-shell-from: rgba(37,39,40,0.98); --progress-shell-to: rgba(26,27,28,0.98); --progress-inner-bg: rgba(40,40,39,0.94); --progress-track-bg: rgba(255,255,255,0.08); --progress-text: #FFFFFF; --progress-text-muted: rgba(255,255,255,0.46); --progress-caption-text: #FFFFFF; --progress-caption-bg: rgba(110,110,120,0.55); --shadow-small: 0 2px 8px rgba(0,0,0,0.30); --shadow-medium: 0 4px 16px rgba(0,0,0,0.40); --shadow-large: 0 8px 32px rgba(0,0,0,0.50); /* Slightly brighter status colours on dark — iOS uses the lighter variants (e.g. #30D158 vs #34C759) for better contrast on near- black surfaces. */ --color-success: #30D158; --color-warning: #FFD60A; --color-danger: #FF453A; --color-info: #0A84FF; --color-ton: #38B6FF; --color-ton-dark: #1A8AC9; --color-usdt: #26A17B; --color-stars: #FFD700; /* Dark theme — secondary button needs to sit above card-bg too. 3A3A3C is iOS HIG "tertiary fill" on dark. */ --btn-secondary-bg: #3A3A3C; --btn-secondary-bg-hover: #48484A; --btn-secondary-border: rgba(255,255,255,0.10); } /* Layout-only vars stay in :root so they don't need to be redeclared. */ :root { /* Safe-area — these vars are owned by tg.js (set from Telegram WebApp SDK). The env() values are only a *fallback* applied via :root selector below in case tg.js can't run (e.g. project preview in plain browser). */ --safe-area-top: 0px; --safe-area-bottom: 0px; --safe-area-left: 0px; --safe-area-right: 0px; --content-safe-top: 0px; --content-safe-bottom: 0px; --content-safe-left: 0px; --content-safe-right: 0px; --tg-viewport-height: 100vh; --tabbar-height: 64px; /* Скругления */ --radius-small: 10px; --radius-medium: 16px; --radius-large: 24px; --border-radius: 12px; /* iOS-style закругление по умолчанию */ /* Тени */ --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.5); } /* Fallback when tg.js can't set safe-area (plain browser preview). Inside Telegram WebApp tg.js overwrites these immediately. */ @supports (padding: env(safe-area-inset-top)) { :root:not(:has(.has-tg-safe-area)) { --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); } } body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif; background: var(--primary-bg); color: var(--text-primary); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* outer device safe-area (notch / Dynamic Island) */ padding-left: var(--safe-area-left); padding-right: var(--safe-area-right); } #app { min-height: var(--tg-viewport-height, 100vh); display: flex; flex-direction: column; } #page-container { flex: 1; /* `content-safe-top` is what Telegram says is *non-overlapped* by its own header chrome. We add a generous gap on top of it so the big page title ("Мои кошельки", "История транзакций") never gets clipped by the close/expand chrome — even when Telegram reports 0. */ padding-top: calc(var(--content-safe-top, 0px) + var(--safe-area-top, 0px) + 32px); padding-bottom: calc(var(--tabbar-height) + var(--safe-area-bottom) + 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; transition: opacity 0.08s ease; will-change: opacity; } /* ==================== НИЖНИЙ ТАББАР (iOS-style) ==================== */ .bottom-tabbar { position: fixed; bottom: 0; left: 0; right: 0; padding: 0 calc(12px + var(--safe-area-left)) calc(var(--safe-area-bottom) + 16px) calc(12px + var(--safe-area-right)); z-index: 1000; pointer-events: none; } .tabbar-wrapper { position: relative; display: flex; align-items: center; justify-content: space-around; background: var(--tabbar-bg); /* Half the blur radius — saturate(180%) on top of blur(40px) was the biggest GPU cost on low-end phones. blur(18px) reads identical in practice and the tabbar paint stays under 4ms. */ backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); /* Promote to its own layer so scrolling the page doesn't repaint the tabbar every frame. */ transform: translateZ(0); contain: layout paint style; border-radius: 28px; padding: 8px 12px 8px; box-shadow: var(--tabbar-shadow), 0 0 0 1px var(--overlay-2) inset; pointer-events: auto; } .tab-button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 16px; background: none; border: none; color: var(--text-secondary); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; } .tab-icon { width: 24px; height: 24px; stroke-width: 2; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .tab-label { font-size: 10px; font-weight: 500; letter-spacing: -0.2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .tab-button.active { color: var(--accent-blue); } .tab-button.active .tab-icon { transform: scale(1.1); } .tab-button:active { transform: scale(0.95); } /* Индикатор активной вкладки */ .tab-indicator { position: absolute; bottom: 8px; height: calc(100% - 16px); background: rgba(10, 132, 255, 0.15); border-radius: 18px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; pointer-events: none; } /* ==================== СТРАНИЦЫ ==================== */ .page { min-height: 100vh; animation: fadeIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { transform: translateY(0); } to { transform: translateY(100%); } } .page-header { /* Top safe-area is already handled by #page-container (it adds --content-safe-top + 16px). Don't double-pad: just give the header its own breathing room within the page. */ padding: 8px 20px 16px; background: transparent; position: relative; display: flex; align-items: center; gap: 12px; } .page-header .btn-back { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 10; margin: 0; } .page-header:has(.btn-back) .page-title { padding-left: 48px; } .page-title { font-size: 28px; /* 34 was clipping under TG header on small phones */ line-height: 1.15; font-weight: 700; letter-spacing: -0.5px; flex: 1; min-width: 0; /* allow flex item to shrink for ellipsis if needed */ overflow-wrap: anywhere; } .page-content { padding: 0 20px 20px; } /* ==================== КАРТОЧКИ ==================== */ .info-card { background: var(--card-bg); border-radius: var(--radius-medium); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-small); /* Each card is its own layout/paint island — text reflows inside a card don't kick the rest of the page. Big perf win on profile pages with 5-6 cards stacked. */ contain: layout paint style; } /* ═══════════════════════════════════════════════════════════════════ * Лидерборд (страница «Лидеры») * * 1:1 replica of the TopGift leaderboard design: * - Dark-themed page (forced black bg regardless of app theme) * - Full-width background image with per-place glow overlays * - Top-3 avatars positioned absolutely on the background * - Small numbered medal circles with gold/silver/bronze gradients * - Flat dark-pill list rows for places 4+ * - Scale-bounce medal animation + avatar fade-in * ═══════════════════════════════════════════════════════════════════ */ /* Leaderboard page — theme-aware (light/dark). The podium SHOWCASE * area uses a dark backdrop because the decorative bg image is dark, * but the rest of the page (header, list rows, "your place") follows * the app's active theme. * * Per-theme variable defaults: * --leaders-pill-bg = pill row background (#191919 dark / light) * --leaders-pill-text = pill row primary text * --leaders-pill-muted = pill row secondary text * --leaders-page-bg = page background * Falls back to global tokens if unset. */ .leaders-page { --leaders-page-bg: var(--primary-bg); --leaders-pill-bg: var(--card-bg); --leaders-pill-text: var(--text-primary); --leaders-pill-muted: var(--text-secondary); --leaders-separator: var(--border-color); /* Showcase area always reads dark since the bg image is dark */ --leaders-showcase-bg: linear-gradient(180deg, #0c0c14 0%, #1a1a26 100%); --leaders-showcase-text: #fff; --leaders-showcase-muted: rgba(255,255,255,0.55); background: var(--leaders-page-bg); color: var(--text-primary); min-height: 100vh; } .leaders-page .page-header { background: transparent; padding-bottom: 0; } .leaders-page .page-title { color: var(--text-primary); } .leaders-page .page-subtitle { color: var(--text-secondary); font-size: 14px; margin: 6px 0 0; line-height: 1.4; } /* ═══════════════════════════════════════════════════════════════════ * 3D FROSTED-GLASS PODIUM STAGE * ───────────────────────────────────────────────────────────────── * Pure SVG + CSS implementation. No external image assets. Three * isometric blocks (front + top + side faces) rendered via SVG * polygons share exact corner points so the staircase reads as a * single rostrum without edge drift. * * Visual order left → right: 2nd · 1st · 3rd (1st crowns the row). * Entry sequence: * 1. Stage halo fades in * 2. 3rd block rises (scaleY 0 → 1) * 3. 2nd block rises * 4. 1st block rises * 5. Avatars pop on top of each block (3rd → 2nd → 1st) * 6. Medals bounce in * 7. Names + amounts fade up * ═══════════════════════════════════════════════════════════════════ */ .leaders-stage { position: relative; width: 100%; margin: 16px 0 24px; padding: 36px 12px 22px; background: var(--leaders-showcase-bg); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-medium); isolation: isolate; } /* Soft gold radial halo behind the centre slot, drawing the eye to * the winner. Sits at z-index 0 (everything else is z-index 1+). */ .leaders-stage__halo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(45% 55% at 50% 38%, rgba(255,200,80,0.22), transparent 70%), radial-gradient(80% 70% at 50% 100%, rgba(60,80,160,0.18), transparent 65%); opacity: 0; animation: leadersHaloIn 0.6s ease-out forwards; } @keyframes leadersHaloIn { to { opacity: 1; } } /* Floor shadow line under all three blocks — gives the stage a * "ground plane" feel so the blocks read as standing on something. */ .leaders-stage__floor { position: absolute; left: 6%; right: 6%; bottom: 14px; height: 12px; z-index: 0; background: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,0.50), transparent 70%); filter: blur(6px); pointer-events: none; } /* Decorative sparkles drifting behind the blocks — six dots scattered * across the stage, each twinkling at a different cadence. */ .leaders-stage__sparkles { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .leaders-stage__sparkles span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.4) 50%, transparent 100%); opacity: 0; animation: leadersSparkle 3.2s ease-in-out infinite; box-shadow: 0 0 8px rgba(255,255,255,0.6); } .leaders-stage__sparkles span:nth-child(1) { top: 18%; left: 12%; animation-delay: 1.2s; } .leaders-stage__sparkles span:nth-child(2) { top: 28%; left: 78%; animation-delay: 1.9s; } .leaders-stage__sparkles span:nth-child(3) { top: 12%; left: 56%; animation-delay: 2.4s; width: 3px; height: 3px; } .leaders-stage__sparkles span:nth-child(4) { top: 42%; left: 30%; animation-delay: 2.8s; width: 3px; height: 3px; } .leaders-stage__sparkles span:nth-child(5) { top: 22%; left: 90%; animation-delay: 3.1s; width: 5px; height: 5px; } .leaders-stage__sparkles span:nth-child(6) { top: 36%; left: 6%; animation-delay: 3.6s; } @keyframes leadersSparkle { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.2); } } /* Slots container — flex row, bottom-aligned so 1st (with tallest * block) sits visually higher than 2nd / 3rd. */ .leaders-stage__slots { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: 6px; min-height: 280px; } /* Individual slot — vertical stack: avatar (top), label, block (bottom). * Bottom-aligned within the flex so all three rest on the same * "floor" regardless of block height. */ .leaders-slot { flex: 1 1 0; max-width: 36%; min-width: 0; display: flex; flex-direction: column; align-items: center; position: relative; } .leaders-slot--1st { order: 2; } .leaders-slot--2nd { order: 1; } .leaders-slot--3rd { order: 3; } /* Avatar — sits at the top of the slot, close to the block top so it * visually "rests on" the podium. Bottom-margin tightened so it * connects to the label/block beneath. */ .leaders-slot__avatar { width: 72%; aspect-ratio: 1 / 1; max-width: 76px; border-radius: 50%; overflow: hidden; background-color: rgba(255,255,255,0.14); box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.22); position: relative; z-index: 3; margin-bottom: 6px; opacity: 0; transform: translateY(8px) scale(0.6); animation: leadersAvatarPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .leaders-slot--1st .leaders-slot__avatar { width: 78%; max-width: 92px; animation-delay: 1.10s; } .leaders-slot--2nd .leaders-slot__avatar { animation-delay: 0.95s; } .leaders-slot--3rd .leaders-slot__avatar { animation-delay: 0.80s; } @keyframes leadersAvatarPop { to { opacity: 1; transform: translateY(0) scale(1); } } .leaders-slot__avatar img, .leaders-slot__avatar .leaders-avatar-fallback { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* Fallback avatar (no photo) */ .leaders-avatar-fallback { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; line-height: 1; border-radius: 50%; } /* Label stack — name + amount only (medal moved onto the block). * Sits tightly between avatar and block, so the three feel grouped. */ .leaders-slot__label { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; position: relative; z-index: 4; max-width: 100%; min-width: 0; text-align: center; } /* Medal — now positioned on the block's top face, sitting like a * plaque on the podium step. Wrapper centres the medal horizontally * across the block's width. */ .leaders-slot__medal-wrap { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; } .leaders-medal-wrapper { display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); animation: leadersMedalBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .leaders-slot--1st .leaders-medal-wrapper { animation-delay: 1.25s; } .leaders-slot--2nd .leaders-medal-wrapper { animation-delay: 1.10s; } .leaders-slot--3rd .leaders-medal-wrapper { animation-delay: 0.95s; } @keyframes leadersMedalBounce { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } } /* ── Iridescent place medals (gold / silver / bronze) ─────────────── * Each medal is a coin with: * 1. A conic-gradient base for the metallic colour wheel that * catches light from multiple angles (the "iridescent" feel) * 2. A radial highlight on the upper-left for the 3D sphere look * 3. An animated shine bar swept diagonally across — sells the * polished metal feel * 4. An inset shadow at the bottom for depth * 5. A glow box-shadow in the tier colour for ambient light * Numbers are italic + bold + drop-shadowed for that engraved feel. */ .leaders_first-place-medal span, .leaders_second-place-medal span, .leaders_third-place-medal span { font-style: italic; font-size: 15px; font-weight: 800; line-height: 1; display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 99px; position: relative; overflow: hidden; isolation: isolate; letter-spacing: -0.02em; -webkit-text-stroke: 0; } /* 1st — pure rich gold: warm yellows with bright highlights and * deep amber shadows. Animated shine sweep. */ .leaders_first-place-medal span { color: #5a3a00; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.85) 0%, transparent 45%), conic-gradient(from 215deg at 50% 50%, #fff5c2 0deg, #ffd84a 60deg, #ffb300 120deg, #c98300 180deg, #ffb300 240deg, #ffd84a 300deg, #fff5c2 360deg); border: 1.5px solid #ffc940; box-shadow: inset 0 -3px 6px rgba(120,60,0,0.55), inset 0 2px 3px rgba(255,255,255,0.55), 0 0 14px rgba(255,180,30,0.55), 0 4px 10px rgba(0,0,0,0.45); text-shadow: 0 1px 0 rgba(255,240,180,0.65); } .leaders_first-place-medal span::before { content: ""; position: absolute; inset: -2px; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.65) 48%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.65) 52%, transparent 70%); transform: translateX(-130%); animation: medalShineGold 3s ease-in-out 1.4s infinite; pointer-events: none; z-index: 2; mix-blend-mode: overlay; } @keyframes medalShineGold { 0% { transform: translateX(-130%); } 50% { transform: translateX(130%); } 100% { transform: translateX(130%); } } /* 2nd — bright platinum silver: cool whites with steel-blue accents * for that polished mirror-silver feel. Subtler shine. */ .leaders_second-place-medal span { color: #2a2a30; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95) 0%, transparent 50%), conic-gradient(from 215deg at 50% 50%, #ffffff 0deg, #e0e4ec 60deg, #b4bbc8 120deg, #7e8694 180deg, #b4bbc8 240deg, #e0e4ec 300deg, #ffffff 360deg); border: 1.5px solid #d8dde6; box-shadow: inset 0 -3px 6px rgba(60,70,90,0.50), inset 0 2px 3px rgba(255,255,255,0.75), 0 0 12px rgba(200,210,225,0.50), 0 4px 10px rgba(0,0,0,0.40); text-shadow: 0 1px 0 rgba(255,255,255,0.70); } .leaders_second-place-medal span::before { content: ""; position: absolute; inset: -2px; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 48%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.55) 52%, transparent 70%); transform: translateX(-130%); animation: medalShineSilver 3.4s ease-in-out 1.8s infinite; pointer-events: none; z-index: 2; mix-blend-mode: overlay; } @keyframes medalShineSilver { 0% { transform: translateX(-130%); } 55% { transform: translateX(130%); } 100% { transform: translateX(130%); } } /* 3rd — rich bronze/copper: warm browns with copper highlights and * deep auburn shadows. Patina-like depth. */ .leaders_third-place-medal span { color: #4a1f00; background: radial-gradient(circle at 30% 25%, rgba(255,220,180,0.85) 0%, transparent 45%), conic-gradient(from 215deg at 50% 50%, #ffd0a0 0deg, #e89055 60deg, #c46818 120deg, #7a3a00 180deg, #c46818 240deg, #e89055 300deg, #ffd0a0 360deg); border: 1.5px solid #d47730; box-shadow: inset 0 -3px 6px rgba(70,30,0,0.60), inset 0 2px 3px rgba(255,220,180,0.55), 0 0 12px rgba(196,104,24,0.55), 0 4px 10px rgba(0,0,0,0.45); text-shadow: 0 1px 0 rgba(255,200,150,0.55); } .leaders_third-place-medal span::before { content: ""; position: absolute; inset: -2px; background: linear-gradient(115deg, transparent 30%, rgba(255,235,200,0.55) 48%, rgba(255,235,200,0.85) 50%, rgba(255,235,200,0.55) 52%, transparent 70%); transform: translateX(-130%); animation: medalShineBronze 3.6s ease-in-out 2.2s infinite; pointer-events: none; z-index: 2; mix-blend-mode: overlay; } @keyframes medalShineBronze { 0% { transform: translateX(-130%); } 55% { transform: translateX(130%); } 100% { transform: translateX(130%); } } /* Nickname — fades up after the medal bounces in. SF Pro / system * font with semi-condensed letter-spacing for that polished feel. */ .leaders-slot__name { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; text-shadow: 0 1px 4px rgba(0,0,0,0.75), 0 0 12px rgba(0,0,0,0.40); opacity: 0; transform: translateY(4px); animation: leadersNameIn 0.35s ease-out forwards; } .leaders-slot--1st .leaders-slot__name { animation-delay: 1.40s; font-size: 15px; background: linear-gradient(180deg, #fff 0%, #ffe9a8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Fallback text colour for browsers without text-fill-color */ color: #ffe9a8; } .leaders-slot--2nd .leaders-slot__name { animation-delay: 1.25s; } .leaders-slot--3rd .leaders-slot__name { animation-delay: 1.10s; } @keyframes leadersNameIn { to { opacity: 1; transform: translateY(0); } } /* Amount — same fade-up. Tabular numbers + tighter tracking + a * subtle metallic gradient for the winner's number. */ .leaders-slot__amount { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.92); white-space: nowrap; letter-spacing: -0.01em; text-shadow: 0 1px 3px rgba(0,0,0,0.65); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(4px); animation: leadersNameIn 0.35s ease-out forwards; } .leaders-slot--1st .leaders-slot__amount { animation-delay: 1.50s; font-size: 14px; font-weight: 800; color: #ffd45a; text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 0 10px rgba(255,180,30,0.40); } .leaders-slot--2nd .leaders-slot__amount { animation-delay: 1.35s; color: #e6ebf3; } .leaders-slot--3rd .leaders-slot__amount { animation-delay: 1.20s; color: #ffc090; } /* ── 3D frosted-glass block — HTML divs with backdrop-filter for a * real frosted-glass refraction (blurs the halo + sparkles behind). * Block heights set per-place via custom property --block-h. Block * rises from below (scaleY 0 → 1) on entry. */ .leaders-slot__block { width: 100%; max-width: 130px; height: var(--block-h, 80px); position: relative; transform-origin: bottom center; transform: scaleY(0); opacity: 0; animation: leadersBlockRise 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55)); } .leaders-slot--1st .leaders-slot__block { --block-h: 124px; animation-delay: 0.60s; } .leaders-slot--2nd .leaders-slot__block { --block-h: 96px; animation-delay: 0.35s; } .leaders-slot--3rd .leaders-slot__block { --block-h: 74px; animation-delay: 0.10s; } @keyframes leadersBlockRise { 0% { transform: scaleY(0); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } } /* The glass container — relative parent for all three faces. The * top-of-block visual is the top face (parallelogram), the depth * is the right side face, and the main viewer-facing surface is * the front face (rectangle). Top depth + side depth via vars so * geometry stays consistent across pieces. */ .leaders-glass { --top-depth: 14px; --side-depth: 12px; position: absolute; inset: 0; } /* FRONT face — the main viewer-facing glass rectangle. Uses * backdrop-filter to actually blur whatever sits behind it (the * stage halo + sparkles + gradient), giving a real glass refraction * feel rather than a flat tinted overlay. */ .leaders-glass__face { position: absolute; top: var(--top-depth); left: 0; right: var(--side-depth); bottom: 0; -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 38%, rgba(255,255,255,0.04) 100%); border: 1px solid rgba(255,255,255,0.22); border-top-color: rgba(255,255,255,0.42); border-radius: 6px 6px 3px 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 16px rgba(0,0,0,0.22), inset 6px 0 12px rgba(255,255,255,0.05); overflow: hidden; } /* Vertical shine stripe down the centre of the front face. Lives * inside the face so it gets clipped by overflow:hidden and never * leaks past the corners. */ .leaders-glass__shine { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.10) 48%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0.10) 52%, transparent 65%); pointer-events: none; } /* TOP face — parallelogram lid, brightest face (catches light) */ .leaders-glass__top { position: absolute; top: 0; left: 0; right: 0; height: var(--top-depth); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.20) 60%, rgba(255,255,255,0.10) 100%); clip-path: polygon( 0 100%, calc(100% - var(--side-depth)) 100%, 100% 0, var(--side-depth) 0 ); border-top: 1px solid rgba(255,255,255,0.42); } /* SIDE face — right-edge depth, darkest face (in shadow) */ .leaders-glass__side { position: absolute; top: 0; right: 0; width: var(--side-depth); bottom: 0; -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); background: linear-gradient(90deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 100%); clip-path: polygon( 0 var(--top-depth), 100% 0, 100% 100%, 0 100% ); } /* Winner-tier glass tint — warm gold layered on top of the cool * neutral glass. Higher saturation, golden edge. */ .leaders-slot--1st .leaders-glass__face { background: linear-gradient(180deg, rgba(255,215,90,0.32) 0%, rgba(255,175,40,0.18) 45%, rgba(120,75,15,0.10) 100%); border-color: rgba(255,225,140,0.45); border-top-color: rgba(255,240,180,0.65); box-shadow: inset 0 1px 0 rgba(255,240,180,0.55), inset 0 -8px 16px rgba(80,40,0,0.30), inset 6px 0 12px rgba(255,210,100,0.10); } .leaders-slot--1st .leaders-glass__top { background: linear-gradient(135deg, rgba(255,235,160,0.55) 0%, rgba(255,200,80,0.30) 60%, rgba(200,140,40,0.15) 100%); border-top-color: rgba(255,240,180,0.70); } .leaders-slot--1st .leaders-glass__side { background: linear-gradient(90deg, rgba(80,40,0,0.40) 0%, rgba(40,20,0,0.65) 100%); } /* Silver tint for 2nd place — cool platinum cast */ .leaders-slot--2nd .leaders-glass__face { background: linear-gradient(180deg, rgba(230,235,245,0.30) 0%, rgba(180,190,210,0.15) 45%, rgba(60,70,90,0.08) 100%); border-color: rgba(230,235,245,0.42); border-top-color: rgba(255,255,255,0.60); } .leaders-slot--2nd .leaders-glass__top { background: linear-gradient(135deg, rgba(255,255,255,0.50) 0%, rgba(210,215,230,0.30) 60%, rgba(140,150,170,0.15) 100%); border-top-color: rgba(255,255,255,0.65); } /* Bronze tint for 3rd place — warm copper cast */ .leaders-slot--3rd .leaders-glass__face { background: linear-gradient(180deg, rgba(220,140,80,0.28) 0%, rgba(180,100,40,0.15) 45%, rgba(80,40,10,0.08) 100%); border-color: rgba(230,160,100,0.42); border-top-color: rgba(255,200,150,0.60); } .leaders-slot--3rd .leaders-glass__top { background: linear-gradient(135deg, rgba(255,200,150,0.50) 0%, rgba(210,140,80,0.30) 60%, rgba(140,80,30,0.15) 100%); border-top-color: rgba(255,210,160,0.60); } /* Winner's avatar gets a subtle continuous bob after entry settles */ .leaders-slot--1st .leaders-slot__avatar { animation: leadersAvatarPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.10s forwards, leadersWinnerBob 3.6s ease-in-out 2.0s infinite; } @keyframes leadersWinnerBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* ── "Your place" row — sits above the list, follows page theme. ── */ .leaders-you-row { display: flex; align-items: center; padding: 12px 14px; margin: 0 0 10px; background: linear-gradient(135deg, rgba(10,132,255,0.10), rgba(10,132,255,0.04)); border: 1px solid rgba(10,132,255,0.20); border-radius: var(--radius-medium); } .leaders-you-row__place { font-weight: 600; color: var(--text-secondary); font-size: 14px; margin-right: 14px; min-width: 22px; text-align: center; } .leaders-you-row__avatar { width: 28px; height: 28px; border-radius: 50%; margin-right: 10px; object-fit: cover; flex-shrink: 0; background: var(--card-bg); } .leaders-you-row__name { font-weight: 600; color: var(--text-primary); font-size: 14px; margin-right: 8px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leaders-you-row__metric { font-weight: 600; color: var(--accent-blue); font-size: 14px; white-space: nowrap; } /* ── List rows for places 4+ — dark rounded pills ── */ .leaders-list { display: flex; flex-direction: column; padding: 0 2px; padding-bottom: 50px; } .leaders-list__separator { width: 100%; height: 1px; background: var(--leaders-separator); margin-bottom: 10px; } .leaders-row { display: block; margin-bottom: 8px; opacity: 0; transform: translateY(8px); animation: leadersRowIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes leadersRowIn { to { opacity: 1; transform: translateY(0); } } /* Stagger rows */ .leaders-row:nth-child(1) { animation-delay: 0.40s; } .leaders-row:nth-child(2) { animation-delay: 0.44s; } .leaders-row:nth-child(3) { animation-delay: 0.48s; } .leaders-row:nth-child(4) { animation-delay: 0.52s; } .leaders-row:nth-child(5) { animation-delay: 0.56s; } .leaders-row:nth-child(6) { animation-delay: 0.60s; } .leaders-row:nth-child(7) { animation-delay: 0.64s; } .leaders-row:nth-child(8) { animation-delay: 0.68s; } .leaders-row:nth-child(9) { animation-delay: 0.72s; } .leaders-row:nth-child(10) { animation-delay: 0.76s; } .leaders-row:nth-child(n+11) { animation-delay: 0.80s; } /* Row pill — self-contained. Place number sits inline on the left, * then avatar, name+metric, with the amount as the rightmost cell. * Uses card-bg so it flips with the theme. */ .leaders-row__pill { background: var(--leaders-pill-bg); padding: 8px 14px; border-radius: 32px; flex: 1; display: grid; grid-template-columns: 28px 36px 1fr auto; align-items: center; gap: 10px; min-width: 0; box-shadow: var(--shadow-small); border: 1px solid var(--border-color); } .leaders-row__place { font-size: 14px; font-weight: 700; color: var(--leaders-pill-muted); text-align: center; font-variant-numeric: tabular-nums; } .leaders-row__avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--overlay-1); } .leaders-row__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .leaders-row__avatar .leaders-avatar-fallback { width: 36px; height: 36px; font-size: 15px; } .leaders-row__info { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .leaders-row__name { margin: 0; font-size: 14px; font-weight: 600; color: var(--leaders-pill-text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leaders-row__name a.tg-user-link { color: var(--leaders-pill-text); text-decoration: none; } .leaders-row__metric { font-size: 11px; font-weight: 500; color: var(--leaders-pill-muted); line-height: 1.2; } .leaders-row__amount { font-size: 14px; font-weight: 700; color: var(--leaders-pill-text); white-space: nowrap; font-variant-numeric: tabular-nums; } .leaders-empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); font-size: 14px; } .leaders-empty p { margin: 0; } /* ═══════════════════════════════════════════════════════════════════ * COMING-SOON SPLASH — pre-launch countdown screen * ───────────────────────────────────────────────────────────────── * Pure brand palette: blue + white on light, blue + black on dark. * Theme-aware via local CSS variables that flip on data-theme="dark". * * Layout (top → bottom): * 1. Trophy + title + subtitle * 2. "Launches in" small label * 3. Four glass digit cards (DD HH MM SS) * 4. Prize pool callout ($50,000) * 5. Three medal cards for places 1, 2, 3 (blue-tonal hierarchy) * 6. Tier rows for 4-10 / 11-100 * 7. Winners total note * * Animations: clean ease-out fade-ups only, no overshoot bouncing. * Sparse ambient effects (one soft halo, four small sparkles). * ═══════════════════════════════════════════════════════════════════ */ /* Theme tokens for the splash. Default = light theme; dark theme * overrides below. Palette uses lighter sky-blue tones (--splash- * accent = #5AC8FA family) instead of the deeper iOS systemBlue, so * the splash reads as airy / soft rather than corporate. */ .leaders-page { --splash-bg: linear-gradient(180deg, #eef6ff 0%, #d6e9ff 100%); --splash-border: rgba(90,200,250,0.18); --splash-shadow: 0 24px 60px -28px rgba(20,80,160,0.20); --splash-text: #0a0e1a; --splash-text-muted: rgba(28,28,30,0.60); --splash-cap-text: rgba(28,28,30,0.45); --splash-glass-bg: rgba(255,255,255,0.78); --splash-glass-border: rgba(90,200,250,0.28); --splash-glass-shadow: 0 2px 12px rgba(20,80,160,0.10); --splash-halo: radial-gradient(70% 60% at 50% 0%, rgba(90,200,250,0.32), transparent 70%); --splash-sparkle: #5AC8FA; /* Main brand accent — lighter sky blue */ --splash-accent: #5AC8FA; --splash-accent-deep: #2BAEEC; /* slightly deeper for readable numbers */ --splash-accent-soft: #91DCFF; --splash-accent-pale: #d0eaff; } :root[data-theme="dark"] .leaders-page { --splash-bg: linear-gradient(180deg, #102246 0%, #050a18 100%); --splash-border: rgba(120,200,255,0.18); --splash-shadow: 0 24px 60px -20px rgba(0,0,0,0.65); --splash-text: #ffffff; --splash-text-muted: rgba(255,255,255,0.68); --splash-cap-text: rgba(255,255,255,0.48); --splash-glass-bg: rgba(120,200,255,0.10); --splash-glass-border: rgba(120,200,255,0.25); --splash-glass-shadow: 0 4px 14px rgba(0,30,80,0.45); --splash-halo: radial-gradient(70% 60% at 50% 0%, rgba(100,210,255,0.38), transparent 70%); --splash-sparkle: #91DCFF; --splash-accent: #64D2FF; --splash-accent-deep: #5AC8FA; --splash-accent-soft: #91DCFF; --splash-accent-pale: #2e4d80; } .leaders-splash { position: relative; margin: 16px 0 24px; padding: 28px 18px 22px; background: var(--splash-bg); border-radius: 24px; overflow: hidden; box-shadow: var(--splash-shadow), inset 0 0 0 1px var(--splash-border); isolation: isolate; text-align: center; color: var(--splash-text); } /* Ambient background — single soft blue halo at the top + four * small twinkling sparkles. No rotating ring (kept subtle). */ .leaders-splash__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .leaders-splash__rings { display: none; } .leaders-splash__halo { position: absolute; inset: 0; background: var(--splash-halo); opacity: 0; animation: leadersSplashFade 0.7s ease-out forwards; } @keyframes leadersSplashFade { to { opacity: 1; } } .leaders-splash__sparkles { position: absolute; inset: 0; } .leaders-splash__sparkles span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--splash-sparkle); box-shadow: 0 0 8px currentColor; color: var(--splash-sparkle); opacity: 0; animation: leadersSparkle 3.6s ease-in-out infinite; } .leaders-splash__sparkles span:nth-child(1) { top: 14%; left: 14%; animation-delay: 0.6s; } .leaders-splash__sparkles span:nth-child(2) { top: 22%; right: 16%; animation-delay: 1.9s; } .leaders-splash__sparkles span:nth-child(3) { top: 58%; left: 8%; animation-delay: 2.4s; } .leaders-splash__sparkles span:nth-child(4) { top: 70%; right: 10%; animation-delay: 1.2s; } /* Extra sparkles hidden to keep the screen calm */ .leaders-splash__sparkles span:nth-child(n+5) { display: none; } @keyframes leadersSparkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 0.75; transform: scale(1); } } /* ── Hero: trophy + title stack ─────────────────────────────────── */ .leaders-splash__hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; } .leaders-splash__trophy { width: 72px; height: 72px; filter: drop-shadow(0 0 22px rgba(0,122,255,0.45)) drop-shadow(0 6px 14px rgba(0,40,120,0.30)); opacity: 0; transform: translateY(-8px); animation: leadersTrophyIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards, leadersTrophyFloat 5s ease-in-out 0.6s infinite; } .leaders-splash__trophy svg { width: 100%; height: 100%; display: block; } @keyframes leadersTrophyIn { to { opacity: 1; transform: translateY(0); } } @keyframes leadersTrophyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .leaders-splash__title-row { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 320px; } .leaders-splash__title { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 23px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.18; color: var(--splash-text); opacity: 0; transform: translateY(6px); animation: leadersSplashFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.20s forwards; } .leaders-splash__subtitle { margin: 0; font-size: 14px; line-height: 1.45; color: var(--splash-text-muted); max-width: 300px; opacity: 0; transform: translateY(6px); animation: leadersSplashFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.30s forwards; } @keyframes leadersSplashFadeUp { to { opacity: 1; transform: translateY(0); } } /* "Launches in" small caps label */ .leaders-splash__cd-label { position: relative; z-index: 1; margin: 0 0 12px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--splash-cap-text); opacity: 0; animation: leadersSplashFadeUp 0.4s ease-out 0.40s forwards; } /* ── Countdown timer — 4 wide glass cards ──────────────────────── */ .leaders-cd { position: relative; z-index: 1; display: flex; justify-content: center; gap: 8px; margin: 0 0 28px; opacity: 0; transform: translateY(6px); animation: leadersSplashFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.48s forwards; } .leaders-cd__unit { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; max-width: 78px; } .leaders-cd__card { position: relative; width: 100%; aspect-ratio: 1 / 1.1; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 1px; border-radius: 14px; background: var(--splash-glass-bg); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--splash-glass-border); box-shadow: var(--splash-glass-shadow), inset 0 1px 0 rgba(255,255,255,0.08); overflow: hidden; isolation: isolate; } .leaders-cd__card::before { content: ""; position: absolute; top: 50%; left: 8%; right: 8%; height: 1px; background: var(--splash-glass-border); z-index: 2; pointer-events: none; } .leaders-cd__num { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 34px; font-weight: 800; line-height: 1; /* Slightly deeper than the base accent so the number stays * readable against the light glass card on white themes. */ color: var(--splash-accent-deep); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; position: relative; z-index: 3; } .leaders-cd__num--tick { animation: leadersCdTick 0.4s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes leadersCdTick { 0% { opacity: 0.4; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } .leaders-cd__cap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--splash-cap-text); } /* ── Prize pool callout ────────────────────────────────────────── */ .leaders-prize-pool { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 auto 16px; padding: 14px 28px; background: var(--splash-glass-bg); border: 1px solid var(--splash-glass-border); border-radius: 20px; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: var(--splash-glass-shadow); opacity: 0; transform: translateY(6px); animation: leadersSplashFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.58s forwards; } .leaders-prize-pool__label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--splash-cap-text); } .leaders-prize-pool__amount { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--splash-accent-deep); font-variant-numeric: tabular-nums; } /* ── Prize cards 1 / 2 / 3 — blue tonal hierarchy ──────────────── * 1st = brand --splash-accent (deepest blue) * 2nd = --splash-accent-soft (cyan) * 3rd = --splash-accent-pale (light blue) * No gold / silver / bronze anywhere. */ .leaders-prize-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 0 0 14px; } .leaders-prize-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 8px 12px; border-radius: 16px; background: var(--splash-glass-bg); border: 1px solid var(--splash-glass-border); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); box-shadow: var(--splash-glass-shadow); overflow: hidden; opacity: 0; transform: translateY(6px); animation: leadersSplashFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .leaders-prize-card:nth-child(1) { animation-delay: 0.66s; } .leaders-prize-card:nth-child(2) { animation-delay: 0.74s; } .leaders-prize-card:nth-child(3) { animation-delay: 0.82s; } .leaders-prize-card__medal { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; line-height: 1; color: #ffffff; margin-bottom: 2px; } .leaders-prize-card__amount { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--splash-text); } .leaders-prize-card__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--splash-cap-text); } /* 1st place — winner card: deeper sky-blue medal + stronger border/glow */ .leaders-prize-card--gold { border-color: var(--splash-accent-deep); box-shadow: 0 4px 20px rgba(90,200,250,0.30), inset 0 1px 0 rgba(255,255,255,0.18); } .leaders-prize-card--gold .leaders-prize-card__medal { background: var(--splash-accent-deep); box-shadow: 0 0 16px rgba(90,200,250,0.55), inset 0 -2px 4px rgba(0,60,120,0.25); } .leaders-prize-card--gold .leaders-prize-card__amount { color: var(--splash-accent-deep); } /* 2nd place — cyan medal */ .leaders-prize-card--silver .leaders-prize-card__medal { background: var(--splash-accent-soft); box-shadow: 0 0 10px rgba(90,200,250,0.40), inset 0 -2px 4px rgba(0,80,160,0.25); } /* 3rd place — pale blue medal */ .leaders-prize-card--bronze .leaders-prize-card__medal { background: var(--splash-accent-pale); box-shadow: 0 0 8px rgba(120,170,230,0.30), inset 0 -2px 4px rgba(40,80,140,0.20); } /* ═══════════════════════════════════════════════════════════════ * FIRST-DEAL BONUS BLOCK — separate prominent CTA card * ───────────────────────────────────────────────────────────── * Highlights a SECONDARY pot ($5K) distributed equally among * everyone who closes at least one deal. Sits outside the main * 50K leaderboard pool — its job is to convert "haven't tried * yet" users by promising a guaranteed slice for participation. * * Visual: horizontal hero card with sparkle icon on the left and * amount + title + body + checkmark CTA on the right. Stronger * blue accent + shimmer sweep than the regular cards so it pops * without screaming. * ═══════════════════════════════════════════════════════════ */ .leaders-bonus { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin: 0 0 14px; padding: 16px 18px; border-radius: 20px; background: linear-gradient(135deg, rgba(90,200,250,0.32) 0%, rgba(0,122,255,0.18) 55%, rgba(145,220,255,0.10) 100%); border: 1px solid var(--splash-accent); box-shadow: 0 6px 22px rgba(90,200,250,0.30), inset 0 1px 0 rgba(255,255,255,0.20), inset 0 0 0 1px rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); overflow: hidden; isolation: isolate; text-align: left; opacity: 0; transform: translateY(8px); animation: leadersSplashFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.86s forwards; } /* Soft pulsing halo behind the icon — draws the eye */ .leaders-bonus__halo { position: absolute; width: 140px; height: 140px; top: 50%; left: 0; transform: translate(-30%, -50%); background: radial-gradient(circle, rgba(90,200,250,0.35), transparent 65%); filter: blur(8px); pointer-events: none; z-index: 0; animation: leadersBonusHalo 3.5s ease-in-out infinite; } @keyframes leadersBonusHalo { 0%, 100% { opacity: 0.7; transform: translate(-30%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-30%, -50%) scale(1.08); } } /* Diagonal shine that sweeps across every few seconds */ .leaders-bonus__shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.20) 48%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.20) 52%, transparent 65%); transform: translateX(-100%); animation: leadersBonusShine 5s ease-in-out 2s infinite; pointer-events: none; z-index: 1; mix-blend-mode: overlay; } @keyframes leadersBonusShine { 0% { transform: translateX(-100%); } 50% { transform: translateX(120%); } 100% { transform: translateX(120%); } } /* Sparkle icon on the left — big, glowing */ .leaders-bonus__icon { position: relative; z-index: 2; flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.30), transparent 60%), linear-gradient(135deg, var(--splash-accent), var(--splash-accent-deep)); box-shadow: 0 0 18px rgba(90,200,250,0.55), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -2px 4px rgba(0,60,120,0.25); animation: leadersBonusIconPulse 2.4s ease-in-out infinite; } .leaders-bonus__icon svg { width: 38px; height: 38px; filter: drop-shadow(0 1px 2px rgba(0,40,120,0.40)); } @keyframes leadersBonusIconPulse { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.06) rotate(2deg); } } /* Content column on the right */ .leaders-bonus__content { position: relative; z-index: 2; min-width: 0; flex: 1; } .leaders-bonus__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .leaders-bonus__amount { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--splash-text); font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(90,200,250,0.30); } .leaders-bonus__badge { display: inline-flex; align-items: center; padding: 3px 9px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #fff; background: var(--splash-accent-deep); border-radius: 99px; box-shadow: 0 0 8px rgba(90,200,250,0.45); line-height: 1; white-space: nowrap; } .leaders-bonus__title { margin: 0 0 4px; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--splash-text); } .leaders-bonus__body { margin: 0 0 6px; font-size: 12.5px; line-height: 1.4; color: var(--splash-text-muted); } /* Small reassurance tag at the bottom — "Anyone can win" */ .leaders-bonus__cta { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; font-size: 11px; font-weight: 700; letter-spacing: -0.005em; color: var(--splash-accent-deep); background: rgba(255,255,255,0.65); border: 1px solid var(--splash-glass-border); border-radius: 99px; line-height: 1; } .leaders-bonus__cta svg { width: 11px; height: 11px; } /* Dark theme: the white-ish CTA tag needs less luminance */ :root[data-theme="dark"] .leaders-bonus__cta { background: rgba(120,200,255,0.20); color: #fff; } /* Narrow screens — keep the icon big but allow content to wrap */ @media (max-width: 360px) { .leaders-bonus { gap: 12px; padding: 14px 14px; } .leaders-bonus__icon { width: 48px; height: 48px; } .leaders-bonus__icon svg { width: 32px; height: 32px; } .leaders-bonus__amount { font-size: 24px; } } /* ── Shared tier rows ──────────────────────────────────────────── */ .leaders-tiers { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; } .leaders-tier-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--splash-glass-bg); border: 1px solid var(--splash-glass-border); border-radius: 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--splash-glass-shadow); opacity: 0; transform: translateY(6px); animation: leadersSplashFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .leaders-tier-row:nth-child(1) { animation-delay: 0.90s; } .leaders-tier-row:nth-child(2) { animation-delay: 0.98s; } .leaders-tier-row__range { font-size: 13px; font-weight: 700; color: var(--splash-text); letter-spacing: -0.01em; min-width: 56px; text-align: left; } .leaders-tier-row__range::before { content: "#"; color: var(--splash-text-muted); margin-right: 1px; font-weight: 600; } .leaders-tier-row__sep { flex: 1; height: 1px; background: var(--splash-glass-border); } .leaders-tier-row__amount { font-size: 14px; font-weight: 800; color: var(--splash-accent-deep); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* Random-tier variant: replaces the plain separator with a small * "Розыгрыш" pill carrying a dice-dots icon. Lets the user see at a * glance that this tier is a lottery, not a ranking. */ .leaders-tier-row--random { background: linear-gradient(135deg, rgba(90,200,250,0.18) 0%, rgba(145,220,255,0.06) 100%); border-color: var(--splash-accent-deep); } .leaders-tier-row__badge { display: inline-flex; align-items: center; gap: 5px; margin: 0 8px; padding: 4px 10px 4px 8px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.10em; color: #fff; background: var(--splash-accent-deep); border-radius: 99px; box-shadow: 0 0 10px rgba(90,200,250,0.50), inset 0 -1px 2px rgba(0,60,120,0.30); line-height: 1; white-space: nowrap; } .leaders-tier-row__badge svg { width: 12px; height: 12px; flex-shrink: 0; } /* ── Raffle callout — explains that places 51-100 are random ──── */ .leaders-raffle { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin: 12px 0 18px; padding: 14px 16px; border-radius: 16px; text-align: left; background: linear-gradient(135deg, rgba(90,200,250,0.16) 0%, rgba(145,220,255,0.04) 100%); border: 1px dashed var(--splash-accent-deep); box-shadow: var(--splash-glass-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); animation: leadersSplashFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.10s forwards; } .leaders-raffle__icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--splash-glass-bg); border: 1px solid var(--splash-glass-border); color: var(--splash-accent-deep); /* Gentle wobble — sells the "random / dice rolling" feel */ animation: leadersRaffleShake 5s ease-in-out 2s infinite; } .leaders-raffle__icon svg { width: 22px; height: 22px; } @keyframes leadersRaffleShake { 0%, 88%, 100% { transform: rotate(0deg); } 91% { transform: rotate(-6deg); } 94% { transform: rotate(6deg); } 97% { transform: rotate(-3deg); } } .leaders-raffle__text { min-width: 0; } .leaders-raffle__title { margin: 0 0 2px; font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--splash-text); line-height: 1.3; } .leaders-raffle__body { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--splash-text-muted); } /* Total winners footnote */ .leaders-winners-note { position: relative; z-index: 1; margin: 6px auto 18px; font-size: 12px; line-height: 1.4; color: var(--splash-text-muted); max-width: 280px; opacity: 0; animation: leadersSplashFadeUp 0.4s ease-out 1.06s forwards; } /* ── Participants count chip — social proof under the title ──────── */ .leaders-participants { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin: -4px auto 18px; padding: 7px 14px 7px 11px; background: var(--splash-glass-bg); border: 1px solid var(--splash-glass-border); border-radius: 99px; -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); box-shadow: var(--splash-glass-shadow); color: var(--splash-text-muted); font-size: 12.5px; line-height: 1.2; opacity: 0; transform: translateY(6px); animation: leadersSplashFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.38s forwards; } .leaders-participants__icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--splash-accent-deep); } .leaders-participants__text { font-weight: 500; color: var(--splash-text-muted); } .leaders-participants__text b { color: var(--splash-text); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin: 0 1px; } /* ── "How it works" 3-step section ─────────────────────────────── */ .leaders-how { position: relative; z-index: 1; margin: 0 0 18px; text-align: left; } .leaders-how__title { margin: 0 0 10px; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--splash-text); text-align: center; opacity: 0; animation: leadersSplashFadeUp 0.4s ease-out 1.14s forwards; } .leaders-how__steps { display: flex; flex-direction: column; gap: 8px; } .leaders-how__step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--splash-glass-bg); border: 1px solid var(--splash-glass-border); border-radius: 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--splash-glass-shadow); opacity: 0; transform: translateY(6px); animation: leadersSplashFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .leaders-how__step:nth-child(1) { animation-delay: 1.22s; } .leaders-how__step:nth-child(2) { animation-delay: 1.30s; } .leaders-how__step:nth-child(3) { animation-delay: 1.38s; } .leaders-how__num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--splash-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; line-height: 1; box-shadow: 0 0 10px rgba(90,200,250,0.35), inset 0 -2px 3px rgba(0,60,120,0.20); margin-top: 1px; } .leaders-how__text { min-width: 0; } .leaders-how__step-title { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; color: var(--splash-text); letter-spacing: -0.01em; line-height: 1.3; } .leaders-how__step-body { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--splash-text-muted); } /* ── Reminder callout — "Make deals now, you might win" ──────────── */ .leaders-reminder { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; border-radius: 16px; text-align: left; /* Slightly stronger blue tint than the regular glass — calls * attention without being noisy. */ background: linear-gradient(135deg, rgba(90,200,250,0.18) 0%, rgba(145,220,255,0.08) 100%); border: 1px solid var(--splash-accent-deep); box-shadow: 0 4px 18px rgba(90,200,250,0.18), inset 0 1px 0 rgba(255,255,255,0.10); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); animation: leadersSplashFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.50s forwards; } .leaders-reminder__icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--splash-accent-deep); color: #fff; box-shadow: 0 0 14px rgba(90,200,250,0.45), inset 0 -2px 4px rgba(0,60,120,0.25); } .leaders-reminder__icon svg { width: 22px; height: 22px; } .leaders-reminder__text { min-width: 0; } .leaders-reminder__title { margin: 0 0 2px; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; color: var(--splash-text); } .leaders-reminder__body { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--splash-text-muted); } /* Reduce motion — drop all entrance + ambient animations */ @media (prefers-reduced-motion: reduce) { .leaders-stage__halo, .leaders-stage__sparkles span, .leaders-slot__block, .leaders-slot__avatar, .leaders-medal-wrapper, .leaders-slot__name, .leaders-slot__amount, .leaders-row, .leaders-splash__halo, .leaders-splash__sparkles span, .leaders-splash__trophy, .leaders-splash__title, .leaders-splash__subtitle, .leaders-splash__cd-label, .leaders-cd, .leaders-cd__num--tick, .leaders-prize-pool, .leaders-prize-card, .leaders-tier-row, .leaders-winners-note, .leaders-participants, .leaders-how__title, .leaders-how__step, .leaders-reminder, .leaders-raffle, .leaders-raffle__icon, .leaders-bonus, .leaders-bonus__halo, .leaders-bonus__shine, .leaders-bonus__icon { animation: none !important; opacity: 1 !important; transform: none !important; } } /* Skeleton while data loads */ .leaders-skeleton { padding: 16px 0; } .leaders-skel-podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; padding: 60px 14px 18px; margin: 16px 0 24px; background: var(--leaders-showcase-bg); border-radius: 24px; box-shadow: var(--shadow-medium); min-height: 260px; } /* Each skel column shows an avatar circle on top of a block. */ .leaders-skel-col { flex: 1 1 0; max-width: 36%; display: flex; flex-direction: column; align-items: center; gap: 10px; } .leaders-skel-circle { border-radius: 50%; background: rgba(255,255,255,0.08); animation: leadersSkelPulse 1.3s ease-in-out infinite; } .leaders-skel-circle.big { width: 88px; height: 88px; } .leaders-skel-circle.small { width: 68px; height: 68px; } .leaders-skel-block { width: 100%; max-width: 130px; background: rgba(255,255,255,0.06); border-radius: 8px 8px 4px 4px; animation: leadersSkelPulse 1.3s ease-in-out infinite; } .leaders-skel-block.tall { height: 150px; } .leaders-skel-block.medium { height: 110px; } .leaders-skel-block.short { height: 80px; } .leaders-skel-list { display: flex; flex-direction: column; gap: 8px; padding: 0 2px; } .leaders-skel-row { height: 56px; background: var(--overlay-1); border-radius: 32px; animation: leadersSkelPulse 1.3s ease-in-out infinite; } @keyframes leadersSkelPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } } /* Polished "Доступно: N CURRENCY" callout that sits at the top of * every withdraw modal. Earlier this was just an .info-card with * inline plain text ("Доступно: 32.33 ⭐") — readable but visually * unremarkable. The variant below promotes the balance to a proper * stat card: tiny uppercase label, bold amount, currency badge on * the right. Same component used by all 4 withdraw flows (TON, * STARS, USDT, fiat) so they look consistent. * * Markup pattern: *
*
*

Доступно

*

32.33

*
*
⭐
*
*/ .info-card.balance-callout { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; background: linear-gradient(135deg, rgba(10,132,255,0.07) 0%, rgba(73,223,100,0.05) 100%); border: 1px solid rgba(10,132,255,0.12); } .balance-callout__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .balance-callout__label { margin: 0; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; } .balance-callout__amount { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.15; /* Long numbers (e.g. "1 250 000 ⭐" in formatted form) stay on one * line and ellipse rather than wrapping under the badge. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .balance-callout__badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 14px; background: rgba(255,255,255,0.7); color: var(--accent-blue); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } :root[data-theme="dark"] .balance-callout__badge { background: rgba(255,255,255,0.08); color: #fff; } .card-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: var(--text-primary); } /* ==================== ПРОФИЛЬ ==================== */ .profile-header { display: flex; flex-direction: column; align-items: center; padding: 20px 0 30px; } .profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-blue), var(--accent-light-blue)); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 600; margin-bottom: 12px; box-shadow: 0 4px 20px rgba(10, 132, 255, 0.4); position: relative; overflow: hidden; color: #fff; } /* sits on top of the initial letter once loaded; transparent until JS gives it a src + the 'loaded' class. Errors (broken TG CDN link) leave the img invisible so the initial letter shows through. ⚠ z-index matters: BOTH img and initial create stacking context (img via position:absolute, initial via position:relative+z-index). Without an explicit z-index on the img, the initial — which comes LATER in DOM order — paints ON TOP of the loaded image. That's the "вопросительный знак поверх аватарки" bug. Pin img to z-index:2 and initial to z-index:1 so the image always wins when loaded. */ .profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .15s ease; z-index: 2; } .profile-avatar img.loaded { opacity: 1; } .profile-avatar #profile-avatar-initial { position: relative; z-index: 1; line-height: 1; } .profile-name { font-size: 24px; font-weight: 700; margin-bottom: 4px; /* Long names (e.g. "Александр Александрович" or a 24-char latin handle) used to push the layout out and break the rounded header card. Constrain to the viewport with a comfortable inset and let the browser clip with an ellipsis. */ max-width: min(92vw, 360px); padding: 0 8px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-username { font-size: 15px; color: var(--text-secondary); max-width: min(92vw, 360px); padding: 0 8px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Заголовок карточки с переключателем */ .card-header-with-toggle { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; } /* iOS-style переключатель */ .toggle-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .toggle-switch input[type="checkbox"] { display: none; } .toggle-slider { position: relative; width: 51px; height: 31px; background: var(--overlay-2); border: 1px solid var(--border-color); border-radius: 31px; transition: background 0.3s ease, border-color 0.3s ease; flex-shrink: 0; /* Inset so the track is clearly visible against white card. */ box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); } .toggle-slider::before { content: ''; position: absolute; width: 25px; height: 25px; border-radius: 50%; background: #FFFFFF; top: 2px; left: 2px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 1px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.18); } .toggle-switch input[type="checkbox"]:checked + .toggle-slider { background: var(--accent-blue); } .toggle-switch input[type="checkbox"]:checked + .toggle-slider::before { transform: translateX(20px); } .toggle-label { font-size: 13px; color: var(--text-secondary); white-space: nowrap; } /* Балансы */ .balances-list { display: grid; gap: 12px; } /* Balance row sits inside an info-card (.card-bg). Using --secondary-bg on light theme made the row identical to the card it's nested in (both #FFFFFF) so taps "blended with the background". An overlay tint keeps the row subtly distinct on both themes; press feedback is just a brief scale + slightly darker overlay, not opacity. */ .balance-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--overlay-1); border: 1px solid var(--border-color); border-radius: var(--radius-small); transition: transform 0.15s ease, background 0.15s ease; gap: 12px; /* Hardware-accelerate the press animation so it doesn't twitch on layout reflow when the modal opens. */ will-change: transform; } .balance-item.hidden { display: none; } .balance-item:active { transform: scale(0.985); background: var(--overlay-2); } @media (hover: hover) { .balance-item:hover { background: var(--overlay-2); } } .balance-currency { display: flex; align-items: center; gap: 10px; /* `flex: 1 1 auto` (was `0 0 auto`) lets the wrapper share the available row width with `.balance-amount` and shrink when the sum is fat. Combined with `min-width: 0` on both sides, ellipsis on `.currency-name` actually triggers — `0 0 auto` would have kept it at intrinsic width and pushed the balance off-screen. */ flex: 1 1 auto; min-width: 0; overflow: hidden; } /* === Currency icons (unified) === All currency icons render at the same size for a given context. Use FunpayIcons.currencyIcon(code, size) from icons.js to inject. */ .currency-icon, .currency-icon-img, .currency-icon-svg, .cur-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .currency-icon-svg svg, .cur-icon { display: block; } /* small variant for chips/inline labels — was 9px which made text invisible. Restored to a readable size and aligned with .tx-currency-icon. */ .currency-icon.small, .currency-icon-img.small, .currency-icon-svg.small, .cur-icon.cur-icon-sm { width: 24px; height: 24px; min-width: 24px; min-height: 24px; } /* Иконки валют в транзакциях */ .tx-currency-icon { width: 24px; height: 24px; min-width: 24px; min-height: 24px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-primary); } .tx-currency-icon svg { width: 100%; height: 100%; display: block; } /* Цвета для конкретных валют — берутся из CSS-переменных, чтобы тёмная тема могла поднять контраст. */ .balance-item[data-currency="TON"] .tx-currency-icon, .transaction-item[data-currency="TON"] .tx-currency-icon { color: var(--color-ton); } .balance-item[data-currency="USDT"] .tx-currency-icon, .transaction-item[data-currency="USDT"] .tx-currency-icon { color: var(--color-usdt); } .balance-item[data-currency="STARS"] .tx-currency-icon, .transaction-item[data-currency="STARS"] .tx-currency-icon { color: var(--color-stars); } .balance-item[data-currency="RUB"] .tx-currency-icon, .transaction-item[data-currency="RUB"] .tx-currency-icon { color: #0039A6; } .balance-item[data-currency="USD"] .tx-currency-icon, .transaction-item[data-currency="USD"] .tx-currency-icon { color: #85BB65; } .balance-item[data-currency="EUR"] .tx-currency-icon, .transaction-item[data-currency="EUR"] .tx-currency-icon { color: #0051D5; } .balance-item[data-currency="GBP"] .tx-currency-icon, .transaction-item[data-currency="GBP"] .tx-currency-icon { color: #C8102E; } .balance-item[data-currency="CNY"] .tx-currency-icon, .transaction-item[data-currency="CNY"] .tx-currency-icon { color: #DE2910; } .balance-item[data-currency="JPY"] .tx-currency-icon, .transaction-item[data-currency="JPY"] .tx-currency-icon { color: #BC002D; } .tx-currency-icon img { width: 100%; height: 100%; object-fit: cover; } /* Currency / amount labels stay on one line (codes like "USDT" and numerics never look right wrapped) but we add ellipsis + min-width:0 so a long localised currency name OR a fat balance like "1234567.89 USDT" can shrink the row instead of pushing siblings off the right edge of the screen. */ .currency-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .balance-amount { font-size: 15px; font-weight: 600; color: var(--accent-blue); white-space: nowrap; text-align: right; margin-left: auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Статистика */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .stat-item { display: flex; flex-direction: column; padding: 16px; background: var(--overlay-1); border: 1px solid var(--border-color); border-radius: var(--radius-small); text-align: center; /* Same outline + tiny shadow as the balance row so the stat tiles stand off the card surface on light theme. */ box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .stat-item.stat-highlight { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(10, 132, 255, 0.20), rgba(100, 210, 255, 0.10)); border-color: rgba(10, 132, 255, 0.45); box-shadow: 0 2px 8px rgba(10,132,255,0.18); } .stat-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; } .stat-value { font-size: 22px; font-weight: 700; color: var(--text-primary); } .stat-highlight .stat-value { color: var(--accent-blue); } /* Курсы валют */ .rates-list { display: flex; flex-direction: column; gap: 12px; } .rate-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--overlay-1); border: 1px solid var(--border-color); border-radius: var(--radius-small); gap: 12px; /* Same lift as balance/stat tiles so the rate rows are visible on a white card surface. */ box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .rate-pair { display: flex; align-items: center; gap: 12px; flex: 1; } .rate-info { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 12px; /* min-width: 0 is the magic value that lets a flex child actually shrink below its content's intrinsic width — without it, text-overflow: ellipsis on the children doesn't trigger because the parent stays at intrinsic size and overflows the row. */ min-width: 0; } .rate-currency { font-size: 15px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; /* Allow the rate row to truncate the currency code if the rate value next to it pushes layout out of bounds (rare, but happens with very large rates like JPY where the value plus the currency code crosses the viewport on 320px screens). */ } .rate-icons { display: flex; align-items: center; } .rate-icon { width: 28px; height: 28px; min-width: 28px; min-height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; background: var(--card-bg); flex-shrink: 0; } .rate-icon-img { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; max-height: 28px !important; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; } .rate-icon + .rate-icon { margin-left: -10px; } .rate-name { font-size: 15px; font-weight: 500; } .rate-value { font-size: 16px; font-weight: 600; color: var(--accent-blue); white-space: nowrap; text-align: right; } /* ==================== КНОПКИ ==================== */ .action-buttons { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 24px; border: none; border-radius: var(--radius-medium); font-size: 17px; font-weight: 600; cursor: pointer; /* Earlier this was `transition: all 0.2s ease` which animated transform, box-shadow, color, padding — everything. When the JS toggled `.active` while the user's tap was still triggering `:active` (scale(.96)), the simultaneous transform + bg-color transitions clashed → "залития голубым мигает и дергает" (blue fill flashing/jerking on STARS recipient switch). Scoping the transition to only the colour properties keeps the press feel crisp while the colour swap stays smooth. */ transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; -webkit-tap-highlight-color: transparent; } .btn:active { transform: scale(0.96); /* The press transform is INSTANT — separate from the colour transition above so the two never compete on the same axis. */ transition: transform 0.08s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .btn-primary { background: var(--accent-blue); color: white; box-shadow: 0 4px 16px rgba(10, 132, 255, 0.4); } .btn-primary:hover { background: var(--accent-light-blue); } .btn-secondary { /* Use a TINTED surface (not pure card-bg) so the button is visibly different from the modal/card behind it. In the light theme card-bg, secondary-bg AND the surrounding card are ALL #FFFFFF, so a button using `--card-bg` literally blended into the background and looked like text floating on white — exactly the "кнопки сливаются" bug. The new `--btn-secondary-bg` resolves to #F2F2F7 on light (matches iOS HIG secondary surface) and a slightly raised mid-gray on dark; either way the button is clearly a button. */ background: var(--btn-secondary-bg, #F2F2F7); color: var(--text-primary); border: 1px solid var(--btn-secondary-border, rgba(0,0,0,0.18)); } /* Desktop-only hover. On touch devices the OS reports hover briefly on tap, which can flash a colour change just before .active lands — suppressing it eliminates the "blink" on STARS recipient switch. */ @media (hover: hover) and (pointer: fine) { .btn-secondary:hover { background: var(--btn-secondary-bg-hover, #E5E5EA); } } .btn-secondary.active { background: var(--accent-blue); color: white; border-color: var(--accent-blue); /* Matching shadow so the colour swap doesn't include a "shadow appears" jump on top of the bg change. */ box-shadow: 0 4px 16px rgba(10, 132, 255, 0.25); } .btn svg { flex-shrink: 0; } /* Иконочная кнопка для копирования */ .btn-icon { display: flex; align-items: center; justify-content: center; padding: 8px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .btn-icon:hover { background: var(--secondary-bg); transform: scale(1.05); } .btn-icon:active { transform: scale(0.95); } /* ==================== АДАПТИВНОСТЬ ==================== */ @media (min-width: 768px) { .tabbar-wrapper { max-width: 500px; margin: 0 auto; } .page-content { max-width: 600px; margin: 0 auto; } } /* ==================== АНИМАЦИИ ==================== */ @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideDownIn { /* unused — kept for future top-dropdown animations. Renamed to avoid colliding with the modal-overlay close keyframe of the same name. */ from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ==================== МОДАЛЬНЫЕ ОКНА ==================== */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Above the order-detail-overlay (3500) and transactions-overlay (3000) so a modal opened from inside one of those overlays sits on top — otherwise the share/confirm modal appeared behind and seemed "below the screen". */ z-index: 4000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; will-change: opacity; } .modal-overlay.closing { animation: fadeOut 0.15s cubic-bezier(0.4, 0, 1, 1) forwards; } /* The bottom-sheet container. Two patterns coexist in the JS: A. modals.js: ... B. dashboard.js: ... The styles below apply to whichever element is the *direct* child of the overlay so both patterns render identically. */ .modal, .modal-overlay > .modal-content { width: 100%; max-height: 90vh; background: var(--secondary-bg); border-radius: 24px 24px 0 0; padding: 24px 20px calc(var(--safe-area-bottom) + 20px); transform: translateY(100%); animation: slideUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; overflow-y: auto; will-change: transform; box-sizing: border-box; } .modal-overlay.closing .modal, .modal-overlay.closing > .modal-content { animation: slideDown 0.2s cubic-bezier(0.4, 0, 1, 1) forwards; } /* ── Wide-screen modal layout ─────────────────────────────────────── * Without this block, the bottom-sheet pattern (width:100% + rounded * top corners only) stretched edge-to-edge on iPad and landscape * phones, leaving acres of whitespace beside the form. The result * looked like a thin form floating in a giant white panel (see the * "Вывести Stars" screenshot from a 1200-pixel-wide device). * * On screens ≥ 560px we: * - cap the modal at 480px wide (comfortable form size on tablet) * - centre it vertically as well as horizontally * - round all four corners (no longer a bottom-sheet visually) * - swap the slide-up-from-bottom animation for a soft scale-fade * so it doesn't try to fly in from off-screen on a centred sheet */ @media (min-width: 560px) { .modal-overlay { align-items: center; padding: 24px; } .modal, .modal-overlay > .modal-content { max-width: 480px; width: 100%; max-height: calc(100vh - 48px); border-radius: 24px; animation: modalScaleIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; transform: scale(0.96); } @keyframes modalScaleIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } } /* In pattern A the inner .modal-content fades up; in pattern B it IS the sheet, no extra animation. */ .modal > .modal-content { transform: translateY(20px); opacity: 0; animation: slideUpFade 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.05s forwards; will-change: transform, opacity; } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .modal-title { font-size: 22px; font-weight: 700; } .modal-close, .btn-close { width: 32px; height: 32px; border-radius: 50%; background: var(--overlay-1); border: 1.5px solid var(--overlay-2); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .modal-close:hover, .btn-close:hover { background: var(--overlay-2); border-color: rgba(255, 255, 255, 0.2); transform: scale(1.05); } .modal-close:active, .btn-close:active { transform: scale(0.95); } .modal-close svg, .btn-close svg { width: 18px; height: 18px; stroke-width: 2.5; } /* ==================== ОРДЕРА ==================== */ .orders-list { display: flex; flex-direction: column; gap: 12px; } .order-card { background: var(--card-bg); border-radius: var(--radius-medium); padding: 16px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; } .order-card:active { transform: scale(0.98); border-color: var(--accent-blue); } .order-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .order-tag { font-size: 14px; font-weight: 600; color: var(--text-secondary); } .order-status { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; } .status-wait_payment { background: rgba(255, 159, 10, 0.2); color: var(--color-warning); } .status-paid { background: rgba(10, 132, 255, 0.2); color: var(--accent-blue); } .status-completed { background: rgba(48, 209, 88, 0.2); color: #30D158; } .status-cancelled { background: rgba(255, 69, 58, 0.2); color: #FF453A; } .order-amount { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: var(--accent-blue); } .order-description { font-size: 14px; color: var(--text-secondary); line-height: 1.4; } .empty-state, .loading, .error { text-align: center; padding: 40px 20px; color: var(--text-secondary); font-size: 16px; } /* === Skeleton loaders === Used as initial markup so a page never appears empty while data loads. */ @keyframes skel-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton-line, .skeleton-block { border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 40%, rgba(255,255,255,.04) 80%); background-size: 200% 100%; animation: skel-shimmer 1.4s linear infinite; } .skeleton-line { height: 14px; margin: 6px 0; } .skeleton-block { width: 100%; } .skeleton-h-44 { height: 44px; } .skeleton-h-72 { height: 72px; } .skeleton-w-30 { width: 30%; } .skeleton-w-50 { width: 50%; } .skeleton-w-70 { width: 70%; } .skeleton-card { /* same paddings/style as .info-card so swap is invisible */ background: var(--card-bg); border-radius: var(--radius-medium); padding: 16px; margin-bottom: 12px; } .skeleton-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; } .skeleton-circle-40 { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 40%, rgba(255,255,255,.04) 80%); background-size: 200% 100%; animation: skel-shimmer 1.4s linear infinite; flex-shrink: 0; } /* ==================== РЕКВИЗИТЫ ==================== */ .wallet-section { margin-bottom: 24px; } .wallet-section h3 { font-size: 20px; font-weight: 600; margin-bottom: 16px; } .requisite-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border-color); } .requisite-item:last-of-type { border-bottom: none; } .requisite-label { font-size: 13px; color: var(--text-secondary); } .requisite-value { font-size: 16px; font-weight: 500; color: var(--text-primary); word-break: break-all; } /* (Old duplicate of .modal-close/.btn-close was here; rules already exist at line ~828 with proper border styles. Removed.) */ .modal-body { padding-top: 4px; } /* Utility classes referenced by inline templates throughout the JS — the audit caught that none of these had rules, leaving widths / spacing unstyled in deposit/withdraw modals. */ .btn-block { width: 100%; } .btn-sm { padding: 8px 16px; font-size: 14px; min-height: 36px; } .form-text { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; } /* Cancel/Confirm pair at the bottom of every modal. Replaces the dozen inline `style="flex:1; margin-top:8px"` snippets — kept compatible with them by also matching that pattern. */ .modal-actions, .modal-footer { display: flex; gap: 8px; margin-top: 20px; } .modal-actions > .btn, .modal-footer > .btn { flex: 1; } /* ========== ФОРМЫ ========== */ .form { width: 100%; } .form-step { animation: fadeIn 0.3s ease; } .form-step.hidden { display: none; } .form-step-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0 0 20px 0; text-align: center; } .back-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; color: var(--accent-blue); font-size: 16px; cursor: pointer; padding: 8px 0; margin-bottom: 16px; transition: opacity 0.2s ease; } .back-btn:hover { opacity: 0.7; } .button-group { display: flex; flex-direction: column; gap: 12px; } .choice-btn { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 24px; background: var(--overlay-1); border: 2px solid var(--overlay-2); border-radius: var(--border-radius); color: var(--text-primary); font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .choice-btn:hover { background: var(--overlay-2); border-color: var(--accent-blue); transform: translateY(-2px); } .choice-btn svg { width: 24px; height: 24px; } .currency-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .currency-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; background: var(--overlay-1); border: 2px solid var(--overlay-2); border-radius: var(--border-radius); color: var(--text-primary); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .currency-btn:hover { background: var(--overlay-2); border-color: var(--accent-blue); transform: translateY(-2px); } /* (Removed: legacy .currency-icon override that pasted a blue gradient on top of every icon, including the SVG-circle ones from icons.js. The unified .currency-icon rule at the top of this file already sets size + flex centering and the SVG carries its own brand-coloured fill.) */ .form-group { margin-bottom: 20px; position: relative; } .form-label { display: block; font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; } /* Bare