/*! * Dark theme — переключаемая тёмная тема для syndicate-it.ru * * Переключение через атрибут `data-theme` на : * — тёмная тема * — светлая (по умолчанию, атрибут может отсутствовать) * * Использует CSS custom properties — не требует !important повсюду, * но для перебития stock H-Code стилей (style.min.css) применяются * селекторы с высокой специфичностью и `!important` где это неизбежно. * * Все переходы окраски плавные (transition 0.3s) — нет "мигания" при переключении. */ /* ========================================================================== 1. CSS-переменные (палитра) ========================================================================== */ :root { /* Светлая тема (по умолчанию) */ --dt-bg: #ffffff; --dt-bg-alt: #f7f7f7; --dt-bg-soft: #f0f0f0; --dt-bg-yellow: #fed136; /* акцент — H-Code fast-yellow */ --dt-text: #333333; --dt-text-soft: #666666; --dt-text-muted: #888888; --dt-text-heading: #222222; --dt-link: #333333; --dt-link-hover: #fed136; --dt-border: #e0e0e0; --dt-nav-bg: #ffffff; --dt-nav-bg-transparent: rgba(255, 255, 255, 0.95); --dt-nav-text: #333333; --dt-nav-border: rgba(0, 0, 0, 0.07); --dt-card-bg: #ffffff; --dt-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); --dt-overlay: rgba(0, 0, 0, 0.4); --dt-counter-bg: #2b2b2b; --dt-footer-bg: #ffffff; --dt-footer-text: #333333; --dt-footer-bottom-bg: #2b2b2b; --dt-footer-bottom-text: #999999; --dt-section-alt: #f5f5f5; --dt-tile-bg: #ffffff; --dt-tab-active-bg: #ffffff; --dt-thead-bg: #f5f5f5; --dt-input-bg: #ffffff; --dt-input-border: #cccccc; --dt-input-text: #333333; --dt-toggle-bg: rgba(255, 255, 255, 0.15); --dt-toggle-color: #ffffff; --dt-toggle-border: rgba(255, 255, 255, 0.4); /* Прозрачный навбар поверх видео — сохраняется в обеих темах */ --dt-nav-overlay-text: #ffffff; /* Переходы */ --dt-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } [data-theme="dark"] { /* Тёмная тема */ --dt-bg: #121417; --dt-bg-alt: #1a1d22; --dt-bg-soft: #1f2329; --dt-bg-yellow: #fed136; /* жёлтый акцент остаётся — фирменный цвет */ --dt-text: #e6e8eb; --dt-text-soft: #b0b5bc; --dt-text-muted: #888f97; --dt-text-heading: #f1f3f5; --dt-link: #e6e8eb; --dt-link-hover: #fed136; --dt-border: #2a2f36; --dt-nav-bg: #16191e; --dt-nav-bg-transparent: rgba(22, 25, 30, 0.92); --dt-nav-text: #e6e8eb; --dt-nav-border: rgba(255, 255, 255, 0.08); --dt-card-bg: #1a1d22; --dt-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --dt-overlay: rgba(0, 0, 0, 0.65); --dt-counter-bg: #0c0e10; --dt-footer-bg: #16191e; --dt-footer-text: #b0b5bc; --dt-footer-bottom-bg: #0c0e10; --dt-footer-bottom-text: #6c727a; --dt-section-alt: #16191e; --dt-tile-bg: #1a1d22; --dt-tab-active-bg: #1a1d22; --dt-thead-bg: #1a1d22; --dt-input-bg: #1a1d22; --dt-input-border: #3a3f46; --dt-input-text: #e6e8eb; --dt-toggle-bg: rgba(255, 255, 255, 0.08); --dt-toggle-color: #e6e8eb; --dt-toggle-border: rgba(255, 255, 255, 0.2); } /* ========================================================================== 2. Базовые элементы — body, текст, фон ========================================================================== */ html[data-theme="dark"] body { background-color: var(--dt-bg); color: var(--dt-text); transition: var(--dt-transition); } body { transition: var(--dt-transition); } /* Заголовки */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--dt-text-heading); } [data-theme="dark"] h1 a, [data-theme="dark"] h2 a, [data-theme="dark"] h3 a, [data-theme="dark"] h4 a, [data-theme="dark"] h5 a, [data-theme="dark"] h6 a { color: var(--dt-text-heading); } [data-theme="dark"] p { color: var(--dt-text-soft); } /* ========================================================================== 3. Навигация (top navbar) ========================================================================== */ /* Светлый (непрозрачный) навбар — на внутренних страницах */ [data-theme="dark"] .navbar-default { background-color: var(--dt-nav-bg) !important; border-color: var(--dt-nav-border) !important; } [data-theme="dark"] .navbar-default .navbar-nav > li > a { color: var(--dt-nav-text) !important; } [data-theme="dark"] .navbar-default .navbar-nav > li > a:hover, [data-theme="dark"] .navbar-default .navbar-nav > li > a:focus, [data-theme="dark"] .navbar-default .navbar-nav > li.active > a, [data-theme="dark"] .navbar-default .navbar-nav > li.selected > a, [data-theme="dark"] .navbar-default .navbar-nav > .active > a { color: var(--dt-link-hover) !important; } /* H-Code делает border-bottom активного пункта чёрным (#000, style.css:438). В dark теме это не видно. Подменяем на жёлтый (как при hover) — единый акцент. */ [data-theme="dark"] .navbar-nav li a.active { border-bottom: 2px solid var(--dt-bg-yellow) !important; } /* Главная (/) в dark теме — прозрачный навбар над hero-видео (как в светлой теме). При скролле H-Code JS добавляет .shrink-nav — навбар становится тёмным (аналогично светлой теме, где на .shrink-nav фон становится белым). Условие :not(.bg-white) — для /contacts/ и подобных, где навбар всегда белый/dark. */ [data-theme="dark"] .navbar.nav-transparent:not(.bg-white):not(.shrink-nav) { background-color: transparent !important; } [data-theme="dark"] .navbar.nav-transparent .navbar-nav > li > a, [data-theme="dark"] .navbar.nav-white .navbar-nav > li > a, [data-theme="dark"] .navbar.overlay-nav .navbar-nav > li > a { color: #ffffff !important; } [data-theme="dark"] .navbar.nav-transparent .navbar-nav > li > a:hover, [data-theme="dark"] .navbar.nav-white .navbar-nav > li > a:hover { color: var(--dt-link-hover) !important; } /* При скролле — подсветка активного состояния */ [data-theme="dark"] .navbar-default.sticky-nav-active { background-color: var(--dt-nav-bg-transparent) !important; border-bottom: 1px solid var(--dt-nav-border) !important; } [data-theme="dark"] .navbar-default.sticky-nav-active .navbar-nav > li > a { color: var(--dt-nav-text) !important; } /* Светлая тема — поведение логотипа как у H-Code (по умолчанию): на прозрачном/тёмном навбаре — белый логотип; на непрозрачном светлом (и на bg-white, который встречается вместе с nav-transparent в hcode_page/hcode_catalog/hcode на /contacts/) — тёмный/цветной. !important — против любых stock-override и кеша. H-Code stock CSS содержит: .shrink-nav .logo-light, .sticky-nav .logo-dark { opacity: 0; display: none; } Класс .sticky-nav на навбаре присутствует всегда, поэтому .logo-dark ВСЕГДА скрыт через opacity:0. Нужно явно поднимать opacity:1 при показе. */ :root .logo-light, :root .logo-dark { display: block; opacity: 1; } .navbar-default:not(.nav-transparent) .logo-light, .navbar-default.bg-white .logo-light { display: none !important; } .navbar-default:not(.nav-transparent) .logo-dark, .navbar-default.bg-white .logo-dark { display: block !important; opacity: 1 !important; } /* На главной (прозрачный навбар с nav-white) — дополнительно гасим opacity белого */ :root:not([data-theme="dark"]) .navbar.nav-transparent.nav-white .logo-light { display: block !important; opacity: 1 !important; } :root:not([data-theme="dark"]) .navbar.nav-transparent.nav-white .logo-dark { display: none !important; opacity: 0 !important; } /* Главная при СКРОЛЛЕ: H-Code JS добавляет .shrink-nav, фон становится белым (style.css:428 .shrink-nav { background-color:#FFF }). Чтобы белый логотип не сливался с белым фоном — ПЕРЕКЛЮЧАЕМ на цветной (.logo-dark). Это оригинальная логика H-Code (style.css:434-436), но мои вышестоящие правила с !important её перебивают — восстанавливаем. */ :root:not([data-theme="dark"]) .navbar.nav-transparent.nav-white.shrink-nav .logo-light { display: none !important; opacity: 0 !important; } :root:not([data-theme="dark"]) .navbar.nav-transparent.nav-white.shrink-nav .logo-dark { display: block !important; opacity: 1 !important; } /* В тёмной теме — белый виден, цветной скрыт */ [data-theme="dark"] .navbar .logo-light { display: block !important; opacity: 1 !important; } [data-theme="dark"] .navbar .logo-dark { display: none !important; opacity: 0 !important; } /* ========================================================================== 3b. Нормализация отступов navbar (одинаково везде) ========================================================================== */ /* H-Code stock CSS на прозрачном навбаре с классом nav-white "прижимает" содержимое к верху (row.top=0) → логотип выглядит "зажатым". В тёмной теме навбар всегда «заполнен» фоном и row.top=12. Нормализуем: row получает одинаковый padding во всех темах и страницах. */ .navbar-default > .container > .row { padding-top: 12px !important; padding-bottom: 12px !important; } /* Дополнительно — на прозрачном навбаре (главная поверх hero-видео) не нужна лишняя высота навбара в светлой теме. */ .navbar.nav-transparent > .container > .row { padding-top: 14px !important; padding-bottom: 14px !important; } /* Иконка поиска */ [data-theme="dark"] .navbar-default .header-search-form .search-button, [data-theme="dark"] .navbar.nav-transparent .header-search-form .search-button { color: var(--dt-nav-text); } /* Кнопка-бургер (мобильное меню) */ [data-theme="dark"] .navbar-default .navbar-toggle .icon-bar, [data-theme="dark"] .navbar.nav-transparent .navbar-toggle .icon-bar { background-color: var(--dt-nav-text); } /* ========================================================================== 4. Switcher-переключатель темы в меню (горизонтальный slider) ========================================================================== */ /* li-обёртка — flex-контейнер с track по центру. !important на display/align-items — Bootstrap «navbar-nav > li { float: left }» и reset где-то перебивают inline-flex на block. Через !important гарантируем вертикальное центрирование трека внутри li. margin-top: 10px — как у обычных li (Bootstrap .navbar-nav > li { margin: 10px 17px }). padding: 7px 0 8px — высота li 35px (трек 20 + padding 15), как у пунктов меню. Подбор по визуальному центру ползунка (thumb 16×16 смещён на 1px от верха трека), а не по геометрическому центру трека — иначе из-за асимметричной иконки (слева) трек визуально «свисает» ниже текста. Замер 2026-08-01 на проде: cap-центр «У» в меню = y 41, центр thumb 16px при padding-top:7/bot:8 = y 41.67 (Δ 0.67px ниже, визуально в линии с текстом). Суммарный padding 15 + трек 20 = 35 (без изменений высоты li). */ .theme-toggle-item { display: inline-flex !important; align-items: center !important; margin: 10px 0 0 8px !important; padding: 7px 0 8px !important; line-height: 1 !important; list-style: none; height: auto; vertical-align: middle; } /* Уменьшаем горизонтальные отступы пунктов меню с 17px до 12px. При 7 пунктах меню + theme-toggle-item это экономит ~70px и переключатель помещается в строку (был перенос на 2-ю строку, потому что lastLi.r + item.width > ul.r на 13px). 10px по вертикали оставляем — иначе текст пунктов «прижимается» к трек-бордеру. */ .navbar-default .navbar-nav > li { margin-left: 12px !important; margin-right: 12px !important; } .theme-toggle-item .theme-switcher { background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 1; display: inline-block; outline: none; } /* Дорожка — 36×20 (уменьшено с 48×26, чтобы соответствовать высоте строки пунктов меню и не «торчать» над хедером). На светлом непрозрачном навбаре — тёмная дорожка с явным контуром (rgba 0.22 — заметно на белом фоне, но не агрессивно). На прозрачном (главная) — полупрозрачная белая — задаётся ниже. */ .theme-switcher-track { position: relative; display: block; width: 36px; height: 20px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 10px; transition: background 0.3s ease, border-color 0.3s ease; } /* Ползунок (thumb) — 16×16 (уменьшено с 20×20), слева в светлой теме (предлагает перейти в тёмную). Иконка — moon-o. */ .theme-switcher-thumb { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, color 0.3s ease, transform 0.3s ease; font-size: 9px; line-height: 1; color: #f39c12; /* sun-оранжевый — иконка луны на белом */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .theme-switcher-thumb [data-theme-icon] { line-height: 1; pointer-events: none; } /* === Тёмная тема: ползунок справа, жёлтая дорожка, иконка солнца === */ [data-theme="dark"] .theme-switcher-track { background: var(--dt-bg-yellow); border-color: rgba(0, 0, 0, 0.15); } [data-theme="dark"] .theme-switcher-thumb { left: calc(100% - 17px); background: #1a1a1a; color: #f1c40f; } /* === Прозрачный навбар (главная поверх видео) — белая дорожка. Исключение :not(.bg-white) — в hcode_page/hcode_catalog/hcode на /contacts/ навбар несёт ОБА класса (nav-transparent + bg-white), но реально фон белый; для них нужны тёмные стили дорожки. */ .navbar.nav-transparent:not(.sticky-nav-active):not(.bg-white) .theme-switcher-track { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.55); } .navbar.nav-transparent:not(.sticky-nav-active):not(.bg-white) .theme-switcher-thumb { background: #ffffff; color: #f39c12; } /* В тёмной теме на прозрачном навбаре — жёлтая дорожка + тёмный ползунок справа. (Без этих правил базовые transparent-стили выше перебивают dark из-за более высокой специфичности.) */ [data-theme="dark"] .navbar.nav-transparent:not(.sticky-nav-active) .theme-switcher-track { background: var(--dt-bg-yellow); border-color: rgba(0, 0, 0, 0.15); } [data-theme="dark"] .navbar.nav-transparent:not(.sticky-nav-active) .theme-switcher-thumb { left: calc(100% - 17px); background: #1a1a1a; color: #f1c40f; } /* Hover: subtle glow */ .theme-switcher:hover .theme-switcher-track { box-shadow: 0 0 0 4px rgba(254, 209, 54, 0.15); } /* Active (нажатие): thumb немного уменьшается */ .theme-switcher:active .theme-switcher-thumb { transform: scale(0.92); } /* Скрытие outline при клике мышью — accessibility сохранена для клавиатуры */ .theme-switcher:focus:not(:focus-visible) { outline: none !important; } /* Мобильное меню (раскрытый accordion) — отступы побольше */ @media (max-width: 991px) { .navbar-nav .theme-toggle-item { display: inline-flex; margin: 10px 5px; } } /* ========================================================================== 5. Секции — общий фон ========================================================================== */ [data-theme="dark"] section, [data-theme="dark"] .page-title-small, [data-theme="dark"] .content-top-margin { background-color: var(--dt-bg); color: var(--dt-text); } [data-theme="dark"] .bg-white { background-color: var(--dt-bg) !important; } [data-theme="dark"] .bg-extra-light-gray, [data-theme="dark"] .bg-gray, [data-theme="dark"] section.bg-gray, [data-theme="dark"] .case-study.bg-gray { background-color: var(--dt-bg-alt) !important; } /* Breadcrumbs */ [data-theme="dark"] .breadcrumb ul li { color: var(--dt-text-muted); } [data-theme="dark"] .breadcrumb ul li a { color: var(--dt-text-soft); } [data-theme="dark"] .breadcrumb ul li a:hover { color: var(--dt-link-hover); } /* Контактные ссылки (tel:, mailto:) — H-Code stock правило `a { color: #000 }` делает их чёрными на тёмных секциях (.contacts-section и подобных с bg-dark). Поднимаем в dark теме до читаемого светлого цвета. */ [data-theme="dark"] a[href^="tel:"], [data-theme="dark"] a[href^="mailto:"] { color: var(--dt-link); } [data-theme="dark"] a[href^="tel:"]:hover, [data-theme="dark"] a[href^="mailto:"]:hover { color: var(--dt-link-hover); } [data-theme="dark"] .page-title-small { border-top-color: var(--dt-border) !important; border-bottom-color: var(--dt-border) !important; } /* ========================================================================== 6. Features / services / work process ========================================================================== */ [data-theme="dark"] .features-section h5, [data-theme="dark"] .work-process-text span, [data-theme="dark"] .corporate-standards-text h1, [data-theme="dark"] .corporate-standards-text p { color: var(--dt-text-heading); } [data-theme="dark"] .features-section p, [data-theme="dark"] .work-process-details span, [data-theme="dark"] .text-med { color: var(--dt-text-soft); } /* Work process — H-Code делает фон details-блока белым (для hover-эффекта). В тёмной теме это даёт нечитаемый светлый текст на белом. Меняем на тёмный. */ [data-theme="dark"] .work-process-details { background-color: var(--dt-bg-alt) !important; } /* Иконка внутри details прижималась к верхней границе блока — добавляем вертикальный padding в обеих темах. */ .work-process-details { padding: 20px 15px; } [data-theme="dark"] .black-text, [data-theme="dark"] .font-weight-600.black-text, [data-theme="dark"] span.black-text, [data-theme="dark"] h1.black-text, [data-theme="dark"] h3.black-text, [data-theme="dark"] h5.black-text { color: var(--dt-text-heading) !important; } /* Исключение: внутри жёлтого блока текст и иконка с .black-text должны оставаться тёмными — иначе светлый текст на жёлтом не читается. (Правило идёт ПОСЛЕ общего .black-text, имеет ту же специфичность, но определено позже — поэтому выигрывает каскад.) */ [data-theme="dark"] .bg-fast-yellow .black-text, [data-theme="dark"] .bg-fast-yellow i.black-text, [data-theme="dark"] .bg-fast-yellow span.black-text, [data-theme="dark"] .bg-fast-yellow [class*="icon-"].black-text { color: #1a1a1a !important; } /* Иконка технической поддержки icon-gears внутри .corporate-standards-text в тёмной теме — на тёмно-сером фоне жёлтый акцент остаётся видимым. Но .yellow-text + фон corporate-standards-text (#1a1d22) дают хороший контраст. */ [data-theme="dark"] .gray-text, [data-theme="dark"] .light-gray-text { color: var(--dt-text-muted) !important; } /* Work process blocks — убран добавленный ранее фон (--dt-bg-alt), чтобы секция имела единый цвет как в светлой теме. */ [data-theme="dark"] .work-process-sub { background-color: transparent; } /* Corporate standards */ /* Corporate standards — высота колонок (img + text) выравнивается через flex. Без этого блок с фоновой картинкой (.corporate-standards-img) схлопывается до высоты контента (часто меньше, чем .corporate-standards-text). */ .corporate-standards .tab-content > .tab-pane > .tab-pane, .corporate-standards .tab-pane > .tab-pane { display: flex; flex-wrap: wrap; } .corporate-standards-img { /* Растягиваем на всю высоту flex-родителя */ align-self: stretch; } /* H-Code ставит .margin-five → margin: ~59px со всех сторон (5% от ширины). На списке табов и контейнере с табами это создаёт слишком большие отступы. Уменьшаем до умеренных 20px. */ .corporate-standards .container-fluid.margin-five, .corporate-standards .nav-tabs.margin-five { margin-top: 20px !important; margin-bottom: 20px !important; } [data-theme="dark"] .corporate-standards-text { background-color: var(--dt-bg-alt); } [data-theme="dark"] .corporate-standards .nav-tabs { border-bottom-color: var(--dt-border); } [data-theme="dark"] .corporate-standards .nav-tabs > li > a { color: var(--dt-text-soft); } [data-theme="dark"] .corporate-standards .nav-tabs > li.active > a { color: var(--dt-text-heading); background-color: var(--dt-bg); border-color: var(--dt-border) var(--dt-border) var(--dt-bg); } /* Иконки в табах corporate-standards — H-Code stock делает активную чёрной (color: #000), а неактивные серыми. В dark теме всё это сливается с фоном. Делаем ВСЕ иконки в табах жёлтыми (брендовый акцент), чтобы были единообразны и видны. Активная/неактивная вкладка различается по фону a-элемента. */ [data-theme="dark"] #animated-tab .nav-tabs > li a i { color: var(--dt-bg-yellow) !important; } /* H-Code ставит border-right последнему табу (style.css:1608) — лишняя линия справа от иконки "Разработка Битрикс24". Убираем. */ #animated-tab .nav-tabs > li:last-child > a { border-right: none !important; } [data-theme="dark"] .corporate-standards-img .opacity-medium.bg-dark-gray { background-color: var(--dt-overlay); } /* ========================================================================== 7. Кнопки (Bootstrap) ========================================================================== */ [data-theme="dark"] .btn.btn-black, [data-theme="dark"] .btn-black { background-color: var(--dt-text-heading) !important; color: var(--dt-bg) !important; } [data-theme="dark"] .btn-small-white, [data-theme="dark"] .highlight-button, [data-theme="dark"] .highlight-button-dark, [data-theme="dark"] .btn-medium { /* сохраняем светлый outline — работает на тёмном фоне */ color: #ffffff !important; border-color: #ffffff !important; background-color: transparent !important; } [data-theme="dark"] .highlight-button-dark { background-color: var(--dt-text-heading) !important; color: var(--dt-bg) !important; border-color: var(--dt-text-heading) !important; } [data-theme="dark"] .highlight-button-dark:hover { background-color: var(--dt-bg-yellow) !important; color: var(--dt-text-heading) !important; border-color: var(--dt-bg-yellow) !important; } [data-theme="dark"] .highlight-link.bg-black { background-color: var(--dt-text-heading) !important; color: var(--dt-bg) !important; } /* ========================================================================== 8. Portfolio / masonry ========================================================================== */ [data-theme="dark"] .portfolio-filter.nav-tabs { border-bottom-color: var(--dt-border); } [data-theme="dark"] .portfolio-filter.nav-tabs > li > a { color: var(--dt-text-soft); } [data-theme="dark"] .portfolio-filter.nav-tabs > li.active > a, [data-theme="dark"] .portfolio-filter.nav-tabs > li > a:hover { color: var(--dt-bg-yellow); background-color: transparent; border-color: transparent transparent var(--dt-bg-yellow); } [data-theme="dark"] .masonry-items figcaption { background-color: var(--dt-bg-alt); } [data-theme="dark"] .masonry-items figcaption h3 a { color: var(--dt-text-heading); } [data-theme="dark"] .masonry-items figcaption h3 a:hover { color: var(--dt-bg-yellow); } [data-theme="dark"] .masonry-items figcaption p { color: var(--dt-text-muted); } /* ========================================================================== 9. Counter / параллакс с фоном ========================================================================== */ [data-theme="dark"] #counter .opacity-full.bg-dark-gray { background-color: var(--dt-overlay) !important; } [data-theme="dark"] .counter-section .counter-title { color: var(--dt-text-muted); } [data-theme="dark"] .fix-background { background-blend-mode: normal; } /* ========================================================================== 10. Highlight (жёлтая полоса) — в тёмной теме менее яркая ========================================================================== */ /* Светлая тема — стандартный брендовый жёлтый */ .bg-fast-yellow { background-color: var(--dt-bg-yellow); } /* Тёмная тема — приглушённый янтарь вместо брендового ярко-жёлтого. #fed136 на тёмном фоне "режет глаза" → уводим в тёплый охра-янтарь. */ [data-theme="dark"] .bg-fast-yellow { background-color: #b88a14 !important; } /* На жёлтой/янтарной полосе текст и иконки должны быть ТЁМНЫМИ в обеих темах — иначе светло-серый текст на янтаре или белый текст на жёлтом не читается. Это перекрывает глобальное правило ".bg-fast-yellow *" ниже. */ [data-theme="dark"] .bg-fast-yellow, [data-theme="dark"] .bg-fast-yellow *, [data-theme="dark"] .bg-fast-yellow .black-text, [data-theme="dark"] .bg-fast-yellow .font-weight-600, [data-theme="dark"] .bg-fast-yellow i { color: #1a1a1a !important; } /* Базовый цвет для светлой темы — тёмный текст на жёлтом */ .bg-fast-yellow *, .bg-fast-yellow .black-text { color: var(--dt-text-heading); } /* Кнопка внутри жёлтой полосы — тёмная с контрастным текстом. (Используется для "О компании" в highlight-секции главной.) */ .bg-fast-yellow .btn, .bg-fast-yellow .highlight-button-dark, [data-theme="dark"] .bg-fast-yellow .btn, [data-theme="dark"] .bg-fast-yellow .highlight-button-dark { background-color: #1a1a1a !important; color: #f5c343 !important; border-color: #1a1a1a !important; } .bg-fast-yellow .btn:hover, .bg-fast-yellow .highlight-button-dark:hover, [data-theme="dark"] .bg-fast-yellow .btn:hover, [data-theme="dark"] .bg-fast-yellow .highlight-button-dark:hover { background-color: #f5c343 !important; color: #1a1a1a !important; border-color: #f5c343 !important; } /* ========================================================================== 10b. Кнопка highlight-button-black-border (новый проект "Заказать") ========================================================================== */ /* В светлой теме у неё по умолчанию чёрная рамка + чёрный текст на белом фоне. В тёмной теме белый фон → тёмный, а чёрная рамка/текст становятся невидимыми. Перекрашиваем в белый с прозрачным фоном. */ [data-theme="dark"] .highlight-button-black-border { color: #ffffff !important; border-color: #ffffff !important; background-color: transparent !important; transition: var(--dt-transition); } [data-theme="dark"] .highlight-button-black-border:hover { color: var(--dt-bg) !important; background-color: var(--dt-bg-yellow) !important; border-color: var(--dt-bg-yellow) !important; } /* ========================================================================== 11. Footer ========================================================================== */ [data-theme="dark"] footer, [data-theme="dark"] .footer-top { background-color: var(--dt-footer-bg) !important; color: var(--dt-footer-text); } /* В светлой теме .footer-top (bg-white) и .footer-middle (наследует body) различаются визуально за счёт border-top + отступов. В тёмной теме оба наследуют почти одинаковый тёмный фон и сливаются — поднимаем .footer-middle на один тон светлее, чтобы восстановить границу между блоками. */ [data-theme="dark"] .footer-middle { background-color: var(--dt-bg-alt); } [data-theme="dark"] .footer-top h6 a, [data-theme="dark"] .footer-top h6 { color: var(--dt-footer-text) !important; } [data-theme="dark"] .footer-middle h5 { color: var(--dt-text-heading); } [data-theme="dark"] .footer-middle p, [data-theme="dark"] .footer-middle .footer-text { color: var(--dt-text-muted); } [data-theme="dark"] .footer-middle ul li a { color: var(--dt-text-soft); } [data-theme="dark"] .footer-middle ul li a:hover { color: var(--dt-bg-yellow); } [data-theme="dark"] .footer-bottom.bg-dark-gray { background-color: var(--dt-footer-bottom-bg) !important; } [data-theme="dark"] .footer-bottom { color: var(--dt-footer-bottom-text); } [data-theme="dark"] .footer-bottom a { color: var(--dt-footer-bottom-text); } [data-theme="dark"] .footer-bottom a:hover { color: var(--dt-bg-yellow); } [data-theme="dark"] .wide-separator-line.bg-mid-gray { background-color: var(--dt-border) !important; } /* ========================================================================== 12. Scroll-to-top + панель Bitrix ========================================================================== */ [data-theme="dark"] .scrollToTop { background-color: var(--dt-bg-yellow); color: var(--dt-text-heading); } [data-theme="dark"] .scrollToTop:hover { background-color: var(--dt-text-heading); color: var(--dt-bg-yellow); } /* ========================================================================== 13. News (hcode_page) — content typography ========================================================================== */ /* Заголовок детальной страницы (.bx-newsdetail-title — H3 вне .bx-newsdetail-content) */ [data-theme="dark"] .bx-newsdetail-title { color: var(--dt-text-heading) !important; } [data-theme="dark"] .bx-newsdetail-content h1, [data-theme="dark"] .bx-newsdetail-content h2, [data-theme="dark"] .bx-newsdetail-content h3, [data-theme="dark"] .bx-newsdetail-content h4 { color: var(--dt-text-heading); } [data-theme="dark"] .bx-newsdetail-content p, [data-theme="dark"] .bx-newsdetail-content li { color: var(--dt-text-soft); } [data-theme="dark"] .bx-newsdetail-content table { background-color: var(--dt-bg-alt); color: var(--dt-text); } /* Tr/td — перебиваем inline bgcolor="#ffffff" и style="background-color:#fff" которые Bitrix HTML-filter иногда сохраняет. !important обязателен. */ [data-theme="dark"] .bx-newsdetail-content table tr, [data-theme="dark"] .bx-newsdetail-content table td { background-color: #1f2329 !important; } /* Чередование фона строк (zebra striping) — каждая чётная строка чуть светлее, как в светлой теме. nth-child считает все tr, включая thead, но thead переопределён в table th → не конфликтует. */ [data-theme="dark"] .bx-newsdetail-content table tr:nth-child(even) td { background-color: #1a1d22 !important; } [data-theme="dark"] .bx-newsdetail-content table th { background-color: var(--dt-thead-bg); color: var(--dt-text-heading); } [data-theme="dark"] .bx-newsdetail-content blockquote { border-left-color: var(--dt-bg-yellow); color: var(--dt-text-soft); background-color: var(--dt-bg-soft); } [data-theme="dark"] .bx-newsdetail-content a { color: var(--dt-bg-yellow); } /* Inline — заметная подсветка на тёмном фоне: - фон светлее body на ~22 единицы (body #121417 → code #262a31) - рамка контрастнее (--dt-input-border) - font-size: 14px !important перебивает inline size="-1" от HTML-filter. В светлой теме стили берутся из news-content.css. */ [data-theme="dark"] .bx-newsdetail-content code { background-color: #262a31 !important; color: #fed136 !important; border-color: #3a3f46 !important; font-size: 14px !important; } [data-theme="dark"] .bx-newsdetail-content pre { background-color: #1a1d22; color: var(--dt-text); border-color: var(--dt-border); } [data-theme="dark"] .bx-newsdetail-content pre code { background-color: transparent !important; color: var(--dt-text) !important; } /* Страница /tariffs/ — "привилегия" (помечена классом .dt-highlight в HTML) в dark теме должна быть жёлтой и жирнее остальных (как брендовый акцент). "эксклюзив" (.dt-exclusive) — красный, как в светлой теме (inline style="color:red"). */ [data-theme="dark"] .dt-highlight { color: var(--dt-bg-yellow) !important; font-weight: 800 !important; } [data-theme="dark"] .dt-exclusive { /* В светлой теме inline style="color:red" → красный. В dark теме мой !important выше не перебивал из-за узкого селектора. Дополнительно делаем font-weight bold для выделения премиум-тарифа. */ font-weight: 700 !important; } /* ========================================================================== 13b. News list + пагинация (.bx-newslist) ========================================================================== */ /* Карточки новостей: одинаковая высота + отступы + вертикальный gap. Bitrix без flexbox рендерит карточки разной высоты (514/469/547) → row становится flex + align-items:stretch (карточки выравниваются), .container flex заставляет .block растягиваться, .content flex-grow:1 заполняет свободное место. Margin-bottom даёт gap между рядами. */ .bx-newslist .row, .bx-newslist > div.row { display: flex; flex-wrap: wrap; align-items: stretch; } .bx-newslist-container { display: flex; margin-bottom: 30px; } .bx-newslist-block { display: flex; flex-direction: column; width: 100%; flex-grow: 1; } .bx-newslist-title { margin: 0; padding: 15px 0 12px 0; } .bx-newslist-content { flex-grow: 1; padding: 0 0 15px 0; } .bx-newslist-img { overflow: hidden; } .bx-newslist-img img { width: 100%; height: auto; display: block; } /* Карточки новостей в списке (.bx-newslist-container используется в hcode_page) */ [data-theme="dark"] .bx-newslist-container { background-color: var(--dt-card-bg); border-color: var(--dt-border); } [data-theme="dark"] .bx-newslist-title a { color: var(--dt-text-heading) !important; } [data-theme="dark"] .bx-newslist-title a:hover { color: var(--dt-bg-yellow) !important; } [data-theme="dark"] .bx-newslist-content, [data-theme="dark"] .bx-newslist-content p { color: var(--dt-text-soft); } /* Пагинация Bitrix в списке новостей — НЕ использует Bootstrap-классы. Рендерится как с inline-ссылками: 1 2 След. Без явных классов на ссылках — перекрашиваем всё содержимое . */ [data-theme="dark"] .bx-newslist font.text, [data-theme="dark"] .bx-newslist font.text a { color: var(--dt-text-soft) !important; } [data-theme="dark"] .bx-newslist font.text a { text-decoration: none; transition: var(--dt-transition); } [data-theme="dark"] .bx-newslist font.text a:hover { color: var(--dt-bg-yellow) !important; } [data-theme="dark"] .bx-newslist font.text b { color: var(--dt-bg-yellow) !important; font-weight: 600; } /* Разделитель "|" между элементами пагинации — наследует цвет */ [data-theme="dark"] .bx-newslist font.text { color: var(--dt-text-muted); } /* ========================================================================== 14. Catalog (hcode_catalog) ========================================================================== */ [data-theme="dark"] .catalog-section, [data-theme="dark"] .bx-catalog { background-color: var(--dt-bg); color: var(--dt-text); } [data-theme="dark"] .catalog-item { background-color: var(--dt-card-bg); border-color: var(--dt-border); } [data-theme="dark"] .catalog-item .catalog-item-title a { color: var(--dt-text-heading); } [data-theme="dark"] .bx-catalog .bx-catalog-price { color: var(--dt-bg-yellow); } /* ========================================================================== 15. Hover/transition — плавность ========================================================================== */ .navbar, .navbar-default, .navbar-nav li a, .features-section, .work-process-sub, .corporate-standards-text, .corporate-standards-img, .masonry-items figcaption, .btn, footer h6, footer h5, footer a, .bg-fast-yellow, .bg-white, .counter-section { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ========================================================================== 16. prefers-color-scheme — авто-определение для первой загрузки ========================================================================== */ /* Эти стили не нужны — JS выставляет data-theme до рендера. Оставлены как fallback на случай отключённого JS. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) body { background-color: var(--dt-bg); color: var(--dt-text); } }