app/assets/stylesheets/modules/landing.scss
/*-------------------------------
NAVBAR
-------------------------------*/
.navbar {
.navbar-nav.pull-right {
.btn {
padding: 20px 20px;
line-height: 0px;
&.btn-default {
display: none;
}
}
}
}
/*-------------------------------
GENERAL
-------------------------------*/
.signin_absolute {
position: absolute;
top: 20px;
right: 20px;
z-index: 999;
}
.backdrop h1 {
line-height: 1.2;
}
#reasons h1, #features h1, #pricing h1 {
margin-bottom: 40px;
font-size: 36px;
font-weight: 600;
}
#reasons p, #pricing p {
font-family: $font-family-serif;
font-size: 24px;
color: $gray-dark;
}
/*-------------------------------
REASONS
-------------------------------*/
#reasons {
ul {
width: 80%;
padding: 0;
margin: 0 auto 40px auto;
li {
margin-bottom: 40px;
position: relative;
list-style: none;
text-align: center;
font-family: $font-family-serif;
font-size: 24px;
color: $gray-dark;
span.glyphicon {
position: absolute;
left: -70px;
font-size: 34px;
}
&:nth-child(1) span {
top: 20%;
}
&:nth-child(2) span {
top: 40%;
}
&:nth-child(3) span {
top: 40%;
}
p {
width: 70%;
margin: 0 auto;
font-size: 18px;
text-align: center;
}
}
}
}
/*-------------------------------
FEATURES
-------------------------------*/
#features {
div {
margin-bottom: 40px;
}
.feature1, .feature2, .feature3 {
width: 68%;
margin: 0 auto;
text-align: center;
}
}
/*-------------------------------
PRICING
-------------------------------*/
#pricing {
h1 {
}
h1 + p {
}
.conversation-explaination {
font-family: $font-family-serif;
font-size: 12px;
text-transform: uppercase;
margin-top: 50px;
}
[data-tooltip].conversation-explaination {
&:after {
@include multiline(300px, center);
//border: 2px solid red;
text-transform: none;
font-size: 15px;
line-height: 1.4;
-moz-box-shadow: 0px 0px 10px 0px #ccc;
-webkit-box-shadow: 0px 0px 10px 0px #ccc;
box-shadow: 0px 0px 10px 0px #ccc;
margin-bottom: 30px;
}
@include applyColor(#fff, $gray-dark);
&:before {
margin-bottom: 0px;
border-top: 26px solid rgb(228, 228, 228);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
}
}
#pricing [data-tooltip].conversation-explaination.simptip-position-top:before {
border-top-color: rgb(228, 228, 228);
}
.pricing-section {
margin-bottom: 50px;
}
.pricing-showcase {
margin-top: 30px;
margin-left: -60px;
margin-right: -60px;
&:after {
margin: -178px 12.5% 0 12.5%;
height: 100px;
border-bottom: 3px solid lighten($blue, 20%);
content: "";
display: block;
}
}
.pricing-showcase-item {
float: left;
width: 25%;
text-align: center;
padding: 15px;
&:first-child {
background: image_url("pricing/radar.png") center -4px no-repeat;
> .pricing-showcase-item-price .pricing-circle {
background: $green;
}
}
> .pricing-showcase-item-conversations {
color: $gray-dark;
font-size: 18px;
font-weight: 300;
}
> .pricing-showcase-item-price {
font-size: 30px;
.pricing-circle {
background: $gray-darker;
border-radius: 50%;
width: 15px;
height: 15px;
margin: 15px auto;
}
> .monthly-price {
&::first-letter {
font-size: 22px;
vertical-align: text-top;
}
> .pricing-showcase-item-price-frequency {
color: $gray-dark;
font-size: 18px;
margin-left: -5px;
}
}
> .pricing-showcase-item-free {
font-size: 18px;
}
}
}
.pricing-call-to-action {
padding: 55px 0;
.call-to-action-btn {
margin-top: 55px;
}
}
/*-------------------------------
MOBILE
-------------------------------*/
@media (max-width: 768px) {
.backdrop {
padding-top: 100px;
}
.navbar .navbar-nav.pull-right {
width: 100%;
margin: 0;
a.btn {
padding: 31px !important;
margin: 0 !important;
border-radius: 0;
-webkit-border-radius: 0;
&.btn-default {
border: 0;
background: #16a0b5;
}
}
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background: rgba(0,0,0,.3);
}
.screenshot-list {
margin: 50px 0;
.screenshot > p {
margin-top: 30px;
opacity: .9;
}
}
}
@media (max-width: 960px) {
.signin_absolute {
display: none;
}
.navbar.container {
position: relative;
}
.navbar .navbar-nav.pull-right {
a.btn {
padding: 20px 20px;
margin: 15px 0 0 15px;
&.btn-default {
display: block;
}
}
}
}
@media (max-width: 1200px) {
.screenshot-list .screenshot > p {
width: 100%;
}
.navbar {
.navbar-nav.pull-right {
a.btn {
margin: 15px 0 0 0px;
padding: 20px 16px;
}
}
}
}