/* ========================================================================== * lua-motion.css — шар руху і типографіки landing.ua (LUA-MOTION, 24.09.2026) * * Працює лише під html.lua-motion. Клас ставить інлайн-скрипт у * (functions.php, блок LUA-MOTION), і тільки коли сторінка в області дії * і відвідувач не просив зменшити рух. Без класу файл не робить нічого. * * Правила файлу: нуль !important, батьківська тема не чіпається, анімуються * лише transform, opacity, clip-path. Розміри кнопок живуть у lua-button.css, * тут їх не задаємо. * * Вимикач: add_filter( 'lua_motion', '__return_false' ); * ========================================================================== */ /* ---- 1. Токени ----------------------------------------------------------- Одна крива на все: різкий старт, довге м'яке гальмування. Друга — для рухів «туди-назад» (шторки, клік по якорю). Три тривалості. */ :root { --lua-ease: cubic-bezier(.25, .74, .22, .99); --lua-ease-io: cubic-bezier(.55, 0, .1, 1); --lua-d1: .45s; --lua-d2: .7s; --lua-d3: 1.1s; --lua-accent: rgb(244, 53, 99); } /* ---- 2. Lenis (з пакета lenis 1.3.26, lenis.css) -------------------------- */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---- 3. Стара поява теми передає керування новій --------------------------- Системи появи теми (.fade-in, *-card-reveal, *-anim) перехоплює lua-motion.js: на старті ставить їм кінцевий стан без переходу. CSS тут не потрібен — і так краще, ніж змагатися специфічністю з animation.css. */ /* Елементи, якими керує GSAP: CSS-перехід на transform/opacity відставав би від кожного кадру і смикав рух. Кольори на ховері лишаються плавними. */ html.lua-motion .lua-mo { transition-property: color, background-color, border-color, box-shadow, fill, stroke, translate, scale; } /* ---- 4. Типографіка -------------------------------------------------------- Geologica вже вантажиться як variable 100–900, тож ваги й трекінг безкоштовні. Великий кегль просить щільнішого трекінгу, інакше рядок розсипається. balance — щоб заголовок не лишав одне слово на рядку. */ html.lua-motion .internal_hero__title { letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; } html.lua-motion .section_title, html.lua-motion .lp-shead__title, html.lua-motion .help-title, html.lua-motion .need h2, html.lua-motion .reviews__title, html.lua-motion .propos__title { letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; } html.lua-motion .lp-type__title, html.lua-motion .actual-item__title, html.lua-motion .need-item__title, html.lua-motion .help-question summary { letter-spacing: -.012em; } html.lua-motion .lp-shead__text, html.lua-motion .lp-type__desc, html.lua-motion .need-item__text, html.lua-motion .actual-item__text, html.lua-motion .help-answer { text-wrap: pretty; } /* Цифри однакової ширини: лічильник не штовхає підпис поруч. */ html.lua-motion .lp-hero strong, html.lua-motion .lp-type__value, html.lua-motion .lp-kase__cpl-v, html.lua-motion .need-item__num { font-variant-numeric: tabular-nums; } /* Маска рядка: трохи місця знизу, щоб «у», «р», «д» не обрізало. */ html.lua-motion .lua-line-mask { padding-bottom: .1em; margin-bottom: -.1em; } /* ---- 5. Ховери ----------------------------------------------------------- Тільки там, де є справжній курсор. На тачі ховер «залипає» після тапу. */ @media (hover: hover) and (pointer: fine) { /* 5.1 Кнопка: фон піднімається знизу, напис прокручується дублем, стрілка вилітає вгору-вправо і заходить нова знизу-зліва. .lua-btn ставить lua-motion.js разом зі службовими елементами lua-fill і lua-r (не span — див. initButtons). */ /* position тут не задаємо: частина кнопок теми стоїть absolute поверх відео (.exp-image__btn «Більше про Landing.ua»), і relative скидав її під кадр. Статичним кнопкам relative ставить lua-motion.js. */ html.lua-motion .btn.lua-btn { overflow: hidden; isolation: isolate; transition: color var(--lua-d2) var(--lua-ease), border-color var(--lua-d2) var(--lua-ease); } /* Тема фарбує фон на ховері миттєво. Тримаємо фон спокою, фарбує шар. */ html.lua-motion .btn.lua-btn:hover { background-color: var(--lua-bg); } html.lua-motion .btn.lua-btn > .lua-btn-fill { position: absolute; inset: -1px; z-index: -1; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: var(--lua-fill, var(--lua-accent)); transform: translate3d(0, 101%, 0); transition: transform var(--lua-d2) var(--lua-ease), border-radius var(--lua-d2) var(--lua-ease); pointer-events: none; } html.lua-motion .btn.lua-btn:hover > .lua-btn-fill { border-radius: 0; transform: translate3d(0, 0, 0); } html.lua-motion .btn.btn--gray2.lua-btn, html.lua-motion .btn.btn--red.lua-btn, html.lua-motion .btn.lp-btn--ghost.lua-btn { --lua-fill: #000; } html.lua-motion .lua-roll { display: inline-grid; overflow: clip; vertical-align: top; } html.lua-motion .lua-roll > lua-r { display: block; grid-area: 1 / 1; transition: transform var(--lua-d2) var(--lua-ease); } html.lua-motion .lua-roll > lua-r + lua-r { transform: translate3d(0, 110%, 0); } html.lua-motion .btn.lua-btn:hover .lua-roll > lua-r:first-child { transform: translate3d(0, -110%, 0); } html.lua-motion .btn.lua-btn:hover .lua-roll > lua-r + lua-r { transform: translate3d(0, 0, 0); } html.lua-motion .btn.lua-btn > i { position: relative; overflow: hidden; } html.lua-motion .btn.lua-btn > i > svg { transition: transform var(--lua-d2) var(--lua-ease); } /* Зсув 250%: при 160% гострий кінець стрілки лишався всередині кола і було видно «хвостик» у спокої. Прозорість — друга страховка. */ html.lua-motion .btn.lua-btn > i > .lua-arr2 { position: absolute; inset: 0; margin: auto; opacity: 0; transform: translate3d(-250%, 250%, 0); transition: transform var(--lua-d2) var(--lua-ease), opacity var(--lua-d1) ease; } /* Тема на ховері повертає стрілку на 45°. Замість повороту — заміна. */ html.lua-motion .btn.lua-btn:hover > i > svg:first-child { transform: translate3d(250%, -250%, 0); } html.lua-motion .btn.lua-btn:hover > i > .lua-arr2 { opacity: 1; transform: translate3d(0, 0, 0); } /* 5.2 Текстове посилання: тонка лінія теми лишається базою, повна малюється поверх неї зліва направо. */ html.lua-motion .lp-hero__link { border-bottom-color: color-mix(in srgb, currentColor 25%, transparent); background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; background-origin: border-box; transition: background-size var(--lua-d2) var(--lua-ease); } html.lua-motion .lp-hero__link:hover { background-size: 100% 1px; } /* 5.3 Картки: підйом через translate, зум фото через scale. Окремі властивості складаються з transform, який ставить GSAP, тому паралакс і ховер не б'ються. transform теми на ховері гасимо. */ html.lua-motion .lp-kase, html.lua-motion .lp-type { transition: translate .9s var(--lua-ease), box-shadow .9s var(--lua-ease); } html.lua-motion .lp-kase:hover, html.lua-motion .lp-type:hover { transform: none; translate: 0 -.6rem; } html.lua-motion .lp-kase__ph img, html.lua-motion .lp-type__photo img { transition: scale 1.2s var(--lua-ease), opacity .6s ease; } html.lua-motion .lp-kase:hover .lp-kase__ph img, html.lua-motion .lp-type:hover .lp-type__photo img { transform: none; scale: 1.06; } /* 5.4 Фото з паралаксом у будь-якій картці: зум через scale, який складається з transform від GSAP. lua-hov ставить lua-motion.js. */ html.lua-motion .lua-hov:hover img.lua-px { scale: 1.06; } } /* ---- 6. FAQ: відповідь розкривається тією ж кривою ------------------------ */ html.lua-motion .help-answer { transition: grid-template-rows var(--lua-d3) var(--lua-ease); } html.lua-motion .help-answer > div { transition: opacity var(--lua-d2) var(--lua-ease), translate var(--lua-d2) var(--lua-ease); } html.lua-motion .help-question:not([open]) + .help-answer > div { opacity: 0; translate: 0 -.8rem; } /* ---- 7. Меню: закриття — дзеркало відкриття ------------------------------ Тема закриває меню тими самими переходами, що й відкриває, але без затримок і з кривою «різкий старт» (.22, 1, .36, 1): за першу десяту секунди прозорість падає на три чверті, і око бачить просто зникнення. Тут навпаки: спершу гасне вміст, у зворотному порядку (мови → підменю → меню → розділювач → верх), потім панель піднімається і розмивається. Вміст повністю гасне до 0.24 с: о 0.26 с тема скидає підменю (resetMenuSections), і підміну вже не видно. Відкриття не чіпаємо — ці правила діють лише в закритому стані. */ html.lua-motion body:not(.body--open_menu_state) .site_menu:not(.is-open) { transition: opacity .4s var(--lua-ease-io) .14s, transform .5s var(--lua-ease-io) .14s, filter .5s var(--lua-ease-io) .14s, visibility 0s linear .64s; } html.lua-motion .site_menu:not(.is-open) .site_menu__nav, html.lua-motion .site_menu:not(.is-open) .site_menu__decor, html.lua-motion .site_menu:not(.is-open) .site_menu__top, html.lua-motion .site_menu:not(.is-open) .site_menu__divider, html.lua-motion .site_menu:not(.is-open) .site_menu__main, html.lua-motion .site_menu:not(.is-open) .site_menu__sub, html.lua-motion .site_menu:not(.is-open) .site-languages { transition: opacity .2s cubic-bezier(.5, 0, .75, 0), transform .3s cubic-bezier(.5, 0, .75, 0); } html.lua-motion .site_menu:not(.is-open) .site-languages { transition-delay: 0s; } html.lua-motion .site_menu:not(.is-open) .site_menu__sub { transition-delay: .01s; } html.lua-motion .site_menu:not(.is-open) .site_menu__main { transition-delay: .03s; } html.lua-motion .site_menu:not(.is-open) .site_menu__divider { transition-delay: .04s; } html.lua-motion .site_menu:not(.is-open) .site_menu__top { transition-delay: .04s; } html.lua-motion .site_menu:not(.is-open) .site_menu__nav { transition-delay: .04s; } html.lua-motion .site_menu:not(.is-open) .site_menu__decor { transition-delay: .08s; } /* ---- 8. Великий напис у футері --------------------------------------------- Літери ділить і рухає lua-motion.js (initFooterMark). Колонка літери — зона наведення, тож курсор не «провалюється» в отвори А і D. */ html.lua-motion .footer__logo .lua-fl-hit { cursor: default; } /* ---- 9. Зменшений рух: страховка, якщо клас уже стоїть ---------------------- */ @media (prefers-reduced-motion: reduce) { html.lua-motion .lua-mo, html.lua-motion .lua-roll > lua-r, html.lua-motion .btn.lua-btn > .lua-btn-fill, html.lua-motion .help-answer { transition: none; } } /* LUA-MOTION-END */