%PDF-
%PDF-
Mini Shell
Mini Shell
// header {
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// // background: #fff;
// z-index: 99;
// border-bottom: solid 1px #fff;
// transition: $transition_normal;
// .header--wrapper {
// padding: calc-rem(28) 0 calc-rem(25) 0;
// display: flex;
// #main-nav--toggle {
// margin-left: auto;
// background: none;
// border: none;
// width: calc-rem(26);
// height: calc-rem(19);
// position: relative;
// span {
// display: block;
// position: absolute;
// height: calc-rem(3);
// left: 0;
// right: 0;
// background: #000;
// transition: $transition_normal;
// &:nth-child(1) {
// top: 0;
// opacity: 1;
// }
// &:nth-child(2) {
// top: 50%;
// margin-top: calc-rem(-1.5);
// transform: rotate(0deg);
// }
// &:nth-child(3) {
// top: 50%;
// margin-top: calc-rem(-1.5);
// transform: rotate(0deg);
// }
// &:nth-child(4) {
// bottom: 0;
// opacity: 1;
// }
// }
// }
// }
// }
.header {
padding-top: calc-rem(25);
background: #1D1D1D;
.banner-header {
margin-bottom: calc-rem(20);
position: relative;
.banner-inner {
margin-top: 0;
.annons-label {
color: #959595;
@include media-breakpoint-down(lg) {
transform: rotate(90deg) translateY(-50%);
left: calc(100% + 5px);
bottom: auto;
top: 0;
}
}
}
}
.header--ticker {
display: flex;
align-items: center;
margin-bottom: calc-rem(25);
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(20);
}
.header--ticker--logo {
min-width: 55px;
max-width: 55px;
img {
width: 100%;
}
}
.header--ticker--marquee {
overflow: hidden;
min-width: 1px;
position: relative;
&:before,
&:after {
content: '';
display: block;
width: calc-rem(40);
position: absolute;
top: 0;
bottom: 0;
z-index: 3;
}
&:before {
left: -1px;
background: rgb(29,29,29);
background: linear-gradient(90deg, rgba(29,29,29,1) 0%, rgba(29,29,29,0) 100%);
}
&:after {
right: -1px;
background: rgb(29,29,29);
background: linear-gradient(270deg, rgba(29,29,29,1) 0%, rgba(29,29,29,0) 100%);
}
ul {
padding: 0;
display: block;
list-style: none;
white-space: nowrap;
position: relative;
z-index: 2;
margin: 0;
li {
display: inline-block;
white-space: nowrap;
color: #959595;
font-size: calc-rem(14);
line-height: calc-lh(14,20);
position: relative;
padding-left: 17px;
margin-left: 9px;
a {
color: #959595;
text-decoration: none;
&:hover {
color: #959595;
}
}
&:before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 6px;
background: #959595;
position: absolute;
left: 0;
top: 50%;
margin-top: -3px;
}
}
}
}
}
.header--main {
border: solid 1px rgba($color: #ffffff, $alpha: 0.25);
margin-bottom: calc-rem(40);
background: rgba($color: #000000, $alpha: 0.25);
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(22);
}
.header--main--top {
display: flex;
min-height: calc-rem(88);
@include media-breakpoint-down(xl) {
flex-wrap: wrap;
}
> * + * {
border-left: solid 1px rgba($color: #ffffff, $alpha: 0.25);
@include media-breakpoint-down(xl) {
border-left: none;
}
}
.header--main--top--sidebar-toggle {
background: none;
border: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: calc-rem(10) calc-rem(30);
@include media-breakpoint-down(md) {
padding: calc-rem(10) calc-rem(35);
}
@include media-breakpoint-down(xl) {
order: 1;
}
span {
display: block;
width: calc-rem(30);
height: calc-rem(4);
background: #959595;
transition: $transition_normal;
@include media-breakpoint-down(md) {
width: calc-rem(20);
height: calc-rem(3);
}
& + span {
margin-top: calc-rem(7);
@include media-breakpoint-down(md) {
margin-top: calc-rem(4);
}
}
}
&:hover {
span {
background: #247474;
}
}
}
.header--main--top--logo {
padding: calc-rem(10) calc-rem(34);
display: flex;
align-items: center;
@include media-breakpoint-down(xl) {
order: 2;
border-left: solid 1px rgba($color: #ffffff, $alpha: 0.25);
padding: calc-rem(20) calc-rem(30);
flex: 1 1;
justify-content: center;
}
@include media-breakpoint-down(md) {
padding: calc-rem(15);
}
}
.header--main--top--title {
flex: 1 1;
padding: calc-rem(10) calc-rem(34);
display: flex;
align-items: center;
justify-content: center;
font-size: calc-rem(18);
font-weight: 500;
line-height: 1.4;
color: #959595;
@include media-breakpoint-down(xl) {
min-width: 100%;
border-top: solid 1px rgba($color: #ffffff, $alpha: 0.25);
order: 4;
padding: calc-rem(20) calc-rem(30);
}
@include media-breakpoint-down(md) {
padding: calc-rem(20) calc-rem(10);
text-align: center;
font-size: calc-rem(16);
line-height: calc-lh(16,24);
font-weight: 400;
}
}
.header--main--top--socials {
display: flex;
@include media-breakpoint-down(xl) {
// min-width: 100%;
border-left: solid 1px rgba($color: #ffffff, $alpha: 0.25);
order: 3;
}
@include media-breakpoint-down(md) {
min-width: 100%;
border-left: none;
border-top: solid 1px rgba($color: #ffffff, $alpha: 0.25);
}
ul {
display: flex;
margin: 0;
list-style: none;
padding: 0;
@include media-breakpoint-down(xl) {
width: 100%;
}
li {
display: flex;
@include media-breakpoint-down(xl) {
flex: 1 1;
display: flex;
}
a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: calc-rem(10) calc-rem(33);
font-size: calc-rem(24);
color: #959595;
@include media-breakpoint-down(xl) {
flex: 1 1;
}
@include media-breakpoint-down(md) {
padding: calc-rem(20) calc-rem(10);
font-size: calc-rem(16);
}
&:hover {
color: #247474;
}
}
}
> * + * {
border-left: solid 1px rgba($color: #ffffff, $alpha: 0.25);
}
}
}
}
.header--main--nav {
border-top: solid 1px rgba($color: #ffffff, $alpha: 0.25);
display: flex;
align-items: flex-start;
position: relative;
&:after {
content: '';
display: block;
width: calc-rem(40);
position: absolute;
top: 0;
bottom: 0;
z-index: 3;
right: 0;
background: rgb(29,29,29);
background: linear-gradient(270deg, rgba(29,29,29,1) 0%, rgba(29,29,29,0) 100%);
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
padding: calc-rem(22) calc-rem(20) calc-rem(22) calc-rem(10);
border-right: solid 1px rgba($color: #ffffff, $alpha: 0.25);
margin-right: auto;
overflow: auto;
padding-right: calc-rem(50);
@include media-breakpoint-down(md) {
padding: 0 calc-rem(6) calc-rem(3) calc-rem(6);
}
li {
a {
text-decoration: none;
display: block;
padding: calc-rem(10) calc-rem(20);
text-transform: uppercase;
font-size: calc-rem(18);
line-height: calc-lh(18,24);
background: transparent;
color: #959595;
white-space: nowrap;
@include media-breakpoint-down(md) {
font-size: calc-rem(14);
padding: calc-rem(10) calc-rem(7);
}
&:hover {
background: #247474;
color: #fff;
@include media-breakpoint-down(md) {
background: transparent;
}
}
}
}
}
}
}
.header--puffs {
margin-bottom: calc-rem(20);
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(5);
}
.header--puffs--item {
margin-bottom: calc-rem(20);
position: relative;
display: block;
border: solid 1px rgba($color: #ffffff, $alpha: 0.25);
padding: calc-rem(21) calc-rem(28) calc-rem(28) calc-rem(28);
border-radius: calc-rem(8);
font-size: calc-rem(18);
line-height: calc-lh(18,27);
background: rgba($color: #000000, $alpha: 0.25);
color: #959595;
text-decoration: none;
@include media-breakpoint-down(md) {
font-size: calc-rem(16);
padding: calc-rem(14) calc-rem(18);
}
&:hover {
color: #DDDDDD;
}
&:before {
background: #1D1D1D;
}
&:before,
&:after {
content: '';
display: block;
width: 10px;
height: 10px;
border-radius: 5px;
background: $primary;
position: absolute;
left: -5px;
top: -5px;
box-shadow: 0px 0px 0px 5px #1D1D1D;
}
&:after {
animation: puff_pulse 3s infinite;
}
}
}
}
.sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #1D1D1D;
z-index: 999;
top: calc-rem(-100);
transition: $transition_normal;
&.sticky-header--show {
top: 0;
}
.sticky-header--inner {
display: flex;
align-items: center;
.sticky-header--sidebar-toggle {
background: none;
border: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: calc-rem(10) calc-rem(5);
position: absolute;
span {
display: block;
width: calc-rem(30);
height: calc-rem(4);
background: #959595;
transition: $transition_normal;
@include media-breakpoint-down(md) {
width: calc-rem(20);
height: calc-rem(3);
}
& + span {
margin-top: calc-rem(7);
@include media-breakpoint-down(md) {
margin-top: calc-rem(4);
}
}
}
&:hover {
span {
background: #247474;
}
}
}
.sticky-header--logo {
text-align: center;
padding: calc-rem(17);
flex: 1 1;
a {
img {
max-height: calc-rem(35);
}
}
}
}
}
@keyframes puff_pulse {
0%,
100% {
box-shadow: 0 0 0 0 $primary;
opacity: 0.7;
}
25% {
box-shadow: 0 0 0 10px $primary;
opacity: 0;
}
50% {
box-shadow: 0 0 0 0 $primary;
opacity: 0;
}
}
Zerion Mini Shell 1.0