From 16e38a78b4beda9de0b0ec0c09f0f5d01a1d02a2 Mon Sep 17 00:00:00 2001 From: maksim Date: Thu, 19 Jun 2025 11:55:22 +0300 Subject: [PATCH] =?UTF-8?q?task=206809=20|=20=D0=BE=D1=87=D0=B8=D1=81?= =?UTF-8?q?=D1=82=D0=B8=D0=BB=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20?= =?UTF-8?q?=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B2=20single-product.css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/css/gp-style-core.css | 1101 +---------------- .../assets/css/gp-style-desktop.css | 398 ------ 2 files changed, 3 insertions(+), 1496 deletions(-) diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-core.css b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-core.css index be94bfe..8b998be 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-core.css +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-core.css @@ -1,907 +1,3 @@ - -/* общие */ -button{ - cursor: pointer; -} - -.wrapper{ - margin: 0 auto; - - max-width: 1600px; -} - -/* компоненты */ - -/* lang*/ -.lang{ - position: relative; -} -.lang__open{ - padding: 12px 15px; - - width: 74px; - - background: none; - border: none; - - display: flex; - align-items: center; - - transition: opacity .2s ease-out; -} -.lang__open:hover{ - opacity: .8; -} -.lang-open p{ - font-family: var(--font-family); - font-weight: 700; - font-size: 16px; - line-height: 125%; - - text-align: start; - - color: var(--text-black); -} -.lang-open__arrow{ - margin-left: 7.25px; - - display: flex; - justify-content: center; - align-items: center; -} -.lang-open__black{ - -} -.lang-open__white{ - display: none; -} -.lang__content{ - position: absolute; - top: 33px; - left: -13px; - - height: 0; - - border-radius: 6px; - - transition: height .2s ease-out; - box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); - overflow: hidden; - - background-color: var(--background-white); - - z-index: 100; -} -.lang__list{ - width: 104px; - - padding: 8px; - - list-style-type: none; -} -.lang__item{ - margin-top: 8px; -} -.lang__item:first-child{ - margin-top: 0; -} -.lang__link{ - display: block; - - width: 100%; - - padding: 4px; - - border-radius: 6px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-dark); - - text-decoration: none; - - position: relative; - - transition: background-color .2s ease-out; -} -.lang__link:hover, -.lang__item.active .lang__link{ - background-color: var(--background-grey); -} -.lang__item.active .lang__link::before{ - content: ''; - - position: absolute; - top: 10px; - right: 8px; - - width: 16px; - height: 12px; - - background-image: url(../img/svg/main/arrow-selected.svg); -} -/* lang */ - - -/* mini-profile */ -.mini-profile{ - display: flex; - align-items: center; -} -.mini-profile__item{ - margin-left: 8px; -} -.mini-profile__item:first-child{ - margin-left: 0; -} -.mini-profile__button{ - display: block; - - padding: 8px; - - display: flex; - justify-content: center; - align-items: center; - - background: none; - border: none; - - transition: opacity .2s ease-out; -} -.mini-profile__button:hover{ - opacity: .8; -} -.mini-profile__icon{ - width: 24px; - aspect-ratio: 1; -} -.mini-profile__icon.white{ - display: none; -} -/* mini-profile */ - - -/* main-menu */ -.main-menu{ - display: flex; - align-items: center; - - list-style-type: none; -} -.main-menu__item{ - margin-left: 24px; - - transition: opacity .2s ease-out; -} -.main-menu__item:first-child{ - margin-left: 0; -} -.main-menu__item:hover{ - opacity: .8; - - background: var(--background-grey); - border-radius: 24px; -} -.header.white .main-menu__item:hover .main-menu__link{ - color: var(--text-black); -} -.main-menu__item:active{ - opacity: 1; -} -.main-menu__link{ - display: block; - - padding: 8px 12px; - - font-family: var(--font-family); - font-weight: 700; - font-size: 16px; - line-height: 125%; - color: var(--text-black); - - text-decoration: none; - - transition: color .2s ease-out; -} -.main-menu__button{ - padding: 8px 32px 8px 12px; - - font-family: var(--font-family); - font-weight: 700; - font-size: 16px; - line-height: 125%; - color: var(--text-black); - - border: none; - border-radius: 24px; - - background: var(--gradient-turquoise); - - position: relative; -} -.main-menu__button::before{ - content: ''; - - position: absolute; - top: 14px; - right: 14px; - - width: 13px; - height: 8px; - - background-image: url(../img/svg/main/arrow-black.svg); - background-repeat: no-repeat; - background-size: contain; -} -/* main-menu */ - - -/* form */ -.form{ - width: 100%; - - padding: 24px 24px 43px; - - display: flex; - flex-direction: column; - - border-radius: 24px; - background: var(--gradient-turquoise); -} -.form__item{ - margin-top: 16px; -} -.form__title{ - font-family: var(--font-family); - font-weight: 500; - font-size: 24px; - line-height: 133%; - color: var(--text-black); -} -.form__input{ - width: 100%; - - border-radius: 20px; - padding: 12px 16px; - border: 1px solid var(--text-black); - - background: var(--background-white); - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - - color: var(--text-black); -} -.form__input::placeholder{ - color: var(--text-grey); -} -.form__input--grey{ - border-color: var(--background-9); -} -.form__input--textarea{ - height: 96px; - resize: none; -} -.form__input--textarea-72{ - height: 72px; - resize: none; - - overflow: hidden; -} -.form__input--center{ - text-align: center; -} -.form__button{ - width: 100%; - - padding: 12px 24px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-white); - - border-radius: 16px; - border: none; - background: var(--background-black); - - cursor: pointer; - - transition: background-color .2s ease-out; -} -.form__button:hover{ - opacity: .8; -} - -.label{ - padding-bottom: 4px; - - display: inline-block; - - position: relative; -} -.label::after{ - content: ''; - - position: absolute; - top: 2px; - right: -20px; - - width: 16px; - height: 16px; - - background-image: url(../img/svg/main/question.svg); - - cursor: pointer; -} -.label__title{ - font-family: var(--font-family); - font-weight: 700; - font-size: 16px; - line-height: 125%; - color: var(--text-3); -} -.label__question{ - position: absolute; - - padding: 8px; - - border-radius: 6px; - transition: height .2s ease-out; - box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); - overflow: hidden; - background-color: var(--background-white); - - opacity: 0; - transition: opacity .2s ease-out; - pointer-events: none; -} -.label:hover .label__question{ - opacity: 1; - pointer-events: auto; -} - -.label-name{ - margin-bottom: 8px; - - font-family: var(--font-family); - font-weight: 700; - font-size: 16px; - line-height: 125%; - color: var(--text-black); - - display: block; -} -.form-input__error{ - margin-top: 4px; - - font-family: var(--font-family); - font-weight: 500; - font-size: 12px; - line-height: 133%; - - color: #f60909; - - display: none; - - position: relative; -} -.form-input__error--absolute{ - position: absolute; - bottom: -19.95px; - left: 0; - - width: 100%; -} -.modal-form__content.check .form__input:invalid{ - border-color: #f60909; -} -.modal-form__content.check .form__input:invalid + .form-input__error{ - display: block; -} -.modal-form__content.check .form-input-phone__input:invalid + .form-input__error{ - display: block; -} -.modal-form__content.check .form-input-phone__input:invalid + .form-input__error--absolute::before{ - content: ''; - - position: absolute; - top: -53px; - left: -1px; - - width: 100%; - height: 48px; - - border-radius: 20px; - border: 1px solid #f60909; -} -.form-input__phone{ - padding: 12px 16px 12px ; - - display: flex; - align-items: center; - - border-radius: 20px; - border: 1px solid var(--text-black); - - cursor: pointer; - - position: relative; -} -.form-input__phone.focus{ - outline: 1px solid var(--text-black); -} -.form-input-phone__icon{ - flex-shrink: 0; - - height: 16px; - width: 28px; - - background-size: 16px; - background-repeat: no-repeat; - background-position: left; - - position: relative; -} -.form-input-phone__icon::after{ - content: ''; - - position: absolute; - top: 4px; - right: 0; - - width: 8px; - aspect-ratio: 1; - - background-image: url(../img/svg/main/triangle-grey.svg); -} -.form-input-phone__code{ - flex-shrink: 0; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); -} -.form-input-phone__code::before{ - content: '+'; -} -.form-input-phone__input{ - margin-left: 6px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); - - border: none; - outline: none; -} -.form-input-phone__list{ - position: absolute; - top: 52px; - left: 8px; - - width: 280px; - - z-index: 10; - - transition: opacity .2s ease-out; - - opacity: 0; - pointer-events: none; - - border-radius: 20px; - - overflow: hidden; -} -.form-input-phone__list.active{ - opacity: 1; - pointer-events: auto; -} -.form-input-phone-list__search{ - width: 100%; - - padding: 12px 16px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); - - border-left: 1px solid var(--background-black); - border-right: 1px solid var(--background-black); - border-top: 1px solid var(--background-black); - border-radius: 20px 20px 0 0; - - background: var(--background-white); -} -.form-input-phone-list__search::placeholder{ - color: var(--text-6); -} -.form-input-phone-list__content{ - width: 100%; - max-height: 224px; - - padding: 24px 16px; - - border: 1px solid var(--background-black); - border-top: none; - border-radius: 0 0 20px 20px; - - background: var(--background-white); - - overflow-y: auto; -} -.form-input-phone-list__item{ - margin-top: 14px; - - display: flex; - align-items: center; - - background: none; - border: none; - - cursor: pointer; -} -.form-input-phone-list__item:first-child{ - margin-top: 0; -} -.form-input-phone-list-item__icon{ - width: 16px; - aspect-ratio: 1; -} -.form-input-phone-list-item__name{ - margin-left: 8px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); -} -.form-input-phone-list-item__code{ - margin-left: 8px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); -} -.form-input-phone-list-item__code::before{ - content: '+'; -} -.form-input__tabs{ - padding: 2px; - - display: flex; - - border-radius: 20px; - background: var(--gradient-turquoise); - - position: relative; -} -.form-input__tabs--white{ - padding: 3px; - border: 1px solid var(--text-3); - background: var(--white); -} -.form-input__tabs--white .form-input-tabs__button.active{ - background: var(--gradient-turquoise); -} -.form-input-tabs__button{ - width: 100%; - - padding: 10px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); - text-align: center; - - border-radius: 18px; - - z-index: 2; - - transition: background-color .2s ease-out; -} -.form-input-tabs__button.active{ - background-color: var(--background-white); -} -.form-input-tabs__input{ - display: none; -} -.form-input__radio{ - padding: 16px; - - display: flex; - flex-direction: column; -} -.form-input-radio__item{ - margin-top: 14px; - - display: flex; - align-items: center; -} -.form-input-radio__item:first-child{ - margin-top: 0; -} -.form-input-radio__circle{ - padding: 2px; - - width: 20px; - aspect-ratio: 1; - - border-radius: 50%; - - background: var(--gradient-blue); - - position: relative; -} -.form-input-radio__item.active .form-input-radio__circle::before{ - content: ''; - - position: absolute; - top: 4px; - left: 4px; - - width: 12px; - aspect-ratio: 1; - - border-radius: 50%; - - background: var(--gradient-blue); -} -.form-input-radio-circle__content{ - width: 16px; - aspect-ratio: 1; - - border-radius: 50%; - - background: var(--background-white); -} -.form-input-radio__title{ - margin-left: 8px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-dark); -} -.form-input-radio__title.form-input-radio__title--no-span span{ - color: var(--text-dark); -} -.form-input-radio__price{ - margin-left: auto; - - font-family: var(--font-family); - font-weight: 600; - font-size: 20px; - line-height: 120%; - color: var(--text-black); -} -.form-input-radio__price::after{ - content: ' ₽'; -} -.form-input-radio__input{ - display: none; -} -.form-input__list{ - position: relative; -} -.form-input__list::before{ - content: ''; - position: absolute; - top: 21.5px; - right: 19.5px; - width: 13px; - height: 8px; - background-image: url(../img/svg/main/arrow-black.svg); - background-repeat: no-repeat; - background-size: contain; - pointer-events: none; -} -.form-input-list__input{ - width: 100%; - - border-radius: 20px; - padding: 12px 16px; - padding-right: 40px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); - - border: 1px solid var(--text-black); -} - -.form-input-list__input::placeholder{ - color: var(--text-grey); -} -.form-input-list__block-content{ - position: absolute; - top: 50px; - left: 0; - - width: 100%; - max-height: 192px; - height: 0; - - border-radius: 20px; - background-color: var(--background-white); - - overflow: hidden; - - transition: height .2s ease-out; - - z-index: 10; -} -.form-input-list__block-content.active{ - border: 1px solid var(--background-black); -} -.form-input-list__content{ - margin: 8px 16px; - - max-height: 176px; - - padding-right: 16px; - - overflow-y: auto; -} -.form-input-list__content::-webkit-scrollbar{ - border-radius: 8px; - width: 4px; - background: rgba(204, 204, 204, 0.2); -} -.form-input-list__content::-webkit-scrollbar-thumb{ - border-radius: 8px; - background: var(--background-9); -} -.form-input-list__content -.form-input-list__item{ - margin-top: 16px; - - width: 100%; - - display: flex; - justify-content: space-between; - align-items: center; - - border-radius: 8px; - padding: 4px; - - background: none; - border: none; -} -.form-input-list__item:first-child{ - margin-top: 0; -} -.form-input-list__item.active{ - background: rgba(204, 204, 204, 0.2); -} -.form-input-list-item__text{ - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); -} -.form-input-list-item__box{ - width: 20px; - aspect-ratio: 1; - - padding: 2px; - - border-radius: 4px; - - background: var(--gradient-blue); -} -.form-input-list-item-box__content{ - width: 16px; - aspect-ratio: 1; - - border-radius: 2px; - - background: var(--background-white); -} -.form-input-list__item.active .form-input-list-item-box__content{ - background: var(--gradient-blue); -} -.remote-control__item{ - display: none; -} -.remote-control__item.active{ - display: block; -} -/* .form-input-radio__ */ - -.form-agreement{ - display: flex; -} -.form-agreement__check{ - display: flex; - align-items: center; -} -.form-agreement__square{ - width: 18px; - aspect-ratio: 1; - - border-radius: 4px; - - border: 2px solid var(--background-black); -} -.form-agreement__label{ - margin-left: 8px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); -} -.form-agreement__input{ - display: none; -} -.form-agreement__input:checked + .form-agreement__square{ - border: none; - background: var(--gradient-blue); - - position: relative; -} -.form-agreement__input:checked + .form-agreement__square::after{ - content: ''; - - position: absolute; - top: 1px; - left: 1px; - - width: 16px; - aspect-ratio: 1; - - background-image: url(../img/svg/main/arrow-selected-white.svg); - background-repeat: no-repeat; - background-position: center; -} -/* form */ - - -/* social media */ -.social-media{ - display: flex; - align-items: center; -} -.social-media__item{ - margin-left: 32px; - - transition: opacity .2s ease-out; -} -.social-media__item:hover{ - opacity: .8; -} -.social-media__item:first-child{ - margin-left: 0px; -} -.social-media__icon{ - width: 32px; - aspect-ratio: 1; -} -/* social media */ - - /* breadcrumbs */ .breadcrumbs{ margin: 24px; @@ -1168,169 +264,6 @@ button{ } /* button */ -/* select */ -.select{ - max-width: 144px; - - position: relative; -} -.select__state{ - width: 100%; - - padding: 11px 47px 11px 13px; - - /* pointer-events:none; */ - - border: 1px solid var(--background-black); - border-radius: 20px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); - - cursor: pointer; - - position: relative; - - transition: opacity .2s ease-out; -} -.select:hover .select__state{ - opacity: .8; -} -.select::after{ - content: ''; - - position: absolute; - top: 20.5px; - right: 21.5px; - - width: 17px; - height: 10px; - - background-image: url(../img/svg/main/arrow-black.svg); - background-repeat: no-repeat; - background-size: contain; - - pointer-events: none; -} -.state__block{ - position: absolute; - top: 48px; - left: 0; - - width: 100%; - - height: 0; - overflow: hidden; - - transition: height .2s ease-out; -} -.state__content{ - padding: 8px; - - border-radius: 6px; - box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); - background-color: var(--background-white); - - list-style-type: none; -} -.state__content li{ - margin-top: 8px; -} -.state__content li:first-child{ - margin-top: 0; -} -.state__button{ - width: 100%; - - padding: 4px 32px 4px 4px; - - background: none; - border: none; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-dark); - text-align: start; - - border-radius: 6px; - - transition: background-color .2s ease-out; - - position: relative; -} -.state__button:hover, -.state__button.active{ - background-color: var(--background-grey); -} - -.state__button.active::before{ - content: ''; - position: absolute; - top: 10px; - right: 8px; - width: 16px; - height: 12px; - background-image: url(../img/svg/main/arrow-selected.svg); -} - -/* select */ - -/* counter */ -.counter{ - display: flex; - align-items: center; -} -.counter__input{ - width: 48px; - - font-family: var(--font-family); - font-weight: 600; - font-size: 20px; - line-height: 120%; - text-align: center; - color: var(--text-black); - - pointer-events: none; - - background: none; - border: none; -} -.counter__button{ - width: 48px; - height: 48px; - - display: flex; - justify-content: center; - align-items: center; - - border: 1px solid var(--text-3); - border-radius: 24px; - - background: var(--background-white); - - transition: opacity .2s ease-out; -} -.counter__button:hover{ - opacity: .8; -} -.counter--small{ - -} -.counter--small .counter__button{ - width: 32px; - height: 32px; -} -.counter--small{ - -} -/* counter */ - - .subscription{ } @@ -1396,36 +329,6 @@ button{ display: block; } -.cabinet__control--column{ - flex-direction: column; -} - -.cabinet__control--column > *:not(:first-child){ - margin-top: 16px -} - -.cabinet-card-order__payment{ - -} -.cabinet-card-order__sub-title{ - font-family: var(--font-family); - font-weight: 600; - line-height: 143%; - color: var(--text-3); -} -.cabinet-card-order__date{ - font-family: var(--font-family); - font-weight: 700; - line-height: 125%; - color: var(--text-3); -} - -.cabinet-card-order-payment__price span{ - font-size: 12px; -} - - - .wcsatt-add-to-subscription-wrapper, form.cart .quantity, .detail__content .in-stock, @@ -1483,6 +386,8 @@ button{ ul.wcsatt-options-product--hidden, .wcsatt-options-product-dropdown--hidden { display: block!important; } + + .detail-block__form{ margin-top: 48px; @@ -1491,7 +396,7 @@ button{ } - .wcsatt-options-prompt-text{ +.wcsatt-options-prompt-text{ font-family: 'Craftwork Grotesk'; font-style: normal; font-weight: 700; diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css index 3a055bd..e5e303f 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css @@ -1,312 +1,13 @@ /* Основные стили для компьютера */ /* header start */ - -.header{ - position: relative; - - background-color: var(--background-white); - - position: fixed; - left: 0; - top: 0; - right: 0; - - z-index: 200; -} - .detail .product__main{ width: 100%; } - -.header__content::after{ - content: ''; - - position: absolute; - left: auto; - right: auto; - bottom: 0; - - width: calc(100% - 48px); - max-width: 1552px; - height: 1px; - - background: var(--text-3); -} - .detail-block-form__items{ margin: 25px 0 0; } -.header__content{ - height: 72px; - - padding: 14px 24px; - - display: flex; - justify-content: space-between; - align-items: center; -} - -.header__open-menu{ - display: none; - - width: 24px; - aspect-ratio: 1; - - position: relative; - - border: none; - background: none; -} -.header__open-menu::before{ - content: ''; - - position: absolute; - top: 8px; - left: 4px; - - width: 16px; - height: 2px; - - background: var(--background-black); - border-radius: 1px; - -} -.header__open-menu::after{ - content: ''; - - position: absolute; - left: 4px; - bottom: 8px; - - width: 16px; - height: 2px; - - background: var(--background-black); - border-radius: 1px; -} - -.header__logo{ - width: 182px; - height: 40px; -} -.header__logo-black, -.header__logo-white{ - width: 100%; - height: 100%; -} -.header__logo-white{ - display: none; -} - -.header__menu-block{ - position: absolute; - top: 72px; - left: 0; - - width: 100%; - height: 0; - - overflow: hidden; - transition: height .2s ease-out; - - background-color: var(--background-white); - - z-index: 100; -} - -.header__pc-menu{ - padding: 40px 46px; - - display: flex; - justify-content: center; - - position: relative; -} -.header__pc-menu::before{ - content: ''; - - position: absolute; - top: 0; - left: 46px; - - width: 330px; - height: 248px; - - background-image: url(../img/pet/cat.png); - background-repeat: no-repeat; -} -.header__pc-menu::after{ - content: ''; - - position: absolute; - top: 0; - right: 46px; - - width: 330px; - height: 248px; - - background-image: url(../img/pet/dog.png); - background-repeat: no-repeat; -} -.header-pc-menu__content{ - width: 600px; - - display: flex; - justify-content: space-between; -} -.header-pc-menu__item{ - -} -.header-pc-menu__title{ - font-family: var(--font-family); - font-weight: 700; - font-size: 26px; - line-height: 123%; - text-transform: uppercase; - color: var(--text-black); - - text-decoration: none; -} -.header-pc-menu__list{ - margin-top: 16px; - - list-style-type: none; -} -.header-pc-menu__list-li{ - margin-top: 25px; -} -.header-pc-menu__list-li:first-child{ - margin-top: 0; -} -.header-pc-menu__list-li a{ - font-family: var(--font-family); - font-weight: 600; - font-size: 20px; - line-height: 120%; - color: var(--text-0); - - text-decoration: none; -} -.header__phone-menu{ - display: none; - - padding: 24px 16px; - - height: calc(100vh - 56px); - - overflow-x: auto; -} -.header-phone-menu__item{ - padding: 16px 0; - - border-top: 1px solid #f4f1f0; - border-bottom: 1px solid #f4f1f0; - - display: flex; - flex-direction: column; -} -.header-phone-menu__item:first-child{ - border-top: 0; -} -.header-phone-menu__item:last-child{ - border-bottom: 0; -} -.header-phone-menu__title{ - font-family: var(--font-family); - font-weight: 700; - font-size: 20px; - line-height: 120%; - color: var(--text-black); - - text-decoration: none; -} -.header-phone-menu__title--gradient{ - background: var(--gradient-blue); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} -.header-phone-menu__category{ - margin-top: 16px; - - font-family: var(--font-family); - font-weight: 500; - font-size: 18px; - line-height: 133%; - color: var(--text-black); - - text-decoration: none; -} -.header-phone-menu__list{ - margin-top: 24px; - - padding-left: 32px; - - list-style-type: none; -} -.header-phone-menu__list-item{ - margin-top: 16px; -} -.header-phone-menu__list-item:first-child{ - margin-top: 0; -} -.header-phone-menu__list-item a{ - font-family: var(--font-family); - font-weight: 500; - font-size: 16px; - line-height: 125%; - color: var(--text-black); - - text-decoration: none; -} -.header.white{ - background: none; -} -.header.white .header__logo-black{ - display: none; -} -.header.white .header__logo-white{ - display: block; -} -.header.white .main-menu__link{ - color: var(--text-white); -} -.header.white .main-menu__button{ - background: var(--background-white); -} -.header.white .lang__open{ - color: var(--text-white); -} -.header.white .header__content::after{ - background: var(--background-white); -} -.header.white .lang-open__black{ - display: none; -} -.header.white .lang-open__white{ - display: block; -} -.header.white .mini-profile__icon.white{ - display: block; -} -.header.white .mini-profile__icon.black{ - display: none; -} -.header.white .header__open-menu::before, -.header.white .header__open-menu::after{ - background: var(--background-white); -} -.header__phone-menu::-webkit-scrollbar { - width: 0px; -} - -main{ - padding-top: 72px; -} -/* header end */ - /* product */ .product{ padding: 24px; @@ -708,106 +409,7 @@ main{ } */ /* modal */ -/* footer */ -.footer{ - margin-top: 80px; - padding: 40px 24px; - - background: var(--background-black); -} -.footer__wrapper{ - width: 100%; - - display: flex; -} -.footer__content{ - width: calc(100% - 364px); -} -.footer__logo{ - width: 187px; - height: 43px; -} -.footer__address{ - margin-top: 24px; - - font-family: var(--font-family); - font-weight: 500; - font-size: 24px; - line-height: 133%; - color: var(--text-white); - font-style: normal; -} -.footer__list{ - margin: 28px -12px -12px -12px; - - display: flex; - justify-content: space-between; - flex-wrap: wrap; -} -.footer-list__item{ - margin: 12px; - - width: calc(50% - 24px); - - display: flex; - flex-direction: column; -} -.footer-list__item:nth-child(even){ - width: 322px; -} -.footer-list__item .button{ - border-radius: 24px; -} -.footer-list__title{ - font-family: var(--font-family); - font-weight: 700; - font-size: 16px; - line-height: 125%; - color: var(--text-white); -} -.footer-list__link{ - margin-top: 4px; - - font-family: var(--font-family); - font-weight: 500; - font-size: 24px; - line-height: 133%; - color: var(--text-white); - - text-decoration: none; -} -.footer__form{ - margin-left: 48px; - - width: 364px; -} -.footer__about{ - margin-top: 16px; - - padding-top: 15px; - - display: flex; - justify-content: space-between; - align-items: center; - - border-top: 1px solid var(--text-white); -} -.footer-about__text{ - font-family: var(--font-family); - font-weight: 500; - font-size: 20px; - line-height: 120%; - text-align: right; - color: var(--text-white); - opacity: 0.6; - - text-decoration: none; -} -.footer__social-media{ - display: none; -} -/* footer */ /* detail */ .detail{