3.2 KiB
WanderQ spacing and framed-layout refinement
Date: 2026-08-22
Surface: homepage, Guizhou Experiences archive, representative cave-experience detail
Goal: remove oversized pauses between sections and replace rigid rectangular frames with a softer, more premium editorial card system.
1. Homepage story rhythm — improved
The experience section no longer begins after an extra 104px margin. Its internal top and bottom spacing was reduced from 88/118px to 72/82px at the desktop reference width. The story, local-team, and final inquiry sections were also tightened while retaining enough space to distinguish the five main story beats.
2. Homepage frames and calls to action — improved
The three experience choices now use 24px clipping, restrained depth, and a lighter hover lift. Outline and primary actions use a pill silhouette, softer border, and subtle depth so they no longer read as plain rectangular form controls.
3. Guizhou Experiences archive — improved
The three entry cards and all category cards now form independent surfaces instead of a rigid tile wall. Section padding was reduced by roughly 25–35%, while 18–24px radii, controlled shadows, and larger inter-card gaps establish hierarchy without making the site playful or overly rounded.
4. Experience detail framing — improved
The activity levels, safety gates, route options, image panel, and decision boundary now use separated cards and calmer corners. Large vertical paddings in the detail flow were reduced from 135–150px to 96–110px on desktop.
5. Responsive health — healthy
Homepage, Guizhou Experiences, and the representative detail page were checked at 390px mobile width and 1512px desktop width. No broken images or horizontal overflow were found. Mobile cards retain the softer frame system with reduced 15–18px radii and tighter 50–66px section spacing.
Accessibility evidence and limits
- Existing focus-visible outlines remain intact after the radius and shadow changes.
- The updated button shapes retain at least a 46px mobile target height.
- Responsive DOM checks found no hidden horizontal content at the tested widths.
- Screenshot checks cannot establish complete assistive-technology behavior or full WCAG compliance.