.
Просвет 12 остаётся нижней границей разгона: если описание на 360
или 320 разойдётся на строку-две больше, карточка вырастет выше 261,
а строки не слипнутся. Решение дословно повторено в
mobile-page-test-zreniya.css — это одна карточка на двух страницах. */
.tk-test-more__card {
border-radius: var(--r-image); /* макет 20; на десктопе карточные 24 */
justify-content: space-between; /* разгон строк по высоте, см. разбор */
gap: var(--s-3); /* нижняя граница разгона, макет 12 */
}
.tk-test-more__top { display: contents; }
/* Прижим книзу снимается: авто-поле съедает всё свободное место раньше,
чем до него доберётся space-between. Ширину во всю плашку
(295 = 335 − 20×2) правило .tk-test-more__btn держит само. */
.tk-test-more__btn { margin-top: 0; }
}
/* ══ 5. Теснота · 360 и уже ══════════════════════════════════════════════
Заголовок страницы — одно слово, переносить его не по чему.
«Цветовосприятие» при кегле 34 имеет меру 8,7em ≈ 296px, с трекингом
−0,03em ≈ 281px. На 360 контейнер 320 — помещается; на 320 контейнер
280 — не помещается, и страница поехала бы вбок, чего быть не должно.
Опускаем заголовок на ступень --t-page-title (на мобильном 30):
8,7em × 30 ≈ 261 − трекинг ≈ 248 при 280 доступных — запас 32.
Медиазапрос взят на 360, а не на 340: 360 — принятая в системе точка
тесноты (её же использует mobile-m1.css для пилюли записи в шапке),
а кегль 30 на 360 ничего не портит. Правило вынесено из блока 680
отдельным запросом намеренно: внутри одного медиазапроса вложенности
в системе нет. */
@media (max-width: 360px) {
.tk-test-head__title {
font-size: var(--t-page-title-size);
line-height: var(--t-page-title-lh);
}
}
/* ═══ test-zreniya ═══ */
/* ТОМОКО — мобильная адаптация страницы «Тесты зрения — каталог»
/pacientu/test-zreniya/. Снято 28.08.2026 с артборда Figma
«М · Тесты зрения /pacientu/test-zreniya/» 345:16079 (375×4131),
файл U5M0ihzdUI9upBTwUAHZ42.
Разметка одна на оба размера: ниже ТОЛЬКО медиазапросы к десктопным
классам страницы. Новых элементов нет — бургер и мобильное меню,
единственная разметка, которой на десктопе физически не существует,
заведены в mobile-m1.css.
ПОДКЛЮЧАТЬ ПОСЛЕДНИМ: tokens.css → base.css → components.css →
sections.css → pages.css → mobile.css → этот файл. Все правила ниже
дословно спорят с блоком @media (max-width: 680px) в page-test-zreniya.css
при равной специфичности и выигрывают только за счёт порядка подключения.
ВАЖНО. В page-test-zreniya.css, блок 5, записано: «ОТДЕЛЬНОГО МОБИЛЬНОГО
МАКЕТА У КАТАЛОГА ТЕСТОВ НЕТ», и раскладка там выведена по правилам
системы и по соседней детальной. Макет есть — 345:16079, и он разошёлся
с выведенной раскладкой в семи местах. Эти семь правил — весь смысл файла:
• нижнее поле шапки страницы 24, а не 32;
• кегль заголовка 34 / 1.02 / −1,2px, а не 38 / 0.94
от --t-display-size;
• ЦВЕТ заголовка зелёный #237e33 (--c-brand-green),
а не чернильный: на этом артборде h1
покрашен так же, как на «М · Пациенту»;
• кегль лида 15, а не 17 от .t-body-lg;
• нижнее поле секции 32, а не 40;
• просвет между карточками 12, а не 16 (и столько же до плашки);
• карточка скругление 20, высота 261 и разгон
содержимого по высоте, а не «по
содержимому» с прижатой книзу кнопкой;
• поля плашки «ВАЖНО» 18/20, а не 20/22.
(Семь пунктов раскладки плюс цвет заголовка — восьмая правка, но она
не про метрику, поэтому в счёт «расхождений раскладки» не идёт.)
Что уже сделано и здесь не повторяется:
• шапка, бургер, раскрытое меню — mobile-m1.css;
• финальный блок (CTA и подвал) — mobile-m3.css: узел 358:5077
мобильного артборда совпадает с ним дословно;
• отбивка крошек 32 и «/» вместо тире — components.css (макет 32 ✓);
• тап-цель крошек 24 — mobile-m1.css, блок тап-целей;
• одна колонка вместо трёх — base.css (.tk-grid--3 на 680);
• верхнее поле и просветы шапки страницы — page-test-zreniya.css, блок 5:
16 против макетных 14 — цена шага 4px, переопределения не стоит
(то же решение принято на «Лицензиях», «Памятке» и «Вычете»);
• поля карточки 20 (--s-card) и заливка --c-mist,
поля плашки по горизонтали, просвет метки и текста 8 — сошлось
с макетом до пикселя, трогать нечего.
Точка перелома одна — 680: страница по всей ширине идёт в одну колонку.
На 360 и 320 ничего не ломается: самое длинное неразрывное слово
каталога — «Цветовосприятие» в заголовке карточки (кегль 20, мера
8.7em ≈ 168px) — умещается в 240 внутренней ширины карточки даже на 320.
Поля 20 и сжатую шкалу кеглей даёт tokens.css. Теней нет ни одной,
элевация только цветом.
Расхождения с макетом, сознательно НЕ реализованные (кегли 10 у
надстрочника карточки и у метки «ВАЖНО», кегль 14 у описаний,
скругление плашки 18, высота кнопки 46, кегль и трекинг крошек),
перечислены в notes отчёта — в CSS они не заводились. */
@media (max-width: 680px) {
/* ══ 1. Шапка страницы · 345:16123 ═══════════════════════════════════════
Кадр 375×236: поля 20 держит .tk-container, сверху 32 до крошек, между
всеми тремя строками по 14, снизу 24. Крошки лежат в своей обёртке
(.tk-crumbs, отбивка 32 из components.css — с макетом сошлась),
поэтому верхнее поле блока — ровно просвет 14, и оно уже стоит
в page-test-zreniya.css округлённым до шага 16.
Сумма кадра: 32 + 13 + 14 + 70 + 14 + 69 + 24 = 236. */
/* ИСПРАВЛЕНИЕ: в page-test-zreniya.css нижнее поле 32 (--s-8). В макете 24 —
ровно столько же, сколько на «Лицензиях» и «Памятке». */
.tk-tests-head { padding-bottom: var(--s-6); }
/* ИСПРАВЛЕНИЕ, две части.
Кегль. В page-test-zreniya.css заголовок берёт мобильную ступень
--t-display-size (38 / 0.94). В макете 34 / 1.02 / −1,2px (345:16125):
строка 335 при высоте 70 — это ровно две строки по 34.7. Ступени 34
в шкале нет, значение то же, что у .tk-pamyatka__title,
.tk-staff__title и .tk-zabkat__title — одна мобильная ступень
заголовка внутренней страницы на пяти страницах, а не пять подборов.
Интерлиньяж и трекинг заданы явно: без них класс тянет --t-page-title-lh
и токенный трекинг ступени 64.
Цвет. В макете заголовок зелёный, #237e33 = --c-brand-green (замер
345:16125), а не чернильный, как на десктопе. Ровно тот же приём, что
на «М · Пациенту»: у каталогов-посадочных раздела h1 на телефоне
позеленел. Контраст зелёного на бумаге 5.6:1 — норму AA держит. */
.tk-tests-head__title {
font-size: 34px; /* макет 345:16125; ступени 34 в шкале нет */
line-height: 1.02;
letter-spacing: -0.035em; /* −1,2px при кегле 34 */
color: var(--c-brand-green);
}
/* ИСПРАВЛЕНИЕ: класс .t-body-lg в разметке даёт на мобильном 17 / 1.29,
в макете лид 15 / 1.55 (345:16126): три строки по 23 при высоте 69.
Кегль 15 — это ровно мобильная ступень --t-body-size, подбирать нечего.
Интерлиньяж 1.5 вместо макетных 1.55: это проза, а не подпись, тот же
шаг сделан на «Заболеваниях» и «Лицензиях». */
.tk-tests-head__lead {
font-size: var(--t-body-size);
line-height: 1.5;
}
/* ══ 2. Секция тестов · 345:16127 ════════════════════════════════════════
Кадр 375×1814: шесть карточек 335×261 с шагом 273, то есть просветом 12,
затем те же 12 до плашки «ВАЖНО» (144) и 32 до подвала.
Сумма: 6×261 + 5×12 + 12 + 144 + 32 = 1814. */
/* ИСПРАВЛЕНИЕ: в page-test-zreniya.css нижнее поле секции 40 (--s-10).
В макете 32 — то же значение, что на «Заболеваниях» и «Памятке». */
.tk-tests-sec { padding-bottom: var(--s-8); }
/* ИСПРАВЛЕНИЕ: там же просветы стоят 16. В макете 12 — сеточные 24
на телефоне широки, но и 16 макет не подтверждает. */
.tk-tests-grid {
gap: var(--s-3); /* макет 12 */
margin-bottom: var(--s-3); /* до плашки «ВАЖНО», те же 12 */
}
/* ══ 3. Карточка теста · 345:16128 и пять однотипных ═════════════════════
Плашка --c-mist 335×261: поля 20, скругление 20, четыре строки
(надстрочник, название, описание, кнопка) РАЗОГНАНЫ ПО ВЫСОТЕ —
в макете это auto-layout со space-between, а не прижатая книзу кнопка.
Разгон проверен: 261 − 20×2 = 221 внутренней высоты, содержимое
12 + 23 + 84 + 46 = 165, свободных 56 на три просвета по 18,67 —
ровно те координаты, что стоят у текстов в макете (50,67 / 92,33 / 195).
У карточек с описанием в три строки содержимое 144, и просветы
расходятся до 25,67 — то же самое space-between.
Десктоп собирает карточку иначе: просветы внутри .tk-tests-card__top
фиксированные 12, а кнопка отжата книзу через margin-top: auto. На 1200
это верно (высота 314 задана, разгона в макете нет), на 375 — нет.
Чтобы получить разгон, не трогая разметку, обёртка __top на телефоне
растворяется: display: contents убирает её собственный бокс, и все
четыре строки становятся прямыми детьми карточки — тем самым флексом,
которым они нарисованы в Figma. Обёртка — простой
без роли
и без семантики, растворять её безопасно; в Safari известные баги
display: contents касаются списков и таблиц, а не голого
.
Просвет 12 остаётся нижней границей разгона: если описание на 360
или 320 разойдётся на строку-две больше, карточка вырастет выше 261,
а строки не слипнутся. */
.tk-tests-card {
min-height: 261px; /* макет 345:16128, h=261 */
border-radius: var(--r-image); /* макет 20; на десктопе карточные 24 */
justify-content: space-between; /* разгон строк по высоте, см. разбор */
gap: var(--s-3); /* нижняя граница разгона, макет 12 */
}
/* Обёртка растворяется — см. разбор выше. Её собственные gap 12
и margin-bottom при display: contents не применяются, гасить нечем
и не нужно. */
.tk-tests-card__top { display: contents; }
/* Прижим книзу снимается: авто-поле съедает всё свободное место раньше,
чем до него доберётся space-between, и разгона бы не получилось.
Ширину во всю плашку (295 = 335 − 20×2) правило .tk-tests-card__btn
держит само, её не трогаем. */
.tk-tests-card__btn { margin-top: 0; }
/* ══ 4. Плашка «ВАЖНО» · 345:16164 ═══════════════════════════════════════
Кадр 335×144: поля 18 по вертикали и 20 по горизонтали, просвет метки
и текста 8, скругление 18. Столбик (метка над текстом) и просвет 8
уже стоят в page-test-zreniya.css, заливка --c-orange 13% на бумаге
и притемнённая метка — в общем блоке страницы; сошлось, трогать нечего.
Сумма кадра: 18 + 12 + 8 + 88 + 18 = 144.
ИСПРАВЛЕНИЕ: там поля стоят 20/22, в макете 18/20. Горизонтальные 20 —
это ровно мобильный --s-card, вертикальных 18 в ритме 4px нет. */
.tk-tests-note { padding: 18px var(--s-card); }
}
/* ═══ tomoko-tv ═══ */
/* ТОМОКО — мобильная адаптация страницы «Томоко-TV» /o-klinike/tomoko-tv/.
Снято 28.08.2026 с артборда Figma «М · Томоко-TV /o-klinike/tomoko-tv/»
345:16264 (375×3403), файл U5M0ihzdUI9upBTwUAHZ42.
Разметка одна на оба размера: ниже ТОЛЬКО медиазапросы к десктопным
классам страницы. Новых элементов нет — бургер и мобильное меню,
единственная разметка, которой на десктопе физически не существует,
заведены в mobile-m1.css.
ПОДКЛЮЧАТЬ ПОСЛЕДНИМ: tokens.css → base.css → components.css →
sections.css → pages.css → mobile.css → этот файл. Часть правил ниже
дословно спорит с блоком @media (max-width: 680px) в page-tomoko-tv.css
и с .tk-card-post в components.css при равной специфичности и выигрывает
только за счёт порядка подключения.
ВАЖНО. В page-tomoko-tv.css мобильная раскладка была ВЫВЕДЕНА, а не
снята: там прямо написано «ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У ЭТОЙ СТРАНИЦЫ
НЕТ», и метрика бралась по правилам системы и по соседним страницам того
же типа. Макет теперь есть, и он расходится с выведенным в семи местах:
• кегль заголовка 34 / 1.02, а не 38 / 0.94 от --t-display;
• кегль лида 15, а не 17 от .t-body-lg;
• нижнее поле шапки страницы 24, а не 32;
• нижнее поле галереи 32, а не --s-section (на 680 это 56);
• просвет между роликами 14, а не выведенные 24;
• просвет внутри карточки 10, а не канонические 16;
• диаметр знака видео 48, а не 56, и кадр постера 335×190
вместо 16:9.
Эти семь правил — весь смысл файла.
Что уже сделано и здесь не повторяется:
• шапка, бургер, раскрытое меню — mobile-m1.css;
• финальный блок (CTA и подвал) — mobile-m3.css: узел
358:5255 мобильного артборда совпадает с ним дословно;
• отбивка крошек 32 и «/» вместо тире — components.css;
• тап-цель крошек 24 — mobile-m1.css, блок тап-целей;
• схлопывание .tk-grid--3 в одну колонку — base.css;
• верхнее поле шапки страницы, просвет
её строк и снятая мера строки лида — page-tomoko-tv.css, блок 4
(16 против макетных 14 — цена шага 4px, переопределения не стоит).
Точка перелома одна — 680: страница по всей ширине идёт в одну колонку,
ни на 480, ни на 360 ничего не ломается. Поля 20 и сжатую шкалу кеглей
даёт tokens.css. Теней нет ни одной, элевация только цветом.
Чего в разметке нет и что здесь не выдумывалось: под галереей в макете
стоит обводочная пилюля «СМОТРЕТЬ ВСЕ 15 РОЛИКОВ» во всю ширину
(345:16337, 335×46) — на десктопе такого элемента нет, разметку
не трогаем. Расхождения, сознательно НЕ реализованные (кегль метки 9 —
ниже порога читаемости слоя, четыре ролика вместо шести, скругление
постера 18), перечислены в notes отчёта. */
@media (max-width: 680px) {
/* ══ 1. Шапка страницы · 345:16308 ═══════════════════════════════════════
Кадр 375×178: поля 20 держит .tk-container, сверху 32 до крошек, между
всеми тремя строками по 14, снизу 24. Крошки лежат в своей обёртке
(.tk-crumbs, отбивка 32 из components.css), поэтому верхнее поле
блока — ровно просвет 14, и оно уже стоит в page-tomoko-tv.css
округлённым до шага 16. Сумма сходится:
32 + 13 + 14 + 35 + 14 + 46 + 24 = 178. */
.tk-tv__head { padding-bottom: var(--s-6); } /* макет 24 */
/* ИСПРАВЛЕНИЕ: выведенный кегль заголовка — --t-display-size, на мобильных
это 38 при интерлиньяже 0.94. В макете 34 / 1.02 / −1,2px (345:16310),
ровно те же три значения, что у заголовка «М · Лицензии» 345:15567:
это одна мобильная ступень на двух страницах, а не два подбора.
Трекинг переведён в em делением на кегль, чтобы не разъезжался
на 480 и 360.
ОТКЛОНЕНИЕ ОТ ШКАЛЫ: ступени 34 на мобильных нет — сжатая шкала
tokens.css даёт 30 (--t-page-title-size) и 32 (--t-display-sm-size).
Кегль взят из макета, токен не тронут: править его пришлось бы вслед
за Figma. См. notes отчёта. */
.tk-tv__title {
font-size: 34px; /* макет 345:16310 */
line-height: 1.02;
letter-spacing: -0.035em; /* −1,2px при кегле 34 */
}
/* Лид на мобильном опускается на ступень: в макете 15 / 1.55 (345:16311),
а класс .t-body-lg в разметке даёт 17 / 1.29. Кегль 15 — это ровно
мобильная --t-body-size, отдельного пикселя не нужно. Интерлиньяж
1.5 вместо макетных 1.55: ступень прозы, принятая в системе,
разница — 0,75px на строку. */
.tk-tv__lead {
font-size: var(--t-body-size);
line-height: 1.5; /* макет 1.55; проза, а не подпись */
}
/* ══ 2. Видеогалерея · 345:16312 ═════════════════════════════════════════
Кадр 375×1144, верхнего поля нет — отбивку сверху дала шапка страницы.
Ролики 335 в одну колонку через 14, под ними пилюля «смотреть все»
(её в разметке нет, см. шапку файла) и нижнее поле 32. Сумма сходится:
263 + 14 + 242 + 14 + 263 + 14 + 242 + 14 + 46 + 32 = 1144. */
/* ИСПРАВЛЕНИЕ: нижнее поле секции берётся не из ритма (--s-section,
на мобильных 56), а из макета — 32: кадр «Подвал мобильный» начинается
ровно на 1384 = 240 + 1144. */
.tk-tv { padding-bottom: var(--s-8); } /* макет 32 */
/* ИСПРАВЛЕНИЕ: в одну колонку ролики стоят через 14 → шаг 16, а не через
выведенные десктопные 24: 277 − 0 − 263 = 14. */
.tk-tv__list { gap: var(--s-4); } /* макет 14 → шаг 16 */
/* ПЕРЕОПРЕДЕЛЕНИЕ КАНОНИЧЕСКОГО КЛАССА. Просвет внутри карточки в макете
10 (постер → метка → заголовок), канонический .tk-card-post даёт 16.
Без правила лестница карточки становится на 12px выше макетной,
и четыре ролика перестают помещаться в кадр галереи. Правится только
раскладка, в своей области видимости и только ≤680; тот же приём,
что у .tk-blog__card и .tk-promos__body в mobile.css. */
.tk-tv__card { gap: var(--s-3); } /* макет 10 → шаг 12 */
/* Постер: 335×190 (345:16314). Десктопный .tk-tv__poster держит 16:9 —
при ширине 335 это 188, на полтора пикселя ниже макета. Ставим кадр
макета: 335×190 — общая мобильная пропорция обложки на сайте, ею же
набраны плитки акций, статей и каталога услуг в mobile.css.
Скругление в макете 18; токена 18 нет, ближайший --r-image (20) уже
стоит на .tk-card-post__cover — тот же выбор, что у .tk-optics__media. */
.tk-tv__poster { aspect-ratio: 335 / 190; } /* кадр макета 345:16314 */
/* Знак видео на мобильном мельче: круг 48 вместо 56 (345:16315 — эллипс
48×48, левый край 143 и верхний 71 при кадре 335×190, то есть ровно
по центру). Глиф остаётся 16×16: в макете треугольник 15×17, готовый
icon-play.svg квадратный. Знак декоративный (aria-hidden), тап-целью
не является — карточка ролика на этой странице вообще не ссылка. */
.tk-tv__play { width: 48px; height: 48px; } /* макет 345:16315 */
/* ПЕРЕОПРЕДЕЛЕНИЕ КАНОНИЧЕСКОГО КЛАССА. Заголовок ролика в макете
18 SemiBold / 1.18 (345:16318); .tk-card-post__title даёт 20 (на
мобильных наследует --t-body-lg-size, то есть 17) при интерлиньяже 1.2.
Ступени 18 в шкале нет, 18 — замер, порог читаемости слоя (11)
не нарушен. Правило уже существует в page-tomoko-tv.css в той же
области видимости — там ему задавали насыщенность; здесь дописываются
кегль и интерлиньяж, и только внутри .tk-tv__card: на карточки статей
и акций правило не протекает. */
.tk-tv__card .tk-card-post__title {
font-size: 18px; /* макет 345:16318 */
line-height: 1.18;
}
}
/* ═══ usluga ═══ */
/* ТОМОКО — мобильная адаптация страницы «Услуга — детальная»
/uslugi/lazernaya-korrekciya/. Снято 28.08.2026 с артборда Figma
«М · Услуга /uslugi/lazernaya-korrekciya/» 345:14201 (375×6581),
файл U5M0ihzdUI9upBTwUAHZ42.
Разметка одна на оба размера: ниже ТОЛЬКО медиазапросы к десктопным
классам страницы, новых элементов нет ни одного.
ПОДКЛЮЧАТЬ ПОСЛЕДНИМ: tokens.css → base.css → components.css →
sections.css → pages.css → mobile.css → этот файл. Часть правил ниже
спорит с блоком @media (max-width: 680px) в page-usluga.css и в
mobile.css при равной специфичности и выигрывает порядком подключения.
Что уже сделано и здесь не повторяется:
• шапка, бургер, раскрытое меню — mobile-m1.css;
• финальный блок (CTA и подвал) — mobile-m3.css;
• отбивка крошек и «/» вместо тире — components.css;
• плитка .tk-card-doctor на 375 — mobile.css, блок 5
(подложка --c-mist, скругление 20, портрет 160×190).
Общее по макету: все плашки на 375 скруглены на 20 (--r-image), а не
на карточные 24; исключение одно — оранжевая плашка «Студентам»,
у неё в макете как раз 24. Ритм страницы двухступенчатый: верхний
блок (герой → факты → студентам → шаги) идёт плотно, отбивка 28,
а справочные секции ниже — 36 сверху и снизу.
Расхождения с макетом, сознательно НЕ реализованные (кегли 8–11,
мельче нижней ступени шкалы, вторая кнопка героя, пилюля «К ВРАЧУ»,
кнопка «ВСЕ СПЕЦИАЛИСТЫ», интерлиньяж прозы 1.2), перечислены
в notes отчёта — в CSS они не заводились.
Тап-цели: скрыты только неинтерактивные -пилюли внутри ссылок,
ни одна ссылка и ни одна кнопка не уменьшена. Теней нет ни одной. */
@media (max-width: 680px) {
/* ══ 1. Герой · 345:14245 + 345:14249 ════════════════════════════════════
Кадр складывается в колонку с просветом 14: крошки → заголовок → лид →
ФОТО → кнопка. Вертикальные поля 14 сверху (до заголовка) и 28 снизу. */
.tk-usluga-hero {
padding-block: var(--s-4) var(--s-8); /* макет 14 / 28 → шаги 16 и 32 */
}
.tk-usluga-hero__inner { gap: var(--s-4); } /* макет 14; колонку даёт правило 1100 */
/* Порядок макета — заголовок, лид, ФОТО, кнопка: снимок стоит МЕЖДУ
лидом и кнопками, а в разметке кнопки лежат внутри текстовой колонки.
Единственный способ переставить их, не трогая разметку: обёртка текста
растворяется, её дети становятся прямыми элементами флексбокса.
Тот же приём, что у .tk-equipment__text и .tk-optics__body в mobile.css. */
.tk-usluga-hero__text { display: contents; }
.tk-usluga-hero__media {
order: 0;
flex-basis: auto; /* в колонке basis — это высота; 520 отсюда убрать */
margin-top: var(--s-3); /* 16 просвета + 12 = 28 из макета */
border-radius: var(--r-image); /* макет 20, десктопное карточное 24 */
}
/* Кадр на 375 шире десктопного: 335×220 вместо 520×420. */
.tk-usluga-hero__media img { aspect-ratio: 335 / 220; }
/* Заголовок 38 — ровно мобильная ступень --t-display-size. Интерлиньяж
в макете leading-none: три строки по 38 дают ровно 114 из кадра,
токен 0.94 их бы склеил. */
.tk-usluga-hero__title {
font-size: var(--t-display-size);
line-height: 1;
letter-spacing: var(--t-display-ls); /* макет −1,4px = −0,0368em */
}
/* Лид опускается на ступень: макет 15/1.55, десктопная body-lg даёт 17. */
.tk-usluga-hero__lead {
font-size: var(--t-body-size);
line-height: 1.5;
}
/* Кнопки уходят под снимок (order) и идут столбиком во всю ширину.
В макете кнопка одна, в разметке две («ЗАПИСАТЬСЯ» и «ЦЕНЫ И ЭТАПЫ»);
содержимое медиазапросом не убираем — обе повторяют геометрию
единственной кнопки макета. */
.tk-usluga-hero__actions {
order: 1;
flex-direction: column;
width: 100%;
gap: var(--s-4); /* макет 14 */
}
.tk-usluga-hero__actions .tk-btn { width: 100%; }
/* ══ 2. Ритм секций ══════════════════════════════════════════════════════
У кадров макета верхнего поля нет: отбивку держит нижнее поле
предыдущей секции. Верхний блок страницы идёт плотно — 28 между
факт-плашками и шагами. */
.tk-usluga-sec { padding-block-end: var(--s-8); } /* макет 28 → шаг 32 */
/* Справочные секции ниже шагов в макете отбиты вдвое просторнее:
36 сверху и 36 снизу, то есть 72 между соседями. Модификатора под это
в разметке нет, различать секции приходится по их содержимому —
:has() здесь читается лучше, чем :nth-of-type по порядку в .
Если браузер :has() не понимает, секция просто остаётся с полем 32:
ритм чуть плотнее макета, ничего не ломается. */
.tk-usluga-sec:has(.tk-usluga-method),
.tk-usluga-sec:has(.tk-usluga-contra),
.tk-usluga-sec:has(.tk-usluga-doctors__card),
.tk-usluga-sec:has(.tk-usluga-price__plate) {
padding-block: var(--s-8); /* макет 36 сверху и снизу → шаг 32 */
}
/* Заголовки секций: в макете 28 при интерлиньяже 1.05–1.2. Ступени 28
в шкале нет, ближайшая --t-heading-lg даёт 30; канонический 1.0
склеивает двухстрочные заголовки («Методики, которые применяем»
в макете занимает 68 = две строки по 34). */
.tk-usluga-sec__title {
line-height: 1.1;
margin-bottom: var(--s-4); /* макет 14 → шаг 16 */
}
/* Просвет между блоками во всех сетках страницы — 14, а не сеточные 24.
Плашку фактов правило не задевает: у неё строки разделяет линия,
а не просвет (см. блок 3). */
.tk-grid:has(.tk-usluga-step),
.tk-grid:has(.tk-usluga-method),
.tk-grid:has(.tk-usluga-doctors__card) { gap: var(--s-4); }
/* ══ 3. Факты · 345:14253 ════════════════════════════════════════════════
На 375 три равные колонки превращаются в список строк: цифра слева,
подпись справа колонкой 160, строки разделены волосяной линией.
Плашка --c-mist остаётся, но поля у неё 6 / 20 / 14. */
.tk-usluga-facts__plate {
gap: 0; /* строки разделяет линия, а не просвет сетки */
padding: var(--s-2) var(--s-5) var(--s-4); /* макет 6 / 20 / 14 */
border-radius: var(--r-image); /* макет 20 */
}
.tk-usluga-fact {
flex-direction: row;
flex-wrap: wrap; /* длинная подпись уходит под цифру — как факт 3 макета */
align-items: center;
justify-content: space-between;
gap: var(--s-2);
padding-block: var(--s-4); /* макет 14 → шаг 16 */
border-top: 1px solid var(--c-hairline); /* волосяная линия: токена толщины нет */
}
/* Цифра факта: в макете 20 SemiBold, а класс .t-heading в разметке даёт
на мобильном 26 Regular. Ступень subheading совпадает с макетом точно.
Ширину цифра держит сама — переносится подпись, а не она. */
.tk-usluga-fact .t-heading {
flex: none;
font-size: var(--t-subheading-size);
line-height: var(--t-subheading-lh);
letter-spacing: var(--t-subheading-ls);
font-weight: var(--w-semibold);
}
/* Колонка подписи в макете 160 — по ней строка и ломается. Базис, а не
max-width: у третьего факта подпись не помещается рядом с цифрой,
съезжает на свою строку и там должна занять всю ширину плашки,
а не остаться колонкой в 160 (как раз случай макета 345:14261). */
.tk-usluga-fact .t-label-sm { flex: 1 1 160px; }
/* ══ 4. Студентам · 345:14265 ════════════════════════════════════════════
Плашка та же, поля в макете 26/28 — это ближе к десктопным 24/32,
чем к сжатому --s-card (20), которым она была на 680 до сверки. */
.tk-usluga-students {
gap: var(--s-2); /* макет 10 → шаг 8 */
padding: var(--s-6) var(--s-8); /* макет 26 / 28 */
}
/* Цена в макете 22: ступени 22 в шкале нет, subheading (20) заметно
мельче — на плашке это главная строка, кегль замерен, не подобран. */
.tk-usluga-students__price { font-size: 22px; }
/* ══ 5. Как проходит · 345:14269 ═════════════════════════════════════════
Четыре шага в столбик, каждый отбит сверху линией 2px.
Просвет между шагами 14 задан в блоке 2. */
.tk-usluga-step {
gap: var(--s-2); /* макет 8 */
padding-top: var(--s-4); /* макет 16 */
}
/* ══ 6. Методики · 345:14289 ═════════════════════════════════════════════
Три плитки --c-mist во всю ширину. Поля 20 даёт сам --s-card,
он сжимается токеном; правится скругление и внутренний просвет. */
.tk-usluga-method {
gap: var(--s-2); /* макет 8, десктопные 16 */
border-radius: var(--r-image); /* макет 20 */
}
/* ══ 7. Противопоказания · 345:14299 ═════════════════════════════════════
На 375 и текстовый блок, и каждый пункт списка становятся плитками
--c-mist со скруглением 20 и полем 20; линий и оранжевых маркеров
в мобильном макете нет — пункты разделяет просвет 14. */
.tk-usluga-contra { gap: var(--s-4); } /* макет 14 → шаг 16 */
.tk-usluga-contra__text {
gap: var(--s-2); /* макет 8 */
padding: var(--s-card);
background: var(--c-mist);
border-radius: var(--r-image);
}
.tk-usluga-contra__list {
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.tk-usluga-contra__list li {
padding: var(--s-card);
background: var(--c-mist);
border-top: 0; /* линию заменила плитка */
border-radius: var(--r-image);
}
/* Маркера в мобильном макете нет: пункты и так разделены плитками. */
.tk-usluga-contra__list li::before { display: none; }
/* ══ 8. Кто оперирует · 345:14316 ════════════════════════════════════════
Врачи стоят в ДВА столбца по 160,5 через 14 — сетка не сваливается
в один столбец, как остальные .tk-grid--4 на 680. Плитка карточки
(подложка, скругление 20, портрет 160×190) уже собрана в mobile.css. */
.tk-grid:has(.tk-usluga-doctors__card) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* minmax(0, 1fr), а не 1fr: минимум элемента сетки по умолчанию равен
min-content, и колонка раздувается по самой длинной фамилии. */
/* Подписи у соседей разной длины, а плитка теперь видна — карточки
тянутся до высоты ряда, чтобы низ плиток стоял по одной линии. */
.tk-grid:has(.tk-usluga-doctors__card) > li { display: flex; }
/* Просвет 0: mobile.css задаёт .tk-card-doctor просвет 4 — он рассчитан
на карточку главной, где у подписи нет верхнего поля. Здесь поле есть,
своё, и портрет должен стоять в упор к подписи, как в макете. */
.tk-usluga-doctors__card {
width: 100%;
gap: 0;
}
.tk-usluga-doctors__photo { aspect-ratio: 160 / 190; } /* макет 160,5×190 */
.tk-usluga-doctors__body {
gap: var(--s-1); /* макет 4 */
padding: var(--s-3) 14px 14px; /* макет 12 / 14 / 14; шага 14 в сетке нет */
}
/* Пилюли «К ВРАЧУ» в мобильном макете нет: на карточке 160 она закрывает
половину портрета. Это неинтерактивный внутри ссылки-карточки —
ссылкой остаётся вся карточка, доступность не страдает. Ровно так же
снята пилюля .tk-doctors__cta на главной (mobile.css, блок 4). */
.tk-usluga-doctors__cta { display: none; }
/* ══ 9. Сколько стоит · 345:14343 ════════════════════════════════════════
Таблица разбирается на карточки: каждая строка — своя плитка --c-mist
с полем 20, внутри код → наименование → цена столбиком через 8.
Шапка секции в макете тоже лежит на такой плитке. */
.tk-usluga-price__head {
gap: var(--s-2); /* макет 8; components.css на 680 даёт 24 */
margin-bottom: var(--s-4); /* макет 14 */
padding: var(--s-card);
background: var(--c-mist);
border-radius: var(--r-image);
}
/* Общая плашка больше не нужна — плиткой стала каждая строка. */
.tk-usluga-price__plate {
padding: 0;
background: none;
}
.tk-usluga-price__list {
display: flex;
flex-direction: column;
gap: var(--s-4); /* макет 14 */
}
/* Канонический .tk-price-row переопределяется намеренно и только внутри
списка этой страницы: mobile.css раскладывает строку в один столбец
с просветом 4 и полем 16 — это состояние строки на главной и в прайсе.
В макете услуги строка живёт на собственной плитке: просвет 8,
поле 20, разделителей нет. Модификатор завести нельзя — он потребовал
бы правки разметки, поэтому правило прижато к .tk-usluga-price__list. */
.tk-usluga-price__list .tk-price-row {
display: flex;
flex-direction: column;
gap: var(--s-2); /* макет 8 */
padding: var(--s-card); /* макет 20 */
background: var(--c-mist);
border-radius: var(--r-image); /* макет 20 */
border-bottom: 0;
}
}
/* ═══ uslugi ═══ */
/* ТОМОКО — мобильная адаптация страницы «Услуги — каталог» /uslugi/.
Снято 28.08.2026 с артборда Figma «М · Услуги /uslugi/» 345:14089
(375×4621), файл U5M0ihzdUI9upBTwUAHZ42.
Разметка одна на оба размера: ниже ТОЛЬКО медиазапросы к десктопным
классам страницы. Новых элементов нет — бургер и мобильное меню,
единственная разметка, которой на десктопе физически не существует,
заведены в mobile-m1.css.
ПОДКЛЮЧАТЬ ПОСЛЕДНИМ: tokens.css → base.css → components.css →
sections.css → pages.css → mobile.css → этот файл. Часть правил ниже
спорит с блоком @media (max-width: 680px) в page-uslugi.css при равной
специфичности и выигрывает только за счёт порядка подключения.
Что уже сделано и здесь не повторяется:
• шапка, бургер, раскрытое меню — mobile-m1.css;
• финальный блок (CTA и подвал) — mobile-m3.css;
• отбивка крошек и «/» вместо тире — components.css;
• карточка .tk-card-service на 375 — mobile.css, блок 5
(335×220, скругление 20, затемнение во всю высоту, поле 20,
пилюля «ПОДРОБНЕЕ» снята). Здесь только то, чем каталог
отличается от главной.
Точка перелома одна — 680. Поля 20 и сжатую шкалу кеглей даёт
tokens.css, здесь они не трогаются. Теней нет ни одной.
Расхождения с макетом, сознательно НЕ реализованные (кегли мельче
нижней ступени шкалы, плашка «весь прайс», сокращённые тексты),
перечислены в notes отчёта — в CSS они не заводились. */
@media (max-width: 680px) {
/* ══ 1. Шапка страницы · 345:14133 ═══════════════════════════════════════
Кадр 375×212: поля 20 держит .tk-container, вертикальные — 36 сверху
и 28 снизу, просветы между крошками, заголовком и лидом по 14.
Крошки лежат в своей обёртке (.tk-crumbs, отбивка 32 из components.css),
поэтому верхнее поле блока — ровно просвет 14. */
.tk-catalog__head {
gap: var(--s-4); /* макет 14 → ближайший шаг сетки 16 */
padding-top: var(--s-4); /* просвет от крошек до заголовка, тот же 14 */
padding-bottom: var(--s-8); /* макет 28 → шаг 32 */
}
/* Заголовок 38 — ровно мобильная ступень --t-display-size. В page-uslugi.css
на 680 стоял подобранный 34: макет говорит 38, ставим ступень.
Интерлиньяж в макете leading-none, токен даёт 0.94 — «Услуги» в одну
строку это не меняет, но на длинных заголовках 0.94 склеивает строки. */
.tk-catalog__title {
font-size: var(--t-display-size);
line-height: 1;
letter-spacing: var(--t-display-ls); /* макет −1,4px = −0,0368em, токен −0,0397em */
}
/* Лид на мобильном опускается на ступень: в макете 15/1.55, а класс
.t-body-lg в разметке даёт 17. Мера строки снимается — колонка одна. */
.tk-catalog__lead {
max-width: none;
font-size: var(--t-body-size);
line-height: 1.5; /* макет 1.55; проза, а не подпись */
}
/* ══ 2. Сетка услуг · 345:14137 ══════════════════════════════════════════
Один столбец даёт base.css. В макете шаг ряда 204 при высоте карточки
190, то есть просвет 14, а не сеточные 24. */
.tk-catalog .tk-grid--4 { gap: var(--s-4); } /* макет 14 → шаг 16 */
/* Карточка каталога ниже карточки главной: 335×190 против 335×220.
Сам .tk-card-service уже переопределён в mobile.css глобально —
здесь правится только пропорция и только внутри каталога. */
.tk-catalog .tk-card-service { aspect-ratio: 335 / 190; }
/* ОТКЛОНЕНИЕ: название в макете 19 SemiBold, ступени 19 в шкале нет —
берём ближайшую body-lg (17), насыщенность из макета. */
.tk-catalog .tk-card-service__title {
font-size: var(--t-body-lg-size);
line-height: 1.15; /* макет 1.15 */
font-weight: var(--w-semibold); /* канон — Medium */
}
/* Нижняя граница секции: в макете от кнопки до подвала 36.
Канонические --s-section (56 на мобильном) здесь велики. */
.tk-catalog { padding-bottom: var(--s-10); } /* макет 36 → шаг 40 */
/* ══ 3. Плашка «Весь прайс» · 345:31189 ══════════════════════════════════
РАСХОЖДЕНИЕ С МАКЕТОМ. На 375 вместо плашки стоит одна кнопка во всю
ширину — «СМОТРЕТЬ ПРАЙС», обводочная, 335×48 (345:14193). В разметке
плашка несёт надстрочник и абзац текста, убирать содержимое
медиазапросом нельзя, поэтому плашка остаётся: складывается в колонку,
кнопка растягивается на ширину колонки — ровно как кнопка макета. */
.tk-allprice {
flex-direction: column;
align-items: stretch;
gap: var(--s-5);
margin-top: var(--s-4); /* макет: от последней карточки 14 → шаг 16 */
padding: var(--s-card);
border-radius: var(--r-image); /* мобильные плашки макета скруглены на 20, не 24 */
}
/* Кнопка на всю ширину колонки: подпись длинная, в строку она
переносится и пилюля разъезжается по высоте. */
.tk-allprice .tk-btn {
align-self: stretch;
width: 100%;
}
}
/* ═══ vrach ═══ */
/* ТОМОКО — мобильная адаптация страницы «Врач — личная страница»
/vrachi/krivosheina-olga-ivanovna/. Снято 28.08.2026 с артборда Figma
«М · Врач /vrachi/krivosheina-olga-ivanovna/» 345:14602 (375×4307),
файл U5M0ihzdUI9upBTwUAHZ42.
Разметка одна на оба размера: ниже ТОЛЬКО медиазапросы к десктопным
классам страницы, новых элементов нет ни одного.
ПОДКЛЮЧАТЬ ПОСЛЕДНИМ: tokens.css → base.css → components.css →
sections.css → pages.css → mobile.css → этот файл. Часть правил ниже
спорит с блоками @media (max-width: 680px) в page-vrach.css,
в components.css и в mobile.css; там, где специфичность равна,
выигрывает порядок подключения, где нет — селектор прижат
к .tk-doctor-reviews (см. блок 4).
ВАЖНО. В page-vrach.css мобильная раскладка была ВЫВЕДЕНА, а не снята:
там прямо написано «отдельного мобильного макета у этой страницы нет».
Макет теперь есть и расходится с выведенным в четырёх местах:
• герой идёт просветом 16, а не 20, и кончается полем 28, а не 40;
• плашка фактов — не столбик, а три СТРОКИ «цифра слева, подпись
справа» с волосяными разделителями;
• шапка секции отзывов лежит на плитке --c-mist;
• отзывы стоят СТОЛБИКОМ, а не лентой с прокруткой, как на главной.
Последние два пункта — единственные места, где приходится спорить
с mobile.css.
Что уже сделано и здесь не повторяется:
• шапка, бургер, раскрытое меню — mobile-m1.css;
• финальный блок (CTA и подвал) — mobile-m3.css;
• отбивка крошек и «/» вместо тире — components.css;
• одна колонка вместо двух, кнопка героя
во всю ширину, строка «термин → значение»
в две строки — page-vrach.css, блок 6.
Точка перелома одна — 680. Поля 20 и сжатую шкалу кеглей даёт
tokens.css, здесь они не трогаются. Теней нет ни одной.
Расхождения с макетом, сознательно НЕ реализованные (кегли 8–13,
мельче нижней ступени шкалы, третий бейдж, пятая строка образования,
строчный регистр подписей у фактов, «ВСЕ ОТЗЫВЫ» простым текстом),
перечислены в notes отчёта — в CSS они не заводились. */
@media (max-width: 680px) {
/* ══ 1. Герой врача · 345:14646 ══════════════════════════════════════════
Кадр 375×876 складывается в колонку с просветом 16: крошки → портрет →
имя → бейджи → лид → плашка фактов → кнопка. Поля 36 сверху (до крошек)
и 28 снизу; крошки живут в своей обёртке (.tk-crumbs, отбивка 32 из
components.css), поэтому верхнее поле героя — ровно просвет 16.
Порядок макета совпадает с порядком разметки, переставлять нечего. */
.tk-doctor-hero { padding-block: var(--s-4) var(--s-8); } /* макет 16 / 28 → шаги 16 и 32 */
.tk-doctor-hero__inner { gap: var(--s-4); } /* макет 16; колонку даёт правило 1100 */
.tk-doctor-hero__data { gap: var(--s-4); } /* макет 16 */
/* Портрет на 375 — кадр 335×300 со скруглением 20, а не карточным 24:
на мобильном макете все плашки скруглены на --r-image. Снимок в макете
выше кадра (502) и подрезан снизу — верх держит object-position
из page-vrach.css, его не трогаем. */
.tk-doctor-hero__photo { border-radius: var(--r-image); }
.tk-doctor-hero__photo img { aspect-ratio: 335 / 300; } /* макет 345:14648 */
/* Имя 32/1.05 — это ровно мобильная ступень --t-display-sm, заведённая
в tokens.css под мобильные заголовки. В page-vrach.css на 680 стоял
выведенный 34 сырыми пикселями; макет говорит 32, ставим ступень.
Трекинг в макете −1,1px (−0,0344em), токен даёт −0,0395em — берём
токен, чтобы ступень не разъезжалась по страницам. */
.tk-doctor__title {
font-size: var(--t-display-sm-size);
line-height: var(--t-display-sm-lh);
letter-spacing: var(--t-display-sm-ls);
}
/* Бейджи: просвет 8, поля чипа 7/12 против канонических 7/14.
Правится .tk-doctor__badge — это модификатор страницы, лежащий
на том же элементе, что .tk-chip; сам канонический чип не трогаем. */
.tk-doctor__badges { gap: var(--s-2); } /* макет 8 */
.tk-doctor__badge { padding-inline: var(--s-3); } /* макет 12 */
/* Лид на мобильном опускается на ступень: в макете 15/1.55, а правило
страницы поднимает его до body-lg (17 на 375). */
.tk-doctor__lead {
font-size: var(--t-body-size);
line-height: 1.5; /* макет 1.55; проза, а не подпись */
}
/* ══ 2. Плашка ключевых фактов · 345:14657 ═══════════════════════════════
На 1440 это три колонки встык, на 375 — три СТРОКИ: цифра слева,
подпись справа, между строками волосяная линия. Заливка --c-mist
и скругление 20 у плашки уже свои, десктопные, — совпали.
Поля плашки 6 сверху и 14 снизу — асимметрия из макета, а не описка
при переносе: верхняя волосяная линия первой строки в макете стоит
ровно в 6px от края плашки (проверено на отрисовке узла). Если
выяснится, что верхняя линия — артефакт автолэйаута, лечится
добавлением .tk-doctor__fact:first-child { border-top: 0 }
и симметричным полем; см. notes. */
.tk-doctor__facts {
padding: 6px var(--s-5) 14px; /* макет 6 / 20 / 14; шагов 6 и 14 в сетке нет */
}
/* Строки идут встык — просвет между ними рисует волосяная линия. */
.tk-doctor__facts-grid { row-gap: 0; }
.tk-doctor__fact {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
min-width: 0;
padding-block: 14px; /* макет 14; шага 14 в сетке нет */
border-top: 1px solid var(--c-hairline); /* волосяная линия: токена толщины нет */
}
/* Подпись прижата к правому краю строки и там же выключается: «ОПЫТА
В ЛАЗЕРНОЙ ХИРУРГИИ» каноническим кеглем 12 в одну строку на 375
не помещается и переносится. */
.tk-doctor__fact > p:last-child { text-align: right; }
/* ══ 3. Опыт и направления · 345:14669 + 345:14683 ═══════════════════════
Обе колонки уже стоят друг под другом (правило 1100 в page-vrach.css).
Здесь только метрика макета: заголовок → содержимое 12, между строками
образования 12, между плитками услуг 10, между разделами и под ними 28. */
.tk-doctor-exp { padding-bottom: var(--s-8); } /* макет 28 → шаг 32 */
.tk-doctor-exp__inner { gap: var(--s-8); } /* макет 28 → шаг 32 */
.tk-doctor-exp__col { gap: var(--s-3); } /* макет 12 и 10 → шаг 12 */
.tk-doctor-edu { gap: var(--s-3); } /* макет 12 */
/* Плитка услуги 335×45: поля 14/16, скругление 14 против десктопных 16.
Ступени радиуса между --r-input 12 и --r-image 20 в токенах нет —
значение из макета, как и на десктопе. */
.tk-doctor-svc__link {
padding: 14px var(--s-4); /* макет 14 / 16; шага 14 в сетке нет */
border-radius: 14px; /* макет 345:14685 */
}
/* ══ 4. Отзывы о враче · 345:14697 ═══════════════════════════════════════
Кадр 375×724, поля 36 сверху и снизу, просвет 14. Секция расходится
с мобильной секцией отзывов главной, откуда её метрику брал mobile.css,
в двух вещах, и обе правятся ниже.
ПЕРВОЕ: шапка секции лежит на плитке --c-mist со скруглением 20 —
заголовок и действие внутри неё, просвет 8. Ровно тот же приём, что
у .tk-usluga-price__head на странице услуги.
ВТОРОЕ: карточки стоят СТОЛБИКОМ во всю ширину через 14, а не лентой
с прокруткой. mobile.css превращает .tk-reviews__slider .tk-grid--3
в однорядную ленту с примагничиванием — на этой странице ленту надо
разобрать обратно. Селекторы прижаты к .tk-doctor-reviews: правило
касается ровно этой секции, слайдер главной остаётся лентой. */
.tk-doctor-reviews { padding-block: var(--s-10); } /* макет 36 / 36 → шаг 40 */
/* Шапка-плитка. Колонку и выключку влево .tk-sec-head даёт сам
(components.css, 680), просвет там 24 — в макете 8. */
.tk-doctor-reviews__head {
gap: var(--s-2); /* макет 8 */
margin-bottom: 0; /* отбивку до карточек даёт слайдер */
padding: var(--s-card); /* макет 20 */
background: var(--c-mist);
border-radius: var(--r-image); /* мобильные плашки макета скруглены на 20 */
}
/* Внутри плитки действие стоит компактно у левого края — в макете это
подпись «ВСЕ ОТЗЫВЫ», а не пилюля во всю ширину, как в page-vrach.css
на 680. Кнопка остаётся канонической (обводочная, тап-цель 49):
правится только ширина. */
.tk-doctor-reviews__head .tk-btn { width: auto; }
/* Отбивка шапки от первой карточки — 14 из макета. */
.tk-doctor-reviews .tk-reviews__slider { margin-top: var(--s-4); }
/* Лента разбирается обратно в столбик. Гасятся ровно те свойства,
которые ставит mobile.css: поток, ширина колонки, прокрутка,
примагничивание и вынос за поля контейнера. Последнее обязательно —
иначе плитки поехали бы под края экрана. */
.tk-doctor-reviews .tk-reviews__slider .tk-grid--3 {
grid-auto-flow: row;
grid-template-columns: minmax(0, 1fr);
grid-auto-columns: auto;
gap: var(--s-4); /* макет 14 → шаг 16 */
overflow-x: visible;
scroll-snap-type: none;
margin-inline: 0;
padding-inline: 0;
scroll-padding-inline: 0;
}
/* Карточка отзыва: поле 20 и просвет 8 из макета против 24 и 12,
которые mobile.css ставит для ленты главной. Скругление 20, а не
карточное 24, — как у всех плашек мобильного макета. */
.tk-doctor-reviews .tk-reviews__card {
padding: var(--s-card); /* макет 20 */
gap: var(--s-2); /* макет 8 */
border-radius: var(--r-image);
}
/* Точки уходят под центр полосы: sections.css на 680 отжимает их влево,
освобождая место стрелкам справа. Стрелок в макете нет — карточки
больше не лента, листать нечего, и две круглые кнопки под столбиком
отзывов вводили бы в заблуждение. Точки оставлены: они показывают,
сколько отзывов всего, и в макете нарисованы. */
.tk-doctor-reviews .tk-reviews__controls { grid-template-columns: 1fr; }
.tk-doctor-reviews .tk-reviews__controls .tk-dots {
grid-column: 1;
justify-content: center;
}
.tk-doctor-reviews .tk-reviews__arrows { display: none; }
}
/* ═══ vrachi ═══ */
/* ТОМОКО — мобильная адаптация страницы «Врачи — каталог» /vrachi/.
Снято 28.08.2026 с артборда Figma «М · Врачи /vrachi/» 345:14464
(375×4115), файл U5M0ihzdUI9upBTwUAHZ42.
Разметка одна на оба размера: ниже ТОЛЬКО медиазапросы к десктопным
классам страницы. Новых элементов нет — бургер и мобильное меню,
единственная разметка, которой на десктопе физически не существует,
заведены в mobile-m1.css.
ПОДКЛЮЧАТЬ ПОСЛЕДНИМ: tokens.css → base.css → components.css →
sections.css → pages.css → mobile.css → этот файл. Часть правил ниже
спорит с блоком @media (max-width: 680px) в page-vrachi.css и
в mobile.css при равной специфичности и выигрывает только за счёт
порядка подключения.
ВАЖНО. В page-vrachi.css мобильная раскладка была ВЫВЕДЕНА, а не снята:
там прямо написано «отдельного мобильного макета у /vrachi/ нет», и
метрика бралась с мобильной секции «Наши специалисты» главной
(345:13821). Макет теперь есть, и он расходится с выведенным в трёх
местах: кегль заголовка (38, а не 34), его цвет (зелёный), просвет
рядов сетки (14, а не 16) и одиннадцатая карточка во всю ширину.
Эти четыре правила — весь смысл файла.
Что уже сделано и здесь не повторяется:
• шапка, бургер, раскрытое меню — mobile-m1.css;
• финальный блок (CTA и подвал) — mobile-m3.css;
• отбивка крошек и «/» вместо тире — components.css;
• плитка .tk-card-doctor на 375 — mobile.css, блок 5
(подложка --c-mist, скругление 20, портрет 160×190, подпись
полями 12 / 14 / 14 и просветом 4) — совпало с макетом
до пикселя, трогать нечего;
• снятая пилюля «К ВРАЧУ», поля подписи
и скругление плитки — page-vrachi.css, блок 6.
Точка перелома одна — 680. Поля 20 и сжатую шкалу кеглей даёт
tokens.css, здесь они не трогаются. Теней нет ни одной.
Расхождения с макетом, сознательно НЕ реализованные (кегли 8–11,
мельче нижней ступени шкалы, сокращённые подписи должностей,
укороченный лид), перечислены в notes отчёта — в CSS они
не заводились. */
@media (max-width: 680px) {
/* ══ 1. Шапка страницы · 345:14508 ═══════════════════════════════════════
Кадр 375×250: поля 20 держит .tk-container, вертикальные — 36 сверху
(до крошек) и 28 снизу, просветы между крошками, заголовком и лидом
по 14. Крошки лежат в своей обёртке (.tk-crumbs, отбивка 32 из
components.css), поэтому верхнее поле блока — ровно просвет 14.
Значения совпадают с тем, что уже стоит в page-vrachi.css: повторены
здесь целиком, чтобы блок читался как снятая метрика макета, а не как
половина метрики плюс половина наследства. */
.tk-staff__head {
gap: var(--s-4); /* макет 14 → ближайший шаг сетки 16 */
padding-top: var(--s-4); /* просвет от крошек до заголовка, тот же 14 */
padding-bottom: var(--s-8); /* макет 28 → шаг 32 */
}
/* Заголовок 38 — ровно мобильная ступень --t-display-size. В page-vrachi.css
на 680 стоял выведенный 34: макет говорит 38, ставим ступень. Интерлиньяж
в макете leading-none; токен даёт 0.94, а заголовок здесь ломается на две
строки — 0.94 их склеивает, поэтому ровно 1, как на каталоге услуг.
ЦВЕТ — ОТКЛОНЕНИЕ МОБИЛЬНОГО МАКЕТА ОТ ДЕСКТОПНОГО. На артборде 375
заголовок набран --c-brand-green (345:14510, #237e33), на десктопном
1440 он чернильный (345:31480, #0b1a10), и на соседнем мобильном
каталоге услуг (345:14135) тоже чернильный. То есть зелёный заголовок —
свойство ровно этой страницы на ровно этой ширине. Реализовано как
нарисовано; если это описка дизайнера, снимается удалением одной
строки — см. notes. */
.tk-staff__title {
font-size: var(--t-display-size);
line-height: 1;
letter-spacing: var(--t-display-ls); /* макет −1,4px = −0,0368em, токен −0,0397em */
color: var(--c-brand-green);
}
/* Лид на мобильном опускается на ступень: в макете 15/1.55, а класс
.t-body-lg в разметке даёт 17. Мера строки снимается — колонка одна. */
.tk-staff__lead {
max-width: none;
font-size: var(--t-body-size);
line-height: 1.5; /* макет 1.55; проза, а не подпись */
}
/* ══ 2. Сетка специалистов · 345:14512 ═══════════════════════════════════
Одиннадцать карточек 160,5 в ДВА столбца — сетка не сваливается в один,
как остальные .tk-grid--4 на 680. Просвет 14 по обеим осям: ряды в
макете идут с шагом 299 при высоте 285 и 283 при высоте 269.
Канонический .tk-grid--4 не трогаем — правится свой .tk-staff__grid. */
.tk-staff__grid {
/* minmax(0, 1fr), а не 1fr: минимум элемента сетки по умолчанию равен
min-content, и колонка раздувается по самой длинной фамилии
(«Тиманова Анастасия Александровна»). */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px; /* макет 14 по обеим осям; шага 14 в сетке нет */
}
/* Последняя карточка нечётного списка стоит в макете во всю ширину
(«Ряд 6», 345:14589: 335×269 против 160,5 у соседей) — иначе она
висела бы половиной ряда. Пара :nth-child(odd):last-child держит это
свойством СПИСКА, а не одиннадцатого элемента: добавится двенадцатый
сотрудник — ряд снова станет полным сам собой. */
.tk-staff__grid > li:nth-child(odd):last-child { grid-column: 1 / -1; }
/* Портрет во всю ширину — тот же кадр 190 по высоте, что у парных
карточек, но 335 по ширине. Без этого правила портрет унаследовал бы
пропорцию 160/190 из mobile.css и вырос бы до 398. */
.tk-staff__grid > li:nth-child(odd):last-child .tk-staff__photo {
aspect-ratio: 335 / 190; /* макет 345:14590 */
}
/* Нижняя граница секции: в макете от последнего ряда до подвала 36.
Канонические --s-section (56 на мобильном) здесь велики. */
.tk-staff { padding-bottom: var(--s-10); } /* макет 36 → шаг 40 */
}
/* ═══ zabolevanie ═══ */
/* ТОМОКО — мобильная адаптация страницы «Заболевание»
/pacientu/zabolevaniya/katarakta/. Снято 28.08.2026 с артборда Figma
«М · Заболевание» 345:14917 (375×11049),
файл U5M0ihzdUI9upBTwUAHZ42.
Разметка одна на оба размера: ниже ТОЛЬКО медиазапросы к десктопным
классам страницы. Новых элементов нет — бургер и мобильное меню,
единственная разметка, которой на десктопе физически не существует,
заведены в mobile-m1.css.
ПОДКЛЮЧАТЬ ПОСЛЕДНИМ: tokens.css → base.css → components.css →
sections.css → pages.css → mobile.css → этот файл. Почти каждое
правило ниже спорит либо с блоком @media (max-width: 680px)
в page-zabolevanie.css, либо с мобильными состояниями компонентов
в mobile.css, и при равной специфичности выигрывает только
за счёт порядка подключения.
ВАЖНО. Мобильный блок в page-zabolevanie.css был написан ДО того,
как нашёлся этот артборд: там прямо сказано «отдельного мобильного
макета у этой страницы нет», и раскладка выведена по правилам системы.
Макет нашёлся и в трёх местах расходится с выводом принципиально,
а не на пиксель:
• оглавление — не открытый список с волосяными линейками,
а плитка --c-mist со скруглением 20 и полями 22;
линеек в мобильном макете нет вовсе;
• карточка — не фотокарточка с текстом поверх снимка
связанной (так она выглядит на мобильной главной и так её
услуги перестраивает mobile.css), а плитка --c-mist:
фото 150 сверху, под ним подпись, кикер и
«ПОДРОБНЕЕ →» обычным текстом, без пилюли;
• ритм статьи — просветы внутри раздела 12, между разделами 34;
выведенные 16 и 40 макету не соответствуют.
Остальное — метрика: поля, кегли, интерлиньяжи.
Что уже сделано и здесь не повторяется:
• шапка, бургер, раскрытое меню — mobile-m1.css;
• финальный блок (CTA и подвал) — mobile-m3.css;
• отбивка крошек, «/» вместо тире и
тап-цель крошки 24 — components.css и mobile.css;
• поля 20 и сжатая шкала кеглей — tokens.css;
• одна колонка вместо двух, снятая
липкость оглавления, ширина плашки
во всю страницу — page-zabolevanie.css.
Точка перелома одна — 680, теснее не понадобилось: колонка одна,
самое узкое место (строка цены «2 500 ₽ первичный приём», 235 при
кегле 16) умещается в поле плашки и на 320. Теней нет ни одной,
элевация только цветом.
Расхождения с макетом, сознательно НЕ реализованные (кегли 10, 11, 13,
14, 24 и 28 между ступенями шкалы; «·» как разделитель в строке цены;
перенос стрелки «→» на свою строку; другой состав карточек связанной
услуги), перечислены в notes и missing отчёта — в CSS их нет. */
@media (max-width: 680px) {
/* ══ 1. Шапка страницы · 345:14961 ═══════════════════════════════════════
Кадр 375×233: поля 20 держит .tk-container, вертикальные — 36 сверху
(до крошек) и 28 снизу, просветы между крошками, заголовком и лидом
по 14. Крошки лежат в своей обёртке (.tk-crumbs, отбивка 32 из
components.css), поэтому верхнее поле блока — ровно просвет 14.
Сумма сходится: 36 + 13 + 14 + 36 + 14 + 92 + 28 = 233.
ОТКЛОНЕНИЕ: макетные 36 до крошек против канонических 32 не правим —
.tk-crumbs это хром ВСЕХ внутренних страниц, ради четырёх пикселей
на одной из них общий класс не трогаем. Записано в notes. */
.tk-zabol-head {
padding-top: var(--s-4); /* макет 14 → ближайший шаг 16 */
padding-bottom: calc(var(--s-6) + var(--s-1)); /* макет 28: шага 28 в ритме нет */
}
/* Просвет «лид → плашка “Что делать”»: в макете это зазор между кадрами
345:14961 и 345:14965, 28. На сайте плашка лежит внутри .tk-zabol-head__inner
вторым флекс-элементом, поэтому зазор задаётся просветом колонки. */
.tk-zabol-head__inner { gap: calc(var(--s-6) + var(--s-1)); } /* макет 28 */
.tk-zabol-head__text { gap: var(--s-4); } /* макет 14 → шаг 16 */
/* Заголовок: макет 345:14963 — 36 / 1.0 / −1,3px (= −0.0361em).
Ступени 36 в мобильной шкале нет (display-sm даёт 32), значение
поставлено пикселями по замеру. Оно ЗАМЕНЯЕТ выведенные ранее 34/1.05:
те были догадкой до находки макета. */
.tk-zabol-head__title {
font-size: 36px;
line-height: 1;
letter-spacing: -0.0361em;
}
/* Лид: в макете 345:14964 — 15 / 1.55 --c-fog, то есть на мобильном он
опускается со ступени body-lg на ступень body. Кегль берём токеном:
--t-body-size на 680 как раз равен 15. */
.tk-zabol-head__text .t-body-lg {
font-size: var(--t-body-size);
line-height: 1.55; /* макет 1.55 */
}
/* ══ 2. Плашка «Что делать» · 345:14966 ══════════════════════════════════
Плитка 335×242 --c-mist: поля 20, просветы 10, скругление 20 (не
карточные 24). Поле 20 уже даёт --s-card, который на 680 сжимается
в tokens.css, — здесь макет и токен сошлись ровно.
Сумма сходится: 20 + 12 + 10 + 92 + 10 + 20 + 10 + 48 + 20 = 242. */
.tk-zabol-todo {
gap: var(--s-3); /* макет 10 → ближайший шаг 12 */
border-radius: var(--r-image); /* макет 20; на десктопе карточные 24 */
}
/* Строка цены. В макете 345:14969 это ОДНА строка одного набора:
16 SemiBold --c-brand-green целиком, включая подпись «первичный приём».
На десктопе сумма 28 зелёная, подпись 16 приглушённая — на мобильном
макете этой разницы нет. Разметка не трогается: обоим span-ам просто
назначается один набор. */
.tk-zabol-todo__price { gap: var(--s-3); } /* макет: пробелы вокруг «·» ≈ 12 */
.tk-zabol-todo__sum {
font-size: var(--t-body-size); /* макет 16 → ступень body (15) */
line-height: 1.25; /* макет: строка 20 при кегле 16 */
letter-spacing: var(--t-body-ls);
}
/* Специфичность 0,2,0 нужна, чтобы перебить утилиту .c-muted (0,1,0)
на том же элементе: цвет подписи в макете не приглушённый, а зелёный. */
.tk-zabol-todo__price .t-body {
color: var(--c-brand-green);
font-weight: var(--w-semibold);
line-height: 1.25;
}
/* ══ 3. Оглавление · 354:3475 ════════════════════════════════════════════
ЗДЕСЬ МАКЕТ РАСХОДИТСЯ С ДЕСКТОПОМ ПРИНЦИПИАЛЬНО. На десктопе это
открытый список: каждый пункт отбит сверху волосяной линией, поля
пункта 12. В мобильном макете линеек нет ни одной, а сам список лежит
плиткой --c-mist 335×298 со скруглением 20 и полями 22.
Сумма сходится: 22 + 14 + 10 + 8×20 + 7×10 + 22 = 298. */
.tk-zabol-toc {
position: static; /* липкость снята: на телефоне колонки нет */
background: var(--c-mist);
border-radius: var(--r-image); /* макет 20 */
padding: 22px; /* макет 22; между шагами 20 и 24, токена нет */
/* Низ на 5 меньше: ровно столько ссылка ниже добирает себе на тап-цель,
иначе внутреннее поле снизу читалось бы как 27 вместо 22. */
padding-bottom: 17px;
gap: 5px; /* макет 10 от «СОДЕРЖАНИЕ» до первого
пункта, 5 из них уже в паддинге ссылки */
}
/* Цвет надстрочника в мобильном макете --c-fog, на десктопе --c-ash. */
.tk-zabol-toc__title { color: var(--c-fog); }
/* Просвет между пунктами (макет 10) целиком отдан паддингу ссылки:
так шаг пункта остаётся макетными 30 (20 строки + 5 + 5), а тап-цель
вырастает с 20 до 30 при норме WCAG 2.5.8 в 24. Через gap этого
не получить — gap тап-цель не увеличивает. */
.tk-zabol-toc__list { gap: 0; }
.tk-zabol-toc__link {
border-top: 0; /* линеек в мобильном макете нет */
padding-block: 5px; /* половина макетного просвета 10 */
gap: var(--s-3); /* макет 10 → шаг 12 */
}
/* Название пункта в макете --c-ink-green, а не зелёное как на десктопе:
на плитке --c-mist зелёный по зелёному дал бы слишком слабый контраст,
зелёным остаётся только ховер. */
.tk-zabol-toc__text { color: var(--c-ink-green); }
/* ══ 4. Текст статьи · 354:3501 и однотипные ═════════════════════════════
Между разделами 34, внутри раздела всё через 12 — и абзацы, и пункты
списков, и подзаголовки. На десктопе это 56 и 16 соответственно. */
.tk-zabol-art { gap: var(--s-8); } /* макет 34 → ближайший шаг 32 */
.tk-zabol-art__sec { gap: var(--s-3); } /* макет 12 */
.tk-zabol-art__list { gap: var(--s-3); } /* макет 12 */
/* Просвет между .tk-zabol-toc и .tk-zabol-art в сетке .tk-zabol-body:
в макете 34, тот же шаг, что между разделами. */
.tk-zabol-body {
gap: var(--s-8); /* макет 34 → шаг 32 */
padding-bottom: calc(var(--s-6) + var(--s-1)); /* макет 28 до блока услуг */
}
/* Интерлиньяж заголовков. Кегли в макете (H2 24, H3 17) со ступенями
мобильной шкалы расходятся на два пункта у H2 и совпадают у H3,
а вот интерлиньяж расходится у обоих: токены дают 1.0 и 1.29,
в макете и там и там 1.2. Двухстрочные H2 («Хирургия патологий
хрусталика», «Какие методы лечения используются») при 1.0 слипаются,
поэтому интерлиньяж берём макетный. Кегли — в notes. */
.tk-zabol-art__h2 { line-height: 1.2; }
.tk-zabol-art__h3 { line-height: 1.2; }
/* Маркер списка: в макете 354:3604 точка 6×6 против 7×7 на десктопе.
Отступ сверху не трогаем — он считается от НАШЕГО кегля: при 15/1.55
оптический центр первой строки приходится на (23,25 − 6) / 2 ≈ 9,
то есть ровно на десктопное значение. */
.tk-zabol-art__list li::before { width: 6px; height: 6px; }
.tk-zabol-art__list li { gap: var(--s-3); } /* макет 10 → шаг 12 */
/* Врезка 354:3535: поля 20 по вертикали и 22 по горизонтали (на десктопе
24 и 32), кегль опускается со ступени body-lg на body — то же, что
с лидом шапки. Скругление в макете 18, ближайший токен --r-image (20)
уже стоит на десктопе. */
.tk-zabol-art__callout {
padding: var(--s-5) 22px; /* макет 20 / 22; шага 22 в ритме нет */
font-size: var(--t-body-size); /* макет 15 */
}
/* ══ 5. Связанная услуга · 345:14987 ═════════════════════════════════════
Заголовок, под ним четыре карточки в колонку через 14.
Поля кадра: 36 сверху до заголовка и 36 снизу до подвала.
Сумма сходится: 36 + 34 + 14 + 285 + 14 + 309 + 14 + 285 + 14 + 285
+ 36 = 1326. */
.tk-zabol-related {
padding-top: calc(var(--s-8) + var(--s-1)); /* макет 36 */
padding-bottom: calc(var(--s-8) + var(--s-1)); /* макет 36; канонические 56 велики */
}
.tk-zabol-related__title { margin-bottom: var(--s-4); } /* макет 14 → шаг 16 */
/* ПЕРЕОПРЕДЕЛЕНИЕ КАНОНИЧЕСКОГО .tk-grid (base.css): просвет сетки
--s-gutter (24) на мобильных нигде не сжимается, а в макете он 14.
Правило заужено до .tk-zabol-related, за пределами блока сетка
не меняется. */
.tk-zabol-related .tk-grid--4 { gap: var(--s-4); } /* макет 14 → шаг 16 */
/* ── 5.1 Карточка услуги · 345:14989 ─────────────────────────────────────
ПЕРЕОПРЕДЕЛЕНИЕ КАНОНИЧЕСКОГО .tk-card-service И ЕГО ЭЛЕМЕНТОВ.
Без него никак: канон (components.css) и мобильное состояние
компонента (mobile.css, снято с главной 345:13730) описывают
фотокарточку — снимок во всю плитку, затемнение, подпись и пилюля
ПОВЕРХ фото. В макете этой страницы карточка устроена иначе:
плитка --c-mist 335 с полями 20, внутри фото 150 со своим скруглением
14, под фото подпись, кикер и «ПОДРОБНЕЕ →» обычным текстом.
Это не вариация раскладки, а другой компонент; модификатор завести
нельзя — он потребовал бы правки разметки. Все правила заужены
до .tk-zabol-related и живут только ниже 680.
Сумма сходится: 20 + 150 + 8 + 24 + 8 + 13 + 8 + 13 + 8 + 13 + 20 = 285. */
.tk-zabol-related .tk-card-service {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--s-2); /* макет 8 */
aspect-ratio: auto; /* снимаем 335/220 из mobile.css */
padding: var(--s-card); /* макет 20; --s-card на 680 равен 20 */
background: var(--c-mist);
border-radius: var(--r-image); /* макет 20 */
}
/* Затемнения нет: фото больше не подложка под текст. */
.tk-zabol-related .tk-card-service::after { display: none; }
.tk-zabol-related .tk-card-service img {
flex: none;
height: 150px; /* макет 355:3475, h=150 */
border-radius: 14px; /* макет 14; между --r-input (12) и --r-image (20) */
}
/* Подпись выходит из-под абсолютного позиционирования и встаёт в поток;
цвет с бумажного возвращается на основной — текст теперь на плитке. */
.tk-zabol-related .tk-card-service__body {
position: static;
padding: 0;
color: var(--c-ink-green);
}
/* Название: макет 20 SemiBold / 1.2 — ступень subheading на 680 даёт
ровно 20, совпало дословно. На десктопе здесь body-lg Medium. */
.tk-zabol-related .tk-card-service__title {
font-size: var(--t-subheading-size);
line-height: 1.2;
font-weight: var(--w-semibold);
}
/* Кикер: на фото он белый с альфой 0.75 (sections.css), на плитке —
приглушённый. Просвет 8 до названия уже даёт его собственный
margin-top, он же совпал с просветом карточки. */
.tk-zabol-related .tk-services__kicker { color: var(--c-fog); }
/* «ПОДРОБНЕЕ →». В mobile.css блок скрыт: на мобильной ГЛАВНОЙ пилюли
поверх фото действительно нет. Здесь она есть — но не пилюлей, а
строкой текста под кикером, поэтому блок возвращается в поток
и уезжает в конец колонки (в разметке он стоит до подписи). */
.tk-zabol-related .tk-card-service__action {
display: block;
position: static;
order: 1;
}
/* ПЕРЕОПРЕДЕЛЕНИЕ КАНОНИЧЕСКОЙ .tk-btn: в макете от кнопки не осталось
ничего, кроме набора — ни подложки, ни обводки, ни полей. Заводить
на это модификатор нельзя, он потребовал бы правки разметки; селектор
заужен до блока связанной услуги и до ширин ниже 680. */
.tk-zabol-related .tk-card-service__action .tk-btn {
padding: 0;
background: none;
border: 0;
color: var(--c-fog);
font-size: var(--t-label-12-size); /* макет 11 → ступень label-12 */
line-height: 1.2;
}
}
/* ═══ zabolevaniya ═══ */
/* ТОМОКО — мобильная адаптация страницы «Заболевания — каталог»
/pacientu/zabolevaniya/. Снято 28.08.2026 с артборда Figma
«М · Заболевания — каталог» 345:16173 (375×4142),
файл U5M0ihzdUI9upBTwUAHZ42.
Разметка одна на оба размера: ниже ТОЛЬКО медиазапросы к десктопным
классам страницы. Новых элементов нет — бургер и мобильное меню,
единственная разметка, которой на десктопе физически не существует,
заведены в mobile-m1.css.
ПОДКЛЮЧАТЬ ПОСЛЕДНИМ: tokens.css → base.css → components.css →
sections.css → pages.css → mobile.css → этот файл. Часть правил ниже
спорит с блоком @media (max-width: 680px) в page-zabolevaniya.css при
равной специфичности и выигрывает только за счёт порядка подключения.
ОСОБЫЙ СЛУЧАЙ. В page-zabolevaniya.css мобильный блок уже был снят
с ЭТОГО ЖЕ артборда (в комментариях к нему стоят те же номера узлов),
и совпало почти всё: отбивки шапки, кегль заголовка 34, просвет сетки
12, высота карточки 195, скругление 20. Файл добирает четыре места,
которых там не оказалось:
• интерлиньяж и трекинг заголовка — 1.02 и −1,2px из макета;
• кегль лида — 15, а не 17 (класс .t-body-lg);
• вертикальные поля карточки — 18, а не 20;
• нижняя граница секции — 32, а не канонические 56.
Совпавшее повторено целиком, чтобы блок читался как снятая метрика
макета, а не как половина метрики плюс половина наследства.
Что уже сделано и здесь не повторяется:
• шапка, бургер, раскрытое меню — mobile-m1.css;
• финальный блок (CTA и подвал) — mobile-m3.css;
• отбивка крошек, «/» вместо тире и
тап-цель крошки 24 — components.css и mobile.css;
• поля 20 и сжатая шкала кеглей — tokens.css;
• интерлиньяж описания 1.5, белая
подложка и обводка 1.5 --c-hairline — page-zabolevaniya.css.
Точка перелома одна — 680, теснее не понадобилось: колонка одна,
самое длинное слово («Гиперметропия», 13 знаков кеглем 15) в поле
карточки 295 умещается и на 360. Теней нет ни одной, элевация
только волосяной обводкой.
Расхождения с макетом, сознательно НЕ реализованные (кегли 11, 14 и 19
между ступенями шкалы; сокращённые описания карточек; скругление 18),
перечислены в notes отчёта — в CSS они не заводились. */
@media (max-width: 680px) {
/* ══ 1. Шапка страницы · 345:16217 ═══════════════════════════════════════
Кадр 375×178: поля 20 держит .tk-container, вертикальные — 32 сверху
(до крошек) и 24 снизу, просветы между крошками, заголовком и лидом
по 14. Крошки лежат в своей обёртке (.tk-crumbs, отбивка 32 из
components.css — здесь макет и канон сошлись ровно), поэтому верхнее
поле блока — ровно просвет 14. Сумма сходится:
32 + 13 + 14 + 35 + 14 + 46 + 24 = 178. */
.tk-zabkat__head {
gap: var(--s-4); /* макет 14 → ближайший шаг сетки 16 */
padding-top: var(--s-4); /* просвет от крошек до заголовка, тот же 14 */
padding-bottom: var(--s-6); /* макет 24 */
}
/* Заголовок в макете 34 / 1.02 / −1,2px (345:16219). Мобильная ступень
--t-display-sm-size даёт 32 — сжатая шкала tokens.css с этим макетом
расходится на два пункта; кегль берём из макета, токен не трогаем.
Интерлиньяж и трекинг заданы явно: без них класс тянет
--t-display-sm-lh (1.05) и токенный трекинг, а «Заболевания глаз»
на 360 ломается на две строки, где разница уже видна.
Цвет менять не нужно: в отличие от соседней «М · Пациенту», где
заголовок на 375 позеленел, здесь он чернильный (#0b1a10) — тот же,
что на десктопе. */
.tk-zabkat__title {
font-size: 34px; /* макет 345:16219; ступени 34 в шкале нет */
line-height: 1.02;
letter-spacing: -0.035em; /* −1,2px при кегле 34 */
}
/* Лид на мобильном опускается на ступень: в макете 15/1.55 (345:16220),
а класс .t-body-lg в разметке даёт 17/1.29. Кегль 15 — это ровно
мобильная ступень --t-body-size, подбирать нечего. Мера строки
снимается — колонка одна. */
.tk-zabkat__lead {
max-width: none;
font-size: var(--t-body-size);
line-height: 1.5; /* макет 1.55; проза, а не подпись */
}
/* ══ 2. Сетка заболеваний · 345:16221 ════════════════════════════════════
Девять карточек 335×195 в один столбец. Столбец даёт base.css, здесь
только просвет: ряды идут с шагом 207 при высоте карточки 195,
то есть 12, а не сеточные 24. */
.tk-zabkat__list { gap: var(--s-3); } /* макет 12 */
/* Нижняя граница секции: в макете от последней карточки до подвала 32
(кадр 1883 при низе карточки 1851). Канонические --s-section
(56 на мобильном) здесь велики. */
.tk-zabkat { padding-bottom: var(--s-8); } /* макет 32 */
/* ══ 3. Карточка заболевания · 345:16222 и однотипные ════════════════════
Белая коробка 335×195 с волосяной обводкой: поля 20 по горизонтали
и 18 по вертикали, скругление 18, три строки разогнаны по высоте.
Высота 195 в макете задана силой — при коротком описании коробка иначе
схлопнулась бы, и space-between (стоит на десктопе) потерял бы смысл.
Разгон проверен: 195 − 18×2 = 159 внутренней высоты, содержимое
22 + 63 + 13 = 98, свободных 61 на два просвета по 30,5 — ровно
те координаты, что стоят у текстов в макете (70,5 и 164). Просвет 12
остаётся нижней границей: у «Глаукомы» и «Дистрофий сетчатки»
описание на строку длиннее, и разгон сжимается до 20. */
.tk-zabkat__card {
min-height: 195px; /* макет 345:16222, h=195 */
padding: 18px var(--s-card); /* макет 18/20; шага 18 в ритме нет, --s-card на 680 равен 20 */
border-radius: var(--r-image); /* макет 18 → ближайший токен 20 */
gap: var(--s-3); /* нижняя граница разгона */
}
/* ОТКЛОНЕНИЕ КЕГЛЕЙ, здесь НЕ реализуемое. Название в макете
19 SemiBold / 1.15 без трекинга — ступень .t-subheading даёт
на мобильном 20 / 1.13 / −0,03em; расхождение в один пункт, ступени 19
в шкале нет, класс оставлен как есть. Описание в макете 14 / 1.5,
ступень body даёт 15, интерлиньяж 1.5 уже стоит на .tk-zabkat__text
в page-zabolevaniya.css. «ПОДРОБНЕЕ →» в макете 11 SemiBold с трекингом
1,1px — ступень label-12 даёт 12 / 0,1em, то есть тот же трекинг
и кегль на пункт крупнее; ниже 11 в системе не опускаемся, поэтому
класс тоже оставлен. Ни одного правила эти три расхождения
не требуют — блок оставлен как запись о них. */
}