98 lines
1.8 KiB
SCSS
98 lines
1.8 KiB
SCSS
|
.header {
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: gutter(6);
|
||
|
|
background: $brand-color-a;
|
||
|
|
color: $brand-white;
|
||
|
|
z-index: $z-mid;
|
||
|
|
|
||
|
|
@include breakpoint($sm) {
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__inner {
|
||
|
|
padding: 40px 0;
|
||
|
|
overflow: auto;
|
||
|
|
overflow-x: hidden;
|
||
|
|
|
||
|
|
@include breakpoint($md) {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
padding: 80px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__content {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
@include breakpoint($md) {
|
||
|
|
@include span(8);
|
||
|
|
@include last();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__title {
|
||
|
|
@extend .h1;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__subtitle {
|
||
|
|
@extend .h2;
|
||
|
|
color: mix($brand-color-a, $brand-color-f);
|
||
|
|
margin-bottom: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__promo {
|
||
|
|
@include hex__outer;
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
@include breakpoint($md) {
|
||
|
|
display: block;
|
||
|
|
@include span(4);
|
||
|
|
margin-bottom: gutter(8);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.header__promo__inner {
|
||
|
|
@include hex__middle;
|
||
|
|
}
|
||
|
|
.header__promo__media {
|
||
|
|
@include hex__inner;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__social {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: stretch;
|
||
|
|
margin-top: 10vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__social__item {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__social__link {
|
||
|
|
font-size: 150%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
line-height: 1;
|
||
|
|
padding: 10px;
|
||
|
|
background: tint($brand-color-a, 50%);
|
||
|
|
color: mix($brand-color-a, $brand-color-f, 80%);
|
||
|
|
|
||
|
|
.header__social__item:nth-child(5n) & {
|
||
|
|
background: tint($brand-color-a, 30%);
|
||
|
|
}
|
||
|
|
.header__social__item:nth-child(even) & {
|
||
|
|
background: tint($brand-color-a, 40%);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: tint($brand-color-a, 25%);
|
||
|
|
|
||
|
|
.header__social__item:nth-child(even) &,
|
||
|
|
.header__social__item:nth-child(5n) & {
|
||
|
|
background: tint($brand-color-a, 25%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|