# Stylesheet
.lush {
background-color: #ffffff;
font-size: 16px;
}
.spacer {
flex-grow: 1 !important;
}
/****************
Announcement
*****************/
.lush-announcement {
display: flex;
padding: 4px 0;
background: #000000;
align-items: center;
justify-content: center;
}
.lush-announcement .snt-text-editor__container {
padding: 8px;
}
/****************
Navbar
*****************/
.lush-navbar {
position: relative;
z-index: 20;
width: 100%;
transition: all 0.3s ease 0s;
}
.lush-navbar--notop {
transition: transform 0.3s ease 0s;
transform: translate3d(0px, -100%, 0px);
}
.lush-navbar--fixed {
position: fixed !important;
top: 0;
transform: translate3d(0px, 0px, 0px);
background-color: white;
}
.lush-navbar--fixed + div {
height: 100px;
}
.lush-navbar__col {
display: flex;
align-items: center;
}
.lush-navbar__col.col-12 {
justify-content: center;
}
.lush-navbar__col.order-2 {
justify-content: center;
}
.lush-navbar__col.order-3 {
justify-content: flex-end;
}
.lush-navbar-logo {
display: flex;
align-items: center;
height: 48px;
}
.lush-navbar__title {
font-size: 2rem;
font-weight: 600;
color: rgb(0, 0, 0);
margin: 0 18px 0 0;
}
.lush-dialog__container {
background-color: white;
padding: 12px;
}
.lush-navbar-dialog__title {
display: flex;
gap: 8px;
}
.lush-hero {
position: relative;
}
.lush-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.lush-cover .snt-image,.lush-cover .snt-image__container {
height: 100%;
}
.lush-hero__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1rem;
}
.lush-hero__category {
display: flex;
align-items: center;
margin: 0 auto;
max-width: 72.75rem;
overflow: scroll hidden;
scroll-snap-type: x;
padding: 1rem 0px;
-webkit-mask-image: linear-gradient( 90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
}
.lush-hero-category-label {
color: rgb(0, 0, 0);
display: block;
font-size: 0.875rem;
line-height: 1.71429;
letter-spacing: 1px;
background-color: rgb(255, 255, 255);
padding: 0.5rem 1.25rem;
border-radius: 1.4375rem;
border: 1px solid rgb(203, 203, 203);
white-space: nowrap;
transition: border-color 0.25s ease 0s;
cursor: pointer;
}
.lush-hero-category-label:not(:last-child) {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.lush-hero__text {
display: flex;
font-size: 7px;
/* line-height: 7px; */
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 4rem 0px;
max-width: 72.75rem;
/* height: 60vh; */
}
.lust-icon__no-image .v-icon {
font-size: 72px;
margin: 3rem auto;
width: 100%;
}
.lush-products__text {
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding: 12px;
height: 100%;
}
.lush-products_col {
background-color: black;
}
.lush-products__container {
padding: 2rem;
}
.lush-products {
height: 100%;
width: 100%;
overflow: auto;
}
/****************
Navbar Logo
*****************/
/****************
Navbar Link
*****************/
.lush-navbar-link {
justify-content: space-between;
align-items: center;
}
.lush-search--full {
width: 100%;
}
.lush-search__dialog {
align-self: start;
margin: 43px 0 0 0;
width: 100%;
}
.lush-search__icon {
cursor: pointer;
}
.lush-search__input .v-text-field--filled > .v-input__control > .v-input__slot {
background: transparent !important;
}
.lush-search__input .v-input input,
.lush-search__input .v-icon {
color: #2f2f2f;
}
.lush-search--full .lush-search__input .v-input input,
.lush-search--full .lush-search__input .v-icon {
font-size: 16px;
}
.lush-search__input--large .v-input input {
font-size: 64px !important;
max-height: 64px !important;
}
.lush-navbar-category {
display: flex;
align-items: center;
padding-top: 24px;
}
.lush-navbar-category__title {
color: #2f2f2f;
white-space: nowrap;
margin-right: 14px;
}
.lush-navbar-category__items {
display: flex;
align-items: center;
overflow: auto hidden;
padding: 1rem 0px;
}
/****************
Navbar User
*****************/
.lush-navbar-user {
align-items: center;
gap: 12px;
}
/****************
Navbar Login
*****************/
.lush-navbar-login {
position: relative;
cursor: pointer;
}
.lush-navbar-login__dialog {
max-height: 100% !important;
margin-left: auto;
margin-right: 0;
border-left: 1px solid #ddd;
}
.lush-navbar-login__content {
background-color: white;
height: 100vh;
}
.lush-navbar-login__close {
cursor: pointer;
}
.lush-navbar-login__title {
color: #2f2f2f;
font-size: 34px;
font-weight: 500;
}
.lush-navbar-login__menu {
position: absolute;
border: 1px solid #ddd;
border-radius: 4px;
right: 12px;
background: white;
padding: 14px;
z-index: 10;
min-width: 200px;
}
.lush-navbar-login__name {
font-size: 1.25rem;
color: #2f2f2f;
font-weight: 400;
}
.lush-navbar-login__divider {
border-bottom: 1px solid #ddd;
margin: 8px 0;
}
/****************
Pop Cart
*****************/
.lush-navbar-cart {
position: relative;
cursor: pointer;
}
.lush-navbar-cart__count {
position: absolute;
height: 25px;
width: 25px;
background: var(--v-primary-base);
border-radius: 50%;
top: -9px;
right: -9px;
color: #ffffff;
display: flex;
align-items: center;
font-size: 12px;
justify-content: center;
}
.lush-navbar-cart-dialog {
width: 375px;
max-height: 100% !important;
margin-left: auto;
margin-right: 0;
}
.lush-navbar-cart__title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 12px;
font-size: 1.5rem;
font-weight: 500;
color: #2f2f2f;
}
.lush-navbar-cart__close {
cursor: pointer;
}
.lush-navbar-cart__content {
background-color: white;
height: 100vh;
}
.lush-navbar-cart.snt-cart {
display: flex;
flex-direction: column;
height: calc(100% - 84px);
min-height: calc(100% - 84px);
padding: 0;
}
.lush-navbar-cart__container {
flex: 1 1 0%;
overflow-y: auto;
}
.lush-navbar-cart-item {
display: flex;
position: relative;
padding: 8px 16px;
}
.lush-navbar-cart-remove__button {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
margin: auto 0;
background-color: white;
}
.lush-navbar-cart-item__content {
display: flex;
flex-direction: column;
padding: 8px 12px;
width: 100%;
justify-content: space-between;
}
.lush-navbar-cart-item__title {
display: flex;
font-weight: 400;
justify-content: space-between;
}
.lush-navbar-cart-item__discount {
color: #c1c1c1;
}
.lush-navbar-cart-item__options {
position: relative;
display: flex;
justify-content: flex-end;
}
.lush-navbar-cart__subtitle-2 {
display: flex;
font-weight: 400;
justify-content: space-between;
margin: 0px 16px;
}
.lush-cart-action__submit {
min-height: 58px;
}
.lush-navbar-cart__actions {
padding: 0;
}
.lush-navbar-cart__total {
display: flex;
font-size: 1.55rem;
font-weight: 500;
justify-content: space-between;
padding: 20px 12px;
color: #2f2f2f;
}
/***************
Product Card
****************/
.lush-products__wrapper {
height: 100%;
display: grid;
gap: 1rem;
grid-template-columns: repeat(12, 240px);
margin: 0px;
padding-bottom: 2rem;
}
.lush-products-item,
.lush-products-item .snt-link,
.lush-products-item a.snt-link__link {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 0;
}
.lush-products-item__wrapper {
width: 100%;
flex-direction: column;
transition: background 0.3s ease 0s;
flex: 1 0 auto;
outline: none;
margin-bottom: 1.6875rem;
padding-top: 1rem;
margin-bottom: 1.25rem;
padding-top: 1.4rem;
display: flex;
}
.lush-products-item__wrapper--dark {
background-color: rgb(244, 242, 244);
}
.lush-products-item__wrapper:hover {
background-color: rgb(237, 235, 237);
}
.lush-products-item__content {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 0 1.5rem 3rem 1.5rem;
text-align: center;
}
.lush-products-item__image {
padding: 0 1.5rem 1.5rem 1.5rem;
}
.lush-products-item__name {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: black;
font-size: 24px;
line-height: 24px;
font-weight: 600;
margin-bottom: 8px;
}
.lush-products-item__categoryname {
color: black;
margin-bottom: 8px;
}
.lush-products-item__price {
font-size: 14px;
font-weight: 600;
color: black;
margin-bottom: 8px;
}
.lush-products-item__price--on-sale {
color: red !important;
}
.lush-products-item__action {
position: absolute;
bottom: 1px;
left: 0px;
width: 100%;
padding: 0px 1rem;
text-align: center;
}
.lush-products-item__addtocart {
transition: all 250ms ease 0s;
cursor: pointer;
padding: 0px 1rem;
background-color: rgb(255, 255, 255) !important;
border-radius: 3.125rem;
border: 1px solid rgb(234, 234, 234);
color: rgb(0, 0, 0) !important;
z-index: 1;
}
.lush-products-item__addtocart.theme--light.v-btn.v-btn--disabled.v-btn--has-bg {
background-color: #dcdcdc !important;
}
/**************
All Products
***************/
.lush-container {
max-width: 1920px;
padding-left: 0.75rem;
padding-right: 0.75rem;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.lush-all-products {
font-size: 10px;
}
.lush-all-products-categories {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.lush-all-products-filters__wrapper {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.lush-all-products-orderby {
max-width: 160px;
}
.lush-all-products-orderby .v-select,
.lush-all-products-orderby fieldset,
.lush-all-products-orderby .v-select__selection {
border: 0 !important;
border-radius: 0 !important;
color: #000;
}
.lush-all-products-filters {
display: flex;
align-items: center;
justify-content: center;
background: #eaeaea;
color: #000;
height: 40px;
width: 92px;
cursor: pointer;
font-size: 1rem;
}
.lush-all-products-filters-dialog {
width: 375px;
max-height: 100% !important;
margin-left: auto;
margin-right: 0;
}
.lush-all-products-filters__content {
background-color: white;
height: 100vh;
}
.lush-all-products-filters__title {
display: flex;
font-size: 1.5rem;
justify-content: space-between;
color: #000;
padding: 48px 58px 18px;
}
.lush-all-products-filters__close {
cursor: pointer;
}
.lush-all-products-filters__container {
padding: 18px 58px 48px;
flex: 1 1 0%;
overflow-y: auto;
height: calc(100% - 155px);
min-height: calc(100% - 155px);
}
.lush-all-products-filters-title {
color: #000;
margin-bottom: 14px;
}
.lush-all-products-filters-type {
margin-bottom: 14px;
}
.lush-all-products-filters-item {
display: flex;
position: relative;
padding: 6px 0;
color: #000;
cursor: pointer;
}
.lush-all-products-filters-item .v-icon {
color: #cbcbcb;
}
.lush-all-products-filters__actions {
border-top: 1px solid #cbcbcb;
}
.ush-all-products-filters__clear.snt-button {
color: #000;
}
.lush-all-products__title {
font-size: 6.875em;
font-weight: 800;
color: #000;
line-height: 6rem;
margin-bottom: 36px;
}
.lush-all-products__cols {
padding: 24px;
}
.lush-all-products__content {
padding: 7.75rem 0;
}
.lush-all-products__pagination {
width: 100%;
margin: 60px 0;
}
.lush-all-products__pagination button {
border-radius: 50%;
height: 34px;
width: 34px;
box-shadow: none;
}
.lush-all-products__not-found {
display: flex;
flex-direction: column;
height: 300px;
align-items: center;
justify-content: center;
width: 100%;
}
.lush-all-products-not-found {
margin: 12px;
}
/******************
Product Detail
*******************/
.product-detail {
padding-bottom: 0 !important;
}
.product-detail__container {
position: relative;
z-index: 10;
margin: 0px auto;
max-width: 1920px;
width: 100%;
/* top: -100px; */
}
.product-detail__detail {
width: 100%;
padding-top: 0px;
transition: all 0.2s ease 0s;
}
.product-detail__description {
min-height: auto;
padding: 2.5rem 1rem;
margin: 0px auto;
max-width: 55rem;
}
.product-detail__infomation {
width: 100%;
}
.product-detail-infomation__container {
display: flex;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
width: 100%;
-webkit-box-align: center;
align-items: center;
margin: auto;
padding: 2.5rem 1rem;
}
@media (min-width: 52.5rem) {
.product-detail__container {
display: flex;
flex-wrap: wrap;
}
.product-detail__detail {
width: 60%;
}
.product-detail__infomation {
position: sticky;
top: 0px;
/* height: calc(100vh - 40px); */
width: 40%;
}
.product-detail-infomation__container {
padding: 5rem 2.5rem;
}
.product-detail__description {
padding: 5rem 2.5rem 0;
}
}
.product-detail-infomation__cover {
overflow: hidden;
}
.product-detail-infomation__image {
width: 256px;
margin: 0px auto 1.75rem;
}
.product-detail__carousel-images {
margin-bottom: 24px;
}
.product-detail-images__thumbnails {
position: sticky;
top: 60px;
height: fit-content;
overflow: hidden;
align-self: start;
overflow-y: auto;
height: calc(100vh - 60px);
}
.product-detail-images__thumbnails .snt-image {
cursor: pointer;
}
.product-detail-hero-img {
display: grid;
grid-column: span 6 / auto;
grid-template-columns: repeat(6, 1fr);
column-gap: 10px;
}
.product-detail-hero-img__wrapper {
position: relative;
grid-column: span 6 / auto;
}
.product-detail__brand {
font-size: 1.15rem;
font-weight: 500;
margin-bottom: 4px;
}
.product-detail__name {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: black;
font-size: 24px;
line-height: 24px;
font-weight: 600;
margin-bottom: 8px;
text-align: center;
max-width: 390px;
width: 100%;
}
.product-detail__categoryname {
text-align: center;
max-width: 390px;
width: 100%;
}
.product-detail__short {
font-size: 1.1rem;
margin-bottom: 4px;
line-height: 20px;
text-align: center;
max-width: 390px;
width: 100%;
}
.product-detail__discount {
font-size: .9rem;
color: var(--v-secondary-lighten5);
text-decoration: line-through;
font-weight: 300;
}
.product-detail__options {
font-weight: 500;
margin-top: 18px;
margin-bottom: 8px;
opacity: 0.5;
max-width: 390px;
width: 100%;
}
.product-detail-options {
margin-bottom: 24px;
max-width: 390px;
width: 100%;
}
.product-detail-options > * {
margin-right: 12px;
margin-bottom: 8px;
}
.product-detail__actions {
display: flex;
margin: 16px 0;
max-width: 390px;
width: 100%;
}
.product-detail__addcart {
font-size: 1.1rem !important;
background-color: black !important;
color: white !important;
border-radius: 0 !important;
min-width: calc(100% - 160px) !important;
}
.product-detail-addcart__wrapper {
display: flex;
align-items: center;
font-size: 0.9rem;
}
.product-detail-addcart__icon {
margin-right: 8px;
}
.product-detail__price {
margin-left: 4px;
margin-right: 4px;
}
.product-detail__price--discount {
font-size: 1.15rem;
margin-right: 8px;
color: var(--v-error-base);
}
.product-detail-description {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 16px 0;
overflow: hidden;
}
.product-detail-description__title {
font-size: 1.15rem;
font-weight: 500;
margin-bottom: 16px;
}
.product-detail-description__content {
overflow: hidden;
}
.product-detail__recommended {
padding: 4.25rem 0 12rem;
}
.product-detail-recommended__title {
color: #000;
font-size: 1.5rem;
font-weight: 500;
}
.product-item-subitems {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 8px 0;
justify-content: center;
}
.product-item-subitems__item {
color: #6C6C6C;
padding: 0 12px;
border: 1px solid #eaeaea;
border-radius: 12px;
font-size: 0.875rem;
}
/** CHECKOUT **/
.checkout__wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.checkout-form {
width: 100%;
padding: 2rem 1rem;
background-color: rgb(244, 242, 244);
}
.checkout-summary {
width: 100%;
padding: 2rem 1rem;
background-color: #ffffff;
}
@media (min-width: 60rem) {
.checkout-form {
width: 56%;
}
.checkout-summary {
width: 44%;
}
}
@media screen and (min-width: 45rem) {
.checkout__wrapper {
flex-direction: row;
}
.checkout-form {
width: 50%;
padding: 7.25rem 0px;
}
.checkout-summary {
width: 50%;
padding: 5.25rem 0px 7.25rem;
}
}
.checkout-form__wrapper {
max-width: calc(392px + 2rem);
width: 100%;
margin: 0px auto;
padding: 0px 1rem;
}
.checkout-form__title {
display: block;
padding: 0px 0px 1rem;
margin: 0px;
text-align: left;
text-decoration: none;
text-indent: 0px;
text-shadow: none;
text-transform: none;
font-size: 1.5rem;
line-height: 1.417;
font-weight: 700;
letter-spacing: 0.6px;
opacity: 1;
font-family: hn-display, HelveticaNeue, Helvetica, helvetica, sans-serif;
color: rgb(0, 0, 0);
width: 100%;
}
.checkout-form__title--disabled {
padding: 1rem 0px !important;
opacity: 0.5 !important;
}
.checkout-summary-address {
background-color: transparent !important;
}
.checkout-summary-shipping {
background-color: transparent !important;
}
.checkout-summary-promo-codes {
background-color: transparent !important;
margin: 0 -12px;
}
.checkout-summary-payment-methods {
background-color: transparent !important;
}
.checkout-summary__wrapper {
position: sticky;
top: 0px;
padding: 2rem 1rem;
margin: auto;
max-width: calc(392px + 2rem);
width: 100%;
}
.checkout-purchase-cart {
padding: 8px 0 16px;
}
.checkout-purchase-cart-item {
position: relative;
display: flex;
padding: 16px;
align-items: center;
background-color: rgb(244, 242, 244);
}
.checkout-purchase-cart-item__content {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.checkout-purchase-cart-title {
padding: 12px;
}
.checkout-purchase-cart-item__options {
display: flex;
align-items: flex-end;
}
.checkout-purchase-cart-item__name {
font-size: 1.15rem;
margin-bottom: 8px;
}
.checkout-purchase-cart-item__quantity {
font-size: 0.85rem;
margin-bottom: 8px;
}
.checkout-purchase-cart-item___price {
font-weight: 500;
white-space: nowrap;
}
.checkout-purchase-cart__title {
font-weight: 500;
margin-bottom: 16px;
}
.checkout-summary__title {
font-weight: 500;
font-size: 1.5rem;
color: #000;
padding-bottom: 6px;
}
.checkout-summary__row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
color: #000;
}
.checkout-summary__subtitle {
font-weight: 500;
font-size: 1.1rem;
color: #000;
}
/*********
Cart
**********/
.snt-cart {
padding-bottom: 7rem;
}
/**********
Payment
***********/
.snt-payment {
padding-bottom: 7rem;
}
/**********
Orders
***********/
.snt-orders {
padding-bottom: 7rem;
}
/****************
Order Detail
*****************/
.snt-order {
padding-bottom: 7rem;
}
/**********
Feed
***********/
.lush-feeds__container {
position: relative;
overflow: hidden;
padding: 4rem 0;
}
.lush-feeds_grid {
display: grid;
grid-template-columns: 1fr;
}
.lush-feeds__container .snt-feeds__list {
padding: 0;
}
.lush-feeds-grid_col {
z-index: 1;
}
.lush-feeds .snt-feeds__title {
text-align: center;
color: black;
font-size: 52px;
font-weight: 600;
padding: 2rem;
}
/***********
Footer
************/
.lush-footer {
background-color: black;
color: white;
}
.lush-footer-wave {
overflow: hidden;
display: flex;
flex-direction: column;
-webkit-box-pack: end;
justify-content: flex-end;
background: transparent;
position: relative;
z-index: 2;
backface-visibility: hidden;
transform: translate3d(0px, -50%, 0px);
}
.lush-footer-wave__svg {
display: block;
width: 200%;
position: relative;
height: 5rem;
will-change: transform;
}
/*************
Responsive
**************/
@media screen and (min-width: 20rem) {
.lush-container {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.lush-navbar--fixed + div {
height: 72px;
}
}
@media screen and (min-width: 25rem) {
.lush-container {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
@media screen and (min-width: 37.5rem) {
.lush-hero__text {
font-size: 12px;
/* line-height: 12px; */
}
.lush-container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media screen and (min-width: 45rem) {
.lush-all-products {
font-size: 16px;
}
.lush-container {
padding-left: 2.25rem;
padding-right: 2.25rem;
}
.lush-products_grid {
display: grid;
gap: 3.5rem;
grid-template-columns: 336px 1fr;
}
.lush-products__container {
padding: 4rem;
}
.lush-navbar__container,
.lush-dialog__container {
padding: 25px 24px;
}
.lush-search--full .lush-search__input .v-input input,
.lush-search--full .lush-search__input .v-icon {
font-size: 22.5px;
}
.lush-navbar--fixed + div {
height: 100px;
}
}
@media screen and (min-width: 52.5rem) {
.lush-container {
padding-left: 3rem;
padding-right: 3rem;
}
}
@media screen and (min-width: 60rem) {
.lush-container {
padding-left: 3rem;
padding-right: 3rem;
}
.lush-feeds__container {
position: relative;
padding: 4rem;
overflow: hidden;
}
.lush-feeds_grid {
gap: 2rem;
grid-template-columns: minmax(265px, 466px) minmax(530px, 1fr);
}
}
@media screen and (min-width: 64rem) {
.lush-hero__text {
font-size: 14px;
/* line-height: 14px; */
}
.lush-container {
padding-left: 3rem;
padding-right: 3rem;
}
.lush-search--full .lush-search__input .v-input input,
.lush-search--full .lush-search__input .v-icon {
font-size: 32px;
}
.lush-search__input--large .v-input input {
font-size: 92px !important;
max-height: 92px !important;
}
}
@media screen and (min-width: 80rem) {
.lush-container {
padding-left: 4.5rem;
padding-right: 4.5rem;
}
.lush-feeds_grid {
gap: 3.5rem;
}
}
@media screen and (min-width: 90rem) {
.lush-hero__text {
font-size: 16px;
/* line-height: 16px; */
}
.lush-hero__content {
padding: 2rem;
}
.lush-container {
padding-left: 4.75rem;
padding-right: 4.75rem;
}
}
← Payment