*/
}
.blockquote-v1__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
/* Бейдж: дефолт badge--white badge--s; текст редактируемый («Рекомендации», «Итог», «Важно», «Совет») */
.blockquote-v1__badge { flex-shrink: 0; }
.blockquote-v1__text {
font-size: 18px;
font-weight: 400;
line-height: 1.6; /* 160% — читабельность мультистрок */
color: var(--color-text-primary); /* Primary, НЕ Secondary — это акцентный контент */
margin: 0;
}
/* Модификаторы */
.blockquote-v1--no-badge .blockquote-v1__badge { display: none; }
.blockquote-v1--badge-only .blockquote-v1__text { display: none; } /* редкий кейс */
/* Совместимость: старые планы с без класса внутри контента blockquote */
.blockquote-v1__content p {
font-size: 18px;
font-weight: 400;
line-height: 1.6;
color: var(--color-text-primary);
margin: 0;
}
/* ═══════════════════════════════════════════════════════
blockquote-v2 — stacked cards: TAM/SAM/SOM, сравнения, метрики
Спека: design-system/blockquote-V2 Documentation.png (17.07.2026)
Отличие от V1: N белых карточек внутри wrapper, разделённых фоном V0 (gap 2px)
═══════════════════════════════════════════════════════ */
.blockquote-v2 {
display: flex;
flex-direction: column;
gap: 2px; /* фон V0 просвечивает = разделители */
padding: 2px;
border-radius: 16px;
background: var(--color-surface-v0); /* #F9F7F3 */
border: 1px solid var(--color-surface-v1); /* #EEEBE5 */
margin: 0; /* сброс дефолта
*/
}
.blockquote-v2__card {
display: flex;
flex-direction: column;
gap: 24px;
padding: 24px;
border-radius: 12px; /* 12, НЕ 16 — чтобы вписаться в wrapper */
background: var(--color-surface-white); /* #FFFFFF */
}
.blockquote-v2__card-body {
display: flex;
flex-direction: column;
gap: 0; /* value + description tight together */
}
/* Бейдж: Background/Light (#F9F7F3), НЕ Surface/White как в V1! */
.blockquote-v2__badge {
flex-shrink: 0;
background: var(--color-surface-v0) !important; /* перебить дефолт badge--white */
border-color: var(--color-surface-v1) !important;
}
.blockquote-v2__value {
font-size: 24px;
font-weight: 600; /* Semi Bold */
line-height: 1.6; /* 160% */
color: var(--color-text-primary);
}
.blockquote-v2__desc {
font-size: 18px;
font-weight: 400; /* Regular */
line-height: 1.6; /* 160% */
color: var(--color-text-primary); /* Primary, не Secondary */
}
/* ═══════════════════════════════════════════════════════
bp-step-card — пошаговый план (раздел 10)
Вариант blockquote-v2: бейдж + h4 + описание
Спека: 27.07.2026
═══════════════════════════════════════════════════════ */
.bp-step-card {
display: flex;
flex-direction: column;
gap: 2px;
padding: 2px;
border-radius: 16px;
background: var(--color-surface-v0);
border: 1px solid var(--color-surface-v1);
margin: 0 0 16px;
}
.bp-step-item {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
border-radius: 12px;
background: var(--color-surface-white);
}
.bp-step-item__badge {
flex-shrink: 0;
background: var(--color-surface-v0) !important;
border-color: var(--color-surface-v1) !important;
}
.bp-step-item__title {
font-size: 20px;
font-weight: 600;
line-height: 1.3;
color: var(--color-text-primary);
margin: 0;
}
.bp-step-item__desc {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: var(--color-text-primary);
margin: 0;
}
/* ════════════════════════════════════════════════════════════
block-metric-V2 — значение + подпись (новый размерный ряд)
Спека: Info-block-v3 + block-metric-V2 Documentation.png (17.07.2026)
Отличие от V1: фиксированные размеры, НЕТ --l/--m модификаторов
════════════════════════════════════════════════════════════ */
.block-metric-v2 {
display: flex;
flex-direction: column;
gap: 0;
width: fit-content;
/* полностью прозрачный — без фона/рамок/паддингов */
}
.block-metric-v2__value {
font-size: 18px;
font-weight: 600; /* Semi Bold */
line-height: 1.6; /* 160% */
color: var(--color-text-primary);
}
.block-metric-v2__label {
font-size: 14px;
font-weight: 400; /* Regular */
line-height: 1.6; /* 160% */
color: var(--color-text-secondary);
}
/* ════════════════════════════════════════════════════════════
Info-block-v3 — комбинированный инфоблок: метрики + детали
Спека: Info-block-v3 + block-metric-V2 Documentation.png (17.07.2026)
V3 = V1-метрики (сверху) + V2-строки (снизу) + expand + ПРОЗРАЧНЫЙ фон
════════════════════════════════════════════════════════════ */
.info-block-v3 {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
background: transparent;
/* НЕТ фона и рамки — в отличие от V0/V1 рамки V1 и V2 */
box-sizing: border-box;
}
.info-block-v3__metrics {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 20px;
padding: 0;
}
/* Секция детализации (V2-style rows, скрыта по умолчанию) */
.info-block-v3__details {
display: none; /* collapsed by default */
flex-direction: column;
gap: 0;
padding: 0;
}
.info-block-v3__details .tr-info-block-v2 {
border-bottom: 1px solid var(--color-surface-v1);
}
.info-block-v3__details .tr-info-block-v2:last-child {
border-bottom: none;
}
/* Кнопка разворачивания */
.info-block-v3__expand {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 0;
border: none;
background: transparent;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
color: var(--color-text-secondary);
}
.info-block-v3__expand:hover { color: var(--color-text-primary); }
.info-block-v3__expand-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
transition: transform 0.2s;
}
/* Развёрнутое состояние */
.info-block-v3--expanded .info-block-v3__details { display: flex; }
.info-block-v3--expanded .info-block-v3__expand-icon { transform: rotate(180deg); }
/* ════════════════════════════════════════════════════════
Info-block-v4 — карточка контента: header + stacked cards
Спека: Info-block-v4 Documentation.png (17.07.2026)
Two-part: цветной header (V0) + белые карточки (gap 2px = разделители)
Используется для 4.3 Креативы и рекламные объявления
════════════════════════════════════════════════════════ */
.info-block-v4 {
display: flex;
flex-direction: column;
padding: 0;
gap: 0;
border-radius: 16px;
border: 1px solid var(--color-surface-v1); /* #EEEBE5 */
background: transparent;
box-sizing: border-box;
overflow: hidden;
}
/* Header: V0 фон, свой pad */
.info-block-v4__header {
display: flex;
flex-direction: column;
padding: 24px;
gap: 24px;
background: var(--color-surface-v0); /* #F9F7F3 */
}
.info-block-v4__title-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
}
.info-block-v4__logo {
width: 40px;
height: 40px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--color-surface-v0); /* Background/Light, НЕ белый */
}
.info-block-v4__logo svg { width: 40px; height: 40px; }
.info-block-v4__title {
font-size: 18px;
font-weight: 600; /* Semi Bold */
line-height: 1.1; /* 110% — tight heading */
color: var(--color-text-primary);
margin: 0;
}
.info-block-v4__description {
font-size: 18px;
font-weight: 400;
line-height: 1.6; /* 160% */
color: var(--color-text-secondary); /* #8B8A84 */
margin: 0;
}
/* Cards container: V0 фон, gap 2px = разделители */
.info-block-v4__cards {
display: flex;
flex-direction: column;
padding: 0 2px 2px 2px; /* 0/2/2/2, нет верхнего паддинга! */
gap: 2px;
background: var(--color-surface-v0); /* просвечивает между карточками */
}
/* Inner card — белая, r12 */
.info-block-v4__card {
display: flex;
flex-direction: column;
align-items: flex-start; /* бейджи hug content, не stretch */
padding: 24px;
gap: 24px;
border-radius: 12px; /* 12, НЕ 16 */
background: var(--color-surface-white); /* #FFFFFF */
}
.info-block-v4__card > *:not(.badge) { align-self: stretch; } /* текст на всю ширину, бейдж — по контенту */
/* Content inside cards 1-3 */
.info-block-v4__card-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.info-block-v4__card-strong {
font-size: 18px;
font-weight: 600; /* Semi Bold */
line-height: 1.6;
color: var(--color-text-primary);
}
.info-block-v4__card-body {
font-size: 18px;
font-weight: 400;
line-height: 1.6;
color: var(--color-text-primary); /* Primary, НЕ Secondary! */
}
/* Service card (card 4) — другая структура */
.info-block-v4__service {
display: flex;
flex-direction: column;
gap: 12px;
}
.info-block-v4__service .btn { align-self: flex-start; } /* кнопка → hug content, не тянется на всю ширину (18.07) */
.info-block-v4__service-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.info-block-v4__service-name {
font-size: 18px;
font-weight: 600;
line-height: 1.6;
color: var(--color-neutral-dark); /* Neutral/Dark → #3A3735 */
}
.info-block-v4__service-desc {
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: var(--color-text-secondary); /* #8B8A84 */
}
/* Кнопка использует .btn--m.btn--primary — стили из компонента .btn */
.info-block-v4__divider {
border: none;
border-top: 1px solid var(--color-surface-v1);
margin: 0;
}
/* Модификаторы */
.info-block-v4--no-header .info-block-v4__header { display: none; }
.info-block-v4--no-cards .info-block-v4__cards { display: none; }
/* ════════════════════════════════════════════════════════
Bank-CPA — карточка рекомендации банка (CPA-партнёр)
Спека: Bank-CPA + Banks-CPA-list Documentation.png (17.07.2026)
Два размера: Size=M (горизонтальный) и Size=L (вертикальный)
════════════════════════════════════════════════════════ */
.bank-cpa {
display: flex;
border-radius: 16px;
border: 1px solid var(--color-surface-v1);
background: var(--color-surface-v0);
box-sizing: border-box;
}
/* Size=M: горизонтальный, фикс. высота 96px */
.bank-cpa--m {
flex-direction: row;
align-items: center;
padding: 24px;
gap: 24px;
min-height: 96px;
}
/* Size=L: вертикальный, авто-высота */
.bank-cpa--l {
flex-direction: column;
padding: 16px;
gap: 24px;
width: 100%;
}
/* Header: logo + name */
.bank-cpa__header {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
}
.bank-cpa--l .bank-cpa__header {
flex-direction: row; /* logo после name, но внутри header — row */
}
.bank-cpa__logo {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 8px; /* 8, НЕ 12! */
overflow: hidden;
}
.bank-cpa__logo img, .bank-cpa__logo svg {
width: 40px;
height: 40px;
display: block;
}
.bank-cpa__name {
display: flex;
flex-direction: column;
gap: 0;
flex: 1 1 auto;
min-width: 0;
}
.bank-cpa__title {
font-size: 18px;
font-weight: 600;
line-height: 1.6;
color: var(--color-text-primary);
}
.bank-cpa__subtitle {
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: var(--color-text-secondary);
}
/* Size=L: logo справа от name */
.bank-cpa--l .bank-cpa__logo { order: 2; } /* logo AFTER name */
.bank-cpa--l .bank-cpa__name { order: 1; }
/* Кнопка использует .btn--m.btn--secondary / .btn--s.btn--secondary */
/* ── Mobile: M-вариант → L-вариант (лого вправо, кнопка вниз) ── */
@media (max-width: 767px) {
.bank-cpa--m {
flex-direction: column;
padding: 16px;
gap: 24px;
height: auto;
}
.bank-cpa--m .bank-cpa__header {
flex-direction: row;
width: 100%;
}
.bank-cpa--m .bank-cpa__logo {
order: 2; /* лого вправо */
}
.bank-cpa--m .bank-cpa__name {
order: 1; /* title слева */
}
.bank-cpa--m .bank-cpa__action {
margin-left: 0; /* убрать auto-margin M-варианта */
width: 100%;
}
.bank-cpa--m .bank-cpa__action .btn {
width: 100%;
justify-content: center;
}
}
/* ── Бухгалтерия: M → L на мобилке ── */
@media (max-width: 767px) {
.bp-bk-card {
flex-direction: column;
padding: 16px;
gap: 24px;
height: auto;
}
.bp-bk-card__header {
flex-direction: row;
width: 100%;
}
.bp-bk-card__logo { order: 2; }
.bp-bk-card__name { order: 1; }
.bp-bk-card__action {
margin-left: 0;
width: 100%;
}
.bp-bk-card__action .btn {
width: 100%;
justify-content: center;
}
}
.bank-cpa__action {
display: flex;
flex-shrink: 0;
}
.bank-cpa--m .bank-cpa__action { margin-left: auto; }
.bank-cpa--l .bank-cpa__action { align-self: flex-start; }
/* Бухгалтерия — те же стили что bank-cpa--m, свой класс */
.bp-bk-card {
display: flex;
flex-direction: row;
align-items: center;
padding: 24px;
gap: 24px;
min-height: 96px;
border-radius: 16px;
border: 1px solid var(--color-surface-v1);
background: var(--color-surface-v0);
box-sizing: border-box;
}
.bp-bk-card__header { display: flex; flex-direction: row; align-items: center; gap: 24px; }
.bp-bk-card__logo { width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.bp-bk-card__logo img, .bp-bk-card__logo svg { width: 40px; height: 40px; display: block; }
.bp-bk-card__name { display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-width: 0; }
.bp-bk-card__title { font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--color-text-primary); }
.bp-bk-card__subtitle { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--color-text-secondary); }
.bp-bk-card__action { display: flex; flex-shrink: 0; margin-left: auto; }
/* ════════════════════════════════════════════════════════
Banks-CPA-list — контейнер-список банковских карточек
Прозрачный, вертикальный стек, gap 8px
════════════════════════════════════════════════════════ */
.banks-cpa-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
background: transparent;
width: 100%;
}
/* ════════════════════════════════════════════════════════
Input — поле ввода (10 вариантов: Size L/M × State ×5)
Спека: Select System + Input + Segmented Control (17.07.2026)
════════════════════════════════════════════════════════ */
/* Input по Figma-спеке: r99, white bg, V1 outline, лёгкая тень в default/hover.
States: Default (тень + V1) / Hover (тень + V2) / Focused (orange, БЕЗ тени) /
Filled (V1, без тени) / Disabled (opacity .5).
Текст: placeholder secondary op.7; filled — text-primary. LH 1.6 */
.input, input.input, select.input, textarea.input {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
border: 1px solid var(--color-surface-v1);
border-radius: 99px;
background: var(--color-surface-white);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
font-family: Inter, sans-serif;
font-weight: 400;
line-height: 1.6;
color: var(--color-text-primary);
box-sizing: border-box;
width: 100%;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.input::placeholder { color: var(--color-text-secondary); opacity: 0.7; }
/* Number-инпуты: убрать спиннеры + выровнять текст по вертикали как у text */
.input::-webkit-outer-spin-button,
.input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.input[type="number"] { -moz-appearance: textfield; line-height: normal; }
/* Sizes: L 52px/16px, M 40px/14px. Pad-right из спеки (10/4) — для варианта
со встроенным addon (segmented); без addon — симметричный */
.input--l { height: 52px; font-size: 16px; padding-left: 16px; padding-right: 16px; }
.input--m { height: 40px; font-size: 14px; padding-left: 12px; padding-right: 12px; }
.input-group .input--l { padding-right: 118px; } /* место под сегмент S (2 таба ~100px + 10px) */
.input-group .input--m { padding-right: 112px; }
/* States */
.input:hover:not(:disabled):not(:focus) { border-color: var(--color-surface-v2); }
.input:focus { border-color: var(--color-accent-primary-orange); box-shadow: none; }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input--error { border-color: var(--color-accent-primary-red); }
/* Textarea-вариант: multiline, r16 вместо пилюли */
textarea.input { border-radius: 16px; height: auto; padding-top: 12px; padding-bottom: 12px; resize: vertical; }
/* Обёртка со встроенным segmented control (справа внутри инпута) */
.input-group { position: relative; display: flex; align-items: center; }
.input-group__addon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.input-group--m .input-group__addon { right: 4px; }
/* Нативный
Купить духи