/* Стили страницы /compare. Написаны заново на токенах сайта: тема исходного сервиса (Apple-подобная, акцент #0071e3, радиус 18px, контейнер 1180px) не переносилась. Имена классов сохранены — поэтому 61 КБ логики в compare-*.js не тронуто. Исключение: .card и .sec переименованы в .cmp-card и .cmp-sec, эти имена у сайта уже заняты (style.css: карточка документа и аккордеон раздела). Спека: docs/superpowers/specs/2026-07-31-compare-page-design.md */ /* Порядок групп повторяет порядок правил в справочнике — исходном styles.css сервиса, — чтобы их можно было сверять сверху вниз. Блоки исходника .nav, .hero и .foot пропущены намеренно: шапку даёт style.css (и .nav там — наша навигация, переопределить её значило бы сломать шапку на всём сайте), заголовок страницы живёт в .cmp__title/.cmp__lead, подвала у сайта нет. */ /* ---------- Обёртки: ширина сайта вместо чужих 1180px ---------- */ /* У сервиса каждый крупный блок нёс собственный max-width:1180px. У сайта ширину задаёт .container (--container = 1450px, боковые отступы 24px), но ни одна страница не занимает эти 1450 целиком: .picker сужает контейнер до 1200px, .docs до 1120px, .lib до 1320px (style.css:360, 732, 1066). 1450 — рамка, а не ширина текста. /compare берёт 1320px — то же, что у /library: это такой же каталог карточек с фильтрами, и на 1320 таблица сравнения (JS ставит ей min-width 220 + 260 на модель, максимум 1260px) укладывается целиком, без прокрутки, при четырёх выбранных моделях. Блоки сервиса лежат в напрямую, своего .container у них нет, поэтому правило .container повторено здесь для них — остальные значения те же, что в style.css:113, второго стандарта ширины не заводится. */ .cmptabs, .controls, .grid, .compare, .tray__inner { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 calc(var(--u) * 4); } .cmp > .container { max-width: 1320px; } /* ---------- Заголовок страницы ---------- */ /* Один в один с .docs / .docs__title / .docs__lead (style.css:728) — чтобы первый экран /compare не отличался от /documents и /library. */ .cmp { padding: calc(var(--u) * 12) 0 calc(var(--u) * 6); } .cmp__title { font-size: 56px; font-weight: 400; letter-spacing: -0.05em; line-height: 1.05; } .cmp__lead { margin-top: calc(var(--u) * 3); max-width: 720px; font-size: 17px; line-height: 1.5; color: var(--muted); } /* ---------- Переключатель вкладок ---------- */ /* Тот же приём, что у .typeswitch и .size-switch сайта («таблетки», активная — заливка var(--fg)), но на ступень крупнее: 44px против 36 и 16px против 14. Переключателей на странице два, и они разного старшинства — вкладка выбирает инструмент, а .typeswitch внутри вкладки «Сравнить» выбирает тип установки. Одинаковый размер сделал бы их равными по весу. */ .cmptabs { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); margin-bottom: calc(var(--u) * 5); } .cmptabs__btn { height: calc(var(--u) * 7.5); padding: 0 calc(var(--u) * 3.5); border: 1px solid var(--line-solid); border-radius: var(--radius-c); background: var(--surface); font: inherit; font-size: 16px; font-weight: 500; color: var(--fg); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .cmptabs__btn:hover { border-color: var(--muted); } .cmptabs__btn.is-active { background: var(--fg); color: var(--surface); border-color: var(--fg); } /* :focus-visible, а не :focus — идиома сайта (style.css:122, 426). Кольцо обязано быть видно и на активной вкладке, залитой var(--fg), поэтому outline снаружи, а не внутри. */ .cmptabs__btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } /* ---------- Предупреждение о самой ссылке ---------- */ /* Ссылка, сделанная до пересборки каталога, и номера моделей, которые не открылись. Палитра отказа сайта (#b3261e на #fdecea, .unit-status--liq, style.css:1482) — та же, что у .suggest__msg--none: и то и другое означает «этой ссылке верить нельзя», а не «обратите внимание». Ширина и отступы контейнера повторяют .cmptabs (блок лежит в напрямую, своего .container у него нет), отрицательный верхний отступ подтягивает предупреждение к вкладкам, под которыми оно стоит. */ .cmpnote { width: 100%; max-width: 1320px; margin: calc(var(--u) * -3) auto calc(var(--u) * 5); padding: 0 calc(var(--u) * 4); } .cmpnote[hidden] { display: none; } .cmpnote__line { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.75) calc(var(--u) * 2.5); border-radius: var(--radius-m); background: #fdecea; font-size: 13px; line-height: 1.5; color: #b3261e; } .cmpnote__line + .cmpnote__line { margin-top: calc(var(--u)); } /* Знак приезжает из ::before, а не из текста: содержимое живой области объявляется диктору вслух, и «⚠» в нём стало бы словом. */ .cmpnote__line::before { content: '⚠'; flex: none; font-weight: 600; } /* ---------- Панель действий и переключатель «подсветить различия» ---------- */ .cmp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3); padding-top: calc(var(--u) * 3); border-top: 1px solid var(--line); } .toggle { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.5); font-size: 14px; color: var(--nav); cursor: pointer; } .toggle:hover { color: var(--fg); } .toggle input { accent-color: var(--fg); width: 16px; height: 16px; cursor: pointer; } /* ---------- Кнопки: только недостающие модификаторы ---------- */ .btn--ghost { background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--fg); } .btn--ghost:hover { background: var(--bg); } /* Значения — те же, что у .picker__submit:disabled (style.css:363): у сайта есть погашенное состояние кнопки, но привязано оно к конкретной кнопке /components, а не к .btn. */ button.btn:disabled { opacity: 0.35; cursor: not-allowed; } /* ---------- Панель фильтров ---------- */ /* У сервиса это была полоса во всю ширину окна с нижней границей. Сайт таких полос не знает: у него блок настроек — карточка на поверхности (ср. .unit-commerce, style.css:1404). */ .controls { margin-bottom: calc(var(--u) * 7); } .controls__inner { display: flex; flex-direction: column; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4); background: var(--surface); border: 1px solid var(--line-solid); border-radius: 12px; } .controls__row { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 3); align-items: flex-end; } /* Идиома счётчика — как у функциональных близнецов .docs__total (style.css:749) и .lib__total (style.css:1083): var(--font-mono), 12px, #9b9b9b, без болда — плоский приглушённый мета-текст. Раньше здесь был Geist 14px var(--muted), а вложенный span (число + type-badge) выбивался болдом и var(--fg) — при переходе между /library, /documents и /compare счётчик визуально не совпадал с соседними страницами. Убрана и .type-badge (ниже, была тем же болдом) — обе части строки теперь наследуют этот плоский стиль без исключений. */ .controls__meta { margin-left: auto; padding-bottom: calc(var(--u) * 1.5); font-family: var(--font-mono); font-size: 12px; color: #9b9b9b; } /* ---------- Переключатель типа установки ---------- */ /* Приём .size-switch (style.css:1382): «таблетки» с границей, активная — заливка var(--fg) и текст var(--surface). Подложки-дорожки, как у исходного сегментного контрола, у сайта нет. */ .typeswitch { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); align-self: flex-start; } .typeswitch__btn { height: calc(var(--u) * 6); padding: 0 calc(var(--u) * 2.5); border: 1px solid var(--line-solid); border-radius: var(--radius-c); background: var(--surface); font: inherit; font-size: 14px; color: var(--fg); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .typeswitch__btn:hover { border-color: var(--muted); } .typeswitch__btn.is-active { background: var(--fg); color: var(--surface); border-color: var(--fg); } /* .type-badge больше не переопределяет начертание/цвет — см. комментарий у .controls__meta: обе части мета-строки идут плоским font-mono/#9b9b9b. */ /* ---------- Поиск ---------- */ .search { position: relative; flex: 1 1 280px; min-width: 0; } .search__icon { position: absolute; left: calc(var(--u) * 2); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: var(--muted); pointer-events: none; } .search input { width: 100%; height: calc(var(--u) * 7); padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * 6); border: 1px solid var(--line-solid); border-radius: var(--radius-m); background: var(--surface); font: inherit; font-size: 15px; color: var(--fg); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .search input::placeholder { color: #9b9b9b; } /* :focus-visible, а не :focus — идиома сайта (style.css:122, 426): кольцо только от клавиатуры, не от клика мышью. outline:none стоит здесь же, а не в базовом правиле — иначе он гасит глобальный :focus-visible безусловно. */ .search input:focus-visible { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.08); } /* ---------- Фильтры ---------- */ .filters { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 2.5); align-items: flex-end; } .filter { display: flex; flex-direction: column; gap: calc(var(--u)); } .filter label { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } /* appearance не сбрасываем: своей стрелки у .filter нет (в отличие от .picker__select, где её рисует ::after), убрать родную было бы нечем. */ .filter select { height: calc(var(--u) * 7); padding: 0 calc(var(--u) * 1.5); border: 1px solid var(--line-solid); border-radius: var(--radius-m); background: var(--surface); font: inherit; font-size: 14px; color: var(--fg); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .filter select:hover { border-color: var(--muted); } /* :focus-visible, а не :focus — см. комментарий у .search input выше. */ .filter select:focus-visible { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.08); } .chk { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.5); padding-bottom: calc(var(--u) * 1.5); font-size: 14px; color: var(--nav); cursor: pointer; } .chk:hover { color: var(--fg); } .chk input { accent-color: var(--fg); width: 16px; height: 16px; cursor: pointer; } /* ---------- Сетка каталога и карточка модели ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: calc(var(--u) * 3); padding-bottom: calc(var(--u) * 8); } /* Карточка и её ховер — приём .lib-card (style.css:1264): граница, радиус 12, на ховере более тёмная граница, подъём на 2px и мягкая тень 6%. Чужие translateY(-4px) и тень 24px не переносились. Радиус 12px, а не --radius-m: 12px — то, чем на сайте набраны все карточки (.card, .lib-card, .unit-commerce), 6px сделал бы каталог непохожим на соседние страницы. */ .cmp-card { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 4); background: var(--surface); border: 1px solid var(--line-solid); border-radius: 12px; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .cmp-card:hover { border-color: #d4d4d4; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); transform: translateY(-2px); } .cmp-card:focus-within { border-color: var(--muted); } /* Выбранная карточка: акцента у сайта нет, поэтому выделяем удвоенным краем в цвете текста — тот же принцип, что у .chip.is-active, только контуром, иначе залитая карточка перебила бы содержимое. */ .cmp-card.is-selected { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); } .cmp-card.is-own { border-color: #d4d4d4; } .cmp-card.is-own:hover, .cmp-card.is-own.is-selected { border-color: var(--fg); } /* wrap обязателен: в узкой колонке бренд и оценка со звёздами не встают в одну строку и вылезали за край карточки (на 390px давали 2px горизонтальной прокрутки всей странице). */ .card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--u)) calc(var(--u) * 1.5); } .card__brand { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } /* «наш бренд» — залитая «таблетка», сильнейший знак в монохроме сайта. */ .card__own { display: inline-flex; align-items: center; height: 18px; margin-left: calc(var(--u)); padding: 0 7px; border-radius: var(--radius-c); background: var(--fg); color: var(--surface); font-size: 10px; font-weight: 500; letter-spacing: 0.04em; vertical-align: middle; } .card__seg { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u)); margin-top: calc(var(--u) * -1); font-size: 12px; color: var(--muted); } .card__name { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.35; overflow-wrap: anywhere; } .card__specs { display: flex; flex-direction: column; gap: calc(var(--u) * 0.5); font-size: 13px; line-height: 1.5; color: var(--muted); } .card__specs b { font-weight: 500; color: var(--fg); } .card__price { margin-top: calc(var(--u) * 0.5); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .card__nd { font-size: 14px; font-weight: 400; color: #9b9b9b; } .card__add { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); margin-top: auto; padding-top: calc(var(--u) * 2); } .card__add .btn { width: 100%; } .empty-grid { grid-column: 1 / -1; margin: calc(var(--u) * 8) auto; max-width: 520px; text-align: center; font-size: 15px; line-height: 1.55; color: var(--muted); } /* ---------- Поднос выбранных моделей ---------- */ .tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--line-solid); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06); animation: cmp-slide-up 0.3s ease; } .tray__inner { display: flex; align-items: center; gap: calc(var(--u) * 2); padding-top: calc(var(--u) * 2); padding-bottom: calc(var(--u) * 2); } .tray__slots { display: flex; flex: 1 1 auto; min-width: 0; gap: calc(var(--u) * 1.5); overflow-x: auto; } /* flex:none кнопке «Сравнить»: по умолчанию флекс-элемент сжимается, и на узком экране надпись переносилась внутри кнопки фиксированной высоты — текст вылезал за «таблетку» и наезжал на слоты. Оформление .btn не трогаем, только запрет на сжатие. */ .tray__inner > .btn { flex: none; white-space: nowrap; } .slot { position: relative; flex: none; min-width: 150px; max-width: 220px; padding: calc(var(--u) * 1.5) calc(var(--u) * 5) calc(var(--u) * 1.5) calc(var(--u) * 2); border: 1px solid var(--line-solid); border-radius: var(--radius-m); background: var(--surface); font-size: 13px; line-height: 1.35; } .slot b { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .slot.empty { display: flex; align-items: center; justify-content: center; min-width: 64px; min-height: 48px; padding: 0; border-style: dashed; color: #c8c8c8; } .slot__x { position: absolute; right: calc(var(--u)); top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: calc(var(--u) * 4); height: calc(var(--u) * 4); padding: 0; border: 0; border-radius: var(--radius-c); background: var(--bg); font: inherit; font-size: 13px; line-height: 1; color: var(--muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .slot__x:hover { background: #ededed; color: var(--fg); } /* ---------- Таблица сравнения ---------- */ .compare { padding-bottom: calc(var(--u) * 10); } .compare__title { margin-bottom: calc(var(--u) * 3); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } /* Как читать пометки, когда наших моделей в сравнении несколько. Появляется только в этом случае (renderCompare ставит hidden), поэтому отступ снизу свой, а не отбитый от заголовка. */ .compare__hint { margin: calc(var(--u) * -1.5) 0 calc(var(--u) * 3); max-width: 720px; font-size: 13px; line-height: 1.5; color: var(--muted); } .compare__hint[hidden] { display: none; } /* Тени прокрутки — приём .spec-table-wrap (style.css:1530). Таблица шире контейнера, полоса прокрутки в Windows всплывает только при наведении, и без этих теней колонка просто обрывалась бы по краю — со стороны это читается как сломанная вёрстка. Два слоя local уезжают с содержимым и гасят тень у долистанного края, два слоя scroll стоят и её рисуют. Фон живёт на обёртке, поэтому липким ячейкам он задан отдельно и ниже по каскаду. */ .compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line-solid); border-radius: 12px; background-color: var(--surface); background-image: linear-gradient(to right, var(--surface), transparent), linear-gradient(to left, var(--surface), transparent), linear-gradient(to right, rgba(0, 0, 0, 0.13), transparent), linear-gradient(to left, rgba(0, 0, 0, 0.13), transparent); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .ctable { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; } .ctable th, .ctable td { padding: calc(var(--u) * 2) calc(var(--u) * 2.5); text-align: left; vertical-align: top; } .ctable thead th { padding-top: calc(var(--u) * 2.5); padding-bottom: calc(var(--u) * 2.5); border-bottom: 1px solid var(--line-solid); } .ctable tbody tr { border-bottom: 1px solid var(--line); } .ctable tbody tr:last-child { border-bottom: none; } .chead { display: flex; flex-direction: column; gap: 3px; } .chead__brand { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .chead--own .chead__brand { color: var(--fg); } .chead__name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .chead__x { align-self: flex-start; margin-top: calc(var(--u) * 0.5); padding: 2px 10px; border: 1px solid var(--line-solid); border-radius: var(--radius-c); background: var(--surface); font: inherit; font-size: 11px; color: var(--muted); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .chead__x:hover { border-color: var(--muted); color: var(--fg); } /* Липкий столбец с названиями строк — как .spec-table td:first-child. */ .rowlabel { position: sticky; left: 0; z-index: 10; width: 220px; min-width: 220px; background: var(--surface); box-shadow: 1px 0 0 var(--line-solid); font-size: 13px; color: var(--muted); } /* Строка-секция: сворачиваемый заголовок внутри таблицы. */ .cmp-sec td { background: var(--bg); border-bottom: 1px solid var(--line-solid); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; user-select: none; } .cmp-sec:hover td { color: var(--muted); } .cmp-sec td .arrow { display: inline-block; margin-right: calc(var(--u) * 1.5); color: var(--muted); transition: transform 0.25s ease; } .cmp-sec.collapsed td .arrow { transform: rotate(-90deg); } .row-hidden { display: none; } /* Приоритетные строки — крупнее обычных, но в плотности сайта: 18px/600, как .unit-tile__value и .unit-price, а не 26px исходника. */ .prio td { padding-top: calc(var(--u) * 2.5); padding-bottom: calc(var(--u) * 2.5); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .prio .rowlabel { font-size: 13px; font-weight: 400; } /* Пояснение под названием строки: почему «поровну» стоит рядом с двумя разными записями класса фильтрации. Своя строка, а не скобка в подписи, — подпись набрана в липком столбце шириной 220px, и скобка разорвала бы её пополам. */ .rowlabel__hint { display: block; margin-top: calc(var(--u) * 0.5); font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: #9b9b9b; } .val { font-size: 14px; } .val--big { font-weight: 600; } /* Да / нет / нет данных. Цвета взяты из .unit-status (style.css:1467): --ok → .unit-status--ok, --no → базовый серый .unit-status, --nd → приглушённый #9b9b9b мета-текста (.card__meta, .lib-card__meta). */ .pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--radius-c); font-size: 12px; font-weight: 500; } .pill--ok { background: #e6f4ea; color: #1e7a34; } .pill--no { background: #f2f2f2; color: var(--muted); } .pill--nd { padding: 0; background: none; color: #9b9b9b; } .thick { display: inline-flex; align-items: center; height: 20px; margin-left: calc(var(--u) * 1.5); padding: 0 8px; border-radius: var(--radius-c); background: #e6f4ea; font-size: 11px; font-weight: 500; color: #1e7a34; } /* Подсветка различий. Жёлтого у сайта нет; берём его собственный приём выделения колонки в таблице — .spec-table [data-index].is-active (style.css:1569): заливка var(--bg) плюс полужирное начертание. Роль бывшей рамки --hi-line играет внутренняя обводка цветом линий. */ .ctable tr.diff.is-on td:not(.rowlabel) { background: var(--bg); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-solid); } .linkout { color: var(--fg); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } .linkout:hover { color: var(--muted); } /* Строка размерного сегмента. */ .seg-row td { font-size: 14px; } .seg-row .rowlabel { color: var(--muted); } /* Пометка «кто выигрывает» в ячейке таблицы (спека 2026-08-16, раздел 3). Отдельным блоком под значением, а не рядом: в приоритетных строках значение набрано 18px/600, и пометка в той же строке ломала бы их ритм. Собственные font-size и font-weight обязательны по той же причине: без них .prio td утащил бы пометку в 18px полужирного. Различаются НЕ ТОЛЬКО цветом: у выигрыша стрелка вверх, у проигрыша вниз, у равенства знак равенства через ::before. Тот же приём, что у .rep-flag--diff («≠») и .rep-flag--nd («?») на вкладке замены. Цвета — из палитры сайта: зелёный .pill--ok / .unit-status--ok, красный .unit-status--liq (#b3261e на #fdecea, style.css:1482), серый .pill--no. */ .wmark { /* flex, а не inline-flex: пометке нужна своя строка под значением. При inline-flex короткое значение («58») и пометка уместились бы в одну строку, и margin-top сдвигал бы её относительно числа. */ display: flex; flex-wrap: wrap; align-items: baseline; width: fit-content; max-width: 100%; margin-top: calc(var(--u)); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: 0; } .wmark::before { margin-right: 5px; font-weight: 600; } /* Имя нашей модели, от которой считали разницу. Своей строкой внутри пометки: при двух наших моделях в сравнении «у нас лучше» без имени неясно, а выносить имя в подсказку при наведении нельзя — на телефоне её нет. flex-basis:100% ставит его под текстом пометки, а не в её хвост, где оно растянуло бы «таблетку» на всю ширину колонки. Радиус поэтому 10px, а не --radius-c: у двухстрочной «таблетки» скругление в полвысоты выглядит как капсула из другого набора. */ .wmark__ref { flex-basis: 100%; margin-left: 16px; font-weight: 400; opacity: 0.85; } .wmark--win { background: #e6f4ea; color: #1e7a34; } .wmark--win::before { content: '↑'; } .wmark--lose { background: #fdecea; color: #b3261e; } .wmark--lose::before { content: '↓'; } .wmark--eq { background: #f2f2f2; color: var(--nav); } .wmark--eq::before { content: '='; } /* ---------- Модальное окно ---------- */ /* Оформление писалось под удалённую модалку аналогов и досталось диалогу «подобрать ещё вариант» из раздела 3 спеки 2026-08-16: те же .modal__backdrop / __panel / __head / __close / __body. */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: calc(var(--u) * 7) calc(var(--u) * 3); } /* Тот же приём, что у .rep[hidden] ниже: у элемента есть собственный display, и полагаться на то, что атрибут hidden перебьёт его в любом движке, нельзя. Edge и так скрывает диалог, но правило дешевле проверки в каждом браузере. */ .modal[hidden] { display: none; } .modal__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); } /* 640px — своё ограничение ширины, не контейнерные 1450: диалог во всю ширину экрана нечитаем, а модальных окон у сайта пока нет, образца брать неоткуда. Тень и радиус — как у выпадающего списка .finder__list (style.css:804), это ближайший всплывающий слой сайта. */ .modal__panel { position: relative; z-index: 1; width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--line-solid); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10); animation: cmp-fade 0.25s ease; } .modal__head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 2); } .modal__head h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; } .modal__close { display: flex; align-items: center; justify-content: center; flex: none; width: calc(var(--u) * 5); height: calc(var(--u) * 5); padding: 0; border: 0; border-radius: var(--radius-c); background: var(--bg); font: inherit; font-size: 17px; line-height: 1; color: var(--muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .modal__close:hover { background: #ededed; color: var(--fg); } .modal__body { padding: 0 calc(var(--u) * 4) calc(var(--u) * 4); } /* ---------- Диалог «подобрать ещё вариант» ---------- */ .suggest__lead { margin-bottom: calc(var(--u) * 3); font-size: 14px; line-height: 1.5; color: var(--muted); } .suggest__lead b { font-weight: 500; color: var(--fg); } /* Критерии идут столбиком во всю ширину панели: в строку они встают неровно («тише» против «выше КПД рекуперации»), и попасть мышью в короткий пункт становится труднее, чем в длинный. У .chk--wide поэтому своя высота строки и разделители, а не одни только отступы .chk. */ .chk--wide { display: flex; align-items: flex-start; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.75) calc(var(--u)); border-radius: var(--radius-m); font-size: 15px; color: var(--fg); } .chk--wide + .chk--wide { border-top: 1px solid var(--line); } .chk--wide:hover { background: var(--bg); } .chk--wide input { margin-top: 2px; flex: none; } /* Критерий, под который в каталоге нет ни одной нашей модели. Гашение не единственный признак: причина написана словами строкой ниже. */ .chk--off, .chk--off:hover { background: none; color: var(--muted); cursor: not-allowed; } .chk--off input { cursor: not-allowed; } .chk__off { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: #9b9b9b; } .suggest__foot { margin-top: calc(var(--u) * 3); } .suggest__foot .btn { width: 100%; } .suggest__msg { margin-top: calc(var(--u) * 2.5); padding: calc(var(--u) * 2) calc(var(--u) * 2.5); border-radius: var(--radius-m); background: var(--bg); font-size: 14px; line-height: 1.5; color: var(--nav); } /* Честный отказ: подходящей модели нет. Цвет тот же, что у прочих отказов сайта (#b3261e на #fdecea), но текст остаётся полноценным предложением, а не значком: подмены ближайшей моделью здесь не происходит, и человек должен прочитать почему. */ .suggest__msg--none { background: #fdecea; color: #b3261e; } /* Строка о только что сделанной замене, над блоком аргументов. Фон нейтральный, а не зелёный: кроме выигрышей в ней стоят расхождения с конкурентом и непроверенные условия, и красить такое в «всё отлично» нельзя. Зелёная только галочка, отмечающая, что подстановка состоялась. */ .suggest__done { margin-bottom: calc(var(--u) * 2); padding: calc(var(--u) * 1.75) calc(var(--u) * 2.5); border: 1px solid var(--line-solid); border-radius: var(--radius-m); background: var(--bg); font-size: 13px; line-height: 1.5; color: var(--nav); } .suggest__done::before { content: '✓'; margin-right: 8px; font-weight: 600; color: #1e7a34; } /* ---------- Аргументы продажи ---------- */ .sargs { margin-bottom: calc(var(--u) * 2); padding: calc(var(--u) * 2.5) calc(var(--u) * 3); background: var(--surface); border: 1px solid var(--line-solid); border-radius: 12px; } .sargs__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 2); } .sargs__title { font-size: 14px; line-height: 1.4; } .sargs__copy { flex: none; height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 2); border: 1px solid var(--line-solid); border-radius: var(--radius-c); background: var(--surface); font: inherit; font-size: 13px; color: var(--nav); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .sargs__copy:hover { border-color: var(--muted); color: var(--fg); } .sargs__pros { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); } .sargs__chip { display: inline-flex; align-items: center; padding: calc(var(--u) * 0.75) calc(var(--u) * 2); border-radius: var(--radius-c); background: #e6f4ea; font-size: 13px; font-weight: 500; line-height: 1.35; color: #1e7a34; } .sargs__none { font-size: 13px; color: var(--muted); } /* Кнопка подбора стоит внизу блока аргументов, у каждого конкурента своя. */ .sargs__more { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 2.5); padding-top: calc(var(--u) * 2.5); border-top: 1px solid var(--line); } .sargs__more-hint { flex: 1 1 240px; font-size: 12px; line-height: 1.5; color: var(--muted); } .sargs__more-hint b { font-weight: 500; color: var(--nav); } .sargs__cons { margin-top: calc(var(--u) * 1.5); font-size: 12px; line-height: 1.5; color: var(--muted); } .sargs__note { margin: calc(var(--u) * 0.5) 0 calc(var(--u) * 3); font-size: 12px; line-height: 1.5; color: #9b9b9b; } /* ---------- Вкладка «Подобрать замену» ---------- */ /* Своей палитры у вкладки нет: те же токены, что у каталога (--fg, --muted, --line, --line-solid, --surface, --bg, --nav) и та же карточка, что у .cmp-card — граница, радиус 12, ховер с подъёмом. Ни одного балла, ни одной звезды и ни одной плашки лидера сегмента здесь быть не может: спека 2026-08-16 вывела рейтинг из эксплуатации целиком. */ .rep { padding-bottom: calc(var(--u) * 12); } /* Секцию скрывает переключатель вкладок (REPLACE.hide() ставит hidden), а у потомков есть display — без этой строки hidden перебивался бы каскадом. */ .rep[hidden] { display: none; } .rep__inner { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 calc(var(--u) * 4); } .rep__title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .rep__lead { max-width: 720px; margin-top: calc(var(--u) * 2); font-size: 15px; line-height: 1.6; color: var(--muted); } /* ---------- Поиск модели конкурента ---------- */ .rep__search { position: relative; max-width: 620px; margin: calc(var(--u) * 4) 0; } .rep__search input { width: 100%; height: calc(var(--u) * 8); padding: 0 calc(var(--u) * 2.5); border: 1px solid var(--line-solid); border-radius: var(--radius-m); background: var(--surface); font: inherit; font-size: 16px; color: var(--fg); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .rep__search input::placeholder { color: #9b9b9b; } /* :focus-visible, а не :focus — идиома сайта, см. комментарий у .search input. */ .rep__search input:focus-visible { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.08); } /* Всплывающий список — приём .finder__list (style.css:806). */ .rep__hits { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 340px; overflow-y: auto; margin: 0; padding: calc(var(--u)) 0; list-style: none; background: var(--surface); border: 1px solid var(--line-solid); border-radius: var(--radius-m); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10); } .rep__hits[hidden] { display: none; } .rep-hit { display: flex; align-items: baseline; gap: calc(var(--u) * 1.5); width: 100%; padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5); border: 0; background: none; font: inherit; font-size: 14px; text-align: left; color: var(--fg); cursor: pointer; } .rep-hit:hover { background: var(--bg); } /* Активная строка комбобокса. Строки больше не кнопки и фокус не получают: фокус остаётся в поле, а строку называет aria-activedescendant, поэтому подсветка идёт по классу, а не по :focus-visible. Контур тот же, что был у фокуса, чтобы вид не менялся. */ .rep-hit.is-active { background: var(--bg); outline: 2px solid var(--fg); outline-offset: -2px; } /* Пометка об обрезке списка подсказок: не строка выдачи, выбрать её нельзя. */ .rep-hits__more { padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } .rep-hit__brand { flex: none; min-width: 84px; font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .rep-hit__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .rep-hit__flow { flex: none; font-family: var(--font-mono); font-size: 12px; color: #9b9b9b; } /* ---------- Карточка исходной установки ---------- */ .rep-orig { margin-bottom: calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 4); background: var(--bg); border: 1px solid var(--line-solid); border-radius: 12px; } .rep-orig__label { margin-bottom: calc(var(--u)); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .rep-orig__brand { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .rep-orig__name { margin: 2px 0 calc(var(--u) * 1.5); font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere; } .rep-orig__spec { font-size: 14px; line-height: 1.5; color: var(--muted); } .rep-orig__spec b { font-weight: 500; color: var(--fg); } .rep-orig__mount { margin-top: calc(var(--u) * 0.5); font-size: 14px; line-height: 1.5; } .rep-orig__warn { margin-top: calc(var(--u) * 1.5); font-size: 12px; line-height: 1.5; color: var(--muted); } /* «Нет данных» не красят тревожным цветом: это не ошибка, а дыра в паспорте. Но и мета-серый #9b9b9b здесь не годится: на белом он даёт 2,78:1 при пороге AA 4,5:1, а на этой вкладке цвет впервые несёт смысл, а не оформляет мету. Берём --muted (#666666, 5,74:1) — тот же токен, что у остального второстепенного текста карточки. */ .rep-nd { color: var(--muted); } /* ---------- «Откуда это»: цитата паспорта ---------- */ /* Раскрывающийся блок вместо атрибута title: подсказка браузера не открывается с тач-экрана и не берётся с клавиатуры, а цитата паспорта — единственное доказательство, что монтаж не выдуман. */ .rep-src { margin-top: calc(var(--u) * 1.5); } .rep-src > summary { display: inline-flex; align-items: center; gap: calc(var(--u)); font-size: 12px; color: var(--nav); list-style: none; cursor: pointer; } /* Подчёркивание живёт на самом слове, а не на

