/* ============================================================================ Посадка «Управление продажами в медицине» — стили только этой страницы. Основа (палитра, кегли, кнопки, поля, подвал, адаптив) лежит в основа.css и не правится. Здесь — блоки по ДИЗАЙН_КАРТА.md. Своих цветов ноль: всё либо переменная основы, либо смесь переменных через color-mix. Своих кеглей для h1/h2/h3 нет. Своих теней и радиусов нет. Точки адаптива те же, что в основе: 1080, 760, 430×780. ========================================================================== */ :root { /* оттенки, собранные из палитры основы — своих кодов не заводим */ --крем: color-mix(in srgb, var(--золото) 15%, var(--белый)); --крем-2: color-mix(in srgb, var(--золото) 30%, var(--белый)); --золото-тень: color-mix(in srgb, var(--золото) 22%, transparent); --золото-нить: color-mix(in srgb, var(--золото) 45%, transparent); --золото-на-тёмном-фон: color-mix(in srgb, var(--золото) 12%, transparent); --тёмная-панель: linear-gradient(160deg, var(--синий-светлее), var(--синий-2) 55%, var(--синий-глубокий)); --бел-6: color-mix(in srgb, var(--белый) 6%, transparent); --бел-10: color-mix(in srgb, var(--белый) 10%, transparent); } /* ---------- Обход ошибки в основе: шрифт не доезжал до страницы ----------- В `основа.css` строка 118 — `body, button, input, textarea, select { font: inherit }` — стоит ПОСЛЕ правила `body` со строки 112. Сокращённое свойство `font` со значением `inherit` сбрасывает сразу всё семейство, кегль и межстрочное на унаследованные от , то есть на браузерные Times New Roman и line-height: normal. Проверено в браузере 03.09.2026 на этой сборке: у body и у h1 computed font-family был "Times New Roman", document.fonts показывал обе грани Manrope как unloaded. Основу править нельзя (закон 05, правило 33), поэтому те же самые значения основы ставлю на — body наследует их и получает Manrope. Своих значений здесь нет ни одного: стек, кегль и межстрочное переписаны из основы символ в символ. Чинить по-настоящему нужно в `03_ОСНОВА/основа.css`, убрав `body, ` из строки 118, — иначе каждая следующая посадка фабрики выйдет набранной Times New Roman. Записано в ПРОТОКОЛ_ВЁРСТКИ.md. */ html { font-family: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ---------- Общее для страницы ------------------------------------------- */ .узел { position: relative; } .мелко { font-size: 12px; line-height: 1.45; color: var(--приглушённый); } .секция--тёмная .мелко { color: var(--приглушённый-на-тёмном); } .добивка { margin-top: 30px; font-size: 18px; font-weight: 700; line-height: 1.4; max-width: 900px; } .секция--тёмная .добивка { color: var(--текст-на-тёмном); } .только-узкий { display: none; } /* значок линией в кремовом чипе */ .чип { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--радиус-поля); background: linear-gradient(160deg, var(--крем), var(--крем-2)); color: var(--золото-текст); } .чип svg { width: 22px; height: 22px; } .секция--тёмная .чип { background: var(--золото-на-тёмном-фон); color: var(--золото); } .чип--мал { width: 26px; height: 26px; border-radius: 999px; } .чип--мал svg { width: 16px; height: 16px; } /* золотая черта слева — фирменная деталь этой посадки */ .черта { border-left: 3px solid var(--золото); padding-left: 14px; } /* пилюля */ .пилюля { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; background: var(--крем); color: var(--чернила); } .секция--тёмная .пилюля { background: var(--бел-6); color: var(--текст-на-тёмном); } /* точка состояния */ .точка { width: 8px; height: 8px; border-radius: 999px; background: var(--успех); flex: 0 0 auto; } .секция--тёмная .точка { background: var(--успех-на-тёмном); } .точка--живая { animation: пульс 2.4s var(--плавность) infinite; } @keyframes пульс { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--успех) 55%, transparent); } 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--успех) 0%, transparent); } } /* панель — общий каркас живых панелей */ .панель { background: var(--белый); border: 1px solid var(--грань); border-radius: var(--радиус-панели); box-shadow: var(--тень); padding: 22px; } .секция--тёмная .панель { background: var(--тёмная-панель); border-color: var(--грань-на-тёмном); box-shadow: var(--тень-тёмная); } .панель__шапка { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--грань); font-size: 13px; font-weight: 800; } .секция--тёмная .панель__шапка { border-bottom-color: var(--грань-на-тёмном); } .панель__подпись { margin-top: 12px; font-size: 12px; color: var(--приглушённый); } .секция--тёмная .панель__подпись { color: var(--приглушённый-на-тёмном); } /* ---------- Шапка страницы ------------------------------------------------ */ .шапка { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--бумага) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--грань) 60%, transparent); } .шапка__ряд { min-height: var(--шапка); display: flex; align-items: center; justify-content: space-between; gap: 18px; } .знак { display: flex; align-items: center; gap: 12px; } .знак img { width: 38px; height: 38px; object-fit: contain; } .знак__имя { display: flex; flex-direction: column; line-height: 1.12; } .знак__имя b { font-size: 18px; font-weight: 800; letter-spacing: .02em; } .знак__имя span { font-size: 11px; font-weight: 500; color: var(--приглушённый); } .шапка .кнопка { width: auto; } /* ---------- Блок 1. Первый экран ----------------------------------------- */ .экран { position: relative; padding: 48px 0 64px; background: radial-gradient(820px 430px at 92% -10%, var(--золото-тень), transparent 58%), var(--белый); } .экран__сетка { display: grid; grid-template-columns: 52fr 48fr; gap: 46px; align-items: start; } .экран__текст { display: flex; flex-direction: column; align-items: flex-start; } .экран__шапка-текста { min-height: 2.4em; } /* два ряда надзаголовка — место занято заранее */ .экран__текст h1 { margin-top: 10px; min-height: 3.2em; } .экран__текст .дескриптор { margin-top: 16px; } .гарантия { margin-top: 20px; display: block; max-width: 620px; padding: 11px 16px 11px 14px; border-left: 3px solid var(--золото); border-radius: 0 var(--радиус-поля) var(--радиус-поля) 0; background: var(--крем); font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--чернила); } .экран__кнопка { margin-top: 24px; } .экран__визуал { position: relative; padding-bottom: 150px; } /* Подпись панели — по правому краю: карточка «Утренняя сводка» лежит на нижнем левом углу панели и подпись слева перекрывала бы. */ .экран__визуал .панель__подпись { text-align: right; } .день__лента { display: grid; gap: 0; position: relative; padding-left: 26px; } .день__лента::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 2px; background: var(--золото-нить); transform-origin: top; transform: scaleY(var(--нить, 1)); } .день__шаг { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 9px 0; } .день__шаг::before { content: ''; position: absolute; left: -25px; top: 16px; width: 10px; height: 10px; border-radius: 999px; background: var(--белый); border: 2px solid var(--золото); } .день__шаг--сейчас::before { width: 14px; height: 14px; left: -27px; top: 14px; background: var(--золото); outline: 5px solid var(--золото-тень); } .день__время { font-size: 13px; font-weight: 800; color: var(--золото-текст); flex: 0 0 46px; } .день__дело { font-size: 15px; font-weight: 600; } .день__итоги { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--грань); } .день__плитка { background: var(--бумага); border-radius: var(--радиус-поля); padding: 10px 12px; } .день__плитка b { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; } .день__плитка span { font-size: 11px; color: var(--приглушённый); } .сводка { position: absolute; left: -24px; bottom: 0; width: 268px; transform: rotate(-2deg); background: var(--белый); border: 1px solid var(--грань); border-radius: var(--радиус-карточки); box-shadow: var(--тень-малая); padding: 14px 16px; } .сводка b { display: block; font-size: 12px; font-weight: 800; margin-bottom: 8px; } .сводка li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; line-height: 1.35; } .сводка li:last-child { color: var(--золото-текст); font-weight: 700; } /* ---------- Блок 2. Форма ------------------------------------------------- */ .форма-карта { background: var(--белый); border: 1px solid var(--грань); border-left: 3px solid var(--золото); border-radius: var(--радиус-панели); box-shadow: var(--тень); /* Нижнее поле карточки равно верхнему: подписи под кнопкой прижимались к нижнему краю (34 px против 67 сверху на 1280). */ padding: 34px 34px 34px; } .форма-карта .шапка-блока { margin-bottom: 26px; } .форма-подписи { margin-top: 14px; display: grid; gap: 5px; } /* ---------- Блок 3. Боли -------------------------------------------------- */ .путь { background: linear-gradient(160deg, var(--крем), var(--белый) 62%); border: 1px solid var(--грань); border-radius: var(--радиус-панели); box-shadow: var(--тень-малая); padding: 26px 24px 20px; } /* Лента ступеней. На большом экране пять остановок стоят в строку и помещаются целиком: колонки пилюль — по содержимому, перемычки тянутся тем, что осталось. Раньше здесь стояли фиксированные 124 + 120 px и лента была шире контейнера — последняя пилюля «повторный визит» обрезалась правым краем даже на 1280 px. Ниже 1080 px пять остановок в строку не помещаются никак: там лента разворачивается в вертикальную лестницу (медиазапрос в конце файла) — видны все пять ступеней, ничего не режется и листать вбок не надо. */ .путь__прокрутка { padding-bottom: 6px; } .путь__лента { display: grid; grid-template-columns: repeat(4, max-content minmax(72px, 1fr)) max-content; align-items: start; gap: 0; } .путь__остановка { display: grid; justify-items: center; gap: 8px; text-align: center; } .путь__пилюля { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--белый); border: 1px solid var(--грань); font-size: 13px; font-weight: 800; white-space: nowrap; } .путь__пилюля svg { width: 16px; height: 16px; color: var(--золото-текст); } .путь__мост { position: relative; padding: 0 6px; align-self: start; } .путь__линия { position: relative; height: 2px; margin: 19px 0 10px; background: var(--золото-нить); overflow: hidden; } .путь__линия::after { content: ''; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 999px; background: var(--золото); animation: бег 3.2s linear infinite; } @keyframes бег { from { left: -10px; } to { left: 100%; } } /* та же бегущая точка, но по вертикальной лестнице (ниже 1080 px) */ @keyframes бег-вниз { from { top: -10px; } to { top: 100%; } } .путь__причина { font-size: 11px; line-height: 1.35; color: var(--приглушённый); border-top: 2px solid var(--тревога); padding-top: 6px; text-align: center; } .путь__низ { margin-top: 16px; font-size: 12px; color: var(--приглушённый); } .боли { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; } .боль { background: var(--белый); border: 1px solid var(--грань); border-radius: var(--радиус-карточки); box-shadow: var(--тень-малая); padding: 20px 18px; } /* Зона заголовка одной высоты во всех четырёх карточках: у второй заголовок в три строки, у остальных в две, и золотые значки вставали на разной высоте — разнобой видно сразу, значки цветные. Значок прижат к верху, место под заголовок отведено под три строки, поэтому текст во всех карточках начинается с одной линии. */ .боль__верх { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .боль h3 { font-size: 17px; line-height: 1.25; min-height: 3.75em; } .боль p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--приглушённый); } .боли--ещё { margin-top: 16px; } .ещё-кнопка { margin-top: 18px; } [hidden] { display: none !important; } /* ---------- Блок 4. Решения ---------------------------------------------- */ /* Шапка блока стоит во всю ширину над колонками, а не внутри левой: в узкой колонке заголовок разворачивался на пять строк и правая колонка кончалась на 493 px раньше левой — снизу справа зияла дыра. Композиция карты («панель слева, разворот справа, тёмный фон») сохранена. */ .решения { display: grid; grid-template-columns: 40fr 60fr; gap: 44px; align-items: stretch; } .решения > .панель { align-self: start; } .разворот { display: grid; align-content: space-between; } .пара { padding: 15px 0; border-bottom: 1px solid var(--грань-на-тёмном); } .пара:first-child { padding-top: 0; } .пара:last-child { border-bottom: 0; padding-bottom: 0; } .пара__было { border-left: 3px solid var(--грань-на-тёмном); padding-left: 14px; font-size: 14px; color: var(--приглушённый-на-тёмном); } .пара__стало { margin-top: 8px; border-left: 3px solid var(--золото); padding-left: 14px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--текст-на-тёмном); } .недели__шаг { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 12px 0; } .недели__шаг + .недели__шаг { border-top: 1px solid var(--грань-на-тёмном); } .недели__точка { width: 12px; height: 12px; margin-top: 6px; border-radius: 999px; background: var(--золото); outline: 4px solid var(--золото-на-тёмном-фон); } .недели__срок { font-size: 13px; font-weight: 800; color: var(--золото); } .недели__дело { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--текст-на-тёмном); } .метки { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .полоски { display: flex; align-items: flex-end; gap: 4px; height: 18px; margin-top: 8px; } .полоски i { display: block; width: 22px; background: var(--золото); border-radius: 999px; opacity: .8; } /* ---------- Блок 5. Выгода ----------------------------------------------- */ .выгоды { columns: 2; column-gap: 40px; margin-bottom: 30px; } .выгода { break-inside: avoid; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 9px 0; } .выгода__номер { font-size: 16px; font-weight: 800; color: var(--золото-текст); } .выгода p { font-size: 15px; line-height: 1.5; color: var(--приглушённый); } .выгода p b { color: var(--чернила); font-weight: 800; } .лист__таблица { width: 100%; border-collapse: collapse; } .лист__таблица th, .лист__таблица td { padding: 11px 8px; text-align: right; font-size: 15px; } .лист__таблица th:first-child, .лист__таблица td:first-child { text-align: left; font-weight: 700; } .лист__таблица thead th { font-size: 11px; font-weight: 700; color: var(--приглушённый); text-transform: none; } .лист__таблица tbody tr + tr td { border-top: 1px solid var(--грань); } .лист__было { color: var(--приглушённый); } .дельта { display: inline-block; min-width: 54px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; text-align: center; } .дельта--рост { background: color-mix(in srgb, var(--успех) 14%, transparent); color: var(--успех); } .дельта--спад { background: color-mix(in srgb, var(--тревога) 14%, transparent); color: var(--тревога); } .исправили { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--грань); } .исправили b { font-size: 13px; font-weight: 800; } .исправили li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 14px; } .исправили svg { width: 16px; height: 16px; margin-top: 4px; color: var(--золото-текст); flex: 0 0 auto; } /* ---------- Блок 6. Продукт ---------------------------------------------- */ .продукт { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .часть { display: flex; flex-direction: column; background: var(--белый); border: 1px solid var(--грань); border-radius: var(--радиус-карточки); box-shadow: var(--тень-малая); padding: 24px 22px; } .часть h3 { margin: 14px 0 10px; } .часть > p { font-size: 15px; line-height: 1.5; color: var(--приглушённый); margin-bottom: 16px; } /* Панель прижата к низу карточки: в ряду тексты разной длины, и у короткой карточки под панелью оставалось 110–140 px пустоты — ряд читался недобранным. Так панели соседних карточек стоят на одной линии, а отступ от текста держит margin-bottom абзаца выше. */ .часть__панель { margin-top: auto; padding: 14px; border-radius: var(--радиус-поля); background: var(--бумага); border: 1px solid var(--грань); } .часть--тёмная { color: var(--текст-на-тёмном); background: var(--тёмная-панель); border-color: var(--грань-на-тёмном); box-shadow: var(--тень-тёмная); } .часть--тёмная > p { color: var(--приглушённый-на-тёмном); } .часть--тёмная .чип { background: var(--золото-на-тёмном-фон); color: var(--золото); } .часть--тёмная .часть__панель { background: var(--бел-6); border-color: var(--грань-на-тёмном); } .часть--тёмная .пилюля { background: var(--бел-10); color: var(--текст-на-тёмном); } .тройка { display: flex; flex-wrap: wrap; gap: 8px; } .деления { display: flex; gap: 4px; margin-top: 10px; } .деления i { flex: 1; height: 6px; border-radius: 999px; background: var(--золото); opacity: .35; } .деления i.есть { opacity: 1; } .цепь { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 700; } /* Стрелка и звено переносятся одним куском: раньше на планшете стрелка оставалась в конце первой строки и указывала в край карточки. */ .цепь__шаг { display: inline-flex; align-items: center; gap: 8px; } .цепь svg { width: 14px; height: 14px; color: var(--золото-текст); flex: 0 0 auto; } .цепь .звено { padding: 6px 11px; border-radius: 999px; background: var(--белый); border: 1px solid var(--грань); } .цепь .звено--ярко { background: var(--крем-2); border-color: var(--золото); } .статус { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; } .статус + .статус { border-top: 1px solid var(--грань); } .часть--тёмная .статус + .статус { border-top-color: var(--грань-на-тёмном); } .статус span:last-child { margin-left: auto; font-size: 11px; color: var(--приглушённый); } .часть--тёмная .статус span:last-child { color: var(--приглушённый-на-тёмном); } .нить-истории { position: relative; margin: 14px 0 10px; height: 2px; background: var(--золото-нить); } .нить-истории::before, .нить-истории::after { content: ''; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 999px; background: var(--золото); } .нить-истории::before { left: 0; } .нить-истории::after { right: 0; } /* ---------- Блок 7. Кто мы и доказательства ------------------------------ */ .кто-мы { max-width: 940px; margin-bottom: 34px; } .кто-мы p { font-size: 17px; line-height: 1.6; } .кто-мы b { color: var(--золото-текст); font-weight: 800; } .кто-мы p + p { margin-top: 10px; font-size: 15px; color: var(--приглушённый); } .доказательство { display: grid; grid-template-columns: 44fr 56fr; gap: 44px; align-items: center; } .документ { background: var(--белый); border: 1px solid var(--грань); border-radius: var(--радиус-карточки); box-shadow: var(--тень); padding: 14px; transform: rotate(-1deg); } .документ img { border-radius: var(--радиус-поля); width: 100%; } .документ__низ { padding: 14px 6px 4px; } .документ__низ p { font-size: 13px; color: var(--приглушённый); line-height: 1.45; } .документ__открыть { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--золото-текст); background: none; border: 0; padding: 0; text-align: left; text-decoration: underline; } .разбор__было { font-size: 15px; line-height: 1.55; color: var(--приглушённый); } .разбор h3 { margin: 22px 0 10px; } .разбор li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 15px; } .разбор li svg { width: 17px; height: 17px; margin-top: 4px; color: var(--золото-текст); flex: 0 0 auto; } .итог-кейса { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--грань); } .итог-кейса b { display: block; font-size: 60px; line-height: 1; font-weight: 800; color: var(--золото-текст); letter-spacing: -.04em; } .итог-кейса span { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; } /* окно с письмом */ .окно { position: fixed; inset: 0; z-index: 200; display: none; padding: 24px; overflow: auto; background: color-mix(in srgb, var(--синий-глубокий) 78%, transparent); } .окно[open] { display: block; } .окно__лист { max-width: 880px; margin: 0 auto; border-radius: var(--радиус-карточки); overflow: hidden; box-shadow: var(--тень-тёмная); } .окно__закрыть { position: sticky; top: 0; margin-left: auto; display: block; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--грань-на-тёмном); background: var(--бел-10); color: var(--белый); font-size: 20px; font-weight: 800; line-height: 1; } /* ---------- Блок 8. Форма и призыв --------------------------------------- */ .секция--узкая { padding: 44px 0; } .призыв { display: grid; grid-template-columns: 58fr 42fr; gap: 40px; align-items: center; } .призыв__левое { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; } .сорок { text-align: center; line-height: 1; } .сорок b { display: block; font-size: 52px; font-weight: 800; color: var(--золото); letter-spacing: -.04em; } .сорок span { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--приглушённый-на-тёмном); } .форма--столбиком { grid-template-columns: 1fr; } /* ---------- Блок 9. Мечта ------------------------------------------------- */ .картина { max-width: 740px; display: grid; gap: 10px; margin-bottom: 30px; } .картина li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.5; } .картина li::before { content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 9px; border-radius: 999px; background: var(--золото); } .неделя { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } .неделя__день { border: 1px solid var(--грань); border-radius: var(--радиус-поля); background: var(--бумага); padding: 16px 12px; font-size: 13px; line-height: 1.4; min-height: 116px; min-width: 0; overflow-wrap: break-word; } .неделя__день--отчёт { background: linear-gradient(160deg, var(--крем), var(--крем-2)); border-color: var(--золото); font-weight: 800; } .неделя__низ { margin-top: 14px; font-size: 12px; color: var(--приглушённый); } .мечта-добивка { margin-top: 26px; font-size: 20px; font-weight: 800; color: var(--золото-текст); } /* ---------- Блок 10. AI --------------------------------------------------- */ .ai { display: grid; grid-template-columns: 38fr 62fr; gap: 36px; align-items: start; } .ai__строки { display: grid; gap: 4px; } .ai__строка { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; width: 100%; text-align: left; padding: 13px 14px; border: 0; border-left: 3px solid transparent; border-radius: 0 var(--радиус-поля) var(--радиус-поля) 0; background: transparent; color: var(--приглушённый-на-тёмном); font-size: 15px; font-weight: 600; line-height: 1.4; } .ai__строка[aria-selected="true"] { border-left-color: var(--золото); background: var(--бел-6); color: var(--текст-на-тёмном); } .ai__строка svg { width: 18px; height: 18px; margin-top: 2px; color: var(--золото); } .ai__пояснение { display: none; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--приглушённый-на-тёмном); } .ai__строка[aria-selected="true"] .ai__пояснение { display: block; } .ai__экран { min-height: 340px; } .ai__вид { display: none; } .ai__вид[data-активен] { display: block; } .лента-разговора li { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--текст-на-тёмном); } .лента-разговора li + li { border-top: 1px solid var(--грань-на-тёмном); } .лента-разговора time { flex: 0 0 46px; font-size: 12px; font-weight: 700; color: var(--приглушённый-на-тёмном); } .лента-разговора .свернул { color: var(--тревога-на-тёмном); font-weight: 700; } .сделка { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 11px 0; font-size: 14px; color: var(--текст-на-тёмном); } .сделка + .сделка { border-top: 1px solid var(--грань-на-тёмном); } .сделка span { font-size: 12px; color: var(--приглушённый-на-тёмном); } .повтор { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 11px 0; font-size: 14px; color: var(--текст-на-тёмном); } .повтор + .повтор { border-top: 1px solid var(--грань-на-тёмном); } .диагностика { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .диагностика div { border-radius: var(--радиус-поля); padding: 20px 16px; text-align: center; background: var(--золото-на-тёмном-фон); border: 1px solid var(--грань-на-тёмном); } .диагностика b { display: block; font-size: 32px; font-weight: 800; color: var(--золото); line-height: 1.1; } .диагностика span { font-size: 12px; color: var(--приглушённый-на-тёмном); } .сводка-тг { border-radius: var(--радиус-поля); background: var(--бел-6); padding: 16px; } .сводка-тг li { padding: 5px 0; font-size: 14px; color: var(--текст-на-тёмном); } .ответственность { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--золото-нить); font-size: 17px; font-weight: 700; color: var(--текст-на-тёмном); } /* ---------- Блок 11. Вехи ------------------------------------------------- */ .вехи { position: relative; max-width: 820px; padding-left: 8px; } .веха { position: relative; display: grid; grid-template-columns: 168px 1fr; gap: 26px; padding: 0 0 26px 34px; } .веха::before { content: ''; position: absolute; left: 0; top: 8px; bottom: -8px; width: 2px; background: var(--золото-нить); } .веха:last-child::before { display: none; } .веха::after { content: ''; position: absolute; left: -5px; top: 4px; width: 12px; height: 12px; border-radius: 999px; background: var(--золото); outline: 5px solid var(--золото-тень); } .веха--мелкая::after { width: 8px; height: 8px; left: -3px; top: 7px; outline-width: 4px; } .веха--мелкая { padding-bottom: 18px; } .веха__срок { font-size: 15px; font-weight: 800; color: var(--золото-текст); } .веха__текст { font-size: 16px; line-height: 1.55; } .веха--мелкая .веха__текст { font-size: 15px; color: var(--приглушённый); } .веха__метка { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .переключатель-мет { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--приглушённый); } /* ---------- Блок 12. Отстройка ------------------------------------------- */ /* Шапка блока — во всю ширину над колонками, по той же причине, что в блоке 4. */ .отстройка { display: grid; grid-template-columns: 56fr 44fr; gap: 44px; align-items: start; } .довод { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 13px 0; } .довод + .довод { border-top: 1px solid var(--грань); } .довод__номер { font-size: 16px; font-weight: 800; color: var(--золото-текст); } .довод h3 { font-size: 17px; } .довод p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--приглушённый); } .счёт__строка { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; font-size: 14px; } .счёт__строка + .счёт__строка { border-top: 1px solid var(--грань); } .счёт__строка svg { width: 18px; height: 18px; color: var(--золото-текст); } .счёт__оклад { font-size: 12px; color: var(--приглушённый); letter-spacing: .12em; } .счёт__итог { margin-top: 14px; padding-top: 14px; border-top: 3px double var(--золото); display: flex; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 800; color: var(--золото-текст); } .счёт__наше { margin-top: 16px; padding: 12px 14px; border-radius: var(--радиус-поля); background: linear-gradient(160deg, var(--крем), var(--крем-2)); display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; } .счёт__наше svg { width: 18px; height: 18px; color: var(--золото-текст); flex: 0 0 auto; } /* ---------- Блок 13. Модель оплаты --------------------------------------- */ .формула { max-width: 860px; margin: 18px 0 30px; border-left: 3px solid var(--золото); padding-left: 16px; font-size: 22px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; } /* Поле схемы — одно число на всю панель: по нему выставлены и пунктирная линия базы, и золотая область прироста. Раньше область шла во всю ширину панели, упиралась в её скруглённый угол и срезалась им, а линия базы кончалась на 22 px раньше — правый край схемы выглядел собранным наспех. */ .база { position: relative; padding: 0; overflow: hidden; --поле-схемы: 22px; } .база__сцена { position: relative; display: grid; grid-template-rows: 1fr auto 1fr; min-height: 340px; } .база__верх { position: relative; padding: 18px 22px 18px 48px; display: flex; align-items: flex-start; } .база__рост { position: absolute; left: var(--поле-схемы); right: var(--поле-схемы); top: 16px; bottom: 0; height: auto; background: linear-gradient(90deg, transparent, var(--золото-тень) 30%, color-mix(in srgb, var(--золото) 38%, transparent)); clip-path: polygon(0 100%, 100% 0, 100% 100%); transform-origin: bottom; transform: scaleY(var(--рост, 1)); } .база__подпись-верх { position: relative; font-size: 14px; font-weight: 800; color: var(--золото-текст); } .база__линия { position: relative; height: 0; border-top: 2px dashed var(--синий-3); margin: 0 var(--поле-схемы); } .база__линия span { position: absolute; left: 0; top: 8px; font-size: 12px; font-weight: 800; color: var(--синий-3); padding-right: 8px; } .база__низ { position: relative; padding: 34px 22px 22px 48px; background: color-mix(in srgb, var(--синий-3) 10%, transparent); } .база__подпись-низ { font-size: 14px; font-weight: 800; color: var(--синий-3); margin-bottom: 12px; } .база__фикс { columns: 2; column-gap: 26px; font-size: 13px; line-height: 1.5; color: var(--приглушённый); } .база__фикс li { break-inside: avoid; padding: 3px 0; } .база__диагностика { margin-top: 10px; font-size: 13px; color: var(--приглушённый); } .база__скоба { position: absolute; left: 16px; top: 16px; bottom: 50%; width: 14px; border: 2px solid var(--золото); border-right: 0; border-radius: var(--радиус-поля) 0 0 var(--радиус-поля); } .реверс { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 10px 18px; border-radius: 999px; background: var(--крем); border: 1px solid var(--золото); font-size: 15px; font-weight: 800; } .ступени { margin-top: 26px; display: grid; gap: 22px; max-width: 900px; } .ступени h3 { font-size: 17px; margin-bottom: 8px; } .ступени p, .ступени li { font-size: 15px; line-height: 1.55; } .остаётся { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; } .остаётся li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 14px; line-height: 1.45; } .остаётся svg { width: 18px; height: 18px; margin-top: 3px; color: var(--золото-текст); } .сравнение { margin-top: 26px; font-size: 15px; color: var(--приглушённый); max-width: 860px; } .реквизиты-блока { margin-top: 22px; font-size: 13px; color: var(--приглушённый); } /* ---------- Блок 14. Авторское слово ------------------------------------- */ /* Секция светлая (отступление 5, см. комментарий в разметке). Цвета текста и плашки — под светлый фон; золото на кремовом читается, поэтому кавычка и выделение в тексте остаются золотыми, но берут тёмный оттенок золота. */ .секция--автор { background: linear-gradient(180deg, var(--крем), var(--бумага-2) 70%); } .автор { display: grid; grid-template-columns: 60fr 40fr; gap: 48px; align-items: center; } .кавычка { font-size: 74px; line-height: .7; font-weight: 800; color: var(--золото-текст); } .автор h2 { margin-top: 10px; } .автор__текст { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--приглушённый); max-width: 620px; } .автор__текст em { font-style: normal; font-weight: 800; color: var(--золото-текст); } .автор__подпись { margin-top: 22px; font-size: 14px; color: var(--приглушённый); max-width: 560px; } /* Фото лежит на тёмной панели, а не прямо на светлом фоне: у вырезки мягко растушёван край и в неё запечён синий ореол — на кремовом он читался бы грязным пятном. Заодно у светлой секции появляется одно тёмное пятно вместо тёмной секции целиком. */ .автор__фото { position: relative; display: grid; justify-items: center; background: var(--тёмная-панель); border-radius: var(--радиус-панели); box-shadow: var(--тень-тёмная); padding: 18px 18px 20px; } .автор__фото img { width: 100%; max-width: 340px; } .автор__фото .пилюля { margin-top: -18px; position: relative; z-index: 2; background: var(--бел-10); border-color: var(--грань-на-тёмном); color: var(--текст-на-тёмном); } /* ---------- Блок 15. Финал ------------------------------------------------ */ .секция--финал { border-top: 1px solid var(--золото-нить); padding-top: 92px; } .финал { max-width: 860px; margin: 0 auto; text-align: center; } .финал__списки { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin: 34px 0 22px; text-align: left; } .финал__списки h3 { font-size: 15px; margin-bottom: 12px; color: var(--золото); } .финал__списки li { display: grid; grid-template-columns: auto 1fr; gap: 11px; padding: 6px 0; font-size: 15px; line-height: 1.5; color: var(--текст-на-тёмном); } .финал__списки b { font-weight: 800; color: var(--золото); } .финал__списки svg { width: 16px; height: 16px; margin-top: 5px; color: var(--золото); } .доступы { font-size: 13px; line-height: 1.5; color: var(--приглушённый-на-тёмном); max-width: 700px; margin: 0 auto 28px; } .финал__форма { max-width: 520px; margin: 0 auto; text-align: left; padding: 26px 24px; border-radius: var(--радиус-панели); background: var(--бел-6); border: 1px solid var(--грань-на-тёмном); border-top: 2px solid var(--золото); } .финал__подписи { margin-top: 14px; display: grid; gap: 5px; } /* ---------- Подвал: знак -------------------------------------------------- */ /* Своя страница в подвале — не ссылка, а , и выглядит соответственно: приглушена. Раньше она была набрана как соседние ссылки и читалась ссылкой, которая не работает (так же сделано на эталонной посадке). */ .подвал-ссылки span { color: #7b8ca4; } .подвал-знак { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .подвал-знак img { width: 38px; height: 38px; object-fit: contain; } .подвал-знак b { display: block; font-size: 16px; font-weight: 800; color: var(--белый); line-height: 1.2; } .подвал-знак span { font-size: 12px; color: color-mix(in srgb, var(--белый) 62%, var(--синий-подвал)); } /* ---------- Оживление: один раз ------------------------------------------ Содержимое панелей НЕ прячется до прокрутки. Класс `.всплыть` — только метка «здесь есть что оживить»: счётчики чисел, прочерчивание нити, рост золотой области. Прятать панель до прокрутки нельзя: при быстрой прокрутке она успевает попасть на экран пустой, а на снимках проверки 03.09.2026 недельный лист, счёт и линия базы приходили пустыми прямоугольниками. Цена эффекта появления выше того, что он даёт. */ /* ============================ Планшет ==================================== */ @media (max-width: 1080px) { .экран__сетка { grid-template-columns: 1fr; gap: 34px; } .экран__текст h1 { min-height: 0; } .экран__визуал { max-width: 560px; } .сводка { left: 0; } /* Путь обращения — вертикальной лестницей. Пять пилюль в строку сюда не помещаются, а прокрутка вбок читалась как обрезанная вёрстка: на 768 подписи рвались посреди слова, на 390 было видно полторы ступени из пяти и ни одного намёка, что ряд листается. Сверху вниз видны все пять ступеней и все четыре причины, ничего не режется. */ .путь { padding: 22px 20px 18px; } .путь__прокрутка { overflow: visible; padding-bottom: 0; } .путь__лента { grid-template-columns: 1fr; justify-items: start; } .путь__остановка { justify-items: start; text-align: left; } .путь__пилюля { font-size: 14px; padding: 9px 16px; } .путь__мост { position: relative; padding: 5px 0 5px 44px; width: auto; } .путь__линия { position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; height: auto; margin: 0; } .путь__линия::after { top: 0; left: -3px; animation-name: бег-вниз; } .путь__причина { border-top: 0; border-left: 2px solid var(--тревога); padding: 4px 0 4px 12px; text-align: left; font-size: 13px; } .путь__низ { margin-top: 14px; } .боли { grid-template-columns: 1fr 1fr; } /* В две колонки самый длинный заголовок укладывается в две строки — резервировать три незачем, иначе под заголовком встаёт дыра. */ .боль h3 { min-height: 2.5em; } .решения, .доказательство, .отстройка, .ai, .автор, .призыв { grid-template-columns: 1fr; gap: 30px; } .призыв__левое { grid-template-columns: auto 1fr; } .остаётся { grid-template-columns: 1fr 1fr; } /* Семь ячеек в четыре колонки ложились как 4 + 3, и в правом нижнем углу зияла пустая клетка — читалось как недостающий пункт. Кремовая ячейка «недельный отчёт» занимает два места и закрывает ряд. */ .неделя { grid-template-columns: repeat(4, minmax(0, 1fr)); } .неделя__день--отчёт { grid-column: span 2; } .веха { grid-template-columns: 140px 1fr; gap: 18px; } /* В одну колонку тёмная карточка с фото не растягивается во всю ширину: иначе портрет тонет посередине большого тёмного поля. */ .автор__фото { max-width: 360px; justify-self: start; padding: 16px 16px 18px; } .автор__фото img { max-width: 300px; } .финал__списки { gap: 24px; } } /* ============================ Телефон ==================================== */ @media (max-width: 760px) { .только-узкий { display: block; } .только-широкий { display: none; } /* Строка «Управление продажами · с 2017» на телефоне остаётся: это единственное место, где категория читается за долю секунды, а посадка чисто рекламная и трафик мобильный. Раньше она здесь выключалась — дефект 5 таргетолога, дефект Д1 приёмки. Кнопка шапки при этом закреплена в одну строку (flex: 0 0 auto + nowrap), а подписи разрешено перенестись на вторую строку: в одну строку она на 360 не влезала и обрезалась кнопкой. Замерено в браузере на 360, 390 и 430 — высота шапки остаётся прежней, 58 px. */ .шапка__ряд { gap: 10px; } .шапка .кнопка { min-height: 38px; padding: 7px 11px; font-size: 12px; white-space: nowrap; flex: 0 0 auto; } .знак { gap: 10px; } .знак__имя b { font-size: 16px; } .знак__имя span { font-size: 10px; line-height: 1.25; } .экран { padding: 26px 0 40px; } .экран__шапка-текста { min-height: 0; } .экран__текст h1 { margin-top: 8px; } .экран__текст .дескриптор { margin-top: 12px; } .гарантия { margin-top: 16px; font-size: 14px; padding: 10px 12px; } .экран__кнопка { margin-top: 18px; width: 100%; } .экран__визуал { margin-top: 30px; padding-bottom: 0; max-width: none; } .сводка { position: static; width: auto; transform: none; margin-top: 16px; } .панель { padding: 18px 16px; } .форма-карта { padding: 24px 18px 22px; } /* Боли на телефоне — список, а не четыре одинаковых прямоугольника */ .путь { padding: 18px 16px 16px; } .путь__пилюля { padding: 8px 13px; font-size: 13px; } .путь__мост { padding-left: 40px; } .путь__линия { left: 21px; } .путь__причина { font-size: 12px; } .боли, .боли--ещё { display: block; margin-top: 20px; } .боль { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 14px 0; border-bottom: 1px solid var(--грань); } .боль__верх { gap: 10px; margin-bottom: 6px; align-items: center; } /* В списке карточек нет, выравнивать не с чем — место под заголовок не резервируем, иначе между строками списка встают дыры. */ .боль h3 { font-size: 16px; min-height: 0; } .боль__номер { font-size: 15px; font-weight: 800; color: var(--золото-текст); } .боль p { font-size: 14px; } .решения { gap: 26px; } .выгоды { columns: 1; } .лист__таблица { display: none; } .лист__строки { display: grid; gap: 12px; } .лист__строка { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--грань); } .лист__строка b { font-size: 15px; } .лист__числа { grid-column: 1; font-size: 14px; } .лист__числа i { font-style: normal; color: var(--приглушённый); } .лист__строка .дельта { grid-row: 1 / 3; grid-column: 2; } /* Одна колонка. В двух столбцах по 165 px текст ложился по два-три слова в строку, а живые панели у средних карточек приходилось прятать — на главной ширине из четырёх панелей оставалось две. Теперь панели на месте у всех четырёх карточек, как на планшете и на компьютере. */ .продукт { grid-template-columns: 1fr; } .часть--широкая { grid-column: auto; } .часть--узкая { padding: 20px 16px; } .часть--узкая h3 { font-size: 16px; } .документ { transform: none; } .итог-кейса b { font-size: 44px; } .окно { padding: 12px; } .призыв__левое { grid-template-columns: 1fr; gap: 14px; } .сорок { display: flex; align-items: baseline; gap: 10px; text-align: left; } .сорок b { font-size: 40px; } .неделя { grid-template-columns: 1fr; gap: 8px; } /* В одну колонку растяжка на два места не нужна и ломает ряд: появлялась вторая колонка, а текст соседних ячеек сжимался в столбик по одной букве. Правило выше — только для планшета. */ .неделя__день--отчёт { grid-column: auto; } .неделя__день { min-height: 0; padding: 12px 14px; } /* Шесть инструментов — вертикальным списком, тем же, что на планшете. Рядом чипов на 390 px было видно один пункт из шести, и ничто не выдавало остальные пять: ни половины следующего чипа, ни точек, ни счётчика. Весь смысл блока в том, что AI-контур делает шесть вещей. */ .ai { gap: 22px; } .ai__экран { min-height: 300px; margin-top: 14px; } .ai__строки { gap: 2px; } .ai__строка { padding: 12px 12px; font-size: 15px; } /* Этап и следующий шаг — друг под другом. В две колонки на 390 между ними оставалось около 12 px, на 360 они сходились вплотную (замечание Н1). */ .сделка { grid-template-columns: 1fr; gap: 2px; } .сделка span { text-align: left; } .ответственность { font-size: 15px; margin-top: 24px; } .веха { grid-template-columns: 1fr; gap: 4px; padding-left: 26px; padding-bottom: 20px; } .веха__срок { font-size: 13px; } .веха__текст { font-size: 15px; } .довод h3 { font-size: 16px; } .формула { font-size: 19px; } .база__сцена { min-height: 300px; } /* Перечень «что входит в фикс» остаётся внутри панели, одной колонкой. Раньше он выносился наружу и стоял на голом фоне пятью серыми строками без рамки и заголовка, а следующая фраза ссылалась на «этот перечень». */ .база__фикс { columns: 1; font-size: 13px; } .остаётся { grid-template-columns: 1fr; gap: 12px; } .автор { gap: 24px; } .кавычка { font-size: 54px; } .автор__фото { order: 3; } .автор__текст { margin-top: 16px; font-size: 15px; } .секция--финал { padding-top: 54px; } .финал__списки { grid-template-columns: 1fr; gap: 22px; } .финал__форма { padding: 20px 16px; } } /* Показ/скрытие переносов — последними в файле, чтобы не спорить с блоком телефона выше: одинаковая частность решается порядком строк. */ .лист__строки { display: none; } @media (max-width: 760px) { .лист__строки { display: grid; } /* Панель «линия базы» на телефоне: подписи расходятся, скоба ближе к краю. Поле схемы уже — под ним же ходит и золотая область прироста. */ /* Схема заполняет панель целиком, как на планшете и компьютере: общее правило `.панель` на телефоне добавляет поля, и серая зона «фикс» повисала внутри панели отдельной плитой с прямыми углами. */ .база { --поле-схемы: 16px; padding: 0; } .база__сцена { grid-template-rows: 1fr auto auto; min-height: 0; } .база__верх { padding: 14px 16px 14px 34px; min-height: 150px; } .база__низ { padding: 30px 16px 18px 34px; } .база__линия span { font-size: 11px; top: 7px; } .база__подпись-верх { font-size: 12px; } .база__скоба { left: 10px; width: 10px; top: 12px; } } /* ---------- Меньше движения ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .всплыть { opacity: 1; transform: none; transition: none; } .точка--живая { animation: none; } .путь__линия::after { animation: none; } .день__лента::before, .база__рост { transform: none !important; transition: none !important; } } /* Если снят помеченный кусок со сканом письма, разбор встаёт во всю ширину сам. */ .доказательство > .разбор:only-child { grid-column: 1 / -1; max-width: 880px; }