/* ============================================================ Пересборка: правки поверх исходного CSS Webflow. Подключается сборщиком последним, на всех страницах, файлом /assets/css/redesign.css. Исходный vova-new-site.webflow.css не трогается — так видно, что именно изменено, и откат сводится к git. Геометрия снята с des.obys.agency, замерено в браузере на ширине 1280. Шрифты, цвета и тексты свои: все значения — переменные из библиотеки, своих чисел нет. ============================================================ */ /* ============================================================ 1. Типографика ============================================================ */ /* --- Крупные текстовые заголовки ---------------------------- Один класс .heading-h2 обслуживает четыре роли: вводные абзацы с отступом (3), вводные без отступа (2), CTA в общем компоненте (5 страниц), заголовки статей (6). Кегль поднимается с heading-h2 (37.5px) до heading-h1 (47px). Межстрочный и межбуквенный не трогаются. На ≤479 остаётся heading-h2: heading-h1 там превращается в 9.767vw, и абзац в двести знаков становится стеной. */ .heading-h2 { font-size: var(--_typography---font-size--heading-h1); } @media screen and (max-width: 479px) { .heading-h2 { font-size: var(--_typography---font-size--heading-h2); } } /* .heading-h2.text-indented.spec_title не задет: у него свой font-size с более высокой специфичностью. */ /* --- Начертание основного текста ---------------------------- Вес 400 вместо 500, основной чёрный вместо серого, нулевой трекинг вместо −0.024em. Кегль не менялся намеренно: у референса 14px против наших 13.4px, разница 0.6px, а межстрочный у нас даже просторнее (1.35 против 1.25). Читаемость там держится на этих трёх вещах, а не на размере. Область действия выбрана по замеру. Класс .text-muted стоит в 295 местах, но роли у него разные: div.text-muted — 242 шт, медиана 10 знаков. Подписи и метаданные: «3D, SPLINE, FIGMA», «Co-Founder». Остаются серыми, иначе схлопнется иерархия. p.text-muted — 11 шт, медиана 93 знака. Это описания. Их и меняем. Плюс абзацы внутри rich-text — тексты статей и кейсов. */ p.text-muted, .news-rich-text p, .work-rich-text p, .type-rich-text p, .about-body p { font-weight: 400; letter-spacing: normal; color: var(--colors--matt-black); } /* Крупные заголовки под правило не попадают: они тоже

, но с классом .heading-h2, и вес 500 у них остаётся. */ /* ============================================================ 2. Блок About на главной Референс: ярлык 14px inline-block шириной 311px в начале первой строки крупного текста; вторичный блок в правой половине двумя колонками; между ними 50 + 40 = 90px. Родная 12-колоночная сетка дала координаты референса без подгонки: колонки 7–9 и 10–12. ============================================================ */ /* Ярлык лежит в отступе первой строки. Отступ сверху ставит его на ту же долю высоты строки, что и в референсе: центр на 26%. */ .about-label { grid-area: 1 / 1 / 2 / 4; padding-top: var(--_spacing---spacing-5); z-index: 1; } /* Референс: 53px / lh 53 / ls −1.59px. Ближайшее в библиотеке: heading-h1 47px, межстрочный heading 1.1em, межбуквенный heading-h2 −0.035em (−1.645px при 47px). */ .about-statement { grid-area: 1 / 1 / 2 / 13; margin-bottom: 0; font-size: var(--_typography---font-size--heading-h1); line-height: var(--_typography---font-height--heading-height); letter-spacing: var(--_typography---letter-spacing--heading-h2); /* Отступ первой строки освобождает место под ярлык — тот же приём и то же значение, что у исходного .text-indented. */ text-indent: calc(25% - .25rem); color: var(--colors--matt-black); } .about-body, .about-aside { padding-top: var(--_spacing---spacing-40); margin-top: var(--_spacing---spacing-50); } /* Референс: колонка x=650 w=295, текст 245 из-за отступа справа. Здесь колонки 7–9 = 301px, отступ 50px -> текст 251px. */ .about-body { grid-area: 2 / 7 / 3 / 10; padding-right: var(--_spacing---spacing-50); } .about-body p { margin-bottom: var(--_spacing---spacing-20); } /* У первого абзаца колонки в референсе есть отступ первой строки. */ .about-lead { text-indent: var(--_spacing---spacing-40); } /* Тёмная плашка, отступ сверху 30 — значения из шкалы точно. ⚠️ Поля 15/25, а не 5/10 из референса. Решение заказчика от 09.09.2026: кнопка на сайте одна, и размер у неё обязан быть один. Поля 15/25 держал контактный блок в подвале — там это главное действие страницы и палец должен попадать, 48px в высоту. Кнопка «Learn more about myself» на главной оставалась мелкой, 5/10, и рядом с подвалом читалась как другой, второсортный элемент. Поэтому размер переехал в само правило, а из подвала снят: два места, отвечающие за один размер, расходятся на первой же правке. Возврат мелкой кнопки — вернуть сюда 5/10 и добавить в `.contact-actions .about-btn` строку `padding: 15px 25px` обратно. */ .about-btn { margin-top: var(--_spacing---spacing-30); padding: var(--_spacing---spacing-15) var(--_spacing---spacing-25); display: inline-flex; align-items: center; position: relative; overflow: hidden; border-radius: var(--sizing--border-radius); background-color: var(--colors--matt-black); color: var(--colors--white); font-size: var(--_typography---font-size--body); letter-spacing: var(--_typography---letter-spacing--body); text-decoration: none; } /* Заливка выезжает так же, как подчёркивание в ссылках сайта: 500ms, outExpo — то же время и та же кривая, что в IX2. */ .about-btn:before { content: ""; position: absolute; inset: 0; background-color: var(--colors--granite-gray); transform: translate3d(-101%, 0, 0); transition: transform 500ms cubic-bezier(.19, 1, .22, 1); } .about-btn:hover:before { transform: translate3d(0, 0, 0); } .about-btn span { position: relative; } /* Список справа: заголовок с волосяной линией, строки с линией. */ .about-aside { grid-area: 2 / 10 / 3 / 13; } /* Подписи над списком больше нет (решение заказчика от 13.09.2026), и её нижняя линия переехала на верх первой строки: список по-прежнему закрыт линией с обеих сторон. */ .about-aside > .about-row:first-child { border-top: 1px solid var(--colors--matt-black); } /* Строка списка — родная разметка ссылки сайта (.link + .underline-container + .underline) с data-w-id, поэтому подчёркивание выезжает штатной интеракцией. Здесь только разворот в строку и волосяная линия. */ .about-row.link { flex-flow: row; justify-content: space-between; align-items: baseline; width: 100%; max-width: 100%; height: auto; padding-top: var(--_spacing---spacing-5); padding-bottom: var(--_spacing---spacing-5); border-bottom: 1px solid var(--colors--matt-black); color: var(--colors--matt-black); font-weight: 400; letter-spacing: normal; text-decoration: none; } .about-row-meta { color: var(--colors--granite-gray); } @media screen and (max-width: 991px) { /* Крупный кегль остаётся: heading-h1 в библиотеке не меняется вплоть до 479. Ширина строки ограничена теми же 405px, что стоят у существующего .about-text-container. */ .about-body { grid-area: 2 / 1 / 3 / 7; max-width: 405px; padding-right: var(--_spacing---spacing-40); } .about-aside { grid-area: 2 / 7 / 3 / 13; } } @media screen and (max-width: 479px) { /* Как в исходном блоке: на мобильном отступ снимается, ярлык и текст расходятся по своим строкам. */ .about-label { grid-area: 1 / 1 / 2 / 7; padding-top: 0; } .about-statement { grid-area: 2 / 1 / 3 / 7; font-size: var(--_typography---font-size--heading-h2); } .about-body { grid-area: 3 / 1 / 4 / 7; max-width: none; padding-right: 0; } .about-aside { grid-area: 4 / 1 / 5 / 7; margin-top: var(--_spacing---spacing-45); } .about-lead { text-indent: 0; } } /* ============================================================ 3. Playground — обратная палитра Мокапы на этой странице тёмные, и белый лист вокруг них выглядит случайным. Страница переворачивается целиком: фон чёрный, текст белый. Изображения и видео не трогаются — инверсия сделана подменой цветовых переменных, а не фильтром. Класс вешает сборщик, только на /playground. ============================================================ */ body.theme-invert { /* Фон — чистый чёрный, не matt-black: мокапы на странице тёмные, и любой оттенок серого рядом с ними читается как грязь. Текст — чистый белый. Два серых меняются местами. */ --colors--white: #000; --colors--matt-black: #fff; --colors--granite-gray: #bababa; --colors--gray: #666; /* У cloud-white пары в палитре нет: это «почти белый» для разделителей. Зеркальный шаг от чёрного дал бы #0f0f0f — на экране такая линия пропадает совсем, поэтому взят заметный минимум. */ --colors--cloud-white: #242424; /* Фон body в CSS Webflow зашит как #fff мимо переменной. */ background-color: var(--colors--white); } /* Ниже — то, что тоже зашито мимо переменных и потому не переворачивается само. Найдено просмотром страницы, а не наугад: остальные жёсткие цвета на ней не встречаются. */ /* 29 подписей к работам. */ body.theme-invert .heading-h5 { color: var(--colors--matt-black); } /* Меню и его ссылки: фон берёт переменную и становится светлым, а цвет текста зашит белым — без правки белое по белому. */ body.theme-invert .menu-container, body.theme-invert .text-color---white { color: var(--colors--white); } /* ============================================================ 4. Resume Раскладка взята со страницы Changelog из экспорта: волосяная линия на всю ширину, под ней название секции слева и содержимое справа, по шесть колонок на каждое. Отличие от оригинала: левая колонка липкая. В Changelog подпись статичная и при длинном содержимом уезжает вверх; здесь она держится, пока листается её раздел, — тогда это действительно навигация, а не просто заголовок. ============================================================ */ .resume-grid { row-gap: var(--_spacing---spacing-60); } .resume-rule { grid-column: span 12; margin-bottom: var(--_spacing---spacing-30); } .resume-label { grid-column: span 4; } .resume-label > div { position: sticky; /* Шапка сайта сама липкая, поэтому подпись держится под ней. */ top: var(--_spacing---spacing-90); } .resume-body { grid-column: span 8; } /* 52ch единицы дают около 65 знаков в строке этим шрифтом: ch считается по ширине нуля, а он у Bdogrotesk уже среднего знака. */ .resume-body > p { margin-bottom: var(--_spacing---spacing-20); max-width: 52ch; } .resume-item + .resume-item { margin-top: var(--_spacing---spacing-45); } .resume-item > .heading-h5, .resume-entry > .heading-h5 { margin-bottom: var(--_spacing---spacing-10); } .resume-item > p, .resume-entry > p { max-width: 52ch; } .resume-meta { margin-bottom: var(--_spacing---spacing-5); } .resume-list { margin: var(--_spacing---spacing-10) 0 0; padding: 0; list-style: none; max-width: 52ch; } /* Пункт помечен волосяной линией слева, а не маркером: тот же язык линий, что и у разделителей секций. */ .resume-list li { padding-left: var(--_spacing---spacing-15); border-left: 1px solid var(--colors--cloud-white); color: var(--colors--matt-black); font-weight: 400; letter-spacing: normal; } .resume-list li + li { margin-top: var(--_spacing---spacing-12); } /* Обложка проекта справа от текста. Текст в резюме упирается в 52ch и дальше не растёт, а колонка содержимого — восемь из двенадцати: справа остаётся пустая треть экрана. Туда и встаёт обложка кейса, кликабельная, тем же кадром, что стоит в списке работ. Второго места, где лежит обложка, не заводим: адрес подставляет сборщик из coverFor(), источник тот же, что у панелей на /projects. Колонка текста остаётся 52ch, обложка забирает остаток. minmax(0,…) обязателен обеим: без него картинка в grid не даёт колонке сжаться и раскладка вылезает за контейнер. */ .resume-item--cover { display: grid; grid-template-columns: minmax(0, 52ch) minmax(0, 1fr); gap: var(--_spacing---spacing-40); align-items: start; } .resume-cover { display: block; /* ⚠️ `clip`, а не `hidden` — причина та же, что у `.case-next-cover`: внутри карточка с движением при прокрутке. */ overflow: clip; border-radius: var(--sizing--border-radius); /* Верх обложки — на строке названия, а не меты: мета набрана мелким и служит подписью, равнять по ней картинку не на чем. */ margin-top: var(--_spacing---spacing-20); /* Половина колонки. Во всю ширину обложка весит больше текста рядом и читается как главное на странице, хотя это подпись к пункту. Уменьшена рамка ссылки, а не картинка внутри неё, — кликабельная площадь совпадает с тем, что видно. */ width: 50%; justify-self: start; } /* Наезд и движение при прокрутке держит коробка `.card-media` внутри ссылки — общим правилом на все карточки сайта, см. раздел «карточки» в конце файла. Здесь остаётся только размер самой ссылки, и уважение к `prefers-reduced-motion` там же, одно на все карточки. */ /* Строка о праве на работу в конце Profile. Плотнее и темнее остального абзаца: рекрутер снимает этим возражение, а не читает очередной факт. 600 — DemiBold, он в системе уже подключён. */ .resume-strong { margin-top: var(--_spacing---spacing-15); max-width: 52ch; color: var(--colors--matt-black); font-weight: 600; letter-spacing: normal; } /* Название кейса как строка: имя слева, стрелка «открыть» прижата к правому краю текстовой колонки. Стрелка — тот же знак ↗, что в контактных строках и подвале, поэтому её размер задаётся в em и сам совпадает с высотой заголовка. Подчёркивание переехало с самой ссылки на имя: на flex-строке линия тянулась бы через всю пустоту до стрелки. */ .resume-case-link { display: flex; align-items: baseline; justify-content: space-between; gap: var(--_spacing---spacing-15); max-width: 52ch; color: inherit; text-decoration: none; } .resume-case-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--colors--gray); transition: text-decoration-color 0.2s ease; } .resume-case-link:hover .resume-case-name { text-decoration-color: var(--colors--matt-black); } .resume-case-go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; line-height: 1; transition: transform 0.2s ease; } .resume-case-link:hover .resume-case-go { transform: scale(1.18); } @media (prefers-reduced-motion: reduce) { .resume-case-go { transition: none; } .resume-case-link:hover .resume-case-go { transform: none; } } /* Оговорка про NDA — самым мелким кеглем, как в CV. */ .resume-note { margin-top: var(--_spacing---spacing-30); font-size: var(--_typography---font-size--small); color: var(--colors--granite-gray); font-weight: 400; letter-spacing: normal; max-width: 52ch; } @media screen and (max-width: 991px) { .resume-label { grid-column: span 12; } .resume-body { grid-column: span 12; } .resume-label > div { position: static; margin-bottom: var(--_spacing---spacing-20); } } @media screen and (max-width: 767px) { .resume-item--cover { display: block; } .resume-cover { display: none; } } @media screen and (max-width: 479px) { .resume-rule { grid-column: span 6; } .resume-label { grid-column: span 6; } .resume-body { grid-column: span 6; } } /* ============================================================ 5. Проекты — панели, наезжающие друг на друга Референс: панель с непрозрачным фоном и волосяной линией сверху; шапка — сетка 12 колонок, мета 1–3, название 4–9, инфа 10–12, всё по нижнему краю; медиа под шапкой. Наезд у референса делает GSAP. Здесь — голый CSS: sticky плюс непрозрачный фон. Следующая панель наезжает на предыдущую. Ни библиотеки, ни запроса наружу. Чего не хватает против референса: уходящая панель не уменьшается и не притухает — это требует скролл-скрипта, его место на этапе перехода на GSAP. ============================================================ */ /* Панели стоят внутри .container, поэтому разворачиваем их во всю ширину теми же боковыми отступами, что у контейнера. */ .works-stack { margin-left: calc(-1 * var(--sizing--padding-global)); margin-right: calc(-1 * var(--sizing--padding-global)); } .works-panel-wrap { position: sticky; top: 0; } .works-panel { display: flex; flex-direction: column; height: 100vh; padding-top: var(--_spacing---spacing-40); padding-bottom: var(--_spacing---spacing-10); border-top: 1px solid var(--colors--matt-black); background-color: var(--colors--white); color: var(--colors--matt-black); text-decoration: none; } .works-row { align-items: end; } .works-meta { grid-area: 1 / 1 / 2 / 4; font-weight: 400; letter-spacing: normal; } .works-title { grid-area: 1 / 4 / 2 / 10; margin-bottom: 0; font-size: var(--_typography---font-size--heading-h1); line-height: var(--_typography---font-height--heading-height); letter-spacing: var(--_typography---letter-spacing--heading-h2); } /* Референс: 26px. Токен heading-h3 — ближайший, 28px. */ .works-side { grid-area: 1 / 10 / 2 / 13; font-size: var(--_typography---font-size--heading-h3); line-height: var(--_typography---font-height--heading-height); letter-spacing: var(--_typography---letter-spacing--heading-h3); font-weight: 400; } .works-media { flex: 1; min-height: 0; margin-top: var(--_spacing---spacing-40); overflow: hidden; } .works-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms cubic-bezier(.19, 1, .22, 1); } .works-panel:hover .works-media img { transform: scale(1.03); } @media screen and (max-width: 991px) { /* Три слота в ряд на планшете не живут: название остаётся на своей строке, мета и инфа уходят под него. */ .works-title { grid-area: 1 / 1 / 2 / 13; } .works-meta { grid-area: 2 / 1 / 3 / 7; margin-top: var(--_spacing---spacing-20); } .works-side { grid-area: 2 / 7 / 3 / 13; margin-top: var(--_spacing---spacing-20); text-align: right; } } @media screen and (max-width: 479px) { .works-title { font-size: var(--_typography---font-size--heading-h2); } .works-meta { grid-area: 2 / 1 / 3 / 7; } .works-side { grid-area: 3 / 1 / 4 / 7; margin-top: var(--_spacing---spacing-10); text-align: left; } } /* ============================================================ 6. Подвал Раскладка с того же референса, des.obys.agency. Замерено в браузере на ширине 1280: слева колонка 295px с подписью «Social Media:» и мелкими строками по 32px, справа колонка 925px с навигацией кеглем 160px, строки по 153px с волосяной линией. Внизу строка 14px в три слота. Родная 12-колоночная сетка сайта повторяет эти координаты без подгонки: 3 колонки = 300px, 9 колонок = 930px. Кегль 160px в библиотеке отсутствует — крупнейший токен display-2 равен 80px. Берём его удвоенным: значение остаётся производным от токена и едет вместе с ним по брейкпоинтам. ============================================================ */ .footer-social { grid-area: 1 / 1 / 2 / 4; } .footer-menu { grid-area: 1 / 4 / 2 / 13; } /* Подпись над колонкой: волосяная линия под ней открывает список. */ .footer-col-title { margin-bottom: 0; padding-bottom: var(--_spacing---spacing-10); border-bottom: 1px solid var(--colors--matt-black); color: var(--colors--matt-black); font-size: var(--_typography---font-size--body); font-weight: 400; letter-spacing: normal; } /* Мелкая строка слева — та же разметка и те же правила, что у строк блока About, поэтому и правило одно на двоих. */ .footer-row.link, .about-row.link { flex-flow: row; justify-content: space-between; align-items: baseline; width: 100%; max-width: 100%; height: auto; padding-top: var(--_spacing---spacing-5); padding-bottom: var(--_spacing---spacing-5); border-bottom: 1px solid var(--colors--matt-black); color: var(--colors--matt-black); font-weight: 400; letter-spacing: normal; text-decoration: none; } .footer-row-meta { color: var(--colors--granite-gray); } /* --- навигация крупным кеглем ------------------------------- */ .footer-nav { margin: 0; padding: 0; list-style: none; } /* Строка целиком: волосяная линия снизу, заливка выезжает при наведении. Отрицательный отступ слева уводит заливку за край колонки, а текст остаётся на месте — иначе он прилипал бы к границе плашки. */ .footer-nav-item { position: relative; overflow: hidden; margin-left: calc(-1 * var(--_spacing---spacing-15)); padding-left: var(--_spacing---spacing-15); border-bottom: 1px solid var(--colors--matt-black); } /* Та же кривая и то же время, что у подчёркивания ссылок в IX2 и у кнопки в блоке About: 500ms, outExpo. */ .footer-nav-item:before { content: ""; position: absolute; inset: 0; background-color: var(--colors--matt-black); transform: translate3d(-101%, 0, 0); transition: transform 500ms cubic-bezier(.19, 1, .22, 1); } .footer-nav-item:hover:before { transform: translate3d(0, 0, 0); } .footer-nav-link { position: relative; display: inline-block; padding-top: var(--_spacing---spacing-5); padding-bottom: var(--_spacing---spacing-5); color: var(--colors--matt-black); /* Верхняя граница — удвоенный токен, 160px. Вторая граница держит самое длинное слово внутри колонки: «Playground» набирается в 5.21 кегля, колонка — 0.73 ширины окна, отсюда потолок 0.73 / 5.21 = 14vw, взято 13.5vw с запасом. Без неё на 992–1279 слово вылезало за край колонки. */ font-size: min(calc(var(--_typography---font-size--display-2) * 2), 13.5vw); line-height: 1; letter-spacing: var(--_typography---letter-spacing--heading-h2); text-decoration: none; transition: color 500ms cubic-bezier(.19, 1, .22, 1); } .footer-nav-item:hover .footer-nav-link { color: var(--colors--white); } /* Счётчик кейсов и статей — верхним индексом, кеглем строки. */ .footer-nav-count { font-size: var(--_typography---font-size--small); letter-spacing: normal; vertical-align: super; } /* --- нижняя строка ------------------------------------------ */ .footer-bottom { padding-top: var(--_spacing---spacing-60); } .footer-bottom-left { grid-area: 1 / 1 / 2 / 5; } .footer-bottom-mid { grid-area: 1 / 5 / 2 / 9; } .footer-bottom-right { grid-area: 1 / 9 / 2 / 13; text-align: right; } /* --- адаптив ------------------------------------------------ */ @media screen and (max-width: 991px) { /* Две колонки рядом не живут: под навигацию нужна вся ширина, мелкие ссылки уходят под неё. */ .footer-menu { grid-area: 1 / 1 / 2 / 13; } .footer-social { grid-area: 2 / 1 / 3 / 13; margin-top: var(--_spacing---spacing-40); } } @media screen and (max-width: 479px) { /* На телефоне display-2 равен 12.791vw, удвоение дало бы 25vw — «Playground» не помещается в строку. Остаётся одинарный. */ .footer-nav-link { font-size: var(--_typography---font-size--display-2); } .footer-bottom-left { grid-area: 1 / 1 / 2 / 13; } .footer-bottom-mid { grid-area: 2 / 1 / 3 / 13; } .footer-bottom-right { grid-area: 3 / 1 / 4 / 13; text-align: left; } } /* ============================================================ 7. Страница кейса: Market Risk Platform Собрана по спецификации v3: скан-слой (hero, факты, конфликт, два правила, индекс), затем глубина — шесть решений. Отличие от шаблона кейса сайта: там одно описание, а следом все картинки подряд. Здесь текст и визуалы вперемешку, у каждого визуала подпись, а сравнения стоят парой в одну строку. Приёмы подачи сняты с des.obys.agency/typography-principles: нумерованный индекс с ярлыком №, крупные цифры с подписью в скобках, бейджи-пилюли, точки вместо маркеров списка. ============================================================ */ /* --- общая раскладка секций --------------------------------- */ /* Слева ярлык или номер, справа содержимое: колонки 1–3 и 4–10. Правый край на 10-й, а не на 13-й — строка не должна быть длиннее тех же ~65 знаков, что и везде на сайте. */ .case-label { grid-area: 1 / 1 / 2 / 4; margin-bottom: 0; } .case-body { grid-area: 1 / 4 / 2 / 11; } /* Подглава: не решение и не правило, но по весу равна правилу. Кегль и цвет те же, что у «Rule 1», — иначе раздел читается как подпись к картинке и теряется между решениями. Переносы разрешены, в отличие от `.case-rule-num`: там строка всегда короткая — «Rule 1», «Rule 2», — а название подглавы длиннее колонки и без переноса вылезло бы за её край. */ .case-label--chapter { font-size: min(calc(var(--_typography---font-size--display-2) * 0.6), 6.6vw); line-height: 1; letter-spacing: var(--_typography---letter-spacing--heading-h2); /* Цвет тот же, что у номера правила и номера решения: серый. Подглава — это указатель на полях, а не заголовок в потоке. */ color: var(--colors--gray); } /* Номер решения: место и цвет здесь, кегль — в .case-bignum. */ .case-num { grid-area: 1 / 1 / 2 / 4; margin-bottom: 0; color: var(--colors--gray); } /* Ярлык правила — тем же серым, что и номера решений: правила важны не меньше, а подписью на полях они терялись. Кегль — 30% от номеров решений. В размер цифры слово «Rule» выглядело тяжелее, чем читалось, и не влезало в трёхколоночный ярлык целиком: «Rule» и цифра расходились на две строки, а ярлык из двух слов читается как одна метка. Уменьшен только множитель от токена. Потолок по ширине окна оставлен прежним намеренно: он вступает в силу примерно ниже 730px, и уменьшенный вдвое дал бы на телефоне 12px — мельче основного текста, что читается как сбой, а не как решение. На десктопе потолок не участвует, там ровно половина прежнего кегля. `nowrap` — гарантия одной строки, а не надежда на неё: при таком кегле «Rule 1» занимает около трети своей колонки на любой ширине. */ /* Два класса в селекторе намеренно: .case-bignum объявлен ниже по файлу и с одним классом перебивал бы этот кегль. */ .case-num.case-rule-num { font-size: min(calc(var(--_typography---font-size--display-2) * 0.6), 6.6vw); line-height: 1; white-space: nowrap; } /* --- шапка страницы ----------------------------------------- */ .case-eyebrow { margin-bottom: 0; font-size: var(--_typography---font-size--body); letter-spacing: normal; } .case-h1 { max-width: 16em; margin-bottom: 0; } .case-standfirst { grid-area: 1 / 4 / 2 / 11; margin-bottom: 0; font-size: var(--_typography---font-size--heading-h3); line-height: var(--_typography---font-height--heading-height); letter-spacing: var(--_typography---letter-spacing--heading-h3); font-weight: 400; color: var(--colors--matt-black); } /* --- параллакс в шапке -------------------------------------- */ /* Кадр стоит в окне с фиксированными пропорциями, а сам едет медленнее страницы. Сделано прокруткой-таймлайном в CSS: ни строчки JS, и это не мешает будущему переезду на GSAP. Где браузер таймлайн не поддерживает — кадр просто стоит на месте, вёрстка не ломается. */ .case-parallax { position: relative; width: 100%; overflow: hidden; } .case-parallax-inner { position: absolute; top: -8%; left: 0; right: 0; height: 116%; } /* Ловушка: overflow:hidden делает окно самостоятельным контейнером прокрутки, и безымянный view() цепляется к нему, а он никуда не прокручивается — анимация молча остаётся мёртвой. Поэтому таймлайн объявляется на самом окне и берётся по имени. */ @supports (animation-timeline: view()) { .case-parallax { view-timeline-name: --case-parallax; } .case-parallax-inner { animation: case-parallax linear both; animation-timeline: --case-parallax; animation-range: entry 0% exit 100%; } @keyframes case-parallax { from { transform: translate3d(0, -7%, 0); } to { transform: translate3d(0, 7%, 0); } } } @media (prefers-reduced-motion: reduce) { .case-parallax-inner { animation: none; } } .ph--fill { height: 100%; } /* Воздух между решениями — вдвое против шкалы. Разделитель у каждого решения свой: `spacing-140` первым ребёнком внутри `.case-decision`. На 140px решения читались слитно, одно наезжало на другое, страница выходила душной. Значение берётся удвоением токена, а не числом: так оно едет вместе со шкалой по брейкпоинтам — 280 на десктопе, 210 на ≤479, где сам токен ужимается до 105. Тот же приём, что у кегля 160px в подвале. */ .case-decision > .spacing-140:first-child, .case-chapter-gap { height: calc(2 * var(--_spacing---spacing-140)); } /* Обложка соседнего кейса в блоке перехода в конце страницы. Ширина — от `.case-body`, то есть ровно от блока с надписью и подчёркиванием, а не от страницы: это отдельная ссылка, стоящая над строкой перехода. Наезд при наведении тот же, что у панелей в списке работ: 500ms по outExpo, те же значения, что в интеракциях сайта. */ .case-next-cover { display: block; width: 100%; margin-top: var(--_spacing---spacing-20); /* ⚠️ `clip`, а не `hidden`: внутри лежит карточка с движением при прокрутке, а `hidden` сделал бы эту ссылку контейнером прокрутки и обездвижил бы её. Ловушка разобрана в разделе «карточки». */ overflow: clip; border-radius: var(--sizing--border-radius); text-decoration: none; } /* Кадр внутри лежит в коробке `.card-media` — она держит и наезд, и движение при прокрутке, общим правилом на все карточки сайта (раздел «карточки» ниже). Своих правил на картинку здесь больше нет: пока они были, наезд у обложки жил отдельно от наезда у карточек, и любая правка расходилась на две. */ /* --- полоса фактов ------------------------------------------ */ .case-facts { border-top: 1px solid var(--colors--matt-black); } .case-fact { display: grid; grid-template-columns: 3fr 9fr; column-gap: var(--_spacing---spacing-15); padding-top: var(--_spacing---spacing-10); padding-bottom: var(--_spacing---spacing-10); border-bottom: 1px solid var(--colors--matt-black); font-size: var(--_typography---font-size--body); } .case-fact > div:last-child { max-width: 52ch; } /* --- крупные цифры ------------------------------------------ */ /* Приём референса: мелкая подпись в скобках, под ней цифра. Все цифры здесь — про контекст работы: сколько групп пользователей, ролей, оснований, решений. Результата в цифрах у кейса нет, и появиться ему тут неоткуда. */ .case-stats { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--_spacing---spacing-15); row-gap: var(--_spacing---spacing-40); } /* Подпись и цифра выровнены по центру своей ячейки: цифры разной ширины, и по левому краю ряд выглядел бы рваным. */ .case-stat { text-align: center; } /* --- полоса цифр внутри главы ------------------------------- Полоса в шапке кейса — четыре числа во всю ширину, и `repeat(4, 1fr)` там честен: ячеек ровно столько, сколько колонок. Под главой в потоке всё иначе. Чисел бывает два или три, а сетка по-прежнему делит ширину на четыре, и числа садятся в левую половину страницы — не по сетке, а «куда-то влево», и ни к чему на странице не привязаны. Здесь полоса становится обычной ячейкой общей сетки и начинается там же, где текст главы, — с четвёртой колонки. Числа при этом пакуются от левого края, а не расходятся по ширине: заголовок главы и первое число выходят на одну вертикаль, и связь между ними видна без подписи. ⚠️ `flex`, а не `grid`: при трёх числах вроде «10+ 10 20+» суммарная ширина подходит к краю колонки вплотную, и на узком окне ряд обязан перенестись, а не вылезти за страницу. Перенос даёт `flex-wrap`, сетка из `max-content` дала бы горизонтальную прокрутку. */ .case-stats--column { grid-area: 1 / 4 / 2 / 13; display: flex; flex-wrap: wrap; gap: var(--_spacing---spacing-40) var(--_spacing---spacing-60); } .case-stats--column .case-stat { text-align: left; } /* Кегль меньше, чем у полосы во всю ширину, и это следствие места, а не вкуса. Полоса живёт в девяти колонках из двенадцати, а не в двенадцати: четыре числа вида «24 240 35+ 100+» в кегле 160 просят около 1150px при доступных 1050 и переносятся строкой 3 + 1 — ряд, который читается как сбой вёрстки. Множитель 1.3 против 2 у `.case-bignum` даёт 104px на десктопе: те же четыре числа укладываются в 810px и остаются крупными. Потолок по ширине окна пересчитан в той же пропорции. */ .case-stats--column .case-stat-value { font-size: min(calc(var(--_typography---font-size--display-2) * 1.3), 8.8vw); } .case-stat-label { margin-bottom: var(--_spacing---spacing-5); font-size: var(--_typography---font-size--body); letter-spacing: normal; } .case-stat-value { margin-bottom: 0; color: var(--colors--matt-black); /* Гарантия одной строки, а не надежда на неё — то же требование, что у номера правила. Диапазон `5–10` в кегле 160px просит около 390px, а колонка на 1440 даёт 341: браузер находит перенос по короткому тире, и полоса цифр становится вдвое выше соседней такой же. Ряд крупных чисел, где одно из них в две строки, читается как сбой вёрстки, а не как число. Переполнение безопасно: числа выровнены по центру своей ячейки, а соседние короче колонки на добрую сотню пикселей, так что выступающие края уходят в пустоту, а не в чужой текст. */ white-space: nowrap; } /* Один кегль на все крупные цифры страницы — тот же, что у ссылок в подвале: удвоенный display-2 с потолком по ширине окна. Держать их в одном размере важнее, чем подгонять каждую: номер решения и цифра статистики читаются как один язык. */ .case-bignum { font-size: min(calc(var(--_typography---font-size--display-2) * 2), 13.5vw); line-height: .9; letter-spacing: var(--_typography---letter-spacing--heading-h2); font-variant-numeric: tabular-nums; } /* --- конфликт ----------------------------------------------- */ .case-conflict { max-width: 20em; margin: 0 auto; font-size: var(--_typography---font-size--heading-h1); line-height: var(--_typography---font-height--heading-height); letter-spacing: var(--_typography---letter-spacing--heading-h2); color: var(--colors--matt-black); text-align: center; } /* --- правила и мост к индексу ------------------------------- */ .case-rule-title { max-width: 14em; } /* Строка-мост между правилами и индексом: связывает два принципа с их применениями. Кегль крупнее текста, но мельче заголовка — читается как реплика, а не как секция. */ .case-bridge { margin-bottom: 0; max-width: 34ch; font-size: var(--_typography---font-size--heading-h3); line-height: var(--_typography---font-height--heading-height); letter-spacing: var(--_typography---letter-spacing--heading-h3); font-weight: 400; color: var(--colors--matt-black); } /* --- индекс решений ----------------------------------------- */ .case-index { display: grid; grid-template-columns: 3fr 9fr; column-gap: var(--_spacing---spacing-15); } .case-index-mark { grid-column: 1; margin-bottom: 0; font-size: var(--_typography---font-size--body); letter-spacing: normal; } .case-index-title { grid-column: 2; margin: 0; font-size: var(--_typography---font-size--heading-h1); line-height: var(--_typography---font-height--heading-height); letter-spacing: var(--_typography---letter-spacing--heading-h2); font-weight: 400; color: var(--colors--matt-black); } .case-index-count { color: var(--colors--gray); } .case-index-list { grid-column: 1 / -1; margin: var(--_spacing---spacing-40) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--colors--matt-black); } /* Строка индекса — тот же язык, что у навигации в подвале: волосяная линия и заливка, выезжающая слева при наведении. */ .case-index-row { position: relative; display: grid; grid-template-columns: 3fr 7fr 1fr 1fr; align-items: baseline; column-gap: var(--_spacing---spacing-15); padding: var(--_spacing---spacing-15) 0; border-bottom: 1px solid var(--colors--matt-black); color: var(--colors--matt-black); text-decoration: none; overflow: hidden; } /* ⚠️ Подложка светлая, и это не недосмотр контраста. Проверено решением заказчика 09.09.2026: чёрная заливка с белым текстом была заведена и в тот же вечер снята — строка оглавления не должна перебивать собой то, к чему ведёт. Реакция здесь подсказка, а не событие. Возвращать чёрное нельзя. */ .case-index-row:before { content: ""; position: absolute; inset: 0; background-color: var(--colors--cloud-white); transform: translate3d(-101%, 0, 0); transition: transform 500ms cubic-bezier(.19, 1, .22, 1); } .case-index-row:hover:before { transform: translate3d(0, 0, 0); } .case-index-num, .case-index-text, .case-index-note, .case-index-arrow { position: relative; } .case-index-num { padding-left: var(--_spacing---spacing-15); color: var(--colors--granite-gray); font-variant-numeric: tabular-nums; } .case-index-text { font-size: var(--_typography---font-size--heading-h3); line-height: var(--_typography---font-height--heading-height); letter-spacing: var(--_typography---letter-spacing--heading-h3); } /* Пометка «пришло от пользователей» — половина работы пришла из реального спроса, половина из анализа, и читатель обязан уметь отличить одно от другого. */ .case-index-note { color: var(--colors--granite-gray); font-size: var(--_typography---font-size--small); letter-spacing: normal; text-align: right; } .case-index-arrow { padding-right: var(--_spacing---spacing-15); text-align: right; transition: transform 500ms cubic-bezier(.19, 1, .22, 1); } .case-index-row:hover .case-index-arrow { transform: translate3d(6px, 0, 0); } /* Прыжок по якорю не должен упирать заголовок решения в край окна. */ .case-decision { scroll-margin-top: var(--_spacing---spacing-60); } /* --- свёрнутый блок с контекстом ---------------------------- */ .case-details { border-top: 1px solid var(--colors--matt-black); } .case-details-head { display: flex; justify-content: space-between; align-items: center; padding: var(--_spacing---spacing-15) 0; border-bottom: 1px solid var(--colors--matt-black); cursor: pointer; list-style: none; } .case-details-head::-webkit-details-marker { display: none; } .case-details-title { font-size: var(--_typography---font-size--heading-h3); line-height: var(--_typography---font-height--heading-height); letter-spacing: var(--_typography---letter-spacing--heading-h3); color: var(--colors--matt-black); } /* Подпись под заголовком свёрнутого блока. Видна в свёрнутом состоянии и именно там нужна: она говорит, что внутри и сколько это читать, — то есть отвечает на вопрос «разворачивать ли». */ .case-details-sub { display: block; margin-top: var(--_spacing---spacing-5); font-size: var(--_typography---font-size--small); line-height: 1.5; letter-spacing: normal; } /* Знак раскрытия рисуется линиями: плюс превращается в минус поворотом одной палочки. */ .case-details-sign { position: relative; width: 14px; height: 14px; flex: none; } .case-details-sign:before, .case-details-sign:after { content: ""; position: absolute; background-color: var(--colors--matt-black); transition: transform 500ms cubic-bezier(.19, 1, .22, 1); } .case-details-sign:before { inset: 6px 0; height: 1px; } .case-details-sign:after { inset: 0 6px; width: 1px; } .case-details[open] .case-details-sign:after { transform: scaleY(0); } .case-details-body { padding-bottom: var(--_spacing---spacing-40); } /* Раскрытие анимировано, а не мгновенно: видно, что откуда выехало и куда сложилось обратно. Родной

так не умеет, поэтому высота едет через ::details-content — блок, которым браузер оборачивает содержимое. Время и кривая те же, что у остальной анимации сайта: 500ms и outExpo из IX2. Где браузер этого не умеет, блок открывается мгновенно — работоспособность от анимации не зависит. */ @supports (interpolate-size: allow-keywords) { .case-details { interpolate-size: allow-keywords; } .case-details::details-content { height: 0; overflow: hidden; opacity: 0; transition: height 500ms cubic-bezier(.19, 1, .22, 1), opacity 400ms cubic-bezier(.19, 1, .22, 1), content-visibility 500ms allow-discrete; } .case-details[open]::details-content { height: auto; opacity: 1; } /* Содержимое всплывает следом за высотой, а не появляется разом: сначала едет коробка, потом проявляются блоки. Тот же приём, что у появления блоков на главной при первой загрузке. */ .case-details-body > * { opacity: 0; transform: translate3d(0, var(--_spacing---spacing-20), 0); transition: opacity 500ms cubic-bezier(.19, 1, .22, 1), transform 500ms cubic-bezier(.19, 1, .22, 1); } .case-details[open] .case-details-body > * { opacity: 1; transform: translate3d(0, 0, 0); } /* Лесенка: блоки проявляются друг за другом, и по ней читается порядок — сверху вниз при открытии, снизу вверх при закрытии. */ .case-details[open] .case-details-body > *:nth-child(2) { transition-delay: 80ms; } .case-details[open] .case-details-body > *:nth-child(3) { transition-delay: 160ms; } .case-details[open] .case-details-body > *:nth-child(4) { transition-delay: 240ms; } .case-details[open] .case-details-body > *:nth-child(5) { transition-delay: 320ms; } .case-details[open] .case-details-body > *:nth-child(6) { transition-delay: 400ms; } } @media (prefers-reduced-motion: reduce) { .case-details::details-content, .case-details-body > * { transition: none; } } /* --- списки ------------------------------------------------- */ .case-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--colors--matt-black); } .case-list li { padding-top: var(--_spacing---spacing-10); padding-bottom: var(--_spacing---spacing-10); border-bottom: 1px solid var(--colors--matt-black); max-width: 52ch; color: var(--colors--matt-black); } /* Точка вместо маркера — приём референса. */ .case-list--dotted li { position: relative; padding-left: var(--_spacing---spacing-20); } .case-list--dotted li:before { content: ""; position: absolute; left: 0; top: calc(var(--_spacing---spacing-10) + .55em); width: 4px; height: 4px; border-radius: 50%; background-color: var(--colors--matt-black); } /* --- решения: заголовок, Rejected, trade-off ---------------- */ .case-decision-title { margin-top: 0; margin-bottom: var(--_spacing---spacing-20); font-size: var(--_typography---font-size--heading-h3); line-height: var(--_typography---font-height--heading-height); letter-spacing: var(--_typography---letter-spacing--heading-h3); font-weight: 400; color: var(--colors--matt-black); } /* Ярлык-пилюля. Референс: 14px, padding 3/5, радиус 8, рамка в цвет текста. Радиус — единственное значение мимо токена: у сайта --sizing--border-radius равен нулю, а без скругления пилюля перестаёт читаться как ярлык. */ .case-tag { display: inline-block; margin-bottom: var(--_spacing---spacing-10); padding: 3px var(--_spacing---spacing-5); border: 1px solid currentColor; border-radius: 8px; color: var(--colors--granite-gray); font-size: var(--_typography---font-size--small); letter-spacing: normal; text-transform: uppercase; } /* --- Цвет метки по её роли -------------------------------------- Отвергнутое — красным, принятое — зелёным, пришедшее от пользователей — синим. Рамка и текст, без заливки: пилюля остаётся лёгкой, а на плотной странице заливка читалась бы как кнопка. ⚠️ Цвет здесь избыточен, а не обязателен: в каждой метке роль написана словом. Это то же требование, что кейс предъявляет к своему гриду в решении 07, — информация не должна зависеть от цвета одного. Нарушать его на собственной странице нельзя. Значения выбраны под контраст на белом: 5.9, 6.6 и 6.3 к одному, то есть с запасом к порогу 4.5 для обычного текста. В библиотеке сайта таких цветов нет — она вся нейтральная, поэтому переменные заводятся здесь и только для меток. */ :root { --case-tag--rejected: #b3261e; --case-tag--chosen: #166534; --case-tag--requested: #1d4ed8; --case-tag--tradeoff: #92400e; } .case-rejected > .case-tag, .case-prior > .case-tag:not(.case-tag--neutral), .case-versus-side--rejected > .case-tag { color: var(--case-tag--rejected); } .case-tag--chosen { color: var(--case-tag--chosen); } .case-tradeoff > .case-tag { color: var(--case-tag--tradeoff); } /* Связь с правилом — тоже зелёным: это принятое решение, а не отвергнутое. Красного на странице и без того много: блоков альтернатив семнадцать, а связок с правилами двенадцать. */ .case-rule-link > .case-tag { color: var(--case-tag--chosen); } /* Боковая линия блока идёт в цвет его метки: связь метки с абзацем держится не только соседством. */ .case-rejected { border-left-color: var(--case-tag--rejected); } .case-tradeoff { border-left-color: var(--case-tag--tradeoff); } .case-rule-link { border-left-color: var(--case-tag--chosen); } .case-prior:has(> .case-tag:not(.case-tag--neutral)) { border-left-color: var(--case-tag--rejected); } /* Метка на заголовке решения: пришло от пользователей или из собственного анализа. Стоит рядом с заголовком, а не под ним — иначе теряется при беглом чтении. */ .case-tag--requested { margin-left: var(--_spacing---spacing-10); margin-bottom: 0; vertical-align: middle; color: var(--case-tag--requested); } /* Блоки-сноски на полях: от чего отказались, чем заплатили, как решение связано с правилом. Боковая линия отделяет их от основного текста, не превращая в ещё один абзац. */ .case-rejected, .case-tradeoff, .case-rule-link { margin-top: var(--_spacing---spacing-30); padding-left: var(--_spacing---spacing-20); border-left: 1px solid var(--colors--matt-black); max-width: 52ch; } /* Текст, идущий ПОСЛЕ бокового блока, получает тот же отступ, что боковой блок получает сверху. Иначе абзац прилипает к его нижней кромке: у блока ровный низ и нулевая нижняя маржа у последнего абзаца, и разделителя не остаётся вовсе. Заметно это стало не сразу: у `.case-modes` низ рваный — три колонки разной высоты, — и воздух там появляется сам собой. У бокового блока низ ровный, и та же нулевая маржа читается как склейка. Значение то же, что и сверху: боковой блок живёт в своём конверте в 30px с обеих сторон, а не приклеен к тому, что под ним. */ .case-rejected + .work-rich-text, .case-tradeoff + .work-rich-text, .case-rule-link + .work-rich-text, .case-prior + .work-rich-text { margin-top: var(--_spacing---spacing-30); } .case-rejected p:last-child, .case-tradeoff p:last-child, .case-rule-link p:last-child { margin-bottom: 0; color: var(--colors--matt-black); font-weight: 400; letter-spacing: normal; } /* --- три цветовых режима ------------------------------------ */ /* Режимы стоят в ряд, а не списком: их и выбирают сравнением. Волосяная линия сверху отделяет таблицу от текста решения. */ .case-modes { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--_spacing---spacing-15); row-gap: var(--_spacing---spacing-20); margin-top: var(--_spacing---spacing-30); padding-top: var(--_spacing---spacing-15); border-top: 1px solid var(--colors--matt-black); } /* Четыре карточки вместо трёх: формы цветовой слепоты, под которыми проверялись режимы. Карточки короче, чем у режимов, поэтому на планшете они складываются в две колонки, а не в одну — четыре коротких абзаца столбиком занимают пол-экрана ни за чем. ⚠️ Селектор двойной, `.case-modes.case-modes--four`, а не одиночный. Ниже по файлу есть правило `≤991 { .case-modes: 1fr }` для блока режимов, и при равной специфичности побеждало бы оно — просто потому что стоит позже. Двойной класс снимает зависимость от порядка строк. */ .case-modes--four { grid-template-columns: repeat(4, 1fr); } @media screen and (max-width: 991px) { .case-modes.case-modes--four { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 479px) { .case-modes.case-modes--four { grid-template-columns: 1fr; } } .case-mode p { margin-bottom: var(--_spacing---spacing-5); color: var(--colors--matt-black); font-weight: 400; letter-spacing: normal; } .case-mode p:last-child { margin-bottom: 0; } .case-mode-name { font-size: var(--_typography---font-size--body); } /* Пара цветов подписана словами, а не образцами: образцы пришлось бы выдумывать точными значениями, а их на странице быть не должно. */ .case-mode-pair { font-size: var(--_typography---font-size--small); } /* --- визуалы, пары и сравнение ------------------------------ */ .case-figure { margin: 0; } /* ⚠️ Настоящее медиа кейса не кадрируется коробкой. `.media-block` в шаблоне — это `object-fit: cover` плюс `height: 100%`: всё, что не совпало с пропорцией коробки, срезается. А коробка едет с заглушки классом `aspect-ratio-*`, который шаблон переопределяет по брейкпоинтам: 1.74 → 1.45 на ≤991 → 1.22 на ≤479. Для декоративной картинки это и задумано, для снятого интерфейса — нет: у кадра 2582×1440 на планшете уходила пятая часть ширины, у портретного скриншота 938×1088 в коробке 1.74 — половина высоты. Пропорцию теперь задаёт сам файл: сборщик пишет её инлайном, и `cover` становится тождественным. Класс остаётся страховкой на случай, если размер прочитать не удалось, и коробкой для самой заглушки — своего размера у неё нет. Обложка (`ph--fill` внутри `.case-figure--full`) под правило не попадает: там медиа намеренно заполняет параллакс-блок. */ .case-figure > .media-block { height: auto; } /* Визуал от чужого плеера. Коробка нужна по той же причине, что и медиа, только жёстче: у iframe своего размера нет вовсе, без пропорции он схлопывается в строку. Пропорцию пишет сборщик из content/embeds.json. */ .case-embed { position: relative; width: 100%; overflow: hidden; border-radius: var(--sizing--border-radius); background: var(--_colors---matt-black); } .case-embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Портрет шириной колонки не растягивается: мокап телефона во всю ширину даёт полтора экрана высоты и ломает ритм страницы. Ему задаётся своя ширина, высоту считает пропорция, место в колонке — по центру. ⚠️ Ширина именно определённая, а не `auto`: картинки грузятся лениво, а у незагруженной `width: auto` даёт ноль. Коробка схлопывалась бы до нуля и распрямлялась в момент загрузки — прыжок раскладки ровно там, где блок появляется при прокрутке. */ .case-figure > .media-block--portrait { display: block; width: min(100%, 560px); margin-left: auto; margin-right: auto; } /* --- ПРОБА, 08.09.2026: увеличение кадра под курсором ----------- Как рассматривают ткань в магазине одежды: навёл — кадр плавно вырос вдвое, ведёшь мышкой — видимая область едет за курсором. Растёт кадр внутри своей рамки, на весь экран ничего не раскрывается. Обязанности разделены: масштаб и переход держит стиль, точку роста двигает content/zoom.js. Порядок именно такой, потому что увеличение не должно зависеть от скрипта: не доехал файл — кадр всё равно растёт, просто от середины. Обратный порядок дал бы мёртвую рамку. ⚠️ Коробка не имеет ни своих полей, ни своей пропорции, ни своего фона. Она обжимает картинку по факту, и это условие правильной работы: скрипт считает курсор в процентах от коробки, а картинка отсчитывает точку роста от собственного бокса. Разойдутся — кадр поедет не туда, куда ведут мышкой. ⚠️ Кадром считается и картинка, и луп: на MRP они стоят вперемешку в одном рассказе, и правила у них одни. Селекторы поэтому парные — `img` и `video`; пропорцию и заливку коробки держит общий `.case-zoom > .media-block`, класс есть и у тех, и у других. ⚠️ Всё увеличение — внутри `@media (hover: hover) and (pointer: fine)`. На тач-экране `:hover` залипает после касания: кадр остался бы увеличенным навсегда, а сдвинуть его нечем — курсора нет. */ .case-zoom { display: block; overflow: hidden; } /* Высоту картинка считает по своей пропорции — то же, что делало правило для прямого ребёнка фигуры, пока коробки между ними не было. ⚠️ `display: block` обязателен. Картинка в шаблоне — `inline-block`, а такая сидит на базовой линии строки, и под ней остаётся 4–5px пустоты. Коробка кроится по картинке, и эти пиксели разошлись бы между её низом и низом кадра — а расхождение коробки с картинкой уводит точку роста, см. шапку раздела. */ .case-zoom > .media-block { display: block; height: auto; } /* Внутри параллакс-окна наоборот: подвижный слой выше окна на 16%, и кадр обязан занять его целиком — иначе поедет пустота. */ .case-parallax-inner > .case-zoom, .case-parallax-inner > .case-zoom > .media-block { height: 100%; } /* Портрет: предельная ширина и центрирование перешли с картинки на коробку, причина — в `zoomFigures`. Значение то же, что у `.case-figure > .media-block--portrait`, и меняться они обязаны вместе. */ .case-figure > .case-zoom--portrait { width: min(100%, 560px); margin-left: auto; margin-right: auto; } @media (hover: hover) and (pointer: fine) { /* Коробка — система координат для подсказки. Кадр внутри не позиционируется, поэтому на раскладку это не влияет. */ .case-zoom { position: relative; cursor: zoom-in; } .case-zoom.is-zoomed { cursor: zoom-out; } /* 600ms — столько, чтобы движение читалось как приближение, а не как подмена кадра. Кривая симметричная, `ease-in-out`: заказчик просил именно её, и для парного движения «вырос — вернулся» она правильнее односторонней. */ .case-zoom > img, .case-zoom > video { transition: transform 600ms cubic-bezier(.42, 0, .58, 1); } /* Состояние ставит скрипт по щелчку. Наведения здесь намеренно нет: курсор проходит по кадру на пути к тексту, и кадр дёргался бы сам по себе. Щелчок — это намерение. */ .case-zoom.is-zoomed > img, .case-zoom.is-zoomed > video { transform: scale(2); } /* Точку роста двигает скрипт, и делает это без перехода — намеренно. Переход на `transform-origin` превратил бы панораму в догоняющую: курсор уже там, кадр ещё едет. Под курсором должно оставаться то, что под ним и было. */ /* --- подсказка ------------------------------------------- Пилюля в углу кадра. До щелчка говорит, что кадр кликабельный; после — что можно вести мышкой и чем закрыть. Одно место, одна форма, меняется только содержимое: две подсказки в разных углах читались бы как два разных элемента интерфейса. ⚠️ `pointer-events: none` обязателен: пилюля лежит поверх кадра, и без этого щелчок по ней не доходил бы до коробки — то есть ровно в том углу, куда человек смотрит, кадр бы не закрывался. Форма и кегль — от `.case-tag`: это тот же жанр, метка на кадре, и заводить ей второй вид незачем. Отличие одно — заливка: метка стоит на белом поле страницы, а пилюля на самом снимке, и без подложки она читалась бы через раз. */ .case-zoom-hint { position: absolute; right: var(--_spacing---spacing-15); bottom: var(--_spacing---spacing-15); display: grid; pointer-events: none; opacity: 0; transition: opacity 300ms cubic-bezier(.42, 0, .58, 1); } .case-zoom:hover .case-zoom-hint, .case-zoom.is-zoomed .case-zoom-hint { opacity: 1; } /* Обе подсказки лежат в одной ячейке грида друг на друге: пилюля не меняет размер при переключении и не дёргает угол кадра. */ .case-zoom-hint-state { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--_spacing---spacing-5); padding: 3px var(--_spacing---spacing-10); border-radius: 8px; background: var(--colors--matt-black); color: var(--colors--cloud-white); font-size: var(--_typography---font-size--small); line-height: 1.4; letter-spacing: normal; white-space: nowrap; transition: opacity 200ms linear; } .case-zoom-hint-state svg { width: 1em; height: 1em; flex: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .case-zoom-hint-state--move { opacity: 0; } .case-zoom.is-zoomed .case-zoom-hint-state--in { opacity: 0; } .case-zoom.is-zoomed .case-zoom-hint-state--move { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .case-zoom > img, .case-zoom > video { transition: none; } } /* Первый кадр страницы идёт во всю ширину, без полей по бокам: нужен эффект без границ, кадр упирается в края окна. Снимаются ровно поля контейнера, а не 100vw: при вертикальной полосе прокрутки 100vw шире страницы и даёт горизонтальный скролл. */ .case-figure--full { margin-left: calc(-1 * var(--sizing--padding-global)); margin-right: calc(-1 * var(--sizing--padding-global)); } /* Подпись под ним поля возвращает себе: у самого края её не прочитать. */ .case-figure--full .case-caption { padding-left: var(--sizing--padding-global); padding-right: var(--sizing--padding-global); } /* Одиночный визуал идёт во всю ширину, как обложка: если в ряду он один, полям контейнера его держать незачем. Кадры, стоящие в ряду по двое или по трое, поля сохраняют — они делят ширину между собой. ⚠️ Правило написано через родителя, а не через исключения. Одиночный кадр лежит прямо в потоке — в `.container` или внутри решения; кадры в ряду лежат в своей сетке, `.case-pair` или `.case-small-grid`. Перечислять сетки в исключениях нельзя: первая же версия так и делала, забыла про `.case-small-grid`, и три кадра в ряду наехали друг на друга по 15px. Появится новая сетка — она не попадёт под правило сама собой. Снимаются ровно поля контейнера, а не 100vw: при вертикальной полосе прокрутки 100vw шире страницы и даёт горизонтальный скролл. */ .container > .case-figure, .case-decision > .case-figure { margin-left: calc(-1 * var(--sizing--padding-global)); margin-right: calc(-1 * var(--sizing--padding-global)); } /* Подпись поля возвращает себе: у самого края её не прочитать. */ .container > .case-figure > .case-caption, .case-decision > .case-figure > .case-caption { padding-left: var(--sizing--padding-global); padding-right: var(--sizing--padding-global); } /* Два визуала в одну строку: связанные кадры читаются вместе, а не по очереди через полтора экрана прокрутки. */ .case-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--_spacing---spacing-15); row-gap: var(--_spacing---spacing-40); align-items: start; } /* Сравнение принятого с отвергнутым. Отвергнутая сторона приглушена: разница должна читаться до того, как прочитан ярлык. При наведении возвращается в полную силу. */ .case-versus { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--_spacing---spacing-15); row-gap: var(--_spacing---spacing-40); align-items: start; } .case-versus-side--rejected { opacity: .5; transition: opacity 500ms cubic-bezier(.19, 1, .22, 1); } .case-versus-side--rejected:hover { opacity: 1; } /* --- подписи ------------------------------------------------ */ /* Подпись у всех визуалов одна и та же: один класс, один кегль, по центру под кадром. Разнобой в подписях читается как недоделка, поэтому второго уровня здесь нет. Одиннадцать из них — рельс из спецификации: прочитанные подряд, они складываются в связный рассказ. */ .case-caption { display: block; margin: var(--_spacing---spacing-15) auto 0; max-width: 52ch; color: var(--colors--matt-black); font-size: var(--_typography---font-size--heading-h3); line-height: var(--_typography---font-height--heading-height); letter-spacing: var(--_typography---letter-spacing--heading-h3); text-align: center; } .case-caption strong { color: var(--colors--matt-black); font-weight: 400; } /* Подпись под сравнением относится к обоим кадрам сразу, поэтому стоит под всей парой. */ .case-caption--versus { margin-top: var(--_spacing---spacing-30); } .case-small-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--_spacing---spacing-15); row-gap: var(--_spacing---spacing-40); } /* --- заглушки под несобранные визуалы ----------------------- */ /* Временные. Пропорции настоящие — по ним видно масштаб и место в раскладке. Внутри три части подряд: имя файла с форматом, что показываем, как снимать. Когда визуал готов, блок .ph заменяется на или