/* Задача 119, 19.08 — CSS шаблона вынесен из header.php в отдельный кэшируемый файл, дословно, без переписывания. Первый блок ниже — общий CSS шаблона (был инлайновым стилевым блоком в header.php, строки 129-1185 на момент переноса). Второй блок (маркер ниже) — CSS первого экрана главной (#v12), раньше рендерился условно только на / (строки 1920-2115), но целиком заскоупен под #v12 — безопасно грузить на всех страницах, на остальных этого id просто нет в DOM. */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} /* Задача 093, 17.08 — мокап шапка-B4.html просил ТОЧНЫЕ #BF5C72/#A8264A/#2F3134, но задача была ограничена только этим файлом — заводились локальные --phx-hd-acc/--phx-hd-acc-h, чтобы не трогать общий tokens.css вслепую. Задача 094, 17.08 — тёплый пион стал основным цветом действия ВО ВСЁМ шаблоне, --acc-btn/--acc-btn-h в tokens.css теперь и есть #BF5C72/#A8264A побайтово (см. комментарий там) — локальные --phx-hd-acc/-h стали дублем и убраны, остался только --phx-hd-graphite (#2F3134, кнопка телефона в шапке — задача 094 явно просила её не трогать, а общего токена графита в tokens.css нет и не заводился — не тот масштаб правки, графит остаётся локальной особенностью шапки). */ :root{--phx-hd-graphite:#2F3134;--phx-hd-neutral:#F5F3F1} /* задача 069 — подвал прижат к низу окна раскладкой (flex-колонка на всю высоту окна), а не подпоркой в пикселях у #phx-content: то держало подвал ниже нижней границы окна только до высоты подпорки, на экранах выше промахивалось. #phx-main{flex:1 0 auto} ниже забирает всё свободное место между шапкой и подвалом — на длинных страницах просто не растягивается сверх содержимого, подвал остаётся сразу после него, как раньше. 100dvh, не 100vh — учитывает высоту адресной панели телефона, которая то есть, то нет. */ body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.55;display:flex;flex-direction:column;min-height:100dvh} /* задача 076 — 069 прижимала подвал раскладкой (flex:1 0 auto), но это не мешает подвалу быть ВИДНЫМ в окне, пока #phx-main короче доступной высоты (например #catalog на входе на /catalog/ теряет CSS-резерв :empty ровно в момент, когда JS уже начал класть в него "Загружаю раздел…", а настоящий контент ещё не пришёл — детали в reports/076-*.md). min-height ниже не даёт #phx-main быть короче "окно минус шапка" ни в какой momент, независимо от того, что происходит внутри с JS/сетью. --phx-header-h ставится синхронным скриптом сразу после (см. выше) — 160px здесь только запасной вариант на случай отключённого JS, реальное число всегда приходит раньше первой раскладки #phx-main. */ #phx-main{flex:1 0 auto;min-height:calc(100dvh - var(--phx-header-h, 160px))} /* Задача 125, 19.08 — Алексей с живого телефона: мало воздуха между рядом кнопок шапки и содержимым (крошками на большинстве страниц, героем на главной). Один padding-top на #phx-main вместо правки в каждом шаблоне — box-sizing:border-box (глобальный *{...} выше) держит его внутри min-height, лишнего скролла не добавляет. На страницах с крошками .phx-crumbs{padding:14px 0} — это ВНУТРЕННИЙ отступ до текста ссылки, к внешней позиции самой крошки (что меряем) отношения не имеет, поэтому не складывается с этим правилом. На главной #v12 ничего своего не добавлял — 24px, что было видно раньше, оказались margin-top:var(--sp-3) баннера (.v12-banner), просочившимся наружу через пустые обёртки схлопыванием внешних отступов (сам #v12/.wrap — без padding/border, ничего не мешало) — ровно то, о чём предупреждала задача: не «сложить дважды», а один явный источник вместо случайного. padding-top на #phx-main блокирует это схлопывание (родитель с padding-top не даёт отступу первого потомка просочиться наружу) — весь зазор задаётся этим одним числом, var(--sp-3) внутри просто перестаёт быть видимым снаружи блока. Только мобильный диапазон — тот же порог ≤900px, что у .phx-subnav (десктопная строка меню) выше; десктопная раскладка эту переменную не использует вообще. Задача 133, 20.08 — первый заход (padding-top 30px→56px) отменён: увеличение на главной читалось как «отступ до картинки баннера», не то, что имелось в виду. Уточнено голосом: отсчёт — от нижней границы шапки (border-bottom у header.phx, тот же ориентир, что и раньше), но по факту нужно было не увеличить, а уменьшить — до 16px. Правило и механизм (порог ≤900px, блокировка схлопывания через #v12) не менялись, изменилось только число. */ @media(max-width:900px){ #phx-main{padding-top:16px} } /* задача 076, шаг 3 — страховка сверх min-height выше: даже после резерва высоты на 390px остался узкий (~22px) кадр, где нижний край подвала уже показался в окне (см. отчёт, до/после видео) — доля дюйма, но глазами это то же самое мелькание. .phx-ready ставится inline-скриптом сразу после закрывающего (footer.php) — то есть ровно в момент, когда парсер дошёл до конца документа и весь контент над подвалом уже разобран. До этого подвал visibility:hidden (не display:none — тот убирает подвал из потока и вернул бы прыжок раскладки, ровно то, что чинили в 069). Без JS класс не появится никогда — noscript-страховка в обязана вернуть подвал видимым. */ html:not(.phx-ready) footer{visibility:hidden} h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.01em} ::selection{background:var(--acc);color:var(--white)} a{color:inherit;text-decoration:none} .phx-skip{position:absolute;left:-9999px;top:0;background:var(--prim);color:var(--bg);padding:12px 24px;z-index:200;border-radius:var(--btn-radius);font-size:var(--btn-fs-main)} .phx-skip:focus{left:0;top:0} a:focus-visible,button:focus-visible,input:focus-visible,.btn:focus-visible{outline:2px solid var(--acc-text);outline-offset:2px} /* B27 15.08 (tasks/036-container-1680-and-empty-cart.md, пункт 1) — решение Алексея: потолок ширины контейнера на этом проекте поднят с 1400 до 1680px (разбор mirrey.ru). Это осознанное отступление от общего правила website-quality.md (1440) для ЭТОГО конкретного токена — остальные его пункты (типографика/цвета/8pt-сетка) не менялись. B29 15.08 — замечание архитектора по приёмке пункта 1: на 1440/1366 контейнер упирается почти в самые края (боковой зазор был ~9–10px против прежних 20 на 1440, см. отчёт 036-container-1680.md). Отступ поднят с 20 до 24px с каждой стороны — минимальный воздух между содержимым и краем экрана сохраняется при любой ширине сжатия. */ .wrap{max-width:1680px;margin:0 auto;padding:0 24px} /* === Задача 170, 21.08 — единая система кнопок, вариант Б (скруглённый прямоугольник) === Живой замер до правки (5 страниц x 3 ширины): 426 кнопок, 12 разных скруглений, 29 сочетаний «радиус+шрифт+размер», 275 кнопок рисовались системным Arial. Причина Arial — ровно то, что чинит первое правило ниже: