/* ============================================================ * AKSRT Header Slider — v6.0 Zibll-Aligned * * Three layers: * - Layer 1: Swiper full-bleed background * - Layer 2: Search overlay (before_html + form + after_html) * - Layer 3: Icon cards (negative margin) * * Title/subtitle for the hero live in .header-slider-search-more.before * (document flow with the search form). .slide-text is decorative only. * ============================================================ */ /* ============================================================ * .new-swiper base (zibll) * ============================================================ */ .aksrt-slider-wrapper { position: relative; margin-bottom: 20px; border-radius: var(--main-radius, var(--radius, 8px)); overflow: hidden; box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); } .new-swiper { position: relative; overflow: hidden; --pc-height: auto; --m-height: auto; } .new-swiper .swiper-wrapper { height: var(--pc-height); } .new-swiper .swiper-slide { position: relative; overflow: hidden; } .new-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } /* Lazy preloader */ .new-swiper .swiper-lazy-preloader { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: aksrt-swiper-spin 0.8s linear infinite; } @keyframes aksrt-swiper-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .new-swiper .swiper-lazy { opacity: 0; transition: opacity 0.3s; } .new-swiper .swiper-lazy.lazyloaded, .new-swiper .swiper-slide-visible .swiper-lazy { opacity: 1; } .new-swiper .pagination-thumbnail-item { width: 60px; height: 40px; border-radius: 4px; overflow: hidden; opacity: 0.5; transition: opacity 0.3s, border-color 0.3s; border: 2px solid transparent; cursor: pointer; display: inline-block; } .new-swiper .pagination-thumbnail-item img { width: 100%; height: 100%; object-fit: cover; } .new-swiper .pagination-thumbnail-item-active { opacity: 1; border-color: #fff; } .new-swiper [data-swiper-parallax] { transition: none; } .new-swiper.scale-height .swiper-wrapper { height: 0; padding-bottom: var(--scale-ratio, 45%); } /* ============================================================ * Slide text — decorative layer (zibll .s-desc / .slide-text) * Main hero title is NOT here; it is search before_html. * ============================================================ */ .aksrt-slide-text, .s-desc, .slide-text { position: absolute; color: #fff; bottom: 0; padding: 1.8em 2.5em; background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent); width: 100%; font-size: 16px; text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); z-index: 1; border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px); } /* zibll: .slide-text unsets bottom bar, uses abs-center placement */ .aksrt-slide-text, .slide-text:not(.s-desc) { background: unset; bottom: unset; --text-size-pc: 20px; font-size: var(--text-size-pc); opacity: 1; transition: opacity 1s; } .aksrt-slide-text__title, .slide-title { font-family: var(--font-ui); font-size: inherit; font-weight: 600; margin: 0; line-height: 1.35; text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } .s-desc .aksrt-slide-text__title, .s-desc .slide-title { font-size: 16px; font-weight: normal; } .aksrt-slide-text__desc, .slide-desc { margin: 0.6em 0 0; line-height: 1.5; font-size: 60%; color: rgba(255, 255, 255, 0.95); text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } .scale-height { --scale-height: 40%; --pc-height: 100%; --m-height: 100%; width: 100%; height: auto; aspect-ratio: 5 / 2; padding-bottom: 0; } @supports not (aspect-ratio: 1 / 1) { .scale-height { height: 0; padding-bottom: var(--scale-height); box-sizing: content-box; aspect-ratio: auto; } } .scale-height .swiper-wrapper, .scale-height .swiper-slide img { position: absolute; } @media (max-width: 767px) { .new-swiper .swiper-wrapper { height: var(--m-height); } .slide-text:not(.s-desc) { --text-size-m: 13px; font-size: var(--text-size-m); } } /* ============================================================ * Container * ============================================================ */ .header-slider-container, .header-components-container { position: relative; isolation: isolate; width: 100%; margin-bottom: 20px; } /* Device visibility for hero/banner slides */ @media (max-width: 767.98px) { .hero-slide--pc-only, .banner-slide--pc-only { display: none !important; } } @media (min-width: 768px) { .hero-slide--mobile-only, .banner-slide--mobile-only { display: none !important; } }