/* ══════════════════════════════════════════════════════════════════ ПРАВКИ ПОВЕРХ СБОРКИ Этот файл не из билда. Сам билд минифицирован и исходников к нему на машине нет, поэтому всё, что мы меняем в дизайне, живёт здесь — одним читаемым списком, который потом переносится в репозиторий руками. Ничего в assets/ не трогаем. Подключён из index.html всех четырёх локалей последним, поэтому выигрывает по порядку, без !important, где это возможно. ══════════════════════════════════════════════════════════════════ */ /* ── 1. Изолинии фона ────────────────────────────────────────────── Два скопления замкнутых колец — 7 вокруг точки 430,330 и 5 вокруг 1180,720 — рисуются процедурно в JS и лежат фиксированным слоем под всей страницей (плюс копия внутри разворота в фильме). Читаются как контуры озера на топографической карте. Убираем оба. Слой остаётся в DOM (он aria-hidden, разметке не мешает) — если понадобится вернуть, достаточно убрать этот блок. */ .contours { display: none; } /* ── 2. Failures: стеклянная лента вместо сетки ──────────────────── Что было: шесть одинаковых карточек в сетке 3×2 на светлой бумаге. Ровно тот случай, который design-taste-frontend запрещает прямым текстом (§9.E, «NO 3-column equal feature cards»), и там же назван разрешённый выход: горизонтальная лента со snap для списков, где важна широта, а не сравнение (§4.5). ПОЧЕМУ ТЁМНАЯ ЗЕМЛЯ. Стекло — это то, что видно СКВОЗЬ него. На плоской бумаге #f9f5f0 прозрачная карточка неотличима от серого прямоугольника с рамкой, и никакого liquid glass не получится. Земля нужна. Она не выдумана: это токены .deep, которыми на сайте уже сделаны manifest, formats и финал, — тот же тёмно-синий #132230 и тот же светло-голубой акцент #aac6e1. Синий, как и просил Максим: #55718c — это ровно та кнопка «message me» в светлой зоне. Про сам материал: apple-design §12 (яркая верхняя кромка, крупная поверхность читается толще, нельзя класть светлое стекло на светлое стекло) и design-taste-frontend §7 (1px внутренняя рамка + inset-блик для преломления кромки, обязательный непрозрачный запасной вариант). Настоящего Liquid Glass в вебе не существует — это приближение на backdrop-filter, так оно и подписано. ────────────────────────────────────────────────────────────────── */ #failures{ /* Токены deep-зоны, слово в слово из билда: .deep{...} */ --ink-1:#132230; --ink-0:#1c2c3b; --fg:#f5f0e8; --fg-2:#c3b8aa; --fg-3:#8d8983; --line:#f5f0e826; --line-2:#f5f0e847; --accent:#aac6e1; /* Стекло: один набор чисел на всю секцию, чтобы карточки, кнопки и колодец под картинкой были из одного материала. */ --glass-top:#f5f0e81c; /* верх плёнки, свет падает сверху */ --glass-bot:#f5f0e80a; /* низ, тени */ --glass-edge:#f5f0e820; /* 1px внутренняя рамка */ --glass-lip:#f5f0e847; /* блик на самой кромке */ --well:#0a141d3d; /* колодец под картинкой: вырез, не второе стекло */ color:var(--fg); isolation:isolate; position:relative; padding-block:var(--s7) var(--s6); /* колонка нужна только затем, чтобы управление лентой встало ПОД ленту: скрипт дописывает его последним ребёнком секции, а порядок задаём здесь. Псевдоэлемент-фон абсолютный, флекс-элементом не становится. */ display:flex; flex-direction:column; } #failures .hd { order:1 } #failures .fails__grid{ order:2 } #failures .rail { order:3 } /* ── Что убрано ────────────────────────────────────────────────────── Надзаголовок «The price of not having one» и примечание про открытые источники. Оба — мелкий текст, который никто не читает, и оба попадают под EYEBROW RESTRAINT в design-taste-frontend. На apple.com/os/macos во всей странице ровно три размера (48 / 28 / 17) и ни одного надзаголовка; двенадцатый кегль там только в юридическом подвале. Узлы остаются в разметке — если понадобится вернуть, достаточно убрать эти две строки. */ #failures .hd>.tag { display:none } #failures .fails__note{ display:none } /* Земля во всю ширину. body у сборки с overflow-x:hidden, поэтому 100vw безопасен и полосу прокрутки не родит. */ #failures:before{ content:""; position:absolute; inset:0 calc(50% - 50vw); z-index:0; pointer-events:none; background: radial-gradient(85% 55% at 14% 2%, #2b4c6b7a 0%, #2b4c6b00 62%), radial-gradient(60% 45% at 52% 58%, #55718c3d 0%, #55718c00 68%), radial-gradient(75% 60% at 94% 108%, #55718c66 0%, #55718c00 64%), var(--ink-1); } #failures>*{ position:relative; z-index:1 } /* Шапка: слева текст, справа — управление лентой. SPLIT-HEADER BAN снят собственной оговоркой скилла: в правой колонке живой элемент управления, а не абзац-наполнитель. */ #failures .hd>h2 { max-width:16ch } #failures .hd>.lead{ color:#f5f0e8c7; max-width:54ch } /* ── Лента ───────────────────────────────────────────────────────── */ #failures .fails__grid{ display:flex; grid-template-columns:none; /* гасим сетку из билда */ grid-template-rows:none; gap:clamp(14px,1.5vw,22px); margin-top:var(--s5); overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; scrollbar-width:none; /* Вылет вправо за край контейнера: видно, что карточки не кончились */ margin-inline:calc(var(--pad) * -1) calc(50% - 50vw); padding-inline:var(--pad); padding-block:6px 28px; scroll-padding-inline-start:var(--pad); } #failures .fails__grid::-webkit-scrollbar{ display:none } /* ── Карточка ────────────────────────────────────────────────────── */ #failures .fail{ flex:0 0 clamp(300px,30vw,420px); scroll-snap-align:start; display:flex; flex-direction:column; padding:16px 16px 24px; border-radius:24px; background:linear-gradient(157deg,var(--glass-top) 0%,var(--glass-bot) 46%,var(--glass-top) 100%); -webkit-backdrop-filter:blur(20px) saturate(155%); backdrop-filter:blur(20px) saturate(155%); box-shadow: inset 0 1px 0 var(--glass-lip), inset 0 0 0 1px var(--glass-edge), 0 26px 54px -30px #040b12e6; transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out); } @media (hover:hover) and (pointer:fine){ #failures .fail:hover{ transform:translateY(-4px); box-shadow: inset 0 1px 0 #f5f0e852, inset 0 0 0 1px #f5f0e82e, 0 34px 64px -30px #040b12; } } /* Колодец под картинкой. Тёмный вырез, а не второе стекло поверх стекла (apple-design §12 запрещает светлое на светлом). */ #failures .fail__f{ border-radius:14px; background:var(--well); box-shadow:inset 0 0 0 1px #f5f0e814; overflow:hidden; position:relative; cursor:zoom-in; } #failures .fail__f img{ padding:10px } /* Кружок «увеличить» в углу картинки. Это псевдоэлемент самой кнопки зума, а не декорация рядом с ней: подпись у кнопки уже есть. */ #failures .fail__zoom:after{ content:""; position:absolute; right:10px; bottom:10px; width:32px; height:32px; border-radius:999px; background:#f5f0e814; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px #f5f0e82b, inset 0 1px 0 #f5f0e83d; opacity:0; transform:scale(.9); transition:opacity .2s var(--ease-out), transform .2s var(--ease-out); } #failures .fail__zoom:before{ content:""; position:absolute; right:19px; bottom:19px; width:14px; height:14px; z-index:1; background:var(--fg); opacity:0; transform:scale(.9); transition:opacity .2s var(--ease-out), transform .2s var(--ease-out); -webkit-mask:var(--i-zoom) center/contain no-repeat; mask:var(--i-zoom) center/contain no-repeat; } #failures .fail:hover .fail__zoom:after, #failures .fail:hover .fail__zoom:before, #failures .fail__zoom:focus-visible:after, #failures .fail__zoom:focus-visible:before{ opacity:1; transform:none } #failures .fail__zoom:active{ transform:scale(.985) } #failures .fail__zoom:focus-visible{ outline:2px solid var(--accent); outline-offset:4px } /* ── Текст карточки ──────────────────────────────────────────────── */ #failures .fail__place{ display:flex; align-items:center; gap:8px; margin-top:22px; padding-inline:6px; /* Было --fg-3 (#8d8983) капсом на 11px: 3,3:1 на стекле, ниже AA, Максим и увидел, что оно не читается. Стало 5,6:1 и нормальный кегль. На тёмном Apple тоже не серит текст, а ставит белый с прозрачностью. */ color:#f5f0e8b8; font-size:.9375rem; font-weight:500; letter-spacing:-.005em; } #failures .fail__place:before{ content:""; flex:0 0 auto; width:15px; height:15px; background:var(--accent); -webkit-mask:var(--i-pin) center/contain no-repeat; mask:var(--i-pin) center/contain no-repeat; } #failures .fail__t{ margin-top:8px; padding-inline:6px; font-size:clamp(1.5rem,1.95vw,1.75rem); letter-spacing:-.026em; line-height:1.14; color:var(--fg); } #failures .fail__b{ margin-top:14px; padding-inline:6px; color:#f5f0e8c4; font-size:1rem; line-height:1.6; } #failures .fail__m{ display:flex; gap:11px; margin-top:auto; padding:20px 6px 0; border-top:1px solid var(--line); color:var(--fg); font-size:1.0625rem; line-height:1.5; } #failures .fail__m:before{ content:""; flex:0 0 auto; width:17px; height:17px; margin-top:4px; background:var(--accent); opacity:.85; -webkit-mask:var(--i-warn) center/contain no-repeat; mask:var(--i-warn) center/contain no-repeat; } #failures .fails__note{ margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); color:var(--fg-3); } /* ── Управление лентой (строится в enhance.js) ───────────────────── */ /* Полоса со стрелками под лентой, прижата вправо — ровно так это сделано на apple.com/br/os/macos: отдельный ряд под галереей, две круглые кнопки 36px у правого края, никаких счётчиков и полос прогресса. Счётчик «01 / 06» убран: листать умеют все, а нумерация — это ещё один мелкий текст, который нечего читать. */ #failures .rail{ display:flex; justify-content:flex-end; gap:10px; margin-top:var(--s3); } #failures .rail__b{ width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border:0; border-radius:999px; cursor:pointer; background:linear-gradient(157deg,var(--glass-top),var(--glass-bot)); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); box-shadow:inset 0 1px 0 var(--glass-lip), inset 0 0 0 1px var(--glass-edge); transition:transform .14s var(--ease-out), box-shadow .2s var(--ease-out), opacity .2s ease; } #failures .rail__b i{ width:18px; height:18px; background:var(--fg); -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } #failures .rail__b--prev i{ -webkit-mask-image:var(--i-left); mask-image:var(--i-left) } #failures .rail__b--next i{ -webkit-mask-image:var(--i-right); mask-image:var(--i-right) } #failures .rail__b:hover{ box-shadow:inset 0 1px 0 #f5f0e852, inset 0 0 0 1px #f5f0e833 } #failures .rail__b:active{ transform:scale(.94) } #failures .rail__b:focus-visible{ outline:2px solid var(--accent); outline-offset:3px } #failures .rail__b[disabled]{ opacity:.32; cursor:default } #failures .rail__b[disabled]:active{ transform:none } /* ── Иконки. Семейство lucide — то же, что уже стоит в сборке (design-taste-frontend §3.C: одно семейство на проект, своё рисовать нельзя). Глифы: map-pin, triangle-alert, maximize-2, arrow-left, arrow-right. ──────────────────────────────────── */ #failures{ --i-pin:url("data:image/svg+xml;utf8,"); --i-warn:url("data:image/svg+xml;utf8,"); --i-zoom:url("data:image/svg+xml;utf8,"); --i-left:url("data:image/svg+xml;utf8,"); --i-right:url("data:image/svg+xml;utf8,"); } /* ── Узкие экраны ────────────────────────────────────────────────── */ @media (width <= 900px){ #failures .hd{ grid-template-columns:minmax(0,1fr) } #failures .hd>h2{ max-width:none } #failures .rail__b{ width:38px; height:38px } #failures .fails__grid{ margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad) } #failures .fail{ flex-basis:min(78vw,320px) } } /* ── Запасные варианты ───────────────────────────────────────────── */ @media (prefers-reduced-transparency: reduce){ #failures .fail, #failures .rail__b, #failures .fail__zoom:after{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#1e3145; } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #failures .fail, #failures .rail__b{ background:#1e3145 } } @media (prefers-reduced-motion: reduce){ #failures .fail, #failures .rail__b, #failures .fail__zoom:after, #failures .fail__zoom:before{ transition:none } #failures .fail:hover{ transform:none } } /* .deep вешается скриптом (см. enhance.js) ради перекраски шапки. Класс тащит за собой overflow:hidden — он бы обрезал вылет ленты вправо и подсветку под карточками. Возвращаем. */ #failures.deep{ overflow:visible } /* ── 3. Мелкий текст и лишние эффекты по всей странице ───────────── Разбор по замечаниям от 17.09.2026. Проверено по apple.com/br/os/macos: на 1440 там ровно три кегля — 48/52 крупный заголовок, 28/32 текст карточки, 17/20 основной, — и двенадцатый кегль только в юридическом подвале. Ни одного надзаголовка, ни одной нумерации разделов, ни одного мигающего слоя. ────────────────────────────────────────────────────────────────── */ /* ── 3.1 Надзаголовки ───────────────────────────────────────────── «Сколько стоит её отсутствие», «Как читали место», «Репозиция в одну строку» и прочие. Нужны были, чтобы заголовок не висел один, но читать их никто не начинает. design-taste-frontend: EYEBROW RESTRAINT, максимум один на три секции; у нас их было восемь. Класс .tag на этом сайте носят ещё и контакты с копирайтом в подвале и строка сроков в методе — это содержание, не надзаголовки, поэтому гасим точечно, а не по классу. */ .hd>.tag, #work .tag, #formats .after>.tag { display:none } /* ── 3.2 Световой слой в тёмных зонах ───────────────────────────── .deep__lit — отдельный слой поверх тёмных секций: радиальное пятно, растянутое на 140% высоты, с бесконечной анимацией 38 с. Именно он даёт мутную светлую дымку по верхнему и нижнему краю блока с ценами. Плюс это ровно то, от чего предостерегает apple-design §14: медленные зацикленные колебания около 0,2 Гц. Слой остаётся в разметке. */ .deep__lit{ display:none } /* ── 3.3 Нумерация находок 01 02 03 ─────────────────────────────── Три строки в кейсе были пронумерованы, и те же цифры стояли на булавках акварельного плана. Нумерация разделов и списков — прямой запрет design-taste-frontend §9.F. Связь строки с булавкой никуда не делась: наведение по-прежнему подсвечивает нужную. Колонку под цифру убираем, иначе останется пустой отступ. */ .find{ grid-template-columns:minmax(0,1fr) } .find__n{ display:none } .geo__n { display:none } /* Подстрочник находки был серым девятым кеглем со стрелкой-глифом вместо маркера. Стрелку убираем, кегль поднимаем до основного. */ .find__c:before{ content:none } .find__c{ font-size:1rem; line-height:1.55; color:var(--fg-2) } .find__t{ font-size:clamp(1.15rem,1.45vw,1.3rem) } /* ── 3.4 Подписи на аэрофотоснимке ──────────────────────────────── WATER / FOREST / MEADOW / LOTS были набраны капсом одиннадцатым кеглем с трекингом .14em, и к каждой подписи шла волосяная линия с точкой на конце. Капс с широким трекингом Максим забраковал ещё в августе, а волосяные линии-указатели design-taste-frontend называет декорацией, которая ничего не организует. Оставляем слова, снимаем украшения, поднимаем кегль. */ .fleg__k{ text-transform:none; letter-spacing:-.01em; font-size:1rem; font-weight:600 } .fleg__k:before, .fleg__k:after{ display:none } .fleg__v{ font-size:.9375rem; line-height:1.45; color:#f5f0e8d6; margin-top:3px } /* ── 3.5 Светлые швы на границе тёмных зон ──────────────────────── Два слоя одного приёма: цвет бумаги, залитый градиентом внутрь тёмного блока на 190 px сверху и снизу. Задумано как мягкий переход между светлой и тёмной зоной, читается как грязная серая дымка по краю — это и есть тот самый «shadow/light». Граница между зонами и без него понятна: она и есть граница. */ .formats:before{ display:none } /* блок с ценами */ .oneframe:after { display:none } /* верх кадра в кейсе */ /* ── 3.6 Кейс: заголовок и кадр ─────────────────────────────────── ЗАГОЛОВОК. .hd--split ставит надзаголовок в левую колонку, а заголовок с лидом в правую. Надзаголовок убран (3.1), и левая колонка осталась пустой — половина ширины ни подо что. Собираем в одну колонку, как во всех остальных секциях. Заодно снимается SPLIT-HEADER BAN из design-taste-frontend. */ #work .hd--split{ grid-template-columns:minmax(0,1fr) } #work .hd--split .tag, #work .hd--split h2, #work .hd--split .lead{ grid-column:1 } /* КАДР. В рамку 16:9 подставлена hero-territory-1200.jpg — снимок ВЕРТИКАЛЬНЫЙ, 1200×1512. background-size:cover отрезает от него больше половины высоты, и вместо посёлка вокруг озера остаётся ломоть берега с парой крыш. Это и выглядело ужасно. В бандле лежит case01-aerial-1600.jpg — тот же посёлок, тот же час, но горизонтальный, 1600×893, ровно под рамку. Подставляем его. Адрес приходит инлайном из сборки, поэтому !important — единственный способ перебить, не трогая assets/. */ #work .oneframe__f{ background-image:url(/images/case01-aerial-1600.jpg) !important; } /* Подпись под кадром: вторая строка была .8rem цветом #f8f3ee99, то есть 3:1 поверх фотографии. Поднимаем до читаемого. */ .oneframe__ttl b{ font-size:.9375rem; color:#f8f3eed6; letter-spacing:0; margin-top:6px } /* ── 3.7 Цены: три заголовка на одной линии ─────────────────────── .plan__k держит справа 132 px под плашку «Where most start», но плашка есть только у средней карточки. У левой из-за этого «Differentiation audit» ломается на две строки, и её цена уезжает вниз относительно двух соседних. Резерв оставляем только там, где плашка действительно есть. */ .formats .plan:not(.plan--pick) .plan__k{ padding-right:12px } /* ── 3.8 Кейс: остатки мелкого текста и финальный абзац ──────────── Подписи под акварелями и под планом шли тринадцатым кеглем серым. Поднимаем до читаемого — по тому же правилу, по которому убраны надзаголовки: либо текст нужен и его видно, либо он не нужен. Последний абзац кейса («A positioning the team can say out loud…») после снятия надзаголовка остался висеть обычным текстом в левой половине. Это вывод всей секции, поэтому даём ему кегль между основным и заголовочным — так он читается как финал, а не как ещё один абзац. */ .survey__cap, .verdict__draw figcaption{ font-size:.9375rem; color:var(--fg-2) } #work .mt-s7>*:not(.tag){ max-width:58ch; font-size:clamp(1.15rem,1.5vw,1.3125rem); line-height:1.5; letter-spacing:-.012em; color:var(--fg); } /* Итоговая строка кейса («From escape the noise to recharge at full speed») стояла в левой колонке по центру относительно высокой правой — из-за этого висела в пустоте, оторванная и от линейки сверху, и от абзаца справа. Прижимаем к верху: строка, линейка и абзац читаются одним рядом. */ #work .verdict{ align-items:start } /* ── 3.9 Первый экран ───────────────────────────────────────────── Слово «Situation» над заголовком фильма — такой же надзаголовок, как остальные восемь. Убираем ради одного правила на всю страницу: надзаголовков нет нигде. */ #film .hero__type>.tag{ display:none } /* ══════════════════════════════════════════════════════════════════ 4. ЧИСТКА СБОРКИ, 18.09.2026 Аудит по redesign-existing-projects, секция за секцией. Главный вывод: страница выглядела «без вкуса» не из-за палитры. Палитра спокойная и своя (бумага #f9f5f0, тёмно-синий #132230, один синий акцент), её не трогаем - Максим прямо просил ничего яркого. Страницу портили недоделки, которые уехали в прод вместе со сборкой: цветные плашки с именами файлов вместо картинок, битая картинка с alt-текстом поперёк экрана, пустой портрет, и секция, которая угоняет скролл на 4360 px ради одной ленты. ══════════════════════════════════════════════════════════════════ */ /* ── 4.1 Method: картинки вместо заглушек ───────────────────────── В колоде три шага, и у каждого вместо кадра стоит .step__stub: зелёная, синяя, бурая плашка с подписью «legend.png», «world.png». При этом нужные кадры лежат в бандле и просто не подключены: metod-legenda (акварель будущего дома), metod-mir (тот же дом, уже мир), metod-prodazhi (материалы на столе отдела продаж). Ровно три шага метода - нарратив, мир, продажи. Заглушка остаётся узлом React, мы кладём кадр ей в фон. Подпись с именем файла гасим. Инлайновый background у заглушки перебивается только через !important. */ .step:nth-child(1) .step__stub{ background:url(/images/metod-legenda-960.webp) center/cover no-repeat, #eee7dd !important } .step:nth-child(2) .step__stub{ background:url(/images/metod-mir-960.webp) center/cover no-repeat, #132230 !important } .step:nth-child(3) .step__stub{ background:url(/images/metod-prodazhi-960.webp) center/cover no-repeat, #3a2a1e !important } .step__stub{ border-radius:14px } .step__stub-file{ display:none } .step__plate{ aspect-ratio:16/9; max-height:42vh } /* Номера шагов 01 02 03 и нумерация ходов внутри шага. Нумерация разделов - прямой запрет §9.F design-taste-frontend, и Максим её уже вычеркнул в кейсе. Порядок и так виден: карточки едут по одной. */ .step__n{ display:none } .step__moves li{ padding-left:0; font-size:1.0625rem; line-height:1.5; color:var(--fg-2) } .step__moves li:before{ content:none } .step__moves{ gap:12px } /* Надзаголовок «Method» - такой же, как восемь снятых в §3.1, только живёт в другой обёртке. Строка сроков - содержание, её не прячем, а поднимаем до основного кегля. */ .pin__side>.tag:first-child{ display:none } .pin__side>.tag:last-child{ font-size:1.0625rem; font-weight:500; color:var(--fg-2); letter-spacing:-.01em } .pin__side .note{ font-size:1.0625rem } /* ── 4.2 Places ─────────────────────────────────────────────────── Три вещи. Список типов мест шёл через серединные точки - «·» после каждого слова, 13 штук; design-taste-frontend §9.F держит её «на пайке», одна на строку максимум. Воздух между словами делает ту же работу без знака. Абзац .places__said - мелкий серый пересказ лида. */ .places__kind:not(:last-child):after{ content:none } .places__kinds{ gap:6px clamp(22px,2.6vw,40px); max-width:none; color:var(--fg) } .places__kind{ display:inline-block } .places__said{ display:none } /* ── 4.3 Range ──────────────────────────────────────────────────── Три цветные коробки с подписями panama-tower.jpg, panama-facade.jpg, panama-waterfront.jpg и примечание «фото приедут позже, коробки держат место». Кадров в бандле нет. Показывать посетителю пустые места под будущие фото хуже, чем не показывать секцию: она не держит место, она сообщает, что сайт недоделан. Узел остаётся; когда кадры появятся, достаточно удалить эту строку. */ #range{ display:none } /* ── 4.5 Formats: карточки из того же стекла, что в Failures ────── На тёмно-синей земле стояли три кремовые карточки-бумажки. Это третий материал на странице - бумага, тёмное стекло и теперь бумага на тёмном. design-taste-frontend: одна система поверхностей. Делаем их из того же тёмного стекла, что лента провалов выше, и цены сразу становятся главным в карточке: белые, крупные. Размытие фона не ставим: high-end-visual-design разрешает blur только на фиксированных элементах, а под карточками всё равно ровный тёмно-синий, размывать там нечего. */ .formats .plan{ --fg:#f5f0e8; --fg-2:#f5f0e8c7; --fg-3:#f5f0e89e; --line:#f5f0e824; --line-2:#f5f0e840; --accent:#aac6e1; color:var(--fg); background:linear-gradient(157deg,#f5f0e817 0%,#f5f0e807 46%,#f5f0e812 100%); border:0; border-radius:24px; box-shadow:inset 0 1px 0 #f5f0e83d, inset 0 0 0 1px #f5f0e81f, 0 26px 54px -30px #040b12e6; } .formats .plan--pick{ background:linear-gradient(157deg,#f5f0e826 0%,#f5f0e80d 46%,#f5f0e81c 100%); box-shadow:inset 0 1px 0 #f5f0e866, inset 0 0 0 1px #aac6e157, 0 34px 64px -28px #040b12; } .formats .plan--pick .plan__badge{ color:#f5f0e8d9; background:#f5f0e81a } .formats .plan--pick .pill, html[data-theme=light] .formats .plan--pick .pill{ background:#f5f0e8; color:#132230 } .formats .plan .plan__p{ color:#f5f0e8; font-size:clamp(2.4rem,3.4vw,3rem) } .formats .plan .plan__k{ font-size:1.1875rem } .formats .plan .plan__t{ font-size:.9375rem; color:var(--fg-3) } .formats .plan .plan__d{ font-size:1rem; color:var(--fg-2) } .formats .plan .plan__h{ font-size:.9375rem; color:var(--fg) } .formats .plan .plan__l li{ font-size:1rem; color:var(--fg-2) } .formats .plan .plan__go{ color:var(--fg) } .formats .plans__note{ font-size:.9375rem } /* ── 4.6 Legend: подписи строк и «имя скрыто» ───────────────────── Подписи слева («Core idea», «The story») шли тринадцатым кеглем, а «имя скрыто» было обведено пунктирной пилюлей - это единственный пунктир на всём сайте, и он читается как поле формы. */ .doc-sheet__k{ font-size:1rem; font-weight:500; color:var(--fg-2); letter-spacing:-.01em } .doc-sheet__held{ border:0 !important; padding:0 !important; background:none !important; font-size:1.0625rem; color:var(--fg-2) } /* Вторая сноска в Places (13px, «One practice, one method…») - мелкий текст, правило то же, что для надзаголовков. */ .places__note{ display:none } /* Абзацы About шли шестнадцатым; основной кегль страницы семнадцатый. */ .about .main>p{ font-size:1.0625rem; line-height:1.6 } /* Полоски прогресса Method прилипали к абзацу под ними: 16 px зазора. */ .pin__side .note{ margin-top:var(--s3) } /* ══════════════════════════════════════════════════════════════════ 5. ПРАВКИ ПО ЗАМЕЧАНИЯМ 18.09.2026 ══════════════════════════════════════════════════════════════════ */ /* ── 5.1 Кнопки: без переката текста и без магнита ──────────────── У .pill два слоя подписи. На наведении первый уезжает вверх на 110%, а копия выезжает снизу на его место - текст как будто переворачивается. Плюс кнопка ползёт за курсором (--mx/--my из JS). Максим: «анимация глупая», и одна и та же на «Message me» и «Take this one». emil-design-eng: кнопке нужен отклик на нажатие (scale .97), а не представление на наведении; наведение - то, что человек делает десятки раз, его «сократить или убрать». Оставляем тихую смену фона и нажатие. Копию подписи прячем, магнит гасим. */ .pill{ transform:none !important; transition:background-color .2s ease, box-shadow .2s ease, transform .14s var(--ease-out) } .pill .pill__l{ transform:none !important; transition:none } .pill>.pill__l+.pill__l{ display:none } .pill:active{ transform:scale(.97) !important } @media (hover:hover) and (pointer:fine){ .pill:hover{ filter:brightness(1.08) } .deep .pill:hover{ box-shadow:0 8px 24px -14px #f5f0e866 } } /* ── 5.2 Цены: кнопка в каждой карточке, и крупная ──────────────── Было: у двух тарифов стрелка-ссылка «Start with the audit →» мелким текстом, у среднего пилюля высотой 24 px. Для решения на 3 500-35 000 долларов это слишком мелкая цель. Делаем кнопку во всю ширину карточки, 52 px, у всех трёх, прижатую к низу - чтобы три кнопки стояли на одной линии. Средняя залита, крайние из того же стекла, что и карточка, только плотнее. Стрелка на наведении сдвигается на 3 px - это единственное движение. */ .formats .plan .plan__go{ align-self:stretch; justify-self:stretch; width:100%; margin-top:auto; padding:0 22px; min-height:52px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:1rem; font-weight:550; letter-spacing:-.01em; text-decoration:none; } .formats .plan a.go.plan__go{ color:#f5f0e8; background:#f5f0e814; box-shadow:inset 0 1px 0 #f5f0e833, inset 0 0 0 1px #f5f0e82e; transition:background-color .2s ease, box-shadow .2s ease, transform .14s var(--ease-out); } .formats .plan a.go.plan__go svg{ transition:transform .2s var(--ease-out) } .formats .plan a.go.plan__go:active{ transform:scale(.97) } @media (hover:hover) and (pointer:fine){ .formats .plan a.go.plan__go:hover{ background:#f5f0e824; box-shadow:inset 0 1px 0 #f5f0e847, inset 0 0 0 1px #f5f0e847 } .formats .plan a.go.plan__go:hover svg{ transform:translateX(3px) } } .formats .plan--pick .pill.plan__go{ font-size:1rem } .formats .plan--pick .pill.plan__go .pill__l{ padding:0; font-size:1rem; font-weight:600 } /* место под кнопку внизу: список не должен к ней прилипать */ .formats .plan .plan__l{ margin-bottom:var(--s4) } .formats .plan{ display:flex; flex-direction:column } /* ── 5.3 Плотность ──────────────────────────────────────────────── Секции стояли на --s7 = 140 px сверху и снизу, плюс заголовочные отступы - между двумя соседними блоками выходило под 300 px пустой бумаги. На apple.com/os/macos между разделами порядка 100-120 px при таком же кегле. Сжимаем шкалу, а не каждую секцию руками: все отступы сборки пересчитаются вместе и останутся в пропорции. */ :root{ --s5:56px; --s6:80px; --s7:108px } /* ── 5.4 Failures компактнее ────────────────────────────────────── Карточки были 420 px шириной и почти 760 px высотой: в экран влезало две с половиной, и лента читалась как стена. Ужимаем карточку до 340 px, текст до основного кегля, отступы внутри плотнее. В экран на 1440 теперь входят три целых и край четвёртой - сразу видно, что лента листается. */ #failures{ padding-block:var(--s6) var(--s5) } #failures .fail{ flex-basis:clamp(280px,24vw,340px); padding:12px 12px 20px; border-radius:20px } #failures .fail__f{ border-radius:12px } #failures .fail__place{ margin-top:16px; font-size:.875rem } #failures .fail__t{ margin-top:6px; font-size:clamp(1.25rem,1.5vw,1.4rem) } #failures .fail__b{ margin-top:10px; font-size:1rem; line-height:1.55 } #failures .fail__m{ padding-top:16px; margin-top:auto; font-size:1rem; gap:9px } #failures .fail__m:before{ width:15px; height:15px; margin-top:3px } #failures .fails__grid{ margin-top:var(--s4); padding-block:4px 20px } #failures .rail{ margin-top:var(--s2) } /* Сборка раскладывала карточку гридом и ставила детям align-self:end/start. В колонке-флексе align-self работает по горизонтали: цена уехала вправо, разделитель над «Includes» сжался до длины слова. Растягиваем всех детей по ширине; вниз кнопку прижимает margin-top:auto. */ .formats .plan>*{ align-self:stretch } /* ══════════════════════════════════════════════════════════════════ 6. ПАЛИТРА (значения перекрашены в §9 «Орех»), 18.09.2026 Разбор палитры делал отдельный агент, по design-taste-frontend §4.2 и frontend-design. Что было не так: - бумага #f9f5f0 и песок #eee7dd - кремовые, это первый пункт в списке «так выглядит сгенерированный сайт» из frontend-design (тёплый крем около #F4F1EA) и сосед запрещённых #faf7f1/#efeae0; - чернила #0e161e и тёмные зоны #132230 холодные: тёплое и холодное вперемешку («Mixing warm and cool grays»); - тёмно-синего нет НИ НА ОДНОМ снимке: тени леса и досок на фото - графит #181a17…#2a2927, насыщенность 4-9 %. Синий #132230 с его 43 % нарисован интерфейсом, поэтому тёмные блоки выглядели вставками с чужого сайта. Отсюда «странный цвет» у Failures; - восемь разных почти-чёрных и второй акцент: «sells» в первом экране подчёркнут глиной #be6a37. Решение: одна температура (205-210°). Один графит #221c17 - он же текст на бумаге и он же тёмная земля. Бумага нейтральная. Один акцент, сланцево-синий: #7a4e2d на бумаге (5.8:1), #d4b08c на тёмном (8.9:1). Цвет несут фотографии, интерфейс молчит. ══════════════════════════════════════════════════════════════════ */ html[data-theme=light]{ --ink-1:#f5f0e8; --ink-0:#ebe3d7; --ink-d:#221c17; --fg:#221c17; --fg-2:#5c5249; --fg-3:#6b6055; --line:#221c1721; --line-2:#221c1742; --accent:#7a4e2d; --accent-d:#653f24; --surik:#7a4e2d; } html{ background:#221c17 } .deep, #failures, .formats .plan{ --ink-1:#221c17; --ink-0:#2d251f; --fg:#f5f0e8; --fg-2:#c9bdae; --fg-3:#a89a8a; --line:#f5f0e824; --line-2:#f5f0e847; --accent:#d4b08c; } /* Failures: ровная графитовая земля вместо трёх синих пятен */ #failures:before{ background:var(--ink-d) } #failures{ --glass-top:#f5f0e810; --glass-bot:#f5f0e808; --glass-edge:#f5f0e81f; --glass-lip:#f5f0e833; --well:#120e0b3d } #failures .hd>.lead, #failures .fail__b, #failures .fail__place{ color:var(--fg-2) } @media (prefers-reduced-transparency: reduce){ #failures .fail, #failures .rail__b, #failures .fail__zoom:after{ background:#2d251f } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #failures .fail, #failures .rail__b{ background:#2d251f } } /* Цены: та же земля, без вертикального градиента сборки */ .formats{ background:var(--ink-d) } .formats .plan{ background:#f5f0e80d } .formats .plan--pick{ background:#f5f0e817; box-shadow:inset 0 1px 0 #f5f0e833, inset 0 0 0 1px #d4b08c4d, 0 34px 64px -28px #0e0b09 } .formats .plan--pick .pill, html[data-theme=light] .formats .plan--pick .pill{ background:#f5f0e8; color:#221c17 } /* Кнопки и шапка: две краски вместо пяти */ html[data-theme=light] .pill{ background:var(--fg); color:var(--ink-1) } html[data-theme=light] .pill:hover{ background:var(--fg) } html[data-theme=light] .nav[data-ground=deep] .pill{ background:#f5f0e8; color:#221c17 } /* (было: крем #f5f0e8a8 на .nav.solid и градиент под шапкой - снято в §10.1: сборка держит шапку прозрачной, плавают только пилюли) */ /* «sells»: глина была вторым акцентом */ .ch .hi{ box-shadow:inset 0 -.14em #d4b08c } /* ══════════════════════════════════════════════════════════════════ 7. НИКАКОЙ ТЕНИ ПРИ ПРОКРУТКЕ И НИКАКОГО ЗАТЕМНЕНИЯ ФОТО Этот «shadow» оказался тремя механизмами сразу (разбор - отдельный агент, по коду сборки): 1. [data-depth] - 12 секций при уходе вверх гаснут до 38 % и уезжают на 26 px; --away считает motion-*.js на каждый кадр. Тёмный блок на бумаге на выходе становится грязно-серым; 2. конец фильма: страница наплывает на видео, видео размывается; 3. колода Method: шаги перетекают друг в друга с размытием, между ними виден двойной мутный кадр. ══════════════════════════════════════════════════════════════════ */ html [data-depth], html[data-motion] [data-depth]{ opacity:1; transform:none; will-change:auto } /* Выход из фильма - по порогу data-on, который ставит сам скрипт */ .film__page[data-on="0"]{ opacity:0 !important } .film__page[data-on="1"]{ opacity:1 !important } .film__page{ transition:opacity .28s var(--ease-out) } .film__v{ filter:none !important } /* Method: без размытия и сдвига. Какой шаг виден - решает enhance.js атрибутом data-active (шаг с наибольшей прозрачностью, которую пишет скрипт сборки). Смена - короткая перекрёстная, без двойного кадра. */ @media (width > 880px) and (prefers-reduced-motion: no-preference){ html .step{ filter:none !important; transform:none !important; opacity:0 !important; transition:opacity .24s var(--ease-out) } html .step[data-active]{ opacity:1 !important } html[data-still] .step{ opacity:1 !important } } /* Попутно найденная ошибка сборки: при reduced-motion скрипт шаги не ведёт, а .step стоит на opacity:0 - колода на десктопе пустая. */ @media (width > 880px) and (prefers-reduced-motion: reduce){ .pin{ height:auto } .pin__stage{ height:auto; position:static } .pin__deck{ gap:var(--s5) } .step{ grid-area:auto; opacity:1; filter:none; transform:none } } /* Цитата манифеста сразу белая, без «зажигания» слов по прокрутке */ [data-glow], .manifest blockquote [data-glow]{ color:var(--fg) } .manifest blockquote{ text-shadow:none } /* Зерно на тёмных зонах */ .plane:after{ display:none } /* ══════════════════════════════════════════════════════════════════ 8. КАРТИНКИ: ЧТО ОСТАВЛЕНО, ЧТО ПРИГЛУШЕНО, ГДЕ ПЛАШКИ Аудит всех кадров делал отдельный агент: смотрел каждый файл и мерил насыщенность и подложку по пикселям. Правила Максима - одна территория, холодная приглушённая зелень, туман, тёплый свет только из окон; фото и акварель не делят секцию; ничего яркого; никаких тёмных градиентов под текстом на фото. ПЛАШКА - та же земля на ступень ниже, без текста и без нового цвета: на бумаге #f5f0e8 - #ebe3d7, на второй бумаге - #e2d9cb, в тёмных зонах - сам графит. Волосяная внутренняя линия, чтобы край был вырезанным, а не залитым. ══════════════════════════════════════════════════════════════════ */ :root{ --plate:#ebe3d7; --plate-2:#e2d9cb; --plate-line:#221c170f; } /* ── 8.1 Кейс #work: фото → плашка, легенда под кадр ─────────────── Аэрофото: насыщенность 0.42, кислотная летняя трава, и оно стояло в одной секции с двумя акварелями. Под подписями Water/Forest/... был тёмный градиент на 86 % - тот самый «ужас». Кадр становится плашкой, подписи - строкой в четыре колонки под ней. */ #work .oneframe__f{ display:none } #work .oneframe__ui{ display:none } #work .oneframe{ background:var(--plate); box-shadow:inset 0 0 0 1px var(--plate-line); border-radius:14px; overflow:visible } #work .fleg{ position:static; inset:auto; width:auto; margin:0; transform:none; padding:var(--s3) 0 0; background:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); } #work .fleg__k{ color:var(--fg) } #work .fleg__v{ color:var(--fg-2) } @media (width <= 760px){ #work .fleg{ grid-template-columns:repeat(2,minmax(0,1fr)) } } /* ── 8.2 Акварели: бумага рисунка растворяется в странице ────────── Сборка красит бумагу всех .wc SVG-фильтром #wcPaper в зеленовато- серый, на странице выходит #f4f3ec - вокруг рисунков виден грязный прямоугольник. Дотягиваем белое до 255 и смешиваем multiply: белое исчезает, остаётся только рисунок. */ .survey__i.wc, .verdict__draw img.wc, .qa__sketch.wc{ filter:brightness(1.03) } .survey{ mix-blend-mode:multiply } .verdict__draw img.wc, .qa__sketch.wc{ mix-blend-mode:multiply } /* ── 8.3 Method: шаги 1 и 3 → плашки, шаг 2 остаётся ─────────────── Шаг 1 - акварель в секции с фото и белая карточка на бумаге. Шаг 3 - стоковый мокап с неоновым планшетом и фейковым логотипом. Шаг 2 (metod-mir) - эталон всей арт-дирекции, его не трогаем. */ .pin__deck .step:nth-child(1) .step__stub, .pin__deck .step:nth-child(3) .step__stub{ background:var(--plate) !important; box-shadow:inset 0 0 0 1px var(--plate-line); } /* ── 8.4 Places: панорама → плашка ───────────────────────────────── Коллаж с вулканом, лыжами, радугой над водопадом, небоскрёбами и бирюзовым пляжем: ярче всего на сайте и против всех трёх правил. */ .places__shot picture{ display:none } .places__shot{ aspect-ratio:1915/821; background:var(--plate) } /* ── 8.5 Bank: одна семья по цвету ───────────────────────────────── Кадр 4 - насыщенность 0.67, электрически-синее небо и вода: максимум на сайте → плашка. Остальные чуть приглушены; туман (кадр 1) - лучший кадр сайта, не трогаем. */ .bank__track .bank__f:nth-child(2) img{ filter:saturate(.68) brightness(.96) contrast(.97) } .bank__track .bank__f:nth-child(3) img{ filter:saturate(.82) } .bank__track .bank__f:nth-child(5) img{ filter:saturate(.72) brightness(.95) } /* ── 8.6 Compare: пригасить закат у «после» ───────────────────────── */ .ba > img{ filter:saturate(.8) brightness(.97) } /* ── 8.7 Первый разворот после фильма ────────────────────────────── Кислотная осень, ярко-синее небо, человек машет с крыши - насыщенность 0.52, дальше всех от эталона. */ /* ── 8.8 Манифест и финал: графит вместо фото ────────────────────── Силуэт на золотом закате и лучи сквозь лес с семьёй на мостках: оба клише, и оба читались только из-за градиента до 85 % поверх. Без фото текст стоит на ровной тёмной земле - ни тени, ни плашки под текстом не нужно. [style] поднимает специфичность над инлайновым фоном сборки. */ /* (§21) фото в манифесте и финале вернулись: правило, которое их прятало, снято */ /* 8.2 (дополнение). multiply смешивает рисунок с тем, что под ним В ЕГО СЛОЕ. Обёртки .reading__grid и .verdict до появления на экране анимируются opacity/transform и становятся отдельным слоем с прозрачным фоном - рисунок смешивался с пустотой, и белая бумага оставалась белой. Красим сами обёртки в бумагу страницы: теперь смешиваться есть с чем, в каком бы состоянии анимация ни была. */ #work .reading__grid, #work .verdict, #answers .qa__side{ background-color:var(--ink-1) } /* Подписи под плашкой кейса и подстрочники находок шли тринадцатым кеглем. Правило одно на весь сайт: мелкого текста нет. */ #work .fleg__k{ font-size:1.0625rem } #work .fleg__v{ font-size:1rem; line-height:1.5 } #work .find__c{ font-size:1rem } #work .verdict__note{ font-size:1.0625rem; line-height:1.55 } /* ══════════════════════════════════════════════════════════════════ 9. ПАЛИТРА «ОРЕХ», ABOUT И FAQ В ДУХЕ APPLE, ЛЕНТА БЕЗ УГОНА СКРОЛЛА 18.09.2026, по замечаниям Максима ПАЛИТРА. Максим попросил коричневый и тёплый крем, «но чтобы выглядело профессионально». taste-skill этот набор по умолчанию банит, но там же сказано: прямое слово брифа важнее. Значит, профессиональность делаем не цветом, а дисциплиной: - ОДИН акцент - орех #7a4e2d. Тёмный, не оранжевый (#c2763a Максим уже отверг). 6.3:1 на креме, кремовый текст на нём 6.3:1; - один тёплый почти-чёрный #221c17 и для текста, и для тёмных зон; на тёмном акцент - светлый загар #d4b08c (8.3:1); - бумага #f5f0e8, вторая бумага #ebe3d7; вторичный текст #5c5249 (6.7:1), третичный #6b6055; - никаких градиентов, свечений и второй краски. Значения §6 перекрашены в эти прямо на месте - структура одна. ЦВЕТ БРЕНДА ВИДНО. У референса фиолетовый - это кнопки, подсветка и фон. У нас орех - это главные кнопки, открытый вопрос, ссылки, ключевая фраза в About и коричнево-чёрная земля тёмных зон. ══════════════════════════════════════════════════════════════════ */ /* ── 9.1 Главные кнопки на светлом - ореховые ──────────────────────── */ html[data-theme=light] .pill{ background:var(--accent); color:#f5f0e8 } html[data-theme=light] .pill:hover{ background:var(--accent-d) } html[data-theme=light] .nav[data-over=film] .pill, .nav[data-over=film] .pill{ background:#f5f0e8; color:#221c17 } .ch .hi{ box-shadow:inset 0 -.14em #d4b08c } /* ── 9.2 About ───────────────────────────────────────────────────── Было: узкий портрет, вертикальная волосяная линия, мелкие серые абзацы и цитата между двумя горизонтальными линейками. Три типа линий на один блок. Стало, как на страницах Apple о людях и продуктах: крупный портрет со скруглением, имя - крупный заголовок, текст основным кеглем 19 px, и одна фраза-вывод крупно, без рамок, с ключевыми словами в цвете бренда. */ #about{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0 clamp(40px,6vw,104px); align-items:start; padding-block:var(--s7) } #about .hair{ display:none } #about .plate{ border-radius:24px; aspect-ratio:4/5; margin-top:0 !important } #about .main h2{ font-size:clamp(2.6rem,4.8vw,4rem); letter-spacing:-.04em; line-height:1 } #about .main>h2+p{ margin-top:var(--s4) } #about .main>p{ font-size:clamp(1.0625rem,1.3vw,1.1875rem); line-height:1.6; color:var(--fg-2); max-width:36em } #about .pull{ border:0; padding:0; margin:var(--s5) 0 0 } #about .pull p{ font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.12; letter-spacing:-.032em; font-weight:600; max-width:20ch; color:var(--fg) } #about .pull b{ color:var(--accent); box-shadow:none } @media (width <= 860px){ #about{ grid-template-columns:1fr; gap:var(--s4) } } /* ── 9.3 FAQ ─────────────────────────────────────────────────────── Было: список между волосяными линиями, вопросы 20 px, ответы серым пятнадцатым кеглем, плюс из двух волосков. Стало: каждый вопрос - отдельная карточка второй бумаги со скруглением 20 px. Открытая карточка светлеет и получает тёплую мягкую тень - видно, какая открыта, без единой линии. Плюс - в круге 32 px; у открытой круг ореховый. Ответ - основным кеглем, не серым. Порядок и поведение аккордеона - сборки, мы только одеваем его. */ #answers .acc{ border-top:0; display:grid; gap:12px } #answers .acc__i{ border:0; border-radius:20px; background:var(--ink-0); padding:0 clamp(20px,2.2vw,30px); transition:background-color .25s var(--ease-out), box-shadow .25s var(--ease-out); } @media (hover:hover) and (pointer:fine){ #answers .acc__i[data-open="0"]:hover{ background:#e4dacb } } #answers .acc__i[data-open="1"]{ background:#fcf9f4; box-shadow:0 1px 0 #221c170a, 0 18px 40px -24px #3a261466 } #answers .acc__q{ font-size:clamp(1.125rem,1.5vw,1.3125rem); font-weight:600; letter-spacing:-.02em; padding:clamp(20px,2.2vw,26px) 0 } #answers .acc__i[data-open="1"] .acc__q{ color:var(--fg) } #answers .acc__s{ width:32px; height:32px; border-radius:999px; background:#221c1712; transition:background-color .25s var(--ease-out) } #answers .acc__s:before, #answers .acc__s:after{ inset:50% 10px auto; height:1.5px; background:var(--fg) } #answers .acc__i[data-open="1"] .acc__s{ background:var(--accent) } #answers .acc__i[data-open="1"] .acc__s:before, #answers .acc__i[data-open="1"] .acc__s:after{ background:#f5f0e8 } #answers .acc__q:active .acc__s{ transform:scale(.94) } #answers .acc__a p{ font-size:1.0625rem; line-height:1.6; color:var(--fg-2); max-width:60ch; padding-bottom:clamp(22px,2.4vw,28px) } #answers .qa__side h2{ font-size:clamp(2.2rem,4vw,3.25rem); letter-spacing:-.035em; line-height:1.02 } /* ── 9.4 Лента кадров без угона скролла ──────────────────────────── «And then it exists at every hour of the year»: секция держала экран 4360 px, и вертикальная прокрутка двигала ленту вбок - в обе стороны. Максима бесило, что её приходится крутить и вниз, и вверх. Лента остаётся лентой (сетку он уже отверг), но становится обычной горизонтальной: листается пальцем, трекпадом и стрелками под ней, а страница просто проезжает мимо. JS сборки продолжает писать transform в ленту - !important его гасит. */ .bank__scroll{ height:auto !important } .bank__stage{ position:static; height:auto; overflow:visible; display:block; padding:var(--s7) 0 var(--s6) } .bank__bar{ display:none } .bank__hd h2{ font-size:clamp(1.9rem,3.4vw,3rem) } .bank__hd .lead{ color:var(--fg-2) } .bank__track{ transform:none !important; width:auto; margin-top:var(--s4); overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding-inline:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); scroll-padding-inline:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); } .bank__track::-webkit-scrollbar{ display:none } .bank__f{ scroll-snap-align:start; border-radius:18px; height:min(62vh,600px) } .bank .rail{ display:flex; justify-content:flex-end; gap:10px; max-width:var(--max); margin:var(--s3) auto 0; padding-inline:var(--pad) } .bank .rail__b{ width:44px; height:44px; flex:none; display:grid; place-items:center; border:0; border-radius:999px; cursor:pointer; background:#221c1712; color:var(--fg); transition:background-color .2s ease, transform .14s var(--ease-out), opacity .2s ease; } .bank .rail__b i{ width:18px; height:18px; background:currentColor; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat } .bank .rail__b--prev i{ -webkit-mask-image:var(--i-left); mask-image:var(--i-left) } .bank .rail__b--next i{ -webkit-mask-image:var(--i-right); mask-image:var(--i-right) } @media (hover:hover) and (pointer:fine){ .bank .rail__b:hover{ background:#221c171f } } .bank .rail__b:active{ transform:scale(.94) } .bank .rail__b:focus-visible{ outline:2px solid var(--accent); outline-offset:3px } .bank .rail__b[disabled]{ opacity:.35; cursor:default } .bank{ --i-left:url("data:image/svg+xml;utf8,"); --i-right:url("data:image/svg+xml;utf8,"); } /* ── 9.5 Цвет бренда в ценах ─────────────────────────────────────── У референса цвет бренда виден прежде всего на главном действии. У нас главное действие страницы - выбрать тариф, поэтому кнопка рекомендованного становится светлым орехом (#d4b08c, тёмный текст 8.3:1), и тем же тоном её плашка «Where most start». Одна точка цвета на тёмном блоке, остальное нейтрально. */ .formats .plan--pick .pill.plan__go, html[data-theme=light] .formats .plan--pick .pill.plan__go{ background:#d4b08c; color:#221c17 } @media (hover:hover) and (pointer:fine){ .formats .plan--pick .pill.plan__go:hover{ background:#dcbb99; filter:none } } .formats .plan--pick .plan__badge{ background:#d4b08c29; color:#e6cdb2 } /* ── 9.6 Мелочи About и FAQ ──────────────────────────────────────── Портрет: параллакс сборки сдвигает и масштабирует фото внутри рамки, и на скруглении сверху открывалась щель. Со скруглением 24 px параллакс не нужен - фото стоит ровно. Мостки: бумагу рисунка дотягиваем до белого сильнее, иначе после multiply на креме оставался бледный прямоугольник. */ #about .plate img{ transform:none !important; object-fit:cover; width:100%; height:100% } #answers .qa__sketch.wc{ filter:brightness(1.07) contrast(1.02) !important; transform:none !important } /* ══════════════════════════════════════════════════════════════════ 10. ШАПКА, 18.09.2026 ══════════════════════════════════════════════════════════════════ */ /* ── 10.1 Баг: светлая полоса на прокрутке ───────────────────────── Моя же правка палитры (§6) перекрасила фон «прилипшей» шапки .nav.solid в полупрозрачный крем. А сборка специально делает её прозрачной: шапка - это отдельные плавающие пилюли. Правило стояло позже и победило, поверх фильма легла кремовая пелена во всю ширину, и тёмные пилюли с полупрозрачным светлым текстом стали серыми на сером. Возвращаем прозрачность. */ .nav.solid, html[data-theme=light] .nav.solid, html[data-theme=dark] .nav.solid{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:0 } .nav:after, .nav.solid:after{ display:none } /* ── 10.2 Пилюли над фильмом и тёмными зонами ───────────────────── Сборка красила их холодным сине-чёрным #090d12 на 42 %, пункты меню - светлым на 70 %. Над ярким небом это читалось на грани. Делаем тёплым почти-чёрным палитры, плотнее, со стеклом, а текст ярче. */ .nav[data-over=film] .mark, .nav[data-over=film] .lang, .nav[data-over=film] .burger, .nav[data-over=film] .menu, .nav[data-ground=deep] .mark, .nav[data-ground=deep] .menu, .nav[data-ground=deep] .lang, .nav[data-ground=deep] .burger{ color:#f5f0e8; background:#221c179e; -webkit-backdrop-filter:saturate(1.4) blur(18px); backdrop-filter:saturate(1.4) blur(18px); box-shadow:inset 0 0 0 1px #f5f0e81f, inset 0 1px 0 #f5f0e81a; } .nav[data-over=film] .menu a, .nav[data-ground=deep] .menu a{ color:#f5f0e8d9 } .nav[data-over=film] .lang, .nav[data-over=film] .burger, .nav[data-ground=deep] .lang, .nav[data-ground=deep] .burger{ color:#f5f0e8e6 } .nav[data-over=film] .menu a:hover, .nav[data-ground=deep] .menu a:hover{ color:#f5f0e8; background:#f5f0e81f } .nav[data-over=film] .menu a[data-current], .nav[data-ground=deep] .menu a[data-current]{ color:#221c17; background:#f5f0e8 } /* На светлой земле пилюли - сплошной крем, текущий раздел - орех. */ .nav .mark, .nav .menu, .nav .lang, .nav .burger{ box-shadow:inset 0 0 0 1px var(--line), 0 6px 20px -12px #3a26144d } .menu a{ font-size:.875rem } .menu a[data-current]{ color:#f5f0e8; background:var(--accent) } /* ── 10.3 «Message me» ──────────────────────────────────────────── Первая попытка (стрелка в круге, 44 px) Максим забраковал: огромно и «ужаснее». И белая кнопка на закате спорит с небом. Теперь: прежний компактный размер, без стрелки, всегда орех - и на закате, и на тёмном, и на светлом. «Вкусность» не в размере, а в кромке, как у физической кнопки: светлый блик по верхнему краю, тёмная волосяная обводка, мягкая тёплая тень снизу. На наведении орех чуть светлеет, на нажатии кнопка утапливается. */ .nav .pill, .nav[data-over=film] .pill, .nav[data-ground=deep] .pill, html[data-theme=light] .nav .pill, html[data-theme=light] .nav[data-over=film] .pill, html[data-theme=light] .nav[data-ground=deep] .pill, .nav[data-over=film][data-ground=deep] .pill{ background:linear-gradient(180deg,#86583a 0%,#7a4e2d 100%); color:#f7f1e8; font-size:.8125rem; font-weight:550; letter-spacing:-.005em; box-shadow: inset 0 1px 0 #ffffff2e, /* блик по верхней кромке */ inset 0 0 0 1px #2a170b33, /* волосяная обводка */ 0 1px 2px #2a170b33, /* контакт с поверхностью */ 0 6px 16px -8px #2a170b80; /* мягкая тёплая тень */ } .nav .pill .pill__l{ padding:10px 16px } @media (hover:hover) and (pointer:fine){ .nav .pill:hover{ background:linear-gradient(180deg,#90623f 0%,#825433 100%); filter:none } } /* ══════════════════════════════════════════════════════════════════ 11. БЕЗ СРЕДНЕГО КОРИЧНЕВОГО, 18.09.2026 Орех #7a4e2d (насыщенность 46 %, светлота 33 %) Максим прочитал как «цвет неожиданности». Он прав: дорогой коричневый бывает либо почти чёрным (эспрессо, как у Aesop), либо светлым песком. Середина - никогда. Поэтому акцент на светлом - тёплый почти-чёрный, а цвет бренда держат две вещи: эспрессо главных действий и песок #d4b08c как свет на тёмном и тонкое подчёркивание ключевых слов. ══════════════════════════════════════════════════════════════════ */ html[data-theme=light]{ --accent:#2e2520; --accent-d:#1a1511; --surik:#2e2520 } /* «Message me» и все главные кнопки на светлом: эспрессо с той же кромкой - блик сверху, волосяная обводка, тёплая тень. */ .nav .pill, .nav[data-over=film] .pill, .nav[data-ground=deep] .pill, html[data-theme=light] .nav .pill, html[data-theme=light] .nav[data-over=film] .pill, html[data-theme=light] .nav[data-ground=deep] .pill, .nav[data-over=film][data-ground=deep] .pill, html[data-theme=light] .pill{ background:linear-gradient(180deg,#342a23 0%,#221c17 100%); color:#f7f1e8; box-shadow: inset 0 1px 0 #ffffff24, inset 0 0 0 1px #00000040, 0 1px 2px #1a120b40, 0 6px 16px -8px #1a120b99; } @media (hover:hover) and (pointer:fine){ .nav .pill:hover, html[data-theme=light] .pill:hover{ background:linear-gradient(180deg,#3d322a 0%,#2a221c 100%); filter:none } } /* Ключевые слова: не цвет текста, а песочная черта под ним. */ #about .pull b{ color:var(--fg); box-shadow:inset 0 -.14em #d4b08c } /* FAQ: открытый кружок - эспрессо, не орех. */ #answers .acc__i[data-open="1"] .acc__s{ background:#221c17 } /* Текущий пункт меню на светлом - эспрессо. */ .menu a[data-current]{ color:#f5f0e8; background:#221c17 } /* ── 11.1 FAQ: без белого ────────────────────────────────────────── Открытая карточка была почти белой #fcf9f4 с тенью - на тёплом креме это читалось как чужой холодный лист. Теперь все карточки одного тёплого тона, открытая - на полтона светлее, без тени. */ #answers .acc__i[data-open="1"]{ background:#f1ebe2; box-shadow:inset 0 0 0 1px #221c1714 } /* ══════════════════════════════════════════════════════════════════ 12. ГЛАВНАЯ КНОПКА «СВЕТ ЛАМПЫ» И БАГ ТЕКУЩЕГО ПУНКТА, 18.09.2026 Три субагента собрали три направления («Кофейня», «Дом вечером», «Утро выходного»). Ближе всего Максиму оказался «Дом вечером». Из него берём главную кнопку: тёплый свет лампы сквозь льняной абажур - градиент #f7e8d8 → #f0cfb4 → #dcb79e, тёмный текст #2a1d17 (8.8-13:1), блик по верхней кромке, нижняя губа, волосяное кольцо и тёплый ореол. На закате она читается как горящее окно. Одна главная кнопка на весь сайт: «Message me» в шапке, «Take this one» в ценах и «Message on WhatsApp» в финале. Раньше это были три разных цвета (эспрессо, песок, крем) - отсюда «то тёмная, то светлая». Размер у «Message me» - 44 px, у кнопок в карточках прежние 52 px во всю ширину. ══════════════════════════════════════════════════════════════════ */ :root{ --lamp-top:#f7e8d8; --lamp:#f0cfb4; --lamp-bot:#dcb79e; --on-lamp:#2a1d17; } .nav .pill, .nav[data-over=film] .pill, .nav[data-ground=deep] .pill, html[data-theme=light] .nav .pill, html[data-theme=light] .nav[data-over=film] .pill, html[data-theme=light] .nav[data-ground=deep] .pill, .nav[data-over=film][data-ground=deep] .pill, .formats .plan--pick .pill.plan__go, html[data-theme=light] .formats .plan--pick .pill.plan__go, #talk .pill, html[data-theme=light] #talk .pill, .deep #talk .pill{ position:relative; isolation:isolate; color:var(--on-lamp); background:linear-gradient(180deg,var(--lamp-top) 0%,var(--lamp) 48%,var(--lamp-bot) 100%); box-shadow: inset 0 1px 0 #fffaf4e6, /* блик по верхней кромке */ inset 0 -1px 0 #784e3438, /* нижняя губа */ 0 0 0 1px #ffecda8c, /* волосяное кольцо */ 0 1px 2px #140c0859, /* контакт */ 0 10px 26px -10px #f0c4a08a; /* тёплый ореол */ transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); } /* на светлой земле кольцо и ореол темнее, иначе кнопка тает в креме */ html[data-theme=light] .nav:not([data-over=film]):not([data-ground=deep]) .pill{ box-shadow: inset 0 1px 0 #fffaf4e6, inset 0 -1px 0 #784e3438, 0 0 0 1px #9c6f4f59, 0 1px 2px #140c0840, 0 10px 24px -10px #7a4e2d73; } .nav .pill{ font-size:.9375rem !important; font-weight:600; min-height:44px } .nav .pill .pill__l{ padding:0 22px !important; min-height:44px; display:flex; align-items:center } #talk .pill{ min-height:52px; font-size:1rem; font-weight:600 } #talk .pill .pill__l{ padding:0 28px } /* Наведение - «лампа разгорается»: сверху проступает мягкий свет, ореол чуть глубже. Без сдвига и без переката текста. 200 ms. */ .nav .pill:before, .formats .plan--pick .pill.plan__go:before, #talk .pill:before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; background:radial-gradient(120% 140% at 50% 0%,#fff8eef2,#fff8ee00 62%); transition:opacity .2s var(--ease-out); } @media (hover:hover) and (pointer:fine){ .nav .pill:hover:before, .formats .plan--pick .pill.plan__go:hover:before, #talk .pill:hover:before{ opacity:1 } .nav .pill:hover, .formats .plan--pick .pill.plan__go:hover, #talk .pill:hover{ filter:none; background:linear-gradient(180deg,var(--lamp-top) 0%,var(--lamp) 48%,var(--lamp-bot) 100%); box-shadow: inset 0 1px 0 #fffcf8, inset 0 -1px 0 #784e3433, 0 0 0 1px #fff0e2cc, 0 1px 2px #140c084d, 0 16px 36px -8px #f0c4a085, 0 0 0 6px #f0cfb41a; } } .nav .pill:active, .formats .plan--pick .pill.plan__go:active, #talk .pill:active{ transform:scale(.97) !important } /* ── Баг: текущий пункт меню - тёмная заливка и тёмный текст ─────── Правило сборки html[data-theme=light] .nav.solid .menu a[data-current] {color:var(--fg)} сильнее моего по селектору, поэтому на тёмной заливке оставался тёмный текст. Держим цвет жёстко. */ html .nav .menu a[data-current], html[data-theme=light] .nav .menu a[data-current], html[data-theme=light] .nav.solid .menu a[data-current]{ color:#f5f0e8 !important; background:#221c17 } .nav[data-over=film] .menu a[data-current], .nav[data-ground=deep] .menu a[data-current]{ color:#221c17 !important; background:#f5f0e8 } /* ── 12.1 Пилюли шапки над ярким небом ───────────────────────────── На 62 % непрозрачности розовое небо заката просвечивало сквозь тёмную пилюлю, и она становилась серо-сиреневой, а светлый текст на ней - «серым на сером». Плотнее (80 %), без усиления насыщенности фона, текст почти белый. */ .nav[data-over=film] .mark, .nav[data-over=film] .lang, .nav[data-over=film] .burger, .nav[data-over=film] .menu, .nav[data-ground=deep] .mark, .nav[data-ground=deep] .menu, .nav[data-ground=deep] .lang, .nav[data-ground=deep] .burger{ background:#221c17cc; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); } .nav[data-over=film] .menu a, .nav[data-ground=deep] .menu a{ color:#f5f0e8eb } /* ══════════════════════════════════════════════════════════════════ 13. ШАПКА ОДНА НА ВСЕ СОСТОЯНИЯ И КНОПКА ТЕМНЕЕ, 18.09.2026 Максим: текст в меню не должен сереть при прокрутке - «иначе текста не будет видно». Сборка перекрашивает пилюли в три разные схемы в зависимости от того, над чем шапка (фильм, светлая земля, тёмная земля), и на переходах текст проходит через серый. Решение: одна схема на все состояния - плотная тёплая тёмная пилюля с кремовым текстом. Она читается и на закате, и на креме, и на тёмном. Меняется только пункт под мышкой (светлеет) и текущий (кремовая заливка). Обводка толще - 1.5 px. ══════════════════════════════════════════════════════════════════ */ html .nav .mark, html .nav .menu, html .nav .lang, html .nav .burger, html[data-theme=light] .nav .mark, html[data-theme=light] .nav .menu, html[data-theme=light] .nav .lang, html[data-theme=light] .nav .burger, .nav[data-over=film] .mark, .nav[data-over=film] .menu, .nav[data-over=film] .lang, .nav[data-over=film] .burger, .nav[data-ground=deep] .mark, .nav[data-ground=deep] .menu, .nav[data-ground=deep] .lang, .nav[data-ground=deep] .burger{ color:#f5f0e8 !important; background:#221c17e6 !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:inset 0 0 0 1.5px #f5f0e833, inset 0 1px 0 #f5f0e81f, 0 8px 22px -12px #140c0899 !important; transition:none; } html .nav .menu a, html[data-theme=light] .nav .menu a, html[data-theme=light] .nav.solid .menu a, .nav[data-over=film] .menu a, .nav[data-ground=deep] .menu a{ color:#f5f0e8 !important; background:transparent; transition:background-color .18s ease; } @media (hover:hover) and (pointer:fine){ html .nav .menu a:hover, html[data-theme=light] .nav .menu a:hover, .nav[data-over=film] .menu a:hover, .nav[data-ground=deep] .menu a:hover{ color:#fff !important; background:#f5f0e81f } html .nav .lang:hover, html .nav .mark:hover{ background:#2e2620e6 !important } } html .nav .menu a[data-current], html[data-theme=light] .nav .menu a[data-current], html[data-theme=light] .nav.solid .menu a[data-current], .nav[data-over=film] .menu a[data-current], .nav[data-ground=deep] .menu a[data-current]{ color:#221c17 !important; background:#f5f0e8 !important } /* ── Главная кнопка: мокко вместо света лампы ───────────────────── «Свет лампы» оказался слишком светлым. Темнее, но не средний рыжий орех (тот был «цветом неожиданности»): мокко, приглушённый кофе с молоком, насыщенность около 30 % против 46 % у ореха, и глянец сверху. Кремовый текст. Кромка та же: блик, губа, кольцо, тёплый ореол. */ :root{ --lamp-top:#9a7258; --lamp:#7d5a44; --lamp-bot:#654634; --on-lamp:#fbf3ea } .nav .pill, .formats .plan--pick .pill.plan__go, #talk .pill, html[data-theme=light] .nav .pill, html[data-theme=light] .nav:not([data-over=film]):not([data-ground=deep]) .pill{ box-shadow: inset 0 1px 0 #ffe8d45c, inset 0 -1px 0 #2a170b40, 0 0 0 1px #2a170b59, 0 1px 2px #140c0859, 0 10px 26px -10px #654634b3 !important; } .nav .pill:before, .formats .plan--pick .pill.plan__go:before, #talk .pill:before{ background:radial-gradient(120% 140% at 50% 0%,#ffe3cc59,#ffe3cc00 62%); } @media (hover:hover) and (pointer:fine){ .nav .pill:hover, .formats .plan--pick .pill.plan__go:hover, #talk .pill:hover{ box-shadow: inset 0 1px 0 #ffe8d480, inset 0 -1px 0 #2a170b40, 0 0 0 1px #2a170b66, 0 1px 2px #140c084d, 0 16px 34px -10px #654634cc !important; } } /* ══════════════════════════════════════════════════════════════════ 14. СТЕКЛО В ШАПКЕ ВОЗВРАЩЕНО, ЦЕНЫ ПО ЦЕНТРУ, 18.09.2026 ШАПКА. В §13 пилюли стали плотными на 90 %, и Максим сразу увидел: «ты вообще liquid glass убрал». Возвращаем стекло, но так, чтобы текст не серел: - цвет текста один и тот же всегда - крем; - меняется только ПЛОТНОСТЬ стекла под ним: над фото и тёмной землёй стекло прозрачное (52 %), сквозь него видно небо; над светлой землёй плотнее (84 %), иначе кремовый текст на кремовом фоне пропадает - именно это и было «серым на сером»; - плотность меняется плавно за 300 мс, текст при этом стоит; - кромка стекла: блик по верху, обводка 1.5 px, размытие с насыщением того, что под стеклом. ══════════════════════════════════════════════════════════════════ */ html .nav .mark, html .nav .menu, html .nav .lang, html .nav .burger, html[data-theme=light] .nav .mark, html[data-theme=light] .nav .menu, html[data-theme=light] .nav .lang, html[data-theme=light] .nav .burger, .nav[data-over=film] .mark, .nav[data-over=film] .menu, .nav[data-over=film] .lang, .nav[data-over=film] .burger, .nav[data-ground=deep] .mark, .nav[data-ground=deep] .menu, .nav[data-ground=deep] .lang, .nav[data-ground=deep] .burger{ background:linear-gradient(180deg,#3a2f28a8 0%,#221c1785 100%) !important; -webkit-backdrop-filter:blur(22px) saturate(170%) !important; backdrop-filter:blur(22px) saturate(170%) !important; box-shadow: inset 0 1px 0 #fff6ec40, /* блик по верхней кромке */ inset 0 0 0 1.5px #f5f0e838, /* обводка */ 0 8px 24px -12px #140c0899 !important; transition:background .3s ease !important; } /* над светлой землёй стекло плотнее - текст остаётся тем же кремом */ html .nav[data-over=page][data-ground=paper] .mark, html .nav[data-over=page][data-ground=paper] .menu, html .nav[data-over=page][data-ground=paper] .lang, html .nav[data-over=page][data-ground=paper] .burger{ background:linear-gradient(180deg,#3a2f28e0 0%,#221c17d6 100%) !important; } /* текст - крем всегда, чуть плотнее за счёт веса */ html .nav .menu a, .nav[data-over=film] .menu a, .nav[data-ground=deep] .menu a{ font-weight:500 } /* ── 14.1 Цены: заголовок и описание по центру ──────────────────── Три карточки стоят симметрично, а шапка секции была прижата влево - блок читался перекошенным. Центрируем. Описание сокращено в enhance.js до двух строк: смысл тот же - три глубины, берите ту, что подходит проекту сейчас. */ .formats .hd{ display:grid; justify-items:center; text-align:center; margin-inline:auto; max-width:none } .formats .hd h2{ max-width:none; margin-inline:auto } .formats .hd .lead{ max-width:44ch; margin-inline:auto } /* ══════════════════════════════════════════════════════════════════ 15. FAILURES: ЛЕНТА НЕ РЕЖЕТ КАРТОЧКИ, 18.09.2026 Лента выходила за контейнер вправо до края экрана, а влево - только на ширину отступа. При листании карточки обрезались не по краю экрана, а по невидимой линии посреди отступа слева. Теперь лента во всю ширину экрана с обеих сторон, а первая карточка по-прежнему стоит на линии заголовка: отступ внутри ленты равен расстоянию от края экрана до текста. overflow-x:auto заставляет браузер резать и по вертикали, поэтому сверху и снизу даём место под подъём карточки на наведении и под тень, и забираем его обратно отрицательным отступом, чтобы ритм секции не поехал. */ #failures .fails__grid{ margin-inline:calc(50% - 50vw) !important; padding-inline:max(var(--pad), calc(50vw - 50%)) !important; scroll-padding-inline:max(var(--pad), calc(50vw - 50%)) !important; padding-block:14px 48px !important; margin-block:calc(var(--s4) - 14px) -28px !important; } #failures .rail{ margin-top:var(--s2) } /* ══════════════════════════════════════════════════════════════════ §20. ТЕПЛО (копия site-warm, 19.09.2026) Максим: «сайт хочу красивым, семейным и тёплым»; «всё вокруг одного места, просто озеро, это самое бесячее»; тёмно-коричневый фон цен не понравился; «Three findings» с акварельным планом назван бредом. Новые кадры сделаны в Google Flow одной серией: плёночный Portra, низкий тёплый свет, живые семьи, дерево и камень. Лежат в /images/new/. Акварели там, где встали фото, уходят (одна фактура на секцию). ══════════════════════════════════════════════════════════════════ */ /* ── 20.1 Places: шесть разных мест вместо одной иллюстрации ────────── */ #places .places__shot, #places .places__note, #places .places__said{ display:none } .pl-gal{ margin-top:var(--s5); display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 1fr); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none } .pl-gal::-webkit-scrollbar{ display:none } .pl-card{ scroll-snap-align:start; display:grid; gap:12px; margin:0 } .pl-card__f{ aspect-ratio:3/4; border-radius:18px; overflow:hidden; background:var(--plate) } .pl-card__f img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.23,1,.32,1) } .pl-card figcaption b{ display:block; font-size:1.1875rem; font-weight:600; letter-spacing:-.01em; color:var(--fg) } .pl-card figcaption span{ color:var(--fg-2); font-size:1rem } @media (hover:hover) and (pointer:fine){ .pl-card:hover .pl-card__f img{ transform:scale(1.04) } } .places__kind{ transition:color .2s ease, opacity .2s ease } #places.pl-on .places__kind{ opacity:.45 } #places.pl-on .places__kind.pl-hit{ opacity:1 } .pl-card{ transition:opacity .3s ease } #places.pl-on .pl-card{ opacity:.5 } #places.pl-on .pl-card.pl-hit{ opacity:1 } /* ── 20.2 Work: в пустой плашке наконец сам посёлок ───────────────── */ #work .oneframe{ aspect-ratio:16/9; background:url(/images/new/work-aerial.jpg) center/cover no-repeat, var(--plate) !important; border-radius:20px } /* ── 20.7 Поправки после первого просмотра ─────────────────────────── */ .pl-gal{ grid-auto-columns:minmax(300px, calc((100% - 32px) / 3.3)); margin-right:calc(-1 * var(--gut, 24px)); padding-right:var(--gut, 24px) } @media (width <= 760px){ .pl-gal{ margin-right:0; padding-right:0; grid-auto-columns:78% } } /* ── 20.8 Откат по просьбе Максима (19.09) ───────────────────────── Вернулись как было: Three findings, Formats (без картинок), финал, осенний кадр в Situation (.amb). Плюс вернулся 4-й кадр банка (inside · blue hour), который прятала старая правка §8. */ /* ── 20.9 The legend: не анкета, а один лист ───────────────────────── Было: таблица «ключ | значение» с волосяными линиями под каждой строкой, четыре подписи слева и три абзаца истории, то есть форма заявки. Стало: один лист бумаги, на нём главная фраза крупно, один абзац истории и четыре следствия. «Name: withheld» ничего не говорит, его нет. */ #legend .doc-sheet{ max-width:820px; margin:var(--s5) 0 0; padding:clamp(32px,5vw,64px) clamp(24px,5vw,72px); background:#fbf8f3; border:0 !important; border-radius:22px; box-shadow:0 0 0 1px #221c170d, 0 2px 4px #3c28190a, 0 40px 80px -48px #3c2819a6 } #legend .doc-sheet__row{ display:block; border:0 !important; padding:0 !important; margin:0 } #legend .doc-sheet__k{ display:none } #legend .doc-sheet__row:nth-child(2){ display:none } #legend .doc-sheet__v--core{ font-size:clamp(2rem,3.6vw,3.25rem); line-height:1.04; font-weight:600; letter-spacing:-.035em; color:#221c17; max-width:15ch; margin:0 } #legend .doc-sheet__v--story{ margin-top:28px } #legend .doc-sheet__v--story p{ font-size:1.25rem; line-height:1.45; color:#5c5249; max-width:44ch; margin:0 } #legend .doc-sheet__v--story p + p{ display:none } #legend .doc-sheet__row:nth-child(4){ margin-top:36px; padding-top:28px !important; box-shadow:inset 0 1px 0 #221c171a } #legend .doc-sheet__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 32px } #legend .doc-sheet__l li{ position:relative; padding-left:22px; font-size:1.0625rem; line-height:1.4; color:#221c17 } #legend .doc-sheet__l li::before{ content:""; position:absolute; left:0; top:.68em; width:12px; height:2px; border-radius:2px; background:#d4b08c } @media (width <= 760px){ #legend .doc-sheet__l{ grid-template-columns:1fr } } /* ══════════════════════════════════════════════════════════════════ §21. ЧИЩЕ И ПОНЯТНЕЕ (site-warm, 19.09.2026) Референс Максима: тёмный продуктовый лендинг, где с первого экрана ясно, что это и как работает: заголовок в две строки, одна строка пояснения, одна светлая кнопка; заголовки секций по центру; никаких 01/02/03, надзаголовков и мелких примечаний. «У нас куча мусора и текста». ══════════════════════════════════════════════════════════════════ */ /* ── 21.1 Кнопка: светлая, без свечения ──────────────────────────── Мокко с ореолом при наведении - «отстойный цвет» и «ужас». Как в референсе: светлая капсула, тёмный текст, кромка волосяной линией, маленькая тень. Наведение - чуть светлее, нажатие - 0.97. */ .nav .pill, #talk .pill, .formats .plan--pick .pill.plan__go, .ch .pill, html[data-theme=light] .nav .pill, html[data-theme=light] #talk .pill, html[data-theme=light] .formats .plan--pick .pill.plan__go, .nav[data-over=film] .pill, .nav[data-ground=deep] .pill, .deep #talk .pill{ background:#fbf8f3 !important; color:#221c17 !important; filter:none !important; box-shadow:0 0 0 1px #221c171f, 0 1px 2px #221c1714, 0 8px 22px -12px #221c1766 !important; transition:background-color .18s ease, transform .14s cubic-bezier(.23,1,.32,1) !important } .nav .pill:before, #talk .pill:before, .formats .plan--pick .pill.plan__go:before, .ch .pill:before, .nav .pill:after, #talk .pill:after, .formats .plan--pick .pill.plan__go:after{ display:none !important } .nav .pill .pill__l, #talk .pill .pill__l, .formats .plan--pick .pill .pill__l, .ch .pill .pill__l{ color:inherit !important } @media (hover:hover) and (pointer:fine){ .nav .pill:hover, #talk .pill:hover, .formats .plan--pick .pill.plan__go:hover, .ch .pill:hover{ background:#ffffff !important; box-shadow:0 0 0 1px #221c1729, 0 1px 2px #221c171a, 0 10px 26px -12px #221c1780 !important } } /* ── 21.2 Первый экран: заголовок, строка, одна кнопка ─────────────── */ .scroll-hint{ display:none !important } .ch h1, .film .ch h2{ font-size:clamp(2.75rem,5.6vw,5rem) !important; line-height:1.02 !important; letter-spacing:-.045em !important; font-weight:600 } .ch p{ background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding:0 !important; border-radius:0 !important; color:#f5f0e8e6 !important; font-size:clamp(1.125rem,1.5vw,1.375rem) !important; max-width:40ch !important; text-shadow:0 1px 18px #0000008c } .ch h1, .film .ch h2{ text-shadow:0 2px 30px #00000066 } .ch-cta{ margin-top:10px } /* ── 21.3 Method убран целиком (секция и пункт меню) ───────────────── */ #method{ display:none !important } .nav .menu a[href="#method"]{ display:none } /* ── 21.4 Заголовки секций по центру, без надзаголовков ────────────── */ .hd > p.tag, .hd--split > p.tag{ display:none !important } #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{ text-align:center; margin-inline:auto !important; max-width:820px; justify-items:center; display:grid } #failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #work .hd--split .lead{ margin-inline:auto; max-width:56ch } #places .places__kinds{ justify-content:center } #legend .doc-sheet{ margin-inline:auto !important } /* ── 21.5 Меньше текста ───────────────────────────────────────────── Оставлено то, что держит мысль; убраны вторые и третьи пересказы. */ #situation .hero__type p:nth-of-type(3), #situation .hero__type p:nth-of-type(5){ display:none } #failures .fail__b{ display:none } #failures .fail__m{ font-size:1.0625rem; color:var(--fg) } #work .fleg{ display:none !important } #work .find__n, #work .survey .geo{ display:none !important } #formats .plans__anchor, #formats .plans__note{ display:none } #talk .wrap > p.tag{ display:none } #situation .hero__acts a.go{ display:none } /* ══════════════════════════════════════════════════════════════════ §22 · TWO VOICES The headings get a display serif and one accented word in italic; everything the hand touches stays in the grotesque. One accent colour — a cold blue against the warm paper — and it is used for the italic, the underline and the live figures, nowhere else. ══════════════════════════════════════════════════════════════════ */ :root{ --acc:#3f6ea8; --acc-soft:#7ba4e0 } h1, h2, .quote, .big, .pull, .core{ font-family:"Instrument Serif",Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.012em; line-height:1.02; } h2{ line-height:1.04 } /* the serif runs smaller than the grotesque at the same size: give the display back the scale it had */ #film .ch h1{ font-size:clamp(56px,7.8vw,124px) } h2{ font-size:clamp(38px,4.6vw,68px) } .quote, .big, .pull, .core{ line-height:1.12; letter-spacing:-.008em } h1 .w i.ac, h2 .w i.ac, em.ac{ font-style:italic; color:var(--acc) } #film .ch h1 .w i.ac, .hero__type .w i.ac{ color:var(--acc-soft) } /* figures read as display too, so they carry weight without going bigger */ .count, .num, .stat b, .fig{ font-variant-numeric:tabular-nums } .hi, .hi2{ color:var(--acc) } /* long display lines need air: the serif sets tighter than the grotesque */ .quote, .big, .pull, .core{ line-height:1.16 } .pull{ font-size:clamp(26px,2.5vw,36px) } .hi2{ box-shadow:inset 0 -.08em 0 var(--acc-soft) } .hi2::after, .pull .hi2::after{ background:var(--acc-soft) !important } /* §23 · the plans lose their second voice: the label above the list and the repeated fourth line. What is left is a price, a promise, three lines. */ #formats .plan__h{ display:none } #formats .plan__d{ font-size:1.0625rem; line-height:1.4 } #formats .plan__l{ margin-top:1.1rem } #formats .plan__l li[hidden]{ display:none } /* ══════════════════════════════════════════════════════════════════ §24 · OFF CENTRE Everything used to sit on the middle axis, which reads as a template. The heads hang on the left with the supporting line in a narrow column under them. Centred stays only where it earns it: the formats table and the closing invitation. ══════════════════════════════════════════════════════════════════ */ #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{ text-align:left; justify-items:start; margin-inline:0 !important; max-width:min(1180px, 92vw) } #failures > .hd h2, #places > .hd h2, #work > .hd h2, #legend > .hd h2, #bank .bank__hd h2, #compare .hd h2, #work .hd--split h2{ max-width:17ch; margin-inline:0 } #failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #work .hd--split .lead{ margin-inline:0; max-width:48ch } #places .places__kinds{ justify-content:flex-start } /* the hero copy hangs on the left of the frame, low, the way it does on the house page */ #film .ch{ text-align:left; align-items:flex-start } #film .ch > *{ margin-inline:0 } #film .ch h1{ max-width:12ch } #film .ch p, #film .ch .lead{ max-width:34ch; margin-inline:0 } #film .ch .acts, #film .ch .hero__acts{ justify-content:flex-start } @media (width <= 760px){ #film .ch h1{ max-width:none } #failures > .hd h2, #places > .hd h2, #work > .hd h2, #legend > .hd h2, #bank .bank__hd h2, #compare .hd h2{ max-width:none } } /* §24.1 · the head is a two-column block on wide screens: the sentence on the left, the line that explains it on the right, both sitting on the same baseline. Nothing is centred and nothing is left hanging. */ @media (width >= 1100px){ #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{ display:grid; grid-template-columns:1.05fr .95fr; align-items:end; column-gap:clamp(40px,5vw,90px); max-width:1180px } #failures > .hd h2, #places > .hd h2, #work > .hd h2, #legend > .hd h2, #bank .bank__hd h2, #compare .hd h2, #work .hd--split h2{ grid-column:1; margin:0; max-width:15ch } #failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #compare .hd .lead, #work .hd--split .lead{ grid-column:2; margin:0 0 .35em; max-width:42ch } } /* §24.2 · the one sentence the whole document exists for is a display line, so it speaks in the display voice too */ #legend .doc-sheet__v--core{ font-family:"Instrument Serif",Georgia,serif; font-weight:400; letter-spacing:-.01em; line-height:1.06 } #legend .doc-sheet__v--core{ max-width:19ch; font-size:clamp(32px,3.4vw,50px) } /* §24.3 · the two columns were reading as two separate things: a short head in a wide column left a void in the middle and the eye had to jump it. Now the head takes exactly the width of its own line and the paragraph starts one gutter later, so the pair reads as one block. */ @media (width >= 1100px){ #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{ display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:clamp(36px,3.4vw,56px); row-gap:18px; max-width:1100px } #failures > .hd h2, #places > .hd h2, #work > .hd h2, #legend > .hd h2, #bank .bank__hd h2, #compare .hd h2, #work .hd--split h2{ flex:0 1 auto; max-width:13ch; margin:0 } #failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #compare .hd .lead, #work .hd--split .lead{ flex:1 1 min(38ch, 100%); max-width:38ch; margin:0 0 .4em } } /* tops aligned, not bottoms: a short head next to a long paragraph looked like it had slipped down the page */ @media (width >= 1100px){ #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{ align-items:flex-start } #failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #compare .hd .lead, #work .hd--split .lead{ margin:.3em 0 0 } } /* §24.4 · the head and its line stack, the way a page is actually read: one column, left, the sentence and then the explanation under it. The two-column head from 24.1–24.3 is gone. */ @media (width >= 1100px){ #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{ display:block; max-width:min(1100px, 92vw) } #failures > .hd h2, #places > .hd h2, #work > .hd h2, #legend > .hd h2, #bank .bank__hd h2, #compare .hd h2, #work .hd--split h2{ max-width:17ch; margin:0 } #failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #compare .hd .lead, #work .hd--split .lead{ max-width:46ch; margin:1.1rem 0 0 } } /* ══════════════════════════════════════════════════════════════════ §25 · THE FIGURES, HELD · a pinned screen, one number at a time ══════════════════════════════════════════════════════════════════ */ #work .figs{ position:relative; height:340vh; margin-top:clamp(40px,6vw,90px) } #work .figs__stick{ position:sticky; top:0; height:100dvh; display:grid; align-content:center; justify-items:start; gap:clamp(28px,4vh,56px) } #work .figs__stage{ position:relative; display:grid; min-height:46vh; align-content:center; width:100% } #work .fig{ grid-area:1 / 1; display:grid; gap:clamp(10px,1.6vh,20px); justify-items:start; max-width:22ch; opacity:0; transform:translateY(22px); pointer-events:none; transition:opacity .5s ease, transform .6s cubic-bezier(.23,1,.32,1) } #work .fig.is-on{ opacity:1; transform:translateY(0) } #work .fig__n{ font-family:"Instrument Serif",Georgia,serif; font-weight:400; line-height:.86; letter-spacing:-.02em; font-size:clamp(110px,19vw,280px); font-variant-numeric:tabular-nums; color:var(--acc) } #work .fig__t{ font-size:clamp(1.0625rem,1.5vw,1.375rem); line-height:1.3; color:#5c5249; max-width:20ch } #work .figs__dots{ display:flex; gap:10px } #work .figs__dot{ width:26px; height:3px; border-radius:2px; background:rgb(34 28 23 / .16); transition:background-color .35s ease } #work .figs__dot.is-on{ background:var(--acc) } #work .figs.is-static{ height:auto } #work .figs.is-static .figs__stick{ position:static; height:auto } #work .figs.is-static .figs__stage{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; min-height:0 } #work .figs.is-static .fig{ grid-area:auto; opacity:1; transform:none } #work .figs.is-static .fig__n{ font-size:clamp(56px,7vw,96px) } @media (width <= 760px){ #work .fig__n{ font-size:clamp(88px,26vw,150px) } } /* §31 · the lean towards the cursor rides on top of the press and hover */ .pill, .chip, .plan__go, .ctas a, .rail__b{ translate:var(--lean-x, 0px) var(--lean-y, 0px); transition:translate .45s cubic-bezier(.23,1,.32,1), transform .16s cubic-bezier(.23,1,.32,1), background-color .18s ease, color .18s ease, box-shadow .18s ease } /* ══════════════════════════════════════════════════════════════════ §26 · THE RIBBON · one continuous line, no fading of the neighbours ══════════════════════════════════════════════════════════════════ */ #places .places__kinds{ display:flex; flex-wrap:nowrap; width:max-content; gap:clamp(22px,2.4vw,40px); animation:kinds-run 46s linear infinite; will-change:transform } #places .places__kind{ opacity:1 !important; filter:none !important; color:var(--fg) !important; white-space:nowrap; cursor:default !important; transition:none !important } @keyframes kinds-run{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } } @media (hover:hover) and (pointer:fine){ #places .places__kinds:hover{ animation-play-state:paused } } @media (prefers-reduced-motion:reduce){ #places .places__kinds{ animation:none; flex-wrap:wrap; width:auto } #places .places__kind.is-clone{ display:none } } /* ══════════════════════════════════════════════════════════════════ §27 · BUTTONS THAT ANSWER · a press is felt, a hover lifts a little ══════════════════════════════════════════════════════════════════ */ .pill, .chip, .go, .plan__go, .nav .pill, .ctas a{ transition:transform .16s cubic-bezier(.23,1,.32,1), background-color .18s ease, color .18s ease, box-shadow .18s ease } @media (hover:hover) and (pointer:fine){ .pill:hover, .chip:hover, .plan__go:hover, .ctas a:hover{ transform:translateY(-1px) scale(1.03) } .go:hover{ transform:translateX(2px) } } .pill:active, .chip:active, .go:active, .plan__go:active, .ctas a:active{ transform:scale(.97) } @media (prefers-reduced-motion:reduce){ .pill, .chip, .go, .plan__go, .ctas a{ transition:background-color .18s ease, color .18s ease } .pill:hover, .chip:hover, .plan__go:hover, .ctas a:hover, .go:hover{ transform:none } } /* ══════════════════════════════════════════════════════════════════ §28 · THE CLOSING LINE stays one colour — it is the ask, not a claim ══════════════════════════════════════════════════════════════════ */ #talk h2 .w i.ac{ font-style:normal !important; color:inherit !important } /* ══════════════════════════════════════════════════════════════════ §29 · THE LEGEND IS A STATEMENT, NOT A FORM The sheet was a card of labelled rows, which reads like paperwork. The card goes; what is left is the sentence the project runs on, a rule, the story in one column and what followed as three short lines. ══════════════════════════════════════════════════════════════════ */ #legend .doc-sheet{ background:none !important; box-shadow:none !important; border:0 !important; padding:0 !important; max-width:1100px; margin-inline:0 !important; display:block } #legend .doc-sheet__row{ display:block; margin:0 } #legend .doc-sheet__v--core{ font-size:clamp(38px,4.6vw,72px); line-height:1.04; max-width:20ch; margin:0 0 1.5rem; padding-bottom:1.5rem; border-bottom:1px solid rgb(34 28 23 / .14) } #legend .doc-sheet__v--story{ max-width:46ch; margin:0 } #legend .doc-sheet__v--story p{ margin:0 } /* ══════════════════════════════════════════════════════════════════ §30 · MOTION THAT ANSWERS THE SCROLL Until now everything only appeared. These are scroll-driven: the frames settle as they arrive, the cards rise, the heads drift a little slower than the page, and a hairline tracks the reading. Transform only — the site keeps its own opacity reveals — and all of it is dropped under prefers-reduced-motion. ══════════════════════════════════════════════════════════════════ */ #read-prog{ position:fixed; top:0; left:0; z-index:200; height:2px; width:100%; transform-origin:0 50%; background:linear-gradient(90deg, var(--acc), var(--acc-soft)); transform:scaleX(0); pointer-events:none } @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ #read-prog{ animation:prog linear both; animation-timeline:scroll(root) } @keyframes prog{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } } /* photographs settle: they arrive a touch large and come to rest */ #failures .fail__f, #places .pl-card__f, #places .places__shot, #work .oneframe__f, #bank .bank__f{ animation:settle linear both; animation-timeline:view(); animation-range:entry 0% cover 45% } @keyframes settle{ from{ transform:scale(1.07) } to{ transform:scale(1) } } /* cards rise into place, each one on its own arrival */ #failures .fail, #places .pl-card, #work .fig{ animation:rise linear both; animation-timeline:view(); animation-range:entry 5% cover 30% } @keyframes rise{ from{ transform:translateY(46px) } to{ transform:translateY(0) } } /* heads travel a little slower than the page under them */ #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #compare .hd, #bank .bank__hd{ animation:drift linear both; animation-timeline:view(); animation-range:entry 0% exit 100% } @keyframes drift{ from{ transform:translateY(34px) } to{ transform:translateY(-26px) } } /* the sentence the project runs on opens as it is reached */ #legend .doc-sheet__v--core{ animation:openline linear both; animation-timeline:view(); animation-range:entry 10% cover 40% } @keyframes openline{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } } /* the hero copy lifts away as the first screen leaves */ #film .ch h1, #film .ch .lead, #film .ch p{ animation:lift linear both; animation-timeline:scroll(root); animation-range:0 90vh } @keyframes lift{ from{ transform:translateY(0) } to{ transform:translateY(-54px) } } } } /* §25.1 · tighter: the caption belongs to the number, not to the page */ #work .figs{ height:300vh } #work .figs__stick{ gap:clamp(20px,3vh,36px) } #work .fig{ gap:6px; max-width:26ch } #work .fig__t{ max-width:24ch } /* ══════════════════════════════════════════════════════════════════ §32 · SECOND THOUGHTS The pinned number screen asked for four screens of scrolling to read four facts — nobody does that. The figures go back to one row. The buttons stop chasing the cursor: a pill simply grows a little when you come near it, and nothing moves away from the hand. ══════════════════════════════════════════════════════════════════ */ #work .figs{ position:static; height:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px clamp(24px,3vw,56px); max-width:1180px; margin:clamp(48px,6vw,84px) 0 0; padding-top:28px; border-top:1px solid rgb(34 28 23 / .12) } #work .figs__stick, #work .figs__stage, #work .figs__dots{ display:contents } #work .fig{ position:static; grid-area:auto; display:grid; gap:8px; align-content:start; max-width:none; opacity:1; transform:none } #work .fig__n{ font-size:clamp(52px,5.4vw,84px); line-height:.92 } #work .fig__t{ font-size:1rem; max-width:22ch } @media (width <= 900px){ #work .figs{ grid-template-columns:repeat(2,minmax(0,1fr)) } } /* the pill grows towards the hand instead of leaning away from it */ .pill, .chip, .plan__go, .ctas a, .rail__b{ translate:none; transform-origin:center; transition:transform .2s cubic-bezier(.23,1,.32,1), background-color .18s ease, color .18s ease, box-shadow .2s ease } @media (hover:hover) and (pointer:fine){ .pill:hover, .chip:hover, .plan__go:hover, .ctas a:hover{ transform:scale(1.06) } } .pill:active, .chip:active, .plan__go:active, .ctas a:active{ transform:scale(.98) } /* ══════════════════════════════════════════════════════════════════ §33 · THE FIRST SCREEN The one place a centred block earns it: a title, the line that explains it, and a single dark pill — sitting high enough that the settlement underneath is still a photograph and not a backdrop. ══════════════════════════════════════════════════════════════════ */ #film .chapters .ch:first-child{ text-align:center; align-items:center; justify-items:center; align-content:start; padding-top:clamp(12vh,16vh,22vh) } #film .chapters .ch:first-child > *{ margin-inline:auto } #film .chapters .ch:first-child h1{ max-width:16ch; font-size:clamp(54px,7.4vw,116px); line-height:.98; margin:0 } #film .chapters .ch:first-child p, #film .chapters .ch:first-child .lead{ max-width:42ch; margin:1.1rem auto 0; font-size:clamp(1.0625rem,1.35vw,1.3125rem); line-height:1.4 } #film .chapters .ch:first-child .acts, #film .chapters .ch:first-child .hero__acts{ justify-content:center; margin-top:clamp(22px,3vh,36px) } /* the call on the first screen is the dark one, the way it is on paper */ #film .chapters .ch:first-child .pill{ background:#221c17; color:#f7f3ec; box-shadow:inset 0 1px 0 #ffffff1f, 0 10px 26px -12px #00000099; height:54px; padding:0 30px; font-size:1.0625rem } #film .chapters .ch:first-child .pill:hover{ background:#352c25 } /* §33.1 · higher on the screen, bigger, and the call in ink */ #film .chapters .ch:first-child{ justify-content:flex-start; padding-top:clamp(14vh,17vh,20vh) } #film .chapters .ch:first-child h1{ max-width:13ch; font-size:clamp(58px,8.2vw,128px) } #film .chapters .ch:first-child .pill{ background:#221c17 !important; color:#f7f3ec !important; box-shadow:inset 0 1px 0 #ffffff1f, 0 12px 30px -14px #000000a6 !important } #film .chapters .ch:first-child .pill:hover{ background:#352c25 !important } /* ══════════════════════════════════════════════════════════════════ §34 · THE FIRST LINE, IN THE SKY One line, set in ink, sitting in the light part of the frame where the sunset is, with the settlement left untouched underneath. The call goes back to paper — a dark pill on a dark forest was a bruise. ══════════════════════════════════════════════════════════════════ */ #film .chapters .ch:first-child{ padding-top:clamp(9vh,11vh,14vh) } #film .chapters .ch:first-child h1{ color:#1c1815; max-width:none; white-space:nowrap; font-size:clamp(34px,8.4vw,128px); line-height:1.02; text-shadow:0 1px 40px rgb(255 240 220 / .45) } #film .chapters .ch:first-child h1 .w i.ac{ color:#2f5c96 } #film .chapters .ch:first-child p, #film .chapters .ch:first-child .lead{ color:#2b241d; margin-top:1rem } #film .chapters .ch:first-child .pill{ background:#fbf8f3 !important; color:#221c17 !important; box-shadow:inset 0 1px 0 #fff, 0 12px 30px -16px rgb(40 26 14 / .6) !important } #film .chapters .ch:first-child .pill:hover{ background:#fff !important } @media (width <= 820px){ #film .chapters .ch:first-child h1{ white-space:normal; max-width:13ch; font-size:clamp(40px,11vw,68px) } } /* ══════════════════════════════════════════════════════════════════ §34.1 · NO OVERLAP The serif sets tighter than the grotesque did, and the chapter copy was laid out for the old metrics: the italic descenders of the head ran straight into the line under it. Give every chapter head its own room and let the line that follows start below it. ══════════════════════════════════════════════════════════════════ */ #film .ch h1, #film .ch h2, .hero__type h2{ line-height:1.08; margin:0 0 .12em; padding-bottom:.08em } #film .ch p, #film .ch .lead, .hero__type p, .hero__type .lead{ margin-top:1.1rem } #film .ch h1 .w, #film .ch h2 .w, .hero__type h2 .w{ padding-bottom:.06em } /* §34.2 · the block actually has to sit in the sky, not be padded towards it: the stage centres its chapters, so lift the whole copy instead */ #film .chapters .ch:first-child{ position:relative; top:-19vh; padding-top:0 } /* §34.3 · the chapter box was narrower than the page, so a line set in one run overflowed it and drifted right of centre */ #film .chapters .ch:first-child{ width:100%; max-width:100%; flex:1 1 100% } #film .chapters .ch:first-child h1{ text-shadow:none; width:100% } /* §34.4 · the chapter is a flex item sharing the row, so a width of 100% is not the width of the window: take the window explicitly */ #film .chapters .ch:first-child{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); flex:0 0 auto } /* §34.5 · the chapters sit in a flex row, so their centre is not the window's. Lift the first one out of the row and hang it over the stage: it keeps the site's own reveal (the .lit class still drives it) and lands dead centre. */ #film .chapters{ position:relative } #film .chapters .ch:first-child{ position:absolute; left:0; right:0; top:14vh; width:auto; max-width:none; margin:0; padding:0 var(--gut, 32px); display:flex; flex-direction:column; align-items:center } /* a touch more air under a head whose italic drops below the line */ #film .ch p, #film .ch .lead{ margin-top:1.5rem } /* ══════════════════════════════════════════════════════════════════ §35 · THE FIRST SCREEN, SETTLED Ink lost against the forest, so the copy goes back to light on the photograph. The order is the one that works: the line, then a real sentence under it at reading size, then one modest pill. ══════════════════════════════════════════════════════════════════ */ #film .chapters{ position:relative; height:100%; min-height:100% } #film .chapters .ch:first-child{ top:16vh } #film .chapters .ch:first-child h1{ color:#fdfbf7; text-shadow:0 2px 40px rgb(20 12 6 / .45), 0 1px 3px rgb(20 12 6 / .3) } #film .chapters .ch:first-child h1 .w i.ac{ color:#a8c6ee } #film .chapters .ch:first-child p, #film .chapters .ch:first-child .lead{ color:rgb(253 251 247 / .88); max-width:56ch; font-size:clamp(1rem,1.15vw,1.1875rem); line-height:1.5; text-shadow:0 1px 20px rgb(20 12 6 / .5) } #film .chapters .ch:first-child .pill{ height:46px; padding:0 24px; font-size:1rem; background:#fbf8f3 !important; color:#221c17 !important; box-shadow:inset 0 1px 0 #fff, 0 10px 24px -14px rgb(20 12 6 / .7) !important } /* the second chapter keeps the landing's own layout; it only needs to be centred in the stage again, since the first chapter left the flow */ #film .chapters .ch:nth-child(2){ margin-block:auto; align-self:center } /* ══════════════════════════════════════════════════════════════════ §36 · THE SKY MOVES · the loop sits under the scrim and the words ══════════════════════════════════════════════════════════════════ */ /* the stage stacks poster (1) then the streamed film (2); the loop goes above both, and the scrim and the words stay above the loop — dropping the scrim under the film is what washed the whole first screen out */ #film .film__stage .hero-loop{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3; pointer-events:none; transition:none; transform:translateZ(0); backface-visibility:hidden } #film .film__stage .scrim{ z-index:4 } #film .film__stage .chapters{ z-index:5 } /* §36.1 · the accent on the first screen is the site's blue, like everywhere */ #film .chapters .ch:first-child h1 .w i.ac{ color:var(--acc-soft) } /* the italic tail of the head still needs room before the line under it */ #film .chapters .ch:nth-child(2) h2{ padding-bottom:.14em } /* §36.4 · the generated loop is graded brighter and warmer than the photograph it replaces — bring it back to the evening we had */ #film .film__stage .hero-loop{ filter:brightness(.92) saturate(.94) } /* ══════════════════════════════════════════════════════════════════ §37 · THE SECOND SCREEN SITS WHERE THE FIRST ONE DOES Same axis, same height: the eye does not have to travel between the two chapters of the film. ══════════════════════════════════════════════════════════════════ */ #film .chapters .ch:nth-child(2){ position:absolute; left:0; right:0; top:16vh; margin:0; padding:0 var(--gut, 64px); width:auto; max-width:none; align-self:auto; display:flex; flex-direction:column; align-items:center; text-align:center } #film .chapters .ch:nth-child(2) > *{ margin-inline:auto } #film .chapters .ch:nth-child(2) h2{ max-width:14ch; margin:0 auto; padding-bottom:.14em } #film .chapters .ch:nth-child(2) p, #film .chapters .ch:nth-child(2) .lead{ max-width:46ch; margin:1.5rem auto 0; font-size:clamp(1rem,1.15vw,1.1875rem); line-height:1.5 } /* the call on the first screen sits closer to the line it answers */ #film .chapters .ch:first-child .acts, #film .chapters .ch:first-child .hero__acts{ margin-top:clamp(14px,1.8vh,22px) } /* ══════════════════════════════════════════════════════════════════ §38 · THE HOVER THAT NEVER FIRED An old rule of mine killed every pill transform with !important to stop the label-roll and the magnetic drift. It was also killing the one piece of motion we do want, so the growth is stated louder. ══════════════════════════════════════════════════════════════════ */ @media (hover:hover) and (pointer:fine){ .pill:hover, .chip:hover, .go:hover, .plan__go:hover, .ctas a:hover, .nav .pill:hover, #talk .pill:hover, .formats .plan--pick .pill.plan__go:hover{ transform:scale(1.05) !important } } .pill:active, .chip:active, .plan__go:active, .ctas a:active, .nav .pill:active, #talk .pill:active{ transform:scale(.97) !important } .pill, .chip, .go, .plan__go, .ctas a{ transition:transform .18s cubic-bezier(.23,1,.32,1), background-color .18s ease, color .18s ease, box-shadow .2s ease !important } @media (prefers-reduced-motion:reduce){ .pill:hover, .chip:hover, .go:hover, .plan__go:hover, .ctas a:hover, .nav .pill:hover, #talk .pill:hover{ transform:none !important } } /* ══════════════════════════════════════════════════════════════════ §39 · CYRILLIC, AND MORE AIR BETWEEN THE LETTERS Instrument Serif has no Cyrillic, so the Russian page fell back to a system serif. Playfair Display carries the Cyrillic — the browser picks it up glyph by glyph, so the Latin stays as it is. And the whole display voice gets its tracking opened up: it was set tight for a grotesque, and a serif needs the opposite. ══════════════════════════════════════════════════════════════════ */ h1, h2, .quote, .big, .pull, .core, #legend .doc-sheet__v--core, #film .ch h1, #film .ch h2, .hero__type h2{ font-family:"Instrument Serif","Playfair Display",Georgia,"Times New Roman",serif; letter-spacing:.012em } #work .fig__n{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; letter-spacing:.004em } #film .chapters .ch:first-child h1{ letter-spacing:.014em } #legend .doc-sheet__v--core{ letter-spacing:.01em } /* Russian runs longer: the first line stops being one unbreakable run */ html[lang="ru"] #film .chapters .ch:first-child h1{ white-space:normal; max-width:17ch; font-size:clamp(34px,6.2vw,100px) } html[lang="ru"] h2{ font-size:clamp(34px,4.2vw,62px) } /* §39.1 · the site sets its own tight tracking on the display classes with more weight than ours; say it once, louder, for the serif */ h1, h2, .quote, .big, .pull, #legend .doc-sheet__v--core, #film .ch h1, #film .ch h2, .hero__type h2{ letter-spacing:.012em !important } #work .fig__n{ letter-spacing:.004em !important } /* §39.2 · the Russian line breaks in two, not three */ html[lang="ru"] #film .chapters .ch:first-child h1{ max-width:21ch; font-size:clamp(32px,5.8vw,94px) }