diff --git a/wp-content/themes/hantico/assets/css/style.css b/wp-content/themes/hantico/assets/css/style.css index 5e12633..3906cea 100644 --- a/wp-content/themes/hantico/assets/css/style.css +++ b/wp-content/themes/hantico/assets/css/style.css @@ -32,6 +32,7 @@ --color-red: #ae001b; --color-red-dark: #9a081e; --gradient-grey: linear-gradient(180deg, #f5f5f9 0%, #f9f9f9 100%); + --color-white: #fff; } :root { @@ -481,14 +482,28 @@ h4 { } .breadcrumbs__list { display: flex; - width: max-content; + width: 100%; + flex-wrap: nowrap; } .breadcrumbs__item { display: flex; + flex-shrink: 0; align-items: center; font-size: 14px; line-height: 1.2; } +.breadcrumbs__item:last-child { + flex: 0 1 auto; + min-width: 0; + overflow: hidden; +} +.breadcrumbs__item:last-child .breadcrumbs__link { + display: block; + min-width: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} .breadcrumbs__item::after { content: ""; display: block; @@ -2267,164 +2282,129 @@ h4 { .socials { margin-top: var(--space-section); padding-top: clamp(40px, 23.4254px + 4.4199vw, 80px); - background: var(--gradient-grey); } .socials-title { - text-align: center; + /* text-align: center; */ } -.socials-body { - display: grid; - grid-template-columns: 1.15fr 1fr; - column-gap: clamp(40px, -72.5px + 14.6484vw, 115px); - margin-top: clamp(25px, 14.6409px + 2.7624vw, 50px); +.socials-main{ + margin-top: 50px; } -.socials-grid { +.socials-grid{ display: grid; - grid-template-columns: 1fr 1fr; - gap: 6px; - margin-top: clamp(25px, -75px + 9.7656vw, 50px); + grid-template-columns: repeat(4, 1fr); + gap: 20px; } -.socials-item { - display: grid; +.socials-item{ + padding: 19px 29px; + + display: flex; + flex-direction: column; + justify-content: center; align-items: center; - grid-template-columns: auto 1fr; - column-gap: 25px; - padding: 15px 30px; - border-radius: 15px; - color: var(--main-color); - background-color: #fff; - transition: color 0.25s ease, background-color 0.25s ease; + gap: 20px; + + border-radius: 30px; + border: 1px solid #EDEDED; + + transition: all .2s ease-out; } -.socials-item:hover { - color: #fff; - background-color: var(--main-color); +.socials-item--vk .socials-item__icon{ + border: 1px solid rgba(220, 232, 242, 0.50); + background: #F5F8FE; } -.socials-item:hover .socials-item__icon::before, .socials-item:hover .socials-item__icon::after { - background-color: #fff; +.socials-item--telegram .socials-item__icon{ + border: 1px solid rgba(220, 232, 242, 0.50); + background: #F3FAFF; } -.socials-item__icon { +.socials-item--youtube .socials-item__icon{ + border: 1px solid rgba(220, 232, 242, 0.50); + background: #FCF3F5; +} +.socials-item--instagram {} +.socials-item--tiktok {} +.socials-item--threads {} +.socials-item--dzen {} +.socials-item--rutube .socials-item__icon{ + border: 1px solid rgba(220, 232, 242, 0.50); + background: rgba(255, 173, 190, 0.08); +} +.socials-item__icon{ + width: 63px; + height: 63px; + display: flex; - align-items: flex-start; + justify-content: center; + align-items: center; + + border-radius: 20px; + border: 1px solid rgba(220, 232, 242, 0.50); + background: rgba(212, 206, 210, 0.08); + + transition: all .2s ease-out; } -.socials-item__icon::before { - content: ""; - display: block; - width: 32px; - height: 32px; - background-color: var(--icon-color); - mask: var(--social-icon) center no-repeat; - -webkit-mask: var(--social-icon) center no-repeat; - mask-size: contain; - -webkit-mask-size: contain; - transition: background-color 0.25s ease; +.socials-item__name{ + text-align: center; + font-size: 20px; + line-height: 110%; /* 22px */ + letter-spacing: -0.2px; + color: var(--color-text); + + transition: all .2s ease-out; } -.socials-item__name { - font-size: 18px; - line-height: 1.2; +.socials-item:hover{ + background: var(--color-dark); + border-color: var(--color-dark); } -.socials-item--vk { - --main-color: #366cfe; - --icon-color: currentColor; - --social-icon: url(../img/icons/vk.svg); +.socials-item:hover .socials-item__icon{ + transform: translateY(-5px); + background: var(--color-light); } -.socials-item--instagram { - --main-color: #000; - --icon-color: currentColor; - --social-icon: url(../img/icons/instagram.svg); +.socials-item:hover .socials-item__name{ + color: var(--color-light); + + transform: scale(1.05); } -.socials-item--youtube { - --main-color: #e80b2e; - --icon-color: currentColor; - --social-icon: url(../img/icons/youtube.svg); -} -.socials-item--threads { - --main-color: #000; - --icon-color: currentColor; - --social-icon: url(../img/icons/threads.svg); -} -.socials-item--tiktok { - --main-color: #000; - --icon-color: currentColor; - --social-icon: url(../img/icons/tiktok.svg); -} -.socials-item--telegram { - --main-color: #3292dd; - --icon-color: currentColor; - --social-icon: url(../img/icons/telegram.svg); -} -.socials-item--dzen { - --main-color: #000; - --icon-color: #2c3036; - --social-icon: url(../img/icons/dzen.svg); -} -.socials-item--rutube { - --main-color: #0e0333; - --icon-color: currentColor; - --social-icon: url(../img/icons/rutube.svg); -} -.socials-item--rutube .socials-item__icon::after { - content: ""; - display: block; - width: 8px; - aspect-ratio: 1; - border-radius: 50%; - background-color: #ed143b; - transition: background-color 0.25s ease; -} -.socials-footnote { - margin-block: clamp(30px, -90px + 11.7188vw, 60px); +.socials-footnote{ + margin-top: 50px; + font-size: 11px; - line-height: 1.2; -} -.socials-img { - display: flex; - align-items: flex-end; -} -.socials-img img { - width: 100%; + line-height: 110%; /* 12.1px */ + letter-spacing: -0.11px; + color: var(--color-text); } @media (max-width: 1023.98px) { - .socials-grid { - margin-top: 0; - } - .socials-item { - column-gap: 15px; - padding: 10px 15px; - border-radius: 10px; + .socials-grid{ + grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767.98px) { - .socials-body { - grid-template-columns: 1fr; + .socials-grid{ + grid-template-columns: repeat(2, 1fr); } - .socials-footnote { - margin-bottom: 0; + .socials-item{ + padding: 13.5px 10px 15.5; + + border-radius: 10px; + + gap: 14px; } - .socials-img { - width: clamp(345px, 101.6794px + 64.8855vw, 600px); - margin: 40px auto 0; + .socials-item__icon{ + width: 50px; + height: 50px; + + border-radius: 14px; } -} -@media (max-width: 575.98px) { - .socials-item { - column-gap: 10px; + .socials-item__name{ + font-size: 15px; + letter-spacing: -0.15px; } - .socials-item__icon::before { - width: 28px; - height: 28px; - } - .socials-item__name { - font-size: 16px; - } - .socials-item--rutube .socials-item__icon::after { - width: 6px; - } - .socials-footnote { - margin-top: 20px; - } - .socials-img { + .socials-footnote{ margin-top: 30px; + + font-size: 11px; + line-height: 120%; /* 13.2px */ + letter-spacing: -0.11px; } } .reviews--block { @@ -2906,6 +2886,11 @@ h4 { .articles--page { margin-top: clamp(40px, 15.1381px + 6.6298vw, 100px); } +.articles--slider{ + width: 100%; + + overflow: hidden; +} .articles-title--sm { margin-bottom: 40px; font-size: var(--fs-h3-lg); @@ -2914,6 +2899,9 @@ h4 { margin-bottom: 45px; text-align: center; } +.articles-title--lg span{ + color: var(--color-red); +} .articles-filter { margin-bottom: 30px; overflow-x: auto; @@ -2955,6 +2943,9 @@ h4 { grid-template-columns: repeat(3, 1fr); column-gap: 20px; } +.related-slider__container.swiper { + overflow: visible; +} .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); @@ -3190,6 +3181,30 @@ h4 { .getapp-title { color: #fff; } + +.getapp--custom-title .getapp-body__left { + min-width: 0; +} +.getapp--custom-title .getapp-title { + font-size: clamp(24px, 11.5691px + 3.3149vw, 54px); + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.01em; + overflow-wrap: anywhere; +} +.getapp-title__ending { + display: block; +} +@media (min-width: 1280px) { + .getapp--custom-title .getapp-title { + width: 731px; + max-width: none; + } + .getapp--custom-title .getapp-stores { + margin-top: 55px; + } +} + .getapp-descr { margin-top: 25px; font-size: 18px; @@ -4070,7 +4085,7 @@ h4 { .article-goback__btn::before { margin-right: 10px; border-color: #f0f0f0; - background-color: #fff; + background-color: var(--color-white); transition: background-color 0.25s ease; } .article-goback__btn::after { @@ -4138,11 +4153,16 @@ h4 { .article-main { min-width: 0; } +.article-main .article-content:not(:first-child){ + margin-top: clamp(30px, 17.5691px + 3.3149vw, 60px); +} .article-sidebar { position: sticky; top: 112px; } .article-toc { + height: 46vh; + padding: 25px 30px; background-color: var(--color-light); border-radius: var(--radius-sm); @@ -4165,8 +4185,8 @@ h4 { width: 0; } .article-toc__list.is-scrollable { - padding-right: 10px; scrollbar-width: auto; + height: 83%; } @-moz-document url-prefix() { .article-toc__list.is-scrollable { @@ -5943,4 +5963,2825 @@ h4 { .specs-tabs__item:hover { color: var(--color-red); } -} \ No newline at end of file +} + +/* новые */ + + +.h-article-hero { + --h-hero-accent: var(--color-red); + --h-hero-text: var(--color-dark); + --h-hero-muted: var(--color-grey-dark); + --h-hero-line: var(--color-grey); + --h-hero-bg: var(--color-light); + --h-hero-radius: 26px; + box-sizing: border-box; + width: 100%; + min-width: 1100px; + color: var(--h-hero-text); + font-family: inherit; +} + +.h-article-hero *, +.h-article-hero *::before, +.h-article-hero *::after { + box-sizing: border-box; +} + +.h-article-hero__container { + display: grid; + grid-template-columns: minmax(400px, 500px) minmax(0, 1fr); + align-items: stretch; + gap: 64px; + width: calc(100% - 80px); + max-width: 1360px; +} + +.h-article-hero__picture { + min-height: 600px; + overflow: hidden; + border-radius: var(--h-hero-radius); + background: var(--color-grey); +} + +.h-article-hero__image { + display: block; + width: 100%; + height: 100%; + min-height: 600px; + object-fit: cover; + object-position: center; +} + +.h-article-hero__content { + display: flex; + flex-direction: column; + align-items: flex-start; + min-width: 0; + padding: 5px 0 4px; +} + +.h-article-hero .breadcrumbs { + width: 100%; + min-width: 0; + margin: 0 0 24px; +} + +.h-article-hero .breadcrumbs > .container { + width: 100%; + max-width: none; + padding: 0; +} + +.h-article-hero .breadcrumbs__inner { + margin: 0; + padding: 0; +} + +.h-article-hero__breadcrumb-divider { + flex: none; + color: var(--color-grey-light); +} + +.h-article-hero__breadcrumb-current { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--h-hero-text); +} + +.h-article-hero__categories { + display: flex; + gap: 8px; + margin-bottom: 19px; +} + +.h-article-hero__category { + display: inline-flex; + align-items: center; + min-height: 29px; + padding: 5px 12px; + border: 1px solid color-mix(in srgb, var(--color-red) 17%, transparent); + border-radius: 100px; + background: color-mix(in srgb, var(--color-red) 8%, var(--color-light)); + color: var(--h-hero-accent); + font-size: 12px; + font-weight: 600; + line-height: 1.3; +} + +.h-article-hero__title { + width: 100%; + margin: 0; + color: var(--h-hero-text); + font-size: 44px; + font-weight: 700; + line-height: 1.12; + letter-spacing: -.035em; + text-wrap: balance; +} + +.h-article-hero__title > span { + background: linear-gradient( + 98deg, + var(--color-red) 0%, + var(--color-red-dark) 100% + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.h-article-hero__description { + max-width: 710px; + margin: 24px 0 34px; + color: var(--color-text); + font-size: 17px; + font-weight: 400; + line-height: 1.6; +} + +.h-article-hero__meta { + display: flex; + align-items: center; + flex-wrap: nowrap; + width: 100%; + margin-top: auto; + padding-top: 25px; + border-top: 1px solid var(--h-hero-line); + color: var(--color-text); +} + +.h-article-hero__meta-item { + display: inline-flex; + align-items: center; + gap: 10px; + flex: none; + min-height: 31px; + padding: 0 20px; + font-size: 14px; + line-height: 1.35; + white-space: nowrap; +} + +.h-article-hero__meta-item:first-child { + padding-left: 0; +} + +.h-article-hero__meta-item + .h-article-hero__meta-item { + border-left: 1px solid var(--color-grey); +} + +.h-article-hero__meta-item svg { + display: block; + flex: none; + width: 22px; + height: 22px; + color: var(--h-hero-accent); +} + +.h-article-hero__meta-item strong { + color: var(--h-hero-text); + font-weight: 600; +} + +@media (max-width: 1279.98px) { + .h-article-hero{ + min-width: 100%; + } + + .h-article-hero__container{ + width: 100%; + + display: flex; + flex-direction: column; + gap: 20px; + } + .h-article-hero__image, + .h-article-hero__picture{ + min-width: auto; + min-height: auto; + + width: 100%; + } +} + +@media (max-width: 550px) { + .h-article-hero__meta{ + flex-direction: column; + align-items: start; + } + .h-article-hero__meta-item { + width: 300px; + } + + .h-article-hero__meta-item:first-child { + padding-left: 20px;; + } + + .h-article-hero__meta-item + .h-article-hero__meta-item { + border-left: none; + } + + .h-article-hero__title{ + font-size: 28px; + } + .h-article-hero__description{ + font-size: 16px; + } +} + +.h-attention { + margin: 24px 0; + + padding: 32px 40px 32px 32px; + + display: flex; + gap: 20px; + + background: var(--attention-bg); + + border-radius: 20px; +} + +.h-attention--warning { + --attention-bg: rgba(226, 10, 23, 0.10); + --attention-icon-bg: rgba(226, 10, 23, 0.10); +} + +.h-attention--info { + --attention-color: #a8740b; + --attention-bg: #fff8e8; + --attention-icon-bg: #f9ebc8; +} + +.h-attention--success { + --attention-color: #277547; + --attention-bg: #eff8f2; + --attention-icon-bg: #dceee2; +} + +.h-attention__icon { + flex-shrink: 0; + + width: 40px; + height: 40px; + + border-radius: 50%; + + background: var(--attention-icon-bg); + + display: flex; + justify-content: center; + align-items: center; +} + +.h-attention__content { + font-size: 20px; + line-height: 150%; /* 30px */ + letter-spacing: -0.2px; + color: var(--color-text); +} + +@media (max-width: 767.98px) { + .h-attention{ + padding: 16px 16px 16px 12px; + + gap: 12px; + } + + .h-attention__content{ + font-size: 14px; + letter-spacing: -0.14px; + } +} + +.h-article-quote { + overflow: hidden; + position: relative; + + margin: 60px 0; + + min-height: 216px; + padding: 40px 40px 40px 240px; + + border-radius: 40px; + background: linear-gradient(148deg, #29292D 19.01%, #083743 100.4%) +} +.h-article-quote::before{ + content: ''; + + position: absolute; + top: -36px; + right: 40px; + + width: 174px; + height: 128px; + + background-image: url(../img/bg/arrow-q.svg); + background-repeat: no-repeat; + background-position: bottom; +} + +.h-article-quote__avatar { + position: absolute; + top: -17px; + left: -38px; + + max-width: 250px; + max-height: 250px; + + width: 250px; + height: 250px; + aspect-ratio: 1; + + border-radius: 50%; + + object-fit: cover; +} + +.h-article-quote__body { + +} + +.h-article-quote__author { + font-size: 26px; + font-weight: 600; + line-height: 110%; /* 28.6px */ + letter-spacing: -0.26px; + color: var(--color-white); +} + +.h-article-quote__job{ + margin-top: 8px; + + font-size: 14px; + font-weight: 500; + line-height: 110%; /* 15.4px */ + letter-spacing: -0.14px; + color: var(--color-white); +} + +.h-article-quote__text { + margin-top: 24px; + + font-size: 20px; + line-height: 150%; /* 30px */ + letter-spacing: -0.2px; + color: var(--color-white); +} + +@media (max-width: 767.98px) { + .h-article-quote{ + min-height: auto; + + padding: 180px 24px 20px 24px; + } + .h-article-quote::before{ + top: 52px; + right: -22px; + } + .h-article-quote__avatar{ + top: -25px; + left: -20px; + + width: 189px; + height: 189px; + } + .h-article-quote__author { + font-size: 16px; + letter-spacing: -0.16px; + } + + .h-article-quote__job{ + margin-top: 6px; + + font-size: 13px; + letter-spacing: -0.13px; + } + + .h-article-quote__text { + margin-top: 16px; + + font-size: 14px; + letter-spacing: -0.14px; + } +} + +.h-article-cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin: 60px 0; +} + +.h-article-cards__item { + padding: 31px; + + border-radius: 20px; + border: 1px solid #EDEDED; + background: rgba(255, 255, 255, 0.10); +} +.h-article-cards__item:last-child:nth-child(odd) { + grid-column: 1 / -1; +} + +.h-article-cards__item p { + margin: 0; + padding: 0; + font-size: 20px; + line-height: 150%; /* 30px */ + letter-spacing: -0.2px; + color: var(--color-text); +} + +@media (max-width: 767.98px) { + .h-article-cards{ + margin: 30px 0; + + grid-template-columns: 1fr; + } + + .h-article-cards__item{ + padding: 15px; + + border-radius: 10px; + } + + .h-article-cards__item p { + font-size: 14px; + letter-spacing: -0.14px; + } +} + +.h-article-cta { + overflow: hidden; + position: relative; + + margin: 60px 0; + + padding: 40px 64px 40px 40px; + + border-radius: 40px; + + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 10px; +} +.h-article-cta::after{ + content: ''; + + z-index: -10; + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + background: linear-gradient(135deg, #DF2935 0%, #C80E1B 56.25%, #B00012 102.27%); +} +.h-article-cta__vec{ + z-index: -4; + position: absolute; + top: -6px; + left: 90px; + + width: 121.215px; + height: 318.519px; + + opacity: 0.1; + filter: blur(10px); +} +.h-article-cta__c{ + z-index: -5; + position: absolute; + top: 0; + right: 190px; + + opacity: 0.1; + filter: blur(10px); +} +.h-article-cta__content{ + max-width: 300px; + + display: flex; + flex-direction: column; + gap: 24px; +} +.h-article-cta__title{ + font-size: 30px; + font-weight: 600; + line-height: 110%; /* 33px */ + letter-spacing: -0.3px; + color: var(--color-white); +} +.h-article-cta__description{ + font-size: 20px; + line-height: 150%; /* 30px */ + letter-spacing: -0.2px; + color: var(--color-white); +} + +.h-article-cta__img{ + flex-shrink: 0; + + margin-bottom: -142px; + + width: 113px; + height: 240px; + + object-fit: cover; + object-position: top; +} +.h-article-cta__link{ + padding: 20px 24px; + + border-radius: 60px; + background: var(--color-white); + + font-size: 18px; + font-weight: 500; + line-height: 120%; + color: var(--color-dark); + + transition: all .2s ease-out; +} +.h-article-cta__link:hover{ + background: var(--color-dark); + color: var(--color-white); +} + +@media (min-width: 1024px) and (max-width: 1204px) { + .h-article-cta__img{ + width: 40%; + } +} + +@media (max-width: 767.98px) { + .h-article-cta{ + margin: 30px 0; + + padding: 24px 26px 32px 24px; + + border-radius: 20px; + + gap: 24px; + } + .h-article-cta__content{ + gap: 12px; + } + .h-article-cta__title{ + font-size: 18px; + font-weight: 600; + line-height: 110%; /* 19.8px */ + letter-spacing: -0.18px; + } + .h-article-cta__description{ + font-size: 14px; + line-height: 150%; /* 21px */ + letter-spacing: -0.14px; + } + .h-article-cta__c{ + display: none; + } + .h-article-cta__vec{ + left: auto; + right: 0; + } + .h-article-cta__img{ + position: absolute; + right: 12px; + bottom: -40px; + + margin-bottom: 0; + + width: 30vw; + height: 146px; + } + .h-article-cta__link{ + padding: 14px 18px; + + font-size: 13px; + } +} + +.h-article-app-cta{ + overflow: hidden; + position: relative; + + padding: 40px 64px 40px 40px; + + border-radius: 40px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.h-article-app-cta::before{ + content: ''; + + z-index: -10; + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + background: linear-gradient(180deg, #F5F5F9 0%, #F9F9F9 100%); +} +.h-article-app-cta__content{ + display: flex; + flex-direction: column; + gap: 24px; +} +.h-article-app-cta__title{ + font-size: 30px; + font-weight: 600; + line-height: 110%; /* 33px */ + letter-spacing: -0.3px; + color: var(--color-dark); +} +.h-article-app-cta__text{ + max-width: 349px; + + font-size: 20px; + line-height: 150%; /* 30px */ + letter-spacing: -0.2px; + color: var(--color-text); +} +.h-article-app-cta__img{ + z-index: -5; + position: absolute; + right: 0; + bottom: 0; +} +.h-article-app-cta__link{ + padding: 18px 22px; + + border-radius: 60px; + background: var(--color-red); + box-shadow: 20px 24px 44px 0 rgba(217, 217, 217, 0.25); + + text-align: center; + font-size: 18px; + font-weight: 500; + line-height: 120%; + color: var(--color-white); + + border: 2px solid var(--color-red); + + transition: all .2s ease-out; +} +.h-article-app-cta__link:hover{ + background: var(--color-white); + color: var(--color-red); +} + +@media (max-width: 767.98px) { + .h-article-app-cta{ + padding: 24px 26px 40px 24px; + } + .h-article-app-cta__content{ + gap: 12px; + } + .h-article-app-cta__title{ + font-size: 18px; + line-height: 110%; /* 19.8px */ + letter-spacing: -0.18px; + } + .h-article-app-cta__text{ + max-width: 100%; + + font-size: 14px; + line-height: 150%; /* 21px */ + letter-spacing: -0.14px; + } + .h-article-app-cta__img{ + z-index: -5; + position: absolute; + left: 0; + right: auto; + bottom: 0; + + -webkit-mask-image: linear-gradient( + to right, + #000 60%, + transparent 100% + ); + mask-image: linear-gradient( + to right, + #000 60%, + transparent 100% + ); + } + .h-article-app-cta__link{ + padding: 14px 18px; + + border-radius: 60px; + + font-size: 13px; + } +} +@media (max-width: 670.98px) { + .h-article-app-cta{ + flex-direction: column; + align-items: start; + gap: 24px; + } +} + +.h-article-author { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 5px; + width: 100%; + box-sizing: border-box; + margin: 30px 0; + padding: 20px 24px; + border: 1px solid var(--color-grey); + border-radius: 14px; + background: var(--color-light); + font-family: inherit; +} + +.h-article-author__text { + font-size: 15px; + line-height: 1.5; + color: var(--color-grey-dark); +} + +.h-article-author__link { + font-size: 15px; + font-weight: 600; + line-height: 1.5; + color: var(--color-red); + text-decoration: none; + transition: color .2s ease; +} + +.h-article-author__link:hover { + color: var(--color-red-dark); + text-decoration: underline; +} + +.h-app-steps { + display: grid; + grid-template-columns: 39.29% 60.71%; + grid-template-rows: repeat(3, 1fr); + grid-template-areas: 'one two' + 'one three' + 'one four'; + gap: 20px; +} +.h-app-steps__item{ + position: relative; + + padding: 40px; + + border-radius: 40px; + background: linear-gradient(180deg, #F5F5F9 0%, #F9F9F9 100%); +} +.h-app-steps__item:nth-child(1){ + grid-area: one; + + display: flex; + flex-direction: column; + gap: 24px; +} +.h-app-steps__item:nth-child(2){ + grid-area: two; +} +.h-app-steps__item:nth-child(3){ + grid-area: three; +} +.h-app-steps__item:nth-child(4){ + grid-area: four; +} +.h-app-steps__item:not(:first-child){ + display: flex; + justify-content: space-between; +} +.h-app-steps__nomber{ + width: 51px; + height: 51px; + + display: flex; + justify-content: center; + align-items: center; + + border-radius: 100px; + background: linear-gradient(0deg, #AE001B 0%, #AE001B 100%), linear-gradient(232deg, #771719 18.85%, #A53634 72.03%); + + font-size: 18px; + font-weight: 700; + line-height: 140%; /* 25.2px */ + letter-spacing: -0.18px; + color: var(--color-white); +} +.h-app-steps__main{ + display: flex; + gap: 24px; +} +.h-app-steps__content{ + display: flex; + flex-direction: column; + gap: 16px; +} +.h-app-steps__title{ + font-size: 26px; + font-weight: 600; + line-height: 110%; /* 28.6px */ + letter-spacing: -0.26px; + color: var(--color-dark); +} +.h-app-steps__title span{ + color: var(--color-red); +} +.h-app-steps__text{ + font-size: 18px; + line-height: 150%; + color: var(--color-text); +} +.h-app-steps__qr{ + display: flex; + align-items: center; + gap: 24px; +} +.h-app-steps__qr-img{ + width: 146px; + height: 146px; +} +.h-app-steps__qr-text{ + font-size: 18px; + font-weight: 500; + line-height: 150%; + color: var(--color-text); +} +.h-app-steps__phone{ + position: absolute; + bottom: 0; + left: 0; + + width: 100%; + height: 242px; +} +.h-app-steps__item-img{ + position: absolute; + + right: 33px; + top: calc(50% - 77px); + + width: 218.5px; + height: 154px; + + object-fit: contain; + object-position: center; +} +.h-app-steps__item:nth-child(2) .h-app-steps__item-img{ + right: 54px; + + width: 177px; +} +.h-app-steps__item:nth-child(3) .h-app-steps__item-img{ + right: 26px; + + width: 251px; +} +.h-app-steps__social{ + display: none; +} + +@media (max-width: 1279.98px) { + .h-app-steps { + display: grid; + grid-template-columns: 100%; + grid-template-rows: repeat(4, auto); + grid-template-areas: 'one' + 'two' + 'three' + 'four'; +} + + .h-app-steps__item:nth-child(1){ + padding-bottom: 266px; + } + .h-app-steps__phone{ + object-fit: contain; + } + + .h-app-steps__item-img{ + display: none; + } +} + +@media (max-width: 767.98px) { + .h-app-steps__item{ + overflow: hidden; + + padding: 24px; + + border-radius: 40px; + } + .h-app-steps__item:not(:first-child){ + border-radius: 20px; + } + .h-app-steps__item:not(:first-child) .h-app-steps__content{ + gap: 8px; + } + .h-app-steps__nomber{ + width: 32px; + height: 32px; + + font-size: 12px; + line-height: 140%; /* 16.8px */ + letter-spacing: -0.12px; + } + .h-app-steps__content{ + gap: 14px; + } + .h-app-steps__title{ + font-size: 16px; + line-height: 110%; /* 17.6px */ + letter-spacing: -0.16px; + } + .h-app-steps__text{ + font-size: 13px; + line-height: 150%; + } + .h-app-steps__qr{ + display: none; + } + .h-app-steps__social{ + display: flex; + flex-wrap: wrap; + gap: 12px; + } + .h-app-steps__social a{ + width: calc(50% - 6px); + height: 44px; + + display: flex; + justify-content: center; + align-items: center; + + border-radius: 10px; + border: 1px solid rgba(174, 0, 27, 0.50); + + transition: all .2s ease-out; + } + .h-app-steps__social a span{ + transition: all .2s ease-out; + } + + .h-app-steps__social a:hover{ + background: var(--color-red); + border-color: var(--color-red); + } + .h-app-steps__social a:hover span{ + filter: grayscale(100%) brightness(1.5); + } + .h-app-steps__phone{ + object-fit: cover; + } + .h-app-steps__main{ + gap: 12px; + } +} + +.article-social{ + margin-top: 24px; + + padding: 23px; + + border-radius: 30px; + border: 1px solid #EDEDED; + + display: flex; + flex-direction: column; + gap: 24px; +} +.article-social__title{ + font-size: 26px; + font-weight: 700; + line-height: 110%; /* 28.6px */ + letter-spacing: -0.26px; + color: var(--color-dark); +} +.article-social__title span{ + color: var(--color-red); +} +.article-social__text{ + font-size: 18px; + line-height: 150%; /* 27px */ + letter-spacing: -0.18px; + color: var(--color-text); +} +.article-social__list{ + padding: 6px; + + border-radius: 12px; + background: linear-gradient(180deg, #F5F5F9 0%, #F9F9F9 100%), #F0F0F0; + + display: flex; + align-items: center; + gap: 8px; +} +.article-social__list span{ + width: 100%; + + font-size: 16px; + font-weight: 500; + line-height: 150%; /* 24px */ + letter-spacing: -0.16px; + color: var(--color-text); +} +.article-social__list a { + flex-shrink: 0; + + width: 40px; + height: 40px; + + transition: all .2s ease-out; +} +.article-social__list a:hover{ + opacity: .8; +} + +@media (max-width: 767.98px) { + .article-social{ + border-radius: 20px; + + gap: 12px; + } + + .article-social__title{ + font-size: 16px; + line-height: 110%; /* 17.6px */ + letter-spacing: -0.16px; + } + .article-social__text{ + font-size: 13px; + line-height: 150%; /* 19.5px */ + letter-spacing: -0.13px; + } + .article-social__list span{ + font-size: 13px; + line-height: 150%; /* 19.5px */ + letter-spacing: -0.13px; + } +} + +.blog-links{ + margin-top: 20px; + + display: flex; + justify-content: space-between; +} +.blog-links .btn--transp-red.active{ + background: var(--color-red); + color: var(--color-light); +} + +@media (max-width: 767.98px) { + .blog-links{ + flex-direction: column; + gap: 12px; + } +} + +.blog-header__action{ + margin-top: 20px; + + display: flex; +} +.blog-header__action .header-buttons__download-btn{ + height: 62px; + min-width: 200px; +} + +@media (max-width: 767.98px) { + .blog-header__action .header-buttons__download-btn{ + height: 44px; + min-width: 140px; + } +} +/* Article intro adapted from the supplied layout. */ +.article-intro, +.article-intro * { + box-sizing: border-box; +} + +.article-intro { + --article-background: #f6f6f6; + --article-heading: #1b2d34; + --article-text: #5e5e5e; + --article-muted: #9e9e9e; + --article-icon: #d9dadd; + margin-top: 130px; + position: relative; + width: 100%; + padding: 16px 40px 24px; + border-radius: 40px; + background: var(--article-background); + color: var(--article-text); + font-size: 16px; + font-weight: 400; + line-height: 24px; +} + +.article-intro__topline, +.article-intro__author, +.article-intro__stats, +.article-intro__stat, +.article-intro__meta, +.article-intro__meta > span { + display: flex; + align-items: center; +} + +.article-intro__topline { + justify-content: space-between; + margin-bottom: 16px; +} + +.article-intro__author, +.article-intro__stat, +.article-intro__meta > span { + gap: 8px; +} + +.article-intro__icon { + display: block; + flex: 0 0 20px; + color: var(--article-icon); +} + +.article-intro__stats { + gap: 28px; +} + +.article-intro__hero { + display: grid; + grid-template-columns: minmax(0, 524fr) minmax(0, 656fr); + column-gap: 20px; + align-items: start; +} + +.article-intro__image { + display: block; + width: 100%; + height: 100%; + aspect-ratio: 131 / 85; + border-radius: 20px; + object-fit: cover; + object-position: center; +} + +.article-intro__heading { + min-width: 0; + padding-top: 8px; +} + +.article-intro .breadcrumbs { + margin-bottom: 12px; + font-size: 12px; + line-height: 16px; +} + +.article-intro .breadcrumbs__list { + display: flex; + align-items: center; + gap: 8px; + margin: 0; + padding: 0; + list-style: none; + flex-wrap: wrap; +} + +.article-intro .breadcrumbs__item { + display: flex; + align-items: center; + gap: 8px; + color: var(--article-muted); +} + +.article-intro .breadcrumbs__item + .breadcrumbs__item::before { + width: 5px; + height: 5px; + border-top: 1px solid #c9c9c9; + border-right: 1px solid #c9c9c9; + content: ""; + transform: rotate(45deg); +} + +.article-intro .breadcrumbs__item.is-active { + color: var(--article-text); +} + +.article-intro__tags { + display: flex; + gap: 8px; + margin: 0 0 16px; + padding: 0; + list-style: none; +} + +.article-intro__tags li { + padding: 4px 10px; + border-radius: 8px; + background: var(--color-white); + color: #888; + font-size: 14px; + line-height: 20px; +} + +.article-intro__title { + margin: 0; + color: var(--article-heading); + font-size: clamp(36px, 4.1vw, 56px); + font-weight: 700; + line-height: 1.107142857; + letter-spacing: -0.02em; +} + +.article-intro__meta { + flex-wrap: wrap; + gap: 12px 32px; + margin-top: 40px; + white-space: nowrap; +} + +.article-intro__summary { + margin-top: 24px; +} + +.article-intro__summary h2 { + margin: 0 0 16px; + color: var(--article-heading); + font-size: 20px; + font-weight: 600; + line-height: 28px; +} + +.article-intro__summary p { + margin: 0; + font-size: 20px; + line-height: 30px; +} + +.article-intro__credit { + margin-top: 16px; + text-align: right; +} + +.article-intro__credit a { + color: inherit; + text-decoration-line: underline; + text-decoration-style: dotted; + text-underline-offset: 3px; +} + +.article-intro__credit a:hover { + color: var(--article-heading); +} + +.article-intro__credit a:focus-visible { + border-radius: 2px; + outline: 2px solid var(--article-heading); + outline-offset: 4px; +} + +.article-intro__breadcrumb{ + display: none; +} + +@media (max-width: 1199px) { + .article-intro__tags{ + gap: 6px; + } + .article-intro__tags li{ + background: none; + } + + .article-intro__breadcrumb{ + display: block; + } + .article-intro__heading .breadcrumbs{ + display: none; + } + .article-intro { + margin-top: 20px; + + padding-right: 32px; + padding-left: 32px; + } + + .article-intro__meta { + gap: 12px 24px; + margin-top: 24px; + font-size: 14px; + } +} + +/* На планшете заголовок и метаданные располагаются над фотографией. */ +@media (max-width: 1023px) { + + .article-intro { + padding: 20px 24px 24px; + border-radius: 28px; + } + + .article-intro__hero { + display: flex; + flex-direction: column; + gap: 16px; + } + + .article-intro__heading { + order: -1; + width: 100%; + padding-top: 0; + } + + .article-intro .breadcrumbs { + position: static; + margin: 0 0 12px; + font-size: 10px; + line-height: 14px; + } + + .article-intro .breadcrumbs__list, + .article-intro .breadcrumbs__item { + gap: 6px; + } + + .article-intro .breadcrumbs__item.is-active { + display: block; + min-width: 0; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .article-intro .breadcrumbs__item.is-active::before { + display: inline-block; + margin-right: 6px; + vertical-align: 1px; + } + + .article-intro__title { + font-size: clamp(28px, 4.5vw, 44px); + line-height: 1.1; + } + + .article-intro__image { + max-height: 420px; + aspect-ratio: 77 / 50; + border-radius: 16px; + } + + .article-intro__credit { + text-align: left; + } +} + +/* Мобильный макет: Figma, узел 1:2011. */ +@media (max-width: 600px) { + + .article-intro { + padding: 12px 16px 16px; + border-radius: 24px; + font-size: 12px; + line-height: 20px; + } + + .article-intro__author, + .article-intro__stat, + .article-intro__meta > span { + gap: 4px; + } + + .article-intro__icon { + flex-basis: 16px; + width: 16px; + height: 16px; + } + + .article-intro__topline { + gap: 8px; + } + + .article-intro__author { + min-width: 0; + } + + .article-intro__stats { + flex-shrink: 0; + gap: 16px; + } + + .article-intro__hero { + gap: 12px; + } + + .article-intro .breadcrumbs { + font-size: 8px; + line-height: 12px; + } + + .article-intro .breadcrumbs__list, + .article-intro .breadcrumbs__item { + gap: 4px; + } + + .article-intro .breadcrumbs__item + .breadcrumbs__item::before { + width: 3px; + height: 3px; + } + + .article-intro .breadcrumbs__item.is-active::before { + margin-right: 4px; + } + + .article-intro__tags { + flex-wrap: wrap; + gap: 8px; + margin-bottom: 12px; + } + + .article-intro__tags li { + padding: 4px 8px; + border-radius: 6px; + font-size: 12px; + line-height: 16px; + } + + .article-intro__title { + font-size: 26px; + line-height: 28px; + letter-spacing: -0.01em; + } + + .article-intro__title-ending { + display: block; + } + + .article-intro__meta { + gap: 8px 24px; + margin-top: 28px; + font-size: 12px; + line-height: 20px; + } + + .article-intro__image { + border-radius: 12px; + } + + .article-intro__summary { + margin-top: 24px; + } + + .article-intro__summary h2 { + margin-bottom: 12px; + font-size: 14px; + line-height: 20px; + } + + .article-intro__summary p { + font-size: 14px; + line-height: 21px; + } + + .article-intro__credit { + margin-top: 12px; + font-size: 10px; + line-height: 14px; + } +} + +.article-intro .breadcrumbs { + width: 100%; + margin: 0 0 12px; +} +.article-intro .breadcrumbs > .container { + width: 100%; + max-width: none; + padding: 0; +} +.article-intro .breadcrumbs__inner { margin: 0; padding: 0; } +.article-intro .breadcrumbs__item { font-size: inherit; line-height: inherit; } +.article-intro .breadcrumbs__item::after { display: none; } +.article-intro .breadcrumbs__link { padding: 0; white-space: normal; } +.article-intro .breadcrumbs__item.is-active .breadcrumbs__link { color: var(--article-text); } +.article-intro .breadcrumbs__list { + width: 100%; + flex-wrap: nowrap; +} +.article-intro .breadcrumbs__item { + flex-shrink: 0; +} +.article-intro .breadcrumbs__item.is-active { + display: flex; + flex: 0 1 auto; + min-width: 0; + overflow: hidden; +} +.article-intro .breadcrumbs__item + .breadcrumbs__item::before { + flex-shrink: 0; +} +.article-intro .breadcrumbs__item.is-active .breadcrumbs__link { + display: block; + min-width: 0; + overflow: hidden; + 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; + } +} + +.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; + } +} + +.work-formats { + --formats-heading: #172d38; + --formats-text: #595757; + --formats-border: #ededed; + --formats-accent: #ae001b; + box-sizing: border-box; + display: flex; + width: min(1280px, calc(100% - 80px)); + margin: var(--space-section) auto 0; + flex-direction: column; + gap: 60px; + color: var(--formats-heading); + font-family: "Onest", sans-serif; + -webkit-font-smoothing: antialiased; +} + +.work-formats *, +.work-formats *::before, +.work-formats *::after { + box-sizing: border-box; +} + +.work-formats__header { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + text-align: center; +} + +.work-formats__title { + width: 964px; + max-width: 100%; + margin: 0; + font-size: 56px; + font-weight: 700; + line-height: 62px; + letter-spacing: -0.56px; +} + +.work-formats__description { + width: 100%; + margin: 0; + color: var(--formats-text); + font-size: 20px; + font-weight: 400; + line-height: 22px; + letter-spacing: -0.2px; +} + +.work-formats__groups { + display: flex; + flex-direction: column; + gap: 40px; +} + +.work-formats__group { + display: flex; + flex-direction: column; + gap: 24px; +} + +.work-formats__group-title { + margin: 0; + font-size: 26px; + font-weight: 600; + line-height: 29px; + letter-spacing: -0.26px; + text-align: center; +} + +.work-formats__links { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: center; + gap: 12px; + margin: 0; + padding: 0; + list-style: none; +} + +.work-formats__links > li { + max-width: 100%; +} + +.work-formats__link { + display: flex; + width: auto; + max-width: 100%; + min-height: 54px; + align-items: center; + gap: 8px; + padding: 16px 16px 16px 24px; + border-radius: 100px; + box-shadow: inset 0 0 0 1px var(--formats-border); + color: inherit; + font-size: 18px; + font-weight: 600; + line-height: 20px; + letter-spacing: -0.18px; + text-decoration: none; + overflow-wrap: anywhere; +} + +.work-formats__link:is(:hover, :focus-visible) { + background: #f5f5f9; + color: var(--formats-accent); +} + +.work-formats__link:focus-visible { + outline: 2px solid var(--formats-accent); + outline-offset: 4px; +} + +.work-formats__arrow { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 22px; + width: 22px; + height: 22px; + transition: transform 0.2s ease; +} + +.work-formats__arrow svg { + display: block; + width: 100%; + height: 100%; +} + +.work-formats__link { + transition: color 0.2s ease, background-color 0.2s ease; +} + +.work-formats__link:is(:hover, :focus-visible) .work-formats__arrow { + transform: translateX(3px); +} + +@media (prefers-reduced-motion: reduce) { + .work-formats__link, + .work-formats__arrow { + transition: none; + } + .work-formats__link:is(:hover, :focus-visible) .work-formats__arrow { + transform: none; + } +} + + + +@media (max-width: 1199px) { + .work-formats__title { + font-size: 44px; + line-height: 1.1; + letter-spacing: -0.01em; + } +} + +@media (max-width: 899px) { + .work-formats { + width: calc(100% - 48px); + gap: 40px; + } + + .work-formats__header { + gap: 24px; + } + + .work-formats__title { + font-size: 36px; + } +} + +@media (max-width: 600px) { + .work-formats { + width: calc(100% - 40px); + gap: 30px; + } + + .work-formats__header { + gap: 14px; + } + + .work-formats__title { + font-size: 24px; + line-height: 26px; + letter-spacing: -0.24px; + } + + .work-formats__description { + font-size: 14px; + line-height: 15px; + letter-spacing: -0.14px; + } + + .work-formats__groups { + gap: 30px; + } + + .work-formats__group { + gap: 16px; + } + + .work-formats__group-title { + font-size: 16px; + line-height: 18px; + letter-spacing: -0.16px; + } + + .work-formats__links { + gap: 4px; + } + + .work-formats__link { + min-height: 36px; + gap: 4px; + padding: 11px 11px 11px 16px; + font-size: 13px; + line-height: 14px; + letter-spacing: -0.13px; + } + + .work-formats__arrow { + flex-basis: 14px; + width: 14px; + height: 14px; + } + + + +} + +.work-directions { + --directions-background: #f5f5f9; + --directions-heading: #172d38; + --directions-accent: #ae001b; + width: 100%; + margin: 40px 0 40px; + color: var(--directions-heading); + font-family: "Onest", sans-serif; + -webkit-font-smoothing: antialiased; +} + +.work-directions, +.work-directions *, +.work-directions *::before, +.work-directions *::after { + box-sizing: border-box; +} + +.work-directions__grid { + display: grid; + grid-template-columns: minmax(0, 413fr) minmax(0, 414fr) minmax(0, 413fr); + gap: 20px; + margin: 0; + padding: 0; + list-style: none; +} + +.work-directions__card { + position: relative; + isolation: isolate; + display: flex; + width: 100%; + min-width: 0; + aspect-ratio: 413 / 290; + min-height: 200px; + align-items: flex-end; + justify-content: center; + overflow: hidden; + padding: 32px 16px; + border-radius: 20px; + background: var(--directions-background); + color: inherit; + text-align: center; + text-decoration: none; + -webkit-tap-highlight-color: transparent; +} + +.work-directions__card--taxi { + aspect-ratio: 414 / 290; +} + +.work-directions__label { + position: relative; + font-size: 20px; + font-weight: 600; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.work-directions__vehicle { + position: absolute; + display: block; + overflow: hidden; + background: var(--directions-background); + transform: translateX(-50%); + transition: transform 240ms ease; + pointer-events: none; +} + +.work-directions__vehicle img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + mix-blend-mode: darken; +} + +.work-directions__vehicle--scooter { + top: 20%; + left: calc(50% + 0.5px); + width: 55.205811%; + aspect-ratio: 228 / 152; +} + + +.work-directions__vehicle--taxi { + top: 20%; + left: calc(50% - 1px); + width: 83.091787%; + aspect-ratio: 344 / 151; +} + + +.work-directions__vehicle--van { + top: 13.448276%; + left: calc(50% - 6.5px); + width: 87.651332%; + aspect-ratio: 362 / 174; +} + + +.work-directions__arrow { + --arrow-scale: 1; + position: absolute; + z-index: 1; + top: 24px; + right: 24px; + display: block; + width: 51px; + height: 51px; +} + +.work-directions__arrow { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: #fff; + color: var(--directions-accent); + transition: color 180ms ease, background-color 180ms ease; +} +.work-directions__arrow svg { + display: block; + width: 13px; + height: 13px; +} +.work-directions__card:is(:hover, :focus-visible, :active, .is-active) .work-directions__arrow { + background: var(--directions-accent); + color: #fff; +} +.work-directions__card.is-active { + box-shadow: inset 0 0 0 1px var(--directions-accent); +} + +@media (hover: hover) { + .work-directions__card:hover { + box-shadow: inset 0 0 0 1px rgb(174 0 27 / 20%); + } + + + .work-directions__card:hover .work-directions__vehicle { + transform: translateX(-50%) scale(1.04); + } +} + +.work-directions__card:active { + box-shadow: inset 0 0 0 1px rgb(174 0 27 / 20%); +} + +.work-directions__card:focus-visible { + outline: 2px solid var(--directions-accent); + outline-offset: 4px; +} + + +.work-directions__card:is(:active, :focus-visible) .work-directions__vehicle { + transform: translateX(-50%) scale(1.04); +} + +@media (min-width: 768px) and (max-width: 1199px) { + + .work-directions__grid { + gap: 16px; + } + + .work-directions__card { + padding-bottom: 24px; + } + + .work-directions__label { + font-size: 18px; + } + + .work-directions__arrow { + top: 16px; + right: 16px; + } +} + +@media (prefers-reduced-motion: reduce) { + .work-directions__vehicle, + .work-directions__arrow { + transition: none; + } +} + +@media (max-width: 767.98px) { + .work-directions { + margin-top: 20px; + } + + .work-directions__grid { + grid-template-columns: minmax(0, 163fr) minmax(0, 162fr); + gap: 10px; + } + + .work-directions__cargo { + grid-column: 1 / -1; + } + + .work-directions__card { + height: 155px; + min-height: 0; + aspect-ratio: auto; + padding: 16px; + } + + .work-directions__label { + font-size: 14px; + } + + .work-directions__vehicle--scooter { + top: 36px; + left: calc(50% + 0.5px); + width: min(106px, 70%); + aspect-ratio: 106 / 70; + } + + .work-directions__vehicle--taxi { + top: 39px; + left: 50%; + width: min(138px, 85.185185%); + aspect-ratio: 138 / 61; + } + + .work-directions__vehicle--van { + top: 22px; + left: 50%; + width: min(181px, 80%); + aspect-ratio: 181 / 87; + } + + .work-directions__arrow { + --arrow-scale: 0.5882352941; + top: 12px; + right: 12px; + width: 30px; + height: 30px; + } +} diff --git a/wp-content/themes/hantico/assets/img/bg/app-cta-phone.webp b/wp-content/themes/hantico/assets/img/bg/app-cta-phone.webp new file mode 100644 index 0000000..6c78d15 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/bg/app-cta-phone.webp differ diff --git a/wp-content/themes/hantico/assets/img/bg/app-cta.webp b/wp-content/themes/hantico/assets/img/bg/app-cta.webp new file mode 100644 index 0000000..3e730ab Binary files /dev/null and b/wp-content/themes/hantico/assets/img/bg/app-cta.webp differ diff --git a/wp-content/themes/hantico/assets/img/bg/arrow-q.svg b/wp-content/themes/hantico/assets/img/bg/arrow-q.svg new file mode 100644 index 0000000..bfdfee7 --- /dev/null +++ b/wp-content/themes/hantico/assets/img/bg/arrow-q.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/hantico/assets/img/bg/cta-c.svg b/wp-content/themes/hantico/assets/img/bg/cta-c.svg new file mode 100644 index 0000000..223ffca --- /dev/null +++ b/wp-content/themes/hantico/assets/img/bg/cta-c.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/hantico/assets/img/bg/cta-img.webp b/wp-content/themes/hantico/assets/img/bg/cta-img.webp new file mode 100644 index 0000000..683af37 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/bg/cta-img.webp differ diff --git a/wp-content/themes/hantico/assets/img/bg/cta-vec.svg b/wp-content/themes/hantico/assets/img/bg/cta-vec.svg new file mode 100644 index 0000000..3e93188 --- /dev/null +++ b/wp-content/themes/hantico/assets/img/bg/cta-vec.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/hantico/assets/img/content/app-steps-1.webp b/wp-content/themes/hantico/assets/img/content/app-steps-1.webp new file mode 100644 index 0000000..70a4bb2 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/content/app-steps-1.webp differ diff --git a/wp-content/themes/hantico/assets/img/content/app-steps-2.webp b/wp-content/themes/hantico/assets/img/content/app-steps-2.webp new file mode 100644 index 0000000..dbaf274 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/content/app-steps-2.webp differ diff --git a/wp-content/themes/hantico/assets/img/content/app-steps-3.webp b/wp-content/themes/hantico/assets/img/content/app-steps-3.webp new file mode 100644 index 0000000..fb4240b Binary files /dev/null and b/wp-content/themes/hantico/assets/img/content/app-steps-3.webp differ diff --git a/wp-content/themes/hantico/assets/img/content/app-steps-phone.webp b/wp-content/themes/hantico/assets/img/content/app-steps-phone.webp new file mode 100644 index 0000000..1d3b169 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/content/app-steps-phone.webp differ diff --git a/wp-content/themes/hantico/assets/img/content/app-steps-qr.webp b/wp-content/themes/hantico/assets/img/content/app-steps-qr.webp new file mode 100644 index 0000000..7cabf07 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/content/app-steps-qr.webp differ diff --git a/wp-content/themes/hantico/assets/img/social/AppGallery.svg b/wp-content/themes/hantico/assets/img/social/AppGallery.svg new file mode 100644 index 0000000..316bc2d --- /dev/null +++ b/wp-content/themes/hantico/assets/img/social/AppGallery.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/wp-content/themes/hantico/assets/img/social/appstore.svg b/wp-content/themes/hantico/assets/img/social/appstore.svg new file mode 100644 index 0000000..4a77ac3 --- /dev/null +++ b/wp-content/themes/hantico/assets/img/social/appstore.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/hantico/assets/img/social/google.svg b/wp-content/themes/hantico/assets/img/social/google.svg new file mode 100644 index 0000000..3fac5dd --- /dev/null +++ b/wp-content/themes/hantico/assets/img/social/google.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/wp-content/themes/hantico/assets/img/social/rustor.svg b/wp-content/themes/hantico/assets/img/social/rustor.svg new file mode 100644 index 0000000..73652fb --- /dev/null +++ b/wp-content/themes/hantico/assets/img/social/rustor.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/wp-content/themes/hantico/assets/img/work-directions/scooter.webp b/wp-content/themes/hantico/assets/img/work-directions/scooter.webp new file mode 100644 index 0000000..037f6b8 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/work-directions/scooter.webp differ diff --git a/wp-content/themes/hantico/assets/img/work-directions/taxi.webp b/wp-content/themes/hantico/assets/img/work-directions/taxi.webp new file mode 100644 index 0000000..276cbae Binary files /dev/null and b/wp-content/themes/hantico/assets/img/work-directions/taxi.webp differ diff --git a/wp-content/themes/hantico/assets/img/work-directions/van.webp b/wp-content/themes/hantico/assets/img/work-directions/van.webp new file mode 100644 index 0000000..963b404 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/work-directions/van.webp differ diff --git a/wp-content/themes/hantico/assets/js/scripts.js b/wp-content/themes/hantico/assets/js/scripts.js index 2e01e47..8f7dea5 100644 --- a/wp-content/themes/hantico/assets/js/scripts.js +++ b/wp-content/themes/hantico/assets/js/scripts.js @@ -544,6 +544,36 @@ 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'), { + slidesPerView: 1.25, + spaceBetween: 15, + watchOverflow: true, + grabCursor: true, + breakpoints: { + 576: { slidesPerView: 1.25, spaceBetween: 20 }, + 768: { slidesPerView: 2.25, spaceBetween: 20 }, + 1024: { slidesPerView: 3, spaceBetween: 20 } + } + }); + }); + + // Слайдер блога const blogSlider = new ResponsiveSwiper('.blog-slider__container', { loop: true, @@ -600,23 +630,6 @@ document.addEventListener('DOMContentLoaded', () => { }); - // Скролл длинного содержания статей - function initScrollableToc() { - const list = document.querySelector('.article-toc__list'); - if (!list) return; - function updateScrollableState() { - const isScrollable = list.scrollHeight > list.clientHeight; - list.classList.toggle('is-scrollable', isScrollable); - } - updateScrollableState(); - window.addEventListener('resize', updateScrollableState); - if (document.fonts) { - document.fonts.ready.then(updateScrollableState); - } - } - initScrollableToc(); - - // AJAX-фильтр статей function initArticlesFilter() { const filter = document.querySelector('.articles-filter'); @@ -674,6 +687,7 @@ document.addEventListener('DOMContentLoaded', () => { currentRequest = new AbortController(); const formData = new FormData(); formData.append('action', 'theme_filter_articles'); + formData.append('section', grid.dataset.section || ''); formData.append('nonce', window.themeAjax.nonces.articles); formData.append('category', category); formData.append('page', page); 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/_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/_formats.scss b/wp-content/themes/hantico/assets/scss/_formats.scss new file mode 100644 index 0000000..b252cd9 --- /dev/null +++ b/wp-content/themes/hantico/assets/scss/_formats.scss @@ -0,0 +1,232 @@ +.work-formats { + --formats-heading: #172d38; + --formats-text: #595757; + --formats-border: #ededed; + --formats-accent: #ae001b; + box-sizing: border-box; + display: flex; + width: min(1280px, calc(100% - 80px)); + margin: var(--space-section) auto 0; + flex-direction: column; + gap: 60px; + color: var(--formats-heading); + font-family: "Onest", sans-serif; + -webkit-font-smoothing: antialiased; +} + +.work-formats *, +.work-formats *::before, +.work-formats *::after { + box-sizing: border-box; +} + +.work-formats__header { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + text-align: center; +} + +.work-formats__title { + width: 964px; + max-width: 100%; + margin: 0; + font-size: 56px; + font-weight: 700; + line-height: 62px; + letter-spacing: -0.56px; +} + +.work-formats__description { + width: 100%; + margin: 0; + color: var(--formats-text); + font-size: 20px; + font-weight: 400; + line-height: 22px; + letter-spacing: -0.2px; +} + +.work-formats__groups { + display: flex; + flex-direction: column; + gap: 40px; +} + +.work-formats__group { + display: flex; + flex-direction: column; + gap: 24px; +} + +.work-formats__group-title { + margin: 0; + font-size: 26px; + font-weight: 600; + line-height: 29px; + letter-spacing: -0.26px; + text-align: center; +} + +.work-formats__links { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: center; + gap: 12px; + margin: 0; + padding: 0; + list-style: none; +} + +.work-formats__links > li { + max-width: 100%; +} + +.work-formats__link { + display: flex; + width: auto; + max-width: 100%; + min-height: 54px; + align-items: center; + gap: 8px; + padding: 16px 16px 16px 24px; + border-radius: 100px; + box-shadow: inset 0 0 0 1px var(--formats-border); + color: inherit; + font-size: 18px; + font-weight: 600; + line-height: 20px; + letter-spacing: -0.18px; + text-decoration: none; + overflow-wrap: anywhere; +} + +.work-formats__link:is(:hover, :focus-visible) { + background: #f5f5f9; + color: var(--formats-accent); +} + +.work-formats__link:focus-visible { + outline: 2px solid var(--formats-accent); + outline-offset: 4px; +} + +.work-formats__arrow { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 22px; + width: 22px; + height: 22px; + transition: transform 0.2s ease; +} + +.work-formats__arrow svg { + display: block; + width: 100%; + height: 100%; +} + +.work-formats__link { + transition: color 0.2s ease, background-color 0.2s ease; +} + +.work-formats__link:is(:hover, :focus-visible) .work-formats__arrow { + transform: translateX(3px); +} + +@media (prefers-reduced-motion: reduce) { + .work-formats__link, + .work-formats__arrow { + transition: none; + } + .work-formats__link:is(:hover, :focus-visible) .work-formats__arrow { + transform: none; + } +} + + + +@media (max-width: 1199px) { + .work-formats__title { + font-size: 44px; + line-height: 1.1; + letter-spacing: -0.01em; + } +} + +@media (max-width: 899px) { + .work-formats { + width: calc(100% - 48px); + gap: 40px; + } + + .work-formats__header { + gap: 24px; + } + + .work-formats__title { + font-size: 36px; + } +} + +@media (max-width: 600px) { + .work-formats { + width: calc(100% - 40px); + gap: 30px; + } + + .work-formats__header { + gap: 14px; + } + + .work-formats__title { + font-size: 24px; + line-height: 26px; + letter-spacing: -0.24px; + } + + .work-formats__description { + font-size: 14px; + line-height: 15px; + letter-spacing: -0.14px; + } + + .work-formats__groups { + gap: 30px; + } + + .work-formats__group { + gap: 16px; + } + + .work-formats__group-title { + font-size: 16px; + line-height: 18px; + letter-spacing: -0.16px; + } + + .work-formats__links { + gap: 4px; + } + + .work-formats__link { + min-height: 36px; + gap: 4px; + padding: 11px 11px 11px 16px; + font-size: 13px; + line-height: 14px; + letter-spacing: -0.13px; + } + + .work-formats__arrow { + flex-basis: 14px; + width: 14px; + height: 14px; + } + + + +} diff --git a/wp-content/themes/hantico/assets/scss/_work-directions.scss b/wp-content/themes/hantico/assets/scss/_work-directions.scss new file mode 100644 index 0000000..ee587f3 --- /dev/null +++ b/wp-content/themes/hantico/assets/scss/_work-directions.scss @@ -0,0 +1,237 @@ +.work-directions { + --directions-background: #f5f5f9; + --directions-heading: #172d38; + --directions-accent: #ae001b; + width: 100%; + margin: 0 0 40px; + color: var(--directions-heading); + font-family: "Onest", sans-serif; + -webkit-font-smoothing: antialiased; +} + +.work-directions, +.work-directions *, +.work-directions *::before, +.work-directions *::after { + box-sizing: border-box; +} + +.work-directions__grid { + display: grid; + grid-template-columns: minmax(0, 413fr) minmax(0, 414fr) minmax(0, 413fr); + gap: 20px; + margin: 0; + padding: 0; + list-style: none; +} + +.work-directions__card { + position: relative; + isolation: isolate; + display: flex; + width: 100%; + min-width: 0; + aspect-ratio: 413 / 290; + min-height: 200px; + align-items: flex-end; + justify-content: center; + overflow: hidden; + padding: 32px 16px; + border-radius: 20px; + background: var(--directions-background); + color: inherit; + text-align: center; + text-decoration: none; + -webkit-tap-highlight-color: transparent; +} + +.work-directions__card--taxi { + aspect-ratio: 414 / 290; +} + +.work-directions__label { + position: relative; + font-size: 20px; + font-weight: 600; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.work-directions__vehicle { + position: absolute; + display: block; + overflow: hidden; + background: var(--directions-background); + transform: translateX(-50%); + transition: transform 240ms ease; + pointer-events: none; +} + +.work-directions__vehicle img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + mix-blend-mode: darken; +} + +.work-directions__vehicle--scooter { + top: 20%; + left: calc(50% + 0.5px); + width: 55.205811%; + aspect-ratio: 228 / 152; +} + + +.work-directions__vehicle--taxi { + top: 20%; + left: calc(50% - 1px); + width: 83.091787%; + aspect-ratio: 344 / 151; +} + + +.work-directions__vehicle--van { + top: 13.448276%; + left: calc(50% - 6.5px); + width: 87.651332%; + aspect-ratio: 362 / 174; +} + + +.work-directions__arrow { + --arrow-scale: 1; + position: absolute; + z-index: 1; + top: 24px; + right: 24px; + display: block; + width: 51px; + height: 51px; +} + +.work-directions__arrow { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: #fff; + color: var(--directions-accent); + transition: color 180ms ease, background-color 180ms ease; +} +.work-directions__arrow svg { + display: block; + width: 13px; + height: 13px; +} +.work-directions__card:is(:hover, :focus-visible, :active, .is-active) .work-directions__arrow { + background: var(--directions-accent); + color: #fff; +} +.work-directions__card.is-active { + box-shadow: inset 0 0 0 1px var(--directions-accent); +} + +@media (hover: hover) { + .work-directions__card:hover { + box-shadow: inset 0 0 0 1px rgb(174 0 27 / 20%); + } + + + .work-directions__card:hover .work-directions__vehicle { + transform: translateX(-50%) scale(1.04); + } +} + +.work-directions__card:active { + box-shadow: inset 0 0 0 1px rgb(174 0 27 / 20%); +} + +.work-directions__card:focus-visible { + outline: 2px solid var(--directions-accent); + outline-offset: 4px; +} + + +.work-directions__card:is(:active, :focus-visible) .work-directions__vehicle { + transform: translateX(-50%) scale(1.04); +} + +@media (min-width: 768px) and (max-width: 1199px) { + + .work-directions__grid { + gap: 16px; + } + + .work-directions__card { + padding-bottom: 24px; + } + + .work-directions__label { + font-size: 18px; + } + + .work-directions__arrow { + top: 16px; + right: 16px; + } +} + +@media (prefers-reduced-motion: reduce) { + .work-directions__vehicle, + .work-directions__arrow { + transition: none; + } +} + +@media (max-width: 767.98px) { + + .work-directions__grid { + grid-template-columns: minmax(0, 163fr) minmax(0, 162fr); + gap: 10px; + } + + .work-directions__cargo { + grid-column: 1 / -1; + } + + .work-directions__card { + height: 155px; + min-height: 0; + aspect-ratio: auto; + padding: 16px; + } + + .work-directions__label { + font-size: 14px; + } + + .work-directions__vehicle--scooter { + top: 36px; + left: calc(50% + 0.5px); + width: min(106px, 70%); + aspect-ratio: 106 / 70; + } + + .work-directions__vehicle--taxi { + top: 39px; + left: 50%; + width: min(138px, 85.185185%); + aspect-ratio: 138 / 61; + } + + .work-directions__vehicle--van { + top: 22px; + left: 50%; + width: min(181px, 80%); + aspect-ratio: 181 / 87; + } + + .work-directions__arrow { + --arrow-scale: 0.5882352941; + top: 12px; + right: 12px; + width: 30px; + height: 30px; + } +} diff --git a/wp-content/themes/hantico/assets/scss/style.scss b/wp-content/themes/hantico/assets/scss/style.scss index a3ee788..2916046 100644 --- a/wp-content/themes/hantico/assets/scss/style.scss +++ b/wp-content/themes/hantico/assets/scss/style.scss @@ -1,5 +1,9 @@ @use "mixins" as *; @use "config" as *; +@use "courier-services"; +@use "delivery-orders"; +@use "formats"; +@use "work-directions"; *, *::before, @@ -4232,6 +4236,30 @@ h4 { } } + +.getapp--custom-title .getapp-body__left { + min-width: 0; +} +.getapp--custom-title .getapp-title { + font-size: clamp(24px, 11.5691px + 3.3149vw, 54px); + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.01em; + overflow-wrap: anywhere; +} +.getapp-title__ending { + display: block; +} +@media (min-width: 1280px) { + .getapp--custom-title .getapp-title { + width: 731px; + max-width: none; + } + .getapp--custom-title .getapp-stores { + margin-top: 55px; + } +} + @media (hover: hover) { .blog-item__img-link:hover img { transform: scale(1.15); diff --git a/wp-content/themes/hantico/functions.php b/wp-content/themes/hantico/functions.php index 8399332..5f860de 100644 --- a/wp-content/themes/hantico/functions.php +++ b/wp-content/themes/hantico/functions.php @@ -359,3 +359,5 @@ require_once get_template_directory() . '/inc/acf.php'; require_once get_template_directory() . '/inc/ajax.php'; require_once get_template_directory() . '/inc/menu.php'; require_once get_template_directory() . '/inc/breadcrumbs.php'; +require_once get_template_directory() . '/inc/article-urls.php'; +require_once get_template_directory() . '/inc/schema.php'; diff --git a/wp-content/themes/hantico/inc/acf.php b/wp-content/themes/hantico/inc/acf.php index 72d0470..7002642 100644 --- a/wp-content/themes/hantico/inc/acf.php +++ b/wp-content/themes/hantico/inc/acf.php @@ -3,6 +3,14 @@ // Отключить табы в редакторе групп полей ACF add_filter('acf/field_group/disable_field_settings_tabs', '__return_true'); +// Просмотры изменяются автоматически, поле в админке доступно только для просмотра. +add_filter('acf/prepare_field/name=viewers', function ($field) { + if (is_admin()) { + $field['disabled'] = 1; + } + return $field; +}); + // Страница опций ACF if (function_exists('acf_add_options_page')) { diff --git a/wp-content/themes/hantico/inc/ajax.php b/wp-content/themes/hantico/inc/ajax.php index 780123c..90c062d 100644 --- a/wp-content/themes/hantico/inc/ajax.php +++ b/wp-content/themes/hantico/inc/ajax.php @@ -12,15 +12,11 @@ function theme_filter_articles() { 'orderby' => 'date', 'order' => 'DESC', ]; - if (!empty($category)) { - $args['tax_query'] = [ - [ - 'taxonomy' => 'article_category', - 'field' => 'slug', - 'terms' => $category, - ] - ]; + $section = isset($_POST['section']) && is_string($_POST['section']) ? sanitize_key(wp_unslash($_POST['section'])) : ''; + if ($section !== '' && !in_array($section, ['general', 'taxi', 'courier', 'cargo'], true)) { + wp_send_json_error(['message' => 'Неизвестный раздел'], 400); } + $args['tax_query'] = hantico_blog_tax_query($section, $category); $query = new WP_Query($args); ob_start(); if ($query->have_posts()) { @@ -30,6 +26,7 @@ function theme_filter_articles() { } wp_reset_postdata(); } + if (!$query->have_posts()) echo '

