/* css/base.css Базовые стили: сброс, контейнер, общие элементы (карточки, кнопки, формы, вкладки, админ-таблицы) Вынесено из style.css без изменения содержимого правил. */ * { margin: 0; padding: 0; box-sizing: border-box; } /* overflow-x: clip, не hidden — принципиально: hidden заставляет браузер считать overflow-y тоже не-visible (авто-сцепка осей в спеке CSS Overflow), а это ломает position:sticky у ЛЮБОГО потомка на всей странице (в т.ч. .header, см. css/header.css) — sticky-элемент перестаёт цепляться за вьюпорт и просто уезжает вместе с контентом при скролле. clip даёт то же обрезание по горизонтали (см. комментарий про карусель ниже), но не создаёт скролл-контейнер и не трогает вторую ось — sticky снова работает от реального вьюпорта. Реальный случай 2026-07-15: шапка сайта была объявлена sticky, но фактически скроллилась вместе со страницей. */ /* scrollbar-gutter: stable — место под вертикальную полосу резервируется всегда. Без него короткая страница (или короткая вкладка кабинета) убирает полосу, ширина вьюпорта скачком меняется на её толщину (замер: 15px), и вся страница прыгает по горизонтали при каждом переключении вкладки. */ html { overflow-x: clip; scrollbar-gutter: stable; } /* Тёмная тема полос прокрутки. Раньше не задавалась вообще: в модалке чекаута, в дропдауне поиска и в списке уведомлений браузер рисовал светлую системную полосу поверх скруглённого угла тёмной панели. Точечные scrollbar-width:none (css/quickbuy.css, css/redesign-profile.css) имеют более узкие селекторы и продолжают прятать полосу там, где так задумано. */ * { scrollbar-width: thin; scrollbar-color: var(--border-color-strong) transparent; } /* Skip-ссылка (index.html, первый элемент ): не видна, пока не получит фокус с клавиатуры, затем выезжает поверх шапки. Не .sr-only — тому нельзя вернуть видимость по :focus, у него clip-path режет содержимое. */ .skip-link { position: fixed; top: 8px; left: -9999px; z-index: 10000; padding: 10px 18px; border-radius: 10px; background: var(--rd-panel, #16171d); border: 1px solid var(--rd-gold, #d9b25f); color: var(--rd-text, #e6e7eb); font-weight: 700; text-decoration: none; } .skip-link:focus { left: 8px; } /* Скрыто визуально, но остаётся в дереве доступности — для подписей, которые не должны занимать место на экране (например текст кнопок шапки на узких ширинах, см. .btn-text в css/header.css). Именно этот набор свойств, а не display:none/visibility:hidden — те выкидывают элемент из дерева доступности вместе с его текстом, и кнопка остаётся безымянной. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } body { background: var(--bg-color); color: var(--text-color); font-family: var(--font-family, 'Inter', system-ui, sans-serif); min-height: 100vh; /* На macOS текст рендерится жирнее задуманного дизайном — сглаживание задаём один раз на корне, чтобы накрыть весь текст сразу. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* grid auto/1fr/auto прижимает футер к низу: три элемента в потоке (header, #appMain, footer) ложатся на три трека, 1fr на #appMain растягивает середину, футер уезжает вниз даже при коротком контенте. Модалки/оверлеи из потока выпадают (position:fixed) и треки не занимают. grid-template-columns: minmax(0,1fr) — ОБЯЗАТЕЛЬНО: без него неявная колонка по умолчанию `auto` и растягивается по max-content содержимого (карусель быстрой покупки), раздувая всю страницу шире вьюпорта на мобильных. minmax(0,1fr) держит колонку строго по ширине вьюпорта. */ display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); overflow-x: clip; } button, input, select, textarea { font-family: inherit; } /* width:100% здесь обязателен, а не косметика: margin:0 auto на grid-элементе (как и на flex-элементе) отключает stretch-выравнивание, и тогда браузер считает ширину по контенту (max-content, до max-width) вместо ширины трека. Карусель быстрой покупки достаточно "широкая" по контенту, чтобы раздуть контейнер шире вьюпорта на мобильных — отсюда был горизонтальный скролл и "разъезд" всех блоков. Явный width:100% фиксит ширину по вьюпорту, а max-width:1100 + margin:auto по-прежнему центрируют контейнер на десктопе. */ .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 20px; } /* ===== ОСТАЛЬНЫЕ СТИЛИ (общие) ===== */ .page { display: none; } .page.active { display: block; animation: pageEnter 0.28s ease; } @keyframes pageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .page.active { animation: none; } } /* ===== ФОНОВЫЕ ЧАСТИЦЫ ===== Декоративный слой позади всего контента: position:fixed + z-index:-1 рисуется поверх фона (он всегда в самом низу канвы), но под любым обычным (непозиционированным) контентом — так частицы видны только в промежутках между непрозрачными карточками/шапкой, не мешая кликам (pointer-events:none) и не требуя JS-анимации (только transform/opacity — дёшево для GPU, никакого requestAnimationFrame). Сами span-элементы создаёт js/shared/particles.js один раз при старте. */ .particles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .particles span { position: absolute; bottom: -10px; border-radius: 50%; background: var(--primary-color); opacity: 0; animation: particleFloat linear infinite; } @keyframes particleFloat { 0% { transform: translateY(0) scale(1); opacity: 0; } 10% { opacity: 0.5; } 90% { opacity: 0.25; } 100% { transform: translateY(-100vh) scale(0.8); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .particles { display: none; } } /* ===== ПОЯВЛЕНИЕ БЛОКОВ ГЛАВНОЙ ===== Общий keyframe для каскадного reveal карточек/виджетов на главной — .game-card использует его тут же, .quick-buy-frame — в css/quickbuy.css. fill-mode:backwards держит элемент в состоянии "from" до старта задержки (иначе на миг мелькнёт полностью видимым до начала анимации). */ @keyframes heroEnter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .game-card { transition: none; opacity: 1; transform: none; } } /* ===== ПОБУКВЕННЫЙ РЕВИЛ ЗАГОЛОВКА ===== js/shared/textReveal.js оборачивает каждую букву в и добавляет класс reveal-text на сам заголовок; анимация — только opacity/transform. */ .reveal-text span { display: inline-block; opacity: 0; transform: translateY(8px); animation: letterIn 0.35s ease forwards; } @keyframes letterIn { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .reveal-text span { animation: none; opacity: 1; transform: none; } } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; } @media (min-width: 1200px) { #homePage #gamesGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .game-card { /* Сброс браузерных стилей