/* ============================================================ NGTV QUEST — Design Tokens Подключить первым в перед всеми другими стилями: ============================================================ */ :root { /* ---------------------------------------------------------- PRIMITIVE TOKENS — не использовать напрямую в компонентах ---------------------------------------------------------- */ /* Teal ramp */ --_teal-200: #99e4e6; --_teal-300: #40c8cc; --_teal-400: #0EA5AA; --_teal-500: #0b868a; --_teal-600: #086d70; --_teal-700: #054a4d; --_teal-800: #03282a; /* Neutrals — тёплые, не холодно-серые */ --_n-50: #F0EEEC; --_n-100: #D8D5D1; --_n-200: #B8B4AE; --_n-300: #92908A; --_n-400: #6E6C66; --_n-500: #4E4C47; --_n-600: #333130; --_n-700: #222120; --_n-800: #161514; --_n-900: #0C0B0A; /* Semantic primitives */ --_green: #22C55E; --_amber: #F59E0B; --_red: #EF4444; --_blue: #38BDF8; /* ---------------------------------------------------------- SEMANTIC TOKENS — использовать в компонентах ---------------------------------------------------------- */ /* Акцент */ --color-accent: var(--_teal-400); /* #0EA5AA — основной */ --color-accent-light: var(--_teal-300); /* #40c8cc — текст/иконки на тёмном */ --color-accent-dark: var(--_teal-600); /* #086d70 — hover, pressed */ --color-accent-subtle: rgba(14, 165, 170, 0.12); /* заливка бейджей */ --color-accent-border: rgba(14, 165, 170, 0.25); /* обводка карточек */ /* Поверхности (elevation через lightness) */ --surface-base: #08100F; /* уровень 0 — основной фон */ --surface-raised: #111c1b; /* уровень 1 — карточки */ --surface-overlay: #182826; /* уровень 2 — bottom sheet, модалки */ --surface-glass: rgba(8, 16, 15, 0.88); /* frosted glass для navbar */ /* Тонкие границы */ --border-default: rgba(255, 255, 255, 0.06); --border-accent: rgba(14, 165, 170, 0.25); --border-danger: rgba(239, 68, 68, 0.30); /* Текст */ --text-primary: #E8E6E2; /* основной — не чисто белый */ --text-secondary: #92908A; /* вторичный */ --text-muted: #4E4C47; /* выключенный, placeholder */ --text-accent: var(--color-accent-light); /* Семантические цвета */ --color-success: var(--_green); --color-warning: var(--_amber); --color-danger: var(--_red); --color-info: var(--_blue); /* Семантические заливки (для бейджей) */ --bg-success: rgba(34, 197, 94, 0.12); --bg-warning: rgba(245, 158, 11, 0.12); --bg-danger: rgba(239, 68, 68, 0.12); --bg-info: rgba(56, 189, 248, 0.12); /* Акценты модулей */ --accent-quests: var(--color-accent); /* teal */ --accent-battle: #7B5EA7; /* violet */ --accent-mixology: var(--_green); /* green */ --accent-giveaway: var(--_red); /* red */ --accent-rating: var(--_blue); /* blue */ /* ---------------------------------------------------------- ТИПОГРАФИКА ---------------------------------------------------------- */ --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Размерная шкала */ --text-micro: 11px; --text-caption: 13px; --text-body: 15px; --text-subhead: 17px; --text-title: 20px; --text-hero: 28px; /* Веса */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 600; --weight-black: 700; /* Межстрочный */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-loose: 1.7; /* Межбуквенный */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* ---------------------------------------------------------- СЕТКА И ОТСТУПЫ — base unit: 4px ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Горизонтальный отступ экрана */ --screen-x: 16px; /* Скругления */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; /* кнопки */ --radius-lg: 16px; /* карточки */ --radius-xl: 20px; /* bottom sheet */ --radius-full: 9999px; /* пилли, аватары */ /* ---------------------------------------------------------- КОМПОНЕНТЫ — токены для конкретных элементов ---------------------------------------------------------- */ /* Button */ --btn-height: 48px; --btn-height-sm: 36px; --btn-height-xs: 28px; --btn-padding-x: 20px; --btn-padding-x-sm: 14px; --btn-font-size: var(--text-body); --btn-font-weight: var(--weight-medium); --btn-radius: var(--radius-md); /* Card */ --card-bg: var(--surface-raised); --card-border: var(--border-default); --card-radius: var(--radius-lg); --card-padding: var(--space-4); /* Progress */ --progress-height: 5px; --progress-height-sm: 3px; --progress-bg: rgba(255, 255, 255, 0.08); --progress-radius: var(--radius-full); /* Badge */ --badge-font-size: var(--text-micro); --badge-font-weight: var(--weight-bold); --badge-padding: 3px 9px; --badge-radius: var(--radius-full); /* Input */ --input-height: 48px; --input-bg: var(--surface-overlay); --input-border: var(--border-default); --input-radius: var(--radius-md); --input-font: var(--text-body); /* Avatar */ --avatar-sm: 28px; --avatar-md: 40px; --avatar-lg: 56px; --avatar-bg: rgba(14, 165, 170, 0.15); /* Navbar */ --navbar-height: 60px; --navbar-icon-size: 22px; --navbar-label-size: var(--text-micro); /* Z-index шкала */ --z-card: 1; --z-sticky: 10; --z-navbar: 20; --z-sheet: 30; --z-toast: 40; --z-overlay: 50; /* ---------------------------------------------------------- АНИМАЦИИ ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --duration-fast: 120ms; --duration-normal: 220ms; --duration-slow: 360ms; /* Sheet появление */ --sheet-ease: cubic-bezier(0.32, 0.72, 0, 1); --sheet-duration: 300ms; } /* ============================================================ LIGHT THEME OVERRIDE Если у пользователя Telegram со светлой темой ============================================================ */ [data-theme="light"] { --surface-base: #F4F2EF; --surface-raised: #FFFFFF; --surface-overlay: #EBEBEB; --surface-glass: rgba(244, 242, 239, 0.90); --border-default: rgba(0, 0, 0, 0.08); --border-accent: rgba(14, 165, 170, 0.30); --text-primary: #111110; --text-secondary: #55524D; --text-muted: #9E9B95; --progress-bg: rgba(0, 0, 0, 0.08); --card-border: rgba(0, 0, 0, 0.08); } /* ============================================================ ГЛОБАЛЬНЫЙ СБРОС — базовые правила ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-base); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--text-primary); background-color: var(--surface-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; } /* Убираем tap highlight на мобиле */ * { -webkit-tap-highlight-color: transparent; } /* Цифры в таблично-одинаковой ширине (для очков, таймеров) */ .tabular-nums { font-variant-numeric: tabular-nums; } /* Уважаем prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ BRIDGE — перекрываем старые переменные style.css чтобы весь существующий UI получил teal акцент ============================================================ */ :root { --mint: #40c8cc; --mint-dim: #0EA5AA; --mint-bg: rgba(14, 165, 170, 0.08); --mint-glow: rgba(14, 165, 170, 0.18); --mint-glow2: rgba(14, 165, 170, 0.08); --violet: #a78bdb; --violet-dim: #7B5EA7; --violet-bg: rgba(123, 94, 167, 0.12); --violet-glow: rgba(123, 94, 167, 0.20); } /* ============================================================ BRIDGE — переопределяем пиксельные шрифты на Inter Битва сохраняет свой стиль через отдельный класс ============================================================ */ :root { --font-px: 'Inter', system-ui, sans-serif; --font-m: 'Inter', system-ui, sans-serif; --font-sys: 'Inter', system-ui, sans-serif; }