diff --git a/wp-content/themes/hantico/assets/css/style.css b/wp-content/themes/hantico/assets/css/style.css index 5c74fdb..689c62a 100644 --- a/wp-content/themes/hantico/assets/css/style.css +++ b/wp-content/themes/hantico/assets/css/style.css @@ -6537,86 +6537,123 @@ h4 { } } -.h-article-app-cta { - display: flex; - align-items: center; - gap: 24px; - width: 100%; - min-height: 120px; - box-sizing: border-box; - margin: 30px 0; - padding: 18px 32px; - border-radius: 16px; - background: var(--color-red); - font-family: inherit; -} +.h-article-app-cta{ + overflow: hidden; + position: relative; -.h-article-app-cta .h-article-app-cta__image { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 100px; - width: 100px; - height: 100px; -} + padding: 40px; -.h-article-app-cta .h-article-app-cta__image img { - display: block; - width: 100%; - height: 100%; - object-fit: contain; -} + border-radius: 40px; -.h-article-app-cta .h-article-app-cta__content { - flex: 1; - min-width: 0; + display: flex; + justify-content: space-between; + align-items: center; } +.h-article-app-cta::before{ + content: ''; -.h-article-app-cta .h-article-app-cta__title { - margin: 0; - padding: 0; - font-size: 20px; - font-weight: 700; - line-height: 1.4; - color: var(--color-light); + 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 .h-article-app-cta__button { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 145px; - min-height: 40px; - box-sizing: border-box; - padding: 10px 20px; - border: 0; - border-radius: 50px; - background: var(--color-light); - color: var(--color-dark); - font-size: 14px; - font-weight: 600; - line-height: 1.3; - text-align: center; - text-decoration: none; - transition: background 0.2s, color 0.2s; +.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; -.h-article-app-cta .h-article-app-cta__button:hover { - background: var(--color-grey); + 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: 20px 24px; + + border-radius: 60px; + background: #AE001B; + 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); } @media (max-width: 767.98px) { - .h-article-app-cta .h-article-app-cta__title{ - font-size: 16px; + .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%; - .h-article-app-cta .h-article-app-cta__button{ - 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; - flex:auto; + -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; 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/template-parts/article-blocks/cta_2.php b/wp-content/themes/hantico/template-parts/article-blocks/cta_2.php index aeb2bf6..777a881 100644 --- a/wp-content/themes/hantico/template-parts/article-blocks/cta_2.php +++ b/wp-content/themes/hantico/template-parts/article-blocks/cta_2.php @@ -1,31 +1,32 @@
- -
- <?php echo esc_attr($image['alt'] ?? ''); ?> -
- +
+ +

+ - -
-

-
- + +

+ +
- + + + + + Изображение +