Newport — HOA & Community Portal — Référence de design web et prompt

> A SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE NEWPORT HOMEOWNERS ASSOCIATION (HOA) TEMPLATE BY LEXINGTON THEMES. ALL PAGES, SECTIONS, INTERACTIONS, AND ANIMATIONS ARE REPRODUCED AS PLAIN HTML + CSS + VANILLA JAVASCRIPT — NO BUILD STEP REQUIRED.
>
> REFERENCE: `https://lexingtonthemes.com/viewports/newport`

## SUMMARY

NEWPORT IS A PREMIUM HOMEOWNERS ASSOCIATION (HOA) / COMMUNITY WEBSITE TEMPLATE FROM LEXINGTON THEMES, BUILT WITH ASTRO + TAILWIND CSS (DEPLOYED AT NEWPORT-ASTRO.PAGES.DEV). IT SERVES A FICTIONAL "NEWPORT HOMEOWNERS ASSOCIATION" AND PRESENTS OFFICIAL COMMUNITY INFORMATION — ANNOUNCEMENTS, DOCUMENTS, BOARD MEMBERS, EVENTS, AMENITIES, AND GOVERNANCE.

THE DESIGN IS A CALM, EDITORIAL, LIGHT-MODE LAYOUT: GENEROUS WHITESPACE, A SERIF DISPLAY FACE (GAMBARINO) FOR LARGE HEADINGS PAIRED WITH A NEUTRAL SANS-SERIF (SWITZER) FOR BODY, SOFT ROUNDED CARDS ON A LIGHT NEUTRAL BACKGROUND, AND DEEP NEAR-BLACK NEUTRAL BLOCKS (ACCENT-950 / BASE-950) USED FOR HERO PANELS, THE CONTACT PANEL, AND CTA SECTIONS. COLORS ARE DRIVEN BY THREE TAILWIND OKLCH SCALES: `base` (PURE GREY), `accent` (WARM STONE NEUTRAL), AND `secondary` (COOL SLATE/BLUE).

KEY INTERACTIONS: A FUSE.JS-POWERED SITE SEARCH MODAL (OPENED FROM A HEADER SEARCH BUTTON, FILTERS A 53-ITEM INDEX IN REAL TIME), A MOBILE HAMBURGER NAV PANEL (SLIDE/FADE IN WITH OVERLAY), NATIVE `<DETAILS>`/`<SUMMARY>` FAQ ACCORDIONS, STICKY "ON THIS PAGE" SIDEBARS (FAQ & GOVERNANCE), CARD/BUTTON HOVER TRANSITIONS, AND A FIXED TOP HEADER. THE SOURCE IS LIGHT-ONLY; THIS CLONE ADDS A LIGHT + DARK THEME-TOKEN SYSTEM HONORING `PREFERS-COLOR-SCHEME` PLUS A HEADER THEME TOGGLE WITH LOCALSTORAGE PERSISTENCE.