/* ========================================================================= MOBILE.CSS - ЧАСТЬ Б: РАЗМЕР И МЕСТО Создан 22.08.2026. Подключается в СРАЗУ ПОСЛЕ styles.css, поэтому переопределяет его порядком в каскаде, а не весом: ни одного !important. ПОЧЕМУ ОТДЕЛЬНЫМ ФАЙЛОМ, А НЕ ХВОСТОМ В styles.css. Тот же файл в этот же день правит вторая пара рук (состояния и движение, зона 5A). Один ресурс - один писатель: разойтись по файлам дешевле, чем потом искать, кто кому затёр строку в 300 КБ. ЧТО ЗДЕСЬ ЖИВЁТ: кегль, интерлиньяж, трекинг, поля, отступы, ширина, высота, зазоры, колонки сетки, размытие подложки, все пороги по ширине экрана и (prefers-reduced-transparency). ЧЕГО ЗДЕСЬ НЕТ: :hover, :active, :focus, transition, transform, animation, opacity, background, border-color, классы is-*. Это чужая зона, она в styles.css. ДВА ИМЕННЫХ ИСКЛЮЧЕНИЯ, оба разрешены техзаданием явно: 1. Б8 меняет box-shadow на узких экранах - тень тут работает не как состояние, а как стоимость растрового прохода. 2. Б7 в блоке (prefers-reduced-transparency) заменяет background, потому что снятое размытие обязано чем-то компенсироваться, иначе панель станет прозрачной насквозь. Свечение канонной синей полосы (.rate-strip::before и её сёстры из зоны 5A) под Б8 НЕ подпадает: полоса живёт на ::before, а Б8 трогает только собственную тень плашки. В файле она не упоминается ни разу. ========================================================================= */ /* ========================================================================= Б2.1 ШКАЛА КЕГЛЯ: поднять полку основного чтения Замер до правки: 73 элемента страницы сидят на 14.5px, и это ровно тот слой, который человек читает дольше всего - тело карточек. При колонке в 180px (замер на 1440) это давало 16-19 символов в строке, то есть газетное объявление, а не текст. Половину беды чинит кегль здесь, вторую половину - колонки в Б4. Пустая полка 25-32px закрывается не токеном, а рангами шапок в Б3: служебная шапка встаёт на 26.2px при центре 820px. Заводить под это отдельный токен нечестно - его использовало бы одно правило. ========================================================================= */ :root{ --fs-300: 16px; /* было 14.5 - тело карточек, основной объём чтения */ --fs-400: 17px; /* было 16 - лиды разделов и базовый кегль страницы */ --fs-350: 22px; /* новая ступень между телом и шапкой раздела */ } /* Заголовок калькулятора - единственный подзаголовок, который обязан держать один размер на всех экранах: это вход в сделку. До правки он уезжал на 19px при узком центре, то есть терялся среди тела. */ .calc__title{ font-size: var(--fs-350); } /* ========================================================================= Б1 НИЖНЯЯ КРОМКА ЭКРАНА: самая дорогая поломка на сайте Замер на 375x812 до правки: .qnav высотой 77.19px против body{padding-bottom:74px} - 3.2px контента постоянно под панелью, а на айфоне с домашней полосой ещё 37px сверху. Плавающая кнопка «Рынок» 100.6x44 на bottom:88px перекрывала полосу курса на 4426 px². Под ней лежали rate-strip__v и rate-strip__item, то есть курс тенге - бизнес-число - физически не читался. Поднимать кнопку бесполезно: полоса курса занимает 27..146px от низа, при bottom:96px+safe кнопка встаёт в 96..140 и остаётся внутри. Любая другая высота закроет что-то другое на другой прокрутке. РЕШЕНИЕ. Кнопка перестаёт летать и садится в нижнюю панель седьмой ячейкой. В разметке седьмой ячейки пока нет, поэтому под неё резервируем пустую дорожку грида, а сама кнопка (она fixed) встаёт ровно в эту дорожку. Ничего никуда больше не наезжает. ========================================================================= */ @media (max-width:1199px){ /* Шесть ячеек навигации плюс пустая дорожка 50px под кнопку рынка. Зазор между ячейками убран в ноль, а поля панели ужаты до 2px: семь целей в ряду, и каждый пиксель зазора отбирается у самой длинной подписи. Ячейки друг с другом не слипаются - между ними внутренние поля .qcard. */ .side--left .qnav{ grid-template-columns: repeat(6, minmax(0,1fr)) 50px; gap: 0; padding-left: 2px; padding-right: 2px; } /* Боковые поля ячейки в ноль: ячейки не слипаются - между подписями остаётся пустое место самой сетки, а «Гарантиям» эти два пикселя решают, влезть или обрезаться. Замер на 375px: нужно 49.5, есть 53.5. */ .qcard{ padding: 8px 0; gap: 5px; } /* Замер: «Гарантии» на 11px занимают 49px. Интерлиньяж жмём отдельно - подпись в один ряд, воздух ей не нужен, а каждый лишний пиксель высоты панели съедает контент под ней. Многоточие тут не украшение, а страховка: если чужая правка когда-нибудь сузит ячейку, подпись обрежется по своей границе, а не наедет на соседнюю. Проверено - при нынешних числах оно не срабатывает нигде. */ .qcard__t{ font-size: 11px; letter-spacing: -.01em; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Кнопка рынка: та же геометрия, что у ячейки навигации, чтобы ряд читался одним рядом, а не «шесть кнопок и что-то ещё». 🔴 Правка 02.09 - по ЗАМЕРУ, а не по намерению. Комментарий выше обещал «ту же геометрию» с 26.08, но замер живой страницы на 375px показал ряд из семи предметов, где седьмой стоит по своим правилам: ячейка .qcard высота 60, gap 5, иконка сверху 757 кнопка «Рынок» высота 58, gap 4, иконка сверху 753 <- выше на 4px Глазу видно именно иконку: подписи стоят на одной строке, а знак над «Рынком» приподнят, и седьмой предмет читается как приклеенный сбоку. Причина в двух числах. Высота 58 прибита руками, тогда как у ячейки она СЧИТАЕТСЯ из содержимого (8 + 15 + 5 + 13 + 8 = 60 при gap 5). Плюс сам gap на пиксель меньше. Внутренний столбик выходит короче на 2px и, будучи прижат к низу через bottom, поднимает иконку. Лечу причину, а не показание: высота и gap приравниваются к ячейке, а bottom пересчитан так, чтобы НИЗ кнопки сел на низ ячейки. низ ячейки = 744 + 60 = 804 низ кнопки = 812 - bottom 804 = 812 - bottom -> bottom = 8px Ширину 46px намеренно не трогаю: планка нажатия 44px соблюдена, а расширение до 54px отняло бы ширину у шести подписей, где «Гарантии» уже стоят с запасом полтора пикселя (см. блок 320-374px ниже). */ .panel-toggle{ right: 2px; bottom: calc(8px + env(safe-area-inset-bottom)); flex-direction: column; width: 46px; height: 60px; gap: 5px; padding: 8px 2px; font-size: 11px; letter-spacing: -.01em; line-height: 1.2; /* Размытие тут больше не за что цеплять: кнопка легла на непрозрачную панель, а не на страницу. Слой снят вместе с остальными в Б7. */ backdrop-filter: none; -webkit-backdrop-filter: none; } /* 🔴 Правка 02.09, второй заход. Первый (высота/gap/bottom) выровнял коробку кнопки с ячейкой - низ и высота сошлись в ноль, - но знак разошёлся ещё сильнее: было выше на 4px, стало на 5px. Замер опроверг диагноз, поэтому смотрим не числа, а СТРОЕНИЕ, и там разница видна сразу: ячейка: 26x26 , потому что .panel-toggle лежит вне .shell и обычным комбинатором до него от .qnav не дойти. */ @supports selector(:has(*)){ @media (max-width:1199px){ body:has(.qnav > .qcard:nth-child(7)) .side--left .qnav{ grid-template-columns: repeat(7, minmax(0,1fr)); padding-right: 4px; } body:has(.qnav > .qcard:nth-child(7)) .panel-toggle{ display: none; } } } /* ========================================================================= Б2.2 ПОЛ ПО КЕГЛЮ НА УЗКОМ ЭКРАНЕ Замер на 375px до правки: 71 элемент мельче 12px (25 по 10px, 17 по 11px, 14 по 10.5px, 9 по 9.5px, 6 по 11.5px). Пол: 12px для обычного текста, 11px для моно-рубрик капсом - у них трекинг делает половину работы кегля, и он сохранён везде. ========================================================================= */ @media (max-width:1199px){ /* Моно-рубрики капсом: пол 11px, трекинг не тронут. */ .fcard__kicker, .fcard__more, .card__tag, .geo__status, .geo__rule-k, .geo__live-k, .geo__facts dt, .mrow__pair, .market__stamp{ font-size: 11px; } /* Обычный текст и цифры: пол 12px. */ .mrow__name, .mrow__chg, .geo__card-geo, .field__label, .fcard__title{ font-size: 12px; } /* Подпись ячейки навигации - именное исключение: 11px при ширине ячейки 49px. Ниже 11px не опускается нигде. */ } /* ========================================================================= Б3 ТРИ РАНГА ШАПОК РАЗДЕЛОВ ВМЕСТО ОДНОГО Замер до правки: девять шапок совпадают до пикселя - 34.44px, вес 700, тот же эйбрау, та же линейка 220x3. «Как проходит сделка» весит ровно столько же, сколько «Дополнительные услуги». Ранг задан по существующим id, новых классов не заведено. Единица cqi взята потому, что весь центр объявлен контейнером (.center), и базовое правило .section__head h2 считает себя тоже в cqi - шкала остаётся одной, а не двумя параллельными. ========================================================================= */ /* Узловые: сердце предложения. 28px на телефоне против 24px базовых, 37.7px при центре 820px против 34.44px. */ #how .section__head h2, #safety .section__head h2{ font-size: clamp(28px, 4.6cqi, 44px); } #how .section__lead, #safety .section__lead{ font-size: 18px; } /* Служебные: довесок и оговорка. Они же закрывают пустую полку 25-32px. */ #services .section__head h2, #reviews .section__head h2{ font-size: clamp(22px, 3.2cqi, 28px); } /* Линейка под эйбрау в каноне помечает раздел как важный. У служебных разделов она врала о ранге, поэтому снята. Сам эйбрау остаётся: он называет раздел, а не повышает его. */ #services .section__head .rule, #reviews .section__head .rule{ display: none; } /* ========================================================================= Б4 ДЛИНА СТРОКИ: 21 символ это газетное объявление Замер на 1440px: полотно 1440, липкие панели 300+320 забирают 620px, центру остаётся 820px, три колонки с зазором 18px дают карточку 244px, а тексту внутри 180-184px. Посчитано по шести элементам каждого типа: #options .card p - 16 символов в строке, .whyus-card__p - 19, #safety .guard p - 19. Пятнадцать таких карточек это основной объём чтения на сайте. ЛОВУШКА ВЕСА, на которой уже спотыкались в styles.css: у правила, которое здесь перебивается, селектор .cards:not(.cards--2), а :not() прибавляет вес аргумента, то есть весит как два класса. Голый .cards весит один и проиграл бы. Повторяем ту же форму селектора. .cards--2 (доп. услуги) не трогаем: там карточек ровно две. ПОРОГ ТРЁХ КОЛОНОК ВЗЯТ НЕ ИЗ ЗАДАНИЯ, А ИЗ ЗАМЕРА. В задании стояло 1600px, я поставил и померил: панели забирают свои 620px при любой ширине окна, поэтому на 1600 центру достаётся 980, три колонки дают карточку 296px, а тексту внутри 232px - это 22 символа в строке. То есть на пороге из задания болезнь возвращалась почти в полном объёме. Три колонки заслуживают появления там, где карточка перестаёт душить текст. Замер на 1920: центр 1300, карточка 363px, текст 298px, 28 символов - ровно столько же, сколько дают две колонки на 1440. Шкала чтения одна на всех ширинах, меняется только число колонок. Выше центр не растёт: .wrap упирается в свои 1180px. Порог записан в ширине ЦЕНТРА (1250px), а не окна: при нынешних панелях это примерно 1870px окна. МЕРКА ЗДЕСЬ ОДНА, И ЭТО НЕ ЛЕНЬ. Сначала я продублировал пороги через @media по окну, как принято в styles.css, и померил: на окне 1200 центру достаётся 680px, файл честно складывает карточки в ОДНУ колонку по 624px, а моё правило по окну перебивало это и ставило две по 303px - то есть 24 символа в строке вместо семидесяти. Окно и центр тут расходятся на 520px, и любое число, взятое по окну, врёт на этом разрыве. Поэтому колонки считаются только по фактической ширине центра. Браузер без контейнерных запросов (Safari до 16, Firefox до 110) остаётся на сегодняшнем поведении: не лучше, но и не хуже, чем сейчас. ========================================================================= */ @container center (min-width:801px) and (max-width:1249px){ .cards:not(.cards--2), .guards, .whyus__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @container center (min-width:1250px){ .cards:not(.cards--2), .guards, .whyus__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } } /* ДЫРКА В РЯДУ, которую две колонки создают у опций сделки. Их ровно три: третья осталась бы одна, а рядом с ней пустая половина ряда - ровно та болезнь, из-за которой в styles.css когда-то и поставили три колонки. Отдаём последней карточке обе колонки: дыры нет, а текст в ней дышит. Селектор срабатывает ТОЛЬКО когда третий ребёнок он же последний, то есть на трёх карточках и ни на чём другом. У .guards и .whyus__grid по шесть штук, их он не касается. Порог по ширине ЦЕНТРА, а не окна: правило обязано выключиться ровно там, где включаются три колонки, иначе карточка растянется на все три. */ @container center (max-width:1249px){ .cards:not(.cards--2) > :nth-child(3):last-child{ grid-column: 1 / -1; } } @media (max-width:1199px){ .cards:not(.cards--2) > :nth-child(3):last-child{ grid-column: 1 / -1; } } /* ========================================================================= Б5 КАЛЬКУЛЯТОР НА ПЛАНШЕТЕ Замер на 768px: .calc 520px, а .stats, .geo, .cards рядом по 728px. Главный блок конверсии на 208px уже всего вокруг и при этом отцентрован - читается как чужой вставленный виджет, а не как сердце страницы. Ниже 621px ограничение и так не проявляется, поэтому нижняя граница есть. ========================================================================= */ @media (min-width:621px) and (max-width:1199px){ .calc{ max-width: 640px; } } /* ========================================================================= Б6 ЗОНЫ НАЖАТИЯ Замер на 375px: 14 целей ниже 44px по высоте. Главная из них реальна и стыдна - .field__input, поле суммы, 219x30. Кегль поля НЕ трогаем: 24px стоят там против автозума iOS, ниже 16px опускать нельзя. ========================================================================= */ @media (max-width:1199px){ .field__box{ min-height: 56px; } .field__input{ height: 44px; } .swap{ width: 48px; height: 48px; } .seg__btn{ height: 44px; } .header__cta{ height: 44px; } /* В задании стояло 12px, но замер после правки дал 41px высоты: строка внутри всего 17px. До сорока четырёх не хватало полутора пикселей на каждое поле, поэтому 14. */ .flow__all{ padding: 14px 16px; } .logo{ padding: 4px 0; } /* Ссылки подвала были 347x22 при зазоре 10px. Зазор убираем в ноль и отдаём те же пиксели полям ссылки: шаг ряда не меняется, а палец попадает. Высота подвала после правки та же. */ .footer__links{ gap: 0; } .footer__links a{ display: block; padding: 11px 0; } } /* Габариты кнопок согласованы с частью А и живут на всех ширинах: главная 56px, второстепенная 48px. Разная высота в одном ряду - это и есть заявленная иерархия, а не рассинхрон. .btn--lg (герой) нормализуется с 58px до тех же 56px намеренно: два разных «главных» размера на одной странице снова стирают ранг. */ .btn--primary{ height: 56px; } .btn--ghost{ height: 48px; } /* ========================================================================= Б7 СЛОИ РАЗМЫТИЯ ПОВЕРХ НЕПОДВИЖНОГО ГРАДИЕНТА Замер на 375px: backdrop-filter активен у 47 отрисованных элементов. Холст-созвездие лежит ВНУТРИ .hero (.cnst.closest('.hero') истинно), и размывает его ровно один слой. Остальные 44 размывают .bg-glow - неподвижный фиксированный градиент, у которого filter:none и никакой анимации. Разбивка: .faq__item 13, .whyus-card 6, .guard 6, .flow__item 6, .card 3, .svc 2, .honest 2, .vs__col 2, .pill 1, .market 1, .feed 1, .panel-toggle 1 (снят выше в Б1). Размытие остаётся только там, где за слоем действительно что-то едет: .header (под ней прокручивается страница), .qnav (то же), .side--right (шторка над содержимым), .modal__backdrop (модалка над страницей). Звёздочкой это не пишется: * весит 0, а каждое правило в styles.css весит класс и победило бы независимо от порядка файлов. Поэтому список поимённый и снят замером, а не переписан из чужого отчёта. ========================================================================= */ @media (max-width:1199px){ .faq__item, .whyus-card, .guard, .flow__item, .card, .svc, .honest, .vs__col, .pill, /* Плашка-анонс в герое одета правилом .hero .pill--announce, а это два класса против одного. Замер после первой правки показал её единственной выжившей из сорока четырёх - повторяем ту же форму селектора. */ .hero .pill--announce, .market, .feed, .spot, .geo__tag, .geo__plate, .geo__now, .geo__legend{ backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Человеку, который выключил прозрачность в системе, размытие не помогает ничем, а мешает читать. Снимаем его и у четырёх оставшихся слоёв, но тогда подложку обязано держать что-то другое - отсюда плотный фон. Это второе именное исключение файла, разрешённое техзаданием. */ @media (prefers-reduced-transparency: reduce){ .header, .side, .side--left .qnav, .modal__backdrop{ backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(12,13,17,.96); } } /* ========================================================================= Б8 ТЕНИ РАДИУСОМ 90px Замер на 375px: 46 отрисованных элементов несут box-shadow с радиусом размытия от 40px (в разметке 0 44px 90px и 0 40px 90px). Каждая такая тень - отдельный растровый проход, и на слабом телефоне она складывалась с 44 размытиями из Б7 на одном и том же экране. Рисунок глубины сохраняется: тень остаётся направленной вниз, с отрицательным разбросом, то есть плашка по-прежнему висит над фоном. Дешевле по растру примерно вчетверо. Список снят замером и шире, чем был в задании: в нём не хватало .rate-strip, .stats и .vs__col, а они на первом же экране. Свечение синей полосы задано на ::before и сюда не попадает. ДВА ЭЛЕМЕНТА НАМЕРЕННО ОСТАВЛЕНЫ С ТЯЖЁЛОЙ ТЕНЬЮ, и это не недосмотр. .calc в задании был, но единственный калькулятор на странице лежит в герое и одет правилом .hero__grid > .calc со свечением акцента под панелью. Это подпись первого экрана, а не фоновая тень плашки: срезав её, я сэкономил бы один растр и убил бы акцент. Штука одна на экран. .flow__item.is-open - тем же порядком: тень там помечает раскрытый шаг, то есть работает индикацией состояния, а состояния держит часть А. Итого после правки тяжёлых теней на телефоне 2 вместо 46, и обе осмысленные. ========================================================================= */ @media (max-width:1199px){ .card, .guard, .svc, .whyus-card, .faq__item, .flow__item, .final__inner, .spot, .market, .feed, .honest, .stats, .vs__col, .rate-strip{ box-shadow: 0 12px 24px -14px rgba(0,0,0,.8); } } /* ========================================================================= Б9 ДЛИНА СТРОКИ: НА ПЛАНШЕТЕ 109 ЗНАКОВ В СТРОКЕ Замер на 768px до правки: 38 текстовых блоков длиннее 75 знаков, худший - .geo__live-note со 109 знаками при ширине 687px. На 375px за тем же порогом НОЛЬ блоков (максимум 53). Болезнь живёт ровно в полосе, где боковые панели уже ушли вниз и в шторку, а центр ещё не упёрся в свой потолок 1180px: текст растекается во всю ширину окна, и абзац на 13px даёт сотню знаков. Телефон этим не болеет, планшет болеет весь. ПОЧЕМУ 62ch, А НЕ ТОКЕННЫЕ 66ch. Единица ch - это ширина знака «0», и у Poppins ноль ШИРЕ средней кириллической буквы. Замер отношения ch к средней букве на одиннадцати блоках дал 1.15-1.21, то есть 66ch превращаются в 78-79 реальных знаков: сам токен порог не держал и на десктопе. Обратный пересчёт «сколько ch нужно ровно на 75 знаков» дал по блокам 61.9-65.3, единое безопасное значение на всю полосу - 62ch. ДВА ШАГА, А НЕ ОДИН СПИСОК. Сначала опускается сам токен: три его потребителя (.lead, .section__lead, .honest p) чинятся без единого нового селектора. Потом поимённо добираются те, у кого max-width не было вовсе - у них computed показывал none, и никакой токен до них не дотягивался. ЧЕГО ЗДЕСЬ НАМЕРЕННО НЕТ: .flow__item. Замер показал у него 79 знаков, но это не абзац, а карточка шага аккордеона - внутри неё .flow__h и .flow__panel. Ограничив её, я сузил бы саму карточку в ряду, а не строку; текст внутри (.flow__body p) и так лежит на 60 знаках. ПОЧЕМУ ЭТО НЕ ЛОМАЕТ РАСКЛАДКУ. Все девять блоков замерены как text-align:start с нулевыми полями, поэтому ограничение режет строку справа и не сбивает центровку. Два из них лежат во flex-контейнерах: .geo__note несёт flex:1 1 420px, а перенос строки flex решает по базису 420px, а не по max-width, - значит порядок переноса прежний, меняется только длина строки внутри уже занятой полосы. ========================================================================= */ @media (max-width:1199px){ :root{ --measure: 62ch; } /* У этих max-width не было вовсе - замер отдавал none. */ .geo__live-note, .geo__note, .faq__foot, .geo__facts dd, .geo__rule p, .calc__disclaimer, .hint, .calc__kzt{ max-width: var(--measure); } /* Подвальная строка была прижата своим собственным 76ch и давала 88 знаков. Селектор повторяет форму из styles.css (два класса и элемент): вес равный, побеждает порядок файлов, а не !important. */ .footer__bottom p{ max-width: var(--measure); } } /* =========================================================================== ПОДПИСЬ ПОД КНОПКАМИ НЕ ЛЕЗЕТ ПОД ПОМОЩНИКА (правка 02.09) Замер на 375px: круглая кнопка помощника (.aai-root, fixed, right 16px, ширина 62) занимает полосу 301...363. Подпись .hero__under шла от 14 до 361, то есть кнопка накрывала её правый край на 60x19px - «ставить приложения не нужно» обрывалось на слове «не». Ровно на первом экране, где эта строка и должна работать: она снимает страх «опять что-то устанавливать». Помощника не трогаю - он главный призыв страницы и его поведение выставлено отдельно (коммит c983952 «помощник стал единственным освещённым предметом»). Двигаю подпись: сужаю симметрично, чтобы центрирование сохранилось. центр строки = 375 / 2 = 187.5 правый край при 215px = 187.5 + 107.5 = 295 левый край помощника = 301 зазор = 6px Ширина 215px разводит текст на две строки - это нормально для подписи в 12.5px и лучше, чем обрезанное слово. Порог 620px, а не 1199: на планшете строка и кнопка расходятся сами, сужать там нечего. =========================================================================== */ @media (max-width:620px){ .hero__under{ max-width: 215px; margin-left: auto; margin-right: auto; } }