update menu and latest blog post

Author: Colorfulbloom

src/stories/assets/css/card.scss

@@ -3,20 +3,26 @@
 
 .card {
   --bs-card-bg: transparent;
-  background: linear-gradient(to bottom, color.adjust($quicksilver, $lightness: -4%) 0%, $ash 40%, $frost 100%);
+  background:
+    linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.4) 55%, transparent 70%),
+    linear-gradient(340deg, #ffffff 0%, $quicksilver 35%, $ash 60%, $pewter 100%);
+  background-size: 200% 100%, 100% 100%;
+  background-position: 100% 0, 0 0;
   color: $obsidian;
-  border: none;
+  border: 1px solid rgba(142, 142, 142, 0.25);
   border-radius: 10px;
   border-bottom: 4px solid $azure-bolt;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: transform $transition-fast,
-              box-shadow $transition-fast;
+              box-shadow $transition-fast,
+              background-position 0.6s ease;
 
   &:hover {
     transform: translateY(-4px);
     box-shadow: 0 6px 20px rgba(0, 112, 189, 0.3);
+    background-position: 0% 0, 0 0;
   }
 
   // ── Image ─────────────────────────────────────
@@ -79,7 +85,7 @@
   // ── Footer ────────────────────────────────────
   &__footer {
     padding: 1rem 1.5rem;
-    border-top: 1px solid color.adjust($frost, $lightness: -10%);
+    border-top: 1px solid rgba(142, 142, 142, 0.3);
     display: flex;
     align-items: center;
     justify-content: flex-end;

src/stories/assets/css/header.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'variables' as *;
 
 .header {
@@ -7,14 +8,24 @@
   &__menu-item {
     font-family: $font-header;
     font-size: 1rem;
+    font-weight: 600;
     color: $quicksilver;
     text-decoration: none;
     padding: 0.5rem 1rem;
-    transition: color $transition-fast;
+    border-radius: 10px;
+    border-bottom: 5px solid transparent;
+    transition: color $transition-fast,
+                transform $transition-fast,
+                background $transition-fast,
+                border-bottom-color $transition-fast;
     display: block;
 
     &:hover {
-      color: $azure-bolt;
+      color: $quicksilver;
+      font-weight: 700;
+      transform: translateY(-3px);
+      background: linear-gradient(135deg, color.adjust($azure-bolt, $lightness: 5%), $azure-bolt, color.adjust($azure-bolt, $lightness: -5%));
+      border-bottom-color: $deep-azure;
     }
 
     &--active {
@@ -90,14 +101,24 @@
   &__mobile-menu-item {
     font-family: $font-header;
     font-size: 1.125rem;
+    font-weight: 600;
     color: $quicksilver;
     text-decoration: none;
     padding: 0.75rem 1rem;
-    transition: color $transition-fast;
+    border-radius: 10px;
+    border-bottom: 5px solid transparent;
+    transition: color $transition-fast,
+                transform $transition-fast,
+                background $transition-fast,
+                border-bottom-color $transition-fast;
     display: block;
 
     &:hover {
-      color: $azure-bolt;
+      color: $quicksilver;
+      font-weight: 700;
+      transform: translateY(-3px);
+      background: linear-gradient(135deg, color.adjust($azure-bolt, $lightness: 5%), $azure-bolt, color.adjust($azure-bolt, $lightness: -5%));
+      border-bottom-color: $deep-azure;
     }
 
     &--active {