Fix hero click landing on wrong design: add pointer-events:none to inactive hero slides so only the visible slide is clickable (was always navigating to the 6th/last stacked slide)

8f57319d65a9f2eef6228ee61fd680f4888e0ff8 · 2026-06-12 11:39:21 -0700 · Steve Abrams

Files touched

M public/css/site.css

Diff

commit 8f57319d65a9f2eef6228ee61fd680f4888e0ff8
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri Jun 12 11:39:21 2026 -0700

    Fix hero click landing on wrong design: add pointer-events:none to inactive hero slides so only the visible slide is clickable (was always navigating to the 6th/last stacked slide)
---
 public/css/site.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/css/site.css b/public/css/site.css
index 4b0352c..7bd4026 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -222,9 +222,14 @@ main { padding-top: 81px; } /* matches .site-header actual height (44px brand +
   position: absolute; inset: 0;
   background: no-repeat center / cover;
   opacity: 0;
+  /* Stacked slides crossfade via opacity. Without this, every slide stays
+     click-receptive and the topmost (last in DOM = the 6th design) captures
+     ALL clicks regardless of which is visible — so the hero click never landed
+     on the displayed design. Only the visible (.active) slide is clickable. */
+  pointer-events: none;
   transition: opacity 1.2s ease;
 }
-.hero-slide.active { opacity: 1; }
+.hero-slide.active { opacity: 1; pointer-events: auto; }
 /* Slides are click-through links to their design's PDP */
 .hero-slide { cursor: pointer; }
 .hero-slide:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

← 66f6a71 colorways: add POST /api/design/:id/recolor-preview — live c · back to Wallco Ai · marketplace/db: never pass undefined password to pg (fixes S 37d9df9 →