@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.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; } /* 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; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::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; } body { outline: none; margin: 0; padding: 0; background: white; } html { scroll-behavior: smooth; font-family: 'Montserrat', sans-serif; height: 100vh; } a { cursor: pointer; } * { box-sizing: border-box; font-optical-sizing: auto; color: #000; font-family: 'Montserrat', sans-serif; } main { position: relative; max-width: 100%; overflow: hidden; background: white; } .text-main { text-align: center; font-family: Lato, sans-serif; font-size: var(--font-size-450, 18px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-700, 28px); letter-spacing: var(--font-letter-spacing-default, 0px); } .text-main b { color: var(--InZOI-Grey, #615F7A); font-family: Lato, sans-serif; font-style: normal; font-weight: var(--font-weight-regular, 700); line-height: var(--font-line-height-700, 28px); letter-spacing: var(--font-letter-spacing-default, 0px); } .under-btn-text { display: block; margin-top: 12px; position: relative; color: #615F7A; text-align: center; leading-trim: both; text-edge: cap; font-family: Lato, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; transition: all .2s ease-in-out; } .under-btn-text.white { color: #fff; } .under-btn-text.white:hover { color: #DFDFDF; } .under-btn-text.light { color: #DFDFDF; } .under-btn-text.light2 { color: #CCC; } .under-btn-text:hover { color: #F18536; } .heading-first, .heading-second { color: #fff; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 48px; font-style: normal; font-weight: 700; line-height: 116%; } .heading-first.black, .heading-second.black { color: #000; } .download-btn { transition: .3s ease-in-out; } .download-btn.mob { display: none; } .download-btn.orange { display: flex; justify-content: center; align-items: center; color: #FFF; text-align: center; font-size: 16px; text-transform: uppercase; background-color: #EB622B; text-align: center; font-weight: 500; line-height: 24px; height: 48px; margin: 0 auto; padding: 11px 34px; white-space: nowrap; position: relative; letter-spacing: 1px; } .download-btn.orange:hover { background: #F18536; } .download-btn.orange svg { height: 24px; min-width: 24px; margin-right: 12px; } .download-btn.border { display: flex; justify-content: center; align-items: center; color: #FFF; text-align: center; font-size: 16px; text-transform: uppercase; background-color: transparent; font-weight: 500; line-height: 24px; height: 48px; margin: 0 auto; padding: 11px 28px; white-space: nowrap; position: relative; letter-spacing: 1.2px; font-family: 'Montserrat', sans-serif; font-style: normal; text-transform: uppercase; border: 1px solid var(--color-border-secondary, #9F9F9F); } .download-btn.border:hover { background: #F18536; border: 1px solid #F18536; color: #fff; } .download-btn.border svg { height: 24px; min-width: 24px; margin-right: 12px; } .large-section { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; background-size: 100%; } .glow-large { position: absolute; width: 840px; height: 840px; } .glow-large.left { left: -70%; } .glow-large.left.one { top: 1400px; left: -640px; } .glow-large.left.two { bottom: 782px; left: -640px; } .glow-large.right.one { top: 1400px; right: -640px; } .glow-large.right.two { right: 0; bottom: 782px; right: -640px; } @keyframes bounce { 0%, 20%, 48%, 80%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes rotate { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes fadeInBottomToTopSoft { 0% { transform: translatey(20px); opacity: 0; } 100% { transform: translatey(0); opacity: 1; } } .to-top { display: flex; flex-direction: column; align-items: center; margin: 13px auto 0; color: #DFDFDF; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 500; line-height: normal; background-color: #000; font-weight: 500; line-height: var(--font-line-height-3, 24px); letter-spacing: var(--font-letter-spacing-regular, 1.2px); text-transform: uppercase; } .to-top svg { width: 24px; height: 24px; margin: 0 0 10px; } .to-top-section { display: flex; justify-content: center; max-width: 500px; margin: 0 auto; } .to-top-section .content-wrapper { position: relative; padding-top: 0px; z-index: 3; } html, body { background-color: #000; } :root { --color-bg: #0d0d0d; --color-title: #fff; --color-small-title: #e5e5e5; --color-txt: #ccc; --color-title-black: #1e1e1e; --color-txt-black: #535353; --color-txt-gray: #b2b2b2; --color-txt-gray-2: #b5b5b5; --color-gray: #909090; --color-300: #333; --color-primary: #eb622b; --color-primary-hover: #f18536; } header { position: fixed; top: 0; left: 0; width: 100%; padding: 0; opacity: 1; z-index: 27; height: 72px; } header * { box-sizing: border-box; font-family: 'Montserrat', sans-serif; color: #fff; } header ol, header ul, header menu { list-style: none; } header .content-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; margin: 0 auto; padding: 15px 20px; } header .download-buttons { margin: 0; } .header-container { position: relative; z-index: 2; width: 100%; background: transparent; } .header-container::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(16, 16, 16, 0.95); background-blend-mode: luminosity; backdrop-filter: blur(17.5px); } .header-link { display: flex; align-items: center; margin: 0 20px; padding: 7px 0; color: #DFDFDF; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 500; line-height: 140%; border: 1px solid transparent; background: transparent; transition: .3s ease-in-out; white-space: nowrap; cursor: pointer; } .header-link.border { margin-right: 0; border: 1px solid #9F9F9F; padding: 9px 24px; } .header-link.border:hover { color: #fff; background: #EB622B; border: 1px solid #EB622B; } .header-link.orange { color: #FFF; text-align: center; font-size: 16px; text-transform: uppercase; background-color: #EB622B; text-align: center; font-weight: 500; line-height: 24px; max-width: 255px; margin: 0 auto; padding: 11px 30px; white-space: nowrap; position: relative; letter-spacing: 1px; } .header-link.orange:hover { background: #F18536; } .header-link.orange svg { height: 24px; margin-right: 12px; } .header-link-container { display: none; flex-grow: 1; } .header-link.mob { position: relative; display: none; } .header-link.mob::before { position: absolute; top: 50%; left: 0; width: 4px; height: 24px; transform: translateY(-50%); content: ''; background-color: #EB622B; opacity: 0; height: 0; transition: .2s ease-in-out; } .header-link.mob.active::before { opacity: 1; height: 24px; } .header-link.mob :hover { color: #D6D6D6; } .header-buttons { display: flex; flex-direction: row; } .header-logo { display: flex; align-items: center; z-index: 10; } .header-logo.desktop { display: flex; } .header-logo.mob { display: none; } .header-logo img { width: 363px; margin-right: 12px; } .header-logo span { display: inline-flex; position: relative; margin-left: 12px; margin-top: 6px; color: #DFDFDF; font-size: 16px; font-weight: 600; line-height: 24px; } .header-logo span::before { top: 50%; margin-top: -3px; transform: translateY(-50%); content: ""; width: 1px; height: 24px; background-color: var(--color-txt); position: absolute; left: -11px; } .site-header { width: 100%; position: fixed; top: 0; z-index: 100; transition: .3s; } .site-header.black { background: var(--color-surface-pure, #000); background-blend-mode: darken; } .site-header.black .header-container::before { background: var(--color-surface-pure, #000); background-blend-mode: darken; } .site-header .download-btn { padding: 16px 32px; } .site-header .header-inner { display: flex; max-width: 100%; margin: 0 auto; padding: 15px 14px 9px 16px; position: relative; z-index: 10; transition: .3s; min-height: 74px; align-items: flex-start; } .site-header .header-inner nav { margin-left: auto; display: flex; align-items: center; } .site-header .header-inner nav ul li { margin: 0 3.5px; } .site-header .header-inner nav ul li:last-of-type { margin-left: 18px; margin-right: 6px; } .site-header .header-inner nav ul li.mob-only.decor a { font-size: 16px; font-weight: 600; line-height: 24px; } .site-header .header-inner nav ul.header-menu { display: flex; } .site-header .hamburger-menu-button { display: none; margin-left: 12px; } .hamburger-menu-button { z-index: 1; display: block; background: transparent; width: 24px; height: 24px; outline: none; border: none; cursor: pointer; padding: 0; } .hamburger-menu-button > div { position: relative; width: 24px; height: 20px; left: 2px; right: 0; margin: 0 auto; transition: .4s ease-in-out; } .hamburger-menu-button > div span { background: #fff; display: block; width: 100%; max-width: 20px; height: 2px; position: absolute; transition: .4s ease-in-out; border-radius: 0; } .hamburger-menu-button > div span:first-child { top: 3px; left: 0; } .hamburger-menu-button > div span:nth-child(2) { top: 9px; left: 0; } .hamburger-menu-button > div span:nth-child(3) { top: 15px; left: 0; } .hamburger-menu-button.close > div span { background: #DFDFDF; } .hamburger-menu-button.close > div span:first-child { transform: translateY(4px) rotate(45deg); } .hamburger-menu-button.close > div span:nth-child(2) { transform: scaleX(0); } .hamburger-menu-button.close > div span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .site-header .header-inner nav .header-menu .header-menu-inner { max-height: 0; overflow: hidden; transition: max-height .2s ease-out; position: relative; } .opening-section { max-width: 100%; background-position: top; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; position: relative; padding: 75px 0px 0; background: #fff; } .opening-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 72px; background: #000; z-index: 1; } .opening-section .top-part { position: relative; min-height: 484px; transform: translate3d(0, 0, 0); border-radius: 0px 0px 128px 128px; background: linear-gradient(180deg, #6443E8 0%, #62ADF7 100%), #6443E8; overflow: hidden; } .opening-section .hero-sticker { display: flex; position: relative; width: 637.604px; margin: 59px auto; } .opening-section .first-layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .opening-section .hero-character { position: absolute; bottom: 0; } .opening-section .hero-character.left { left: 81px; height: 423px; } .opening-section .hero-character.right { right: 81px; height: 423px; } .opening-section * { box-sizing: border-box; } .opening-section .text-main { margin-top: 48px; opacity: 0; animation: .4s .9s forwards fadeInBottomToTopSoft; color: var(--InZOI-Dark-blue, #011021); text-align: center; font-family: 'Montserrat', sans-serif; font-size: var(--font-size-450, 18px); font-style: normal; font-weight: var(--font-weight-semi-bold, 600); line-height: var(--font-line-height-650, 26px); letter-spacing: var(--font-letter-spacing-default, 0px); } .opening-section .block-line-item { opacity: 0; animation: .4s 1.1s forwards fadeInBottomToTopSoft; } .opening-section .decor-line-top { opacity: 0; animation: .4s 1s forwards fadeInBottomToTopSoft; } .opening-section .decor-line-bottom { opacity: 0; animation: .4s 1.2s forwards fadeInBottomToTopSoft; } .intro-text-container { width: 100%; max-width: 1506px; margin: 0 auto; position: relative; z-index: 10; padding: 5px 20px 98px; } .intro-text-content { display: flex; flex-direction: column; align-items: center; } .block-line { position: relative; display: flex; justify-content: center; flex-wrap: wrap; max-width: 1112px; width: 100%; margin: 25px auto 0; padding: 32px 44px 17px; align-items: center; gap: var(--space-1000, 40px); border-radius: 24px; background: var(--color-surface-invert, #FFF); box-shadow: 16.927px 42.318px 59.245px 16.927px rgba(46, 36, 82, 0.15); opacity: 0; animation: .4s 1.1s forwards fadeInBottomToTopSoft; } .block-line-item { display: flex; flex-direction: column; align-items: center; margin: 17px 9px; width: 208px; } .block-line-item-title { margin-bottom: 10px; color: #000; text-align: center; font-family: 'Montserrat', sans-serif; font-size: var(--font-size-450, 18px); font-style: normal; font-weight: var(--font-weight-semi-bold, 600); line-height: var(--font-line-height-650, 26px); letter-spacing: var(--font-letter-spacing-default, 0px); } .block-line-item-text { display: flex; align-items: center; color: var(--InZOI-Grey, #615F7A); font-family: Lato, sans-serif; font-size: var(--font-size-400, 16px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: 150%; letter-spacing: var(--font-letter-spacing-default, 0px); } .block-line-item-text .text-large { margin-right: 9px; margin-top: 0; transform: translateY(-1px); color: var(--InZOI-light-blue, #62ADF7); font-family: 'Como', sans-serif; font-size: var(--font-size-800, 32px); font-style: normal; font-weight: 900; line-height: 100%; letter-spacing: var(--font-letter-spacing-default, 0px); } .opening-section { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; } .opening-section .download-buttons { display: flex; justify-content: flex-start; margin: 6px auto 0; } .opening-section .download-buttons + .txt-small { text-decoration: underline; transition: .2s ease-in-out; } .opening-section .download-buttons + .txt-small:hover { color: #fff; } .opening-section .download-buttons div:not(:first-child) { position: relative; margin-left: 22px; } .opening-section .download-buttons .desktop { display: flex; } .opening-section .download-buttons .download-btn { margin: 0; } .opening-section .download-btn { opacity: 0; animation: .4s 1.2s forwards fadeInBottomToTopSoft; } .opening-section .under-btn-text { margin-top: 10px; opacity: 0; animation: .4s 1.3s forwards fadeInBottomToTopSoft; } .bg-character-tablet { position: relative; display: none; } .bg-character-mob { position: relative; display: none; } @keyframes a { 0% { transform: scale(1); } to { transform: scale(0.8); } } .modkit-section { position: relative; margin: 0 auto; background: #F0CFDA; } .modkit-section .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; padding: 65px 20px 13px; max-width: 1150px; width: 100%; margin: 0 auto; z-index: 4; } .modkit-section .modkit-logo { width: 80px; margin-bottom: 20px; } .modkit-section .sticker-modkit { position: relative; max-width: 642px; width: 100%; margin-bottom: 18px; } .modkit-section .sticker-modkit.desktop { display: flex; } .modkit-section .sticker-modkit.mob { display: none; } .modkit-section .first-layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .modkit-section .sticker-modkit-item { position: absolute; } .modkit-section .sticker-modkit-item.cat { right: 62.5vw; bottom: 59px; left: unset; position: absolute; z-index: 1; } .modkit-section .sticker-modkit-item.cute { right: 53.1vw; bottom: 50px; position: absolute; z-index: 1; } .modkit-section .sticker-modkit-item.stars { left: 71.2vw; bottom: 124px; position: absolute; z-index: 1; } .modkit-section .text-main { max-width: 544px; width: 100%; font-family: Lato, sans-serif; } .modkit-section .video-loop.large { position: relative; max-width: 100%; margin: 4px auto 0; } .video-loop { display: block; width: 100%; height: auto; object-fit: cover; } .stickers { position: absolute; top: unset; left: 46%; bottom: 46px; max-width: 1221px; transform: translateX(-50%); z-index: 1; } .features-section { position: relative; background: #000; } .features-section .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 96px 20px 10px; width: 100%; max-width: 1440px; z-index: 2; } .features-section .content-wrapper .features-video { overflow: hidden; margin-bottom: 48px; } .features-section .content-wrapper .features-video video { border-radius: 24px; } .features-section .content-wrapper .features-container { display: flex; gap: 42px; } .features-section .content-wrapper .features-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 0 auto 98px; } .features-section .content-wrapper .features-block-item { display: flex; flex-direction: column; max-width: 313px; } .features-section .content-wrapper .features-block-item-img { width: 35px; height: 40px; } .features-section .content-wrapper .features-block-item-title { padding: 19px 0 8px; color: var(--color-text-pure, #FFF); font-family: 'Montserrat', sans-serif; font-size: var(--font-size-500, 20px); font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-700, 28px); letter-spacing: var(--font-letter-spacing-default, 0px); } .features-section .content-wrapper .features-block-item-text { color: #9F9F9F; font-family: Lato, sans-serif; font-size: var(--font-size-400, 16px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-default, 0px); } .join-section { position: relative; background: var(--color-surface-brand-cf, #EB622B); } .join-section .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; max-width: 1436px; margin: 0 auto; padding: 100px 20px 88px; z-index: 2; text-transform: unset; scroll-margin-top: 72px; } .join-section .text-main { max-width: 524px; width: 100%; margin: 20px auto 62px; text-align: center; color: #fff; } .join-section .cards-block { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; } .join-section .cards-item { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; max-width: 348px; margin: 0 0 32px; padding: 32px; gap: var(--space-400, 16px); text-align: center; border-radius: 24px; background: var(--color-surface-invert, #FFF); box-shadow: 16.927px 42.318px 59.245px 16.927px rgba(46, 36, 82, 0.15); } .join-section .cards-item-num { color: var(--InZOI-light-blue, #62ADF7); text-align: center; font-family: 'Como', sans-serif; font-size: var(--font-size-400, 16px); font-style: normal; font-weight: 800; line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-regular, 1.2px); text-transform: uppercase; } .join-section .cards-item-img { display: flex; align-items: flex-end; justify-content: center; width: 268px; height: 268px; margin-top: -14px; margin-bottom: 2px; } .join-section .cards-item-title { color: var(--InZOI-light-blue, #62ADF7); font-family: Como; font-size: var(--space-600, 24px); font-style: normal; font-weight: 900; line-height: var(--space-800, 32px); letter-spacing: var(--font-letter-spacing-default, 0px); } .join-section .cards-item-text, .join-section .cards-item-text a { color: #fff; font-family: Lato, sans-serif; color: var(--InZOI-Grey, #615F7A); text-align: center; align-self: stretch; font-size: var(--font-size-400, 16px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-default, 0px); } .join-section .cards-item-text a { text-decoration: underline; } .join-section .cards-item-text a:hover { color: #F18536; } .categories-section { position: relative; background: #fff; } .categories-section .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 96px 20px 40px; width: 100%; max-width: 1436px; } .categories-section .categories-sticker { position: relative; max-width: 642px; } .categories-section .under-btn-text { color: var(--InZOI-Grey, #615F7A); } .categories-section .under-btn-text:hover { color: #F18536; } .categories-section .text-main { max-width: 525px; margin: 20px auto 15px; color: var(--InZOI-Grey, #615F7A); } .categories-section .cards { display: flex; justify-content: center; margin-top: 78px; position: relative; gap: 24px; width: 100%; } .categories-section .cards .first-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .categories-section .cards .decorated-element.zero { position: absolute; top: 64px; right: 0; width: 118px; height: 104px; } .categories-section .cards .decorated-element.one { position: absolute; top: 186px; left: 0; width: 118px; height: 104px; } .categories-section .cards .decorated-element.two { position: absolute; bottom: 116px; right: 0; width: 118px; height: 104px; } .categories-section .cards .decorated-element.three { position: absolute; top: -38px; left: -143px; width: 118px; height: 104px; } .categories-section .cards .decorated-element.four { position: absolute; top: 3px; right: -157px; width: 148px; height: 130px; } .categories-section .cards .decorated-element.five { position: absolute; top: 64px; left: -143px; width: 118px; height: 72px; } .categories-section .cards .decorated-element.six { position: absolute; top: 261px; right: -141px; width: 118px; height: 100px; } .categories-section .card { position: relative; max-width: 544px; width: 100%; border-radius: 32px; background: #FFF; box-shadow: 16.927px 42.318px 59.245px 16.927px rgba(46, 36, 82, 0.15); overflow: hidden; } .categories-section .card.left .card-item-img, .categories-section .card.right .card-item-img { margin: -7px 0 9px; } .categories-section .card-item { display: flex; flex-direction: column; align-items: center; width: 100%; } .categories-section .card-item-container { max-width: 480px; margin: 0 auto; padding: 0 32px 32px; } .categories-section .card-item-img { position: relative; align-self: stretch; } .categories-section .card-item-title { padding: 16px 0; color: var(--color-text-invert, #000); text-align: center; font-size: var(--font-size-800, 32px); font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-1000, 40px); letter-spacing: var(--font-letter-spacing-default, 0px); } .categories-section .card-item-text { padding: 10px 5px 24px; color: var(--InZOI-Grey, #615F7A); text-align: center; font-family: var(--font-family-default, Lato); font-size: var(--font-size-450, 18px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-700, 28px); letter-spacing: var(--font-letter-spacing-default, 0px); } .categories-section .card-item-text a { color: var(--InZOI-Grey, #615F7A); text-align: center; font-family: var(--font-family-default, Lato); font-size: var(--font-size-450, 18px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-700, 28px); letter-spacing: var(--font-letter-spacing-default, 0px); transition: .2s ease-in-out; text-decoration: underline; } .categories-section .card-item-text a:hover { color: #F18536; } .categories-section .card-item-box { display: flex; justify-content: center; padding: var(--space-300, 12px) var(--space-500, 20px); align-items: center; gap: var(--space-300, 12px); align-self: stretch; border-radius: 24px; background: #FFF; box-shadow: 5px 5px 59.245px 16.927px rgba(46, 36, 82, 0.15); } .categories-section .card-item-box-line { display: flex; flex-direction: column; align-items: center; padding: 0 20px; width: 162px; } .categories-section .card-item-box-line.left { padding: 0 32px 0 8px; border-right: 1px solid #62ADF7; } .categories-section .card-item-box-line.right { padding: 0 32px 0 32px; } .categories-section .card-item-box-line-title { color: var(--InZOI-light-blue, #62ADF7); text-align: center; font-family: 'Como', sans-serif; font-size: var(--font-size-800, 32px); font-style: normal; font-weight: 900; line-height: var(--font-line-height-1000, 40px); letter-spacing: var(--font-letter-spacing-default, 0px); } .categories-section .card-item-box-line-text { color: var(--InZOI-Grey, #615F7A); text-align: center; font-family: Lato, sans-serif; font-size: var(--font-size-450, 18px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-700, 28px); letter-spacing: var(--font-letter-spacing-default, 0px); } .cards.inline { display: flex; flex-direction: column; max-width: 1112px; margin: 148px 0 59px; gap: 0; } .cards.inline .card.large { display: flex; flex-direction: column; position: relative; box-shadow: none; background: transparent; width: 100%; max-width: 100%; margin: 0 auto 39px; overflow: unset; } .cards.inline .card.large .card-item-container { display: flex; flex-direction: column; position: relative; max-width: 544px; width: 100%; margin: 0; padding: 0 30px 32px 32px; } .cards.inline .card.large .card-item-img { display: block; height: 344px; max-width: 544px; width: 100%; position: relative; } .cards.inline .card.large .card-item-img img { top: 0; } .cards.inline .card.large .card-item-box, .cards.inline .card.large .card-item-text { width: 100%; max-width: 416px; margin: 0 auto; } .cards.inline .card.large .card-item-box.two { display: flex; flex-direction: column; } .cards.inline .card.large .card-item-box.two .card-item-box-wrapper { display: flex; justify-content: center; width: 100%; max-width: 416px; margin: 0 auto; } .cards.inline .card.large .card-item-box.two .card-item-box-note { max-width: 313px; color: var(--color-text-tertiary, #9F9F9F); text-align: center; font-family: Lato, sans-serif; font-size: var(--font-size-400, 16px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-default, 0px); } .cards.inline .card.large .card-item-box.two .card-item-box-note br { display: none; } .cards.inline .card.large.right .card-item-img img { top: -49px; max-width: 610px; width: 111%; } .cards.inline .card.large.right .card-item-img { margin: 6px 0 0px; } .cards.inline .card-item-num { margin-bottom: 6px; color: var(--InZOI-light-blue, #62ADF7); text-align: center; font-family: 'Como', sans-serif; font-size: var(--font-size-400, 16px); font-style: normal; font-weight: 800; line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-regular, 1.2px); text-transform: uppercase; } .timeline-section { position: relative; } .timeline-section .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: f; margin: 0 auto; padding: 72px 20px 128px; width: 100%; max-width: 1520px; } .timeline-section .timeline-wrapper { display: flex; justify-content: center; align-items: flex-start; flex-direction: row; gap: 24px; margin: 0 auto 0; padding: 0 0 103.5px; } .timeline-section .timeline-rocket { position: relative; width: 40px; margin-bottom: 16px; } .timeline-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; padding: 0 0 13px 56px; margin-bottom: 24px; border-bottom: 1px solid #DFDFDF; } .timeline-item:nth-child(1) { z-index: 5; } .timeline-item:nth-child(2) { z-index: 4; } .timeline-item:nth-child(3) { z-index: 3; } .timeline-item:nth-child(4) { z-index: 2; } .timeline-item:nth-child(5) { z-index: 1; } .timeline-item:first-of-type .timeline-item-circle::after { display: none; } .timeline-item-circle { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; margin-top: 0px; width: 40px; height: 40px; min-height: 40px; background: #fff; filter: drop-shadow(0px 6px 16px rgba(46, 36, 82, 0.15)); border-radius: 50%; } .timeline-item-data { margin: 8px auto; color: var(--color-border-secondary, #9F9F9F); text-align: center; font-family: Lato, sans-serif; font-size: var(--font-size-400, 16px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-default, 0px); white-space: nowrap; } .timeline-item-text { margin: 48px auto 0; text-align: center; color: var(--color-border-secondary, #9F9F9F); text-align: center; font-family: 'Montserrat', sans-serif; font-size: var(--font-size-450, 18px); font-style: normal; font-weight: var(--font-weight-semi-bold, 600); line-height: var(--font-line-height-550, 22px); letter-spacing: var(--font-letter-spacing-default, 0px); } .timeline-item.past svg { fill: #eb622b; } .timeline-item.past .timeline-item-text { color: black; } .timeline-item.past .timeline-item-circle::after { background: #eb622b; } .timeline-item svg { fill: #9f9f9f; } .faq-section { position: relative; width: 100%; z-index: 3; background: #000; } .faq-section .content-wrapper { padding: 93px 0 130px; max-width: 882px; width: 100%; margin: auto; } .faq-section .heading-second { margin: 38px auto 5px; } .faq-section .faq-list { list-style: none; padding: 14px 0 0 0; } .faq-section .faq-list li { position: relative; color: #FFF; font-feature-settings: 'liga' off, 'clig' off; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: 0.18px; border-bottom: 1px solid #404040; } .faq-section .faq-list li a { transition: .2s ease-in-out; } .faq-section .faq-list li a:hover { color: #F18536; } .faq-section .faq-list li .question { font-size: 22px; line-height: 32px; margin: 0; background: transparent; font-weight: 500; width: 100%; text-align: left; padding: 24px 50px 24px 0; border: none; text-transform: inherit; position: relative; transition: all .15s; letter-spacing: 0; cursor: pointer; color: #DFDFDF; } .faq-section .faq-list li .question svg { width: 24px; height: 24px; margin-right: 15px; transition: all .15s; fill: #9f9f9f; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; } .faq-section .faq-list li .question.active + .answer-outer:before { height: 100%; } .faq-section .faq-list li .question.active svg { fill: #fff; transform: rotate(180deg); } .faq-section .faq-list li .answer-outer { max-height: 0; overflow: hidden; transition: max-height .2s ease-out; position: relative; background: var(--color-surface-primary, #101010); } .faq-section .faq-list li .answer-outer .answer-inner { padding: 0 36px; } .faq-section .faq-list li .answer-outer .answer-inner p { padding: 0; margin: 24px 0; max-width: 730px; color: #DFDFDF; font-family: Lato, sans-serif; font-size: var(--font-size-225, 18px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-35, 28px); letter-spacing: var(--font-letter-spacing-none, 0px); } .faq-section .faq-list li .answer-outer .answer-inner a { color: #DFDFDF; font-family: Lato, sans-serif; font-family: var(--font-family-default, Lato); font-size: var(--font-size-225, 18px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-35, 28px); letter-spacing: var(--font-letter-spacing-none, 0px); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; cursor: pointer; transition: .2s ease-in-out; } .faq-section .faq-list li .answer-outer .answer-inner a:hover { color: #F18536; } .faq-section .faq-list li .answer-outer .answer-inner ul { padding-bottom: 24px; list-style: disc; padding-left: 15px; } .faq-section .decorated-line { position: relative; display: flex; justify-content: center; position: relative; height: 96px; } .faq-section .decorated-line img { max-inline-size: none; max-width: 100%; max-block-size: fit-content; } .bottom-section { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; z-index: 1; background: #000; } .bottom-section .first-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("./../images/stars8.webp") no-repeat 80% 98%; background-size: 82%; } .bottom-section .content-wrapper { position: relative; padding: 0; z-index: 2; } .bottom-section::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 200px 200px 0px 0px; background: linear-gradient(180deg, #6443E8 0%, #62ADF7 100%), #000; content: ''; } .bottom-section .logo-bottom { display: flex; position: relative; width: 100%; max-width: 448px; margin: auto; padding: 95px 0 0; } .bottom-section .logo-bottom.mob { display: none; max-width: 263px; } .bottom-section .logo-bottom-sticker { display: flex; margin: 36px auto; } .bottom-section .stickers-bottom { position: relative; margin: 37px auto 62px; } .bottom-section .stickers-bottom-container { position: relative; display: flex; justify-content: center; align-items: flex-start; max-width: 1027px; margin: 0 auto; } .bottom-section .stickers-item { position: relative; max-width: 100%; height: 328.786px; border-radius: 23px; box-shadow: 15.655px 39.138px 54.793px 15.655px rgba(46, 36, 82, 0.15); margin-top: 93px; } .bottom-section .stickers-item .video-loop { position: absolute; display: block; top: 0; max-width: 100%; border-radius: 23px; } .bottom-section .stickers-item .stickers-img { position: absolute; } .bottom-section .stickers-item .stickers-img.one { top: -35px; left: 12px; } .bottom-section .stickers-item .stickers-img.two { top: 182px; right: -31px; } .bottom-section .stickers-item .stickers-img.three { left: 28px; bottom: -49px; } .bottom-section .stickers-item .stickers-img.three-one { top: -15px; right: -67px; } .bottom-section .stickers-item .video-wrapper { position: absolute; top: 51.6%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; max-height: 100%; max-width: 94.5%; overflow: hidden; border-radius: 23px; } .bottom-section .stickers-item:nth-of-type(2) { margin: 51.79px; height: 443.73px; margin-top: 33px; } .bottom-section .stickers-item:nth-of-type(2) .video-wrapper { position: absolute; top: 52.5%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; max-height: 100%; max-width: 94.5%; overflow: hidden; border-radius: 23px; } .logo-bottom-sticker.desktop { max-width: 698px; } .logo-bottom-sticker.mob { display: none; } .footer { position: relative; z-index: 3; padding: 0; display: flex; flex-direction: column; align-items: center; background-color: #000; } .footer .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; max-width: 1720px; margin: 0 auto; padding: 30px 20px 42px; } .footer-line { display: flex; width: 100%; justify-content: space-between; width: 100%; } .footer-line .content-wrapper { position: relative; flex-direction: column; max-width: 1678px; width: 100%; margin: 0 auto; padding: 8px 10px 15px; } .footer-line p, .footer-line span, .footer-line a { color: #9F9F9F; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-line a { transition: .2s ease-in-out; } .footer-line a:hover { color: #fff; } .footer-line-left { display: flex; flex-direction: column; } .footer-line-left ul { display: flex; align-items: center; } .footer-line-left ul li { color: #9F9F9F; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-line-right { display: flex; } .footer-line-right p, .footer-line-right span, .footer-line-right a, .footer-line-right li { color: #9F9F9F; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-col { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 48px; width: 100%; } .footer-col p { max-width: 1099px; margin-top: 24px; } .footer-col p, .footer-col span, .footer-col a { color: #B2B2B2; font-family: Lato, sans-serif; font-size: 14px; font-weight: 400; line-height: 140%; transition: .2s ease-in-out; } .footer-col a { text-decoration: underline; transition: .2s ease-in-out; white-space: nowrap; } .footer-col a:hover { color: #fff; } .footer-fire { position: absolute; top: -26px; right: -100px; width: 375px; max-height: 228px; } .footer-logo { width: 177px; } .footer-socials { display: flex; margin-top: -2px; } .footer-socials-item { margin-left: 20px; } .footer-line ul.mob-only { display: none; } .cta-buttons { display: flex; flex-direction: column; align-items: center; } .download-btn.orange.disabled, .header-link.orange.disabled { pointer-events: none; color: #fff; opacity: 0.5 !important; text-decoration: none; cursor: default; background: #808080; background: #373737; cursor: none; pointer-events: none; } .header-link.border.disabled { cursor: default; background-color: transparent; cursor: none; pointer-events: none; color: #9F9F9F; border: 1px solid #9F9F9F; } .scroll-down-block { display: flex; flex-grow: 1; flex-direction: column; justify-content: flex-end; margin: 23px auto 20px; color: #808080; text-align: center; font-size: 15px; font-weight: 500; line-height: 150%; z-index: 10; position: relative; display: flex; } .scroll-down { position: relative; display: flex; justify-content: center; margin: 0 auto; } @keyframes a { 0% { transform: scale(1); } to { transform: scale(0.8); } } body.no-scroll { position: fixed; width: 100%; height: 100vh; overflow: hidden; } .video-loop.desktop { display: flex; } .video-loop.mob { display: none; } @media only screen and (min-width: 601px) { .faq-section .faq-list { padding: 42px 0 0 0; } } @media screen and (min-width: 1025px) { .categories-section .card-item-img { height: 440px; } .categories-section .card-item-img img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 582px; width: 107%; max-inline-size: none; max-block-size: none; } .cards.inline .card.large { flex-direction: row; align-items: flex-start; justify-content: space-between; position: relative; box-shadow: none; background: transparent; width: 100%; max-width: 100%; margin: 0 auto 72px; } .cards.inline .card.large .card-item-img img { top: -150px; } .cards.inline .card.large.left .card-item-img img { top: -142px; left: 50%; width: 111%; } } @media only screen and (min-width: 1025px) { .faq-section .faq-list { padding: 51px 0 0; } .faq-section .faq-list li .question { margin: 0; padding: 22px 45px 22px 0; line-height: 160%; } .footer { padding: 0; } .footer .content-wrapper { max-width: 1720px; padding: 5px 20px 141px; align-items: flex-start; } .footer-line .content-wrapper { flex-direction: row; justify-content: space-between; max-width: 1720px; margin: 0 auto; padding: 16px 20px; } .footer-line-left { flex-direction: row; } .footer-line-left ul li { margin-left: 32px; } } @media only screen and (min-width: 1100px) { .site-header .header-inner nav ul li ul.header-menu-inner { display: none; } } @media only screen and (min-width: 1101px) { .header-link { border-bottom: 1px solid transparent; } .header-link:hover { border-bottom: 1px solid #EB622B; } } @media only screen and (min-width: 1110px) { .timeline-item { max-width: 260px; height: 124px; min-height: 140px; padding-left: 0; padding: 0 10px 10px; border-radius: 24px; background: var(--color-surface-invert, #FFF); box-shadow: 5px 5px 59.245px 16.927px rgba(46, 36, 82, 0.15); } .timeline-item::after { position: absolute; top: -7.5px; left: 50%; transform: translateX(-50%); display: flex; width: 16px; height: 8px; background: url("./../images/Polygon.svg") no-repeat 50% 50%; background-size: 100%; content: ''; z-index: 1; } .timeline-item-circle { position: relative; margin-top: -64px; left: 50%; transform: translateX(-50%); } .timeline-item-circle::after { position: absolute; top: 50%; right: 100%; width: 609%; max-width: 260px; height: 2px; content: ''; background: #DFDFDF; } } @media only screen and (min-width: 1310px) { .timeline-item { min-height: unset; height: 124px; } } @media only screen and (min-width: 1921px) { .scroll-down-block { max-height: 70px; } } @media only screen and (max-width: 1760px) { .footer-fire { top: 20px; right: -3vw; } } @media only screen and (max-width: 1700px) { .opening-section .hero-character.left { left: -2vw; } .opening-section .hero-character.right { right: -2vw; } } @media only screen and (max-width: 1500px) { .opening-section .hero-character.left { left: -84px; } .opening-section .hero-character.right { right: -84px; } } @media only screen and (max-width: 1430px) { .features-section .content-wrapper .features-video { width: 100%; } .features-section .content-wrapper .features-video video { width: 100%; } .features-section .content-wrapper .features-container { flex-wrap: wrap; justify-content: center; } .features-section .content-wrapper .features-block { width: 100%; } } @media only screen and (max-width: 1400px) { .stickers { bottom: 20px; max-width: 85vw; } } @media only screen and (max-width: 1360px) { .footer-col p { max-width: 600px; } .footer-fire { top: 20px; right: -3vw; } } @media only screen and (max-width: 1350px) { .opening-section .hero-character.left { left: -9vw; } .opening-section .hero-character.right { right: -9vw; } } @media only screen and (max-width: 1300px) { .opening-section .hero-character.left { left: -13vw; } .opening-section .hero-character.right { right: -15vw; } } @media only screen and (max-width: 1250px) { .header-link.border { padding: 7px 12px; } .site-header .header-inner nav ul li { margin: 0; } } @media only screen and (max-width: 1210px) { .timeline-section .timeline-wrapper { gap: 12px; } } @media only screen and (max-width: 1200px) { .opening-section .hero-character.left { left: -19vw; } .opening-section .hero-character.right { right: -21vw; } .timeline-item-circle::after { max-width: 210px; } } @media only screen and (max-width: 1110px) { .timeline-section .content-wrapper { flex-direction: column; align-items: center; padding: 52px 20px 20px; } .timeline-section .timeline-wrapper { width: 100%; max-width: 872px; flex-direction: column; align-items: center; gap: 0; padding: 28px 20px 72px; } .timeline-item:first-of-type br, .timeline-item:nth-of-type(4) br { display: none; } .timeline-item-data { margin-top: 3px; margin-bottom: 3px; margin: 3px 0; } .timeline-item-text { margin-top: 0; margin: 0; text-align: left; } } @media only screen and (max-width: 1109px) { .timeline-item-circle::after { max-width: 190px; } } @media only screen and (max-width: 1100px) { .under-btn-text { margin-top: 12px; } .download-btn.mob { display: flex; } .download-btn.orange { display: flex; } .download-btn.border { display: flex; } header { height: unset; } header .content-wrapper { justify-content: flex-start; } .header-link { width: 100%; margin-left: 0; padding: 11px 18px 14.5px; font-size: 18px; font-weight: 500; line-height: 28px; letter-spacing: 0; border-bottom: none; } .header-link.desktop { display: none !important; } .header-link.mob { display: flex; } .header-link:hover { border-bottom: none; } .header-link.border { display: none; border: none; } .header-link.border { display: none; } .header-link-container { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 120px; } .header-logo.desktop { display: none; } .header-logo.mob { display: flex; } .header-logo img { margin-right: 0; margin-left: 13px; max-width: 268px; height: 48px; width: unset; margin-top: -13px; } .site-header .header-inner { padding: 28px 14px 17px 16px; } .site-header .hamburger-menu-button { display: block; } .submenu-icon { display: flex; } .site-header .header-inner .action-items { width: fit-content; margin: auto auto 10vh; display: flex; gap: 8px; } .site-header .header-inner nav .header-menu { position: absolute; left: 0; top: 74px; margin: 0; flex-direction: column; background: var(--color-surface-pure, #000); background-blend-mode: darken; text-align: center; width: 100%; overflow: overlay; height: 100vh; padding-top: 16px; padding-bottom: 80px; gap: 0; } .site-header .header-menu-inner { background: #000; } .site-header .header-inner nav { position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: opacity .3s ease-out; animation: quick-hide-mobile-menu .2s 1ж; } .site-header .header-inner nav ul li { margin-left: unset; display: flex; justify-content: flex-start; position: relative; width: 100%; margin: 0; flex-direction: column; } .site-header .header-inner nav ul li a { display: flex; align-items: center; } .site-header .header-inner nav ul li a.download-btn { max-width: 224px; } .site-header .header-inner nav ul li a.border { display: none; } @keyframes quick-hide-mobile-menu { 0% { opacity: 0; } to { opacity: 0; } } .site-header .header-inner nav.is-open { opacity: 1; background-color: #000; } .site-header .header-inner nav:not(.is-open) { pointer-events: none; } .site-header .header-inner nav ul::-webkit-scrollbar { width: 4px; height: 4px; background-color: #1E1E1E; } .site-header .header-inner nav ul::-webkit-scrollbar-thumb { border-width: 0; background-color: #1E1E1E; background-clip: padding-box; } .site-header .header-inner nav ul li:last-of-type { margin-left: unset; } .opening-section { display: flex; flex-direction: column; height: unset; width: 100%; padding: 0; min-height: unset; } .opening-section::before { height: 80px; } .opening-section .top-part { min-height: unset; padding: 80px 0 0; } .opening-section .hero-sticker { width: auto; max-width: 62vw; margin: 41px auto 0; } .opening-section .first-layer { display: none; } .opening-section .text-main { order: 2; margin-top: 27px; font-size: var(--font-size-400, 16px); line-height: var(--font-line-height-600, 24px); } .intro-text-container { padding: 5px 20.5px 92px; } .block-line { flex-direction: column; justify-content: center; order: 6; max-width: 834px; margin: 0 auto 0; padding: 9px 44px; z-index: 1; gap: 0; } .block-line-item { width: unset; max-width: 335px; width: 100%; margin: 0 auto; padding: 25px 0 26px; } .block-line-item::before { display: block; position: absolute; top: 0px; left: 0; height: 1px; width: 100%; background-color: #9F9F9F; content: ''; } .block-line-item:first-of-type::before { display: none; } .opening-section .download-buttons { flex-direction: column; align-items: center; width: 100%; margin: 32px auto 0; order: 3; } .opening-section .download-buttons div:not(:first-child) { margin-left: 0; margin-top: 20px; } .opening-section .download-buttons .desktop { display: flex; width: 100%; justify-content: center; } .opening-section .download-btn { display: flex; } .opening-section .under-btn-text { order: 4; } .join-section .content-wrapper { padding: 96px 20px 123px; scroll-margin-top: 80px; } .join-section .text-main { margin: 20px auto 63px; } .scroll-down-block { order: 5; margin: 42px auto 38px; } } @media only screen and (max-width: 1024px) { .timeline-section .heading-second { font-size: var(--font-size-800, 32px); line-height: var(--font-line-height-1000, 40px); letter-spacing: var(--font-letter-spacing-default, 0px); } .to-top { margin: 35px auto 0; font-size: 16px; } .to-top-section .content-wrapper { padding-top: 0; } .modkit-section .sticker-modkit { margin-bottom: 21px; } .modkit-section .sticker-modkit-item.cat { width: 160.003px; width: 43vw; right: unset; z-index: 5; left: -66px; height: 81px; bottom: 18px; } .modkit-section .sticker-modkit-item.cute { width: 79.867px; left: 22%; right: unset; bottom: 23px; width: 22vw; } .modkit-section .sticker-modkit-item.stars { left: 90.82vw; bottom: 50px; width: 43.429px; width: 12vw; } .modkit-section .video-loop.large { max-width: 192%; margin: 5px auto 0; min-height: 993px; width: 100%; } .stickers { bottom: 49px; max-width: 117vw; left: 43%; } .features-section .content-wrapper { gap: 0; padding: 20px 20px 40px; } .features-section .content-wrapper .features-video { margin-bottom: 45px; } .features-section .content-wrapper .features-container { justify-content: space-between; gap: 35px; } .features-section .content-wrapper .features-wrapper { flex-direction: column; width: 100%; max-width: 831px; gap: 0; margin: 0 auto 30px; padding: 77px 0 0; } .join-section .cards-item { margin: 0; } .categories-section .content-wrapper { padding: 96px 20px 20px; } .categories-section .cards { flex-direction: column; align-items: center; justify-content: flex-start; gap: 26px; } .categories-section .cards .first-layer { display: none; } .categories-section .cards { flex-wrap: wrap; margin-top: 0; } .categories-section .card.left .card-item-img, .categories-section .card.right .card-item-img { margin: 76px 0 -79px; } .categories-section .card.right .card-item-img { margin: 6px 0 -79px; } .categories-section .card-item-text a { font-size: var(--font-size-400, 16px); line-height: var(--font-line-height-600, 24px); } .categories-section .card-item-box { max-width: 413px; margin: 0 auto; gap: 0; padding: 12px 20px 17px; } .cards.inline .card.large.large { max-width: 544px; } .faq-section .content-wrapper { max-width: 925px; padding: 65px 20px 129px; } .faq-section .heading-second { margin: 40px auto 12px; } .bottom-section .first-layer { display: none; } .bottom-section .content-wrapper { padding: 0 0 14px; } .bottom-section::before { border-radius: 0; background: linear-gradient(180deg, #6443E8 0%, #62ADF7 100%), #000; } .bottom-section .logo-bottom { padding: 95px 0 0; } .bottom-section .stickers-item { height: 247.786px; margin-top: 59px; } .bottom-section .stickers-item .video-loop { border-radius: 9px; } .bottom-section .stickers-item .stickers-img.one { top: -25px; left: 10px; width: 163px; } .bottom-section .stickers-item .stickers-img.two { top: 137px; right: -24px; width: 158.007px; } .bottom-section .stickers-item .stickers-img.three { left: 22px; bottom: -37px; width: 89px; } .bottom-section .stickers-item .stickers-img.three-one { top: -12px; right: -50px; width: 59px; } .bottom-section .stickers-item:nth-of-type(2) { height: 331.865px; margin: 16.79px 38.9px; } .bottom-section .stickers-item:nth-of-type(2) .video-wrapper { position: absolute; top: 52.5%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; max-height: 100%; max-width: 93.5%; overflow: hidden; border-radius: 2px; } .footer-line { flex-direction: column; align-items: center; } .footer-col { align-items: center; margin: 0 auto 8px; } .footer-col p { margin-top: 30px; text-align: center; } .footer-fire { display: none; } .footer-logo { width: 140px; } .footer-socials { margin-top: 44px; justify-content: center; margin: 29px auto 6px; } .footer-line ul.mob-only { display: flex; justify-content: space-between; width: 100%; max-width: 400px; padding: 0px 16px 16px; } .footer-line ul.mob-only li { margin: 0 4px; } .footer-line ul.desktop-only { display: none; } .footer-socials-item { margin-left: unset; margin: 0 10px; } .footer-socials-item:first-of-type { order: 1; } .footer-socials-item:nth-of-type(2) { order: 3; } .footer-socials-item:last-of-type { order: 2; } } @media screen and (max-width: 1024px) { .features-section .content-wrapper .features-block { margin-bottom: 65px; } .features-section .content-wrapper .features-block-item-title { padding: 22px 0 7px; } .categories-section .card-item-container { padding: 0 18px 29px; } .categories-section .card-item-img { height: unset; margin-top: 7px; } .categories-section .card-item-img img { max-width: 100%; width: 100%; } .categories-section .card-item-box-line-text { font-size: var(--font-size-400, 16px); line-height: var(--font-line-height-600, 24px); } .cards.inline .card-item-title { margin-top: 0; padding: 11px 0 15px; } .cards.inline .card.large { max-width: 335px; margin: 0 auto 66px; } .cards.inline .card.large:last-of-type { margin-bottom: 0; } .cards.inline .card.large .card-item-img { height: unset; } .cards.inline .card.large .card-item-img img { width: 112%; max-width: 112%; max-block-size: unset; transform: translate(-5.6vw, 2.2%); } .cards.inline .card.large .card-item-box.two .card-item-box-note { padding: 18px 0 0; } .cards.inline .card.large .card-item-box.two .card-item-box-note br { display: inline; } .cards.inline .card.large.right .card-item-img img { top: 0px; max-width: 566px; width: 112%; transform: translate(-4.6vw, -1.1%); margin-bottom: -72px; } .cards.inline .card.large.right .card-item-container { margin-top: -72px; } .cards.inline .card.large.left { flex-direction: column-reverse; max-width: 550px; margin-top: 128px; } .cards.inline .card.large.left .card-item-img { max-width: 100%; min-width: 612px; margin: -132px 0 -97px -28px; } .cards.inline .card.large.left .card-item-img img { width: 100%; } .cards.inline .card.large.right .card-item-img { max-width: 100%; min-width: 612px; margin: -51px 0 -100px -29px; } .cards.inline .card.large.right .card-item-img img { width: 100%; } .cards.inline .card.large.right .card-item-img img { max-width: unset; margin: 0; transform: none; margin-bottom: 0; } .cards.inline .card.large.right .card-item-container { margin-top: 0; } .cards.inline .card-item-num { margin-bottom: 11px; } .video-loop.desktop { display: none; } .video-loop.mob { display: flex; } } @media only screen and (max-width: 600px) { .heading-first, .heading-second { font-size: var(--font-size-800, 32px); line-height: var(--font-line-height-1000, 40px); letter-spacing: var(--font-letter-spacing-default, 0px); } .opening-section .top-part { border-radius: 0px 0px 48px 48px; } .opening-section .hero-sticker { width: auto; max-width: 317px; margin: 49px auto 0; } .bg-character-mob { display: flex; max-width: 75.3vw; margin-top: 0px; order: 4; justify-content: center; margin: 0px auto; } .modkit-section .content-wrapper { padding: 34px 20px 0; } .modkit-section .modkit-logo { width: 40px; margin-bottom: 24px; } .modkit-section .sticker-modkit.desktop { display: none; } .modkit-section .sticker-modkit.mob { display: flex; max-width: 319px; margin: 0 auto 19px; } .modkit-section .text-main { font-size: 16px; line-height: 24px; } .modkit-section .video-loop.large { max-width: 100%; margin: 17px auto -5px; min-height: 373px; width: 100%; } .stickers { left: 42%; bottom: 20px; max-width: 116vw; } .features-section .content-wrapper .features-container { justify-content: flex-start; gap: 35px; } .features-section .content-wrapper .features-wrapper { margin: 0 auto 71px; padding: 77px 0 0; } .join-section .content-wrapper { padding: 65px 20px 88px; scroll-margin-top: 80px; } .categories-section .categories-sticker { max-width: 321px; } .categories-section .text-main { padding: 0 3px 24px; font-size: 16px; line-height: 24px; } .categories-section .cards { gap: 18px; } .categories-section .card.left .card-item-img, .categories-section .card.right .card-item-img { margin: 6px 0 -31px; } .categories-section .card.left, .categories-section .card.right { margin: 76px 0 9px; margin: 0; } .categories-section .card.right .card-item-img { margin: 0; } .categories-section .card-item-title { margin-top: -49px; font-size: var(--font-size-600, 24px); line-height: var(--font-line-height-800, 32px); } .categories-section .card-item-text { padding: 0px 0px 14px; font-size: var(--font-size-400, 16px); line-height: var(--font-line-height-600, 24px); } .categories-section .card-item-box-line { width: 123px; } .categories-section .card-item-box-line.left { width: 114px; padding: 0 17px 0 0; } .cards.inline .card.large.large { margin: 0 auto 60px; } .cards.inline .card.large.large.right { margin: 0 auto; } .cards.inline .card.large .card-item-container { padding: 54px 27px 32px 27px; } .cards.inline .card.large .card-item-img { width: 332.5px; height: unset; } .timeline-section .timeline-wrapper { padding: 28px 20px 72px; } .faq-section .content-wrapper { max-width: 925px; padding: 37px 20px 48px; } .faq-section .faq-list li .question { padding: 24px 132px 24px 0; font-size: var(--font-size-450, 18px); font-weight: var(--font-weight-medium, 500); line-height: var(--font-line-height-700, 28px); letter-spacing: var(--font-letter-spacing-default, 0px); } .bottom-section::before { border-radius: 96px 96px 0 0; } .bottom-section .logo-bottom { padding: 64px 0 0; } .bottom-section .logo-bottom.desktop { display: none; } .bottom-section .logo-bottom.mob { display: flex; } .bottom-section .logo-bottom-sticker { max-width: 331px; } .bottom-section .stickers-bottom { height: 325.44px; width: 100%; margin: 0 auto 27px; } .bottom-section .stickers-bottom-container { position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 513px; min-width: 513px; } .bottom-section .stickers-item { height: 164.393px; margin-top: 80px; } .bottom-section .stickers-item .stickers-img.one { top: -15px; left: 24px; width: 91.561px; } .bottom-section .stickers-item .stickers-img.two { top: 92px; right: -13px; width: 99.007px; } .bottom-section .stickers-item .stickers-img.three { left: 15px; bottom: -25px; width: 57.201px; } .bottom-section .stickers-item:nth-of-type(2) { height: 221.865px; margin: 51.79px 25.9px; } .logo-bottom-sticker.desktop { display: none; } .logo-bottom-sticker.mob { display: flex; width: 100%; max-width: 349px; margin: 34px auto 21px; } } @media screen and (max-width: 600px) { .features-section .content-wrapper .features-block { margin-bottom: 24px; } .features-section .content-wrapper .features-block-item-title { padding: 24px 0 7px; } .categories-section .card-item-container { padding: 0 18px 17px; } .categories-section .card-item-box-line.right { padding: 0 8px 0 32px; } .cards.inline { margin: 1px 0 35px; } .cards.inline .card.large .card-item-img img { width: 100%; max-width: 100%; max-block-size: unset; transform: translate(0, 0); } .cards.inline .card.large.left { margin-top: 85px; } .cards.inline .card.large.left .card-item-img { min-width: 372px; margin: -64px auto -81px; } .cards.inline .card.large.right .card-item-img { margin: -18px 0 -61px -17px; } .cards.inline .card.large.right .card-item-img img { width: 100%; } .cards.inline .card.large.right .card-item-container { margin: 0 0 32px; padding: 31px 19px 0; } .cards.inline .card-item-num { margin-bottom: 6px; } } @media only screen and (max-width: 500px) { .bg-character-mob { max-width: 282px; max-width: 75.3vw; } } @media screen and (max-width: 500px) { .cards.inline .card.large.left .card-item-img { margin: -64px auto -81px; min-width: 99vw; transform: translate(-5vw); } .cards.inline .card.large.right .card-item-img { min-width: 372px; margin: -18px auto -60px; min-width: 99vw; transform: translate(-5vw); } .cards.inline .card.large.right .card-item-img img { width: 100%; } } @media only screen and (max-width: 365px) { .download-btn.border { padding: 11px 10px; } } @media only screen and (max-width: 360px) { .join-section .cards-item { width: 100%; max-width: 300px; padding: 16px; } .join-section .cards-item-img { width: 100%; max-width: 268px; } .faq-section .faq-list li .question { padding: 24px 52px 24px 0; } } @media screen and (max-width: 360px) { .cards.inline .card.large .card-item-img img { width: 100%; } } @media only screen and (max-width: 350px) { .header-logo img { max-width: 240px; } } @media only screen and (min-width: 601px) and (max-width: 1024px) { .bg-character-tablet { display: flex; max-width: 72.3vw; margin: 50px auto 0; } } @media screen and (min-width: 601px) and (max-width: 1024px) { .cards.inline { margin: 1px 0 122px; } .cards.inline .card.large.left .card-item-img img { transform: none; margin: 0 0 0 0; } }