/* 24 — Home vibe cards: LIVE LAYERS + per-product hover zoom + no hover shadow (Bach 2026-10-05, Leo lock via Ludwig. Replaces the staged top-origin-only 24; filename kept for the loader.) Markup (inc/vs-home-menus.php): when a vibe folder has bg / decal / product-a / product-b, the media box is .vs-hm__card-media--layers holding with one per file that exists (missing = not emitted = no gap). Otherwise the baked renders exactly as before (fallback). Stack, bottom -> top: bg, decal, product A, product B, icon, then the CSS text overlay (patch 20/23). Untouched here: aspect-ratio 0.9/1 (patch 23) and delta-0 pane stretch (patch 22). ==== SLOT BLOCK — every coordinate lives here (Debussy SPEC 2026-10-05; retune = edit these values only) ==== All values are % of the card media box (1000x1110 canvas: x % of 1000, y % of 1110). bg + decal: full canvas (inset 0, 100% x 100%, object-fit: cover). Products: bottom-anchored (object-fit: contain; object-position: bottom center) inside their slot, zoom from transform-origin bottom center, so only the slot's top/sides grow on hover: growth up = height x (zoom - 1) -> 54% x 0.04 = 2.16% (slot top 3.6% -> 1.44%, never hits the top edge) growth side = width x (zoom - 1)/2 -> 48% x 0.02 = 0.96% (A left 3% -> 2.04%; B right edge 97% -> 97.96%) Slot bottom = 3.6% + 54% = 57.6% (y ~640). Icon 58%..~70.6% (square: 14% of W = 12.6% of H, Ludwig 8:56 PM), just above the name. Text overlay band stays from ~70% down (patches 20/23, unchanged). Chopin stand-ins are 960x1200 (2x the 480x600 slot), garment <= 86% and bottom-centred. */ .vs-hm .vs-hm__cards--overlay { /* Product A (left) */ --vs-vc-a-left: 3%; --vs-vc-a-top: 3.6%; --vs-vc-a-width: 48%; --vs-vc-a-height: 54%; /* Product B (right, painted above A; slots overlap 49%..51%) */ --vs-vc-b-left: 49%; --vs-vc-b-top: 3.6%; --vs-vc-b-width: 48%; --vs-vc-b-height: 54%; /* Product image anchor inside its slot */ --vs-vc-product-pos: 50% 100%; /* Icon (square, centred, just above the name) */ --vs-vc-icon-left: 43%; --vs-vc-icon-top: 58%; --vs-vc-icon-width: 14%; /* Decal + background (full canvas) */ --vs-vc-decal-pos: 50% 50%; --vs-vc-bg-pos: 50% 50%; /* Motion */ --vs-vc-zoom: 1.04; --vs-vc-zoom-time: 0.3s; } /* ——— Stack (Debussy 8:45 PM): bg 1, decal 2, product A 3, product B 4, scrim+text overlay 5, icon 6. The layer container makes no stacking context, so the icon can paint above the scrim while the products stay under it. The icon (59–69.4%) never overlaps the text, which sits in the bottom band. ——— */ .vs-hm .vs-hm__cards--overlay .vs-hm__card-media--layers { isolation: isolate; } .vs-hm .vs-hm__cards--overlay .vs-hm__card-media--layers > .vs-hm__layers { position: absolute; inset: 0; z-index: auto; display: block; pointer-events: none; /* only the product images take hover (below) */ } .vs-hm .vs-hm__cards--overlay .vs-hm__card-media--layers > .vs-hm__card-overlay { z-index: 5; /* scrim + text above bg, decal and products; icon (6) paints above the scrim */ } .vs-hm .vs-hm__cards--overlay .vs-hm__layer { position: absolute; display: block; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; filter: none; pointer-events: none; } /* 1 — background */ .vs-hm .vs-hm__cards--overlay .vs-hm__layer--bg { z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--vs-vc-bg-pos); } /* 2 — decal */ .vs-hm .vs-hm__cards--overlay .vs-hm__layer--decal { z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--vs-vc-decal-pos); } /* 3/4 — products: fixed slots, bottom-anchored, independent bottom-origin zoom */ .vs-hm .vs-hm__cards--overlay .vs-hm__layer--product-a, .vs-hm .vs-hm__cards--overlay .vs-hm__layer--product-b { object-fit: contain; object-position: var(--vs-vc-product-pos); transform: none; transform-origin: 50% 100%; transition: transform var(--vs-vc-zoom-time) ease; pointer-events: auto; /* hover target; still inside the card , so a click opens the lore page */ } .vs-hm .vs-hm__cards--overlay .vs-hm__layer--product-a { z-index: 3; left: var(--vs-vc-a-left); top: var(--vs-vc-a-top); width: var(--vs-vc-a-width); height: var(--vs-vc-a-height); } .vs-hm .vs-hm__cards--overlay .vs-hm__layer--product-b { z-index: 4; left: var(--vs-vc-b-left); top: var(--vs-vc-b-top); width: var(--vs-vc-b-width); height: var(--vs-vc-b-height); } /* 6 — icon, above the scrim so it stays at full strength */ .vs-hm .vs-hm__cards--overlay .vs-hm__layer--icon { z-index: 6; left: var(--vs-vc-icon-left); top: var(--vs-vc-icon-top); width: var(--vs-vc-icon-width); height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: 50% 50%; } /* ——— Hover: each product zooms on ITS OWN hover only (desk / fine pointer). ——— */ @media (hover: hover) and (pointer: fine) { .vs-hm .vs-hm__cards--overlay .vs-hm__layer--product-a:hover, .vs-hm .vs-hm__cards--overlay .vs-hm__layer--product-b:hover { transform: scale(var(--vs-vc-zoom)); } } /* Keyboard: card link focused -> both products zoom (any device). */ .vs-hm .vs-hm__cards--overlay .vs-hm__card-link:focus-visible .vs-hm__layer--product-a, .vs-hm .vs-hm__cards--overlay .vs-hm__card-link:focus-visible .vs-hm__layer--product-b, .vs-hm .vs-hm__cards--overlay > .vs-hm__card:focus-within .vs-hm__layer--product-a, .vs-hm .vs-hm__cards--overlay > .vs-hm__card:focus-within .vs-hm__layer--product-b { transform: scale(var(--vs-vc-zoom)); } /* ——— NO hover shadow (Leo lock). Neutralises patch 20's card:hover / :focus-within media rule (box-shadow 0 10px 28px + 18px purple glow, and its translateY(-2px) lift). The resting 1px purple hairline ring from patch 20 stays exactly as at rest, so the card never changes on hover. ——— */ .vs-hm .vs-hm__cards--overlay > .vs-hm__card:hover .vs-hm__card-media, .vs-hm .vs-hm__cards--overlay > .vs-hm__card:focus-within .vs-hm__card-media { transform: none; box-shadow: 0 0 0 1px rgba(155, 92, 255, 0.18); } .vs-hm .vs-hm__cards--overlay > .vs-hm__card, .vs-hm .vs-hm__cards--overlay > .vs-hm__card:hover, .vs-hm .vs-hm__cards--overlay .vs-hm__card-link, .vs-hm .vs-hm__cards--overlay .vs-hm__card-link:hover, .vs-hm .vs-hm__cards--overlay .vs-hm__card-link:focus, .vs-hm .vs-hm__cards--overlay .vs-hm__card-img, .vs-hm .vs-hm__cards--overlay > .vs-hm__card:hover .vs-hm__card-img, .vs-hm .vs-hm__cards--overlay > .vs-hm__card:hover .vs-hm__layer { box-shadow: none; filter: none; } /* ——— Fallback only: baked card.webp/jpg keeps the staged top-origin 1.04 zoom (whole card hover). ——— */ .vs-hm .vs-hm__cards--overlay .vs-hm__card-img { transform-origin: 50% 0; } @media (hover: hover) and (pointer: fine) { .vs-hm .vs-hm__cards--overlay > .vs-hm__card:hover .vs-hm__card-img, .vs-hm .vs-hm__cards--overlay > .vs-hm__card:focus-within .vs-hm__card-img { transform: scale(var(--vs-vc-zoom)); } } /* ——— Reduced motion: no zoom, no transitions. ——— */ @media (prefers-reduced-motion: reduce) { .vs-hm .vs-hm__cards--overlay .vs-hm__card-media, .vs-hm .vs-hm__cards--overlay .vs-hm__card-img, .vs-hm .vs-hm__cards--overlay .vs-hm__layer { transition: none !important; transform: none !important; } }