/* ========================================================================== Serikov Coffee 2026 — ЗНАЧКИ В ШАПКЕ (город, кабинет, избранное, корзина) Замечание заказчика: «убери зелёное выделение при наведении, избранное и корзина значки поставь как должно быть». Что здесь делается: 1) снимается светло-зелёная подложка, которая появлялась под пунктом при наведении, — в кадре шапки (Figma 41:2005) у пунктов нет ни заливки, ни рамки ни в покое, ни в наведении; 2) четыре фирменных значка из набора (img/kit/ico-*.svg) кладутся МАСКОЙ, чтобы их можно было перекрашивать: в файлах цвет вшитый, а отклик «зелёный ↔ бордовый» из interactions.css красит только currentColor; 3) подписи и счётчик приводятся к кадру: подпись Medium 17/115 %, счётчик Black 13/85 % над правым верхним углом значка. ПОРЯДОК ПОДКЛЮЧЕНИЯ: файл стоит в header.php после interactions.css и ДО мобильного слоя (newdesign/mobile/*.css). Это не формальность, а условие всей расстановки весов ниже: почти каждое правило написано ровно тем же весом, что и его конкурент в site.css/site-hf.css, и выигрывает только порядком файлов. Тем же приёмом планшет (mobile/tablet.css) и телефон (mobile/header.css, mobile/nav.css) продолжают перебивать уже меня — их размеры сознательно другие, ломать их нельзя. ========================================================================== */ /* -------------------------------------------------------------------------- 1. НЕТ ПОДЛОЖКИ ПРИ НАВЕДЕНИИ Конкуренты — оба (0,2,0), оба в site.css, который читается раньше: site.css:4613 .hd-ico:hover{opacity:1;background:var(--green-pale)} site.css:2935 .hd-city-btn:hover{background:var(--green-pale)} Берём тот же вес (0,2,0) — !important не нужен. Отменяем ТОЛЬКО фон. Всё остальное из тех правил остаётся: поля (padding), скругление и opacity:1 — на них держится тап-цель и то, что пункт при наведении не выцветает. Что остаётся откликом (interactions.css §5, правится не здесь): • значок и подпись меняют цвет — зелёные пункты становятся бордовыми, бордовая «Корзина» зеленеет; • на нажатии добавляется прижатие transform:scale(.96); • фокус с клавиатуры — зелёная обводка. То есть отклик у значков есть, но он цветовой, как в макете, а не плашкой. Раньше цвет менялся только у подписи «Избранное»/«Корзина»/«Войти», потому что их значки были инлайновыми с currentColor, а метка города — одноцветным . Теперь маска (см. §2) красится вместе с подписью у всех четырёх. */ .hd-ico:hover{background-color:transparent} .hd-city-btn:hover{background-color:transparent} /* Заодно снимаем подложку с нажатия и с открытой всплывашки города: отдельного правила на них нет, но фон наследуется от :hover, если палец на сенсорном экране «завис» на пункте. */ .hd-ico:active, .hd-city-btn:active{background-color:transparent} /* -------------------------------------------------------------------------- 2. ЗНАЧКИ ИЗ МАКЕТА — МАСКОЙ Файлы набора: newdesign/img/kit/ico-city.svg, ico-account.svg, ico-fav.svg, ico-cart.svg. Цвет в них ВШИТ (три зелёных #00723B, корзина бордовая #8B2628), поэтому положить их картинкой нельзя: при наведении значок остался бы прежнего цвета, а подпись рядом перекрасилась. Приём тот же, что у кнопки «В корзину» (site.css:1270) и у фигуры кнопок действий (site.css:3419): фигура приходит маской, цвет даёт background-color:currentColor. Он же решает второй случай — в мобильной нижней панели корзина сознательно зелёная (mobile/nav.css: .mnav .hd-ico.cart{color:var(--green-brand)}), и маска подхватит это сама. Носитель — ПУСТОЙ с тем же viewBox, что у файла, а не . Это важно: размеры значков в шапке заданы в четырёх местах селекторами по типу элемента — site.css:3685,3820 .hd-ico > svg{height:...} mobile/tablet.css .hd-ico > svg{height:24px} mobile/nav.css .mnav .hd-ico svg{width:22px;height:22px} mobile/landscape.css body .mnav .hd-ico svg{width:20px;height:20px} На они бы не сработали, и пришлось бы переписывать чужие файлы. С вся отлаженная раскладка планшета и нижней панели продолжает работать без единой правки. Ширину даёт пропорция viewBox (width:auto у site.css), aspect-ratio продублирован на случай, если height придёт не от нас. ЕСТЬ ЛИ ЗАПАСНОЙ ВАРИАНТ, ЕСЛИ МАСКА НЕ ОТРАБОТАЕТ. Носитель — пустой : своего рисунка внутри нет, поэтому при неудаче с маской на месте значка была бы пустота — сразу у всех четырёх. Держать такой единственный путь нельзя, тем более что приём на -элементе в проекте применяется впервые (у site.css:1270 это , у site.css:3419
), а посмотреть глазами сейчас нечем. Поэтому фигура кладётся ДВАЖДЫ: • обычной картинкой в background-image — она рисуется всегда и в своём вшитом цвете (зелёные значки, бордовая корзина), то есть ровно так, как значки выглядели до этой правки; • маской — и только внутри @supports, где браузер сам подтвердил, что понимает mask-image, картинка гасится (background-image:none), а её место занимает заливка currentColor, которую и красит отклик. Дописывать исходный внутрь для той же страховки не стали: файлы набора весят 12–34 КБ каждый (в сумме ~85 КБ), и они попали бы в HTML каждой страницы вместо одной кэшируемой картинки на сайт. background-image ссылается на тот же файл, что и маска, — лишней загрузки нет. */ .hd-ico-fig{ background-repeat:no-repeat; background-position:center; background-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain} /* Коробки значков — из кадра: город 15×20, избранное 21×20, войти 18×20, корзина 17×21. Высоту не пишем прямо в этих правилах, а кладём в переменную: сама height ниже объявлена ровно тем же весом, что и конкурент в site.css, иначе я бы перебил планшет и телефон. Файл значка указан в двух свойствах сразу — рисунком и маской, см. выше. */ .hd-ico-fig.is-city{--hd-ico-h:calc(20 * var(--d));aspect-ratio:17.2818/22.1274; background-image:url(img/kit/ico-city.svg); -webkit-mask-image:url(img/kit/ico-city.svg); mask-image:url(img/kit/ico-city.svg)} .hd-ico-fig.is-acc{--hd-ico-h:calc(20 * var(--d));aspect-ratio:19.9277/23.4969; background-image:url(img/kit/ico-account.svg); -webkit-mask-image:url(img/kit/ico-account.svg); mask-image:url(img/kit/ico-account.svg)} .hd-ico-fig.is-fav{--hd-ico-h:calc(20 * var(--d));aspect-ratio:21/20; background-image:url(img/kit/ico-fav.svg); -webkit-mask-image:url(img/kit/ico-fav.svg); mask-image:url(img/kit/ico-fav.svg)} .hd-ico-fig.is-cart{--hd-ico-h:calc(21 * var(--d));aspect-ratio:17/21; background-image:url(img/kit/ico-cart.svg); -webkit-mask-image:url(img/kit/ico-cart.svg); mask-image:url(img/kit/ico-cart.svg)} /* Перекраска — только там, где маска поддержана. Проверяем оба написания: Safari до 15.4 знает лишь -webkit-mask-image, Chrome и Firefox — обычное. Селекторы повторены полностью (0,2,0), потому что гасить background-image надо ровно тем же весом, что и правила выше, — иначе они бы выиграли и картинка осталась бы поверх заливки. Браузер без @supports (совсем старый) просто не увидит этот блок и покажет значки картинкой — фигура на месте, цвет вшитый. */ @supports ((-webkit-mask-image:url(img/kit/ico-cart.svg)) or (mask-image:url(img/kit/ico-cart.svg))){ .hd-ico-fig.is-city, .hd-ico-fig.is-acc, .hd-ico-fig.is-fav, .hd-ico-fig.is-cart{background-image:none;background-color:currentColor} } /* Высота значка. Конкурент — site.css:3820 .hd-ico > img,.hd-ico > svg,.hd-city-btn > .hd-ico-img{height:calc(22 * var(--d))} Там одна высота на все четыре, здесь — своя у каждого, как в кадре. Вес совпадает с конкурентом: (0,1,1) для значков ссылок и (0,2,0) для метки города, — так планшет (mobile/tablet.css: 24px) и телефон (mobile/header.css: 18px у города, mobile/nav.css: 22px в панели) по-прежнему перебивают нас, а не наоборот. */ .hd-ico > svg{height:var(--hd-ico-h,calc(20 * var(--d)))} .hd-city-btn > .hd-ico-img{height:var(--hd-ico-h,calc(20 * var(--d)))} /* Цвет в покое. Подписи «Избранное» и «Войти» уже брендовые зелёные (site-hf.css:113), «Корзина» бордовая (site-hf.css:117) — значок теперь берёт тот же цвет сам. У города цвет кнопки был --green-deep-2 (#22612b): конкурент site.css:2930 .hd-city-btn{color:var(--green-deep-2)} (0,1,0), берём тот же вес. В кадре у города тот же брендовый #00723B, что у соседей, — метка и подпись должны совпасть с ними. */ .hd-city-btn{color:var(--green-brand)} /* Подпись города красилась отдельно: site.css:4640 .hd-city-wrap b{color:var(--green-deep-2)} (0,1,1) — тот же вес. */ .hd-city-wrap b{color:var(--green-brand)} /* Метка города перекрашивается вместе с подписью. В interactions.css:448 бордовеет только .hd-city-wrap b — тогда метка была одноцветным и краситься не умела. Теперь красим кнопку целиком, и маска едет следом. Вес (0,2,0) против базового (0,1,0) выше. Под hover:hover — чтобы на сенсорном экране цвет не «залипал» после тапа. */ @media (hover:hover){ .hd-city-btn:hover{color:var(--cart)} } /* На нажатии — то же самое: на телефоне и планшете наведения нет, и смена цвета происходит именно здесь (парно с interactions.css:457). */ .hd-city-btn:active{color:var(--cart)} /* Плавность цвета у метки города: transition на .hd-city-btn задан в interactions.css:419 весом (0,2,0) и уже перечисляет color. */ /* -------------------------------------------------------------------------- 3. ПОДПИСИ И СЧЁТЧИК — ЗДЕСЬ НИЧЕГО НЕ ПРАВИМ Подписи уже совпадают с кадром: Gotham Pro Medium (font-weight:500), 17 (site.css:3819 font-size:17*--d), межстрочный 115 % (site-hf.css:113 line-height:1.15), зелёный у города/избранного/кабинета и бордовый у корзины. Счётчик тоже уже приведён к кадру (Black 13, межстрочный 85 %, над правым верхним углом значка) — этим занимается fixes-round3.css:99-107, и делает это точнее: там раздельные смещения по горизонтали для корзины и для избранного, потому что сердце шире мешка. ЗДЕСЬ СВОЕГО ПРАВИЛА НА .cnt БЫТЬ НЕ ДОЛЖНО, и вот почему. Было: .hd-ico .cnt{top:-6*--d;left:calc(50% + 12*--d);right:auto; font-weight:900;font-size:13*--d;line-height:.85} — вес (0,2,0). • На десктопе оно мёртвое: конкурент fixes-round3.css:101 .head-inner .hd-ico .cnt — (0,3,0), а специфичность сильнее порядка файлов. То есть правило ничего не меняло, только притворялось. • На планшете (768–1023) оно, наоборот, единственное живое из двух: fixes-round3.css сознательно закрыт @media (min-width:1024px), чтобы не лезть в планшет. mobile/tablet.css:139 задаёт счётчику свои top/left/right/font-size/font-weight, но line-height не задаёт — и .85 отсюда доезжало до планшета и поднимало цифру примерно на пиксель против отлаженной там раскладки. Правило удалено целиком: на десктопе оно бесполезно, на планшете вредно. Цвет счётчика тоже оставлен как есть: у корзины бордовый (site-hf.css:121, как в кадре), у избранного зелёный (site-hf.css:110) — избранного в кадре шапки нет, а зелёная цифра рядом с зелёным сердцем читается как «отложено», а не как «внимание». */