/* ===================================================================== Точечные правки третьего круга правок заказчика. Файл подключается ПОСЛЕ site-hf.css, site.css и home.css — иначе он ничего не перебьёт. Место относительно glob'а mobile/*.css роли не играет, и правильнее ставить его ДО мобильного слоя: мобильные правила должны оставаться последними, как задумано в header.php. Все правила здесь написаны так, чтобы порядок с мобильным слоем был безразличен — либо они сильнее по специфичности, либо слабее и заведомо проигрывают телефону, либо ограничены своим медиазапросом. !important не нужен. Диапазоны те же, что во всём мобильном слое: телефон — (max-width:767px), (max-width:1023px) and (max-height:520px) планшет — (min-width:768px) and (max-width:1023px) and (min-height:521px) Отсюда «широкий экран» здесь — min-width:1024px. ===================================================================== */ /* --------------------------------------------------------------------- 1. БЕГУЩАЯ СТРОКА: скорость при восьми копиях ленты Разметка (public/index.sc2026.php) печатает ленту восемь раз вместо двух — иначе на широком окне виден обрыв. Расчёт там же в комментарии. Здесь остаётся вторая половина дела. @keyframes tick сдвигает дорожку на −50 % её ширины за 38 s. Дорожка стала вчетверо шире, значит за те же 38 s она проезжала бы вчетверо больший путь — лента понеслась бы. Держим прежнюю скорость: длительность растёт ровно во столько же раз, во сколько выросло число копий (38 s × 8/2 = 152 s). Такой пересчёт не зависит от кегля, поэтому и на телефоне скорость та же, что была. Специфичность: .ticker-t в site.css — (0,1,0), здесь (0,2,0). Отдельное свойство animation-duration, а не сокращённое animation: остальные части (кривая, повтор, имя) остаются авторскими. */ .ticker-wrap .ticker-t{animation-duration:152s} /* --------------------------------------------------------------------- 2. КНОПКА WHATSAPP: круглая, только значок Было: пилюля «значок + Поддержка», подпись пряталась лишь при ≤560px. Заказчик просит круг со значком на всех экранах. Диаметр 52 — как у круглой кнопки «дальше» из набора Figma (docs/DESIGN-SYSTEM-FIGMA.md, «Круглая кнопка „дальше“», 52×52). Цвет #25d366 и тень не трогаем — они уже стоят в site-hf.css/site.css. Правило без медиазапроса: круг нужен везде. bottom тоже не трогаем — его двигают mobile/nav.css и mobile/landscape.css, чтобы кнопка стояла над нижней панелью. 52 px — крупнее порога тап-цели 44 px. Специфичность: .fab{padding:14px 18px} — (0,1,0), и .fab{padding:15px} в @media(max-width:560px) — тоже (0,1,0). Здесь a.fab — (0,1,1). */ a.fab{width:52px;height:52px;padding:0;gap:0; justify-content:center;border-radius:999px} /* Значок не должен сжиматься до нуля в узком флексе. */ a.fab > svg{flex:none} /* Подпись уходит из вида, но остаётся в разметке для программ чтения. Имя ссылки берётся из aria-label="Написать в WhatsApp" на самой , так что тексту достаточно не мешать раскладке. Перебивает .fab span{display:none} из @media(max-width:560px) — (0,1,1) против (0,1,2) здесь. */ a.fab > span{position:absolute;display:block;width:1px;height:1px; margin:-1px;padding:0;border:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* Фокус с клавиатуры: у круглой кнопки без подписи он особенно нужен. Свечение по кругу, без прямоугольной обводки (правило «без обводки», BRAND-RULES §3.2) — тот же приём, что у пунктов нижней панели в mobile/nav.css. Тёмно-зелёное свечение на светлой зелени кнопки видно. */ a.fab:focus-visible{outline:none;filter:drop-shadow(0 0 3px var(--green-brand))} /* --------------------------------------------------------------------- 3. СЧЁТЧИК У ЗНАЧКА КОРЗИНЫ По набору (docs/DESIGN-SYSTEM-FIGMA.md, «Значок корзины со счётчиком») число — Gotham Pro Black 13, межстрочный 85 %, бордовое, над правым верхним углом значка, смещение −6 по вертикали от верха блока. В site.css (блок масштаба --d, строка ~3824) стояло: кегль 17, вес 500, верх −10 и привязка по правому краю (right:calc(50% - 21.5*--d)). Отсюда и «криво»: цифра была крупнее и легче набора, висела выше, а привязка по правому краю уводила двузначное число влево, на сам значок. Считаем по значку, а не по столбцу. Столбец .hd-ico шире значка на всю подпись, поэтому точка отсчёта — его середина. Значок корзины 18×21 при height:22*--d даёт ширину 22 × 18/21 ≈ 18,9*--d, половина ≈ 9,4. В макете число стоит в 3,5 правее значка: 9,4 + 3,5 ≈ 13. Привязка по left, а не по right: так двузначное число растёт наружу, а не наползает на значок. Цвет не задаём: бордовый корзине и зелёный избранному уже дают .hd-ico .cnt и .hd-ico:not(.cart) .cnt — не хочется случайно перекрасить счётчик избранного. Специфичность: .hd-ico .cnt — (0,2,0) в site-hf.css, site.css и mobile/tablet.css. Здесь (0,3,0) плюс медиазапрос min-width:1024px, чтобы не задеть ни планшет (768–1023), ни кружок в нижней панели (.mnav .hd-ico .cnt, свой вид, живёт в телефонном диапазоне). */ @media (min-width:1024px){ .head-inner .hd-ico .cnt{top:calc(-6 * var(--d));right:auto; font-weight:900;font-size:calc(13 * var(--d));line-height:.85} .head-inner .hd-ico.cart .cnt{left:calc(50% + 13 * var(--d))} /* Сердце избранного шире корзины (21×20 при height:22*--d → ≈23,1*--d), половина ≈ 11,6, плюс те же 3,5 — 15. */ .head-inner .hd-ico:not(.cart) .cnt{left:calc(50% + 15 * var(--d))} } /* --------------------------------------------------------------------- 4. ПОДВАЛ: отступы в колонке «Покупателям» после разделения ссылок В footer.php «доставка и оплата» и «программа лояльности» разъехались по своим

— до этого они стояли в одном абзаце и слипались в строку, потому что .ft-col.c3 a{display:inline}. Из-за нового абзаца нумерация сдвинулась на единицу, и правило .ft-col.c3 p:nth-child(4){margin-bottom:5px} (оно поджимало «оптовое предложение» к «личному кабинету») попало на заголовок «Юридическим лицам». Возвращаем каждому свой отступ по факту нового порядка: 1 «Физическим лицам» 4 «Юридическим лицам» 2 «доставка и оплата» 5 «оптовое предложение» 3 «программа лояльности» 6 «личный кабинет» Специфичность: селектор повторяет исходный из site-hf.css:155 и site.css:235 — .ft-col.c3 p:nth-child(4) — это (0,3,1): три класса (.ft-col, .c3 и :nth-child, который считается за класс) и элемент p. Ровно столько же, поэтому решает порядок файлов: этот подключается после site.css и перебивает. Прибавлять сюда .site-foot нельзя: с ним вес становится (0,4,1) — столько же, сколько у мобильного .site-foot .ft-in .ft-col.c3 p{margin:0} (mobile/footer.css:88), — и если наш файл окажется ниже мобильного, в телефонном аккордеоне «Покупателям» вернутся лишние отступы, которых там быть не должно (пункты держатся на padding и min-height:44px). При весе (0,3,1) мобильный выигрывает специфичностью при любом порядке. Медиазапрос не ставим намеренно: планшет (768–1023) показывает десктопный подвал, mobile/tablet.css отступы в c3 не переопределяет, значит правка нужна и там. */ .ft-col.c3 p:nth-child(4){margin-bottom:10px} .ft-col.c3 p:nth-child(5){margin-bottom:5px} /* --------------------------------------------------------------------- 5. КВИЗ: «ТУРКА / ГЕЙЗЕР» в одну строку Здесь важно, чем мерить. Кегль заголовка НЕ масштабируется: site.css:4587 ставит .qc .qc-t{font-size:24px} (и 4588 — описание 17px) поверх масштабируемого site.css:3509 — там прямо сказано «ставим настоящие пиксели, чтобы 24 были 24». При ≤1039px это 20 и 15px (site.css:4589–4592). Ширина же .qc-txt стояла 178*--qu, то есть тянулась за окном, — поэтому заголовок переносился, и чем уже окно, тем сильнее. Считаем в пикселях, тем же, чем набран текст. Самый длинный заголовок «КАПЕЛЬНАЯ / ВОРОНКА» прописными — ≈12,5 кегля Gotham Pro Black (сумма ширин знаков в долях кегля), при 24px это ≈300px. Берём 340px: те же 300 плюс запас на метрику шрифта и подставной шрифт до загрузки. Место есть на всей поддерживаемой полосе. Самое узкое окно в этом диапазоне — 1040px: там --u упирается в нижнюю границу clamp (.70px), .mac шириной с окно, --qu ≈ 0,74. Правая колонка 900*--qu ≈ 666px, из них поля карточки 2×40*--qu ≈ 59, значок 117*--qu ≈ 87, два промежутка 20*--qu ≈ 30 и стрелка 52*--qu ≈ 38 — тексту остаётся ≈452px. На 1440 свободно ≈590px. 340 влезает везде, стрелка остаётся прижатой вправо своим margin-left:auto. Ширину, а не min-width: у .qc-txt осталось flex:0 1 auto, и при неожиданном сужении блок сожмётся, а не выдавит стрелку за край. Только широкий экран: при ≤1039px site.css переводит .qc-txt на width:auto;flex:1 1 auto, а телефон (mobile/quiz.css) — ещё и на min-width:0. Там заголовок 20 и 17px и переносится осознанно. Специфичность: .qc .qc-txt — (0,2,0), здесь .qcards .qc .qc-txt — (0,3,0). */ @media (min-width:1040px){ .qcards .qc .qc-txt{width:340px} }