@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; } @font-face { font-family: Madera; src: url("./../fonts/MaderaRegular.ttf"); font-weight: 400; } @font-face { font-family: Madera; src: url("./../fonts/MaderaMedium.ttf"); font-weight: 500; } @font-face { font-family: Madera; src: url("./../fonts/MaderaBold.ttf"); font-weight: 700; } @font-face { font-family: Madera; src: url("./../fonts/MaderaExtraBold.ttf"); font-weight: 800; } body { outline: none; background: #000; margin: 0; padding: 0; display: flex; min-height: 100vh; flex-direction: column; } a { cursor: pointer; } * { box-sizing: border-box; } .main-section { display: flex; flex-direction: column; position: relative; } .main-section .content-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 20px 0; text-align: center; } .main-section .content-wrapper__inner { display: flex; align-items: flex-start; flex-direction: column; width: 100%; max-width: 1250px; padding: 50px 0; } .main-section .ty-logo { display: flex; justify-content: center; min-width: 160px; height: 52px; margin-bottom: 24px; } .main-section .app-logo img { height: 53px; margin-bottom: 36px; } .main-section .heading-first { color: #FFF; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 700; line-height: 125%; margin-bottom: 43px; } .main-section .heading-second { color: #E5E5E5; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 500; line-height: 28px; } .main-section .ty-content { width: 100%; max-width: 586px; } .main-section .ty-content-line { display: flex; } .main-section .ty-content-left { width: 264px; min-width: 264px; } .main-section .ty-content-right .heading-second { margin-top: 32px; } .main-section .ty-content.one .ty-content-line { display: flex; } .main-section .ty-content.one .ty-content-line:first-of-type { flex-direction: column; align-items: center; justify-content: center; width: 100%; margin: 0 auto; padding-bottom: 44px; border-bottom: 1px solid #4D4D4D; } .main-section .ty-content.one .ty-content-line:nth-of-type(2) { justify-content: center; margin-bottom: 36px; } .main-section .ty-content.two { display: flex; flex-direction: column; align-items: center; margin: 0 auto; } .main-section .ty-content.two .ty-content-line { flex-direction: column; align-items: center; width: 100%; max-width: 264px; } .main-section .ty-content.two .ty-content-line:nth-of-type(2) { display: flex; flex-flow: row; align-items: flex-start; justify-content: center; margin: 36px auto; } .main-section .ty-content.two .ty-content-line:nth-of-type(2) .ty-content-line-item { display: flex; flex-direction: column; align-items: flex-start; padding: 0 15px; } .main-section .ty-content.two .ty-content-line:nth-of-type(2) .ty-content-line-item:first-of-type { border-right: 1px solid #3D3D3D; } .main-section .ty-content.two .ty-content-line-title { padding-top: 12px; color: #fff; font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; line-height: normal; } .main-section .ty-content.two .ty-content-line-text { color: #7E7E7E; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; line-height: normal; text-transform: capitalize; } .main-section .ty-content.two .download-btn { margin-top: 36px; } .main-section .ty-content.two .video-loop { margin-bottom: 36px; } .main-section .ty-content.three { flex-direction: column; min-width: 452px; max-width: 600px; width: 100%; margin-top: 5px; } .main-section .ty-content.three .ty-content-line { flex-direction: column; align-items: center; } .main-section .ty-content.three .ty-content-line .img-logo { margin-top: 22.6px; } .main-section .ty-content.three .heading-first { margin-top: 178.66px; margin-bottom: 41px; color: #fff; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 39.55px; font-weight: 700; line-height: 100%; } .main-section .ty-content.three .img-timeline { margin-top: -47px; } .main-section .ty-text { display: inline-block; margin-top: 16px; color: #B2B2B2; font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; } .main-section .video-loop { width: 100%; margin-bottom: 0; } .main-section .download-btn { display: inline-flex; justify-content: center; align-items: center; height: 48px; margin-top: 16px; padding: 12px 32px; background: #D34037; color: #FFF; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; text-transform: uppercase; cursor: pointer; transition: .2s ease-in-out; } .main-section .download-btn:hover { background: #FF4655; } .buff.three .main-section .app-logo img { margin-bottom: 31px; } .buff.three .main-section .heading-first { margin-bottom: 33px; } .buff.three .main-section .download-btn { margin-top: 58px; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; padding: 0; overflow: hidden; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); z-index: 4; } /* Modal Content */ .modal-line { display: flex; align-items: center; margin: 0; } .modal-content { position: relative; margin: auto; padding: 24px; width: 100%; max-width: 436px; max-height: 342px; height: 100%; overflow: hidden; background: #202020 url("./../images/popup-bg.png") no-repeat 50% 100%; background-size: 100%; box-sizing: border-box; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5); } .modal-content * { box-sizing: border-box; } .modal-content .popup-bg { position: absolute; right: 0; bottom: 0; z-index: 1; } .modal-content .first-heading { margin: 0 0 0 16px; font-size: 18px; color: #E5E5E5; font-weight: 400; text-align: left; font-family: 'Lato', sans-serif; line-height: 132%; } .modal-content .modal-block { height: 100%; display: flex; flex-direction: column; justify-content: stretch; } .modal-content .modal-block-inner { display: flex; flex-direction: column; position: relative; z-index: 1; padding: 0px 0 20px; } .icon-close { position: absolute; width: 30px; height: 30px; top: 0; right: 0; z-index: 1; cursor: pointer; } .modal-content .popup-text { margin: 8px 0; padding: 0; color: #B2B2B2; font-family: Lato, sans-serif; text-align: left; font-size: 16px; font-weight: 400; line-height: 150%; } .footer { display: flex; justify-content: center; align-items: center; background: #171717; width: 100%; } .footer .content-wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1325px; margin: 0 auto; padding: 11px 20px; } .footer .footer-line-left span { color: #909090; font-family: 'Madera', sans-serif; font-size: 14px; font-weight: 400; line-height: normal; } .footer .footer-socials { display: flex; align-items: center; } .footer .footer-socials-item { margin-left: 10px; min-width: 24px; cursor: pointer; } .footer .footer-socials-item svg circle { fill: #909090; transition: .2s ease-in-out; } .footer .footer-socials-item:hover svg circle { fill: #fff; } .buff { display: flex; flex-direction: column; position: relative; max-width: 100%; flex: 1; background: url("./../images/ow2021bg.webp"), url("./../images/sparksbg.webp") no-repeat 50% 50%; background-size: cover; } @media only screen and (min-width: 660px) { .main-section .content-wrapper__inner { flex-direction: row; justify-content: space-between; padding: 58px 0 64px; } } @media only screen and (min-width: 1025px) { .main-section .content-wrapper { padding: 72px 20px 35px; } .main-section .ty-logo { margin-bottom: 48px; } .main-section .ty-content-left { margin-right: 32px; } .main-section .ty-content-right { max-width: 285px; text-align: left; } .main-section .ty-content.one .ty-content-line:first-of-type { flex-direction: row; align-items: flex-start; } .main-section .ty-content.one .ty-content-line:nth-of-type(2) { justify-content: flex-end; margin-bottom: 0; } .main-section .video-loop { margin-top: 0; } .footer { max-height: 52px; } }