Статьи не найдены.

'; $html = ob_get_clean(); wp_send_json_success([ 'html' => $html, diff --git a/wp-content/themes/hantico/inc/article-urls.php b/wp-content/themes/hantico/inc/article-urls.php new file mode 100644 index 0000000..f2e1653 --- /dev/null +++ b/wp-content/themes/hantico/inc/article-urls.php @@ -0,0 +1,94 @@ + 'blog-taxi', + 'courier' => 'blog-courier', + 'cargo' => 'blog-cargo', + ]; + $terms = get_the_terms($post_id, 'article_chapter'); + if (!$terms || is_wp_error($terms)) { + return 'blog'; + } + $slugs = wp_list_pluck($terms, 'slug'); + foreach ($sections as $slug => $base) { + if (in_array($slug, $slugs, true)) { + return $base; + } + } + return 'blog'; +} + +add_filter('post_type_link', function ($url, $post, $leavename, $sample) { + if ($post->post_type !== 'article' || (!$post->post_name && !$leavename)) { + return $url; + } + $slug = $leavename ? '%article%' : $post->post_name; + return home_url(user_trailingslashit('/' . hantico_article_url_base($post->ID) . '/' . $slug, 'single')); +}, 10, 4); + +add_action('init', function () { + add_rewrite_rule('^blog-(taxi|courier|cargo)/?$', 'index.php?pagename=blog&article_section_filter=$matches[1]', 'top'); + // /blog/ продолжает обслуживаться существующими правилами типа article. + add_rewrite_rule( + '^(?:blog-taxi|blog-courier|blog-cargo)/([^/]+)/?$', + 'index.php?post_type=article&name=$matches[1]', + 'top' + ); +}); + +add_filter('query_vars', function ($vars) { + $vars[] = 'article_section_filter'; + return $vars; +}); + +function hantico_blog_section() { + $section = get_query_var('article_section_filter', ''); + if (!$section && isset($_GET['section']) && is_string($_GET['section'])) { + $section = sanitize_key(wp_unslash($_GET['section'])); + } + return in_array($section, ['general', 'taxi', 'courier', 'cargo'], true) ? $section : ''; +} + +function hantico_blog_tax_query($section, $category = '') { + $query = ['relation' => 'AND']; + if ($section !== '') { + $query[] = ['taxonomy' => 'article_chapter', 'field' => 'slug', 'terms' => $section]; + } + if ($category !== '') { + $query[] = ['taxonomy' => 'article_category', 'field' => 'slug', 'terms' => $category]; + } + return count($query) > 1 ? $query : []; +} + +add_filter('redirect_canonical', function ($redirect) { + return is_page('blog') && get_query_var('article_section_filter') ? false : $redirect; +}); + +// Старый адрес и адрес с чужим разделом ведут на текущую ссылку статьи. +add_action('template_redirect', function () { + if (!is_singular('article') || is_preview() || is_feed() || is_embed() + || !in_array($_SERVER['REQUEST_METHOD'] ?? '', ['GET', 'HEAD'], true)) { + return; + } + $request_path = wp_parse_url(wp_unslash($_SERVER['REQUEST_URI'] ?? ''), PHP_URL_PATH); + $home_path = wp_parse_url(home_url('/'), PHP_URL_PATH); + $relative_path = substr((string) $request_path, strlen((string) $home_path)); + if (!preg_match('~^blog(?:-taxi|-courier|-cargo)?/[^/]+/?$~', $relative_path)) { + return; + } + $url = get_permalink(get_queried_object_id()); + $canonical_path = wp_parse_url($url, PHP_URL_PATH); + if (rawurldecode((string) $request_path) === rawurldecode((string) $canonical_path)) { + return; + } + // Сохраняем параметры, например UTM-метки. + $query = wp_parse_url(wp_unslash($_SERVER['REQUEST_URI'] ?? ''), PHP_URL_QUERY); + if ($query) { + $url .= '?' . $query; + } + if (wp_safe_redirect($url, 301)) { + exit; + } +}, 5); diff --git a/wp-content/themes/hantico/inc/schema.php b/wp-content/themes/hantico/inc/schema.php new file mode 100644 index 0000000..0b7ba55 --- /dev/null +++ b/wp-content/themes/hantico/inc/schema.php @@ -0,0 +1,233 @@ + 'article', + 'posts_per_page' => $featured ? 6 : 12, + 'orderby' => 'date', + 'order' => 'DESC', + 'tax_query' => hantico_blog_tax_query(hantico_blog_section(), $category), + ]); + } + return $queries[$key]; +} + +function hantico_schema_url() { + if (is_singular('article')) { + return get_permalink(get_queried_object_id()); + } + $section = hantico_blog_section(); + $url = home_url(user_trailingslashit('/' . ($section && $section !== 'general' ? 'blog-' . $section : 'blog'))); + return $section === 'general' ? add_query_arg('section', 'general', $url) : $url; +} + +function hantico_schema_text($text) { + return trim(html_entity_decode(wp_strip_all_tags((string) $text), ENT_QUOTES | ENT_HTML5, 'UTF-8')); +} + +function hantico_schema_section_name($section) { + $term = $section ? get_term_by('slug', $section, 'article_chapter') : false; + return $term && !is_wp_error($term) ? $term->name : get_the_title(get_queried_object_id()); +} + +// Yoast хранит прежний permalink в индексе: корректируем только вывод, +// не меняя настройки плагина или сохранённые SEO-поля. +add_filter('wpseo_canonical', function ($url) { + return hantico_schema_enabled() ? hantico_schema_url() : $url; +}); +add_filter('wpseo_opengraph_url', function ($url) { + return hantico_schema_enabled() ? hantico_schema_url() : $url; +}); + +function hantico_schema_has_type($node, $types) { + return (bool) array_intersect((array) ($node['@type'] ?? []), (array) $types); +} + +function hantico_schema_graph($graph) { + if (!hantico_schema_enabled()) { + return $graph; + } + $url = hantico_schema_url(); + $post_id = get_queried_object_id(); + $is_blog = hantico_schema_is_blog(); + $page_index = null; + // Обновляем также связанные ID изображений, крошек и действий Yoast. + foreach ($graph as $node) { + if (hantico_schema_has_type($node, ['WebPage', 'CollectionPage', 'ItemPage']) && !empty($node['url'])) { + $old_url = $node['url']; + array_walk_recursive($graph, function (&$value) use ($old_url, $url) { + if (is_string($value) && ($value === $old_url || strpos($value, $old_url . '#') === 0)) { + $value = $url . substr($value, strlen($old_url)); + } + }); + break; + } + } + $website_id = home_url('/#website'); + $organization_id = home_url('/#organization'); + $organization_found = false; + foreach ($graph as $index => $node) { + if (hantico_schema_has_type($node, ['WebPage', 'CollectionPage', 'ItemPage'])) { + $page_index = $index; + } + if (hantico_schema_has_type($node, 'WebSite')) { + $website_id = $node['@id']; + } + if (hantico_schema_has_type($node, 'Organization')) { + $organization_id = $node['@id']; + $organization_found = true; + } + } + if (!$organization_found) { + $graph[] = [ + '@type' => 'Organization', '@id' => $organization_id, + 'name' => 'Hantico', 'url' => home_url('/'), + 'logo' => ['@type' => 'ImageObject', 'url' => get_theme_file_uri('assets/img/icons/logo.svg')], + ]; + } + $website_found = false; + foreach ($graph as &$node) { + if (hantico_schema_has_type($node, 'WebSite')) { + $node['publisher'] = ['@id' => $organization_id]; + $website_found = true; + } + } + unset($node); + if (!$website_found) { + $graph[] = ['@type' => 'WebSite', '@id' => $website_id, 'url' => home_url('/'), + 'name' => get_bloginfo('name'), 'publisher' => ['@id' => $organization_id]]; + } + if ($page_index === null) { + $graph[] = ['@type' => 'WebPage', '@id' => $url]; + $page_index = array_key_last($graph); + } + $page = &$graph[$page_index]; + $page['url'] = $url; + $page['isPartOf'] = ['@id' => $website_id]; + $page['inLanguage'] = get_bloginfo('language'); + $page['breadcrumb'] = ['@id' => $url . '#breadcrumb']; + $description = $page['description'] ?? ''; + if ($is_blog) { + $section = hantico_blog_section(); + $page['@type'] = 'CollectionPage'; + $page['name'] = hantico_schema_text($section ? hantico_schema_section_name($section) : (get_field('blog_title', $post_id) ?: get_the_title($post_id))); + $term = $section ? get_term_by('slug', $section, 'article_chapter') : false; + $description = $term && !is_wp_error($term) && $term->description + ? $term->description : ($description ?: get_field('blog_descr', $post_id)); + // Два списка соответствуют двум реальным блокам, без повторных запросов + // и без включения статей из следующих AJAX-порций. + $page['mainEntity'] = []; + foreach ([true, false] as $featured) { + $list_id = $url . ($featured ? '#featured-articles' : '#articles'); + $items = []; + foreach (hantico_blog_query($featured)->posts as $post) { + $items[] = ['@type' => 'ListItem', 'position' => count($items) + 1, + 'url' => get_permalink($post), 'name' => hantico_schema_text(get_the_title($post))]; + } + $graph[] = ['@type' => 'ItemList', '@id' => $list_id, + 'numberOfItems' => count($items), 'itemListElement' => $items]; + $page['mainEntity'][] = ['@id' => $list_id]; + } + $crumbs = [['name' => 'Главная', 'item' => home_url('/')], ['name' => $page['name'], 'item' => $url]]; + } else { + $description = $description ?: (get_field('brief_description', $post_id) ?: get_field('article_descr', $post_id)); + $article = [ + '@type' => 'Article', '@id' => $url . '#article', 'url' => $url, + 'headline' => hantico_schema_text(get_the_title($post_id)), + 'datePublished' => get_post_time('c', true, $post_id), + 'dateModified' => get_post_modified_time('c', true, $post_id), + 'publisher' => ['@id' => $organization_id], + 'mainEntityOfPage' => ['@id' => $page['@id']], + 'inLanguage' => get_bloginfo('language'), + ]; + $image = get_the_post_thumbnail_url($post_id, 'full'); + if ($image) { + $article['image'] = $image; + } + $article['author'] = [ + '@type' => 'Organization', + '@id' => home_url('/about/#editorial'), + 'name' => 'Редакция Hantico', + 'url' => home_url('/about/'), + ]; + if ($description) { + $article['description'] = hantico_schema_text($description); + } + $article_index = null; + foreach ($graph as $index => $node) { + if (hantico_schema_has_type($node, ['Article', 'BlogPosting', 'NewsArticle'])) { + $article_index = $index; + $article['@id'] = $node['@id']; + break; + } + } + if ($article_index === null) { + $graph[] = $article; + } else { + $graph[$article_index] = array_merge($graph[$article_index], $article); + } + $page['mainEntity'] = ['@id' => $article['@id']]; + $base = hantico_article_url_base($post_id); + $section = $base === 'blog' ? '' : substr($base, 5); + $blog_page = get_page_by_path('blog'); + $crumbs = [ + ['name' => 'Главная', 'item' => home_url('/')], + ['name' => $section ? hantico_schema_section_name($section) : ($blog_page ? get_the_title($blog_page) : 'Блог'), + 'item' => home_url(user_trailingslashit('/' . $base))], + ['name' => $article['headline'], 'item' => $url], + ]; + } + if ($description) { + $page['description'] = hantico_schema_text($description); + } + unset($page); + $breadcrumb = ['@type' => 'BreadcrumbList', '@id' => $url . '#breadcrumb', 'itemListElement' => []]; + foreach ($crumbs as $crumb) { + $breadcrumb['itemListElement'][] = array_merge(['@type' => 'ListItem', 'position' => count($breadcrumb['itemListElement']) + 1], $crumb); + } + $breadcrumb_index = null; + foreach ($graph as $index => $node) { + if (hantico_schema_has_type($node, 'BreadcrumbList')) { + $breadcrumb_index = $index; + break; + } + } + if ($breadcrumb_index === null) { + $graph[] = $breadcrumb; + } else { + $graph[$breadcrumb_index] = $breadcrumb; + } + return $graph; +} + +// Yoast выводит граф в wp_head и безопасно кодирует JSON самостоятельно. +add_filter('wpseo_schema_graph', 'hantico_schema_graph', 20); + +// Резервный вывод, если Yoast деактивирован. При активном плагине второй +// script не создаётся, даже если его разметка отключена настройкой. +add_action('wp_head', function () { + if (defined('WPSEO_VERSION') || !hantico_schema_enabled()) { + return; + } + $json = wp_json_encode(['@context' => 'https://schema.org', '@graph' => hantico_schema_graph([])], + JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE); + if ($json) { + echo '' . "\n"; + } +}, 30); diff --git a/wp-content/themes/hantico/single-article.php b/wp-content/themes/hantico/single-article.php index 877ca3b..5d75153 100644 --- a/wp-content/themes/hantico/single-article.php +++ b/wp-content/themes/hantico/single-article.php @@ -2,47 +2,139 @@
- - ]*>.*?@si', ' ', $reading_text); + $reading_text = preg_replace('/<[^>]*>/', ' ', $reading_text); + $reading_text = html_entity_decode(wp_strip_all_tags($reading_text), ENT_QUOTES | ENT_HTML5, 'UTF-8'); + $word_count = preg_match_all("/[\p{L}\p{N}]+(?:[’'\x{002D}][\p{L}\p{N}]+)*/u", $reading_text); + $reading_minutes = $word_count ? max(1, (int) ceil($word_count / 200)) : 0; + $generated = generate_toc($article_content, 'article-content'); $content = $generated['content']; $toc_items = $generated['toc_items']; + $footer_socials = get_field('socials', 'option'); + foreach ($article_blocks as $block_index => &$block) { + if (($block['acf_fc_layout'] ?? '') !== 'text') { + continue; + } + $generated = generate_toc($block['content'] ?? '', 'article-block-' . ($block_index + 1)); + $block['content'] = $generated['content']; + $toc_items = array_merge($toc_items, $generated['toc_items']); + } + unset($block); + if ($article_content || $article_blocks) : ?>
-
- Назад -
-
-

