@if not-imported("import_once_func") { @import "import_once_func"; }
@if not-imported("framework") { @import "framework"; }
/*
------ HEADER ------
*/
#header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 10;
@include linear-gradient(to bottom, rgba(#000,0.3) 20%, rgba(#000,0) 100%);
@include transition(all 0.25s);
.-mobile-menu-active & {
z-index: 99;
}
/*body:not(.-mobile-menu-active):not(.navbar-shown) & {
@include transform(translate(0,-100%));
}*/
}
/*
------ NAVBAR ------
*/
#navbar {
//height: 120px;
/*position: absolute;
left: 0;
right: 0;
top: 10px;*/
padding: 10px 0;
z-index: 10;
transform-style: preserve-3d;
.navbar-content {
height: 100%;
z-index: 1;
}
@media screen and (max-width: 1120px) {
height: 40px;
top: 0;
/*$navbar-spacing-responsive: 22.111vw;
&:before {
left: $navbar-spacing-responsive;
-webkit-transform: translateX(-$navbar-spacing-responsive);
-moz-transform: translateX(-$navbar-spacing-responsive);
-ms-transform: translateX(-$navbar-spacing-responsive);
-o-transform: translateX(-$navbar-spacing-responsive);
transform: translateX(-$navbar-spacing-responsive);
}
&:after {
right: $navbar-spacing-responsive;
-webkit-transform: translateX($navbar-spacing-responsive);
-moz-transform: translateX($navbar-spacing-responsive);
-ms-transform: translateX($navbar-spacing-responsive);
-o-transform: translateX($navbar-spacing-responsive);
transform: translateX($navbar-spacing-responsive);
}*/
}
.scrolled &,
& {
background-color: rgba($color-bg-secondary,0.9);
@include box-shadow(0 0 10px 5px rgba($color-black,0.4));
}
.mod_changelanguage {
position: absolute;
right: 0;
top: 0;
line-height: 2.5;
ul {
margin: 0;
position: relative;
z-index: 0;
&.level_0 {
padding: 0 5px;
> li {
span {
&:before {
@include icon('\ea59', 16px);
color: $color-text-invert;
vertical-align: -1px;
margin-right: 5px;
}
}
}
}
}
li {
a,
span,
strong {
position: relative;
font-weight: 400;
display: block;
color: $color-text-invert;
@include transition(all 0.2s);
/*&:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background-color: #fff;
opacity: 0;
visibility: hidden;
@include transition(all 0.2s cubic-bezier(0.76, 0, 0.24, 1));
}
&:hover,
&.active {
&:before {
opacity: 1;
visibility: visible;
}
}*/
}
ul {
z-index: -1;
background: rgba(#fff,0.7);
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
@include transition(all 0.2s cubic-bezier(0.76, 0, 0.24, 1));
padding: 2.5em 5px 5px;
line-height: 1.5;
li {
text-align: right;
a,
span,
strong {
&:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background-color: $color-bg-secondary;
opacity: 0;
visibility: hidden;
@include transition(all 0.2s cubic-bezier(0.76, 0, 0.24, 1));
}
&:hover,
&.active {
&:before {
opacity: 1;
visibility: visible;
}
}
}
}
}
&:hover {
a,
span,
strong {
&,
&:before {
color: $color-bg-secondary !important;
}
}
ul {
opacity: 1;
visibility: visible;
}
}
}
@include for-max-size(1120px) {
//display: none;
position: relative;
right: auto;
top: auto;
text-align: right;
padding: 0 25px;
li {
a,
span,
strong {
color: $color-bg-secondary;
display: inline-block;
}
ul.level_1 {
visibility: visible;
opacity: 1;
position: relative;
display: inline-block;
padding: 0;
z-index: 1;
}
}
ul {
&.level_0 {
padding: 0;
> li {
display: inline-flex;
> span {
padding-right: 10px;
font-weight: 700;
}
span {
&:before {
color: $color-bg-secondary;
}
}
}
}
}
}
}
}
#title-logo {
height: 120px;
width: 120px;
position: absolute;
left: 0;
bottom: -70px;
/*&:before {
content: '';
position: absolute;
left: 1px;
top: 1px;
right: 1px;
bottom: 1px;
background-color: #fff;
@include border-radius(999em);
@include box-shadow(0 0 10px 5px rgba($color-black,0.4));
transform: translateZ(-10px)
}*/
img {
max-height: 100%;
width: auto;
vertical-align: bottom;
}
/*body.scrolled & {
@include transform(translateY(0));
}*/
@include for-max-size(1120px) {
left: 15px;
}
}
#mainnav {
text-align: right;
padding-left: 160px;
padding-right: 100px;
@include transition(padding-left 0.75s cubic-bezier(0,0,0,1));
height: 60px;
/*.scrolled & {
padding-left: 80px;
}*/
.mod_navigation {
text-align: unset;
font-family: $font-family-alternate;
/*position: absolute;
right: 0;
//left: 40%;
left: 23.333%;
//bottom: 3px;
top: 10px;*/
//max-width: 76.666%;
margin-left: auto;
//@include transition(all 0.25s cubic-bezier(0.76, 0, 0.24, 1));
@include transition(all 0.75s cubic-bezier(0,0,0,1));
.scrolled & {
//margin-left: 0;
//max-width: 100%;
//max-width: calc(100% - 80px);
//padding-left: 80px;
}
.level_1 {
margin: 0;
display: flex;
flex-wrap: nowrap;
align-items: center;
//justify-content: space-between;
text-align: left;
font-size: $font-size-mainnav;
letter-spacing: 0.125em;
line-height: 60px;
> li {
flex: 0 0 auto;
padding: 0 15px;
position: relative;
&:last-child {
padding-right: 0;
}
&:first-child {
padding-left: 0;
}
> a,
> span,
> strong {
display: block;
position: relative;
-webkit-transition: color 0.25s;
-moz-transition: color 0.25s;
-ms-transition: color 0.25s;
-o-transition: color 0.25s;
transition: color 0.25s;
color: $color-nav;
//line-height: 2.5;
font-weight: 600;
text-transform: uppercase;
white-space: nowrap;
/*&:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background-color: $color-nav;
opacity: 0;
visibility: hidden;
@include transition(all 0.2s cubic-bezier(0.76, 0, 0.24, 1))
}*/
&.active,
&.trail,
/*&.forward,*/
&:hover {
color: $color-nav-hover;
/*&:before {
opacity: 1;
visibility: visible;
}*/
}
}
> ul {
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.25s ease-in-out 0.25s;
-moz-transition: all 0.25s ease-in-out 0.25s;
-ms-transition: all 0.25s ease-in-out 0.25s;
-o-transition: all 0.25s ease-in-out 0.25s;
transition: all 0.25s ease-in-out 0.25s;
position: absolute;
top: 100%;
left: 0;
margin-top: 20px;
padding: 0;
text-align: left;
font-size: font-size(12px);
line-height: 2.5;
min-width: 220px;
max-width: 300px;
overflow: hidden;
/*-webkit-border-radius: $border-radius-default;
-moz-border-radius: $border-radius-default;
border-radius: $border-radius-default;*/
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
-moz-transform: translateZ(0) scale(1.0, 1.0);
-ms-transform: translateZ(0) scale(1.0, 1.0);
-o-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0) scale(1.0, 1.0);
ul {
padding-left: 2em;
border-left: 1px $color-bg-secondary solid;
}
> li {
/*background-color: $color-bg-secondary;
border-bottom: 1px mix($color-bg-secondary,#000, 55%) solid;*/
margin: 0 0 5px;
padding: 0 15px;
&:last-child {
//border-bottom: none;
margin-bottom: 0;
}
&:hover {
//background: $color-bg-tertiary;
}
}
li > a,
li > span,
li > strong {
//background-color: #fff;
display: inline-block;
position: relative;
@include transition(all 0.25s ease);
background-color: $color-bg-secondary;
color: $color-nav;
padding: 0 5px;
font-weight: 600;
text-transform: uppercase;
white-space: nowrap;
&.active,
&.trail,
&:hover {
color: $color-nav-hover;
background-color: $color-bg-tertiary;
}
}
}
&:hover {
> ul {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
}
&:hover,
&:focus-within {
> ul {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
}
}
}
}
.hamburger {
z-index: 1;
display: none;
position: absolute;
top: 0;
right: 15px;
//display: block;
width: 40px;
height: 40px;
//position: relative;
.line {
position: absolute;
left: 5px;
height: 2px;
width: 30px;
background: $color-nav;
display: block;
transition: 0.5s;
transform-origin: center;
&:nth-child(1) { top: 8px; }
&:nth-child(2) { top: 19px; }
&:nth-child(3) { top: 30px; }
}
}
#hamburger {
display:none;
&:checked,
.-mobile-menu-active & {
+ .hamburger,
.hamburger {
.line {
&:nth-child(1){
transform: translateY(11px) rotate(-45deg);
}
&:nth-child(2){
opacity:0;
}
&:nth-child(3){
transform: translateY(-11px) rotate(45deg);
}
}
}
~ .mod_navigation {
//display: block;
opacity: 1;
visibility: visible;
/*&:before {
opacity: 1;
visibility: visible;
}*/
}
}
}
@media screen and (max-width: 1230px) {
.mod_navigation {
right: 15px;
}
}
@media screen and (max-width: 1120px) {
#hamburger {
//display:none;
display:block;
&:checked,
.-mobile-menu-active & {
~ .mod_navigation,
.mod_navigation {
height: auto;
//height: calc(100vh - 50px);
height: 100vh;
@include transform(translateX(0));
@include box-shadow(0 0 50px 0 rgba(0,0,0,.7));
}
~ .hamburger,
.hamburger {
position: fixed;
top: 10px;
z-index: 1;
.line {
background: $color-bg-secondary;
}
}
}
}
.mod_navigation {
//display: none;
height: 0;
height: 100vh;
opacity: 0;
visibility: hidden;
top: -10px;
right: 0;
left: 60px;
@include transition(all 0.25s ease-in-out);
@include transform(translateX(100%));
//height: 100vh;
position: absolute;
padding-top: 140px;
padding-bottom: 15px;
overflow: hidden;
background: $color-bg-primary;
/*&:before {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
content: '';
z-index: -1;
background: rgba(0,0,0,.5);
opacity: 0;
visibility: hidden;
@include transition(all 0.25s ease-in-out);
}*/
/*&:before {
position: fixed;
left: 0;
right: 0;
top: 50px;
bottom: 0;
z-index: -1;
background: rgba(0,0,0,0.55);
content: '';
}*/
.level_1 {
display: block;
padding: 0 15px;
overflow-y: auto;
/*position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;*/
height: auto;
max-height: 300px;
max-height: calc(100vh - 50px);
> li {
flex: none;
padding: 0;
> a,
> strong {
line-height: 2.5;
text-align: center;
&,
.ampersand {
color: $color-bg-secondary;
}
&:before {
width: auto;
top: auto;
bottom: 0.15em;
left: 50%;
right: 50%;
}
&.active,
//&.trail,
&:hover {
font-weight: 700;
}
}
> ul {
opacity: 1;
visibility: visible;
position: relative;
top: auto;
left: auto;
min-width: 0;
max-width: none;
margin: 0;
> li {
padding: 0;
margin: 0;
background: none;
&:hover {
background: none;
}
}
li > a,
li > span,
li > strong {
color: $color-nav;
padding-left: $gutter-default*2;
font-weight: 400;
&.active,
//&.trail,
&:hover {
font-weight: 700;
color: $color-nav;
}
}
}
}
}
}
.hamburger {
display: block;
}
}
}