.elementor-17 .elementor-element.elementor-element-eee5046{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-17 .elementor-element.elementor-element-eee5046:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-eee5046 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F3F0;}.elementor-17 .elementor-element.elementor-element-74e931e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:5%;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-17 .elementor-element.elementor-element-479551e{padding:0vw 0vw 0vw 1vw;border-style:solid;border-width:0px 0px 0px 7px;border-color:var( --e-global-color-0c170ba );}.elementor-17 .elementor-element.elementor-element-479551e .elementor-heading-title{font-family:"Sora", Sans-serif;font-size:1.2vw;font-weight:900;text-transform:uppercase;color:var( --e-global-color-0c170ba );}.elementor-17 .elementor-element.elementor-element-cd4f957 .elementor-heading-title{font-family:"Sora", Sans-serif;font-size:2.5vw;font-weight:900;line-height:3.2vw;color:var( --e-global-color-a9ed673 );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-17 .elementor-element.elementor-element-767c32c{width:var( --container-widget-width, 85% );max-width:85%;--container-widget-width:85%;--container-widget-flex-grow:0;font-family:"Manrope", Sans-serif;font-size:1.1vw;font-weight:400;color:var( --e-global-color-a9ed673 );}.elementor-17 .elementor-element.elementor-element-1335275{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-17 .elementor-element.elementor-element-9641e68 img{width:100%;}.elementor-17 .elementor-element.elementor-element-f5daf9e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:4%;--padding-bottom:4%;--padding-left:0%;--padding-right:0%;}.elementor-17 .elementor-element.elementor-element-f5daf9e:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-f5daf9e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FCFBFB;}.elementor-17 .elementor-element.elementor-element-1b60f00{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-17847e9{width:var( --container-widget-width, 84% );max-width:84%;padding:0% 0% 0% 6%;--container-widget-width:84%;--container-widget-flex-grow:0;}.elementor-17 .elementor-element.elementor-element-fb41c8f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:4%;--padding-bottom:4%;--padding-left:0%;--padding-right:12%;}.elementor-17 .elementor-element.elementor-element-9aadca0{padding:0vw 0vw 0vw 1vw;border-style:solid;border-width:0px 0px 0px 7px;border-color:var( --e-global-color-0c170ba );}.elementor-17 .elementor-element.elementor-element-9aadca0 .elementor-heading-title{font-family:"Sora", Sans-serif;font-size:1.2vw;font-weight:900;text-transform:uppercase;color:var( --e-global-color-0c170ba );}.elementor-17 .elementor-element.elementor-element-878d9ae{font-family:"Manrope", Sans-serif;font-size:1.2vw;font-weight:400;color:var( --e-global-color-a9ed673 );}.elementor-17 .elementor-element.elementor-element-e5d081b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-33d5350{--spacer-size:50px;background-color:var( --e-global-color-0c170ba );}.elementor-17 .elementor-element.elementor-element-8103954{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:4%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:5%;--padding-bottom:0%;--padding-left:5%;--padding-right:0%;}.elementor-17 .elementor-element.elementor-element-8103954:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-8103954 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FCF2E9;background-image:url("https://markety.blackpanther.com.pl/wp-content/uploads/2026/08/plama-e1787296744936.png");background-position:100% 38%;background-repeat:no-repeat;background-size:33% auto;}.elementor-17 .elementor-element.elementor-element-1c04098{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-b636f82{padding:0vw 0vw 0vw 1vw;border-style:solid;border-width:0px 0px 0px 7px;border-color:var( --e-global-color-0c170ba );}.elementor-17 .elementor-element.elementor-element-b636f82 .elementor-heading-title{font-family:"Sora", Sans-serif;font-size:1.2vw;font-weight:900;text-transform:uppercase;color:var( --e-global-color-0c170ba );}.elementor-17 .elementor-element.elementor-element-62c5b96 .elementor-heading-title{font-family:"Sora", Sans-serif;font-size:6vw;font-weight:900;line-height:7vw;color:var( --e-global-color-a9ed673 );}.elementor-17 .elementor-element.elementor-element-d6907e0{font-family:"Manrope", Sans-serif;font-size:1.2vw;font-weight:400;color:var( --e-global-color-a9ed673 );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-17 .elementor-element.elementor-element-25d73cb .elementor-button{background-color:var( --e-global-color-0c170ba );font-family:"Sora", Sans-serif;font-size:1.1vw;font-weight:500;border-radius:5px 5px 5px 5px;padding:6% 13% 6% 13%;}.elementor-17 .elementor-element.elementor-element-25d73cb{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-17 .elementor-element.elementor-element-25d73cb .elementor-button-content-wrapper{flex-direction:row;}.elementor-17 .elementor-element.elementor-element-25d73cb .elementor-button .elementor-button-content-wrapper{gap:13px;}.elementor-17 .elementor-element.elementor-element-53e6502{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-3%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-17 .elementor-element.elementor-element-9754354{--swiper-slides-to-display:3;--swiper-slides-gap:10px;margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;padding:4% 0% 4% 0%;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;}.elementor-17 .elementor-element.elementor-element-9754354 .swiper-slide > .elementor-element{height:100%;}.elementor-17 .elementor-element.elementor-element-2e640d9{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-17 .elementor-element.elementor-element-bf4e982{text-align:center;}.elementor-17 .elementor-element.elementor-element-bf4e982 .elementor-heading-title{font-family:"Sora", Sans-serif;font-size:2.5vw;font-weight:900;line-height:3.2vw;color:var( --e-global-color-a9ed673 );}.elementor-widget-media-carousel .elementor-carousel-image-overlay{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-17 .elementor-element.elementor-element-81ac419.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:40px;}.elementor-17 .elementor-element.elementor-element-81ac419 .elementor-main-swiper{height:15vh;}.elementor-17 .elementor-element.elementor-element-81ac419 .elementor-main-swiper .swiper-slide{border-width:0px 0px 0px 0px;border-color:#02010100;}.elementor-17 .elementor-element.elementor-element-81ac419 .elementor-swiper-button{font-size:20px;}.elementor-17 .elementor-element.elementor-element-81ac419 .elementor-main-swiper:not(.elementor-thumbnails-swiper) .elementor-carousel-image{background-size:contain;}.elementor-17 .elementor-element.elementor-element-04a637e.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:40px;}.elementor-17 .elementor-element.elementor-element-04a637e .elementor-main-swiper{height:15vh;}.elementor-17 .elementor-element.elementor-element-04a637e .elementor-main-swiper .swiper-slide{border-width:0px 0px 0px 0px;border-color:#02010100;}.elementor-17 .elementor-element.elementor-element-04a637e .elementor-swiper-button{font-size:20px;}.elementor-17 .elementor-element.elementor-element-04a637e .elementor-main-swiper:not(.elementor-thumbnails-swiper) .elementor-carousel-image{background-size:contain;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-17 .elementor-element.elementor-element-8103954:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-8103954 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0% 0%;}.elementor-17 .elementor-element.elementor-element-9754354{--swiper-slides-to-display:2;}.elementor-17 .elementor-element.elementor-element-81ac419.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-17 .elementor-element.elementor-element-04a637e.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}}@media(max-width:767px){.elementor-17 .elementor-element.elementor-element-eee5046{--padding-top:15%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-17 .elementor-element.elementor-element-74e931e{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-17 .elementor-element.elementor-element-479551e .elementor-heading-title{font-size:4vw;}.elementor-17 .elementor-element.elementor-element-cd4f957 .elementor-heading-title{font-size:6vw;line-height:7vw;}.elementor-17 .elementor-element.elementor-element-767c32c{--container-widget-width:100vw;--container-widget-flex-grow:0;width:var( --container-widget-width, 100vw );max-width:100vw;font-size:4vw;}.elementor-17 .elementor-element.elementor-element-f5daf9e{--padding-top:10%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-17 .elementor-element.elementor-element-1b60f00{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-1b60f00.e-con{--order:99999 /* order end hack */;}.elementor-17 .elementor-element.elementor-element-17847e9{padding:0% 0% 0% 0%;--container-widget-width:100vw;--container-widget-flex-grow:0;width:var( --container-widget-width, 100vw );max-width:100vw;}.elementor-17 .elementor-element.elementor-element-17847e9 img{width:100%;}.elementor-17 .elementor-element.elementor-element-fb41c8f{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-17 .elementor-element.elementor-element-9aadca0 .elementor-heading-title{font-size:4vw;}.elementor-17 .elementor-element.elementor-element-878d9ae{font-size:4vw;}.elementor-17 .elementor-element.elementor-element-8103954:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-8103954 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://markety.blackpanther.com.pl/wp-content/uploads/2026/08/plama-e1787296744936.png");background-position:8% 60%;background-size:0vw auto;}.elementor-17 .elementor-element.elementor-element-8103954{--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:10%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-17 .elementor-element.elementor-element-b636f82 .elementor-heading-title{font-size:4vw;}.elementor-17 .elementor-element.elementor-element-62c5b96 .elementor-heading-title{font-size:10vw;}.elementor-17 .elementor-element.elementor-element-d6907e0{font-size:4vw;}.elementor-17 .elementor-element.elementor-element-25d73cb .elementor-button{font-size:4vw;}.elementor-17 .elementor-element.elementor-element-9754354{--swiper-slides-to-display:1;}.elementor-17 .elementor-element.elementor-element-bf4e982{padding:15% 10% 20% 10%;}.elementor-17 .elementor-element.elementor-element-bf4e982 .elementor-heading-title{font-size:10vw;}.elementor-17 .elementor-element.elementor-element-81ac419.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-17 .elementor-element.elementor-element-04a637e.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}}@media(min-width:768px){.elementor-17 .elementor-element.elementor-element-74e931e{--width:45%;}.elementor-17 .elementor-element.elementor-element-1335275{--width:55%;}.elementor-17 .elementor-element.elementor-element-1b60f00{--width:45%;}.elementor-17 .elementor-element.elementor-element-fb41c8f{--width:50%;}.elementor-17 .elementor-element.elementor-element-1c04098{--width:30%;}.elementor-17 .elementor-element.elementor-element-53e6502{--width:70%;}}/* Start custom CSS for loop-carousel, class: .elementor-element-9754354 *//* ========================================================== KAMI — RESPONSIVE 3D LOOP CAROUSEL - MAIN centralny - SIDE pionowo wycentrowane względem MAIN - SIDE mniejsze - SIDE schowane pod MAIN - SIDE zapadają się do środka - controls pod sliderem ========================================================== */ .kami-3d-carousel { container-type: inline-size; position: relative; isolation: isolate; overflow: visible !important; /* ====================================================== SZEROKOŚCI MAIN jest fizycznie szerszy. SIDE dostaje większą szerokość bazową, a potem scale(.82), dlatego: - jest niższy, - ale nie robi się przesadnie wąski. ====================================================== */ --kami-main-width: 136%; --kami-side-width: 120%; --kami-side-scale: .82; /* ====================================================== NACHODZENIE BOCZNYCH POD MAIN ====================================================== */ --kami-side-x: clamp(1.5rem, 5.3cqw, 4rem); /* ====================================================== PION 0 = środki bocznych dokładnie na środku MAIN. Nie opuszczamy ich już translateY(). Centrowaniem zajmuje się flex. ====================================================== */ --kami-side-y: 0rem; /* ====================================================== 3D ====================================================== */ --kami-perspective: clamp(44rem, 95cqw, 72rem); /* * MAIN subtelnie do przodu. */ --kami-main-z: clamp(.3rem, .8cqw, .7rem); /* * SIDE do tyłu. */ --kami-side-z: clamp(.8rem, 2cqw, 1.6rem); /* * Zapadnięcie wewnętrznych krawędzi. */ --kami-side-angle: 11deg; /* ====================================================== SAFE AREA ====================================================== */ --kami-safe-top: clamp(1rem, 2.2cqw, 1.8rem); --kami-safe-bottom: clamp(1.5rem, 3.5cqw, 3rem); --kami-clip-top: clamp(2rem, 5cqw, 4rem); --kami-clip-bottom: clamp(2.5rem, 7cqw, 5.5rem); /* ====================================================== MAIN SHADOW ====================================================== */ --kami-shadow-y: clamp(.5rem, 1.2cqw, 1rem); --kami-shadow-blur: clamp(1rem, 2.2cqw, 1.9rem); /* ====================================================== COLORS ====================================================== */ --kami-orange: #ff5a00; --kami-dot-muted: #f4c5a2; /* ====================================================== CONTROLS ====================================================== */ --kami-control-size: clamp(2.9rem, 5.2cqw, 3.7rem); /* * STRZAŁKA <-> PAGINACJA * Celowo większy niż wcześniej. */ --kami-nav-gap: clamp(1.8rem, 4cqw, 3rem); /* * ODSTĘP MIĘDZY KROPKAMI */ --kami-dot-gap: clamp(.65rem, 1.45cqw, 1.05rem); --kami-dot-size: clamp(.45rem, .8cqw, .62rem); /* * SLIDER <-> CONTROLS */ --kami-controls-top: clamp(.9rem, 2cqw, 1.6rem); /* ====================================================== ANIMATION ====================================================== */ --kami-speed: 620ms; --kami-ease: cubic-bezier(.22, .61, .36, 1); } /* ========================================================== ELEMENTOR ========================================================== */ .kami-3d-carousel > .elementor-widget-container { overflow: visible !important; } /* ========================================================== SWIPER ========================================================== */ .kami-3d-carousel .swiper { position: relative; width: 100%; overflow: visible !important; box-sizing: border-box; padding-block-start: var(--kami-safe-top); padding-block-end: var(--kami-safe-bottom); /* * Po bokach nic nie wychodzi poza slider. * Góra/dół dostają dodatkową przestrzeń * na perspektywę oraz shadow. */ clip-path: inset( calc(0rem - var(--kami-clip-top)) 0 calc(0rem - var(--kami-clip-bottom)) 0 ); } /* ========================================================== WRAPPER KLUCZOWA ZMIANA: stretch powoduje, że wszystkie slide'y mają tę samą wysokość — wysokość najwyższego kafelka. ========================================================== */ .kami-3d-carousel .swiper-wrapper { align-items: stretch; perspective: var(--kami-perspective); perspective-origin: 50% 50%; transform-style: preserve-3d; } /* ========================================================== SLIDE Każdy slide jest flexboxem. Dzięki: align-items:center SIDE o wysokości 82% jest ustawiony dokładnie w pionowym środku względem MAIN. ========================================================== */ .kami-3d-carousel .swiper-slide { position: relative; height: auto !important; overflow: visible !important; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; z-index: 1; } /* ========================================================== CARD PLANE ========================================================== */ .kami-3d-carousel .kami-card-plane { position: relative; flex: 0 0 auto; display: block; max-width: none !important; box-sizing: border-box; transform-origin: 50% 50%; transform-style: preserve-3d; backface-visibility: hidden; will-change: width, transform, opacity, filter; transition: width var(--kami-speed) var(--kami-ease), transform var(--kami-speed) var(--kami-ease), opacity 350ms ease, filter 350ms ease; } /* ========================================================== DEFAULT / HIDDEN ========================================================== */ .kami-3d-carousel.kami-3d-ready .swiper-slide .kami-card-plane { width: var(--kami-side-width); opacity: 0; pointer-events: none; transform: translate3d( 0, var(--kami-side-y), calc(0rem - var(--kami-side-z)) ) scale( var(--kami-side-scale) ); z-index: 0; } /* ========================================================== LEFT / PREV Kafel jest: - mniejszy - PIONOWO WYŚRODKOWANY - przesunięty w PRAWO - cofnięty - schowany pod MAIN - prawa krawędź zapada się w głąb ========================================================== */ .kami-3d-carousel.kami-3d-ready .swiper-slide-prev { z-index: 5; } .kami-3d-carousel.kami-3d-ready .swiper-slide-prev .kami-card-plane { width: var(--kami-side-width); opacity: 1; pointer-events: auto; transform: /* * w PRAWO = do MAIN */ translate3d( var(--kami-side-x), var(--kami-side-y), calc(0rem - var(--kami-side-z)) ) /* * wewnętrzna krawędź zapada się */ rotateY( var(--kami-side-angle) ) /* * zmniejszenie odbywa się * względem ŚRODKA karty */ scale( var(--kami-side-scale) ); filter: brightness(.97) saturate(.96); z-index: 5; } /* ========================================================== MAIN / ACTIVE ========================================================== */ .kami-3d-carousel.kami-3d-ready .swiper-slide-active { z-index: 30; } .kami-3d-carousel.kami-3d-ready .swiper-slide-active .kami-card-plane { width: var(--kami-main-width); opacity: 1; pointer-events: auto; transform: translate3d( 0, 0, var(--kami-main-z) ); filter: drop-shadow( 0 var(--kami-shadow-y) var(--kami-shadow-blur) rgba(31, 18, 8, .11) ); z-index: 30; } /* ========================================================== RIGHT / NEXT ========================================================== */ .kami-3d-carousel.kami-3d-ready .swiper-slide-next { z-index: 5; } .kami-3d-carousel.kami-3d-ready .swiper-slide-next .kami-card-plane { width: var(--kami-side-width); opacity: 1; pointer-events: auto; transform: /* * w LEWO = do MAIN */ translate3d( calc(0rem - var(--kami-side-x)), var(--kami-side-y), calc(0rem - var(--kami-side-z)) ) rotateY( calc( 0deg - var(--kami-side-angle) ) ) scale( var(--kami-side-scale) ); filter: brightness(.97) saturate(.96); z-index: 5; } /* ========================================================== MAIN NA WIERZCHU ========================================================== */ .kami-3d-carousel .swiper-slide-active { isolation: isolate; } /* ========================================================== CONTROLS [ ← ] ● ○ ○ [ → ] Większy odstęp: - między arrows a pagination - między samymi dots ========================================================== */ .kami-3d-carousel .kami-carousel-controls { position: relative; z-index: 100; display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; margin-inline: auto; margin-block-start: var(--kami-controls-top); margin-block-end: clamp(.6rem, 1.5cqw, 1.2rem); /* * TO jest odstęp: * * LEFT ↔ PAGINATION * PAGINATION ↔ RIGHT */ gap: var(--kami-nav-gap); opacity: 0; transition: opacity .25s ease; } .kami-3d-carousel.kami-3d-ready .kami-carousel-controls { opacity: 1; } /* ========================================================== NAV BUTTONS ========================================================== */ .kami-3d-carousel .kami-carousel-controls .kami-nav-prev, .kami-3d-carousel .kami-carousel-controls .kami-nav-next { position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; width: var(--kami-control-size) !important; height: var(--kami-control-size) !important; min-width: var(--kami-control-size); min-height: var(--kami-control-size); flex: 0 0 var(--kami-control-size); display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 50% !important; background: #fff !important; color: var(--kami-orange) !important; cursor: pointer; box-shadow: 0 calc(var(--kami-control-size) * .10) calc(var(--kami-control-size) * .38) rgba(45, 25, 12, .07); transition: transform .2s ease, box-shadow .2s ease !important; } /* ========================================================== UKRYCIE FABRYCZNEJ IKONY ========================================================== */ .kami-3d-carousel .kami-nav-prev > *, .kami-3d-carousel .kami-nav-next > * { opacity: 0 !important; visibility: hidden !important; } /* ========================================================== STRZAŁKA — LINIA ========================================================== */ .kami-3d-carousel .kami-nav-prev::before, .kami-3d-carousel .kami-nav-next::before { content: ""; position: absolute; top: 50%; left: 50%; width: 34%; height: .1em; border-radius: 99em; background: var(--kami-orange); transform: translate(-50%, -50%); } /* ========================================================== STRZAŁKA — GROT ========================================================== */ .kami-3d-carousel .kami-nav-prev::after, .kami-3d-carousel .kami-nav-next::after { content: "" !important; position: absolute; top: 50%; left: 50%; width: 16%; aspect-ratio: 1; border-right: .1em solid var(--kami-orange); border-bottom: .1em solid var(--kami-orange); font-size: calc( var(--kami-control-size) * .28 ); } .kami-3d-carousel .kami-nav-prev::after { transform: translate( -95%, -50% ) rotate(135deg); } .kami-3d-carousel .kami-nav-next::after { transform: translate( -5%, -50% ) rotate(-45deg); } /* ========================================================== PAGINATION ========================================================== */ .kami-3d-carousel .kami-pagination { position: relative !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; display: flex !important; align-items: center !important; justify-content: center !important; /* * ODDZIELNY gap tylko między dots. */ gap: var(--kami-dot-gap); overflow: visible !important; } /* ========================================================== DYNAMIC BULLETS RESET ========================================================== */ .kami-3d-carousel .kami-pagination.swiper-pagination-bullets-dynamic { width: auto !important; overflow: visible !important; transform: none !important; } /* ========================================================== DOT ========================================================== */ .kami-3d-carousel .kami-pagination .swiper-pagination-bullet { position: relative !important; inset: auto !important; width: var(--kami-dot-size) !important; height: var(--kami-dot-size) !important; min-width: var(--kami-dot-size); min-height: var(--kami-dot-size); margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--kami-dot-muted) !important; opacity: 1 !important; transform: none !important; transition: transform .2s ease, background-color .2s ease; } /* ACTIVE */ .kami-3d-carousel .kami-pagination .swiper-pagination-bullet-active { background: var(--kami-orange) !important; transform: scale(1.08) !important; } /* > 4 dots */ .kami-3d-carousel .kami-pagination .swiper-pagination-bullet.kami-dot-hidden { display: none !important; } /* ========================================================== HOVER ========================================================== */ @media (hover: hover) { .kami-3d-carousel .kami-nav-prev:hover, .kami-3d-carousel .kami-nav-next:hover { transform: translateY(-5%) !important; box-shadow: 0 calc(var(--kami-control-size) * .14) calc(var(--kami-control-size) * .5) rgba(45, 25, 12, .11); } } /* ========================================================== MEDIUM ========================================================== */ @container (max-width: 48rem) { .kami-3d-carousel { --kami-main-width: 132%; --kami-side-width: 118%; --kami-side-scale: .83; --kami-side-angle: 9deg; --kami-side-x: clamp(1.2rem, 4.6cqw, 2.9rem); /* * nadal środek w pionie */ --kami-side-y: 0rem; --kami-nav-gap: clamp(1.5rem, 3.5cqw, 2.5rem); --kami-dot-gap: clamp(.55rem, 1.25cqw, .9rem); } } /* ========================================================== NARROW ========================================================== */ @container (max-width: 38rem) { .kami-3d-carousel { --kami-main-width: 126%; --kami-side-width: 116%; --kami-side-scale: .84; --kami-side-angle: 8deg; --kami-side-x: clamp(1rem, 4cqw, 2.2rem); --kami-side-y: 0rem; --kami-nav-gap: clamp(1.2rem, 3cqw, 2rem); } } /* ========================================================== MOBILE ========================================================== */ @container (max-width: 30rem) { .kami-3d-carousel { --kami-main-width: 100%; --kami-side-width: 100%; --kami-side-scale: 1; --kami-main-z: 0rem; --kami-control-size: clamp(2.7rem, 11cqw, 3.3rem); --kami-dot-size: clamp(.45rem, 1.8cqw, .6rem); --kami-nav-gap: clamp(1rem, 5cqw, 1.5rem); --kami-dot-gap: clamp(.45rem, 2.5cqw, .7rem); } .kami-3d-carousel .swiper { clip-path: none; } .kami-3d-carousel .swiper-wrapper { perspective: none; } .kami-3d-carousel.kami-3d-ready .swiper-slide-active .kami-card-plane { width: 100%; transform: none; filter: drop-shadow( 0 .7rem 1.3rem rgba(31, 18, 8, .09) ); } .kami-3d-carousel.kami-3d-ready .swiper-slide-prev .kami-card-plane, .kami-3d-carousel.kami-3d-ready .swiper-slide-next .kami-card-plane { opacity: 0; pointer-events: none; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { .kami-3d-carousel .kami-card-plane, .kami-3d-carousel .kami-nav-prev, .kami-3d-carousel .kami-nav-next { transition-duration: .01ms !important; } }/* End custom CSS */ /* Start custom CSS for media-carousel, class: .elementor-element-81ac419 */.elementor-17 .elementor-element.elementor-element-81ac419 .swiper-wrapper { transition-timing-function: linear !important; }/* End custom CSS */ /* Start custom CSS for media-carousel, class: .elementor-element-04a637e */.elementor-17 .elementor-element.elementor-element-04a637e .swiper-wrapper { transition-timing-function: linear !important; }/* End custom CSS */