open-vault/website/source/assets/stylesheets/_home.scss
2017-03-06 16:11:04 -05:00

110 lines
2.2 KiB
SCSS
Executable file

#page-home {
#container {
margin-top: 140px;
position: relative;
text-align: center;
z-index: 1;
#tag-line {
display: block;
font-size: 24px;
font-weight: 300;
margin: 15px 0 40px 0;
}
#diagram {
background-image: image-url("hero@2x.png");
background-origin: content-box;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
display: block;
margin: 60px 0;
padding: 15px;
height: 193px;
width: 100%;
}
h2.features-header {
color: $blue;
display: inline-block;
font-size: 44px;
font-weight: 600;
letter-spacing: 2px;
margin: 120px auto 40px auto;
text-transform: uppercase;
}
h3.feature-header {
color: $black;
font-size: 36px;
font-weight: 300;
margin: 30px 0;
text-transform: none;
}
p {
font-size: 18px;
font-weight: 300;
line-height: 36px;
margin: 25px 0;
padding: 15px;
text-align: left;
}
.feature {
margin-bottom: 150px;
.graphic {
background-origin: content-box;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
display: block;
margin: 60px 0;
padding: 15px;
height: 160px;
width: 100%;
}
&#crud {
.graphic {
background-image: image-url("graphic-crud@2x.png");
}
}
&#key {
.graphic {
background-image: image-url("graphic-key@2x.png");
}
}
&#audit {
.graphic {
background-image: image-url("graphic-audit@2x.png");
}
}
}
#cta {
@include img-retina("bg-icons.png", "bg-icons@2x.png", 669px, 260px);
background: image-url("bg-icons.png") center center no-repeat;
background-position: center center;
border-top: 1px solid $faint-gray;
border-bottom: 1px solid $faint-gray;
padding: 140px 0;
p {
margin-top: 10px;
color: $black;
font-size: 14px;
font-weight: 600;
line-height: 1.5esm;
text-align: center;
}
}
}
}