Add Meshkee product catalog navigation and details
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
00126e5777
commit
34ce4f6925
+497
@@ -251,6 +251,121 @@ button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-menu {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.product-menu > a {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.product-menu__dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% - 1px);
|
||||
right: -110px;
|
||||
width: min(680px, 78vw);
|
||||
padding-top: 12px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transform: translateY(8px);
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.2s ease,
|
||||
visibility 0.2s ease;
|
||||
}
|
||||
|
||||
.product-menu__dropdown > div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
padding: 12px;
|
||||
background: #edf0f3;
|
||||
border-top: 3px solid var(--red);
|
||||
box-shadow: 0 22px 45px rgba(3, 25, 47, 0.18);
|
||||
}
|
||||
|
||||
.product-menu__dropdown a {
|
||||
min-height: 62px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 10px 14px;
|
||||
background: var(--white);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.product-menu__dropdown a::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-menu__dropdown a:hover {
|
||||
color: var(--red);
|
||||
background: #fff8f9;
|
||||
}
|
||||
|
||||
.product-menu__dropdown small,
|
||||
.mobile-product-menu small {
|
||||
color: #9299a0;
|
||||
font-family: montserrat, sans-serif;
|
||||
font-size: 7px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.35px;
|
||||
}
|
||||
|
||||
.product-menu:hover .product-menu__dropdown,
|
||||
.product-menu:focus-within .product-menu__dropdown {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.mobile-product-menu {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.mobile-product-menu summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 5px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mobile-product-menu summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-product-menu[open] summary svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.mobile-product-menu > div {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1px;
|
||||
padding: 5px 0 10px;
|
||||
background: #edf0f3;
|
||||
}
|
||||
|
||||
.mobile-product-menu > div a {
|
||||
min-height: 52px;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 8px 10px;
|
||||
background: var(--white);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -2981,11 +3096,335 @@ button {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.product-card__body h3 a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.product-list-hero {
|
||||
min-height: 345px;
|
||||
}
|
||||
|
||||
.product-listing,
|
||||
.related-products {
|
||||
padding: 105px 0;
|
||||
}
|
||||
|
||||
.product-listing__heading {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.product-listing__heading span {
|
||||
color: var(--red);
|
||||
font-family: montserrat, sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.product-listing__heading h2 {
|
||||
margin: 5px 0 0;
|
||||
color: var(--navy);
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
.product-listing__heading > p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.products-empty {
|
||||
padding: 65px 25px;
|
||||
color: var(--muted);
|
||||
background: var(--gray);
|
||||
border: 1px solid var(--line);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-detail-breadcrumb {
|
||||
padding: 16px 0;
|
||||
color: var(--muted);
|
||||
background: var(--gray);
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.product-detail-breadcrumb .container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.product-detail-breadcrumb a:hover {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.product-detail-breadcrumb i {
|
||||
color: var(--red);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.product-detail-breadcrumb strong {
|
||||
overflow: hidden;
|
||||
color: var(--navy);
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.product-detail {
|
||||
padding: 90px 0 105px;
|
||||
}
|
||||
|
||||
.product-detail__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.05fr 0.95fr;
|
||||
align-items: start;
|
||||
gap: 75px;
|
||||
}
|
||||
|
||||
.product-gallery__main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 535px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
background: #eef0f2;
|
||||
border: 1px solid var(--line);
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.product-gallery__main img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
.product-gallery__main:hover img {
|
||||
transform: scale(1.12);
|
||||
}
|
||||
|
||||
.product-gallery__main > span {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 9px 12px;
|
||||
color: var(--navy);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.product-gallery__thumbs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 9px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.product-gallery__thumbs button {
|
||||
height: 92px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: #eef0f2;
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.product-gallery__thumbs button.active {
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
.product-gallery__thumbs img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.product-lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 45px;
|
||||
background: rgba(2, 15, 29, 0.92);
|
||||
}
|
||||
|
||||
.product-lightbox > button {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--white);
|
||||
background: var(--red);
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.product-lightbox > img {
|
||||
max-width: min(1100px, 92vw);
|
||||
max-height: 86vh;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.product-detail__info {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.product-detail__category {
|
||||
display: inline-flex;
|
||||
margin-top: 18px;
|
||||
color: var(--red);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.product-detail__info h1 {
|
||||
margin: 8px 0 4px;
|
||||
color: var(--navy);
|
||||
font-size: clamp(29px, 3vw, 42px);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.product-detail__english {
|
||||
margin: 0 0 25px;
|
||||
color: #838b93;
|
||||
font-family: montserrat, sans-serif;
|
||||
font-size: 11px;
|
||||
line-height: 1.8;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.product-detail__summary {
|
||||
margin: 0;
|
||||
padding-top: 22px;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid var(--line);
|
||||
font-size: 14px;
|
||||
line-height: 2.1;
|
||||
}
|
||||
|
||||
.product-detail__features {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 25px 0 30px;
|
||||
}
|
||||
|
||||
.product-detail__features span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
color: var(--navy);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-detail__features svg {
|
||||
width: 18px;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.product-detail__actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
padding: 90px 0;
|
||||
background: var(--gray);
|
||||
}
|
||||
|
||||
.product-description__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 360px;
|
||||
gap: 55px;
|
||||
}
|
||||
|
||||
.product-description article,
|
||||
.product-description aside {
|
||||
padding: 35px;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.product-description article > span {
|
||||
color: var(--red);
|
||||
font-family: montserrat, sans-serif;
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.product-description h2 {
|
||||
margin: 7px 0 14px;
|
||||
color: var(--navy);
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.product-description p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 2.1;
|
||||
}
|
||||
|
||||
.product-description aside {
|
||||
color: var(--white);
|
||||
background: var(--navy);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.product-description aside h2,
|
||||
.product-description aside p {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.product-description aside p {
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
}
|
||||
|
||||
.product-description aside a {
|
||||
display: inline-flex;
|
||||
margin-top: 22px;
|
||||
color: #ff9dac;
|
||||
font-family: montserrat, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.inner-hero {
|
||||
min-height: 340px;
|
||||
}
|
||||
|
||||
.product-detail__grid,
|
||||
.product-description__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 45px;
|
||||
}
|
||||
|
||||
.product-gallery {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.product-description aside {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.about-intro__grid,
|
||||
.why-us__grid,
|
||||
.contact-main__grid {
|
||||
@@ -3030,6 +3469,64 @@ button {
|
||||
min-height: 310px;
|
||||
}
|
||||
|
||||
.product-listing,
|
||||
.related-products {
|
||||
padding: 75px 0;
|
||||
}
|
||||
|
||||
.product-listing__heading {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.product-listing__heading h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.product-detail {
|
||||
padding: 60px 0 75px;
|
||||
}
|
||||
|
||||
.product-gallery__main {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.product-gallery__thumbs {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.product-gallery__thumbs button {
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.product-detail__info {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.product-detail__info h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.product-detail__actions {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
padding: 65px 0;
|
||||
}
|
||||
|
||||
.product-description article,
|
||||
.product-description aside {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.product-lightbox {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.inner-hero__content {
|
||||
padding-block: 55px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user