# 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.

![Homepage cards after refinement](/tmp/wanqu-spacing-audit-2026-08-22/07-home-cards-after.png)

![Homepage transition and story after refinement](/tmp/wanqu-spacing-audit-2026-08-22/08-home-story-after.png)

## 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.

![Homepage experience action after refinement](/tmp/wanqu-spacing-audit-2026-08-22/17-home-button-after.png)

## 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.

![Experience categories after refinement](/tmp/wanqu-spacing-audit-2026-08-22/10-experiences-nav-after.png)

![Outdoor experience cards after refinement](/tmp/wanqu-spacing-audit-2026-08-22/11-experiences-cards-after.png)

## 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.

![Activity levels after refinement](/tmp/wanqu-spacing-audit-2026-08-22/12-detail-levels-after.png)

![Safety gates after refinement](/tmp/wanqu-spacing-audit-2026-08-22/13-detail-gates-after.png)

## 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.

![Homepage mobile after refinement](/tmp/wanqu-spacing-audit-2026-08-22/14-home-mobile-after.png)

![Guizhou Experiences mobile after refinement](/tmp/wanqu-spacing-audit-2026-08-22/15-experiences-mobile-after.png)

## 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.