Add fixed categories dock and specials-driven home carousels.
Dock links use the six API category slugs so storefront navigation stays connected to catalog filters. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
35939e6ee4
commit
6c060e222c
@@ -0,0 +1,198 @@
|
||||
.product-carousel {
|
||||
margin-top: 96px;
|
||||
}
|
||||
|
||||
.product-carousel--framed {
|
||||
margin-top: 96px;
|
||||
padding-block: 52px;
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(143, 65, 12, 0.055) 0%,
|
||||
rgba(143, 65, 12, 0.028) 48%,
|
||||
rgba(143, 65, 12, 0.055) 100%
|
||||
);
|
||||
border-top: 1px solid rgba(143, 65, 12, 0.16);
|
||||
border-bottom: 1px solid rgba(143, 65, 12, 0.16);
|
||||
}
|
||||
|
||||
/* Title (1 slot) + 4 visible product cards = 5 equal columns */
|
||||
.product-carousel__row {
|
||||
--carousel-gap: 8px;
|
||||
--carousel-slots: 5;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: var(--carousel-gap);
|
||||
}
|
||||
|
||||
.product-carousel__aside {
|
||||
flex: 0 0
|
||||
calc(
|
||||
(100% - (var(--carousel-slots) - 1) * var(--carousel-gap)) / var(--carousel-slots)
|
||||
);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-carousel__title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-carousel__aside .size-lg .header-title__placeholder {
|
||||
font-size: clamp(40px, 6.5vw, 68px);
|
||||
line-height: 0.9;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.product-carousel__aside .size-lg .header-title__primary {
|
||||
font-size: clamp(20px, 2.8vw, 32px);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.product-carousel__aside .size-lg .header-title__secondary {
|
||||
font-size: clamp(13px, 1.8vw, 17px);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.product-carousel__all {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: var(--color-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product-carousel__all::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
bottom: -2px;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
transition: width 0.25s ease;
|
||||
}
|
||||
|
||||
.product-carousel__all:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-carousel__stage {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-carousel__nav {
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(143, 65, 12, 0.18);
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
color: var(--color-primary);
|
||||
box-shadow: 0 2px 10px rgba(75, 75, 75, 0.08);
|
||||
transform: translateY(-50%);
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.product-carousel__nav:hover {
|
||||
background: #fff;
|
||||
border-color: rgba(143, 65, 12, 0.4);
|
||||
box-shadow: 0 4px 14px rgba(75, 75, 75, 0.12);
|
||||
}
|
||||
|
||||
/* Over first / last visible product cards */
|
||||
.product-carousel__nav--start {
|
||||
inset-inline-start: 10px;
|
||||
}
|
||||
|
||||
.product-carousel__nav--end {
|
||||
inset-inline-end: 10px;
|
||||
}
|
||||
|
||||
.product-carousel__track {
|
||||
display: flex;
|
||||
gap: var(--carousel-gap);
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
padding-bottom: 8px;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.product-carousel__track::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-carousel__item {
|
||||
/* 4 cards fill the remaining 4/5 of the row */
|
||||
flex: 0 0
|
||||
calc((100% - 3 * var(--carousel-gap)) / 4);
|
||||
scroll-snap-align: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-carousel__state {
|
||||
min-height: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.product-carousel__row {
|
||||
--carousel-slots: 4;
|
||||
}
|
||||
|
||||
.product-carousel__item {
|
||||
flex-basis: calc((100% - 2 * var(--carousel-gap)) / 3);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.product-carousel {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.product-carousel--framed {
|
||||
margin-top: 64px;
|
||||
padding-block: 36px;
|
||||
}
|
||||
|
||||
.product-carousel__row {
|
||||
flex-direction: column;
|
||||
--carousel-gap: 8px;
|
||||
}
|
||||
|
||||
.product-carousel__aside {
|
||||
flex-basis: auto;
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.product-carousel__item {
|
||||
flex-basis: calc((100% - var(--carousel-gap)) / 2);
|
||||
}
|
||||
|
||||
.product-carousel__nav {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user