/* LiveBall — единый файл стилей. СБОРКА из css/partials/ через build.sh или build.js. Не редактировать напрямую. */
/* ===== partials/00-core.css ===== */
/* ============================================================
LiveBall — единый файл стилей
Структура:
0. Шрифты (@font-face, файлы в ../fonts)
1. Токены (цвета, шрифты, радиусы)
2. База (reset, типографика)
3. Утилиты (u-*)
4. Общие компоненты (lb-*): шапка, навигация, футер,
кнопки, пилюли, карточки, строки матчей, таблицы,
звёзды избранного, дропдауны, модалки, слайдеры
5. Мобильные общие компоненты (m-*): каркас, топбар, дровер
6. Страничные секции (по одной на страницу, префиксы:
home-, lg-, team-, mt-, fav-, news-, hk-, hkm-, bb-,
bbm-, ufc-, ufcs-, f1-, doc-, hub-, mob-)
============================================================ */
/* ---------- 0. Шрифты ---------- */
/* Unbounded (заголовки) и Golos Text (текст) лежат у нас, а не на Google Fonts.
До 11.09.2026 их подключал , а не : у базовой .lb-btn рамка прозрачная, и ссылка
без этого модификатора превращалась в зелёный текст. */
.lb-btn--ghost {
padding: 7px 14px;
border-color: var(--line-strong);
background: rgba(255, 255, 255, 0.05);
color: var(--ink);
font-size: 12.5px;
}
.lb-btn--ghost:hover { border-color: var(--hover-green-line); color: var(--green-soft); }
/* ---------- Аккаунт в шапке ----------
Хендофф design_handoff_header_account (22.09.2026). Одна кнопка #login_btn
на два состояния, переключает их класс is-authed на (на сайте —
auth.js плюс ранний хинт из localStorage перед разметкой шапки, в макете —
демо-вход в components.js): гостю — нейтральная пилюля «Войти» (зелёной
больше нет: две зелёные кнопки рядом с Telegram спорили друг с другом),
вошедшему — пилюля аккаунта: аватар-инициал, имя и маленькая шестерёнка
как подсказка, что настройки теперь здесь. Отдельная шестерёнка у
вошедшего прячется. Высота 43px — как у .lb-iconbtn рядом. */
.lb-header__login {
height: 43px;
padding-block: 0; padding-inline: 17px 20px;
background: var(--panel);
border-color: var(--line-ctl);
color: var(--ink);
}
.lb-header__login:hover { border-color: var(--hover-green-line); color: var(--green-pale); }
.lb-account__guest, .lb-account__user { display: inline-flex; align-items: center; gap: 8px; }
.lb-account__user { display: none; gap: 9px; font-size: 13.5px; }
/* Шестерёнка в пилюле мельче и приглушённее отдельной кнопки: это подсказка,
а не действие само по себе. Дочерний селектор — иконка аватара лежит глубже. */
.lb-account__user > svg { width: 15px; height: 15px; color: var(--muted); }
.lb-account__user > svg * { stroke-width: 1.7; }
html.is-authed .lb-header__login { padding-block: 0; padding-inline: 5px 13px; }
html.is-authed .lb-header__login:hover { color: var(--ink); } /* зеленеет только рамка, имя не перекрашиваем */
html.is-authed .lb-account__guest { display: none; }
html.is-authed .lb-account__user { display: inline-flex; }
html.is-authed .lb-header__settings { display: none; }
.lb-account__name { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Аватар — инициал на зелёном градиенте, фото сервер не отдаёт. Три размера:
31px в пилюле шапки, 38px в дровере (--md), 44px в настройках (--lg).
is-empty — инициала нет (гость в дровере или аккаунт без имени): пунктирный
круг с иконкой юзера из разметки. Иконка лежит в разметке всегда и
показывается только в этом состоянии. */
.lb-account__avatar {
flex: none;
width: 31px;
height: 31px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--green), #2F9412);
color: var(--on-green);
font-size: 13px;
font-weight: 800;
line-height: 1;
}
.lb-account__avatar--md { width: 38px; height: 38px; font-size: 15px; }
.lb-account__avatar--lg { width: 44px; height: 44px; font-size: 18px; }
.lb-account__avatar svg { display: none; }
.lb-account__avatar.is-empty { background: var(--panel); border: 1px dashed rgba(255, 255, 255, 0.22); color: var(--muted); }
.lb-account__avatar.is-empty svg { display: block; }
.lb-account__avatar--md svg { width: 17px; height: 17px; }
/* Навигация видов спорта + пилюли-табы */
/* Разделитель у подшапки НЕ рисуем: фон у неё тот же, что у страницы (--bg),
поэтому полоса читалась как второй разделитель сразу под линией шапки и
отрезала ряд видов спорта от контента. Граница остаётся только у .lb-header. */
.lb-nav { background: var(--bg); }
/* Избранное в подшапке (переехало из шапки): на десктопе прижато к правому
краю ряда. В РАЗМЕТКЕ пилюля при этом первая, и это не рассинхрон: на
мобилке ряд видов спорта скроллится горизонтально, и прижатое вправо
избранное пришлось бы докручивать — там прижим снимается (99-responsive,
блок 940px), а порядок разметки как раз даёт нужное «первой в ленте».
Бейдж-счётчик в потоке строки — базовый .lb-badge абсолютный и «липнет»
к звезде. Отрицательный margin-block — потому что бейдж (17px) выше строки
пилюли (16px: иконка и текст): появляясь при первом live-матче в избранном,
он растил пилюлю, а с ней и всю подшапку на 1px — страница под ней
вздрагивала. */
.lb-nav__fav { order: 1; margin-inline-start: auto; }
.lb-nav__fav .lb-badge { position: static; top: auto; inset-inline-end: auto; margin-block: -1px; }
.lb-nav__inner {
width: 1140px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
}
.lb-pill {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--panel);
border: 1px solid var(--line-ctl);
color: var(--ink-soft);
font-size: 13px;
font-weight: 600;
border-radius: var(--r-pill);
padding: 8px 16px;
cursor: pointer;
white-space: nowrap;
}
.lb-pill:hover { border-color: var(--hover-green-line); color: var(--green-pale); }
.lb-pill.is-active {
background: var(--green);
border-color: var(--green);
color: var(--on-green);
font-weight: 700;
}
.lb-pill.is-active:hover { color: var(--on-green); }
/* Крупные пилюли (табы разделов) */
.lb-pill--lg { padding: 9px 18px; border-color: rgba(255, 255, 255, 0.1); }
.lb-pill--lg.is-active { border-color: var(--green); font-weight: 800; }
/* Мелкие пилюли (фильтры списков) */
.lb-pill--sm { padding: 8px 16px; font-size: 12.5px; border-color: rgba(255, 255, 255, 0.1); }
.lb-pill--sm.is-active { font-weight: 800; }
/* Ряд табов */
.lb-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Панели табов */
.lb-panel { display: none; }
.lb-panel.is-active { display: block; }
/* ---------- Поле-фильтр списка (lb-find) ----------
Маленький поиск, который сужает УЖЕ ОТРИСОВАННЫЙ список на месте: страны в
сайдбаре, лента матчей на главной. Класс свой, а не .lb-search из шапки:
тот спрашивает сервер и раскрывает выдачу, этот только прячет строки — общей
у них остаётся форма, а не поведение.
Фон и внешние отступы задаёт страница (home-*): в карточке поле должно быть
темнее её, на голом фоне — светлее. */
.lb-find {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--line-ctl);
border-radius: var(--r-pill);
color: var(--dim);
}
.lb-find:focus-within { border-color: var(--hover-green-line); color: var(--green-soft); }
.lb-find > svg { flex: none; }
.lb-find input {
flex: 1;
min-width: 0;
padding: 0;
background: transparent;
border: 0;
outline: none;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--ink);
caret-color: var(--green);
}
.lb-find input::placeholder { color: var(--dim); font-weight: 500; }
/* Крестик — тот же, что в мобильном поиске (.m-search__clear), только мельче.
Своё display:none у [hidden] обязательно: UA-правило перебивается авторским
display (см. комментарий про [hidden] в начале файла). */
.lb-find__clear {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--dim);
color: var(--bg);
cursor: pointer;
}
.lb-find__clear:hover { background: var(--muted); }
.lb-find__clear[hidden] { display: none; }
/* Карточки */
.lb-card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--r-card);
}
.lb-card--lg { border-radius: var(--r-lg); }
.lb-card--xl { border-radius: var(--r-xl); }
.lb-card--pad { padding: 20px; }
.lb-card--clip { overflow: hidden; }
.lb-score {
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Вспышка изменившегося счёта — поллинг живых матчей (public/js/v2/live.js
вешает класс на один прогон анимации). Цвет, а не движение: строка живёт в
плотном списке, где подпрыгивающая ячейка дёргает соседние.
Скрытый настройкой счёт не подсвечивается вовсе — это делает скрипт, а не
CSS: сама вспышка сообщала бы, что кто-то забил. */
/* На 100% цвет НЕ задан намеренно: так он доезжает до собственного цвета
элемента, каким бы тот ни был в этой теме и в этом блоке. */
@keyframes lbScoreBump {
0% { color: var(--red-live); transform: scale(1.2); }
25% { color: var(--red-live); transform: scale(1); }
55% { color: var(--red-live); }
100% { transform: scale(1); }
}
.lb-score--bump { animation: lbScoreBump 1.1s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
.lb-score--bump { animation-name: none; }
}
/* Точка live */
.lb-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--red-live);
animation: lbPulse 1.2s ease infinite;
flex: none;
}
/* Единственная бесконечная анимация сайта — её и просят гасить в первую
очередь. Точка остаётся, перестаёт только мигать: статус «идёт сейчас»
несёт цвет, а не движение. */
@media (prefers-reduced-motion: reduce) {
.lb-live-dot { animation: none; }
}
/* Горизонтальная строка матча (списки в группах лиг: звезда | время | дом | счёт | гости | ›) */
.lb-fixture {
display: grid;
/* Колонки счёта и времени — переменными: у баскетбола счёт трёхзначный с
обеих сторон («112 : 108»), и в 64px он не помещается (.bb-groups).
Время шире базовых 76px нужно там, где live-статус — не минута, а слово:
«1-й период» (77px вместе с точкой) и «1-я четверть» (88px) в 76px не
влезают и переносятся на вторую строку, задирая высоту строки. nowrap
здесь не вариант — перенос нужен «Матч перенесен» (см. ниже). */
grid-template-columns: 18px var(--fx-timew, 76px) 1fr var(--fx-scorew, 64px) 1fr 16px;
align-items: center;
gap: 10px;
padding: 11px 18px;
border-top: 1px solid var(--line-soft);
color: var(--ink);
}
.lb-fixture:hover { background: rgba(255, 255, 255, 0.02); }
/* Без nowrap: длинное время («19:00 · 19.07») переносится на 2 строки, как в макете */
.lb-fixture__time { font-size: 12px; font-weight: 600; color: var(--dim); }
.lb-fixture__time.is-live { color: var(--red-live-text); font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
/* Дата рядом со временем («22:00 · 19.07») — вторичная: нужна там, где соседние
строки списка из разных дней (избранное), и не должна спорить со временем.
Разделитель — псевдоэлементом, а не текстом в разметке: на мобилке ячейка
времени становится флексом, и голый текстовый узел « · » между временем и
датой схлопывает свои пробелы («22:00 ·19.07»). */
.lb-fixture__date { color: var(--dim); font-weight: 700; }
.lb-fixture__date::before { content: '·'; margin: 0 4px; }
.lb-fixture__home,
.lb-fixture__away {
display: flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
}
.lb-fixture__home { justify-content: flex-end; text-align: end; }
.lb-fixture__home span,
.lb-fixture__away span { overflow: hidden; text-overflow: ellipsis; }
.lb-fixture__home img,
.lb-fixture__away img { width: 22px; height: 22px; flex: none; object-fit: contain; }
.lb-fixture__home.is-winner,
.lb-fixture__away.is-winner { color: var(--green-soft); font-weight: 700; }
.lb-fixture__score {
text-align: center;
font-size: 13.5px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.lb-fixture__arrow { color: var(--dim); font-size: 14px; }
/* Цвет счёта по статусу матча (как в макете): live — красный, будущий «– : –» — приглушённый */
.lb-fixture[data-st="live"] .lb-fixture__score { color: var(--red-live-text); }
.lb-fixture[data-st="up"] .lb-fixture__score { color: var(--dim); }
/* Строка кастомного события админки (internal/siteevents): церемония,
жеребьёвка или матч, которого нет во внешнем API. Та же .lb-fixture со
звездой и стрелкой — событие стоит в карточке своей лиги вровень с матчами
дня, — отличий два:
1. у одиночного события нет команд — заголовок занимает всю середину строки;
2. счёт не подсвечивается красным во время эфира: у события его не бывает
вовсе, в колонке заглушка, и красная «– : –» читалась бы как сбой. */
/* [data-st] в селекторе — не украшение, а специфичность: правила цвета счёта
по статусу ниже весят (0,3,0) — .lb-fixture[data-st="live"] .lb-fixture__score,
— и без атрибута здесь (0,2,0) заглушка «– : –» у идущего события красилась
бы красным, как настоящий live-счёт. */
.lb-fixture--ev[data-st] .lb-fixture__score { color: var(--dim); }
/* Карточка событий без шапки (секция «События» на /ufc и /formula1, блок
команд на странице события): у первой строки .lb-fixture остаётся
border-top, а отделять её не от чего — по верху карточки шла лишняя линия. */
.home-group--flat .home-group__rows > .lb-fixture:first-child { border-top: 0; }
/* Карточка событий со своей шапкой: распорку до шеврона обычно даёт счётчик
«N матчей» или звезда лиги, а здесь нет ни того, ни другого — счётчик
app.js не рисует (событие не матч), звезды у снимка события быть не может. */
.home-group--ev .home-group__chev { margin-inline-start: auto; }
/* Лента одним списком по времени (кнопка «По времени», app.js): карточки лиг
гаснут, строки съезжаются в одну карточку без шапки — и лигу каждой строке
приходится нести самой. Марку (логотип + название) вставляет скрипт третьей
колонкой, сразу за временем; на сервере её в строке нет и быть не должно —
строки кешируются построчно, а название лиги и так стоит в шапке карточки. */
.home-group--time .lb-fixture {
grid-template-columns: 18px var(--fx-timew, 76px) 148px 1fr var(--fx-scorew, 64px) 1fr 16px;
}
/* Заголовок одиночного события занимает середину строки: с новой колонкой
середина сдвинулась на одну вправо. */
.home-group--time .lb-fixture__single { grid-column: 4 / 7; }
.lb-fixture__lg {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
font-size: 11.5px;
font-weight: 600;
color: var(--muted);
}
.lb-fixture__lg img { width: 16px; height: 16px; flex: none; object-fit: contain; }
.lb-fixture__lg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Заголовок одиночного события — по центру строки, там же, где у матча стоит
счёт: ячейка тянется на все три средние колонки, и прижатый влево текст
читался бы продолжением ячейки времени («21:00 Мультикаст»), а не
названием. На телефоне (99-responsive) выравнивание левое, как у команд:
там ячейка стоит в колонке команд, а те выровнены по левому краю. */
.lb-fixture__single {
grid-column: 3 / 6;
font-size: 13.5px;
font-weight: 600;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Звезда избранного */
.lb-star {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: rgba(255, 255, 255, 0.45);
flex: none;
}
.lb-star:hover { color: var(--green-soft); }
.lb-star svg { display: block; }
.lb-star svg path { fill: none; }
.lb-star.is-on { color: var(--green); }
.lb-star.is-on svg path { fill: currentColor; }
/* Флаги */
.lb-flag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; flex: none; }
/* Логотипы команд/лиг вне строк матчей */
.lb-logo-18 { width: 18px; height: 18px; object-fit: contain; flex: none; }
/* Выпадающее меню */
.lb-menu {
position: absolute;
z-index: 1100;
background: var(--panel-2);
border: 1px solid var(--line-strong);
border-radius: var(--r-menu);
padding: 8px;
display: none;
flex-direction: column;
gap: 2px;
box-shadow: var(--shadow-menu);
}
.lb-menu.is-open { display: flex; }
/* Поделиться: глиф-кнопка + поповер соцсетей (шапка хиро матча, шапка
новости; разметка — _share.html на сайте, статичная копия в макете).
Меню всегда fixed: хиро режет absolute своим overflow: hidden
(скругления), а позиционирует его под кнопкой и ведёт при прокрутке
app.js — та же ветка fixed-меню data-menu-open, что у календаря
избранного; top/right ниже — фолбэк до первого открытия. Ссылки сетей
заполняет app.js из location.href при открытии: сервер в виджет ничего
не пишет, поэтому он безопасен внутри кешируемых партиалов. На
тач-устройствах вместо поповера — системная шторка navigator.share. */
.lb-share { position: relative; display: inline-flex; flex: none; }
.lb-share__btn { display: inline-flex; color: var(--muted); }
.lb-share__btn:hover { color: var(--green-pale); }
.lb-share__menu { position: fixed; top: 120px; inset-inline-end: 16px; width: 224px; padding: 6px; }
.lb-share__row {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 11px; border-radius: 9px;
font-size: 13px; font-weight: 600; color: var(--ink); text-align: start;
}
.lb-share__row:hover { background: rgba(255, 255, 255, 0.05); color: var(--green-pale); }
.lb-share__row > svg { flex: none; color: var(--green-soft); }
.lb-share__vk {
width: 16px; height: 16px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
border: 1.5px solid currentColor; border-radius: 5px; color: var(--green-soft);
font-size: 8px; font-weight: 800;
}
.lb-share__copy { margin-top: 4px; border-top: 1px solid var(--line-soft); border-radius: 0 0 9px 9px; padding-top: 11px; }
.lb-share__copy.is-done { color: var(--green-soft); }
/* Модальные окна */
.lb-overlay {
position: fixed;
inset: 0;
background: rgba(4, 7, 3, 0.68);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 1000;
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 92px;
}
.lb-overlay.is-open { display: flex; }
.lb-modal {
width: 480px;
background: var(--panel-modal);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--r-lg);
padding: 22px 26px 24px;
box-shadow: var(--shadow-modal);
}
.lb-modal--sm { width: 400px; }
.lb-modal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.lb-modal__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; flex: 1; }
.lb-modal__x {
width: 32px;
height: 32px;
border-radius: 50%;
color: var(--muted);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.lb-modal__x:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }
.lb-modal__note { font-size: 12px; color: var(--dim); font-weight: 500; }
/* ---------- Окно выбора БК (клик по коэффициенту) ----------
Десктоп — модалка по центру, мобилка — шторка снизу (99-responsive).
Разметка: _bk_modal.html, поведение — app.js (data-bk-*). */
/* z-index выше катфиша (999999 у рандомного класса в ad/_catfish.html): на
телефоне шторка выезжает снизу — ровно туда, где висит баннер, и он накрывал
нижние строки со ставками. Остальные модалки сидят на общем 1000: их
середина экрана катфишу не мешает. */
.lb-bk-overlay { align-items: center; padding: 20px; z-index: 1000000; }
/* То же правило для ЛЮБОЙ шторки, выезжающей снизу (фильтры и календарь
тулбара главной, _home_toolbar.html): на телефоне она встаёт ровно на место
катфиша, и с общим 1000 баннер накрывал её нижнюю часть — кнопку
«Применить» и последние ряды календаря. Слой тот же, что у окна БК:
катфиш 999999, шторка на единицу выше. */
.lb-overlay--sheet { z-index: 1000000; }
.lb-bk {
width: 520px;
max-width: 100%;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
background: var(--panel-modal);
border: 1px solid var(--line-strong);
border-radius: var(--r-xl);
box-shadow: var(--shadow-modal);
overflow: hidden;
animation: lbBkIn 0.12s ease-out both;
}
@keyframes lbBkIn {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: none; }
}
/* Ручка шторки — мобильный элемент, на десктопе её нет. */
.lb-bk__grip { display: none; }
.lb-bk__head {
flex: none; display: flex; align-items: flex-start; gap: 14px;
padding: 20px 22px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.lb-bk__head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-bk__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink-strong); }
.lb-bk__sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.lb-bk__chip {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(88, 219, 36, 0.12); border: 1px solid rgba(88, 219, 36, 0.35);
border-radius: 8px; padding: 3px 9px; font-size: 11.5px; color: var(--green-soft); font-weight: 700;
}
.lb-bk__chip b { color: var(--ink-strong); font-weight: 800; }
.lb-bk__x {
flex: none; background: none; border: 0; padding: 4px; margin: -4px;
color: var(--dim); cursor: pointer; display: inline-flex;
}
.lb-bk__x:hover { color: var(--ink); }
.lb-bk__list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 10px 12px 8px; }
.lb-bk__row {
display: flex; align-items: center; gap: 13px;
padding: 11px 10px; border-radius: var(--r-ctl); color: var(--ink);
}
.lb-bk__row:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
/* Логотипы из админки — широкие вордмарки, поэтому колонка фиксированной
ширины и картинка вписывается по высоте (как в блоке «Ставки» на матче). */
.lb-bk__logo { flex: none; width: 104px; display: inline-flex; align-items: center; }
.lb-bk__logo img { max-width: 100%; max-height: 24px; object-fit: contain; }
.lb-bk__name { flex: none; width: 104px; font-size: 14px; font-weight: 700; }
.lb-bk__bonus {
flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 600; color: var(--green-soft);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-bk__bonus svg { flex: none; }
.lb-bk__badge {
flex: none; display: inline-flex; align-items: center;
background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
text-transform: uppercase; border-radius: var(--r-pill); padding: 4px 9px;
}
.lb-bk__cta {
flex: none; display: inline-flex; align-items: center; justify-content: center;
background: var(--green); color: var(--on-green);
font-size: 12.5px; font-weight: 700; border-radius: var(--r-pill); padding: 9px 18px;
}
.lb-bk__row:hover .lb-bk__cta { background: var(--green-hover); }
.lb-bk__note {
flex: none; padding: 12px 22px 16px; border-top: 1px solid rgba(255, 255, 255, 0.07);
font-size: 10.5px; line-height: 1.5; color: var(--dim);
}
/* Скролл страницы под окном не уезжает (позиция сохраняется — фиксируем
только overflow, без position:fixed). */
body.lb-noscroll { overflow: hidden; }
/* Строка настройки в модалке */
.lb-setting { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.lb-setting--tight { padding: 10px 0 4px; }
.lb-setting__label { flex: 1; font-size: 13.5px; font-weight: 600; }
/* «Авто» включено — строку с выбором зоны прячем целиком: выбирать в ней
нечего, а заблокированный серый список читается как поломка сайта. Вместо
общей подписи под тумблером показываем ту, где названа выбранная зона:
иначе человек не видит, по какому времени смотрит матчи.
Правило на :has(), а не на JS, потому что состояние тумблера рисуют разные
скрипты: на сайте класс is-active вешает local-time.js ([data-tz-auto]), в
макете — app.js по data-switch. Браузер без :has() покажет прежнее
поведение (строка на месте, селект disabled, подпись общая) — это
деградация, а не поломка. По той же причине авто-подпись спрятана по
умолчанию, а не наоборот: без :has() или без JS в ней остался бы виден
незаполненный плейсхолдер {zone}. */
[data-tz-note="auto"] { display: none; }
.lb-modal:has(:is([data-tz-auto="on"], [data-switch="lbTzAuto"] [data-val="on"]).is-active)
:is([data-tz-row], [data-tz-note="manual"]) { display: none; }
.lb-modal:has(:is([data-tz-auto="on"], [data-switch="lbTzAuto"] [data-val="on"]).is-active)
[data-tz-note="auto"] { display: block; }
.lb-modal__note--divider { padding: 8px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.lb-modal__actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.lb-modal__actions .lb-btn { padding: 10px 26px; font-size: 13.5px; }
/* Настройки у вошедшего (html.is-authed, хендофф 22.09.2026): вместо
заголовка — блок аккаунта (аватар, имя, «Вход через Telegram · @username»),
под ним разделитель, в подвале слева «Выйти» напротив «Готово». Гостю —
заголовок «Настройки» и одно «Готово», как было. Заголовок из разметки не
уходит (он имя диалога для aria-labelledby) — прячется. Модификатор
lb-modal--settings — чтобы правила не задели окно входа с той же шапкой. */
.lb-modal__account { display: none; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.lb-modal__account-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lb-modal__account-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-modal__account-via { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
/* Имя и ник из Telegram — чужой текст неизвестного направления. На странице
справа налево ник «@user» без изоляции печатался бы «user@»: «@» —
нейтральный знак и прилипает к ивритской стороне строки. plaintext берёт
направление из самого текста; слева направо ничего не меняется. */
[data-account-name],
[data-account-handle] { unicode-bidi: plaintext; }
.lb-modal__account-via svg { flex: none; color: var(--tg); }
html.is-authed .lb-modal--settings .lb-modal__title { display: none; }
html.is-authed .lb-modal--settings .lb-modal__account { display: flex; }
html.is-authed .lb-modal--settings .lb-modal__head { margin-bottom: 2px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
html.is-authed .lb-modal--settings .lb-modal__actions { justify-content: space-between; }
/* «Выйти» — и здесь, и в дровере только вошедшему; клик ловит auth.js по классу. */
.lb-auth__logout { display: none; }
html.is-authed .lb-auth__logout { display: inline-flex; }
.lb-modal__actions .lb-modal__logout { padding: 9px 16px; font-size: 13px; gap: 8px; border-color: var(--line-strong); background: transparent; color: var(--muted); }
.lb-modal__actions .lb-modal__logout:hover { border-color: rgba(255, 107, 107, 0.55); color: var(--red-live-text); }
/* Модалка входа.
Разметка общая с мобильным экраном входа: в ней лежит топбар «назад» +
лого. В модалке он не нужен — прячем; включает его 99-responsive на 940px.
Сами способы входа (переключатель, шаги, панели, число сверки) — общие
блоки с экраном /login, их стили в 14-beta.css.
Окно выше прежнего (шаги + панель), а экран ноутбука бывает низким —
прокручивается весь оверлей, а не обрезается нижний край окна. */
.lb-overlay--auth { overflow-y: auto; padding-top: 64px; padding-bottom: 40px; }
.lb-auth__bar { display: none; }
.lb-auth__hint { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; }
/* Заметка «добавлять в избранное можно только после входа». Появляется только
когда модалку открыла звезда гостя (app.js снимает hidden). Акцентная
плашка, а не красная: это приглашение войти, а не ошибка человека.
Цвет текста — обычный ink, а не muted у соседней подсказки: эту строку
человек не искал, и она должна читаться первой. */
.lb-auth__limit {
font-size: 12.5px;
line-height: 1.55;
color: var(--ink);
margin: 0 0 14px;
padding: 10px 12px;
background: rgba(88, 219, 36, 0.07);
border: 1px solid rgba(88, 219, 36, 0.22);
border-radius: 10px;
}
/* Имя бота внутри подсказки — ссылка в чат с ним. Зелёным и жирным: ник должен
читаться одним словом, иначе @lblauth1_bot растворяется в приглушённой строке
и человек ищет его глазами. Тем же классом размечено имя бота на калитке входа
— ссылку в фразу подставляет tLink (render/i18nfuncs.go), и класс общий
специально, чтобы два экрана одного и того же входа не разошлись. */
.lb-botlink { color: var(--green); font-weight: 700; }
.lb-botlink:hover { color: var(--green-soft); }
/* Строка ошибки входа (истёк код, «это не я» в боте, перебор кодов). Ставит
её auth.js; ожидание подтверждения показывает плашка в панели Telegram. */
.lb-auth__status { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; text-align: center; }
.lb-auth__status.is-error { color: var(--red-live-text); }
.lb-auth__status a { color: var(--green); text-decoration: underline; }
/* Тумблер Вкл/Выкл */
.lb-switch {
display: inline-flex;
background: var(--field);
border: 1px solid var(--line-strong);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.lb-switch button {
border-radius: 8px;
padding: 5px 14px;
font-size: 12px;
font-weight: 600;
color: var(--muted);
}
.lb-switch button.is-active {
background: var(--green);
color: var(--on-green);
font-weight: 700;
}
.lb-switch--sm button { padding: 5px 12px; font-size: 11.5px; }
/* ---------- Тумблер (lb-toggle) ----------
Переключатель вкл/выкл из хендоффа «блок с сортировками» (05.09.2026): трек
с кнобом, включённый — зелёный. Состояние живёт СНАРУЖИ: is-active на
родителе (кнопка «Только с трансляцией» в тулбаре главной) либо :checked у
соседнего чекбокса (шторка фильтров на телефоне) — самому тумблеру класс
не нужен, и обе разметки красятся одним правилом. Не путать с .lb-switch:
тот — сегмент Вкл/Выкл с подписями в настройках. */
.lb-toggle {
position: relative;
display: inline-block;
flex: none;
vertical-align: middle;
width: 34px;
height: 20px;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.14);
transition: background .15s;
}
.lb-toggle__knob {
position: absolute;
top: 2px;
inset-inline-start: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #9AA694;
transition: left .15s, background .15s;
}
.is-active > .lb-toggle, input:checked + .lb-toggle { background: var(--green); }
.is-active > .lb-toggle .lb-toggle__knob, input:checked + .lb-toggle .lb-toggle__knob { inset-inline-start: calc(100% - 18px); background: var(--on-green); }
/* Крупный (44×26) — строка шторки на телефоне, где тач-таргет важнее места. */
.lb-toggle--lg { width: 44px; height: 26px; }
.lb-toggle--lg .lb-toggle__knob { top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; }
.is-active > .lb-toggle--lg .lb-toggle__knob, input:checked + .lb-toggle--lg .lb-toggle__knob { inset-inline-start: calc(100% - 23px); }
/* Селект в модалке */
.lb-select { position: relative; display: inline-flex; }
.lb-select select {
appearance: none;
background: var(--field);
border: 1px solid var(--line-strong);
border-radius: 10px;
padding-block: 10px; padding-inline: 12px 32px;
font-size: 13px;
width: 225px;
outline: none;
cursor: pointer;
}
.lb-select svg {
position: absolute;
inset-inline-end: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* Кнопка соцвхода */
.lb-social {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--r-ctl);
padding: 11px 14px;
font-size: 13.5px;
font-weight: 700;
color: var(--ink);
text-align: start;
width: 100%;
}
.lb-social__ico {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
font-size: 9.5px;
font-weight: 800;
color: #FFFFFF;
}
.lb-social--tg:hover { border-color: rgba(42, 171, 238, 0.7); background: rgba(42, 171, 238, 0.07); }
.lb-social--tg .lb-social__ico { background: var(--tg); }
/* Обёртка слайдера: остался только контекст позиционирования для стрелок
разделов (.ufc-sec__nav на витрине UFC). Общего .lb-slider__arrow больше
нет — его последняя разметка (стрелки «Топ лиг» в хоккее и баскетболе)
убрана, ряд там прокручивается пальцем, как везде на сайте. */
.lb-slider { position: relative; }
/* Футер */
/* margin-top: auto — прибивка к низу вьюпорта (см. флекс-колонку body в §2):
на заполненной странице свободного места нет и auto равен нулю, отступ
сверху по-прежнему даёт паддинг СЕО-блока, как в макете. В макете
флекс-ребёнок body — веб-компонент (components.js), поэтому
auto нужен и ему; у вложенного .lb-footer внутри обычного блока auto
схлопывается в 0 и не мешает. */
lb-footer { margin-top: auto; }
.lb-footer { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.lb-footer__inner { width: 1140px; margin: 0 auto; padding: 26px 0 34px; }
.lb-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lb-footer__logo { height: 20px; opacity: 0.85; }
.lb-footer__links { display: flex; align-items: center; gap: 22px; }
.lb-footer__links a { font-size: 13px; color: var(--muted); }
.lb-footer__links a:hover { color: var(--green-pale); }
.lb-footer__links a.is-active { color: var(--green-pale); font-weight: 700; }
.lb-footer__copy { margin-top: 16px; font-size: 12px; color: var(--dim); }
/* ---------- 5. Мобильные общие компоненты ---------- */
/* Топбар */
.m-topbar {
flex: none;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px 12px;
background: var(--bg-header);
border-bottom: 1px solid var(--line-soft);
position: sticky;
top: 0;
z-index: 100;
}
.m-topbar__logo { height: 22px; display: block; }
.m-iconbtn {
position: relative;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--panel);
border: 1px solid var(--line-ctl);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
flex: none;
padding: 0;
}
.m-iconbtn--push { margin-inline-start: auto; }
.m-iconbtn .lb-badge { top: -3px; inset-inline-end: -3px; }
/* Чип вида спорта */
.m-chip {
flex: none;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--panel);
border: 1px solid var(--line-strong);
color: #DFE5DB;
font-size: 12.5px;
font-weight: 600;
border-radius: var(--r-pill);
padding: 9px 15px;
}
.m-chip.is-active {
background: rgba(88, 219, 36, 0.14);
border-color: rgba(88, 219, 36, 0.45);
color: var(--green-soft);
font-weight: 700;
}
/* Дровер — полноэкранное меню (как в макете) */
@keyframes mDrawerIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.m-drawer { display: none; }
.m-drawer.is-open { display: block; }
/* z-index выше катфиша (999999 у рандомного класса в ad/_catfish.html) — тот
же слой, что у шторок и окна БК: меню во весь экран, и с общим 1000 баннер
висел поверх его низа (кнопка Telegram-канала, копирайт). Делить слой не с
кем: окно входа, открытое из меню, само его закрывает (app.js). */
.m-drawer__panel {
position: fixed;
inset: 0;
z-index: 1000000;
background: var(--bg-header);
display: flex;
flex-direction: column;
animation: mDrawerIn 0.22s ease-out both;
}
.m-drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 24px; }
.m-drawer__link {
display: flex;
align-items: center;
gap: 10px;
padding: 17px 2px;
border-bottom: 1px solid var(--line-soft);
color: var(--ink);
}
.m-drawer__link.is-active { color: var(--green-soft); }
.m-drawer__link-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; flex: 1; }
/* Счётчик избранного в дровере — обычная пилюля в строке. Базовый .lb-badge
абсолютный (он «прилипает» к звезде в шапке), внутри строки меню это
выносило его за правый край. */
.m-drawer__link .lb-badge { position: static; top: auto; inset-inline-end: auto; }
.m-drawer__arrow { color: var(--dim); }
.m-drawer__caption {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dim);
margin: 22px 2px 10px;
}
.m-drawer__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-drawer__svc {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 2px;
border-bottom: 1px solid var(--line-soft);
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
text-align: start;
}
.m-drawer__svc:hover { color: var(--ink); }
.m-drawer__svc--row { padding: 10px 2px; }
.m-drawer__svc .u-grow { font-size: 13.5px; font-weight: 600; }
.m-drawer__val { font-size: 12px; font-weight: 600; color: var(--green-soft); }
/* Строка настройки с выбором (часовой пояс, язык): подпись слева, текущее
значение справа, шеврон. Нативный — на телефоне это системный
пикер, что ближе к макету, чем самодельный список.
Шеврон рисует САМ селект фоном, а не отдельная иконка рядом: иконка лежала
вне поля, и тап по ней попадал в — тот селект только фокусирует, но
не раскрывает. Заодно селект растянут на всю правую часть строки, поэтому
попасть в него легко пальцем. */
.m-drawer__svc--pick { cursor: pointer; }
.m-drawer__val { flex: 1; min-width: 0; text-align: end; }
.m-drawer__val select {
appearance: none; -webkit-appearance: none;
width: 100%; padding-block: 0; padding-inline: 0 16px; border: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239DA898' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center;
font: inherit; color: inherit; text-align: end;
text-overflow: ellipsis; cursor: pointer;
}
/* Шеврон-фон стоит у конца строки: справа налево — слева. */
[dir="rtl"] .m-drawer__val select { background-position: left center; }
.m-drawer__val select:disabled { opacity: 1; }
/* Своих правил :focus в проекте не было, и браузер рисовал по строке настройки
собственное кольцо (у заказчика — жёлтое). Для мыши и тапа гасим, для
клавиатуры оставляем — но уже брендовое. */
.m-drawer__val select:focus { outline: none; }
.m-drawer__val select:focus-visible { outline: 2px solid var(--hover-green-line); outline-offset: 3px; border-radius: 6px; }
.m-drawer__cta { display: flex; margin-top: 10px; font-size: 13px; padding: 12px 18px; width: 100%; /* кнопки сами не растягиваются flex-ом, в отличие от ссылок */ }
.m-drawer__cta:first-of-type { margin-top: 22px; }
/* Строка аккаунта — первая в меню, под топбаром (хендофф 22.09.2026, вместо
зелёной «Войти в LiveBall» внизу). Гостю вся строка — кнопка входа:
пунктирный аватар, «Войти», подсказка про синхронизацию, стрелка.
Вошедшему — аватар-инициал, имя, «Telegram · @username» и кнопка «Выйти»;
сама строка не нажимается (auth.js снимает data-modal-open), настройки —
строками в «Сервисе». Обе подписи лежат рядом, показывает нужную
html.is-authed. */
.m-drawer__account { display: flex; align-items: center; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line-soft); }
.m-drawer__account-main {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
background: none;
border: 0;
padding: 0;
color: var(--ink);
text-align: start;
font: inherit;
cursor: pointer;
}
html.is-authed .m-drawer__account-main { cursor: default; }
html.is-authed .m-drawer__account-main .m-drawer__arrow { display: none; }
.m-drawer__account-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.m-drawer__account-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-drawer__account-sub { font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--muted); }
.m-drawer__account-tg { display: none; align-items: center; gap: 5px; }
.m-drawer__account-tg svg { flex: none; width: 11px; height: 11px; color: var(--tg); }
html.is-authed .m-drawer__account-guest { display: none; }
html.is-authed .m-drawer__account-tg { display: inline-flex; }
.m-drawer__account .lb-auth__logout { flex: none; padding: 7px 13px; font-size: 12.5px; color: var(--muted); background: transparent; }
/* ---------- Мобильное окно поиска (m-search) ----------
Отдельный полноэкранный экран из мобильного макета (handoff «Моб Поиск»):
шапка с полем и «Отменой», ниже либо пустой экран (история + топ-блоки +
подсказка), либо выдача группами. Поля поиска в меню нет — в макете его там
тоже нет. Показывается только на мобилке (правило в 99-responsive).
Разметка — _header.html, поведение — public/js/v2/search.js. */
.m-search {
/* 1000 — как у дровера и модалок: рекламный брендос сидит на 999 и иначе
перекрывает строку поиска сверху. */
position: fixed; inset: 0; z-index: 1000;
display: none; flex-direction: column;
background: var(--bg);
}
.m-search[hidden] { display: none; }
.m-search__bar {
flex: none; display: flex; align-items: center; gap: 12px;
padding: 14px 16px 12px; background: var(--bg-header);
border-bottom: 1px solid var(--line-soft);
}
/* Поле экрана поиска — своё, а не .lb-search из шапки: оно всегда «в фокусе»
(зелёная рамка со свечением), потому что экран для того и открыт. */
.m-search__field {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
background: var(--panel); border: 1px solid rgba(88, 219, 36, 0.55);
box-shadow: 0 0 0 3px rgba(88, 219, 36, 0.1);
border-radius: var(--r-pill); padding: 10px 14px;
}
.m-search__field > svg { flex: none; }
.m-search__field input {
flex: 1; min-width: 0; padding: 0;
background: transparent; border: 0; outline: none;
font-family: inherit; font-size: 13.5px; font-weight: 600;
color: var(--ink); caret-color: var(--green);
}
.m-search__field input::placeholder { color: var(--dim); font-weight: 500; }
.m-search__cancel {
flex: none; background: none; border: 0; padding: 0; font-family: inherit;
font-size: 13px; font-weight: 700; color: var(--green-soft); cursor: pointer;
}
.m-search__clear {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 17px; height: 17px; border-radius: 50%; padding: 0;
background: var(--dim); border: 0; color: var(--bg); cursor: pointer;
}
.m-search__clear[hidden] { display: none; }
/* Фильтры выдачи: строка чипов с горизонтальным скроллом. Скрыта, пока в
ответе одна группа (см. _header.html). */
.m-search__filters {
flex: none; display: flex; gap: 7px; overflow-x: auto;
padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
}
.m-search__filters[hidden] { display: none; }
.m-search__filter {
flex: none; display: flex; align-items: center; gap: 6px;
border-radius: var(--r-pill); padding: 7px 13px;
background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.1);
font-family: inherit; font-size: 12px; font-weight: 700; color: var(--muted);
cursor: pointer;
}
.m-search__filter span { font-size: 10.5px; opacity: 0.65; }
.m-search__filter.is-active { background: var(--green); border-color: var(--green); color: var(--on-green); }
.m-search__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 24px; }
.m-search__block, .m-search__group { margin-top: 18px; }
.m-search__block[hidden] { display: none; }
/* Появление группы выдачи — как в макете: 8px снизу вверх за 0.22s. */
.m-search__group { animation: mSearchUp 0.22s ease both; }
@keyframes mSearchUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.m-search__cap {
display: flex; align-items: center; gap: 10px; margin: 0 2px 9px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--dim);
}
.m-search__capbtn {
background: none; border: 0; padding: 0; font-family: inherit;
font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
color: var(--dim); cursor: pointer;
}
.m-search__capbtn:hover { color: var(--green-soft); }
/* История поиска: строки без карточки, разделитель тоньше общего --line-soft. */
.m-search__recent { display: flex; flex-direction: column; }
.m-search__recent-item {
display: flex; align-items: center; gap: 11px; width: 100%;
padding: 11px 2px; background: none; border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-family: inherit; font-size: 13.5px; color: var(--ink);
text-align: start; cursor: pointer;
}
.m-search__recent-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-search__recent-item > svg { flex: none; color: var(--dim); }
.m-search__recent-item:hover { color: var(--ink-strong); }
/* Крестик 26px — хит-таргет из макета, уменьшать нельзя: рядом кликабельна
вся строка, и промах по крестику откроет команду вместо удаления. */
.m-search__recent-rm {
flex: none; width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: none; border: 0; padding: 0; color: var(--faint); cursor: pointer;
}
.m-search__recent-rm:hover { color: var(--muted); }
/* Карточка со строками — одна и та же у топ-блоков и у выдачи. */
.m-search__card {
background: var(--panel); border: 1px solid var(--line);
border-radius: var(--r-card); overflow: hidden;
}
.m-search__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--ink); }
.m-search__row + .m-search__row { border-top: 1px solid var(--line-soft); }
.m-search__row:hover { background: rgba(255, 255, 255, 0.03); }
.m-search__row-logo {
width: 24px; height: 24px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
}
.m-search__row-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.m-search__row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-search__row-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Подсветка совпадения: внутри имени — только цвет, вес уже 700. */
.m-search__row-name b { color: var(--green-soft); font-weight: inherit; }
.m-search__row-sub { font-size: 11px; color: var(--dim); }
.m-search__row-arrow { flex: none; color: var(--dim); }
.m-search__hint { margin: 20px 2px 26px; font-size: 11.5px; line-height: 1.6; color: var(--faint); text-align: center; }
/* Экран без выдачи: «начните вводить» и «ничего не нашлось». */
.m-search__state {
display: flex; flex-direction: column; align-items: center; gap: 9px;
padding: 72px 18px; text-align: center;
}
.m-search__state[hidden] { display: none; }
.m-search__state-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.m-search__state-sub { font-size: 12px; line-height: 1.55; color: var(--dim); }
.m-search__reset {
margin-top: 6px; background: var(--panel);
border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-pill);
padding: 9px 17px; font-family: inherit; font-size: 12.5px; font-weight: 700;
color: var(--ink); cursor: pointer;
}
.m-search__reset:hover { border-color: rgba(88, 219, 36, 0.55); color: var(--ink-strong); }
.m-drawer__copy { margin-top: 16px; font-size: 11px; color: var(--dim); text-align: center; }
/* ---------- 6. Страничные секции ---------- */
/* --- Сервисные страницы: О нас, Правообладателям, Реклама (doc-) --- */
.doc-section { width: 960px; margin: 0 auto; padding: 44px 0 24px; }
.doc-section--narrow { width: 760px; }
/* Во всю ширину контента, как у остальных страниц сайта (Реклама,
Правообладателям). Ниже 1180px все doc-секции и так резиновые — блок
@media в 99-responsive перебивает эту ширину, — так что модификатор
работает на широком десктопе. */
.doc-section--wide { width: 1140px; }
.doc-kicker { margin-bottom: 14px; }
.doc-title { font-size: 30px; } /* ограничение ширины — только у hero «О нас» (см. ниже) */
.doc-lead { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 18px 0 0; max-width: 720px; }
/* Узкие сервисные страницы (Правообладателям): лид на всю ширину, CTA ближе (как в макете) */
.doc-section--narrow .doc-lead { max-width: none; }
.doc-section--narrow .doc-cta { margin-top: 20px; }
/* На широкой странице лид не растягиваем до края: 900px — предел читаемой
строки, дальше абзац рассыпается. CTA прижимаем так же, как у узких. */
.doc-section--wide .doc-lead { max-width: 900px; }
.doc-section--wide .doc-cta { margin-top: 20px; }
/* Карточка-хиро с зелёным свечением (О нас) */
.doc-hero {
position: relative;
overflow: hidden;
padding: 40px 44px 44px;
}
.doc-hero::before {
content: '';
position: absolute;
inset-inline-end: -80px;
top: -120px;
width: 480px;
height: 340px;
background: radial-gradient(closest-side, rgba(88, 219, 36, 0.16), transparent 72%);
pointer-events: none;
}
.doc-hero > * { position: relative; }
.doc-hero .doc-title { font-size: 32px; max-width: 640px; }
.doc-hero .doc-lead { max-width: 640px; }
/* Сетка цифр */
.doc-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 20px;
}
.doc-stats--push { margin-top: 28px; }
.doc-stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.doc-stat__value { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--green); }
.doc-stat__label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 6px; }
/* Блок «Как это работает» / форматы */
.doc-block { margin-top: 36px; }
.doc-block > .lb-h2 { margin-bottom: 14px; }
.doc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.doc-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; }
.doc-card__num { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--green); }
.doc-card__title { font-size: 15px; font-weight: 800; color: var(--ink-strong); }
.doc-card__num + .doc-card__title { margin-top: 10px; }
.doc-card__text { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
/* Нумерованные пункты (Правообладателям) */
.doc-steps { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; margin-top: 28px; }
.doc-steps > .lb-h3 { font-size: 16px; margin-bottom: 6px; }
.doc-step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.doc-step:last-child { border-bottom: none; }
.doc-step__num { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--green); flex: none; width: 24px; }
.doc-step__text { font-size: 14px; line-height: 1.6; color: #DFE5DB; }
.doc-step__text strong { font-weight: 700; color: var(--ink-strong); }
/* CTA-баннер с почтой */
.doc-cta {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: center;
border-radius: var(--r-lg);
padding: 24px 26px;
margin-top: 28px;
background: linear-gradient(160deg, rgba(88, 219, 36, 0.16), rgba(88, 219, 36, 0.04)), var(--panel);
border: 1px solid var(--line-green);
}
.doc-cta__title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink-strong); }
.doc-cta__text { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-top: 6px; }
.doc-cta .lb-btn { padding: 12px 24px; }
/* ===== partials/10-home.css ===== */
/* --- Главная (home-) --- */
/* Сайдбар: карточки-списки */
.home-side { padding: 8px; }
.home-side__head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 8px;
}
.home-side__title { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--ink-strong); }
/* Поиск по странам в карточке сайдбара (разметка — _right_menu.html, контрол —
.lb-find в 00-core, поведение — app.js). Фон --bg, а не --panel: карточка
вокруг сама --panel, и поле на её фоне пропало бы. Отступы плотные — строка
сайдбара 13.5px, поле не должно быть заметно выше неё. */
.home-side__search { margin: 0 4px 6px; padding: 8px 12px; background: var(--bg); }
/* «Ничего не нашлось» — строка внутри списка стран, показывает её фильтр. */
.home-side__empty { padding: 8px 12px 10px; font-size: 12.5px; font-weight: 500; color: var(--dim); }
/* Строка-ссылка в сайдбаре (лига или страна) */
.home-nav {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--r-row);
color: #DFE5DB;
font-size: 13.5px;
font-weight: 600;
}
.home-nav:hover { background: rgba(255, 255, 255, 0.04); color: #DFE5DB; }
.home-nav__ico { width: 22px; height: 22px; flex: none; display: inline-flex; }
.home-nav__ico img { width: 22px; height: 22px; object-fit: contain; }
/* Центрирование нужно нефлаговым иконкам (глобус «Мира» 14x14 в слоте 20x14);
флаги-картинки заполняют слот целиком и центрирования не замечают. */
.home-nav__flag { width: 20px; height: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.home-nav__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-nav__chev { display: inline-flex; color: var(--dim); transition: transform 0.2s; }
/* Стрелка строки «Топ турниров» — только в мобильном макете (17-leagues). */
.home-nav__arrow { display: none; }
/* Сворачиваемая страна */
.home-country > .home-nav { cursor: pointer; }
.home-country__sub { display: none; flex-direction: column; padding-block: 0 6px; padding-inline: 42px 12px; }
.home-country.is-open .home-country__sub { display: flex; }
.home-country.is-open .home-nav__chev { transform: rotate(180deg); }
.home-country__sub a { font-size: 13px; font-weight: 500; color: var(--muted); padding: 6px 0; }
.home-country__sub a:hover { color: var(--green-pale); }
/* CTA-блок Telegram в сайдбаре */
.home-cta {
border-radius: var(--r-card);
padding: 20px;
background: linear-gradient(160deg, rgba(88, 219, 36, 0.16), rgba(88, 219, 36, 0.04)), var(--panel);
border: 1px solid var(--line-green);
}
.home-cta__title { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--ink-strong); line-height: 1.4; }
.home-cta__text { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 6px; }
.home-cta__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 14px;
background: var(--green);
color: var(--on-green);
font-weight: 700;
font-size: 13.5px;
border-radius: var(--r-pill);
padding: 11px 18px;
}
.home-cta__btn:hover { background: var(--green-hover); color: var(--on-green); }
/* Хиро топ-матча */
.home-hero {
display: block;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
color: var(--ink);
}
.home-hero__head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--line-soft);
}
.home-hero__badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--green);
color: var(--on-green);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: var(--r-pill);
padding: 6px 13px;
}
.home-hero__league-logo { width: 20px; height: 20px; object-fit: contain; }
.home-hero__league { font-size: 13px; font-weight: 600; color: var(--muted); }
.home-hero__when { margin-inline-start: auto; font-size: 13px; font-weight: 700; color: var(--ink); }
.home-hero__star { position: relative; z-index: 2; }
.home-hero__body { position: relative; overflow: hidden; }
.home-hero__glow {
position: absolute;
top: -100px;
width: 380px;
height: 320px;
pointer-events: none;
}
.home-hero__glow--l { inset-inline-start: -120px; background: radial-gradient(closest-side, rgba(245, 247, 243, 0.13), transparent 72%); }
.home-hero__glow--r { inset-inline-end: -120px; background: radial-gradient(closest-side, rgba(116, 172, 223, 0.2), transparent 72%); }
.home-hero__grid {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0 20px;
align-items: start;
padding: 30px 40px 24px;
}
/* команды занимают оба ряда; коэффициенты — второй ряд центральной колонки */
.home-hero__grid > .home-hero__team { grid-row: 1 / 3; }
.home-hero__center { grid-column: 2; grid-row: 1; }
.home-hero:hover { color: var(--ink); } /* имена команд не должны зеленеть от a:hover */
.home-hero__team { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
/* Без круглой подложки и рамки — только сам логотип (contain, чтобы не резать). */
.home-hero__team img { width: 76px; height: 76px; object-fit: contain; }
.home-hero__team-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink-strong); }
.home-hero__label--mobile { display: none; } /* «Сегодня · 22:00» над таймером — только мобилка */
.home-hero__center { text-align: center; min-width: 220px; }
/* Live-состояние хиро — красная пилюля в дизайне live-бейджа макета
(.sm-player__live: тёмная подложка, красная рамка и текст). display не
трогаем: показ/скрытие --desktop/--mobile версий делает адаптив правилами
меньшей специфичности; fit-content + auto-маргины дают пилюле ширину по
содержимому в текстоцентрированной колонке. Счёт остаётся обычным. */
/* Без пилюли: на тёмной панели и подложка читалась «обводкой» — остался
только красный текст с мигающей точкой над счётом. */
.home-hero__label.is-live {
width: fit-content;
/* 2px вниз без сдвига счёта: верхний маргин прибавлен, нижний убавлен */
margin: 2px auto 10px;
color: var(--red-live-text);
font-weight: 800;
}
/* Точка — span с width/height: в блочном лейбле без inline-block размеры
игнорируются и точка невидима (в строках матчей её спасает inline-flex
родителя). Анимация мигания приходит из .lb-live-dot (lbPulse). */
.home-hero__label.is-live .lb-live-dot { display: inline-block; vertical-align: middle; margin-block: -1px 0; margin-inline: 0 3px; }
.home-hero__label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dim);
margin-bottom: 10px;
}
.home-hero__timer {
font-family: var(--font-display);
font-size: 40px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: 0.03em;
color: var(--ink-strong);
}
.home-hero__odds { grid-column: 2; grid-row: 2; align-self: start; display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.home-odd {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(88, 219, 36, 0.1);
border: 1px solid rgba(88, 219, 36, 0.4);
border-radius: var(--r-row);
padding: 8px 16px;
font-size: 13px;
cursor: pointer; /* кэф открывает окно выбора БК (app.js) */
}
.home-odd:hover { border-color: var(--green); background: rgba(88, 219, 36, 0.16); }
/* Нажатый исход остаётся подсвеченным под оверлеем — видно, за что ставим. */
.home-odd.is-active { background: rgba(88, 219, 36, 0.16); border-color: var(--green); }
.home-odd__k { color: var(--green-soft); font-weight: 700; }
.home-odd__v { font-weight: 800; color: var(--ink-strong); }
/* Топ-5 лиг */
.home-leagues__rows { display: flex; flex-direction: column; gap: 16px; }
.home-leagues__row { display: flex; gap: 16px; }
/* Стрелок у «Топ-5» нет ни на одном брейкпоинте (просьба заказчика): десктоп —
статичная сетка 2+3, мобилка листается пальцем. Кнопок нет и в разметке. */
.home-lc {
flex: 1;
height: 150px;
border-radius: var(--r-xl);
overflow: hidden;
position: relative;
display: block;
}
/* Hover — подсветка всей карточки, как у «Топ лиг» хоккея/баскетбола
(.sm-lc:hover из хендофф-сниппета top-ligi-basketball): один блок в трёх
разделах не должен вести себя по-разному. */
.home-lc:hover { filter: brightness(1.08); }
.home-lc__wm {
position: absolute;
background: #FFFFFF;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
pointer-events: none;
}
.home-lc__photo {
position: absolute;
/* height: auto — высота идёт от ширины по натуральным пропорциям (боксы в
макете совпадали с ними один в один), поэтому при сужении карточки
футболист ужимается целиком, а не уезжает за правый край. */
height: auto;
object-fit: contain;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}
.home-lc__country {
position: absolute;
inset-inline-start: 18px;
top: 16px;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
.home-lc__country img { height: 11px; border-radius: 2px; }
.home-lc__name {
position: absolute;
inset-inline-start: 18px;
bottom: 46px;
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: #FFFFFF;
}
.home-lc__cta {
position: absolute;
inset-inline-start: 18px;
bottom: 16px;
font-size: 12.5px;
font-weight: 700;
color: #FFFFFF;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
/* Малые карточки (второй ряд) — меньше шрифт названия/отступы */
.home-lc--sm .home-lc__country { inset-inline-start: 16px; top: 14px; gap: 6px; }
.home-lc--sm .home-lc__name { inset-inline-start: 16px; bottom: 44px; font-size: 15px; }
.home-lc--sm .home-lc__cta { inset-inline-start: 16px; bottom: 15px; font-size: 12px; }
/* Позиции фона/вотермарки/фото по лигам.
Карточки резиновые (flex: 1), поэтому арт привязан к ПРАВОМУ краю, а ширины
заданы в % от карточки: раньше left/width в px были посчитаны под макетную
ширину, и при сужении экрана футболисты уезжали за правый край под overflow.
Проценты пересчитаны из макета: большие карточки 420px, малые — 275px.
По вертикали фото стоит на дне карточки (bottom: 0) и опущено ниже неё
через translateY в % ОТ СВОЕЙ высоты — так вынос под нижнюю грань ужимается
вместе с фото, и футболист всегда срезан низом карточки, а не висит над ней.
Вотермаркам height задаёт aspect-ratio (span без контента), фото — height:auto. */
.home-lc--epl { background: #38003C; }
.home-lc--epl .home-lc__wm { inset-inline-end: 32.14%; top: 0; width: 32.14%; aspect-ratio: 135 / 150; opacity: 0.1; mask-image: url(/public/img/v2/wm/epl.svg); -webkit-mask-image: url(/public/img/v2/wm/epl.svg); }
.home-lc--epl .home-lc__photo { width: 40.71%; inset-inline-end: 1.19%; bottom: 0; transform: translateY(30.63%); }
.home-lc--laliga { background: #FF4B44; }
.home-lc--laliga .home-lc__country { color: rgba(255, 255, 255, 0.85); }
.home-lc--laliga .home-lc__wm { inset-inline-end: 26.19%; top: -8px; width: 45.24%; aspect-ratio: 190 / 170; opacity: 0.12; mask-image: url(/public/img/v2/wm/laliga.svg); -webkit-mask-image: url(/public/img/v2/wm/laliga.svg); }
.home-lc--laliga .home-lc__photo { width: 46.67%; inset-inline-end: -2.62%; bottom: 0; transform: translateY(34.76%); }
.home-lc--bundesliga { background: #DD3E4C; }
.home-lc--bundesliga .home-lc__wm { inset-inline-end: 7.27%; top: 3px; width: 70.91%; aspect-ratio: 195 / 147; opacity: 0.11; mask-image: url(/public/img/v2/wm/bundesliga.svg); -webkit-mask-image: url(/public/img/v2/wm/bundesliga.svg); }
.home-lc--bundesliga .home-lc__photo { width: 65.09%; inset-inline-end: -6.55%; bottom: 0; transform: translateY(17.88%); }
.home-lc--ligue1 { background: #1C3869; }
.home-lc--ligue1 .home-lc__wm { inset-inline-end: 7.64%; top: -20px; width: 74.18%; aspect-ratio: 204 / 191; opacity: 0.08; mask-image: url(/public/img/v2/wm/ligue1.svg); -webkit-mask-image: url(/public/img/v2/wm/ligue1.svg); }
.home-lc--ligue1 .home-lc__photo { width: 73.45%; inset-inline-end: -5.82%; bottom: 0; transform: translateY(25.74%); }
.home-lc--seriea { background: #49B2D3; }
.home-lc--seriea .home-lc__country { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.home-lc--seriea .home-lc__name { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.home-lc--seriea .home-lc__wm { inset-inline-end: 25.45%; top: 8px; width: 54.55%; aspect-ratio: 150 / 134; opacity: 0.14; mask-image: url(/public/img/v2/wm/seriea.svg); -webkit-mask-image: url(/public/img/v2/wm/seriea.svg); }
.home-lc--seriea .home-lc__photo { width: 62.55%; inset-inline-end: -6.55%; bottom: 0; transform: translateY(12.21%); }
/* Секция «Матчи» — шапка ленты на страницах ЛИГ хоккея и баскетбола
(заголовок, панель даты cal_bar). Ленты дня — главная, /hockey,
/basketball — с 05.09.2026 на тулбаре .home-tb ниже. */
.home-matches__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* Заголовок тянется — календарь прижимается к правому краю. Селектор по
классу, а не по тегу: на страницах лиг хоккея и баскетбола «Матчи» — это