World Hikes (Step Pagination)

Features

• Five named world regions on a dashed connector — hollow upcoming, ring-pulsing current and checkmark-filled completed states
• Discrete region advance: four solid segments land one after another on a 90ms stagger
• Micro-labels under every node name the region and use readable emphasis ink for the current selection
• Hike cards headed by unobstructed, route-specific photographs from official authorities and Wikimedia Commons, with a token-drawn loading/CDN-failure fallback
• Each location links to an official or authoritative trail source, carries a decorative country flag, and keeps a 24px minimum target height
• Three concise, plain-language trail notes replace synthetic day, plan and internal route-log copy
• Progress labels and rails are color-coded by state (success / warning / information); exactly one hike is in progress
• State-aware 5px trail bars use semantic success for completed hikes and warning for the active hike; the bottom bar separates locale-formatted high point/distance stats from a theme-aware difficulty badge
• Stable pin toggle: a real <button> with aria-pressed, a fixed Tabler pin icon and no blinking transition
• Streaming field-log skeleton loading state that preserves every loaded line box, so the stepper and footer never jump
• Keyboard navigation with arrow keys plus Home/End, focus rings relayed from the hidden radios, aria-current on the active region, and a polite status region
• Responsive layout that stacks to a single column and tightens the region captions on mobile

Accessibility

Region semantics

aria-current="step" on the active region label; each hidden radio carries "Region N, <name>"

Keyboard nav

ArrowLeft/ArrowRight step by one, Home/End jump to the first/last region

Toggle semantics

Pin is a real <button type="button"> with aria-pressed and a label that flips between Pin/Unpin

Focus indicators

:focus-visible outlines in --ring (--primary-ink), relayed onto the visible node from the hidden radios

Reduced motion

prefers-reduced-motion: reduce snaps the cascade, the segment stagger, the pulse and the skeleton stream

Live regions

aria-live="polite" on the hike grid plus a visually hidden role="status" announcing "Region N of 5, <name>"

Decorative graphics

The map art and every generated icon carry aria-hidden="true" focusable="false"; the journal tail is aria-hidden since it is ambience beside labelled data

Viewport

100dvh for mobile-safe viewport height, color-scheme: dark on body.dark

Customise it with AI

Open World Hikes (Step Pagination) in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the pagination is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.