/* ============================================================ Блок «Сетка кейсов» (acf/cases-grid). ТЗ: site/docs/tz/tz-cases-grid.md Копия правил секции кейсов из темы (style.css) — пока главная рендерится старым шорткодом [bs-isotope-masonry-overlay], оба набора живы и совпадают один-в-один. КАК ТОЛЬКО контент главной переключат на блок — копию из themes/bootcommerce-child-main/style.css (раздел «СЕТКА КЕЙСОВ») удалить, чтобы источник правды остался один. ЧТО СЮДА СОЗНАТЕЛЬНО НЕ ПЕРЕНЕСЕНО: --case-pad / --case-max / --case-radius объявлены на :root в теме — их использует не только сетка, но и фиксированный переключатель темы и плашка hero на странице кейса. Дублировать числа здесь нельзя: разъедутся. ============================================================ */ .cases-section { --case-gap: clamp(0.75rem, 1.4vw, 1.75rem); /* Отступление от ТЗ: там --case-focus: var(--macro-accent) (#172747). Кольцо рисуется ВНУТРИ карточки, а обложки кейсов всегда тёмно-синие — навигационный акцент на них не виден вообще. Берём светлый акцент (#9db8ff, 8.9:1 к тёмной обложке) в обеих темах + тёмный внутренний ореол, чтобы кольцо читалось и на светлой фотообложке (Aukids). */ --case-focus: #9db8ff; --case-scrim: 14, 23, 43; /* Плашки карточки (T15-v2): имя справа-сверху, тэглайн снизу по центру. БЕЛЫЕ в ОБЕИХ темах по прямому указанию владельца: белый фон + тёмный navy-текст, чтобы читались на любой обложке кейса. Значения — через токены проекта, без хардкод-hex в правилах ниже. --card-plate-bg — белый: --bs-white всегда #fff в обеих темах (в отличие от --macro-surface, который в тёмной теме переопределён в navy — для белой плашки не годится); --card-plate-ink — бренд-navy (--macro-brand-navy, цвет логотипа, объявлен один раз на :root, в тёмной теме не меняется); --card-plate-line — тонкий кант для отрыва плашки от светлой обложки; --card-plate-shadow — мягкая тень под плашкой для читаемости на любой обложке (навязана тёмным rgb, одинакова в обеих темах). */ --card-plate-bg: var(--bs-white, #fff); --card-plate-ink: var(--macro-brand-navy); --card-plate-radius: 0.625rem; /* Вордмарк продукта (web-apps) в плашке имени. T44: плашка имени адаптируется к теме (см. .dark-theme-секцию внизу), поэтому пара цветов вордмарка ИНВЕРТИРУЕТСЯ по теме через переопределение --pw-dark/--pw-accent. Здесь — СВЕТЛАЯ тема (плашка белая): --pw-dark — тёмная часть = бренд-navy (--macro-brand-navy, объявлен на :root темы); --pw-accent — синяя часть = акцентный синий #3e6bc4. Заводим единый токен --macro-accent-blue (единственный «сырой» синий), чтобы --pw-accent ссылался на токен, а не на hex. В светлой теме --macro-accent = navy, поэтому для синей части берём именно accent-blue, иначе она слилась бы с тёмной. --macro-accent-blue-light — светлый вариант акцентного синего для ТЁМНОЙ темы (вордмарк на тёмной плашке): используется в переопределении --pw-accent в body.dark-theme ниже. */ --macro-accent-blue: #3e6bc4; --macro-accent-blue-light: #9db8ff; --pw-dark: var(--macro-brand-navy); --pw-accent: var(--macro-accent-blue); --card-plate-line: 1px solid rgba(23, 39, 71, 0.08); --card-plate-shadow: 0 0.25rem 0.75rem rgba(9, 16, 32, 0.28); /* Отступ от верха (T16). Воздух под верхней полосой = меж-кейсовому зазору (--top-content-air, clamp(0.75rem,1.4vw,1.75rem) на :root темы), высоту самой полосы компенсирует --top-plate-space (53/57px). Так верхний воздух секции равен зазору между кейсами — единый вертикальный ритм. Без max() и без !important: полоса прижата к верху, её кромка фиксирована, страховка через clamp больше не нужна. */ padding-top: calc(var(--top-plate-space) + var(--top-content-air)); /* Нижний воздух секции (T64). Приведён к тому же ритму, что у панелей team/about/contacts (padding-block: clamp(1.5rem,4vw,3rem)) — раньше здесь было clamp(3rem,6vw,6rem) (до 96px), и он СКЛАДЫВАЛСЯ с margin-top футера (.site-footer, тоже до 96px), давая ~182px пустоты под последним рядом плиток на вкладках «ПО»/«Сайты», тогда как на панелях зазор умеренный. Основной воздух над футером держит сам футер (margin-top), секции достаточно умеренного отступа, чтобы плитки не липли к линии подвала. Футер не трогаем — его margin-top нужен и страницам кейсов, где своего padding-bottom нет. T72b (2026-08-24): зазор кейсов от футера сокращён ~в 3 раза. Этот вклад урезан втрое (было clamp(1.5rem,4vw,3rem) ≈ до 48px), второй вклад — margin-top футера — урезан скопед только на главной (.home .site-footer в style.css темы), чтобы страницы кейсов сохранили воздух над подвалом. */ padding-bottom: clamp(0.5rem, 1.3vw, 1rem); padding-left: var(--case-pad); padding-right: var(--case-pad); } /* Full-bleed. По умолчанию секция уже во всю ширину (прямой ребёнок .entry-content). Если контент-редактор завернул шорткод в бутстраповский .container — вырываемся на 100vw; лишние пиксели под скроллбаром обрезает #page_entry_content { overflow-x: clip }. */ .container > .cases-section, .container-fluid > .cases-section, .row > * > .cases-section { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); } .cases-grid { max-width: var(--case-max); margin-left: auto; margin-right: auto; } /* --- Шапка секции — УБРАНА 23.08.2026 по решению владельца --- Над сеткой кейсов больше нет ни заголовка «Кейсы» (.cases-head__title), ни подзаголовка категории (.cases-head__subtitle), ни линейки со счётчиком (.cases-head__rule). Разметку
сняли целиком в cases-grid.php; все правила .cases-head* удалены отсюда (и из блока подзаголовков ниже, и из десктопного грида шапки), чтобы не держать пустой ритм над лентой кейсов. Сетка начинается сразу под лентой вкладок. Данные ACF сохранены — восстановление обратимо по истории обоих файлов. */ /* --- Грид --- */ .cases-grid { display: grid; grid-template-columns: 1fr; gap: var(--case-gap); } .case-card { position: relative; display: block; overflow: hidden; border-radius: var(--case-radius); aspect-ratio: var(--case-ratio, 3 / 2); background-color: var(--macro-brand-navy); box-shadow: 0 0.5rem 1.5rem rgba(var(--bs-dark-rgb), 0.18); touch-action: manipulation; transition: box-shadow 0.4s, border-color 0.4s, transform 0.25s ease; } /* Обложка. Перебиваем глобальную страховку по SVG (img[src$=".svg"] { width:100%; height:auto }) — иначе object-fit: cover не работает, а обложки кейсов как раз SVG. */ .case-card__img, .case-card__img[src$=".svg"], .cases-grid .case-card__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; filter: contrast(1.1) saturate(0.9); transition: transform 0.6s, filter 0.6s; /* Клик проходит сквозь обложку на ::after ссылки — см. блок кликабельности */ pointer-events: none; } /* Фолбэк без обложки */ .case-card--noimg { background-color: var(--macro-brand-navy); } /* Заглушка для карточки без обложки. Раньше здесь стоял знак бренда (img), бренд с сайта убран — рисуем нейтральную диагональную штриховку целиком в CSS. */ .case-card__mark { position: absolute; inset: 0; display: block; pointer-events: none; opacity: 0.18; background-image: repeating-linear-gradient( 135deg, currentColor 0, currentColor 1px, transparent 1px, transparent 14px ); color: #ffffff; } /* Слой 2 — цветная подложка из ACF (цвет инлайном с !important, наш только opacity). pointer-events:none — ключевая правка регресса T15: раньше tint лежал поверх обложки с pointer-events:auto и перехватывал клик у ссылки в центре карточки. */ .case-card__tint { position: absolute; inset: 0; display: block; pointer-events: none; background-color: var(--bs-primary); } /* Слой 3 — скрим под текстом покоя. Два градиента вместо одного (дополнение к ТЗ §5.1): 1) виньетка в левом верхнем углу — под номер «01». Цветные подложки кейсов светлые (#fcfcfc, #f2f2f2, #fdf8f1, #f5f5f5, #fdf0ff), и белый номер на светлом углу обложки не читался вообще: замер по пикселям давал контраст 1.02:1 на трёх карточках из пяти (в обеих темах). С виньеткой — 2.96:1 в худшей точке и 3.55:1 в среднем. Виньетка локальная: за пределами угла обложка не темнеет; 2) нижний скрим из ТЗ — под заголовок, без изменений. */ .case-card__scrim { position: absolute; inset: 0; display: block; z-index: 1; pointer-events: none; background: radial-gradient( 220px 170px at 0% 0%, rgba(var(--case-scrim), 0.8), rgba(var(--case-scrim), 0) 75% ), linear-gradient( to top, rgba(var(--case-scrim), 0.78) 0%, rgba(var(--case-scrim), 0.35) 38%, rgba(var(--case-scrim), 0) 68% ); transition: opacity 0.5s; } /* Слой 4 — контент покоя (T15-v2). Две БЕЛЫЕ плашки поверх обложки: имя кейса в правом верхнем углу (h2.case-card__rest-title > span.case-card__plate--name), тэглайн снизу по центру (p.case-card__plate--tagline). Обе плашки — НЕ ссылки. ⚠️ КЛИКАБЕЛЬНОСТЬ (дважды ловленный регресс, чинилось по геометрии). Единственный интерактивный слой — ПУСТАЯ a.case-card__link.stretched-link, и она ПРЯМОЙ потомок .case-card. Bootstrap stretched-link::after{inset:0} растягивается до БЛИЖАЙШЕГО позиционированного предка; ближайший — сама .case-card{position:relative}, у ссылки нет других позиционированных предков (в отличие от прошлой версии, где ссылку вложили в h2{position:absolute} и ::after покрывал лишь угловую коробку h2). Поэтому ::after покрывает ВСЮ карточку и клик доходит в любую точку. Все визуальные слои (обложка __img, штриховка __mark, подложка __tint, скрим __scrim, плашки __plate*, оверлей __overlay) несут pointer-events:none — ни один не перехватывает клик у ::after ссылки. Единственный элемент с pointer-events:auto — сама ссылка. */ /* h2-обёртка имени — только позиционирование правого верхнего угла и фон/текст вложенной плашки. Ссылки внутри НЕТ (она — соседний прямой потомок карточки), поэтому position:absolute у h2 на зону клика уже не влияет. */ .case-card__rest-title { position: absolute; top: clamp(0.75rem, 1.4vw, 1.25rem); right: clamp(0.75rem, 1.4vw, 1.25rem); z-index: 2; max-width: 60%; margin: 0; text-align: right; /* h2-обёртка — визуальный слой, не ссылка: клик проходит сквозь неё на ::after растянутой ссылки. Без этого угол с плашкой имени (position: absolute, своя область над ::after) оставался мёртвой зоной ~2%. */ pointer-events: none; } .case-card--feature .case-card__rest-title { max-width: 55%; } /* Ссылка — кликабельный слой; визуально она не окрашивает текст (текст на плашке), но держим цвет наследуемым от плашки на случай, если браузер покрасит по :link. */ .case-card__link, .case-card__link:hover, .case-card__link:focus { color: inherit; text-decoration: none; } /* Общий вид белой плашки. pointer-events:none — критично: клик проходит сквозь плашку на ::after растянутой ссылки. */ .case-card__plate { pointer-events: none; display: inline-block; background-color: var(--card-plate-bg); color: var(--card-plate-ink); border-radius: var(--card-plate-radius); border: var(--card-plate-line); box-shadow: var(--card-plate-shadow); /* Бренд-шрифт SF UI Display (как у логотипа), с той же цепочкой фолбэков, что в теме. Плашка стоит поверх обложки — наследование от body ненадёжно. */ font-family: 'SF UI Display', Roboto, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; } /* Имя — полужирный/жирный, справа-сверху. T57: ширина плашки строго по контенту (fit-content) + равномерный горизонтальный паддинг — подложка облегает вордмарк-SVG (ПО) или короткое текстовое имя (сайты) без пустого поля по бокам. width:fit-content вместо прежнего max-width:100% (inline-block растягивался бы до max-width родителя .case-card__rest-title и оставлял пустоту у коротких имён). Верхний потолок ширины держит сам .case-card__rest-title (max-width:60/55%); если имя длиннее — срабатывает nowrap+ellipsis, поэтому overflow/text-overflow сохранены. */ .case-card__plate--name { width: fit-content; max-width: 100%; padding: 0.4rem 0.75rem; font-size: clamp(0.8125rem, 1.2vw, 1rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .case-card--feature .case-card__plate--name { font-size: clamp(0.9375rem, 1.6vw, 1.25rem); padding: 0.5rem 0.9rem; } /* Плашка с вордмарком (web-apps): внутри HTML-ТЕКСТ (два цветных span), а не SVG. Ellipsis не нужен (контент короткий), выравниваем по центру плашки. Паддинги плашки прежние (симметричны) → поля слева/справа равны by design. */ .case-card__plate--wordmark { display: inline-flex; align-items: center; overflow: visible; } /* Вордмарк = обычный текст SF UI Display Bold (наследует font-family/weight от плашки). font-size:1.05em держит прежний визуальный кегль (раньше SVG был height:1.05em), поэтому в feature-карточке он крупнее ровно как текст. letter-spacing повторяет прежний трекинг SVG (ls -0.5 @34px ≈ -0.015em). pointer-events:none — текст не перехватывает клик у ::after растянутой ссылки (кликабельность карточки). Симметричный padding плашки + fit-content дают ОДИНАКОВЫЕ поля слева/справа у каждого продукта (эталон — плашки «Сайтов»). */ .product-wordmark { display: inline-block; max-width: 100%; font-size: 1.05em; line-height: 1; white-space: nowrap; text-transform: uppercase; letter-spacing: -0.015em; pointer-events: none; } /* Части вордмарка красятся через токены. T44: сами токены --pw-dark/--pw-accent инвертируются по теме (переопределение в body.dark-theme ниже), поэтому здесь ветвления нет — оно на уровне значений токенов. HTML-текст → color (не fill). */ .product-wordmark .pw-dark { color: var(--pw-dark); } .product-wordmark .pw-accent { color: var(--pw-accent); } /* Флаг страны — значок в ЛЕВОМ верхнем углу, симметрично плашке имени справа. T37: белая плашка снята — эмодзи лежит ПРЯМО на обложке (сбрасываем фон/кант/ тень/скругление/паддинг от базового .case-card__plate). Позиция и pointer-events сохранены. Для читаемости на светлых/пёстрых обложках — лёгкая drop-shadow (чёрная альфа как эффект, не цвет-токен). Выводится только у кейсов-сайтов с флагом в title (условный рендер в PHP). */ .case-card__plate--flag { position: absolute; top: clamp(0.75rem, 1.4vw, 1.25rem); left: clamp(0.75rem, 1.4vw, 1.25rem); z-index: 2; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; font-size: clamp(1.125rem, 1.8vw, 1.5rem); line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); transition: opacity 0.5s; } .case-card--feature .case-card__plate--flag { font-size: clamp(1.375rem, 2.2vw, 1.875rem); padding: 0; } /* Тэглайн — обычный вес, ПОЛОСА во всю ширину нижней грани карточки. Растянута left/right/bottom: 0, центрирования translateX и max-width нет. Нижние углы полосы скруглены под карточку (var(--case-radius) — тот же радиус, что у .case-card), верхние — прямые, чтобы полоса не торчала за скруглённый угол плитки; сверху border-radius: 0. Карточка ещё и overflow: hidden, так что это двойная страховка. */ .case-card__plate--tagline { pointer-events: none; position: absolute; left: 0; right: 0; bottom: 0; width: auto; z-index: 2; margin: 0; padding: 0.5rem clamp(0.75rem, 1.5vw, 1.25rem); background-color: var(--card-plate-bg); color: var(--card-plate-ink); border-radius: 0 0 var(--case-radius) var(--case-radius); border: var(--card-plate-line); border-left: 0; border-right: 0; border-bottom: 0; box-shadow: var(--card-plate-shadow); font-family: 'SF UI Display', Roboto, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-size: clamp(0.75rem, 1vw, 0.9375rem); font-weight: 400; line-height: 1.35; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* T36: капитализируем только первую букву подписи (в т.ч. кириллица) */ .case-card__plate--tagline::first-letter { text-transform: uppercase; } /* T36: единый кегль подписи на всех плитках. Высота полосы у feature = как у обычной плитки: ВЕРТИКАЛЬНЫЙ паддинг такой же, как у базового .case-card__plate--tagline (0.5rem); увеличен только горизонтальный. */ .case-card--feature .case-card__plate--tagline { padding: 0.5rem clamp(1rem, 2vw, 1.75rem); } /* < 768: имя может занять чуть больше ширины */ @media (max-width: 767.98px) { .case-card__rest-title { max-width: 70%; } .case-card--feature .case-card__rest-title { max-width: 70%; } } /* Слой 5 — оверлей (визуальный дубль, aria-hidden) */ .case-card__overlay { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(1.25rem, 2vw, 2.5rem); opacity: 0; pointer-events: none; transition: opacity 500ms; } .case-card__overlay .overlay_background { background-color: var(--bs-primary); } .case-card__overlay-content { position: relative; z-index: 2; max-width: 46ch; color: #fff; } .case-card__title { display: block; font-size: clamp(1.125rem, 1.4vw, 1.5rem); font-weight: 600; line-height: 1.15; text-shadow: 0 2px 12px rgba(var(--bs-dark-rgb), 0.65); } .case-card--feature .case-card__title { font-size: clamp(1.375rem, 2vw, 2rem); } .case-card__excerpt { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .case-card--feature .case-card__excerpt { -webkit-line-clamp: 7; } .case-card__cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding: 0.5rem 1.25rem; font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 999px; } .case-card__cta i { transition: transform 0.3s; } /* --- Раскрытие оверлея: hover (только точный указатель) и КЛАВИАТУРНЫЙ фокус --- Было :focus-within, и это давало баг: при обычном нажатии (мышь/тап) ссылка получает фокус, карточка мгновенно заливалась цветным оверлеем целиком — «стрёмная» вспышка вместо отклика на нажатие. Теперь раскрытие только по :focus-visible, то есть по клавиатуре: у указателя браузер его не ставит. Отклик на нажатие — отдельный, лёгкий (см. ниже .case-card:active). */ .case-card:has(.case-card__link:focus-visible) .case-card__rest-title, .case-card:has(.case-card__link:focus-visible) .case-card__plate--tagline, .case-card:has(.case-card__link:focus-visible) .case-card__plate--flag, .case-card:has(.case-card__link:focus-visible) .case-card__tint, .case-card:has(.case-card__link:focus-visible) .case-card__scrim { opacity: 0; } .case-card:has(.case-card__link:focus-visible) .case-card__overlay { opacity: 1; } /* --- Отклик на нажатие --- Лёгкое плавное затемнение и еле заметное «проседание». Обложка и заголовок остаются видны, заливки цветом нет. Работает одинаково на мыши и на тапе: :active срабатывает в обеих ветках, а системную синюю подсветку тапа гасим. */ .case-card { -webkit-tap-highlight-color: transparent; } .case-card::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; background-color: rgba(var(--case-scrim), 1); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .case-card:active::after { opacity: 0.18; } .case-card:active { transform: scale(0.995); } @media (prefers-reduced-motion: reduce) { .case-card::after { transition: none; } .case-card:active { transform: none; } } @media (hover: hover) and (pointer: fine) { /* На десктопе за анонс отвечает оверлей: при наведении плашки имени и тэглайна гаснут, обнажая цветной оверлей с полным заголовком и excerpt. */ .case-card:hover .case-card__rest-title, .case-card:hover .case-card__plate--tagline, .case-card:hover .case-card__plate--flag, .case-card:hover .case-card__tint, .case-card:hover .case-card__scrim { opacity: 0; } .case-card:hover .case-card__overlay { opacity: 1; } .case-card:hover .case-card__img { filter: contrast(1) saturate(1); transform: scale(1.03); } .case-card:hover { box-shadow: 0 1rem 2rem rgba(var(--bs-primary-rgb), 0.28); } .case-card:hover .case-card__cta i { transform: translateX(4px); } /* клавиатура: тот же раскрытый вид, что и на hover */ .case-card:has(.case-card__link:focus-visible) .case-card__rest-title, .case-card:has(.case-card__link:focus-visible) .case-card__plate--tagline, .case-card:has(.case-card__link:focus-visible) .case-card__plate--flag { opacity: 0; } } .case-card__rest-title, .case-card__plate--tagline, .case-card__plate--flag, .case-card__tint { transition: opacity 0.5s; } /* Кольцо фокуса у карточки — единственное место в проекте, где внешнее кольцо отменяется вручную. Причин две: 1. у карточки overflow: hidden — внешний outline срезался бы; 2. по фокусу раскрывается оверлей (z-index 3) и накрывает собой всё содержимое карточки, включая ссылку с её псевдоэлементом. Поэтому кольцо рисует псевдоэлемент САМОЙ карточки на слое выше оверлея и выше скрима нажатия (::after, z-index 4), а сама ссылка кольца не имеет. !important обязателен: общее кольцо раздаётся правилом `:focus-visible { outline: … !important }` в теме (style.css, раздел «ФОКУС С КЛАВИАТУРЫ», им снята глобальная заглушка родителя), обычным правилом его не отменить. */ .case-card__link:focus-visible, .case-card__link:focus:not(:focus-visible) { outline: none !important; } /* Цвет обложки и оверлея у каждого кейса свой (ACF, от охристого до индиго), поэтому кольцо двухслойное: светлый контур + тёмный внутренний ореол. Такая пара читается и на светлой заливке, и на тёмной. */ .case-card:has(.case-card__link:focus-visible)::before { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; outline: 3px solid var(--case-focus); outline-offset: -3px; box-shadow: inset 0 0 0 6px rgba(9, 16, 32, 0.55); pointer-events: none; } /* Без :has() оверлей по фокусу не раскрывается (правило выше тоже на :has), поэтому там кольцо можно оставить на псевдоэлементе самой ссылки. */ @supports not selector(:has(*)) { .case-card__link:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; outline: 3px solid var(--case-focus); outline-offset: -3px; box-shadow: inset 0 0 0 6px rgba(9, 16, 32, 0.55); pointer-events: none; } } /* --- Тач-устройства: оверлея нет, карточка закончена в покое --- */ @media (hover: none), (pointer: coarse) { .case-card__overlay { display: none; } /* на тач-устройствах карточка всегда в состоянии покоя: оверлея нет, фокус после тапа ничего не раскрывает — плашки остаются видны */ .case-card:has(.case-card__link:focus-visible) .case-card__rest-title, .case-card:has(.case-card__link:focus-visible) .case-card__plate--tagline, .case-card:has(.case-card__link:focus-visible) .case-card__plate--flag, .case-card:has(.case-card__link:focus-visible) .case-card__tint, .case-card:has(.case-card__link:focus-visible) .case-card__scrim { opacity: 1; } } /* --- Брейкпоинты сетки --- Посадка карточек (акцентная 2×2, хвост ряда, одиночка, пара) задаётся КЛАССАМИ-модификаторами, а не :nth-child. Причина — фильтр по категориям: скрытая display:none карточка всё равно считается в :nth-child, и раскладка бы поехала. Классы считает PHP при рендере (lazarewww_case_layout_classes) и пересчитывает JS после переключения таба — по ВИДИМЫМ карточкам. */ /* Отфильтрованные карточки */ .case-card.is-hidden { display: none; } /* < 768: одна колонка, всё 3:2, акцент не выделяется размером */ .case-card, .case-card--feature { --case-ratio: 3 / 2; grid-column: auto; grid-row: auto; } @media (min-width: 768px) and (max-width: 991.98px) { .cases-grid { grid-template-columns: repeat(6, 1fr); } .case-card { --case-ratio: 3 / 2; grid-column: span 3; } .case-card--feature { grid-column: span 6; grid-row: auto; --case-ratio: 3 / 2; } /* последняя осталась одна в ряду */ .case-card--tail2 { grid-column: span 6; --case-ratio: 5 / 2; } .case-card--solo { grid-column: span 6; --case-ratio: 3 / 2; } } @media (min-width: 992px) { .cases-grid { grid-template-columns: repeat(12, 1fr); } .case-card { --case-ratio: 3 / 2; grid-column: span 4; } .case-card--feature { grid-column: span 8; grid-row: span 2; aspect-ratio: auto; } /* хвост: последняя одна в ряду (N = 4, 7, 10 …) */ .case-card--tail3-1 { grid-column: span 12; --case-ratio: 4 / 1; } /* хвост: последних две (N = 5, 8, 11 …) */ .case-card--tail3-2 { grid-column: span 6; --case-ratio: 2 / 1; } /* ровно две карточки — по половине ширины */ .case-card--pair { grid-column: span 6; --case-ratio: 3 / 2; } /* Единственный кейс: акцентной «фичи» 2×2 он не получает (её дают только при 4+ карточках), но и полосой 4:1 быть не должен. Берём всю ширину контейнера (пустой колонки справа не остаётся) с киногеничным 21:9 и потолком по высоте, чтобы на больших экранах карточка не съедала весь первый экран. */ .case-card--solo { grid-column: 1 / -1; /* width обязателен: с aspect-ratio + max-height грид-элемент иначе пересчитывает ШИРИНУ от предельной высоты и оставляет дыру справа. */ width: 100%; --case-ratio: 21 / 9; max-height: min(70vh, 780px); } } /* ОТКАТ (включить модификатор на .cases-grid): возвращает заголовок покоя в центр карточки, как было до переверстки. .cases-grid--centered .case-card__rest { align-items: center; justify-content: center; text-align: center; } .cases-grid--centered .case-card__index { display: none; } ОТКАТ радиуса: .cases-section { --case-radius: 2.25rem; } ОТКАТ широкой плашки для 7-й карточки: .case-card:last-child:nth-child(3n+1):not(.case-card--feature) { grid-column: span 4; --case-ratio: 3/2; } */ /* --- Тёмная тема --- */ .dark-theme .cases-section { /* --case-focus одинаков в обеих темах, см. комментарий выше */ --case-scrim: 9, 16, 32; } /* Заголовок карточки всегда белый: общий .dark-theme a{...accent-text} имеет специфичность выше, чем .case-card__link, и красил заголовки в голубой поверх обложки. */ .dark-theme .case-card__link, .dark-theme .case-card__link:hover, .dark-theme .case-card__link:focus { color: #fff; } .dark-theme .case-card { background-color: var(--macro-surface); border: 1px solid var(--macro-border); box-shadow: none; } .dark-theme .case-card__tint { opacity: 0.18; } .dark-theme .case-card__scrim { background: radial-gradient( 220px 170px at 0% 0%, rgba(var(--case-scrim), 0.8), rgba(var(--case-scrim), 0) 75% ), linear-gradient( to top, rgba(var(--case-scrim), 0.85) 0%, rgba(var(--case-scrim), 0.4) 38%, rgba(var(--case-scrim), 0) 68% ); } /* Нижняя полоса-подпись в ТЁМНОЙ теме — тёмная поверхность + светлый текст (по образцу верхней полосы: dark surface + light ink). Только тэглайн: плашку ИМЕНИ (.case-card__plate--name) НЕ трогаем — вордмарк navy+синий читается лишь на белом, поэтому она остаётся белой в обеих темах. Поверхность плотнее --macro-surface (подмешан navy-скрим), чтобы полоса читалась поверх любой обложки; кант/тень адаптированы под тёмную тему. Через токены проекта, без хардкод-hex. */ .dark-theme .case-card__plate--tagline { background-color: color-mix( in srgb, var(--macro-surface) 82%, rgba(var(--case-scrim), 1) ); color: var(--macro-ink); border-color: var(--macro-border); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.45); } /* T44: плашка ИМЕНИ в ТЁМНОЙ теме — тоже тёмная поверхность + светлый контент (та же поверхность/кант/тень, что у нижней полосы из T43). Внутри: — web-apps: двухцветный вордмарк-SVG. Инвертируем пару токенов, чтобы он читался на тёмной плашке: --pw-dark → светлый (--macro-ink), --pw-accent → светло-синий (--macro-accent-blue-light); — developer-sites: короткое текстовое имя. Цвет наследуется от --card-plate-ink (navy) — переопределяем на светлый --macro-ink. Всё через токены, без хардкод-hex. Флаг (T37, без подложки) не затронут. */ .dark-theme .case-card__plate--name { --pw-dark: var(--macro-ink); --pw-accent: var(--macro-accent-blue-light); background-color: color-mix( in srgb, var(--macro-surface) 82%, rgba(var(--case-scrim), 1) ); color: var(--macro-ink); border-color: var(--macro-border); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.45); } @media (hover: hover) and (pointer: fine) { .dark-theme .case-card:hover { border-color: var(--macro-accent); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); } } /* --- Появление при скролле --- Класс .reveal-ready вешает JS: без скрипта сетка просто видна. Задержки по умолчанию НЕТ: карточка проявляется сразу, как только наблюдатель до неё дошёл (а он срабатывает с запасом до входа в кадр, см. cases-grid.js). Шахматка — только на первом экране, класс .is-stagger; ниже она копилась бы, и карточка «догоняла» бы пользователя уже после того, как он долистал. */ .cases-grid.reveal-ready .case-card { opacity: 0; transform: translateY(16px); transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s, border-color 0.4s; transition-delay: 0s; } /* первый экран: лёгкая шахматка, потолок — 3 шага, дальше не растёт */ .cases-grid.reveal-ready .case-card.is-stagger { transition-delay: calc(min(var(--i, 0), 3) * 60ms); } .cases-grid.reveal-ready .case-card.is-inview { opacity: 1; transform: none; } /* Мгновенный показ (быстрый флик, прыжок по якорю, переключение таба): карточка уже в кадре, анимировать её — значит показать дырку. JS снимает класс через кадр, иначе карточка навсегда осталась бы без ховер-переходов. */ .cases-grid.reveal-ready .case-card.is-instant { transition: none; } @media (prefers-reduced-motion: reduce) { .cases-grid.reveal-ready .case-card, .cases-grid.reveal-ready .case-card.is-stagger, .cases-grid.reveal-ready .case-card.is-inview { opacity: 1; transform: none; transition: none; transition-delay: 0s; } .case-card__img, .case-card:hover .case-card__img { transform: none; transition: none; } } /* --- Табы категорий --- Стоят выше шапки секции, по той же левой линии --case-pad, что заголовок и первая карточка. Лента с горизонтальным скроллом: на 375 три-четыре таба в строку не влезают, а перенос рвёт ритм шапки. */ /* Меру и центровку держит обёртка, а не сама лента: лента скроллится (overflow-x), а значит обрезает всё, что вылезает за её край, — включая кольцо фокуса у крайних табов. Поэтому лента получает padding под кольцо и гасит его отрицательным margin: видимая геометрия табов совпадает с обёрткой на любой ширине, а места под кольцо хватает. */ .cases-tabs-wrap { max-width: var(--case-max); margin: 0 auto clamp(1.25rem, 2.5vw, 2rem); } .cases-tabs { display: flex; flex-wrap: nowrap; gap: 0.5rem; padding: var(--case-focus-gutter, 6px); margin: calc(-1 * var(--case-focus-gutter, 6px)); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cases-tabs::-webkit-scrollbar { display: none; } .cases-tab { /* < 768: авто-ширина по тексту + горизонтальный скролл ленты (равная ширина 5 табов на 375 не влезет — там сохраняем прежний скролл). Равные доли включаются с ≥768 (см. медиазапрос ниже). */ flex: 0 0 auto; padding: 0.625rem 1.125rem; border: 1px solid var(--macro-border); border-radius: 999px; background-color: transparent; color: var(--macro-ink2); font-family: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } @media (hover: hover) and (pointer: fine) { .cases-tab:hover { border-color: var(--macro-accent); color: var(--macro-ink); } } .cases-tab:focus-visible { /* кольцо — из общей системы фокуса темы (--ctx-accent). Отступ поджат до 2px: лента табов скроллится по горизонтали (overflow-x: auto), и на 3px кольцо крайнего таба подрезалось краем ленты. */ outline-offset: 2px; } .cases-tab.is-active { background-color: var(--macro-accent); border-color: var(--macro-accent); color: var(--macro-accent-ink); } @media (min-width: 768px) { /* T55: с планшета лента раскладывает табы РАВНЫМИ долями. flex:1 1 0 — каждый таб получает одинаковую базу 0 и растёт равным весом, поэтому ширина всех пяти совпадает независимо от длины подписи; лента больше не скроллится (места хватает). min-width:0 — чтобы длинная подпись («ПО для застройщиков») сжимала долю, а не распирала её. */ .cases-tabs { overflow-x: visible; /* Зазор между равными долями поджат (0.5→0.25rem): при пяти долях освобождает ширину под текст на всём диапазоне равной ширины, особенно в узких точках (768 и сразу после 992, где доля минимальна). */ gap: 0.25rem; } .cases-tab { flex: 1 1 0; min-width: 0; /* T55 доработка (весь диапазон ≥768, где включена равная ширина flex:1 1 0): кегль ПЛАВНЫЙ — сам сжимается на узких равных долях и растёт с шириной окна, поэтому самые длинные подписи («Сайты для застройщиков», «ПО для застройщиков») влезают в свою долю ЦЕЛИКОМ (без ellipsis, без наезда) на ЛЮБОЙ ширине ≥768, а не только на планшете 768–991. Формула откалибрована замером ширины текста vs доступной ширины доли: наклон ~1.42vw держит кегль ниже максимально влезающего на всём диапазоне с буфером ~0.7px; нижний предел 8.6px — самая узкая доля на 768; верхний 0.9375rem (15px) — базовый дизайн-кегль вкладок, до него кламп дорастает к ~1220px и дальше держит. Трекинг -0.02em и единый горизонтальный паддинг 0.375rem входят в ту же меру доступной ширины. Равная ширина и центрирование сохранены. */ font-size: clamp(8.6px, -2.3px + 1.42vw, 0.9375rem); letter-spacing: -0.02em; padding: 0.6875rem 0.375rem; } } @media (prefers-reduced-motion: reduce) { .cases-tab { transition: none; } } /* Пустая выборка. Пустые термины из ленты отфильтрованы (см. cases-grid.php), так что штатно это состояние не всплывает — оно страховка на случай, когда выборка схлопнулась уже после рендера: лучше строка, чем дыра в сетке. */ .cases-empty { grid-column: 1 / -1; margin: 0; padding: clamp(2rem, 5vw, 4rem) 0; color: var(--macro-muted); font-size: 1rem; text-align: center; } .cases-empty[hidden] { display: none; } /* --- Подзаголовок категории, описание и десктопный грид шапки --- Весь этот блок правил (.cases-head__subtitle / __note с grid 0fr→1fr анимацией, .cases-head.has-category*, .cases-head__main / __aside, 12-колоночный грид шапки на ≥992) удалён 23.08.2026 вместе с самой шапкой секции — разметки .cases-head больше нет в cases-grid.php. Восстановление обратимо по истории. */ /* --- Панели вкладок главной --- ТЗ site/docs/tz/tz-home-tabs.md. Лента .cases-tabs переключает не только категории кейсов, но и РАЗДЕЛЫ страницы: панель кейсов живёт внутри этого блока (.cases-panel), панели разделов — секции соседних блоков (acf/team-members, acf/about-company). Атрибут data-home-panel им проставляет cases-grid.js на инициализации; до этого неактивные панели держит служебный