/* Перенесено з WPCode (site_wide_header, CSS), Крок 0, 2026-08-19. 8 сніпетів, порядок збережено по ID. Селектори між файлами не перетинаються, тому порядок конкатенації не впливає на каскад. */ /* ===== #371 — Css elementor-button ===== */ /* Правка 19.08.2026: іконка була "\f105" через font-family Font Awesome — шрифтовий гліф всередині transform:scale(0,1) рендериться в Chrome не синхронно з фоном (окремий текстовий compositing-шар), тому при hover-out іконка на мить "стрибала" відносно кола фону. Замінено на SVG через background-image — растрове зображення масштабується разом з рештою боксу без цього ефекту. Решта (transform, transition, timing) — 1:1 як у прод-версії. */ .elementor-button-wrapper { display: inline-block; width: auto; } .elementor-button { position: relative; overflow: hidden; transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); /* 27.08.2026: було жорстке `width: 225px` — розраховане на коротке «Детальніше». Довший текст («Залишити заявку») і без hover ледве влазив, а hover ще й додає `text-indent: 30px` — рядок переносився саме при наведенні. Спроба 1 — `width: max-content` — прибрала перенос, але завела новий дефект: `max-content` перераховується під час hover РАЗОМ із `text-indent`, тому кнопка на hover сама фізично ширшала (225px → 247px). Спроба 2 — статична ширина через асиметричний `padding-left`, компенсована `transform` — розмір перестав стрибати, але текст на спокої тулився ліворуч, а праворуч лишалась порожня помаранчева пляма (padding справа не встигав за зліва). Фінальний варіант: `padding` симетричний (30px з обох боків, замість Elementor-івських 25) — рівно стільки ж, скільки треба стрілці, щоб розкритись зліва без зіткнення з текстом на hover. При симетричному padding і щільно підігнаному max-content текст на спокої вже сидить по центру САМ, без jsякогось transform. */ width: max-content; min-width: 225px; max-width: 100%; } /* Elementor друкує власний `padding:15px 25px 15px 25px` для КОЖНОГО екземпляра кнопки окремим правилом виду `.elementor-{postID} .elementor-element.elementor-element-{ID} .elementor-button` (4 селектори-класи) — це б'є bare `.elementor-button` (1 клас) незалежно від порядку підключення файлів. Той самий клас багу, що вже ловив hero-фон (`fb77d20`), градієнт `.gradient-block` і `.zk-lp-h1`: дублюємо селектор, щоб вага стала 5. */ .elementor-button.elementor-button.elementor-button.elementor-button.elementor-button { padding: 15px 30px; background: linear-gradient(to bottom, #ffbf69, #c3750d) !important; cursor: pointer; } .elementor-button-text { display: inline-block; transition: transform 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); } .elementor-button:hover .elementor-button-text { /* 28px, не 30 — лишає 2px запасу, щоб текст на hover не торкався самого краю box'а впритул (overflow:hidden обрізав би впритул). */ transform: translateX(28px); } .elementor-button:before { content: ""; background-color: rgba(224, 224, 206, 0.5); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; position: absolute; top: 0; left: 0px; height: 100%; width: 30px; border-radius: 0 50% 50% 0; transform: scale(0, 1); transform-origin: left center; transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); } .elementor-button:hover:before { transform: scale(1, 1); } .elementor-button:active:before { transform: scale(2); } /* Точковий фікс ширини геро-кнопки (02a12e9) видалено 27.08.2026: `width: max-content` вище закриває цей випадок для всіх кнопок разом, а два механізми ширини одночасно тільки заплутували б. */ /* ===== #710 — Css PC nav-menu (десктопна вертикальна плашка «Меню») ===== */ @import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap"); :root { --first-color: #d9d9d9; --secondary-color: #474747; --black-color: #000000; --accent-color: #f2af29; /* 27.08.2026, Етап a11y: акцент #c3750d на світлому фоні дає контраст лише 3.57 — цього вистачає великим заголовкам (поріг 3:1), але не звичайному тексту й посиланням (поріг 4.5:1): Lighthouse ловив це на /prices/, /buy-house-kyiv/, /e-oselya/, /duplexes/, /cottages/. Темніший відтінок того самого кольору дає 5.14 на білому і 4.6 на кремовому #fdf1de — проходить скрізь, де ми його вживаємо. Градієнти кнопок і бордюри лишаються на #c3750d: там він грає роль фону, а не тексту. */ --zk-accent-on-light: #a35c00; } .menu-wrapper { font-family: "Lora", sans-serif; position: fixed; top: 0; left: 0; width: 60px; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 10; transition: width 0.8s ease; background-color: rgba(203, 243, 240, 0.5); } .menu-wrapper.open { width: 300px; } .menu-wrapper::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(10px) brightness(0.55) !important; -webkit-backdrop-filter: blur(10px); z-index: -1; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } .menu-trigger { position: fixed; top: 0; left: 0; width: 60px; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 11; cursor: pointer; } .menu-trigger__label { transform: translateY(60px) rotate(-90deg); margin-top: 40px; font-weight: bold; transition: opacity 0.4s ease; position: absolute; opacity: 1; font-size: 1.4em; letter-spacing: 0.15em; color: var(--first-color); text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); } .menu-wrapper.open .menu-trigger__label { opacity: 0; } .menu-trigger__bars { display: flex; width: 25px; align-items: center; justify-content: space-between; z-index: 10; } .menu-trigger__bar { width: 4px; height: 40px; background: var(--first-color); transition: all 0.6s ease; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } .menu-wrapper.open .menu-trigger__bars .menu-trigger__bar:first-of-type, .menu-wrapper.open .menu-trigger__bars .menu-trigger__bar:last-of-type { transform: translateY(-5px); opacity: 0; } .menu-wrapper.open .menu-trigger__bars .menu-trigger__bar:nth-of-type(2) { transform: scaleY(1.2); transform-origin: center bottom; } .menu { position: absolute; top: 0; left: 0; height: 100%; transform: translateX(calc(-100% + 60px)); transition: transform 0.8s ease; padding: 30px 60px 30px 60px; will-change: transform; display: flex; flex-direction: column; justify-content: space-between; } .menu-wrapper.open .menu { transform: translateX(0); } .menu__logo { align-self: flex-start; padding: 30px 0 0 0; margin-left: -25px; } .menu__logo-img { width: 185px; height: auto; max-width: 100%; filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 1.5)); transition: transform 0.3s ease; } .menu__logo-img:hover { transform: scale(1.05); } .menu__list { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; margin: 0; } .menu__list:hover .menu__item:not(:hover) .menu__item-link { text-shadow: none; } .menu__list:hover .menu__item:hover { text-shadow: 2px 4px 6px rgba(0, 0, 0, 1.5); transform: scale(1.05); } .menu__item { color: var(--first-color) !important; font-size: 1.4em; padding: 10px 5px; width: 180px; overflow: hidden; transition: 0.4s ease; cursor: pointer; text-shadow: 2px 4px 6px rgba(0, 0, 0, 1.5); white-space: nowrap; } .menu__item-link { color: inherit; text-decoration: none; display: inline-block; transform: translateY(calc(100% + 10px)); transition: transform 0.6s ease, color 0.2s ease; } .menu-wrapper.open .menu__item-link { transform: translateY(0); } .menu__item:nth-of-type(1) .menu__item-link { transition-delay: 0.1s; } .menu__item:nth-of-type(2) .menu__item-link { transition-delay: 0.2s; } .menu__item:nth-of-type(3) .menu__item-link { transition-delay: 0.3s; } .menu__item:nth-of-type(4) .menu__item-link { transition-delay: 0.4s; } .menu__item:nth-of-type(5) .menu__item-link { transition-delay: 0.5s; } .menu__item:nth-of-type(6) .menu__item-link { transition-delay: 0.6s; } .menu__item:nth-of-type(7) .menu__item-link { transition-delay: 0.7s; } .menu__item:nth-of-type(8) .menu__item-link { transition-delay: 0.8s; } .menu__item:nth-of-type(9) .menu__item-link { transition-delay: 0.9s; } .menu__item:nth-of-type(10) .menu__item-link { transition-delay: 1s; } .menu-trigger__phone { display: flex; align-items: center; justify-content: space-between; color: var(--first-color); cursor: pointer; filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 1.5)); transition: transform 0.3s ease; } .menu-trigger__phone:hover { transform: scale(1.05); } .menu-trigger__phone-number { font-family: "Lora", serif; font-weight: 600; font-size: 1.3em; overflow: hidden; padding-right: 10px; } .menu-trigger__phone-number > p { color: inherit !important; white-space: nowrap; transform: translateY(calc(100% + 15px)); transition: transform 0.6s ease; } .menu-wrapper.open .menu-trigger__phone-number > p { transform: translateY(0); } .menu-trigger__phone-ico { margin: 0 -44px -4px 0; display: inline-block; will-change: transform; backface-visibility: hidden; transform-origin: center center; transition: none !important; animation: vibrate 3s ease-in-out infinite; } @keyframes vibrate { 0% { transform: rotate(0deg) scale(1); } 5% { transform: rotate(-8deg) scale(1.05); } 10% { transform: rotate(8deg) scale(1.05); } 15% { transform: rotate(-8deg) scale(1.05); } 20% { transform: rotate(8deg) scale(1.05); } 25% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(0deg) scale(1); } } /* ===== #1098 — General Css ===== */ body { margin: 0; } .shadow { filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 1.5)); } .elementor-gallery-item { padding: 10px; } .elementor-gallery-item > .elementor-gallery-item__image { filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.75)); border-radius: 15px; transition: 0.2s ease; } .elementor-gallery-item > .elementor-gallery-item__image:hover { scale: 1.015; } .pointer { pointer-events: none; } .blur > div > .elementor-background-video-container video { filter: blur(3px); } .card { transition: 0.5s linear; display: relative; } @media (min-width: 1024px) { .card-grid:hover > .card:not(:hover) { filter: saturate(0) blur(2px); } .hidden-buton { opacity: 0; transition: 0.5s linear; transform: translateY(100%); } .card:hover .hidden-buton { opacity: 1; transform: translateY(0); } } .blur { backdrop-filter: blur(10px) brightness(0.55); -webkit-backdrop-filter: blur(10px); } .elementor-nav-menu--layout-vertical { text-shadow: 2px 4px 6px rgba(0, 0, 0, 1.5); transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); } .menu-item-object-custom:hover { text-shadow: none; } .myPath path { fill: #f2af29; } .elementor-element-e244eec { position: relative; } .gradient-block::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: linear-gradient( 90deg, rgba(179, 179, 179, 0.6) 0%, rgba(204, 204, 204, 0.8) 25%, rgba(204, 204, 204, 0.8) 75%, rgba(204, 204, 204, 0.6) 100% ); } /* 23.08.2026: брейкпоінт звуження градієнта був 1024px, але текстова колонка секції «Про комплекс» (елемент 132092b) звужується на РІЗНОМУ, вищому Elementor-брейкпоінті — 1280px (виміряно живим getBoundingClientRect у браузері: heading на 1260px ще на всю ширину боксу, на 1281px уже вузька колонка ~540px). Між 1024 і 1279px виходила розсинхронізація: градієнт уже вузький (60%), а текст ще на всю ширину — правий край тексту вилазив за межі затемненої зони прямо на світлу частину фото, нечитабельно. Синхронізовано з 1280px. */ @media (min-width: 1280px) { .gradient-block::before { width: 60%; background: linear-gradient( 90deg, rgba(179, 179, 179, 0.4) 0%, rgba(204, 204, 204, 0.8) 25%, rgba(204, 204, 204, 0.8) 75%, rgba(204, 204, 204, 0) 100% ); } } .gradient-text { background: linear-gradient( to right, rgba(250, 188, 104, 1), rgba(205, 130, 30, 1) ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gradient-text-2 { background: linear-gradient(180deg, #5d5d5d 0%, #484747 64.5%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } p { margin: 0; } .decorate-circle { width: 632px; height: 632px; min-height: 632px; border-radius: 50%; filter: blur(300px); background: rgba(243, 179, 91, 0.3); } .chaty-svg > svg > g > circle { fill: #ffbf69; } .chaty-svg > svg > ellipse { fill: #ffbf69; } .chaty-widget { bottom: 77px !important; z-index: 9999; } #scrollToTopButton { display: flex; position: fixed; bottom: 1%; right: 3.5%; background-color: #ffbf69; color: #fff; width: 44px; height: 44px; border-radius: 50%; justify-content: center; align-items: center; cursor: pointer; z-index: 9999; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: 0.3s linear; } /* 23.08.2026: hover-збільшення прибрано за запитом Саші — кнопка більше не зростає при наведенні (щоб не "стрибала" відносно однакової з Binotel кнопки поруч). */ /* 20.08.2026: на десктопі Binotel лишається свого штатного розміру (~97px контейнер) — тут не зменшуємо, лише вирівнюємо scrollToTopButton над ним по ГОРИЗОНТАЛЬНОМУ ЦЕНТРУ (не по правому краю — кнопки різного діаметра, 44px і 97px, краї не дають вирівняних центрів). Binotel сам стоїть на right:2% (inline style, % від ширини вікна) — якщо тут узяти фіксовані px, вирівнювання розсинхронізується з Binotel на будь-якій ширині екрана, крім тієї, на якій підганяли. Тому теж на calc(vw): центр контейнера Binotel від правого краю = 2vw + 97px/2 = 2vw + 48.5px; щоб центр 44px scrollToTopButton збігався — right = 2vw + 48.5px − 44px/2 = 2vw + 26.5px. (Перевірено вимірюванням 21.08.2026: центр видимого кола 1351.9 vs центр scrollToTopButton 1350.7 — розбіжність 1.2px, бо коло всередині контейнера відцентроване; по горизонталі формула вірна.) ВЕРТИКАЛЬ, правка 21.08.2026: раніше тут стояло calc(7% + 97px + 12px), тобто кнопка ставилась на 12px над КОНТЕЙНЕРОМ Binotel (97px). Але видиме коло всередині того контейнера — лише 79.2px, з ~8.9px порожнечі зверху (місце під тінь/зовнішній круг їхньої розмітки). Через це фактичний зазор між намальованими колами був не 12px, а ~22px — помітно більший, ніж виглядав у коді. Рахуємо тепер від ВИДИМОГО кола: його верх від низу в'юпорта = 7% (bottom контейнера) + 7.9px (нижній внутрішній відступ) + 79.2px (висота кола) ≈ 7% + 87px; плюс 12px зазору = 7% + 99px. */ /* 23.08.2026, ще одна ревізія: 79px (під розмір видимого кола Binotel) виявився занадто помітним/великим — забирав зайву увагу поруч з основними CTA. Повернуто до вихідного розміру 44px/30px (як було до всієї серії правок з вирівнюванням під Binotel). Формула bottom не залежить від власного розміру кнопки (вона рахує позицію ВІД низу в'юпорта до нижнього краю, а не від верху), тому лишається calc(7% + 99px) без змін. Формула right — залежить від розміру (центрування по горизонталі відносно центру кола Binotel), повернуто на попереднє значення calc(2vw + 26.5px) для 44px. */ @media (min-width: 1024px) { #scrollToTopButton { width: 44px; height: 44px; right: calc(2vw + 26.5px); bottom: calc(7% + 99px); } #scrollToTopButton svg { width: 30px; height: 30px; } } /* 23.08.2026, ревізія: свап Binotel<->scrollToTopButton (робився того ж дня проти бульбашки-callback Binotel, яка перекривала кнопку) СКАСОВАНО за прямим проханням Саші — Binotel повернуто на його штатну позицію (bottom:7%, без forced JS), scrollToTopButton знову НАД ним. Розмір (79px, під видиме коло Binotel, не під 97px-контейнер) і збільшена іконка (62px) лишились — це окремі, самостійні правки, свап стосувався лише bottom-координат. Формула вертикалі — та сама, що була ДО свапу: видимий верх кола Binotel = 7% (bottom контейнера) + 7.9px (внутр. відступ) + 79.2px (висота кола) ≈ 7% + 87px; +12px зазору = 7% + 99px. Бульбашка Binotel знову може перекривати цю кнопку — свідомий компроміс Саші на користь "стандартного" вигляду Binotel. */ /* 20.08.2026: на мобільному підлаштовано під видиме коло Binotel (~55px, зроблено трохи більшим — там буває текст-tooltip). right/bottom inset 16px (як і в CTA зліва). Binotel навмисно на CSS right/bottom:10px (менше!), бо його видиме коло має ~6px внутрішній відступ від рамки — з 10px на CSS-рівні саме видиме коло виходить на ті самі 16px, що й тут. (Перевірено вимірюванням 21.08.2026: inset справа/знизу видимого кола Binotel = 15.53px проти 16px у двох інших — сходиться.) Правка 21.08.2026: раніше тут стояло bottom:90px, порахований як 10 + ~68 (висота КОНТЕЙНЕРА після scale) + 12 (gap). Але видиме коло — 55.4px, а не 68px: у контейнера ~7px порожнечі зверху. Через це реальний зазор між намальованими колами був 19px замість 12px. Рахуємо від видимого кола: його верх від низу в'юпорта = 15.53 (inset кола знизу) + 55.4 (висота кола) ≈ 71px; плюс 12px зазору = 83px. */ @media (max-width: 1023px) { #scrollToTopButton { width: 55px; height: 55px; bottom: 83px; right: 16px; } } /* 23.08.2026, ревізія: той самий скасований свап, що й у десктопному медіа-запиті вище — Binotel на мобільному повернуто на bottom:10px (власне CSS-правило, без forced JS), scrollToTopButton знову вище нього (bottom:83px, формула з коментаря 21.08.2026 вище). */ #scrollToTopButton.show { opacity: 1; pointer-events: auto; } #scrollToTopButton svg { width: 30px; height: 30px; fill: #fff; } .e-n-tab-title[aria-selected="false"] { cursor: pointer; } @media (min-width: 1024px) { span.social-icons { display: flex; position: fixed; top: 7%; right: 26px; gap: 10px; color: #fff; height: 44px; justify-content: center; align-items: center; cursor: pointer; z-index: 9999; } a.menu-trigger__social { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; padding: 8px; transition: background-color 0.3s ease, transform 0.3s ease; } /* Ширина в обох станах задана в px (не auto) — інакше браузер не інтерполює перехід і плашка стрибає замість того щоб їхати. */ .zk-desktop-phone { display: inline-flex; align-items: center; justify-content: flex-start; width: 184px; height: 44px; flex-shrink: 0; padding: 0 10px; box-sizing: border-box; border-radius: 22px; background-color: rgba(0, 0, 0, 0.3); color: #fff; font-family: "Lora", serif; font-weight: 600; font-size: 1.1em; white-space: nowrap; text-decoration: none; overflow: hidden; /* transform-origin справа — щоб збільшена плашка росла вліво й не наїжджала на іконки соцмереж */ transform-origin: right center; transition: background-color 0.3s ease, transform 0.3s ease, width 0.5s ease-in-out; } .zk-desktop-phone:hover { background-color: rgba(0, 0, 0, 0.6); /* transform: scale(1.2); — вимкнено на прохання, 20.08.2026 */ color: #fff; } .zk-desktop-phone-icon { width: 24px; height: 24px; flex-shrink: 0; } .zk-desktop-phone-number { margin-left: 8px; opacity: 1; transition: opacity 0.35s ease-in-out; } /* при скролі — стягується до самої іконки, розгортається назад при hover */ .zk-desktop-phone.zk-collapsed { width: 44px; } .zk-desktop-phone.zk-collapsed .zk-desktop-phone-number { opacity: 0; } .zk-desktop-phone.zk-collapsed:hover { width: 184px; } .zk-desktop-phone.zk-collapsed:hover .zk-desktop-phone-number { opacity: 1; } a.menu-trigger__social:hover { background-color: rgba(0, 0, 0, 0.6); /* transform: scale(1.2); — вимкнено на прохання, 20.08.2026 */ } a.menu-trigger__social svg { width: 24px; height: 24px; fill: #fff; } } .elementor-lightbox-prevent-close { justify-content: center; } /* ===== #2274 — Accardeon ===== */ .e-n-accordion-item-title-header { align-items: center; } [aria-controls] .e-n-accordion-item-title-header::before { content: ""; position: relative; top: -3px; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; width: 2.1em; height: 2.1em; left: -25px; } @media (max-width: 767px) { [aria-controls] .e-n-accordion-item-title-header::before { left: -15px; width: 1.25em; height: 1.25em; } } [aria-controls="Complex"] .e-n-accordion-item-title-header::before { background-image: url("/wp-content/uploads/2025/01/school.svg"); } [aria-controls="Houses"] .e-n-accordion-item-title-header::before { background-image: url("/wp-content/uploads/2025/01/building-four.svg"); } [aria-controls="Infrastructure"] .e-n-accordion-item-title-header::before { background-image: url("/wp-content/uploads/2025/01/lightning.svg"); } [aria-controls="Location"] .e-n-accordion-item-title-header::before { background-image: url("/wp-content/uploads/2025/01/local.svg"); } /* ===== #2725 — CSS Form ===== */ input:focus, textarea:focus, select:focus, button:focus { box-shadow: none !important; } input[type="checkbox"] { display: none !important; } #form-field-field_b0646a1-0 + label:before { content: ""; display: inline-block; width: 1em; height: 1em; cursor: pointer; background-size: contain; vertical-align: -2px; margin-right: 5px; background: url('data:image/svg+xml;utf8,') no-repeat center center; } #form-field-field_b0646a1-0:checked + label:before { scale: 1.2; background: url('data:image/svg+xml;utf8,') no-repeat center center; } #form-field-field_b0646a1-1 + label:before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; cursor: pointer; background-size: contain; vertical-align: -2px; margin-right: 5px; background: url('data:image/svg+xml;utf8,') no-repeat center center; } #form-field-field_b0646a1-1:checked + label:before { scale: 1.2; background: url('data:image/svg+xml;utf8,') no-repeat center center; } #form-field-field_b0646a1-2 + label:before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; cursor: pointer; background-size: contain; vertical-align: -2px; margin-right: 5px; background: url('data:image/svg+xml;utf8,') no-repeat center center; } #form-field-field_b0646a1-2:checked + label:before { scale: 1.2; background: url('data:image/svg+xml;utf8,') no-repeat center center; } .elementor-field-option > label { cursor: pointer; } input:-webkit-autofill { background-color: transparent !important; color: #cfcfcf !important; -webkit-text-fill-color: #cfcfcf !important; transition: background-color 5000s ease-in-out 0s; } /* Забороняє закриття попапу при кліку на чекбокс */ .elementor-popup-modal input[type="checkbox"] { pointer-events: all !important; } .elementor-message { display: none !important; } /* ===== #2825 — CSS scroll (скролбар) ===== */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #474747; } ::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 6px; border-left: 1px solid #252525; } ::-webkit-scrollbar-thumb:hover { background: #ffbf69; } /* ===== #2976 — CSS scale up ===== */ @keyframes scaleUpAnimation { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .scale-up { opacity: 0; transform: scale(0.9); } .scale-up.active { animation: scaleUpAnimation 0.8s ease-out forwards; } /* ===== #3106 — Css Binotel (віджет зворотнього дзвінка) ===== */ .bingc-phone-button-circle-outside { display: none; } a#bingc-phone-button.bingc-phone-button > svg.bingc-phone-button-circle > circle.bingc-phone-button-circle-inside { fill: #ffbf69 !important; } html body a#bingc-phone-button.bingc-phone-button { filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6)) !important; } /* 20.08.2026: Binotel сам ставить inline style bottom/right (зі свого адмін-панельного налаштування позиції) і мав розмір ~97px — не збігався з нашими кнопками. !important обов'язковий, бо inline-style інакше переможе. Вирівнюємо з .zk-sticky-cta і #scrollToTopButton нижче. */ @media (max-width: 1023px) { /* Не чіпаємо width/height напряму — усередині кнопки є ще окремий #bingc-phone-button-tooltip з власним абсолютним позиціюванням щодо оригінального розміру; зміна width/height контейнера/svg окремо розсинхронізовує svg-круг і tooltip-іконку (перевірено, ламається візуально). transform:scale масштабує все як єдиний блок разом — safe. transform-origin у правий нижній кут, щоб bottom/right лишався прив'язаний до того самого кута, що й до масштабування. Видиме коло ~55px при scale(0.7) — трохи більше за інші дві кнопки, бо всередині буває текст-tooltip («Кнопка зв'язку»), яким Binotel періодично сам себе підписує. Сам svg-круг усередині їхньої розмітки має ще ~6px внутрішній відступ від краю контейнера (не наш підбір, їхня верстка) — компенсуємо це через менший bottom/right (10px замість 16px), щоб ВИДИМЕ коло, а не його контейнер, лягло на ту саму лінію 16px, що й .zk-sticky-cta і #scrollToTopButton. */ html body a#bingc-phone-button.bingc-phone-button { bottom: 10px !important; right: 10px !important; transform: scale(0.7) !important; transform-origin: bottom right !important; } } a#bingc-phone-button.bingc-phone-button > div#bingc-phone-button-tooltip { background: #ffbf69 !important; } a#bingc-phone-button.bingc-phone-button > div#bingc-phone-button-tooltip > svg > polyline { fill: #ffbf69 !important; } /* 20.08.2026: завжди-видимий телефон у мобільній шапці (#706), п.1 плану */ .elementor-element-zk1phone { margin-left: auto !important; height: 44px; display: flex; align-items: center; } .zk-mobile-phone { display: flex; align-items: center; height: 44px; gap: 6px; color: var(--first-color); font-family: "Lora", serif; font-weight: 600; letter-spacing: 0.02px; white-space: nowrap; text-decoration: none; font-size: 1.3em; filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 1.5)); transition: transform 0.3s ease; } .zk-mobile-phone:hover { transform: scale(1.05); color: var(--first-color); } .zk-mobile-phone-icon { display: none; flex-shrink: 0; width: 40px; height: 40px; } /* <480px — номер і бургер не влазять в один ряд, лишаємо тільки іконку (поріг піднято з 400 до 480 після збільшення шрифту номера до 1.3em) */ @media (max-width: 480px) { .zk-mobile-phone-number { display: none; } .zk-mobile-phone-icon { display: inline-block; } } .zk-mobile-burger { display: flex; flex-direction: column; justify-content: space-between; align-items: center; box-sizing: border-box; width: 44px; height: 44px; padding: 2.92px; filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 1.5)); } .zk-mobile-burger span { display: block; width: 100%; height: 4px; background: var(--first-color); } /* 20.08.2026: sticky CTA «Залишити заявку» на мобільному, крок 6 плану (п.1.1 ТЗ). Знизу ліворуч — праворуч уже стоїть стек Binotel + scrollToTopButton, тут навмисно не перетинаємось. Усі три вирівняно на 48px і однаковий inset 16px від країв (bottom/left/right). */ .zk-sticky-cta { display: none; } /* zk-sticky-cta перекриває текст футера, поки він у в'юпорті (не тільки в самому кінці сторінки) — footer.elementor-location-footer і так дублює телефон/форму, тож ховаємо її, щойно футер з'явився на екрані (клас додає IntersectionObserver у legacy-snippets.js). scrollToTopButton і Binotel навмисно НЕ ховаємо тут — рішення Саші 21.08.2026, навіть попри те що вони теж злегка перекривають текст копірайту. */ @media (max-width: 1023px) { body.zk-footer-in-view .zk-sticky-cta { display: none !important; } } @media (max-width: 1023px) { /* На першому екрані вже є "Детальніше" (тепер теж "Залишити заявку"), тому саму sticky-кнопку ховаємо, поки не проскролили — з'являється за тим самим порогом і так само (клас .show), що й scrollToTopButton (js: legacy-snippets.js). */ .zk-sticky-cta { display: none; align-items: center; gap: 8px; position: fixed; left: 16px; bottom: 16px; z-index: 9999; height: 55px; padding: 0 20px; box-sizing: border-box; border-radius: 28px; background-color: #ffbf69; color: #fff; font-family: "Lora", serif; font-weight: 600; font-size: 0.95em; white-space: nowrap; text-decoration: none; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); opacity: 0; transition: transform 0.2s ease, opacity 0.3s ease; } .zk-sticky-cta.show { display: flex; opacity: 1; } .zk-sticky-cta:active { transform: scale(0.96); } .zk-sticky-cta-icon { width: 22px; height: 22px; flex-shrink: 0; } } @media (max-width: 380px) { .zk-sticky-cta-text { display: none; } .zk-sticky-cta { width: 55px; padding: 0; justify-content: center; } } /* 22.08.2026: крок 8 плану (ТЗ, Частина 4) — зони натискання ≥44px на мобільному. Розширюємо клікабельну область через padding (без негативних margin — нехай сусідні елементи природно розсунуться; візуальні відступи вже й так малі, overlap хіт-зон гірший за трохи більшу висоту рядка). Аудит через getBoundingClientRect() на 4 сторінках (390px) знайшов усі нижче; типові Elementor-класи (.elementor-icon-list-item, .elementor-heading-title) торкаються й інших віджетів на мобільному — перевірено, скрізь або замало (< 44px, потребує фікс), або вже й так більше (padding лише додає запас, не ламає). Копірайт/«Політика конфіденційності» у футері — свідомо НЕ чіпаємо: це посилання всередині рядка тексту (inline), а не окремі кнопки — WCAG 2.5.5 виключає такий випадок з вимоги 44px. */ @media (max-width: 767px) { /* Контакти у футері (тел./Viber/Telegram/WhatsApp) і кнопки «Завантажити PDF» на картках будинків — обидва однакового класу Elementor icon-list; той самий клас у попапі бургер-меню #1808 (телефон + іконки Instagram/TikTok/Facebook). */ .elementor-icon-list-item > a { padding: 10px 0; box-sizing: border-box; } /* Заголовки-посилання карток («Будинки», «Ціни», «Хід Будівництва» на головній) і «Детальніше» — весь заголовок є посиланням. */ .elementor-heading-title > a { display: inline-block; padding: 8px 0; box-sizing: border-box; } /* Стрілка-скрол на першому екрані головної (веде до #About-us). */ a.elementor-icon { padding: 5px; box-sizing: content-box; } /* Чекбокси форми у футері (Telegram/Viber/WhatsApp) — розширюємо клікабельну зону підпису. */ .elementor-field-option label { display: inline-block; padding: 10px 0; box-sizing: border-box; } } /* 22.08.2026: Етап 3, п.2.1/2.3 ТЗ — фон hero-секції переведено з webp повністю на AVIF (без webp-фолбеку, за рішенням Саші). q15 при оригінальних 1920×1080 дав видимі блочні артефакти в небі (навіть під overlay/contrast-фільтром секції) — замість того занижено роздільність (замість якості): 1280×720 desktop / 800×450 mobile, avifenc q70 (якість тримаємо в діапазоні 60-80, не нижче) — деталей ніхто на фоні не розглядає, а даунскейл ховає втрати набагато чистіше за агресивне квантування. Desktop-варіант (`10.avif`, 211KB — було `10.webp` 393KB) підставлено напряму в Elementor-налаштування віджета (`background_image` + `background_video_fallback` у _elementor_data поста 11, SQL 22.08.2026, бекап `_elementor_data_bk_20260822b`), тож post-11.css генерує `background:url(.../10.avif)` сам. **Важливо:** цього самого недостатньо було на постмету — Elementor підтягує URL не з рядка `url` у settings, а через attachment ID (127) з `_wp_attachment_metadata`/`_wp_attached_file`/`guid` посту 127 у wp_posts — довелось оновити й сам медіа-запис, інакше генерований CSS мовчки лишався на старому webp. Тут — лише мобільний оверрайд на менший `10-mobile.avif` (89.5KB). Той самий селектор, що й у generated post-11.css, щоб не програти каскад за специфічністю (простий .elementor-element-fb77d20 програвав). */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-fb77d20:not(.elementor-motion-effects-element-type-background) { background-image: url("/wp-content/uploads/2025/01/10-mobile.avif"); } } /* 22.08.2026: секція «Хід будівництва» на головній (два media-carousel віджети, ~1.3МБ AVIF-фото сумарно) — глибоко під згорткою (top ~4100px і ~9100px при висоті сторінки ~11500px), фото рендеряться через CSS background-image (не ), тому нативний loading="lazy" на них не діє. Замість ручного IntersectionObserver (ризик зламати ініціалізацію Swiper, який рахує розміри слайдів по DOM) — content-visibility:auto: браузер пропускає рендер/стилі/фетч фото всього піддерева, доки секція не наблизиться до в'юпорта. contain-intrinsic-size — приблизна висота секцій за замовчуванням (з реального заміру), щоб уникнути стрибка скролбару до першого рендеру. Прогресивне покращення: у браузерах без підтримки (Safari <18, Firefox) секція просто рендериться як завжди. */ .elementor-element-5020428 { content-visibility: auto; contain-intrinsic-size: 1280px 450px; } .elementor-element-0f69b07 { content-visibility: auto; contain-intrinsic-size: 1280px 1310px; } /* 23.08.2026 (виявлено пізніше того ж дня): секція «Про комплекс» (b16f55e, фон miror.avif) на десктопі мала background-size:100% auto (ширина=100% боксу, висота авто за пропорціями картинки) — розраховано під конкретне співвідношення висота_боксу/ширина_боксу. Бокс має min-height:70vh, який на широких і при цьому ВИСОКИХ вікнах (велика vh) перевищує висоту, яку дає ширина картинки — знизу з'являється порожній проміжок кольору фону (var(--e-global-color-primary)) під фото, картинка "не розтягується на всю висоту". Tablet/mobile-версії цього самого віджета в Elementor і так вже на background-size:cover (тільки десктоп мав кастомний "initial"), тому просто вирівнюємо десктоп під ту саму логіку: cover гарантує повне заповнення боксу за будь-якої висоти в'юпорта. background-position лишається "0px 30%" (з generated CSS, не чіпали) — той самий вертикальний кроп, що й раніше, просто без прогалини знизу. */ @media (min-width: 1024px) { .elementor-11 .elementor-element.elementor-element-b16f55e:not(.elementor-motion-effects-element-type-background) { background-size: cover; } } /* 24.08.2026 — компактна таблиця цін на /prices/ (2800), замінює клон повних карток /houses/ (дубльований контент, дві однакові сторінки під різними назвами). Мобільна розкладка — стандартний CSS-only патерн "стек-картка" через data-label + ::before, без JS. */ .zk-price-table-wrap { width: 100%; overflow-x: auto; } .zk-price-table { width: 100%; border-collapse: collapse; font-family: "Lora", serif; } .zk-price-table caption { display: none; } .zk-price-table th, .zk-price-table td { padding: 14px 16px; text-align: left; vertical-align: middle; color: #252525; } .zk-price-table thead th { background: linear-gradient(to bottom, #ffbf69, #c3750d); color: #3a1e00; font-weight: 700; white-space: nowrap; } .zk-price-table tbody tr { background: #fff; border-bottom: 1px solid #e0d9cf; } .zk-price-table tbody tr:nth-child(even) { background: #fdf1de; } .zk-price-table td strong { white-space: nowrap; color: #8a4b00; } .zk-price-table .zk-price-table-avail { display: inline-block; white-space: nowrap; font-size: 0.85em; font-weight: 700; padding: 4px 10px; border-radius: 20px; background: #fdf1de; color: #8a4b00; border: 1px solid #f2c98a; } .zk-price-table .zk-price-table-avail.zk-avail-ready { background: #e6f4ea; color: #1b6b34; border-color: #a9dcb8; } /* Текст лише для скрін-рідера: потрібен там, де візуально заголовок зайвий, а семантично — обов'язковий (остання колонка таблиці цін із кнопками «Детальніше»: порожній лишав ці клітинки без заголовка, Lighthouse ловив це як td-has-header). Класична clip-техніка: елемент лишається в дереві доступності, але не займає місця й не впливає на верстку. */ .zk-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .zk-price-table-link { display: inline-block; white-space: nowrap; color: var(--zk-accent-on-light); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; } .zk-price-table-link:hover { color: #670000; } @media (max-width: 767px) { .zk-price-table thead { display: none; } .zk-price-table, .zk-price-table tbody, .zk-price-table tr, .zk-price-table td { display: block; width: 100%; } .zk-price-table tbody tr { border: 1px solid #e0d9cf; border-radius: 12px; margin-bottom: 16px; padding: 8px 0; background: #fff; } .zk-price-table tbody tr:nth-child(even) { background: #fdf1de; } .zk-price-table td { padding: 8px 16px; border: none; min-height: 44px; } .zk-price-table td[data-label]:before { content: attr(data-label); display: block; font-size: 0.8em; font-weight: 700; color: #8a8a8a; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; } .zk-price-table td.zk-price-table-name { font-family: "Merriweather", serif; font-weight: 700; font-size: 1.15em; } } /* Якорі на заголовках карток /houses/ (posадкові з /prices/ "Детальніше →") — невеликий відступ зверху, щоб картка не впиралась впритул у верхній край екрана (24.08.2026, за прямим запитом Саші — "трохи прокручує далі ніж треба, додай маленький відступ"). */ #house-duplex-48, #house-duplex-55, #house-duplex-65, #house-house-68, #house-house-69-3, #house-house-75, #house-house-85, #house-house-95-3, #house-house-110-2r, #house-house-110-3r, #house-house-126 { scroll-margin-top: 20px; } /* Планування-зображення карток /houses/ — loading="lazy" без width/height, через що браузер не резервує місце й сторінка "стрибає" (~550px) під час довантаження, псуючи позицію якорів (#house-...) і Lighthouse CLS. aspect-ratio за реальними пропорціями кожного зображення різуе стрибок ще до завантаження, height обчислюється з фактичної ширини автоматично. */ /* Явна пікселева ширина (=натуральний розмір, той самий, що браузер і так показував за замовчуванням через max-width:100% без жодного override) — на відміну від width:100% це НЕ розтягує картинку на всю колонку, просто дає їй розмір ДО завантаження замість 0, щоб aspect-ratio міг порахувати висоту. max-width:100% (вже є в Elementor за замовчуванням) і далі звужує на вузьких екранах. */ .elementor-element-2f8ac83 img { width: 365px; aspect-ratio: 365 / 500; } .elementor-element-b3c0e1a img { width: 354px; aspect-ratio: 354 / 500; } .elementor-element-69bd38f img { width: 707px; aspect-ratio: 707 / 500; } .elementor-element-74c8a8c img { width: 784px; aspect-ratio: 784 / 500; } .elementor-element-b335759 img { width: 751px; aspect-ratio: 751 / 500; } .elementor-element-822ee43 img { width: 734px; aspect-ratio: 734 / 500; } .elementor-element-0a24a5e img { width: 728px; aspect-ratio: 728 / 500; } .elementor-element-685dfff img { width: 568px; aspect-ratio: 568 / 500; } .elementor-element-d52e155 img { width: 954px; aspect-ratio: 954 / 500; } .elementor-element-3f5552a img { width: 603px; aspect-ratio: 603 / 500; } .elementor-element-41dbdf8 img { width: 1350px; aspect-ratio: 1350 / 500; } /* ===== Блок довіри на головній (ТЗ v2 Частина 5, 24.08.2026) ===== Той самий підхід, що й у таблиці цін /prices/ — core-віджет `html` (нативного блоку в Elementor немає) + окремий CSS-файл теми, а не inline-стилі в _elementor_data. Кольори — та сама брендова палітра, що вже використана в таблиці цін (#8a4b00 акцент, #fdf1de/#faf5ec кремовий фон). 24.08.2026, правка за фідбеком Саші: цифри 100/25/9 прибрано звідси (не центрувались як треба) — замість власного HTML/CSS-блока переставлено в НАЯВНУ секцію статистики «8 га/15 км/…» на головній (контейнер fc508de, нативні Elementor heading+text-editor віджети, grid на 5 колонок), де центрування вже гарантоване рушієм Elementor. Стара пара «100 Будинків»/«10 Планувальних рішень» замінена новими значеннями замість дублювання. */ /* 27.08.2026: власні `max-width: 1000px` і бічний padding прибрано — ширину блока задає той самий boxed-контейнер Elementor (`164a755`, `.e-con-inner` = 1200px), у якому лежать і картки будинків у табах вище. Із власним обмеженням блок був на 200px вужчим за них, і краї білих карток не збігались з краями карток будинків. Той самий фікс, що й на чотирьох посадкових Етапу 6. */ .zk-trust { padding: 20px 0 70px; } .zk-trust__title { text-align: center; font-family: "Merriweather", sans-serif; font-weight: 700; font-size: 48px; text-transform: uppercase; color: #d9d9d9; margin: 0 0 10px; } /* * Підзаголовок курсивом під заголовком секції — той самий патерн, що й * рідні секції сайту («ПРО КОМПЛЕКС» / «ПЕРЕВАГИ КОМПЛЕКСУ» + Great Vibes * «Котеджне містечко» під ними). Виміряно наживо 24.08.2026: * Great Vibes 48px/48px, weight 400, той самий колір, що й заголовок, * відступ між ними 10px. */ .zk-trust__subtitle { text-align: center; font-family: "Great Vibes", cursive; font-weight: 400; font-size: 48px; line-height: 48px; color: #d9d9d9; margin: 0 0 40px; } @media (max-width: 767px) { .zk-trust__title, .zk-trust__subtitle { font-size: 32px; } .zk-trust__subtitle { line-height: 32px; } } .zk-trust__cards { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: stretch; } .zk-trust__card { background: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25); padding: 32px; } .zk-trust__docs { text-align: left; display: flex; flex-direction: column; justify-content: center; } .zk-trust__docs-title { font-family: "Merriweather", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #000; margin: 0 0 22px; font-size: 20px; } .zk-trust__docs-list { list-style: none; margin: 0; padding: 0; } .zk-trust__docs-list li + li { border-top: 1px solid #ece7df; } .zk-trust__doc-row { display: flex; align-items: center; gap: 12px; } .zk-trust__doc-row .zk-trust__doc { flex: 1 1 auto; } .zk-trust__doc-dl { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #c3750d; border: 1px solid #e6c9a0; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .zk-trust__doc-dl:hover { background: linear-gradient(to bottom, #ffbf69, #c3750d); border-color: #c3750d; color: #fff; } .zk-trust__doc { font-family: "Lora", serif; color: #3a3a3a; text-decoration: none; font-size: 15px; line-height: 1.45; min-height: 44px; padding: 16px 0; display: flex; align-items: center; gap: 14px; transition: color 0.2s ease; } .zk-trust__doc::before { content: "PDF"; flex: 0 0 auto; font-family: "Merriweather", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--zk-accent-on-light); border: 1px solid #e6c9a0; border-radius: 4px; padding: 5px 7px; line-height: 1; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .zk-trust__doc:hover { color: var(--zk-accent-on-light); } .zk-trust__doc:hover::before { background: linear-gradient(to bottom, #ffbf69, #c3750d); border-color: #c3750d; color: #fff; } .zk-trust__custom { text-align: center; display: flex; flex-direction: column; justify-content: center; } .zk-trust__quote { margin: 0 0 20px; font-family: "Lora", serif; font-style: italic; color: #444; font-size: 16px; line-height: 1.7; } .zk-trust__hook { font-family: "Merriweather", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.3; color: var(--zk-accent-on-light); margin: 0; } @media (max-width: 900px) { .zk-trust__cards { grid-template-columns: 1fr; } } @media (max-width: 767px) { .zk-trust__card { padding: 24px 20px; } .zk-trust__docs-title { font-size: 18px; } .zk-trust__hook { font-size: 21px; } } /* ===== Акордеон «Що входить у ціну» на /houses/ (11 карток) ===== Два дефекти дефолтного вигляду Elementor-акордеона на світлій картці: 1) Знак «+/−» стояв не по центру. Elementor робить іконку `float: left` з фіксованою шириною 1.5em (24px) і text-align:left, а сама SVG — inline, тобто сидить на baseline. Виміряно наживо: SVG 16×16 у боксі 24px притиснута вліво (8px порожнечі справа) і на 4px вище центру рядка тексту. Прибираємо float і центруємо flex'ом на самому .elementor-tab-title — тоді іконка й текст вирівняні по одній осі незалежно від розміру шрифту. 2) Колір неактивної вкладки. Elementor за замовчуванням фарбує і заголовок, і іконку в `--e-global-color-primary`, а це в цьому кіті кремовий #e0e0ce — на темних секціях читабельний, але тут картка біла, і напис «Що входить у ціну» був майже невидимий (контраст ~1.2:1). Неактивний стан переводимо на темний текст кольору тіла сайту, активний — на золото #c3750d. Скоуп безпечний: віджет `accordion` є лише на /houses/ і в табах секції «Будинки» на головній (25.08.2026 картки продубльовано туди — ті самі елементи, ті самі ID) — «акордеон» про комплекс на головній зроблено іншим віджетом (nested-accordion), його ці правила не зачіпають. */ .elementor-widget-accordion .elementor-tab-title { display: flex; align-items: center; gap: 10px; } /* Селектор навмисно довгий: власні правила Elementor тут — `.elementor-accordion .elementor-tab-title .elementor-accordion-icon` (0,3,0) для display/width і `…-icon.elementor-accordion-icon-left` (0,4,0) для float. Коротший `.elementor-widget-accordion .elementor-accordion-icon` (0,2,0) програє їм за специфічністю, попри те що наш файл друкується пізніше, — перевірено наживо: застосувався лише color, а width лишалась 24px і float:left. */ .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon, .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left { float: none; width: auto; display: flex; align-items: center; justify-content: center; } /* Іконка міняє колір разом із заголовком (той самий патерн, що й у самого Elementor: його дефолтні правила теж фарбують обидва елементи однією декларацією). */ /* display самих span'ів (…-icon-closed / …-icon-opened) НЕ чіпаємо — саме ним Elementor перемикає «+» на «−», і власне правило display:none можна ненавмисно перебити, показавши обидва знаки одразу. Як flex- елементи вони й так стискаються до ширини SVG і центруються батьком. */ /* `fill`, а не `color`: Elementor фарбує сам гліф окремим правилом `.elementor-widget-accordion .elementor-accordion-icon svg{fill: var(--e-global-color-primary)}`, тому зміна `color` на батьківському span'і на знак не впливала взагалі (перевірено: computed color був уже #3a3a3a, а fill лишався кремовим #e0e0ce). Переводимо на currentColor — і «+/−» починає слухатись тих самих правил кольору, що й заголовок, в обох станах. */ .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon svg { display: block; width: 16px; height: 16px; fill: currentColor; } .elementor-widget-accordion .elementor-accordion-icon, .elementor-widget-accordion .elementor-accordion-title { color: #3a3a3a; } .elementor-widget-accordion .elementor-active .elementor-accordion-icon, .elementor-widget-accordion .elementor-active .elementor-accordion-title { color: var(--zk-accent-on-light); } /* ===== Таби «Будинки» на головній — скрол-стрічка (25.08.2026) ===== Після перенесення всіх 11 карток з /houses/ у таби (пост 11) кнопки розкладались рядками: 5 рядків (315px) на десктопі й 9 рядків (575px) на 390px — майже екран самих лише кнопок перед першою карткою. Увімкнено нативну настройку віджета `horizontal_scroll` (і її мобільний варіант) у _elementor_data: вона ставить --n-tabs-heading-overflow-x: scroll і nowrap, тобто один ряд, що гортається. Нижче — три правки поверх неї, спільні для всіх ширин. 1) Відступ під тінь. Кнопки мають box-shadow 0 0 10px rgba(0,0,0,.6), а scroll-контейнер за фактом обрізає її з усіх боків: overflow-x:scroll робить overflow-y обчислюваним `auto`, і висота стрічки дорівнює висоті кнопки, тож розмиття зверху/знизу зрізалось; крайні кнопки втрачали тінь ще й збоку. Даємо невеликий внутрішній відступ (8px десктоп / 6px мобільний — менше за blur 10px навмисно: далі хвіст розмиття вже майже непомітний, а більший відступ помітно роздував висоту стрічки) і компенсуємо горизонталь від'ємним margin — вирівнювання кнопок відносно секції лишається таким, як було, просто область прокрутки тепер дотягується до країв контейнера. 2) Видно, що є куди гортати. Маска приховує вміст біля того краю, куди ще лишився скрол: контент «розчиняється», тому обрізана кнопка читається як продовження ряду, а не як дефект верстки. Класи zk-tabs-at-start / zk-tabs-at-end ставить JS (legacy-snippets.js) — коли стрічку доскролено в край, відповідна половина маски вимикається. Без JS (помилка, відключений скрипт) маска просто лишається з обох боків — деградація нешкідлива. 3) Смуга прокрутки. На тач-екранах вона системно невидима (там працює сам жест), а на десктопі — це головна підказка для миші, тому лишаємо її видимою, але тонкою й у кольорах секції, щоб не сперечалась із кнопками. */ .elementor-element-4428966 .e-n-tabs-heading { /* Ширина розчинення пропорційна стрічці: на телефоні 44px (більше з'їдало б видиму частину), на десктопі впирається в 124px — рівно стільки, щоб кнопка-стрілка лежала на вже прозорому місці, а не на читабельному тексті. */ --zk-tabs-fade: clamp(44px, 12%, 124px); padding: 8px; margin-inline: -8px; scrollbar-width: thin; scrollbar-color: #6d6d6d transparent; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - var(--zk-tabs-fade)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - var(--zk-tabs-fade)), transparent 100%); } .elementor-element-4428966.zk-tabs-at-start .e-n-tabs-heading { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--zk-tabs-fade)), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--zk-tabs-fade)), transparent 100%); } .elementor-element-4428966.zk-tabs-at-end .e-n-tabs-heading { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%); } /* Стрічка коротша за контейнер (гортати нікуди) — маска не потрібна взагалі. */ .elementor-element-4428966.zk-tabs-at-start.zk-tabs-at-end .e-n-tabs-heading { -webkit-mask-image: none; mask-image: none; } @media (max-width: 767px) { .elementor-element-4428966 .e-n-tabs-heading { padding: 6px; margin-inline: -6px; } } /* Підказка «стрічку можна гортати»: кнопки один раз від'їжджають вліво і повертаються (клас вмикає JS, коли стрічка вперше з'явилась у в'юпорті). Саме transform, а не прокрутка — див. коментар у legacy-snippets.js: рух скролом лишає стрічку зсунутою, якщо анімацію обірвано на середині. */ .elementor-element-4428966.zk-tabs-hint .e-n-tab-title { animation: zk-tabs-peek 1.1s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes zk-tabs-peek { 0% { transform: translateX(0); } 35% { transform: translateX(-28px); } 70% { transform: translateX(-28px); } 100% { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .elementor-element-4428966.zk-tabs-hint .e-n-tab-title { animation: none; } } /* Стрілки прокрутки стрічки табів (25.08.2026). Кнопки створює JS (legacy-snippets.js) сусідами стрічки всередині .e-n-tabs — обгортати стрічку не можна, Elementor шукає її прямим дочірнім селектором. Показуємо на всіх ширинах, включно з тачем (за запитом Саші): на телефоні гортання пальцем і так працює, але кнопки роблять очевидним, що ряд продовжується. Розмір 44px — той самий поріг зони натискання, що й у Кроці 8; менше робити не можна саме через дотик. Вертикальний центр рахуємо з двох змінних, які JS міряє на живому елементі: висота стрічки залежить від шрифту й падінгу кнопок, а вони різні на мобільному й десктопі. */ .elementor-element-4428966 .e-n-tabs { position: relative; } .elementor-element-4428966 .zk-tabs-arrow { position: absolute; top: calc(var(--zk-strip-top, 0px) + var(--zk-strip-height, 80px) / 2); transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; /* Суцільний темніший фон, а не градієнт кнопки-таба: стрілка лежить поверх стрічки, і якби вона повторювала колір кнопок, то читалась би як ще одна кнопка-таб, а не як керування. */ background: #1f1f1f; color: #ffbf69; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.75); cursor: pointer; transition: opacity 0.2s ease, border-color 0.2s ease; } .elementor-element-4428966 .zk-tabs-arrow svg { display: block; width: 20px; height: 20px; } /* Кнопки лежать ПОВЕРХ краю стрічки (патерн «стрілки над каруселлю»), а не в полях обабіч: поля з'являються лише на широких екранах — на вужчому вікні стрілка в полі поїхала б за край контейнера. Щоб накладання виглядало навмисним, зона розчинення ширша за саму кнопку. */ .elementor-element-4428966 .zk-tabs-arrow--prev { left: 2px; } .elementor-element-4428966 .zk-tabs-arrow--next { right: 2px; } .elementor-element-4428966 .zk-tabs-arrow:hover { border-color: rgba(255, 191, 105, 0.55); } .elementor-element-4428966 .zk-tabs-arrow:focus-visible { outline: 2px solid #ffbf69; outline-offset: 2px; } /* Доскролено в край (або гортати нікуди) — відповідна стрілка зникає. */ .elementor-element-4428966.zk-tabs-at-start .zk-tabs-arrow--prev, .elementor-element-4428966.zk-tabs-at-end .zk-tabs-arrow--next { opacity: 0; pointer-events: none; } /* ===== Посадкові сторінки (Етап 6 плану v2) ===== /duplexes/, /cottages/, /buy-house-kyiv/, /e-oselya/ — сторінки зібрані з нативних Elementor-контейнерів (заголовки, кнопки, копії карток будинків з /houses/) плюс кілька `html`-віджетів, стилі яких лежать тут. Той самий підхід, що й у блоці «Довіра» на головній: розмітка простим HTML, оформлення — звичайним CSS у git, а не десятками Elementor-опцій у JSON-блобі. Палітра й типографіка навмисно ті самі, що в `.zk-trust` (Merriweather-заголовки, Lora-текст, акцент #c3750d, білі картки 16px/тінь на темному тлі) — щоб сторінки не виглядали чужими. */ .zk-lp__title { text-align: center; font-family: "Merriweather", sans-serif; font-weight: 700; font-size: 40px; text-transform: uppercase; color: #d9d9d9; margin: 10px 0 6px; } .zk-lp__subtitle { text-align: center; font-family: "Great Vibes", cursive; font-weight: 400; font-size: 40px; line-height: 1.1; color: #d9d9d9; margin: 0 0 26px; } @media (max-width: 767px) { .zk-lp__title, .zk-lp__subtitle { font-size: 28px; } } /* Ширину блоків посадкових задає НЕ цей файл, а Elementor-контейнер, у який вони покладені, — та сама boxed-обгортка (прототип `92da2ff`), у якій на /houses/ лежать картки будинків. Перша версія мала власні `max-width:1000px` і виходила на 200px вужчою за картки: краї білих блоків не збігалися з краями карток, і сторінка читалась як два різні макети. Тому тут лишаються тільки відступи/оформлення, а горизонтальні межі — за контейнером. */ /* Буліти першого екрану: ціна / площа / термін. */ .zk-lp-bullets { list-style: none; margin: 26px 0 6px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .zk-lp-bullets li { flex: 1 1 220px; max-width: 300px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 191, 105, 0.35); border-radius: 14px; padding: 18px 16px; text-align: center; } .zk-lp-bullets__num { display: block; font-family: "Merriweather", sans-serif; font-weight: 700; font-size: 24px; line-height: 1.2; color: #ffbf69; } .zk-lp-bullets__cap { display: block; margin-top: 6px; font-family: "Lora", serif; font-size: 14px; color: #d9d9d9; } @media (max-width: 767px) { .zk-lp-bullets li { flex: 1 1 100%; padding: 14px; } .zk-lp-bullets__num { font-size: 20px; } } /* Біла картка-секція. */ .zk-lp-card { margin: 30px 0; background: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25); padding: 32px; text-align: left; } .zk-lp-card__title { font-family: "Merriweather", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #000; font-size: 22px; margin: 0 0 18px; } .zk-lp-card__lead, .zk-lp-card__note { font-family: "Lora", serif; font-size: 16px; line-height: 1.7; color: #444; margin: 0 0 16px; } .zk-lp-card__note { font-size: 15px; color: #666; } /* Посилання в тексті картки — підкреслені; але не ті, що вже мають власне оформлення (список документів приходить сюди з класами `.zk-trust__doc*` і має власний PDF-бейдж та hover). */ .zk-lp-card a:not(.zk-trust__doc):not(.zk-trust__doc-dl) { color: var(--zk-accent-on-light); text-decoration: underline; } @media (max-width: 767px) { .zk-lp-card { padding: 24px 20px; } .zk-lp-card__title { font-size: 19px; } } /* Списки фактів із золотою «галочкою». */ .zk-lp-facts { list-style: none; margin: 0; padding: 0; } .zk-lp-facts li { position: relative; padding: 0 0 0 30px; margin: 0 0 12px; font-family: "Lora", serif; font-size: 16px; line-height: 1.6; color: #3a3a3a; } .zk-lp-facts li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(to bottom, #ffbf69, #c3750d); } /* FAQ на нативних
— без JS, працює і з вимкненим скриптом. */ .zk-lp-faq__item { border-top: 1px solid #ece7df; } .zk-lp-faq__item:last-child { border-bottom: 1px solid #ece7df; } .zk-lp-faq__item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 16px 0; font-family: "Merriweather", sans-serif; font-weight: 700; font-size: 16px; color: #3a3a3a; transition: color 0.2s ease; } .zk-lp-faq__item summary::-webkit-details-marker { display: none; } .zk-lp-faq__item summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid #c3750d; border-bottom: 2px solid #c3750d; transform: rotate(45deg) translateY(-25%); transition: transform 0.2s ease; } .zk-lp-faq__item[open] summary::after { transform: rotate(-135deg) translateY(-25%); } .zk-lp-faq__item summary:hover { color: var(--zk-accent-on-light); } .zk-lp-faq__answer { padding: 0 0 18px; font-family: "Lora", serif; font-size: 16px; line-height: 1.7; color: #555; } .zk-lp-faq__answer p { margin: 0 0 10px; } /* Фінальний рядок перед повторною кнопкою. */ .zk-lp-final { margin: 24px 0 6px; text-align: center; font-family: "Merriweather", sans-serif; font-weight: 700; font-size: 24px; line-height: 1.35; color: #ffbf69; } @media (max-width: 767px) { .zk-lp-final { font-size: 19px; } } /* Хаб «Купити будинок під Києвом»: дві картки-переходи (дуплекси/котеджі). Уся картка — одне посилання, тому всередині лише , не блокові теги. */ .zk-lp-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .zk-lp-choice__card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .zk-lp-choice__card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } .zk-lp-choice__img { display: block; position: relative; aspect-ratio: 16 / 9; background: #ece7df; overflow: hidden; } .zk-lp-choice__img img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .zk-lp-choice__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 26px 26px; } .zk-lp-choice__title { font-family: "Merriweather", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 22px; color: #000; } .zk-lp-choice__price { margin-top: 6px; font-family: "Merriweather", sans-serif; font-weight: 700; font-size: 16px; color: var(--zk-accent-on-light); } .zk-lp-choice__text { margin-top: 12px; font-family: "Lora", serif; font-size: 15px; line-height: 1.65; color: #444; } .zk-lp-choice__more { margin-top: auto; padding-top: 18px; font-family: "Merriweather", sans-serif; font-weight: 700; font-size: 15px; color: var(--zk-accent-on-light); } @media (max-width: 900px) { .zk-lp-choice { grid-template-columns: 1fr; } } /* Нумеровані кроки (сторінка Є-Оселі). */ .zk-lp-steps { counter-reset: zk-step; list-style: none; margin: 0 0 16px; padding: 0; } .zk-lp-steps li { counter-increment: zk-step; position: relative; padding: 0 0 0 46px; margin: 0 0 16px; font-family: "Lora", serif; font-size: 16px; line-height: 1.65; color: #3a3a3a; } .zk-lp-steps li::before { content: counter(zk-step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(to bottom, #ffbf69, #c3750d); color: #fff; font-family: "Merriweather", sans-serif; font-weight: 700; font-size: 14px; } /* Таблиця нормативів площі — на білій картці, тому окремо від `.zk-price-table` (та зверстана під темний фон /prices/). */ .zk-lp-table-wrap { overflow-x: auto; margin: 0 0 16px; } .zk-lp-table { width: 100%; border-collapse: collapse; font-family: "Lora", serif; font-size: 16px; color: #3a3a3a; } .zk-lp-table th, .zk-lp-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #ece7df; } .zk-lp-table thead th { font-family: "Merriweather", sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; color: #000; } .zk-lp-table tbody td:last-child { font-weight: 700; color: var(--zk-accent-on-light); white-space: nowrap; } @media (max-width: 600px) { .zk-lp-table thead { display: none; } .zk-lp-table, .zk-lp-table tbody, .zk-lp-table tr, .zk-lp-table td { display: block; width: 100%; } .zk-lp-table tr { border-bottom: 1px solid #ece7df; padding: 10px 0; } .zk-lp-table td { border: 0; padding: 4px 0; } .zk-lp-table td::before { content: attr(data-label) ": "; font-family: "Merriweather", sans-serif; font-weight: 700; color: #000; } } /* H1/підзаголовок посадкових: заголовки тут довші за «Будинки» на /houses/ (у них за вимогою ТЗ ціна і гео одним рядком), а прототип віджета має жорсткі 3em — на 1440px «Котеджі в котеджному містечку Золотий Ключ — від 81 600 $» вилазив за край екрана. Тому розмір робимо гнучким (clamp), а не фіксованим; мобільний прототипний розмір (1.8em) лишається як нижня межа. Класи проставлені у самих віджетах (`_css_classes`), а не прив'язані до `.page-id-XXXX` — ID постів на проді будуть інші. */ /* Специфічність: Elementor генерує для віджета `.elementor-4291 .elementor-element.elementor-element-6f6e866 .elementor-heading-title` — це чотири класи, тож простий `.zk-lp-h1 .elementor-heading-title` (два) програє, навіть будучи підключеним пізніше. Дублюємо `.elementor-element` у селекторі, щоб вага стала п'ять — той самий прийом, що вже рятував hero-фон (`fb77d20`) і градієнт `.gradient-block::before`. */ .elementor-element.elementor-element.elementor-widget-heading.zk-lp-h1 .elementor-heading-title { font-size: clamp(26px, 3.2vw, 48px); line-height: 1.15; /* Ліворуч на десктопі висить фіксована плашка «Меню», праворуч — панель з телефоном і соцмережами; вони перекривають краї сторінки. Тому обмежуємо рядок так, щоб довгий заголовок переносився ДО них, а не заповзав під них (перша версія на /cottages/ ховала «К» під плашкою меню). */ max-width: min(1100px, calc(100% - 160px)); margin-inline: auto; } @media (max-width: 1023px) { .elementor-element.elementor-element.elementor-widget-heading.zk-lp-h1 .elementor-heading-title { max-width: 100%; } } .elementor-element.elementor-element.elementor-widget-heading.zk-lp-sub .elementor-heading-title { font-size: clamp(15px, 1.4vw, 22px); line-height: 1.4; display: block; max-width: 900px; margin-inline: auto; } /* ===== Підпункти меню в десктопній плашці (Етап 6) ===== Чотири посадкові живуть під «Будинками». Плашка `[custom_menu]` — вертикальна панель, що виїжджає при hover, тому робити другий рівень випадаючим по наведенню було б і незручно (hover усередині hover), і зайво: місця по вертикалі вистачає. Підпункти просто відступають праворуч і мають менший кегль. */ .menu__submenu { list-style: none; margin: 4px 0 0; padding: 0 0 0 14px; border-left: 1px solid rgba(224, 224, 206, 0.25); } .menu__item--child { font-size: 0.72em; /* батьківський .menu__item — 1.4em, тут ≈1em */ width: auto; padding: 5px 0; text-shadow: 1px 2px 4px rgba(0, 0, 0, 1); } /* Батьківський пункт із дітьми не має «стрибати» по висоті: `.menu__item` має overflow:hidden, а вкладений список робить його вищим — прибираємо nowrap саме для нього, щоб нічого не обрізалось. */ .menu__item--parent { white-space: normal; } /* Підменю в мобільному бургер-попапі #1808 (nav-menu #f7fe1a4). Віджет налаштований як «звичайне» вертикальне меню, і Elementor (SmartMenus) розкриває другий рівень як ДЕСКТОПНИЙ дропдаун: `position:absolute`, біле тло, темний текст, інлайнові top/left — у попапі він виїжджав повністю за лівий край екрана (виміряно: x = -165px). Тому повертаємо його в потік як звичайний вкладений список; сам показ/приховування лишається за Elementor (він ставить inline `display`), ми чіпаємо тільки позицію й оформлення. */ .elementor-element-f7fe1a4 .elementor-nav-menu ul.sub-menu { position: static !important; top: auto !important; left: auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; background: transparent !important; box-shadow: none !important; border: 0; border-left: 1px solid rgba(224, 224, 206, 0.25); border-radius: 0; margin: 4px 0 4px 10px; padding: 0 0 0 14px; } /* Колір/шрифт беремо ті самі, що Elementor дає пунктам першого рівня (виміряно наживо: #E0E0CE, Merriweather 700, та сама тінь) — `inherit` тут не працює, бо колір пунктів меню Elementor вішає на сам ``, а не на список. Кегль — менший, це підпункти. */ .elementor-element-f7fe1a4 .elementor-nav-menu ul.sub-menu a.elementor-sub-item { color: #e0e0ce; background: transparent; font-family: "Merriweather", sans-serif; font-weight: 700; font-size: 21px; text-shadow: 2px 4px 6px rgb(0, 0, 0); padding: 8px 0; } .elementor-element-f7fe1a4 .elementor-nav-menu ul.sub-menu a.elementor-sub-item:hover, .elementor-element-f7fe1a4 .elementor-nav-menu ul.sub-menu a.elementor-sub-item.elementor-item-active { color: #ffbf69; background: transparent; }