@charset "UTF-8"; /*** The new CSS reset - version 1.11 (last updated 20.9.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } html { scroll-behavior: smooth; } body { color: #fff; background-color: #000000; font-family: "Press Start 2P", monospace; letter-spacing: 0.5px; line-height: 1.2em; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; text-align: center; overflow-x: hidden; } main { width: 100%; } h1, h2, h3 { font-size: calc((1vw + 1vh) * 2); text-transform: uppercase; text-align: center; margin-bottom: 3%; } p { font-size: calc((1vw + 1vh) * 0.7); } section { margin-bottom: 5%; padding: 20px; width: 100%; } .is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .no-scroll { overflow: hidden; } #error { border: 2px solid #c42525; } .mob-btn-box { width: 100vw; height: 65px; background-color: #000000; position: relative; top: -1px; z-index: 3; } .mob-menu { width: 100%; height: 100%; position: fixed; top: 0; right: 0; z-index: 1; background-color: rgba(84, 84, 84, 0.816); transition: opacity 0.5s ease; } .mob-menu-box { background-color: #000000; width: 100%; height: 50%; position: absolute; top: 62px; padding: 80px 20px 60px; overflow: hidden; z-index: 2; transform: translateY(-120%); transition: transform 0.3s ease; } .mob-menu-box.is-visible { transform: translateY(0); } .mob-nuv-list { display: flex; flex-direction: column; gap: 15px; position: relative; z-index: 1; } .mob-nuv-item { font-size: calc((1vw + 1vh) * 0.7); text-transform: uppercase; } .mob-bg { position: absolute; top: 31px; right: -120px; } footer, .footer-list, .partners-box, .features-box, .about, .hero-list, .hero-link, .nav-list, .nav-link, .btn { display: flex; align-items: center; justify-content: center; } .btn { width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(90deg, #871c1c 0%, #c42525 100%); box-shadow: 2px 1px 20px 0px rgb(135, 28, 28); } .btn:hover { transform: scale(1.1); filter: brightness(0.9); } .mob-btn { position: absolute; top: 75px; left: 50%; transform: translate(-50%, -150%); fill: #fff; z-index: 3; flex-direction: column; gap: 4px; } .line { background-color: #fff; border-radius: 2px; height: 2.5px; left: 0; width: 50%; transition: transform 0.3s ease, opacity 0.3s ease; } .top, .bottom { transform-origin: center; } .mob-btn.active .top { transform: translateY(7px) translateY(-50%) rotate(-45deg); } .mob-btn.active .middle { opacity: 0; } .mob-btn.active .bottom { transform: translateY(-8px) translateY(70%) rotate(45deg); } .logo-container { width: 100%; position: relative; margin-bottom: 5px; height: calc((1vw + 1vh) * 25); } .logo { position: absolute; top: 35px; left: calc((1vw + 1vh) * 1); width: calc((1vw + 1vh) * 17); height: calc((1vw + 1vh) * 20); } .iframe-box { position: relative; width: 75%; padding-top: 40%; margin: 0 auto; } .iframe-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .swiper-pagination > span { background: linear-gradient(90deg, #871c1c 0%, #c42525 100%); } .swiper .sb { color: #871c1c; } .join { width: 150px; height: 79px; position: fixed; top: 100px; left: 0; z-index: 100; transform: translateX(-110%); transition: transform 0.3s ease; } .join-btn { fill: #fff; width: 25px; height: 25px; margin-left: 5px; transition: transform 0.3s ease, filter 0.3s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; } .join-btn .middle, .join-btn .bottom { width: 65%; height: 1.5px; background-color: #fff; } .join-btn .middle { transform: translateY(0.5px) rotate(45deg); } .join-btn .bottom { transform: translateY(-3px) rotate(-45deg); } .notification { width: 300px; height: 320px; border-radius: 12px; background-color: #000000; position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 25px; overflow: hidden; } .notification-title { margin-bottom: 30px; } .not-successful > h3 { color: red; } .successful > h3 { color: green; } .notification-img { position: absolute; right: -20px; bottom: 0; } .notification-img-zzz { position: absolute; right: 100px; bottom: 70px; } .notification-link { position: absolute; bottom: 30px; left: 45px; width: 55px; height: 55px; } .star { position: absolute; pointer-events: none; } @keyframes fall-1 { 0% { transform: translateY(0); } 100% { transform: translateY(100px); opacity: 0; } } @keyframes fall-2 { 0% { transform: translateY(0); } 100% { transform: translateY(200px); opacity: 0; } } @keyframes fall-3 { 0% { transform: translateY(0); } 100% { transform: translateY(300px); opacity: 0; } } .fa-star { font-family: "FontAwesome"; } header { width: 100%; } .nav-list { gap: 15px; } .nav-link { background: linear-gradient(90deg, #871c1c 0%, #c42525 100%); border-radius: 20px; font-size: calc((1vw + 1vh) * 0.5); padding: 6px; width: 100%; height: 40px; transition: transform 0.6s ease, filter 0.6s ease, box-shadow 0.6s ease; } .nav-link:hover, .nav-link:focus { filter: brightness(0.9); transform: scale(1.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .hero-list { margin: 0 auto; flex-wrap: wrap; gap: 15px; } .hero-link { width: calc(8vw + 8vh); border-radius: 10px; transition: transform 0.6s ease; } .hero-link:hover, .hero-link:focus { filter: brightness(0.9); transform: scale(1.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .trailer-text-cover { max-width: 261px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; } .trailer-text { text-align: center; } .trailer-titel { margin-top: 9%; } .screenshots-list { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px; padding: 0 15% 0 15%; display: none; gap: 20px; } .screenshots-item { width: 100%; overflow: hidden; } .screenshots-img { width: 100%; height: 100%; transition: transform 0.3s ease; } .screenshots-img:hover { transform: scale(1.1); } .about { flex-direction: column; padding: 30px; } .about-box { display: flex; flex-direction: column; gap: 45px; max-width: 860px; } .about-img { width: 100%; height: 80%; } .features-box { flex-wrap: wrap; gap: 20px; background-color: transparent; box-shadow: inset 200px 200px 200px 200px rgba(255, 255, 255, 0.1); margin: 0 auto; padding: 4%; border-radius: 30px; max-width: 1400px; } .features-box:not(:last-child) { margin-bottom: 20px; } .features-text-box { flex-grow: 1; max-width: 50%; } .features-text { display: block; max-width: 100%; } .features-img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; aspect-ratio: 4/3; } .partners-box { flex-direction: column; } .partners-box > a:focus { display: inline-block; transform: scale(1.1); } footer { background-color: #000000; flex-direction: column; gap: 10px; padding: 15px; width: 100%; } .footer-list { gap: 15px; margin-bottom: 15px; } .footer-item { text-transform: uppercase; font-size: calc((1vw + 1vh) * 0.7); } .footer-item:hover, .footer-item:focus { filter: brightness(0.5); } .footer-box { display: flex; align-items: center; margin-bottom: 15px; gap: 20px; } .footer-logo { transition: transform 0.3s ease; } .footer-logo:hover, .footer-logo:focus { transform: scale(1.1); } .footer-line::before { content: ""; display: inline-block; background-color: #fff; width: 2px; height: 100px; } .footer-title { font-size: calc((1vw + 1vh) * 0.7); margin: 0; margin-bottom: 10px; } .footer-contacts-list { display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 10px; height: 100%; } .footer-contacts-link { display: block; width: 35px; height: 35px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, fill 0.3s ease; } .footer-contacts-link > svg { transition: transform 0.4s ease; } .footer-contacts-link:hover, .footer-contacts-link:focus { background-color: #000000; fill: #fff; } .footer-contacts-link:hover > svg, .footer-contacts-link:focus > svg { transform: scale(1.2); } .footer-text { font-size: calc((1vw + 1vh) * 0.4); margin-bottom: 15px; } .contact { background-image: url("https://static.wixstatic.com/media/d23daf_1a03f160de514d0b9ff413bd5a99cf09~mv2.jpg/v1/fill/w_971,h_901,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/d23daf_1a03f160de514d0b9ff413bd5a99cf09~mv2.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } .contact-form { width: 300px; height: 320px; background-color: rgba(0, 0, 0, 0.7); border-radius: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; } .contact-btn-close { position: absolute; top: 10px; right: 15px; flex-direction: column; } .contact-btn-close .middle, .contact-btn-close .bottom { width: 60%; height: 2px; background-color: #fff; } .contact-btn-close .middle { transform: rotate(45deg); position: relative; top: 1px; } .contact-btn-close .bottom { transform: rotate(-45deg); position: relative; top: -1px; } .contact-title { margin-top: 20px; margin-bottom: 20px; font-size: calc((1vw + 1vh) * 0.9); } .contact-input { width: 100%; height: 32px; border: 1px solid #000000; border-radius: 10px; margin-bottom: 10px; background-color: #fff; color: black; font-size: calc((1vw + 1vh) * 0.7); text-align: start; padding-left: 10px; } .contact-textarea { width: 100%; height: 100px; border: 1px solid #000000; border-radius: 10px; margin-bottom: 10px; background-color: #fff; color: black; font-size: calc((1vw + 1vh) * 0.7); text-align: start; padding: 11.5px 10px 3px 12px; word-wrap: break-word; } .contact-btn { width: 200px; height: 35px; border-radius: 10px; margin: 0 auto; } @media only screen and (min-width: 400px){ .logo-container { margin-bottom: 20px; } .logo-container { height: calc((1vw + 1vh) * 25); } .logo { width: calc((1vw + 1vh) * 21); height: calc((1vw + 1vh) * 21); left: calc((1vw + 1vh) * 2); } .join { width: 180px; height: 92px; } .hero { margin-bottom: 16%; } .trailer-text-cover { max-width: 300px; } } @media only screen and (min-width: 575.9px){ .hero { margin-bottom: 13%; } } @media only screen and (min-width: 576px){ .mob-btn-box { display: none; } .logo-container { height: calc((1vw + 1vh) * 23); margin-bottom: 25px; } .logo { width: calc((1vw + 1vh) * 23); height: calc((1vw + 1vh) * 23); top: 0; left: calc((1vw + 1vh) * 4); } .nav { padding: 4% 0; } .features-box { flex-wrap: nowrap; justify-content: space-between; gap: 50px; } .features-img { max-width: 50%; } } @media only screen and (min-width: 768px){ body { line-height: 2em; } .logo-container { height: calc((1vw + 1vh) * 30); margin-bottom: 50px; } .logo { width: calc((1vw + 1vh) * 30); height: calc((1vw + 1vh) * 30); } .swiper.mob { display: none; } .join { width: 220px; height: 120px; } .join-btn { width: 30px; height: 30px; } .notification { width: 400px; height: 420px; padding: 45px; } .notification-img { width: 230px; height: 240px; } .notification-img-zzz { width: 150px; height: 100px; right: 130px; bottom: 80px; } .notification-link { width: 75px; height: 75px; bottom: 40px; left: 55px; } .trailer-text-cover { max-width: 461px; } .screenshots-list { display: flex; } .screenshots-item { width: calc(50% - 20px); } .footer-list { gap: 100px; } .footer-line::before { height: 80px; } .footer-title { margin-bottom: 20px; } .footer-contacts-list { flex-direction: row; justify-content: center; height: auto; } .contact-form { width: 400px; height: 420px; padding: 30px; } .contact-btn { width: 300px; height: 45px; } } @media only screen and (min-width: 1200px){ .logo-container { height: calc((1vw + 1vh) * 35); margin-bottom: 30px; } .logo { width: calc((1vw + 1vh) * 35); height: calc((1vw + 1vh) * 35); } .join { width: 320px; height: 180px; } .join-btn { width: 40px; height: 40px; } .notification { width: 600px; height: 620px; padding: 65px; } .notification-title { margin-bottom: 45px; } .notification-img { width: 370px; height: 380px; } .notification-img-zzz { width: 200px; height: 130px; right: 230px; bottom: 140px; } .notification-link { width: 100px; height: 100px; bottom: 55px; left: 70px; } .hero { margin-bottom: 9%; } .trailer-text-cover { max-width: 861px; } .features-box:not(:last-child) { margin-bottom: 40px; } footer { gap: 20px; padding: 25px; } .contact-form { width: 600px; height: 620px; padding: 50px; } .contact-btn-close { top: 20px; right: 25px; } .contact-input { font-size: calc((1vw + 1vh) * 0.5); width: 90%; height: 52px; } .contact-textarea { font-size: calc((1vw + 1vh) * 0.5); width: 90%; height: calc((1vw + 1vh) * 9); } .contact-btn { width: 350px; height: 55px; } } @media only screen and (max-width: 768px){ .contact-btn-close { width: 35px; height: 35px; } } @media only screen and (max-width: 575.9px){ .nav-link { display: none; } .hero-list { max-width: 220px; gap: 5px; } }/** * Swiper 11.1.3 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2024 Vladimir Kharlampidi * * Released under the MIT License * * Released on: May 13, 2024 */ /* FONT_START */ @font-face { font-family: 'swiper-icons'; src: url('data:application/font-woff;charset=utf-8;base64, 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'); font-weight: 400; font-style: normal; } /* FONT_END */ :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } /* Slide styles start */ /* 3D Shadows */ .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */ :root { --swiper-navigation-size: 44px; /* --swiper-navigation-top-offset: 50%; --swiper-navigation-sides-offset: 10px; --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: var(--swiper-navigation-top-offset, 50%); width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next { display: none !important; } .swiper-button-prev svg, .swiper-button-next svg { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; transform-origin: center; } .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg { transform: rotate(180deg); } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-lock { display: none; } /* Navigation font start */ .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: 'next'; } /* Navigation font end */ :root { /* --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-left: auto; --swiper-pagination-right: 8px; --swiper-pagination-bottom: 8px; --swiper-pagination-top: auto; --swiper-pagination-fraction-color: inherit; --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25); --swiper-pagination-progressbar-size: 4px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-border-radius: 50%; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Fraction */ .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } /* Progress */ .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; }