/* Дополнение к site.css: палитра, форма заявки и cookie-баннер. В исходном шаблоне форм нет ни одной, поэтому эти два компонента написаны с нуля. Собраны только на токенах шаблона (--accent, --surface, --border, --radius, --silk) и на его же брейкпоинтах (1024 / 768 / 480), чтобы не выбиваться из общего вида. */ /* ═══ ПАЛИТРА: «графит и энергетический синий» ═══ Отменяет мятно-бирюзовую SaaS-палитру шаблона (решение владельца 26.07.2026, вариант выбран 27.07.2026). Тема — электросети, а не облачный сервис: нейтральный графитовый фон, почти чёрный текст, единственный яркий цвет — синий. Тепла в палитре нет намеренно, подача техническая. Сетка, брейкпойнты и размеры НЕ трогаются — меняются только цвета. ⚠️ ЦВЕТ И ГРАНИЦА МИМИКРИИ (решение владельца 28.07.2026, TD-79). --accent — точный синий из логотипа ПАО «Россети» 2021 года (#055798, единственный цвет в их SVG). Взят намеренно: отрасль читается с первого экрана. Разрешён ЦВЕТ и только он. Запрещено и остаётся запрещённым: логотип и вордмарк Россетей, их шрифт (PF DIN Text Cond Pro), слово «официальный» рядом с их брендом, имитация интерфейса их личного кабинета. Основание запрета — RISK-014 и §4.9 30-landing-claims.md. Компенсация в вёрстке: свой логотип, шрифт Manrope, дисклеймер о независимости на первом экране каждой страницы (site_shell.disclaimer()). site.css править нельзя, поэтому здесь два блока: сами токены и те места шаблона, где бирюза зашита числом (тени кнопок, свечения, пилюли). */ :root { --bg: #EDEFF2; /* холодный светло-серый вместо мятного */ --bg-alt: #E2E6EB; --surface: #F6F7F9; --surface-2: #FFFFFF; --accent: #055798; /* синий Россетей: текст, кнопки, ссылки. 6.7:1 на --surface */ --accent-mid: #0C6FC0; /* наведение и вторичная графика */ --accent-light: #7FB2DC; /* светлый синий: только на тёмном (подвал, CTA) */ --accent-ghost: rgba(5,87,152,0.07); --accent-border: rgba(5,87,152,0.16); --text-1: #14171A; /* графит; он же фон подвала */ --text-2: #434A52; --text-3: #737B84; --border: rgba(20,23,26,0.10); --shadow-sm: 0 2px 12px rgba(20,23,26,0.06); --shadow-md: 0 8px 32px rgba(20,23,26,0.10); --shadow-lg: 0 24px 64px rgba(20,23,26,0.14); /* Наши добавки: в шаблоне их нет, но без них не переопределить зашитые числа. */ --accent-rgb: 5,87,152; /* обязан совпадать с --accent, иначе тени уедут в другой тон */ --accent-dark: #044172; /* наведение на сплошной кнопке */ --danger: #B3261E; --warn: #A26800; /* граница льготного порога: не «плохо», но «впритык» */ } /* Места, где цвет в шаблоне записан числом, а не токеном. Список получен поиском по site.css: rgba(26,122,110), rgba(42,157,143), rgba(91,191,181). */ .btn-primary { box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.22); } .btn-primary:hover { box-shadow: 0 6px 24px rgba(var(--accent-rgb),0.32); } .btn-primary-lg { box-shadow: 0 6px 24px rgba(var(--accent-rgb),0.26); } .btn-primary-lg:hover { box-shadow: 0 8px 32px rgba(var(--accent-rgb),0.36); } .btn-cta-primary { box-shadow: 0 8px 32px rgba(var(--accent-rgb),0.36); } .hero-float-badge-2 { box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.30); } .pricing-card.featured { box-shadow: 0 20px 60px rgba(var(--accent-rgb),0.14); } .pricing-card.featured:hover { box-shadow: 0 28px 80px rgba(var(--accent-rgb),0.22); } .pricing-card.featured .pricing-cta { box-shadow: 0 6px 24px rgba(var(--accent-rgb),0.30); } .fv-pill.green { background: rgba(var(--accent-rgb),0.10); color: var(--accent); } .fv-pill.blue { background: rgba(20,23,26,0.06); color: var(--text-2); } .pricing-badge { background: rgba(127,178,220,0.18); border-color: rgba(127,178,220,0.40); color: var(--accent-light); } .hero::before { background: radial-gradient(ellipse at center, rgba(127,178,220,0.22) 0%, rgba(12,111,192,0.07) 50%, transparent 75%); } .hero::after { background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.09) 0%, transparent 70%); } .cta-section::before { background: radial-gradient(ellipse at center, rgba(127,178,220,0.15) 0%, transparent 70%); } .cta-badge { border-color: rgba(127,178,220,0.30); } /* Три места шаблона со старой бирюзой, которые не были перекрыты: классы сейчас не используются ни одной страницей, но включи их новая вёрстка — проступит мята. */ .pricing-card.featured .pricing-check { background: rgba(127,178,220,0.20); } .cta-inner::before { background: radial-gradient(ellipse at center, rgba(127,178,220,0.15) 0%, transparent 70%); } .cta-label { border-color: rgba(127,178,220,0.30); } /* Липкая шапка при прокрутке: в шаблоне у .nav.scrolled зашит мятный фон rgba(232,244,242,0.92) - единственное место, где старая палитра переживала смену токенов и проступала бирюзой на всех страницах сразу. */ .nav.scrolled { background: rgba(237,239,242,0.92); } /* ── ШАПКА: ЛОГОТИП И ЗАПРЕТ ПЕРЕНОСОВ ── Русские подписи длиннее английских: при исходных отступах шаблона пункты меню, телефон и кнопка рвались на две строки. Ширины поджаты, переносы запрещены. Правила ограничены шапкой — подвал не затрагивают. */ .nav-inner .nav-logo { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; flex-shrink: 0; } /* gap:0 — иначе flex вставит зазор между «Регион» и «-Стандарт» */ .nav-logo-mark { height: 24px; width: auto; display: block; margin-right: 8px; } /* Кириллица в Manrope шире латиницы шаблона: при исходных 1.25rem бренд выглядел крупнее и рыхлее оригинала. Кегль и трекинг поджаты. */ .nav-inner .nav-logo { font-size: 1.06rem; letter-spacing: -0.045em; font-weight: 800; } /* Название компании набирается тем же начертанием, что акцент в заголовках, - Exo 2 курсивом (решение владельца 28.07.2026). В шапке и в подвале одинаково: вордмарк, набранный в двух разных гарнитурах на одной странице, читается как недосмотр вёрстки. Вес жёстко 700: локально загружено ровно одно начертание (Exo2-700i), при 800 браузер синтезирует жир и курсив плывёт. Трекинг ослаблен - у Exo 2 курсив буквы и так посажены плотнее, чем у Manrope. */ .nav-inner .nav-logo, .footer-brand .nav-logo { font-family: 'Exo 2', 'Segoe UI', system-ui, sans-serif; font-style: italic; font-weight: 700; letter-spacing: -0.02em; } /* Кегль поднят с 1.06rem (владелец, 28.07): Exo 2 курсивом набирает уже, чем Manrope, и освободившееся место отдано размеру. Ограничитель - не мобильная версия (там меню уходит в гамбургер и бренду просторно), а узкий десктоп сразу за порогом 1180px: семь пунктов меню, телефон и бренд в одной строке. Поэтому крупный кегль включается с 1400px, а в диапазоне 1181-1400 остаётся сдержанный. */ .nav-inner .nav-logo { font-size: 1.2rem; } @media (min-width: 1181px) and (max-width: 1400px) { .nav-inner .nav-logo { font-size: 1.1rem; } } .nav-inner .nav-links { gap: 6px; } .nav-inner .nav-links a { padding: 7px 12px; white-space: nowrap; } .nav-inner .nav-cta a { white-space: nowrap; } .nav-inner .nav-cta .btn-ghost { padding: 9px 12px; } /* Средняя карточка прайса в шаблоне тёмная. Возвращаем ей светлый фон, выделение остаётся за счёт акцентной рамки, тени и плашки «чаще всего берут». */ .pricing-card.featured { background: var(--surface-2); border-color: var(--accent); box-shadow: 0 20px 60px rgba(var(--accent-rgb), 0.16); } .pricing-card.featured .pricing-tier { color: var(--accent); } .pricing-card.featured .price-amount, .pricing-card.featured .price-currency { color: var(--text-1); } .pricing-card.featured .price-period { color: var(--text-3); } .pricing-card.featured .pricing-desc { color: var(--text-2); } /* В карточке заявки две плашки вместо трёх — сетка шаблона рассчитана на три, поэтому переводим её на две равные колонки во всю ширину. */ .db-stats { grid-template-columns: repeat(2, 1fr); } /* На телефоне карточку заявки не показываем: первый экран и без неё длинный, а сама она там сжимается до нечитаемого. */ @media (max-width: 768px) { .hero-visual { display: none; } } /* Логотип в подвале: в шаблоне бренд там — блочная строка, поэтому выстраиваем знак и надпись в одну линию. Знак серый (rgb 132), на тёмном фоне тусклый — осветляем фильтром. */ .footer-brand .nav-logo { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; } .footer-brand .nav-logo-mark { height: 26px; margin-right: 9px; filter: brightness(1.7); } /* Шаблон прячет меню в гамбургер на 1024px. Русскому меню там уже тесно (нужно 1010px при 961px доступных), поэтому порог поднят до 1180px. */ @media (max-width: 1180px) { .nav-inner .nav-links, .nav-inner .nav-cta { display: none; } .nav-hamburger { display: flex; } } /* Плашка «от 2 500 ₽» в шаблоне лежит поверх дашборда: у нас она накрывала карточку «15 кВт». Опущена ниже дна дашборда и отведена левее. */ /* Карточка заявки — статичная: в шаблоне она подрастала на наведении. Плашка «от 2 500 ₽» продолжает плавать (анимация floatBadge2 в site.css). */ .hero-dashboard, .hero-dashboard:hover { transform: none; transition: none; } /* Плашка «от 2 500 ₽» — статичная. Плавание из шаблона отключено: при движении текст и тень перерисовывались каждый кадр и буквы «дрожали». */ /* Плавающие плашки шаблона на первом экране не используются — обе убраны. */ /* Строка доверия: русские подписи длиннее английских, при отступах шаблона три пункта требовали 543px при 516px доступных и уезжали на вторую строку. */ @media (min-width: 1025px) { .hero-trust { gap: 12px; } } /* ── ПЕРВЫЙ ЭКРАН БЕЗ ПРАВОЙ КОЛОНКИ (замечание владельца 28.07.2026) ── В шаблоне .hero-inner - жёсткая сетка 1fr 1fr под текст слева и дашборд справа. Дашборд есть только на главной и на гео; страницы apex и гайды собираются без него, и вторая колонка оставалась пустой: текст жался в 516px из 1096px доступных, а правая половина экрана пустовала. H1 при этом рвался пополам («Регион-» / «Стандарт»). Когда визуала нет - одна колонка. Ширину задаём по читаемости строки, а не по ширине контейнера: заголовку просторнее, абзацу - не длиннее ~90 знаков, иначе глаз теряет начало следующей строки. Селектор на :has() выбран вместо класса-модификатора намеренно: правило работает и для страниц, которых ещё нет, а в браузере без :has() оно просто игнорируется и остаётся прежнее поведение. Выравнивание задаётся явно: колонка теперь шире содержимого, и грид без указания justify-self ставил блок по центру - текст отъезжал от левого края и не совпадал с логотипом в шапке. */ /* ── ПЕРЕХОД ПО ЯКОРЮ ИЗ МЕНЮ (замечание владельца 28.07.2026) ── Шаблон останавливает прокрутку за 80px до секции (html scroll-padding-top). К этим 80px прибавляется собственное верхнее поле секции - 100px у прайса, 120px у остальных, - и после клика по «Ценам» человек видит шапку, потом полосу пустоты почти в 120px и только затем заголовок. Чиним не размером полей (они держат ритм при обычной прокрутке), а точкой остановки: пусть фиксированная шапка перекрывает верхнее поле секции, а не добавляется к нему. Две ветки, потому что генераторы у слитых секций ставят inline padding-top:0. У них своего поля нет, и прокрутку надо останавливать ВЫШЕ секции, иначе заголовок уедет под шапку. */ html { scroll-padding-top: 0; } section[id][style*="padding-top:0"] { scroll-margin-top: 76px; } /* ── ВЕРТИКАЛЬНЫЙ РИТМ НА МОБИЛЬНОЙ (замечание владельца 28.07.2026) ── Шаблон задаёт первому экрану min-height: 915px и центрирует содержимое по вертикали, а секциям - по 120px отступа сверху и снизу. На десктопе это и есть его воздух, но на телефоне 915px больше самого экрана (844px у iPhone 12 Pro): контент уезжает вниз, между шапкой и текстом повисает пустая полоса, а короткие страницы вроде /poleznoe выглядят как набор блоков, разбросанных по пустому полю. Правится один раз и для всех страниц: селекторы взяты по шаблонным классам секций, а не по конкретным страницам, поэтому новые страницы получают правило автоматически. Инлайновый padding-top:0, который генераторы ставят у слитых секций, продолжает работать - у инлайна приоритет выше. */ @media (max-width: 768px) { .hero { min-height: auto; padding-top: 84px; padding-bottom: 48px; } .hero-inner { gap: 32px; } section[class*="-section"] { padding-top: 64px; padding-bottom: 64px; } /* Отступ между шапкой секции и её содержимым: в шаблоне 80px у features, 64 у testimonials, 56 у integrations, 48 у pricing. На широком экране это ритм, на телефоне - полоса пустоты между заголовком и первым же абзацем (замечание владельца 28.07). Приводим к одной величине: заголовок и текст должны читаться как одна мысль, а не как два разных экрана. */ .features-header, .testimonials-header, .integrations-header, .pricing-header { margin-bottom: 36px; } } /* Подзаголовок секции: в шаблоне max-width 520px. Английская фраза в такую ширину укладывается в две строки, русская - в пять, и центрованный столбик текста выглядит зажатым (замечание владельца 28.07.2026). Кириллица длиннее латиницы примерно на четверть, поэтому и ширину поднимаем соразмерно - до 820px, это те же ~2-3 строки, что задумывал шаблон. Только на десктопе: ниже 1024px ширину диктует экран, а не мы. */ @media (min-width: 1025px) { .section-sub { max-width: 820px; } } /* Секция .hero в шаблоне - флекс-контейнер, поэтому .container внутри неё ведёт себя как флекс-элемент и сжимается по содержимому, а не занимает заявленные 1160px. Пока колонок было две, содержимое и так было широким и это не проявлялось. Как только колонка осталась одна, контейнер съёжился до 744px и его собственные margin:auto утащили весь первый экран в центр. Ширину задаём явно - тогда max-width и auto-поля работают как задумано. */ .hero > .container { width: 100%; } @media (min-width: 1025px) { .hero-inner:not(:has(.hero-visual)) { grid-template-columns: minmax(0, 1fr); } /* Без justify-self: растянутый по треку блок с max-width встаёт к началу строки сам. Если поставить start, блок ужмётся по самому широкому ребёнку (это абзац-лид), и дисклеймер уже не сможет быть шире него. */ .hero-inner:not(:has(.hero-visual)) .hero-content { max-width: 880px; } /* Абзац-лид держим в 680px: это ~90 знаков, дальше глаз теряет начало следующей строки. А дисклеймер набран мелким кеглем, и при 680px он дробился на пять коротких строк - ему отдаём всю ширину блока (владелец, 28.07). На узких экранах ограничения снимаются: правило от 1025px. */ .hero-inner:not(:has(.hero-visual)) .hero-sub { max-width: 680px; } .hero-inner:not(:has(.hero-visual)) .hero-note { max-width: 100%; } } /* Ряд плашек под прайсом — как на текущем сайте под карточками цен. Собран на .hero-badge из шаблона, у неё гасим нижний отступ. */ .price-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 32px; } .price-pills .hero-badge { margin-bottom: 0; font-size: 0.8125rem; color: var(--text-2); } .price-pills .hero-badge strong { color: var(--text-1); } /* ── ПУНКТИРНЫЙ ПРОВОД МЕЖДУ БЛОКАМИ ── Декорация. Высота контейнера нулевая, SVG вынесен абсолютом в готовый зазор между рядами (100px) — вёрстка не сдвигается. На узких экранах ряды выстраиваются в столбик, и провод скрывается. */ .wire { position: relative; height: 0; z-index: 0; pointer-events: none; } .wire svg { position: absolute; left: 0; right: 0; top: -220px; width: 100%; height: 275px; overflow: visible; } .wire path { fill: none; stroke: var(--accent); vector-effect: non-scaling-stroke; } .wire-line { stroke-width: 2; stroke-linecap: round; stroke-dasharray: 18 14; opacity: 0.5; } /* точка на конце: отрезок нулевой длины с круглым концом (обычный circle растянуло бы в овал из-за preserveAspectRatio="none") */ .wire-dot { stroke-width: 5; stroke-linecap: round; opacity: 0.42; } /* Прорисовка при попадании в экран. Класс .reveal на контейнере вешает наблюдатель шаблона (site.js), он же добавляет .visible. Гасим его собственный эффект появления и вместо него ведём маску вдоль пути: штрихи проступают по очереди от начала к концу. */ .wire-reveal { fill: none; stroke: #fff; stroke-width: 30; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; } .wire.draw .wire-reveal { stroke-dashoffset: 0; transition: stroke-dashoffset 0.85s cubic-bezier(0.2, 0.45, 0.35, 1); } @media (prefers-reduced-motion: reduce) { .wire-reveal { stroke-dashoffset: 0; } .wire.draw .wire-reveal { transition: none; } } @media (max-width: 1024px) { .wire { display: none; } } /* ── ФОРМА ЗАЯВКИ ── */ .lead-section { padding: 100px 0; } .lead-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 56px; } .lead-copy .section-sub { margin-top: 16px; } .lead-trust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 28px; font-size: 0.8125rem; color: var(--text-3); font-weight: 500; } .lead-trust-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .lead-form { display: flex; flex-direction: column; gap: 12px; } .lead-input { width: 100%; font-family: inherit; font-size: 1rem; color: var(--text-1); background: var(--surface); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 16px 18px; transition: border-color 0.3s var(--silk), box-shadow 0.3s var(--silk); } .lead-input::placeholder { color: var(--text-3); } .lead-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ghost); } .lead-input.invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(179,38,30,0.10); } .lead-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.78rem; line-height: 1.55; color: var(--text-3); cursor: pointer; margin-top: 4px; } .lead-consent input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; } .lead-consent a { color: var(--accent); text-decoration: underline; } .lead-submit { width: 100%; margin-top: 8px; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #fff; background: var(--accent); border-radius: 100px; padding: 17px 28px; transition: background 0.3s var(--silk), transform 0.3s var(--silk), box-shadow 0.3s var(--silk); box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.22); } .lead-submit:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(var(--accent-rgb),0.30); } .lead-submit:disabled { opacity: 0.6; cursor: default; } .lead-status { font-size: 0.8125rem; line-height: 1.5; min-height: 1.2em; color: var(--text-3); } .lead-status.ok { color: var(--accent); font-weight: 600; } .lead-status.err { color: var(--danger); font-weight: 600; } /* ── COOKIE-БАННЕР ── */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px 20px; font-size: 0.8125rem; line-height: 1.55; color: var(--text-2); } .cookie-banner[hidden] { display: none; } .cookie-banner a { color: var(--accent); text-decoration: underline; } .cookie-actions { display: flex; gap: 10px; margin-left: auto; } .cookie-btn { font-family: inherit; font-size: 0.8125rem; font-weight: 600; border-radius: 100px; padding: 10px 20px; white-space: nowrap; transition: background 0.3s var(--silk), border-color 0.3s var(--silk); } .cookie-btn.accept { background: var(--accent); color: #fff; } .cookie-btn.accept:hover { background: var(--accent-dark); } .cookie-btn.decline { background: transparent; color: var(--text-2); border: 1px solid var(--accent-border); } .cookie-btn.decline:hover { border-color: var(--accent); color: var(--accent); } /* Дисклеймер о независимости - на первом экране, а не в подвале: этого требует и антимимикрийное правило (RISK-014), и юридический разбор 30-landing-claims §7. */ .hero-note { margin-top: 22px; max-width: 560px; font-size: 0.8125rem; line-height: 1.6; color: var(--text-3); border-left: 2px solid var(--accent-border); padding-left: 14px; } .hero-note b { color: var(--text-2); font-weight: 600; } /* Пояснение под заголовком блока регионов: почему на главной нет списка городов. Выпадающий список пробовали 26.07.2026 - движок счёл его тем же перечислением топонимов (PAGE-025 из warn стал fail), плюс лишняя форма ломает проверку согласия на ПДн (TRST-008). Оставлены три карточки и хаб /regiony. */ .region-pick { max-width: 760px; margin: 0 auto 36px; text-align: center; } .region-fallback { font-size: 0.9rem; line-height: 1.7; color: var(--text-2); } .region-fallback a { color: var(--accent); text-decoration: underline; } /* Карточка региона. Раньше это были плитки .integration-tile, но их контейнер - flex-«облако» под короткие подписи: длинный текст растягивал плитки во всю ширину. Поэтому карточка региона собрана на том же гриде, что и разбор выше. */ /* Колонка, а не блок: карточки в гриде тянутся до общей высоты, и ссылка прижимается к низу через margin-top:auto - иначе она висит сразу под текстом и три ссылки оказываются на трёх разных уровнях. */ .region-card { display: flex; flex-direction: column; transition: transform 0.4s var(--silk), box-shadow 0.4s var(--silk); } .region-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .region-more { margin-top: auto; padding-top: 18px; font-size: 0.875rem; font-weight: 600; color: var(--accent); } /* ── РАЗБОР «ПЛАТА, СРОК, МЕХАНИЗМЫ» ── Главный смысловой блок главной: человек приходит с «долго, сложно, непонятно», и здесь ему отвечают объяснением, а не обещанием. В шаблоне подходящего компонента нет (карточки прайса и отзывов рассчитаны на 3-5 строк текста), поэтому карточка собрана заново - но только на токенах и брейкпоинтах шаблона. Грид вынесен в класс, а не в инлайн-стиль: инлайн не перебивается медиазапросом (грабля TP-50, 25.07.2026). */ .explain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* Число колонок выводится из числа карточек. Сетка жёстко трёхколоночная оставляла пустую колонку справа в ряду из двух карточек (замечание владельца 29.07.2026 по /pereoformlenie-tp) и одиночную карточку-сироту в последнем ряду при четырёх. Правится в общем компоненте, а не в частном случае - AR-81 п.28, грабли TP-79 и TP-83; генераторы не трогаются. */ ⚠️ Обязательно внутри @media (min-width): селектор с :has() специфичнее голого .explain-grid в мобильном медиазапросе ниже и перебивал бы его, оставляя два столбца на 390 px. Так и случилось при первой редакции этой правки 29.07.2026 - поймал владелец на скриншоте. */ @media (min-width: 1025px) { .explain-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } .explain-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } .explain-grid:has(> :only-child) { grid-template-columns: 1fr; } } .explain-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow-sm); } .explain-kicker { display: inline-block; margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .explain-card h3 { font-size: 1.22rem; line-height: 1.25; letter-spacing: -0.02em; color: var(--text-1); margin-bottom: 14px; } .explain-card p { font-size: 0.9375rem; line-height: 1.72; color: var(--text-2); } .explain-list { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; } .explain-list li { position: relative; padding-left: 22px; font-size: 0.9rem; line-height: 1.62; color: var(--text-2); } .explain-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 10px; height: 2px; border-radius: 2px; background: var(--accent); opacity: 0.75; } .explain-list b, .explain-card p b { color: var(--text-1); font-weight: 600; } .explain-note { margin-top: 24px; background: var(--bg-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 26px 28px; font-size: 0.9375rem; line-height: 1.72; color: var(--text-2); } .explain-note b { color: var(--text-1); } /* Врезка задавала отступ только сверху. Когда она стоит ПЕРЕД рядом карточек (гео-страницы, секция «Регион»), между ними не оставалось ничего и блоки читались как склеенные - замечание владельца 29.07.2026 по скриншоту. */ .explain-note + .explain-grid { margin-top: 28px; } /* Два ряда карточек подряд (на гео это `cols-1` с широкой карточкой, а следом `cols-3`) стояли вплотную: у ряда задан только внутренний gap, отступа между рядами не было. Замечание владельца 30.07.2026 по Свердловской области. */ .explain-grid + .explain-grid { margin-top: 28px; } .explain-note-title { display: block; margin-bottom: 10px; font-size: 1rem; font-weight: 700; color: var(--text-1); letter-spacing: -0.01em; } .explain-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin-top: 14px; } /* ── ИНФО-ГАЙДЫ И ХАБ /poleznoe ── Раздел собран на тех же .explain-* карточках, что и разбор выше: своей вёрстки у гайдов больше нет (tools/build_guides.py). Здесь только то, чего в шаблоне нет вовсе: хлебные крошки, связный текст статьи, номер этапа и карточка-ссылка. Гриды берутся готовые (.explain-grid), собственных медиазапросов не заводим. */ /* Хлебные крошки: на гайдах второй уровень вложенности, и без них путь наверх виден только из подвала. Дублируют BreadcrumbList в разметке страницы. */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 0.8125rem; line-height: 1.5; color: var(--text-3); } .breadcrumbs a { color: var(--text-2); } .breadcrumbs a:hover { color: var(--accent); } .crumb-sep { color: var(--text-3); opacity: 0.6; } /* Связный текст гайда. Ширина колонки ограничена читаемой строкой: .container даёт 1160px, а это 150+ знаков в строке - глаз теряет начало следующей. */ .guide-prose { max-width: 780px; margin: 0 auto; } .guide-prose p { font-size: 1rem; line-height: 1.8; color: var(--text-2); } .guide-prose p + p { margin-top: 16px; } .guide-prose b { color: var(--text-1); font-weight: 600; } .guide-prose a { color: var(--accent); text-decoration: underline; } .guide-prose .explain-list { margin: 18px 0; } .guide-prose .explain-note { margin-top: 22px; } /* Номер этапа. Декоративный: порядок читается самим порядком карточек, поэтому в разметке он aria-hidden. */ .step-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; margin-bottom: 16px; background: var(--accent); color: #fff; font-size: 0.9375rem; font-weight: 700; } /* Карточка-ссылка: кликается целиком, поэтому это , а не блок со ссылкой внутри - в фокус попадает один элемент, а не два. Подпись «Читать» прижата к низу через margin-top:auto, иначе в ряду она висит на трёх разных уровнях. */ .link-card { display: flex; flex-direction: column; transition: transform 0.4s var(--silk), box-shadow 0.4s var(--silk), border-color 0.4s var(--silk); } .link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-border); } .link-card-more { margin-top: auto; padding-top: 18px; font-size: 0.875rem; font-weight: 600; color: var(--accent); } @media (max-width: 1024px) { .explain-grid { grid-template-columns: 1fr; } .lead-inner { grid-template-columns: 1fr; gap: 40px; padding: 48px; } } @media (max-width: 768px) { .explain-card { padding: 26px 22px; } .explain-note { padding: 22px 20px; } .explain-cols { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 768px) { .lead-section { padding: 72px 0; } .lead-inner { padding: 32px 24px; gap: 32px; } } @media (max-width: 480px) { .lead-inner { padding: 26px 18px; } .cookie-banner { flex-direction: column; align-items: stretch; } .cookie-actions { margin-left: 0; } .cookie-btn { flex: 1; } } /* ── ПРАВКИ ПО ЗАМЕРУ ВЁРСТКИ 29.07.2026 ── Проверка на ширинах 360-1920 по 13 типам страниц. Ниже - только те дефекты, которые замерены в пикселях, а не «кажется тесно». */ /* D1. Гамбургер сжимался во флексе. На /biznes/ приписка «Бизнес» в логотипе доводит ряд до 298 px при 296 доступных на 360 px: зазор до гамбургера 0, сам он ужимается с 28 до 26 px, а на 320 px - до 8 px, то есть в огрызок. Причина в отсутствии flex-shrink: во флексе сжимается именно он. D5. Он же - главный элемент мобильной навигации, а тап-цель была 28x24 px при рекомендованных 44x44. Обе задачи решаются одним блоком. */ .nav-hamburger { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 10px; margin-right: -10px; align-items: center; justify-content: center; } /* ⚠️ Полоски гамбургера - пустые без содержимого, и ширину они брали от align-items: stretch родителя. Строка align-items: center выше (правка тап-цели 29.07.2026) схлопнула их в ноль: кнопка 44x44 осталась и нажималась, а на экране было пустое место - на мобильном пропала вся навигация. Поймал владелец на скриншоте 29.07.2026. Ширина задана явно, чтобы полоски больше не зависели от выравнивания родителя. */ .nav-hamburger span { width: 22px; align-self: center; } @media (max-width: 400px) { /* .container сжимается медиазапросом до 20 px, а .nav-inner - отдельный селектор, и его 32 px оставались. Возвращаем те же 20 px ряду шапки. */ .nav-inner { padding: 0 20px; } } @media (max-width: 380px) { /* Самый узкий реальный экран. В юр-разделе бренд несёт ещё и плашку «Бизнес», ряд занимает 270 px при 280 доступных, и зазор до гамбургера падает в ноль. Уменьшаем сам бренд, а не гамбургер: гамбургер - тап-цель и сжиматься не должен (замер 29.07.2026: на 320 px он ужимался до 8 px). */ .nav-inner .nav-logo { font-size: 0.95rem; } .nav-logo-mark { height: 20px; margin-right: 6px; } .nav-logo .nav-logo-suffix { min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; } } /* D5. Чекбокс согласия был 13x13 px (дефолт браузера, размеры не задавались). Это обязательный для отправки формы элемент - промахиваться по нему нельзя. */ .lead-consent input { width: 22px; height: 22px; } /* D5. Кнопки cookie-баннера были 39 px по высоте. Баннер перекрывает первый экран, пока не закрыт, поэтому его кнопки должны нажиматься с первого раза. */ .cookie-btn { min-height: 44px; } /* D5. «Развернуть все» у FAQ - текстовая кнопка высотой 19 px. Отступы дают тап-цель, не меняя вид: сама подпись остаётся на месте, растёт только кликабельная область (site.css не редактируется, поэтому здесь). */ .faq-toggle-all { padding: 12px 4px; min-height: 44px; display: inline-flex; align-items: center; } /* D6. На 360-390 px баннер занимал 149 px и накрывал обе кнопки первого экрана гео-страниц (вьюпорт 800, баннер с 635). Высоту даёт вертикальная раскладка: текст над кнопками, кнопки друг под другом. Кнопки помещаются в ряд и на 360 px (137+154+12 = 303 при 320 доступных) - оставляем в ряд, вертикально переносится только текст. */ @media (max-width: 480px) { .cookie-actions { display: flex; flex-direction: row; gap: 10px; } } /* ── ДЛИННОЕ СЛОВО В H1 ПЕРВОГО ЭКРАНА (повтор TP-79, поймано 28.07.2026) ── Шаблон рассчитан на короткие английские слова: нижняя граница clamp у .hero-title - 2.6rem, то есть на 360 px кегль не уменьшается вовсе. Слово «техприсоединение» (16 знаков курсивом) в такой кегль не влезает, вылезает за край и РАСТЯГИВАЕТ контейнер - вправо уезжает уже весь первый экран, включая абзац и кнопки. Лечится в два хода: кегль на узких экранах опускается ниже шаблонного предела, а слову разрешается перенос по слогам (у страниц lang="ru", Chrome переносит «тех-присоединение» сам). Первая редакция правки опускала кегль до 1.75rem - владелец справедливо сказал, что «Электричество на участок» стало мелким: под редкое длинное слово подгонялись все заголовки сразу. Держим 2.2rem - это на 16% меньше шаблонных 2.6rem, а не вдвое, и длинному слову хватает. Проверять правку на самом длинном слове макета, а не на первом попавшемся. */ @media (max-width: 480px) { .hero-title { font-size: clamp(2.2rem, 8.8vw, 2.6rem); overflow-wrap: break-word; hyphens: auto; } } /* D7 (замер 29.07.2026). Переносы включались только до 480 px, а с 481 кегль возвращался к шаблонным 41.6 px без права переноса. Замер на самом длинном заголовке (`/chto-takoe-epu`) при 481 px: min-content ширина H1 = 417 px при 441 доступных - запас 24 px, то есть заголовок на один-два знака длиннее ломает первый экран, и в зоне 481-520 px ловящего медиазапроса нет вообще. У гео эта дыра уже закрыта (geo.css работает до 768 px) - выравниваем апекс и гайды по нему. Кегль не трогаем: до 768 px он шаблонный и это нормально, нужна только возможность переноса. */ @media (min-width: 481px) and (max-width: 768px) { .hero-title { overflow-wrap: break-word; hyphens: auto; } } /* D8 (замер 29.07.2026). `.explain-grid` схлопывался в одну колонку уже на 1024 px: карточка становилась 960 px, а строка внутри - около 120 знаков. Комфортный предел примерно вдвое меньше. На 1024 (это ландшафтный планшет, не телефон) две колонки помещаются свободно; одна остаётся с 768 px. */ @media (max-width: 1024px) and (min-width: 769px) { .explain-grid { grid-template-columns: repeat(2, 1fr); } .explain-grid.cols-2, .explain-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } /* ═══ ЮРИДИЧЕСКИЕ СТРАНИЦЫ: /oferta, /privacy, /consent, /cookie ═══ Собираются генератором tools/build_legal_html.py из docs/legal-final/*.md. Задача блока одна: длинный сплошной документ должен читаться, в том числе с телефона. В шаблоне подходящего компонента нет - все его текстовые блоки рассчитаны на 3-5 строк, а здесь 40-50 тысяч знаков нумерованных пунктов, таблиц и определений. Поэтому компонент написан с нуля, но только на токенах и брейкпоинтах шаблона (--accent, --surface, --border, --radius, 1024/768/480). Три решения, ради которых блок и существует: * ширина колонки. Контейнер шаблона - 1160px, на такой строке глаз теряет начало следующей. Здесь колонка сужена до 820px: около 75 знаков в строке; * межстрочный интервал 1.78 и отбивка между абзацами вместо красной строки: юридический текст читают выборочно, абзац должен ловиться взглядом; * нумерация пунктов. Номер вида «2.3.6.» вынесен в отдельный элемент с висячим отступом, и перенос строки выравнивается по началу текста, а не уезжает под номер. Сам номер приходит из документа и не меняется. Сброс шаблона (`*{margin:0;padding:0}` и `ul{list-style:none}`) обнуляет всю типографику потока, поэтому отступы абзацев, списков и маркеры восстановлены здесь явно. Класс .reveal на документе сознательно не используется: он ставит opacity:0 до срабатывания наблюдателя, а текст договора обязан быть виден и без JavaScript. */ .legal { position: relative; z-index: 1; /* шапка шаблона - position:fixed, отступ сверху повторяет первый экран */ padding: 124px 0 72px; } .legal-shell { max-width: 820px; } /* Хлебные крошки. Дублируют BreadcrumbList из JSON-LD: разметка без видимой цепочки для Google - разметка невидимого контента. */ .legal-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 0.8125rem; line-height: 1.5; color: var(--text-3); } .legal-crumbs a { color: var(--accent); font-weight: 600; } .legal-crumbs a:hover { text-decoration: underline; } .legal-crumbs-sep { color: var(--text-3); opacity: 0.6; } .legal-doc { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 48px 52px; font-size: 1.0625rem; line-height: 1.78; color: var(--text-2); } /* ── заголовки ── Уровни приходят непрерывной цепочкой h1 -> h2 -> h3: генератор пересчитывает их при рендеринге (PAGE-016). Здесь только вид. */ .legal-doc h1 { font-size: clamp(1.5rem, 3.4vw, 1.95rem); line-height: 1.22; letter-spacing: -0.015em; color: var(--text-1); font-weight: 800; margin-bottom: 18px; } .legal-doc h2 { position: relative; padding-left: 16px; margin: 40px 0 16px; font-size: 1.28rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--text-1); font-weight: 800; } /* Акцентная риска слева вместо подчёркивания: разделы уже отбиты линейкой
, которая приходит из документа, и вторая горизонталь дала бы двойную черту. */ .legal-doc h2::before { content: ''; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 3px; border-radius: 2px; background: var(--accent); } .legal-doc h3 { margin: 28px 0 10px; font-size: 1.06rem; line-height: 1.4; color: var(--text-1); font-weight: 700; } .legal-doc h4 { margin: 22px 0 8px; font-size: 0.97rem; line-height: 1.45; color: var(--text-1); font-weight: 700; } .legal-doc h1 + h2 { margin-top: 0; } /* подзаголовок документа под его названием */ .legal-doc [id] { scroll-margin-top: 96px; } /* якорь на пункт не уезжает под шапку */ /* ── абзацы и пункты ── */ .legal-doc p { margin: 0 0 14px; } .legal-doc p:last-child { margin-bottom: 0; } .legal-doc strong { color: var(--text-1); font-weight: 700; } .legal-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* Висячий отступ на flex: номер - первый элемент фиксированной ширины, текст - второй, и перенос строки встаёт ровно под началом текста. text-indent тут не годится: ширина номера плавает от «1.» до «2.3.6.», и выравнивание разъезжается. Ровно два ребёнка обязательны: генератор заворачивает текст пункта в .lg-text, иначе жирный зачин пункта стал бы третьей колонкой и вытянулся в столбик. */ .legal-doc p.lg-clause { display: flex; align-items: baseline; gap: 8px; } .legal-doc .lg-num { flex: 0 0 auto; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; } .legal-doc .lg-text { flex: 1 1 auto; min-width: 0; } .legal-doc .lg-d1 > .lg-num { min-width: 1.6em; } .legal-doc .lg-d2 > .lg-num { min-width: 2.5em; } .legal-doc .lg-d3 > .lg-num { min-width: 3.4em; } .legal-doc .lg-d4 > .lg-num { min-width: 4.3em; } /* Вложенные пункты отбиваются влево, чтобы уровень был виден без чтения номера. */ .legal-doc .lg-d3 { margin-left: 18px; } .legal-doc .lg-d4 { margin-left: 34px; } /* ── списки: маркер шаблона (короткая акцентная риска), как в .explain-list ── */ .legal-doc ul { margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .legal-doc li { position: relative; padding-left: 20px; } .legal-doc li::before { content: ''; position: absolute; left: 0; top: 0.78em; width: 9px; height: 2px; border-radius: 2px; background: var(--accent); opacity: 0.7; } /* ── определения и врезки ── */ .legal-doc blockquote { margin: 20px 0; background: var(--bg-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 18px 22px; } .legal-doc blockquote p:last-child { margin-bottom: 0; } .legal-doc hr { border: none; border-top: 1px solid var(--border); margin: 36px 0 0; } .legal-doc code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9em; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; } /* Незаполненное поле документа ⟦…⟧: помечено, чтобы пустое место было видно. */ .legal-doc .lg-ph { background: var(--accent-ghost); border-bottom: 1.5px dashed var(--accent-border); border-radius: 3px; padding: 0 3px; font-weight: 600; color: var(--text-1); } /* ── таблицы ── Четыре колонки с длинным текстом в 320px не помещаются никакими средствами, поэтому таблица не ломается по ячейкам, а прокручивается внутри своей обёртки: так строка остаётся читаемой, а страница по горизонтали не едет. */ .legal-doc .lg-tblwrap { margin: 20px 0 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); } .legal-doc table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9375rem; } .legal-doc th, .legal-doc td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.6; } .legal-doc th { background: var(--bg-alt); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } .legal-doc tbody tr:last-child td { border-bottom: none; } /* ── полоса документов пакета: связывает четыре юр-страницы и контакты ── */ .legal-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 28px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; color: var(--text-3); } .legal-docs-label { width: 100%; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .legal-docs a { color: var(--accent); font-weight: 600; } .legal-docs a:hover { text-decoration: underline; } .legal-docs [aria-current] { color: var(--text-3); font-weight: 600; } @media (max-width: 768px) { .legal { padding: 96px 0 48px; } .legal-doc { padding: 30px 24px; border-radius: var(--radius); font-size: 1rem; line-height: 1.75; } .legal-doc h2 { margin-top: 32px; } .legal-docs { padding: 18px 20px; } } /* Контроль по 360px: отступы контейнера ужимаются, чтобы колонке осталось около 300px, иначе строка рвётся на 4-5 слов и текст перестаёт читаться. */ @media (max-width: 480px) { .legal-shell { padding: 0 14px; } .legal-doc { padding: 22px 16px; } .legal-doc h2 { padding-left: 12px; } .legal-doc p.lg-clause { gap: 6px; } .legal-doc .lg-d3 { margin-left: 10px; } .legal-doc .lg-d4 { margin-left: 20px; } .legal-doc .lg-d3 > .lg-num, .legal-doc .lg-d4 > .lg-num { min-width: 0; } } /* ── Составные термины с дефисом в крупных заголовках ────────────────────── Браузер считает дефис законной точкой переноса, поэтому «портал-ТП» в H1/H2 разъезжается на «портал-» и «ТП» по двум строкам: замечание владельца 28.07.2026 на гайде о личном кабинете. Это третий случай одной и той же болезни (TP-79 - название региона в H1 на гео, TP-83 - «техприсоединение» на апексе), поэтому лечится не подгонкой конкретного заголовка, а общим классом. Почему класс, а не неразрывный дефис U+2011 в тексте: «портал тп» - головной ключ целого кластера (TD-29, TD-52), и подменять символ внутри ключевого слова ради вёрстки нельзя. Класс меняет только перенос, текст остаётся тем же. */ .nb { white-space: nowrap; } /* Приписка раздела в логотипе (юр-ветка). Обязана быть видимой: она различает анкор ссылки, а невидимый текст в анкоре - это уже другая проблема. Селектор обязательно двойной. В шаблоне стоит `.nav-logo span { color: var(--accent) }`, и его специфичность (0,1,1) выше одиночного класса (0,1,0): при `.nav-logo-suffix` текст красился в синий на синем фоне и пропадал - оставался пустой прямоугольник (замечание владельца 28.07.2026). */ .nav-logo .nav-logo-suffix, .footer-brand .nav-logo .nav-logo-suffix { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 9px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 0.625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; position: relative; top: -1px; } .footer-brand .nav-logo .nav-logo-suffix { background: var(--accent-light); color: #0b1220; } /* Две карточки в сетке, рассчитанной на три: правая треть оставалась пустой, блок читался как незавершённый (замечание владельца 28.07.2026). Ограничиваем ширину и центрируем - карточки становятся шире и ряд выглядит цельным. */ .explain-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin-inline: auto; } @media (max-width: 820px) { .explain-grid.cols-2 { grid-template-columns: 1fr; } } /* ═══ КАЛЬКУЛЯТОР МОЩНОСТИ (/raschet-moshchnosti) ═══ Единственная страница-инструмент на сайте: остальные читают, эту «делают». В шаблоне интерактивных компонентов нет вообще (форм там тоже нет), поэтому блок собран заново, но строго на токенах шаблона: --surface-2, --border, --radius, --accent, --shadow-*, и на его же брейкпоинтах 1024 / 768 / 480. Три правила, которые здесь нельзя нарушать: 1) Ни одного инлайнового грида: инлайн не перебивается медиазапросом (TP-50). 2) Тап-цели не меньше 44x44 (D5 замера вёрстки 29.07.2026): шаг «плюс/минус» и поле количества заданы в 44 px явно. 3) Таблица источников скроллится ВНУТРИ своей обёртки, а не тянет страницу: overflow-x на .calc-table-wrap, min-width на самой таблице. Тот же приём, что у таблиц юр-страниц (.legal-doc table). */ .calc-shell { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; } /* Панель результата липкая: список приборов длинный, и без залипания человек отмечает технику вслепую, не видя, что происходит с числом. */ .calc-panel { position: sticky; top: 96px; } .calc-panel-inner { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 26px 24px; } .calc-figure { text-align: center; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .calc-figure-value { display: block; font-size: 2.75rem; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); } .calc-figure-unit { font-size: 1.375rem; font-weight: 700; margin-left: 4px; } .calc-figure-label { display: block; margin-top: 8px; font-size: 0.8125rem; line-height: 1.5; color: var(--text-3); } .calc-rows-out { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .calc-out { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.875rem; line-height: 1.5; color: var(--text-2); } .calc-out b { color: var(--text-1); font-weight: 700; white-space: nowrap; } /* Вердикт по льготной категории. Четыре состояния: пусто, укладывается, впритык, выше 15 кВт. Состояние «впритык» появилось 29.07.2026: округление до десятых давало два разных вердикта на одинаковой надписи «15,0 кВт», и человек у самой границы не видел, что запас исчерпан. Цветом закодировано только настроение: смысл всегда написан словами, иначе дальтоник и распечатка на чёрно-белом принтере теряют ответ. */ .calc-verdict { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--text-3); border-radius: var(--radius); background: var(--bg-alt); font-size: 0.875rem; line-height: 1.6; color: var(--text-2); } .calc-verdict b { color: var(--text-1); } .calc-verdict.is-ok { border-left-color: var(--accent); } .calc-verdict.is-edge { border-left-color: var(--warn); } .calc-verdict.is-over { border-left-color: var(--danger); } .calc-panel .calc-cta { width: 100%; margin-top: 18px; justify-content: center; } .calc-panel-note { margin-top: 14px; font-size: 0.75rem; line-height: 1.6; color: var(--text-3); } /* ── список техники ── */ .calc-group { margin-bottom: 26px; } .calc-group:last-child { margin-bottom: 0; } .calc-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding-bottom: 10px; border-bottom: 2px solid var(--accent-border); } .calc-group-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-1); } .calc-group-hint { font-size: 0.8125rem; line-height: 1.5; color: var(--text-3); } .calc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 11px 6px; border-bottom: 1px solid var(--border); border-radius: 10px; } .calc-row-name { font-size: 0.9375rem; line-height: 1.45; color: var(--text-1); } .calc-row-meta { display: block; margin-top: 3px; font-size: 0.8125rem; line-height: 1.5; color: var(--text-3); } .calc-qty { display: flex; align-items: center; gap: 6px; justify-self: end; } .calc-step { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-1); font: inherit; font-size: 1.125rem; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color 0.3s var(--silk), background 0.3s var(--silk); } .calc-step:hover { border-color: var(--accent-border); background: var(--accent-ghost); } .calc-input { width: 68px; height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text-1); font: inherit; font-size: 0.9375rem; font-weight: 600; text-align: center; -moz-appearance: textfield; } .calc-input::-webkit-outer-spin-button, .calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .calc-row.is-on { background: var(--accent-ghost); } .calc-row.is-on .calc-input { border-color: var(--accent-border); } .calc-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; } .calc-reset { min-height: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; } .calc-reset:hover { border-color: var(--accent-border); color: var(--accent); } .calc-toolbar-hint { font-size: 0.8125rem; line-height: 1.5; color: var(--text-3); } /* ── таблица оснований ── Скролл живёт в обёртке. min-width на таблице: чтобы пять колонок не схлопывались в кашу, а честно уезжали под горизонтальный скролл. */ .calc-table-wrap { margin-top: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .calc-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.875rem; } .calc-table caption { caption-side: top; text-align: left; padding: 16px 18px 4px; font-size: 0.8125rem; line-height: 1.6; color: var(--text-3); } .calc-table th, .calc-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.55; } .calc-table thead th { background: var(--bg-alt); color: var(--text-1); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .calc-table tbody th { font-weight: 600; color: var(--text-1); } .calc-table td { color: var(--text-2); } .calc-table .calc-num { white-space: nowrap; font-variant-numeric: tabular-nums; } .calc-table .calc-src { font-size: 0.8125rem; color: var(--text-3); } .calc-table tbody tr:last-child th, .calc-table tbody tr:last-child td { border-bottom: 0; } .calc-group-row th { background: var(--bg-alt); color: var(--text-1); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* Компактная нормативная табличка (коэффициенты спроса, ориентиры РД): те же правила, но колонок мало, поэтому min-width меньше. */ .calc-table.is-narrow { min-width: 420px; } .calc-legend { margin-top: 14px; font-size: 0.8125rem; line-height: 1.7; color: var(--text-3); } .calc-legend b { color: var(--text-2); } /* Итоговая строка для узких экранов. На десктопе не показывается вовсе: там работает липкая панель сбоку, и она ничему не мешает. Появилась 29.07.2026 по замечанию владельца. До неё на мобильном липла сама панель: высотой около 600 px при экране 844 она закрывала почти всё, и человек листал список приборов, не видя ни одной строки, пока не проскроллит панель насквозь. Залипание правильное по замыслу (число должно быть на экране), но залипать должно НЕ то: не весь блок результата, а одно решающее число. */ .calc-bar { display: none; } @media (max-width: 1024px) { .calc-shell { grid-template-columns: 1fr; gap: 24px; } /* Панель больше НЕ липкая: она стоит первой в потоке как сводка, её читают до начала работы со списком, а дальше её роль берёт на себя нижняя строка. */ .calc-panel { position: static; order: -1; } .calc-panel-inner { padding: 20px 18px; } .calc-figure-value { font-size: 2.25rem; } .calc-figure { padding-bottom: 14px; } .calc-rows-out { margin-top: 12px; } /* sticky, а не fixed: строка прилипает к низу экрана ровно пока на экране её контейнер - список приборов. Дошли до конца списка - строка спокойно уехала вместе с ним, и над формой заявки и FAQ уже не висит. Это делает CSS, без единой строки скрипта и без зависимости от событий прокрутки. */ .calc-bar.is-visible { display: block; position: sticky; bottom: 0; z-index: 20; margin-top: 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 -6px 22px rgba(15, 23, 42, 0.12); padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } .calc-bar-in { display: flex; align-items: center; gap: 12px; } /* Число и подпись - одна тап-цель: возвращает к полной панели наверху. */ .calc-bar-back { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; } .calc-bar-value { font-size: 1.375rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; } .calc-bar-unit { font-size: 0.875rem; font-weight: 700; margin-left: 3px; } .calc-bar-state { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.35; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Состояние дублируется словом, а не только цветом: то же правило, что у вердикта. */ .calc-bar.is-ok .calc-bar-state { color: var(--accent); } .calc-bar.is-edge .calc-bar-state { color: var(--warn); } .calc-bar.is-over .calc-bar-state { color: var(--danger); } .calc-bar-cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius); border: 0; background: var(--accent); color: #fff; font-size: 0.875rem; font-weight: 700; text-decoration: none; white-space: nowrap; } } @media (max-width: 560px) { .calc-row { grid-template-columns: 1fr; } .calc-qty { justify-self: start; } } /* ═══ СТРОКА «ЗАЯВИТЕЛЬ» ПОД H1 (AR-77, сигнал аудитории № 3) ═══ На гео этот стиль лежит в geo.css, но апексные страницы geo.css не грузят (проверено: apex подключает только site.css и extra.css), поэтому здесь заведена своя копия правила. Значения совпадают с geo.css намеренно: одна вещь на всём сайте выглядит одинаково. Кегль меньше лида и цвет приглушён: это подпись к заголовку, а не второй лид. */ .hero-applicant { margin: 10px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--text-3); } .hero-applicant a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .hero-applicant a:hover { color: var(--accent); } /* ─── До 480 px строка сворачивается: аудиторию несёт бейдж первого экрана ─── Решение владельца 30.07.2026 (TD-107). Два обязательных требования делили один экран: AR-59 хочет целевую кнопку выше 560 px при 360x640, а AR-77 сигнал 3 добавляет над ней строку. На телефоне это два сообщения об одном и том же: бейдж уже говорит «Физлицам · ⟨тема⟩». У аудитории «обе» строка-развилка стоит двух строк на 360 px, и её вопрос тем более снимается бейджем. Правило лежит ЗДЕСЬ, а не в geo.css, потому что класс есть и на гео, и на апексе, а geo.css апексные страницы не грузят (AR-81 п. 28: чинить общий компонент, а не частный случай). Медиазапрос специфичности не добавляет, но конкурирующего объявления display у .hero-applicant нет ни в одном файле - проверено. */ /* Граница 480, а не 479: ровно на 480 CSS-px перестановка первого экрана (маркер AR-59-CTA-ABOVE-FOLD) уже действовала, а это правило ещё нет, и строка «Заявитель» вылезала между дисклеймером и лидом. Шов найден независимой проверкой 31.07.2026. Один режим - одна граница. */ @media (max-width: 480px) { .hero-applicant { display: none; } /* Переключатель воронки - исключение, и оно принципиальное. Строку выше сворачивать можно: она дублирует бейдж. Переключатель ничего не дублирует, это единственный выход из чужой воронки, и на телефоне он нужнее, чем на десктопе: там шапка свёрнута в гамбургер и других путей на виду нет. Замечание владельца 30.07.2026 - «в том числе в мобильной версии». */ .hero-applicant-switch { display: flex; } } /* ⚠️ Базовое правило строки стоит ЗДЕСЬ, вне медиазапроса. Оно один раз уже уехало внутрь `@media (max-width: 479px)` при автоматической замене блока по первому вхождению имени класса - и переключатель работал только на телефоне, а на десктопе показывался голым текстом. Поймал владелец. */ .hero-applicant-switch { display: flex; flex-wrap: wrap; align-items: center; margin: 18px 0 18px; } .hero-sw-label { color: var(--text-3); font-size: 0.8125rem; line-height: 1; margin-right: 12px; } /* Сегментный переключатель - вариант владельца 30.07.2026. Обе стороны подписаны внутри одной дорожки, подсветка едет под текущую. Ширина 176 px вместо 250 в образце: элемент стоит между H1 и лидом на 110 страницах, а первый экран у нас и так тесный - CTA лежит на 619-875 px при норме AR-59 в 560. Палитра наша, а не из образца: тёмная дорожка #212121 с белой рамкой на светлом первом экране читалась бы как чужая деталь, а решение владельца по шаблону - менять содержание, а не оформление. */ .aud-seg { --seg-w: 176px; position: relative; display: inline-flex; align-items: center; width: var(--seg-w); border-radius: 8px; overflow: hidden; background: var(--bg-alt); border: 1px solid var(--border); } .aud-seg-item { position: relative; z-index: 1; width: 50%; padding: 7px 4px; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; line-height: 1.15; color: var(--text-3); text-decoration: none; white-space: nowrap; transition: color .15s ease; } .aud-seg-item.is-current { color: #fff; } a.aud-seg-item:hover { color: var(--accent); } .aud-seg-mark { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: calc(var(--seg-w) / 2); border-radius: 7px; background: var(--accent); transition: transform .15s ease; } .aud-seg.on-yur .aud-seg-mark { transform: translateX(calc(var(--seg-w) / 2)); } .aud-seg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .aud-switch-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } @media (max-width: 700px) { /* На телефоне бегунок крупнее: он остаётся единственным выходом из чужой воронки, когда шапка свёрнута в гамбургер. Нажимаемая область и здесь идёт от псевдоэлемента, поэтому 44 px держатся без раздувания дорожки. */ .aud-switch { font-size: 1rem; } } /* ═══ ПЕРВЫЙ ЭКРАН ВИДЕН БЕЗ JAVASCRIPT ═══════════════════════════════════ site.css задаёт .reveal{opacity:0} безусловно, а класс .visible навешивает только наблюдатель в site.js. Без скрипта первый экран не появлялся вовсе: замер приёмки 30.07.2026 на /poleznoe с заблокированными скриптами - 28 элементов .reveal, .visible получили 0, скрыто 1092 знака из 3233. Два сценария, и они разные. (1) Скрипты выключены пользователем - это ловит медиапризнак scripting:none. (2) НАШ настоящий риск: site.js тянется с апекса абсолютным адресом, и при неприменённой правке CSP файл режется политикой - с точки зрения браузера скриптинг при этом ВКЛЮЧЁН, и scripting:none не срабатывает. Поэтому признак не «скрипты разрешены», а «наш скрипт жив». Конструкция «от обратного»: по умолчанию видно, скрываем только когда страница доказала, что признак поставлен. Признак - класс js на корневом элементе, его вешает строка в оболочки (site_shell.head). Безопасная деградация: страница без признака (например, собранная генератором, который ещё не прогоняли) просто не анимируется и показывает контент сразу. Это нужное поведение, а не поломка - дотягиваться до чужих генераторов не надо. Специфичность: .reveal здесь (0,1,0) и перебивает site.css поздним порядком подключения; html.js .reveal - (0,2,1), поэтому возвращает исходное состояние без !important; html.js .reveal.visible - (0,3,1) и перекрывает предыдущее. Правило PAGE-026 (скрытый текст, вес 5, P0) в движке не проверяется вовсе (nodata, нужен headless-рендер), так что проверка тут только глазами. */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(28px); } html.js .reveal.visible { opacity: 1; transform: none; } /* ───────────────────────────────────────────────────────────────────────────── МАРКЕР БЛОКА: AR-25-CLOSED-MOBILE-MENU Блок адресуется этим комментарием, а не именем класса: имя класса в CSS не уникально и не упорядочено, и замена «по первому вхождению .mobile-menu» с равной вероятностью попадёт в базовое правило и в мобильное переопределение (TP-93). Закрытое мобильное меню не участвует в табуляции. Шаблонный site.css задаёт .mobile-menu{position:fixed;inset:0;opacity:0; pointer-events:none} и НЕ снимает display ни в одном медиазапросе. Меню поэтому прозрачно и не ловит мышь, но остаётся в потоке: первые 9-17 нажатий Tab на любой из 264 страниц уходили по невидимым ссылкам, до логотипа шапки. Клавиатурный посетитель на каждой странице проходил меню вслепую. Правило намеренно ВНЕ медиазапросов: это базовое состояние компонента, а не адаптация под ширину. Внутри @media оно чинило бы одни ширины и оставляло дефект на других - ровно тот случай, который TP-93 описывает как «работает только на узком экране». Специфичность: .mobile-menu здесь (0,1,0), как и в site.css, и выигрывает поздним подключением extra.css. .mobile-menu.open - (0,2,0) и перекрывает первое правило без !important. Класс open вешает site.js на кнопку-гамбургер; переход по opacity из site.css при открытии сохраняется, при закрытии меню исчезает сразу - это принятая цена доступности (AR-25). site.css - файл шаблона, править его запрещено, поэтому лечение здесь. ───────────────────────────────────────────────────────────────────────── */ .mobile-menu { display: none; } .mobile-menu.open { display: flex; } /* ───────────────────────────────────────────────────────────────────────────── МАРКЕР БЛОКА: AR-40-APEX-LINK-CARD Карточка блока «Дальше по теме» на апексе. Ссылкой является СТРОКА анкора внизу карточки, а не карточка целиком. Пока ссылкой была вся карточка (`build_guides.link_cards` отдавал ), анкором становился весь её текст - одинаковый со всех источников, а PAGE-042 требует у акцептора минимум две разные формулировки. Подпись при этом была «Читать →», что прямо запрещает AR-69 и LINK-005. Размер таргета при этом не теряется: псевдоэлемент растягивает кликабельную область ссылки на всю карточку. Размена «большой таргет против разнообразия анкоров» тут нет - псевдоэлемент даёт и то и другое (BHVR-014 требует не менее 24x24 CSS-px, рекомендация 44-48). Правило вне медиазапросов: это базовое устройство компонента, а не адаптация (TP-93). Специфичность .apex-link-card - (0,1,0), поздним подключением extra.css перебивает шаблон; вложенные селекторы (0,2,0) и (0,2,1). ───────────────────────────────────────────────────────────────────────── */ .apex-link-card { position: relative; display: flex; flex-direction: column; transition: transform 0.4s var(--silk), box-shadow 0.4s var(--silk), border-color 0.4s var(--silk); } .apex-link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-border); } .apex-link-card .region-more { display: block; } .apex-link-card .region-more:hover { text-decoration: underline; } .apex-link-card .region-more::after { content: ""; position: absolute; inset: 0; } /* ───────────────────────────────────────────────────────────────────────────── МАРКЕР БЛОКА: AR-42-LEGAL-RELATED «Смежные документы» под текстом юр-документа. Ставится ПОСЛЕ article.legal-doc и текста документа не касается: вычитанная редакция не трогается (TD-42). Причина блока: у четырёх юр-документов контентных исходящих ссылок не было ни одной, единственная ссылка на странице - крошка «Главная», а она в