Andrei | рефакторинг проекта (почистил front-page.css, вынес лишние стили в другие файлы по логике блоков)

wp-content/themes/cosmopet/modules/layout/module-controller.php

@@ -1,5 +1,11 @@
 <?php
 
+function global_enqueue_scripts() {
+    
+    wp_enqueue_style('gp-global-style', get_template_directory_uri() . '/static/css/style.css');
+   
+}
+add_action('wp_enqueue_scripts', 'global_enqueue_scripts');
 
 include_module('header');
 include_component('shop', 'cart');

wp-content/themes/cosmopet/modules/static-pages/front-page/template-front-page.php

@@ -9,6 +9,8 @@
 <?php
 function theme_enqueue_scripts() {
     wp_enqueue_style('gp-front-page-materialize-css', get_template_directory_uri() . '/static/css/libs/materialize.min.css');
+    wp_enqueue_style('gp-shop-style', get_template_directory_uri() . '/static/css/shop.css');
+    wp_enqueue_style('gp-forms-style', get_template_directory_uri() . '/static/css/forms.css');
     wp_enqueue_style('gp-front-page-style', get_template_directory_uri() . '/static/css/front-page.css');
     wp_enqueue_script( 'gp-front-page-materialize', get_template_directory_uri() . '/static/js/libs/materialize.min.js', array(), null, true );
     wp_enqueue_script( 'gp-front-page-main', get_template_directory_uri() . '/static/js/front-page.js', array(), null, true );

wp-content/themes/cosmopet/static/css/forms.css

@@ -0,0 +1,440 @@
+.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 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;
+}
+
+.discount__sale .discount_title {
+    color: var(--interface-main_black, #121212);
+    font-family: "Craftwork Grotesk";
+    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 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%;
+    }
+}
+
+.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;
+}

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;
+    }
+
+}

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;
+    }
+}