/* ================= 1. ХОЛСТ И КОНТЕЙНЕР МАКЕТА ========================== */ /* --gut — поле секции. 50% берётся от ширины секции (= ширина окна), поэтому на 1440 выходит ровно (1440-1200)/2 = 120 макета, на узком экране — 40, на широком контейнер остаётся 1200 и стоит по центру. Дети секции считают свои left от того же --gut: у них 50% — это тоже ширина секции. */ /* Макет нарисован на 1440. Базовый размер привязан к ширине окна: на 1440 и шире 1rem = 10px, то есть число в этом файле = число макета; уже — вся раскладка ужимается пропорционально, как масштаб самого макета. Поэтому отдельных правил под 1280/1024 не нужно, и ничего не вылетает за экран. */ html{font-size:calc(min(100vw,1440px)/144)} body{background:#fff} .page{width:100%;max-width:none;margin:0} .sec{ --gut:max(4rem, calc(50% - 60rem)); --kol:9.083rem; /* колонка макета */ --jol:1rem; /* жёлоб макета */ display:block;width:100%;height:auto!important;min-height:0;overflow:visible; padding:5rem var(--gut);position:relative; } /* Ребёнок секции встаёт в поток; position:relative (не static) — чтобы он остался системой координат для СВОИХ абсолютных детей. */ .sec>*{ display:block;position:relative!important; left:auto!important;top:auto!important;right:auto!important;bottom:auto!important; margin:0 0 1.6rem; } [hidden]{display:none!important} .sec>a.knopka,.sec>button.knopka{display:flex;width:fit-content} .sec>a.tlink,.sec>a.otzyv-ssylka,.sec>p.otzyv-ssylka{width:fit-content} /* ================= 2. ТИПОГРАФИКА МАКЕТА ================================ */ .kick{font-size:1.2rem!important;line-height:1.8rem!important;letter-spacing:.06em; margin:0 0 1.5rem!important;width:fit-content!important} .zag{font-size:3.6rem!important;line-height:4.4rem!important;width:fit-content!important; max-width:100%;margin:0 0 1rem} .sec>p.a,.sec>div.a>p{max-width:none} .sec>p.a:not(.kick){font-size:1.6rem!important;line-height:2rem!important;width:auto!important; max-width:90rem;margin-bottom:2rem} .lead{font-size:1.6rem!important;line-height:2rem!important} /* ================= 3. ЛЕНТЫ: карточки в размер макета =================== */ /* Из макета берётся ВИД и РАЗМЕР карточки, а не их количество: в макете 2-3 штуки для примера, здесь все реальные (47 до/после, 20 роликов и т.д.). Карточка — та же мобильная, увеличенная zoom до ширины макета: разметка, пропорции и внутренние отступы сохраняются один в один. */ .sec>.lenta{ display:flex;width:100%!important;margin:2rem 0 0!important; gap:var(--jol);height:auto!important;padding:0!important; scroll-padding-left:0!important;scroll-padding-inline-start:0!important; } .sec>.lenta>*{flex:0 0 auto} /* ширина карточки макета / ширина той же карточки на мобильной = zoom */ [data-pk="rez"] .lenta>*{zoom:.97} /* 300 -> 291, 4 в ряд, шаг 303 */ [data-pk="rez"] .lenta{gap:1.2rem} /* зум карточки методов снят: раскладка ниже взята из макета (узел 6:3), а не масштабирована */ [data-pk="vid"] .lenta>*{zoom:.975} /* 197 -> 192, 6 в ряд, шаг 201.6 */ [data-pk="sho"] .lenta>*{zoom:.975} /* 197 -> 192, 6 в ряд */ /* 248 -> 291, 4 в ряд */ [data-pk="pro"] .lenta>*{zoom:1.173} /* 248 -> 291, 4 в ряд */ [data-pk="pro"] .lenta{gap:1.2rem} [data-pk="vra"] .lenta>*{zoom:1.617} /* 180 -> 291, 4 в ряд */ [data-pk="vra"] .lenta{gap:1.2rem} [data-pk="kur"] .lenta>*{zoom:1.173} /* 248 -> 291, 4 в ряд */ [data-pk="kur"] .lenta{gap:1.2rem} [data-pk="blo"] .lenta>*{zoom:1.578} /* 249 -> 393, пролёт 3 колонок, как у bb и dok */ [data-pk="blo"] .lenta{gap:1.2rem} /* Борода-брови и документы в макете отдельным блоком не нарисованы — берём язык карточек макета: пролёт 393 (3 колонки макета), 3 в ряд. */ [data-pk="bb"] .lenta>*{zoom:1.511} /* 260 -> 393 */ [data-pk="bb"] .lenta .knopka{height:3.51rem!important} /* x1.511 = 53 px, высота стандарта проекта (как в #ceny) */ [data-pk="dok"] .lenta>*{zoom:1.585} /* 248 -> 393 */ /* ================= 4. ПУЛЬТ ЛЕНТЫ ======================================= */ /* Шкала слева, две стрелки справа, под лентой. Требование владельца: если вся лента видна — листать нечего, пульт убираем целиком (pk.js ставит data-celikom="1" на ленту, шкалу и стрелки). */ .sec>.krug{position:absolute!important;bottom:5rem!important;margin:0;display:flex} .sec>.krug[data-hod="nazad"] {right:calc(var(--gut) + 5.2rem)!important} .sec>.krug[data-hod="vpered"]{right:var(--gut)!important} .sec>.shkala{position:absolute!important;left:var(--gut)!important;bottom:6.6rem!important; width:calc(100% - var(--gut)*2 - 12rem)!important;margin:0} .krug[data-off="1"],.shkala[data-celikom="1"]{display:none!important} /* ⛔ ПУЛЬТ ЛЕНТЫ НЕ ПОКАЗЫВАЕТСЯ, ПОКА НЕ ИЗМЕРЕН — ОБЩЕЕ ПРАВИЛО НА ВСЕ ЛЕНТЫ. pkPult из pk.js меряет ленту и гасит пульт там, где листать нечего. Но он срабатывает только по window load, а шкала и стрелки к этому моменту уже нарисованы. На странице с сотнями фотографий load наступает нескоро, и до него пульт висит поверх карточек: в dok серая полоса резала белые карточки документов и стрелка закрывала подпись, в blo и cen — ровно то же у карточек статей и цен. Владельцу неважно, что через секунду это погаснет. Лечим приём, а не случай: по умолчанию пульт скрыт у ВСЕХ лент и показывается только после того, как pkPult поставил ленте data-celikom="0", то есть измерил её и она НЕ помещается. Ленты, которые действительно не помещаются (rez, vid, pro, vra, sho), получают пульт сразу после измерения и работают как прежде. Стрелка «назад» с data-off="1" остаётся скрытой — её исключает :not(). Секции rez/vid/pro/vra/sho, где погашенная стрелка намеренно показана бледной, имеют свои правила с более высокой специфичностью и не задеты. */ .sec>.krug,.sec>.shkala{display:none!important} .sec:has(>.lenta[data-celikom="0"])>.krug:not([data-off="1"]){display:flex!important} .sec:has(>.lenta[data-celikom="0"])>.shkala{display:block!important} /* место под пульт — только там, где он есть */ .sec:has(>.lenta){padding-bottom:12rem} .sec:has(>.lenta[data-celikom="1"]){padding-bottom:5rem} /* ================= 5. ПЕРВЫЙ ЭКРАН — ИЗ МАКЕТА ЦЕЛИКОМ ================== Источник: Figma ZKBO061wcEbW9xFMPHtYBe, узел 6:3 «ГМЦ_Пересадка волос в Москве», 1440x12072. Метаданные и рендер лежат в artifacts/3585/maket_pk_new. СКЕЛЕТ МАКЕТНЫЙ: каждая коробка стоит там, где она в макете, и того размера, какой в макете. СОДЕРЖИМОЕ МОБИЛЬНОЕ: тексты, фотографии и цвета не меняются — они берутся из gmc2.src.html как есть. СДВИГ НА 160. В макете первый экран занимает 0..814, но верхние 160 — это верхняя полоса и шапка с меню, которых в мобильной НЕТ (их тексты пришлось бы брать из макета, а это запрещено). Поэтому весь первый экран поднят на 160: высота 654, координата элемента = макетная минус 160. Решение по шапке — за владельцем; вернут шапку — сдвиг снимается одним числом (--sap). Координаты макета (x от левого поля 120, y уже минус 160): вкладка «Реальный кейс» 0,25 135x25 радиус 10 10 0 0 карточка фото 0,50 595x554 радиус 0 30 30 30 фото внутри карточки 0,110 595x403 пилюля «до» 18,67 42x30 пилюля «через 12 мес» 426,67 151x30 знак ГМЦ 257,240 80x78 (две части мобильной, масштаб 1.658) тёмная плашка 0,512 595x92 радиус 0 0 30 30 подпись в плашке 25,534 559x42 18/21 гео-иконка 617,50 27x27 «Пересадка волос в Москве» 646,52 18 H1 620,107 ш.529 46/45 «Рассрочка 0%» 620,219 102x22 12 цена 620,238 42 «Консультация и расчёт» 620,290 16 ======================================================================== */ [data-pk="hero"]{ height:65.4rem!important;min-height:65.4rem;padding:0!important;overflow:visible; } [data-pk="hero"]>*{position:absolute!important;margin:0!important} /* --- правая колонка ---------------------------------------------------- */ [data-pk="hero"]>:nth-child(1){left:calc(var(--gut) + 61.7rem)!important;top:5rem!important; width:2.7rem!important;height:2.7rem!important;-webkit-mask-size:2.7rem 2.7rem!important;mask-size:2.7rem 2.7rem!important; -webkit-mask-position:0 0!important;mask-position:0 0!important} .sec[data-pk="hero"]>p.a:nth-child(2){left:calc(var(--gut) + 64.6rem)!important;top:5.2rem!important; font-size:1.8rem!important;line-height:2.3rem!important} [data-pk="hero"]>:nth-child(3){left:calc(var(--gut) + 62rem)!important;top:10.7rem!important; width:52.9rem!important;max-width:52.9rem!important;font-size:4.6rem!important;line-height:4.5rem!important} [data-pk="hero"]>:nth-child(3) br,.sec[data-pk="hero"]>p.a:nth-child(15) br{display:none} [data-pk="hero"]>:nth-child(4){left:calc(var(--gut) + 62rem)!important;top:21.9rem!important; width:10.2rem!important;height:2.2rem!important;border-radius:1.5rem!important;padding:0!important} [data-pk="hero"]>:nth-child(4)>p{font-size:1.2rem!important;line-height:normal!important} .sec[data-pk="hero"]>p.a:nth-child(5){left:calc(var(--gut) + 62rem)!important;top:23.8rem!important; font-size:4.2rem!important;line-height:normal!important} .sec[data-pk="hero"]>p.a:nth-child(6){left:calc(var(--gut) + 62rem)!important;top:29rem!important; font-size:1.6rem!important;line-height:normal!important;max-width:none!important} /* --- левая колонка: карточка с фото ------------------------------------ */ [data-pk="hero"]>:nth-child(7){left:var(--gut)!important;top:2.5rem!important; width:13.5rem!important;height:2.5rem!important;border-radius:1rem 1rem 0 0!important} .sec[data-pk="hero"]>p.a:nth-child(8){left:calc(var(--gut) + 1rem)!important;top:3rem!important; font-size:1.2rem!important;line-height:normal!important} [data-pk="hero"]>:nth-child(9){left:var(--gut)!important;top:5rem!important; width:59.5rem!important;height:55.4rem!important;border-radius:0 3rem 3rem 3rem!important} [data-pk="hero"]>:nth-child(9)>img{left:0!important;top:6rem!important; width:59.5rem!important;height:40.3rem!important;object-fit:contain!important} [data-pk="hero"]>:nth-child(10){left:calc(var(--gut) + 25.7rem)!important;top:24rem!important; width:8.05rem!important;height:4.764rem!important} [data-pk="hero"]>:nth-child(11){left:calc(var(--gut) + 27.325rem)!important;top:29.57rem!important; width:4.842rem!important;height:2.271rem!important} [data-pk="hero"]>:nth-child(12){left:calc(var(--gut) + 1.8rem)!important;top:6.7rem!important; width:4.2rem!important;height:3rem!important;border-radius:5rem!important} [data-pk="hero"]>:nth-child(13){left:calc(var(--gut) + 42.6rem)!important;top:6.7rem!important; width:15.1rem!important;height:3rem!important;border-radius:5rem!important} [data-pk="hero"]>:nth-child(12)>p,[data-pk="hero"]>:nth-child(13)>p{font-size:1.4rem!important;line-height:normal!important} [data-pk="hero"]>:nth-child(14){left:var(--gut)!important;top:51.2rem!important; width:59.5rem!important;height:9.2rem!important;border-radius:0 0 3rem 3rem!important} .sec[data-pk="hero"]>p.a:nth-child(15){left:calc(var(--gut) + 2.5rem)!important;top:53.4rem!important; width:55.9rem!important;max-width:55.9rem!important;font-size:1.8rem!important;line-height:2.1rem!important} /* ================= 5-бис. ЗАЯВКА ПЕРВОГО ЭКРАНА ======================== В макете форма стоит В ПРАВОЙ КОЛОНКЕ первого экрана (740..1314, 520..762). У нас это отдельная следующая секция, а мобильную трогать нельзя — поэтому секция поднимается на всю высоту первого экрана (height:0 + top:-65.4rem) и её содержимое встаёт по макетным координатам. В поток она при этом ничего не добавляет, следующий блок идёт сразу за первым экраном. H2 620,360 ш.452 24 «Бесплатно, ...» 620,393 18 поле «Имя» 620,441 282x60 радиус 15, поля 27 поле «Телефон» 912,441 282x60 кнопка 620,510 574x65 радиус 15, 18 галочка 620,582 20x20 радиус 5 согласие 648,584 ш.506 12 ====================================================================== */ [data-pk="zayavka1"]{position:relative!important;top:-65.4rem!important;height:0!important;min-height:0!important; padding:0!important;margin:0!important;overflow:visible!important;background:transparent!important} [data-pk="zayavka1"]>*{position:absolute!important;margin:0!important} [data-pk="zayavka1"]>:nth-child(1){left:calc(var(--gut) + 62rem)!important;top:36rem!important; width:auto!important;max-width:none!important;font-size:2.4rem!important;line-height:3rem!important;white-space:nowrap} [data-pk="zayavka1"]>:nth-child(1) br{display:none} .sec[data-pk="zayavka1"]>p.a:nth-child(2){left:calc(var(--gut) + 62rem)!important;top:39.3rem!important; font-size:1.8rem!important;line-height:normal!important;max-width:none!important} [data-pk="zayavka1"]>.forma{position:static!important} [data-pk="zayavka1"] .pole{position:absolute!important;top:44.1rem!important; width:28.2rem!important;height:6rem!important;padding:0 2.7rem!important; border-radius:1.5rem!important;font-size:1.6rem!important} [data-pk="zayavka1"] #f1-name{left:calc(var(--gut) + 62rem)!important} [data-pk="zayavka1"] #f1-tel {left:calc(var(--gut) + 91.2rem)!important} [data-pk="zayavka1"] .forma>button{position:absolute!important;left:calc(var(--gut) + 62rem)!important; top:51rem!important;width:57.4rem!important;height:6.5rem!important; border-radius:1.5rem!important;font-size:1.8rem!important} [data-pk="zayavka1"] #f1-gal{position:absolute!important;margin:0!important;left:calc(var(--gut) + 62rem)!important;top:58.2rem!important; width:2rem!important;height:2rem!important;min-width:2rem!important;border-radius:.5rem!important} [data-pk="zayavka1"] .forma>label.soglasie-t{position:absolute!important;left:calc(var(--gut) + 64.8rem)!important; top:58.4rem!important;transform:none!important;width:50.6rem!important; font-size:1.2rem!important;line-height:1.5rem!important} [data-pk="zayavka1"] .forma>p.a.otvet{position:absolute!important;left:calc(var(--gut) + 62rem)!important; top:61.5rem!important;width:57.4rem!important} /* ================= 6. РЕЗУЛЬТАТЫ — ИЗ МАКЕТА ЦЕЛИКОМ ==================== Макет: полоса 814..1458 (высота 644), группа 7:1982. Координаты ниже — макетные минус 814. Содержимое (тексты, 47 фотографий, ссылки) мобильное. надзаголовок «результаты» 1,50 12/18 заглавными H2 1,83 ш.746 36/44, одна строка кнопка «Все результаты» 1009,91 192x50 радиус 15, 14, #323F3E абзац 1,137 ш.797 16/20, две строки ссылка «Перейти в сообщество» 1,192 14/16 с подчёркиванием лента карточек 0,275 карточка 292x252, шаг 302 (жёлоб 10) фото в карточке 0,1 292x195 пилюля «до» 11,158 35x26, текст 9.45 заглавными пилюля «через 12 месяцев» 175,158 104x26 подпись слева 13,214 15/15.36 подпись справа справа 11,214 15/15.36 шкала 1,568 1087x10, бегунок 272 стрелки 1108,552 42x42, шаг 52 ======================================================================== */ /* ⛔ ОТСТУПЛЕНИЕ ОТ МАКЕТА ПО СЛОВУ ЗАКАЗЧИКА (Роман через владельца, 13.09): «карточки результатов до/после должны быть больше по масштабу». Решение Джарвиса: три карточки в ряд вместо четырёх, пролёт 393 вместо 292 — это ровно пролёт UI Kit (3x393 + 2x10 = 1200), сетка не ломается, шаг 403 как у карточек методов. Иерархия: слово заказчика выше макета, макет выше нормы. Масштаб один на всю карточку (--rz), поэтому фото, пилюли и подписи растут вместе с ней — мелкого текста на крупной карточке не остаётся. Высота ленты, пульт и высота секции считаются ОТ высоты карточки, а не вписаны числом, и не зависят от числа карточек: их 47, но правило работает при любом. */ /* ⛔ РАЗМЕР КАРТОЧКИ РЕЗУЛЬТАТОВ. Владелец 13.09, повторно: «сделай чтоб фотки крупнее были и карточки сами». В прошлый раз подняли 292 -> 393 (пролёт «три»), владелец повторил просьбу — значит мало. Беру СЛЕДУЮЩИЙ законный пролёт UI Kit: «две» = 595 px. Сетка сходится ровно: 2x595 + 10 = 1200 = контентная зона. --rz = 595/292 = 2.0377. Масштаб один на всю карточку, поэтому фото, пилюли «ДО»/«ЧЕРЕЗ 12 МЕСЯЦЕВ» и подписи «2 800 графтов / Метод FUE» растут вместе с ней и не мельчают. Высота ленты, пульт и высота секции считаются ОТ --rz, поэтому шкала и стрелки уезжают вниз сами, числом ничего не вписываю. */ /* ⛔ РАЗМЕР КАРТОЧКИ ДО/ПОСЛЕ — правка владельца 15.09, ЭТАЛОН ВЗЯТ ИЗ FIGMA (файл ZKBO061wcEbW9xFMPHtYBe, карточка 7:1926, подписи 7:1958 / 7:1962, пилюли 7:1966 / 7:1974). Владелец дословно: «вместо увеличения размера карточки он сделал просто увеличение всего текста в каждой карточке, и он начал выезжать во все стороны. Не надо тексты менять по размеру, надо просто размер карточки сделать нормальный, а тексты вернуть такие, как было по размеру» и «размеры текстов надо вернуть к таким, которые были указаны в Figma MCP». ЧТО БЫЛО НЕ ТАК. Карточку растили ЧЕРЕЗ zoom (--rz 2.0377), а zoom тянет ВСЁ содержимое, включая кегли: подпись 15 px из макета превращалась в 30.6 px, метка пилюли 9.45 -> 19.3. Текст в карточке становился крупнее абзаца самой секции (16 px) — это и есть «увеличение всего текста». Плюс zoom ЛОМАЕТ ЛИСТАНИЕ: в pozKarty() шаг ленты считается по offsetLeft, а offsetLeft при zoom отдаёт немасштабированное число — стрелка «вперёд» давала шаг 0 (замерено: лента rez не листалась вообще на 1280/1440/1920). ЧТО СТАЛО. zoom убран совсем (zoom:1). Коробка карточки и фото заданы обычными размерами и выросли: 29.2rem -> 75rem по ширине. КЕГЛИ И ПОЛОСА ТЕКСТА ВЗЯТЫ ИЗ МАКЕТА БУКВАЛЬНО и с ростом карточки больше не меняются: подпись «N графтов» 15 px / 15.359, DemiBold (Figma 7:1958) подпись «Метод FUE» 14.177 px / 15.359, Regular (Figma 7:1962) метка пилюли 9.452 px, uppercase (Figma 7:1975) полоса текста под фото 57 px (Figma: 252 - 195) отступы подписей слева 13, справа 11, от верха полосы 19 (Figma) пилюли 35.44 и 103.97 x 25.99, от краёв фото 11 / 12.8 (Figma) радиус карточки 25 (Figma 7:1926), рамка #F0F2EC Пропорция фото макетная: 292:195 = 1.4974, поэтому фото 75rem x 50.1rem — кадр не режется, вертикальный шов «до | через 12 месяцев» остаётся по центру. ⛔ ВЫСОТА СЕКЦИИ ПРОТИВ ПРАВИЛА «БЛОК НЕ ВЫШЕ ОДНОГО ЭКРАНА» (требование Романа, детектор obhod.bloki_vyshe_ekrana меряет на 1440x900 и 1280x800). Карточка выше прежней, поэтому запас секции пришлось отдать ей: поле над лентой 27.5 -> 24.5rem (от ссылки «Перейти в сообщество» до карточек остаётся 37 px), поле под лентой 11.7 -> 8.7rem (под стрелками остаётся 15 px). Итог 89rem: 890 px при экране 900 и 791 при 800 — правило держится. Без этого обмена секция вышла бы 957 px. */ [data-pk="rez"]{--rz:1;--rh:55.8rem; height:calc(24.5rem + var(--rh) + 8.7rem)!important; min-height:calc(24.5rem + var(--rh) + 8.7rem);padding:0!important;overflow:visible} [data-pk="rez"]>*{position:absolute!important;margin:0!important} .sec[data-pk="rez"]>p.a.kick{left:calc(var(--gut) + .1rem)!important;top:5rem!important; font-size:1.2rem!important;line-height:1.8rem!important;margin:0!important} [data-pk="rez"]>h2.zag{left:calc(var(--gut) + .1rem)!important;top:8.3rem!important; width:74.6rem!important;max-width:74.6rem!important;font-size:3.6rem!important;line-height:4.4rem!important} [data-pk="rez"]>h2.zag br{display:none} [data-pk="rez"]>a.knopka{left:calc(var(--gut) + 100.9rem)!important;right:auto!important;top:9.1rem!important; width:19.2rem!important;height:5rem!important;border-radius:1.5rem!important;font-size:1.4rem!important} [data-pk="rez"]>div.a:not(.lenta):not(.shkala){left:calc(var(--gut) + .1rem)!important;top:13.7rem!important; width:79.7rem!important;max-width:79.7rem!important;font-size:1.6rem!important;line-height:2rem!important} /* в макете абзац идёт сплошным текстом в две строки; в мобильной он разбит на два

и
— на ПК склеиваем в поток, текст не режется */ /* ⛔ БЫЛО display:inline, ЧТОБЫ СКЛЕИТЬ ДВА АБЗАЦА В ОДНУ СТРОКУ ПО МАКЕТУ, и это дало «текст поверх текста»: у строчных коробок рамки перекрываются по построению, детектор прав. Возвращаю блочные абзацы — коробка и кегль остаются макетными, меняется только место переноса. */ [data-pk="rez"]>div.a:not(.lenta):not(.shkala)>p{display:block;margin:0} [data-pk="rez"]>div.a:not(.lenta):not(.shkala) br{display:none} [data-pk="rez"]>a.tlink{left:calc(var(--gut) + .1rem)!important;top:19.2rem!important; font-size:1.4rem!important;line-height:1.6rem!important} [data-pk="rez"]>.lenta{left:var(--gut)!important;right:auto!important;top:24.5rem!important; width:calc(100% - var(--gut))!important;height:var(--rh)!important;gap:1rem!important;margin:0!important;padding:0!important} [data-pk="rez"] .lenta>article.karta{zoom:1!important;width:75rem!important;height:55.8rem!important; border-radius:2.5rem!important;border-color:var(--pale)!important} /* ⛔ ПОДЛОЖКА ФОТО. Пока снимок не загрузился, карточка была белой, и подписи «до»/«через 12 месяцев» висели в пустоте — их белая плашка на белом не видна. На карточке 393 это бросается в глаза сильнее, чем на 292, и читается как брак. Нейтральная плашка #C6CDC7 (палитра брендбука ГМЦ, та же, что под фото первого экрана) держит кадр до загрузки: рамка видна, подписи читаются. */ [data-pk="rez"] .karta .okno{width:75rem!important;height:50.1rem!important; border-radius:2.5rem 2.5rem 0 0!important;background:var(--grey)!important} /* ⛔ ПИЛЮЛЯ НЕ РЕЖЕТ ТЕКСТ НИ ПРИ КАКОМ РАЗМЕРЕ КАРТОЧКИ. Ширина из макета оставлена как МИНИМУМ, а не как жёсткая рамка: коробка тянется по тексту (width:fit-content + min-width), поля 1rem с каждой стороны. Правило владельца: не влезает — тянется коробка, текст не режется. Правая пилюля прижата к правому краю фото, а не отсчитана числом, поэтому при любом масштабе она остаётся внутри с тем же отступом. */ [data-pk="rez"] .karta .k-telo>div.a:nth-child(2){left:1.1rem!important;right:auto!important; top:46.4rem!important;width:fit-content!important;min-width:3.544rem!important;height:2.6rem!important; padding:0 .75rem!important} [data-pk="rez"] .karta .k-telo>div.a:nth-child(3){left:auto!important;right:1.28rem!important; top:46.4rem!important;width:fit-content!important;min-width:10.4rem!important;height:2.6rem!important; padding:0 .75rem!important} [data-pk="rez"] .karta .k-telo>div.a:nth-child(2) p, [data-pk="rez"] .karta .k-telo>div.a:nth-child(3) p{font-size:.945rem!important;line-height:normal!important} [data-pk="rez"] .karta .k-telo>p.a{top:52rem!important;font-size:1.5rem!important;line-height:1.536rem!important} /* «Метод FUE» в макете Regular 14.177, а «N графтов» — DemiBold 15 (Figma 7:1962 / 7:1958) */ [data-pk="rez"] .karta .k-telo>p.a:not(.b6){font-size:1.4177rem!important} [data-pk="rez"] .karta .k-telo>p.a.b6{left:1.3rem!important} [data-pk="rez"] .karta .k-telo>p.a:not(.b6){right:1.1rem!important;left:auto!important} [data-pk="rez"]>div.shkala.a{left:calc(var(--gut) + .1rem)!important; top:calc(24.5rem + var(--rh) + 4.6rem)!important;bottom:auto!important; width:108.7rem!important;height:1rem!important} /* в макете обе стрелки на месте, недоступная — приглушена, а не спрятана */ [data-pk="rez"]>.krug[data-off="1"]{display:flex!important;opacity:.35} /* ⛔ 3rem, а не 2.5: норма зазора текст→кнопка 24 px СЧИТАЕТСЯ В ПИКСЕЛЯХ, а у нас вся раскладка в rem и на 1280 ужимается. 2.5rem давали 22 px на 1280 — брак. 3rem держат 26 px на 1280 и 30 px на 1440. То же у лент процесса и врачей. */ [data-pk="rez"]>.krug{top:calc(24.5rem + var(--rh) + 3rem)!important;bottom:auto!important;right:auto!important; width:4.2rem!important;height:4.2rem!important} [data-pk="rez"]>.krug[data-hod="nazad"] {left:calc(var(--gut) + 110.8rem)!important} [data-pk="rez"]>.krug[data-hod="vpered"]{left:calc(var(--gut) + 116rem)!important} /* ================= 7. ОСНОВАТЕЛЬ КЛИНИКИ — ИЗ МАКЕТА ЦЕЛИКОМ ============ Макет: полоса 1458..2143 (высота 685). Координаты ниже — макетные минус 1458. UI Kit, блок 3: фон #F0F2EC, фото 595x550, текстовая колонка от x=735, плашка имени 217x76, метка 14 заглавными. метка «основатель клиники» 0,50 14 заглавными, трекинг .56 фото 0,85 595x550, скругление 25 плашка имени 22,538 217x76, белая, скругление 15 «Роман Викторович» 40,554 18/24 полужирный «Основатель клиники ГМЦ» 40,576 14/24 кавычка-вектор 615,85 35x33 H1 615,132 ш.584 40/40, четыре строки основной текст 615,317 ш.552 18/21, пять строк ссылка «Читать дальше» 615,467 16/21 ⛔ ЧЕГО НЕ ДЕЛАЮ: в макете под основным текстом стоят ДВЕ колонки текста (270 и 270) с линией-разделителем 168 — «Я прошёл через пересадку волос…» и «Я также прошёл через ринопластику…». Этих текстов в мобильной НЕТ, а тексты из макета тащить запрещено. Колонки и линия пропущены, вопрос передан Джарвису. На их месте стоит мобильная ссылка «Читать дальше». ======================================================================== */ [data-pk="osnovatel"]{height:68.5rem!important;min-height:68.5rem;padding:0!important;overflow:visible} [data-pk="osnovatel"]>*{position:absolute!important;margin:0!important} .sec[data-pk="osnovatel"]>p.a.kick{left:var(--gut)!important;top:5rem!important; font-size:1.4rem!important;line-height:normal!important;letter-spacing:.056rem} [data-pk="osnovatel"]>.okno{left:var(--gut)!important;top:8.5rem!important; width:59.5rem!important;height:55rem!important;border-radius:2.5rem!important;overflow:hidden} /* кадр внутри маски взят из макета: изображение 753.74x942.32 сдвинуто на -87.25 и -247.78 относительно маски 595x550 (узлы 6:102 и 6:104). */ [data-pk="osnovatel"]>.okno>img{left:-8.725rem!important;top:-24.778rem!important; width:75.374rem!important;height:94.232rem!important;object-fit:cover!important;object-position:50% 50%!important} /* плашка имени макета: белая подложка 217x76 под обеими строками. Рисуется псевдоэлементом первой строки — разметка не меняется. */ .sec[data-pk="osnovatel"]>p.a.b6{left:calc(var(--gut) + 4rem)!important;top:55.4rem!important; width:auto!important;isolation:isolate;background:none!important;padding:0!important; font-size:1.8rem!important;line-height:2.4rem!important} .sec[data-pk="osnovatel"]>p.a.b6::before{content:"";position:absolute;left:-1.8rem;top:-1.6rem; width:21.7rem;height:7.6rem;background:#fff;border-radius:1.5rem;z-index:-1} .sec[data-pk="osnovatel"]>p.a.b6+p.a{left:calc(var(--gut) + 4rem)!important;top:57.6rem!important; width:auto!important;max-width:none!important;background:none!important;padding:0!important; font-size:1.4rem!important;line-height:2.4rem!important} [data-pk="osnovatel"]>img.a{left:calc(var(--gut) + 61.5rem)!important;top:8.5rem!important; width:3.5rem!important;height:auto!important} [data-pk="osnovatel"]>h2.zag{left:calc(var(--gut) + 61.5rem)!important;top:13.2rem!important; width:58.4rem!important;max-width:58.4rem!important;font-size:4rem!important;line-height:4rem!important} .sec[data-pk="osnovatel"]>p.a:nth-child(7){left:calc(var(--gut) + 61.5rem)!important;top:31.7rem!important; width:55.2rem!important;max-width:55.2rem!important;font-size:1.8rem!important;line-height:2.1rem!important} .sec[data-pk="osnovatel"]>p.a:nth-child(7) br{display:none} [data-pk="osnovatel"]>a.tlink{left:calc(var(--gut) + 61.5rem)!important;top:46.7rem!important; font-size:1.6rem!important;line-height:2.1rem!important} /* ================= 8. МЕТОДЫ FUE И DHI — ИЗ МАКЕТА ЦЕЛИКОМ ============== Макет: полоса 2143..3206. Шапка блока — наша секция met-vkl (2143..2345), карточки и всё ниже — секция met (2345..3206). метка «сравнение» 0,50 87x18 14 заглавными H2 0,83 874x44 36/44 подзаголовок 0,137 1012x40 16/20, две строки карточка 393x542, x 120 / 523 / 926 — шаг 403, жёлоб 10 (UI Kit) ВНУТРИ КАРТОЧКИ (от её левого верхнего угла): заголовок метода 20,22 47x25 20 подзаголовок 20,52 331x20 16 окно фото 20,82 353x194 скругление 25 бейдж скидки 20,286 147x22 цена 20,316 138x30 30 полужирный старая цена 168,329 91x15 12, зачёркнута линия 20,359 353x1 СТРОКА ХАРАКТЕРИСТИКИ — ОДНА: подпись слева от 20, плашка справа до 373, обе на одной высоте. Первая строка 370, шаг 32, высота плашки 22. ⛔ ПРАВИЛО НЕ ЗАВИСИТ ОТ ЧИСЛА СТРОК. Ряды нумерует pk.js по разметке (подпись + следующая за ней плашка), номер приезжает в --r, число строк — в --n. Пять строк, четыре, семь — раскладка и высота карточки считаются формулой, а не переписываются. Высота = 41.4 + (n-1)*3.2 rem. ⛔ ВКЛАДКИ FUE/DHI/КОМБО на ПК не показываются: в макете их нет, там все три карточки стоят в ряд. На мобильной вкладки остаются как были. ======================================================================== */ [data-pk="met-vkl"]{height:20.2rem!important;min-height:20.2rem;padding:0!important;overflow:visible} [data-pk="met-vkl"]>*{position:absolute!important;margin:0!important} .sec[data-pk="met-vkl"]>p.a.kick{left:var(--gut)!important;top:5rem!important; font-size:1.4rem!important;line-height:normal!important;letter-spacing:.056rem} [data-pk="met-vkl"]>h2.zag{left:var(--gut)!important;top:8.3rem!important; width:87.4rem!important;max-width:87.4rem!important;font-size:3.6rem!important;line-height:4.4rem!important} [data-pk="met-vkl"]>h2.zag br{display:none} /* ⛔ ОТСТУПЛЕНИЕ ОТ МАКЕТА: в макете колонка 1012 px, но при кегле 16 это 98 знаков в строке при пределе 90 — глаз теряет начало следующей строки. Сужено до 576 px (≈55 знаков). То же у абзаца блока «Пересадка нужна не всем». */ .sec[data-pk="met-vkl"]>p.a:not(.kick){left:var(--gut)!important;top:13.7rem!important; width:57.6rem!important;max-width:57.6rem!important;font-size:1.6rem!important;line-height:2rem!important} .sec[data-pk="met-vkl"]>p.a:not(.kick) br{display:none} [data-pk="met-vkl"]>.vkl{display:none!important} /* --- секция карточек ---------------------------------------------------- */ [data-pk="met"]{--n:5;--kh:calc(41.4rem + (var(--n) - 1)*3.2rem); /* ⛔ 22.09: высота была calc(var(--kh) + 31.9rem) — хвост секции держал зелёную плашку CTA, убранную по слову владельца (см. ниже). После неё в хвосте остаётся только сноска: её низ = kh + 2.6rem, плюс поле секции 50 px из макета. */ height:calc(var(--kh) + 7.6rem)!important;min-height:0;padding:0!important;overflow:visible;position:relative} [data-pk="met"]>*{position:absolute!important;margin:0!important} [data-pk="met"]>.lenta{left:var(--gut)!important;right:auto!important;top:0!important; width:calc(100% - var(--gut))!important;height:var(--kh)!important;gap:1rem!important; margin:0!important;padding:0!important} [data-pk="met"] article.karta{zoom:1!important;width:39.3rem!important;height:var(--kh)!important} [data-pk="met"] .karta .k-telo{position:relative;width:39.3rem;height:var(--kh)} [data-pk="met"] .karta .k-telo>*{position:absolute!important} [data-pk="met"] .karta .k-telo>h3{left:2rem!important;top:2.2rem!important; font-size:2rem!important;line-height:2.5rem!important;white-space:nowrap} [data-pk="met"] .karta .k-telo>p:nth-of-type(1){left:2rem!important;top:5.2rem!important; width:33.1rem!important;max-width:33.1rem!important;font-size:1.6rem!important;line-height:2rem!important} /* ФОТО-ОБЛАСТЬ. У карточки FUE это одно окно, у DHI и комбо — подложка своего цвета плюс окно внутри неё, сдвинутое и уже. Поэтому правило не знает, сколько тут коробок: pk.js помечает внешнюю коробку data-fbox, а вложенное окно — data-foto и отдаёт его сдвиг и размер ДОЛЯМИ от коробки (--ol/--ot/--ow/--oh). Внешняя коробка встаёт в макетные 353x194, вложенное окно — в ту же долю, что и в мобильной. Появится карточка с другой раскладкой фото — считается сама. */ [data-pk="met"] .karta .k-telo>[data-fbox]{left:2rem!important;top:8.2rem!important; width:35.3rem!important;height:19.4rem!important;border-radius:2.5rem!important;overflow:hidden} [data-pk="met"] .karta .k-telo>[data-foto]{ left:calc(2rem + var(--ol)*35.3rem)!important;top:calc(8.2rem + var(--ot)*19.4rem)!important; width:calc(var(--ow)*35.3rem)!important;height:calc(var(--oh)*19.4rem)!important} [data-pk="met"] .karta .k-telo>[data-fbox]>img,[data-pk="met"] .karta .k-telo>[data-foto]>img{ left:0!important;top:0!important;width:100%!important;height:100%!important;object-fit:cover!important} [data-pk="met"] .karta .k-telo>.chip:not([data-mrow]){left:2rem!important;right:auto!important;top:28.6rem!important;height:2.2rem!important} [data-pk="met"] .karta .k-telo>p.b6{left:2rem!important;top:31.6rem!important; font-size:3rem!important;line-height:3rem!important} [data-pk="met"] .karta .k-telo>p.b6+p{left:22.2rem!important;top:32.9rem!important; font-size:1.2rem!important;line-height:1.5rem!important} [data-pk="met"] .karta .k-telo>img{left:2rem!important;top:35.9rem!important;width:35.3rem!important;height:.1rem!important} /* строка характеристики: подпись и плашка на одной высоте, номер ряда от pk.js */ [data-pk="met"] .karta .k-telo>p[data-mrow]{left:2rem!important;right:auto!important; top:calc(37rem + var(--r)*3.2rem)!important;height:2.2rem!important; font-size:1.2rem!important;line-height:2.2rem!important;white-space:nowrap!important;width:auto!important} [data-pk="met"] .karta .k-telo>.chip[data-mrow]{right:2rem!important;left:auto!important; top:calc(37rem + var(--r)*3.2rem)!important;height:2.2rem!important;font-size:.8rem!important; padding:.2rem 1rem!important;gap:.5rem!important} /* сноска под лентой карточек */ .sec[data-pk="met"]>p.a{left:var(--gut)!important;top:calc(var(--kh) + 1.3rem)!important; width:120rem!important;max-width:120rem!important;font-size:1rem!important;line-height:1.3rem!important} .sec[data-pk="met"]>p.a br{display:none} /* ⛔ ЗЕЛЁНАЯ ПЛАШКА CTA УБРАНА 22.09 ПО СЛОВУ ВЛАДЕЛЬЦА. Дословно: «я вообще не понимаю, зачем нам зелёная плашка, в которой только одна кнопка... можно просто убирать этот блок, он нам не нужен». Здесь стояли два правила: ::before рисовал заливку #DDEEC2 119.9x19.1rem под лентой, а >a.knopka сажал на неё кнопку «Book a consultation» — единственное, что на плашке было. Убрано и то и другое; высота секции выше урезана на те же 24.3rem, чтобы соседи сомкнулись. ⛔ РАЗМЕТКА НЕ ТРОНУТА: кнопка остаётся в HTML и на телефоне работает как раньше (плашки на 390 не было вовсе). Прочие точки заявки на странице не затронуты. */ [data-pk="met"]>a.knopka{display:none!important} /* ================= 9. РОЛИКИ — ИЗ МАКЕТА ЦЕЛИКОМ ======================= Макет: полоса 3206..3833 (высота 627), группа 8:2117. Координаты минус 3206. H2 1,0 ш.897 36/44, две строки лента карточек 1,118 карточка 192x320, шаг 201.5 (жёлоб 9.5) кнопка play по центру карточки, 39x39 шкала 0,469 1087x10, бегунок 272 стрелки 1107,453 42x42, шаг 52 кнопка «Смотреть еще» 1,527 192x50 кнопка «Записаться» 203,527 273x50 ======================================================================== */ [data-pk="vid"]{height:62.7rem!important;min-height:62.7rem;padding:0!important;overflow:visible} [data-pk="vid"]>*{position:absolute!important;margin:0!important} [data-pk="vid"]>h2.zag{left:calc(var(--gut) + .1rem)!important;top:0!important; width:89.7rem!important;max-width:89.7rem!important;font-size:3.6rem!important;line-height:4.4rem!important} [data-pk="vid"]>h2.zag br{display:none} [data-pk="vid"]>.lenta{left:calc(var(--gut) + .1rem)!important;right:auto!important;top:11.8rem!important; width:calc(100% - var(--gut))!important;height:32rem!important;gap:.95rem!important; margin:0!important;padding:0!important} [data-pk="vid"] .lenta>.okno{zoom:1!important;flex:0 0 auto!important; width:19.2rem!important;height:32rem!important;border-radius:2.5rem!important} [data-pk="vid"] .lenta>.okno img{width:100%!important;height:100%!important;object-fit:cover!important} [data-pk="vid"] .lenta>.okno .play-kn{left:7.65rem!important;top:14.05rem!important; width:3.9rem!important;height:3.9rem!important} [data-pk="vid"] .lenta>.okno .play-kn img{width:3.9rem!important;height:3.9rem!important} [data-pk="vid"]>div.shkala.a{left:var(--gut)!important;top:46.9rem!important;bottom:auto!important; width:108.7rem!important;height:1rem!important} [data-pk="vid"]>.krug{top:45.3rem!important;bottom:auto!important;right:auto!important; width:4.2rem!important;height:4.2rem!important} [data-pk="vid"]>.krug[data-off="1"]{display:flex!important;opacity:.35} [data-pk="vid"]>.krug[data-hod="nazad"] {left:calc(var(--gut) + 110.7rem)!important} [data-pk="vid"]>.krug[data-hod="vpered"]{left:calc(var(--gut) + 115.9rem)!important} [data-pk="vid"]>a.knopka{top:52.7rem!important;bottom:auto!important;height:5rem!important; border-radius:1.5rem!important;font-size:1.6rem!important;padding:0!important} [data-pk="vid"]>a.k-pale{left:calc(var(--gut) + .1rem)!important;width:19.2rem!important} [data-pk="vid"]>a.k-dark{left:calc(var(--gut) + 20.3rem)!important;width:27.3rem!important} .sec[data-pk="sho"]{padding-bottom:12rem} /* ================= 10. ОТЗЫВЫ — ИЗ МАКЕТА ЦЕЛИКОМ ===================== Макет: полоса 3833..4273 (высота 440). Координаты минус 3833. метка «отзывы» 0,50 14 заглавными H2 0,83 ш.874 36/44 подзаголовок 0,137 ш.658 16/20 плашка рейтинга 940,107 148x50 белая, скругление pill «5.0» 954,124 · пять звёзд 987,123 по 18, шаг 17.5 «Высокая оценка» 1098,119 ш.116, две строки 12/14 карточка площадки 0,187 293x203, шаг 303 (UI Kit chetyre_otzyvy 293) «Оставить отзыв» 20,347 ⛔ Адресация по НОМЕРУ РЕБЁНКА, а не по тегу с классом: в этой секции три разных

(подзаголовок, «5.0», «Высокая оценка») и правило по тегу цепляло все три разом — они складывались в одну точку. Номера здесь устойчивы: мобильная под замком. Карточки и ссылки — цепочкой ~, их число роли не играет. ====================================================================== */ [data-pk="otzyvy"]{height:44rem!important;min-height:44rem;padding:0!important;overflow:visible; --ox:calc(var(--gut) + 94rem)} [data-pk="otzyvy"]>*{position:absolute!important;margin:0!important} .sec[data-pk="otzyvy"]>p.a:nth-child(1){left:var(--gut)!important;top:5rem!important; font-size:1.4rem!important;line-height:normal!important;letter-spacing:.056rem} .sec[data-pk="otzyvy"]>:nth-child(2){left:var(--gut)!important;top:8.3rem!important; width:87.4rem!important;max-width:87.4rem!important;font-size:3.6rem!important;line-height:4.4rem!important} .sec[data-pk="otzyvy"]>p.a:nth-child(3){left:var(--gut)!important;top:13.7rem!important; width:65.8rem!important;max-width:65.8rem!important;font-size:1.6rem!important;line-height:2rem!important} .sec[data-pk="otzyvy"]>p.a:nth-child(3) br{display:none} .sec[data-pk="otzyvy"]>:nth-child(4){left:var(--ox)!important;top:10.7rem!important; width:14.8rem!important;height:5rem!important;border-radius:5rem!important} .sec[data-pk="otzyvy"]>p.a:nth-child(5){left:calc(var(--ox) + 1.4rem)!important;top:12.4rem!important; font-size:1.6rem!important;line-height:1.6rem!important} .sec[data-pk="otzyvy"]>:nth-child(n+6):nth-child(-n+10){top:12.3rem!important; width:1.8rem!important;height:1.8rem!important} .sec[data-pk="otzyvy"]>:nth-child(6) {left:calc(var(--ox) + 4.7rem)!important} .sec[data-pk="otzyvy"]>:nth-child(7) {left:calc(var(--ox) + 6.45rem)!important} .sec[data-pk="otzyvy"]>:nth-child(8) {left:calc(var(--ox) + 8.2rem)!important} .sec[data-pk="otzyvy"]>:nth-child(9) {left:calc(var(--ox) + 9.95rem)!important} .sec[data-pk="otzyvy"]>:nth-child(10){left:calc(var(--ox) + 11.7rem)!important} .sec[data-pk="otzyvy"]>p.a:nth-child(11){left:calc(var(--ox) + 15.8rem)!important;top:11.9rem!important; width:11.6rem!important;max-width:11.6rem!important;font-size:1.2rem!important;line-height:1.4rem!important} /* карточки площадок: мобильная 145x100 -> макетные 293x203 (масштаб 2.021, пропорции сходятся, внутренняя раскладка карточки сохраняется) */ [data-pk="otzyvy"]>.karta{top:18.7rem!important;width:14.5rem!important;height:10.04rem!important; transform:scale(2.021);transform-origin:0 0} [data-pk="otzyvy"]>.karta{left:var(--gut)!important} [data-pk="otzyvy"]>.karta~.karta{left:calc(var(--gut) + 30.3rem)!important} [data-pk="otzyvy"]>.karta~.karta~.karta{left:calc(var(--gut) + 60.6rem)!important} [data-pk="otzyvy"]>.karta~.karta~.karta~.karta{left:calc(var(--gut) + 90.8rem)!important} [data-pk="otzyvy"]>.otzyv-ssylka{top:34.7rem!important;font-size:1.4rem!important;line-height:1.8rem!important} [data-pk="otzyvy"]>.otzyv-ssylka{left:calc(var(--gut) + 2rem)!important} [data-pk="otzyvy"]>.otzyv-ssylka~.otzyv-ssylka{left:calc(var(--gut) + 32.3rem)!important} [data-pk="otzyvy"]>.otzyv-ssylka~.otzyv-ssylka~.otzyv-ssylka{left:calc(var(--gut) + 62.6rem)!important} [data-pk="otzyvy"]>.otzyv-ssylka~.otzyv-ssylka~.otzyv-ssylka~.otzyv-ssylka{left:calc(var(--gut) + 92.8rem)!important} /* ⛔ 22.09: здесь лежали правила .pk-cta-zag / .pk-cta-pod — текста зелёной плашки под методами. Плашка убрана по слову владельца, вместе с ней убраны и её стили, и JS, который клал в неё копию текста (раздел 6 скрипта ПК-слоя). */ /* ================= 11. О КЛИНИКЕ + СВЯЗЬ — ИЗ МАКЕТА =================== Макет: полоса 4273..5015 (высота 742). Координаты минус 4273. метка «о клинике» 0,50 14 заглавными H2 0,83 ш.1086 36/44, одна строка подзаголовок 0,137 ш.668 16/20 фото 0,187 595x450, скругление 25 зелёная карточка 605,187 595x450, скругление 25 заголовок +20,+16 ш.339 24/30 подзаголовок +20,+86 ш.393 16/20 строка связи +20,+155 555x49, шаг 56 (155/211/266/322) иконка +7,+6 37x37 подпись +54 16 · правая подпись справа 11, 12 кнопка +20,+378 555x50 Фото и карточка стоят РЯДОМ, а у нас это две соседние секции: вторая поднимается на высоту первой (height:0 + top), в поток ничего не добавляя. ====================================================================== */ [data-pk="klinika"]{height:74.2rem!important;min-height:74.2rem;padding:0!important;overflow:visible} [data-pk="klinika"]>*{position:absolute!important;margin:0!important} .sec[data-pk="klinika"]>p.a.kick{left:var(--gut)!important;top:5rem!important; font-size:1.4rem!important;line-height:normal!important;letter-spacing:.056rem} [data-pk="klinika"]>h2.zag{left:var(--gut)!important;top:8.3rem!important; width:108.6rem!important;max-width:108.6rem!important;font-size:3.6rem!important;line-height:4.4rem!important} [data-pk="klinika"]>h2.zag br{display:none} .sec[data-pk="klinika"]>p.a:not(.kick){left:var(--gut)!important;top:13.7rem!important; width:66.8rem!important;max-width:66.8rem!important;font-size:1.6rem!important;line-height:2rem!important} .sec[data-pk="klinika"]>p.a:not(.kick) br{display:none} [data-pk="klinika"]>.okno{left:var(--gut)!important;right:auto!important;top:18.7rem!important; width:59.5rem!important;height:45rem!important;border-radius:2.5rem!important; transform:none!important;overflow:hidden} [data-pk="klinika"]>.okno>img{left:0!important;top:0!important; width:100%!important;height:100%!important;object-fit:cover!important} [data-pk="svyaz1"]{position:relative!important;top:-74.2rem!important;height:0!important;min-height:0!important; padding:0!important;margin:0!important;overflow:visible!important;background:transparent!important} [data-pk="svyaz1"]>.a{position:absolute!important;left:calc(var(--gut) + 60.5rem)!important;top:18.7rem!important; width:59.5rem!important;max-width:none!important;height:45rem!important;min-height:0!important; border-radius:2.5rem!important;margin:0!important} [data-pk="svyaz1"]>.a>h3{left:2rem!important;top:1.6rem!important; width:33.9rem!important;max-width:33.9rem!important;font-size:2.4rem!important;line-height:3rem!important;height:auto!important} [data-pk="svyaz1"]>.a>h3 br{display:none} [data-pk="svyaz1"]>.a>p{left:2rem!important;top:8.6rem!important; width:39.3rem!important;max-width:39.3rem!important;font-size:1.6rem!important;line-height:2rem!important;height:auto!important} [data-pk="svyaz1"]>.a>p br{display:none} [data-pk="svyaz1"] .svyaz-row{left:2rem!important;width:55.5rem!important;height:4.9rem!important; border-radius:1.5rem!important} [data-pk="svyaz1"] .svyaz-row>img.a{left:.7rem!important;top:.6rem!important;width:3.7rem!important;height:3.7rem!important} [data-pk="svyaz1"] .svyaz-l{left:5.4rem!important;font-size:1.6rem!important} [data-pk="svyaz1"] .svyaz-r{right:1.1rem!important;font-size:1.2rem!important} [data-pk="svyaz1"]>.a>.svyaz-row:nth-of-type(1){top:15.5rem!important} [data-pk="svyaz1"]>.a>.svyaz-row:nth-of-type(2){top:21.1rem!important} [data-pk="svyaz1"]>.a>.svyaz-row:nth-of-type(3){top:26.6rem!important} [data-pk="svyaz1"]>.a>.svyaz-row:nth-of-type(4){top:32.2rem!important} [data-pk="svyaz1"]>.a>a.knopka{left:2rem!important;top:37.8rem!important; width:55.5rem!important;height:5rem!important;border-radius:1.5rem!important;font-size:1.6rem!important} /* ================= 12. ДЗЕН — ИЗ МАКЕТА =============================== Макет: полоса 5015..5400 (высота 385), группа 6:763. Координаты минус 5015. карточка 0,0 1200x330, скругление 25 заголовок +20,+20 ш.335 24/28 текст +20,+52 ш.516 14/18, три строки кнопка +20,+142 272x50 окно с телефоном +605,+20 575x290 (мобильное окно 260x140, масштаб 2.2115) ====================================================================== */ [data-pk="dzen"]{height:38.5rem!important;min-height:38.5rem;padding:0!important;overflow:visible} [data-pk="dzen"]>.a{position:absolute!important;left:var(--gut)!important;top:0!important; width:120rem!important;max-width:none!important;height:33rem!important;min-height:0!important; border-radius:2.5rem!important;margin:0!important} [data-pk="dzen"]>.a>h2{left:2rem!important;top:2rem!important; width:33.5rem!important;max-width:33.5rem!important;font-size:2.4rem!important;line-height:2.8rem!important;height:auto!important} [data-pk="dzen"]>.a>p{left:2rem!important;top:5.2rem!important; width:51.6rem!important;max-width:51.6rem!important;font-size:1.4rem!important;line-height:1.8rem!important} [data-pk="dzen"]>.a>p br{display:none} [data-pk="dzen"]>.a>div{left:60.5rem!important;top:2rem!important; transform:scale(2.2115);transform-origin:0 0} [data-pk="dzen"]>.a>a.knopka{left:2rem!important;top:14.2rem!important; width:27.2rem!important;height:5rem!important;border-radius:1.5rem!important;font-size:1.6rem!important} /* ================= 13. ПЕРЕСАДКА НУЖНА НЕ ВСЕМ — ИЗ МАКЕТА ============= Макет: полоса 5400..6400. Координаты минус 5400. H2 0,40 ш.475 36/44 абзац 0,94 ш.1001 16/20, две строки левая карточка 0,164 595, высота по содержимому правая карточка 605,164 595, высота по содержимому заголовок карточки +20,+20 18 фото карточки +403,+21 172x126, скругление 15 строка +20,+153 555x40, шаг 45; текст +33, значок +13 плашка подбора 0,+30 от низа колонок 1199x191, скругление 25 ⛔ ВЫСОТЫ НЕ ЗАШИТЫ. В макете в каждой колонке по 8 строк, у нас «можно» 8, «нельзя» 11 — текст не режем, коробка тянется. Число строк каждой панели считает pk.js и отдаёт в --r (номер строки) и --h (высота панели); высоты секций и подъём второй половины карточки считаются формулой. Добавят двенадцатую строку — всё пересчитается само. ⛔ ВКЛАДКИ «Можно/Нельзя» на ПК погашены: в макете их нет, там обе колонки стоят рядом. На телефоне вкладки работают как работали. ⛔ АБЗАЦ НЕ ДУБЛИРУЮ: макет показывает один и тот же текст дважды — в шапке и внутри левой карточки. В мобильной он один, и там прямой комментарий, что дубль убирали намеренно. Ставлю один раз, на макетной координате шапки. ====================================================================== */ [data-pk="mn-vkl"]{height:16.4rem!important;min-height:16.4rem;padding:0!important;overflow:visible} [data-pk="mn-vkl"]>*{position:absolute!important;margin:0!important} [data-pk="mn-vkl"]>.vkl{display:none!important} [data-pk="mn-vkl"]>h2.zag{left:var(--gut)!important;top:4rem!important; width:47.5rem!important;max-width:47.5rem!important;font-size:3.6rem!important;line-height:4.4rem!important} .sec[data-pk="mn-vkl"]>p.a{left:var(--gut)!important;top:9.4rem!important; width:57.6rem!important;max-width:57.6rem!important;font-size:1.6rem!important;line-height:2rem!important} .sec[data-pk="mn-vkl"]>p.a br{display:none} /* --- две колонки: mn1 держит верх карточек, mn2 продолжает их строками --- */ [data-pk="mn1"],[data-pk="mn2"]{padding:0!important;overflow:visible;background:#fff} [data-pk="mn1"]{height:var(--sh1,33.3rem)!important;min-height:0} [data-pk="mn2"]{height:var(--sh2,32rem)!important;min-height:0} /* ⛔ вес селектора выше, чем у глобального [hidden]: на ПК видны ОБЕ панели */ [data-pk="mn1"]>.a[data-panel-mozhno],[data-pk="mn1"]>.a[data-panel-nelzya], [data-pk="mn2"]>.a[data-panel-mozhno],[data-pk="mn2"]>.a[data-panel-nelzya]{ display:block!important;position:absolute!important; width:59.5rem!important;max-width:none!important;margin:0!important} [data-pk="mn1"]>.a[data-panel-mozhno],[data-pk="mn2"]>.a[data-panel-mozhno]{left:var(--gut)!important} [data-pk="mn1"]>.a[data-panel-nelzya],[data-pk="mn2"]>.a[data-panel-nelzya]{left:calc(var(--gut) + 60.5rem)!important} [data-pk="mn1"]>.a{top:0!important;height:var(--h)!important} [data-pk="mn2"]>.a{top:var(--sdvig)!important;height:var(--h)!important} /* ⛔ на ПК половины слиты в одну карточку — скругление по всем четырём углам, иначе низ остаётся прямым: нижние половины (mn2) схлопнуты в ноль */ [data-pk="mn1"]>.a[data-panel-mozhno],[data-pk="mn1"]>.a[data-panel-nelzya]{border-radius:1.5rem!important} /* заголовок и фото — только в верхней половине карточки */ [data-pk="mn1"]>.a>h3{left:2rem!important;top:2rem!important;width:auto!important; font-size:1.8rem!important;line-height:2.2rem!important} [data-pk="mn1"]>.a>.okno{left:40.3rem!important;right:auto!important;top:2.1rem!important; width:17.2rem!important;height:12.6rem!important;border-radius:1.5rem!important; transform:none!important;overflow:hidden} [data-pk="mn1"]>.a>.okno>img{left:0!important;top:0!important; width:100%!important;height:100%!important;object-fit:cover!important} /* строки: место считает номер ряда, а не порядковый селектор */ [data-pk="mn1"] .mrow,[data-pk="mn2"] .mrow{left:2rem!important;width:55.5rem!important;height:4rem!important} [data-pk="mn1"] .mrow{top:calc(15.3rem + var(--r)*4.5rem)!important} [data-pk="mn2"] .mrow{top:calc(var(--r)*4.5rem)!important} [data-pk="mn1"] .mrow .mt,[data-pk="mn2"] .mrow .mt{left:3.3rem!important; width:calc(100% - 5rem)!important;font-size:1.2rem!important;line-height:1.6rem!important} [data-pk="mn1"] .mrow>img.a,[data-pk="mn2"] .mrow>img.a{left:1.3rem!important;top:1.5rem!important; width:1rem!important;height:1rem!important} /* --- плашка подбора: макет 1199x191 --- */ [data-pk="podbor"]{height:33.2rem!important;min-height:33.2rem;padding:0!important;overflow:visible} [data-pk="podbor"]>.a{position:absolute!important;left:var(--gut)!important;top:3rem!important; width:119.9rem!important;max-width:none!important;height:21.1rem!important;min-height:0!important; border-radius:2.5rem!important;margin:0!important} [data-pk="podbor"]>.a>h3{left:1.9rem!important;top:1.7rem!important; width:65.5rem!important;max-width:65.5rem!important;font-size:2.4rem!important;line-height:3rem!important;height:auto!important} [data-pk="podbor"]>.a>h3 br{display:none} [data-pk="podbor"]>.a>p{left:1.9rem!important;top:4.9rem!important; width:68.7rem!important;max-width:68.7rem!important;font-size:1.6rem!important;line-height:2rem!important} [data-pk="podbor"]>.a>p br{display:none} [data-pk="podbor"]>.a>.okno{left:80.6rem!important;right:auto!important;top:2rem!important; width:37.3rem!important;height:15.1rem!important;border-radius:1.5rem!important; transform:none!important;overflow:hidden} [data-pk="podbor"]>.a>.okno>img{left:0!important;top:0!important; width:100%!important;height:100%!important;object-fit:cover!important} /* EN-текст на строку длиннее RU: кнопка и плашка ниже на 2rem, зазор = макетные 3rem */ [data-pk="podbor"]>.a>a.knopka{left:1.9rem!important;top:13.9rem!important; width:30rem!important;height:5rem!important;border-radius:1.5rem!important;font-size:1.6rem!important} /* ================= 14. ЧАСТЫЕ ВОПРОСЫ: две колонки по макету ============ */ /* ⛔ !important обязателен: правила .faq-* лежат ВНУТРИ тела страницы, то есть позже нашего слоя в шапке; при равной силе селектора выигрывают они. */ /* ⛔ БЫЛО grid-template-columns:59.5rem 59.5rem — ДВЕ колонки ВНУТРИ каждой ленты. Это осталось от старого приёма, когда обе колонки макета лежали в ОДНОЙ ленте. По §20 колонки макета собраны иначе: левая — лента секции faq, правая — лента секции faq2, каждая шириной 59.5rem. Две колонки внутри ленты 59.5rem уносили вторую колонку на x=1178 при экране 1280: текст срезался правым краем, а вопросы faq ложились ПОВЕРХ вопросов faq2. Колонка одна — ширина и шаг остаются макетные. */ .faq-list{display:grid!important;grid-template-columns:59.5rem;gap:1.5rem 1rem;height:auto!important; position:relative!important;left:auto!important;top:auto!important; width:100%!important;max-width:100%;margin:3rem 0 0!important;align-content:start} .faq-item{height:auto!important;align-self:start} .faq-t{left:1.5rem!important;top:1.6rem!important;width:auto!important;right:6rem;font-size:1.4rem!important;line-height:1.8rem!important} .faq-z{left:auto!important;right:2rem!important;top:1.8rem!important} .faq-item[data-open="1"] .faq-body{display:block!important;padding:0 1.5rem 2rem!important} .faq-item[data-open="0"] .faq-body{display:none!important} .faq-a{width:auto!important;max-width:56rem;margin:0!important;font-size:1.3rem!important;line-height:1.8rem!important} .faq-body>.okno{margin:1.5rem 0 1.6rem!important} /* ПК: текст ответа стоял вплотную к фото (0 px) */ /* ================= 15. ЦЕНЫ ============================================= */ /* Внутри карточки цены зазор «рассрочка -> кнопка» на ПК выходил 20 px при норме 24: та же вёрстка, просто базовый размер вырос. */ #ceny .lenta .karta .knopka{margin-top:.7rem} /* ================= 16. ДОКУМЕНТЫ И РЕКВИЗИТЫ ============================ */ /* После ленты идут разделитель и реквизиты — прижаты к низу секции, пульт ленты встаёт между лентой и разделителем. */ .sec[data-pk="dok"]:has(>.lenta){padding-bottom:18rem} /* место реквизитам: лента кончается на 549, подвал начинается с 593 */ /* Смещения пульта в dok: он ниже ленты и над юрстрокой. Видимостью ведает ОБЩЕЕ правило выше — частной заплатки здесь больше нет. */ [data-pk="dok"]>.krug{bottom:16.6rem!important} [data-pk="dok"]>.shkala{bottom:18.2rem!important} [data-pk="dok"]>:nth-child(n+7){position:absolute!important;margin:0} [data-pk="dok"]>:nth-child(7) {left:var(--gut)!important;bottom:11rem!important;width:calc(100% - var(--gut)*2)!important} [data-pk="dok"]>:nth-child(8) {left:var(--gut)!important;bottom:4rem!important} [data-pk="dok"]>:nth-child(9) {left:calc(var(--gut) + 24rem)!important;bottom:4rem!important} [data-pk="dok"]>:nth-child(10){left:calc(var(--gut) + 42rem)!important;bottom:4rem!important} [data-pk="dok"]>:nth-child(11){left:calc(100% - var(--gut) - 44rem)!important;bottom:4.6rem!important} [data-pk="dok"]>:nth-child(12){left:calc(100% - var(--gut) - 40.6rem)!important;bottom:4.6rem!important;width:16rem!important;max-width:16rem!important} [data-pk="dok"]>:nth-child(13){left:calc(100% - var(--gut) - 20rem)!important;bottom:4.4rem!important} [data-pk="dok"]>:nth-child(14){left:calc(100% - var(--gut) - 16.6rem)!important;bottom:5.4rem!important} /* ================= 17. Попап ролика/фото ================================ */ .okno-pop{--vys:calc(100vh - 12rem)} @supports (height:1dvh){.okno-pop{--vys:calc(100dvh - 12rem)}} .pop-telo{max-width:52rem} /* ================= 14. ЦЕНЫ — ИЗ МАКЕТА ================================ Макет: полоса 6400..6962 (высота 562). Координаты минус 6400. метка «услуги» 0,9 14 заглавными H2 0,42 ш.1086 36/44 подзаголовок 0,96 ш.824 16/20 карточка 0,131 292x401, шаг 302.7 (4x292+3x10 = 1198, UI Kit) Карточка мобильной 248x342 -> макетные 292x401: пропорции сходятся (1.177 и 1.172), поэтому масштаб один на всю карточку, внутренняя раскладка сохраняется один в один. Число карточек роли не играет. ====================================================================== */ [data-pk="cen"]{height:56.2rem!important;min-height:56.2rem;padding:0!important;overflow:visible} [data-pk="cen"]>*{position:absolute!important;margin:0!important} .sec[data-pk="cen"]>p.a.kick{left:var(--gut)!important;top:.9rem!important; font-size:1.4rem!important;line-height:normal!important;letter-spacing:.056rem} [data-pk="cen"]>h2.zag{left:var(--gut)!important;top:4.2rem!important; width:108.6rem!important;max-width:108.6rem!important;font-size:3.6rem!important;line-height:4.4rem!important} [data-pk="cen"]>h2.zag br{display:none} .sec[data-pk="cen"]>p.a.lead{left:var(--gut)!important;top:9.6rem!important; width:82.4rem!important;max-width:82.4rem!important;font-size:1.6rem!important;line-height:2rem!important} .sec[data-pk="cen"]>p.a.lead br{display:none} [data-pk="cen"]>.lenta{left:var(--gut)!important;right:auto!important;top:13.1rem!important; width:calc(100% - var(--gut))!important;height:40.1rem!important;gap:1rem!important; margin:0!important;padding:0!important;scroll-padding-left:0!important} [data-pk="cen"] .lenta>article.karta{zoom:1.177!important;width:24.8rem!important;height:34.07rem!important} /* подложка под фото: пока снимок грузится, на белой карточке была дыра — та же беда, что ловили на карточках результатов. #C6CDC7 из палитры ГМЦ. */ [data-pk="cen"] .karta .okno{background:var(--grey)!important} /* ================= 15. ЗАЯВКА «Узнайте свою цену» — ИЗ МАКЕТА ========== Макет: полоса 6962..7286 (высота 324), группа 7:522. Координаты минус 6962. плашка 0,0 1200x274, скругление 25 заголовок +19,+21 ш.510 24/30 абзац +19,+61 ш.459 16/20 фото +19,+127 273x124, скругление 15 подпись справа +615,+21 ш.413 поле +615,+71 555x50 · второе +615,+126 кнопка +615,+181 555x50 галочка +615,+236 15x15 · согласие +633,+237 ш.515 ====================================================================== */ /* ⛔ ФИКС 22.09 (баг владельца «блок не на всю ширину»): салатовый фон стоял на ВНУТРЕННЕЙ плашке (.a, ширина 120rem = колонка макета), а не на самой секции. Соседние секции красятся по section.sec (width:100%), поэтому у них цвет идёт до краёв экрана, а у этой оставались белые поля по бокам. Лечение — как у соседей: цвет на секцию, содержимое остаётся в колонке (плашка не двигается, её left/width не тронуты, стала прозрачной). Вертикальные поля выровнены по ритму страницы: 50 сверху (плашка top:2.9rem + 2.1rem до заголовка внутри неё) и 50 снизу (33.1rem - 2.9rem - 25.2rem до низа содержимого). Сдвиг задан через top плашки, а не через padding секции: абсолютный ребёнок считает координаты от padding-box и падинг родителя его не двигает. Боковые поля внутри плашки (19 слева / 30 справа от макета) убраны: они были полями КАРТОЧКИ. Полосу на всю ширину держит колонка страницы, поэтому левая колонка встаёт на 0, правая — на 64.5rem (64.5+55.5 = ровно 120rem), и текст с формой стоят по тем же вертикалям, что содержимое соседних секций. */ [data-pk="zayavka2"]{height:33.1rem!important;min-height:33.1rem;padding:0!important;overflow:visible; background:var(--lime)!important} [data-pk="zayavka2"]>.a{position:absolute!important;left:var(--gut)!important;top:2.9rem!important; width:120rem!important;max-width:none!important;height:27.4rem!important;min-height:0!important; border-radius:0!important;background:none!important;margin:0!important} [data-pk="zayavka2"]>.a>h3{left:0!important;top:2.1rem!important; width:51rem!important;max-width:51rem!important;font-size:2.4rem!important;line-height:3rem!important;height:auto!important} [data-pk="zayavka2"]>.a>h3 br{display:none} [data-pk="zayavka2"]>.a>p{left:0!important;top:6.1rem!important; width:45.9rem!important;max-width:45.9rem!important;font-size:1.6rem!important;line-height:2rem!important;height:auto!important} [data-pk="zayavka2"]>.a>p br{display:none} [data-pk="zayavka2"]>.a>.okno{left:0!important;right:auto!important;top:12.7rem!important; width:27.3rem!important;height:12.4rem!important;border-radius:1.5rem!important; transform:none!important;overflow:hidden} [data-pk="zayavka2"]>.a>.okno>img{left:0!important;top:0!important; width:100%!important;height:100%!important;object-fit:cover!important} [data-pk="zayavka2"] .forma{position:static!important} /* :not(.otvet) — не убирать: строка ответа формы тоже p.a, без этого она ложилась поверх заголовка формы (скрин владельца 22.09). Тест: tests/test_naezd_otveta_formy.py */ [data-pk="zayavka2"] .forma>p.a:not(.otvet){left:64.5rem!important;top:2.1rem!important; width:41.3rem!important;max-width:41.3rem!important;font-size:1.6rem!important;line-height:2rem!important} [data-pk="zayavka2"] .forma>p.a:not(.otvet) br{display:none} [data-pk="zayavka2"] .pole{position:absolute!important;left:64.5rem!important; width:55.5rem!important;height:5rem!important;padding:0 2.7rem!important; border-radius:1.5rem!important;font-size:1.6rem!important} [data-pk="zayavka2"] #f2-name{top:7.1rem!important} [data-pk="zayavka2"] #f2-tel {top:12.6rem!important} [data-pk="zayavka2"] .forma>button{position:absolute!important;left:64.5rem!important;top:18.1rem!important; width:55.5rem!important;height:5rem!important;border-radius:1.5rem!important;font-size:1.6rem!important} [data-pk="zayavka2"] #f2-gal{position:absolute!important;left:64.5rem!important;top:23.6rem!important; margin:0!important;width:1.5rem!important;height:1.5rem!important;min-width:1.5rem!important;border-radius:.4rem!important} [data-pk="zayavka2"] .forma>label.soglasie-t{position:absolute!important;left:66.3rem!important;top:23.7rem!important; transform:none!important;width:51.5rem!important;font-size:1.2rem!important;line-height:1.5rem!important} [data-pk="zayavka2"] .forma>p.a.otvet{position:absolute!important;left:64.5rem!important;top:26.5rem!important; width:55.5rem!important} /* ================= 16. ПРОЦЕСС «Один день в клинике» — ИЗ МАКЕТА ======= Макет: полоса 7286..8136. Координаты минус 7286. метка «процесс» 0,41 14 заглавными H2 0,74 ш.874 36/44 подзаголовок 0,128 ш.668 16/20 карточка 0,168 292x330, шаг 303 фото +0,+0 292x176 номер шага +12,+12 23x23 заголовок +13,+188 16 текст +13,+222 ш.278 шкала 0,+31 от низа карточек · стрелки 1106/1158, 42x42 синяя плашка CTA 1,+107 от низа карточек 1199x204, скругление 25 ⛔ Высота карточки НЕ из макета: в макете текст шага в две строки, у нас длиннее. Текст не режем — коробка тянется, а пульт и плашка считаются ОТ низа карточки (--kh), а не вписаны числом. ====================================================================== */ /* ⛔ ПУСТОЙ РЕЗЕРВ ПОД ЛЕНТОЙ: высота стояла под элемент, которого в этой секции НЕТ. Макет кладёт под ленту ещё один кусок, а наша вёрстка вынесла его в СЛЕДУЮЩУЮ секцию — резерв же остался, и между блоками зияли провалы 270-318 px на 1440. Считаем высоту от РЕАЛЬНОГО низа содержимого + 40 px. */ /* pro: низ пульта 605, было 900 (лишних 295). Плашка CTA живёт в cta-foto. 11.7rem — то же слагаемое, что у блока результатов, где хвоста нет. */ [data-pk="pro"]{--kh:36.5rem; height:calc(16.8rem + var(--kh) + 11.7rem)!important;min-height:0;padding:0!important;overflow:visible} [data-pk="pro"]>*{position:absolute!important;margin:0!important} .sec[data-pk="pro"]>p.a.kick{left:var(--gut)!important;top:4.1rem!important; font-size:1.4rem!important;line-height:normal!important;letter-spacing:.056rem} [data-pk="pro"]>h2.zag{left:var(--gut)!important;top:7.4rem!important; width:87.4rem!important;max-width:87.4rem!important;font-size:3.6rem!important;line-height:4.4rem!important} [data-pk="pro"]>h2.zag br{display:none} .sec[data-pk="pro"]>p.a:not(.kick){left:var(--gut)!important;top:12.8rem!important; width:66.8rem!important;max-width:66.8rem!important;font-size:1.6rem!important;line-height:2rem!important} .sec[data-pk="pro"]>p.a:not(.kick) br{display:none} [data-pk="pro"]>.lenta{left:var(--gut)!important;right:auto!important;top:16.8rem!important; width:calc(100% - var(--gut))!important;height:var(--kh)!important;gap:1.1rem!important; margin:0!important;padding:0!important;scroll-padding-left:0!important} [data-pk="pro"] .lenta>article.karta{zoom:1.177!important;width:24.8rem!important;height:31rem!important} [data-pk="pro"] .karta .okno{background:var(--grey)!important} [data-pk="pro"]>div.shkala.a{left:var(--gut)!important;top:calc(16.8rem + var(--kh) + 4.6rem)!important; bottom:auto!important;width:108.6rem!important;height:1rem!important} [data-pk="pro"]>.krug{top:calc(16.8rem + var(--kh) + 3rem)!important;bottom:auto!important;right:auto!important; width:4.2rem!important;height:4.2rem!important} [data-pk="pro"]>.krug[data-off="1"]{display:flex!important;opacity:.35} [data-pk="pro"]>.krug[data-hod="nazad"] {left:calc(var(--gut) + 110.6rem)!important} [data-pk="pro"]>.krug[data-hod="vpered"]{left:calc(var(--gut) + 115.8rem)!important} /* синяя плашка CTA после процесса (наша секция «cta-foto»/«cta») */ [data-pk="cta-foto"]{height:24.5rem!important;min-height:24.5rem;padding:0!important;overflow:visible} [data-pk="cta-foto"]>.a{position:absolute!important;left:calc(var(--gut) + .1rem)!important;top:0!important; width:119.9rem!important;max-width:none!important;height:20.4rem!important;min-height:0!important; border-radius:2.5rem!important;margin:0!important} [data-pk="cta-foto"]>.a>h3{left:1.9rem!important;top:1.7rem!important; width:85.1rem!important;max-width:85.1rem!important;font-size:2.6rem!important;line-height:2.8rem!important;height:auto!important} [data-pk="cta-foto"]>.a>h3 br{display:none} [data-pk="cta-foto"]>.a>p{left:1.9rem!important;top:8.3rem!important; width:60rem!important;max-width:60rem!important;font-size:1.6rem!important;line-height:2rem!important} [data-pk="cta-foto"]>.a>p br{display:none} [data-pk="cta-foto"]>.a>.okno{left:90.8rem!important;right:auto!important;top:2.1rem!important; width:27.2rem!important;height:16.2rem!important;border-radius:1.5rem!important; transform:none!important;overflow:hidden} [data-pk="cta-foto"]>.a>.okno>img{left:0!important;top:0!important; width:100%!important;height:100%!important;object-fit:cover!important} [data-pk="cta-foto"]>.a>a.knopka{left:1.9rem!important;top:13rem!important; width:30rem!important;height:5rem!important;border-radius:1.5rem!important;font-size:1.6rem!important} /* ⛔ КАРТОЧКА CTA У «СПЕЦИАЛИСТОВ» — ПО ОБРАЗЦУ ПЛАШКИ cta-foto. Для [data-pk="cta"] в ПК-слое НЕ БЫЛО НИ ОДНОГО ПРАВИЛА: блок из макета не переносили, и карточка осталась с мобильной коробкой width:30rem. На 1440 это 300 px из 1200 — справа 900 px пустоты, читается как оборванная вёрстка, особенно рядом с соседними плашками pro и sho, растянутыми на всю зону. По UI Kit блок 11 этот текст и кнопка — часть блока «Специалисты», поэтому плашка идёт во всю контентную зону, как её сосед после процесса. ⛔ Абзацу дана ПОЛНАЯ ширина 85.1rem нарочно: в образце он стоит на 8.3rem, а кнопка на 13rem, и если абзац сложится в две строки, зазор текст->кнопка станет 7 px при норме 24 — это был бы новый дефект. В одну строку зазор 27. */ [data-pk="cta"]{height:24.5rem!important;min-height:24.5rem;padding:0!important;overflow:visible} [data-pk="cta"]>.a{position:absolute!important;left:calc(var(--gut) + .1rem)!important;top:0!important; width:119.9rem!important;max-width:none!important;height:20.4rem!important;min-height:0!important; border-radius:2.5rem!important;margin:0!important} [data-pk="cta"]>.a>h3{left:1.9rem!important;top:1.7rem!important; width:85.1rem!important;max-width:85.1rem!important;font-size:2.6rem!important;line-height:2.8rem!important;height:auto!important} [data-pk="cta"]>.a>h3 br{display:none} [data-pk="cta"]>.a>p{left:1.9rem!important;top:8.3rem!important; width:85.1rem!important;max-width:85.1rem!important;font-size:1.6rem!important;line-height:2rem!important} [data-pk="cta"]>.a>p br{display:none} [data-pk="cta"]>.a>a.knopka{left:1.9rem!important;top:13rem!important; width:30rem!important;height:5rem!important;border-radius:1.5rem!important;font-size:1.6rem!important} /* ================= 17. ВРАЧИ «Специалисты» — ИЗ МАКЕТА ================= Макет: полоса 8136..8969. Координаты минус 8136. метка «врачи» 0,50 14 заглавными H2 0,83 ш.249 36/44 карточка 0,142 292x364, шаг 302 фото +0,+0 292x211 имя +13,+223 16 специальность +13,+249 ш.184 ссылка +13,+333 14 пульт 0,521 1200x42 ⛔ Масштаб карточки НЕ годится: у мобильной она 180x340 с квадратным фото, в макете 292x364 с горизонтальным. Поэтому раскладка задана явно, а не масштабом, иначе фото поехало бы по пропорции. ====================================================================== */ /* vra: низ пульта 578, было 848 (лишних 270). Подзаголовок «На консультации вы говорите...» и кнопка по UI Kit блок 11 лежат в соседней секции cta. */ [data-pk="vra"]{height:61.8rem!important;min-height:61.8rem;padding:0!important;overflow:visible} [data-pk="vra"]>*{position:absolute!important;margin:0!important} .sec[data-pk="vra"]>p.a.kick{left:var(--gut)!important;top:5rem!important; font-size:1.4rem!important;line-height:normal!important;letter-spacing:.056rem} [data-pk="vra"]>h2.zag{left:var(--gut)!important;top:8.3rem!important; width:24.9rem!important;max-width:none!important;font-size:3.6rem!important;line-height:4.4rem!important} [data-pk="vra"]>.lenta{left:var(--gut)!important;right:auto!important;top:14.2rem!important; width:calc(100% - var(--gut))!important;height:36.4rem!important;gap:1rem!important; margin:0!important;padding:0!important;scroll-padding-left:0!important} [data-pk="vra"] .lenta>article.karta{zoom:1!important;width:29.2rem!important;height:36.4rem!important} [data-pk="vra"] .karta .k-telo{position:relative;width:29.2rem;height:36.4rem} [data-pk="vra"] .karta .okno{left:0!important;top:0!important; width:29.2rem!important;height:21.1rem!important;border-radius:1.5rem 1.5rem 0 0!important} [data-pk="vra"] .karta .okno>img{width:100%!important;height:100%!important;object-fit:cover!important} [data-pk="vra"] .karta .vrach-t{position:absolute!important;left:1.3rem!important;top:22.3rem!important; width:26.6rem!important} [data-pk="vra"] .karta .vrach-t>h3{font-size:1.6rem!important;line-height:2rem!important;margin:0!important} [data-pk="vra"] .karta .vrach-s{margin-top:.6rem!important} [data-pk="vra"] .karta .vrach-s p{font-size:1.4rem!important;line-height:1.8rem!important;margin:0!important} [data-pk="vra"] .karta .vrach-l{display:inline-block;margin-top:1.4rem!important; font-size:1.4rem!important;line-height:1.8rem!important} [data-pk="vra"]>div.shkala.a{left:var(--gut)!important;top:55.2rem!important;bottom:auto!important; width:108.6rem!important;height:1rem!important} [data-pk="vra"]>.krug{top:53.6rem!important;bottom:auto!important;right:auto!important; width:4.2rem!important;height:4.2rem!important} [data-pk="vra"]>.krug[data-off="1"]{display:flex!important;opacity:.35} [data-pk="vra"]>.krug[data-hod="nazad"] {left:calc(var(--gut) + 110.6rem)!important} [data-pk="vra"]>.krug[data-hod="vpered"]{left:calc(var(--gut) + 115.8rem)!important} /* ================= 18. КУРАТОРЫ — ИЗ МАКЕТА ============================ Полоса 8969..9821. Координаты минус 8969. метка 0,50 · H2 1086x44 на 0,83 · подзаголовок 800x20 на 0,137 карточка 291x350 на 0,172, шаг 302.7 · фото 291x211 имя +13,+223 · роль +13,+247 · строки-галочки +36,+287 и +36,+310 плашка Telegram 1199x250 на 0,552: заголовок +19,+17, абзац +19,+49, кнопка 300x50 на +19,+99, телефон 392x250 справа ====================================================================== */ /* EN-подзаголовок в 2 строки -> лента на 20.1 вместо макетных 17.2; секция +2.9rem, чтобы до плашки Telegram остались макетные 30 px */ [data-pk="kur"]{height:58.1rem!important;min-height:58.1rem;padding:0!important;overflow:visible} [data-pk="kur"]>*{position:absolute!important;margin:0!important} .sec[data-pk="kur"]>p.a.kick{left:var(--gut)!important;top:5rem!important; font-size:1.4rem!important;line-height:normal!important;letter-spacing:.056rem} [data-pk="kur"]>h2.zag{left:var(--gut)!important;top:8.3rem!important; width:108.6rem!important;max-width:108.6rem!important;font-size:3.6rem!important;line-height:4.4rem!important} .sec[data-pk="kur"]>p.a:not(.kick){left:var(--gut)!important;top:13.7rem!important; width:57.6rem!important;max-width:57.6rem!important;font-size:1.6rem!important;line-height:2rem!important} .sec[data-pk="kur"]>p.a:not(.kick) br{display:none} [data-pk="kur"]>.lenta{left:var(--gut)!important;right:auto!important;top:20.1rem!important; width:calc(100% - var(--gut))!important;height:35rem!important;gap:1.17rem!important; margin:0!important;padding:0!important;scroll-padding-left:0!important} [data-pk="kur"] .lenta>article.karta{zoom:1!important;width:29.1rem!important;height:35rem!important} [data-pk="kur"] .karta .k-telo{position:relative;width:29.1rem;height:35rem} [data-pk="kur"] .karta .okno{left:0!important;top:0!important; width:29.1rem!important;height:21.1rem!important;border-radius:1.5rem 1.5rem 0 0!important;background:var(--grey)!important} [data-pk="kur"] .karta .okno>img{left:0!important;top:0!important; width:100%!important;height:100%!important;object-fit:cover!important} [data-pk="kur"] .karta .k-telo>h3{left:1.3rem!important;top:22.3rem!important; font-size:1.8rem!important;line-height:2.2rem!important;white-space:nowrap!important} /* ⛔ В КАРТОЧКЕ ТРИ АБЗАЦА, А НЕ ОДИН: роль и две строки-галочки. Одно правило на «p.a» складывало их в одну точку — 24 дефекта «текст поверх текста». Каждый абзац адресуется отдельно, числа из макета: роль +247, галочки +287 и +310 от верха карточки. */ [data-pk="kur"] .karta .k-telo>p.a{width:23.8rem!important;max-width:23.8rem!important; font-size:1.4rem!important;line-height:1.8rem!important;white-space:normal!important} [data-pk="kur"] .karta .k-telo>p.a:nth-of-type(1){left:1.3rem!important;top:24.7rem!important} [data-pk="kur"] .karta .k-telo>p.a:nth-of-type(2){left:3.3rem!important;top:28.7rem!important; width:24.5rem!important;max-width:24.5rem!important;font-size:1.2rem!important;line-height:1.6rem!important} [data-pk="kur"] .karta .k-telo>p.a:nth-of-type(3){left:3.3rem!important;top:31rem!important; width:24.5rem!important;max-width:24.5rem!important;font-size:1.2rem!important;line-height:1.6rem!important} [data-pk="kur"] .karta .k-telo>img.a{left:1.3rem!important;width:1.2rem!important;height:1.2rem!important} [data-pk="kur"] .karta .k-telo>img.a:nth-of-type(1){top:28.9rem!important} [data-pk="kur"] .karta .k-telo>img.a:nth-of-type(2){top:31.2rem!important} /* плашка Telegram — наша секция tg */ [data-pk="tg"]{height:29.5rem!important;min-height:29.5rem;padding:0!important;overflow:visible} [data-pk="tg"]>.a{position:absolute!important;left:var(--gut)!important;top:0!important; width:119.9rem!important;max-width:none!important;height:25rem!important;min-height:0!important; border-radius:2.5rem!important;margin:0!important;overflow:hidden} [data-pk="tg"]>.a>h3{left:1.9rem!important;top:1.7rem!important; width:95.7rem!important;max-width:95.7rem!important;font-size:2.4rem!important;line-height:3rem!important;height:auto!important} [data-pk="tg"]>.a>h3 br{display:none} [data-pk="tg"]>.a>p{left:1.9rem!important;top:4.9rem!important; width:44.4rem!important;max-width:44.4rem!important;font-size:1.6rem!important;line-height:2rem!important} [data-pk="tg"]>.a>p br{display:none} [data-pk="tg"]>.a>a.knopka{left:1.9rem!important;top:9.9rem!important; width:30rem!important;height:5rem!important;border-radius:1.5rem!important;font-size:1.6rem!important} [data-pk="tg"]>.a>.okno{left:80.7rem!important;right:auto!important;top:0!important; width:39.2rem!important;height:25rem!important;transform:none!important} [data-pk="tg"]>.a>img.a{left:60rem!important;top:6rem!important;width:17.1rem!important;height:15rem!important} /* ⛔ ФИКС 22.09 (баг владельца «картинка вылезает за нижний край плашки»): ПК-слой растягивал ОКНО на всю высоту плашки (25rem), а сам снимок внутри окна остался с мобильной инлайновой высотой 95.29% — он обрывался на 11.8 px ВЫШЕ низа плашки, ровно по кисти руки, и под ним торчала полоска сиреневого. Рядом было видно прямой угол снимка вместо скруглённого угла плашки — отсюда ощущение «обрезок повис». У всех остальных окон ПК-слоя такая строка есть (zayavka2, osnovatel, klinika, rez), у tg её забыли. Кадрирование (зум и сдвиг влево) НЕ трогаем — оно задумано; тянем только низ до края плашки, дальше снимок подрезает overflow:hidden самой плашки вместе со скруглением. */ [data-pk="tg"]>.a>.okno>img{top:0!important;height:100%!important} /* ================= 19. КАК ЭТО ПРОИСХОДИТ — ИЗ МАКЕТА ================== Полоса 9821..10641. Координаты минус 9821. H2 635x44 на 0,40 · лента 192x320 на 0,99, шаг 201.7 зелёная плашка контактов 1202x321 на -2,449: заголовок +20,+16 · абзац +20,+86 строка связи +625,+23, 555x49, шаг 56 · кнопка +625,+246 ====================================================================== */ /* sho: низ пульта 502, было 820 (лишних 318). Зелёная плашка контактов 1202x321, которую макет кладёт на 449, у нас вынесена в секцию svyaz2. */ [data-pk="sho"]{height:54.2rem!important;min-height:54.2rem;padding:0!important;overflow:visible} [data-pk="sho"]>*{position:absolute!important;margin:0!important} [data-pk="sho"]>h2.zag{left:var(--gut)!important;top:4rem!important; width:63.5rem!important;max-width:63.5rem!important;font-size:3.6rem!important;line-height:4.4rem!important} [data-pk="sho"]>h2.zag br{display:none} [data-pk="sho"]>.lenta{left:var(--gut)!important;right:auto!important;top:9.9rem!important; width:calc(100% - var(--gut))!important;height:32rem!important;gap:.97rem!important; margin:0!important;padding:0!important;scroll-padding-left:0!important} [data-pk="sho"] .lenta>.okno{zoom:1!important;flex:0 0 auto!important; width:19.2rem!important;height:32rem!important;border-radius:2.5rem!important;background:var(--grey)!important} [data-pk="sho"] .lenta>.okno img{width:100%!important;height:100%!important;object-fit:cover!important} [data-pk="sho"] .lenta>.okno .play-kn{left:7.65rem!important;top:14.05rem!important; width:3.9rem!important;height:3.9rem!important} [data-pk="sho"] .lenta>.okno .play-kn img{width:3.9rem!important;height:3.9rem!important} [data-pk="sho"]>div.shkala.a{left:var(--gut)!important;top:47.6rem!important;bottom:auto!important; width:108.6rem!important;height:1rem!important} [data-pk="sho"]>.krug{top:46rem!important;bottom:auto!important;right:auto!important; width:4.2rem!important;height:4.2rem!important} [data-pk="sho"]>.krug[data-off="1"]{display:flex!important;opacity:.35} [data-pk="sho"]>.krug[data-hod="nazad"] {left:calc(var(--gut) + 110.6rem)!important} [data-pk="sho"]>.krug[data-hod="vpered"]{left:calc(var(--gut) + 115.8rem)!important} /* зелёная плашка контактов «Хотите так же» — наша секция svyaz2 */ [data-pk="svyaz2"]{height:36.1rem!important;min-height:36.1rem;padding:0!important;overflow:visible} [data-pk="svyaz2"]>.a{position:absolute!important;left:calc(var(--gut) - .2rem)!important;top:0!important; width:120.2rem!important;max-width:none!important;height:32.1rem!important;min-height:0!important; border-radius:2.5rem!important;margin:0!important} [data-pk="svyaz2"]>.a>h3{left:2rem!important;top:1.6rem!important; width:33.9rem!important;max-width:33.9rem!important;font-size:2.4rem!important;line-height:3rem!important;height:auto!important} [data-pk="svyaz2"]>.a>h3 br{display:none} [data-pk="svyaz2"]>.a>p{left:2rem!important;top:8.6rem!important; width:39.3rem!important;max-width:39.3rem!important;font-size:1.6rem!important;line-height:2rem!important;height:auto!important} [data-pk="svyaz2"]>.a>p br{display:none} [data-pk="svyaz2"] .svyaz-row{left:62.5rem!important;width:55.5rem!important;height:4.9rem!important; border-radius:1.5rem!important} [data-pk="svyaz2"] .svyaz-row>img.a{left:.7rem!important;top:.6rem!important;width:3.7rem!important;height:3.7rem!important} [data-pk="svyaz2"] .svyaz-l{left:5.4rem!important;font-size:1.6rem!important} [data-pk="svyaz2"] .svyaz-r{right:1.1rem!important;font-size:1.2rem!important} [data-pk="svyaz2"]>.a>.svyaz-row:nth-of-type(1){top:2.3rem!important} [data-pk="svyaz2"]>.a>.svyaz-row:nth-of-type(2){top:7.9rem!important} [data-pk="svyaz2"]>.a>.svyaz-row:nth-of-type(3){top:13.4rem!important} [data-pk="svyaz2"]>.a>.svyaz-row:nth-of-type(4){top:19rem!important} [data-pk="svyaz2"]>.a>a.knopka{left:62.5rem!important;top:24.6rem!important; width:55.5rem!important;height:5rem!important;border-radius:1.5rem!important;font-size:1.6rem!important} /* ================= 20. FAQ — ИЗ МАКЕТА ================================= Полоса 10641..11023. Координаты минус 10641. метка 0,50 · H2 790x44 на 0,83 вопрос 595x60, шаг 65, текст +15,+22; левая колонка 0,142, правая 605,142 Вторая наша секция вопросов поднимается в правую колонку тем же приёмом, что карточка связи: height:0 + подъём, в поток ничего не добавляет. ====================================================================== */ /* ⛔ ВЫСОТА СЕКЦИИ ЧаВо. В макете полоса 382 px и все вопросы закрыты. У нас ПЕРВЫЙ вопрос открыт по умолчанию (так в мобильной, а тело мы не трогаем): левая лента вырастает до 408 px и вместе с отступом 142 px даёт 550 px. Прежние 38.2rem держали секцию в 382 px, а height:auto не работал: ленты position:absolute и в высоту секции не входят. Ленты уезжали на 168 px в блок БЛОГ, и «Полезные статьи» ложились поверх вопросов. 56rem = 560 px: открытая карточка помещается целиком, снизу остаётся 10 px до БЛОГа. */ /* ⛔ ВЫСОТА ЧаВо ЖИВЁТ В ПЕРЕМЕННОЙ, А НЕ ЧИСЛОМ. 56rem были посчитаны под состояние «раскрыт первый вопрос». Раскроют второй — лента вырастет и снова дойдёт до БЛОГа. Держать число нельзя: его должен считать замер. Переменная объявлена на :root, потому что faq и faq2 — СОСЕДИ, и переменная с одной секции на другую не наследуется. Подъём faq2 всегда равен высоте faq, потому что берётся из той же переменной — разъехаться они не могут. Пересчитывает faqVysota() в pk.js: 14.2rem (отступ до лент) + высота самой высокой ленты + 10 px запаса. На 1440 это даёт ровно 560 px = прежние 56rem, то есть правка ничего не сдвигает, пока никто не кликает. */ /* ⛔ 22.09, ТЕСТИРОВЩИК: «правая колонка ЧаВо после раскрытия вылезает за свою секцию на 60–120 px и ложится на блок Everything can be checked. Секция height 0, top −556». КОРЕНЬ: у faq2 стояло height:0 — коробка секции схлопнута в линию, а её лента рисуется на 400–800 px ниже. Любое раскрытие увеличивает вылет ленты ЗА НИЗ СВОЕЙ СЕКЦИИ ровно на высоту ответа (те самые 60–120 px), и замер видит «вылезла и легла на соседа». ЛЕЧЕНИЕ: у секции своя высота --faq2H (14.2rem + её лента + 10), а из ПОТОКА она убирается отрицательным margin-bottom на ту же величину. Коробка теперь накрывает собственную ленту, а соседний блок «Everything can be checked» стоит там же, где стоял: поток забирает 0 px, как и при height:0. Обе переменные считает faqVysota() в pk.js. */ :root{--faqH:56rem;--faq2H:56rem} [data-pk="faq"]{min-height:var(--faqH)!important;height:var(--faqH)!important;padding:0!important;overflow:visible;position:relative} .sec[data-pk="faq"]>p.a.kick{position:absolute!important;left:var(--gut)!important;top:5rem!important;margin:0!important; font-size:1.4rem!important;line-height:normal!important;letter-spacing:.056rem} [data-pk="faq"]>h2.zag{position:absolute!important;left:var(--gut)!important;top:8.3rem!important;margin:0!important; width:79rem!important;max-width:79rem!important;font-size:3.6rem!important;line-height:4.4rem!important} [data-pk="faq"]>h2.zag br{display:none} [data-pk="faq"]>.faq-list{position:absolute!important;left:var(--gut)!important;top:16rem!important; width:59.5rem!important;margin:0!important} /* ⛔ ПОДЪЁМ ПРАВОЙ КОЛОНКИ РАВЕН ВЫСОТЕ СЕКЦИИ ЧаВо, иначе колонки разъедутся: faq2 поднимается из своего потока ровно на высоту faq (56rem), чтобы её лента встала на ту же строку 14.2rem, что и левая. Меняешь 56rem выше — меняй и здесь, это одно число. */ [data-pk="faq2"]{position:relative!important;top:calc(-1 * var(--faqH))!important; height:var(--faq2H)!important;min-height:0!important;max-height:none!important; padding:0!important;margin:0 0 calc(-1 * var(--faq2H))!important;overflow:visible!important;background:transparent!important; /* ⛔ КОРОБКА ПРАВОЙ СЕКЦИИ НАКРЫВАЕТ ЛЕВУЮ КОЛОНКУ — И ЛОВИЛА БЫ ЕЁ НАЖАТИЯ. Пока высота была 0, ловить было нечем; с настоящей высотой секция легла поверх вопросов слева (position:relative и идёт в разметке позже), и левый аккордеон переставал открываться. Секция прозрачна для мыши, лента — нет. */ pointer-events:none!important} [data-pk="faq2"]>.faq-list{pointer-events:auto!important} [data-pk="faq2"]>.faq-list{position:absolute!important;left:calc(var(--gut) + 60.5rem)!important;top:16rem!important; width:59.5rem!important;margin:0!important} [data-pk="faq"] .faq-item,[data-pk="faq2"] .faq-item{width:59.5rem!important} [data-pk="faq"] .faq-t,[data-pk="faq2"] .faq-t{left:1.5rem!important;top:2.2rem!important; width:55rem!important;font-size:1.6rem!important;line-height:2rem!important} [data-pk="faq"] .faq-z,[data-pk="faq2"] .faq-z{left:56.5rem!important} /* 22.09 ЧаВо: высота карточки по содержимому, а не по вшитой мобильной константе. ⛔ КОРЕНЬ КРИВОГО БЛОКА ВОПРОСОВ. Высоту кнопки вопроса задавала переменная --zh, вшитая в РАЗМЕТКУ каждой карточки (.faq-q{height:calc(var(--zh) - .2rem)}). 4.7 / 6.5 / 8.3rem — это число строк вопроса при ширине 23.7rem на 360-м макете, то есть МОБИЛЬНАЯ величина. На ПК текст вопроса шириной 55rem и почти всегда в ОДНУ строку (20 px), а коробка держала мобильное число. Замер 1440 на Navi Mumbai: карточки 47 / 65 / 83 px при одинаковом содержимом, текст у всех на 23 px от верха, а под текстом оставалось 4 / 22 / 40 px. Это и есть «карточки разной высоты и гуляющие зазоры»; обведённый владельцем «Is a hair transplant painful?» — та самая карточка с --zh:4.7rem. Волна городов переписала вопросы, а --zh в разметке остался от исходной длины — поэтому на главной и в Москве высоты ровные, а на городских нет. ЛЕЧЕНИЕ В ИСТОЧНИКЕ: на ПК высоту даёт содержимое, отступы сверху и снизу равны по 2.2rem. Текст остаётся ровно там же (23 px от верха карточки) — центровка знаков + и - выше по файлу считана от этого числа и не трогается. Вопрос из двух строк теперь вырастит карточку сам, а не срежется. Мобильный вид под замком: весь этот слой лежит внутри @media (min-width:900px), --zh на телефоне работает как прежде. */ [data-pk="faq"] .faq-q,[data-pk="faq2"] .faq-q{height:auto!important;box-sizing:border-box!important; padding:2.2rem 6rem 2.2rem 1.5rem!important;text-align:left!important} [data-pk="faq"] .faq-t,[data-pk="faq2"] .faq-t{position:static!important;left:auto!important; top:auto!important;width:auto!important;max-width:none!important;display:block!important} /* ⛔ ЗНАКИ + И - В ЧаВо ПО ЦЕНТРУ СТРОКИ ВОПРОСА. Замер на 1440: текст вопроса .faq-t стоит на top:22px при высоте 20, то есть его центр — 32 px от верха кнопки. Оба знака стояли на общем top:18px, но у них РАЗНАЯ высота: .zn-plus это 10x10 (центр 23, промах 9 px — ровно то, что увидел тестировщик), а .zn-minus это 10x2 (центр 19, промах 13 px). Поэтому одно общее значение не годится, у каждого своё: плюс 27 px -> центр 27+5 = 32 минус 31 px -> центр 31+1 = 32 В rem обе величины масштабируются вместе с кеглем, на 1280 центры сходятся. ⛔ Обёрнуто в свой @media: соседние правила .faq-z лежат ВНЕ медиазапроса и действуют на всех ширинах, а мобильного вида касаться нельзя — он под замком. */ @media (min-width:900px){ [data-pk="faq"] .faq-z.zn-plus,[data-pk="faq2"] .faq-z.zn-plus{top:2.7rem!important} [data-pk="faq"] .faq-z.zn-minus,[data-pk="faq2"] .faq-z.zn-minus{top:3.1rem!important} } [data-pk="faq"] .faq-a,[data-pk="faq2"] .faq-a{font-size:1.4rem!important;line-height:2rem!important} /* ================= 21. БЛОГ — ИЗ МАКЕТА ================================ Полоса 11023..11599. Координаты минус 11023. H2 310x44 на 0,83 · подзаголовок 500x20 на 0,137 карточка 290x354 на 0,172, шаг 303 · картинка 291x194 заголовок +13,+207 · описание +13,+256 · ссылка +13,+321 ====================================================================== */ [data-pk="blo"]{height:57.6rem!important;min-height:57.6rem;padding:0!important;overflow:visible} [data-pk="blo"]>*{position:absolute!important;margin:0!important} .sec[data-pk="blo"]>p.a.kick{left:var(--gut)!important;top:5rem!important; font-size:1.4rem!important;line-height:normal!important;letter-spacing:.056rem} [data-pk="blo"]>h2.zag{left:var(--gut)!important;top:8.3rem!important; width:31rem!important;max-width:none!important;font-size:3.6rem!important;line-height:4.4rem!important} .sec[data-pk="blo"]>p.a:not(.kick){left:var(--gut)!important;top:13.7rem!important; width:50rem!important;max-width:50rem!important;font-size:1.6rem!important;line-height:2rem!important} .sec[data-pk="blo"]>p.a:not(.kick) br{display:none} [data-pk="blo"]>.lenta{left:var(--gut)!important;right:auto!important;top:17.2rem!important; width:calc(100% - var(--gut))!important;height:35.4rem!important;gap:1.3rem!important; margin:0!important;padding:0!important;scroll-padding-left:0!important} [data-pk="blo"] .lenta>article{zoom:1!important;width:29rem!important;height:35.4rem!important} /* ⛔ ТЕКСТ КАРТОЧКИ БЛОГА — ПОТОКОМ, А НЕ ЖЁСТКИМИ СЛОТАМИ. Было: заголовок прибит к 20.7rem, описание к 25.6rem, ссылка к 32.1rem. Под заголовок оставалось 4.9rem — ровно две строки. Заголовок «Пересадка волос: спасение или разочарование. Кому правда стоит делать?» встаёт в ТРИ строки (59-66 px) и ложился ПОВЕРХ описания: перекрытие 213x15 на 1280 и 240x17 на 1440, накрыто 94-95% описания. Это тот же класс, что чинили в ЧаВо: фиксированная высота против реального содержимого. Стало: колонка текста идёт потоком — каждая коробка берёт свою высоту, следующая встаёт за ней. Кегли, ширины и отступы остаются макетными, меняется только то, что низ заголовка больше не назначен числом. Отступ сверху 20.7rem = макетное место заголовка, фото и подложка выше остаются на абсолютных координатах и не трогаются. */ [data-pk="blo"] .lenta>article .k-telo{position:relative;width:29rem;height:35.4rem; display:flex!important;flex-direction:column!important;box-sizing:border-box!important; padding:20.7rem 1.3rem 1.3rem!important} [data-pk="blo"] .lenta>article .k-telo>div.a.karta{left:0!important;top:0!important; width:29rem!important;height:35.4rem!important} [data-pk="blo"] .lenta>article .k-telo>div.a:not(.karta){left:0!important;top:0!important; width:29.1rem!important;height:19.4rem!important} [data-pk="blo"] .lenta>article .k-telo>img.a{left:0!important;top:0!important; width:29.1rem!important;height:19.4rem!important;object-fit:cover!important} /* ⛔ position:relative, А НЕ static, И z-index:1. Подложка карточки div.a.karta лежит absolute. Позиционированные элементы рисуются ПОВЕРХ непозиционированных в том же контексте наложения, поэтому при static белая подложка закрасила заголовок, описание и ссылку: замер показывал коробки и нулевые наложения, а на экране текста не было вовсе. relative оставляет элемент В ПОТОКЕ (высота по содержимому сохраняется), z-index:1 возвращает его в слой над подложкой. */ [data-pk="blo"] .lenta>article .k-telo>h3{position:relative!important;z-index:1!important;left:auto!important;top:auto!important; width:27.7rem!important;max-width:27.7rem!important;margin:0!important; font-size:1.8rem!important;line-height:2.2rem!important} [data-pk="blo"] .lenta>article .k-telo>h3 br{display:none} [data-pk="blo"] .lenta>article .k-telo>p.a{position:relative!important;z-index:1!important;left:auto!important;top:auto!important; width:24rem!important;max-width:24rem!important;margin:.6rem 0 0!important; font-size:1.4rem!important;line-height:1.8rem!important;white-space:normal!important} /* ⛔ СЕЛЕКТОР .tlink, А НЕ a.tlink: в карточке блога ссылка размечена , а не . Правило на a.tlink её не цепляло, она осталась на жёстком top:32.1rem и легла ПОВЕРХ описания (55x13 на 1280, 62x15 на 1440). Берём по классу — оба варианта разметки. */ [data-pk="blo"] .lenta>article .k-telo>.tlink{position:relative!important;z-index:1!important;left:auto!important;top:auto!important; margin:.6rem 0 0!important;align-self:flex-start!important; font-size:1.4rem!important;line-height:1.8rem!important} /* ================= 22. ДОКУМЕНТЫ И ПОДВАЛ — ИЗ МАКЕТА ================== Полоса 11599..12072. Координаты минус 11599. H2 598x44 на 0,40 · подзаголовок 1071x20 на 0,94 карточка 595x200 на 0,141 и 605,141 заголовок +13,+14 · картинка +393,+26 166x142 · ссылка +13,+165 линия 1199 на 1,366 · юрстрока 1,379 · ведомства 605..1065, 375..391 ====================================================================== */ [data-pk="dok"]{height:47.3rem!important;min-height:47.3rem;padding:0!important;overflow:visible} [data-pk="dok"]>*{position:absolute!important;margin:0!important} [data-pk="dok"]>h2.zag{left:var(--gut)!important;top:4rem!important; width:59.8rem!important;max-width:59.8rem!important;font-size:3.6rem!important;line-height:4.4rem!important} [data-pk="dok"]>h2.zag br{display:none} /* ⛔ В СЕКЦИИ dok ЧЕТЫРЕ div.a, А НЕ ОДИН. Кроме абзаца под заголовком здесь лежат три подвальных юридических блока: «ООО «АКЦ ПОМОЩЬ» / юридическое лицо клиники» (в мобильной top:48.2rem), «1057746096924 / ОГРН» (51.6rem) и «7728536872 / ИНН» (55rem). Прежнее правило било по ВСЕМ четырём и сводило их в одну точку top:9.4rem — 14 наложений, буквы поверх букв: юрлицо, ОГРН и ИНН ложились друг на друга и на абзац «Клиника работает по медицинской лицензии». Предпроверка этого не ловит, владелец увидел бы первым. В мобильной координаты разные и конфликта нет — беда только наша, ПК-слоя. По макету (полоса 11599..12072): линия на 366, юрстрока на 379. Абзац остаётся на 9.4rem, юрстрока уходит вниз и раскладывается в РЯД, как в макете. */ [data-pk="dok"]>div.a:nth-of-type(1){left:var(--gut)!important;top:9.4rem!important; width:57.6rem!important;max-width:57.6rem!important;font-size:1.6rem!important;line-height:2rem!important} [data-pk="dok"]>div.a:nth-of-type(n+4){top:37.9rem!important; width:auto!important;max-width:none!important;font-size:1rem!important;line-height:1.2rem!important} [data-pk="dok"]>div.a:nth-of-type(4){left:var(--gut)!important} [data-pk="dok"]>div.a:nth-of-type(5){left:calc(var(--gut) + 18rem)!important} [data-pk="dok"]>div.a:nth-of-type(6){left:calc(var(--gut) + 33rem)!important} [data-pk="dok"]>div.a:not(.lenta):not(.shkala)>p{display:block;margin:0} [data-pk="dok"]>div.a:not(.lenta):not(.shkala) br{display:none} [data-pk="dok"]>.lenta{left:var(--gut)!important;right:auto!important;top:14.1rem!important; width:calc(100% - var(--gut))!important;height:20rem!important;gap:1rem!important; margin:0!important;padding:0!important;scroll-padding-left:0!important} [data-pk="dok"] .lenta>article{zoom:1!important;width:59.5rem!important;height:20rem!important} [data-pk="dok"] .lenta>article .k-telo{position:relative;width:59.5rem;height:20rem} [data-pk="dok"] .lenta>article .k-telo>img.a{left:39.3rem!important;top:2.6rem!important; width:16.6rem!important;height:14.2rem!important;object-fit:contain!important} [data-pk="dok"] .lenta>article .k-telo>div.a{left:1.3rem!important;top:1.4rem!important; width:24.9rem!important;font-size:1.6rem!important;line-height:2rem!important} [data-pk="dok"] .lenta>article .k-telo>a.tlink{left:1.3rem!important;top:16.5rem!important; font-size:1.4rem!important;line-height:1.8rem!important} /* ================= 17-бис. ЧТО ВХОДИТ В 179 000 ₽ ====================== Блок добавлен 14.09 (Роман: «Добавил бы один понятный блок „Что входит в 179 000 ₽“»). Картинки в блоке нет — владелец снял её отдельным словом («просто пункты что входит на один экран все без картинок»), и вся ширина контейнера ушла под пункты: это и уложило блок в один экран без срезания вертикальных отступов секции. Сетка UI Kit: пункты 3 в ряд по 39.3rem, жёлоб 1rem (3x393 + 2x10 = 1199); бейджи 2 по 59.5rem (2x595 + 10 = 1200). Поля секции 5rem сверху/снизу — ритм соседних блоков, НЕ ужимались. ====================================================================== */ [data-pk="vhodit"]{height:52rem!important;min-height:52rem;padding:0!important;overflow:visible} [data-pk="vhodit"]>*{position:absolute!important;margin:0!important} .sec[data-pk="vhodit"]>p.a.kick{left:var(--gut)!important;top:5rem!important; font-size:1.4rem!important;line-height:normal!important;letter-spacing:.056rem} [data-pk="vhodit"]>h2.zag{left:var(--gut)!important;top:8.3rem!important; width:120rem!important;max-width:120rem!important;font-size:3.6rem!important;line-height:4.4rem!important} [data-pk="vhodit"]>h2.zag br{display:none} .sec[data-pk="vhodit"]>p.a.lead{left:var(--gut)!important;top:14.7rem!important; width:82.4rem!important;max-width:82.4rem!important;font-size:1.6rem!important;line-height:2rem!important} [data-pk="vhodit"]>.vh-bs{left:var(--gut)!important;top:19.7rem!important; width:120rem!important;gap:1rem!important} [data-pk="vhodit"] .vh-b{padding:1.8rem 2.4rem!important;border-radius:2rem!important} [data-pk="vhodit"] .vh-b b{font-size:1.8rem!important;line-height:2.2rem!important} [data-pk="vhodit"]>.vh-l{left:var(--gut)!important;top:29.7rem!important; width:120rem!important;display:grid!important;grid-template-columns:repeat(3,39.3rem)!important; gap:1rem!important} [data-pk="vhodit"] .vh-i{padding:1.8rem 2.4rem!important;border-radius:2rem!important} [data-pk="vhodit"] .vh-i>img{width:1.6rem!important;height:1.6rem!important;margin-top:.2rem!important} [data-pk="vhodit"] .vh-i>span{font-size:1.6rem!important;line-height:2rem!important} [data-pk="vhodit"]>.vh-n{left:var(--gut)!important;top:47.5rem!important; width:120rem!important;font-size:1.4rem!important;line-height:1.8rem!important}