/* ================================================================ Тёмная тема AromaSense. Надстройка над style.css: включается атрибутом data-theme="dark" на . Светлая тема не меняется ни на пиксель. Палитра подобрана по контрастности WCAG AA (проверено): текст на фоне 15.1:1 второстепенный 7.8:1 акцент (синий) 6.0:1 красный 6.5:1 белый на кнопке 3.8:1 (крупный текст) ================================================================ */ :root[data-theme="dark"] { --bg: #14171c; /* фон страницы */ --surface: #1c2027; /* карточки, шапка, подвал */ --raised: #232830; /* поля ввода, всплывающие блоки */ --text: #e8ecf1; /* основной текст */ --muted: #a3acb9; /* второстепенный текст */ --line: #2f3641; /* декоративные разделители */ --line-strong: #6b7789; /* рамки полей и чекбоксов (нужен контраст 3:1) */ --primary: #4d94ff; /* ссылки и акценты: текст на тёмном должен быть светлее */ --primary-2: #6ea8ff; /* наведение для текста */ --btn: #0066ff; /* заливка кнопок и плашек — родной синий сайта: белый текст на нём даёт 4.83, как в светлой теме */ --btn-hover: #3d8aff; /* наведение для заливки — тоже как в светлой */ --red: #ff6b6b; /* спиртовой, ошибки */ /* браузер сам отрисует тёмными выпадающие списки, полосы прокрутки и подсказки автозаполнения */ color-scheme: dark; } /* ---------- Основа ---------- */ :root[data-theme="dark"] body, :root[data-theme="dark"] .wrapper { background: var(--bg); color: var(--text); } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6, :root[data-theme="dark"] .title_1, :root[data-theme="dark"] .title_2, :root[data-theme="dark"] .title_3, :root[data-theme="dark"] .title_4, :root[data-theme="dark"] .title_5, :root[data-theme="dark"] .title_6, :root[data-theme="dark"] p, :root[data-theme="dark"] li { color: var(--text); } :root[data-theme="dark"] a { color: var(--primary); } :root[data-theme="dark"] a:hover { color: var(--primary-2); } /* ---------- Шапка ---------- Фон оставлен намеренно: так шапка читается как отдельная плашка. */ :root[data-theme="dark"] .header, :root[data-theme="dark"] .header_fixed { background: var(--surface); } /* Сообщение после сохранения профиля — на тёмном фоне светлее */ :root[data-theme="dark"] .save-status_ok { background: rgba(52, 199, 123, 0.14); border-color: #34c77b; color: #6fe0a5; } :root[data-theme="dark"] .save-status_fail { background: rgba(255, 107, 107, 0.14); border-color: var(--red); color: var(--red); } /* Теги-фильтры на карточке (на телефонах они не кликабельны) */ @media only screen and (min-width: 768px) { :root[data-theme="dark"] .brand--js:hover, :root[data-theme="dark"] .conformity--js:hover { background-color: rgba(77, 148, 255, 0.18); } } /* Синяя полоса сверху — фирменная деталь, она есть и в светлой теме. Раньше я красил её в серый заодно с разделителями — это было ошибкой. */ :root[data-theme="dark"] .header-body { border-top-color: var(--btn); } :root[data-theme="dark"] .header-menu-list li a, :root[data-theme="dark"] a.header-phone { color: var(--text); } :root[data-theme="dark"] a.header-phone:hover { color: var(--primary); } /* подложка пунктов меню (та самая «намёк на кнопки») */ @media only screen and (min-width: 992px) { :root[data-theme="dark"] .header-menu-list li a { background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .header-menu-list li a:hover, :root[data-theme="dark"] .header-menu-list li.current-menu-item a { background: rgba(77, 148, 255, 0.18); color: var(--primary-2); } } /* Мобильные: шапка фиксированная и меню выезжает на весь экран — в светлой теме им задан #fff, значит здесь нужен непрозрачный тёмный. */ @media only screen and (max-width: 991px) { :root[data-theme="dark"] .header, :root[data-theme="dark"] .header_fixed, :root[data-theme="dark"] .header-menu { background: var(--surface); } } :root[data-theme="dark"] .header-menu__switcher span, :root[data-theme="dark"] .header-menu__switcher span:before, :root[data-theme="dark"] .header-menu__switcher span:after { background: var(--text); } /* ---------- Кнопки ---------- */ :root[data-theme="dark"] .btn { background: var(--btn); color: #fff; } /* Текст на синей кнопке всегда белый, в том числе при наведении. Общее правило «a:hover { color: … }» красило его в блеклый — на синем фоне надпись («Кабинет», «Заказать» и т.п.) становилась нечитаемой. */ :root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] a.btn:hover, :root[data-theme="dark"] .header-login:hover { background: var(--btn-hover); color: #fff; } :root[data-theme="dark"] .btn_border { background: transparent; border: 1px solid var(--primary); color: var(--primary); } :root[data-theme="dark"] .btn_border:hover { background: var(--primary); color: #14171c; } :root[data-theme="dark"] .btn_white { background: var(--raised); color: var(--text); } /* ---------- Поля ввода ---------- */ :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="tel"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select, :root[data-theme="dark"] .catalog-search__input { /* В светлой теме у полей нет заливки — только линия снизу. Повторяем это, иначе поля превращаются в тёмные плашки. background-color, а не background: сокращённое затирает иконку поиска. */ background-color: transparent; color: var(--text); border-color: var(--line-strong); } :root[data-theme="dark"] ::-webkit-input-placeholder { color: var(--muted); } :root[data-theme="dark"] ::-moz-placeholder { color: var(--muted); } :root[data-theme="dark"] :-ms-input-placeholder { color: var(--muted); } :root[data-theme="dark"] ::placeholder { color: var(--muted); } /* Поля формы заказа: как в светлой теме — без фона, только линия снизу */ :root[data-theme="dark"] .input { background-color: transparent; border-bottom-color: var(--line-strong); color: var(--text); } :root[data-theme="dark"] .input:focus { border-bottom-color: var(--primary); outline: none; } :root[data-theme="dark"] .input.error { border-bottom-color: var(--red); } /* автозаполнение Chrome заливает поле своим цветом — убираем */ :root[data-theme="dark"] .input:-webkit-autofill, :root[data-theme="dark"] .input:-webkit-autofill:hover, :root[data-theme="dark"] .input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px #14171c inset; box-shadow: 0 0 0 1000px #14171c inset; } /* Поиск в каталоге: скругляем углы и приглушаем рамку, чтобы поле не «кричало» на тёмном. Подсветка появляется при фокусе. */ /* input.… — иначе правило выше с селектором input[type="text"] окажется специфичнее и вернёт яркую рамку */ :root[data-theme="dark"] input.catalog-search__input { border-radius: 10px; border-color: #55606f; } :root[data-theme="dark"] input.catalog-search__input:focus { border-color: var(--primary); -webkit-box-shadow: 0 0 0 3px rgba(77, 148, 255, 0.18); box-shadow: 0 0 0 3px rgba(77, 148, 255, 0.18); outline: none; } /* Очень лёгкие тени — только у того, что «поднято» над страницей */ :root[data-theme="dark"] .btn { -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } :root[data-theme="dark"] .products-item { -webkit-transition: box-shadow 0.2s ease; -o-transition: box-shadow 0.2s ease; transition: box-shadow 0.2s ease; } /* тоже только с настоящим курсором: на тач-экране подсветка залипала */ @media (hover: hover) and (pointer: fine) { :root[data-theme="dark"] .products-item:hover { -webkit-box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); } } :root[data-theme="dark"] .catalog-sidebar__switcher { -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } /* иконка поиска — в исходнике она чёрная и на тёмном пропадала */ :root[data-theme="dark"] .catalog-search__input { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.25 14.25a6 6 0 100-12 6 6 0 000 12zM15.75 15.75l-3.26-3.26' stroke='%23a3acb9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ---------- Каталог: фильтр ---------- На десктопе фильтр в светлой теме без фона — оставляем прозрачным. Фон нужен только мобильной выезжающей панели (там в светлой теме #fff). */ @media only screen and (max-width: 767px) { :root[data-theme="dark"] .catalog-sidebar-body { background: var(--surface); } /* Меню личного кабинета («Заказы», «Настройки») на телефоне показано обычным списком, а не выезжающей панелью — фон ему не нужен. */ :root[data-theme="dark"] .catalog-sidebar--lk .catalog-sidebar-body { background: transparent; } } :root[data-theme="dark"] .catalog-filter__caption { color: var(--text); } :root[data-theme="dark"] .catalog-filter-list li, :root[data-theme="dark"] .catalog-filter { border-color: var(--line); } :root[data-theme="dark"] .checkbox__title { color: var(--text); } :root[data-theme="dark"] .checkbox__title:before { border-color: var(--line-strong); } :root[data-theme="dark"] .checkbox input:checked + .checkbox__title:before, :root[data-theme="dark"] .catalog-filter-item input:checked + .checkbox__title:before { background-color: var(--btn); border-color: var(--btn); } :root[data-theme="dark"] .catalog-sidebar__switcher { background-color: var(--surface); } /* Обводка фокуса на тёмном фоне — светлее, иначе почти не видна */ :root[data-theme="dark"] a:focus-visible, :root[data-theme="dark"] button:focus-visible, :root[data-theme="dark"] input:focus-visible, :root[data-theme="dark"] select:focus-visible, :root[data-theme="dark"] textarea:focus-visible, :root[data-theme="dark"] .btn:focus-visible, :root[data-theme="dark"] .products-item__add:focus-visible, :root[data-theme="dark"] .theme-toggle:focus-visible, :root[data-theme="dark"] .catalog-sidebar__switcher:focus-visible, :root[data-theme="dark"] .checkbox input:focus-visible + .checkbox__title:before, :root[data-theme="dark"] .catalog-filter-item input:focus-visible + .checkbox__title:before { outline-color: var(--primary); } :root[data-theme="dark"] .form-item__hint { color: var(--muted); } :root[data-theme="dark"] .form-item__label { color: var(--text); } /* Выпадающий список способа доставки (СДЭК / самовывоз). Сам список опций рисует браузер, а не страница: без явных цветов он оставался светлым, и белый текст на нём не читался. */ :root[data-theme="dark"] select { color-scheme: dark; } :root[data-theme="dark"] select option, :root[data-theme="dark"] select optgroup { background-color: var(--raised); color: var(--text); } /* Подсказка под полем ПВЗ со ссылкой на список отделений */ :root[data-theme="dark"] .description { color: var(--muted); } :root[data-theme="dark"] .description a { color: var(--primary); } /* «Mixes» — та же градиентная надпись, но светлее: на тёмном фоне исходные цвета слишком глухие */ :root[data-theme="dark"] .filter-item--mixes .checkbox__title { background: -webkit-linear-gradient(left, #6BA4FF, #9B8CFF 52%, #C08CE8); background: -o-linear-gradient(left, #6BA4FF, #9B8CFF 52%, #C08CE8); background: linear-gradient(90deg, #6BA4FF, #9B8CFF 52%, #C08CE8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #9B8CFF; } /* ---------- Каталог: карточки товаров ---------- */ :root[data-theme="dark"] .products-item { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .products-item__title { color: var(--text); } :root[data-theme="dark"] .products-item__desc, :root[data-theme="dark"] .products-item__dose { color: var(--muted); } /* теги */ :root[data-theme="dark"] .products-item__code { color: var(--muted); border-color: var(--line-strong); } :root[data-theme="dark"] .products-item__brand { color: var(--text); border-color: var(--line-strong); } :root[data-theme="dark"] .products-item__brand.brand_our { color: var(--primary); border-color: var(--primary); } :root[data-theme="dark"] .brand_blue { background: var(--btn); color: #fff; border-color: var(--btn); } :root[data-theme="dark"] .products-item__type { color: var(--primary); border-color: var(--primary); } /* «Спиртовой» — красный и на тёмном тоже */ :root[data-theme="dark"] .products-item .products-item__type--alcohol { color: var(--red) !important; border-color: var(--red); } :root[data-theme="dark"] .products-item__type--alcohol .ic-alcohol { background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.38723 4.63031C9.09687 3.85943 8.6735 3.14548 8.13637 2.52094C7.20684 1.44492 5.98457 0.75 5.02246 0.75C4.96525 0.750043 4.90881 0.763174 4.85746 0.788388C4.80611 0.813602 4.76121 0.850231 4.72619 0.895471C4.69118 0.940711 4.66697 0.993363 4.65544 1.0494C4.64391 1.10543 4.64535 1.16336 4.65965 1.21875C4.98473 2.46094 4.3109 3.49383 3.5977 4.58719C3.00684 5.49281 2.39746 6.4282 2.39746 7.5C2.39746 9.56766 4.0798 11.25 6.14746 11.25C8.21512 11.25 9.89746 9.56766 9.89746 7.5C9.89746 6.48516 9.7259 5.51977 9.38723 4.63031ZM6.9052 9.81305C6.66309 10.0709 6.35957 10.125 6.14746 10.125C5.93535 10.125 5.63184 10.0709 5.38973 9.81305C5.14762 9.55523 5.02246 9.14625 5.02246 8.625C5.02246 8.03578 5.22918 7.58719 5.42887 7.15359C5.54488 6.90188 5.66324 6.6457 5.73355 6.37148C5.74102 6.34166 5.75571 6.31412 5.77632 6.29131C5.79694 6.26849 5.82284 6.2511 5.85176 6.24065C5.88068 6.23021 5.91173 6.22704 5.94216 6.23142C5.9726 6.2358 6.00149 6.2476 6.02629 6.26578C6.24065 6.43163 6.43125 6.6261 6.59277 6.84375C7.01863 7.40625 7.27246 8.07234 7.27246 8.625C7.27246 9.14625 7.14543 9.55711 6.9052 9.81305Z' fill='%23ff6b6b'/%3E%3C/svg%3E"); } /* Сброс фильтров: в светлой теме у кнопки нет заливки — повторяем */ :root[data-theme="dark"] .catalog-filter__reset { background: none; border-color: var(--line-strong); color: var(--muted); } :root[data-theme="dark"] .catalog-filter__reset:hover { border-color: var(--primary); color: var(--primary); } /* Полоса «Корзина очищена — Вернуть»: единственный блок здесь с заливкой, она есть и в светлой теме */ :root[data-theme="dark"] .cart-undo { background: var(--surface); border-color: var(--line); color: var(--text); } :root[data-theme="dark"] .cart-undo__btn { color: var(--primary); border-bottom-color: var(--primary); } :root[data-theme="dark"] .cart-undo__timer { color: var(--muted); } /* «Очистить корзину» — обычная .btn_border на синей плашке, отдельных правил не нужно */ /* кнопка «+» на карточке */ :root[data-theme="dark"] .products-item__add { border-color: var(--primary); } :root[data-theme="dark"] .products-item__add.active { background-color: var(--btn); } /* наведение — только с настоящим курсором, иначе на тач-экранах залипает */ @media (hover: hover) and (pointer: fine) { :root[data-theme="dark"] .products-item__add:hover { background-color: var(--btn); } } /* стрелки сортировки — чёрные линии, на тёмном не видны */ :root[data-theme="dark"] .catalog-sort__switcher img { filter: invert(1) brightness(1.4); } :root[data-theme="dark"] .catalog-sort__btn { color: var(--muted); } :root[data-theme="dark"] .catalog-sort__btn.active { color: var(--primary); } /* ---------- Прочие блоки ---------- У «Наших преимуществ», текста «Оплата и доставка», «Контактов» и формы входа в светлой теме фона НЕТ — здесь тоже не добавляем, меняем только цвет текста и разделители. Иначе появляются «карточки», которых в макете не было. */ :root[data-theme="dark"] .features-item, :root[data-theme="dark"] .contacts-block, :root[data-theme="dark"] .auth, :root[data-theme="dark"] .notice { background: transparent; border-color: var(--line); color: var(--text); } :root[data-theme="dark"] .features-item__caption, :root[data-theme="dark"] .features-item__text, :root[data-theme="dark"] .contacts-block__title, :root[data-theme="dark"] .contacts-block__text { color: var(--text); } /* «Бесплатные пробники ароматизаторов» под заголовком каталога — оставляем светлым наравне с заголовком, а не приглушённым */ :root[data-theme="dark"] .maintop__subtitle { color: var(--text); } /* Синие плашки: в светлой теме они синие, значит и здесь синие, а не серые. Лёгкая тень — плашка «парит» над списком и не сливается с фоном. */ :root[data-theme="dark"] .catalog-info, :root[data-theme="dark"] .cart-info { background: var(--btn); border-color: var(--btn); color: #fff; -webkit-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); } :root[data-theme="dark"] .catalog-info__caption, :root[data-theme="dark"] .cart-info__caption { color: #fff; } /* Кнопки внутри плашки — как в светлой теме: прозрачные с белой обводкой. Общее правило .btn_border выше делает их синими, здесь возвращаем исходный вид. */ :root[data-theme="dark"] .catalog-info .btn_border, :root[data-theme="dark"] .cart-info .btn_border { background: transparent; border-color: #fff; color: #fff; } :root[data-theme="dark"] .catalog-info .btn_border:hover, :root[data-theme="dark"] .cart-info .btn_border:hover { background: #fff; color: var(--btn); } /* «Перейти к оформлению» — выглядит ровно как «В каталог»: прозрачная с белой обводкой. Общее правило .btn_white делало её сплошной. */ :root[data-theme="dark"] .catalog-info .btn_white, :root[data-theme="dark"] .cart-info .btn_white { background: transparent; color: #fff; border: 1px solid #fff; } :root[data-theme="dark"] .catalog-info .btn_white:hover, :root[data-theme="dark"] .cart-info .btn_white:hover { background: #fff; color: var(--btn); opacity: 1; } /* ---------- Подвал ---------- В светлой теме фона нет — только разделитель. */ :root[data-theme="dark"] .footer { background: transparent; border-color: var(--line); } /* Ссылки в подвале («О нас», «Каталог», «Оплата и доставка» и т.д.) — светлые, а не приглушённые: приглушённый серый на тёмном читался плохо. */ :root[data-theme="dark"] .footer a, :root[data-theme="dark"] .footer-nav-list li a { color: var(--text); } :root[data-theme="dark"] .footer a:hover { color: var(--primary); } :root[data-theme="dark"] .footer__copy { color: var(--muted); } /* При наведении плашка заливается синим — текст обязан остаться белым. Общее правило .footer a:hover красило его в синий, и надпись пропадала. */ :root[data-theme="dark"] .footer-nav-list li a:hover, :root[data-theme="dark"] .footer-nav-list li a:focus-visible { background: var(--btn); border-color: var(--btn); color: #fff; } /* ---------- Карусель на главной (carousel.css) ---------- */ :root[data-theme="dark"] .product-carousel .products-item, :root[data-theme="dark"] .swiper-slide.products-item { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .swiper-button-next, :root[data-theme="dark"] .swiper-button-prev { color: var(--text); } :root[data-theme="dark"] .swiper-pagination-bullet { background: var(--muted); } :root[data-theme="dark"] .swiper-pagination-bullet-active { background: var(--primary); } /* ---------- Логотип ---------- */ /* в шапке и подвале лежат две картинки, показываем нужную */ .logo-dark { display: none; } :root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: block; } /* ---------- Переключатель темы ---------- */ .theme-toggle { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 38px; height: 38px; margin-left: 14px; padding: 0; background: transparent; border: 1px solid #c6d2e4; border-radius: 50%; cursor: pointer; color: #0066FF; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .theme-toggle:hover { background: rgba(0, 102, 255, 0.08); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* в светлой теме показываем месяц («включить тёмную») */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle { border-color: var(--line-strong); color: var(--primary); } :root[data-theme="dark"] .theme-toggle:hover { background: rgba(77, 148, 255, 0.15); } /* в тёмной — солнце («вернуть светлую») */ :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } @media only screen and (max-width: 991px) { .theme-toggle { width: 34px; height: 34px; margin-left: 10px; } } /* Карты и сторонние виджеты (Яндекс.Карта, СДЭК) остаются светлыми: это чужие iframe, перекрасить их снаружи нельзя. Смягчаем стык рамкой. */ :root[data-theme="dark"] .contacts-map, :root[data-theme="dark"] .contacts-map iframe { border-radius: 8px; border: 1px solid var(--line); } /* Страница «не найдено»: в светлой теме у блока нет заливки — повторяем */ :root[data-theme="dark"] .notfound__text { color: var(--muted); } /* Тег «Копия» — на тёмном берём светлее, иначе зелёный уходит в грязь */ :root[data-theme="dark"] .products-item .products-item__type--copy { color: #6FD39B; border-color: #3f7a5b; } /* Погашенные фильтры */ :root[data-theme="dark"] .filter-item--off .checkbox__title, :root[data-theme="dark"] .filter-item--off .catalog-filter__caption { color: #6b7480; } :root[data-theme="dark"] .filter-item--off .checkbox__title:before { border-color: #39414d; background: #1b1f25; } /* Пояснение под галочкой «Копии» — приглушённое, тише пунктов фильтра */ :root[data-theme="dark"] .copy-filter__desc { color: var(--muted); }