// home-hero.jsx — Four hero variants for the full-viewport homepage. // All four share the same nav and corner-meta; they differ in composition. const { useEffect: heroUseEffect, useState: heroUseState } = React; function SiteNav({ mood: propMood = "dusk", hero = "a", onToggleTweaks }) { const [scrolled, setScrolled] = heroUseState(false); const [keypadOpen, setKeypadOpen] = heroUseState(false); const [mobileMenuOpen, setMobileMenuOpen] = heroUseState(false); // Sync state globally via useTweaks hook const [t, setTweak] = useTweaks({ mood: propMood }); const activeMood = t.mood; heroUseEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); heroUseEffect(() => { if (mobileMenuOpen) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } return () => { document.body.style.overflow = ''; }; }, [mobileMenuOpen]); heroUseEffect(() => { if (!mobileMenuOpen) return; const onKey = (e) => { if (e.key === 'Escape') setMobileMenuOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [mobileMenuOpen]); const isHome = typeof window !== 'undefined' && ( window.location.pathname.endsWith("Home.html") || window.location.pathname.endsWith("/") || window.location.pathname === "" || !window.location.pathname.includes(".") ); const getLink = (hash) => { return isHome ? hash : `Home.html${hash}`; }; const isActive = (path) => { if (typeof window === 'undefined') return false; const current = window.location.pathname.toLowerCase(); const target = path.toLowerCase(); return current.endsWith(target) || current.includes("/" + target); }; const darkNav = scrolled ? (activeMood === "night") : (isHome ? ((hero === "a" || hero === "c") && (activeMood === "dusk" || activeMood === "night")) : (activeMood === "night") ); const c = mobileMenuOpen ? "#ece4d4" : (darkNav ? "#ece4d4" : "var(--ink)"); const scenes = [ { id: "day", label: "Morning", preset: "morning" }, { id: "golden", label: "Dinner", preset: "dinner" }, { id: "dusk", label: "Evening", preset: "evening" }, { id: "night", label: "Night", preset: "night" } ]; return (
{/* Hamburger Menu Toggle Button (Visible on Mobile) */}
{/* Mobile Menu Backdrop + Panel — rendered as SIBLING of the header (not a child) so the nav's backdrop-filter doesn't trap their fixed positioning inside the nav's containing block on iOS Safari. */} {mobileMenuOpen && (
setMobileMenuOpen(false)} aria-hidden="true" /> )} {mobileMenuOpen && ( )} ); } // ── Hero A — Full-bleed dusk ────────────────────────────────────────── function FullHeroA() { return (
Interior & Light Direction · Private Residences

A home should not lose its beauty after sunset.

Hale Lumina unifies interior design and architectural lighting to compose private residences in material, shadow, warmth, and light — calm by day, alive by night.

MAUI · HAWAI‘I  ·  EST. 2019
01 / HERO — DUSK COMPOSITION
); } // ── Hero B — Editorial split ────────────────────────────────────────── function FullHeroB() { return (
01 — Atelier · Maui

Homes composed in material, shadow, and light.

An interior and lighting design collaboration for private residences. We compose the visible and invisible elements of home into one continuous atmosphere — from morning into night.

HALE LUMINA · INTERIOR & LIGHT DIRECTION VOL. 01
); } // ── Hero C — Dark monograph ─────────────────────────────────────────── function FullHeroC() { return (
The Lumina Method · Vol. I 2019 — 2026

Light, composed.

A Quiet Practice

Hale Lumina is a residential atmosphere atelier — we design the visible and invisible parts of home together.

Now Composing

Three residences along the Hāmākua coast and a kitchen retreat in Hanalei.

); } // ── Hero D — Asymmetric atelier ─────────────────────────────────────── function FullHeroD() { return (

The home, fully seen.
The home, fully felt.

Two Disciplines · One Vision

Interiors and lighting are most often decided by different people at different stages. We compose them together — material, proportion, shadow, warmth, and light — so the residence feels complete from morning through night.

EST. 2019·MAUI · HAWAI‘I·BY APPOINTMENT
); } function Hero({ variant = "a" }) { const v = (variant || "a").toLowerCase(); if (v === "b") return ; if (v === "c") return ; if (v === "d") return ; return ; } Object.assign(window, { SiteNav, Hero, FullHeroA, FullHeroB, FullHeroC, FullHeroD });