Fix header logo gradient visibility (#102)

## Summary

- Fixes the header logo gradient that wasn't visible
- Wraps the header logo `<img>` in a container div to properly display
the gradient effect
- Applies the gradient to the container using `::before` pseudo-element,
matching the floating-card implementation

## Problem

The gradient effect wasn't showing because `::before` pseudo-elements
don't work properly on `<img>` elements. The previous implementation
tried to apply the gradient directly to the image element, which doesn't
render as expected.

## Solution

This PR wraps the header logo in a `.logo-container` div and applies the
gradient effect to this container, following the same pattern used
successfully for the `.floating-card` in the hero section.

## Test Plan

1. Run the docs site locally: `cd docs && python -m http.server 8000`
2. Navigate to http://localhost:8000
3. Verify the header logo now has a subtle blue-to-mauve gradient glow
behind it
4. Confirm the gradient matches the visual style of the hero section
logo

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>

Author: jwilger

docs/assets/css/style.css

@@ -119,16 +119,13 @@ body {
     animation: float 3s ease-in-out infinite;
 }
 
-.nav-brand .logo {
+.nav-brand .logo-container {
     width: 60px;
     height: 60px;
-    border-radius: 8px;
-    padding: 4px;
-    animation: none;
     position: relative;
 }
 
-.nav-brand .logo::before {
+.nav-brand .logo-container::before {
     content: '';
     position: absolute;
     inset: var(--gradient-inset-negative);
@@ -139,6 +136,16 @@ body {
     filter: blur(var(--gradient-blur-size));
 }
 
+.nav-brand .logo {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    padding: 4px;
+    animation: none;
+    position: relative;
+    z-index: 1;
+}
+
 @keyframes float {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-5px); }

docs/index.html

@@ -14,7 +14,9 @@
         <div class="container">
             <div class="nav-content">
                 <div class="nav-brand">
-                    <img src="logo.svg" alt="Union Square Logo" class="logo">
+                    <div class="logo-container">
+                        <img src="logo.svg" alt="Union Square Logo" class="logo">
+                    </div>
                     <span class="brand-text">Union Square</span>
                 </div>
                 <div class="nav-links">