/* ============================================================================ ВКУС: РАНГ ДОВЕДЁН ДО КОНЦА (26.08.2026) Файл отдельный и подключён ПОСЛЕДНИМ намеренно: styles.css на 8496 строк и 15 зон правят разные исполнители, polish-* и deshablon-* выкачены в прод. Единственный безопасный рычаг тут - порядок в каскаде, а не правка чужих зон и не наращивание веса селекторов. ЧТО ЭТО ЗА ПРАВКА. Зона 8 styles.css уже завела ранг разделов: узловые (#how, #safety) получили кегль 37.72 и линейку 220, опорные (#why, #diff, #options, #offline) - 30.34 и линейку 140, служебные (#services, #reviews, #faq) - 26.24 и линейку снятую. Работа верная, но остановилась на заголовке. Прибор на живой странице (headless-Chrome, 1440x900, reveal погашен) показал: надзаголовок над этими девятью заголовками ОДИН И ТОТ ЖЕ во всех девяти разделах, без единого отличия - 12.5px, IBM Plex Mono, rgb(233,238,244), letter-spacing 3.38px, капс. То есть ранг объявлен строкой ниже и опровергнут строкой выше: на служебном FAQ надзаголовок ровно такой же громкий, как на узловом «Как проходит сделка», и при этом он ЯРЧЕ самого заголовка - 16.7:1 против серебряного градиента, который к концу строки уходит в #98A2AE. ВТОРАЯ ЧАСТЬ ТОГО ЖЕ. Тот же прибор: сетка .guards - шесть плиток 373x220, уникальных размеров РОВНО ОДИН. Это единственная на странице решётка, где все элементы совпадают до пикселя (у .whyus__grid их три, у .cards - два). Раздел, который объясняет, что именно защищает человека, подан как шесть одинаковых квадратов, то есть ранга внутри нет вовсе. ЧЕГО ЗДЕСЬ НЕТ И ПОЧЕМУ: - скругление 6px не тронуто ни в одном месте: канон агентства от 17.08 («скругление плашек: 6px»), а не небрежность генератора; - серебро заголовков, перелив кнопок, круглый помощник, верхняя кромка и рамки девяти разделов не тронуты: принято владельцем; - надзаголовок узловых разделов (#how, #safety) оставлен в полной яркости: ровно там он и должен быть громким; - ни одной новой анимации и ни одного нового перехода. ========================================================================= */ /* --------------------------------------------------------------------------- 1. СЛУЖЕБНЫЕ РАЗДЕЛЫ: НАДЗАГОЛОВОК СНЯТ ПОЧЕМУ ИМЕННО ЗДЕСЬ, А НЕ ВЕЗДЕ. Я выписал все девять пар «надзаголовок -> заголовок» и проверил, что надзаголовок добавляет: #services «Не только обмен» -> «Дополнительные услуги» повтор #reviews «Отзывы и кейсы» -> «Отзывов и разборов сделок нет» повтор #faq «FAQ» -> «Вопросы и ответы» повтор В этих трёх надзаголовок не несёт НИ ОДНОГО слова, которого нет в заголовке строкой ниже. Он не рубрика, он заполненный слот шаблона: место есть, значит надо что-то вписать. Ровно этот приём выдаёт машинную страницу. Показательно, что у всех трёх линейка УЖЕ снята предыдущим исполнителем как врущая о ранге - надзаголовок врал о том же самом, просто остался. ЧТО ТЕРЯЕТСЯ. Ничего: display:none убирает узел и из дерева доступности тоже, а дублирующая рубрика над заголовком скринридеру только мешает. Шапка становится «заголовок + лид», как и положено служебному разделу. ЧЕГО Я НЕ СДЕЛАЛ И ГОВОРЮ ПРЯМО. По краткому канону из skill-a надзаголовок над заголовком запрещён вообще, все девять. Я снял только доказуемо избыточные три: надзаголовок вместе с линейкой 220x3 - это подпись раздела из утверждённого PDF агентства, и снос её со всей страницы это решение по канону, а не полировка. Вынесено в отчёт словами. ------------------------------------------------------------------------- */ #services .section__head > .eyebrow, #reviews .section__head > .eyebrow, #faq .section__head > .eyebrow{ display: none; } /* Надзаголовок стоял НАД заголовком, и его высота держала верхний отступ. Убрав узел, возвращаю тот же воздух заголовку, иначе шапка подпрыгивает к рамке раздела. ЗАМЕР ДО: .section__head h2 имеет margin-top 22px, сам надзаголовок 12.5px при line-height 1, итого над буквой было 34.5px. Ставлю 34px: разница в полпикселя не видна, а число целое и не тащит за собой дробный ритм. */ #services .section__head > h2, #reviews .section__head > h2, #faq .section__head > h2{ margin-top: 34px; } /* --------------------------------------------------------------------------- 2. ОПОРНЫЕ РАЗДЕЛЫ: НАДЗАГОЛОВОК ПЕРЕСТАЁТ СПОРИТЬ С ЗАГОЛОВКОМ ЗАМЕР ДО: rgb(233,238,244) на полотне #0C0D11 = 16.7:1 по WCAG. Заголовок под ним залит серебром 158deg #FFFFFF -> #98A2AE, то есть к правому краю строки он темнее надзаголовка. Получается перевёрнутая иерархия: самая мелкая строка в шапке - самая яркая. ЧТО СДЕЛАНО: цвет взят НЕ новый, а собственный токен страницы --muted (rgba(255,255,255,.62), в шапке палитры подписан как «7.3:1 - подписи»). Надзаголовок и есть подпись. Новых значений в систему не добавлено ни одного, порог владельца 4.5:1 держится с запасом втрое. ПОЧЕМУ НЕ ТРОНУТЫ #how и #safety: это узловые разделы, у них кегль 37.72 и полная линейка 220x3. Там надзаголовок мельче и тише заголовка по факту, и гасить его значило бы сравнять ранг обратно, то есть сделать ту же ошибку с другого конца. ⚠️ ЗНАК В НАДЗАГОЛОВКЕ #offline РИСКА НЕ НЕСЁТ: у .ico обводка задана через stroke:url(#aeNeon), это ссылка на градиент в defs, а не currentColor, поэтому смена color родителя его не трогает. Проверено на живой странице. */ #why .section__head > .eyebrow, #diff .section__head > .eyebrow, #options .section__head > .eyebrow, #offline .section__head > .eyebrow{ color: var(--muted); } /* --------------------------------------------------------------------------- 3. «ЧТО ИМЕННО ВАС ЗАЩИЩАЕТ»: ШЕСТЬ РАВНЫХ ПЛИТОК -> ДВЕ ГЛАВНЫЕ И ЧЕТЫРЕ ОПОРНЫЕ ЭТО НЕ МОЙ ВКУС, А ДОВЕДЕНИЕ ЧУЖОГО РЕШЕНИЯ. В разметке ранг УЖЕ расставлен и уже виден в исходнике: у первых двух карточек знак класса .ico--neon (акцентный градиент #4FC4E9), у остальных четырёх .ico--metal. Автор блока решил, что «крипта заморожена» и «сделку ведёт живой менеджер» - главные, но это решение живёт только в обводке знака 24x24 и больше нигде. Те же две мысли вынесены в h1 первого экрана и в первые две карточки .whyus__grid, то есть вся страница считает их опорными. Раскладка их не различает. ЧТО СДЕЛАНО: первые две карточки занимают строку целиком. Знак и заголовок у них уже стоят в одну строку (deshablon-cards.css), поэтому широкая карточка не разваливается: меняется только длина строки текста. grid-column: 1 / -1 выбран вместо span 2 сознательно: у .guards в styles.css три состояния колонок (3 / 2 / 1 на разных порогах), и «до последней линии» верно во всех трёх, а span 2 сломался бы на одноколоночном телефоне. ------------------------------------------------------------------------- */ .guards > .guard:nth-child(-n+2){ grid-column: 1 / -1; } /* Длина строки. Без этого абзац растягивается на всю ширину центра и читается хуже, чем в узкой колонке, то есть правка ухудшила бы ровно то, ради чего делалась. ЗАМЕР: центр 820px, карточка за вычетом полей и колонки знака даёт около 700px; при кегле 17px это ~86 знаков в строке при норме 65-75. ПОЧЕМУ 62ch, А НЕ 66ch. Число не моё: в mobile.css уже лежит замер на одиннадцати блоках - единица ch это ширина знака «0», и у подключённых гарнитур ноль ШИРЕ средней кириллической буквы в 1.15-1.21 раза, поэтому 66ch дают 78-79 реальных знаков, то есть выше нормы. Обратный пересчёт на ровно 75 знаков дал 61.9-65.3, безопасное единое значение - 62ch. Первая редакция этого файла стояла на 66ch: я поставил её по общему правилу «65-75ch», не сверившись с уже измеренным в репозитории, и это была та же ошибка, что и весь остальной шаблон - взять значение из головы вместо прибора. Держу 62ch, чтобы в проекте не появилось двух разных норм строки. Воздух справа при этом и делает карточку главной, а не просто широкой. */ .guards > .guard:nth-child(-n+2) > p{ max-width: 62ch; } /* На одноколоночной раскладке (телефон) первые две карточки и так занимают всю ширину, ограничитель там лишний и только сузил бы текст. */ @media (max-width: 720px){ .guards > .guard:nth-child(-n+2) > p{ max-width: none; } } /* --------------------------------------------------------------------------- 4. СНИЖЕННОЕ ДВИЖЕНИЕ Файл не добавляет ни одной анимации и ни одного перехода: он меняет цвет, видимость, отступ и число колонок. Блок стоит как гарантия на будущее. 🔴 ЗДЕСЬ НАМЕРЕННО НЕТ animation:none. Серебро заголовков - заливка градиентом через background-clip; если её когда-нибудь заведут ключевыми кадрами, глухое animation:none оставило бы заголовок в состоянии ДО анимации и могло бы погасить его совсем. Гасить переходы безопасно всегда, гасить анимацию вслепую - нет. */ @media (prefers-reduced-motion: reduce){ #services .section__head > h2, #reviews .section__head > h2, #faq .section__head > h2, #why .section__head > .eyebrow, #diff .section__head > .eyebrow, #options .section__head > .eyebrow, #offline .section__head > .eyebrow, .guards > .guard:nth-child(-n+2){ transition: none; } }