lib/scss/6_components/_home.scss
/*
HOME PAGE
========================================================================
$how-it-work-icon-size: 1.5 * $font-size-h1 !default;
$how-it-work-icon-color: $color-content !default;
$home-how-it-works-card-icon-person: "\f1ae" !default;
$home-how-it-works-card-icon-conversation: "\f086" !default;
$home-background-image-url: url(/static/img/page-bg.svg) !default;
.HomeBanner {
@extend .container-1, .center;
width: 80%;
margin-top: 10px;
h2 {
display: none;
font-size: $font-size-h3;
@include breakpoint('sm') {
display: inherit;
}
}
h1 {
color: $color-content;
}
.button[primary] {
@include color('accent');
padding: $spacing-unit $spacing-unit * 2;
}
}
.HowItWorks {
background: $color-hint;
padding-top: $spacing-unit;
> * {
@extend .container-1, .center;
}
h2 {
font-size: $font-size-h4;
}
h1 {
color: $color-content;
}
p {
padding: 0 10px;
line-height: 30px;
color: $color-content;
}
.fa-child:before {
content: $home-how-it-works-card-icon-person;
}
.fa-comments:before {
content: $home-how-it-works-card-icon-conversation;
}
}
.HowItWorksCard {
> .fa {
background: $color-hint;
border-radius: 50%;
width: $spacing-unit * 7;
height: $spacing-unit * 7;
display: inline-block;
color: $color-content;
padding-top: $spacing-unit * 2;
margin: $spacing-unit * 2;
}
text-align: left;
align-items: center;
display: flex;
border-top: 1px solid rgba($color-content, 0.1);
h1 {
font-size: $font-size-h3;
color: $color-content;
i {
padding: $spacing-unit-small;
float: right;
@include breakpoint('sm') {
display: none;
}
}
}
h1.expanded {
i {
transform: rotate(90deg);
}
}
p {
color: $color-content;
}
&-content {
flex-grow: 1;
}
&-iconWrapper {
background-color: white;
border-radius: 50%;
margin: $spacing-unit;
}
.conversas {
padding: $spacing-unit-tiny;
}
.cpa_circulo {
min-width: 48px;
}
&-icon {
align-self: start;
box-sizing: border-box;
color: $how-it-work-icon-color;
display: block;
flex-grow: 0;
font-size: $how-it-work-icon-size;
text-align: center;
min-width: 40px;
}
&-extra {
@include breakpoint('sm') {
.button, button {
margin: $spacing-unit-small auto $spacing-unit auto;
}
}
}
&-extra.hide-on-small {
display: none;
@include breakpoint('sm') {
display: block;
}
}
}
.StartNow {
background: $color-hint;
padding: $spacing-unit;
text-align: center;
display: block;
> * {
@extend .container-1;
}
h2 {
font-size: $font-size-h4;
}
}
.StartPage {
background: $home-background-image-url center no-repeat;
background-size: contain;
.ConversationFooter {
margin-top: 70px;
}
}
*/