From 5026edff9bd15e92e8c2444b7a18e422ecd622b6 Mon Sep 17 00:00:00 2001 From: "web_103.2" Date: Fri, 23 Oct 2026 11:18:33 +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=A1=D0=B5=D1=80=D0=B2=D0=B8=D1=81=D1=8B,=20?= =?UTF-8?q?=D1=81=20=D0=BA=D0=BE=D1=82=D0=BE=D1=80=D1=8B=D0=BC=D0=B8=20?= =?UTF-8?q?=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=D0=B5=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../themes/hantico/assets/css/style.css | 379 ++++++++++++++++++ .../assets/scss/_courier-services.scss | 378 +++++++++++++++++ .../themes/hantico/assets/scss/style.scss | 1 + .../template-parts/courier-services.php | 60 +++ .../hantico/templates/template-courier.php | 1 + 5 files changed, 819 insertions(+) create mode 100644 wp-content/themes/hantico/assets/scss/_courier-services.scss create mode 100644 wp-content/themes/hantico/template-parts/courier-services.php diff --git a/wp-content/themes/hantico/assets/css/style.css b/wp-content/themes/hantico/assets/css/style.css index 0ae78b8..5b6dde1 100644 --- a/wp-content/themes/hantico/assets/css/style.css +++ b/wp-content/themes/hantico/assets/css/style.css @@ -7468,3 +7468,382 @@ h4 { white-space: nowrap; text-overflow: ellipsis; } + +.courier-services { + --services-heading: #172d38; + --services-text: #595757; + --services-accent: #ae001b; + --services-card: #f5f5f9; + --logo-size: 70px; + box-sizing: border-box; + width: min(1280px, calc(100% - 80px)); + margin: 0 auto; + padding: 120px 0 40px; + color: var(--services-heading); + font-family: "Onest", sans-serif; + -webkit-font-smoothing: antialiased; +} + +.courier-services *, +.courier-services *::before, +.courier-services *::after { + box-sizing: border-box; +} + +.courier-services__header { + display: flex; + flex-direction: column; + gap: 40px; + text-align: center; +} + +.courier-services__title { + margin: 0; + font-size: 56px; + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.courier-services__description { + margin: 0; + color: var(--services-text); + font-size: 20px; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.courier-services__content { + display: flex; + flex-direction: column; + gap: 32px; + margin-top: 60px; +} + +.courier-services__navigation { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 12px 20px; +} + +.courier-services__navigation-title { + margin: 0; + font-size: 26px; + font-weight: 600; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.courier-services__topics { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 12px; +} + +.courier-services__topic { + display: inline-block; + padding: 8px 12px; + border: 0; + border-radius: 10px; + background: #f6f6f6; + color: #798079; + font: 600 20px / 1.3 "Onest", sans-serif; + letter-spacing: -0.01em; + text-decoration: none; + cursor: pointer; +} + +.courier-services__topic:hover { + color: var(--services-accent); + background: #fff0f2; +} + +.courier-services__grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 20px; + margin: 0; + padding: 0; + list-style: none; +} + +.courier-services__card { + position: relative; + display: flex; + min-width: 0; + height: 100%; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 24px; + padding: 24px 32px; + border-radius: 20px; + background: var(--services-card); + box-shadow: inset 0 0 0 1px #ededed; + color: inherit; + text-decoration: none; +} + +.courier-services__card:hover, +.courier-services__card:active { + box-shadow: inset 0 0 0 1px rgb(174 0 27 / 20%); +} + +.courier-services__name { + font-size: 20px; + font-weight: 600; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.courier-services__logo { + position: relative; + display: block; + flex: 0 0 var(--logo-size); + width: var(--logo-size); + height: var(--logo-size); + transition: transform 0.25s ease; +} + +.courier-services__card:is(:hover, :focus-visible) .courier-services__logo { + transform: scale(1.05); +} + +@media (prefers-reduced-motion: reduce) { + .courier-services__logo { + transition: none; + } +} + + +.courier-services picture, +.courier-services picture img { + display: block; +} + +.courier-services__logo > img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + +.courier-services__logo--samokat { + overflow: hidden; + border-radius: 50%; + background: #ff335f; +} + +.courier-services__samokat-symbol { + position: absolute; + top: 22.857143%; + left: calc(50% - 0.5px); + transform: translateX(-50%); +} + +.courier-services__logo--eda { + overflow: hidden; +} + +.courier-services__eda-clip { + position: absolute; + top: 0; + left: 0.101429%; + width: 99.898571%; + height: 100%; + mask: url("../img/aggregators/desktop-eda-mask.svg") 0 0 / 100% 100% no-repeat; +} + +.courier-services__eda-symbol { + position: absolute; + top: 6.5%; + left: -3.5%; + width: 87.5%; + height: 87.5%; + mask: url("../img/aggregators/desktop-eda-symbol-mask.svg") 0 0 / 100% 100% no-repeat; +} + +.courier-services__lavka-clip { + position: absolute; + top: 0.04%; + left: 0.05%; + width: 100%; + height: 100%; + mask: url("../img/aggregators/desktop-lavka-mask.svg") 0 0 / 100% 100% no-repeat; +} + +.courier-services__arrow { + position: absolute; + top: 15px; + right: 21px; + display: flex; + align-items: center; + justify-content: center; + width: 51px; + height: 51px; + border-radius: 50%; + background: #fff; + color: var(--services-accent); + transition: background-color 0.2s ease, color 0.2s ease; +} + +.courier-services__arrow svg { + display: block; + width: 25%; + height: 25%; +} + +.courier-services__card:is(:hover, :active, :focus-visible) .courier-services__arrow { + background: var(--services-accent); + color: #fff; +} + +.courier-services :is(a, button):focus-visible { + outline: 2px solid var(--services-accent); + outline-offset: 4px; +} + +@media (max-width: 1199px) { + .courier-services__title { + font-size: 44px; + } + + .courier-services__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .courier-services__navigation-title { + font-size: 22px; + } + + .courier-services__topic { + font-size: 18px; + } +} + +@media (max-width: 899px) { + .courier-services { + width: calc(100% - 48px); + padding-top: 80px; + } + + .courier-services__title { + font-size: 36px; + } + + .courier-services__header { + gap: 24px; + } + + .courier-services__description { + font-size: 18px; + line-height: 1.3; + } + + .courier-services__content { + margin-top: 40px; + gap: 24px; + } + + .courier-services__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + } + + .courier-services__navigation { + flex-direction: column; + } +} + +@media (max-width: 600px) { + .courier-services { + --logo-size: 32px; + width: calc(100% - 40px); + padding: 60px 0 40px; + } + + .courier-services__header { + gap: 14px; + } + + .courier-services__title { + font-size: 24px; + } + + .courier-services__description { + font-size: 14px; + line-height: 1.1; + } + + .courier-services__content { + gap: 14px; + margin-top: 30px; + } + + .courier-services__navigation { + gap: 8px; + } + + .courier-services__navigation-title { + font-size: 16px; + } + + .courier-services__topics { + gap: 12px; + } + + .courier-services__topic { + padding: 4px 8px; + font-size: 14px; + } + + .courier-services__grid { + gap: 9px; + } + + .courier-services__card { + gap: 16px; + padding: 20px; + } + + .courier-services__name { + font-size: 14px; + } + + .courier-services__arrow { + top: 11px; + right: 13px; + width: 24px; + height: 24px; + } + + .courier-services__eda-clip { + mask-image: url("../img/aggregators/mobile-eda-mask.svg"); + } + + .courier-services__eda-symbol { + mask-image: url("../img/aggregators/mobile-eda-symbol-mask.svg"); + } + + .courier-services__lavka-clip { + mask-image: url("../img/aggregators/mobile-lavka-mask.svg"); + } +} + +@media (max-width: 359px) { + .courier-services__topics { + gap: 6px; + } + + .courier-services__topic { + font-size: 12px; + } + + .courier-services__card { + padding-right: 12px; + padding-left: 12px; + } +} diff --git a/wp-content/themes/hantico/assets/scss/_courier-services.scss b/wp-content/themes/hantico/assets/scss/_courier-services.scss new file mode 100644 index 0000000..23e62f6 --- /dev/null +++ b/wp-content/themes/hantico/assets/scss/_courier-services.scss @@ -0,0 +1,378 @@ +.courier-services { + --services-heading: #172d38; + --services-text: #595757; + --services-accent: #ae001b; + --services-card: #f5f5f9; + --logo-size: 70px; + box-sizing: border-box; + width: min(1280px, calc(100% - 80px)); + margin: 0 auto; + padding: 120px 0 40px; + color: var(--services-heading); + font-family: "Onest", sans-serif; + -webkit-font-smoothing: antialiased; +} + +.courier-services *, +.courier-services *::before, +.courier-services *::after { + box-sizing: border-box; +} + +.courier-services__header { + display: flex; + flex-direction: column; + gap: 40px; + text-align: center; +} + +.courier-services__title { + margin: 0; + font-size: 56px; + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.courier-services__description { + margin: 0; + color: var(--services-text); + font-size: 20px; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.courier-services__content { + display: flex; + flex-direction: column; + gap: 32px; + margin-top: 60px; +} + +.courier-services__navigation { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 12px 20px; +} + +.courier-services__navigation-title { + margin: 0; + font-size: 26px; + font-weight: 600; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.courier-services__topics { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 12px; +} + +.courier-services__topic { + display: inline-block; + padding: 8px 12px; + border: 0; + border-radius: 10px; + background: #f6f6f6; + color: #798079; + font: 600 20px / 1.3 "Onest", sans-serif; + letter-spacing: -0.01em; + text-decoration: none; + cursor: pointer; +} + +.courier-services__topic:hover { + color: var(--services-accent); + background: #fff0f2; +} + +.courier-services__grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 20px; + margin: 0; + padding: 0; + list-style: none; +} + +.courier-services__card { + position: relative; + display: flex; + min-width: 0; + height: 100%; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 24px; + padding: 24px 32px; + border-radius: 20px; + background: var(--services-card); + box-shadow: inset 0 0 0 1px #ededed; + color: inherit; + text-decoration: none; +} + +.courier-services__card:hover, +.courier-services__card:active { + box-shadow: inset 0 0 0 1px rgb(174 0 27 / 20%); +} + +.courier-services__name { + font-size: 20px; + font-weight: 600; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.courier-services__logo { + position: relative; + display: block; + flex: 0 0 var(--logo-size); + width: var(--logo-size); + height: var(--logo-size); + transition: transform 0.25s ease; +} + +.courier-services__card:is(:hover, :focus-visible) .courier-services__logo { + transform: scale(1.05); +} + +@media (prefers-reduced-motion: reduce) { + .courier-services__logo { + transition: none; + } +} + + +.courier-services picture, +.courier-services picture img { + display: block; +} + +.courier-services__logo > img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + +.courier-services__logo--samokat { + overflow: hidden; + border-radius: 50%; + background: #ff335f; +} + +.courier-services__samokat-symbol { + position: absolute; + top: 22.857143%; + left: calc(50% - 0.5px); + transform: translateX(-50%); +} + +.courier-services__logo--eda { + overflow: hidden; +} + +.courier-services__eda-clip { + position: absolute; + top: 0; + left: 0.101429%; + width: 99.898571%; + height: 100%; + mask: url("../img/aggregators/desktop-eda-mask.svg") 0 0 / 100% 100% no-repeat; +} + +.courier-services__eda-symbol { + position: absolute; + top: 6.5%; + left: -3.5%; + width: 87.5%; + height: 87.5%; + mask: url("../img/aggregators/desktop-eda-symbol-mask.svg") 0 0 / 100% 100% no-repeat; +} + +.courier-services__lavka-clip { + position: absolute; + top: 0.04%; + left: 0.05%; + width: 100%; + height: 100%; + mask: url("../img/aggregators/desktop-lavka-mask.svg") 0 0 / 100% 100% no-repeat; +} + +.courier-services__arrow { + position: absolute; + top: 15px; + right: 21px; + display: flex; + align-items: center; + justify-content: center; + width: 51px; + height: 51px; + border-radius: 50%; + background: #fff; + color: var(--services-accent); + transition: background-color 0.2s ease, color 0.2s ease; +} + +.courier-services__arrow svg { + display: block; + width: 25%; + height: 25%; +} + +.courier-services__card:is(:hover, :active, :focus-visible) .courier-services__arrow { + background: var(--services-accent); + color: #fff; +} + +.courier-services :is(a, button):focus-visible { + outline: 2px solid var(--services-accent); + outline-offset: 4px; +} + +@media (max-width: 1199px) { + .courier-services__title { + font-size: 44px; + } + + .courier-services__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .courier-services__navigation-title { + font-size: 22px; + } + + .courier-services__topic { + font-size: 18px; + } +} + +@media (max-width: 899px) { + .courier-services { + width: calc(100% - 48px); + padding-top: 80px; + } + + .courier-services__title { + font-size: 36px; + } + + .courier-services__header { + gap: 24px; + } + + .courier-services__description { + font-size: 18px; + line-height: 1.3; + } + + .courier-services__content { + margin-top: 40px; + gap: 24px; + } + + .courier-services__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + } + + .courier-services__navigation { + flex-direction: column; + } +} + +@media (max-width: 600px) { + .courier-services { + --logo-size: 32px; + width: calc(100% - 40px); + padding: 60px 0 40px; + } + + .courier-services__header { + gap: 14px; + } + + .courier-services__title { + font-size: 24px; + } + + .courier-services__description { + font-size: 14px; + line-height: 1.1; + } + + .courier-services__content { + gap: 14px; + margin-top: 30px; + } + + .courier-services__navigation { + gap: 8px; + } + + .courier-services__navigation-title { + font-size: 16px; + } + + .courier-services__topics { + gap: 12px; + } + + .courier-services__topic { + padding: 4px 8px; + font-size: 14px; + } + + .courier-services__grid { + gap: 9px; + } + + .courier-services__card { + gap: 16px; + padding: 20px; + } + + .courier-services__name { + font-size: 14px; + } + + .courier-services__arrow { + top: 11px; + right: 13px; + width: 24px; + height: 24px; + } + + .courier-services__eda-clip { + mask-image: url("../img/aggregators/mobile-eda-mask.svg"); + } + + .courier-services__eda-symbol { + mask-image: url("../img/aggregators/mobile-eda-symbol-mask.svg"); + } + + .courier-services__lavka-clip { + mask-image: url("../img/aggregators/mobile-lavka-mask.svg"); + } +} + +@media (max-width: 359px) { + .courier-services__topics { + gap: 6px; + } + + .courier-services__topic { + font-size: 12px; + } + + .courier-services__card { + padding-right: 12px; + padding-left: 12px; + } +} diff --git a/wp-content/themes/hantico/assets/scss/style.scss b/wp-content/themes/hantico/assets/scss/style.scss index a3ee788..78e51a3 100644 --- a/wp-content/themes/hantico/assets/scss/style.scss +++ b/wp-content/themes/hantico/assets/scss/style.scss @@ -1,5 +1,6 @@ @use "mixins" as *; @use "config" as *; +@use "courier-services"; *, *::before, diff --git a/wp-content/themes/hantico/template-parts/courier-services.php b/wp-content/themes/hantico/template-parts/courier-services.php new file mode 100644 index 0000000..fb9dd38 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/courier-services.php @@ -0,0 +1,60 @@ + +
aria-labelledby="courier-services-title"> + +
+ +

+ + +

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