/* ═══════════════════════════════════════════════════════════════════════════ candidate.css — канонические значения четырёх кандидатов /test2 /test3 /test4 /test5 Страницы собраны из четырёх макетов подряд, и каждый принёс свою сетку, свою шкалу кегля, свой набор радиусов и свою палитру. Здесь они сведены к одному словарю. Файл подключается ПОСЛЕ landing.css и ДО product-ui.css и страничного файла: fonts → tsekh360 → landing → candidate → product-ui → test{N} ─── ЧТО ЭТОТ ФАЙЛ НЕ ДЕЛАЕТ САМ ПО СЕБЕ ─────────────────────────────────── Ничего. Пользовательские свойства разрешаются по БЛИЖАЙШЕМУ объявившему предку, поэтому собственный блок токенов страницы перекрывает этот файл ровно так же, как `.p-tarify` перекрывал `:root` на /test4 — и там это стоило странице всех адаптивных значений: объявлены на `:root`, затенены обёрткой, не применялись никогда. Замер, а не рассуждение: контейнер на 390 равнялся 342px (= 100vw − 48 из обёртки), а не 362px (= 100% − 28 из `:root`), и герой на 1024 равнялся 67px, а не объявленным 56px. Значит: подключить этот файл мало. Собственный блок токенов страницы должен быть УДАЛЁН в том же проходе. Иначе ошибка повторяется третий раз. То же с правилами ниже: `.p-cand .container` (0,2,0) выигрывает у `.container` (0,1,0), но НЕ выигрывает у `.p-tarify .container` (0,2,0) — там равная специфичность решается порядком, а страничный файл идёт позже. Страница удаляет своё правило, а не полагается на этот файл. ─── ПОЧЕМУ 1260, А НЕ 1320 И НЕ 1392 ────────────────────────────────────── Замерено на четырёх страницах: 1260 / 1260 / 1320 / 1392 при 1440. Живой сайт при этом отдаёт 1120 (`.wrap` 1200 минус 40+40 полей). Взят не самый частый и не самый новый. Взят тот, который страница может унести в бой: кандидат когда-нибудь заменит живую страницу, и рядом с ним останутся двадцать страниц на 1120. Разница 1260 против 1120 — 140px, её видно как небольшой шаг. Разница 1392 против 1120 — 272px, её видно как «это другой сайт». Цена решения реальна и записана здесь, чтобы её не искали заново: у /test4 колонка тарифа сужается с 318 до 303px, у /test5 тёмная таблица сравнения теряет 132px. Обе плотные, обе выверялись на своей ширине — после смены их проверяют замером краски, а не на глаз. ─── ПОЧЕМУ ЛЕСТНИЦА 1180 / 900 / 640 / 480 ──────────────────────────────── Общей у четырёх страниц была ровно одна ступень — 640. Остальные: у /test2 1180+880, у /test3 1180+1100+900+760, у /test4 1100(мёртвая)+720, у /test5 1180+820. Заголовок одного уровня оказывался разного кегля на соседних страницах при одной и той же ширине окна. 1180 — там, где 1260 перестаёт помещаться с полями (три страницы из четырёх уже ломались здесь); 900 — там, где двухколоночная шапка раздела обязана складываться; 640 — единственная ступень, общая всем четырём; 480 — /test4 доказал, что полоса 390–375 нуждается в своей ступени: без неё заголовок не помещался в колонку. ─── ПОЧЕМУ ТЁПЛАЯ ПАЛИТРА ЗДЕСЬ, А НЕ В tsekh360.css ────────────────────── Это переход, а не развилка. Кандидаты заменяют живые страницы; когда переедет последняя, значения отсюда уезжают в tsekh360.css, а не наоборот. Пока переход идёт, палитр две, и это временное состояние — поэтому значения лежат здесь, а не в общем файле, от которого зависят двадцать живых страниц. Расхождение с сайтом измерено: --c-muted #625d57 против #6B6B6B — ΔE 6.91, --c-line #e8e3dc против #E5E5E5 — ΔE 4.07. Оба видны. ─── ПОЧЕМУ ИМЕНА С ПРЕФИКСОМ --c- ───────────────────────────────────────── В tsekh360.css уже есть `--fs-h2`, и оно равно 36px. Здесь section-заголовок равен 51px. Одно имя с разными значениями в двух файлах — это способ однажды взять не ту шкалу и долго искать почему. Префикс делает вопрос «какая это шкала» вопросом к тексту правила, а не к порядку подключения. ═══════════════════════════════════════════════════════════════════════════ */ .p-cand{ /* ── сетка ───────────────────────────────────────────────────────────── */ --c-container:min(1260px, calc(100vw - 40px)); /* ── шкала кегля. Вес заголовков у всех четырёх и так был 600 ────────── */ --c-fs-h1:67px; --c-lh-h1:.94; --c-ls-h1:-.065em; --c-fs-h2:51px; --c-lh-h2:.98; --c-ls-h2:-.055em; --c-fs-h3:28px; --c-lh-h3:1.08; --c-ls-h3:-.035em; --c-fs-h4:21px; --c-lh-h4:1.2; --c-ls-h4:-.02em; /* Заголовок КАРТОЧКИ — отдельное имя, хотя значение сегодня то же. На --c-fs-h4 висели две работы: заголовок карточки в сетке и заголовок плашки связи. Первая страница, которой захочется карточки крупнее, форкнула бы токен и увела бы за собой вторую. */ --c-fs-card:21px; --c-lh-card:1.2; --c-ls-card:-.02em; --c-fs-body-lg:20px; --c-fs-body:16px; --c-fs-small:12px; --c-fw-head:600; --c-fw-text:400; /* ── палитра ─────────────────────────────────────────────────────────── */ --c-bg:#fff; --c-ink:#171717; --c-muted:#625d57; /* 6.52:1 на белом — самый тёмный из четырёх */ --c-muted-2:#98928a; --c-line:#e8e3dc; --c-line-2:#efeae4; --c-soft:#f7f6f4; --c-soft-2:#f2efeb; --c-accent:#FC4000; /* бренд. #ff4a0a на /test5 был опечаткой */ --c-accent-2:#ff6c2f; --c-accent-soft:#fff0e9; --c-accent-tint:#fff8f4; --c-accent-border:#ffd5c6; --c-accent-ink:#a63c10; /* акцент КАК ТЕКСТ. Сам --c-accent на своей же бледной заливке даёт 3.22 — это ровно тот случай, ради которого в приложении заведён --accent-text. Здесь 5.77:1 на --c-accent-soft, 6.10 на -tint */ --c-green-ink:#0d7a56; /* 4.86:1 на --c-green-soft (сам --c-green — 3.46) */ --c-red-ink:#b3392e; /* 5.19:1 на --c-red-soft (сам --c-red — 3.93) */ --c-green:#11956a; --c-green-soft:#e8f8f0; --c-red:#cf493d; --c-red-soft:#fdeceb; --c-yellow:#b47308; --c-yellow-soft:#fff0d7; --c-yellow-ink:#a16d13; --c-blue:#3f6fe9; --c-blue-soft:#ebf1ff; /* ── радиусы страницы. У нарисованного интерфейса СВОЙ набор ────────── product-ui.css рисует приложение, и угловой словарь приложения — не словарь страницы. Туда эти значения не идут. То же у настоящих предметов: рамка телефона на /test3 остаётся 38px, потому что это скругление телефона, а не карточки. */ --c-r-control:10px; /* кнопки, поля — на этом сходились все четыре */ --c-r-tile:14px; /* иконка, мелкая плитка */ --c-r-card:20px; /* карточка на странице */ --c-r-panel:24px; /* крупная панель, тёмный блок */ --c-r-frame:30px; /* рамка иллюстрации */ --c-r-pill:999px; /* ── тени ────────────────────────────────────────────────────────────── */ --c-shadow:0 18px 48px rgba(34,24,16,.08); --c-shadow-lg:0 28px 80px rgba(47,21,7,.18); /* Подложка блока «рабочее место цеха» — один блок на шести страницах (/dlya-metalloobrabotki и трёх отраслевых через .p-ind, /pozakaznoe-proizvodstvo через .p-poz), значение общее. Мягкая, а не яркий фирменный градиент: она спокойнее и не спорит с оранжевым акцентом кнопок рядом. /pozakaznoe-proizvodstvo раньше нёс свой яркий вариант — единственная страница семьи с другим видом одного и того же компонента; здесь переменная, чтобы шестая страница не завела третий. */ --c-worker-panel-bg:linear-gradient(135deg,var(--c-accent-tint) 0%,#ffe4d3 100%); /* ── вертикальный ритм ───────────────────────────────────────────────── */ --c-section:100px; --c-section-compact:72px; --c-head-gap:64px; /* колонки блока заголовка */ --c-label-gap:18px; /* метка → заголовок */ --c-head-body-gap:18px; /* заголовок → текст */ } @media (max-width:1180px){ .p-cand{ --c-fs-h1:58px; --c-fs-h2:44px; --c-fs-h3:26px; } } @media (max-width:900px){ .p-cand{ --c-fs-h1:46px; --c-fs-h2:38px; --c-fs-h3:24px; --c-head-gap:0px; } } @media (max-width:640px){ .p-cand{ --c-container:min(1260px, calc(100vw - 24px)); --c-section:64px; --c-section-compact:48px; } } @media (max-width:480px){ .p-cand{ --c-fs-h1:38px; --c-fs-h2:32px; --c-fs-h4:19px; --c-fs-card:19px; } } /* ═══ КАНОНИЧЕСКИЕ КОМПОНЕНТЫ ══════════════════════════════════════════════ Здесь лежит то, что обязано совпадать на всех четырёх страницах. Всё остальное страница рисует сама. Своё правило для этих селекторов страница удаляет — см. предупреждение о специфичности вверху файла. */ .p-cand .container{ width:var(--c-container); max-width:none; margin:0 auto; padding:0 } /* Подвал у всех четырёх — одна и та же разметка (md5 совпадает), но лежала он на двух разных ширинах: /test2 подтягивал его к своему контейнеру, а /test3 /test4 /test5 наследовали сайтовые 1120 внутри контейнеров 1260, 1320 и 1392 — подвал был уже страницы на 140, 200 и 272px. Выравнивается здесь один раз, для всех. */ .p-cand footer .wrap{ width:var(--c-container); max-width:none; padding:0 } /* Метка раздела. Из трёх вариантов (заливная плашка на /test2, точка на /test3 и /test4, разрядка .18em на /test5) канон — точка: плашка читается как бейдж, то есть другой компонент, а .18em при 12px выглядит другой гарнитурой. */ .p-cand .label{ display:inline-flex; align-items:center; gap:8px; color:var(--c-accent); font-size:var(--c-fs-small); font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin:0 0 var(--c-label-gap); } .p-cand .label:before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; } .p-cand .section{ padding:var(--c-section) 0 } .p-cand .section.compact{ padding:var(--c-section-compact) 0 } /* ── Полоса якорей ──────────────────────────────────────────────────────── Шапка теперь общая и ведёт на уровень сайта, поэтому навигация ВНУТРИ длинной страницы осталась бы без места. Полоса возвращает её, не трогая шапку. Ставится только там, где разделов много: /test2 и /test3. */ .p-cand .anchor-strip{ position:sticky; top:71px; z-index:90; /* .nav-inner 70px + 1px рамка — замерено, одинаково на всех пяти ширинах */ border-bottom:1px solid var(--c-line); background:var(--c-bg); } .p-cand .anchor-strip .container{ display:flex; gap:28px; align-items:center; overflow-x:auto; scrollbar-width:none; padding:0; height:52px; } .p-cand .anchor-strip .container::-webkit-scrollbar{ display:none } .p-cand .anchor-strip a{ white-space:nowrap; font-size:15px; color:var(--c-muted); display:inline-flex; align-items:center; height:100%; border-bottom:2px solid transparent; } .p-cand .anchor-strip a:hover{ color:var(--c-ink) } @media (max-width:640px){ .p-cand .anchor-strip .container{ gap:20px; height:48px } .p-cand .anchor-strip a{ font-size:14px } } /* Шапка — тот же дефект, что был у подвала: узкая на 1200px, когда контент вокруг неё уже перешёл на кандидатскую сетку 1260. Тот же приём: width + max-width:none. Без max-width:none первая попытка садилась на 30px — .wrap уже нёс max-width:1200px, и он остаётся победителем при равной специфичности, если сам не снят явно. */ .p-cand #nav .wrap{ width:var(--c-container); max-width:none; padding:0 }