.header {
@include position(fixed, 0 0 null 0); display: flex; flex-direction: row; align-items: center; height: $header-height; padding: 0 $outer-pad; background: rgba($white, 1); color: $text-color; box-shadow: 0 1px 1px rgba($black, 0.1); transition: background 0.3s ease, transform 0.6s $CurveFastOutSlowIn, opacity 0.6s $CurveFastOutSlowIn; z-index: 1024; transform: translateZ(0); @include media($tablet) { transform: none; } &--previewOpen { transform: translate3d(0, -100%, 0); opacity: 0; } &--transparent { background: transparent; box-shadow: none; } &--scrolled { background: rgba($white, 1); color: $text-color; box-shadow: 0 1px 1px rgba($black, 0.1); } &__title { display: flex; align-items: center; position: relative; z-index: 20; } &__titleLink { display: flex; align-items: center; border: 0; &:hover { border: 0; } } &__logoContainer { height: 34px; width: 25px; } &__logo { height: 34px; width: 25px; } &__logoColour, &__logoSolid { transition: all 0.3s ease; } &__logoColour { opacity: 1; .header--transparent & { opacity: 0; } .header--scrolled &, .header--navOpen & { opacity: 1; } } &__logoSolid { opacity: 0; .header--transparent & { opacity: 1; } .header--scrolled &, .header--navOpen & { opacity: 0; } } &__titleText { font-size: 12px; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; margin-left: 15px; padding-left: 20px; border-left: $base-border; transition: color 0.3s ease; color: $text-color; .header--transparent & { color: $white; border-left: 1px solid rgba($white, 0.3); } .header--scrolled & { color: $text-color; border-left: $base-border; } @include media($tablet) { .header--navOpen & { color: $text-color; border-left: $base-border; } } } &__nav { display: flex; align-items: center; margin-left: auto; height: 100%; position: relative; } &__navList { list-style-type: none; display: flex; flex-direction: row; align-items: center; margin: 0; height: 100%; @include media($tablet) { @include position(fixed, 0 0 0 0); background: rgba($white, 0); padding-top: 40px; visibility: hidden; pointer-events: none; flex-direction: column; justify-content: center; transition: all 0.4s 0.2s $CurveFastOutSlowIn; .header--navOpen & { transition: all 0.4s $CurveFastOutSlowIn; visibility: visible; pointer-events: auto; background: rgba($white, 0.95); } } } &__toggleButton { display: none; border: 0; padding: 0; font-size: 12px; letter-spacing: 0.08em; font-weight: 600; background: none; text-transform: uppercase; position: relative; z-index: 20; border-radius: $base-border-radius; transition: all 0.3s ease; padding: 10px; right: -10px; position: relative; align-items: center; margin: 0; &:focus, &:hover, &:active { background: rgba($black, 0.1); outline: none; } .header--navOpen & { color: $text-color; } .header--transparent & { color: $white; &--navOpen { color: $text-color; } } .header--scrolled &, .header--navOpen & { color: $text-color; } @include media($tablet) { display: flex; } } &__toggleButtonInner { display: flex; align-items: center; } &__toggleIcon { $bar-width: 18px; $bar-height: 2px; $bar-spacing: 5px; $bar-color: lighten($black, 60%); $bar-color-light: $white; $bar-anim-duration: 0.5s; $bar-anim-curve: cubic-bezier(0.23, 1, 0.32, 1); position: relative; background: rgba($bar-color, 1); transition: all 0.2s 0s; width: $bar-width; height: $bar-height; margin-right: 8px; .header--navOpen & { transition: all 0s 0.2s; } .header--transparent & { background: rgba($bar-color-light, 1); } .header--scrolled & { transition: all 0.2s 0s; background: rgba($bar-color, 1); } .header--navOpen & { background: rgba($bar-color, 0); } @keyframes barTop { 0% { transform: translateY(-$bar-spacing) rotate(0deg);} 40% { transform: translateY(0) rotate(0deg);} 100% { transform: translateY(0) rotate(-45deg);} } @keyframes barBottom { 0% { transform: translateY($bar-spacing) rotate(0deg);} 40% { transform: translateY(0) rotate(0deg);} 100% { transform: translateY(0) rotate(45deg);} } @keyframes barTopClose { 0% { transform: translateY(0) rotate(-45deg); } 40% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-$bar-spacing) rotate(0deg); } } @keyframes barBottomClose { 0% { transform: translateY(0) rotate(45deg); } 40% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY($bar-spacing) rotate(0deg); } } &:before { content: ""; position: absolute; left: 0; transition: all 0.2s 0s; transform: translateY(-$bar-spacing); background: rgba($bar-color, 1); width: $bar-width; height: $bar-height; .header--navOpen & { transition: all 0s 0.2s; } .header--transparent & { background: rgba($bar-color-light, 1); } .header--scrolled & { background: rgba($bar-color, 1); } } &:after { content: ""; position: absolute; left: 0; transition: all 0.2s 0s; transform: translateY($bar-spacing); background: rgba($bar-color, 1); width: $bar-width; height: $bar-height; .header--navOpen & { transition: all 0s 0.2s; } .header--transparent & { background: rgba($bar-color-light, 1); } .header--scrolled & { transition: all 0.2s 0s; background: rgba($bar-color, 1); } } .header--navOpen & { &:before { animation: barTop $bar-anim-duration $bar-anim-curve forwards; background: rgba($bar-color, 1); } } .header--navOpen & { &:after { animation: barBottom $bar-anim-duration $bar-anim-curve forwards; background: rgba($bar-color, 1); } } &--closing:before { animation: barTopClose $bar-anim-duration $bar-anim-curve forwards; } &--closing:after { animation: barBottomClose $bar-anim-duration $bar-anim-curve forwards; } } &__navItem { margin: 0; margin-right: 30px; display: flex; align-items: center; height: 100%; &:last-child { margin-right: 0; } @include media($tablet) { transform: translate3d(0, 50px, 0); transition: all 0.4s $CurveFastOutSlowIn; margin-right: 0; height: auto; opacity: 0; width: 100%; } .header--navOpen & { @include media($tablet) { transform: translate3d(0, 0, 0); opacity: 1; } } } &__navLink { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: currentColor; border: 0; height: 100%; display: flex; align-items: center; .header--transparent & { color: rgba($white, 0.8); } .header--scrolled & { color: $text-color; } .header & { &--active, &:hover { color: $primary-color; border: 0; } } .header--transparent & { &--active, &:hover { color: $white; border: 0; } } .header--scrolled & { &--active, &:hover { color: $primary-color; border: 0; } } &.button--primary, &.button--primary:hover { color: $white; } @include media($tablet) { text-transform: none; font-size: 18px; letter-spacing: normal; padding: 25px 0; height: auto; width: 100%; justify-content: center; .header & { color: $text-color; &--active, &:hover { color: $primary-color; } } } }
}