app/assets/stylesheets/modules/home.css
.home__image-wrap {
position: absolute;
top: 68px;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
@media (min-height: 550px) {
.home__image {
height: 100%;
background-image: url(/home.svg);
background-repeat: no-repeat;
background-size: 1400px auto;
opacity: .1; } }
@media (max-width: 899px) {
.home__image {
background-position: center top; } }
@media (min-width: 900px) {
.home__image {
background-position: center bottom; } }
.home__heading {
margin-right: auto;
margin-left: auto;
position: relative;
width: 90%;
font-weight: 200;
line-height: 1.2;
text-align: center;
color: white;
z-index: 1; }
@media (max-width: 899px) {
.home__heading {
margin-bottom: 40px;
padding-top: 40px;
max-width: 400px;
font-size: 30px; } }
@media (min-width: 900px) {
.home__heading {
margin-bottom: 60px;
padding-top: 30px;
max-width: 780px;
font-size: 60px; } }
.home__cta-wrap {
margin-right: auto;
margin-left: auto;
position: relative;
width: 90%;
max-width: 460px; }
@media (max-width: 519px) {
.home__cta-wrap {
margin-bottom: 60px; } }
@media (min-width: 520px) and (max-width: 899px) {
.home__cta-wrap {
margin-bottom: 100px; } }
@media (min-width: 900px) {
.home__cta-wrap {
margin-bottom: 160px; } }
.home__search-wrap {
margin-right: auto;
margin-left: auto;
position: relative;
width: 90%;
max-width: 780px; }
@media (max-width: 519px) {
.home__search-wrap {
max-width: 300px; } }
@media (min-width: 520px) and (max-width: 899px) {
.home__search-wrap {
max-width: 600px; } }
.home__downloads {
font-size: 24px;
line-height: 1;
text-align: center;
color: white; }
@media (max-width: 519px) {
.home__downloads {
margin-bottom: 16px; } }
@media (min-width: 520px) {
.home__downloads {
padding-right: 20px;
width: 188px;
float: left;
border-right: 1px solid #ab262b; } }
.home__downloads__desc {
font-weight: 300;
font-size: 12px;
text-transform: uppercase; }
@media (max-width: 379px) {
.home__downloads__desc {
margin-top: 8px;
display: block; } }
.home__links {
margin-right: auto;
margin-left: auto; }
@media (max-width: 599px) {
.home__links {
width: 261px; } }
@media (min-width: 600px) {
.home__links {
width: 461px; } }
.home__link {
padding-top: 14px;
position: relative;
top: 3px;
display: inline-block;
height: 54px;
border-width: 2px;
border-right: solid;
border-left: solid;
border-color: #141c22;
background-color: #141c22;
background-image: url("/home__link-bg.png");
background-repeat: repeat-x;
background-position: bottom;
background-size: 5px 7px;
font-size: 12px;
text-transform: uppercase;
text-align: center;
color: white;
z-index: 1;
transition-duration: 0.25s;
transition-property: top; }
@media (max-width: 599px) {
.home__link {
width: 130px; }
.home__link:focus, .home__link:hover {
top: -1px; } }
@media (min-width: 600px) {
.home__link {
width: 230px; }
.home__link:focus, .home__link:hover {
top: -4px; } }
.home__link:first-child {
margin-right: 1px;
float: left; }
.home__link:before {
margin-right: 14px;
position: relative;
top: 2px;
font-size: 16px; }
.home__link:focus {
outline: none; }