/* =================================================================== Банер на головній — додаткові стилі Файл: /wp-content/themes/proVikna/banner-custom.css =================================================================== */ /* Фікс: десь у шапці сайту є правило, яке помилково ховає .wc_payment_methods.payment_methods.methods та .checkout__form-title разом з іншими непов'язаними елементами. Перебиваємо тут, поки не знайдено й не виправлено оригінальне джерело. */ .wc_payment_methods.payment_methods.methods, .checkout__form-title { display: block !important; } /* Відступи для заголовків h2 у тексті статей блогу — сайт має глобальне скидання margin:0 (* {margin:0}), і власні відступи раніше були задані тільки для h3 (.content p + h3 тощо). Статті, написані з h2 (як заголовки другого рівня), лишались без жодного відступу. Дзеркалимо той самий підхід для h2. */ .content h2, .blog__content h2 { margin-top: 4rem; margin-bottom: 2rem; } .content p, .blog__content p { margin-bottom: 2rem; } .content ul, .blog__content ul, .content ol, .blog__content ol { margin-bottom: 2rem; } .content ul li, .blog__content ul li { margin-bottom: 0.8rem; } /* Ефект fade накладає всі слайди один на одного в тій самій позиції. Неактивні мають opacity:0, але залишаються КЛІКАБЕЛЬНИМИ — через це кнопка невидимого слайда перехоплює клік (напр. "До каталогу" зі слайда 1 з'їдала клік по "Замовити дзвінок"). Вимикаємо взаємодію з усіма слайдами, крім активного. */ .banner__slide { pointer-events: none; } .banner__slide.swiper-slide-active { pointer-events: auto; } .banner__slide--clickable.swiper-slide-active { cursor: pointer; } /* --- Підзаголовок слайда ------------------------------------------- */ .banner__subtitle { font-size: 1.8rem; line-height: 1.4; font-weight: 400; margin: 1.6rem 0 0 !important; opacity: 0.85; } .banner__slide-wrap h1, .banner__slide-wrap h2 { margin-bottom: 0; } .banner__slide-wrap h1 + .banner__subtitle, .banner__slide-wrap h2 + .banner__subtitle { margin-top: 1rem; } /* --- Проти "вилітання збоку" при завантаженні сторінки ------------- */ /* Поки Swiper ще не ініціалізувався, слайди лежать у звичайному ряду (як задумано в HTML/flex до того, як JS розставить fade-позиції). Ховаємо все, крім першого слайда, до появи класу swiper-initialized, який Swiper додає сам одразу після старту. */ .banner__slider:not(.swiper-initialized) .swiper-slide { display: none; } .banner__slider:not(.swiper-initialized) .swiper-slide:first-child { display: flex; } /* --- Повношириний фон банера (два шари з плавним crossfade) -------- */ /* .banner__bg — прямі діти .banner (НЕ всередині .container), тому тягнуться на всю ширину сторінки, а не обмежені шириною контейнера. JS (index.php) підмінює background-image неактивного шару і плавно перемикає клас is-active — синхронно з fade-переходом тексту. */ .banner { position: relative; overflow: hidden; } .banner__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.4s ease; z-index: 0; } .banner__bg.is-active { opacity: 1; } .banner--has-bg::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100% ); z-index: 1; } .banner--has-bg .container, .banner--has-bg .banner__tip { position: relative; z-index: 2; } .banner--has-bg .banner__slide h1, .banner--has-bg .banner__slide h2, .banner--has-bg .banner__subtitle { color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } .banner__slide--full { justify-content: flex-start; } .banner__slide--full .banner__slide-wrap { max-width: 60rem; } /* --- Десктоп: текст full-bg слайда по центру ---------------------- */ /* Обмежено min-width:577px, щоб не зачепити мобільну версію, де .banner__slide перемикається на flex-direction:column і justify-content відповідає вже за вертикальну вісь. */ @media only screen and (min-width: 577px) { .banner__slide--full { justify-content: center; } .banner__slide--full .banner__slide-wrap { text-align: center; } .banner__slide--full .banner__slide-bttn { justify-content: center; } /* autoHeight у Swiper (додали заради мобільної версії) виставляє висоту слайдера під висоту самого тексту — через це на десктопі текст лип до верху, а решта фото лишалась порожньою. Повертаємо слайдеру повну висоту банера, щоб спрацювало вертикальне центрування з базового banner.css (align-items:center). !important потрібен, бо Swiper пише висоту в inline-стиль. */ .banner__slider, .banner__slider .swiper-wrapper { height: 100% !important; } .banner__slide { height: 100% !important; } } /* --- СТРІЛКИ: перебиваємо swiper-button-lock, який їх ховає -------- */ /* Swiper додає display:none стрілкам, бо вони поза його контейнером. Показуємо їх примусово (крім випадку одного слайда). */ .banner .banner__nav-bttn { display: flex !important; width: 5rem; pointer-events: auto; z-index: 5; } .banner .banner__nav-bttn.banner__prev { left: 0; } .banner .banner__nav-bttn.banner__next { right: 0; } /* Іконка стрілки — гарантуємо видимий розмір */ .banner .banner__nav-bttn img { width: 2.4rem; height: auto; display: block; } /* Один слайд — ховаємо стрілки і пагінацію */ .banner--single .banner__nav-bttn, .banner--single .banner__pagination { display: none !important; } /* Білі стрілки на темному фото (клас banner--has-bg перемикається легким JS лише для кольору стрілок/крапок, фон він більше не чіпає) */ .banner--has-bg .banner__nav-bttn img { filter: brightness(0) invert(1); opacity: 0.85; } .banner--has-bg .banner__nav-bttn:hover img { opacity: 1; } /* --- Пагінація (крапки — скільки всього банерів) ------------------- */ /* Видима завжди, з двома варіантами кольору залежно від фону слайда */ .banner__pagination { position: relative; z-index: 5; } .banner__pagination .swiper-pagination-bullet { background: #3C4DA1; opacity: 0.35; width: 1rem; height: 1rem; margin: 0 0.4rem; } .banner__pagination .swiper-pagination-bullet-active { opacity: 1; } .banner--has-bg .banner__pagination .swiper-pagination-bullet { background: #ffffff; opacity: 0.5; } .banner--has-bg .banner__pagination .swiper-pagination-bullet-active { opacity: 1; } /* --- Кнопки ------------------------------------------------------- */ .banner__slide-bttn { display: flex; flex-wrap: wrap; gap: 1.5rem; } .banner--has-bg .banner__slide-bttn .bttn { background: #ffffff; color: #3C4DA1; border: none; padding: 1.4rem 3rem; font-weight: 600; border-radius: 8px; text-shadow: none; transition: background-color 0.2s ease, transform 0.2s ease; } .banner--has-bg .banner__slide-bttn .bttn:hover { background: #F0F2FA; transform: translateY(-2px); } .banner--has-bg .banner__slide-bttn .bttn:nth-child(2) { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8); } .banner--has-bg .banner__slide-bttn .bttn:nth-child(2):hover { background: rgba(255, 255, 255, 0.15); } /* --- Мобільна версія ---------------------------------------------- */ @media only screen and (max-width: 576px) { .banner__slide-bttn { gap: 1rem; } .banner__slide--full .banner__slide-wrap { max-width: 100%; } .banner--has-bg::before { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.5) 100% ); } .banner--has-bg .banner__slide-bttn .bttn { padding: 1.2rem 2rem; font-size: 1.4rem; } .banner .banner__nav-bttn { width: 3.5rem; } /* Заголовок банера на мобільному — трохи менший шрифт, ніж на десктопі. Текст переноситься на стільки рядків, скільки треба, без обрізання "..." — висоту банера тепер тримає autoHeight у Swiper (app.js), тож "роздування" .banner довгим текстом більше не проблема. */ .banner__slide h1, .banner__slide h2 { font-size: 1.15rem !important; line-height: 1.2 !important; } .banner__subtitle { font-size: 0.95rem; line-height: 1.25; margin: 0.3rem 0 0 !important; } .banner__slide-wrap { padding: 1rem 0; } .banner--has-bg .banner__slide-wrap { padding: 0.5rem 0.75rem; } .banner__slide-bttn { margin-top: 0.6rem; } .banner__slide-bttn .bttn { padding: 1rem 1.6rem !important; font-size: 1.3rem !important; } /* Базовий banner.css задає контейнеру padding-top:11rem на 576px (розраховано на старий, набагато вищий банер) і лише 1.5rem зліва/справа — через це порожній простір зверху/знизу і текст впритул до стрілок (стрілки шириною 3.5rem). Стискаємо вертикальний відступ і розширюємо горизонтальний, щоб текст/фото не заходили в зону стрілок. */ .banner .container { padding-top: 1.2rem; padding-bottom: 1.2rem; padding-left: 4rem; padding-right: 4rem; } /* Текст сидів угорі фото замість по центру: .swiper-wrapper мав висоту 210px, а сам слайд (position:relative, НЕ absolute) — лише 116px замість успадкованих 100%. Swiper через JS керує transform слайда (горизонтальна компенсація для fade-ефекту), тому transform чіпати не можна - конфліктувало б з JS. Форсуємо height через !important замість цього. */ .banner__slide--full { height: 100% !important; display: flex !important; justify-content: center !important; } /* Слайд типу "side" (фото поруч із текстом) — базовий banner.css перемикає .banner__slide на flex-direction:column на мобільному (фото падає під текст). Тут повертаємо фото збоку, як на десктопі, просто звужуючи обидві колонки замість стекання. */ .banner__slide--side { flex-direction: row !important; gap: 1.5rem !important; } .banner__slide--side .banner__slide-wrap { max-width: 55%; } .banner__slide--side .banner__img { width: 42%; flex-shrink: 0; } .banner__slide--side .banner__img img { height: 100%; } } /* =================================================================== Форма CF7 всередині попапа Форма має класи footer__form-* (стилі під широкий футер), у вузькому попапі вони ламають верстку — перевизначаємо. =================================================================== */ .popup__form .footer__form-row { display: block !important; width: 100% !important; } .popup__form .wpcf7 { width: 100%; } .popup__form .wpcf7-form p, .popup__form .wpcf7-form br { margin: 0; } .popup__form .wpcf7-form-control-wrap { display: block; width: 100%; margin-bottom: 1.2rem; } .popup__form .wpcf7 input[type="text"], .popup__form .wpcf7 input[type="tel"], .popup__form .wpcf7 input[type="email"], .popup__form .wpcf7 textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } .popup__form .footer__form-bttn { width: 100%; margin-top: 0.5rem; } .popup__form .wpcf7 input[type="submit"] { width: auto; min-width: 16rem; } /* Заголовок форми в попапі — без ліній, чиста картка (як у попапі входу/реєстрації) */ .popup__form .wpcf7 h3 { margin: 0 3rem 2rem 0; font-size: 2rem; color: #0d0e0e; } /* Прибираємо будь-який
, вписаний вручну в контент форми CF7 */ .popup__form .wpcf7-form hr, .footer__form .wpcf7-form hr { display: none !important; } /* Знайдено інспектором: "лінія" над формою — це браузерна рамка fieldset, яку CF7 5.9+ автоматично додає навколо прихованих полів для доступності (screen readers). Рамка не потрібна візуально. */ fieldset.hidden-fields-container { border: none !important; padding: 0 !important; margin: 0 !important; } /* Округла картка, як у попапі акаунту (.popup__account). Базовий .popup має min-height:40rem — для короткої форми (3 поля + кнопка) це лишає купу порожнього простору знизу, тому прибираємо саме тут, не займаючи інші попапи сайту. */ .popup__form { border-radius: 1.6rem; padding: 2.4rem 2.4rem 2.8rem; min-height: auto; height: auto; } /* Повідомлення CF7 (помилки / успіх) */ .popup__form .wpcf7-response-output { margin: 1.5rem 0 0 !important; font-size: 1.3rem; } /* =================================================================== Єдиний стиль полів для форми зворотного зв'язку (CF7) Приводимо до того самого вигляду, що й попап входу/реєстрації (.popup__account): світла рамка #d4d4d4, радіус 0.3rem, тінь при фокусі — замість темнішої рамки #2c2c2c, яка була раніше. Стосується форми і у футері, і в попапі банера. =================================================================== */ .footer__form input[type="text"], .footer__form input[type="tel"], .footer__form input[type="email"], .footer__form textarea, .popup__form .wpcf7 input[type="text"], .popup__form .wpcf7 input[type="tel"], .popup__form .wpcf7 input[type="email"], .popup__form .wpcf7 textarea { border: 1px solid #d4d4d4 !important; border-radius: 0.3rem; padding: 1.3rem 1.8rem; font-size: 1.4rem; color: #2c2c2c; background-color: #ffffff; transition: all 0.2s ease; } .footer__form input[type="text"]::placeholder, .footer__form input[type="tel"]::placeholder, .footer__form textarea::placeholder, .popup__form .wpcf7 input::placeholder, .popup__form .wpcf7 textarea::placeholder { color: #8a8a8a; font-size: 1.4rem; } .footer__form input[type="text"]:focus, .footer__form input[type="tel"]:focus, .footer__form input[type="text"]:active, .footer__form input[type="tel"]:active, .footer__form textarea:focus, .popup__form .wpcf7 input:focus, .popup__form .wpcf7 input:active, .popup__form .wpcf7 textarea:focus { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); outline: none; } .footer__form textarea, .popup__form .wpcf7 textarea { width: 100%; min-height: 9rem; resize: vertical; font-family: inherit; } /* =================================================================== Футер: поля "Ім'я" і телефон однакової ширини Поле телефону змінили з type="text" на type="tel" (щоб на мобільному відкривалась цифрова клавіатура). У браузера різні дефолтні розміри для цих типів, тому телефон почав займати більше місця, а "Ім'я" стислось. Задаємо ширину явно — по половині рядка кожному. .popup__form має власне правило з !important (display:block), тому в попапі поля лишаються один під одним, як і було. =================================================================== */ .footer__form .footer__form-row { display: flex; gap: 1.2rem; align-items: flex-start; } .footer__form .footer__form-row .wpcf7-form-control-wrap { flex: 1 1 0; min-width: 0; } .footer__form .footer__form-row input { width: 100%; box-sizing: border-box; } /* Заголовок форми у футері — без зайвої лінії */ /* ===== Конфігуратор: однакові поля вводу на десктопі (08.08.26) ===== */ @media (min-width: 879px) { .product-configurator .input-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px 16px; align-items: end; } .product-configurator .input-grid .field-group { width: auto !important; min-width: 0; margin: 0 !important; } .product-configurator .input-grid .field-group input, .product-configurator .input-grid .ui-number { width: 100% !important; box-sizing: border-box; } } /* ===== Плашка «Акція» на картках товарів з категорії Акції (09.08.26) ===== */ .woocommerce li.product.product_cat-akcziyi .product__item { position: relative; } .woocommerce li.product.product_cat-akcziyi .product__item::before { content: "Акція"; position: absolute; top: 10px; right: 10px; z-index: 5; background: #e63946; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .02em; padding: 6px 10px; border-radius: 4px; pointer-events: none; } /* Штучний товар: заголовок рядка прибрано, тому повертаємо верхній відступ (11.08.26) */ #simpleProductConfigurator .row-content { padding-top: 1.25rem; } /* Заголовок рядка калькулятора: менший шрифт, щоб розміри влазили в один рядок (11.08.26) */ .product-configurator .row-title { font-size: 1.05rem; line-height: 1.3; } @media (max-width: 878px) { .product-configurator .row-title { font-size: 0.95rem; } .product-configurator .row-header { gap: 0.75rem; } } /* Заголовок рядка калькулятора: менший шрифт, щоб розміри влазили в один рядок (11.08.26) */ .product-configurator .row-title { font-size: 1.05rem; line-height: 1.3; } @media (max-width: 878px) { .product-configurator .row-title { font-size: 0.95rem; } .product-configurator .row-header { gap: 0.75rem; } } /* Заголовок рядка: перебиваємо стиль теми (11.08.26) */ .product-configurator .config-row .row-header .row-title { font-size: 19px !important; line-height: 1.3 !important; font-weight: 600 !important; } @media (max-width: 878px) { .product-configurator .config-row .row-header .row-title { font-size: 17px !important; } } /* ===== Головна: перший екран у три колонки (19.08.26) ===== */ /* Категорії ліворуч, слайдер по центру, постійна плитка праворуч. Плитка — це слайд із slide_layout = "promo": index.php виймає його зі слайдера й малює окремо. Усе замкнено в min-width:878px — мобільна версія працює як раніше, на ній бічні колонки просто не виводяться. */ @media only screen and (max-width: 877px) { /* На телефоні бічних колонок немає: категорії дає гамбургер «Каталог», плитка займала б цілий екран. */ .home-hero__cats, .home-hero__promo { display: none; } /* Нова розмітка ввела обгортки .home-hero і .home-hero__main. Мобільні правила теми розраховані на стару структуру, де слайдер лежав прямо в .container — а той має display:flex. Через це на телефоні розкладка розсипалась. Тут повертаємо звичайний потік: контейнер стає блоком, слайдер займає всю ширину, і далі працюють ті самі мобільні правила banner.css, що й до перебудови. */ .banner--hero .container.home-hero { display: block; height: auto; } .banner--hero .home-hero__main { width: 100%; max-width: 100%; border-radius: 0; background: none; /* Шари фону (.banner__bg) тепер лежать усередині цієї обгортки. Без position:relative вони чіплялись до .container і обрізались його бічними відступами — фото виглядало «коробкою» в сірій рамці. */ position: relative; } /* Контейнер на мобільному без бічних відступів, щоб фото слайда йшло від краю до краю, як було до перебудови. Відступи тексту лишаються всередині самого слайда. */ .banner--hero .container.home-hero { padding-left: 0; padding-right: 0; } /* Затемнення для читабельності білого тексту: на мобільному воно задане на .banner, а фон тепер усередині — переносимо сюди. */ .banner--hero.banner--has-bg .home-hero__main::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.1) 100% ); z-index: 1; } .banner--hero .home-hero__main .banner__slider { position: relative; z-index: 2; } /* Кнопки на телефоні лишаються у звичайному потоці під текстом — фіксована позиція потрібна лише для рівняння двох колонок, а на мобільному колонка одна. */ .banner--hero .home-hero__main .banner__slide .banner__slide-bttn { position: static; margin-top: 2rem; } .banner--hero .home-hero__main .banner__slide .banner__slide-wrap { padding-bottom: 0; } } @media only screen and (min-width: 878px) { /* banner.css задає .banner висоту на весь екран — для нової розкладки вона не потрібна, висоту тримає сітка нижче. */ .banner--hero { height: auto; min-height: 0; padding: 2.5rem 0 0; background: none; } .banner--hero .container.home-hero { display: grid; /* Без плитки праворуч — дві колонки, щоб слайдер не лишав порожнього місця. Третя з'являється разом із promo-слайдом. */ grid-template-columns: 24rem minmax(0, 1fr); gap: 2rem; align-items: stretch; /* Висота дорівнює висоті списку категорій: банер і плитка закінчуються рівно на «Всі категорії». 8 пунктів по ~4.6rem. */ height: 38rem; padding-left: 2.5rem; padding-right: 2.5rem; } .banner--hero .container.home-hero--with-promo { grid-template-columns: 24rem minmax(0, 1fr) 30rem; } /* Затемнення фону задане на .banner і тягнулось на всю ширину — разом із колонкою категорій, через що вони сіріли. Переносимо його всередину слайдера, де воно й потрібне. */ .banner--hero.banner--has-bg::before { display: none; } .banner--hero.banner--has-bg .home-hero__main::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100% ); z-index: 1; } .banner--hero .home-hero__main .banner__slider { position: relative; z-index: 2; } /* --- ліва колонка: категорії --- */ .home-hero__cats-list { display: flex; flex-direction: column; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .home-hero__cats-item a, .home-hero__cats-item span { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.6rem; border-radius: 0.8rem; border: 1px solid transparent; font-size: 1.6rem; font-weight: 500; line-height: 1.2; color: #0d0e0e; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; } /* Стрілка праворуч — чистий CSS, без додаткових картинок. */ .home-hero__cats-item a::after, .home-hero__cats-item span::after { content: ""; flex: none; width: 0.7rem; height: 0.7rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: 0.5; } .home-hero__cats-item a:hover { border-color: #3c4da1; } .home-hero__cats-item.is-sale a { color: #e63946; } /* Пункти без посилання — сторінок ще немає. */ .home-hero__cats-item.is-plain span { cursor: default; } /* --- центральна колонка: слайдер --- */ .home-hero__main { position: relative; overflow: hidden; border-radius: 1.2rem; min-width: 0; /* Той самий градієнт, що banner.css задавав усьому банеру. Вище ми зняли фон із .banner--hero, щоб він не заливав колонку категорій — тому повертаємо його сюди, де він і потрібен: як підложка під слайди без власного фото. */ background: linear-gradient(90deg, #cad1d7 4.09%, #f1f2f4 51.79%, #cbd2d8 99.76%); } /* У вужчій колонці бічні відступи слайда завеликі. */ .home-hero__main .banner__slide { padding: 0 5rem; } /* Фото збіля тексту вписуємо по висоті колонки, а не по ширині — інакше воно вилазить за межі й відпихає текст. */ .home-hero__main .banner__slide > * { min-width: 0; } .home-hero__main .banner__img { display: flex; align-items: center; justify-content: flex-end; min-width: 0; } .home-hero__main .banner__slide img { width: auto; max-width: 100%; height: auto; max-height: 26rem; -o-object-fit: contain; object-fit: contain; } /* --- права колонка: постійна плитка --- */ .home-hero__promo { position: relative; display: flex; align-items: center; overflow: hidden; border-radius: 1.2rem; background-position: center; background-repeat: no-repeat; background-size: cover; } .home-hero__promo.is-clickable { cursor: pointer; } /* Затемнення знизу — щоб білий текст читався на будь-якому фото. */ .home-hero__promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%); } .home-hero__promo-inner { position: relative; z-index: 1; width: 100%; padding: 2.4rem 2rem; text-align: center; } .home-hero__promo-title { font-size: 2rem; line-height: 1.25; color: #ffffff; margin-bottom: 0.8rem; } .home-hero__promo-text { font-size: 1.4rem; line-height: 1.4; color: #ffffff; margin-bottom: 1.6rem; } .home-hero__promo-bttn .bttn { background: #ffffff; color: #3c4da1; } } /* ===== Головна: доведення типографіки і слайдів (21.08.26) ===== */ @media only screen and (min-width: 878px) { /* --- 1. Шрифти в банері зменшені під вужчу колонку --- */ .home-hero__main .banner__slide h1, .home-hero__main .banner__slide h2 { font-size: 2.6rem; line-height: 1.2; } .home-hero__main .banner__subtitle { font-size: 1.5rem; line-height: 1.45; } /* --- 2. Слайд «фото на всю ширину»: текст збоку, не по центру --- */ /* Перебиваємо правило центрування, задане вище у цьому ж файлі для min-width:577px. Затемнення найсильніше зліва, тому текст там і має стояти. */ .home-hero__main .banner__slide--full { justify-content: flex-start; align-items: center; } .home-hero__main .banner__slide--full .banner__slide-wrap { max-width: 38rem; text-align: left; } .home-hero__main .banner__slide--full .banner__slide-bttn { justify-content: flex-start; } /* Затемнення робимо вужчим і щільнішим зліва: фото праворуч лишається чистим, а білий текст читається навіть на світлому знімку — як на фото підвіконня. */ .banner--hero.banner--has-bg .home-hero__main::before { background: linear-gradient( 90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 75% ); } /* --- 3. Слайд «фото збоку»: фото більше, текст вужчий --- */ .home-hero__main .banner__slide:not(.banner__slide--full) { gap: 3rem; padding: 0 4rem; } .home-hero__main .banner__slide:not(.banner__slide--full) .banner__slide-wrap { max-width: 34rem; } .home-hero__main .banner__slide img { max-height: 34rem; } /* --- 4. Заголовки наступних розділів --- */ /* «Популярні категорії», «Новинки», «Популярні товари», «Акції», «Блог» — були непропорційно великі поруч із новим банером. */ .section--header h2 { font-size: 2.4rem; line-height: 1.2; } } /* ===== Стрілки слайдера: симетрія в межах колонки (21.08.26) ===== */ /* banner.css позиціонує .banner__nav-bttn абсолютно від .banner, тобто від усього блока разом із категоріями — тому ліва стрілка наїжджала на край слайдера, а права стояла поза ним. Прив'язуємо їх до .home-hero__main: точкою відліку стає сама колонка, і відступи виходять однакові з обох боків. */ @media only screen and (min-width: 878px) { .home-hero__main .banner__nav-bttn { top: 0; height: 100%; width: 4rem; display: flex; align-items: center; justify-content: center; z-index: 3; opacity: 0.75; transition: opacity 0.2s ease; } .home-hero__main .banner__nav-bttn:hover { opacity: 1; } .home-hero__main .banner__nav-bttn.banner__prev { left: 0.5rem; right: auto; } .home-hero__main .banner__nav-bttn.banner__next { right: 0.5rem; left: auto; } /* Крапки пагінації — по центру нижнього краю колонки, а не в куті, як було задано для повноширинного банера. */ .home-hero__main .banner__pagination { left: 0; right: 0; bottom: 1.2rem; text-align: center; z-index: 3; } } /* ===== Головна: відступи й лінія під заголовками розділів (21.08.26) ===== */ @media only screen and (min-width: 878px) { /* banner.css задає .banner + section { padding-top: 12rem } — 120px порожнечі під банером. Для нового першого екрана це забагато, блоки висіли надто низько. */ .banner--hero + section { padding-top: 4rem; } /* Сіра лінія під заголовками розділів лишається — з нею макет читається краще. Правимо тільки відступ під нею. */ .section--header { padding-bottom: 1.5rem; } } /* ===== Однакова форма кнопок у слайдері й на плитці (21.08.26) ===== */ /* Стиль кнопок задає клас .bttn у CSS теми — в ACF налаштовується тільки текст і тип (посилання / попап). Для плитки ми перевизначили лише кольори, тому розміри лишались базові й кнопки виглядали по-різному. Тут зрівнюємо форму: однакові відступи, заокруглення і кегль. Кольори лишаються різні — це навмисно, кожна кнопка має контрастувати зі своїм фоном. */ @media only screen and (min-width: 878px) { .home-hero__main .bttn, .home-hero__promo .bttn { display: inline-flex; align-items: center; justify-content: center; padding: 1.3rem 2.6rem; border-radius: 0.8rem; font-size: 1.5rem; font-weight: 600; line-height: 1.2; white-space: nowrap; } } /* ===== Кнопки слайдера і плитки на одній горизонталі (21.08.26) ===== */ /* Раніше кожна кнопка стояла після свого тексту, тому її позиція залежала від довжини заголовка — на різних слайдах вона стрибала, а з плиткою не збігалась узагалі. Тепер обидві прив'язані до низу своєї колонки на однакову відстань. Колонки в сітці однакової висоти, тож кнопки завжди на одній лінії, хоч який довгий текст у слайді. */ @media only screen and (min-width: 878px) { /* Однакові бічні відступи в обох типах слайдів — щоб кнопка стояла точно під текстом. */ .home-hero__main .banner__slide { position: relative; padding: 0 4rem; } .home-hero__main .banner__slide-bttn { position: absolute; left: 4rem; bottom: 3rem; margin-top: 0; z-index: 2; } /* Текст не має налазити на кнопку: лишаємо під нього місце. */ .home-hero__main .banner__slide-wrap { padding-bottom: 10rem; } .home-hero__promo-bttn { position: absolute; left: 0; right: 0; bottom: 3rem; text-align: center; z-index: 2; } .home-hero__promo-inner { padding-bottom: 9rem; } } /* ===== Фіксована кнопка на ВСІХ типах слайдів (21.08.26) ===== */ /* На слайді з фото на всю ширину кнопка досі йшла за текстом: правила для .banner__slide--full задані вище в цьому ж файлі мають вищу специфічність і перебивали загальне правило. Тут перелічуємо обидва типи явно, щоб позиція була однакова незалежно від макета слайда. */ @media only screen and (min-width: 878px) { .home-hero__main .banner__slide--full .banner__slide-bttn, .home-hero__main .banner__slide--side .banner__slide-bttn, .home-hero__main .banner__slide:not(.banner__slide--full) .banner__slide-bttn { position: absolute; left: 4rem; right: auto; bottom: 3rem; margin-top: 0; justify-content: flex-start; z-index: 2; } .home-hero__main .banner__slide--full .banner__slide-wrap, .home-hero__main .banner__slide--side .banner__slide-wrap, .home-hero__main .banner__slide:not(.banner__slide--full) .banner__slide-wrap { padding-bottom: 10rem; } } /* ===== ПІДСУМКОВЕ правило кнопок першого екрана (21.08.26) ===== */ /* Єдине джерело правди для позиції і форми кнопок у слайдері та на плитці. Стоїть у кінці файлу і має високу специфічність, щоб перебити всі попередні правила, накопичені раніше. Позиція однакова: 3rem від низу своєї колонки. Колонки в сітці рівної висоти, тож усі кнопки завжди на одній горизонталі — на будь-якому слайді й на плитці. Кольори лишаються різні: кожна кнопка контрастує зі своїм фоном. */ @media only screen and (min-width: 878px) { .banner--hero .home-hero__main .banner__slide .banner__slide-bttn { position: absolute; left: 4rem; right: auto; bottom: 3rem; margin: 0; display: flex; justify-content: flex-start; z-index: 2; } .banner--hero .home-hero__promo .home-hero__promo-bttn { position: absolute; left: 0; right: 0; bottom: 3rem; margin: 0; display: flex; justify-content: center; z-index: 2; } /* Однакова форма: розміри, заокруглення, кегль. */ .banner--hero .home-hero__main .banner__slide-bttn .bttn, .banner--hero .home-hero__promo .home-hero__promo-bttn .bttn { display: inline-flex; align-items: center; justify-content: center; height: 4.8rem; padding: 0 2.6rem; border-radius: 0.8rem; font-size: 1.5rem; font-weight: 600; line-height: 1; white-space: nowrap; } /* Текст не заходить на смугу кнопки. */ .banner--hero .home-hero__main .banner__slide .banner__slide-wrap, .banner--hero .home-hero__promo .home-hero__promo-inner { padding-bottom: 9rem; } } /* ===== Фільтри каталогу (01.09.26) ===== */ /* Штатні віджети WooCommerce (WC_Widget_Layered_Nav і WC_Widget_Price_Filter) замість плагіна BeRocket — він виявився несправним і був вимкнений. Розмітку віджетів змінити не можна, тому оформлюємо те, що вони віддають. Обгортки .shop__filters-item і .shop__filters-title задані в archive-product.php. Значення виводяться кнопками-тегами в ряд, а не списком стовпчиком: блок виходить удвічі нижчим і одразу читається як вибір. */ /* Блок фільтрів згорнутий за замовчуванням на ВСІХ екранах. Розгортається кліком по кнопці «Фільтри» — обробник в archive-product.php, він перемикає клас .active, а не інлайн-стиль. !important обов'язковий: тема задає .shop__filters-wrap власний display і без нього перебиває це правило. Саме через це раніше блок не згортався на десктопі — інлайн-стиль display:none програвав правилу з !important. */ .shop__filters .shop__filters-wrap { display: none !important; padding: 2rem 0; } .shop__filters .shop__filters-wrap.active { display: block !important; } /* Кнопка: курсор і поворот стрілки у відкритому стані. */ .shop__filters-bttn { cursor: pointer; } .shop__filters-bttn img { transition: transform 0.2s ease; } .shop__filters-bttn.active img { transform: rotate(180deg); } .shop__filters-item { margin: 0; } .shop__filters-title { font-size: 1.4rem; font-weight: 600; line-height: 1.2; color: #0d0e0e; margin-bottom: 1.2rem; } /* Список значень — ряд тегів. */ .shop__filters-item ul, .shop__filters-item ul li { list-style: none; margin: 0; padding: 0; } /* Теги однакової ширини: сітка з фіксованою шириною колонки замість flex. Так «Білий» і «Антрацит/Чорний» виглядають однаково, а ряд не рветься на різні за довжиною кнопки. */ .shop__filters-item ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 16rem)); gap: 0.8rem; justify-content: start; } .shop__filters-item ul li a { display: inline-flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 3.6rem; padding: 0 1.2rem; justify-content: center; text-align: center; border: 1px solid rgba(13, 14, 14, 0.15); border-radius: 2rem; font-size: 1.3rem; line-height: 1.2; color: #0d0e0e; text-decoration: none; white-space: normal; overflow-wrap: anywhere; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .shop__filters-item ul li a:hover { border-color: #3c4da1; color: #3c4da1; } /* Тема підкреслює посилання в каталозі псевдоелементом — на тезі це виглядало як обрізана рамка. Гасимо. */ .shop__filters-item ul li a::before, .shop__filters-item ul li a::after { display: none; } /* Тема виводить лічильник ПОЗА посиланням, тому він не потрапляє всередину тега. Ставимо його поруч, дрібним і сірим. */ .shop__filters-item ul li { display: inline-flex; align-items: center; gap: 0.4rem; } /* Тема виводить .count поза посиланням, тому він не потрапляє всередину тега. Ховаємо: кількість поруч із кнопкою розривала ряд і робила теги різної ширини. */ .shop__filters-item ul li .count { display: none; } /* Обране значення: WooCommerce додає клас chosen. */ .shop__filters-item ul li.chosen a { background: #3c4da1; border-color: #3c4da1; color: #ffffff; } .shop__filters-item ul li.chosen a:hover { background: #33418a; color: #ffffff; } .shop__filters-item ul li.chosen .count { color: rgba(255, 255, 255, 0.7); } /* Власний хрестик не додаємо: тема вже малює свою іконку зняття перед назвою обраного значення. Два хрестики на одному тезі виглядали помилкою. */ /* ── Ціна ─────────────────────────────────────────────── */ .shop__filters-price .price_slider_wrapper { max-width: 32rem; } .shop__filters-price .price_slider { position: relative; height: 0.4rem; margin: 1.8rem 0.9rem 2rem; background: #e4e6ef; border-radius: 0.4rem; } .shop__filters-price .ui-slider-range { position: absolute; height: 100%; background: #3c4da1; border-radius: 0.4rem; } .shop__filters-price .ui-slider-handle { position: absolute; top: 50%; width: 1.6rem; height: 1.6rem; margin-left: -0.8rem; transform: translateY(-50%); background: #ffffff; border: 2px solid #3c4da1; border-radius: 50%; cursor: pointer; outline: none; } .shop__filters-price .price_slider_amount { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 1.3rem; } .shop__filters-price .price_slider_amount .button { order: 2; padding: 0.7rem 1.8rem; border-radius: 2rem; background: #3c4da1; color: #ffffff; font-size: 1.3rem; border: none; cursor: pointer; } .shop__filters-price .price_label { order: 1; color: #555555; } @media only screen and (min-width: 768px) { /* Фільтри один під одним на всю ширину: так значення кожного стоять в один ряд і не переносяться, а блок читається зверху вниз. Правило display перенесене вгору (див. .shop__filters-wrap): тут його бути не повинно, інакше блок не згортається. */ .shop__filters .shop__filters-item + .shop__filters-item { margin-top: 2rem; } } @media only screen and (max-width: 767px) { .shop__filters-item + .shop__filters-item { margin-top: 2rem; } } /* Кнопка-перехід «Циліндри →» у фільтрі «Тип» на сторінці «Замки, циліндри, шпінгалети» (03.09.26). Це тепер звичайний
  • усередині того ж