diff --git a/index.html b/index.html
index 6b3c0fe..9c48687 100644
--- a/index.html
+++ b/index.html
@@ -76,13 +76,6 @@
-
-
-
Premium Natural Cosmetics
-
![[fi-ne] brand logo](asset/Fine.svg)
-
- Clean. Unisex. Uncompromisingly effective.
- Made in Germany.
-
-
- finecosmetic.de
- →
+
+
Premium Natural Cosmetics
-
+
+
+
+ Clean. Unisex. Uncompromisingly effective.
+ Made in Germany.
+
+
+ finecosmetic.de
+ →
+
+
-
Premium Organic Skin Care
-
-
- From the quantum realm to your skin.
- Made in Berlin & Brandenburg with love.
-
-
- lacueor.com
- →
+
+
Premium Organic Skin Care
-
+
+
+
+ From the quantum realm to your skin.
+ Made in Berlin & Brandenburg with love.
+
+
+ lacueor.com
+ →
+
+
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 {