-
- +
+
+ +
+
+ +
+ +
+
+
+ 'article-intro__image', 'fetchpriority' => 'high', 'loading' => 'eager']); ?> +
+ + +
    + +
  • name); ?>
  • + +
+ +

+
+ + + Время чтения мин + +
+
+
+ + +
+

Кратко

+

+
+ + +
+
-
+ +
+ + $block, + ] + ); + } + } + } + ?>
- -
+ diff --git a/wp-content/themes/hantico/single-courier.php b/wp-content/themes/hantico/single-courier.php index 3934748..e27439b 100644 --- a/wp-content/themes/hantico/single-courier.php +++ b/wp-content/themes/hantico/single-courier.php @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/wp-content/themes/hantico/single-driver.php b/wp-content/themes/hantico/single-driver.php index 216063e..e27439b 100644 --- a/wp-content/themes/hantico/single-driver.php +++ b/wp-content/themes/hantico/single-driver.php @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/wp-content/themes/hantico/template-parts/app-steps.php b/wp-content/themes/hantico/template-parts/app-steps.php new file mode 100644 index 0000000..b7419d5 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/app-steps.php @@ -0,0 +1,130 @@ + +
+
+

Начать работать — просто

+ +
+
+

+ 01 +

+ +
+

+ Скачайте приложение
+ в App Store или Google Play +

