Remove overlays, put text above/below banner image

- Removed gradient overlays from brand cards
- Removed shared background banner approach
- Each card now has its own banner <img> showing the relevant half
  (object-position: left for FI-NE, right for LACUEOR)
- Logo + eyebrow sit above the image, tagline + CTA below
- Dropdown now updates both card images simultaneously
- Cleaned up orphaned CSS (.brand-card-overlay, .brand-card-name, .brands-banner-img)
- Responsive padding for header/footer sections

index.html

@@ -76,13 +76,6 @@
                 </p>
 
                 <div class="brands-grid" role="list">
-                    <!-- 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
@@ -97,11 +90,8 @@
                             class="brand-card-top-accent"
                             aria-hidden="true"
                         ></div>
-                        <div
+                        <div class="brand-card-image-wrap">
-                            class="brand-card-overlay"
+                            <div class="brand-card-header">
-                            aria-hidden="true"
-                        ></div>
-                        <div class="brand-card-content">
                                 <span class="brand-card-eyebrow"
                                     >Premium Natural Cosmetics</span
                                 >
@@ -110,6 +100,14 @@
                                     src="asset/Fine.svg"
                                     alt="[fi-ne] brand logo"
                                 />
+                            </div>
+                            <img
+                                class="brand-card-image"
+                                src="asset/banner/1.png"
+                                alt="Brand banner"
+                                style="object-position: left;"
+                            />
+                            <div class="brand-card-footer">
                                 <span class="brand-card-tagline">
                                     Clean. Unisex. Uncompromisingly effective.<br />
                                     Made in Germany.
@@ -123,6 +121,7 @@
                                     >
                                 </span>
                             </div>
+                        </div>
                     </a>
 
                     <!-- LACUEOR (right half) -->
@@ -138,11 +137,8 @@
                             class="brand-card-top-accent"
                             aria-hidden="true"
                         ></div>
-                        <div
+                        <div class="brand-card-image-wrap">
-                            class="brand-card-overlay"
+                            <div class="brand-card-header">
-                            aria-hidden="true"
-                        ></div>
-                        <div class="brand-card-content">
                                 <span class="brand-card-eyebrow"
                                     >Premium Organic Skin Care</span
                                 >
@@ -151,6 +147,14 @@
                                     src="asset/Lacueor.svg"
                                     alt="LACUEOR brand logo"
                                 />
+                            </div>
+                            <img
+                                class="brand-card-image"
+                                src="asset/banner/1.png"
+                                alt="Brand banner"
+                                style="object-position: right;"
+                            />
+                            <div class="brand-card-footer">
                                 <span class="brand-card-tagline">
                                     From the quantum realm to your skin.<br />
                                     Made in Berlin &amp; Brandenburg with love.
@@ -164,9 +168,10 @@
                                     >
                                 </span>
                             </div>
-                    </a>
                         </div>
+                    </a>
 
+                </div>
                 <!-- Banner image selector -->
                 <div class="banner-selector">
                     <label for="banner-picker">Banner:</label>

script.js

@@ -37,14 +37,18 @@
 
   /* ── Banner image selector ──────────────────────────────── */
   var bannerPicker = document.getElementById("banner-picker");
