diff --git a/wp-content/themes/cosmopet/functions.php b/wp-content/themes/cosmopet/functions.php index 416a96e..a17c966 100644 --- a/wp-content/themes/cosmopet/functions.php +++ b/wp-content/themes/cosmopet/functions.php @@ -570,4 +570,13 @@ function get_collection_siblings ($term) { } return $sibl_arr; -} \ No newline at end of file +} + +register_sidebar( array( + 'name' => 'Сайдбар для фильтров товаров', + 'id' => 'sidebar_filters', + 'before_widget' => '
', + 'after_widget' => '
', + 'before_title' => '

', + 'after_title' => '

', +) ); diff --git a/wp-content/themes/cosmopet/static/front-page/css/style.css b/wp-content/themes/cosmopet/static/front-page/css/style.css index 7190ee7..188030e 100644 --- a/wp-content/themes/cosmopet/static/front-page/css/style.css +++ b/wp-content/themes/cosmopet/static/front-page/css/style.css @@ -1,3995 +1,4004 @@ - - - -/* .sellers_card .sellers_card-img { - width: auto!important; - height: 330px; -} */ - - -/* Home start */ -.home{ - position: relative; - /* GP | fix */ - background: var(--radial); -} -.home .container{ - padding: 157px 30px 245px; - position: relative; -} -@media (min-width: 1281px){ - .home .container{ - - max-width: 1350px !important; - } - -} - -@media (min-width: 1600px){ - .home .container{ - - max-width: 1440px !important; - } - -} -.home .home_dog{ - position: absolute; - bottom: 200px; - right: 8px; - opacity: .5; - z-index: 0; -} -.home_block-dog{ - width: 100%; - display: none; - margin: 0 auto; - opacity: .5; -} -.home .home_line2, -.home .home_line{ - position: absolute; - top: 70px; - left: 0; - width: 100%; - z-index: 1; - scale: 1.01; -} -.home .home_line2{ - display: none; - /* top: 37px; - left: -24px; */ - left: -2%; - top: 7%; - width: 108%; - z-index: 0; -} -.home .home_block{ - position: relative; - z-index: 1; - display: flex; - flex-direction: column; - gap: 32px; -} -.home_block .home_title{ - font-size: 82px; - line-height: 98.4px; - color: var(--creme-white, #F4F1F0); - text-transform: uppercase; -} -/* Home end */ - -/* Abour start */ -.about{ - box-shadow: 6px 9px 20px 0px #00000026; - background: var(--creme-white, #F4F1F0); - border-radius: 60px; - position: relative; - z-index: 2; - margin-top: -114px; - padding: 46px 0px 97px; -} -.about .about_block{ - display: flex; - flex-direction: column; - gap: 0; -} -.about .about_info-wrap{ - display: flex; - align-items: center; - gap: 70px; -} -.about_block .about_info{ - display: flex; - flex-direction: column; - gap: 25px; -} -.about_info-wrap .about_img{ - width: 40%; -} -.about_img .entoprotein-img{ - display: none; -} -.about_info-wrap .about_img img{ - width: 100%; - height: 720px; -} - -.about_info .about_title{ - font-size: 82px; - font-weight: 700; - line-height: 98.4px; - color: var(--grey-black, #121212); - text-transform: uppercase; -} -.about_info .about_text{ - font-size: 24px; - line-height: 28.8px; - letter-spacing: -0.01em; - color: var(--grey-black, #121212); -} - - -.about_block .about_cards{ - display: grid; - grid-template-columns: 31.5% 31.5% 31.5%; - gap: 58px 26px; -} -.about_cards .about_card{ - display: flex; - flex-direction: column; - gap: 24px; -} -.about_card .about_card-gif{ - width: 168px; - height: 168px; -} - -.about_card .about_card-info{ - display: flex; - flex-direction: column; - gap: 20px; -} -.about_card .about_card-title{ - font-size: 24px; - font-weight: 700; - line-height: 28.8px; - color: var(--grey-black, #121212); - text-transform: uppercase; -} -.about_card .about_card-text{ - font-size: 20px; - line-height: 24px; - color: var(--grey-black, #121212); - max-width: 278px; -} -.about_cards .about_company{ - position: relative; - padding: 25px 12px 30px 30px; - background: #F4F1F0; - border-radius: 60px; - display: flex; - flex-direction: column; - gap: 16px; -} -.about_cards .about_company::after{ - content: ''; - display: block; - position: absolute; - width: calc(100% + 4px); - height: calc(100% + 4px); - background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); - border-radius: 60px; - top: -2px; - left: -2px; - z-index: -1; -} -.about_company .about_company-text{ - font-size: 20px; - line-height: 24px; - font-weight: 500; - color: var(--grey-black, #121212); -} -.about_company .about_company-logo{ - display: grid; - grid-template-columns: 29% 65%; - gap: 20px 10px; -} -.about_company .about_company-logo img{ - width: 100%; -} -.about_company .about_company-logo img:nth-child(4){ - height: 80px; -} - - -.about_slider{ - padding-top: 110px; -} -.about_slider .slider-container { - position: relative; - /* max-width: 636px; */ - height: 300px; - display: flex; - justify-content: center; - align-items: center; - margin: 0 auto; -} - -.about_slider .slide { - position: relative; - background: #FFF; - border-radius: 60px; - /* width: 429px; - height: 546px; */ - display: flex; - flex-direction: column; - align-items: center; - gap: 45px; - padding: 35px 50px 25px 50px; - opacity: 1; - z-index: 1; -} -.about_slider .carousel .carousel-item{ - width: 429px; - height: 546px; - padding: 35px 50px 25px 50px; - padding: 50px 53px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - /* background: var(--creme-white, #F4F1F0); */ - background: #ffffff30; - backdrop-filter: blur(6px); - z-index: 1; - box-shadow: -2px 5px 22.9px 0px rgba(0, 0, 0, 0.25); -} - -.about_slider .carousel .carousel-item.active { - backdrop-filter: blur(6px); - z-index: 3; -} -.about_slider .carousel .carousel-item::after { - content: ''; - background-image: url(../img/border.png); - background-size: cover; - /* background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); */ - display: block; - position: absolute; - width: calc(100% + 4px); - height: calc(100% + 4px); - border-radius: 60px; - top: -2px; - left: -2px; - z-index: -2; - transform: translateZ(-1px); -} -.about_slider .carousel .carousel-item img{ - width: auto; -} - -.about_slider .slide_info{ - display: flex; - flex-direction: column; - gap: 15px; -} -.about_slider .slide--prev, -.about_slider .slide--next{ - z-index: 2; - opacity: 0.75; -} - -.about_slider .prev, .about_slider .next { - position: absolute; - top: 50%; - transform: translateY(-50%); - cursor: pointer; - z-index: 99; - background-color: unset; -} - -.about_slider .prev { - left: 29vw; -} - -.about_slider .next { - right: 29vw; -} - -.about_slider .slide_title{ - text-transform: uppercase; - font-size: 24px; - font-weight: 700; - line-height: 28.8px; - color: var(--grey-black, #121212); -} -.about_slider .slide_text{ - font-size: 20px; - font-weight: 500; - line-height: 24px; - color: var(--grey-black, #121212); -} -/* About end */ - -.section_wrap{ - margin-top: -70px; - padding: 178px 0 90px; - /* GP | fix */ - -} -/* Sellers start */ -.sellers{ - padding-bottom: 113px; - -} -.sellers .seller_block{ - display: flex; - flex-direction: column; -} -.seller_block .sellers_top{ - display: flex; - align-items: center; - justify-content: space-between; - gap: 30px; - margin-bottom: 34px; -} -.sellers_top .sellers_title{ - font-size: 82px; - font-weight: 700; - line-height: 98.4px; - color: var(--creme-white, #F4F1F0); - text-transform: uppercase; -} - -.sellers_slider .swiper{ - /* padding-left: 10%; - padding-right: 20px; */ - display: flex; - align-items: center; - /* width: 1000px; */ - height: 540px; - margin: auto; - overflow: hidden; -} -.seller_name { - text-transform:lowercase; - color:var(--grey-black, #121212); - font-size: 20px; - font-weight: 400; - line-height: 24px; - text-align: left; - /* min-width: 280px; */ -} -.seller_price { -font-size: 20px; -font-weight: bold; -line-height: 30px; -text-align: left; -margin-bottom: 8px; -margin-top: 8px; -} - -.seller_full { - display: flex; - flex-direction: row; - justify-content: start; - margin-top: 48px; -} -.seller_full-link { -color:#121212; -font-size: 20px; -font-weight: bold; -line-height: 24px; -text-align: left; -text-decoration: none; -padding: 0px 0px 4px 0px; -gap: 8px; -border-bottom: 2px solid var(--interface-main_black, rgba(18, 18, 18, 1)) -} -.swiper .swiper-wrapper{ - display: flex; - height: unset; -} -.sellers .sellers_card{ - min-height: 490px; - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 11px; - align-items: center; - padding: 16px; - /* border: 2px solid var(--creme-white, #F4F1F0); */ - border-radius: 24px; - background: rgba(255, 255, 255, 0.5); -} - -.sellers_card .sellers_card-text{ - font-size: 24px; - font-weight: 500; - line-height: 28.8px; - color: var(--grey-black, #121212); - -} -/* Sellers end */ - - -/* Reviews start */ -.reviews{ - position: relative; - padding: 112px 0px 56px; - background: var(--creme-white, #F4F1F0); - border-radius: 60px 60px 0 0; -} -.reviews .reviews_person{ - position: absolute; - right: -80px; - top: 0; -} -.reviews_person-mob{ - display: none; -} -.reviews .reviews_title{ - color: var(--grey-black, #121212); - font-family: "Craftwork Grotest"; - font-size: 79px; - font-style: normal; - font-weight: 700; - line-height: normal; - text-transform: uppercase; - position: relative; - z-index: 1; -} -.reviews .reviews_block{ - margin-top: 35px; -} -.reviews_block .reviews_items{ - position: relative; - z-index: 1; - display: flex; - flex-wrap: wrap; - gap: 23px; - align-items: center; -} - -.reviews_items .reviews_item{ - position: relative; - display: flex; - flex-direction: column; - gap: 7px; - background: #F4F1F0; - padding: 23px; - border-radius: 60px; - width: 100%; - height: fit-content; - z-index: 1; -} -/* Пустой блок, чтоб на десктопе в первой строке справой стороны не загораживать картинку */ -.reviews_items .reviews_item.reviews_item--empty{ - background: none; -} -@media screen and (max-width: 480px) { - .reviews_items .reviews_item.reviews_item--empty { - display: none; - } -} - -.reviews_item .reviews_item-top{ - display: flex; - align-items: center; - gap: 8px; -} -.reviews_item .reviews_item-top img{ - width: 78px; -} -.reviews_item .reviews_item-top b{ - text-transform: uppercase; - display: block; - font-size: 24px; - font-weight: 700; - line-height: 28.8px; - color: var(--grey-black, #121212); -} -.reviews_item .reviews_item-top span{ - margin: 14px 0; - width: 100%; - display: block; - font-size: 12px; - font-weight: 500; - line-height: 14.4px; - color: var(--grey-black, #121212); -} -.reviews_item .reviews_item-text{ - font-size: 20px; - font-weight: 500; - line-height: 24px; - color: var(--grey-black, #121212); -} -.reviews_items .reviews_item1, -.reviews_items .reviews_item6{ - position: relative; - /* transform: rotate(-2.35deg); */ - transform-style: preserve-3d; -} -/* GP | fix */ -.reviews_items .reviews_item1::after, -.reviews_items .reviews_item6::after{ - content: ''; - display: block; - position: absolute; - width: calc(100% + 4px); - height: calc(100% + 4px); - background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); - border-radius: 60px; - top: -2px; - left: -2px; - z-index: -1; - transform: translateZ(-1px); -} - -.reviews_items .reviews_item6{ - transform: rotate(-7deg); -} - -.reviews_items .reviews_item3{ - transform: rotate(-5deg); -} -.reviews_items .reviews_item5, -.reviews_items .reviews_item4{ - background: radial-gradient(1073.72% 191.15% at -371.63% -32.65%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%); - /* transform: rotate(4deg); - margin-top: 25px; */ -} - -.reviews_items .reviews_item2{ - background: var(--grey-black, #121212); - /* transform: rotate(5deg); - margin: 30px 0 0 20px; */ -} -.reviews_items .reviews_item4{ - /* transform: rotate(8deg); - margin: -30px 0 0 20%; */ -} - -.reviews_item2 .reviews_item-top b, -.reviews_item2 .reviews_item-top span, -.reviews_item2 .reviews_item-text, -.reviews_item3 .reviews_item-top b, -.reviews_item3 .reviews_item-top span, -.reviews_item3 .reviews_item-text, -.reviews_item4 .reviews_item-top b, -.reviews_item4 .reviews_item-top span, -.reviews_item4 .reviews_item-text, -.reviews_item5 .reviews_item-top b, -.reviews_item5 .reviews_item-top span, -.reviews_item5 .reviews_item-text{ - color: #F4F1F0; -} -.reviews_item2 .reviews_item-text, -.reviews_item3 .reviews_item-text, -.reviews_item4 .reviews_item-text, -.reviews_item5 .reviews_item-text{ - font-weight: 400; -} - - -/* Reviews end */ - -/* About us start */ -.about_us{ - padding-bottom: 54px; - background-color: #F4F1F0; - margin-top: -1px; -} -.about_us .about_us-title{ - font-size: 82px; - line-height: 98.4px; - text-transform: uppercase; - color: var(--grey-black, #121212); -} -.about_us .about_us-block{ - display: flex; - flex-direction: column; - gap: 15px; - margin-top: 25px; -} -.about_us-block .about_us-cards{ - display: grid; - align-items: start; - grid-template-columns: 59% 39.2%; - gap: 15px; -} -.about_us-block .about_us-card{ - position: relative; - border-radius: 60px; - overflow: hidden; - height: 324px; - width: 100%; - overflow: unset; -} -.about_us-block .about_us-card::after{ - content: ''; - display: block; - position: absolute; - width: calc(100% + 4px); - height: calc(100% + 4px); - background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); - border-radius: 60px; - top: -2px; - left: -2px; - z-index: 0; -} -.about_us-card .about_us-card-img{ - border-radius: 60px; - height: 100%; - width: 100%; - object-fit: cover; - position: relative; - z-index: 1; -} -.about_us-card .card_date{ - z-index: 1; - position: absolute; - top: 27px; - right: 35px; - background: #FFFFFF; - border-radius: 62px; - padding: 5px 15px 4px 17px; - font-size: 24px; - font-weight: 400; - line-height: 28.8px; - color: var(--grey-black, #121212); -} -/* GP | fix */ - - -.about_us-card .about_us-card-info { - position: absolute; - padding: 10% 33px 21px ; - width: 100%; - z-index: 1; - display: flex; - flex-direction: column; - gap: 14px; - left: 0px; - bottom: 0; - border-radius: 0 0 60px 60px; - background: linear-gradient(0deg, #F4F1F0 45%, rgba(244, 241, 240, 0) 100%); -} - -.about_us-card-info.card-info--half-gradient { - background: unset; -} - -.about_us-card .about_us-card-info h2{ - /* max-width: 440px; */ - font-size: 24px; - line-height: 32px; - text-transform: uppercase; - color: var(--grey-black, #121212); -} -.about_us-card .about_us-card-info span{ - display: block; - font-weight: 400; - -} -.about_us-card .about_us-card-info span a{ - text-decoration: underline; - font-size: 24px; - line-height: 28.8px; - color: var(--grey-black, #121212); -} -/* About us end */ - -/* Truth start */ -.truth{ - border-radius: 0 0 60px 60px; - background: var(--creme-white, #F4F1F0); - padding-bottom: 119px; - margin-top: -1px; -} -.truth .truth_top{ - position: relative; - display: flex; - align-items: center; - justify-content: space-between; -} -.truth .truth_title{ - font-size: 82px; - font-weight: 700; - line-height: 98.4px; - text-align: end; - text-transform: uppercase; - width: 723px; -} -.truth .truth_title span{ - color: #76CE75; - -} -.truth_top .gift_img{ - margin-left: -180px; -} -.truth_top .gift_line-img{ - position: absolute; - display: none; - bottom: 150px; - right: 0; - width: 245px; -} -.truth_content { - position: relative; - display: none; -} - -.truth_content::after{ - content: ''; - display: block; - position: absolute; - width: calc(100% + 4px); - height: calc(100% + 4px); - background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); - border-radius: 60px; - top: -2px; - left: -2px; - z-index: 0; -} -.truth_content.active { - display: block; -} -.truth .truth_block{ - position: relative; - z-index: 1; - display: flex; - flex-direction: column; - width: 100%; - height: 480px; - overflow: hidden; - background: var(--creme-white, #F4F1F0); - border-radius: 60px; - box-shadow: 0px 3px 13.5px 0px #00000040; - padding: 25px 34px 0px 63px; -} -.truth .truth_success, -.truth .truth_error { - display: none; -} -.truth .truth_success.show, -.truth .truth_error.show { - display: flex; -} - -.truth_block .truth_line{ - display: flex; - align-items: center; - justify-content: center; - gap: 24px; - margin-bottom: 24px; -} -.truth_block .truth_line span{ - border: 1px solid var(--grey-black, #121212); - opacity: .6; - width: 73px; - border-radius: 10px; -} -.truth_block .truth_line span.active{ - opacity: 1; -} -.truth_block .truth_block-title{ - font-size: 82px; - font-weight: 700; - line-height: 98.4px; - color: var(--grey-black, #121212); - margin-bottom: 33px; - text-transform: uppercase; -} -.truth_content-end .truth_block-title, -.truth_success .truth_block-title{ - background: -webkit-radial-gradient(#0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} -.truth_error .truth_block-title{ - background: -webkit-radial-gradient(#F21E6A 0%, #FF6543 112.38%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} -.truth_block .truth_block-text{ - position: relative; - z-index: 1; - display: flex; - align-items: start; - gap: 26px; -} -.truth_block .truth_end-text{ - display: flex; - flex-direction: column; - gap: 21px; -} -.truth_block .truth_block-text p{ - font-size: 24px; - font-weight: 700; - line-height: 28.8px; - max-width: 559px; -} -.truth_block .truth_block-text p span{ - font-weight: 500; -} -.truth_default .truth_block-text p{ - text-transform: uppercase; -} -.truth_error .truth_block-text p, -.truth_success .truth_block-text p { - max-width: 592px; - font-size: 20px; - line-height: 24px; - font-weight: 500; -} -.truth_block .truth_info{ - position: absolute; - width: 91%; - bottom: 0; - display: flex; - align-items: end; - justify-content: space-between; - margin-top: -100px; - z-index: 0; -} -.truth_content-end .truth_info{ - display: flex; - align-items: center; - justify-content: end; -} -.truth_block .truth_links{ - display: flex; - align-items: center; - gap: 15px; - padding-bottom: 56px; -} -.truth_error .truth_links, -.truth_success .truth_links{ - gap: 20px; -} -.truth_block .truth_result{ - display: flex; - align-items: center; - gap: 23px; -} -.truth_block .truth_result img{ - width: 100%; -} -.truth_block .truth_link{ - width: 141px; - height: 50px; - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - font-weight: 500; - line-height: 28.8px; - text-align: center; - color: var(--grey-black, #121212); - border: 2px solid var(--grey-black, #121212); - border-radius: 48px; -} - -.truth_content-end .truth_info img{ - margin-right: -34px; -} -.truth_content-end .truth_block .truth_link{ - width: 221px; -} - -.truth_content-end .truth_xn{ - position: relative; - width: 270px; - height: 158px; - background-image: url(../img/xn-border.svg); - background-repeat: no-repeat; - background-size: 100% 100%; - display: flex; - align-items: center; - justify-content: center; -} - -.truth_points { - font-size: 450%; - font-weight: 700; -} - -/* Truth end */ - - -/* Blog start */ -.blog{ - padding-top: 89px; -} -.blog .blog_block{ - display: flex; - flex-direction: column; - gap: 15px; -} -.blog_block .blog_top{ - display: flex; - align-items: center; - justify-content: space-between; - gap: 30px; -} -.blog_block .blog_title{ - font-size: 82px; - font-weight: 700; - line-height: 98.4px; - color: var(--creme-white, #F4F1F0); - text-transform: uppercase; -} -.blog_block .blog_text{ - font-size: 24px; - line-height: 28.8px; - color: var(--creme-white, #F4F1F0); -} -.blog .blog_slider{ - margin-top: 30px; -} -.blog_slider .swiper{ - padding-left: 9%; - padding-right: 20px; -} -.blog_slider .blog_card { - display: flex; - flex-direction: column; - border-radius: 60px; - transition: .3s ease all; - height: auto; -} -.blog_slider .blog_card:hover{ - border-color: #121212; - overflow: initial; -} - -/* .blog_slider .blog_card:hover .card-line-img{ - opacity: 1; -} */ - -.blog_slider .blog_card:hover .blog_card-text, -.blog_slider .blog_card:hover .blog_card-title{ - color: #F4F1F0; -} - -.blog_card .blog_card-img{ - object-fit: cover; - border: 2px solid var(--creme-white, #F4F1F0); - border-width: 2px 2px 0 2px; - width: 100%; - height: 40%; - border-radius: 60px 60px 0 0; -} -.blog_card .card-line-img{ - opacity: 0; - transition: .3s ease all; -} -.blog_card .blog_card-info-wrap{ - border: 2px solid var(--creme-white, #F4F1F0); - width: 100%; - height: 60%; - display: flex; - background: linear-gradient(355.81deg, #F4F1F0 5.04%, rgba(244, 241, 240, 0.3) 87.4%); - border-radius: 0 0 60px 60px; - padding: 25px 25px 30px 30px; -} -.blog_slider .blog_card:hover .blog_card-info-wrap{ - background: var(--grey-black, #121212); - /* padding-right: 15px; */ -} -.blog_card .blog_card-info{ - display: flex; - flex-direction: column; - margin-top: -2px; - gap: 16px; - -} -.blog_card .blog_card-title{ - /* font-size: 36px; */ - font-size: 2.1vw; - font-weight: 700; - line-height: 43.2px; - color: var(--grey-black, #121212); - text-transform: uppercase; - transition: .3s ease all; -} -.blog_card .blog_card-text{ - font-size: 24px; - font-weight: 500; - line-height: 28.8px; - color: var(--grey-black, #121212); - transition: .3s ease all; -} -/* Blog end */ - -.marketplace{ - margin-top: 5rem; -} -/* Discount start */ -.discount{ - padding-top: 50px; - padding-bottom: 50px; -} -.discount .discount_block{ - display: flex; - flex-direction: column; -} -.discount .discount_top{ - position: relative; - margin-bottom: 50px; -} -.discount_top .discount_title{ - font-size: 82px; - font-weight: 700; - line-height: 98.4px; - color: var(--creme-white, #F4F1F0); - text-transform: uppercase; -} -.discount_top .discount_top-imgs{ - position: absolute; - top: 55px; - right: -80px; -} -.discount_block .discount_form{ - position: relative; - z-index: 1; - display: flex; - align-items: center; - gap: 16px; - margin-bottom: 6px; -} -.discount_form .discount_form-btn { - background: inherit; - min-height: unset; -} -.discount_form .discount_form-btn:hover{ - background: #121212; - border-color: #121212; - color: #3ab18f; -} -.discount_form .discount_form-inp{ - width: 280px; - height: 50px; - border: 2px solid var(--creme-white, #F4F1F0); - padding: 10px 18px; - font-size: 24px; - font-weight: 500; - line-height: 28.8px; - color: var(--creme-white, #F4F1F0); - border-radius: 28px; - opacity: .6; -} -.discount_form .discount_form-inp::placeholder{ - font-size: 24px; - font-weight: 500; - line-height: 28.8px; - color: var(--creme-white, #F4F1F0); -} -.discount_form .discount_form-btn { - text-transform: lowercase; -} -.discount_block .discount_form-text{ - font-size: 14px; - line-height: 16.8px; - color: var(--creme-white, #F4F1F0); - opacity: .6; - max-width: 778px; - margin-bottom: 27px; -} -.discount_block .discount_text{ - font-size: 20px; - line-height: 24px; - color: var(--creme-white, #F4F1F0); -} - -.discount_block .discount_cosmodog{ - position: relative; - width: 100%; - height: 626px; - border-radius: 60px; - border: 2px solid var(--creme-white, #F4F1F0); - display: flex; - align-items: end; - justify-content: center; - overflow: hidden; - cursor: pointer; -} -.discount_cosmodog .discount_cosmodog-img{ - - width: 100%; - height: 100%; - object-fit: cover; - -} - -.discount_cosmodog__slider{ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} -.discount_cosmodog .discount_cosmodog-img.active{ - opacity: 1; -} -.discount_cosmodog:hover .discount_cosmodog-img:nth-child(2) { - opacity: 1; -} -.discount_cosmodog .discount_cosmodog_info{ - position: relative; - z-index: 1; - padding: 33px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: end; - background: linear-gradient(0deg, #F4F1F0 56%, rgba(244, 241, 240, 0) 100%); - width: 100%; - height: 219px; -} -.discount_cosmodog .discount_cosmodog-title{ - font-size: 40px; - font-weight: 700; - line-height: 48px; - text-align: center; - color: var(--grey-black, #121212); - text-transform: uppercase; -} -.discount_cosmodog .discount_cosmodog-text{ - font-size: 24px; - font-weight: 500; - line-height: 28.8px; - text-align: center; -} - -/* Discount end */ - -.gp_tags { - border: 1px solid #121212; - border-radius: 48px; - padding:3px 6px 3px 6px; - margin-right: 6px; - margin-bottom: 6px; - font-size: 16px; - line-height: 16px; - height: 27px; - text-transform: lowercase; -} -.gp_tags:last-child { - margin-right: 0; -} -.tags_block { - display: flex; - flex-direction: row; - justify-content:start; - flex-wrap: wrap; - width: 100%; -} - -.seller_buy { - text-transform: capitalize; - width: 100%; - height: 48px; - padding: 12px 24px 12px 24px; - gap: 8px; - border-radius: 20px; - color:#fff; - background: var(--interface-main_black, #121212); -} -.seller_link { - width: 100%; -} -.truth-form{ - display: flex; - gap: 10px; -} -.truth-form button{ - flex-shrink: 0; -} -input.truth-input{ - width: 200px; - height: 50px; - border-color: #121212 !important; - border-radius: 48px; - border: 2px solid #121212; - flex-shrink: 1; - margin-right: 12px; - padding: 20px; - font-size: 18px; -} -@media (max-width: 776px) { - .truth-form{ - flex-direction: column; - margin-bottom: 30px; -} -.truth-form button{ - width: 100%; - text-align: center; - justify-content: center; -} -input.truth-input{ - width: 100%; -} -} - -.smi-card-wrapper{ - border-radius: 60px; - background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); - border-radius: 60px; - padding: 2px; - width: 100%; - height: 484px; -} -.smiSlider{ - margin-top: 3rem; -} -.smi-card{ - display: flex; - flex-direction: column; - justify-content: flex-end; - width: 100%; - height: 480px; - border-radius: 60px; - position: relative; - overflow: hidden; - padding: 28px 35px; - color: #121212; - -} -.smi-card::before{ - background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%); -content: ''; -height: 100%; -width: 100%; -position: absolute; -bottom: 0; -left: 0; -z-index: 2; -} -.smi-card-img{ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; -} -.smi-card-date, .smi-card-title, .smi-card-label{ - position: relative; - z-index: 2; -} -.smi-card-label{ - display: flex; - border: 1px solid #121212; - border-radius: 28px; - padding: 4px 15px; - align-items: center; - font-weight: 500; - font-size: 16px; - gap: 6px; - background-color: #fff; - width: max-content; -} -.smi-card-label p{ - margin-bottom: 0; -} -.smi-card-title{ - font-weight: 700; -font-size: 22px; -text-transform: uppercase; line-height: 120%; -margin-bottom: 7px; -margin-top: 10px; -} -.smi-card-date{ - font-weight: 500; -font-size: 12px; -} -.smiSlider.swiper{ - overflow: visible; - } - .about_us{ - width: 100%; - overflow: hidden; - } - .smi-card-label img{ - max-height: 25px; - width: auto; - } - .smi-card-label{ - height: 35px; - } -@media (max-width: 640px) { - .smi-card{ - padding: 16px; - height: 420px; - border-radius: 30px; - } - .smi-card-title{ - font-size: 18px; - } - .smi-card-wrapper{ - height: 424px; - border-radius: 30px; - } - -} - -.slider-arrows{ - position: relative; - /* top: 50%; - left: 50%; - transform: translate(-52.5%, -50%); - width: 78%; */ - display: flex; - justify-content: space-between; - z-index: 40; - pointer-events: none; -} -@media (max-width: 640px) { - .slider-arrows{ - display: none; - } - .sellers_slider .swiper{ -width: 330px; - } -} -.blogSlider .slider-arrows{ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-55%, -50%); - width: 76.5%; - display: flex; - justify-content: space-between; - z-index: 40; - pointer-events: none; -} -.smiSlider .slider-arrows { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-47%, -50%); - width: 112%; - display: flex; - justify-content: space-between; - z-index: 40; - pointer-events: none; - -} -.slider-arrow{ - background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='0.5' y='0.5' width='55' height='55' rx='19.5' fill='white'/%3e%3crect x='0.5' y='0.5' width='55' height='55' rx='19.5' stroke='%23121212'/%3e%3cpath d='M37 28.3633H20.5' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M37 28.3633L30.636 34.7272' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M37 28.3633L30.636 21.9993' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e "); - height: 56px; - width: 56px; - background-size: contain; - pointer-events: all; - -} -.slider-arrow[disabled]{ - visibility: none; -} -.slider-arrow-prev{ - transform: scaleX(-1); - margin-right: 24px; -} - -.header-lang{ - font-size: 16px; - font-weight: 500; - line-height: normal; - text-transform: uppercase; - color: var(--creme-white); - border-radius: 45px; - border: 1px solid var(--creme-white); - opacity: 0.6; - appearance: none; - background-color: transparent; - background-image: url(../img/i-arr_down.svg); - background-position: center right 10px; - background-repeat: no-repeat; - background-size: 16px; - padding: 11px 36px 11px 23px; - cursor: pointer; - outline: none; - position: relative; - z-index: 10; - } - - .header-lang ul{ - border: 1px solid #f3f1f0; - border-radius: 20px; - width: 100%; - padding-top: 11px; - padding-bottom: 11px; - padding-left: 23px; - padding-right: 23px; - background: #57da7d; - text-align: center; - opacity: 1; - left: 0; - bottom: -30px; - transform: translateY(100%); - - position: absolute; - display: none; - } - - .header-lang ul li a{ - font-weight: 500; - font-size: 16px; - text-transform: uppercase; - color: var(--creme-white); - } - - .category-back{ - width: 124px; - color: #121212; -height: 28px;border: 1px solid #121212; -border-radius: 65px; -background-color: transparent; -font-weight: 500; -font-size: 16px; -display: flex; -align-items:center; -justify-content: center; -margin-bottom:1.5rem; -margin-top: 14px; -} -.category-back::before{ - background-image: url("data:image/svg+xml,%3Csvg width='10' height='15' viewBox='0 0 10 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L2 7.5L9 14' stroke='%23121212' stroke-width='2' /%3E%3C/svg%3E"); - content: ''; - width: 10px; - height: 15px; - flex-shrink: 0; - margin-right: 8px; -} -.category-back:hover{ - color: #121212; -} - -.main-page-wrapper{ - margin-top: 0 !important; -} - -.header_icon{ - flex-shrink: 0; -} - -[class*="wd-section-stretch"] { - position: relative; - min-width: 100vw !important; - width: 100vw; - left: calc(50% - 50vw)!important; -} - -.btn{ - padding: 0 30px; -} - -.header_icon{ - position: relative; -} - -.basket-btn__counter{ - position: absolute; - top: 0; - right: 0; - border-radius: 100%; -background: #76ce75; -height: 17px; -width: 17px; -font-weight: 700; -font-size: 10px; -text-align: center; -color: var(--creme-white); -display: flex; -align-items: center; -justify-content: center; -} - - -@media (max-width: 575px) { - .wpcf7-form-control-wrap{ - width: 100%; - } -} - -.seller_bt{ - display: flex; - align-items: center; - gap: 12px; -} - -/* discount sale */ - -.discount__sale { - padding: 69px 0 80px; - border-radius: 60px; - background: var(--creme-white, #F4F1F0); - box-shadow: 6px 9px 20px 0px rgba(0, 0, 0, 0.15); -} - -.discount__sale .discount_title { - color: var(--interface-main_black, #121212); - font-family: "Craftwork Grotest"; - font-size: 82px; - font-style: normal; - font-weight: 700; - line-height: normal; - text-transform: uppercase; -} - -.discount__sale .discount_title span { - background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #76CE75 90%, #BBE38D 100%)); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.discount__sale .discount_form { - display: flex; -} - -.discount__sale .discount_form .discount_form-inp { - color: var(--interface-main_black, #121212); - border: 2px solid var(--interface-main_black, #121212); -} - -.discount__sale .discount_form .discount_form-btn { - color: var(--interface-main_black, #121212); - border: 2px solid var(--interface-main_black, #121212); -} - -.discount__sale .discount_form .discount_form-btn:hover { - color: #FFF; -} - -.discount__sale .discount_form-text { - color: var(--interface-main_black, #121212); - font-family: "Craftwork Grotest"; - font-size: 14px; - font-style: normal; - font-weight: 500; - line-height: normal; - opacity: .6; - max-width: 750px; - margin-top: 6px; -} - -.discount__sale .discount_text { - margin-top: 27px; - color: var(--interface-main_black, #121212); - font-family: "Craftwork Grotest"; - font-size: 20px; - font-style: normal; - font-weight: 500; - line-height: normal; -} - -.discount__sale .discount_form .discount_form-inp::placeholder { - color: var(--interface-main_black, #121212); -} - -@media screen and (max-width: 576px) { - .discount__sale { - padding: 37px 0; - } - - .dicsount__body { - display: flex; - flex-direction: column; - margin-top: 26%; - } - - .discount__sale .discount_form { - flex-direction: column; - gap: 21px; - } - - .discount__sale .discount_top .discount_top-imgs .dicount_dog-img { - height: 356.534px; - width: 100%; - object-fit: contain; - object-position: right; - } - - .discount__sale .dicsount__body > { - order: 2; - } - - .discount__sale .discount_text { - order: 1; - margin-top: 0; - font-size: 18px; - } - - .discount__sale .discount_form-text { - order: 3; - font-size: 12px; - margin-top: 20px; - } - - .discount__sale .wpcf7 { - order: 2; - margin-top: 30px; - } - - .discount__sale .discount_form .discount_form-btn, - .discount__sale .discount_form .discount_form-inp { - text-align: center; - padding: 10px 10px 11px 10px; - font-size: 24px; - height: 50px; - justify-content: center; - } - - .discount__sale .discount_form .discount_form-inp::placeholder { - font-size: 24px; - } - - .discount__sale .discount_top .discount_top-imgs { - transform: unset; - } - - .discount__sale .discount_top .discount_top-imgs { - margin-top: -24px; - right: 15px; - width: calc(100% + 30px); - margin-bottom: -20%; - } -} - -.blog_card-title { - font-size: 28px; - font-style: normal; - font-weight: 700; - line-height: 32px; -} - -.blog__card-btn { - margin-top: 24px; - color: #000; - font-family: "Craftwork Grotest"; - font-size: 12px; - font-style: normal; - font-weight: 500; - line-height: normal; - padding: 6px 15px 10px 15px; - max-width: max-content; - display: block; - margin-left: auto; - border-radius: 28px; - border: 1px solid #000; - background: var(--wh, #FFF); - transition: all .24s; -} - - -.blog_slider .blog_card:hover .blog__card-btn { - border-radius: 28px; - border: 1px solid var(--interface-main_white, #FFF); - background: transparent; - color: var(--interface-main_white, #FFF); - transition: all .24s; -} - -.blog__row { - display: flex; - justify-content: space-between; - align-items: center; -} - -.blog__row .blog_text { - max-width: 627px; -} - -.truth_top { - position: relative; -} - -.truth_top picture img { - width: 315.563px; - height: 308.2px; - position: absolute; - right: 0; - top: -110px; -} - -.truth .truth_title { - text-align: left; - width: 100%; - font-size: 74px; - font-style: normal; - font-weight: 700; - line-height: normal; - margin-bottom: 62px; -} - -.truth_block .truth_end-text strong { - font-weight: 900; -} - -.truth__end-promo { - color: var(--grey-black, #121212); - font-family: "Craftwork Grotest"; - font-size: 24px; - font-style: normal; - font-weight: 900; - line-height: normal; - text-transform: uppercase; -} - -.truth__end-btns { - margin-top: 10px; - display: flex; - gap: 12px; -} - -.truth__end-btn { - padding: 10px 10px 11px 10px; - font-family: "Craftwork Grotest"; - font-size: 24px; - font-style: normal; - font-weight: 500; - line-height: normal; - border-radius: 48px; - max-width: 210px; - width: 100%; - text-align: center; - transition: all .3s; - text-transform: none; -} - -.truth__end-btn.--white { - color: var(--grey-black, #121212); - border: 2px solid var(--grey-black, #121212); - background-color: transparent; -} - -.truth__end-btn.--white:hover { - background: #121212; - color: #FFF; - transition: all .3s; -} - -.truth__end-btn.--black { - background: var(--interface-main_black, #121212); - color: var(--interface-main_white, #FFF); - border: 2px solid transparent; -} - -.truth__end-btn.--black span { - position: relative; - padding-right: 16px; -} - -.truth__end-btn.--black span::after { - content: ''; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - width: 13px; - height: 13px; - background-size: 100%; - background-repeat: no-repeat; - transition: all .3s; - background-position: center; - background-image: url('data:image/svg+xml,'); -} - -.truth__end-btn.--black:hover { - background: transparent; - color: #121212; - border-color: #000; - transition: all .3s; -} - -.truth__end-btn.--black:hover span::after { - transition: all .3s; - background-image: url('data:image/svg+xml,'); -} - -@media screen and (max-width: 576px) { - .truth_top picture img { - position: relative; - top: unset; - right: unset; - left: 0; - width: 294.209px; - height: 198.713px; - } - - .truth .truth_title { - text-align: right; - } - - .truth__end-btns { - flex-direction: column; - } - - .truth__end-btn { - max-width: 100%; - } - - .truth .truth_title { - margin-bottom: 0; - } -} - -.home__block { - max-width: 50%; -} - -.home__title { - color: var(--interface-background, #F2F2F2); - font-family: "Craftwork Grotest"; - font-size: 48px; - font-style: normal; - font-weight: 700; - line-height: 56px; /* 116.667% */ - text-transform: uppercase; -} - -@media (min-width: 1600px){ - .home__title { - - font-size: 64px; - line-height: 120%; - } -} -.home__subtitle { - color: var(--interface-background, #F2F2F2); - font-family: "Craftwork Grotest"; - margin-top: 32px; - font-size: 20px; - font-style: normal; - font-weight: 500; - line-height: 24px; /* 120% */ -} - -.home__btn { - border-radius: 20px; - background: var(--interface-main_white, #FFF); - padding: 12px 24px; - color: var(--interface-main_black, #121212); - font-family: "Craftwork Grotest"; - font-size: 20px; - font-style: normal; - font-weight: 600; - line-height: 24px; /* 120% */ - display: block; - margin-top: 32px; - max-width: 290px; - text-align: center; - width: 100%; - border: 2px solid transparent; -} - -.home__btn span { - position: relative; - padding-right: 20px; -} - -.home__btn span::after { - content: ''; - width: 13px; - height: 13px; - background-size: 100%; - background-repeat: no-repeat; - background-position: center; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - background-image: url('data:image/svg+xml,'); -} - -.home__btn:hover { - border-color: #FFF; - background: transparent; - color: #FFF; -} - -.home__btn:hover span::after { - background-image: url('data:image/svg+xml,'); -} - -.home__pagination { - margin-top: 120px; -} - -.home__pagination .swiper-pagination-bullet { - width: 39.278px; - height: 6px; - border-radius: 54px; - opacity: 0.5; - background: var(--interface-main_white, #FFF); -} - -.home__pagination .swiper-pagination-bullet-active { - opacity: 1; -} - -.home__item img { - position: absolute; - right: -142px; - top: -110px; - height: auto; - width: 70%; - max-width: 600px; -} - -@media (min-width: 1420px) { - .home__item img { - position: absolute; - right: -142px; - top: -110px; - height: auto; - width: 70%; - max-width: 800px; - } -} - -.home__swiper, -.home__swiper .swiper-wrapper { - height: auto; -} - -.blog .blog_slider { - margin-top: 128px; -} - -.cosmopet-x { - padding: 36px 0 0 0; - width: 100%; - overflow: hidden; -} - -.cosmopet-x__swiper, -.cosmopet-x__swiper .swiper-wrapper { - height: auto; -} - -.cosmopet-x__title { - color: var(--creme-white, #F4F1F0); - font-family: "Craftwork Grotest"; - font-size: 82px; - font-style: normal; - font-weight: 700; - line-height: normal; - text-transform: uppercase; -} - -.cosmopet-x__swiper { - margin-top: 52px; - position: relative; -} - -.cosmopet-x__item { - position: relative; - width: 100%; - height: 484px; -} - -.cosmopet-x__item::before { - content: ''; - position: absolute; - left: 0; - top: 0; - height: 100%; - z-index: 1; - width: 100%; - border-radius: 60px; - border: 2px solid var(--creme-white, #F4F1F0); - background: linear-gradient(180deg, rgba(255, 255, 255, 0.83) 0%, rgba(255, 255, 255, 0.00) 25.17%, rgba(255, 255, 255, 0.00) 65%, rgba(255, 255, 255, 0.83) 80%); -} - -.cosmopet-x__bg { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - object-fit: cover; - object-position: center; - border-radius: 60px; -} - -.cosmopet-x__body { - position: absolute; - z-index: 2; - bottom: 0; - left: 0; - width: 100%; - padding: 36px 35px; -} - -.cosmopet-x__heading { - color: var(--grey-black, #121212); - font-family: "Craftwork Grotest"; - font-size: 22px; - font-style: normal; - font-weight: 700; - line-height: normal; - text-transform: uppercase; -} - -.cosmopet-x__btn { - display: block; - max-width: max-content; - margin-top: 7px; - color: #000; - font-family: "Craftwork Grotest"; - font-size: 12px; - font-style: normal; - font-weight: 500; - line-height: normal; - padding: 6px 15px 10px 15px; - border-radius: 28px; - border: 1px solid #000; - background: var(--wh, #FFF); -} - -.cosmopet-x__top { - position: absolute; - height: auto; - width: 60%; - top: 43px; - left: 50%; - transform: translateX(-50%); - z-index: 2; -} - -.cosmopet-x .slider-arrows { - top: 50%; - transform: translateY(-50%); - position: absolute; - width: 100%; -} - -.cosmopet-x .slider-arrows .cosmopet-prev { - left: -30px; -} - -.cosmopet-x .slider-arrows .cosmopet-next { - right: -30px; -} - -.slider-arrow { - background-image: url('data:image/svg+xml,')!important; -} - -.discount_top { - position: relative; -} - -.dicsount__body { - margin-top: 39px; -} - -.reviews_items .reviews_item { - flex: 0 0 calc(50% - 23px); - min-height: 334px; -} - -.reviews__left { - flex: 0 0 50%; - display: flex; - flex-direction: column; - gap: 23px; -} - -.reviews_item-top + span { - color: var(--creme-white, #F4F1F0); - font-family: "Craftwork Grotest"; - font-size: 12px; - font-style: normal; - font-weight: 500; - line-height: normal; -} - -.reviews_item1 .reviews_item-top + span { - color: var(--interface-main_black, #121212); -} - -.reviews .container { - position: relative; -} - -.truth { - padding-top: 180px; -} - -.blogosphere{ - padding-bottom: 6vh; -} - -.blogosphere__item { - position: relative; - /* width: 100%; */ - /* width: auto; - height: 33vh; */ - /* padding-bottom: 177.6061776061776%; */ - height: 60vh; - width: 36vh; -} - -.blogosphere__item .blogosphere__preview { - position: relative; - height: 60vh; - width: 36vh; - object-fit: cover; - /* height: 100%; - width: 100%; */ - /* position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - object-fit: cover; - object-position: center; */ - border-radius: 33.6px; - box-shadow: 0px 4px 14.4px 0px rgba(0, 0, 0, 0.33); -} - -.blogosphere__content { - position: absolute; - /* width: 25vw; */ - width: 100%; - padding: 10px 15px; - display: flex; - align-items: center; - gap: 10px; - z-index: 1; -} - -.blogosphere__avatar -{ - position: relative; - width: 39.2px; - height: 39.2px; - flex-shrink: 0; - box-shadow: unset; - border: 1.4px solid #FFF; - border-radius: 100%; - flex-shrink: 0; -} - -.blogosphere__name { - color: #FFF; - font-family: "Craftwork Grotest"; - font-size: 16.8px; - font-style: normal; - font-weight: 700; - line-height: 22.4px; /* 133.333% */ -} - -.blogosphere__swiper.swiper { - position: relative; -} - -.blogosphere__swiper .carousel .carousel-item{ - width: auto; - height: auto; -} - -.blogosphere__swiper .slider-arrows { - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - max-width: 421px; - width: 100%; - left: 50%; - pointer-events: none; -} - -.blogosphere { - padding-top: 60px; -} - -.blogosphere__top { - display: flex; - align-items: center; - gap: 30px; -} - -.blogosphere__title { - background-size: 100%; - background-repeat: no-repeat; - background-position: center; - width: 692.514px; - height: 71.298px; - background-image: url('data:image/svg+xml,'); -} - -.blogosphere__circle { - flex-shrink: 0; -} - -.marketplace__swiper, .marketplace__swiper .swiper-wrapper { - height: auto; -} - -.marketplace__swiper .swiper-slide { - max-width: max-content; -} - -.marketplace__title { - color: var(--grey-black, #121212); - font-family: "Craftwork Grotest"; - font-size: 36px; - font-style: normal; - font-weight: 700; - line-height: 40px; /* 111.111% */ - text-transform: uppercase; -} - -.marketplace__swiper { - margin-top: 50px; - margin-left: -70px; - margin-right: -70px; -} - -.marketplace { - position: relative; -} - -.marketplace:after { - content: ''; - position: absolute; - right: 0; - bottom: 0; - width: 222px; - height: 671px; - background: linear-gradient(270deg, #F6F4F3 0%, rgba(242, 242, 242, 0.00) 100%); - z-index: 1; -} - -.blog_card .blog__card-wrapper .blog_card-img { - width: 100%; - height: 100%; - position: absolute; -} - -.blog__card-wrapper { - position: relative; - width: 100%; - padding-bottom: 61.31687242798354%; -} - -.discount__sale .discount_form .discount_form-inp { - opacity: 1; -} - -.discount__sale .discount_form .discount_form-inp::placeholder { - opacity: .6; -} - -.discount__sale .discount_title span { - background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%)); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.blog_link.main_link:hover span { - background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%)); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -@media screen and (max-width: 991px) { - .reviews__left { - width: 100%; - } -} - -@media screen and (max-width: 768px) { - .home__item img { - position: relative; - right: unset; - top: unset; - width: 100%; - height: auto; - } - - .home__item { - display: flex; - flex-direction: column-reverse; - } - - .home__block { - max-width: 100%; - margin-top: 12px; - } - - .home__title { - font-size: 32px; - font-style: normal; - font-weight: 700; - line-height: 38px; /* 118.75% */ - letter-spacing: -0.32px; - text-transform: uppercase; - } - - .home__subtitle { - margin-top: 16px; - } - - .home__btn { - margin-top: 16px; - max-width: 100%; - } - - .home__pagination { - margin-top: 12px; - text-align: center; - } - - .blog .blog_slider { - margin-top: 28px; - } - - .cosmopet-x__title { - font-size: 32px; - line-height: 38px; /* 118.75% */ - } - - .cosmopet-x__item { - height: 0; - padding-bottom: 151.25%; - } - - .cosmopet-x .slider-arrows { - display: flex; - } - - .cosmopet-x__swiper { - margin-top: 23px; - } - - .slider-arrows .cosmopet-prev { - left: -16px; - } - - .slider-arrows .cosmopet-next { - right: -16px; - } - - .reviews .reviews_title { - text-align: left!important; - font-size: 32px!important; - line-height: 38px!important; /* 118.75% */ - letter-spacing: -0.32px!important; - text-transform: uppercase!important; - margin: 0!important; - } - - .reviews_item .reviews_item-top { - justify-content: space-between; - } - - .reviews__left { - width: 100%; - } - - .reviews_items .reviews_item { - transform: unset!important; - } - - .reviews_items .reviews_item { - width: 100%!important; - } - - .reviews_items .reviews_person-mob { - display: none; - } - - .reviews_item .reviews_item-text { - font-size: 16px!important; - font-style: normal!important; - font-weight: 500!important; - line-height: 20px!important; - } - - .reviews_item .reviews_item-top b { - font-size: 19px!important; - font-style: normal!important; - font-weight: 700!important; - line-height: 24px!important; /* 120% */ - text-transform: uppercase!important; - } - - .reviews_item .reviews_item-text { - max-width: 100%!important; - } - - .truth { - padding-top: 78px; - } - - .blogosphere__circle { - display: none; - } - - .blogosphere__swiper.swiper { - margin-left: -15px; - width: calc(100% + 30px); - } - - .marketplace__title { - font-size: 32px; - line-height: 38px; /* 118.75% */ - letter-spacing: -0.32px; - } - - .marketplace__swiper { - margin-top: 24px; - margin-left: 0px; - margin-right: 0px; - } - - .smiSlider .slider-arrows { - transform: translate(-50%, -50%)!important; - width: 106%!important; - } - - .truth .truth_title span { - background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%)); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - color: none; - } - - .truth { - padding-top: 20px!important; - } - - .truth_content-wrap { - padding: 0 30px; - } -} - -@media screen and (max-width: 540px) { - .marketplace:after { - display: none; - } - - .truth .truth_content .truth_block, .truth .truth_content-end .truth_block { - height: auto!important; - } - - .truth .truth_block { - padding: 25px 15px 26px 15px!important; - } - - .blog_block .blog_text { - max-width: 100%!important; - font-size: 18px!important; - font-style: normal!important; - font-weight: 500!important; - line-height: 24px!important; - } - - .home { - background: var(--radial); - } - - .blogosphere__swiper .slider-arrows { - display: flex; - padding: 0 4.5px; - } - - .truth_block .truth_links { - padding-bottom: 0!important; - } - - .reviews_items .reviews_item { - padding: 32px 20px 35px 24px!important; - border-radius: 3.75rem!important; - } - - .reviews_items .reviews_item::after { - border-radius: 3.75rem!important; - } - - .blogosphere__top { - margin-bottom: -55px; - } - - .truth_block .truth_block-text { - min-height: unset!important; - } - - .discount { - margin-top: -50px; - } - - .sellers { - padding-top: 35px; - } - - .blogSlider .slider-arrows { - display: none!important; - } - - .blog_slider { - padding-bottom: 0!important; - } - - .cosmopet-x .slider-arrows .cosmopet-prev { - left: -10px; - } - - .cosmopet-x .slider-arrows .cosmopet-next { - right: -10px; - } - - .sellers { - padding-bottom: 120px!important; - } - - .discount__sale { - border-radius: 24px; - } - - .discount_form .discount_form-btn { - opacity: 1!important; - } - - .blogosphere { - padding-top: 40px; - } - - .reviews { - padding: 56px 0 62px!important; - } - - .reviews_item-top + span { - line-height: 15px; - } - - .reviews_block .reviews_items { - margin-left: 0!important; - } - - .reviews_item-name { - max-width: 70%; - } - - .reviews_item .reviews_item-top img { - width: 72px!important; - height: 72px!important; - } - - .reviews__left { - gap: 10px; - } -} - -.blogSlider .swiper-slide { - height: auto; -} - -.blogSlider .swiper-slide .blog_card { - height: 100%; -} - -.blogSlider .swiper-slide .blog_card .blog_card-info-wrap { - height: 100%; -} - -.blog_slider { - padding-bottom: 92px; -} - -.blog_card .blog_card-info { - justify-content: space-between; -} - -.blog_card-text { - flex: auto; -} - - -.carousel-item.active { - /* pointer-events: none; */ -} - -.sec-bf{ - position: relative; - z-index: 3; -} - -.copied{ - position: absolute; - top: -14px; - border-radius: 20px; - font-size: 13px; - right: -20px; - background: #fff; - padding: 5px; - opacity: 0; - pointer-events: none; - color: #000; -} - -.truth__end-btn.active .copied{ - opacity: 1; -} - -.home { - overflow: hidden; -} - - -.reviews_block { - position: relative; -} - -.reviews_items.--visible { - display: flex; - flex-wrap: wrap; - gap: 20px; -} - -.reviews_row { - flex: 1 1 100%; - display: flex; -} - -.reviews_row--left { - justify-content: flex-start; -} - -.reviews_row--right { - justify-content: flex-end; -} - -.reviews_item { - width: 50%; - /* Каждый блок занимает половину ширины */ -} - -.reviews_item-swiper { - width: 100%; -} - -.reviews_item-img { - border-radius: 50%; -} - -.reviews_item-top { - display: flex; - justify-content: space-between; - padding-bottom: 10px; -} - -.reviews_item-text { - margin-top: 10px; -} - -.reviews_item.reviews_item1 { - flex: 1 1 50%; - max-width: 50%; -} - -.reviews_item.reviews_item2, -.reviews_item.reviews_item4 { - flex: 1 1 calc(50% - 20px); - max-width: 50%; -} - -.reviews_item.reviews_item2 { - position: absolute; - max-width: 500px; - height: 360px; - right: -4%; - bottom: 25%; -} - -.reviews .reviews_person { - position: absolute; - right: -100px; - top: -20%; -} - -@media (max-width: 768px) { - .reviews_row { - justify-content: center !important; - /* На мобильных устройствах центрируем */ - } - - .reviews_item { - width: 100%; - /* На мобильных устройствах блоки на всю ширину */ - } - - .reviews_person { - position: static; - margin: 20px auto; - max-width: 150px; - } - - .reviews_item.reviews_item1 { - flex: 1 1 50%; - max-width: 100%; - } - - .reviews_item.reviews_item2, - .reviews_item.reviews_item4 { - flex: 1 1 calc(50% - 20px); - max-width: 100%; - } - - .reviews_item.reviews_item2 { - position: unset; - max-width: 500px; - height: 360px; - right: -4%; - bottom: 25%; - } - - .reviews .reviews_person { - position: absolute; - right: -100px; - top: -20%; - } - - .reviews_row { - justify-content: center !important; - display: contents; - } -} - - -.no-scroll { - overflow: hidden; -} -.img--mobile{ - display: none; -} -@media only screen and (max-width: 1170px) { - .about_block .about_cards { - grid-template-columns: 48.5% 48.5%; - gap: 30px 20px; - } - .about_cards .about_company{ - max-width: 380px; - } - - .sellers_slider .swiper { - padding-left: 0; - padding-right: 0; - } - .blog_slider .swiper { - padding-left: 30px; - padding-right: 30px; - } - - .truth_block .truth_block-title, - .truth .truth_title { - font-size: 60px; - line-height: 70px; - width: 100%; - } - .discount_top .discount_title { - font-size: 60px; - max-width: 550px; - line-height: 65px; - } - .discount_top .discount_top-imgs { - position: absolute; - top: 20px; - right: -50px; - } - .discount_top .discount_top-imgs .dicount_dog-img { - width: 400px; - } - - .reviews_block .reviews_items{ - margin-left: -30px; - } - -} -@media only screen and (min-width: 600px){ -.swiper-slide-active .sellers_card { - - transform: scale(1.05); /* Увеличение на 1.2 */ - transition: transform 0.3s ease; - background: #fff; -} -} -@media only screen and (max-width: 950px){ - .about_us .about_us-title, - .sellers_top .sellers_title, - .about_info .about_title, - .home_block .home_title { - font-size: 65px; - line-height: 78px; - } - .about .about_block { - gap: 0; - } - .about_block .about_info-wrap{ - gap: 30px; - } - .about_info .about_text { - font-size: 20px; - line-height: 24px; - } - - .about_info-wrap .about_img img { - width: 230px; - height: 560px; - } - - .blog_card .blog_card-info-wrap { - width: 108%; - } - .sellers_top .slider-arrows { - display: none; -} - .seller_block .sellers_top { - align-items: start; - flex-direction: column; - gap: 10px; - } - .sellers_card .sellers_card-img { - /* width: 100%; */ - } - .sellers_card .sellers_card-text{ - text-align: center; - } - .about_us-block .about_us-cards { - grid-template-columns: 48% 48%; - gap: 17px; - } - - .truth_block .truth_block-text p{ - max-width: 400px; - } - .truth_top .gift_img { - margin-left: -120px; - width: 400px; - } - - .reviews_block .reviews_items{ - flex-direction: column; - margin-left: 0; - gap: 0; - align-items: center; - } - .reviews .reviews_title{ - text-align: center; - } - .reviews .reviews_person{ - display: none; - } - .reviews_person-mob{ - display: flex; - order: 3; - object-fit: contain; - margin-top: -80px; - z-index: -2; - } - .reviews_items .reviews_item{ - border-radius: 25px; - padding: 10px 14px; - } - .reviews_items .reviews_item::after{ - border-radius: 25px; - } - .reviews_items .reviews_item1{ - order: 1; - } - .reviews_items .reviews_item2{ - order: 2; - transform: rotate(7deg); - padding: 13px; - margin-top: 10px; - z-index: -1; - margin-left: -4px; - } - .reviews_items .reviews_item6{ - order: 4; - transform: rotate(2deg); - margin-top: -80px; - } - .reviews_items .reviews_item3{ - order: 6; - transform: rotate(2.18deg); - margin-top: 5px; - z-index: -2; - } - .reviews_items .reviews_item4{ - order: 5; - transform: rotate(-1.7deg); - margin-top: 0px; - z-index: -1; - } - .reviews_items .reviews_item5{ - order: 7; - transform: rotate(-3.14deg); - margin-top: -3px; - z-index: -3; - } - - .reviews_item .reviews_item-top b { - font-size: 20px; - line-height: 22px; - } - .reviews_item .reviews_item-text { - font-size: 12px; - line-height: 14.4px; - max-width: 228px; - } -} - -@media only screen and (max-width: 776px){ - .home_dog - { - display: none; - } - .sellers_slider .swiper { - width: 568px; - } - .sellers_card .sellers_card-img { - height: 260px; - } - .slider-arrows { - display: none; - } - .home_block-dog{ - display: flex; - margin-top: 20px; - } - .home .container { - padding: 68px 30px 180px; - } - - .blog_block .blog_title, - .about_info .about_title{ - font-size: 44px; - line-height: 50px; - } - .about_info-wrap .about_img { - max-width: 200px; - } - .about_card .about_card-title { - font-size: 20px; - line-height: 24px; - } - .blog_block .blog_text, - .about_card .about_card-text { - font-size: 16px; - line-height: 18px; - } - .about_card .about_card-info { - gap: 2px; - } - .about_us-card .about_us-card-info h2 { - font-size: 12px; - line-height: 16px; - font-weight: 700; - } - .about_us-card .about_us-card-info span { - font-size: 12px; - line-height: 14px; - } - .about_us-block .about_us-card { - border-radius: 25px; - height: 181px; - } - .about_us-card .about_us-card-info{ - gap: 4px; - padding: 55px 20px 40px; - } - .about_us-cards .about_us-card .about_us-card-info { - height: 131px; - } - .about_us-card .card_date { - top: auto; - right: auto; - bottom: 16px; - left: 20px; - right: 0; - z-index: 2; - padding: 0; - border-radius: 0; - height: fit-content; - width: fit-content; - font-size: 12px; - line-height: 14.4px; - background: transparent; - font-weight: 700; - } - - /* start: QUIZ - max-width: 776px */ - .truth_content-end .truth_block .truth_info { - margin-top: 0px; - } - .truth .truth_top { - flex-direction: column-reverse; - } - .truth_top .gift_line-img{ - display: flex; - } - .truth .truth_title{ - max-width: 500px; - margin-left: auto; - } - .truth_top .gift_img { - transform: rotate(-45deg); - margin-right: auto; - margin-left: -50px; - } - .truth_block .truth_info { - position: relative; - width: 100%; - margin-top: 0; - align-items: center; - flex-direction: column-reverse; - } - .truth_content::after{ - border-radius: 25px; - } - .truth_block .truth_links { - flex-direction: column; - gap: 12px; - padding-bottom: 26px; - width: 100%; - } - .truth_block .truth_link { - width: 100%; - height: 50px; - align-items: center; - justify-content: start; - padding: 8px 20px; - } - - .truth .truth_block { - border-radius: 25px; - height: auto; - padding: 25px 15px 0px 15px; - } - .truth_content-end .truth_block .truth_info{ - flex-direction: column; - } - .truth_content-end .truth_block .truth_links{ - padding-top: 30px; - } - .truth_content-end .truth_block .truth_link{ - width: 100%; - } - .truth_content-end .truth_block .truth_block-text{ - flex-direction: column; - } - .truth_content-end .truth_block .truth_block-text p{ - max-width: 230px; - } - .truth_content-end .truth_xn{ - width: 90px; - height: 58px; - } - .truth_content-end .truth_info img { - width: auto !important; - height: 26vh !important; - object-fit: cover; - position: absolute; - bottom: -21vh; - left: -62px; - } - .truth_content-end .truth_block .truth_link { - width: 100%; - background: #FFF; - } - .truth_content-end .truth_block .truth_end-text{ - width: 100%; - } - - /* end: QUIZ - max-width: 776px */ - - /* start: Наш блог - max-width: 776px*/ - .blog_card .blog_card-title { - font-size: 20px; - line-height: 25.4px; - } - .blog_card .blog_card-text { - font-size: 16px; - line-height: 18.4px; - } - .blog_card .blog_card-info{ - gap: 9px; - } - .blog_slider .blog_card { - border-radius: 30px; - } - .blog_card .blog_card-info-wrap{ - width: 100%; - border-radius: 0; - padding: 12px 14px 16px 16px; - } - .blog_slider .blog_card:hover .blog_card-info-wrap{ - padding-right: 14px; - } - .blog_slider .blog_card:hover { - overflow: hidden; - } - .blog_card .card-line-img{ - display: none; - } - .blog_card .blog_card-img{ - border-radius: 30px 30px 0 0; - } - /* end: Наш блог - max-width: 776px */ - - /* start: Узнайте о нас больше и получите скидку! - max-width: 776px */ - .discount .discount_top{ - margin-bottom: 148px; - order: 1; - } - .discount_block .discount_text{ - order: 2; - margin-bottom: 20px; - } - .discount_block .discount_form{ - order: 3; - margin-bottom: 20px; - } - .discount_block .discount_form-text{ - order: 4; - margin-bottom: 0; - } - .discount_block .discount_cosmodog{ - order: 5; - } - .discount_top .discount_title { - font-size: 48px; - line-height: 52px; - } - .discount_top .discount_top-imgs { - right: -165px; - top: 100px; - } - .discount_top .discount_top-imgs img{ - width: 314px; - } - - .discount_block .discount_form{ - flex-direction: column; - gap: 8px; - width: 100%; - } - .discount_form .discount-line{ - display: none; - } - .discount_form .discount_form-btn, - .discount_form .discount_form-inp{ - width: 100%; - } - /* end: Узнайте о нас больше и получите скидку! - max-width: 776px */ - - .post-single-page .article-body-container{ - padding-bottom: 100px; - } -} - -/* GP | Mobile */ -@media only screen and (max-width: 576px) { - - /*Слайдер*/ - .about .container-fluid { - padding-right: 0; - padding-left: 0; - } - - /*Бестселлеры*/ - .sellers .sellers_card { - background: #fff; - } - .sellers_slider { - height: 530px; - } - .gp_tags { - border: 1px solid #121212; - border-radius: 48px; - padding:2px 4px 2px 4px; - font-size: 14px; - line-height: 18px; - height: 24px; - } - /* .tags_block { - width: 200px; - } */ - .sellers_slider .swiper { - display: flex; - align-items: stretch; - width: 320px; - height: inherit; - } - .seller_name { -font-size: 20px; -font-weight: 500; -line-height: 24px; -text-align: left; - } - .seller_price { - font-size: 20px; - font-weight: bold; - line-height: 30px; - text-align: left; - margin-bottom: 8px; - margin-top: 8px; - } - /* start: Scrollbar */ - body::-webkit-scrollbar { - width: .2rem; - /* background: #fff0; */ - background: linear-gradient(#0F5881, #76CE75, #ECF39F); - } - - body::-webkit-scrollbar-thumb { - border-radius: 4px; - background: rgba(128, 128, 128, 0.9); - } - /* end: Scrollbar */ - - /* start: ОБЩИЕ */ - .img--desktop { - display: none; - } - - .img--mobile { - display: block; - } - /* end: ОБЩИЕ */ - - .main_link { - font-size: 12px; - line-height: 14.4px; - width: 129px; - height: 29px; - padding: 7px; - } - - - .home .home_line2 { - display: flex; - } - - .home .home_line { - display: none; - } - - .home .home_block { - gap: 8px; - } - - .home_block .home_title { - font-size: 26px; - line-height: 34px; - width: 80vw; - } - - .about { - border-radius: 25px; - padding-bottom: 0; - } - - .about > .container { - width: 100%; - margin-right: auto; - margin-left: auto; - } - - .about .about_info-wrap{ - flex-direction: column; - } - - .about_info-wrap .about_img{ - max-width: unset; - width: 100vw; - } - .about_info-wrap .about_img img{ - height: auto; - width: 100%; - } - - .about_cards .about_card { - gap: 0; - } - - .about_cards .about_card-right { - align-items: end; - text-align: end; - } - - .about_card-right .about_card-text { - margin-left: auto; - } - - .about_card .about_card-gif1, - .about_card .about_card-gif4 { - width: 87px; - height: 87px; - } - - .about_card .about_card-gif2 { - width: 99px; - height: 99px; - } - - .about_card .about_card-gif3 { - width: 117px; - height: 102px; - } - - .about_company { - margin-top: 4vh; - } - - .about_company .about_company-logo img { - height: 33px; - } - - .about_company .about_company-logo img:nth-child(1), - .about_company .about_company-logo img:nth-child(3), - .about_company .about_company-logo img:nth-child(4) { - height: 33px; - } - - .about_company .about_company-logo { - display: flex; - gap: 0px 5px; - margin-top: 2%; - justify-content: space-around; - } - - .about_company .about_company-text { - font-size: 12px; - line-height: 14.4px; - } - - .about_cards .about_company { - padding: 15px 16px 18px 16px; - gap: 5px; - border-radius: 25px; - } - - .about_cards .about_company::after { - border-radius: 25px; - } - - .about_company .about_company-logo img { - width: auto; - } - - .about_block .about_cards { - grid-template-columns: 100%; - gap: 10px; - } - - .about_us-cards .about_us-card .about_us-card-info { - height: 151px; - } - - .truth_block .truth_block-text p, - .about_card .about_card-title { - font-size: 12px; - line-height: 18.2px; - } - - .discount_block .discount_text, - .blog_card .blog_card-text, - .blog_block .blog_text, - .truth_block .truth_link, - .sellers_card .sellers_card-text, - .about_card .about_card-text { - font-size: 12px; - line-height: 14.2px; - } - - .about_card .about_card-gif { - margin-bottom: -17px; - } - - .about_slider { - padding: 0; - } - - .about_slider .carousel { - height: 55vh; - min-height: 55vh; - } - - .about .about_block { - gap: 55px; - } - - .about_slider .slide { - padding: 10px 39px; - width: 280px; - height: 280px; - border-radius: 100%; - gap: 12px; - } - - .about_slider .carousel .carousel-item { - padding: 10px 39px; - width: 290px; - height: 290px; - border-radius: 100%; - } - - .about_slider .carousel .carousel-item::after { - background-image: url(../img/border-mobile.png); - border-radius: 100%; - } - - .about_slider .prev { - left: 10vw; - } - - .about_slider .next { - right: 10vw; - } - - .about_slider .slide.active { - transform: translate(0, -20px); - } - - .about_slider .slide img { - width: 113px; - height: 113px; - } - - .about_slider .slide_info { - gap: 6px; - } - - .about_slider .slide_text, - .about_slider .slide_title { - font-size: 12px; - line-height: 14.4px; - text-align: center; - } - - .about_us-block .about_us-card::after, - .about_us-card .about_us-card-img { - border-radius: 25px; - } - - .about_us-card .about_us-card-info { - border-radius: 0 0 25px 25px; - } - - .discount_top .discount_title, - .blog_block .blog_title, - .truth_block .truth_block-title, - .about_us .about_us-title, - .sellers_top .sellers_title { - font-size: 30px; - line-height: 36px; - } - - .sellers_card .sellers_card-img { - width: 100%; - height: 290px; - object-fit: contain; - } - - .sellers .sellers_card { - border-radius: 24px; - height: 520px; - padding:31px 16px 31px 16px; - } - .sellers .swiper-slide{ - max-height: 35vh; - } - - .section_wrap { - padding: 110px 0 52px; - } - - .sellers { - position: relative; - padding-bottom: 87px; - } - - .sellers .sellers_link { - position: absolute; - bottom: 24px; - right: 22px; - } - - .seller_block .sellers_top { - gap: 0; - margin-bottom: 15px; - } - - .reviews { - padding: 90px 0px 36px; - border-radius: 25px 25px 0 0; - } - - /* QUIZ */ - .truth { - border-radius: 0 0 25px 25px; - padding-bottom: 47px; - } - - .truth .truth_content .truth_block, - .truth .truth_content-end .truth_block - { - height: 70vh; - } - - .truth .truth_title { - font-size: 30px; - line-height: 36px; - max-width: 260px; - } - - .truth_top .gift_img { - margin-left: -24px; - width: 160px; - } - - .truth_top .gift_line-img { - bottom: 44px; - width: auto; - } - - .truth_block .truth_block-text img { - width: 29px; - } - - .truth_block .truth_block-title { - max-width: 171px; - margin-bottom: 7px; - } - - .truth_block .truth_line { - gap: 16px; - margin-bottom: 10px; - } - - .truth_block .truth_line span { - width: 34px; - } - - .truth_block .truth_link { - height: 29px; - border-width: 2px; - } - - .truth_content-end .truth_info img { - width: 100%; - } - - .truth_block .truth_info img { - height: 170px; - width: auto; - } - - .truth_links .truth_result { - display: none; - } - - .truth_block .truth_block-text { - gap: 11px; - } - - .truth .truth_block { - height: 470px; - } - - .truth_block .truth_links { - width: 100%; - margin-right: 0; - } - .truth_error .truth_block-text, - .truth_success .truth_block-text - { - margin-bottom: 25%; - } - - /* 381 string in adaptive */ - .truth_content-end .truth_info img { - /* width: auto !important; - object-fit: cover; - position: absolute; - left: -62px; */ - height: 30vh !important; - bottom: 0; - left: unset; - right: 0; - } - - /* QUIZ - конец */ - - - /* Наш блог */ - .blog { - position: relative; - padding-top: 63px; - padding-bottom: 90px; - } - - .blog .blog_link { - position: absolute; - bottom: 35px; - right: 30px; - } - - .blog_card .blog_card-img { - height: 120px; - object-fit: cover; - } - - .blog_card .blog_card-title { - font-size: 12px; - line-height: 16px; - } - - .blog_block .blog_text { - max-width: 230px; - } - - .blog_slider .swiper { - padding-left: 15px; - padding-right: 15px; - } - /* Наш блог - конец */ - - - /* Узнайте о нас больше и получите скидку! */ - .discount { - padding: 0px 0 43px; - } - - .discount_block .discount_text { - max-width: 260px; - } - - .discount_top .discount_top-imgs { - right: -136px; - top: 87px; - } - - .discount_top .discount_top-imgs .dicount_dog-img { - width: 314px; - width: 110vw; - } - - .discount_form .discount_form-inp { - height: 29px; - padding: 6px 13px; - font-size: 12px; - line-height: 14.4px; - } - - .discount_form .discount_form-inp::placeholder { - font-size: 12px; - line-height: 14.4px; - } - - .discount_form .discount_form-btn { - justify-content: start; - padding: 5px 15px; - background: var(--creme-white, #F4F1F0); - color: #62c57e; - opacity: 0.6; - } - .discount_form img{ - display: none; - } - .discount_form span{ - width: 100%; - } - - .discount_block .discount_cosmodog { - border-radius: 25px; - height: 415px; - } - - .discount_cosmodog .discount_cosmodog_info { - height: 245px; - gap: 14px; - padding: 10px 19px; - } - - .discount_cosmodog .discount_cosmodog-title { - text-align: start; - font-size: 26px; - line-height: 31.2px; - max-width: 202px; - margin-right: auto; - } - - .discount_cosmodog .discount_cosmodog-text { - font-size: 12px; - line-height: 14.4px; - max-width: 231px; - text-align: start; - margin-right: auto; - } - - .discount_top .discount_top-imgs { - right: -20%; - top: 0; - transform: scale(1.8); - z-index: 0; - margin-bottom: -91%; - margin-top: 20%; - position: relative; - } - - .discount_block .wpcf7 { - order: 3; - } - - /* Узнайте о нас больше и получите скидку! - конец */ - - /* start: Отзывы ветеринаров */ - .reviews .reviews_title { - font-size: 26px; - line-height: 31px; - max-width: 278px; - margin: 0 auto; - } - - .reviews .reviews_block { - margin-top: 20px; - } - - .reviews_block .reviews_items { - flex-wrap: unset; - gap: 10px; - } - - .reviews_items .reviews_item { - width: 80vw; - gap: 10px; - } - - .reviews_items .reviews_item2 { - margin-top: -0px; - } - - .reviews_items .reviews_item1 { - transform: rotate(-5.35deg); - } - - .reviews_items .reviews_item3 { - margin-top: 3px; - } - - .reviews_items .reviews_item4 { - margin: unset; - } - - .reviews_items .reviews_person-mob { - margin-bottom: -10%; - } - - .reviews_item .reviews_item-name { - display: flex; - flex-direction: column; - gap: 20px; - } - - .reviews_item .reviews_item-top b { - font-size: 12px; - line-height: 16px; - text-transform: uppercase; - } - - .reviews_item .reviews_item-top span { - max-width: 134px; - } - - /* end: Отзывы ветеринаров */ - - /* start: О НАС ПИШУТ СМИ*/ - .about_us-card .about_us-card-info span a { - font-size: 14px; - } - - .about_us-block .about_us-cards { - grid-template-columns: 1fr; - } - - .about_us-card .card_date { - right: 20px; - left: unset; - } - - .about_us-cards .about_us-card-info { - height: 130px; - } - - .about_us-card .about_us-card-info { - padding: 55px 20px 20px; - } - - .about_us-card-info.card-info--half-gradient { - background: linear-gradient(0deg, #F4F1F0 45%, rgba(244, 241, 240, 0) 100%); - } - - .truth_content-end .truth_block .truth_end-text, - .truth_content-end .truth_block .truth_block-text { - position: static; - } - - .truth_content-end .truth_block .truth_link { - border-width: 2px; - position: static; - bottom: 28px; - right: 0; - width: 100%; - margin-bottom: 76px; - z-index: 2; - } - - .truth_content-end .truth_info { - bottom: 0; - left: 0; - position: absolute; - } - - /* end: О НАС ПИШУТ СМИ */ - - /* start: Проверьте свои знания и получите подарок! */ - .truth_top .gift_img { - width: 64vw; - margin: unset; - transform: translateX(-22%) rotate(-45deg); - } - - .truth_top .gift_line-img { - top: 40%; - } - - .truth .truth_block { - padding: 25px; - } - - .truth_block .truth_line { - gap: 10%; - } - - .truth_block .truth_block-text { - min-height: 20%; - } - - .truth_points { - font-size: 30px; - } - - /* end: О НАС ПИШУТ СМИ */ - - - /* start: Наш блог */ - .blog_slider .blog_card { - height: 290px; - } - - .blog_card .blog_card-img { - border-color: #121212; - } - - .blog_card .blog_card-info-wrap { - border-radius: 0 0 30px 30px; - border-color: #121212; - } - - .blog_slider .blog_card:hover .blog_card-info-wrap{ - border-radius: 0 0 30px 30px; - width: 100%; - } - /* end: Наш блог */ - - - - /* start: Футер */ - .footer_form .footer_form-title h2, - .footer_box .footer_box-title { - font-size: 12px; - line-height: 16.2px; - font-weight: 700; - } - - .footer_box .footer_box-link { - font-size: 12px; - line-height: 16.2px; - } - - .footer_form .footer_form-textarea textarea, - .footer_form .footer_form-inp input { - height: 28px; - border: 1px solid var(--grey-black, #121212); - padding: 5px 18px; - font-size: 12px; - line-height: 14.4px; - opacity: .5; - } - - .footer_form .footer_block .footer_bottom a, - .footer_form .footer_form-inp input::placeholder { - font-size: 12px; - line-height: 14.4px; - } - - .footer_form .footer_form-textarea textarea { - height: 123px; - min-height: unset; - padding: 7px 18px; - border-radius: 17px !important; - } - - .footer_form .footer_form-textarea { - display: flex; - flex-direction: column; - gap: 13px; - } - - .footer_form-textarea .footer_form-btn { - position: static; - width: 100%; - min-height: unset; - } - - .footer_block .footer_social { - gap: 14px; - } - - .footer_block .footer_bottom a:nth-child(2) { - display: none; - } - - .footer_form .footer_form-inp { - flex-direction: column; - } - - .footer .footer_box{ - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(2, 1fr); - row-gap: 14px; - column-gap: 0; - } - .footer .footer_box .footer_line-mob - { - grid-area: 1 / 2 / 3 / 3; - height: 100%; - padding-top: 4px; - } - .footer .footer_box .footer_line-mob1{ - margin-left: -30%; - } - .footer .footer_box .footer_box-title{ - grid-area: 1 / 1 / 1 / 1; - } - .footer .footer_box .footer_box-link{ - grid-area: 2 / 1 / 2 / 1; - } - .footer_box .footer_line-mob{ - display: block; - } - .footer_block .footer_bottom a{ - font-size: 12px; - line-height: 18px; - } - /* end: Футер */ -} - -@media only screen and (max-width: 350px) { - .reviews_block .reviews_items { - margin-left: -20px; - } + + +/* .sellers_card .sellers_card-img { + width: auto!important; + height: 330px; +} */ + + +/* Home start */ +.home{ + position: relative; + /* GP | fix */ + background: var(--radial); +} +.home .container{ + padding: 157px 30px 245px; + position: relative; +} +@media (min-width: 1281px){ + .home .container{ + + max-width: 1350px !important; + } + +} + +@media (min-width: 1600px){ + .home .container{ + + max-width: 1440px !important; + } + +} +.home .home_dog{ + position: absolute; + bottom: 200px; + right: 8px; + opacity: .5; + z-index: 0; +} +.home_block-dog{ + width: 100%; + display: none; + margin: 0 auto; + opacity: .5; +} +.home .home_line2, +.home .home_line{ + position: absolute; + top: 70px; + left: 0; + width: 100%; + z-index: 1; + scale: 1.01; +} +.home .home_line2{ + display: none; + /* top: 37px; + left: -24px; */ + left: -2%; + top: 7%; + width: 108%; + z-index: 0; +} +.home .home_block{ + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + gap: 32px; +} +.home_block .home_title{ + font-size: 82px; + line-height: 98.4px; + color: var(--creme-white, #F4F1F0); + text-transform: uppercase; +} +/* Home end */ + +/* Abour start */ +.about{ + box-shadow: 6px 9px 20px 0px #00000026; + background: var(--creme-white, #F4F1F0); + border-radius: 60px; + position: relative; + z-index: 2; + margin-top: -114px; + padding: 46px 0px 97px; +} +.about .about_block{ + display: flex; + flex-direction: column; + gap: 0; +} +.about .about_info-wrap{ + display: flex; + align-items: center; + gap: 70px; +} +.about_block .about_info{ + display: flex; + flex-direction: column; + gap: 25px; +} +.about_info-wrap .about_img{ + width: 40%; +} +.about_img .entoprotein-img{ + display: none; +} +.about_info-wrap .about_img img{ + width: 100%; + height: 720px; +} + +.about_info .about_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + color: var(--grey-black, #121212); + text-transform: uppercase; +} +.about_info .about_text{ + font-size: 24px; + line-height: 28.8px; + letter-spacing: -0.01em; + color: var(--grey-black, #121212); +} + + +.about_block .about_cards{ + display: grid; + grid-template-columns: 31.5% 31.5% 31.5%; + gap: 58px 26px; +} +.about_cards .about_card{ + display: flex; + flex-direction: column; + gap: 24px; +} +.about_card .about_card-gif{ + width: 168px; + height: 168px; +} + +.about_card .about_card-info{ + display: flex; + flex-direction: column; + gap: 20px; +} +.about_card .about_card-title{ + font-size: 24px; + font-weight: 700; + line-height: 28.8px; + color: var(--grey-black, #121212); + text-transform: uppercase; +} +.about_card .about_card-text{ + font-size: 20px; + line-height: 24px; + color: var(--grey-black, #121212); + max-width: 278px; +} +.about_cards .about_company{ + position: relative; + padding: 25px 12px 30px 30px; + background: #F4F1F0; + border-radius: 60px; + display: flex; + flex-direction: column; + gap: 16px; +} +.about_cards .about_company::after{ + content: ''; + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: -1; +} +.about_company .about_company-text{ + font-size: 20px; + line-height: 24px; + font-weight: 500; + color: var(--grey-black, #121212); +} +.about_company .about_company-logo{ + display: grid; + grid-template-columns: 29% 65%; + gap: 20px 10px; +} +.about_company .about_company-logo img{ + width: 100%; +} +.about_company .about_company-logo img:nth-child(4){ + height: 80px; +} + + +.about_slider{ + padding-top: 110px; +} +.about_slider .slider-container { + position: relative; + /* max-width: 636px; */ + height: 300px; + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; +} + +.about_slider .slide { + position: relative; + background: #FFF; + border-radius: 60px; + /* width: 429px; + height: 546px; */ + display: flex; + flex-direction: column; + align-items: center; + gap: 45px; + padding: 35px 50px 25px 50px; + opacity: 1; + z-index: 1; +} +.about_slider .carousel .carousel-item{ + width: 429px; + height: 546px; + padding: 35px 50px 25px 50px; + padding: 50px 53px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + /* background: var(--creme-white, #F4F1F0); */ + background: #ffffff30; + backdrop-filter: blur(6px); + z-index: 1; + box-shadow: -2px 5px 22.9px 0px rgba(0, 0, 0, 0.25); +} + +.about_slider .carousel .carousel-item.active { + backdrop-filter: blur(6px); + z-index: 3; +} +.about_slider .carousel .carousel-item::after { + content: ''; + background-image: url(../img/border.png); + background-size: cover; + /* background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); */ + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: -2; + transform: translateZ(-1px); +} +.about_slider .carousel .carousel-item img{ + width: auto; +} + +.about_slider .slide_info{ + display: flex; + flex-direction: column; + gap: 15px; +} +.about_slider .slide--prev, +.about_slider .slide--next{ + z-index: 2; + opacity: 0.75; +} + +.about_slider .prev, .about_slider .next { + position: absolute; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + z-index: 99; + background-color: unset; +} + +.about_slider .prev { + left: 29vw; +} + +.about_slider .next { + right: 29vw; +} + +.about_slider .slide_title{ + text-transform: uppercase; + font-size: 24px; + font-weight: 700; + line-height: 28.8px; + color: var(--grey-black, #121212); +} +.about_slider .slide_text{ + font-size: 20px; + font-weight: 500; + line-height: 24px; + color: var(--grey-black, #121212); +} +/* About end */ + +.section_wrap{ + margin-top: -70px; + padding: 178px 0 90px; + /* GP | fix */ + +} +/* Sellers start */ +.sellers{ + padding-bottom: 113px; + +} +.sellers .seller_block{ + display: flex; + flex-direction: column; +} +.seller_block .sellers_top{ + display: flex; + align-items: center; + justify-content: space-between; + gap: 30px; + margin-bottom: 34px; +} +.sellers_top .sellers_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + color: var(--creme-white, #F4F1F0); + text-transform: uppercase; +} + +.sellers_slider .swiper{ + /* padding-left: 10%; + padding-right: 20px; */ + display: flex; + align-items: center; + /* width: 1000px; */ + height: 540px; + margin: auto; + overflow: hidden; +} +.seller_name { + text-transform:lowercase; + color:var(--grey-black, #121212); + font-size: 20px; + font-weight: 400; + line-height: 24px; + text-align: left; + /* min-width: 280px; */ +} +.seller_price { +font-size: 20px; +font-weight: bold; +line-height: 30px; +text-align: left; +margin-bottom: 8px; +margin-top: 8px; +} + +.seller_full { + display: flex; + flex-direction: row; + justify-content: start; + margin-top: 48px; +} +.seller_full-link { +color:#121212; +font-size: 20px; +font-weight: bold; +line-height: 24px; +text-align: left; +text-decoration: none; +padding: 0px 0px 4px 0px; +gap: 8px; +border-bottom: 2px solid var(--interface-main_black, rgba(18, 18, 18, 1)) +} +.swiper .swiper-wrapper{ + display: flex; + height: unset; +} +.sellers .sellers_card{ + min-height: 490px; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 11px; + align-items: center; + padding: 16px; + /* border: 2px solid var(--creme-white, #F4F1F0); */ + border-radius: 24px; + background: rgba(255, 255, 255, 0.5); +} + +.sellers_card .sellers_card-text{ + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--grey-black, #121212); + +} +/* Sellers end */ + + +/* Reviews start */ +.reviews{ + position: relative; + padding: 112px 0px 56px; + background: var(--creme-white, #F4F1F0); + border-radius: 60px 60px 0 0; +} +.reviews .reviews_person{ + position: absolute; + right: -80px; + top: 0; +} +.reviews_person-mob{ + display: none; +} +.reviews .reviews_title{ + color: var(--grey-black, #121212); + font-family: "Craftwork Grotest"; + font-size: 79px; + font-style: normal; + font-weight: 700; + line-height: normal; + text-transform: uppercase; + position: relative; + z-index: 1; +} +.reviews .reviews_block{ + margin-top: 35px; +} +.reviews_block .reviews_items{ + position: relative; + z-index: 1; + display: flex; + flex-wrap: wrap; + gap: 23px; + align-items: center; +} + +.reviews_items .reviews_item{ + position: relative; + display: flex; + flex-direction: column; + gap: 7px; + background: #F4F1F0; + padding: 23px; + border-radius: 60px; + width: 100%; + height: fit-content; + z-index: 1; +} +/* Пустой блок, чтоб на десктопе в первой строке справой стороны не загораживать картинку */ +.reviews_items .reviews_item.reviews_item--empty{ + background: none; +} +@media screen and (max-width: 480px) { + .reviews_items .reviews_item.reviews_item--empty { + display: none; + } +} + +.reviews_item .reviews_item-top{ + display: flex; + align-items: center; + gap: 8px; +} +.reviews_item .reviews_item-top img{ + width: 78px; +} +.reviews_item .reviews_item-top b{ + text-transform: uppercase; + display: block; + font-size: 24px; + font-weight: 700; + line-height: 28.8px; + color: var(--grey-black, #121212); +} +.reviews_item .reviews_item-top span{ + margin: 14px 0; + width: 100%; + display: block; + font-size: 12px; + font-weight: 500; + line-height: 14.4px; + color: var(--grey-black, #121212); +} +.reviews_item .reviews_item-text{ + font-size: 20px; + font-weight: 500; + line-height: 24px; + color: var(--grey-black, #121212); +} +.reviews_items .reviews_item1, +.reviews_items .reviews_item6{ + position: relative; + /* transform: rotate(-2.35deg); */ + transform-style: preserve-3d; +} +/* GP | fix */ +.reviews_items .reviews_item1::after, +.reviews_items .reviews_item6::after{ + content: ''; + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: -1; + transform: translateZ(-1px); +} + +.reviews_items .reviews_item6{ + transform: rotate(-7deg); +} + +.reviews_items .reviews_item3{ + transform: rotate(-5deg); +} +.reviews_items .reviews_item5, +.reviews_items .reviews_item4{ + background: radial-gradient(1073.72% 191.15% at -371.63% -32.65%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%); + /* transform: rotate(4deg); + margin-top: 25px; */ +} + +.reviews_items .reviews_item2{ + background: var(--grey-black, #121212); + /* transform: rotate(5deg); + margin: 30px 0 0 20px; */ +} +.reviews_items .reviews_item4{ + /* transform: rotate(8deg); + margin: -30px 0 0 20%; */ +} + +.reviews_item2 .reviews_item-top b, +.reviews_item2 .reviews_item-top span, +.reviews_item2 .reviews_item-text, +.reviews_item3 .reviews_item-top b, +.reviews_item3 .reviews_item-top span, +.reviews_item3 .reviews_item-text, +.reviews_item4 .reviews_item-top b, +.reviews_item4 .reviews_item-top span, +.reviews_item4 .reviews_item-text, +.reviews_item5 .reviews_item-top b, +.reviews_item5 .reviews_item-top span, +.reviews_item5 .reviews_item-text{ + color: #F4F1F0; +} +.reviews_item2 .reviews_item-text, +.reviews_item3 .reviews_item-text, +.reviews_item4 .reviews_item-text, +.reviews_item5 .reviews_item-text{ + font-weight: 400; +} + + +/* Reviews end */ + +/* About us start */ +.about_us{ + padding-bottom: 54px; + background-color: #F4F1F0; + margin-top: -1px; +} +.about_us .about_us-title{ + font-size: 82px; + line-height: 98.4px; + text-transform: uppercase; + color: var(--grey-black, #121212); +} +.about_us .about_us-block{ + display: flex; + flex-direction: column; + gap: 15px; + margin-top: 25px; +} +.about_us-block .about_us-cards{ + display: grid; + align-items: start; + grid-template-columns: 59% 39.2%; + gap: 15px; +} +.about_us-block .about_us-card{ + position: relative; + border-radius: 60px; + overflow: hidden; + height: 324px; + width: 100%; + overflow: unset; +} +.about_us-block .about_us-card::after{ + content: ''; + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: 0; +} +.about_us-card .about_us-card-img{ + border-radius: 60px; + height: 100%; + width: 100%; + object-fit: cover; + position: relative; + z-index: 1; +} +.about_us-card .card_date{ + z-index: 1; + position: absolute; + top: 27px; + right: 35px; + background: #FFFFFF; + border-radius: 62px; + padding: 5px 15px 4px 17px; + font-size: 24px; + font-weight: 400; + line-height: 28.8px; + color: var(--grey-black, #121212); +} +/* GP | fix */ + + +.about_us-card .about_us-card-info { + position: absolute; + padding: 10% 33px 21px ; + width: 100%; + z-index: 1; + display: flex; + flex-direction: column; + gap: 14px; + left: 0px; + bottom: 0; + border-radius: 0 0 60px 60px; + background: linear-gradient(0deg, #F4F1F0 45%, rgba(244, 241, 240, 0) 100%); +} + +.about_us-card-info.card-info--half-gradient { + background: unset; +} + +.about_us-card .about_us-card-info h2{ + /* max-width: 440px; */ + font-size: 24px; + line-height: 32px; + text-transform: uppercase; + color: var(--grey-black, #121212); +} +.about_us-card .about_us-card-info span{ + display: block; + font-weight: 400; + +} +.about_us-card .about_us-card-info span a{ + text-decoration: underline; + font-size: 24px; + line-height: 28.8px; + color: var(--grey-black, #121212); +} +/* About us end */ + +/* Truth start */ +.truth{ + border-radius: 0 0 60px 60px; + background: var(--creme-white, #F4F1F0); + padding-bottom: 119px; + margin-top: -1px; +} +.truth .truth_top{ + position: relative; + display: flex; + align-items: center; + justify-content: space-between; +} +.truth .truth_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + text-align: end; + text-transform: uppercase; + width: 723px; +} +.truth .truth_title span{ + color: #76CE75; + +} +.truth_top .gift_img{ + margin-left: -180px; +} +.truth_top .gift_line-img{ + position: absolute; + display: none; + bottom: 150px; + right: 0; + width: 245px; +} +.truth_content { + position: relative; + display: none; +} + +.truth_content::after{ + content: ''; + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: 0; +} +.truth_content.active { + display: block; +} +.truth .truth_block{ + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + width: 100%; + height: 480px; + overflow: hidden; + background: var(--creme-white, #F4F1F0); + border-radius: 60px; + box-shadow: 0px 3px 13.5px 0px #00000040; + padding: 25px 34px 0px 63px; +} +.truth .truth_success, +.truth .truth_error { + display: none; +} +.truth .truth_success.show, +.truth .truth_error.show { + display: flex; +} + +.truth_block .truth_line{ + display: flex; + align-items: center; + justify-content: center; + gap: 24px; + margin-bottom: 24px; +} +.truth_block .truth_line span{ + border: 1px solid var(--grey-black, #121212); + opacity: .6; + width: 73px; + border-radius: 10px; +} +.truth_block .truth_line span.active{ + opacity: 1; +} +.truth_block .truth_block-title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + color: var(--grey-black, #121212); + margin-bottom: 33px; + text-transform: uppercase; +} +.truth_content-end .truth_block-title, +.truth_success .truth_block-title{ + background: -webkit-radial-gradient(#0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.truth_error .truth_block-title{ + background: -webkit-radial-gradient(#F21E6A 0%, #FF6543 112.38%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.truth_block .truth_block-text{ + position: relative; + z-index: 1; + display: flex; + align-items: start; + gap: 26px; +} +.truth_block .truth_end-text{ + display: flex; + flex-direction: column; + gap: 21px; +} +.truth_block .truth_block-text p{ + font-size: 24px; + font-weight: 700; + line-height: 28.8px; + max-width: 559px; +} +.truth_block .truth_block-text p span{ + font-weight: 500; +} +.truth_default .truth_block-text p{ + text-transform: uppercase; +} +.truth_error .truth_block-text p, +.truth_success .truth_block-text p { + max-width: 592px; + font-size: 20px; + line-height: 24px; + font-weight: 500; +} +.truth_block .truth_info{ + position: absolute; + width: 91%; + bottom: 0; + display: flex; + align-items: end; + justify-content: space-between; + margin-top: -100px; + z-index: 0; +} +.truth_content-end .truth_info{ + display: flex; + align-items: center; + justify-content: end; +} +.truth_block .truth_links{ + display: flex; + align-items: center; + gap: 15px; + padding-bottom: 56px; +} +.truth_error .truth_links, +.truth_success .truth_links{ + gap: 20px; +} +.truth_block .truth_result{ + display: flex; + align-items: center; + gap: 23px; +} +.truth_block .truth_result img{ + width: 100%; +} +.truth_block .truth_link{ + width: 141px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + text-align: center; + color: var(--grey-black, #121212); + border: 2px solid var(--grey-black, #121212); + border-radius: 48px; +} + +.truth_content-end .truth_info img{ + margin-right: -34px; +} +.truth_content-end .truth_block .truth_link{ + width: 221px; +} + +.truth_content-end .truth_xn{ + position: relative; + width: 270px; + height: 158px; + background-image: url(../img/xn-border.svg); + background-repeat: no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.truth_points { + font-size: 450%; + font-weight: 700; +} + +/* Truth end */ + + +/* Blog start */ +.blog{ + padding-top: 89px; +} +.blog .blog_block{ + display: flex; + flex-direction: column; + gap: 15px; +} +.blog_block .blog_top{ + display: flex; + align-items: center; + justify-content: space-between; + gap: 30px; +} +.blog_block .blog_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + color: var(--creme-white, #F4F1F0); + text-transform: uppercase; +} +.blog_block .blog_text{ + font-size: 24px; + line-height: 28.8px; + color: var(--creme-white, #F4F1F0); +} +.blog .blog_slider{ + margin-top: 30px; +} +.blog_slider .swiper{ + padding-left: 9%; + padding-right: 20px; +} +.blog_slider .blog_card { + display: flex; + flex-direction: column; + border-radius: 60px; + transition: .3s ease all; + height: auto; +} +.blog_slider .blog_card:hover{ + border-color: #121212; + overflow: initial; +} + +/* .blog_slider .blog_card:hover .card-line-img{ + opacity: 1; +} */ + +.blog_slider .blog_card:hover .blog_card-text, +.blog_slider .blog_card:hover .blog_card-title{ + color: #F4F1F0; +} + +.blog_card .blog_card-img{ + object-fit: cover; + border: 2px solid var(--creme-white, #F4F1F0); + border-width: 2px 2px 0 2px; + width: 100%; + height: 40%; + border-radius: 60px 60px 0 0; +} +.blog_card .card-line-img{ + opacity: 0; + transition: .3s ease all; +} +.blog_card .blog_card-info-wrap{ + border: 2px solid var(--creme-white, #F4F1F0); + width: 100%; + height: 60%; + display: flex; + background: linear-gradient(355.81deg, #F4F1F0 5.04%, rgba(244, 241, 240, 0.3) 87.4%); + border-radius: 0 0 60px 60px; + padding: 25px 25px 30px 30px; +} +.blog_slider .blog_card:hover .blog_card-info-wrap{ + background: var(--grey-black, #121212); + /* padding-right: 15px; */ +} +.blog_card .blog_card-info{ + display: flex; + flex-direction: column; + margin-top: -2px; + gap: 16px; + +} +.blog_card .blog_card-title{ + /* font-size: 36px; */ + font-size: 2.1vw; + font-weight: 700; + line-height: 43.2px; + color: var(--grey-black, #121212); + text-transform: uppercase; + transition: .3s ease all; +} +.blog_card .blog_card-text{ + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--grey-black, #121212); + transition: .3s ease all; +} +/* Blog end */ + +.marketplace{ + margin-top: 5rem; +} +/* Discount start */ +.discount{ + padding-top: 50px; + padding-bottom: 50px; +} +.discount .discount_block{ + display: flex; + flex-direction: column; +} +.discount .discount_top{ + position: relative; + margin-bottom: 50px; +} +.discount_top .discount_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + color: var(--creme-white, #F4F1F0); + text-transform: uppercase; +} +.discount_top .discount_top-imgs{ + position: absolute; + top: 55px; + right: -80px; +} +.discount_block .discount_form{ + position: relative; + z-index: 1; + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 6px; +} +.discount_form .discount_form-btn { + background: inherit; + min-height: unset; +} +.discount_form .discount_form-btn:hover{ + background: #121212; + border-color: #121212; + color: #3ab18f; +} +.discount_form .discount_form-inp{ + width: 280px; + height: 50px; + border: 2px solid var(--creme-white, #F4F1F0); + padding: 10px 18px; + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--creme-white, #F4F1F0); + border-radius: 28px; + opacity: .6; +} +.discount_form .discount_form-inp::placeholder{ + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--creme-white, #F4F1F0); +} +.discount_form .discount_form-btn { + text-transform: lowercase; +} +.discount_block .discount_form-text{ + font-size: 14px; + line-height: 16.8px; + color: var(--creme-white, #F4F1F0); + opacity: .6; + max-width: 778px; + margin-bottom: 27px; +} +.discount_block .discount_text{ + font-size: 20px; + line-height: 24px; + color: var(--creme-white, #F4F1F0); +} + +.discount_block .discount_cosmodog{ + position: relative; + width: 100%; + height: 626px; + border-radius: 60px; + border: 2px solid var(--creme-white, #F4F1F0); + display: flex; + align-items: end; + justify-content: center; + overflow: hidden; + cursor: pointer; +} +.discount_cosmodog .discount_cosmodog-img{ + + width: 100%; + height: 100%; + object-fit: cover; + +} + +.discount_cosmodog__slider{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.discount_cosmodog .discount_cosmodog-img.active{ + opacity: 1; +} +.discount_cosmodog:hover .discount_cosmodog-img:nth-child(2) { + opacity: 1; +} +.discount_cosmodog .discount_cosmodog_info{ + position: relative; + z-index: 1; + padding: 33px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: end; + background: linear-gradient(0deg, #F4F1F0 56%, rgba(244, 241, 240, 0) 100%); + width: 100%; + height: 219px; +} +.discount_cosmodog .discount_cosmodog-title{ + font-size: 40px; + font-weight: 700; + line-height: 48px; + text-align: center; + color: var(--grey-black, #121212); + text-transform: uppercase; +} +.discount_cosmodog .discount_cosmodog-text{ + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + text-align: center; +} + +/* Discount end */ + +.gp_tags { + border: 1px solid #121212; + border-radius: 48px; + padding:3px 6px 3px 6px; + margin-right: 6px; + margin-bottom: 6px; + font-size: 16px; + line-height: 16px; + height: 27px; + text-transform: lowercase; +} +.gp_tags:last-child { + margin-right: 0; +} +.tags_block { + display: flex; + flex-direction: row; + justify-content:start; + flex-wrap: wrap; + width: 100%; +} + +.seller_buy { + text-transform: capitalize; + width: 100%; + height: 48px; + padding: 12px 24px 12px 24px; + gap: 8px; + border-radius: 20px; + color:#fff; + background: var(--interface-main_black, #121212); +} +.seller_link { + width: 100%; +} +.truth-form{ + display: flex; + gap: 10px; +} +.truth-form button{ + flex-shrink: 0; +} +input.truth-input{ + width: 200px; + height: 50px; + border-color: #121212 !important; + border-radius: 48px; + border: 2px solid #121212; + flex-shrink: 1; + margin-right: 12px; + padding: 20px; + font-size: 18px; +} +@media (max-width: 776px) { + .truth-form{ + flex-direction: column; + margin-bottom: 30px; +} +.truth-form button{ + width: 100%; + text-align: center; + justify-content: center; +} +input.truth-input{ + width: 100%; +} +} + +.smi-card-wrapper{ + border-radius: 60px; + background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); + border-radius: 60px; + padding: 2px; + width: 100%; + height: 484px; +} +.smiSlider{ + margin-top: 3rem; +} +.smi-card{ + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 100%; + height: 480px; + border-radius: 60px; + position: relative; + overflow: hidden; + padding: 28px 35px; + color: #121212; + +} +.smi-card::before{ + background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%); +content: ''; +height: 100%; +width: 100%; +position: absolute; +bottom: 0; +left: 0; +z-index: 2; +} +.smi-card-img{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} +.smi-card-date, .smi-card-title, .smi-card-label{ + position: relative; + z-index: 2; +} +.smi-card-label{ + display: flex; + border: 1px solid #121212; + border-radius: 28px; + padding: 4px 15px; + align-items: center; + font-weight: 500; + font-size: 16px; + gap: 6px; + background-color: #fff; + width: max-content; +} +.smi-card-label p{ + margin-bottom: 0; +} +.smi-card-title{ + font-weight: 700; +font-size: 22px; +text-transform: uppercase; line-height: 120%; +margin-bottom: 7px; +margin-top: 10px; +} +.smi-card-date{ + font-weight: 500; +font-size: 12px; +} +.smiSlider.swiper{ + overflow: visible; + } + .about_us{ + width: 100%; + overflow: hidden; + } + .smi-card-label img{ + max-height: 25px; + width: auto; + } + .smi-card-label{ + height: 35px; + } +@media (max-width: 640px) { + .smi-card{ + padding: 16px; + height: 420px; + border-radius: 30px; + } + .smi-card-title{ + font-size: 18px; + } + .smi-card-wrapper{ + height: 424px; + border-radius: 30px; + } + +} + +.slider-arrows{ + position: relative; + /* top: 50%; + left: 50%; + transform: translate(-52.5%, -50%); + width: 78%; */ + display: flex; + justify-content: space-between; + z-index: 40; + pointer-events: none; +} +@media (max-width: 640px) { + .slider-arrows{ + display: none; + } + .sellers_slider .swiper{ +width: 330px; + } +} +.blogSlider .slider-arrows{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-55%, -50%); + width: 76.5%; + display: flex; + justify-content: space-between; + z-index: 40; + pointer-events: none; +} +.smiSlider .slider-arrows { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-47%, -50%); + width: 112%; + display: flex; + justify-content: space-between; + z-index: 40; + pointer-events: none; + +} +.slider-arrow{ + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='0.5' y='0.5' width='55' height='55' rx='19.5' fill='white'/%3e%3crect x='0.5' y='0.5' width='55' height='55' rx='19.5' stroke='%23121212'/%3e%3cpath d='M37 28.3633H20.5' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M37 28.3633L30.636 34.7272' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M37 28.3633L30.636 21.9993' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e "); + height: 56px; + width: 56px; + background-size: contain; + pointer-events: all; + +} +.slider-arrow[disabled]{ + visibility: none; +} +.slider-arrow-prev{ + transform: scaleX(-1); + margin-right: 24px; +} + +.header-lang{ + font-size: 16px; + font-weight: 500; + line-height: normal; + text-transform: uppercase; + color: var(--creme-white); + border-radius: 45px; + border: 1px solid var(--creme-white); + opacity: 0.6; + appearance: none; + background-color: transparent; + background-image: url(../img/i-arr_down.svg); + background-position: center right 10px; + background-repeat: no-repeat; + background-size: 16px; + padding: 11px 36px 11px 23px; + cursor: pointer; + outline: none; + position: relative; + z-index: 10; + } + + .header-lang ul{ + border: 1px solid #f3f1f0; + border-radius: 20px; + width: 100%; + padding-top: 11px; + padding-bottom: 11px; + padding-left: 23px; + padding-right: 23px; + background: #57da7d; + text-align: center; + opacity: 1; + left: 0; + bottom: -30px; + transform: translateY(100%); + + position: absolute; + display: none; + } + + .header-lang ul li a{ + font-weight: 500; + font-size: 16px; + text-transform: uppercase; + color: var(--creme-white); + } + + .category-back{ + width: 124px; + color: #121212; +height: 28px;border: 1px solid #121212; +border-radius: 65px; +background-color: transparent; +font-weight: 500; +font-size: 16px; +display: flex; +align-items:center; +justify-content: center; +margin-bottom:1.5rem; +margin-top: 14px; +} +.category-back::before{ + background-image: url("data:image/svg+xml,%3Csvg width='10' height='15' viewBox='0 0 10 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L2 7.5L9 14' stroke='%23121212' stroke-width='2' /%3E%3C/svg%3E"); + content: ''; + width: 10px; + height: 15px; + flex-shrink: 0; + margin-right: 8px; +} +.category-back:hover{ + color: #121212; +} + +.main-page-wrapper{ + margin-top: 0 !important; +} + +.header_icon{ + flex-shrink: 0; +} + +[class*="wd-section-stretch"] { + position: relative; + min-width: 100vw !important; + width: 100vw; + left: calc(50% - 50vw)!important; +} + +.btn{ + padding: 0 30px; +} + +.header_icon{ + position: relative; +} + +.basket-btn__counter{ + position: absolute; + top: 0; + right: 0; + border-radius: 100%; +background: #76ce75; +height: 17px; +width: 17px; +font-weight: 700; +font-size: 10px; +text-align: center; +color: var(--creme-white); +display: flex; +align-items: center; +justify-content: center; +} + + +@media (max-width: 575px) { + .wpcf7-form-control-wrap{ + width: 100%; + } +} + +.seller_bt{ + display: flex; + align-items: center; + gap: 12px; +} + +/* discount sale */ + +.discount__sale { + padding: 69px 0 80px; + border-radius: 60px; + background: var(--creme-white, #F4F1F0); + box-shadow: 6px 9px 20px 0px rgba(0, 0, 0, 0.15); +} + +.discount__sale .discount_title { + color: var(--interface-main_black, #121212); + font-family: "Craftwork Grotest"; + font-size: 82px; + font-style: normal; + font-weight: 700; + line-height: normal; + text-transform: uppercase; +} + +.discount__sale .discount_title span { + background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #76CE75 90%, #BBE38D 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.discount__sale .discount_form { + display: flex; +} + +.discount__sale .discount_form .discount_form-inp { + color: var(--interface-main_black, #121212); + border: 2px solid var(--interface-main_black, #121212); +} + +.discount__sale .discount_form .discount_form-btn { + color: var(--interface-main_black, #121212); + border: 2px solid var(--interface-main_black, #121212); +} + +.discount__sale .discount_form .discount_form-btn:hover { + color: #FFF; +} + +.discount__sale .discount_form-text { + color: var(--interface-main_black, #121212); + font-family: "Craftwork Grotest"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; + opacity: .6; + max-width: 750px; + margin-top: 6px; +} + +.discount__sale .discount_text { + margin-top: 27px; + color: var(--interface-main_black, #121212); + font-family: "Craftwork Grotest"; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.discount__sale .discount_form .discount_form-inp::placeholder { + color: var(--interface-main_black, #121212); +} + +@media screen and (max-width: 576px) { + .discount__sale { + padding: 37px 0; + } + + .dicsount__body { + display: flex; + flex-direction: column; + margin-top: 26%; + } + + .discount__sale .discount_form { + flex-direction: column; + gap: 21px; + } + + .discount__sale .discount_top .discount_top-imgs .dicount_dog-img { + height: 356.534px; + width: 100%; + object-fit: contain; + object-position: right; + } + + .discount__sale .dicsount__body > { + order: 2; + } + + .discount__sale .discount_text { + order: 1; + margin-top: 0; + font-size: 18px; + } + + .discount__sale .discount_form-text { + order: 3; + font-size: 12px; + margin-top: 20px; + } + + .discount__sale .wpcf7 { + order: 2; + margin-top: 30px; + } + + .discount__sale .discount_form .discount_form-btn, + .discount__sale .discount_form .discount_form-inp { + text-align: center; + padding: 10px 10px 11px 10px; + font-size: 24px; + height: 50px; + justify-content: center; + } + + .discount__sale .discount_form .discount_form-inp::placeholder { + font-size: 24px; + } + + .discount__sale .discount_top .discount_top-imgs { + transform: unset; + } + + .discount__sale .discount_top .discount_top-imgs { + margin-top: -24px; + right: 15px; + width: calc(100% + 30px); + margin-bottom: -20%; + } +} + +.blog_card-title { + font-size: 28px; + font-style: normal; + font-weight: 700; + line-height: 32px; +} + +.blog__card-btn { + margin-top: 24px; + color: #000; + font-family: "Craftwork Grotest"; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: normal; + padding: 6px 15px 10px 15px; + max-width: max-content; + display: block; + margin-left: auto; + border-radius: 28px; + border: 1px solid #000; + background: var(--wh, #FFF); + transition: all .24s; +} + + +.blog_slider .blog_card:hover .blog__card-btn { + border-radius: 28px; + border: 1px solid var(--interface-main_white, #FFF); + background: transparent; + color: var(--interface-main_white, #FFF); + transition: all .24s; +} + +.blog__row { + display: flex; + justify-content: space-between; + align-items: center; +} + +.blog__row .blog_text { + max-width: 627px; +} + +.truth_top { + position: relative; +} + +.truth_top picture img { + width: 315.563px; + height: 308.2px; + position: absolute; + right: 0; + top: -110px; +} + +.truth .truth_title { + text-align: left; + width: 100%; + font-size: 74px; + font-style: normal; + font-weight: 700; + line-height: normal; + margin-bottom: 62px; +} + +.truth_block .truth_end-text strong { + font-weight: 900; +} + +.truth__end-promo { + color: var(--grey-black, #121212); + font-family: "Craftwork Grotest"; + font-size: 24px; + font-style: normal; + font-weight: 900; + line-height: normal; + text-transform: uppercase; +} + +.truth__end-btns { + margin-top: 10px; + display: flex; + gap: 12px; +} + +.truth__end-btn { + padding: 10px 10px 11px 10px; + font-family: "Craftwork Grotest"; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: normal; + border-radius: 48px; + max-width: 210px; + width: 100%; + text-align: center; + transition: all .3s; + text-transform: none; +} + +.truth__end-btn.--white { + color: var(--grey-black, #121212); + border: 2px solid var(--grey-black, #121212); + background-color: transparent; +} + +.truth__end-btn.--white:hover { + background: #121212; + color: #FFF; + transition: all .3s; +} + +.truth__end-btn.--black { + background: var(--interface-main_black, #121212); + color: var(--interface-main_white, #FFF); + border: 2px solid transparent; +} + +.truth__end-btn.--black span { + position: relative; + padding-right: 16px; +} + +.truth__end-btn.--black span::after { + content: ''; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 13px; + height: 13px; + background-size: 100%; + background-repeat: no-repeat; + transition: all .3s; + background-position: center; + background-image: url('data:image/svg+xml,'); +} + +.truth__end-btn.--black:hover { + background: transparent; + color: #121212; + border-color: #000; + transition: all .3s; +} + +.truth__end-btn.--black:hover span::after { + transition: all .3s; + background-image: url('data:image/svg+xml,'); +} + +@media screen and (max-width: 576px) { + .truth_top picture img { + position: relative; + top: unset; + right: unset; + left: 0; + width: 294.209px; + height: 198.713px; + } + + .truth .truth_title { + text-align: right; + } + + .truth__end-btns { + flex-direction: column; + } + + .truth__end-btn { + max-width: 100%; + } + + .truth .truth_title { + margin-bottom: 0; + } +} + +.home__block { + max-width: 50%; +} + +.home__title { + color: var(--interface-background, #F2F2F2); + font-family: "Craftwork Grotest"; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: 56px; /* 116.667% */ + text-transform: uppercase; +} + +@media (min-width: 1600px){ + .home__title { + + font-size: 64px; + line-height: 120%; + } +} +.home__subtitle { + color: var(--interface-background, #F2F2F2); + font-family: "Craftwork Grotest"; + margin-top: 32px; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 120% */ +} + +.home__btn { + border-radius: 20px; + background: var(--interface-main_white, #FFF); + padding: 12px 24px; + color: var(--interface-main_black, #121212); + font-family: "Craftwork Grotest"; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 120% */ + display: block; + margin-top: 32px; + max-width: 290px; + text-align: center; + width: 100%; + border: 2px solid transparent; +} + +.home__btn span { + position: relative; + padding-right: 20px; +} + +.home__btn span::after { + content: ''; + width: 13px; + height: 13px; + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + background-image: url('data:image/svg+xml,'); +} + +.home__btn:hover { + border-color: #FFF; + background: transparent; + color: #FFF; +} + +.home__btn:hover span::after { + background-image: url('data:image/svg+xml,'); +} + +.home__pagination { + margin-top: 120px; +} + +.home__pagination .swiper-pagination-bullet { + width: 39.278px; + height: 6px; + border-radius: 54px; + opacity: 0.5; + background: var(--interface-main_white, #FFF); +} + +.home__pagination .swiper-pagination-bullet-active { + opacity: 1; +} + +.home__item img { + position: absolute; + right: -142px; + top: -110px; + height: auto; + width: 70%; + max-width: 600px; +} + +@media (min-width: 1420px) { + .home__item img { + position: absolute; + right: -142px; + top: -110px; + height: auto; + width: 70%; + max-width: 800px; + } +} + +.home__swiper, +.home__swiper .swiper-wrapper { + height: auto; +} + +.blog .blog_slider { + margin-top: 128px; +} + +.cosmopet-x { + padding: 36px 0 0 0; + width: 100%; + overflow: hidden; +} + +.cosmopet-x__swiper, +.cosmopet-x__swiper .swiper-wrapper { + height: auto; +} + +.cosmopet-x__title { + color: var(--creme-white, #F4F1F0); + font-family: "Craftwork Grotest"; + font-size: 82px; + font-style: normal; + font-weight: 700; + line-height: normal; + text-transform: uppercase; +} + +.cosmopet-x__swiper { + margin-top: 52px; + position: relative; +} + +.cosmopet-x__item { + position: relative; + width: 100%; + height: 484px; +} + +.cosmopet-x__item::before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 100%; + z-index: 1; + width: 100%; + border-radius: 60px; + border: 2px solid var(--creme-white, #F4F1F0); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.83) 0%, rgba(255, 255, 255, 0.00) 25.17%, rgba(255, 255, 255, 0.00) 65%, rgba(255, 255, 255, 0.83) 80%); +} + +.cosmopet-x__bg { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; + border-radius: 60px; +} + +.cosmopet-x__body { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + width: 100%; + padding: 36px 35px; +} + +.cosmopet-x__heading { + color: var(--grey-black, #121212); + font-family: "Craftwork Grotest"; + font-size: 22px; + font-style: normal; + font-weight: 700; + line-height: normal; + text-transform: uppercase; +} + +.cosmopet-x__btn { + display: block; + max-width: max-content; + margin-top: 7px; + color: #000; + font-family: "Craftwork Grotest"; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: normal; + padding: 6px 15px 10px 15px; + border-radius: 28px; + border: 1px solid #000; + background: var(--wh, #FFF); +} + +.cosmopet-x__top { + position: absolute; + height: auto; + width: 60%; + top: 43px; + left: 50%; + transform: translateX(-50%); + z-index: 2; +} + +.cosmopet-x .slider-arrows { + top: 50%; + transform: translateY(-50%); + position: absolute; + width: 100%; +} + +.cosmopet-x .slider-arrows .cosmopet-prev { + left: -30px; +} + +.cosmopet-x .slider-arrows .cosmopet-next { + right: -30px; +} + +.slider-arrow { + background-image: url('data:image/svg+xml,')!important; +} + +.discount_top { + position: relative; +} + +.dicsount__body { + margin-top: 39px; +} + +.reviews_items .reviews_item { + flex: 0 0 calc(50% - 23px); + min-height: 334px; +} + +.reviews__left { + flex: 0 0 50%; + display: flex; + flex-direction: column; + gap: 23px; +} + +.reviews_item-top + span { + color: var(--creme-white, #F4F1F0); + font-family: "Craftwork Grotest"; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.reviews_item1 .reviews_item-top + span { + color: var(--interface-main_black, #121212); +} + +.reviews .container { + position: relative; +} + +.truth { + padding-top: 180px; +} + +.blogosphere{ + padding-bottom: 6vh; +} + +.blogosphere__item { + position: relative; + /* width: 100%; */ + /* width: auto; + height: 33vh; */ + /* padding-bottom: 177.6061776061776%; */ + height: 60vh; + width: 36vh; +} + +.blogosphere__item .blogosphere__preview { + position: relative; + height: 60vh; + width: 36vh; + object-fit: cover; + /* height: 100%; + width: 100%; */ + /* position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; */ + border-radius: 33.6px; + box-shadow: 0px 4px 14.4px 0px rgba(0, 0, 0, 0.33); +} + +.blogosphere__content { + position: absolute; + /* width: 25vw; */ + width: 100%; + padding: 10px 15px; + display: flex; + align-items: center; + gap: 10px; + z-index: 1; +} + +.blogosphere__avatar +{ + position: relative; + width: 39.2px; + height: 39.2px; + flex-shrink: 0; + box-shadow: unset; + border: 1.4px solid #FFF; + border-radius: 100%; + flex-shrink: 0; +} + +.blogosphere__name { + color: #FFF; + font-family: "Craftwork Grotest"; + font-size: 16.8px; + font-style: normal; + font-weight: 700; + line-height: 22.4px; /* 133.333% */ +} + +.blogosphere__swiper.swiper { + position: relative; +} + +.blogosphere__swiper .carousel .carousel-item{ + width: auto; + height: auto; +} + +.blogosphere__swiper .slider-arrows { + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + max-width: 421px; + width: 100%; + left: 50%; + pointer-events: none; +} + +.blogosphere { + padding-top: 60px; +} + +.blogosphere__top { + display: flex; + align-items: center; + gap: 30px; +} + +.blogosphere__title { + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + width: 692.514px; + height: 71.298px; + background-image: url('data:image/svg+xml,'); +} + +.blogosphere__circle { + flex-shrink: 0; +} + +.marketplace__swiper, .marketplace__swiper .swiper-wrapper { + height: auto; +} + +.marketplace__swiper .swiper-slide { + max-width: max-content; +} + +.marketplace__title { + color: var(--grey-black, #121212); + font-family: "Craftwork Grotest"; + font-size: 36px; + font-style: normal; + font-weight: 700; + line-height: 40px; /* 111.111% */ + text-transform: uppercase; +} + +.marketplace__swiper { + margin-top: 50px; + margin-left: -70px; + margin-right: -70px; +} + +.marketplace { + position: relative; +} + +.marketplace:after { + content: ''; + position: absolute; + right: 0; + bottom: 0; + width: 222px; + height: 671px; + background: linear-gradient(270deg, #F6F4F3 0%, rgba(242, 242, 242, 0.00) 100%); + z-index: 1; +} + +.blog_card .blog__card-wrapper .blog_card-img { + width: 100%; + height: 100%; + position: absolute; +} + +.blog__card-wrapper { + position: relative; + width: 100%; + padding-bottom: 61.31687242798354%; +} + +.discount__sale .discount_form .discount_form-inp { + opacity: 1; +} + +.discount__sale .discount_form .discount_form-inp::placeholder { + opacity: .6; +} + +.discount__sale .discount_title span { + background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.blog_link.main_link:hover span { + background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +@media screen and (max-width: 991px) { + .reviews__left { + width: 100%; + } +} + +@media screen and (max-width: 768px) { + .home__item img { + position: relative; + right: unset; + top: unset; + width: 100%; + height: auto; + } + + .home__item { + display: flex; + flex-direction: column-reverse; + } + + .home__block { + max-width: 100%; + margin-top: 12px; + } + + .home__title { + font-size: 32px; + font-style: normal; + font-weight: 700; + line-height: 38px; /* 118.75% */ + letter-spacing: -0.32px; + text-transform: uppercase; + } + + .home__subtitle { + margin-top: 16px; + } + + .home__btn { + margin-top: 16px; + max-width: 100%; + } + + .home__pagination { + margin-top: 12px; + text-align: center; + } + + .blog .blog_slider { + margin-top: 28px; + } + + .cosmopet-x__title { + font-size: 32px; + line-height: 38px; /* 118.75% */ + } + + .cosmopet-x__item { + height: 0; + padding-bottom: 151.25%; + } + + .cosmopet-x .slider-arrows { + display: flex; + } + + .cosmopet-x__swiper { + margin-top: 23px; + } + + .slider-arrows .cosmopet-prev { + left: -16px; + } + + .slider-arrows .cosmopet-next { + right: -16px; + } + + .reviews .reviews_title { + text-align: left!important; + font-size: 32px!important; + line-height: 38px!important; /* 118.75% */ + letter-spacing: -0.32px!important; + text-transform: uppercase!important; + margin: 0!important; + } + + .reviews_item .reviews_item-top { + justify-content: space-between; + } + + .reviews__left { + width: 100%; + } + + .reviews_items .reviews_item { + transform: unset!important; + } + + .reviews_items .reviews_item { + width: 100%!important; + } + + .reviews_items .reviews_person-mob { + display: none; + } + + .reviews_item .reviews_item-text { + font-size: 16px!important; + font-style: normal!important; + font-weight: 500!important; + line-height: 20px!important; + } + + .reviews_item .reviews_item-top b { + font-size: 19px!important; + font-style: normal!important; + font-weight: 700!important; + line-height: 24px!important; /* 120% */ + text-transform: uppercase!important; + } + + .reviews_item .reviews_item-text { + max-width: 100%!important; + } + + .truth { + padding-top: 78px; + } + + .blogosphere__circle { + display: none; + } + + .blogosphere__swiper.swiper { + margin-left: -15px; + width: calc(100% + 30px); + } + + .marketplace__title { + font-size: 32px; + line-height: 38px; /* 118.75% */ + letter-spacing: -0.32px; + } + + .marketplace__swiper { + margin-top: 24px; + margin-left: 0px; + margin-right: 0px; + } + + .smiSlider .slider-arrows { + transform: translate(-50%, -50%)!important; + width: 106%!important; + } + + .truth .truth_title span { + background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + color: none; + } + + .truth { + padding-top: 20px!important; + } + + .truth_content-wrap { + padding: 0 30px; + } +} + +@media screen and (max-width: 540px) { + .marketplace:after { + display: none; + } + + .truth .truth_content .truth_block, .truth .truth_content-end .truth_block { + height: auto!important; + } + + .truth .truth_block { + padding: 25px 15px 26px 15px!important; + } + + .blog_block .blog_text { + max-width: 100%!important; + font-size: 18px!important; + font-style: normal!important; + font-weight: 500!important; + line-height: 24px!important; + } + + .home { + background: var(--radial); + } + + .blogosphere__swiper .slider-arrows { + display: flex; + padding: 0 4.5px; + } + + .truth_block .truth_links { + padding-bottom: 0!important; + } + + .reviews_items .reviews_item { + padding: 32px 20px 35px 24px!important; + border-radius: 3.75rem!important; + } + + .reviews_items .reviews_item::after { + border-radius: 3.75rem!important; + } + + .blogosphere__top { + margin-bottom: -55px; + } + + .truth_block .truth_block-text { + min-height: unset!important; + } + + .discount { + margin-top: -50px; + } + + .sellers { + padding-top: 35px; + } + + .blogSlider .slider-arrows { + display: none!important; + } + + .blog_slider { + padding-bottom: 0!important; + } + + .cosmopet-x .slider-arrows .cosmopet-prev { + left: -10px; + } + + .cosmopet-x .slider-arrows .cosmopet-next { + right: -10px; + } + + .sellers { + padding-bottom: 120px!important; + } + + .discount__sale { + border-radius: 24px; + } + + .discount_form .discount_form-btn { + opacity: 1!important; + } + + .blogosphere { + padding-top: 40px; + } + + .reviews { + padding: 56px 0 62px!important; + } + + .reviews_item-top + span { + line-height: 15px; + } + + .reviews_block .reviews_items { + margin-left: 0!important; + } + + .reviews_item-name { + max-width: 70%; + } + + .reviews_item .reviews_item-top img { + width: 72px!important; + height: 72px!important; + } + + .reviews__left { + gap: 10px; + } +} + +.blogSlider .swiper-slide { + height: auto; +} + +.blogSlider .swiper-slide .blog_card { + height: 100%; +} + +.blogSlider .swiper-slide .blog_card .blog_card-info-wrap { + height: 100%; +} + +.blog_slider { + padding-bottom: 92px; +} + +.blog_card .blog_card-info { + justify-content: space-between; +} + +.blog_card-text { + flex: auto; +} + + +.carousel-item.active { + /* pointer-events: none; */ +} + +.sec-bf{ + position: relative; + z-index: 3; +} + +.copied{ + position: absolute; + top: -14px; + border-radius: 20px; + font-size: 13px; + right: -20px; + background: #fff; + padding: 5px; + opacity: 0; + pointer-events: none; + color: #000; +} + +.truth__end-btn.active .copied{ + opacity: 1; +} + +.home { + overflow: hidden; +} + + +.reviews_block { + position: relative; +} + +.reviews_items.--visible { + display: flex; + flex-wrap: wrap; + gap: 20px; +} + +.reviews_row { + flex: 1 1 100%; + display: flex; +} + +.reviews_row--left { + justify-content: flex-start; +} + +.reviews_row--right { + justify-content: flex-end; +} + +.reviews_item { + width: 50%; + /* Каждый блок занимает половину ширины */ +} + +.reviews_item-swiper { + width: 100%; +} + +.reviews_item-img { + border-radius: 50%; +} + +.reviews_item-top { + display: flex; + justify-content: space-between; + padding-bottom: 10px; +} + +.reviews_item-text { + margin-top: 10px; +} + +.reviews_item.reviews_item1 { + flex: 1 1 50%; + max-width: 50%; +} + +.reviews_item.reviews_item2, +.reviews_item.reviews_item4 { + flex: 1 1 calc(50% - 20px); + max-width: 50%; +} + +.reviews_item.reviews_item2 { + position: absolute; + max-width: 500px; + height: 360px; + right: -4%; + bottom: 25%; +} + +.reviews .reviews_person { + position: absolute; + right: -100px; + top: -20%; +} + +@media (max-width: 768px) { + .reviews_row { + justify-content: center !important; + /* На мобильных устройствах центрируем */ + } + + .reviews_item { + width: 100%; + /* На мобильных устройствах блоки на всю ширину */ + } + + .reviews_person { + position: static; + margin: 20px auto; + max-width: 150px; + } + + .reviews_item.reviews_item1 { + flex: 1 1 50%; + max-width: 100%; + } + + .reviews_item.reviews_item2, + .reviews_item.reviews_item4 { + flex: 1 1 calc(50% - 20px); + max-width: 100%; + } + + .reviews_item.reviews_item2 { + position: unset; + max-width: 500px; + height: 360px; + right: -4%; + bottom: 25%; + } + + .reviews .reviews_person { + position: absolute; + right: -100px; + top: -20%; + } + + .reviews_row { + justify-content: center !important; + display: contents; + } +} + + +.no-scroll { + overflow: hidden; +} +.img--mobile{ + display: none; +} +@media only screen and (max-width: 1170px) { + .about_block .about_cards { + grid-template-columns: 48.5% 48.5%; + gap: 30px 20px; + } + .about_cards .about_company{ + max-width: 380px; + } + + .sellers_slider .swiper { + padding-left: 0; + padding-right: 0; + } + .blog_slider .swiper { + padding-left: 30px; + padding-right: 30px; + } + + .truth_block .truth_block-title, + .truth .truth_title { + font-size: 60px; + line-height: 70px; + width: 100%; + } + .discount_top .discount_title { + font-size: 60px; + max-width: 550px; + line-height: 65px; + } + .discount_top .discount_top-imgs { + position: absolute; + top: 20px; + right: -50px; + } + .discount_top .discount_top-imgs .dicount_dog-img { + width: 400px; + } + + .reviews_block .reviews_items{ + margin-left: -30px; + } + +} +@media only screen and (min-width: 600px){ +.swiper-slide-active .sellers_card { + + transform: scale(1.05); /* Увеличение на 1.2 */ + transition: transform 0.3s ease; + background: #fff; +} +} +@media only screen and (max-width: 950px){ + .about_us .about_us-title, + .sellers_top .sellers_title, + .about_info .about_title, + .home_block .home_title { + font-size: 65px; + line-height: 78px; + } + .about .about_block { + gap: 0; + } + .about_block .about_info-wrap{ + gap: 30px; + } + .about_info .about_text { + font-size: 20px; + line-height: 24px; + } + + .about_info-wrap .about_img img { + width: 230px; + height: 560px; + } + + .blog_card .blog_card-info-wrap { + width: 108%; + } + .sellers_top .slider-arrows { + display: none; +} + .seller_block .sellers_top { + align-items: start; + flex-direction: column; + gap: 10px; + } + .sellers_card .sellers_card-img { + /* width: 100%; */ + } + .sellers_card .sellers_card-text{ + text-align: center; + } + .about_us-block .about_us-cards { + grid-template-columns: 48% 48%; + gap: 17px; + } + + .truth_block .truth_block-text p{ + max-width: 400px; + } + .truth_top .gift_img { + margin-left: -120px; + width: 400px; + } + + .reviews_block .reviews_items{ + flex-direction: column; + margin-left: 0; + gap: 0; + align-items: center; + } + .reviews .reviews_title{ + text-align: center; + } + .reviews .reviews_person{ + display: none; + } + .reviews_person-mob{ + display: flex; + order: 3; + object-fit: contain; + margin-top: -80px; + z-index: -2; + } + .reviews_items .reviews_item{ + border-radius: 25px; + padding: 10px 14px; + } + .reviews_items .reviews_item::after{ + border-radius: 25px; + } + .reviews_items .reviews_item1{ + order: 1; + } + .reviews_items .reviews_item2{ + order: 2; + transform: rotate(7deg); + padding: 13px; + margin-top: 10px; + z-index: -1; + margin-left: -4px; + } + .reviews_items .reviews_item6{ + order: 4; + transform: rotate(2deg); + margin-top: -80px; + } + .reviews_items .reviews_item3{ + order: 6; + transform: rotate(2.18deg); + margin-top: 5px; + z-index: -2; + } + .reviews_items .reviews_item4{ + order: 5; + transform: rotate(-1.7deg); + margin-top: 0px; + z-index: -1; + } + .reviews_items .reviews_item5{ + order: 7; + transform: rotate(-3.14deg); + margin-top: -3px; + z-index: -3; + } + + .reviews_item .reviews_item-top b { + font-size: 20px; + line-height: 22px; + } + .reviews_item .reviews_item-text { + font-size: 12px; + line-height: 14.4px; + max-width: 228px; + } +} + +@media only screen and (max-width: 776px){ + .home_dog + { + display: none; + } + .sellers_slider .swiper { + width: 568px; + } + .sellers_card .sellers_card-img { + height: 260px; + } + .slider-arrows { + display: none; + } + .home_block-dog{ + display: flex; + margin-top: 20px; + } + .home .container { + padding: 68px 30px 180px; + } + + .blog_block .blog_title, + .about_info .about_title{ + font-size: 44px; + line-height: 50px; + } + .about_info-wrap .about_img { + max-width: 200px; + } + .about_card .about_card-title { + font-size: 20px; + line-height: 24px; + } + .blog_block .blog_text, + .about_card .about_card-text { + font-size: 16px; + line-height: 18px; + } + .about_card .about_card-info { + gap: 2px; + } + .about_us-card .about_us-card-info h2 { + font-size: 12px; + line-height: 16px; + font-weight: 700; + } + .about_us-card .about_us-card-info span { + font-size: 12px; + line-height: 14px; + } + .about_us-block .about_us-card { + border-radius: 25px; + height: 181px; + } + .about_us-card .about_us-card-info{ + gap: 4px; + padding: 55px 20px 40px; + } + .about_us-cards .about_us-card .about_us-card-info { + height: 131px; + } + .about_us-card .card_date { + top: auto; + right: auto; + bottom: 16px; + left: 20px; + right: 0; + z-index: 2; + padding: 0; + border-radius: 0; + height: fit-content; + width: fit-content; + font-size: 12px; + line-height: 14.4px; + background: transparent; + font-weight: 700; + } + + /* start: QUIZ - max-width: 776px */ + .truth_content-end .truth_block .truth_info { + margin-top: 0px; + } + .truth .truth_top { + flex-direction: column-reverse; + } + .truth_top .gift_line-img{ + display: flex; + } + .truth .truth_title{ + max-width: 500px; + margin-left: auto; + } + .truth_top .gift_img { + transform: rotate(-45deg); + margin-right: auto; + margin-left: -50px; + } + .truth_block .truth_info { + position: relative; + width: 100%; + margin-top: 0; + align-items: center; + flex-direction: column-reverse; + } + .truth_content::after{ + border-radius: 25px; + } + .truth_block .truth_links { + flex-direction: column; + gap: 12px; + padding-bottom: 26px; + width: 100%; + } + .truth_block .truth_link { + width: 100%; + height: 50px; + align-items: center; + justify-content: start; + padding: 8px 20px; + } + + .truth .truth_block { + border-radius: 25px; + height: auto; + padding: 25px 15px 0px 15px; + } + .truth_content-end .truth_block .truth_info{ + flex-direction: column; + } + .truth_content-end .truth_block .truth_links{ + padding-top: 30px; + } + .truth_content-end .truth_block .truth_link{ + width: 100%; + } + .truth_content-end .truth_block .truth_block-text{ + flex-direction: column; + } + .truth_content-end .truth_block .truth_block-text p{ + max-width: 230px; + } + .truth_content-end .truth_xn{ + width: 90px; + height: 58px; + } + .truth_content-end .truth_info img { + width: auto !important; + height: 26vh !important; + object-fit: cover; + position: absolute; + bottom: -21vh; + left: -62px; + } + .truth_content-end .truth_block .truth_link { + width: 100%; + background: #FFF; + } + .truth_content-end .truth_block .truth_end-text{ + width: 100%; + } + + /* end: QUIZ - max-width: 776px */ + + /* start: Наш блог - max-width: 776px*/ + .blog_card .blog_card-title { + font-size: 20px; + line-height: 25.4px; + } + .blog_card .blog_card-text { + font-size: 16px; + line-height: 18.4px; + } + .blog_card .blog_card-info{ + gap: 9px; + } + .blog_slider .blog_card { + border-radius: 30px; + } + .blog_card .blog_card-info-wrap{ + width: 100%; + border-radius: 0; + padding: 12px 14px 16px 16px; + } + .blog_slider .blog_card:hover .blog_card-info-wrap{ + padding-right: 14px; + } + .blog_slider .blog_card:hover { + overflow: hidden; + } + .blog_card .card-line-img{ + display: none; + } + .blog_card .blog_card-img{ + border-radius: 30px 30px 0 0; + } + /* end: Наш блог - max-width: 776px */ + + /* start: Узнайте о нас больше и получите скидку! - max-width: 776px */ + .discount .discount_top{ + margin-bottom: 148px; + order: 1; + } + .discount_block .discount_text{ + order: 2; + margin-bottom: 20px; + } + .discount_block .discount_form{ + order: 3; + margin-bottom: 20px; + } + .discount_block .discount_form-text{ + order: 4; + margin-bottom: 0; + } + .discount_block .discount_cosmodog{ + order: 5; + } + .discount_top .discount_title { + font-size: 48px; + line-height: 52px; + } + .discount_top .discount_top-imgs { + right: -165px; + top: 100px; + } + .discount_top .discount_top-imgs img{ + width: 314px; + } + + .discount_block .discount_form{ + flex-direction: column; + gap: 8px; + width: 100%; + } + .discount_form .discount-line{ + display: none; + } + .discount_form .discount_form-btn, + .discount_form .discount_form-inp{ + width: 100%; + } + /* end: Узнайте о нас больше и получите скидку! - max-width: 776px */ + + .post-single-page .article-body-container{ + padding-bottom: 100px; + } +} + +/* GP | Mobile */ +@media only screen and (max-width: 576px) { + + /*Слайдер*/ + .about .container-fluid { + padding-right: 0; + padding-left: 0; + } + + /*Бестселлеры*/ + .sellers .sellers_card { + background: #fff; + } + .sellers_slider { + height: 530px; + } + .gp_tags { + border: 1px solid #121212; + border-radius: 48px; + padding:2px 4px 2px 4px; + font-size: 14px; + line-height: 18px; + height: 24px; + } + /* .tags_block { + width: 200px; + } */ + .sellers_slider .swiper { + display: flex; + align-items: stretch; + width: 320px; + height: inherit; + } + .seller_name { +font-size: 20px; +font-weight: 500; +line-height: 24px; +text-align: left; + } + .seller_price { + font-size: 20px; + font-weight: bold; + line-height: 30px; + text-align: left; + margin-bottom: 8px; + margin-top: 8px; + } + /* start: Scrollbar */ + body::-webkit-scrollbar { + width: .2rem; + /* background: #fff0; */ + background: linear-gradient(#0F5881, #76CE75, #ECF39F); + } + + body::-webkit-scrollbar-thumb { + border-radius: 4px; + background: rgba(128, 128, 128, 0.9); + } + /* end: Scrollbar */ + + /* start: ОБЩИЕ */ + .img--desktop { + display: none; + } + + .img--mobile { + display: block; + } + /* end: ОБЩИЕ */ + + .main_link { + font-size: 12px; + line-height: 14.4px; + width: 129px; + height: 29px; + padding: 7px; + } + + + .home .home_line2 { + display: flex; + } + + .home .home_line { + display: none; + } + + .home .home_block { + gap: 8px; + } + + .home_block .home_title { + font-size: 26px; + line-height: 34px; + width: 80vw; + } + + .about { + border-radius: 25px; + padding-bottom: 0; + } + + .about > .container { + width: 100%; + margin-right: auto; + margin-left: auto; + } + + .about .about_info-wrap{ + flex-direction: column; + } + + .about_info-wrap .about_img{ + max-width: unset; + width: 100vw; + } + .about_info-wrap .about_img img{ + height: auto; + width: 100%; + } + + .about_cards .about_card { + gap: 0; + } + + .about_cards .about_card-right { + align-items: end; + text-align: end; + } + + .about_card-right .about_card-text { + margin-left: auto; + } + + .about_card .about_card-gif1, + .about_card .about_card-gif4 { + width: 87px; + height: 87px; + } + + .about_card .about_card-gif2 { + width: 99px; + height: 99px; + } + + .about_card .about_card-gif3 { + width: 117px; + height: 102px; + } + + .about_company { + margin-top: 4vh; + } + + .about_company .about_company-logo img { + height: 33px; + } + + .about_company .about_company-logo img:nth-child(1), + .about_company .about_company-logo img:nth-child(3), + .about_company .about_company-logo img:nth-child(4) { + height: 33px; + } + + .about_company .about_company-logo { + display: flex; + gap: 0px 5px; + margin-top: 2%; + justify-content: space-around; + } + + .about_company .about_company-text { + font-size: 12px; + line-height: 14.4px; + } + + .about_cards .about_company { + padding: 15px 16px 18px 16px; + gap: 5px; + border-radius: 25px; + } + + .about_cards .about_company::after { + border-radius: 25px; + } + + .about_company .about_company-logo img { + width: auto; + } + + .about_block .about_cards { + grid-template-columns: 100%; + gap: 10px; + } + + .about_us-cards .about_us-card .about_us-card-info { + height: 151px; + } + + .truth_block .truth_block-text p, + .about_card .about_card-title { + font-size: 12px; + line-height: 18.2px; + } + + .discount_block .discount_text, + .blog_card .blog_card-text, + .blog_block .blog_text, + .truth_block .truth_link, + .sellers_card .sellers_card-text, + .about_card .about_card-text { + font-size: 12px; + line-height: 14.2px; + } + + .about_card .about_card-gif { + margin-bottom: -17px; + } + + .about_slider { + padding: 0; + } + + .about_slider .carousel { + height: 55vh; + min-height: 55vh; + } + + .about .about_block { + gap: 55px; + } + + .about_slider .slide { + padding: 10px 39px; + width: 280px; + height: 280px; + border-radius: 100%; + gap: 12px; + } + + .about_slider .carousel .carousel-item { + padding: 10px 39px; + width: 290px; + height: 290px; + border-radius: 100%; + } + + .about_slider .carousel .carousel-item::after { + background-image: url(../img/border-mobile.png); + border-radius: 100%; + } + + .about_slider .prev { + left: 10vw; + } + + .about_slider .next { + right: 10vw; + } + + .about_slider .slide.active { + transform: translate(0, -20px); + } + + .about_slider .slide img { + width: 113px; + height: 113px; + } + + .about_slider .slide_info { + gap: 6px; + } + + .about_slider .slide_text, + .about_slider .slide_title { + font-size: 12px; + line-height: 14.4px; + text-align: center; + } + + .about_us-block .about_us-card::after, + .about_us-card .about_us-card-img { + border-radius: 25px; + } + + .about_us-card .about_us-card-info { + border-radius: 0 0 25px 25px; + } + + .discount_top .discount_title, + .blog_block .blog_title, + .truth_block .truth_block-title, + .about_us .about_us-title, + .sellers_top .sellers_title { + font-size: 30px; + line-height: 36px; + } + + .sellers_card .sellers_card-img { + width: 100%; + height: 290px; + object-fit: contain; + } + + .sellers .sellers_card { + border-radius: 24px; + height: 520px; + padding:31px 16px 31px 16px; + } + .sellers .swiper-slide{ + max-height: 35vh; + } + + .section_wrap { + padding: 110px 0 52px; + } + + .sellers { + position: relative; + padding-bottom: 87px; + } + + .sellers .sellers_link { + position: absolute; + bottom: 24px; + right: 22px; + } + + .seller_block .sellers_top { + gap: 0; + margin-bottom: 15px; + } + + .reviews { + padding: 90px 0px 36px; + border-radius: 25px 25px 0 0; + } + + /* QUIZ */ + .truth { + border-radius: 0 0 25px 25px; + padding-bottom: 47px; + } + + .truth .truth_content .truth_block, + .truth .truth_content-end .truth_block + { + height: 70vh; + } + + .truth .truth_title { + font-size: 30px; + line-height: 36px; + max-width: 260px; + } + + .truth_top .gift_img { + margin-left: -24px; + width: 160px; + } + + .truth_top .gift_line-img { + bottom: 44px; + width: auto; + } + + .truth_block .truth_block-text img { + width: 29px; + } + + .truth_block .truth_block-title { + max-width: 171px; + margin-bottom: 7px; + } + + .truth_block .truth_line { + gap: 16px; + margin-bottom: 10px; + } + + .truth_block .truth_line span { + width: 34px; + } + + .truth_block .truth_link { + height: 29px; + border-width: 2px; + } + + .truth_content-end .truth_info img { + width: 100%; + } + + .truth_block .truth_info img { + height: 170px; + width: auto; + } + + .truth_links .truth_result { + display: none; + } + + .truth_block .truth_block-text { + gap: 11px; + } + + .truth .truth_block { + height: 470px; + } + + .truth_block .truth_links { + width: 100%; + margin-right: 0; + } + .truth_error .truth_block-text, + .truth_success .truth_block-text + { + margin-bottom: 25%; + } + + /* 381 string in adaptive */ + .truth_content-end .truth_info img { + /* width: auto !important; + object-fit: cover; + position: absolute; + left: -62px; */ + height: 30vh !important; + bottom: 0; + left: unset; + right: 0; + } + + /* QUIZ - конец */ + + + /* Наш блог */ + .blog { + position: relative; + padding-top: 63px; + padding-bottom: 90px; + } + + .blog .blog_link { + position: absolute; + bottom: 35px; + right: 30px; + } + + .blog_card .blog_card-img { + height: 120px; + object-fit: cover; + } + + .blog_card .blog_card-title { + font-size: 12px; + line-height: 16px; + } + + .blog_block .blog_text { + max-width: 230px; + } + + .blog_slider .swiper { + padding-left: 15px; + padding-right: 15px; + } + /* Наш блог - конец */ + + + /* Узнайте о нас больше и получите скидку! */ + .discount { + padding: 0px 0 43px; + } + + .discount_block .discount_text { + max-width: 260px; + } + + .discount_top .discount_top-imgs { + right: -136px; + top: 87px; + } + + .discount_top .discount_top-imgs .dicount_dog-img { + width: 314px; + width: 110vw; + } + + .discount_form .discount_form-inp { + height: 29px; + padding: 6px 13px; + font-size: 12px; + line-height: 14.4px; + } + + .discount_form .discount_form-inp::placeholder { + font-size: 12px; + line-height: 14.4px; + } + + .discount_form .discount_form-btn { + justify-content: start; + padding: 5px 15px; + background: var(--creme-white, #F4F1F0); + color: #62c57e; + opacity: 0.6; + } + .discount_form img{ + display: none; + } + .discount_form span{ + width: 100%; + } + + .discount_block .discount_cosmodog { + border-radius: 25px; + height: 415px; + } + + .discount_cosmodog .discount_cosmodog_info { + height: 245px; + gap: 14px; + padding: 10px 19px; + } + + .discount_cosmodog .discount_cosmodog-title { + text-align: start; + font-size: 26px; + line-height: 31.2px; + max-width: 202px; + margin-right: auto; + } + + .discount_cosmodog .discount_cosmodog-text { + font-size: 12px; + line-height: 14.4px; + max-width: 231px; + text-align: start; + margin-right: auto; + } + + .discount_top .discount_top-imgs { + right: -20%; + top: 0; + transform: scale(1.8); + z-index: 0; + margin-bottom: -91%; + margin-top: 20%; + position: relative; + } + + .discount_block .wpcf7 { + order: 3; + } + + /* Узнайте о нас больше и получите скидку! - конец */ + + /* start: Отзывы ветеринаров */ + .reviews .reviews_title { + font-size: 26px; + line-height: 31px; + max-width: 278px; + margin: 0 auto; + } + + .reviews .reviews_block { + margin-top: 20px; + } + + .reviews_block .reviews_items { + flex-wrap: unset; + gap: 10px; + } + + .reviews_items .reviews_item { + width: 80vw; + gap: 10px; + } + + .reviews_items .reviews_item2 { + margin-top: -0px; + } + + .reviews_items .reviews_item1 { + transform: rotate(-5.35deg); + } + + .reviews_items .reviews_item3 { + margin-top: 3px; + } + + .reviews_items .reviews_item4 { + margin: unset; + } + + .reviews_items .reviews_person-mob { + margin-bottom: -10%; + } + + .reviews_item .reviews_item-name { + display: flex; + flex-direction: column; + gap: 20px; + } + + .reviews_item .reviews_item-top b { + font-size: 12px; + line-height: 16px; + text-transform: uppercase; + } + + .reviews_item .reviews_item-top span { + max-width: 134px; + } + + /* end: Отзывы ветеринаров */ + + /* start: О НАС ПИШУТ СМИ*/ + .about_us-card .about_us-card-info span a { + font-size: 14px; + } + + .about_us-block .about_us-cards { + grid-template-columns: 1fr; + } + + .about_us-card .card_date { + right: 20px; + left: unset; + } + + .about_us-cards .about_us-card-info { + height: 130px; + } + + .about_us-card .about_us-card-info { + padding: 55px 20px 20px; + } + + .about_us-card-info.card-info--half-gradient { + background: linear-gradient(0deg, #F4F1F0 45%, rgba(244, 241, 240, 0) 100%); + } + + .truth_content-end .truth_block .truth_end-text, + .truth_content-end .truth_block .truth_block-text { + position: static; + } + + .truth_content-end .truth_block .truth_link { + border-width: 2px; + position: static; + bottom: 28px; + right: 0; + width: 100%; + margin-bottom: 76px; + z-index: 2; + } + + .truth_content-end .truth_info { + bottom: 0; + left: 0; + position: absolute; + } + + /* end: О НАС ПИШУТ СМИ */ + + /* start: Проверьте свои знания и получите подарок! */ + .truth_top .gift_img { + width: 64vw; + margin: unset; + transform: translateX(-22%) rotate(-45deg); + } + + .truth_top .gift_line-img { + top: 40%; + } + + .truth .truth_block { + padding: 25px; + } + + .truth_block .truth_line { + gap: 10%; + } + + .truth_block .truth_block-text { + min-height: 20%; + } + + .truth_points { + font-size: 30px; + } + + /* end: О НАС ПИШУТ СМИ */ + + + /* start: Наш блог */ + .blog_slider .blog_card { + height: 290px; + } + + .blog_card .blog_card-img { + border-color: #121212; + } + + .blog_card .blog_card-info-wrap { + border-radius: 0 0 30px 30px; + border-color: #121212; + } + + .blog_slider .blog_card:hover .blog_card-info-wrap{ + border-radius: 0 0 30px 30px; + width: 100%; + } + /* end: Наш блог */ + + + + /* start: Футер */ + .footer_form .footer_form-title h2, + .footer_box .footer_box-title { + font-size: 12px; + line-height: 16.2px; + font-weight: 700; + } + + .footer_box .footer_box-link { + font-size: 12px; + line-height: 16.2px; + } + + .footer_form .footer_form-textarea textarea, + .footer_form .footer_form-inp input { + height: 28px; + border: 1px solid var(--grey-black, #121212); + padding: 5px 18px; + font-size: 12px; + line-height: 14.4px; + opacity: .5; + } + + .footer_form .footer_block .footer_bottom a, + .footer_form .footer_form-inp input::placeholder { + font-size: 12px; + line-height: 14.4px; + } + + .footer_form .footer_form-textarea textarea { + height: 123px; + min-height: unset; + padding: 7px 18px; + border-radius: 17px !important; + } + + .footer_form .footer_form-textarea { + display: flex; + flex-direction: column; + gap: 13px; + } + + .footer_form-textarea .footer_form-btn { + position: static; + width: 100%; + min-height: unset; + } + + .footer_block .footer_social { + gap: 14px; + } + + .footer_block .footer_bottom a:nth-child(2) { + display: none; + } + + .footer_form .footer_form-inp { + flex-direction: column; + } + + .footer .footer_box{ + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + row-gap: 14px; + column-gap: 0; + } + .footer .footer_box .footer_line-mob + { + grid-area: 1 / 2 / 3 / 3; + height: 100%; + padding-top: 4px; + } + .footer .footer_box .footer_line-mob1{ + margin-left: -30%; + } + .footer .footer_box .footer_box-title{ + grid-area: 1 / 1 / 1 / 1; + } + .footer .footer_box .footer_box-link{ + grid-area: 2 / 1 / 2 / 1; + } + .footer_box .footer_line-mob{ + display: block; + } + .footer_block .footer_bottom a{ + font-size: 12px; + line-height: 18px; + } + /* end: Футер */ +} + +@media only screen and (max-width: 350px) { + .reviews_block .reviews_items { + margin-left: -20px; + } +} + +.btn--black-hover:hover { + background: #121212 !important; + color: #F4F1F0 !important; + transition: .3s +} + +.btn--black-hover { + transition: .3s } \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/archive-product.php b/wp-content/themes/cosmopet/woocommerce/archive-product.php index 954db8b..b4ed0c0 100644 --- a/wp-content/themes/cosmopet/woocommerce/archive-product.php +++ b/wp-content/themes/cosmopet/woocommerce/archive-product.php @@ -3,8 +3,8 @@ wp_enqueue_script( 'shop_scripts', get_template_directory_uri() . '/woocommerce/assets/js/gp-main.js', 'jquery', '', true); wp_enqueue_style( 'shop_styles_core', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-core.css'); wp_enqueue_style( 'shop_styles_desktop', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-desktop.css'); - wp_enqueue_style( 'shop_styles_mobile', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-mobile.css'); wp_enqueue_style( 'shop_styles_tablet', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-tablet.css'); + wp_enqueue_style( 'shop_styles_mobile', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-mobile.css'); wp_enqueue_style( 'shop_styles_order', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-order.css'); wp_enqueue_style( 'shop_styles_ultra', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-ultra.css'); @@ -70,6 +70,7 @@ $context['posts'] = Timber::get_posts($args); $context['count'] = count(Timber::get_posts($count_args)); + $context['sidebar_filters'] = Timber::get_widgets('sidebar_filters'); Timber::render('archive-product/archive-product.twig', $context); diff --git a/wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-ajaxload.twig b/wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-ajaxload.twig new file mode 100644 index 0000000..47846f6 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-ajaxload.twig @@ -0,0 +1,9 @@ +{% for post in posts %} + {% include '/woocommerce/archive-product/archive-product-tease.twig' with {post: post} %} +{% endfor %} + +{% if not ended %} + +{% endif %} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-modal.twig b/wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-modal.twig new file mode 100644 index 0000000..537b00d --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-modal.twig @@ -0,0 +1,221 @@ +
+ +
\ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-tease.twig b/wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-tease.twig new file mode 100644 index 0000000..4a39255 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-tease.twig @@ -0,0 +1,115 @@ +{% set cur_product = fn('wc_get_product', product.id) %} +{% set attrs = post.product.get_attributes() %} +{% set cur_weight = function('get_product_info', post.id, 'weight') %} + +
+
+ {% if post.date('Y-m-d') >= criteria_for_new_product %} + + {{ function('pll_e', 'Новинка') }} + + {% endif %} + + {% if post._sale_price %} + + {{ function('pll_e', 'Распродажа %') }} + + {% endif %} +
+ + {{ post.title }} + +
+
+ {% set compound = fn('wc_get_product_terms', post.id, 'pa_compound') %} + {% for option in compound %} + + {% set term = get_term(option) %} + {{ term.name }} + {% endfor %} +
+ {{ post.title }} +
+

{{ post._price() }}

+
+
+ +
+
+
+
+ {{ post.title }} +
    + {% set features = fn('wc_get_product_terms', post.id, 'pa_features') %} + {% for option in features %} + {% set term = get_term(option) %} +
  • {{ term.name }}
    • + {% endfor %} +
+
+ +
+
+
+

Объем

+ +
+ +
+
    + {% set collection = fn('wc_get_product_terms', post.id, 'pa_collection') %} + {% for option in collection %} + {% set term = get_term(option) %} + {% set siblings = function('get_collection_siblings' , term.id) %} + + {% for sibling in siblings %} + + {% set weight = function('get_product_info', sibling.ID, 'weight') %} + + {% set class = '' %} + {% if weight == cur_weight %} + {% set class = 'active' %} + {% endif %} +
  • + +
    • + {% endfor %} + {% endfor %} +
+
+
+
+
+

Количество

+ +
+ + + +
+
+
+

+ {{ post._price() }} +

+
+
+ {{ function('get_add_to_cart_button', post.id) }} +
+
+ +

{{ function('pll_e', 'Подробнее') }}

+ +
+
+
+
+
\ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-core.css b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-core.css new file mode 100644 index 0000000..2e95825 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-core.css @@ -0,0 +1,2467 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Переменные, шрифты, UI kit */ + +/* +700 - Bold +600 - SemiBold / Demi +500 - Medium +400 - Regular +*/ + +/* Craftwork Grotesk */ +@font-face { + font-family: "Craftwork Grotesk"; + src: local("Craftwork Grotesk Bold"), + url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"), + url("../fonts/craftwork/CraftworkGrotesk-Bold.woff") format("woff"), + url("../fonts/craftwork/craftwork-grotesk-bold.ttf") format("ttf"); + font-weight: 700; +} +@font-face { + font-family: "Craftwork Grotesk"; + src: local("Craftwork Grotesk SemiBold"), + url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"), + url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff") format("woff"), + url("../fonts/craftwork/craftwork-grotesk-semi-bold.ttf") format("ttf"); + font-weight: 600; +} +@font-face { + font-family: "Craftwork Grotesk"; + src: local("Craftwork Grotesk Medium"), + url("../fonts/craftwork/CraftworkGrotesk-Medium.woff2") format("woff2"), + url("../fonts/craftwork/CraftworkGrotesk-Medium.woff") format("woff"), + url("../fonts/craftwork/craftwork-grotesk-medium.ttf") format("ttf"); + font-weight: 500; +} +@font-face { + font-family: "Craftwork Grotesk"; + src: local("Craftwork Grotesk Regular"), + url("../fonts/craftwork/CraftworkGrotesk-Regular.woff2") format("woff2"), + url("../fonts/craftwork/CraftworkGrotesk-Regular.woff") format("woff"), + url("../fonts/craftwork/craftwork-grotesk-regular.ttf") format("ttf"); + font-weight: 400; +} +/* Craftwork Grotesk */ + +/* din 2014 */ +@font-face { + font-family: "DIN 2014 Rounded"; + src: local("DIN 2014 Rounded Demi"), + url("../fonts/din-2014/din-2014-rounded-demi.woff2") format("woff2"), + url("../fonts/din-2014/din-2014-rounded-demi.woff") format("woff"), + url("../fonts/din-2014/din-2014-rounded-demi.ttf") format("ttf"); + font-weight: 600; +} +@font-face { + font-family: "DIN 2014 Rounded"; + src: local("DIN 2014 Rounded Regular"), + url("../fonts/din-2014/din-2014-rounded-regular.woff2") format("woff2"), + url("../fonts/din-2014/din-2014-rounded-regular.woff") format("woff"), + url("../fonts/din-2014/din-2014-rounded-regular.ttf") format("ttf"); + font-weight: 400; +} +/* din 2014 */ + +/* roboto */ +@font-face { + font-family: "Roboto"; + src: local("Roboto Medium"), + url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), + url("../fonts/roboto/Roboto-Medium.woff") format("woff"), + url("../fonts/roboto/roboto-medium.ttf") format("ttf"); + font-weight: 500; +} +@font-face { + font-family: "Roboto"; + src: local("Roboto Regular"), + url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), + url("../fonts/roboto/Roboto-Regular.woff") format("woff"), + url("../fonts/roboto/roboto-medium.ttf") format("ttf"); + font-weight: 400; +} +/* roboto */ + +/* Глобальные переменные: */ + +:root { + /* fonts */ + --font-family: "Craftwork Grotesk", sans-serif; + --second-family: "DIN 2014 Rounded", sans-serif; + --third-family: "Roboto", sans-serif; + + /* color */ + /* text */ + --text-white: #fff; + --text-black: #121212; + --text-dark: #2b2b3b; + --text-grey: #999; + --text-red: #fa0505; + --text-green: #2ED15D; + --text-0: #000; + --text-3: #333; + --text-6: #666; + --text-9: #999; + + /* background */ + --background-white: #fff; + --background-black: #121212; + --background-grey: #f2f2f2; + --background-green: #2ED15D; + --background-green-white: #f4fff0; + --background-9: #999; + + + /* gradient */ + --gradient-blue: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(15, 88, 129) 0%, rgb(30, 164, 156) 51.21689438819885%, rgb(118, 206, 117) 80.70731163024902%, rgb(236, 243, 159) 91.14583134651184%); + --gradient-turquoise: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(117, 196, 240) 0%, rgb(126, 231, 225) 51.21689438819885%, rgb(181, 228, 180) 80.70731163024902%, rgb(237, 244, 164) 91.14583134651184%); + --gradient-red: linear-gradient(22deg, #f44242 0%, #569ef0 100%); +} + + +/* общие */ +body.overflow-hidden { + overflow: hidden; +} + +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__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; + + display: flex; + align-items: center; +} +.breadcrumbs__item{ + display: block; + + padding: 0px 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-6); + + text-decoration: none; + + position: relative; +} +.breadcrumbs__item:first-child{ + padding-left: 0; +} +.breadcrumbs__item:nth-child(n+2)::before{ + content: ''; + + position: absolute; + top: -2px; + left: -12px; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/arrow-breadcrumbs.svg); + background-repeat: no-repeat; + background-size: contain; +} +/* breadcrumbs */ + +/* compound */ +.compound{ + margin: -5px; + + min-height: 33.95px; + + display: flex; + align-items: start; +} +.compound__item{ + margin: 5px; + + padding: 4px 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: var(--text-black); + + border-radius: 16px; + background-color: var(--background-white); + + display: block; + text-decoration: none; +} +.compound__item:first-child{ + margin-left: 0; +} +.product__footer{ + margin: 48px 24px 24px; + + display: flex; + justify-content: center; +} +.product__footer--error{ + margin: 45px 0; +} +/* compound */ + +/* button */ +.button{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border-radius: 20px; + + cursor: pointer; +} +.button--100-perc{ + width: 100%; + text-align: center; +} +.button--white{ + padding: 11px 24px; + + text-align: center; + + background-color: var(--background-white); + border: 1px solid var(--background-black); + + transition: opacity .2s ease-out; +} +.button--white:hover{ + opacity: .8; +} +.button--white.active{ + background: var(--background-black); + color: var(--background-white); +} +.button--gradient{ + background: var(--gradient-turquoise); + border: none; + + transition: opacity .2s ease-out; +} +.button--gradient:hover{ + opacity: .8; +} +.button--base{ + padding: 12px 24px; +} +.button--high{ + height: 56px; + + padding: 16px 24px 24px 24px; + + font-weight: 700; + text-align: center; + + position: relative; +} +.button--high-46{ + padding: 12px 24px; + + font-size: 20px; + font-weight: 700; + line-height: 24px; +} +.button--icon{ + padding-right: 56px; + + text-align: start; +} +.button--filter::after{ + content: ''; + + position: absolute; + top: 16px; + right: 24px; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/filter.svg); + background-repeat: no-repeat; + background-size: contain; +} +.button--black{ + padding: 7px 15px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + color: var(--text-white); + + background: var(--background-black); + border: 1px solid var(--text-white); +} +.button--link{ + text-decoration: none; +} +.button--red-48-px{ + border-radius: 48px; +} +.to-know{ + /* width: 100%; */ + + padding: 12px 24px 7px 24px; + + display: flex; + justify-content: center; + + border: none; + + transition: opacity .2s ease-out; + text-decoration: none; +} +.to-know:hover{ + opacity: .8; +} +.to-know p{ + padding-bottom: 4px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border-bottom: 1px var(--text-black) solid; + + cursor: pointer; +} +.to-know--background-none{ + background: none; +} +.back{ + margin-top: 16px; + margin-left: 16px; + + padding: 8px; + padding-left: 32px; + + background: none; + border: none; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + text-decoration: none; + + position: relative; +} +.back::before{ + content: ''; + + position: absolute; + top: 8px; + left: 0; + + margin-right: 8px; + + width: 24px; + height: 24px; + + background-image: url(../img/svg/main/arrow-back.svg); +} + +.back::after{ + content: ''; + + position: absolute; + bottom: 6px; + left: 0; + + width: calc(100% - 8px); + height: 1px; + + background: var(--text-black); +} + +.wc-forward { + width: 100%; + padding: 0.5rem 0; + text-align: center; +} +/* 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 */ + +/* modal */ +.modal{ + position: fixed; + top: 0; + left: 0; + + padding: 20px; + + width: 100%; + height: 100%; + + background: rgba(0, 0, 0, 0.25); + + z-index: 200; + + opacity: 0; + transition: opacity .2s ease-out; + pointer-events: none; + + display: flex; + justify-content: center; + align-items: center; + + overflow-y: auto; +} +.modal.active{ + opacity: 1; + pointer-events: auto; +} +.modal__notification{} +.form__button-mobile{ + display: none; +} +.modal__aside{ + position: fixed; + top: 0; + right: 0; + + width: 0; + height: 100%; + + overflow: hidden; + transition: width .4s ease-out; +} +.modal__item{ + height: 100%; + overflow: auto; + padding: 24px; + + background: var(--background-white); + + position: relative; + + display: none; + + filter: blur(10px); + transition: filter .2s ease-out; +} +.modal__item--no-title{ + padding-top: 72px; +} +.modal__item.active{ + display: flex; + flex-direction: column; + justify-content: space-between; +} +.modal__close{ + position: absolute; + top: 32px; + right: 24px; + + width: 24px; + height: 24px; + + border: none; + background: none; +} +.modal__header{} +.modal__title{ + padding-right: 48px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; + color: var(--text-black); +} +.modal__small-title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + color: var(--text-black); +} +.modal__text{ + margin-top: 16px; + + padding-right: 10px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-0); +} +.modal__form-sub{ + margin-top: 48px; +} +.modal-form-sub__submit{ + margin-top: 64px; +} +.modal__block-button{ + margin-top: 24px; +} +.modal__button{ + margin-top: 16px; +} +.modal__button:first-child{ + margin-top: 0; +} +.modal__content{ + margin-top: 24px; +} +.modal__filter{ + width: 400px; +} +.modal__footer{ + border-top: 1px solid var(--text-6); + padding-top: 23px; +} +.modal__block-price{ + display: flex; + justify-content: space-between; + align-items: center; +} +.modal-block-price__title{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.modal-block-price__price{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + text-align: right; + color: var(--text-black); +} +.modal-block-price__price::after{ + content: 'Р'; +} +.modal__basket{ + width: 600px; +} +.modal__to-know, +.modal__to-know-submit{ + width: 412px; +} + +.modal-basket__item{ + padding-top: 23px; + padding-right: 15px; + padding-bottom: 24px; + + display: flex; + + border-top: 1px solid var(--background-grey); + + position: relative; +} +.modal-basket__item::before{ + content: ''; + + position: absolute; + top: 24px; + right: 6px; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/basket.svg); + background-repeat: no-repeat; + background-position: center; + + cursor: pointer; + + transition: opacity .2s ease-out; +} +.modal-basket__item:hover .modal-basket__item::before{ + opacity: .8; +} +.modal-basket__item--return{ + padding-right: 5px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.modal-basket__item--return .modal-basket-item__title{ + padding-right: 10px; +} +.modal-basket__item--return::before{ + display: none; +} +.modal-basket-item__return{ + border-radius: 20px; + padding: 4px 24px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-white); + + background: var(--background-black); + + border: none; +} +.modal-basket-item__block-image{ + width: 128px; + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; +} +.modal-basket-item__image{ + width: 96px; + aspect-ratio: 1; + + object-fit: contain; +} +.modal-basket-item__content{ + margin-left: 16px; +} +.modal-basket-item__title{ + padding-right: 40px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.modal-basket-item__sub-title{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: var(--text-black); +} +.modal-basket-item__control{ + margin-top: 24px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.modal-basket-item__price{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + text-align: right; + color: var(--text-black); +} +.modal-basket-item__price::after{ + content: 'Р'; + + padding-left: 4px; +} +.modal__basket .modal__header{ + height: calc(100% - 92px); + margin-bottom: -36px; +} +.modal__basket .modal__content{ + height: calc(100% - 100px); + overflow-x: hidden; + +} +.modal__basket .modal__content::-webkit-scrollbar { + width: 7px; + background-color: #f9f9fd; +} +.modal__basket .modal__content::-webkit-scrollbar-thumb { + background-color: var(--background-black); + border-radius: 2px; +} + +.modal-form{ + margin: auto; + + width: 600px; + + padding: 24px; + + border-radius: 20px; + + position: relative; + + display: none; +} +.modal-form.active{ + display: block; +} +.modal-form--white{ + border: 1px solid var(--background-black); + background: var(--background-white); +} +.modal-form--green-gradient{ + background: var(--gradient-blue); +} +.modal-form--width-584{ + width: 584px; +} +.modal-form--cdek{ + width: 836px; +} +.modal-form__close{ + position: absolute; + top: 24px; + right: 24px; + + width: 24px; + aspect-ratio: 1; + + border: none; + background: none; + background-image: url(../img/svg/main/black-x.svg); + background-repeat: no-repeat; + background-size: 24px; + background-position: center; + + transition: opacity .2s ease-out; + + z-index: 10; +} +.modal-form__close--white{ + background-image: url(../img/svg/main/white-x.svg); +} +.modal-form__close:hover{ + opacity: .8; +} +.modal-form__button-close{} +.modal-form__title{ + padding-right: 50px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 26px; + line-height: 123%; + text-transform: uppercase; + color: var(--text-dark); +} +.modal-form__text--center{ + text-align: center; +} +.modal-form__text--center-pc{ + text-align: center; +} +.modal-form__title--green-gradient{ + background: var(--gradient-blue); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.modal-form__title--white{ + color: var(--text-white); +} +.modal-form__element{ + margin-top: 24px; +} +.modal-form__element--center{ + display: flex; + justify-content: center; +} +.modal-form__element--top-40{ + margin-top: 40px; +} +.modal-form__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.modal-form__text--weight-500{ + font-weight: 500; +} +.modal-form__text--white{ + color: var(--text-white); +} +.modal-form__img{ + width: 100%; + height: 360px; + + object-fit: contain; +} +.modal-form__content{ + margin-top: 40px; +} +.modal-form-content__line{ + margin-top: 24px; +} +.modal-form-content__line:first-child{ + margin-top: 0; +} +.modal-form-content__line--two{ + display: flex; + justify-content: space-between; +} +.modal-form-content__line--two-mobile{ + display: flex; + justify-content: space-between; +} +.modal-form-content__line--two-mobile .modal-form-content-line__element{ + width: calc(50% - 12px); +} +.modal-form-content-line__element{ + position: relative; +} +.modal-form-content-line__element--arrow::after{ + content: ''; + + position: absolute; + right: 16px; + bottom: 16px; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/arrow-right-input.svg); + + pointer-events: none; +} +.modal-form-content__line--two .modal-form-content-line__element{ + width: calc(50% - 12px); +} +.modal-form-content__line--three{ + display: flex; +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ + width: 85px; + + flex-shrink: 0; +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ + margin-left: 8px; + + width: 100%; +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ + margin-left: 8px; + + width: 85px; + + flex-shrink: 0; +} +.modal-form-content__line--margin-top-16{ + margin-top: 16px; +} +.modal-form__buttons{ + margin-top: 32px; +} +.modal-form__buttons--two{ + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal-form__buttons--two button, +.modal-form__buttons--two input{ + width: calc(50% - 20px); +} +.modal-map{ + margin: auto; + + width: 1105px; + + display: none; + + border-radius: 24px; + border: none; +} +.modal-map.active{ + display: flex; +} +.modal-map__left{ + width: 600px; + + padding: 24px; + + position: relative; +} +.modal-map__control{ + margin: 38px -12px -12px -12px; + + display: flex; +} +.modal-map__control--delivery{ + margin-top: 12px; +} +.modal-map-control__item{ + margin: 12px; + + padding: 2px; + + width: calc(50% - 24px); + + background: var(--background-9); + border-radius: 20px; + border: none; +} +.modal-map-control__item.active{ + background: var(--gradient-blue); +} +.modal-map-control__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); +} +.modal-map-control-item__content{ + padding: 14px; + + border-radius: 18px; + + background: var(--background-white); +} +.modal-map-control-item__header{ + display: flex; + align-items: center; +} +.modal-map-control-item__circle{ + padding: 2px; + width: 20px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--background-9); + position: relative; +} +.modal-map-control-item__input{ + display: none; +} +.modal-map-control-item-circle__content{ + width: 16px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--background-white); +} +.modal-map-control__item.active .modal-map-control-item__circle{ + background: var(--gradient-blue); +} +.modal-map-control__item.active .modal-map-control-item__circle::before{ + content: ''; + position: absolute; + top: 4px; + left: 4px; + width: 12px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--gradient-blue); +} +.modal-map-control-item__title{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); +} +.modal-map-control-item__description{ + margin-top: 16px; +} +.modal-map-control-item__time{ + font-family: var(--font-family); + font-weight: 500; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + text-align: start; +} +.modal-map-control-item__price{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: var(--text-6); + + text-align: start; +} +.modal-map__form{ + margin-top: 24px; +} +.modal-map-form__hidden{ + +} +.modal-map-form__button{ + margin-top: 83px; +} +.modal-map-form__sub-button{ + display: none; +} +.modal-map__right{ + padding: 16px 0px 16px 16px; +} +.modal-map__map{ + border: 2px solid var(--background-9); + border-radius: 16px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.modal-map__map iframe{ + height: 650px; +} +.modal__age{ + +} +.modal__age > div{ + display: none; +} +.modal__age > div.active{ + display: flex; +} +/* modal */ + +/* toggle */ +.toggle{ + padding-top: 26px; + padding-bottom: 25px; + + border-bottom: 1px solid var(--text-3); + + position: relative; +} +.toggle::after{ + content: ''; + + position: absolute; + top: 24px; + right: 0; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/black-x.svg); + transform: rotate(45deg); + transition: transform .2s; + pointer-events: none; +} +.toggle.active::after{ + transform: rotate(0deg); +} +.toggle__title{ + padding-right: 30px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + cursor: pointer; +} +.toggle__block-content{ + height: 0; + overflow: hidden; + + transition: height .2s ease-out; +} +.toggle__content{ + padding-top: 24px; +} +.toggle-content__item{ + margin: 12px -12px -12px -12px; + + display: flex; + align-items: center; + flex-wrap: wrap; +} +.toggle-content__item:first-child{ + margin-top: 0; +} +.toggle-content__element{ + margin: 12px; +} +.toggle-content__element--width-perc-100{ + width: 100%; +} +.toggle-content__element--width-perc-50{ + width: calc(50% - 24px); +} +.toggle__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +/* toggle */ + +/* checkbox */ +.checkbox{ + display: flex; + align-items: center; + + cursor: pointer; +} +.checkbox__state{ + border-radius: 4px; + + width: 18px; + height: 18px; + + border: 2px solid var(--background-black); + background: var(--background-white); + + flex-shrink: 0; +} +.checkbox.active .checkbox__state{ + background-color: var(--background-black); + + background-image: url(../img/svg/main/arrow-selected-white.svg); + background-repeat: no-repeat; + background-position: center; +} +.checkbox__input{ + display: none; +} +.checkbox__label{ + padding-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); + + cursor: pointer; +} +.checkbox__label a{ + color: #76ce75; + + text-decoration: none; +} +.checkbox--small{ + margin-top: 24px; +} +.checkbox--small .checkbox__label{ + padding-left: 24px; + + font-weight: 500; + font-size: 12px; + line-height: 133%; +} +/* checkbox */ + +/* radio */ +.radio{ + display: flex; + align-items: center; +} +.radio__input{ + width: 18px; + aspect-ratio: 1; + + accent-color: var(--background-black); + + cursor: pointer; +} +.radio__label{ + padding-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); + + cursor: pointer; +} +/* radio */ + +.added_to_cart { + display: none!important; +} + +@keyframes slidein { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +/* Sidebar Filters */ + +.modal__filter .modal__header { + height: 100%; + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: stretch; +} + +.WpfWoofiltersWidget { + height: 100%; +} + +.WpfWoofiltersWidget .wpfMainWrapper { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 2rem; +} + +.wpfFilterWrapper { + padding-top: 26px!important; + padding-bottom: 25px!important; + border-bottom: 1px solid var(--text-3); + position: relative; + margin: 0!important; +} + +.wpfFilterWrapper .wfpDescription { + padding: 0!important; + padding-right: 30px!important; + margin: 0!important; + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + cursor: pointer; + text-transform: uppercase; +} + +.wpfFilterWrapper .wfpDescription:after { + content: ''; + position: absolute; + top: 24px; + right: 0; + width: 24px; + aspect-ratio: 1; + background-image: url(../img/svg/main/black-x.svg); + transform: rotate(45deg); + transition: transform .2s; + pointer-events: none; +} + +.wpfFilterWrapper.expanded .wfpDescription::after { + transform: rotate(0deg); +} + +.wpfCheckboxHier, .wpfExpandablePart { + display: none; +} + +.wpfCheckboxHier { + padding-top: 24px; +} + +.wpfLiLabel, .wpfFilterVerScroll li label { + display: flex!important; + flex-direction: row; + align-items: center; + gap: 8px; + padding-left: 0; + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + cursor: pointer; +} + +.wpfCheckbox { + display: flex!important; + align-content: center; + justify-content: center; +} + +.wpfCheckbox label { + display: none!important; +} + +.wpfFilterWrapper[data-filter-type="wpfPrice"] .wpfFilterContent { + padding: 0!important; +} + +.wpfFilterLayoutHor { + justify-content: space-between; +} + +.wpfPriceInputs { + justify-content: space-between!important; +} + +.wpfFilterWrapper .ui-slider-horizontal { + height: 6px!important; +} + +.wpfExpandablePart { + padding: 0 10px; +} + +.ui-slider.ui-widget-content:not(.iris-slider-offset) { + border-radius: 999px!important; + border: 0!important; + background: var(--background-grey)!important; +} + +.ui-slider .ui-slider-range { + background: rgb(30, 164, 156)!important; +} + +.wpfPriceFilterRange.ui-slider.ui-widget-content .ui-slider-handle { + border-radius: 999px!important; + border: 2px solid white!important; + background: rgb(30, 164, 156)!important; + height: 16px!important; + width: 16px!important; +} + +.wpfPriceRangeField#wpfMinPrice, .wpfPriceRangeField#wpfMaxPrice { + min-width: 80px!important; + box-sizing: border-box; + text-align: left!important; +} + +.wpfPriceRangeField#wpfMinPrice:after, +.wpfPriceRangeField#wpfMaxPrice:after { + content: ' ₽'; +} + +.wpfPriceRangeField#wpfMaxPrice { + text-align: right!important; +} + +.wpfFilterDelimeter { + display: none!important; +} + +.wpfFilterButtons .wpfFilterButton { + height: 56px; + text-transform: capitalize!important; + width: 100%!important; + padding: 16px 24px 24px 24px!important; + font-weight: 700!important; + text-align: center!important; + position: relative!important; + background: var(--gradient-turquoise); + border: none; + transition: opacity .2s ease-out; + font-family: var(--font-family); + font-size: 20px!important; + line-height: 120%; + color: var(--text-black); + border-radius: 20px!important; + cursor: pointer; +} + +.wpfFilterButtons .wpfClearButton.wpfButton { + padding-bottom: 4px; + width: 100%; + text-align: center; + text-transform: capitalize!important; + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + border-bottom: 0!important; + cursor: pointer; + border-radius: 0!important; + text-decoration: underline!important; +} + +.wpfFilterContent ul li input[type="checkbox"] { + width: 18px; + height: 18px; + border: 2px solid var(--background-black)!important; + background: var(--background-white); + flex-shrink: 0; + border-radius: 4px!important; + appearance: none!important; + -webkit-appearance: none!important; + outline: none!important; +} + +.wpfFilterContent ul li input[type="checkbox"]:checked { + background-color: var(--background-black); + background-image: url(../img/svg/main/arrow-selected-white.svg); + background-repeat: no-repeat; + background-position: center; +} + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-desktop.css new file mode 100644 index 0000000..28ab323 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-desktop.css @@ -0,0 +1,1959 @@ +/* Основные стили для компьютера */ + +/* header start */ + +.header{ + position: relative; + + background-color: var(--background-white); + + position: fixed; + left: 0; + top: 0; + right: 0; + + z-index: 200; +} +.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); +} + +.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: #121212; + 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; + } + .product__header{ + display: flex; + justify-content: space-between; + align-items: center; + } + .product__tag{ + margin: 36px -12px -12px -12px; + + display: flex; + align-items: center; + flex-wrap: wrap; + } + .product-tag__item{ + margin: 12px; + + padding: 1px; + + border-radius: 16px; + + background: var(--gradient-blue); + border: none; + } + .product-tag-item__content{ + padding: 3px 11px; + + background: var(--background-white); + + border-radius: 15px; + + display: flex; + align-items: center; + } + .product-tag-item__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + background: var(--gradient-blue); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + .product-tag-item__button{ + margin: 2px 0 2px 4px; + + width: 20px; + aspect-ratio: 1; + + background: none; + border: none; + + background-image: url(../img/svg/main/gradient-x.svg); + background-repeat: no-repeat; + background-position: center; + } + .product__error{ + margin: auto; + + padding: 0 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + color: var(--text-0); + text-align: center; + } + .product__error-button{ + border-radius: 20px; + padding: 4px 24px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border: 1px solid var(--text-0); + background: var(--background-white); + text-decoration: none; + } + .product__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; + text-align: center; + color: var(--text-black); + } + .product__main{ + margin: 36px -12px -12px; + + /* width: 100%; */ + + display: flex; + align-items: stretch; + flex-wrap: wrap; + } + .product__item{ + margin: 12px; + + width: calc(25% - 24px); + + display: flex; + flex-direction: column; + justify-content: space-between; + + background-color: var(--background-grey); + border-radius: 24px; + + overflow: hidden; + + position: relative; + } + .product__item::before{ + content: ''; + + position: absolute; + top: 0; + left: 0; + + width: calc(100% - 2px); + height: calc(100% - 2px); + + border: 1px solid #000; + border-radius: 24px; + + pointer-events: none; + transition: opacity .2s ease-out; + + opacity: 0; + } + .product__item:hover::before{ + opacity: 1; + } + .product__item.active::before{ + opacity: 0; + } + .product-item__block-label{ + position: absolute; + top: 16px; + left: 16px; + } + .product-item__label{ + position: absolute; + top: 16px; + left: 16px; + + margin: -2px; + + display: flex; + align-items: center; + + z-index: 10; + } + .product-item-label__tag{ + margin: 2px; + + padding: 4px 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: #f4f1f0; + + border-radius: 16px; + display: block; + + text-decoration: none; + } + .product-item-label__tag--new{ + background: var(--gradient-blue); + } + .product-item-label__tag--new-green{ + background: #d9ffcc; + color: #4e7623; + } + .product-item-label__tag--sale{ + background: var(--gradient-red); + } + .product-item-label__tag--sale-red{ + color: #fa0505; + background: #ffe5e5; + } + .product-item-label__tag--black{ + background: var(--background-black); + color: var(--text-white); + } + .product-item-label__tag--title{ + padding: 4px 2px; + + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + display: flex; + align-items: center; + } + .product-item__product-card{ + height: 274px; + + display: flex; + justify-content: center; + align-items: center; + } + .product-item__images{ + height: 242px; + object-fit: contain; + } + .product-item__content-card{ + padding: 15.5px; + } + .product-item__title{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + text-decoration: none; + display: block; + } + .product-item__title:first-child{ + margin-top: 0; + } + .product-item__price{ + margin-top: 8px; + + display: flex; + align-items: center; + } + .product-item__price p{ + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 200%; + text-transform: uppercase; + color: var(--text-black); + } + .product-item__price p::after{ + content: '₽'; + padding-left: 5px; + } + .product-item__price span{ + margin-left: 9px; + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-red); + } + .product-item__price del{ + margin-left: 24px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 18px; + line-height: 133%; + text-transform: uppercase; + text-decoration: line-through; + color: var(--text-6); + } + .product-item__price del::after{ + content: '₽'; + } + .product-item__price span::before{ + content: '-'; + } + .product-item__price span::after{ + content: '%'; + } + .product-item__bye{ + margin-top: 8px; + } + .product__item.hiding .product-item__images{ + filter: grayscale(1) + } + .product__item.hiding .product-item__price{ + color: var(--text-grey); + } + .product-item__overlay{ + position: absolute; + top: 100%; + left: 0; + + width: 100%; + height: 100%; + + padding: 24px; + + display: flex; + flex-direction: column; + justify-content: space-between; + + border-radius: 24px; + backdrop-filter: blur(25px); + background-color: rgba(242, 242, 242, 0.8); + + z-index: 10; + + transition: top .4s ease-out; + } + .product-item__overlay.active{ + top: 0; + } + .product-item-overlay__header{} + .product-item-overlay__tags{ + margin: 4px -6px -6px -6px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-3); + + display: flex; + flex-wrap: wrap; + + list-style-type: none; + } + .product-item-overlay__tags li{ + margin: 4px 6px; + + position: relative; + } + .product-item-overlay__tags li:nth-child(n+1)::after{ + content: ''; + + position: absolute; + top: 6px; + right: -8px; + + width: 4px; + aspect-ratio: 1; + + background-color: var(--text-3); + border-radius: 50%; + } + .product-item-overlay__tags li:last-child::after, + .product-item-overlay__tags li:last-child::before{ + display: none; + } + .product-item-overlay__price{ + margin-top: 32px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + text-align: right; + color: var(--text-black); + } + .product-item-overlay__price::after{ + content: '₽'; + } + .product-item-overlay__block-button{ + margin-top: 32px; + } + .product-item-overlay__button{ + margin-top: 16px; + } + .product-item-overlay__button:first-child{ + margin-top: 0; + } + .product-item-overlay__input-block{ + + } + .product-item-overlay__field{ + margin-top: 24px; + + display: flex; + justify-content: space-between; + align-items: center; + } + .product-item-overlay__field:first-child{ + margin-top: 0; + } + .product-item-overlay-field__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-0); + } + .product-item__form{ + + } +/* product */ + +/* modal */ +/* .modal__button .to-know{ + display: none; +} */ +/* 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{ + margin: 48px 24px 24px 24px; + + display: flex; + align-items: start; + flex-wrap: wrap; +} +.detail__images{ + margin: -12px; + + width: calc(50% - 24px); + + display: flex; + flex-wrap: wrap; +} +.detail__image{ + margin: 12px; + + border-radius: 24px; + + display: flex; + align-items: center; + justify-content: center; + + background: var(--background-grey); + cursor: pointer; +} +.detail__image--width-perc-100{ + width: calc(100% - 24px); + height: 600px; + +} +.detail__image--width-perc-50{ + width: calc(50% - 24px); + height: 288px; +} +.detail__image--width-perc-100 img{ + width: 90%; + height: 90%; + + object-fit: contain; +} +.detail__image--width-perc-50 img{ + width: 100%; + height: 100%; + + object-fit: contain; +} +.detail__content{ + margin-left: 48px; + + width: calc(50% - 24px); +} +.detail__label{ + margin: -2px; + display: flex; + align-items: center; +} +.detail__label .product-item-label__tag:last-child{ + margin-left: auto; +} +.detail__label .product-item-label__tag:first-child{ + margin-left: 0; +} +.detail__title{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; + color: var(--text-black); +} +.detail__block-price{ + margin-top: 24px; + + display: flex; + align-items: center; +} +.detail-block-price__price{ + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; + color: #121212; +} +.detail-block-price__price::after{ + content: '₽'; +} +.detail-block-price__sale{ + margin-left: 22px; + + display: flex; + align-items: center; +} +.detail-block-price-sale__text{ + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 120%; + text-transform: uppercase; + text-decoration: line-through; + color: var(--text-6); +} +.detail-block-price-sale__text::after{ + content: '₽'; +} +.detail-block-price-sale__perc{ + margin-left: 9px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-red); +} +.detail-block-price-sale__perc::before{ + content: '-'; +} +.detail-block-price-sale__perc::after{ + content: '%'; +} +.detail-block__form{ + margin-top: 48px; + + display: flex; + flex-direction: column; +} +.detail-block-form__item{ + margin-top: 24px; + + min-width: 345.89px; + + display: flex; + align-items: center; + flex-wrap: wrap; +} +.detail-block-form__item--radio{ + margin: 16px -8px -8px -8px; +} +.detail-block-form__item:first-child{ + margin-top: 0; +} +.detail-block-form__item button{ + margin: 8px; +} +.detail-block-form__submit{ + min-width: 345.89px; +} +.detail__warning{ + padding: 3px; + + border-radius: 24px; + + background: var(--gradient-turquoise); +} +.detail-warning__content{ + padding: 26px; + + border-radius: 22px; + + background: var(--background-white); +} +.detail-warning__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + color: var(--text-black); +} +.detail-warning__text{ + margin-top: 16px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.detail__toggle{ + margin-top: 48px; + margin-bottom: 48px; +} +.detail__wrapper-catalot{ + margin-top: 64px; + + width: calc(100% + 16px); + + overflow: hidden; + + position: relative; +} +.detail__catalot{ + +} +.detail-catalot__header{ + padding-right: 16px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.detail-catalot__control{ + display: flex; + align-items: center; +} +.detail-catalot-control__button{ + margin-left: 24px; + + width: 48px; + aspect-ratio: 1; + + border-radius: 50%; + border: 1px solid var(--background-black); + background: none; + + display: flex; + justify-content: center; + align-items: center; +} +.detail-catalot__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + text-align: start; + color: var(--text-0); +} +.detail-catalot__content{ + margin: 12px -12px -12px -12px; + + width: 100%; + + display: flex; +} +.detail__catalot .product__item{ + width: calc(100% - 24px); +} +.detail__images-phone{ + display: none; +} +.back-detail{ + display: none; +} +.toggle__table{ + margin-top: 32px; + + display: flex; + flex-wrap: wrap; +} +.toggle__table:first-child{ + margin-top: 0; +} +.toggle__table--three .toggle-table__block:nth-child(1){ + width: 40%; +} +.toggle__table--three .toggle-table__block:nth-child(2){ + width: 40%; +} +.toggle__table--three .toggle-table__block:nth-child(3){ + width: 20%; +} +.toggle__table--two .toggle-table__block{ + width: calc(50% - 20px); +} +.toggle__table--two .toggle-table__block:nth-child(even){ + margin-left: 40px; +} +.toggle-table__block{ + +} +.toggle-table__item{ + margin-top: 8px; + + width: 100%; + + display: flex; + justify-content: space-between; +} +.toggle-table__item p{ + display: block; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + flex-shrink: 0; +} +.toggle-table__item .warning{ + width: 100%; +} +.toggle-table__item .warning p{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + text-align: center; +} +.toggle-table__title{ + margin-bottom: 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); +} +.toggle-table__title--center{ + text-align: center; +} +.toggle-table-item__line{ + margin: 23px 8px 0 8px; + + width: 100%; + + height: 1px; + background: linear-gradient(to right, transparent 50%, #fff 50%), linear-gradient(to right, #333, #333); + background-size: 4px 2px, 100% 2px; + + opacity: .6; +} + +.radio-button{ +} +.radio-button__input{ + display: none; +} +/* detail */ + +/* gallery */ +.gallery{ + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + + padding: 24px; + + display: flex; + align-items: center; + + background: var(--background-white); + + pointer-events: none; + opacity: 0; + transition: opacity .2s ease-out; + + z-index: 300; +} +.gallery.active{ + opacity: 1; + pointer-events: auto; +} +.gallery__close{ + position: absolute; + top: 24px; + right: 24px; + + z-index: 10; +} +.gallery__pagination{ + margin: -12px; +} +.gallery-pagination__item{ + margin: 12px; + + width: 134px; + height: 136px; + + display: flex; + justify-content: center; + align-items: center; + + border: none; + border-radius: 16px; + background: var(--background-grey); +} +.gallery-pagination__item img{ + width: 90%; + max-height: 90%; + + object-fit: contain; +} +.gallery__slider{ + margin-left: 48px; + + padding: 100px; +} +.gallery__slider{ + width: 100%; +} +.gallery__slider .swiper-pagination{ + display: none; +} +.gallery__slider .swiper-button-next::after, +.gallery__slider .swiper-button-prev::after{ + display: none; +} +.gallery-button{ + width: 48px; + height: 48px; + + display: flex; + justify-content: center; + align-items: center; + + border: 1px solid var(--background-black); + border-radius: 20px; + + background: none; +} +.gallery__slider .swiper-slide{ + display: flex; + justify-content: center; + align-items: center; +} +.gallery__block{ + width: 600px; + height: 774px; + + display: flex; + justify-content: center; + align-items: center; + + background: var(--background-grey); + border-radius: 24px; +} +.gallery__block img{ + width: 90%; + max-height: 90%; + + object-fit: contain; +} +.gallery__wrapper{ + margin: 0 auto; + max-width: 1600px; + + display: flex; + align-items: center; +} +/* .swiper { + width: 600px; + height: 300px; +} */ + +/* gallery */ + + +/* cabinet */ +.cabinet{ + padding: 24px; + + display: flex; + justify-content: space-between; +} +.cabinet__control{ + margin: 24px; + margin-bottom: 0; + + display: none; +} +.cabinet-control__button{ + margin-left: 8px; + + padding: 12px 16px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + background: var(--background-white); + border: 2px solid var(--text-black); + border-radius: 48px; + + transition: opacity .2s ease-out; +} +.cabinet-control__button:first-child{ + margin-left: 0; +} +.cabinet-control__button.active{ + background: var(--background-black); + color: var(--text-white); +} +.cabinet-control__button:hover{ + opacity: .8; +} +.cabinet__orders{ + width: calc(((100% - 48px) / 3) * 2); +} +.cabinet__profile{ + width: calc((100% - 48px) / 3); +} + +.cabinet-card{ + margin-top: 32px; + + padding: 1px; + + border-radius: 20px; +} +.cabinet-card:first-child{ + margin-top: 0; +} +.cabinet-card--green{ + background: var(--background-green); +} +.cabinet-card--green-white{ + background: var(--background-green-white); +} +.cabinet-card--green-white .cabinet-card__content{ + background: none; +} +.cabinet-card--red-blue{ + background: var(--gradient-red); +} +.cabinet-card--grey{ + background: var(--background-9); +} +.cabinet-card__content{ + padding: 23px; + + border-radius: 19px; + + background-color: var(--background-white); +} +.cabinet-card__element{ + margin-top: 24px; + + position: relative; +} +.cabinet-card__element--margin-top-32{ + margin-top: 32px; +} +.cabinet-card__element:first-child, +.cabinet-card__element--margin-top-32:first-child{ + margin-top: 0 +} +.cabinet-card__element-change{ + position: absolute; + top: 14px; + right: 0; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/change-dot.svg); + border: none; + background-color: var(--background-white); + + transition: opacity .2s ease-out; +} +.cabinet-card__element-change:hover{ + opacity: .8; +} +.cabinet-card__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 26px; + line-height: 123%; + text-transform: uppercase; + background: var(--gradient-blue); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.cabinet-card__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + + color: var(--text-black); +} +.cabinet-card__text--grey{ + color: var(--text-grey); +} +.cabinet-card__label{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + + color: var(--text-3); +} +.cabinet-card__status{ + padding-left: 20px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + + position: relative; +} +.cabinet-card__status--chek{ + color: var(--text-green); +} +.cabinet-card__status--chek::before{ + content: ''; + + position: absolute; + top: 0; + left: 0; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/status-chek.svg); + object-fit: contain; +} +.cabinet-card__status--cancelled{ + color: var(--text-red); +} +.cabinet-card__status--cancelled::before{ + content: ''; + + position: absolute; + top: 0; + left: 0; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/status-cancelled.svg); + object-fit: contain; +} +.cabinet-card__block-accounts{ + display: flex; +} +.cabinet-card__account{ + margin-left: 16px; + + width: 40px; + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; + + background: var(--background-9); + border-radius: 50%; +} +.cabinet-card__account:first-child{ + margin-left: 0; +} +.cabinet-card__block-buttons{ + display: flex; + justify-content: space-between; + align-items: center; +} +.cabinet-card__button{ + padding: 8px 8px 6px 0; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + background: none; + border: none; + + position: relative; + + text-decoration: none; +} +.cabinet-card__button::before{ + content: ''; + + position: absolute; + bottom: 6px; + + width: calc(100% - 8px); + height: 1px; + + background: var(--text-black); + + transition: opacity .2s ease-out; +} +.cabinet-card__button:hover{ + opacity: .8; +} +.cabinet-card__confirm{ + margin-top: 16px; + + border-radius: 20px; + padding: 4px 24px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + + + background: var(--background-black); + color: var(--text-white); + border: none; + + transition: opacity .2s ease-out; +} +.cabinet-card__confirm:hover{ + opacity: .8; +} +.cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{ + margin-top: 8px; +} +.cabinet-card__text:first-child, .cabinet-card__label:first-child, .cabinet-card__status:first-child, .cabinet-card__block-accounts:first-child, .cabinet-card__block-buttons:first-child{ + margin-top: 0px; +} +.cabinet-card__block-add-pets{ + width: 100%; + + display: flex; + align-items: center; + + background: none; + border: none; +} +.cabinet-card-add-pets__circle{ + width: 48px; + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; + + border: 1px solid var(--text-6); + border-radius: 50%; +} +.cabinet-card-add-pets__text{ + margin-left: 16px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + + color: var(--text-6); + + position: relative; +} +.cabinet-card-add-pets__text::after{ + content: ''; + + position: absolute; + left: 0; + bottom: -4px; + + width: 100%; + height: 1px; + + background: var(--text-6); +} +.cabinet-card__discount{ + display: flex; + align-items: center; +} +.cabinet-card-discount__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); +} +.cabinet-card-discount__percent{ + margin-left: 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); +} +.cabinet-card-discount__percent::after{ + content: '%'; +} +.cabinet-card-discount__arrow{ + display: inline-block; + + margin-left: 6px; + + width: 20px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/arrow-breadcrumbs-black.svg); + background-position: center; +} +.cabinet-card__no-orders{ + margin-top: 32px; + + padding: 48px 24px; +} +.cabinet-card-no-orders__element{ + margin-top: 26px; +} +.cabinet-card-no-orders__element:first-child{ + margin-top: 0; +} +.cabinet-card-no-orders__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + text-align: center; + color: var(--text-black); +} +.cabinet-card__pet{ + display: flex; + align-items: center; +} +.cabinet-card-pet__icon{ + width: 48px; + aspect-ratio: 1; + + border-radius: 50%; + background: var(--gradient-blue); +} +.cabinet-card-pet-icon__content{ + margin: 1px; + + width: calc(100% - 2px); + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; + + border-radius: 50%; + background: var(--background-white); +} +.cabinet-card-pet-icon__content img{ + width: 32px; + aspect-ratio: 1; + + object-fit: contain; +} +.cabinet-card-pet__name{ + margin-left: 24px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); +} +.cabinet-card__order{ + position: relative; +} +.cabinet-card-order__header{ + display: flex; + justify-content: space-between; + align-items: flex-start; +} +.cabinet-card-order__main{} +.cabinet-card-order-main__date{ + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + color: var(--text-black); +} +.cabinet-card-order-main__number{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-black); +} +.cabinet-card-order-main__number::before{ + content: '№'; +} +.cabinet-card-order__payment{ + display: flex; + align-items: flex-end; + + transition: margin .2s ease-out; +} +.cabinet-card-order-payment__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-black); +} +.cabinet-card-order-payment__price{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); +} +.cabinet-card-order-payment__price::after{ + margin-left: 5px; + content: '₽'; +} +.cabinet-card-order__content{ + margin-top: 24px; +} +.cabinet-card-order__content +.cabinet-card-order__status{ + display: flex; + align-items: center; +} +.cabinet-card-order-status__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.cabinet-card-order-status__pointer{ + margin-left: 12px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.cabinet-card-order-status__pointer--grey{ + color: var(--text-6); +} +.cabinet-card-order-status__pointer--green{ + color: var(--text-green); +} +.cabinet-card-order-status__pointer--red{ + color: var(--text-red); +} +.cabinet-card-order__block-detail{ + height: 0; + overflow: hidden; + + transition: height .2s ease-out; +} +.cabinet-card-order__detail{ + padding-top: 24px; +} +.cabinet-card-order-detail__address{} +.cabinet-card-order-detail-address__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.cabinet-card-order-detail-address__text{ + margin-top: 16px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.cabinet-card-order-detail__main{ + margin-top: 24px; + + display: flex; + justify-content: space-between; +} +.cabinet-card-order-detail-main__products{} +.cabinet-card-order-detail-main__product{ + margin-top: 4px; + + display: flex; + align-items: center; +} +.cabinet-card-order-detail-main__product:first-child{ + margin-top: 0; +} +.cabinet-card-order-detail-main-product__img{ + width: 106px; + height: 96px; +} +.cabinet-card-order-detail-main-product__content{ + display: flex; +} +.cabinet-card-order-detail-main-product__description{ + width: 212px; +} +.cabinet-card-order-detail-main-product-description__what{ + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-black); +} +.cabinet-card-order-detail-main-product-description__with-what{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-6); +} +.cabinet-card-order-detail-main-product__count{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-6); +} +.cabinet-card-order-detail-main-product__count::before{ + margin-right: 4px; + + content: 'x'; +} +.cabinet-card-order-detail-main-product__price{ + margin-left: 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-black); +} +.cabinet-card-order-detail-main-product__price::after{ + content: ' Р'; +} +.cabinet-card-order-detail-main__links{ + display: flex; + flex-direction: column; +} +.cabinet-card-order-detail-main__link{ + margin-top: 16px; +} +.cabinet-card-order-detail-main__link:first-child{ + margin-top: 0; +} +.cabinet-card-order__open-detail{ + margin-top: 24px; + + padding-right: 24px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border: none; + background: none; + + position: relative; +} +.cabinet-card-order__open-detail::after{ + content: ''; + + position: absolute; + top: 6.75px; + right: 0; + + width: 12.5px; + height: 10.5px; + + background-image: url(../img/svg/main/arrow-black.svg); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + + transition: transform .2s; + /* transform: rotate(180deg); */ +} +.cabinet-card-order__detail-short{ + position: absolute; + right: 0; + bottom: 0; + + display: flex; + align-items: center; + + transition: opacity .2s .1s ease-out; +} +.cabinet-card-order-detail-short__item{ + border-radius: 16px; + width: 106px; + height: 96px; +} +.cabinet-card__download{ + margin-top: 32px; +} +.cabinet-card__order.active .cabinet-card-order__detail-short{ + opacity: 0; +} +.cabinet-card__order.active .cabinet-card-order__open-detail::after{ + transform: rotate(180deg); +} +/* .cabinet-card-no-orders__ */ +.cabinet__subscription-pc{ +} +.cabinet__subscription-mobile{ + display: none; +} +/* cabinet */ + +@media only screen and (max-width: 1600px) { + +.wrapper{ + max-width: 1280px; +} + +.product__item{ + margin: 12px; + + width: calc(33.3% - 24px); +} + +.gallery__wrapper{ + max-width: 1280px; +} + +.header__content::after{ + max-width: 1232px; +} +} + +@media only screen and (max-width: 1365px) { + .gallery__wrapper{ + max-width: 100%; + } + +} + + + + + + + +/* Стили для лептопов */ +/* @media only screen and (min-width: 992px) and (max-width: 1400px) { + +} */ \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-mobile.css b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-mobile.css new file mode 100644 index 0000000..40f29dd --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-mobile.css @@ -0,0 +1,270 @@ +/* Стили для мобильных устройств */ +@media only screen and (max-width: 720px) { +/* product */ +.product__item{ + width: calc(100% - 24px); +} +/* product */ + +/* modal */ +.modal__basket{ + width: 100%; +} +.modal__filter{ + width: 100%; +} +.modal__to-know, +.modal__to-know-submit{ + width: 100%; +} +.modal__button .to-know{ + display: flex; + + background: none; +} +.modal__basket .modal__header { + height: calc(100% - 156px); + margin-bottom: -36px; +} +.modal-basket-item__block-image{ + position: absolute; + width: 80px; +} +.modal-basket-item__image{ + width: 48px; +} +.modal-basket-item__content{ + margin-left: 0; + + padding-left: 96px; +} +.modal-basket-item__control{ + margin-left: -80px; +} +.modal-basket-item__title{ + min-height: 40px; + + font-size: 16px; +} +.modal-basket__item--return{ + flex-direction: column; + align-items: start; +} +.modal-basket__item--return .modal-basket-item__title{ + margin-right: auto; +} +.notification--width-584{ + width: 100%; +} +.notification__title{ + font-size: 20px; +} +.notification__text--center-pc{ + text-align: start; +} +.notification__img{ + height: 360px; +} +.notification__title{ + padding-right: 96px; +} +.modal-form__buttons--two{ + flex-wrap: wrap; +} +.modal-form__buttons--two button, .modal-form__buttons--two input{ + margin-top: 24px; + width: 100%; +} +.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{ + margin-top: 0; +} +.modal-map__control{ + flex-wrap: wrap; +} +.modal-map-control__item{ + width: calc(100% - 24px); +} +.form__full-mobile{ + width: 100%; + border-radius: 0; + border: none; +} + +.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ + width: 69px; +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ + +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ + width: 82px; +} +.form__input{ + padding: 12px 14px; +} +.modal-form--height-100-phone{ + min-height: 100%; +} +/* modal */ + +/* footer */ +.footer__about{ + display: none; +} +.footer__wrapper{ + flex-direction: column; +} +.footer__content{ + width: 100%; +} +.footer__form{ + margin-top: 24px; + margin-left: 0; + + width: 100%; +} +.footer__social-media{ + display: block; + + margin-top: 24px; +} +.footer-about__text{ + padding-top: 35px; + display: block; + text-align: left; +} +.footer__list{ + margin-top: 20px; +} +/* footer */ + +/* detail */ +.toggle__table--two .toggle-table__block{ + width: 100%; +} +.toggle__table--two .toggle-table__block:nth-child(even){ + margin-top: 32px; + margin-left: 0; +} +.toggle__table--three .toggle-table__block:nth-child(1){ + width: 31%; +} +/* detail */ + +/* cabinet */ +.cabinet-card__title{ + font-size: 20px; +} +.cabinet-card__no-orders{ + margin-top: 16px; +} +.cabinet-card-order__header{ + flex-direction: column; +} +.cabinet-card-order__payment{ + margin-top: 16px; +} +.cabinet-card-order-detail__main{ + flex-direction: column; +} +.cabinet-card-order-detail-main__links{ + margin-top: 24px; + + align-items: start; +} +.cabinet-card-order-detail-main-product__img{ + width: 70px; + height: 70px; +} +.cabinet-card-order-detail-main__product{ + margin-top: 16px; + + align-items: start; +} +.cabinet-card-order-detail-main-product__content{ + margin-left: 16px; + + flex-wrap: wrap; + + position: relative; +} +.cabinet-card-order-detail-main-product__description{ + width: 100%; +} +.cabinet-card-order-detail-main-product__count{ + position: absolute; + left: 116px; + bottom: 0; +} +.cabinet-card-order-detail-main-product__price{ + position: absolute; + left: 153px; + bottom: 0; +} +.cabinet-card__content{ + padding-right: 19px; +} + +/* .cabinet-card__order.active */ +/* .cabinet-card__order.active */ +/* cabinet */ +} + +@media only screen and (max-width: 576px) { +/* header */ + +/* header */ + +/* product */ +.product__header{ + flex-direction: column; + align-items: start; +} +.product__header .button{ + margin-top: 48px; +} +/* product */ + +/* modal */ +.modal__aside{ + left: 0; +} +.form-input-radio__title span{ + display: block; + width: 100%; + + color: var(--text-grey); +} +.modal-form__title{ + font-size: 20px; +} +/* modal */ + +/* detail */ +.detail-block-form__item, +.detail-block-form__submit{ + min-width: 100%; +} +/* detail */ + +/* cabinet */ + +.cabinet-card-order-detail-main-product__img{ + width: 40px; + height: 40px; +} + +.cabinet-card-order-detail-main-product__count{ + left: auto; + right: 71px; +} +.cabinet-card-order-detail-main-product__price{ + left: auto; + right: 0; +} +.cabinet-card-order__detail-short{ + transition-delay: 0; + transition-duration: 0; +} +/* cabinet */ +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-order.css b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-order.css new file mode 100644 index 0000000..fcfde9e --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-order.css @@ -0,0 +1,241 @@ +.order{ + display: flex; +} +.order__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 117%; + text-transform: uppercase; + color: var(--text-black); +} +.order__contacts{ + width: calc(50% - 0.5px); + + padding: 24px; + + border-right: 1px solid #121212; +} +.order-contacts__header{ + display: flex; + justify-content: space-between; + align-items: center; +} +.order-contacts__form{ + margin-top: 24px; +} +.order-contacts__delivery{ + margin-top: 47.5px; + + padding-top: 48px; + + border-top: 1px solid var(--background-grey); +} + +.order-contacts-deliver__item{ + margin-top: 24px; +} +.order-contacts-deliver__date{ + padding: 8px; + + border-radius: 24px; + + background: var(--background-grey); +} +.order-contacts-deliver__date .form-input-radio__item{ + margin-top: 24px; +} +.order-contacts-deliver__date .form-input-radio__item:first-child{ + margin-top: 0; +} +.order__your{ + width: calc(50% - 0.5px); + + padding: 24px 24px 24px 48px; + + background: var(--background-grey); +} +.order-your__products{ + margin-top: 48px; +} +.order-your-products__item{ + margin-top: 16px; + + display: flex; + justify-content: space-between; +} +.order-your-products__left{ + display: flex; +} +.order-your-products__img{ + width: 40px; + aspect-ratio: 1; + + border-radius: 16px; +} +.order-your-products__content{ + margin-left: 16px; +} +.order-your-products__name{ + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-black); + + text-decoration: none; +} +.order-your-products__description{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-6); +} +.order-your-products__description span{ + font-weight: 700; +} +.order-your-products__description span::before{ + margin-left: 3px; + + content: 'x '; +} +.order-your-products__right{ + display: flex; +} +.order-your-products__count{ + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-6); +} +.order-your-products__count::before{ + content: 'x'; +} +.order-your-products__price{ + margin-left: 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-black); +} +.order-your-products__price::after{ + content: 'Р'; +} +.order-your__calculation{ + margin-top: 48px; +} +.order-your__promo{ + display: flex; +} +.order-your-promo__button{ + margin-left: 8px; +} +.order-your-calculation__item{ + margin-top: 24px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.order-your-calculation__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.order-your-calculation__value{ + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 200%; + text-transform: uppercase; + text-align: right; + color: var(--text-black); +} +.order-your-calculation__value--price::after{ + content: ' ₽'; +} +.order-your-calculation__value--discount{ + background: var(--gradient-red); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.order-your-calculation__value--discount::before{ + content: '- '; +} +.order-your-calculation__description{ + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-9); +} +.order-your-calculation__line{ + margin-top: 23px; + border: 1px solid var(--background-9); +} +.order-your-calculation__result{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 117%; + text-transform: uppercase; + color: var(--text-black); +} +.order-your-calculation__submit{ + margin-top: 48px; +} + +@media only screen and (max-width: 1200px) { +.order{ + display: block; +} +.order__contacts, .order__your{ + border: none; + width: 100%; +} +} + +@media only screen and (max-width: 720px) { +.order__title{ + max-width: 181px; + + font-size: 20px; + line-height: 120%; +} +.order__your{ + margin-top: 16px; +} +.order__contacts{ + padding: 24px 16px; +} +.order__your{ + padding: 40px 16px 9px 16px; +} +.order-your__promo{ + display: block; +} +.order-your-promo__button{ + margin-left: 0; + margin-top: 24px; + + width: 100%; +} +.order-your-products__content{ + max-width: 164px; +} +.order-your-products__count, .order-your-products__price{ + flex-shrink: 0; +} +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-tablet.css b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-tablet.css new file mode 100644 index 0000000..a1df426 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-tablet.css @@ -0,0 +1,342 @@ +/* Стили для планшетов */ +@media only screen and (max-width: 1200px) { +/* header */ +main{ + padding-top: 64px; +} +.main-menu{ + display: none; +} +.header__open-menu{ + display: block; +} +.lang{ + display: none; +} +.header__logo{ + width: 136px; + height: 29px; +} +.header__content{ + height: auto; + + padding: 8px 16px; +} +.mini-profile__item:nth-child(2){ + margin-left: 0; +} +.header::after{ + left: 0; + + width: 100%; +} +.header__pc-menu{ + display: none; +} +.header__phone-menu{ + display: block; +} +.header__menu-block{ + top: 56px; +} +.header__content::after{ + left: 0; + right: 0; + width: 100%; +} +/* header */ + +/* footer */ +.footer{ + margin-top: 0; + + padding: 24px 16px; +} +/* footer */ + +/* breadcrumbs */ +.breadcrumbs{ + display: none; +} +/* breadcrumbs */ + +/* product */ +.product{ + padding: 12px; + padding-top: 20px; +} +.product__title{ + font-weight: 700; + font-size: 26px; + line-height: 123%; + text-transform: uppercase; +} +.to-know p { + font-size: 18px; +} +.toggle-table__title{ + font-weight: 700; + font-size: 12px; + line-height: 133%; +} +.toggle-table__item p{ + font-weight: 500; + font-size: 12px; + line-height: 133%; +} +.toggle-table-item__line{ + margin-top: 12px; +} +.detail{ + margin: 24px 16px; +} +.back-detail{ + display: inline; +} +.detail-catalot__title{ + font-size: 22px; +} +.product__footer--error{ + margin: 48px 0px 24px; +} +/* product */ + +/* modal */ +.modal{ + padding: 0; +} +.modal__text{ + padding-right: 0; +} +.form__button-pc{ + display: none; +} +.form__button-mobile{ + display: block; +} +.modal-form{ + /* min-height: 100%; + width: 100%; + + border-radius: 0; + border: none; */ +} +.modal__notification{ + margin: 24px; +} +.form-input-phone__list{ + left: 0; +} + +.modal-form-content__line--two{ + flex-wrap: wrap; +} +.modal-form-content__line--two .modal-form-content-line__element{ + margin-top: 24px; + + width: 100%; +} +.modal-form-content__line--two .modal-form-content-line__element:first-child{ + margin-top: 0; +} +.modal-map{ + width: 100%; + + flex-direction: column; + + border-radius: 0; +} +.modal-map__left, .modal-map__right{ + width: 100%; +} +.modal-map__map iframe { + width: 100%; + height: 528px; +} +.modal-map-form__button{ + display: none; +} +.modal-map-form__sub-button{ + margin-top: 64px; + + padding: 0 24px; + + display: flex; + } +/* modal */ + +/* cabinet */ +.cabinet{ + flex-direction: column; + + position: relative; +} +.cabinet__control{ + display: flex; + + position: relative; +} +.cabinet__orders, .cabinet__profile{ + width: calc(100% - 48px); +} +.cabinet__orders, .cabinet__profile{ + position: absolute; + opacity: 0; + + transition: opacity .2s ease-out; +} +.cabinet-content{ + pointer-events:none; +} +.cabinet__orders.active, .cabinet__profile.active{ + opacity: 1; +} +.cabinet__orders.hide, .cabinet__profile.hide{ + position: static; + display: block; + pointer-events:auto; + + width: 100%; +} +.cabinet__subscription-pc{ + display: none; +} +.cabinet__subscription-mobile{ + display: block; + + margin: 24px 24px 0 24px; +} +.cabinet__orders .cabinet-card:nth-child(2){ + margin-top: 0; + } +/* cabinet */ +} + +@media only screen and (max-width: 980px) { +/* product */ +.product__item{ + width: calc(50% - 24px); +} +/* product */ + + +/* detail */ +.detail{ + flex-direction: column; +} +.detail__images{ + display: none; +} +.detail__content{ + width: 100%; +} +.detail__content{ + margin-left: 0; +} + +.detail__images-phone{ + display: block; + + margin-top: 48px; + margin-bottom: 48px; + + position: relative; + + overflow: hidden; +} +.detail__images-phone .swiper-slide{ + display: flex; + justify-content: center; +} +.detail-images-phone__image-block{ + width: 100%; + aspect-ratio: 1; + max-width: 500px; + + display: flex; + justify-content: center; + align-items: center; + + background: var(--background-grey); + border-radius: 16px; +} + +.detail__images-phone .swiper-pagination-bullet{ + width: 8px; + height: 8px; + + border-radius: 50%; + + border: 1px solid #666; + background-color: #666; + + opacity: 1; +} +.detail__images-phone .swiper-pagination-bullet.swiper-pagination-bullet-active{ + background-color: var(--background-white); +} + +.detail__images-phone .swiper-pagination{ + margin-bottom: 19px; +} +.detail__title{ + font-size: 26px; + line-height: 123%; +} +.gallery__slider .swiper-pagination { + display: block; +} +.gallery__pagination{ + display: none; +} + +.gallery__slider .swiper-pagination-bullet{ + width: 8px; + height: 8px; + border-radius: 50%; + border: 1px solid #666; + background-color: #666; + opacity: 1; +} +.gallery__wrapper .gallery-button{ + display: none; +} + +.gallery__slider .swiper-pagination-bullet.swiper-pagination-bullet-active{ + background-color: var(--background-white); +} + +.gallery__slider{ + margin-left:0; + padding: 0px 0px 50px 0px; + /* padding: 40px; */ +} +.gallery__block { + width: 100%; + aspect-ratio: 1; + height: auto; +} +/* detail */ +} + +@media only screen and (max-width: 750px) { +/* cabinet */ +.cabinet-card-order__open-detail{ + margin-top: 144px; +} +.cabinet-card-order__detail-short{ + right: auto; + left: 0; + bottom: 48px; +} +.cabinet-card-order-detail-short__item{ + margin-left: -27px; +} +.cabinet-card-order-detail-short__item:first-child{ + margin-left: 0; +} +.cabinet-card__order.active .cabinet-card-order__open-detail{ + margin-top: 24px; +} +/* cabinet */ +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-ultra.css b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-ultra.css new file mode 100644 index 0000000..c149baa --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-ultra.css @@ -0,0 +1,4 @@ +/* Стили для ультрашироких экранов */ +@media only screen and (min-width: 1400px) { + +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff new file mode 100644 index 0000000..e06b43d Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff2 b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff2 new file mode 100644 index 0000000..a1a3337 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff2 differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff new file mode 100644 index 0000000..d922e47 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2 b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2 new file mode 100644 index 0000000..0e03542 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2 differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff new file mode 100644 index 0000000..cae3279 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2 b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2 new file mode 100644 index 0000000..5bcac6c Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2 differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff new file mode 100644 index 0000000..a3b3cb0 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2 b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2 new file mode 100644 index 0000000..a28684e Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2 differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-bold.ttf b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-bold.ttf new file mode 100644 index 0000000..2068cf4 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-bold.ttf differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-medium.ttf b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-medium.ttf new file mode 100644 index 0000000..5006ac0 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-medium.ttf differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-regular.ttf b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-regular.ttf new file mode 100644 index 0000000..ef2dbf4 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-regular.ttf differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf new file mode 100644 index 0000000..e866547 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-demi.ttf b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-demi.ttf new file mode 100644 index 0000000..02f3aa3 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-demi.ttf differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-demi.woff b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-demi.woff new file mode 100644 index 0000000..7e32bd6 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-demi.woff differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-demi.woff2 b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-demi.woff2 new file mode 100644 index 0000000..2659c5e Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-demi.woff2 differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-regular.ttf b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-regular.ttf new file mode 100644 index 0000000..ef964ec Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-regular.ttf differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-regular.woff b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-regular.woff new file mode 100644 index 0000000..ed3b1ac Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-regular.woff differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-regular.woff2 b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-regular.woff2 new file mode 100644 index 0000000..cb6110c Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/din-2014/din-2014-rounded-regular.woff2 differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Medium.woff b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Medium.woff new file mode 100644 index 0000000..561ec78 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Medium.woff differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Medium.woff2 b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Medium.woff2 new file mode 100644 index 0000000..3e9c1c7 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Medium.woff2 differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Regular.woff b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Regular.woff new file mode 100644 index 0000000..bf7bb7c Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Regular.woff differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Regular.woff2 b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Regular.woff2 new file mode 100644 index 0000000..3374d82 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/Roboto-Regular.woff2 differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/roboto-medium.ttf b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/roboto-medium.ttf new file mode 100644 index 0000000..8798341 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/roboto-medium.ttf differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/roboto-regular.ttf b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/roboto-regular.ttf new file mode 100644 index 0000000..7d9a6c4 Binary files /dev/null and b/wp-content/themes/cosmopet/woocommerce/assets/fonts/roboto/roboto-regular.ttf differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/country/ar.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/country/ar.svg new file mode 100644 index 0000000..4e3a7b3 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/country/ar.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/country/ru.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/country/ru.svg new file mode 100644 index 0000000..fc991dd --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/country/ru.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/logo/logo-black.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/logo/logo-black.svg new file mode 100644 index 0000000..4cd0135 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/logo/logo-black.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/logo/logo-gradient.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/logo/logo-gradient.svg new file mode 100644 index 0000000..9054fde --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/logo/logo-gradient.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/logo/logo-white.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/logo/logo-white.svg new file mode 100644 index 0000000..22c4489 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/logo/logo-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-back.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-back.svg new file mode 100644 index 0000000..a977e53 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-back.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-black.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-black.svg new file mode 100644 index 0000000..38fe433 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-breadcrumbs-black.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-breadcrumbs-black.svg new file mode 100644 index 0000000..88fd149 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-breadcrumbs-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-breadcrumbs.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-breadcrumbs.svg new file mode 100644 index 0000000..f1f9618 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-breadcrumbs.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-left.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-left.svg new file mode 100644 index 0000000..465c268 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-right-input.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-right-input.svg new file mode 100644 index 0000000..a101dd0 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-right-input.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-right.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-right.svg new file mode 100644 index 0000000..8952470 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-selected-white.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-selected-white.svg new file mode 100644 index 0000000..bb7e90b --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-selected-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-selected.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-selected.svg new file mode 100644 index 0000000..fb283a7 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-selected.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/basket.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/basket.svg new file mode 100644 index 0000000..6c08b40 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/basket.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/black-x.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/black-x.svg new file mode 100644 index 0000000..cb3041d --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/black-x.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/change-dot.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/change-dot.svg new file mode 100644 index 0000000..f38b6c9 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/change-dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/filter.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/filter.svg new file mode 100644 index 0000000..efa46c8 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/filter.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/google-white.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/google-white.svg new file mode 100644 index 0000000..4040621 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/google-white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/gradient-x.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/gradient-x.svg new file mode 100644 index 0000000..3a19e1f --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/gradient-x.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/minus.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/minus.svg new file mode 100644 index 0000000..77109fe --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/minus.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/plus-grey.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/plus-grey.svg new file mode 100644 index 0000000..6fa9039 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/plus-grey.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/plus.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/plus.svg new file mode 100644 index 0000000..a9db939 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/plus.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/question.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/question.svg new file mode 100644 index 0000000..2e21e7b --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/question.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/status-cancelled.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/status-cancelled.svg new file mode 100644 index 0000000..f96648a --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/status-cancelled.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/status-chek.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/status-chek.svg new file mode 100644 index 0000000..836d49b --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/status-chek.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/triangle-grey.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/triangle-grey.svg new file mode 100644 index 0000000..23ede66 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/triangle-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/vk-white.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/vk-white.svg new file mode 100644 index 0000000..556d386 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/vk-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/white-x.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/white-x.svg new file mode 100644 index 0000000..3697346 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/white-x.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/ya-white.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/ya-white.svg new file mode 100644 index 0000000..a6b4ece --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/ya-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/basket-w.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/basket-w.svg new file mode 100644 index 0000000..55eb29f --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/basket-w.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/basket.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/basket.svg new file mode 100644 index 0000000..fdf6bf8 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/basket.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/profile-w.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/profile-w.svg new file mode 100644 index 0000000..442e587 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/profile-w.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/profile.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/profile.svg new file mode 100644 index 0000000..6a48c34 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/mini-profile/profile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/social-media/tg.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/social-media/tg.svg new file mode 100644 index 0000000..332942a --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/social-media/tg.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/social-media/vk.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/social-media/vk.svg new file mode 100644 index 0000000..ef5cadf --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/social-media/vk.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/social-media/ya.svg b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/social-media/ya.svg new file mode 100644 index 0000000..055175d --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/img/svg/social-media/ya.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/js/_gp-function.js b/wp-content/themes/cosmopet/woocommerce/assets/js/_gp-function.js new file mode 100644 index 0000000..ed4d7ab --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/js/_gp-function.js @@ -0,0 +1,156 @@ +'use strict'; + +// function +export function modalOpen(buttonElement, contentElement){ + let modal = document.querySelector('.modal'), + aside = document.querySelector('.modal__aside'), + elements = document.querySelectorAll(buttonElement), + device = window.screen.width; + + elements.forEach(e => { + let thisContentElement = document.querySelector(contentElement); + + e.onclick = function () { + modal.classList.add('active'); + thisContentElement.classList.add('active'); + + let width = thisContentElement.clientWidth; + + setTimeout(() => { + if (device <= 720) { + aside.style.width = `${device}px`; + thisContentElement.style.opacity = 1; + thisContentElement.style.filter = 'blur(0px)'; + }else{ + aside.style.width = `${width}px`; + thisContentElement.style.opacity = 1; + thisContentElement.style.filter = 'blur(0px)'; + } + }, 10); + } + }) +} + +export function modalClose(buttonElement) { + let modal = document.querySelector('.modal'), + aside = document.querySelector('.modal__aside'), + asideItems = document.querySelectorAll('.modal__item'), + elements = document.querySelectorAll(buttonElement); + + elements.forEach(e => { + e.onclick = function () { + aside.style.width = '0px'; + + asideItems.forEach(e => { + if (e.classList.contains('active')) { + e.style.filter = 'blur(10px)'; + } + }); + + setTimeout(() => { + asideItems.forEach(e => { + if (e.classList.contains('active')) { + e.classList.remove('active'); + } + }); + + modal.classList.remove('active'); + }, 300); + } + }) +} + +export function closeModalForm(close){ + let buttons = document.querySelectorAll(close), + modal = document.querySelector('.modal'); + + buttons.forEach(button => { + button.onclick = function (buttonEvent) { + modal.classList.remove('active'); + + if (!modal.querySelector('.modal-map.active')) { + modal.querySelector('.modal-form.active').classList.remove('active'); + }else{ + modal.querySelector('.modal-map.active').classList.remove('active'); + } + } + }) +} + +export function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { + let elements = document.querySelectorAll(mainElement); + + elements.forEach(e => { + let thisMainElement = e, + thisButtonElement = e.querySelector(buttonElement), + thisHeightElement = e.querySelector(heightElement), + thisContentElement = e.querySelector(contentElement); + + thisButtonElement.onclick = function (e) { + let height = thisHeightElement.clientHeight; + + if (close == true && !thisMainElement.classList.contains('active')) { + elements.forEach(e => { + if (e.classList.contains('active')) { + e.classList.remove('active'); + e.querySelector(contentElement).style.height = null + } + }) + } + + if (!thisMainElement.classList.contains('active')) { + thisContentElement.style.height = `${height}px`; + thisMainElement.classList.add('active'); + }else{ + thisContentElement.style.height = null; + thisMainElement.classList.remove('active'); + } + } + + }); +} + +export function toggleHeader(button, content, blockheight, removeBlock, removeClass) { + let thisButton = document.querySelector(button), + thisContent = document.querySelector(content), + thisRemoveBlock = document.querySelector(removeBlock) || '', + thisBlockheight = document.querySelector(blockheight); + + thisButton.onclick = function () { + let height = thisBlockheight.clientHeight; + + if (!thisContent.classList .contains('open')) { + thisContent.style.height = `${height}px`; + thisContent.classList .add('open'); + + if (removeBlock) { + thisRemoveBlock.classList.remove(removeClass); + } + }else{ + thisContent.style.height = null; + thisContent.classList .remove('open'); + + if (removeBlock) { + if (window.scrollY <= 25) { + thisRemoveBlock.classList.add(removeClass); + } + } + } + } +} + +export function modalFormOpen(formOrNotification) { + let buttons = document.querySelectorAll(formOrNotification), + modal = document.querySelector('.modal'); + + buttons.forEach(button => { + button.onclick = function (eventButton) { + let classOpenForm = button.dataset.form, + form = modal.querySelector(`.${classOpenForm}`); + + form.classList.add('active'); + modal.classList.add('active'); + } + }) +} +// function \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/assets/js/core.js b/wp-content/themes/cosmopet/woocommerce/assets/js/core.js new file mode 100644 index 0000000..d515cbb --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/js/core.js @@ -0,0 +1,110 @@ +'use strict'; + +// slider gallery modal +const gallery = new Swiper('.gallery__slider', { + spaceBetween: 100, + + pagination: { + el: '.swiper-pagination', + }, + + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + + scrollbar: { + el: '.swiper-scrollbar', + }, +}); + +let paginationButtons = document.querySelectorAll('.gallery-pagination__item'); + +paginationButtons.forEach(button => { + let index = button.dataset.countImg; + + button.onclick = function () { + gallery.slideTo(index); + } +}) + +// open gallery +let detailImage= document.querySelectorAll('.detail__image'); +detailImage.forEach(button => { + let index = button.dataset.countImg; + + button.onclick = function () { + gallery.slideTo(index); + + document.querySelector('.gallery').classList.add('active'); + } +}) + +// close gallery + +document.querySelector('.gallery__close').onclick = function () { + document.querySelector('.gallery').classList.remove('active'); +} +// slider gallery modal + +// slider gallery main phone + +// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980); + +const detailPhone = new Swiper('.detail__images-phone', { + spaceBetween: 100, + + pagination: { + el: '.swiper-pagination', + }, + + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + + scrollbar: { + el: '.swiper-scrollbar', + }, +}); + +let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block'); + +detailImagesPhones.forEach(button => { + button.onclick = function (e) { + let index = button.dataset.countImg; + + gallery.slideTo(index); + + document.querySelector('.gallery').classList.add('active'); + } +}) + +// slider gallery main phone + +// detail catalog +const detailCatalot = new Swiper('.detail__catalot', { + // Navigation arrows + navigation: { + nextEl: '.detail-catalot-control__button.next', + prevEl: '.detail-catalot-control__button.prev', + }, + breakpoints: { + 1600: { + slidesPerView: 4, + }, + 1200: { + slidesPerView: 3, + }, + 780: { + slidesPerView: 2, + }, + 100: { + slidesPerView: 1.1, + spaceBetween: 20 + }, + } + + +}); +// detail catalog \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/assets/js/gp-cabinet.js b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-cabinet.js new file mode 100644 index 0000000..d8a5111 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-cabinet.js @@ -0,0 +1,67 @@ +'use strict'; + +import * as fun from './_gp-function.js'; + +let widthPhoneCabinet = 1200; + +fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail'); +fun.modalFormOpen('.form-open'); + +fun.closeModalForm('.modal-form__close'); +fun.closeModalForm('.modal-form__button-close'); + +controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet); + +function controlCabinet(buttons, main, minWidth){ + let thisWidth = window.innerWidth; + let thisMain = document.querySelector(main); + + let thisButtons = document.querySelectorAll(buttons); + + thisButtons.forEach(e => { + e.onclick = function (element){ + let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`); + let newHeight = thisContent.clientHeight + 48; + let thisButton = element.target; + + thisMain.style.height = `${newHeight}px` + + if (!thisContent.classList.contains('active')) { + thisMain.querySelector('.active').classList.remove('active'); + thisContent.classList.add('active'); + + setTimeout(() => { + thisMain.style.height = 'auto'; + + if (thisMain.querySelector('.hide')) { + thisMain.querySelector('.hide').classList.remove('hide'); + } + + thisMain.querySelector('.active').classList.add('hide'); + }, 200); + } + + thisButtons.forEach(e => { + e.classList.remove('active'); + }) + thisButton.classList.add('active'); + } + }) + +} + +let modal = document.querySelector('.modal'); +modal.onclick = function (eventModal) { + let thisTarget = eventModal.target; + + if (thisTarget.classList.contains('modal')) { + thisTarget.classList.remove('active'); + + if (!thisTarget.querySelector('.modal-map.active')) { + thisTarget.querySelector('.modal-form.active').classList.remove('active'); + }else{ + thisTarget.querySelector('.modal-map.active').classList.remove('active'); + } + } +} + diff --git a/wp-content/themes/cosmopet/woocommerce/assets/js/gp-form.js b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-form.js new file mode 100644 index 0000000..9bfcdd9 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-form.js @@ -0,0 +1,284 @@ +'use strict'; + + +inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search'); + +function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) { + let inputs = document.querySelectorAll(main); + + inputs.forEach(e => { + let thisMainFlag = e.querySelector(mainFlag), + thisMainCode = e.querySelector(mainCode), + thisInput = e.querySelector(input), + thisList = e.querySelector(list), + thisSelects = e.querySelectorAll(`.${selects}`), + thisSearchInput = e.querySelector(`.${searchInput}`); + + thisInput.onblur = function (input) { + if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) { + thisList.classList.remove('active'); + } + } + + e.onclick = function (event) { + if (!event.target.classList.contains(searchInput)) { + if (thisList.classList.contains('active')) { + thisList.classList.remove('active'); + } + + thisInput.focus(); + thisList.classList.add('active'); + } + } + + thisSelects.forEach(e => { + let newIcon = e.querySelector(selectIcon), + newCode = e.querySelector(selectCode); + + e.onclick = function (event) { + event.preventDefault(); + thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`; + thisMainCode.textContent = newCode.textContent; + + + setTimeout(() => { + thisList.classList.remove('active'); + }, 0); + } + + }) + }) +} + +if (document.querySelector('.form-input-phone__input')) { + checkPhone('.form-input-phone__input'); +} + +function checkPhone(input) { + document.querySelector(input).addEventListener('input', function(event) { + let text = event.target.value; + let length = text.length; + let newSymbol = event.data; + + if (!(/^\d+$/.test(text.replaceAll(' ', '')))) { + event.target.value = text.slice(0, -1); + return; + } + + if (length == 4 || length == 8) { + if (newSymbol != null) { + event.target.value = text.slice(0, -1) + ' ' + newSymbol; + } + } + }) +} + +inputTabs('.form-input__tabs', '.form-input-tabs__button'); +inputTabs('.modal-map__control', '.modal-map-control__item'); + +function inputTabs(main, button) { + let mains = document.querySelectorAll(main); + + mains.forEach(main => { + let buttons = main.querySelectorAll(button); + + buttons.forEach(button => { + button.onclick = function () { + if (button.classList.contains('active')) { + return ; + } + + main.querySelector('.active').classList.remove('active'); + + button.classList.add('active'); + + button.querySelector('input').click(); + } + }) + + }) +} + + +inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input') + +function inputRadio(main ,item, textClass, input) { + let inputRadios = document.querySelectorAll(main); + + inputRadios.forEach(inputRadio => { + let items = inputRadio.querySelectorAll(item), + thisInput = inputRadio.querySelector(input); + + items.forEach(radio => { + let thisText = radio.querySelector(textClass).textContent; + + radio.onclick = function (event) { + event.preventDefault(); + + if (inputRadio.querySelector(`${item}.active`)) { + inputRadio.querySelector(`${item}.active`).classList.remove('active'); + } + thisInput.value = thisText; + radio.classList.add('active'); + } + }) + }) +} + +listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content'); + +function listInputRadio(main ,item, textClass, input, content, block) { + let listInputRadios = document.querySelectorAll(main); + + listInputRadios.forEach(listInputRadio => { + let thisInput = listInputRadio.querySelector(input), + items = listInputRadio.querySelectorAll(item), + thisContent = listInputRadio.querySelector(content), + thisBlock = listInputRadio.querySelector(block); + + thisInput.onclick = function () { + thisBlock.classList.add('active'); + thisBlock.style.height = '192px'; + } + + + thisInput.onblur = function(){ + thisBlock.classList.remove('active'); + thisBlock.style.height = '0px'; + }; + + items.forEach(item => { + item.onclick = function (event) { + event.preventDefault(); + let newText = item.querySelector(textClass).textContent; + + thisInput.value = newText; + + if (thisContent.querySelector('.active')) { + thisContent.querySelector('.active').classList.remove('active'); + } + + item.classList.add('active'); + } + }) + }) +} + +remoteControl('.form-input__remote-control', '.form-input-tabs__button'); +remoteControl('.modal-map__control', '.modal-map-control__item'); + +function remoteControl(main, button) { + let mains = document.querySelectorAll(main); + + mains.forEach(main => { + let subjectClass = main.dataset.content, + subject = document.querySelector(`.${subjectClass}`), + buttons = Array.from(main.querySelectorAll(button)); + + main.addEventListener('click', function (eventMain) { + setTimeout(() => { + let indexActive = buttons.findIndex((button, index) => { + if (button.classList.contains('active')) { + return true; + } + }); + if(subject.children[indexActive].classList.contains('active')){ + return ; + } + + subject.querySelector('.remote-control__item.active').classList.remove('active'); + subject.children[indexActive].classList.add('active'); + + let mandatorys = subject.querySelectorAll('.mandatory'); + + mandatorys.forEach(mandatory => { + if (mandatory.required) { + mandatory.required = false; + }else{ + mandatory.required = true; + } + }) + }, 0); + }) + }) +} + +formCheck('.modal-form__content', 'input[type=submit]'); +formCheck('.modal-map__form', 'input[type=submit]'); + +function formCheck(form, submit) { + let forms = document.querySelectorAll(form); + + forms.forEach(form => { + let thisSubmit = form.querySelector(submit); + + thisSubmit.onclick = function () { + form.classList.add('check') + } + + }) +} + +inputPhoneNoFlag('.no-flag'); + +function inputPhoneNoFlag(input){ + let inputs = document.querySelectorAll(input); + + inputs.forEach(input => { + let code = '+' + input.dataset.code; + + input.onfocus = function () { + if (input.value == '') { + input.value = code; + } + } + + input.addEventListener('input', function(event) { + let text = event.target.value; + let length = text.length; + let newSymbol = event.data; + + if (isNaN(event.data) || event.data == ' ') { + event.target.value = text.slice(0, -1); + return; + } + + if (length == 3 || length == 7 || length == 11) { + if (newSymbol != null) { + event.target.value = text.slice(0, -1) + ' ' + newSymbol; + } + } + + }) + }) +} + + +inputCheck('.form-agreement__check'); + +function inputCheck(className) { + let checks = document.querySelectorAll(className); + + checks.forEach(check => { + let square = check.querySelector('.form-agreement__square'), + input = check.querySelector('input'); + + square.onclick = function () { + input.click(); + } + }) +} + + +inputRead('.input-read'); +function inputRead(className) { + let inputs = document.querySelectorAll(className); + + inputs.forEach(input => { + input.addEventListener("input", function (event) { + let text = event.target.value; + + event.target.value = text.slice(0, -1); + }) + }) +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js new file mode 100644 index 0000000..477626e --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js @@ -0,0 +1,480 @@ +'use strict'; + +jQuery(document).ready(function ($) { + // OVERLAY + $('.product__main').on('click', '.open-overlay', function () { + let product = $(this).closest('.product__item'), + overlay = product.find('.product-item__overlay'); + + $('.product__item').find('.product-item__overlay').css('top', '100%'); + overlay.css('top', 0); + }) + // END OVERLAY + + $('.product__main').on('click', '.state__button', function(evt) { + evt.preventDefault(); + let product = $(this).closest('.product__item'); + let price = $(this).data('product_price'); + let id = $(this).data('product_id'); + let qty = product.find('.counter__input').val(); + product.find('.product-item-overlay__price').html(price * qty + ' '); + product.find('.select__state').data('product_price', price).data('product_id', id).val($(this).text().trim()); + product.find('.state__block').removeClass('expanded').css('height', '0'); + + product.find('.add_to_cart_button').detach(); + product.find('.product-item-overlay__button').prepend('Добавить в корзину'); + }) + + $('.product__main').on('click', '.counter__button', function(evt) { + evt.preventDefault(); + let product = $(this).closest('.product__item'); + let price = parseFloat(product.find('.select__state').data('product_price')); + let qty = product.find('.counter__input'); + + if ($(this).hasClass('minus') && parseInt(qty.val()) >= 2) { + qty.val(parseInt(qty.val()) - 1); + } else { + if ($(this).hasClass('plus')) { + qty.val(parseInt(qty.val()) + 1); + } + } + + product.find('.product-item-overlay__price').html(price * qty.val() + ' '); + }) + + $('.product__main').on('click', '.select__state', function(evt) { + evt.preventDefault(); + let product = $(this).closest('.product__item'), + listing = product.find('.state__block'); + + if (listing.hasClass('expanded')) { + listing.removeClass('expanded').css('height', '0'); + } else { + listing.addClass('expanded').css('height', 'auto'); + } + + product.find('.state__block').find('.state__button').removeClass('active'); + product.find('.state__button').each(function () { + if (product.find('.select__state').data('product_id') === $(this).data('product_id')) { + $(this).addClass('active'); + } + }) + }) + + + let page = 1; + + jQuery('body').on('click', '#load-more-products', function(e) { + e.preventDefault(); + page++; + + let category = $(this).data('category_id'); + let category_type = $(this).data('category_type'); + + $.ajax({ + type: 'POST', + url: '/wp-admin/admin-ajax.php', + dataType: 'html', + data: { + 'action' : 'get_products', + 'get_page' : page, + 'get_category' : category, + 'get_category_type' : category_type, + }, + success: function(data) { + // if($('
').html(data).find('.archive__item.ended').size() > 0) $('#load-more-products').parents('.cta').remove(); + // else $('#load-more-products').parents('.cta').show(); + + $('#load-more-products').detach(); + $('.product__main').append(data); + $('#load-more-products').prependTo('.product__footer'); + }, + error: function(data) { + console.log(data); + } + }); + }); + + $('.wpfMainWrapper').prepend('
'); + $('.wpfMainWrapper').find('.wpfFilterWrapper').appendTo($('.wpfFilters')); + + $('.wpfFilterWrapper').each(function () { + if ($(this).data('filter-type') === 'wpfPrice') { + $(this).find('.wpfFilterContent').append('
'); + $(this).find('.wpfPriceFilterRange').appendTo('.wpfExpandablePart'); + $(this).find('.wpfPriceInputs').appendTo('.wpfExpandablePart'); + + $(this).find('.wpfCurrencySymbol').detach(); + $(this).find('.wpfFilterDelimeter').detach(); + } + }); + + $('.wfpDescription').on('click', function () { + $(this).closest('.wpfFilterWrapper').toggleClass('expanded').find('.wpfCheckboxHier').slideToggle(); + $(this).parent().find('.wpfExpandablePart').slideToggle(); + }) + + +}) + + + + + + + + +// header +toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false); +toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white'); +toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white'); +// header + +// modal +modalOpen('.button--filter', '.modal__filter'); +modalOpen('.basket-open', '.modal__basket'); +modalOpen('.open-to-know', '.modal__to-know'); +modalClose('.modal__close'); + +let modal = document.querySelector('.modal'); + +modal.onclick = function (event) { + let target = event.target; + + if (target.classList.contains('modal')) { + let aside = target.querySelector('.modal__aside'), + modalItem = target.querySelector('.modal__item.active'), + body = document.querySelector('body'); + + aside.style.width = '0px'; + body.classList.remove('overflow-hidden'); + setTimeout(() => { + modalItem.style.cssText = ''; + modalItem.classList.remove('active'); + target.classList.remove('active'); + }, 300); + } +} + +// modal + +// toggle +toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); +// toggle + +// radio-button +let radioButtons = document.querySelectorAll('.radio-button'); + +radioButtons.forEach(radioBlock => { + let buttons = radioBlock.querySelectorAll('.button'); + + buttons.forEach(button => { + let input = radioBlock.querySelector('.radio-button__input'); + + button.onclick = function (e) { + e.preventDefault(); + + buttons.forEach(thisButton => { + if (thisButton.classList.contains('active')) { + thisButton.classList.remove('active') + } + }) + + let text = button.textContent.trim(); + + button.classList.toggle('active'); + + input.value = text; + } + }) +}) +// radio-button + +// overlay +// let products = document.querySelectorAll('.product__item'); + +// products.forEach(productItem => { +// let button = productItem.querySelector('.open-overlay'), +// overlay = productItem.querySelector('.product-item__overlay'); + + +// if (button) { +// button.onclick = function (e) { +// document.querySelectorAll('.product__item').forEach(e => { +// if (e.classList.contains('active')) { +// e.classList.remove('active'); +// } +// }); +// document.querySelectorAll('.product-item__overlay').forEach(e => { +// if (e.classList.contains('active')) { +// e.classList.remove('active'); +// } +// }); + +// productItem.classList.toggle('active'); +// overlay.classList.toggle('active'); +// } +// } + +// }) +// overlay + + +// select +// toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true); + +// let selects = document.querySelectorAll('.select'); + +// selects.forEach(select => { +// let state = select.querySelector('.select__state'), +// content = select.querySelector('.state__block'), +// buttons = select.querySelectorAll('.state__button'); + +// buttons.forEach(e => { +// let button = e; + +// e.onclick = function (event) { +// event.preventDefault(); + +// buttons.forEach(element => { +// if (element.classList.contains('active')) { +// element.classList.remove('active'); +// } +// }) + +// let text = e.textContent.trim(); +// state.value = text; + +// button.classList.add('active'); +// content.style.height = 0; +// select.classList.remove('active'); +// } +// }) +// }) + + +// select + +// counter +// let counters = document.querySelectorAll('.counter'); + +// counters.forEach(e => { +// let minus = e.querySelector('.minus'), +// plus = e.querySelector('.plus'), +// input = e.querySelector('.counter__input'); + +// minus.onclick = function (e) { +// e.preventDefault(); + +// let number = input.value; + +// if (number >= 2){ +// input.value = Number(number) - 1; +// } +// } + +// plus.onclick = function (e) { +// e.preventDefault(); + +// let number = input.value; + +// if (number <= 99) { +// input.value = Number(number) + 1; +// } +// } +// }) +// counter + +// checkbox +let checkbox = document.querySelectorAll('.checkbox'); + +checkbox.forEach(e => { + e.onclick = function (event) { + let input = e.querySelector('.checkbox__input'); + + if (!e.classList.contains('active')) { + input.checked = 1; + }else{ + input.checked = 0; + } + e.classList.toggle('active'); + } +}) +// checkbox + + +// function +function modalOpen(buttonElement, contentElement){ + let modal = document.querySelector('.modal'), + aside = document.querySelector('.modal__aside'), + elements = document.querySelectorAll(buttonElement), + device = window.screen.width, + body = document.querySelector('body'); + + elements.forEach(e => { + let thisContentElement = document.querySelector(contentElement); + + e.onclick = function () { + body.classList.add('overflow-hidden'); + modal.classList.add('active'); + thisContentElement.classList.add('active'); + + let width = thisContentElement.clientWidth; + + setTimeout(() => { + if (device <= 720) { + aside.style.width = `${device}px`; + thisContentElement.style.opacity = 1; + thisContentElement.style.filter = 'blur(0px)'; + }else{ + aside.style.width = `${width}px`; + thisContentElement.style.opacity = 1; + thisContentElement.style.filter = 'blur(0px)'; + } + }, 10); + } + }) +} + +function modalClose(buttonElement) { + let modal = document.querySelector('.modal'), + aside = document.querySelector('.modal__aside'), + asideItems = document.querySelectorAll('.modal__item'), + elements = document.querySelectorAll(buttonElement), + body = document.querySelector('body'); + + elements.forEach(e => { + e.onclick = function () { + body.classList.remove('overflow-hidden'); + aside.style.width = '0px'; + + asideItems.forEach(e => { + if (e.classList.contains('active')) { + e.style.filter = 'blur(10px)'; + } + }); + + setTimeout(() => { + asideItems.forEach(e => { + if (e.classList.contains('active')) { + e.classList.remove('active'); + } + }); + + modal.classList.remove('active'); + }, 300); + } + }) +} + +function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { + let elements = document.querySelectorAll(mainElement); + + elements.forEach(e => { + let thisMainElement = e, + thisButtonElement = e.querySelector(buttonElement), + thisHeightElement = e.querySelector(heightElement), + thisContentElement = e.querySelector(contentElement); + + thisButtonElement.onclick = function (e) { + let height = thisHeightElement.clientHeight; + + if (close == true && !thisMainElement.classList.contains('active')) { + elements.forEach(e => { + if (e.classList.contains('active')) { + e.classList.remove('active'); + e.querySelector(contentElement).style.height = null + } + }) + } + + if (!thisMainElement.classList.contains('active')) { + thisContentElement.style.height = `${height}px`; + thisMainElement.classList.add('active'); + }else{ + thisContentElement.style.height = null; + thisMainElement.classList.remove('active'); + } + } + + }); +} + +function toggleHeader(button, content, blockheight, removeBlock, removeClass) { + let thisButton = document.querySelector(button), + thisContent = document.querySelector(content), + thisRemoveBlock = document.querySelector(removeBlock) || '', + thisBlockheight = document.querySelector(blockheight); + + thisButton.onclick = function () { + let height = thisBlockheight.clientHeight; + + if (!thisContent.classList .contains('open')) { + thisContent.style.height = `${height}px`; + thisContent.classList .add('open'); + + if (removeBlock) { + thisRemoveBlock.classList.remove(removeClass); + } + }else{ + thisContent.style.height = null; + thisContent.classList .remove('open'); + + if (removeBlock) { + if (window.scrollY <= 25) { + thisRemoveBlock.classList.add(removeClass); + } + } + } + } +} +// function + +// resize +window.addEventListener('resize', (e) => { + let width = window.screen.width; + + // media + modalOpen('.button--filter', '.modal__filter'); + modalOpen('.basket-open', '.modal__basket'); + modalOpen('.open-to-know', '.modal__to-know'); + modalClose('.modal__close'); + + let modalItem = document.querySelectorAll('.modal__item'); + + // if (width <= 720) { + modalItem.forEach(modal => { + if (modal.classList.contains('active')) { + let aside = document.querySelector('.modal__aside'); + + if (width <= 720) { + aside.style.width = `${width}px` + }else{ + let openAside = document.querySelector('.modal__item.active'), + newWidth = openAside.clientWidth; + + aside.style.width = `${newWidth}px` + } + } + }) + // } +}); +// resize + +// scroll + + +if (document.querySelector('.header').classList.contains('white')) { + window.addEventListener("scroll", function (e) { + let header = document.querySelector('.header'); + let scroll = window.scrollY; + + if (scroll >= 25) { + header.classList.remove('white') + }else{ + header.classList.add('white') + } + + }); +} +// scroll diff --git a/wp-content/themes/cosmopet/woocommerce/assets/js/gp-product.js b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-product.js new file mode 100644 index 0000000..2508270 --- /dev/null +++ b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-product.js @@ -0,0 +1,110 @@ +'use strict'; + +// slider gallery modal +const gallery = new Swiper('.gallery__slider', { + spaceBetween: 100, + + pagination: { + el: '.swiper-pagination', + }, + + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + + scrollbar: { + el: '.swiper-scrollbar', + }, +}); + +let paginationButtons = document.querySelectorAll('.gallery-pagination__item'); + +paginationButtons.forEach(button => { + let index = button.dataset.countImg; + + button.onclick = function () { + gallery.slideTo(index); + } +}) + +// open gallery +let detailImage= document.querySelectorAll('.detail__image'); +detailImage.forEach(button => { + let index = button.dataset.countImg; + + button.onclick = function () { + gallery.slideTo(index); + + document.querySelector('.gallery').classList.add('active'); + } +}) + +// close gallery + +document.querySelector('.gallery__close').onclick = function () { + document.querySelector('.gallery').classList.remove('active'); +} +// slider gallery modal + +// slider gallery main phone + +// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980); + +const detailPhone = new Swiper('.detail__images-phone', { + spaceBetween: 100, + + pagination: { + el: '.swiper-pagination', + }, + + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + + scrollbar: { + el: '.swiper-scrollbar', + }, +}); + +let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block'); + +detailImagesPhones.forEach(button => { + button.onclick = function (e) { + let index = button.dataset.countImg; + + gallery.slideTo(index); + + document.querySelector('.gallery').classList.add('active'); + } +}) + +// slider gallery main phone + +// detail catalog +const detailCatalot = new Swiper('.detail__catalot', { + // Navigation arrows + navigation: { + nextEl: '.detail-catalot-control__button.next', + prevEl: '.detail-catalot-control__button.prev', + }, + breakpoints: { + 1600: { + slidesPerView: 4, + }, + 1200: { + slidesPerView: 3, + }, + 780: { + slidesPerView: 2, + }, + 100: { + slidesPerView: 1.1, + spaceBetween: 20 + }, + } + + +}); +// detail catalog \ No newline at end of file