/* ================================================================ dark-mode-homepage.css Темний режим для https://emd103.site/ — головна сторінка Клас темного режиму: body.ebdarkmodecolor (EB Dark Mode module) ⚠️ Примітка: Модуль EB Dark Mode додає клас «ebdarkmodecolor» до . Якщо у налаштуваннях модуля ви зміните клас на «dark-mode» — замініть «ebdarkmodecolor» → «dark-mode» у всьому цьому файлі. Цей файл підключайте ПІСЛЯ 103-kyivcity-modern.css, щоб !important-правила успішно перекривали базові стилі. ================================================================ */ /* ──────────────────────────────────────────────── 1. CSS-ЗМІННІ (tokens) — перекривають світлі значення. Всі елементи, що використовують var(--kc-*), отримають правильні кольори автоматично. ──────────────────────────────────────────────── */ body.ebdarkmodecolor { --kc-bg: #00151f; /* фон body — такий само як у модуля */ --kc-bg-soft: #091827; /* фон карток, форм, таблиць */ --kc-ink: #e2e8f0; /* основний текст */ --kc-ink-2: #cbd5e1; /* вторинний текст */ --kc-muted: #94a3b8; /* підписи, placeholder */ --kc-line: rgba(255,255,255,0.09); /* рамки, роздільники */ --kc-red-soft: rgba(225,10,23,0.12); /* світло-червоний фон */ --kc-shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25); --kc-shadow: 0 6px 20px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35); --kc-shadow-lg: 0 24px 60px -20px rgba(0,0,0,.65), 0 8px 24px -12px rgba(0,0,0,.45); } /* ──────────────────────────────────────────────── 2. НАВІГАЦІЙНИЙ ДРОПДАУН CSS-правило з !important перекрито тут вищим пріоритетом ──────────────────────────────────────────────── */ body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown { background: #091827 !important; border-color: rgba(255,255,255,0.09) !important; box-shadow: 0 12px 40px rgba(0,0,0,.5) !important; } body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown li > a { color: #cbd5e1 !important; } body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown li > a:hover, body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown li > a:focus { background: rgba(255,255,255,0.06) !important; color: #fff !important; } /* Назва підрозділу (column title) у megamenu */ body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown .sp-column .sp-module-title { color: var(--kc-muted) !important; border-bottom-color: rgba(255,255,255,0.09) !important; } /* ──────────────────────────────────────────────── 3. МОБІЛЬНЕ OFFCANVAS МЕНЮ ──────────────────────────────────────────────── */ body.ebdarkmodecolor .offcanvas-menu { background: #091827 !important; border-right-color: rgba(255,255,255,0.08) !important; } body.ebdarkmodecolor .offcanvas-menu .offcanvas-inner > ul > li > a, body.ebdarkmodecolor .offcanvas-menu a { color: #cbd5e1 !important; border-bottom-color: rgba(255,255,255,0.07) !important; } body.ebdarkmodecolor .offcanvas-menu a:hover, body.ebdarkmodecolor .offcanvas-menu a.active { color: var(--kc-red) !important; } body.ebdarkmodecolor .offcanvas-menu .offcanvas-header { background: #00151f !important; border-bottom-color: rgba(255,255,255,0.09) !important; } /* ──────────────────────────────────────────────── 4. HOLOGRAPHIC-CARDS Проблема: background-image з білим градієнтом (rgba(255,255,255,0.72)…0.42) поверх темного тла → сірий ефект. Вирішення: прибираємо білий градієнт і замінюємо на напівпрозорий glass-ефект. ──────────────────────────────────────────────── */ body.ebdarkmodecolor .holographic-card { background-image: none !important; background-color: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.06) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* Текст і іконки всередині holographic-card */ body.ebdarkmodecolor .holographic-card .qx-element-text *, body.ebdarkmodecolor .holographic-card p, body.ebdarkmodecolor .holographic-card span, body.ebdarkmodecolor .holographic-card h1, body.ebdarkmodecolor .holographic-card h2, body.ebdarkmodecolor .holographic-card h3, body.ebdarkmodecolor .holographic-card h4 { color: #e2e8f0 !important; } /* ──────────────────────────────────────────────── 5. ФОРМИ Мають background: #fff !important у базовому CSS → потрібно перекрити з вищим пріоритетом. ──────────────────────────────────────────────── */ body.ebdarkmodecolor input[type="text"], body.ebdarkmodecolor input[type="email"], body.ebdarkmodecolor input[type="tel"], body.ebdarkmodecolor input[type="number"], body.ebdarkmodecolor input[type="search"], body.ebdarkmodecolor input[type="password"], body.ebdarkmodecolor input[type="url"], body.ebdarkmodecolor input[type="date"], body.ebdarkmodecolor textarea, body.ebdarkmodecolor select, body.ebdarkmodecolor .uk-input, body.ebdarkmodecolor .uk-textarea, body.ebdarkmodecolor .uk-select, body.ebdarkmodecolor .form-control, body.ebdarkmodecolor .sp-searchbox .sp-search-query { background: #091827 !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,0.12) !important; } body.ebdarkmodecolor input::placeholder, body.ebdarkmodecolor textarea::placeholder { color: #94a3b8 !important; } body.ebdarkmodecolor input:focus, body.ebdarkmodecolor textarea:focus, body.ebdarkmodecolor select:focus, body.ebdarkmodecolor .form-control:focus { border-color: var(--kc-red) !important; box-shadow: 0 0 0 3px rgba(225,10,23,0.2) !important; outline: none !important; } body.ebdarkmodecolor label, body.ebdarkmodecolor .control-label { color: #e2e8f0 !important; } /* Поле пошуку у хедері */ body.ebdarkmodecolor .sp-searchbox { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; } /* ──────────────────────────────────────────────── 6. ТАБЛИЦІ ──────────────────────────────────────────────── */ body.ebdarkmodecolor table, body.ebdarkmodecolor .uk-table, body.ebdarkmodecolor .table { border-color: rgba(255,255,255,0.08) !important; color: #cbd5e1 !important; } body.ebdarkmodecolor table th, body.ebdarkmodecolor .uk-table th, body.ebdarkmodecolor .table > thead > tr > th { background: #091827 !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,0.1) !important; } body.ebdarkmodecolor table td, body.ebdarkmodecolor .uk-table td, body.ebdarkmodecolor .table > tbody > tr > td { border-color: rgba(255,255,255,0.06) !important; color: #cbd5e1 !important; } body.ebdarkmodecolor table tbody tr:hover, body.ebdarkmodecolor .table-hover > tbody > tr:hover { background: rgba(225,10,23,0.06) !important; } body.ebdarkmodecolor .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.02) !important; } /* ──────────────────────────────────────────────── 7. КАРТКИ / BOXES (qx-card, article items) У базовому CSS — background: #fff БЕЗ !important, тому інлайн-стилі модуля повинні спрацювати. Але border використовує var(--kc-line) — вже виправлено через змінні у п.1. Дублюємо для впевненості. ──────────────────────────────────────────────── */ body.ebdarkmodecolor .qx-card, body.ebdarkmodecolor .qx-image-box, body.ebdarkmodecolor .qx-info-box, body.ebdarkmodecolor .qx-icon-box, body.ebdarkmodecolor .qx-feature-box, body.ebdarkmodecolor .quix-card { border-color: rgba(255,255,255,0.09) !important; } body.ebdarkmodecolor .qx-card-body { background: #091827 !important; } /* Gradient-fade внизу превью новин — виправляємо білий */ body.ebdarkmodecolor .qx-card-body .qx-card-text.qx-element-jarticle-introtext::after, body.ebdarkmodecolor .qx-card-body .qx-element-jarticle-introtext::after { background: linear-gradient( 180deg, rgba(9, 24, 39, 0) 0%, #091827 100% ) !important; } /* Картки статей */ body.ebdarkmodecolor .article-list .article, body.ebdarkmodecolor .blog .item, body.ebdarkmodecolor .items-leading > [itemprop="blogPost"], body.ebdarkmodecolor .blog-intro { border-color: rgba(255,255,255,0.09) !important; } /* ──────────────────────────────────────────────── 8. КНОПКИ ──────────────────────────────────────────────── */ /* Secondary / outline buttons */ body.ebdarkmodecolor .qx-btn-default, body.ebdarkmodecolor .btn-default { background: transparent !important; color: #cbd5e1 !important; border-color: rgba(255,255,255,0.2) !important; } body.ebdarkmodecolor .qx-btn-default:hover, body.ebdarkmodecolor .btn-default:hover { border-color: var(--kc-red) !important; color: #fff !important; } /* ──────────────────────────────────────────────── 8b. ІКОНКИ У "3 БЛОКИ ПІД СЛАЙДЕРОМ" Проблема: PNG-файли мають сіру квадратну підложку, вбудовану в сам файл (не прозорі). Рішення: filter trick — invert(1) : сірий 192 → темний 63; червоний → cyan hue-rotate(180°): повертає cyan назад у red contrast(2) : темний 63 → чорний 0 (зникає на темному фоні); червоний → яскраво-червоний 255 border-radius: 50% обрізає квадратні кути. ──────────────────────────────────────────────── */ /* body.ebdarkmodecolor #qx-section-3blocks-below-slider .qx-element-call-to-action_image img { filter: invert(1) hue-rotate(180deg) contrast(2) !important; border-radius: 50% !important; } */ /* ──────────────────────────────────────────────── 9. СЕКЦІЇ ──────────────────────────────────────────────── */ /* Прозора секція «3 blocks below slider» */ body.ebdarkmodecolor #qx-section-3blocks-below-slider { background-color: #ffffff00 !important; } /* ──────────────────────────────────────────────── 10. ACCORDION / FAQ ──────────────────────────────────────────────── */ body.ebdarkmodecolor .qx-accordion-title { border-bottom-color: rgba(255,255,255,0.08) !important; color: #e2e8f0 !important; } body.ebdarkmodecolor .qx-open .qx-accordion-title, body.ebdarkmodecolor .qx-accordion-title:hover { background-color: rgba(225,10,23,0.1) !important; color: #fff !important; } body.ebdarkmodecolor .qx-accordion-content { border-color: rgba(255,255,255,0.06) !important; color: #cbd5e1 !important; } /* ──────────────────────────────────────────────── 11. ВІДЕО-КІЛ / circular video (FAQ Call секція) ──────────────────────────────────────────────── */ body.ebdarkmodecolor #qx-section-faq-call video { background-color: #091827; } /* ──────────────────────────────────────────────── 12. ЗАГАЛЬНІ ТИПОГРАФІЧНІ ЕЛЕМЕНТИ ──────────────────────────────────────────────── */ body.ebdarkmodecolor blockquote, body.ebdarkmodecolor .uk-blockquote { border-left-color: var(--kc-red) !important; background: rgba(225,10,23,0.06) !important; color: #cbd5e1 !important; } body.ebdarkmodecolor hr { border-color: rgba(255,255,255,0.08) !important; } body.ebdarkmodecolor code, body.ebdarkmodecolor pre { background: rgba(255,255,255,0.06) !important; color: #fca5a5 !important; border-color: rgba(255,255,255,0.08) !important; } /* ──────────────────────────────────────────────── 13. ПАГІНАЦІЯ ──────────────────────────────────────────────── */ body.ebdarkmodecolor .pagination li a, body.ebdarkmodecolor .uk-pagination > * > a, body.ebdarkmodecolor .uk-pagination > * > span { background: #091827 !important; border-color: rgba(255,255,255,0.1) !important; color: #cbd5e1 !important; } body.ebdarkmodecolor .pagination li.active a, body.ebdarkmodecolor .uk-pagination > .uk-active > a, body.ebdarkmodecolor .uk-pagination > .uk-active > span { background: var(--kc-red) !important; border-color: var(--kc-red) !important; color: #fff !important; } /* ──────────────────────────────────────────────── 14. ХЕДЕР ДРУГОГО РІВНЯ (sticky bar, topbar) Вже перекрито в основному файлі, але підсилюємо ──────────────────────────────────────────────── */ body.ebdarkmodecolor #sp-top-bar { background: rgb(0,14,22) !important; border-bottom-color: rgba(255,255,255,0.06) !important; } /* Соціальні іконки в topbar */ body.ebdarkmodecolor #sp-top-bar .social-icons a, body.ebdarkmodecolor .social-icons a { background: rgba(255,255,255,0.07) !important; color: #94a3b8 !important; border-color: rgba(255,255,255,0.1) !important; } body.ebdarkmodecolor .social-icons a:hover { background: var(--kc-red) !important; color: #fff !important; } /* ──────────────────────────────────────────────── 15. СКРОЛБАР (WebKit) ──────────────────────────────────────────────── */ body.ebdarkmodecolor ::-webkit-scrollbar-track { background: #091827; } body.ebdarkmodecolor ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-color: #091827; } body.ebdarkmodecolor ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); } /* ──────────────────────────────────────────────── 16. BADGES / TAGS / CHIPS ──────────────────────────────────────────────── */ body.ebdarkmodecolor .uk-label, body.ebdarkmodecolor .badge, body.ebdarkmodecolor .label { background: rgba(255,255,255,0.08) !important; color: #e2e8f0 !important; } body.ebdarkmodecolor .uk-label-danger, body.ebdarkmodecolor .badge-danger, body.ebdarkmodecolor .label-danger { background: rgba(225,10,23,0.2) !important; color: #fca5a5 !important; } /* ──────────────────────────────────────────────── 17. ТУЛТІПИ / POPOVERS ──────────────────────────────────────────────── */ body.ebdarkmodecolor .uk-tooltip { background: #0f2035 !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,0.1) !important; } /* ──────────────────────────────────────────────── 18. ВІДЕО-ЛОГОТИП у секції "Ми у числах" MP4-файл має білий фон, вбудований у відео. CSS не може зробити білий колір прозорим для MP4 (тільки WebM з альфа-каналом підтримує прозорість). Рішення: оформляємо контейнер як білу картку, щоб виглядало навмисно. ──────────────────────────────────────────────── */ body.ebdarkmodecolor #qx-raw-html-video-logo { background: #04151f !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; display: inline-block !important; } body.ebdarkmodecolor #qx-raw-html-video-logo video { display: block !important; } /* ──────────────────────────────────────────────── 20. СЛАЙДЕР (#qx-section-slider) Проблема: EB Dark Mode module ставить background-color: rgb(0,21,31) inline НА КОЖЕН елемент всередині слайдера, включаючи .qx-overlay-primary — абсолютний div, що повністю перекриває фонові зображення слайдів (img залишається, але позаду глухого фону). Оригінальний CSS: .qx-overlay-primary { background: rgba(34,34,34,0.9); } → модуль замінив на rgb(0,21,31) = 100% opacity, фото зникли. Рішення: • Всі wrapper-елементи → transparent (нейтралізуємо inline-стилі) • .qx-overlay-primary → напівпрозорий темний (зберігаємо читаність тексту, але дозволяємо фото просвічуватись) ──────────────────────────────────────────────── */ /* Прозорі обгортки всередині слайдера */ body.ebdarkmodecolor #qx-section-slider .qx-container-fluid, body.ebdarkmodecolor #qx-section-slider .qx-row-wrap, body.ebdarkmodecolor #qx-section-slider .qx-row, body.ebdarkmodecolor #qx-section-slider .qx-column, body.ebdarkmodecolor #qx-section-slider .qx-col-wrap, body.ebdarkmodecolor #qx-section-slider .qx-elements-wrap, body.ebdarkmodecolor #qx-section-slider .qx-element-wrap, body.ebdarkmodecolor #qx-section-slider .qx-element, body.ebdarkmodecolor #qx-section-slider .slider-content-wrapper, body.ebdarkmodecolor #qx-section-slider .qx-transition-toggle, body.ebdarkmodecolor #qx-section-slider .qx-background-overlay, body.ebdarkmodecolor #qx-section-slider #qx-slideshow-1, body.ebdarkmodecolor #qx-section-slider h1, body.ebdarkmodecolor #qx-section-slider h2, body.ebdarkmodecolor #qx-section-slider h3, body.ebdarkmodecolor #qx-section-slider p, body.ebdarkmodecolor #qx-section-slider .qx-element-blurb_wrapper, body.ebdarkmodecolor #qx-section-slider .qx-element-blurb__content, body.ebdarkmodecolor #qx-section-slider .qx-element-blurb__title, body.ebdarkmodecolor #qx-section-slider .qx-element-blurb__body, body.ebdarkmodecolor #qx-section-slider .qx-element-blurb__subtitle, body.ebdarkmodecolor #qx-section-slider .qx-slidenav-container, body.ebdarkmodecolor #qx-section-slider #slider-company-name-after div, body.ebdarkmodecolor #qx-row-4blocks-phones .qx-col-wrap, body.ebdarkmodecolor #qx-row-4blocks-phones .qx-element-blurb__content .qx-element-blurb__title, body.ebdarkmodecolor #qx-row-4blocks-phones .qx-element-blurb__content .qx-element-blurb__body, body.ebdarkmodecolor #qx-row-4blocks-phones .qx-element-blurb__content .qx-element-blurb__body p, body.ebdarkmodecolor #qx-row-4blocks-phones .qx-background-overlay, body.ebdarkmodecolor #qx-row-4blocks-phones .qx-background-overlay .qx-element-blurb_wrapper, body.ebdarkmodecolor #qx-row-slider-company-name-emblems *, body.ebdarkmodecolor #qx-section-useful-phones *, body.ebdarkmodecolor #qx-button-faq1 *, body.ebdarkmodecolor #qx-button-faq2 *, body.ebdarkmodecolor #qx-button-faq3 *, body.ebdarkmodecolor #qx-button-faq4 *, body.ebdarkmodecolor #qx-button-faq5 *, body.ebdarkmodecolor #qx-button-faq6 *, body.ebdarkmodecolor #qx-column-we-are-in-numbers-block1 *, body.ebdarkmodecolor #qx-column-we-are-in-numbers-block2 *, body.ebdarkmodecolor #qx-column-we-are-in-numbers-block3 *, body.ebdarkmodecolor #qx-column-we-are-in-numbers-block4 * { background-color: transparent !important; } body.ebdarkmodecolor #qx-section-faq-call #qx-raw-html-video-car * { background-color: rgb(255 3 3) !important; } /* Оверлей слайду — відновлюємо напівпрозорість. 60% темного navy = зображення видно, але текст читається. */ body.ebdarkmodecolor #qx-section-slider .qx-overlay-primary { background-color: rgba(0, 10, 18, 0.60) !important; } /* Прибираємо фон з 3blocks-below-slider. */ body.ebdarkmodecolor #qx-section-3blocks-below-slider .qx-container, body.ebdarkmodecolor #qx-section-3blocks-below-slider .qx-container #qx-row-3blocks-below-slider, body.ebdarkmodecolor #qx-section-3blocks-below-slider .qx-container #qx-row-3blocks-below-slider .qx-row { background: none !important; } body.ebdarkmodecolor #sp-top-bar, body.ebdarkmodecolor #sp-top-bar * { background-color: rgb(46 49 51) !important; } body.ebdarkmodecolor #qx-button-faq1 .qx-element-button-wrapper path, body.ebdarkmodecolor #qx-button-faq2 .qx-element-button-wrapper path, body.ebdarkmodecolor #qx-button-faq3 .qx-element-button-wrapper path, body.ebdarkmodecolor #qx-button-faq4 .qx-element-button-wrapper path, body.ebdarkmodecolor #qx-button-faq5 .qx-element-button-wrapper path, body.ebdarkmodecolor #qx-button-faq6 .qx-element-button-wrapper path { fill: rgb(255 255 255 / 87%); } body.ebdarkmodecolor #qx-column-3blocks-below-slider-block1, body.ebdarkmodecolor #qx-column-3blocks-below-slider-block1 *, body.ebdarkmodecolor #qx-column-3blocks-below-slider-block2, body.ebdarkmodecolor #qx-column-3blocks-below-slider-block2 *, body.ebdarkmodecolor #qx-column-3blocks-below-slider-block3, body.ebdarkmodecolor #qx-column-3blocks-below-slider-block3 *, body.ebdarkmodecolor #qx-column-4blocks-phones-block1, body.ebdarkmodecolor #qx-column-4blocks-phones-block1 *, body.ebdarkmodecolor #qx-column-4blocks-phones-block2, body.ebdarkmodecolor #qx-column-4blocks-phones-block2 *, body.ebdarkmodecolor #qx-column-4blocks-phones-block3, body.ebdarkmodecolor #qx-column-4blocks-phones-block3 *, body.ebdarkmodecolor #qx-column-4blocks-phones-block4, body.ebdarkmodecolor #qx-column-4blocks-phones-block4 *, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block1, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block1 *, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block2, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block2 *, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block3, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block3 *, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block4, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block4 *, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block5, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block5 *, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block6, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block6 *, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block7, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block7 *, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block8, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block8 *, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block9, body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block9 * { background-color: #030e14!important; } body.ebdarkmodecolor #qx-button-faq1 a:hover, body.ebdarkmodecolor #qx-button-faq2 a:hover, body.ebdarkmodecolor #qx-button-faq3 a:hover, body.ebdarkmodecolor #qx-button-faq4 a:hover, body.ebdarkmodecolor #qx-button-faq5 a:hover, body.ebdarkmodecolor #qx-button-faq6 a:hover{ background-color: #ef161b!important; } body.ebdarkmodecolor button.djacc__openbtn { background-color: rgb(105 105 105)!important; } body.ebdarkmodecolor #qx-section-first-aid-help .holographic-container .holographic-card { background: rgb(255 3 3 / 52%) !important; } body.ebdarkmodecolor #qx-section-fa5a6, #qx-section-fa5a6 *{ background-color: transparent !important; } /* ──────────────────────────────────────────────── 19. LOGO — перемикання на білу версію Переконайтесь, що файл /images/logo-wh.png існує. Якщо URL інший — скоригуйте нижче. ──────────────────────────────────────────────── */ /* body.ebdarkmodecolor #sp-header .logo img { content: url('/images/logo-wh.png') !important; } */ /* ↑ Закоментовано — логотип (кольорові цифри 103) добре виглядає і на темному фоні. Розкоментуйте за потреби. */