-  var bannerImg = document.getElementById("brands-banner");
+  var bannerImgs = document.querySelectorAll(".brand-card-image");
-  if (bannerPicker && bannerImg) {
+  if (bannerPicker && bannerImgs.length) {
     bannerPicker.addEventListener("change", function () {
       var val = this.value;
-      bannerImg.style.opacity = "0";
+      bannerImgs.forEach(function (img) {
+        img.style.opacity = "0";
+      });
       setTimeout(function () {
-        bannerImg.src = "asset/banner/" + val + ".png";
+        bannerImgs.forEach(function (img) {
-        bannerImg.style.opacity = "1";
+          img.src = "asset/banner/" + val + ".png";
+          img.style.opacity = "1";
+        });
       }, 200);
     });
   }

style.css

@@ -377,30 +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 */
+.brand-card-image-wrap {
-.brands-banner-img {
+    display: flex;
-    position: absolute;
+    flex-direction: column;
-    inset: 0;
-    width: 100%;
     height: 100%;
-    object-fit: cover;
+    width: 100%;
-    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 {
+.brand-card-header {
-    transform: scale(1.04);
+    flex-shrink: 0;
+    padding: 32px 52px 20px;
+    text-align: center;
+}
+
+.brand-card-footer {
+    flex-shrink: 0;
+    padding: 20px 52px 40px;
+    text-align: center;
 }
 
 .brand-card {
@@ -408,48 +408,26 @@ body::before {
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    min-height: 560px;
     text-decoration: none;
     cursor: pointer;
 }
 
 .brand-card--fine {
-    position: relative;
+    background: var(--fine-beige);
-    z-index: 1;
-    background: rgba(232, 224, 208, 0.82);
     border-right: 1px solid var(--border);
 }
 
 .brand-card--lacueor {
-    position: relative;
+    background: var(--lacueor-dark);
-    z-index: 1;
-    background: rgba(26, 24, 20, 0.78);
 }
 
-.brand-card-overlay {
+.brand-card-image {
-    position: absolute;
+    display: block;
-    inset: 0;
+    width: 100%;
-    pointer-events: none;
+    height: auto;
-}
+    flex-shrink: 0;
-
+    object-fit: cover;
-.brand-card--fine .brand-card-overlay {
+    transition: opacity 0.4s ease;
-    background: linear-gradient(
-        to bottom,
-        rgba(232, 224, 208, 0.2) 0%,
-        rgba(232, 224, 208, 0.6) 50%,
-        rgba(232, 224, 208, 0.92) 100%
-    );
-}
-
-.brand-card--lacueor .brand-card-overlay {
-    background: linear-gradient(
-        to bottom,
-        rgba(14, 12, 10, 0.1) 0%,
-        rgba(14, 12, 10, 0.55) 50%,
-        rgba(14, 12, 10, 0.93) 100%
-    );
 }
 
 .brand-card-top-accent {
@@ -485,20 +463,12 @@ body::before {
     opacity: 1;
 }
 
-.brand-card-content {
-    position: relative;
-    z-index: 2;
-    width: 100%;
-    padding: 48px 52px;
-    text-align: center;
-}
-
 .brand-card-eyebrow {
     font-size: 8px;
     font-weight: 500;
     letter-spacing: 0.32em;
     text-transform: uppercase;
-    margin-bottom: 18px;
+    margin-bottom: 14px;
     display: block;
 }
 
@@ -517,9 +487,7 @@ body::before {
     min-width: 110px;
     height: auto;
     object-fit: contain;
-    margin: 0 auto 16px;
+    margin: 0 auto;
-    position: relative;
-    z-index: 2;
     transition: opacity var(--transition);
 }
 
@@ -536,24 +504,6 @@ body::before {
     opacity: 1;
 }
 
-.brand-card-name {
-    font-family: var(--font-serif);
-    font-size: clamp(36px, 4vw, 58px);
-    font-weight: 300;
-    letter-spacing: 0.08em;
-    line-height: 1;
-    margin-bottom: 14px;
-    display: block;
-}
-
-.brand-card--fine .brand-card-name {
-    color: var(--charcoal);
-}
-
-.brand-card--lacueor .brand-card-name {
-    color: var(--cream);
-}
-
 .brand-card-tagline {
     font-family: var(--font-serif);
     font-size: 15px;
@@ -1036,8 +986,12 @@ footer {
         border-bottom: 1px solid var(--border);
     }
 
-    .brand-card {
+    .brand-card-header {
-        min-height: 480px;
+        padding: 24px 28px 16px;
+    }
+
+    .brand-card-footer {
+        padding: 16px 28px 32px;
     }
 
     .b2b-benefits {
@@ -1084,12 +1038,12 @@ footer {
         padding: 0;
     }
 
-    .brand-card-content {
+    .brand-card-header {
-        padding: 36px 28px;
+        padding: 20px 24px 14px;
     }
 
-    .brands-grid {
+    .brand-card-footer {
-        min-height: 360px;
+        padding: 14px 24px 28px;
     }
 
     .banner-selector {