/* ═══════════════════════════════════════════════════════════════════ Версия 3 — примерка стиля jasonfaber.ca/about на содержание Максима. Файлы v1 (site.css) и v2 (site2.css) не тронуты. Снято с оригинала (Webflow-CSS jason-faber-consulting.webflow.shared.css): фон страницы #EEF5F5 --white-smoke тёмный #0E2B2F --dark-slate-grey: текст, шапка, первый экран, таймлайн, тёмные карточки, тёмная кнопка терракота #DB9365 --dark-salmon: подчёркивание в заголовке, точки и заливка линии таймлайна, текстовые ссылки, оранжевая карточка бирюза #73CFD0 --medium-turquoise: иконки, синяя карточка, синяя кнопка, ховер тёмной кнопки серый текст rgba(14,43,47,.6); приглушённый белый rgba(255,255,255,.6) линии rgba(14,43,47,.1) на светлом, rgba(255,255,255,.3 / .1) на тёмном Satoshi (у него self-hosted woff2, у нас Fontshare), всё начертанием 500: body 16/24 · h1 72/100% · h2 52/120% · h3 40/120% · h4 32/140% h5 24/140% · h6 20/120% · large-text 20/150% · medium-text 18/160% подпись секции (.title) 24/120% серым · eyebrow 14 капсом, .05em большая цифра 120 (в карточке) и 72 (в метриках) Адаптив: ≤991 body 15, h1 56, h2 44, h3 36, h4 28, h5 22 ≤767 body 14, h1 48, h2 36, h3 32, h4 24, h5 20 · ≤479 h1 42 Контейнер 1360 + поля 40 (≤991: 32, ≤767: 24, ≤479: 16) Секция 120/120 (≤991: 100), большая секция 140, футер 80/120 Сетки: split 2 колонки, зазор 64; three-column 16×60; panels 16 Карточки: радиус 30, паддинг 40 (≤479: радиус 20, паддинг 24) Картинки: радиус 30 (corners) и 20 (smaller-corners) Кнопки: радиус 8, паддинг 16×24; иконочная 24×32; ховер — внутренняя тень Ссылки без подчёркивания; акцентные — терракотой; в заголовке слово выделено терракотовой плашкой снизу (у него svg-прямоугольник фоном) Иллюстрации, фото, SVG-графика, логотип и тексты оригинала не использованы. Цвета (03.09, шестая правка) вынесены в переменные на :root — ни одного литерала ниже по файлу. Действующая палитра описана следующим блоком; от jasonfaber в ней не осталось ни одного значения, снята только структура переменных. Запасные схемы переопределяют те же переменные в themes-2026.css через html[data-theme="…"]. Заглушки иллюстраций и иконки в HTML красятся классами (.g-a / .g-b / .g-ink, .ph-a / .ph-b / .ph-ink / .ph-text, .card__icon) — заливка задаётся здесь, а не атрибутом fill. ═══════════════════════════════════════════════════════════════════ */ /* ── Палитра: «Мята на бежевом», примерка 05.09.2026 ───────────────── Референс: nominal.so/our-platform. Схема, которая сменила «Лайм на белом» (supadupa.nl): та строилась на одном ярком цвете и тёмном хвойном, эта — на двух почти неразличимых бежевых холстах, одном мятном акценте и почти чёрных чернилах. Приёмы супадупы (свечение обложки, вторая пара в середине страницы, тон-в-тон на тёмном) в комментариях ниже помечены отдельно: часть из них схема сохранила, часть отменила. Замер computed styles живой страницы nominal.so (те же две выборки, что делались по супадупе: цвета фонов по площади и по числу узлов, цвет текста, заливки svg, цвета рамок): холст #FDFFF8 body, тёплый почти-белый с зеленцой полоса #F3F7EB девять узлов, зеленоватый беж — вторая плоскость волосяная #E0EADD 83 узла — единственная линия на всём сайте мята #B2EEDC плашка выделенной строки таблицы яркая мята #5ADEB7 рамка карточки, плитка под иконкой барвинок #B5C4F5 вторая тинтованная карточка сливочный #F9EBA6 третья холодный серый #EAEFF2 четвёртая, единственная не тёплая чернила #151414 156 узлов текста и самая большая тёмная плоскость приглушённый #5A5A5A (47 узлов) и #767676 (22) тёмная кнопка #30363C ── Что здесь холст, а что акцент ──────────────────────────────── У nominal ярких цветов пять, и все пять — размером с плашку: строка таблицы, рамка, плитка 40×40 под иконкой. Ни один не выходит на площадь. Площадь держат два бежевых, отличающиеся друг от друга на 1.08 по яркости: #FDFFF8 и #F3F7EB — глаз читает их не как «два цвета», а как свет и тень одного листа. Поэтому здесь ровно та же раскладка, что была у лайма, но с заменой белого на тёплый и серого на зеленоватый: холст #FDFFF8, секции без модификатора полоса #F3F7EB, через секцию (правило на #how / #work / #experience / #toolkit) карточки белые #FFFFFF с волосяной обводкой — на бежевой полосе белый лист читается листом, на холсте его держит обводка мята плашки, миниатюры кейсов, кнопка обложки, панель отзыва чернила обложка, блок опыта, тёмные плашки тегов Разница с лаймовой редакцией одна и принципиальная: там акцент был единственным и кричащим (лайм #D3F773 на 12% высоты), здесь акцентов пять и все приглушённые. Отсюда «мягче и нейтральнее». ── Приёмы, которые схема отменила ─────────────────────────────── Тон-в-тон на тёмном (лайм на хвойном) снят: у nominal на чёрном лежит тот же тёплый почти-белый #FDFFF8, что и на холсте, — то есть ровно классическая выворотка. Поэтому --panel-dark-ink здесь холст, а не мята: мята на чернилах даёт 11.0 и формально прошла бы, но она вернула бы ту самую «цветную» ноту, ради ухода от которой схема и менялась. Свечение подвала (радиальное пятно под футером) и вуаль под шапкой (тёмный градиент на высоту меню) убраны по прямой просьбе — правила .footer--full и .navbar::before ниже по файлу. Вместе с вуалью пришлось опустить верхнее свечение обложки: оно и было причиной вуали — самой яркой частью приходилось ровно на строку меню. Теперь пятно начинается ниже шапки, и меню лежит на ровных чернилах без всякой подложки. Вторая пара в середине страницы (у лайма — умбра с оранжевым текстом) сохранена, но развёрнута: вместо тёмного поля с цветным текстом — светлое мятное поле с обычными чернилами, 14.15. Это единственная цветная плоскость страницы крупнее плашки, и она же — тот самый «мятный блок». Контраст на #FDFFF8 и на #F3F7EB: текст 18.24 / 16.91 · приглушённый 5.14 / 5.01 · --accent-text 7.15 / 6.62 · --icon 7.15 / 6.62. На чернилах: холст 18.24 · приглушённый холст 9.73 · мята 11.0. Чернила на плашках: мята 14.15 · барвинок 10.66 · сливочный 15.29 · холодный серый 15.87 · яркая мята 11.0. Волосяная #E0EADD: на холсте 1.23, на полосе 1.14 — линия, а не штрих. */ :root { /* Пять замеренных тинтов nominal вынесены именами: ниже роли ссылаются на них, а не на литералы, и видно, что роль берёт цвет референса, а не подобранный на глаз. */ --mint: #B2EEDC; /* мятная плоскость: панель отзыва, плашки, слоты кейсов */ --mint-bright: #5ADEB7; /* яркая мята: кнопка обложки, точки и линия таймлайна, наведение */ --peri: #B5C4F5; /* барвинок */ --butter: #F9EBA6; /* сливочный */ --cool: #EAEFF2; /* холодный серый: единственный не тёплый тинт */ /* базовые */ --bg: #FDFFF8; /* холст страницы */ --bg-alt: #F3F7EB; /* вторая полоса: секции через одну, правило ниже по файлу */ --ink: #151414; /* основной текст: 18.24 на холсте */ --muted: rgba(21, 20, 20, .62); /* приглушённый: .62 даёт #6D6D6B — ровно между замеренными #5A5A5A и #767676 */ --accent: var(--mint-bright); /* декор: заливка таймлайна, точки сцены, наведение на пункт меню, кнопка обложки */ --accent-text: #14634B; /* текстовый акцент: единственный цвет схемы, которого у nominal нет. Мята на бежевом даёт 1.29 и текстом быть не может; взята она же, уведённая в тень до 7.15 на холсте и 6.62 на полосе */ --accent-2: var(--peri); /* барвинок: плашка тега, вторая заливка иконок кейсов */ /* тёмные панели: шапка, первый экран, блок опыта, мобильное меню */ --panel-dark: var(--ink); --panel-dark-ink: var(--bg); /* классическая выворотка холстом, см. «приёмы, которые схема отменила» */ --panel-dark-muted: rgba(253, 255, 248, .72); /* 9.73 */ --panel-dark-faint: rgba(253, 255, 248, .62); --panel-ring: none; /* рамка тёмных панелей (inset box-shadow), нужна только тёмной теме */ /* Светлые карточки: кейсы, панель практики. Белые, а не холст: холст сам тёплый, и карточка обязана отличаться от полосы, на которой лежит. Обводка волосяная, цветом линии — у nominal рамка карточки ровно такая. */ --card: #FFFFFF; --card-ring: inset 0 0 0 1px var(--line); /* линии */ --line: #E0EADD; /* замер: единственная линия на всём референсе, 83 узла */ --line-on-dark: rgba(253, 255, 248, .28); --line-on-dark-faint: rgba(253, 255, 248, .14); /* плоские заглушки иллюстраций и иконки */ --illus-a: var(--mint-bright); /* крупная заливка. Значение на :root работает на графике обложки, то есть на чернилах: 11.0. Девять кейсов ниже переопределяют пару сами */ --illus-b: var(--peri); /* второй цвет, там же: 10.7 на чернилах */ --illus-ink: var(--panel-dark); /* тёмные фигуры */ --illus-text: var(--ink); /* подпись id в заглушке */ --illus-bg: var(--mint); /* фон слота под иллюстрацию в карточке кейса; девять карточек ниже меняют тинт */ --icon: var(--accent-text); /* иконки «How I work»: лежат на полосе, 6.62 */ /* акцентные заливки — отдельными переменными, чтобы тема могла подставить градиент */ --tl-fill: var(--mint-bright); /* заливка линии таймлайна: полоса цвета на бежевом читается сменой тона, а не яркости */ --dot-bg: var(--panel-dark); /* точка таймлайна: фон и обводка */ --dot-border: var(--mint-bright); --focus: var(--accent-text); /* фокус-рамка: барвинок на холсте даёт 1.7 и рамкой быть не может */ /* кнопки */ --btn-primary-bg: var(--mint-bright); /* кнопка первого экрана (.btn--blue): яркая мята на чернилах, 11.0 */ --btn-primary-ink: var(--ink); --btn-primary-hover: rgba(0, 0, 0, .1); --btn-dark-bg: var(--panel-dark); /* тёмная кнопка, Close в карточках, кружки соцсетей */ --btn-dark-ink: var(--panel-dark-ink); --btn-dark-hover: rgba(90, 222, 183, .28); /* Светлая кнопка: Get in touch в шапке, Download CV в подвале. Холодный серый явно, а не var(--card): карточки белые, и на тёплом холсте подвала белая кнопка исчезла бы. Это же значение — фон наведения светлых управляющих элементов ниже по файлу. */ --btn-light-bg: var(--cool); --btn-light-ink: var(--ink); --btn-light-hover: rgba(21, 20, 20, .12); /* прочее */ --photo-bg: rgba(255, 255, 255, .06); /* подложка портрета, пока картинка не загрузилась */ /* затемнение под крупным планом кадра. Второй строкой — тон тёмной панели темы, чтобы слой не выпадал из палитры; первая остаётся браузерам без color-mix */ --scrim: rgba(0, 0, 0, .88); --scrim: color-mix(in srgb, var(--panel-dark) 92%, transparent); /* плашка под рисованным портретом первого экрана: лежит на чернилах обложки */ --illus-plate: var(--mint); /* Вордмарк в шапке — холстом, тем же почти-белым, что и текст на тёмных панелях. Исходник (vector.svg на Tilda CDN) залит сплошным #dfdfdf, поэтому brightness(0) гасит его в чёрный, а цепочка выводит из чёрного нужный тон. Цепочка не подобрана на глаз: матрицы feColorMatrix и feComponentTransfer из filter-effects-1 посчитаны, результат ровно #FDFFF8. Пересчитать под другой цвет: python3 solve-logo-filter.py "#RRGGBB". Альфа-канал фильтры не трогают, сглаживание знака не страдает. */ --logo-filter: brightness(0) invert(.541) sepia(.285) saturate(.288) hue-rotate(37.7deg) brightness(1.644) contrast(1.12); /* Логотипы сервисов — ровно та же механика, что на действующем kottov.net (Tilda-блок t595): в покое grayscale(100%) при opacity .5, на наведении цвет и полная непрозрачность. В тёмной схеме цвет не возвращается — там знак только светлеет, см. site3-themes.css. */ --tools-filter: grayscale(1); /* ряд логотипов сервисов, покой */ --tools-filter-hover: none; /* наведение */ --tools-ink: .7; /* на бежевой полосе знак при .5 проваливается */ --tools-ink-hover: 1; --sans: 'Satoshi', 'Helvetica Neue', Arial, sans-serif; /* ── скругления: одна шкала на всю страницу и на все ширины ── 04.09.2026. До этого радиусы разъехались: тёмная панель отзыва 30, а точно такой же тёмный блок опыта прямо под ней 20 — рядом это читалось как ошибка вёрстки. На телефоне те же панели получали то 20 (медиазапрос ≤479), то 28 (app-режим ≤767, стоит в файле ниже и перебивал первый) — то есть значение на 375 px зависело от порядка правил, а не от замысла. Теперь чисел четыре, они лежат здесь, и ниже по файлу нет ни одного литерала радиуса. Ширина экрана радиус больше не меняет: в iOS у карточки на 6.7″ и на 4.7″ углы одинаковые — от размера экрана меняется содержимое, а не оправа. */ --r-panel: 28px; /* панели во всю ширину, крупные картинки (.corners), плавающие плашки */ --r-block: 20px; /* картинки поменьше (.smaller-corners) */ --r-thumb: 14px; /* миниатюры кейсов, превью галереи, карточки сцены первого экрана */ --r-control: 999px; /* кнопки и фокус-рамки; на телефоне кнопки становятся капсулами */ /* ── внутренние поля крупных панелей ── Одно число на все три: отзыв, опыт, независимая практика. Было 48/56, 72/80 и 48/60, а на телефоне блок опыта оставался с полем 80 сверху при 20 у соседей. */ --panel-pad: 56px 60px; /* ── наезд панели независимой практики под блок опыта ── 05.09.2026. Практика — та же история занятости, поэтому она не отдельная плашка через зазор, а лист, задвинутый под тёмный блок: верхний край уходит под него, наружу выходят только углы. Число — насколько глубоко заходит; оно же добавляется полем внутрь, чтобы текст стоял от нижнего края тёмного блока на обычном --panel-pad. Одно на все ширины и заведомо больше --r-panel: радиус от экрана не зависит, и если наезд окажется меньше радиуса, скруглённый угол светлой панели вылезет из-под тёмной. */ --practice-tuck: 44px; /* ── кейсы: вынос подложки раскрытой полосы и сторона квадрата в плёнке ── 04.09.2026. Раскрытая запись перестала растить миниатюру и вместо этого проявляет под собой карточный фон. Вынос — насколько подложка выходит за колонку текста влево и вправо: на телефоне он равен полю контейнера, и панель доходит до краёв экрана. Кадры плёнки — квадраты одной стороны, чтобы лента читалась сеткой. */ --case-bleed: 28px; --case-shot: 380px; } /* ── русская версия набрана Manrope ── 04.09.2026. У Satoshi нет кириллицы: на site3-ru.html каждая русская буква уходила в первый фолбэк — Helvetica Neue. Он в системе есть только начертанием Medium, поэтому заголовок первого экрана выглядел жирнее и уже английского, а в строке «…менеджер в AdTech.» рядом стояли две разные гарнитуры сразу. Manrope — тот же класс: геометрический гротеск с широкими просветами, но с полной кириллицей и латиницей, поэтому русская страница набрана им целиком, без смеси. Сравнение кандидатов (Manrope, Onest, Golos Text, Inter Tight, Nunito Sans) на том же заголовке — _probe-fonts.html. Селектор html[lang="ru"] (0-1-1) специфичнее :root (0-1-0) и перебивает --sans. Сам файл шрифта подключён только на русской странице — ссылка в HEAD_NOTE['ru'] в lang-strings.py, английская и сербская его не грузят. */ html[lang="ru"] { --sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif; } /* Ступень «на русской и сербской версиях заголовок первого экрана набирается 60, а не 72» снята 05.09.2026 вместе со старым заголовком «Product & Project Manager in AdTech»: там русская строка на общем кегле рассыпалась на четыре строки. У обложки строки разбиты вручную и кегль считается от ширины окна (clamp … 8.2vw …), поэтому число одно на все три языка. Правило было специфичнее клампа (.hero h1 против .hero__h1) и молча возвращало русской и сербской странице 60 px. */ * { box-sizing: border-box; } /* scroll-padding-top = высота плавающей шапки вместе с её полями: без него якорь #work уезжает под плашку */ html { scroll-behavior: smooth; scroll-padding-top: 100px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 24px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; } h1 { font-size: 72px; line-height: 1; margin-bottom: 32px; } h2 { font-size: 52px; line-height: 1.2; margin-bottom: 40px; } h3 { font-size: 40px; line-height: 1.2; margin-bottom: 24px; } h4 { font-size: 32px; line-height: 1.4; margin-bottom: 20px; } h5 { font-size: 24px; line-height: 1.4; margin-bottom: 10px; } h6 { font-size: 20px; line-height: 1.2; margin-bottom: 10px; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } /* ── общие ── */ /* Поле контейнера объявлено переменной, а не числом в padding: его должны знать и потомки. Блоку, которому надо выйти в обрез экрана (веер работ на телефоне), иначе пришлось бы держать у себя копию этих 40/32/24/16 и ловить рассинхрон при каждой правке. Переменная наследуется, поэтому потомок всегда получает ровно то поле, которое победило в каскаде на текущей ширине. */ .container { --pad: 40px; max-width: 1360px; margin: 0 auto; padding: 0 var(--pad); position: relative; } .section { padding: 96px 0; } .large-section { padding: 120px 0; } /* ── полосы через секцию ─────────────────────────────────────────── Ритм страницы держит не линия между блоками, а смена плоскости: белый холст и серая полоса через одну. Секции в разметке прозрачные, фон раньше держал body — поэтому красим сами секции, а белый остаётся значением по умолчанию. Почему серым помечены именно эти четыре: #how + #work идут подряд и красятся в ОДНУ полосу — у .quiet верхнее поле снято (padding-top: 0), и разный фон дал бы шов ровно по надписи «Cases»; #experience — там тёмный блок опыта и белая панель практики, и панели нужен фон, от которого она отличается; #toolkit — ряд логотипов сервисов: серая полоса под строкой логотипов это обычный приём, а не исключение. Отдельных линий-разделителей между секциями нет и не нужно: граница полосы уже разделяет, линия поверх неё была бы вторым разделителем на один стык. */ #how, #work, #experience, #toolkit { background: var(--bg-alt); } /* Шов под панелью отзыва. У #testimonials полей нет вовсе, и нижний край умбряной панели совпадал с нижним краем секции: при лаймовом холсте это было не видно — фон по обе стороны шва один, — а на белом панель приклеивалась к краю серой полосы #experience. Сверху та же история с другого конца: подпись «Testimonials» начиналась в 12 px под швом и читалась как подпись серой полосы. 48 снизу вместе с верхним полем #experience (96) дают 144 — панель стоит на белом. */ #testimonials { padding: 72px 0 48px; } .title { color: var(--muted); font-size: 24px; line-height: 1.2; margin-bottom: 32px; } .title.white { color: var(--panel-dark-faint); } .large-text { font-size: 20px; line-height: 1.5; } .medium-text { font-size: 18px; line-height: 1.6; } .opacity-white { color: var(--panel-dark-muted); } .opacity-dark { color: var(--muted); } .eyebrow { color: var(--muted); letter-spacing: .05em; text-transform: uppercase; font-size: 14px; } .centered { max-width: 600px; margin: 0 auto; text-align: center; } .limit { max-width: 480px; } .limit-medium { max-width: 530px; } .limit-large { max-width: 740px; } .limit-small { max-width: 370px; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px 64px; } .space-top { margin-top: 40px; } .space-top-large { margin-top: 80px; } .corners { border-radius: var(--r-panel); overflow: hidden; } .smaller-corners { border-radius: var(--r-block); overflow: hidden; } .orange-link { color: var(--accent-text); } .orange-link:hover { opacity: .75; } /* Плашка под словом (.underlined, приём оригинала jasonfaber) снята 05.09.2026. К этому моменту она осталась ровно в одном месте на всю страницу — под «AdTech.» в заголовке подвала — а приём, который встречается один раз, читается не как система, а как забытый кусок чужого макета. Вместе с классом убраны переменная --underline и обёртка в index / ru / sr. Сам --accent остался: он держит точки таймлайна, звёздочку в подвале и наведение на пункт меню. */ /* ── кнопки ── 04.09.2026 у всех вариантов одни поля и одна высота. Было четыре разных набора: тёмная 24/32, синяя 18/26, тихая 14/22, белая 16/24 — и в блоке контактов «Get in touch» рядом с «Download CV» стояла на 16 px выше соседки. Различает варианты цвет, а не размер; размер задан один раз здесь. Высота 56 — минимальный удобный тап и в macOS, и в iOS. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r-control); padding: 16px 24px; min-height: 56px; font: inherit; cursor: pointer; border: 0; text-align: center; transition: box-shadow .2s; box-shadow: inset 0 2px 5px 50px transparent; } .btn--white { background: var(--btn-light-bg); color: var(--btn-light-ink); } .btn--white:hover { box-shadow: inset 0 2px 5px 50px var(--btn-light-hover); } .btn--dark { background: var(--btn-dark-bg); color: var(--btn-dark-ink); } .btn--dark:hover { box-shadow: inset 0 0 5px 50px var(--btn-dark-hover); } /* синяя кнопка в разметке сейчас не встречается: правило оставлено вместе с переменными --btn-primary-*, чтобы вернуть заливку одному действию, не собирая вариант заново */ .btn--blue { background: var(--btn-primary-bg); color: var(--btn-primary-ink); } .btn--blue:hover { box-shadow: inset 0 2px 5px 50px var(--btn-primary-hover); } /* тихая кнопка: контур вместо заливки. Сайт-визитка, а не продающая страница — зазывать читателя заливкой на каждом экране незачем. Заливку оставляем одному действию в блоке контактов, всё остальное говорит вполголоса. */ .btn--quiet { background: transparent; color: var(--panel-dark-ink); box-shadow: inset 0 0 0 1px var(--line-on-dark); } .btn--quiet:hover { box-shadow: inset 0 0 0 1px var(--line-on-dark), inset 0 0 5px 50px rgba(255, 255, 255, .08); } /* контурная на светлом: «Show more cases» под списком работ. --quiet рассчитана на тёмную панель (--panel-dark-ink) и на светлой секции пропала бы. Заливка при наведении — --card, тот же приём, что у наведения на полосу кейса: поверхность, а не новый цвет. */ .btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } /* Налив на наведении — холодный белый явно, а не var(--card): карточки стали белыми, и на белой секции белый налив не виден вовсе. Те же три места ниже: стрелки ленты кадров и стрелки веера работ. */ .btn--outline:hover { box-shadow: inset 0 0 0 1px var(--line), inset 0 0 5px 50px var(--btn-light-bg); } /* кнопка-раскрывашка: тот же знак, что у «Case details» и у «Details» в опыте — плюс в свёрнутом виде, тире в раскрытом. Знак берётся из состояния aria-expanded, которое кнопка и так держит: второго источника правды под иконку не заводим. Крестик сюда не подходит — на сайте он нигде не встречается, а в общем словаре интерфейсов значит «закрыть, убрать с глаз», а не «свернуть обратно к пяти». */ .btn--fold::after { content: '+'; font-size: 22px; line-height: 1; } .btn--fold[aria-expanded="true"]::after { content: '\2013'; } .btn svg { width: 18px; height: 18px; flex: none; } /* ── шапка: плавающая плашка ── Закреплена при прокрутке и не прилеплена к краю экрана: сама .navbar — прозрачный слой во всю ширину, а видимая плашка это .navbar__grid — скруглённая, шириной контейнера, с полями от краёв окна. fixed, а не sticky: панель лежит ПОВЕРХ контента, и первый экран уходит тёмным фоном под неё до самого верха. Со sticky над первым экраном оставалась бы светлая полоса фона страницы, а на ней пропадал бы белый логотип. Высоту компенсирует padding-top первого экрана. Вверху страницы плашки не видно: логотип и меню лежат прямо на тёмном первом экране, стекло и тень проявляются при прокрутке, по классу .is-stuck. Меню-шторка на планшете позиционируется absolute от .navbar__grid (у .container есть position: relative), поэтому ложится ровно по ширине плашки. */ .navbar { color: var(--panel-dark-ink); position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 12px 0; background: transparent; } /* вертикальные поля 8: кнопка «Get in touch» высотой 60 иначе торчит за края плашки, у которой высота считалась по логотипу (56) */ .navbar__grid { /* насколько видимая плашка вжата внутрь бокса контейнера; на телефоне обнуляется */ --plaque-inset: var(--pad); /* воздух от края плашки до логотипа и языков; заведомо меньше --r-panel не берём */ --plaque-air: 24px; display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; padding-top: 8px; padding-bottom: 8px; background: transparent; } /* ── ширина плашки: ровно колонка контента ── 05.09.2026. Плашка рисовалась фоном самого .navbar__grid, то есть по боксу .container вместе с его полем --pad. На 1440 это 40…1400 при колонке контента 80…1360: скруглённые углы выходили за все блоки страницы на 40 px и читались как ошибка вёрстки, а не как приём. Теперь фон вынесен в ::before, вжатый внутрь на те же --pad — края плашки садятся ровно на колонку, а логотип и языки уходят внутрь на --plaque-air. Поля заданы отдельным правилом .container.navbar__grid: у шортката .container внутри медиазапросов та же специфичность и он стоит ниже по файлу, поэтому одноклассовое правило он бы перебил. */ .container.navbar__grid { padding-left: calc(var(--plaque-inset) + var(--plaque-air)); padding-right: calc(var(--plaque-inset) + var(--plaque-air)); } .navbar__grid::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--plaque-inset); right: var(--plaque-inset); border-radius: var(--r-panel); transition: background .25s ease, box-shadow .25s ease; } .navbar.is-stuck .navbar__grid::before { background: color-mix(in srgb, var(--panel-dark) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 0 0 1px var(--line-on-dark-faint); } /* ── прогресс чтения залит в саму плашку шапки ── Страница разбора кейса — 13 000 px и шесть актов, ориентира «где я» не было вообще. Отдельная полоска в самом верху окна читалась бы как элемент браузера, поэтому прогресс встроен в плашку меню: мягкая мятная заливка прочитанной части. Яркая кромка 3 px по нижнему краю снята 09.10.2026 по просьбе: полоса кричала громче меню, отметкой хватает края самой заливки. Долю в --read пишет скрипт страницы; класс has-progress вешает он же, поэтому без скрипта и на коротких страницах плашка остаётся обычной. Слой ::after, а не ::before: ::before держит стекло и тень, и рисовать заливку поверх него надо более поздним псевдоэлементом при том же z-index. */ .navbar.has-progress .navbar__grid::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--plaque-inset); right: var(--plaque-inset); border-radius: var(--r-panel); opacity: 0; transition: opacity .25s ease; background: linear-gradient(90deg, color-mix(in srgb, var(--mint-bright) 15%, transparent) 0 calc(var(--read, 0%) - 32px), transparent var(--read, 0%)); } /* Показывается вместе со стеклом: на первом экране плашки не видно, и полоса висела бы на обложке сама по себе */ .navbar.has-progress.is-stuck .navbar__grid::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .navbar.has-progress .navbar__grid::after { transition: none; } } /* ── вуали под шапкой больше нет (05.09.2026, вместе со схемой «Мята на бежевом») ── Была: тёмный градиент в прозрачность на высоту 128 px, гаснущий при прокрутке. Заводился он ради одного — верхнее свечение обложки самой яркой частью приходилось ровно на строку меню, и светлый текст меню ложился на светлое пятно. Снят по просьбе: градиент читался как отдельная плашка поверх ровной обложки. Вместо него причина убрана в корне — верхнее пятно .hero::before ниже по файлу опущено под шапку, и меню лежит на ровных чернилах без всякой подложки. При прокрутке по-прежнему работает стекло .is-stuck. */ .brand { padding: 16px 0; display: inline-flex; align-items: center; } /* wordmark с действующего kottov.net (110×23 в его шапке): светлая версия #dfdfdf выбелена фильтром до чистого белого. viewBox обоих SVG 500×103, знак занимает всю ширину, полей нет: 24px высоты дают 117px ширины. Ширина задана явно, а не auto: без сети картинка не грузится, и auto растягивал бокс до колонки грида (366×103). */ .brand__logo { display: block; height: 24px; width: 117px; max-width: 117px; object-fit: contain; object-position: left center; filter: var(--logo-filter); } .nav-menu { display: flex; justify-content: center; align-items: center; gap: 36px; } .nav-link { color: var(--panel-dark-ink); padding: 16px 0; display: inline-block; transition: color .2s; } .nav-link:hover { color: var(--accent); } .nav-menu .btn { display: none; } .nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; } .menu-btn { display: none; background: none; border: 0; padding: 18px 0 18px 18px; cursor: pointer; } .menu-btn i { display: block; height: 2px; width: 20px; background: var(--panel-dark-ink); margin: 4px 0; } .menu-btn i:nth-child(2) { width: 10px; margin-left: auto; } /* ── переключатель языков: EN · RU · SR между меню и кнопкой; активный жирнее и белым, остальные приглушённые. На ≤991 уходит из шапки в бургер-меню (.lang--menu). Полоса .lang-note под шапкой — только при ?lang=ru / ?lang=sr. ── */ .lang { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-size: 14px; letter-spacing: .05em; white-space: nowrap; } .lang a { color: var(--panel-dark-muted); padding: 8px 2px; transition: color .2s; } .lang a:hover { color: var(--panel-dark-ink); } .lang a.is-active { color: var(--panel-dark-ink); font-weight: 700; } .lang__sep { color: var(--panel-dark-faint); } .lang--menu { display: none; } .lang-note { background: var(--btn-light-bg); color: var(--btn-light-ink); font-size: 14px; line-height: 1.4; padding: 10px 40px; text-align: center; } .lang-note[hidden] { display: none; } /* ── первый экран: обложка одной фразой (05.09.2026) ────────────────────── Перенесено из чернового _preview-hero-upsunday.html, замеры и разбор референсов остались там же в шапке файла. Композиция — upsunday.co, свечения — supadupa.nl/nl, тот же сайт, откуда снята палитра lime. Что было до: тёмный экран в две колонки — заголовок «Product & Project Manager in AdTech», интро в два абзаца, три канала связи, стрелка вниз и сцена справа (портрет на диске с карточками Recommendation и Taxonomy). Всё это снято: у референса первый экран — ОДНА фраза и больше ничего, и половина кадра под ней пустая. Разметку убрали из index.html целиком (она осталась в _backup-2026-09-04/), а правила ниже по файлу оставлены: возврат — вернуть разметку в секцию .hero, CSS править не придётся. Куда делось содержимое: три канала связи и так стоят в блоке контактов, рекомендация и дерево категорий разобраны в кейсах. Из страницы пропало только предложение «I work inside an advertising platform…» — оно осталось в и в блоке «How I work». 100svh, а не vh: в мобильных браузерах vh считает экран без адресной строки, и нижний край фразы уезжает под неё. min-height, а не height: русский заголовок на невысоком ноутбуке растит экран, а не обрезается. */ .hero { --hero-pad-b: 96px; min-height: 100svh; display: grid; align-items: center; padding: 132px 0 var(--hero-pad-b); background: var(--panel-dark); color: var(--panel-dark-ink); position: relative; overflow: hidden; isolation: isolate; } /* width: 100% обязателен, иначе контейнер сжимается по самой длинной строке. У .container стоит margin: 0 auto, а автополя у grid-элемента отменяют stretch — колонка схлопывается до max-content. Фраза от этого центрируется как надо, но text-align: center внутри узкого блока — совпадение, а не раскладка, и на сербской версии блок вышел 669 px при окне 1440. */ .hero > .container { width: 100%; } /* ── свечения обложки ── Геометрия по замеру supadupa (доли от вьюпорта 1280×720): у них это две картинки из Figma с feGaussianBlur, вывезенные на CDN. Свои ассеты тянуть с чужого домена нельзя, а форма пятна в размытии не читается — поэтому здесь радиальные градиенты с blur по тем же координатам. ::before — верхнее, по центру сверху: эллипс уведён выше края кадра, поэтому видна только нижняя дуга. ::after — левое, от середины экрана вниз. blur(30px) вместо их stdDeviation=25: у них размытие считается в координатах SVG (viewBox 907 при отрисовке в 960), то есть на экране крупнее номинала. 05.09.2026, схема «Мята на бежевом». Геометрия обоих пятен прежняя, изменился цвет — и это прямое следствие снятой вуали под шапкой (см. .navbar выше). Было: сплошной холст. На хвойной обложке это читалось светом, на чернилах — серым туманом, а строка меню, набранная тем же холстом, ложилась прямо в ядро пятна (стоп 58% при closest-side, то есть средние 58% высоты бокса, у верхнего пятна это −21…9% высоты обложки). Ровно ради этого места и заводилась вуаль. Стало: яркая мята 30 и 26% плотности. Ядро верхнего пятна даёт #2A5145, холст на нём 8.82 — меню читается на самой светлой точке свечения без всякой подложки, и вуаль больше не нужна. Заодно пятно перестало быть серым: на чернилах мята под тридцатью процентами читается глубоким зелёным свечением, то есть акцентом схемы, а не выцветшим белым. z-index −1 плюс isolation на секции: пятна ложатся на заливку, но остаются под текстом и не всплывают над шапкой. */ .hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } .hero::before { top: -32%; left: 15%; width: 62%; height: 52%; background: radial-gradient(closest-side ellipse at 50% 50%, color-mix(in srgb, var(--mint-bright) 30%, transparent) 0%, color-mix(in srgb, var(--mint-bright) 30%, transparent) 58%, color-mix(in srgb, var(--mint-bright) 16%, transparent) 76%, transparent 100%); filter: blur(30px); } .hero::after { top: 46%; left: -30%; width: 74%; height: 104%; background: radial-gradient(closest-side ellipse at 46% 44%, color-mix(in srgb, var(--mint-bright) 26%, transparent) 0%, color-mix(in srgb, var(--mint-bright) 26%, transparent) 56%, color-mix(in srgb, var(--mint-bright) 14%, transparent) 76%, transparent 100%); filter: blur(30px); } /* Кромки в белый (.up-tail из черновика) здесь нет: у supadupa тёмный блок обрывается в белый фон страницы, а у нас под обложкой идёт лаймовая полоса тегов — обрывать тёмное в лайм значит показать шов, которого в оригинале нет. */ /* ── фраза ── Кегль подобран по самой длинной строке: она доходит почти до края контейнера (1280 при max-width 1360 и полях 40), и блок читается плакатом, а не абзацем. line-height .92 и трекинг −.035em: у upsunday строки почти касаются, и именно эта плотность делает фразу объектом. text-wrap: balance не ставим — строки разбиты вручную через
, потому что плашки должны попасть в конкретные места строк. Кегль классом, а не .hero h1: правило .hero h1 { font-size: 56px } на 992–1199 было специфичнее клампа и гасило его. Оно снято вместе со старым заголовком. */ .hero__h1 { margin: 0; text-align: center; color: var(--panel-dark-ink); font-weight: 900; font-size: clamp(var(--cover-min, 30px), var(--cover-step, 8.2vw), var(--cover-max, 122px)); line-height: .92; letter-spacing: -.035em; } /* ── кегль по языкам ── Кламп задан переменными, потому что длина самой длинной строки в трёх языках разная, а строки здесь разбиты вручную: перенести слово, чтобы уместиться, фраза не может. Замер при кегле 118 и контейнере 1280: английская «is automated.» с рядом карточек занимает 1055, сербская «automatizovana.» — 1223, русская «автоматизирована.» — 1385. На общем кегле русская строка не помещалась, и ряд карточек уезжал на свою строку — посреди фразы висела полоска из трёх картинок. Поэтому у русской и сербской версий свой шаг и свои границы: строка по-прежнему доходит почти до края контейнера, то есть плакат остаётся плакатом, но не рвётся. Причина та же, по которой у старого заголовка первого экрана русский набирался 60 против английских 72 — только считается теперь от ширины окна, а не числом. Нижняя граница тоже своя: на 375 при общих 30 px русская строка вылезала за поля. */ /* 10.10.2026: русский заголовок сменился на «Рутина — машине. Решения — мне.», длинного «автоматизирована.» в нём больше нет, и русская строка уже английской. Свой урезанный кламп ей больше не нужен — набирается общим, как английская. */ html[lang="sr"] .hero__h1 { --cover-min: 28px; --cover-step: 7.9vw; --cover-max: 118px; } /* ── медиа-плашка внутри строки ── Высота в em, чтобы плашка масштабировалась вместе с кеглем. .74em — высота строчной буквы Satoshi: выше плашка распирает межстрочное расстояние, ниже — теряется между слов. vertical-align −.06em сажает её на оптическую середину строки: по baseline она встаёт слишком высоко, по middle — проваливается. */ .mm { display: inline-block; vertical-align: -.06em; height: .74em; border-radius: .16em; overflow: hidden; margin: 0 .1em; background: rgba(255, 255, 255, .1); } .mm img { display: block; width: 100%; height: 100%; object-fit: cover; } .mm--wide { width: 1.55em; } .mm--sq { width: .78em; } /* Ряд из трёх карточек внахлёст — как в образце: не общая подложка с зазорами, а три отдельные карточки, у каждой своя белая рамка, и они заезжают одна на другую. Рамка не декор: без неё в наложении не видно, где кончается одна карточка и начинается следующая. Порядок перекрытия лесенкой, как сдвинутая стопка слайдов; нахлёст .17em при ширине .78em — примерно пятая часть. */ .mm-row { display: inline-flex; align-items: center; vertical-align: -.06em; margin: 0 .1em; height: .84em; } .mm-row .mm { margin: 0; height: 100%; position: relative; border-radius: .17em; background: #ECECEC; box-shadow: 0 0 0 .026em #FFFFFF; /* тонкая рамка: толстая читалась как паспарту */ } .mm-row .mm + .mm { margin-left: -.17em; } .mm-row .mm:nth-child(1) { z-index: 1; } .mm-row .mm:nth-child(2) { z-index: 2; } .mm-row .mm:nth-child(3) { z-index: 3; } /* В карточках — три объёмных знака площадок: Яндекс, Google Ads, Meta Ads. Ровно те кабинеты, где рутина и автоматизируется, поэтому карточки стоят при слове automated и говорят предметно. Плоские логотипы инструментов пробовались и сняты: на белом фоне стопка превращалась в ряд иконок, а у Директа и Метрики знак вообще один и тот же. Кадр задан фоном, а не : связка object-position + transform: scale не давала попасть в точку — object-position двигает кадр, scale тянет его от центра бокса, и они спорят. background-size задаёт увеличение (175%, чтобы знак заполнил карточку и поля снимка ушли за край), background-position — точку самого снимка. */ .mm-row .mm { background-repeat: no-repeat; background-size: 175%; background-position: center 42%; } .mm-row .mm--ya { background-image: url(hero-cards/yandex.webp); } .mm-row .mm--google { background-image: url(hero-cards/google-ads.webp); } .mm-row .mm--meta { background-image: url(hero-cards/meta-ads.webp); } /* Портрет: у исходника кадр по колено (800×1405), в плашке нужна голова — object-position тянет кадр вверх, scale подрезает поля. Подложка светлая: у иллюстрации вырезанный фон и чёрный контур, на тёмном фигура и линии тонут. Тот же приём, что диск .scene__disc под портретом на прежнем экране. */ .mm--face { background: var(--panel-dark-ink); } /* 05.09.2026 кадр отпущен: было scale(1.5) при 4% — подбородок стоял ровно на нижней кромке плашки, а макушка на верхней, и голова читалась зажатой в коробке. 1.28 при 3% оставляет воздух под подбородком и заводит в кадр воротник. Панорама по прокрутке: окно плашки едет вниз по рисунку, и пока обложка уходит вверх, в нём успевает показаться рубашка. Стартовый кадр 3%, конечный 12% — и не больше: на 18% глаза уже срезаются верхней кромкой, и в плашке остаётся одна борода. Ход задаёт скрипт (--face-y в index.html, рядом с остальными слушателями прокрутки), а не animation-timeline: scroll(): таймлайны прокрутки в Safari появились только в 26-й, а этот сайт смотрят с айфона. Значение по умолчанию здесь же, поэтому без скрипта плашка стоит в стартовом кадре — исправленном, а не в прежнем зажатом. */ .mm--face img { object-position: 50% var(--face-y, 3%); transform: scale(1.28); transform-origin: 50% 8%; } /* Рисованная стрелка вместо слова — у upsunday она оранжевая и от руки. Здесь тот же жест на фирменном алом: на хвойном он даёт 3.73 — для текста мало, для декоративной линии достаточно. Высота .84em: на низкой полосе петля схлопывается в пятно и читается кляксой. Выше поднимать нельзя — inline-block выше строки раздвинет межстрочное расстояние, а строки здесь стоят вплотную (line-height .92). Поэтому крупность добрана не боксом, а обрезкой viewBox по самому рисунку. */ .mm-arrow { display: inline-block; vertical-align: -.08em; width: 1.8em; height: .84em; margin: 0 .08em; } .mm-arrow svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; } /* ── правила снятого первого экрана ───────────────────────────────────────── Ниже до конца блока — стили двухколоночного экрана, который стоял здесь до 05.09.2026: интро, три канала связи, стрелка вниз, сцена с портретом и карточками. В разметке их больше нет. Оставлены целиком, как и правила снятых раньше .hero__graph, .hero__meta и .metrics: возврат — заменой содержимого секции .hero, без правки CSS. */ .hero .split { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } /* stretch, а не start от .split: колонка тянется на высоту сцены, и только тогда стрелка внизу (margin-top: auto) действительно уезжает к нижней кромке */ .hero__text { display: flex; flex-direction: column; gap: 24px; align-self: stretch; } .hero__lede { max-width: 530px; } .hero__lede p { color: var(--panel-dark-muted); } /* .hero__meta — строка «Белград, Сербия · открыт к ролям» — снята с первого экрана 03.09.2026: город есть в блоке контактов и в футере, а «открыт к ролям» — заголовок того же блока. Правило оставлено на случай возврата. */ .hero__meta { margin-top: 16px; color: var(--panel-dark-muted); } .hero__cta { margin-top: 16px; } /* три канала связи вместо одной кнопки «Get in touch» */ .hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .hero__actions .btn svg { fill: currentColor; } /* стрелка вниз: кольцо в контур шапки-кнопки и подпись рядом. margin-top: auto прижимает её к низу колонки, align-self: start — чтобы ссылка была шириной по содержимому, а не во всю колонку (иначе клик ловит пустое место) */ .hero__scroll { display: inline-flex; align-items: center; gap: 14px; margin-top: auto; align-self: start; padding-top: 32px; color: var(--panel-dark-muted); font-size: 15px; line-height: 1.4; transition: color .2s; } .hero__scroll:hover { color: var(--panel-dark-ink); } .hero__scroll i { width: 46px; height: 46px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--line-on-dark); transition: box-shadow .2s, transform .2s; } .hero__scroll:hover i { box-shadow: inset 0 0 0 1px var(--line-on-dark), inset 0 0 5px 50px rgba(255, 255, 255, .08); } /* стрелка нарисована линией, а не заливкой: тот же приём, что у иконок нижней панели разделов */ .hero__scroll svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* короткий кивок вниз раз в три секунды: подсказка должна попасться на глаза, но не дёргаться под текстом всё время чтения. Отключается ниже вместе с остальной анимацией */ @keyframes hero-nudge { 0%, 78%, 100% { transform: translateY(0); } 87% { transform: translateY(4px); } } .hero__scroll i { animation: hero-nudge 3s ease-in-out infinite; } .hero__scroll:hover i { animation: none; transform: translateY(3px); } .hero__graph { max-width: 339px; } .hero__graph svg { width: 100%; height: auto; display: block; } /* плоский график: полигоны — основной цвет иллюстраций, конечная точка — второй, «дырки» — тёмные фигуры */ .hero__graph .g-a { fill: var(--illus-a); } .hero__graph .g-b { fill: var(--illus-b); } .hero__graph .g-ink { fill: var(--illus-ink); } /* ── сцена первого экрана: рисованный портрет и плоская графика вокруг ── 03.09.2026, вариант B из hero-variants.html. Раньше здесь была рамка .hero__photo с кадрированием фотографии (cover + позиция 50/30); теперь портрет с прозрачным фоном стоит на диске, а вокруг разложены карточка, дерево и точечная сетка. Ширина сцены 470 = 300 фигуры плюс поля под карточки, которые заезжают на неё с боков. Высота 540 задана явно, а не пропорцией: дети абсолютные, содержимого в потоке нет. */ /* Все размеры внутри сцены заданы через множитель --s: дети позиционированы абсолютно, их не подхватит ни проценты, ни сетка. Адаптив меняет одно число, а не двадцать правил. Кегли подписей на карточках из масштаба выведены: при --s .85 они ушли бы в 11 px. */ /* ── сцена первого экрана: рисованный портрет и плоская графика вокруг ── Вариант B из hero-variants.html. Версия с городом на фоне (portrait-city.svg) пробовалась 03.09.2026 и отменена: композиция не про его работу. Файл остался в illustrations/hero/ вместе с исходником illustrations/download.svg. Все размеры внутри сцены заданы через множитель --s: дети позиционированы абсолютно, их не подхватит ни проценты, ни сетка. Адаптив меняет одно число, а не двадцать правил. Кегли подписей на карточках из масштаба выведены: при --s .84 они ушли бы в 11 px. overflow: hidden — чтобы диск и фигура обрезались по одной линии: у иллюстрации кадр кончается на бедре, и без общего низа этот срез читался бы как брак. */ /* Отрицательный нижний margin ровно на нижний отступ первого экрана: без него сцена обрывалась на 56 px выше края тёмной панели и срез фигуры с диском повисал в воздухе — читался не как кадрирование, а как брак. Теперь линия среза = граница экрана, обрезает её overflow: hidden у .hero. */ .hero__scene { --s: 1; position: relative; justify-self: end; overflow: hidden; width: calc(470px * var(--s)); height: calc(527px * var(--s)); margin-bottom: calc(-1 * var(--hero-pad-b)); } /* фигура: пропорция файла 800×1405, поэтому 300 по ширине дают 527 высоты — почти вся сцена */ .hero__scene img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(300px * var(--s)); height: auto; display: block; z-index: 2; } /* Диск 400 при фигуре 300: 300 накрывали только бёдра, и брюки ниже круга уходили в фон. Круг спущен на 70 под нижнюю кромку сцены — она его срезает по той же линии, что и фигуру, поэтому оба низа совпадают */ .scene__disc { position: absolute; left: 50%; bottom: calc(-70px * var(--s)); transform: translateX(-50%); width: calc(400px * var(--s)); height: calc(400px * var(--s)); border-radius: 999px; background: var(--illus-plate); z-index: 1; } /* карточки: белая — рекомендация, акцентная — дерево категорий. Обе заезжают на фигуру */ .scene__card { position: absolute; z-index: 3; width: calc(196px * var(--s)); padding: calc(12px * var(--s)) calc(14px * var(--s)); border-radius: calc(var(--r-thumb) * var(--s)); background: var(--card); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); } .scene__card b { display: block; font-size: 13px; line-height: 1.3; margin-bottom: 6px; } .scene__card span { display: block; font-size: 12px; line-height: 1.35; color: var(--muted); } .scene__card--rec { left: 0; top: calc(30px * var(--s)); } /* вторая карточка отличается фоном: два одинаковых белых прямоугольника на сцене читались как один интерфейс, а это две разные вещи из его работы. Фон здесь --bg, а не --accent, как было в прежней палитре. Алый тёмный: на нём текст карточки падал до 3.21, полоски дерева до 2.71, а точки дерева пропадали совсем — они красятся тем же --accent, что и фон, и давали контраст 1.00. На лайме текст возвращается к 11.49, полоски примерно к 7, точки видны. */ .scene__card--tax { right: 0; bottom: calc(52px * var(--s)); width: calc(178px * var(--s)); background: var(--bg); } .scene__card--tax span { color: var(--ink); opacity: .75; } /* дерево внутри карточки: заливки классами через переменные темы, без атрибутов fill */ .scene__tree { width: calc(96px * var(--s)); height: calc(79px * var(--s)); margin: 2px 0 8px; } .scene__tree .t-bar { fill: var(--illus-ink); opacity: .75; } .scene__tree .t-dot { fill: var(--accent); } /* Сцена растёт вместе с высотой окна: на 1440×900 фигура в исходном размере висела бы в нижней трети пустой обложки. Ступени стоят ПОСЛЕ базового правила .hero__scene — иначе его `--s: 1` перебивает их по порядку в файле, и масштаб молча не меняется. Потолок 1.16 упирается не в высоту, а в ширину: контейнер шире 1360 не становится, каждые +0.1 масштаба забирают 47 px у текстовой колонки, и уже на 1.24 заголовок первого экрана ломается с двух строк на три (проверено на 1920×1080). Поэтому третьей ступени для высоких экранов нет: на них фигура просто стоит на нижней кромке обложки. Нижняя граница 1360 — ширина, на которой контейнер выходит на свой максимум: на 1280 в текстовой колонке остаётся 628 px, и заголовок ломается на три строки уже при 1.08. */ @media (min-width: 1360px) and (min-height: 780px) { .hero__scene { --s: 1.08; } } @media (min-width: 1360px) and (min-height: 880px) { .hero__scene { --s: 1.16; } } /* полоса из трёх чисел — нижняя кромка первого экрана */ .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 16px; margin-top: 40px; } .metric { border-top: 1px solid var(--line-on-dark); padding-top: 24px; } .metric__n { font-size: 52px; line-height: 1.2; margin-bottom: 8px; } .metric .opacity-white { font-size: 15px; line-height: 1.4; } /* ── How I work: три принципа одной полосой ── 04.09.2026: липкая колонка, схемы 3:2 и абзацы «In practice» сняты, блок сжат до одной полосы — хайрлайн сверху, номер, принцип, строка. Разметка та же, что у «Same market, four seats» на первом экране, только линия светлая (--line): у блока не появляется собственного оформления, он берёт готовое с этой же страницы. Прежние варианты живыми лежат в how-variants.html, разбор — в HOW-BLOCK-OPTIONS.md. */ /* заголовок мельче, чем у Work и Testimonials (56 px): блок стал самым лёгким на странице, и с общим кеглем он спорил бы за внимание с идущим следом списком кейсов */ #how .centered { max-width: 760px; } /* 600 у .centered рвёт строку на «role.» */ #how .centered h2 { font-size: 40px; margin-bottom: 0; } .principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; } .principle { border-top: 1px solid var(--line); padding-top: 24px; } .principle__n { display: block; margin-bottom: 14px; } .principle h4 { font-size: 24px; line-height: 1.3; margin-bottom: 12px; } .principle p { font-size: 17px; line-height: 1.6; color: var(--muted); } /* иконки 44 px сняты 03.09.2026 вместе с переходом на схемы: столбики, стрелка и три кружка подошли бы любому пункту и любому чужому сайту. Правило оставлено на случай возврата */ .card__icon { width: 44px; height: 44px; display: block; fill: var(--icon); } /* ── таймлайн ── */ /* position/z-index — чтобы тёмный блок лежал ПОВЕРХ панели практики, которая идёт следом по потоку и без этого перекрывала бы его снизу */ /* Текстовый акцент внутри тёмного блока — яркая мята, а не её тень. 05.09.2026. --accent-text (#14634B) подобран под светлые плоскости, где он даёт 6.6…7.2; на чернилах у него 2.34, и «Since July 2026», годы под катом и «Details» на тёмном поле проваливались. Роль переопределена на самом блоке, поэтому правила .role__since / .fold__toggle / .tl__years ниже трогать не нужно — они уже читают --accent-text и на светлых секциях остаются прежними. Яркая мята на чернилах 11.0. */ .timeline-block { --accent-text: var(--mint-bright); position: relative; z-index: 2; background: var(--panel-dark); color: var(--panel-dark-ink); border-radius: var(--r-panel); padding: var(--panel-pad); box-shadow: var(--panel-ring); } .timeline-block h2 { margin-bottom: 32px; } /* четыре позиции на одном рынке — над таймлайном, внутри тёмного блока */ .eyebrow.white { color: var(--panel-dark-faint); } .seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; } .seat { border-top: 1px solid var(--line-on-dark); padding-top: 20px; } .seat__label { font-size: 24px; line-height: 1.4; } .seat__years { margin-top: 4px; } .seats__note { margin-top: 24px; max-width: 740px; } .timeline { position: relative; margin-top: 48px; } /* правая колонка ролей шире левой (1.4fr), иначе списки набирались в 464px и тянули секцию за 3400px */ .tl { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 40px 1.4fr; gap: 40px; margin-bottom: 32px; } .tl:last-of-type { margin-bottom: 0; } .tl__left { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .tl__org { text-align: left; } .tl__org .medium-text { margin-bottom: 14px; } .tl__logo { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .7; } /* оптическое выравнивание: при общей высоте 22px площадь заливки расходилась в 2.9 раза (fh 970px² против complete 331px²), логотипы читались как разные по весу. Высота гасит разницу в массе, opacity добивает остаток — до ~1.4 раза. */ .tl__logo[data-logo="fh"] { height: 20px; opacity: .64; } .tl__logo[data-logo="yandex"] { height: 21px; opacity: .66; } .tl__logo[data-logo="dorado"] { height: 22px; opacity: .68; } .tl__logo[data-logo="noroot"] { height: 24px; opacity: .75; } .tl__logo[data-logo="complete"] { height: 26px; opacity: .8; } .tl__year { position: sticky; top: 100px; font-size: 24px; line-height: 1.4; white-space: nowrap; text-align: right; } .tl__center { display: flex; justify-content: center; align-items: flex-start; padding-top: 11px; } .tl__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--dot-border); background: var(--dot-bg); flex: none; } .tl__right { max-width: 580px; } .role__since { color: var(--accent-text); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; } .role h5 { margin-bottom: 8px; } /* свёрнутая запись: под названием роли одна-две фразы выжимки; буллеты целиком — под катом (.fold__body) */ .role__summary { margin: 0; color: var(--panel-dark-muted); font-size: 16px; line-height: 1.5; } .role ul { color: var(--panel-dark-muted); font-size: 17px; line-height: 1.6; padding: 12px 0 0 18px; list-style: disc; } .role li { margin-bottom: 8px; } .role + .role { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-on-dark-faint); } /* линия стоит по центру колонки точек, а не на 50%: колонки 1fr / 40px / 1.4fr с зазором 40 — центр = (100% − 40 − 2×40) / 2.4 + 40 + 20 */ .tl__line { position: absolute; top: 0; bottom: 0; left: calc((100% - 120px) / 2.4 + 60px); width: 2px; margin-left: -1px; background: var(--line-on-dark-faint); } .tl__fill { width: 100%; height: 0; background: var(--tl-fill); } /* ── независимая практика: белая панель, задвинутая под тёмный блок опыта ── Зазор 16px снят 05.09.2026: практика — часть той же трудовой истории, а не соседний сюжет. Отрицательное поле сверху уводит край под тёмный блок, наружу остаются только углы — панель читается как второй лист в стопке. Тот же вынос возвращается полем внутрь (.practice-panel > .split), иначе текст поднимался бы к самому краю. */ .practice-panel { position: relative; z-index: 1; background: var(--card); border-radius: var(--r-panel); padding: var(--panel-pad); margin-top: calc(var(--practice-tuck) * -1); box-shadow: var(--card-ring); } .practice-panel > .split { padding-top: var(--practice-tuck); } .practice-panel .title { margin-bottom: 20px; } .practice-panel h3 { margin-bottom: 16px; } .practice__eyebrow { color: var(--accent-text); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 16px; } .practice__sub { color: var(--muted); font-size: 20px; line-height: 1.5; } .practice__summary { margin: 0; } .bullets { list-style: disc; padding: 16px 0 0 20px; } .bullets li { margin-bottom: 10px; } /* ── кейсы: карточки-раскрывашки, 3 / 2 / 1 колонки ── Карточка — белая панель радиусом 30 и паддингом 40, как его .panel. Слот под иллюстрацию: 4:3, радиус 20 (его smaller-corners), фон smoke; на 1440 это 336×252, на планшете до 375×281, на телефоне 375 — 295×221. Свёрнутое: иллюстрация, номер, название-результат h4, строка-подзаголовок. Раскрытое: вступление + блоки роль / challenge / solution / results + «Close». Тело раскрытия — общие классы .fold__body / .fold__inner (блок «раскрывашка» ниже). */ /* ── кейсы: девять горизонтальных полос на всю ширину, а не сетка карточек. В покое полоса показывает номер, миниатюру, название-результат и подзаголовок; по клику раскрывается вниз. Колонка миниатюры задана как max-content. 04.09.2026: миниатюра больше не растёт при раскрытии. Она ничего не сообщает — это тот же рисунок, только крупнее, — а голова из-за него становилась вдвое выше своего текста, и справа от картинки оставалось пустое поле. Раскрытие теперь показывает себя поверхностью, а не размером: см. блок ниже. ── */ /* замыкающая линия списка висит на последней записи, а не на самом списке: раскрытая запись гасит свои линии одним правилом, и под открытой последней карточкой не остаётся висящей черты (иначе понадобился бы :has на .cases) */ .cases { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 64px; } .case-card { position: relative; background: none; border-radius: 0; border-top: 1px solid var(--line); box-shadow: none; scroll-margin-top: 24px; } .case-card:last-child { border-bottom: 1px solid var(--line); } /* ── свёрнутый список: пять записей и кнопка ── Классы ставит скрипт внизу site3.html — без него на странице все девять, как раньше. Замыкающую линию в свёрнутом виде держит пятая запись (.is-cut): последняя (09) спрятана, и её :last-child-линия не видна. Раскрытая пятая гасит линию тем же правилом, что и раскрытая последняя, — иначе под открытой панелью висела бы черта. */ .cases.is-collapsed .case-card.is-extra { display: none; } .cases.is-collapsed .case-card.is-cut:not(.is-open) { border-bottom: 1px solid var(--line); } /* ссылка на каталог /cases/ под карточками (13.09.2026). Набрана ссылкой, а не кнопкой: кнопка «Show more cases» рядом с ней снята 12.10.2026 вместе с аккордеоном */ .cases__all { display: flex; justify-content: center; margin-top: 48px; } .cases__all a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); font-weight: 700; text-decoration: none; } .cases__all a:hover { text-decoration: underline; } /* ── витрина кейсов: карточки-ссылки (12.10.2026) ── Сетка в две колонки, первая карточка на всю ширину. Обложка — тинт записи (--illus-bg из [data-illo]) с цифрой результата слева сверху и фигурой из illustrations.js справа снизу: та же фигура, что в строке каталога, только крупнее и прижата к нижнему краю — столбцы стоят на основании, спикер выглядывает из-за кромки. Вся карточка — ссылка; наведение чуть поднимает фигуру и гасит подпись перехода, как у строки каталога. Цифра — плакатным кеглем, табличными знаками: набег цифр (motion.js) перерисовывает её на лету, и подпись под ней не должна дрожать. Слот .case-card__illo переопределён внутри карточки: в строке каталога это миниатюра 132 px, здесь — часть обложки без своего фона и скругления. */ .case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: 64px; } .case-tile { min-width: 0; } .case-tile--wide { grid-column: 1 / -1; } .case-tile__link { display: block; color: inherit; text-decoration: none; border-radius: var(--r-block); } .case-tile__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; } .case-tile__cover { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--r-block); background: var(--illus-bg); padding: clamp(20px, 2.4vw, 32px); } .case-tile--wide .case-tile__cover { aspect-ratio: 21 / 9; } .case-tile .case-card__illo { position: absolute; right: 0; bottom: 0; top: auto; width: 56%; aspect-ratio: 4 / 3; border-radius: 0; background: none; margin: 0; transition: transform .35s cubic-bezier(.2, .7, .2, 1); } .case-tile--wide .case-card__illo { width: 36%; } .case-tile__link:hover .case-card__illo { transform: translateY(-6px); } /* Цифре отдано 60% ширины: «20 дней» на 46% ломалось на две строки. С фигурой справа снизу текст не спорит — он стоит сверху, фигура занимает нижние 63% высоты */ .case-tile__result { position: relative; z-index: 1; margin: 0; max-width: 60%; color: var(--ink); } .case-tile--wide .case-tile__result { max-width: 52%; } .case-tile__result b { display: block; font-size: clamp(44px, 5.4vw, 84px); font-weight: 900; line-height: .95; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .case-tile__result span { display: block; margin-top: 12px; font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; line-height: 1.35; max-width: 22ch; opacity: .78; } .case-tile__body { padding: 18px 4px 0; } .case-tile__field { margin: 0; font-size: 18px; line-height: 1.5; } .case-tile__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 12px; font-size: 14px; color: var(--muted); } .case-tile__year { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; } .case-tile__tags { display: flex; flex-wrap: wrap; gap: 0 8px; } .case-tile__cta { margin-left: auto; color: var(--accent-text); font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: opacity .2s; } .case-tile__cta::after { content: '\2192'; font-size: 20px; line-height: 1; } .case-tile__link:hover .case-tile__cta { opacity: .75; } @media (max-width: 991px) { .case-grid { gap: 32px 20px; } .case-tile__result { max-width: 56%; } .case-tile__cta { margin-left: 0; flex-basis: 100%; } } @media (max-width: 767px) { .case-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; } .case-tile--wide .case-tile__cover { aspect-ratio: 3 / 2; } .case-tile--wide .case-card__illo { width: 56%; } .case-tile__result, .case-tile--wide .case-tile__result { max-width: 60%; } .case-tile__result b { font-size: clamp(40px, 11vw, 56px); } .case-tile__result span { font-size: 15px; } .case-tile__field { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .case-tile .case-card__illo, .case-tile__cta { transition: none; } .case-tile__link:hover .case-card__illo { transform: none; } } /* ── чем показываем, что полоса раскрыта ── Под записью проявляется карточный фон (--card, у всех пяти схем он отличается от фона страницы) со скруглением панели: список остаётся списком, а открытая запись читается отдельной карточкой — приём из Material 3 и GOV.UK, где раскрытая секция меняет поверхность, а не размер элементов внутри. Подложка нарисована псевдоэлементом с выносом за колонку текста, поэтому при раскрытии не сдвигается ни один пиксель содержимого: только проявляется фон. По вертикали она, наоборот, кончается на 12 px выше низа записи — раскрыть можно сразу несколько, и без этого зазора две панели подряд слипались бы, оставляя на стыке защип от скруглений. Сверху зазора нет: там поле головы и так 20 px, а отними ещё — миниатюра прижмётся к скруглению угла. Волосяные линии вокруг раскрытой записи гасим: свои две — правилом на ней самой, верхнюю у следующей — соседним селектором (она рисуется поверх подложки). Плюс два тихих признака: знак «+» уже меняется на «–», а номер записи получает акцентный тон, тот же, что у «Case details». */ .case-card::before { content: ''; position: absolute; z-index: 0; inset: 0 calc(var(--case-bleed) * -1) 12px; border-radius: var(--r-panel); background: var(--card); box-shadow: var(--card-ring); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .case-card > * { position: relative; z-index: 1; } /* наведение на закрытую полосу подсвечивает её той же подложкой вполсилы — видно, что кликается вся строка, а не одна ссылка. Только там, где курсор настоящий: на тачскрине :hover залипает после тапа */ @media (hover: hover) { .case-card:hover::before { opacity: .35; } } .case-card.is-open::before { opacity: 1; } .case-card.is-open { border-color: transparent; } .case-card.is-open + .case-card { border-top-color: transparent; } .case-card.is-open .case-card__n { color: var(--accent-text); } .case-card__head { display: grid; grid-template-columns: 40px max-content minmax(0, 1fr) max-content auto; grid-template-areas: "n illo title year cta" "n illo field year cta"; gap: 6px 28px; align-items: center; padding: 20px 0; cursor: pointer; outline: none; } .case-card__head:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); border-radius: var(--r-control); } .case-card__head:hover .case-card__cta { opacity: .75; } .case-card__illo { grid-area: illo; position: relative; aspect-ratio: 4 / 3; width: 132px; margin-bottom: 0; border-radius: var(--r-thumb); overflow: hidden; background: var(--illus-bg); } .case-card__illo > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Иллюстрация вставляется инлайном (illustrations.js), а не через : внутрь переменные темы не доходят, и на graphite с cobalt подложка осталась бы светлой. Заливка и обводка разведены по классам — один класс с fill залил бы контуры, потому что presentation attribute fill="none" слабее любого правила CSS. */ .case-card__il .il-a { fill: var(--illus-a); } .case-card__il .il-b { fill: var(--illus-b); } .case-card__il .il-ink { fill: var(--illus-ink); } .case-card__il .il-line { fill: var(--illus-text); } .case-card__il .st-a { fill: none; stroke: var(--illus-a); } .case-card__il .st-b { fill: none; stroke: var(--illus-b); } .case-card__il .st-ink { fill: none; stroke: var(--illus-ink); } .case-card__il .st-line { fill: none; stroke: var(--illus-text); } /* ── своя пара цветов у каждой из девяти иконок ─────────────────────── 05.09.2026. До этого все девять миниатюр красились одной парой --illus-a / --illus-b (умбра и алый), и ряд кейсов читался одним пятном: разными были только фигуры. Ленту тегов ниже по странице держат пять заливок (.tag--dark / --umber / --blue / --amber / --light) — иконки берут те же цвета, чтобы обе части страницы звучали одной палитрой, а не двумя. Литералов здесь нет: роли собираются из переменных темы, поэтому три примерочные схемы (themes-2026.css) подставят в иконки свои цвета сами. 12.10.2026: селектор стал [data-illo] без .case-card — те же пары цветов читают карточки-ссылки главной (.case-tile) и строки каталога (.case-row). 05.09.2026, схема «Мята на бежевом». Раскладка ролей перевёрнута, и вот почему. При лайме слот у всех девяти был одного цвета (лаймовый), а разными были заливки: цвет держали фигуры. Здесь так не выходит — из пяти тинтов референса четыре светлые и между собой почти не спорят (мята 14.15, барвинок 10.66, сливочный 15.29, холодный серый 15.87 — все относительно чернил), то есть крупной заливкой на светлом слоте ни один из них не читается: барвинок на мяте даёт 1.33, сливочный на ней же 1.08. Поэтому теперь цвет держит СЛОТ, а фигуры на нём — две тёмные: чернила и тень мяты. Это ровно приём nominal: у них тинтованная плитка с чёрной графикой поверх. --illus-bg тинт слота, свой у каждой записи — он и даёт ленте цвет --illus-a крупная заливка: чернила (на светлых тинтах 10.66…15.87) или тень мяты --illus-b вторая фигура: вторая из этой же пары --illus-ink детали ПОВЕРХ a или b — везде холст: деталь вырезана в тёмной фигуре, тот же приём, что у плашек первого экрана Пятая плитка ленты — яркая мята: она единственная из тинтов достаточно насыщена, чтобы стоять рядом с четырьмя пастельными и не выпасть (чернила на ней 11.0, тень мяты 4.71). Порядок тинтов подобран так, чтобы соседние записи не совпадали. */ [data-illo="case-01"] { --illus-bg: var(--mint); --illus-a: var(--panel-dark); --illus-b: var(--accent-text); --illus-ink: var(--bg); } [data-illo="case-02"] { --illus-bg: var(--peri); --illus-a: var(--accent-text); --illus-b: var(--panel-dark); --illus-ink: var(--bg); } [data-illo="case-03"] { --illus-bg: var(--butter); --illus-a: var(--panel-dark); --illus-b: var(--accent-text); --illus-ink: var(--bg); } [data-illo="case-04"] { --illus-bg: var(--mint-bright); --illus-a: var(--panel-dark); --illus-b: var(--accent-text); --illus-ink: var(--bg); } [data-illo="case-05"] { --illus-bg: var(--cool); --illus-a: var(--accent-text); --illus-b: var(--panel-dark); --illus-ink: var(--bg); } [data-illo="case-06"] { --illus-bg: var(--mint); --illus-a: var(--accent-text); --illus-b: var(--panel-dark); --illus-ink: var(--bg); } [data-illo="case-07"] { --illus-bg: var(--butter); --illus-a: var(--accent-text); --illus-b: var(--panel-dark); --illus-ink: var(--bg); } [data-illo="case-08"] { --illus-bg: var(--peri); --illus-a: var(--panel-dark); --illus-b: var(--accent-text); --illus-ink: var(--bg); } [data-illo="case-09"] { --illus-bg: var(--mint-bright); --illus-a: var(--accent-text); --illus-b: var(--panel-dark); --illus-ink: var(--bg); } /* заглушка слота (рисует скрипт): большой круг и пилюля — основной цвет, кружок — второй, плашка — тёмный, подпись — текст */ .case-card__ph .ph-a { fill: var(--illus-a); } .case-card__ph .ph-b { fill: var(--illus-b); } .case-card__ph .ph-ink { fill: var(--illus-ink); } .case-card__ph .ph-text { fill: var(--illus-text); } .case-card__n { grid-area: n; margin-bottom: 0; } /* в две-три колонки резервируем две строки под название и подзаголовок — ряды остаются ровными */ .case-card h4 { grid-area: title; margin-bottom: 0; min-height: 0; align-self: end; } .case-card__field { grid-area: field; color: var(--muted); font-size: 18px; line-height: 1.5; min-height: 0; align-self: start; } /* ── год кейса ── Своя колонка между текстом и «Case details»: список читается индексом, у каждой строки есть дата. Говорит вполголоса — тон подзаголовка, кегль подписи: год отвечает на вопрос «когда», а обещание строки держит название. Цифры табличные и nowrap, чтобы диапазоны 2013–2018 стояли в колонку и не переносились по тире. */ .case-card__year { grid-area: year; align-self: center; justify-self: end; color: var(--muted); font-size: 15px; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; } .case-card__cta { grid-area: cta; margin-top: 0; color: var(--accent-text); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: opacity .2s; } .case-card__cta::after { content: '+'; font-size: 22px; line-height: 1; } .case-card.is-open .case-card__cta::after { content: '\2013'; } /* Ширину держат сами куски, а не общая колонка: текст и блоки роли остаются в мере чтения (900), а плёнка кадров идёт во всю ширину раскрытой панели — иначе справа от неё оставалось бы пустое поле подложки на треть карточки. */ .case-card__content { padding: 4px 0 36px 68px; } .case-card__content > .medium-text { padding-top: 0; max-width: 900px; } .case-card__details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin-top: 28px; max-width: 900px; } .case-card__block h6 { margin-bottom: 10px; } /* пункты внутри блока: маркер — короткое тире того же тона, что и текст, без буллетов */ .case-card__list { list-style: none; display: grid; gap: 8px; } .case-card__list li { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.5; } .case-card__list li::before { content: '–'; position: absolute; left: 0; opacity: .5; } /* ══ РАСКРЫТИЕ КЕЙСА ПО СКЕЛЕТУ (CASE-INSIDE-SPEC.md) ═══════════════════ Закрытая полоса заявляет результат, раскрытие показывает доказательство. Скелет один на все кейсы, переменная часть — фигура; типов фигур пять, не девять, иначе секция превращается в зоопарк. 1 · трение — одно предложение, крупно, с акцентной чертой слева. Единственное место, где кейс говорит, что было не так. 2 · фигура — устройство решения вместо семи буллетов. 3 · кадры — сноска «вот это правда было», блок необязательный. 4 · цифры — только там, где число есть и его можно наружу. 5 · моя часть — одна строка с тегами вместо списка «Role». Левый отступ 68px даёт родитель .case-card__content, здесь его нет. Кейсы переезжают на скелет по одному: у кого нет записи в CASE_INSIDE, тот остаётся на старых четырёх списках .case-card__details. */ .cx { max-width: 1000px; padding-top: 4px; } .cx__friction { font-size: 21px; line-height: 1.5; max-width: 720px; margin-bottom: 32px; padding-left: 18px; border-left: 3px solid var(--accent); } .cx__figure { margin: 0 0 32px; } .cx__caption { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } /* цифры результата: карточка появляется только там, где число можно наружу */ .cx__nums { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .cx__num { background: var(--card); box-shadow: var(--card-ring); border-radius: var(--r-thumb); padding: 16px 22px; min-width: 150px; } .cx__num b { display: block; font-size: 34px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; } .cx__num span { display: block; font-size: 14px; line-height: 1.4; color: var(--muted); margin-top: 6px; } /* пометка вместо числа — там, где цифра под NDA */ .cx__num--flat b { color: var(--accent-text); } /* моя часть одной строкой вместо списка из пяти буллетов */ .cx__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; font-size: 15px; color: var(--muted); } .cx__meta b { color: var(--ink); font-weight: 500; } .cx__tag { background: var(--bg-alt); border-radius: 999px; padding: 4px 12px; font-size: 14px; color: var(--ink); } /* Вход на страницу с разбором метода. Стоит последней строкой раскрытия, после «моей части»: сначала доказательство целиком, потом предложение копнуть глубже. Есть не у каждого кейса — рисуется, только если в CASE_INSIDE задано more. */ /* Вход на отдельную страницу с разбором. Раньше был текстовой ссылкой и терялся в конце раскрытия — читатель дочитывал карточку и не понимал, что есть продолжение. Теперь это кнопка тех же пропорций, что «Связаться» в подвале: единственное действие в карточке и должно выглядеть как действие. */ .cx__more { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; border-radius: var(--r-control); padding: 15px 24px; min-height: 54px; font-size: 15px; font-weight: 700; text-decoration: none; background: var(--btn-dark-bg); color: var(--btn-dark-ink); transition: box-shadow .2s; box-shadow: inset 0 2px 5px 50px transparent; } .cx__more:hover { box-shadow: inset 0 0 5px 50px var(--btn-dark-hover); } .cx__more span { transition: transform .15s; } .cx__more:hover span { transform: translateX(3px); } /* ── фигура A · поток: перестроил устройство, а не крутил ручки ── */ .fg-flow { display: grid; grid-template-columns: minmax(0,200px) 40px minmax(0,1fr); gap: 20px; align-items: center; } .fg-flow__col { display: grid; gap: 8px; } .fg-box { background: var(--card); box-shadow: var(--card-ring); border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.35; } .fg-box--dim { background: var(--bg-alt); box-shadow: none; color: var(--muted); } .fg-box--sum { background: var(--panel-dark); color: var(--panel-dark-ink); box-shadow: none; } .fg-arrow { display: grid; place-items: center; color: var(--muted); font-size: 22px; } .fg-flow__right { display: grid; grid-template-columns: 1fr 32px minmax(0,180px); gap: 12px; align-items: center; } .fg-flow__branches { display: grid; gap: 8px; } .fg-brace { border-left: 1px solid var(--line); height: 100%; margin-left: 15px; } /* ── фигура B · дельта: метрика до и после. Длина полосы — пропорция «было / стало», сама метрика подписана справа ── */ .fg-bars { display: grid; gap: 18px; max-width: 620px; } .fg-bar__label { font-size: 15px; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 16px; } .fg-bar__label i { font-style: normal; color: var(--muted); } .fg-bar__track { display: grid; gap: 5px; } .fg-bar__row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); } .fg-bar__fill { height: 14px; border-radius: 7px; background: var(--bg-alt); } .fg-bar__fill i { display: block; height: 100%; border-radius: 7px; background: var(--line); } .fg-bar__row--now { color: var(--ink); } .fg-bar__row--now .fg-bar__fill i { background: var(--accent); } /* ── фигура C · шаги: метод, что чему предшествует ── */ .fg-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; max-width: 900px; } .fg-step { position: relative; padding: 0 16px 0 0; } .fg-step::before { content: ''; display: block; height: 2px; background: var(--line); margin-bottom: 14px; } .fg-step:first-child::before { background: var(--accent); } .fg-step__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-dark); color: var(--panel-dark-ink); font-size: 12px; margin-bottom: 10px; } .fg-step b { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; margin-bottom: 6px; } .fg-step span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); } /* ── фигура D · масштаб: количество, которое видно ── */ .fg-dots { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; } .fg-dots__grid { display: grid; grid-template-columns: repeat(20, 12px); gap: 6px; } .fg-dots__grid i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); display: block; } .fg-dots__grid i.is-seed { background: var(--panel-dark); } .fg-dots__legend { display: grid; gap: 10px; font-size: 15px; } .fg-dots__legend div { display: flex; align-items: center; gap: 10px; color: var(--muted); } .fg-dots__legend b { width: 12px; height: 12px; border-radius: 50%; display: block; } /* ── кадры: полоса квадратов под фигурой ── Квадрат, а не широкий кадр: широкий требует разглядывания и начинает спорить с фигурой за внимание, квадрат читается меткой «вот это правда было». В полосе не больше пяти, остальные листаются в крупном плане — крупный план тот же общий lightbox, что и у галереи старых кейсов. */ .ev { margin-bottom: 28px; } .ev__cap { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .ev__cap i { font-style: normal; opacity: .7; } .ev__strip { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; } .ev__strip::-webkit-scrollbar { display: none; } .ev__shot { flex: 0 0 auto; width: 104px; height: 104px; padding: 0; border: 0; cursor: zoom-in; border-radius: var(--r-thumb); overflow: hidden; background: var(--bg-alt); scroll-snap-align: start; box-shadow: var(--card-ring); transition: transform .18s; } .ev__shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .ev__shot:hover { transform: translateY(-2px); } .ev__shot:focus-visible { box-shadow: 0 0 0 2px var(--focus); outline: none; } @media (max-width: 900px) { .fg-flow, .fg-flow__right { grid-template-columns: 1fr; } .fg-steps { grid-auto-flow: row; gap: 18px; } .fg-dots__grid { grid-template-columns: repeat(10, 12px); } } /* ── «Close» внизу раскрытой панели ── До 04.09.2026 это была тёмная кнопка .btn слева под текстом: единственный тяжёлый элемент внутри лёгкой панели, и стоял он не там, где кейс открывали. Теперь оба триггера набраны одинаково — терракота, знак справа, тот же кегль: «Case details +» в голове открывает, «Close –» внизу закрывает. Вторая подпись прижата к правому краю панели, ровно под знаком в голове: взгляд закрывает кейс там же, где открыл. width: fit-content нужен рядом с margin-left: auto — inline-flex сам вправо не уедет. Обнуляем ещё и браузерный вид