@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"); /* 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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { 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; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* 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; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } h1 { font-size: 30px; font-weight: 700; color: #fff; text-align: center; line-height: 33px; } @media (min-width: 374px) { h1 { font-size: 40px; line-height: 43px; } } @media (min-width: 767px) { h1 { font-size: 52px; line-height: 55px; } } h2 { font-size: 17px; } @media (min-width: 767px) { h2 { font-size: 22px; } } h3 { font-size: 16px; line-height: 16px; } @media (min-width: 767px) { h3 { font-size: 18px; line-height: 18px; } } body, html { height: 100%; overflow-x: hidden; } @media (min-width: 1024px) { body, html { height: 100%; min-height: 100%; } } body { font-family: "Ubuntu", sans-serif; transition: all 2s ease; } body:not(.theme-1):not(.theme-2):not(.theme-3):not(.theme-4):not(.theme-5):not( .theme-6 ):not(.theme-7):not(.theme-8):not(.theme-9):not(.theme-10) { background-image: url(../images/bg.png); background-position: center; background-size: cover; background-repeat: no-repeat; } img { max-width: 100%; height: auto; display: block; } /** THEMES **/ div.theme-1 { background: linear-gradient( 0deg, #ff8a00 -7.11%, #fd9316 1.48%, #f6c58a 48.76%, #f2e4d4 81.71%, #f1f1f1 96.04% ) !important; z-index: 10; } .theme-1 .questions__subtitle { color: #ff8a00; } .theme-1 .questions__headline { color: #00205c; } div.theme-2 { background: linear-gradient(180deg, #02225d 0%, #25c5ff 100%); z-index: 9; } .theme-2 .questions__subtitle { color: #00a7e1; } .theme-2 .questions__headline { color: #fff; } div.theme-3 { background: linear-gradient(180deg, #fef4f8 0%, #e72371 100%); z-index: 8; } .theme-3 .questions__subtitle { color: #e72270; } .theme-3 .questions__headline { color: #00205c; } div.theme-4 { background: linear-gradient(180deg, #eef1f2 0%, #25c5ff 69.17%); z-index: 7; } .theme-4 .questions__subtitle { color: #00a7e1; } .theme-4 .questions__headline { color: #00205c; } div.theme-5 { background: linear-gradient(180deg, #f1f1f1 0%, #999999 77.5%); z-index: 6; } .theme-5 .questions__subtitle { color: #ff8a00; } .theme-5 .questions__headline { color: #00205c; } div.theme-6 { background: linear-gradient(180deg, #010101 0%, #797979 100%); z-index: 5; } .theme-6 .questions__subtitle { color: #e72270; } .theme-6 .questions__headline { color: #fff; } div.theme-7 { background: linear-gradient(180deg, #02225d 35%, #25c5ff 99.21%); z-index: 4; } .theme-7 .questions__subtitle { color: #00a7e1; } .theme-7 .questions__headline { color: #fff; } div.theme-8 { background: linear-gradient(180deg, #f1f1f1 0%, #fd9316 100%); z-index: 3; } .theme-8 .questions__subtitle { color: #ff8a00; } .theme-8 .questions__headline { color: #00205c; } div.theme-9 { background: linear-gradient(180deg, #fef4f8 0%, #e72371 100%); z-index: 2; } .theme-9 .questions__subtitle { color: #e72270; } .theme-9 .questions__headline { color: #00205c; } div.theme-10 { background: linear-gradient(180deg, #02225d 0%, #25c5ff 100%); z-index: 1; } .theme-10 .questions__subtitle { color: #00a7e1; } .theme-10 .questions__headline { color: #fff; } div.theme-11 { background: linear-gradient(180deg, #02225d 47%, #25c5ff 100%); z-index: 1; } .themes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all 0.6s ease-out; } .themes div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition-property: opacity, transform; transition-timing-function: ease-out; transition-duration: 1s; transition-delay: 100ms; } /** BUTTONS **/ .btn { font-size: 30px; font-weight: 700; width: 100%; max-width: 205px; height: 57px; display: flex; align-items: center; justify-content: center; background-color: #fff; border: 2px solid #fff; color: #fff; border-radius: 10px; margin: 0 auto; text-decoration: none; outline: none; cursor: pointer; transition: all 0.2s ease; } @media (max-width: 799px) { .btn:active { background-color: #fff; color: #00205c; } } @media (min-width: 800px) { .btn { max-width: 260px; height: 72px; } } .btn:focus { outline: none; } .btn--ghost { background-color: transparent; } .btn:hover { background-color: #fff; color: #00205c; } /** DEFAULT STRUCTURE **/ .wrapper { width: 100%; overflow-x: hidden; position: relative; z-index: 2; } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 25px; box-sizing: border-box; } @media (min-width: 800px) { .container { padding: 32px 25px; } } .intro:not(.hide) ~ .container { padding: 0; } .container--md { max-width: 418px; } .container--flex-center { display: flex; align-items: center; justify-content: center; } .hide { display: none !important; } p { font-size: 14px; line-height: 17px; color: #fff; } @media (min-width: 767px) { p { font-size: 17px; line-height: 20px; } } /** HEADER **/ header { padding: 15px 30px 0; width: 100%; left: 0; top: 0; position: relative; z-index: 2; display: flex; justify-content: flex-end; } @media (min-width: 374px) { header { padding: 33px 16px 0; } } @media (min-width: 1024px) { header { padding: 49px 45px; position: absolute; } } .branding img { max-width: 80px; } @media (min-width: 800px) { .branding img { max-width: 157px; } } /** INTRO **/ .intro { text-align: center; height: auto; display: flex; justify-content: center; align-items: center; } @media (min-width: 1024px) { .intro { height: 100vh; } } .intro__heading { margin-bottom: 15px; } .intro__desc { margin: 0 auto 24px; line-height: 20px; font-weight: 700; max-width: 287px; } @media (min-width: 767px) { .intro__desc { max-width: 364px; } } @media (min-width: 1024px) { .intro__desc { margin: 0 auto 36px; } } .intro__desc br { display: none; } @media (min-width: 767px) { .intro__desc br { display: inline; } } .intro__icon { margin-bottom: 15px; height: 150px; position: relative; } @media (min-width: 800px) { .intro__icon { height: 256px; } } .intro__icon img { margin: 0 auto; position: absolute; height: auto; width: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.2); } @media (min-width: 800px) { .intro__icon img { transform: translate(-50%, -50%) scale(1.1); } } /** QUESTIONS **/ @media (max-height: 800px) and (min-width: 1024px) { .questions { transform: scale(0.86); transform-origin: top center; } } .questions__item { margin-bottom: 14px; } @media (min-width: 767px) { .questions__item { margin-bottom: 10px; } } .questions__subtitle { margin: 0 0 15px; font-weight: 700; transform: translateY(-15px); } .questions__headline { margin: 0 0 30px; font-weight: 700; transform: translateY(-15px); } @media (min-width: 767px) { .questions__headline { margin-bottom: 40px; } } .questions__headline i { font-style: italic; font-weight: 400; } .questions__graphic { margin-bottom: 31px; background-size: cover; background-repeat: no-repeat; background-position: center; } @media (min-width: 767px) { .questions__graphic { margin-bottom: 42px; } } .questions__lists-item { display: flex; justify-content: flex-start; align-items: center; width: 100%; margin-bottom: 9px; border: 2px solid #fff; border-radius: 10px; background-color: transparent; font-size: 14px; line-height: 14px; font-weight: 700; padding: 8px 17px; color: #fff; cursor: pointer; transition: color 0.2s ease, transform 1.5s ease; } .questions__lists-item:active { background-color: #fff; color: #00205c; } @media (min-width: 1024px) { .questions__lists-item:hover { background-color: #fff; color: #00205c; } } @media (min-width: 767px) { .questions__lists-item { font-size: 14px; line-height: 16px; padding: 18px 29px; margin-bottom: 12px; } } .questions__lists-letter { font-size: 30px; line-height: 30px; font-weight: 700; min-width: 40px; } @media (min-width: 767px) { .questions__lists-letter { min-width: 40px; } } .questions__lists-item:nth-child(2) { transform: translateY(15px); } .questions__lists-item:nth-child(3) { transform: translateY(30px); } .questions__lists-item:nth-child(4) { transform: translateY(45px); } .questions__lists-item.choices--in { transform: translateY(0) !important; } .counter { margin-left: 0; } /** Animation **/ .animate { transition-property: all; transition-timing-function: linear; transition-duration: 0.5s; opacity: 0; transition-delay: 50ms; } .animate--fadeInUp { transform: translateY(-25px); } .animate--fadeInDown { transform: translateY(25px); } .animate--in { transform: translateY(0); opacity: 1; } .animate--subtitle { transform: translateY(0); opacity: 1; } .animate--headline { transform: translateY(0); opacity: 1; } /** Results Page **/ body.is-results { padding-bottom: 63px; background: linear-gradient(180deg, #02225d 0%, #25c5ff 100%); } body.is-results #themes, body.is-results #intro, body.is-results #questions, body.is-results #header { display: none; } body.is-results .container--md{ max-width: 495px; } body.is-results .results__inner img{ margin: 0 auto; width: 100%; } .results { display: flex; align-items: center; justify-content: center; display: none; padding-bottom: 80px; } .results__inner, .results__inner + h3 { opacity: 0; transition: all 1s ease; } .controls { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; display: none; background-color: #00215c; } body.is-results .results { display: block; color: #fff; } body.is-results .controls { display: flex; } body.is-results .results__inner, body.is-results .results__inner + h3 { opacity: 1; } .controls__wrap { width: 100%; max-width: 369px; display: flex; justify-content: flex-start; background-color: #00215c; } @media (min-width: 800px) { .controls__wrap { max-width: 414px; } } .controls__wrap:before { content: ""; width: 100%; height: 6px; background: url(../images/color-bar.png) no-repeat top left; position: absolute; top: -5px; left: 0; background-size: cover; } .controls__control { align-items: center; display: flex; color: #24c5ff; font-size: 9px; padding: 0 8px; cursor: pointer; } .controls__control:before { height: 53px; } @media (min-width: 800px) { .controls__control { padding: 0 12px; } .controls__control:before { height: 63px; } } .controls__control--invite:before { content: ""; width: 32px; background: url(../images/invite.png) no-repeat center; background-size: 20px 22px; display: block; } .controls__control--retake:before { content: ""; width: 32px; background: url(../images/retake.png) no-repeat center; background-size: 20px 22px; display: block; } .controls__control--retake { padding-right: 18px; } @media (min-width: 800px) { .controls__control--retake { padding-right: 22px; } } .controls__control--save:before { content: ""; width: 32px; background: url(../images/save.png) no-repeat center; background-size: 21px 21px; display: block; } .controls__control--about:before { content: ""; width: 62px; background: url(../images/about.png) no-repeat center; background-size: 29px 29px; display: block; } .controls__control--about { justify-content: center; background: linear-gradient( 270deg, rgba(1, 32, 92, 1) 55%, rgba(18, 113, 171, 1) 100% ); width: 155px; } .controls__control--about span { color: #fff; } .controls__control--careers:before { content: ""; width: 26px; background: url(../images/careers.png) no-repeat center; background-size: 26px 26px; display: block; margin-right: 7px; } .controls__control--careers:after { width: 1px; content: ""; height: 31px; background-color: #fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .controls__control--careers { justify-content: center; width: auto; position: relative; padding-left: 28px; } .float-data { position: fixed; top: 0; left: 0; padding: 20px; background: #000; max-width: 320px; display: none; @media (min-width: 800px) { display: block; } } .results__headline { font-size: 32px; font-weight: 700; line-height: 37px; color: #fff; display: flex; justify-content: flex-start; margin-bottom: 16px; } .results__headline span { max-width: 80%; display: inline-block; } .results__headline + p{ font-size: 20px; margin-bottom: 21px; font-weight: 700; line-height: 23px; } @media (min-width: 768px) { .results__headline, .results__headline + p{ text-align: center; } .results__headline + p{ margin-bottom: 26px; } .results__headline span{ max-width: 100%; } } #notification { position: absolute; top: 0; right: 0; background-color: #000; padding: 20px; margin: 12px 8px 8px; border-radius: 10px; color: #fff; display: none; } #notification.show { display: block; } .footer-logo { opacity: 0; transition: opacity 0.2s ease, transform 1.5s ease; transform: translateY(15px); } .footer-logo.animate--in { opacity: 1 !important; transform: translateY(0); } .share { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; z-index: -1; opacity: 0; transition: all 0.2s ease; } .share:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8; z-index: 1; } .share__content { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; height: 100%; padding: 0 15px; } .share__content > div { padding: 7px 10px 13px; background: url(../images/share-bg.png) no-repeat top left; background-size: cover; max-width: 370px; } @media ( min-width: 340px ){ .share__content > div { padding: 7px 10px 13px; } } @media ( min-width: 420px ){ .share__content > div { padding: 7px 17px 13px; } } .share__heading{ color: #fff; text-align: center; font-size: 16px; line-height: 36px; font-weight: 600; margin-bottom: 6px; } body.popup-opened .share { z-index: 100; opacity: 1; } .a2a_default_style { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr; grid-column-gap: 10px; grid-row-gap: 0px; justify-content: center; } @media ( min-width: 340px ){ .a2a_default_style { grid-column-gap: 18px; } } @media ( min-width: 420px ){ .a2a_default_style { grid-column-gap: 26px; } } .a2a_default_style a { padding: 0 !important; } .a2a_default_style a:first-child{ position: relative; top: 1.6px; } .a2a_default_style a:nth-child(4){ position: relative; top: 1.6px; } .a2a_default_style a img{ height: 43.5px; width: auto; } .share__content > div { position: relative; } .close-btn { color: #fff; position: absolute; top: -30px; right: 0; padding: 11px; cursor: pointer; border-radius: 10px; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; } /** Handle Orphan **/ @media (min-width: 375px) and ( max-width: 768px ){ .orphan{ display: block; } } .results__discover{ border: 1px solid #fff; border-radius: 10px; width: 137px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 21px; } @media ( min-width: 768px ){ .results__discover { margin: 0 auto 26px; } } .a2a_default_style a.a2a_button_telegram img{ height: auto; width: 30px; margin: 0 auto; } .a2a_button_telegram span{ color: #fff; font-size: 8px; text-align: center; }