consul/website/source/stylesheets/_home.less

175 lines
2.9 KiB
Plaintext
Raw Normal View History

2014-02-08 00:41:03 +00:00
//
// Home
// --------------------------------------------------
#features{
.anti-alias();
2014-04-05 09:03:01 +00:00
padding: 130px 0 0 0;
background: #f8f8f8 url(../images/hero-dots-below@2x.png) center top no-repeat;
background-size: 1280px 49px;
2014-02-08 00:41:03 +00:00
2014-04-05 09:03:01 +00:00
.double-row{
padding: 0 0 60px 0;
2014-02-08 00:41:03 +00:00
}
h2{
2014-04-05 09:03:01 +00:00
font-size: 24px;
2014-02-08 00:41:03 +00:00
letter-spacing: 2px;
2014-04-05 09:03:01 +00:00
color: @purple;
font-family: @font-family-museo;
font-weight: @font-weight-museo-xb;
2014-02-08 00:41:03 +00:00
}
p{
2014-04-05 09:03:01 +00:00
font-size: 16px;
2014-02-08 00:41:03 +00:00
letter-spacing: 1px;
line-height: 1.5em;
2014-04-05 09:03:01 +00:00
color: @consul-gray;
font-family: @font-family-museo;
font-weight: @font-weight-museo-sb;
2014-02-08 00:41:03 +00:00
}
.icn{
display: block;
2014-04-05 09:03:01 +00:00
width: 186px;
height: 272px;
2014-02-08 00:41:03 +00:00
margin: 0 auto;
2014-04-05 09:03:01 +00:00
background-position: center 0;
2014-02-08 00:41:03 +00:00
background-repeat: no-repeat;
}
2014-04-05 09:03:01 +00:00
.discovery{
background-image: url( ../images/feature-discovery@2x.png);
background-size: 181px 181px;
2014-02-08 00:41:03 +00:00
}
2014-04-05 09:03:01 +00:00
.health{
background-image: url( ../images/feature-health@2x.png);
background-size: 125px 179px;
2014-02-08 00:41:03 +00:00
}
2014-04-05 09:03:01 +00:00
.multi{
background-image: url( ../images/feature-multi@2x.png);
background-size: 182px 184px;
2014-02-08 00:41:03 +00:00
}
2014-04-05 09:03:01 +00:00
.config{
background-image: url( ../images/feature-config@2x.png);
background-size: 157px 179px;
}
2014-02-08 00:41:03 +00:00
}
#trusted{
background-color: @black;
padding: 140px 0;
h3{
margin-bottom: 60px;
color: @white;
text-transform: uppercase;
font-size: 18px;
text-align: center;
}
.trusted-items{
width: 800px;
margin: 0 auto;
ul {
padding: 0;
> li{
display: inline-block;
float: left;
width: 25%;
height: 80px;
margin: 12px 0;
background: url( ../images/trusted-sprite.png ) 0 0 no-repeat;
&#i0{
background-position: 0 0;
}
&#i1{
background-position: 0 -80px;
}
&#i2{
background-position: 0 -160px;
}
&#i3{
background-position: 0 -240px;
}
&#i4{
background-position: 0 -320px;
}
&#i5{
background-position: 0 -400px;
}
&#i6{
background-position: 0 -480px;
}
&#i7{
background-position: 0 -560px;
}
&#i8{
background-position: 0 -640px;
}
&#i9{
background-position: 0 -720px;
}
&#i10{
background-position: 0 -800px;
}
&#i11{
background-position: 0 -880px;
}
}
}
}
}
#footer{
padding: 50px 0;
2014-04-05 09:03:01 +00:00
background-color: @consul-footer-gray;
background: @consul-footer-gray url(../images/consul-footer-logo.png) center center no-repeat;
.img-retina("../images/consul-footer-logo.png", "../images/consul-footer-logo@2x.png", 446px, 443px);
2014-02-08 00:41:03 +00:00
.footer-links{
margin-bottom: 20px;
}
.footer-hashi{
letter-spacing: 2px;
2014-04-05 09:03:01 +00:00
margin-bottom: 30px;
a{
font-weight: @font-weight-museo-xb;
}
span{
margin-right: 20px;
}
2014-02-08 00:41:03 +00:00
img{
2014-04-05 09:03:01 +00:00
display: inline-block;
width: 37px;
height: 40px;
}
}
}
@media (max-width: 992px) {
#features{
.double-row{
padding: 0 0 0 0;
.row{
padding-bottom: 90px;
}
}
.icn{
height: 200px;
2014-02-08 00:41:03 +00:00
}
}
}
2014-04-05 09:03:01 +00:00
@media (max-width: 768px) {
2014-02-08 00:41:03 +00:00
2014-04-05 09:03:01 +00:00
}