From 42c29094c6762ac97a67065f72b84975141c6d36 Mon Sep 17 00:00:00 2001 From: "web_103.2" Date: Fri, 23 Oct 2026 11:51:40 +0300 Subject: [PATCH] =?UTF-8?q?task=2017081=20|=20=D1=81=D0=B4=D0=B5=D0=BB?= =?UTF-8?q?=D0=B0=D0=BB=20"=D0=9A=D0=B0=D0=BA=D0=B8=D0=B5=20=D0=B7=D0=B0?= =?UTF-8?q?=D0=BA=D0=B0=D0=B7=D1=8B=20=D0=B4=D0=BE=D1=81=D1=82=D1=83=D0=BF?= =?UTF-8?q?=D0=BD=D1=8B"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../themes/hantico/assets/css/style.css | 429 ++++++++++++++++++ .../themes/hantico/assets/js/scripts.js | 14 + .../hantico/assets/scss/_delivery-orders.scss | 428 +++++++++++++++++ .../themes/hantico/assets/scss/style.scss | 1 + .../template-parts/delivery-orders.php | 59 +++ .../hantico/templates/template-courier.php | 1 + 6 files changed, 932 insertions(+) create mode 100644 wp-content/themes/hantico/assets/scss/_delivery-orders.scss create mode 100644 wp-content/themes/hantico/template-parts/delivery-orders.php diff --git a/wp-content/themes/hantico/assets/css/style.css b/wp-content/themes/hantico/assets/css/style.css index 5b6dde1..6032335 100644 --- a/wp-content/themes/hantico/assets/css/style.css +++ b/wp-content/themes/hantico/assets/css/style.css @@ -7847,3 +7847,432 @@ h4 { padding-left: 12px; } } + +.delivery-orders { + --orders-heading: #172d38; + --orders-text: #595757; + --orders-accent: #ae001b; + box-sizing: border-box; + width: min(1280px, calc(100% - 40px)); + margin: var(--space-section) auto 0; + color: var(--orders-heading); + font-family: "Onest", sans-serif; + -webkit-font-smoothing: antialiased; +} + +.delivery-orders *, +.delivery-orders *::before, +.delivery-orders *::after { + box-sizing: border-box; +} + +.delivery-orders__header { + display: flex; + flex-direction: column; + gap: 40px; + margin-bottom: 40px; + text-align: center; +} + +.delivery-orders__title { + margin: 0; + font-size: 56px; + font-weight: 700; + line-height: 62px; + letter-spacing: -0.56px; +} + +.delivery-orders__description { + margin: 0; + color: var(--orders-text); + font-size: 20px; + font-weight: 400; + line-height: 30px; + letter-spacing: -0.2px; +} + +.delivery-orders__grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: 396px 285px; + grid-auto-rows: 396px; + gap: 20px; + margin: 0; + padding: 0; + list-style: none; +} + +.delivery-orders__wide { + grid-column: 1 / -1; +} + +.delivery-orders__card { + --blur-start: 229px; + --blur-end: 462px; + position: relative; + isolation: isolate; + display: block; + overflow: hidden; + width: 100%; + height: 100%; + padding: 0; + border: 0; + border-radius: 40px; + background: linear-gradient(#f5f5f9, #f9f9f9); + color: #fff; + font: inherit; + text-align: left; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} + +.delivery-orders__card::after { + position: absolute; + z-index: 1; + inset: 0; + background: rgb(174 0 27 / 50%); + content: ""; + opacity: 0; + transition: opacity 180ms ease; + pointer-events: none; +} + +.delivery-orders__image { + position: absolute; + display: block; + max-width: none; + object-fit: cover; + pointer-events: none; +} + +.delivery-orders__image--cover { + inset: 0; + width: 100%; + height: 100%; +} + +.delivery-orders__card:not(a) { + cursor: default; +} + +.delivery-orders__image--food { + bottom: 0; + left: 0; + width: 537px; + height: 732px; +} + +.delivery-orders__image--groceries-backdrop { + bottom: 0; + left: 0; + width: 414px; + height: 421px; +} + +.delivery-orders__image--groceries { + top: 0; + left: -118px; + width: 710px; + height: 396px; +} + +.delivery-orders__image--parcels { + bottom: 0; + left: -403px; + width: 1409px; + height: 786px; +} + +.delivery-orders__image--documents { + bottom: -229px; + left: -11px; + width: 1296px; + height: 723px; +} + +.delivery-orders__blur, +.delivery-orders__blur > span { + position: absolute; + inset: 0; + pointer-events: none; +} + +.delivery-orders__blur > span { + --blur-step: calc((var(--blur-end) - var(--blur-start)) / 4); + -webkit-backdrop-filter: blur(var(--blur-radius)); + backdrop-filter: blur(var(--blur-radius)); + mask-image: linear-gradient( + transparent calc(var(--blur-start) + var(--blur-step) * var(--blur-index)), + #000 calc(var(--blur-start) + var(--blur-step) * (var(--blur-index) + 1)) + ); +} + +.delivery-orders__blur > span:nth-child(1) { + --blur-index: 0; + --blur-radius: 1.8px; +} + +.delivery-orders__blur > span:nth-child(2) { + --blur-index: 1; + --blur-radius: 3.6px; +} + +.delivery-orders__blur > span:nth-child(3) { + --blur-index: 2; + --blur-radius: 5.4px; +} + +.delivery-orders__blur > span:nth-child(4) { + --blur-index: 3; + --blur-radius: 7.2px; +} + +.delivery-orders__card--groceries { + --blur-start: 233px; + --blur-end: 423px; +} + +.delivery-orders__card--parcels { + --blur-start: 236px; + --blur-end: 428px; +} + +.delivery-orders__card--documents { + --blur-start: 151px; + --blur-end: 364px; +} + +.delivery-orders__shade { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 163px; + background: linear-gradient(transparent, #000); + opacity: 0.9; + pointer-events: none; +} + +.delivery-orders__card--groceries .delivery-orders__shade { + height: 187px; + opacity: 0.8; +} + +.delivery-orders__card--documents .delivery-orders__shade { + height: 138px; +} + +.delivery-orders__copy { + position: absolute; + z-index: 2; + right: 95px; + bottom: 32px; + left: 40px; + display: flex; + flex-direction: column; + gap: 16px; + pointer-events: none; +} + +.delivery-orders__card-title { + font-size: 26px; + font-weight: 600; + line-height: 29px; + letter-spacing: -0.26px; +} + +.delivery-orders__card-description { + font-size: 20px; + font-weight: 400; + line-height: 28px; + letter-spacing: -0.2px; +} + +.delivery-orders__card--groceries .delivery-orders__copy { + right: 40px; +} + +.delivery-orders__card--groceries .delivery-orders__card-description { + width: 213px; +} + +.delivery-orders__card--parcels .delivery-orders__copy { + right: 50px; +} + +.delivery-orders__card--documents .delivery-orders__copy { + right: 103px; +} + +.delivery-orders__arrow { + position: absolute; + z-index: 2; + top: 32px; + right: 32px; + width: 51px; + height: 51px; + pointer-events: none; +} + +.delivery-orders__card--documents .delivery-orders__arrow { + right: 33px; +} + +.delivery-orders__arrow { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: #fff; + color: var(--orders-accent); + transition: color 180ms ease, background-color 180ms ease; +} + +.delivery-orders__arrow svg { + width: 13px; + height: 13px; +} + +.delivery-orders__card:is(:hover, :focus-visible, :active)::after { + opacity: 1; +} + +.delivery-orders__card:is(:hover, :focus-visible, :active) .delivery-orders__arrow { + background: var(--orders-accent); + color: #fff; +} + +.delivery-orders__card:focus-visible { + outline: 3px solid var(--orders-accent); + outline-offset: 5px; +} + +@media (max-width: 1023.98px) { + .delivery-orders__title { + font-size: 40px; + line-height: 1.1; + } + .delivery-orders__slider { + overflow: visible; + } + .delivery-orders__grid { + display: flex; + gap: 0; + grid-template-rows: none; + } + .delivery-orders__grid > li { + flex-shrink: 0; + width: 340px; + height: 300px; + } + .delivery-orders__card { + --blur-start: 120px; + --blur-end: 300px; + border-radius: 24px; + } + .delivery-orders__card-title { + font-size: 22px; + line-height: 1.15; + overflow-wrap: anywhere; + } + .delivery-orders__card-description { + font-size: 16px; + line-height: 1.4; + overflow-wrap: anywhere; + } + .delivery-orders__grid.is-grid { + gap: 20px; + overflow-x: auto; + scroll-snap-type: x mandatory; + } + .delivery-orders__grid.is-grid > li { + scroll-snap-align: start; + } + .delivery-orders__wide { + grid-column: auto; + } + .delivery-orders__copy, + .delivery-orders__card--groceries .delivery-orders__copy, + .delivery-orders__card--parcels .delivery-orders__copy, + .delivery-orders__card--documents .delivery-orders__copy { + left: 24px; + right: 24px; + bottom: 24px; + } +} + +@media (max-width: 575.98px) { + .delivery-orders { + width: calc(100% - 40px); + } + .delivery-orders__header { + gap: 14px; + margin-bottom: 32px; + } + .delivery-orders__title { + font-size: 24px; + line-height: 1.1; + letter-spacing: -0.24px; + } + .delivery-orders__description { + font-size: 14px; + line-height: 1.5; + letter-spacing: -0.14px; + } + .delivery-orders__slider { + overflow: visible; + } + .delivery-orders__grid { + display: flex; + gap: 0; + } + .delivery-orders__grid > li { + flex-shrink: 0; + width: 278px; + height: 218px; + } + .delivery-orders__card { + --blur-start: 90px; + --blur-end: 218px; + border-radius: 20px; + } + .delivery-orders__grid.is-grid { + gap: 10px; + } + .delivery-orders__copy { + gap: 8px; + } + .delivery-orders__card-title { + font-size: 16px; + line-height: 1.1; + letter-spacing: -0.16px; + } + .delivery-orders__card-description { + font-size: 14px; + line-height: 1.4; + letter-spacing: -0.14px; + } + .delivery-orders__shade { + height: 126px; + } + .delivery-orders__arrow, + .delivery-orders__card--documents .delivery-orders__arrow { + top: 12px; + right: 12px; + width: 24px; + height: 24px; + background: var(--orders-accent); + color: #fff; + } + .delivery-orders__arrow svg { + width: 7px; + height: 7px; + } +} + +@media (prefers-reduced-motion: reduce) { + .delivery-orders__card::after, + .delivery-orders__arrow { + transition: none; + } +} diff --git a/wp-content/themes/hantico/assets/js/scripts.js b/wp-content/themes/hantico/assets/js/scripts.js index 85bbbb0..8f7dea5 100644 --- a/wp-content/themes/hantico/assets/js/scripts.js +++ b/wp-content/themes/hantico/assets/js/scripts.js @@ -544,6 +544,20 @@ document.addEventListener('DOMContentLoaded', () => { }, sizeLG); + // Форматы доставки: слайдер на телефонах и планшетах. + document.querySelectorAll('.delivery-orders__slider').forEach(slider => { + new ResponsiveSwiper(slider, { + slidesPerView: 'auto', + spaceBetween: 10, + watchOverflow: true, + grabCursor: true, + breakpoints: { + 576: { spaceBetween: 20 } + } + }, sizeLG); + }); + + // Похожие статьи: слайдер на всех экранах document.querySelectorAll('.related-slider').forEach(slider => { new ResponsiveSwiper(slider.querySelector('.related-slider__container'), { diff --git a/wp-content/themes/hantico/assets/scss/_delivery-orders.scss b/wp-content/themes/hantico/assets/scss/_delivery-orders.scss new file mode 100644 index 0000000..726dd4c --- /dev/null +++ b/wp-content/themes/hantico/assets/scss/_delivery-orders.scss @@ -0,0 +1,428 @@ +.delivery-orders { + --orders-heading: #172d38; + --orders-text: #595757; + --orders-accent: #ae001b; + box-sizing: border-box; + width: min(1280px, calc(100% - 40px)); + margin: var(--space-section) auto 0; + color: var(--orders-heading); + font-family: "Onest", sans-serif; + -webkit-font-smoothing: antialiased; +} + +.delivery-orders *, +.delivery-orders *::before, +.delivery-orders *::after { + box-sizing: border-box; +} + +.delivery-orders__header { + display: flex; + flex-direction: column; + gap: 40px; + margin-bottom: 40px; + text-align: center; +} + +.delivery-orders__title { + margin: 0; + font-size: 56px; + font-weight: 700; + line-height: 62px; + letter-spacing: -0.56px; +} + +.delivery-orders__description { + margin: 0; + color: var(--orders-text); + font-size: 20px; + font-weight: 400; + line-height: 30px; + letter-spacing: -0.2px; +} + +.delivery-orders__grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: 396px 285px; + grid-auto-rows: 396px; + gap: 20px; + margin: 0; + padding: 0; + list-style: none; +} + +.delivery-orders__wide { + grid-column: 1 / -1; +} + +.delivery-orders__card { + --blur-start: 229px; + --blur-end: 462px; + position: relative; + isolation: isolate; + display: block; + overflow: hidden; + width: 100%; + height: 100%; + padding: 0; + border: 0; + border-radius: 40px; + background: linear-gradient(#f5f5f9, #f9f9f9); + color: #fff; + font: inherit; + text-align: left; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} + +.delivery-orders__card::after { + position: absolute; + z-index: 1; + inset: 0; + background: rgb(174 0 27 / 50%); + content: ""; + opacity: 0; + transition: opacity 180ms ease; + pointer-events: none; +} + +.delivery-orders__image { + position: absolute; + display: block; + max-width: none; + object-fit: cover; + pointer-events: none; +} + +.delivery-orders__image--cover { + inset: 0; + width: 100%; + height: 100%; +} + +.delivery-orders__card:not(a) { + cursor: default; +} + +.delivery-orders__image--food { + bottom: 0; + left: 0; + width: 537px; + height: 732px; +} + +.delivery-orders__image--groceries-backdrop { + bottom: 0; + left: 0; + width: 414px; + height: 421px; +} + +.delivery-orders__image--groceries { + top: 0; + left: -118px; + width: 710px; + height: 396px; +} + +.delivery-orders__image--parcels { + bottom: 0; + left: -403px; + width: 1409px; + height: 786px; +} + +.delivery-orders__image--documents { + bottom: -229px; + left: -11px; + width: 1296px; + height: 723px; +} + +.delivery-orders__blur, +.delivery-orders__blur > span { + position: absolute; + inset: 0; + pointer-events: none; +} + +.delivery-orders__blur > span { + --blur-step: calc((var(--blur-end) - var(--blur-start)) / 4); + -webkit-backdrop-filter: blur(var(--blur-radius)); + backdrop-filter: blur(var(--blur-radius)); + mask-image: linear-gradient( + transparent calc(var(--blur-start) + var(--blur-step) * var(--blur-index)), + #000 calc(var(--blur-start) + var(--blur-step) * (var(--blur-index) + 1)) + ); +} + +.delivery-orders__blur > span:nth-child(1) { + --blur-index: 0; + --blur-radius: 1.8px; +} + +.delivery-orders__blur > span:nth-child(2) { + --blur-index: 1; + --blur-radius: 3.6px; +} + +.delivery-orders__blur > span:nth-child(3) { + --blur-index: 2; + --blur-radius: 5.4px; +} + +.delivery-orders__blur > span:nth-child(4) { + --blur-index: 3; + --blur-radius: 7.2px; +} + +.delivery-orders__card--groceries { + --blur-start: 233px; + --blur-end: 423px; +} + +.delivery-orders__card--parcels { + --blur-start: 236px; + --blur-end: 428px; +} + +.delivery-orders__card--documents { + --blur-start: 151px; + --blur-end: 364px; +} + +.delivery-orders__shade { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 163px; + background: linear-gradient(transparent, #000); + opacity: 0.9; + pointer-events: none; +} + +.delivery-orders__card--groceries .delivery-orders__shade { + height: 187px; + opacity: 0.8; +} + +.delivery-orders__card--documents .delivery-orders__shade { + height: 138px; +} + +.delivery-orders__copy { + position: absolute; + z-index: 2; + right: 95px; + bottom: 32px; + left: 40px; + display: flex; + flex-direction: column; + gap: 16px; + pointer-events: none; +} + +.delivery-orders__card-title { + font-size: 26px; + font-weight: 600; + line-height: 29px; + letter-spacing: -0.26px; +} + +.delivery-orders__card-description { + font-size: 20px; + font-weight: 400; + line-height: 28px; + letter-spacing: -0.2px; +} + +.delivery-orders__card--groceries .delivery-orders__copy { + right: 40px; +} + +.delivery-orders__card--groceries .delivery-orders__card-description { + width: 213px; +} + +.delivery-orders__card--parcels .delivery-orders__copy { + right: 50px; +} + +.delivery-orders__card--documents .delivery-orders__copy { + right: 103px; +} + +.delivery-orders__arrow { + position: absolute; + z-index: 2; + top: 32px; + right: 32px; + width: 51px; + height: 51px; + pointer-events: none; +} + +.delivery-orders__card--documents .delivery-orders__arrow { + right: 33px; +} + +.delivery-orders__arrow { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: #fff; + color: var(--orders-accent); + transition: color 180ms ease, background-color 180ms ease; +} + +.delivery-orders__arrow svg { + width: 13px; + height: 13px; +} + +.delivery-orders__card:is(:hover, :focus-visible, :active)::after { + opacity: 1; +} + +.delivery-orders__card:is(:hover, :focus-visible, :active) .delivery-orders__arrow { + background: var(--orders-accent); + color: #fff; +} + +.delivery-orders__card:focus-visible { + outline: 3px solid var(--orders-accent); + outline-offset: 5px; +} + +@media (max-width: 1023.98px) { + .delivery-orders__title { + font-size: 40px; + line-height: 1.1; + } + .delivery-orders__slider { + overflow: visible; + } + .delivery-orders__grid { + display: flex; + gap: 0; + grid-template-rows: none; + } + .delivery-orders__grid > li { + flex-shrink: 0; + width: 340px; + height: 300px; + } + .delivery-orders__card { + --blur-start: 120px; + --blur-end: 300px; + border-radius: 24px; + } + .delivery-orders__card-title { + font-size: 22px; + line-height: 1.15; + overflow-wrap: anywhere; + } + .delivery-orders__card-description { + font-size: 16px; + line-height: 1.4; + overflow-wrap: anywhere; + } + .delivery-orders__grid.is-grid { + gap: 20px; + overflow-x: auto; + scroll-snap-type: x mandatory; + } + .delivery-orders__grid.is-grid > li { + scroll-snap-align: start; + } + .delivery-orders__wide { + grid-column: auto; + } + .delivery-orders__copy, + .delivery-orders__card--groceries .delivery-orders__copy, + .delivery-orders__card--parcels .delivery-orders__copy, + .delivery-orders__card--documents .delivery-orders__copy { + left: 24px; + right: 24px; + bottom: 24px; + } +} + +@media (max-width: 575.98px) { + .delivery-orders { + width: calc(100% - 40px); + } + .delivery-orders__header { + gap: 14px; + margin-bottom: 32px; + } + .delivery-orders__title { + font-size: 24px; + line-height: 1.1; + letter-spacing: -0.24px; + } + .delivery-orders__description { + font-size: 14px; + line-height: 1.5; + letter-spacing: -0.14px; + } + .delivery-orders__slider { + overflow: visible; + } + .delivery-orders__grid { + display: flex; + gap: 0; + } + .delivery-orders__grid > li { + flex-shrink: 0; + width: 278px; + height: 218px; + } + .delivery-orders__card { + --blur-start: 90px; + --blur-end: 218px; + border-radius: 20px; + } + .delivery-orders__grid.is-grid { + gap: 10px; + } + .delivery-orders__copy { + gap: 8px; + } + .delivery-orders__card-title { + font-size: 16px; + line-height: 1.1; + letter-spacing: -0.16px; + } + .delivery-orders__card-description { + font-size: 14px; + line-height: 1.4; + letter-spacing: -0.14px; + } + .delivery-orders__shade { + height: 126px; + } + .delivery-orders__arrow, + .delivery-orders__card--documents .delivery-orders__arrow { + top: 12px; + right: 12px; + width: 24px; + height: 24px; + background: var(--orders-accent); + color: #fff; + } + .delivery-orders__arrow svg { + width: 7px; + height: 7px; + } +} + +@media (prefers-reduced-motion: reduce) { + .delivery-orders__card::after, + .delivery-orders__arrow { + transition: none; + } +} diff --git a/wp-content/themes/hantico/assets/scss/style.scss b/wp-content/themes/hantico/assets/scss/style.scss index 78e51a3..3968b78 100644 --- a/wp-content/themes/hantico/assets/scss/style.scss +++ b/wp-content/themes/hantico/assets/scss/style.scss @@ -1,6 +1,7 @@ @use "mixins" as *; @use "config" as *; @use "courier-services"; +@use "delivery-orders"; *, *::before, diff --git a/wp-content/themes/hantico/template-parts/delivery-orders.php b/wp-content/themes/hantico/template-parts/delivery-orders.php new file mode 100644 index 0000000..4cc40e9 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/delivery-orders.php @@ -0,0 +1,59 @@ + +
aria-labelledby="delivery-orders-title"> + +
+ +

+ + +

+ +
+ + + +
+ +
+ +
diff --git a/wp-content/themes/hantico/templates/template-courier.php b/wp-content/themes/hantico/templates/template-courier.php index e1f439c..055bcee 100644 --- a/wp-content/themes/hantico/templates/template-courier.php +++ b/wp-content/themes/hantico/templates/template-courier.php @@ -13,6 +13,7 @@ Template Name: Курьерам +