:root { /* Палитра дизайн-кода не меняется: сталь + сигнальный жёлтый. Добавлена только ОДНА недостающая ступень — «палуба» между грунтом (--bg) и панелью (--surface): без неё вся страница была одним листом #1A1A1A, и шесть секций подряд отличались друг от друга ровно ничем. */ --bg: #1A1A1A; --deck: #212121; --ink: #F2F0EA; --accent: #F5A623; --accent-2: #6B7280; --line: #3A3A3A; --surface: #232323; /* Ступени текста — те же значения, что были рассыпаны по файлу хексами; теперь у них есть имена, и правка идёт в одном месте. */ --ink-2: #D8D5CC; --ink-3: #B8B5AC; --ink-4: #9AA0A6; --maxw: 1180px; --pad: clamp(18px, 5vw, 60px); /* ── ЛЕСТНИЦА КЕГЛЕЙ ───────────────────────────────────────────────────── До этой волны на главной жило 24 разных кегля, из них 14 в диапазоне 11.9–15.6px с шагом 0.5–3 % — то есть неразличимых на глаз, но по-разному ломающих строку. Шесть ступеней ниже покрывают всё, что не заголовок; шаг между соседними 7–14 %, то есть его видно. Корень 17px (см. html). */ --fs-2xs: .72rem; /* 12.2px — маркировка: бейджи, теги, шапки таблиц, лимиты */ --fs-xs: .82rem; /* 13.9px — служебные подписи, крошки, подписи полей */ --fs-sm: .88rem; /* 15.0px — вторичный текст, подписи под графикой, меню */ --fs-md: .94rem; /* 16.0px — плотный текст: таблицы, ответы, контролы */ --fs-base: 1rem; /* 17.0px — основной абзац */ --fs-lg: 1.16rem; /* 19.7px — заголовок карточки */ /* Лид — единственный текстовый кегль, которому нужен clamp: на 320px 19.7px в колонке 284px дают ~14 знаков в строке, то есть лесенку. */ --fs-lead: clamp(1rem, .9rem + .45vw, 1.16rem); --fs-xl: 1.34rem; /* 22.8px — заголовок крупной карточки */ /* ── ВЕРТИКАЛЬНЫЙ РИТМ ─────────────────────────────────────────────────── Было одно значение на все секции (76.8px сверху и снизу на десктопе), из-за чего шесть блоков подряд читались как один бесконечный столбец. */ --sect-y: clamp(44px, 6vw, 84px); --sect-y-lg: clamp(58px, 8.2vw, 116px); --sect-y-sm: clamp(30px, 3.8vw, 52px); --h2-gap: clamp(30px, 3.2vw, 38px); /* заменяет пять рукописных 32/36/38px */ /* Экспоненциальный выкат: движение начинается быстро и садится мягко — ближе к тому, как останавливается тяжёлая механика, чем линейный ease. */ --ease: cubic-bezier(.16, 1, .3, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms; /* Тёмная схема объявлена явно: без color-scheme браузер рисует СВОИ поверхности (список калькулятора — по самому длинному пункту («Автокран — от 4 000 ₽/час»), и его прямоугольник уходил на 490px правее окна. На экран это не попадает (clip), прокрутки не даёт (scrollWidth == clientWidth), но каждый инструмент, который ищет переполнение по геометрии, честно на него ругается — и волна за волной проверяется одна и та же ложная тревога. Контролы и их подписи ставятся в блок: у строчного элемента max-width ничего не ограничивает, а блок берёт ширину обрезанного родителя. Текст при этом никуда не девается — .sr-only и так прячет его clip'ом. */ .sr-only :is(label, select, input, textarea, button) { display: block; max-width: 100%; } /* Волна 35: honeypot-поле формы заявки — скрыто от зрячих пользователей визуально (off-screen, не display:none/type=hidden — так простые боты его не пропускают) и от скринридеров (aria-hidden на обёртке в разметке), но остаётся в DOM. */ .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: #1A1A1A; padding: 12px 20px; font-weight: 700; text-decoration: none; text-transform: uppercase; } .skip-link:focus { left: 8px; top: 8px; } html, body { margin: 0; padding: 0; } /* Якорь не должен приземляться под липкую шапку (70px + 3px рамка). Для h2 статей суммарный отступ остаётся прежним: 76 + 20 = 96px, как в Волне 11. */ /* 106.25% = 17px: x-height обеих новых гарнитур 0.500 em против 0.528 у Roboto Condensed, то есть при 16px строчные были бы на 5,3% мельче прежних. 17 x 0.500 = 8.50px против 16 x 0.528 = 8.45px — оптический размер сохранён. Ни один размер РАСКЛАДКИ в этом файле не задан в rem (проверено грепом), поэтому масштабируется только текст, сетки и отступы не двигаются. */ html { font-size: 106.25%; scroll-padding-top: 76px; } /* Якорей на сайте много (/#uslugi, /#order, оглавление статьи, календарь) — без этого браузер телепортирует страницу и человек теряет место. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* 1.55 вместо 1.6: корневой кегль вырос на 6.25%, и при 1.6 абсолютный шаг строк ушёл бы с 25.6px на 27.2px — заметно рыхлее. 17 x 1.55 = 26.35px, +3% к прежнему шагу, ровно под чуть более широкую строку Scada. */ body { background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.55; } a { color: inherit; } /* Cuprum: ascender+descender = 1.155em, при line-height 1.1 надстрочные знаки (Ё, Й) многострочного капслока садились на предыдущую строку — 1.14. Трекинг .01em -> .02em: гарнитура на 9.2% уже прежней (14.01em против 15.43em на одной и той же строке капслоком), место под разрядку освободилось. */ h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.14; text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; } p { margin: 0; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } .box { background: var(--surface); border: 2px solid var(--line); } /* ── Ритм секций ─────────────────────────────────────────────────────────── Раньше .section давала ровно один отступ, и шесть секций главной шли с одинаковыми 76.8px сверху и снизу на одном фоне. Теперь у ритма три ступени и две «палубы» — фоновая полоса во всю ширину окна, которой отбиваются секции с собственной графикой. Полоса рисуется тенью с clip-path, а не отрицательным margin на 100vw: тень не участвует в раскладке и физически не может дать горизонтальную прокрутку. */ .section { padding-block: var(--sect-y); position: relative; } .section--lg { padding-block: var(--sect-y-lg); } .section--sm { padding-block: var(--sect-y-sm); } .section--band, .band { background: var(--deck); box-shadow: 0 0 0 100vmax var(--deck); clip-path: inset(0 -100vmax); } /* Палубная линия с сигнальным отрезком — начало секции читается как размётка на настиле, а не как «ещё один абзац сверху». Линия привязана к самому заголовку, а не к верхнему краю секции: 27 секций сайта несут инлайновый padding-top (0 / 8px / clamp), и любая привязка к отступу секции промахнулась бы мимо содержимого ровно на его величину. */ .section-head { position: relative; max-width: 780px; padding-top: 18px; margin-bottom: clamp(26px, 3.4vw, 38px); } .section-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); } .section-head::after { content: ""; position: absolute; left: 0; top: 0; width: 84px; height: 6px; background: repeating-linear-gradient(45deg, var(--accent) 0 6px, transparent 6px 12px); } /* Ярлык раздела — не «кикер над заголовком», а код над палубной линией: на этом сайте он различает регистры (справочник / расчёт / заявка), которых на одной странице реально несколько. */ .eyebrow { display: block; color: var(--accent); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: .16em; text-transform: uppercase; } .section-head h2 { font-size: clamp(1.4rem, 2.9vw, 2rem); margin-top: 9px; } .section-head p { margin-top: 14px; color: var(--ink-3); font-size: var(--fs-lead); line-height: 1.5; max-width: 56ch; text-transform: none; } .prose { max-width: 63ch; } /* Секция-и-колонка в одном элементе: .prose перебивал max-width у .wrap, а margin:0 auto от .wrap оставался — колонка текста уезжала в центр окна, пока таблицы, паспорта и заголовки той же страницы стояли по левому краю контейнера. Так свёрстано 34 секции на 30 страницах. Ширину держит теперь контейнер, меру строки — сами текстовые элементы. */ .wrap.prose { max-width: var(--maxw); } .wrap.prose > p, .wrap.prose > ul, .wrap.prose > ol, .wrap.prose > h2, .wrap.prose > h3, .wrap.prose > blockquote { max-width: 63ch; } .prose p + p, .prose h3 + p, .prose ul + p, .prose p + h3, .prose p + ul { margin-top: 18px; } .prose ul { margin: 0; padding-left: 22px; } .prose li + li { margin-top: 8px; } .prose p, .prose li { color: var(--ink-2); } /* Кнопка — плашка с торцом: 3px тёмного низа это не «тень для красоты», а толщина металла, за счёт которой :active читается как физическое нажатие (плашка проседает ровно на свою толщину). До этой волны у сайта не было ни одного состояния нажатия. Нулевое размытие здесь не костюм под неубрутализм, а язык, который сайт уже носит (см. hazard-оттиск карточек Волны 19). */ .btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #1A1A1A; font-weight: 700; padding: 13px 24px; border: none; cursor: pointer; font-family: var(--display); font-size: var(--fs-md); text-decoration: none; text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 3px 0 0 #A96F14; transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .btn:hover { background: #ffb84d; } .btn:active { transform: translateY(3px); box-shadow: 0 0 0 0 #A96F14; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } .crumbs { font-size: var(--fs-xs); color: var(--ink-4); padding-block: 18px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* без подчёркивания ссылка в крошках визуально не отличалась от текущего раздела — опознать её можно было только наведением (WCAG 1.4.1) */ .crumbs a { text-decoration: underline; text-underline-offset: 3px; padding-block: 4px; } .crumbs a:hover { color: var(--accent); } /* Волна 130: фон шапки был rgba(26,26,26,.96) без размытия. На кадрах телефона сквозь него читались уезжающие под шапку строки — светлый текст #F2F0EA при 4 % прозрачности даёт #232323 на грунте #1A1A1A, то есть различимый призрак. Шапка этого сайта — окрашенный металл, а не матовое стекло: она непрозрачна. */ .nav { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 3px solid var(--accent); } .nav__row { display: flex; justify-content: space-between; align-items: center; height: 70px; } .brand { font-family: var(--display); font-weight: 700; font-size: var(--fs-lg); text-decoration: none; text-transform: uppercase; letter-spacing: .04em; } .brand span { color: var(--accent); } .nav__links { display: flex; gap: 22px; align-self: stretch; align-items: stretch; font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; } /* Пункт меню — не голая ссылка, а ячейка с местом под метку текущего раздела. До этой волны указатель текущей страницы был ТОЛЬКО в мобильной панели: на десктопе aria-current="page" стоял в разметке и не рисовался ничем. */ .nav__links a { position: relative; display: flex; align-items: center; text-decoration: none; transition: color var(--dur-1) var(--ease); } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-2) var(--ease); } .nav__links a:hover { color: var(--accent); } .nav__links a:hover::after { transform: scaleX(1); } .nav__links a:active { color: #ffb84d; } .nav__links a[aria-current="page"] { color: var(--accent); } .nav__links a[aria-current="page"]::after { transform: none; background: repeating-linear-gradient(45deg, var(--accent) 0 5px, var(--bg) 5px 10px); height: 5px; } @media (prefers-reduced-motion: reduce) { .nav__links a, .nav__links a::after { transition: none; } } /* Подвал был полоской серого текста высотой в одну строку. Теперь это нижний срез настила: сигнальная лента, потом реквизиты. */ .footer { position: relative; padding-block: clamp(30px, 3.4vw, 44px) clamp(24px, 2.6vw, 34px); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 22px; color: var(--ink-4); font-size: var(--fs-sm); } .footer::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 8px; background: repeating-linear-gradient(45deg, var(--accent) 0 7px, var(--bg) 7px 14px); } /* тап-таргет ссылки в футере был 21.5px по высоте (WCAG 2.5.8 требует 24) */ .footer a { display: inline-block; padding-block: 6px; } @media (max-width: 760px) { .nav__links { display: none; } } /* Волна приёмки (31.08.2026). На десктопе шапка заканчивалась просто номером телефона — та же кнопка «Заказать кран», что и в мобильной mcta-панели (тот же --accent, тот же тёмный текст), только теперь видна и на широком экране. Базовое правило объявлено ДО адаптивного override ниже: при равной специфичности каскад берёт то, что стоит в файле позже, — иначе на узких экранах display:none проигрывал бы этому же правилу (найдено и починено живой проверкой на 375px на другом сайте сети). */ .nav__order-btn { display: inline-flex; align-items: center; margin-left: 8px; flex-shrink: 0; background: var(--accent); color: #1A1A1A; font-weight: 700; text-transform: uppercase; font-size: var(--fs-sm); padding: 9px 16px; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1) var(--ease); } .nav__order-btn:hover { background: #ffb84d; } @media (max-width: 760px) { .nav__order-btn { display: none; } } /* Калькулятор — ключевой интерактивный элемент сайта, а выглядел он мелкой формой в пустой полосе: 460px в контейнере 1180px. Теперь это прибор в том же корпусе, что портовая панель и чертежи моделей: сигнальная лента по верхнему срезу, стальная рамка, ширина под две колонки «входит/не входит» третьего шага. */ .calc { position: relative; padding: 32px 26px 28px; display: grid; gap: 15px; max-width: 620px; } .calc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(45deg, var(--accent) 0 11px, var(--bg) 11px 22px); } .calc__field { display: grid; gap: 6px; } .calc__field label { font-size: var(--fs-xs); color: var(--ink-4); font-weight: 700; text-transform: uppercase; } /* граница поля ввода — --accent-2 вместо --line: 3.6:1 к фону против 1.5:1 (WCAG 1.4.11) */ .calc__field select { background: var(--bg); border: 2px solid var(--accent-2); color: var(--ink); padding: 10px 12px; font-family: inherit; font-size: var(--fs-md); } .calc__checkbox { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); } .calc__checkbox input { width: 17px; height: 17px; } .calc__note { font-size: var(--fs-xs); background: var(--bg); border-left: 3px solid var(--accent); padding: 12px 14px; color: var(--ink-2); } .calc__result { border-top: 2px dashed var(--line); padding-top: 14px; } .calc__result-label { display: block; font-size: var(--fs-2xs); color: var(--ink-4); text-transform: uppercase; } /* Итог расчёта — такой же «прибор», как число в .fact-plate, и кегль у них теперь общий: результат не должен быть тише заголовка своей же секции. */ .calc__result b { display: block; font-size: clamp(1.5rem, 3vw, 2.15rem); color: var(--accent); margin-top: 8px; line-height: 1.05; font-variant-numeric: tabular-nums; } /* --- визард калькулятора: пошаговый прогресс, вопросы, кнопки-варианты --- */ .calc__progress { display: flex; gap: 6px; } .calc__progress-step { flex: 1; height: 4px; background: var(--line); transition: background var(--dur-2) var(--ease); } .calc__progress-step.is-active, .calc__progress-step.is-done { background: var(--accent); } .calc__progress-label { font-size: var(--fs-2xs); color: var(--ink-4); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .calc__step { display: none; } .calc__step.is-active { display: grid; gap: 14px; animation: calc-step-in var(--dur-2) var(--ease); } @keyframes calc-step-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .calc__step.is-active { animation: none; } } .calc__question { display: block; font-size: var(--fs-md); font-weight: 700; } .calc__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .calc__option { display: grid; gap: 5px; text-align: left; background: var(--bg); border: 2px solid var(--accent-2); color: var(--ink); padding: 14px 14px; min-height: 44px; font-family: inherit; cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } /* :focus-visible больше не глушит outline — глобальное фокус-кольцо остаётся видимым (WCAG 2.4.7) */ .calc__option:hover, .calc__option:focus-visible { border-color: var(--accent); transform: translateY(-2px); } .calc__option.is-selected { border-color: var(--accent); background: var(--accent); } .calc__option.is-selected .calc__option-title, .calc__option.is-selected .calc__option-sub { color: #1A1A1A; } .calc__option-title { font-weight: 700; text-transform: uppercase; font-size: var(--fs-md); } .calc__option-sub { font-size: var(--fs-xs); color: var(--ink-4); } .calc__option.is-selected .calc__option-sub { color: #3a2f10; } .calc__back, .calc__restart { background: none; border: none; color: var(--ink-4); font-family: inherit; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; padding: 4px 0; justify-self: start; } .calc__back:hover, .calc__restart:hover { color: var(--accent); } .calc__step3-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; } .calc__cta { justify-self: start; } @media (max-width: 420px) { .calc__options { grid-template-columns: 1fr; } .calc { padding: 28px 16px 22px; } } /* Три ограничения были свёрстаны тремя одинаковыми колонками — ровно тем узором «иконка, заголовок, абзац x3», по которому макет опознаётся как собранный моделью. Здесь он ещё и врал по смыслу: страницы, на которые ведут карточки, называются «Ограничение первое / второе / третье», то есть это упорядоченный перечень, а не три равнозначные плитки. Стало — реестр: строки одной таблички, стенсил-знак слева, текст справа. Такой раскладки больше нигде на сайте нет (везде 2- и 3-колоночные сетки), и она совпадает с регистром страницы, набитой таблицами и паспортами. */ .uslugi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; background: var(--line); border: 2px solid var(--line); } .uslugi-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(16px, 2.4vw, 30px); align-items: start; text-decoration: none; padding: clamp(20px, 2.4vw, 30px); background: var(--surface); } .uslugi-card > .card-icon { grid-column: 1; grid-row: 1; } .uslugi-card h3 { grid-column: 2; margin: 0; font-size: var(--fs-lg); } .uslugi-card p { grid-column: 3; margin-top: 3px; color: var(--ink-3); font-size: var(--fs-sm); text-transform: none; } /* Средняя ширина: описание уходит под название, знак держит обе строки. */ @media (max-width: 900px) { .uslugi-card { grid-template-columns: auto minmax(0, 1fr); } .uslugi-card > .card-icon { grid-row: 1 / span 2; } .uslugi-card p { grid-column: 2; margin-top: 9px; } } @media (max-width: 620px) { .uslugi-card { grid-template-columns: minmax(0, 1fr); gap: 13px; } .uslugi-card > .card-icon { grid-row: auto; } .uslugi-card h3, .uslugi-card p { grid-column: 1; } .uslugi-card p { margin-top: 0; } } /* «Примеры задач» — иллюстративные сценарии */ /* Задач тринадцать — та же дырка в последнем ряду, что была у семи плеч. */ .keysy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--line); } .keysy-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } .keysy-card { display: block; text-decoration: none; padding: 26px; background: var(--surface); } .keysy-card__tag { color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .keysy-card h2, .keysy-card h3 { margin-top: 10px; font-size: var(--fs-lg); } @media (max-width: 800px) { .keysy-grid { grid-template-columns: 1fr; } } /* Волна 23 — «Парк техники»: карточка модели. Квадратный бейдж класса техники (жёсткая рамка, без скруглений) вместо иконки — читается как маркировка на борту машины, а не как декоративная метка. */ /* Волна 24 — третья модель (башенный кран): сетка растёт с 2 до 3 колонок, тот же приём, что .uslugi-grid (repeat(3, 1fr)) — не новый паттерн, а переиспользование уже принятого в design-code этого сайта. */ .park-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); margin-top: clamp(20px, 3vw, 32px); } .park-card { display: block; text-decoration: none; padding: 26px; background: var(--surface); position: relative; } .park-card__type { display: inline-block; border: 2px solid var(--accent); color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; } .park-card h2 { font-size: var(--fs-xl); margin-top: 14px; text-transform: none; } .park-card__spec { display: block; margin-top: 8px; color: var(--ink); font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; } .park-card__note { margin-top: 10px; color: var(--ink-3); font-size: var(--fs-sm); text-transform: none; } @media (max-width: 980px) { .park-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .park-grid { grid-template-columns: 1fr; } .park-card { padding: 20px; } } /* Волна 128: ставки на хабе парка — строка-показание перед сеткой классов, а не отдельная панель: три класса ниже и есть предмет, к которому относится цена. Цифры — те же, что в калькуляторе главной; у башенного крана ставки на сайте нет, и здесь она не появляется. */ .park-rates { margin-top: clamp(18px, 2.6vw, 26px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; padding: 12px 0 14px; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); font-size: var(--fs-sm); color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; } .park-rates__item b { font-family: var(--display); font-size: var(--fs-lg); color: var(--accent); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; /* Само число — строчными, как в панели главной: капслок наследовался от контейнера и «ОТ 4 000 ₽/ЧАС» кричало громче заголовка страницы. */ text-transform: none; } .park-rates__note { flex-basis: 100%; font-size: var(--fs-xs); letter-spacing: .02em; text-transform: none; } .park-rates__note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .park-rates__note a:hover { color: #ffb84d; } /* Перенесённый под сетку вводный абзац хаба парка. */ .park-intro { margin-top: clamp(22px, 3vw, 32px); color: var(--ink-3); } /* --- визуальный апгрейд: hover- и глубинная полировка карточек --- */ /* hover-полиш в духе промышленной маркировки: жёсткое кольцо-акцент вместо мягкой тени, лёгкий подъём + подсветка — без скруглений и без блюра, честно грубо, как трафарет на контейнере */ .uslugi-card, .route-card, .box, .park-card { position: relative; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), filter var(--dur-1) var(--ease); } /* .box:hover без ограничения по тегу поднимал и подсвечивал ЛЮБУЮ панель с этим классом, включая калькулятор: неинтерактивная панель реагировала на наведение как карточка-ссылка и обещала переход, которого нет. */ a.route-card:hover, a.box:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--accent), 0 10px 0 0 rgba(0,0,0,.35); filter: brightness(1.06); } /* Волна 19 — uslugi-card: портовый hazard-hover вместо мягкого подъёма. Карточка не «всплывает», а сдвигается против жёсткой тени-дубля сигнального цвета — как смещённый оттиск трафарета на контейнере. Без blur, без filter. Волна 23 — park-card использует тот же приём (см. .park-grid выше). */ a.uslugi-card:hover, a.uslugi-card:focus-visible, a.park-card:hover, a.park-card:focus-visible { transform: translate(-5px, -5px); box-shadow: 8px 8px 0 0 var(--accent), inset 0 0 0 2px var(--bg); } /* ========================================================================= Фото-карточки парка на главной с 3D-тилтом при наведении. Первый и единственный тилт-механизм на сайте, см. tilt.js. Модификатор .park-card--photo кладёт фото сверху существующей .park-card (Волна 23) и НЕ трогает её текстовые поля — только добавляет картинку и переопределяет hover-transform, чтобы включить в него поворот. */ /* Только 2 карточки (не 3, как у .park-grid хаба /park/) — своя раскладка в 2 колонки на всех ширинах, где .park-grid обычно даёт 3. */ /* max-width:760px оставлял справа 360px пустоты, и пара плашек читалась как недоделанный ряд, а не как приём. Фотография — самый сильный аргумент этой секции («разница видна уже на фото»), поэтому она берёт всю ширину контейнера: 589px на плашку, оба исходника это выдерживают (1280 и 640 px). */ .park-grid--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(20px, 3vw, 32px); } @media (max-width: 620px) { .park-grid--photo { grid-template-columns: 1fr; } } /* Было padding-bottom:20px поверх базовых 26px карточки, а подписи получали ещё по 20px margin — фото стояло с отступом 26px, а бейдж, название и характеристика под ним с отступом 46px, то есть по разным вертикалям. Теперь фото идёт в край плашки, а весь текст под ним — по одной линии 20px. */ .park-card--photo { padding: 0 0 22px; overflow: hidden; } .park-card--photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 2px solid var(--line); } .park-card--photo .park-card__type { margin: 18px 20px 0; } /* h3, не h2: на главной эти карточки — дочерние элементы секции со своим h2 («Два класса вблизи»), в отличие от хаба /park/, где park-card h2 сидит прямо под h1 страницы. Стиль скопирован с общего .park-card h2. */ .park-card--photo h3 { margin: 10px 20px 0; font-size: var(--fs-xl); text-transform: none; } .park-card--photo .park-card__spec { margin: 8px 20px 0; } /* Угол считает JS (--tilt-x/--tilt-y на самом элементе, mousemove/mouseleave — см. tilt.js), CSS применяет его только в hover/focus-состоянии, поверх обычного hazard-сдвига .park-card (Волна 19/23). Без JS или с --tilt-* неопределёнными переменные падают на 0deg — карточка ведёт себя как обычный .park-card. perspective(800px) — точка схода объявлена в самом transform, а не на родителе, чтобы наклон не «плыл» по сетке при переносе карточек. */ a.park-card--photo:hover, a.park-card--photo:focus-visible { transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translate(-5px, -5px); transition: transform var(--dur-1) linear, box-shadow var(--dur-2) var(--ease); } @media (prefers-reduced-motion: reduce) { a.park-card--photo, a.park-card--photo:hover, a.park-card--photo:focus-visible { --tilt-x: 0deg !important; --tilt-y: 0deg !important; } } /* монолайн-иконки в квадратной акцентной рамке — стенсил-бейдж. 34px было ровно тем размером, при котором знак не читается и не работает как акцент: половина высоты строки заголовка рядом. 48/56px — размер трафаретного знака на борту, каким он и задуман. */ .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 3px solid var(--accent); color: var(--accent); flex-shrink: 0; } .card-icon svg { width: 30px; height: 30px; display: block; } @media (max-width: 620px) { .card-icon { width: 46px; height: 46px; } .card-icon svg { width: 25px; height: 25px; } } /* --- hero-иллюстрация: гусеничный кран поднимает контейнер на фоне портового крана --- чистая line-art/силуэт-графика на токенах сайта, не фото и не имитация реального объекта */ /* Иллюстрация висела в пустоте: тонкая линия сверху и силуэт крана посреди ничего. Теперь это панель настила — тот же корпус, что у чертежей моделей (.model-art): сигнальная лента по верхнему срезу, стальная рамка, а данные (.port-band__strip) внизу как подпись прибора, а не как отдельный блок. */ .port-panel { position: relative; border: 2px solid var(--line); background: var(--surface); padding-top: 8px; } .port-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(45deg, var(--accent) 0 11px, var(--bg) 11px 22px); } .hero-illustration { padding: clamp(12px, 2.2vw, 24px) clamp(12px, 2.2vw, 24px) 0; } .hero-illustration__svg { width: 100%; height: auto; max-height: 340px; display: block; } /* .14 — портальный кран на заднем плане не читался вовсе, и правая треть иллюстрации выглядела пустой. .24 держит его вторым планом, но видимым. */ .i-bg-crane line { stroke: var(--ink); stroke-width: 2.5; opacity: .24; fill: none; } .i-water { stroke: var(--accent-2); stroke-width: 2; opacity: .5; fill: none; animation: i-water-flow 3.2s linear infinite; } @keyframes i-water-flow { to { stroke-dashoffset: -64; } } @media (prefers-reduced-motion: reduce) { .i-water { animation: none; } } .i-quay { stroke: var(--accent); stroke-width: 4; } .i-cont-a { fill: var(--surface); stroke: var(--line); stroke-width: 2; } .i-cont-accent { fill: var(--accent); stroke: var(--accent); stroke-width: 2; } .i-cont-outline { fill: none; stroke: var(--accent); stroke-width: 3; } .i-corr { stroke: var(--line); stroke-width: 1; opacity: .65; } .i-corr-strong { stroke: var(--line); stroke-width: 1.5; opacity: .85; } .i-corr-dark { stroke: var(--bg); stroke-width: 1; opacity: .55; } .i-corr-dark-strong { stroke: var(--bg); stroke-width: 1.5; opacity: .75; } .i-track { fill: var(--surface); stroke: var(--accent); stroke-width: 3; } .i-track-tick { stroke: var(--line); stroke-width: 1.5; } .i-cw { fill: var(--line); stroke: var(--accent-2); stroke-width: 2; } .i-cab { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; } .i-window { fill: var(--bg); stroke: var(--accent); stroke-width: 2; } .i-pin { fill: var(--accent); } .i-boom { stroke: var(--ink); stroke-width: 2.2; } .i-cable { stroke: var(--accent); stroke-width: 2; fill: none; } .i-load { fill: var(--accent); stroke: var(--ink); stroke-width: 2; } @media (max-width: 760px) { .hero-illustration__svg { max-height: 260px; } } /* лёгкий transform-only "3D"-параллакс от курсора/скролла — включается только в enhance.js, когда JS отключает параллакс (reduced-motion), transform просто не выставляется, никакого CLS */ .hero-illustration__svg { will-change: transform; } /* --- Волна 11: reading-progress + ToC + related-posts на статьях блога --- */ /* Reading-progress: тонкая полоса вверху, transform:scaleX по прогрессу. По умолчанию скрыта — показывается когда JS выставит .js на (progressive enhancement). */ .reading-progress { display: none; } html.js .reading-progress { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 40; background: transparent; pointer-events: none; } .reading-progress__bar { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .08s linear; } @media (prefers-reduced-motion: reduce) { .reading-progress__bar { transition: none; } } /* Article shell: сетка article + опциональный ToC-сайдбар на десктопе */ .article-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding-top: 8px; padding-bottom: 8px; align-items: start; } .article-shell:not(:has(.toc--desktop)) { grid-template-columns: minmax(0, 1fr); } .article-shell__article { padding: 24px 0 40px; max-width: 63ch; } .article-shell__h1 { font-size: clamp(1.5rem, .98rem + 2.1vw, 2.25rem); margin: 14px 0 8px; } .article-shell__byline { color: var(--ink-4); font-size: var(--fs-sm); margin-bottom: 28px; } /* 20px + scroll-padding-top:76px у html = те же 96px суммарного отступа, что в Волне 11 */ .article-shell__article h2 { margin: 36px 0 16px; scroll-margin-top: 20px; } /* ToC — desktop sticky сайдбар */ .toc--desktop { position: sticky; top: 96px; align-self: start; padding: 18px 16px; background: var(--surface); border-left: 3px solid var(--accent); font-size: var(--fs-sm); max-height: calc(100vh - 120px); overflow: auto; } .toc__title { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-2xs); color: var(--accent); margin-bottom: 12px; } .toc__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .toc__list a { display: block; text-decoration: none; color: var(--ink-3); border-left: 2px solid transparent; /* вертикальный padding 7px вместо 4px: тап-таргет ≈31px против 25px (WCAG 2.5.8) */ padding: 7px 0 7px 10px; line-height: 1.3; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .toc__list a:hover { color: var(--ink); border-left-color: var(--line); } .toc__list a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 700; } /* ToC — mobile
внутри статьи (по умолчанию виден только на мобильном) */ .toc--mobile { display: none; margin: 0 0 28px; background: var(--surface); border-left: 3px solid var(--accent); padding: 14px 16px; } .toc--mobile summary { cursor: pointer; font-weight: 700; text-transform: none; font-size: var(--fs-sm); list-style: none; } .toc--mobile summary::-webkit-details-marker { display: none; } .toc--mobile summary::before { content: "▸ "; color: var(--accent); display: inline-block; transition: transform var(--dur-1) var(--ease); } .toc--mobile[open] summary::before { content: "▾ "; } .toc--mobile .toc__list { margin-top: 12px; } @media (max-width: 960px) { .article-shell { grid-template-columns: minmax(0, 1fr); } .toc--desktop { display: none; } .toc--mobile { display: block; } } /* Related posts */ .related-posts { padding-top: 8px; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .related-card { display: flex; flex-direction: column; padding: 24px; text-decoration: none; gap: 10px; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), filter var(--dur-1) var(--ease); } .related-card__tag { color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .related-card__title { font-size: var(--fs-base); text-transform: none; margin: 0; } .related-card__desc { color: var(--ink-3); font-size: var(--fs-sm); text-transform: none; margin: 0; flex: 1; } .related-card__more { color: var(--accent); font-weight: 700; font-size: var(--fs-sm); margin-top: auto; } @media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } } /* --- Волна 10: scroll-reveal (IntersectionObserver, fade+translateY, once) --- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ Волна 12: мобильная закреплённая панель действий + мобильное меню Дизайн-код «портовый утилитарный»: 0 скруглений, толстые рамки, жёсткая тень без блюра, заголовочная гарнитура капсом. (Написано до смены гарнитур: тогда это была Roboto Condensed 900, сейчас Cuprum 700 — веса 900 у неё нет. Правило берёт var(--display), не имя.) ============================================================ */ /* Высота панели = кнопка 48px + верхняя рамка 3px + нижний отступ max(12px, safe-area) — тем же выражением компенсируем футер. */ .mcta { display: none; } @media (max-width: 760px) { :root { --mcta-h: calc(51px + max(12px, env(safe-area-inset-bottom))); } /* футер не должен уезжать под панель */ body { padding-bottom: var(--mcta-h); } /* при переходе по якорю и при табуляции к нижним элементам браузер не должен подставлять их ровно под панель */ html { scroll-padding-bottom: var(--mcta-h); } .mcta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--line); border-top: 3px solid var(--accent); box-shadow: 0 -6px 0 0 rgba(0, 0, 0, .35); padding-bottom: max(12px, env(safe-area-inset-bottom)); } .mcta__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 8px; font-family: var(--display); font-weight: 700; font-size: clamp(var(--fs-xs), 3.4vw, var(--fs-md)); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1) var(--ease); } .mcta__btn svg { width: 18px; height: 18px; flex-shrink: 0; } .mcta__btn--order { background: var(--accent); color: #1A1A1A; } .mcta__btn--order:hover, .mcta__btn--order:active { background: #ffb84d; } .mcta__btn--call { background: var(--surface); color: var(--ink); } .mcta__btn--call:hover, .mcta__btn--call:active { background: var(--line); } /* фокус-кольцо внутрь: 3px наружу у fixed-панели срезался бы краем экрана */ .mcta__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; } .mcta__btn--order:focus-visible { outline-color: #1A1A1A; } } /* Мобильное меню:
работает без JS, — нативная кнопка с состоянием expanded и клавиатурой из коробки. */ .nav__mobile { display: none; } @media (max-width: 760px) { .nav__row { position: relative; } .nav__mobile { display: block; } .nav__mobile-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; cursor: pointer; list-style: none; font-weight: 700; font-size: var(--fs-sm); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); } .nav__mobile-btn::-webkit-details-marker { display: none; } .nav__mobile-btn:hover { color: var(--accent); } /* три полосы «трафаретом»: центральная — псевдоэлементами сверху и снизу */ .nav__mobile-bars { position: relative; display: block; width: 22px; height: 3px; background: var(--accent); } .nav__mobile-bars::before, .nav__mobile-bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 3px; background: var(--accent); } .nav__mobile-bars::before { top: -7px; } .nav__mobile-bars::after { top: 7px; } .nav__mobile[open] .nav__mobile-bars { background: transparent; } .nav__mobile[open] .nav__mobile-bars::before { top: 0; } .nav__mobile[open] .nav__mobile-bars::after { top: 0; width: 12px; } .nav__mobile-panel { position: absolute; top: 100%; right: var(--pad); margin-top: 3px; min-width: 232px; display: grid; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 10px 0 0 rgba(0, 0, 0, .35); z-index: 30; } .nav__mobile-panel a { display: flex; align-items: center; min-height: 46px; padding: 11px 18px; border-bottom: 2px solid var(--line); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; text-decoration: none; } .nav__mobile-panel a:last-child { border-bottom: none; color: var(--accent); } .nav__mobile-panel a:hover { background: var(--bg); color: var(--accent); } .nav__mobile-panel a[aria-current="page"] { color: var(--accent); box-shadow: inset 3px 0 0 0 var(--accent); } } /* Уменьшённое движение: ни одна новая сущность Волны 12 не анимируется, плюс закрываем ранее незащищённые transform-переходы существующих карточек. */ @media (prefers-reduced-motion: reduce) { .mcta__btn { transition: none; } .uslugi-card, .route-card, .box, .related-card, .calc__option, .toc__list a { transition: none; } a.uslugi-card:hover, a.uslugi-card:focus-visible, a.route-card:hover, .box:hover, .calc__option:hover, .calc__option:focus-visible { transform: none; } } /* ========================================================================= Волна 14 (дедупликация сети): справочная таблица допусков и врезка-факт. Дизайн-код «портовый утилитарный»: 0 скруглений, рамки 2px, шапка капсом. ========================================================================= */ .spec-wrap { overflow-x: auto; border: 2px solid var(--line); margin-top: 24px; } .spec-table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: var(--fs-md); } .spec-table caption { text-align: left; padding: 14px 16px; color: var(--ink-3); font-size: var(--fs-sm); border-bottom: 2px solid var(--line); } .spec-table th, .spec-table td { text-align: left; padding: 13px 16px; border-bottom: 2px solid var(--line); vertical-align: top; } .spec-table thead th { background: var(--surface); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-xs); font-weight: 700; } .spec-table tbody th { color: var(--ink); font-weight: 700; } .spec-table tbody td { color: var(--ink-2); } .spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: none; } .spec-table tbody tr:hover th, .spec-table tbody tr:hover td { background: #262626; } @media (max-width: 760px) { .spec-table { min-width: 620px; font-size: var(--fs-sm); } } /* Врезка с одним проверяемым фактом — визуально ближе к предупреждающей маркировке на технике, чем к обычной карточке .box. */ .callout { background: var(--surface); border-left: 5px solid var(--accent); padding: 18px 22px; margin-top: 24px; } .callout p { color: var(--ink-2); } .callout p + p { margin-top: 12px; } .callout__label { display: block; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); margin-bottom: 8px; } /* --- Волна 20: единый блок «Источники, проверено» ----------------------- Раньше — приглушённый абзац прозы без рамки (.sources-note, теперь снят). Задача блока та же, что у .fact-plate/.passport: жёсткая грань, ни одного скругления, «заклёпка»-маркер вместо генерик-иконки. Ссылки остаются приглушёнными (это справочный, не навигационный список), но рамка и заголовок делают источники узнаваемым структурным блоком, а не мелким текстом внизу страницы. */ .sources { position: relative; margin-top: clamp(28px, 4vw, 40px); max-width: 70ch; background: var(--surface); border: 2px solid var(--line); padding: 16px 20px 18px; } .sources::before { content: ""; position: absolute; top: 6px; left: 6px; width: 5px; height: 5px; background: var(--accent-2); } .sources__head { font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: var(--fs-xs); color: var(--accent); } .sources__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; } .sources__list li { position: relative; padding-left: 14px; font-size: var(--fs-sm); color: var(--ink-2); } .sources__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; background: var(--accent-2); } .sources__list a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; } .sources__list a:hover { color: var(--accent); } .sources__more, .sources__note { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-4); } .sources__more a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .sources__more a:hover { color: #ffb84d; } /* ========================================================================= Волна 16 — структурное расхождение: сайт-календарь. Новый компонентный словарь вместо hero/stat-bar/trust-bar/marquee/steps: виджет статуса, годовая полоса, паспорт плеча, справочный список «вопрос — ответ», нумерованный чек-лист, карточка маршрута. Дизайн-код прежний: 0 скруглений, рамки 2–3px, заголовочная гарнитура капсом (на момент записи Roboto Condensed, после смены гарнитур — Cuprum). ========================================================================= */ /* Первый экран: сначала данные, потом текст. */ /* На /kalendar/ блок заголовка стоит прямо под годовой полосой, и зазор между легендой полосы и h1 был ровно 0px: заголовок прилипал к подписи предыдущего элемента. На главной .today__copy лежит внутри .today__hero со своими полями, поэтому правило адресует только прямого потомка секции. */ .today { padding-block: clamp(24px, 4vw, 44px) 0; } .today > .today__copy { margin-top: clamp(26px, 3.4vw, 44px); } /* Собственный кегль у h1 главной снят: он повторял верхнюю границу общего правила (2.5rem), но по другой формуле — и на 768px давал 27.7px против 34.3px у любой другой страницы сайта. Дубль из двух разошедшихся копий одного решения; осталась одна, общая. */ .today__copy h1 { max-width: 23ch; } .today__copy .prose { margin-top: 18px; max-width: 56ch; font-size: var(--fs-lead); line-height: 1.5; } .today__copy .prose + .prose { margin-top: 14px; } /* Перенесённый остаток лида (Волна 128) стоит между плашкой фактов и таблицей пределов — его отбивает та же ступень ритма, что и другие блоки .today. */ .today__copy--more { margin-top: clamp(22px, 3vw, 34px); } /* ========================================================================= Волна 128 — первый экран телефона. Заголовок сайта состоит из двух половин через двоеточие («Аренда крана в Ленобласти» + «сначала дата и дорога, потом модель»). Одним куском капслоком он давал на 375px четыре ровных строки одного кегля — читать приходилось все четыре, чтобы понять первую. Двоеточие заменено на перелом: крупная половина отвечает «что и где», строчная подзаголовочная — «по какому правилу». Слова и порядок те же, элемент по-прежнему один

. ========================================================================= */ .today__h1-sub { display: block; margin-top: 10px; font-family: var(--sans); font-weight: 400; font-size: var(--fs-lead); line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--ink-2); max-width: 34ch; } /* Крупным заголовкам переносы запрещены явно: Cuprum капслоком на 320px с автопереносом рвёт слово посередине, и «ЛЕНОБ-ЛАСТИ» читается как опечатка. */ h1, h2, h3, .today__h1-sub { hyphens: manual; -webkit-hyphens: manual; } /* Рейл прибора: дата приказа + плашка состояния. Первая строка страницы — по-прежнему статус на сегодня, а не прайс. */ .today__rail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: clamp(16px, 2.2vw, 22px); padding-bottom: clamp(12px, 1.6vw, 16px); border-bottom: 2px solid var(--line); } .today__rail-date { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-sm); color: var(--ink); } .today__rail-badge { display: none; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-2xs); padding: 4px 10px; border: 2px solid currentColor; } .today__rail[data-state="spring"] .today__rail-badge--spring, .today__rail[data-state="summer"] .today__rail-badge--summer, .today__rail[data-state="clear"] .today__rail-badge--clear, .today__rail[data-state="stale"] .today__rail-badge--stale { display: inline-block; } .today__rail-badge--spring { color: var(--bg); background: var(--accent); border-color: var(--bg); } .today__rail-badge--summer { color: var(--bg); background: #C98A1E; border-color: var(--bg); } .today__rail-badge--clear { color: var(--ink-4); background: transparent; } .today__rail-badge--stale { color: var(--ink); background: transparent; border-style: dashed; } /* Ставки. Две ячейки — тот же «прибор», что .fact-plate, но в половинном кегле: на первом экране цена должна читаться, а не кричать громче заголовка. Числа те же, что в шагах калькулятора ниже (src/js/calculator.js). */ .today__rates { margin-top: clamp(18px, 2.6vw, 26px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 2px solid var(--line); max-width: 30rem; } .today__rate { position: relative; background: var(--surface); padding: 12px 14px 13px; min-width: 0; } .today__rate::before { content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 4px; background: repeating-linear-gradient(45deg, var(--accent) 0 5px, transparent 5px 10px); } .today__rate-name { display: block; font-size: var(--fs-2xs); color: var(--ink-4); text-transform: uppercase; letter-spacing: .09em; } .today__rate-num { display: block; margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, .96rem + .6vw, 1.34rem); line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; } .today__rates-note { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-4); } /* Лид идёт после ставок и отбивается от них крупнее, чем строки внутри блока ставок друг от друга: иначе три текстовых ступени подряд сливаются в одну. */ .today__rates-note + .prose { margin-top: clamp(18px, 2.4vw, 24px); } .today__rates-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .today__rates-note a:hover { color: #ffb84d; } /* ========================================================================= Волна 126 — рамочная видео-панель hero в портовом hazard-коде. isolation:isolate заводит новый stacking context, чтобы z-index внутри панели не спорил с остальной страницей. background на .today__hero-media — это и есть постер-фоллбэк: он висит ПОД видео всегда, а не только когда видео отключено, поэтому картинка уже на месте в момент, когда браузер только начинает грузить видео (preload="none" держит объект пустым до автовоспроизведения). ========================================= */ .today__hero { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(28px, 4vw, 44px); border: 3px solid var(--accent); padding: clamp(30px, 4.6vw, 54px) clamp(20px, 4.6vw, 44px) clamp(26px, 4vw, 44px); } /* Сигнальная лента — та же диагональная штриховка, что у .status-flag/ .rs-hazard-*: hazard-язык этого сайта опознаётся именно по штрихованной ленте, а не по цвету рамки, поэтому голого бордера здесь мало. */ .today__hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; z-index: 2; background: repeating-linear-gradient(45deg, var(--accent) 0 14px, var(--bg) 14px 28px); } .today__hero-media { position: absolute; inset: 0; z-index: 0; background: var(--surface) center / cover no-repeat; /* Постер отдаётся фоном, а не , поэтому сюда не применим: формат выбирается через image-set(). Браузер без поддержки WebP берёт второй кандидат — тот же JPEG, что стоит в poster= у