Sunset Cottage components

The Sunset brand symbol, shared color roles, spacing, radius, type and elevation scales, and the Lucide icon family. Specimens render with the live CSS variables.

Interaction & motion. Icons show static artwork first; the animated version loads on the first hover, focus or press of their labeled control. Reduced motion keeps the static artwork.

active: stay / explore / system. The surrounding shell is the real desktop and phone layout.

Interaction & motion. The current section keeps a pale-ink fill with blue-ink text and icon; hover on another item uses the warm paper fill. Keyboard focus is one blue-ink ring drawn inside the item, the same for links and the HeroUI dialog buttons. Arrival and Help open the same focus-contained dialogs used by the guide; Escape closes and returns focus.

PageHeader: title, lead, optional badge and headingLevel. SectionHeading: title, description and optional action. Breadcrumb: parent and current.

Interaction & motion. Coordinated entrance; ordinary links keep hover, press and visible keyboard focus. Reduced motion removes the entrance.

variant: primary / secondary / outline / ghost. href produces an internal link. isDisabled prevents activation.

Interaction & motion. Hover deepens the fill and press deepens it further with a slight 98% press scale; buttons change color and never lift. Disabled buttons in every variant recede to a quiet-gray fill with stone text, no border or shadow, and no hover response. The selected example persists after motion ends.

title, optional subtitle and icon; DetailCopy supplies body, optional note and optional link.

Interaction & motion. Hover fills the whole row with a rounded warm paper fill and a blue-ink title; the row, its fill and its dividers share one width, inset 8 px from the card edge, and the dividers beside a hovered row fade. Native expanded state, turning indicator and panel reveal. Keyboard Enter or Space opens details; reduced motion preserves the expanded state.

variant: plan / side / help. title, body, optional icon and link.

Interaction & motion. Static information enters with its section. Linked actions retain focus and press feedback; no hover affordance on passive content.

WelcomePanel: stay / explore. PhotoPanel: photo, alt, optional caption and icon. GuidePhoto uses curated source dimensions.

Interaction & motion. Coordinated entrance; photos remain still. Both welcome variants below use the exact guest-page content.

One selected quick link opens its matching information panel. Close returns focus to the activating card. The native fallback is available in the final disclosure.

Interaction & motion. Desktop cards lift 1 px with the raised shadow on hover; on phones the three cards stack full width. The open card keeps a pale-ink fill and turned chevron, and the panel fades and settles in and out. Reduced motion changes the panel immediately.

CatalogSwitch keeps both room and category choices visible as text buttons. Weight and a Lucide check mark the current mode. Kitchen navigates to its real route; other spaces open in place. The final disclosure presents the no-JavaScript fallback.

Interaction & motion. Rows take a warm paper fill with ink-blue text on hover and their chevron nudges forward; they do not lift. The check fades with selection while its reserved space prevents movement. Topic groups retain focus and return behavior. Reduced motion makes the change immediate.

The same typed equipment content and shared disclosures used on the Kitchen page.

Interaction & motion. Open each equipment topic in place. Important unconfirmed instructions remain visible in the revealed content.

All places / Nature / After dark / Around town. Cards use curated destination links.

Interaction & motion. The selected filter takes the blue-ink fill with white text; hover on another filter strengthens its border. Cards are static; only their link row responds, underlining the label and nudging the external icon. Results change together and remain readable with reduced motion.

Shared fast, state and entrance durations. Replay restarts the actual page/section entrance.

Interaction & motion. Entrances only settle 6 px into place with a short stagger; they never fade, so content is readable from the first frame. State changes such as an opened panel may fade briefly. Reduced motion sets movement and stagger to zero. Content, selection and keyboard focus remain available.