/* * Доработки поверх исходной вёрстки (этого файла в layout/ нет — он наш). * * Значки-«арт», которые клиент вставляет кодом через админку, выводятся на * витрине инлайн (). Родные значки вёрстки — , и размерные стили * заданы именно для (.category-link__media img, .actual__icon img). * Инлайн- эти правила не получает и встаёт в свой атрибутный размер * (width/height внутри кода), из-за чего вставленный значок отличается по * размеру от родных, а в узких контейнерах — переполняет их. Ниже выравниваем * инлайн- под то же поведение, что и . */ /* Контейнеры с заданной шириной (карточка направления на главной, «Способствует» в «О комплексе», «Актуальность»/«эффекты», карточки блока «О продукте» на главной): значок заполняет контейнер, как это делал . */ .category-link__media > svg, .actual__icon > svg, .effects__icon > svg, .promotes__icon > svg, .about-link__preview > svg { width: 100%; height: auto; } /* Рисунок задаёт ширину сам — не растягиваем, только не даём переполнить контейнер: шкала блока «Мониторинг», а также «Это позволяет» в «О комплексе» (его фигура-значок без заданной ширины — как в исходной вёрстке). */ .explore-card__media > svg, .variation-effect__icon > svg { max-width: 100%; height: auto; } /* * Cookie-баннер: скрыть после согласия. В присланной вёрстке клиента у .cookies * есть только оформление, но НЕТ правила, которое его прячет, и нет обработчика * кнопки «Хорошо». Логику добавляем мы: инлайн-скрипт в layouts/app.blade.php * вешает на класс _is-cookies-accepted (и запоминает выбор в localStorage), * а это правило по нему прячет баннер. */ ._is-cookies-accepted .cookies { display: none; } /* * Тесты-опросники: переключение «экран вопросов → экран результата». В исходной * вёрстке .test__result скрыт (display:none) и показать его нечем — движок теста * (public/files/test.js) после ответа вешает на .test класс is-result, а эти два * правила по нему прячут вопросы и показывают результат. Нужную ячейку результата * из нескольких скрипт раскрывает сам (снимает атрибут hidden). */ .test.is-result .test__main { display: none; } .test.is-result .test__result { display: block; } /* * «Шкала Грина» (менопауза) — балльная медицинская шкала. В отличие от остальных * тестов, её экран результата показывает саму сумму баллов, медицинскую сноску с * источником и легенду степеней. В присланной вёрстке этих блоков нет (там окно * теста — заглушка на 3 вопроса с ячейкой «Нет контента»), поэтому оформляем их * здесь — типографикой и палитрой сайта (--color-red-100 — акцент бренда). * Блоки выводятся только у тестов с признаком балльной шкалы (config/tests.php). */ /* Степень + сумма баллов — одной группой. Вёрстка раскидывает прямых детей .test-result__content по высоте поровну (justify-content: space-evenly), поэтому тремя блоками текст на снимке разъезжался. Группой их снова двое — как в остальных тестах (заголовок + текст), а внутри группы — маленький отступ. */ .test-result__head { display: flex; flex-direction: column; gap: var(--size-8); } .test-result__score { display: flex; align-items: baseline; gap: var(--size-8); margin: 0; } /* Подпись и число — цветом контента: поверх фотографии вёрстка делает его белым (на широких экранах), на узких — тёмным. `inherit` попадает в обе ситуации. */ .test-result__score-label { color: inherit; } .test-result__score-value { font-size: var(--title-3); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: inherit; } /* Совет, медицинская сноска и источник — подложкой ПОД картинкой, а не на ней: поверх снимка оставлены только степень, сумма и фраза о ней. Блок лежит внутри .test__body — от него же берёт горизонтальные отступы (те же, что у кнопок). */ .test-note { display: flex; flex-direction: column; gap: var(--size-8); padding: var(--size-16); border-radius: var(--size-10); background-color: var(--color-light-200); } .test-note__text { font-size: var(--size-14); line-height: 1.4; color: var(--color-dark); } .test-note__text p { margin: 0; } /* Сноска и источник — мельче и приглушённее: это юридическая приписка. */ .test-note__footnote, .test-note__source { margin: 0; font-size: var(--size-12); line-height: 1.4; color: var(--color-shadow-800); } .test-note__source a { color: inherit; text-decoration: underline; } .test-note__source a:hover { color: var(--color-red-100); } /* Легенда степеней: подсказка, как читать свою сумму. Отступы по бокам — от .test__body, поэтому своих горизонтальных полей у блока нет. */ .test-scale { display: flex; flex-direction: column; gap: var(--size-12); padding: var(--size-16); border-radius: var(--size-10); background-color: var(--color-light-200); } .test-scale__title { margin: 0; font-size: var(--size-16); font-weight: 600; line-height: 1.2; } .test-scale__list { display: flex; flex-wrap: wrap; gap: var(--size-8) var(--size-30); margin: 0; padding: 0; list-style: none; } .test-scale__item { display: flex; align-items: baseline; gap: var(--size-6); font-size: var(--size-14); line-height: 1.3; } .test-scale__range { font-weight: 600; color: var(--color-red-100); } .test-scale__degree { color: var(--color-shadow-800); } /* * «О комплексе», блок «Два вида капсул»: мелкий красный надзаголовок * (eyebrow) над «Все компоненты...» — тот же приём, что red_subtitle/ * black_subtitle («Состав комплекса») у секции composition, только там * размер берётся от соседнего служебного класса _h4, а тут поле одно и * несёт свою типографику само. * * .variation__head — flex-колонка с крупным gap: var(--gap-medium) между * иконкой-«клубком», заголовком и текстом. Если оставить как есть, новый * подзаголовок ляжет с тем же большим отступом и от иконки, и от заголовка — * потеряется вид «подпись вплотную над заголовком». Гасим нижний отступ * отрицательным margin, ровно как уже сделано для соседней иконки чуть выше * по каскаду (`.variation__head svg { margin-bottom: calc(-1 * var(--gap-normal)) }`). */ .variation__suptitle { margin-bottom: calc(-1 * var(--gap-normal)); font-size: var(--title-4); font-weight: 600; line-height: 1.1; color: var(--color-red-100); } /* * «Исследования»: юридическая сноска-расшифровка (МГТ) под графиком. * .impact-tabs — обычный блок (padded-карточка, не flex), поэтому здесь * достаточно обычного margin-top — приёмов с гашением gap не нужно. * Оформление — как соседняя мелкая приглушённая приписка .test-note__footnote. */ .impact-tabs__note { margin: var(--size-12) 0 0; font-size: var(--size-14); line-height: 1.4; color: var(--color-shadow-700); } /* * Список литературы в статье нумеровался «5.1 / 4.1» вместо «1, 2, 3». Тело * статьи целиком внутри ._wysiwyg, где номера пунктов рисует CSS-счётчик: * ._wysiwyg ol>li::before { content: counters(num, ".") ". " } * counters() (мн.ч.) склеивает ВСЕ счётчики `num`, видимые в области действия. * Список литературы обёрнут в .spollers — это «следующий сосед» после обычного * нумерованного списка-блока в статье; область действия counter-reset у первого * списка распространяется на следующих соседей, поэтому счётчик литературы * оказывается «вложенным» в него и печатается как «<номер последнего пункта>.1» * (5 пунктов → 5.1, 4 → 4.1). Вложенных нумерованных списков в контенте нет — * берём только внутренний счётчик (counter, ед.ч.), и любой
    снова * нумеруется 1, 2, 3. Приращение (counter-increment:num) от исходного правила * сохраняется — переопределяем только содержимое маркера. */ ._wysiwyg ol > li::before { content: counter(num) ". "; } /* * Маркированные списки в контенте (._wysiwyg ul): маркер «•» падал на строку * ВЫШЕ текста пункта. Причина: текст пункта нередко обёрнут в блочный

    * (санитайзер rich() оборачивает голый текст в абзац — напр. список в описании * на «Листке-вкладыше»), а исходный маркер ._wysiwyg ul>li::before — строчный, * без раскладки, поэтому «•» вставал отдельной строкой над блочным абзацем. * Кладём маркер слева абсолютом (висячий отступ), гасим вертикальные поля * абзаца на краях пункта и задаём разрядку между пунктами. Акцентные списки * (.accent-list) не трогаем — у них своя раскладка в исходной вёрстке. */ ._wysiwyg ul:not(.accent-list) > li { position: relative; padding-left: 1.4em; } ._wysiwyg ul:not(.accent-list) > li::before { position: absolute; left: 0.2em; top: 0; } ._wysiwyg ul:not(.accent-list) > li > p:first-child { margin-top: 0; } ._wysiwyg ul:not(.accent-list) > li > p:last-child { margin-bottom: 0; } ._wysiwyg ul:not(.accent-list) > li + li { margin-top: 0.6em; } /* * Блок «Способствует» (.actual): сетка карточек — repeat(auto-fit, minmax(12em, * 1fr)). Когда benefit ОДИН (у направления «Менопауза» по сверке с Figma * осталась одна карточка), auto-fit отдаёт единственной карточке всю ширину ряда * и она растягивается. Ограничиваем ширину одиночной карточки обычным размером * карточки (≈ как одна из нескольких) и прижимаем её к правому краю блока — в один * ряд с заголовком слева (justify-self:end; заодно снимает растягивание). На узких * экранах контейнер уже этого предела — карточка сама занимает всю его ширину, как * и карточки на многокарточных страницах (медиа-запрос не нужен). */ .actual__item:only-child { max-width: 22em; justify-self: end; } /* * Листалка статей (articles-slider): вид «выключенной» кнопки-стрелки на краю. * На крайней позиции скрипт вёрстки (script.min.js) вешает на кнопку класс * .articles-slider__btn_disabled. Но кнопка одновременно несёт классы .btn .btn_dark * (тёмный фон + светлый значок). Исходное правило вёрстки * .articles-slider__btn_disabled { color: var(--color-shadow-800); pointer-events: none } * имеет ту же специфичность (вес правила — 0,1,0), что и .btn_dark, и вообще не * трогает фон — поэтому «выключенная» кнопка оставалась с тёмным фоном, как активная * (конфликт есть уже в самой вёрстке). Поднимаем вес до двух классов и убираем фон, * чтобы стрелка на краю выглядела приглушённой и не нажималась. !important — страховка * от :hover/:focus-visible у .btn_dark (их специфичность 0,2,0 равна нашей). */ .articles-slider__btn_disabled, .articles-slider__btn_disabled.btn { color: var(--color-shadow-800) !important; pointer-events: none; background-color: transparent !important; } /* * Таблицы в статьях блога на десктопе (SEO-техаудит, п.17). В исходной вёрстке у * столбца большая минимальная ширина (--width-col-min ≈ 172px на десктопе), из-за * чего широкие таблицы (4–5 колонок) не влезали в колонку текста статьи (~708px) и * получали горизонтальный скролл. Аудит просит на десктопе показывать таблицу * целиком без скролла, а прокрутку оставить только на мобильных. * * Правка (по согласованию): на десктопе (от 1023.98px — брейкпоинт вёрстки) уменьшаем текст ЯЧЕЕК до 13px * (заголовки столбцов не трогаем — они в .table__row_head и остаются крупными) и * снижаем минимальную ширину столбца. Столбцы всё равно растягиваются (flex-grow), * поэтому узкие таблицы (2–3 колонки) заполняют ширину как раньше — правка влияет * только на широкие. На мобильных (< 1024px) правило не действует: там места мало, * прокрутка внутри таблицы остаётся (как просит аудит). * * Значения выверены замерами на живом dev-сайте (1024/1280/1440): таблицы до 4 * колонок помещаются на всех десктопных ширинах; 5-колоночная (единственная такая) * помещается на широком экране, на узком десктопе у неё остаётся небольшой скролл — * пять колонок с читаемым текстом физически шире узкой колонки статьи. */ @media (min-width: 1023.98px) { .table__grid { --width-col-min: 104px; } .table__row:not(.table__row_head) .table__col { font-size: 13px; } } /* * Картинки в теле статьи блога (.article-figure) — защита от «прыжков» вёрстки * (CLS, п.1 SEO-техаудита). В image.blade.php у проставляются атрибуты * width/height из реальных размеров файла (App\Support\ImageDimensions), и по ним * браузер резервирует место под картинку ещё до загрузки. Это правило масштабирует * картинку отзывчиво: max-width:100% — не вылезать за колонку, height:auto — * считать высоту от ширины (атрибуты используются только для пропорции). В исходной * вёрстке .article-figure не стилизована, поэтому правило наше. */ .article-figure img { display: block; max-width: 100%; height: auto; }