*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } ::-moz-selection { background-color: #26baa4; color: white; } ::selection { background-color: #26baa4; color: white; } html { font-size: 100%; } body { line-height: 1.6; font-family: "Bai Jamjuree", sans-serif; font-size: 1.125rem; } .header, .section { padding: 3.75rem 0; text-align: center; } h1, h2, h3, h4 { margin: 0.75rem 0; line-height: 1.3; color: #4c545d; } p { margin: 0.75rem 0; color: #9fabb2; font-size: 0.96875rem; } @media screen and (min-width: 50em) { p { font-size: 1.125rem; } } ul { list-style: none; } a { text-decoration: none; } img { display: inline-block; max-width: 100%; } .white-space { margin-top: 3.75rem; } .container { padding: 0 1.875rem; } @media screen and (min-width: 75em) { .section { margin: 1.875rem 0; } } @media screen and (min-width: 50em) { .section__title { font-size: 2.25rem; } } .section__description { margin: 0 auto; max-width: 43.75rem; } .content-wrapper { padding: 3rem 0; } .item { padding: 2.5rem 0; } @media screen and (min-width: 75em) { .item { padding: 2.5rem; } } .item__title { font-size: 1.375rem; } @media screen and (min-width: 50em) { .item__description { margin: 0 auto; max-width: 37.5rem; } } @media screen and (min-width: 75em) { .item__description { margin: 0; max-width: 20.9375rem; font-size: 1rem; } } .item__icon { margin: 1.875rem 0; } .btn { display: block; margin: 1.125rem auto; border: none; border-bottom: 0.1875rem solid; -webkit-border-radius: 5em; -moz-border-radius: 5em; border-radius: 5em; cursor: pointer; padding: 0.875rem 0; width: 100%; max-width: 18.75rem; text-align: center; color: white; font-weight: 600; -webkit-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } @media screen and (min-width: 50em) { .btn { display: inline-block; max-width: 12.5rem; } } .btn--ios { border-bottom-color: #1e9583; -webkit-box-shadow: 0 0.625rem 1.25rem rgba(38, 186, 164, 0.25); -moz-box-shadow: 0 0.625rem 1.25rem rgba(38, 186, 164, 0.25); box-shadow: 0 0.625rem 1.25rem rgba(38, 186, 164, 0.25); background-color: #26baa4; } @media screen and (min-width: 50em) { .btn--ios { margin-right: 1.125rem; } } .btn--mac { border-bottom-color: #4e5ccc; -webkit-box-shadow: 0 0.625rem 1.25rem rgba(97, 115, 255, 0.25); -moz-box-shadow: 0 0.625rem 1.25rem rgba(97, 115, 255, 0.25); box-shadow: 0 0.625rem 1.25rem rgba(97, 115, 255, 0.25); background-color: #6173ff; } .btn:hover, .btn:active, .btn:focus { outline: none; } .btn--ios:hover, .btn--ios:active, .btn--ios:focus { border-bottom-color: #26baa4; background-color: #51c8b6; } .btn--mac:hover, .btn--mac:active, .btn--mac:focus { border-bottom-color: #6173ff; background-color: #818fff; } .header { background-image: url("../images/bg-header-mobile.png"); background-repeat: no-repeat; -webkit-background-size: 100% 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; padding-top: 7.5rem; text-align: center; } @media screen and (min-width: 50em) { .header { background-image: url("../images/bg-header-desktop.png"); } } .header__title { font-size: 1.875rem; } @media screen and (min-width: 50em) { .header__title { font-size: 2.8125rem; } } .header__description { margin: 0 auto; max-width: 40.625rem; } @media screen and (min-width: 81.25em) { .keep-track .container { margin: 0 auto; max-width: 75rem; } } @media screen and (min-width: 75em) { .keep-track__features { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 75em) { .keep-track__image { -webkit-transform: translateX(-5vw); -moz-transform: translateX(-5vw); -ms-transform: translateX(-5vw); -o-transform: translateX(-5vw); transform: translateX(-5vw); } } @media screen and (min-width: 75em) { .keep-track__list { margin-left: 1.875rem; text-align: left; } } @media screen and (min-width: 75em) { .workflow__list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (min-width: 75em) { .workflow__list .item__description { margin: 0 auto; } } /* HACKING */ /** * 1. For an unknown reason, the first workflow child does not align correctly */ .workflow__item:first-child .item__icon { margin: 1.5625rem 0; /* 1 */ } .companies { text-align: center; } .companies__logo { display: block; margin: 0.625rem auto; } .companies .container { display: -ms-grid; display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1.875rem; margin: 0 auto; max-width: 79.875rem; } @supports (grid-gap: 1.875rem) and (not (gap: 1.875rem)) { .companies .container { grid-gap: 1.875rem; } } @supports not ((grid-gap: 1.875rem) and (gap: 1.875rem)) { .companies .container > *:not(:last-child) { margin-bottom: 1.875rem; } } @media screen and (min-width: 50em) { .companies .container { grid-template-columns: repeat(auto-fit, minmax(10.3125rem, 1fr)); } @supports not ((display: -ms-grid) or (display: grid)) { .companies .container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .companies .container > *:not(:last-child) { margin-bottom: 0; margin-right: 1.875rem; } } } .footer { margin-top: 5rem; background-color: #F5F6F8; padding: 3.75rem 0; text-align: center; } @media screen and (min-width: 75em) { .footer { padding: 1.875rem 0; } } .footer__logo { margin-bottom: 1.25rem; height: 3.75rem; width: 3.75rem; } .footer__item { margin: 1rem 0; } @media screen and (min-width: 75em) { .footer__item { line-height: 2; margin: 0; } } .footer__link { color: #4c545d; } .footer__link:hover, .footer__link:active, .footer__link:focus { color: #26baa4; } .footer__social { margin-top: 2.5rem; } @media screen and (min-width: 75em) { .footer__social { margin-top: 0; } } @media screen and (min-width: 75em) { .footer .container { display: -ms-grid; display: grid; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-grid-columns: 1fr 2fr 1fr; grid-template-columns: 1fr 2fr 1fr; margin: 0 auto; max-width: 79.875rem; } @supports not ((display: -ms-grid) or (display: grid)) { .footer .container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .footer .container > * { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } } @media screen and (min-width: 75em) { .footer__list { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; text-align: left; } } .social__item { display: inline-block; } .social__item:nth-child(2) { margin: 0 1.875rem; } .social__item img:hover, .social__item img:active, .social__item img:focus { -webkit-filter: invert(53%) sepia(100%) saturate(306%) hue-rotate(122deg) brightness(93%) contrast(97%); filter: invert(53%) sepia(100%) saturate(306%) hue-rotate(122deg) brightness(93%) contrast(97%); }