: с него оно распространялось бы и на маркер, а тот повёрнут — вместе с ним вставала вертикально и пунктирная линия. */ .rep-src__label { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } /* Родной маркер снят, поэтому заменён своим: без него «откуда это» не выглядит раскрывающимся вовсе. Треугольник поворачивается на открытии. */ .rep-src > summary::-webkit-details-marker { display: none; } .rep-src > summary::before { content: '▸'; font-size: 10px; line-height: 1; transition: transform 0.15s ease; } .rep-src[open] > summary::before { transform: rotate(90deg); } .rep-src > summary:hover { color: var(--fg); } .rep-src > summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } .rep-src__text { margin-top: calc(var(--u)); padding: calc(var(--u) * 1.5) calc(var(--u) * 2); background: var(--surface); border: 1px solid var(--line-solid); border-radius: var(--radius-m); font-size: 12px; line-height: 1.55; color: var(--muted); } /* ---------- Предупреждения и пустая выдача ---------- */ /* Жёлтой плашки у сайта нет — берём нейтральную: фон страницы, граница и приглушённый текст. */ .rep-warn, .rep-empty { margin-bottom: calc(var(--u) * 4); padding: calc(var(--u) * 2.5) calc(var(--u) * 3); background: var(--bg); border: 1px solid var(--line-solid); border-radius: var(--radius-m); font-size: 14px; line-height: 1.6; color: var(--muted); } .rep-empty { max-width: 720px; } .rep-empty b { font-weight: 600; color: var(--fg); } /* ---------- Корзины выдачи ---------- */ .rep-basket { margin-bottom: calc(var(--u) * 6); } .rep-basket__title { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 1.5); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .rep-basket__count { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: var(--radius-c); background: var(--fg); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--surface); } .rep-basket__hint { max-width: 720px; margin-top: calc(var(--u)); font-size: 13px; line-height: 1.55; color: var(--muted); } /* Заголовок группы монтажа заведомо слабее заголовка корзины: 13px, обычное начертание, разрядка и верхний регистр — та же ступень, что у .filter label и .rep-orig__label. Корзина — что подобрали, группа — как оно встанет. */ .rep-group { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u)); margin: calc(var(--u) * 3.5) 0 calc(var(--u) * 2); padding-top: calc(var(--u) * 1.5); border-top: 1px solid var(--line); font-size: 12px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .rep-group__count { font-family: var(--font-mono); font-size: 11px; color: #9b9b9b; } .rep-basket__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 2.5); } /* ---------- Карточка нашей установки ---------- */ /* Один в один с .cmp-card: та же граница, радиус 12 и ховер с подъёмом на 2px, чтобы выдача не выглядела чужой рядом с каталогом. */ .rep-cand { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 3); background: var(--surface); border: 1px solid var(--line-solid); border-radius: 12px; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .rep-cand:hover { border-color: #d4d4d4; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); transform: translateY(-2px); } .rep-cand:focus-within { border-color: var(--muted); } .rep-cand__name { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.35; overflow-wrap: anywhere; } .rep-cand__spec { font-size: 13px; line-height: 1.5; color: var(--muted); } .rep-cand__spec b { font-weight: 500; color: var(--fg); } .rep-cand__mount { font-size: 13px; line-height: 1.5; color: var(--nav); } .rep-cand__flags { display: flex; flex-wrap: wrap; gap: calc(var(--u)); } /* Две ступени различаются не только цветом: у расхождения знак ≠, у пропуска знак ?. На чёрно-белой печати и при дальтонизме смысл сохраняется. */ .rep-flag { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: var(--radius-c); font-size: 11px; font-weight: 500; line-height: 1.35; } .rep-flag::before { font-weight: 600; } .rep-flag--diff { background: #f2f2f2; color: var(--nav); } .rep-flag--diff::before { content: '≠'; } /* Не #9b9b9b: 2,78:1 на белом при пороге AA 4,5:1, а текст флага несёт смысл («нет данных у этой модели»), см. комментарий у .rep-nd. */ .rep-flag--nd { border: 1px solid var(--line-solid); color: var(--muted); } .rep-flag--nd::before { content: '?'; } .rep-cand__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1.5); margin-top: auto; padding-top: calc(var(--u) * 2); } .rep-price { display: flex; flex-direction: column; gap: 2px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .rep-price__delta { font-size: 11px; font-weight: 400; color: var(--muted); } /* Кнопка в карточке: базовые 42px/16px .btn в колонке 280px занимают всю ширину и выдавливают цену на вторую строку — понижаем до 36px/13px, оформление .btn--primary при этом не трогаем. */ .rep-cand__cmp { flex: none; height: calc(var(--u) * 6); padding: 0 calc(var(--u) * 2.5); font-size: 13px; } /* ---------- Не подошедшие ---------- */ .rep-basket--rej { margin-bottom: 0; } .rep-rej__toggle { height: calc(var(--u) * 6); padding: 0 calc(var(--u) * 2.5); border: 1px solid var(--line-solid); border-radius: var(--radius-c); background: var(--surface); font: inherit; font-size: 13px; color: var(--nav); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .rep-rej__toggle:hover { border-color: var(--muted); color: var(--fg); } .rep-rej__toggle:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } .rep-rej__list { margin: calc(var(--u) * 2) 0 0; padding: calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 5); background: var(--bg); border: 1px solid var(--line-solid); border-radius: var(--radius-m); font-size: 13px; line-height: 1.6; color: var(--muted); } .rep-rej__list b { font-weight: 500; color: var(--fg); } /* ---------- Анимации ---------- */ @keyframes cmp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes cmp-slide-up { from { transform: translateY(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .tray, .modal__panel { animation: none; } .cmp-card, .rep-cand { transition: none; } .cmp-card:hover, .rep-cand:hover { transform: none; } } /* ---------- Адаптив: брейкпоинты сайта 1280 / 992 / 900 / 600 ---------- */ @media (max-width: 1280px) { .cmp__title { font-size: 48px; } .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } @media (max-width: 992px) { .cmp { padding: calc(var(--u) * 10) 0 calc(var(--u) * 5); } .controls__row { gap: calc(var(--u) * 2); } .controls__meta { margin-left: 0; } .filters { width: 100%; } .filter { flex: 1 1 180px; } .filter select { width: 100%; } } @media (max-width: 900px) { .cmp { padding: calc(var(--u) * 8) 0 calc(var(--u) * 4); } .cmp__title { font-size: 40px; } .cmp__lead { font-size: 16px; } .controls__inner { padding: calc(var(--u) * 3); } /* Одна колонка — так же, как .cards на /documents и .lib-grid на /library (style.css:1736, 1754). Исходник держал на мобильном две колонки по 160px, но тогда каталог перестаёт быть похожим на соседние страницы. */ .grid { grid-template-columns: 1fr; gap: calc(var(--u) * 2); } .cmp-card { padding: calc(var(--u) * 3); } .compare__title, .rep__title { font-size: 20px; } /* Одна колонка — так же, как .grid выше: 280px в две колонки на 900px не помещаются, а карточка замены длиннее каталожной на флаги и цитату. */ .rep-basket__cards { grid-template-columns: 1fr; gap: calc(var(--u) * 2); } .rowlabel { width: 170px; min-width: 170px; } .ctable th, .ctable td { padding: calc(var(--u) * 1.5) calc(var(--u) * 2); } .prio td { font-size: 16px; } } @media (max-width: 600px) { .cmp__title { font-size: 32px; } .cmp__lead { font-size: 15px; } .search input { font-size: 16px; } .controls__meta { padding-bottom: 0; } .cmp-card { gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 3); } .rep__lead { font-size: 14px; } .rep__search input { font-size: 16px; } .rep-orig { padding: calc(var(--u) * 2.5) calc(var(--u) * 3); } .rep-orig__name { font-size: 16px; } .rep-basket__title { font-size: 16px; } .rep-cand__name { font-size: 15px; } /* Кнопка и цена в 390px в одну строку не встают: цена целиком, кнопка под ней во всю ширину — тот же приём, что у .card__add .btn в каталоге. */ .rep-cand__foot { flex-direction: column; align-items: stretch; } .rep-cand__cmp { width: 100%; } .rep-hit { flex-wrap: wrap; } .rep-hit__brand { min-width: 0; width: 100%; } .card__name { font-size: 15px; } .card__price { font-size: 16px; } .rowlabel { width: 130px; min-width: 130px; font-size: 12px; } .ctable { font-size: 13px; } .ctable th, .ctable td { padding: calc(var(--u) * 1.5); } .tray__inner { gap: calc(var(--u) * 1.5); } .slot { min-width: 130px; font-size: 12px; } /* Диалог на весь экран — как в исходнике: на 390px рамка и поля вокруг панели съедали бы половину и без того узкой ширины. */ .modal { padding: 0; } .modal__panel { max-width: none; min-height: 100%; border: 0; border-radius: 0; } }