diff --git a/wp-content/themes/cosmopet/modules/layout/module-controller.php b/wp-content/themes/cosmopet/modules/layout/module-controller.php index b3510f8..f59beeb 100644 --- a/wp-content/themes/cosmopet/modules/layout/module-controller.php +++ b/wp-content/themes/cosmopet/modules/layout/module-controller.php @@ -1,5 +1,11 @@ { + 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%; + } +} + +.discount_top { + position: relative; +} + +.dicsount__body { + margin-top: 39px; +} + +.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; +} + +@media only screen and (max-width: 1170px) { + .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; + } +} +@media only screen and (max-width: 776px){ + + +} + +@media (max-width: 576px) { + /* Узнайте о нас больше и получите скидку! */ + .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; + } + + /* Узнайте о нас больше и получите скидку! - конец */ +} +@media (max-width: 540px) { + .discount { + margin-top: -50px; + } + .discount__sale { + border-radius: 24px; + } + + .discount_form .discount_form-btn { + opacity: 1!important; + } + +} + +/* Discount end */ + +@media (max-width: 576px){ + /* Узнайте о нас больше и получите скидку! */ + +.discount_block .discount_text { + font-size: 12px; + line-height: 14.2px; + } + .discount_block .discount_form .discount_form-inp{ + width: 100%; + } + + /* Узнайте о нас больше и получите скидку! - конец */ +} + +.discount_block{ + padding-bottom: 80px; +} diff --git a/wp-content/themes/cosmopet/static/css/front-page.css b/wp-content/themes/cosmopet/static/css/front-page.css index f18a63d..37a2f22 100644 --- a/wp-content/themes/cosmopet/static/css/front-page.css +++ b/wp-content/themes/cosmopet/static/css/front-page.css @@ -10,6 +10,7 @@ padding: 157px 30px 245px; position: relative; } + @media (min-width: 1281px){ .home .container{ @@ -307,103 +308,9 @@ .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); + /* GP | fix */ } -.sellers_card .sellers_card-text{ - font-size: 24px; - font-weight: 500; - line-height: 28.8px; - color: var(--grey-black, #121212); - -} -/* Sellers end */ /* Reviews start */ @@ -443,7 +350,6 @@ border-bottom: 2px solid var(--interface-main_black, rgba(18, 18, 18, 1)) gap: 23px; align-items: center; } - .reviews_items .reviews_item{ position: relative; display: flex; @@ -999,181 +905,7 @@ border-bottom: 2px solid var(--interface-main_black, rgba(18, 18, 18, 1)) .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; @@ -1193,7 +925,7 @@ input.truth-input{ font-size: 18px; } @media (max-width: 776px) { - .truth-form{ +.truth-form{ flex-direction: column; margin-bottom: 30px; } @@ -1320,6 +1052,7 @@ font-size: 12px; z-index: 40; pointer-events: none; } + @media (max-width: 640px) { .slider-arrows{ display: none; @@ -1328,6 +1061,7 @@ font-size: 12px; width: 330px; } } + .blogSlider .slider-arrows{ position: absolute; top: 50%; @@ -1359,6 +1093,7 @@ width: 330px; pointer-events: all; } + .slider-arrow[disabled]{ visibility: none; } @@ -1367,120 +1102,6 @@ width: 330px; 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{ @@ -1488,198 +1109,53 @@ justify-content: center; } } -.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); - margin-bottom: 6rem; +.blog_card-title { + font-size: 28px; + font-style: normal; + font-weight: 700; + line-height: 32px; } -.discount__sale .discount_title { - color: var(--interface-main_black, #121212); +.blog__card-btn { + margin-top: 24px; + color: #000; font-family: "Craftwork Grotesk"; - font-size: 82px; + font-size: 12px; font-style: normal; - font-weight: 700; + font-weight: 500; line-height: normal; - text-transform: uppercase; + 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; } -.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; + +.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; } -.discount__sale .discount_form { +.blog__row { display: flex; + justify-content: space-between; + align-items: center; } -.discount__sale .discount_form .discount_form-inp { - color: var(--interface-main_black, #121212); - border: 2px solid var(--interface-main_black, #121212); +.blog__row .blog_text { + max-width: 627px; } -.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 Grotesk"; - 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 Grotesk"; - 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 Grotesk"; - 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 { + position: relative; } .truth_top picture img { @@ -1833,6 +1309,7 @@ justify-content: center; line-height: 120%; } } + .home__subtitle { color: var(--interface-background, #F2F2F2); font-family: "Craftwork Grotesk"; @@ -2055,13 +1532,7 @@ justify-content: center; 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); @@ -2253,21 +1724,6 @@ justify-content: center; 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; @@ -2499,14 +1955,6 @@ justify-content: center; min-height: unset!important; } - .discount { - margin-top: -50px; - } - - .sellers { - padding-top: 35px; - } - .blogSlider .slider-arrows { display: none!important; } @@ -2523,18 +1971,6 @@ justify-content: center; right: -10px; } - .sellers { - padding-bottom: 120px!important; - } - - .discount__sale { - border-radius: 24px; - } - - .discount_form .discount_form-btn { - opacity: 1!important; - } - .blogosphere { padding-top: 40px; } @@ -2741,12 +2177,6 @@ justify-content: center; } -.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%; @@ -2755,35 +2185,16 @@ justify-content: center; .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; @@ -2791,12 +2202,12 @@ justify-content: center; } @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; -} + .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, @@ -2825,20 +2236,7 @@ justify-content: center; .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; @@ -2912,7 +2310,6 @@ justify-content: center; margin-top: -3px; z-index: -3; } - .reviews_item .reviews_item-top b { font-size: 20px; line-height: 22px; @@ -2929,12 +2326,6 @@ justify-content: center; { display: none; } - .sellers_slider .swiper { - width: 568px; - } - .sellers_card .sellers_card-img { - height: 260px; - } .slider-arrows { display: none; } @@ -3122,52 +2513,6 @@ justify-content: center; } /* 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; } @@ -3182,75 +2527,6 @@ justify-content: center; 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; @@ -3471,41 +2747,10 @@ text-align: left; 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; @@ -3642,94 +2887,6 @@ text-align: left; /* Наш блог - конец */ - /* Узнайте о нас больше и получите скидку! */ - .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; @@ -3888,99 +3045,6 @@ text-align: left; 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) { @@ -3989,17 +3053,6 @@ text-align: left; } } -.btn--black-hover:hover { - background: #121212 !important; - color: #F4F1F0 !important; - transition: .3s -} - -.btn--black-hover { - transition: .3s -} - - .reviews-plus{ background:none; } @@ -4027,23 +3080,6 @@ position:relative; display:flex; } - -.container-plus{ -max-width:1040px; -margin:0 auto; -} - - -.section-title { - font-weight: 500; -font-size: 82px; - width:50%; - line-height:1.2; - -text-transform: uppercase; -color: #f4f1f0; -} - .reviews-slider { padding: 20px; margin-top:20px; @@ -4278,270 +3314,7 @@ color: #f4f1f0; } -/* 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: var(--btn-color); - border-color: var(--btn-color); - 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 */ - -@media only screen and (max-width: 1170px) { - .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; - } - - -} - -@media (max-width: 576px){ - /* Узнайте о нас больше и получите скидку! */ - .discount { - padding: 0px 0 43px; - } - .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; - } - - .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_block .discount_text { - font-size: 12px; - line-height: 14.2px; - } - .discount_block .discount_form .discount_form-inp{ - width: 100%; - } - .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; - } - - /* Узнайте о нас больше и получите скидку! - конец */ -} - -.discount_block{ - padding-bottom: 80px; -} diff --git a/wp-content/themes/cosmopet/static/css/shop.css b/wp-content/themes/cosmopet/static/css/shop.css new file mode 100644 index 0000000..d5b63a1 --- /dev/null +++ b/wp-content/themes/cosmopet/static/css/shop.css @@ -0,0 +1,318 @@ +/* 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 */ + + +.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%; +} + + .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; +} + +.seller_bt{ + display: flex; + align-items: center; + gap: 12px; +} + +@media only screen and (max-width: 1170px) { + .sellers_slider .swiper { + padding-left: 0; + padding-right: 0; + } +} +@media only screen and (max-width: 950px){ + .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; + } +} + +@media only screen and (max-width: 776px){ + .sellers_slider .swiper { + width: 568px; + } + .sellers_card .sellers_card-img { + height: 260px; + } +/* 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 */ +} + +@media only screen and (max-width: 576px) { + .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; + } + + + .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; + } + .sellers { + position: relative; + padding-bottom: 87px; + } + + .sellers .sellers_link { + position: absolute; + bottom: 24px; + right: 22px; + } + + .seller_block .sellers_top { + gap: 0; + margin-bottom: 15px; + } +} + +@media (max-width: 540px) { + .sellers { + padding-top: 35px; + } + .sellers { + padding-bottom: 120px!important; + } + +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/static/css/style.css b/wp-content/themes/cosmopet/static/css/style.css new file mode 100644 index 0000000..b7254ae --- /dev/null +++ b/wp-content/themes/cosmopet/static/css/style.css @@ -0,0 +1,76 @@ +.no-scroll { + overflow: hidden; +} +.img--mobile{ + display: none; +} +.btn--black-hover:hover { + background: #121212 !important; + color: #F4F1F0 !important; + transition: .3s +} + +.btn--black-hover { + transition: .3s +} +.container-plus{ +max-width:1040px; +margin:0 auto; +} + + +.section-title { + font-weight: 500; +font-size: 82px; + width:50%; + line-height:1.2; + +text-transform: uppercase; +color: #f4f1f0; +} + +.show-more-btn { + background: none; + border: none; + color: #4a90e2; + cursor: pointer; + padding: 5px 0; + margin-top: 10px; + font-weight: 600; +} + +.show-more-btn:hover { + text-decoration: underline; +} +@media (max-width: 576px) { + /* 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; + } +} \ No newline at end of file