@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); } .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: white; } .under-btn-text.white:hover { color: #DFDFDF; } .under-btn-text.light { color: #DFDFDF; } .under-btn-text.grey { color: #535353; } .under-btn-text.light2 { color: #CCC; } .under-btn-text:hover { color: #F18536; } .heading-first { color: var(--color-surface-invert, #FFF); text-align: center; font-family: 'Como', sans-serif; font-size: 90px; font-style: normal; font-weight: 900; line-height: 78px; letter-spacing: -1px; } .heading-second { color: #fff; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 64px; font-style: normal; font-weight: 700; line-height: 108%; letter-spacing: -1px; } .heading-second.como { font-family: 'Como', sans-serif; color: var(--color-surface-invert, #FFF); text-align: center; font-size: 64px; font-style: normal; font-weight: 900; line-height: 72px; letter-spacing: var(--font-letter-spacing-default, 0px); } .heading-second.como span { font-size: 90px; color: var(--color-surface-invert, #FFF); font-family: 'Como', sans-serif; font-size: 90px; font-style: normal; font-weight: 900; line-height: 68px; letter-spacing: -1px; } .heading-second.dark { color: var(--color-surface-primary, #101010); } .heading-third { padding: 18px 0 0; color: var(--color-text-pure, #FFF); text-align: center; font-family: 'Montserrat', sans-serif; font-size: 48px; font-style: normal; font-weight: 700; line-height: 116%; } .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: 6px 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: absolute; top: 0; transform: translateY(-60px); left: 0; width: 100%; padding: 0; z-index: -1; height: 72px; opacity: 0; z-index: -1; position: fixed; top: 0; width: 100%; padding: 15px 0; opacity: 0; z-index: -1; transition: 0.5s, padding 1s; } header.sticky { position: fixed; transform: translateY(0px); opacity: 1; z-index: 27; transition: .3s ease-in-out; position: fixed; top: 0; left: 0; width: 100%; padding: 0; opacity: 1; z-index: 27; } 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; } .header { transition: .3s; } .header.black { background: var(--color-surface-pure, #000); background-blend-mode: darken; } .header.black .header-container::before { background: var(--color-surface-pure, #000); background-blend-mode: darken; } .header .download-btn { padding: 16px 32px; } .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; } .header .header-inner nav { margin-left: auto; display: flex; align-items: center; } .header .header-inner nav ul li { margin: 0 3.5px; } .header .header-inner nav ul li:last-of-type { margin-left: 18px; margin-right: 6px; } .header .header-inner nav ul li.mob-only.decor a { font-size: 16px; font-weight: 600; line-height: 24px; } .header .header-inner nav ul.header-menu { display: flex; } .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); } .header .header-inner nav .header-menu .header-menu-inner { max-height: 0; overflow: hidden; transition: max-height .2s ease-out; position: relative; } .opening-logo { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; padding: 31.75px 20px; background: linear-gradient(180deg, rgba(69, 65, 122, 0.7) 0%, rgba(83, 79, 147, 0.53) 32.87%, rgba(127, 120, 224, 0) 100%); background-blend-mode: multiply; z-index: 2; } .opening-logo img { width: 100%; max-width: 403px; max-height: 57px; } .opening-section { max-width: 100%; background-position: top; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; position: relative; padding: 0; background: #fff; border-radius: 0px 0px 200px 200px; background: linear-gradient(0deg, #F2B0F4 0%, #F2B0F4 100%), linear-gradient(to bottom right, #6443E8 0%, #62ADF7 30%, #B5E8AB 50%) bottom right/50% 50% no-repeat, linear-gradient(to bottom left, #6443E8 0%, #62ADF7 30%, #B5E8AB 50%) bottom left/50% 50% no-repeat, linear-gradient(to top left, #6443E8 0%, #62ADF7 30%, #B5E8AB 50%) top left/50% 50% no-repeat, linear-gradient(to top right, #6443E8 0%, #62ADF7 30%, #B5E8AB 50%) top right/50% 50% no-repeat; overflow: hidden; } .opening-section .outer-wrapper { height: 897px; background: linear-gradient(0deg, rgba(255, 144, 54, 0.57) 0%, rgba(255, 144, 54, 0.57) 100%), linear-gradient(0deg, rgba(63, 95, 128, 0.4) 0%, rgba(63, 95, 128, 0.4) 100%); background-blend-mode: soft-light, overlay; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); border-radius: 0px 0px 200px 200px; background: linear-gradient(0deg, #F2B0F4 0%, #F2B0F4 100%), linear-gradient(to bottom right, #6443E8 0%, #62ADF7 30%, #B5E8AB 50%) bottom right/50% 50% no-repeat, linear-gradient(to bottom left, #6443E8 0%, #62ADF7 30%, #B5E8AB 50%) bottom left/50% 50% no-repeat, linear-gradient(to top left, #6443E8 0%, #62ADF7 30%, #B5E8AB 50%) top left/50% 50% no-repeat, linear-gradient(to top right, #6443E8 0%, #62ADF7 30%, #B5E8AB 50%) top right/50% 50% no-repeat; } .opening-section .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; padding: 321px 0 50px; } .opening-section .heading-first { max-width: 780px; } .opening-section .video-loop { min-height: 100%; min-width: 100vw; max-width: 134%; left: 0; transform: translateX(-15%); } .opening-section .first-layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .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 { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; } .opening-section .download-buttons { display: flex; justify-content: flex-start; margin: 48px 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 .download-btn { margin: 0; } .opening-section .download-btn { opacity: 0; animation: .4s 1.2s forwards fadeInBottomToTopSoft; } .opening-section .outer-wrapper::before { display: block; width: 100%; height: 100%; position: absolute; background: url("./../images/hero-stars.svg") no-repeat 56% 54%; background-size: 93%; content: ''; z-index: 1; } .opening-section .outer-wrapper::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-blend-mode: soft-light, overlay; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); mix-blend-mode: plus-darker; border-radius: 0px 0px 200px 200px; } .opening-section .under-btn-text { margin-top: 10px; opacity: 0; animation: .4s 1.3s forwards fadeInBottomToTopSoft; } @keyframes a { 0% { transform: scale(1); } to { transform: scale(0.8); } } .modkit-section { position: relative; margin: 0 auto; background: #84bbff url("./../images/MODKIT_Logo_Icon_Color.webp") no-repeat 50% 50%; background-size: cover; } .modkit-section .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; padding: 110px 20px 13px; max-width: 1150px; width: 100%; margin: 0 auto; z-index: 4; } .modkit-section .modkit-logo { width: 80px; margin-bottom: 20px; } .modkit-section .heading-second.como { margin: 47px auto 29px; } .modkit-section .text-main { max-width: 544px; width: 100%; font-family: Lato, sans-serif; color: #fff; } .modkit-section .img-container { position: relative; width: 100%; margin: 0 auto; max-width: 1920px; } .modkit-section .img-container .laptop { position: relative; } .modkit-section .img-container .laptop.mob { display: none; } .modkit-section .img-container .laptop-bg { top: 0; left: 50%; transform: translateX(-50%); position: absolute; max-width: 1367px; margin: 0 auto; } .features-section { position: relative; background: #fff; margin-top: -49px; } .features-section .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 96px 20px 90px; width: 100%; max-width: 1440px; z-index: 2; } .features-section .content-wrapper .features-video { overflow: hidden; margin-bottom: 40px; } .features-section .content-wrapper .features-video video { border-radius: 24px; cursor: pointer; } .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: 18px 0 7px; color: var(--color-text-pure, #000); 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); } .features-section .download-btn.border { border: 1px solid var(--color-border-secondary, #606060); color: #606060; } .features-section .download-btn.border svg { fill: #606060; transition: .3s ease-in-out; } .features-section .download-btn.border:hover { color: #fff; border: 1px solid #F18536; } .features-section .download-btn.border:hover svg { fill: #fff; } .categories-section { position: relative; background: #fff; } .categories-section * { box-sizing: border-box; } .categories-section .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 128px 20px 165px; width: 100%; max-width: 1436px; } .categories-section .content-wrapper.left { align-items: flex-start; text-align: left; } .categories-section .text-main { max-width: 609px; margin: 20px 0 15px; color: var(--InZOI-Grey, #615F7A); text-align: left; } .categories-section .cards { display: flex; margin-top: 48px; position: relative; gap: 24px; width: 100%; } .categories-section .card { position: relative; max-width: 688px; 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-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 8px; } .categories-section .card-item-img { position: relative; align-self: stretch; } .categories-section .card-item-img .desktop { display: flex; } .categories-section .card-item-img .mob { display: none; } .categories-section .card-item-title { padding: 33px 0 15px; 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); 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-align: center; } .categories-section .card-item-text a { 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); 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); } .roadmap-section { position: relative; background: white; overflow: hidden; } .roadmap-section .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin: 0 auto; padding: 70px 20px 143px 20px; width: 100%; max-width: 1434px; } .roadmap-section .content-wrapper.left { align-items: flex-start; text-align: left; } .roadmap-section .text-main { margin: 24px 0 0; color: #615f7a; } .roadmap-section .roadmap-wrapper { display: flex; position: relative; width: 100%; padding: 94px 0 23px; } .roadmap-section .roadmap-wrapper.desktop { justify-content: space-between; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .roadmap-section .roadmap-item { position: relative; max-width: 544px; width: 100%; display: flex; flex-direction: column; justify-content: space-between; } .roadmap-section .roadmap-item-inner { display: flex; flex-direction: column; flex-grow: 1; } .roadmap-section .roadmap-item:first-of-type { max-width: 567px; width: 100%; } .roadmap-section .roadmap-item:nth-of-type(2), .roadmap-section .roadmap-item:last-of-type { max-width: 413px; width: 100%; } .roadmap-section .roadmap-item:last-of-type .roadmap-item-bottom { margin-right: 0; } .roadmap-section .roadmap-item-data { color: var(--color-surface-secondary, #202020); font-family: var(--font-family-brand, Montserrat); font-size: var(--font-size-400, 16px); font-style: normal; font-weight: var(--font-weight-medium, 500); line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-regular, 1.2px); text-transform: uppercase; } .roadmap-section .roadmap-item-point { display: flex; justify-content: center; align-items: center; position: relative; background: white; border: 1px solid #615f7a; width: 29px; min-width: 29px; height: 29px; min-height: 29px; border-radius: 50%; } .roadmap-section .roadmap-item-point::before { content: ''; width: 1px; height: 42px; background-color: #615f7a; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); } .roadmap-section .roadmap-item-point::after { content: ''; width: 567px; height: 2px; background-color: #615f7a; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); } .roadmap-section .roadmap-item-point span { display: flex; width: 21px; min-width: 21px; height: 21px; min-height: 21px; background: #615f7a; border: 1px solid #fff; border-radius: 50%; } .roadmap-section .roadmap-item-point-block { position: relative; margin-bottom: 21px; padding: 35px 0 41px; } .roadmap-section .roadmap-item-top { overflow: hidden; } .roadmap-section .roadmap-item-bottom { border-radius: 24px; margin-right: 24px; display: flex; flex-direction: column; flex-grow: 1; background: var(--color-surface-invert, #FFF); box-shadow: 16.927px 42.318px 59.245px 16.927px rgba(46, 36, 82, 0.15); } .roadmap-section .roadmap-item-bottom .line-decorated { display: flex; justify-content: space-between; position: relative; border-radius: 17px 17px 0px 0px; overflow: hidden; } .roadmap-section .roadmap-item-bottom .line-decorated span { display: flex; flex-grow: 1; border-radius: 0px 17px 0px 20px; } .roadmap-section .roadmap-item-bottom .heading-third { display: flex; justify-content: flex-start; color: #FFF; font-family: 'Como', sans-serif; font-size: var(--space-800, 32px); font-style: normal; font-weight: 900; line-height: var(--font-line-height-700, 28px); letter-spacing: var(--font-letter-spacing-default, 0px); max-width: 300px; width: 100%; padding: 27px 10px 31px 26px; border-radius: 17px 0px 20px 0px; } .roadmap-section .roadmap-item-bottom.orange { border: 5px solid var(--color-surface-brand-cf, #EB622B); } .roadmap-section .roadmap-item-bottom.orange .line-decorated .heading-third { background: var(--color-surface-brand-cf, #EB622B); } .roadmap-section .roadmap-item-bottom.orange .line-decorated span { display: flex; flex-grow: 1; border-radius: 0px 17px 0px 20px; background: var(--color-surface-brand-cf, #EB622B); } .roadmap-section .roadmap-item-bottom.lilac { border: 5px solid #F2B0F4; } .roadmap-section .roadmap-item-bottom.lilac .line-decorated .heading-third { background: #F2B0F4; } .roadmap-section .roadmap-item-bottom.lilac .line-decorated span { display: flex; flex-grow: 1; border-radius: 0px 17px 0px 20px; background: #F2B0F4; } .roadmap-section .roadmap-item-bottom.blue { border: 5px solid #84BBFF; } .roadmap-section .roadmap-item-bottom.blue .line-decorated .heading-third { background: #84BBFF; } .roadmap-section .roadmap-item-bottom.blue .line-decorated span { display: flex; flex-grow: 1; border-radius: 0px 17px 0px 20px; background: #84BBFF; } .roadmap-section .roadmap-item-container { display: flex; padding: 32px 10px 27px 28px; align-items: flex-start; gap: 32px; align-self: stretch; min-height: 199px; } .roadmap-section .roadmap-item-container-list li { display: flex; align-items: flex-start; color: #615F7A; 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-align: left; } .roadmap-section .roadmap-item-container-list li::before { margin-top: 13px; margin-right: 11px; content: ''; display: block; width: 7px; min-width: 7px; min-height: 7px; height: 7px; background: #615F7A; border-radius: 50%; } .roadmap-wrapper.desktop { display: flex; } .roadmap-wrapper.mob { display: none; } .roadmap-test-wrapper { position: relative; } .swiper-wrapper { display: flex; margin: 0; touch-action: pen-y; height: 100% !important; } .roadmap-item-point.last::after { display: none; } .roadmap-item:last-child .roadmap-item-point::after { display: none; } .swiper-one { padding-right: 0 !important; margin-right: 0 !important; } .swiper-slide { width: 100% !important; margin-right: 0 !important; } .swiper-slide, .swiper-wrapper, .swiper-one { box-sizing: border-box; } .swiper-one { overflow: hidden; } .hackathon-section { position: relative; background: white; } .hackathon-section .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 43px 20px 128px; width: 100%; max-width: 1434px; } .hackathon-section .content-wrapper-inner { position: relative; display: flex; flex-direction: column; align-items: center; border-radius: 36px; background: #FFF; box-shadow: 16.927px 42.318px 59.245px 16.927px rgba(46, 36, 82, 0.15); overflow: hidden; } .hackathon-section .hackathon-bg.desktop { display: flex; border-top-left-radius: 36px; border-top-right-radius: 36px; } .hackathon-section .hackathon-bg.tablet { display: none; } .hackathon-section .hackathon-bg.mob { display: none; } .hackathon-section .hackathon-bg img { max-width: 100%; } .hackathon-section .hackathon-text-container { display: flex; flex-direction: column; position: relative; width: 100%; max-width: 688px; padding: 50px 20px 46px; align-items: flex-start; } .hackathon-section .heading-third { padding-top: 0; max-width: 275px; color: var(--InZOI-Dark-blue, #101010); font-size: var(--font-size-600, 24px); font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-800, 32px); letter-spacing: var(--font-letter-spacing-default, 0px); text-align: left; } .hackathon-section .text-main { width: 100%; max-width: 577px; padding: 0 7px; color: var(--color-text-invert, #000); font-family: Lato, sans-serif; font-size: var(--font-size-450, 18px); line-height: var(--font-line-height-700, 28px); letter-spacing: var(--font-letter-spacing-default, 0px); text-align: left; } .hackathon-section .text-main { color: #615f7a; } .hackathon-section .download-btn.border { margin: 0; padding: 11px 31px; color: #9f9f9f; border: 1px solid var(--color-border-tertiary, #606060); } .hackathon-section .download-btn.border:hover { color: #fff; border: 1px solid #F18536; background: #F18536; } .about-section { position: relative; background: #000; } .about-section .content-wrapper { position: relative; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; padding: 168px 20px 128px; width: 100%; max-width: 1600px; gap: 119px; } .about-section .about-item { display: flex; flex-direction: column; align-items: center; max-width: 640px; width: 100%; } .about-section .about-item-img { height: 96px; } .about-section .about-item .heading-third { padding: 18px 0 0; color: var(--color-text-pure, #FFF); text-align: center; } .about-section .about-item-text { padding: 26px 0 10px; color: var(--color-text-pure, #FFF); 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); } .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: 24px 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: 103px 0 10px; } .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; } .bottom-section .heading-first { max-width: 700px; margin: 34px auto 37px; } .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; } .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: 22px 0 0 0; } } @media screen and (min-width: 1025px) { .categories-section .card-item-img { height: 407px; } .categories-section .card-item-img img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 582px; width: 100%; max-inline-size: none; max-block-size: none; } } @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) { .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) { .hackathon-section .hackathon-text-container { flex-direction: row; width: 100%; max-width: 1152px; padding: 64px 20px; justify-content: space-between; align-items: flex-start; } } @media only screen and (min-width: 1921px) { .scroll-down-block { max-height: 70px; } } @media only screen and (min-width: 3000px) { .opening-section .video-loop { max-width: 146%; left: 0; transform: translateX(-8%); } } @media only screen and (min-width: 3600px) { .opening-section .video-loop { max-width: 146%; left: 0; transform: translateX(0%); } } @media only screen and (max-width: 1760px) { .footer-fire { top: 20px; right: -3vw; } } @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: 1360px) { .footer-col p { max-width: 600px; } .footer-fire { top: 20px; right: -3vw; } } @media only screen and (max-width: 1300px) { .opening-section .video-loop { max-width: 146%; left: 17%; transform: translateX(-17%); } } @media only screen and (max-width: 1250px) { .header-link.border { padding: 7px 12px; } .header .header-inner nav ul li { margin: 0; } } @media only screen and (max-width: 1110px) { .roadmap-section .content-wrapper { flex-direction: column; align-items: center; padding: 94px 20px 20px; } } @media only screen and (max-width: 1100px) { .under-btn-text { margin-top: 12px; } .heading-second { color: var(--color-background-general, #000); text-align: center; font-family: var(--font-family-brand, Montserrat); font-size: var(--font-size-1100, 44px); font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-1300, 52px); letter-spacing: var(--font-letter-spacing-default, 0px); } .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; } .header .header-inner { padding: 28px 14px 17px 16px; } .header .hamburger-menu-button { display: block; } .header .submenu-icon { display: flex; } .header .header-inner .action-items { width: fit-content; margin: auto auto 10vh; display: flex; gap: 8px; } .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; } .header .header-menu-inner { background: #000; } .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ж; } .header .header-inner nav ul li { margin-left: unset; display: flex; justify-content: flex-start; position: relative; width: 100%; margin: 0; flex-direction: column; } .header .header-inner nav ul li a { display: flex; align-items: center; } .header .header-inner nav ul li a.download-btn { max-width: 224px; } .header .header-inner nav ul li a.border { display: none; } @keyframes quick-hide-mobile-menu { 0% { opacity: 0; } to { opacity: 0; } } .header .header-inner nav.is-open { opacity: 1; background-color: #000; } .header .header-inner nav:not(.is-open) { pointer-events: none; } .header .header-inner nav ul::-webkit-scrollbar { width: 4px; height: 4px; background-color: #1E1E1E; } .header .header-inner nav ul::-webkit-scrollbar-thumb { border-width: 0; background-color: #1E1E1E; background-clip: padding-box; } .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; border-radius: 0px 0px 48px 48px; } .opening-section .content-wrapper { padding: 251px 0 50px; } .opening-section .heading-first { max-width: 600px; } .opening-section .video-loop { max-height: 100%; max-width: unset; min-height: 100%; position: absolute; left: 0; left: 50%; transform: translateX(-50%); } .opening-section .text-main { order: 2; margin-top: 27px; font-size: var(--font-size-400, 16px); line-height: var(--font-line-height-600, 24px); } .opening-section .download-buttons { flex-direction: column; align-items: center; width: 100%; margin: 46px auto 0; order: 3; } .opening-section .download-btn { display: flex; } .opening-section .under-btn-text { order: 4; } .roadmap-section .roadmap-wrapper.desktop { display: none; } .roadmap-section .roadmap-wrapper.mob { display: flex; padding: 46px 0 23px; } .roadmap-section .roadmap-item { height: 100%; } .roadmap-section .roadmap-item:first-of-type { padding-left: 20px; } .roadmap-section .roadmap-item-bottom { box-shadow: none; } .roadmap-wrapper.desktop { display: none; } .roadmap-wrapper.mob { display: flex; padding-left: 20px; } .scroll-down-block { order: 5; margin: 42px auto 38px; } } @media screen and (max-width: 1100px) { .opening-section .outer-wrapper { height: 656px; border-radius: 0px 0px 48px 48px; } .opening-section .outer-wrapper::before { display: none; } .opening-section .outer-wrapper::after { border-radius: 0px 0px 48px 48px; } } @media only screen and (max-width: 1024px) { .text-main { color: var(--InZOI-Grey, #615F7A); text-align: center; font-family: var(--font-family-default, Lato); 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); /* 150% */ letter-spacing: var(--font-letter-spacing-default, 0px); } .heading-third { text-align: center; font-size: 32px; line-height: 44px; } .to-top { margin: 35px auto 0; font-size: 16px; } .to-top-section .content-wrapper { padding-top: 0; } .opening-logo { padding: 20.75px 20px; } .opening-logo img { max-width: 250.8px; max-height: 48px; } .modkit-section .content-wrapper { padding: 51px 20px 0; } .modkit-section .modkit-logo { width: 40px; margin-bottom: 15px; } .modkit-section .heading-second.como { margin: 0 auto 11px; } .modkit-section .text-main { max-width: 444px; font-size: 16px; line-height: 24px; } .modkit-section .img-container { margin: 8px auto -30px; } .features-section { margin-top: 0; } .features-section .content-wrapper { gap: 0; padding: 20px 20px 40px; } .features-section .content-wrapper .features-video { width: unset; margin-bottom: 43px; } .features-section .content-wrapper .features-container { justify-content: space-between; gap: 35px; } .features-section .content-wrapper .features-wrapper { flex-direction: column; gap: 0; width: 100%; max-width: 786px; margin: 0 auto 32px; padding: 74px 0 0; } .categories-section .content-wrapper { padding: 96px 20px 95px; } .categories-section .content-wrapper.left { align-items: center; text-align: center; } .categories-section .text-main { max-width: 550px; padding: 0 3px 41px; text-align: center; } .categories-section .cards { justify-content: center; margin-top: 0; gap: 30px; } .categories-section .card { border-radius: 18.951px 18.951px 32px 32px; max-width: 376px; } .categories-section .card-item-title { padding: 24px 0 3px; font-size: var(--font-size-600, 24px); line-height: var(--font-line-height-800, 32px); } .categories-section .card-item-text { padding: 0 0 8px; font-size: var(--font-size-400, 16px); line-height: var(--font-line-height-600, 24px); } .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 { gap: 0; padding: 12px 20px 17px; } .categories-section .card-item-box-line { width: 123px; } .categories-section .card-item-box-line.left { width: 114px; padding: 0 17px 0 0; } .roadmap-section { height: auto; } .roadmap-section .content-wrapper.left { align-items: flex-start; text-align: left; max-width: 824px; } .roadmap-section .text-main { font-size: 18px; } .roadmap-section .roadmap-item-inner { padding-left: 20px; } .roadmap-section .roadmap-item-data { font-size: var(--font-size-350, 14px); font-style: normal; font-weight: var(--font-weight-medium, 500); line-height: var(--font-line-height-500, 20px); letter-spacing: var(--font-letter-spacing-regular, 1.2px); text-transform: uppercase; } .roadmap-section .roadmap-item-point-block { padding: 24px 0 41px; } .hackathon-section .content-wrapper { padding: 113px 20px 127px; } .hackathon-section .content-wrapper-inner { flex-direction: column; align-items: center; } .hackathon-section .hackathon-bg.desktop { display: none; max-width: 786px; } .hackathon-section .heading-third { padding: 0; } .hackathon-section .text-main { padding: 23px 0 24px 0; } .about-section .content-wrapper { gap: 24px; padding: 86px 20px 0; } .about-section .about-item { max-width: 380px; } .about-section .about-item .heading-third { margin-top: -7px; padding: 0; color: var(--color-text-pure, #FFF); text-align: center; font-family: 'Montserrat', sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: 44px; } .about-section .about-item-text { padding: 21px 0 10px; } .faq-section .content-wrapper { max-width: 825px; padding: 65px 20px 92px; } .faq-section .heading-second { margin: 40px auto 12px; } .faq-section .heading-third { padding: 7px 0 0; } .faq-section .heading-third { padding: 0; } .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 .first-layer { display: none; } .bottom-section .content-wrapper { padding: 0 0 14px; } .bottom-section::before { border-radius: 100px 100px 0px 0px; background: linear-gradient(180deg, #6443E8 0%, #62ADF7 100%), #000; } .bottom-section .logo-bottom { padding: 65px 0 0; } .bottom-section .logo-bottom.desktop { display: none; } .bottom-section .logo-bottom.mob { display: flex; } .bottom-section .stickers-bottom { margin: 37px auto 69px; } .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; } .bottom-section .heading-first { max-width: 500px; margin: 34px auto 37px; text-align: center; font-size: 56px; font-style: normal; font-weight: 900; line-height: 95%; letter-spacing: -0.5px; } .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) { .heading-first { text-align: center; font-size: 64px; font-weight: 900; line-height: 95%; letter-spacing: -0.5px; } .heading-second.como { color: var(--color-surface-invert, #FFF); text-align: center; font-size: 36px; font-style: normal; font-weight: 900; line-height: 41.6px; /* 115.556% */ letter-spacing: var(--font-letter-spacing-default, 0px); } .heading-second.como span { color: var(--color-surface-invert, #FFF); font-size: 48px; font-style: normal; font-weight: 900; line-height: 95%; letter-spacing: -0.533px; } .features-section .content-wrapper .features-block { margin-bottom: 64px; } .features-section .content-wrapper .features-block-item-title { padding: 24px 0 7px; } .categories-section .card-item-container { padding: 0 24px 17px; } .categories-section .card-item-img { height: unset; height: 258px; } .categories-section .card-item-img .desktop { display: none; } .categories-section .card-item-img .mob { display: flex; } .categories-section .card-item-img img { max-width: 100%; width: 100%; } .categories-section .card-item-box-line.right { padding: 0 8px 0 32px; } .categories-section .card-item-box-line-text { font-size: var(--font-size-400, 16px); line-height: var(--font-line-height-600, 24px); } .video-loop.desktop { display: none; } .video-loop.mob { display: flex; } } @media only screen and (max-width: 880px) { .roadmap-test-wrapper { max-width: 100%; width: 100%; overflow-x: scroll; } } @media only screen and (max-width: 600px) { .text-main { color: var(--InZOI-Grey, #615F7A); text-align: center; /* Body/Regular/L */ 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); } .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); color: var(--color-background-general, #000); text-align: center; } .modkit-section .content-wrapper { padding: 38px 20px 0; } .modkit-section .modkit-logo { width: 40px; margin-bottom: 19px; } .modkit-section .heading-second.como { margin: 0 auto 9px; } .modkit-section .img-container { margin: 8px auto -26px; } .modkit-section .img-container .laptop.desktop { display: none; } .modkit-section .img-container .laptop.mob { display: flex; max-width: 100%; margin: -22px 0 0; } .features-section .content-wrapper { gap: 0; padding: 65px 20px 40px; } .features-section .content-wrapper .features-video { margin-bottom: 40px; } .features-section .content-wrapper .features-container { justify-content: flex-start; gap: 35px; } .features-section .content-wrapper .features-wrapper { flex-direction: column; gap: 0; margin: 0 auto 71px; padding: 31px 0 0; } .categories-section .content-wrapper { padding: 95px 20px 97px; } .categories-section .cards { gap: 32px; justify-content: center; flex-wrap: wrap; margin-top: 0; } .roadmap-section .content-wrapper.left { align-items: center; text-align: center; } .roadmap-section .text-main { font-size: 16px; } .roadmap-section .roadmap-wrapper.mob { padding: 43px 0 23px; } .roadmap-section .roadmap-item-inner { padding-left: 20px; } .roadmap-section .roadmap-item-bottom .heading-third { padding: 27px 10px 34px 26px; } .hackathon-section .content-wrapper { padding: 112px 20px 62px; } .hackathon-section .hackathon-bg.mob { display: flex; max-width: 100%; } .about-section .content-wrapper { gap: 24px; padding: 86px 20px 0; } .about-section .about-item { margin-bottom: 73px; } .faq-section .content-wrapper { padding: 29px 20px 95px; } .bottom-section::before { border-radius: 96px 96px 0 0; } .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; } .bottom-section .heading-first { max-width: 300px; line-height: 39px; font-size: 40px; } .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) { .heading-first { text-align: center; font-size: 40px; line-height: 39px; letter-spacing: -0.5px; } .heading-second.como { color: var(--color-surface-invert, #FFF); text-align: center; font-size: 32px; font-style: normal; font-weight: 900; line-height: 39px; /* 121.875% */ letter-spacing: var(--font-letter-spacing-default, 0px); } .heading-second.como span { color: var(--color-surface-invert, #FFF); font-family: Como; font-size: 40px; font-style: normal; font-weight: 900; line-height: 39px; letter-spacing: -0.5px; } .features-section .content-wrapper .features-block { margin-bottom: 24px; } .categories-section .card-item-container { padding: 0 18px 17px; } } @media only screen and (max-width: 365px) { .download-btn.border { padding: 11px 10px; } } @media only screen and (max-width: 360px) { .faq-section .faq-list li .question { padding: 24px 52px 24px 0; } } @media only screen and (max-width: 350px) { .header-logo img { max-width: 240px; } } @media only screen and (min-width: 601px) and (max-width: 1024px) { .hackathon-section .hackathon-bg.tablet { display: flex; max-width: 786px; } }