:root { /* basic borders */ --border-radius-small: 15px; /* border-radius: 15px */ --border-radius-medium: 20px; /* border-radius: 20px */ --border-radius-large: 25px; /* border-radius: 20px */ --border: 1px solid; /* border, но без цвета */ --border-bold: 2px solid; /* border 2px, но без цвета */ --border-radius-only-top-small: 15px 15px 0 0; /* скругление верха контейнера */ /* basic colors*/ --main-color: #FDC975; --main-secondary-color: #FFFFFF; --main-font-color: #000000; --main-font-primary-color: #EF4618; --main-font-secondary-color: #F1F1F1; --main-bg-color: #F6EBD9; --main-bg-rgba-color: rgba(246, 235, 217, 0.6); --main-bg-primary-color: #EBE6E6; --main-error-color: #EC2427; --main-error-new-color: #B8320D; --main-default-button-color: #333333; --main-active-button-color: #262626; --main-disabled-bg-color: #E6E6E6; --main-disabled-inner-color: #B3B3B3; --main-border-color: #808080; --main-aprove-color: #8BC5B6; --main-card-bg-color: #FFFAF1; --main-card-description-color: undefined; --main-shadow-basic-color: rgba(51, 51, 51, 0.5); --main-footer-background-color: #271D17; --main-footer-title-color: #FDC975; /* header colors */ --header-nav-bg-color: var(--main-bg-rgba-color); --header-nav-item-color: var(--main-font-color); --header-bg-color: var(--main-bg-color); --header-nav-link-color: var(--main-color); --header-item-color: var(--main-color); --header-search-bg-color: var(--main-bg-color); --header-search-font-color: var(--main-font-color); --header-search-border-color: var(--main-color); /* mobile header colors */ --mobile-header-bg-color: var(--main-bg-rgba-color); --mobile-header-item-color: var(--main-font-color); --mobile-header-item-secondary-color: var(--main-color); --mobile-header-search-bg-color: var(--main-bg-color); --mobile-header-search-font-color: var(--main-secondary-color); --mobile-header-search-border-color: var(--main-color); --mobile-cart-item-color: var(--main-font-color); --mobile-cart-action-color: var(--main-color); /* footer colors */ --footer-bg-color: var(--main-footer-background-color); --footer-line-color: #e0e6e8; --footer-text-color: var(--main-font-secondary-color); --footer-title-color: var(--main-footer-title-color); --footer-separator-line-color: var(--main-card-bg-color); --footer-item-color: var(--main-secondary-color); /* contacts colors */ --contacts-card-bg-color: var(--main-card-bg-color); --contacts-card-sub-font-color: var(--main-border-color); /* product card colors */ --product-card-bg-color: var(--main-card-bg-color); --product-card-main-text-color: var(--main-font-color); --product-card-secondary-text-color: var(--main-border-color); /* card colors */ --card-bg-color: var(--main-secondary-color); --card-item-primary-color: var(--main-font-color); --card-item-secondary-color: var(--main-color); --card-action-primary-color: var(--main-color); --card-action-secondary-color: var(--main-secondary-color); --card-font-color: var(--main-font-color); --card-font-color-70: rgba(0, 0, 0, 0.7); /* modal card colors and childModal.vue component */ --modal-card-bg-color: var(--main-bg-color); --modal-card-item-primary-color: var(--main-font-color); --modal-card-item-secondary-color: var(--main-secondary-color:);/*?:?*/ --modal-card-action-primary-color: var(--main-color); --modal-card-action-secondary-color: var(--main-secondary-color); /* dropdown cards colors */ --dropdown-card-bg-color: var(--main-bg-color); --dropdown-card-action-color: var(--main-color); --dropdown-card-item-color: var(--main-font-color); --dropdown-card-button-bg-color: var(--main-color); --dropdown-card-button-font-color: var(--main-secondary-color); /* sidebars colors */ --sidebar-bg-color: var(--main-secondary-color); --sidebar-main-text-color: var(--main-font-color); --sidebar-item-color: var(--main-font-color); --sidebar-button-bg-color: var(--main-bg-color); --sidebar-button-font-color: var(--main-secondary-color); /* basket colors */ --basket-font-color: var(--main-font-color); --basket-item-description-color: var(--main-overlay-color); --basket-empty-body-title-color: var(--main-font-color); --basket-empty-body-subtitle-color: var(--main-border-color); /* slider colors */ --slider-action-primary-color: var(--main-color); --slider-action-secondary-color: var(--main-font-color); /* special colors */ --action-item-primary-color: var(--main-color); --action-item-secondary-color: var(--main-secondary-color); --input-font-color: var(--main-font-color); --search-font-color: var(--main-font-color); --block-title-color: var(--main-font-color); --checkbox-color: var(--main-color); /* profile colors */ --profile-bg-content: var(--main-card-bg-color); --profile-active-link: var(--main-default-button-color); --profile-main-font-color: var(--main-font-color); --profile-aprove-color: var(--main-aprove-color); --profile-main-error-color: var(--main-error-color); /* app-input */ --input-default-color: var(--main-border-color); --input-active-color: var(--main-font-color); --input-disabled-color: var(--main-disabled-bg-color); --input-disabled-inner-color: var(--main-disabled-inner-color); --input-error-color: var(--main-error-new-color); /* app-select */ --select-main-color: var(--main-border-color); --select-font-color: var(--main-font-color); --select-list-bg-color: var(--main-card-bg-color); --select-list-hovered-color: var(--main-bg-color); --select-active-item-checkmark: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.16797 9.16634L9.16797 14.1663L17.5013 5.83301' stroke='%23333333' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); /* app-radio-input */ --input-radio-default-color: var(--main-border-color); --input-radio-active-color: var(--main-font-color); --input-radio-disabled-color: var(--main-disabled-bg-color); /* app-button */ --button-bg-color: var(--main-default-button-color); --button-bg-hovered-color: var(--main-secondary-color); --button-bg-active-color: var(--main-active-button-color); --button-bg-disabled-color: var(--main-disabled-bg-color); --button-font-color: var(--main-secondary-color); --button-font-hovered-color: var(--main-font-color); --button-font-active-color: var(--main-secondary-color); --button-font-disabled-color: var(--main-border-color); /* app-counter */ --counter-border-color: var(--main-font-color); --counter-default-color: var(--main-default-button-color); --counter-active-color: var(--main-active-button-color); --counter-icon-hovered-color: var(--main-font-secondary-color); /* shadows */ --shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); --shadow-card: 10px 10px 0px 0px rgba(51,51,51,0.4); --shadow-hover: 0px 10px 10px 0px rgba(230, 230, 230, 0.656); --slide-overlay: linear-gradient( to bottom, rgba(237, 237, 237, 0) 0%, var(--main-bg-color) 100% ); --image-ellipsis: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .8) 60%, var(--main-bg-color) 100% ); --image-bg-color: linear-gradient( 315deg, hsl(37.24137931034476, 61.7021276596%, 40%) 0%, var(--main-bg-color) 74% ); /* special variables */ --breadcrumbs-main-color: var(--main-secondary-color); --breadcrumbs-active-color: var(--main-color); --breadcrumbs-divider: '/'; /* skeleton placeholder */ --placeholder-color: #d9d9d9; --placeholder-image: linear-gradient(315deg, #d9d9d9 0%, #f6f2f2 74%); --skeleton-bg: var(--main-border-color); --skeleton-gradient: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%); /* overlay */ --main-overlay-color: var(--main-shadow-basic-color); /* tags */ --hit-bg-color: #EF8B18; --hit-border-color: var(--hit-bg-color); /* profile order */ --order-font-color: var(--main-font-primary-color); --order-hover-color: rgba(51,51,51,0.05); /* profile bonus */ --bonus-font-primary-color: var(--main-border-color); --bonus-font-secondary-color: var(--main-font-primary-color); --bonus-bg-color: var(--main-font-primary-color); --bonus-border-color: var(--main-border-color); /* datepicker colors */ --datepicker-active-color: var(--main-default-button-color); --datepicker-hover-color: var(--main-shadow-basic-color); } .croppa-container { background-color: transparent; border: 2px solid #FDC975; border: 2px solid var(--main-color);/*grey */ } .croppa-container:hover { opacity: 1; background-color: transparent; } .image-cropper__content { display: flex; justify-content: space-between; flex-direction: column; align-items: center; } .image-cropper__cropper{ width: 100%; height: 350px; } .image-cropper__croppa { width: 100%; height: 100%; } @media (max-width: 1440px) { .image-cropper__cropper { height: 333px; } } @media (max-width: 1200px) { .image-cropper__cropper { height: 274px; } } @media (max-width: 990px) { .image-cropper__cropper { height: 210px; } } @media (max-width: 768px) { .image-cropper__cropper { height: 155px; } } @media (max-width: 600px) { .image-cropper__cropper { height: 148px; } } @media (max-width: 414px) { .image-cropper__cropper { height: 100px; } } .actions { margin-top: 1rem; } .actions a { display: inline-block; padding: 5px 15px; background:#FDC975; background:var(--main-color); /*#0062cc;*/ color: #FFFFFF; color: var(--main-secondary-color);/*white */ text-decoration: none; border-radius: 3px; margin-right: 1rem; margin-bottom: 1rem; } .actions a:hover { background:rgb(228, 185, 117); background:rgb(228, 185, 117); /*#0062cc;*/ } .sk-fading-circle { position: absolute; } .sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-fading-circle .sk-circle .sk-circle-indicator { display: block; margin: 0 auto; width: 15%; height: 15%; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1s infinite ease-in-out both; animation: sk-circleFadeDelay 1s infinite ease-in-out both; } .sk-fading-circle .sk-circle2 { transform: rotate(30deg); } .sk-fading-circle .sk-circle3 { transform: rotate(60deg); } .sk-fading-circle .sk-circle4 { transform: rotate(90deg); } .sk-fading-circle .sk-circle5 { transform: rotate(120deg); } .sk-fading-circle .sk-circle6 { transform: rotate(150deg); } .sk-fading-circle .sk-circle7 { transform: rotate(180deg); } .sk-fading-circle .sk-circle8 { transform: rotate(210deg); } .sk-fading-circle .sk-circle9 { transform: rotate(240deg); } .sk-fading-circle .sk-circle10 { transform: rotate(270deg); } .sk-fading-circle .sk-circle11 { transform: rotate(300deg); } .sk-fading-circle .sk-circle12 { transform: rotate(330deg); } .sk-fading-circle .sk-circle2 .sk-circle-indicator { -webkit-animation-delay: -0.91667s; animation-delay: -0.91667s; } .sk-fading-circle .sk-circle3 .sk-circle-indicator { -webkit-animation-delay: -0.83333s; animation-delay: -0.83333s; } .sk-fading-circle .sk-circle4 .sk-circle-indicator { -webkit-animation-delay: -0.75s; animation-delay: -0.75s; } .sk-fading-circle .sk-circle5 .sk-circle-indicator { -webkit-animation-delay: -0.66667s; animation-delay: -0.66667s; } .sk-fading-circle .sk-circle6 .sk-circle-indicator { -webkit-animation-delay: -0.58333s; animation-delay: -0.58333s; } .sk-fading-circle .sk-circle7 .sk-circle-indicator { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .sk-fading-circle .sk-circle8 .sk-circle-indicator { -webkit-animation-delay: -0.41667s; animation-delay: -0.41667s; } .sk-fading-circle .sk-circle9 .sk-circle-indicator { -webkit-animation-delay: -0.33333s; animation-delay: -0.33333s; } .sk-fading-circle .sk-circle10 .sk-circle-indicator { -webkit-animation-delay: -0.25s; animation-delay: -0.25s; } .sk-fading-circle .sk-circle11 .sk-circle-indicator { -webkit-animation-delay: -0.16667s; animation-delay: -0.16667s; } .sk-fading-circle .sk-circle12 .sk-circle-indicator { -webkit-animation-delay: -0.08333s; animation-delay: -0.08333s; } @-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } .croppa-container { display: inline-block; cursor: pointer; transition: all 0.3s; position: relative; font-size: 0; align-self: flex-start; background-color: #e6e6e6; } .croppa-container canvas { transition: all 0.3s; } .croppa-container:hover { opacity: 0.7; } .croppa-container.croppa--dropzone { box-shadow: inset 0 0 10px #333; } .croppa-container.croppa--dropzone canvas { opacity: 0.5; } .croppa-container.croppa--disabled-cc { cursor: default; } .croppa-container.croppa--disabled-cc:hover { opacity: 1; } .croppa-container.croppa--has-target { cursor: move; } .croppa-container.croppa--has-target:hover { opacity: 1; } .croppa-container.croppa--has-target.croppa--disabled-mz { cursor: default; } .croppa-container.croppa--disabled { cursor: not-allowed; } .croppa-container.croppa--disabled:hover { opacity: 1; } .croppa-container.croppa--passive { cursor: default; } .croppa-container.croppa--passive:hover { opacity: 1; } .croppa-container svg.icon-remove { position: absolute; background: #fff; border-radius: 50%; filter: drop-shadow(-2px 2px 2px rgba(0,0,0,0.7)); z-index: 10; cursor: pointer; border: 2px solid #fff; } :root { /* basic borders */ --border-radius-small: 15px; /* border-radius: 15px */ --border-radius-medium: 20px; /* border-radius: 20px */ --border-radius-large: 25px; /* border-radius: 20px */ --border: 1px solid; /* border, но без цвета */ --border-bold: 2px solid; /* border 2px, но без цвета */ --border-radius-only-top-small: 15px 15px 0 0; /* скругление верха контейнера */ /* basic colors*/ --main-color: #FDC975; --main-secondary-color: #FFFFFF; --main-font-color: #000000; --main-font-primary-color: #EF4618; --main-font-secondary-color: #F1F1F1; --main-bg-color: #F6EBD9; --main-bg-rgba-color: rgba(246, 235, 217, 0.6); --main-bg-primary-color: #EBE6E6; --main-error-color: #EC2427; --main-error-new-color: #B8320D; --main-default-button-color: #333333; --main-active-button-color: #262626; --main-disabled-bg-color: #E6E6E6; --main-disabled-inner-color: #B3B3B3; --main-border-color: #808080; --main-aprove-color: #8BC5B6; --main-card-bg-color: #FFFAF1; --main-card-description-color: undefined; --main-shadow-basic-color: rgba(51, 51, 51, 0.5); --main-footer-background-color: #271D17; --main-footer-title-color: #FDC975; /* header colors */ --header-nav-bg-color: var(--main-bg-rgba-color); --header-nav-item-color: var(--main-font-color); --header-bg-color: var(--main-bg-color); --header-nav-link-color: var(--main-color); --header-item-color: var(--main-color); --header-search-bg-color: var(--main-bg-color); --header-search-font-color: var(--main-font-color); --header-search-border-color: var(--main-color); /* mobile header colors */ --mobile-header-bg-color: var(--main-bg-rgba-color); --mobile-header-item-color: var(--main-font-color); --mobile-header-item-secondary-color: var(--main-color); --mobile-header-search-bg-color: var(--main-bg-color); --mobile-header-search-font-color: var(--main-secondary-color); --mobile-header-search-border-color: var(--main-color); --mobile-cart-item-color: var(--main-font-color); --mobile-cart-action-color: var(--main-color); /* footer colors */ --footer-bg-color: var(--main-footer-background-color); --footer-line-color: #e0e6e8; --footer-text-color: var(--main-font-secondary-color); --footer-title-color: var(--main-footer-title-color); --footer-separator-line-color: var(--main-card-bg-color); --footer-item-color: var(--main-secondary-color); /* contacts colors */ --contacts-card-bg-color: var(--main-card-bg-color); --contacts-card-sub-font-color: var(--main-border-color); /* product card colors */ --product-card-bg-color: var(--main-card-bg-color); --product-card-main-text-color: var(--main-font-color); --product-card-secondary-text-color: var(--main-border-color); /* card colors */ --card-bg-color: var(--main-secondary-color); --card-item-primary-color: var(--main-font-color); --card-item-secondary-color: var(--main-color); --card-action-primary-color: var(--main-color); --card-action-secondary-color: var(--main-secondary-color); --card-font-color: var(--main-font-color); --card-font-color-70: rgba(0, 0, 0, 0.7); /* modal card colors and childModal.vue component */ --modal-card-bg-color: var(--main-bg-color); --modal-card-item-primary-color: var(--main-font-color); --modal-card-item-secondary-color: var(--main-secondary-color:);/*?:?*/ --modal-card-action-primary-color: var(--main-color); --modal-card-action-secondary-color: var(--main-secondary-color); /* dropdown cards colors */ --dropdown-card-bg-color: var(--main-bg-color); --dropdown-card-action-color: var(--main-color); --dropdown-card-item-color: var(--main-font-color); --dropdown-card-button-bg-color: var(--main-color); --dropdown-card-button-font-color: var(--main-secondary-color); /* sidebars colors */ --sidebar-bg-color: var(--main-secondary-color); --sidebar-main-text-color: var(--main-font-color); --sidebar-item-color: var(--main-font-color); --sidebar-button-bg-color: var(--main-bg-color); --sidebar-button-font-color: var(--main-secondary-color); /* basket colors */ --basket-font-color: var(--main-font-color); --basket-item-description-color: var(--main-overlay-color); --basket-empty-body-title-color: var(--main-font-color); --basket-empty-body-subtitle-color: var(--main-border-color); /* slider colors */ --slider-action-primary-color: var(--main-color); --slider-action-secondary-color: var(--main-font-color); /* special colors */ --action-item-primary-color: var(--main-color); --action-item-secondary-color: var(--main-secondary-color); --input-font-color: var(--main-font-color); --search-font-color: var(--main-font-color); --block-title-color: var(--main-font-color); --checkbox-color: var(--main-color); /* profile colors */ --profile-bg-content: var(--main-card-bg-color); --profile-active-link: var(--main-default-button-color); --profile-main-font-color: var(--main-font-color); --profile-aprove-color: var(--main-aprove-color); --profile-main-error-color: var(--main-error-color); /* app-input */ --input-default-color: var(--main-border-color); --input-active-color: var(--main-font-color); --input-disabled-color: var(--main-disabled-bg-color); --input-disabled-inner-color: var(--main-disabled-inner-color); --input-error-color: var(--main-error-new-color); /* app-select */ --select-main-color: var(--main-border-color); --select-font-color: var(--main-font-color); --select-list-bg-color: var(--main-card-bg-color); --select-list-hovered-color: var(--main-bg-color); --select-active-item-checkmark: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.16797 9.16634L9.16797 14.1663L17.5013 5.83301' stroke='%23333333' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); /* app-radio-input */ --input-radio-default-color: var(--main-border-color); --input-radio-active-color: var(--main-font-color); --input-radio-disabled-color: var(--main-disabled-bg-color); /* app-button */ --button-bg-color: var(--main-default-button-color); --button-bg-hovered-color: var(--main-secondary-color); --button-bg-active-color: var(--main-active-button-color); --button-bg-disabled-color: var(--main-disabled-bg-color); --button-font-color: var(--main-secondary-color); --button-font-hovered-color: var(--main-font-color); --button-font-active-color: var(--main-secondary-color); --button-font-disabled-color: var(--main-border-color); /* app-counter */ --counter-border-color: var(--main-font-color); --counter-default-color: var(--main-default-button-color); --counter-active-color: var(--main-active-button-color); --counter-icon-hovered-color: var(--main-font-secondary-color); /* shadows */ --shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); --shadow-card: 10px 10px 0px 0px rgba(51,51,51,0.4); --shadow-hover: 0px 10px 10px 0px rgba(230, 230, 230, 0.656); --slide-overlay: linear-gradient( to bottom, rgba(237, 237, 237, 0) 0%, var(--main-bg-color) 100% ); --image-ellipsis: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .8) 60%, var(--main-bg-color) 100% ); --image-bg-color: linear-gradient( 315deg, hsl(37.24137931034476, 61.7021276596%, 40%) 0%, var(--main-bg-color) 74% ); /* special variables */ --breadcrumbs-main-color: var(--main-secondary-color); --breadcrumbs-active-color: var(--main-color); --breadcrumbs-divider: '/'; /* skeleton placeholder */ --placeholder-color: #d9d9d9; --placeholder-image: linear-gradient(315deg, #d9d9d9 0%, #f6f2f2 74%); --skeleton-bg: var(--main-border-color); --skeleton-gradient: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%); /* overlay */ --main-overlay-color: var(--main-shadow-basic-color); /* tags */ --hit-bg-color: #EF8B18; --hit-border-color: var(--hit-bg-color); /* profile order */ --order-font-color: var(--main-font-primary-color); --order-hover-color: rgba(51,51,51,0.05); /* profile bonus */ --bonus-font-primary-color: var(--main-border-color); --bonus-font-secondary-color: var(--main-font-primary-color); --bonus-bg-color: var(--main-font-primary-color); --bonus-border-color: var(--main-border-color); /* datepicker colors */ --datepicker-active-color: var(--main-default-button-color); --datepicker-hover-color: var(--main-shadow-basic-color); } .swiper-slide__block { position: relative; width: 100%; height: 500px; } .swiper-slide__description-align-right { align-items: flex-end !important; left: 68%; } .swiper-slide__description-align-right p, .swiper-slide__description-align-right h3 { text-align: right !important; } .swiper-slide__description-align-bottom { bottom: 0; } .swiper-slide__description { position: absolute; align-items: flex-start; display: flex; justify-content: flex-start; width: 25%; max-height: 85%; flex-direction: column; padding: 30px 50px; z-index: 10; } .swiper-slide__description h3 { flex-shrink: 0; margin: 0; max-width: 150%; word-wrap: break-word; overflow: hidden; font-size: 38px; font-weight: normal; } .swiper-slide__description p { max-width: 100%; word-wrap: break-word; overflow: hidden; font-size: 18px; line-height: 28px; } .swiper-slide__button { display: flex; align-items: center; justify-content: center; border-radius: 25px; font-weight: 500; line-height: 19px; font-size: 16px; text-align: center; width: 197px; height: 45px; text-decoration: none; color: #F2F2F2; background: #EF4618; } .swiper-slide__img { right: 0; } .swiper-slide__img img { width: 100%; border-radius: 15px; border-radius: var(--border-radius-small); } .swiper-slide__button:hover { cursor: pointer; background-color: rgb(228, 185, 117); background-color: rgb(228, 185, 117);/*color: #84b65d(blackness(+10%)) */ } @media (max-width: 1440px) { .swiper-slide { height: 333px; } } @media (max-width: 1200px) { .swiper-slide { height: 274px; } } @media (max-width: 990px) { .swiper-slide { height: 210px; } .swiper-slide__description { padding: 10px 30px; } .swiper-slide__description h3 { font-size: 30px; } .swiper-slide__description p { font-size: 14px; } } @media (max-width: 768px) { .swiper-slide { height: 155px; } .swiper-slide__description p { line-height: 1.5em; } } @media (max-width: 600px) { .swiper-slide { height: 148px; } .swiper-slide__description h3 { font-size: 24px; } .swiper-slide__description p { font-size: 12px; margin: 0; } .swiper-slide__button { padding: 6px 8px; min-width: auto; line-height: 10px; font-size: 12px; } } @media (max-width: 414px) { .swiper-slide { height: 100px; } .swiper-slide__description h3 { font-size: 18px; } .swiper-slide__description p { font-size: 10px; } .swiper-slide__button { padding: 4px 6px; min-width: auto; line-height: 10px; font-size: 10px; } } [data-v-1a6afa8b]:root { /* basic borders */ --border-radius-small: 15px; /* border-radius: 15px */ --border-radius-medium: 20px; /* border-radius: 20px */ --border-radius-large: 25px; /* border-radius: 20px */ --border: 1px solid; /* border, но без цвета */ --border-bold: 2px solid; /* border 2px, но без цвета */ --border-radius-only-top-small: 15px 15px 0 0; /* скругление верха контейнера */ /* basic colors*/ --main-color: #FDC975; --main-secondary-color: #FFFFFF; --main-font-color: #000000; --main-font-primary-color: #EF4618; --main-font-secondary-color: #F1F1F1; --main-bg-color: #F6EBD9; --main-bg-rgba-color: rgba(246, 235, 217, 0.6); --main-bg-primary-color: #EBE6E6; --main-error-color: #EC2427; --main-error-new-color: #B8320D; --main-default-button-color: #333333; --main-active-button-color: #262626; --main-disabled-bg-color: #E6E6E6; --main-disabled-inner-color: #B3B3B3; --main-border-color: #808080; --main-aprove-color: #8BC5B6; --main-card-bg-color: #FFFAF1; --main-card-description-color: undefined; --main-shadow-basic-color: rgba(51, 51, 51, 0.5); --main-footer-background-color: #271D17; --main-footer-title-color: #FDC975; /* header colors */ --header-nav-bg-color: var(--main-bg-rgba-color); --header-nav-item-color: var(--main-font-color); --header-bg-color: var(--main-bg-color); --header-nav-link-color: var(--main-color); --header-item-color: var(--main-color); --header-search-bg-color: var(--main-bg-color); --header-search-font-color: var(--main-font-color); --header-search-border-color: var(--main-color); /* mobile header colors */ --mobile-header-bg-color: var(--main-bg-rgba-color); --mobile-header-item-color: var(--main-font-color); --mobile-header-item-secondary-color: var(--main-color); --mobile-header-search-bg-color: var(--main-bg-color); --mobile-header-search-font-color: var(--main-secondary-color); --mobile-header-search-border-color: var(--main-color); --mobile-cart-item-color: var(--main-font-color); --mobile-cart-action-color: var(--main-color); /* footer colors */ --footer-bg-color: var(--main-footer-background-color); --footer-line-color: #e0e6e8; --footer-text-color: var(--main-font-secondary-color); --footer-title-color: var(--main-footer-title-color); --footer-separator-line-color: var(--main-card-bg-color); --footer-item-color: var(--main-secondary-color); /* contacts colors */ --contacts-card-bg-color: var(--main-card-bg-color); --contacts-card-sub-font-color: var(--main-border-color); /* product card colors */ --product-card-bg-color: var(--main-card-bg-color); --product-card-main-text-color: var(--main-font-color); --product-card-secondary-text-color: var(--main-border-color); /* card colors */ --card-bg-color: var(--main-secondary-color); --card-item-primary-color: var(--main-font-color); --card-item-secondary-color: var(--main-color); --card-action-primary-color: var(--main-color); --card-action-secondary-color: var(--main-secondary-color); --card-font-color: var(--main-font-color); --card-font-color-70: rgba(0, 0, 0, 0.7); /* modal card colors and childModal.vue component */ --modal-card-bg-color: var(--main-bg-color); --modal-card-item-primary-color: var(--main-font-color); --modal-card-item-secondary-color: var(--main-secondary-color:);/*?:?*/ --modal-card-action-primary-color: var(--main-color); --modal-card-action-secondary-color: var(--main-secondary-color); /* dropdown cards colors */ --dropdown-card-bg-color: var(--main-bg-color); --dropdown-card-action-color: var(--main-color); --dropdown-card-item-color: var(--main-font-color); --dropdown-card-button-bg-color: var(--main-color); --dropdown-card-button-font-color: var(--main-secondary-color); /* sidebars colors */ --sidebar-bg-color: var(--main-secondary-color); --sidebar-main-text-color: var(--main-font-color); --sidebar-item-color: var(--main-font-color); --sidebar-button-bg-color: var(--main-bg-color); --sidebar-button-font-color: var(--main-secondary-color); /* basket colors */ --basket-font-color: var(--main-font-color); --basket-item-description-color: var(--main-overlay-color); --basket-empty-body-title-color: var(--main-font-color); --basket-empty-body-subtitle-color: var(--main-border-color); /* slider colors */ --slider-action-primary-color: var(--main-color); --slider-action-secondary-color: var(--main-font-color); /* special colors */ --action-item-primary-color: var(--main-color); --action-item-secondary-color: var(--main-secondary-color); --input-font-color: var(--main-font-color); --search-font-color: var(--main-font-color); --block-title-color: var(--main-font-color); --checkbox-color: var(--main-color); /* profile colors */ --profile-bg-content: var(--main-card-bg-color); --profile-active-link: var(--main-default-button-color); --profile-main-font-color: var(--main-font-color); --profile-aprove-color: var(--main-aprove-color); --profile-main-error-color: var(--main-error-color); /* app-input */ --input-default-color: var(--main-border-color); --input-active-color: var(--main-font-color); --input-disabled-color: var(--main-disabled-bg-color); --input-disabled-inner-color: var(--main-disabled-inner-color); --input-error-color: var(--main-error-new-color); /* app-select */ --select-main-color: var(--main-border-color); --select-font-color: var(--main-font-color); --select-list-bg-color: var(--main-card-bg-color); --select-list-hovered-color: var(--main-bg-color); --select-active-item-checkmark: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.16797 9.16634L9.16797 14.1663L17.5013 5.83301' stroke='%23333333' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); /* app-radio-input */ --input-radio-default-color: var(--main-border-color); --input-radio-active-color: var(--main-font-color); --input-radio-disabled-color: var(--main-disabled-bg-color); /* app-button */ --button-bg-color: var(--main-default-button-color); --button-bg-hovered-color: var(--main-secondary-color); --button-bg-active-color: var(--main-active-button-color); --button-bg-disabled-color: var(--main-disabled-bg-color); --button-font-color: var(--main-secondary-color); --button-font-hovered-color: var(--main-font-color); --button-font-active-color: var(--main-secondary-color); --button-font-disabled-color: var(--main-border-color); /* app-counter */ --counter-border-color: var(--main-font-color); --counter-default-color: var(--main-default-button-color); --counter-active-color: var(--main-active-button-color); --counter-icon-hovered-color: var(--main-font-secondary-color); /* shadows */ --shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); --shadow-card: 10px 10px 0px 0px rgba(51,51,51,0.4); --shadow-hover: 0px 10px 10px 0px rgba(230, 230, 230, 0.656); --slide-overlay: linear-gradient( to bottom, rgba(237, 237, 237, 0) 0%, var(--main-bg-color) 100% ); --image-ellipsis: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .8) 60%, var(--main-bg-color) 100% ); --image-bg-color: linear-gradient( 315deg, hsl(37.24137931034476, 61.7021276596%, 40%) 0%, var(--main-bg-color) 74% ); /* special variables */ --breadcrumbs-main-color: var(--main-secondary-color); --breadcrumbs-active-color: var(--main-color); --breadcrumbs-divider: '/'; /* skeleton placeholder */ --placeholder-color: #d9d9d9; --placeholder-image: linear-gradient(315deg, #d9d9d9 0%, #f6f2f2 74%); --skeleton-bg: var(--main-border-color); --skeleton-gradient: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%); /* overlay */ --main-overlay-color: var(--main-shadow-basic-color); /* tags */ --hit-bg-color: #EF8B18; --hit-border-color: var(--hit-bg-color); /* profile order */ --order-font-color: var(--main-font-primary-color); --order-hover-color: rgba(51,51,51,0.05); /* profile bonus */ --bonus-font-primary-color: var(--main-border-color); --bonus-font-secondary-color: var(--main-font-primary-color); --bonus-bg-color: var(--main-font-primary-color); --bonus-border-color: var(--main-border-color); /* datepicker colors */ --datepicker-active-color: var(--main-default-button-color); --datepicker-hover-color: var(--main-shadow-basic-color); } .swiper-slide__block[data-v-1a6afa8b] { position: relative; width: 100%; height: 100%; } .swiper-slide__description-align-right[data-v-1a6afa8b] { align-items: flex-end; left: 40%; } .swiper-slide__description-align-right p[data-v-1a6afa8b], .swiper-slide__description-align-right h3[data-v-1a6afa8b] { text-align: right; } .swiper-slide__description-align-bottom[data-v-1a6afa8b] { bottom: 0; } .swiper-slide__description[data-v-1a6afa8b] { box-sizing: border-box; position: absolute; display: flex; align-items: flex-start; justify-content: space-between; width: 60%; max-height: 100%; height: 100%; flex-direction: column; padding: 91px 130px; z-index: 10; } .swiper-slide__description h3[data-v-1a6afa8b] { flex-shrink: 0; margin: 0; max-width: 150%; text-align: left; word-wrap: break-word; overflow: hidden; line-height: 97px; font-size: 80px; font-weight: 700; } .swiper-slide__description p[data-v-1a6afa8b] { max-width: 100%; word-wrap: break-word; text-align: left; overflow: hidden; font-weight: 400; font-size: 24px; line-height: 29px; } .swiper-slide__button[data-v-1a6afa8b] { display: flex; align-items: center; justify-content: center; border-radius: 25px; font-weight: 500; line-height: 19px; font-size: 16px; text-align: center; width: 197px; height: 45px; text-decoration: none; color: #F2F2F2; background: #EF4618; } .swiper-slide__button[data-v-1a6afa8b]:hover { cursor: pointer; background-color: #F7967D; } .swiper-slide__button[data-v-1a6afa8b]:active { background: #9B2708; } .swiper-slide__img[data-v-1a6afa8b] { position: absolute; right: 0; height: 100%; } .swiper-slide__img img[data-v-1a6afa8b] { height: 100%; border-radius: 15px; border-radius: var(--border-radius-small); -o-object-fit: cover; object-fit: cover; } @media (max-width: 768px) { .swiper-slide__img[data-v-1a6afa8b] { padding-right: 45px; } } .swiper[data-v-1a6afa8b] { height: 500px; width: 100%; } .swiper-slide[data-v-1a6afa8b] { height: 350px; width: 100%; display: flex; align-items: center; font-weight: bold; overflow: hidden; } .swiper-pagination[data-v-1a6afa8b] .swiper-pagination-bullet-active { background-color: #FDC975; background-color: var(--main-color); } .swiper-arrow[data-v-1a6afa8b] { color: #FDC975; color: var(--main-color); opacity:.3; transition: 0.3s; } .swiper-arrow[data-v-1a6afa8b]:hover { color: hsl(37.05882352941177, 97.1428571429%, 82.5490196078%); color: hsl(37.05882352941177, 97.1428571429%, 82.5490196078%); opacity:1; } @media (max-width: 1680px) { .swiper-slide__description[data-v-1a6afa8b] { padding: 91px 100px; } } @media (max-width: 1440px) { .swiper-slide[data-v-1a6afa8b] { height: 333px; } .swiper-slide__description[data-v-1a6afa8b] { padding: 91px 50px; } .swiper[data-v-1a6afa8b] { height: 500px; } } @media (max-width: 1200px) { .swiper-slide[data-v-1a6afa8b] { height: 274px; } .swiper[data-v-1a6afa8b] { height: 400px; width: 100%; } } @media (max-width: 990px) { .swiper-slide[data-v-1a6afa8b] { height: 210px; } .swiper[data-v-1a6afa8b] { height: 300px; width: 100%; } .swiper-slide__description[data-v-1a6afa8b] { padding: 30px 12px 21px 12px; } .swiper-slide__description h3[data-v-1a6afa8b] { font-size: 30px; } .swiper-slide__description p[data-v-1a6afa8b] { font-size: 14px; } } @media (max-width: 768px) { .swiper-slide[data-v-1a6afa8b] { height: 155px; } .swiper-slide__description p[data-v-1a6afa8b] { line-height: 1.5em; } } @media (max-width: 600px) { .swiper-slide[data-v-1a6afa8b] { height: 148px; } .swiper-slide__description h3[data-v-1a6afa8b] { font-size: 24px; line-height: 1.2; } .swiper-slide__description p[data-v-1a6afa8b] { font-size: 16px; line-height: 1.2; margin: 0; } .swiper[data-v-1a6afa8b] { height: 230px; } .swiper-slide__button[data-v-1a6afa8b] { padding: 0 20px; min-width: auto; width: auto; height: 33px; line-height: 17px; font-size: 14px; } } @media (max-width: 414px) { .swiper-slide[data-v-1a6afa8b] { height: 100px; } .swiper-slide__description h3[data-v-1a6afa8b] { font-size: 18px; } .swiper[data-v-1a6afa8b] { height: 200px; } .swiper-slide__description p[data-v-1a6afa8b] { font-size: 10px; } } /** * Swiper 5.4.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: June 16, 2020 */ @font-face { font-family: 'swiper-icons'; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } /* 3D Effects */ .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(44px / 44 * 27); width: calc(var(--swiper-navigation-size) / 44 * 27); height: 44px; height: var(--swiper-navigation-size); margin-top: calc(-1 * 44px / 2); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-theme-color); color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: 44px; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; -moz-font-feature-settings: normal, ; font-feature-settings: normal, ; font-variant: normal; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-theme-color); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-theme-color); background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s infinite linear; box-sizing: border-box; border: 4px solid var(--swiper-theme-color); border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } :root { /* basic borders */ --border-radius-small: 15px; /* border-radius: 15px */ --border-radius-medium: 20px; /* border-radius: 20px */ --border-radius-large: 25px; /* border-radius: 20px */ --border: 1px solid; /* border, но без цвета */ --border-bold: 2px solid; /* border 2px, но без цвета */ --border-radius-only-top-small: 15px 15px 0 0; /* скругление верха контейнера */ /* basic colors*/ --main-color: #FDC975; --main-secondary-color: #FFFFFF; --main-font-color: #000000; --main-font-primary-color: #EF4618; --main-font-secondary-color: #F1F1F1; --main-bg-color: #F6EBD9; --main-bg-rgba-color: rgba(246, 235, 217, 0.6); --main-bg-primary-color: #EBE6E6; --main-error-color: #EC2427; --main-error-new-color: #B8320D; --main-default-button-color: #333333; --main-active-button-color: #262626; --main-disabled-bg-color: #E6E6E6; --main-disabled-inner-color: #B3B3B3; --main-border-color: #808080; --main-aprove-color: #8BC5B6; --main-card-bg-color: #FFFAF1; --main-card-description-color: undefined; --main-shadow-basic-color: rgba(51, 51, 51, 0.5); --main-footer-background-color: #271D17; --main-footer-title-color: #FDC975; /* header colors */ --header-nav-bg-color: var(--main-bg-rgba-color); --header-nav-item-color: var(--main-font-color); --header-bg-color: var(--main-bg-color); --header-nav-link-color: var(--main-color); --header-item-color: var(--main-color); --header-search-bg-color: var(--main-bg-color); --header-search-font-color: var(--main-font-color); --header-search-border-color: var(--main-color); /* mobile header colors */ --mobile-header-bg-color: var(--main-bg-rgba-color); --mobile-header-item-color: var(--main-font-color); --mobile-header-item-secondary-color: var(--main-color); --mobile-header-search-bg-color: var(--main-bg-color); --mobile-header-search-font-color: var(--main-secondary-color); --mobile-header-search-border-color: var(--main-color); --mobile-cart-item-color: var(--main-font-color); --mobile-cart-action-color: var(--main-color); /* footer colors */ --footer-bg-color: var(--main-footer-background-color); --footer-line-color: #e0e6e8; --footer-text-color: var(--main-font-secondary-color); --footer-title-color: var(--main-footer-title-color); --footer-separator-line-color: var(--main-card-bg-color); --footer-item-color: var(--main-secondary-color); /* contacts colors */ --contacts-card-bg-color: var(--main-card-bg-color); --contacts-card-sub-font-color: var(--main-border-color); /* product card colors */ --product-card-bg-color: var(--main-card-bg-color); --product-card-main-text-color: var(--main-font-color); --product-card-secondary-text-color: var(--main-border-color); /* card colors */ --card-bg-color: var(--main-secondary-color); --card-item-primary-color: var(--main-font-color); --card-item-secondary-color: var(--main-color); --card-action-primary-color: var(--main-color); --card-action-secondary-color: var(--main-secondary-color); --card-font-color: var(--main-font-color); --card-font-color-70: rgba(0, 0, 0, 0.7); /* modal card colors and childModal.vue component */ --modal-card-bg-color: var(--main-bg-color); --modal-card-item-primary-color: var(--main-font-color); --modal-card-item-secondary-color: var(--main-secondary-color:);/*?:?*/ --modal-card-action-primary-color: var(--main-color); --modal-card-action-secondary-color: var(--main-secondary-color); /* dropdown cards colors */ --dropdown-card-bg-color: var(--main-bg-color); --dropdown-card-action-color: var(--main-color); --dropdown-card-item-color: var(--main-font-color); --dropdown-card-button-bg-color: var(--main-color); --dropdown-card-button-font-color: var(--main-secondary-color); /* sidebars colors */ --sidebar-bg-color: var(--main-secondary-color); --sidebar-main-text-color: var(--main-font-color); --sidebar-item-color: var(--main-font-color); --sidebar-button-bg-color: var(--main-bg-color); --sidebar-button-font-color: var(--main-secondary-color); /* basket colors */ --basket-font-color: var(--main-font-color); --basket-item-description-color: var(--main-overlay-color); --basket-empty-body-title-color: var(--main-font-color); --basket-empty-body-subtitle-color: var(--main-border-color); /* slider colors */ --slider-action-primary-color: var(--main-color); --slider-action-secondary-color: var(--main-font-color); /* special colors */ --action-item-primary-color: var(--main-color); --action-item-secondary-color: var(--main-secondary-color); --input-font-color: var(--main-font-color); --search-font-color: var(--main-font-color); --block-title-color: var(--main-font-color); --checkbox-color: var(--main-color); /* profile colors */ --profile-bg-content: var(--main-card-bg-color); --profile-active-link: var(--main-default-button-color); --profile-main-font-color: var(--main-font-color); --profile-aprove-color: var(--main-aprove-color); --profile-main-error-color: var(--main-error-color); /* app-input */ --input-default-color: var(--main-border-color); --input-active-color: var(--main-font-color); --input-disabled-color: var(--main-disabled-bg-color); --input-disabled-inner-color: var(--main-disabled-inner-color); --input-error-color: var(--main-error-new-color); /* app-select */ --select-main-color: var(--main-border-color); --select-font-color: var(--main-font-color); --select-list-bg-color: var(--main-card-bg-color); --select-list-hovered-color: var(--main-bg-color); --select-active-item-checkmark: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.16797 9.16634L9.16797 14.1663L17.5013 5.83301' stroke='%23333333' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); /* app-radio-input */ --input-radio-default-color: var(--main-border-color); --input-radio-active-color: var(--main-font-color); --input-radio-disabled-color: var(--main-disabled-bg-color); /* app-button */ --button-bg-color: var(--main-default-button-color); --button-bg-hovered-color: var(--main-secondary-color); --button-bg-active-color: var(--main-active-button-color); --button-bg-disabled-color: var(--main-disabled-bg-color); --button-font-color: var(--main-secondary-color); --button-font-hovered-color: var(--main-font-color); --button-font-active-color: var(--main-secondary-color); --button-font-disabled-color: var(--main-border-color); /* app-counter */ --counter-border-color: var(--main-font-color); --counter-default-color: var(--main-default-button-color); --counter-active-color: var(--main-active-button-color); --counter-icon-hovered-color: var(--main-font-secondary-color); /* shadows */ --shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); --shadow-card: 10px 10px 0px 0px rgba(51,51,51,0.4); --shadow-hover: 0px 10px 10px 0px rgba(230, 230, 230, 0.656); --slide-overlay: linear-gradient( to bottom, rgba(237, 237, 237, 0) 0%, var(--main-bg-color) 100% ); --image-ellipsis: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .8) 60%, var(--main-bg-color) 100% ); --image-bg-color: linear-gradient( 315deg, hsl(37.24137931034476, 61.7021276596%, 40%) 0%, var(--main-bg-color) 74% ); /* special variables */ --breadcrumbs-main-color: var(--main-secondary-color); --breadcrumbs-active-color: var(--main-color); --breadcrumbs-divider: '/'; /* skeleton placeholder */ --placeholder-color: #d9d9d9; --placeholder-image: linear-gradient(315deg, #d9d9d9 0%, #f6f2f2 74%); --skeleton-bg: var(--main-border-color); --skeleton-gradient: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%); /* overlay */ --main-overlay-color: var(--main-shadow-basic-color); /* tags */ --hit-bg-color: #EF8B18; --hit-border-color: var(--hit-bg-color); /* profile order */ --order-font-color: var(--main-font-primary-color); --order-hover-color: rgba(51,51,51,0.05); /* profile bonus */ --bonus-font-primary-color: var(--main-border-color); --bonus-font-secondary-color: var(--main-font-primary-color); --bonus-bg-color: var(--main-font-primary-color); --bonus-border-color: var(--main-border-color); /* datepicker colors */ --datepicker-active-color: var(--main-default-button-color); --datepicker-hover-color: var(--main-shadow-basic-color); } /* twig views */ .checkout { display: flex; justify-content: space-between; grid-column-gap: 70px; margin-top: 28px; margin-bottom: 100px; } .checkout__skeleton { width: 100%; height: 800px; border-radius: 15px; border-radius: var(--border-radius-small); } @media (max-width: 1200px) { .checkout .client-data .client-data__form { margin: 0; } .checkout .client-data .client-data__form-submit { text-align: center; } .checkout .basket-price { flex-direction: column; } .checkout .basket { display: none; } } .client-data { width: 100%; display: flex; flex-direction: column; align-items: flex-start; } .client-data__title { font-size: 32px; font-weight: 700; color: #000000; color: var(--main-font-color); line-height: 39px; margin: 0 0 30px; } @media (max-width: 768px) { .client-data__title { font-size: 24px; line-height: 29px } } .client-data__form { display: grid; background-color: #FFFFFF; background-color: var(--card-bg-color); width: 100%; padding: 50px 88px; border-radius: 15px; border-radius: var(--border-radius-small); box-sizing: border-box; grid-row-gap: 30px; } @media (max-width: 768px) { .client-data__form { padding: 50px 20px } } .client-data__form .app-input, .client-data__form .app-select, .client-data__form .app-button { width: 100%; } .client-data__form .app-checkbox { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-left: 18px; } .client-data__form-radio-list { display: flex; grid-column-gap: 20px; margin-left: 20px; } @media (max-width: 768px) { .client-data__form-radio-list { margin-left: 0 } } .client-data__form-wrap_double { display: grid; grid-template-columns: 1fr 1fr; align-items: end; grid-column-gap: 20px; grid-row-gap: 30px; } @media (max-width: 768px) { .client-data__form-wrap_double { grid-template-columns: 1fr } } .client-data__form-wrap_double .app-checkbox { margin-left: 20px; } .client-data__form-wrap_double .show-map-btn { height: 50px; } .client-data__form-wrap_quadruple { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; grid-column-gap: 20px; grid-row-gap: 30px; } @media (max-width: 768px) { .client-data__form-wrap_quadruple { grid-template-columns: repeat(2, 1fr) } } .client-data__form-title { font-weight: 500; font-size: 24px; line-height: 29px; margin: 0; color: #000000; color: var(--main-font-color); } .client-data__form .scroll-container { display: flex; align-items: center; grid-column-gap: 20px; } .client-data__form .scroll-container .payment-type-btn { cursor: pointer; width: 152px; height: 152px; padding: 15px 20px 15px 20px; border-radius: 15px; border-radius: var(--border-radius-small); border: 2px solid #808080; border: 2px solid var(--main-border-color); box-sizing: border-box; display: flex; flex-direction: column; grid-row-gap: 15px; flex-shrink: 0; text-align: left; transition: .2s ease; } .client-data__form .scroll-container .payment-type-btn:disabled { background-color: #E6E6E6; background-color: var(--main-disabled-bg-color); border: 2px solid #E6E6E6; border: var(--border-bold) var(--main-disabled-bg-color); cursor: default; } .client-data__form .scroll-container .payment-type-btn:hover:not(:disabled), .client-data__form .scroll-container .payment-type-btn:focus, .client-data__form .scroll-container .payment-type-btn.active { border: 2px solid #8BC5B6; border: var(--border-bold) var(--main-aprove-color); } .client-data__form .scroll-container .payment-type-btn__title { font-weight: 400; font-size: 16px; line-height: 19px; color: #000000; color: var(--main-font-color); margin: 0; } .client-data__form .scroll-container .payment-type-btn__subtitle { font-weight: 400; font-size: 16px; line-height: 16px; color: #808080; color: var(--main-border-color); } .client-data__form-submit { width: 100%; text-align: right; } .client-data__form-submit .app-button { height: 50px; } .client-data__form-submit-approve { font-size: 14px; line-height: 17px; font-weight: 400; color: #808080; color: var(--main-border-color); margin:10px 0 0; } .client-data__form-submit-link { color: #EF4618; color: var(--main-font-primary-color); text-decoration: none; font-weight: 400; } .basket { max-width: 365px; width: 100%; } .basket__title { font-weight: 500; color: #000000; color: var(--main-font-color); font-size: 24px; line-height: 29px; margin: 0 0 40px; } .basket__body { display: flex; flex-direction: column; max-height: 860px; overflow-y: auto; } .basket__body-list { display: flex; flex-direction: column; grid-row-gap: 29px; } .basket__body-list .basket-item { display: flex; grid-column-gap: 20px; } .basket__body-list .basket-item__text_main { font-weight: 500; font-size: 16px; line-height: 19px; color: #000000; color: var(--sidebar-main-text-color); margin: 0; } .basket__body-list .basket-item__text_secondary { font-weight: 400; font-size: 14px; line-height: 17px; color: rgba(51, 51, 51, 0.5); color: var(--basket-item-description-color); margin: 0; } .basket__body-list .basket-item__img { position: relative; display: flex; align-items: center; justify-content: center; background-color: #d9d9d9; background-color: var(--placeholder-color); height: 88px; width: 88px; border-radius: 15px; border-radius: var(--border-radius-small); } .basket__body-list .basket-item__img img, .basket__body-list .basket-item__img .dropdown-card__img--none { height: 88px; width: 88px; border-radius: 15px; border-radius: var(--border-radius-small); } .basket__body-list .basket-item__info { display: flex; flex-direction: column; grid-row-gap: 8px; width: 100%; } .basket__body-list .basket-item__info-header { display: flex; justify-content: space-between; grid-column-gap: 8px; font-weight: 500; font-size: 16px; line-height: 19px; } .basket__body-list .basket-item__info-header-btn { align-self: flex-start; color: #000000; color: var(--sidebar-main-text-color); cursor: pointer; } .basket__body-list .basket-item__info-modifiers { text-transform: lowercase; } .basket__body-list .basket-item__info-result { display: flex; justify-content: space-between; align-items: center; grid-column-gap: 4px; } .basket__body-list .basket-item__info-result .app-counter { height: 35px; } .basket-price { display: flex; justify-content: space-between; grid-column-gap: 30px; align-items: flex-end; } .basket-price__inputs, .basket-price__total { width: 100%; } .basket-price .app-input { position: relative; } .basket-price .app-input .app-button { position: absolute; right: 0; bottom: 14px; max-height: 25px; max-width: 105px; padding: 4px 15px; } .basket-price__delivery, .basket-price__reward, .basket-price__result { display: flex; align-items: center; justify-content: space-between; width: 100%; grid-column-gap: 4px; margin-bottom: 14px; } .basket-price__delivery { margin-top: 30px; } .basket-price__delivery-title, .basket-price__delivery-count { font-size: 16px; line-height: 19px; color: #000000; color: var(--main-font-color); font-weight: 400; margin: 0; } .basket-price__reward-title { font-weight: 400; font-size: 16px; color: #000000; color: var(--main-font-color); line-height: 17px; margin: 0; } .basket-price__reward-count { border-radius: 25px; background-color: #8BC5B6; background-color: var(--main-aprove-color); color: #F1F1F1; color: var(--main-font-secondary-color); padding: 4px 15px; min-width: 54px; min-height: 25px; box-sizing: border-box; text-align: center; font-size: 14px; line-height: 17px; margin: 0; } .basket-price__result { margin-bottom: 0; } .basket-price__result-title, .basket-price__result-count { font-size: 16px; color: #000000; color: var(--main-font-color); font-weight: 700; line-height: 19px; margin: 0; } .header { width: 100%; z-index: 1; background: #F6EBD9; background: var(--main-bg-color); box-shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); box-shadow: var(--shadow); padding-bottom: 10px; } @media (max-width: 768px) { .header { padding: 12px 0; background: rgba(246, 235, 217, 0.6); background: var(--mobile-header-bg-color) } } .nav { display: flex; flex-flow: column nowrap; font-weight: normal; line-height: 26px; font-size: 16px; letter-spacing: 0.5px; } .nav__upper { display: flex; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; } @media (max-width: 768px) { .nav__upper { display: none } } .nav__left-col { display: flex; flex-direction: column; grid-row-gap: 10px; } .nav__right-col { display: flex; align-items: flex-end; grid-column-gap: 21px; } .nav__right-col_vertical { flex-direction: column; grid-row-gap: 4px; } .nav__company-logo { text-decoration: none; } .nav__company-logo-img { height: 34px; } .nav__company-name { text-decoration: none; font-weight: 700; font-size: 40px; line-height: 48px; color: #000000; color: var(--main-font-color); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .nav__address-schedule { display: flex; grid-column-gap: 10px; } .nav__address { font-weight: 500; color: #808080; color: var(--main-border-color); font-size: 14px; line-height: 15px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0; } .nav__address:hover { color: #000000; color: var(--button-font-hovered-color); } .nav__address-button__loader { border-radius: 15px; border-radius: var(--border-radius-small); width: 100px; height: 16px; } .nav__schedule { font-weight: 500; color: #808080; color: var(--main-border-color); font-size: 14px; line-height: 15px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0; display: flex; grid-column-gap: 5px; } .nav__schedule-icon { height: 15px; } .nav__phone { font-size: 16px; line-height: 19px; color: #000000; color: var(--main-font-color); font-weight: 400; text-decoration: none; } .nav__profile-link, .nav__bonus-link { text-decoration: none; } .nav__profile-button, .nav__bonus-button { display: flex; align-items: center; flex-direction: column; color: #000000; color: var(--main-font-color); font-weight: 500; line-height: 19px; font-size: 16px; padding: 0; } .nav__actions { display: flex; align-items: center; justify-content: space-between; position: relative; } .nav__block--justify-to-start { display: flex; align-items: center; grid-column-gap: 30px; } .nav__profile-button__loader, .nav__bonus-button__loader { width: 110px; height: 40px; border-radius: 20px; border-radius: var(--border-radius-medium); } .nav__block { display: flex; align-items: center; justify-content: space-between; grid-column-gap: 20px; text-transform: none; } .nav__link { text-decoration: none; font-weight: 500; font-size: 16px; line-height: 19px; color: #000000; color: var(--main-font-color); } .nav__link:hover, .nav__link:active { text-decoration: underline; } .nav__link-category { text-decoration: none; font-weight: 400; font-size: 14px; color: #000000; color: var(--main-font-color); } .nav__link-category:hover, .nav__link-category:active { text-decoration: underline; } .nav__wrapper { display: flex; justify-content: space-between; align-items: center; } .nav_sticky { position: -webkit-sticky; position: sticky; top: -1px; z-index: 20; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); background-color: rgba(246, 235, 217, 0.6); background-color: var(--header-nav-bg-color); } .nav_sticky .nav__actions { overflow: hidden; height: 56px; } .nav_sticky .nav__actions_moving-block { display: flex; align-items: center; height: 36px; transition: ease .3s; } .nav_sticky .nav__logo { display: flex; justify-content: center; align-items: center; height: 36px; margin-right: 20px; cursor: pointer; } .nav_sticky .nav__logo img { height: 100%; } .nav_sticky .nav__logo h1 { margin: 0; font-size: 24px; line-height: 1px; font-weight: 700; color: #000000; color: var(--main-font-color); } .nav__loader-cart { width: 152px; height: 40px; border-radius: 20px; border-radius: var(--border-radius-medium); } .nav .app-button { min-width: 152px; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 16px; line-height: 19px; } @media (max-width: 768px) { .nav { display: none } } .nav-mobile { display: none; } @media (max-width: 768px) { .nav-mobile { position: fixed; width: calc(100% - 24px); height: 69px; padding: 0 12px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; background-color: rgba(246, 235, 217, 0.6); background-color: var(--mobile-header-bg-color); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); top: 0 } .nav-mobile__company { display: flex; } .nav-mobile__logo { text-decoration: none; } .nav-mobile__link { text-decoration: none; color: #000000; color: var(--mobile-header-item-color); font-size: 32px; line-height: 1.2; font-weight: 700; } .nav-mobile__sidebar-button { background: none; border: none; color: #000000; color: var(--mobile-header-item-color); outline: none; margin-left: 15px; } } @media (max-width: 575px) { .nav-mobile__sidebar-button { margin-left: 20px; padding: 0; } } .account-form { display: flex; flex-direction: column; grid-row-gap: 30px; } .account-form__title { font-weight: 500; font-size: 24px; line-height: 29px; color: #000000; color: var(--main-font-color); margin: 0 0 0 20px; } .account-form__wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: self-start; grid-column-gap: 20px; } .account-form__wrapper .app-input { width: 100%; } .account-form__wrapper-col { display: flex; flex-direction: column; grid-row-gap: 10px; } .account-form__wrapper-birthday .app-input input{ max-width: 325px; min-width: 156px; width: 100%; text-align: left; } .account-form__gender-title { font-weight: 400; font-size: 16px; color: #000000; color: var(--main-font-color); line-height: 22px; margin: 0 0 10px 20px; } .account-form__gender-radio { display: flex; grid-column-gap: 20px; } .account-form__phone-title { font-weight: 700; font-size: 18px; color: #000000; color: var(--main-font-color); line-height: 22px; margin: 0 0 10px 20px; } .account-form__phone .app-input { position: relative; } .account-form__phone .app-input img { position: absolute; right: 20px; bottom: 14px; width: 20px; height: 20px; } .account-form .app-accordion__btn-text { font-weight: 700; font-size: 18px; line-height: 22px; margin-left: 20px; } .account-form .app-accordion__content { padding-left: 0; } .account-form__send-form { display: flex; align-self: flex-end; grid-column-gap: 3px; max-width: 326px; width: 100%; position: relative; height: 75px; } .account-form__send-form .app-button { height: 50px; width: 100%; } .account-form__send-form-status { font-weight: 400; font-size: 14px; line-height: 19px; -webkit-animation: fadeEffect 1.5s; animation: fadeEffect 1.5s; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; } .account-form__send-form-status_success { color: #8BC5B6; color: var(--main-aprove-color); } .account-form__card-create { border-radius: 15px; border-radius: var(--border-radius-small); padding: 20px 10px; border: 2px solid #808080; border: 2px solid var(--main-border-color); width: 100%; height: 100px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 16px; line-height: 22px; color: #000000; color: var(--main-font-color); } .account-form__card-create:hover { border-color: #8BC5B6; border-color: var(--main-aprove-color); } .account-form__btn-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 20px; grid-row-gap: 30px; margin: 30px 0; } @media (max-width: 1200px) { .account-form__btn-wrapper { grid-template-columns: repeat(2, 1fr); justify-items: stretch; grid-column-gap: 15px; grid-row-gap: 25px; } } @media (max-width: 768px) { .account-form__wrapper { grid-template-columns: repeat(1,1fr); grid-row-gap: 10px; } } @media (max-width: 470px) { .account-form__btn-wrapper { grid-template-columns: repeat(1, 1fr); justify-items: stretch; } .account-form__btn-wrapper .app-card-button__btn-header-title { width: 250px; } } @media (max-width: 390px) { .account-form .app-card-button__btn-header-title { width: 110px; } } @media (max-width: 320px) { .account-form__wrapper .app-input__label { font-size: 12px; } } .profile-bonus__content { display: flex; flex-direction: column; } .profile-bonus__content-img { width: 100px; height: 100px; } .profile-bonus__content-text{ font-size: 20px; color: #808080; color: var(--main-border-color); margin: 10px 0 0 0; } /* Заголовок */ .profile-bonus__wrapper { display: flex; flex-direction: column; grid-row-gap: 10px; } .profile-bonus__company { font-size: 40px; font-weight: 700; line-height: 48px; color: #000000; color: var(--main-font-color); margin: 0; } @media (max-width: 768px) { .profile-bonus__company { font-size: 32px; line-height: 39px } } .profile-bonus__wrap-bonus-count { display: flex; align-items: center; justify-content: space-between; } .profile-bonus__bonus-count { border-radius: 25px; background-color: #EF4618; background-color: var(--bonus-font-secondary-color); color: #F1F1F1; color: var(--main-font-secondary-color); font-size: 20px; padding: 8px 16px; line-height: 24px; min-width: 76px; box-sizing: border-box; display: flex; justify-content: center; } .profile-bonus__bonus-count-text { color: #000000; color: var(--main-font-color); font-size: 16px; line-height: 19px; font-weight: 400; margin: 0; } /* таблица */ .profile-bonus__table { color: #000000; color: var(--main-font-color); } .profile-bonus__table-content { color: #808080; color: var(--main-border-color); display: flex; flex-direction: column; align-items: center; } .profile-bonus__table-title { font-weight: 700; font-size: 18px; line-height: 22px; color: #000000; color: var(--main-font-color); margin: 0 0 30px; } .profile-bonus__table_empty { margin: 100px auto; } .profile-bonus__table-time { font-size: 16px; } .profile-bonus__table-status { font-size: 14px; } .profile-bonus__table-time, .profile-bonus__table-status { line-height: 24px; color: #808080; color: var(--main-border-color); margin: 0; } .profile-bonus__table-bonus { font-weight: 500; font-size: 16px; line-height: 19px; color: #EF4618; color: var(--bonus-font-secondary-color); margin: 10px 0 0 auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .profile-bonus__table-tr { border-bottom: 1px solid #808080; border-bottom: 1px solid var(--main-border-color); display: flex; justify-content: space-between; cursor: pointer; grid-row-gap: 30px; padding: 30px 6px 10px 6px; } @media (max-width: 768px) { .profile-bonus__table-tr { flex-direction: column; padding: 30px 0 20px 0 } } .profile-bonus__table-number, .profile-bonus__table-sum { line-height: 24px; font-weight: 700; margin: 0; } .profile-bonus__table-img { display: flex; flex-wrap: wrap; margin-top: 12px; grid-gap: 10px; } .profile-bonus__table-img div { width: 50px; height: 50px; background-color: #271D17; background-color: var(--main-footer-background-color); } .profile-bonus__table-row { display: flex; flex-direction: column; grid-row-gap: 5px; } .profile-bonus__table-row_ended { align-items: flex-end; } @media (max-width: 768px) { .profile-bonus__table-row_ended { align-items: flex-start; flex-direction: row-reverse; justify-content: space-between } } /* Карточки */ .profile-bonus__cards { display: flex; flex-flow: wrap; grid-row-gap: 30px; grid-column-gap: 20px; margin: 30px auto 50px; max-width: 670px; justify-content: center; } @media (max-width: 768px) { .profile-bonus__cards { margin: 19px 0 50px } } .profile-bonus__card { border: 1px solid #271D17; border: 1px solid var(--main-footer-background-color); background-color: #FFFAF1; background-color: var(--main-card-bg-color); border-radius: 15px; padding: 20px; max-width: 325px; min-height: 249px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; } .profile-bonus__card-top { display: flex; justify-content: space-between; align-items: center; } .profile-bonus__card-title { font-size: 24px; font-weight: 400; color: #000000; color: var(--main-font-color); line-height: 29px; margin: 0; } @media (max-width: 768px) { .profile-bonus__card-title { font-size: 20px } } .profile-bonus__card-percent { font-weight: 700; font-size: 24px; padding: 20px 0; line-height: 29px; margin: 0; color: #000000; color: var(--main-font-color); } @media (max-width: 1200px) { .profile-bonus__card-percent { padding: 0 } } .profile-bonus__card-img { width: 100px; height: 70px; display: flex; justify-content: flex-end; overflow: hidden; } .profile-bonus__card-img img { height: 100%; } .profile-bonus__card-description { padding-bottom: 15px; font-weight: 400; font-size: 16px; margin: 0; line-height: 19px; color: #000000; color: var(--main-font-color); } .user-order__content { border-radius: 15px; background-color: #FFFAF1; background-color: var(--main-card-bg-color); padding: 50px 88px; margin-top: 100px; margin-bottom: 100px; } @media (max-width: 1200px) { .user-order__content { padding: 28px 20px 50px 20px } } @media (max-width: 600px) { .user-order__content { padding: 28px 12px 50px 12px; margin-bottom: 70px } } .user-order__content-wrapper { display: flex; justify-content: space-between; } @media (max-width: 768px) { .user-order__content-wrapper { grid-gap: 44px; gap: 44px } } @media (max-width: 370px) { .user-order__content-wrapper { grid-gap: 20px; gap: 20px } } .user-order__content-inner { display: flex; flex-direction: column; grid-row-gap: 10px; } @media (max-width: 768px) { .user-order__content-inner { grid-row-gap: 5px } } .user-order__content-title, .user-order__content-price { font-size: 24px; font-weight: 500; line-height: 29px; margin: 0; } @media (max-width: 991px) { .user-order__content-title, .user-order__content-price { font-size: 20px } } @media (max-width: 768px) { .user-order__content-title, .user-order__content-price { font-size: 16px; font-weight: 700; line-height: 24px } } @media (max-width: 370px) { .user-order__content-title, .user-order__content-price { font-size: 14px; line-height: 14px } } .user-order__content-time { font-size: 16px; font-weight: 400; color: #808080; color: var(--main-border-color); margin: 0; line-height: 19px; } @media (max-width: 370px) { .user-order__content-time { font-size: 14px } } .user-order__content-container { margin: 30px 0 50px; display: flex; justify-content: space-between; } @media (max-width: 768px) { .user-order__content-container { margin: 30px 0 } } .user-order__content-address { display: flex; flex-direction: column; grid-row-gap: 5px; } .user-order__content-address-title { font-size: 12px; line-height: 12px; color: #808080; color: var(--main-border-color); margin: 0; } .user-order__content-address-subtitle { font-weight: 400; font-size: 16px; color: #000000; color: var(--main-font-color); margin: 0; line-height: 18px; } @media (max-width: 370px) { .user-order__content-address-subtitle { font-size: 14px } } .user-order__content-detail-order { font-weight: 500; font-size: 16px; color: #000000; color: var(--main-font-color); margin: 0; line-height: 18px; } @media (max-width: 370px) { .user-order__content-detail-order { margin: 0 } } .user-order__table-button-mobile { display: none; } .user-order__table-button-mobile:hover { color: var(--main-hover-button-color); } @media (max-width: 768px) { .user-order__table-button-mobile { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; color: #EF4618; color: var(--order-font-color); text-decoration: none; font-size: 20px; font-weight: 500; line-height: 24px; margin: 30px auto 0 auto } } .user-order__table-button { font-size: 16px; line-height: 19px; color: #EF4618; color: var(--order-font-color); text-decoration: none; font-weight: 500; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin: auto 0 0 0; } .user-order__table-button:hover { color: var(--main-hover-button-color); } @media (max-width: 768px) { .user-order__table-button { display: none } } .user-order__table-td { display: flex; grid-column-gap: 10px; } @media (max-width: 768px) { ..user-order__table-td:last-child { align-items: normal } } .user-order__table-tr { border-bottom: 1px solid #808080; border-bottom: 1px solid var(--main-border-color); display: flex; justify-content: space-between; padding: 30px 0 10px 6px; } @media (max-width: 768px) { .user-order__table-tr { padding: 30px 0 20px 6px } } .user-order__table-img div { width: 50px; height: 50px; background-color: #808080; background-color: var(--main-border-color); } .user-order__table-name-count { display: flex; grid-row-gap: 3px; flex-direction: column; } .user-order__table-count { font-weight: 400; font-size: 12px; color: #808080; color: var(--main-border-color); margin: 0; line-height: 14px; } .user-order__table-product-name { font-size: 12px; font-weight: 400; color: #000000; color: var(--main-font-color); margin: 0; line-height: 14px; } .user-order__table-price { font-weight: 400; font-size: 16px; color: #000000; color: var(--main-font-color); margin: 0; line-height: 16px; } .user-orders__content { display: flex; flex-direction: column; min-height: 400px; } .user-orders__content-title { font-weight: 500; line-height: 29px; margin: 0 0 30px; font-size: 24px; } .user-orders__content-text { font-size: 20px; color: #808080; color: var(--main-border-color); margin: 10px 0 0 0; } .user-orders__content-img { width: 100px; height: 100px; } .user-orders__table { color: #000000; color: var(--main-font-color); } .user-orders__table_empty { margin: auto; } .user-orders__table-time { font-size: 16px; } .user-orders__table-status { font-size: 14px; } .user-orders__table-time, .user-orders__table-status { line-height: 24px; color: #808080; color: var(--main-border-color); margin: 0; } .user-orders__table-tr { border-bottom: 1px solid #808080; border-bottom: 1px solid var(--main-border-color); display: flex; justify-content: space-between; cursor: pointer; grid-row-gap: 30px; padding: 6px 6px 10px 6px; transition: .4s ease; } @media (max-width: 768px) { .user-orders__table-tr { flex-direction: column; padding-bottom: 30px } } .user-orders__table-tr:hover { background-color: rgba(51,51,51,0.05); background-color: var(--order-hover-color); border-radius: 15px; } .user-orders__table-number, .user-orders__table-sum { line-height: 24px; font-weight: 700; margin: 0; } .user-orders__table-img { display: flex; flex-wrap: wrap; margin-top: 12px; grid-gap: 10px; } .user-orders__table-img div { width: 50px; height: 50px; background-color: #271D17; background-color: var(--main-footer-background-color); } .user-orders__table-button { display: block; margin-top: 12px; color: #EF4618; color: var(--order-font-color); text-decoration: none; font-size: 16px; line-height: 24px; font-weight: 500; } @media (max-width: 768px) { .user-orders__table-button { margin: 20px auto 0 auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: 500; font-size: 20px; line-height: 24px } } .user-orders__table-row { display: flex; flex-direction: column; grid-row-gap: 5px; } .user-orders__table-row_ended { align-items: flex-end; } @media (max-width: 768px) { .user-orders__table-row_ended { align-items: flex-start; flex-direction: row-reverse; justify-content: space-between } } .user-orders__table-content { color: #808080; color: var(--main-border-color); display: flex; flex-direction: column; align-items: center; } /* profile */ .profile__title { font-weight: 700; font-size: 32px; line-height: 39px; color: #000000; color: var(--profile-main-font-color); margin: 0 0 30px 0; } .profile__body { display: grid; grid-template-columns: 200px 1fr; grid-column-gap: 16px; grid-row-gap: 30px; } @media (max-width: 1200px) { .profile__body { grid-template-columns: 150px auto } } @media (max-width: 768px) { .profile__body { grid-template-columns: 1fr } } .profile__body-skeleton { border-radius: 15px; border-radius: var(--border-radius-small); height: 848px; max-width: 850px; box-sizing: border-box; } @media (max-width: 1200px) { .profile__body-skeleton { max-width: 710px } } .profile__navigation { display: flex; flex-direction: column; align-items: flex-start; grid-row-gap: 10px; padding-top: 50px; } @media (max-width: 1200px) { .profile__navigation { padding-top: 28px } } @media (max-width: 768px) { .profile__navigation { padding-top: 0 } } .profile__navigation-tab, .profile__navigation-btn { color: #000000; color: var(--main-font-color); font-weight: 400; font-size: 16px; line-height: 19px; padding: 0; transition: ease .1s; text-decoration: none; } .profile__navigation-tab_active, .profile__navigation-tab:hover, .profile__navigation-btn_active, .profile__navigation-btn:hover { font-weight: 700; color: #333333; color: var(--profile-active-link); } .profile__content { background-color: #FFFAF1; background-color: var(--profile-bg-content); border-radius: 15px; border-radius: var(--border-radius-small); min-height: 110px; padding: 50px 88px; max-width: 850px; box-sizing: border-box; } @media (max-width: 1200px) { .profile__content { padding: 28px 20px 50px 20px; max-width: 710px } } @media (max-width: 600px) { .profile__content { padding: 28px 12px 50px 12px } } .profile__content-item { display: none; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; } /* модалка в профиле */ .access-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 25; display: none; } .access-modal__background { background: rgba(51, 51, 51, 0.5); background: var(--main-overlay-color); position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; cursor: pointer; } .access-modal__container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 40px; z-index: 100; } .access-modal__content { display: flex; align-items: center; justify-content: center; flex-direction: column; background: #FFFAF1; background: var(--main-card-bg-color); border-radius: 15px; padding: 50px; } @media (max-width: 768px) { .access-modal__content { padding: 30px } } .access-modal__group-btns { display: flex; margin-top: 20px; grid-column-gap: 30px; } .access-modal__group-btns .app-button { width: 100px; } .access-modal__text { font-weight: 700; font-size: 18px; text-align: center; line-height:21px; } .access-modal__close-style { position: absolute; top: 15px; right: -15px; cursor: pointer; } .access-modal__close-style::before, .access-modal__close-style::after { content: ''; position: absolute; height: 4px; width: 25px; top: 50%; left: 0; background: #FFFFFF; background: var(--main-secondary-color); border-radius: 5px; } .access-modal__close-style::before { transform: rotate(45deg); } .access-modal__close-style::after { transform: rotate(-45deg); } @media (max-width: 768px) { .access-modal__close-style { top: -20px; right: 25px } } .feedback__title { font-size: 32px; font-weight: 700; margin: 0; line-height: 39px; } .feedback__wrapper { display: flex; flex-direction: row; justify-content: center; margin: 50px 0 100px; grid-gap: 85px; gap: 85px; } .feedback__wrapper-form, .feedback__wrapper-form-skeleton { display: flex; flex-flow: column nowrap; align-items: center; max-width: 554px; width: 100%; border-radius: 15px; } .feedback__form, .feedback__form-skeleton { display: flex; flex-flow: column nowrap; background: #FFFFFF; background: var(--card-bg-color); border-radius: 15px; box-sizing: border-box; padding: 50px; width: 100%; } .feedback__form-title, .feedback__form-skeleton-title { font-size: 24px; font-weight: 500; line-height: 29px; color: #000000; color: var(--main-font-color); margin: 0 0 10px 20px; } .feedback__form .app-input, .feedback__form-skeleton .app-input { margin-bottom: 20px; } .feedback__form .app-button, .feedback__form-skeleton .app-button { max-width: 325px; min-height: 50px; width: 100%; margin-top: 30px; margin-left: auto; } .feedback__form .app-textarea__label, .feedback__form-skeleton .app-textarea__label { white-space: unset; } @media (max-width: 1440px) { .feedback__form { width: 100%; } } @media (max-width: 1200px) { .feedback__wrapper { flex-direction: column; align-items: center; } .feedback__wrapper-form-skeleton { height: 600px; } .feedback__img { display: none; } } @media (max-width: 768px) { .feedback__title { font-size: 24px; line-height: 29px; margin-top: 30px; } .feedback__wrapper { margin: 30px 0 70px; } .feedback__form { padding: 30px 20px 50px; } .feedback__form .app-button { max-width: none; } } @media (max-width: 480px) { .feedback__form { min-width: 250px; } } .contacts { display: flex; flex-direction: column; grid-row-gap: 50px; } .contacts__title { font-size: 32px; font-weight: 700; margin: 30px 0 0; } .contacts .scroll-container { display: flex; grid-column-gap: 20px; overflow-x: auto; } .contacts .scroll-container .fake-card { height: 330px; width: 305px; } .contacts__address-card { min-width: 256px; height: 330px; max-width: 305px; width: 100%; background-color: #FFFFFF; background-color: var(--card-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); cursor: pointer; box-sizing: border-box; } .contacts__address-card-top { display: flex; align-items: center; justify-content: center; width: 100%; height: 200px; border-radius: 15px 15px 0 0; border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; } .contacts__address-card-top img { height: 100%; box-sizing: border-box; padding: 12px; } .contacts__address-card-description { padding: 30px 13px 20px 20px; } .contacts__address-card-city, .contacts__address-card-address { margin: 0; } .contacts__address-card-bottom { display: flex; align-items: center; grid-column-gap: 5px; margin-top: 15px; } .contacts__address-card-time { color: #808080; color: var(--contacts-card-sub-font-color); margin: 0; } .contacts__map { width: 100%; height: 600px; } .contacts__map iframe { border-radius: 15px; border-radius: var(--border-radius-small); border: none; height: 100%; width: 100%; } .contacts__container { display: grid; grid-template-columns: 1fr; grid-column-gap: 2px; } .contacts__container-img { justify-self: end; max-width: 580px; } .contacts__container-img img { width: 100%; height: auto; } .contacts__container-card { justify-self: center; display: flex; flex-direction: column; grid-row-gap: 20px; max-width: 522px; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; width: 100%; background-color: #FFFAF1; background-color: var(--contacts-card-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); padding: 50px 30px; box-sizing: border-box; } .contacts__container-card-title { font-size: 24px; font-weight: 500; margin: 0 0 10px; } .contacts__container-card-text { font-weight: 500; font-size: 20px; line-height: 24px; color: #000000; color: var(--main-font-color); margin: 0; } .contacts__container-card-value { font-weight: 400; font-size: 20px; line-height: 24px; color: #000000; color: var(--main-font-color); } @media (max-width: 991px) { .contacts__container { grid-template-columns: 1fr; } .contacts__container-img { display: none; } .contacts__container-card { justify-self: center; } } @media (max-width: 768px) { .contacts__address-card { min-height: 250px; } .contacts__address-card-description { padding: 20px 13px 20px 20px; } } @media (max-width: 500px) { .contacts__address-card { min-width: 256px; } .contacts__map { height: 228px; } } .navbar-body { padding: 20px 12px; background-color: #F6EBD9; background-color: var(--main-bg-color); color: #000000; color: var(--sidebar-item-color); display: flex; flex-flow: column nowrap; overflow-y: auto; height: 100%; box-sizing: border-box; } .navbar-body__header { display: flex; justify-content: space-between; align-items: center; position: relative; } .navbar-body__header-title { height: 38px; font-size: 32px; line-height: 38px; font-weight: 700; overflow: hidden; color: #000000; color: var(--main-font-color); width: -webkit-max-content; width: -moz-max-content; width: max-content; text-decoration: none; } .navbar-body__header-title img { height: 100%; } .navbar-body__header-close { position: relative; width: 30px; height: 30px; display: flex; justify-content: center; } .navbar-body__header-close::before, .navbar-body__header-close::after { content: ''; position: absolute; height: 4px; width: 28px; top: 50%; left: 50%; background: #000000; background: var(--main-font-color); border-radius: 5px; } .navbar-body__header-close::before { transform: translate(-50%, -50%) rotate(45deg); } .navbar-body__header-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .navbar-body__choose-address { margin: 27px 0 0; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; } .navbar-body__choose-address-link { display: flex; grid-gap: 5px; gap: 5px; font-size: 20px; color: #000000; color: var(--main-font-color); line-height: 24px; font-weight: 500; text-decoration: none; } .navbar-body__separator-start { flex-shrink: 0; height: 1px; background-color: rgba(51, 51, 51, 0.5); background-color: var(--main-shadow-basic-color); margin: 30px 0 20px; } .navbar-body__separator-end { flex-shrink: 0; height: 1px; background-color: rgba(51, 51, 51, 0.5); background-color: var(--main-shadow-basic-color); margin: 30px 0; } .navbar-body__items { display: flex; flex-direction: column; grid-gap: 20px; gap: 20px; margin-left: 30px; } .navbar-body__item-link { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; text-decoration: none; font-weight: 500; font-size: 20px; line-height: 24px; color: #271D17; color: var(--main-footer-background-color); cursor: pointer; } .navbar-body__item-link:hover { font-weight: 700; } .navbar-body__item-points { margin: 0; font-weight: 500; font-size: 20px; line-height: 24px; color: #271D17; color: var(--main-footer-background-color); } .navbar-body__item-subscript { margin: 5px 0 0; font-size: 12px; font-weight: 300; color: #000000; color: var(--main-font-color); line-height: 15px } .navbar-body__item-schedule { margin: 0; font-weight: 500; font-size: 20px; line-height: 24px; color: #000000; color: var(--main-font-color); } /* аккордеон Каталога */ .navbar-body .app-accordion__btn { padding-left: 0; } .navbar-body .app-accordion__btn-text { font-weight: 500; font-size: 20px; line-height: 24px; color: #000000; color: var(--main-font-color); } .navbar-body .app-accordion__content { padding: 0; display: flex; flex-direction: column; grid-gap: 10px; gap: 10px; margin: 8px 0 0 0; } .navbar-body .app-accordion__link { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: 500; font-size: 16px; line-height: 19px; color: #000000; color: var(--main-font-color); text-decoration: none; transition: .4s ease; } .navbar-body .app-accordion__link:hover { font-weight: 700; } .agreement__title { font-size: 32px; color: #000000; color: var(--main-font-color); line-height: 39px; font-weight: 700; } .agreement__card { margin: 30px 0 50px; background: #FFFFFF; background: var(--card-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); padding: 50px 40px; } .agreement__text { font-size: 16px; font-weight: 400; color: #000000; color: var(--main-font-color); line-height: 19px; text-align: center; } @media (max-width: 767px) { .agreement__card { padding: 50px 20px; } .agreement__title { font-size: 24px; color: #000000; color: var(--main-font-color); line-height: 29px; } } /* Vue ui */ .app-input { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 70px; } .app-input input { width: 100%; height: 50px; padding: 15px 8px 16px 20px; border: 1px solid #808080; border: var(--border) var(--input-default-color); background-color: transparent; border-radius: 15px; border-radius: var(--border-radius-small); outline: none; font-weight: 400; font-size: 16px; line-height: 19px; transition: 0.5s ease; box-sizing: border-box; margin-top: 20px; } .app-input input:focus { border: 1px solid #000000; border: var(--border) var(--input-active-color); } .app-input__label { position: absolute; left: 0; top: 20px; padding: 15px 8px 16px 20px; transition: 0.5s ease; pointer-events: none; font-weight: 400; font-size: 16px; line-height: 19px; white-space: nowrap; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .app-input__label.active { top: 0; color: #808080; color: var(--input-default-color); transform: translateX(20px); padding: 0; font-weight: 400; font-size: 12px; line-height: 15px; } .app-input.error input { border: 1px solid #B8320D; border: var(--border) var(--input-error-color); } .app-input.error .app-input__error { color: #B8320D; color: var(--input-error-color); margin: 2px 0 0 12px; font-size: 12px; line-height: 1; } .app-input.disabled input { background-color: #E6E6E6; background-color: var(--input-disabled-color); border: none; } .app-input.disabled .app-input__label { color: #B3B3B3; color: var(--input-disabled-inner-color); } /* Стиль инпута с нижним подчеркиванием */ .app-input_underline { height: 64px; } .app-input_underline input { padding: 13px 8px 13px 0; } .app-input_underline input, .app-input_underline input:focus { border-top: none; border-right: none; border-left: none; border-bottom: 1px solid #808080; border-bottom: 1px solid var(--input-default-color); border-radius: 0; } .app-input_underline .app-input__label { padding: 15px 8px 16px 0; color: #000000; color: var(--main-font-color); font-size: 16px; line-height: 19px; } .app-input_underline .app-input__label.active { transform: translateX(0); } .app-input_underline.error input { border-bottom: 1px solid #B8320D; border-bottom: var(--border) var(--input-error-color); border-top: none; border-left: none; border-right: none; } .app-input_underline.error .app-input__error { color: #B8320D; color: var(--input-error-color); margin: 2px 0 0 12px; font-size: 12px; line-height: 1; } .app-button { background-color: #333333; background-color: var(--button-bg-color); color: #FFFFFF; color: var(--button-font-color); border-radius: 25px; border-radius: var(--border-radius-large); box-sizing: border-box; border: 1px solid #333333; border: var(--border) var(--button-bg-color); padding: 10px 8px; font-size: 14px; transition: .3s ease; } .app-button:hover { background-color: var(--button-ng-hovered-color); color: #000000; color: var(--button-font-hovered-color); } .app-button:active { background-color: #262626; background-color: var(--button-bg-active-color); color: #FFFFFF; color: var(--button-font-active-color); } .app-button:disabled { border-color: #E6E6E6; border-color: var(--button-bg-disabled-color); background-color: #E6E6E6; background-color: var(--button-bg-disabled-color); color: #808080; color: var(--button-font-disabled-color); cursor: default; } .app-radio { line-height: 22px; display: flex; align-items: center; grid-column-gap: 7px; cursor: pointer; color: #000000; color: var(--main-font-color); font-size: 16px; font-weight: 400; } .app-radio__input_real { width: 0; height: 0; position: absolute; opacity: 0; z-index: -1; } .app-radio__input_custom { position: relative; display: inline-block; width: 24px; height: 24px; border: 1px solid #808080; border: var(--border) var(--input-radio-default-color); border-radius: 50%; box-sizing: border-box; } .app-radio__input_custom:before { content: ''; position: absolute; left: 50%; top: 50%; display: inline-block; width: 16px; height: 16px; background-color: #808080; background-color: var(--input-radio-default-color); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: .2s ease-in; } .app-radio__input_real:checked + .app-radio__input_custom { border: 1px solid #000000; border: var(--border) var(--input-radio-active-color); } .app-radio__input_real:checked + .app-radio__input_custom:before { transform: translate(-50%, -50%) scale(1); background-color: #000000; background-color: var(--input-radio-active-color); } .app-radio__input_real:disabled + .app-radio__input_custom { border: 1px solid #808080; border: var(--border) var(--input-radio-default-color); background-color: #E6E6E6; background-color: var(--input-radio-disabled-color); } .app-radio__input_real:disabled + .app-radio__input_custom:before { background-color: #808080; background-color: var(--input-radio-default-color); } .app-radio__input_real:not(:disabled):hover + .app-radio__input_custom { border: 1px solid #000000; border: var(--border) var(--input-radio-active-color); transition: .2s ease-in; } .app-textarea { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 70px; width: 100%; } .app-textarea textarea { width: 100%; height: 100px; padding: 15px 8px 16px 20px; border: 1px solid #808080; border: var(--border) var(--input-default-color); background-color: transparent; border-radius: 15px; border-radius: var(--border-radius-small); outline: none; font-weight: 400; font-size: 16px; line-height: 19px; transition: 0.5s ease; box-sizing: border-box; margin-top: 20px; resize: none; } .app-textarea textarea:focus { border: 1px solid #000000; border: var(--border) var(--input-active-color); } .app-textarea__label { position: absolute; left: 0; top: 20px; padding: 15px 8px 16px 20px; transition: 0.5s ease; pointer-events: none; font-weight: 400; font-size: 16px; line-height: 19px; white-space: nowrap; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .app-textarea__label.active { top: 0; color: #808080; color: var(--input-default-color); transform: translateX(20px); padding: 0; font-weight: 400; font-size: 12px; line-height: 15px; } .app-textarea.error textarea { border: 1px solid #B8320D; border: var(--border) var(--input-error-color); } .app-textarea.error .app-textarea__error { color: #B8320D; color: var(--input-error-color); } .app-textarea.disabled textarea { background-color: #E6E6E6; background-color: var(--input-disabled-color); border: none; } .app-textarea.disabled .app-textarea__label { color: #B3B3B3; color: var(--input-disabled-inner-color); } .app-checkbox { display: flex; align-items: center; grid-column-gap: 8px; cursor: pointer; color: #000000; color: var(--main-font-color); font-size: 16px; line-height: 19px; font-weight: 400; } .app-checkbox__input { /* TODO: добавить disabled, focus */ } .app-checkbox__input_real { position: absolute; width: 0; height: 0; opacity: 0; z-index: -1; } .app-checkbox__input_custom { position: relative; width: 18px; height: 18px; border-radius: 4px; border: 1px solid #cccfdb; transition: all .2s ease; box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05); } .app-checkbox__input_custom svg { position: absolute; top: 1px; left: 0; right: 1px; bottom: 0; margin: auto; overflow: visible; height: 11px; width: 11px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: 16px; transition: all .3s ease; } .app-checkbox__input_real:checked + .app-checkbox__input_custom { background: #333333; background: var(--button-bg-color); border-color: #333333; border-color: var(--button-bg-color); } .app-checkbox__input_real:checked + .app-checkbox__input_custom svg { stroke-dashoffset: 0; } .app-select { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 70px; } .app-select__label { font-weight: 400; font-size: 12px; line-height: 16px; color: #808080; color: var(--select-main-color); padding-left: 20px; } .app-select__button { position: relative; display: flex; align-items: center; justify-content: space-between; grid-column-gap: 8px; text-align: left; width: 100%; height: 50px; border: 1px solid #808080; border: var(--border) var(--select-main-color); border-radius: 15px; border-radius: var(--border-radius-small); padding: 15px 20px 15px 20px; line-height: 22px; color: #000000; color: var(--select-font-color); } .app-select__button:disabled { background-color: #E6E6E6; background-color: var(--main-disabled-bg-color); border: 1px solid #E6E6E6; border: var(--border) var(--main-disabled-bg-color); } .app-select__button:disabled .app-select__button-text { color: #808080; color: var(--select-main-color); } .app-select__button:disabled .app-select__button-icon svg path { fill: #808080; fill: var(--select-main-color); } .app-select__button-text { pointer-events: none; } .app-select__button-icon { height: 20px; width: 20px; pointer-events: none; transform: rotate(0); transition: .3s ease; } .app-select__button-icon img { height: 100%; width: auto; } .app-select__button_active .app-select__button-icon { transform: rotate(180deg); transition: .3s ease; } .app-select__button:disabled { cursor: default; } .app-select__list { display: none; position: absolute; left: 0; max-height: 465px; overflow-y: auto; top: calc(100% + 3px); box-sizing: border-box; list-style-type: none; background-color: #FFFAF1; background-color: var(--select-list-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); border: 1px solid #808080; border: var(--border) var(--select-main-color); width: 100%; margin: 0; padding: 0 0 22px 0; z-index: 1; } .app-select__list_visible { display: block; } .app-select__list-item { position: relative; display: flex; align-items: center; grid-column-gap: 8px; margin: 0; padding: 18px 22px 10px 22px; cursor: pointer; } .app-select__list-item:after { content: ''; position: absolute; bottom: 0; left: 22px; right: -22px; background-color: #808080; background-color: var(--select-main-color); height: 1px; width: calc(100% - 44px); } .app-select__list-item:hover { background-color: #F6EBD9; background-color: var(--select-list-hovered-color); } .app-select__list-item_active { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.16797 9.16634L9.16797 14.1663L17.5013 5.83301' stroke='%23333333' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-image: var(--select-active-item-checkmark); background-position: right 22px top 18px; background-repeat: no-repeat; } .app-auth-code { display: flex; flex-direction: column; grid-row-gap: 8px; } .app-auth-code__list { display: flex; grid-column-gap: 10px; } .app-auth-code__list-input { width: 50px; border-radius: 15px; height: 50px; background-color: transparent; border: 1px solid #808080; border: var(--border) var(--input-default-color); text-align: center; font-size: 16px; line-height: 19px; font-weight: 400; } .app-auth-code__list-input:focus { border: 1px solid #000000; border: var(--border) var(--input-active-color); } .app-auth-code__list-input.focus-visible { outline: 1px solid #000000; outline: var(--border) var(--input-active-color); } .app-auth-code__list-input:focus-visible { outline: 1px solid #000000; outline: var(--border) var(--input-active-color); } .app-auth-code__list-input_error { margin: 0; color: #B8320D; color: var(--input-error-color); border: 1px solid #B8320D; border: var(--border) var(--input-error-color); } .app-auth-code__list-input_error:focus { border: 1px solid #B8320D; border: var(--border) var(--input-error-color); } .app-auth-code__list-input_error.focus-visible { outline: 1px solid #B8320D; outline: var(--border) var(--input-error-color); } .app-auth-code__list-input_error:focus-visible { outline: 1px solid #B8320D; outline: var(--border) var(--input-error-color); } .app-auth-code__error { color: #B8320D; color: var(--input-error-color); font-weight: 400; font-size: 12px; line-height: 15px; margin: 0; } .app-loader { position: relative; width: 30px; height: 30px; -webkit-animation: rotate 0.7s linear infinite; animation: rotate 0.7s linear infinite; } .app-loader__circle { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke: #808080; stroke: var(--button-font-disabled-color); stroke-linecap: round; stroke-dasharray: 16; } @-webkit-keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .app-progress-button__inner { display: flex; align-items: center; justify-content: center; grid-column-gap: 2px; } .app-card-button { position: relative; } .app-card-button__btn { border-radius: 15px; border-radius: var(--border-radius-small); padding: 10px 10px 10px 20px; border: 2px solid #808080; border: var(--border-bold) var(--main-border-color); min-width: 210px; width: 100%; height: 100px; box-sizing: border-box; display: grid; } .app-card-button__btn:hover, .app-card-button__btn_active { border: 2px solid #8BC5B6; border: var(--border-bold) var(--main-aprove-color); } .app-card-button__btn-status { font-weight: 400; font-size: 14px; line-height: 19px; position: absolute; bottom: -20px; text-align: center; width: 100%; opacity: 0; } .app-card-button__btn-status_success { color: #808080; color: var(--main-border-color); opacity: 1; } .app-card-button__btn-header { display: flex; justify-content: space-between; grid-column-gap: 10px; align-items: center; } .app-card-button__btn-header-title { font-size: 16px; font-weight: 600; line-height: 22px; color: #000000; color: var(--main-font-color); overflow: hidden; text-overflow: ellipsis; width: 110px; margin-left: 0; text-align: left; } .app-card-button__btn-description { font-size: 16px; font-weight: 400; line-height: 22px; color: #000000; color: var(--main-font-color); margin: 0; justify-self: flex-start; align-self: end; } .app-card-button__btn-control { display: flex; grid-column-gap: 5px; position: relative; } .app-card-button__btn-control-edit { display: flex; justify-content: center; cursor: pointer; padding: 0; } .app-card-button__btn-control-delete { width: 20px; height: 20px; cursor: pointer; display: flex; justify-content: center; padding: 0; } .app-card-button__btn-control-delete::before, .app-card-button__btn-control-delete::after { content: ''; position: absolute; top: 10px; display: block; width: 15px; border-radius: 15px; border-radius: var(--border-radius-small); height: 2px; background: #000000; background: var(--main-font-color); } .app-card-button__btn-control-delete::before { transform: rotate(45deg); } .app-card-button__btn-control-delete::after { transform: rotate(-45deg); } .vd-overlay__inner { background-color: rgba(51, 51, 51, 0.5) !important; background-color: var(--main-overlay-color) !important; } .vd-picker__table-days__wrapper { overflow: visible !important; } .vd-picker__table-days__wrapper .vd-picker__table-days { overflow: visible !important; } .vd-menu__content { width: 325px !important; min-width: unset !important; max-width: unset !important; margin-top: 5px; border-radius: 15px !important; border-radius: var(--border-radius-small) !important; border: 1px solid #808080 !important; border: var(--border) var(--input-default-color) !important; box-sizing: border-box; } .vd-menu__content .vd-picker { background-color: #FFFAF1; background-color: var(--profile-bg-content); border-radius: 15px; border-radius: var(--border-radius-small); } .vd-picker__table-day__wrapper .vd-picker__table-day__effect { background-color: rgba(51, 51, 51, 0.5); background-color: var(--datepicker-hover-color); } .vd-picker__table-day--selected .vd-picker__table-day__effect { background-color: #333333; background-color: var(--datepicker-active-color); } .vd-picker__table-days .vd-picker__table-day { overflow: visible; } .app-datepicker .app-input input { text-align: left; } @media (min-width: 425px) { .vd-picker { width: 325px !important; } } @media (max-width: 425px) { .vd-menu__content { border-radius: 15px 15px 0 0 !important; border: 1px solid #808080 !important; border: var(--border) var(--input-default-color) !important; } .vd-menu__content .vd-picker { border-radius: 15px 15px 0 0 !important; } } .app-radio-tape { display: flex; align-items: center; justify-content: space-between; height: 40px; box-sizing: border-box; border-radius: 8px; background-color: #F6EBD9; background-color: var(--modal-card-bg-color); overflow: hidden; } .app-radio-tape__input { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 6px; box-sizing: border-box; color: #000000; color: var(--main-font-color); } .app-radio-tape__input.active { background-color: #262626; background-color: var(--main-active-button-color); color: #F1F1F1; color: var(--main-font-secondary-color); transition: .8s ease; } .app-radio-tape__input_real { width: 0; height: 0; position: absolute; opacity: 0; z-index: -1; } .app-radio-tape__input_custom { font-size: 12px; line-height: 1.2; } .autocomplete__prompt-list { z-index: 1; position: absolute; top: 75px; left: 0; right: 0; border-radius: 15px; border: #000000 1px solid; border: var(--main-font-color) 1px solid; background: #FFFAF1; background: var(--main-card-bg-color); padding: 20px 15px; } .autocomplete__prompt-item { line-height: 19px; font-size: 16px; font-weight: 400; border-radius: 25px; cursor: pointer; padding: 10px 0 10px 20px; transition: .4s ease; } .autocomplete__prompt-item:hover { background-color: #EBE6E6; background-color: var(--main-bg-primary-color); color: #000000; color: var(--main-font-color); } .app-product-slider { position: relative; display: flex; align-items: center; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .app-product-slider__skeleton { width: 100%; aspect-ratio: 1; } .app-product-slider__image { width: 100%; -o-object-fit: cover; object-fit: cover; } .app-product-slider__pagination { position: absolute; bottom: 4px; left: 50%; transform: translate(-50%); display: flex; align-items: center; grid-column-gap: 5px; box-sizing: border-box; } .app-product-slider__pagination-button { flex-shrink: 0; width: 10px; height: 10px; aspect-ratio: 1; border-radius: 50%; border: none; background-color: #F6EBD9; background-color: var(--main-bg-color); padding: 0; } .app-product-slider__pagination-button.active { background-color: #262626; background-color: var(--main-active-button-color); } .sidebar { position: fixed; z-index: 51; } .sidebar.open { top: 0; right: 0; bottom: 0; left: 0; } .sidebar.open .sidebar__overlay { height: 100%; width: 100%; background: rgba(51, 51, 51, 0.5); background: var(--main-overlay-color); } .sidebar.open .sidebar__inner { transform: translateX(0); } .sidebar__overlay { cursor: pointer; transition: .3s ease; background-color: transparent; z-index: -1; } .sidebar__inner { max-width: 400px; width: 100%; height: 100%; position: fixed; left: 0; top: 0; transform: translateX(-100vw); transition: .6s ease; } .sidebar__inner.right { left: auto; right: 0; transform: translateX(100vw); } /* Vue ui modals */ .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(51, 51, 51, 0.5); background-color: var(--main-overlay-color); opacity: 0; transition: all .3s ease-in-out; cursor: pointer; z-index: 100; } .modal.show { opacity: 1; } .modal_bottom { align-items: flex-end; } .modal__body { position: relative; background-color: #FFFAF1; background-color: var(--main-card-bg-color); border-radius: 15px; max-width: 500px; -webkit-animation: slideInTop .6s ease; animation: slideInTop .6s ease; cursor: default; } .modal__body-container_scroll { box-sizing: border-box; overflow-y: auto; max-height: 80vh; } .modal__body .cross { position: absolute; right: -50px; top: 0; width: 30px; height: 30px; display: flex; justify-content: center; } .modal__body .cross::before, .modal__body .cross::after { content: ''; position: absolute; height: 4px; width: 28px; top: 50%; left: 50%; background: #F1F1F1; background: var(--main-font-secondary-color); border-radius: 5px; } .modal__body .cross::before { transform: translate(-50%, -50%) rotate(45deg); } .modal__body .cross::after { transform: translate(-50%, -50%) rotate(-45deg); } .modal__body .chevron { display: none; position: absolute; top: 20px; right: 20px; background-color: #F1F1F1; background-color: var(--main-font-secondary-color); box-sizing: border-box; z-index: 5; padding: 0; border-radius: 50%; overflow: hidden; } .modal__body .chevron__icon { height: 20px; width: 20px; padding: 5px; pointer-events: none; } .modal__body .swipe-block { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; height: 40px; } @media (min-width: 769px) { .modal__body .swipe-block { display: none } } .modal__body .swipe-block__line { position: absolute; top: 3px; left: 50%; right: 0; transform: translateX(-50%); width: 50%; height: 3px; background-color: #B3B3B3; background-color: var(--main-disabled-inner-color); border-radius: 2px 2px 0 0; pointer-events: none; } @media (max-width: 768px) { .modal__body { margin: 0; border-radius: 15px 15px 0 0; border-radius: var(--border-radius-only-top-small); overflow: hidden; } .modal__body-container_scroll { max-height: 90vh; padding: 0; } .modal__body .cross { display: none; } .modal__body .chevron { display: flex; } } /* TODO: тех.долг: вынести в отдельный файл */ /* QS-1243 */ @-webkit-keyframes slideInTop { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes slideInTop { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .auth-modal .modal__body { padding: 50px 30px; margin: 20px; max-width: 850px; width: 100%; } .auth-modal__container-phone { max-width: 326px; } .auth-modal__content { display: flex; grid-column-gap: 10px; } .auth-modal__wrapper { display: flex; flex-direction: column; justify-content: center; grid-row-gap: 30px; width: 100%; } .auth-modal__img svg { width: 490px; height: 342px; } .auth-modal .app-button { height: 50px; width: 100%; margin-top: 30px; max-width: 326px; } .auth-modal__title { font-size: 32px; font-weight: 700; line-height: 39px; color: #000000; color: var(--main-font-color); margin: 0; } .auth-modal__policy { font-weight: 400; font-size: 14px; line-height: 17px; color: #808080; color: var(--main-border-color); margin: 10px 0 0 0; text-align: center; } .auth-modal__policy-link { text-decoration: none; color: #000000; color: var(--main-font-color); } .auth-modal__links { display: flex; flex-direction: column; grid-row-gap: 5px; margin-top: 10px; } .auth-modal__repeat-code, .auth-modal__change-phone { text-decoration: none; font-weight: 400; font-size: 12px; line-height: 15px; color: #808080; color: var(--main-border-color); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; text-align: left; } .auth-modal__repeat-code:hover(.auth-modal__repeat-code:not(:disabled)), .auth-modal__change-phone:hover(.auth-modal__change-phone:not(:disabled)) { color: #262626; color: var(--main-active-button-color); } .auth-modal__repeat-code.focus-visible, .auth-modal__change-phone.focus-visible { border-radius: 4px; outline: 1px solid #000000; outline: var(--border) var(--input-active-color); } .auth-modal__repeat-code:focus-visible, .auth-modal__change-phone:focus-visible { border-radius: 4px; outline: 1px solid #000000; outline: var(--border) var(--input-active-color); } .auth-modal__repeat-code:disabled, .auth-modal__change-phone:disabled { cursor: default; } .auth-modal__text { font-weight: 400; font-size: 16px; line-height: 19px; max-width: 252px; color: #808080; color: var(--main-border-color); margin: 0 0 10px; } .auth-modal .app-button.focus-visible { outline: 1px solid #000000; outline: var(--border) var(--input-active-color); } .auth-modal .app-button:focus-visible { outline: 1px solid #000000; outline: var(--border) var(--input-active-color); } @media (max-width: 1000px) { .auth-modal .modal__body { width: auto; margin: 0; } .auth-modal__content { justify-content: center; } .auth-modal__wrapper { max-width: 326px; } .auth-modal__img { display: none; } } @media (max-width: 768px) { .auth-modal .modal__body { width: 100%; border-radius: 15px 15px 0 0; } } @media (max-width: 414px) { .auth-modal .modal__body { width: 100%; border-radius: 15px 15px 0 0; margin: 0; } .auth-modal .modal__body .chevron { display: flex; left: 10px; } } .approve-modal .modal__body { padding: 50px 46px; margin: 20px; } .approve-modal__text { color: #000000; color: var(--main-font-color); font-weight: 700; font-size: 18px; line-height: 22px; text-align: center; } .approve-modal__btns { display: flex; justify-content: center; grid-column-gap: 30px; margin-top: 20px; } .approve-modal__btns .app-button { height: 50px; max-width: 110px; width: 100%; } @media (max-width: 414px) { .approve-modal .modal__body { width: 100%; border-radius: 15px 15px 0 0; margin: 0; } .approve-modal .modal__body .chevron { left: 10px; } } .product-modal__content { display: grid; grid-template-columns: repeat(2, 490px); grid-column-gap: 20px; grid-row-gap: 20px; } .product-modal .modal__body { max-width: 1060px; box-sizing: border-box; } .product-modal__accordions { display: flex; flex-direction: column; grid-row-gap: 10px; } .product-modal__body { position: relative; display: flex; flex-direction: column; grid-row-gap: 20px; padding: 0 4px; } .product-modal__body-title { font-weight: 700; color: #000000; color: var(--main-font-color); font-size: 24px; line-height: 36px; margin: 0; } .product-modal__body-desc { font-size: 16px; font-weight: 400; line-height: 19px; color: #000000; color: var(--main-font-color); margin: 20px 0 0; } .product-modal__body .app-button { height: 40px; min-width: 260px; width: 100%; margin-top: auto; } .product-modal .app-checkbox { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .product-modal .app-radio { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; line-height: 19px; } .product-modal .app-radio__input_custom { height: 20px; width: 20px; } .product-modal .app-radio__input_custom:before { height: 12px; width: 12px; } .product-modal .tapes-list { display: flex; flex-direction: column; grid-row-gap: 12px; margin-top: 12px; } @media (max-width: 1200px) { .product-modal__content { grid-template-columns: repeat(1, 490px); } } @media (max-width: 768px) { .product-modal__content { grid-template-columns: repeat(1, 400px); } .product-modal .modal__body .cross { display: flex; } } @media (max-width: 540px) { .product-modal .modal__body { width: 100%; } .product-modal__content { grid-template-columns: repeat(1, 1fr); } .product-modal__slider { border-radius: 0; } .product-modal__container-img { width: 100%; height: 320px; } } @media (min-width: 769px) { .product-modal .modal__body-container_scroll { padding: 20px; } } .address-modal .modal__body { max-width: 1000px; width: 100%; } .address-modal .modal__body-container_scroll { padding: 20px; } .address-modal__content { display: flex; flex-direction: column; grid-row-gap: 30px; } .address-modal__title { font-weight: 700; font-size: 24px; line-height: 29px; color: #000000; color: var(--main-font-color); margin: 0; } .address-modal__radio { display: flex; grid-column-gap: 50px; } .address-modal__input-button { display: flex; grid-column-gap: 20px; align-items: end; } .address-modal__input-button .app-button { height: 50px; width: 100%; max-width: 305px; } .address-modal__input-button .app-input { width: 100%; position: relative; } .address-modal__input-button .app-select { width: 100%; } .address-modal__map { width: 100%; height: 460px; } .address-modal__map iframe { height: 100%; border-radius: 15px; border-radius: var(--border-radius-small); border: none; } @media (max-width: 1100px) { .address-modal .modal__body { max-width: 700px; } } @media (max-width: 768px) { .address-modal__input-button { flex-direction: column; grid-row-gap: 20px; } .address-modal__input-button .app-button { max-width: unset; } .address-modal__content { grid-row-gap: 20px; } .address-modal .modal__body { margin: 0; border-radius: 15px 15px 0 0; max-width: unset; } .address-modal .modal__body-container_scroll { padding: 50px 30px 30px; } .address-modal .modal__body .chevron { top: 10px; z-index: 2; } } :root { /* все переменные вынесены в файл variables.css */ } /* default sets */ html, body { position: relative; box-sizing: border-box; font-family: 'Inter', sans-serif; font-style: normal; font-weight: normal; line-height: normal; background: #F6EBD9; background: var(--main-bg-color); } h1 { margin: 0; } .wrapper { min-height: 100vh; } .wrapper.is-blocked { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .content { display: flex; flex-direction: column; min-height: inherit; } .footer { margin-top: auto; } main { min-height: 500px; margin-top: 24px; margin-bottom: 72px; } @media (max-width: 767px) { main { margin-top: 50px } } button { background: none; border: none; } h1, h2, h3, h4, h5, h6, p { color: #000000; color: var(--main-font-color); } button, a { cursor: pointer; } .hide { display: none !important; } /* special container addon to flexboxgrid2 class */ @media only screen and (min-width: 1440px) { .container { width: calc(1440px - 16px); max-width: 100%; } } .body-hide { overflow: hidden !important; position: relative !important; padding-left: 0px; padding-top: 0px; padding-right: 0px; margin-left: 0; margin-top: 0; margin-right: 0px !important; } /* запретить перенос на новую строку */ .no-line-break { white-space: nowrap; } /* a11y class for screenreaders */ .show-for-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /* Общие стили для полосы прокрутки */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background-color: #333333; background-color: var(--main-default-button-color); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background-color: #262626; background-color: var(--main-active-button-color); } ::-webkit-scrollbar-track { background-color: #FFFFFF; background-color: var(--main-secondary-color); } /* breadcrumbs START */ /* мы от них решили отказаться не навсегда, а до тех пор пока не придумаем как визуально их сделать лучше */ /* .breadcrumbs { display: flex; flex-flow: row nowrap; font-style: normal; font-weight: 500; line-height: 16px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; } .breadcrumbs__link { color: var(--breadcrumbs-main-color); text-decoration: none; &:hover { text-decoration: underline; } } .breadcrumbs__link_active { color: var(--breadcrumbs-active-color); } .breadcrumbs__divider { color: var(--breadcrumbs-active-color); &:before { content: var(--breadcrumbs-divider); } }*/ /* breadcrumbs END*/ /* ***** NAV DRAWER (sidebar) START ***** */ .nav-drawer { position: fixed; z-index: 51; } .nav-drawer.is-open { top: 0; right: 0; bottom: 0; left: 0; } .nav-drawer.is-open .nav-drawer__overlay { height: 100%; width: 100%; background: rgba(51, 51, 51, 0.5); background: var(--main-overlay-color); } .nav-drawer.is-open .nav-drawer__sidebar { transform: translateX(0); } .nav-drawer__overlay { cursor: pointer; transition: .3s ease; background-color: transparent; z-index: -1; } .nav-drawer__sidebar { max-width: 400px; width: 100%; height: 100%; position: fixed; left: 0; top: 0; transform: translateX(-100vw); transition: .6s ease; } /* ***** NAV DRAWER (sidebar) END ***** */ /* ***** CART DRAWER (sidebar) START ***** */ .cart-drawer { position: fixed; z-index: 51; } .cart-drawer.is-open { top: 0; right: 0; bottom: 0; left: 0; height: 100vh; width: 100vw; } .cart-drawer.is-open .cart-drawer__overlay { height: 100%; width: 100%; background: rgba(51, 51, 51, 0.5); background: var(--main-overlay-color); } .cart-drawer.is-open .cart-drawer__sidebar { transform: translateX(0); } .cart-drawer__overlay { cursor: pointer; transition: .3s ease; background-color: transparent; z-index: -1; } .cart-drawer__sidebar { display: flex; grid-column-gap: 19px; max-width: 467px; width: 100%; height: 100%; background-color: #FFFFFF; background-color: var(--sidebar-bg-color); transition: .6s ease; } .cart-drawer__sidebar-cross { position: absolute; left: -49px; top: 21px; display: flex; align-items: center; justify-content: center; height: 30px; width: 30px; } .cart-drawer__sidebar-cross img { height: 100%; width: 100%; } @media (max-width: 570px) { .cart-drawer__sidebar-cross { display: none } } .sidebar-cart { position: relative; display: flex; flex-direction: column; grid-row-gap: 30px; width: 100%; } .sidebar-cart__title { display: flex; align-items: center; grid-column-gap: 10px; background-color: #FFFFFF; background-color: var(--sidebar-bg-color); padding: 20px 26px; } @media (max-width: 570px) { .sidebar-cart__title { padding: 20px 12px } } .sidebar-cart__title-btn { height: 20px; display: flex; align-items: center; justify-content: center; transform: rotate(90deg); } .sidebar-cart__title-btn img { height: 100%; width: 100%; } @media (min-width: 571px) { .sidebar-cart__title-btn { display: none } } .sidebar-cart__title-text { font-weight: 500; font-size: 24px; line-height: 29px; margin: 0; } .sidebar-cart__empty-body { display: flex; flex-direction: column; align-items: center; justify-content: center; grid-row-gap: 10px; height: 100%; } .sidebar-cart__empty-body-img { height: 100px; width: 100px; } .sidebar-cart__empty-body-img img { width: 100%; height: auto; } .sidebar-cart__empty-body-title { font-weight: 500; font-size: 24px; line-height: 29px; color: #000000; color: var(--basket-empty-body-title-color); margin: 10px 0 0; } .sidebar-cart__empty-body-subtitle { font-weight: 500; font-size: 16px; line-height: 19px; color: #808080; color: var(--basket-empty-body-subtitle-color); margin: 0; } .sidebar-cart__body { display: flex; flex-direction: column; grid-row-gap: 30px; height: 100%; overflow-y: auto; padding: 0 26px; } @media (max-width: 400px) { .sidebar-cart__body { padding: 0 12px } } .sidebar-cart__body-list { display: flex; flex-direction: column; grid-row-gap: 29px; } .sidebar-cart__body-list .cart-item { display: flex; grid-column-gap: 20px; } .sidebar-cart__body-list .cart-item__text_main { font-weight: 500; font-size: 16px; line-height: 19px; color: #000000; color: var(--sidebar-main-text-color); margin: 0; } .sidebar-cart__body-list .cart-item__text_secondary { font-weight: 400; font-size: 14px; line-height: 17px; color: rgba(51, 51, 51, 0.5); color: var(--basket-item-description-color); margin: 0; } .sidebar-cart__body-list .cart-item__img { position: relative; display: flex; align-items: center; justify-content: center; background-color: #d9d9d9; background-color: var(--placeholder-color); height: 88px; width: 88px; } .sidebar-cart__body-list .cart-item__img img, .sidebar-cart__body-list .cart-item__img .dropdown-card__img--none { height: 88px; width: 88px; } .sidebar-cart__body-list .cart-item__info { display: flex; flex-direction: column; grid-row-gap: 8px; width: 100%; } .sidebar-cart__body-list .cart-item__info-header { display: flex; justify-content: space-between; grid-column-gap: 8px; font-weight: 500; font-size: 16px; line-height: 19px; } .sidebar-cart__body-list .cart-item__info-header-btn { align-self: flex-start; color: #000000; color: var(--sidebar-main-text-color); cursor: pointer; } .sidebar-cart__body-list .cart-item__info-modifiers { text-transform: lowercase; } .sidebar-cart__body-list .cart-item__info-result { display: flex; justify-content: space-between; align-items: center; grid-column-gap: 4px; } .sidebar-cart__body-list .cart-item__info-result .app-counter { height: 35px; } .sidebar-cart__footer { display: flex; flex-direction: column; grid-row-gap: 10px; padding: 0 12px 30px 12px; } .sidebar-cart__footer-delivery { display: flex; align-items: center; justify-content: space-between; grid-column-gap: 4px; } .sidebar-cart__footer-delivery-text { font-weight: 400; font-size: 16px; line-height: 19px; color: #000000; color: var(--basket-font-color); margin: 0; } .sidebar-cart__footer-result { display: flex; align-items: center; justify-content: space-between; grid-column-gap: 4px; } .sidebar-cart__footer-result-text { font-weight: 700; font-size: 16px; line-height: 19px; color: #000000; color: var(--basket-font-color); margin: 0; } .sidebar-cart__footer-link { display: block; max-width: 326px; width: 100%; margin: 0 auto; } .sidebar-cart__footer-link .app-button { width: 100%; height: 50px; } /* ***** CART DRAWER (sidebar) END ***** */ .sidebarjs--left { height: 100%; } /* custom checkbox */ .checkbox { display: none; } .checkbox + label { width: 17px; height: 17px; border: 1px solid #FDC975; border: var(--border) var(--checkbox-color); border-radius: 4px; background: inherit; margin-right: 6px; display: inline-block; position: relative; } .checkbox + label:active { background: hsl(37.05882352941177, 97.1428571429%, 90%); background: hsl(37.05882352941177, 97.1428571429%, 90%); } .checkbox + label:hover { background: hsl(37.05882352941177, 97.1428571429%, 90%); background: hsl(37.05882352941177, 97.1428571429%, 90%); } .checkbox:checked + label { background: hsl(37.05882352941177, 97.1428571429%, 90%); background: hsl(37.05882352941177, 97.1428571429%, 90%); border: 1px solid #FDC975; border: var(--border) var(--checkbox-color); color: #FDC975; color: var(--checkbox-color); } .checkbox:checked + label:after { content: "✔"; font-size: 13px; position: absolute; top: 1px; left: 2px; color: #FDC975; color: var(--checkbox-color); } /* base */ .nav__locale-modal { position: fixed; top: 50%; left: 50%; width: 1100px; transform: translate(-50%, -50%); background: #FFFAF1; background: var(--main-card-bg-color); z-index: 40; visibility: hidden; opacity: 0; transition: 1s; } @media (max-width: 1100px) { .nav__locale-modal { width: 85% } } .nav__locale-modal-auth { position: fixed; top: 50%; left: 50%; width: 1100px; transform: translate(-50%, -50%); background: #FFFAF1; background: var(--main-card-bg-color); z-index: 40; visibility: hidden; opacity: 0; transition: 1s; border-radius: 15px; border-radius: var(--border-radius-small); } @media (max-width: 1100px) { .nav__locale-modal-auth { width: 85% } } .nav__locale-modal__visible { visibility: visible; opacity: 1; } .nav__locale-close { position: fixed; top: 45px; left: 87%; color: #FFFFFF; color: var(--main-secondary-color); visibility: hidden; opacity: 0; transition: 1s; font-size: 40px; cursor: pointer; z-index: 40; } .nav__locale-close__visible { visibility: visible; opacity: 1; } .nav__locale-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(51, 51, 51, 0.5); background: var(--main-overlay-color); z-index: 39; visibility: hidden; opacity: 0; transition: 1s; } .nav__locale-background__visible { visibility: visible; opacity: 1; } .nav__profile button { display: flex; align-items: center; min-width: 172px; min-height: 40px; font-weight: 500; line-height: 19px; font-size: 16px; text-align: center; background: none; color: #333333; } .nav__profile button:hover { color: #F7967D; cursor: pointer; } .nav__profile button:active { color: #9B2708; } .nav__profile button:disabled { color: #8B8B8B; cursor: not-allowed; } .nav__profile button a { text-decoration: none; color: #000000; color: var(--main-font-color); } .nav__search-wrapper { display: flex; flex-grow: 0.8; width: 35px; position: absolute; right: 170px; transition: width .5s ease; } .nav__search-wrapper form { width: 100%; } .nav__search-wrapper:hover, .nav__search-wrapper[focus-within] { width: 300px; transition: width .5s ease; } .nav__search-wrapper:hover, .nav__search-wrapper:focus-within { width: 300px; transition: width .5s ease; } .nav__search-wrapper:hover .nav__search input, .nav__search-wrapper[focus-within] .nav__search input { width: 90%; transition: width .5s ease; } .nav__search-wrapper:hover .nav__search input, .nav__search-wrapper:focus-within .nav__search input { width: 90%; transition: width .5s ease; } .nav__search-wrapper--no-basket { right: 25px; } .nav__search { position: relative; box-sizing: border-box; border-radius: 200px; padding: 2px 7px; background: none; color: #000000; color: var(--main-font-color); } .nav__search input { border: none; outline: none; font-style: normal; font-weight: normal; line-height: 20px; font-size: 14px; letter-spacing: 0.25px; color: #000000; color: var(--main-font-color); background: none; width: 1px; transition: width .5s ease; } .nav__search input::-moz-placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); border-bottom: 1px solid hsl(0, 0%, 60%); border-bottom: 1px solid hsl(0, 0%, 60%); } .nav__search input:-ms-input-placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); border-bottom: 1px solid hsl(0, 0%, 60%); border-bottom: 1px solid hsl(0, 0%, 60%); } .nav__search input::placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); border-bottom: 1px solid hsl(0, 0%, 60%); border-bottom: 1px solid hsl(0, 0%, 60%); } .nav__search label { position: absolute; top: -10px; padding: 0 2px 0 2px; font-style: normal; font-weight: normal; line-height: 16px; font-size: 12px; letter-spacing: 0.4px; text-transform: capitalize; color: #FDC975; color: var(--header-item-color); background: #F6EBD9; background: var(--header-bg-color); } .nav__search button { position: absolute; right: 7px; top: 50%; border: none; background: none; color: #000000; color: var(--header-search-font-color); opacity: 0.6; padding: 0; transform: translateY(-50%); } .nav__search button:before { font-size: 19px; } .nav__order-status { text-decoration: none; display: flex; align-items: center; border: none; outline: none; background: none; color: #FDC975; color: var(--header-item-color); border-radius: 50%; } .nav__order-status.mdi:before { font-size: 40px; } .nav__order-status:hover { color: rgb(228, 185, 117); color: rgb(228, 185, 117); } .dropmic--show .nav__cart { background: #EC2427; background: var(--main-error-color); } /* стили дропдауна */ .nav__cart-dropdown { display: flex; flex-flow: column nowrap; align-items: center; z-index: 25; border: none; background: #FFFAF1; background: var(--main-card-bg-color); overflow-y: scroll; /*position: fixed; top: 0 !important; right: 0 !important; bottom: 0 !important;*/ max-width: 400px; max-height: none; /*transform: none !important;*/ height: 100%; } /* модалка промокода */ .promocode-modal, .paid-by-bonuses-modal, { position: absolute; bottom: 0; width: 100%; height: 100%; display: none; } .promocode-modal__background, .paid-by-bonuses-modal__background { position: relative; height: 100%; background: rgba(51, 51, 51, 0.5); background: var(--main-shadow-basic-color); display: none; } .promocode-modal__main, .paid-by-bonuses-modal__main { position: absolute; bottom: -268px; display: flex; align-items: center; justify-content: space-between; flex-direction: column; width: 100%; height: 0; background: #FFFAF1; background: var(--main-card-bg-color); border-radius: 15px 15px 0 0; border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; padding: 0; transition: .5s; overflow: hidden; box-sizing: border-box; } .promocode-modal__header, .paid-by-bonuses-modal__header { display: flex; align-items: center; justify-content: space-between; width: 100%; } .promocode-modal__header-title, .paid-by-bonuses-modal__header-title { font-weight: 500; font-size: 24px; line-height: 29px; } .promocode-modal__input, .paid-by-bonuses-modal__input { border: none; background: none; width: 100%; border-bottom: 1px solid #808080; border-bottom: 1px solid var(--main-border-color); padding: 10px 0; } .promocode-modal__input:focus, .paid-by-bonuses-modal__input:focus { border: none; outline: none; border-bottom: 1px solid #EF4618; border-bottom: 1px solid var(--main-font-primary-color); } .promocode-modal__button, .paid-by-bonuses-modal__button { text-decoration: none; border-radius: 25px; border-radius: var(--border-radius-large); display: flex; align-items: center; justify-content: space-around; border: none; font-weight: 500; line-height: 19px; font-size: 16px; text-align: center; background: #333333; background: var(--button-bg-color); color: #FFFFFF; color: var(--button-font-color); width: 305px; height: 50px; } .promocode-modal__button:hover, .paid-by-bonuses-modal__button:hover { color: #000000; color: var(--button-font-hovered-color); background: #FFFFFF; background: var(--button-bg-hovered-color); cursor: pointer; border: 1px solid #333333; border: var(--border) var(--button-bg-color); } .promocode-modal__button:active, .paid-by-bonuses-modal__button:active { background: #262626; background: var(--button-bg-active-color); color: #FFFFFF; color: var(--button-font-color); cursor: pointer; } .paid-by-bonuses-modal__description { align-self: flex-start; color: #000000; color: var(--main-font-color); font-size: 14px; } /* это хак, починить стили дропдаун плагина */ .dropmic--show::after, .dropmic--show::before { display: none; } .dropdown-card__left { padding-right: 20px; } .dropdown-card__header { display: flex; align-items: start; justify-content: space-between; width: 100%; font-weight: 500; font-size: 16px; line-height: 19px; color: #000000; color: var(--main-font-color); text-transform: none; padding: 0 0 10px 0; } .dropdown-card__img--none::before { content: '\f82a'; color: #FFFFFF; color: var(--main-secondary-color); padding: 0 5px; display: inline-block; font: normal normal normal 12px/1 "Material Design Icons"; font-size: 35px; text-rendering: auto; line-height: 24px; } .dropdown-card__dismiss { color: #000000; color: var(--main-font-color); cursor: pointer; } .dropdown-card__button { text-decoration: none; border-radius: 25px; border-radius: var(--border-radius-large); display: flex; align-items: center; justify-content: space-around; border: none; font-style: normal; font-weight: 500; line-height: 19px; font-size: 16px; text-align: center; background: #333333; background: var(--button-bg-color); color: #FFFFFF; color: var(--button-font-color); padding: 16px 8px; width: 100%; max-width: 305px; } .dropdown-card__button:hover { color: #000000; color: var(--button-font-hovered-color); background: #FFFFFF; background: var(--button-bg-hovered-color); cursor: pointer; border: 1px solid #333333; border: var(--border) var(--button-bg-color); } .dropdown-card__button:active { background: #262626; background: var(--button-bg-active-color); color: #FFFFFF; color: var(--button-font-color); cursor: pointer; } .dropdown-card__button:disabled { background: #E6E6E6; background: var(--button-bg-disabled-color); color: #808080; color: var(--button-font-disabled-color); cursor: not-allowed; } .info-title { font-style: normal; font-weight: 500; line-height: 16px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 0 0 5px 0; } .nav__cart-dropdown-button { text-decoration: none; display: inline-block; border: none; border-radius: 200px; padding: 6px 16px 6px 16px; margin: 0; outline: none; font-style: normal; font-weight: 500; line-height: 16px; font-size: 14px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; background: #FDC975; background: var(--dropdown-card-button-bg-color); color: #FFFFFF; color: var(--dropdown-card-button-font-color); } .nav__cart-dropdown-button:hover { background: rgb(228, 185, 117); background: rgb(228, 185, 117); } .nav__cart-dropdown_empty { display: flex; justify-content: center; font-style: normal; font-weight: 500; line-height: 20px; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; } /* конец стилей дропдауна */ @media (max-width: 768px) { .header .container { width: 100%; max-width: 100%; margin: 0; padding: 0; } .nav-mobile { position: fixed; width: calc(100% - 24px); height: 69px; padding: 0 12px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; background-color: rgba(246, 235, 217, 0.6); background-color: var(--mobile-header-bg-color); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); top: 0; } [sidebarjs-container] { width: 100%; max-width: 390px; } .nav-mobile__sidebar { background-color: #F6EBD9; background-color: var(--main-bg-color); color: #000000; color: var(--sidebar-item-color); display: flex; flex-flow: column nowrap; overflow: hidden; overflow-y: scroll; height: 100%; } .nav-mobile__sidebar-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; height: 70px; background: #F6EBD9; background: var(--main-bg-color); } .nav-mobile__sidebar-item span, .nav-mobile__sidebar-item a { text-decoration: none; width: 100%; font-weight: 500; font-size: 24px; line-height: 29px; color: #271D17; color: var(--main-footer-background-color); } .nav-mobile__sidebar-item span { width: auto; } .nav-mobile__sidebar-item span.nav-mobile__sidebar-item-subscript { margin-top: 5px; font-size: 12px; font-weight: 300; } .nav-mobile__sidebar-item a.nav-mobile__sidebar-item-company-name { font-size: 32px; line-height: 1.2; font-weight: 700; } .nav__sidebar-item a:hover { outline: 2px solid inherit; outline-offset: 2px; } .nav-mobile__sidebar-item-separator ~ .nav-mobile__sidebar-item { padding-left: 36px; } .nav-mobile__sidebar-item-separator { margin: 0 12px; width: calc(100% - 24px); height: 1px; background-color: #808080; background-color: var(--main-border-color); } .sidebar-item__company-name { padding-bottom: 0; } .sidebar-item__points { display: flex; justify-content: space-between; } .sidebar-item__phone { flex-direction: column; align-items: flex-start; padding-bottom: 0; } .nav-mobile__sidebar-close { color: #EC2427; color: var(--main-error-color); font-size: 24px; } .nav-mobile__sidebar-actions { display: flex; flex-flow: row nowrap; justify-content: space-around; } .nav-mobile__logo-img { height: 34px; } .nav-mobile__search-wrapper { position: relative; display: flex; flex-flow: row nowrap; border: 1px solid #FDC975; border: var(--border) var(--mobile-header-search-border-color); box-sizing: border-box; border-radius: 25px; border-radius: var(--border-radius-large); padding: 4px 6px 4px 16px; background: #F6EBD9; background: var(--mobile-header-search-bg-color); color: #FFFFFF; color: var(--mobile-header-search-font-color); } .nav-mobile__search-wrapper input { background: #F6EBD9; background: var(--mobile-header-search-bg-color); } .nav-mobile__search-wrapper input { border: none; outline: none; font-style: normal; font-weight: normal; line-height: 20px; font-size: 14px; letter-spacing: 0.25px; width: 100%; } .nav-mobile__search-wrapper input::-moz-placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); } .nav-mobile__search-wrapper input:-ms-input-placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); } .nav-mobile__search-wrapper input::placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); } .nav-mobile__search-wrapper label { position: absolute; top: -10px; padding: 0 2px 0 2px; font-style: normal; font-weight: normal; line-height: 16px; font-size: 12px; letter-spacing: 0.4px; text-transform: capitalize; color: #000000; color: var(--mobile-header-item-color); background: rgba(246, 235, 217, 0.6); background: var(--mobile-header-bg-color); } .nav-mobile__search-wrapper button { border: none; background: none; color: #FFFFFF; color: var(--mobile-header-search-font-color); align-self: center; } .nav-mobile__search-form-md { flex-grow: 0.6; } @media (max-width: 575px) { .nav-mobile__search-form-md { display: none } } .nav-mobile__search-form-xs { width: 34px; height: 32px; background: rgba(246, 235, 217, 0.6); background: var(--mobile-header-bg-color); border-radius: 50%; margin-left: auto; position: relative; display: inline-flex; } @media (min-width: 576px) { .nav-mobile__search-form-xs { display: none } } .nav-mobile__search-button-xs { display: inline-block; border: none; padding: 8px; padding-bottom: 0; outline: none; line-height: 14px; text-align: center; background: rgba(246, 235, 217, 0.6); background: var(--mobile-header-bg-color); color: #000000; color: var(--mobile-header-item-color); } .nav-mobile__search-button-xs:hover { cursor: pointer; /*background: color-mod(var(--mobile-header-bg-color) blackness(+10%));*/ } .nav-mobile__search-panel-xs { box-sizing: border-box; visibility: visible; position: absolute; padding: 15px 12px; border: none; max-width: 110vw; width: 110vw; right: -75px; top: 30px; background: rgba(246, 235, 217, 0.6); background: var(--mobile-header-bg-color); display: flex; justify-content: flex-end; height: 75px; } .nav-mobile__search-panel-xs form { width: 63%; margin-right: 60px; } .nav-mobile__search-panel-xs form input { background: rgba(246, 235, 217, 0.6); background: var(--mobile-header-bg-color); } .nav-mobile__search-panel-xs .nav-mobile__search-wrapper { border: 1px solid #FDC975; border: var(--border) var(--mobile-header-search-border-color); background: #F6EBD9; background: var(--mobile-header-search-bg-color); color: #FFFFFF; color: var(--mobile-header-search-font-color); height: 100%; } .nav-mobile__search-panel-xs.hidden { visibility: hidden; height: 0; } } .nav-mobile__sidebar .app-accordion { margin: 20px 36px; } .nav-mobile__sidebar .app-accordion__btn { padding-left: 0; } .nav-mobile__sidebar .app-accordion__btn-text { font-weight: 500; font-size: 20px; line-height: 24px; color: #000000; color: var(--main-font-color); } .nav-mobile__sidebar .app-accordion__content { padding: 0; margin-left: 20px; } .nav-mobile__sidebar .app-accordion__link { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: 500; font-size: 16px; line-height: 19px; color: #000000; color: var(--main-font-color); text-decoration: none; transition: .4s ease; } .nav-mobile__sidebar .app-accordion__link:hover { font-weight: 700; } /* mobile-cart-button */ .mobile-cart-button { display: none; position: fixed; right: 12px; bottom: 15px; min-width: 120px; z-index: 23; } @media (max-width: 768px) { .mobile-cart-button { display: flex; align-items: center; justify-content: center; grid-column-gap: 4px } } .nav-mobile__cart { position: relative; text-decoration: none; border-radius: 200px; display: flex; align-items: center; justify-content: space-around; min-width: 100px; border: none; padding: 8px 16px 8px 16px; outline: none; font-style: normal; font-weight: 500; line-height: 16px; font-size: 14px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; background: #FDC975; background: var(--main-footer-title-color); /*var(--mobile-header-item-color);*/ color: #F6EBD9; color: var(--main-bg-color); } @media (max-width: 424px) { .nav-mobile__cart { justify-content: space-between; min-width: 50px; min-height: 18px } } .nav-mobile__cart:hover { background: rgb(0, 0, 0); background: rgb(0, 0, 0); } .nav-mobile__cart-sum { font-size: 18px; } .nav-mobile__cart-list { display: flex; flex-flow: column nowrap; padding: 8px 20px 0 20px; background: #F6EBD9; background: var(--main-bg-color); overflow-y: scroll; height: 75%; } .mobile-cart-item { display: flex; align-items: start; justify-content: space-between; padding: 0 0 8px 0; color: #000000; color: var(--mobile-cart-item-color); } .mobile-cart-item:not(:first-child) { padding: 8px 0; } .mobile-cart-item img { width: 100%; } .mobile-cart-item__left { width: 30%; } .mobile-cart-item__right { width: 65%; display: flex; align-items: center; justify-content: space-between; flex-direction: column; } .mobile-cart-item__header { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; font-weight: 500; font-size: 16px; line-height: 19px; } .mobile-cart-item__title { display: inline-block; color: #271D17; color: var(--main-footer-background-color); } .mobile-cart-item__delete { color: #271D17; color: var(--main-footer-background-color); cursor: pointer; } .mobile-cart-item__description { margin: 8px 0; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font-weight: 400; font-size: 14px; line-height: 17px; color: rgba(51, 51, 51, 0.5); color: var(--main-shadow-basic-color); } .mobile-cart-item__options-block { display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 8px 0; width: 100%; } .mobile-cart-item__option { display: flex; flex-flow: column nowrap; } .mobile-cart-item__option-title { font-style: normal; font-weight: 500; line-height: 16px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: inherit; } .mobile-cart-item__option-price { padding: 4px 0; font-style: normal; font-weight: 500; line-height: 16px; font-size: 14px; letter-spacing: 0.75px; text-transform: uppercase; color: inherit; } .mobile-cart-item__option-quantity { display: flex; justify-content: center; align-items: center; min-width: 20px; width: 88px; height: 29px; border: 1px solid rgba(51, 51, 51, 0.5); border: var(--border) var(--main-shadow-basic-color); border-radius: 35px; color: #271D17; color: var(--main-footer-background-color); } .mobile-cart-item__option-quantity button { background: none; color: #FDC975; color: var(--main-footer-title-color); } .option-quantity__count { font-weight: 500; font-size: 16px; line-height: 19px; color: #271D17; color: var(--main-footer-background-color); } .mobile-cart__button { position: -webkit-sticky; position: sticky; bottom: 0; text-decoration: none; display: inline-block; border: none; border-radius: 25px; border-radius: var(--border-radius-large); outline: none; font-style: normal; font-weight: 500; font-size: 16px; line-height: 19px; text-align: center; background: #FDC975; background: var(--main-footer-title-color); color: #F6EBD9; color: var(--main-bg-color); padding: 15px 0; } .mobile-cart__button:hover { background: rgb(221, 219, 217); background: rgb(221, 219, 217); } .nav-mobile__cart-empty { font-style: normal; font-weight: 500; line-height: 16px; font-size: 14px; letter-spacing: 0.75px; text-transform: uppercase; color: inherit; } /* footer START */ .footer { background-color: #271D17; background-color: var(--footer-bg-color); padding-top: 50px; } .footer__title { font-weight: 400; font-size: 20px; line-height: 24px; color: #FDC975; color: var(--footer-title-color); margin: 0 0 15px; } .footer__link { font-size: 16px; line-height: 19px; text-decoration: none; color: #F1F1F1; color: var(--footer-text-color); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .footer__text { font-size: 16px; line-height: 19px; color: #F1F1F1; color: var(--footer-text-color); margin: 0; font-weight: 400; text-decoration: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .footer__text_bold { font-weight: 700; } .footer__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); grid-column-gap: 8px; grid-row-gap: 40px; padding-bottom: 40px; } .footer__lists-item { display: flex; flex-direction: column; grid-row-gap: 15px; } .footer__lists-item_inner { display: flex; flex-direction: column; grid-row-gap: 15px; margin-top: 15px; } .footer__download-btn { width: 180px; height: 52px; } .footer__download-btn img { width: 100%; } .footer__separator-line { height: 1px; width: 100%; background-color: #FFFAF1; background-color: var(--footer-separator-line-color); } .footer__copyright { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; grid-gap: 8px; padding-top: 20px; padding-bottom: 20px; } .footer__copyright-link, .footer__copyright-text { font-size: 12px; line-height: 15px; color: #F1F1F1; color: var(--footer-text-color); margin: 0; } .footer__copyright-link { text-decoration: none; } /* footer END */ /* pages */ /* auth */ .auth { padding: 55px 20px 55px 20px; } .auth-container { display: flex; justify-content: center; width: 100%; } .auth-card { width: 100%; display: flex; background: #FFFAF1; background: var(--main-card-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); justify-content: center; } .auth-card__block_title { font-size: 32px; font-weight: 500; margin-top: 40px; } @media (max-width: 600px) { .auth-card__block_title { margin-top: 0 } } @media (max-width: 550px) { .auth-card__block { width: 100% } } @media (max-width: 1028px) { .auth-card__block:first-child { display: none } } .auth-card__block_input { margin-top: 40px; } @media (max-width: 550px) { .auth-card__block_input { text-align: center } } .auth_card__block_input_tittle { width: 300px; font-size: 16px; color: #808080; color: var(--main-border-color); margin-bottom: 10px; } .auth-card__block_input_repeat_code { font-size: 13px; margin-top: -10px; cursor: pointer; } .auth-card__block_input_change_phone { font-size: 13px; margin-top: 0; cursor: pointer; } .auth-card__block_input_change_phone:hover, .auth-card__block_input_repeat_code:hover { color: #FDC975; color: var(--footer-title-color) } .auth-card__block_personal_data { word-wrap: break-word; max-width: 300px; margin-top: 10px; text-align: center; font-size: 14px; line-height: 14.52px; font-weight: 400; color: #808080; color: var(--main-border-color); } .auth-card__block_personal_data a { color: #000000; color: var(--main-font-color); line-height: 15px; font-weight: 400; text-decoration: none; } @media (max-width: 550px) { .auth-card__block_personal_data { max-width: none } } /* about */ .about { padding: 20px 20px 55px 20px; } .feedback { display: flex; flex-flow: column nowrap; align-items: center; padding: 20px 0 0 0; margin: 0 auto; max-width: 750px; } .feedback__button { display: inline-block; border: none; border-radius: 200px; padding: 8px 16px 8px 16px; outline: none; font-style: normal; font-weight: 500; line-height: 22px; font-size: 20px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; background: #FDC975; background: var(--card-action-primary-color); color: #FFFFFF; color: var(--card-action-secondary-color); margin: 0 0 20px 0; } /* article and articles */ .article { padding: 20px; } .articles { padding: 20px; } .articles__title { font-style: normal; font-weight: normal; line-height: normal; font-size: 34px; letter-spacing: 0.25px; color: #000000; color: var(--block-title-color); margin-top: 0; } .articles__description { position: relative; transition: box-shadow 0.25s; display: flex; flex-flow: row nowrap; border-radius: 15px; border-radius: var(--border-radius-small); padding: 45px 30px 45px 30px; margin: 0 0 24px 0; background: #FFFAF1; background: var(--main-card-bg-color); color: #000000; color: var(--card-item-primary-color); } @media (max-width: 767px) { .articles__description { flex-flow: column nowrap } } .articles__content * { box-sizing: border-box; } .articles__content { display: grid; grid-template-columns: minmax(350px, 413px) minmax(350px, 413px) minmax(350px, 413px); grid-gap: 30px 20px; } @media (max-width: 1228px) { .articles__content { grid-template-columns: minmax(350px, 413px) minmax(350px, 413px) } } @media (max-width: 767px) { .articles__content { grid-template-columns: minmax(300px, 413px) } } .article-card { position: relative; display: flex; flex-direction: column; border-radius: 15px; border-radius: var(--border-radius-small); padding: 57px 30px 69px 30px; background-color: #FFFAF1; background-color: var(--main-card-bg-color); color: #000000; color: var(--card-item-primary-color); height: 305px; background-size: cover; background-repeat: no-repeat; background-position: right; } .article-container { display: flex; justify-content: center; } .article-card--page { box-shadow: none; background-color: #FFFAF1; background-color: var(--main-card-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); display: flex; flex-direction: column; padding: 50px; width: 800px; margin-bottom: 100px; } @media (max-width: 769px) { .article-card--page { padding: 50px 20px } } .article-card__content-preview { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; font-style: normal; font-weight: normal; line-height: 20px; font-size: 14px; letter-spacing: 0.25px; color: #F1F1F1; color: var(--main-font-secondary-color); } .article-card__title { text-decoration: none; min-height: 60px; font-size: 24px; line-height: 29px; font-style: normal; font-weight: 700; padding-bottom: 5px; letter-spacing: 0.15px; } .article-card__title h4 { font-size: 24px; margin-top: 0; margin-bottom: 20px; color: #F1F1F1; color: var(--main-font-secondary-color); text-transform: uppercase; } .article-card__title p { padding: 0 0 0 8px; font-style: normal; font-weight: 400; line-height: 24px; font-size: 14px; letter-spacing: 1.5px; opacity: 0.6; } .article-card__title a { text-decoration: none; } .article-card__title:hover { color: #FDC975; color: var(--card-action-primary-color); } .article-card__title:hover small { color: #000000; color: var(--card-item-primary-color); } .article-title { font-size: 32px; font-weight: 500; line-height: 39px; } .article-card__body { text-overflow: ellipsis; overflow: hidden; max-width: 70%; height: 80px; font-size: 20px; line-height: 24px; font-weight: 400; margin-top: -10px; } .article-card__body p { color: #F1F1F1; color: var(--main-font-secondary-color); margin-top: 5px; } .article-card__img { position: relative; display: flex; flex-direction: column; padding: 50px; background-color: #FFFAF1; background-color: var(--main-card-bg-color); color: #000000; color: var(--card-item-primary-color); height: 500px; background-size: cover; background-repeat: no-repeat; background-position: right; margin-bottom: 10px; border-radius: 50px; } @media (max-width: 991px) { .article-card__img { margin: 0 } } .article-card__img-content-preview { display: flex; flex-direction: column; justify-content: center; } .article-card__img__title{ font-size: 50px; color: #F1F1F1; color: var(--main-font-secondary-color); } @media (max-width: 769px) { .article-card__img__title{ font-size: 24px } } .article-card__img__body p{ font-size: 24px; color: #F1F1F1; color: var(--main-font-secondary-color); } @media (max-width: 769px) { .article-card__img__body p{ font-size: 16px } } .article-card__body__text { margin: 0 25px; font-size: 20px; } @media (max-width: 769px) { .article-card__body__text { margin: 0 } } .article-card__show-more-button { display: inline-block; border-radius: 200px; padding: 13px 16px; outline: none; font-style: normal; font-weight: 500; line-height: 19px; font-size: 16px; width: 150px; height: 45px; text-align: center; letter-spacing: 0.75px; text-decoration: none; background: #333333; background: var(--button-bg-color); color: #FFFFFF; color: var(--button-font-color); border: 1px solid #333333; border: var(--border) var(--button-bg-color); cursor: pointer; } .article-card__show-more-button:hover { color: #000000; color: var(--button-font-hovered-color); background: #FFFFFF; background: var(--button-bg-hovered-color); cursor: pointer; border: 1px solid #333333; border: var(--border) var(--button-bg-color); } .article-card__show-more-button:active { background: #262626; background: var(--button-bg-active-color); color: #FFFFFF; color: var(--button-font-color); cursor: pointer; } @media (max-width: 420px) { .article-card__show-more-button { width: 120px; height: 33px; padding: 8px 14px; line-height: 16px; font-size: 14px } } .cart__button { display: inline-block; border: none; border-radius: 200px; padding: 8px 16px; outline: none; font-style: normal; font-weight: 500; line-height: 14px; font-size: 12px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; text-decoration: none; background: #FDC975; background: var(--card-action-primary-color); color: #FFFFFF; color: var(--card-action-secondary-color); } .cart__button:hover { cursor: pointer; background: rgb(228, 185, 117); background: rgb(228, 185, 117); } .cart__button_disabled { opacity: 0.6; } .cart__button_disabled:hover { cursor: default; opacity: 0.6; background: #FDC975; background: var(--action-item-primary-color); } .cart__order-loader-wrapper { position: absolute; z-index: 150; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .order-loader { background: #FFFFFF; background: var(--card-bg-color); color: #000000; color: var(--card-item-primary-color); box-shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); box-shadow: var(--shadow); border-radius: 4px; padding: 24px; display: flex; flex-flow: column nowrap; } @media (max-width: 500px) { .order-loader { padding: 12px } } @media (max-width: 350px) { .order-loader h2 { font-size: 18px } } .order-loader__in-progress { color: hsl(0, 0%, 70%); color: hsl(0, 0%, 70%); } .order__number { font-style: normal; font-weight: 500; line-height: 20px; font-size: 14px; letter-spacing: 1.5px; } .order__number small { color: hsl(0, 0%, 50%); color: hsl(0, 0%, 50%); line-height: 22px; font-size: 16px; letter-spacing: 2.5px; } .cart-content-wrapper { display: flex; flex-flow: row wrap; justify-content: space-between; } @media (max-width: 768px) { .cart-content-wrapper { justify-content: space-around } } .cart__empty { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } .cart__empty-label { font-style: normal; font-weight: 500; line-height: 24px; font-size: 18px; letter-spacing: 1.5px; } .cart__products { padding: 8px; display: flex; flex-flow: column nowrap; min-width: 300px; flex-shrink: 1; } @media (max-width: 400px) { .cart__products { padding: 4px } } .cart__nav { width: 400px; padding-left: 70px; flex-grow: 0; } @media (max-width: 1300px) { .cart__nav { display: none } } .cart__delivery-price { font-style: normal; font-weight: 200; line-height: 12px; font-size: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: #FDC975; color: var(--header-item-color); } .cart__sum { font-style: normal; font-weight: 500; line-height: 24px; font-size: 22px; letter-spacing: 0.75px; text-transform: uppercase; color: #FDC975; color: var(--header-item-color); } .cart__product-card { background: #FFFFFF; background: var(--card-bg-color); color: #000000; color: var(--card-item-primary-color); box-shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); box-shadow: var(--shadow); border-radius: 4px; display: flex; flex-flow: column nowrap; padding: 8px; margin: 8px 0; } .cart__product-card:first-child { margin-top: 0; } .cart__product-card:last-child { margin-bottom: 0; } .cart__clear-cart-button { display: inline-block; border: none; border-radius: 200px; margin: 8px 0; padding: 8px 16px 8px 16px; outline: none; font-style: normal; font-weight: 500; line-height: 16px; font-size: 14px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; text-decoration: none; background: #EC2427; background: var(--main-error-color); color: #FFFFFF; color: var(--card-action-secondary-color); } .cart__clear-cart-button:hover { cursor: pointer; background: rgb(211, 36, 39); background: rgb(211, 36, 39); } .cart__map_container { height: 580px; width: 100%; } .cart__map_container iframe { border: none } @media (max-width: 1100px) { .cart__map_container { height: 400px } } .cart__delivery-full-street { display: flex; } .cart__pickup-full-street-select { flex: 1 } .cart__pickup-full-street-button { margin-top: 8px; margin-left: 10px; } .delivery-type-preview { padding: 10px 20px 20px 20px; } .delivery-option-button { display: flex; justify-content: center; align-items: center; border: none; border-radius: 200px; margin: 8px; padding: 8px 16px 8px 16px; outline: none; font-style: normal; font-weight: 500; line-height: 16px; font-size: 14px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; text-decoration: none; background: #FDC975; background: var(--card-action-primary-color); color: #FFFFFF; color: var(--card-action-secondary-color); } @media (max-width: 500px) { .delivery-option-button { font-size: 10px; line-height: 12px; padding: 4px 8px } } .delivery-option-button:hover { cursor: pointer; background: rgb(228, 185, 117); background: rgb(228, 185, 117); } .delivery-option-button.active { background: rgb(228, 185, 117); background: rgb(228, 185, 117); } .delivery-option-button.disabled { pointer-events: none; background: hsl(37.05882352941177, 97.1428571429%, 97.5490196078%); background: hsl(37.05882352941177, 97.1428571429%, 97.5490196078%); } .delivery-way { display: none; } .delivery-way.active { display: flex; flex-flow: column nowrap; } .delivery-form { display: flex; flex-flow: row wrap; } .delivery-form .feedback-form__input-wrapper { margin: 8px; } .delivery-payments { display: flex; } @media (max-width: 770px) { .delivery-payments div { flex-basis: 40%; } } .delivery-type { display: flex; padding-bottom: 10px; } .delivery-payments { display: flex; flex-wrap: wrap; } @media (max-width: 770px) { .delivery-payments { justify-content: space-between } .delivery-payments div { flex-basis: 30%; margin-top: 20px; margin-left: 0; } } .radio-wrapper { display: flex; flex-flow: row nowrap; font-style: normal; font-weight: 500; line-height: 22px; font-size: 24px; letter-spacing: 1.5px; margin: 8px 0; } .radio-wrapper input { margin: 0 4px 0 0; } @media (max-width: 600px) { .radio-wrapper { font-size: 16px } } @media (max-width: 380px) { .radio-wrapper { font-size: 12px } } .radio-wrapper:last-child { margin-left: 20px; } input[type='radio']:after { background: #FDC975; background: var(--footer-title-color); border: #FDC975; border: var(--footer-title-color); } input[type="radio"]:checked:after { background: #FDC975; background: var(--footer-title-color); border: #FDC975; border: var(--footer-title-color); } .radio-button { border: #FDC975; border: var(--footer-title-color); width: 24px; height: 24px; } /* delivery and payment */ .d-and-p--content-padding { padding: 20px 0 0 0; } .delivery-and-payment__cards { display: flex; justify-content: space-between; } @media (max-width: 767px) { .delivery-and-payment__cards { flex-basis: 80%; flex-direction: column } } .delivery-and-payment__card { flex-flow: column nowrap; justify-content: flex-start; padding: 20px 20px 20px 0; flex-basis: 20%; color: #000000; color: var(--card-item-primary-color); } @media (max-width: 767px) { .delivery-and-payment__card { margin-bottom: 30px; align-items: center; display: flex; text-align: center } } .delivery-and-payment__card-img { margin-left: 10px; padding-bottom: 10px; } .delivery-and-payment__card-title { font-style: normal; font-weight: bold; font-size: 24px; line-height: 29px; padding-bottom: 15px; color: #EF4618; color: var(--main-font-primary-color); } .delivery-and-payment__card-description { padding: 0 0 0 8px; margin: 0; font-style: normal; font-weight: normal; line-height: 19.36px; font-size: 16px; letter-spacing: 0.5px; } .delivery-and-payment__google_map_container { width: 100%; height: 750px; } .delivery-and-payment__google_map_container iframe { border: none; } .payment-result, .delivery-and-payment__delivery { display: flex; padding: 20px; margin-top: 40px; justify-content: space-around; } .payment-result .delivery-and-payment__margin-left, .delivery-and-payment__delivery .delivery-and-payment__margin-left { margin-left: 20px; } @media (max-width: 1200px) { .payment-result, .delivery-and-payment__delivery { margin-bottom: 30px; flex-direction: column } .payment-result .order-delivery, .delivery-and-payment__delivery .order-delivery { order: -1; } } .delivery-and-payment__delivery_card { flex: 1; padding: 50px 34px 50px 34px; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; background: #FFFAF1; background: var(--main-card-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); } .delivery-and-payment__delivery_card p { margin-top: 10px; font-size: 20px; } .delivery-and-payment__delivery_card .feedback-form__input-wrapper { margin-top: 50px; } .delivery-and-payment__delivery_card .delivery-and-payment__delivery_card_block_button { display: flex; justify-content: end; } @media (max-width: 1200px) { .delivery-and-payment__delivery_card { margin-left: 0 !important; margin-right: 0 !important } } .payment-result { grid-row-gap: 30px; max-width: 1064px; background: #FFFAF1; background: var(--main-card-bg-color); box-sizing: border-box; background: #FFFFFF; background: var(--card-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); align-items: center; } .payment-result .payment-result__card-image { width: 500px; height: 500px; } @media (max-width: 1024px) { .payment-result { flex-direction: column; margin-bottom: 70px } } @media (max-width: 767px) { .payment-result .payment-result__card-image { width: 326px; height: 326px; } .payment-result .payment-result__card > div { justify-content: center; } } .payment-result__card { max-width: 391px; } .payment-result__card .payment-result__card-header { font-size: 32px; font-weight: 500; margin: 0; } .payment-result__card .payment-result__card-text { font-size: 20px; margin: 30px 0 50px 0; } @media (max-width: 440px) { .payment-result__card .payment-result__card-text { font-size: 16px; margin: 20px 0 56px 0 } } .payment-result__card-link { display: flex; text-decoration: none; max-width: 305px; margin-left: auto; } @media (max-width: 440px) { .payment-result__card-link { margin: 0 auto; max-width: 100% } } .payment-result__card-link .app-button { padding: 16px 8px; width: 100%; } .delivery-and-payment__delivery_prices { padding: 0 10px 10px 0; } .address-form__address-short-field { flex-basis: 22% !important; } .featured-categories { display: flex; flex-flow: column nowrap; margin-bottom: 20px; } .featured-categories__title { font-style: normal; font-weight: normal; line-height: normal; font-size: 34px; letter-spacing: 0.25px; color: #000000; color: var(--block-title-color); margin-top: 0; margin-bottom: 20px; } .featured-categories__content { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(305px, 1fr)); grid-row-gap: 20px; grid-column-gap: 30px; } @media (max-width: 1200px) { .featured-categories__content { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) } } @media (max-width: 768px) { .featured-categories__content { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-row-gap: 12px; grid-column-gap: 12px } } @media (max-width: 486px) { .featured-categories__content { grid-template-columns: repeat(2, 1fr) } } .featured-categories__content-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; padding: 15px; background-color: rgba(51, 51, 51, 0.5); background-color: var(--main-overlay-color); } .featured-categories__content-text { font-weight: 700; font-size: 32px; line-height: 1.2; text-align: center; color: #FFFAF1; color: var(--main-card-bg-color); text-shadow: 0 2px 1px var(--cards-of-categories-font-shadow-color); margin: 0; } @media (max-width: 486px) { .featured-categories__content-text { font-size: 24px } } .featured-categories__catalog-link-button-wrapper { display: flex; justify-content: center; padding: 0 0 24px 0; } .category-card { display: flex; flex-flow: column nowrap; position: relative; border-radius: 0 50px; overflow: hidden; transition: .4s ease; } .category-card:hover { transform: translateY(-4px); opacity: 0.7; } @media (max-width: 768px) { .category-card { border-radius: 0 20px; border-radius: 0 var(--border-radius-medium) } } .category-card--justify-to-start { margin-right: 20px; } @media (max-width: 768px) { .category-card--justify-to-start { margin-right: 0 } } .category-card__image_placeholder { opacity: 0; } .category-card__content { display: flex; justify-content: center; align-items: center; flex: 1; text-align: center; } .category-card__title { margin: 0; font-weight: 700; line-height: 38px; font-size: 32px; color: #F1F1F1; color: var(--main-font-secondary-color); } .category-card__description { padding: 0 8px; line-height: 20px; font-size: 14px; letter-spacing: 0.25px; opacity: 0; transition: opacity 0.25s; color: #000000; color: var(--main-font-color); } @media (max-width: 768px) { .category-card__description { opacity: 0.7 } } @media (max-width: 576px) { .category-card__description { display: none } } .catalog-link-button { display: inline-block; border: none; border-radius: 200px; padding: 8px 16px 8px 16px; outline: none; font-style: normal; font-weight: 500; line-height: 20px; font-size: 18px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; text-decoration: none; background: #FDC975; background: var(--card-action-primary-color); color: #FFFFFF; color: var(--card-action-secondary-color); } .catalog-link-button:hover { cursor: pointer; background: rgb(228, 185, 117); background: rgb(228, 185, 117); } /*Table order style*/ .table-order { background: #FFFFFF; background: var(--card-bg-color); color: #000000; color: var(--card-item-primary-color); box-shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); box-shadow: var(--shadow); border-radius: 4px; display: flex; flex-flow: column nowrap; padding: 15px; } @media (min-width: 600px) { .table-order { min-width: 550px } } .table-order__identify { position: relative; display: flex; flex-flow: row nowrap; border: 2px solid #FDC975; border: 2px solid var(--card-action-primary-color); box-sizing: border-box; border-radius: 4px; padding: 8px; margin-bottom: 28px; } .table-order__identify label { position: absolute; top: -10px; padding: 0 2px 0 2px; font-style: normal; font-weight: normal; line-height: 16px; font-size: 12px; letter-spacing: 0.4px; color: #FDC975; color: var(--card-action-primary-color); background: #FFFFFF; background: var(--card-bg-color); } .table-order__identify p { width: 100%; border: none; outline: none; font-style: normal; font-weight: normal; margin: 5px; line-height: 20px; font-size: 14px; letter-spacing: 0.25px; color: #000000; color: var(--input-font-color); background: #FFFFFF; background: var(--card-bg-color); } .table-order__description p { margin: 5px; } /* order status */ .order-status { padding: 20px; } .order-status__content-wrapper { box-shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); box-shadow: var(--shadow); border-radius: 4px; display: flex; flex-flow: row wrap; justify-content: flex-start; padding: 20px; background: #FFFFFF; background: var(--card-bg-color); color: #000000; color: var(--card-item-primary-color); } .last-order { flex-basis: 100%; font-style: normal; font-weight: 500; line-height: 24px; font-size: 18px; letter-spacing: 1.5px; color: #000000; color: var(--card-item-primary-color); } .last-order span { font-style: normal; font-weight: normal; line-height: 28px; font-size: 18px; letter-spacing: 0.5px; opacity: 0.6; } .order-wrapper { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; flex-basis: 100%; } @media (max-width: 767px) { .order-wrapper { flex-flow: row wrap } } .order-id { position: relative; display: flex; flex-flow: row nowrap; flex-basis: 49.9%; padding: 20px 0 0 0; } @media (max-width: 320px) { .order-id { flex-flow: row wrap } } .order-id button { background: none; display: inline-block; border: none; border-radius: 200px; padding: 8px 16px 8px 16px; margin: 0 0 0 8px; outline: none; font-style: normal; font-weight: 500; line-height: 14px; font-size: 12px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; background: #FDC975; background: var(--card-action-primary-color); color: #FFFFFF; color: var(--card-action-secondary-color); } @media (max-width: 320px) { .order-id button { margin: 10px 0 0 0 } } .order-id button:hover { background: rgb(228, 185, 117); background: rgb(228, 185, 117); } .order-id label { position: absolute; top: 12px; left: 8px; padding: 0 2px 0 2px; font-style: normal; font-weight: normal; line-height: 16px; font-size: 12px; letter-spacing: 0.4px; color: #FDC975; color: var(--card-item-secondary-color); background: #FFFFFF; background: var(--card-bg-color); } .order-id input { outline: none; border: 2px solid #FDC975; border: 2px solid var(--card-item-secondary-color); box-sizing: border-box; border-radius: 200px; padding: 8px 16px; font-style: normal; font-weight: normal; line-height: 20px; font-size: 14px; letter-spacing: 0.25px; color: #000000; color: var(--search-font-color); background: #FFFFFF; background: var(--card-bg-color); min-width: 200px; } @media (max-width: 767px) { .order-id input { min-width: 50px } } @media (max-width: 320px) { .order-id input { min-width: 200px } } .order-status { display: flex; flex-flow: column nowrap; flex-basis: 49.9%; padding: 20px 0 0 0; min-height: 130px; } .order-status h1 { font-style: normal; font-weight: 500; line-height: normal; font-size: 20px; letter-spacing: 0.15px; } .order-status__none { padding: 0 0 0 8px; font-style: normal; font-weight: normal; line-height: 28px; font-size: 18px; letter-spacing: 0.5px; opacity: 0.6; color: #000000; color: var(--card-item-primary-color); } @media (max-width: 320px) { .order-status__none { width: 100% } } .order-status__found { padding: 0 0 0 8px; font-style: normal; font-weight: 500; line-height: 24px; font-size: 18px; letter-spacing: 1.5px; color: #000000; color: var(--card-item-primary-color); } .order-status__found span { font-style: normal; font-weight: normal; line-height: 28px; font-size: 18px; letter-spacing: 0.5px; opacity: 0.6; } /* product */ .product { padding: 20px; } .product__content-wrapper { display: flex; flex-flow: column nowrap; } .product__header { display: flex; flex-flow: row nowrap; } .product__title { font-style: normal; font-weight: normal; line-height: normal; font-size: 34px; letter-spacing: 0.25px; color: #000000; color: var(--block-title-color); margin: 0; } .product__price { display: inline-block; border: none; border-radius: 200px; padding: 8px 16px 8px 16px; outline: none; font-style: normal; font-weight: 500; line-height: 20px; font-size: 18px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; background: #FDC975; background: var(--card-action-primary-color); color: #FFFFFF; color: var(--card-action-secondary-color); } .product__main-block { display: flex; flex-flow: row nowrap; justify-content: flex-start; padding: 20px 0; } @media (max-width: 576px) { .product__main-block { flex-flow: column nowrap; justify-content: space-around } } .product__image-wrapper { border-radius: 15px; border-radius: var(--border-radius-small); overflow: hidden; } .product__image { height: 300px; } @media (max-width: 374px) { .product__image { height: 250px } } .product__options-wrapper { display: flex; flex-flow: column nowrap; padding: 0 20px; } .product__options { display: flex; flex-flow: row wrap; justify-content: flex-start; padding: 0 0 16px 0; flex-direction: column; } @media (max-width: 576px) { .product__options { flex-flow: column nowrap; justify-content: space-around } } .option-select { display: flex; flex-flow: column nowrap; position: relative; margin: 4px; min-width: 225px; } .option-select label { font-style: normal; font-weight: normal; line-height: 24px; font-size: 14px; } .option-select--custom { background-color: #FFFFFF; background-color: var(--card-bg-color); box-shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); box-shadow: var(--shadow); border: none; border-radius: 4px; } .option-select__items div, .option-select--custom { color: #000000; color: var(--card-item-primary-color); padding: 8px 16px; border: none; cursor: pointer; } .option-select__items { position: absolute; background-color: #FFFFFF; background-color: var(--card-bg-color); top: 95%; left: 0; right: 0; z-index: 99; box-shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); box-shadow: var(--shadow); border-radius: 4px; } .option-select--hidden { display: none; } .option-select__items div:hover, .same-as-selected { border-radius: 4px; background: rgb(230, 255, 255); background: rgb(230, 255, 255); } /* arrow */ .option-select--custom:after { position: absolute; content: ""; top: 38px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #000000 transparent transparent transparent; } .option-select--custom.select-arrow-active:after { border-color: transparent transparent #000000 transparent; top: 31px; } .select-arrow-active.option-select--custom { background: rgb(230, 255, 255); background: rgb(230, 255, 255); } .option-quantity { display: flex; flex-flow: column nowrap; position: relative; margin: 4px; min-width: 225px; } .option-quantity label { font-style: normal; font-weight: normal; line-height: 24px; font-size: 14px; } .option-quantity__actions { display: flex; flex-flow: row nowrap; align-items: center; background-color: #FFFFFF; background-color: var(--card-bg-color); box-shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); box-shadow: var(--shadow); border: none; border-radius: 4px; max-width: 70px; padding: 6px; } .option-quantity__actions button { border: none; background: none; outline: none; } .option-quantity__actions button:hover { cursor: pointer; color: #FDC975; color: var(--card-action-primary-color); outline: none; } .product__description { display: flex; flex-flow: column nowrap; font-style: normal; font-weight: normal; line-height: 25px; font-size: 15px; letter-spacing: 0.25px; color: #000000; color: var(--block-title-color); margin: 5px 0; } .product__description p { text-align: justify; } .product__description a { text-decoration: none; color: #FDC975; color: var(--action-item-primary-color); } .product__description a:hover { text-decoration: underline; } .product__description-specs { display: flex; flex-flow: column nowrap; } .spec { display: flex; flex-flow: row nowrap; justify-content: space-between; background: #FFFFFF; background: var(--card-bg-color); padding: 0 4px; } .spec:nth-child(2n + 1) { background: rgb(230, 255, 255); background: rgb(230, 255, 255); } .spec--title { padding: 8px 4px; } /* choose address */ .choose-address__container { display: flex; justify-content: center; } .choose-address__card { border-radius: 15px; border-radius: var(--border-radius-small); padding: 42px 89px 42px 89px; background: #FFFAF1; background: var(--main-card-bg-color); max-width: 1000px; width: 100%; } @media (max-width: 1100px) { .choose-address__card { padding: 20px 20px 20px 20px } } @media (max-width: 600px) { .choose-address__card { padding: 10px 15px 10px 15px } } .choose-address__card-title { font-weight: 700; font-size: 24px; } .choose-address__card-radio { display: flex; padding: 15px 20px 25px 0; font-size: 24px !important; justify-content: space-between; } @media (max-width: 700px) { .choose-address__card-radio { padding: 15px 0 15px 0 } } .choose-address__card-radio-delivery { line-height: 38px; } @media (max-width: 700px) { .choose-address__card-radio-delivery { line-height: 20px; font-size: 16px; text-align: right; font-weight: bold; margin-left: 10px; display: flex; align-items: center } } @media (max-width: 380px) { .choose-address__card-radio-delivery { font-size: 12px } } .choose-address__card-radio-block { display: flex; } .choose-address__card-radio-block div:nth-child(2) { margin-left: 15px; } @media (max-width: 400px) { .choose-address__card-radio-block { font-size: 15px } } .choose-address__card_map { width: 100%; height: 580px; } .choose-address__card_map iframe { border: none; } @media (max-width: 1100px) { .choose-address__card_map { height: 350px } } .choose-address__card-delivery { display: flex; } @media (max-width: 874px) { .choose-address__card-delivery { flex-direction: column; padding-bottom: 20px } } .choose-address__card-delivery-input { flex: 1; } .choose-address__card-delivery-button { padding-left: 20px; } @media (max-width: 874px) { .choose-address__card-delivery-button { justify-content: center; display: flex; padding-left: 0 } } .hidden-map { visibility: hidden; display: none; } .catalog__title { font-style: normal; font-weight: normal; line-height: normal; font-size: 34px; letter-spacing: 0.25px; color: #000000; color: var(--block-title-color); margin: 0 0 12px; } .categories-wrapper { overflow-x: scroll; } .categories-2wrapper { position: relative; background-color: #FFFFFF; background-color: var(--card-bg-color); } .categories-2wrapper:after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 120px; background-color: #FFFFFF; background-color: var(--card-bg-color); z-index: 15; } .categories { list-style-type: none; display: flex; position: -webkit-sticky; position: sticky; top: 90px; z-index: 1; flex-flow: column wrap; justify-content: flex-start; padding: 8px; margin: 0; box-shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); box-shadow: var(--shadow); border: none; border-radius: 4px; background: #FFFFFF; background: var(--card-bg-color); font-style: normal; font-weight: 500; line-height: 16px; font-size: 14px; letter-spacing: 1.5px; min-width: 240px; background: #FFFFFF; background: var(--card-bg-color); } @media (max-width: 768px) { .categories { display: none } } @media (max-width: 1200px) { .categories { top: 100px } } .categories_top { flex-direction: row; flex-wrap: nowrap; padding: 3px 8px; box-shadow: none; border-radius: 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding-right: 120px; } .categories_top .accordion-item { width: auto; } .categories_top .accordion__header { padding: 4px 40px; } .categories_scroll { cursor: -webkit-grab; cursor: grab; } .categories--top { flex-direction: row; flex-wrap: nowrap; padding: 3px 8px; box-shadow: none; border-radius: 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding-right: 120px; } .categories--top .accordion-item { width: auto; } .categories--top .accordion__header { padding: 4px 40px; } .categories--scroll { cursor: -webkit-grab; cursor: grab; } .categories__item { text-decoration: none; color: #FDC975; color: var(--card-action-primary-color); padding: 8px; } .categories__item:hover { color: #000000; color: var(--card-item-primary-color); } .subcategories { position: relative; min-width: 200px; padding: 8px 0; } .subcategories:hover { background: rgb(242, 255, 255); background: rgb(242, 255, 255); } .subcategories .categories { display: none; position: absolute; top: 30px; left: 75%; margin-top: -1px; z-index: 15; box-shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); box-shadow: var(--shadow); } .subcategories:nth-child(2n) { background: rgb(249, 255, 255); background: rgb(249, 255, 255); } .categories .subcategories:hover > .categories { display: flex; z-index: 10; } .accordion-item { display: flex; flex-flow: column nowrap; overflow: auto; } .accordion-item { background: #FFFFFF; background: var(--card-bg-color); } .accordion__header { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 4px 16px; } .accordion__header:hover { background: rgb(249, 255, 255); background: rgb(249, 255, 255); } .accordion-arrow { color: #FDC975; color: var(--card-action-primary-color); width: 24px; height: 24px; } .accordion__header .accordion-arrow { transform: rotate(90deg); } .accordion__header_open .accordion-arrow { transform: none; } .accordion-item__content { display: none; overflow: auto; padding: 4px; } .accordion-item__content_category { flex-flow: column nowrap; padding: 0 0 0 20px; } .menu-filter-combo { position: -webkit-sticky; position: sticky; top: 0px; z-index: 15; } .filters { display: flex; flex-flow: row wrap; justify-content: flex-end; position: -webkit-sticky; position: sticky; top: 0px; padding: 0 0 8px 0; z-index: 15; background: #F6EBD9; background: var(--main-bg-color); } @media (max-width: 768px) { .filters { display: none } } .filters--combo { /*align-self: flex-end; flex-grow: 2;*/ } .filters__actions { display: flex; flex-flow: row nowrap; } .filter__button { display: flex; justify-content: space-between; align-items: center; border: none; border-radius: 200px; padding: 8px; margin: 8px 8px 8px 0; outline: none; font-style: normal; font-weight: 500; line-height: 14px; font-size: 12px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; text-decoration: none; background: #FDC975; background: var(--card-action-primary-color); color: #FFFFFF; color: var(--card-action-secondary-color); } .filter__button:hover { cursor: pointer; background: rgb(228, 185, 117); background: rgb(228, 185, 117); } .dropmic--show > .filter__button { background: rgb(189, 162, 117); background: rgb(189, 162, 117); } .filter__button--drop { background: #EC2427; background: var(--main-error-color); } .filter__button--drop:hover { background: rgb(211, 36, 39); background: rgb(211, 36, 39); } .filter__button--apply { margin: 8px 8px 0 0; } .filter__dropdown { display: flex; flex-flow: column nowrap; border: none; z-index: 25; padding: 8px; min-height: 40px; box-shadow: 0px 3px 5px 5px rgba(230, 230, 230, 0.456); box-shadow: var(--shadow); overflow-y: scroll; background: #F6EBD9; background: var(--dropdown-card-bg-color); } .filter__dropdown-footer { display: flex; justify-content: flex-end; align-items: center; margin: 8px 0 0 0; border-top: 1px solid hsl(0, 0%, 80%); border-top: 1px solid hsl(0, 0%, 80%); background: #F6EBD9; background: var(--dropdown-card-bg-color); } .price-filter-wrapper { display: flex; flex-flow: column nowrap; } .price-filter { display: flex; flex-flow: row nowrap; margin: 4px 0 4px 0; } .price-filter__label { display: flex; justify-content: center; align-items: center; border: none; border-radius: 4px 0 0 4px; padding: 8px 16px 8px 16px; outline: none; font-style: normal; font-weight: 500; line-height: 12px; font-size: 10px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; background: #FDC975; background: var(--dropdown-card-button-bg-color); color: #FFFFFF; color: var(--dropdown-card-button-font-color); } .price-filter__input { border: 2px solid #FDC975; border: 2px solid var(--dropdown-card-button-bg-color); border-radius: 0 4px 4px 0; box-sizing: border-box; padding: 6px; width: 80px; outline: none; font-style: normal; font-weight: 500; line-height: 16px; font-size: 14px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; } @media (max-width: 768px) { .price-filter__input { width: 60px } } .filter__title { font-style: normal; font-weight: 500; line-height: 16px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; } .filter__options { list-style-type: none; padding: 0 8px; margin: 4px 0; max-height: 80px; overflow: hidden; overflow-y: scroll; } .filter__options li { padding: 4px 4px 4px 0; } .filter__options li:nth-child(2n) { background: rgb(242, 233, 217); background: rgb(242, 233, 217); } .filter__option { display: flex; align-items: center; padding: 4px 4px 4px 0; } .filter__option .option-label { display: inline-block; margin: 0 0 0 8px; font-style: normal; font-weight: 500; line-height: 20px; font-size: 14px; letter-spacing: 1.5px; } .filter__option .option-label:hover { color: #FDC975; color: var(--dropdown-card-action-color); } .filter__option:hover .checkbox + label { background: hsl(37.05882352941177, 97.1428571429%, 90%); background: hsl(37.05882352941177, 97.1428571429%, 90%); } .filters__item { padding: 8px 8px 8px 0; } .catalog__subheader { display: flex; justify-content: space-around; margin: 20px 0; } @media (min-width: 769px) { .catalog__subheader { display: none } } .sidebar-accordion-item { display: flex; flex-flow: column nowrap; overflow: auto; background: #FFFFFF; background: var(--sidebar-bg-color); letter-spacing: 1px; } .sidebar-accordion__header { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 4px 16px; } .sidebar-accordion__header .sidebar-accordion-arrow { transform: rotate(90deg); } .sidebar-accordion__header_open .sidebar-accordion-arrow { transform: none; } .sidebar-accordion-item__content { display: none; overflow: auto; padding: 4px 0px 4px 8px; } .sidebar-accordion-item__content_filters { flex-flow: column nowrap; } .filter-mobile { padding: 6px 0 8px 12px; display: flex; align-items: center; color: #000000; color: var(--dropdown-card-item-color); } .filter-mobile > .option-label { line-height: 20px; font-size: 14px; letter-spacing: 1.5px; } .sidebar-accordion-item__content_category { flex-flow: column nowrap; } .price-filter-mobile { display: flex; justify-content: space-around; width: 100%; } .price-filter-wrapper--mobile { width: 100%; } .filter__options--mobile { width: 100%; } .products-grid-wrapper { padding: 4px; display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 20px; } @media (min-width: 1200px) { .products-grid-wrapper { grid-column-gap: 70px } } @media (max-width: 768px) { .products-grid-wrapper { grid-template-columns: 1fr } } /* products */ .products { display: grid; grid-template-columns: repeat(auto-fill, minmax(305px, 1fr)); grid-gap: 20px; } @media (max-width: 1200px) { .products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) } } @media (max-width: 768px) { .products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) } } @media (max-width: 480px) { .products { grid-template-columns: 1fr } } .products .card { display: flex; flex-direction: column; border-radius: 0 50px; overflow: hidden; transition: .4s ease; } @media (max-width: 480px) { .products .card { flex-direction: row; min-height: 133px; border-radius: 15px; border-radius: var(--border-radius-small) } } .products .card:hover { transform: translateY(-4px); } .products .card__image { flex-shrink: 0; position: relative; display: flex; width: 100%; cursor: pointer; } @media (max-width: 480px) { .products .card__image { max-width: 133px } } .products .card__image-tag { position: absolute; top: 7px; left: 9px; z-index: 1; } .products .card__image img { width: 100%; } .products .card__image_none { } .products .card__info { display: flex; flex-direction: column; grid-row-gap: 20px; background-color: #FFFAF1; background-color: var(--product-card-bg-color); box-sizing: border-box; width: 100%; flex-grow: 1; padding: 12px 20px 20px 20px; } @media (max-width: 480px) { .products .card__info { grid-row-gap: 4px; padding: 5px 4px 5px 10px } } .products .card__info-title { font-weight: 500; font-size: 20px; line-height: 24px; color: #000000; color: var(--product-card-main-text-color); margin: 0; } @media (max-width: 480px) { .products .card__info-title { font-size: 16px; line-height: 20px; padding-right: 12px; max-height: 40px; overflow: hidden } } .products .card__info-description { font-weight: 300; font-size: 16px; line-height: 19px; color: undefined; color: var(--main-card-description-color); margin: 0; } @media (max-width: 480px) { .products .card__info-description { font-size: 12px; line-height: 15px; max-height: 45px; overflow: hidden } } .products .card__info-action { display: flex; align-items: center; justify-content: space-between; grid-column-gap: 12px; height: 40px; margin-top: auto; } @media (max-width: 480px) { .products .card__info-action { height: 32px; grid-column-gap: 4px } } .products .card__info-action .action-price { font-weight: 500; font-size: 20px; line-height: 24px; color: #000000; color: var(--product-card-main-text-color); margin: 0; } @media (max-width: 480px) { .products .card__info-action .action-price { font-size: 12px; line-height: 19px } } .products .card__info-action .app-button { max-width: 152px; width: 100%; white-space: nowrap; } @media (max-width: 480px) { .products .card__info-action .app-button { font-size: 12px; line-height: 1; padding-top: 8px; padding-bottom: 8px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } } .products .card__info-action .app-counter { height: 100%; } @media (max-width: 480px) { .products .card__info-action .app-counter { max-width: 88px } } .products .card__info-action .action-link { width: 100%; max-width: 152px; } @media (max-width: 480px) { .products .card__info-action .action-link { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } } .products__empty-page { color: #000000; color: var(--block-title-color); } .pagination__wrapper { display: flex; justify-content: center; margin-top: 24px; } .pagination { display: flex; flex-flow: row nowrap; list-style: none; padding: 0; } .pagination__page { display: flex; justify-content: center; align-items: center; background: #FFFFFF; background: var(--card-bg-color); color: #000000; color: var(--card-item-primary-color); padding: 8px; margin: 8px; border-radius: 4px; text-decoration: none; transition: .4s ease; } .pagination__page:hover { color: #FDC975; color: var(--card-action-primary-color); } @media (max-width: 424px) { .pagination__page { margin: 2px } } .pagination__current { display: flex; justify-content: center; align-items: center; background: #FDC975; background: var(--card-action-primary-color); color: #FFFFFF; color: var(--card-action-secondary-color); padding: 8px; margin: 8px; border-radius: 4px; text-decoration: none; } @media (max-width: 424px) { .pagination__current { margin: 2px } } .pagination__button { border: none; border-radius: 0; align-items: center; display: flex; text-decoration: none; color: #000000; color: var(--card-item-primary-color); transition: .4s ease; } .pagination__button:hover { color: #FDC975; color: var(--card-action-primary-color); } /* ui */ /* featured products */ .featured-products { display: flex; flex-flow: column nowrap; justify-content: center; } .featured-products__title { font-style: normal; font-weight: normal; line-height: normal; font-size: 34px; letter-spacing: 0.25px; color: #000000; color: var(--block-title-color); margin: 0 0 20px 0; } /* feedback form */ .feedback-form-padding { padding: 0 88px; } .feedback-form__checkbox { display: flex; flex-flow: row nowrap; padding: 0 0 16px 0; } .feedback-form__checkbox-label { width: 300px; font-style: normal; font-weight: 500; line-height: 20px; font-size: 14px; letter-spacing: 1.5px; color: #000000; color: var(--card-item-primary-color); } .feedback-form__checkbox-label a { color: #FDC975; color: var(--card-action-primary-color); text-decoration: none; } .feedback-form__checkbox-label a:hover { text-decoration: underline; } .feedback-form__checkbox-label.invalid a { color: #EC2427; color: var(--main-error-color); } .feedback-form__checkbox-content { display: flex; flex-flow: row wrap; align-items: center; } .feedback-form__output-wrapper_half { box-sizing: border-box; flex-basis: 40%; margin: 8px; padding: 10px; } @media (max-width: 560px) { .feedback-form__output-wrapper_half { flex-basis: 90% } } .feedback-form__title { font-size: 24px; font-weight: 500; color: #000000; color: var(--main-font-color); margin: 50px 0 30px 10px; } .delivery-time { display: flex; justify-content: space-between; } @media (max-width: 600px) { .delivery-time { flex-direction: column } } .delivery-date { width: 45%; } @media (max-width: 600px) { .delivery-date { width: 100% } } .delivery-time-title { margin-left: 20px; padding-top: 10px; padding-bottom: 10px; } .delivery-intervals-select { width: 100%; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; grid-area: select; border: none; font-size: 14px; background: none; } .delivery-intervals-select__triangle { width: 100%; display: grid; grid-template-areas: "select"; align-items: center; position: relative; padding: 0 10px; border-radius: 5px; border: none; } .delivery-intervals-select__triangle:after { grid-area: select; content: ""; justify-self: end; width: 0.8em; height: 0.5em; background-color: #000000; background-color: var(--main-font-color); opacity: .6; -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%); clip-path: polygon(100% 0%, 0 0%, 50% 100%); } .feedback-form__input-wrapper { position: relative; display: flex; flex-flow: row nowrap; border: 1px solid #808080; border: var(--border) var(--main-border-color); box-sizing: border-box; border-radius: 15px; border-radius: var(--border-radius-small); padding: 15px; margin-bottom: 28px; } .feedback-form__input-wrapper input { width: 100%; border: none; outline: none; font-style: normal; font-weight: normal; line-height: 20px; font-size: 16px; letter-spacing: 0.25px; color: #000000; color: var(--main-font-color); background: none; } .feedback-form__input-wrapper .prompt-list { z-index: 9999; position: absolute; top: 46px; left: 2px; width: 100%; border-radius: 15px; border-radius: var(--border-radius-small); border: 1px solid #808080; border: var(--border) var(--main-border-color); background: #FFFAF1; background: var(--main-card-bg-color); padding: 15px 0 15px 15px; } .feedback-form__input-wrapper .prompt-list .prompt { line-height: 19px; font-size: 16px; border-radius: 15px; border-radius: var(--border-radius-small); cursor: pointer; padding: 8px 0 8px 20px; } .feedback-form__input-wrapper .prompt-list .prompt:hover { background: #FDC975; background: var(--footer-title-color); } .feedback-form__input-wrapper .prompt-list div:last-child { border-bottom: black 1px solid; } .feedback-form__input-wrapper input::-moz-placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); } .feedback-form__input-wrapper input:-ms-input-placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); } .feedback-form__input-wrapper input::placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); } .feedback-form__input-wrapper label { position: absolute; top: -20px; padding: 0 2px 0 2px; font-style: normal; font-weight: normal; line-height: 16px; font-size: 12px; letter-spacing: 0.4px; color: #808080; color: var(--input-default-color); } .feedback-form__input-wrapper .invalid { border: 2px solid #EC2427; border: 2px solid var(--main-error-color); } .feedback-form__textarea-wrapper .invalid { border: 2px solid #EC2427; border: 2px solid var(--main-error-color); } .feedback-form__input-wrapper span { position: absolute; bottom: -18px; font-style: normal; font-weight: normal; line-height: 16px; font-size: 12px; letter-spacing: 0.4px; color: #EC2427; color: var(--main-error-color); } .feedback-form__input-wrapper.invalid { border: 2px solid #EC2427; border: 2px solid var(--main-error-color); } .feedback-form__input-wrapper label.invalid { color: #EC2427; color: var(--main-error-color); } .feedback-form__textarea-wrapper { position: relative; display: flex; flex-flow: column nowrap; padding: 0 0 24px 0; } .feedback-form__textarea-wrapper textarea { outline: none; resize: none; border-radius: 15px; border-radius: var(--border-radius-small); border: 1px solid #808080; border: var(--border) var(--input-default-color); padding: 8px; font-style: normal; font-weight: normal; line-height: 20px; font-size: 14px; letter-spacing: 0.25px; color: #000000; color: var(--input-font-color); background: #FFFFFF; background: var(--card-bg-color); } .feedback-form__textarea-wrapper textarea::-moz-placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); } .feedback-form__textarea-wrapper textarea:-ms-input-placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); } .feedback-form__textarea-wrapper textarea::placeholder { color: hsl(0, 0%, 60%); color: hsl(0, 0%, 60%); } .feedback-form__textarea-wrapper label { position: absolute; top: -8px; left: 9px; padding: 0 2px 0 2px; font-style: normal; font-weight: normal; line-height: 16px; font-size: 12px; letter-spacing: 0.4px; color: #FDC975; color: var(--card-action-primary-color); background: #FFFFFF; background: var(--card-bg-color); } .feedback-form__button-wrapper { display: flex; flex-direction: row; justify-content: end; margin-bottom: 50px; } @media (max-width: 400px) { .feedback-form__button-wrapper { width: 200px } } .feedback-form__button-large { width: 100%; } .scalable-img { width: 100%; } /* product card */ .card__image-wrapper { position: relative; display: block; width: 100%; padding: 0; cursor: pointer; } .card__image--none { text-decoration: none; display: flex; align-items: center; justify-content: center; border: none; outline: none; background: none; color: #000000; color: var(--card-font-color); border-radius: 15px; border-radius: var(--border-radius-small); } .card__image--none::before { content: '\f82a'; color: #FFFFFF; color: var(--main-secondary-color); padding: 95px; display: inline-block; font: normal normal normal 24px/1 "Material Design Icons"; font-size: 70px; text-rendering: auto; line-height: inherit; } .card__image-label { position: absolute; top: 10px; left: 10px; padding: 11px 21px; background: #EF8B18; background: var(--hit-bg-color); border: 2px solid #EF8B18; border: 2px solid var(--hit-border-color); border-radius: 20px; border-radius: var(--border-radius-medium); font-weight: 900; font-size: 14px; line-height: 17px; color: #F1F1F1; color: var(--main-font-secondary-color); text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } .card__info { display: flex; flex-flow: column nowrap; height: 100%; padding: 11px 20px; background: #FFFAF1; background: var(--main-card-bg-color); } .card__main-info { display: flex; justify-content: space-between; } .card__title { font-style: normal; font-weight: 500; line-height: normal; font-size: 20px; line-height: 24px; color: #000000; color: var(--card-font-color); } .card__price { color: #000000; color: var(--card-font-color); min-width: 70px; } .card__description { font-style: normal; font-weight: 300; line-height: 19px; font-size: 16px; color: rgba(0, 0, 0, 0.7); color: var(--card-font-color-70); min-height: 32px; } .card__description p { margin: 20px 0; } .card__actions { margin: auto 0 0 0; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; grid-column-gap: 2px; height: 40px; } .card__actions a { width: 100%; } .card__actions .app-button { width: 100%; max-width: 152px; min-height: 100%; } .card__actions .app-counter { height: 100%; } .card__actions .card__price { font-weight: 500; font-size: 20px; line-height: 24px; } .card__button_disabled { opacity: 0.6; } .card__button_disabled:hover { cursor: default; opacity: 0.6; background: #E6E6E6; background: var(--button-bg-disabled-color); color: #808080; color: var(--button-font-disabled-color); } /* slider */ .admin-slider { display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 10px 0; border-bottom: 1px solid #FFFFFF; border-bottom: 1px solid var(--main-secondary-color); } .admin-slider__title { margin: 0; line-height: 26px; font-size: 28px; font-weight: 500; letter-spacing: 0.5px; } .admin-slider__link { position: relative; text-decoration: none; border-radius: 200px; display: flex; align-items: center; justify-content: space-around; min-width: 100px; min-height: 34px; border: none; padding: 5px 20px; outline: none; font-style: normal; font-weight: 500; line-height: 16px; font-size: 14px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; background: #FDC975; background: var(--header-item-color); color: #F6EBD9; color: var(--header-bg-color); } .admin-slider__link:hover { background: rgb(228, 185, 117); background: rgb(228, 185, 117); cursor: pointer; } .slider-wrapper { position: relative; background: #FDC975; background: var(--main-color); } /* вынужденная мера, так как в нужом месте стили изолированны и до них нет доступа из-за Vue */ .swiper-size_copied { height: 500px; width: 100%; } @media (max-width: 1440px) { .swiper-size_copied { height: 500px } } @media (max-width: 1200px) { .swiper-size_copied { height: 400px; width: 100% } } @media (max-width: 990px) { .swiper-size_copied { height: 300px; width: 100% } } @media (max-width: 600px) { .swiper-size_copied { height: 230px } } @media (max-width: 414px) { .swiper-size_copied { height: 200px } } /* вынужденная мера, так как в нужом месте стили изолированны и до них нет доступа из-за Vue */ .swiper-size_copied { height: 500px; width: 100%; } @media (max-width: 1440px) { .swiper-size_copied { height: 500px } } @media (max-width: 1200px) { .swiper-size_copied { height: 400px; width: 100% } } @media (max-width: 990px) { .swiper-size_copied { height: 300px; width: 100% } } @media (max-width: 600px) { .swiper-size_copied { height: 230px } } @media (max-width: 414px) { .swiper-size_copied { height: 200px } } .slider__container { height: 100%; } .slide { position: relative; } .slide__shadow { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 22; background: linear-gradient( to bottom, rgba(237, 237, 237, 0) 0%, #F6EBD9 100% ); background: var(--slide-overlay); } .prev, .next { position: absolute; top: calc(50% - 36px / 2); cursor: pointer; background: none; border: none; outline: none; color: #000000; color: var(--slider-action-secondary-color); } .prev:hover, .next:hover { color: #FDC975; color: var(--slider-action-primary-color); } .prev { left: 0; } .next { right: 0; } .slide__img { width: 100%; } .slide__content { z-index: 23; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: flex-end; padding: 20px; } .slide__info { display: flex; flex-flow: column nowrap; } .slide__title { margin: 0; font-style: normal; font-weight: normal; line-height: normal; font-size: 34px; letter-spacing: 0.25px; } @media (max-width: 767px) { .slide__title { font-size: 24px } } .slide__body { margin: 0; font-style: normal; font-weight: normal; line-height: 28px; font-size: 18px; letter-spacing: 0.5px; } @media (max-width: 767px) { .slide__body { line-height: 16px; font-size: 12px } } .slide__button { text-decoration: none; font-style: normal; font-weight: 500; line-height: 22px; font-size: 20px; letter-spacing: 0.75px; text-transform: uppercase; color: #FDC975; color: var(--slider-action-primary-color); } .slide__button:hover { color: #000000; color: var(--slider-action-secondary-color); } @media (max-width: 767px) { .slide__button { line-height: 18px; font-size: 16px } } /* slide List */ .slide-list { position: relative; min-height: inherit; padding: 20px 0; } @media (max-width: 425px) { .slide-list { padding: 20px 0 } } .slide-list__content { counter-reset: li; list-style: none; font: 14px "Trebuchet MS", "Lucida Sans"; padding: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); } .slide-list__content li { display: flex; margin-bottom: 10px; } .slide-list__content a { position: relative; display: block; border-radius: 5px; width: 100%; padding: .4em .4em .4em .8em; margin: 0 0 0 2.5em; background: #FDC975; background: var(--header-item-color); color: #000000; color: var(--header-nav-item-color); text-decoration: none; transition: all .3s ease-out; } .slide-list__content a:hover { background: rgb(228, 185, 117); background: rgb(228, 185, 117) } .slide-list__content a:before { content: counter(li); counter-increment: li; position: absolute; border-radius: 5px; left: -2.5em; top: 50%; margin-top: -1em; background: #FDC975; background: var(--header-item-color); color: #000000; color: var(--header-nav-item-color); height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; } .slide-list__content a:after { position: absolute; content: ""; border: .5em solid transparent; left: -1em; top: 50%; margin-top: -.5em; transition: all .3s ease-out; } .slide-list__content a:hover:after { left: -.5em; border-left-color: #FDC975; border-left-color: var(--header-item-color); } @media (max-width: 480px) { .slide-list__create-new { padding-top: 10px; text-align: center } } .slide-list__button-delete { position: relative; text-decoration: none; border-radius: 200px; display: flex; align-items: center; background: #FDC975; background: var(--header-item-color); color: #F6EBD9; color: var(--header-bg-color); padding: 0px 20px; } .slide-list__button-create { float: right; padding: 10px 20px; align-items: center; text-decoration: none; border-radius: 200px; background: #FDC975; background: var(--header-item-color); color: #F6EBD9; color: var(--header-bg-color); } @media (max-width: 480px) { .slide-list__button-create { float: none } } .slide-list__button-delete:hover, .slide-list__button-create:hover { background: rgb(228, 185, 117); background: rgb(228, 185, 117); cursor: pointer; } /* slide customization */ .slide-customization { position: relative; min-height: inherit; padding: 20px 0; } @media (max-width: 425px) { .slide-customization { padding: 20px 0 } } .slide-customization__title { font-family: Roboto; font-weight: normal; font-style: normal; font-size: 34px; letter-spacing: 0.25px; color: #000000; color: var(--main-font-color); margin-top: 0; } .slide-customization__image-wrapper { width: 100%; } .slide-customization__image-wrapper img { width: 100%; background-image: url('data:image/gif;base64,R0lGODlhCgAIAIABAN3d3f///yH5BAEAAAEALAAAAAAKAAgAAAINjAOnyJv2oJOrVXrzKQA7'); } .slide-customization__options { display: flex; align-items: center; padding: 30px 0; } .slide-customization__customizationer { position: relative; display: inline-block; width: 60px; height: 34px; } .slide-customization__checkbox { position: absolute; z-index: -1; opacity: 0; } .slide-customization__lever { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #FFFFFF; background-color: var(--main-secondary-color); transition: .4s; border-radius: 34px; } .slide-customization__lever::before { position: absolute; border-radius: 50%; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: #FFFAF1; background-color: var(--main-card-bg-color); transition: .4s; } .slide-customization__lever:hover { background-color: rgb(230, 255, 255); background-color: rgb(230, 255, 255); } .slide-customization__checkbox:checked + .slide-customization__lever { background-color: #FDC975; background-color: var(--main-color); } /*#2196F3 */ .slide-customization__checkbox:checked + .slide-customization__lever:hover { background-color: rgb(228, 185, 117); background-color: rgb(228, 185, 117); } .slide-customization__checkbox:focus + .slide-customization__lever { box-shadow: 0 0 1px #FDC975; box-shadow: 0 0 1px var(--main-color); /*#2196F3 */ } .slide-customization__checkbox:checked + .slide-customization__lever::before { transform: translateX(26px); } .slide-customization__select { width: 49%; height: 35px; font-size: 1.2rem; } .slide-customization__input-field { position: relative; margin-top: 25px; padding: 15px 0 0; width: 50%; } .slide-customization__textarea { font-family: inherit; width: 100%; border: 0; border-bottom: 2px solid #808080; border-bottom: 2px solid var(--main-border-color); outline: 0; font-size: 1.3rem; padding: 7px 0; } .slide-customization__textarea::-moz-placeholder { color: transparent; } .slide-customization__textarea:-ms-input-placeholder { color: transparent; } .slide-customization__textarea::placeholder { color: transparent; } .slide-customization__textarea:-moz-placeholder-shown ~ .slide-customization__field-label { font-size: 1.3rem; cursor: text; top: 20px; } .slide-customization__textarea:-ms-input-placeholder ~ .slide-customization__field-label { font-size: 1.3rem; cursor: text; top: 20px; } .slide-customization__textarea:placeholder-shown ~ .slide-customization__field-label { font-size: 1.3rem; cursor: text; top: 20px; } .slide-customization__field-label { position: absolute; top: -15px; display: block; transition: 0.2s; font-size: 1rem; } .slide-customization__textarea:focus ~ .slide-customization__field-label { position: absolute; top: -15px; display: block; transition: 0.2s; font-size: 1rem; padding-bottom: 6px; font-weight: 400; } .slide-customization__action { display: flex; flex-direction: row; justify-content: space-between; padding: 20px 0; } .slide-customization__button { position: relative; text-decoration: none; border-radius: 200px; display: flex; align-items: center; justify-content: space-around; border: none; padding: 10px 20px; outline: none; font-style: normal; font-weight: 500; line-height: 16px; font-size: 14px; text-align: center; letter-spacing: 0.75px; text-transform: uppercase; background: #FDC975; background: var(--header-item-color); color: #F6EBD9; color: var(--header-bg-color); } .slide-customization__button:hover { background: rgb(228, 185, 117); background: rgb(228, 185, 117); cursor: pointer; } /* slider */ .swiper-slide { height: 100% !important; } .swiper-slide__block { display: flex; align-items: center; } .swiper-slide__img { height: 100% !important; width: 130% !important; border-radius: none !important; transform: translateX(10%); } .swiper-slide__description h3 { font-weight: 700; font-size: 80px; line-height: 97px; text-transform: uppercase; } .swiper-slide__description p { font-weight: 400; font-size: 24px; line-height: 29px; text-transform: lowercase; } .swiper-pagination-bullets { bottom: 30px; } .swiper-pagination-bullet { background-color: #FFFAF1 !important; background-color: var(--main-card-bg-color) !important; opacity: 1; } @media (min-width: 768px) { .swiper-pagination-bullet { height: 16px; width: 16px } } .swiper-pagination-bullet-active { background-color: #EC2427 !important; background-color: var(--main-error-color) !important; } .toasted-outer .toasted.toasted-inner { border-radius: 15px; border-radius: var(--border-radius-small); padding: 30px 50px; background: #271D17; background: var(--main-footer-background-color); } /* SKELETON-ANIMATION */ /* 1) добавь новый контейнер с классом задающим необходимые высоту, ширину */ /* 2) добавь в этот же контейнер класс skeleton-animation */ /* 3) на html разметке по условию загрузки if-else сделай вывод нужного блока */ .skeleton-animation { position: relative; overflow: hidden; background-color: #808080; background-color: var(--skeleton-bg); } .skeleton-animation:before { content: ''; position: absolute; top: 0; left: 0; right: 0; width: 300%; height: 100%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%); background: var(--skeleton-gradient); -webkit-animation: shimmer 2s infinite linear; animation: shimmer 2s infinite linear; } @-webkit-keyframes shimmer { 0% { transform: translateX(-220%); } 100% { transform: translateX(220%); } } @keyframes shimmer { 0% { transform: translateX(-220%); } 100% { transform: translateX(220%); } } /* feedback */ .feedback-title { font-size: 32px; font-weight: 700; margin-bottom: 10px; } .feedback-wrapper { display: flex; flex-direction: row; justify-content: center; margin: 50px 0; } .feedback-img { margin: auto; } @media (max-width: 1200px) { .feedback-img { display: none; } } @media (max-width: 500px) { .feedback-form-padding { padding: 0 30px; } } @media (max-width: 380px) { .feedback-form-padding { padding: 0 15px; } } /* about */ .about-title { font-size: 32px; font-weight: 700; color: #000000; color: var(--main-font-color); margin-bottom: 20px; } .about-content { display: flex; } .about-description { width: 100%; text-align: left; margin-bottom: 20px; } .about-description h1 { font-size: 24px; font-weight: 700; } .about-description p:nth-child(2) { margin-bottom: 50px; } .about-company-images img { border-radius: 20px; border-radius: var(--border-radius-medium); margin-left: 60px; margin-bottom: 50px; } @media (max-width: 768px) { .about-company-images img { display: none } } .about-cards { display: flex; } .about-card-content { border: 1px solid #000000; border: var(--border) var(--main-font-color); background-color: #F1F1F1; background-color: var(--main-font-secondary-color); margin-right: 20px; margin-bottom: 100px; padding: 50px; border-radius: 15px; border-radius: var(--border-radius-small); text-align: left; width: 100%; } .about-card-content-title { font-size: 24px; font-weight: 700; color: #000000; color: var(--main-font-color); padding-bottom: 20px; } .about-card-content-description { font-size: 20px; color: #000000; color: var(--main-font-color); } .about-subtitle { font-size: 24px; font-weight: 700; color: #000000; color: var(--main-font-color); margin-top: 100px; margin-bottom: 30px; margin-right: 20px; } @-webkit-keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } } /* UI BLOCK START */ /* частный случай app-input */ .app-input_approved input { padding-right: 140px; } .app-input_approved .app-input__status { position: absolute; right: 20px; bottom: 16px; display: flex; align-items: center; grid-column-gap: 5px; height: 19px; font-size: 14px; line-height: 17px; color: #8BC5B6; color: var(--profile-aprove-color); pointer-events: none; } .app-input_approved .app-input__status-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; stroke: #8BC5B6; stroke: var(--profile-aprove-color); color: #B8320D; color: var(--input-error-color); } /* app-select */ .app-select { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 70px; } .app-select__label { font-weight: 400; font-size: 12px; line-height: 16px; color: #808080; color: var(--select-main-color); padding-left: 20px; } .app-select__button { position: relative; display: flex; align-items: center; justify-content: space-between; grid-column-gap: 8px; text-align: left; width: 100%; height: 50px; border: 1px solid #808080; border: var(--border) var(--select-main-color); border-radius: 15px; border-radius: var(--border-radius-small); padding: 15px 20px 15px 20px; line-height: 22px; color: #000000; color: var(--select-font-color); } .app-select__button-text { pointer-events: none; } .app-select__button-icon { height: 20px; width: 20px; pointer-events: none; transform: rotate(0); transition: .3s ease; } .app-select__button-icon img { height: 100%; width: auto; } .app-select__button_active .app-select__button-icon { transform: rotate(180deg); transition: .3s ease; } .app-select__button:disabled { cursor: default; } .app-select__list { display: none; position: absolute; left: 0; max-height: 465px; overflow-y: auto; top: calc(100% + 3px); box-sizing: border-box; list-style-type: none; background-color: #FFFAF1; background-color: var(--select-list-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); border: 1px solid #808080; border: var(--border) var(--select-main-color); width: 100%; margin: 0; padding: 0 0 22px 0; z-index: 1; } .app-select__list_visible { display: block; } .app-select__list-item { position: relative; display: flex; align-items: center; grid-column-gap: 8px; margin: 0; padding: 18px 22px 10px 22px; cursor: pointer; } .app-select__list-item:after { content: ''; position: absolute; bottom: 0; left: 22px; right: -22px; background-color: #808080; background-color: var(--select-main-color); height: 1px; width: calc(100% - 44px); } .app-select__list-item:hover { background-color: #F6EBD9; background-color: var(--select-list-hovered-color); } .app-select__list-item_active { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.16797 9.16634L9.16797 14.1663L17.5013 5.83301' stroke='%23333333' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-image: var(--select-active-item-checkmark); background-position: right 22px top 18px; background-repeat: no-repeat; } /* UI BLOCK END */ .toasted-outer .toasted.toasted-inner { border-radius: 15px; border-radius: var(--border-radius-small); padding: 30px 50px; background: #271D17; background: var(--main-footer-background-color); } /* SKELETON-ANIMATION */ /* 1) добавь новый контейнер с классом задающим необходимые высоту, ширину */ /* 2) добавь в этот же контейнер класс skeleton-animation */ /* 3) на html разметке по условию загрузки if-else сделай вывод нужного блока */ .skeleton-animation { position: relative; overflow: hidden; //background-color: #808080; //background-color: var(--skeleton-bg); } .skeleton-animation:before { content: ''; position: absolute; top: 0; left: 0; right: 0; width: 300%; height: 100%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%); background: var(--skeleton-gradient); -webkit-animation: shimmer 2s infinite linear; animation: shimmer 2s infinite linear; } @keyframes shimmer { 0% { transform: translateX(-220%); } 100% { transform: translateX(220%); } } /* app-counter */ /* TODO вынести в макросы */ .app-counter { display: flex; align-items: center; justify-content: space-between; grid-column-gap: 2px; height: 35px; border: 1px solid #000000; border: var(--border) var(--counter-border-color); border-radius: 30px; box-sizing: border-box; overflow: hidden; } .app-counter__button { position: relative; display: flex; width: 34px; height: 100%; transition: .3s ease-in-out; } .app-counter__button_negative { border-radius: 20px 0 0 20px; border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); position: relative; } .app-counter__button_negative:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 16px; height: 2px; background-color: #333333; background-color: var(--counter-default-color); } .app-counter__button_positive { border-radius: 0 20px 20px 0; border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; position: relative; } .app-counter__button_positive:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 16px; height: 2px; background-color: #333333; background-color: var(--counter-default-color); } .app-counter__button_positive:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 2px; height: 16px; background-color: #333333; background-color: var(--counter-default-color); } .app-counter__button:hover { background-color: #333333; background-color: var(--counter-default-color); } .app-counter__button:active { background-color: #262626; background-color: var(--counter-active-color); } .app-counter__button:hover.app-counter__button_negative:before, .app-counter__button:hover.app-counter__button_positive:after, .app-counter__button:hover.app-counter__button_positive:before, .app-counter__button:active.app-counter__button_negative:before, .app-counter__button:active.app-counter__button_positive:after, .app-counter__button:active.app-counter__button_positive:before { background-color: #F1F1F1; background-color: var(--counter-icon-hovered-color); } .app-counter__count { width: 28px; text-align: center; font-weight: 500; line-height: 22px; color: #000000; color: var(--counter-border-color); } /* app-accordion */ .app-accordion__btn { display: flex; align-items: center; justify-content: space-between; grid-column-gap: 2px; width: 100%; padding: 6px; border: none; outline: none; transition: .4s ease; } .app-accordion__btn-text { line-height: 1; } .app-accordion__btn img, .app-accordion__btn svg { height: 16px; width: 16px; transition: .4s ease; } .app-accordion .is-active img, .app-accordion .is-active svg { transform: rotate(180deg); } .app-accordion__content { overflow: hidden; transition: max-height .2s ease-out; margin: 0; } /* UI BLOCK END */ .loyalty-program__card { background-color: #FFFAF1; background-color: var(--main-card-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); padding: 20px; margin-right: 20px; width: 305px; height: 200px; display: flex; flex-direction: column; justify-content: space-between; } @media (max-width: 1000px) { .loyalty-program__card { margin-right: 0; margin-top: 20px } } @media (max-width: 1200px) { .loyalty-program__card { padding: 15px } } .loyalty-program__card:last-child { margin-right: 0; } .loyalty-program__card-top { display: flex; justify-content: space-between; align-items: center; } .loyalty-program__card-title { font-size: 24px; } .loyalty-program__card-percent { font-weight: bold; font-size: 24px; padding: 20px 0; } @media (max-width: 1200px) { .loyalty-program__card-percent { padding: 0 } } @media (max-width: 770px) { .loyalty-program__card-img { display: block } } .loyalty-program__content-img { width: 50%; } @media (max-width: 770px) { .loyalty-program__content-img { display: none } } .loyalty-program__card-description { padding-bottom: 15px; } .loyalty-program__cards { display: flex; justify-content: space-around; } @media (max-width: 1000px) { .loyalty-program__cards { flex-direction: column; align-items: center } } .loyalty-program__content { display: flex; align-items:center; } @media (max-width: 770px) { .loyalty-program__content { justify-content: center } } .loyalty-program__accordions li, ul{ margin: 10px 0; } .loyalty-program__accordions { background-color: #FFFAF1; background-color: var(--main-card-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); display: flex; justify-content: space-between; flex-direction: column; padding: 30px; margin-top: 50px; margin-bottom: 50px; height: 100%; width: 600px; } .loyalty-program__accordion-title { display: flex; cursor: pointer; } .loyalty-program__accordion-title img { margin-left: 20px; } .loyalty-program__accordion-content { max-height: 0; overflow: hidden; transition: all 300ms ease; } .active .loyalty-program__accordion-arrow { transition: all 0.25s cubic-bezier(0.5, 0, 0.1, 1); transform: rotate(180deg); } .loyalty-program__card { background-color: #FFFAF1; background-color: var(--main-card-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); padding: 20px; margin-right: 20px; width: 305px; height: 200px; display: flex; flex-direction: column; justify-content: space-between; } @media (max-width: 1000px) { .loyalty-program__card { margin-right: 0; margin-top: 20px } } @media (max-width: 1200px) { .loyalty-program__card { padding: 15px } } .loyalty-program__card:last-child { margin-right: 0; } .loyalty-program__card-top { display: flex; justify-content: space-between; align-items: center; } .loyalty-program__card-title { font-size: 24px; } .loyalty-program__card-percent { font-weight: bold; font-size: 24px; padding: 20px 0; } @media (max-width: 1200px) { .loyalty-program__card-percent { padding: 0 } } @media (max-width: 770px) { .loyalty-program__card-img { display: block } } .loyalty-program__content-img { width: 50%; } @media (max-width: 770px) { .loyalty-program__content-img { display: none } } .loyalty-program__card-description { padding-bottom: 15px; } .loyalty-program__cards { display: flex; justify-content: space-around; } @media (max-width: 1000px) { .loyalty-program__cards { flex-direction: column; align-items: center } } .loyalty-program__content { display: flex; align-items:center; } @media (max-width: 770px) { .loyalty-program__content { justify-content: center } } .loyalty-program__accordions li, ul{ margin: 10px 0; } .loyalty-program__accordions { background-color: #FFFAF1; background-color: var(--main-card-bg-color); border-radius: 15px; border-radius: var(--border-radius-small); display: flex; justify-content: space-between; flex-direction: column; padding: 30px; margin-top: 50px; margin-bottom: 50px; height: 100%; width: 600px; } .loyalty-program__accordion-title { display: flex; cursor: pointer; } .loyalty-program__accordion-title img { margin-left: 20px; } .loyalty-program__accordion-content { max-height: 0; overflow: hidden; transition: all 300ms ease; } .active .loyalty-program__accordion-arrow { transition: all 0.25s cubic-bezier(0.5, 0, 0.1, 1); transform: rotate(180deg); } .app-accordion__btn-text { font-weight: 700; font-size: 16px; line-height: 19px; color: #333333; } .app-accordion__content { display: flex; flex-direction: column; grid-row-gap: 4px; margin: 8px 0 0 4px; overflow-y: auto; } /*TODO: подумать над аккордионом, чтобы избежать important*/ .app-accordion__content.hidden { max-height: 0!important; } .scroll-container[data-v-633a381e] { overflow-x: auto; overflow-y: hidden; } .vd-wrapper,.vd-wrapper *,.vd-wrapper :after,.vd-wrapper :before{box-sizing:border-box}.vd-wrapper{position:relative;display:flex;flex:1 1 auto;align-items:center;max-width:100%;cursor:default}.vd-wrapper:not(.vd-wrapper--inline){cursor:pointer}.vd-wrapper:active,.vd-wrapper:focus{outline:0}.vd-wrapper--inline{width:304px;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.vd-wrapper--disabled{pointer-events:none}.vd-activator{display:flex;flex:1 1 auto;max-width:100%}.vd-menu,.vd-menu *,.vd-menu :after,.vd-menu :before{box-sizing:border-box}.vd-menu{display:none}.vd-menu--attached{display:inline}.vd-menu__activator{display:flex;align-items:center;cursor:pointer}.vd-menu *{cursor:pointer}.vd-menu__content{position:absolute;display:inline-block;border-radius:6px;max-width:80%;overflow-y:auto;overflow-x:hidden;contain:content;background-color:#fff;will-change:transform;box-shadow:0 2px 8px rgba(50,50,93,.2)}.vd-menu__content--fixed{position:fixed}.vd-menu__content--bottomsheet{position:fixed;top:auto!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;min-width:100%!important;border-radius:12px 12px 0 0}@supports (padding-bottom:constant(safe-area-inset-bottom)){.vd-menu__content--bottomsheet{--safe-area-inset-bottom:constant(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}@supports (padding-bottom:env(safe-area-inset-bottom)){.vd-menu__content--bottomsheet{--safe-area-inset-bottom:env(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}.vd-menu-transition-leave-active,.vd-menu-transition-leave-to{pointer-events:none}.vd-menu-transition-enter,.vd-menu-transition-leave-to{opacity:0}.vd-menu-transition-enter-active,.vd-menu-transition-leave-active{transition:all .3s cubic-bezier(.25,.8,.25,1);transition-property:opacity,transform}.vd-picker__input-clear__icon button{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__input-clear__icon button:active,.vd-picker__input-clear__icon button:focus{outline:0;box-shadow:0}.vd-picker__input-clear__icon button[role=button],.vd-picker__input-clear__icon button[type=button],.vd-picker__input-clear__icon button[type=reset],.vd-picker__input-clear__icon button[type=submit]{cursor:pointer}.vd-picker__input{position:relative;display:flex;flex:1 1 auto;align-items:center;color:inherit;min-height:inherit}.vd-wrapper--rtl .vd-picker__input{direction:rtl}.vd-wrapper--rtl .vd-picker__input button,.vd-wrapper--rtl .vd-picker__input input[type=text]{margin:0 8px 0 0}.vd-picker__input--disabled{cursor:not-allowed;pointer-events:none}.vd-picker__input--disabled .vd-picker__input-icon__wrapper,.vd-picker__input--disabled input{opacity:.38}.vd-picker__input--no-calendar-icon button,.vd-picker__input--no-calendar-icon input{margin:0}.vd-picker__input-clear{align-self:flex-start;line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vd-picker__input-clear,.vd-picker__input-clear__icon{display:inline-flex}.vd-picker__input-clear__icon{justify-content:center;align-items:center;flex:1 0 auto}.vd-picker__input-clear__icon,.vd-picker__input-clear__icon .vd-icon.vd-icon{height:24px;min-width:24px;width:24px}.vd-picker__input-icon{align-self:flex-start;margin-top:4px;margin-right:auto;padding-right:4px;line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vd-picker__input-icon,.vd-picker__input-icon__wrapper{display:inline-flex}.vd-picker__input-icon__wrapper{align-items:center;height:24px;flex:1 0 auto;justify-content:center;min-width:24px;width:24px}.vd-picker__input input{position:relative;flex:1 1 auto;max-height:32px;padding:8px 0;max-width:100%;min-width:0;width:100%;background-color:transparent;border-style:none;color:inherit;font-stretch:normal;line-height:inherit;font-size:16px!important;font-weight:400;font-family:inherit;color:currentColor;cursor:inherit}.vd-picker__input input:active,.vd-picker__input input:focus{outline:0;box-shadow:none}.vd-picker__input input.placeholder{opacity:.6}.vd-picker__input input::-moz-placeholder{opacity:.6}.vd-picker__input input:-ms-input-placeholder{opacity:.6}.vd-picker__input input::placeholder{opacity:.6}.vd-picker__input input:-moz-placeholder,.vd-picker__input input::-moz-placeholder{opacity:.6}.vd-picker__input input:-ms-input-placeholder{opacity:.6}.vd-picker__input input::-webkit-input-placeholder{opacity:.6}.vd-icon.vd-icon{display:inline-flex;align-items:center;justify-content:center;letter-spacing:normal;line-height:1;text-indent:0;transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:transform,color;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vd-icon--link{cursor:pointer}.vd-icon--disabled{pointer-events:none;opacity:.6}.vd-picker__title-close button{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__title-close button:active,.vd-picker__title-close button:focus{outline:0;box-shadow:0}.vd-picker__title-close button[role=button],.vd-picker__title-close button[type=button],.vd-picker__title-close button[type=reset],.vd-picker__title-close button[type=submit]{cursor:pointer}.vd-picker,.vd-picker *,.vd-picker :after,.vd-picker :before{box-sizing:border-box}.vd-picker{display:flex;flex-direction:column;width:304px;background-color:#fff;border-radius:6px;box-shadow:0 2px 8px rgba(50,50,93,.2)}.vd-picker:active,.vd-picker:focus{outline:0}.vd-picker--bottomsheet{width:100%;box-shadow:none}.vd-picker--bottomsheet .vd-picker-header{border-radius:0}.vd-picker--rtl{direction:rtl}.vd-picker__title{position:relative;display:flex;justify-content:space-between;align-items:center;height:48px;padding:8px 16px;border-radius:12px 12px 0 0}.vd-picker--rtl .vd-picker__title{padding:0 16px 0 0}@media only screen and (min-width:480px){.vd-picker__title{display:none}}.vd-picker__title p{margin:0}.vd-picker__title-close{position:relative;display:flex;align-items:center;justify-content:flex-end;height:24px;width:24px;border:none;outline:none;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vd-picker__title-close svg{width:24px;height:24px}.vd-picker__body{position:relative;flex:1 1 100%;flex-direction:column;height:auto;overflow:hidden;z-index:0}.vd-overlay,.vd-picker__body{display:flex}.vd-overlay{position:fixed;top:0;left:0;right:0;bottom:0;align-items:center;border-radius:inherit;justify-content:center;pointer-events:none;transition:.3s cubic-bezier(.25,.8,.5,1),z-index 1ms}.vd-overlay__content{position:relative}.vd-overlay__inner{position:absolute;left:0;right:0;top:0;bottom:0;height:100%;width:100%;border-radius:inherit;transition:inherit;will-change:opacity}.vd-overlay--absolute{position:absolute}.vd-overlay--active{pointer-events:auto}.vd-picker__controls-label button{margin:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__controls-label button:active,.vd-picker__controls-label button:focus{outline:0;box-shadow:0}.vd-picker__controls-label button[role=button],.vd-picker__controls-label button[type=button],.vd-picker__controls-label button[type=reset],.vd-picker__controls-label button[type=submit]{cursor:pointer}.vd-picker__controls{display:flex;height:48px;text-align:center;position:relative;width:100%}.vd-picker__controls-wrapper{overflow:hidden;justify-content:center}.vd-picker__controls-month,.vd-picker__controls-wrapper,.vd-picker__controls-year{position:relative;display:flex;align-items:center;flex:1}.vd-picker__controls-month{justify-content:flex-end}.vd-picker__controls-year{justify-content:flex-start}.vd-picker__controls-year.vd-picker__controls-year--center{justify-content:center}.vd-picker__controls-label{padding:8px 4px}.vd-picker__controls-label button{position:relative;display:flex;font-size:15px;font-weight:500;line-height:15px;padding:0;border:none;outline:none;transition:color .3s}.vd-picker__controls-label button:not(:hover):not(:focus){color:rgba(0,0,0,.87)}.vd-picker__controls-label button:disabled,.vd-picker__controls-label button[disabled]{cursor:default;color:rgba(0,0,0,.26)}.vd-picker__controls button.vd-picker__controls-next,.vd-picker__controls button.vd-picker__controls-prev{position:relative;flex:0 0 40px;height:48px;width:48px;padding:0 0 0 24px;border:none;outline:none;color:rgba(0,0,0,.87);background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}@media only screen and (min-width:768px){.vd-picker__controls button.vd-picker__controls-next,.vd-picker__controls button.vd-picker__controls-prev{padding:0 8px}}.vd-picker__controls button.vd-picker__controls-next:disabled,.vd-picker__controls button.vd-picker__controls-next[disabled],.vd-picker__controls button.vd-picker__controls-prev:disabled,.vd-picker__controls button.vd-picker__controls-prev[disabled]{cursor:default}.vd-picker__controls button.vd-picker__controls-next:disabled svg,.vd-picker__controls button.vd-picker__controls-next[disabled] svg,.vd-picker__controls button.vd-picker__controls-prev:disabled svg,.vd-picker__controls button.vd-picker__controls-prev[disabled] svg{color:rgba(0,0,0,.26)}.vd-picker--rtl .vd-picker__controls button.vd-picker__controls-next,.vd-picker--rtl .vd-picker__controls button.vd-picker__controls-prev{transform:rotate(180deg)}.vd-picker__controls button.vd-picker__controls-next{padding:0 24px 0 0}@media only screen and (min-width:768px){.vd-picker__controls button.vd-picker__controls-next{padding:0 8px}}.vd-picker__controls svg{width:24px;height:24px;vertical-align:middle}.vd-picker-header{color:#fff;padding:16px;display:flex;justify-content:space-between;flex-direction:column;flex-wrap:wrap;line-height:1;min-height:80px;height:80px;border-radius:6px 6px 0 0}@media only screen and (min-width:768px){.vd-picker-header{min-height:85px;height:85px}}.vd-picker-header--range .vd-picker-header__wrap{flex:1 1 auto;flex-direction:column;justify-content:space-between}.vd-picker-header--range .vd-picker-header__date{font-size:18px;height:26px}@media only screen and (min-width:768px){.vd-picker-header--range .vd-picker-header__date{font-size:22px;height:30px}}.vd-picker-header--year .vd-picker-header__year{flex:1 1 auto;font-size:22px;height:30px}.vd-picker-header__year{align-items:center;display:inline-flex;font-size:14px;margin-bottom:8px;opacity:.6;transition:opacity .3s}.vd-picker-header__year:focus:not(.vd-picker-header__year--active),.vd-picker-header__year:hover:not(.vd-picker-header__year--active){cursor:pointer;opacity:1}.vd-picker-header__year--active{opacity:1;cursor:default}.vd-picker-header__date,.vd-picker-header__wrap{position:relative;display:flex;width:100%}.vd-picker-header__date{font-size:22px;height:30px;text-align:left;overflow:hidden;padding-bottom:8px;margin-bottom:-8px;opacity:.6;transition:opacity .3s}.vd-picker-header__date:focus:not(.vd-picker-header__date--active),.vd-picker-header__date:hover:not(.vd-picker-header__date--active){cursor:pointer;opacity:1}.vd-picker-header__date--active{opacity:1;cursor:default}@media only screen and (min-width:768px){.vd-picker-header__date{font-size:24px;height:32px}}.vd-picker-preset{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker-preset:active,.vd-picker-preset:focus{outline:0;box-shadow:0}.vd-picker-preset[role=button],.vd-picker-preset[type=button],.vd-picker-preset[type=reset],.vd-picker-preset[type=submit]{cursor:pointer}.vd-picker-presets{position:relative;display:flex;padding:16px 12px}@media only screen and (min-width:480px){.vd-picker-presets{padding:16px 12px 8px}}.vd-picker-presets__wrapper{flex:1 1 auto;flex-wrap:wrap;width:100%}.vd-picker-preset,.vd-picker-presets__wrapper{position:relative;display:flex}.vd-picker-preset{align-items:center;justify-content:center;flex:0 0 50%;max-width:50%;padding:0 8px;font-size:14px;line-height:14px;overflow:hidden;border:0 solid #eef1f8;transition:opacity .3s cubic-bezier(.25,.8,.5,1)}.vd-picker--bottomsheet .vd-picker-preset,.vd-picker-preset{min-height:32px;height:32px}.vd-picker-preset:nth-child(odd){border-width:0 1px 1px}.vd-picker-preset:nth-child(odd):first-child{border-width:1px}.vd-picker-preset:nth-child(2n){border-width:0 1px 1px 0}.vd-picker-preset:nth-child(2n):nth-child(2){border-width:1px 1px 1px 0}.vd-picker-preset__effect{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity .3s cubic-bezier(.25,.8,.5,1);z-index:0}.vd-picker-preset__name{position:relative;z-index:1}.vd-picker-preset--selected,.vd-picker-preset:hover:not(.vd-picker-preset--disabled){color:#fff}.vd-picker-preset--selected .vd-picker-preset__effect,.vd-picker-preset:hover:not(.vd-picker-preset--disabled) .vd-picker-preset__effect{opacity:1}.vd-picker-preset--selected{pointer-events:none}.vd-picker-preset--disabled{color:rgba(93,106,137,.2);cursor:not-allowed;pointer-events:none}.vd-picker__table{position:relative;padding:0 12px;height:274px}.vd-picker--bottomsheet .vd-picker__table{height:322px}.vd-picker__table-week{display:flex;flex-wrap:nowrap;flex:1 1 100%;max-width:100%;padding:8px 0;font-weight:600;font-size:12px;line-height:18px;font-weight:500;color:rgba(0,0,0,.38)}.vd-picker__table-weekday{flex:0 0 14.28571%;max-width:14.28571%;text-align:center}.vd-picker__table-days__wrapper{position:relative;overflow:hidden;height:240px}.vd-picker--bottomsheet .vd-picker__table-days__wrapper{height:288px}.vd-picker__table-days{display:flex;flex-wrap:wrap;overflow:hidden;width:100%}.vd-picker__table-day{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__table-day:active,.vd-picker__table-day:focus{outline:0;box-shadow:0}.vd-picker__table-day[role=button],.vd-picker__table-day[type=button],.vd-picker__table-day[type=reset],.vd-picker__table-day[type=submit]{cursor:pointer}.vd-picker__table-day{position:relative;width:14.28571%;height:40px;line-height:1;font-size:12px;float:left;text-align:center;color:currentColor;font-weight:500;transition:all .45s cubic-bezier(.23,1,.32,1);overflow:hidden}.vd-picker--bottomsheet .vd-picker__table-day{height:48px}.vd-picker__table-day__wrapper{position:absolute;top:2px;bottom:2px;left:0;right:0;border:none}.vd-picker__table-day__wrapper:before{content:"";position:absolute;top:0;bottom:0;opacity:0;width:50%;background-color:#fff;z-index:1;transition-property:opacity}.vd-picker__table-day__wrapper:after{content:"";position:absolute;top:0;left:50%;width:calc(100% + 1px);height:36px;border:1px solid;background-color:currentColor;opacity:.12;transform:translateX(-50%) scale(0)}.vd-picker--bottomsheet .vd-picker__table-day__wrapper:after{height:44px}.vd-picker__table-day__current,.vd-picker__table-day__effect{position:absolute;top:0;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;border:1px solid}.vd-picker--bottomsheet .vd-picker__table-day__current,.vd-picker--bottomsheet .vd-picker__table-day__effect{width:44px;height:44px}.vd-picker__table-day__current{color:rgba(0,0,0,.87);z-index:1}.vd-picker__table-day__effect{background-color:currentColor;transform:translateX(-50%) scale(0);transition:all .45s cubic-bezier(.23,1,.32,1);z-index:1}.vd-picker--range-selecting .vd-picker__table-day__effect{transition:unset}.vd-picker__table-day__text{position:relative;display:inline-flex;align-items:center;justify-content:center;margin:auto;width:36px;height:36px;color:rgba(0,0,0,.87);z-index:1}.vd-picker--bottomsheet .vd-picker__table-day__text{width:44px;height:44px}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between) .vd-picker__table-day__effect{transform:translateX(-50%) scale(1);opacity:.12}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-end .vd-picker__table-day__wrapper:before,.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__wrapper:before{opacity:1;right:0}.vd-picker--rtl .vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-end .vd-picker__table-day__wrapper:before,.vd-picker--rtl .vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__wrapper:before{left:0;right:unset}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-end .vd-picker__table-day__wrapper:after,.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__wrapper:after{transform:translateX(-50%) scale(1);opacity:.08}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-end .vd-picker__table-day__effect,.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__effect{opacity:1;transition:unset}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-end .vd-picker__table-day__text,.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__text{color:#fff}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__wrapper:before{left:0}.vd-picker--rtl .vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__wrapper:before{right:0;left:unset}.vd-picker__table-day--selected .vd-picker__table-day__effect{transform:translateX(-50%) scale(1);opacity:1}.vd-picker__table-day--selected .vd-picker__table-day__text{color:#fff}.vd-picker__table-day--between:not(.vd-picker__table-day--disabled) .vd-picker__table-day__wrapper:after,.vd-picker__table-day--first .vd-picker__table-day__wrapper:after,.vd-picker__table-day--in-range:not(.vd-picker__table-day--disabled) .vd-picker__table-day__wrapper:after,.vd-picker__table-day--last .vd-picker__table-day__wrapper:after{transform:translateX(-50%) scale(1)}.vd-picker--range-selecting .vd-picker__table-day--first .vd-picker__table-day__wrapper:after,.vd-picker--range-selecting .vd-picker__table-day--last .vd-picker__table-day__wrapper:after,.vd-picker__table-day--in-range:not(.vd-picker__table-day--disabled) .vd-picker__table-day__wrapper:after{opacity:.08}.vd-picker__table-day--first .vd-picker__table-day__wrapper:before{opacity:1;left:0}.vd-picker--rtl .vd-picker__table-day--first .vd-picker__table-day__wrapper:before{right:0;left:unset}.vd-picker__table-day--last .vd-picker__table-day__wrapper:before{opacity:1;right:0}.vd-picker--rtl .vd-picker__table-day--last .vd-picker__table-day__wrapper:before{left:0;right:unset}.vd-picker__table-day--last:not(.vd-picker__table-day--select-start) .vd-picker__table-day__effect{opacity:1}.vd-picker__table-day--disabled.vd-picker__table-day{cursor:default}.vd-picker__table-day--disabled.vd-picker__table-day .vd-picker__table-day__text{color:rgba(93,106,137,.2)}.vd-picker-validate__button{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker-validate__button:active,.vd-picker-validate__button:focus{outline:0;box-shadow:0}.vd-picker-validate__button[role=button],.vd-picker-validate__button[type=button],.vd-picker-validate__button[type=reset],.vd-picker-validate__button[type=submit]{cursor:pointer}.vd-picker-validate{display:flex;-ms-flex-align:center;justify-content:flex-end;padding:8px}.vd-picker-validate,.vd-picker-validate__button{position:relative;align-items:center}.vd-picker-validate__button{display:inline-flex;flex:0 0 auto;-ms-flex-align:center;justify-content:center;height:36px;min-width:44px;font-size:14px;font-weight:500;border-radius:4px;padding:6px 8px;outline:0;text-transform:uppercase;text-decoration:none;overflow:hidden}.vd-picker-validate__button+.vd-picker-validate__button{margin-left:8px}.vd-picker-validate__button:hover:not(:disabled) .vd-picker-validate__effect{opacity:.1}.vd-picker-validate__button:disabled,.vd-picker-validate__button[disabled]{color:rgba(0,0,0,.26)!important;cursor:default}.vd-picker-validate__effect{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity .45s cubic-bezier(.23,1,.32,1);z-index:-1}.vd-picker__months-button{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__months-button:active,.vd-picker__months-button:focus{outline:0;box-shadow:0}.vd-picker__months-button[role=button],.vd-picker__months-button[type=button],.vd-picker__months-button[type=reset],.vd-picker__months-button[type=submit]{cursor:pointer}.vd-picker__months{position:relative;display:flex;flex:1 1 auto;height:274px}.vd-picker--bottomsheet .vd-picker__months{height:322px}@supports (padding-bottom:constant(safe-area-inset-bottom)){.vd-picker__months{--safe-area-inset-bottom:constant(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}@supports (padding-bottom:env(safe-area-inset-bottom)){.vd-picker__months{--safe-area-inset-bottom:env(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}.vd-picker__months-inner{position:relative;width:100%;height:100%;padding:0 12px}.vd-picker__months-inner,.vd-picker__months-list{display:flex}.vd-picker__months-list{position:absolute;top:0;left:0;right:0;bottom:0;flex:1 1 auto;flex-wrap:wrap;justify-items:center;align-items:center}.vd-picker__months-button{position:relative;height:48px;min-height:48px;width:100%;font-size:15px;font-weight:500;border-radius:2px;outline:none;transition:background-color .3s;border:thin solid transparent}.vd-picker__months-button:hover{background-color:#eef1f8}.vd-picker__months-button:disabled,.vd-picker__months-button[disabled]{cursor:default;color:rgba(0,0,0,.26);pointer-events:none}.vd-picker__months-button__wrapper{position:relative;display:flex;flex:0 0 33.33333%;max-width:33.33333%;justify-content:center;align-items:center;height:25%;min-height:25%;padding:4px 8px}.vd-picker__quarters-button{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__quarters-button:active,.vd-picker__quarters-button:focus{outline:0;box-shadow:0}.vd-picker__quarters-button[role=button],.vd-picker__quarters-button[type=button],.vd-picker__quarters-button[type=reset],.vd-picker__quarters-button[type=submit]{cursor:pointer}.vd-picker__quarters{position:relative;display:flex;flex:1 1 auto;height:274px}.vd-picker--bottomsheet .vd-picker__quarters{height:274px}@supports (padding-bottom:constant(safe-area-inset-bottom)){.vd-picker__quarters{--safe-area-inset-bottom:constant(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}@supports (padding-bottom:env(safe-area-inset-bottom)){.vd-picker__quarters{--safe-area-inset-bottom:env(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}.vd-picker__quarters-inner{position:relative;display:flex;width:100%;height:100%;padding:0 12px}.vd-picker__quarters-list{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex:1 1 auto;flex-wrap:wrap;justify-items:center;align-items:center}.vd-picker__quarters-button{position:relative;height:48px;min-height:48px;width:100%;font-size:15px;font-weight:500;border-radius:2px;outline:none;transition:background-color .3s;border:thin solid transparent}.vd-picker__quarters-button:hover{background-color:#eef1f8}.vd-picker__quarters-button:disabled,.vd-picker__quarters-button[disabled]{cursor:default;color:rgba(0,0,0,.26);pointer-events:none}.vd-picker__quarters-button__wrapper{position:relative;display:flex;flex:1 1 100%;max-width:1 1 100%;justify-content:center;align-items:center;height:25%;min-height:25%;padding:4px 8px}.slide-x-transition-enter-active,.slide-x-transition-leave-active{transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:opacity,transform,height}.slide-x-transition-enter,.slide-x-transition-leave-to{opacity:0;transform:translateX(-15px)}.slide-y-transition-enter-active,.slide-y-transition-leave-active{transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:opacity,transform,height}.slide-y-transition-enter,.slide-y-transition-leave-to{opacity:0;transform:translateY(-15px)}.scale-transition-enter-active,.scale-transition-leave-active{transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:opacity,transform,height}.scale-transition-enter,.scale-transition-leave,.scale-transition-leave-to{opacity:0;transform:scale(0)}.slide-in-out-transition-enter-active,.slide-in-out-transition-leave-active{transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:opacity,transform,height}.slide-in-out-transition-enter,.slide-in-out-transition-leave-to{opacity:0;transform:translateY(100%)}.slide-h-next-enter-active,.slide-h-next-leave-active,.slide-h-prev-enter-active,.slide-h-prev-leave-active,.slide-v-next-enter-active,.slide-v-next-leave-active,.slide-v-prev-enter-active,.slide-v-prev-leave-active{transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:opacity,transform,height;position:absolute}.slide-h-next-enter{opacity:0;transform:translateX(100%)}.slide-h-next-leave-to{opacity:0;transform:translateX(-100%)}.slide-h-prev-leave-to{opacity:0;transform:translateX(100%)}.slide-h-prev-enter{opacity:0;transform:translateX(-100%)}.vd-picker__controls-year.vd-picker__controls-year--center .slide-h-next-enter,.vd-picker__controls-year.vd-picker__controls-year--center .slide-h-prev-leave-to{transform:translateX(-50%) translateY(150%)}.vd-picker__controls-year.vd-picker__controls-year--center .slide-h-next-leave-to,.vd-picker__controls-year.vd-picker__controls-year--center .slide-h-prev-enter{transform:translateX(-50%) translateY(-150%)}.vd-picker--rtl .slide-h-next-enter,.vd-picker--rtl .slide-h-prev-leave-to{transform:translateX(-100%)}.vd-picker--rtl .slide-h-next-leave-to,.vd-picker--rtl .slide-h-prev-enter{transform:translateX(100%)}.slide-v-next-leave-to{opacity:0;transform:translateY(100%)}.slide-v-next-enter{opacity:0;transform:translateY(-100%)}.slide-v-prev-enter{opacity:0;transform:translateY(100%)}.slide-v-prev-leave-to{opacity:0;transform:translateY(-100%)}.yearMonth-enter-active,.yearMonth-leave-active{position:absolute;transition:opacity .3s}.yearMonth-enter,.yearMonth-leave-to{opacity:0}.vd-picker__years{position:relative;height:322px;list-style-type:none;text-align:center;margin:0;padding:8px 0;overflow-y:scroll;-webkit-overflow-scrolling:touch}.vd-picker--bottomsheet .vd-picker__years{height:370px}@supports (padding-bottom:constant(safe-area-inset-bottom)){.vd-picker__years{--safe-area-inset-bottom:constant(safe-area-inset-bottom);padding-bottom:calc(8px + var(--safe-area-inset-bottom))}}@supports (padding-bottom:env(safe-area-inset-bottom)){.vd-picker__years{--safe-area-inset-bottom:env(safe-area-inset-bottom);padding-bottom:calc(8px + var(--safe-area-inset-bottom))}}.vd-picker--validate .vd-picker__years{border-bottom:1px solid #eef1f8}.vd-picker__years li{position:relative;cursor:pointer;display:flex;justify-content:center;align-items:center;align-content:center;padding:8px 0;margin-left:12px;margin-right:12px;height:40px;min-height:40px;width:calc(100% - 24px);font-size:15px;font-weight:500;outline:none;transition:background-color .3s;border:thin solid transparent}.vd-picker--bottomsheet .vd-picker__years li{height:48px;min-height:48px}.vd-picker__years li:hover{background-color:#eef1f8}.vd-picker__years li:disabled,.vd-picker__years li[disabled]{cursor:default;color:rgba(0,0,0,.26);pointer-events:none}.vd-picker__years li+li{margin-top:2px} /*# sourceMappingURL=styles.css.map*/