+

+ Установите Hantico на смартфон +

+
+ +
+ qr установки + +

+ Наведите камеру
+ смартфона на QR код
+ чтобы скачать приложение +

+
+ + + + qr установки +
+
+
+

+ 02 +

+ +
+

+ Зарегистрируйтесь +

+

+ Создайте аккаунт и заполните
+ необходимые данные +

+
+
+ + +
+
+
+

+ 03 +

+ +
+

+ Выберите подходящий
+ формат работы +

+

+ Найдите доступные варианты и условия,
+ которые подходят именно вам +

+
+
+ + +
+
+
+

+ 04 +

+ +
+

+ Начинайте работать +

+

+ Переходите к заказам и используйте
+ Hantico в работе +

+
+
+ + +
+
+
+
\ No newline at end of file diff --git a/wp-content/themes/hantico/template-parts/article-blocks/attention_blocks.php b/wp-content/themes/hantico/template-parts/article-blocks/attention_blocks.php new file mode 100644 index 0000000..08f6bd1 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/article-blocks/attention_blocks.php @@ -0,0 +1,25 @@ + ['class' => 'warning', 'icon' => ' ', 'title' => 'Важно!'], + 'yellow' => ['class' => 'info', 'icon' => ' ', 'title' => 'Полезная информация'], + 'green' => ['class' => 'success', 'icon' => ' ', 'title' => 'Рекомендация'], +]; +$variant = $variants[$attention] ?? $variants['red']; +?> + + +
+
+ +
+
+ +
+
+ diff --git a/wp-content/themes/hantico/template-parts/article-blocks/block_main.php b/wp-content/themes/hantico/template-parts/article-blocks/block_main.php new file mode 100644 index 0000000..91c35c6 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/article-blocks/block_main.php @@ -0,0 +1,14 @@ + + + +
+ +
+

