/* ============================================================ P0-L — art-direction фотографии верхней полосы (тикет P0-012) Что было не так. P0-I ставил один панорамный кадр (`img/bg-head-3persons.png`, 2172x375) на все ширины окна. Полоса при этом была 92…124 CSS-px высотой, то есть имела пропорцию 11…16:1, а «полезная полоса» кадра — самая широкая рамка, куда ещё влезают одновременно макушки и бумаги, — 6.23:1. Разница и съедала бумаги. Отдельно ломался мобильный: кадру задавалась ширина 716 CSS-px, а окно слоя на 390 всего 374 — правые 48 % кадра отрезались окном, и от троих в шапке оставалась одна женщина. Что сделано. Владелец загрузил одну и ту же сцену в десяти пропорциях (`/img/image-gen-*.png`). Из них взяты три и порезаны под три диапазона ширин (`ops/relaunch/p0-l/p0l_assets.py`, обмер — `--audit`): от 1101px image-gen-3(7) -> 1440x288 5.00:1 окно 720x144 / 660x132 901…1100px image-gen-1(6) -> 1200x264 4.55:1 окно 600x132 561…900px image-gen-1(6) -> 1200x264 4.55:1 окно плавает, см. ниже до 560px image-gen-2(6) -> 1086x362 3.00:1 окно во всю ширину Правило подбора одно: пропорция файла равна пропорции окна. Тогда `object-fit: cover` не досрезает ничего — ни людей, ни бумаг, — а не вырезает произвольную ленту из середины кадра. Ширина кадра нигде не больше окна слоя, поэтому обрезания «до одного человека» не может быть в принципе. Ни один кадр не растянут: только кадрирование по вертикали и пропорциональное уменьшение. Высота полосы. Решение владельца от 02.08.2026: под баннер отдаётся ~130px вместо прежних 93. Точные значения — `--pa-bar-h` ниже; на телефоне и на планшете высота плавает вместе с шириной окна, чтобы пропорция окна держалась равной пропорции кадра и досрезать было нечего. Раскладка. Тем же решением (вторая итерация) телефон и бургер перенесены на вторую строку не только до 560px, как было, но до 900px: в одну строку логотип и контакты занимали почти всю ширину полосы, и людям оставалось 103px на 768px окна. На 901…1100px строка осталась одна — там в полосе есть кнопка заявки, и владелец решил её сохранить (третья итерация). `box-sizing: border-box` на полосе безопасен: её `max-width: var(--pa-container)` (1240px) до 1101px не срабатывает — окно там заведомо уже, — а от 1101px `modern.css` ставит `max-width: none`. Осветление под текстом. Не сплошная белая колонка во всю высоту, как было в P0-I: полоса стала выше, надписи занимают по вертикали лишь её середину, и гасить всю высоту значит стереть заодно лица сверху и бумаги снизу. Вместо этого — эллипс вокруг каждой надписи, и не по вбитым координатам, а на самом элементе (`.pa-logo::before`, `.pa-phone::before`). Тогда осветление едет вместе с надписью на любой ширине окна, и подгонять числа под каждый брейкпоинт не нужно. Форма выбрана эллипсом не для красоты: у эллипса плотность падает и по диагонали, поэтому лица, которые сидят выше строки текста, остаются чистыми, даже когда стоят прямо над надписью. Кнопке заявки и бургеру осветление не нужно: у первой сплошная синяя заливка, у второго — собственный белый фон с рамкой. Плотность привязана к цвету надписей: подпись под логотипом и часы работы набраны серым (#5b6b7a, на белом 5.2), поэтому под ними фотография гасится почти до белого. Ни размытия, ни серой плашки, ни правки фирменных цветов текста. В растр осветление не вшито — исходные пиксели не тронуты. Область. Файл подключается одной строкой в `header.php` шаблона `bitrix/templates/personaudit` — того самого, который выводит логотип «Персональный аудит». Другие шаблоны площадки (`landing24`) его не подключают, поэтому фотография не может утечь на чужой бренд. Слой наложения. `z-index: -1` кладёт фотографию НАД белым фоном полосы и ПОД всем её содержимым. На десктопе контекст наложения создаёт сама строка (`position: sticky; z-index: 910`), ниже 1101px — обёртка `.pa-header`. Клики фотография не ловит (`pointer-events: none`), из дерева доступности исключена (`aria-hidden` + пустой `alt` в разметке). ============================================================ */ /* --- высота полосы ------------------------------------------------------- `--pa-bar-h` — полная высота полосы вместе с её отступами; отсюда же считается `--pa-header-h`, отступ якорей под липкой шапкой (`modern.css` держал там 72px — под прежнюю полосу 93px это уже было занижено). До 560px полоса переносится в две строки (логотип сверху, телефон и бургер снизу), и высота задана формулой, а не числом: окно слоя во всю ширину контентной колонки полосы, значит его пропорция — это ширина, делённая на высоту. Ширина колонки — это окно минус ДВА поля `--pa-pad`; до седьмой итерации в формуле стояло одно (`100vw - 16px`), потому что справа слой доходил до края окна. Формула держит пропорцию на 3.00, то есть ровно на пропорции мобильного кадра. Ограничители clamp нужны по краям диапазона: ниже 352px высоту диктует уже содержимое полосы, выше 500px — здравый смысл (158px это потолок, дальше шапка съедала бы экран). На краях пропорция уходит на 2.58…3.33, и обрезка при этом съедает воздух над головами и пустой левый край, но не людей и не бумаги — запас у кадра 13.8 % сверху и 5.2 % снизу. `align-content: center` держит обе строки вместе в середине полосы: без него перенесённые строки растянулись бы по всей высоте, и телефон уехал бы вниз, ровно на бумаги. */ .pa-header__bar { box-sizing: border-box; --pa-bar-h: clamp(104px, calc((100vw - 2 * var(--pa-pad)) / 3), 158px); min-height: var(--pa-bar-h); align-content: center; } :root { --pa-header-h: 125px; } /* --- поля полосы: один контейнер на фон и на содержимое ------------------- (решение владельца 02.08.2026, седьмая итерация) `--pa-bar-gutter` — единственное место, где считается левое и правое поле верхней полосы. Им живёт и padding самой полосы (логотип, телефон, кнопка), и окно слоя с фотографией. До этой правки формула стояла в трёх местах и в двух из них расходилась: у полосы `modern.css` держал одинаковые поля слева и справа, а у слоя базовое правило задавало `left: var(--pa-pad)` и `right: 0`. Симметричным слой становился только от 901px, а до 900px правый край кадра совпадал с правым краем ОКНА, а не колонки: на 768px кадр резался краем браузера, слева при этом оставалось белое поле 23px. Отсюда и брались «полоса слева, обрез справа» и ощущение, что шапка шире страницы. Проценты внутри токена читаются по месту применения, и оба места дают одно и то же число: для padding полосы `100%` — это её контейнер (`body` от 1101px, где `.pa-header` уходит в `display: contents`, иначе `.pa-header`), для слоя — padding-бокс самой полосы. Полоса на всех ширинах занимает всю ширину своего контейнера (до 1100px её `max-width: 1240px` не срабатывает — окно уже, от 1101px `modern.css` ставит `max-width: none`), поэтому оба `100%` равны ширине окна. `--pa-bar-inset` — воздух ВНУТРИ полосы: тем же решением логотип и кнопка заявки сдвинуты внутрь, чтобы не стоять вплотную к обрезу фотографии. Фотография при этом не двигается: слой позиционируется от padding-бокса полосы, а padding на padding-бокс не влияет. Поэтому фон, меню и текст страницы остаются на одной контентной ширине, а внутрь уезжает только содержимое полосы. На узком окне отступ уменьшается до 8px: на 390px 24px с каждой стороны съели бы место под телефон и бургер. */ .pa-header__bar { --pa-bar-gutter: max(var(--pa-pad), calc((100% - var(--pa-container)) / 2)); --pa-bar-inset: clamp(8px, 2vw, 24px); padding-left: calc(var(--pa-bar-gutter) + var(--pa-bar-inset)); padding-right: calc(var(--pa-bar-gutter) + var(--pa-bar-inset)); } /* 901…1100px — здесь отступ не постоянный, а нарастающий, и это не украшение. В одну строку тут стоят логотип, телефон, кнопка заявки И бургер (бургер скрывается только от 1101px). Свободное место в строке — ширина `.pa-header__spacer` — на 901px равно 1.6px и дальше растёт примерно на 0.9px на каждый пиксель окна: 36.7px на 940, 90.7px на 1000, 182.7px на 1100 (замер в браузере). Отступ съедает его вдвое, поэтому предел — 0.45 ширины сверх 901px; берём 0.3, то есть две трети предела, с запасом на удлинение надписей. На 901px отступ выходит нулевым, к 981px добирает свои 24px. Без ограничителя постоянные 24px переносили бы кнопку заявки на вторую строку до 961px: полоса вырастала со 156 до 175px, и кадр переставал совпадать с окном. Сузить вместо этого сам кадр нельзя — он привязан к контентной колонке, а колонка тут общая с меню и текстом страницы. */ @media (min-width: 901px) and (max-width: 1100px) { .pa-header__bar { --pa-bar-inset: clamp(0px, calc((100vw - 901px) * 0.3), 24px); } } /* Полоса — система координат слоя. От 1101px она уже `position: sticky` (`modern.css`), и трогать её нельзя: этот файл подключается позже, и `position: relative` здесь отменил бы липкую строку — шапка уезжала бы вверх при прокрутке. Поэтому правило только для ширин ниже порога. */ @media (max-width: 1100px) { .pa-header__bar { position: relative; } } /* Выпадающая панель меню отсчитывалась от жёстких 76px (`modern.css`). Полоса стала выше — считаем от неё, иначе панель вылезала бы за нижний край окна. */ @media (max-width: 1100px) { .pa-nav.is-open { max-height: calc(100vh - var(--pa-header-h)); } } /* --- слой --------------------------------------------------------------- Окно — контентная колонка полосы, от её левого края до правого; оно же ножницы. Границы берутся тем же `--pa-bar-gutter`, что и поля самой полосы, поэтому кадр не может оказаться шире шапки ни на одной ширине окна и белого поля с одной стороны при обрезе с другой не бывает. Ширину кадру задаёт `--pa-hp-w`. На всех диапазонах она не больше ширины окна на самой узкой ширине диапазона — именно этим и лечится прежняя обрезка «до одного человека». */ .pa-header-photo { --pa-hp-w: 100%; /* Доля ширины мастера, занятая фотографией; правее — ровная заливка, см. блок «правый край кадра» ниже. Число взято из обмера сборщика (`assets.json`, `band`), а не подобрано на глаз; из него же посчитаны константы формулы там. */ --pa-hp-band: .9692; display: block; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--pa-bar-gutter); right: var(--pa-bar-gutter); overflow: hidden; pointer-events: none; } /* --- правый край кадра: пустая заливка мастера --------------------------- (восьмая итерация, замечание владельца о полоске справа от 1150px) У мастера `pa-header-master-4000x520.png` последние 120 колонок из 4000 (3.0 %) — не фотография, а ровная заливка #f6fafd: все строки в них совпадают до ±2 по каждому каналу. Обмер сборщика это видел и записал (`assets.json`, `band: [0.0462, 0.9692]`), но резал кадр только по вертикали, поэтому заливка целиком перешла в производные `header-photo-wide-2480x312` (64 колонки после LANCZOS). Почему её стало видно именно на десктопе. Кадр рисуется высотой полосы (156px), то есть шириной 156 × 2480/312 = 1240px — ровно `--pa-container`. Значит на широком окне, где контентная колонка добирает свои 1240, `object-fit: cover` не срезает по горизонтали НИЧЕГО, и заливка встаёт внутрь полосы: фотография кончается за 37px до правого края колонки, а дальше идёт ровная светлая полоска до края. Кнопка заявки стоит в 24px от края колонки — то есть уже на заливке, и читается как вылезшая за кадр. На 1176px и уже заливку срезал `cover`, поэтому дефекта там нет: порог ровно тот, который заметил владелец. Отдельно: этот же блок раньше задавал здесь `object-position: 0% 50%` с намерением увести обрез вправо, в пустой офисный фон. Правило было мёртвым — базовое `.pa-header-photo img { object-position: 75% 100% }` идёт в файле НИЖЕ при той же специфичности и перебивало его на всех ширинах (проверено в браузере: вычисленное значение 75% 100% и на 901, и на 1217, и на 1440). Возвращать его не нужно: заливку снимает ширина кадра, а не якорь, и кадрирование остаётся ровно тем, которое владелец принял седьмой итерацией. Как снято. Кадр делается шире окна слоя ровно настолько, чтобы правый край окна пришёлся на конец фотографии, а не на заливку; лишнее уходит за границу окна и срезается его `overflow: hidden`. Растр не тронут: ни один файл не пересобран. Откуда формула. Кадр рисуется шириной 1240px (высота полосы 156 на пропорцию файла), окно слоя — шириной колонки L, якорь `object-position` по горизонтали 75 %. Тогда правый край окна приходится на точку файла 2 × (0.75 × (1240 − W) + L), где W — ширина кадра. Фотография кончается на `--pa-hp-band` × 2480 = 2404-й колонке; приравняв, получаем W = (L − 271.8) / 0.75, то есть `400% / 3 - 362.4px`. `max(100%, …)` здесь — не страховка, а половина смысла правила. Формула даёт меньше 100 % при L < 1087px, то есть до 1151px окна кадр остаётся ровно таким, каким его принял владелец седьмой итерацией: там заливку и без того срезает `cover`, и трогать кадрирование незачем. Ширина, на которой формула включается, совпадает с той, с которой владелец увидел полоску («примерно от 1150px»), и это не подгонка — обе считаются из одного и того же края заливки в файле. Следствие одно: от 1266px окна кадру приходится расти и по высоте, до 6px, и `object-position: … 100%` снимает их сверху, из запаса над головами (4.8 % высоты кадра, 7.7px). Бумаги внизу не задеваются. */ @media (min-width: 901px) { .pa-header-photo { --pa-hp-w: max(100%, calc(400% / 3 - 362.4px)); } } .pa-header-photo img { display: block; width: var(--pa-hp-w); height: 100%; max-width: none; /* снимает `img { max-width: 100% }` шаблона */ object-fit: cover; /* Пропорция файла равна пропорции окна, поэтому в расчётной точке диапазона обрезать нечего. Отклонения бывают только по краям диапазона и при увеличении шрифта, когда содержимое перерастает `min-height`. Тогда `100%` по вертикали прижимает кадр к низу (первым уходит воздух над головами, бумаги остаются), а `75 %` по горизонтали снимает три четверти лишнего с пустого левого края и лишь четверть — справа, где сидит третий человек. */ object-position: 75% 100%; } /* Левый край кадра. Проценты — страховка: даже если кадр однажды подменят на более плотный, начало полосы под логотипом останется светлым. Правого растворения здесь нет: кадр везде кончается ровно на правом крае контентной колонки, растворять нечего (см. блок ниже). */ .pa-header-photo::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--pa-hp-w); /* градиент меряется по кадру, не по окну */ background: linear-gradient(90deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 16%); } /* --- осветление под надписями ------------------------------------------- `z-index: 0` на самой надписи обязателен, а не декоративен: без него её `::before` попал бы в тот же контекст наложения, что и фотография, и — раз логотип стоит в разметке ДО `` — фотография рисовалась бы поверх осветления. Со своим контекстом порядок обратный: фотография (z-index -1 у полосы) уходит под весь контекст надписи, а внутри него `::before` (-1) ложится под сам текст. `closest-side` привязывает радиусы эллипса к рамке `inset`: на любой ширине окна плотность падает до нуля ровно на её краях, поэтому одни и те же числа работают и для логотипа 393px на десктопе, и для 207px на телефоне. Поля рамки — единственное, что меняется по диапазонам: на телефоне вертикальное поле вдвое меньше, иначе эллипс телефона дотянулся бы до бумаг в нижней части кадра. */ .pa-header__bar { --pa-veil-x: -32px; --pa-veil-y: -8px; --pa-veil-a: .88; } .pa-header__bar .pa-logo, .pa-header__bar .pa-phone { position: relative; z-index: 0; } .pa-header__bar .pa-logo::before, .pa-header__bar .pa-phone::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: var(--pa-veil-y) var(--pa-veil-x); background: radial-gradient(closest-side ellipse at center, rgba(255, 255, 255, var(--pa-veil-a)) 0 70%, rgba(255, 255, 255, calc(var(--pa-veil-a) / 2)) 88%, rgba(255, 255, 255, 0) 100%); } /* Правое растворение кадра снято совсем (решение владельца 02.08.2026, пятая итерация). Оно закрывало вертикальный стык там, где узкий кадр кончался, а полоса продолжалась белым. С мастер-кадром `wide` кадр кончается ровно на правом крае контентной колонки — там же, где кончается кнопка заявки и начинается поле полосы, — и растворять больше нечего. */ /* --- 561…900px: контакты на второй строке ------------------------------- (решение владельца 02.08.2026, вторая итерация) Почему. В одну строку на 768px помещается 393px логотипа и 250px контактов при ширине колонки 745 — свободными остаются 103px, и крайние фигуры неизбежно оказывались под надписями. Перенос телефона и бургера на вторую строку освобождает всю ширину: на первой строке остаётся логотип и пустое место, и люди целиком встают правее логотипа. Раскладка ровно та же, что уже была до 560px (`modern.css`), просто её граница поднята с 560 до 900px. Именно до 900, а не до 1100: от 901px шаблон показывает в полосе ещё и кнопку заявки, а три элемента в нижней строке разложить некуда — `space-between` сажает сплошную синюю плашку в середину кадра, прижатие к правому краю кладёт её на кадр, к левому — оставляет пустым правый угол полосы. Владелец решил (02.08.2026) сохранить там кнопку и одну строку; этот диапазон описан следующим блоком. Геометрия. Высота и ширина кадра здесь связаны друг с другом, а не заданы по отдельности: высота растёт вместе с окном, а ширина кадра — это высота, умноженная на пропорцию файла (4.55). Кадр идёт во всю ширину контентной колонки на всём диапазоне: на 900px формула даёт 186.0px высоты и 846px ширины — ровно ширину колонки (900 минус два поля по 27px). Седьмая итерация вычитает из окна два поля вместо одного: до неё слой доходил до правого края браузера, и на 768px кадр резался окном. Полоса от этого стала на 3…5px ниже по всему диапазону (на 768px 158.7 вместо 163.7) — выше нигде не стала. Потолок высоты. Он стоял на 170px, и с 774px кадр переставал расти: на 800px справа оставалось 10px белого, на 900px — 110px, и туда садился бургер. Решение владельца от 02.08.2026 (четвёртая итерация): потолок снят до 195px, то есть внутри диапазона он не срабатывает вовсе. Иначе разрыв не закрыть: правый край исходника `image-gen-1(6)` проходит по третьему человеку, фона правее него в файле нет, поэтому расширить кадр по горизонтали не из чего — только вырастить окно по высоте. Кадры с фоном справа заказаны отдельно (`../P0-L-HEADER-PHOTO-ASSETS-REQUEST.md`). Нижний ограничитель 124px — это высота содержимого двух строк до 760px; ниже него опускаться некуда, и на 561…600px пропорция окна уходит на 4.25, то есть кадр теряет 6.6 % пустого левого края. Менять 4.55 в одном месте и не менять в другом нельзя: это пропорция файла `header-photo-tablet-1200x264`, и она стоит здесь трижды. */ @media (min-width: 561px) and (max-width: 900px) { .pa-logo { order: 1; } .pa-header__spacer { order: 2; } .pa-header__contacts { order: 3; width: 100%; justify-content: space-between; } .pa-header__bar { /* `modern.css` объявляет `row-gap: 8px`, а следующей строкой перебивает её сокращением `gap: clamp(12px, 2vw, 40px)` — оно задаёт оба зазора. В одну строку вертикальный зазор был не виден, а в две даёт 11…22px между логотипом и контактами: полоса вырастает выше расчётной, и пропорция окна уходит от пропорции кадра. До 560px `modern.css` возвращает 8px сам — здесь делаем то же. */ row-gap: 8px; --pa-bar-h: clamp(124px, calc((100vw - 2 * var(--pa-pad)) / 4.55), 195px); } :root { --pa-header-h: clamp(124px, calc((100vw - 2 * var(--pa-pad)) / 4.55), 195px); } .pa-header-photo { --pa-hp-w: min(100%, calc(var(--pa-bar-h) * 4.55)); } } /* 761…1100px: появляются серые подпись под логотипом и часы работы — им нужен запас по контрасту, поэтому рамка осветления шире. Ниже 761px обе надписи скрыты шаблоном, там остаётся только жирный тёмно-синий текст, и рамка держится узкой, чтобы не гасить людей. */ @media (min-width: 761px) and (max-width: 1100px) { .pa-header__bar { --pa-veil-x: -70px; --pa-veil-y: -22px; } } /* --- от 901px: одна строка, кадр во всю ширину колонки --------------------- (решение владельца 02.08.2026, пятая итерация) Раскладку здесь не трогаем совсем: логотип, телефон, кнопка заявки и — до 1100px — бургер стоят в одну строку, как и было. Кадр от 901px везде идёт во всю ширину контентной колонки, поэтому и высота полосы на всём диапазоне одна. Высота 156px — не круглое число и не вкус: на 1240px и шире колонка добирает свои 1240, и 1240 / 156 = 7.95 — ровно пропорция мастер-кадра `wide`. При 144px окну нужна пропорция 8.61, при 132px — 9.39, а у мастера полезная полоса (от макушек до нижнего края бумаг) 7.95: разница ушла бы в бумаги, а потом и в макушки. Владелец выбрал высоту вместо обрезки; той же правкой (решение 02.08.2026) высота 901…1100px поднята со 132 до тех же 156 — на 132px люди в кадре получались вчетверо мельче, чем на 900px. Ниже 1240px колонка ещё уже, окно выходит менее вытянутым, чем кадр, и `cover` снимает 2…32 % с ПРАВОГО края — пустой офисный фон за третьим человеком. Люди стоят на 30…56 % ширины мастера и не задеваются ни на одной ширине диапазона. */ @media (min-width: 901px) { .pa-header__bar { --pa-bar-h: 156px; --pa-veil-x: -70px; --pa-veil-y: -22px; /* 0.96, а не прежние 0.88, и по двум причинам сразу. На 901px телефон целиком стоит на пиджаке центрального человека — самом тёмном месте кадра, — и часам работы (#5b6b7a) при 0.88 не хватало до нормы WCAG (4.19 против 4.5). А у мастер-кадра слева не пустое белое поле, как у прежнего десктопного `image-gen-3(7)` (светлая зона 45.8 % ширины), а стеклянные перегородки и растения — светлые, но с деталью (9.2 %), и на 1101px подпись под логотипом давала 4.21. Оба провала поймал `p0l_contrast.py`, а не глаз. */ --pa-veil-a: .96; } :root { --pa-header-h: 156px; } } /* Печать: фон полосы фотографией не заливаем. */ @media print { .pa-header-photo { display: none; } .pa-header__bar { min-height: 0; } } /* ============================================================ Разделительные линии шапки сняты (решение владельца 02.08.2026). Их было три и все три жили в `modern.css`: граница полосы с фотографией (`.pa-header` до 1101px и `.pa-header__bar` от 1101px), верхняя граница строки меню (`.pa-nav`) и нижняя граница той же строки от 1101px. Первые две стояли вплотную и на десктопе читались как одна утолщённая линия под фотографией. Правила стоят здесь, а не в `modern.css`, по той же причине, по которой здесь стоит сам фон полосы: `modern.css` собирается генератором из патчей поставок D2-D5, ручная правка её текста разошлась бы со сборкой пакета. Этот файл подключается строкой позже, специфичность селекторов та же — поэтому переопределение срабатывает без `!important`. Граница `.pa-nav` ниже 1101px (`modern.css`, блок max-width: 1100px) НЕ снята намеренно: там это не разделитель шапки, а верхний край выпадающей панели бургер-меню, видимый только когда меню раскрыто. ============================================================ */ .pa-header { border-bottom: 0; box-shadow: none; } .pa-nav { border-top: 0; } @media (min-width: 1101px) { .pa-header__bar { border-bottom: 0; box-shadow: none; } .pa-nav { border-bottom: 0; box-shadow: none; } }