task 17075 | сделал блоки для блога
This commit is contained in:
web_103.2 committed
1 parent
73a51cf6f4
commit
6edf5d69bd
10 files changed
+891
-23
No files matched your search
@@ -4138,6 +4138,9 @@ 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;
|
||||
@@ -5947,14 +5950,14 @@ h4 {
|
||||
|
||||
/* новые */
|
||||
|
||||
.h-article-hero {
|
||||
--h-hero-accent: #d52d49;
|
||||
--h-hero-text: #202b35;
|
||||
--h-hero-muted: #68747f;
|
||||
--h-hero-line: #e7eaf0;
|
||||
--h-hero-bg: #f7f8fa;
|
||||
--h-hero-radius: 26px;
|
||||
|
||||
.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;
|
||||
@@ -5981,7 +5984,7 @@ h4 {
|
||||
min-height: 600px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--h-hero-radius);
|
||||
background: #e4e8ec;
|
||||
background: var(--color-grey);
|
||||
}
|
||||
|
||||
.h-article-hero__image {
|
||||
@@ -6003,7 +6006,7 @@ h4 {
|
||||
|
||||
.h-article-hero__breadcrumb-divider {
|
||||
flex: none;
|
||||
color: #a9b0b8;
|
||||
color: var(--color-grey-light);
|
||||
}
|
||||
|
||||
.h-article-hero__breadcrumb-current {
|
||||
@@ -6024,9 +6027,9 @@ h4 {
|
||||
align-items: center;
|
||||
min-height: 29px;
|
||||
padding: 5px 12px;
|
||||
border: 1px solid rgba(213, 45, 73, .17);
|
||||
border: 1px solid color-mix(in srgb, var(--color-red) 17%, transparent);
|
||||
border-radius: 100px;
|
||||
background: #fff0f3;
|
||||
background: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
|
||||
color: var(--h-hero-accent);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
@@ -6045,7 +6048,11 @@ h4 {
|
||||
}
|
||||
|
||||
.h-article-hero__title > span {
|
||||
background: linear-gradient(98deg, #f05d6b 0%, #bc203f 100%);
|
||||
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;
|
||||
@@ -6054,7 +6061,7 @@ h4 {
|
||||
.h-article-hero__description {
|
||||
max-width: 710px;
|
||||
margin: 24px 0 34px;
|
||||
color: #535f6c;
|
||||
color: var(--color-text);
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
@@ -6068,7 +6075,7 @@ h4 {
|
||||
margin-top: auto;
|
||||
padding-top: 25px;
|
||||
border-top: 1px solid var(--h-hero-line);
|
||||
color: #4e5a65;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.h-article-hero__meta-item {
|
||||
@@ -6088,7 +6095,7 @@ h4 {
|
||||
}
|
||||
|
||||
.h-article-hero__meta-item + .h-article-hero__meta-item {
|
||||
border-left: 1px solid #d7dce3;
|
||||
border-left: 1px solid var(--color-grey);
|
||||
}
|
||||
|
||||
.h-article-hero__meta-item svg {
|
||||
@@ -6103,3 +6110,574 @@ h4 {
|
||||
color: var(--h-hero-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.h-attention {
|
||||
--attention-color: var(--color-red);
|
||||
--attention-bg: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
|
||||
--attention-icon-bg: color-mix(in srgb, var(--color-red) 15%, var(--color-light));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 28px 0;
|
||||
padding: 24px 28px;
|
||||
border-radius: 16px;
|
||||
background: var(--attention-bg);
|
||||
}
|
||||
|
||||
.h-attention--warning {
|
||||
--attention-color: var(--color-red);
|
||||
--attention-bg: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
|
||||
--attention-icon-bg: color-mix(in srgb, var(--color-red) 15%, var(--color-light));
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 48px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: var(--attention-icon-bg);
|
||||
color: var(--attention-color);
|
||||
}
|
||||
|
||||
.h-attention__icon span {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.h-attention__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.65;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.h-attention__content p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.h-attention__content p + p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.h-attention__content a {
|
||||
color: var(--attention-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.h-attention__content > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-attention{
|
||||
padding: 12px 14px;
|
||||
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.h-article-quote {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 30px 0;
|
||||
padding: 28px 16px;
|
||||
border-radius: 14px;
|
||||
background: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__avatar {
|
||||
display: block;
|
||||
flex: 0 0 90px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__author {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__text {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1.3;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-article-quote{
|
||||
padding: 12px 14px;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__text{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.h-article-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
margin: 30px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.h-article-cards .h-article-cards__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 110px;
|
||||
padding: 20px 22px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--color-grey);
|
||||
border-radius: 10px;
|
||||
background: var(--color-light);
|
||||
box-shadow: 0 2px 12px color-mix(in srgb, var(--color-dark) 8%, transparent);
|
||||
}
|
||||
|
||||
.h-article-cards .h-article-cards__item p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.h-article-cards .h-article-cards__item p + p {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-article-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.h-article-cards .h-article-cards__item p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.h-article-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 30px 40px;
|
||||
margin: 30px 0;
|
||||
background: var(--color-dark);
|
||||
border-radius: 22px;
|
||||
color: var(--color-light);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__title {
|
||||
margin: 0 0 12px;
|
||||
padding: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__description {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 520px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: var(--color-grey);
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 245px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 20px;
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s, color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__btn--outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-grey-light);
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__btn--outline:hover {
|
||||
background: var(--color-light);
|
||||
border-color: var(--color-light);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__btn--white {
|
||||
background: var(--color-light);
|
||||
border: 1px solid var(--color-light);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__btn--white:hover {
|
||||
background: var(--color-grey);
|
||||
border-color: var(--color-grey);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-article-app-cta,
|
||||
.h-article-cta{
|
||||
flex-direction: column;
|
||||
}
|
||||
.h-article-cta .h-article-cta__content{
|
||||
width: 100%;
|
||||
}
|
||||
.h-article-cta .h-article-cta__actions{
|
||||
width: 100%;
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.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 .h-article-app-cta__image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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 .h-article-app-cta__button:hover {
|
||||
background: var(--color-grey);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-article-app-cta .h-article-app-cta__title{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__button{
|
||||
width: 100%;
|
||||
|
||||
flex:auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 40px 0;
|
||||
padding: 40px 30px;
|
||||
background: var(--color-light);
|
||||
border-radius: 18px;
|
||||
font-family: inherit;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.h-app-steps *,
|
||||
.h-app-steps *::before,
|
||||
.h-app-steps *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__title {
|
||||
margin: 0 0 40px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(210px, 35%) minmax(0, 1fr);
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__phone img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: auto;
|
||||
max-height: 420px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
column-gap: 28px;
|
||||
row-gap: 40px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 44px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
background: var(--color-grey-light);
|
||||
border-radius: 12px;
|
||||
color: var(--color-light);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__step:first-child .h-app-steps__number {
|
||||
background: var(--color-red);
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__step-title {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: var(--color-dark);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__description {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 1.55;
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__qr {
|
||||
display: block;
|
||||
flex: 0 0 82px;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
max-width: none;
|
||||
object-fit: contain;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1279.98px) {
|
||||
.h-app-steps .h-app-steps__layout{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.h-app-steps .h-app-steps__phone{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-app-steps .h-app-steps__title{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__grid{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user