From a7cbc801a4b364e281e03b778d0f9ec4f7a95328 Mon Sep 17 00:00:00 2001 From: Konstantin Date: Sat, 30 May 2026 11:23:30 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A1=D1=82=D0=B8=D0=BB=D0=B8=D0=B7=D0=B0?= =?UTF-8?q?=D1=86=D0=B8=D1=8F=20=D0=BF=D0=BE=D0=B4=D0=BA=D0=B0=D1=82=D0=B5?= =?UTF-8?q?=D0=B3=D0=BE=D1=80=D0=B8=D0=B9=20=D0=BA=D0=B0=D1=82=D0=B0=D0=BB?= =?UTF-8?q?=D0=BE=D0=B3=D0=B0=20=D0=BF=D0=BB=D0=B0=D1=82=D1=8C=D0=B5=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../view/theme/dominik/assets/css/main.css | 901 +++++++++++------- .../extension/module/subcategory.twig | 160 ++-- .../dominik/template/product/category.twig | 67 +- 3 files changed, 642 insertions(+), 486 deletions(-) diff --git a/public/store/view/theme/dominik/assets/css/main.css b/public/store/view/theme/dominik/assets/css/main.css index ff1ee31..7016c24 100644 --- a/public/store/view/theme/dominik/assets/css/main.css +++ b/public/store/view/theme/dominik/assets/css/main.css @@ -1,360 +1,547 @@ -:root{ - --color-secondary: #D8CECB; - --color-gray: #EEEEEE; - --color-dark-gray: #5c5950; -} -body{ - - - font-family: "Tenor Sans", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; -} -a{ - text-decoration: none; - color: inherit; -} -img{ - max-width: 100%; -} -.container-fluid { - max-width: 1400px; -} -p { - margin-bottom: 0.5rem; -} -a:hover{ - color: var(--color-secondary); -} -a:hover svg, -a:hover path{ - fill: var(--color-secondary); -} -.heading { - font-size: 27px; - line-height: 120%; -} -.subheading{ - font-size: 19px; - line-height: 120%; -} - -.logo { - - font-size: 30px; - -} - -header .menu { - margin: 0; - padding: 0; - list-style: none; - display: flex; -} - -header .menu ul { - position: absolute; - opacity: 0; - visibility: hidden; - transition-duration: 0.2s; - top: 100%; - background-color: white; - width: 260px; - - box-shadow: 0px -1px 20px 3px #4b4b4b3d; - padding: 10px 0; -} -header .menu ul li { - padding: 0px 15px; -} -header .menu ul li a { - display: flex; - width: 100%; -} -header .menu li:hover ul{ - opacity: 1; - visibility: visible; -} -header .menu li { - padding: 13px 15px; - display: flex; - align-items: center; -} -header .menu li a { - flex-wrap: nowrap; - display: flex; - align-items: center; -} -header .menu svg{ - -} - -header .menu>li:first-child { - padding-left: 0; -} -header .menu>li:last-child { - padding-right: 0; -} -@media (max-width: 767px){ - header .menu li { - padding: 13px 8px; - } - .logo { - - font-size: 20px; - - } -} -.btn { - text-transform: uppercase; - padding: 10px 30px; - border-radius: 0; - box-shadow: none !important; -} -.btn-close{ - box-shadow: none !important; - outline: none; -} -.btn-white{ - background-color: white; - color: black; - -} -.btn-white:hover{ - background-color: var(--color-secondary); -} - - -.product-card .images{ - position: relative; -} - - -.product-card .images .hidden-image{ - position: absolute; - left: 0; - top: 0; - opacity: 0; - visibility: hidden; - transition-duration: 0.4s; -} - -.product-card .images:hover .hidden-image{ - opacity: 1; - visibility: visible; -} -.swiper-pagination-bullet{ - transition-duration: 0.45s; -} -.swiper-pagination-bullet-active { - width: 30px !important; - border-radius: 10px !important; -} - -.bg-dominik{ - background-color: var(--color-secondary); -} -.bg-dominik-dark{ - background-color: var(--color-dark-gray); -} - -.bg-center { - background-position: center; - background-repeat: no-repeat; - background-size: cover; -} -.position-relative{ - z-index: 0; -} -.bg-absolute-background { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: -1; -} -.bg-absolute-background img { - z-index: 0; - position: relative; - width: 100%; - height: 100%; - object-fit: cover; -} -section{ - overflow-x: hidden; -} -.text-shadow{ - text-shadow: -3px 5px 11px #000 -} - -@media (max-width: 767px){ - .section-prems .banner-text { - background-color: var(--color-gray); - color: black !important; - text-shadow: none; - margin-bottom: 1rem; - text-align: center; - } - .section-prems .banner-text p{ - margin: 0 auto; - - } - .section-prems .bg-dominik-dark{ - background-color: transparent; - } - .w-mob-100{ - width: 100%; - } - -} - - - -.nav-tabs{ - border: none; -} -.nav-link { - border: none !important; - text-transform: uppercase; - outline: none; - padding: 0 0 4px 0; - border-bottom: 2px solid #000 !important; - border-radius: 0; - color: black; - opacity: 0.4; - text-wrap: nowrap; -} -.nav-link:hover,.nav-link.active{ - opacity: 1; - color: black; -} -.nav-item{ - margin-right: 18px; - margin-bottom: 10px; -} -.sw-thumb{ - -} -.sw-thumb:not(.swiper-slide-thumb-active){ - opacity: 0.5; - cursor: pointer; -} - -.offcanvas-wrap { - position: fixed; - z-index: 1100; -} -.toast-container{ - z-index: 1200; -} -.modal-backdrop { - background-color: var(--color-secondary); -} -.modal-backdrop.show { - opacity: .7; -} -.modal-header { - border-bottom: 0; -} - -.form-wrap { - position: relative; -} -.form-wrap label { - background-color: #ffffff; - position: relative; - display: inline-block; - top: 1px; - left: 15px; -} -.form-control { - box-shadow: none !important; - border-radius: 0; - padding: 10px 13px; -} -.form-control:focus{ - border-color: #000 -} - -.fav-btn { - position: absolute; - top: 20px; - right: 20px; - opacity: 0; - visibility: hidden; - -} -.product-card:hover .fav-btn{ - opacity: 1; - visibility: visible; -} -.fav-btn svg path{ - fill: #fff !important; - transition-duration: 0.2s; -} -.fav-btn:hover svg path{ - fill: var(--color-secondary) !important; -} -@media (max-width: 767px){ - .fav-btn { - opacity: 1; - visibility: visible; - } -} - -.abs-loading.abs-loading-fixed { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #ffffff61; - display: flex; - align-items: center; - justify-content: center; -} -.abs-loading{ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10; - background-color: #ffffff61; - display: flex; - align-items: center; - justify-content: center; -} -.no-anim .abs-loading{ - display: none; -} -.offcanvas .left-menu { - padding: 0 0 10px 0; - list-style: none; - margin: 0 0 10px 0; - border-bottom: 1px solid #dbdbdb; -} -.offcanvas .left-menu ul{ - padding: 0; - list-style: none; - margin: 0; -} -.offcanvas .left-menu>li>a { - font-weight: bold; - font-size: 20px; -} -.offcanvas .left-menu li { - text-align: right; -} - -.product-page .fav-btn { - opacity: 1; - visibility: visible; - top: auto; - bottom: 4px; -} +:root{ + --color-secondary: #D8CECB; + --color-gray: #EEEEEE; + --color-dark-gray: #5c5950; + --swiper-theme-color: var(--bs-dark) !important; +} +body{ + + + font-family: "Tenor Sans", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; +} +a{ + text-decoration: none; + color: inherit; +} +img{ + max-width: 100%; +} +.container-fluid { + max-width: 1400px; +} +p { + margin-bottom: 0.5rem; +} +a:hover{ + color: var(--color-secondary); +} +a:hover svg, +a:hover path{ + fill: var(--color-secondary); +} +.heading { + font-size: 27px; + line-height: 120%; +} +.subheading{ + font-size: 19px; + line-height: 120%; +} + +.logo { + + font-size: 30px; + +} + +header .menu { + margin: 0; + padding: 0; + list-style: none; + display: flex; +} + +header .menu ul { + position: absolute; + opacity: 0; + visibility: hidden; + transition-duration: 0.2s; + top: 100%; + background-color: white; + width: 260px; + + box-shadow: 0px -1px 20px 3px #4b4b4b3d; + padding: 10px 0; +} +header .menu ul li { + padding: 0px 15px; +} +header .menu ul li a { + display: flex; + width: 100%; +} +header .menu li:hover ul{ + opacity: 1; + visibility: visible; +} +header .menu li { + padding: 13px 15px; + display: flex; + align-items: center; +} +header .menu li a { + flex-wrap: nowrap; + display: flex; + align-items: center; +} +header .menu svg{ + +} + +header .menu>li:first-child { + padding-left: 0; +} +header .menu>li:last-child { + padding-right: 0; +} +@media (max-width: 767px){ + header .menu li { + padding: 13px 8px; + } + .logo { + + font-size: 20px; + + } +} +.btn { + text-transform: uppercase; + padding: 10px 30px; + border-radius: 0; + box-shadow: none !important; +} +.btn-close{ + box-shadow: none !important; + outline: none; +} +.btn-white{ + background-color: white; + color: black; + +} +.btn-white:hover{ + background-color: var(--color-secondary); +} + + +.product-card .images{ + position: relative; +} + + +.product-card .images .hidden-image{ + position: absolute; + left: 0; + top: 0; + opacity: 0; + visibility: hidden; + transition-duration: 0.4s; +} + +.product-card .images:hover .hidden-image{ + opacity: 1; + visibility: visible; +} +.swiper-pagination-bullet{ + transition-duration: 0.45s; +} +.swiper-pagination-bullet-active { + width: 30px !important; + border-radius: 10px !important; +} + +.subcategory-showcase { + background: linear-gradient(180deg, #f8f6f5 0, #fff 100%); + color: #14142b; +} + +.subcategory-showcase__heading { + max-width: 760px; + margin: 0 auto 31px; + text-align: center; +} + +.subcategory-showcase__eyebrow { + display: block; + color: var(--color-dark-gray); + font-size: 11px; + letter-spacing: 0.18em; + line-height: 1.4; + text-transform: uppercase; +} + +.subcategory-showcase__heading h1, +.subcategory-showcase__heading h2 { + margin: 10px 0 0; + color: #14142b; + font-size: clamp(30px, 3.2vw, 46px); + font-weight: 400; + line-height: 1.12; +} + +.subcategory-slider { + padding: 3px 2px 0; +} + +.subcategory-card { + display: block; + min-width: 0; + color: #14142b; +} + +.subcategory-card:hover { + color: #14142b; +} + +.subcategory-card__image { + position: relative; + display: block; + aspect-ratio: 1; + overflow: hidden; + background: #ede9e7; +} + +.subcategory-card__image::after { + position: absolute; + inset: 10px; + border: 1px solid rgba(255, 255, 255, 0.72); + content: ""; + pointer-events: none; + transition: inset 0.35s, border-color 0.35s; +} + +.subcategory-card__image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s; +} + +.subcategory-card__number { + position: absolute; + right: 10px; + bottom: 10px; + min-width: 38px; + padding: 6px 7px 5px; + background: rgba(255, 255, 255, 0.92); + color: #14142b; + font-size: 11px; + letter-spacing: 0.12em; + line-height: 1; + text-align: center; +} + +.subcategory-card__body { + display: flex; + gap: 14px; + align-items: center; + justify-content: space-between; + padding: 15px 1px 0; +} + +.subcategory-card__title { + font-size: 17px; + line-height: 1.3; +} + +.subcategory-card__arrow { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + transition: transform 0.25s; +} + +.subcategory-card__arrow svg, +.subcategory-slider__button svg { + fill: none !important; + stroke: currentColor; + stroke-linecap: round; + stroke-linejoin: round; +} + +.subcategory-card:hover .subcategory-card__image img { + transform: scale(1.055); +} + +.subcategory-card:hover .subcategory-card__image::after { + inset: 15px; + border-color: rgba(255, 255, 255, 0.92); +} + +.subcategory-card:hover .subcategory-card__arrow { + transform: translateX(4px); +} + +.subcategory-slider__controls { + display: flex; + gap: 16px; + align-items: center; + justify-content: center; + padding-top: 32px; +} + +.subcategory-slider .swiper-pagination { + position: static; + width: auto; + min-width: 56px; + transform: none; +} + +.subcategory-slider .swiper-pagination-bullet { + margin: 0 4px; +} + +.subcategory-slider__button { + position: static; + width: 42px; + height: 42px; + margin: 0; + border: 1px solid rgba(20, 20, 43, 0.16); + background: transparent; + color: #14142b; + transition: background-color 0.2s, border-color 0.2s, color 0.2s; +} + +.subcategory-slider__button::after { + display: none; +} + +.subcategory-slider__button:hover { + background: #14142b; + border-color: #14142b; + color: #fff; +} + +.subcategory-slider__button.swiper-button-disabled { + opacity: 0.32; +} + +@media (max-width: 767px) { + .subcategory-showcase__heading { + margin-bottom: 24px; + } + + .subcategory-showcase__heading h1, + .subcategory-showcase__heading h2 { + font-size: 31px; + } + + .subcategory-card__title { + font-size: 16px; + } + + .subcategory-slider__controls { + padding-top: 25px; + } +} + +.bg-dominik{ + background-color: var(--color-secondary); +} +.bg-dominik-dark{ + background-color: var(--color-dark-gray); +} + +.bg-center { + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +.position-relative{ + z-index: 0; +} +.bg-absolute-background { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: -1; +} +.bg-absolute-background img { + z-index: 0; + position: relative; + width: 100%; + height: 100%; + object-fit: cover; +} +section{ + overflow-x: hidden; +} +.text-shadow{ + text-shadow: -3px 5px 11px #000 +} + +@media (max-width: 767px){ + .section-prems .banner-text { + background-color: var(--color-gray); + color: black !important; + text-shadow: none; + margin-bottom: 1rem; + text-align: center; + } + .section-prems .banner-text p{ + margin: 0 auto; + + } + .section-prems .bg-dominik-dark{ + background-color: transparent; + } + .w-mob-100{ + width: 100%; + } + +} + + + +.nav-tabs{ + border: none; +} +.nav-link { + border: none !important; + text-transform: uppercase; + outline: none; + padding: 0 0 4px 0; + border-bottom: 2px solid #000 !important; + border-radius: 0; + color: black; + opacity: 0.4; + text-wrap: nowrap; +} +.nav-link:hover,.nav-link.active{ + opacity: 1; + color: black; +} +.nav-item{ + margin-right: 18px; + margin-bottom: 10px; +} +.sw-thumb{ + +} +.sw-thumb:not(.swiper-slide-thumb-active){ + opacity: 0.5; + cursor: pointer; +} + +.offcanvas-wrap { + position: fixed; + z-index: 1100; +} +.toast-container{ + z-index: 1200; +} +.modal-backdrop { + background-color: var(--color-secondary); +} +.modal-backdrop.show { + opacity: .7; +} +.modal-header { + border-bottom: 0; +} + +.form-wrap { + position: relative; +} +.form-wrap label { + background-color: #ffffff; + position: relative; + display: inline-block; + top: 1px; + left: 15px; +} +.form-control { + box-shadow: none !important; + border-radius: 0; + padding: 10px 13px; +} +.form-control:focus{ + border-color: #000 +} + +.fav-btn { + position: absolute; + top: 20px; + right: 20px; + opacity: 0; + visibility: hidden; + +} +.product-card:hover .fav-btn{ + opacity: 1; + visibility: visible; +} +.fav-btn svg path{ + fill: #fff !important; + transition-duration: 0.2s; +} +.fav-btn:hover svg path{ + fill: var(--color-secondary) !important; +} +@media (max-width: 767px){ + .fav-btn { + opacity: 1; + visibility: visible; + } +} + +.abs-loading.abs-loading-fixed { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #ffffff61; + display: flex; + align-items: center; + justify-content: center; +} +.abs-loading{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; + background-color: #ffffff61; + display: flex; + align-items: center; + justify-content: center; +} +.no-anim .abs-loading{ + display: none; +} +.offcanvas .left-menu { + padding: 0 0 10px 0; + list-style: none; + margin: 0 0 10px 0; + border-bottom: 1px solid #dbdbdb; +} +.offcanvas .left-menu ul{ + padding: 0; + list-style: none; + margin: 0; +} +.offcanvas .left-menu>li>a { + font-weight: bold; + font-size: 20px; +} +.offcanvas .left-menu li { + text-align: right; +} + +.product-page .fav-btn { + opacity: 1; + visibility: visible; + top: auto; + bottom: 4px; +} .product-page .fav-btn path { fill: #000 !important; } diff --git a/public/store/view/theme/dominik/template/extension/module/subcategory.twig b/public/store/view/theme/dominik/template/extension/module/subcategory.twig index 1b2c0ee..ea790cb 100644 --- a/public/store/view/theme/dominik/template/extension/module/subcategory.twig +++ b/public/store/view/theme/dominik/template/extension/module/subcategory.twig @@ -1,68 +1,92 @@ -
-
-
-

{{ module_name }}

-
- -
-
- {% for category in categories %} -
- - {{ category.name }} -
{{ category.name }}
- - -
- {% endfor %} - - -
-
-
-
-
- - -
-
\ No newline at end of file +
+
+
+ Каталог салона +

{{ module_name }}

+
+ + {% block subcategories %} + {% set slider_id = random|default('category-list') %} +
+
+ {% for category in categories %} +
+ + + {{ category.name }} + {% if loop.index < 10 %}0{% endif %}{{ loop.index }} + + + {{ category.name }} + + + +
+ {% endfor %} +
+ +
+ +
+ +
+
+ + + {% endblock %} +
+
diff --git a/public/store/view/theme/dominik/template/product/category.twig b/public/store/view/theme/dominik/template/product/category.twig index 4561ca3..2dda488 100644 --- a/public/store/view/theme/dominik/template/product/category.twig +++ b/public/store/view/theme/dominik/template/product/category.twig @@ -1,69 +1,14 @@ {{ header }} {{ content_top }} -
+
-
-

{{ heading_title }}

+
+ {% if categories %}Выберите направление{% else %}Каталог салона{% endif %} +

{{ heading_title }}

{% if categories %} -
-
- - {% for category in categories %} -
- - Открытые плечи -
{{ category.name }}
- - -
- {% endfor %} -
-
-
-
-
- + {{ block('subcategories', 'dominik/template/extension/module/subcategory.twig') }} + {% endif %}