From ba2097c2d66aaf6a32b2d3ca98a1b9de8f1abdac Mon Sep 17 00:00:00 2001
From: Oliver <oliver@finorbrands.com>
Date: Wed, 1 Jul 2026 20:32:44 +0000
Subject: [PATCH] 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 | 117 ++++++++++++++++++++++++++++-------------------------
 script.js  |  14 ++++---
 style.css  | 116 ++++++++++++++++------------------------------------
 3 files changed, 105 insertions(+), 142 deletions(-)

diff --git a/index.html b/index.html
index 6b3c0fe..9c48687 100644
--- a/index.html
+++ b/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,31 +90,37 @@
                             class="brand-card-top-accent"
                             aria-hidden="true"
                         ></div>
-                        <div
-                            class="brand-card-overlay"
-                            aria-hidden="true"
-                        ></div>
-                        <div class="brand-card-content">
-                            <span class="brand-card-eyebrow"
-                                >Premium Natural Cosmetics</span
-                            >
-                            <img
-                                class="brand-card-logo"
-                                src="asset/Fine.svg"
-                                alt="[fi-ne] brand logo"
-                            />
-                            <span class="brand-card-tagline">
-                                Clean. Unisex. Uncompromisingly effective.<br />
-                                Made in Germany.
-                            </span>
-                            <span class="brand-card-cta">
-                                finecosmetic.de
-                                <span
-                                    class="brand-card-cta-arrow"
-                                    aria-hidden="true"
-                                    >&#8594;</span
+                        <div class="brand-card-image-wrap">
+                            <div class="brand-card-header">
+                                <span class="brand-card-eyebrow"
+                                    >Premium Natural Cosmetics</span
                                 >
-                            </span>
+                                <img
+                                    class="brand-card-logo"
+                                    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.
+                                </span>
+                                <span class="brand-card-cta">
+                                    finecosmetic.de
+                                    <span
+                                        class="brand-card-cta-arrow"
+                                        aria-hidden="true"
+                                        >&#8594;</span
+                                    >
+                                </span>
+                            </div>
                         </div>
                     </a>
 
@@ -138,35 +137,41 @@
                             class="brand-card-top-accent"
                             aria-hidden="true"
                         ></div>
-                        <div
-                            class="brand-card-overlay"
-                            aria-hidden="true"
-                        ></div>
-                        <div class="brand-card-content">
-                            <span class="brand-card-eyebrow"
-                                >Premium Organic Skin Care</span
-                            >
-                            <img
-                                class="brand-card-logo"
-                                src="asset/Lacueor.svg"
-                                alt="LACUEOR brand logo"
-                            />
-                            <span class="brand-card-tagline">
-                                From the quantum realm to your skin.<br />
-                                Made in Berlin &amp; Brandenburg with love.
-                            </span>
-                            <span class="brand-card-cta">
-                                lacueor.com
-                                <span
-                                    class="brand-card-cta-arrow"
-                                    aria-hidden="true"
-                                    >&#8594;</span
+                        <div class="brand-card-image-wrap">
+                            <div class="brand-card-header">
+                                <span class="brand-card-eyebrow"
+                                    >Premium Organic Skin Care</span
                                 >
-                            </span>
+                                <img
+                                    class="brand-card-logo"
+                                    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.
+                                </span>
+                                <span class="brand-card-cta">
+                                    lacueor.com
+                                    <span
+                                        class="brand-card-cta-arrow"
+                                        aria-hidden="true"
+                                        >&#8594;</span
+                                    >
+                                </span>
+                            </div>
                         </div>
                     </a>
-                </div>
 
+                </div>
                 <!-- Banner image selector -->
                 <div class="banner-selector">
                     <label for="banner-picker">Banner:</label>
diff --git a/script.js b/script.js
index 7ce9c66..1c85617 100644
--- a/script.js
+++ b/script.js
@@ -37,14 +37,18 @@
 
   /* ── Banner image selector ──────────────────────────────── */
   var bannerPicker = document.getElementById("banner-picker");
-  var bannerImg = document.getElementById("brands-banner");
-  if (bannerPicker && bannerImg) {
+  var bannerImgs = document.querySelectorAll(".brand-card-image");
+  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";
-        bannerImg.style.opacity = "1";
+        bannerImgs.forEach(function (img) {
+          img.src = "asset/banner/" + val + ".png";
+          img.style.opacity = "1";
+        });
       }, 200);
     });
   }
diff --git a/style.css b/style.css
index 0254ddb..10a7781 100644
--- a/style.css
+++ b/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 */
-.brands-banner-img {
-    position: absolute;
-    inset: 0;
-    width: 100%;
+.brand-card-image-wrap {
+    display: flex;
+    flex-direction: column;
     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);
+    width: 100%;
 }
 
-.brands-grid:hover .brands-banner-img {
-    transform: scale(1.04);
+.brand-card-header {
+    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;
-    z-index: 1;
-    background: rgba(232, 224, 208, 0.82);
+    background: var(--fine-beige);
     border-right: 1px solid var(--border);
 }
 
 .brand-card--lacueor {
-    position: relative;
-    z-index: 1;
-    background: rgba(26, 24, 20, 0.78);
+    background: var(--lacueor-dark);
 }
 
-.brand-card-overlay {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-}
-
-.brand-card--fine .brand-card-overlay {
-    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-image {
+    display: block;
+    width: 100%;
+    height: auto;
+    flex-shrink: 0;
+    object-fit: cover;
+    transition: opacity 0.4s ease;
 }
 
 .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;
-    position: relative;
-    z-index: 2;
+    margin: 0 auto;
     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 {
-        min-height: 480px;
+    .brand-card-header {
+        padding: 24px 28px 16px;
+    }
+
+    .brand-card-footer {
+        padding: 16px 28px 32px;
     }
 
     .b2b-benefits {
@@ -1084,12 +1038,12 @@ footer {
         padding: 0;
     }
 
-    .brand-card-content {
-        padding: 36px 28px;
+    .brand-card-header {
+        padding: 20px 24px 14px;
     }
 
-    .brands-grid {
-        min-height: 360px;
+    .brand-card-footer {
+        padding: 14px 24px 28px;
     }
 
     .banner-selector {