website/scss/_header.scss

194 lines
3.2 KiB
SCSS

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
&:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
.gridContainer {
width: 100%;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
margin-right: auto !important;
margin-left: auto !important;
}
.header-homepage {
background-image: url(/img/bannerHome.webp);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
color: #fff;
z-index: 0;
padding-top: 160px;
padding-bottom: 160px;
&:before {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
display: inline-block;
background-color: #fff;
padding-bottom: 230px;
}
.header-description-row {
padding-top: 8%;
padding-bottom: 8%;
}
}
.header-separator-bottom {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
svg { display: block;
width: calc(100% + 1.3px);
}
.header-separator {
position: absolute;
width: 100%;
max-width: 100%;
bottom: -1px;
overflow: hidden;
}
}
.svg-white-bg {
fill: #1a2332;
}
.header-description {
min-height: 100px;
text-align: center;
}
p.header-subtitle {
color: #fff;
font-weight: 300;
font-size: 1.4em;
text-align: inherit;
}
.color-overlay {
&:before {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
display: inline-block;
content: "";
-webkit-transform: translate3d(0, 0, -1px);
}
}
.header-wrapper {
background-color: #ebebeb;
position: relative;
}
h1 {
font-weight: 600;
font-size: 2.2em;
margin-bottom: 25px;
}
.header-description-row {
padding: 0 15px 0 15px;
display: block;
}
.align-holder {
width: 100%;
}
.header-buttons-wrapper {
margin: 0;
}
p {
margin: 0 0 20px 0;
}
.homepage-template {
.svg-white-bg {
fill: #fff;
}
}
.header-homepage.color-overlay {
&:before {
background-color: #000;
opacity: .4;
}
}
.header-homepage.header-separator {
svg {
height: 90px !important;
}
}
.header-separator {
svg {
height: 90px !important;
}
}
@media only screen and (min-width:768px) {
h1 {
font-size: 3.4em;
}
p {
line-height: 130%;
}
h1.heading8 {
font-size: 3.3em;
}
.gridContainer {
width: 90%;
max-width: 1232px;
.row {
margin-left: -15px;
margin-right: -15px;
clear: both;
}
}
.header-description-row {
&:before {
content: normal;
}
&:after {
content: normal;
}
}
.header-content-centered {
margin-left: auto;
margin-right: auto;
}
.header-buttons-wrapper {
margin: 0 -9px 0 -9px;
clear: both;
}
.header-content {
width: 100% !important;
.align-holder {
text-align: center !important;
}
}
}
@media only screen and (min-width: 1024px) {
.gridContainer {
width: 80%;
}
h1 {
font-size: 3.8em;
}
p {
line-height: 150%;
}
.header-homepage {
min-height: auto;
}
}