Good-Production/hantico
9
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

task 17075 | переделал h-article-app-cta

Browse Source
This commit is contained in:
web_103.2 committed 2026-10-22 13:12:08 +03:00
1 parent 7276d6af44
commit a628f5ced7
4 files changed
+119 -81
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

wp-content/themes/hantico/assets/css/style.css
+101 -64
View File
@@ -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;