navigation fixes

private/scss/modules/_footer.scss

@@ -34,7 +34,7 @@
     display: inline-block;
     vertical-align: top;
     position: relative;
-    top: 100%;
+    top: em(50px);
     width: auto;
     padding: em(8px) em(15px);
     border-left: em(1px) solid $light_gray;

private/scss/modules/_header.scss

@@ -352,6 +352,7 @@
   position: absolute;
   top: em(9px);
   right: em(16px);
+  will-change: transform;
   svg {
     display: block;
     width: 100%;
@@ -383,4 +384,20 @@
       left: em(12px);
     }
   }
+}
+
+.header__button__icon__number {
+  position: absolute;
+  top: em(0.5px);
+  will-change: transform;
+  left: 0;
+  font-size: em(9px);
+  background: $green;
+  width: em(14px);
+  height: em(14px);
+  border-radius: 50%;
+  line-height: em(14px);
+  color: $white;
+  font-weight: 900;
+  text-align: center;
 }

private/scss/modules/_navigation.scss

@@ -14,6 +14,8 @@
   @media screen and (max-width: $medium_breakpoint) {
     display: block;
     height: auto;
+    min-height: 100%;
+    background: $white;
   }
 }
 
@@ -24,13 +26,7 @@
   background: $white;
   padding: em(50px) 0;
   .social_media {
-    display: inline-block;
-    vertical-align: top;
-    width: auto;
-  }
-  .social_media__item {
-    background: $green;
-    color: $white;
+    padding: em(10px);
   }
   @media screen and (max-width: $medium_breakpoint) {
     padding-bottom: 0;
@@ -144,11 +140,10 @@
   width: 100%;
   .navigation__item {
     height: 100%;
-    background-size: cover;
-    background-position: top center;
     position: relative;
     overflow: hidden;
     color: transparent;
+    background: $white;
     &:before, &:after {
       content: '';
       display: block;
@@ -159,9 +154,10 @@
       bottom: -5%;
     }
     &:after {
-      background: $black;
-      opacity: 0.4;
-      transition: opacity 0.3s;
+      background-image: linear-gradient(to bottom, rgba($black, 0.65), $black);
+      opacity: 0.5;
+      transition: opacity 0.5s;
+      z-index: 1;
     }
     &:before {
       background: $white;
@@ -170,12 +166,22 @@
       transform-origin: 100% 100%;
       z-index: 2;
     }
+    .navigation__main[data-hover] & {
+      &:after {
+        opacity: 0.7;
+      }
+    }
     @for $i from 0 through 2 {
       &.data_id_#{$i} {
         &:before {
           transition-delay: 0.3s + (0.1s * $i);
         }
       }
+      .navigation__main[data-hover="#{$i}"] &.data_id_#{$i} {
+        &:after {
+          opacity: 0.5 !important;
+        }
+      }
     }
     .navigation_open & {
       &:before {
@@ -185,6 +191,24 @@
   }
 }
 
+.navigation__item__background {
+  background-size: cover;
+  background-position: top center;
+  position: absolute;
+  top: -5%;
+  left: -5%;
+  right: -5%;
+  bottom: -5%;
+  z-index: 0;
+  transition: transform 8s;
+  transform: none;
+  @for $i from 0 through 2 {
+    .navigation__main[data-focus="#{$i}"] .navigation__item.data_id_#{$i} & {
+      transform: scale(1.1);
+    }
+  }
+}
+
 .navigation__list {
   position: relative;
   left: 0;
@@ -224,13 +248,14 @@
 }
 
 .navigation__item__title {
-  font-size: em(16px);
+  font-size: em(14px);
+  font-weight: 700;
   text-transform: uppercase;
   padding: 0 em(50px);
   color: inherit;
   text-decoration: none;
   position: relative;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.1em;
   svg {
     display: none;
   }
@@ -265,23 +290,23 @@
 
 .navigation__item__list {
   width: 100%;
-  margin-top: em(10px);
+  margin-top: em(20px);
   li {
     a {
-      font-size: em(24px);
+      font-size: em(28px);
       text-decoration: none;
       color: inherit;
-      padding: em(15px) em(50px) em(15px) em(80px);
+      padding: em(10px) em(50px) em(10px) em(80px);
       display: block;
-      font-weight: 600;
+      font-weight: 700;
       transform: none;
       transition: transform 0.3s $easeOutQuart, color 0.3s;
       line-height: 1.3;
       position: relative;
       svg {
         display: inline-block;
-        width: em(16px);
-        height: em(16px);
+        width: em(20px);
+        height: em(20px);
         fill: currentColor;
         margin-right: em(10px);
         position: absolute;
@@ -294,9 +319,12 @@
         transform: translateX(em(10px));
       }
       @media screen and (max-width: $large_breakpoint) {
+        font-size: em(23px);
         padding: em(15px) em(20px) em(15px) em(50px);
         svg {
           left: em(20px);
+          width: em(16px);
+          height: em(16px);
         }
       }
     }

private/scss/modules/plugins/_timetable.scss

@@ -15,15 +15,20 @@ $timetable_count: 15;
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
-  width: 34%;
-  left: 33%;
+  width: 30%;
+  left: 35%;
   z-index: 560;
+  transition: top 0.5s $easeOutQuad, transform 0.5s $easeOutQuad;
   @media screen and (max-width: $medium_breakpoint) {
-    top: em(80px);
+    top: em(50px);
     width: 300%;
     left: 50%;
     max-width: 40vh;
-    transform: translateX(-50%);
+    transform: translateX(-50%) translateY(14%);
+    #timetable[data-active="0"] & {
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
   }
 }