Merge pull request #9 from rmfisher26/visual-styles

Visual styles

Author: rmfisher26

src/components/Header.astro

@@ -23,14 +23,10 @@ const currentPath = Astro.url.pathname;
       aria-expanded="false"
       aria-controls="main-nav"
     >
-      <svg class="icon-menu" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
-        <line x1="3" y1="6"  x2="19" y2="6"  stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        <line x1="3" y1="11" x2="19" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        <line x1="3" y1="16" x2="19" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-      </svg>
-      <svg class="icon-close" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
-        <line x1="4" y1="4"  x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        <line x1="18" y1="4" x2="4"  y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      <svg class="burger-icon" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
+        <line class="bar bar-top"    x1="3" y1="6"  x2="19" y2="6"  stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        <line class="bar bar-mid"    x1="3" y1="11" x2="19" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        <line class="bar bar-bottom" x1="3" y1="16" x2="19" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
       </svg>
     </button>
   </div>
@@ -43,17 +39,21 @@ const currentPath = Astro.url.pathname;
     top: 0;
     z-index: 200;
     background: var(--paper);
-    border-bottom: 2px solid var(--ink);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
     padding: 0 2rem;
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
     min-height: 72px;
-    transition: box-shadow 0.25s ease;
+    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
   }
 
   #site-header.scrolled {
-    box-shadow: 0 4px 24px rgba(13, 15, 20, 0.07);
+    background: rgba(255, 255, 255, 0.72);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border-bottom-color: rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
   }
 
   /* ── LOGO ── */
@@ -145,23 +145,30 @@ const currentPath = Astro.url.pathname;
     width: 40px;
     height: 40px;
     background: none;
-    border: 1.5px solid var(--border);
+    border: none;
     border-radius: 4px;
     cursor: pointer;
     color: var(--ink);
-    transition: border-color 0.2s, background 0.2s;
+    transition: background 0.2s;
     flex-shrink: 0;
   }
 
   .menu-toggle:hover {
-    border-color: var(--ink);
     background: rgba(13, 15, 20, 0.04);
   }
 
-  .icon-close { display: none; }
+  /* ── BURGER ANIMATION ── */
+  .bar {
+    transform-box: fill-box;       /* rotate around each line's own center */
+    transform-origin: center;
+    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                opacity   0.2s ease;
+  }
 
-  .menu-toggle[aria-expanded="true"] .icon-menu  { display: none; }
-  .menu-toggle[aria-expanded="true"] .icon-close { display: block; }
+  /* Closed → open: bars converge at center then rotate into X */
+  .menu-toggle[aria-expanded="true"] .bar-top    { transform: translateY(5px)  rotate(45deg); }
+  .menu-toggle[aria-expanded="true"] .bar-mid    { opacity: 0; transform: scaleX(0.2); }
+  .menu-toggle[aria-expanded="true"] .bar-bottom { transform: translateY(-5px) rotate(-45deg); }
 
   /* ── MOBILE ── */
   @media (max-width: 680px) {
@@ -174,38 +181,57 @@ const currentPath = Astro.url.pathname;
     nav {
       display: none;
       position: absolute;
-      top: calc(100% + 2px); /* sits just below the border */
+      top: 100%;
       left: 0;
       right: 0;
       flex-direction: column;
       gap: 0;
-      background: var(--paper);
-      border-bottom: 2px solid var(--ink);
-      box-shadow: 0 8px 24px rgba(13, 15, 20, 0.08);
+      background: #0a2d54;
+      border-bottom: none;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     }
 
     nav.open {
       display: flex;
-      animation: slideDown 0.2s ease both;
+      animation: menuSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
     }
 
-    @keyframes slideDown {
-      from { opacity: 0; transform: translateY(-8px); }
+    @keyframes menuSlide {
+      from { opacity: 0; transform: translateY(-6px); }
       to   { opacity: 1; transform: translateY(0); }
     }
 
     nav a {
       padding: 1rem 1.5rem;
-      border-top: 1px solid var(--border);
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
       font-size: 0.95rem;
       letter-spacing: 0.06em;
+      color: rgba(255, 255, 255, 0.85);
+      opacity: 0;
+      transform: translateX(-8px);
+      transition: background 0.2s, color 0.2s;
+    }
+
+    nav.open a {
+      animation: itemSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    }
+
+    nav.open a:nth-child(1) { animation-delay: 0.06s; }
+    nav.open a:nth-child(2) { animation-delay: 0.12s; }
+    nav.open a:nth-child(3) { animation-delay: 0.18s; }
+
+    @keyframes itemSlide {
+      from { opacity: 0; transform: translateX(-8px); }
+      to   { opacity: 1; transform: translateX(0); }
     }
 
     nav a::after { display: none; }
 
+    nav a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
+
     nav a.active {
       color: var(--accent);
-      background: rgba(0, 200, 150, 0.05);
+      background: rgba(255, 255, 255, 0.06);
     }
 
     .tag-badge  { display: none; }

src/styles/global.css

@@ -2,7 +2,7 @@
   --ink: #0d0f14;
   --paper: #ffffff;
   --accent: #469d9b;
-  --accent2: #114c8b;
+  --accent2: #0a2d54;
   --muted: #8a8070;
   --card: #ffffff;
   --border: #d8d0c0;