@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; } .averia-serif-libre-light { font-family: "Averia Serif Libre", system-ui; font-weight: 300; font-style: normal; } body { outline: none; background: #0D0D04; margin: 0; padding: 0; } @font-face { font-family: MasonSansAlternateBold; font-family: 'MasonSansAlternateBold'; src: url("./../fonts/MasonSansAlternateBold/MasonSansAlternateBold.otf"); font-weight: 700; } html { font-family: "Averia Serif Libre", system-ui; } a { cursor: pointer; } * { box-sizing: border-box; font-family: "Averia Serif Libre", system-ui; color: #FFF4D3; } main { position: relative; max-width: 100%; overflow: hidden; } .heading-first { color: #C7AA89; text-align: center; font-family: 'MasonSansAlternateBold'; font-size: 32px; font-style: normal; font-weight: 700; line-height: 108%; text-transform: uppercase; } .decorated-line { position: absolute; width: 100%; top: 0; display: flex; justify-content: center; align-items: center; max-block-size: unset; max-inline-size: unset; transform: translateY(-50%); z-index: 1; } .decorated-line.bottom { top: unset; bottom: 0; transform: translateY(50%); } .download-btn { display: flex; justify-content: center; align-items: center; position: relative; height: 64px; white-space: nowrap; } .download-btn svg .main-stop { stop-color: transparent; transition: .2s ease-in-out; } .download-btn:hover svg .main-stop { transition: .2s ease-in-out; stop-color: #fff; } .text-main { color: #FFF4D3; font-feature-settings: 'liga' off; font-family: "Averia Serif Libre"; font-size: 17px; font-style: normal; font-weight: 300; line-height: 174%; } .hero-section { position: relative; } .hero-section .first-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .hero-section .video-loop.bg { position: absolute; bottom: 0; min-height: 100%; } .hero-section .heading-first { color: #FFF4D3; max-width: 600px; margin-bottom: 35px; } .hero-section .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; padding: 163px 20px 80px; z-index: 2; } .hero-section .content-wrapper .hero-text { color: #C7AA89; text-align: center; font-feature-settings: 'liga' off; font-family: "Averia Serif Libre"; font-size: 13px; font-style: normal; font-weight: 400; line-height: 174%; letter-spacing: 6.5px; text-transform: uppercase; } .hero-section .content-wrapper .hero-text-small { margin-top: 23.1vh; margin-bottom: 9px; color: #FFF4D3; text-align: center; font-family: "Averia Serif Libre"; font-size: 15px; font-style: normal; font-weight: 300; line-height: 180%; letter-spacing: 0.75px; } .hero-section .content-wrapper .hero-logo { height: 123.5px; margin: 14px auto 20px; } .hero-section .video-loop.wolf { position: absolute; height: 91%; height: 895px; right: -80px; bottom: 11px; mix-blend-mode: lighten; } .hero-section .btn-link { position: relative; cursor: pointer; } .hero-section .btn-link img { max-width: 100%; } .hero-section .btn-link .img-desktop { display: flex; } .hero-section .btn-link .img-mob { display: none; } .giveaway-section { position: relative; width: 100%; max-width: 100%; background: url("./../images/GiveawayVisual-general.webp") no-repeat 100% 100%; background-size: contain; } .giveaway-section .content-wrapper { display: flex; flex-direction: column; align-items: flex-start; position: relative; margin: 0 auto; padding: 162px 20px 139px; max-width: 1240px; width: 100%; z-index: 3; } .giveaway-section .content-wrapper-inner { display: flex; justify-content: space-between; } .giveaway-section .text-main { max-width: 509px; margin: 15px 0 5px; } .giveaway-section .giveaway-bg-mob { display: none; } .btn-copy { display: flex; justify-content: center; align-items: center; width: 257px; height: 64px; position: relative; padding: 8px 12px; color: #E13426; text-align: center; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; text-transform: uppercase; border: 2px dashed #E13426; background: transparent; transition: .2s ease-in-out; cursor: pointer; } .btn-copy span { text-align: center; /* CTA */ font-family: MasonSansAlternateBold; font-size: 24px; font-weight: 700; line-height: 100%; text-transform: uppercase; } .btn-copy span.copied { display: none; transition: .2s ease-in-out; color: #42D5E9; } .btn-copy span.static { display: flex; transition: .2s ease-in-out; color: #E13426; } .btn-copy:hover { border: 2px dashed #E13426; background: #181809; } .btn-copy.copied { color: #42D5E9; border: 2px dashed #42D5E9; background: #181809; } .btn-copy.copied span.copied { display: flex; transition: .2s ease-in-out; } .btn-copy.copied span.static { transition: .2s ease-in-out; display: none; } .line-links { display: flex; margin: 11px 0; align-items: center; position: relative; } .line-links span { display: block; margin: 0 8px; color: #C7AA89; font-family: "Averia Serif Libre"; font-size: 15px; font-style: normal; font-weight: 300; line-height: 180%; letter-spacing: 0.75px; } .line-links-item { display: inline-block; color: #C7AA89; font-family: "Averia Serif Libre"; font-size: 15px; font-style: normal; font-weight: 300; line-height: 180%; letter-spacing: 0.75px; text-decoration-line: underline; cursor: pointer; z-index: 1; } .reviews-section { position: relative; width: 100%; max-width: 100%; background: url("./../images/Testimonial_BG.webp") no-repeat 50% 50%; background-size: cover; } .reviews-section .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; margin: 0 auto; padding: 100px 20px 50px; max-width: 1240px; width: 100%; position: relative; z-index: 1; } .reviews-section .content-wrapper-inner { display: flex; justify-content: center; margin: 68px auto 70px; width: 100%; } .reviews-section .reviews-item { margin: 0 39px; } .reviews-section .reviews-item-title { display: flex; margin-bottom: 10px; color: #FFF4D3; text-align: center; font-feature-settings: 'liga' off; font-family: 'MasonSansAlternateBold'; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; } .reviews-section .reviews-item-text { color: #FFF4D3; text-align: center; font-family: "Averia Serif Libre"; font-size: 15px; font-style: normal; font-weight: 300; line-height: 180%; letter-spacing: 0.75px; } .video-section { position: relative; width: 100%; max-width: 100%; background: #0D0D04; } .video-section .decorated-line { z-index: 3; } .video-section .content-wrapper { display: flex; justify-content: space-between; position: relative; margin: 3px auto 0; padding: 186px 20px 135px; max-width: 1240px; width: 100%; z-index: 4; } .video-section .content-item.video { max-width: 612px; width: 50%; display: flex; justify-content: flex-end; } .video-section .content-item.text { position: relative; text-align: left; max-width: 510px; width: 50%; margin-left: 78px; display: flex; flex-direction: column; align-items: flex-start; } .video-section .content-item.text .heading-first { text-align: left; } .video-section .content-item.text .text-main { margin: 16px 0 24px 0; } .ride-section { position: relative; width: 100%; max-width: 100%; background: #0D0D04 url("./../images/Bottom-section-visual-mobile.webp") no-repeat 50% 100%; background-size: cover; } .ride-section .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; margin: 0 auto; padding: 120px 20px 83px; max-width: 486px; width: 100%; z-index: 1; } .ride-section .dwarven-logo { width: 146px; margin-bottom: 30px; } .ride-section .text-main { padding: 18px 0 23px; text-align: center; } .socials-section { position: relative; } .socials-section .content-wrapper { position: relative; display: flex; flex-direction: column; padding: 159px 0 50px; } .socials-section .content-wrapper-inner { display: flex; justify-content: center; align-items: center; margin: 20px auto; } .socials-section .heading-second { color: #FFF4D3; text-align: center; font-feature-settings: 'liga' off; font-family: 'MasonSansAlternateBold'; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; } .socials-section .socials-item { width: 32px; height: 32px; margin: 10px; } .socials-section .socials-item svg { fill: #C7AA89; transition: .2s ease-in-out; } .socials-section .socials-item:hover svg { fill: #FFF4D3; } .bottom-section { position: relative; border-top: 1px solid #C7AA89; } .bottom-section .content-wrapper { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 80px 0; max-width: 1240px; margin: 0 auto; z-index: 1; } .bottom-section .content-wrapper .bottom-item { display: flex; align-items: center; position: relative; height: 80px; margin: 0 20px; } .bottom-section .content-wrapper span { display: inline-flex; margin: 0 20px; color: #FFF4D3; font-family: "Averia Serif Libre"; font-size: 15px; font-style: normal; font-weight: 300; line-height: 180%; letter-spacing: 0.75px; } /* The Modal (background) */ .modal { display: none; justify-content: center; align-items: center; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; padding: 0; overflow: hidden; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); z-index: 4; } .modal .icon-close { position: absolute; top: 0; right: 0; width: 72px; height: 72px; cursor: pointer; } /* Modal Content */ .modal-content { position: relative; margin: 0; margin: 79px 80px; padding: 33px 20px 34px; padding: 60px; width: 100%; max-width: 780px; height: 100%; overflow: hidden; background-size: cover; box-sizing: border-box; border: 2px solid rgba(255, 244, 211, 0.2); background: #0D0D04; box-shadow: 6px 6px 8px 0px rgba(0, 0, 0, 0.24); gap: 24px; } .modal-content * { box-sizing: border-box; } .modal-content .heading-popup { color: #C7AA89; text-align: center; font-feature-settings: 'liga' off; font-family: 'MasonSansAlternateBold'; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; max-width: 540px; } .modal-content .popup-terms-list * { color: #FFF4D3; font-feature-settings: 'liga' off; font-family: "Averia Serif Libre"; font-size: 17px; font-style: normal; font-weight: 300; line-height: 174%; } .modal-content .popup-terms-list { list-style-type: disc; margin: 22px 0 27px 23px; padding-left: 0; list-style-position: outside; } .modal-content .popup-terms-list li { list-style-type: disc; list-style-position: outside; } .modal-content .popup-terms-list li b { font-weight: 700; } .modal-content .modal-block { display: flex; flex-direction: column; justify-content: stretch; align-items: center; height: 100%; } .modal.player { height: 100%; } .modal.player .modal-content { max-width: 900px; margin: auto; padding: 0; max-height: 521px; } .modal.player video { position: relative; max-width: 100%; } .modal.player .icon-close { z-index: 2; } @media only screen and (min-width: 1025px) { .hero-section { height: 90vh; } .hero-section::before { position: absolute; top: 0; left: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; z-index: 1; } .hero-section::after { position: absolute; top: 0; right: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; transform: rotate(180deg); } .hero-section .content-wrapper .hero-logo { height: 179px; margin: 14px auto 33px; } .hero-section .btn-link { position: absolute; right: 0; bottom: 92px; z-index: 3; width: 491px; } .hero-section .btn-link::after { position: absolute; top: 0; right: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; transform: rotate(180deg); } .giveaway-section::before { position: absolute; top: -2px; left: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; z-index: 2; } .giveaway-section::after { position: absolute; top: -2px; right: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; transform: rotate(180deg); z-index: 1; } .reviews-section::before { position: absolute; top: -2px; left: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; z-index: 2; } .reviews-section::after { position: absolute; top: -2px; right: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; transform: rotate(180deg); z-index: 1; } .video-section::before { position: absolute; top: -2px; left: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; z-index: 4; } .video-section::after { position: absolute; top: -2px; right: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; transform: rotate(180deg); z-index: 3; } .ride-section { background: #0D0D04 url("./../images/GetitNowVisual.webp") no-repeat 50% 100%; background-size: cover; } .ride-section::before { position: absolute; top: 0; left: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; z-index: 1; } .ride-section::after { position: absolute; top: 0; right: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; transform: rotate(180deg); } .bottom-section::before { position: absolute; top: -2px; left: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; z-index: 1; } .bottom-section::after { position: absolute; top: -2px; right: 0; width: 360px; height: 100%; content: ''; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 100%); mix-blend-mode: multiply; transform: rotate(180deg); } } @media only screen and (max-height: 880px) and (min-width: 1025px) { .hero-section { height: auto; } } @media only screen and (max-width: 1024px) { .heading-first { font-size: 24px; } .decorated-line { position: absolute; width: 1920px; top: 0; display: flex; justify-content: center; align-items: center; max-block-size: unset; max-inline-size: unset; transform: translate(-50%, -50%); left: 50%; z-index: 2; } .text-main { text-align: center; } .text-main br { display: none; } .hero-section { height: unset; min-height: unset; background: url("./../images/HeroMobile.webp") no-repeat 50% 50%; background-size: cover; } .hero-section .first-layer { display: none; } .hero-section .heading-first { margin-bottom: 22px; } .hero-section .content-wrapper { padding: 68px 20px 32px; } .hero-section .content-wrapper .hero-text { letter-spacing: 5.2px; } .hero-section .content-wrapper .hero-text-small { margin-top: 19px; margin-bottom: 2px; } .hero-section .video-loop.wolf { display: none; } .hero-section .btn-link .img-desktop { display: none; } .hero-section .btn-link .img-mob { display: flex; margin-bottom: 8px; transform: translateY(-53px); } .giveaway-section { background: none; } .giveaway-section .content-wrapper { align-items: center; padding: 65px 12px 50px; } .giveaway-section .text-main { text-align: center; margin: 9px 0 2px; } .giveaway-section .giveaway-bg-mob { display: flex; width: 100%; } .btn-copy { margin: 6px 0 16px; } .reviews-section .content-wrapper { padding: 65px 20px 30px; } .reviews-section .content-wrapper-inner { flex-wrap: wrap; margin: 46px auto 0px; } .reviews-section .reviews-item { margin: 0 20px; } .reviews-section .reviews-item { margin-bottom: 40px; } .video-section .content-wrapper { flex-direction: column; align-items: center; justify-content: unset; padding: 0; } .video-section .content-item.video { width: 100%; } .video-section .content-item.text { width: unset; margin-left: unset; margin-top: 86px; } .video-section .content-item.text .heading-first { text-align: center; } .video-section .content-item.text .text-main { margin: 20px 19px 28px; } .video-section .content-item .download-btn { margin: 0 auto; } .ride-section .content-wrapper { padding: 103px 20px 83px; } .ride-section .text-main { padding: 10px 0 28px; } .socials-section .content-wrapper { padding: 0 0 50px; } .bottom-section .content-wrapper .bottom-item { height: 68.342px; margin-bottom: 40px; } .bottom-section .content-wrapper .bottom-item img { height: 68.342px; } .bottom-section .content-wrapper .bottom-item.ow img { height: unset; } .modal { overflow: auto; height: auto; position: fixed; } .modal .icon-close { width: 50px; height: 50px; top: 10px; right: 17px; } .modal-content { margin: 0px 10px; padding: 33px 20px 34px; padding: 60px 20px 38px; height: auto; bottom: 0; overflow: auto; } .modal-content .modal-block { overflow: auto; height: auto; } } @media only screen and (max-width: 880px) { .bottom-section .content-wrapper { flex-direction: column; } .bottom-section .content-wrapper span { order: -1; margin-bottom: 45px; } } @media only screen and (max-width: 768px) { .video-section .content-item.text .heading-first { max-width: 275px; margin: 0 auto; } } @media only screen and (max-width: 600px) { .modal { position: absolute; } .modal-content .popup-terms-list { margin: 28px 0 27px 13px; } .modal-content .popup-terms-list li { margin-bottom: 3px; } .modal.player { position: fixed; } } @media only screen and (min-width: 1025px) and (max-width: 1150px) { .hero-section .video-loop.wolf { right: -300px; } .hero-section .btn-link { bottom: 87px; right: -100px; } } @media only screen and (max-height: 1030px) { .hero-section .content-wrapper .hero-text-small { margin-top: 11%; } } @media only screen and (max-height: 985px) { .hero-section .content-wrapper .hero-text-small { margin-top: 8%; } } @media only screen and (max-height: 925px) { .hero-section .content-wrapper .hero-text-small { margin-top: 7%; } }