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

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

Files Changed

Modified

Documentation Added

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