docs: enhance navigation styles for improved usability and aesthetics

Author: nmaguiar

_sass/style.scss

@@ -60,14 +60,18 @@
     background: transparent;
     border: 0;
     border-radius: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
     label,
     label[for="nav-trigger"] {
       display: inline-flex;
       align-items: center;
       cursor: pointer;
-      padding: 0.25rem 0.5rem;
-      border: 1px solid rgba(160, 174, 192, 0.5);
-      border-radius: 6px;
+      padding: 0.35rem 0.5rem;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
       float: none;
       width: auto;
       height: auto;
@@ -83,6 +87,7 @@
       padding-top: 0;
       text-align: left;
       float: none;
+      transition: background 0.2s ease;
     }
 
     .menu-icon::before,
@@ -94,6 +99,8 @@
       height: 2px;
       background: currentColor;
       font-family: inherit;
+      transition: transform 0.2s ease, top 0.2s ease;
+      transform-origin: center;
     }
 
     #nav-trigger ~ label[for="nav-trigger"] .menu-icon::before,
@@ -112,8 +119,14 @@
     .nav-items {
       display: none;
       flex-direction: column;
+      align-items: flex-end;
       gap: 0.75rem;
-      margin-top: 0.75rem;
+      margin-top: 0.6rem;
+      padding: 0.75rem 1rem;
+      border: 1px solid rgba(160, 174, 192, 0.4);
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.96);
+      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
     }
 
     #nav-trigger:checked ~ .nav-items {