%PDF-
%PDF-
Mini Shell
Mini Shell
//header
.header {
width: 100%;
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
margin: 0 auto;
transition: all 0.3s;
transform: translate3d(0, 0, 0);
will-change: transform;
font-size: 0.85rem;
// default style
background: #fff;
@include media-breakpoint-down(md) {
box-shadow: 0 0px 8px rgb(0 0 0 / 15%);
}
&-logo {
margin-right: calc-rem(20);
max-width: calc-rem(150);
img{
width: 100%;
}
}
.dynamic-block {
display: flex;
align-items: center;
@include media-breakpoint-down(xl) {
padding: calc-rem(40);
display: block;
margin-bottom: calc-rem(40);
}
@include media-breakpoint-down(md) {
padding: calc-rem(20);
}
}
&-top {
display: flex;
align-items: center;
padding-top: calc-rem(25);
padding-bottom: calc-rem(25);
&__col {
display: flex;
align-items: center;
}
&__left {
margin-right: auto;
}
&__right {
justify-content: space-between;
}
@include media-breakpoint-down(md) {
padding-top: calc-rem(10);
padding-bottom: calc-rem(10);
}
}
&-btn {
margin: auto calc-rem(60);
@include media-breakpoint-down(md) {
margin: auto;
text-align: center;
}
}
&-contact {
display: flex;
&__item {
display: flex;
align-items: center;
margin-right: calc-rem(30);
font-size: calc-rem(20);
color: $text-color;
&:hover {
svg {
stroke: $primary-color;
}
}
&:last-child {
margin-right: 0;
}
@include media-breakpoint-down(xl) {
margin: calc-rem(15);
&:last-child {
margin: calc-rem(15);
}
}
@media (max-width: 340px){
margin: 0;
}
}
@include media-breakpoint-down(xl) {
margin-bottom: calc-rem(20);
}
@include media-breakpoint-down(md) {
flex-direction: column;
align-items: center;
}
}
&-menu-wrap {
background: #fff;
box-shadow: 0 calc-rem(10) calc-rem(20) rgb(0 0 0 / 10%);
position: fixed;
z-index: 1045;
top: 0;
right: -100%;
opacity: 0;
width: 100%;
max-width: calc-rem(565);
transition: all 0.5s ease;
height: 100vh;
overflow: auto;
&.active {
opacity: 1;
right: 0;
transition: all 0.5s ease;
}
}
&-main-menu {
margin-bottom: auto;
flex-direction: column;
align-items: flex-start;
padding: calc-rem(40);
padding-top: calc-rem(100);
padding-bottom: calc-rem(30);
li {
width: 100%;
list-style: none;
border-bottom: calc-rem(1) solid #f1f9fc;
a {
display: block;
padding: calc-rem(15) calc-rem(23);
font-weight: 700;
text-transform: uppercase;
font-size: calc-rem(16);
text-align: left;
color: $secondary-color;
padding: calc-rem(10);
position: relative;
&:hover {
color: #ffffff;
background-color: $primary-color;
.menu-arrow {
&::after {
border-bottom: calc-rem(2) solid #fff;
border-left: calc-rem(2) solid #fff;
}
}
}
.menu-arrow {
&::after {
border-bottom: calc-rem(2) solid $secondary-color;
border-left: calc-rem(2) solid $secondary-color;
}
}
@media (max-width: 340px){
padding: calc-rem(10) calc-rem(23);
font-size: calc-rem(14);
}
}
}
.has-children {
a {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.dropdown-menu {
padding: 0;
margin: 0;
display: none;
margin-bottom: calc-rem(20);
li {
border: none;
a {
display: block;
padding: calc-rem(10) calc-rem(20);
font-size: calc-rem(14);
font-weight: 400;
transition: all 0.25s;
position: relative;
&:hover {
color: #fff;
}
}
}
}
@include media-breakpoint-down(sm) {
padding: calc-rem(20);
padding-top: calc-rem(100);
padding-bottom: calc-rem(20);
}
@media (max-width: 340px){
padding-top: calc-rem(50);
}
}
&-bottom {
display: flex;
padding: 0;
@include media-breakpoint-down(md) {
margin: auto calc-rem(-20);
display: block;
}
&-col {
display: block;
background-color: $secondary-color;
flex: 0 0 auto;
width: 50%;
cursor: pointer;
position: relative;
&::before,
&::after {
content: "";
position: absolute;
display: block;
height: 100%;
width: 100%;
top: 0;
z-index: 1;
}
&:nth-child(2n) {
background-color: $primary-color;
}
.menu-arrow {
display: block;
margin-left: calc-rem(10);
width: calc-rem(12);
height: calc-rem(12);
border-bottom: calc-rem(3) solid #fff;
border-left: calc-rem(3) solid #fff;
transform: rotate(-135deg);
transition: all 0.25s;
&::after{
display: none;
}
}
@include media-breakpoint-up(md) {
&:hover {
.menu-arrow {
transition: all 0.25s;
transform: rotate(-45deg);
}
.header-bottom-menu {
display: block;
}
}
}
@include media-breakpoint-down(md) {
max-width: 100%;
width: 100%;
&::before,
&::after {
display: none;
}
&.active{
.menu-arrow {
transition: all 0.25s;
transform: rotate(-45deg);
}
.header-bottom-menu {
display: block;
}
}
}
}
&-left {
&::before {
left: -100%;
background-color: $secondary-color;
}
}
&-right {
&::before {
right: -100%;
background-color: $primary-color;
}
}
&-head {
padding: calc-rem(15);
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #fff;
position: relative;
width: 100%;
text-transform: uppercase;
text-align: center;
font-size: calc-rem(24);
font-weight: 700;
&:hover {
color: #fff;
}
@include media-breakpoint-down(md) {
padding: calc-rem(10);
padding-right: calc-rem(20);
padding-left: calc-rem(20);
font-size: calc-rem(18);
justify-content: inherit;
.menu-arrow{
margin-left: auto;
}
}
}
&-menu {
position: absolute;
border: calc-rem(1) solid #066692;
border-top: none;
background: #fff;
width: 100%;
display: none;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
background-color: #fff;
&:nth-child(2n) {
background-color: #f1f9fc;
}
a {
display: block;
padding: calc-rem(15) calc-rem(23);
font-size: calc-rem(22);
font-weight: 400;
color: $secondary-color;
transition: all 0.25s;
width: calc-rem(300);
position: relative;
&:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 50%;
width: calc-rem(12);
height: calc-rem(12);
border-bottom: calc-rem(3) solid $secondary-color;
border-left: calc-rem(3) solid $secondary-color;
transform: rotate(-135deg);
transition: all 0.25s;
transform: translateY(-50%) rotate(-135deg);
}
&:hover {
text-decoration: underline;
&:after {
right: calc-rem(-5);
}
}
@include media-breakpoint-down(md) {
width: 100%;
&:after {
right: calc-rem(20);
}
}
}
}
}
@include media-breakpoint-down(md) {
position: static;
}
}
&-icon {
height: calc-rem(32);
width: calc-rem(32);
display: flex;
align-items: center;
margin-right: calc-rem(20);
img {
width: 100%;
}
}
&-info {
position: absolute;
top: calc-rem(30);
right: calc-rem(50);
color: #fff;
text-align: center;
max-width: calc-rem(340);
padding: calc-rem(20) calc-rem(25);
box-shadow: 0 0 calc-rem(16) rgba(0, 0, 0, 0.09);
background-color: $primary-color;
font-size: calc-rem(20);
a {
color: #d8d8d8;
font-weight: 700;
text-decoration: underline;
&:hover {
color: #fff;
}
}
@include media-breakpoint-down(xxl) {
position: static;
max-width: 100%;
}
}
}
//Burger
&-burger {
display: flex;
color: $secondary-color;
&__text {
font-size: calc-rem(16);
margin-right: calc-rem(10);
}
&.active {
position: fixed;
top: calc-rem(40);
right: calc-rem(40);
z-index: 1200;
.burger span {
&:nth-child(1) {
top: calc-rem(9);
transform: rotate(135deg);
}
&:nth-child(2) {
opacity: 0;
right: calc-rem(-60);
}
&:nth-child(3) {
top: calc-rem(9);
transform: rotate(-135deg);
}
}
@include media-breakpoint-down(sm) {
right: calc-rem(20);
}
@media (max-width: 340px){
top: calc-rem(20);
right: calc-rem(20);
}
}
}
}
.navigation-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1042;
height: 100vh;
display: none;
&__bg {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #0b0b0b;
backdrop-filter: blur(8px);
opacity: 0;
overflow: hidden;
z-index: 1043;
transition: all 0.3s ease;
height: 100vh;
}
&.active {
display: block;
.navigation-overlay__bg {
opacity: 0.8;
}
}
}
//Burger
.burger {
display: block;
padding: 0;
border: none;
background: none;
transition: all 0.25s;
opacity: 1;
width: calc-rem(33);
height: calc-rem(20);
position: relative;
transform: rotate(0deg);
opacity: 1;
transition: all 0.25s;
cursor: pointer;
z-index: 1000;
transform: scale(1);
transition: all 0.3s ease;
&:hover {
transform: scale(1.1);
}
span {
display: block;
position: absolute;
border-radius: calc-rem(2);
height: calc-rem(3);
width: 100%;
background: $secondary-color;
opacity: 1;
right: 0;
transition: 0.2s ease-in-out;
&:nth-child(1) {
top: 0;
}
&:nth-child(2) {
top: calc-rem(8);
}
&:nth-child(3) {
bottom: 0;
}
}
&.active {
span:nth-child(1) {
top: calc-rem(9);
transform: rotate(135deg);
}
span:nth-child(2) {
opacity: 0;
right: calc-rem(-60);
}
span:nth-child(3) {
top: calc-rem(9);
transform: rotate(-135deg);
}
}
}
Zerion Mini Shell 1.0