+
+ +
+ diff --git a/wp-content/themes/hantico/template-parts/article-blocks/cta_1.php b/wp-content/themes/hantico/template-parts/article-blocks/cta_1.php new file mode 100644 index 0000000..e1ace1e --- /dev/null +++ b/wp-content/themes/hantico/template-parts/article-blocks/cta_1.php @@ -0,0 +1,29 @@ + + +
+
+ +

+ + + +

+ +
+ + приложение на телефоне + приложение на телефоне + + приложение на телефоне + + + + + + +
diff --git a/wp-content/themes/hantico/template-parts/article-blocks/cta_2.php b/wp-content/themes/hantico/template-parts/article-blocks/cta_2.php new file mode 100644 index 0000000..777a881 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/article-blocks/cta_2.php @@ -0,0 +1,32 @@ + + +
+
+ +

+ + + +

+ +
+ + + + + + + + + + Изображение + +
diff --git a/wp-content/themes/hantico/template-parts/article-blocks/plaque_authorship.php b/wp-content/themes/hantico/template-parts/article-blocks/plaque_authorship.php new file mode 100644 index 0000000..c7939e6 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/article-blocks/plaque_authorship.php @@ -0,0 +1,17 @@ + + +
+ + + + + + + +
diff --git a/wp-content/themes/hantico/template-parts/article-blocks/quote.php b/wp-content/themes/hantico/template-parts/article-blocks/quote.php new file mode 100644 index 0000000..46e22c9 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/article-blocks/quote.php @@ -0,0 +1,39 @@ + + +
+ + <?php echo esc_attr($image['alt'] ?? ''); ?> + + +
+ +

