:root { color-scheme: dark; accent-color: #D6FF3F; /* ===== Фон / поверхности: графит хард-корта ===== */ --bg: #0E1420; --bg-secondary: #131B29; --card: #182233; --card-hover: #1E2A3D; --card-elevated: #24314480; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); /* ===== Акцент: неоновый тенисный жёлто-зелёный ===== */ --accent: #D6FF3F; --accent-ink: #10160C; --accent-2: #8FE04A; --accent-glow: rgba(214, 255, 63, 0.32); --success: #4ADE80; --success-glow: rgba(74, 222, 128, 0.3); --warning: #FBBF24; --warning-glow: rgba(251, 191, 36, 0.3); --danger: #F16063; --danger-glow: rgba(241, 96, 99, 0.3); /* ===== Золото — трофей / медаль / титулы ===== */ --gold: #F0C468; --gold-bright: #FFE29A; --gold-dim: #8A6E24; --gold-glow: rgba(240, 196, 104, 0.4); /* Приглушённая версия золота — для мелких «трофейных» акцентов (иконки, бейджи), чтобы не спорить с неоновым --accent за внимание. Насыщенный --gold остаётся только у самого объекта медали чемпиона на главной. */ --gold-muted: #C9A868; --gold-muted-glow: rgba(201, 168, 104, 0.22); /* ===== Металлы ранга (серебро/бронза к золоту) ===== */ --silver: #C9CFDA; --silver-bright: #EDF1F7; --silver-dim: #6F7685; /* Приглушённая бронза — тёплый нейтральный серый, а не насыщенный оранжевый, чтобы не спорить с неоновым акцентом за внимание на одном экране */ --bronze: #A89184; --bronze-bright: #CDBBAE; --bronze-dim: #5C4E46; /* ===== Текст ===== */ --text: #F7F8FA; --text-dim: #9EA3B0; --text-faint: #61667A; /* ===== Радиусы ===== */ --radius-sm: 14px; --radius: 20px; --radius-lg: 24px; --radius-xl: 28px; --radius-full: 999px; /* ===== Тени / свечения ===== */ --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.7); --shadow-pop: 0 40px 80px -24px rgba(0, 0, 0, 0.8); --shadow-glow-accent: 0 0 0 1px rgba(214,255,63,.22), 0 12px 32px -8px var(--accent-glow); --shadow-glow-gold: 0 0 0 1px rgba(201,168,104,.22), 0 16px 40px -10px var(--gold-muted-glow); /* ===== Типографика ===== */ --font-display: 'Space Grotesk', 'Manrope', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ===== Layout ===== */ --sidebar-w: 264px; --sidebar-w-collapsed: 84px; --topbar-h: 76px; --tabbar-h: 64px; --content-max: 1400px; /* ===== Типографическая шкала ===== */ --fs-hero: clamp(34px, 4vw, 44px); --fs-h1: clamp(26px, 3vw, 34px); --fs-h2: 20px; --fs-h3: 17px; --fs-body: 14px; --fs-caption: 12px; --fs-micro: 10.5px; --track-tight: -0.025em; --track-caps: 0.12em; /* ===== Разделители ===== */ --divider: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent); --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ===================== Светлая тема ===================== */ /* Переключается атрибутом data-theme="light" на , ставится/читается в theme.js. Акцент и семантические цвета (success/warning/danger/gold) не меняются — меняется только графит: он становится чистой светлой поверхностью корта. */ :root[data-theme="light"] { color-scheme: light; --bg: #F3F5F1; --bg-secondary: #EAEDE6; --card: #FFFFFF; --card-hover: #F5F7F2; --card-elevated: #FFFFFF; --border: rgba(15, 23, 15, 0.09); --border-strong: rgba(15, 23, 15, 0.16); --accent-ink: #10160C; --text: #101614; --text-dim: #545E56; --text-faint: #8B9389; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 16px 32px -20px rgba(20, 30, 15, 0.18); --shadow-pop: 0 30px 60px -24px rgba(20, 30, 15, 0.28); } :root[data-theme="light"] body::before { background-image: radial-gradient(ellipse 1100px 600px at 15% -10%, rgba(214, 255, 63, 0.14), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(240, 196, 104, 0.08), transparent 60%), radial-gradient(ellipse 800px 500px at 50% 110%, rgba(143, 224, 74, 0.1), transparent 60%); } /* ===== Плавные переходы между страницами (MPA View Transitions) ===== Работает в Chrome/Edge 126+, в остальных браузерах просто игнорируется. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out 0.18s cubic-bezier(0.16, 1, 0.3, 1) both; } ::view-transition-new(root) { animation: vt-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }