app/assets/stylesheets/base/globals.scss
@import 'font-awesome';
@import 'colors';
@import 'fonts';
@import 'icons';
@import 'placeholders';
body {
color: $color-limed-spruce;
font-size: medium;
line-height: 1.2;
}
p {
-webkit-margin-after: 20px;
-webkit-margin-before: 20px;
}
a {
font-weight: normal;
}
a,
a:active {
color: $color-limed-spruce;
text-decoration: none;
}
a:hover {
color: $color-limed-spruce;
}
h2 {
font-size: 60px;
font-weight: lighter;
margin: 0;
padding: 0;
}
h3 {
font-size: 30px;
font-weight: lighter;
margin: 0;
padding: 0;
}
h4 {
font-size: 20px;
font-weight: bold;
margin: 20px 0 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
section {
overflow: hidden;
}
.link-button {
background-color: transparent;
border: 5px solid $color-limed-spruce;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: $color-limed-spruce;
display: block;
float: left;
font-size: 12px;
font-weight: bold;
padding: 15px 24px;
position: relative;
text-transform: uppercase;
box-shadow: inset 0 0 0 0 $color-buttery-white;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
&:hover {
box-shadow: inset 0 100px 0 0 $color-buttery-white;
}
&.inactive {
&:hover {
box-shadow: inset 0 0 0 0 $color-buttery-white;
}
}
}
input[type=submit].link-button {
@extend .link-button;
}
.link-button-large {
@extend .link-button;
font-size: 24px;
padding: 14px 30px;
vertical-align: top;
}
input[type=submit].link-button-large {
@extend .link-button-large;
}
.icon-white-link {
color: $color-white;
}
.icon-yellow-link {
color: $color-gold;
font-size: 10px;
line-height: 10px;
i {
margin-right: 5px;
vertical-align: middle;
}
}
.hover-item {
&.hover-item-border {
outline: 0 solid $color-gold;
-webkit-transition: outline ease-in-out .1s;
-moz-transition: outline ease-in-out .1s;
transition: outline ease-in-out .1s;
&:hover {
outline: 5px solid $color-gold;
}
}
}
.holds-the-iframe {
background: url('base/loader.svg') no-repeat;
}
.hr-style-1 {
border-top: 1px solid $color-limed-spruce;
margin: 10px 0;
width: 100%;
}
@include respond-to(small) {
h2 {
font-size: 46px;
}
.link-button {
display: inline-block;
float: none;
margin-bottom: 25px;
margin-top: 0;
position: relative !important;
}
}
@include respond-to(medium) {
h2 {
font-size: 46px;
}
}
@include respond-to(large) {
h2 {
font-size: 60px;
}
}