/* ============================================================ famcons.css — посадочная «Семейный психолог» Правки оформления, которые касаются ТОЛЬКО этой страницы. Всё под классом `.page-famcons` на (template-famcons.php), поэтому общие блоки на остальных страницах не задеты. Спека: docs/old_docs/tasks/2026-08-27-famcons-landing.md ============================================================ */ /* ── Кегль текста (пункт 1.2 задания) ────────────────────────── «ВАЖНО: далее по всем экранам шрифт текста экранов — слишком маленький, нужно увеличить и сделать более читаемым.» Основной текст 16 → 18, заголовки пунктов 18 → 20. Это шаг принятой в макете шкалы (14 / 16 / 18 / 20 / 25 / 35), а не произвольное число: страницу читают с телефона и с ноутбука люди в тяжёлой ситуации, и мелкий текст здесь дороже, чем лишний экран прокрутки. Заголовки секций (35px) не трогаем — претензия была к тексту. Только десктоп: на мобильной у блоков своя шкала (14/16), она меньше не из-за недосмотра, а из-за ширины колонки 300px — подняв её, мы получим переносы по два слова в строке. ------------------------------------------------------------ */ @media (min-width: 769px) { /* list-v1 объявляет кегли переменными — переопределяем их, а не каждое правило по отдельности. */ .page-famcons .list-v1 { --list-head-size: 20px; --list-text-size: 18px; } .page-famcons .list-v1 .list-v1__lead, .page-famcons .note-v1 .note-v1__text, .page-famcons .visitformats-v1 .visitformats-v1__lead, .page-famcons .visitformats-v1 .visitformats-v1__card-text p, .page-famcons .minprice-v1 .minprice-v1__lead, .page-famcons .rightnow-v1.rightnow-v1 { font-size: 18px; line-height: 25px; /* 18 × 1.4 = 25.2 — в px, чтобы высота блока не была дробной */ } .page-famcons .visitformats-v1 .visitformats-v1__card-title, .page-famcons .minprice-v1 .minprice-v1__title { font-size: 20px; } /* Абзацы самого текста страницы — они не принадлежат ни одному блоку (обычный wp:paragraph между врезками), поэтому переменными блоков не поднимаются. */ .page-famcons .articles-typical__content > p { font-size: 18px; line-height: 25px; /* 18 × 1.4 = 25.2 — в px, чтобы высота блока не была дробной */ } } /* ── Первый экран: карточка-CTA (пункты 1.2 и 1.6 задания) ───── Преимущества ушли из героя под него (1.5), и колонка стала короче фотографии: карточка кончалась на 496 при фото 633 — 137px пустоты. Решение владельца: пустоту забирает сама карточка, увеличенная ПРОПОРЦИОНАЛЬНО. Ширина растёт с 461 (макет) до 629 — всей колонки, потому что узкая карточка в опустевшей колонке висит ни к чему не привязанная. Коэффициент 629 / 461 = 1.364, и на него умножены все внутренние размеры, чтобы карточка осталась собой, а не растянутой версией себя с прежней мелкой начинкой: padding 25 → 34 текст 16 → 22px скругление 30 → 41 max-width 436 → 595 кнопка 324×73 → 442×100 шрифт кнопки 17 → 23px отступ до кнопки 15 → 20 Высота при этом набирается ~307 против нужных 332, поэтому карточка ещё и тянется на остаток колонки (`flex: 1`) — так низ совпадает с нижним краем фотографии без магических чисел, при любой длине заголовка. Содержимое центрируется: иначе оно прилипнет к верху. Только десктоп: на мобильной колонка одна, лишней высоты нет, и пропорции там свои — карточка уже во всю ширину экрана. ------------------------------------------------------------ */ @media (min-width: 769px) { .page-famcons .uslugihero-v1--nobenefits .uslugihero-v1__cta { width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; /* flex-end: группа «текст + кнопка» прижата к низу карточки. Тогда у кнопки со всех сторон одно и то же расстояние — 34 до левого края, до нижнего и до текста над ней. Свободная высота собирается сверху, одной полосой, а не окружает кнопку разными отступами. */ justify-content: flex-end; padding: 40px; border-radius: 41px; } .page-famcons .uslugihero-v1--nobenefits .uslugihero-v1__cta-text { font-size: 22px; /* 560, а не пропорциональные 595: на 595 вторая строка кончалась одиночной «и», и она читалась как обрыв. На 560 союз уходит на следующую строку, и правый край выглядит ровнее. */ max-width: 560px; /* margin-top тут не нужен и вреден: содержимое и так прижато к низу (justify-content: flex-end), свободная высота собирается сверху сама. А поскольку карточка тянется `flex: 1`, любой лишний отступ входит в требуемую ею высоту — колонка вырастает, и фотография, тянущаяся по колонке, растягивается вместе с ней. Ровно так 40px превращали 633 в 650 и «раздували» первый экран. */ margin-top: 0; /* То же 40, что у кнопки до краёв карточки. */ margin-bottom: 40px; } .page-famcons .uslugihero-v1--nobenefits .uslugihero-v1__cta-btn { width: 442px; height: 100px; font-size: 23px; } .page-famcons .uslugihero-v1__subtitle { font-size: 22px; } } /* ── Отступы между секциями ──────────────────────────────────── Ставятся по одному, с приёмкой владельцем на каждом стыке. ------------------------------------------------------------ */ /* Меню → первая секция: 20 (было 10). Через переменную, а не padding: секция объявляет `padding: var(--section-pt) 0 var(--section-pb)`, и переопределять надо именно её — иначе правило либо дублирует значение, либо сносит нижний отступ заодно. */ @media (min-width: 769px) { .page-famcons .uslugihero-v1 { --section-pt: 20px; } } /* Первая секция → вторая: 40 (было 61 = 20 нижнего отступа карточек + 41 верхнего отступа блока текста). Складывать два отступа неудобно — нижний обнуляется, весь зазор задаёт один padding сверху у текста. */ @media (min-width: 769px) { /* Между первым экраном и карточками — 20: складывалось из двух внутренних отступов по 20 и читалось как разрыв. */ .page-famcons .uslugihero-v1 { --section-pb: 0px; padding-bottom: 0; } .page-famcons .infocard-v1 { --section-pt: 20px; --section-pb: 0px; padding-top: 20px; padding-bottom: 0; } .page-famcons .articles-typical { padding-top: 40px; } /* У первого блока свой margin-top 20 — он прибавлялся к padding выше и давал 60 вместо 40. Зазор должен задаваться одним местом. */ .page-famcons .articles-typical__content > *:first-child { margin-top: 0; } } /* Вторая секция → третья (форма): 40. Было 0 — форма стояла вплотную к абзацу-выводу, это самое слипшееся место страницы. */ @media (min-width: 769px) { .page-famcons .articles-typical__content > p + .consformnew-v1 { /* 21px приходит из чужого схлопнутого отступа, ещё 39 добавляем сюда — вместе 60. */ margin-top: 39px; } } /* Третья секция (форма) → четвёртая «Как проходит приём»: 40. Было 60. У секции формы свой нижний отступ 40 — он обнуляется, иначе складывается с margin следующего блока и даёт 80. */ @media (min-width: 769px) { .page-famcons .articles-typical__content > .consformnew-v1 { padding-bottom: 0; } .page-famcons .articles-typical__content > .consformnew-v1 + .list-v1 { margin-top: 19px; /* 21 своего отступа + 19 = 40 */ } } /* Четвёртая секция → пятая (плашка про длительность): 40. Было 35. */ @media (min-width: 769px) { .page-famcons .articles-typical__content > .note-v1 { margin-top: 19px; /* 21 своего отступа + 19 = 40 */ } } /* Пятая секция (плашка) → шестая «Почему выбирают клинику»: 40. Было 36. */ @media (min-width: 769px) { .page-famcons .articles-typical__content > .note-v1 + .list-v1 { margin-top: 19px; /* 21 своего отступа + 19 = 40 */ } } /* Шестая секция → седьмая «Форматы приёма»: 40. Было 20. */ @media (min-width: 769px) { .page-famcons .articles-typical__content > .visitformats-v1 { margin-top: 19px; /* 21 своего отступа + 19 = 40 */ } } /* Седьмая секция «Форматы приёма» → восьмая «Стоимость консультации»: 40. Было 20. */ @media (min-width: 769px) { .page-famcons .articles-typical__content > .minprice-v1 { margin-top: 19px; /* 21 своего отступа + 19 = 40 */ } } /* Внутри восьмой секции: строка «Оставьте заявку» → форма: 20. Было 41. */ @media (min-width: 769px) { .page-famcons .articles-typical__content > .rightnow-v1 + .consformnew-v1 { margin-top: 20px; } } /* 10. Форма записи → 11. Отзывы: 60. Было 103. Между блоком текста и отзывами стоял отступ 62, который не убирался ни обнулением padding у одного, ни margin-top у другого: он приходит из margin-bottom, схлопывающегося наружу через несколько уровней вложенности (.articles-typical > .wrapper > __container > __content), и погасить его на последнем ребёнке нельзя — схлопывание происходит выше по цепочке. Проверено прямым замером: margin-top: -62px даёт ровно 0, то есть правило доходит и отступ действительно 62. Поэтому нужный зазор задаётся отрицательным сдвигом, снимающим эти 62, плюс сам зазор. -62 + 60 = -2. Если когда-нибудь понадобится изменить зазор — менять только второе слагаемое: -62 это константа чужого отступа, а не подгонка на глаз. */ @media (min-width: 769px) { .page-famcons .articles-typical { padding-bottom: 0; margin-bottom: 0; } .page-famcons .otzyvinfo-v1 { --section-pt: 0px; padding-top: 0; margin-top: -2px; /* -62 схлопнутого отступа + 60 нужного зазора */ } } /* 11. Отзывы → 12. Специалисты: 60. Было 79. */ @media (min-width: 769px) { .page-famcons .otzyvinfo-v1 { --section-pb: 0px; padding-bottom: 0; } .page-famcons .ourspecinfo-v1 { --section-pt: 60px; padding-top: 60px; } } /* 12. Специалисты → 13. Форма подбора: 20. Форма подбора — вариант `--alt`, у него фотография администраторов вылезает вверх за зелёную карточку. Верхним краем блока считается фотография, а не карточка: иначе зазор зрительно оказывается меньше заданного ровно на этот вылет. Целимся в класс варианта, а не в соседство `.ourspecinfo-v1 + …`: соседями эти секции в разметке не являются. */ @media (min-width: 769px) { .page-famcons .ourspecinfo-v1 { --section-pb: 0px; padding-bottom: 0; } .page-famcons .consformnew-v1--alt { margin-top: 20px; } } /* 14. О клинике (leoinfo-v1) — отступы секции заданы владельцем. */ @media (min-width: 769px) { .page-famcons .leoinfo-v1 { --section-pt: 0px; --section-pb: 40px; } /* 15. Форма подбора → 16. О клинике: 60. Было 100 — форма держит снизу 40 своего отступа, ещё 60 приходилось на запас под фото. */ .page-famcons .consformnew-v1--alt { --section-pb: 0px; padding-bottom: 0; } .page-famcons .leoinfo-v1 { padding-top: 0; } } /* 17. Уют → 18. ЧаВо: 40. Было 20. */ @media (min-width: 769px) { .page-famcons .uyutinfo-v1 { --section-pb: 0px; padding-bottom: 0; } .page-famcons .faq-v1 { --section-pt: 40px; padding-top: 40px; } } /* 19. Форма вопроса → подвал: 20. Было 0 — форма упиралась в подвал. */ @media (min-width: 769px) { .page-famcons .faq-v1 + .consformnew-v1 { --section-pb: 20px; padding-bottom: 20px; } } /* ══════════════════════════════════════════════════════════════ МОБИЛЬНЫЕ ОТСТУПЫ (≤ 768px) В vw, а не в px: на мобильной вся шкала блоков задана долями ширины экрана, и пиксель тут не тянется вместе с ним. Опорная ширина расчёта — 400px, как у остальных мобильных значений темы (12.5vw = 50px, 2.5vw = 10px). ══════════════════════════════════════════════════════════════ */ /* Меню → 1. Первый экран: 2.5vw (10px). Было 0. */ @media (max-width: 768px) { .page-famcons .uslugihero-v1 { --section-pt: 2.5vw; padding-top: 2.5vw; } } /* 1. Первый экран → 2. Карточки о клинике: 2.5vw (10px). Было 20vw (80px) — разрыв между блоками ОДНОЙ секции: карточки вынесены из-под героя технически, но по замыслу это единый первый экран. Шаг тот же, что между элементами внутри блоков. */ @media (max-width: 768px) { .page-famcons .uslugihero-v1 { --section-pb: 0px; padding-bottom: 0; } .page-famcons .infocard-v1 { --section-pt: 2.5vw; padding-top: 2.5vw; } } /* 2. Карточки о клинике → 3. Кто такой семейный психолог: 10vw (40px). Списки отбиваются одинаково сверху и снизу — по 40. */ @media (max-width: 768px) { .page-famcons .infocard-v1 { --section-pb: 0px; padding-bottom: 0; } .page-famcons .articles-typical { padding-top: 10vw; } /* У первого блока свой верхний отступ 20px — он прибавлялся к padding выше и давал 80 вместо 60. */ .page-famcons .articles-typical__content > *:first-child { margin-top: 0; } } /* Абзац «Чем раньше пара обращается…» — часть секции списка, а не отдельный блок: в макете он внутри фрейма CheckListD. Поэтому между списком и им — малый внутренний шаг 5vw, а отбивка 10vw идёт уже ПОСЛЕ него, к следующей секции. */ @media (max-width: 768px) { .page-famcons .articles-typical__content > .list-v1 + p { margin-top: 5vw; } .page-famcons .articles-typical__content > p + .consformnew-v1 { margin-top: 10vw; } } /* Форма → «Как проходит приём»: 10vw (40px). Было 15vw (60px). Тот же шаг, что у остальных списков — секция списка везде отбита одинаково. */ @media (max-width: 768px) { .page-famcons .articles-typical__content > .consformnew-v1 { padding-bottom: 0; } .page-famcons .articles-typical__content > .consformnew-v1 + .list-v1 { margin-top: 10vw; } } /* «Как проходит приём» → плашка про сеанс: 10vw (40px). Было 8.75vw. Список отбит одинаково со всех сторон. */ @media (max-width: 768px) { .page-famcons .articles-typical__content > .note-v1 { margin-top: 10vw; } } /* Плашка → «Почему выбирают клинику»: 10vw (40px). Было 8.75vw. */ @media (max-width: 768px) { .page-famcons .articles-typical__content > .note-v1 + .list-v1 { margin-top: 10vw; } } /* «Почему выбирают клинику» → «Форматы приёма»: 10vw (40px). Было 5vw. Нижняя отбивка списка — та же, что верхняя. */ @media (max-width: 768px) { .page-famcons .articles-typical__content > .visitformats-v1 { margin-top: 10vw; } } /* «Форматы приёма» → «Стоимость консультации»: 10vw (40px). Было 5vw. */ @media (max-width: 768px) { .page-famcons .articles-typical__content > .minprice-v1 { margin-top: 10vw; } } /* Связка «Стоимость → Оставьте заявку → форма» стоит плотнее прочего: это один смысловой блок, цена и призыв читаются вместе с формой. После цены 5vw (20px), после призыва 2.5vw (10px). */ @media (max-width: 768px) { .page-famcons .articles-typical__content > .rightnow-v1 { margin-top: 5vw; } .page-famcons .articles-typical__content > .rightnow-v1 + .consformnew-v1 { margin-top: 2.5vw; } } /* Форма записи → Отзывы: 10vw (40px). Было 32.75vw (131px) — складывались нижний отступ блока текста и верхний отступ секции отзывов. Зазор задаёт одно место, второе обнулено. */ @media (max-width: 768px) { .page-famcons .articles-typical { padding-bottom: 0; /* mobile.css:2626 задаёт .articles-typical { margin-bottom: 10vw } — это 40px, которые складывались с 21 внутреннего блока и давали 61. */ margin-bottom: 0; } .page-famcons .articles-typical__content > *:last-child { margin-bottom: 0; } .page-famcons .otzyvinfo-v1 { /* margin здесь бесполезен — он схлопывается с чужим отступом и поглощается им: 19 и 39 давали один и тот же результат. Зазор задаёт padding, схлопыванию не подверженный. После обнуления margin-bottom у блока текста снаружи остаётся 21px схлопнутого отступа; 39 padding добирают до 60. */ /* Снаружи приходит 62px схлопнутого отступа; −2 доводят до 60. Дробь, из-за которой раньше выходил 61, устранена в consformnew-v1.css: у согласия был line-height 13.5. */ --section-pt: 0px; padding-top: 0; margin-top: -2px; } } /* Отзывы → Специалисты: 60px. Было 40. */ @media (max-width: 768px) { .page-famcons .otzyvinfo-v1 { --section-pb: 0px; padding-bottom: 0; } .page-famcons .ourspecinfo-v1 { --section-pt: 60px; padding-top: 60px; } } /* Специалисты → Форма подбора: 40px. Было 20. */ @media (max-width: 768px) { .page-famcons .ourspecinfo-v1 { --section-pb: 0px; padding-bottom: 0; } .page-famcons .consformnew-v1--alt { margin-top: 40px; } } /* О клинике → Уют: 40px. Было 20. */ @media (max-width: 768px) { .page-famcons .leoinfo-v1 { --section-pb: 0px; padding-bottom: 0; } .page-famcons .uyutinfo-v1 { --section-pt: 40px; padding-top: 40px; } } /* Уют → ЧаВо: 40px. Было 60. */ @media (max-width: 768px) { .page-famcons .uyutinfo-v1 { --section-pb: 0px; padding-bottom: 0; } .page-famcons .faq-v1 { --section-pt: 40px; padding-top: 40px; } } /* ЧаВо → Форма вопроса: 40px. Было 80. */ @media (max-width: 768px) { .page-famcons .faq-v1 { --section-pb: 0px; padding-bottom: 0; } .page-famcons .faq-v1 + .consformnew-v1 { margin-top: 40px; } }