astro-website/openspec/specs/nav-hover-line/spec.md

nav-hover-line Specification

Purpose

TBD - created by archiving change final-touches. Update Purpose after archive.

Requirements

Requirement: Hover line appears only on hover for primary header titles

The site MUST render a decorative animated line that appears only on hover for the primary header title links:

• SanthoshJ (center brand link)

• Videos

• Podcast

• Blog

The hover line MUST NOT cause layout shift.

Scenario: Hover line is hidden by default

• WHEN the header renders
• THEN the hover line is not visible on primary header title links until hover

Scenario: Hover line appears on hover

• WHEN a pointer user hovers a primary header title link
• THEN an animated line appears as a hover affordance for that title

Requirement: Hover line applies to section/module titles for key surfaces

The site MUST apply the same hover-line treatment to the titles for the Videos, Podcast, and Blog surfaces, but only on titles (not on card titles).

Scenario: Titles use hover line

• WHEN a pointer user hovers the Videos/Podcast/Blog surface title element
• THEN the hover line appears only for that title

Scenario: Card titles are unaffected

• WHEN a pointer user hovers a content card title
• THEN no hover line effect is applied (existing behavior remains)

Requirement: Hover line is gated by a public env flag

The hover-line effect MUST be controllable via a public environment variable PUBLIC_ENABLE_NAV_HOVER_LINE.

If PUBLIC_ENABLE_NAV_HOVER_LINE is set to the string "false", the hover-line effect MUST be disabled and the current behavior MUST continue.

Scenario: Flag disables hover line

• WHEN PUBLIC_ENABLE_NAV_HOVER_LINE is set to "false"
• THEN hovering primary header title links and surface titles does not render the hover line effect

Requirement: Reduced motion disables or substantially reduces animation

If prefers-reduced-motion: reduce is set, the hover-line animation MUST be disabled or substantially reduced.

Scenario: Reduced motion disables noticeable hover animation

• WHEN prefers-reduced-motion: reduce is set and a user hovers a nav title
• THEN the hover line does not animate noticeably