+ +

+ + + +

+ +

+ + + +
+ +
+ +
+
diff --git a/wp-content/themes/hantico/template-parts/article-blocks/text.php b/wp-content/themes/hantico/template-parts/article-blocks/text.php new file mode 100644 index 0000000..fe9439e --- /dev/null +++ b/wp-content/themes/hantico/template-parts/article-blocks/text.php @@ -0,0 +1,9 @@ + + + +
+ \ No newline at end of file diff --git a/wp-content/themes/hantico/template-parts/audience/hero.php b/wp-content/themes/hantico/template-parts/audience/hero.php new file mode 100644 index 0000000..227d859 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/audience/hero.php @@ -0,0 +1,153 @@ + +
+
+
+
+ +
+
+ фоновое изображение +
+ +
+ +
+
+ <?php echo $item['icon']['alt']; ?> +
+
+
+ +
+ +
+
+
+
+ +
+
+
    + +
  • + +
+
+
+ + +
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..b274834 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/courier-services.php @@ -0,0 +1,65 @@ + +
aria-labelledby="courier-services-title"> + +
+ +

+ + +

С Hantico проще выбрать подходящий сервис , пройти регистрацию и начать получать заказы.

+ +
+ + + +
+ + + + + + + +
+ +
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..5f57e87 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/delivery-orders.php @@ -0,0 +1,59 @@ + +
aria-labelledby="delivery-orders-title"> + +
+ +

