:root { --bg: #10131a; --card: #191e29; --line: #2b3243; --ink: #f2f5fb; --dim: #98a2b8; --ok: #34d17c; --no: #ff6b5e; --accent: #ffb020; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; } .wrap { max-width: 640px; margin: 0 auto; padding: 20px 16px 48px; } h1 { font-size: 1.6rem; margin: 0 0 4px; } h2 { font-size: 1.1rem; margin: 24px 0 8px; color: var(--dim); font-weight: 600; } p { line-height: 1.5; } .dim { color: var(--dim); } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 12px 0; } label { display: block; margin: 14px 0 6px; font-weight: 600; } input, select, button { width: 100%; font: inherit; padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: #0d1017; color: var(--ink); } input:focus, select:focus { outline: 2px solid var(--accent); } button { background: var(--accent); color: #1a1200; font-weight: 700; border: none; margin-top: 20px; cursor: pointer; } button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } button.small { width: auto; padding: 8px 14px; margin: 4px 6px 0 0; font-size: .95rem; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; } .check input { width: 22px; height: 22px; flex: none; margin-top: 2px; } .check label { margin: 0; font-weight: 400; font-size: .95rem; color: var(--dim); } /* билет */ .qr { width: min(78vw, 320px); height: auto; display: block; margin: 0 auto; background: #fff; padding: 10px; border-radius: 12px; } .code { font-size: 2rem; letter-spacing: .12em; text-align: center; margin: 14px 0 0; font-variant-numeric: tabular-nums; } /* табло */ .board { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 3vh 4vw; } .board .name { font-size: clamp(2rem, 7vw, 5rem); font-weight: 700; } .board .score { font-size: clamp(6rem, 34vw, 26rem); font-weight: 800; line-height: .9; font-variant-numeric: tabular-nums; } .board .timer { font-size: clamp(2rem, 10vw, 7rem); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } .board .idle { font-size: clamp(1.4rem, 4vw, 3rem); color: var(--dim); } .flash { animation: flash .6s ease-out; } @keyframes flash { from { background: #34d17c33; } to { background: transparent; } } /* панель судьи */ table { width: 100%; border-collapse: collapse; font-size: .95rem; } th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); } th { color: var(--dim); font-weight: 600; } .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .85rem; } .pill.ok { background: #34d17c22; color: var(--ok); } .pill.no { background: #ff6b5e22; color: var(--no); } /* ====================================================================== ОБОЛОЧКА И ДИЗАЙН-СИСТЕМА Всё, что ниже, — достройка. Переменные и классы выше (.card, .pill, .board, .qr, .flash) страницы уже используют, они не тронуты. Порядок mobile-first: сначала правила для телефона, широкий экран — в media-query в конце файла, потому что с телефона смотрит больше половины зала. ====================================================================== */ /* Второй блок переменных, а не правка первого: базовая палитра принята и работает, а это добавки для новых элементов. Так видно, что чем. */ :root { --bg-top: #141926; /* шапка и подвал: на тон светлее фона, чтобы отделялись без линейки */ --hover: #222a3a; /* наведение и чётные строки таблицы */ --gold: #f2c14e; /* первые три места. Медальные цвета вместо иконок — */ --silver:#c9d1e0; /* иконочный шрифт пришлось бы тянуть из сети, а её нет */ --bronze:#c98a5a; } /* Ссылки по умолчанию: подчёркивание убрано, но цвет остаётся читаемым. Подчёркивание возвращаем при наведении — на плотных таблицах сплошные подчёркивания превращают страницу в кашу (урок HLTV). */ a { color: var(--ink); text-decoration: none; } a:hover { text-decoration: underline; } /* Видимый фокус нужен всем интерактивным элементам: судья на площадке работает с планшета, но администратор — с клавиатуры. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Текст только для скринридера. display:none не годится — тогда его не прочитают вслух. */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---- каркас страницы -------------------------------------------------- Колонка на всю высоту экрана: подвал прижат вниз, даже когда содержимого мало. Пустых страниц в день запуска будет много. */ .site { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .site-main { flex: 1 0 auto; } /* ---- шапка ------------------------------------------------------------ Не sticky: на телефоне закреплённая шапка съедает пятую часть экрана у таблицы рейтинга, а переходят по меню редко — раз за визит. */ .site-head { background: var(--bg-top); border-bottom: 1px solid var(--line); } .head-in { max-width: 1040px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .brand { font-weight: 800; font-size: 1.05rem; letter-spacing: .01em; margin-right: auto; } .brand:hover { text-decoration: none; } .brand .b-dim { color: var(--dim); font-weight: 600; } /* ---- бутерброд без JS ------------------------------------------------- Чекбокс уведён за край экрана, но остаётся в потоке фокуса: с клавиатуры меню открывается пробелом. display:none убил бы и фокус, и озвучку. */ .nav-toggle { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; pointer-events: none; } .nav-btn { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 38px; padding: 0 9px; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; background: var(--card); } .nav-btn i { display: block; height: 2px; background: var(--ink); border-radius: 2px; } .nav-toggle:focus-visible + .nav-btn { outline: 2px solid var(--accent); outline-offset: 2px; } /* Само меню: на телефоне занимает всю ширину под шапкой и раскрывается только при отмеченном чекбоксе. Никакой высотной анимации — раскрытие должно быть мгновенным, единственная анимация в проекте это .flash. */ .nav { display: none; width: 100%; flex-direction: column; gap: 2px; padding: 6px 0 10px; } .nav-toggle:checked ~ .nav { display: flex; } .nav a { padding: 11px 12px; border-radius: 10px; color: var(--dim); font-weight: 600; } .nav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; } /* Текущий раздел отмечается aria-current, а не классом: разметка тогда сама объясняет, где мы находимся, и скринридеру, и стилям. */ .nav a[aria-current="page"] { color: var(--ink); background: var(--hover); } .nav a.cta { color: #1a1200; background: var(--accent); } /* ---- переключатель языка --------------------------------------------- Три коротких кода в ряд, а не выпадающий список: выпадающий требует либо JS, либо select с обработчиком. Ссылки работают всегда. */ .lang { display: flex; gap: 4px; } .lang a { padding: 6px 9px; border-radius: 8px; font-size: .82rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; } .lang a:hover { background: var(--hover); text-decoration: none; } .lang a.on { background: var(--hover); color: var(--accent); } /* ---- подвал ----------------------------------------------------------- */ .site-foot { background: var(--bg-top); border-top: 1px solid var(--line); color: var(--dim); font-size: .85rem; } .foot-in { max-width: 1040px; margin: 0 auto; padding: 18px 16px 26px; } .foot-in a { color: var(--dim); } .foot-in p { margin: 4px 0; line-height: 1.45; } /* Ссылка «к содержимому» для клавиатуры: видна только когда в фокусе. */ .skip { position: absolute; left: -9999px; } .skip:focus { left: 8px; top: 8px; z-index: 9; background: var(--accent); color: #1a1200; padding: 10px 14px; border-radius: 10px; } /* ---- ширина полосы ---------------------------------------------------- .wrap остаётся узким (640) — он рассчитан на форму регистрации и билет с телефона. Спискам и таблицам нужно больше, отсюда модификатор. */ .wrap.wide { max-width: 1040px; } /* Заголовок раздела со ссылкой справа: «Рекорды дня … все». */ .section-head { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 8px; } .section-head h2 { margin: 0; flex: 1; } .section-head a { color: var(--accent); font-size: .9rem; } /* ====================================================================== .person-card — карточка участника Ключевой повторяемый элемент: из него собраны рейтинг, страница матча и профиль. Один вид во всех трёх местах, поэтому место и очки — слоты, которые можно не заполнять (в профиле места нет, в матче нет очков). Вместо фото — инициалы: фотографий участников у нас нет и не будет, на кадрах лицо всегда закрыто (docs/PERSDANNYE.md). ====================================================================== */ .person-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; } a.person-card { color: inherit; } a.person-card:hover { background: var(--hover); text-decoration: none; } .person-card .rank { min-width: 2ch; text-align: right; font-size: 1.05rem; font-weight: 800; color: var(--dim); font-variant-numeric: tabular-nums; } .person-card .rank.r1 { color: var(--gold); } .person-card .rank.r2 { color: var(--silver); } .person-card .rank.r3 { color: var(--bronze); } .person-card .ava { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--hover); color: var(--dim); font-weight: 800; font-size: .95rem; letter-spacing: .02em; } /* min-width:0 обязателен: без него длинное имя распирает флекс-строку и очки уезжают за край телефона. */ .person-card .who { flex: 1; min-width: 0; } .person-card .pname { display: block; font-weight: 700; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* display:block обязателен: строки под именем набирают спанами, а спаны встали бы в одну строку и слиплись — категория с локацией. */ .person-card .meta { display: block; color: var(--dim); font-size: .82rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person-card .meta .sep { opacity: .5; padding: 0 4px; } .person-card .pts { flex: none; text-align: right; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .person-card .pts .unit { display: block; font-size: .68rem; font-weight: 600; color: var(--dim); letter-spacing: .04em; } /* Свой результат в общем списке подсвечен слева: человек ищет себя и должен найти, не вчитываясь. */ .person-card.me { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } /* ====================================================================== .table-lb — плотная таблица рейтинга Там, где карточек слишком много (сотня строк на дисциплину), карточка становится длинной простынёй. Таблица показывает вдвое больше строк на экран — за это HLTV и держат таблицами. ====================================================================== */ /* Обёртка: таблица на телефоне не сжимается до нечитаемости, а уезжает вбок. -webkit-overflow-scrolling для инерции на iOS. */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-lb { font-size: .9rem; min-width: 420px; } .table-lb th, .table-lb td { padding: 7px 8px; white-space: nowrap; } .table-lb thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); } /* Зебра еле заметная: она нужна, чтобы глаз не съезжал на соседнюю строку, а не чтобы её было видно. */ .table-lb tbody tr:nth-child(even) { background: #ffffff06; } .table-lb tbody tr:hover { background: var(--hover); } .table-lb tbody tr.me td { background: #ffb02016; } /* Все числа моноширинные и вправо: столбец очков читается как столбик, а не как рваный текст. Это главное правило таблицы. */ .table-lb .num, .table-lb td.num, .table-lb th.num { text-align: right; font-variant-numeric: tabular-nums; } .table-lb .num.big { font-weight: 800; font-size: 1rem; } .table-lb .pos { width: 3ch; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; } .table-lb .pos.r1 { color: var(--gold); font-weight: 800; } .table-lb .pos.r2 { color: var(--silver); font-weight: 800; } .table-lb .pos.r3 { color: var(--bronze); font-weight: 800; } /* Имя — единственная колонка, которой можно занимать остаток ширины. */ .table-lb .who { white-space: normal; width: 99%; } /* ====================================================================== .stat — плитка «число и подпись» Личный рекорд, всего заездов, место. Число крупное, подпись мелкая: с расстояния читается число, подпись дочитывают уже вблизи. ====================================================================== */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 12px 0; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; } .stat b { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat span { display: block; margin-top: 2px; color: var(--dim); font-size: .78rem; letter-spacing: .02em; } .stat.hi b { color: var(--accent); } /* рекорд и прочее, чем стоит гордиться */ /* ====================================================================== .badge — постоянная метка Отличие от .pill: пилюля показывает СОСТОЯНИЕ прямо сейчас (кольцо на связи / молчит), бейдж — свойство записи, которое никуда не денется (рекорд площадки, серия, заезд был офлайн). Поэтому бейдж не заливной, а обведённый, прописными и мельче — он не должен спорить с именем. ====================================================================== */ .badge { display: inline-block; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--dim); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; white-space: nowrap; } .badge + .badge { margin-left: 4px; } .badge.rec { border-color: #f2c14e66; color: var(--gold); } /* рекорд площадки */ .badge.streak { border-color: #34d17c66; color: var(--ok); } /* серия попаданий */ /* Офлайн-заезд помечается всегда: результат, приехавший с задержкой, должен быть отличим от засчитанного при судье — тихих поправок нет. */ .badge.offline { border-color: #98a2b866; color: var(--dim); } .badge.live { border-color: #ff6b5e66; color: var(--no); } /* идёт прямо сейчас */ /* ====================================================================== .empty — «здесь пока пусто» В день запуска пустых страниц будет больше, чем полных. Пунктирная рамка говорит «место есть, содержимое будет», сплошная карточка без содержимого читалась бы как поломка. ====================================================================== */ .empty { border: 1px dashed var(--line); border-radius: 12px; padding: 26px 18px; margin: 12px 0; text-align: center; color: var(--dim); } .empty b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; } .empty p { margin: 0; font-size: .9rem; line-height: 1.45; } .empty a { color: var(--accent); } /* ====================================================================== .frames — лента кадров с кольца Кадры приходят по одному и их бывает много. Ряд с прокруткой вбок и привязкой к кадру: пролистывается пальцем и не ломает высоту страницы, как ломала бы сетка. Лицо на кадре всегда закрыто на стороне кольца — сюда приходит уже обработанная картинка, CSS ничего не прячет и прятать не должен. ====================================================================== */ .frames { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 4px 0 10px; margin: 8px 0; } .frames .frame { flex: none; width: 132px; scroll-snap-align: start; } .frames .frame img, .frames .frame .ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); /* Фон-заглушка на время загрузки: кадры идут по местной сети, но сеть на площадке моргает — дыра в ленте выглядела бы как сбой. */ background: var(--hover); } .frames .frame .ph { display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: .75rem; } .frames .frame .t { margin-top: 4px; color: var(--dim); font-size: .72rem; font-variant-numeric: tabular-nums; text-align: center; } .frames .frame.hit img { border-color: var(--ok); } /* кадр с попаданием */ /* ---- мелочи, нужные на нескольких страницах --------------------------- */ .nums { font-variant-numeric: tabular-nums; } .right { text-align: right; } .muted-box { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; } /* ====================================================================== ГЛАВНАЯ СТРАНИЦА И КНОПКИ Второй слой достройки. Всё выше — служебные экраны: рейтинг, билет, табло. Ниже — то, что видит родитель, который пришёл на сайт первый раз и ещё ничего про нас не знает. Тон другой: крупнее, спокойнее, меньше цифр. Но палитра, скругления и отступы те же — это одна площадка, а не две. ====================================================================== */ /* ====================================================================== .nav-sub — ряд категорий под заголовком раздела Разметка (`