/* ========================================================================== CYBC Detail V2 Общая библиотека контентных компонентов для детальных страниц блога и услуг. ВАЖНО: 1. Файл подключается только в соответствующих детальных шаблонах Bitrix. 2. Корневой контейнер страницы обязан иметь класс .cybc-detail-v2. 3. Все правила изолированы этим классом и не изменяют старые страницы сайта. 4. Демонстрационные стили и панель прототипа Клода сюда не перенесены. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Область действия, токены и базовые настройки -------------------------------------------------------------------------- */ .cybc-detail-v2 { --cybc-v2-text: #10131c; --cybc-v2-body: #40454d; --cybc-v2-muted: #898d94; --cybc-v2-line: #dedede; --cybc-v2-surface: #f6f6f6; --cybc-v2-bg: #ffffff; --cybc-v2-accent: #20c78f; --cybc-v2-accent-deep: #136660; --cybc-v2-accent-surface: #edfbf6; --cybc-v2-alert: #f64343; --cybc-v2-alert-surface: #fdf1f1; --cybc-v2-link: #1a59d9; /* TikTok Sans используется прототипом. Пока веб-файлы шрифта не подключены, браузер безопасно перейдёт к системному стеку. */ --cybc-v2-font: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cybc-v2-s8: 8px; --cybc-v2-s12: 12px; --cybc-v2-s16: 16px; --cybc-v2-s24: 24px; --cybc-v2-s32: 32px; --cybc-v2-s48: 48px; --cybc-v2-s64: 64px; --cybc-v2-s96: 96px; --cybc-v2-h1: 40px; --cybc-v2-h1-lh: 50px; --cybc-v2-h2: 30px; --cybc-v2-h2-lh: 38px; --cybc-v2-h3: 22px; --cybc-v2-h3-lh: 30px; --cybc-v2-h4: 20px; --cybc-v2-h4-lh: 28px; --cybc-v2-lead: 18px; --cybc-v2-lead-lh: 28px; --cybc-v2-base: 16px; --cybc-v2-base-lh: 26px; --cybc-v2-sm: 14px; --cybc-v2-sm-lh: 22px; --cybc-v2-xs: 12px; --cybc-v2-xs-lh: 18px; --cybc-v2-gap-section: var(--cybc-v2-s48); --cybc-v2-gap-heading: var(--cybc-v2-s12); --cybc-v2-gap-block: var(--cybc-v2-s16); --cybc-v2-main-width: 752px; --cybc-v2-rail-width: 320px; --cybc-v2-page-width: 1104px; --cybc-v2-radius: 8px; /* SVG-маски из прототипа. Значок получает цвет через background. */ --cybc-v2-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); --cybc-v2-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); --cybc-v2-icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E"); --cybc-v2-icon-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E"); --cybc-v2-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); --cybc-v2-icon-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); /* Тематические пиктограммы. Модификаторы .a-icon--* можно использовать внутри карточек, цепочек, CTA и других компонентов Detail V2. */ --cybc-v2-icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); --cybc-v2-icon-employee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M6 16c.7-2 5.3-2 6 0M15 9h3M15 13h3'/%3E%3C/svg%3E"); --cybc-v2-icon-activity: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-7 5 14 2.5-7h4'/%3E%3C/svg%3E"); --cybc-v2-icon-form: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); --cybc-v2-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10M4 12h5M13 12h7'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='8' cy='17' r='2'/%3E%3Ccircle cx='11' cy='12' r='2'/%3E%3C/svg%3E"); --cybc-v2-icon-transfer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h15M15 3l4 4-4 4M20 17H5M9 13l-4 4 4 4'/%3E%3C/svg%3E"); --cybc-v2-icon-database: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v7c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12v7c0 1.7 3.6 3 8 3s8-1.3 8-3v-7'/%3E%3C/svg%3E"); --cybc-v2-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E"); --cybc-v2-icon-browser: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M7 6.5h.01M10 6.5h.01'/%3E%3C/svg%3E"); --cybc-v2-icon-marketing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 15-6v14L3 13zM11 15l1.5 5H8l-2-6'/%3E%3Cpath d='M21 10v4'/%3E%3C/svg%3E"); --cybc-v2-icon-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H6a4 4 0 0 1-.5-7.97A6.5 6.5 0 0 1 18 9a5 5 0 0 1-.5 10z'/%3E%3C/svg%3E"); --cybc-v2-icon-contractor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 12 3 3c1 1 2.5 1 3.5 0l4.5-4.5M3 8l4-3 4 2M21 8l-4-3-4 2M3 8v7l4 3M21 8v7l-4 3'/%3E%3C/svg%3E"); --cybc-v2-icon-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 8-8M15 8l3 3M17 6l2 2'/%3E%3C/svg%3E"); --cybc-v2-icon-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='2'/%3E%3Crect x='3' y='14' width='18' height='6' rx='2'/%3E%3Cpath d='M7 7h.01M7 17h.01M11 7h6M11 17h6'/%3E%3C/svg%3E"); --cybc-v2-icon-logs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM11 3h6v4h-6zM3 8h4M3 12h4M3 16h4'/%3E%3C/svg%3E"); --cybc-v2-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); --cybc-v2-icon-incident: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 17h12l-1-7a5 5 0 0 0-10 0zM4 21h16M12 3V1M3 8H1M23 8h-2M5 3 3.5 1.5M19 3l1.5-1.5'/%3E%3C/svg%3E"); --cybc-v2-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); font-family: var(--cybc-v2-font); color: var(--cybc-v2-text); background: var(--cybc-v2-bg); } .cybc-detail-v2, .cybc-detail-v2 *, .cybc-detail-v2 *::before, .cybc-detail-v2 *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- 2. Каркас детальной страницы -------------------------------------------------------------------------- */ .cybc-detail-v2 .article__inner { max-width: var(--cybc-v2-page-width); margin: 0 auto; padding: var(--cybc-v2-s48) var(--cybc-v2-s24) var(--cybc-v2-s96); } .cybc-detail-v2 .article__layout { display: grid; grid-template-columns: var(--cybc-v2-main-width) var(--cybc-v2-rail-width); gap: var(--cybc-v2-s32); align-items: start; } .cybc-detail-v2 .article__main, .cybc-detail-v2 .article__rail { min-width: 0; } /* -------------------------------------------------------------------------- 3. Заголовочная часть статьи или услуги -------------------------------------------------------------------------- */ .cybc-detail-v2 .article__breadcrumbs { margin-bottom: var(--cybc-v2-s24); color: var(--cybc-v2-muted); font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); } .cybc-detail-v2 .article__breadcrumbs a { color: inherit; text-decoration: none; } .cybc-detail-v2 .article__breadcrumbs a:hover { color: var(--cybc-v2-accent-deep); } .cybc-detail-v2 .article__title { margin: 0 0 var(--cybc-v2-s24); color: var(--cybc-v2-text); font-size: var(--cybc-v2-h1); line-height: var(--cybc-v2-h1-lh); font-weight: 800; text-wrap: balance; } .cybc-detail-v2 .article__meta { display: flex; align-items: center; gap: var(--cybc-v2-s12); margin-bottom: var(--cybc-v2-s32); } .cybc-detail-v2 .article__meta-avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: var(--cybc-v2-accent-surface); object-fit: cover; } .cybc-detail-v2 .article__meta-name { color: var(--cybc-v2-text); font-size: var(--cybc-v2-base); line-height: 22px; font-weight: 600; } .cybc-detail-v2 .article__meta-info { color: var(--cybc-v2-muted); font-size: var(--cybc-v2-sm); line-height: 20px; } .cybc-detail-v2 .article__lead { margin: 0 0 var(--cybc-v2-s16); color: var(--cybc-v2-body); font-size: var(--cybc-v2-lead); line-height: var(--cybc-v2-lead-lh); text-wrap: pretty; } /* -------------------------------------------------------------------------- 4. Типографика основного содержимого Стандартные элементы изменяются только внутри .article-body. -------------------------------------------------------------------------- */ .cybc-detail-v2 .article-body { color: var(--cybc-v2-body); font-size: var(--cybc-v2-base); line-height: var(--cybc-v2-base-lh); } .cybc-detail-v2 .article-body > * + * { margin-top: var(--cybc-v2-gap-block); } .cybc-detail-v2 .article-body > :first-child { margin-top: 0; } .cybc-detail-v2 .article-body h2, .cybc-detail-v2 .article-body h3, .cybc-detail-v2 .article-body h4 { color: var(--cybc-v2-text); font-weight: 800; text-wrap: balance; } .cybc-detail-v2 .article-body > h2 { margin-top: var(--cybc-v2-gap-section); margin-bottom: 0; font-size: var(--cybc-v2-h2); line-height: var(--cybc-v2-h2-lh); scroll-margin-top: var(--cybc-v2-s24); } .cybc-detail-v2 .article-body > h3 { margin-top: var(--cybc-v2-s32); margin-bottom: 0; font-size: var(--cybc-v2-h3); line-height: var(--cybc-v2-h3-lh); } .cybc-detail-v2 .article-body > h4 { margin-top: var(--cybc-v2-s24); margin-bottom: 0; font-size: var(--cybc-v2-h4); line-height: var(--cybc-v2-h4-lh); } .cybc-detail-v2 .article-body > h2 + *, .cybc-detail-v2 .article-body > h3 + *, .cybc-detail-v2 .article-body > h4 + * { margin-top: var(--cybc-v2-gap-heading); } .cybc-detail-v2 .article-body p { margin: 0; text-wrap: pretty; } .cybc-detail-v2 .article-body a { color: var(--cybc-v2-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .cybc-detail-v2 .article-body a:hover { color: var(--cybc-v2-accent); } .cybc-detail-v2 .article-body strong { color: var(--cybc-v2-text); font-weight: 600; } /* -------------------------------------------------------------------------- 5. Списки .a-list — обычное перечисление. .a-list--check — действия, требования и выполненные проверки. .a-list--risk — риски, ограничения и негативные последствия. -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-list { display: grid; gap: var(--cybc-v2-s12); margin: 0; padding: 0; list-style: none; } .cybc-detail-v2 .a-list li { position: relative; padding-left: var(--cybc-v2-s32); color: var(--cybc-v2-body); text-wrap: pretty; } .cybc-detail-v2 .a-list li::before { content: ""; position: absolute; top: 10px; left: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--cybc-v2-accent); } .cybc-detail-v2 .a-list--check li::before, .cybc-detail-v2 .a-list--risk li::before { top: 4px; left: 0; width: 20px; height: 20px; border-radius: 0; background: var(--cybc-v2-accent-deep); mask: var(--cybc-v2-icon-check) center / 20px no-repeat; -webkit-mask: var(--cybc-v2-icon-check) center / 20px no-repeat; } .cybc-detail-v2 .a-list--risk li::before { background: var(--cybc-v2-alert); mask-image: var(--cybc-v2-icon-alert); -webkit-mask-image: var(--cybc-v2-icon-alert); } /* -------------------------------------------------------------------------- 6. Смысловые плашки -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-callout { display: flex; gap: var(--cybc-v2-s12); padding: var(--cybc-v2-s24); border-radius: var(--cybc-v2-radius); background: var(--cybc-v2-surface); } .cybc-detail-v2 .a-callout__icon { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; background: var(--cybc-v2-accent-deep); mask-position: center; mask-size: 20px; mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 20px; -webkit-mask-repeat: no-repeat; } .cybc-detail-v2 .a-callout__label { margin-bottom: 4px; color: var(--cybc-v2-accent-deep); font-size: var(--cybc-v2-sm); line-height: 20px; font-weight: 600; } .cybc-detail-v2 .a-callout__text { color: var(--cybc-v2-text); text-wrap: pretty; } .cybc-detail-v2 .a-callout--define .a-callout__icon { mask-image: var(--cybc-v2-icon-quote); -webkit-mask-image: var(--cybc-v2-icon-quote); } .cybc-detail-v2 .a-callout--result { background: var(--cybc-v2-accent-surface); } .cybc-detail-v2 .a-callout--result .a-callout__icon { mask-image: var(--cybc-v2-icon-check); -webkit-mask-image: var(--cybc-v2-icon-check); } .cybc-detail-v2 .a-callout--warn { background: var(--cybc-v2-alert-surface); } .cybc-detail-v2 .a-callout--warn .a-callout__icon { background: var(--cybc-v2-alert); mask-image: var(--cybc-v2-icon-alert); -webkit-mask-image: var(--cybc-v2-icon-alert); } .cybc-detail-v2 .a-callout--warn .a-callout__label { color: var(--cybc-v2-alert); } .cybc-detail-v2 .a-callout--fact .a-callout__icon { mask-image: var(--cybc-v2-icon-trend); -webkit-mask-image: var(--cybc-v2-icon-trend); } /* -------------------------------------------------------------------------- 7. Сетка смысловых элементов и сравнение -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-grid, .cybc-detail-v2 .a-compare { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); background: var(--cybc-v2-line); } .cybc-detail-v2 .a-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cybc-detail-v2 .a-grid--2, .cybc-detail-v2 .a-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cybc-detail-v2 .a-cell, .cybc-detail-v2 .a-compare__col { padding: var(--cybc-v2-s24); background: var(--cybc-v2-bg); } .cybc-detail-v2 .a-cell__head, .cybc-detail-v2 .a-compare__head { display: flex; align-items: center; gap: var(--cybc-v2-s8); margin-bottom: var(--cybc-v2-s8); } .cybc-detail-v2 .a-cell__icon { width: 20px; height: 20px; flex: 0 0 20px; background: var(--cybc-v2-accent-deep); mask-position: center; mask-size: 20px; mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 20px; -webkit-mask-repeat: no-repeat; } .cybc-detail-v2 .a-cell__icon--quote { mask-image: var(--cybc-v2-icon-quote); -webkit-mask-image: var(--cybc-v2-icon-quote); } .cybc-detail-v2 .a-cell__icon--check { mask-image: var(--cybc-v2-icon-check); -webkit-mask-image: var(--cybc-v2-icon-check); } .cybc-detail-v2 .a-cell__icon--alert { background: var(--cybc-v2-alert); mask-image: var(--cybc-v2-icon-alert); -webkit-mask-image: var(--cybc-v2-icon-alert); } /* -------------------------------------------------------------------------- 7.1. Расширенный семантический набор иконок Один модификатор .a-icon--* работает во всех иконочных контейнерах UI-кита. Это позволяет выбирать пиктограмму по смыслу, не копируя SVG в контент. -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-icon--users { mask-image: var(--cybc-v2-icon-users); -webkit-mask-image: var(--cybc-v2-icon-users); } .cybc-detail-v2 .a-icon--employee { mask-image: var(--cybc-v2-icon-employee); -webkit-mask-image: var(--cybc-v2-icon-employee); } .cybc-detail-v2 .a-icon--activity { mask-image: var(--cybc-v2-icon-activity); -webkit-mask-image: var(--cybc-v2-icon-activity); } .cybc-detail-v2 .a-icon--form { mask-image: var(--cybc-v2-icon-form); -webkit-mask-image: var(--cybc-v2-icon-form); } .cybc-detail-v2 .a-icon--settings { mask-image: var(--cybc-v2-icon-settings); -webkit-mask-image: var(--cybc-v2-icon-settings); } .cybc-detail-v2 .a-icon--transfer { mask-image: var(--cybc-v2-icon-transfer); -webkit-mask-image: var(--cybc-v2-icon-transfer); } .cybc-detail-v2 .a-icon--database { mask-image: var(--cybc-v2-icon-database); -webkit-mask-image: var(--cybc-v2-icon-database); } .cybc-detail-v2 .a-icon--trash { mask-image: var(--cybc-v2-icon-trash); -webkit-mask-image: var(--cybc-v2-icon-trash); } .cybc-detail-v2 .a-icon--browser { mask-image: var(--cybc-v2-icon-browser); -webkit-mask-image: var(--cybc-v2-icon-browser); } .cybc-detail-v2 .a-icon--marketing { mask-image: var(--cybc-v2-icon-marketing); -webkit-mask-image: var(--cybc-v2-icon-marketing); } .cybc-detail-v2 .a-icon--cloud { mask-image: var(--cybc-v2-icon-cloud); -webkit-mask-image: var(--cybc-v2-icon-cloud); } .cybc-detail-v2 .a-icon--contractor { mask-image: var(--cybc-v2-icon-contractor); -webkit-mask-image: var(--cybc-v2-icon-contractor); } .cybc-detail-v2 .a-icon--key { mask-image: var(--cybc-v2-icon-key); -webkit-mask-image: var(--cybc-v2-icon-key); } .cybc-detail-v2 .a-icon--server { mask-image: var(--cybc-v2-icon-server); -webkit-mask-image: var(--cybc-v2-icon-server); } .cybc-detail-v2 .a-icon--logs { mask-image: var(--cybc-v2-icon-logs); -webkit-mask-image: var(--cybc-v2-icon-logs); } .cybc-detail-v2 .a-icon--shield { mask-image: var(--cybc-v2-icon-shield); -webkit-mask-image: var(--cybc-v2-icon-shield); } .cybc-detail-v2 .a-icon--incident { mask-image: var(--cybc-v2-icon-incident); -webkit-mask-image: var(--cybc-v2-icon-incident); } .cybc-detail-v2 .a-icon--clock { mask-image: var(--cybc-v2-icon-clock); -webkit-mask-image: var(--cybc-v2-icon-clock); } /* В карточках рисков сохраняется красный статусный цвет, а сама пиктограмма остаётся тематической: браузер, маркетинг, сотрудник или облако. */ .cybc-detail-v2 .a-grid--risks .a-cell__icon { background: var(--cybc-v2-alert); } .cybc-detail-v2 .a-cell__title { color: var(--cybc-v2-text); font-size: var(--cybc-v2-base); line-height: 24px; font-weight: 600; } .cybc-detail-v2 .a-cell__text { color: var(--cybc-v2-body); font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); text-wrap: pretty; } .cybc-detail-v2 .a-compare__title { color: var(--cybc-v2-text); font-size: var(--cybc-v2-lead); line-height: 26px; font-weight: 800; } /* -------------------------------------------------------------------------- 8. Цитата -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-quote { display: flex; gap: var(--cybc-v2-s16); margin: 0; padding: 4px 0; } .cybc-detail-v2 .a-quote::before { content: ""; width: 3px; flex: 0 0 3px; border-radius: 2px; background: var(--cybc-v2-accent); } .cybc-detail-v2 .a-quote p { margin: 0; color: var(--cybc-v2-text); font-size: var(--cybc-v2-h4); line-height: 32px; text-wrap: pretty; } /* -------------------------------------------------------------------------- 9. Хронология -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-timeline { display: grid; } .cybc-detail-v2 .a-stage { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--cybc-v2-s24); padding-bottom: var(--cybc-v2-s32); } .cybc-detail-v2 .a-stage__period { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 6px; background: var(--cybc-v2-accent-surface); color: var(--cybc-v2-accent-deep); font-size: var(--cybc-v2-sm); line-height: 20px; font-weight: 600; white-space: nowrap; } .cybc-detail-v2 .a-stage__title { margin-bottom: var(--cybc-v2-s8); color: var(--cybc-v2-text); font-size: var(--cybc-v2-h4); line-height: var(--cybc-v2-h4-lh); font-weight: 800; text-wrap: balance; } .cybc-detail-v2 .a-stage__text { color: var(--cybc-v2-body); text-wrap: pretty; } /* -------------------------------------------------------------------------- 10. Схема последовательности -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-chain { padding: var(--cybc-v2-s24); border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); background: var(--cybc-v2-bg); } .cybc-detail-v2 .a-chain__caption { margin-bottom: var(--cybc-v2-s16); color: var(--cybc-v2-text); font-size: var(--cybc-v2-base); line-height: 24px; font-weight: 800; } .cybc-detail-v2 .a-chain__steps { display: flex; align-items: stretch; gap: var(--cybc-v2-s8); margin-bottom: var(--cybc-v2-s16); } .cybc-detail-v2 .a-chain__step { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; align-items: center; gap: 10px; padding: var(--cybc-v2-s16) var(--cybc-v2-s12); border-radius: var(--cybc-v2-radius); background: var(--cybc-v2-accent-surface); text-align: center; } .cybc-detail-v2 .a-chain__step--end { background: var(--cybc-v2-alert-surface); } .cybc-detail-v2 .a-chain__icon { width: 24px; height: 24px; background: var(--cybc-v2-accent-deep); mask-position: center; mask-size: 24px; mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 24px; -webkit-mask-repeat: no-repeat; } .cybc-detail-v2 .a-chain__icon--quote { mask-image: var(--cybc-v2-icon-quote); -webkit-mask-image: var(--cybc-v2-icon-quote); } .cybc-detail-v2 .a-chain__icon--check { mask-image: var(--cybc-v2-icon-check); -webkit-mask-image: var(--cybc-v2-icon-check); } .cybc-detail-v2 .a-chain__icon--alert { background: var(--cybc-v2-alert); mask-image: var(--cybc-v2-icon-alert); -webkit-mask-image: var(--cybc-v2-icon-alert); } .cybc-detail-v2 .a-chain__step--end .a-chain__icon { background: var(--cybc-v2-alert); } .cybc-detail-v2 .a-chain__label { color: var(--cybc-v2-text); font-size: var(--cybc-v2-sm); line-height: 20px; font-weight: 600; } .cybc-detail-v2 .a-chain__arrow { width: 20px; height: 20px; flex: 0 0 20px; align-self: center; background: var(--cybc-v2-muted); mask: var(--cybc-v2-icon-arrow) center / 20px no-repeat; -webkit-mask: var(--cybc-v2-icon-arrow) center / 20px no-repeat; } .cybc-detail-v2 .a-chain__note { color: var(--cybc-v2-muted); font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); text-wrap: pretty; } /* -------------------------------------------------------------------------- 11. Демонстрационный разбор письма или интерфейса -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-email { padding: var(--cybc-v2-s24); border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); background: var(--cybc-v2-bg); } .cybc-detail-v2 .a-email__caption { margin-bottom: var(--cybc-v2-s16); color: var(--cybc-v2-text); font-size: var(--cybc-v2-base); line-height: 24px; font-weight: 800; } .cybc-detail-v2 .a-email__mock { overflow: hidden; margin-bottom: var(--cybc-v2-s16); border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); } .cybc-detail-v2 .a-email__row { display: flex; align-items: center; gap: var(--cybc-v2-s12); padding: 14px var(--cybc-v2-s16); border-bottom: 1px solid var(--cybc-v2-line); background: var(--cybc-v2-surface); } .cybc-detail-v2 .a-email__key { flex: 0 0 46px; color: var(--cybc-v2-muted); font-size: var(--cybc-v2-sm); line-height: 20px; } .cybc-detail-v2 .a-email__val { min-width: 0; color: var(--cybc-v2-alert); font-size: var(--cybc-v2-sm); line-height: 20px; font-weight: 600; overflow-wrap: anywhere; } .cybc-detail-v2 .a-email__body { display: grid; gap: 14px; padding: 18px var(--cybc-v2-s16); } .cybc-detail-v2 .a-email__text, .cybc-detail-v2 .a-email__item span { color: var(--cybc-v2-body); font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); } .cybc-detail-v2 .a-email__line, .cybc-detail-v2 .a-email__item { display: flex; align-items: flex-start; gap: var(--cybc-v2-s12); } .cybc-detail-v2 .a-email__link { color: var(--cybc-v2-link); font-size: var(--cybc-v2-sm); line-height: 20px; font-weight: 600; text-decoration: underline; } .cybc-detail-v2 .a-email__real { color: var(--cybc-v2-muted); font-size: var(--cybc-v2-xs); line-height: var(--cybc-v2-xs-lh); } .cybc-detail-v2 .a-email__file { display: inline-flex; align-items: center; gap: var(--cybc-v2-s8); padding: var(--cybc-v2-s8) var(--cybc-v2-s12); border-radius: 6px; background: var(--cybc-v2-alert-surface); color: var(--cybc-v2-alert); font-size: var(--cybc-v2-sm); line-height: 20px; font-weight: 600; } .cybc-detail-v2 .a-email__legend { display: grid; gap: var(--cybc-v2-s12); } .cybc-detail-v2 .a-email__legend-title { color: var(--cybc-v2-muted); font-size: var(--cybc-v2-sm); line-height: 20px; font-weight: 600; } .cybc-detail-v2 .a-email__item b { display: block; color: var(--cybc-v2-text); font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); font-weight: 600; } .cybc-detail-v2 .a-marker { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--cybc-v2-alert); color: #fff; font-size: var(--cybc-v2-xs); line-height: 24px; font-weight: 600; text-align: center; } /* -------------------------------------------------------------------------- 12. Изображение и подпись -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-figure { margin: 0; } .cybc-detail-v2 .a-figure__slot { display: flex; min-height: 280px; flex-direction: column; align-items: center; justify-content: center; gap: var(--cybc-v2-s12); padding: var(--cybc-v2-s48) var(--cybc-v2-s24); border: 1px dashed var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); background: var(--cybc-v2-surface); text-align: center; } .cybc-detail-v2 .a-figure__slot--large { min-height: 360px; } .cybc-detail-v2 .a-figure__slot-icon { width: 32px; height: 32px; background: var(--cybc-v2-muted); mask: var(--cybc-v2-icon-bulb) center / 32px no-repeat; -webkit-mask: var(--cybc-v2-icon-bulb) center / 32px no-repeat; } .cybc-detail-v2 .a-figure__slot-title { color: var(--cybc-v2-body); font-size: var(--cybc-v2-base); line-height: 24px; font-weight: 600; } .cybc-detail-v2 .a-figure__slot-size, .cybc-detail-v2 .a-figure figcaption { color: var(--cybc-v2-muted); font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); } .cybc-detail-v2 .a-figure img { display: block; width: 100%; height: auto; border-radius: var(--cybc-v2-radius); } .cybc-detail-v2 .a-figure figcaption { margin-top: var(--cybc-v2-s12); } /* -------------------------------------------------------------------------- 13. Внутренний CTA: переход из материала к услуге -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-cta { display: flex; align-items: center; gap: var(--cybc-v2-s24); padding: var(--cybc-v2-s24); border-radius: var(--cybc-v2-radius); background: var(--cybc-v2-accent-surface); } .cybc-detail-v2 .a-cta__icon { width: 32px; height: 32px; flex: 0 0 32px; background: var(--cybc-v2-accent-deep); mask-position: center; mask-size: 32px; mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 32px; -webkit-mask-repeat: no-repeat; } .cybc-detail-v2 .a-cta__icon--check { mask-image: var(--cybc-v2-icon-check); -webkit-mask-image: var(--cybc-v2-icon-check); } .cybc-detail-v2 .a-cta__body { min-width: 0; flex: 1 1 auto; } .cybc-detail-v2 .a-cta__title { margin-bottom: 4px; color: var(--cybc-v2-text); font-size: var(--cybc-v2-lead); line-height: 26px; font-weight: 800; text-wrap: balance; } .cybc-detail-v2 .a-cta__text { color: var(--cybc-v2-body); text-wrap: pretty; } .cybc-detail-v2 .a-cta__btn { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--cybc-v2-s8); padding: 12px var(--cybc-v2-s24); border-radius: 24px; background: var(--cybc-v2-accent-deep); color: #fff; font-size: var(--cybc-v2-base); line-height: 20px; font-weight: 600; text-decoration: none; transition: background 0.15s ease; } .cybc-detail-v2 .a-cta__btn:hover { background: var(--cybc-v2-accent); } .cybc-detail-v2 .a-cta__btn::after { content: ""; width: 16px; height: 16px; background: #fff; mask: var(--cybc-v2-icon-arrow) center / 16px no-repeat; -webkit-mask: var(--cybc-v2-icon-arrow) center / 16px no-repeat; } /* -------------------------------------------------------------------------- 14. Оглавление CSS отвечает только за оформление. Сбор ссылок будет реализован отдельно. -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-toc { position: sticky; top: var(--cybc-v2-s24); } .cybc-detail-v2 .a-toc__title { margin-bottom: var(--cybc-v2-s16); color: var(--cybc-v2-text); font-size: var(--cybc-v2-base); line-height: 24px; font-weight: 800; } .cybc-detail-v2 .a-toc__list { display: grid; gap: var(--cybc-v2-s12); margin: 0; padding: 0; list-style: none; } .cybc-detail-v2 .a-toc__list a { display: block; padding-left: var(--cybc-v2-s12); border-left: 2px solid var(--cybc-v2-line); color: var(--cybc-v2-body); font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; } .cybc-detail-v2 .a-toc__list a:hover, .cybc-detail-v2 .a-toc__list a[aria-current="true"] { border-color: var(--cybc-v2-accent); color: var(--cybc-v2-accent-deep); } .cybc-detail-v2 .a-toc__list a[aria-current="true"] { font-weight: 600; } /* -------------------------------------------------------------------------- 15. Автор и связанные материалы -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-author { display: flex; gap: var(--cybc-v2-s24); margin-top: var(--cybc-v2-gap-section); padding: var(--cybc-v2-s24); border-radius: var(--cybc-v2-radius); background: var(--cybc-v2-surface); } .cybc-detail-v2 .a-author__avatar { width: 80px; height: 80px; flex: 0 0 80px; border-radius: 50%; background: var(--cybc-v2-accent-surface); object-fit: cover; } .cybc-detail-v2 .a-author__label { margin-bottom: 6px; color: var(--cybc-v2-accent-deep); font-size: var(--cybc-v2-sm); line-height: 20px; font-weight: 600; } .cybc-detail-v2 .a-author__name { margin-bottom: 6px; color: var(--cybc-v2-text); font-size: var(--cybc-v2-h4); line-height: var(--cybc-v2-h4-lh); font-weight: 800; } .cybc-detail-v2 .a-author__post { margin-bottom: var(--cybc-v2-s12); color: var(--cybc-v2-body); } .cybc-detail-v2 .a-author__link { display: inline-flex; align-items: center; gap: var(--cybc-v2-s8); color: var(--cybc-v2-accent-deep); font-size: var(--cybc-v2-base); line-height: 22px; font-weight: 600; text-decoration: none; } .cybc-detail-v2 .a-author__link::after { content: ""; width: 16px; height: 16px; background: currentColor; mask: var(--cybc-v2-icon-arrow) center / 16px no-repeat; -webkit-mask: var(--cybc-v2-icon-arrow) center / 16px no-repeat; transition: transform 0.15s ease; } .cybc-detail-v2 .a-author__link:hover::after { transform: translateX(3px); } .cybc-detail-v2 .a-related { margin-top: var(--cybc-v2-s64); } .cybc-detail-v2 .a-related__title { margin: 0 0 var(--cybc-v2-s24); color: var(--cybc-v2-text); font-size: var(--cybc-v2-h2); line-height: var(--cybc-v2-h2-lh); font-weight: 800; } .cybc-detail-v2 .a-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cybc-v2-s24); } .cybc-detail-v2 .a-related__card { display: block; text-decoration: none; } .cybc-detail-v2 .a-related__cover { width: 100%; margin-bottom: var(--cybc-v2-s12); border-radius: var(--cybc-v2-radius); aspect-ratio: 16 / 9; background: var(--cybc-v2-surface); object-fit: cover; } .cybc-detail-v2 .a-related__cat { margin-bottom: 6px; color: var(--cybc-v2-accent-deep); font-size: var(--cybc-v2-xs); line-height: var(--cybc-v2-xs-lh); font-weight: 600; } .cybc-detail-v2 .a-related__name { margin-bottom: 6px; color: var(--cybc-v2-text); font-size: var(--cybc-v2-base); line-height: 24px; font-weight: 600; text-wrap: pretty; } .cybc-detail-v2 .a-related__card:hover .a-related__name { color: var(--cybc-v2-accent-deep); } .cybc-detail-v2 .a-related__date { color: var(--cybc-v2-muted); font-size: var(--cybc-v2-xs); line-height: var(--cybc-v2-xs-lh); } /* -------------------------------------------------------------------------- 16. Таблица сравнения -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cybc-detail-v2 .a-table { width: 100%; border-collapse: collapse; font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); } .cybc-detail-v2 .a-table th { padding: var(--cybc-v2-s12) var(--cybc-v2-s16); border-bottom: 1px solid var(--cybc-v2-line); background: var(--cybc-v2-surface); color: var(--cybc-v2-text); font-weight: 600; text-align: left; white-space: nowrap; } .cybc-detail-v2 .a-table td { padding: var(--cybc-v2-s12) var(--cybc-v2-s16); border-bottom: 1px solid var(--cybc-v2-line); color: var(--cybc-v2-body); vertical-align: top; } .cybc-detail-v2 .a-table tbody tr:hover td { background: var(--cybc-v2-accent-surface); } .cybc-detail-v2 .a-table td:last-child, .cybc-detail-v2 .a-table th:last-child { text-align: right; } /* -------------------------------------------------------------------------- 17. Планшет -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .cybc-detail-v2 .article__layout { grid-template-columns: minmax(0, 1fr); gap: var(--cybc-v2-s32); } .cybc-detail-v2 .article__rail { order: -1; } .cybc-detail-v2 .a-toc { position: static; padding: var(--cybc-v2-s16) var(--cybc-v2-s24); border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); } .cybc-detail-v2 .a-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cybc-v2-s8) var(--cybc-v2-s24); } .cybc-detail-v2 .a-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 18. Мобильная версия -------------------------------------------------------------------------- */ @media (max-width: 640px) { .cybc-detail-v2 { --cybc-v2-h1: 28px; --cybc-v2-h1-lh: 34px; --cybc-v2-h2: 24px; --cybc-v2-h2-lh: 30px; --cybc-v2-h3: 20px; --cybc-v2-h3-lh: 26px; --cybc-v2-h4: 18px; --cybc-v2-h4-lh: 24px; --cybc-v2-lead: 17px; --cybc-v2-lead-lh: 26px; --cybc-v2-gap-section: var(--cybc-v2-s32); } .cybc-detail-v2 .article__inner { padding: var(--cybc-v2-s24) var(--cybc-v2-s16) var(--cybc-v2-s48); } .cybc-detail-v2 .a-grid, .cybc-detail-v2 .a-grid--2, .cybc-detail-v2 .a-compare { grid-template-columns: minmax(0, 1fr); } .cybc-detail-v2 .a-cell, .cybc-detail-v2 .a-compare__col, .cybc-detail-v2 .a-callout, .cybc-detail-v2 .a-chain, .cybc-detail-v2 .a-email { padding: var(--cybc-v2-s16); } .cybc-detail-v2 .a-stage { grid-template-columns: minmax(0, 1fr); gap: var(--cybc-v2-s8); padding-bottom: var(--cybc-v2-s24); } .cybc-detail-v2 .a-stage__period { justify-self: start; } .cybc-detail-v2 .a-chain__steps { flex-direction: column; align-items: stretch; } .cybc-detail-v2 .a-chain__arrow { transform: rotate(90deg); } .cybc-detail-v2 .a-email__row { flex-wrap: wrap; gap: var(--cybc-v2-s8); } .cybc-detail-v2 .a-email__key { flex: 0 0 auto; } .cybc-detail-v2 .a-cta { flex-direction: column; align-items: flex-start; gap: var(--cybc-v2-s16); } .cybc-detail-v2 .a-cta__btn { width: 100%; justify-content: center; } .cybc-detail-v2 .a-author { flex-direction: column; gap: var(--cybc-v2-s16); } .cybc-detail-v2 .a-related__grid, .cybc-detail-v2 .a-toc__list { grid-template-columns: minmax(0, 1fr); } .cybc-detail-v2 .a-figure__slot { min-height: 180px; padding: var(--cybc-v2-s32) var(--cybc-v2-s16); } .cybc-detail-v2 .a-quote p { line-height: 28px; } } /* -------------------------------------------------------------------------- 19. Доступность и печать -------------------------------------------------------------------------- */ .cybc-detail-v2 a:focus-visible, .cybc-detail-v2 button:focus-visible { outline: 2px solid var(--cybc-v2-accent-deep); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .cybc-detail-v2 *, .cybc-detail-v2 *::before, .cybc-detail-v2 *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media print { .cybc-detail-v2 .article__rail, .cybc-detail-v2 .a-cta, .cybc-detail-v2 .a-related { display: none; } .cybc-detail-v2 .article__layout { grid-template-columns: minmax(0, 1fr); } .cybc-detail-v2 .a-grid, .cybc-detail-v2 .a-compare { break-inside: avoid; } } /* -------------------------------------------------------------------------- 20. Защита от конфликтов со старым шаблоном Этот блок намеренно расположен последним. Он восстанавливает вертикальный ритм после глобальных reset-правил старого сайта и повышает специфичность только внутри нового контента. Разметку и старые страницы не затрагивает. -------------------------------------------------------------------------- */ /* Базовый ритм прямых дочерних элементов статьи. */ .cybc-detail-v2 .article-body > * { margin-bottom: 0; } .cybc-detail-v2 .article-body > * + * { margin-top: var(--cybc-v2-gap-block); } .cybc-detail-v2 .article-body > :first-child { margin-top: 0; } /* В исходном прототипе более поздний margin: 0 у p съедал межабзацный отступ. */ .cybc-detail-v2 .article-body > p { margin-bottom: 0; } .cybc-detail-v2 .article-body > * + p { margin-top: var(--cybc-v2-gap-block); } /* Заголовки начинают новый смысловой уровень, а следующий блок держится рядом. */ .cybc-detail-v2 .article-body > h2 { margin: var(--cybc-v2-gap-section) 0 0; } .cybc-detail-v2 .article-body > h3 { margin: var(--cybc-v2-s32) 0 0; } .cybc-detail-v2 .article-body > h4 { margin: var(--cybc-v2-s24) 0 0; } .cybc-detail-v2 .article-body > h2 + *, .cybc-detail-v2 .article-body > h3 + *, .cybc-detail-v2 .article-body > h4 + * { margin-top: var(--cybc-v2-gap-heading); } /* Оглавление стоит в потоке статьи и спокойно уходит вверх при прокрутке. */ .cybc-detail-v2 .article-body > .a-toc { position: static; top: auto; padding: var(--cybc-v2-s24); border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); background: var(--cybc-v2-bg); } .cybc-detail-v2 .article-body .a-toc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cybc-v2-s8) var(--cybc-v2-s24); margin: 0; padding: 0; list-style: none; } .cybc-detail-v2 .article-body .a-toc__list li { margin: 0; padding: 0; list-style: none; } .cybc-detail-v2 .article-body .a-toc__list li::before, .cybc-detail-v2 .article-body .a-toc__list li::after { content: none; display: none; } /* Нечётная последняя карточка занимает всю строку, без пустой серой ячейки. */ .cybc-detail-v2 .a-grid--2 > .a-cell:last-child:nth-child(odd) { grid-column: 1 / -1; } /* CTA остаётся белым и после правил для обычных ссылок и visited-состояния. */ .cybc-detail-v2 .article-body .a-cta__btn, .cybc-detail-v2 .article-body .a-cta__btn:visited, .cybc-detail-v2 .article-body .a-cta__btn:hover, .cybc-detail-v2 .article-body .a-cta__btn:focus-visible { color: #fff; text-decoration: none; } @media (max-width: 640px) { .cybc-detail-v2 .article-body > h3 { margin-top: var(--cybc-v2-s24); } .cybc-detail-v2 .article-body > .a-toc { padding: var(--cybc-v2-s16); } .cybc-detail-v2 .article-body .a-toc__list { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- 21. Составные секции для длинных страниц услуг Секция объединяет семантически связанный заголовок и компоненты, не вводя отдельную визуальную систему. Внутри используются те же токены и блоки a-grid, a-cell, a-callout, a-table, a-timeline и a-cta. -------------------------------------------------------------------------- */ .cybc-detail-v2.article-body > .a-section { margin-top: var(--cybc-v2-gap-section); } .cybc-detail-v2.article-body > .a-section:first-child { margin-top: 0; } .cybc-detail-v2 .a-section > *, .cybc-detail-v2 .a-section__inner > * { margin-bottom: 0; } .cybc-detail-v2 .a-section > * + *, .cybc-detail-v2 .a-section__inner > * + * { margin-top: var(--cybc-v2-gap-block); } .cybc-detail-v2 .a-section > h2, .cybc-detail-v2 .a-section__inner > h2 { margin: 0; color: var(--cybc-v2-text); font-size: var(--cybc-v2-h2); line-height: var(--cybc-v2-h2-lh); font-weight: 800; text-wrap: balance; scroll-margin-top: var(--cybc-v2-s24); } .cybc-detail-v2 .a-section > h3 { margin: var(--cybc-v2-s32) 0 0; color: var(--cybc-v2-text); font-size: var(--cybc-v2-h3); line-height: var(--cybc-v2-h3-lh); font-weight: 800; text-wrap: balance; } .cybc-detail-v2 .a-section > h2 + *, .cybc-detail-v2 .a-section__inner > h2 + *, .cybc-detail-v2 .a-section > h3 + * { margin-top: var(--cybc-v2-gap-heading); } /* Карточки, собранные из семантических списков dl/dt/dd. */ .cybc-detail-v2 .a-grid > .a-cell dt { margin: 0; color: var(--cybc-v2-text); font-size: var(--cybc-v2-base); line-height: 24px; font-weight: 800; text-wrap: balance; } .cybc-detail-v2 .a-grid > .a-cell dd { margin: var(--cybc-v2-s8) 0 0; color: var(--cybc-v2-body); font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); text-wrap: pretty; } /* Карточка отрасли: заголовок сверху, три смысловых поля ниже. */ .cybc-detail-v2 .a-audience-card .a-cell__head { align-items: flex-start; margin-bottom: var(--cybc-v2-s24); } .cybc-detail-v2 .a-audience-card .a-cell__head h3 { margin: 0; color: var(--cybc-v2-text); font-size: var(--cybc-v2-h4); line-height: var(--cybc-v2-h4-lh); font-weight: 800; text-wrap: balance; } .cybc-detail-v2 .a-cell__details { display: grid; gap: var(--cybc-v2-s16); } .cybc-detail-v2 .a-cell__section { padding-top: var(--cybc-v2-s16); border-top: 1px solid var(--cybc-v2-line); } .cybc-detail-v2 .a-cell__section:first-child { padding-top: 0; border-top: 0; } .cybc-detail-v2 .a-cell__section p { margin: 0; color: var(--cybc-v2-body); font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); text-wrap: pretty; } .cybc-detail-v2 .a-cell__section--result { padding: var(--cybc-v2-s12); border-top: 0; border-radius: 6px; background: var(--cybc-v2-accent-surface); } .cybc-detail-v2 .article-body .a-audience-card__link { color: var(--cybc-v2-accent-deep); font-weight: 600; } .cybc-detail-v2 .a-callout > p { margin: 0; color: var(--cybc-v2-text); text-wrap: pretty; } /* В содержательных таблицах услуг все колонки читаются слева направо. */ .cybc-detail-v2 .a-section .a-table th:last-child, .cybc-detail-v2 .a-section .a-table td:last-child { text-align: left; } /* Кнопочный вариант CTA открывает существующую форму консультации. */ .cybc-detail-v2 .a-cta__btn { border: 0; font-family: inherit; cursor: pointer; } /* Этап с отдельным результатом использует третий столбец только на десктопе. */ .cybc-detail-v2 .a-timeline { margin: 0; padding: 0; list-style: none; } .cybc-detail-v2 .a-stage--with-result { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding: var(--cybc-v2-s24) 0; border-bottom: 1px solid var(--cybc-v2-line); } .cybc-detail-v2 .a-stage--with-result:first-child { padding-top: 0; } .cybc-detail-v2 .a-stage--with-result:last-child { padding-bottom: 0; border-bottom: 0; } .cybc-detail-v2 .a-stage--with-result > div > h3 { margin: 0 0 var(--cybc-v2-s8); color: var(--cybc-v2-text); font-size: var(--cybc-v2-h4); line-height: var(--cybc-v2-h4-lh); font-weight: 800; text-wrap: balance; } .cybc-detail-v2 .a-stage--with-result > div > p, .cybc-detail-v2 .a-stage--with-result > .a-callout p { margin: 0; color: var(--cybc-v2-body); text-wrap: pretty; } .cybc-detail-v2 .a-stage--with-result > .a-callout { margin: 0; } .cybc-detail-v2 .a-stage--with-result > .a-callout b { display: block; margin-bottom: 4px; color: var(--cybc-v2-accent-deep); font-size: var(--cybc-v2-sm); line-height: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } @media (max-width: 1024px) { .cybc-detail-v2 .a-stage--with-result { grid-template-columns: 72px minmax(0, 1fr); } .cybc-detail-v2 .a-stage--with-result > .a-callout { grid-column: 2; } } @media (max-width: 640px) { .cybc-detail-v2.article-body > .a-section { margin-top: var(--cybc-v2-gap-section); } .cybc-detail-v2 .a-section > h3 { margin-top: var(--cybc-v2-s24); } .cybc-detail-v2 .a-stage--with-result { grid-template-columns: minmax(0, 1fr); } .cybc-detail-v2 .a-stage--with-result > .a-callout { grid-column: auto; } } /* -------------------------------------------------------------------------- 22. Композиция длинной страницы услуги Правила ниже не копируют прежнюю карточную сетку. Они задают единый ритм, а затем выбирают отдельный визуальный сценарий для каждого типа данных: отраслей, целей, триггеров, области работ, рисков и доказательств опыта. -------------------------------------------------------------------------- */ /* Один вертикальный ритм для всех крупных смысловых блоков страницы услуги. */ .cybc-detail-v2.article-body > .a-section, .cybc-detail-v2.article-body > .a-cta { margin: 0; } .cybc-detail-v2.article-body > .a-section + .a-section, .cybc-detail-v2.article-body > .a-section + .a-cta, .cybc-detail-v2.article-body > .a-cta + .a-section { margin-top: var(--cybc-v2-s64); } .cybc-detail-v2 .a-section > *, .cybc-detail-v2 .a-section__inner > * { margin-top: 0; margin-bottom: 0; } .cybc-detail-v2 .a-section > * + *, .cybc-detail-v2 .a-section__inner > * + * { margin-top: var(--cybc-v2-s24); } .cybc-detail-v2 .a-section > h2, .cybc-detail-v2 .a-section__inner > h2 { margin: 0 !important; color: var(--cybc-v2-text) !important; font-size: var(--cybc-v2-h2) !important; line-height: var(--cybc-v2-h2-lh) !important; } .cybc-detail-v2 .a-section > h2 + *, .cybc-detail-v2 .a-section__inner > h2 + * { margin-top: var(--cybc-v2-s16); } .cybc-detail-v2 .a-section > h3 { margin: var(--cybc-v2-s32) 0 0 !important; color: var(--cybc-v2-text) !important; font-size: var(--cybc-v2-h3) !important; line-height: var(--cybc-v2-h3-lh) !important; } .cybc-detail-v2 .a-section > h3 + * { margin-top: var(--cybc-v2-s12); } .cybc-detail-v2 .a-section p, .cybc-detail-v2 .a-section dd, .cybc-detail-v2 .a-section li { line-height: var(--cybc-v2-base-lh); } .cybc-detail-v2 .a-section .article__lead { margin: 0 !important; color: var(--cybc-v2-body) !important; font-size: var(--cybc-v2-lead) !important; line-height: var(--cybc-v2-lead-lh) !important; } /* Текстовые ссылки повторяют стиль статьи: чёрный текст и подчёркивание. */ .cybc-detail-v2.article-body .a-section a:not(.a-cta__btn), .cybc-detail-v2.article-body .a-section a:not(.a-cta__btn):visited { color: var(--cybc-v2-text) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .cybc-detail-v2.article-body .a-section a:not(.a-cta__btn):hover { color: var(--cybc-v2-accent-deep) !important; } /* Два формата работ: крупный тезис и короткий дескриптор. */ .cybc-detail-v2 .a-choice-grid { background: transparent; border: 0; gap: var(--cybc-v2-s16); overflow: visible; } .cybc-detail-v2 .a-choice-card { position: relative; padding: var(--cybc-v2-s24); overflow: hidden; border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); } .cybc-detail-v2 .a-choice-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cybc-v2-accent); } .cybc-detail-v2 .a-choice-card dt { display: flex; align-items: flex-start; gap: var(--cybc-v2-s12); } .cybc-detail-v2 .a-choice-card dt::before { content: ""; width: 22px; height: 22px; flex: 0 0 22px; background: var(--cybc-v2-accent-deep); mask: var(--cybc-v2-icon-check) center / 22px no-repeat; -webkit-mask: var(--cybc-v2-icon-check) center / 22px no-repeat; } /* Определение услуги разложено на проверяемую область и бизнес-результат. */ .cybc-detail-v2 .a-compare--summary { background: transparent; border: 0; gap: var(--cybc-v2-s16); overflow: visible; } .cybc-detail-v2 .a-compare--summary .a-compare__col { border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); } .cybc-detail-v2 .a-compare--summary .a-compare__head { align-items: flex-start; margin-bottom: var(--cybc-v2-s12); } .cybc-detail-v2 .a-compare--summary p { margin: 0; color: var(--cybc-v2-body); } /* Отраслевой справочник: компактная шапка и три читаемые колонки. */ .cybc-detail-v2 .a-grid--sectors { grid-template-columns: minmax(0, 1fr); gap: var(--cybc-v2-s24); overflow: visible; border: 0; background: transparent; } .cybc-detail-v2 .a-grid--sectors > .a-audience-card { padding: 0; overflow: hidden; border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); } .cybc-detail-v2 .a-grid--sectors .a-cell__head { min-height: 64px; align-items: center; margin: 0; padding: var(--cybc-v2-s16) var(--cybc-v2-s24); background: #06322f; } .cybc-detail-v2 .a-grid--sectors .a-cell__head h3 { margin: 0 !important; color: #fff !important; font-size: var(--cybc-v2-h4) !important; line-height: var(--cybc-v2-h4-lh) !important; } .cybc-detail-v2 .a-grid--sectors .a-stage__period { background: rgba(32, 199, 143, 0.18); color: #fff; } .cybc-detail-v2 .a-grid--sectors .a-cell__details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .cybc-detail-v2 .a-grid--sectors .a-cell__section { min-width: 0; padding: var(--cybc-v2-s24); border-top: 0; border-left: 1px solid var(--cybc-v2-line); } .cybc-detail-v2 .a-grid--sectors .a-cell__section:first-child { border-left: 0; } .cybc-detail-v2 .a-grid--sectors .a-cell__section--result { border-radius: 0; background: var(--cybc-v2-accent-surface); } /* Таблицы получают цельную рамку и контрастную шапку. */ .cybc-detail-v2 .a-table-wrap { overflow: hidden; border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); } .cybc-detail-v2 .a-table--dark-head thead th { border-bottom: 0; background: #06322f; color: #fff; font-weight: 700; white-space: normal; } .cybc-detail-v2 .a-table--dark-head tbody th { background: var(--cybc-v2-surface); color: var(--cybc-v2-text); font-weight: 700; text-align: left; } .cybc-detail-v2 .a-table--dark-head th, .cybc-detail-v2 .a-table--dark-head td { padding: var(--cybc-v2-s16); text-align: left; } .cybc-detail-v2 .a-table--dark-head tr:last-child > * { border-bottom: 0; } /* Методологии: три самостоятельные карточки с единым маркером. */ .cybc-detail-v2 .a-grid--methods .a-cell__head::before { content: ""; width: 22px; height: 22px; flex: 0 0 22px; background: var(--cybc-v2-accent-deep); mask: var(--cybc-v2-icon-check) center / 22px no-repeat; -webkit-mask: var(--cybc-v2-icon-check) center / 22px no-repeat; } /* Цели: восемь компактных функций без тяжёлых двухколоночных карточек. */ .cybc-detail-v2 .a-grid--features { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cybc-detail-v2 .a-grid--features > .a-cell { padding: var(--cybc-v2-s20, 20px); } .cybc-detail-v2 .a-grid--features dt::before, .cybc-detail-v2 .a-grid--scope dt::before, .cybc-detail-v2 .a-grid--proofs dt::before { content: ""; display: block; width: 24px; height: 24px; margin-bottom: var(--cybc-v2-s12); background: var(--cybc-v2-accent-deep); mask: var(--cybc-v2-icon-check) center / 24px no-repeat; -webkit-mask: var(--cybc-v2-icon-check) center / 24px no-repeat; } /* Триггеры аудита: лёгкий список с акцентной направляющей. */ .cybc-detail-v2 .a-grid--triggers, .cybc-detail-v2 .a-grid--risks, .cybc-detail-v2 .a-grid--proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cybc-v2-s16); overflow: visible; border: 0; background: transparent; } .cybc-detail-v2 .a-grid--triggers > .a-cell { position: relative; padding: var(--cybc-v2-s20, 20px) var(--cybc-v2-s24); border: 1px solid var(--cybc-v2-line); border-left: 4px solid var(--cybc-v2-accent); border-radius: var(--cybc-v2-radius); } /* Область аудита: компактные карточки по три в ряд. */ .cybc-detail-v2 .a-grid--scope { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cybc-detail-v2 .a-grid--scope > .a-cell { background: var(--cybc-v2-surface); } /* Риски отличаются красным маркером, но сохраняют геометрию кита. */ .cybc-detail-v2 .a-grid--risks > .a-cell { position: relative; border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); } .cybc-detail-v2 .a-grid--risks dt { padding-left: var(--cybc-v2-s32); } .cybc-detail-v2 .a-grid--risks dt::before { content: ""; position: absolute; width: 22px; height: 22px; margin-left: calc(-1 * var(--cybc-v2-s32)); background: var(--cybc-v2-alert); mask: var(--cybc-v2-icon-alert) center / 22px no-repeat; -webkit-mask: var(--cybc-v2-icon-alert) center / 22px no-repeat; } /* Факты об исполнителе оформлены как доказательства, а не как рекламные плитки. */ .cybc-detail-v2 .a-grid--proofs > .a-cell { border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); } .cybc-detail-v2 .a-grid--proofs > .a-cell:last-child:nth-child(odd) { grid-column: 1 / -1; } .cybc-detail-v2 .a-list--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cybc-v2-s12) var(--cybc-v2-s32); } /* Этапы — отдельные строки, а не одна непрерывная таблица. */ .cybc-detail-v2 .a-timeline { gap: var(--cybc-v2-s16); } .cybc-detail-v2 .a-stage--with-result { grid-template-columns: 64px minmax(0, 1fr) minmax(240px, 0.8fr); gap: var(--cybc-v2-s24); padding: var(--cybc-v2-s24); border: 1px solid var(--cybc-v2-line); border-radius: var(--cybc-v2-radius); background: var(--cybc-v2-bg); } .cybc-detail-v2 .a-stage--with-result:first-child, .cybc-detail-v2 .a-stage--with-result:last-child { padding: var(--cybc-v2-s24); border: 1px solid var(--cybc-v2-line); } @media (max-width: 1024px) { .cybc-detail-v2 .a-grid--features, .cybc-detail-v2 .a-grid--scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cybc-detail-v2 .a-grid--sectors .a-cell__details { grid-template-columns: minmax(0, 1fr); } .cybc-detail-v2 .a-grid--sectors .a-cell__section, .cybc-detail-v2 .a-grid--sectors .a-cell__section:first-child { border-top: 1px solid var(--cybc-v2-line); border-left: 0; } .cybc-detail-v2 .a-stage--with-result { grid-template-columns: 64px minmax(0, 1fr); } .cybc-detail-v2 .a-stage--with-result > .a-callout { grid-column: 2; } } @media (max-width: 640px) { .cybc-detail-v2.article-body > .a-section + .a-section, .cybc-detail-v2.article-body > .a-section + .a-cta, .cybc-detail-v2.article-body > .a-cta + .a-section { margin-top: var(--cybc-v2-s48); } .cybc-detail-v2 .a-section > * + *, .cybc-detail-v2 .a-section__inner > * + * { margin-top: var(--cybc-v2-s16); } .cybc-detail-v2 .a-choice-grid, .cybc-detail-v2 .a-compare--summary, .cybc-detail-v2 .a-grid--features, .cybc-detail-v2 .a-grid--triggers, .cybc-detail-v2 .a-grid--scope, .cybc-detail-v2 .a-grid--risks, .cybc-detail-v2 .a-grid--proofs, .cybc-detail-v2 .a-list--columns { grid-template-columns: minmax(0, 1fr); } .cybc-detail-v2 .a-grid--sectors .a-cell__head { min-height: 0; padding: var(--cybc-v2-s16); } .cybc-detail-v2 .a-grid--sectors .a-cell__section { padding: var(--cybc-v2-s16); } .cybc-detail-v2 .a-table-wrap { overflow-x: auto; } .cybc-detail-v2 .a-table--dark-head { min-width: 680px; } .cybc-detail-v2 .a-stage--with-result, .cybc-detail-v2 .a-stage--with-result:first-child, .cybc-detail-v2 .a-stage--with-result:last-child { grid-template-columns: minmax(0, 1fr); gap: var(--cybc-v2-s12); padding: var(--cybc-v2-s16); } .cybc-detail-v2 .a-stage--with-result > .a-callout { grid-column: auto; } } /* -------------------------------------------------------------------------- Этапы с результатом: контраст и выравнивание -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-stage--with-result { grid-template-columns: 64px minmax(0, 1fr) minmax(280px, 0.82fr); gap: var(--cybc-v2-s24); align-items: stretch; border-color: #cbd8d4; box-shadow: 0 8px 24px rgba(6, 50, 47, 0.06); } .cybc-detail-v2 .a-stage--with-result > .a-stage__period { width: 56px; height: 56px; align-self: center; padding: 0; border-radius: 10px; background: #06322f; color: #ffffff; font-size: 18px; line-height: 1; font-weight: 800; letter-spacing: 0.02em; } .cybc-detail-v2 .a-stage--with-result > div:not(.a-callout) { padding-top: 2px; } .cybc-detail-v2 .a-stage--with-result > .a-callout { display: flex; min-width: 0; align-self: stretch; flex-direction: column; justify-content: center; gap: var(--cybc-v2-s8); padding: var(--cybc-v2-s24); background: #06322f; } .cybc-detail-v2 .a-stage--with-result > .a-callout b { margin: 0; color: #48e5b1; font-size: 12px; line-height: 18px; font-weight: 800; letter-spacing: 0.08em; } .cybc-detail-v2 .a-stage--with-result > .a-callout > p { color: #ffffff; font-size: var(--cybc-v2-base); line-height: var(--cybc-v2-base-lh); } @media (max-width: 1024px) { .cybc-detail-v2 .a-stage--with-result { grid-template-columns: 64px minmax(0, 1fr); } .cybc-detail-v2 .a-stage--with-result > .a-callout { grid-column: 2; } } @media (max-width: 640px) { .cybc-detail-v2 .a-stage--with-result, .cybc-detail-v2 .a-stage--with-result:first-child, .cybc-detail-v2 .a-stage--with-result:last-child { grid-template-columns: minmax(0, 1fr); gap: var(--cybc-v2-s16); } .cybc-detail-v2 .a-stage--with-result > .a-stage__period { width: 48px; height: 48px; font-size: 16px; } .cybc-detail-v2 .a-stage--with-result > div:not(.a-callout) { padding-top: 0; } .cybc-detail-v2 .a-stage--with-result > .a-callout { grid-column: auto; padding: var(--cybc-v2-s16); } } /* -------------------------------------------------------------------------- 23. Иконки для материалов об инфраструктуре и ЦОД Источник геометрии: Lucide. Правила изолированы внутри Detail V2. -------------------------------------------------------------------------- */ .cybc-detail-v2 { --cybc-v2-icon-thermometer-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 8a4 4 0 0 0-1.645 7.647'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 14.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0z'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3C/svg%3E"); --cybc-v2-icon-fan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z'/%3E%3Cpath d='M12 12v.01'/%3E%3C/svg%3E"); --cybc-v2-icon-server-crash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M6 6h.01'/%3E%3Cpath d='M6 18h.01'/%3E%3Cpath d='m13 6-4 6h6l-4 6'/%3E%3C/svg%3E"); --cybc-v2-icon-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E"); } .cybc-detail-v2 .a-icon--thermometer-sun { mask-image: var(--cybc-v2-icon-thermometer-sun); -webkit-mask-image: var(--cybc-v2-icon-thermometer-sun); } .cybc-detail-v2 .a-icon--fan { mask-image: var(--cybc-v2-icon-fan); -webkit-mask-image: var(--cybc-v2-icon-fan); } .cybc-detail-v2 .a-icon--server-crash { mask-image: var(--cybc-v2-icon-server-crash); -webkit-mask-image: var(--cybc-v2-icon-server-crash); } .cybc-detail-v2 .a-icon--route { mask-image: var(--cybc-v2-icon-route); -webkit-mask-image: var(--cybc-v2-icon-route); } /* -------------------------------------------------------------------------- 24. Контрастные компоненты для лендинговой композиции Дополнительные модификаторы не заменяют базовые компоненты Detail V2. Используйте их точечно как визуальные якоря между спокойными секциями: .a-section--contrast, .a-section--tint, .a-spotlight-grid, .a-proof-strip, .a-callout--statement и .a-cta--strong. -------------------------------------------------------------------------- */ /* Спокойная цветная секция для чередования белых зон страницы. */ .cybc-detail-v2 .a-section--tint { padding: var(--cybc-v2-s32); border: 1px solid #d7ebe4; border-radius: 16px; background: linear-gradient(145deg, #f3fbf8 0%, #e8f7f2 100%); } /* Тёмная секция-якорь. Её стоит использовать не чаще двух-трёх раз на странице. */ .cybc-detail-v2 .a-section--contrast { position: relative; isolation: isolate; overflow: hidden; padding: var(--cybc-v2-s48); border-radius: 18px; background: linear-gradient(135deg, #052f2c 0%, #08443e 58%, #0b5c50 100%); box-shadow: 0 20px 48px rgba(6, 50, 47, 0.16); } .cybc-detail-v2 .a-section--contrast::after { content: ""; position: absolute; z-index: -1; top: -120px; right: -100px; width: 320px; height: 320px; border: 1px solid rgba(72, 229, 177, 0.2); border-radius: 50%; box-shadow: 0 0 0 44px rgba(72, 229, 177, 0.035), 0 0 0 88px rgba(72, 229, 177, 0.025); } .cybc-detail-v2 .a-section--contrast > h2, .cybc-detail-v2 .a-section--contrast > h3, .cybc-detail-v2 .a-section--contrast .a-section__inner > h2, .cybc-detail-v2 .a-section--contrast .a-section__inner > h3 { color: #ffffff !important; } .cybc-detail-v2 .a-section--contrast > p, .cybc-detail-v2 .a-section--contrast .article__lead, .cybc-detail-v2 .a-section--contrast .a-section__intro { max-width: 760px; color: rgba(255, 255, 255, 0.78) !important; } .cybc-detail-v2 .a-section__eyebrow { display: inline-flex; align-items: center; gap: var(--cybc-v2-s8); margin: 0; color: var(--cybc-v2-accent-deep); font-size: var(--cybc-v2-xs); line-height: var(--cybc-v2-xs-lh); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .cybc-detail-v2 .a-section__eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: currentColor; } .cybc-detail-v2 .a-section--contrast .a-section__eyebrow { color: #48e5b1; } /* Крупные тезисы внутри тёмной секции: результат, риск или преимущество. */ .cybc-detail-v2 .a-spotlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cybc-v2-s16); margin: 0; padding: 0; list-style: none; } .cybc-detail-v2 .a-spotlight { position: relative; min-width: 0; padding: var(--cybc-v2-s24); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(6px); } .cybc-detail-v2 .a-spotlight__top { display: flex; align-items: center; justify-content: space-between; gap: var(--cybc-v2-s12); margin-bottom: var(--cybc-v2-s24); } .cybc-detail-v2 .a-spotlight__icon { width: 32px; height: 32px; flex: 0 0 32px; background: #48e5b1; mask-position: center; mask-size: 32px; mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 32px; -webkit-mask-repeat: no-repeat; } .cybc-detail-v2 .a-spotlight__index { color: rgba(255, 255, 255, 0.45); font-size: var(--cybc-v2-xs); line-height: var(--cybc-v2-xs-lh); font-weight: 800; letter-spacing: 0.08em; } .cybc-detail-v2 .a-spotlight__title { margin: 0; color: #ffffff; font-size: var(--cybc-v2-h4); line-height: var(--cybc-v2-h4-lh); font-weight: 800; text-wrap: balance; } .cybc-detail-v2 .a-spotlight__text { margin: var(--cybc-v2-s8) 0 0; color: rgba(255, 255, 255, 0.72); font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); text-wrap: pretty; } /* Полоса коротких доказательств или фактов. */ .cybc-detail-v2 .a-proof-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #cfe4dc; border-radius: 14px; background: #ffffff; box-shadow: 0 12px 32px rgba(6, 50, 47, 0.08); } .cybc-detail-v2 .a-proof { min-width: 0; padding: var(--cybc-v2-s24); border-left: 1px solid #d7ebe4; } .cybc-detail-v2 .a-proof:first-child { border-left: 0; } .cybc-detail-v2 .a-proof__value { display: block; margin-bottom: 6px; color: #06322f; font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -0.02em; } .cybc-detail-v2 .a-proof__label { display: block; color: var(--cybc-v2-body); font-size: var(--cybc-v2-sm); line-height: var(--cybc-v2-sm-lh); text-wrap: pretty; } /* Крупная смысловая врезка — альтернатива обычному callout. */ .cybc-detail-v2 .a-callout--statement { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--cybc-v2-s24); align-items: center; padding: var(--cybc-v2-s32); overflow: hidden; border: 1px solid #bfe6d8; border-radius: 16px; background: linear-gradient(120deg, #eafaf4 0%, #dff5ed 100%); } .cybc-detail-v2 .a-callout--statement .a-callout__icon { width: 56px; height: 56px; margin: 0; border-radius: 50%; background-color: #06322f; mask-size: 32px; -webkit-mask-size: 32px; } .cybc-detail-v2 .a-callout--statement .a-callout__label { margin-bottom: var(--cybc-v2-s8); color: #0a7466; font-size: var(--cybc-v2-xs); line-height: var(--cybc-v2-xs-lh); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .cybc-detail-v2 .a-callout--statement .a-callout__text { color: #06322f; font-size: var(--cybc-v2-h3); line-height: var(--cybc-v2-h3-lh); font-weight: 800; text-wrap: balance; } /* Усиленный CTA — тот же сценарий действия, но с большей визуальной иерархией. */ .cybc-detail-v2 .a-cta--strong { position: relative; overflow: hidden; padding: var(--cybc-v2-s32); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: linear-gradient(135deg, #06322f 0%, #0b5148 100%); box-shadow: 0 16px 40px rgba(6, 50, 47, 0.16); } .cybc-detail-v2 .a-cta--strong .a-cta__icon { width: 44px; height: 44px; flex-basis: 44px; background: #48e5b1; mask-size: 44px; -webkit-mask-size: 44px; } .cybc-detail-v2 .a-cta--strong .a-cta__title { color: #ffffff; font-size: var(--cybc-v2-h3); line-height: var(--cybc-v2-h3-lh); } .cybc-detail-v2 .a-cta--strong .a-cta__text { color: rgba(255, 255, 255, 0.72); } .cybc-detail-v2 .article-body .a-cta--strong .a-cta__btn, .cybc-detail-v2 .article-body .a-cta--strong .a-cta__btn:visited { background: #48e5b1; color: #06322f; } .cybc-detail-v2 .article-body .a-cta--strong .a-cta__btn:hover { background: #ffffff; color: #06322f; } .cybc-detail-v2 .a-cta--strong .a-cta__btn::after { background: #06322f; } /* Ссылки в тёмной секции должны сохранять контраст после глобальных правил. */ .cybc-detail-v2.article-body .a-section--contrast a:not(.a-cta__btn), .cybc-detail-v2.article-body .a-section--contrast a:not(.a-cta__btn):visited { color: #ffffff !important; text-decoration-color: rgba(72, 229, 177, 0.8); } .cybc-detail-v2.article-body .a-section--contrast a:not(.a-cta__btn):hover { color: #48e5b1 !important; } @media (max-width: 1024px) { .cybc-detail-v2 .a-section--contrast { padding: var(--cybc-v2-s32); } .cybc-detail-v2 .a-spotlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cybc-detail-v2 .a-spotlight:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 640px) { .cybc-detail-v2 .a-section--tint, .cybc-detail-v2 .a-section--contrast, .cybc-detail-v2 .a-callout--statement, .cybc-detail-v2 .a-cta--strong { padding: var(--cybc-v2-s24); border-radius: 12px; } .cybc-detail-v2 .a-spotlight-grid, .cybc-detail-v2 .a-proof-strip { grid-template-columns: minmax(0, 1fr); } .cybc-detail-v2 .a-spotlight:last-child:nth-child(odd) { grid-column: auto; } .cybc-detail-v2 .a-proof { padding: var(--cybc-v2-s16) var(--cybc-v2-s24); border-top: 1px solid #d7ebe4; border-left: 0; } .cybc-detail-v2 .a-proof:first-child { border-top: 0; } .cybc-detail-v2 .a-proof__value { font-size: 24px; line-height: 30px; } .cybc-detail-v2 .a-callout--statement { grid-template-columns: minmax(0, 1fr); gap: var(--cybc-v2-s16); } .cybc-detail-v2 .a-callout--statement .a-callout__icon { width: 44px; height: 44px; mask-size: 26px; -webkit-mask-size: 26px; } .cybc-detail-v2 .a-callout--statement .a-callout__text { font-size: var(--cybc-v2-h4); line-height: var(--cybc-v2-h4-lh); } } /* -------------------------------------------------------------------------- 25. Гарантированный контраст инверсных компонентов Старый шаблон услуги принудительно задаёт цвет абзацам. Эти правила возвращают светлый текст только внутри тёмных секций и усиленных CTA. -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-section--contrast > .a-section__eyebrow { color: #48e5b1 !important; } .cybc-detail-v2 .a-section--contrast > .a-section__intro, .cybc-detail-v2 .a-section--contrast .a-spotlight__text { color: rgba(255, 255, 255, 0.82) !important; } .cybc-detail-v2 .a-section--contrast .a-spotlight__title { color: #ffffff !important; } .cybc-detail-v2 .a-cta--strong .a-cta__title { color: #ffffff !important; } .cybc-detail-v2 .a-cta--strong .a-cta__text { color: rgba(255, 255, 255, 0.82) !important; } /* Поддерживаются обе структуры: article-body как корневой класс и как вложенный контейнер. */ .cybc-detail-v2.article-body .a-cta--strong .a-cta__btn, .cybc-detail-v2.article-body .a-cta--strong .a-cta__btn:visited, .cybc-detail-v2 .article-body .a-cta--strong .a-cta__btn, .cybc-detail-v2 .article-body .a-cta--strong .a-cta__btn:visited { background: #48e5b1 !important; color: #06322f !important; } .cybc-detail-v2.article-body .a-cta--strong .a-cta__btn:hover, .cybc-detail-v2 .article-body .a-cta--strong .a-cta__btn:hover { background: #ffffff !important; color: #06322f !important; } .cybc-detail-v2 .a-cta--strong .a-cta__btn::after { background: #06322f !important; } /* -------------------------------------------------------------------------- 26. Семантические Lucide-иконки для области внешнего пентеста -------------------------------------------------------------------------- */ .cybc-detail-v2 { --cybc-v2-icon-network: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='16' width='6' height='6' rx='1'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1'/%3E%3Crect x='9' y='2' width='6' height='6' rx='1'/%3E%3Cpath d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3'/%3E%3Cpath d='M12 12V8'/%3E%3C/svg%3E"); --cybc-v2-icon-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 16 4-4-4-4'/%3E%3Cpath d='m6 8-4 4 4 4'/%3E%3Cpath d='m14.5 4-5 16'/%3E%3C/svg%3E"); --cybc-v2-icon-earth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 0 20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 0 0 20'/%3E%3C/svg%3E"); } .cybc-detail-v2 .a-proof--icon { --cybc-proof-icon: var(--cybc-v2-icon-check); display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--cybc-v2-s16); align-content: start; } .cybc-detail-v2 .a-proof--icon::before { content: ""; grid-row: 1 / span 2; width: 32px; height: 32px; margin-top: 2px; background: var(--cybc-v2-accent-deep); mask: var(--cybc-proof-icon) center / 30px no-repeat; -webkit-mask: var(--cybc-proof-icon) center / 30px no-repeat; } .cybc-detail-v2 .a-proof--icon .a-proof__value, .cybc-detail-v2 .a-proof--icon .a-proof__label { grid-column: 2; } .cybc-detail-v2 .a-proof--network { --cybc-proof-icon: var(--cybc-v2-icon-network); } .cybc-detail-v2 .a-proof--code { --cybc-proof-icon: var(--cybc-v2-icon-code); } .cybc-detail-v2 .a-proof--key { --cybc-proof-icon: var(--cybc-v2-icon-key); } .cybc-detail-v2 .a-grid--scope .a-icon-label--earth::before { mask-image: var(--cybc-v2-icon-earth); -webkit-mask-image: var(--cybc-v2-icon-earth); } .cybc-detail-v2 .a-grid--scope .a-icon-label--browser::before { mask-image: var(--cybc-v2-icon-browser); -webkit-mask-image: var(--cybc-v2-icon-browser); } .cybc-detail-v2 .a-grid--scope .a-icon-label--key::before { mask-image: var(--cybc-v2-icon-key); -webkit-mask-image: var(--cybc-v2-icon-key); } .cybc-detail-v2 .a-grid--scope .a-icon-label--server::before { mask-image: var(--cybc-v2-icon-server); -webkit-mask-image: var(--cybc-v2-icon-server); } .cybc-detail-v2 .a-grid--scope .a-icon-label--shield::before { mask-image: var(--cybc-v2-icon-shield); -webkit-mask-image: var(--cybc-v2-icon-shield); } .cybc-detail-v2 .a-grid--scope .a-icon-label--cloud::before { mask-image: var(--cybc-v2-icon-cloud); -webkit-mask-image: var(--cybc-v2-icon-cloud); } /* -------------------------------------------------------------------------- 27. Контрастная шапка таблиц и адаптивный блок цен Правила шапки защищены от глобальных стилей старого шаблона. Блок цен расположен вне .cybc-detail-v2, поэтому привязан к #price-block. -------------------------------------------------------------------------- */ .cybc-detail-v2 .a-table--dark-head thead th { border-bottom: 0 !important; background: #06322f !important; color: #ffffff !important; font-weight: 700; } #price-block.why-we__actions { padding: 40px; border-radius: 16px; } #price-block.why-we__actions > h3 { max-width: 760px; margin: 0 auto 28px; color: #ffffff; text-align: center; } #price-block .services-table { display: table; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 12px; } #price-block .services-table thead { display: none; } #price-block .services-table tbody { display: table-row-group; } #price-block .services-table tbody tr { display: table-row; background: #ffffff; box-shadow: 0 8px 24px rgba(6, 50, 47, 0.08); } #price-block .services-table tbody th, #price-block .services-table tbody td { padding: 20px 24px; vertical-align: middle; } #price-block .services-table tbody th { width: auto; border-radius: 12px 0 0 12px; text-align: left; } #price-block .services-table tbody th h5 { margin: 0; color: #10131c; font-size: 18px; line-height: 1.35; font-weight: 800; overflow-wrap: anywhere; } #price-block .services-table tbody td.action-cell { width: 168px; max-width: none; color: #10131c; font-size: 17px; line-height: 1.35; text-align: left; white-space: normal; } #price-block .services-table tbody td.sep { display: none; } #price-block .services-table tbody td.action-cell:last-child { width: 164px; border-radius: 0 12px 12px 0; text-align: right; } #price-block .services-table .two-line { display: grid; gap: 4px; } #price-block .services-table .two-line br { display: none; } #price-block .services-table .two-line span { color: #73777f; font-size: 14px; line-height: 20px; } #price-block .services-table button { display: inline-flex; min-width: 132px; height: 46px; align-items: center; justify-content: center; margin: 0; padding: 0 22px; border: 0; border-radius: 10px; background: #20c78f; color: #ffffff; font: inherit; font-weight: 700; cursor: pointer; } #price-block .services-table button:hover { background: #159f76; } @media (max-width: 750px) { #price-block.why-we__actions { padding: 32px 16px; border-radius: 12px; } #price-block.why-we__actions > h3 { max-width: none; margin-bottom: 24px; font-size: 26px; line-height: 1.2; text-align: left; } #price-block .services-table, #price-block .services-table tbody { display: block; } #price-block .services-table { border-spacing: 0; } #price-block .services-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 12px; padding: 24px 20px; border-radius: 12px; background: #ffffff; } #price-block .services-table tbody tr:last-child { margin-bottom: 0; } #price-block .services-table tbody th, #price-block .services-table tbody td, #price-block .services-table tbody td.action-cell, #price-block .services-table tbody td.action-cell:last-child { display: block; width: 100%; max-width: none; padding: 0; border-radius: 0; text-align: left; white-space: normal; } #price-block .services-table tbody th h5 { font-size: 20px; line-height: 1.35; } #price-block .services-table tbody td.action-cell { font-size: 18px; } #price-block .services-table tbody td.sep { display: none; } #price-block .services-table button { width: 100%; min-width: 0; height: 48px; } } @media (max-width: 420px) { #price-block.why-we__actions { padding: 28px 12px; } #price-block .services-table tbody tr { padding: 22px 18px; } } /* -------------------------------------------------------------------------- 28. Вертикальный ритм страницы услуги Нормализует интервалы hero и смысловых секций. Не меняет контент и внутреннюю геометрию самостоятельных компонентов UI-кита. -------------------------------------------------------------------------- */ /* Hero: убираем старый разрыв через br и задаём предсказуемый ритм. */ .detail-services__ms-info__body > h1 { margin: 0 0 24px !important; line-height: 1.2 !important; text-wrap: balance; } .detail-services__ms-info__body > p { margin: 0 0 20px !important; line-height: 1.55; } .detail-services__ms-info__body > p:last-of-type { margin-bottom: 28px !important; } .detail-services__ms-info__body > br { display: none; } .detail-services__ms-info__body > .simple-black__btn { margin-top: 0 !important; } /* Крупный переход от hero к контенту соответствует шагу секций. */ @media (min-width: 641px) { .detail-services__ms { margin-bottom: 72px; } } /* Прямые абзацы больше не приносят отступы старого шаблона. */ .cybc-detail-v2 .a-section > p, .cybc-detail-v2 .a-section__inner > p { margin-bottom: 0 !important; } /* Eyebrow образует устойчивую пару с заголовком. */ .cybc-detail-v2 .a-section > .a-section__eyebrow, .cybc-detail-v2 .a-section__inner > .a-section__eyebrow { margin: 0 0 16px !important; } /* Исправление обнулённого интервала между H2 и вводным текстом. */ .cybc-detail-v2 .a-section > h2 + .article__lead, .cybc-detail-v2 .a-section__inner > h2 + .article__lead, .cybc-detail-v2 .a-section > h2 + .a-section__intro, .cybc-detail-v2 .a-section__inner > h2 + .a-section__intro { margin-top: 16px !important; } @media (max-width: 640px) { .detail-services__ms-info__body > h1 { margin-bottom: 24px !important; } .detail-services__ms-info__body > p:last-of-type { margin-bottom: 24px !important; } /* На узком экране крупные соседние блоки разделяются полным шагом 24 px. */ .cybc-detail-v2 .a-section > * + *, .cybc-detail-v2 .a-section__inner > * + * { margin-top: 24px !important; } .cybc-detail-v2 .a-section > .a-section__eyebrow + h2, .cybc-detail-v2 .a-section__inner > .a-section__eyebrow + h2 { margin-top: 0 !important; } .cybc-detail-v2 .a-section > h2 + *, .cybc-detail-v2 .a-section__inner > h2 + * { margin-top: 20px !important; } } /* -------------------------------------------------------------------------- 29. Табы методов пентеста и очистка карточек spotlight Компонент работает без JavaScript: переключение построено на нативной группе radio, поэтому доступно с клавиатуры и не скрывает текст от поиска. -------------------------------------------------------------------------- */ /* Старый шаблон добавляет маркеры всем li. В spotlight они не нужны. */ .cybc-detail-v2 .a-spotlight { list-style: none !important; } .cybc-detail-v2 .a-spotlight::before, .cybc-detail-v2 .a-spotlight::after { content: none !important; display: none !important; } .cybc-detail-v2 .a-spotlight::marker { content: ""; } /* Номер получает тот же визуальный вес, что и пиктограмма. */ .cybc-detail-v2 .a-spotlight__index { display: inline-flex; min-width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.88); font-size: 16px; line-height: 1; font-weight: 800; letter-spacing: 0.04em; } .cybc-detail-v2 { --cybc-v2-icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 20 20'/%3E%3Cpath d='M6.71 6.71C4.76 8.1 3.33 9.93 2 12c2.4 3.73 5.73 6 10 6 1.07 0 2.06-.14 2.98-.4'/%3E%3Cpath d='M10.73 5.08A9.8 9.8 0 0 1 12 5c4.27 0 7.6 2.27 10 7a15.8 15.8 0 0 1-2.17 2.68'/%3E%3Cpath d='M14.12 14.12A3 3 0 0 1 9.88 9.88'/%3E%3C/svg%3E"); } /* Нейтральная графитовая секция вместо ещё одной мятной подложки. */ .cybc-detail-v2 .a-section--methods { padding: var(--cybc-v2-s32); border: 1px solid #dedede; border-radius: 16px; background: #f6f6f6; } .cybc-detail-v2 .a-method-tabs { min-width: 0; margin: 0; padding: 0; border: 0; } .cybc-detail-v2 .a-method-tabs__legend, .cybc-detail-v2 .a-method-tabs__control { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; } .cybc-detail-v2 .a-method-tabs__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cybc-v2-s8); padding: var(--cybc-v2-s8); border: 1px solid #d5d8d7; border-radius: 12px; background: #e9ebea; } .cybc-detail-v2 .a-method-tabs__nav label { position: relative; display: flex; min-height: 52px; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 8px; background: #ffffff; color: #40454d; font-size: var(--cybc-v2-base); line-height: 22px; font-weight: 800; text-align: center; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .cybc-detail-v2 .a-method-tabs__nav label:hover { color: #10131c; transform: translateY(-1px); } .cybc-detail-v2 #external-pentest-method-black:checked ~ .a-method-tabs__nav label[for="external-pentest-method-black"], .cybc-detail-v2 #external-pentest-method-gray:checked ~ .a-method-tabs__nav label[for="external-pentest-method-gray"], .cybc-detail-v2 #external-pentest-method-white:checked ~ .a-method-tabs__nav label[for="external-pentest-method-white"] { background: #10131c; box-shadow: inset 0 -3px 0 #20c78f; color: #ffffff; } .cybc-detail-v2 #external-pentest-method-black:focus-visible ~ .a-method-tabs__nav label[for="external-pentest-method-black"], .cybc-detail-v2 #external-pentest-method-gray:focus-visible ~ .a-method-tabs__nav label[for="external-pentest-method-gray"], .cybc-detail-v2 #external-pentest-method-white:focus-visible ~ .a-method-tabs__nav label[for="external-pentest-method-white"] { outline: 2px solid #136660; outline-offset: 3px; } .cybc-detail-v2 .a-method-tabs__panels { margin-top: var(--cybc-v2-s16); } .cybc-detail-v2 .a-method-tabs__panel { display: none; grid-template-columns: 56px minmax(0, 1fr); gap: var(--cybc-v2-s24); align-items: start; padding: var(--cybc-v2-s32); border: 1px solid #d5d8d7; border-radius: 12px; background: #ffffff; box-shadow: 0 12px 30px rgba(16, 19, 28, 0.07); } .cybc-detail-v2 #external-pentest-method-black:checked ~ .a-method-tabs__panels [data-method-panel="black"], .cybc-detail-v2 #external-pentest-method-gray:checked ~ .a-method-tabs__panels [data-method-panel="gray"], .cybc-detail-v2 #external-pentest-method-white:checked ~ .a-method-tabs__panels [data-method-panel="white"] { display: grid; } .cybc-detail-v2 .a-method-tabs__icon { width: 48px; height: 48px; margin-top: 2px; background: #10131c; mask-position: center; mask-size: 44px; mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 44px; -webkit-mask-repeat: no-repeat; } .cybc-detail-v2 .a-method-tabs__panel--black .a-method-tabs__icon { mask-image: var(--cybc-v2-icon-eye-off); -webkit-mask-image: var(--cybc-v2-icon-eye-off); } .cybc-detail-v2 .a-method-tabs__panel--gray .a-method-tabs__icon { background: #40454d; mask-image: var(--cybc-v2-icon-key); -webkit-mask-image: var(--cybc-v2-icon-key); } .cybc-detail-v2 .a-method-tabs__panel--white .a-method-tabs__icon { mask-image: var(--cybc-v2-icon-code); -webkit-mask-image: var(--cybc-v2-icon-code); } .cybc-detail-v2 .a-method-tabs__tag { display: inline-flex; margin-bottom: var(--cybc-v2-s12); padding: 5px 10px; border-radius: 999px; background: #e9ebea; color: #40454d; font-size: var(--cybc-v2-xs); line-height: 18px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .cybc-detail-v2 .a-method-tabs__body h3 { margin: 0; color: #10131c; font-size: var(--cybc-v2-h3); line-height: var(--cybc-v2-h3-lh); font-weight: 800; } .cybc-detail-v2 .a-method-tabs__body p { max-width: 760px; margin: var(--cybc-v2-s12) 0 0 !important; color: #40454d; font-size: var(--cybc-v2-base); line-height: var(--cybc-v2-base-lh); } @media (max-width: 640px) { .cybc-detail-v2 .a-section--methods { padding: var(--cybc-v2-s24); border-radius: 12px; } .cybc-detail-v2 .a-method-tabs__nav { grid-template-columns: repeat(3, minmax(78px, 1fr)); gap: 4px; padding: 4px; overflow-x: auto; } .cybc-detail-v2 .a-method-tabs__nav label { min-height: 46px; padding: 10px 8px; font-size: 14px; line-height: 20px; } .cybc-detail-v2 .a-method-tabs__panel { grid-template-columns: minmax(0, 1fr); gap: var(--cybc-v2-s16); padding: var(--cybc-v2-s24); } .cybc-detail-v2 .a-method-tabs__icon { width: 40px; height: 40px; mask-size: 36px; -webkit-mask-size: 36px; } } /* -------------------------------------------------------------------------- 30. Узкие экраны: три таба без горизонтальной прокрутки -------------------------------------------------------------------------- */ @media (max-width: 640px) { .cybc-detail-v2 .a-method-tabs__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; } .cybc-detail-v2 .a-method-tabs__nav label { min-width: 0; padding: 10px 4px; font-size: 13px; line-height: 18px; } } /* -------------------------------------------------------------------------- 31. Иерархическое оглавление страниц услуг: H2 > H3 > H4 -------------------------------------------------------------------------- */ .service-page__content-menu .service-detail__side-links { display: flex; flex-direction: column; gap: 0; padding-left: 0; list-style: none; counter-reset: toc-h2 toc-h3 toc-h4; } .service-page__content-menu .service-detail__side-links > li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0; padding: 0; list-style: none; } .service-page__content-menu .service-detail__side-links > li::before { position: static; display: block; width: auto; height: auto; border-radius: 0; background: none; color: #898d94; font-size: 12px; line-height: 1.45; font-weight: 600; text-align: right; } .service-page__content-menu .service-detail__side-links > li::after { content: none; display: none; } .service-page__content-menu .service-detail__side-links > .toc-level-2 { counter-increment: toc-h2; counter-reset: toc-h3 toc-h4; margin-top: 20px; } .service-page__content-menu .service-detail__side-links > .toc-level-2:first-child { margin-top: 0; } .service-page__content-menu .service-detail__side-links > .toc-level-2::before { content: counter(toc-h2) "."; color: #10131c; font-size: 14px; font-weight: 800; } .service-page__content-menu .service-detail__side-links > .toc-level-3 { counter-increment: toc-h3; counter-reset: toc-h4; margin-top: 10px; margin-left: 18px; } .service-page__content-menu .service-detail__side-links > .toc-level-3::before { content: counter(toc-h2) "." counter(toc-h3); } .service-page__content-menu .service-detail__side-links > .toc-level-4 { counter-increment: toc-h4; margin-top: 8px; margin-left: 36px; } .service-page__content-menu .service-detail__side-links > .toc-level-4::before { content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4); } .service-page__content-menu .service-detail__side-links a { display: block; text-decoration: none; } .service-page__content-menu .service-detail__side-links .toc-link-level-2 { color: #10131c; font-size: 14px; line-height: 1.45; font-weight: 700; } .service-page__content-menu .service-detail__side-links .toc-link-level-3 { color: #40454d; font-size: 13px; line-height: 1.45; font-weight: 500; } .service-page__content-menu .service-detail__side-links .toc-link-level-4 { color: #73777f; font-size: 12px; line-height: 1.45; font-weight: 400; } .service-page__content-menu .service-detail__side-links a.current { color: #20c78f; } /* -------------------------------------------------------------------------- 32. Compact service TOC dropdowns H2 is always visible; nested H3/H4 are collapsed by default. -------------------------------------------------------------------------- */ .service-page__content-menu .service-detail__side-links, .service-page__content-menu .service-detail__side-links .toc-children { margin: 0; padding: 0; list-style: none; } .service-page__content-menu .service-detail__side-links { display: flex; flex-direction: column; gap: 6px; counter-reset: toc-h2; } .service-page__content-menu .service-detail__side-links > .toc-level-2 { display: block; margin: 0; padding: 0; counter-increment: toc-h2; list-style: none; } .service-page__content-menu .service-detail__side-links > .toc-level-2::before, .service-page__content-menu .service-detail__side-links .toc-children > li::before { content: none; display: none; } .service-page__content-menu .toc-item__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; gap: 8px; align-items: start; min-height: 32px; padding: 5px 0; } .service-page__content-menu .toc-item__row::before { display: block; padding-top: 2px; color: #898d94; font-size: 12px; line-height: 20px; font-weight: 600; text-align: right; } .service-page__content-menu .service-detail__side-links > .toc-level-2 > .toc-item__row::before { content: counter(toc-h2) "."; color: #10131c; font-size: 13px; font-weight: 800; } .service-page__content-menu .toc-children--level-3 { counter-reset: toc-h3; } .service-page__content-menu .toc-children--level-3 > .toc-level-3 { counter-increment: toc-h3; } .service-page__content-menu .toc-children--level-3 > .toc-level-3 > .toc-item__row::before { content: counter(toc-h2) "." counter(toc-h3); } .service-page__content-menu .toc-children--level-4 { counter-reset: toc-h4; } .service-page__content-menu .toc-children--level-4 > .toc-level-4 { counter-increment: toc-h4; } .service-page__content-menu .toc-children--level-4 > .toc-level-4 > .toc-item__row::before { content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4); } .service-page__content-menu .toc-children[hidden] { display: none; } .service-page__content-menu .toc-children { display: block; margin: 2px 0 8px 14px; padding-left: 10px; border-left: 1px solid #d7ebe4; } .service-page__content-menu .toc-children .toc-item__row { grid-template-columns: 38px minmax(0, 1fr); min-height: 28px; padding: 4px 0; } .service-page__content-menu .toc-children .toc-children { margin: 0 0 2px 12px; padding-left: 8px; } .service-page__content-menu .toc-link-level-2, .service-page__content-menu .toc-link-level-3, .service-page__content-menu .toc-link-level-4 { display: block; min-width: 0; padding-top: 2px; text-decoration: none; text-wrap: pretty; } .service-page__content-menu .toc-link-level-2 { color: #10131c; font-size: 14px; line-height: 20px; font-weight: 700; } .service-page__content-menu .toc-link-level-3 { color: #40454d; font-size: 13px; line-height: 19px; font-weight: 500; } .service-page__content-menu .toc-link-level-4 { color: #73777f; font-size: 12px; line-height: 18px; font-weight: 400; } .service-page__content-menu .toc-toggle { position: relative; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; margin: -2px 0 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #136660; cursor: pointer; } .service-page__content-menu .toc-toggle::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.16s ease; } .service-page__content-menu .toc-toggle:hover { background: #edfbf6; } .service-page__content-menu .toc-toggle:focus-visible { outline: 2px solid #20c78f; outline-offset: 2px; } .service-page__content-menu .toc-level-2.is-open > .toc-item__row .toc-toggle::before { transform: translateY(2px) rotate(225deg); } .service-page__content-menu .service-detail__side-links a.current, .service-page__content-menu .toc-level-2.current-branch > .toc-item__row .toc-link-level-2 { color: #0a8f70; } @media (max-width: 1024px) { .service-page__content-menu .toc-item__row { grid-template-columns: 30px minmax(0, 1fr) 32px; } .service-page__content-menu .toc-toggle { width: 32px; height: 32px; } } /* -------------------------------------------------------------------------- 33. Точечные исправления после дизайн-ревью -------------------------------------------------------------------------- */ /* Этапы выравниваются по заголовку без стандартного отступа списка. */ .cybc-detail-v2 .a-section > .a-timeline { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* Компенсация лишней обёртки b в старом инфоблоке «Почему САЙБЕР». */ .why-we__content > b { display: contents; } @media (min-width: 751px) { #price-block .services-table tbody td.action-cell:not(:last-child) { width: 190px; } #price-block .services-table tbody td.action-cell:last-child { width: 180px; } #price-block .services-table button { width: 132px; min-width: 132px; box-sizing: border-box; } } /* Сумма и знак валюты не разрываются, срок остаётся отдельной строкой. */ #price-block .services-table .two-line { white-space: nowrap; } #price-block .services-table .two-line span { display: block; white-space: nowrap; } /* Сбрасываем также логический отступ нумерованного списка. */ .cybc-detail-v2 .a-section > .a-timeline { padding-inline-start: 0; } /* Защита от позднего сброса старого шаблона для ol. */ .cybc-detail-v2 .a-section > ol.a-timeline { margin: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; } /* -------------------------------------------------------------------------- 34. Точечные улучшения страницы пентеста мобильных приложений -------------------------------------------------------------------------- */ /* Четыре факта: ровная сетка 2 x 2 на десктопе и одна колонка на мобильном. */ @media (min-width: 641px) { .cybc-detail-v2 .a-proof-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cybc-detail-v2 .a-proof-strip--2 .a-proof:nth-child(odd) { border-left: 0; } .cybc-detail-v2 .a-proof-strip--2 .a-proof:nth-child(n + 3) { border-top: 1px solid #d7ebe4; } } /* Таблица нормативной базы: короткое название документа и широкое пояснение. */ .cybc-detail-v2 .a-table--document { width: 100%; table-layout: fixed; } .cybc-detail-v2 .a-table--document th:first-child, .cybc-detail-v2 .a-table--document td:first-child { width: 30%; } .cybc-detail-v2 .a-table--document th:nth-child(2), .cybc-detail-v2 .a-table--document td:nth-child(2) { width: 70%; } .cybc-detail-v2 .a-table--document th, .cybc-detail-v2 .a-table--document td { white-space: normal; word-break: normal; overflow-wrap: break-word; hyphens: none; } /* Девять векторов атак: самостоятельные карточки вместо трёх плотных колонок. */ .cybc-detail-v2 .a-vector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cybc-v2-s16); overflow: visible; border: 0; background: transparent; } .cybc-detail-v2 .a-vector-card { display: flex; min-width: 0; min-height: 100%; flex-direction: column; gap: var(--cybc-v2-s12); padding: var(--cybc-v2-s24); border: 1px solid #d7e4df; border-radius: 12px; background: #ffffff; box-shadow: 0 8px 24px rgba(6, 50, 47, 0.06); } .cybc-detail-v2 .a-vector-card .a-cell__head { justify-content: space-between; margin: 0; } .cybc-detail-v2 .a-vector-card .a-cell__icon { width: 26px; height: 26px; flex-basis: 26px; mask-size: 26px; -webkit-mask-size: 26px; } .cybc-detail-v2 .a-vector-card__number { display: inline-flex; min-width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 999px; background: #edfbf6; color: #136660; font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: 0.04em; } .cybc-detail-v2 .a-vector-card .a-cell__title { margin: 0; color: #10131c; font-size: 18px; line-height: 24px; font-weight: 800; text-wrap: balance; } .cybc-detail-v2 .a-vector-card .a-cell__text { margin: 0 !important; color: #40454d; font-size: 14px; line-height: 22px; text-wrap: pretty; } @media (min-width: 641px) and (max-width: 1024px) { .cybc-detail-v2 .a-vector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cybc-detail-v2 .a-vector-grid { grid-template-columns: minmax(0, 1fr); gap: var(--cybc-v2-s12); } .cybc-detail-v2 .a-vector-card { padding: var(--cybc-v2-s20, 20px); } }