/* Анимация всплывающей подсказки для ВСЕХ серверов */ #vx-pie-1:hover #online-info, #vx-pie-2:hover #online-info, #vx-pie-3:hover #online-info {/*----------------------------------------------------------------------/*-----------------------------------*/ animation-name: slideInUp; /* Название анимации */ animation-duration: 0.5s; /* Длительность 0.5 секунд */ animation-fill-mode: both; /* Cохраняет положение подсказки */ }/*----------------------------------------------------------------------/*-----------------------------------*/ @keyframes slideInUp { 0% {transform: translateY(100%); visibility: visible;} 100% {transform: translateY(0);} } /* --- RESET --- */ * {margin: 0; padding: 0; box-sizing: border-box;} h1 {margin: 0; padding: 0; font-size: 21px; font-weight: 700; margin-bottom: 10px;} h3 {margin: 0; padding: 0; font-size: 17px; font-weight: 500; margin-bottom: 10px;} h5 {margin: 0; padding: 0; font-size: 13px; font-weight: 300; margin-bottom: 10px;} .spoiler-body::-webkit-scrollbar {display: none;} /* Scrollbar-off */ /*-----------------------------------*/ body /* СТИЛЬ СТРАНИЦЫ САЙТА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ margin: 0; /* Сброс отступов */ padding: 0; /* Сброс полей */ overflow: hidden; /* Блокировка всего скроллинга */ font-family: 'Play', sans-serif; /* Игровой шрифт сайта - "Play" */ color: #9b9b9b; /* Цвет текста */ font-size: 15px; /* Размер шрифта */ line-height: 1.3; /* Межстрочный интервал */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #container /* ГЛАВНЫЙ КОНТЕЙНЕР САЙТА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ width: 100%; /* Ширина на весь экран */ min-height: 100vh; /* Фиксированная высота */ margin: 0; /* Сброс отступов */ padding: 0; /* Сброс полей */ display: flex; /* Flex-контейнер для выравнивания */ overflow: hidden; /* Обрезать вылезающий контент */ position: relative; /* Для позиционирования детей */ flex-direction: column; /* Вертикальное расположение блоков */ /* outline: 1px dashed #b21a27; /* Красный пунктир каркаса */ /* outline-offset: 0px; /* Центровочная обводка блока */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #top-menu /* КОНТЕЙНЕР МЕНЮ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ top: 0; /* Фиксация у верхнего края браузера */ width: 100%; /* Ширина на весь экран */ height: 51px; /* Фиксированная высота */ z-index: 900; /* Уровень поверх других элементов */ display: flex; /* Flex-контейнер для выравнивания */ position: fixed; /* Фиксированное позиционирование */ background: #151515; /* Фон */ align-items: center; /* Центровка по вертикали */ justify-content: center; /* Центровка по горизонтали в Flex */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .main-menu /* СПИСОК МЕНЮ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ margin: 0; /* Убирает внешние отступы */ padding: 0; /* Убирает внутренние отступы */ display: flex; /* Flex-контейнер */ list-style: none; /* Убирает стандартные маркеры */ justify-content: center; /* Центровка по горизонтали */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .main-menu li a /* ССЫЛКИ МЕНЮ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #8e8e8e; /* Цвет текста */ height: 50px; /* Высота ссылки */ display: block; /* Блочное отображение */ padding: 0 15px; /* Внутренние отступы */ font-size: 15px; /* Размер шрифта */ transition: 0.5s; /* Плавные переходы */ line-height: 50px; /* Высота строки */ border-bottom: 1px solid #151515; /* Граница снизу */ text-decoration: none; /* Убрать подчеркивание */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .main-menu li a:hover,.main-menu .selected /* СОСТОЯНИЯ ССЫЛОК МЕНЮ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ border-bottom: 1px solid #b21a27; /* Активная граница */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .about_us /* ПУНКТЫ МЕНЮ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ margin: 0 15px; /* Внешние отступы */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #video-container /* КОНТЕЙНЕР ВИДЕО-ФОНОМ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ width: 100%; /* Ширина на весь экран */ height: auto; /* Автоматическая высота */ position: relative; /* Относительное позиционирование */ transition: all 0.5s ease; /* Плавные переходы */ margin-top: 51px; /* Отступ от меню навигации */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #html5video /* ВИДЕО-ФОН */ {/*----------------------------------------------------------------------/*-----------------------------------*/ width: 100%; /* Ширина на весь контейнер */ display: block; /* Убирает отступы видео */ object-fit: cover; /* Заполнение без искажений */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #logo /* КОНТЕЙНЕР ЛОГОТИПА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ top: 30%; /* Отступ сверху */ left: 50%; /* По центру по горизонтали */ z-index: 700; /* Поверх других элементов */ position: absolute; /* Абсолютное позиционирование */ transform: translateX(-50%); /* Центрирование по горизонтали */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #count /* КОНТЕЙНЕР ТАЙМЕРА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ top: 17%; /* Отступ сверху */ left: 19%; /* Отступ слева */ z-index: 500; /* Поверх других элементов */ position: absolute; /* Абсолютное позиционирование */ text-align: left; /* Выравнивание слева */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #count h5 /* ЗАГОЛОВОК НАД ТАЙМЕРОМ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #575757; /* Цвет текста */ display: block; /* Блочное отображение */ text-align: center; /* Выравнивание текста по центру */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #counter span /* ЭЛЕМЕНТЫ ТАЙМЕРА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #575757; /* Цвет содержимого колец */ width: 50px; /* Ширина колец */ height: 50px; /* Высота колец */ cursor: default; /* Курсор */ border: 1px solid #575757; /* Цвет обводки колец */ display: inline-flex; /* Flex для центровки */ background: transparent; /* Прозрачный фон */ font-weight: 900; /* Увеличение */ align-items: center; /* Центровка по вертикали */ border-radius: 50%; /* Скругленные углы */ justify-content: center; /* Центровка по горизонтали */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #counter /* ЭЛЕМЕНТЫ ТАЙМЕРА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #575757; /* Цвет двоеточий */ cursor: default; /* Курсор */ font-weight: 900; /* Увеличение */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #socials /* КОНТЕЙНЕР СОЦ.-КНОПОК */ {/*----------------------------------------------------------------------/*-----------------------------------*/ top: 35%; /* Отступ сверху */ right: 19%; /* Отступ справа */ z-index: 500; /* Поверх других элементов */ position: absolute; /* Абсолютное позиционирование */ text-align: left; /* Выравнивание слева */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #socials .soc /* ССЫЛКИ ДЛЯ СОЦ.-КНОПОК */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #575757; /* Цвет содержимого колец */ width: 50px; /* Ширина колец */ height: 50px; /* Высота колец */ border: 1px solid #575757; /* Цвет обводки колец */ display: inline-flex; /* Flex для центровки */ font-size: 30px; /* Размер иконки */ transition: 0.5s; /* Плавность анимации */ background: transparent; /* Прозрачный фон */ margin-left: 7px; /* Отступ слева */ align-items: center; /* Центровка по вертикали */ border-radius: 50%; /* Скругленные углы */ text-decoration: none; /* Убрать подчёркивание */ justify-content: center; /* Центровка по горизонтали */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #socials .soc:hover /* АИМАЦИЯ ДЛЯ СОЦ.-КНОПОК */ {/*----------------------------------------------------------------------/*-----------------------------------*/ transform: rotate(360deg); /* Вращение */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #info-block /* КОНТЕЙНЕР ИНФО-БЛОКА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ left: 0; /* Фиксация л./край блока */ right: 0; /* Фиксация п./край блока */ bottom: 0; /* Фиксация н./край блока */ height: 127px; /* Фиксированная высота */ z-index: 100; /* Поверх других элементов */ position: absolute; /* Абсолютное позиционирование */ background: rgba(27,27,27,0.7); /* Прозрачный фон блока */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #reg-form /* ФОРМА РЕГИСТРАЦИИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ gap: 10px; /* 15px между элементами */ width: 700px; /* Ширина формы */ height: 125px; /* Высота блока */ margin: 0 auto; /* Центрирование */ z-index: 100; /* Поверх других элементов */ display: flex; /* Flex-контейнер */ position: relative; /* Относительное позиционирование */ max-width: 1000px; /* Максимальная ширина */ align-items: center; /* Вертикальное выравнивание */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #vx-pie-1 /* КОНТЕЙНЕР ДИАГРАММЫ ОНЛАЙНА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ top: 19px; /* Отступ сверху */ left: 11px; /* Отступ слева */ width: 90px; /* Ширина */ height: 90px; /* Высота */ position: absolute; /* Абсолютное позиционирование */ box-shadow: 0 0 10px rgba(239, 69, 96, 0.5); /* Теневой эффект свечения */ border-radius: 50%; /* Форма теневого эффекта */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #vx-pie-1:hover #online-info /* ВСПЛЫВАЮЩАЯ ПОДСКАЗКА ДИАГРАММЫ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ visibility: visible; /* Показать при наведении */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .pie-value /* НАСТРОЙКА В ЦЕНТРЕ ДИАГРАММЫ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ inset: 21px 0 auto 0; /* Позиционирование */ cursor: pointer; /* Указатель при наведении */ position: absolute; /* Абсолютное позиционирование */ text-align: center; /* Выравнивание текста по центру */ line-height: 21px; /* Межстрочный интервал */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #online-info /* ПАРАМЕТРЫ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ left: 1px; /* Сдвиг влево */ width: 87px; /* Фиксированная ширина */ color: #fff; /* Белый цвет текста */ margin: -70px 0px 0px 0px; /* Сдвиг вверх */ padding: 10px 10px 10px 10px; /* Внутренние отступы */ position: absolute; /* Абсолютное позиционирование */ font-size: 13px; /* Размер шрифта */ visibility: hidden; /* Скрытый элемент */ background: rgba(0,0,0,0.8); /* Полупрозрачный черный фон */ white-space: nowrap; /* Запрет переноса строк */ border-radius: 5px; /* Скругленные углы */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #online-info span /* ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #b21a27; /* Красный цвет текста */ display: inline; /* Строчный элемент */ font-weight: 900; /* Увеличение */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .online-count /* СЧЕТЧИК ОНЛАЙНА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #b21a27; /* Красный цвет текста */ display: block; /* Блочный элемент */ margin: 2px 0; /* Внешние отступы */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #triagle /* ТРЕУГОЛЬНИК УКАЗАТЕЛЬ ПОДСКАЗКИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ left: 50%; /* По центру по горизонтали */ width: 0; /* Нулевая ширина */ height: 0; /* Нулевая высота */ bottom: -7px; /* Позиционирование снизу */ position: absolute; /* Абсолютное позиционирование */ border-top: 7px solid rgba(0,0,0,0.8); /* Верхняя граница - треугольник */ margin-left: -7px; /* Сдвиг для точной центровки */ border-left: 7px solid transparent; /* Прозрачная левая граница */ border-right: 7px solid transparent; /* Прозрачная правая граница */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .server-name, .server-rate /* НАЗВАНИЕ СЕРВЕРА И РЕЙТИНГ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #fff; /* Белый цвет текста */ display: block; /* Блочный элемент */ margin: 3px 0; /* Внешние отступы */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .form-row /* СТРОКА ФОРМЫ С ПОЛЯМИ ВВОДА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ gap: 15px; /* Расстояние между полями 15px */ display: flex; /* Flex-контейнер */ margin: 0 auto; /* Центрирование */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .form-row h3 /* ЗАГОЛОВОК ФОРМЫ РЕГИСТРАЦИИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ top: 15px; /* Отступ сверху */ left: 50%; /* По центру по горизонтали */ width: auto; /* Автоматическая ширина */ color: #9d9d9d; /* Цвет заголовка */ z-index: 1; /* Поверх других элементов */ display: block; /* Блочный элемент */ position: absolute; /* Абсолютное позиционирование */ transform: translateX(-50%); /* Центрирование по горизонтали */ text-align: center; /* Текст по центру */ text-transform: uppercase; /* Все буквы заглавные */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #reg-form input /* ПОЛЯ ВВОДА ФОРМЫ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ flex: 1; /* Равная ширина полей */ color: #fff; /* Цвет текста */ width: 135px; /* Ширина полей ввода */ height: 10px; /* Высота полей ввода */ border: 1px solid #ааа; /* Граница полей */ padding: 13px 15px; /* Внутренние отступы */ outline: none !important; /* Скрытие белой обводки */ font-size: 13px; /* Размер шрифта */ background: #151515; /* Фоновый цвет полей */ border-radius: 25px; /* Скругленные углы */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #reg-form button /* КНОПКА ОТПРАВКИ ФОРМЫ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #fff; /* Цвет текста */ width: 155px; /* Ширина кнопки */ height: 30px; /* Высота кнопки */ margin: 0 auto; /* Центрирование */ border: none; /* Без границы */ cursor: pointer; /* Курсор указатель */ display: block; /* Блочный элемент */ padding: 5px 15px; /* Внутренние отступы */ font-size: 13px; /* Размер шрифта */ background: #3a3a3a; /* Фоновый цвет кнопки */ border-radius: 25px; /* Скругленные углы */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #reg-form button:hover /* Кнопка при наведении */ {/*----------------------------------------------------------------------/*-----------------------------------*/ background: #5a5a5a; /* Темный фон при наведении */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #reg-form button i /* Иконка в кнопке */ {/*----------------------------------------------------------------------/*-----------------------------------*/ font-size: 15px; /* Размер иконки */ margin: 0px 3px 0px 0px; /* Отступ справа от иконки */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .captcha-input /* БЛОК КАПЧИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ top: 87px; /* Отступ сверху */ width: 100%; /* Ширина строки */ z-index: 1; /* Поверх других элементов */ display: block; /* Блочный элемент */ position: absolute; /* Абсолютное позиционирование */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .captcha-refresh /* КНОПКА ОБНОВЛЕНИЯ КАПЧИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ align-items: center; /* Вертикальное выравнивание */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #captchaBox /* ВНУТРЕННЯЯ СТИЛИЗАЦИЯ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ padding-right: 35px; /* Отступ - цифры до разделителя */ border-right: 1px solid #1a1a1a; /* Цвет разделителя */ margin-right: 15px; /* Отступ - разделитель до стрелок */ color: #1a1a1a; /* Цвет цифр */ font-weight: 900; /* Увеличение */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .captcha-refresh .fa-refresh /* СТИЛЬ ИКОНКИ КАПЧИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #1a1a1a; /* Цвет стрелок */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .reg-btn /* КНОПКА РЕГИСТРАЦИИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ top: 19px; /* Отступ сверху */ right: 11px; /* Отступ справа */ width: 90px; /* Строгая ширина как у счетчика */ color: #fff; /* Цвет текста */ height: 90px; /* Строгая высота как у счетчика */ cursor: pointer; /* Курсор указатель */ border: 3px solid #eee; /* Белое кольцо снаружи */ display: flex; /* Flex для центрирования */ outline: none !important; /* Убираем обводку */ position: absolute; /* Абсолютное позиционирование */ box-sizing: border-box; /* Чтобы border не увеличивал размер */ align-items: center; /* Вертикальное центрирование */ border-radius: 50%; /* Круглая форма */ flex-direction: column; /* Вертикальное направление */ text-decoration: none; /* Без подчеркивания */ justify-content: center; /* Горизонтальное центрирование */ box-shadow: 0 0 10px rgba(239, 69, 96, 0.5); /* Теневой эффект свечения */ border-radius: 50%; /* Форма теневого эффекта */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .reg-btn i /* СТИЛЬ ВНУТРИ КНОПКИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ font-size: 23px; /* Размер иконки */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .reg-text-btn /* ТЕКСТ КНОПКИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ font-size: 13px; /* Размер текста */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .reg-btn:hover i, .reg-btn:hover .reg-text-btn /* СОСТОЯНИЕ ПРИ НАВЕДЕНИИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #151515; /* Цвет иконки и текста */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #news-content /* НОВОСТНОЙ БЛОК */ {/*----------------------------------------------------------------------/*-----------------------------------*/ background: #151515; /* Фон блока */ padding: 13px 0; /* Внутренние отступы */ color: white; /* Цвет текста */ flex-grow: 1; /* Заполняет свободное место */ overflow: auto; /* Скролл при переполнении контентом */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .news-container /* КОНТЕЙНЕР НОВОСТЕЙ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ max-width: 1200px; /* Максимальная ширина */ margin: 0 auto; /* Центрирование */ display: grid; /* Grid-раскладка */ grid-template-columns: 2fr 1fr; /* Соотношение колонок 2:1 */ gap: 10px; /* Расстояние между колонками */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .news-list /* ОСНОВНАЯ КОЛОНКА НОВОСТЕЙ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ background: #1a1a1a; /* Фон блока */ padding: 35px; /* Внутренние отступы */ border: 1px solid #333; /* Граница */ border-radius: 5px; /* Скругление углов */ margin: 0; /* Сброс внешних отступов */ height: 371px; /* Высота колец */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .news-sidebar /* САЙДБАР */ {/*----------------------------------------------------------------------/*-----------------------------------*/ display: flex; /* Flex-контейнер */ flex-direction: column; /* Вертикальное направление */ gap: 10px; /* Расстояние между блоками */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .sidebar-block /* САЙДБАР: настройка */ {/*----------------------------------------------------------------------/*-----------------------------------*/ border: 1px solid #333; /* Рамка блока */ border-radius: 5px; /* Скругление углов рамки */ height: 159px; /* Высота блока */ padding: 15px; /* Отступ внутри блока */ background: #1a1a1a; /* Фон блока */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .sidebar-block h3 /* САЙДБАР: заголовок */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #9b9b9b; /* Цвет текста */ font-size: 18px; /* Размер шрифта */ padding-bottom: 8px; /* Текст ↑ отступ ↓ линия */ margin-bottom: 15px; /* Отступ между блоков */ border-bottom: 1px solid #333; /* Разделитель */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .sidebar-block ul /* САЙДБАР: пункты в списке */ {/*----------------------------------------------------------------------/*-----------------------------------*/ padding-left: 17px; /* Отступ списка */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .sidebar-block li /* ЭЛЕМЕНТЫ СПИСКА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #9b9b9b; /* Цвет текста */ margin-bottom: 8px; /* Отступ между элементами */ list-style-type: square; /* Маркеры списка */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .sidebar-copyright /* КОПИРАЙТ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ border: 1px solid #333; /* Рамка блока */ border-radius: 5px; /* Скругление углов рамки */ height: 33px; /* Высота блока */ background: #1a1a1a; /* Фон блока */ padding-top: 8px; /* Отступ сверху */ color: #9b9b9b; /* Цвет текста */ font-size: 13px; /* Размер шрифта */ text-align: center; /* Центрирование текста */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .spoiler /* БЛОК СПОЙЛЕРА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ left: 0; /* Прижато к левому краю */ right: 0; /* Прижато к правому краю */ bottom: 0; /* Прижато к низу */ z-index: 1000; /* Поверх всех элементов */ position: fixed; /* Фиксированное позиционирование */ background: #151515; /* Фоновый цвет блока */ border-top: 3px solid #b21a27; /* Красная граница сверху */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #rules /* ЧЕКБОКС ДЛЯ УПРАВЛЕНИЯ СПОЙЛЕРОМ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ display: none; /* Скрыть чекбокс */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .spoiler-inner /* ВНУТРЕННИЙ КОНТЕЙНЕР СПОЙЛЕРА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ margin: 0 auto; /* Центрирование по горизонтали */ position: relative; /* Относительное позиционирование */ max-width: 1200px; /* Максимальная ширина */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .spoiler-btn /* КНОПКА СПОЙЛЕРА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #5b5b5b; /* Серый цвет текста */ cursor: pointer; /* Курсор-указатель */ display: block; /* Блочное отображение */ padding: 15px 0; /* Внутренние отступы */ font-size: 13px; /* Размер шрифта */ transition: 0.3s; /* Плавные переходы */ text-align: center; /* Центрирование текста */ background: #151515; /* Фоновый цвет ссылки */ letter-spacing: 1px; /* Межбуквенное расстояние */ text-transform: uppercase; /* Заглавные буквы */ text-decoration: none; /* Убрать подчеркивание */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .spoiler-btn:hover /* СОСТОЯНИЕ ПРИ НАВЕДЕНИИ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #b21a27; /* Красный цвет при наведении */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .spoiler-body /* КОНТЕНТ СПОЙЛЕРА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ left: 0; /* Прижато к левому краю */ right: 0; /* Прижато к правому краю */ height: 700px; /* Высота страниц */ bottom: 100%; /* Расположение над ссылкой */ display: none; /* Скрыть контент по умолчанию */ padding: 30px 20px 80px 20px; /* Внутренние отступы */ position: absolute; /* Абсолютное позиционирование */ overflow-y: auto; /* Вертикальная прокрутка */ background: #1b1b1a; /* Фоновый цвет контента */ border-bottom: 3px solid #b21a27; /* Красная граница снизу */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #rules:checked ~ .spoiler-inner .spoiler-body /* ОТКРЫТОЕ СОСТОЯНИЕ СПОЙЛЕРА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ display: block; /* Показать контент */ }/*----------------------------------------------------------------------/*-----------------------------------*/ #rules:checked ~ .spoiler-inner .spoiler-btn /* АКТИВНАЯ КНОПКА СПОЙЛЕРА */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #b21a27; /* Красный цвет текста */ }/*----------------------------------------------------------------------/*-----------------------------------*/ .spoiler-body p /* ПУНКТЫ ПРАВИЛ */ {/*----------------------------------------------------------------------/*-----------------------------------*/ color: #9b9b9b; /* Светло-серый цвет текста */ margin: 0 0 15px 0; /* Отступ снизу между пунктами */ padding: 0 20px; /* Боковые отступы */ font-size: 14px; /* Размер шрифта */ line-height: 1.4; /* Высота строки */ }/*----------------------------------------------------------------------/*-----------------------------------*/