Fix: single banner as grid background, no duplicated images
- Banner is now a single CSS background-image on .brands-grid spanning both card columns (left half on FI-NE, right on LACUEOR) - Cards only have header (above) + spacer + footer (below) with semi-transparent solid backgrounds for readability - Dropdown changes the grid's background-image directly - Removed per-card <img> elements (was showing image twice) - Cleaned up orphaned CSS classes
This commit is contained in:
@@ -382,25 +382,11 @@ body::before {
|
||||
gap: 0;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.brand-card-image-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-image: url("asset/banner/1.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
transition: background-image 0.4s ease;
|
||||
}
|
||||
|
||||
.brand-card {
|
||||
@@ -413,21 +399,48 @@ body::before {
|
||||
}
|
||||
|
||||
.brand-card--fine {
|
||||
background: var(--fine-beige);
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.brand-card--lacueor {
|
||||
/* inherits background from grid */
|
||||
}
|
||||
|
||||
.brand-card-header {
|
||||
flex-shrink: 0;
|
||||
padding: 32px 52px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-card--fine .brand-card-header {
|
||||
background: var(--fine-beige);
|
||||
}
|
||||
|
||||
.brand-card--lacueor .brand-card-header {
|
||||
background: var(--lacueor-dark);
|
||||
}
|
||||
|
||||
.brand-card-spacer {
|
||||
flex: 1;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.brand-card-footer {
|
||||
flex-shrink: 0;
|
||||
padding: 20px 52px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-card--fine .brand-card-footer {
|
||||
background: var(--fine-beige);
|
||||
}
|
||||
|
||||
.brand-card--lacueor .brand-card-footer {
|
||||
background: var(--lacueor-dark);
|
||||
}
|
||||
|
||||
.brand-card-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
transition: opacity 0.4s ease;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.brand-card-top-accent {
|
||||
|
||||
Reference in New Issue
Block a user