/* ============================================================ Блок «О компании (плитки)» — about-company Контракт: site/docs/tz/tz-home-tabs.md §5.4 Раскладку сетки держит Bootstrap 5 (.row + .row-cols-*), своей сетки здесь нет — в файле только шкура плитки, типографика и появление при скролле. Цвет берётся ТОЛЬКО из контекстной палитры --ctx-* (style.css, раздел «КОНТЕКСТНАЯ ПАЛИТРА») и общих токенов --macro-*. Обе темы уже внутри этих токенов, поэтому в файле ноль hex и ни одной ветки «если тёмная». Синего из макета тут нет: акцентная плитка залита --ctx-accent, текст на ней --ctx-on-accent — пара, контрастная по построению и на главной, и на кейсе. ВСЕ селекторы минимум из двух классов не для красоты: страница кейса задаёт типографику через `.case-body p` (специфичность 0,1,1), и одноклассовое правило ей проигрывает. Про форму. Сайт говорит линейками, воздухом и типографикой, а не коробками (case-facts-grid переделывали ровно за это). Заливка здесь — осознанное исключение: макет строит смысл на контрасте четырёх поверхностей. Поэтому форма взята в минимальном объёме — заливка и системный радиус страницы. Теней, толстых рамок и второго радиуса в файле нет и добавлять их нельзя. ============================================================ */ .about-section { /* --- меры и ритм --- */ /* Мера — ТА ЖЕ, что у сетки кейсов и у ленты табов: --case-max (2000px) при --case-pad по краям (style.css:2156). Это не «широкий вариант», а единственная колонка главной: .cases-head, .cases-grid и .cases-tabs-wrap стоят ровно на ней, и панель «О компании» обязана совпасть с ними край в край — иначе при переключении вкладки страница заметно «сжимается» (на 1440 было 1152 против 1310). Прежняя мера --case-wide (1152px) взята из страницы кейса, где колонка уже, и на главной читалась как ошибка вёрстки. Длину строки при этом держит не мера контейнера, а типографика: у текста плитки свой потолок в ch (см. ниже) — растягивать абзац на половину двухтысячной колонки нельзя. */ --about-measure: var(--case-max, 2000px); /* Шаг сетки — общий шаг страницы кейса; вне кейса берётся тот же клэмп. */ --about-gap: var(--case-gap, clamp(1rem, 2.2vw, 2rem)); /* Крупные вертикальные интервалы блока: шапка ↔ сетка ↔ подпись. */ --about-rhythm: clamp(2.5rem, 5vw, 4rem); /* Внутренний отступ плитки. Больше --about-gap ощутимо: плитка залита, и текст, прижатый к кромке заливки, читается как ошибка вёрстки. */ --about-pad: clamp(1.25rem, 2.6vw, 2.25rem); /* Радиус — системный токен страницы (1.25rem / 1.5rem с 768). Своего радиуса блок не заводит: два разных скругления на одной странице видны сразу. */ --about-radius: var(--case-radius, 1.25rem); /* Волосяная линейка — тот же приём, что у .cases-head__rule, .case-fact и .bottom_nav. Единственная «рамка», разрешённая блоку. */ --about-rule: var(--ctx-border); /* Приглушённый текст. НЕ --ctx-muted напрямую: вне страницы кейса он равен фиксированному --macro-muted (#7e7f82), а это 4.0:1 на белом — ниже порога WCAG AA для мелкого текста, которым тут набраны подписи. Рецепт взят у самой палитры: на кейсе --ctx-muted считается ровно так же — доля основного текста прозрачностью (style.css:3110), только доля меньше. */ --about-quiet: color-mix(in srgb, var(--ctx-ink) 68%, transparent); /* Светлая заливка — ТА ЖЕ врезка, что у цитаты, отзыва и выделенной плитки фактов (--case-tint). Своего оттенка блок не изобретает; вне кейса срабатывает фолбэк с тем же рецептом — 8% акцента по поверхности. */ --about-tint: var(--case-tint, color-mix(in srgb, var(--ctx-accent) 8%, var(--ctx-surface))); /* Затемнение под текстом на фото. --macro-brand-navy объявлен на :root и намеренно НЕ меняется между темами (style.css:1139) — а затемнению и нельзя светлеть: на нём в обеих темах лежит один и тот же светлый текст. Брать сюда --ctx-accent нельзя: в тёмной теме он светлеет до #3e6bc4, и белый текст на фото поплыл бы. */ --about-scrim: var(--macro-brand-navy); /* Текст на фото и на затемнении. --macro-accent-ink — «текст на акценте», он белый в обеих темах и не зависит от палитры кейса (кейс переопределяет только --ctx-*). Именно поэтому здесь не --ctx-on-accent: на странице кейса тот вычисляется от цвета кейса и может оказаться тёмным. */ --about-on-photo: var(--macro-accent-ink); /* Акцент ТЕКСТОМ != акцент заливкой: вне кейса в тёмной теме заливочный --macro-accent слишком тёмен для текста, там берётся его «текстовая» светлота. Порядок фолбэков — как в case-facts-grid.css:71. */ --about-accent-text: var(--case-accent-text, var(--macro-accent-text, var(--ctx-accent))); /* Свой горизонтальный отступ — блок стоит на главной, где контента нет в бутстраповском .container (front-page.php печатает .entry-content без него). Внутри .container отступ гасится правилом ниже, иначе паддинги сложились бы. */ padding-inline: var(--case-pad, clamp(1rem, 4.5vw, 6rem)); padding-block: clamp(1.5rem, 4vw, 3rem); } /* Плоский фолбэк там, где нет color-mix — тот же приём, что у .case-page, case-facts-grid и team-members. */ @supports not (color: color-mix(in srgb, red, blue)) { .about-section { --about-quiet: var(--ctx-muted); --about-tint: var(--ctx-surface); } } .container .about-section, .container-fluid .about-section { padding-inline: 0; } /* Мера — на прямых детях секции, а не на самой секции: заливки и паддинги остаются во всю ширину колонки, а контент центрируется. */ .about-section > * { max-width: var(--about-measure); margin-inline: auto; } /* Внутри бутстраповского контейнера центрировать второй раз нельзя: .container уже центрирован, и остаток (1320 − 1152) разошёлся бы по половине на сторону. Прижимаем к тому же краю — мера соблюдена, левая вертикаль страницы одна. Ровно так же поступает team-members. */ .container .about-section > *, .container-fluid .about-section > * { margin-inline: 0; } /* Подсказка редактору в пустом блоке (на фронт не попадает). */ .about-section__hint { margin: 0; padding: 1rem; border: 1px dashed var(--ctx-border); border-radius: 0.5rem; color: var(--ctx-muted); } /* ============================================================ Шапка секции По макету: крупный заголовок капсом, под ним подзаголовок. Вертикальный поток в одну колонку по левому краю — без грид-раскладки, без надзаголовка, без линейки (они по ТЗ убраны). ============================================================ */ .about-section .about-head { /* Воздух под заголовком (T74). Верхний воздух панели держит лента табов своим margin-bottom (cases-grid.css:943, clamp(1.25rem,2.5vw,2rem)), а собственный padding-top панели обнулён глобальным правилом [data-home-panel]:not(.cases-panel){padding-top:0}. Раньше низ держал --about-rhythm (clamp(2.5rem,5vw,4rem)) — вдвое больше верха: заголовок прижимался к ленте (26px), а до плиток зиял двойной отступ (64px). Берём ТОТ ЖЕ клэмп, что у ленты табов сверху, — воздух над и под заголовком стал симметричным на всех вьюпортах. --about-rhythm больше нигде не используется, побочных эффектов нет. */ margin-bottom: clamp(1.25rem, 2.5vw, 2rem); /* Шапка — во всю ширину секции (T49). Правило .about-section > * жмёт прямых детей до --about-measure и центрирует их; заголовок с подзаголовком должны идти во весь экран, поэтому шапка из-под меры выходит: max-width снят, margin-inline обнулён. Секция уже занимает весь вьюпорт за вычетом --case-pad, так что шапка встаёт край в край с боковыми паддингами секции. Сетка плиток ниже остаётся в своей мере. */ max-width: none; margin-inline: 0; /* Заголовок — по центру ширины секции (T83). Шапка идёт во всю ширину (max-width снят выше), поэтому центрируем ОДНУ nowrap-строку заголовка внутри неё: text-align: center ставит строку в середину секции. Лид, если выводится, наследует выравнивание и встаёт по центру вместе с заголовком — логично для одной колонки шапки. Сетка плиток ниже — отдельный контейнер, её раскладки 2×2 это не касается. */ text-align: center; } /* Заголовок — крупный, жирный, КАПС (капс визуальный: в поле человеческий регистр, его читает скринридер и правит редактор). Плотный интерлиньяж, мера под 2 строки. Цвет — --ctx-ink (в светлой теме brand-navy). */ .about-section .about-head__title { margin: 0; /* Кегль — под ОДНУ строку (T69). Заголовок капсом длиной ~50 знаков не должен переноситься (white-space: nowrap ниже), поэтому размер целиком fluid по vw: и контейнер шапки (мера --case-max за вычетом --case-pad), и nowrap-строка масштабируются от ширины окна, а максимально влезающий кегль оказался почти постоянным по всем вьюпортам. По фактическому scrollWidth строки предел — ~2.6vw (замерено 1440/768/390/360/320 на реальном шрифте SF UI Display); берём 2.3vw с запасом ~11%, чтобы строка влезала не впритык, а с воздухом и на 320px, и на десктопе, без обрезки. Верхний потолок 3.25rem (52px) отсекает разрастание на ультраширине, где контейнер упирается в --case-max (2000px) и перестаёт расти вместе с vw (там влезающий кегль ≈57px, потолок ниже — строка гарантированно в габарите). Нижний 0.4rem (6.4px) — только страховка ниже целевого диапазона: на всех экранах ≥320px fluid-vw даёт ≥7.4px, поэтому нижний предел не активируется, строку он не режет и nowrap не ломает. */ font-size: clamp(0.4rem, 2.3vw, 3.25rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ctx-ink); /* Ширина снята (T49): заголовок идёт во всю ширину шапки. */ max-width: none; /* Одна строка без переносов (T69): длинный заголовок не разбивается, кегль подобран fluid-ом так, чтобы строка помещалась в контейнер. text-wrap: balance с nowrap несовместим и убран — балансировать нечего. */ white-space: nowrap; } .about-section .about-head__lead { margin: clamp(1rem, 2vw, 1.5rem) 0 0; /* Ширина снята (T49): подзаголовок во всю ширину шапки. */ max-width: none; color: var(--about-quiet); } .about-section .about-head__lead p { margin: 0 0 0.75em; /* Сбавлено (T61) соразмерно уменьшенному заголовку секции. */ font-size: clamp(0.9375rem, 1vw, 1.0625rem); font-weight: 400; line-height: 1.55; color: inherit; } .about-section .about-head__lead p:last-child { margin-bottom: 0; } /* ============================================================ Сетка плиток Гаттеры — штатным API Bootstrap, а не своим gap: так работают .row-cols-*, отрицательные margin ряда и перенос строки. ============================================================ */ /* Меру и центрирование держит ОБЁРТКА (.about-grid-wrap), а не сам ряд — правило .about-section > * ловит именно её. Обёртка нужна ровно для одного, но принципиального: у .row внешние поля уходят в минус на полгаттера, а у колонки такой же паддинг внутрь — так Bootstrap ставит КОНТЕНТ колонки на край контейнера. Если меру и margin-inline: auto повесить на сам ряд, отрицательные поля гасятся, и видимая кромка ЗАЛИТОЙ плитки встаёт на полгаттера внутри линии заголовка и линейки подписи: сетка выглядит уже собственной шапки (замерено: 160 против 144 на 1440). С обёрткой геометрия Bootstrap работает штатно — без арифметики в calc, одинаково на всех ширинах и внутри .container. */ .about-section .about-grid { --bs-gutter-x: var(--about-gap); --bs-gutter-y: var(--about-gap); } /* --- Плитка: общее --- */ .about-section .about-tile { position: relative; display: flex; flex-direction: column; height: 100%; /* колонки .row тянутся по строке, плитка добирает высоту */ padding: var(--about-pad); border: 0; border-radius: var(--about-radius); /* Обрезает фото по радиусу. Фокусируемых элементов внутри плитки нет, поэтому кольцо фокуса срезать нечем. */ overflow: hidden; color: var(--ctx-ink); /* Свой контекст наложения: фото уезжает под контент через z-index: -1 и при этом не проваливается под фон страницы. */ isolation: isolate; } /* Содержимое плитки прижато ко ДНУ. По макету верх фото-/акцент-плиток пустой, а текст прижат ко дну — пустота между ними становится полем постера. На широком экране у плитки есть постерная высота (min-height ниже + выравнивание строк .row); без прижатия текст висел бы в верхней трети. На 375 высота плитки равна высоте контента — правило там ничего не меняет. */ .about-section .about-tile__body { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: flex-end; min-width: 0; } /* --- Тип 1: фото на всю плитку, светлый текст поверх --- Тот же приём применяется к светлой плитке С КАДРОМ (.about-tile--soft.hasimg): у неё фото тоже становится ПОЛНОЙ подложкой cover + скрим, а показатели читаются поверх белым. Поэтому все правила ниже адресованы обоим селекторам — фото-плитке и soft-с-фото, чтобы затемнение, кадрирование и фолбэк были едины. */ .about-section .about-tile--photo, .about-section .about-tile--soft.about-tile--hasimg, .about-section .about-tile--accent.about-tile--hasimg { color: var(--about-on-photo); /* Минимальная высота нужна ровно для того, чтобы фото читалось как фото, а не как полоска над текстом. Значение мобильное; на широких экранах высоту добирает соседняя плитка по строке. */ min-height: clamp(13rem, 44vw, 19rem); } .about-section .about-tile--photo .about-tile__media, .about-section .about-tile--soft.about-tile--hasimg .about-tile__media, .about-section .about-tile--accent.about-tile--hasimg .about-tile__media { position: absolute; inset: 0; z-index: -1; } .about-section .about-tile--photo .about-tile__img, .about-section .about-tile--soft.about-tile--hasimg .about-tile__img, .about-section .about-tile--accent.about-tile--hasimg .about-tile__img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%; } /* Затемнение: снизу плотное (под текстом), кверху почти прозрачное — фасад остаётся виден. Градиент, а не сплошная плашка: сплошная убивает фото. */ .about-section .about-tile--photo .about-tile__media::after, .about-section .about-tile--soft.about-tile--hasimg .about-tile__media::after, .about-section .about-tile--accent.about-tile--hasimg .about-tile__media::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient( to top, color-mix(in srgb, var(--about-scrim) 88%, transparent) 0%, color-mix(in srgb, var(--about-scrim) 62%, transparent) 45%, color-mix(in srgb, var(--about-scrim) 28%, transparent) 100% ); } /* Без color-mix прозрачность взять неоткуда без hex-литерала, поэтому затемнение делается не плашкой, а приглушением самой картинки: плитка залита --about-scrim, фото лежит на ней с opacity. Контраст светлого текста сохраняется, эффект тот же. */ @supports not (color: color-mix(in srgb, red, blue)) { .about-section .about-tile--photo, .about-section .about-tile--soft.about-tile--hasimg, .about-section .about-tile--accent.about-tile--hasimg { background-color: var(--about-scrim); } .about-section .about-tile--photo .about-tile__img, .about-section .about-tile--soft.about-tile--hasimg .about-tile__img, .about-section .about-tile--accent.about-tile--hasimg .about-tile__img { opacity: 0.45; } .about-section .about-tile--photo .about-tile__media::after, .about-section .about-tile--soft.about-tile--hasimg .about-tile__media::after, .about-section .about-tile--accent.about-tile--hasimg .about-tile__media::after { content: none; } } /* --- Тип 2: обводка без заливки --- */ .about-section .about-tile--outline { border: 1px solid var(--about-rule); } /* --- Тип 3: акцентная заливка --- */ .about-section .about-tile--accent { background-color: var(--ctx-accent); color: var(--ctx-on-accent); } /* Акцент С КАДРОМ (T59.2): левая-нижняя плитка «Наш продукт — мост…» умеет нести фото-подложку. При наличии about-company-tile-image у accent-плитки фото становится ПОЛНОЙ подложкой cover + скрим (правила в блоке «Тип 1» выше, селектор .about-tile--accent.about-tile--hasimg туда включён), иконки и текст читаются поверх белым. Синюю заливку --ctx-accent под фото снимаем — иначе она просвечивала бы сквозь скруглённые края. Без картинки — прежняя синяя заливка (правило выше остаётся в силе, graceful). */ .about-section .about-tile--accent.about-tile--hasimg { background-color: var(--about-scrim); } /* Фолбэк без color-mix: скрим тёмный и без прозрачности — белый текст читается. */ @supports not (color: color-mix(in srgb, red, blue)) { .about-section .about-tile--accent.about-tile--hasimg { background-color: var(--about-scrim); } } /* --- Тип 4: светлая заливка --- Без картинки — светлая врезка --about-tint, показатели набраны акцентом и приглушённым цветом (плитка статистики). С картинкой (T50) плитка меняет природу: фото «достроенного проекта» становится ПОЛНОЙ подложкой cover + скрим (правила в блоке «Тип 1» выше, селектор туда включён), а показатели читаются поверх белым. Поэтому заливку --about-tint снимаем ровно у soft с кадром — иначе она просвечивала бы сквозь скруглённые края под фото. */ .about-section .about-tile--soft { background-color: var(--about-tint); } .about-section .about-tile--soft.about-tile--hasimg { background-color: var(--about-scrim); } /* Фолбэк на случай пустого/битого attachment: без color-mix у скрима нет прозрачности, но подложка всё равно тёмная — текст читается. */ @supports not (color: color-mix(in srgb, red, blue)) { .about-section .about-tile--soft.about-tile--hasimg { background-color: var(--about-scrim); } } /* --- Фото ещё не залито --- Плитка не превращается в серый прямоугольник и не подменяется картинкой- заглушкой: она переходит на язык самого сайта — обводка, акцентная линейка сверху, та же крупная типографика. Правило стоит ПОСЛЕ .about-tile--photo намеренно: специфичность равна (0,2,0), решает порядок. */ .about-section .about-tile--noimg { min-height: 0; background-color: transparent; color: var(--ctx-ink); border: 1px solid var(--about-rule); border-top: 3px solid var(--ctx-accent); } /* --- Текст плитки --- */ .about-section .about-tile__text { margin: 0; } .about-section .about-tile__text p { margin: 0 0 0.6em; color: inherit; } .about-section .about-tile__text p:last-child { margin-bottom: 0; } /* Высказывание (фото / акцент / фото-без-фото): крупно, плотно. Капса больше НЕТ (T59): в поле ACF человеческий регистр — так и выводим, иначе на плитках накапливалось много капса. Капс остаётся только у заголовка секции (.about-head__title). Крупный кегль и вес сохранены — это по-прежнему высказывание, а не абзац. */ .about-section .about-tile--photo .about-tile__text p, .about-section .about-tile--accent .about-tile__text p { /* Мера строки, а не ширина плитки: колонка выросла до колонки главной, и на ультраширине (>2128px, когда --case-max перестаёт упираться в вьюпорт) половина ряда — это ~990px, то есть строка под 100 знаков. Ограничиваем текст; воздух копится справа и работает полем, ровно как у лида шапки с его 52ch. На 1440 потолок не достигается. */ max-width: 32ch; /* Сбавлено (T61): высказывание оставалось крупным и «кричало» наравне с заголовком. Кегль опущен (1.75→1.375rem), вес и плотность сохранены — это по-прежнему высказывание, а не абзац; на фото-скриме белым читается. T73: заказчик просит ещё компактнее — кегль снижен ещё на ~18% (1.375→1.125rem, нижняя грань 1.05→0.875rem), интерлиньяж чуть распущен (1.18→1.2) под меньший размер; вес и белая читаемость на скриме сохранены. */ font-size: clamp(0.875rem, 1.25vw, 1.125rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } /* T76: текст ПРАВОЙ-ВЕРХНЕЙ фото-плитки (2-я колонка сетки, tile[1] «Мы разбираемся в том, как работает ваш бизнес…») тянется во всю ширину плитки. У фото-высказываний по умолчанию max-width: 32ch (правило выше) — на 1440 это ~375px при плитке 639px, строка обрывалась задолго до правого паддинга. Меру снимаем ТОЧЕЧНО у второй колонки, чтобы левая-верхняя фото-плитка (tile[0]) сохранила свою 32ch-меру. Целимся по позиции в сетке (.col:nth-child(2)), а не по типу: обе верхние плитки — --photo, и снятие меры по типу задело бы левую. Паддинги, скрим и фон плитки не трогаем — только потолок ширины текста. */ .about-section .about-grid > .col:nth-child(2) .about-tile--photo .about-tile__text p { max-width: none; } /* Обычный текст (обводка / светлая плитка) — тот же кегль, что у лида страницы кейса. */ .about-section .about-tile--outline .about-tile__text p, .about-section .about-tile--soft .about-tile__text p { max-width: 56ch; /* Сбавлено (T61): описательные абзацы плиток были избыточно крупными. Кегль опущен на ступень (1.125→1.0625rem), интерлиньяж чуть плотнее — текст аккуратнее, длина строки по-прежнему держится мерой в ch. T73: заказчик просит ещё мельче — кегль снижен ещё на ~17% (1.0625→0.875rem, нижняя грань 0.9375→0.8125rem), интерлиньяж 1.5 сохранён ради читабельности абзаца при мелком кегле. */ font-size: clamp(0.8125rem, 0.85vw, 0.875rem); font-weight: 400; line-height: 1.5; } /* --- Показатели --- */ .about-section .about-tile__stats { margin: 0; } /* Текст выше показателей отбиваем от них ритмом плитки. */ .about-section .about-tile__text + .about-tile__stats { margin-top: var(--about-pad); } /* Разделитель между показателями — волосяная линейка, не рамка и не заливка. Первый показатель линейки не получает: она разделяет, а не обрамляет. */ .about-section .about-stat + .about-stat { margin-top: clamp(0.875rem, 2vw, 1.25rem); padding-top: clamp(0.875rem, 2vw, 1.25rem); border-top: 1px solid var(--about-rule); } .about-section .about-stat__value { margin: 0; /* Сбавлено (T61): стат-числа были самым «кричащим» элементом плитки. */ font-size: clamp(1.75rem, 2.8vw, 2.25rem); font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--about-accent-text); } .about-section .about-stat__label { margin: 0.35rem 0 0; font-size: 0.9375rem; line-height: 1.4; color: var(--about-quiet); } /* Показатель на широком — цифра и подпись в одной строке, по общей базовой линии, разделитель между строками во всю ширину плитки. Смысл ровно тот, о котором просили: пустоту занимает МАСШТАБ, а не фигура. Колонка плитки на 1440 — 639px, вертикальный столбик «цифра / подпись» оставлял справа ~400px белого. Цифра вырастает вдвое (44 → 68px) и уводит подпись вправо: строка показателя работает так же, как строка .cases-head__rule — крупное слева, мелкое справа, линейка снизу. До 992 (плитка ~340-440px) цифра и подпись остаются в столбик: рядом им не хватает места, а перенос подписи в две-три строки рвёт базовую линию. */ @media (min-width: 1200px) { /* Цифра прижата к левому краю плитки, подпись — к правому, между ними воздух, снизу линейка во всю ширину. Это в точности строка .cases-head__rule (крупное слева, микроподпись справа, hairline) — идиома сайта, а не новая фигура. Колонка под цифру — max-content с запретом переноса: доля (fr) режет «420+» пополам, если цифра шире расчётной доли (уже ловили). Раскладка включается с 1200, а не с 992: на 992 плитка внутри ~380px, и подпись из четырёх слов ломается на три строки. По той же причине она не применяется к плитке С КАДРОМ: там под текст остаётся половина плитки, и подпись справа рвётся в лесенку. */ .about-section .about-tile:not(.about-tile--hasimg) .about-stat { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: baseline; } .about-section .about-tile:not(.about-tile--hasimg) .about-stat__value { /* Сбавлено (T61): на 1200+ число доходило до 68px и доминировало. */ font-size: clamp(2.25rem, 3.6vw, 3.25rem); white-space: nowrap; } .about-section .about-tile:not(.about-tile--hasimg) .about-stat__label { margin-top: 0; text-align: right; } } /* На залитых плитках приглушённый цвет считается от --ctx-ink и на заливке не работает: там свой цвет текста. Наследуем его и гасим прозрачностью. soft С КАДРОМ (T50) сюда тоже входит: у неё фото-подложка со скримом и белый текст, показатели должны читаться поверх фото, а не акцентом/muted. */ .about-section .about-tile--accent .about-stat__value, .about-section .about-tile--photo:not(.about-tile--noimg) .about-stat__value, .about-section .about-tile--soft.about-tile--hasimg .about-stat__value { color: inherit; } .about-section .about-tile--accent .about-stat__label, .about-section .about-tile--photo:not(.about-tile--noimg) .about-stat__label, .about-section .about-tile--soft.about-tile--hasimg .about-stat__label { color: inherit; opacity: 0.82; } .about-section .about-tile--accent .about-stat + .about-stat, .about-section .about-tile--photo:not(.about-tile--noimg) .about-stat + .about-stat, .about-section .about-tile--soft.about-tile--hasimg .about-stat + .about-stat { border-top-color: color-mix(in srgb, currentColor 32%, transparent); } /* --- Ряд иконок --- margin-top: auto прижимает ряд ко дну плитки: в макете иконки стоят на дне независимо от длины текста, а высоту плитке задаёт соседка по строке. Без auto ряд висел бы сразу под текстом. */ .about-section .about-tile__icons { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2.4vw, 1.75rem); margin: auto 0 0; padding-top: clamp(1.5rem, 3vw, 2.5rem); list-style: none; padding-inline-start: 0; } .about-section .about-tile__icon-item { display: flex; align-items: center; } /* Иконки — FontAwesome-глифы (). Монохром currentColor (= --ctx-on-accent, белый на акценте), размер через font-size, ноль изображений. line-height: 1 держит их на одной оптической линии. */ .about-section .about-tile__icon { display: block; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1; color: currentColor; } /* ============================================================ Раскладка на широких экранах ============================================================ */ @media (min-width: 992px) { /* Постерная высота плитки-высказывания. Селектор ловит и .about-tile--noimg (класс --photo на ней остаётся), и это НЕ побочный эффект: именно эта высота даёт плитке поле над текстом, прижатым ко дну. Базовое правило .about-tile--noimg { min-height: 0 } остаётся в силе до 992, где поля нет и плитка равна высоте текста. */ .about-section .about-tile--photo, .about-section .about-tile--soft.about-tile--hasimg { min-height: clamp(16rem, 20vw, 22rem); } } /* ============================================================ Кликабельные плитки (T86) Верх-лево → Команда, верх-право → ПО, низ-лево → Сайты. Низ-право (стат-плитка 430+) ссылки НЕ несёт (класс .about-tile--link на ней не ставится) и остаётся некликабельной. Механика — та же, что у карточек кейсов: пустая ссылка растянута на всю плитку через ::after inset:0, а все визуальные слои отключены для мыши, чтобы клик по любому месту плитки уходил в ссылку. .about-tile уже position: relative и isolation: isolate (см. «Плитка: общее»), поэтому inset-растяжка считается от плитки, а не от секции. ============================================================ */ .about-section .about-tile--link { cursor: pointer; } .about-section .about-tile__link { position: absolute; inset: 0; /* Ссылка лежит над всеми слоями плитки, чтобы ловить клик по всей площади. Слои плитки ниже отключены для указателя, так что перехвата текста нет. */ z-index: 2; /* Пустая ссылка — квадрат клика, без визуала; фокус-кольцо даём общим правилом темы (браузерный outline на :focus-visible не подавляем). */ text-indent: -9999px; overflow: hidden; white-space: nowrap; /* Тач: без задержки-«залипания» первого тапа на кликабельной плитке. */ touch-action: manipulation; } /* Визуальные слои кликабельной плитки не перехватывают клик — он весь уходит в растянутую ссылку. Текст плитки внутри неё выделять не нужно (это карточка- ссылка, не абзац), поэтому pointer-events снимаем целиком. */ .about-section .about-tile--link > :not(.about-tile__link) { pointer-events: none; } /* Аффорданс наведения — только на устройствах с настоящим курсором, иначе на тач первый тап тратится на hover. Эффект в духе проекта: лёгкий подъём плитки, как у карточек кейсов; тени и рамки не добавляем. */ @media (hover: hover) and (pointer: fine) { /* Специфичность через .about-grid (0,3,1) поднята намеренно: правило появления .about-grid.reveal-ready .about-tile.is-inview задаёт transform: none со специфичностью 0,4,2 и без .about-grid перебило бы hover после завершения reveal. С .about-grid hover считается 0,4,2 и выигрывает по порядку (стоит ниже). */ .about-section .about-grid .about-tile--link { transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); } .about-section .about-grid .about-tile--link:hover { transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .about-section .about-grid .about-tile--link, .about-section .about-grid .about-tile--link:hover { transition: none; transform: none; } } } /* ============================================================ Появление при скролле Механика и тайминги — общие с сеткой фактов и сеткой кейсов: .reveal-ready вешает скрипт, поэтому без JS и при prefers-reduced-motion плитки просто видны, а не спрятаны навсегда. Длительность ОБЯЗАНА совпадать с REVEAL_MS в about-company.js. ============================================================ */ .about-section .about-grid.reveal-ready .about-tile { 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); transition-delay: 0s; } /* Шахматка — только на первом экране (класс вешает JS): ниже задержка копилась бы и плитка «догоняла» бы пользователя. */ .about-section .about-grid.reveal-ready .about-tile.is-stagger { transition-delay: calc(min(var(--i, 0), 3) * 60ms); } .about-section .about-grid.reveal-ready .about-tile.is-inview { opacity: 1; transform: none; } /* Мгновенный показ (быстрый флик, переход по вкладке, восстановление скролла): плитка уже в кадре, анимировать её — значит показать дырку. Класс живёт ровно один кадр, JS его снимает. */ .about-section .about-grid.reveal-ready .about-tile.is-instant { transition: none; } /* Гард обязателен и в CSS, и в JS. Подключённый на сайте AOS свой prefers-reduced-motion НЕ обрабатывает, полагаться на него нельзя. */ @media (prefers-reduced-motion: reduce) { .about-section .about-grid.reveal-ready .about-tile, .about-section .about-grid.reveal-ready .about-tile.is-stagger, .about-section .about-grid.reveal-ready .about-tile.is-inview { opacity: 1; transform: none; transition: none; transition-delay: 0s; } }