/* РОСТ НА БОЛЬШИХ МОНИТОРАХ — САЙТ И ОКНО ЗАПИСИ (25.09.2026, владелец: «да» на рост для окна записи и сайта). До 1440 точек не меняется ничего, к 1920 — плюс около 10 %, к 2240 (iMac 24″) и 2560 (27″) — плюс 20 %, дальше не растёт. Формула та же, что в кабинетах (cabinet.css), — гейт сверяет, что обе записи совпадают буква в букву: окно записи открывают и на сайте, и в кабинете, и расти оно обязано одинаково. Размеры шрифта сайта и окна записи пишутся `calc(Npx + N * var(--grow,0px))`: где множитель не объявлен (письма, админка), запас 0px оставляет размер прежним. */ :root{--grow:clamp(0px, calc((100vw - 1440px) * 0.00025), 0.2px)} /* Notarica — мобильная полировка. Подключается ПОСЛЕДНИМ на всех страницах через общий inject — поэтому побеждает одноимённые правила прототипов без правки восьми HTML-файлов. 1. Фиксация горизонтального «гуляния». Именно clip, а не hidden: hidden превращает элемент в контейнер прокрутки и ломает position:sticky у шапки, clip просто отрезает лишнее. Строкой выше hidden — запас для старых браузеров. Clip — страховка, чтобы страница не дёргалась уже сегодня; настоящих виновников ищем режимом ?ntcmob=1 и убираем по одному. */ html, body { overflow-x: hidden; overflow-x: clip; } /* 2. Меню поверх «стеклянной» шапки. backdrop-filter на header.scrolled делает шапку системой отсчёта для position:fixed — панель .navlinks прибивалась к шапке высотой 70px и исчезала, оставляя на экране одну тёмную подложку (она снаружи ). Пока меню открыто (ntcNav ставит body.noscroll), стекло выключаем: за подложкой его всё равно не видно, а fixed снова считается от экрана. */ body.noscroll header, body.noscroll #hdr { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; /* И поднять шапку над подложкой. Панель .navlinks лежит ВНУТРИ
, а подложка .mnav-back — снаружи, на z-index 190. Липкая шапка со своим z-index:50 образует отдельный слой, поэтому z-index:200 у панели считается уже внутри него: наружу она выходит на уровне шапки, то есть ПОД подложкой. Отсюда серая пелена поверх ссылок и мёртвые нажатия. Пока меню открыто, поднимаем весь слой шапки над подложкой. */ z-index: 200 !important; } @media (max-width: 900px) { /* 3. Шапка компактнее. Размеры иконок заданы атрибутами прямо в svg — перекрываем отсюда, в разметку шести страниц не лезем. .lk-btn покрывает и кабинет, и сердце избранного в каталоге: у них один класс. Высота логотипа задана ОДИН раз — ниже, в блоке «Меню по ширине рабочей зоны». Здесь её больше нет: два одинаковых правила в одном и том же медиазапросе — та самая беда дублей, из-за которой правки уходили в пустоту. */ .lk-btn { width: 38px !important; height: 38px !important; border-radius: 10px !important; } .lk-btn svg { width: 18px !important; height: 18px !important; } .burger { width: 38px !important; height: 38px !important; border-radius: 10px !important; } .burger span { width: 18px !important; } .nav-cta { gap: 8px !important; } } /* ── Плакат на странице «Нотариусу» ── .photorow .ph img стоит object-fit:cover при height:100%. На широком экране это правильно — фото тянется на высоту колонки текста. Но на мобильном сетка схлопывается в одну колонку, контейнер становится высоким, и cover срезает плакат по бокам. Показываем целиком. */ @media (max-width: 900px) { /* Одна колонка: текст под плакатом. Медиазапрос на это в прототипе есть, но у блока прописан inline-стиль с двумя колонками, а он сильнее правил таблицы — перебиваем !important. */ .photorow { grid-template-columns: 1fr !important; } .photorow .ph { min-height: 0 !important; } .photorow .ph img { height: auto !important; object-fit: contain !important; } } /* ── Футер ── */ /* «Вход для нотариусов» рядом с иконкой — одной строкой. */ .nf-notary { white-space: nowrap; } @media (max-width: 900px) { /* Блок с лого на всю ширину. Одно это даёт нужный порядок колонок: «Сервис» опускается к «Нотариусу», «Документы» — к «Компании», а текст под лого перестаёт быть узкой полосой. */ .nf-top > :first-child { grid-column: 1 / -1; } .nf-tag { max-width: none; } } /* ── Каталог: две плашки в одну строку ── Обе теперь лежат в одном флексовом ряду .cat-toprow. Делим строку поровну, поиск отправляем на следующую — иначе он ужимает кнопки. */ @media (max-width: 900px) { .cat-toprow .fbtn, .cat-toprow .ntc-tf-btn { flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; justify-content: center; text-align: center; white-space: nowrap; } .cat-toprow .map-search { flex: 1 0 100% !important; } /* Фильтры — тёмная фирменная плашка: две оранжевые рядом спорят. */ .cat-toprow .fbtn.btn-gold { background: #113943 !important; border-color: #113943 !important; color: #fff !important; } .cat-toprow .fbtn.btn-gold:hover { background: #1c4c58 !important; border-color: #1c4c58 !important; } } @media (max-width: 420px) { .cat-toprow { gap: 7px !important; } .cat-toprow .fbtn, .cat-toprow .ntc-tf-btn { font-size:calc(13px + 13 * var(--grow,0px)); padding-left: 10px; padding-right: 10px; } .cat-toprow .ntc-tf-btn svg { display: none; } } /* ── Карта на весь экран (мобильные) ── */ @media (max-width: 900px) { .ntc-mapfull { position: fixed !important; inset: 0 !important; z-index: 300 !important; width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; } body.ntc-mapopen { overflow: hidden; } .ntc-mapbtn { position: absolute; right: 10px; top: 10px; z-index: 40; display: inline-flex; align-items: center; gap: 6px; background: #113943; color: #fff; border: 0; border-radius: 999px; font: 700 12px 'Manrope', system-ui, sans-serif; padding: 8px 13px; cursor: pointer; box-shadow: 0 6px 18px -6px rgba(17, 57, 67, .5); } .ntc-mapfull .ntc-mapbtn { position: fixed; right: 12px; top: 12px; z-index: 320; } } @media (min-width: 901px) { .ntc-mapbtn { display: none; } } /* ── Статья: боковая колонка под текст ── В прототипе раскладка задумана правильно: @media(max-width:980px) схлопывает .layout в одну колонку. Но ниже по файлу .layout объявлен ВТОРОЙ раз, уже после медиазапроса и с той же силой — поэтому побеждает он, и две колонки остаются на любой ширине. Отсюда обрезанный правый блок на телефоне. Возвращаем задуманное: текст сверху, боковые виджеты под ним. */ @media (max-width: 980px) { .layout { grid-template-columns: 1fr !important; } .layout > .side { max-width: none; } } /* ── Логотип в выехавшем меню ── Фоном, а не элементом: разметку шапки не трогаем и нажатия по ссылкам ничем не перекрываем. Пропорции логотипа 1565×369, поэтому по ширине панели он даёт ~60px высоты — верхнего отступа 76px под него не хватало. */ @media (max-width: 900px) { .navlinks { background-image: url(../pages/assets/logo.svg); background-repeat: no-repeat; background-position: 22px 26px; background-size: calc(100% - 44px) auto; padding-top: 108px !important; } } /* ── Меню: панель отключена display:none ── На статье, списке статей и карточке нотариуса в мобильном медиазапросе стоит .navlinks{display:none}, а ниже, в ТОМ ЖЕ запросе, панель описывается заново — position:fixed, ширина, тень, — но свойство display там не задаётся. Отменять display:none нечем: панели нет в раскладке, виден только тёмный фон. На главной такого правила нет, поэтому там причина была другая (слои) и лечилась иначе. */ @media (max-width: 900px) { .navlinks { display: flex !important; } } /* ── Статья: боковые отступы ── Контейнер имеет два класса: .wrap задаёт padding по бокам, .layout ниже по файлу ставит padding:42px 0 60px — то есть обнуляет боковые. Он объявлен позже и с той же силой, поэтому побеждает, и текст упирается в края экрана. Возвращаем отступы. */ @media (max-width: 900px) { .wrap.layout { padding-left: 16px !important; padding-right: 16px !important; } } /* ── Статья: блоки документов ── Та же болезнь, что у .layout: медиазапросы на 2 и 1 колонку есть, но ниже по файлу .plashki объявлен ещё раз с repeat(3,1fr) — и выигрывает везде. Три плитки в ряд на телефоне обрезаются. */ @media (max-width: 900px) { .plashki { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 560px) { .plashki { grid-template-columns: 1fr !important; } } /* ── Плакат: во всю ширину экрана ── Раньше он лежал внутри .wrap с боковыми полями, и после перехода на contain по краям оставались широкие пустоты. Выводим за поля страницы: фон секции сохраняется, картинка становится крупнее. */ @media (max-width: 900px) { /* Плакат: фирменная рамка со срезанными углами остаётся, а крупнее он становится за счёт пропорции и обрезки — у макета по краям пустое поле. */ .photorow .ph { aspect-ratio: 4 / 3; min-height: 0 !important; border-radius: 0 44px 0 44px !important; overflow: hidden; } .photorow .ph img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } /* Баннер секретаря — во всю ширину экрана, без рамки и полей. */ #sekretar .photorow .ph { aspect-ratio: auto !important; margin-left: -16px !important; margin-right: -16px !important; border-radius: 0 !important; } #sekretar .photorow .ph img { height: auto !important; object-fit: contain !important; } } /* ── Первый экран главной: как на «Нотариусу» ── Там картинка идёт полосой сверху, а текст — под ней на фоне самой картинки. На главной блок оставался наложением с боковой растяжкой, и на телефоне текст ложился поверх иллюстрации. Правило адресное: разметка первого экрана у страниц общая. */ @media (max-width: 900px) { /* Как на «Нотариусу»: весь текст с заголовком лежит на фоне картинки, а сама иллюстрация идёт полосой ПОД текстом. Прошлый заход поставил её сверху — это была моя ошибка. Боковые поля страницы сохраняются. */ body[data-ntc-page="home"] .hero { background: #E2EBEB !important; display: flex; flex-direction: column; } body[data-ntc-page="home"] .hero .wrap { order: 1; } body[data-ntc-page="home"] .hero-bg { order: 2; position: static !important; top: auto !important; bottom: auto !important; width: 100%; padding-bottom: 58%; background-color: #E2EBEB !important; background-size: contain !important; background-position: center bottom !important; } body[data-ntc-page="home"] .hero-bg::before { display: none !important; } body[data-ntc-page="home"] .hero-grid { padding: 34px 0 22px; } } /* ── Смартфоны на главной: отступ от краёв экрана ── Ряд с макетами телефонов упирался в границы, и крайние обрезались. */ /* ── Меню: по ширине рабочей зоны, лого и значки мельче ── Шапка тянулась во всю ширину окна, а содержимое сайта ограничено рабочей зоной — из-за этого меню «разъезжалось» с остальными блоками. */ header > .wrap, #hdr > .wrap { max-width: 1180px; margin: 0 auto; } @media (max-width: 900px) { /* Логотип был ужат до 34px — зря, читался мелко. Возвращаем размер, но не вслепую: справа стоит несъёмный блок значков шириной 132px (42 + 7 + 42 + 7 + 34), рабочая зона на экране 375px — 343px, пропорция логотипа 1565,3 : 369,3 = 4,238. Отсюда потолок: прототипные 50px дают 212px и вылезают за экран на пиксель. clamp держит высоту в границах места: 34px на самых узких, около 43px на 375px, 46px начиная с 400px. */ .brand-img { height: clamp(34px, 11.5vw, 46px) !important; } .lk-btn { width: 34px !important; height: 34px !important; border-radius: 9px !important; } .lk-btn svg { width: 16px !important; height: 16px !important; } .burger { width: 34px !important; height: 34px !important; border-radius: 9px !important; } .burger span { width: 16px !important; } .nav-cta { gap: 7px !important; } } /* Экраны от 320px: 11,5vw дало бы 36,8px и лого упёрлось бы в значки вплотную — зазор ровно ноль. Возвращаем прежние 34px, зазор 11,9px. */ @media (max-width: 340px) { .brand-img { height: 34px !important; } } /* ── Баннер «Подробная аналитика» ── На широком экране кадр прижат влево — там ноутбук, и затемнение сделано так, чтобы его экран читался. На мобильном центрирование уводило кадр к чашке. Возвращаем к ноутбуку. */ @media (max-width: 920px) { /* Кадр очень широкий (2400×941), а блок на телефоне узкий и высокий — при cover в него влезает лишь треть картинки, и сдвиг влево ничего не решает: ноутбук всё равно за краем. Уменьшаем масштаб, чтобы он поместился целиком, и прижимаем к левому верхнему углу. */ .photoband { background-size: 175% auto !important; background-position: left top !important; padding-top: 250px !important; } .photoband::before { background: linear-gradient(180deg, rgba(14,47,56,0) 18%, rgba(14,47,56,.92) 44%) !important; } } /* ── Тарифы нотариуса: «Старт» первым ── .ntc-feat{order:-1} намеренно выносит «Про» вперёд. На мобильном это сбивает порядок чтения — человек упирается в средний тариф раньше пробного. Возвращаем порядок разметки. */ @media (max-width: 860px) { .ntc-p-card.ntc-feat, .ntc-feat { order: 0 !important; } } /* ── «Войти» в меню ── */ @media (max-width: 900px) { .mnav-cta { align-items: flex-start !important; } .mnav-cta .btn { width: auto !important; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: #113943 !important; border-color: #113943 !important; color: #fff !important; padding-left: 16px; padding-right: 18px; } .mnav-cta .btn:hover { background: #1c4c58 !important; border-color: #1c4c58 !important; } .mnav-cta .btn::before { content: ""; width: 17px; height: 17px; flex: none; background: currentColor; -webkit-mask: var(--ntcb-user) center/contain no-repeat; mask: var(--ntcb-user) center/contain no-repeat; } } :root { --ntcb-user: url("data:image/svg+xml;utf8,"); } /* ── Список статей: белый текст на светлом ── На широком экране заголовок лежит поверх фотографии, поэтому он белый. На узком блок перестраивается — фото сверху, текст снизу на песочном фоне, — а цвет остаётся от широкой раскладки, и текст пропадает. */ @media (max-width: 820px) { .st-hero h1 { color: #113943 !important; text-shadow: none !important; } .st-hero p { color: #63797F !important; text-shadow: none !important; } .st-hero h1 em { color: #FF4900 !important; } } /* ── Популярные запросы: по две плашки в строку ── */ @media (max-width: 700px) { .pop { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; } .pop .lbl { grid-column: 1 / -1; } .ptag { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ── Подпись «Разделы» над категориями ── Через ::before, а не разметкой: список категорий перерисовывается скриптом целиком, и вставленный узел он бы стёр. Оформление повторяет подпись «Популярные запросы» над плашками выше. */ .cats::before { content: "Разделы"; width: 100%; text-align: center; font-size:calc(12px + 12 * var(--grow,0px)); letter-spacing: .1em; text-transform: uppercase; color: #63797F; opacity: .6; font-weight: 700; margin-bottom: 4px; } /* ── Значок VK ── Соседние значки нарисованы в поле 24×24 и занимают его целиком, а VK — в поле 720×720 с запасом по краям, поэтому при равном размере выглядит мельче. Компенсируем. */ .shb[data-net="vk"] svg { width:23px; height:23px; } .shb[data-net="max"] svg { width:15px !important; height:15px !important; } /* ── Плавающие кнопки над панелью мастера ── Пока «Далее» на экране, поднимаем Ирину и «Наверх» на высоту панели. */ @media (max-width: 900px) { /* Ирину поднимаем выше «Наверх», а не вровень с ней: при равном сдвиге круглая кнопка накрывала аватар краем. */ body.ntc-liftfab .ntc-totop { transform: translateY(calc(-1 * var(--ntc-lift, 78px))); } body.ntc-liftfab .ntc-bot { transform: translateY(calc(-1 * var(--ntc-lift, 78px) - 8px)); } .ntc-bot, .ntc-totop { transition: transform .2s ease; } } /* ── Разделы статей: по три плашки в ряд ── «Бизнес» оставался один на строке и висел отдельно от остальных. */ @media (max-width: 700px) { .cats { gap: 7px !important; } .cat { font-size:calc(12.5px + 12.5 * var(--grow,0px)) !important; padding: 8px 12px !important; } } /* ── Окно «Сообщить о неточности»: заметные кнопки ── */ .ntc-rep .row { gap: 10px; margin-top: 4px; } .ntc-rep .row .btn { font-size:calc(15px + 15 * var(--grow,0px)) !important; font-weight: 700 !important; padding: 13px 20px !important; border-radius: 0 14px 0 14px !important; } .ntc-rep .row .btn-gold { background: #FF4900 !important; border-color: #FF4900 !important; color: #fff !important; box-shadow: 0 10px 24px -10px rgba(255, 73, 0, .6); } .ntc-rep .row .btn-gold:hover { background: #FF6326 !important; border-color: #FF6326 !important; } .ntc-rep .row .btn-ghost { border: 1.5px solid #113943 !important; color: #113943 !important; background: #fff !important; } .ntc-rep .row .btn-ghost:hover { background: rgba(17, 57, 67, .06) !important; } /* ── Тарифы: раскрывающиеся разделы ── ОТСТУПА СПРАВА ЗДЕСЬ БЫТЬ НЕ ДОЛЖНО. Стояло padding-right:132px — место под надпись «нажмите ▾». Отступ съедал ширину строки ИЗНУТРИ сетки: колонки шапки пересчитывались на 132px уже, чем у строк с ценами (у тех отступ обычный, 22px). Подписи «Подготовка в Notarica» и «Тариф нотариуса» уезжали влево от своих цифр примерно на сто точек, и подвинуть их правкой tarify.html было НЕЛЬЗЯ: там всё выровнено верно, ломал выравнивание этот файл — добавленный ради мобильной версии, но действовавший на всех ширинах. Надпись ставим в ЧЕТВЁРТУЮ колонку сетки, которая у шапки пуста (под кнопку «Подготовить»), — сетка остаётся общей со строками. Найдено 18.08.2026 по замечанию владельца. */ .pt-cat.ntc-fold-h { cursor: pointer; user-select: none; position: relative; } .pt-cat.ntc-fold-h > span:nth-child(4) { position: relative; } .pt-cat.ntc-fold-h > span:nth-child(4)::after { content: "развернуть ▾"; display: block; text-align: right; white-space: nowrap; font-size:calc(11.5px + 11.5 * var(--grow,0px)); font-weight: 700; letter-spacing: .02em; color: #FF4900; text-transform: none; } .pt-cat.ntc-fold-h.ntc-open > span:nth-child(4)::after { content: "свернуть ▴"; color: #63797F; } .pt-cat.ntc-fold-h:hover > span:nth-child(4)::after { color: #FF6326; } @media (max-width: 720px) { /* На узком экране сетка шапки — одна колонка, четвёртой ячейки нет на своём месте: возвращаем надпись в угол строки. Отступ здесь безвреден — колонок с ценами в шапке уже не остаётся. */ .pt-cat.ntc-fold-h { padding-right: 108px; } .pt-cat.ntc-fold-h > span:nth-child(4)::after { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size:calc(11px + 11 * var(--grow,0px)); } } /* Кнопка «Сообщить о сбое» на шаге превью конструктора. */ .ntcb-reportbtn { display: block; margin: 14px auto 0; background: transparent; border: 1px dashed #E3DED4; border-radius: 999px; color: #63797F; font: 600 12px 'Manrope', system-ui, sans-serif; padding: 7px 14px; cursor: pointer; } .ntcb-reportbtn:hover { border-color: #FF4900; color: #FF4900; } /* ── Шапка: шестой пункт меню перестал помещаться ── Рабочая зона у шапки и так была правильная — виновато не она, а то, что я добавил «Компаниям»: шесть пунктов, логотип 65px и значки в 1180px больше не влезали, и правый край выезжал за экран. Ужимаем на средних ширинах, а не на всех. */ @media (min-width: 901px) and (max-width: 1320px) { .brand-img { height: 52px !important; } .navlinks { gap: 20px !important; font-size:calc(14.5px + 14.5 * var(--grow,0px)) !important; } .nav-cta { gap: 10px !important; } .nav-cta .lk-btn { width: 40px !important; height: 40px !important; } .nav { height: 72px !important; } } /* На широких экранах ряд шапки был переполнен, а не просто тесен. Померено по настоящим метрикам Manrope 500 при рабочей зоне 1124px (1180 минус поля 28×2): логотип 245,8 + шесть пунктов 783,0 + значки 98 = 1126,8. В каталоге значки 46px вместо 42, там 1134,8. Свободного места нет вовсе, поэтому space-between раздаёт нулевые промежутки — логотип упирается в пункты, значки тоже. Место берём у самих пунктов, логотип и значки не трогаем: шрифт 15px вместо 16 и промежуток 18px вместо 26 высвобождают 80,8px, и они уходят поровну по краям — около 39px на главной, около 35px в каталоге. Каталог накрывается этим же правилом: стиль там подключён, классы общие. */ @media (min-width: 1321px) { .brand-img { height: 58px !important; } .navlinks { gap: 18px !important; } .navlinks a { font-size:calc(15px + 15 * var(--grow,0px)) !important; } } /* ── Главная, мобильная: первый экран ── */ @media (max-width: 900px) { /* Шапка в цвет баннера. Прошлый заход красил .hero::before — а такого псевдоэлемента нет вовсе: без content он не рисуется, и правило было мёртвым. Красим саму шапку. Тень убираем тем же правилом: она даёт растяжку в 17px и оставляет шов ровно там, где фон уже совпал. */ body[data-ntc-page="home"] header, body[data-ntc-page="home"] header.scrolled, body[data-ntc-page="home"] #hdr, body[data-ntc-page="home"] #hdr.stuck { background: #E2EBEB !important; box-shadow: none !important; border-bottom-color: transparent !important; } /* Полоска под баннером — это граница секции; убираем. Полоса под картинкой — нижнее поле самого блока: в прототипе .hero{padding:70px 0 88px}, на мобильном оно не перекрывалось, и снизу оставалась пустая полоса цвета баннера. Замер по экрану: картинка кончается на 327px, полоса тянется до 415px — ровно те самые 88px. */ body[data-ntc-page="home"] .hero { border-bottom: 0 !important; box-shadow: none !important; padding-bottom: 0 !important; } /* Картинка крупнее: заполняем ширину, а не вписываем с полями. */ body[data-ntc-page="home"] .hero-bg { padding-bottom: 66% !important; background-size: cover !important; background-position: center 62% !important; } /* Текст первого экрана — с отступами от краёв, как весь остальной сайт. */ body[data-ntc-page="home"] .hero .wrap { padding-left: 16px !important; padding-right: 16px !important; } } /* ── Смартфоны на главной ── Прежнее правило ограничивало каждую картинку по отдельности (max-width:100%), а мешал не отдельный аппарат, а ширина всего ряда. Картинки 306×760, 409×760 и 306×760 при max-height:290px дают 116,8 + 22 + 156,1 + 22 + 116,8 = 433,7px против примерно 315px рабочей ширины — вылет около 119px, по 59 с каждой стороны, и overflow:hidden их просто срезал. Считаем долями от ряда, пропорционально натуральным ширинам: 306 : 409 : 306 плюс по 3% на промежутки — 28 + 37,5 + 28 + 6 = 99,5%. Именно max-width, а не width: на планшете картинки меньше своей доли, правило не срабатывает и прежний вид сохраняется; сжимаются только там, где не помещаются, и все три одинаково — низ ряда остаётся ровным. */ @media (max-width: 900px) { .phones-media { padding-left: 14px !important; padding-right: 14px !important; overflow: hidden; box-sizing: border-box; } .phones-media img, .phones-media picture, .phones-media > * { max-width: 100% !important; height: auto !important; } .phones-media img:nth-child(1) { max-width: 28% !important; margin-right: 3% !important; } .phones-media img:nth-child(2) { max-width: 37.5% !important; } .phones-media img:nth-child(3) { max-width: 28% !important; margin-left: 3% !important; } } /* ── Страница «Компаниям» на телефоне ── Разбор по жалобам владельца 09.08. */ @media (max-width: 900px) { /* Снимок кабинета шёл во всю ширину отрицательными полями в 16px, но поля рабочей зоны на разных страницах разные, и по краям оставалась полоса. Считаем от окна, а не от поля: тогда край совпадает при любой вёрстке. */ #sekretar .photorow .ph { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* Заголовок раздела прижимался к снимку вплотную. */ #sekretar .photorow .txt { margin-top: 26px !important; } /* Преимущества — строго одно за одним: правило раскладки «три и две» задано на странице, здесь гасим его наверняка. */ #adv .adv { grid-template-columns: 1fr !important; } #adv .adv > .acard { grid-column: auto !important; } } /* ── Разбор по замечаниям владельца 09.08, вечер ── */ @media (max-width: 900px) { /* Снимок кабинета растянут во всю ширину, а у секции сверху 70px поля — над ним оставалась полоса фона. Убираем поле, картинка встаёт впритык. */ #sekretar { padding-top: 0 !important; } #sekretar .photorow { gap: 0 !important; } #sekretar .photorow .txt { margin-top: 30px !important; } /* «Аналитика» упиралась в фотополосу. Отодвигаем текст, стык фото с затемнением не трогаем — он внутри одного элемента и шва там нет. */ .photoband { padding-top: 292px !important; } /* Пробный тариф: кнопка отрывалась от списка на всю оставшуюся высоту. */ .ntc-pricing .ntc-p-trial { gap: 14px !important; } .ntc-pricing .ntc-p-trial .tr-b { margin-top: 4px !important; } } /* ── Бургер вровень с соседними значками ── .lk-btn поднят до 42px стилем избранного, который вставляется в конец body и выигрывает по порядку, а бургер оставался 34px. */ @media (max-width: 900px) { .burger { width: 42px !important; height: 42px !important; border-radius: 11px !important; } .burger span { width: 20px !important; } } /* ── Номер шага в кружке ── Цифры с засечками садятся ниже оптического центра: под базовой линией резервируется место под выносные элементы, которых у цифр нет. Поджимаем межстрочный и приподнимаем нижним полем. */ .ch-num { line-height: 1 !important; padding-bottom: 3px !important; box-sizing: border-box; } /* ── Чередование фона секций на телефоне ── Разметка чередует белый и --paper-2 (#F7F7F7). На большом экране полосы видно по длинным границам, на телефоне разница в 3% пропадает совсем. Углубляем именно на мобильном: тон из той же тёплой гаммы, что --peach и --line, чтобы не выпадать из палитры. Десктоп не трогаем. */ @media (max-width: 900px) { #sekretar, #how, #security, .band, .photorow-band, section[style*="paper-2"] { background: #F1EFE9 !important; } /* Плашки внутри таких секций были того же #F7F7F7 и сливались с ними. */ #security .acard, #how .ch { background: #fff !important; } } /* ── Ещё разбор замечаний 09.08 ── */ @media (max-width: 900px) { /* Главная: текст первого экрана стоял на 104px от меню (70 у .hero плюс 34 у сетки), на «Нотариусу» — 56. Приводим к тем же 56. */ body[data-ntc-page="home"] .hero { padding-top: 0 !important; } body[data-ntc-page="home"] .hero-grid { padding-top: 56px !important; } /* «Запись к нотариусу 24/7»: заголовок упирался в левый край, потому что .vhero-copy на мобильном теряет ограничение по ширине, а боковых полей у него своих нет. */ .vhero-copy { padding-left: 16px !important; padding-right: 16px !important; } /* Плакат конторы: перекрывает фон плотнее, полей по краям меньше. */ #plakat .photorow .ph { margin-left: -16px !important; margin-right: -16px !important; } #plakat .photorow .ph img { width: 100% !important; height: auto !important; } /* Статьи: обложка первого экрана была слишком низкой. */ .st-hero-bg { aspect-ratio: 16/11 !important; } /* Публикации шли вплотную друг к другу. */ .bloglist { gap: 30px !important; } /* «Ещё публикации»: рамка была цвета --line и терялась. */ .more-wrap .btn-ghost { border-color: var(--ink, #113943) !important; border-width: 2px !important; color: var(--ink, #113943) !important; font-weight: 700 !important; } } /* ── «Главная» только в бургере ── На десктопе ряд шапки и так переполнен, шестой пункт туда не влезает. */ .mnav-home { display: none; } @media (max-width: 900px) { .mnav-home { display: block; } } /* ── Разбор замечаний 09.08, поздний ── */ @media (max-width: 900px) { /* Главная: у секции преимуществ padding-top обнулён прямо в разметке, из-за чего она прилипала к предыдущему блоку. */ body[data-ntc-page="home"] #values { padding-top: 54px !important; } /* Пробный тариф: список стоял с flex-basis 260px, а в колонке это высота — отсюда пустое поле до кнопки. Отдаём ему высоту по содержимому. */ .ntc-pricing .ntc-p-trial .tr-f { flex: 0 0 auto !important; } .ntc-pricing .ntc-p-trial .tr-b { margin-top: 2px !important; } /* Плакат конторы. Разбор: поля вокруг листа нарисованы ВНУТРИ кадра — лист занимает лишь 50% ширины файла. Растягивание блока увеличивало и поля, а object-fit и aspect-ratio до элемента не доходили: .ph — элемент сетки с align-items:stretch, высоту ему задаёт строка, и aspect-ratio молча не работал. Поэтому берём обрезанный кадр фоном и задаём высоту через padding-bottom — он работает всегда. Только «Нотариусу»: на «Компаниям» в этой же секции лежит карта России. */ body[data-ntc-page="notariusu"] #plakat .photorow .ph { aspect-ratio: auto !important; height: auto !important; padding-bottom: 138.6%; margin-left: -8px !important; margin-right: -8px !important; background: #E2E8E7 url(../pages/assets/plakat-mob.webp) center/cover no-repeat; } body[data-ntc-page="notariusu"] #plakat .photorow .ph img { display: none !important; } body[data-ntc-page="notariusu"] #plakat .photorow .txt { margin-top: 28px !important; } } /* ── Статья на телефоне ── Боковая колонка уходит под текст, и блок «О Notarica» прилипал к тому, что стоит над ним. Даём ему воздух и разводим блоки колонки шире. */ @media (max-width: 900px) { .side { gap: 26px !important; } .side > .swid:first-child { margin-top: 28px !important; } } /* Booking-specific mobile rules moved to booking-ui.css (1.0.282). */ #ymap{scroll-margin-top:100px} /* 1.0.235 — mobile tariffs and shared footer. */ @media(max-width:720px){ .price-ig .ig-tag{font-size:13px!important}.price-ig .ig-card h3{font-size:18px!important} .price-ig .ig-card p,.price-ig-sub{font-size:16px!important;line-height:1.5!important} .price-ig .ig-ic{width:58px!important;height:58px!important}.price-ig .ig-ic svg{width:32px!important;height:32px!important}.price-ig .ig-ic img{width:48px!important} #ntcTariffs .pt-cat.ntc-fold-h{display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;gap:10px!important;padding:15px 16px!important;align-items:center!important} #ntcTariffs .pt-cat.ntc-fold-h>.pt-cat-nm{grid-column:1!important;min-width:0;white-space:normal!important;font-size:15px!important} #ntcTariffs .pt-cat.ntc-fold-h>.pt-cat-l{display:none!important} #ntcTariffs .pt-cat.ntc-fold-h>span:nth-child(4){grid-column:2!important;position:static!important;justify-self:end!important} #ntcTariffs .pt-cat.ntc-fold-h>span:nth-child(4)::after{position:static!important;transform:none!important;font-size:12px!important;text-align:right!important} #ntcTariffs .pt-doc{font-size:18px!important;line-height:1.35!important} #ntcTariffs .pp,#ntcTariffs .pt-lbl,#ntcTariffs .pt-conditions,.tariff-foot,.pc-note{font-size:14px!important;line-height:1.45!important} #ntcTariffs .pt-row:not(.pt-cat)>button{width:max-content!important;max-width:100%;justify-self:center!important;display:inline-flex!important;justify-content:center!important;align-items:center!important;font-size:16px!important;padding:11px 18px!important} } #ntcTariffDetails .trf-x{width:38px!important;height:38px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1.5px solid #ff4900!important;border-radius:0 14px 0 14px!important;background:#fff!important;color:#ff4900!important;padding:0!important;line-height:1!important} @media(max-width:900px){ .nf-top>div:has(>.nf-map){grid-column:1/-1!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:18px;align-items:start} .nf-top>div:has(>.nf-map)>:not(.nf-map){grid-column:1!important} .nf-top>div>.nf-map{grid-column:2!important;grid-row:1/span 8!important;width:100%!important;max-width:300px!important;margin:0!important;align-self:start} } /* 1.0.257: shared framed modal close and confirmation panels. */ :is(.ac-close,.cc-x,.fclose,.g-x,.m-close,.ntc-dp-x,.ntc-fm-x,.ntc-fv-x,.ntc-inst-x,.ntc-legal-close,.ntc-lg-x,.ntc-notice-close,.ntc-preview-close,.ntc-tf-when-x,.ntc-tf-x,.ntcb-sm-x,.nw-x,.owner-card-close,.plan-x,.trf-x,.ntcp-close,button[aria-label="Закрыть"],button[aria-label="Закрыть просмотр"],button[data-ntc-close]){box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;flex:0 0 44px!important;padding:0!important;border:1.5px solid #ff4900!important;border-radius:0 14px 0 14px!important;background:transparent!important;color:#ff4900!important;font-size:28px!important;line-height:1!important;cursor:pointer} :is(.ac-close,.cc-x,.fclose,.g-x,.m-close,.ntc-dp-x,.ntc-fm-x,.ntc-fv-x,.ntc-inst-x,.ntc-legal-close,.ntc-lg-x,.ntc-notice-close,.ntc-preview-close,.ntc-tf-when-x,.ntc-tf-x,.ntcb-sm-x,.nw-x,.owner-card-close,.plan-x,.trf-x,.ntcp-close,button[aria-label="Закрыть"],button[aria-label="Закрыть просмотр"],button[data-ntc-close]) svg{stroke:currentColor}:is(.ac-close,.cc-x,.fclose,.g-x,.m-close,.ntc-dp-x,.ntc-fm-x,.ntc-fv-x,.ntc-inst-x,.ntc-legal-close,.ntc-lg-x,.ntc-notice-close,.ntc-preview-close,.ntc-tf-when-x,.ntc-tf-x,.ntcb-sm-x,.nw-x,.owner-card-close,.plan-x,.trf-x,.ntcp-close,button[aria-label="Закрыть"],button[aria-label="Закрыть просмотр"],button[data-ntc-close]):focus-visible{outline:2px solid #ff4900!important;outline-offset:3px} .ntc-dir-confirmations{grid-column:1/-1;clear:both;width:100%;min-width:0;margin-top:18px}.ntc-dir-confirmations:empty{display:none} :root .ntc-dir-confirmations .ntc-dirchk,:root .ntcb-pvok,:root #ntcbDataOkRow{box-sizing:border-box;display:flex;align-items:flex-start;gap:10px;min-width:0;width:100%;max-width:100%;padding:12px 14px!important;border:1.5px solid #ff4900!important;border-radius:0 14px 0 14px;line-height:1.5;white-space:normal} :root .ntc-dir-confirmations .ntc-dirchk{margin:8px 0 0;background:#fff;color:#113943} :root .ntc-dirchk input,:root .ntcb-pvok input,:root #ntcbDataOkRow input{accent-color:#ff4900} :is(.ac-close,.cc-x,.fclose,.g-x,.m-close,.ntc-dp-x,.ntc-fm-x,.ntc-fv-x,.ntc-inst-x,.ntc-legal-close,.ntc-lg-x,.ntc-notice-close,.ntc-preview-close,.ntc-tf-when-x,.ntc-tf-x,.ntcb-sm-x,.nw-x,.owner-card-close,.plan-x,.trf-x,.ntcp-close,button[aria-label="Закрыть"],button[aria-label="Закрыть просмотр"],button[data-ntc-close])[hidden]{display:none!important} /* 264: one close frame, keyboard focus remains visible inside it. */ :is(.m-close,.ntcb-sm-x,.ntc-tf-x,.nw-x,.trf-x,.ntcp-close,button[aria-label="Закрыть"]){box-shadow:none!important} :is(.m-close,.ntcb-sm-x,.ntc-tf-x,.nw-x,.trf-x,.ntcp-close,button[aria-label="Закрыть"]):focus-visible{outline:none!important;box-shadow:inset 0 0 0 2px #ff4900!important} :is(.m-close,.ntcb-sm-x,.ntc-tf-x,.nw-x,.trf-x,.ntcp-close)::before,:is(.m-close,.ntcb-sm-x,.ntc-tf-x,.nw-x,.trf-x,.ntcp-close)::after{border:0!important;box-shadow:none!important} .pt-tar .pt-lbl{display:block!important}.pt-label-tail{white-space:nowrap}.pt-conditions{position:relative;display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;padding:0;margin:0 0 0 1px;border:1px solid #ff4900;border-radius:50%;font:10px/1 Arial;color:#ff4900;background:transparent;vertical-align:super;cursor:pointer}.pt-conditions::after{content:"";position:absolute;inset:-6px}.pt-case{display:block;font-size:12px;line-height:1.4;margin-top:6px}.pt-tar{min-width:0}