/* --------------------------------------------------------------------------------------- */
/* NORMALIZE */
/* --------------------------------------------------------------------------------------- */
/*Обнуление*/
*{
padding: 0;
margin: 0;
border: 0;
}
*,*:before,*:after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
/* height: 100%; */
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-size:inherit;font-family:inherit;background-color: inherit;}
input::-ms-clear{display: none;}
input[type="search"]::-webkit-search-cancel-button {display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
address {font-style: normal;}
/*--------------------*/
/* --------------------------------------------------------------------------------------- */
/* FONTS */
/* --------------------------------------------------------------------------------------- */
/* INTER */
@font-face {
font-family: "Inter";
src: url(fonts/inter/Inter-Regular.ttf) format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Inter";
src: url(fonts/inter/Inter-Medium.ttf) format("truetype");
font-weight: 500;
}
@font-face {
font-family: "Inter";
src: url(fonts/inter/Inter-SemiBold.ttf) format("truetype");
font-weight: 600;
}
@font-face {
font-family: "Inter";
src: url(fonts/inter/Inter-Bold.ttf) format("truetype");
font-weight: 700;
}
@font-face {
font-family: "Inter";
src: url(fonts/inter/Inter-ExtraBold.ttf) format("truetype");
font-weight: 800;
}
@font-face {
font-family: "Inter";
src: url(fonts/inter/Inter-Black.ttf) format("truetype");
font-weight: 900;
}
/* --------------------------------------------------------------------------------------- */
/* GENERAL */
/* --------------------------------------------------------------------------------------- */
/* COLORS */
:root {
--white: #fff;
--black: #000;
--bg: #F2F7F8;
--teal: #1B6F7A;
--teal-dark: #0A5B66;
--pink: #E4DADF;
--maroon: #820000;
--grey: #97969E;
--grey-light: #CCD0D8;
--grey-hover: #6E7481;
--text: #3A3845;
--product-bg: #f0f4f4;
}
.none {
display: none;
}
/* * {
border: 1px solid green;
} */
/* --------------- SCROLL BAR --------------- */
/* scrollbar */
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background-color: var(--teal);
border-radius: 50px;
/* &:hover {
background-color: var(--purple-dark);
} */
}
/* Edge */
*::-webkit-scrollbar {
width: 4px;
}
*::-webkit-scrollbar-thumb {
background-color: var(--teal);
border-radius: 50px;
}
::selection {
background-color: var(--teal-dark);
color: white;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 16px;
color: var(--text);
background-color: var(--bg);
accent-color: var(--teal);
&.no-scroll {
overflow: hidden;
}
}
.container {
max-width: 1240px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.distance {
margin-top: 100px;
}
.swiper-pagination-bullet-active {
background-color: var(--teal) !important;
}
.test-content {
display: flex;
flex-direction: column;
gap: 10px;
p {
line-height: 1.5;
}
}
/* ---------------------- ADAPTIVE IMG ---------------------- */
.adaptive-img-wrapper {
position: relative;
overflow: hidden;
}
.adaptive-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
/* ---------------------- GLOBAL TITLES ---------------------- */
.title-h1,
.title-h2 {
font-size: 48px;
font-weight: 900;
text-transform: uppercase;
line-height: 1.2;
text-wrap: balance;
&.color-white {
color: var(--white);
}
&.color-black {
color: var(--text);
}
}
.underline-link {
position: relative;
&::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: var(--teal);
bottom: -5px;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
}
&:hover::after {
transform-origin: left;
transform: scaleX(1);
}
}
.global-fullsize-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
/* ---------------------- BLUR BG ---------------------- */
.blur-bg {
position: fixed;
left: 0;
width: 100%;
height: 100%;
z-index: 90;
background-color: rgba(151, 150, 158, 0.5);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
&.from-top {
top: -100%;
&.active {
top: 0;
}
}
&.from-bottom {
bottom: -100%;
&.active {
bottom: 0;
}
}
}
/* ---------------------- BREADCRUMBS ---------------------- */
.breadcrumbs {
margin-top: 30px;
& .container {
display: flex;
flex-direction: column;
gap: 20px;
overflow: hidden;
}
}
.breadcrumbs-inner {
display: flex;
flex-wrap: wrap;
gap: 20px 10px;
a, span {
font-size: 16px;
}
span {
&:first-of-type {
display: none;
}
padding-block: 10px;
}
}
.breadcrumb-link {
color: var(--text);
padding-block: 10px;
&:last-child {
color: var(--grey);
pointer-events: none;
}
&::after {
bottom: 5px;
}
}
/* ---------------------- SLIDERS ---------------------- */
.common-slider-inner {
position: relative;
}
.common-slider {
margin-top: 20px;
}
.common-slider-btn-prev,
.common-slider-btn-next {
display: grid;
place-items: center;
position: absolute;
top: calc(50% - 40px);
z-index: 10;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--pink);
color: var(--teal);
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background-color: var(--teal);
color: var(--white);
}
&.swiper-button-disabled {
background-color: var(--grey-light);
color: var(--white);
}
}
.common-slider-btn-prev {
left: 0;
translate: -50% 50%;
}
.common-slider-btn-next {
right: 0;
translate: 50% 50%;
}
/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {
.common-slider {
padding-bottom: 40px !important;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.title-h1,
.title-h2 {
font-size: 36px;
}
.distance {
margin-top: 70px;
}
/* Breadcrumbs */
.breadcrumbs-inner {
display: none;
width: 100%;
flex-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden;
&::-webkit-scrollbar {
width: 0;
height: 3px;
}
&::-webkit-scrollbar-thumb {
background-color: var(--grey-light);
border-radius: 50px;
}
}
.breadcrumb-link {
display: flex;
align-items: center;
gap: 10px;
text-wrap: nowrap;
&:nth-of-type(1) {
gap: 0;
}
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.distance {
margin-top: 60px;
}
.title-h1,
.title-h2 {
font-size: 28px;
}
.common-slider-btn-prev,
.common-slider-btn-next {
display: none;
}
}
/* --------------------------------------------------------------------------------------- */
/* HEADER */
/* --------------------------------------------------------------------------------------- */
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.header-margin {
padding-top: 134px;
}
/* HEADER-TOP */
.header-top {
display: flex;
align-items: center;
height: 67px;
background-color: var(--bg);
}
.header-top-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-top-links-wrapper {
display: flex;
align-items: center;
gap: 20px;
}
.header-top-link {
font-size: 16px;
font-weight: 500;
line-height: 1.5;
color: var(--black);
transition: all 0.3s ease;
&:hover {
color: var(--teal);
}
}
/* HEADER-CONTACTS */
.header-contacts {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.header-phone-link {
font-size: 16px;
font-weight: 500;
line-height: 1.5;
color: var(--black);
transition: all 0.3s ease;
&:hover {
color: var(--teal);
}
}
.header-tg-link {
color: var(--teal);
}
/* HEADER-MAIN */
.header-main {
display: flex;
align-items: center;
height: 67px;
background-color: var(--text);
}
.header-main-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-nav {
display: flex;
align-items: center;
gap: 30px;
}
.header-main-links-wrapper {
display: flex;
align-items: center;
gap: 30px;
}
.header-main-link {
font-size: 16px;
font-weight: 500;
line-height: 1.5;
color: var(--white);
&.underline-link::after {
background-color: var(--white);
}
}
/* Catalog btn */
.header-catalog-btn {
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
padding: 7px 8px;
background-color: #E4DADF;
border-radius: 4px;
cursor: pointer;
}
.burger {
display: flex;
flex-direction: column;
gap: 5px;
}
.burger-line {
width: 30px;
border: 2px solid var(--text);
border-radius: 2px;
transition: all 0.3s ease;
}
.burger.active .burger-line:nth-child(1) {
translate: -1px 9px;
rotate: 45deg;
}
.burger.active .burger-line:nth-child(2) {
opacity: 0;
}
.burger.active .burger-line:nth-child(3) {
translate: -1px -7px;
rotate: -45deg;
}
/* Search Input */
.header-tools {
display: flex;
align-items: center;
/* gap: 20px; */
}
.search-input-wrapper {
display: flex;
align-items: center;
position: relative;
}
.search-input {
width: 100%;
max-width: 260px;
padding-bottom: 5px;
border-bottom: 1px solid var(--white);
color: var(--white);
line-height: 1.5;
transition: all 0.5s ease;
}
.search-input-wrapper.no-search .search-input {
max-width: 0;
opacity: 0;
}
.search-input-btn {
position: absolute;
top: 0;
right: 0;
padding: 8px 10px;
z-index: 10;
border-radius: 50%;
opacity: 1;
pointer-events: all;
}
.search-input-wrapper.no-search .search-input-btn {
top: -100%;
opacity: 0;
pointer-events: none;
}
.show-search-field-btn {
padding: 8.8px 10px;
position: relative;
z-index: 5;
border-radius: 50%;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
background-color: var(--grey);
}
}
.search-popup {
display: none;
flex-direction: column;
gap: 20px;
width: fit-content;
position: absolute;
top: 100%;
left: 0;
padding: 20px;
background-color: var(--white);
border: 2px solid var(--teal);
border-radius: 10px;
&.active {
display: flex;
}
}
.search-tips {
display: flex;
flex-direction: column;
gap: 10px;
/* padding-bottom: 20px;
border-bottom: 1px solid var(--grey); */
}
.search-tip-product {
display: flex;
gap: 10px;
}
.search-tip-product-img-wrapper {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 4px;
background-color: var(--product-bg);
flex-shrink: 0;
position: relative;
}
.search-tip-product-img {
max-width: 90%;
max-height: 90%;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
.search-tip-product-info {
display: flex;
flex-direction: column;
gap: 5px;
}
.search-tip-product-name {
color: var(--text);
}
.search-tip-product-pricing {
display: flex;
gap: 10px;
text-wrap: nowrap;
}
.search-tip-product-old-price {
font-size: 14px;
color: var(--grey);
text-decoration: line-through;
&.no-price {
display: none;
}
}
.search-tip-product-price {
font-weight: 600;
color: var(--black);
}
.search-popup-link {
display: grid;
place-items: center;
width: 100%;
padding: 10px 0 12px;
border: 1px solid var(--teal);
border-radius: 50px;
font-weight: 600;
color: var(--teal);
line-height: 1.5;
}
.search-results {
margin: 40px 0 20px;
}
.search-results-title {
font-size: 24px;
font-weight: 500;
line-height: 1.5;
& span {
font-weight: bold;
text-transform: uppercase;
color: var(--teal);
}
}
/* Lang switcher */
.lang-switcher {
padding: 10px;
position: relative;
cursor: pointer;
border-radius: 50%;
transition: all 0.3s ease;
&:hover {
background-color: var(--grey);
}
}
.langs-list {
position: absolute;
top: 100%;
left: 0;
display: none;
flex-direction: column;
&.active {
display: flex;
}
}
.lang-item {
padding: 10px;
background-color: var(--text);
border: 1px solid var(--text);
transition: all 0.3s ease;
&:hover {
background-color: var(--white);
}
&:last-child {
border-top: 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
/* Cart */
.cart-header-icon {
display: block;
padding: 8.8px 10px;
position: relative;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background-color: var(--grey);
}
&::before {
content: attr(data-count);
position: absolute;
top: -2px;
right: -2px;
width: 25px;
height: 25px;
display: grid;
place-items: center;
background-color: #BA0A01;
border-radius: 50%;
font-size: 12px;
color: var(--white);
}
&[data-count="0"]::before {
visibility: hidden;
}
}
.mobile-tg-link {
display: none;
}
/* ADAPTIVE */
/* 992px - 1100px */
@media (max-width: 1100px) {
.header-main-links-wrapper {
display: none;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.header-margin {
padding-top: 67px;
}
.header-top,
.header-catalog-btn,
.header-tools {
display: none;
}
.mobile-tg-link {
display: block;
color: var(--white);
}
.search-results-title {
font-size: 18px;
}
}
/* --------------------------------------------------------------------------------------- */
/* DESKTOP CATALOG */
/* --------------------------------------------------------------------------------------- */
.desktop-catalog {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.2s ease;
position: fixed;
top: 134px;
left: 50%;
translate: -50%;
z-index: 100;
max-width: 1240px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
&.active {
grid-template-rows: 1fr;
}
}
.desktop-catalog-inner {
min-height: 0;
}
.desktop-catalog-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 60px;
min-height: 50dvh;
max-height: 540px;
padding: 40px;
background-color: var(--white);
border: 1px solid var(--teal);
border-top: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
/* Scrollbar */
overflow-y: scroll;
overscroll-behavior: contain;
&::-webkit-scrollbar-track {
margin: 5px 0 20px;
}
}
.desktop-catalog-column {
display: flex;
flex-direction: column;
gap: 30px;
}
.desktop-category {
display: flex;
align-items: start;
gap: 10px;
}
.desktop-category-img-wrapper {
width: 40px;
height: 40px;
border-radius: 4px;
}
.desktop-category-name {
display: inline-block;
font-size: 20px;
line-height: 1.2;
margin-bottom: 5px;
font-weight: 500;
color: var(--text);
}
.desktop-subcategories-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.desktop-subcategory {
font-weight: 400;
line-height: 1.5;
color: var(--text);
}
.desktop-category-link {
width: fit-content;
font-weight: 400;
line-height: 1.5;
color: var(--teal);
margin-top: auto;
}
/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {
.desktop-catalog-inner {
gap: 30px 40px;
}
}
/* 768px - 992px */
@media (max-width: 992px) {
.desktop-catalog-wrapper {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding: 30px;
min-height: unset;
}
.desktop-catalog-column {
&:last-child {
flex-direction: row;
flex-wrap: wrap;
grid-column: span 4;
gap: 30px 0;
& .desktop-category {
width: 33.3333%;
}
}
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.desktop-catalog {
display: none;
}
}
/* --------------------------------------------------------------------------------------- */
/* CART */
/* --------------------------------------------------------------------------------------- */
.cart {
margin-top: 40px;
}
.cart-inner {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-top: 20px;
}
.cart-main-side {
height: fit-content;
padding: 20px;
background-color: var(--white);
border-radius: 20px;
}
.cart-products-list {
display: flex;
flex-direction: column;
gap: 20px;
}
/* CART PRODUCTS LIST */
.cart-product {
display: flex;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--grey-light);
&:last-child {
padding-bottom: 0;
border-bottom: 0;
}
}
.change-products-number-form.extended .cart-product {
&:last-child {
padding-bottom: 20px;
border-bottom: 1px solid var(--grey-light);
}
}
.cart-product-img-wrapper {
min-width: 126px;
aspect-ratio: 1;
background-color: var(--bg);
border-radius: 10px;
}
.cart-product-img {
max-width: 90%;
max-height: 90%;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
transition: all 0.3s ease;
}
.cart-product-info {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
.cart-product-name {
color: var(--black);
line-height: 1.2;
}
.cart-product-pricing-wrapper {
display: flex;
flex-direction: column;
gap: 5px;
}
.cart-product-old-price {
font-size: 14px;
color: var(--grey);
text-decoration: line-through;
&.no-price {
display: none;
}
}
.cart-product-price {
font-size: 18px;
}
.cart-product-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-product-quantity-btns {
display: flex;
align-items: center;
gap: 10px;
}
.cart-product-quantity-btn {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--grey-light);
color: var(--grey-light);
transition: all 0.3s ease;
&:hover {
border: 1px solid var(--teal);
color: var(--teal);
}
&.no-click {
pointer-events: none;
cursor: not-allowed;
}
}
.cart-product-quantity-input {
width: auto;
min-width: 1ch;
max-width: 3ch;
text-align: center;
font-size: 18px;
line-height: 1.5;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
-moz-appearance: textfield;
}
.cart-product-delete-btn {
cursor: pointer;
color: var(--grey-light);
transition: all 0.3s ease;
&:hover {
color: var(--maroon);
}
}
/* CART STICKY BLOCK */
.cart-sticky {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 155px;
left: 0;
padding: 20px;
background-color: var(--white);
border-radius: 20px;
width: 100%;
height: fit-content;
}
.cart-sticky-title {
font-size: 24px;
font-weight: 800;
color: var(--text);
line-height: 1.2;
text-transform: uppercase;
}
.cart-sticky-price-text {
font-size: 16px;
font-weight: 800;
color: var(--text);
line-height: 1.2;
text-transform: uppercase;
}
.cart-sticky-table {
display: flex;
flex-direction: column;
gap: 7px;
padding-bottom: 20px;
border-bottom: 1px solid var(--grey-light);
}
.cart-sticky-total-wrapper {
padding-bottom: 20px;
border-bottom: 1px solid var(--grey-light);
}
.cart-sticky-table-row,
.cart-sticky-total-wrapper {
display: flex;
justify-content: space-between;
& span {
font-variant-numeric: tabular-nums;
line-height: 1.2;
&:last-of-type {
color: var(--black);
}
}
}
.cart-sticky-table-row {
& span:first-of-type {
color: var(--grey);
}
}
.cart-sticky-warning {
font-size: 14px;
color: var(--grey);
}
.cart-sticky-btn {
width: 100%;
text-align: center;
padding: 12px 0 15px;
border: 1px solid var(--text);
border-radius: 50px;
background-color: var(--text);
color: var(--white);
transition: all 0.3s ease;
&:hover {
border-color: var(--grey-hover);
background-color: var(--grey-hover);
color: var(--white);
}
&.no-enter {
background-color: var(--grey);
border-color: var(--grey);
cursor: not-allowed;
opacity: 0.9;
}
}
/* SUBMIT */
.change-products-number-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-subblock {
display: none;
justify-content: space-between;
align-items: center;
gap: 20px;
line-height: 1.2;
&.active {
display: flex;
}
}
.change-products-number-submit-btn {
width: fit-content;
padding: 12px 30px 15px;
background-color: var(--teal);
border-radius: 50px;
color: var(--white);
font-weight: 500;
line-height: 1.5;
transition: all 0.3s ease;
&:hover {
background-color: var(--grey-hover);
}
}
/* EMPTY */
.empty-cart, .checkout-thanks {
height: calc(100dvh - 134px);
margin-bottom: -100px;
padding-block: 100px;
& .container {
display: grid;
place-items: center;
height: 100%;
}
& + .footer {
margin-top: 0;
}
}
.empty-cart-inner {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 80px;
background-color: var(--white);
border-radius: 20px;
text-align: center;
text-wrap: balance;
line-height: 1.2;
& img {
max-width: 210px;
margin-bottom: 50px;
}
& a {
margin-top: 20px !important;
width: fit-content;
padding: 12px 30px 15px;
margin-top: 10px;
border-radius: 50px;
background-color: var(--teal);
font-weight: 500;
color: var(--white);
line-height: 1.5;
transition: all 0.3s ease;
&:hover {
background-color: var(--pink);
color: var(--text);
}
}
}
.checkout-thanks-inner {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 80px;
background-color: var(--white);
border-radius: 20px;
text-align: center;
text-wrap: balance;
line-height: 1.2;
& h2 {
font-size: 24px;
font-weight: 800;
text-transform: uppercase;
line-height: 1.2;
margin-bottom: 20px;
}
& img {
max-width: 210px;
margin-bottom: 30px;
}
& a {
margin-top: 20px !important;
width: fit-content;
padding: 12px 30px 15px;
margin-top: 10px;
border-radius: 50px;
background-color: var(--teal);
font-weight: 500;
color: var(--white);
line-height: 1.5;
transition: all 0.3s ease;
&:hover {
background-color: var(--pink);
color: var(--text);
}
}
}
/* TOAST SUCCESS */
.success-toast {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
position: fixed;
right: -300px;
bottom: 20px;
z-index: 200;
width: fit-content;
padding: 18px;
background-color: var(--white);
border: 2px solid var(--teal);
border-radius: 10px;
font-weight: 600;
color: var(--teal);
transition: all 0.3s ease;
&.active {
right: 20px;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.success-toast {
width: calc(100% - 40px);
bottom: 80px;
right: -100%;
}
}
/* ADAPTIVE */
/* 768px - 992px */
@media (max-width: 992px) {
.cart-inner {
grid-template-columns: repeat(2, 1fr);
}
.form-subblock {
flex-direction: column;
align-items: start;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.cart-inner {
grid-template-columns: 1fr;
}
.empty-cart, .checkout-thanks {
height: calc(100dvh - 67px);
margin-bottom: -70px;
}
.empty-cart-inner, .checkout-thanks-inner {
translate: 0 -33px;
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.cart {
& .title-h1 {
padding-left: 20px;
}
& .container {
padding-inline: 0;
}
}
.empty-cart, .checkout-thanks {
margin-bottom: -60px;
}
.empty-cart-inner, .checkout-thanks-inner {
padding: 30px;
& a {
width: 100%;
}
}
}
/* --------------------------------------------------------------------------------------- */
/* CATEORIES */
/* --------------------------------------------------------------------------------------- */
.categories {
margin-top: 40px;
&.distance {
margin-top: 100px;
}
&.display-none {
display: none;
}
}
.categories-cards-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px 20px;
}
.category-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
&:nth-child(8n + 1) .category-card-label,
&:nth-child(8n + 3) .category-card-label,
&:nth-child(8n + 6) .category-card-label,
&:nth-child(8n + 8) .category-card-label {
background-color: var(--teal);
color: var(--white);
}
&:nth-child(8n + 2) .category-card-label,
&:nth-child(8n + 4) .category-card-label,
&:nth-child(8n + 5) .category-card-label,
&:nth-child(8n + 7) .category-card-label {
background-color: var(--pink);
color: var(--text);
}
&:hover .category-card-name {
color: var(--teal);
}
&:hover .adaptive-img {
scale: 1.05;
}
}
.category-card-img-wrapper {
width: 100%;
aspect-ratio: 1;
border-radius: 20px;
}
.category-card-label {
position: absolute;
bottom: 10px;
right: 10px;
padding: 4px 10px 6px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
}
.category-card-name {
font-size: 24px;
font-weight: 800;
text-transform: uppercase;
color: var(--text);
text-align: center;
word-break: break-all;
transition: all 0.3s ease;
}
/* PAGINATION */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 40px;
}
.pagination-nums-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.pagination-btn-prev,
.pagination-btn-next {
width: 30px;
height: 30px;
border-radius: 50%;
color: var(--text);
background-color: var(--grey-light);
cursor: pointer;
transition: all 0.3s ease;
&:hover {
color: var(--teal);
background-color: var(--pink);
}
position: relative;
& a, & span {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background-color: unset !important;
}
}
.pagination-num {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-weight: 600;
color: var(--text);
cursor: pointer;
border: 1px solid var(--bg);
&.active {
color: var(--white);
background-color: var(--teal);
pointer-events: none;
}
transition: all 0.3s ease;
&:hover {
color: var(--teal);
border-color: var(--teal);
}
}
/* ADAPTIVE */
/* 768px - 992px */
@media (max-width: 992px) {
.categories-cards-wrapper {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.categories {
&.distance {
margin-top: 70px;
}
}
.categories-cards-wrapper {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.category-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
&:nth-child(4n + 1) .category-card-label,
&:nth-child(4n + 4) .category-card-label {
background-color: var(--teal);
color: var(--white);
}
&:nth-child(4n + 2) .category-card-label,
&:nth-child(4n + 3) .category-card-label {
background-color: var(--pink);
color: var(--text);
}
&:hover .category-card-name {
color: var(--teal);
}
&:hover .adaptive-img {
scale: 1.05;
}
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.categories {
&.distance {
margin-top: 60px;
}
}
.category-card-label {
width: calc(100% - 10px);
bottom: 5px;
right: 5px;
padding: 4px 10px;
font-size: 12px;
text-align: center;
}
.category-card-name {
font-size: 16px;
}
.pagination {
gap: 6px;
justify-content: space-between;
}
}
/* --------------------------------------------------------------------------------------- */
/* PRODUCTS */
/* --------------------------------------------------------------------------------------- */
.products-wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
.product-card {
display: flex;
flex-direction: column;
gap: 10px;
height: auto;
padding: 10px;
border-radius: 10px;
background-color: var(--white);
line-height: 1.2;
position: relative;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 0 20px 0 rgba(190, 190, 190, 0.3);
}
}
.product-card-link {
position: absolute;
inset: 0;
z-index: 5;
}
.product-card-img-wrapper {
width: 100%;
aspect-ratio: 1;
background-color: var(--product-bg);
border-radius: 10px;
}
.product-card-labels {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 5px;
position: absolute;
top: 0;
left: 0;
}
.product-card-label,
.product-card-discount {
font-size: 14px;
font-weight: 600;
line-height: 1.5;
text-transform: uppercase;
padding: 4px 10px 6px;
border-radius: 4px;
&.no-label {
display: none;
}
}
.product-card-discount {
background-color: var(--maroon);
color: var(--white);
margin-right: auto;
}
.product-card-label {
background-color: var(--pink);
color: var(--text);
margin-left: auto;
}
.product-card-img {
max-width: 90%;
max-height: 90%;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
transition: all 0.3s ease;
}
.product-card:hover .product-card-img {
scale: 1.05;
}
.product-card-name {
display: -webkit-box;
font-size: 16px;
color: var(--black);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.3s ease;
}
.product-card:hover .product-card-name {
color: var(--teal);
}
.product-pricing-wrapper {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: auto;
}
.product-card-old-price {
font-size: 14px;
color: var(--grey);
text-decoration: line-through;
&.no-price {
visibility: hidden;
}
}
.product-card-price {
font-size: 18px;
color: var(--black);
transition: all 0.3s ease;
}
.product-card:hover .product-card-price {
color: var(--teal);
}
.product-card-order-btn {
width: 100%;
padding: 12px 0 15px;
border-radius: 50px;
border: 1px solid var(--text);
transition: all 0.3s ease;
&:hover {
background-color: var(--text);
color: var(--white);
}
position: relative;
z-index: 10;
}
/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {
.products-wrapper {
grid-template-columns: repeat(4, 1fr);
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.products-wrapper {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.product-card-label,
.product-card-discount {
font-size: 10px;
padding: 4px 10px;
}
.product-card-price {
font-size: 16px;
}
}
/* --------------------------------------------------------------------------------------- */
/* CONTACT FORM */
/* --------------------------------------------------------------------------------------- */
.contact-form-wrapper {
padding: 40px;
background-color: var(--teal);
border-radius: 20px;
position: relative;
overflow: hidden;
position: relative;
}
.form-bg {
position: absolute;
right: -65px;
bottom: -60px;
z-index: 5;
}
.form-cubes {
position: absolute;
right: -130px;
bottom: -30px;
z-index: 7;
opacity: 0.8;
}
.contact-form-content {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 60%;
position: relative;
z-index: 10;
}
.contact-form-texts {
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-form-text {
line-height: 1.5;
color: var(--white);
text-wrap: balance;
}
.contact-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 5px;
&.large {
grid-column: span 2;
}
}
.form-label {
font-weight: 600;
color: var(--white);
line-height: 1.5;
padding-left: 10px;
}
.form-input, .form-textarea {
width: 100%;
padding: 10px 20px;
background-color: var(--teal);
border-radius: 10px;
border: 1px solid var(--white);
font-size: 18px;
color: var(--white);
font-weight: 400;
line-height: 1.5;
resize: none;
}
.form-actions-wrapper {
grid-column: span 2;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-check-wrapper {
display: flex;
align-items: center;
font-size: 14px;
color: var(--white);
line-height: 1.3;
text-wrap: balance;
cursor: pointer;
& a {
color: var(--white);
text-decoration: underline;
}
}
.form-check {
display: none;
}
.contact-form-check {
display: inline-block;
min-width: 20px;
aspect-ratio: 1;
margin-right: 10px;
border: 1px solid var(--white);
border-radius: 4px;
position: relative;
transition: all 0.3s ease;
}
.form-check:checked + .contact-form-check {
background-color: var(--white);
border-color: var(--white);
}
.form-check:checked + .contact-form-check::after {
content: "";
position: absolute;
top: 37%;
left: 55%;
width: 8px;
height: 12px;
border: solid var(--text);
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.form-subbtn {
padding: 12px 30px 15px;
background-color: var(--white);
border-radius: 50px;
color: var(--text);
font-weight: 500;
line-height: 1.5;
transition: all 0.3s ease;
&:hover {
background-color: var(--pink);
}
}
.contact-form-message {
grid-column: span 2;
text-wrap: balance;
}
/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {
.form-cubes {
display: none;
}
.contact-form-content {
max-width: 100%;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.contact-form {
grid-template-columns: 1fr;
}
.form-field {
&.large {
grid-column: unset;
}
}
.form-actions-wrapper {
grid-column: unset;
flex-direction: column;
align-items: start;
gap: 20px;
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.contact-form-wrapper {
padding: 20px;
}
.form-subbtn {
width: 100%;
}
.form-check-wrapper {
align-items: start;
}
}
/* --------------------------------------------------------------------------------------- */
/* FOOTER */
/* --------------------------------------------------------------------------------------- */
.footer {
background-color: var(--black);
padding-block: 40px;
}
.footer-inner {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-column {
display: flex;
flex-direction: column;
gap: 20px;
}
.footer-contact-link, .footer-address {
width: fit-content;
font-size: 20px;
font-weight: 500;
color: var(--white);
line-height: 1.5;
text-wrap: balance;
&.underline-link::after {
background-color: var(--white);
}
}
.footer-address {
max-width: 300px;
}
.footer-link {
font-size: 20px;
font-weight: 500;
color: var(--grey-light);
line-height: 1.5;
text-wrap: balance;
transition: color 0.3s ease;
&:hover {
color: var(--white);
}
&.underline-link::after {
background-color: var(--white);
}
}
.footer-soclinks-wrapper {
display: flex;
gap: 20px;
translate: -6px;
& .soclink {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
transition: all 0.3s ease;
&:hover {
background-color: var(--grey);
}
}
}
.footer-bottom {
margin-top: 60px;
display: flex;
justify-content: space-between;
}
.footer-rights {
display: flex;
gap: 5px;
}
.footer-rights, .policy-link {
font-size: 18px;
line-height: 1.5;
color: #707070;
&.underline-link::after {
background-color: #707070;
}
}
/* ADAPTIVE */
/* 768px - 992px */
@media (max-width: 992px) {
.footer-column {
&:last-child {
width: 100%;
}
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.footer {
padding: 60px 0 100px;
}
.footer-inner {
gap: 40px;
}
.footer-column {
&:first-child {
width: 100%;
}
&:nth-child(2), &:nth-child(3) {
width: calc(50% - 20px);
}
}
.footer-bottom {
flex-direction: column;
gap: 30px;
}
.footer-rights {
flex-direction: column;
gap: 0;
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.footer-inner {
display: none;
}
.footer-bottom {
margin-top: 0;
}
}
/* --------------------------------------------------------------------------------------- */
/* MOBILE NAVIGATION */
/* --------------------------------------------------------------------------------------- */
.mobile-nav {
display: none;
}
/* ADAPTIVE */
/* 576px - 768px */
@media (max-width: 768px) {
.mobile-nav {
display: flex;
align-items: center;
gap: 35px;
width: fit-content;
position: fixed;
left: 50%;
bottom: 0;
z-index: 200;
translate: -50%;
padding: 15px 35px;
background-color: var(--teal);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
&.hide {
display: none;
}
}
.mobile-nav-link, .mobile-nav-btn {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
& svg {
color: var(--white);
}
&.active {
background-color: var(--pink);
}
&.active svg {
color: var(--text);
}
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.mobile-nav {
width: calc(100% - 40px);
justify-content: space-between;
}
}
/* --------------------------------------------------------------------------------------- */
/* MOBILE MENU */
/* --------------------------------------------------------------------------------------- */
.mobile-menu {
display: none;
}
/* ADAPTIVE */
/* 576px - 768px */
@media (max-width: 768px) {
.mobile-menu {
display: flex;
flex-direction: column;
justify-content: space-around;
position: fixed;
top: 67px;
left: 100%;
z-index: 150;
width: 100%;
height: calc(100dvh - 67px);
padding: 20px 20px 86px;
background-color: var(--bg);
transition: all 0.3s ease;
&.active {
left: 0;
}
}
.mobile-menu-bg {
position: absolute;
top: 40%;
left: 35%;
translate: 0 -40%;
z-index: -1;
}
.mobile-menu-links-list {
display: flex;
flex-direction: column;
translate: 0 -10px;
}
.mobile-menu-link {
display: flex;
align-items: center;
padding-block: 10px;
font-weight: 500;
line-height: 1.5;
color: var(--black);
}
.mobile-menu-contacts {
display: flex;
flex-direction: column;
gap: 20px;
}
.mobile-menu-contact-link {
font-weight: 500;
color: var(--black);
line-height: 1.5;
}
.soclinks-wrapper {
display: flex;
gap: 40px;
}
.mobile-menu-langs-list {
display: flex;
align-items: center;
gap: 40px;
}
.mobile-menu-lang {
/* padding: 5px 10px 10px; */
&.active {
opacity: 0.2;
pointer-events: none;
}
}
}
/* --------------------------------------------------------------------------------------- */
/* MOBILE CATALOG */
/* --------------------------------------------------------------------------------------- */
.mobile-catalog {
display: none;
}
/* ADAPTIVE */
/* 576px - 768px */
@media (max-width: 768px) {
.mobile-catalog {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: 100%;
z-index: 150;
width: 100%;
height: 100dvh;
padding-bottom: 86px;
background-color: var(--bg);
transition: all 0.3s ease;
&.active {
right: 0;
}
}
/* SEARCH-INPUT */
.mobile-search-input-wrapper {
width: 100%;
display: flex;
padding: 16px 20px;
background-color: var(--text);
}
.mobile-search-input {
width: 100%;
padding-bottom: 5px;
border-bottom: 1px solid var(--white);
color: var(--white);
line-height: 1.5;
transition: all 0.5s ease;
}
.mobile-search-input-btn {
padding: 5px;
}
/* CATEGORIES-LIST */
.mobile-categories-list {
display: flex;
flex-direction: column;
gap: 30px;
margin: 20px 20px 0;
padding-bottom: 50px;
overflow-y: scroll;
overscroll-behavior: contain;
mask-image: linear-gradient(to bottom, hsl(0 0% 0% / 1), hsl(0 0% 0% / 1) 85%, hsl(0 0% 0% / 0));
}
.mobile-category {
display: flex;
align-items: center;
gap: 10px;
}
.mobile-category-img-wrapper {
width: 36px;
height: 36px;
border-radius: 4px;
}
.mobile-category-name {
color: var(--black);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* --------------------------------------------------------------------------------------- */
/* INTRO */
/* --------------------------------------------------------------------------------------- */
.intro {
margin-top: 40px;
}
.intro-inner {
padding: 40px;
border-radius: 20px;
background-color: var(--teal);
position: relative;
}
.intro-texts {
display: flex;
flex-direction: column;
gap: 30px;
max-width: 60%;
position: relative;
z-index: 20;
}
.intro-titles-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
}
.intro-title {
width: fit-content;
padding: 13px 30px 14px;
border-radius: 50px;
border: 2px solid var(--text);
font-weight: 600;
color: var(--white);
text-transform: uppercase;
}
.main-subtitle {
font-size: 24px;
line-height: 1.5;
color: var(--white);
}
.intro-button {
width: fit-content;
padding: 12px 30px 15px;
border-radius: 50px;
background-color: var(--white);
font-weight: 500;
color: var(--text);
line-height: 1.5;
transition: all 0.3s ease;
&:hover {
background-color: var(--pink);
}
}
.intro-bg-clip {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
border-radius: inherit;
overflow: hidden;
}
.intro-bg {
position: absolute;
right: 40px;
bottom: -45px;
z-index: 5;
}
.intro-img-wrapper {
width: 260px;
height: 260px;
border-radius: 20px;
position: absolute;
z-index: 10;
&.first {
top: -5px;
right: 250px;
rotate: 12deg;
}
&.second {
bottom: -5px;
right: 45px;
rotate: -17deg;
}
}
/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {
.intro-img-wrapper {
display: none;
}
.intro-texts {
max-width: 100%;
}
.intro-bg {
right: -100px;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.main-subtitle {
font-size: 20px;
}
.intro-bg {
scale: 0.8;
right: -250px;
bottom: -120px;
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.intro-inner {
padding: 40px 20px;
}
.intro-title {
width: 100%;
text-align: center;
font-size: 14px;
padding: 13px 24px 14px;
}
.main-subtitle {
font-size: 18px;
}
.intro-button {
width: 100%;
text-align: center;
}
}
/* --------------------------------------------------------------------------------------- */
/* MARQUEE */
/* --------------------------------------------------------------------------------------- */
.scroller-inner {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.scroller[data-animated=true] {
overflow: hidden;
}
.scroller[data-animated=true] .scroller-inner {
width: fit-content;
width: max-content;
flex-wrap: nowrap;
animation:
scroll
var(--_animation-duration, 40s)
var(--_animation-direction, forwards)
linear
infinite
}
.scroller[data-direction="right"] {
--_animation-direction: reverse;
}
.scroller[data-direction="left"] {
--_animation-direction: forwards;
}
.scroller[data-speed="slow"] {
--_animation-duration: 120s;
}
.scroller[data-speed="fast"] {
--_animation-duration: 20s;
}
@keyframes scroll {
to {
transform: translate(calc(-50% - 40px));
}
}
.scroller-item {
display: flex;
align-items: center;
gap: 40px;
user-select: none;
& span {
font-size: 32px;
font-weight: 900;
text-transform: uppercase;
color: var(--grey);
}
}
/* ADAPTIVE */
/* 360px - 480px */
@media (max-width: 480px) {
.scroller-inner {
gap: 20px;
}
.scroller-item {
gap: 20px;
& span {
font-size: 24px;
}
}
@keyframes scroll {
to {
transform: translate(calc(-50% - 20px));
}
}
}
/* --------------------------------------------------------------------------------------- */
/* HOME ABOUT */
/* --------------------------------------------------------------------------------------- */
.home-about-inner {
padding: 40px;
background-color: var(--pink);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.home-about-texts {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 67%;
position: relative;
z-index: 10;
}
.home-about-text {
text-wrap: balance;
line-height: 1.5;
}
.home-about-link {
width: fit-content;
padding: 12px 30px 15px;
margin-top: 10px;
border-radius: 50px;
background-color: var(--text);
font-weight: 500;
color: var(--white);
line-height: 1.5;
transition: all 0.3s ease;
&:hover {
background-color: var(--grey-hover);
}
}
.home-about-bg {
position: absolute;
bottom: -20px;
right: 40px;
z-index: 5;
}
/* ADAPTIVE */
/* 768px - 992px */
@media (max-width: 992px) {
.home-about-texts {
max-width: 100%;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.home-about-bg {
bottom: 0;
right: -140px;
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.home-about-inner {
padding: 20px;
}
.home-about-link {
width: 100%;
text-align: center;
}
}
/* --------------------------------------------------------------------------------------- */
/* PARTNERSHIP */
/* --------------------------------------------------------------------------------------- */
.partnership-inner {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-top: 20px;
}
.partnership-cards-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.partnership-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 30px;
border-radius: 20px;
background-color: var(--pink);
}
.partnership-title-wrapper {
display: flex;
justify-content: space-between;
align-items: start;
}
.partnership-card-title {
font-size: 24px;
font-weight: 800;
text-transform: uppercase;
line-height: 1.2;
}
.partnership-card-icon {
flex-shrink: 0;
}
.partnership-card-text {
line-height: 1.5;
}
.partnership-cta {
display: flex;
flex-direction: column;
gap: 20px;
padding: 30px;
border-radius: 20px;
background-color: var(--teal);
}
.partnership-cta-title {
font-size: 32px;
font-weight: 800;
text-transform: uppercase;
line-height: 1.2;
color: var(--white);
}
.partnership-cta-icon {
flex-shrink: 0;
}
.partnership-advantages-list {
display: flex;
flex-direction: column;
gap: 10px;
padding-left: 15px;
}
.partnership-advantage {
list-style: disc;
color: var(--white);
line-height: 1.5;
}
.partnership-btn {
width: fit-content;
padding: 12px 30px 15px;
background-color: var(--white);
border-radius: 50px;
margin-top: auto;
color: var(--text);
font-weight: 500;
line-height: 1.5;
transition: all 0.3s ease;
&:hover {
background-color: var(--pink);
}
}
.partnership-slider {
display: none !important;
}
.modal-form {
width: 100%;
height: calc(100% - 134px);
position: fixed;
bottom: -100%;
left: 0;
z-index: 100;
& .container {
display: grid;
place-items: center;
height: 100%;
}
& .contact-form-wrapper {
width: 100%;
}
margin-top: 134px;
background-color: rgba(151, 150, 158, 0.5);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
&.active {
bottom: 0;
}
}
.modal-close-btn {
display: grid;
place-items: center;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
right: 10px;
z-index: 20;
background-color: #00000000;
}
/* ADAPTIVE */
/* 768px - 992px */
@media (max-width: 992px) {
.partnership-card {
padding: 20px;
}
.partnership-cta {
padding: 20px;
}
.partnership-card-title {
font-size: 20px;
}
.partnership-cta-title {
font-size: 24px;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.partnership-inner {
grid-template-columns: 1fr;
}
.partnership-cards-wrapper {
display: none;
}
.partnership-slider {
display: block !important;
max-width: 100%;
padding-bottom: 40px;
}
.modal-form {
height: calc(100% - 67px);
margin-top: 67px;
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.partnership-btn {
width: 100%;
text-align: center;
}
.modal-form .contact-form-wrapper {
padding: 40px 20px 20px;
}
}
/* --------------------------------------------------------------------------------------- */
/* HOME GALLERY */
/* --------------------------------------------------------------------------------------- */
.home-gallery-inner {
position: relative;
}
.home-gallery-slider {
margin-top: 20px;
padding-bottom: 40px;
}
.home-gallery-slider-btn-prev,
.home-gallery-slider-btn-next {
display: grid;
place-items: center;
position: absolute;
top: calc(50% - 13px);
/* top: 50%; */
z-index: 10;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--pink);
color: var(--teal);
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background-color: var(--teal);
color: var(--white);
}
&.swiper-button-disabled {
background-color: var(--grey-light);
color: var(--white);
}
}
.home-gallery-slider-btn-prev {
left: 0;
translate: -50% 50%;
}
.home-gallery-slider-btn-next {
right: 0;
translate: 50% 50%;
}
.home-gallery-slide {
aspect-ratio: 13/11;
border-radius: 10px;
transition: all 0.3s ease;
&.swiper-slide-prev,
&.swiper-slide-next {
scale: 0.92;
}
&.swiper-slide-prev {
translate: 14px;
}
&.swiper-slide-next {
translate: -14px;
}
}
/* ADAPTIVE */
/* 768px - 992px */
@media (max-width: 992px) {
.home-gallery-slide {
&.swiper-slide-prev,
&.swiper-slide-next {
scale: 1;
translate: 0;
}
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.home-gallery-slide {
aspect-ratio: 31/28;
&.swiper-slide-prev,
&.swiper-slide-next {
aspect-ratio: 31/28;
}
}
.home-gallery-slider-btn-prev,
.home-gallery-slider-btn-next {
display: none;
}
}
/* --------------------------------------------------------------------------------------- */
/* SUBSCRIBE */
/* --------------------------------------------------------------------------------------- */
.subscribe {
padding-block: 30px;
overflow: hidden;
&.distance {
margin: 70px 0 -30px;
}
}
.subscribe-bg-clip {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
border-radius: inherit;
overflow: hidden;
}
.subscribe-bg {
position: absolute;
right: 40px;
bottom: -100px;
z-index: 5;
}
.subscribe-inner {
padding: 40px;
border-radius: 20px;
background-color: var(--teal);
position: relative;
}
.subscribe-texts {
position: relative;
z-index: 10;
}
.subscribe-title {
font-size: 48px;
font-weight: 900;
text-transform: uppercase;
color: var(--white);
line-height: 1.2;
text-wrap: balance;
}
.subscribe-subtitle {
margin-top: 10px;
font-size: 24px;
color: var(--white);
line-height: 1.5;
}
.subscribe-soclinks-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: fit-content;
gap: 20px 60px;
margin-top: 20px;
}
.subscribe-soclink {
display: flex;
align-items: center;
gap: 10px;
color: var(--white);
}
.subscribe-soclink-name {
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
color: var(--white);
line-height: 1.2;
}
.subscribe-img-wrapper {
width: 260px;
height: 260px;
border-radius: 20px;
position: absolute;
top: -10px;
right: -80px;
z-index: 20;
rotate: 10deg;
}
/* ADAPTIVE */
/* 768px - 992px */
@media (max-width: 992px) {
.subscribe {
padding-block: 0;
&.distance {
margin: 100px 0 0;
}
}
.subscribe-img-wrapper {
display: none;
}
.subscribe-bg {
right: -100px;
bottom: -100px;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.subscribe {
&.distance {
margin-top: 70px;
}
}
.subscribe-soclinks-wrapper {
grid-template-columns: 1fr;
width: 100%;
gap: 30px;
}
.subscribe-bg {
scale: 0.8;
right: -200px;
bottom: -100px;
}
.subscribe-subtitle {
font-size: 20px;
}
.subscribe-title {
font-size: 32px;
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.subscribe {
&.distance {
margin-top: 60px;
}
}
.subscribe-inner {
padding: 20px;
}
.subscribe-title {
font-size: 26px;
}
.subscribe-subtitle {
font-size: 16px;
}
}
/* --------------------------------------------------------------------------------------- */
/* FAQ */
/* --------------------------------------------------------------------------------------- */
.faq-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.faq-item {
padding: 20px 40px;
border-radius: 20px;
border: 2px solid var(--pink);
&.open {
background-color: var(--pink);
}
transition: all 0.3s ease;
&:hover {
border-color: var(--teal);
}
}
.faq-title-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
cursor: pointer;
}
.faq-question {
font-size: 24px;
font-weight: 500;
line-height: 1.5;
text-wrap: balance;
user-select: none;
transition: all 0.3s ease;
}
.faq-item:hover .faq-question {
color: var(--teal);
}
.faq-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
position: relative;
border-radius: 50%;
background-color: var(--pink);
transition: all 0.3s ease;
}
.faq-item.open .faq-icon {
background-color: var(--white);
}
.faq-item:hover .faq-icon {
background-color: var(--teal);
}
.faq-icon-line {
display: block;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
background-color: var(--teal);
border-radius: 2px;
&:nth-child(1) {
width: 2px;
height: 18px;
}
&:nth-child(2) {
width: 18px;
height: 2px;
}
}
.faq-item:hover .faq-icon-line {
background-color: var(--white) !important;
}
.faq-title-wrapper.active .faq-icon {
rotate: 180deg;
}
.faq-title-wrapper.active .faq-icon-line {
&:nth-child(1) {
opacity: 0;
}
&:nth-child(2) {
background-color: var(--teal);
}
}
.faq-answer-wrapper {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.2s ease, margin-top 0.2s ease;
}
.faq-item.open .faq-answer-wrapper {
grid-template-rows: 1fr;
margin-top: 10px;
}
.faq-answer {
min-height: 0;
p {
line-height: 1.5;
text-wrap: balance;
}
}
.faq-slider {
display: none;
}
/* ADAPTIVE */
/* 360px - 480px */
@media (max-width: 480px) {
.faq-question {
font-size: 20px;
}
.faq-answer {
p {
font-size: 18px;
}
}
.faq-list {
display: none;
}
.faq-slider {
display: block;
margin-top: 20px;
padding-bottom: 40px;
}
.faq-card {
display: flex;
flex-direction: column;
gap: 10px;
height: auto;
padding: 20px;
border-radius: 20px;
background-color: var(--pink);
}
.faq-card-title {
font-size: 20px;
font-weight: 500;
line-height: 1.5;
}
.faq-card-text {
font-size: 15px;
font-weight: 400;
line-height: 1.5;
}
}
/* --------------------------------------------------------------------------------------- */
/* MAP */
/* --------------------------------------------------------------------------------------- */
.map .container {
display: flex;
flex-direction: column;
gap: 20px;
}
.map-subtitle {
display: flex;
align-items: center;
gap: 5px;
font-size: 24px;
line-height: 1.5;
text-wrap: balance;
a {
color: var(--text);
}
}
.map-wrapper {
width: 100%;
height: 400px;
border-radius: 20px;
overflow: hidden;
}
.map {
width: 100%;
height: 100%;
}
/* ADAPTIVE */
/* 576px - 768px */
@media (max-width: 768px) {
.map-subtitle {
font-size: 20px;
}
}
/* --------------------------------------------------------------------------------------- */
/* FILTERS */
/* --------------------------------------------------------------------------------------- */
.filters {
margin: 30px 0 20px;
}
.filters-inner {
display: flex;
align-items: center;
gap: 30px;
}
.filters-popup-btn,
.sort-by-popular-btn {
display: flex;
align-items: center;
gap: 5px;
font-size: 18px;
line-height: 1.3;
color: var(--text);
position: relative;
padding-bottom: 5px;
margin-bottom: -5px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
color: var(--teal);
}
&.active {
color: var(--teal);
}
}
.sort-by-popular-btn:hover .filter-content {
display: flex;
}
.sort-by-popular-item {
font-size: 16px;
line-height: 1.3;
text-wrap: nowrap;
color: var(--text);
transition: all 0.3s ease;
&:hover {
color: var(--teal);
}
}
.filters-btns-list {
display: flex;
align-items: center;
gap: 30px;
}
.filter-btn {
font-size: 18px;
line-height: 1.3;
padding-right: 24px;
padding-bottom: 5px;
margin-bottom: -5px;
position: relative;
cursor: pointer;
&::after {
content: '';
transform-origin: 3px 6px;
border-color: var(--teal);
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-style: solid;
border-left-width: 2px;
width: 8px;
height: 8px;
transition: transform .3s, border-color .3s;
display: block;
position: absolute;
top: 6px;
right: 4px;
transform: rotate(-45deg);
}
&:hover::after {
transform: rotate(135deg);
}
}
.filter-content {
position: absolute;
left: 0;
top: calc(100%);
z-index: 20;
display: none;
flex-direction: column;
align-items: start;
gap: 10px;
padding: 20px;
border-radius: 10px;
border: 2px solid var(--teal);
background-color: var(--white);
box-shadow: 0 0 20px 0 rgba(190, 190, 190, 0.3);
}
.filter-btn:hover .filter-content {
display: flex;
}
.filter-input-wrapper {
display: flex;
flex-direction: row-reverse;
}
.filter-label {
font-size: 14px;
line-height: 1.5;
color: var(--grey);
padding: 10px 0 10px 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top: 2px solid var(--grey);
border-left: 2px solid var(--grey);
border-bottom: 2px solid var(--grey);
}
.filter-input {
width: 100%;
font-size: 14px;
line-height: 1.5;
padding: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top: 2px solid var(--grey);
border-right: 2px solid var(--grey);
border-bottom: 2px solid var(--grey);
&::placeholder {
font-size: 14px;
line-height: 1.5;
color: var(--grey);
}
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
.filter-input:focus {
border-color: var(--teal);
}
.filter-input:focus + .filter-label {
border-color: var(--teal);
}
.filter-content-action-btn {
font-size: 16px;
line-height: 1.2;
padding: 12px 50px 15px;
background-color: var(--text);
color: var(--white);
border-radius: 50px;
transition: all 0.3s ease;
&:hover {
background-color: var(--grey-hover);
}
}
.filter-check-wrapper {
display: flex;
align-items: center;
cursor: pointer;
gap: 7px;
font-size: 16px;
line-height: 1.3;
& span {
user-select: none;
}
}
.filter-check-input {
display: none;
}
.filter-check {
display: inline-block;
min-width: 20px;
aspect-ratio: 1;
margin-right: 10px;
border: 1px solid var(--teal);
border-radius: 4px;
position: relative;
transition: all 0.3s ease;
}
.filter-check-input:checked + .filter-check {
background-color: var(--teal);
border-color: var(--teal);
}
.filter-check-input:checked + .filter-check::after {
content: "";
position: absolute;
top: 40%;
left: 50%;
width: 8px;
height: 12px;
border: solid var(--white);
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.sort-by-popular-mobile-popup {
display: none;
}
.filter-custom-checkbox {
appearance: none;
cursor: pointer;
width: 20px;
height: 20px;
position: relative;
overflow: hidden;
color: var(--white);
border: 2px solid var(--teal);
border-radius: 5px;
background: transparent;
transition: background-color 0.2s;
&:checked {
background: var(--teal);
}
&::after {
content: '';
position: absolute;
inset: 0;
transition: transform 0.2s;
background: currentColor;
mask-image: url('data:image/svg+xml,');
transform: scale(0);
}
&:checked::after {
transform: none;
}
}
/* ADAPTIVE */
/* 576px - 768px */
@media (max-width: 768px) {
.filters-inner {
justify-content: space-between;
}
.filters-btns-list {
display: none;
}
.sort-by-popular-btn {
& span {
display: none;
}
}
.sort-by-popular-btn:hover .filter-content {
display: none;
}
.sort-by-popular-mobile-popup {
position: fixed;
left: 0;
bottom: -200px;
z-index: 300;
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
padding: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color: var(--white);
transition: all 0.3s ease;
&.active {
bottom: 0;
}
}
.sort-by-popular-title {
font-size: 24px;
font-weight: bold;
line-height: 1.2;
}
}
/* --------------------------------------------------------------------------------------- */
/* FILTERS POPUP */
/* --------------------------------------------------------------------------------------- */
.filters-popup {
display: flex;
flex-direction: column;
gap: 20px;
width: 430px;
height: 100%;
max-height: calc(100dvh - 134px);
position: fixed;
top: 134px;
/* right: -430px; */
left: -430px;
z-index: 90;
padding: 20px;
background-color: var(--white);
box-shadow: 5px 0 10px 0 rgba(190, 190, 190, 0.3);
border-right: 2px solid var(--teal);
/* border-left: 2px solid var(--teal); */
transition: all 0.3s ease;
&.active {
left: 0;
/* right: 0; */
}
}
.filters-popup-top {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 7px;
}
.filters-popup-title {
font-size: 20px;
font-weight: bold;
line-height: 1.3;
}
.filters-popup-close-btn {
display: grid;
place-items: center;
width: 30px;
height: 30px;
margin: -6px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background-color: var(--grey-light);
}
}
.filters-list {
display: flex;
flex-direction: column;
gap: 20px;
height: 100%;
padding-right: 20px;
overflow-y: scroll;
overscroll-behavior: contain;
&::-webkit-scrollbar-thumb {
background-color: var(--grey-light);
}
}
.filter-item, .filter-price {
padding-bottom: 10px;
border-bottom: 2px solid var(--grey);
&.open {
padding-bottom: 20px;
}
}
.filter-item {
&:nth-last-child(2), &:nth-last-child(1) {
display: none;
}
}
.filter-title-wrapper {
position: relative;
cursor: pointer;
&::after {
content: '';
transform-origin: 3px 6px;
border-color: var(--teal);
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-style: solid;
border-left-width: 2px;
width: 12px;
height: 12px;
transition: transform 0.2s, border-color 0.2s;
display: block;
position: absolute;
top: 6px;
/* right: 2px; */
right: 5px;
transform: rotate(-45deg);
}
}
.filter-item.open .filter-title-wrapper::after {
transform: rotate(135deg);
/* right: -2px; */
right: 1px;
}
.filter-title {
display: block;
font-size: 18px;
line-height: 1.3;
margin-bottom: 10px;
user-select: none;
transition: all 0.3s ease;
}
.filter-item:hover .filter-title {
color: var(--teal);
}
.filter-drop-wrapper {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.2s ease, margin-top 0.2s ease;
}
.filter-item.open .filter-drop-wrapper {
grid-template-rows: 1fr;
margin-top: 10px;
}
.filter-drop {
min-height: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.filter-inputs-container {
display: flex;
gap: 10px;
}
.filters-popup-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.filters-popup-drop-btn,
.filters-popup-done-btn {
width: 100%;
text-align: center;
padding: 12px 0 15px;
border: 1px solid;
border-radius: 50px;
transition: all 0.3s ease;
&:hover {
border-color: var(--grey-hover);
background-color: var(--grey-hover);
color: var(--white);
}
}
.filters-popup-drop-btn {
border-color: var(--text);
color: var(--text);
}
.filters-popup-done-btn {
background-color: var(--text);
color: var(--white);
}
/* ADAPTIVE */
/* 576px - 768px */
@media (max-width: 768px) {
.filters-popup {
width: 100%;
height: 100%;
max-height: calc(100dvh - 67px);
position: fixed;
top: 67px;
left: -100%;
/* right: -100%; */
z-index: 90;
/* border-left: none; */
border-right: none;
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.filter-inputs-container {
flex-direction: column;
}
}
/* --------------------------------------------------------------------------------------- */
/* PRODUCT */
/* --------------------------------------------------------------------------------------- */
.product {
margin-top: 20px;
}
.product-inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
padding: 30px;
background-color: var(--white);
border-radius: 20px;
}
/* PRODUCT GALLERY */
.product-gallery {
display: flex;
gap: 20px;
justify-content: space-between;
align-items: start;
gap: 20px;
max-height: 400px;
}
.product-photos-slider-wrapper {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
max-height: 100%;
flex-shrink: 0;
min-width: 126px;
}
.photos-slider-btn {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--pink);
color: var(--teal);
flex-shrink: 0;
cursor: pointer;
user-select: none;
position: absolute;
left: 50%;
translate: -50%;
z-index: 10;
&.prev {
top: -15px;
}
&.next {
bottom: -15px;
}
transition: all 0.3s ease;
&:hover {
color: var(--white);
background-color: var(--teal);
}
&.swiper-button-disabled {
background-color: var(--grey-light);
color: var(--white);
}
}
.product-slide-photo {
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1;
padding: 10px;
cursor: pointer;
overflow: hidden;
border-radius: 10px;
background-color: var(--product-bg);
&.active {
border: 1px solid var(--teal);
}
height: auto !important;
max-height: 126px;
}
.product-slide-photo-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
user-select: none;
transition: all 0.2s ease;
}
.product-slide-photo:hover .product-slide-photo-img {
scale: 0.9;
}
.product-main-photo {
display: flex;
justify-content: center;
align-items: center;
/* height: 100%; */
aspect-ratio: 1;
padding: 10px;
border-radius: 10px;
background-color: var(--product-bg);
position: relative;
}
.product-main-photo-img-wrapper {
display: none;
&.active {
display: flex;
justify-content: center;
aspect-ratio: 1;
width: 100%;
height: 100%;
}
}
.product-main-photo-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.product-labels {
width: calc(100% - 20px);
display: flex;
justify-content: space-between;
align-items: center;
gap: 5px;
position: absolute;
top: 10px;
left: 10px;
}
.product-label,
.product-discount {
font-size: 14px;
font-weight: 600;
line-height: 1.5;
text-transform: uppercase;
padding: 4px 10px 6px;
border-radius: 4px;
&.no-label {
display: none;
}
}
.product-discount {
background-color: var(--maroon);
color: var(--white);
margin-right: auto;
}
.product-label {
background-color: var(--pink);
color: var(--text);
margin-left: auto;
}
/* PRODUCT INFO */
.product-info {
display: flex;
flex-direction: column;
}
.product-code-wrapper {
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
font-size: 16px;
cursor: pointer;
line-height: 1.5;
}
.product-code-text {
color: var(--grey);
}
.product-code{
color: var(--black);
}
.product-code-icons-wrapper {
display: flex;
width: 24px;
height: 24px;
overflow: hidden;
transition: all 0.3s ease;
&.copied {
justify-content: end;
}
}
.product-code-icon {
flex-shrink: 0;
}
.product-pricing {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 20px;
}
.product-old-price {
font-size: 14px;
color: var(--grey);
line-height: 1.5;
text-decoration: line-through;
}
.product-price {
font-size: 32px;
font-weight: bold;
line-height: 1.2;
color: var(--black);
}
.product-btns {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 10px 0 20px;
}
.product-btn {
padding: 12px 30px 15px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
transition: all 0.3s ease;
&.card-btn {
background-color: var(--text);
color: var(--white);
&:hover {
background-color: var(--grey-hover);
}
}
&.order-btn {
border: 1px solid var(--text);
color: var(--text);
&:hover {
background-color: var(--grey-hover);
border-color: var(--grey-hover);
color: var(--white);
}
}
}
.product-info-options {
margin-top: auto;
line-height: 1.5;
}
.product-info-options-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.product-option {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
font-size: 15px;
line-height: 1.5;
padding-bottom: 5px;
border-bottom: 1px dashed var(--grey);
&.hide {
display: none;
}
}
.product-option-name {
font-weight: 400;
}
.product-option-desc {
font-weight: 600;
text-align: right;
}
.product-options-link {
display: block;
width: fit-content;
line-height: 1.3;
color: var(--teal);
margin-top: 10px;
cursor: pointer;
&.hide {
display: none;
}
& span.hide {
display: none;
}
}
.product-desc-wrapper,
.product-options {
margin-top: 90px;
scroll-margin-top: 164px;
}
.product-subtitle {
font-size: 32px;
font-weight: bold;
line-height: 1.2;
color: var(--black);
margin-bottom: 20px;
}
.product-desc {
display: flex;
flex-direction: column;
line-height: 1.5;
h2, h3, h4, h5, h6 {
font-size: 24px;
font-weight: bold;
margin-bottom: 16px;
}
p {
padding-bottom: 12px;
}
a {
color: var(--text);
text-decoration: underline;
}
ul, ol {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 12px;
}
ul li {
list-style: disc;
margin-left: 16px;
}
ol li {
margin-left: 16px;
}
table {
width: 100% !important;
}
}
.product-options-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 100px;
}
/* ORDER MODAL */
.order-modal-wrapper {
width: 100%;
height: calc(100% - 134px);
position: fixed;
bottom: -100%;
left: 0;
z-index: 100;
display: grid;
place-items: center;
margin-top: 134px;
background-color: rgba(151, 150, 158, 0.5);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
&.active {
bottom: 0;
}
}
.order-modal {
position: fixed;
width: max-content;
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: 100;
padding: 45px 30px 30px;
background-color: var(--white);
border-radius: 20px;
}
.order-modal-title {
font-size: 22px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.3;
text-align: center;
margin-bottom: 30px;
}
.order-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
& input:focus {
border-color: var(--teal);
}
}
.order-form-item {
position: relative;
&:first-of-type {
grid-column: span 2;
}
&.quantity-item {
display: flex;
gap: 7px;
}
}
.order-form-input {
display: block;
width: 100%;
padding: 12px 20px 10px;
border: 2px solid var(--grey);
border-radius: 10px;
position: relative;
}
.order-form-label {
position: absolute;
top: 50%;
left: 10px;
translate: 0 -50%;
cursor: text;
z-index: 10;
padding: 0 10px;
color: var(--grey);
background-color: var(--white);
transition: all 0.3s ease;
}
.order-form-item.quantity-item .order-form-label {
left: 60px;
}
.order-form-item input:focus + label,
.order-form-item input:valid + label,
.order-form-item input[readonly] + label {
font-size: 14px;
color: var(--text);
top: 0;
}
.order-form input[type="number"]::-webkit-outer-spin-button,
.order-form input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Убирает стрелки в Firefox */
.order-form input[type="number"] {
-moz-appearance: textfield;
}
.quantity-btn {
display: grid;
place-items: center;
height: 100%;
aspect-ratio: 1;
border: 2px solid var(--grey);
border-radius: 10px;
flex-shrink: 0;
font-size: 20px;
color: var(--teal);
cursor: pointer;
user-select: none;
&:active {
scale: 0.95;
}
}
.radios-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 17px 20px 10px;
border: 2px solid var(--grey);
border-radius: 10px;
position: relative;
}
.radio-title {
position: absolute;
top: 0;
left: 10px;
translate: 0 -50%;
cursor: text;
z-index: 10;
padding: 0 10px;
background-color: var(--white);
font-size: 14px;
}
.order-form-radio-input {
scale: 1.3;
cursor: pointer;
}
.radio-item {
display: flex;
gap: 5px;
cursor: pointer;
}
.order-form-subbtn {
width: 100%;
padding: 10px 20px;
line-height: 1.5;
font-weight: 600;
color: var(--white);
background-color: var(--teal);
border-radius: 50px;
text-wrap: nowrap;
}
.order-modal-policy-text {
font-size: 14px;
line-height: 1.3;
color: var(--grey);
text-align: center;
grid-column: span 2;
}
.order-modal-close-btn {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
position: absolute;
top: 5px;
right: 5px;
}
/* ADAPTIVE */
/* 768px - 992px */
@media (max-width: 992px) {
.product-inner {
grid-template-columns: 1fr;
}
.product-main-photo {
width: 100%;
height: 100%;
aspect-ratio: unset;
}
.product-options-list {
gap: 10px 50px;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.product-inner {
display: flex;
flex-direction: column;
}
.product-gallery {
align-items: center;
flex-direction: column-reverse;
max-width: 100%;
max-height: unset;
}
.product-photos-slider-wrapper {
flex-direction: row;
max-width: 100%;
}
.product-main-photo {
width: 100%;
height: auto;
}
.photos-slider-btn {
left: unset;
top: 50%;
translate: 0 -50%;
rotate: -90deg;
&.prev {
top: 50%;
left: -15px;
}
&.next {
bottom: unset;
right: -15px;
}
}
.product-options-list {
grid-template-columns: 1fr;
}
.product-desc-wrapper,
.product-options {
margin-top: 70px;
scroll-margin-top: 97px;
}
.order-modal-wrapper {
height: calc(100% - 67px);
margin-top: 67px;
}
.product-photos-slider-wrapper,
.product-photos-slider {
width: 100%;
}
.product-slide-photo {
width: calc(33% - 6px) !important;
}
}
@media (max-width: 576px) {
.product-inner {
padding: 20px;
}
.product-btns {
grid-template-columns: 1fr;
}
.order-form {
grid-template-columns: 1fr;
}
.order-form-item {
&:first-of-type {
grid-column: unset;
}
}
.order-modal-policy-text {
grid-column: unset;
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.product {
& .container {
padding: 0;
}
}
.order-modal {
width: fit-content;
}
.order-modal {
top: 50%;
translate: -50% -50%;
width: calc(100% - 40px);
padding: 45px 20px 20px;
}
.product-desc-wrapper,
.product-options {
padding-inline: 20px;
}
}
/* --------------------------------------------------------------------------------------- */
/* SEO TEXT */
/* --------------------------------------------------------------------------------------- */
.seo-text-container {
display: flex;
flex-direction: column;
h2, h3, h4, h5, h6 {
font-size: 24px;
font-weight: bold;
line-height: 1.3;
margin-bottom: 16px;
}
p {
line-height: 1.4;
padding-bottom: 12px;
}
ul, ol {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 12px;
}
ul li {
list-style: disc;
margin-left: 16px;
}
ol li {
margin-left: 16px;
}
.none {
padding: 0;
}
}
.seo-btn {
width: fit-content;
line-height: 1.5;
font-weight: bold;
cursor: pointer;
position: relative;
padding-right: 24px;
&::after {
content: '';
transform-origin: 3px 6px;
border-color: var(--teal);
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-style: solid;
border-left-width: 2px;
width: 8px;
height: 8px;
transition: transform .3s, border-color .3s;
display: block;
position: absolute;
top: 3px;
right: 4px;
transform: rotate(-45deg);
}
&.active::after {
transform: rotate(135deg);
}
}
.seo-btn-text {
display: none !important;
}
/* --------------------------------------------------------------------------------------- */
/* CHECKOUT */
/* --------------------------------------------------------------------------------------- */
.checkout {
margin-top: 40px;
}
.checkout-inner {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-top: 20px;
}
.checkout-form {
display: flex;
flex-direction: column;
gap: 20px;
}
/* FIELDSET */
.checkout-form-step {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
background-color: var(--white);
border-radius: 20px;
}
.checkout-form-step-title {
font-size: 24px;
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
display: contents;
}
/* TABS */
.checkout-fieldset-tabs {
display: flex;
align-items: center;
gap: 20px;
}
.payment-method-tab-content {
display: none;
align-items: center;
gap: 20px;
&.active {
display: flex;
}
}
.checkout-fieldset-tab {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
&.active {
padding: 10px 20px;
border: 1px solid var(--text);
border-radius: 50px;
}
}
.checkout-fieldset-tab-radio {
width: 20px;
height: 20px;
appearance: none;
border-radius: 50%;
background-color: var(--white);
border: 1px solid var(--teal);
}
.checkout-fieldset-tab.active .checkout-fieldset-tab-radio {
border-width: 5px;
}
/* INPUTS */
.checkout-fieldset-tabs-content {
display: none;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
&.active {
display: grid;
}
}
.checkout-fieldset-tabs-content-text {
grid-column: span 2;
line-height: 1.5;
}
.checkout-fieldset-input-item {
display: flex;
flex-direction: column;
gap: 5px;
}
.checkout-fieldset-input-item-large {
display: flex;
flex-direction: column;
gap: 20px;
grid-column: span 2;
}
.checkout-fieldset-input-label {
padding-left: 20px;
font-weight: 600;
line-height: 1.5;
}
.checkout-fieldset-input, .checkout-form-textarea {
width: 100%;
padding: 10px 20px;
border: 1px solid var(--text);
border-radius: 10px;
line-height: 1.5;
resize: none;
&:focus {
border: 2px solid var(--teal);
}
}
.checkout-form-actions {
display: flex;
flex-direction: column;
gap: 20px;
}
.custom-checkbox-wrapper {
display: flex;
align-items: center;
cursor: pointer;
gap: 7px;
font-size: 16px;
line-height: 1.3;
& span {
user-select: none;
}
& a {
color: var(--teal);
}
}
.checkout-form-actions .custom-checkbox-wrapper {
align-items: start;
}
.custom-checkbox {
appearance: none;
cursor: pointer;
width: 20px;
height: 20px;
flex-shrink: 0;
position: relative;
overflow: hidden;
color: var(--white);
border: 2px solid var(--teal);
border-radius: 5px;
background: transparent;
transition: background-color 0.2s;
&:checked {
background: var(--teal);
}
&::after {
content: '';
position: absolute;
inset: 0;
transition: transform 0.2s;
background: currentColor;
mask-image: url('data:image/svg+xml,');
transform: scale(0);
}
&:checked::after {
transform: none;
}
}
.checkout-form-submit-btn {
width: fit-content;
text-align: center;
padding: 12px 30px 15px;
border: 1px solid var(--text);
border-radius: 50px;
background-color: var(--text);
color: var(--white);
transition: all 0.3s ease;
&:hover {
border-color: var(--grey-hover);
background-color: var(--grey-hover);
color: var(--white);
}
}
/* CART STICKY BLOCK */
.checkout-sticky {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 155px;
left: 0;
padding: 20px;
background-color: var(--white);
border-radius: 20px;
width: 100%;
height: fit-content;
}
.checkout-sticky-title {
font-size: 24px;
font-weight: 800;
color: var(--text);
line-height: 1.2;
text-transform: uppercase;
}
.checkout-sticky-price-text {
font-size: 16px;
font-weight: 800;
color: var(--text);
line-height: 1.2;
text-transform: uppercase;
}
.checkout-sticky-table {
display: flex;
flex-direction: column;
gap: 7px;
padding-block: 20px;
border-top: 1px solid var(--grey-light);
border-bottom: 1px solid var(--grey-light);
}
.products-sticky-table {
display: flex;
flex-direction: column;
gap: 7px;
}
.checkout-sticky-table-row,
/* .products-sticky-table-row, */
.checkout-sticky-total-wrapper {
display: flex;
justify-content: space-between;
& span {
line-height: 1.2;
&:last-of-type {
color: var(--black);
}
& a {
line-height: 1.2;
}
}
}
.products-sticky-table-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
place-items: end;
&:not(:last-child) {
padding-bottom: 10px;
border-bottom: 1px dashed var(--grey-light);
}
& span {
text-wrap: balance;
line-height: 1.2;
&:last-of-type {
color: var(--black);
}
& a {
line-height: 1.2;
}
}
}
.checkout-sticky-table-row,
.products-sticky-table-row {
& span:first-of-type {
place-self: start;
color: var(--grey);
& a {
color: var(--grey);
}
}
}
.checkout-sticky-btn {
width: 100%;
text-align: center;
padding: 12px 0 15px;
border: 1px solid var(--text);
border-radius: 50px;
background-color: var(--text);
color: var(--white);
transition: all 0.3s ease;
&:hover {
border-color: var(--grey-hover);
background-color: var(--grey-hover);
color: var(--white);
}
}
/* ADAPTIVE */
/* 768px - 992px */
@media (max-width: 992px) {
.checkout-inner {
grid-template-columns: repeat(2, 1fr);
}
.checkout-fieldset-tabs {
flex-direction: column;
align-items: start;
}
.checkout-fieldset-tabs-content {
grid-template-columns: 1fr;
}
.checkout-fieldset-input-item-large {
grid-column: unset;
}
.checkout-fieldset-tabs-content-text {
grid-column: unset;
}
.payment-method-tab-content {
align-items: start;
flex-direction: column;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.checkout-inner {
display: flex;
flex-direction: column;
gap: 20px;
}
.checkout-sticky {
order: -1;
position: static;
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.checkout {
& .title-h1 {
padding-inline: 20px;
}
& .container {
padding-inline: 0;
}
}
.checkout-form-actions {
padding-inline: 20px;
}
.checkout-form-submit-btn {
width: 100%;
}
}
.with-aside {
margin-top: 40px;
h1 {
font-size: 48px;
font-weight: 900;
text-transform: uppercase;
line-height: 1.2;
text-wrap: balance;
color: var(--text);
margin-bottom: 20px;
}
}
.with-aside-inner {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.optom {
margin-top: 40px;
}
.optom + .partnership {
margin-top: 20px !important;
}
.contacts {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 40px;
}
.contacts + .subscribe {
margin-top: 0 !important;
}
.with-aside-inner-main {
display: flex;
flex-direction: column;
h2, h3, h4, h5, h6 {
font-size: 24px;
font-weight: bold;
line-height: 1.3;
margin-bottom: 16px;
}
p {
line-height: 1.4;
padding-bottom: 12px;
}
ul, ol {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 12px;
}
ul li {
list-style: disc;
margin-left: 16px;
}
ol li {
margin-left: 16px;
}
.none {
padding: 0;
}
}
.with-aside-inner-aside {
& .col-sm-3.hidden-xs {
all: unset;
display: block !important;
}
& .distance {
margin-top: 0;
}
}
.with-aside-inner-aside .contact-form-container .container {
padding: 0;
}
.contact-form-wrapper {
container-type: inline-size; /* реагирует на ширину */
container-name: contact-form; /* можно указать имя */
}
/* ADAPTIVE */
/* 768px - 992px */
@media (max-width: 992px) {
.with-aside-inner {
grid-template-columns: repeat(2, 1fr);
}
.contacts + .subscribe {
margin-top: 20px !important;
}
}
/* 576px - 768px */
@media (max-width: 768px) {
.with-aside-inner {
grid-template-columns: 1fr;
}
.with-aside {
h1 {
font-size: 36px;
}
}
}
/* 360px - 480px */
@media (max-width: 480px) {
.with-aside {
h1 {
font-size: 28px;
}
}
}
/* Контейнерная адаптивность */
/* <=1200px */
@container contact-form (max-width: 1200px) {
.contact-form-content {
max-width: 100%;
}
}
/* <=768px */
@container contact-form (max-width: 768px) {
.form-cubes {
display: none;
}
.contact-form {
grid-template-columns: 1fr;
}
.form-field.large {
grid-column: unset;
}
.form-actions-wrapper {
grid-column: unset;
flex-direction: column;
align-items: start;
gap: 20px;
}
.title-h1,
.title-h2 {
font-size: 36px;
}
}
/* <=480px */
@container contact-form (max-width: 480px) {
.contact-form-wrapper {
padding: 20px;
}
.form-subbtn {
width: 100%;
}
.form-check-wrapper {
align-items: start;
}
.title-h1,
.title-h2 {
font-size: 28px;
}
}
.policy {
margin-top: 40px;
}
.policy-inner {
display: flex;
flex-direction: column;
h2, h3, h4, h5, h6 {
font-size: 20px;
font-weight: bold;
line-height: 1.3;
margin-bottom: 16px;
}
p {
line-height: 1.4;
padding-bottom: 12px;
}
ul, ol {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 12px;
}
ul li {
list-style: disc;
margin-left: 16px;
}
ol li {
margin-left: 16px;
}
.none {
padding: 0;
}
}
/* 360px - 480px */
@media (max-width: 576px) {
.policy .title-h1 {
font-size: 24px;
}
}