/* ========================================================================= Сайт поставщика промышленных линий. Пересборка 03.09.2026 — вторая. Что изменилось против первой сборки и почему. 1. Секций-плашек больше нет. Раньше каждый блок красился в свой цвет, и на стыках возникали чёткие горизонтальные границы — заказчик попросил убрать их и вести фон через всю страницу. Теперь цвет меняется внутри верхнего отступа секции (класс .tone): секция начинается цветом предыдущей и приходит к своему за --fade. Соседние блоки делят граничный цвет ровно, поэтому шва нет нигде. Почему не один градиент на всю страницу: проценты в градиенте считаются от высоты документа, а она разная на 1440 и на 320. Кобальт уехал бы на текст, свёрстанный под светлый фон, и контраст поплыл бы молча. Здесь же под каждым абзацем всегда известный сплошной цвет, и его можно посчитать заранее. 2. Шапка больше не зависит от скрипта. Раньше она была прозрачной и чернела наблюдателем; когда скрипт не отрабатывал, светлые ссылки ложились на светлую секцию и читались как пустое место — ровно это заказчик и увидел в Firefox. Теперь шапка всегда графитовая: на первом экране и в подвале фон под ней тот же графит, поэтому отдельной плашки не видно, а к середине страницы она проступает сама по мере того, как подложка светлеет. Тот же эффект без единой строки JS и без состояния, которое может не включиться. 3. Края фото растворяются маской, а не упираются в цвет секции. Маска разложена по двум вложенным элементам (обёртка гасит верх и низ, картинка — внутренний край), чтобы не зависеть от mask-composite, который в Safari называется иначе. Гарнитура: Geologica, переменная, SIL Open Font License 1.1. Одна на всё, как требует бриф (1.5). Предыдущая сборка держала IBM Plex Sans плюс IBM Plex Mono — формально это две гарнитуры, то есть нарушение того же пункта. Номера моделей теперь набраны тем же лицом: табличные цифры, увеличенный трекинг, вес 600. ========================================================================= */ /* Переменная: один файл на весь диапазон весов 100–900. Кириллица — отдельным подмножеством, она же предзагружается: страница вся русская. */ @font-face { font-family: "Geologica"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geologica-cyrillic-var.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geologica-cyrillic-ext-var.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geologica-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geologica-latin-ext-var.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================= ПАЛИТРА Пять хексов из брифа (1.5) заданы заказчиком и не тронуты. Рядом с ними выведены производные — измерением, а не вкусом: пиннутый #6B7280 даёт на тёплой бумаге 4.35:1, на графите 3.71:1, а текст на #C2600F не добирает ни белым (4.24), ни графитовым (4.18). Для мелкого текста это провал WCAG AA. Производные — тот же тон, доведённый до читаемости, а не второй акцент. Расчёт — docs/дизайн.md. ========================================================================= */ :root { /* из брифа */ --ink: #16191D; /* графитовый чёрный */ --paper: #F6F4F0; /* тёплый paper, не стерильно-белый */ --steel: #6B7280; /* холодная сталь — там, где размера хватает */ --amber: #C2600F; /* оксид/амбер — единственный акцент */ --cobalt: #22344F; /* ровно один блок: ВЭД и логистика */ /* производные, посчитанные */ --steel-2: #5F6672; /* мелкий вторичный на paper — 5.27:1 */ --steel-lt: #838B98; /* мелкий вторичный на графите — 5.16:1 */ --steel-cb: #9FB0C6; /* мелкий вторичный на кобальте — 5.67:1, тон из той же гущи */ --amber-lt: #E08B3A; /* акцент буквами на тёмном: 6.68:1 графит, 4.72:1 кобальт */ --amber-dk: #AD5508; /* акцент буквами на paper — 4.69:1 */ --on-amber: #0B0D10; /* надпись на амберной заливке — 4.58:1 */ --rule: #DDD8D1; /* волосяная на paper */ --rule-dk: #2C3037; /* волосяная на графите */ --rule-cb: #34496A; /* волосяная на кобальте */ --field: #1D2126; /* поле ввода на графите */ --wrap: 1240px; --pad: 24px; --head-h: 68px; /* Длина цветового перехода. Верхний отступ .tone всегда больше неё: текст не должен начинаться, пока цвет ещё едет. */ --fade: clamp(200px, 22vw, 340px); /* Отступ до края текстового контейнера. Считается от 100% секции, а не от 100vw: vw включает ширину полосы прокрутки (ПРАВИЛА 6.2). */ --gutter: max(var(--pad), (100% - var(--wrap)) / 2); /* Разрешает переход block-size к auto. Нужно только аккордеону; где не поддержано — игнорируется, и он открывается мгновенно. */ interpolate-size: allow-keywords; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); /* за границами body — тот же графит */ } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.62 "Geologica", system-ui, "Segoe UI", Roboto, Arial, sans-serif; font-synthesis-weight: none; /* веса настоящие, подделывать нечего */ } img, svg { display: block; max-width: 100%; } /* Вес 300, а не 800 — правка 07.09.2026, разбор docs/eco-review/. Иерархия набирается размером и трекингом, жира в ней нет нигде. Гарнитура переменная, ось 100–900 уже загружена: 300 не стоит ни одного лишнего байта. Бриф весов не задавал — только хексы, ноль радиуса и одну гарнитуру, поэтому спрашивать было нечего. Трекинг −0.03em здесь базовый: он идёт и на мелкие h2 (контакты, 22–30px), где −0.04em уже слипается. Дисплейные размеры добирают свой трекинг поштучно ниже. */ h1, h2, h3 { margin: 0; font-weight: 300; line-height: 1.06; letter-spacing: -0.03em; } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } b, strong { font-weight: 500; } ul { margin: 0; padding: 0; list-style: none; } .wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); } /* 500, а не 400, как остальной текст: надпись стоит на амберной заливке, где контраст ровно 4.58:1 — в четырёх сотых от нормы. Тонкое начертание на пределе контраста читается хуже, чем говорит цифра. Тот же довод у .btn, .tag и .route__flag — все они сидят на амбере. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--amber); color: var(--on-amber); font-weight: 500; text-decoration: none; } .skip:focus { left: 0; } /* ========================================================================= ПОДЛОЖКА --from — цвет, с которого секция начинается (он же цвет низа соседа сверху). --to — цвет, к которому она приходит и которым живёт дальше. Совпадение --from с низом предыдущего блока и есть отсутствие шва. ========================================================================= */ .tone { background: linear-gradient(180deg, var(--from) 0, var(--to) var(--fade), var(--to) 100%); padding-top: calc(var(--fade) + clamp(24px, 4vw, 64px)); padding-bottom: clamp(64px, 8vw, 120px); } .tone--ink-paper { --from: var(--ink); --to: var(--paper); } .tone--paper-cobalt { --from: var(--paper); --to: var(--cobalt); color: var(--paper); } .tone--cobalt-paper { --from: var(--cobalt); --to: var(--paper); } .tone--paper-ink { --from: var(--paper); --to: var(--ink); color: var(--paper); } /* ========================================================================= ШАПКА Всегда графитовая — см. пункт 2 в шапке файла. Тень с настоящим смещением и размытием: над графитом её не видно, над paper она и есть граница. ========================================================================= */ .head { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--head-h); background: var(--ink); color: var(--paper); box-shadow: 0 12px 32px -22px rgba(11, 13, 16, .9); } .head__in { height: 100%; display: flex; align-items: center; gap: 28px; } .head__mark { display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: inherit; margin-right: auto; } /* Логотип встал на место набранного названия (09.09.2026). Высота задана в px, ширина — auto: холст SVG обрезан по знаку, поэтому 26px здесь означают 26px самого знака, а не рамки вокруг него. Почему не высота в em: знак не должен ехать вместе с кеглем интерфейса. Ширина при 26px выходит ~119px — это меньше, чем занимало название в две строки, и ряд шапки не перевёрстывается. Правило .head__name удалено вместе с разметкой, а не оставлено про запас: класса на странице больше нет, а мёртвый селектор в следующий раз прочтут как «используется где-то ещё». align-self обязателен, и это не перестраховка. .head__mark — флекс-колонка, у неё align-items по умолчанию stretch, а stretch у картинки перебивает width:auto: знак растягивался по ширине подписи под ним, 199px вместо 119, и ехал по горизонтали. Замечено измерением; на глаз это читалось как «логотип просто широкий». */ .head__logo { display: block; height: 26px; width: auto; align-self: flex-start; } .head__kind { font-size: 12px; color: var(--steel-lt); letter-spacing: .02em; } /* На узких первым уходит подпись под знаком, а не сам знак: она дублирует то, что и так сказано в H1 первого экрана, а знак — единственное место, где на маленьком экране написано, чей это сайт. */ @media (max-width: 560px) { .head__logo { height: 22px; } .head__kind { display: none; } /* Высоту цели до этого набирали две строки — знак и подпись под ним. Подпись здесь скрыта, и ссылка «наверх» осталась целью в 22px: ровно половина от нужных 44. Добираем полем, а не увеличением знака, потому что знак и так на пределе для этой ширины. Шапка в 68px это вмещает. */ .head__mark { padding-block: 11px; } } /* Прописные с положительным трекингом — вокабуляр шапки той эстетики, к которой тянемся (разбор, правка 5). Кегль падает с 15 до 13, но цель по высоте держит padding, а не размер буквы: 13 + 2×15 = 43, плюс граница = 44. Наведение больше не красит: цвет в этой системе не обозначает состояние, его обозначает линия. */ .head__nav { display: flex; gap: 24px; } .head__nav a { color: var(--paper); text-decoration: none; font-size: 13px; text-transform: uppercase; letter-spacing: .018em; padding: 15px 0; /* до 44px по высоте */ border-bottom: 1px solid transparent; transition: border-color .18s ease; } .head__nav a:hover { border-bottom-color: var(--paper); } /* Объявления кнопки шапки лежат ниже, сразу за .btn: у .btn стоит сокращение font, и при равной специфичности оно перебивало здешний font-size — кнопка молча ехала на 16px вместо заданного. */ /* .head__in в селекторе не для красоты: .btn ниже по файлу задаёт display: inline-flex с той же специфичностью и без этого перебивает скрытие — кнопка вылезала на 320px. */ @media (max-width: 1080px) { .head__in .head__cta { display: none; } } @media (max-width: 860px) { .head__nav { display: none; } } /* ========================================================================= КНОПКИ ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 26px; font: 500 16px/1.2 "Geologica", system-ui, sans-serif; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease; } .btn--solid { background: var(--amber); color: var(--on-amber); } .btn--solid:hover { background: var(--amber-lt); } /* Рамка полной яркости вместо приглушённого #3A4048, и наведение гасит непрозрачность, а не подменяет цвет. Заливка кнопки осталась амберной: убирать её — вопрос к заказчику (docs/eco-review/, вопрос 1), а не моя правка. */ .btn--ghost { background: transparent; color: var(--paper); border-color: var(--paper); } .btn--ghost:hover { opacity: .65; } .head__cta { font-size: 13px; text-transform: uppercase; letter-spacing: .018em; padding: 10px 16px; min-height: 40px; } /* ========================================================================= ПЕРВЫЙ ЭКРАН Низ кадра уходит ровно в --ink: этим же цветом начинается следующая секция, поэтому границы между ними нет. ========================================================================= */ /* У кадра появилось нижнее ребро — правка 08.09.2026. Раньше нижний градиент доезжал до сплошного #16191D, то есть на последних процентах высоты фотографии не оставалось вовсе. Кадр не кончался, а растворялся, и нижней границы у него не было. Сначала я хотел вынести текст под кадр на сплошной графит. Это нарушало бриф 1.5 сразу в трёх местах: «фото на весь экран», «градиент снизу для читаемости текста», «заголовок+подзаголовок+ одна кнопка ПОВЕРХ фото». Отменено. Сделано иначе, внутри брифа: затемнение осталось и осталось плотным ровно в той полосе, где стоит текст, но у самого низа отпускает до .30 — и последние ~90px кадр виден, после чего кончается прямым резом. Читаемость: под текстом .93 поверх кадра со средней светимостью 32% даёт около 13:1 для белого. Шва не возникает — графит под кадром тот же, которым начинается следующая секция. */ .hero { position: relative; min-height: min(90svh, 860px); display: flex; align-items: flex-end; background: var(--ink); color: var(--paper); overflow: hidden; } /* `isolation` — не украшение, а страховка от расхождения движков. Слой `.hero__sun` работает в режиме screen; без изолированной группы он смешивается с тем, что лежит ЗА `.hero__pic`, и результат зависит от того, как браузер собрал стек. Здесь группа задана явно: свет складывается ровно с кадром под ним, и в Firefox то же, что в Chrome. */ .hero__pic { position: absolute; inset: 0; isolation: isolate; } .hero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; } /* ---- Солнце из-за тучи ---------------------------------------------- Заказчик 08.09.2026: «солнышко из-за тучи немного светит и в цех попадает свет». Сделано светом, а не новым кадром: генерировать цех заново ради облака — это ещё один прогон и риск увести композицию, которая уже согласована. Два слоя под один источник. Первый — засветка фонарей по верху (в кадре они идут вдоль всей крыши, ярче слева от центра). Второй — пятно, в которое этот свет ложится на бетон: без него засветка висит в воздухе и читается как дефект экспозиции, а не как солнце. `screen` вместо `opacity`: тёмный графит цеха от screen светлеет, а уже светлые фонари не выбиваются в плоское белое. Крайние кадры цикла — .10, а не 0. Ноль означал бы, что туча закрыла солнце наглухо, и кадр на несколько секунд становится мёртвым. Кроме того, при `prefers-reduced-motion` анимация схлопывается в состояние 100% (см. блок ниже) — то есть в .10, слабую засветку, а не в чёрное. 26 секунд и ease-in-out: за время чтения первого экрана проходит меньше одного цикла. Быстрее — и это уже мигание, которое бриф (раздел 6) запрещает прямо. */ .hero__sun { position: absolute; inset: 0; pointer-events: none; /* Правила .hero__pic img выше уже дают ему width/height 100%, object-fit и object-position — кадрирование обоих слоёв совпадает само, без второй копии этих значений, которую пришлось бы синхронизировать руками при каждой правке кадрирования. */ mix-blend-mode: screen; /* Тёплый сдвиг только у прибавки света, не у всего кадра: солнце желтее рассеянного неба, но графит цеха остаётся графитом. */ filter: sepia(.32) saturate(1.1) brightness(1.04); /* Маска — где именно прибавляется свет. Сверху фонари по всей крыше, снизу слева пятно на бетоне, куда этот свет ложится. Между ними провал: без него слой работает как общая засветка экспозиции. */ -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.55) 26%, rgba(0,0,0,.12) 52%, rgba(0,0,0,0) 72%), radial-gradient(42% 30% at 24% 82%, #000 0, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.55) 26%, rgba(0,0,0,.12) 52%, rgba(0,0,0,0) 72%), radial-gradient(42% 30% at 24% 82%, #000 0, rgba(0,0,0,0) 100%); -webkit-mask-composite: source-over; mask-composite: add; opacity: .12; animation: heroSun 26s ease-in-out infinite; } @keyframes heroSun { 0%, 100% { opacity: .12; } 46% { opacity: .90; } 62% { opacity: .74; } } .hero__pic::after { content: ""; position: absolute; inset: 0; background: /* Полоса под шапку: без неё светлые ссылки ложатся на фонари цеха. */ linear-gradient(to bottom, rgba(22,25,29,.86) 0, rgba(22,25,29,0) 170px), /* Подложка под текст. Ключевая величина — первая: .30 у самого низа вместо прежней сплошной заливки. Она и есть ребро. */ linear-gradient(to top, rgba(22,25,29,.30) 0, rgba(22,25,29,.93) 90px, rgba(22,25,29,.93) 34%, rgba(22,25,29,.55) 62%, rgba(22,25,29,.10) 100%); } .hero__in { position: relative; z-index: 1; width: 100%; padding-block: clamp(56px, 9vw, 104px) clamp(56px, 8vw, 96px); } /* Потолок поднят с 68 до 92px (разбор, правка 2). Прежний clamp упирался в предел уже на 1260px, то есть на большинстве экранов заголовок был один и тот же и стоял в пустом ряду. Нижняя граница не тронута: на 320px всё как было. Мера выросла с 17 до 20ch — на 92px семнадцать знаков дают пять строк, и заголовок перестаёт помещаться в 90svh. */ .hero__h1 { max-width: 20ch; font-size: clamp(36px, 7.6vw, 92px); letter-spacing: -0.04em; line-height: 0.98; } .hero__sub { margin: clamp(20px, 2.6vw, 32px) 0 clamp(28px, 3.4vw, 40px); max-width: 46ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: #D6D2CC; text-wrap: pretty; } /* .hero__note и .band__mark удалены 08.09.2026 вместе с подписями «оформительский кадр» в разметке. Правила снесены, а не оставлены про запас: неиспользуемый селектор через месяц читается как рабочий и провоцирует вернуть подпись мимо решения. Раскрытие живёт в `docs/провенанс-изображений.md` — на странице его больше нет. */ /* ========================================================================= ЛИД И УТП графит → paper ========================================================================= */ .lede__lead { max-width: 24ch; font-size: clamp(28px, 5vw, 64px); font-weight: 300; letter-spacing: -0.038em; line-height: 1.04; margin-bottom: clamp(24px, 3vw, 36px); } .lede__body { max-width: 62ch; color: var(--steel-2); font-size: 18px; } .lede__body p { text-wrap: pretty; } .usp { margin-top: clamp(44px, 6vw, 76px); display: grid; gap: clamp(22px, 3vw, 34px) clamp(32px, 5vw, 72px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); } /* Тире — не украшение: оно отмечает начало пункта там, где снят маркер списка. Плашек и рамок вокруг пунктов бриф не допускает. */ .usp li { position: relative; padding-left: 26px; max-width: 46ch; text-wrap: pretty; } .usp li::before { content: ""; position: absolute; left: 0; top: .68em; width: 14px; height: 2px; background: var(--amber); } /* ========================================================================= ВЭД И ЛОГИСТИКА paper → кобальт Единственное место, где кобальт вообще появляется (бриф 1.5). ========================================================================= */ .ved__h2 { font-size: clamp(30px, 5.6vw, 72px); letter-spacing: -0.038em; max-width: 18ch; } .ved__cols { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: clamp(20px, 3vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); color: var(--steel-cb); } .ved__cols p { max-width: 54ch; text-wrap: pretty; } .ved__cols b { color: var(--paper); } /* ---- Схема маршрута: единственная анимация на странице ---- */ .route { margin: clamp(52px, 7vw, 92px) 0 0; } .route__cap { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-cb); margin-bottom: clamp(20px, 3vw, 32px); } .route__rail { width: 100%; height: auto; overflow: visible; } .route__rail--v { display: none; } .route__track { stroke: var(--rule-cb); stroke-width: 2; fill: none; } /* pathLength="100" в разметке: длина пути известна стилям, и скрипту не нужно её мерить через getTotalLength. Состояние по умолчанию — линия нарисована, поэтому без JS схема полноценна. Прячет её только класс .route--armed, который ставит сам скрипт — там же, где заводит наблюдатель. Иначе на любой ветке, где до наблюдателя не дошло, схема осталась бы пустой навсегда. */ .route__line { stroke: var(--amber-lt); stroke-width: 2; fill: none; stroke-dasharray: 100; stroke-dashoffset: 0; } .route--armed .route__line { stroke-dashoffset: 100; } .route--armed.is-drawn .route__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1); } .route--armed .route__mark { opacity: 0; } .route--armed.is-drawn .route__mark { opacity: 1; transition: opacity .5s ease var(--md, 0ms); } .route__node { fill: var(--paper); } .route__node--check { fill: var(--amber-lt); } .route__lab { fill: var(--paper); font-size: 17px; font-weight: 400; letter-spacing: -0.01em; dominant-baseline: hanging; } .route__sub { fill: var(--steel-cb); font-size: 14px; dominant-baseline: hanging; } /* 500: амбер на кобальте даёт 4.72:1 — как и на плашке, у самой нормы. */ .route__flag { fill: var(--amber-lt); font-size: 14px; font-weight: 500; } @media (max-width: 860px) { .route__rail--h { display: none; } .route__rail--v { display: block; } } /* ========================================================================= НАПРАВЛЕНИЯ кобальт → paper, дальше paper до конца FAQ ========================================================================= */ .dir + .dir, .dirs > .bret, .dirs > .faq { margin-top: clamp(72px, 9vw, 132px); } .band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: clamp(420px, 52vw, 620px); } .band__pic { position: relative; } /* У кадра есть ребро — правка 08.09.2026. Здесь стояли две маски: по горизонтали кадр гас от 42% к 94%, по вертикали — по 15% сверху и снизу. На 1060px это съедало 273px из 525 по ширине и по 113px из 751 по высоте: больше половины блока было градиентом в ничто, и фотография читалась как пятно, а не как снимок. Маски ставились из осторожности после того, как заказчик убрал границы между секциями. Но это разные задачи: полосы направлений лежат ВНУТРИ одной непрерывной секции, слева и справа от кадра один и тот же paper, и ребро у фотографии стыка секций не создаёт. В самом docs/дизайн.md всё это время написано «фото уходит в край без отступа и без рамки» — маска противоречила собственной записи. */ .band__pic-in { display: block; position: absolute; inset: 0; } /* video в том же правиле, что и img: скрипт подменяет один элемент другим (14.09.2026, полоса «гибкая упаковка»), и кадрирование обязано остаться тем же. Разведи их по двум правилам — и в момент подмены полоса дёрнется. `display: block` нужен именно видео: у него по умолчанию inline, и снизу оставалось бы четыре пикселя под базовую линию строки. */ .band__pic img, .band__pic video { width: 100%; height: 100%; object-fit: cover; display: block; } .band__text { display: flex; align-items: center; padding-block: clamp(40px, 5vw, 72px); padding-inline: clamp(28px, 4vw, 64px) var(--gutter); } .band--flip .band__pic { order: 2; } .band--flip .band__text { order: 1; justify-content: flex-end; padding-inline: var(--gutter) clamp(28px, 4vw, 64px); } .band__in { max-width: 44rem; } .band__h2 { font-size: clamp(26px, 4.4vw, 56px); letter-spacing: -0.036em; max-width: 16ch; } .band__in > p { margin-top: clamp(16px, 2vw, 24px); margin-bottom: 0; color: var(--steel-2); max-width: 52ch; text-wrap: pretty; } .band__in b { color: var(--ink); } .note { font-size: 15px; } /* ---- Спецификация ---- Единственная линия, которую бриф разрешает: разделитель параметров, несущий информацию, а не декоративная полоска. */ .spec { margin-top: clamp(24px, 3vw, 36px); } .spec__row { display: grid; gap: 4px 20px; align-items: baseline; grid-template-columns: minmax(0, 1fr) auto; padding: 13px 0; border-top: 1px solid var(--rule); } .spec__row:last-child { border-bottom: 1px solid var(--rule); } .spec__part { font-size: 15px; color: var(--steel-2); } /* Номер модели различается не жиром, а трекингом, табличными цифрами и правым выключением — этого хватает, чтобы строка читалась как данные. */ .spec__model { font-weight: 400; font-size: 15px; letter-spacing: .03em; font-variant-numeric: tabular-nums; text-align: right; } .spec__maker { grid-column: 1 / -1; font-size: 13px; color: var(--steel-2); } .spec__maker i { font-style: normal; opacity: .8; } .spec__maker i::before { content: " · "; } /* ========================================================================= ГАЛЕРЕЯ «ДОСТУПНО К ПОСТАВКЕ» Свободный masonry колонками: без рамок, теней и плашек (бриф 1.5). ========================================================================= */ /* Белая полоса под галереей — 08.09.2026, и это ровно то решение, которое записано в docs/дизайн.md с 03.09 и не было выполнено. Присланные вырезки лежат на чистом 255,255,255: у двенадцати из четырнадцати периметр белый на 100%. Тёплая бумага — 246,244,240. Разница 9/11/15 по каналам, и она холодная против тёплой, поэтому вокруг каждого станка читается белый прямоугольник. Это и есть «рамки», которые видит заказчик: не рамка в стилях, а подложка самого файла. Перекрашивать белое в файлах пробовал — заливкой от краёв. Не годится: у станков есть белые панели, соединённые с фоном, заливка утекает в них и оставляет рваный силуэт (на GH-D740 перекрасилось 42% кадра). Полоса решает то же самое без потерь и одинаково во всех браузерах. Полоса полноширинная, поэтому она отдельным элементом в разметке, а не псевдоэлементом с 100vw: vw включает ширину полосы прокрутки (ПРАВИЛА 6.2). */ .galband { background: #fff; margin-top: clamp(48px, 6vw, 80px); padding-block: clamp(40px, 5vw, 72px); } .gal__cap { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-2); margin-bottom: clamp(20px, 2.6vw, 30px); } .gal__list { columns: 3; column-gap: clamp(24px, 3vw, 44px); } .gal__item { break-inside: avoid; margin-bottom: clamp(28px, 3.4vw, 48px); } .gal__item figure { margin: 0; } .gal__item img { width: 100%; height: auto; transition: transform .3s cubic-bezier(.22,.61,.36,1), filter .3s ease; } .gal__item figure:hover img { transform: scale(1.02); filter: brightness(1.04); } .gal__item figcaption { margin-top: 10px; font-size: 14px; color: var(--steel-2); } .gal__item figcaption b { display: block; color: var(--ink); letter-spacing: .03em; font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .gal__list { columns: 2; } } @media (max-width: 560px) { .gal__list { columns: 1; } } /* ========================================================================= BRETTING — «визуально легче остальных» (бриф, раздел 5) Тише здесь означает меньше, а не темнее: узкая колонка, без фото. ========================================================================= */ .bret__in { max-width: 46rem; } .tag { display: inline-block; margin: 0 0 16px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-dk); font-weight: 500; } .bret__h2 { font-size: clamp(24px, 2.8vw, 34px); } .bret__in > p { margin-top: 18px; margin-bottom: 0; color: var(--steel-2); max-width: 58ch; text-wrap: pretty; } .bret__caveat { font-size: 15px; } /* ========================================================================= FAQ — нативный
Скрипт здесь больше не участвует: раскрытие, клавиатура и роли — браузерные. Атрибут name делает список взаимоисключающим без JS, а где он не поддержан, пункты просто открываются независимо. ========================================================================= */ .faq__in { max-width: 52rem; } .faq > .wrap > .faq__in > h2 { font-size: clamp(26px, 3.8vw, 48px); margin-bottom: clamp(24px, 3vw, 36px); } .faq__item { border-top: 1px solid var(--rule); } .faq__item:last-of-type { border-bottom: 1px solid var(--rule); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; min-height: 44px; font-size: clamp(17px, 1.6vw, 19px); font-weight: 400; letter-spacing: -0.015em; cursor: pointer; list-style: none; transition: color .18s ease; } .faq__q::-webkit-details-marker { display: none; } /* Наведение больше не красит в акцент: состояние в этой системе показывает светимость, а не цвет. Вопрос и так самый тёмный текст в блоке — на наведении он просто становится чернее фона вокруг. */ .faq__q:hover { color: var(--on-amber); } /* Плюс одним элементом: две полоски-градиента в одном фоне. Двумя псевдоэлементами он не собирается — gap у flex-контейнера разводит их в стороны, и вместо плюса получается «| —». */ /* Плюс перекрашен из амбера в сталь (разбор, правка 3): пять цветных плюсов в списке — это уже не акцент, а второй основной цвет. Как графика #6B7280 на бумаге даёт 4.35:1 при норме 3:1 для нетекстовых элементов. */ .faq__q::after { content: ""; flex: none; width: 14px; height: 14px; background-image: linear-gradient(var(--steel), var(--steel)), linear-gradient(var(--steel), var(--steel)); background-repeat: no-repeat; background-position: center, center; background-size: 14px 2px, 2px 14px; transition: background-size .25s ease; } .faq__item[open] .faq__q::after { background-size: 14px 2px, 2px 0; } .faq__a { padding-bottom: 24px; max-width: 60ch; color: var(--steel-2); } /* Плавное раскрытие только там, где работает вся связка целиком. Где нет —
открывается мгновенно; это штатное поведение, а не поломка. */ @supports (interpolate-size: allow-keywords) and selector(::details-content) { .faq__item::details-content { block-size: 0; overflow: hidden; content-visibility: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; } .faq__item[open]::details-content { block-size: auto; content-visibility: visible; } } /* Здесь были три правила `.stub` — вид видимой заглушки: серый текст с линией слева, статус «пункт ждёт ответа заказчика», разведённый по трём подложкам ради контраста. Удалены 09.09.2026: заказчик дал последний ответ FAQ, и на странице не осталось ни одной заглушки. Правила снесены, а не оставлены про запас, — по тому же правилу, что и .hero__note, .band__mark и .form__*: мёртвый селектор в этом файле уже дважды прочитывался как «используется где-то ещё». Понадобится снова отметить незаконченное место — брать из git, `git show` по этому коммиту: там и три подложки, и посчитанный контраст (--steel-cb 5.67:1 на кобальте, потому что --steel-lt даёт там 3.65:1 и для 15px не годится). Заново это считать не надо. */ /* ========================================================================= ЗАЯВКА И КОНТАКТЫ paper → графит ========================================================================= */ .cta__in { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; } /* Блок заявки стоит прямо над «Контактами» и обязан делить с ними колонки. Своя сетка в 380px давала две доли, у контактов их четыре по 200px, и вторая доля заявки промахивалась мимо третьей колонки контактов на 5–8px: 991 против 983 на 1920, 520 против 515 на 1000. Восемь пикселей глазом не ловятся — нашла их проверка `src/check_grid.py`, а не я. Но это та же болезнь, от которой 14.09 лечился подвал, только в лёгкой форме, и лечится тем же: общая решётка плюс растяжка на две колонки. Только от 1020px — там, где колонок правда четыре. Ниже сетка заявки остаётся своей: перевод её на 200px-колонки складывал бы доли в столбик уже на 1000px и вернул бы высоту, которую заказчик просил убрать. Порог тот же, что у `.foot__id`, и по той же арифметике. */ @media (min-width: 1020px) { .cta__in { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); column-gap: clamp(28px, 4vw, 56px); } .cta__in > * { grid-column: span 2; } } .cta h2 { font-size: clamp(26px, 3.8vw, 48px); max-width: 16ch; } .cta__say p { margin-top: 20px; color: var(--steel-lt); max-width: 44ch; text-wrap: pretty; } /* Правая колонка блока заявки. 09.09.2026 здесь была форма из шести полей; заказчик решил принимать обращения по телефону и почте, форма снята, а вместе с ней — 29 строк объявлений .form__*, .field__* и своя стрелка у select. Они не оставлены про запас: мёртвый селектор в этом файле уже дважды прочитывался как «используется где-то ещё». Понадобится форма — `git show` по коммиту, которым её убрали. Переменная --field осталась объявленной и больше никем не используется: трогать :root ради одной строки опаснее, чем оставить, — она задавала цвет поля ввода и понадобится ровно в том же виде, если форма вернётся. */ .cta__call { padding-top: 6px; } /* Телефон — единственная амберная заливка в этом блоке, и она теперь не «Отправить заявку», а сам номер: заказчик назвал телефон основным каналом. Номер набран крупнее интерфейсного кегля, потому что его и читают, и диктуют вслух. */ .cta__tel { font-size: clamp(17px, 2vw, 21px); letter-spacing: .01em; } .cta__mail { margin: 20px 0 0; color: var(--steel-lt); } .cta__mail a { color: var(--paper); text-decoration: underline 1px; text-decoration-color: var(--steel); text-underline-offset: 4px; display: inline-block; padding-block: 12px; margin-block: -12px; transition: text-decoration-color .18s ease; } .cta__mail a:hover { text-decoration-color: currentColor; } .cta__note { margin: 22px 0 0; font-size: 13px; color: var(--steel-lt); max-width: 34ch; } .kont { margin-top: clamp(64px, 8vw, 110px); } .kont h2 { font-size: clamp(22px, 2.4vw, 30px); } .kont__grid { margin: clamp(24px, 3vw, 34px) 0 0; display: grid; gap: 24px clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .kont__grid dt { font-size: 13px; color: var(--steel-lt); margin-bottom: 6px; } .kont__grid dd { margin: 0; font-weight: 400; } /* Телефон и почта — первые настоящие ссылки на светлом фоне за всю сборку, и общего правила для в файле нет: до сих пор каждая ссылка красилась в своём блоке. Без этого правила браузер выдал бы синее с подчёркиванием, то есть шестой цвет на странице с пятью. Цвет наследуется, состояние обозначает линия — тот же приём, что в подвале и в шапке. Амбер здесь не тратится: он единственный акцент, а контакты и так стоят под своим заголовком, их не нужно ещё и подсвечивать. padding с равным отрицательным margin — это про палец, а не про вид: строка в 17px даёт цель в 17px, а на телефоне номер и есть то, во что целятся. 17 + 2×14 = 45px по высоте, при этом соседние строки списка не разъезжаются, потому что margin забирает добавленное обратно. */ .kont__grid a { display: inline-block; padding-block: 14px; margin-block: -14px; color: inherit; text-decoration: underline 1px; text-decoration-color: var(--steel); text-underline-offset: 4px; transition: text-decoration-color .18s ease; } .kont__grid a:hover { text-decoration-color: currentColor; } /* .kont .stub удалён 09.09.2026 вместе с абзацем «блок заполняется на финальном этапе»: контакты заполнены, и отметка о незавершённости над готовыми данными читалась бы как «этим телефоном пока не звонить». К концу того же дня ушёл и сам класс .stub — заглушек на странице не осталось ни одной. */ /* ========================================================================= ПОДВАЛ — сплошной графит, тот же, которым кончается секция выше ========================================================================= */ /* Уплотнение 09.09.2026. Заказчик: «слишком широкий и расстояние большое». Замер до правки: подвал 438px при экране 860 — половина обзора под одиннадцать ссылок и три строки текста. Разбор показал, что виноваты не отступы внутри подвала, а два места: 1. НАД подвалом стояло 197px пустого графита: у .tone снизу clamp(64…120px), а у самого подвала сверху ещё clamp(56…88px). Оба поля графитовые, шва между ними не видно, поэтому работа у них ровно одна — отталкивать. Одного хватает. 2. Внутри сетка растягивала три ячейки на всю ширину. Первая колонка выходила 481px при тексте в 347px — 134px пустоты внутри неё, и на столько же расходились списки. Отсюда и решение: не «уменьшить все числа», а убрать одно из двух одинаковых полей и перестать растягивать то, чему ширина не нужна. */ .foot { background: var(--ink); color: var(--paper); padding-top: clamp(30px, 3.2vw, 44px); } /* Поле снизу у последней секции перед подвалом. Обычным .tone-секциям оно нужно — их разделяет смена цвета. Здесь цвет один и тот же по обе стороны стыка, и полноразмерное поле просто дублирует верхнее поле подвала. Правило адресное: остальные .tone не тронуты. */ .close { padding-bottom: clamp(36px, 4vw, 56px); } /* ПРАВКА 14.09.2026. Заказчик: «всё вразнобой и неаккуратно». Он прав, и причина измерима. Вчера, уплотняя подвал, я собрал его на флексе — блоки встали по своей ширине. Но прямо над подвалом, на том же графите, стоит блок «Контакты» на жёсткой сетке. Получилось два разных набора колонок подряд: Контакты 82 · 394 · 705 · 1017 все шириной 257 подвал 82 · 570 · 798 ширины 393 · 167 · 197 Совпадал только левый край. Ни одна колонка подвала не попадала в колонку контактов — глаз это ловит как неряшливость, даже когда не может назвать причину. Сетка теперь общая: объявление колонок скопировано у .kont__grid слово в слово, поэтому при любой ширине экрана обе решётки считают одинаково и расходиться не могут. Раскладка: подпись компании занимает две колонки (её текст в 34ch шире одной), списки — третью и четвёртую. Служебная строка снизу во всю ширину. Это же и стандартная схема подвала: слева кто мы, справа навигация, внизу юридическая строка. */ /* auto-FILL, а не auto-fit — единственное отличие от объявления у .kont__grid, и оно обязательное. auto-fit схлопывает колонки, в которых нет ячеек: у контактов шесть ячеек и все четыре колонки заняты, у подвала три — четвёртая схлопывалась, и оставшиеся разъезжались по освободившемуся месту. На 1000px это давало подвал в 24 · 351 · 679 против контактов в 24 · 270 · 515 · 761. auto-fill пустую колонку сохраняет, поэтому решётки совпадают независимо от того, сколько в них ячеек. */ .foot__in { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 36px clamp(28px, 4vw, 56px); align-items: start; } /* Подпись занимает две колонки — но только там, где колонок правда четыре. Это не украшение: сначала я поставил растяжку безусловно, и замер показал цену — на 900px, где сетка держит три колонки, растянутая подпись сталкивала второй список на новую строку, и подвал вырастал с 320 до 516px. То есть выравнивание чинилось за счёт высоты, которую заказчик просил убрать днём раньше. Порог считается из той же арифметики, что у auto-fit: четыре колонки не уже 200px плюс три зазора по 56px — это 968px содержимого, плюс поля по 24px = 1016px окна. Округлено до 1020. */ .foot__id { grid-column: auto; } @media (min-width: 1020px) { .foot__id { grid-column: span 2; } } /* display:contents, и это выбранное решение, а не упрощение. Сначала я сделал