/* ===================================================================== ILYK — Банери (фронтенд + полотно конструктора) [ILYK 15.10.2026] Позиції шарів — у % полотна, розміри — у px полотна × --u, де --u = 100cqw / ширина полотна. Мобільний макет вмикає container query по ширині самого банера, а не вікна. ===================================================================== */ .ilb { container: ilb / inline-size; position: relative; width: 100%; max-width: var(--ilb-maxw, none); margin-left: auto; margin-right: auto; border-radius: var(--ilb-radius, 0); overflow: hidden; isolation: isolate; background: #050a1e; color: #fff; -webkit-tap-highlight-color: transparent; outline: none; } /* [15.10.2026] На всю ширину вікна: до запуску JS — через 100vw (вірно для центрованих секцій), далі js/banners.js виставляє точні ширину і відступ (без смуги прокрутки, для будь-якої секції). */ .ilb.ilb--stretch { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; } .ilb:focus-visible { box-shadow: 0 0 0 3px rgba(81, 105, 241, .6); } .ilb__stage { --u: calc(100cqw / var(--ilb-dw)); position: relative; width: 100%; aspect-ratio: var(--ilb-dw) / var(--ilb-dh); overflow: hidden; touch-action: pan-y; } .ilb__slides { position: absolute; inset: 0; z-index: 2; } /* [15.10.2026] Елементи слайдів і закріплені шари — окремі площини над фонами слайдів */ .ilb__pin--back { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .ilb__fgs { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .ilb__pin--front { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .ilb__fgs > .ilb-slide, .ilb__pin > .ilb-slide { pointer-events: none; } .ilb__pin > .ilb-slide { transition: none !important; transform: none !important; filter: none !important; } /* ---------- Слайди і переходи ---------- */ .ilb-slide { position: absolute; inset: 0; visibility: hidden; opacity: 0; z-index: 1; transition: opacity var(--ilb-speed) ease, transform var(--ilb-speed) cubic-bezier(.65, 0, .35, 1), filter var(--ilb-speed) ease, visibility 0s linear var(--ilb-speed); } .ilb-slide.is-active { visibility: visible; opacity: 1; z-index: 3; transition-delay: 0s; } .ilb-slide.is-leaving { visibility: visible; z-index: 2; transition-delay: 0s; } .ilb--t-none .ilb-slide { transition: none; } .ilb--t-slide .ilb-slide { opacity: 1; transform: translateX(100%); } .ilb--t-slide.is-back .ilb-slide { transform: translateX(-100%); } .ilb--t-slide .ilb-slide.is-active { transform: none; } .ilb--t-slide .ilb-slide.is-leaving { transform: translateX(-100%); } .ilb--t-slide.is-back .ilb-slide.is-leaving { transform: translateX(100%); } .ilb--t-zoom .ilb-slide { transform: scale(1.08); } .ilb--t-zoom .ilb-slide.is-active { transform: none; } .ilb--t-zoom .ilb-slide.is-leaving { opacity: 0; transform: scale(.96); } .ilb--t-blur .ilb-slide { filter: blur(18px); } .ilb--t-blur .ilb-slide.is-active { filter: none; } .ilb--t-blur .ilb-slide.is-leaving { opacity: 0; filter: blur(18px); } .ilb--t-fade .ilb-slide.is-leaving { opacity: 1; } .ilb--t-fade .ilb-slide.is-active { z-index: 3; } /* Перетягування пальцем/мишею */ .ilb.is-dragging .ilb-slide { transition: none; } /* ---------- Фон слайда ---------- */ .ilb-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .ilb-bg picture { display: contents; } .ilb-bg__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; } .ilb-bg__shade { position: absolute; inset: 0; pointer-events: none; } .ilb-bg--kb .ilb-bg__img { transform-origin: 50% 50%; } .ilb-slide.is-active .ilb-bg--kb .ilb-bg__img { animation: ilb-kb var(--ilb-kb, 12s) ease-out both; } @keyframes ilb-kb { from { transform: scale(1.0); } to { transform: scale(1.14); } } .ilb-slide__link { position: absolute; inset: 0; z-index: 1; } /* ---------- Відеофон (спільний для всіх слайдів) ---------- */ .ilb--has-video .ilb__stage { background: #050a1e; } .ilb__video { position: absolute; inset: 0; z-index: 1; overflow: hidden; } .ilb__vmedia { position: absolute; inset: 0; } .ilb__vposter { position: absolute; inset: 0; background-size: cover; background-position: center; } /* фільтр — прямо на медіа (див. коментар у ilyk_banner_render_video) */ .ilb__vposter, .ilb__vid, .ilb__yt iframe { filter: var(--ilb-vf, none); scale: var(--ilb-vs, 1); } .ilb__vid, .ilb__yt iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; pointer-events: none; } .ilb__vid { width: 100%; height: 100%; object-fit: cover; } .ilb__vid:not(.is-playing) { opacity: 0; } .ilb__vid { transition: opacity .6s ease; } .ilb__yt { position: absolute; inset: 0; } .ilb__yt iframe { width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; } .ilb__yt iframe.is-playing { opacity: 1; } .ilb__vshade { position: absolute; inset: 0; pointer-events: none; } /* ---------- Шари ---------- */ .ilb-layers { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .ilb-l { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); font-size: calc(var(--fs) * var(--u)); pointer-events: auto; box-sizing: border-box; } .ilb-l--box, .ilb-l--image { height: calc(var(--h) * 1%); } .ilb-l--box .ilb-l__in, .ilb-l--image .ilb-l__in { display: block; width: 100%; height: 100%; } .ilb-l__in { position: relative; box-sizing: border-box; overflow-wrap: break-word; } /* [15.10.2026] Розкладкові властивості — окремо для комп'ютера (--x) і телефона (--mx), див. ilyk_banner_inner_style() */ .ilb .ilb-l > .ilb-l__in { font-weight: var(--fw, 400); line-height: var(--lh, 1.3); letter-spacing: calc(var(--ls, 0) * var(--u)); text-align: var(--al, left); text-transform: var(--tt, none); padding: calc(var(--pv, 0) * var(--u)) calc(var(--ph, 0) * var(--u)); border-radius: calc(var(--rd, 0) * var(--u)); } .ilb-tx-m { display: none; } .ilb .ilb-l .ilb-l__t { margin: 0 !important; padding: 0 !important; border: 0; font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; text-align: inherit !important; line-height: inherit !important; background: none !important; } .ilb-l__img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; border-radius: inherit; } .ilb-l.is-glass .ilb-l__in::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%); mix-blend-mode: soft-light; } /* Кнопка */ .ilb .ilb-btn { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none !important; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease, color .25s ease; } .ilb-btn .ilb-l__t { width: 100%; } @media (hover: hover) { .ilb-hover-lift .ilb-btn:hover { transform: translateY(-2px); filter: brightness(1.08); } .ilb-hover-glow .ilb-btn:hover { box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 10px 40px rgba(81,105,241,.55); } .ilb-hover-invert .ilb-btn:hover { filter: invert(1) hue-rotate(180deg); } } .ilb .ilb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* Мобільний макет — по ширині банера */ @container ilb (max-width: 767.98px) { .ilb__stage { --u: calc(100cqw / var(--ilb-mw)); aspect-ratio: var(--ilb-mw) / var(--ilb-mh); } .ilb-l { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); width: calc(var(--mw) * 1%); font-size: calc(var(--mfs) * var(--u)); } .ilb-l--box, .ilb-l--image { height: calc(var(--mh) * 1%); } .ilb-hide-m { display: none !important; } .ilb .ilb-l > .ilb-l__in { font-weight: var(--mfw, var(--fw, 400)); line-height: var(--mlh, var(--lh, 1.3)); letter-spacing: calc(var(--mls, var(--ls, 0)) * var(--u)); text-align: var(--mal, var(--al, left)); text-transform: var(--mtt, var(--tt, none)); padding: calc(var(--mpv, var(--pv, 0)) * var(--u)) calc(var(--mph, var(--ph, 0)) * var(--u)); border-radius: calc(var(--mrd, var(--rd, 0)) * var(--u)); } .ilb-tx-d { display: none; } .ilb-tx-m { display: inline; } .ilb--arrows-desktop .ilb__arrows { display: none; } } @container ilb (min-width: 768px) { .ilb-hide-d { display: none !important; } } /* ---------- Анімації появи шарів ---------- [15.10.2026] Анімація йде на ВНУТРІШНІЙ блок (.ilb-l__in — той самий, що має скло) і лише з fill-mode «backwards», а не «both». Причина: якщо анімована opacity/filter на ЗОВНІШНЬОМУ блоці (або «залипає» після завершення через fill forwards), Chrome робить його «backdrop root», і backdrop-filter (скло) всередині перестає бачити фон — розмиття зникає. У конструкторі анімацій немає, тому там скло працювало, а на сайті — ні. Зсув/масштаб — через окремі властивості translate/scale, щоб не перебивати поворот (transform). */ .ilb-slide.is-in .ilb-l[data-anim] > .ilb-l__in { animation: ilb-in var(--adur, 800ms) cubic-bezier(.2, .7, .2, 1) var(--ad, 0ms) backwards; } .ilb-l[data-anim="fade-up"] { --from-t: 0 40px; } .ilb-l[data-anim="fade-down"] { --from-t: 0 -40px; } .ilb-l[data-anim="fade-left"] { --from-t: 60px 0; } .ilb-l[data-anim="fade-right"] { --from-t: -60px 0; } .ilb-l[data-anim="zoom-in"] { --from-s: .85; } .ilb-l[data-anim="zoom-out"] { --from-s: 1.15; } .ilb-l[data-anim="blur"] { --fromf: blur(14px); } /* «to» навмисно не задано — анімація йде до власних значень блоку (напр. непрозорості з налаштувань) */ @keyframes ilb-in { from { opacity: 0; translate: var(--from-t, 0 0); scale: var(--from-s, 1); filter: var(--fromf, none); } } /* ---------- Стрілки ---------- */ .ilb__arrows { position: absolute; z-index: 6; pointer-events: none; display: flex; gap: 10px; } .ilb__arrows--sides { inset: 50% 0 auto 0; transform: translateY(-50%); justify-content: space-between; padding: 0 clamp(10px, 2.2cqw, 32px); } .ilb__arrows--bottom-right { right: clamp(14px, 3cqw, 40px); bottom: clamp(14px, 3cqw, 36px); } .ilb__arrows--bottom-left { left: clamp(14px, 3cqw, 40px); bottom: clamp(14px, 3cqw, 36px); } .ilb .ilb__arrow { /* !important — теми (Acadia, Elementor) стилізують усі