%PDF-
%PDF-
Mini Shell
Mini Shell
.header{
font-family: Montserrat, sans-serif;
position: absolute;
top: 0;
right: 0;
left: 0;
.head{
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: calc-rem(64);
margin-bottom: calc-rem(64);
@include media-breakpoint-down(md) {
margin-top: calc-rem(95);
}
img{
max-height: calc-rem(113);
@include media-breakpoint-down(lg) {
max-width: calc-rem(90);
}
@include media-breakpoint-down(xm) {
max-width: calc-rem(65);
}
}
i{
font-size: calc-rem(35);
transition: 0.3s;
&:hover{
cursor: pointer;
color: $dark_blue;
}
&.icon-menu{
color: $orange;
padding: calc-rem(10) calc-rem(7);
font-size: calc-rem(22);
}
}
}
.burger-content{
height: 100vh;
position: absolute;
z-index: 10;
top: -100vh;
left: 0;
right: 0;
color: $white;
background: $orange;
overflow-x: hidden;
overflow-y: auto;
transition: 0.3s ease;
&.active{
top: 0;
}
.content{
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
margin: calc-rem(26) auto 0 auto;
.header-contact{
@include media-breakpoint-down(lg) {
display: none;
}
font-weight: normal;
span{
display: block;
text-transform: uppercase;
color: $dark_blue;
font-style: normal;
font-weight: normal;
font-size: calc-rem(20);
line-height: calc-lh(20,24);
margin-bottom: calc-rem(20);
}
a{
display: block;
color: $white;
font-size: calc-rem(24);
line-height: calc-lh(24,29);
font-size: calc-rem(24);;
margin-bottom: calc-rem(32);
line-height: calc-rem(29);;
}
ul{
color: $white;
list-style-type: none;
display: flex;
font-weight: 400;
li{
margin-left: calc-rem(27);
margin-right: calc-rem(27);
a{
font-size: calc-rem(14);
margin-bottom: 0;
transition: 0.3s;
i{
margin-right: calc-rem(20);
}
}
&:hover{
a{
cursor: pointer;
color: $dark_blue;
}
}
&.active{
a{
color: $dark_blue;
}
}
}
}
}
.header-nav{
font-size: calc-rem(40);
line-height: calc-lh(40,49);
list-style-type: none;
font-style: normal;
font-weight: 600;
text-align: right;
@include media-breakpoint-down(lg) {
width: 100%;
}
@include media-breakpoint-down(md) {
font-size: calc-rem(28);
line-height: calc-lh(28, 34);
}
li{
margin-bottom: calc-rem(40);
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(30);
}
&.current-menu-item{
a{
letter-spacing: 0.4em;
color: $dark_blue;
}
}
&::last-child{
margin-bottom: 0;
}
a{
color: $white;
transition: 0.3s;
&:hover{
letter-spacing: 0.4em;
color: $dark_blue;
cursor: pointer;
}
}
}
}
}
&::before{
content: "";
position: absolute;
width: 100%;
height: 100vh;
left: calc-rem(150);
right: 0;
z-index: 1;
background: url(img/line-burger.png) center;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
@include media-breakpoint-down(lg) {
left: 0;
background-position: inherit;
}
}
.head {
@include media-breakpoint-down(md) {
margin-top: calc-rem(128);
margin-bottom: calc-rem(50);
}
}
}
}
.icon-menu,
.btn-menu-cross {
@extend %button-style;
}
.site-logo {
@include media-breakpoint-down(md) {
width: calc-rem(65);
height: calc-rem(65);
}
img {
width: 100%;
height: auto;
}
}
.icon-menu {
svg {
@include media-breakpoint-down(md) {
width: calc-rem(40);
height: calc-rem(14);
}
}
}
.btn-menu-cross {
svg {
@include media-breakpoint-down(md) {
width: calc-rem(30) !important;
height: calc-rem(30) !important;
}
}
}
.header .burger-content .content {
margin: calc-rem(100) auto 0 auto !important;
@include media-breakpoint-down(md) {
margin-top: calc-rem(0) !important;
}
}
.social-item {
display: flex !important;
align-items: baseline;
position: relative;
z-index: 1;
}
.social-icon {
margin-right: calc-rem(20);
position: absolute;
z-index: 2;
top: 50%;
left: -34px;
transform: translateY(-50%);
}
.social-icons {
li {
margin-right: calc-rem(55) !important;
&.active, &:hover {
color: #030027;
transition: none !important;
svg, path {
fill: #030027;
}
g path {
stroke: #030027;
fill: transparent;
}
}
}
}
.icon-menu-burger {
pointer-events: none;
}
Zerion Mini Shell 1.0