Changelog - 2025-12-12 (#2)

Hypernova Site: Partner Page + Header/UI Consistency Fixes

Overview

This session added a new Partner With Us page with tabbed LP type navigation, and fixed two UI sizing inconsistencies in the header:

• New Partner page with interactive tabs for different LP types (Corporate, Family Offices, Fund of Funds, Institutional)

• ModeToggle icons were oversized (40-48px), now properly sized at 24px

• Header logo on non-index pages was too small compared to the animated final state on the index page

Changes by Area

1. New Partner Page: /partner

Created a new page for LP partnerships with tabbed navigation supporting 5 investor types:

• Corporate Investors (with sub-types: Private Holding Companies, CVC Teams)

• Single Family Offices

• Multi Family Offices

• Fund of Funds

• Institutional Asset Managers

Features:

• Interactive tab switching with data-* attributes

• Each tab reveals unique content (sub-type cards or benefits lists)

• Uses Hypernova dark/light mode CSS variables (bg-background, text-primary, etc.)

• "Why Partner" section with 3 value prop cards

• CTA buttons linking to /contact and /howwework

<!-- src/pages/partner/index.astro -->
<section class="relative py-8 bg-card border-b border-border">
  <div class="flex flex-wrap justify-center gap-2 md:gap-4" id="partner-tabs" data-tab-switcher>
    {lpTypes.map((lp, index) => (
      <button
        class="partner-tab px-4 py-3 rounded-xl"
        data-tab={lp.id}
        data-active={index === 0 ? 'true' : 'false'}
      >
        {lp.label}
      </button>
    ))}
  </div>
</section>

2. Vibrant Version Archived

Saved the original vibrant (blue/cyan/indigo gradient) version for future "vibrant mode" implementation:

• src/layouts/sections/core-messages/PartnerWithUs--Vibrant.astro

• Uses AnimatedWaterBackground component

• Preserves the original styling for when vibrant mode is introduced

3. ModeToggle Icon Sizing Fix

The dark/light mode toggle icons in the header were oversized.

Before:

• Button: w-16 h-16 (64px) with min-w-[4rem] min-h-[4rem]

• Sun icon: w-10 h-10 (40px), CSS override to 2.5rem

• Moon icon: w-12 h-12 (48px), CSS override to 3rem

After:

• Button: p-2 (natural sizing ~40px with padding)

• Both icons: w-6 h-6 (24px), CSS 1.5rem

<!-- src/components/ui/ModeToggle.astro -->
<button class="mode-toggle p-2 rounded-lg ...">
  <svg class="sun-icon w-6 h-6" ...>
  <svg class="moon-icon w-6 h-6" ...>
</button>

4. Header Logo Sizing Consistency

The logo on non-index pages was much smaller than the animated final state on the index page.

Root cause: Non-index pages set logo.style.width = 'auto' which fell back to CSS .logo-image { height: 2rem }, while the index page animation ends at 11.7rem width.

Fix: Non-index pages now explicitly set the same size as the animated final state:

// src/components/basics/Header.astro (non-index page handler)
if (!isIndexPage || isMobileOrTablet) {
  // ...
  logo.style.width = '11.7rem'; // Match the animated final state
  logoWrapper.style.padding = '0.25rem';
  logoWrapper.style.borderRadius = '0.25rem';
}

Files Changed Summary

New

• src/pages/partner/index.astro — Partner With Us page with tabbed LP types

• src/layouts/sections/core-messages/PartnerWithUs--Vibrant.astro — Archived vibrant version for future use

Modified

• src/components/ui/ModeToggle.astro — Reduced icon sizes from 40-48px to 24px

• src/components/basics/Header.astro — Logo on non-index pages now uses 11.7rem width to match animated final state

Notes / Follow-Ups

• The Partner page content is placeholder-quality; descriptions can be expanded per LP type

• Consider adding actual contact form integration for the CTA buttons

• When "vibrant mode" is implemented, the PartnerWithUs--Vibrant.astro section can be conditionally rendered