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; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after { content: ""; content: none; } q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } div { box-sizing: border-box; } /* ---------------------------------------------------------------------------------------------------- Super Form Reset A couple of things to watch out for: - IE8: If a text input doesn't have padding on all sides or none the text won't be centered. - The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders. - You NEED to set the font-size and family on all form elements - Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs - You can style the upload button in webkit using ::-webkit-file-upload-button - ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out. - IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block. - By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs ----------------------------------------------------------------------------------------------------*/ input, label, select, button, textarea { margin: 0; border: 0; padding: 0; display: inline-block; vertical-align: middle; white-space: normal; background: none; line-height: 1; /* Browsers have different default form fonts */ font-size: 13px; font-family: Arial; } /* Remove the stupid outer glow in Webkit */ input:focus { outline: 0; } /* Box Sizing Reset -----------------------------------------------*/ /* All of our custom controls should be what we expect them to be */ input, textarea { box-sizing: content-box; } /* These elements are usually rendered a certain way by the browser */ button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select { box-sizing: border-box; } /* Text Inputs -----------------------------------------------*/ /* Button Controls -----------------------------------------------*/ input[type=checkbox], input[type=radio] { width: 13px; height: 13px; } /* File Uploads -----------------------------------------------*/ /* Search Input -----------------------------------------------*/ /* Make webkit render the search input like a normal text field */ input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; } /* Turn off the recent search for webkit. It adds about 15px padding on the left */ ::-webkit-search-decoration { display: none; } /* Buttons -----------------------------------------------*/ button, input[type="reset"], input[type="button"], input[type="submit"] { /* Fix IE7 display bug */ overflow: visible; width: auto; } /* IE8 and FF freak out if this rule is within another selector */ ::-webkit-file-upload-button { padding: 0; border: 0; background: none; } /* Textarea -----------------------------------------------*/ textarea { /* Move the label to the top */ vertical-align: top; /* Turn off scroll bars in IE unless needed */ overflow: auto; } /* Selects -----------------------------------------------*/ 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; } body { background-color: #f2f5f8; font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 15px; line-height: 25px; color: #49555f; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.popup-open { overflow: hidden; } a { color: #49555f; text-decoration: none; transition: opacity .2s ease; } .button { display: block; height: 44px; line-height: 43px; padding: 0 20px; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; text-transform: uppercase; text-align: center; letter-spacing: 1px; color: white; background-color: #57a7ed; border-radius: 8px; transform: translate3d(0, 0, 0) scale(1); transition: transform .1s ease, box-shadow .2s ease, background-color .2s ease; -webkit-appearance: none; cursor: pointer; } .button:active { transform: translate3d(0, 0, 0) scale(0.99); } .button:disabled, .button.button--disabled { color: rgba(255, 255, 255, 0.4); background-color: #57a7ed; cursor: default; } .button:hover { background-color: #57a7ed; } .button.button--disabled:hover, .button:disabled:hover { cursor: default; color: rgba(255, 255, 255, 0.4); background-color: #57a7ed; } .header { background: linear-gradient(90deg, #57A7ED 50%, #54A3E8 50%); } .header-pattern { background-image: url(../img/new-site/SOB_tile4@2x.png); background-size: 20px; background-position: left top; background-repeat: repeat; padding-bottom: 134px; } @media (min-width: 1230px) { .header { margin: 0 auto; margin-top: 40px; border-radius: 10px; z-index: 900; max-width: 1200px; } .header-welcome { margin: 0; border-radius: 0; box-shadow: 0; max-width: inherit; padding-bottom: 0; } } .header__inner { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: justify; justify-content: space-between; padding: 16px 0 0 16px; } @media (min-width: 640px) { .header__inner { -ms-flex-direction: row; flex-direction: row; padding: 40px 0 38px 40px; } } .header-section { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .header-section--center { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; } @media (min-width: 640px) { .header-section--right { -ms-flex-pack: end; justify-content: flex-end; } } .nav { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; opacity: 1; } .nav__item:first-child { padding-left: 0; } a.logo { display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-align: start; align-items: flex-start; } .logo__icon-wrap { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: 56px; height: 56px; background: white; box-shadow: 0 2px 4px 0 rgba(22, 51, 81, 0.14); border-radius: 50%; transition: transform .1s ease, box-shadow .2s ease, background-color .2s ease; } .logo__icon { height: 24px; width: 24px; background-image: url(../img/new-site/status-symbol.svg); background-size: 24px; background-position: left; } .logo__text { margin: 8px 0 0 10px; } .logo__title { display: block; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 21px; line-height: 21px; color: white; } .logo__subtitle { display: block; font-size: 15px; line-height: 15px; color: #ffffff; margin: 4px 0 0 0; opacity: .4; } .nav a { font-size: 15px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 15px 15px; } .header .nav a { color: #ffffff; transition: opacity .2s ease; position: relative; } .header .nav a:hover { opacity: 0.5; } .header #button-login { position: absolute; top: 16px; right: 16px; padding: 13px 15px; height: inherit; line-height: inherit; background-color: rgba(255, 255, 255, 0.2); } @media (min-width: 640px) { .header #button-login { position: inherit; margin-right: 30px; } } .nav a:hover { opacity: .9; } .shares { margin: 0 0 0 16px; } .social-links { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; } .shares .social-links { -ms-flex-pack: end; justify-content: flex-end; } .social-links li.social-link { margin: 0 5px; } .social-links li.social-link:last-child { margin: 0 0 0 5px; } li.social-link a { display: block; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); background-repeat: no-repeat; background-size: 20px; background-position: center; transition: transform .2s ease; cursor: pointer; } .social-link.social-link--fb a { background-image: url(../img/new-site/icon_fb.svg); } .social-link.social-link--tw a { background-image: url(../img/new-site/icon_tw2.svg); } .social-link.social-link--sl a { background-image: url(../img/new-site/icon_sl2.svg); } .social-link.social-link--gh a { background-image: url(../img/new-site/icon_gh2.svg); } .social-link.social-link--rd a { background-image: url(../img/new-site/icon_rd2.svg); } .social-link:hover a { -ms-transform: scale(1.06); transform: scale(1.06); } @media (max-width: 740px) { .logo__icon-wrap { height: 52px; width: 52px; } .logo__text { margin: 7px 0 0 10px; } .logo__title { font-size: 19px; } .header { background: #57A7ED 50%; } } .page { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; } .page__inner { width: 1120px; position: relative; } .page__content-wrap { position: relative; width: 1180px; margin: 0 0 40px 0; background: white; box-shadow: 0px -2px 18px 0px rgba(72, 89, 102, 0.25); border-radius: 10px; } .page__content { max-width: 800px; margin: 0 auto; padding: 50px 40px 100px; background: white; border-radius: 8px; } .page__content.page__content--centered { max-width: 100%; padding: 50px 160px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-direction: column; flex-direction: column; text-align: center; } .page__title { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 24px; line-height: 30px; margin: 0 0 20px 0; } .page__subheader { font-size: 18px; line-height: 26px; margin: 0 0 25px 0; color: #92999f; } .page__content p { margin: 0 0 10px 0; } .page__content p a { color: #4957b8; } .page__content p strong { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .page__content.page__content--centered .page__title { max-width: 500px; } .page__content.page__content--centered .page__text { max-width: 500px; } .page h3 { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 22px; margin: 32px 0 8px 0; } .page h5 { font-size: 15px; opacity: 1; padding: 16px; } .page__social { width: 100%; padding: 48px 0; } .page__social-buttons { width: 100%; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .page__social-button-wrap { -ms-flex-preferred-size: 33.3%; flex-basis: 33.3%; -ms-flex-negative: 1; flex-shrink: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 12px; position: relative; border-radius: 8px; border: 1px solid #e9eaf4; text-align: center; box-shadow: 0 2px 5px 0 rgba(71, 91, 106, 0.12); transition: box-shadow .2s ease; } .page__social-button-wrap:first-child { margin-left: 0; } .page__social-button-wrap:last-child { margin-right: 0; } .page__social-button-wrap:hover { box-shadow: 0 4px 10px 0 rgba(71, 91, 106, 0.16); } .page__social-button { padding: 24px; height: 92px; overflow: hidden; } .big-button-wrap { margin: 48px 0 0 0; } .button.button--big { height: 56px; line-height: 56px; font-size: 15px; letter-spacing: 1.2px; } .button.button--secondary.button--page { display: inline-block; padding: 0 40px; background-color: #4A5C69; color: white; } .button.button--secondary.button--page.button--page--slack { background-color: #E3306D; } .button.button--secondary.button--page.button--page--wiki { background-color: #4A55BF; } .button.button--secondary.button--page:hover { opacity: .8; background-color: #4A5C69; } .button.button--secondary.button--page.button--page--slack:hover { opacity: .8; background-color: #E3306D; } .button.button--secondary.button--page.button--page--wiki:hover { opacity: .8; background-color: #4A55BF; } .page__social-button-label { display: block; text-align: center; opacity: .6; padding: 16px; } .page__footer { position: absolute; bottom: 0; left: 0; width: 100%; display: -ms-flexbox; display: flex; text-align: center; font-size: 13px; line-height: 15px; letter-spacing: 1px; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; text-transform: uppercase; border-top: 1px solid #e9eaf4; } .page__footer .page__footer-link { display: block; text-align: center; width: 100%; padding: 20px 0; transition: opacity .2s ease; } .page__footer .page__footer-link:hover { opacity: .6; } @media (max-width: 1220px) { .page__content-wrap { width: 1080px; top: -10px; margin: 0 0 30px 0; } } @media (max-width: 1140px) { .page__social { padding: 16px 0; } .page__social-buttons { -ms-flex-wrap: wrap; flex-wrap: wrap; } .page__social-button-wrap { width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .page__social-button-wrap { margin-left: 0; margin-right: 0; } .page { margin: 20px 20px 0 20px; } .page__content-wrap { width: 100%; } .page__content { width: auto; } } @media (max-width: 840px) { .page__content { margin: 0 30px; padding: 50px 20px 100px; } .page__content-wrap { top: -20px; margin: 0 0 20px 0; } .page__content.page__content--centered { padding: 100px 20px; } } @media (max-width: 767px) { .page { margin: 0; } .page__content.page__content--centered, .page__content { padding: 40px 0 80px 0; } .page__content-wrap { top: -10px; margin: 0; } .page__title { font-size: 18px; line-height: 26px; margin: 0 0 10px 0; } .page__subheader { font-size: 16px; line-height: 20px; margin: 0 0 15px 0; } } .welcome-block { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; position: relative; top: -28px; } .welcome-block__top { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; width: 550px; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; text-align: center; } .welcome-block__image { width: 126px; height: 138px; background-image: url(../img/new-site/welcome@2x.png); background-size: 126px; background-position: center; margin: 0 0 16px 0; } .welcome-block__top h2 { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 500; line-height: 1.36; text-align: center; color: #42505c; } .welcome-block__top p { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.39; text-align: center; color: #8d99a4; margin-top: 24px; margin-bottom: 10px; } .welcome-block .button { width: 200px; } .welcome-home-link { display: block; padding-top: 24px; padding-bottom: 60px; margin: 0 auto; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.41; text-align: center; color: #8d99a4; } .welcome-home-link:hover { opacity: 1; } .welcome-actions { max-width: 800px; margin: 0 auto; border-radius: 8px; background-color: #ffffff; box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68); } .welcome-action { -ms-flex: 1; flex: 1; padding: 24px 32px; } @media (min-width: 640px) { .welcome-actions { display: -ms-flexbox; display: flex; } .welcome-action:last-of-type { padding-left: 32px; border-left: solid 1px #ecf0f3; } } .welcome-action h2 { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.72; text-align: left; color: #42505c; } .welcome-action p { opacity: 0.5; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; text-align: left; color: #42505c; } .welcome-icon { width: 32px; height: 32px; padding: 7px; border-radius: 100px; border: solid 1px #ecf0f3; } .welcome-button { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-top: 16px; border-radius: 8px; background-color: rgba(87, 167, 237, 0.2); border: solid 1px rgba(199, 206, 209, 0.12); font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.15; letter-spacing: 1px; text-align: center; color: #57a7ed; padding: 15px; } .welcome-action:first-of-type .welcome-button { margin-bottom: 40px; } @media (max-width: 740px) { .welcome-block__top { width: 100%; padding: 0 32px; } .welcome-block__top h2 { font-size: 22px; line-height: 26px; padding: 0 24px; } .welcome-block__top p { padding: 0 24px; } .welcome-block__image { -ms-transform: scale(0.9); transform: scale(0.9); } } .news { width: 100%; font-size: 15px; line-height: 22px; padding: 16px 0; background: #8AEBAC; color: rgba(0, 0, 0, 0.6); text-align: center; } .news strong { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .news.news--dark { background-color: #4A5C69; color: #FFFFFF; } .news.news--finish { background-color: #eef2f5; color: #49555F; } .news.news--hidden { display: none; } .news a { display: inline-block; padding: 2px 12px; border-radius: 8px; color: #49555F; background-color: rgba(0, 0, 0, 0.1); margin: 0 0 0 12px; transition: background-color .2s ease, color .2s ease; } .news a:hover { background-color: rgba(255, 255, 255, 0.8); } @media (max-width: 600px) { .news { padding: 6px 16px; } .news a { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; display: inline; background-color: transparent; padding: 0; margin: 0; text-decoration: underline; } } .cards { position: relative; width: 300px; height: 220px; } .card { position: absolute; left: 0; top: 0; width: 246px; height: 156px; border-radius: 10px; background-color: #FFFFFF; box-shadow: 0 5px 11px 0 rgba(31, 16, 54, 0.57); -ms-transform: c; transform: c; } .card-wrap { transition: transform .3s ease; } .shown .cards:hover .card-wrap--purple { transform: rotate(1deg) translate3d(0, 5px, 0); } .shown .cards:hover .card-wrap--white { transform: rotate(-2deg) translate3d(-5px, -4px, 0); } .card.card--purple { opacity: 0; position: absolute; left: 35px; top: 34px; background-color: #6E34CC; transform: rotate(34deg) scale(0.56) translate3d(0, 10px, 0); transition: transform 0.86s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; transition-delay: .1s; } .card.card--white { opacity: 0; left: 25px; transform: rotate(55deg) scale(0.6) translate3d(0, 80px, 0); transition: transform 0.7s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; } .shown .card.card--purple { opacity: 1; transform: rotate(14deg) scale(0.86) translate3d(0, 0, 0); } .shown .card--white { opacity: 1; transform: rotate(5deg) scale(0.9) translate3d(0, 0, 0); } .card__chip { position: absolute; left: 36px; top: 46px; width: 28px; height: 22px; background-image: url(../img/new-site/chip@2x.png); background-size: 28px; } .card__logo { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; background-image: url(../img/new-site/cardlogo.svg); background-size: 40px; } .card--purple .card__logo { background-image: url(../img/new-site/cardlogo-inversed.svg); } .card__wordmark { position: absolute; left: 20px; bottom: 20px; width: 134px; height: 44px; background-image: url(../img/new-site/cardwordmark.svg); background-size: 134px; } .card--purple .card__wordmark { background-image: url(../img/new-site/cardwordmark-inversed.svg); } .card__waves { position: absolute; right: 20px; bottom: 20px; width: 20px; height: 35px; background-image: url(../img/new-site/waves@2x.png); background-size: 20px; } .card--purple .card__waves { background-image: url(../img/new-site/waves-inversed.svg); } @media (max-width: 400px) { .card.card--purple { top: 46px; } .card.card--white { top: 16px; } } .actions { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; text-align: center; -ms-flex-pack: space-evenly; justify-content: space-evenly; } @media (min-width: 640px) { .actions { -ms-flex-direction: row; flex-direction: row; } } .action { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; margin-top: 24px; } @media (min-width: 640px) { .actions { margin-top: 64px; } } .action h1 { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; margin-bottom: 7px; line-height: 1.15; letter-spacing: 1.1px; text-align: center; text-transform: uppercase; color: #ffffff; } .action h2 { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 500; margin-bottom: 6px; line-height: 1.36; text-align: center; color: #ffffff; } .action p { opacity: 0.6; font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 25px; margin: 0 auto 26px; max-width: 400px; text-align: center; color: #ffffff; } .action button, .hs_submit .hs-button { object-fit: contain; border-radius: 8px; background-color: #1e3751; box-shadow: 0 2px 4px 0 rgba(22, 51, 81, 0.14); font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.15; letter-spacing: 1px; padding: 16px 32px; text-align: center; text-transform: uppercase; color: #ffffff; transition: opacity .2s ease; } .action button:hover, .hs_submit .hs-button:hover { opacity: 0.5; cursor: pointer; } .logo-developers { width: 148px; height: 159px; object-fit: contain; } .github-heading { margin-top: 12px; } .logo-github { width: 32px; height: 32px; object-fit: contain; } .logo-organisations { width: 168px; height: 124px; object-fit: contain; padding-top: 35px; } @media (min-width: 640px) { .logo-organisations { padding-top: 35px; } } @media (min-width: 640px) { .container-wrap { z-index: 2; margin-bottom: 420px; } } .container-wrap.container-wrap--not-fancy { z-index: 2; margin-bottom: 0px; } .container { margin: 0 auto; overflow: hidden; position: relative; background-color: #f2f5f8; } .container.container--page { min-height: 500px; } .slides { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; background: #f2f5f8; } .slide { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; } .slide--hidden { display: none; } .slide__inner { position: relative; } .slide.slide--one .slide__inner { width: 1200px; position: relative; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; -ms-flex-direction: column; flex-direction: column; } .hero-image-wrap { width: 300px; height: 240px; } .tagline { text-align: center; } .tagline .tagline__title { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: #ffffff; font-size: 37px; line-height: 31px; margin: 0 16px 10px 16px; padding: 16px 0; border-bottom: 1px rgba(255, 255, 255, 0.3) solid; } @media (min-width: 640px) { .tagline { padding: 0 16px; } .tagline .tagline__title { border: none; padding: 0 24px; margin: 0; } } .shown .tagline__title { opacity: 1; transform: translate3d(0, 0, 0); } .tagline .tagline__body { color: #ffffff; font-size: 17px; line-height: 24px; margin: 0 0 20px 0; opacity: 0.5; } .shown .tagline__body { opacity: .5; transform: translate3d(0, 0, 0); } @media (max-width: 1200px) { .slide.slide--one .slide__inner { width: 100%; } } @media (max-width: 740px) { .tagline .tagline__title { font-size: 22px; line-height: 26px; } .tagline .tagline__body { padding: 0 24px; } .hero-image-wrap { -ms-transform: scale(0.9); transform: scale(0.9); height: 210px; } } @media (max-width: 400px) { .hero-image-wrap { -ms-transform: scale(0.8); transform: scale(0.8); } } .slide.slide--two .slide__inner { background: #FFFFFF; margin: 0 0 0 0; } @media (min-width: 1200px) { .slide.slide--two .slide__inner { top: -72px; width: 1150px; background: #FFFFFF; box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68); border-radius: 8px; } } /*** IMAGE ONE ***/ .section__image-wrap--one { width: 300px; height: 300px; position: relative; } .section__image-wrap--one .image-part { position: absolute; opacity: 0; transition: transform 0.86s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; } .section__image-wrap--one .image-phone { width: 103px; height: 180px; background-image: url(../img/new-site/image-phone@2x.png); background-size: 103px; left: 90px; top: 60px; -ms-transform: rotate(-49deg) scale(0.5); transform: rotate(-49deg) scale(0.5); } .section__image-wrap--one .image-arrow { width: 55px; height: 55px; background-image: url(../img/new-site/image-arrow@2x.png); background-size: 55px; left: 112px; top: 120px; transform: translate3d(0, 0, 0) scale(0.2) rotate(-29deg); transition-delay: .4s; } .section__image-wrap--one .image-card { width: 131px; height: 97px; background-image: url(../img/new-site/image-card@2x.png); background-size: 131px; left: 118px; top: 30px; transform: translate3d(20px, 0, 0) scale(0.6) rotate(44deg); } .section__image-wrap--one .image-waves { width: 34px; height: 42px; background-image: url(../img/new-site/image-waves@2x.png); background-size: 34px; left: 30px; top: 62px; transform: translate3d(-20px, -20px, 0) scale(0.6) rotate(0); transition-delay: .7s; } .section--shown .section__image-wrap--one .image-phone { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(-29deg); } .section--shown .section__image-wrap--one .image-arrow { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(-29deg); } .section--shown .section__image-wrap--one .image-card { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(24deg); } .section--shown .section__image-wrap--one .image-waves { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); } /*** IMAGE TWO ***/ .section__image-wrap--two { width: 300px; height: 300px; position: relative; } .section__image-wrap--two .image-part { position: absolute; opacity: 0; transition: transform 0.86s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; } .section__image-wrap--two .image-card-lock--one { width: 176px; height: 184px; background-image: url(../img/new-site/image-card-lock@2x.png); background-size: 176px; left: 60px; top: 40px; -ms-transform: rotate(0deg) scale(0.5); transform: rotate(0deg) scale(0.5); } .section__image-wrap--two .image-card-lock--two { width: 176px; height: 130px; background-image: url(../img/new-site/image-card-lock2@2x.png); background-size: 176px; left: 50px; top: 128px; -ms-transform: rotate(0deg) scale(0.5); transform: rotate(0deg) scale(0.5); transition-delay: .2s; } .section--shown .section__image-wrap--two .image-card-lock--one { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(-15deg); } .section--shown .section__image-wrap--two .image-card-lock--two { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(-15deg); } /*** IMAGE THREE ***/ .section--three .section__image { width: 270px; height: 160px; } .section__image-wrap--three { width: 270px; height: 160px; background-color: black; } .dapp-logos { width: 270px; height: 160px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-align: center; align-items: center; } .dapp-logo { border-radius: 50%; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: 70px; height: 70px; margin: 10px; background: #7F44DF; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15); transition: transform .8s ease, opacity .4s ease; transform: translate3d(0, 25px, 0) scale(0.9) rotate(0); opacity: 0; } .dapp-logo:nth-child(1) { transition-delay: .1s; } .dapp-logo:nth-child(2) { transition-delay: .2s; } .dapp-logo:nth-child(3) { transition-delay: .3s; } .dapp-logo:nth-child(4) { transition-delay: .4s; } .dapp-logo:nth-child(5) { transition-delay: .5s; } .dapp-logo:nth-child(6) { transition-delay: .8s; } .dapp-logo--plus { background-color: #EEE8F7; box-shadow: none; transition: transform 0.86s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; transform: translate3d(0, 0, 0) scale(0.4) rotate(0); } .dapp-logo__icon { display: block; background-repeat: no-repeat; } .dapp-logo__icon--eth { width: 23px; height: 40px; background-size: 23px; background-image: url(../img/new-site/logo-eth@2x.png); } .dapp-logo__icon--tenx { width: 40px; height: 26px; background-size: 40px; background-image: url(../img/new-site/logo-tenx@2x.png); } .dapp-logo__icon--omise { width: 30px; height: 29px; background-size: 30px; background-image: url(../img/new-site/logo-omise@2x.png); } .dapp-logo__icon--status { width: 32px; height: 34px; background-size: 33px; background-image: url(../img/new-site/logo-status@2x.png); } .dapp-logo__icon--gnosis { width: 44px; height: 18px; background-size: 45px; background-image: url(../img/new-site/logo-gnosis@2x.png); } .dapp-logo__icon--plus { width: 29px; height: 29px; background-size: 29px; background-image: url(../img/new-site/logo-plus@2x.png); } .section--shown .dapp-logo { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); } /*** IMAGE FOUR ***/ .section--four .section__image { width: 320px; height: 120px; } .section__image-wrap--four { width: 320px; height: 120px; position: relative; } .section__image-wrap--four .image-part, .section__image-wrap--four .image-circle { position: absolute; opacity: 0; transition: transform 0.86s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; } .section__image-wrap--four .image-lines { width: 296px; height: 112px; background-size: 296px; background-image: url(../img/new-site/lines@2x.png); opacity: 1; } .image-cover { position: absolute; height: 112px; width: 160px; right: 0; top: 0; background-color: #ffffff; transition: width 1.8s ease; } .section__image-wrap--four .image-logo { left: 80px; top: 13px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: 84px; height: 84px; background: #7F44DF; border-radius: 50%; box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.15); opacity: 1; } .image-logo .image-logo__symbol { height: 38px; width: 38px; background-image: url(../img/new-site/status-symbol.svg); background-size: 38px; background-position: left; } .section__image-wrap--four .image-circle { height: 22px; width: 22px; border-radius: 50%; background: #FFFFFF; border: 6px solid #42325A; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4); transition: transform 0.86s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 0.2s ease; } .section__image-wrap--four .image-circle.image-circle--one { left: 0px; top: 45px; opacity: 1; } .section__image-wrap--four .image-circle.image-circle--two { left: 237px; top: -6px; opacity: 0; -ms-transform: scale(0.1); transform: scale(0.1); } .section__image-wrap--four .image-circle.image-circle--three { left: 278px; top: 94px; -ms-transform: scale(0.1); transform: scale(0.1); } .section__image-wrap--four .image-circle.image-circle--four { left: 283px; top: 45px; -ms-transform: scale(0.1); transform: scale(0.1); } .section--shown .image-cover { width: 10px; } .section--shown .section__image-wrap--four .image-circle.image-circle--two { -ms-transform: scale(1); transform: scale(1); opacity: 1; transition-delay: .8s; } .section--shown .section__image-wrap--four .image-circle.image-circle--three { -ms-transform: scale(1); transform: scale(1); opacity: 1; transition-delay: 1.2s; } .section--shown .section__image-wrap--four .image-circle.image-circle--four { -ms-transform: scale(1); transform: scale(1); opacity: 1; transition-delay: 1.6s; } @media (max-width: 1200px) { .slide.slide--two .slide__inner { width: 100%; border-radius: 0; } } @media (max-width: 640px) { .section--two .section__image { height: 220px; } .section__image-wrap--two .image-card-lock--one { top: -10px; } .section__image-wrap--two .image-card-lock--two { top: 78px; } .section--three .section__image { height: 210px; } .section--four .section__image, .section__image-wrap--four { height: 180px; } .section__image-wrap--four { margin: 16px 0 0 0; } } .slide.slide--three .slide__inner { text-align: center; margin: 0 0 60px 0; } .slide__text { width: 520px; } .slide__text h2 { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.42; text-align: center; color: #42505c; } .slide__text .text { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 18px; margin-top: 12px; line-height: 1.44; text-align: center; color: #8d99a4; } .slide__text .button { display: inline-block; width: 234px; height: 45px; margin-top: 16px; border-radius: 8px; background-color: #57a7ed; box-shadow: 0 5px 8px 0 rgba(22, 51, 81, 0.06); transition: opacity .2s ease; } .slide__text .button:hover { opacity: 0.5; } @media (max-width: 740px) { .slide__text { width: auto; padding: 0 24px; } .slide__text h2 { font-size: 22px; line-height: 26px; } } @media (max-width: 640px) { .slide__text .button { width: 200px; } .slide.slide--three .slide__inner { margin: 24px 0 24px 0; } } .section { display: -ms-flexbox; display: flex; } .section:last-child { -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; background-color: #f7f9fa; padding-top: 42px; padding-bottom: 40px; border-top: 1px solid #ecf0f3; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .section:last-child h2 { text-align: center; margin-top: 20px; font-size: 19px; font-weight: 500; line-height: 1.26; } .section:last-child .section__text { text-align: center; border: none; } .section:last-child .text { max-width: 420px; text-align: center; } .section:first-child { margin-bottom: 50px; } .section:nth-of-type(2) .section__text { padding-bottom: 50px; } .section:nth-of-type(1) { border-bottom: solid #ecf0f3 1px; } @media (min-width: 640px) { .section:nth-of-type(1) { border-bottom: none; } } .section--title { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.42; text-align: center; margin-top: 20px; margin-left: 40px; margin-right: 40px; color: #42505c; } @media (min-width: 640px) { .section--title { margin-top: 50px; margin-bottom: 20px; } } .section__text { -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; } @media (min-width: 640px) { .section__text { border-top: 1px solid #ecf0f3; } } @media (min-width: 640px) { .section__text:not(:last-child) { margin-left: 60px; padding-right: 60px; border-right: 1px solid #ecf0f3; } } @media (min-width: 640px) { .section__text:last-child { margin-right: 60px; padding-left: 60px; } } .section__text h1 { padding: 8px 16px; margin: 16px auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-radius: 100px; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.15; letter-spacing: 1.1px; text-align: center; text-transform: uppercase; } @media (min-width: 640px) { .section__text h1 { margin: 30px 0; } } .section--dev h1 { color: #4a98dc; background-color: rgba(91, 171, 237, 0.2); } .section--org h1 { color: white; background-color: #5babed; } .section__text h2 { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 19px; font-weight: 500; line-height: 1.26; text-align: left; color: #42505c; margin-bottom: 14px; } .section__text .text + h2 { margin-top: 30px; } .section__text .text { font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 18px; color: #8D99A4; line-height: 1.44; } .section__text .text strong { font-weight: 500; color: #42505c; } .section__image { width: 300px; height: 300px; } .section:nth-child(even) .section__text { -ms-flex-order: 1; order: 1; } .section:nth-child(even) .section__image { -ms-flex-order: 0; order: 0; } @media (max-width: 1024px) { .section__text { width: 300px; } } @media (max-width: 740px) { .section__text { padding: 0 16px; } .section__text h2 { font-size: 20px; line-height: 24px; } .section__image { -ms-transform: scale(0.9); transform: scale(0.9); } } @media (max-width: 640px) { .section { height: auto; -ms-flex-direction: column; flex-direction: column; } .section__image { height: 260px; } .section__text { width: 100%; padding: 0 24px 24px 24px; } .section .section__text { -ms-flex-order: 1; order: 1; } .section .section__image { -ms-flex-order: 0; order: 0; } } .email-form { display: -ms-flexbox; display: flex; position: relative; } .email-form.email-form--error .email-form__inner { animation-duration: .6s; animation-fill-mode: both; animation-name: shakeIt; animation-timing-function: ease; } .email-form a { color: #3685C9; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .email-form form { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 1230px) { .email-form form { display: initial; } } .email-form__responces { position: relative; color: rgba(255, 255, 255, 0.6); width: 100%; text-align: left; margin: 10px 0 0 0; font-size: 14px; line-height: 16px; height: 50px; } .email-form__error-message { opacity: 0; transform: translate3d(0, 10px, 0); transition: transform .2s ease, opacity .2s ease; } .email-form__error-message.email-form__error-message--shown { opacity: 1; transform: translate3d(0, 0, 0); } .email-form__success-message { position: absolute; top: 0px; left: 0px; width: 350px; z-index: 900; padding: 15px; font-size: 15px; border-radius: 8px; text-align: left; background-color: #3E4C59; color: white; line-height: 22px; opacity: 0; transform: translate3d(0, 10px, 0) scaleX(0.94) scaleY(0.94); transition: transform 0.4s cubic-bezier(0.32, 0.092, 0, 1.3), opacity 0.2s ease; } .email-form__success-message::after { content: ""; position: absolute; top: -5px; left: 10px; width: 0px; height: 0px; margin: 0 0 0 -7px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 14px solid #3E4C59; } .email-form__success-message.email-form__success-message--shown { opacity: 1; transform: translate3d(0, 0, 0) scaleX(1) scaleY(1); } .email-form__inner { display: -ms-flexbox; display: flex; position: relative; } .email-form .hs_email.hs-form-field label { display: none; } .email-form__input--email, .email-form .hs_email.hs-form-field input { text-align: left; background-color: rgba(51, 0, 0, 0.2); color: rgba(255, 255, 255, 0.67); padding: 16px 15px 15px 15px; margin: 0 0 0 0; font-family: 'PostGrotesk-Book', sans-serif; box-sizing: border-box; border-radius: 8px; transition: background-color .2s ease; font-weight: 400; font-size: 16px; } .email-form--valid .email-form__input--email { color: #92999F; background-image: url(../img/new-site/verified.png); background-size: 24px; background-repeat: no-repeat; background-position: right 10px center; } .email-form input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.67); } .email-form input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.67); } .email-form input::placeholder { color: rgba(255, 255, 255, 0.67); } .email-form .hbspt-form { width: 100%; } .email-form .hbspt-form > .submitted-message { color: #ffffff; opacity: 0.6; } .email-form .hbspt-form > form > div { display: inline-block; } .email-form .hbspt-form > form > div > div { margin: 0; } .email-form input[type="submit"] { -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-positive: 0; flex-grow: 0; border-radius: 8px; } .hs_submit { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 5px auto; } @media (min-width: 1230px) { .email-form input[type="submit"] { margin-left: 10px; } } @keyframes shakeIt { 0%, 100% { transform: translate3d(0, 0, 0); } 20%, 60% { transform: translate3d(-4px, 0, 0); } 40%, 80% { transform: translate3d(4px, 0, 0); } } .footer { position: fixed; width: 100%; bottom: 0; left: 0; z-index: -1; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; background-color: #1e3751; border-top: 100px solid #1e3751; } .footer.footer--not-fancy { position: static; border-top: 0px; } .footer.footer--page { position: static; margin: -96px 0 0 0; border-top: 56px solid #4A5C69; } .footer-inner { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; width: 1080px; } .footer-logo-wrap { width: 280px; display: -ms-flexbox; display: flex; } .footer-logo-wrap__inner { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: justify; justify-content: space-between; padding: 65px 0 75px 0; } .footer-logo { width: 52px; height: 52px; background-size: 52px; background-image: url(../img/new-site/footer-logo@2x.png); } .footer-address { color: white; padding: 20px 0 0 0; opacity: .5; } .footer-table { display: -ms-flexbox; display: flex; } .footer-table__column { box-sizing: border-box; padding: 60px 40px; } .footer-header { color: white; opacity: .5; font-size: 17px; margin: 0 0 40px 0; } .footer-link { height: 32px; line-height: 32px; font-size: 16px; margin: 0 0 15px 0; } .footer-link a { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .footer-icon { display: inline-block; width: 32px; height: 32px; 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; } .footer-link--fb .footer-icon { background-image: url(../img/new-site/icon_fb.svg); } .footer-link--tw .footer-icon { background-image: url(../img/new-site/icon_tw2.svg); } .footer-link--sl .footer-icon { background-image: url(../img/new-site/icon_sl2.svg); } .footer-link--gh .footer-icon { background-image: url(../img/new-site/icon_gh2.svg); } .footer-link--rd .footer-icon { background-image: url(../img/new-site/icon_rd2.svg); } .footer-link--yt .footer-icon { background-image: url(../img/new-site/icon_yt.svg); } .footer-link--rt .footer-icon { background-image: url(../img/new-site/icon_rt.svg); } .footer-link a { color: white; } .footer-link a:hover { opacity: .8; } .language-switcher { font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: white; -webkit-appearance: none; font-size: 16px; line-height: 32px; padding: 0 24px 0 0; background-image: url(../img/new-site/icon_dropdown-white.svg); background-size: 24px; background-repeat: no-repeat; background-position: right center; } .language-switcher:focus { outline: none; } @media (max-width: 1140px) { .footer-inner { width: 820px; -ms-flex-pack: distribute; justify-content: space-around; } .footer-logo-wrap { width: 200px; } } @media (max-width: 767px) { .footer { position: static; border-top: 0px; } .footer.footer--page { border-top: 100px solid #4A5C69; } .footer-inner { padding: 30px 0 0 0; -ms-flex-direction: column; flex-direction: column; } .footer-table { -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } .footer-table__column { text-align: center; padding: 10px 16px; } .footer-logo-wrap { width: auto; -ms-flex-order: 2; order: 2; } .footer-header { margin: 0 0 10px 0; } .footer-logo-wrap__inner { width: 100%; padding: 0 0 40px 0; -ms-flex-align: center; align-items: center; text-align: center; } .footer-link { text-align: center; height: 24px; line-height: 24px; margin: 0 0 10px 0; } .footer-link a { -ms-flex-pack: center; justify-content: center; text-align: center; } .footer-icon { display: none; } .footer-logo { display: none; } }