/** * Theme Global Variables - Единая система контейнеров * * @package GamblingTheme * @version 3.1.0 - Unified Container System * * АРХИТЕКТУРА: * - ОДИН основной контейнер (1400px) для ВСЕХ страниц * - Фон секций на 100% ширины * - Контент внутри контейнера (меню, hero, контент+sidebar) * - НЕТ "прыжков" ширины при навигации между страницами * - Системные шрифты (0ms загрузка, нет FOUT) */ :root { /* ============================================ 🎨 ЦВЕТА ============================================ */ /* Основной цвет - золото (кнопки, ссылки, акценты) */ /* --primary: #D4AF37;*/ --primary: #15b89c; /* Золото светлее - при наведении на кнопки/ссылки */ --primary-hover: #F4CF5A; /* Дополнительный цвет - темно-красный (опасные действия, удаление) */ --secondary: #8B0000; /* Третичный цвет - темно-зеленый (для игр, крипто-тема) */ --tertiary: #2C5F2D; /* Зеленый светлее - при наведении */ --tertiary-hover: #3a7d3e; /* Успех - зеленый (сообщения об успехе, "выигрыш") */ --success: #28A745; /* Предупреждение - желтый (внимание, важная информация) */ --warning: #FFC107; /* Ошибка - красный (сообщения об ошибках, проигрыш) */ --error: #DC3545; /* Информация - синий (нейтральные уведомления) */ --info: #15b89c; /* #15b89c-зеленый --info: #17A2B8;*/ /* Основной текст - белый (главный текст на темном фоне) */ --text-primary: #FFFFFF; /* Второстепенный текст - светло-серый (описания, подзаголовки) */ --text-secondary: #B8B8B8; /* Приглушенный текст - серый (метаданные, даты, мелкие детали) */ --text-muted: #808080; /* Отключенный текст - темно-серый (неактивные элементы) */ --text-disabled: #505050; /* Текст на темном фоне - белый (для overlay, модальных окон) */ --text-on-dark: #FFFFFF; /* Текст на светлом фоне - почти черный (если есть светлые блоки) */ --text-on-light: #1A1A1A; /* Красный цвет */ --text-on-red: #ff0000; /* Основной фон - почти черный (фон body) */ --bg-primary: #292929; /*--bg-primary: #0D0D0D;*/ /* Вторичный фон - темно-серый (карточки, блоки контента) */ --bg-secondary: #15151e; /*--bg-secondary: #1A1A1A;*/ /* Третичный фон - серый посветлее (вложенные блоки, sidebar) */ --bg-tertiary: #27292d; /*--bg-tertiary: #252525;*/ /* Четверный фон - (Контейнер) */ --bg-container: #1f2024; /* Пятый фон - (фон блоков) */ --bg-blok: #13141d; /* Фон overlay - полупрозрачный черный (модальные окна, затемнение) */ --bg-overlay: rgba(0, 0, 0, 0.85); /* Основная граница - темно-серая (разделители между блоками) */ --border-color: #333333; /* Вторичная граница - серая посветлее (внутренние разделители) */ --border-secondary: #444444; /* Акцентная граница - золотая (выделение активных элементов) */ --border-accent: #D4AF37; /* Ссылка по умолчанию - золотая (обычное состояние) */ --link-default: #D4AF37; /* Ссылка при наведении - светло-золотая (hover) */ --link-hover: #F4CF5A; /* Ссылка активная - темно-золотая (клик/активное состояние) */ --link-active: #B8941F; /* Ссылка посещенная - золотая приглушенная (уже кликали) */ --link-visited: #C4A030; /* Градиент основной - золотой (кнопки, баннеры, CTA) */ /* --gradient-primary: linear-gradient(135deg, #D4AF37 0%, #8B6914 100%);*/ --gradient-primary: linear-gradient(135deg, #15b89c 0%, #8B6914 100%); /* Градиент вторичный - красный (опасные действия, premium) */ --gradient-secondary: linear-gradient(135deg, #8B0000 0%, #5A0000 100%); /* ============================================ Изображение ============================================ */ /* Ссылка по умолчанию - золотая (обычное состояние) */ /* Ширина изображения 50% */ --pag-width-5: 50%; /* Ширина изображения 70% */ --pag-width-7: 70%; /* Ширина изображения 80% */ --pag-width-8: 80%; /* ============================================ 📝 ТИПОГРАФИКА - СИСТЕМНЫЕ ШРИФТЫ ============================================ */ /* * Системный шрифт-стек (как у GitHub, Apple, Medium) * * ПОЧЕМУ НЕ ПРЫГАЕТ: * - Шрифт УЖЕ на компьютере пользователя (0ms загрузка) * - Нет замены шрифта после загрузки страницы * - Нет перерисовки layout * * ЧТО ВИДИТ ПОЛЬЗОВАТЕЛЬ: * - macOS/iOS → San Francisco (шрифт Apple) * - Windows 10/11 → Segoe UI (шрифт Microsoft) * - Android → Roboto (шрифт Google, встроенный в систему) * - Linux → Helvetica Neue или Arial * * ПРЕИМУЩЕСТВА: * ✅ 0ms загрузка (вместо 200-500ms у Google Fonts) * ✅ 0 KB трафика (вместо 20-50 KB) * ✅ Нет прыжков текста (FOUT) * ✅ Приватность (нет запросов к Google) * ✅ 100% надежность (не зависит от CDN) */ --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* * Заголовки - тот же системный шрифт * (можно было бы сделать отдельный, но для единообразия используем тот же) * Жирность настраивается через --font-weight переменные ниже */ --font-headings: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* * Моноширинный шрифт (для кода, номеров счетов, ID транзакций) * SF Mono (Mac) → Monaco (старый Mac) → Cascadia Code (Windows) → Courier New (fallback) */ --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace; /* ============================================ 📏 РАЗМЕРЫ ШРИФТОВ ============================================ */ /* Базовый размер - основа для всех расчетов (обычный текст параграфов) */ --font-base: 16px; /* Очень большой - главный заголовок на главной странице */ --font-3xl: 48px; /* Большой - крупные заголовки секций */ --font-2xl: 36px; /* Увеличенный - подзаголовки важных блоков */ --font-xl: 28px; /* Крупный - обычные заголовки H2-H3 */ --font-lg: 24px; /*--font-lg: 24px;*/ /* Средний - выделенный текст, крупные кнопки */ --font-md: 20px; /* Маленький - мелкий текст, подписи, метаданные */ --font-sm: 14px; /* Очень маленький - copyright, legal text, сноски */ --font-xs: 12px; /* ============================================ 💪 ЖИРНОСТЬ ШРИФТА ============================================ */ /* Тонкий - для больших заголовков (эффект легкости) */ --font-light: 300; /* Обычный - основной текст параграфов */ --font-normal: 400; /* Средний - выделение важного текста внутри параграфа */ --font-medium: 500; /* Полужирный - подзаголовки, важные элементы */ --font-semibold: 600; /* Жирный - заголовки H1-H2, кнопки */ --font-bold: 700; /* Очень жирный - акцентные заголовки, логотипы */ --font-extrabold: 800; /* ============================================ 📐 ВЫСОТА СТРОКИ (line-height) ============================================ */ /* Плотная - для заголовков (меньше пространства между строками) */ --line-height-tight: 1.2; /* Обычная - для основного текста (читабельность) */ --line-height-normal: 1.5; /* Свободная - для длинных статей (комфортное чтение) */ --line-height-relaxed: 1.7; /* Очень свободная - для особо важного текста (легкость восприятия) */ --line-height-loose: 2.0; /* ============================================ 🔤 МЕЖБУКВЕННОЕ РАССТОЯНИЕ (letter-spacing) ============================================ */ /* Плотное - для крупных заголовков (визуально компактнее) */ --letter-spacing-tight: -0.02em; /* Обычное - для основного текста (по умолчанию) */ --letter-spacing-normal: 0; /* Широкое - для uppercase текста, логотипов (читабельность) */ --letter-spacing-wide: 0.05em; /* ============================================ 🎯 ЗАГОЛОВКИ H1-H6 (Десктоп) ============================================ */ /* H1 - самый крупный заголовок страницы */ --h1-size: 24px; /*28px;--h1-size: 48px;*/ --h1-line-height: 1.2; /* Плотная строка для крупного текста */ --h1-weight: 700; /* Жирный для акцента */ /* H2 - заголовок секции */ --h2-size: 24px; /*--h2-size: 36px;*/ --h2-line-height: 1.25; --h2-weight: 700; /* H3 - подзаголовок в секции */ --h3-size: 22px; /*--h3-size: 28px;*/ --h3-line-height: 1.3; --h3-weight: 600; /* Чуть легче чем H1/H2 */ /* H4 - мелкий заголовок блока */ --h4-size: 20px; /*--h4-size: 24px;*/ --h4-line-height: 1.35; --h4-weight: 600; /* H5 - заголовок карточки, виджета */ --h5-size: 20px; --h5-line-height: 1.4; --h5-weight: 600; /* H6 - самый мелкий заголовок (редко используется) */ --h6-size: 18px; --h6-line-height: 1.4; --h6-weight: 600; /* ============================================ 📱 ЗАГОЛОВКИ H1-H6 (Планшеты ≤1024px) ============================================ */ /* На планшетах заголовки чуть меньше для экономии места */ --h1-size-tablet: 28px; /* 40px;Было 48px на десктопе */ --h2-size-tablet: 28px; /* 32px;Было 36px */ --h3-size-tablet: 26px; /* Было 28px */ --h4-size-tablet: 22px; /* Было 24px */ --h5-size-tablet: 18px; /* Было 20px */ --h6-size-tablet: 16px; /* Было 18px */ /* ============================================ 📱 ЗАГОЛОВКИ H1-H6 (Мобильные ≤768px) ============================================ */ /* На мобильных заголовки ещё меньше (узкий экран) */ --h1-size-mobile: 20px; /* 32px;Было 48px на десктопе */ --h2-size-mobile: 20px; /* 28px; Было 36px */ --h3-size-mobile: 18px; /* 24px;Было 28px */ --h4-size-mobile: 18px; /* Было 24px */ --h5-size-mobile: 18px; /* Было 20px */ --h6-size-mobile: 18px; /* Было 18px */ /* ============================================ 📐 РАЗМЕРЫ И ОТСТУПЫ ============================================ */ /* Микро-отступ - между иконкой и текстом */ --spacing-0: 0px; --spacing-xxs: 4px; /* Очень малый - внутренние отступы в маленьких кнопках */ --spacing-xs: 8px; /* 10px*/ --spacing-10: 10px; /* Малый - между элементами формы */ --spacing-sm: 12px; /* Средний - стандартный отступ между блоками */ --spacing-md: 16px; /* Большой - между секциями на странице */ --spacing-lg: 24px; /* Очень большой - отступ вокруг крупных блоков */ --spacing-xl: 32px; /* Огромный - между основными секциями */ --spacing-2xl: 48px; /* Гигантский - отступы в hero-секциях */ --spacing-3xl: 64px; /* Максимальный - для особых лендингов */ --spacing-4xl: 96px; /* ============================================ 📦 КОНТЕЙНЕРЫ (единая система) ============================================ */ /* * ОСНОВНОЙ КОНТЕЙНЕР - используется ВЕЗДЕ * * ПОЧЕМУ ЕДИНАЯ ШИРИНА: * ✅ Контент не "прыгает" при переходе между страницами * ✅ Визуальная стабильность и профессионализм * ✅ Проще в поддержке (один параметр вместо множества) * ✅ Меню, Hero, Контент, Sidebar - все в одном контейнере * * Главная → Каталог → Статья → Игра * 1400px → 1400px → 1400px → 1400px ✅ СТАБИЛЬНО */ --container-max: 1400px; /* Узкий контейнер - для форм регистрации, логина (по центру) */ --container-narrow: 800px; /* Планшеты (если нужно фиксированная ширина вместо 100%) */ --container-tablet: 768px; /* Мобильные (если нужно фиксированная ширина вместо 100%) */ --container-mobile: 640px; /* Полная ширина (для фонов секций) */ --container-full: 100%; /* * Внутренние отступы контейнера (padding слева/справа) * Создают "воздух" между краем экрана и контентом */ --container-padding: 10px; /* Desktop: 40px с каждой стороны */ /* --container-padding: 40px; /* Desktop: 40px с каждой стороны */ --container-padding-tablet: 10px; /* Tablet: 30px */ --container-padding-mobile: 10px; /* Mobile: 20px */ /* ============================================ 📊 LAYOUT: КОНТЕНТ + SIDEBAR (2-колоночная раскладка) ============================================ */ /* * Основная раскладка - 75% / 25% (ИСХОДНОЕ СООТНОШЕНИЕ) * * ПОЧЕМУ 75/25: * ✅ Контент (75% = ~1020px на 1400px) - широкий для статей и контента * ✅ Sidebar (25% = ~340px на 1400px) - компактный для виджетов * ✅ Классическое соотношение для контентных сайтов * ✅ Sidebar не перегружает визуально */ --content-width: 75%; /* Основной контент */ --sidebar-width: 25%; /* Боковая панель (sidebar) */ --layout-gap: 40px; /* Отступ между контентом и sidebar */ /* * Альтернативная раскладка - 70% / 30% * Для страниц с большим количеством виджетов в sidebar */ --content-width-alt: 70%; /* Чуть уже контент */ --sidebar-width-alt: 30%; /* Чуть шире sidebar */ /* Без sidebar - контент на всю ширину */ --content-width-full: 100%; /* ============================================ 🗂️ СЕТКА (Grid) ============================================ */ /* Количество колонок в сетке (стандарт Bootstrap) */ --grid-columns: 12; /* Расстояние между колонками (DEPRECATED: используйте --layout-gap) */ --grid-gap: 30px; /* ============================================ 🎮 СЕТКА ИГР (адаптивная) ============================================ */ /* Минимальная ширина одной карточки игры */ --game-card-min-width: 280px; /* Отступы между карточками игр */ --game-grid-gap: 24px; /* Desktop */ --game-grid-gap-tablet: 20px; /* Tablet */ --game-grid-gap-mobile: 16px; /* Mobile */ /* ============================================ 🔘 СКРУГЛЕНИЕ УГЛОВ (border-radius) ============================================ */ /* Без скругления - острые углы */ --radius-none: 0; /* Минимальное - легкое смягчение углов */ --radius-xs: 4px; /* Малое - кнопки, инпуты */ --radius-sm: 0px; /*--radius-sm: 6px;*/ /* Среднее - карточки, модальные окна */ --radius-md: 0px; /*--radius-md: 8px;*/ /* Большое - крупные блоки */ --radius-lg: 0px; /*--radius-lg: 12px;*/ /* Очень большое - hero-блоки */ --radius-xl: 3px; /* Полное скругление - круглые кнопки, аватары */ --radius-full: 9999px; /* ============================================ 🖌️ ТОЛЩИНА ГРАНИЦ (border-width) ============================================ */ /* Тонкая граница - разделители */ --border-thin: 1px; /* Обычная граница - кнопки, инпуты */ --border-normal: 2px; /* Толстая граница - акцентные элементы */ --border-thick: 4px; /* ============================================ 🌓 ТЕНИ (box-shadow) ============================================ */ /* Без тени - плоские элементы */ --shadow-none: none; /* Малая тень - легкое поднятие (карточки при наведении) */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); /* Средняя тень - обычные карточки */ --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4); /* Большая тень - выпадающие меню, модальные окна */ --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5); /* Очень большая тень - поповеры, тултипы */ --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.6); /* Внутренняя тень - вдавленные элементы (инпуты в фокусе) */ --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.4); /* Золотая тень - для акцентных элементов (премиум кнопки) */ --shadow-gold: 0 4px 12px rgba(212, 175, 55, 0.3); /* ============================================ ✨ ТЕНИ ТЕКСТА (text-shadow) ============================================ */ /* Малая тень - легкая читабельность на фоне */ --text-shadow-sm: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Средняя тень - заголовки на изображениях */ --text-shadow-md: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Большая тень - крупные заголовки на ярких фонах */ --text-shadow-lg: 3px 3px 6px rgba(0, 0, 0, 0.7); /* ============================================ 🔘 КНОПКИ ============================================ */ /* Высота маленькой кнопки (в формах, тулбарах) */ --button-height-sm: 32px; /* Высота средней кнопки (стандартная) */ --button-height-md: 44px; /* Высота большой кнопки (CTA, главные действия) */ --button-height-lg: 56px; /* Горизонтальный отступ внутри кнопки (слева/справа от текста) */ --button-padding-h: 24px; /* Вертикальный отступ внутри кнопки (сверху/снизу от текста) */ --button-padding-v: 12px; /* Скругление углов кнопки */ --button-radius: 8px; /* Размер шрифта в кнопке */ --button-font-size: 16px; /* Жирность шрифта в кнопке */ --button-font-weight: 600; /* Длительность анимации при наведении/клике */ --button-transition: 300ms; /* ============================================ 📱 BREAKPOINTS (точки перелома для адаптивности) ============================================ */ /* Очень маленькие экраны (старые смартфоны) */ --breakpoint-xs: 480px; /* Маленькие экраны (смартфоны в портретной ориентации) */ --breakpoint-sm: 768px; /* Средние экраны (планшеты, смартфоны в ландшафте) */ --breakpoint-md: 1024px; /* Большие экраны (ноутбуки, десктопы) */ --breakpoint-lg: 1440px; /* Очень большие экраны (большие мониторы) */ --breakpoint-xl: 1920px; /* ============================================ ⏱️ АНИМАЦИИ ============================================ */ /* Быстрая анимация (hover на мелких элементах) */ --transition-fast: 150ms; /* Обычная анимация (кнопки, ссылки, большинство элементов) */ --transition-base: 300ms; /* Медленная анимация (модальные окна, слайдеры) */ --transition-slow: 500ms; /* Функция плавности - ускорение в начале (ease-in) */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Функция плавности - замедление в конце (ease-out) */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* Функция плавности - ускорение в начале и конце (ease-in-out) */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Линейная анимация (без ускорения/замедления) */ --ease-linear: linear; /* ============================================ 🖼️ Z-INDEX (слои наложения элементов) ============================================ */ /* Выпадающие меню (dropdown) */ --z-dropdown: 1000; /* Прилипающие элементы (sticky header) */ --z-sticky: 1020; /* Фиксированные элементы (fixed navbar) */ --z-fixed: 1030; /* Затемнение фона под модальным окном */ --z-modal-backdrop: 1040; /* Модальное окно */ --z-modal: 1050; /* Поповер (всплывающее окно с контентом) */ --z-popover: 1060; /* Тултип (подсказка при наведении) */ --z-tooltip: 1070; /* ============================================ 📏 ИКОНКИ ============================================ */ /* Очень маленькая иконка (в тексте) */ --icon-xs: 12px; /* Маленькая иконка (в кнопках, рядом с текстом) */ --icon-sm: 16px; /* Средняя иконка (стандартный размер) */ --icon-md: 24px; /* Большая иконка (в заголовках секций) */ --icon-lg: 32px; /* Очень большая иконка (декоративная) */ --icon-xl: 48px; /* ============================================ 🎯 СПЕЦИФИЧЕСКИЕ ЭЛЕМЕНТЫ ============================================ */ /* ===== ИНПУТЫ (текстовые поля) ===== */ /* Высота текстового поля */ --input-height: 48px; /* Отступы внутри инпута (вертикальный горизонтальный) */ --input-padding: 12px 16px; /* Скругление углов инпута */ --input-radius: 8px; /* Толщина границы инпута */ --input-border-width: 2px; /* Размер шрифта в инпуте */ --input-font-size: 16px; /* ===== КАРТОЧКИ (cards) ===== */ /* Внутренние отступы карточки */ --card-padding: 24px; /* Скругление углов карточки */ --card-radius: 12px; /* Тень карточки (ссылается на --shadow-md выше) */ --card-shadow: var(--shadow-md); /* ===== НАВИГАЦИЯ (header/navbar) ===== */ /* Высота шапки сайта */ --nav-height: 70px; /* Горизонтальные отступы в навигации (слева/справа) */ --nav-padding: 0 32px; /* Расстояние между пунктами меню */ --nav-item-spacing: 24px; } /* ======================================== СТАТУСЫ КАЗИНО - ЦВЕТОВАЯ СХЕМА ======================================== */ :root { /* Зелёный (Лицензировано) */ --status-green-bg: #d4edda; --status-green-text: #155724; --status-green-border: #c3e6cb; /* Синий (Проверено) */ --status-blue-bg: #d1ecf1; --status-blue-text: #0c5460; --status-blue-border: #bee5eb; /* Оранжевый (Новое) */ --status-orange-bg: #fff3cd; --status-orange-text: #856404; --status-orange-border: #ffeaa7; /* Красный (Внимание) */ --status-red-bg: #f8d7da; --status-red-text: #721c24; --status-red-border: #f5c6cb; /* Фиолетовый (Эксклюзив) */ --status-purple-bg: #e2d9f3; --status-purple-text: #4a148c; --status-purple-border: #d1c4e9; /* Серый (Неактивно) */ --status-gray-bg: #e2e3e5; --status-gray-text: #383d41; --status-gray-border: #d6d8db; }