fix: modal nav link active state

Author: svvimming

assets/scss/theme/utilities.scss

@@ -227,3 +227,25 @@ $siam: #565D50; // siam
     text-fill-color: $codGray;
   }
 }
+
+@mixin gradientTextBase {
+  background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+  text-fill-color: transparent;
+  // IE11 fix
+  @include IE10and11 {
+    background: none;
+  }
+  &::-moz-selection {
+    -webkit-text-fill-color: $codGray;
+    -moz-text-fill-color: $codGray;
+    text-fill-color: $codGray;
+  }
+  &::selection {
+    -webkit-text-fill-color: $codGray;
+    -moz-text-fill-color: $codGray;
+    text-fill-color: $codGray;
+  }
+}

components/navbar.vue

@@ -69,7 +69,13 @@ const scrollToSection = async (el) => {
     }
     .nav-link {
       @include hamburgerCTA;
+      background: linear-gradient(135deg, rgba(166,200,136,1) 0%, rgba(212,212,212,1) 33%, rgba(211,211,211,1) 66%, rgba(211,211,211,1) 100%);
+      @include gradientTextBase;
+      background-size: 300%;
+      background-position: 50% 0;
+      &:active,
       &:hover {
+        background-position: 0% 0;
         transform: none;
         &:before,
         &:after {