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

Page	Purpose	Content Focus
`/thesis`	Market Opportunity	Why now? Bioscience explosion, unprecedented data, demand leaps, entrepreneurial talent
`/strategy`	Fund Intentions	How we invest, portfolio construction, check sizes, target sectors

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

Color	Hex	Usage
Lilac	#9C85DF	Dark mode accent, hover states
Marjorelle Purple	#6643e2	Light mode accent, vibrant primary
Void	#0F0923	Deep backgrounds
Soap Purple	#CDC4ED	Bright accent in vibrant mode

Summary

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

Clearer narrative: Thesis and Strategy now tell distinct, focused stories
On-brand navigation: Header dropdown uses the Dark Matter color palette
Reusable components: ScrollIndicator and SectionTransition for consistent UI
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.