Какие заказы доступны

+ + +

Выбирайте подходящий формат и получайте заказы через сервисы, доступные в Hantico.

+ +
+ + + +
+ +
+ +
diff --git a/wp-content/themes/hantico/template-parts/formats.php b/wp-content/themes/hantico/template-parts/formats.php new file mode 100644 index 0000000..14f1501 --- /dev/null +++ b/wp-content/themes/hantico/template-parts/formats.php @@ -0,0 +1,54 @@ + +
aria-labelledby=""> + +
+ +

Выберите подходящий формат работы

+ + +

Выбирайте удобный график, формат и условия работы

+ +
+ + + +
+ $group) : ?> + + + +
+ +
diff --git a/wp-content/themes/hantico/template-parts/getapp.php b/wp-content/themes/hantico/template-parts/getapp.php index 05d5e0f..de5d6cc 100644 --- a/wp-content/themes/hantico/template-parts/getapp.php +++ b/wp-content/themes/hantico/template-parts/getapp.php @@ -1,14 +1,17 @@ -
+
-

Скачай и начни уже сегодня

+

Скачай и начни получать заказы на уже завтра!Скачай и начни уже сегодня

+
Hantico есть на всех платформах. Установи приложение, пройди регистрацию — и через 15 минут ты готов к первому заказу
+
diff --git a/wp-content/themes/hantico/template-parts/income.php b/wp-content/themes/hantico/template-parts/income.php index b29247f..fcaf0ae 100644 --- a/wp-content/themes/hantico/template-parts/income.php +++ b/wp-content/themes/hantico/template-parts/income.php @@ -14,15 +14,19 @@ $this_page_id = get_the_ID(); - $income_title = get_field('calculator_title', $this_page_id) - ?: get_field('income_title', $page_id); + $calculator_title = get_field('calculator_title', $this_page_id); + $income_title = $calculator_title + ? 'Калькулятор дохода ' . esc_html($calculator_title) + : get_field('income_title', $page_id); $income_descr = get_field('income_descr', $page_id); - if ($income_title && $income_descr) : + if ($income_title && ($calculator_title || $income_descr)) : ?>

