/* ===================================================================== Ночная (тёмная) тема фронта krylasova.ru. Включается ПО ЖЕЛАНИЮ пользователя: переключатель «луна/солнце» в шапке вешает класс `night` на и запоминает выбор в localStorage (`kr-theme`). Анти-FOUC-скрипт в (layouts/main.php) ставит класс до отрисовки, поэтому вспышки светлой темы нет. ВСЁ скоупим под `html.night ...` — дневная тема НЕ меняется вообще. Палитра (брендовый фиолетовый сохраняется на кнопках/иконках/акцентах): фон страницы #14121a фон секций/герой #1b1830 карточки #201b30 (чуть светлее фона) дропдаун/панели #201b30 / #26203a основной текст #e8e6f0 заголовки #f0edf8 приглушённый текст #9b93ad бордеры #332b49 / #2b2540 тонкая фиол. рамка rgba(127,90,188,.30) бренд-фиолетовый #7f5abc / #6f42c1 (кнопки/рамки) яркий фиол. (текст) #a586e0 / #b79bea (акценты/ссылки на тёмном) поле ввода #1e1a2b ===================================================================== */ /* ---- База: фон + текст + плавность переключения ---- */ html.night, html.night body { background-color: #14121a; color: #e8e6f0; } html.night body { /* мягкое переключение по клику (на загрузке класс уже стоит — не мигает) */ transition: background-color .3s ease, color .3s ease; } html.night h1, html.night h2, html.night h3, html.night h4, html.night h5, html.night h6 { color: #f0edf8; } html.night hr { border-color: #2b2540; } /* ---- Секции / герой ---- */ html.night section { color: #e8e6f0; } html.night .bg-skew-light:before { background-color: #1b1830; } html.night .bg-skew-main:before { border-bottom-color: #7f5abc; } /* Яркий фиолетовый акцент (в т.ч. вращающийся текст в герое) — виден на тёмном */ html.night .text-primary { color: #a586e0 !important; } html.night a.text-primary:hover, html.night a.text-primary:focus { color: #b79bea !important; } /* ---- Ссылки в контенте/подвале (кнопки .btn НЕ трогаем) ---- */ html.night main a:not(.btn), html.night .footer a { color: #c3b3ea; } html.night main a:not(.btn):hover, html.night .footer a:hover { color: #b79bea; } html.night main article { color: #d7d2e4; } /* ---- Шапка + меню ---- */ html.night .navbar.bg-white { background-color: #171426 !important; box-shadow: 0 1px 0 rgba(127, 90, 188, .18); } html.night .navbar-brand.text-dark { color: #e8e6f0 !important; } html.night .navbar-light .navbar-nav .nav-link { color: #dcd8ea; } html.night .navbar-light .navbar-nav .nav-link:hover, html.night .navbar-light .navbar-nav .nav-link:focus, html.night .navbar-light .navbar-nav .active > .nav-link, html.night .navbar-light .navbar-nav .nav-link.active, html.night .navbar-light .navbar-nav .nav-link.show, html.night .navbar-light .navbar-nav .show > .nav-link { color: #b79bea; } html.night .navbar-light .navbar-toggler { color: #dcd8ea; border-color: rgba(127, 90, 188, .30); } html.night .navbar-toggler .fas, html.night .navbar-toggler .fa-bars { color: #dcd8ea; } /* разделители пунктов в мобильном (бургер) меню */ html.night .navbar-nav .nav-item + .nav-item { border-top-color: #2b2540; } /* ---- Выпадающее меню (напр. «Обучение») ---- */ html.night .dropdown-menu { background-color: #201b30; border-color: #332b49; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5); color: #e8e6f0; } html.night .dropdown-item { color: #dcd8ea; } html.night .dropdown-item:hover, html.night .dropdown-item:focus, html.night .dropdown-item.active, html.night .dropdown-item:active { color: #b79bea; } html.night .dropdown-divider { border-top-color: #332b49; } /* ---- Карточки (главная, блог, курсы) ---- */ html.night .card { background-color: #201b30; border: 1px solid rgba(127, 90, 188, .30); box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .40); color: #e8e6f0; } html.night .card-hover:hover { box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .55); } html.night .card-title a { color: #f0edf8; } html.night .card-title a:hover, html.night .card-title a:focus { color: #b79bea; } html.night .card-text { color: #c7c1d6; } html.night .card-header { background-color: rgba(255, 255, 255, .03); border-bottom-color: #332b49; } html.night .card-featured { border-color: #7f5abc; } html.night .accordion .card .card-header { background-color: #201b30; } html.night .accordion .card .card-header .card-title { color: #e8e6f0; } /* CTA-ссылка «Подробнее →» (фиол. подчёркивание сохраняем) */ html.night .link-cta { color: #dcd8ea; border-bottom-color: #7f5abc; } html.night .link-cta:hover { color: #b79bea; } /* ---- Подвал ---- */ html.night .footer, html.night .footer.bg-bright { background-color: #171426 !important; color: #c7c1d6; border-top: 1px solid #2b2540; } /* ---- Контентные страницы (CMS / документы / блог) ---- */ html.night .doc-body { color: #d7d2e4; } html.night blockquote, html.night .blockquote { color: #c7c1d6; } html.night main article code, html.night main article pre, html.night .doc-body code, html.night .doc-body pre { background-color: #100e17; color: #e8e6f0; } /* Таблицы */ html.night .table { color: #d7d2e4; } html.night .table td, html.night .table th, html.night .table thead th, html.night main article th, html.night main article td, html.night .doc-body th, html.night .doc-body td { border-color: #332b49; } /* Кастомные CMS-блоки (были на светлом фоне) */ html.night .custom-page ul { background-color: #1e1a2b; border-color: #7d56c0; color: #d7d2e4; } html.night .custom-page h1 { background-color: #5b3b9e; border-color: #7d56c0; } html.night .imaged-link_not-opened { background-color: #1e1a2b; } /* ---- Формы ---- */ html.night .form-control { background-color: #1e1a2b; color: #e8e6f0; border-color: #3a3350; } html.night .form-control:focus { background-color: #1e1a2b; color: #f0edf8; border-color: #7f5abc; box-shadow: 0 0 0 .2rem rgba(127, 90, 188, .30); } html.night .form-control::placeholder { color: #8a83a0; opacity: 1; } html.night .form-control::-moz-placeholder { color: #8a83a0; opacity: 1; } html.night .form-control:-ms-input-placeholder { color: #8a83a0; } html.night .form-control::-ms-input-placeholder { color: #8a83a0; } html.night .form-control:disabled { background-color: #161320; } html.night label, html.night .col-form-label { color: #d7d2e4; } html.night .help-block, html.night .form-text, html.night .text-muted { color: #9b93ad !important; } html.night .help-block-error { color: #ff8a8a; } html.night .breadcrumb { background: transparent; } /* ---- Бренд-фиолетовые обводки/иконки (яркие на тёмном) ---- */ html.night .btn-outline-primary { color: #a586e0; border-color: #7f5abc; } html.night .btn-outline-primary:hover { color: #fff; background-color: #7f5abc; border-color: #7f5abc; } html.night .icon-primary { background-color: rgba(127, 90, 188, .15); color: #a586e0 !important; } html.night .text-dark, html.night a.text-dark { color: #e8e6f0 !important; } /* Утилитарные светлые фоны (панели) — затемняем */ html.night .bg-light { background-color: #1b1830 !important; } html.night .bg-white:not(.navbar) { background-color: #201b30 !important; } /* ===================================================================== Витрина Магазина / Услуг (product-storefront.css + product-services.css): тёмные карточки с тонкой фиолетовой рамкой, фиолетовые акценты на месте. ===================================================================== */ html.night .product-storefront { color: #d7d2e4; } html.night .cat-card { background-color: #201b30; border-color: rgba(127, 90, 188, .28); color: #d7d2e4; } html.night .cat-card__name { color: #d7d2e4; } html.night .cat-card__name:hover { color: #b79bea; } html.night .cat-card__price { color: #f0edf8; } html.night .svc-card__desc, html.night .svc-card__note { color: #9b93ad; } html.night .cat-card__cart { background: #2a2440; border-color: #3a3350; color: #c7c1d6; } html.night .cat-card__cart:hover { background: #332b49; } html.night .cat-mega, html.night .cat-filters { background: #201b30; border-color: #332b49; color: #d7d2e4; } html.night .cat-mega__depts { border-right-color: #332b49; } html.night .cat-mega__dept { color: #cfc9dd; } html.night .cat-mega__dept:hover, html.night .cat-mega__dept.is-active { background: #2a2440; color: #b79bea; } html.night .cat-mega__link { color: #a49dba; } html.night .cat-mega__link:hover { color: #b79bea; } html.night .cat-mega__sub-title { color: #e8e6f0; } html.night .cat-bar__search-input { background: #1e1a2b; color: #e8e6f0; } html.night .cat-sort__item { background: #201b30; border-color: #332b49; color: #cfc9dd; } html.night .cat-crumbs { color: #8a83a0; } html.night .cat-filt { border-top-color: #2b2540; } html.night .svc-personal { background: #231b33; border-color: #3a2d54; } html.night .svc-personal__title { color: #b79bea; } html.night .svc-detail__title { color: #f0edf8; } html.night .svc-detail__desc { color: #d7d2e4; } /* Плитки «Товары / Услуги» (страница Магазина) */ html.night .kr-shop-tile { background: #201b30; border-color: #332b49; color: #e8e6f0; box-shadow: 0 6px 20px rgba(0, 0, 0, .40); } html.night .kr-shop-tile:hover { color: #fff; } html.night .kr-shop-tile__desc { color: #9b93ad; } /* ---- Списки-группы (список документов в ЛК и на публичной странице /documents) ---- */ html.night .list-group-item { background-color: #201b30; border-color: #332b49; color: #d7d2e4; } html.night a.list-group-item-action { color: #d7d2e4; } html.night a.list-group-item-action:hover, html.night a.list-group-item-action:focus { background-color: #26203a; color: #f0edf8; } html.night .list-group-item.active { background-color: #6f42c1; border-color: #6f42c1; color: #fff; } /* ---- Тело документа: гасим ВШИТЫЕ автором инлайн цвета/фоны (наследие вставки из Word/браузера). Основной срез делает DocumentTreeRenderer (текущая версия), но снимки прежних версий (html_snapshot) рендерятся как есть — здесь страховка, чтобы термины/ссылки читались на тёмном. Ссылкам оставляем фирменный цвет (:not(a)), фон-подсветку у ссылок убираем. ---- */ html.night .doc-body [style*="color"]:not(a) { color: #d7d2e4 !important; } html.night .doc-body [style*="background"] { background-color: transparent !important; } /* ===================================================================== Тёмная тема для UI, добавленного в сессии правок (услуги/согласия/лендинг/вкладки). ===================================================================== */ /* Чекбоксы согласий (Bootstrap custom-control) — лендинг/формы. Ключевой конверсионный элемент. */ html.night .custom-control-label { color: #d7d2e4; } html.night .custom-control-label::before { background-color: #201b30; border-color: #3a3350; } html.night .custom-control-input:checked ~ .custom-control-label::before { background-color: #7f5abc; border-color: #7f5abc; } html.night .custom-control-input:focus ~ .custom-control-label::before { border-color: #a586e0; box-shadow: 0 0 0 .2rem rgba(127, 90, 188, .30); } /* Вкладки (nav-tabs) — «Документы/Согласия/Справки/Заявления» в ЛК и внутренние табы. */ html.night .nav-tabs { border-bottom-color: #332b49; } html.night .nav-tabs .nav-link { color: #dcd8ea; } html.night .nav-tabs .nav-link:hover { border-color: #2b2540 #2b2540 #332b49; color: #b79bea; } html.night .nav-tabs .nav-link.active { color: #f0edf8; background-color: #201b30; border-color: #332b49 #332b49 #201b30; } /* Темы учебного плана на карточке услуги + бейджи важности (не читались на тёмном). */ html.night .svc-detail__topics-title { color: #f0edf8; } html.night .svc-detail__topics-list li { color: #d7d2e4; border-bottom-color: #332b49; } html.night .svc-topic-badge { background-color: rgba(127, 90, 188, .25); color: #d7d2e4; } html.night .svc-topic-badge--crit { background-color: rgba(192, 57, 43, .30); color: #ff9b9b; } html.night .svc-topic-badge--imp { background-color: rgba(59, 120, 231, .28); color: #9db8f0; } /* Лендинг: преимущества и экран «Спасибо» (диалог с мессенджерами) — серый текст на тёмном не читался. */ html.night .landing-adv__item { background: #201b30; border-color: #332b49; } html.night .landing-adv__txt { color: #d7d2e4; } html.night .lead-dialog__text { color: #d7d2e4; } /* Иконка в публичном списке документов (была inline color:#888 — тускло на тёмном). */ html.night .list-group-item .fa-file-alt, html.night .list-group-item .far.fa-file-alt { color: #9b93ad !important; }