/* Start:/bitrix/templates/aspro-priority/components/bitrix/news/catalog/style.min.css?1783416950356*/ @media(max-width:767px){.catalog.detail .head .maxwidth-theme .row{display:flex;flex-direction:column-reverse}.catalog.detail .head .item .info.wpadding{padding-top:0;padding-bottom:0}.catalog.detail .head .item>.galery{padding-top:40px}.catalog.detail .head>.maxwidth-theme>.row>.item{padding-bottom:46px}.catalog.detail .detail_right_block{display:none}} /* End */ /* Start:/bitrix/templates/aspro-priority/components/bitrix/news.detail/catalog3/style.css?1786436297227337*/ body .banners-content{margin-bottom:0;} .item:has(.properties .no) .price_default, .item:has(.properties .no) .name { opacity: 0.5 !Important; } .properties:has(.no) ~ .buy_block_wrap .price_default, .properties:has(.no) ~ .top_block_wrap .name { opacity: 0.50 !Important; } .item .info:has(.status-icon.nostock) .price, .item .info:has(.status-icon.nostock) .price_new { //color: #999 !important; //opacity: 0.7; //transition: all 0.3s ease; opacity: 0.5 !Important; } /* ============================================================ ЛП: лендинг-режим продуктовой страницы (редизайн /solutions/) Активируется свойством LP_HERO_TITLE. 11.07.2026 (ред. 3) Акцент: var(--lp-accent), по умолчанию #dd130a (тема CUSTOM_s1). Переопределяется свойством LP_ACCENT_COLOR (класс .lp-accent). ============================================================ */ /* Палитра/токены ЛП: единая точка правки. Все использования — через var(...,fallback), поэтому при неопределённой переменной рендер остаётся прежним (значение = fallback). */ .lp-banner,.lp-sections{ --lp-accent:#dd130a; --lp-accent-soft:color-mix(in srgb, var(--lp-accent) 10%, #fff); /* мягкая подложка иконок */ --lp-accent-ink:color-mix(in srgb, var(--lp-accent) 75%, #000); /* акцент для ТЕКСТА на --lp-accent-soft: сам акцент даёт 4,25:1 */ --lp-accent-light:color-mix(in srgb, var(--lp-accent) 55%, #fff); /* Ф3.5: акцент на ТЁМНОМ фоне (= --acc-light макета В1) */ --lp-fg:#333; /* основной текст */ --lp-ink:#555; /* вторичный текст (темнее) */ /* E-2 (2026-07-30, доступность): серые подняты до WCAG AA. Было #777 (4.48:1 на белом и 4.29:1 на подложке #fafafa) и #999 (2.85:1) — оба ниже нормы 4.5:1 для текста мельче 24px, а именно мелкими подписями они и заданы. Светлее #767676 на белом норму не проходит вообще, поэтому вилка серых теперь #555 → #646464 → #707070 (7,5 / 5,9 / 5,0 на белом; на #fafafa 7,2 / 5,7 / 4,8). Использования не менялись: они читают токен, fallback'и в var(...) остались историческими. */ --lp-muted:#646464; /* приглушённый текст */ --lp-faint:#707070; /* подписи/капс */ --lp-border:#f1f1f1; /* рамка карточек */ --lp-line:#E8E8E4; /* разделители/светлые рамки */ --lp-soft:#FAFAF8; /* мягкая подложка блоков */ --lp-shadow:0 4px 22px rgba(0,0,0,.09); /* тень ховера карточек */ /* Радиусы: 4 ступени (домашний радиус темы Аспро — 3-4px; пилюля — кнопки/беджи) */ --lp-r-sm:6px; --lp-r-md:8px; --lp-r-lg:12px;--lp-r-xl:14px; --lp-r-pill:30px; } /* --- Акцентный цвет: кнопки внутри ЛП-областей --- */ .lp-accent .btn.btn-default{background-color:var(--lp-accent);border-color:var(--lp-accent);} .lp-accent .btn.btn-default:hover,.lp-accent .btn.btn-default:focus,.lp-accent .btn.btn-default:active{background-color:var(--lp-accent);border-color:var(--lp-accent);filter:brightness(1.15);} .lp-accent .btn.btn-default.white{color:var(--lp-accent);border-color:var(--lp-accent);background:#fff;} .lp-accent .btn.btn-default.white:hover{color:#fff;background:var(--lp-accent);border-color:var(--lp-accent);filter:none;} /* --- Акцентный цвет: штатные элементы внутри ЛП (аккордеон, вкладки, «Нужна консультация», цветные блоки) --- */ .lp-accent .accordion-head:hover .arrow_open{background:var(--lp-accent);border-color:var(--lp-accent);} .lp-accent .accordion-head .arrow_open:hover{background:var(--lp-accent);border-color:var(--lp-accent);filter:brightness(1.15);} /* стрелки-кнопки карточек (публикации/связанные списки): a.arrow_open.link */ .lp-accent .item:hover .arrow_open.link{background:var(--lp-accent);border:1px solid var(--lp-accent);} .lp-accent .item .arrow_open.link:hover{background:var(--lp-accent);border:1px solid var(--lp-accent);filter:brightness(1.15);} .lp-accent .item.opened .accordion-head:before{background:var(--lp-accent);} .lp-accent .accordion-head.accordion-open a,.lp-accent .accordion-head:hover a{color:var(--lp-accent);} .lp-accent .tabs .nav-tabs a:hover,.lp-accent .tabs .nav-tabs a:active,.lp-accent .tabs .nav-tabs a:focus{color:var(--lp-accent);} .lp-accent .nav-tabs > li.active:after{background:var(--lp-accent);} .lp-accent .ask_a_question .outer,.lp-accent .ask_a_question:hover .outer{background-color:var(--lp-accent);} .lp-accent .ask_a_question:hover .outer>span{border-color:var(--lp-accent);} .lp-accent .ask_a_question .outer:hover{background-color:var(--lp-accent);filter:brightness(1.15);} .lp-accent .ask_a_question .outer>span:hover{border-color:var(--lp-accent);} .lp-accent .ask_a_question .inner .text-block:before{background-color:var(--lp-accent);} .lp-accent blockquote.info:before,.lp-accent blockquote:before{background-color:var(--lp-accent);} .lp-accent .switch_gallery:hover{background-color:var(--lp-accent);} .lp-accent .list.icons .fa{color:var(--lp-accent);} /* ссылки: тема красит все простые в красный — внутри ЛП перекрашиваем в акцент товара (тёмные ссылки .dark-color/.dark_link остаются тёмными, у них акцент только на hover) */ .lp-accent a:not(.btn):not(.dark-color):not(.dark_link){color:var(--lp-accent);} .lp-accent a:hover:not(.btn),.lp-accent a.dark-color:hover,.lp-accent .dark_link:hover,.lp-accent .dark-color:hover{color:var(--lp-accent);} .lp-accent a.colored,.lp-accent .colored{color:var(--lp-accent);} .lp-accent table.table th{background-color:var(--lp-accent);} /* --- Заголовки секций: штатные отступы h2 принудительно (13.07.2026) --- */ .lp-sections h2{margin:32px 0 24px !important;} /* --- Баннер: бейдж, цена, чипы (скругления — как у кнопок баннера) --- */ .lp-banner .lp-badge{display:inline-block;background:#fff;color:var(--lp-accent);border-radius:var(--lp-r-pill);padding:4px 16px;font-size:.8em;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:12px;} /* мобильная копия баннера (.wrap_tablet_text видна только <768px): тема не задаёт цвета текста (наследуется #777) и прячет картинку — задаём явно, скоуп .lp-banner */ .lp-banner .tablet_text .h1{display:block;font-size:1.8667em;font-weight:normal;line-height:1.2em;margin:16px 0 12px;color:var(--lp-fg,#333);} .lp-banner .tablet_text .intro-text{color:var(--lp-fg,#333);} .lp-banner .wrap_tablet_text .tablet_img{display:flex;visibility:visible;height:250px;background-size:cover !important;align-items:flex-end;justify-content:center;overflow:hidden;} .lp-banner .wrap_tablet_text .tablet_img img{max-height:calc(100% - 20px);width:auto;} .lp-banner-btns{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} @media (min-width:992px){ .lp-banner-btns{flex-wrap:nowrap;} } .lp-chips{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap;} /* чип-пилюля баннера (чипы отраслей .lp-tchip сняты волной 2, стили удалены Ф10) */ .lp-chip{border:1px solid var(--lp-line,#eee);border-radius:var(--lp-r-pill);padding:4px 16px;font-size:.8em;color:var(--lp-ink,#555);} .lp-chip{background:rgba(255,255,255,.9);display:inline-flex;gap:8px;align-items:center;} .lp-chip i{width:7px;height:7px;background:var(--lp-accent);border-radius:50%;flex:none;} /* --- Тёмная полоса проблемы: вплотную под баннером, ограничение по ширине фоновых картинок сайта --- */ /* цвета полосы управляются свойствами элемента LP_PROBLEM_BG / LP_PROBLEM_COLOR (inline-переменные на .lp-problem); по умолчанию — исходные #222/#fff, текст пунктов — смесь цвета текста с фоном (при дефолтах ≈ прежний #ccc) */ .lp-problem{background:var(--lp-problem-bg,#222);color:var(--lp-problem-color,#fff);margin:0 auto;max-width:1920px;} .lp-problem-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px;align-items:start;padding:32px 0;} .lp-problem-title{font-size:1.4em;font-weight:bold;line-height:1.4em;color:var(--lp-problem-color,#fff);} .lp-problem-item{font-size:.8667em;line-height:1.6em;color:color-mix(in srgb,var(--lp-problem-color,#fff) 78%,var(--lp-problem-bg,#222));} .lp-problem-item b{display:block;color:var(--lp-problem-color,#fff);font-weight:500;margin-bottom:4px;} /* --- Секции: заголовки h2 — штатные отступы шаблона (не переопределяем) --- */ .lp-sections{margin-top:0;} .lp-sect{margin-top:12px;padding:0 0 8px;} /* межблочные отступы дают drag_block; класс wraps из связки убран (bugfix заказчика 13.07.2026) */ .lp-note{margin:-14px 0 4px;color:var(--lp-muted,#777);} /* --- Сетки карточек --- */ .lp-grid{display:grid;gap:16px;margin-top:20px;} /* сетки с фиксированным числом колонок: выбираются в epilog по количеству карточек */ .lp-cols-3{grid-template-columns:repeat(3,1fr);} .lp-cols-4{grid-template-columns:repeat(4,1fr);} /* живая ветка эпилога (7+ карточек, не кратно 3): ни одна ЛП сейчас этот класс не даёт */ .lp-grid-4{grid-template-columns:repeat(4,1fr);} /* --- Карточка (в духе .item.border.shadow) --- */ .lp-card{background:#fff;border:1px solid var(--lp-border,#f1f1f1);border-radius:var(--lp-r-sm);padding:16px 20px;transition:box-shadow .3s ease;} .lp-card:hover{box-shadow:var(--lp-shadow,0 4px 22px rgba(0,0,0,.09));} .lp-card > b{display:block;color:var(--lp-fg,#333);line-height:1.5;margin-bottom:4px;} .lp-card > span{display:block;font-size:.8667em;line-height:1.5em;color:var(--lp-muted,#777);} /* --- ЛП-режим (общий отступ) --- */ .lp-mode{padding-bottom:0;} /* --- Шаги: карточки с вертикальной акцентной чертой (.info) --- */ .lp-step.info{border-left:3px solid var(--lp-accent);border-radius:0 var(--lp-r-sm) var(--lp-r-sm) 0;background:var(--lp-soft,#fafafa);} .lp-step-num{font-size:1.8667em;font-weight:bold;color:var(--lp-accent);line-height:1.2em;margin-bottom:8px;} /* --- Тарифы --- */ #lp-tarifs{position:relative;} #lp-tarifs > span[id]{position:absolute;top:-80px;} .lp-price-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;} .lp-price-head .lp-note{margin:0;} /* бедж «Наш продукт» на карточке (позиционируется абсолютно на верхней рамке) */ .lp-sticker{position:absolute;top:-10px;left:22px;background:var(--lp-accent);color:#fff;font-size:10px;letter-spacing:.8px;text-transform:uppercase;border-radius:var(--lp-r-pill);padding:2px 12px;line-height:16px;} /* --- Для кого: карточки с верхней акцентной чертой --- */ .lp-aud{border-top:3px solid var(--lp-accent);border-radius:0 0 var(--lp-r-sm) var(--lp-r-sm);} .lp-aud > span{margin-top:4px;} .lp-aud-lbl{color:var(--lp-fg,#333);font-weight:500;} /* --- Счётчики --- */ .lp-counter{text-align:center;padding:24px 16px;} .lp-counter > b{font-size:2.1333em;color:var(--lp-accent);line-height:1.2em;margin-bottom:4px;} /* --- Детальный текст: убрать штатный верхний паддинг (.detail .content.wttabs{padding-top:52px}), но ТОЛЬКО когда текст начинается с вкладок (Бэкап) — без вкладок (Поток) штатный отступ нужен, иначе текст липнет к полосе проблемы. Специфичность выше штатной (4 класса), т.к. бандл шаблона грузится после бандла страницы --- */ .detail .lp-sections .content.wttabs:has(> .tabs){padding-top:0;} /* --- Документы: float-сетка Bootstrap 3 ломается при разной высоте карточек — переводим ряд на flex --- */ .lp-sections .docs-block .docs_wrap .row{display:flex;flex-wrap:wrap;} /* --- Сценарии использования: карточки с иконками (вкладка «Для ИТ-специалистов») --- */ .lp-scen{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin:20px 0 8px;} .lp-scen-card{background:#fff;border:1px solid var(--lp-border,#f1f1f1);border-radius:var(--lp-r-md);padding:22px;transition:box-shadow .3s ease;display:grid;grid-template-columns:46px 1fr;gap:4px 16px;} .lp-scen-card:hover{box-shadow:var(--lp-shadow,0 4px 22px rgba(0,0,0,.09));} /* иконка-кружок с мягкой акцентной подложкой (общее для сценариев и «что копируется») */ .lp-scen-ico,.lp-card .lp-copied-ico{border-radius:50%;background:var(--lp-accent-soft,color-mix(in srgb, var(--lp-accent) 10%, #fff));display:flex;align-items:center;justify-content:center;color:var(--lp-accent);} .lp-scen-ico{width:46px;height:46px;margin-bottom:0;grid-row:1 / span 2;} .lp-scen-ico svg{width:24px;height:24px;display:block;} /* иконки через CSS-mask по классу (lpi + ключ): визуальный редактор Битрикса вырезает inline-SVG из DETAIL_TEXT при сохранении, а классы на div сохраняет; цвет = currentColor (--lp-accent) */ .lp-scen-ico.lpi::before{content:"";width:24px;height:24px;background:currentColor;-webkit-mask:var(--lp-ico) center/contain no-repeat;mask:var(--lp-ico) center/contain no-repeat;} .lp-scen-ico.i-onboard{--lp-ico:url("data:image/svg+xml;utf8,");} .lp-scen-ico.i-offboard{--lp-ico:url("data:image/svg+xml;utf8,");} .lp-scen-ico.i-clock{--lp-ico:url("data:image/svg+xml;utf8,");} .lp-scen-ico.i-shield{--lp-ico:url("data:image/svg+xml;utf8,");} .lp-scen-ico.i-nodes{--lp-ico:url("data:image/svg+xml;utf8,");} .lp-scen-ico.i-transfer{--lp-ico:url("data:image/svg+xml;utf8,");} .lp-scen-ico.i-archive{--lp-ico:url("data:image/svg+xml;utf8,");} .lp-scen-card b{display:block;color:var(--lp-fg,#333);line-height:1.4em;margin-bottom:4px;} /* текст карточки:

(редактор Битрикса вырезает span при сохранении элемента) */ .lp-scen-card span,.lp-scen-card p{display:block;font-size:.8667em;line-height:1.5em;color:var(--lp-muted,#777);} .lp-scen-card p{margin:0;} /* «Какие задачи решает» — карточки с вертикальной полосой слева. ⚠️ Волна 1 (2026-07-28): полоса НЕЙТРАЛЬНАЯ (была var(--lp-accent)) — на странице было 40+ акцентных полос, из-за чего ни один акцент не читался (фон Ресторфф). Акцент оставлен hero / цене / финалу. Откат: вернуть border-left:3px solid var(--lp-accent,#dd130a). Так же в .lp-fcard и a.lp-rcard. */ .lp-scen-card.wti{border-radius:0;border-left:3px solid var(--lp-line,#eee);padding-left:20px;transition:box-shadow .3s ease,background-color .3s ease;} .lp-scen-card.wti:hover{background:color-mix(in srgb, var(--lp-accent) 5%, #fff);} .lp-scen.cols3{grid-template-columns:repeat(3,1fr);} .lp-scen.cols2{grid-template-columns:repeat(2,1fr);} @media (max-width:1023px){ .lp-scen.cols3{grid-template-columns:repeat(2,1fr);} } @media (max-width:767px){ .lp-scen,.lp-scen.cols3,.lp-scen.cols2{grid-template-columns:1fr;gap:12px;} .lp-scen-card.wti{display:block;} } /* --- Иконки карточек «Что копируется» (лендинг) --- */ .lp-card .lp-copied-ico{width:40px;height:40px;margin-bottom:12px;} /* база — см. общий селектор .lp-scen-ico,.lp-card .lp-copied-ico */ .lp-card .lp-copied-ico svg{width:21px;height:21px;display:block;} @media (max-width:767px){ .lp-card .lp-copied-ico{display:none;} /* на мобиле карточки-пилюли */ } /* --- Сравнение с альтернативами: карточки-колонки (вкладка «Для ИТ-специалистов») --- */ .lp-cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:center;margin:20px 0 12px;} .lp-cmp-card{background:#fff;border:1px solid var(--lp-border,#f1f1f1);border-radius:var(--lp-r-lg);padding:20px 24px;} .lp-cmp-card.main{position:relative;border:2px solid var(--lp-accent);padding:32px 24px;box-shadow:0 6px 26px rgba(0,0,0,.10);} .lp-cmp-head{font-weight:bold;color:var(--lp-fg,#333);font-size:1.0667em;line-height:1.4em;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--lp-border,#f1f1f1);} .lp-cmp-card.main .lp-cmp-head{color:var(--lp-accent);} .lp-cmp-row{padding:8px 0;border-bottom:1px solid var(--lp-border,#f1f1f1);} .lp-cmp-row:last-child{border-bottom:none;} .lp-cmp-row i{display:block;font-style:normal;font-size:.7333em;line-height:1.5em;letter-spacing:.5px;text-transform:uppercase;color:var(--lp-faint,#999);} .lp-cmp-row span{display:block;font-size:.8667em;line-height:1.5em;color:var(--lp-ink,#555);} .lp-cmp-card.main .lp-cmp-row span{color:var(--lp-fg,#333);} @media (max-width:1023px){ .lp-cmp{grid-template-columns:1fr;align-items:stretch;} .lp-cmp-card.main{padding:24px;order:-1;} } /* --- FAQ: отступ под штатный аккордеон --- */ .lp-faq .accordion-type-1{margin-top:0;} /* --- Финальный CTA (штатный .styled-block + грид) --- */ .styled-block.lp-cta{margin:28px 0 40px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;border-left-color:var(--lp-accent);} .lp-cta-title{font-size:1.6em;font-weight:bold;color:var(--lp-fg,#333);line-height:1.4em;} .lp-cta-sub{margin-top:8px;line-height:1.6em;} .lp-cta-btns{display:flex;gap:12px;flex-wrap:wrap;} /* --- P1-10: развилка trial/демо (перебивает грид .lp-cta на вертикальный стек) --- */ .styled-block.lp-cta.lp-fork{display:block;grid-template-columns:none;} .lp-fork-head{text-align:center;max-width:640px;margin:0 auto;} .lp-fork-sub{margin-top:8px;line-height:1.6em;color:var(--lp-ink,#555);} .lp-fork-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;} .lp-fork-card{position:relative;display:flex;flex-direction:column;padding:28px;background:#fff;border:1px solid var(--lp-line,#eee);border-radius:var(--lp-r-md,6px);} .lp-fork-card--trial{border-color:var(--lp-accent);background:var(--lp-accent-soft,#fce7e7);} .lp-fork-eyebrow{align-self:flex-start;font-size:.7333em;font-weight:bold;text-transform:uppercase;letter-spacing:0.8px;color:var(--lp-accent);margin-bottom:12px;} .lp-fork-card--demo .lp-fork-eyebrow{color:var(--lp-muted,#777);} .lp-fork-h{font-size:1.4em;font-weight:bold;color:var(--lp-fg,#333);line-height:1.4;} .lp-fork-desc{margin-top:8px;line-height:1.6;color:var(--lp-ink,#555);} .lp-fork-card .lp-fork-btn{display:block;width:100%;text-align:center;margin-top:auto;} .lp-fork-contact{text-align:center;margin-top:20px;color:var(--lp-muted,#777);} /* рендерится при заполненном LP_CTA_CONTACT (у обеих ЛП пусто) */ @media (max-width:767px){ .lp-fork-cards{grid-template-columns:1fr;gap:16px;} .lp-fork-card{padding:24px;} } /* --- Планшет --- */ @media (max-width:1023px){ .lp-grid-4,.lp-cols-4,.lp-cols-3{grid-template-columns:repeat(2,1fr);} .lp-problem-grid{grid-template-columns:1fr 1fr;gap:24px;} .styled-block.lp-cta{grid-template-columns:1fr;} } /* --- Мобильный (вариант 1c) --- */ @media (max-width:767px){ .lp-grid{gap:12px;margin-top:16px;} .lp-grid-4,.lp-cols-4,.lp-cols-3{grid-template-columns:1fr;} .lp-problem-grid{grid-template-columns:1fr;gap:16px;padding:24px 0;} .lp-problem-title{font-size:1.0667em;} .lp-banner-btns{flex-direction:column;align-items:stretch;} .lp-banner-btns .btn{width:100%;} .lp-chips{justify-content:center;} .styled-block.lp-cta{padding:20px 20px;margin:20px 0 28px;} .lp-cta-title{font-size:1.4em;} .lp-cta-btns .btn{width:100%;} } /* === Штатные тарифы Аспро (tarifs_linked_8) в акценте продукта ===================== Тема жёстко красит акцент тарифа в фирменный красный (#dd130a) и стикер RECOMMEND в фиолетовый (#7558d2). Перекрашиваем в --lp-accent scoped-правилами (специфичность выше штатной за счёт префикса .lp-accent — бандл темы грузится позже бандла страницы). */ /* активная/наведённая цена */ .lp-accent .item-views.tarifs.type_8 .item .prices .all_price li:hover .price_title:before, .lp-accent .item-views.tarifs.type_8 .item .prices .all_price li.active .price_title:before{border-color:var(--lp-accent);background:var(--lp-accent);} /* стикер «Основной»/HIT — форма пилюли + акцент (в т.ч. для нового enum sticker_main) */ .lp-accent .item-views.tarifs .stickers .stickers-wrapper [class^="sticker_"]{background:var(--lp-accent);color:#fff;display:inline-block;padding:4px 12px;border-radius:var(--lp-r-pill);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;line-height:1.4;} /* кнопка «Заказать»: вид зависит от беджа «Основной» (класс .whit по свойству HIT). Тема бьёт цепочкой .item-views.tarifs .flexslider .item:hover .order .btn:hover (спец. 0,8,0) — перекрываем !important. • Тариф с беджем «Основной» (.whit) — кнопка всегда в акценте (заливка). • Тариф без беджа — «призрачная» кнопка: белая с акцентным контуром, при выделении (наведении на карточку или кнопку) заливается акцентом. */ /* --- основной тариф (.whit): всегда акцентная заливка --- */ .lp-accent .item-views.tarifs .item.whit .btn.btn-default, .lp-accent .item-views.tarifs .item.whit .btn.btn-default:hover, .lp-accent .item-views.tarifs .item.whit .btn.btn-default:focus, .lp-accent .item-views.tarifs .item.whit .btn.btn-default:active, .lp-accent .item-views.tarifs .flexslider .item.whit:hover .order .btn, .lp-accent .item-views.tarifs .flexslider .item.whit:hover .order .btn:hover, .lp-accent .item-views.tarifs .flexslider .item.whit:hover .buy_block .btn, .lp-accent .item-views.tarifs .flexslider .item.whit:hover .buy_block .btn:hover{background-color:var(--lp-accent) !important;border-color:var(--lp-accent) !important;color:#fff !important;} .lp-accent .item-views.tarifs .item.whit .btn.btn-default:hover{filter:brightness(1.08);} /* --- обычный тариф (без беджа): белая кнопка с акцентным контуром --- */ .lp-accent .item-views.tarifs .item:not(.whit) .btn.btn-default, .lp-accent .item-views.tarifs .item:not(.whit) .btn.btn-default:focus{background-color:#fff !important;border:1px solid var(--lp-accent) !important;color:var(--lp-accent) !important;} /* при выделении (наведение на карточку ИЛИ на кнопку) — заливка акцентом */ .lp-accent .item-views.tarifs .item:not(.whit) .btn.btn-default:hover, .lp-accent .item-views.tarifs .item:not(.whit) .btn.btn-default:active, .lp-accent .item-views.tarifs .flexslider .item:not(.whit):hover .order .btn, .lp-accent .item-views.tarifs .flexslider .item:not(.whit):hover .order .btn:hover, .lp-accent .item-views.tarifs .flexslider .item:not(.whit):hover .buy_block .btn, .lp-accent .item-views.tarifs .flexslider .item:not(.whit):hover .buy_block .btn:hover{background-color:var(--lp-accent) !important;border:1px solid var(--lp-accent) !important;color:#fff !important;} /* кнопка: уже по ширине, скруглённая пилюля, по центру */ .lp-accent .item-views.tarifs .item .order{text-align:center;margin-top:20px;} /* уже по ширине + пилюля: тема тянет .type_8 .flexslider .item .order .btn на 100% — бьём !important */ .lp-accent .item-views.tarifs.type_8 .flexslider .item .order .btn{display:inline-block !important;width:auto !important;padding:12px 28px !important;border-radius:var(--lp-r-pill) !important;font-size:.7333em;line-height:1.4 !important;} /* тема раздувает внутренний span: .order .btn>span{padding:20px 0 20px} — обнуляем, иначе кнопка становится огромной по высоте */ .lp-accent .item-views.tarifs.type_8 .flexslider .item .order .btn > span, .lp-accent .item-views.tarifs.type_8 .flexslider .item .buy_block .btn > span{padding:0 !important;display:inline !important;line-height:inherit !important;} /* карточки: рамка + акцентная рамка «Основного» (класс whit по свойству HIT) */ .lp-accent .item-views.tarifs.type_8 .item > .wrap{border:1px solid var(--lp-border,#f1f1f1);border-radius:var(--lp-r-sm);} .lp-accent .item-views.tarifs.type_8 .item:before, .lp-accent .item-views.tarifs.type_8 .item:after{display:none !important;} .lp-accent .item-views.tarifs.type_8 .item.whit > .wrap{border:2px solid var(--lp-accent);} .lp-accent .item-views.tarifs.type_8 .item.whit > .wrap:before{display:none;} /* цена: крупная (сопоставима с ЛП), одна — без радио; годовая — подписью под ценой */ .lp-accent .item-views.tarifs.type_8 .item .prices{padding-bottom:0;} .lp-accent .item-views.tarifs.type_8 .all_price.single{margin:0;} .lp-accent .item-views.tarifs.type_8 .all_price.single li{padding:4px 0;} .lp-accent .item-views.tarifs.type_8 .all_price.single li:before, .lp-accent .item-views.tarifs.type_8 .all_price.single li:after{display:none !important;} .lp-accent .item-views.tarifs.type_8 .all_price.single li .price_title{display:none;} /* цена по центру (тема/Bootstrap .pull-right{float:right!important} — бьём !important) */ .lp-accent .item-views.tarifs.type_8 .all_price.single{text-align:center;} .lp-accent .item-views.tarifs.type_8 .all_price.single li{text-align:center;} .lp-accent .item-views.tarifs.type_8 .all_price.single li .value{float:none !important;width:100% !important;text-align:center !important;padding:0;margin:0;font-size:1.8667em;font-weight:bold;color:var(--lp-fg,#333);line-height:1.2;} .lp-accent .item-views.tarifs .tarif-price-unit{text-align:center;font-size:.8em;color:var(--lp-muted,#777);margin-top:2px;} .lp-accent .item-views.tarifs .tarif-year-note{text-align:center;font-size:.8em;color:var(--lp-muted,#777);margin-top:2px;} .lp-accent .item-views.tarifs .tarif-year-note--empty{visibility:hidden;} /* характеристики: убрать маркер-точку */ .lp-accent .item-views.tarifs .item .properties .property .title-prop{padding-left:0;} .lp-accent .item-views.tarifs .item .properties .property .title-prop:before{display:none;} /* стикер «Основной»: пилюля НА верхней рамке карточки, как бедж «Наш продукт» (.lp-sticker). Якорь абсолютного позиционирования — сама рамка .wrap; промежуточные .body-wrap/.image принудительно static, иначе стикер цепляется за них и уезжает ВНУТРЬ карточки (ниже верхней рамки). */ .lp-accent .item-views.tarifs.type_8 .item > .wrap{position:relative !important;padding-bottom:32px;} .lp-accent .item-views.tarifs.type_8 .item .body-wrap{position:static !important;} .lp-accent .item-views.tarifs.type_8 .item .image .stickers{position:absolute !important;top:-11px;left:22px;z-index:5;margin:0 !important;padding:0 !important;} .lp-accent .item-views.tarifs.type_8 .item .image .stickers .stickers-wrapper{margin:0;padding:0;} /* пустой блок .image (у тарифов нет иконки) не должен занимать место над названием — и НЕ должен быть якорем позиционирования */ .lp-accent .item-views.tarifs.type_8 .item .image{position:static !important;min-height:0 !important;height:auto !important;margin:0 !important;padding:0 !important;} .lp-accent .item-views.tarifs.type_8 .item .image .wrap{position:static !important;min-height:0 !important;height:auto !important;border:0 !important;} .lp-accent .item-views.tarifs.type_8 .item .top_block{padding-top:8px;} /* отступ под кнопкой: даём padding-bottom самой рамке (.wrap выше) — работает на ВСЕХ карточках, а не только на короткой «Легкий» (у тарифов разной высоты margin у .order виден только там, где есть запас) */ .lp-accent .item-views.tarifs.type_8 .flexslider .item .order{margin:20px 0 0 !important;padding:0 !important;} /* === Add-on (дополнения к тарифу): плашка в стиле блока «Поток» === */ .lp-addons{margin-top:24px;} .lp-addon{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:12px;background:#fff;border:1px dashed var(--lp-border,#f1f1f1);border-radius:var(--lp-r-md);padding:32px 28px;min-height:120px;} .lp-addon-badge{position:absolute;top:-10px;left:22px;background:#eef1f6;color:var(--lp-fg,#333);font-size:10px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;border-radius:var(--lp-r-pill);padding:4px 12px;line-height:16px;border:1px solid #e2e7ee;} .lp-addon-ic{flex:0 0 auto;width:46px;height:46px;border-radius:var(--lp-r-lg);display:flex;align-items:center;justify-content:center;color:#fff;background:var(--lp-accent);} .lp-addon-ic svg{width:24px;height:24px;} .lp-addon-body{flex:1;min-width:220px;} .lp-addon-body b{display:block;font-size:1.0667em;color:var(--lp-fg,#333);line-height:1.4;} .lp-addon-body span{display:block;font-size:.8667em;color:var(--lp-muted,#777);line-height:1.5;margin-top:2px;} .lp-addon-price{font-size:1.0667em;font-weight:bold;color:var(--lp-fg,#333);white-space:nowrap;} .lp-addon .btn{margin:0;} /* Ф7 (2026-08-04, просьба заказчика): add-on выделяется при наведении — как карточка тарифа: акцентная рамка + тень + мягкая акцентная подложка; кнопка заливается акцентом (у тарифов это делают правила .item:not(.whit):hover … .btn выше). */ .lp-addon{transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;} .lp-addon:hover{border-style:solid;border-color:var(--lp-accent,#dd130a);box-shadow:var(--lp-shadow,0 4px 22px rgba(0,0,0,.09));background:color-mix(in srgb, var(--lp-accent,#dd130a) 4%, #fff);} .lp-addons .lp-addon:hover .btn.btn-default{background-color:var(--lp-accent,#dd130a) !important;border-color:var(--lp-accent,#dd130a) !important;color:#fff !important;} .lp-addons .lp-addon:hover .lp-addon-badge{border-color:var(--lp-accent,#dd130a);color:var(--lp-accent-ink,#a60e08);} @media (max-width:767px){ .lp-addon{gap:12px;} .lp-addon .btn{width:100%;} } /* Плавающий блок «Нужна консультация?»: подтекст контрастным + кнопка-пилюля =============== */ /* подтекст наследует body var(--lp-muted,#777) (низкий контраст) — делаем тёмным, введение (.introtext) не трогаем */ .lp-accent .ask_a_question .inner .text-block p:not(.introtext){color:var(--lp-fg,#333);} /* кнопка «Задать вопрос»: из планки-подвала (акцентная полоса .outer) — в скруглённую пилюлю */ .lp-accent .ask_a_question .outer, .lp-accent .ask_a_question:hover .outer, .lp-accent .ask_a_question .outer:hover{background-color:transparent !important;margin:0 !important;padding:0 24px 24px !important;} .lp-accent .ask_a_question .outer>span{display:inline-block;width:auto;margin:0;padding:12px 32px;border:0 !important;border-radius:var(--lp-r-pill);background-color:var(--lp-accent);color:#fff !important;line-height:1.4;transition:filter .2s ease;} .lp-accent .ask_a_question:hover .outer>span, .lp-accent .ask_a_question .outer>span:hover{background-color:var(--lp-accent);color:#fff !important;filter:brightness(1.1);} /* ===== Блок социального доказательства (lp-trust) — 2026-07-22; типографика по em-шкале темы ===== */ .lp-trust{border:1px solid var(--lp-line,#eee);background:#fff;padding:32px 32px;} /* без скругления — согласовано с соседними LP-блоками */ @media(max-width:767px){.lp-trust{padding:24px 20px;}} .lp-trust__eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:4px 16px;border-radius:var(--lp-r-pill);background:var(--lp-accent-soft);color:var(--lp-accent);font-size:.8em;font-weight:700;letter-spacing:.6px;text-transform:uppercase;} .lp-trust__eyebrow::before{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--i-shield) center/contain no-repeat;mask:var(--i-shield) center/contain no-repeat;} .lp-trust__title{margin:0 0 8px;} /* размер/начертание — из стиля h2 темы */ .lp-trust__lead{margin:0 0 28px;font-size:1.0667em;line-height:1.6em;color:var(--lp-ink,#555);} /* лид-абзац: подзаголовочный размер 1.0667em */ .lp-trust__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lp-line,#eee);border:1px solid var(--lp-line,#eee);border-radius:var(--lp-r-md);overflow:hidden;margin:0 0 28px;} .lp-tstat{background:var(--lp-soft,#fafafa);padding:20px 16px;text-align:center;} .lp-tstat__num{font-size:2.1333em;font-weight:bold;color:var(--lp-accent);line-height:1.2em;font-variant-numeric:tabular-nums;} /* = .lp-counter>b */ .lp-tstat__label{margin-top:4px;font-size:.8667em;line-height:1.5em;color:var(--lp-muted,#777);} .lp-trust__cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 28px;} .lp-tcase{background:#fff;border:1px solid var(--lp-line,#eee);border-radius:var(--lp-r-md);padding:20px;} .lp-tcase__ico{width:40px;height:40px;margin:0 0 12px;border-radius:var(--lp-r-lg);background:var(--lp-accent-soft);} .lp-tcase__ico::before{content:"";display:block;width:100%;height:100%;background:var(--lp-accent);-webkit-mask:var(--ico) center/21px no-repeat;mask:var(--ico) center/21px no-repeat;} .lp-tcase__kind{margin:0 0 12px;font-size:1.0667em;font-weight:bold;line-height:1.4em;color:var(--lp-fg,#333);} .lp-tmetric{position:relative;margin:0 0 8px;padding-left:16px;font-size:.8667em;line-height:1.5em;color:var(--lp-muted,#777);} .lp-tmetric:last-child{margin-bottom:0;} .lp-tmetric::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--lp-accent);} .lp-tmetric b{color:var(--lp-fg,#333);font-weight:bold;font-variant-numeric:tabular-nums;} .lp-trust__note{margin:20px 0 0;font-size:.8667em;line-height:1.5em;color:var(--lp-faint,#999);} .lp-trust__eyebrow.i-shield{--i-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 3l7 3v5c0 4.4-2.9 7.6-7 9-4.1-1.4-7-4.6-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");} .lp-tcase__ico.i-farm{--ico: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 20V9l8-5 8 5v11'/%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M9 20v-5h6v5'/%3E%3C/svg%3E");} .lp-tcase__ico.i-bolt{--ico: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='M13 2L4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E");} .lp-tcase__ico.i-users{--ico: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='9' cy='8' r='3'/%3E%3Cpath d='M4 20v-1c0-2.8 2.2-5 5-5s5 2.2 5 5v1'/%3E%3Cpath d='M16 11a3 3 0 100-6'/%3E%3Cpath d='M20 20v-1c0-2.2-1.4-4.1-3.4-4.7'/%3E%3C/svg%3E");} @media(max-width:767px){.lp-trust__stats{grid-template-columns:repeat(2,1fr);}.lp-trust__cases{grid-template-columns:1fr;}} @media(max-width:420px){.lp-trust__stats{grid-template-columns:1fr;}} /* ===== D (2026-07-23): блок сравнения — выравнивание строк в матрицу через CSS subgrid (десктоп >=1024). Мобильный стек (<=1023) не трогаем. Деградирует безопасно: без subgrid остаются 3 карточки. ===== */ @media (min-width:1024px){ .lp-cmp{grid-template-rows:repeat(7,auto);column-gap:16px;row-gap:0;} /* Волна 2 (2026-07-28): 6 строк-атрибутов + шапка (было 8+шапка = 9) */ .lp-cmp-card{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;row-gap:0;padding:24px;border-width:2px;} .lp-cmp-card.main{padding:24px;} .lp-cmp-head{margin-bottom:0;} .lp-cmp-row{padding:10px 0;} } /* ===== E (2026-07-23): проблемный блок «было/стало» — ✕ проблема / ✓ решение (тёмная полоса) ===== */ .lp-problem-item .lp-prob-bad,.lp-problem-item .lp-prob-good{display:block;position:relative;padding-left:24px;margin-top:10px;line-height:1.55em;} .lp-problem-item .lp-prob-bad:before,.lp-problem-item .lp-prob-good:before{position:absolute;left:0;top:0;font-weight:bold;} .lp-problem-item .lp-prob-bad{opacity:.82;} .lp-problem-item .lp-prob-bad:before{content:"\2715";color:#ff6b6b;} .lp-problem-item .lp-prob-good{font-weight:500;} .lp-problem-item .lp-prob-good:before{content:"\2713";color:#5bd66f;} /* ===== P0-блоки аудита 2026-07-23: разделённая ответственность, trust-бейджи, иммутабельность ===== */ .lp-resp{margin:32px 0} .lp-resp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .lp-resp-col{border:1px solid var(--lp-line,#eee);border-radius:var(--lp-r-lg,8px);padding:16px 18px} .lp-resp-col.you{border-color:var(--lp-accent,#dd130a);background:color-mix(in srgb,var(--lp-accent,#dd130a) 4%,#fff)} .lp-resp-role{font-weight:700;margin-bottom:8px} .lp-resp-col.you .lp-resp-role{color:var(--lp-accent,#dd130a)} .lp-resp-col ul{margin:0;padding-left:18px} .lp-resp-col li{margin:5px 0;color:var(--lp-ink,#555)} .lp-resp-note{margin-top:16px;background:var(--lp-soft,#fafafa);border:1px solid var(--lp-line,#eee);border-left:3px solid var(--lp-accent,#dd130a);border-radius:var(--lp-r-lg,8px);padding:12px 16px} @media(max-width:767px){.lp-resp-grid{grid-template-columns:1fr}} .lp-trustrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} .lp-tbadge{display:inline-flex;align-items:center;gap:7px;font-size:0.8667em;font-weight:600;border:1px solid var(--lp-accent,#dd130a);color:var(--lp-accent,#dd130a);background:color-mix(in srgb,var(--lp-accent,#dd130a) 6%,#fff);border-radius:var(--lp-r-pill,30px);padding:6px 14px} .lp-tbadge:before{content:"\2713";font-weight:700} .lp-tbadge-pending{border-color:#d6a94a;color:#8a5a00;background:#fbf1de} /* E-2: было #a2670a — 4,18:1 на этом фоне */ .lp-tbadge-pending:before{content:"\25CF"} .lp-imm{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 8px} .lp-imm-card{border:1px solid var(--lp-line,#eee);border-radius:var(--lp-r-lg,8px);padding:18px} .lp-imm-state{display:inline-block;font-size:0.7333em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--lp-r-pill,30px);padding:3px 10px;margin-bottom:10px} .lp-imm-now{background:#e3f5ec;color:#0f7a4f} .lp-imm-soon{background:#fbf1de;color:#8a5a00} /* E-2: контраст, см. .lp-tbadge-pending */ .lp-imm-card b{display:block;margin-bottom:6px} .lp-imm-card p{margin:0;color:var(--lp-ink,#555)} @media(max-width:767px){.lp-imm{grid-template-columns:1fr}} /* ===== P0-1 hero-клин + P0-6 дисклеймер цен (аудит 2026-07-23) ===== */ .lp-hero-wedge{display:inline-flex;align-items:center;gap:9px;margin-top:16px;background:color-mix(in srgb,var(--lp-accent,#dd130a) 10%,#fff);border:1px solid color-mix(in srgb,var(--lp-accent,#dd130a) 32%,#fff);color:var(--lp-accent,#dd130a);font-weight:600;font-size:0.9333em;border-radius:var(--lp-r-lg,8px);padding:9px 14px} .lp-hero-wedge:before{content:"\2713";font-weight:700} .lp-pricenote{display:flex;gap:12px;align-items:flex-start;background:var(--lp-soft,#fafafa);border:1px solid var(--lp-line,#eee);border-left:3px solid var(--lp-accent,#dd130a);border-radius:var(--lp-r-lg,8px);padding:14px 16px;margin:20px 0} .lp-pricenote:before{content:"\24D8";color:var(--lp-accent,#dd130a);font-size:1.2em;line-height:1.2;flex:none} /* ===== P1-13 категорийный лид (аудит 2026-07-23) ===== */ .lp-about .lp-lead{font-size:1.0667em;color:var(--lp-fg,#333);margin-bottom:14px;line-height:1.5} .lp-about .lp-lead b{color:var(--lp-accent,#dd130a)} /* ===== P1-9 липкое подменю ЛП (аудит 2026-07-23) ===== */ .lp-subnav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--lp-line,#eee);box-shadow:0 2px 10px rgba(0,0,0,.05)} .lp-subnav-inner{display:flex;align-items:center;gap:16px;padding:8px 0;overflow-x:auto} .lp-subnav-links{display:flex;gap:4px;align-items:center;flex:1;min-width:0} .lp-subnav-links a{white-space:nowrap;font-size:0.9333em;color:var(--lp-ink,#555);text-decoration:none;padding:6px 12px;border-radius:var(--lp-r-md,6px);transition:background .15s,color .15s} .lp-subnav-links a:hover{background:var(--lp-soft,#fafafa);color:var(--lp-accent,#dd130a)} .lp-subnav-links a.active{background:color-mix(in srgb,var(--lp-accent,#dd130a) 10%,#fff);color:var(--lp-accent,#dd130a);font-weight:600} .lp-subnav-cta{white-space:nowrap;flex:none;background:var(--lp-accent,#dd130a);color:#fff;font-weight:600;font-size:0.9333em;border-radius:var(--lp-r-sm,4px);padding:8px 16px;cursor:pointer;text-decoration:none} .lp-subnav-cta:hover{opacity:.92;color:#fff} @media(max-width:767px){.lp-subnav-cta{display:none}} /* ===== 2026-07-23 фиксы после правки в HTML-редакторе ===== */ /* #2: ✓/✗ в сравнении — CSS-глифы (визуальный редактор вырезает inline-SVG) */ .lp-cmp .value.yes:before{content:"\2713";color:#71ca12;font-weight:700;font-size:1.0667em} .lp-cmp .value.no:before{content:"\2715";color:#e74150;font-weight:700;font-size:1.0667em} /* ===== P1-9 fix2 (2026-07-23): fixed-оверлей вместо sticky (sticky ломался overflow/transform-предком) ===== */ .lp-subnav{position:fixed;left:0;right:0;top:0;z-index:900;transform:translateY(-110%);transition:transform .22s ease;margin:0} .lp-subnav.is-shown{transform:translateY(0)} /* --- П5 (2026-07-24): «Ранний доступ» (Поток) — бейдж + сетка условий; живёт в DETAIL_TEXT элемента ИБ 76 вместе с бренд-гало --- */ .lp-early{margin:40px 0 8px;} .lp-early-badge{display:inline-block;padding:4px 12px;border-radius:var(--lp-r-pill,30px);background:var(--lp-accent-soft,#fce7e7);color:var(--lp-accent,#dd130a);font-size:.8em;font-weight:600;letter-spacing:.4px;text-transform:uppercase;margin-bottom:12px;} .lp-early-lead{color:var(--lp-ink,#555);font-size:1.0667em;max-width:720px;margin:0 0 24px;} .lp-early-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .lp-early-card{border:1px solid var(--lp-line,#eee);border-left:3px solid var(--lp-accent,#dd130a);border-radius:0;padding:20px 24px;} .lp-early-card b{display:block;margin-bottom:8px;font-size:1.0667em;} .lp-early-card p{margin:0;color:var(--lp-ink,#555);font-size:.9333em;line-height:1.5;} @media (max-width:767px){.lp-early-grid{grid-template-columns:1fr;}} /* --- П6 (2026-07-24): Поток — лид вне .lp-about, ROI-полоса, сравнение на 4 карточки (.lp-cmp.cols4: 7 subgrid-строк = head + 6 атрибутов) --- */ .lp-lead{font-size:1.0667em;color:var(--lp-fg,#333);margin-bottom:14px;line-height:1.5} .lp-lead b{color:var(--lp-accent,#dd130a)} .lp-roi{border-left:3px solid var(--lp-accent,#dd130a);background:var(--lp-soft,#fafafa);padding:16px 20px;margin:24px 0;font-size:.9333em;line-height:1.5;color:var(--lp-ink,#555);} .lp-roi b{color:var(--lp-fg,#333);} @media (min-width:1024px){ .lp-cmp.cols4{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);} .lp-cmp.cols4 .lp-cmp-card{padding:20px;} } @media (min-width:768px) and (max-width:1023px){ .lp-cmp.cols4{grid-template-columns:1fr 1fr;} } /* --- П10 (2026-07-24): LP без правой колонки — контент col-md-12; прозу в описании ограничиваем шириной чтения. На p внутри карточек max-width не влияет (карточки уже 900px), сетки/CTA не трогаем. --- */ .lp-sections .drag_block.desc .content p, .lp-sections .drag_block.desc .content ul, .lp-sections .drag_block.desc .content ol{max-width:900px;} .lp-sections .lp-roi{max-width:900px;} .lp-sections .lp-lead{max-width:900px;} /* --- Экосистема +Альянс (Пакет 9, BR-1): h2 + тезис + 2 кросс-карточки; «вы здесь» — .is-here (пилюля через CSS content, редактор-стойко) --- */ .lp-eco-title{margin:0 0 8px;} .lp-eco-lead{color:var(--lp-ink,#555);font-size:1.0667em;line-height:1.6;max-width:900px;margin:0 0 24px;} .lp-eco-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .lp-eco-card{display:block;position:relative;border:1px solid var(--lp-line,#eee);border-radius:var(--lp-r-md,6px);padding:24px 28px;background:#fff;transition:border-color .2s,box-shadow .2s;} .lp-eco-card,.lp-eco-card:hover,.lp-eco-card:focus{text-decoration:none;} .lp-eco-card:hover{border-color:var(--lp-accent,#dd130a);box-shadow:var(--lp-shadow,0 4px 22px rgba(0,0,0,.09));} .lp-eco-kicker{font-size:.8em;text-transform:uppercase;letter-spacing:.8px;color:var(--lp-muted,#777);margin:0 0 8px;} .lp-eco-name{font-size:1.4em;font-weight:600;color:var(--lp-fg,#333);margin:0 0 8px;line-height:1.2;} .lp-eco-desc{color:var(--lp-ink,#555);line-height:1.5;margin:0 0 12px;} .lp-eco-more{color:var(--lp-accent,#dd130a);font-weight:600;margin:0;} .lp-eco-more:after{content:"\2192";margin-left:8px;} .lp-eco-card.is-here{border-style:dashed;pointer-events:none;} .lp-eco-card.is-here .lp-eco-more{display:none;} .lp-eco-card.is-here:before{content:"Вы здесь";position:absolute;top:16px;right:16px;font-size:.7333em;line-height:1.4;padding:2px 10px;border-radius:var(--lp-r-pill,30px);background:var(--lp-accent-soft,#fce7e7);color:var(--lp-accent,#dd130a);} @media(max-width:767px){ .lp-eco-cards{grid-template-columns:1fr;} } /* === P12 (2026-07-27): UX-реформат DT-блоков + акценты вместо красного темы === */ /* Карточные сетки: Восстановление / Безопасность 152-ФЗ / Что получает ИТ-администратор */ .lp-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 32px;} .lp-fcard{border:1px solid var(--lp-line,#eee);border-left:3px solid var(--lp-line,#eee);border-radius:0;background:#fff;padding:16px 20px;transition:box-shadow .3s ease,background-color .3s ease;} .lp-fcard:hover{box-shadow:var(--lp-shadow,0 4px 22px rgba(0,0,0,.09));background:color-mix(in srgb, var(--lp-accent) 5%, #fff);} .lp-fcard>b{display:block;font-size:1.0667em;line-height:1.4;margin:0 0 6px;color:var(--lp-fg,#333);} .lp-fcard p{margin:0 0 8px;color:var(--lp-ink,#555);} .lp-fcard p:last-child{margin-bottom:0;} .lp-fcard .lp-fdet{font-size:.8667em;line-height:1.5;color:var(--lp-faint,#999);} .lp-fcard--wide{grid-column:1/-1;} .lp-chips{display:flex;flex-wrap:wrap;gap:8px;} @media(max-width:767px){.lp-fgrid{grid-template-columns:1fr;}} /* Акцент вместо красного темы на LP: кнопка «Отзыв полностью», стрелки/точки owl-галереи, show_all */ /* ⚠️ СКОУП: .lp-mode (item_wrap: hero/баннер) и .lp-sections (весь контент эпилога) — СЁСТРЫ, не вложены! Всё, что рендерит эпилог (описание, галерея, тарифы, отзывы, релизы, FAQ), скоупить .lp-sections; .lp-mode — только hero/баннер. */ .lp-sections .btn.btn-transparent,.lp-sections .btn.btn-default.btn-transparent{color:var(--lp-accent,#dd130a)!important;border-color:color-mix(in srgb,var(--lp-accent,#dd130a) 35%,#fff)!important;background:0 0!important;} .lp-sections .btn.btn-transparent:hover,.lp-sections .btn.btn-default.btn-transparent:hover,.lp-sections .btn.btn-transparent:active,.lp-sections .btn.btn-default.btn-transparent:active,.lp-sections .btn.btn-transparent:focus,.lp-sections .btn.btn-default.btn-transparent:focus{color:#fff!important;background:var(--lp-accent,#dd130a)!important;border-color:var(--lp-accent,#dd130a)!important;} .lp-sections .owl-carousel.owl-theme.owl-bg-nav .owl-nav button:hover:not(.disabled){background:var(--lp-accent,#dd130a)!important;} .lp-sections .owl-theme .owl-dots .owl-dot.active span,.lp-sections .owl-theme .owl-dots .owl-dot:hover span{background:var(--lp-accent,#dd130a)!important;} .lp-sections .show_all:hover{color:var(--lp-accent,#dd130a)!important;} /* Слайды галереи «Интерфейс»: вертикальное центрирование кадров разной высоты */ .lp-sections .big-gallery-block .owl-item{display:flex;align-items:center;} /* Subnav: вторая кнопка «Нужна консультация» (ghost). Волна 1 её убрала из разметки; стили ОСТАВЛЕНЫ под откат — см. комментарий в catalog3/template.php (~стр. 401). */ .lp-subnav-cta--ghost{background:#fff;color:var(--lp-accent,#dd130a);border:1px solid var(--lp-accent,#dd130a);padding:7px 15px;} .lp-subnav-cta--ghost:hover{background:var(--lp-accent,#dd130a);color:#fff;opacity:1;} /* ============================================================ Ценовой хук + конверсионный маршрут (2026-07-27) Оба блока — статичный HTML в начале DETAIL_TEXT (сразу после лида, под тёмной полосой боли): цена/триал повторяются высоко на странице, 4 плитки ситуаций и роли дают короткий путь к нужному разделу вместо чтения всей страницы. ============================================================ */ /* === Проблемный блок из HTML-поля LP_PROBLEM_HTML (2026-07-28) === Заголовок — своя колонка, карточки — вложенная авто-сетка: раскладка не зависит от их числа (у ITEMS-варианта колонки жёстко «1.2fr 1fr 1fr 1fr», т.е. рассчитаны ровно на 3 карточки). */ .lp-problem-grid--html{grid-template-columns:minmax(200px,1.1fr) 3fr;gap:32px;align-items:start;} .lp-problem-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px 32px;align-items:start;} .lp-problem-cards .lp-problem-item{min-width:0;overflow-wrap:break-word;} .lp-problem-item p{margin:0;} .lp-problem-item p.lp-prob-bad,.lp-problem-item p.lp-prob-good{margin:8px 0 0;} @media(max-width:1023px){ .lp-problem-grid--html{grid-template-columns:1fr;gap:24px;} } @media(max-width:767px){ .lp-problem-grid--html{gap:16px;} .lp-problem-cards{grid-template-columns:1fr;gap:16px;} } /* ===== Волна 2 (2026-07-28): мостик «что это» перед ценой (.lp-bridge, живёт в DETAIL_TEXT элемента ИБ 76) и блок «экономика выбора» (.lp-econ, рендерится в ценовой зоне эпилога). Акцент на странице оставлен трём зонам: hero, цена, финальная развилка — поэтому у мостика он нейтральный, а у экономики выбора (ценовая зона) — акцентная полоса. ===== */ .lp-bridge{margin:0 0 32px;} .lp-bridge-lead{margin:0 0 20px!important;max-width:900px;font-size:1.0667em;line-height:1.5;color:var(--lp-ink,#555);} .lp-bridge-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .lp-bridge-fact{padding:16px 20px;border:1px solid var(--lp-line,#eee);border-radius:var(--lp-r-md,6px);background:var(--lp-soft,#fafafa);} .lp-bridge-fact>b{display:block;margin:0 0 8px;font-size:0.9333em;line-height:1.4;color:var(--lp-fg,#333);} .lp-bridge-fact>p{margin:0!important;font-size:0.8667em;line-height:1.5;color:var(--lp-muted,#777);} .lp-bridge-who{margin:16px 0 0!important;font-size:0.8667em;line-height:1.5;color:var(--lp-faint,#999);} .lp-econ{margin:20px 0 0;padding:20px 24px;background:var(--lp-soft,#fafafa);border:1px solid var(--lp-line,#eee);border-left:3px solid var(--lp-accent,#dd130a);} .lp-econ>b{display:block;margin:0 0 8px;font-size:1.0667em;line-height:1.4;color:var(--lp-fg,#333);} .lp-econ>p{margin:0 0 8px!important;font-size:0.9333em;line-height:1.5;color:var(--lp-ink,#555);} .lp-econ>p:last-child{margin:0!important;font-size:0.8em;line-height:1.5;color:var(--lp-faint,#999);} .lp-econ .lp-econ-num{color:var(--lp-accent,#dd130a);font-weight:bold;white-space:nowrap;} @media(max-width:1023px){ .lp-bridge-facts{grid-template-columns:1fr 1fr;} } @media(max-width:600px){ .lp-bridge-facts{grid-template-columns:1fr;} .lp-econ{padding:16px;} } /* ===== Волна 3 (2026-07-28) ===== 1) .lp-mcta — липкая нижняя CTA-панель ТОЛЬКО на мобильном (≤767): действие в зоне большого пальца (Фиттс). На мобильном кнопка липкого подменю скрывается — одно действие на экран (фон Ресторфф). ⚠️ виджет чата Битрикс24 (fixed, на мобильном — слева внизу) перекрывает панель — пока она показана, виджет приподнимается. 2) .lp-quote — цитата-отзыв в контексте главы «Восстановление» (инжектится маркером data-lp="review"). ===== */ .lp-mcta{display:none;} .lp-quote{margin:16px 0 32px;padding:16px 20px;background:var(--lp-soft,#fafafa);border:1px solid var(--lp-line,#eee);border-left:3px solid var(--lp-line,#eee);} .lp-quote-text{margin:0!important;font-size:1.0667em;line-height:1.5;color:var(--lp-fg,#333);} .lp-quote-who{margin:8px 0 0!important;font-size:0.8667em;line-height:1.4;color:var(--lp-muted,#777);} .lp-quote-who b{color:var(--lp-accent,#dd130a);font-weight:600;} @media(max-width:767px){ .lp-mcta{position:fixed;left:0;right:0;bottom:0;z-index:901;display:flex;align-items:center;gap:12px; padding:8px 16px;background:#fff;border-top:1px solid var(--lp-line,#eee); box-shadow:0 -4px 16px rgba(0,0,0,.08);transform:translateY(115%);transition:transform .25s ease;} .lp-mcta.is-shown{transform:translateY(0);} /* пока панель показана — виджет чата Битрикс24 приподнимается над ней (иначе перекрывает её край; у B24 значение bottom задано инлайном, поэтому !important) */ body.lp-mcta-on .b24-widget-button-wrapper{bottom:76px!important;} .lp-mcta-link{flex:0 0 auto;font-size:0.8667em;line-height:1.4;color:var(--lp-ink,#555)!important;border-bottom:1px dashed var(--lp-line,#eee);} .lp-mcta-link:hover{color:var(--lp-accent,#dd130a)!important;text-decoration:none;} .lp-mcta-btn{flex:1 1 auto;display:block;padding:12px 16px;border-radius:var(--lp-r-sm,4px); background:var(--lp-accent,#dd130a);color:#fff!important;font-size:0.9333em;line-height:1.2;text-align:center;cursor:pointer;} .lp-mcta-btn:hover,.lp-mcta-btn:focus,.lp-mcta-btn:active{color:#fff!important;text-decoration:none;opacity:.92;} body.lp-mcta-on{padding-bottom:64px;} .lp-subnav .lp-subnav-cta{display:none;} /* без кнопки пункты не влезают в 390px (scrollWidth 449) — даём горизонтальную прокрутку, как у таб-бара */ .lp-subnav-links{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .lp-subnav-links::-webkit-scrollbar{display:none;} .lp-quote{padding:16px;} } /* ================= Волна A (2026-07-28): конверсионная механика ================= A-3: тема глушит кнопки hero правилом `.banners-content .buttons{display:none}` в @media ≤767 — мобильный первый экран оставался вообще без конверсионной цели (первая кнопка появлялась только на 1498 px скролла). Возвращаем их в планшетно-мобильной копии ЛП-баннера (.tablet_text); десктопная копия прячется своим родителем. A-5: автораскрытый баббл чата Б24 (z-index 10150) перекрывал оферту в hero, карточки тарифов и матрицу сравнения. Гасим только баббл и только на ЛП (класс body.lp-page ставит скрипт панели); круглая кнопка чата остаётся. ============================================================================== */ body.lp-page .b24-widget-button-popup{display:none!important;} .lp-kpnote{margin:8px 0 0;font-size:0.8667em;line-height:1.5;color:var(--lp-muted,#777);} .lp-kplink{cursor:pointer;color:var(--lp-accent,#dd130a);border-bottom:1px dashed color-mix(in srgb,var(--lp-accent,#dd130a) 45%,#fff);} .lp-kplink:hover{border-bottom-color:var(--lp-accent,#dd130a);} @media(max-width:767px){ .banners-content.lp-banner .tablet_text .buttons.lp-banner-btns{display:flex!important;flex-direction:column;align-items:stretch;gap:12px;margin-top:20px;} .banners-content.lp-banner .tablet_text .buttons.lp-banner-btns .btn{width:100%;margin:0!important;text-align:center;} } /* ============================================================ Волна B (2026-07-29) — структура и позиционирование. ⚠️ Скоуп контента ЛП — .lp-sections (НЕ .lp-mode: они СЁСТРЫ, см. предупреждение выше). font-size — только литеральными em; цвет/радиус — токенами. ============================================================ */ /* B-10: служебные блоки ЛП (Документы, Интерфейс, видео, История релизов) — H3 при прежних отступах */ .lp-sections h3.lp-sect-h3,.lp-sections .lp-releases-head h3.lp-releases-h{margin:32px 0 24px} /* B-8: мостик «три разные вещи» */ .lp-bridge-three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 4px} .lp-bridge-thing{border:1px solid var(--lp-line,#eee);border-radius:var(--lp-r-md);background:var(--lp-soft,#fafafa);padding:16px 20px} .lp-bridge-thing b{display:block;color:var(--lp-fg,#333);font-size:1.0667em;margin-bottom:8px} .lp-bridge-thing p{margin:0;font-size:.9333em;line-height:1.5;color:var(--lp-ink,#555)} .lp-bridge-thing.main{background:#fff;border-color:var(--lp-accent);border-top:3px solid var(--lp-accent)} .lp-bridge-thing.main b{color:var(--lp-accent)} .lp-bridge-note{margin:12px 0 0;font-size:.9333em;line-height:1.5;color:var(--lp-ink,#555)} .lp-bridge-note b{color:var(--lp-fg,#333)} @media(max-width:767px){ .lp-bridge-three{grid-template-columns:1fr} .lp-bridge-thing.main{order:-1} } /* B-1/B-2: блок «Как это работает» — обвязка секции; сама схема с Ф5 — SVG-картинка .lp-scheme */ .lp-how-sub{margin:-12px 0 4px;font-size:1.0667em;line-height:1.5;color:var(--lp-ink,#555)} .lp-how-note{margin:8px 0 0;font-size:.8667em;line-height:1.5;color:var(--lp-faint,#999)} /* B-13: «40 из 300» — выделенное число и пропорция */ .lp-econ-vis{display:flex;align-items:center;gap:24px;margin:16px 0 12px;flex-wrap:wrap} .lp-econ-big{flex:0 0 auto;line-height:1} .lp-econ-big b{display:block;font-size:2.1333em;font-weight:bold;color:var(--lp-accent);line-height:1} .lp-econ-big i{display:block;font-style:normal;font-size:.8667em;color:var(--lp-muted,#777);margin-top:4px} .lp-econ-prop{flex:1 1 240px;min-width:200px} .lp-econ-bar{height:12px;border-radius:var(--lp-r-pill);background:var(--lp-line,#eee);overflow:hidden} .lp-econ-bar>span{display:block;height:100%;background:var(--lp-accent);border-radius:var(--lp-r-pill)} .lp-econ-legend{margin-top:8px;font-size:.8em;line-height:1.5;color:var(--lp-muted,#777)} .lp-econ-lg{display:inline-block;margin-right:16px;position:relative;padding-left:16px} .lp-econ-lg:before{content:"";position:absolute;left:0;top:4px;width:8px;height:8px;border-radius:50%} .lp-econ-lg.on:before{background:var(--lp-accent)} .lp-econ-lg.off:before{background:var(--lp-line,#eee);border:1px solid var(--lp-border,#f1f1f1)} /* ------------------------------------------------------------------ Hero ЛП: контент не должен обрезаться (2026-07-29). ⚠️ Тема задаёт `.banners-content .maxwidth-theme{height:500px;display:flex;align-items:center}` и `.banners-content{overflow:hidden}` — колонка текста ЛП (бейдж + H1 + подзаголовок + клин + кнопки + чипы) выше 500 px, центрируется и вылезает ВВЕРХ (бейдж под шапкой) и ВНИЗ (последний чип). Фикс: фиксированная высота → минимальная, фон растягиваем cover (иначе картинка 1920×500 не покроет выросший баннер), вертикальные паддинги колонки ужаты. Скоуп — только `.lp-banner` (ЛП-режим catalog3), обычные баннеры темы не затронуты. ------------------------------------------------------------------ */ /* ⚠️ min-height 530, а НЕ 500 (2026-08-06): колонка картинки hero — ФИКСИРОВАННЫЕ 500 px (`.banners-content .img{height:500px}` в бандле темы) и центрируется в этом флексе, поэтому воздух под картинкой = (высота баннера − 500)/2. У Бэкапа текст выше 500 → баннер 531 → 15 px воздуха; у Потока текст короче → баннер был ровно 500 → картинка ЛЕЖАЛА на нижней границе баннера (0 px). 530 даёт те же 15 px любой ЛП с коротким hero; Бэкап (531) не затронут. На ≤767 min-height сбрасывается в 0 ниже. */ .banners-content.lp-banner .maxwidth-theme{height:auto !important;min-height:530px} .banners-content.lp-banner .maxwidth-banner{background-size:cover !important} .banners-content.lp-banner .col-md-7.text{padding-top:28px;padding-bottom:28px} @media(max-width:767px){ .banners-content.lp-banner .maxwidth-theme{min-height:0} } /* ============================================================ E-3 (2026-07-29) — сжатие страницы ЛП. Два инструмента: (1) компактный мобильный hero, (2) прогрессивное раскрытие ВТОРИЧНОГО контента (альтернативы в матрице, калькулятор и галерея на мобильном, хвост FAQ). ⚠️ Главы контента за клик НЕ убираются — решение 2026-07-22 (табы сняты: «контент за кликом = невидимый»). Прячется только справочное и инструментальное. ⚠️ Скоуп контента — .lp-sections (не .lp-mode: они СЁСТРЫ, см. предупреждение выше). ============================================================ */ /* Кнопка раскрытия: та же логика цвета, что у «Отзыв полностью» — акцент, не красный темы */ .lp-sections .lp-more{display:block;width:100%;margin:12px 0 0;padding:8px 16px;background:0 0;border:1px solid color-mix(in srgb,var(--lp-accent,#dd130a) 35%,#fff);border-radius:var(--lp-r-pill);color:var(--lp-accent,#dd130a);font-size:.8667em;line-height:1.4;font-weight:bold;text-align:center;cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease} .lp-sections .lp-more:hover,.lp-sections .lp-more:focus{background:var(--lp-accent,#dd130a);border-color:var(--lp-accent,#dd130a);color:#fff} .lp-sections .lp-more--tablet{display:none} /* Ф8 (2026-08-04): раскрытия хвоста FAQ (.lp-faq-hidden) и галереи (.lp-gal-clip) СНЯТЫ по решению заказчика 8 — страница линейна. Модификатор --mobile остался без клиента, --tablet используется матрицей Потока. */ /* Матрица: ниже 1024 карточки уходят в стек (4 колонки = 3 648 px на 390 px) — оставляем нашу, остальные за кнопкой. На ≥1024 работает subgrid-матрица целиком: класс-клипса висит всегда, но правило её не скрывает. */ @media(max-width:1023px){ .lp-sections .lp-more--tablet{display:block} .lp-sections .lp-cmp--clip .lp-cmp-card:not(.main){display:none} } /* Ф7: раскрытие калькулятора снято; Ф8: раскрытия галереи, хвоста FAQ и дерева бакета сняты (решение заказчика 8) */ /* Цифры соцдоказательства: на 390 px были в один столбец (413 px) — держим 2×2 до 360 px */ @media(max-width:360px){.lp-trust__stats{grid-template-columns:1fr}} /* ---- Мобильный hero: 1 157 px = весь первый экран (хвост волны A) ---- Скриншот консоли на 390 px нечитаем (роадмап B-6 всё равно меняет визуал hero), чипы занимали 4 строки, межстрочный интервал темы (25px) раздувал бейдж/подзаголовок/клин. */ @media(max-width:767px){ .banners-content.lp-banner .wrap_tablet_text .tablet_img{display:none !important} .banners-content.lp-banner .tablet_text{padding-top:16px;padding-bottom:16px} .banners-content.lp-banner .tablet_text .lp-badge{line-height:1.4;margin-bottom:8px} .banners-content.lp-banner .tablet_text .intro-text,.banners-content.lp-banner .tablet_text .intro-text p{line-height:1.5} .banners-content.lp-banner .tablet_text .lp-hero-wedge{line-height:1.4} /* Чипы — одна строка с горизонтальной прокруткой (паттерн таб-бара, как у ссылок подменю) */ .banners-content.lp-banner .tablet_text .lp-chips{margin-top:20px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .banners-content.lp-banner .tablet_text .lp-chips::-webkit-scrollbar{display:none} .banners-content.lp-banner .tablet_text .lp-chip{flex:0 0 auto} } /* E-3, шаг 2 (2026-07-29): вертикальный ритм на мобильном. 18 заголовков ЛП стоили 2 116 px на 390 px (24 px + отступы 32/24, длинные — по 3 строки). Ужимаем ТОЛЬКО ≤767: кегль 24→20 px, отступы 32/24→24/16 (иерархия h1 28 > h2 20 сохраняется). ⚠️ margin у `.lp-sections h2` в теме с !important — перебиваем тем же. */ @media(max-width:767px){ .lp-sections h2{font-size:1.3333em;line-height:1.3;margin:24px 0 16px !important} .lp-sections h3.lp-sect-h3,.lp-sections .lp-releases-head h3.lp-releases-h{font-size:1.2em;line-height:1.3;margin:24px 0 16px} .lp-sections .drag_block.desc{margin-top:24px} .lp-sections .drag_block.lp-fork-block{margin-top:32px} } /* E-3, шаг 3: индикатор прокрутки чипов hero (класс is-scrollable ставит скрипт, только если чипы не влезли) */ @media(max-width:767px){ .banners-content.lp-banner .tablet_text .lp-chips.is-scrollable{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)} } /* ─── Hero-баннер и тёмная полоса ЛП — full-bleed (2026-07-30) ─── Решение заказчика: баннер и полоса — во всю ширину окна, как у баннеров темы (напр. деталка `migrator-t2t`), а контент внутри — по параметрам шаблона (`.maxwidth-theme`, 1700px при PAGE_WIDTH=1). Потолок 1920px — как у `.header_container` темы и как у `.lp-problem` (правило выше): на мониторах шире 1920 баннер и полоса остаются одной ширины и не расходятся. `overflow:hidden` нужен именно для этого случая: hero-картинка (920px) шире своей колонки и обрезается родителем — без него на окне >1920 она вылезала бы за правый край баннера на белый фон. ⚠️ Боксовый вариант (баннер по ширине контента, 1700) откатан — см. бэкап `files_20260730/staging/lp-styles.css.bak-20260730-fullbleed`. */ .banners-content.lp-banner .maxwidth-banner{max-width:1920px;margin:0 auto;overflow:hidden} /* ============================================================================ E-2 (2026-07-30) — ДОСТУПНОСТЬ: видимый фокус, skip-link, контраст ⚠️ Скоуп контента ЛП — .lp-sections (НЕ .lp-mode: они сёстры, см. предупреждение выше). Тема Аспро не стилизует фокус вообще (замер: 0 правил :focus и :focus-visible), поэтому при работе с клавиатуры не видно, где находишься. Кольцо двойное — белое вплотную плюс акцентное снаружи: так оно читается и на белом фоне, и на акцентной заливке кнопок. ============================================================================ */ .lp-sections :focus-visible:not(input):not(textarea):not(select),.lp-banner :focus-visible:not(input):not(textarea):not(select),#lp-subnav :focus-visible:not(input):not(textarea):not(select),.lp-mcta :focus-visible:not(input):not(textarea):not(select){outline:2px solid var(--lp-accent,#dd130a);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--lp-accent,#dd130a)} /* ⚠️ Поля ввода (input/textarea/select) из кольца ИСКЛЮЧЕНЫ — откат 2026-07-31 по просьбе заказчика: при фокусе они выглядят как до E-2 (тема гасит выделение). Второе такое же исключение — в css/custom.css (глобальное правило). Не возвращать без просьбы. */ /* ⚠️ Кольцо рисуется box-shadow'ом, а не только outline: тема глушит outline на кнопках (замер форсом :focus-visible показал outline-width 0 при applied box-shadow), а внутреннее белое кольцо нужно, чтобы фокус читался и на акцентной заливке. */ /* Skip-link: живёт в (его вставляет скрипт), поэтому акцент ему копируется инлайном */ .lp-skip{position:fixed;top:-100px;left:8px;z-index:10200;padding:8px 16px;background:#fff;color:var(--lp-accent,#dd130a);border:1px solid var(--lp-accent,#dd130a);border-radius:var(--lp-r-sm,4px);font-size:.8667em;line-height:1.4;text-decoration:none;transition:top .2s ease} .lp-skip:focus{top:8px} .lp-sections:focus{outline:none} /* контейнер получает tabindex=-1 только как цель skip-link */ /* Контраст: классы ТЕМЫ, которые красят мелкий текст в #999 (2,85:1) — подписи документов, размер файла, надзаголовок карточки тарифа. Поднимаем до токена (5,0:1). */ .lp-sections .font_xs,.lp-sections .filesize,.lp-sections .section_name{color:var(--lp-faint,#707070)} /* «Репликация — не резервная копия»: bootstrap .alert-warning темы перебивал наш фон и давал текст #c09853 на #fcf8e3 (2,5:1). Возвращаем нейтральную подложку блока и читаемый текст. */ .lp-sections .lp-resp-note{background:var(--lp-soft,#fafafa);border-color:var(--lp-line,#eee);border-left-color:var(--lp-accent,#dd130a);color:var(--lp-ink,#555)} /* Бедж экономии в калькуляторе: белый на #10b981 давал 2,54:1 */ .lp-sections .by360-calc__badge{background:#0f7a52} /* ============================================================================ E-4 (2026-07-30) — ТАРИФЫ БЕЗ СВАЙПА на планшете и мобильном Тарифы рендерит flexslider с counts [3,3,2,1]: на 390px была видна одна карточка из трёх, «Корпоративный» — полностью за кадром, сравнить цены без свайпа невозможно. Слайдер оставляем инициализированным (ломать плагин темы рискованнее), но раскладку переводим в стек: flexslider держит ширины инлайном (ul 600%, li width/float), поэтому без !important не обойтись; marginLeft тоже перебит, так что свайпу нечего сдвигать. ============================================================================ */ @media (max-width:991px){ .lp-sections .item-views.tarifs .flexslider .slides{width:auto!important;margin-left:0!important;transform:none!important} .lp-sections .item-views.tarifs .flexslider .slides>li{width:auto!important;float:none!important;display:block!important;margin:0 0 16px!important} .lp-sections .item-views.tarifs .flex-direction-nav{display:none!important} } /* Ф7 (2026-08-04): клипса «Что входит (N)» снята — её заменил штатный .rolldown шаблона тарифов (кап COUNT_SHOW_PROPRERTIES=4), а цена в карточке выведена ВЫШЕ списка характеристик. */ /* E-2, добивка контраста (замер браузером после первой волны правок). Корневая причина большинства остатков — тема задаёт body{color:#777} (4,48:1 на белом, 4,29:1 на подложке #fafafa), и его наследует весь текст ЛП без собственного цвета: строки матрицы сравнения, шаги запуска, дисклеймер цен, роли, отзывы, номера версий. Задаём контенту ЛП вторичный тёмный — блоки со своими цветами не затрагиваются. */ .lp-sections{color:var(--lp-ink,#555)} /* Тема красит эти два в #999 (2,85:1) селекторами выше нашей специфичности */ .lp-sections .item-views.tarifs .item .top_block .section_name, .lp-sections .docs-block .blocks .inner-wrapper .filesize{color:var(--lp-faint,#707070)} /* Сноска под матрицей сравнения несёт инлайновый color:#999 прямо в DETAIL_TEXT — перебиваем стилем, чтобы правка пережила открытие элемента в визуальном редакторе Битрикса */ .lp-sections .lp-about p.font_xs[style]{color:var(--lp-faint,#707070)!important} /* === Крошки в hero ЛП (2026-07-30) ========================================================= Зачем: штатный блок «крошки + H1» вырезает МОДУЛЬ Аспро на любой странице с верхним баннером (CPriorityEvents::OnEndBufferContentHandler по $SECTION_BNR_CONTENT), а «Назад к списку» на ЛП снята правкой A-9 → пути в раздел не оставалось совсем. Разметку рисует catalog3/template.php. Вид повторяет крошки темы (13px, разделитель «—»), НО цвет читаемый: тема даёт #bbb (1,9:1 на белом), что вернуло бы на страницу нарушение контраста, снятое волной E-2. Одна строка — длинные имена разделов режутся ellipsis (полное имя в title). Переменные берутся с .lp-banner (он их несёт). */ .lp-crumbs{margin:0 0 16px;padding:0;list-style:none;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;font-size:.8667em;line-height:1.4} .lp-crumbs>li{display:flex;align-items:center;min-width:0;color:var(--lp-muted,#646464);flex:0 0 auto} /* ⚠️ Колонка баннера узкая (col-md-7): при «честном» flex-сжатии на 768–1023 в ellipsis уходили ВСЕ пункты сразу («Прод…», «Резервное копир…») — бесполезно. Сжимается только имя раздела: это всегда предпоследний пункт (текущая страница остаётся в DOM, даже когда скрыта). */ .lp-crumbs>li:nth-last-child(2){flex:0 1 auto} .lp-crumbs>li:before{content:"—";color:var(--lp-line,#eee);padding:0 8px;flex:0 0 auto} .lp-crumbs>li:first-child:before{content:none;padding:0} .lp-crumbs>li>a,.lp-crumbs>li>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:26ch} .lp-crumbs>li.is-current>span{max-width:34ch} /* Текущую страницу прячем уже с планшета — её дублирует H1 прямо под крошками, а место в строке нужно пути наверх */ @media(max-width:1023px){.lp-crumbs>li.is-current{display:none}} .lp-crumbs>li>a:not(.btn):not(.dark-color):not(.dark_link){color:var(--lp-ink,#555);border-bottom:1px solid transparent} .lp-crumbs>li>a:hover,.lp-crumbs>li>a:focus{color:var(--lp-accent,#dd130a);border-bottom-color:currentColor} /* Мобильный: текущая страница дублирует H1 прямо под крошками — убираем, остаётся путь наверх */ @media(max-width:767px){ .lp-crumbs{margin-bottom:12px;font-size:.8em} .lp-crumbs>li>a{max-width:20ch} .lp-crumbs>li:before{padding:0 6px} } /* ============================================================================ P0 аудита восприятия ЛП (2026-07-31), audits/2026-07-30-lp-backup-perception-audit.md. Пять правок из семи — чистый CSS: слои (P0-1), иерархия заголовков (P0-2), акцент на главу (P0-3), ширина прозы (P0-4), кикер рекомендуемого тарифа (P0-6), полоса CTA в середине (P0-7). Контент-часть — классы в DETAIL_TEXT и эпилоге. ========================================================================== */ /* --- P0-1. Плавающая «мебель» темы больше не лежит на контенте ЛП. ⚠️ Дефект живёт ТОЛЬКО при окне < ~1790 px: при 1920 контент 103–1803, слои снаружи (замерено). При 1440 контент идёт край-в-край (16…1409), и тогда: рейл форм .fly_forms (68×272, z=121, справа) накрывал 4-ю колонку матрицы (её правый край 1393), кнопка «вверх» (44×44, красная #dd130a темы) ложилась на текст матрицы, баббл Б24 (66×66, слева внизу) — на 1-ю колонку. Рейл на ЛП убираем: то же решение, что и с правой колонкой «Нужна консультация?» (решение заказчика №6), формы рейла дублируются CTA страницы. «Вверх» — в акцент страницы (снимает спор красного с петролем). Баббл Б24 приподнимаем над нижней строкой текста; его положение слева и красный цвет — настройка самого виджета Б24, менять её CSS-оверрайдом на одной странице не стали. Класс body.lp-page и переменную --lp-accent на ставит скрипт мобильной панели (catalog3/template.php). --- */ body.lp-page .fly_forms{display:none!important;} body.lp-page a.scroll-to-top{background-color:var(--lp-accent,#dd130a)!important;} body.lp-page a.scroll-to-top:hover,body.lp-page a.scroll-to-top:focus{background-color:color-mix(in srgb,var(--lp-accent,#dd130a) 85%,#fff)!important;} /* ⚠️ Баббл Б24 на десктопе осознанно НЕ трогаем. Подъём (пробовали bottom:96px) перекрытие не убирает, а лишь переносит его на строку выше — проверено рендером: метка «Шифрование ключом клиента» в 1-й колонке матрицы уходила под кружок. Перекрытие фиксированного баббла с текстом на полную ширину вёрсткой неустранимо и одинаково на всех страницах сайта при окне < ~1790 px; положение (слева внизу) и красный цвет — настройки самого виджета Б24, менять их нужно там, а не CSS-оверрайдом одной страницы. Мобильный подъём (bottom:76px, стр. ~681) остаётся: он нужен из-за липкой CTA-панели .lp-mcta (волна A). */ /* --- P0-2. Три уровня заголовков вместо 16 равных. Было: все h2 контента ЛП — 30 px/400 (стиль темы), различия «глава ↔ подблок» не читалось. Стало: базовый h2 = служебный уровень (24 px/400), главы — класс .lp-h2-chapter (32 px/600). ⚠️ Базовое правило объявлено ПОСЛЕ мобильного @media E-3 (стр. ~842), поэтому мобильные кегли переобъявлены ниже в этом же блоке — иначе безусловное правило перебьёт медиазапрос. Глав шесть: «Как это работает» (.lp-how-h, элемент ИБ 76), «Тарифы» и «Копируем всё» (эпилог), «Как восстанавливаем», «Где хранятся копии», «Штатная корзина… что выбрать» (DETAIL_TEXT). На Потоке класс главы получает только «Копируем всё» — остальные его заголовки уходят на служебный уровень, иерархия «глава → блок» сохраняется. --- */ .lp-sections h2{font-size:1.6em;line-height:1.3;font-weight:400;margin:32px 0 16px !important;} .lp-sections h2.lp-h2-chapter,.lp-sections .lp-how-h{font-size:2.1333em;line-height:1.25;font-weight:600;margin:48px 0 24px !important;} /* --- P0-3. Один акцент на главу (фон Ресторфф). Волна 1 сняла акцентные полосы у 40+ карточек, чтобы «выделено всё» не читалось как «не выделено ничто», но маятник прошёл мимо середины. Теперь ровно одна карточка в каждой из трёх сеток-глав несёт акцентную полосу и лёгкий тинт — ключевой аргумент главы. Класс ставится в DETAIL_TEXT. --- */ .lp-fcard--key{border-left-color:var(--lp-accent,#dd130a);background:color-mix(in srgb,var(--lp-accent,#dd130a) 4%,#fff);} .lp-fcard--key:hover{background:color-mix(in srgb,var(--lp-accent,#dd130a) 8%,#fff);} /* --- P0-4. Ширина прозы: 149 → ~75 символов в строке. Ограничение 900 px из П10 висело на p/ul/ol внутри .drag_block.desc, .lp-roi и .lp-lead — до блоков, которые рендерит эпилог (.lp-econ) и DETAIL_TEXT элемента ИБ 76 (.lp-trust, .lp-bridge), оно не достаёт: там строки выходили 119–163 символа при ширине 1295–1361 px. --- */ .lp-sections .lp-econ>b,.lp-sections .lp-econ>p,.lp-sections .lp-trust>p,.lp-sections .lp-bridge>p{max-width:900px;} /* --- P0-6. Рекомендуемый тариф назван словом. Кикер карточки берётся из имени раздела ИБ 27, и у «Бизнес» это техническая таксономия («+Альянс Бэкап по тарифу»), тогда как у соседей — осмысленные «Специальное предложение для…». Шаблон tarif_linked_custom2 для карточки с беджем HIT печатает «Рекомендуем» + класс ниже. --- */ .lp-sections .item-views.tarifs .item .section_name.lp-tarif-reco{color:var(--lp-accent,#dd130a);font-weight:700;} /* ⚠️ Уточнение по факту рендера: бедж «ОСНОВНОЙ» (стикер свойства HIT) на карточке ВСЁ-ТАКИ выводится — в аудите он отмечен как отсутствующий. Оставлять оба ярлыка («ОСНОВНОЙ» на рамке + «Рекомендуем» в кикере) значит дважды говорить одно и то же, поэтому на ЛП стикер прячем: слово в кикере стоит в одной строке с кикерами соседей (ряд остаётся выровненным) и говорит понятнее. :has() — Edge/Chrome 105+, Safari 15.4+, Firefox 121+; в старых браузерах останутся оба ярлыка. */ /* Ф7 (2026-08-04): скрытие стикера ОТМЕНЕНО — по просьбе заказчика значение свойства HIT выводится беджем на карточке (см. блок Ф7 ниже). Прежнее правило P0-6 для истории: .lp-sections .item-views.tarifs .item:has(.lp-tarif-reco) .stickers{display:none;} */ /* --- P0-7. Один CTA в смысловой середине. От кнопки калькулятора (4 858 px) до mid-CTA (9 714 px) шло 4 856 px = 5,4 экрана без единого действия. Компактная полоса (текст + одна кнопка) ставится перед главой «Где хранятся копии» — это середина разрыва. Вторые/третьи пути (демо, КП) не дублируем: они есть в hero, mid-CTA и финальной развилке. --- */ .lp-midcta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 24px; margin:32px 0;padding:20px 24px;background:var(--lp-accent-soft);border-left:3px solid var(--lp-accent,#dd130a);} .lp-midcta>p{margin:0 !important;max-width:700px;font-size:1.0667em;line-height:1.5;color:var(--lp-fg,#333);} .lp-midcta>p.lp-midcta-btn{flex:0 0 auto;max-width:none;} /* --- P0-2/P0-7: мобильные кегли и отступы (переобъявление после безусловных правил выше) --- */ @media(max-width:767px){ .lp-sections h2{font-size:1.2em;line-height:1.3;margin:24px 0 12px !important;} /* ⚠️ «Голые» h3 (в DETAIL_TEXT Потока — «Типовые сценарии», «Как ещё автоматизируют…») мобильное правило E-3 не покрывало: оно адресовало только .lp-sect-h3 и .lp-releases-h. После P0-2 они оказались бы КРУПНЕЕ заголовка главы (24 против 22) — инверсия иерархии. */ .lp-sections h3{font-size:1.2em;line-height:1.3;} .lp-sections h2.lp-h2-chapter,.lp-sections .lp-how-h{font-size:1.4667em;line-height:1.25;margin:32px 0 16px !important;} .lp-midcta{padding:16px;margin:24px 0;} .lp-midcta>p.lp-midcta-btn{width:100%;} .lp-midcta .btn{display:block;width:100%;} } /* ========================================================================== ЗОНИРОВАНИЕ ФОНОМ (2026-07-31) — смена регистра между смысловыми слоями ЛП. Основание: аудит восприятия 2026-07-30, § 2.1 — слот desc шёл монолитом 5 254 px, слот tarifs 4 048 px, без единой смены фона на всю страницу. Зона = full-bleed светлая полоса. Реализация — НЕ ::before с width:100vw: 100vw включает ширину скроллбара, подложка выпирала за клиентскую область и давала document.scrollWidth > clientWidth (8 px «ложного» переполнения). Вместо этого фон растягивает ОГРОМНАЯ ОДНОТОННАЯ ТЕНЬ (тени не участвуют в прокрутке вообще), а clip-path режет её по нужной ширине: min(50vw - 50%, (1920px - 100%)/2) первый аргумент = до края окна, второй = потолок 1920px, согласованный с hero-баннером и тёмной полосой боли (иначе на мониторах >1920 края зон расходятся с ними). ⚠️ clip-path обрезает содержимое по ВЕРТИКАЛЬНЫМ границам зоны (inset 0): всё, что выступает вверх/вниз (стикер матрицы, ховер-тени карточек), должно лежать внутри вертикальных паддингов зоны. ⚠️ position:relative зонам НЕ даём — иначе absolute-потомки темы сменили бы систему координат. ⚠️ Скоуп — .lp-sections (НЕ .lp-mode: они СЁСТРЫ, см. предупреждение выше). ========================================================================== */ .lp-banner, .lp-sections{--lp-zone:#F6F6F4;} .lp-sections .lp-zone, .lp-sections .lp-trust-sect{background:var(--lp-zone,#f6f7f9);box-shadow:0 0 0 100vmax var(--lp-zone,#f6f7f9);clip-path:inset(0 calc(-1 * min(50vw - 50%, (1920px - 100%) / 2)));} /* Зона 1 — «что это / как работает / кому доверяют» (элемент ИБ 76 = .lp-trust-sect). Стыкуется с тёмной полосой боли сверху; ценовая зона ниже остаётся белой. */ .lp-sections .lp-trust-sect{margin-top:0;padding-top:48px;padding-bottom:48px;} /* Светлые плашки внутри светлой зоны инвертируются в белые, иначе сливаются с фоном. .lp-trust — уже белая карточка с рамкой, её .lp-tstat не трогаем. */ .lp-sections .lp-trust-sect .lp-bridge-thing,.lp-sections .lp-trust-sect .lp-bridge-fact,.lp-sections .lp-trust-sect .lp-early-card{background:#fff;} /* Зона 2 — матрица сравнения (обёртка .lp-zone--matrix в DETAIL_TEXT): разрубает монолит desc пополам и подаёт справочную таблицу отдельным слоем. Карточки матрицы уже белые — на светлой зоне читаются как таблица. */ .lp-sections .lp-zone--matrix{margin:32px 0;padding:16px 0 32px;} .lp-sections .lp-zone--matrix .lp-h2-chapter{margin-top:32px;} /* Зоны 3–5 (Ф3, 2026-08-03) — ритм полос макета В1 вместо одной зоны хвоста: paper получают справочные/иллюстративные блоки, белыми остаются отзывы, тарифы, релизы и экосистема — так светлое и белое чередуются, а не идут одной плитой. */ .lp-sections .galerys-block, .lp-sections .lp-docs-sect, .lp-sections .lp-sect.lp-faq{background:var(--lp-zone,#f6f7f9);box-shadow:0 0 0 100vmax var(--lp-zone,#f6f7f9);clip-path:inset(0 calc(-1 * min(50vw - 50%, (1920px - 100%) / 2)));margin:24px 0;padding:32px 0 40px;} /* первый заголовок внутри зоны не должен складывать свой margin с padding зоны */ .lp-sections .galerys-block > h3:first-child, .lp-sections .lp-docs-sect > h3:first-child, .lp-sections .lp-sect.lp-faq > h2:first-child{margin-top:0 !important;} /* белые плашки внутри светлой зоны (аккордеон FAQ), иначе сливаются с фоном */ .lp-sections .lp-sect.lp-faq .item.border{background:#fff;} /* ===== Тёмные зоны (Ф3, 2026-08-03) ===== Макет В1 держит ритм тремя тёмными секциями: hero (Ф2), «Как это работает» и финал. Приём тот же, что у светлых зон (тень + clip-path), цвет — --lp-zone-dark: он приезжает из LP_HERO_OVERLAY на .lp-sections, фолбэк = индиго затемнения hero. ⚠️ Вложенность безопасна: своя clip-path каждой зоны обрезает вертикальные «хвосты» её тени по собственным границам, поэтому тёмная .lp-how внутри светлой .lp-trust-sect не закрашивает соседей. ⚠️ Плашки схемы (.lp-arch-*) имеют собственный светлый фон и свой color — их не трогаем; инвертируется только текст самой секции. */ .lp-banner, .lp-sections{--lp-zone-dark:#16181D;} .lp-sections .lp-zone--dark{background:var(--lp-zone-dark,#16181D);box-shadow:0 0 0 100vmax var(--lp-zone-dark,#16181D);clip-path:inset(0 calc(-1 * min(50vw - 50%, (1920px - 100%) / 2)));} /* «Как это работает» — тёмная секция внутри элемента ИБ 76 */ .lp-sections .lp-how{background:var(--lp-zone-dark,#16181D);box-shadow:0 0 0 100vmax var(--lp-zone-dark,#16181D);clip-path:inset(0 calc(-1 * min(50vw - 50%, (1920px - 100%) / 2)));margin:40px 0;padding:8px 0 40px;} .lp-sections .lp-how .lp-how-h{color:#fff !important;} .lp-sections .lp-how .lp-how-sub, .lp-sections .lp-how .lp-how-note, .lp-sections .lp-how > p{color:rgba(255,255,255,.86);} /* Внутри тёмной секции акцент и приглушённый серый не проходят AA (3.84:1 и 3.9:1), поэтому стрелки связей и их подписи здесь светлые. Плашки схемы со своим светлым фоном (.lp-arch-col / -item / -tree / -flow) сохраняют штатные цвета текста. */ /* Финальная развилка — тёмная секция; карточки внутри остаются светлыми, */ /* поэтому инвертируем только шапку блока (заголовок + лид). */ .lp-sections .styled-block.lp-cta.lp-zone--dark{border-left:0;padding:40px 32px;} .lp-sections .lp-zone--dark .lp-fork-title{color:#fff;} .lp-sections .lp-zone--dark .lp-fork-sub, .lp-sections .lp-zone--dark .lp-fork-contact{color:rgba(255,255,255,.86);} .lp-sections .lp-zone--dark .lp-fork-card--demo{background:#fff;} @media (max-width:767px){ .lp-sections .lp-trust-sect{padding-top:24px;padding-bottom:24px;} .lp-sections .lp-zone--matrix{margin:24px 0;padding:8px 0 24px;} .lp-sections .galerys-block, .lp-sections .lp-docs-sect, .lp-sections .lp-sect.lp-faq{margin:16px 0;padding:24px 0 24px;} .lp-sections .lp-how{margin:24px 0;padding:8px 0 24px;} .lp-sections .styled-block.lp-cta.lp-zone--dark{padding:24px 20px;} } /* ===== Ф1 переделки под макет В1 (2026-08-03): радиус НАШИХ кнопок = настройка темы ===== § 1.3 инструкции: скругление кнопок задаёт параметр шаблона ROUND_BUTTON (s1=Y) через класс body.round_button; тема даёт .btn 20px, .btn-sm 18px, .btn-lg 25px. Кнопки ЛП без класса .btn (CTA подменю и мобильной панели) своих чисел не задают: базово домашний радиус темы (--lp-r-sm 4px), при включённых круглых кнопках — как у .btn / .btn-lg. Единственное исключение остаётся прежним: кнопка «Заказать» в карточке тарифа (~стр.327), где тема принудительно делает планку border-radius:0 и нужен !important. */ body.round_button .lp-subnav-cta{border-radius:20px} body.round_button .lp-mcta-btn{border-radius:25px} /* ===== Ф2 переделки под макет В1 (2026-08-03): тёмный hero ===== Включается свойством LP_HERO_OVERLAY (палитра, тёмный hex): template.php кладёт затемнение слоем linear-gradient поверх фона в head-правиле и вешает класс .lp-banner--dark. ⚠️ Белую типографику заголовка и лида даёт ШТАТНЫЙ механизм темы — свойство CODE_TEXT=«Светлый» (класс .text.light, template_styles.css:3594-3595). Ниже — только то, чего в теме нет: наши крошки/чипы/клин и планшетная копия текста (класс .light тема вешает лишь на десктопную). */ .lp-banner--dark .lp-crumbs>li{color:rgba(255,255,255,.7)} .lp-banner--dark .lp-crumbs>li:before{color:rgba(255,255,255,.32)} .lp-banner--dark .lp-crumbs>li>a:not(.btn):not(.dark-color):not(.dark_link){color:rgba(255,255,255,.88)} .lp-banner--dark .lp-crumbs>li>a:hover,.lp-banner--dark .lp-crumbs>li>a:focus{color:#fff} .lp-banner--dark .lp-chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff} .lp-banner--dark .lp-chip i{background:#fff} .lp-banner--dark .lp-hero-wedge{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff} .banners-content.lp-banner--dark .wrap_tablet_text .tablet_text{background:transparent} .lp-banner--dark .tablet_text .h1{color:#fff} .lp-banner--dark .tablet_text .intro-text,.lp-banner--dark .tablet_text .intro-text p{color:rgba(255,255,255,.87)} /* кнопки не переопределяем: кн1 — акцентная заливка темы (.btn-default под .lp-accent), кн2 — белая контурная (.white); обе читаются на тёмном, радиус берётся из настройки темы (Ф1). */ /* Полоса боли в СВЕТЛОМ режиме: класс .lp-problem--light ставит template.php по яркости LP_PROBLEM_BG (у Потока полоса тёмная — там класса нет и цвета остаются прежними). */ .lp-problem--light .lp-problem-item .lp-prob-bad{opacity:1} .lp-problem--light .lp-problem-item .lp-prob-bad:before{color:#c5221f} .lp-problem--light .lp-problem-item .lp-prob-good:before{color:#1e7f37} /* ===== Ф3-Д (2026-08-03): контраст надзаголовков на акцентном тинте ===== Замер после смены акцента на фирменный красный: акцент на своём 10%-тинте = 4,25:1 (нужно 4,5). Правим только два места, где акцентный текст лежит на тинте; иконки и рамки не трогаем (к нетекстовым элементам требование 4,5:1 не применяется). */ .lp-sections .lp-trust__eyebrow, .lp-sections .lp-fork-card--trial .lp-fork-eyebrow{color:var(--lp-accent-ink,#a60e08);} /* ⚠️ Порядок важен: правило светлого акцента для .lp-zone--dark .lp-fork-eyebrow идёт ниже, поэтому trial-карточку (её eyebrow на СВЕТЛОМ тинте) возвращаем к «чернильному» акценту более специфичным селектором. */ .lp-sections .lp-zone--dark .lp-fork-card--trial .lp-fork-eyebrow{color:var(--lp-accent-ink,#a60e08);} /* ===== Ф3.5 (2026-08-03): визуальный слой макета В1 ===== Переносим ПЛОТНОСТЬ и ритм макета, оставляя гарнитуру и кегли темы: у макета h2 38px/800/lh 1.15/трекинг −0.02em — берём трекинг и интерлиньяж, кегль остаётся штатным (2.1333em = 32px, как h3.title Аспро). Надзаголовки (eyebrow) — 13px/700/трекинг .1em uppercase, как в макете. Воздух: у макета секция дышит 88px по вертикали; берём 48–56px, чтобы страница не выросла обратно (после волн 1–3 её сокращали). */ .lp-sections h2.lp-h2-chapter, .lp-sections .lp-how-h{line-height:1.15;letter-spacing:-0.02em;} .lp-sections .lp-trust__eyebrow, .lp-sections .lp-fork-eyebrow{font-size:.8667em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;} /* Светлый акцент на тёмных секциях — вместо белого: так делает макет (--acc-light). */ /* (снято Ф3.5: eyebrow развилки лежат на светлых карточках, светлый акцент давал 2,69:1) */ /* Воздух зон: paper 48/56, тёмные 56 (было 32–40). */ .lp-sections .galerys-block, .lp-sections .lp-docs-sect, .lp-sections .lp-sect.lp-faq{padding:48px 0 56px;} .lp-sections .lp-zone--matrix{padding:40px 0 48px;} .lp-sections .lp-how{padding:16px 0 56px;} .lp-sections .lp-trust-sect{padding-top:56px;padding-bottom:56px;} @media (max-width:767px){ .lp-sections .galerys-block, .lp-sections .lp-docs-sect, .lp-sections .lp-sect.lp-faq{padding:32px 0 32px;} .lp-sections .lp-zone--matrix{padding:24px 0 32px;} .lp-sections .lp-how{padding:8px 0 32px;} .lp-sections .lp-trust-sect{padding-top:32px;padding-bottom:32px;} } /* ===== Ф4 (2026-08-03): промо-полоса, цифры под hero, карточки рисков (макет В1) ===== */ /* Промо-полоса. JS переносит её первым узлом (в потоке до шапки, как в макете), поэтому скоуп .lp-sections тут не годится — переменные приходят инлайном на сам блок. */ .lp-promo{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px; padding:10px 24px;background:var(--lp-zone-dark,#16181D);color:#fff; font-size:.9333em;line-height:1.4;text-align:center;} .lp-promo-tag{background:var(--lp-accent,#dd130a);color:#fff;font-size:.7333em;font-weight:700; letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:var(--lp-r-sm,6px);} .lp-promo-text{color:rgba(255,255,255,.9);} .lp-promo-link{color:#fff;font-weight:700;text-decoration:underline;cursor:pointer;} .lp-promo-link:after{content:"\2192";margin-left:6px;text-decoration:none;display:inline-block;} .lp-promo-link:hover{color:#fff;text-decoration:none;} @media (max-width:767px){ .lp-promo{padding:8px 16px;font-size:.8667em;gap:6px;} } /* Строка цифр под hero: белая полоса с нижней линией, значения акцентом (как .stats макета). */ .lp-stats{background:#fff;border-bottom:1px solid var(--lp-line,#E8E8E4);} .lp-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:36px 0;} .lp-stat-v{font-size:2.1333em;font-weight:700;line-height:1.2;letter-spacing:-0.02em;color:var(--lp-accent,#dd130a);} .lp-stat-l{margin-top:4px;font-size:.9333em;line-height:1.4;color:var(--lp-muted,#646464);} @media (max-width:991px){ .lp-stats-row{grid-template-columns:repeat(2,1fr);gap:20px;padding:28px 0;} } @media (max-width:480px){ .lp-stat-v{font-size:1.8667em;} .lp-stats-row{gap:16px;padding:24px 0;} } /* Карточки рисков в СВЕТЛОМ режиме полосы — вид карточки макета: белый фон, рамка, радиус 14, без тени. ⚠️ Только .lp-problem--light: у Потока полоса тёмная, там карточки остаются текстовыми (белые плашки на тёмном изменили бы его вид без запроса). */ .lp-problem--light .lp-problem-item{background:#fff;border:1px solid var(--lp-line,#E8E8E4); border-radius:var(--lp-r-xl,14px);padding:24px;} .lp-problem--light .lp-problem-title{font-size:1.8667em;font-weight:600;line-height:1.2;letter-spacing:-0.02em;} @media (max-width:767px){ .lp-problem--light .lp-problem-item{padding:20px;} .lp-problem--light .lp-problem-title{font-size:1.4em;} } /* Ф4, доводка после рендера: карточки рисков одной высоты (в макете колонки выровнены), и промо-полоса на мобильном компактнее — на 390 она занимала 102 px первого экрана: тег-пилюлю скрываем (декор), кегль и паддинги ужимаем. */ .lp-problem--light .lp-problem-cards{align-items:stretch;} @media (max-width:767px){ .lp-promo{padding:6px 12px;font-size:.8em;gap:6px;} .lp-promo-tag{display:none;} } /* ============================================================================ Ф5 (2026-08-04): Возможности (9 плиток вида макета В1), пять шагов запуска в тёмной секции «Как это работает», схема-картинка. Кегли — литеральными em (px ÷ 15), цвет/радиус — токенами. ⚠️ Скоуп контента ЛП — .lp-sections (с .lp-mode они СЁСТРЫ, см. предупреждение выше). ========================================================================= */ /* Надзаголовок секции (eyebrow макета: 13px/700, трекинг .1em, uppercase). Источник текста — составной заголовок «Надзаголовок||Заголовок». */ .lp-eyebrow{margin:0 0 12px;font-size:.8667em;font-weight:700;line-height:1.4; letter-spacing:.1em;text-transform:uppercase;color:var(--lp-accent,#dd130a);} /* ⚠️ селектор с типом p: в тёмной секции правило `.lp-sections .lp-how > p` (0,2,1) иначе перебивает надзаголовок белым (замерено rgba(255,255,255,.86)). */ .lp-sections .lp-zone--dark p.lp-eyebrow, .lp-sections .lp-how p.lp-eyebrow{color:var(--lp-accent-light,#ec7d78);} /* Композиция head-split: заголовок слева, нота справа по нижней границе */ .lp-copied-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;} .lp-copied-head__main{max-width:620px;} .lp-copied-head .lp-note{margin:0 0 8px;max-width:420px;font-size:1.0667em;line-height:1.5;} .lp-sections .lp-copied-head h2.lp-h2-chapter{margin-bottom:0 !important;} /* Карточка возможности (.feat макета): рамка, радиус 14, иконка слева 44×44 на акцентном тинте */ .lp-sections .lp-card.lp-feat{display:flex;align-items:flex-start;gap:16px;padding:24px; border-color:var(--lp-line,#E8E8E4);border-radius:var(--lp-r-xl,14px); transition:box-shadow .3s ease,border-color .2s ease;} .lp-sections .lp-card.lp-feat:hover{border-color:var(--lp-accent,#dd130a);} .lp-sections .lp-card.lp-feat .lp-copied-ico{width:44px;height:44px;margin:0;flex-shrink:0; border-radius:var(--lp-r-md,8px);} .lp-sections .lp-card.lp-feat .lp-copied-ico svg{width:22px;height:22px;} .lp-feat-body b{display:block;margin-bottom:6px;font-size:1.1333em;font-weight:700;line-height:1.3; color:var(--lp-fg,#333);} .lp-feat-body span{display:block;font-size:.9333em;line-height:1.5;color:var(--lp-muted,#646464);} @media (max-width:767px){ .lp-copied-head{gap:8px;} .lp-copied-head .lp-note{max-width:none;font-size:1em;} .lp-sections .lp-card.lp-feat{padding:20px;} .lp-feat-body b{font-size:1.0667em;} } /* Пять шагов: сетка 5 колонок (2 на планшете, 1 на мобильном) */ .lp-cols-5{grid-template-columns:repeat(5,1fr);} @media (max-width:1023px){ .lp-cols-5{grid-template-columns:repeat(2,1fr);} } @media (max-width:600px){ .lp-cols-5{grid-template-columns:1fr;} } /* Вид шагов в ТЁМНОЙ секции: без плашки, линия сверху, номер светлым акцентом (макет .step) */ .lp-sections .lp-how .lp-steps{margin-top:24px;gap:20px;} .lp-sections .lp-how .lp-steps .lp-card.lp-step{background:0 0;border:0;border-radius:0; border-top:2px solid rgba(255,255,255,.15);padding:20px 0 0;box-shadow:none;} .lp-sections .lp-how .lp-steps .lp-step-num{margin-bottom:10px;font-size:1em;font-weight:700; line-height:1.2;color:var(--lp-accent-light,#ec7d78);} .lp-sections .lp-how .lp-steps .lp-card.lp-step > b{color:#fff;font-size:1.0667em;line-height:1.3; margin-bottom:8px;} .lp-sections .lp-how .lp-steps .lp-card.lp-step > span{color:rgba(255,255,255,.74);font-size:.8667em; line-height:1.5;} /* Схема — светлая плашка с картинкой внутри тёмной секции (макет .scheme). Два ассета: широкий для десктопа, вертикальный для ≤767 (широкий там нечитаем). */ .lp-scheme{margin:56px 0 0;padding:20px;background:#fff;border-radius:var(--lp-r-xl,14px);} .lp-scheme img{display:block;width:100%;height:auto;border-radius:var(--lp-r-md,8px);} /* ⚠️ aspect-ratio ЯВНО: до ленивой загрузки атрибутов width/height не хватило — плашка схемы сжималась до 74 px и при загрузке давала сдвиг ~680 px (CLS). */ .lp-scheme .lp-scheme-wide{aspect-ratio:1560 / 579;} .lp-scheme .lp-scheme-narrow{aspect-ratio:620 / 1400;} .lp-scheme .lp-scheme-narrow{display:none;} .lp-scheme figcaption,.lp-scheme .lp-scheme-cap{margin:0;padding-top:14px;text-align:center; font-size:.8667em;line-height:1.4;color:var(--lp-muted,#646464);} @media (max-width:767px){ .lp-scheme{margin-top:32px;padding:12px;} .lp-scheme .lp-scheme-wide{display:none;} .lp-scheme .lp-scheme-narrow{display:block;} } /* Строка действия под схемой (макет .how__cta): одна кнопка + пояснение */ .lp-how-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:40px 0 0;} .lp-how-cta .lp-how-cta-note{margin:0;font-size:.9333em;line-height:1.5;color:rgba(255,255,255,.74);} @media (max-width:767px){ .lp-how-cta{margin-top:28px;gap:12px;} .lp-how-cta .btn{width:100%;} } /* ============================================================================ Ф6 (2026-08-04): «Безопасность» в две колонки, «Восстановление» тремя карточками, сравнение — таблица на десктопе и карточки на мобильном (макет В1, секции 9–11). Порядок глав в DETAIL_TEXT приведён к макету: Безопасность → Восстановление → Сравнение. Кегли — литеральными em (px ÷ 15), цвет/радиус — токенами. ⚠️ Скоуп контента ЛП — .lp-sections (с .lp-mode они СЁСТРЫ, см. выше). ========================================================================= */ /* Надзаголовок вплотную к заголовку главы: у .lp-h2-chapter margin-top 48px !important, поэтому между eyebrow и h2 иначе зияет разрыв. Работает и в head-split Ф5. */ .lp-sections p.lp-eyebrow + h2.lp-h2-chapter{margin-top:0 !important;} /* --- Безопасность: чек-лист ↔ панель «Где хранятся копии» (макет .sec-grid) --- */ .lp-secgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin:48px 0 32px;} .lp-secgrid-main{min-width:0;} .lp-sections .lp-secgrid h2.lp-h2-chapter{margin-top:0 !important;margin-bottom:20px !important;} .lp-sections .lp-sec-lead{margin:0 0 28px;font-size:1.0667em;line-height:1.6;color:var(--lp-muted,#646464);} .lp-sec-list{display:flex;flex-direction:column;gap:16px;} /* галочка — глифом из CSS: визуальный редактор режет и inline-SVG */ .lp-sec-item{position:relative;padding-left:40px;} .lp-sec-item:before{content:"\2713";position:absolute;left:0;top:1px;width:26px;height:26px; border-radius:50%;background:var(--lp-accent-soft,#fce7e7);color:var(--lp-accent-ink,#a60e08); font-size:.8667em;font-weight:700;line-height:26px;text-align:center;} .lp-sec-item>b{display:block;margin:0 0 4px;line-height:1.4;color:var(--lp-fg,#333);} .lp-sections .lp-sec-item>p{margin:0;font-size:.9333em;line-height:1.5;color:var(--lp-muted,#646464);} .lp-panel{background:var(--lp-zone,#F6F6F4);border:1px solid var(--lp-line,#E8E8E4); border-radius:var(--lp-r-xl,14px);padding:32px;} .lp-panel-label{margin-bottom:20px;font-size:.8667em;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--lp-muted,#646464);} .lp-panel-list{display:flex;flex-direction:column;gap:12px;} .lp-opt{background:#fff;border:1px solid var(--lp-line,#E8E8E4);border-radius:var(--lp-r-lg,12px); padding:16px 20px;} .lp-opt>b{display:block;margin-bottom:4px;line-height:1.4;color:var(--lp-fg,#333);} .lp-sections .lp-opt>p{margin:0;font-size:.8667em;line-height:1.5;color:var(--lp-muted,#646464);} /* нота 152-ФЗ — тёмная плашка внутри белой секции (макет .panel__law) */ .lp-sections .lp-panel-law{margin:20px 0 0;padding:16px 20px;background:var(--lp-zone-dark,#16181D); border-radius:var(--lp-r-lg,12px);color:rgba(255,255,255,.86);font-size:.9333em;line-height:1.5;} .lp-sections .lp-panel-law b{color:var(--lp-accent-light,#ec7d78);} /* --- Восстановление: светлая зона + сетка 3 карточек (макет секция 10) ------- */ .lp-sections .lp-zone--restore{margin:40px 0;padding:8px 0 40px;} .lp-fgrid--3{grid-template-columns:repeat(3,1fr);} /* цитата-отзыв (P0-5) внутри светлой зоны — белой, иначе сливается с фоном */ .lp-sections .lp-zone--restore .lp-quote{background:#fff;} /* --- Сравнение: таблица ≥1024, карточки ≤1023 (макет .cmp) ------------------- ⚠️ Свой класс .lp-ctab, а НЕ .lp-cmp: карточную матрицу с subgrid (.lp-cmp / .cols4 / .lp-cmp--rows9) продолжает использовать Поток, и раскрытие E-3 в template.php ищет именно .lp-cmp — на Бэкапе его больше нет, поэтому кнопка «Сравнить с альтернативами» не появляется (решение 8). ⚠️ Секция сравнения теперь БЕЛАЯ (в макете sect--white): в DETAIL_TEXT у обёртки снят класс .lp-zone, остался только .lp-zone--matrix — он задаёт отступы, фон давал именно .lp-zone. */ .lp-sections .lp-zone--matrix{margin:48px 0 32px;padding:0;} .lp-ctab{border:1px solid var(--lp-line,#E8E8E4);border-radius:var(--lp-r-xl,14px); overflow:hidden;margin:24px 0 16px;} .lp-ctab-head,.lp-ctab-row{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;} .lp-ctab-head{background:var(--lp-zone-dark,#16181D);} .lp-ctab-row{border-top:1px solid var(--lp-line,#E8E8E4);background:#fff;} .lp-ctab-row--zebra{background:var(--lp-soft,#FAFAF8);} .lp-ctab-hf{padding:16px 24px;font-size:.8667em;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:rgba(255,255,255,.66);} .lp-ctab-hus{padding:16px 12px;font-size:.9333em;font-weight:700;line-height:1.4;text-align:center; background:var(--lp-accent,#dd130a);color:#fff;} .lp-ctab-hc{padding:16px 12px;font-size:.9333em;font-weight:700;line-height:1.4;text-align:center; color:#fff;} .lp-ctab-f{padding:14px 24px;font-size:.9333em;font-weight:700;line-height:1.4;color:var(--lp-fg,#333);} .lp-ctab-us{padding:14px 12px;text-align:center;font-size:.9333em;font-weight:700;line-height:1.4; color:var(--lp-accent-ink,#a60e08);background:var(--lp-accent-soft,#fce7e7);} .lp-ctab-c{padding:14px 12px;text-align:center;font-size:.9333em;line-height:1.4; color:var(--lp-muted,#646464);} .lp-ctab-lbl{display:none;} /* сноска под таблицей — ограниченная строка (§ 6 п. 6 инструкции: было 117 знаков/стр.) */ .lp-sections .lp-ctab-note{max-width:820px;margin:0;line-height:1.5;} /* Мобильные карточки: шапка скрыта, метка колонки печатается в каждой ячейке. Наша колонка идёт в разметке первой → на планшете попадает в левый верхний угол. */ @media (max-width:1023px){ .lp-ctab-head{display:none;} .lp-ctab-row{grid-template-columns:1fr 1fr;} .lp-ctab-row > .lp-ctab-f{grid-column:1 / -1;padding-bottom:4px;} .lp-ctab-row > div{text-align:left;} .lp-ctab-us,.lp-ctab-c{padding:12px 24px;} .lp-ctab-lbl{display:block;margin-bottom:4px;font-size:.7333em;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--lp-muted,#646464);} .lp-fgrid--3{grid-template-columns:1fr 1fr;} .lp-secgrid{grid-template-columns:1fr;gap:32px;margin:32px 0 24px;} } @media (max-width:767px){ .lp-panel{padding:24px;} .lp-secgrid{gap:24px;} .lp-sections .lp-sec-lead{margin-bottom:20px;font-size:1em;} .lp-sections .lp-zone--restore{margin:24px 0;padding:8px 0 24px;} .lp-sections .lp-zone--matrix{margin:32px 0 24px;} .lp-fgrid--3{grid-template-columns:1fr;} .lp-ctab-row{grid-template-columns:1fr;} .lp-ctab-us,.lp-ctab-c{padding:10px 20px;} .lp-ctab-f{padding:14px 20px 4px;} } /* ============================================================================ Ф7 (2026-08-04) — ЦЕНОВАЯ ЗОНА ПОД МАКЕТ В1 Разметку даёт шаблон компонента tarif_linked_custom2 (правило § 1.8 — велосипед не изобретаем): переключатель периода .lp-billing, штатный кап характеристик (.hidden-block + .rolldown), строка наследования .lp-tarif-inherit, цена выведена ВЫШЕ списка «что входит». Вид карточки — из макета В1: белая плашка, рамка --lp-line, радиус --lp-r-xl, без тени; рекомендуемая карточка (бедж HIT) — ТЁМНАЯ, как .plan--main макета. ⚠️⚠️ СКОУП — .lp-tarifs-v1 (класс ставит эпилог ТОЛЬКО при $arLP). Ни .lp-sections, ни .lp-accent скоупом ЛП НЕ являются: обёртка эпилога (стр.159) выводит их на КАЖДОЙ странице catalog3, т.к. LP_ACCENT_COLOR проставлен всем 8 продуктам ИБ 73 (2026-07-24). Проверено рендером: на не-ЛП bekap-yandeks-360-education есть и .lp-sections, и .lp-accent, и .lp-tarifs-native — при скоупе .lp-accent её 5 карточек (HIT у всех) становились тёмными. ============================================================================ */ /* --- переключатель периода оплаты (в макете .switch) --- */ /* ⚠️ position+z-index обязательны: контейнер флекс-слайдера тарифов (ul.slides) перекрывает область переключателя (elementFromPoint возвращал UL.slides), и физический клик мышью уходил в слайдер — кнопка «не работала», хотя программный .click() срабатывал. */ .lp-tarifs-v1 .lp-billing{position:relative;z-index:3;display:inline-flex;gap:4px;margin:0 0 24px;padding:4px;background:var(--lp-zone,#F6F6F4);border-radius:var(--lp-r-md,8px);} .lp-tarifs-v1 .lp-billing-btn{border:0;background:0 0;padding:8px 20px;border-radius:var(--lp-r-sm,6px);font-size:.9333em;font-weight:bold;line-height:1.4;color:var(--lp-muted,#646464);cursor:pointer;transition:background-color .18s ease,color .18s ease;} .lp-tarifs-v1 .lp-billing-btn i{font-style:normal;color:var(--lp-accent,#dd130a);} .lp-tarifs-v1 .lp-billing-btn.is-active{background:#fff;color:var(--lp-fg,#333);box-shadow:0 1px 2px rgba(0,0,0,.08);} .lp-tarifs-v1 .lp-billing-btn.is-active i{color:var(--lp-accent-ink,#a60e08);} /* --- шапка ценовой зоны по макету (.pricing__head): надзаголовок, заголовок и лид по центру --- */ .lp-sections .lp-price-head--center{display:block;text-align:center;max-width:640px;margin-left:auto;margin-right:auto;} .lp-sections .lp-price-head--center .lp-note{margin-top:12px;} /* переключатель центрируем авто-марджинами: text-align:center у родителя утёк бы в карточки. ⚠️ display:flex обязателен — inline-flex авто-марджины не центрируют. */ .lp-tarifs-v1 .lp-billing{display:flex;margin:24px auto;margin-left:auto;margin-right:auto;width:-moz-max-content;width:max-content;} /* --- вид карточки тарифа (макет .plan) --- */ .lp-tarifs-v1 .item-views.tarifs.type_8 .item > .wrap{border:1px solid var(--lp-line,#E8E8E4);border-radius:var(--lp-r-xl,14px);padding:32px 28px;} .lp-tarifs-v1 .item-views.tarifs.type_8 .item.whit > .wrap{border:1px solid var(--lp-line,#E8E8E4);} .lp-tarifs-v1 .item-views.tarifs .item .bottom_block{margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--lp-line,#E8E8E4);} .lp-tarifs-v1 .item-views.tarifs .item .previewtext > div{padding:0 0 20px;text-align:left;} .lp-tarifs-v1 .item-views.tarifs .item .top_block{text-align:left;margin-bottom:12px;} .lp-tarifs-v1 .item-views.tarifs .item .top_block .name{text-align:left;} /* цена крупнее (в макете 38px/800) и выровнена по левому краю, как весь текст карточки */ .lp-tarifs-v1 .item-views.tarifs.type_8 .all_price.single, .lp-tarifs-v1 .item-views.tarifs.type_8 .all_price.single li{text-align:left;} .lp-tarifs-v1 .item-views.tarifs.type_8 .all_price.single li .value{width:auto !important;text-align:left !important;font-size:2.1333em;letter-spacing:-.02em;line-height:1.15;} .lp-tarifs-v1 .item-views.tarifs .tarif-price-unit{text-align:left;margin-top:4px;} /* ⚠️ Цена — НЕ интерактивный элемент: у темы .all_price li это пункт выпадающего выбора цены (cursor:pointer, на :hover — подложка #f8f9fb, отрицательный margin и рамки сверху/снизу), из-за чего при наведении «подсвечивалась область». Для одиночной цены гасим и курсор, и ховер. */ /* ⚠️ На :hover нельзя менять padding/margin строки цены. В норме у неё padding темы 12px 30px 11px, а компенсирующий margin:0 -30px висит на .all_price — вместе они и дают выравнивание цены по контенту карточки. Первая версия ставила на hover padding:4px 0, и цена прыгала влево на 30px (замер: left 520 → 490). Гасим ТОЛЬКО оформление. */ .lp-tarifs-v1 .item-views.tarifs.type_8 .item .prices .all_price.single li{cursor:default;} .lp-tarifs-v1 .item-views.tarifs.type_8 .item .prices .all_price.single li:hover{margin-top:0;padding:12px 30px 11px;border:0;background:none;} .lp-tarifs-v1 .item-views.tarifs.type_8 .item .prices .all_price.single li:hover:before, .lp-tarifs-v1 .item-views.tarifs.type_8 .item .prices .all_price.single li:hover:after{display:none !important;} .lp-tarifs-v1 .item-views.tarifs .tarif-year-note{text-align:left;} .lp-tarifs-v1 .item-views.tarifs .item .order{text-align:left;} /* --- строки «что входит»: галочка слева, без пунктирного лидера темы (в макете .plan__f) --- */ .lp-tarifs-v1 .item-views.tarifs .item .properties .property{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;background:none;} .lp-tarifs-v1 .item-views.tarifs .item .properties .property .title-prop{order:2;max-width:none;padding:0;background:none;line-height:1.45;} .lp-tarifs-v1 .item-views.tarifs .item .properties .property .value{order:1;max-width:none;width:auto;padding:0;background:none;text-align:left;flex:0 0 auto;} .lp-tarifs-v1 .item-views.tarifs .item .properties .property .value.yes svg, .lp-tarifs-v1 .item-views.tarifs .item .properties .property .value.no svg{width:11px;height:9px;margin-top:5px;} /* строка наследования «Всё из тарифа …» — тот же ряд, но подчёркнуто как обобщение */ .lp-tarifs-v1 .item-views.tarifs .item .properties .property.lp-tarif-inherit .title-prop{font-weight:bold;color:var(--lp-fg,#333);} /* --- штатный переключатель списка .rolldown (кап COUNT_SHOW_PROPRERTIES) --- */ .lp-tarifs-v1 .item-views.tarifs .item .properties .hidden-block{display:none;} .lp-tarifs-v1 .item-views.tarifs .item .properties .hidden-block > .wrap{margin:0;} .lp-tarifs-v1 .item-views.tarifs .item .rolldown{margin:12px 0 0;font-size:1em;} /* ⚠️ у .rolldown стоит класс темы .font_upper (font-size:0.6667em) — вложенные em перемножаются и «Все возможности тарифа» рисовалось 8px. Кегль задаём на самом span, а не наследованием. */ .lp-tarifs-v1 .item-views.tarifs .item .rolldown > span{color:var(--lp-accent,#dd130a);font-size:.8667em;letter-spacing:.4px;} .lp-tarifs-v1 .item-views.tarifs .item .rolldown > span:hover{color:var(--lp-accent-ink,#a60e08);} .lp-tarifs-v1 .item-views.tarifs .item .rolldown > span svg path{fill:currentColor;} /* --- рекомендуемая карточка — тёмная (макет .plan--main) --- */ .lp-tarifs-v1 .item-views.tarifs.type_8 .item.whit{background:0 0;} .lp-tarifs-v1 .item-views.tarifs.type_8 .item.whit > .wrap{background:var(--lp-zone-dark,#16181D);border-color:var(--lp-zone-dark,#16181D);} .lp-tarifs-v1 .item-views.tarifs .item.whit .top_block .name, .lp-tarifs-v1 .item-views.tarifs .item.whit .properties .property .title-prop, .lp-tarifs-v1 .item-views.tarifs.type_8 .item.whit .all_price.single li .value{color:#fff;} .lp-tarifs-v1 .item-views.tarifs .item.whit .previewtext, .lp-tarifs-v1 .item-views.tarifs .item.whit .previewtext > div, .lp-tarifs-v1 .item-views.tarifs .item.whit .tarif-price-unit{color:rgba(255,255,255,.78);} /* акцент на тёмном — светлый вариант токена (сам акцент даёт 3,4:1 на #16181D) */ .lp-tarifs-v1 .item-views.tarifs .item.whit .section_name.lp-tarif-reco{color:var(--lp-accent-light,#ec7d78);} .lp-tarifs-v1 .item-views.tarifs .item.whit .bottom_block{border-top-color:rgba(255,255,255,.16);} .lp-tarifs-v1 .item-views.tarifs .item.whit .rolldown > span{color:var(--lp-accent-light,#ec7d78);} .lp-tarifs-v1 .item-views.tarifs .item.whit .rolldown > span:hover{color:#fff;} @media (max-width:767px){ .lp-tarifs-v1 .lp-billing{width:100%;} .lp-tarifs-v1 .lp-billing-btn{flex:1 1 0;padding:8px 12px;} .lp-tarifs-v1 .item-views.tarifs.type_8 .item > .wrap{padding:24px 20px;} } /* --- бедж из свойства HIT (макет .plan__badge): акцентная пилюля на верхней кромке карточки --- */ .lp-tarifs-v1 .item-views.tarifs.type_8 .item .image .stickers{top:-13px;left:28px;} /* ⚠️ тема обнуляет кегль контейнера стикеров (.stickers{font-size:0} — приём для inline-block списка), поэтому наш .8em считался от нуля: пилюля выходила 27×10 px без видимого текста. Возвращаем контейнеру нормальный кегль, и только тогда em у пилюли имеет смысл. */ .lp-tarifs-v1 .item-views.tarifs .item .image .stickers, .lp-tarifs-v1 .item-views.tarifs .item .image .stickers .stickers-wrapper{font-size:1em;line-height:1.4;} .lp-tarifs-v1 .item-views.tarifs .stickers .stickers-wrapper [class^="sticker_"]{padding:5px 12px;font-size:.8em;letter-spacing:.4px;} /* первая строка раскрытого остатка: тема гасит отступ у .property:first-of-type, и строка прилипала */ .lp-tarifs-v1 .item-views.tarifs .item .properties .hidden-block > .wrap > .property:first-of-type{margin-top:10px;} /* пустой кикер выделенной карточки — только для выравнивания рядов (текст несёт бедж) */ .lp-tarifs-v1 .item-views.tarifs .item .section_name.lp-tarif-reco, .lp-tarifs-v1 .item-views.tarifs .item.whit .section_name.lp-tarif-reco{color:transparent;} /* ============================================================ Ф8 (2026-08-04): доказательства и справочный хвост под макет В1. Документы — карточки-ссылки; галерея — подписи под кадрами; отзывы — сетка 3 в ряд. ⚠️ Скоуп — .lp-sections (не .lp-mode: они СЁСТРЫ). font-size — литеральными em (база 15px). ============================================================ */ /* --- Документы: карточки-ссылки (макет .doc), 3 колонки как в макете --- */ .lp-sections .lp-docs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media (max-width:1023px){.lp-sections .lp-docs-grid{grid-template-columns:repeat(2,1fr);}} .lp-sections a.lp-doc{display:flex;align-items:center;gap:16px;padding:20px;background:#fff;border:1px solid var(--lp-line,#E8E8E4);border-radius:var(--lp-r-xl,14px);color:var(--lp-fg,#333);text-decoration:none;transition:border-color .25s ease,box-shadow .25s ease;} .lp-sections a.lp-doc:hover,.lp-sections a.lp-doc:focus{border-color:var(--lp-accent,#dd130a);box-shadow:var(--lp-shadow,0 4px 22px rgba(0,0,0,.09));color:var(--lp-fg,#333);} .lp-sections .lp-doc__type{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--lp-r-md,8px);background:var(--lp-accent-soft,#fce7e7);color:var(--lp-accent-ink,#a60e08);font-size:.7333em;font-weight:bold;letter-spacing:.04em;} .lp-sections .lp-doc__body{flex:1 1 auto;min-width:0;} .lp-sections .lp-doc__t{display:block;font-weight:600;line-height:1.4;} .lp-sections .lp-doc__m{display:block;margin-top:4px;color:var(--lp-muted,#646464);font-size:.8em;} .lp-sections .lp-doc__arrow{flex:0 0 auto;color:var(--lp-muted,#646464);font-size:1.0667em;line-height:1;transition:color .25s ease;} .lp-sections .lp-doc__arrow:before{content:"\2193";} .lp-sections a.lp-doc:hover .lp-doc__arrow{color:var(--lp-accent,#dd130a);} @media (max-width:767px){ .lp-sections .lp-docs-grid{grid-template-columns:1fr;gap:12px;} .lp-sections a.lp-doc{padding:16px;gap:12px;} } /* --- Галерея «Интерфейс»: подпись кадра видимой строкой (в макете подписи есть у каждого скриншота) --- */ .lp-sections .lp-gal-cap{margin:12px 0 0;color:var(--lp-muted,#646464);font-size:.8667em;line-height:1.4;text-align:center;} /* --- Отзывы: сетка карточек вместо штатного слайдера (шаблон reviews_linked_lp) --- */ /* ⚠️ clear:both обязателен: заголовок с флоат-ссылкой (.show_all.pull-right) оставляет флоат-полосу, а grid-контейнер (новый контекст форматирования) НЕ налезает на флоат, а сжимается — замер давал 1085px вместо 1361 и карточки по 383px с текстом в 121px. Блочный div такого не показывает. */ .lp-sections .lp-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;clear:both;} /* вид карточки по макету В1: серая подложка без рамки на белой секции */ .lp-sections .lp-reviews-grid .item.border.lp-review{display:flex;flex-direction:column;margin:0;padding:28px 24px;background:var(--lp-zone,#F6F6F4);border:0;border-radius:var(--lp-r-xl,14px);box-shadow:none;} .lp-sections .lp-reviews-grid .lp-review__stars{margin:0 0 16px;float:none;} .lp-sections .lp-reviews-grid .lp-review__text{flex:1 1 auto;margin:0;color:var(--lp-ink,#555);line-height:1.6;} .lp-sections .lp-reviews-grid .lp-review__who{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--lp-line,#E8E8E4);} .lp-sections .lp-reviews-grid .lp-review__name{color:var(--lp-fg,#333);font-weight:600;line-height:1.4;} .lp-sections .lp-reviews-grid .lp-review__role{margin-top:2px;color:var(--lp-muted,#646464);font-size:.8667em;line-height:1.4;} .lp-sections .lp-reviews-grid .lp-review__more{margin:12px 0 0;} @media (max-width:1023px){.lp-sections .lp-reviews-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:767px){ .lp-sections .lp-reviews-grid{grid-template-columns:1fr;gap:12px;} .lp-sections .lp-reviews-grid .item.border.lp-review{padding:20px;} .lp-sections .lp-reviews-head .top_title_block{max-width:100%;} } /* ============================================================ Ф8 доводка (2026-08-04, замечания заказчика): шапки блоков «заголовок слева — ссылка справа» (макет head-split), отзывы/релизы/FAQ по макету В1. ============================================================ */ /* --- Общая шапка блока: надзаголовок + заголовок слева, ссылка справа по нижней границе --- */ .lp-sections .lp-head-split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:48px 0 24px;} .lp-sections .lp-head-split__main{min-width:0;} .lp-sections .lp-head-split .lp-eyebrow{margin:0 0 8px;} .lp-sections .lp-head-split h2.lp-h2-chapter{margin:0 !important;} .lp-sections a.lp-head-split__link{flex:0 0 auto;font-size:1em;font-weight:bold;line-height:1.4;white-space:nowrap;color:var(--lp-accent,#dd130a);} .lp-sections a.lp-head-split__link:hover{color:var(--lp-accent-ink,#a60e08);} /* --- Отзывы: сброс отрицательных отступов темы и звёзды акцентом --- ⚠️ тема даёт `.reviews.item-views.linked{margin:-40px 0}` — из-за нижнего -40px шапка ценовой зоны (надзаголовок «ТАРИФЫ») налезала на карточки отзывов. */ .lp-sections .item-views.reviews.linked.lp-reviews-grid{margin:0;} .lp-sections .lp-reviews-grid .lp-review__stars{color:var(--lp-accent,#dd130a);font-size:1em;letter-spacing:2px;line-height:1;} /* --- История релизов: версия слева, точка на линии, пункты справа (макет .rel) --- */ .lp-sections .lp-releases-head--block{margin:48px 0 8px;} .lp-sections .lp-releases-head--block .lp-eyebrow{margin:0 0 8px;} .lp-sections .lp-releases-head--block .lp-releases-h{margin:0 !important;} .lp-sections .lp-releases-more--bottom{margin:8px 0 0;border:0;padding:0;} .lp-sections a.lp-releases-more-link{font-size:1em;font-weight:bold;color:var(--lp-accent,#dd130a);} .lp-sections a.lp-releases-more-link:hover{color:var(--lp-accent-ink,#a60e08);} /* --- FAQ по макету: шапка по центру, аккордеон в узкой колонке (820px, решение заказчика) --- */ .lp-sections .lp-faq-head--center{max-width:820px;margin:0 auto;text-align:center;} .lp-sections .lp-faq-head--center .lp-eyebrow{margin:0 0 8px;} .lp-sections .lp-faq-head--center h2.lp-h2-chapter{margin:0 0 24px !important;} .lp-sections .lp-faq--narrow .item-views.accordion{max-width:820px;margin-left:auto;margin-right:auto;} /* ══ Ритм секций по макету В1 (05.08.2026) ═════════════════════════════════ Макет: .wrap{max-width:var(--container);margin:0 auto;padding:88px 24px}; адаптив ≤980 → 64px по вертикали, ≤620 → 48px 16px. Секции в макете стоят вплотную, воздух — ВНУТРИ каждой, поэтому между текстом соседних секций 88+88. ⚠️ Сам класс .wrap НЕ используем: это класс темы Аспро (на ЛП 49 узлов — внутренности карточек тарифов, галерея, меню), глобальное правило ломает вид. ⚠️ Боковые 24px не переносим — гутер уже даёт контейнер темы (.maxwidth-theme 16px + бутстрап-колонка); свои 24px сдвинули бы контент ЛП относительно шапки, подвала и hero (у макета все секции в одном .wrap). ⚠️ Воздух вешаем на САМУ секцию (.lp-sect и зоны), НЕ на .drag_block: (1) у цветных полос фон рисует padding — воздух обязан быть ВНУТРИ полосы; (2) пустых .drag_block на ЛП девять (char, video, projects, brand, services, partners, vacancys, sertificates, comments) — они дали бы пустоту по 176px. !important — перебиваем ранние per-block правила (.lp-sect 12/8, .lp-faq 48/56, .lp-trust-sect 56/56, .lp-how 8/40, .galerys-block 48/56, .lp-docs-sect 48/56). */ .lp-sections .lp-sect, .lp-sections .lp-how, .lp-sections .lp-zone--restore, .lp-sections .lp-zone--matrix, .lp-sections .styled-block.lp-cta.lp-zone--dark, .lp-problem-grid{margin-top:0 !important;margin-bottom:0 !important;padding-top:88px !important;padding-bottom:88px !important;} .lp-sections .detail_left_block > .drag_block{margin-top:0 !important;margin-bottom:0 !important;} /* первый элемент секции своего отступа не добавляет — воздух уже дала секция */ .lp-sections .lp-sect > *:first-child, .lp-sections .lp-how > *:first-child, .lp-sections .lp-zone--restore > *:first-child, .lp-sections .lp-zone--matrix > *:first-child{margin-top:0 !important;} /* Секции внутри desc-слота (DETAIL_TEXT) обёрток не имеют. Белый воздух перед цветной полосой = margin-top полосы (в макете это нижний padding предыдущей белой секции); воздух глав без обёртки — margin их первого блока (.lp-resp «Кто за что отвечает», .lp-secgrid «Безопасность»). */ /* Замечание заказчика 2026-08-05: margin-top здесь ЛИШНИЙ — те же зоны получают padding-top/bottom:88px из блока ритма секций, отступ складывался вдвое. */ .lp-sections .lp-trust-sect .lp-how{margin-top:88px !important;margin-bottom:88px !important;} .lp-sections .lp-about > .lp-resp{margin-top:88px !important;margin-bottom:88px !important;} .lp-sections .lp-about > .lp-secgrid{margin-top:88px !important;} @media (max-width:1023px){ .lp-sections .lp-sect, .lp-sections .lp-how, .lp-sections .lp-zone--restore, .lp-sections .lp-zone--matrix, .lp-sections .styled-block.lp-cta.lp-zone--dark, .lp-problem-grid{padding-top:64px !important;padding-bottom:64px !important;} .lp-sections .lp-trust-sect .lp-how{margin-top:64px !important;margin-bottom:64px !important;} .lp-sections .lp-about > .lp-resp{margin-top:64px !important;margin-bottom:64px !important;} .lp-sections .lp-about > .lp-secgrid{margin-top:64px !important;} } @media (max-width:767px){ .lp-sections .lp-sect, .lp-sections .lp-how, .lp-sections .lp-zone--restore, .lp-sections .lp-zone--matrix, .lp-sections .styled-block.lp-cta.lp-zone--dark, .lp-problem-grid{padding-top:48px !important;padding-bottom:48px !important;} .lp-sections .lp-trust-sect .lp-how{margin-top:48px !important;margin-bottom:48px !important;} .lp-sections .lp-about > .lp-resp{margin-top:48px !important;margin-bottom:48px !important;} .lp-sections .lp-about > .lp-secgrid{margin-top:48px !important;} } /* Блок шагов (LP_STEPS_ITEMS) рендерится как .lp-sect, но это ПОДблок тёмной секции «Как это работает», а не отдельная секция — воздух секции ему не нужен. */ .lp-sections .lp-how .lp-sect{padding-top:40px !important;padding-bottom:40px !important;} @media (max-width:767px){.lp-sections .lp-how .lp-sect{padding-top:24px !important;padding-bottom:24px !important;}} /* …кроме случая, когда белый воздух уже дал нижний padding предыдущей секции (у Потока полоса идёт сразу за секцией, у Бэкапа — за главой без обёртки). */ .lp-sections .drag_block.desc .lp-sect + .lp-sect.lp-trust-sect, .lp-sections .drag_block.desc .lp-sect + .lp-zone--restore, .lp-sections .drag_block.desc .lp-sect + .lp-zone--matrix{margin-top:0 !important;} /* ─── Шапки секций ЛП — выравнивание по макету В1 (замечание 11, 2026-08-05) ─── Ранее в этот же день центрировались ВСЕ шапки; заказчик уточнил раскладку макета: влево — «Зачем это нужно», «Возможности», «Запуск за 15 минут», «Продукт вживую», «Безопасность и комплаенс», «Восстановление», «Отзывы», «Документы»; по центру — «Сравнение», «Тарифы» (.lp-price-head--center, Ф7) и «FAQ» (.lp-faq-head--center, Ф8); «История релизов» — по левому краю своей ленты (блок .lp-releases-sect--list сам по себе 900 px по центру). От прежнего блока здесь остались ТОЛЬКО структурные правила (ширина прозы, воздух главы «Безопасность», раскладка полосы рисков) — без text-align/auto. */ .lp-sections p.lp-eyebrow, .lp-sections h2, .lp-sections h2.lp-h2-chapter, .lp-sections .lp-how-h, .lp-sections h3.lp-sect-h3, .lp-sections .lp-releases-h{max-width:900px;} .lp-sections .lp-how-sub, .lp-sections .lp-sec-lead, .lp-sections p.lp-trust__lead, .lp-sections .lp-eco-lead, .lp-sections .lp-releases-sub{max-width:720px;} /* Безопасность: шапка вынесена из двухколоночной .lp-secgrid в .lp-headc (Ф6/правка DT) */ .lp-sections .lp-headc{max-width:900px;} .lp-sections .lp-headc.lp-headc--narrow{max-width:640px;} .lp-sections .lp-headc--narrow h2.lp-h2-chapter{text-wrap:balance;} .lp-sections .lp-about > .lp-headc{margin-top:88px !important;} .lp-sections .lp-about > .lp-headc + .lp-secgrid{margin-top:0 !important;} @media (max-width:1023px){ .lp-sections .lp-about > .lp-headc{margin-top:64px !important;} } @media (max-width:767px){ .lp-sections .lp-about > .lp-headc{margin-top:48px !important;} .lp-sections .lp-copied-head, .lp-sections .lp-head-split, .lp-sections .lp-headc{max-width:none;} } /* Полоса рисков, светлый режим (Бэкап, LP_PROBLEM_HTML): шапка над карточками */ .lp-problem--light .lp-problem-grid--html{grid-template-columns:1fr;} /* Тёмная полоса Потока (без LP_PROBLEM_HTML): карточки — прямые дети сетки, поэтому flex-ряд, заголовок на всю строку. */ .lp-problem-grid:not(.lp-problem-grid--html){display:flex;flex-wrap:wrap;} .lp-problem-grid:not(.lp-problem-grid--html) > *{flex:1 1 220px;min-width:0;} .lp-problem-grid:not(.lp-problem-grid--html) .lp-problem-title{flex:0 0 100%;} /* Единственная шапка-глава по центру — «Сравнение» (head-center макета) */ .lp-sections .lp-zone--matrix > p.lp-eyebrow, .lp-sections .lp-zone--matrix > h2.lp-h2-chapter{text-align:center;margin-left:auto !important;margin-right:auto !important;} /* ============================================================================ Ф9 (2026-08-05): финальный блок ЛП под макет В1 (секция #trial). Раскладка макета — две колонки: слева заголовок + лид + аргументы, справа пути конверсии. Вместо встроенной формы макета — две карточки-пути (решение заказчика 1): триал (ИБ-форма 78) и демо (23), попапом jqm. Аргументы приходят из свойства LP_CTA_ITEMS; у продукта без него (Поток) левая колонка = заголовок + лид, раскладка не ломается. ============================================================================ */ .lp-sections .lp-fork--split .lp-fork-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;} .lp-sections .lp-fork--split .lp-fork-head{text-align:left;max-width:none;margin:0;} .lp-sections .lp-fork .lp-fork-title{font-size:2.1333em;line-height:1.15;font-weight:600;letter-spacing:-0.02em;} .lp-sections .lp-fork .lp-fork-sub{margin-top:16px;font-size:1.1333em;line-height:1.6;} /* пути — стеком в правой колонке (в макете там одна карточка формы) */ .lp-sections .lp-fork--split .lp-fork-cards{grid-template-columns:1fr;gap:16px;margin-top:0;} /* аргументы триала */ .lp-fork-benefits{list-style:none;margin:24px 0 0;padding:0;} .lp-fork-benefits li{position:relative;padding-left:28px;margin-top:12px;line-height:1.6;color:var(--lp-ink,#555);} .lp-fork-benefits li:before{content:"\2713";position:absolute;left:0;top:0;font-weight:700;color:var(--lp-accent);} .lp-sections .lp-zone--dark .lp-fork-benefits li{color:rgba(255,255,255,.86);} .lp-sections .lp-zone--dark .lp-fork-benefits li:before{color:var(--lp-accent-light,#ec7d78);} /* микротекст под кнопкой триала: подпись обещает 30 дней, self-serve пока нет (решение заказчика 3) */ .lp-fork-note{margin-top:12px;text-align:center;font-size:.8667em;line-height:1.5;color:var(--lp-muted,#646464);} @media (max-width:1023px){ .lp-sections .lp-fork--split .lp-fork-in{grid-template-columns:1fr;gap:32px;} .lp-sections .lp-fork--split .lp-fork-cards{grid-template-columns:1fr 1fr;} .lp-sections .lp-fork .lp-fork-title{font-size:1.8667em;} } @media (max-width:767px){ .lp-sections .lp-fork--split .lp-fork-cards{grid-template-columns:1fr;} .lp-sections .lp-fork .lp-fork-title{font-size:1.4667em;} .lp-sections .lp-fork .lp-fork-sub{font-size:1.0667em;} .lp-fork-benefits li{padding-left:24px;margin-top:8px;} } /* ============================================================ Ф10 (2026-08-05): чистка мёртвого CSS. Удалены стили разметки, которой на страницах больше нет: .lp-arch* (HTML-схема архитектуры — с Ф5 это SVG .lp-scheme), .lp-pricehook/.lp-ph-* (ценовой хук — снят волной 1), .lp-route…, .lp-rcard…, .lp-roles, .lp-role (маршрут по ситуациям и роли — сняты Ф3), .lp-proc (нумерованный степпер P12 — заменён шагами LP_STEPS_ITEMS в Ф5), .lp-tchip/.lp-tind-lbl/.lp-trust__industries (чипы отраслей — сняты волной 2), .lp-fork-list (списки в карточках развилки — сняты Ф9), .lp-cmp--rows9 (у Бэкапа матрица с Ф6 — таблица .lp-ctab; Потоку нужен только .cols4), .lp-more--mobile, .lp-gal-clip (мобильные раскрытия — сняты Ф7/Ф8, решение заказчика 8). Проверка перед удалением: класс отсутствует в DOM обеих ЛП (1440/1024/390) и в 4 не-ЛП деталках catalog3, не эмитится шаблонами и не встречается в DETAIL_TEXT/свойствах ИБ. Полный файл ДО чистки: /home/bitrix/backup/files_20260805/f10/lp-styles.css.bak-20260805-f10 ============================================================ */ /* ============================================================================ Правки по замечаниям заказчика 2026-08-05 (соответствие макету В1). 1 — верхний бейдж hero: вид .hero__badge макета (тинт + акцентная рамка) 1а — чипы hero → строка-нота .hero__note (текст через «·») 2/8 — карточки макета (.lp-mcard) в блоках «Зачем это нужно» и «Восстановление» 3/14 — цветные duotone-иконки .lp-mico (единый источник с $arLPIcons, gen_icons.js) 10 — таблица сравнения в узком контейнере макета (wrap--narrow, 1100) 12 — FAQ: карточки с отступом, вопрос жирным 13 — плашка «Копия создана» поверх картинки hero, с анимацией 16 — калькулятор в языке макета (нейтрали/радиусы проекта) ============================================================================ */ /* --- 1. Бейдж hero (.hero__badge макета): акцентный тинт, акцентная рамка, светлый акцентный текст, обычный регистр. Было — белая пилюля с uppercase. Скоуп только тёмного hero: у Потока баннер светлый (фото), там белая пилюля читается лучше. --- */ .banners-content.lp-banner--dark .lp-badge{ display:inline-flex;align-items:center;gap:8px; background:color-mix(in srgb,var(--lp-accent,#dd130a) 16%,transparent); border:1px solid color-mix(in srgb,var(--lp-accent,#dd130a) 42%,transparent); color:var(--lp-accent-light,#ec7d78); border-radius:var(--lp-r-pill,30px); padding:6px 14px;margin-bottom:24px; font-size:.8667em;font-weight:700;line-height:1.4;letter-spacing:0;text-transform:none;} /* --- 1а. Чипы hero → одна строка-нота макета: «Пункт · Пункт · Пункт». Свойство LP_HERO_CHIPS остаётся многозначным (правится в админке), пилюли и точки-маркеры гасим, разделитель рисует CSS. --- */ .banners-content.lp-banner--dark .lp-chips{display:block;margin-top:20px; font-size:.8667em;line-height:1.5;color:rgba(255,255,255,.62);} .banners-content.lp-banner--dark .lp-chip{display:inline;padding:0;border:0;background:0 0; color:inherit;font-size:1em;border-radius:0;} .banners-content.lp-banner--dark .lp-chip i{display:none;} .banners-content.lp-banner--dark .lp-chip:not(:last-child):after{content:" · ";color:rgba(255,255,255,.4);} /* --- 13. Плашка на картинке hero (.hero__pill макета). Появляется снизу вверх после отрисовки баннера, галочка мягко пульсирует. Клики не перехватывает. --- */ .banners-content.lp-banner .img.item_block{position:relative;} .lp-hero-pill{position:absolute;left:16px;bottom:16px;z-index:2; display:flex;align-items:center;gap:12px;pointer-events:none; background:#fff;border-radius:var(--lp-r-lg,12px);padding:14px 18px; box-shadow:0 16px 40px rgba(0,0,0,.35); animation:lp-pill-in .7s cubic-bezier(.2,.7,.3,1) .8s both;} .lp-hero-pill-ico{flex:none;width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:#eaf7ec;color:#1e8e3e;font-size:1.2em;font-weight:700;line-height:1; animation:lp-pill-pulse 2.8s ease-in-out 1.6s infinite;} .lp-hero-pill-tx{display:block;} .lp-hero-pill-t{display:block;font-size:.9333em;font-weight:700;line-height:1.3;color:var(--lp-fg,#333);} .lp-hero-pill-s{display:block;margin-top:2px;font-size:.8em;line-height:1.4;color:var(--lp-muted,#646464);} @keyframes lp-pill-in{from{opacity:0;transform:translateY(16px) scale(.96);}to{opacity:1;transform:none;}} @keyframes lp-pill-pulse{0%,100%{box-shadow:0 0 0 0 rgba(30,142,62,.34);}50%{box-shadow:0 0 0 10px rgba(30,142,62,0);}} @media (prefers-reduced-motion:reduce){ .lp-hero-pill{animation:none;} .lp-hero-pill-ico{animation:none;} } /* --- 2/8. Карточка макета (.card): белая, рамка, радиус 14, иконка сверху. Используется блоками «Зачем это нужно» (LP_PROBLEM_HTML) и «Восстановление». --- */ .lp-sections .lp-mgrid, .lp-problem .lp-problem-cards{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;} @media (max-width:1023px){ .lp-sections .lp-mgrid, .lp-problem .lp-problem-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;} } @media (max-width:767px){ .lp-sections .lp-mgrid, .lp-problem .lp-problem-cards{grid-template-columns:1fr;gap:16px;} } .lp-sections .lp-mcard, .lp-problem .lp-mcard{background:#fff;border:1px solid var(--lp-line,#E8E8E4); border-radius:var(--lp-r-xl,14px);padding:28px;min-width:0;} .lp-sections .lp-mcard > b, .lp-problem .lp-mcard > b{display:block;margin:0 0 10px; font-size:1.2667em;font-weight:700;line-height:1.3;color:var(--lp-fg,#333);} .lp-sections .lp-mcard p, .lp-problem .lp-mcard p{margin:0;font-size:1em;line-height:1.55;color:var(--lp-ink,#555);} @media (max-width:767px){ .lp-sections .lp-mcard, .lp-problem .lp-mcard{padding:20px;} .lp-sections .lp-mcard > b, .lp-problem .lp-mcard > b{font-size:1.1333em;} } /* --- 3/14. Цветные иконки: 28×28 над заголовком карточки; в списке «Безопасность и комплаенс» — 26×26 слева вместо галочки-глифа. --- */ .lp-sections .lp-mico, .lp-problem .lp-mico{width:28px;height:28px;margin:0 0 14px;flex:none; background:var(--lp-ico) center/contain no-repeat;} .lp-sections .lp-sec-list--ico .lp-sec-item:before{content:none;} .lp-sections .lp-sec-list--ico .lp-mico{position:absolute;left:0;top:0;width:26px;height:26px;margin:0;} .lp-sections .lp-opt{position:relative;padding-left:64px;} .lp-sections .lp-opt .lp-mico{position:absolute;left:20px;top:20px;width:26px;height:26px;margin:0;} @media (max-width:767px){ .lp-sections .lp-opt{padding-left:56px;} .lp-sections .lp-opt .lp-mico{left:16px;top:18px;width:24px;height:24px;} } /* --- 2. Полоса «Зачем это нужно»: шапка макета (надзаголовок + заголовок главы), карточки под ней. Заголовок больше не наследует кегль .lp-problem-title. --- */ .lp-problem--light .lp-problem-title{font-size:1em;font-weight:400;margin-bottom:8px;} .lp-problem--light .lp-problem-title p.lp-eyebrow{margin:0 0 12px;} .lp-problem--light .lp-problem-title .lp-problem-h{display:block;max-width:640px; font-size:2.1333em;font-weight:600;line-height:1.15;letter-spacing:-.02em; color:var(--lp-problem-color,#fff);} @media (max-width:767px){ .lp-problem--light .lp-problem-title .lp-problem-h{font-size:1.4667em;} } /* --- 4. Шапка блока «Продукт вживую» (галерея) — как у прочих глав --- */ .lp-sections .galerys-block .lp-gal-h{margin-top:0 !important;} /* --- 10. Таблица сравнения — узкий контейнер макета (wrap--narrow 1100) --- */ .lp-sections .lp-zone--matrix .lp-ctab, .lp-sections .lp-zone--matrix .lp-ctab-note{max-width:1100px;margin-left:auto;margin-right:auto;} /* --- 12. FAQ: вопросы — отдельными карточками с отступом, вопрос жирным --- */ .lp-sections .lp-faq .accordion-type-1 > .item{margin-bottom:12px !important;background:#fff; border:1px solid var(--lp-line,#E8E8E4);border-radius:var(--lp-r-lg,12px);overflow:hidden;} .lp-sections .lp-faq .accordion-type-1:last-child > .item:last-child{margin-bottom:0 !important;} .lp-sections .lp-faq .accordion-head{padding:18px 24px;border:0;} .lp-sections .lp-faq .accordion-head .title{font-size:1.0667em;font-weight:700;line-height:1.4;color:var(--lp-fg,#333);} .lp-sections .lp-faq .accordion-head .title span{font-weight:700;} .lp-sections .lp-faq .accordion-body, .lp-sections .lp-faq .accordion-section{padding:0 24px 20px;} @media (max-width:767px){ .lp-sections .lp-faq .accordion-head{padding:14px 16px;} .lp-sections .lp-faq .accordion-body, .lp-sections .lp-faq .accordion-section{padding:0 16px 16px;} } /* --- 16. Калькулятор в языке макета: нейтрали и радиусы проекта вместо собственной палитры блока (переменные --bc-* объявлены внутри его DETAIL_TEXT; переопределяем снаружи, сам блок не правим). --- */ .lp-sections .by360-calc{ --bc-border:var(--lp-line,#E8E8E4); --bc-bg-soft:var(--lp-zone,#F6F6F4); --bc-text:var(--lp-fg,#333); --bc-muted:var(--lp-muted,#646464); border-radius:var(--lp-r-xl,14px);} .lp-sections .by360-calc__cta{border-radius:var(--lp-r-sm,6px);} body.round_button .lp-sections .by360-calc__cta{border-radius:20px;} /* Цветные duotone-иконки контентных блоков (сгенерированы gen_icons.js; тот же источник, что $arLPIcons в эпилоге — там акцент = currentColor). */ .lp-mico.i-trash{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M3.6 6.4h16.8v2.2H3.6z' fill='%23dd130a'/%3E%3Cpath d='M9 3.4h6a1.6 1.6 0 0 1 1.6 1.6v1.4H7.4V5A1.6 1.6 0 0 1 9 3.4' fill='%23dd130a'/%3E%3Cpath d='M5.6 9.6h12.8l-.9 9.6a2.4 2.4 0 0 1-2.4 2.2H8.9a2.4 2.4 0 0 1-2.4-2.2z' fill='%232B2E35'/%3E%3Cpath d='M10 12.6v6M14 12.6v6' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")} .lp-mico.i-unlock{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M8.2 9.4V7.6a3.8 3.8 0 0 1 7.3-1.5' stroke='%232B2E35' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3Crect x='3.8' y='9.4' width='12.6' height='11.2' rx='2.6' fill='%23dd130a'/%3E%3Ccircle cx='10.1' cy='14.4' r='1.7' fill='%23fff'/%3E%3Crect x='9.2' y='15.2' width='1.8' height='3.2' rx='.9' fill='%23fff'/%3E%3C/svg%3E")} .lp-mico.i-rules{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='4' y='3.6' width='16' height='17.4' rx='2.6' fill='%232B2E35'/%3E%3Crect x='8.4' y='2' width='7.2' height='3.6' rx='1.4' fill='%23dd130a'/%3E%3Cpath d='M8 11.4h8M8 14.8h5.4' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='16.6' cy='17' r='3.4' fill='%23dd130a'/%3E%3Cpath d='M15.1 17.1l1.1 1.1 2.1-2.2' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .lp-mico.i-restore{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='2.4' y='5.4' width='19.2' height='13.2' rx='2.4' fill='%232B2E35'/%3E%3Cpath d='M3 7 12 13l9-6v1.4l-9 6-9-6z' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='18' cy='17.4' r='5' fill='%23dd130a'/%3E%3Cpath d='M18 15v2.6l1.8 1.1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .lp-mico.i-rollback{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Ccircle cx='12' cy='12.4' r='8.6' fill='%232B2E35'/%3E%3Cpath d='M12 7.6v5.1l3.3 2' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.6 5.2v4.4h4.4' stroke='%23dd130a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 9.2A8.6 8.6 0 0 1 12 3.8' stroke='%23dd130a' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")} .lp-mico.i-transfer{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M4.2 9.6A8 8 0 0 1 19 7.4' stroke='%23dd130a' stroke-width='2.3' stroke-linecap='round' fill='none'/%3E%3Cpath d='M19.6 3.4v4.4h-4.4' stroke='%23dd130a' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.8 14.6A8 8 0 0 1 5 16.8' stroke='%232B2E35' stroke-width='2.3' stroke-linecap='round' fill='none'/%3E%3Cpath d='M4.4 20.6v-4.4h4.4' stroke='%232B2E35' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .lp-mico.i-key{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Ccircle cx='8.2' cy='8.4' r='5.4' fill='%23dd130a'/%3E%3Ccircle cx='8.2' cy='8.4' r='1.9' fill='%23fff'/%3E%3Cpath d='M11.6 11.8l8 8' stroke='%232B2E35' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M17.2 17.4l-2 2M19.6 19.8l-1.6 1.6' stroke='%232B2E35' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")} .lp-mico.i-law{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M12 2.4l8 3v6.2c0 4.6-3.2 8.6-8 10-4.8-1.4-8-5.4-8-10V5.4z' fill='%232B2E35'/%3E%3Cpath d='M8.2 12.2l2.7 2.7 5.1-5.4' stroke='%23dd130a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .lp-mico.i-cloudoff{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M6.8 18.4a4.4 4.4 0 0 1-.5-8.8 5.8 5.8 0 0 1 11.1-1 3.9 3.9 0 0 1 .3 7.7z' fill='%232B2E35'/%3E%3Cpath d='M4.2 20.6L19.8 5' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M4.2 20.6L19.8 5' stroke='%23dd130a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")} .lp-mico.i-audit{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='3.6' y='2.8' width='14.4' height='18.4' rx='2.6' fill='%232B2E35'/%3E%3Cpath d='M7 7.6h7.6M7 11h5.4' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='15.4' cy='15.2' r='4.4' fill='none' stroke='%23dd130a' stroke-width='2.2'/%3E%3Cpath d='M18.6 18.6l2.6 2.6' stroke='%23dd130a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")} .lp-mico.i-cloud{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M7 19a4.6 4.6 0 0 1-.5-9.2 6 6 0 0 1 11.5-1 4.1 4.1 0 0 1 .3 8z' fill='%23dd130a'/%3E%3Cpath d='M9.4 14.6h5.2' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")} .lp-mico.i-server{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='2.6' y='4' width='18.8' height='6.6' rx='2' fill='%23dd130a'/%3E%3Crect x='2.6' y='13.4' width='18.8' height='6.6' rx='2' fill='%232B2E35'/%3E%3Ccircle cx='6.6' cy='7.3' r='1.3' fill='%23fff'/%3E%3Ccircle cx='6.6' cy='16.7' r='1.3' fill='%23fff'/%3E%3Cpath d='M10.4 7.3h7.2M10.4 16.7h7.2' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E")} /* --- Блок «Нам доверяют данные» в языке макета В1 (замечание 2026-08-05): секция без внешней рамки-карточки, надзаголовок — акцентный текст (не пилюля), кейсы — карточки .card макета (белые, рамка, радиус 14, паддинг 28, иконка сверху). --- */ .lp-sections .lp-trust{border:0;background:0 0;padding:0;} .lp-sections .lp-trust__eyebrow{display:block;width:auto;margin:0 0 12px;padding:0;background:0 0;border-radius:0; color:var(--lp-accent,#dd130a);font-size:.8667em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;} .lp-sections .lp-trust__eyebrow::before{content:none;} .lp-sections .lp-trust__title{margin:0 0 12px;font-size:2.1333em;font-weight:600;line-height:1.15;letter-spacing:-.02em;} .lp-sections .lp-trust__lead{margin:0 0 40px;} .lp-sections .lp-trust__cases{gap:24px;margin-bottom:24px;} .lp-sections .lp-tcase{border-radius:var(--lp-r-xl,14px);padding:28px;} .lp-sections .lp-tcase__ico{width:28px;height:28px;margin:0 0 14px;border-radius:0;background:0 0;} .lp-sections .lp-tcase__ico::before{-webkit-mask-size:28px;mask-size:28px;} .lp-sections .lp-tcase__kind{margin:0 0 10px;font-size:1.2667em;font-weight:700;line-height:1.3;} .lp-sections .lp-tmetric{font-size:.9333em;color:var(--lp-ink,#555);} @media (max-width:767px){ .lp-sections .lp-trust__title{font-size:1.4667em;} .lp-sections .lp-tcase{padding:20px;} .lp-sections .lp-tcase__kind{font-size:1.1333em;} } /* --- FAQ: стрелка раскрытия по центру строки, блок выше (замечание 2026-08-05). Тема позиционирует иконку от верха (.accordion-head:after{top:…}), из-за чего на однострочном вопросе она уезжала ниже середины. --- */ .lp-sections .lp-faq .accordion-head{padding-top:22px;padding-bottom:22px;position:relative;} .lp-sections .lp-faq .accordion-head:after, .lp-sections .lp-faq .accordion-head:before{top:50% !important;bottom:auto !important;margin-top:0 !important; -webkit-transform:translateY(-50%);transform:translateY(-50%);} .lp-sections .lp-faq .accordion-head.accordion-open:after, .lp-sections .lp-faq .accordion-head.accordion-open:before{-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg);} @media (max-width:767px){ .lp-sections .lp-faq .accordion-head{padding-top:16px;padding-bottom:16px;} } /* --- Экосистема: фон-полоса как у FAQ (замечание 2026-08-05) --- */ .lp-sections .lp-eco-sect{background:var(--lp-zone,#F6F6F4); box-shadow:0 0 0 100vmax var(--lp-zone,#F6F6F4); clip-path:inset(0 calc(-1 * min(50vw - 50%, (1920px - 100%) / 2)));} .lp-sections .lp-eco-sect .lp-eco-card{background:#fff;} .lp-sections .lp-eco-sect .lp-eyebrow{margin-bottom:12px;} /* --- Финальный блок: встроенная форма триала (макет В1, .form) --------------- Компонент aspro:form.priority, шаблон inline_lp. Правая колонка развилки теперь одна карточка-форма; демо-путь — ссылкой под ней. */ /* (uifix 2026-08-05) правило нужно ТОЛЬКО вместе с inline-формой (сейчас откачена): с двумя карточками оно гасило грид и gap. Вернуть при включении формы: .lp-sections .lp-fork--split .lp-fork-cards с display:block */ .lp-sections .lp-tform-wrap{display:block;} .lp-sections .lp-tform{background:#fff;border:1px solid var(--lp-line,#E8E8E4); border-radius:var(--lp-r-xl,14px);padding:28px;} .lp-sections .lp-tform .wrap{padding:0;margin:0;max-width:none;width:auto;} .lp-sections .lp-tform .form-header{margin:0 0 20px;padding:0;border:0;text-align:left;} .lp-sections .lp-tform .form-header .title{margin:0;font-size:1.2667em;font-weight:700;line-height:1.3;color:var(--lp-fg,#333);} .lp-sections .lp-tform .form-header .description{margin:8px 0 0;font-size:.9333em;line-height:1.5;color:var(--lp-muted,#646464);} .lp-sections .lp-tform .form-body{padding:0;} .lp-sections .lp-tform .row{margin-left:0;margin-right:0;} .lp-sections .lp-tform .row > [class^="col-"]{padding-left:0;padding-right:0;} .lp-sections .lp-tform .form-group{margin-bottom:12px;} .lp-sections .lp-tform .form-control{height:auto;padding:13px 16px;font-size:1em;line-height:1.4; border:1px solid var(--lp-line,#E8E8E4);border-radius:var(--lp-r-sm,6px);background:#fff;box-shadow:none;} .lp-sections .lp-tform .form-control:focus{border-color:color-mix(in srgb,var(--lp-accent,#dd130a) 45%,#fff);} .lp-sections .lp-tform textarea.form-control{min-height:96px;} .lp-sections .lp-tform .form-footer, .lp-sections .lp-tform .button{margin-top:16px;padding:0;text-align:left;} .lp-sections .lp-tform .btn{width:100%;} .lp-sections .lp-tform .licence_block, .lp-sections .lp-tform .form-note, .lp-sections .lp-tform .licence-text{margin-top:12px;font-size:.8em;line-height:1.5;color:var(--lp-muted,#646464);} .lp-sections .lp-tform-demo{margin-top:16px;font-size:.9333em;line-height:1.5;color:rgba(255,255,255,.72);} .lp-sections .lp-tform-demo-link{color:#fff;border-bottom:1px dashed rgba(255,255,255,.5);cursor:pointer;} .lp-sections .lp-tform-demo-link:hover{color:var(--lp-accent-light,#ec7d78);border-bottom-color:var(--lp-accent-light,#ec7d78);} @media (max-width:767px){ .lp-sections .lp-tform{padding:20px;} } /* ============================================================================ Замечания заказчика (вторая волна, 2026-08-05): ритм и мелкая полировка. ============================================================================ */ /* --- Ритм: обёртки ЛП не должны добавлять свой воздух к padding 88 у секций. Между соседними секциями остаётся ровно 88 + 88; всё, что дают .content.wttabs / .lp-about / .drag_block, снимаем. --- */ .lp-sections .content.wttabs, .lp-sections .detail_left_block > .content, .lp-sections .lp-about, .lp-sections .drag_block, .lp-sections .drag_block > .content{margin-top:0 !important;margin-bottom:0 !important; padding-top:0 !important;padding-bottom:0 !important;} /* --- Зона «что это / как работает / кому доверяют»: после удаления мостика её первым ребёнком стала тёмная секция «Как это работает», и верхний padding зоны читался как пустая полоса фона. Свой воздух зоны здесь не нужен — его даёт сама тёмная секция. --- */ .lp-sections .lp-trust-sect{padding-top:0 !important;padding-bottom:0 !important;} .lp-sections .lp-trust-sect .lp-how{margin-top:0 !important;margin-bottom:0 !important;} .lp-sections .lp-trust-sect .lp-trust{padding-top:88px;padding-bottom:88px;} @media (max-width:1023px){ .lp-sections .lp-trust-sect .lp-trust{padding-top:64px;padding-bottom:64px;} } @media (max-width:767px){ .lp-sections .lp-trust-sect .lp-trust{padding-top:48px;padding-bottom:48px;} } /* --- Экосистема: заголовок уровня главы, как у «Отзывов» --- */ .lp-sections .lp-eco-title{font-size:2.1333em;font-weight:600;line-height:1.15;letter-spacing:-.02em;margin:0 0 12px;} @media (max-width:767px){ .lp-sections .lp-eco-title{font-size:1.4667em;} } /* --- Трастовые бейджи (152-ФЗ · приватный ключ · Реестр ПО) — чуть выше --- */ .lp-sections .lp-trustrow{margin-top:-16px;} /* --- Сноска под таблицей сравнения — как блок-примечание (по образцу .lp-pricenote), по ширине таблицы --- */ .lp-sections .lp-zone--matrix .lp-ctab-note{max-width:1100px;margin:24px auto 0;padding:16px 20px; background:#fff;border:1px solid var(--lp-line,#E8E8E4);border-radius:var(--lp-r-lg,12px); font-size:.8667em;line-height:1.6;color:var(--lp-muted,#646464);} /* --- Калькулятор: колонка 900px по центру — как «История релизов» (замечание заказчика 2026-08-05) --- */ .lp-sections .lp-calc-sect > *{max-width:900px;margin-left:auto;margin-right:auto;} .lp-sections .lp-calc-sect .by360-calc{max-width:900px;} /* ⚠️ Правила .lp-tform* ниже сейчас НЕ используются: встроенную форму в финальном блоке откатили по просьбе заказчика (2026-08-05), там снова две карточки-пути. Оставлены вместе с шаблоном aspro/form.priority/inline_lp для быстрого возврата. */ /* Калькулятор: шапка тоже в колонке 900 (перебиваем max-width:900 у .lp-h2-chapter/.lp-eyebrow) */ .lp-sections .lp-calc-sect > p.lp-eyebrow, .lp-sections .lp-calc-sect > h2.lp-h2-chapter{max-width:900px;margin-left:auto !important;margin-right:auto !important;} /* ============================================================ Пакет замечаний заказчика 2026-08-05 (вечер, uifix): FAQ, документы, отступ над «Тарифы», сноска таблицы, mid-CTA. Бэкап: files_20260805/uifix/ ============================================================ */ /* FAQ: у свёрнутого вопроса (.item.opened) тема рисует красную точку-маркер (accordion-head:before, 11px, left:-7px) — на белой карточке вылезала за левый край. Прячем. */ .lp-sections .lp-faq .accordion-type-1 .item.opened .accordion-head:before{display:none !important;} /* FAQ: стрелка раскрытия — по вертикальному центру шапки (тема даёт top:24px при высоте шапки 68px) */ .lp-sections .lp-faq .accordion-head .arrow_open{top:50% !important;bottom:auto !important;margin-top:0 !important;-webkit-transform:translateY(-50%);transform:translateY(-50%);} /* Документы: все ряды сетки одной высоты (ряд с переносом заголовка был выше соседнего) */ .lp-sections .lp-docs-grid{grid-auto-rows:1fr;} /* Отступ над «Тарифы»: отзывы и тарифы — обе белые секции, 88+88=176px читалось дырой. Один шаг ритма (88) делится на двоих. */ .lp-sections .lp-sect.lp-reviews-sect{padding-bottom:44px !important;} .lp-sections .lp-sect:has(> .lp-price-head){padding-top:44px !important;} /* Сноска под таблицей сравнения — по ширине таблицы 1100 (правило прозы 900px перебивало) */ .lp-sections .lp-zone--matrix .lp-ctab-note{max-width:1100px !important;} /* mid-CTA перед «Продукт вживую» — язык макета: тинт-панель с радиусом 14 вместо серой плашки темы с красной полосой слева. Применяется и к mid-CTA Потока (унификация). */ .lp-sections .styled-block.lp-cta:not(.lp-fork){background:var(--lp-accent-soft,#fce7e7);border:1px solid color-mix(in srgb, var(--lp-accent,#dd130a) 25%, #fff);border-radius:var(--lp-r-xl,14px);padding:36px 40px;} @media (max-width:767px){ .lp-sections .styled-block.lp-cta:not(.lp-fork){padding:24px 20px;} .lp-sections .lp-sect.lp-reviews-sect{padding-bottom:24px !important;} .lp-sections .lp-sect:has(> .lp-price-head){padding-top:24px !important;} } /* ========================================================================== Карточки «Возможности» из HTML-поля LP_COPIED_HTML (2026-08-06) Разметка в поле (редактор-стойкая — только div/b/p, inline SVG и span визуальный редактор Битрикса вырезает):

Почта

Описание

Ключи иконок: mail, disk, calendar, contacts, tasks, tracker, shared, mailbox, archive (источник — массив $arLPIcons в catalog3/component_epilog.php; в CSS акцент зашит #dd130a, как у остальных .lp-mico). ========================================================================== */ .lp-feat-body p{display:block;margin:0;font-size:.9333em;line-height:1.5;color:var(--lp-muted,#646464);} .lp-feat-body p + p{margin-top:6px;} /* иконка-маска в кружке карточки: тинт-подложка сохраняется, рисунок 22px по центру (как SVG-версия) */ .lp-sections .lp-card.lp-feat .lp-copied-ico.lp-mico{width:44px;height:44px;margin:0;flex:none; background:var(--lp-accent-soft,color-mix(in srgb, var(--lp-accent) 10%, #fff)) var(--lp-ico) center/22px 22px no-repeat;} .lp-mico.i-mail{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5' fill='%232B2E35'/%3E%3Cpath d='M2.6 6.6 12 13.2l9.4-6.6V8L12 14.7 2.6 8z' fill='%23dd130a'/%3E%3C/svg%3E")} .lp-mico.i-disk{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M2 7.5A2.5 2.5 0 0 1 4.5 5h4.2l2 2.2H14V10H2z' fill='%232B2E35'/%3E%3Cpath d='M2 9h20v8.5A2.5 2.5 0 0 1 19.5 20h-15A2.5 2.5 0 0 1 2 17.5z' fill='%23dd130a'/%3E%3Cpath d='M9.5 7.2h10A2.5 2.5 0 0 1 22 9.7V10H9.5z' fill='%23dd130a'/%3E%3C/svg%3E")} .lp-mico.i-calendar{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5' fill='%232B2E35'/%3E%3Cpath d='M3 10V7.5A2.5 2.5 0 0 1 5.5 5h13A2.5 2.5 0 0 1 21 7.5V10z' fill='%23dd130a'/%3E%3Crect x='6.6' y='2.6' width='2.2' height='4.4' rx='1.1' fill='%232B2E35'/%3E%3Crect x='15.2' y='2.6' width='2.2' height='4.4' rx='1.1' fill='%232B2E35'/%3E%3Crect x='6.4' y='12.6' width='3.4' height='3' rx='1' fill='%23fff'/%3E%3Crect x='11.6' y='12.6' width='3.4' height='3' rx='1' fill='%23fff' opacity='.55'/%3E%3C/svg%3E")} .lp-mico.i-contacts{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Ccircle cx='16.4' cy='8.6' r='3.1' fill='%232B2E35'/%3E%3Cpath d='M11.4 19.6c.7-3 3-4.7 5.9-4.7 2.4 0 4.4 1.1 5.4 3.2.4.8-.2 1.5-1 1.5z' fill='%232B2E35'/%3E%3Ccircle cx='9' cy='7.9' r='3.9' fill='%23dd130a'/%3E%3Cpath d='M1.6 19.3c.9-3.6 3.7-5.6 7.4-5.6s6.5 2 7.4 5.6c.2.7-.3 1.3-1 1.3H2.6c-.7 0-1.2-.6-1-1.3' fill='%23dd130a'/%3E%3C/svg%3E")} .lp-mico.i-tasks{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='3.6' y='3.4' width='16.8' height='17.2' rx='3' fill='%232B2E35'/%3E%3Cpath d='M8 12.3l2.7 2.7 5.3-5.6' stroke='%23dd130a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .lp-mico.i-tracker{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='3.2' y='11.4' width='4.4' height='8.8' rx='1.4' fill='%232B2E35'/%3E%3Crect x='9.8' y='5.6' width='4.4' height='14.6' rx='1.4' fill='%23dd130a'/%3E%3Crect x='16.4' y='8.8' width='4.4' height='11.4' rx='1.4' fill='%232B2E35'/%3E%3C/svg%3E")} .lp-mico.i-shared{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M4.4 4.6h3.9l1.7 1.9h6.6a2.2 2.2 0 0 1 2.2 2.2v1.1H4.4z' fill='%232B2E35'/%3E%3Crect x='4.4' y='7.6' width='14.4' height='4' rx='1.6' fill='%232B2E35'/%3E%3Cpath d='M1.8 12.1a2 2 0 0 1 2-2h4l1.7 1.9h10.7a2 2 0 0 1 2 2v5.4a2.2 2.2 0 0 1-2.2 2.2H4a2.2 2.2 0 0 1-2.2-2.2z' fill='%23dd130a'/%3E%3C/svg%3E")} .lp-mico.i-mailbox{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M2.4 11.2A5.2 5.2 0 0 1 7.6 6h9.2a5.2 5.2 0 0 1 5.2 5.2v5.4a1.6 1.6 0 0 1-1.6 1.6H4a1.6 1.6 0 0 1-1.6-1.6z' fill='%23dd130a'/%3E%3Crect x='5.2' y='10.4' width='5.6' height='2.2' rx='1.1' fill='%23fff'/%3E%3Crect x='16.2' y='18.2' width='2.2' height='3.4' rx='1' fill='%232B2E35'/%3E%3Cpath d='M17.6 3.2h4.2v3.4h-4.2z' fill='%232B2E35'/%3E%3Crect x='16.6' y='2.6' width='1.8' height='6.2' rx='.9' fill='%232B2E35'/%3E%3C/svg%3E")} .lp-mico.i-archive{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='2' y='3.8' width='20' height='5' rx='1.8' fill='%23dd130a'/%3E%3Cpath d='M3.6 9.6h16.8v8.6a2.4 2.4 0 0 1-2.4 2.4H6a2.4 2.4 0 0 1-2.4-2.4z' fill='%232B2E35'/%3E%3Crect x='9' y='12.6' width='6' height='2.2' rx='1.1' fill='%23fff'/%3E%3C/svg%3E")} /* Замечание заказчика (2026-08-06): строка цифр под hero — «распределить равномерно, содержимое отцентрировать, ширина как у остальных блоков (как на макете В1: .stat{text-align:center}, контейнер тот же, что у секций)». ⚠️ Ширина: контент секций ЛП = min(1700, vw − 64) — два уровня по 16px (maxwidth-theme + колонка .detail_left_block), а .lp-stats лежит в баннерной части, где второго уровня нет (было vw − 32, т.е. на окнах уже ~1730px полоса шла на 16px шире контента). Поэтому у .maxwidth-theme внутри .lp-stats ограничение снимается, а ширину задаёт сама строка: width:min(1700px, 100% − 64px) по центру — совпадает с контентом секций на ЛЮБОЙ ширине (проверено 2560/1920/1440/1024/390). */ .lp-stats .maxwidth-theme{max-width:none;padding:0;} .lp-stats-row{width:min(1700px, calc(100% - 64px));margin-left:auto;margin-right:auto;} .lp-stat{text-align:center;} /* Тем же приёмом — полоса рисков «Зачем это нужно»: она тоже лежит в баннерной части (сетка vw − 32), из-за чего её содержимое шло на 16px левее контента секций (и, после выравнивания строки цифр, левее самих цифр). Теперь заголовок и карточки рисков — по той же вертикали, что весь контент ЛП. Фон-полоса остаётся full-bleed (он на .lp-problem, не на сетке). */ .lp-problem .maxwidth-theme{max-width:none;padding-left:0;padding-right:0;} .lp-problem-grid{width:min(1700px, calc(100% - 64px));margin-left:auto;margin-right:auto;} /* --- 2026-08-06: строки характеристик со ЗНАЧЕНИЕМ читаются «название → значение». Правило выше выносит влево ЛЮБОЙ .value, из-за чего текстовые значения вставали перед названием («5 Активных потоков»). Галочку и крест по-прежнему выносим влево. --- */ .lp-tarifs-v1 .item-views.tarifs .item .properties .property .value:not(.yes):not(.no){order:3;margin-left:auto;flex:0 1 auto;min-width:0;text-align:right;font-weight:bold;color:var(--lp-fg,#333);} .lp-tarifs-v1 .item-views.tarifs .item.whit .properties .property .value:not(.yes):not(.no){color:#fff;} /* выравниваем название по строкам с галочкой (иконка 11px + gap 8px) */ .lp-tarifs-v1 .item-views.tarifs .item .properties .property:has(> .value:not(.yes):not(.no)) .title-prop{padding-left:19px;} /* Ф3 (2026-08-06, Поток): пурпурный вариант duotone-иконок .lp-mico для продукта с фиолетовым акцентом (8b2fa8) — background-image data-URI не читает currentColor/CSS-переменные, поэтому акцентная часть рисунка перебивается точечно через модификатор .lp-accent-purple (доп. класс на том же элементе, что .lp-mico.i-*), тинт-подложка (--lp-accent-soft) остаётся общей. */ .lp-mico.i-mail.lp-accent-purple{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5' fill='%232B2E35'/%3E%3Cpath d='M2.6 6.6 12 13.2l9.4-6.6V8L12 14.7 2.6 8z' fill='%238b2fa8'/%3E%3C/svg%3E")} .lp-mico.i-disk.lp-accent-purple{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M2 7.5A2.5 2.5 0 0 1 4.5 5h4.2l2 2.2H14V10H2z' fill='%232B2E35'/%3E%3Cpath d='M2 9h20v8.5A2.5 2.5 0 0 1 19.5 20h-15A2.5 2.5 0 0 1 2 17.5z' fill='%238b2fa8'/%3E%3Cpath d='M9.5 7.2h10A2.5 2.5 0 0 1 22 9.7V10H9.5z' fill='%238b2fa8'/%3E%3C/svg%3E")} .lp-mico.i-calendar.lp-accent-purple{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5' fill='%232B2E35'/%3E%3Cpath d='M3 10V7.5A2.5 2.5 0 0 1 5.5 5h13A2.5 2.5 0 0 1 21 7.5V10z' fill='%238b2fa8'/%3E%3Crect x='6.6' y='2.6' width='2.2' height='4.4' rx='1.1' fill='%232B2E35'/%3E%3Crect x='15.2' y='2.6' width='2.2' height='4.4' rx='1.1' fill='%232B2E35'/%3E%3Crect x='6.4' y='12.6' width='3.4' height='3' rx='1' fill='%23fff'/%3E%3Crect x='11.6' y='12.6' width='3.4' height='3' rx='1' fill='%23fff' opacity='.55'/%3E%3C/svg%3E")} .lp-mico.i-tasks.lp-accent-purple{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='3.6' y='3.4' width='16.8' height='17.2' rx='3' fill='%232B2E35'/%3E%3Cpath d='M8 12.3l2.7 2.7 5.3-5.6' stroke='%238b2fa8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .lp-mico.i-tracker.lp-accent-purple{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='3.2' y='11.4' width='4.4' height='8.8' rx='1.4' fill='%232B2E35'/%3E%3Crect x='9.8' y='5.6' width='4.4' height='14.6' rx='1.4' fill='%238b2fa8'/%3E%3Crect x='16.4' y='8.8' width='4.4' height='11.4' rx='1.4' fill='%232B2E35'/%3E%3C/svg%3E")} .lp-mico.i-shared.lp-accent-purple{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M4.4 4.6h3.9l1.7 1.9h6.6a2.2 2.2 0 0 1 2.2 2.2v1.1H4.4z' fill='%232B2E35'/%3E%3Crect x='4.4' y='7.6' width='14.4' height='4' rx='1.6' fill='%232B2E35'/%3E%3Cpath d='M1.8 12.1a2 2 0 0 1 2-2h4l1.7 1.9h10.7a2 2 0 0 1 2 2v5.4a2.2 2.2 0 0 1-2.2 2.2H4a2.2 2.2 0 0 1-2.2-2.2z' fill='%238b2fa8'/%3E%3C/svg%3E")} .lp-mico.i-mailbox.lp-accent-purple{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M2.4 11.2A5.2 5.2 0 0 1 7.6 6h9.2a5.2 5.2 0 0 1 5.2 5.2v5.4a1.6 1.6 0 0 1-1.6 1.6H4a1.6 1.6 0 0 1-1.6-1.6z' fill='%238b2fa8'/%3E%3Crect x='5.2' y='10.4' width='5.6' height='2.2' rx='1.1' fill='%23fff'/%3E%3Crect x='16.2' y='18.2' width='2.2' height='3.4' rx='1' fill='%232B2E35'/%3E%3Cpath d='M17.6 3.2h4.2v3.4h-4.2z' fill='%232B2E35'/%3E%3Crect x='16.6' y='2.6' width='1.8' height='6.2' rx='.9' fill='%232B2E35'/%3E%3C/svg%3E")} .lp-mico.i-key.lp-accent-purple{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Ccircle cx='8.2' cy='8.4' r='5.4' fill='%238b2fa8'/%3E%3Ccircle cx='8.2' cy='8.4' r='1.9' fill='%23fff'/%3E%3Cpath d='M11.6 11.8l8 8' stroke='%232B2E35' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M17.2 17.4l-2 2M19.6 19.8l-1.6 1.6' stroke='%232B2E35' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")} /* Ф4 (2026-08-06, Поток): свой холст схемы (1560x440 / 620x1154) отличается от пропорций Бэкапа (1560x579 / 620x1400) — модификатор .lp-scheme--potok переопределяет aspect-ratio, базовые правила .lp-scheme (фон/паддинг/радиус/переключение wide<->narrow) общие. */ .lp-scheme--potok .lp-scheme-wide{aspect-ratio:1560 / 440;} .lp-scheme--potok .lp-scheme-narrow{aspect-ratio:620 / 1154;} /* ============================================================================ Крошки в hero ЛП — одинаковая высота на всех ЛП (замечание заказчика 2026-08-07) ---------------------------------------------------------------------------- ⚠️ Причина расхождения (Бэкап 28 px от верха баннера, Поток 58–71 px): тема центрирует колонки баннера — `.banners-content .maxwidth-theme{display:flex; align-items:center}`, — а наш `min-height:530px` (фикс воздуха под картинкой, 2026-08-07) держит баннер выше короткого контента. У ЛП с коротким hero (у Потока нет клина `LP_HERO_PRICE_NOTE` и лид на строку короче) текстовая колонка оказывалась ниже центра, а вместе с ней съезжали крошки, бейдж и H1. Растягиваем ТОЛЬКО текстовую колонку: её контент начинается от верха с `padding-top:28px` (правило выше), поэтому крошки/бейдж/H1 встают ровно там, где у Бэкапа (28/71/127 px). Колонку картинки НЕ трогаем — она остаётся центрированной, воздух над/под ней (15 px) сохраняется. Разница высоты контента уходит в воздух под текстом, а не в сдвиг навигации. Скоуп ≥768: ниже тема прячет десктопную колонку и показывает планшетную копию `.tablet_text` (`responsive.css`, `@media(min-width:768px)`), где `min-height:0` и крошки уже прижаты к верху. ============================================================================ */ @media(min-width:768px){ .banners-content.lp-banner .col-md-7.text{align-self:stretch} } /* ============================================================================ ФИКС (2026-08-07): кнопки hero на разной высоте у Бэкапа и Потока — на широких окнах (banner max-width 1920px, см. «Ширины ЛП» выше) колонка текста растёт с 813 до 992px, и подзаголовок (.intro-text) укладывается в МЕНЬШЕЕ число строк у продукта с более коротким текстом (Поток: 2 строки вместо 3 у Бэкапа) — разница в 1 строку (25px = 5em/3) сдвигала клин и кнопки CTA вверх. Фикс — зафиксировать высоту подзаголовка снизу (min-height = 3 строки при базовых 15px/25px темы), чтобы короткий текст не сокращал высоту блока и не тянул кнопки вверх. На тех ширинах, где текст и так укладывается в 3 строки (было раньше, узкие окна) — min-height совпадает с фактической высотой, изменений нет. Планшетную копию (.tablet_text) не трогаем — там уже другая раскладка и другой line-height (1.5), фикс только для десктопной колонки. ============================================================================ */ .banners-content.lp-banner .col-md-7.text .intro-text{min-height:5em} /* ═══ Видео «Продукт вживую» (2026-08-10, макет В1, секция #media) ═══ Секция видео и секция скриншотов склеены в ОДНУ paper-полосу с ОДНОЙ шапкой: шапку печатает блок видео (эпилог, флаг $bLPMediaHeadDone), галерея получает класс .lp-gal--joined и её верхний воздух снимается — иначе на странице два заголовка подряд и двойной воздух 88+88 между ними. Плеер штатный (video.js модуля ui) — здесь только «шкурка» макета. */ .lp-sections .lp-video-sect{background:var(--lp-zone,#F6F6F4);box-shadow:0 0 0 100vmax var(--lp-zone,#F6F6F4);clip-path:inset(0 calc(-1 * min(50vw - 50%, (1920px - 100%) / 2)));} .lp-sections .lp-video-sect--joined{padding-bottom:32px !important;} .lp-sections .galerys-block.lp-gal--joined{padding-top:0 !important;} .lp-sections .lp-video-row{display:grid;gap:24px;max-width:1095px;margin-left:auto;margin-right:auto;} .lp-sections .lp-video-row--multi{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;} .lp-sections .lp-video-main{position:relative;overflow:hidden;border:1px solid var(--lp-line,#E8E8E4);border-radius:var(--lp-r-xl,14px);background:var(--lp-zone-dark,#16181D);} /* ⚠️ fluid-плеер video.js держит кадр 16:9 сам (padding-top), ширину задаём мы. Без fluid плеер брал натуральные 1920×1080 и растягивал блок на 1080px. */ .lp-sections .lp-video-main .video-js{width:100% !important;max-width:100%;background:transparent;} /* iframe-вариант (свойство VIDEO_IFRAME) — кадр 16:9 держим сами */ .lp-sections .lp-video-main--embed{aspect-ratio:16 / 9;} .lp-sections .lp-video-main--embed iframe{display:block;width:100%;height:100%;border:0;} /* плашка-метка макета (.video-tag): тип ролика и длительность, из LP_VIDEO_TAG */ .lp-sections .lp-video-tag{position:absolute;right:16px;bottom:16px;z-index:2;transition:opacity .25s ease;padding:6px 12px;border-radius:var(--lp-r-sm,6px);background:rgba(22,24,29,.85);color:#fff;font-size:.8em;font-weight:700;line-height:1.4;pointer-events:none;} /* при наведении внизу выезжает панель контролов — метку убираем */ .lp-sections .lp-video-main:hover .lp-video-tag, .lp-sections .lp-video-main:focus-within .lp-video-tag, .lp-sections .lp-video-main .vjs-has-started ~ .lp-video-tag{opacity:0;} /* подпись — тем же языком, что подписи кадров галереи в этой же секции */ .lp-sections .lp-video-cap{margin:12px 0 0;color:var(--lp-muted,#646464);font-size:.8667em;line-height:1.4;text-align:center;} /* Кнопка play — акцентный круг макета (.video-play span) вместо «скругления» video.js. Специфичность 0,4,0 перебивает .video-js .vjs-big-play-button (0,2,0); ⚠️ font-size не задаём — внутри плеера база 10px (video.js), em считается от неё. */ .lp-sections .lp-video-main .video-js .vjs-big-play-button{top:50%;left:50%;width:84px;height:84px;margin:0;padding:0;border:0;border-radius:50%;background:var(--lp-accent,#dd130a);box-shadow:0 16px 40px rgba(0,0,0,.3);color:#fff;line-height:84px;transform:translate(-50%,-50%);transition:background-color .25s ease;} .lp-sections .lp-video-main .video-js:hover .vjs-big-play-button, .lp-sections .lp-video-main .video-js .vjs-big-play-button:focus{background:var(--lp-accent-ink,#a60e08);} .lp-sections .lp-video-main .video-js .vjs-big-play-button:before{position:absolute;top:50%;left:50%;width:32px;height:32px;margin:0;background-color:#fff;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform:translate(-45%,-50%);} .lp-sections .lp-video-main .video-js .vjs-big-play-button .vjs-icon-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;} .lp-sections .lp-video-main .video-js .vjs-big-play-button .vjs-icon-placeholder:before{content:"";position:absolute;top:calc(50% - 14px);left:calc(50% - 9px);width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:22px solid #fff;} /* акцент в контролах плеера — как в макете (полосы прогресса и громкости) */ .lp-sections .lp-video-main .video-js .vjs-play-progress, .lp-sections .lp-video-main .video-js .vjs-volume-level{background-color:var(--lp-accent,#dd130a);} @media (max-width:1023px){ .lp-sections .lp-video-sect--joined{padding-bottom:24px !important;} .lp-sections .lp-video-row{margin-left:16px;margin-right:16px;} } @media (max-width:767px){ .lp-sections .lp-video-row{gap:16px;} .lp-sections .lp-video-row--multi{grid-template-columns:1fr;} .lp-sections .lp-video-main{border-radius:var(--lp-r-lg,12px);} .lp-sections .lp-video-tag{right:8px;bottom:8px;padding:4px 8px;font-size:.7333em;} .lp-sections .lp-video-main .video-js .vjs-big-play-button{width:56px;height:56px;line-height:56px;box-shadow:0 8px 24px rgba(0,0,0,.3);} .lp-sections .lp-video-main .video-js .vjs-big-play-button:before{width:22px;height:22px;} .lp-sections .lp-video-main .video-js .vjs-big-play-button .vjs-icon-placeholder:before{top:calc(50% - 10px);left:calc(50% - 6px);border-top-width:10px;border-bottom-width:10px;border-left-width:16px;} } /* ---- Липкое подменю ЛП — слой НИЖЕ фиксированной шапки сайта (2026-08-10) ---- Тема даёт #headerfixed.fixed { position:fixed; z-index:130 } — это стекинг-контекст, поэтому выпадающие меню шапки (ul.dropdown-menu, z-index:1000) ограничены слоем 130 и при z-index:900 у .lp-subnav раскрывались ПОЗАДИ липкого подменю продукта. 129 = ниже шапки и её меню, но выше .fly_forms (121), header (123) и всего контента (подменю позиционируется под шапкой, геометрически они не пересекаются). */ .lp-subnav{z-index:129} /* ---- Education (2026-08-11): цена в hero ЛП не выводится ---- Порядок страницы — «сначала аргументация, потом цена» (решение по макету В1): в hero Бэкапа цены нет, а у Education заполнено штатное свойство PRICE, и тема печатает его в баннере как .lp-banner-price. Само свойство оставлено намеренно — оно нужно на плитке продукта в листингах /solutions/ и /solutions/backup/. Скоуп — только баннер ЛП; у Бэкапа и Потока PRICE пуст, поэтому правило для них холостое. */ .banners-content.lp-banner .lp-banner-price{display:none} /* ---- Education (2026-08-11): ценовой блок из ДВУХ тарифов центрируется ---- Тема раскладывает карточки флоатами слева (ul.slides с inline width:400%), поэтому при двух тарифах справа оставалась пустая треть строки. Селектор «ровно два .item» — у Бэкапа их три, у Потока три, правило для них не матчится. Слайдер при этом обездвижен (margin-left перебит), но на ≥992 он и не листает: обе карточки видны сразу. Мобильный стек (E-4) ниже 992 не затронут. */ @media (min-width:992px){ .lp-tarifs-v1 .item-views.tarifs .slides:has(> li.item:first-child:nth-last-child(2)){display:flex !important;justify-content:center !important;width:100% !important;margin-left:0 !important;} .lp-tarifs-v1 .item-views.tarifs .slides:has(> li.item:first-child:nth-last-child(2)) > li.item{float:none !important;} .lp-tarifs-v1 .item-views.tarifs .slides:has(> li.item:first-child:nth-last-child(2)) > li.item:last-child{margin-right:0 !important;} } /* ================= Мигратор Т2Т (2026-08-11) ================= */ /* 4 новых duotone-ключа .lp-mico + изумрудные оверрайды .lp-accent-emerald. ⚠️ .lp-mico — background-image с ЗАШИТЫМ hex акцента: currentColor внутри data-URI не резолвится, поэтому на продукте с не-фирменным акцентом нужен оверрайд-класс (тот же приём, что .lp-accent-purple у Потока). Генератор — mig_icons.php. ⚠️ Изумрудные оверрайды удалены 2026-08-11: акцент Мигратора Т2Т переведён на фирменный по решению заказчика. Понадобится не-фирменный акцент — перегенерировать mig_icons.php. */ .lp-mico.i-chat{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M2.5 5.5A2.5 2.5 0 0 1 5 3h8.5A2.5 2.5 0 0 1 16 5.5v4A2.5 2.5 0 0 1 13.5 12H7.8L4 14.9V12h-1.5z' fill='%232B2E35'/%3E%3Cpath d='M9.5 13.5A2.5 2.5 0 0 1 12 11h7.5A2.5 2.5 0 0 1 22 13.5v4A2.5 2.5 0 0 1 19.5 20H18v2.9L14.2 20H12a2.5 2.5 0 0 1-2.5-2.5z' fill='%23dd130a'/%3E%3C/svg%3E")} .lp-mico.i-team{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Ccircle cx='5.4' cy='8.2' r='2.5' fill='%232B2E35'/%3E%3Cpath d='M.9 18.4c0-2.5 2-4.3 4.5-4.3s4.5 1.8 4.5 4.3v1.3H.9z' fill='%232B2E35'/%3E%3Ccircle cx='18.6' cy='8.2' r='2.5' fill='%232B2E35'/%3E%3Cpath d='M14.1 18.4c0-2.5 2-4.3 4.5-4.3s4.5 1.8 4.5 4.3v1.3h-9z' fill='%232B2E35'/%3E%3Ccircle cx='12' cy='6.6' r='3.2' fill='%23dd130a'/%3E%3Cpath d='M6.2 19.4c0-3.2 2.6-5.5 5.8-5.5s5.8 2.3 5.8 5.5v1.5H6.2z' fill='%23dd130a'/%3E%3C/svg%3E")} .lp-mico.i-merge{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M4.9 2.6a1.5 1.5 0 0 1 2.1.2l4.1 4.9v4.6L4.7 4.7a1.5 1.5 0 0 1 .2-2.1z' fill='%232B2E35'/%3E%3Cpath d='M19.1 2.6a1.5 1.5 0 0 0-2.1.2l-4.1 4.9v4.6l6.4-7.6a1.5 1.5 0 0 0-.2-2.1z' fill='%232B2E35'/%3E%3Cpath d='M10.5 10.5h3v6.2h3.1L12 22.2l-4.6-5.5h3.1z' fill='%23dd130a'/%3E%3C/svg%3E")} .lp-mico.i-split{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M4.9 21.4a1.5 1.5 0 0 0 2.1-.2l4.1-4.9v-4.6L4.7 19.3a1.5 1.5 0 0 0 .2 2.1z' fill='%232B2E35'/%3E%3Cpath d='M19.1 21.4a1.5 1.5 0 0 1-2.1-.2l-4.1-4.9v-4.6l6.4 7.6a1.5 1.5 0 0 1-.2 2.1z' fill='%232B2E35'/%3E%3Cpath d='M10.5 13.5h3V7.3h3.1L12 1.8 7.4 7.3h3.1z' fill='%23dd130a'/%3E%3C/svg%3E")} /* ============ /Мигратор Т2Т ============ */ /* Схема Мигратора — свой холст (у Бэкапа 1560x579, у Потока 1560x440) */ .lp-scheme--migrator .lp-scheme-wide{aspect-ratio:1560 / 440;} .lp-scheme--migrator .lp-scheme-narrow{aspect-ratio:620 / 1120;} /* Единый тариф — ОДНА карточка по центру (у Мигратора один тариф). Тема раскладывает карточки флоатами слева, иначе карточка прижата к краю. */ @media (min-width:992px){ .lp-tarifs-v1 .item-views.tarifs .slides:has(> li.item:first-child:last-child){display:flex !important;justify-content:center !important;width:100% !important;margin-left:0 !important;} .lp-tarifs-v1 .item-views.tarifs .slides:has(> li.item:first-child:last-child) > li.item{float:none !important;margin-right:0 !important;} } /* ============================================================================ 3CX Connector (2026-08-11): duotone-иконки телефонии для ЛП интеграции. Формат и палитра — как у иконок пакета mockfix (акцент зашит в data-URI, графит #2B2E35, белые вырезы). Базовые правила размеров — выше (.lp-sections .lp-mico / .lp-card.lp-feat .lp-copied-ico.lp-mico). ⚠️ Акцент внутри data-URI НЕ наследует --lp-accent: при переносе на продукт с другим акцентом дописать оверрайд, как .lp-accent-purple у Потока. ============================================================================ */ .lp-mico.i-plug{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M13.4 4.2h2.2v4.1h-2.2z' fill='%232B2E35'/%3E%3Cpath d='M18.4 4.2h2.2v4.1h-2.2z' fill='%232B2E35'/%3E%3Cpath d='M11.6 8.1h10.8v3.3a5.4 5.4 0 0 1-5.4 5.4 5.4 5.4 0 0 1-5.4-5.4z' fill='%232B2E35'/%3E%3Cpath d='M15.9 16.3h2.6v3.6a1.3 1.3 0 0 1-1.3 1.3 1.3 1.3 0 0 1-1.3-1.3z' fill='%232B2E35'/%3E%3Crect x='1.4' y='9.4' width='6.6' height='6.2' rx='2' fill='%23dd130a'/%3E%3Cpath d='M7.6 11.4h5.2v2.2H7.6z' fill='%23dd130a'/%3E%3Ccircle cx='15.4' cy='11.6' r='1.05' fill='%23fff'/%3E%3Ccircle cx='18.6' cy='11.6' r='1.05' fill='%23fff'/%3E%3C/svg%3E")} .lp-mico.i-market{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M6.6 3.2a1.15 1.15 0 0 1 1.6.3l2.1 3.1h-2.7L6.3 4.8a1.15 1.15 0 0 1 .3-1.6' fill='%23dd130a'/%3E%3Cpath d='M17.4 3.2a1.15 1.15 0 0 0-1.6.3l-2.1 3.1h2.7l1.3-1.8a1.15 1.15 0 0 0-.3-1.6' fill='%23dd130a'/%3E%3Cpath d='M2.4 7.6h19.2l-1.7 11.1a2.6 2.6 0 0 1-2.6 2.2H6.7a2.6 2.6 0 0 1-2.6-2.2z' fill='%232B2E35'/%3E%3Crect x='1.4' y='6.4' width='21.2' height='3.1' rx='1.4' fill='%23dd130a'/%3E%3Cpath d='M9 12.6v5M15 12.6v5' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")} .lp-mico.i-ru{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='2.6' y='2.4' width='2.2' height='19.2' rx='1.1' fill='%232B2E35'/%3E%3Cpath d='M6 4h15.4v4.4H6z' fill='%23fff' stroke='%232B2E35' stroke-width='1'/%3E%3Cpath d='M6 8.4h15.4v4.4H6z' fill='%232B2E35'/%3E%3Cpath d='M6 12.8h15.4v4.4H6z' fill='%23dd130a'/%3E%3C/svg%3E")} .lp-mico.i-callcard{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='2.2' y='4' width='19.6' height='16' rx='2.6' fill='%232B2E35'/%3E%3Crect x='2.2' y='4' width='19.6' height='4' rx='2.6' fill='%23dd130a'/%3E%3Crect x='2.2' y='6.6' width='19.6' height='1.4' fill='%23dd130a'/%3E%3Ccircle cx='8.2' cy='13' r='2.8' fill='%23fff'/%3E%3Cpath d='M13 11.4h6M13 15h4.2' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' opacity='.8'/%3E%3Cpath d='M9.5 14.3c-.5.5-1.9.2-3.4-.9-1.5-1.1-2.5-2.6-2.3-3.3l.9-1c.3-.3.8-.2 1.1.2l.8 1.2c.2.3.14.72-.14.94l-.36.3c.24.4.56.78.96 1.08l.32-.32c.24-.26.62-.3.94-.08l1.18.84c.4.28.48.76.2 1.04z' fill='%23dd130a'/%3E%3C/svg%3E")} .lp-mico.i-callout{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M4.2 3.6h4.1c.9 0 1.7.6 1.9 1.5l.8 3.3c.2.8-.1 1.6-.8 2l-1.7 1a12.6 12.6 0 0 0 4.6 4.6l1-1.7c.4-.7 1.2-1 2-.8l3.3.8c.9.2 1.5 1 1.5 1.9v4.1c0 1.1-.9 2-2 2C9.7 22.2 2 14.5 2 5.6c0-1.1.9-2 2.2-2' fill='%232B2E35'/%3E%3Cpath d='M14.6 3.4h6.2c.6 0 1 .4 1 1v6.2c0 .9-1.1 1.3-1.7.7l-1.9-1.9-3.4 3.4a1 1 0 0 1-1.4 0l-1-1a1 1 0 0 1 0-1.4l3.4-3.4-1.9-1.9c-.6-.6-.2-1.7.7-1.7' fill='%23dd130a'/%3E%3C/svg%3E")} .lp-mico.i-callnote{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Cpath d='M4 4.6A2.6 2.6 0 0 1 6.6 2h7.6l5.8 5.8v11.6A2.6 2.6 0 0 1 17.4 22H6.6A2.6 2.6 0 0 1 4 19.4z' fill='%232B2E35'/%3E%3Cpath d='M14.2 2l5.8 5.8h-5.8z' fill='%23dd130a' opacity='.85'/%3E%3Cpath d='M7.6 11h8.8M7.6 14.2h5.6' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='16.8' cy='17.4' r='4' fill='%23dd130a'/%3E%3Cpath d='M15 17.5l1.3 1.3 2.4-2.5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .lp-mico.i-lead{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Ccircle cx='10' cy='7.4' r='4.2' fill='%232B2E35'/%3E%3Cpath d='M2 20.4c.7-4 3.9-6.4 8-6.4s7.3 2.4 8 6.4c.14.8-.44 1.5-1.24 1.5H3.24c-.8 0-1.38-.7-1.24-1.5' fill='%232B2E35'/%3E%3Ccircle cx='18.4' cy='17.8' r='4.6' fill='%23dd130a'/%3E%3Cpath d='M18.4 15.4v4.8M16 17.8h4.8' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")} .lp-mico.i-route{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Ccircle cx='4.4' cy='12' r='2.8' fill='%232B2E35'/%3E%3Cpath d='M7.2 12h4.2c1.2 0 2-.7 2.4-1.6l.9-2.1' stroke='%232B2E35' stroke-width='1.9' fill='none' stroke-linecap='round'/%3E%3Cpath d='M7.2 12h4.2c1.2 0 2 .7 2.4 1.6l.9 2.1' stroke='%23dd130a' stroke-width='1.9' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='18.2' cy='6.4' r='2.6' fill='%232B2E35' opacity='.55'/%3E%3Ccircle cx='18.2' cy='17.6' r='3.2' fill='%23dd130a'/%3E%3Cpath d='M16.8 17.7l1 1 1.9-2' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .lp-mico.i-log{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='2.4' y='3.4' width='19.2' height='17.2' rx='2.8' fill='%232B2E35'/%3E%3Ccircle cx='7' cy='8.4' r='1.7' fill='%23dd130a'/%3E%3Ccircle cx='7' cy='13' r='1.7' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='7' cy='17.6' r='1.7' fill='%23fff' opacity='.55'/%3E%3Cpath d='M10.8 8.4h7.2' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M10.8 13h5.6' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M10.8 17.6h6.4' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E")} /* Схема 3CX: свои пропорции холста (1560×440 / 620×1000) — базовые правила .lp-scheme (фон/паддинг/радиус/переключение wide↔narrow) общие. */ .lp-scheme--3cx .lp-scheme-wide{aspect-ratio:1560 / 440;} .lp-scheme--3cx .lp-scheme-narrow{aspect-ratio:620 / 1000;} /* 3CX: карточка-путь может быть ссылкой (), а не jqm-span — выравнивание кнопки то же. */ .lp-sections .lp-fork-card a.lp-fork-btn{text-align:center;} /* «Требования»: лид под заголовком левой колонки .lp-secgrid (как .lp-sec-lead Ф6). */ .lp-sections .lp-secgrid-main > p.lp-sec-lead{margin:0;} /* ===== Единый тариф по макету В1 (шаблон news.list/tarif_single_lp, Мигратор Т2Т) ===== Слева тёмная панель «надзаголовок / цена / единица / кнопка», справа — что входит. Включается свойством LP_TARIF_TPL=tarif_single_lp; многотарифные ЛП рисует прежний tarif_linked_custom2 и этих правил не касаются. */ .lp-tsingle{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr; border:1px solid var(--lp-zone-dark,#16181D);border-radius:var(--lp-r-xl,14px);overflow:hidden;} .lp-tsingle-price{background:var(--lp-zone-dark,#16181D);color:#fff;padding:40px 36px; display:flex;flex-direction:column;justify-content:center;} .lp-tsingle-eyebrow{font-size:.8667em;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.66);margin-bottom:14px;} .lp-tsingle-amount{font-size:2.1333em;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#fff;} .lp-tsingle-unit{font-size:1em;color:rgba(255,255,255,.78);margin-top:6px;} .lp-sections .lp-tsingle-btn{margin-top:28px;display:block;width:100%;text-align:center;} .lp-tsingle-list{background:#fff;padding:40px 36px;display:flex;flex-direction:column;gap:12px;justify-content:center;} .lp-tsingle-feat{display:flex;gap:10px;align-items:flex-start;font-size:1em;line-height:1.45;color:var(--lp-fg,#333);} .lp-tsingle-feat b{font-weight:600;} .lp-tsingle-tick{flex:none;font-style:normal;font-weight:700;color:var(--lp-accent,#dd130a);line-height:1.45;} .lp-tsingle-tick:before{content:"\2713";} @media (max-width:767px){ .lp-tsingle{grid-template-columns:1fr;} .lp-tsingle-price,.lp-tsingle-list{padding:28px 24px;} } /* 3CX Connector (2026-08-11, доводка по реальным скриншотам приложения): иконки для карточек «Запись разговора», «Сопоставление сотрудников», «Уведомление в чат». Палитра и формат — как у иконок i-plug…i-log выше. Акцент зашит в data-URI: на продукте с другим акцентом нужен оверрайд. */ .lp-mico.i-rec{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Crect x='1.6' y='6.4' width='20.8' height='11.2' rx='3.4' fill='%232B2E35'/%3E%3Ccircle cx='7' cy='12' r='3.1' fill='%23dd130a'/%3E%3Cpath d='M12.4 9.6v4.8' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M15.2 8.2v7.6' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M18 10.4v3.2' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E")} .lp-mico.i-users{--lp-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' aria-hidden='true'%3E%3Ccircle cx='6' cy='6.2' r='3.2' fill='%232B2E35'/%3E%3Cpath d='M1.6 14.2c.5-2.7 2.3-4.3 4.4-4.3s3.9 1.6 4.4 4.3c.1.66-.36 1.24-1.02 1.24H2.62c-.66 0-1.12-.58-1.02-1.24' fill='%232B2E35'/%3E%3Ccircle cx='18' cy='6.2' r='3.2' fill='%232B2E35' opacity='.5'/%3E%3Cpath d='M13.6 14.2c.5-2.7 2.3-4.3 4.4-4.3s3.9 1.6 4.4 4.3c.1.66-.36 1.24-1.02 1.24h-6.76c-.66 0-1.12-.58-1.02-1.24' fill='%232B2E35' opacity='.5'/%3E%3Cpath d='M4.6 19.4h14.8' stroke='%23dd130a' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M7.2 17l-2.6 2.4 2.6 2.4M16.8 17l2.6 2.4-2.6 2.4' stroke='%23dd130a' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} /* ===== Ховер единого тарифа (Мигратор Т2Т) — как у карточек тарифов Бэкапа (2026-08-11) ===== На Бэкапе подъём карточки при наведении даёт ШТАТНЫЙ класс темы .shadow (template_styles.css:2952 — transition box-shadow .3s + :hover тень 0 5px 25px rgba(18,25,38,.1)); карточка там размечена как li.item.border.shadow. Тот же класс навешен на .lp-tsingle в шаблоне news.list/tarif_single_lp, поэтому тень и переход берутся из темы, своих значений не вводим. ВНИМАНИЕ: .shadow:hover гасит рамку (border-color:transparent, спец. 0,2,0). У Бэкапа рамка светлая и её потеря незаметна, у нас рамка тёмная и держит обе половины блока — возвращаем её правилом со спец. 0,3,0. ВНИМАНИЕ: кнопка реагирует на наведение НА БЛОК (у Бэкапа ховер карточки заливает кнопку акцентом); у нас она уже акцентная, поэтому подсветка — filter:brightness, та же идиома, что у кнопки основного тарифа Бэкапа. */ .lp-sections .lp-tsingle.shadow:hover{border-color:var(--lp-zone-dark,#16181D);} .lp-sections .lp-tsingle-btn{transition:filter .3s ease,background-color .3s ease;} .lp-sections .lp-tsingle.shadow:hover .lp-tsingle-btn{filter:brightness(1.08);} /* End */ /* /bitrix/templates/aspro-priority/components/bitrix/news/catalog/style.min.css?1783416950356 */ /* /bitrix/templates/aspro-priority/components/bitrix/news.detail/catalog3/style.css?1786436297227337 */