/* ===================================================================== BRAMKA WIEKOWA (age gate) — 1:1 z grupazywiec.pl Wygenerowano automatycznie z motywu grupazywiec (css/style.min.css + template/block/slider/style.min.css + assets/scss/component/_splide.min.scss). Sekcje: 1. Baza (to, co w oryginale dawał globalny stylesheet motywu — tu zescope'owane do .s-age-check) 2. Splide core CSS (globalne klasy .splide*; pomiń tę sekcję, jeśli motyw docelowy już ładuje splide-core.css) 3. Reguły bloku .s-slider potrzebne bramce 4. Reguły bramki (.s-age-check) — dosłownie z oryginału (zmienione tylko nazwy klas logo: .header__logo--full/--small -> .s-age-check__logo-img--full/--small) UWAGA: wartości "rem" liczą się względem font-size na . Oryginał ma: html { font-size: clamp(12px, .832vw, 16px) } @media screen and (min-device-width:1280px) and (max-device-width:1920px) { html { font-size: clamp(9.6px, .832vw, 12.8px) } } TA WERSJA (standalone): wszystkie rem zamienione na calc(N * var(--ag-rem)); --ag-rem odtwarza root font-size oryginału. Działa niezależnie od motywu docelowego. ===================================================================== */ /* ---------- 1. BAZA (scoped) ---------- */ /* ROOT: odpowiednik html{font-size} z oryginału — dzięki temu bramka nie zależy od root font-size motywu docelowego */ .s-age-check{--ag-rem:clamp(12px, .832vw, 16px)} @media screen and (min-device-width: 1280px) and (max-device-width: 1920px){.s-age-check{--ag-rem:clamp(9.6px, .832vw, 12.8px)}} .s-age-check,.s-age-check *,.s-age-check *::before,.s-age-check *::after{box-sizing:border-box} .s-age-check{font-size:calc(1 * var(--ag-rem));color:#000;font-family:"Gotham A","Gotham B","Gotham",sans-serif;font-weight:400;line-height:1.2} .s-age-check img{border:0;max-width:100%;height:auto} .s-age-check input{font-family:inherit;font-size:100%;margin:0;line-height:normal} .s-age-check input[type="submit"]{-webkit-appearance:button;cursor:pointer} .s-age-check input::-moz-focus-inner{border:0;padding:0} .s-age-check input:focus{outline:0} .s-age-check a{color:#c91f37;text-decoration:none;transition:color .3s} .s-age-check a:hover{color:#c91f37;text-decoration:underline} .s-age-check .container{width:100%;max-width:1484px;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto;display:flex;flex-wrap:wrap;position:relative} @media screen and (min-device-width: 1280px) and (max-device-width: 1920px){.s-age-check .container{max-width:1188px}} .s-age-check .container--full{max-width:100%} .s-age-check .row{margin-left:-15px;margin-right:-15px;width:calc(100% + 30px);display:flex;flex-wrap:wrap} .s-age-check .col-auto{padding-left:15px;padding-right:15px;width:100%} .s-age-check h2.h1,.s-age-check .h1{font-size:calc(9.31 * var(--ag-rem));color:#C91F37;font-weight:800;margin:0 0 40px;line-height:1.1} @media (max-width: 991px){.s-age-check h2.h1,.s-age-check .h1{font-size:calc(6.31 * var(--ag-rem));margin:0 0 20px}} @media (max-width: 767px){.s-age-check h2.h1,.s-age-check .h1{font-size:calc(3.31 * var(--ag-rem))}} .s-age-check p{color:#464a49;margin:calc(2 * var(--ag-rem)) 0 calc(2 * var(--ag-rem)) 0;font-size:calc(1.6 * var(--ag-rem));line-height:1.5;letter-spacing:inherit} @media (max-width: 767px){.s-age-check p{font-size:15px;line-height:20px}} /* USUNIĘTE (poprawka względem paczki bramka-wiekowa-migracja/gotowe): generator zescope'ował globalne .section{position:relative;overflow-x:hidden} ich motywu do .s-age-check.section (0,2,0), co wygrywa z .s-age-check{position:fixed;overflow-x:auto} z sekcji 4 (0,1,0). W oryginale obie reguły mają (0,1,0) i wygrywa późniejsza — bramka jest fixed i sama się scrolluje. Z tą regułą sekcja siedziała w normalnym przepływie z overflow-x:hidden: przy stanie błędu (dłuższa treść) nic nie dawało się przescrollować, bo body ma overflow:hidden. */ /* ---------- 2. SPLIDE CORE ---------- */ .splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list{display:block}.splide__track--fade>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:transparent}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} /* ---------- 3. BLOK .s-slider (fragmenty potrzebne bramce) ---------- */ @media (max-width: 767px){.s-slider{overflow-x:hidden}.s-slider>.container{padding-left:0;padding-right:0}} .s-slider__container{position:relative} .s-slider .slider-carousel .slider-slide{width:100%} .s-slider .slider-carousel .slider-slide img{display:block;object-fit:cover;width:100%;height:100%;min-height:150px} @media (min-width: 1280px){.s-slider .slider-carousel .slider-slide img{height:calc(44.625 * var(--ag-rem))}} .s-slider .slider-carousel .splide__arrows{display:none !important} /* ---------- 3b. LOGO (oryginał: .header__logo--full/--small z _header.scss) ---------- */ @media (max-width: 1279px){.s-age-check__logo-img--full{display:none !important}} .s-age-check__logo-img--small{display:none;height:54px;object-fit:contain;object-position:center} @media (max-width: 1279px){.s-age-check__logo-img--small{display:inline-block !important}} @media screen and (min-width: 991px) and (max-width: 992px){.s-age-check__logo-img--small{margin-bottom:1px}} @media (max-width: 991px){.s-age-check__logo-img--small{height:45px}} @media (max-width: 767px){.s-age-check__logo-img--small{height:45px}} /* ---------- 4. BRAMKA (.s-age-check) — oryginał ---------- */ .s-age-check{position:fixed;top:0;z-index:9999;left:0;width:100%;height:100%;background:#FFF;overflow-x:auto} .s-age-check__logo{position:fixed;top:15px;left:0;width:94px;display:block;z-index:3;text-align:center} @media (max-width: 991px){.s-age-check__logo{width:56px;padding:0 5px}} .s-age-check__logo img{display:inline-block} .s-age-check__logo img.s-age-check__logo-img--small{display:none} .s-age-check__logo--scrolling .s-age-check__logo-img--full{display:none !important} .s-age-check__logo--scrolling .s-age-check__logo-img--small{display:inline-block !important} .s-age-check::before{content:'';width:94px;height:100%;position:fixed;top:0;left:0;display:block;background-color:#cb1f37;z-index:2} @media (max-width: 991px){.s-age-check::before{width:56px}} @media (max-width: 767px){.s-age-check::before{width:56px}} .s-age-check .s-slider__container::before{content:none;display:none} .s-age-check .s-slider__container::after{content:'';background:rgba(0,0,0,0.7);width:100%;height:100%;top:0;left:0;display:block;position:absolute;z-index:1} .s-age-check .s-slider__container .splide{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%} .s-age-check .s-slider__container .splide .splide__track{height:100%} .s-age-check .container--full{padding-left:0;padding-right:0} .s-age-check .container--full>.row{margin-left:0;margin-right:0;width:100%} .s-age-check .container--full>.row>.col-auto{padding-left:0;padding-right:0} .s-age-check__container123,.s-age-check__container123.container{max-width:1245px;margin:0 auto} @media (max-width: 1440px){.s-age-check__container123,.s-age-check__container123.container{max-width:100%;padding-left:calc(10 * var(--ag-rem));padding-right:calc(10 * var(--ag-rem))}} @media (max-width: 991px){.s-age-check__container123,.s-age-check__container123.container{max-width:100%;padding-left:calc(7 * var(--ag-rem));padding-right:calc(7 * var(--ag-rem))}} @media (max-width: 767px){.s-age-check__container123,.s-age-check__container123.container{padding-left:calc(5.5 * var(--ag-rem));padding-right:calc(1 * var(--ag-rem))}} .s-age-check__content{z-index:999;position:relative;color:#FFF;width:100%;padding-top:calc(13.2 * var(--ag-rem));padding-bottom:calc(3.5 * var(--ag-rem))} @media (max-width: 991px){.s-age-check__content{padding-top:calc(8.2 * var(--ag-rem))}} .s-age-check__content .h1{color:#FFF;font-size:calc(9.31 * var(--ag-rem));letter-spacing:-4px;line-height:.97;display:block} @media (max-width: 991px){.s-age-check__content .h1{font-size:calc(6.31 * var(--ag-rem));letter-spacing:-2px}} @media (max-width: 767px){.s-age-check__content .h1{font-size:calc(3.31 * var(--ag-rem));letter-spacing:0}} .s-age-check__content .h1.js-age-check-headline--2{display:none} .s-age-check__date{margin-top:calc(8.9 * var(--ag-rem));margin-left:calc(.55 * var(--ag-rem))} @media (max-width: 991px){.s-age-check__date{margin-top:calc(4.9 * var(--ag-rem))}} @media (max-width: 767px){.s-age-check__date{margin-top:calc(2.9 * var(--ag-rem))}} .s-age-check__date-head{font-size:calc(2 * var(--ag-rem));font-weight:300;text-transform:uppercase;letter-spacing:-1.3px;margin:0;display:block} @media (max-width: 767px){.s-age-check__date-head{font-size:calc(1.35 * var(--ag-rem));font-weight:400}} .s-age-check__date2{margin-top:calc(3.25 * var(--ag-rem));padding-left:calc(.5 * var(--ag-rem));display:flex;gap:0 calc(3 * var(--ag-rem))} @media (max-width: 991px){.s-age-check__date2{gap:0 calc(1.5 * var(--ag-rem))}} @media (max-width: 767px){.s-age-check__date2{gap:calc(1.5 * var(--ag-rem)) calc(1 * var(--ag-rem));flex-wrap:wrap;padding-left:0;margin-top:calc(1.25 * var(--ag-rem))}} .s-age-check__date2-col{width:130px} @media (max-width: 767px){.s-age-check__date2-col{width:calc(30% - calc(1 * var(--ag-rem)))}} .s-age-check__date2-col:nth-child(3){width:234px} @media (max-width: 767px){.s-age-check__date2-col:nth-child(3){width:40%}} .s-age-check__date2-col:nth-child(4){width:auto;margin-left:calc(.1 * var(--ag-rem))} @media (max-width: 991px){.s-age-check__date2-col:nth-child(4){margin-left:0}} @media (max-width: 767px){.s-age-check__date2-col:nth-child(4){width:100%}} .s-age-check__date2-col input[type="number"]{display:block;width:100%;background:#FFF;outline:none;border:0;padding:calc(1.22 * var(--ag-rem)) calc(.5 * var(--ag-rem));-moz-appearance:textfield;text-align:center;font-size:calc(4 * var(--ag-rem));height:calc(7.08 * var(--ag-rem));border-radius:0} @media (max-width: 767px){.s-age-check__date2-col input[type="number"]{font-size:calc(3 * var(--ag-rem));height:calc(4.5 * var(--ag-rem));padding:calc(1.22 * var(--ag-rem)) calc(1 * var(--ag-rem))}} .s-age-check__date2-col input[type="number"]::-webkit-outer-spin-button,.s-age-check__date2-col input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none} .s-age-check__date2-col input[type="submit"]{display:block;text-align:center;background:#cf1f37;font-size:calc(3.5 * var(--ag-rem));font-weight:800;color:#FFF;padding:calc(1.5 * var(--ag-rem)) calc(2.1 * var(--ag-rem));outline:none;border:0;text-transform:uppercase;height:calc(7.08 * var(--ag-rem));border-radius:0} @media (max-width: 767px){.s-age-check__date2-col input[type="submit"]{padding:calc(.5 * var(--ag-rem)) calc(2.1 * var(--ag-rem));font-size:calc(2.5 * var(--ag-rem));height:calc(4.5 * var(--ag-rem));width:100%}} .s-age-check__date2-col input[type="submit"]:hover{background-color:#d71a35;background-color:#b00419} .s-age-check__date2-col span{display:block;margin-top:calc(1.6 * var(--ag-rem));font-size:calc(2 * var(--ag-rem));text-transform:uppercase;font-weight:300;letter-spacing:-1.5px} @media (max-width: 767px){.s-age-check__date2-col span{font-size:calc(1.35 * var(--ag-rem));margin-top:calc(.6 * var(--ag-rem));font-weight:400}} .s-age-check__date2--error input[type="number"]{background-color:#cf1f37;color:#FFF} .s-age-check__desc{margin-top:calc(8.3 * var(--ag-rem));font-size:calc(3.7 * var(--ag-rem));font-weight:800;line-height:1.22;color:#FFF;display:none} @media (max-width: 991px){.s-age-check__desc{margin-top:calc(4.3 * var(--ag-rem));font-size:calc(2.7 * var(--ag-rem))}} @media (max-width: 767px){.s-age-check__desc{font-size:calc(1.7 * var(--ag-rem))}} .s-age-check__desc p{font-size:calc(3.7 * var(--ag-rem));font-weight:800;line-height:1.22;color:#FFF} @media (max-width: 991px){.s-age-check__desc p{font-size:calc(2.7 * var(--ag-rem))}} @media (max-width: 767px){.s-age-check__desc p{font-size:calc(1.7 * var(--ag-rem))}} @media (max-width: 991px){.s-age-check__desc p br{display:none}} .s-age-check__desc>*:first-child{margin-top:0} .s-age-check__desc>*:last-child{margin-bottom:0} .s-age-check__desc ul{font-size:calc(2.6 * var(--ag-rem));margin-top:calc(3.4 * var(--ag-rem));margin-bottom:0;padding:0 0 0 3px;list-style:none;letter-spacing:.5px} @media (max-width: 991px){.s-age-check__desc ul{font-size:calc(1.6 * var(--ag-rem));margin-top:calc(2.4 * var(--ag-rem))}} .s-age-check__desc ul li{padding-left:calc(3.5 * var(--ag-rem));margin-bottom:calc(2.4 * var(--ag-rem));position:relative} @media (max-width: 991px){.s-age-check__desc ul li{padding-left:calc(2.5 * var(--ag-rem));margin-bottom:calc(1.4 * var(--ag-rem))}} .s-age-check__desc ul li::before{content:'';width:calc(1.05 * var(--ag-rem));height:calc(1.05 * var(--ag-rem));background:#FFF;display:block;position:absolute;top:calc(1.25 * var(--ag-rem));left:0} @media (max-width: 991px){.s-age-check__desc ul li::before{top:calc(0.35 * var(--ag-rem))}} .s-age-check__desc ul li:last-child{margin-bottom:0} .s-age-check__desc ul li a{color:#FFF;text-decoration:underline} .s-age-check__footer{margin-top:calc(8 * var(--ag-rem));width:100%} @media (max-width: 991px){.s-age-check__footer{margin-top:calc(5.5 * var(--ag-rem))}} @media (max-width: 767px){.s-age-check__footer{margin-top:calc(4.5 * var(--ag-rem))}} .s-age-check__footer::after{content:'';width:100%;display:block;overflow:hidden;clear:both} .s-age-check__footer-left{width:50%;float:left;padding:0 calc(.5 * var(--ag-rem))} @media (max-width: 767px){.s-age-check__footer-left{width:100%;margin-bottom:calc(3 * var(--ag-rem))}} .s-age-check__footer-left img{max-width:207px} @media (max-width: 767px){.s-age-check__footer-left img{max-width:100px}} .s-age-check__footer-right{text-align:right;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;width:50%;float:left;padding-right:3%} @media (max-width: 767px){.s-age-check__footer-right{width:100%;padding-left:calc(5 * var(--ag-rem));padding-right:calc(1 * var(--ag-rem))}} .s-age-check__footer-right p{color:#FFF;font-size:calc(1.5 * var(--ag-rem));font-weight:300;line-height:1.2;letter-spacing:-.8px;margin:0 0 calc(3.1 * var(--ag-rem)) 0} @media (max-width: 767px){.s-age-check__footer-right p{margin:0 0 calc(1.5 * var(--ag-rem)) 0;font-size:calc(1.25 * var(--ag-rem));font-weight:400}} .s-age-check__footer-right img{max-width:207px} @media (max-width: 767px){.s-age-check__footer-right img{max-width:100px}} .s-age-check--error .h1.js-age-check-headline--1{display:none} .s-age-check--error .h1.js-age-check-headline--2,.s-age-check--error .s-age-check__desc{display:block} .s-slider.s-age-check .slider-carousel .slider-slide img{height:100%} body.admin-bar .s-age-check__logo{top:calc(3.5 * var(--ag-rem))}