/* ========================================================================== ЧЕТЫРЕ ПЛИТКИ НА ГЛАВНОЙ (.entries/.entry) — правки по замечаниям заказчика Файл подключать ПОСЛЕ site.css и home.css (в header.php — перед glob'ом mobile/*.css). Ниже перебиваем правила аккордеона из site.css (~444–471) специфичностью и порядком, не трогая сам site.css. Оба правила действуют только там же, где живёт аккордеон: @media(min-width:1000px) and (hover:hover). На телефоне и планшете (mobile/*.css, tablet.css, landscape.css) ничего не меняется — их диапазоны с этим условием не пересекаются. ========================================================================== */ @media (min-width:1000px) and (hover:hover){ /* ------------------------------------------------------------------ 1. «Если курсор по середине, между двумя карточками, то они просто серыми становятся». Причина: неактивный вид навешен на .entries:hover .entry:not(:hover) (site.css:453, 456, 461, 471). Но :hover у ленты срабатывает и на промежутках между плитками — gap входит в бокс флекс-контейнера. Курсор в щели: ни одна плитка не :hover, значит «не наведёнными» оказываются все четыре сразу, и лента целиком уходит в серое. Решение: условие «наведена именно плитка» выражаем через :has — .entries:has(.entry:hover). Тогда неактивный вид включается только когда курсор реально стоит на соседней плитке. Порядок правил: сперва гасим исходное состояние тем же селектором (та же специфичность 0,4,0 — выигрываем порядком), затем возвращаем его уже под :has (0,5,0 — выигрываем специфичностью). :has в проекте уже используется (site.css:1051, 1964, 2011 и др.), но здесь она несёт весь эффект, поэтому обёрнута в @supports: если браузер :has не знает, блок целиком отбрасывается и остаётся прежнее поведение site.css, а не сломанный аккордеон без затухания. flex-grow:.78 (site.css:451) отдельно не гасим: при flex-basis:0 одинаковый grow у всех четырёх даёт те же равные ширины, что и grow:1 — в щели ширины не меняются, видно было только цвет, кегль и притухший список. ------------------------------------------------------------------ */ @supports selector(:has(*)){ /* Курсор в щели — плитки в обычном виде. */ .entries:hover .entry:not(:hover){filter:none} /* Кегль возвращаем не числом, а ролью набора: в покое заголовок плитки задан .sc2026-page .entry h3{font-size:var(--t-h3)} (site.css:4499), а не calc(24*--d) из site.css:3851. */ .entries:hover .entry:not(:hover) h3{font-size:var(--t-h3)} .entries:hover .entry:not(:hover) ul{opacity:1} .entries:hover .entry:not(:hover) .orn{opacity:1} /* Наведена соседняя плитка — только тогда неактивный вид. Значения ровно те же, что в site.css:453/456/461/471. */ .entries:has(.entry:hover) .entry:not(:hover){filter:saturate(.72) brightness(.9)} .entries:has(.entry:hover) .entry:not(:hover) h3{font-size:calc(21 * var(--d))} .entries:has(.entry:hover) .entry:not(:hover) ul{opacity:.35} .entries:has(.entry:hover) .entry:not(:hover) .orn{opacity:.5} } /* ------------------------------------------------------------------ 2. «Лучше в сложенном состоянии вообще чтобы кнопка пропадала». Речь про круглую зелёную стрелку в правом верхнем углу — это .go (site.css:3887; второй арроу .entry::after там же выключен на 3867, а .entry-btn — это пилюля «Узнать подробнее» под списком, её не трогаем). Появление плавное, как у .entry-btn. Сдвиг .entry:hover .go{transform:translateX(4px)} (site.css:3891) оставляем: он идёт одновременно с проявлением и читается как короткий выезд стрелки. Поэтому в переход добавлена и opacity. .go — это