diff --git a/docs/superpowers/specs/2026-07-03-listing-detail-desktop-design.md b/docs/superpowers/specs/2026-07-03-listing-detail-desktop-design.md index 353b670..0407730 100644 --- a/docs/superpowers/specs/2026-07-03-listing-detail-desktop-design.md +++ b/docs/superpowers/specs/2026-07-03-listing-detail-desktop-design.md @@ -10,12 +10,6 @@ for desktop, the sidebar isn't visually a distinct card, and several shared components it depends on (`TopNav`, `ListingCard`) have the same issues since they're reused across other screens. -A prior request included a written analysis of the gap with concrete numbers -(container width, font sizes, colors). That analysis was produced without access to -the prototype's source and got several concrete details wrong (see "Corrections" -below) — the prototype HTML/CSS and the current app code are the source of truth for -this spec, not that analysis. - ## Scope Primary target: `app/src/app/listing/[id].tsx`. Because two of the fixes (navbar, @@ -35,35 +29,24 @@ layout beyond what `ListingCard` changes give them for free, `WalletConnectSheet `CheckoutSheet`, the mobile/desktop nav breakpoint (768px) itself, nav blur/translucency. -## Corrections vs. the original analysis - -Verified against `prototype/Volana.dc.html` and the actual HeroUI Native -docs/source in `.heroui-docs/` and `node_modules/heroui-native/src`: - -- **Max-width is 1320px, not 1440px.** The prototype uses `max-width:1320px` - consistently for the nav, hero, and listing-detail wrapper. -- **The app's theme colors already match the prototype.** `app/src/global.css`'s - `--background`, `--surface`, `--surface-secondary`, `--accent`, `--success`, - `--warning`, `--danger` were already copied from the prototype's own - `--c-bg`/`--c-surf`/`--c-a`/etc. CSS variables. The hex codes given in the - original analysis prompt do not match the prototype and must not be used. -- **The hero background is not teal.** The prototype layers a - `rgba(255,255,255,.08)` radial highlight (top-left) and a black-to-transparent - linear fade at the bottom over the listing's own per-product `bg` color - (`mock.ts`), not a fixed teal color. -- **Sidebar width is a fixed 340px, not 380-420px.** -- The prototype has **zero responsive/mobile CSS** — it's a desktop-only mockup - (confirmed: no `@media` queries touch layout). All mobile-specific sizing - (hero aspect ratio, typography minimums, breakpoint choice) is this spec's own - design judgment, not derived from the prototype. +The prototype (`prototype/Volana.dc.html`) is the visual source of truth; it has +**zero responsive/mobile CSS** — it's a desktop-only mockup, no `@media` queries +touch layout anywhere in it. All mobile-specific sizing in this spec (hero aspect +ratio, typography minimums, the two-column breakpoint) is therefore this spec's own +design judgment, not something derived from the prototype. ## Theme (`app/src/global.css`) -Extend the existing `@layer theme` blocks (do not replace the existing -background/surface/accent/success/warning/danger values — they're already correct): +Theme colors are sourced from the prototype's own CSS variables (`--c-bg`, +`--c-surf`, `--c-surf2`, `--c-a`, `--c-g`, `--c-y`, `--c-r`, defined in +`prototype/Volana.dc.html`'s `