Changelog - 2025-12-25 (#7)

Site Architecture Refactor: Thesis/Strategy Separation & Navigation Overhaul

Overview

A significant refactor focused on information architecture and navigation polish. The homepage was streamlined by removing redundant content, while the Thesis and Strategy pages were properly separated to serve distinct purposes. The Header received a major overhaul with a brand-colored Explore dropdown, and several UI components were extracted for reuse.

Key insight: Thesis answers "Why now? Why this market?" while Strategy answers "How will we invest? What's our approach?" These were previously conflated, leading to confused messaging.

Key deliverables:

• Information Architecture: Clean separation of Thesis (market opportunity) from Strategy (fund intentions)

• Homepage Cleanup: Removed redundant content, tightened narrative flow

• Header Navigation: Explore dropdown with brand colors (lilac/marjorelle purple), proper dark/vibrant modes

• Reusable Components: ScrollIndicator and SectionTransition with orb

• Polish: ModeToggle sizing, Footer hover effects, dropdown arrow alignment

Information Architecture Changes

Thesis vs Strategy Separation

Before: These concepts were mixed, creating a muddled narrative that didn't clearly answer investor questions.

After: Clean separation allows each page to tell a focused story. Thesis builds conviction in the market. Strategy explains how Dark Matter captures the opportunity.

Homepage Streamlining

Removed redundant sections that duplicated content from dedicated pages:

• Consolidated hero sections

• Removed inline strategy details (now on /strategy)

• Tightened the narrative arc: Hook → Why Now/Why Us → Portfolio glimpse → CTA

Header Navigation Overhaul

Explore Dropdown

The Explore dropdown received a complete visual overhaul to match Dark Matter's brand:

Before:

• Pale, pastel backgrounds

• Teal hover colors (off-brand)

• Generic styling

After:

• Deep void gradient backgrounds (rgba(15, 9, 35) to rgba(20, 12, 45))

• Lilac (#9C85DF) and marjorelle purple (#6643e2) accents

• Mode-specific styling with glows in vibrant mode

• Brand-colored borders and hover states

/* Dark mode - deep void background */
:global([data-mode="dark"]) .explore-dropdown {
  background: linear-gradient(135deg, rgba(15, 9, 35, 0.98), rgba(20, 12, 45, 0.98));
  border-color: rgba(156, 133, 223, 0.25);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(156, 133, 223, 0.08);
}

New Navigation Item

Added "Thesis" as the first item in the Explore dropdown:

• Desktop: Full dropdown item with description

• Mobile: Nested item under Explore section

Arrow Alignment

The dropdown arrow/pointer was repositioned from left: 15% to left: 33% to align with the chevron caret in the Explore button.

ModeToggle Refinement

Reduced the ModeToggle size for better visual balance:

• Button: 40px → 32px

• Icons: 20px → 16px

• Added ml-4 margin for separation from nav items

New Components

ScrollIndicator

Extracted from WhyNowWhyUs-v4 into a reusable component:

<ScrollIndicator label="Scroll" class="absolute bottom-8 left-1/2 -translate-x-1/2" />

Features:

• Animated vertical line with pulse effect

• Configurable label text

• Uses theme accent color

Location: src/components/ui/ScrollIndicator.astro

SectionTransition__Vertical--Orb

A dramatic section divider with vertical lines and a glowing orb:

<SectionTransitionOrb orbSize="100px" height="6rem" />

Features:

• Vertical gradient lines above and below

• Animated pulsing orb (uses ImageAbstract--Orb--Half)

• Full light/dark/vibrant mode support

• Configurable orb size, color, height, rotation speed

Location: src/components/ui/SectionTransition__Vertical--Orb.astro

Usage: Added between WhyNowWhyUs-v7 and WhyNowWhyUs-v4 on the homepage.

Footer Enhancements

Animated Underline Hover Effect

Applied the same animated underline effect from the Header nav to the Footer's Explore links:

.explore-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  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);
}

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

The underline slides in from right to left on hover, matching the Header behavior.

Mobile Navigation Updates

Updated the mobile menu to include Thesis and use brand colors:

• Added Thesis as first item in mobile Explore nested links

• Changed vertical line gradient from teal to lilac

• Updated hover state to use lilac background and text color

Technical Notes

Mode-Aware Styling Pattern

All new styles follow the established pattern for mode-aware CSS:

/* Light mode */
:global([data-mode="light"]) .component { ... }

/* Dark mode */
:global([data-mode="dark"]) .component { ... }

/* Vibrant mode */
:global([data-mode="vibrant"]) .component { ... }

Brand Color Reference

Summary

This refactor improves both the information architecture and visual polish of the site:

1. Clearer narrative: Thesis and Strategy now tell distinct, focused stories

2. On-brand navigation: Header dropdown uses the Dark Matter color palette

3. Reusable components: ScrollIndicator and SectionTransition for consistent UI

4. Attention to detail: Arrow alignment, toggle sizing, hover effects

The site now has a more coherent structure and a navigation system that feels native to the Dark Matter brand.