/* ========================================================================= */ /* === 00_GLOBAL.CSS - ГЛОБАЛЬНЫЕ СТИЛИ, ШРИФТЫ, ПЕРЕМЕННЫЕ === */ /* ========================================================================= */ /* Этот файл содержит самые базовые настройки для всего сайта: */ /* - Подключение шрифтов */ /* - CSS-переменные (цвета, отступы) */ /* - Глобальные стили для тега */ /* - Общие @keyframes анимации, используемые в разных местах */ /* ========================================================================= */ /* --- БЛОК 1: ШРИФТЫ И ГЛОБАЛЬНЫЕ НАСТРОЙКИ --- */ /* Директива для подключения кастомного шрифта */ @font-face { font-family: 'Bowler'; /* Назначаем имя 'Bowler' для этого шрифта */ src: url('https://neiroleptik.ru/fonts/Bowler.ttf') format('truetype'); /* Указываем путь к файлу шрифта и его формат */ } :root { --accent-color: #ff9900; --accent-glow: rgba(255, 153, 0, 0.4); --background-primary: #101010; --background-secondary: rgba(0, 0, 0, 0.3); --background-tertiary: rgba(0, 0, 0, 0.15); --border-color: rgba(255, 255, 255, 0.1); --text-primary: #e0e0e0; --text-secondary: #888; } /* Стили, применяемые ко всему документу (тег ) */ body { font-family: 'Manrope', sans-serif; /* Основной шрифт для всего текста, с запасным вариантом sans-serif */ background-color: transparent;/* Устанавливаем основной фон страницы из переменной */ color: var(--text-primary); /* Устанавливаем основной цвет текста из переменной */ overflow: hidden; /* Запрещает прокрутку всей страницы на десктопе, создавая интерфейс как у приложения */ } /* --- БЛОК 1.5: ГЛОБАЛЬНЫЕ АНИМАЦИИ И ФОН --- */ /* Стили для контейнера с анимированными частицами */ #login-page-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* z-index: 100; */ /* У вас уже есть эта строка, просто убедитесь, что она не закомментирована */ display: none; align-items: center; justify-content: center; } /* Определение анимации "появления с увеличением" */ @keyframes fade-in-scale-up { from { /* Начальное состояние анимации */ opacity: 0; /* Полностью прозрачный */ transform: scale(0.95); /* Немного уменьшен */ } to { /* Конечное состояние анимации */ opacity: 1; /* Полностью видимый */ transform: scale(1); /* Нормальный размер */ } } /* Определение анимации "пульсирующего свечения" */ @keyframes glow-pulse { 0%, 100% { /* В начале и в конце анимации */ text-shadow: 0 0 10px var(--accent-glow); /* Легкое свечение */ } 50% { /* В середине анимации */ text-shadow: 0 0 20px var(--accent-glow), 0 0 30px var(--accent-glow); /* Усиленное свечение */ } } /* Описываем анимацию появления для новостей и тегов */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Анимация для тегов */ @keyframes fadeInScale { to { opacity: 1; transform: scale(1); } } /* Анимация для простого вращения спиннера */ @keyframes rotate-simple { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }