AAAaaaaAAAAAAMOUR AMOUR

resources/css/main.scss

@@ -50,22 +50,101 @@ html, body {
 .dropdown {
   position: fixed;
   z-index: 2;
-  background-color: #706fff;
-  width: 100vw;
+  background: linear-gradient(to left bottom, variables.$clr_brand, #003e86);
+  width: 100%;
   height: 90vh;
-  animation: slide-in-right 550ms;
+  -webkit-animation: drawer-open 550ms;
+  animation: drawer-open 550ms;
   flex-direction: column;
   align-items: center;
 
   .dropdown-nav-item {
-    color: white;
+    display: inline-block;
+    position: relative;
+    margin-top: math.div(variables.$px_horizontalPadding, 4);
+    background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
     font: 600 28px "Montserrat", sans-serif;
     text-decoration: none;
+
+    &:first-of-type {
+      margin-top: math.div(variables.$px_horizontalPadding, 2);
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      transform: scaleX(0);
+      height: 2px;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(to left, #FFF, #AFF);
+      transform-origin: bottom right;
+      transition: transform 0.25s ease-out;
+    }
+
+    &:hover:after {
+      transform: scaleX(1);
+      transform-origin: bottom left;
+    }
   }
 }
 
 .dropdown_close_animation {
-  animation: 550ms slide-in-left;
+  -webkit-animation: drawer-close 550ms;
+  animation: drawer-close 550ms;
+}
+
+@-webkit-keyframes drawer-close {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes drawer-close {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@-webkit-keyframes drawer-open {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes drawer-open {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
 }
 
 #container {

resources/css/partials/header.scss

@@ -68,6 +68,7 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
     width: $dropdown-toggle_l_width;
     height: $dropdown-toggle_l_width;
     position: relative;
+    cursor: pointer;
 
     .bar {
       padding: 0;

resources/css/views/index.scss

@@ -152,7 +152,7 @@ $social-button_inner_margin: 10px;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  background-color: variables.$clr_brand;
+  background: linear-gradient(to left, variables.$clr_brand, #3b8fff);
   color: white;
 
   p {