From f73b19c941e9b1a481d91c42894e46612b63e337 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@finorbrands.com>
Date: Wed, 1 Jul 2026 20:52:08 +0000
Subject: [PATCH] Show banner at full width with natural aspect ratio

- Banner is now a real <img> in a full-width grid row (grid-column: 1/-1, grid-row: 2)
  between the card header (row 1) and footer (row 3)
- Cards span all 3 rows with justify-content: space-between
- image width: 100%; height: auto; preserves natural 1584x672 aspect ratio
- pointer-events: none so clicks pass through to cards
- z-index: 0 on banner, z-index: 1 on cards
- Dropdown swaps img src directly
---
 index.html | 12 +++++++++---
 script.js  | 11 +++++++----
 style.css  | 31 ++++++++++++++++++-------------
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index ab255c8..d0f2b8c 100644
--- a/index.html
+++ b/index.html
@@ -75,7 +75,15 @@
                     experience.
                 </p>
 
-                <div class="brands-grid" role="list" id="brands-grid">
+                <div class="brands-grid" role="list">
+
+                    <!-- Full-width banner between header and footer -->
+                    <img
+                        class="brands-banner-img"
+                        id="brands-banner-img"
+                        src="asset/banner/1.png"
+                        alt="Brand banner"
+                    />
 
                     <!-- FI-NE (left half) -->
                     <a
@@ -100,7 +108,6 @@
                                 alt="[fi-ne] brand logo"
                             />
                         </div>
-                        <div class="brand-card-spacer" aria-hidden="true"></div>
                         <div class="brand-card-footer">
                             <span class="brand-card-tagline">
                                 Clean. Unisex. Uncompromisingly effective.<br />
@@ -140,7 +147,6 @@
                                 alt="LACUEOR brand logo"
                             />
                         </div>
-                        <div class="brand-card-spacer" aria-hidden="true"></div>
                         <div class="brand-card-footer">
                             <span class="brand-card-tagline">
                                 From the quantum realm to your skin.<br />
diff --git a/script.js b/script.js
index 19c55db..0bfbc76 100644
--- a/script.js
+++ b/script.js
@@ -37,12 +37,15 @@
 
   /* ── Banner image selector ──────────────────────────────── */
   var bannerPicker = document.getElementById("banner-picker");
-  var brandsGrid = document.getElementById("brands-grid");
-  if (bannerPicker && brandsGrid) {
+  var bannerImg = document.getElementById("brands-banner-img");
+  if (bannerPicker && bannerImg) {
     bannerPicker.addEventListener("change", function () {
       var val = this.value;
-      brandsGrid.style.backgroundImage =
-        "url(asset/banner/" + val + ".png)";
+      bannerImg.style.opacity = "0";
+      setTimeout(function () {
+        bannerImg.src = "asset/banner/" + val + ".png";
+        bannerImg.style.opacity = "1";
+      }, 200);
     });
   }
 })();
diff --git a/style.css b/style.css
index d149975..2b08c0d 100644
--- a/style.css
+++ b/style.css
@@ -379,14 +379,20 @@ body::before {
 .brands-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 0;
     max-width: 1200px;
     margin: 0 auto;
-    background-image: url("asset/banner/1.png");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    transition: background-image 0.4s ease;
+}
+
+/* Full-width banner spanning both columns in the middle row */
+.brands-banner-img {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    width: 100%;
+    height: auto;
+    display: block;
+    z-index: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
 }
 
 .brand-card {
@@ -394,16 +400,20 @@ body::before {
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
+    grid-row: 1 / 4;
     text-decoration: none;
     cursor: pointer;
+    z-index: 1;
 }
 
 .brand-card--fine {
+    grid-column: 1;
     border-right: 1px solid var(--border);
 }
 
 .brand-card--lacueor {
-    /* inherits background from grid */
+    grid-column: 2;
 }
 
 .brand-card-header {
@@ -420,11 +430,6 @@ body::before {
     background: var(--lacueor-dark);
 }
 
-.brand-card-spacer {
-    flex: 1;
-    min-height: 280px;
-}
-
 .brand-card-footer {
     flex-shrink: 0;
     padding: 20px 52px 40px;
@@ -439,7 +444,7 @@ body::before {
     background: var(--lacueor-dark);
 }
 
-.brand-card-image {
+.brand-card-spacer {
     display: none;
 }