Changelog - 2025-12-25 (#4)

Dark Matter Site: Header Navigation Enhancements

Overview

Redesigned the header navigation with a jumbotron-style dropdown for "Explore", animated underlines inspired by TWF site, and improved mobile menu with visual hierarchy for nested items.

Key deliverables:

• Explore Dropdown: Replaced "About" with hover-activated dropdown containing Strategy and Slides
• Animated Nav Underlines: Gradient underlines that slide through on hover (desktop)
• Mobile Menu Hierarchy: Nested items with vertical connector line and static underlines
• Tooltip Arrow: Dropdown includes pointer/notch aligned with chevron
• Mode-Responsive Styling: All elements adapt to dark/light/vibrant themes

---

Desktop Navigation

Animated Underlines

Each nav link now features a gradient underline animation on hover:

.nav-underline {
  background: linear-gradient(90deg,
    #3b9ea0 0%,
    #69e2e3 50%,
    #3b9ea0 100%
  );
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover .nav-underline {
  transform: translateX(-100%);
}

The underline slides in from the right and exits to the left, creating a smooth "pass-through" effect.

Explore Dropdown

The dropdown features:

• Tooltip Arrow: Rotated square pseudo-element creating upward-pointing notch
• Mode-Responsive Border: Matches DealCard--Micro styling
• Hover Items: Subtle cyan highlight on item hover
• Chevron Animation: Rotates 180° when dropdown is open

┌─────────────────────────────────────────────────────────────┐
│   Explore ∨    Portfolio    Pipeline    Team    [Mode]      │
│       │                                                      │
│       ▼                                                      │
│   ┌───────────────────────────────────┐                     │
│   │ ◄── arrow aligned with chevron    │                     │
│   │                                    │                     │
│   │   Strategy                         │                     │
│   │   Our investment thesis...         │                     │
│   │                                    │                     │
│   │   Slides                           │                     │
│   │   Presentations and pitch decks    │                     │
│   │                                    │                     │
│   └───────────────────────────────────┘                     │
└─────────────────────────────────────────────────────────────┘

---

Mobile Navigation

Nested Menu Structure

Mobile menu now shows clear visual hierarchy:

                                    Explore  ────────
                                             │
                                   Strategy  │
                                             │
                                     Slides  │
                                             │
                                  Portfolio  ────────
                                   Pipeline  ────────
                                       Team  ────────

Features:

• "Explore" as parent with gradient underline
• Strategy/Slides indented with vertical connector line
• Connector line bounded within nested items (top of Strategy to bottom of Slides)
• Nested items have thinner, more subtle underlines
• All main items have consistent gradient underlines

Vertical Connector Line

The line uses a pseudo-element for precise positioning:

.mobile-nested-links::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0.5rem;
  bottom: 0.375rem;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(105, 226, 227, 0.5) 0%,
    rgba(105, 226, 227, 0.3) 100%
  );
}

---

Mode-Responsive Styling

Dropdown Border Colors

Mode	Border Color	Background
Dark	rgba(255, 255, 255, 0.1)	rgba(29, 35, 64, 0.98)
Light	rgba(0, 0, 0, 0.08)	rgba(255, 255, 255, 0.98)
Vibrant	rgba(108, 99, 255, 0.2)	Purple gradient

The tooltip arrow inherits the same border colors for seamless connection.

---

Files Changed

Modified

File	Changes
src/components/basics/Header.astro	Added Explore dropdown, animated underlines, mobile nested structure, tooltip arrow, mode styles

Documentation Added

File	Purpose
context-v/blueprints/Jumbotron-Popdown-Patterns.md	Blueprint for implementing jumbotron dropdowns

---

Design Patterns Used

TWF-Inspired Underline Animation

Adapted from twf_site/src/components/ui/InternalLinkWrapper.astro:

• Gradient underline with 3-stop color
• Slide-through animation using translateX
• Cubic-bezier easing for smooth motion

DealCard--Micro Border Pattern

Matched border styling from src/components/deals/DealCard--Micro.astro:

• Uses var(--color-border) CSS variable
• Consistent opacity values per mode
• Same border-radius (0.75rem)

---

Accessibility

• Dropdown uses role="menu" and role="menuitem"
• Keyboard navigation supported via :focus-within
• Chevron provides visual indicator of expandable content
• Mobile nested items maintain clear visual hierarchy

---

Notes / Follow-Ups

1. More Dropdown Items: Can easily add more items to Explore dropdown as sections are built
2. Keyboard Navigation: Could enhance with arrow key navigation within dropdown
3. Active State: Could highlight current page in nav when on /strategy or /slides
4. Touch Delay: Mobile dropdown hover behavior may need touch event handling for tablets