/* ============================================================ Блок «Универсальный интро-блок» — simple-intro-video-block ⚠️ РАЗМЕТКА БЛОКА НЕ МЕНЯЛАСЬ И МЕНЯТЬСЯ НЕ ДОЛЖНА (установка владельца 02.09.2026: «вёрстку ты сохраняешь, добавляешь наш стиль»). Здесь только оформление: цвет, типографика, состояния. Ни одного нового класса, ни одной правки сетки, прокрутка текста и порядок колонок — как были. ОТСЮДА ГЛАВНОЕ ОГРАНИЧЕНИЕ ФАЙЛА: у секции блока НЕТ собственного класса. И id, и class приходят из ACF-полей (…-selector / …-classes), то есть автор контента может написать туда что угодно. Единственный стабильный крючок внутри блока — .simple-intro-video-block-main-text, поэтому блок опознаётся рядом-родителем через :has(). Приём в проекте уже используется — .bottom_nav:not(:has(.page-item a)) в style.css. Специфичность .row:has(.simple-intro-video-block-main-text) = (0,2,0): этого хватает, чтобы перебить одноклассовые правила Bootstrap, и НЕ хватает, чтобы случайно перебить компоненты темы. ЦВЕТ — ТОЛЬКО ТОКЕНЫ --ctx-* / --macro-*. Ни одного hex. Обе темы уже внутри токенов, поэтому ветки «если тёмная» в файле нет. ============================================================ */ .row:has(.simple-intro-video-block-main-text) { /* Акцент ТЕКСТОМ ≠ акцент заливкой. Порядок фолбэков тот же, что у case-facts-grid: на странице кейса — цвет записи, вне кейса — «текстовая» светлота фирменного акцента (#8b1d35 / #e78da1), и только если и её нет — заливочный. Заливочный --ctx-accent в тёмной теме (#d33154) для тонкой графики и мелких глифов слишком тёмен: 3.76 к фону против 8.51. */ --intro-accent-text: var(--case-accent-text, var(--macro-accent-text, var(--ctx-accent))); /* Мера скругления медиа — общесистемная, своего числа блок не заводит. */ --intro-media-radius: var(--case-radius); } /* ============================================================ ШИРИНА БЛОКА НА ДЕСКТОПЕ Замечание владельца 02.09.2026: «первый блок должен быть по всей ширине контейнера, маленьким плохо выглядит». ЧТО БЫЛО. Разметка раздаёт на ≥992px десять колонок из двенадцати: рельс .col-lg-1 (1) + портрет .col-lg-4 (4) + .offset-lg-1 (1) + текст .col-lg-4 (4) = 10. Оставшиеся 2/12 раскладывались поровну по краям (у ряда стоит .justify-content-center), то есть на 1440px контейнер шириной 1320px нёс блок шириной 1100px и по 110px пустоты слева и справа — замерено: рельс начинался на x=166 при контейнере с x=56. ЧТО СТАЛО. Тем же двум колонкам отданы 5/12 вместо 4/12: 1 (рельс) + 5 (портрет) + 1 (отступ) + 5 (текст) = 12 ровно. Разметка НЕ ТРОНУТА — меняется только ширина, классы те же. .justify-content-center при этом становится безобидным no-op: раскладывать больше нечего. ПОЧЕМУ 5/5, А НЕ «текст во всю оставшуюся ширину». Строка длиннее ~75 знаков не читается. Замер 02.09.2026 на этом самом тексте (SF UI Display 16px, средняя ширина знака 7.99px; из ширины колонки вычтены 8px полосы прокрутки и 8px padding-right): было — колонка 416px → 50 знаков (узко, отсюда и «маленький» вид); стало — колонка 526px → 64 знака (комфортный коридор 60–75); если бы текст занял 7/12 — 746px → 91 знак, нечитаемо. Портрет растёт синхронно, 416→526px, и остаётся КВАДРАТНЫМ: пропорцию держит сама разметка (ratio-1x1 / квадратный исходник), мы её не трогаем. ⚠️ ПОТОЛОК СТРОКИ ОБЕСПЕЧИВАЕТ САМ BOOTSTRAP, а не наше правило: .container упирается в max-width 1320px на ≥1400px, поэтому на 1920px колонка та же 526px и те же 64 знака (замерено: 1440 и 1920 дают одинаковую геометрию). Отдельная мера ширины десктопу не нужна. Мера прокрутки текста (max-height 21rem) и вертикальный рельс соцссылок к ширине отношения не имеют и остаются как были. */ @media (min-width: 992px) { /* Портрет. Селектор (0,3,0) против (0,1,0) у самого .col-lg-4 — !important не нужен, порядок файлов не важен. */ .row:has(.simple-intro-video-block-main-text) > .col-lg-4.col-sm-6 { width: 41.66666667%; } /* Текст. .offset-lg-1 (margin-left 8.333%) оставляем — это воздух между портретом и колонкой текста, без него они склеиваются. */ .row:has(.simple-intro-video-block-main-text) > .col-lg-4.offset-lg-1 { width: 41.66666667%; } } /* --- ПОТОЛОК ДЛИНЫ СТРОКИ --- Единственное место, где он реально срабатывает, — планшет: ниже 992px классы .col-lg-* выключаются, у колонки с текстом других col-классов нет, и она разворачивается на всю ширину ряда. Замер на 768px: 696px = 86 знаков в строке. Это не следствие правки выше (так было и раньше), но правку про длину строки нечестно делать только для десктопа. 37.5rem = 600px → замеренные 73 знака. На ≥992px колонка и так уже 526px, поэтому там правило не срабатывает вовсе — это ограничитель, а не мера макета. Блок остаётся прижатым к левому краю колонки, под заголовком: центрировать его нельзя, заголовок выровнен влево. ⚠️ ПОБОЧНОЕ СЛЕДСТВИЕ, ЗАМЕЧЕННОЕ ЗАМЕРОМ: на 768px текст раньше умещался в 21rem целиком и НЕ листался, теперь листается (390px против 336px высоты). Это не регресс, а выравнивание: на 320/375 и на ≥992px блок листался и до правки — 768px был единственным исключением. Если понадобится вернуть как было — снимается ровно эта одна строка max-width, остальное от неё не зависит. */ .simple-intro-video-block-main-text { max-width: 37.5rem; } /* --- ПОРТРЕТ --- ⚠️⚠️ ФИЛЬТРОВ ЗДЕСЬ НЕТ И БЫТЬ НЕ МОЖЕТ. В блоке стоит портрет, УЖЕ обработанный в изумрудный дуотон в самом файле. Любой grayscale/saturate поверх него убивает приём: обесцвечивать нужно исходно цветное фото (так работает .team-section--mono в team-members.css), а не готовый дуотон. `filter: none` написан ЯВНО и намеренно — это страховка на будущее: если кто-то заведёт общий фильтр для фотографий (в теме или в соседнем блоке), портрет этого блока обязан остаться цветным, и правило будет видно тому, кто такой фильтр пишет. Тень: класс .shadow в разметке даёт литеральную rgba с !important (bootstrap.min.css). Перебиваем её системной --macro-shadow-lg, которая в тёмной теме глубже светлой, — иначе на тёмном фоне тени просто не видно. !important тут вынужденный, ровно из-за !important у самой утилиты. */ .row:has(.simple-intro-video-block-main-text) img.img-fluid { filter: none; border-radius: var(--intro-media-radius); box-shadow: var(--macro-shadow-lg) !important; } /* Обёртка-триггер видео (режим «видео»): без этого ссылка растягивается по высоте колонки и кликабельной становится пустота под кадром. Правило из первой версии файла, сохранено как было. */ .simple-intro-video-block-image { height: max-content; } /* --- ЗАГОЛОВОК --- */ .row:has(.simple-intro-video-block-main-text) h2 { color: var(--ctx-ink); font-weight: 600; /* Крупный кегль в SF UI Display «рассыпается» на дефолтном трекинге — тот же минус, что у .hero_title h1 на странице кейса. */ letter-spacing: -0.01em; text-wrap: balance; } /* --- ТЕКСТ С ПРОКРУТКОЙ --- max-height + overflow: auto — ЧАСТЬ ПРИЁМА, а не случайность: текста больше, чем высота портрета рядом, и колонка листается внутри себя. Сам механизм не трогаем; полоса прокрутки обязана быть ВИДНА там, где срабатывает. ⚠️ НО НА ДЕСКТОПЕ ОНА СРАБАТЫВАТЬ НЕ ДОЛЖНА (владелец, 07.09.2026: «давай ограничение побольше, чтобы текст входил на ПК»). 21rem = 336px — мера, снятая под ПРЕЖНИЙ, более короткий текст; после замены на три абзаца он перестал влезать на всех ширинах. Замер 07.09.2026 (scrollHeight против clientHeight, обе темы одинаково): 1920 — нужно 432, было 336 1280 — нужно 509 1440 — нужно 432 992 — нужно 611 768 — нужно 406 375 — нужно 637 Разброс объясняется шириной колонки: чем она уже, тем больше строк (526px на 1440 против 376px на 992). Поэтому от 992px потолок поднят до 40rem = 640px — он покрывает самый тяжёлый десктопный случай (611 на 992) с запасом в 29px, то есть текст входит целиком на ВСЕХ десктопных ширинах, а не только на 1440. ⚠️ ЦЕНА, названная честно: на 992–1199 колонка текста становится выше квадратного портрета (611 против 376 на 992; 509 против 451 на 1280) — пара перестаёт быть равновысокой. На 1440+ этого нет: там 432 против 526, текст по-прежнему НИЖЕ портрета, «квадратность» пары сохраняется целиком. Если равновысокость важнее прокрутки на средних ширинах — правильный ход не резать текст обратно, а поднимать медиа-колонку; это отдельное решение. ⚠️ Ниже 992px мера остаётся 21rem: там колонки идут друг под другом, портрет отдельно, и текст на 637px превращал бы первый экран в простыню. Прокрутка на мобиле — рабочее поведение, а не дефект. */ .simple-intro-video-block-main-text { max-height: 21rem; overflow: auto; padding-right: 0.5rem; color: var(--ctx-ink); line-height: 1.6; /* Докрутив до края, не начинаем листать страницу под блоком. */ overscroll-behavior: contain; } /* Вид самой полосы — общий, из style.css («ПОЛОСЫ ПРОКРУТКИ»): изумрудная таблетка на треке из 10 % цвета текста, обе темы уже в токенах. ⚠️ ЗДЕСЬ НЕЛЬЗЯ ПИСАТЬ scrollbar-width / scrollbar-color «для надёжности»: в Chromium любое из этих свойств ВЫКЛЮЧАЕТ ::-webkit-scrollbar-* целиком, и блок получил бы серый системный прямоугольник вместо общей полосы (замер 02.09.2026, разбор — тот же блок в style.css). Firefox-ветка живёт там, под @supports not selector(::-webkit-scrollbar). */ .simple-intro-video-block-main-text p:last-child { margin-bottom: 0; } /* Десктоп: текст входит целиком, прокрутка остаётся страховкой на случай, если он снова вырастет (механизм не выпилен — поднят потолок). */ @media (min-width: 992px) { .simple-intro-video-block-main-text { max-height: 40rem; } } /* Ссылки внутри текста — акцентом, а не цветом темы по умолчанию. */ .simple-intro-video-block-main-text a { color: var(--intro-accent-text); text-underline-offset: 0.2em; } /* --- СОЦССЫЛКИ (вертикальная колонка на десктопе, строка на мобиле) --- Цвет держит .link-primary (в тёмной теме его перекрашивает тема), здесь только читаемость самой подписи и отклик. */ .row:has(.simple-intro-video-block-main-text) .btn-link { font-weight: 500; letter-spacing: 0.02em; text-underline-offset: 0.25em; } @media (hover: hover) and (pointer: fine) { .row:has(.simple-intro-video-block-main-text) .btn-link:hover { text-decoration: underline !important; } } /* --- КНОПКА-СТРЕЛКА «ВНИЗ» --- В разметке это .btn.btn-outline-primary.btn-lg с одной иконкой внутри, поэтому она обязана быть КРУГОМ, а не пилюлей с воздухом по бокам: .btn из темы даёт padding 0.625rem 1.5rem, и на одном глифе это выглядело овалом. Ширину/высоту задаём равными, паддинг гасим. Цвет глифа — акцент. Перебить приходится правило темы .btn-outline-primary:not(:hover):not(:active):not(:focus):not(.active) { color: var(--ctx-ink) !important } — (0,5,0) с !important. Наша цепочка с :has() даёт (0,7,0), поэтому !important нужен, а порядок файлов не важен. ⚠️ Только состояние ПОКОЯ: hover/active/focus остаются за темой (там заливка --ctx-accent + текст --ctx-on-accent), и подпись на них не пропадёт. */ .row:has(.simple-intro-video-block-main-text) .btn-outline-primary { width: 3.5rem; min-width: 3.5rem; height: 3.5rem; padding: 0; font-size: 1.125rem; } .row:has(.simple-intro-video-block-main-text) .btn-outline-primary:not(:hover):not(:active):not(:focus):not(.active) { color: var(--intro-accent-text) !important; } /* --- СНОСКА ПОД БЛОКОМ --- Юридическое примечание (звёздочка у подписи контакта раскрывается здесь). Это ЕДИНСТВЕННЫЙ собственный класс блока в разметке: у секции своего класса нет (id/class приходят из ACF), а сноска — новый элемент, и опознавать её через :has() незачем. Кегль 0.6875rem = 11px (владелец 08.09.2026: «более мелкий шрифт, в 2 раза мельче»). Буквально вдвое от прежних 13px — это 6.5px, и на таком кегле оговорка перестаёт быть оговоркой: её нельзя прочитать, то есть она не выполняет свою функцию. 11px — заметно мельче основного текста (16px, ровно 0.6875 от него) и мельче прежних 13px, но ещё читается. ⚠️ НИЖЕ 11px НЕ ОПУСКАТЬ: у SF UI Display на 10px и меньше кириллица теряет различимость строчных (в/б/ъ), а WCAG 1.4.4 требует, чтобы текст можно было увеличить до 200 % без потери содержимого — от 11px это ещё честные 22px. Если владелец попросит ещё мельче — правильный ответ не кегль, а меньшая насыщенность цвета или отдельная строка-«звёздочка», иначе теряется смысл юридического примечания. ⚠️ внутри абзаца сбрасывается на inherit НАМЕРЕННО: Bootstrap даёт ему 0.875em, и поверх наших 11px вышло бы 9.6px — заведомо нечитаемо. Тег оставлен ради семантики (у него ровно это значение — «мелкий шрифт, оговорки и правовые примечания»), а не ради размера. Цвет — --ctx-muted, системный токен второстепенного текста. Замер 08.09.2026 на странице «Студия» (фон блока — фон страницы, не поверхность): светлая #78686c на #ffffff — 5.26 тёмная #ae939a на #251017 — 6.39 Обе выше порога 4.5 для мелкого текста; ниже уводить нельзя. Ширина 60ch — сноска короче основного текста и не обязана тянуться на всю ширину контейнера. Отступ сверху отделяет её от ряда с контентом. ⚠️ С 09.09.2026 БЛОК ЭТУ РАЗМЕТКУ НЕ ПЕЧАТАЕТ (решение владельца: оговорка о статусе Meta сведена в подвал, чтобы не повторяться на одной странице). Правила оставлены рабочими: поле блока не удалено, вывод в php снят одной строкой и так же возвращается. Мёртвого класса тут нет — есть выключенный. */ .simple-intro-video-block-footnote { margin: 1.5rem 0 0; max-width: 60ch; color: var(--ctx-muted); font-size: 0.6875rem; line-height: 1.55; } .simple-intro-video-block-footnote small { font-size: inherit; } @media (min-width: 992px) { .simple-intro-video-block-footnote { margin-top: 2rem; } } /* ============================================================ Модалка с видео (режимы «видео» / «видео VK» блока). На странице «Студия» не рендерится — там выбран режим «картинка», — но правила общие для блока и потому остаются. --bs-dark / --bs-light здесь НЕ хардкод: в тёмной теме они переложены на --macro-surface / --macro-ink (см. style.css, блок «ТЁМНАЯ ТЕМА»). ============================================================ */ .author_video_modal .modal-body { position: relative; background-color: var(--bs-dark); } .author_video_modal .modal-content { background: transparent; border: none; } .author_video_modal .modal-footer { border-top: none; justify-content: center; } /* Подпись лежит поверх кадра видео, а не поверх нашей поверхности, — тень под ней играет роль скрима и потому чёрная. Тот же случай, что --macro-brand-navy: цвет принадлежит медиа, а не палитре страницы. */ .author_video_modal .modal-footer p { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); } .author_video_modal .btn-close { position: absolute; right: 0; top: 0; z-index: 1; width: 2rem; height: 2rem; border-radius: 0 0 0 0.8rem; background-color: var(--bs-light); filter: none !important; opacity: 0.8; } .author_video_modal .btn-close:hover { opacity: 1; }