diff --git a/css/main.css b/css/main.css index eded72d..c2d4eda 100644 --- a/css/main.css +++ b/css/main.css @@ -1,4 +1,3 @@ -@import url("https://rsms.me/inter/inter-ui.css"); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; @@ -144,30 +143,43 @@ select[multiple] { /* Move the label to the top */ vertical-align: top; } +@font-face { + font-family: PostGrotesk-Medium; + src: url(../fonts/PostGrotesk-Medium.eot); + src: url(../fonts/PostGrotesk-Medium.eot?#iefix) format("embedded-opentype"), url(../fonts/PostGrotesk-Medium.woff) format("woff"), url(../fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium) format("svg"); + font-weight: 400; + font-style: normal; } + +@font-face { + font-family: PostGrotesk-Book; + src: url(../fonts/PostGrotesk-Book.eot); + src: url(../fonts/PostGrotesk-Book.eot?#iefix) format("embedded-opentype"), url(../fonts/PostGrotesk-Book.woff) format("woff"), url(../fonts/PostGrotesk-Book.svg#PostGrotesk-Book) format("svg"); + font-weight: 400; + font-style: normal; } + .header { - position: absolute; + position: fixed; display: flex; justify-content: space-between; width: 1200px; height: 56px; left: 50%; top: 0; - margin: 24px 0 0 -600px; } + margin: 32px 0 0 -600px; + z-index: 998; } .header-left { display: flex; align-items: center; } -.header-right { - display: flex; - align-items: center; } - .logo { display: block; - width: 146px; + width: 56px; height: 56px; - background-image: url(../img/status-logo.svg); - background-size: 146px; + border-radius: 50%; + background-color: #FFFFFF; + background-image: url(../img/logo-blue.svg); + background-size: 24px; background-position: center; background-repeat: no-repeat; } @@ -177,7 +189,7 @@ select[multiple] { margin-left: 32px; } .main-nav li { - margin: 16px 12px 12px 12px; } + margin: 16px; } .main-nav li:first-child { margin-left: 0; } @@ -185,394 +197,1500 @@ select[multiple] { .main-nav li:last-child { margin-right: 0; } -.main-nav a:hover { +.header a:hover { opacity: .8; } +.header a:visited { + color: #FFFFFF; } + +.header .social-link a:hover { + opacity: 1; } + +.header a.logo:hover { + opacity: 1; } + .main-nav a { - color: black; + color: #FFFFFF; text-decoration: none; } -.intro { +.secondary-nav { display: flex; - width: 680px; align-items: center; - flex-direction: column; - text-align: center; - margin: 140px auto 0; } + margin-left: 32px; } -.intro h1 { - padding: 0 0 8px 0; } +.secondary-nav a { + color: #FFFFFF; + text-decoration: none; } -.intro p { - width: 540px; - font-size: 16px; - line-height: 26px; - color: #939ba1; } +.secondary-nav li { + margin: 16px; } -.intro-buttons { - display: flex; - padding: 16px 0 0 0; } +.secondary-nav li.social-link { + margin: 8px; } -.button.button-part { - border-radius: 0; } - -.button.button-part:first-child { - border-radius: 20px 0 0 20px; } - -.button.button-part:last-child { - border-radius: 0 20px 20px 0; } - -.button-icon { +.secondary-nav li.social-link a { display: block; - width: 24px; - height: 24px; - background-size: 24px; - background-repeat: no-repeat; - margin: 0 8px 0 0; } - -.button-icon.button-icon--ios { - background-image: url(../img/icon-apple.svg); } - -.button-icon.button-icon--android { - background-image: url(../img/icon-android.svg); } - -.info { - margin: 0 auto 140px; - border-radius: 16px; - background-color: white; - width: 1200px; - display: flex; } - -.info-item { - width: 33.3%; - padding: 32px; - border-right: 1px solid #e8ebec; } - -.info-item:last-child { - border-right: none; } - -.info-item-content { - height: 240px; - overflow: hidden; } - -.info-item h5 { - margin: 0 0 24px 0; } - -.info-item h4 { - margin: 0 0 8px 0; } - -.latest-news li { - padding: 0 0 16px 0; } - -.hero-image { - position: relative; - width: 920px; - height: 270px; - margin: 32px auto 0; } - -.image-line { - width: 60px; - height: 4px; - border-radius: 20px; - background-color: #e9ebec; - margin: 0 0 4px 0; } - -/* Wallet */ -.image-wallet { - position: absolute; - left: 396px; - top: 81px; - width: 126px; - height: 90px; } - -.image-wallet-front { - position: absolute; - left: 0px; - top: 0px; - width: 126px; - height: 90px; - background-color: white; - border-radius: 8px; - box-shadow: 0px 2px 4px rgba(43, 59, 71, 0.124066); - transform: translate3d(0, 20px, 0) scale(1); - transition: transform .6s ease, opacity 0.2s ease; - transition-delay: .1s; - opacity: 0; } - -.active .image-wallet-front { - transform: translate3d(0, 0, 0) scale(1); - transition: transform .4s ease, opacity 0.2s ease; - transition-delay: .1s; - opacity: 1; } - -.image-wallet-back { - position: absolute; - top: -33px; - left: 0px; - width: 105px; - height: 64px; - background-size: 105px; - background-image: url(../img/wallet-back.svg); - transform: translate3d(0, 20px, 0) scale(0.4, 0.4); - transition: transform .6s ease, opacity 0.2s ease; - transition-delay: .4s; - opacity: 0; } - -.active .image-wallet-back { - transform: translate3d(0, 0, 0) scale(1, 1); - opacity: 1; } - -.image-wallet-logo { - position: absolute; - top: 12px; - left: 12px; width: 40px; height: 40px; - background-size: 40px; - background-image: url(../img/status-logo-symbol.svg); } + background-color: rgba(0, 0, 0, 0.1); + border-radius: 50%; + background-size: 24px; + background-position: center; + background-repeat: no-repeat; } -.image-wallet-lines { - position: absolute; - top: 64px; - left: 12px; } +.secondary-nav li.social-link a:hover { + background-color: rgba(0, 0, 0, 0.2); } -.image-wallet-lines .image-line:nth-child(2) { - width: 42px; } +.secondary-nav li.social-link.social-link--twitter a { + background-image: url(../img/icon-twitter.svg); } -/* Token Stacks */ -.image-token-stack { - position: absolute; - transform: translate3d(0, 0, 0) scale(1); - transition: transform 1s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; - opacity: 0; } +.secondary-nav li.social-link.social-link--github a { + background-image: url(../img/icon-github.svg); } -.image-token-stack.image-token-stack--horizontal { - transform: translate3d(-40px, 0, 0) scale(1); } +.secondary-nav li:first-child { + margin-left: 0; } -.image-token-stack.image-token-stack--vertical { - transform: translate3d(0, 40px, 0) scale(1); } +.secondary-nav li:last-child { + margin-right: 0; } -.active .image-token-stack.image-token-stack--horizontal { - transform: translate3d(0, 0, 0) scale(1); - opacity: 1; } +@media (max-width: 1248px) { + .header { + width: 100%; + left: 0; + top: 0; + margin: 32px 0 0 0; + padding: 0 24px; } } -.active .image-token-stack.image-token-stack--vertical { - transform: translate3d(0, 0, 0) scale(1); - opacity: 1; } +@media (max-width: 710px) { + .header { + margin-top: 24px; } + .main-nav { + display: none; } + .secondary-nav li { + margin-right: 12px; } + .secondary-nav li.social-link { + margin-left: 2px; } } -.image-token-stack.image-token-stack--one { - bottom: 48px; +.wrap { + position: fixed; left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 1; + width: 100%; + height: 100%; + background-color: #4360DF; } + +.pattern { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 1; + width: 100%; + height: 100%; + background-image: url("../img/pattern.png"); } + +.home-cover { + background-color: transparent; + width: 100%; + height: 600px; } + +.home-cover.no-pattern { + background-image: none; } + +.intro { + position: fixed; + top: 280px; + left: 50%; + margin: 0 0 0 -270px; + display: flex; + align-items: center; + flex-direction: column; + padding: 0px 0 32px; + color: #FFFFFF; + text-align: center; + width: 540px; + z-index: 4; } + +.intro h1 { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 30px; + padding: 0 0 12px 0; } + +.intro p { + font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 25px; + opacity: .6; + padding: 0 0 16px 0; } + +.intro-buttons { + display: flex; } + +.intro .button { + margin: 0 6px; + width: 194px; + padding: 10px 0 9px; } + +@media (max-width: 710px) { + .intro { + width: 100%; + margin: 0; + left: 0; + top: 150px; + padding: 0 24px; } + .intro h1 { + font-size: 22px; + line-height: 26px; + padding: 0 0 4px 0; } + .intro-buttons { + flex-direction: column; } + .intro .button { + width: 220px; + margin: 0 0 12px 0; } + .home-cover { + height: 440px; } } + +.swarms { + position: absolute; + left: 24px; + top: 24px; + width: 250px; + height: 250px; } + +.swarm { + position: absolute; } + +.swarm:nth-child(1) { + left: 0; + top: 0; + width: 90px; + height: 90px; } + +.swarm:nth-child(2) { + left: 180px; + top: 100px; + width: 70px; + height: 70px; } + +.swarm:nth-child(3) { + left: 24px; + top: 150px; + width: 86px; + height: 86px; } + +.circle { + position: absolute; + transform: translate3d(0, 0, 0); + transition: transform 1.6s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 1s ease; + opacity: 0; + transform: scale(0.1); } + +.circle .circle-inner { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border-radius: 50%; + border-radius: 50%; + background-color: #4360DF; + animation-timing-function: ease; + animation-iteration-count: infinite; } + +.circle .circle-inner { + animation-duration: 3.4s; + animation-name: float; } + +.circle.circle--big .circle-inner { + animation-duration: 3.4s; + background-color: #E8ECFB; + animation-name: pulsate; } + +/* Swarm #1 */ +.swarm:nth-child(1) .circle.circle--big { + width: 90px; + height: 90px; transition-delay: .1s; } -.image-token-stack.image-token-stack--two { - top: 0px; - left: 120px; - transition-delay: .2s; } +.swarm:nth-child(2) .circle.circle--big .circle-inner { + animation-delay: .1s; } -.image-token-stack.image-token-stack--three { - top: 150px; - left: 180px; - transition-delay: .3s; } - -.image-token-stack.image-token-stack--four { - top: 170px; - right: 226px; - transition-delay: .4s; } - -.image-token-stack.image-token-stack--five { - top: 30px; - right: 110px; - transition-delay: .5s; } - -.image-token { - display: flex; +.swarm:nth-child(1) .circle:nth-child(2) { position: absolute; - align-items: center; - justify-content: center; - border-radius: 50%; - width: 42px; - height: 42px; - background-color: white; - box-shadow: -2px 0px 4px rgba(62, 81, 95, 0.100572); - z-index: 100; - transform: translate3d(0, 0, 0) scale(1); - transition: transform 1s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; } - -.image-token-stack--vertical .image-token { - box-shadow: 0px 2px 4px rgba(62, 81, 95, 0.100572); } - -.image-token.image-token--main { - background-color: #4360df; - color: white; - font-size: 10px; - font-weight: 500; - letter-spacing: 1px; - text-align: center; - z-index: 200; } - -.image-token-stack.image-token-stack--vertical .image-token:nth-child(2) { - top: 10px; - z-index: 90; - transform: translate3d(0, -10px, 0) scale(1); - transition-delay: .2s; } - -.image-token-stack.image-token-stack--vertical .image-token:nth-child(3) { + left: 20px; top: 20px; - z-index: 80; - transform: translate3d(0, -20px, 0) scale(1); - transition-delay: .3s; } + width: 11px; + height: 11px; + transition-delay: .2s; + transform: translate3d(-10px, -10px, 0) scale(0.1); } -.image-token-stack.image-token-stack--horizontal .image-token:nth-child(2) { - left: -10px; - z-index: 90; - transform: translate3d(10px, 0, 0) scale(1); - transition-delay: .2s; } +.swarm:nth-child(1) .circle:nth-child(2) .circle-inner { + animation-delay: 1.1s; } -.image-token-stack.image-token-stack--horizontal .image-token:nth-child(3) { - left: -20px; - z-index: 80; - transform: translate3d(20px, 0, 0) scale(1); - transition-delay: .3s; } +.swarm:nth-child(1) .circle:nth-child(3) { + position: absolute; + left: 33px; + top: 43px; + width: 17px; + height: 17px; + transition-delay: .22s; + transform: translate3d(-10px, 20px, 0) scale(0.1); } -.image-token-stack.image-token-stack--horizontal .image-token:nth-child(4) { - left: -30px; - z-index: 70; - transform: translate3d(30px, 0, 0) scale(1); - transition-delay: .4s; } +.swarm:nth-child(1) .circle:nth-child(3) .circle-inner { + animation-delay: 1.6s; } -.image-token-stack.image-token-stack--horizontal .image-token:nth-child(5) { - left: -40px; - z-index: 60; - transform: translate3d(40px, 0, 0) scale(1); +.swarm:nth-child(1) .circle:nth-child(4) { + position: absolute; + left: 70px; + top: 38px; + width: 21px; + height: 21px; + transition-delay: .24s; + transform: translate3d(20px, 10px, 0) scale(0.1); } + +.swarm:nth-child(1) .circle:nth-child(4) .circle-inner { + animation-delay: 2.1s; } + +.swarm:nth-child(1) .circle:nth-child(5) { + position: absolute; + left: 86px; + top: -6px; + width: 20px; + height: 20px; + transition-delay: .44s; + transform: translate3d(30px, -30px, 0) scale(0.1); } + +.swarm:nth-child(1) .circle:nth-child(6) { + position: absolute; + left: -28px; + top: 40px; + width: 14px; + height: 14px; + transition-delay: .54s; + transform: translate3d(-30px, 10px, 0) scale(0.1); } + +.swarm:nth-child(1) .circle:nth-child(6) .circle-inner { + animation-delay: 2.3s; } + +.swarm:nth-child(1) .circle:nth-child(7) { + position: absolute; + left: 8px; + top: 100px; + width: 12px; + height: 12px; + transition-delay: .64s; + transform: translate3d(-30px, 30px, 0) scale(0.1); } + +/* Swarm #2 */ +.swarm:nth-child(2) .circle.circle--big { + width: 70px; + height: 70px; transition-delay: .5s; } -.active .image-token-stack--vertical .image-token { - transform: translate3d(0, 0, 0) scale(1) !important; } +.swarm:nth-child(2) .circle.circle--big .circle-inner { + animation-delay: .6s; } -.active .image-token-stack--horizontal .image-token { - transform: translate3d(0, 0, 0) scale(1) !important; } - -/* Messages */ -.image-message { +.swarm:nth-child(2) .circle:nth-child(2) { position: absolute; - width: 126px; - height: 69px; - background-size: 126px; - background-image: url(../img/message.svg); - transform: translate3d(0, -20px, 0) scale(0.9); - transition: transform 0.6s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; - opacity: 0; } + left: -17px; + top: 7px; + width: 29px; + height: 29px; + transition-delay: .6s; + transform: translate3d(0, 0, 0) scale(0.1); } -.active .image-message { - transform: translate3d(0, 0, 0) scale(1); - transition: transform 1s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; - opacity: 1; } +.swarm:nth-child(2) .circle:nth-child(2) .circle-inner { + animation-delay: 1.1s; } -.image-message.image-message--one { - left: 225px; - top: 62px; - transition-delay: .6s; } - -.image-message.image-message--two { - right: 236px; - top: 42px; - transition-delay: .9s; } - -.image-message-lines { +.swarm:nth-child(2) .circle:nth-child(3) { position: absolute; - left: 14px; - top: 14px; } + left: 31px; + top: 14px; + width: 9px; + height: 9px; + transition-delay: .62s; + transform: translate3d(0px, -10px, 0) scale(0.1); } -.image-message-lines .image-line { - width: 40px; } +.swarm:nth-child(2) .circle:nth-child(3) .circle-inner { + animation-delay: 2.1s; } -.image-message-lines .image-line:nth-child(2) { - width: 56px; } +.swarm:nth-child(2) .circle:nth-child(4) { + position: absolute; + left: 20px; + top: 34px; + width: 19px; + height: 19px; + transition-delay: .64s; + transform: translate3d(-5px, 20px, 0) scale(0.1); } -.image-message-avatar { +.swarm:nth-child(2) .circle:nth-child(4) .circle-inner { + animation-delay: 3.1s; } + +.swarm:nth-child(2) .circle:nth-child(5) { + position: absolute; + left: 45px; + top: 32px; + width: 12px; + height: 12px; + transition-delay: .66s; + transform: translate3d(16px, -5px, 0) scale(0.1); } + +.swarm:nth-child(2) .circle:nth-child(6) { + position: absolute; + left: -20px; + top: -30px; + width: 16px; + height: 16px; + transition-delay: .86s; + transform: translate3d(-20px, -30px, 0) scale(0.1); } + +.swarm:nth-child(2) .circle:nth-child(7) { + position: absolute; + left: 74px; + top: 66px; + width: 15px; + height: 15px; + transition-delay: 1.06s; + transform: translate3d(38px, 30px, 0) scale(0.1); } + +/* Swarm #3 */ +.swarm:nth-child(3) .circle.circle--big { + width: 86px; + height: 86px; + transition-delay: .7s; } + +.swarm:nth-child(3) .circle.circle--big .circle-inner { + animation-delay: 1.1s; } + +.swarm:nth-child(3) .circle:nth-child(2) { + position: absolute; + left: 49px; + top: 19px; + width: 12px; + height: 12px; + transition-delay: .8s; + transform: translate3d(0, -15px, 0) scale(0.1); } + +.swarm:nth-child(3) .circle:nth-child(2) .circle-inner { + animation-delay: .1s; } + +.swarm:nth-child(3) .circle:nth-child(3) { + position: absolute; + left: 18px; + top: 27px; + width: 18px; + height: 18px; + transition-delay: .82s; + transform: translate3d(-20px, -10px, 0) scale(0.1); } + +.swarm:nth-child(3) .circle:nth-child(3) .circle-inner { + animation-delay: .4s; } + +.swarm:nth-child(3) .circle:nth-child(4) { + position: absolute; + left: 42px; + top: 45px; + width: 12px; + height: 12px; + transition-delay: .84s; + transform: translate3d(0, 20px, 0) scale(0.1); } + +.swarm:nth-child(3) .circle:nth-child(4) .circle-inner { + animation-delay: .5s; } + +.swarm:nth-child(3) .circle:nth-child(5) { + position: absolute; + left: 62px; + top: 51px; width: 30px; height: 30px; - background-color: #e9ebec; + transition-delay: .86s; + transform: translate3d(10px, 10px, 0) scale(0.1); } + +.swarm:nth-child(3) .circle:nth-child(6) { + position: absolute; + left: -20px; + top: 20px; + width: 12px; + height: 12px; + transition-delay: 1.06s; + transform: translate3d(-20px, 0, 0) scale(0.1); } + +.swarm:nth-child(3) .circle:nth-child(7) { + position: absolute; + left: 8px; + top: 100px; + width: 12px; + height: 12px; + transition-delay: 1.26s; + transform: translate3d(-10px, 40px, 0) scale(0.1); } + +.swarm:nth-child(3) .circle:nth-child(8) { + position: absolute; + left: 96px; + top: 8px; + width: 14px; + height: 14px; + transition-delay: 1.46s; + transform: translate3d(10px, -10px, 0) scale(0.1); } + +.section--shown .circle.circle--big { + transform: translate3d(0, 0, 0) scale(1) !important; } + +.section--shown .circle { + transform: scale(1) !important; + opacity: 1 !important; } + +.section--shown .circle.circle--transparent { + opacity: .1 !important; } + +@keyframes pulsate { + 0% { + transform: scale(1); } + 50% { + transform: scale(1.4); } + 100% { + transform: scale(1); } } + +@keyframes float { + 0% { + transform: translate3d(0, 0, 0); } + 50% { + transform: translate3d(0, -10px, 0); } + 100% { + transform: translate3d(0, 0, 0); } } + +.bubbles-wrap { + width: 300px; + height: 300px; + position: relative; + transform: translate3d(0, 0, 0); } + +.bubbles-wrap .bubbles { + position: absolute; + left: -75px; + top: -75px; + width: 450px; + height: 450px; + transform: translate3d(0, 0, 0); } + +@media (max-width: 640px) { + .bubbles-wrap { + width: 260px; + height: 260px; } + .bubbles-wrap .bubbles { + transform: scale(0.86); + left: -100px; + top: -35px; } } + +.areas { + position: absolute; + width: 292px; + height: 292px; } + +.area { + position: absolute; + left: 50%; + top: 50%; + z-index: 99; + transform: translate3d(0, 0, 0); + transition: transform 1.6s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 1s ease; + opacity: 0; + transform: scale(0.1); } + +.area-inner { + position: absolute; + width: 100%; + height: 100%; + border: 5px solid #E4E8FB; border-radius: 50%; - position: absolute; - right: 14px; - top: 14px; } + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-duration: 13.4s; + animation-name: rotate; } -/* Status */ -.image-status { - position: absolute; - width: 116px; - height: 52px; - border-radius: 8px; - background-color: white; - box-shadow: 0px 2px 4px rgba(43, 59, 71, 0.124066); - transform: translate3d(0, 20px, 0) scale(0.9); - transition: transform 0.6s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; - opacity: 0; } - -.active .image-status { - transform: translate3d(0, 0, 0) scale(1); - transition: transform 1s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; +.section--shown .area { + transform: scale(1); opacity: 1; } -.image-status.image-status--one { - top: 86px; - left: -16px; - transition-delay: .8s; } - -.image-status.image-status--two { - bottom: -6px; - left: 310px; - transition-delay: 1s; } - -.image-status.image-status--three { - top: 160px; - right: 0px; - transition-delay: 1.2s; } - -.image-status-lines { +.area-dot { position: absolute; - left: 48px; - top: 21px; } - -.image-status-lines .image-line { - width: 50px; } - -.image-status-lines .image-line:nth-child(2) { - width: 40px; } - -.image-status-avatar { - width: 26px; - height: 26px; - background-color: #e9ebec; + width: 16px; + height: 16px; + background-color: #435CE7; border-radius: 50%; - position: absolute; - left: 14px; - top: 14px; } + border: 4px solid #FFFFFF; } -/*.footer { +.area-logo { + position: absolute; + left: 50%; + top: 50%; + margin: -26px 0 0 -26px; + width: 52px; + height: 52px; + background-image: url("../img/logo-flat.svg"); + background-size: 52px; + z-index: 100; } + +.area:nth-child(2) { + width: 112px; + height: 112px; + margin: -56px 0 0 -56px; } + +.area:nth-child(2) .area-dot { + left: 6px; + top: 4px; } + +.area:nth-child(2) .area-inner { + animation-delay: .2s; } + +.area:nth-child(3) { + width: 172px; + height: 172px; + margin: -86px 0 0 -86px; + transition-delay: .1s; } + +.area:nth-child(3) .area-dot { + left: 126px; + top: 9px; } + +.area:nth-child(3) .area-inner { + animation-delay: .4s; } + +.area:nth-child(4) { + width: 232px; + height: 232px; + margin: -116px 0 0 -116px; + transition-delay: .2s; } + +.area:nth-child(4) .area-dot { + left: 126px; + top: 214px; } + +.area:nth-child(4) .area-inner { + animation-delay: .6s; } + +.area:nth-child(5) { + width: 292px; + height: 292px; + margin: -146px 0 0 -146px; + transition-delay: .3s; } + +.area:nth-child(5) .area-dot { + left: 248px; + top: 218px; } + +.area:nth-child(6) .area-inner { + animation-delay: .8s; } + +@keyframes rotate { + 0% { + transform: rotate(0deg); } + 100% { + transform: rotate(360deg); } } + +@media (max-width: 640px) { + .areas { + position: absolute; + left: -16px; + top: 0px; + transform: scale(0.9); } } + +.positions { + width: 900px; + margin: 0 auto; } + +.positions-wrap { + margin: 0 0 0 0; + display: flex; + flex-wrap: wrap; } + +.positions-item { + display: flex; + width: 100%; + position: relative; + margin: 0 0 24px 0; + width: 100%; + border-color: #E0E3E6; + border-style: solid; + cursor: pointer; } + +.positions-item:last-child { + margin-bottom: 0; } + +.positions-item-inner { + display: flex; + position: relative; + width: 100%; + flex-direction: column; + justify-content: space-between; + background-color: #FFFFFF; + border-radius: 12px; + z-index: 200; } + +.positions-item:hover .positions-arrow { + background-color: rgba(67, 96, 223, 0.14); } + +.positions-item:hover { + z-index: 998; } + +.positions-item:hover .positions-item-background { + transform: scale(1.01); + box-shadow: 0 4px 13px 0 rgba(193, 201, 208, 0.57); } + +.positions-item-top { + position: relative; + padding: 24px 64px 24px 24px; } + +.positions-arrow { + display: block; + position: absolute; + width: 24px; + height: 24px; + right: 16px; + top: 50%; + margin: -12px 0 0 0; + border-radius: 50%; + background-color: rgba(67, 96, 223, 0.1); + background-image: url(../img/link-arrow.svg); + background-size: 24px; + background-position: center; + background-repeat: no-repeat; } + +.positions-item h2 { + font-size: 18px; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + padding: 0 0 4px 0; } + +.positions-item h2 span { + color: #8D99A4; } + +.positions-item:hover h2 { + color: #4360DF; } + +.positions-item p { + font-size: 24px; + font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + color: #8D99A4; + font-size: 16px; + line-height: 24px; } + +.reward { + padding: 16px 24px; + border-top: 1px solid #E8EBED; + border-radius: 0 0 12px 12px; + display: flex; + align-items: center; } + +.reward .reward-amount { + display: block; + background-color: rgba(67, 96, 223, 0.1); + color: #4360df; + padding: 6px 14px 5px; + margin: 0 12px 0 0; + border-radius: 8px; + letter-spacing: 1px; + font-size: 14px; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + transition: all .2s ease; } + +.positions-item p.reward-description { + display: block; + font-size: 16px; + line-height: 22px; + padding: 0 0 0 0; } + +@media (max-width: 948px) { + .positions { + width: 100%; + margin: 0 auto; } + .positions-item { + margin: 0 0 12px 0; + height: auto; } } + +@media (max-width: 760px) { + .positions-arrow { + margin: 0; + top: 24px; } + .positions-item-top { + padding-right: 48px; } + .reward-description { + margin: 0 0 0 0; } } + +/* People */ +.people { + display: flex; + flex-wrap: wrap; + width: 900px; + margin: 0 auto; } + +.person { + height: 200px; + width: 33.333%; + padding: 0 12px; + margin: 0 0 24px 0; } + +.person h3 { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 18px; + line-height: 24px; + margin: 0 0 6px 0; } + +.person.person--extra h3 { + color: #4360DF; } + +.person .button { + position: absolute; + bottom: 24px; + left: 24px; + display: block; + background-color: rgba(67, 96, 223, 0.1); + color: #4360df; } + +.person .button:hover { + background-color: rgba(67, 96, 223, 0.2); } + +.person p { + font-size: 16px; + line-height: 20px; + color: #8D99A4; } + +.person-inner { + position: relative; + height: 200px; + background-color: #FFFFFF; + border-radius: 12px; + width: 100%; + padding: 24px; } + +.person-image { + position: absolute; + left: 24px; + bottom: 24px; + width: 70px; + height: 70px; + border-radius: 50%; + background-color: #eef2f5; + background-size: cover; + background-position: center; } + +.person--denis { + background-image: url("../img/denis.png"); } + +.person--pat { + background-image: url("../img/pat.png"); } + +.person--hester { + background-image: url("../img/hester.png"); } + +.person--euge { + background-image: url("../img/euge.png"); } + +.person--andrei { + background-image: url("../img/andrei.png"); } + +.person--maciej { + background-image: url("../img/maciej.png"); } + +.person--philip { + background-image: url("../img/philip.png"); } + +.person:nth-child(1), +.person:nth-child(4), +.person:nth-child(7) { + padding-left: 0; } + +.person:nth-child(3), +.person:nth-child(6), +.person:nth-child(9) { + padding-right: 0; } + +.person:nth-child(7), +.person:nth-child(8), +.person:nth-child(9) { + margin: 0 0 0 0; } + +@media (max-width: 948px) { + .people { + width: 100%; + padding: 0; } + .person { + height: 220px; + width: 33.333%; + padding: 0 6px; + margin: 0 0 12px 0; } + .person-inner { + height: 220px; } } + +@media (max-width: 760px) { + .person { + width: 50%; } + .person:nth-child(odd) { + padding-left: 0; + padding-right: 6px; } + .person:nth-child(even) { + padding-right: 0; + padding-left: 6px; } + .person:nth-last-child(1), + .person:nth-last-child(2) { + margin: 0 0 0 0; } } + +@media (max-width: 540px) { + .person { + width: 100%; + margin: 0 0 12px 0; + padding: 0; + height: 190px; } + .person-inner { + height: 190px; } + .person:nth-child(odd), + .person:nth-child(even) { + margin: 0 0 12px 0; + padding: 0; } + .person:last-child { + margin: 0 0 0 0; + padding: 0; } } + +.blog-posts { + display: flex; + flex-wrap: wrap; + width: 900px; + margin: 0 auto; } + +.blog-post { + height: 300px; + width: 33.333%; + padding: 0 12px; + margin: 0 0 0 0; } + +.blog-post h3 { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 18px; + line-height: 24px; + margin: 0 0 6px 0; } + +.blog-post p { + font-size: 16px; + line-height: 20px; + color: #8D99A4; } + +.blog-post span { + display: block; + position: absolute; + left: 24px; + bottom: 24px; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + text-decoration: none; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 1px; + color: #8D99A4; + line-height: 24px; } + +a.blog-post-inner:hover span { + color: #4360DF; + opacity: 1; + transform: translate3d(0, 0, 0); } + +a.blog-post-inner { + display: block; + text-decoration: none; + height: 240px; + position: relative; + background-color: #FFFFFF; + border-radius: 12px; + width: auto; + padding: 24px; } + +a.blog-post-inner h3 { + color: #000000; } + +a.blog-post-inner p { + color: #8D99A4; } + +a.blog-post-inner:hover h3 { + color: #4360DF; } + +.blog-post:nth-child(1) { + padding-left: 0; } + +.blog-post:nth-child(3) { + padding-right: 0; } + +@media (max-width: 948px) { + .blog-posts { + width: 100%; } + .blog-post { + height: auto; + width: 100%; + padding: 0; + margin: 0 0 12px 0; } + .blog-post:last-child { + margin-bottom: 0; } + a.blog-post-inner { + height: auto; } + .blog-post span { + position: static; + margin: 24px 0 0 0; + color: #4360DF; } } + +.social-blocks { + display: flex; + flex-wrap: wrap; + width: 900px; + margin: 0 auto 24px; } + +.social-block { + width: 33.333%; + padding: 0 12px; + margin: 0 0 0 0; + cursor: pointer; } + +.social-block:nth-child(1) { + padding-left: 0; } + +.social-block:nth-child(3) { + padding-right: 0; } + +.social-block p { + text-decoration: none; + font-size: 16px; + line-height: 20px; + color: #8D99A4; } + +a.social-block-inner { + display: flex; + align-items: flex-start; + flex-direction: column; + justify-content: space-between; + height: 240px; + box-sizing: border-box; + position: relative; + background-color: #FFFFFF; + border-radius: 12px; + padding: 24px; + text-decoration: none; } + +a.social-block-inner .social-block-logo svg path { + fill: #8D99A4; } + +a.social-block-inner:hover .social-block-logo svg path { + fill: #4360DF; } + +@media (max-width: 948px) { + .social-blocks { + width: 100%; + margin: 0 auto 12px; } + .social-block { + width: 100%; + height: auto; + padding: 0; + margin: 0 0 12px 0; } + a.social-block-inner { + height: auto; + padding: 24px 24px 24px 24px; } + .social-block-logo { + margin-bottom: 16px; } + .social-block:last-child { + margin: 0; } } + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(120, 135, 148, 0.6); + z-index: 999; + box-sizing: border-box; + overflow: auto; + opacity: 0; + transform: translate3d(0, 0, 0) scale(1); + visibility: hidden; + transition: visibility .5s linear 0s, opacity .2s ease; } + +.overlay.overlay--shown { + transition-delay: 0s; + visibility: visible; + opacity: 1; + transform: translate3d(0, 0, 0) scale(1); } + +.popup { + box-sizing: border-box; + width: 900px; + margin: 132px auto 40px; + background-color: white; + border-radius: 10px; + padding: 0px; + position: relative; + box-shadow: 0 3px 7px 0 rgba(175, 192, 202, 0.41); + opacity: 0; + transform: translate3d(0, 15px, 0) scale(0.96); + visibility: hidden; + transition-delay: .2s; + transition: visibility 0.5s linear 0s, opacity 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.135, 1.425); } + +.popup a { + color: #57A7ED; + text-decoration: none; } + +.popup.popup--shown { + transition-delay: 0s; + visibility: visible; + opacity: 1; + transform: translate3d(0, 0, 0) scale(1); } + +.popup__steps { + font-size: 14px; + color: #97A4AD; + padding: 32px 0 4px 32px; } + +.popup__title { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 22px; + line-height: 23px; + padding: 0 0 12px 32px; } + +.popup__text { + font-size: 18px; + line-height: 26px; + padding: 0 32px 24px 32px; + color: #70808D; } + +.popup__text h5 { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 1px; + color: #49555F; + margin: 16px 0 0 0; } + +.popup__text h3 { + font-size: 18px; + color: #000000; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + padding: 8px 0 4px 0; } + +.popup__text p { + padding: 0 0 8px 0; } + +h3.terms-header { + font-size: 18px; + line-height: 26px; + padding: 0 32px 8px 32px; + color: #000000; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } + +.popup__button { + position: absolute; + top: -56px; + width: 42px; + height: 42px; + background-color: #ffffff; + border-radius: 50%; + opacity: .7; + cursor: pointer; + transition: opacity .2s ease; } + +.popup__button:hover { + opacity: 1; } + +.popup__button:hover { + opacity: 1; } + +.popup__button::after { + content: ""; + display: block; + position: absolute; + top: 13px; + left: 13px; + width: 16px; + height: 16px; + background-size: 16px; + background-repeat: no-repeat; } + +.popup__button.popup__button--close { + right: 0; } + +.popup__button.popup__button--close::after { + background-image: url(../img/icon-close.svg); } + +.popup__button.popup__button--minimize { + right: 54px; } + +.popup__button.popup__button--minimize::after { + background-image: url(../img/icon-minimize.svg); } + +.popup__buttons a { + margin: 0 10px 0 0; } + +.terms { + background: #F6F9FA; + border: 1px solid #E7ECEE; + border-radius: 10px; + height: 320px; + overflow: scroll; + font-size: 16px; + line-height: 22px; + color: #49555F; + padding: 16px 16px 16px 24px; + margin: 0 32px 0 32px; + counter-reset: paragraph; } + +.terms h6 { + padding-top: 15px; + padding-bottom: 10px; + font-weight: 600; } + +.terms a { + color: #57a7ed; } + +.terms strong { + font-weight: 700; } + +.terms ul { + padding: 0 0 25px 0; + list-style-type: circle; } + +.terms ul li { + margin-left: 15px; + padding-bottom: 5px; } + +.address-wrap { + padding: 0 0 32px 0; } + +.address__row { + display: flex; + background: #F6F9FA; + border: 1px solid #E7ECEE; + border-bottom: 0; + border-radius: 10px; + margin: 0 32px 0 32px; } + +.address__row:first-child { + border-radius: 10px 10px 0 0; } + +.address__row:last-child { + border-radius: 0 0 10px 10px; + border-bottom: 1px solid #E7ECEE; } + +.address__column { + width: 100%; + padding: 24px; } + +.address__column.address__column--half { + width: 50%; } + +.address__column.address__column--third { + width: 33.3%; + border-right: 1px solid #E7ECEE; } + +.address__column.address__column--highlighted { + background-color: #D7F4E8; + border-color: #B7EBD5; } + +.address__column.address__column--half:first-child { + border-right: 1px solid #E7ECEE; } + +.address__column.address__column--third:last-child { + border-right: 0; } + +.address__label { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 14px; + color: #A5B0B9; + letter-spacing: 1px; + text-transform: uppercase; + padding: 0 0 8px 0; } + +.address__column--highlighted .address__label { + color: #37C68A; } + +.address__label strong { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } + +.address__value { + font-size: 21px; + color: #545F69; } + +.address__column--highlighted .address__value { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + color: #37C68A; } + +.terms p { + padding: 0 0 18px 0; } + +.terms p:last-child { + padding: 0 0 0 0; } + +.checkbox-wrap { + position: relative; + padding: 12px 32px; + display: flex; + align-items: center; + justify-content: flex-start; } + +.checkbox-inner { + position: relative; + width: 24px; + height: 24px; + margin: 0 16px 0 0; } + +input[type=checkbox] { + visibility: hidden; + width: 24px; + height: 24px; } + +.checkbox-wrap label { + cursor: pointer; + position: absolute; + width: 24px; + height: 24px; + top: 0; + left: 0; + background-color: #FFF; + border: 1px solid #CED5D7; + border-radius: 5px; + transition: border-color .2s ease, background-color .2s ease; } + +.checkbox-wrap label:after { + content: ""; + opacity: 0; + position: absolute; + width: 16px; + height: 16px; + background-image: url(../img/icon-checkbox.svg); + background-size: 16px; + top: 4px; + left: 4px; + transform: scale(0.8); + transition: transform .3s ease, opacity .2s ease; } + +.checkbox-wrap input[type=checkbox]:checked + label:after { + opacity: 1; + transform: scale(1); } + +.checkbox-wrap input[type=checkbox]:checked + label { + background-color: #57A7ED; + border-color: #57A7ED; } + +.checkbox-wrap input[type=checkbox]:disabled + label { + background-color: #F6F9FA; + border-color: #E7ECEE; } + +.pseudo-label { + font-size: 16px; + color: #49555F; + line-height: 24px; } + +.popup__footer { + padding: 24px 32px 24px 32px; + margin: 0 0 0 0; } + +.popup__footer-title { + text-align: left; + font-size: 16px; + padding: 0 0 24px 0; } + +.input-wrap { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; } + +.button.button--apply { + background-color: #4360df; + color: #ffffff; } + +.button.button--apply:hover { + background-color: rgba(67, 96, 223, 0.8); + color: #ffffff; } + +.button.button--recommend { + background-color: rgba(67, 96, 223, 0.1); + color: #4360df; } + +.button.button--recommend:hover { + background-color: rgba(67, 96, 223, 0.2); + color: #4360df; } + +.tooltip { + display: none; + position: absolute; + font-size: 14px; + line-height: 17px; + color: #FFFFFF; + background-color: rgba(74, 92, 105, 0.8); + padding: 12px; + text-align: center; + width: 220px; + border-radius: 8px; + top: -72px; + right: 10px; + opacity: 0; + transform: translate3d(0, -8px, 0) scale(1); + visibility: hidden; + transition: visibility .5s linear 0s, opacity .2s ease, transform .2s ease; } + +.tooltip.tooltip--shown { + transition-delay: 0s; + visibility: visible; + opacity: 1; + transform: translate3d(0, 0, 0) scale(1); } + +.tooltip::after { + content: ""; + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-width: 5px 6px 0 6px; + border-color: rgba(74, 92, 105, 0.8) transparent transparent transparent; + bottom: -5px; + left: 50%; + margin: 0 0 0 -4px; } + +.popup-name-field { + text-align: left; + background-color: transparent; + color: #49555F; + width: 200px; + padding: 0 0; + margin: 0 24px 0 0; + font-family: 'PostGrotesk-Book', sans-serif; + box-sizing: border-box; + height: 45px; + line-height: 45px; + border-radius: 0; + border-bottom: 1px solid #D2DDE1; + transition: background-color .2s ease, border-color .2s ease, border-width .2s ease; + font-weight: 400; + font-size: 16px; } + +.popup-name-field::-webkit-input-placeholder { + color: #AEB5BA; } + +.popup-name-field:focus { + border-color: #CED5D7; } + +@media (max-width: 960px) { + .overlay { + padding: 0 24px; + box-sizing: border-box; } + .popup { + width: 100%; } + .address__row { + margin: 0 16px 0 16px; + flex-wrap: wrap; } + .address__column { + padding: 16px; } + .address__column.address__column--long { + overflow: scroll; } + .address__column.address__column--half, + .address__column.address__column--third { + width: 100%; + border-right: 0; + border-bottom: 1px solid #E7ECEE; } + .address__column.address__column--half:first-child { + border-right: 0; + border-bottom: 1px solid #E7ECEE; } + .address__column.address__column--third:last-child { + border-bottom: none; } + .address__label { + padding: 0 0 4px 0; } + .address__value { + font-size: 18px; } } + +@media (max-width: 600px) { + .overlay { + padding: 0 16px; } + .popup { + margin: 96px auto 64px; } + .popup__steps { + padding: 18px 0 4px 16px; } + .popup__title { + font-size: 20px; + padding: 0 0 12px 16px; } + .popup__text { + font-size: 16px; + line-height: 24px; + padding: 0 16px 16px 16px; } + .terms { + margin: 0 16px 0 16px; + padding: 12px 12px 12px 24px; + height: 220px; } + .checkbox-wrap { + padding: 8px 16px; + align-items: flex-start; } + .checkbox-inner { + margin: 3px 16px 0 0; } + .popup__footer { + padding: 16px 16px 18px 16px; } + .input-wrap { + align-items: center; + justify-content: center; } + .button.button--apply { + width: 100%; + text-align: center; + margin-right: 6px; } + .button.button--recommend { + width: 100%; + text-align: center; + margin-left: 6px; } + .button.button--recommend span { + display: none; } + .tooltip { + right: 50%; + top: auto; + bottom: -68px; + z-index: 200; + margin: 0 -110px 0 0; + transform: translate3d(0, 8px, 0) scale(1); } + .tooltip::after { + bottom: auto; + top: -5px; + border-width: 0 6px 5px 6px; + border-color: transparent transparent rgba(74, 92, 105, 0.8) transparent; } + .popup__footer-title { + padding: 0 0 12px 0; } + .popup-name-field { + margin: 0 16px 12px 16px; + width: 100%; } + .button.button--agree { + width: 100%; } + .address-wrap { + padding: 0 0 16px 0; } + .address-wrap__inner { + text-align: left; + margin: 0 16px 0 16px; + padding: 12px; + font-size: 16px; + overflow: scroll; } } + +.footer { width: 100%; display: flex; justify-content: center; background-color: #262A39; position: relative; - z-index: 998; -} + z-index: 998; } .footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; - width: 1024px; -} + width: 1024px; } .footer-logo-wrap { width: 317px; display: flex; - text-align: center; -} + text-align: center; } .footer-logo-wrap__inner { width: 100%; @@ -580,104 +1698,86 @@ select[multiple] { flex-direction: column; justify-content: space-between; align-items: center; - padding: 32px 0 75px 0; -} + padding: 32px 0 75px 0; } a.footer-logo { display: block; width: 52px; height: 52px; background-size: 52px; - background-image: url(../img/footer-logo.svg); -} + background-image: url(../img/footer-logo.svg); } a.footer-logo:hover { - opacity: .8; -} + opacity: .8; } .footer-address { color: #FFFFFF; padding: 20px 0 0 0; - opacity: .5; -} + opacity: .5; } .footer-table { width: 317px; display: flex; - justify-content: space-between; -} + justify-content: space-between; } .footer-table__column { box-sizing: border-box; - padding:56px 0; -} + padding: 56px 0; } .footer-header { color: #FFFFFF; opacity: .5; font-size: 17px; - margin: 0 0 40px 0; -} + margin: 0 0 40px 0; } .footer-link { height: 32px; line-height: 32px; font-size: 16px; - margin: 0 0 15px 0; -} + margin: 0 0 15px 0; } .footer-link a { text-decoration: none; display: flex; - align-items: center; -} + align-items: center; } .footer-icon { display: inline-block; width: 32px; height: 32px; - background-color: rgba(255, 255, 255, .1); + background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; margin: 0 15px 0 0; background-repeat: no-repeat; background-size: 24px; - background-position: center; -} + background-position: center; } .footer-link--fb .footer-icon { - background-image: url(../img/icon_fb.svg); -} + background-image: url(../img/icon_fb.svg); } .footer-link--tw .footer-icon { - background-image: url(../img/icon_tw2.svg); -} + background-image: url(../img/icon_tw2.svg); } .footer-link--sl .footer-icon { - background-image: url(../img/icon_sl2.svg); -} + background-image: url(../img/icon_sl2.svg); } .footer-link--gh .footer-icon { - background-image: url(../img/icon_gh2.svg); -} + background-image: url(../img/icon_gh2.svg); } .footer-link--rd .footer-icon { - background-image: url(../img/icon_rd2.svg); -} + background-image: url(../img/icon_rd2.svg); } .footer-link--yt .footer-icon { - background-image: url(../img/icon_yt.svg); -} + background-image: url(../img/icon_yt.svg); } .footer-link a { - color: #FFFFFF; -} + color: #FFFFFF; } .footer-link a:hover { - opacity: .8 -} + opacity: .8; } .language-switcher { - font-family: $PostGroteskBook; + font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: #FFFFFF; -webkit-appearance: none; font-size: 16px; @@ -686,185 +1786,278 @@ a.footer-logo:hover { background-image: url(../img/icon_dropdown-white.svg); background-size: 24px; background-repeat: no-repeat; - background-position: right center; -} + background-position: right center; } -.language-switcher:focus{ - outline: none; -} +.language-switcher:focus { + outline: none; } @media (max-width: 1140px) { - .footer-inner { width: 820px; - justify-content: space-around; - } - + justify-content: space-around; } .footer-logo-wrap { - width: 200px; - } - -} + width: 200px; } } @media (max-width: 767px) { - .footer { - border-top: 0px; - } - + border-top: 0px; } .footer.footer--page { - border-top: 0px solid #4A5C69 - } - + border-top: 0px solid #4A5C69; } .footer-inner { padding: 30px 0 0 0; - flex-direction: column; - } - + flex-direction: column; } .footer-table { flex-direction: column; align-items: center; - justify-content: center; - } - + justify-content: center; } .footer-table__column { text-align: center; - padding: 10px 16px; - } - + padding: 10px 16px; } .footer-logo-wrap { width: auto; - order: 2 - } - + order: 2; } .footer-header { - margin: 0 0 10px 0; - } - + margin: 0 0 10px 0; } .footer-logo-wrap__inner { width: 100%; padding: 32px 0 40px 0; align-items: center; - text-align: center; - } - + text-align: center; } .footer-link { text-align: center; height: 24px; line-height: 24px; - margin: 0 0 10px 0; - } - + margin: 0 0 10px 0; } .footer-link a { justify-content: center; - text-align: center; - } - + text-align: center; } .footer-icon { - display: none; - } + display: none; } } - .footer-logo { - //display: none; - } - - -} -*/ body { - font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; - font-size: 16px; + font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 400; - line-height: 1em; - color: black; + font-size: 15px; + line-height: 25px; + color: #000000; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; - background-color: #eef2f5; } - -.overlay { - display: none; } + background-color: #EEF2F5; } .home-wrap { - display: none; } + background-color: #EEF2F5; + position: relative; + z-index: 5; + width: 1200px; + border-radius: 12px; + margin: 0 auto; + position: relative; + align-content: center; + display: flex; + flex-direction: column; } -.footer { - display: none; } +@media (max-width: 1248px) { + .home-wrap { + width: 100%; + background-color: transparent; + padding: 0 24px; } } -a { - text-decoration: none; - color: #4360df; } - -a.link-arrow { - position: relative; } - -a.link-arrow::after { - content: ""; - position: absolute; - width: 24px; - height: 24px; - display: block; - background-size: 24px; - background-repeat: no-repeat; - background-position: top right; - padding: 0 8px 0 8px; - top: -2px; - right: -24px; - background-image: url(../img/link-arrow.svg); - transition: transform .2s ease; - opacity: .4; } - -a.link-arrow:hover::after { - transform: translate3d(4px, 0, 0); } +@media (max-width: 996px) { + .home-wrap { + padding: 0 12px; + overflow: hidden; } } .button, a.button { - display: flex; - align-items: center; - justify-content: center; + display: block; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + text-decoration: none; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; + color: #FFFFFF; line-height: 24px; - font-weight: 500; - padding: 9px 24px 8px; - text-decoration: none; - background-color: white; - color: #4360df; - box-shadow: 0px 2px 4px rgba(43, 59, 71, 0.124066); - border-radius: 20px; } + padding: 10px 32px 9px; + border-radius: 22px; + background-color: rgba(0, 0, 0, 0.1); } -.main-text { - color: black; - font-size: 16px; - line-height: 26px; } - -.secondary-text { - color: #939ba1; - font-size: 16px; - line-height: 26px; } - -h1 { - font-weight: 700; - font-size: 38px; - line-height: 1em; } - -h4 { - font-weight: 600; - font-size: 16px; - line-height: 1.6em; } - -h5 { - text-transform: uppercase; - letter-spacing: 1px; - color: #939ba1; - font-weight: 500; - font-size: 14px; } - -.timestamp { - text-transform: uppercase; - letter-spacing: 1px; - color: #939ba1; - font-weight: 400; - font-size: 12px; } +.button.button--secondary { + background-color: rgba(255, 255, 255, 0.1); } .button:hover, a.button:hover { - background-color: #f9fafe; } + background-color: rgba(0, 0, 0, 0.2); } + +.button.button--secondary:hover, a.button.button--secondary:hover { + background-color: rgba(255, 255, 255, 0.2); } + +.section-header { + margin: 0 auto; + width: 900px; + padding: 100px 0 32px 0; } + +.section-header h2 { + font-size: 26px; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + padding: 0 0 8px 0; } + +.section-header p { + font-size: 16px; + width: 592px; + color: #8D99A4; + line-height: 24px; } + +@media (max-width: 948px) { + .section-header { + width: 100%; + padding: 42px 0 16px 0; } + .section-header h2 { + font-size: 22px; + padding: 0 0 4px 0; } + .section-header p { + width: 100%; } } + +.inner-header { + margin: 0 auto; + display: flex; + align-items: center; + flex-direction: column; + width: 480px; + padding: 70px 0 32px 0; + text-align: center; } + +.inner-header h2 { + font-size: 26px; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + padding: 0 0 8px 0; } + +.inner-header p { + font-size: 16px; + color: #8D99A4; + line-height: 24px; } + +.sections { + width: 1200px; + display: flex; + align-items: center; + flex-direction: column; + margin: 0 auto; + background-color: #FFFFFF; + border-radius: 12px; } + +.section { + width: 900px; + height: 460px; + display: flex; + align-items: center; + justify-content: space-between; } + +.section:last-child { + border-bottom: none; } + +.section__text { + width: 360px; + text-align: left; } + +.section__text h2 { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 24px; + line-height: 30px; + color: #000000; + margin: 0 0 8px 0; } + +.section__text .text { + font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 25px; + color: #8D99A4; } + +.section__image { + position: relative; + width: 300px; + height: 300px; } + +.section-link-wrap { + display: flex; + align-items: center; + margin: 16px 0 0 0; } + +a.section-link { + display: block; + color: #4360DF; + text-decoration: none; + padding: 0 10px 0 0; } + +a.section-link-icon { + display: block; + width: 24px; + height: 24px; + border-radius: 50%; + background-color: rgba(67, 96, 223, 0.1); + background-image: url(../img/link-arrow.svg); + background-size: 24px; + background-position: center; + background-repeat: no-repeat; } + +.section__text .text:hover a.section-link-icon { + opacity: 1; + transform: scale(1); } + +.section-link-wrap:hover a.section-link-icon { + background-color: rgba(67, 96, 223, 0.14); } + +.section:nth-child(odd) .section__text { + order: 1; } + +.section:nth-child(odd) .section__image { + order: 0; } + +@media (max-width: 1248px) { + .sections { + width: 100%; } + .section { + width: 900px; } } + +@media (max-width: 996px) { + .inner-header { + padding: 32px 24px 32px; + width: 420px; } + .inner-header h2 { + font-size: 22px; } + .section { + width: 100%; + height: 580px; + padding: 0 24px; + flex-direction: column; + padding: 0; + border-bottom: 1px solid #E7E5EB; } + .section__text { + width: 420px; + text-align: center; + padding: 16px 24px 32px; } + .section__text h2 { + font-size: 20px; + line-height: 24px; + margin: 0 0 4px 0; } + .section-link-wrap { + justify-content: center; } + a.section-link-icon { + opacity: 1; + transform: scale(1); } + .section .section__text { + order: 1; } + .section .section__image { + order: 0; + margin: 36px 0 0 0; } } + +@media (max-width: 640px) { + .inner-header { + padding: 32px 24px 32px; + width: 100%; } + .inner-header h2 { + font-size: 22px; } + .section__text { + width: 100%; + padding: 16px 32px 32px; } + .section__image { + width: 260px; + height: 300px; + margin: 12px 0 0 0; } } diff --git a/img/andrei.png b/img/andrei.png new file mode 100644 index 0000000..8328421 Binary files /dev/null and b/img/andrei.png differ diff --git a/img/dd.png b/img/dd.png new file mode 100644 index 0000000..5337538 Binary files /dev/null and b/img/dd.png differ diff --git a/img/denis.png b/img/denis.png new file mode 100644 index 0000000..d467fca Binary files /dev/null and b/img/denis.png differ diff --git a/img/euge.png b/img/euge.png new file mode 100644 index 0000000..a9809d1 Binary files /dev/null and b/img/euge.png differ diff --git a/img/hester.png b/img/hester.png new file mode 100644 index 0000000..cd50817 Binary files /dev/null and b/img/hester.png differ diff --git a/img/icon-android.svg b/img/icon-android.svg deleted file mode 100644 index 2cb771c..0000000 --- a/img/icon-android.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/img/icon-apple.svg b/img/icon-apple.svg deleted file mode 100644 index b38e9aa..0000000 --- a/img/icon-apple.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/img/icon_add-blue.svg b/img/icon_add-blue.svg new file mode 100644 index 0000000..32004e7 --- /dev/null +++ b/img/icon_add-blue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/icon_fb.svg b/img/icon_fb.svg new file mode 100644 index 0000000..e69de29 diff --git a/img/icon_gh2.svg b/img/icon_gh2.svg new file mode 100644 index 0000000..d6c40df --- /dev/null +++ b/img/icon_gh2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/icon_rd2.svg b/img/icon_rd2.svg new file mode 100644 index 0000000..be215b3 --- /dev/null +++ b/img/icon_rd2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/icon_tw2.svg b/img/icon_tw2.svg new file mode 100644 index 0000000..672e79e --- /dev/null +++ b/img/icon_tw2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/icon_yt.svg b/img/icon_yt.svg new file mode 100644 index 0000000..36ab55f --- /dev/null +++ b/img/icon_yt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo-blue.svg b/img/logo-blue.svg new file mode 100644 index 0000000..3c86f19 --- /dev/null +++ b/img/logo-blue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo-dribbble.svg b/img/logo-dribbble.svg new file mode 100644 index 0000000..b42e8e8 --- /dev/null +++ b/img/logo-dribbble.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo-github.svg b/img/logo-github.svg new file mode 100644 index 0000000..6fc11bb --- /dev/null +++ b/img/logo-github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo-youtube.svg b/img/logo-youtube.svg new file mode 100644 index 0000000..983fce1 --- /dev/null +++ b/img/logo-youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..f93c6d5 --- /dev/null +++ b/img/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/maciej.png b/img/maciej.png new file mode 100644 index 0000000..48ca905 Binary files /dev/null and b/img/maciej.png differ diff --git a/img/message.svg b/img/message.svg deleted file mode 100644 index a8e1273..0000000 --- a/img/message.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/img/pat.png b/img/pat.png new file mode 100644 index 0000000..80bc5a9 Binary files /dev/null and b/img/pat.png differ diff --git a/img/pattern.png b/img/pattern.png new file mode 100644 index 0000000..cd9c5c2 Binary files /dev/null and b/img/pattern.png differ diff --git a/img/philip.png b/img/philip.png new file mode 100644 index 0000000..8e45a17 Binary files /dev/null and b/img/philip.png differ diff --git a/img/status-logo.svg b/img/status-logo.svg index d01097a..b6c161e 100644 --- a/img/status-logo.svg +++ b/img/status-logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/img/wallet-back.svg b/img/wallet-back.svg deleted file mode 100644 index 0ce9f2e..0000000 --- a/img/wallet-back.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/img/wallet.svg b/img/wallet.svg deleted file mode 100644 index 0603868..0000000 --- a/img/wallet.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/index.html b/index.html index 9881e8d..cd912a1 100755 --- a/index.html +++ b/index.html @@ -6,16 +6,16 @@ - - + + - - - - - + + + + + - Status + Status Design @@ -37,228 +37,508 @@ - + - - +
+ + +
+
+
+
+
- +
-
-

Your portal to the decentralized web

-

Status is an open source community of X,Y, Z building the tools to drive the mass adoption of ethereum.

+

Status Design

+

We’re the Status Design team, and we're helping to create the tools that'll lead to a more open and equitable Internet for us all

- -
- -
-
-
- -
-
-
-
-
-
- -
-
OMG
-
-
- -
-
ETH
-
-
-
- -
-
ANT
-
-
-
- -
-
SNT
-
-
-
-
- -
-
DAI
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
- -
- -
-
-
Announcements
- -

Join the #CryptoLife hackathon

-

Status is a community of people all over the world connected by a set of values and Status is a community of people al.

-
- -
- -
-
-
We Stand on our Principles
- -

Join the #CryptoLife hackathon

-

Status is a community of people all over the world connected by a set of values and principles. We strive for X,Y, Z.

-
- -
- - - -
-
- -
+
+
+

How We Work

+

We work in an unconventional way, and we're always trying to improve. We value autonomy and meritocracy and can be found all over the world, designing decentralization into every part of life.

+
+
+
+

Swarms

+
+

We’re an entirely decentralised and transparent organization, where teams are started by anybody who has a valuable idea. As designers, we help bring these ideas to life in an open and highly collaborative environment.

+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+

Objectives and Key Results

+
+

Our team has ambitious and clearly-defined goals. We set objectives and key results (OKRs) in order to have direction, stay focused, and measure our progress.

+ +
+
+
+
+ +
+
+
+
+
+

Status Open Bounty

+
+

We create products together with the help of the wider Status community. Status Open Bounty is the space where commited open source developers and fellow designers are rewarded for their contributions to Status.

+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +

Who We Are

We’re a diverse group of designers and researchers, contributing to Ethereum and the development of Web3. We come from a wide variety of backgrounds, and work remotely from all around the world.

-
- -
-
-

Status App

-

Our collective goal is the mass adoption of Ethereum. Status is a growing ecosystem of projects and contributors fostering a rich distributed web.

+
+
+
+

Hester Bruikman

+

UX Researcher

+
+
+
+
+
+

Andrei Mironov

+

Design Lead

+
+
+
+
+
+

Maciej Zadykowicz

+

UI/UX Designer

+
-
-
-

Status App

-

Our collective goal is the mass adoption of Ethereum. Status is a growing ecosystem of projects and contributors fostering a rich distributed web.

-
-
- -
-
-

Status App

-

Our collective goal is the mass adoption of Ethereum. Status is a growing ecosystem of projects and contributors fostering a rich distributed web.

-
-
- -
-
-

Status App

-

Our collective goal is the mass adoption of Ethereum. Status is a growing ecosystem of projects and contributors fostering a rich distributed web.

-
-
- -
-
-

Status App

-

Our collective goal is the mass adoption of Ethereum. Status is a growing ecosystem of projects and contributors fostering a rich distributed web.

-
-
- -
-
-

Status App

-

Our collective goal is the mass adoption of Ethereum. Status is a growing ecosystem of projects and contributors fostering a rich distributed web.

+
+
+

+ 65 more core contributors

+

Want to join? Contact us, we’ll be happy to have a chat

+ Contact Us
-
+
+

Join Us

+

We’re looking for talented and passionate individuals to join our team! Take a look at the latest open roles:

+
+
+
+
+
+
+
+

UI/UX Designer

+

As a UI/UX designer, you’ll tackle complex and exciting problems, transforming them into elegant, easy-to-use, and user-centered solutions.

+
+
+ +

Get $1000 in SNT for a successful Recommendation

+
+
+
+ + + + +
+
+ +
+

Read our Blog

+

Check out stories and thoughts we think are worth sharing.

+
+ + + +
+

Follow Us

+

You can see most of Status Design’s work through these channels.

+
+ + +