less/angular/pages/home.less
@new-grey: #4F5F66;
#home-splash {
color: @new-grey;
font-size: 1.6rem;
h2 {
font-size: 4.4rem;
font-weight: 500;
letter-spacing: -0.04rem;
@media screen and (min-width: @screen-md-min) {
font-size: 5.2rem;
}
}
h3 {
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
h4 {
font-size: 2rem;
}
footer {
text-align: center;
}
&.variant-2, &.variant-4 {
.home-blue {
@media @standard-def {
background-image: url('/img/home/background-variant.jpg');
}
@media @retina {
background-image: url('/img/home/background-variant@2x.jpg');
}
}
}
.teach-site-referral {
h3 {
font-size: 3.6rem;
font-weight: 500;
text-transform: none;
color: @lightnavy;
margin: 1rem 0;
}
}
}
.home-panel, .teach-site-referral, .home-values, .home-jump-in, .home-footer {
padding: 5rem 0;
h2 {
text-shadow: 0 0 0.1rem fade(@black, 50);
}
h4 {
margin-bottom: 0.6rem;
}
.lead {
text-align: center;
font-size: 1.8rem;
@media screen and (min-width: @screen-sm-min) {
font-size: 2rem;
}
}
.btn {
width: 100%;
position: relative;
margin: 1.6rem 0 0 0;
padding: 1.3rem 1.5rem 1.1rem 1.5rem;
background: @yellow;
color: #4B5B62;
border: transparent;
border-radius: 0.3rem;
box-shadow: 0 0.4rem 0 #C4A74F, inset 0 0.1rem 0 rgba(255,255,255,0.5);
text-transform: uppercase;
vertical-align: baseline;
font-weight: 600;
letter-spacing: 0.1rem;
line-height: 1.42857;
@media screen and (min-width: @screen-xs-min) {
width: auto;
margin: 0 0 0 1rem;
}
&:hover {
top: 0.2rem;
box-shadow: 0 0.2rem 0 #C4A74F, inset 0 0.1rem 0 rgba(255,255,255,0.5);
}
&:active {
top: 0.4rem;
box-shadow: inset 0 0.1rem 0.1rem rgba(0,0,0,0.2);
}
}
}
.home-blue {
background-color: #0086CC;
@media @standard-def {
background-image: url('/img/home/background.jpg');
}
@media @retina {
background-image: url('/img/home/background@2x.jpg');
}
}
.home-green {
background-color: #58B093;
@media @standard-def {
background-image: url('/img/home/green-background.jpg');
}
@media @retina {
background-image: url('/img/home/green-background@2x.jpg');
}
}
.home-panel {
padding: 6rem 0;
@media screen and (min-width: @screen-md-min) {
padding: 10rem 0;
}
@media screen and (min-width: @screen-lg-min) {
padding: 12rem 0;
}
color: @white;
background-size: cover;
text-align: center;
@media screen and (min-width: @screen-sm-min) {
text-align: left;
}
.lead {
max-width: 100%;
@media screen and (min-width: @screen-sm-min) {
text-align: left;
max-width: 38rem;
}
}
form {
margin: 0 auto;
@media screen and (min-width: @screen-sm-min) {
margin: 0;
}
}
input[type="email"] {
width: 100%;
border: transparent solid 0;
border-radius: 0.3rem;
color: @grey;
padding: 1.1rem 1.5rem 1.3rem 1.5rem;
@media screen and (min-width: @screen-xs-min) {
width: auto;
}
}
section {
margin-top: 1rem;
@media screen and (min-width: @screen-sm-min) {
margin-top: 0;
padding-left: 5rem;
}
@media screen and (min-width: @screen-md-min) {
margin-left: 5rem;
padding-left: 1.5rem;
}
@media screen and (min-width: @screen-lg-min) {
margin-left: 2.5rem;
padding-left: 1.5rem;
}
}
}
.teach-site-referral {
background: url("/img/home/teach-referral-bg-white-small.png") repeat #EFEFEF;
p {
font-size: 2.1rem;
font-weight: 300;
margin-bottom: 3rem;
}
.btn {
color: @white;
background: @green;
box-shadow: 0 0.4rem 0 @darkgreen, inset 0 0.1rem 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
&:hover, &:focus {
box-shadow: 0 0.2rem 0 @darkgreen, inset 0 0.1rem 0 rgba(255, 255, 255, 0.5);
background-color: @green;
}
&:active {
box-shadow: inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.2);
}
}
}
.devices {
margin: 2rem auto 3rem;
max-width: 40rem;
position: relative;
@media screen and (min-width: @screen-md-min) {
margin-top: 0;
}
img {
display: block;
position: absolute;
}
.desktop {
position: static;
@media screen and (min-width: @screen-sm-min) {
position: relative;
top: 2.5rem;
}
}
.tablet {
bottom: -2rem;
max-width: 56%;
right: -0.2rem;
@media screen and (min-width: @screen-sm-min) {
bottom: -3.6rem;
right: -1rem;
}
@media screen and (min-width: @screen-md-min) {
bottom: -4rem;
right: -3.3rem;
}
}
.mobile {
bottom: -0.6rem;
left: 2.3rem;
max-width: 19%;
@media screen and (min-width: @screen-sm-min) {
left: 1.4rem;
bottom: -2.9rem;
}
@media screen and (min-width: @screen-md-min) {
bottom: -2.8rem;
left: 2.5rem;
}
}
}
.home-values {
background: @white;
.row {
margin-top: 0rem;
@media screen and (min-width: @screen-md-min) {
margin-top: 6rem;
}
}
}
.values-list {
list-style: none;
padding-left: 5rem;
li {
margin-bottom: 2rem;
position: relative;
@media screen and (min-width: @screen-sm-min) {
margin-bottom: 5rem;
}
&::before {
left: -4.5rem;
position: absolute;
top: 0.4rem;
}
}
}
.value-free {
&::before {
content: url('/img/home/free-sm-icon.svg');
}
}
.value-local {
&::before {
content: url('/img/home/local-sm-icon.svg');
}
}
.value-more-than-code {
&::before {
content: url('/img/home/morethancode-sm-icon.svg');
}
}
.home-globe {
img {
display: block;
margin: 5rem auto;
@media screen and (min-width: @screen-sm-min) {
margin: 0 auto;
transform: translateY(55%);
}
@media screen and (min-width: @screen-md-min) {
// display: block;
margin: 0 auto;
transform: translateY(20%);
}
}
}
.home-jump-in {
background: darken(@white, 6.25%);
text-align: center;
.row {
margin-top: 5rem;
}
ul {
list-style: none;
padding-left: 0;
}
li {
margin-bottom: 5rem;
@media screen and (min-width: @screen-sm-min) {
margin-bottom: 0;
}
}
figure {
margin-bottom: 3rem;
transition: all 0.18s ease-in;
&:hover {
transform: scale(1.1);
}
}
}
// A/B styles
#page-home {
.variant-2 .home-panel {
h2 {
font-size: 6.2rem;
}
}
.variant-4 .home-panel {
h2 {
font-size: 6.2rem;
max-width: 100%;
@media screen and (min-width: @screen-md-min) {
max-width: 56rem;
}
}
.lead {
max-width: 100%;
@media screen and (min-width: @screen-md-min) {
max-width: 42rem;
}
}
}
.variant-6 .home-panel {
padding: 0;
.container {
width: 100%;
padding: 0;
}
text-align: center;
.onboarding-section {
padding: 0;
margin: 0;
}
div {
display: inline-block;
width: 100%;
@media screen and (min-width: @screen-sm-min) {
width: auto;
}
}
.onboarding-step-2 {
padding: 0 2rem;
margin-bottom: 2rem;
@media screen and (min-width: @screen-xs-min) {
padding: 0 5rem;
width: 52.2rem;
}
@media screen and (min-width: @screen-md-min) {
width: auto;
padding: 5rem;
}
.onboarding-published-content {
img {
visibility: hidden;
}
font-size: 0.08rem;
.onboarding-published-text {
position: absolute;
font-family: "Fira Sans";
font-size: 6.4rem;
font-weight: bold;
line-height: 1;
left: 22%;
top: 43.5%;
right: 10%;
margin: 0;
text-align: left;
width: auto;
bottom: 46%;
}
position: relative;
background: url('/img/home/HeartPreview@2x.png');
background-size: cover;
width: 100%;
@media screen and (min-width: @screen-md-min) {
width: 32.2rem;
}
}
a {
color: white;
text-decoration: underline;
}
.onboarding-checkbox-container {
position: relative;
text-align: left;
@media screen and (min-width: @screen-xs-min) {
display: block;
}
input {
cursor: pointer;
}
div,
label {
position: absolute;
width: auto;
padding: 0 2.3rem 0 1rem;
margin: 0;
font-size: 1.3rem;
@media screen and (min-width: @screen-xs-min) {
font-size: 1.7rem;
}
}
}
form {
margin-top: 3rem;
}
div {
margin: 3rem 0;
font-size: 1.7rem;
&.onboarding-final-message {
margin-top: 1rem;
margin: 0;
}
&.onboarding-left-panel {
margin: 0;
@media screen and (min-width: @screen-xs-min) {
text-align: left;
width: 43.3rem;
}
@media screen and (min-width: @screen-md-min) {
float: left;
margin-right: 15rem;
}
}
}
}
.onboarding-step-1 {
padding-top: 7rem;
padding-bottom: 7rem;
@media screen and (min-width: @screen-xs-min) {
padding-top: 13rem;
padding-bottom: 3.6rem;
}
.onboarding-tooltip-container {
opacity: 0;
transition: opacity 1s ease 1s;
&.fade-in {
opacity: 1;
}
}
.onboarding-tooltip {
position: relative;
font-size: 2.1rem;
width: auto;
margin-top: 3rem;
color: #FFCD36;
font-weight: bold;
display: inline-block;
max-width: 19rem;
margin-left: 2.6rem;
@media screen and (min-width: @screen-sm-min) {
width: auto;
margin-left: 3rem;
max-width: none;
}
}
.onboarding-arrow {
position: absolute;
top: -1.9rem;
left: -3rem;
}
.onboarding-text-content {
font-family: "Fira Sans";
font-size: 6.4rem;
min-height: 6.4rem;
font-weight: bold;
line-height: 1;
display: block;
div {
@media screen and (min-width: @screen-sm-min) {
float: left;
}
}
.onboarding-input-container {
position: relative;
height: 6.1rem;
max-width: 26.3rem;
@media screen and (min-width: @screen-xs-min) {
max-width: 30.3rem;
margin-left: 1rem;
}
@media screen and (min-width: @screen-sm-min) {
max-width: 57.3rem;
}
@media screen and (min-width: @screen-md-min) {
max-width: 67.3rem;
}
@media screen and (min-width: @screen-lg-min) {
max-width: 87.3rem;
}
.onboarding-input {
border: none;
background: transparent;
width: 100%;
text-align: center;
height: 10.1rem;
margin-top: -2.2rem;
font-size: 3.4rem;
&:focus {
outline: 0;
}
@media screen and (min-width: @screen-sm-min) {
text-align: left;
}
@media screen and (min-width: @screen-sm-min) {
font-size: 6.4rem;
margin-top: -9rem;
}
}
.onboaring-input-underline {
position: absolute;
height: 1px;
background: white;
bottom: 0;
left: 0;
right: 0;
opacity: 0.7;
}
}
}
.onboarding-next-button {
margin-top: 3.4rem;
@media screen and (min-width: @screen-sm-min) {
float: right;
margin-top: 3.6rem;
}
width: 9rem;
}
}
}
}