/* ============================================================ Тёмная тема offside.kz ============================================================ Сайт собран на Bootstrap 5 плюс легаси-слой (critical.css из assets/scss и public/custom.css) — там цвета зашиты значениями, а не переменными. Переписывать 190 КБ стилей ради темы никто не станет, поэтому тема сделана слоем поверх: 1) токены --of-* задают палитру и переключаются по data-theme на ; 2) переменные Bootstrap (--bs-*) переопределяются оптом — это разом гасит фон, текст, рамки, таблицы и формы; 3) вручную добиваются только те селекторы легаси, где цвет прибит гвоздями (body, .section, .header и подобные). Файл автономный, как kpl.css и mma.css: Encore для него пересобирать не нужно, правки уходят обычным rsync. Порядок подключения важен: тема идёт ПОСЛЕ custom.css, иначе !important легаси перебьёт её. ============================================================ */ /* ── Токены: светлая тема ── Значения повторяют то, что уже нарисовано на сайте, — светлая тема ничего не меняет визуально, она нужна как точка отсчёта и как явный выбор пользователя вопреки системной настройке. */ :root { --of-bg: #f2f2f2; /* фон страницы */ --of-bg-alt: #f0f2f5; /* фон контейнера контента */ --of-surface: #fff; /* карточки .section, шапка, подвал */ --of-surface-2: #f7f7f8; /* вложенные мягкие плашки */ --of-ink: #212529; /* основной текст */ --of-ink-soft: #555; /* вторичный текст */ --of-muted: #777; /* подписи, даты */ --of-line: #ececee; /* разделители */ --of-line-strong: #ddd; /* рамки инпутов и кнопок */ --of-placeholder: #e8eaee; /* подложка аватаров и заглушек фото */ --of-accent: #87668a; /* фирменный лиловый */ --of-accent-ink: #fff; /* текст на лиловом */ --of-red: #e31e24; /* акцент КПЛ и ММА */ --of-shadow: 0 0 6px -4px silver; --of-logo-filter: none; /* Картинки в тёмной теме притушаются, в светлой — нет */ --of-media-dim: none; color-scheme: light; } /* ── Токены: тёмная тема ── Фон не чёрный: на OLED чистый #000 даёт ореол вокруг белого текста, а карточки на нём неотличимы от подложки. Берём тёмно-серый с лёгким холодным оттенком, карточки на ступень светлее — иерархия читается без рамок. */ html[data-theme="dark"] { --of-bg: #14161a; --of-bg-alt: #14161a; --of-surface: #1c1f25; --of-surface-2: #23272e; --of-ink: #e6e8eb; --of-ink-soft: #b6bcc4; --of-muted: #949ba5; /* Разделители держим чуть темнее фона карточки: на тёмном светлая линия читается как подсветка и рябит в списках */ --of-line: #23262c; --of-line-strong: #30353d; /* Подложка аватаров и заглушек фото */ --of-placeholder: #2b2f36; /* Фирменный #87668a на тёмном даёт контраст 2.6:1 — мало. Осветляем до 7:1, оттенок сохраняем. */ --of-accent: #b79bba; --of-accent-ink: #1c1f25; /* Красный КПЛ на тёмном тоже слишком глухой */ --of-red: #ff5a60; --of-shadow: none; /* Логотип и монохромные иконки нарисованы тёмным по прозрачному. invert возвращает светлое, hue-rotate чинит перевёрнутый оттенок лиловой части. */ --of-logo-filter: invert(1) hue-rotate(180deg); --of-media-dim: brightness(.88); color-scheme: dark; } /* Системная тема: та же палитра, но применяется только когда пользователь явно ничего не выбрал (data-theme="system"). */ @media (prefers-color-scheme: dark) { html[data-theme="system"] { --of-bg: #14161a; --of-bg-alt: #14161a; --of-surface: #1c1f25; --of-surface-2: #23272e; --of-ink: #e6e8eb; --of-ink-soft: #b6bcc4; --of-muted: #949ba5; --of-line: #23262c; --of-line-strong: #30353d; --of-placeholder: #2b2f36; --of-accent: #b79bba; --of-accent-ink: #1c1f25; --of-red: #ff5a60; --of-shadow: none; --of-logo-filter: invert(1) hue-rotate(180deg); --of-media-dim: brightness(.88); color-scheme: dark; } } /* ============================================================ Bootstrap 5: переопределяем его собственные переменные. Одним блоком закрывается основная масса — типографика, таблицы, формы, карточки, дропдауны, модалки. ============================================================ */ html[data-theme="dark"], html[data-theme="system"] { --bs-body-bg: var(--of-surface); --bs-body-bg-rgb: 28, 31, 37; --bs-body-color: var(--of-ink); --bs-body-color-rgb: 230, 232, 235; --bs-emphasis-color: #fff; --bs-secondary-color: var(--of-muted); --bs-secondary-bg: var(--of-surface-2); --bs-tertiary-color: var(--of-muted); --bs-tertiary-bg: var(--of-surface-2); --bs-border-color: var(--of-line); --bs-border-color-translucent: rgba(255, 255, 255, .12); --bs-link-color: var(--of-accent); --bs-link-hover-color: #d0bbd2; --bs-heading-color: var(--of-ink); } /* ============================================================ Каркас сайта. Здесь перечислено ровно то, где в легаси стоят литеральные цвета, — каждый селектор сверен с custom.css. ============================================================ */ /* Селекторы с data-theme, а не голые: homepage.css и build/app.css грузятся ПОСЛЕ темы и заново красят body, .section и .header в светлое. Порядком их не перебить — только специфичностью. */ html[data-theme="dark"] body, html[data-theme="system"] body { background-color: var(--of-bg); color: var(--of-ink); } html[data-theme="dark"] .content .container, html[data-theme="system"] .content .container { /* в custom.css стоит !important, поэтому и здесь он нужен */ background-color: var(--of-bg-alt) !important; } html[data-theme="dark"] .section, html[data-theme="system"] .section { background-color: var(--of-surface); color: var(--of-ink); } /* app.js-бандл (build/app.css) грузится после темы и заново красит шапку в белый, поэтому здесь нужен селектор с data-theme — он перебивает по специфичности, а не по порядку. */ html[data-theme="dark"] .header, html[data-theme="system"] .header { background-color: var(--of-surface); /* серая тень из custom.css на тёмном выглядит грязным ореолом */ box-shadow: 0 1px 0 var(--of-line) !important; } /* Полоски «бургера» в бандле нарисованы чёрным */ html[data-theme="dark"] .header .menu-bars span, html[data-theme="system"] .header .menu-bars span { background-color: var(--of-ink); } html[data-theme="dark"] .footer, html[data-theme="system"] .footer, html[data-theme="dark"] .sidebar, html[data-theme="system"] .sidebar { background-color: var(--of-surface); color: var(--of-ink); } /* Логотип и монохромные иконки шапки */ html[data-theme="dark"] .header img[src*="ofside-logo"], html[data-theme="system"] .header img[src*="ofside-logo"] { filter: var(--of-logo-filter); } html[data-theme="dark"] .search-link, html[data-theme="system"] .search-link { /* иконка поиска — чёрный SVG фоном, перекрасить можно только фильтром */ filter: invert(1) brightness(1.4); } /* Меню рубрик и ссылки новостей */ html[data-theme="dark"] .category-menu__link, html[data-theme="system"] .category-menu__link { color: var(--of-ink-soft); } html[data-theme="dark"] .category-menu__link--active, html[data-theme="system"] .category-menu__link--active { color: var(--of-accent); } /* Разделители лент новостей: в custom.css это #f0f0f0 */ html[data-theme="dark"] .news.news--border, html[data-theme="system"] .news.news--border { border-bottom-color: var(--of-line); } html[data-theme="dark"] .result-table .item, html[data-theme="system"] .result-table .item { border-bottom-color: var(--of-line) !important; } /* Точка после заголовка секции — фирменный лиловый из custom.css */ html[data-theme="dark"] .section-header__title:after, html[data-theme="system"] .section-header__title:after { color: var(--of-accent) !important; } /* Фотографии на тёмном бьют по глазам — приглушаем, при наведении возвращаем полную яркость */ html[data-theme="dark"] .news img, html[data-theme="system"] .news img, html[data-theme="dark"] .news-view img, html[data-theme="system"] .news-view img { filter: var(--of-media-dim); } html[data-theme="dark"] .news a:hover img, html[data-theme="system"] .news a:hover img { filter: none; } /* ============================================================ Разделы на собственных переменных — КПЛ и ММА. Тут работы на пару строк: перекрываем их токены. ============================================================ */ html[data-theme="dark"] .kpl, html[data-theme="system"] .kpl { --kpl-red: var(--of-red); --kpl-ink: var(--of-ink); --kpl-gray: var(--of-muted); --kpl-line: var(--of-line); --kpl-soft: var(--of-surface-2); --kpl-green: #35c46a; --kpl-yellow: #ffc93c; } html[data-theme="dark"] .mma, html[data-theme="system"] .mma, html[data-theme="dark"] .mma-side, html[data-theme="system"] .mma-side { --mma-red: var(--of-red); --mma-ink: var(--of-ink); --mma-gray: var(--of-muted); --mma-line: var(--of-line); --mma-soft: var(--of-surface-2); } /* ============================================================ Личный кабинет ============================================================ */ html[data-theme="dark"] .pc-card, html[data-theme="system"] .pc-card, html[data-theme="dark"] .pc-side, html[data-theme="system"] .pc-side { background-color: var(--of-surface); border-color: var(--of-line); color: var(--of-ink); } html[data-theme="dark"] .pc-input, html[data-theme="system"] .pc-input { background-color: var(--of-surface-2); border-color: var(--of-line-strong); color: var(--of-ink); } html[data-theme="dark"] .pc-field__label, html[data-theme="system"] .pc-field__label { color: var(--of-muted); } /* Выпадающее меню профиля и кнопка входа (bookmarks.css) */ html[data-theme="dark"] .profile-menu__drop, html[data-theme="system"] .profile-menu__drop { background-color: var(--of-surface); border-color: var(--of-line); color: var(--of-ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); } html[data-theme="dark"] .profile-menu__item:hover, html[data-theme="system"] .profile-menu__item:hover { background-color: var(--of-surface-2); } html[data-theme="dark"] .fr-login-btn, html[data-theme="system"] .fr-login-btn { color: var(--of-ink); border-color: var(--of-line-strong); } /* ============================================================ Переключатель темы в шапке ============================================================ */ .of-theme { position: relative; display: flex; align-items: center; } .of-theme__btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--of-ink-soft); cursor: pointer; } .of-theme__btn:hover { background: var(--of-surface-2); color: var(--of-accent); } .of-theme__btn svg { width: 18px; height: 18px; } /* Показываем ту иконку, что соответствует активному режиму */ .of-theme__ic { display: none; } html[data-theme="light"] .of-theme__ic--light, html[data-theme="dark"] .of-theme__ic--dark, html[data-theme="system"] .of-theme__ic--system { display: block; } .of-theme__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; min-width: 190px; padding: 6px; border: 1px solid var(--of-line); border-radius: 10px; background: var(--of-surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } html[data-theme="dark"] .of-theme__menu, html[data-theme="system"] .of-theme__menu { box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } .of-theme__menu[hidden] { display: none; } .of-theme__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--of-ink); font-size: 14px; text-align: left; cursor: pointer; } .of-theme__opt:hover { background: var(--of-surface-2); } .of-theme__opt[aria-checked="true"] { color: var(--of-accent); font-weight: 500; } .of-theme__opt svg { width: 16px; height: 16px; flex: none; } /* Галочка активного варианта */ .of-theme__tick { margin-left: auto; opacity: 0; } .of-theme__opt[aria-checked="true"] .of-theme__tick { opacity: 1; } /* ============================================================ Легаси-цвета, прибитые гвоздями ============================================================ Список собран не на глаз, а разбором всех подключаемых стилей (custom.css, critical.css, build/app.css, homepage, login) на правила с color: #000 и color: #87668a. Если добавится новый бандл — прогнать разбор заново, иначе текст окажется чёрным по тёмному. AMP-страницы сюда не входят: у них своя base.amp.twig без переключателя, и тема им не подключается. ============================================================ */ /* Тёмный текст → основной цвет темы */ html[data-theme="dark"] .news__link, html[data-theme="system"] .news__link, html[data-theme="dark"] .news__link:hover, html[data-theme="system"] .news__link:hover, html[data-theme="dark"] .section-video .news__link, html[data-theme="system"] .section-video .news__link, html[data-theme="dark"] .today-tags__header, html[data-theme="system"] .today-tags__header, html[data-theme="dark"] .news-view .reaction__item, html[data-theme="system"] .news-view .reaction__item, html[data-theme="dark"] .news-view .reaction__vote, html[data-theme="system"] .news-view .reaction__vote, html[data-theme="dark"] .ga-sub2 a, html[data-theme="system"] .ga-sub2 a { color: var(--of-ink); } /* Таблица результатов: место и очки */ html[data-theme="dark"] .result-table .item__position, html[data-theme="system"] .result-table .item__position, html[data-theme="dark"] .result-table .item__total, html[data-theme="system"] .result-table .item__total { color: var(--of-ink); } /* Автор материала и теги — вторичный текст */ html[data-theme="dark"] .news-view .author__link, html[data-theme="system"] .news-view .author__link, html[data-theme="dark"] .news-view .author__link:hover, html[data-theme="system"] .news-view .author__link:hover { color: var(--of-ink-soft); } /* Селектор тега в custom.css — четыре класса, поэтому и здесь перечислены все: иначе не перебить по специфичности */ html[data-theme="dark"] a.tag__link.lg-mr-10.lg-mb-5, html[data-theme="system"] a.tag__link.lg-mr-10.lg-mb-5 { color: var(--of-ink); background-color: var(--of-surface-2); } html[data-theme="dark"] span.prize, html[data-theme="system"] span.prize { color: var(--of-ink); } /* Фирменный лиловый → осветлённый вариант */ html[data-theme="dark"] .result-table__header, html[data-theme="system"] .result-table__header, html[data-theme="dark"] .news-view .reaction__title, html[data-theme="system"] .news-view .reaction__title, html[data-theme="dark"] .news-view .reaction__message, html[data-theme="system"] .news-view .reaction__message, html[data-theme="dark"] .news-view .tags__title, html[data-theme="system"] .news-view .tags__title, html[data-theme="dark"] .news-view .next-prev-news__title, html[data-theme="system"] .news-view .next-prev-news__title, html[data-theme="dark"] h4.parth4, html[data-theme="system"] h4.parth4, html[data-theme="dark"] .el-button--info, html[data-theme="system"] .el-button--info { color: var(--of-accent); } html[data-theme="dark"] span.news__category.news__category, html[data-theme="system"] span.news__category.news__category { color: var(--of-accent); } html[data-theme="dark"] span.cattit:after, html[data-theme="system"] span.cattit:after, html[data-theme="dark"] span.cattit2:after, html[data-theme="system"] span.cattit2:after, html[data-theme="dark"] .content__title:after, html[data-theme="system"] .content__title:after { color: var(--of-accent); } /* Плашки Bootstrap text-bg-*: светлый фон остаётся светлым, поэтому текст на них должен остаться тёмным — не трогаем. */ /* ============================================================ Табло КПЛ в шапке и полосы шапки ============================================================ .kpl-board лежит вне блока .kpl, поэтому переменные --kpl-* до него не достают — цвета заданы прямо в правиле kpl.css. ============================================================ */ html[data-theme="dark"] .head2, html[data-theme="system"] .head2, html[data-theme="dark"] .head3, html[data-theme="system"] .head3 { background-color: var(--of-surface); } html[data-theme="dark"] .kpl-board, html[data-theme="system"] .kpl-board { background: var(--of-surface); color: var(--of-ink); border-top-color: var(--of-line); } html[data-theme="dark"] .kpl-board__tag, html[data-theme="system"] .kpl-board__tag, html[data-theme="dark"] .kpl-bscore, html[data-theme="system"] .kpl-bscore { border-right-color: var(--of-line); } html[data-theme="dark"] .kpl-board__league, html[data-theme="system"] .kpl-board__league, html[data-theme="dark"] .kpl-bscore, html[data-theme="system"] .kpl-bscore { color: var(--of-ink); } html[data-theme="dark"] .kpl-board__round, html[data-theme="system"] .kpl-board__round, html[data-theme="dark"] .kpl-bscore__soon, html[data-theme="system"] .kpl-bscore__soon { color: var(--of-muted); } /* Победный счёт — зелёный, на тёмном берём светлее */ html[data-theme="dark"] .kpl-bscore__n--w, html[data-theme="system"] .kpl-bscore__n--w { color: #35c46a; } /* ============================================================ Светлые подложки легаси ============================================================ Список собран разбором всех стилей на background: #fff и родственные светлые значения — не по одному найденному пятну. Осознанно НЕ трогаем: футбольное поле (.kpl-pitch__*, белая форма хозяев — это цвет формы, а не подложка), кнопку на градиентном баннере (.kpl-banner__cta) и бренд-плашку тиктока. ============================================================ */ /* Карточки и панели → цвет поверхности */ html[data-theme="dark"] .top-bk1, html[data-theme="system"] .top-bk1, html[data-theme="dark"] .adv-block, html[data-theme="system"] .adv-block, html[data-theme="dark"] a.sideLogo, html[data-theme="system"] a.sideLogo, html[data-theme="dark"] .section-video .container, html[data-theme="system"] .section-video .container, html[data-theme="dark"] .off-canvas, html[data-theme="system"] .off-canvas, html[data-theme="dark"] .kpl-fab, html[data-theme="system"] .kpl-fab, html[data-theme="dark"] .kpl-sheet__panel, html[data-theme="system"] .kpl-sheet__panel, html[data-theme="dark"] .mma-sheet__panel, html[data-theme="system"] .mma-sheet__panel, html[data-theme="dark"] .kpl-slider__nav, html[data-theme="system"] .kpl-slider__nav, html[data-theme="dark"] .kpl-rpick__btn, html[data-theme="system"] .kpl-rpick__btn, html[data-theme="dark"] .kpl-rpick__pop, html[data-theme="system"] .kpl-rpick__pop, html[data-theme="dark"] .kpl-tsheet__btn--ghost, html[data-theme="system"] .kpl-tsheet__btn--ghost, html[data-theme="dark"] .mma-sheet__btn--ghost, html[data-theme="system"] .mma-sheet__btn--ghost, html[data-theme="dark"] .el-button, html[data-theme="system"] .el-button { background-color: var(--of-surface); color: var(--of-ink); } /* Прогноз эксперта в карточке матча — самое заметное белое пятно на страницах КПЛ: он лежит внутри уже тёмной карточки */ html[data-theme="dark"] .kpl-match__pr, html[data-theme="system"] .kpl-match__pr { background: var(--of-surface-2); border-left-color: var(--of-accent); } html[data-theme="dark"] .kpl-match__pr-text, html[data-theme="system"] .kpl-match__pr-text { color: var(--of-ink-soft); } html[data-theme="dark"] .kpl-match__pr-cap, html[data-theme="system"] .kpl-match__pr-cap { color: var(--of-accent); } html[data-theme="dark"] .kpl-match__pr-role, html[data-theme="system"] .kpl-match__pr-role { color: var(--of-muted); } /* Мягкие вложенные плашки → на ступень светлее поверхности */ html[data-theme="dark"] .kpl-bio__item, html[data-theme="system"] .kpl-bio__item, html[data-theme="dark"] .mma-bio__i, html[data-theme="system"] .mma-bio__i, html[data-theme="dark"] .kpl-exp-card, html[data-theme="system"] .kpl-exp-card, html[data-theme="dark"] .kpl-expl__card, html[data-theme="system"] .kpl-expl__card, html[data-theme="dark"] .kpl-event__min, html[data-theme="system"] .kpl-event__min, html[data-theme="dark"] .today-tags, html[data-theme="system"] .today-tags, html[data-theme="dark"] .undertxt-adv, html[data-theme="system"] .undertxt-adv, html[data-theme="dark"] .undernews-adv-div2, html[data-theme="system"] .undernews-adv-div2, html[data-theme="dark"] .google-auto-placed, html[data-theme="system"] .google-auto-placed, html[data-theme="dark"] .form-signin .form-control, html[data-theme="system"] .form-signin .form-control { background-color: var(--of-surface-2); color: var(--of-ink); } /* Наведение на строки списков */ html[data-theme="dark"] .kpl-bscore:hover, html[data-theme="system"] .kpl-bscore:hover, html[data-theme="dark"] .kpl-prev__row:hover, html[data-theme="system"] .kpl-prev__row:hover, html[data-theme="dark"] .kpl-h2h__row:hover, html[data-theme="system"] .kpl-h2h__row:hover { background: var(--of-surface-2); } /* Заглушки фото: аватары игроков, экспертов, лица в списках. Это подложка под картинку — на тёмном она светится сильнее самой карточки, поэтому отдельный токен. */ html[data-theme="dark"] .kpl-face, html[data-theme="system"] .kpl-face, html[data-theme="dark"] .kpl-match__pr-ava, html[data-theme="system"] .kpl-match__pr-ava, html[data-theme="dark"] .kpl-expr__ava, html[data-theme="system"] .kpl-expr__ava, html[data-theme="dark"] .kpl-exp-card__ava, html[data-theme="system"] .kpl-exp-card__ava, html[data-theme="dark"] .kpl-exph__ava, html[data-theme="system"] .kpl-exph__ava, html[data-theme="dark"] .kpl-expl__ava, html[data-theme="system"] .kpl-expl__ava, html[data-theme="dark"] .kpl-expp__v--wait, html[data-theme="system"] .kpl-expp__v--wait { background: var(--of-placeholder); } /* Страница-«карточка» (правила, контакты и подобные) */ html[data-theme="dark"] .container.page, html[data-theme="system"] .container.page { background-color: var(--of-surface); color: var(--of-ink); } /* Кнопки подписки на пуши */ html[data-theme="dark"] .sub-bell, html[data-theme="system"] .sub-bell, html[data-theme="dark"] .wpush-bell, html[data-theme="system"] .wpush-bell { background-color: var(--of-surface-2); color: var(--of-ink); border-color: var(--of-line-strong); } /* body: правило каркаса выше перебивается бандлами на части страниц, поэтому здесь фон закрепляется жёстко */ html[data-theme="dark"] body, html[data-theme="system"] body { background-color: var(--of-bg) !important; } /* ============================================================ Переменные разделов — ещё и на уровне html ============================================================ Токены --kpl-* и --mma-* объявлены на .kpl и .mma. Блоки, лежащие вне этих обёрток (табло в шапке, подписи в сайдбаре, нижние шиты), брали значения ниоткуда и оставались светлыми. Дублируем объявления на html: внутри обёрток выигрывает .kpl/.mma, снаружи — эти. ============================================================ */ html[data-theme="dark"], html[data-theme="system"] { --kpl-red: var(--of-red); --kpl-ink: var(--of-ink); --kpl-gray: var(--of-muted); --kpl-line: var(--of-line); --kpl-soft: var(--of-surface-2); --kpl-green: #35c46a; --kpl-yellow: #ffc93c; --mma-red: var(--of-red); --mma-ink: var(--of-ink); --mma-gray: var(--of-muted); --mma-line: var(--of-line); --mma-soft: var(--of-surface-2); } /* ============================================================ Тёмный текст внутри разделов ============================================================ Собрано разбором kpl.css и mma.css на литеральные #212529, #222, #333 и #000 — эти места переменных не используют. ============================================================ */ html[data-theme="dark"] .kpl-fab, html[data-theme="system"] .kpl-fab, html[data-theme="dark"] .kpl-tsheet__src svg, html[data-theme="system"] .kpl-tsheet__src svg, html[data-theme="dark"] .kpl-prev__row, html[data-theme="system"] .kpl-prev__row, html[data-theme="dark"] .kpl-h2h__row, html[data-theme="system"] .kpl-h2h__row, html[data-theme="dark"] .kpl-rpick__btn, html[data-theme="system"] .kpl-rpick__btn, html[data-theme="dark"] .kpl-rpick__i, html[data-theme="system"] .kpl-rpick__i, html[data-theme="dark"] .kpl-expp__m a, html[data-theme="system"] .kpl-expp__m a, html[data-theme="dark"] .kpl-expp__score, html[data-theme="system"] .kpl-expp__score, html[data-theme="dark"] .kpl-expl__card, html[data-theme="system"] .kpl-expl__card, html[data-theme="dark"] a.mma-sheet__btn.mma-sheet__btn--ghost, html[data-theme="system"] a.mma-sheet__btn.mma-sheet__btn--ghost, html[data-theme="dark"] .mma-sub b, html[data-theme="system"] .mma-sub b { color: var(--of-ink); } /* Аватары бойцов: та же подложка, что у футбольных */ html[data-theme="dark"] .mma-ava, html[data-theme="system"] .mma-ava { background: var(--of-placeholder); } /* Номер позиции в карточке рейтинга */ html[data-theme="dark"] .mma-rankcard__pos, html[data-theme="system"] .mma-rankcard__pos { background: var(--of-surface-2); } /* Плашку чемпиона (кремовая с золотой буквой) оставляем как есть: это знак пояса, он и должен выделяться на тёмной карточке. */