/home/bdqbpbxa/demo-subdomains/magnetiq.goodface.com.ua/css/styles.css
/* Homepage | .hero */
main>section:first-child {
margin-top: 6.040vw
/*88px*/
;
}
.hero {
padding: 4.873vw
/*71px*/
0 3.432vw
/*50px*/
0;
text-align: center;
}
.hero .container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.hero .text {
color: var(--black-70, rgba(0, 0, 0, 0.70));
margin-top: 2.128vw
/*31px*/
;
max-width: 43.377vw
/*632px*/
;
}
.hero .button-container {
margin-top: 2.883vw
/*42px*/
;
gap: 1.098vw
/*16px*/
;
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
}
.hero .title .multiple-img {
margin-top: -0.618vw
/*-9px*/
;
}
.multiple-img {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.multiple-img .img {
display: block;
height: 5.491vw
/* 80px*/
;
margin: 0 !important;
}
.multiple-img .img img {
display: block;
height: 100%;
}
.img.auto-slider {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
background: var(--light-Green);
}
.auto-slider img {
display: block;
height: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
}
.auto-slider img.-active {
opacity: 1;
pointer-events: auto;
}
.auto-slider img:not(:first-child) {
position: absolute;
}
/* Homepage | partners-section */
.partners-section {
padding: 5.491vw
/*80px*/
0 8.236vw
/*120px*/
0;
}
.partners-section .img {
height: 3.844vw
/*56px*/
;
margin-right: 6.589vw
/*96px*/
;
}
.partners-section .img img {
display: block;
height: 100%;
display: block;
width: auto;
}
/* Homepage | pinned-section */
.pinned-section .container {
padding-top: 5.491vw
/*80px*/
;
}
.pinned-section .container .title {
margin-top: 1.647vw
/*24px*/
;
}
.section-title .img {
display: inline-flex;
height: 4.942vw
/*72px*/
;
vertical-align: middle;
margin-top: -0.686vw
/*-10px*/
;
width: auto !important;
}
.section-title .img img {
display: block;
height: 100%;
}
.section-title .img.-middle {
height: 4.118vw
/*60px*/
;
margin-top: -0.206vw
/*-3px*/
;
}
.section-title .img.-small {
height: 3.844vw
/*56px*/
;
margin: -0.343vw
/*-5px*/
0 0 0.412vw
/*6px*/
;
}
.pinned-section .pinned-slider__wrapper {
padding: 1.098vw
/*16px*/
2.745vw
/*40px*/
;
pointer-events: auto;
}
.pinned-slider {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* body.-has-banner .pinned-slider {
padding-top: 120px;
}
body:not(.-has-banner) .pinned-slider {
padding-top: 80px;
} */
.pinned-slider__card {
width: 100%;
transform-origin: top;
pointer-events: none;
/* margin: 4.393vw
0;
*/
/* transition: opacity 0.4s; */
opacity: 0;
pointer-events: none;
}
.pinned-slider__card .pinned-slider__card-wrapper {
pointer-events: none;
}
.pin-spacer .pinned-slider__card {
opacity: 1;
pointer-events: auto;
transition: opacity 0.4s;
}
.pin-spacer .pinned-slider__card .pinned-slider__card-wrapper {
pointer-events: auto;
}
.pinned-slider__card .service-card .overlay {
position: absolute;
left: 0;
top: 0;
z-index: 3;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
background: var(--White, #FFF);
}
.pinned-slider__card .service-card {
position: relative;
z-index: 1;
}
.pinned-slider__card.-hidden {
opacity: 0;
}
.pinned-slider__card-wrapper {
pointer-events: auto;
transform: translateY(100vh);
max-height: 70vh;
}
.pinned-slider__card:not(:first-child) {
position: absolute;
left: 0;
}
/* .pinned-slider__card-wrapper {
height: clamp(70vh, 41.181vw, 41.181vw);
} */
/* Homepage | industries-section */
.industries-section {
padding: 13.727vw
/*200px*/
0 8.236vw
/*120px*/
0;
overflow: hidden;
}
.industries-section .section-title {
margin-top: 1.030vw
/*15px*/
;
}
.industries-section .section-title+.text {
margin-top: 2.128vw
/*31px */
;
}
.industries-section .carousel-slider {
margin-top: 2.883vw
/*42px*/
;
width: 100%;
padding: 0 1.098vw
/*16px*/
;
}
.carousel-slider .swiper-wrapper {
padding: 2.745vw
/*40px*/
0;
}
.carousel-slider .swiper-pagination {
margin: 2.745vw
/*40px*/
auto 0 auto;
}
.swiper-pagination {
position: relative;
border-radius: 2.745vw
/*40px*/
;
border: 1px solid var(--Light-grey-2, #D1DDE8);
padding: 0.480vw
/*7px*/
;
gap: 0.412vw
/*6px*/
;
bottom: auto !important;
left: auto !important;
top: auto !important;
display: flex;
width: fit-content !important;
justify-content: center;
align-items: center;
}
.swiper-pagination .swiper-pagination-bullet {
width: 0.412vw
/*6px*/
;
height: 0.412vw
/*6px*/
;
border-radius: 50%;
background: var(--Light-grey-2) !important;
opacity: 1 !important;
transition: background 0.4s;
padding: 0 !important;
margin: 0 !important;
cursor: pointer;
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--Black) !important;
}
.carousel-slider .swiper-slide {
width: 21.963vw
/*320px*/
;
}
.carousel-slider .swiper-slide .industry-card {
transition: opacity 0.4s;
}
.carousel-slider .swiper-slide:not(.swiper-slide-visible) .industry-card {
opacity: 0;
pointer-events: none;
}
/* Homepage | expirience-section */
.expirience-section {
padding: 5.491vw
/*80px*/
0 13.727vw
/*200px*/
0;
}
.expirience-section .section-title {
margin-top: 1.304vw
/*19px*/
;
}
.expirience-section .statistic-list {
margin: 5.491vw
/*80px*/
0;
}
.statistic-list {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.098vw
/*16px*/
;
}
.statistic-list .col {
display: flex;
flex-direction: column;
grid-column: span 6;
gap: 1.098vw
/*16px*/
;
}
.statistic-list .col.-animated .statistic-card {
transition: margin 0.7s ease-out;
margin: 0 !important;
}
.expirience-section .button {
margin-top: 2.196vw
/*32px*/
;
width: fit-content;
}
/* Homepage | sticky-part-section */
.sticky-part-section {
padding: 13.727vw
/*200px*/
0;
}
.sticky-part-section__wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 3.432vw
/*50px*/
;
}
.sticky-part-section__fixed {
position: sticky;
top: 10.295vw
/*150px*/
;
width: fit-content;
}
.sticky-part-section__fixed .section-title {
margin-top: 1.167vw
/*17px*/
;
}
.sticky-part-section__fixed .text {
margin-top: 1.990vw
/*29px*/
;
max-width: 32.944vw
/*480px*/
;
}
.sticky-part-section__fixed .button {
margin-top: 3.432vw
/*50px*/
;
width: fit-content;
}
.sticky-part-section__relative {
width: 35.964vw
/*524px*/
;
min-width: 35.964vw
/*524px*/
;
}
.sticky-part-section__relative .benefit-card+.benefit-card {
margin-top: 4.393vw
/*64px*/
;
}
.benefit-card .img {
width: 5.491vw
/*80px*/
;
aspect-ratio: 1/1;
border-radius: 50%;
overflow: hidden;
}
.benefit-card .img img {
display: block;
width: 100%;
border-radius: 50%;
}
.benefit-card .title {
margin-top: 2.196vw
/*32px*/
;
}
.benefit-card .text {
margin-top: 1.098vw
/*16px*/
;
max-width: 30.199vw
/*440px*/
;
color: var(--Black-70);
}
.sticky-part-section .button.-mob {
display: none;
}
/* Homepage | background-video-section */
.background-video-wrapper {
position: relative;
z-index: 1;
border-radius: 1.098vw
/*16px*/
;
background: var(--Black, #000);
overflow: hidden;
}
.background-video-wrapper .bg {
pointer-events: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.background-video-wrapper .bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.80) 100%);
}
.background-video-wrapper .bg img,
.background-video-wrapper .bg video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.background-video-wrapper.-static .bg video {
opacity: 0;
}
.background-video-wrapper .bg video:not(.-full-loaded) {
opacity: 0;
}
.background-video-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10.981vw
/*160px*/
64px 12.491vw
/*182px*/
64px;
}
.background-video-wrapper .title {
margin-top: 1.030vw
/*15px*/
;
text-align: center;
color: var(--White);
}
/* Homepage | customer-reviews-wrapper */
.customer-reviews-wrapper {
padding: 6.589vw
/*96px*/
4.393vw
/*64px*/
;
border-radius: 1.098vw
/*16px*/
;
background: var(--Light-grey);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
}
.customer-reviews-wrapper .section-title {
margin-top: 1.647vw
/*24px*/
;
}
.reviews-slider {
margin-top: 5.491vw
/*80px */
;
width: 100%;
}
.review-card {
padding: 2.745vw
/*40px*/
;
border-radius: 0.549vw
/*8px*/
;
background: var(--White, #FFF);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.reviews-slider .swiper-slide {
height: auto;
width: 49.417vw
/*720px*/
;
}
.review-card .title {
position: relative;
padding-top: 3.569vw
/*52px*/
;
margin-bottom: 2.745vw
/*40px*/
;
text-align: left;
color: var(--black-70, rgba(0, 0, 0, 0.70));
}
.review-card .title:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1.922vw
/*28px*/
;
height: 1.373vw
/*20px*/
;
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyOCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNjQyNDYgMjBWMTUuODQ1MUg0LjMwMTY4QzYuNDM5NDggMTUuODQ1MSA3LjUwODM4IDE0Ljg4MjYgNy41MDgzOCAxMi45NTc3VjEwLjcwNDJINi4zMzUyQzQuNTEwMjQgMTAuNzA0MiAyLjk5ODE0IDEwLjIxMTMgMS43OTg4OCA5LjIyNTM1QzAuNTk5NjI3IDguMjM5NDQgMCA2Ljk5NTMxIDAgNS40OTI5NkMwIDMuODQ5NzcgMC41OTk2MjcgMi41MzUyMSAxLjc5ODg4IDEuNTQ5MjlDMi45OTgxNCAwLjUxNjQzMSA0LjUxMDI0IDAgNi4zMzUyIDBDOC4xNjAxNSAwIDkuNjQ2MTggMC41Mzk5MDYgMTAuNzkzMyAxLjYxOTcyQzExLjk5MjYgMi42NTI1OCAxMi41OTIyIDQuMDE0MDggMTIuNTkyMiA1LjcwNDIzVjEzLjAyODJDMTIuNTkyMiAxNy42NzYxIDEwLjAxMTIgMjAgNC44NDkxNiAyMEgxLjY0MjQ2Wk0xNy4wNTAzIDIwVjE1Ljg0NTFIMTkuNzA5NUMyMS44NDczIDE1Ljg0NTEgMjIuOTE2MiAxNC44ODI2IDIyLjkxNjIgMTIuOTU3N1YxMC43MDQySDIxLjc0M0MxOS45MTgxIDEwLjcwNDIgMTguNDA2IDEwLjIxMTMgMTcuMjA2NyA5LjIyNTM1QzE2LjAwNzQgOC4yMzk0NCAxNS40MDc4IDYuOTk1MzEgMTUuNDA3OCA1LjQ5Mjk2QzE1LjQwNzggMy44NDk3NyAxNi4wMDc0IDIuNTM1MjEgMTcuMjA2NyAxLjU0OTI5QzE4LjQwNiAwLjUxNjQzMSAxOS45MTgxIDAgMjEuNzQzIDBDMjMuNTY4IDAgMjUuMDU0IDAuNTM5OTA2IDI2LjIwMTEgMS42MTk3MkMyNy40MDA0IDIuNjUyNTggMjggNC4wMTQwOCAyOCA1LjcwNDIzVjEzLjAyODJDMjggMTcuNjc2MSAyNS40MTkgMjAgMjAuMjU3IDIwSDE3LjA1MDNaIiBmaWxsPSIjODM5NkE4Ii8+Cjwvc3ZnPgo=);
}
.reviews-slider .swiper-slide .review-card {
height: 100%;
transition: opacity 0.7s;
}
.reviews-slider .swiper-slide:not(.swiper-slide-active) .review-card {
opacity: 0.4;
}
.review-card .logo {
margin: auto 0 0 0;
height: 3.844vw
/*56px*/
;
}
.review-card .logo img {
height: 100%;
display: block;
}
.reviews-slider .swiper-pagination {
margin: 2.745vw
/*40px*/
auto 0 auto;
}
.reviews-slider {
position: relative;
}
.reviews-slider .swiper-wrapper {
position: relative;
}
.reviews-slider .swiper-navigation {
position: absolute;
z-index: 3;
pointer-events: none;
width: 100%;
height: 100%;
}
.reviews-slider .swiper-navigation .navigation-button {
position: absolute;
top: 0;
pointer-events: auto;
cursor: pointer;
height: 100%;
width: calc(((100% - 49.417vw) / 2) + 4.393vw);
}
.reviews-slider .swiper-navigation .navigation-button.next {
right: 0;
cursor: url(../images/icons/slider-arrow-right.svg) 40 40, pointer;
transform: translateX(4.393vw);
}
.reviews-slider .swiper-navigation .navigation-button.prev {
left: 0;
cursor: url(../images/icons/slider-arrow-left.svg) 40 40, pointer;
transform: translateX(-4.393vw);
}
/* Homepage | news-section */
.news-section {
padding: 13.727vw
/*200px*/
0 5.491vw
/*80px */
0;
}
.news-section__wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.098vw;
}
.news-section__wrapper-left {
position: sticky;
top: 10.295vw
/*150px*/
;
width: 28.552vw
/*416px*/
;
min-width: 28.552vw
/*416px*/
;
}
.news-section__wrapper-left .title {
margin-top: 1.304vw
/*19px*/
;
}
.news-section__wrapper-left .button {
margin-top: 3.020vw
/*44px*/
;
width: fit-content;
}
.news-section__wrapper-right {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2.745vw
/*40px*/
1.098vw
/*16px*/
;
}
.news-section__wrapper-right .article-preview {
grid-column: span 3;
}
.mobile-slider {
display: none;
}
/* Homepage | upcoming-events */
.upcoming-events {
margin: 4.118vw
/*60px*/
0 13.727vw
/*200px*/
0;
}
.upcoming-events .section-title {
margin-top: 1.647vw
/*24px*/
;
}
.upcoming-events .event-list {
margin-top: 4.393vw
/*64px*/
;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.098vw
/*16px*/
;
width: 100%;
}
.upcoming-events .event-list .event-card {
grid-column: span 1;
}
.upcoming-events .button {
margin-top: 4.393vw
/*64px*/
;
}
/* Homepage | team-section */
.team-section {
padding: 13.727vw
/*200px*/
0 13.727vw
/*200px*/
0;
overflow: hidden;
}
.team-section .section-title {
margin-top: 1.647vw
/*24px*/
;
}
.team-grid {
margin-top: 4.393vw
/*64px*/
;
}
.team-grid {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.team-grid__col {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 37.062vw
/*540px*/
;
}
.team-grid .static-img {
display: none;
}
.team-member {
grid-column: span 1;
aspect-ratio: 1/1;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.team-member img {
display: block;
width: 100%;
}
.team-member.-icon img {
display: block;
width: 2.745vw
/*40px*/
;
aspect-ratio: 1/1;
}
.team-member.-mob {
display: none;
}
.team-grid__col.-second-rounded .team-member:nth-child(2n+1) {
border-radius: 50%;
}
.team-grid__col.-first-rounded .team-member:nth-child(2n+2) {
border-radius: 50%;
}
.team-grid__col .team-member.-rounded {
border-radius: 50% !important;
}
.team-grid__col.-mob {
display: none !important;
}
.team-grid .video {
position: absolute;
z-index: -2;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.team-grid .video video,
.team-grid .video iframe {
display: block;
width: 100%;
/* height: 100%; */
object-fit: cover;
}
.team-grid .video>* {
/* padding: 0 !important; */
width: 100%;
height: 100%;
}
.team-grid.-before-start-video .video {
opacity: 0;
}
/* .video-static-afterview {
position: absolute;
z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
}
.video-static-afterview picture,
.video-static-afterview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.team-grid.-static .video-static-afterview {
opacity: 1;
} */
.team-grid.-static .video {
opacity: 0;
}
.team-section .text-container {
max-width: 43.377vw
/*632px*/
;
margin: 4.393vw
/*64px*/
auto 0 auto;
}
.team-section .text-container p+p {
margin-top: 1.647vw
/*24px*/
;
}
.team-section .text-container .text {
color: var(--black-70, rgba(0, 0, 0, 0.70));
padding-right: 7.687vw
/*112px*/
;
}
.pinned-video {
width: 100%;
margin-top: 3.294vw
/*48px*/
;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.pinned-video__inner {
/* translateY(-27.3%) */
/* transform-origin: top; */
/* transform: scale(0.45); */
display: flex;
justify-content: center;
align-items: center;
border-radius: 1.098vw
/*16px*/
;
clip-path: inset(0 0 0 0 round 1.098vw);
/* width: 45%;
margin: 0 auto; */
transform: scale(0.45);
transform-origin: top;
overflow: hidden;
position: relative;
z-index: 1;
width: 100%;
max-height: 95vh;
}
.pinned-video .showreel {
width: 100%;
aspect-ratio: 1408/768;
display: flex;
justify-content: center;
align-items: center;
}
.pinned-video .showreel>* {
/* width: 100%;
padding: 0 !important;
height: 100%; */
}
.pinned-video .showreel iframe {
position: absolute;
width: 100%;
height: 105%;
}
.pinned-video video {
display: block;
width: 100%;
/* max-height: calc(100vh - calc(2.745vw * 3)); */
border-radius: inherit;
object-fit: cover;
aspect-ratio: 11/6;
}
.pinned-video .preview {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
transition: opacity 0.4s;
}
.pinned-video .preview video {
width: 100%;
height: 100%;
object-fit: cover;
}
.pinned-video .preview:after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
opacity: 0.3;
background: var(--Black, #000);
width: 100%;
height: 100%;
}
.play-button {
position: absolute;
z-index: 2;
border-radius: 5.491vw
/*80px*/
;
background: var(--white-70, rgba(255, 255, 255, 0.70));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 0.549vw
/*8px*/
1.647vw
/*24px*/
0.549vw
/*8px*/
0.549vw
/*8px*/
;
display: flex;
justify-content: center;
align-items: center;
gap: 1.098vw
/*16px*/
;
cursor: pointer;
transition: background 0.4s, opacity 0.4s;
opacity: 0;
pointer-events: none;
}
.pinned-video__inner.-show-button .play-button {
opacity: 1;
pointer-events: auto;
}
.play-button .arrow {
width: 3.844vw
/*56px*/
;
display: block;
aspect-ratio: 1/1;
border-radius: 50%;
}
.play-button .arrow svg {
display: block;
width: 100%;
}
.play-button .arrow rect,
.play-button .arrow path {
transition: fill 0.4s;
}
.pinned-video__inner.-show-toolbar .video-toolbar {
opacity: 1;
pointer-events: auto;
}
.pinned-video__inner.-show-toolbar .preview {
opacity: 0;
pointer-events: none;
}
.pinned-video__inner:before {
content: '';
position: absolute;
z-index: 2;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background: var(--Black);
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.pinned-video__inner.-video-ended iframe {
/* transition: 0.4s;
opacity: 0; */
pointer-events: none;
}
.pinned-video__inner.-video-ended:before {
opacity: 1;
}
.video-toolbar {
position: absolute;
z-index: 2;
bottom: 2.745vw
/*40px*/
;
border-radius: 5.491vw
/*80px*/
;
background: var(--white-50, rgba(255, 255, 255, 0.50));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 0.275vw
/*4px*/
;
gap: 0.275vw
/*4px*/
;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.4s;
opacity: 0;
pointer-events: none;
}
.video-toolbar>* {
width: 4.942vw
/*72px*/
;
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: 50%;
transition: opacity 0.4s, background 0.4s;
cursor: pointer;
}
.video-toolbar .fullScreen:before,
.video-toolbar .mute:after,
.video-toolbar .mute:before,
.video-toolbar .play:after,
.video-toolbar .play:before {
background: no-repeat 50% / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI0LjE5MiAxNy4zOTQtMTIuNzI2IDcuMzg0QzEwLjM4NiAyNS40MDQgOSAyNC42NDYgOSAyMy4zODRWOC42MTZjMC0xLjI2IDEuMzg0LTIuMDIgMi40NjYtMS4zOTJsMTIuNzI2IDcuMzg0YTEuNjA0IDEuNjA0IDAgMCAxIDAgMi43ODZaIiBmaWxsPSIjMDAwIi8+PC9zdmc+);
content: "";
display: block;
height: 2.196vw
/*32px*/
;
width: 2.196vw
/*32px*/
;
position: absolute;
transition: opacity .4s, transform .4s;
opacity: 0.4;
}
.video-toolbar .play:after {
background: no-repeat 50% / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI0IDguNXYxNWMwIC4zOTgtLjE1My43OC0uNDI2IDEuMDYtLjI3My4yODItLjY0My40NC0xLjAyOS40NEgxOC45MWMtLjM4NiAwLS43NTYtLjE1OC0xLjAyOC0uNDRhMS41MjQgMS41MjQgMCAwIDEtLjQyNy0xLjA2di0xNWMwLS4zOTguMTU0LS43OC40MjctMS4wNi4yNzItLjI4Mi42NDItLjQ0IDEuMDI4LS40NGgzLjYzN2MuMzg1IDAgLjc1NS4xNTggMS4wMjguNDQuMjczLjI4LjQyNi42NjIuNDI2IDEuMDZaTTEzLjA5IDdIOS40NTZjLS4zODYgMC0uNzU2LjE1OC0xLjAyOS40NEExLjUyNCAxLjUyNCAwIDAgMCA4IDguNXYxNWMwIC4zOTguMTUzLjc4LjQyNiAxLjA2LjI3My4yODIuNjQzLjQ0IDEuMDI5LjQ0aDMuNjM2Yy4zODYgMCAuNzU2LS4xNTggMS4wMjgtLjQ0LjI3My0uMjguNDI3LS42NjIuNDI3LTEuMDZ2LTE1YzAtLjM5OC0uMTU0LS43OC0uNDI3LTEuMDZBMS40MzMgMS40MzMgMCAwIDAgMTMuMDkxIDdaIiBmaWxsPSIjMDAwIi8+PC9zdmc+);
opacity: 0;
transform: scale(0);
}
.video-toolbar .mute:before {
background: no-repeat 50% / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiBmaWxsPSIjMDAwIj48cGF0aCBkPSJNMjMuMzA2IDE4LjM1M2EzLjQ3MyAzLjQ3MyAwIDAgMCAuOTM4LTIuMzYxYzAtLjg3LS4zMzQtMS43MDktLjkzOC0yLjM2YS43NzUuNzc1IDAgMCAwLTEuMDUyLS4wNTUuNjkyLjY5MiAwIDAgMC0uMDc0IDFjLjM2Mi4zOS41NjIuODk0LjU2MiAxLjQxNXMtLjIgMS4wMjUtLjU2MiAxLjQxNmEuNjkyLjY5MiAwIDAgMCAuMDc0IDEgLjc3NS43NzUgMCAwIDAgMS4wNTItLjA1NVpNMjggMTUuOTkyYy4wMDEtMS43NTctLjY4LTMuNDUzLTEuOTEyLTQuNzYzYS43NzQuNzc0IDAgMCAwLTEuMDUyLS4wNDcuNjkzLjY5MyAwIDAgMC0uMDY2IDEgNS41NTggNS41NTggMCAwIDEgMS41MjkgMy44MSA1LjU1OCA1LjU1OCAwIDAgMS0xLjUzIDMuODA5LjcwOC43MDggMCAwIDAtLjE5OS41MTkuNjg3LjY4NyAwIDAgMCAuMjUuNDk4Ljc2MS43NjEgMCAwIDAgLjU0OC4xOC43ODMuNzgzIDAgMCAwIC41Mi0uMjQ0QzI3LjMyIDE5LjQ0NCAyOCAxNy43NDkgMjggMTUuOTkyWk0xOC41MzMgMjYuOTE0YS44MjIuODIyIDAgMCAxLS44NzgtLjA5M2wtNy4yNzUtNS43NDRINS42NjdjLS40NDIgMC0uODY2LS4xNzktMS4xNzktLjQ5NkExLjcwNiAxLjcwNiAwIDAgMSA0IDE5LjM4NHYtNi43NjljMC0uNDQ5LjE3Ni0uODc5LjQ4OC0xLjE5NmExLjY1NCAxLjY1NCAwIDAgMSAxLjE3OS0uNDk2aDQuNzEzbDcuMjc1LTUuNzQ0YS44Mi44MiAwIDAgMSAxLjEuMDY5Ljg1My44NTMgMCAwIDEgLjI0NS41OTh2MjAuMzA4YS44NTYuODU2IDAgMCAxLS40NjcuNzZaIi8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZmlsbD0iI2ZmZiIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAzMikiIGQ9Ik0wIDBoMzJ2MzJIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=);
}
.video-toolbar .mute:after {
background: no-repeat 50% / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiBmaWxsPSIjMDAwIj48cGF0aCBkPSJNMTguNTMzIDUuMDg2YS44MjIuODIyIDAgMCAwLS44NzguMDkzbC03LjI3NSA1Ljc0NEg1LjY2N2MtLjQ0MiAwLS44NjYuMTc4LTEuMTc5LjQ5NkExLjcwNiAxLjcwNiAwIDAgMCA0IDEyLjYxNnY2Ljc2OWMwIC40NDguMTc2Ljg3OS40ODggMS4xOTYuMzEzLjMxOC43MzcuNDk2IDEuMTc5LjQ5Nmg0LjcxM2w3LjI3NSA1Ljc0NGEuODIuODIgMCAwIDAgMS4xLS4wNjkuODUzLjg1MyAwIDAgMCAuMjQ1LS41OThWNS44NDZhLjg1Ni44NTYgMCAwIDAtLjQ2Ny0uNzZaTTI2LjczNyAxNmwyLjAwNy0yLjAwNmEuODc1Ljg3NSAwIDEgMC0xLjIzOC0xLjIzOEwyNS41IDE0Ljc2M2wtMi4wMDYtMi4wMDdhLjg3NS44NzUgMCAxIDAtMS4yMzggMS4yMzhMMjQuMjYzIDE2bC0yLjAwNyAyLjAwNmEuODc1Ljg3NSAwIDEgMCAxLjIzOCAxLjIzOGwyLjAwNi0yLjAwNyAyLjAwNiAyLjAwN2EuODc1Ljg3NSAwIDEgMCAxLjIzOC0xLjIzOEwyNi43MzcgMTZaIi8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgzMnYzMkgweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==);
opacity: 0;
}
.video-toolbar .fullScreen:before {
background: no-repeat 50% / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEzLjcxNSAxMy43MTMgNS43MTUgNS43MTVNMTQuODU4IDE5LjQyOGg0LjU3MnYtNC41NzJNMTAuMjg1IDEwLjI4NiA0LjU3MSA0LjU3TTkuMTQgNC41NzFINC41N3Y0LjU3MiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+);
}
.video-toolbar .fullScreen {
display: none;
}
.video-toolbar .play.-running:after {
opacity: 0.4;
transform: scale(1);
}
.video-toolbar .play.-running:before {
opacity: 0;
transform: scale(0);
}
.video-toolbar .mute.-muted:before {
opacity: 0;
}
.video-toolbar .mute.-muted:after {
opacity: 0.4;
}
.video-toolbar .play .progressbar {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
pointer-events: none;
}
.video-toolbar .play .progressbar svg {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.progressbarLine {
transition: 0.5s;
}
.controls {
display: none !important;
}
/* Homepage | code-section */
.code-section__wrapper {
border-radius: 1.098vw
/*16px*/
;
background: var(--Light-grey, #E8EDF1);
padding: 10.981vw
/*160px*/
4.393vw
/*64px*/
;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8.511vw
/*124px*/
;
}
.code-section__wrapper-left {
width: 43.377vw
/*632px*/
;
min-width: 43.377vw
/*632px*/
;
}
.code-section__wrapper-left .button.-mob {
display: none;
}
.code-example {
width: 100%;
aspect-ratio: 632/480;
border-radius: 0.549vw
/*8px*/
;
background: var(--Dark-grey-2, #586977);
overflow: hidden;
}
.code-section__wrapper-right {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.code-section__wrapper-right .title {
margin-top: 1.647vw
/*24px*/
;
}
.code-section__wrapper-right .text {
margin-top: 1.647vw
/*24px*/
;
color: var(--Black-70);
}
.code-section__wrapper-right .button {
margin-top: 3.294vw
/*48px*/
;
}
.token.punctuation {
color: var(--White);
}
.token.entity,
.token.operator,
.token.url {
color: var(--White);
}
.token.class-name,
.token.constant,
.token.property,
.token.symbol {
color: var(--white-70, rgba(255, 255, 255, 0.70));
}
.token.attr-value,
.token.char,
.token.regex,
.token.string,
.token.variable {
color: var(--Light-green, #45ED94);
}
:not(pre)>code[class*=language-],
pre[class*=language-] {
background: var(--Dark-grey-2, #586977);
}
.code-example__tabs {
height: 100%;
max-height: calc(100% - 5.216vw
/*76px*/
);
overflow: hidden;
}
.code-example__item {
max-height: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.code-example__item-inner {
position: relative;
overflow: hidden;
max-height: 100%;
height: 100%;
grid-column: span 12;
}
.code-for-copy {
padding: 1.647vw
/*24px*/
;
width: fit-content;
min-width: 100%;
}
.code-example__item .copy-button {
position: absolute;
z-index: 2;
right: 1.647vw
/*24px*/
;
top: 1.647vw
/*24px*/
;
}
.code-example__menu {
padding: 1.647vw
/*24px*/
;
height: 5.216vw
/*76px*/
;
min-height: 5.216vw
/*76px*/
;
background: var(--white-20, rgba(255, 255, 255, 0.20));
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: center;
}
.code-example__menu-inner {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
width: fit-content;
max-height: 100%;
gap: 0.275vw
/*4px*/
;
}
pre[class*=language-] {
padding: 0;
margin: 0;
}
pre[class*=language-] * {
white-space: break-spaces !important;
}
.code-example__menu-item {
border-radius: 2.745vw
/*40px*/
;
color: var(--White);
height: 1.922vw
/*28px*/
;
min-width: 5.491vw
/*80px*/
;
padding: 0 0.686vw
/*10px*/
0.069vw
/*1px*/
0.686vw
/*10px*/
;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.7;
transition: opacity 0.4s, background 0.4s;
cursor: pointer;
}
body.-apple .code-example__menu-item .arrow {
margin-top: -2px;
}
body.-apple .code-example__menu-item {
padding-top: 4px;
padding-bottom: 1px;
}
.code-example__menu-item.-active {
background: var(--Black, #000);
opacity: 1;
pointer-events: none;
}
.code-example .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical {
top: 1.098vw
/*16px*/
;
bottom: 0;
padding: 0;
width: 0.206vw
/*3px*/
;
color: var(--white-70, rgba(255, 255, 255, 0.70));
}
.code-example .os-theme-dark>.os-scrollbar-vertical .os-scrollbar-handle:before,
.code-example .os-theme-light>.os-scrollbar-vertical .os-scrollbar-handle:before {
left: 0;
right: 0;
}
.code-example .os-theme-dark>.os-scrollbar-vertical,
.code-example .os-theme-light>.os-scrollbar-vertical {
width: 3px;
top: 16px;
bottom: 16px;
}
.code-example .os-theme-dark>.os-scrollbar-horizontal,
.code-example .os-theme-light>.os-scrollbar-horizontal {
height: 3px;
left: 0;
}
.code-example .os-theme-dark>.os-scrollbar,
.code-example .os-theme-light>.os-scrollbar {
padding: 0;
}