+
+
diff --git a/wp-content/themes/hantico/template-parts/related.php b/wp-content/themes/hantico/template-parts/related.php index a28a670..a423e5b 100644 --- a/wp-content/themes/hantico/template-parts/related.php +++ b/wp-content/themes/hantico/template-parts/related.php @@ -1,15 +1,44 @@ $current_post_id]) as $field_group) { + foreach (acf_get_fields($field_group) ?: [] as $field) { + if ($field['name'] === 'article_category') { + return; + } + } + } + } + + $selected_ids = []; + foreach ($selected_articles as $row) { + $article = $row['post'] ?? null; + $article_id = $article instanceof WP_Post ? $article->ID : (int) $article; + if ($article_id > 0 && $article_id !== $current_post_id) { + $selected_ids[] = $article_id; + } + } $terms = get_the_terms($current_post_id, 'article_category'); $related_args = [ - 'post_type' => $post_type, + 'post_type' => $post_type === 'news' ? 'news' : 'article', 'posts_per_page' => 6, 'post__not_in' => [$current_post_id], 'orderby' => 'date', 'order' => 'DESC' ]; - if ($terms) { + if ($selected_ids) { + $related_args['post_type'] = 'article'; + $related_args['post__in'] = $selected_ids; + $related_args['posts_per_page'] = -1; + $related_args['orderby'] = 'post__in'; + } elseif ($terms && !is_wp_error($terms)) { $term_ids = wp_list_pluck($terms, 'term_id'); $related_args['tax_query'] = [ [ @@ -20,19 +49,41 @@ ]; } $related_query = new WP_Query($related_args); + if ($selected_ids) { + // WP_Query removes duplicates; restore the exact order and rows from ACF. + $posts_by_id = []; + foreach ($related_query->posts as $selected_post) { + $posts_by_id[$selected_post->ID] = $selected_post; + } + $related_query->posts = []; + foreach ($selected_ids as $selected_id) { + if (isset($posts_by_id[$selected_id])) { + $related_query->posts[] = $posts_by_id[$selected_id]; + } + } + $related_query->post_count = count($related_query->posts); + } + if ($related_query->have_posts()) : - $title = $post_type === 'news' ? 'Другие новости' : 'Вам также может понравиться'; + $blog_title = get_field('blog_title', $current_post_id); + $title = $blog_title + ? 'Полезные материалы для ' . $blog_title . ' от Hantico' + : ($post_type === 'news' ? 'Другие новости' : 'Вам также может понравиться'); ?> -
+
-

-
- have_posts()) { - $related_query->the_post(); - get_template_part('template-parts/articles-item'); - } wp_reset_postdata(); - ?> +

+
diff --git a/wp-content/themes/hantico/template-parts/reviews.php b/wp-content/themes/hantico/template-parts/reviews.php index cc52abe..7dcabf9 100644 --- a/wp-content/themes/hantico/template-parts/reviews.php +++ b/wp-content/themes/hantico/template-parts/reviews.php @@ -1,5 +1,7 @@
-

Отзывы наших клиентов

-
Живые истории водителей и курьеров, которые подключились к Hantico
+

Что говорят о Hantico

+
Реальные истории , которые подключились к Hantico
diff --git a/wp-content/themes/hantico/template-parts/socials.php b/wp-content/themes/hantico/template-parts/socials.php index fbefef0..0919463 100644 --- a/wp-content/themes/hantico/template-parts/socials.php +++ b/wp-content/themes/hantico/template-parts/socials.php @@ -1,70 +1,90 @@

-
-
- - -
*Instagram принадлежат компании Meta, признанной экстремистской на территории РФ
- -
-
- <?php echo $socials_img['alt']; ?> +
+ + +
*Упоминаемые ресурсы Instagram, Facebook, принадлежат компании Meta, признанной экстремистской на территории РФ
+
diff --git a/wp-content/themes/hantico/templates/template-audience.php b/wp-content/themes/hantico/templates/template-audience.php new file mode 100644 index 0000000..0a5c35f --- /dev/null +++ b/wp-content/themes/hantico/templates/template-audience.php @@ -0,0 +1,29 @@ + + + + + +
+ + + + + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/wp-content/themes/hantico/templates/template-blog.php b/wp-content/themes/hantico/templates/template-blog.php index be3f7f1..a275ed7 100644 --- a/wp-content/themes/hantico/templates/template-blog.php +++ b/wp-content/themes/hantico/templates/template-blog.php @@ -10,15 +10,17 @@ Template Name: Блог
home_url('/blog/'), + 'general' => add_query_arg('section', 'general', home_url('/blog/')), + 'taxi' => home_url('/blog-taxi/'), + 'courier' => home_url('/blog-courier/'), + 'cargo' => home_url('/blog-cargo/'), + ]; $blog_title = get_field('blog_title'); $blog_descr = get_field('blog_descr'); - $blog_args = [ - 'post_type' => 'article', - 'posts_per_page' => 6, - 'orderby' => 'date', - 'order' => 'DESC' - ]; - $blog_query = new WP_Query($blog_args); + $blog_query = hantico_blog_query(true); if ($blog_query->have_posts()) : ?>
@@ -32,8 +34,40 @@ Template Name: Блог + +
+ + + + +
@@ -85,31 +119,11 @@ Template Name: Блог 'taxonomy' => 'article_category', 'hide_empty' => true, ]); - $blog_args = [ - 'post_type' => 'article', - 'posts_per_page' => 12, - 'orderby' => 'date', - 'order' => 'DESC' - ]; - if (!empty($current_category)) { - $blog_args['tax_query'] = [ - [ - 'taxonomy' => 'article_category', - 'field' => 'slug', - 'terms' => $current_category - ], - ]; - } - $blog_query = new WP_Query($blog_args); - if ($blog_query->have_posts()) : + $blog_query = hantico_blog_query(); ?>

Все статьи

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