From b1cce5ef5eef531781f67b771f2d694a3d7e5eca Mon Sep 17 00:00:00 2001
From: Oliver <oliver@finorbrands.com>
Date: Wed, 1 Jul 2026 20:25:15 +0000
Subject: [PATCH] Replace per-card product images with shared banner + dropdown
 selector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed individual Fine.webp / Lacuoer.jpg from brand cards
- Added shared banner image (asset/banner/1.png) spanning both cards
- Added dropdown selector (Banner 1–9) to switch the displayed image
- Made card backgrounds semi-transparent so the banner shows through
- Added hover zoom effect on the shared banner
- Preserved all brand links, overlays, and content layouts
---
 index.html |  38 +++++++++++++-------
 script.js  |  14 ++++++++
 style.css  | 103 +++++++++++++++++++++++++++++++++++++++--------------
 3 files changed, 117 insertions(+), 38 deletions(-)

diff --git a/index.html b/index.html
index b05b90c..6b3c0fe 100644
--- a/index.html
+++ b/index.html
@@ -76,7 +76,15 @@
                 </p>
 
                 <div class="brands-grid" role="list">
-                    <!-- FI-NE -->
+                    <!-- Shared banner image spanning both cards -->
+                    <img
+                        class="brands-banner-img"
+                        id="brands-banner"
+                        src="asset/banner/1.png"
+                        alt="Brand banner"
+                    />
+
+                    <!-- FI-NE (left half) -->
                     <a
                         class="brand-card brand-card--fine"
                         href="https://finecosmetic.de"
@@ -89,11 +97,6 @@
                             class="brand-card-top-accent"
                             aria-hidden="true"
                         ></div>
-                        <img
-                            class="brand-card-image"
-                            src="asset/Fine.webp"
-                            alt="[fi-ne] Deodorant Cream Vetiver Geranium product"
-                        />
                         <div
                             class="brand-card-overlay"
                             aria-hidden="true"
@@ -122,7 +125,7 @@
                         </div>
                     </a>
 
-                    <!-- LACUEOR -->
+                    <!-- LACUEOR (right half) -->
                     <a
                         class="brand-card brand-card--lacueor"
                         href="https://lacueor.com"
@@ -135,11 +138,6 @@
                             class="brand-card-top-accent"
                             aria-hidden="true"
                         ></div>
-                        <img
-                            class="brand-card-image"
-                            src="asset/Lacuoer.jpg"
-                            alt="LACUEOR Staub luxury skincare product on crystal"
-                        />
                         <div
                             class="brand-card-overlay"
                             aria-hidden="true"
@@ -169,6 +167,22 @@
                     </a>
                 </div>
 
+                <!-- Banner image selector -->
+                <div class="banner-selector">
+                    <label for="banner-picker">Banner:</label>
+                    <select id="banner-picker">
+                        <option value="1" selected>Banner 1</option>
+                        <option value="2">Banner 2</option>
+                        <option value="3">Banner 3</option>
+                        <option value="4">Banner 4</option>
+                        <option value="5">Banner 5</option>
+                        <option value="6">Banner 6</option>
+                        <option value="7">Banner 7</option>
+                        <option value="8">Banner 8</option>
+                        <option value="9">Banner 9</option>
+                    </select>
+                </div>
+
                 <p class="brands-notice">
                     Looking for consumer
                     products?&nbsp;&nbsp;&#8212;&nbsp;&nbsp; Visit&nbsp;<a
diff --git a/script.js b/script.js
index f8f8af2..7ce9c66 100644
--- a/script.js
+++ b/script.js
@@ -34,4 +34,18 @@
     },
     { passive: true }
   );
+
+  /* ── Banner image selector ──────────────────────────────── */
+  var bannerPicker = document.getElementById("banner-picker");
+  var bannerImg = document.getElementById("brands-banner");
+  if (bannerPicker && bannerImg) {
+    bannerPicker.addEventListener("change", function () {
+      var val = this.value;
+      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 f5e54e9..0254ddb 100644
--- a/style.css
+++ b/style.css
@@ -377,11 +377,30 @@ body::before {
 }
 
 .brands-grid {
+    position: relative;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0;
     max-width: 1200px;
     margin: 0 auto;
+    min-height: 560px;
+    overflow: hidden;
+}
+
+/* Shared banner image behind both brand cards */
+.brands-banner-img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    z-index: 0;
+    transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.brands-grid:hover .brands-banner-img {
+    transform: scale(1.04);
 }
 
 .brand-card {
@@ -397,36 +416,16 @@ body::before {
 }
 
 .brand-card--fine {
-    background: var(--fine-beige);
+    position: relative;
+    z-index: 1;
+    background: rgba(232, 224, 208, 0.82);
     border-right: 1px solid var(--border);
 }
 
 .brand-card--lacueor {
-    background: var(--lacueor-dark);
-}
-
-.brand-card-image {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    opacity: 0.55;
-}
-
-.brand-card--fine .brand-card-image {
-    opacity: 0.45;
-    object-position: center 30%;
-}
-
-.brand-card--lacueor .brand-card-image {
-    opacity: 0.5;
-}
-
-.brand-card:hover .brand-card-image {
-    transform: scale(1.04);
+    position: relative;
+    z-index: 1;
+    background: rgba(26, 24, 20, 0.78);
 }
 
 .brand-card-overlay {
@@ -965,6 +964,49 @@ footer {
     letter-spacing: 0.08em;
 }
 
+/* ============================================================
+   BANNER SELECTOR
+   ============================================================ */
+.banner-selector {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 20px 48px;
+    background: var(--cream);
+    border-bottom: 1px solid var(--border);
+    font-family: var(--font-sans);
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    color: var(--mid-grey);
+}
+
+.banner-selector label {
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: 0.2em;
+    color: var(--gold);
+}
+
+.banner-selector select {
+    font-family: var(--font-sans);
+    font-size: 11px;
+    letter-spacing: 0.06em;
+    padding: 8px 16px;
+    border: 1px solid var(--border);
+    background: var(--warm-white);
+    color: var(--charcoal);
+    cursor: pointer;
+    outline: none;
+    transition: border-color var(--transition);
+    min-width: 130px;
+}
+
+.banner-selector select:hover,
+.banner-selector select:focus {
+    border-color: var(--gold);
+}
+
 /* ============================================================
    RESPONSIVE
    ============================================================ */
@@ -1046,6 +1088,15 @@ footer {
         padding: 36px 28px;
     }
 
+    .brands-grid {
+        min-height: 360px;
+    }
+
+    .banner-selector {
+        padding: 16px 20px;
+        flex-wrap: wrap;
+    }
+
     .values-grid {
         grid-template-columns: 1fr;
     }