/* ============================================================ BARPOINT — лендинг v3 Дизайн-токены и структура — строго по ТЗ (раздел 4) ============================================================ */ /* ---------- 4.1 Цветовая палитра ---------- ПРАВКА 07.08 — ВТОРАЯ ПОЛНАЯ СМЕНА ПАЛИТРЫ. Заказчик прислал новую карту из пяти цветов, и других на странице быть не должно: Balsamico #150C0C — фон всего сайта; Champagne #EACEAA — ВЕСЬ текст, светлые поверхности, карточка формы и главные CTA; Honey Garlic #85431E — ОСНОВНОЙ акцент (прямая формулировка заказчика: «для комбиков, кружков и т.д., вместо жёлтого»). Занял место прежнего золота: заливки, заклёпки, панели услуг, карточки сценариев, кнопки на наведении; Whiskey Sour #D39858 ┐ Burnt Coffee #34150F ┘ два вспомогательных акцента. ПОЧЕМУ АКЦЕНТ РАЗДЕЛЁН НА ДВА ТОКЕНА. Honey Garlic тёмный: на Balsamico он даёт 2.59:1. Заливкой он виден отлично, а буквами и волосяными линиями на фоне — нет (норма 4.5, для крупного 3). Поэтому роль поделена ровно по границе «пятно / знак»: --bp-amber (=honey) — всё, что заказчик перечислил: заливки, кружки-заклёпки, плашки, панели, ромбы; --bp-accent-ink (=whiskey) — акцент, который лежит НА тёмном фоне буквами или линией в пиксель: курсив в заголовках, ссылка на наведении, иконки контактов, подписи ролей, трасса команды, подчёркивание в навигации. 7.71:1. Burnt Coffee от фона почти неотличим (1.16:1) и потому работает только поверхностью под светлым текстом — панель услуг, карточка сценария; знаком на фоне он не годится вовсе. ПРАВИЛО ФАЙЛА (прежнее): любой цвет в CSS — это одна из пяти переменных ниже. Полутона (тени, пунктиры, приглушённый текст) набираются ТОЛЬКО прозрачностью этих же пяти через color-mix (…, transparent); новых значений не заводить, в том числе подмешкой одного цвета к другому — она даёт шестой сплошной тон. КОНТРАСТЫ, ЗАМЕРЕНЫ НА НОВЫХ ЗНАЧЕНИЯХ: champagne / balsamico 12.76:1 — основной текст; champagne / honey 4.93:1 — текст на панелях и кнопках (было 2.75 на золоте, стало лучше); champagne / coffee 11.04:1 — текст на тёмной панели; balsamico / whiskey 7.71:1 — тёмный текст на светлой панели; whiskey / balsamico 7.71:1 — акцентный знак на фоне; honey / champagne 4.93:1 — акцентный текст на светлом. ПРОВЕРЕНО 07.08 двумя проходами (методика та же, что 04.08): 1) по исходнику — во всём CSSOM ровно пять цветовых литералов, ни одного rgb()/hsl(); 2) по ВЫЧИСЛЕННЫМ стилям — обход каждого элемента и псевдоэлемента с разбором color / background / border / outline / box-shadow / text-shadow / fill / stroke, на 1440×900, 1280×720 и 375×812, во всех состояниях: прокрутка от начала до конца с шагом 300px, открытый разворот кейса, мобильное меню, ошибки формы, экран благодарности, раскрытый FAQ. Одноцветная графика (знаки заведений -light.png, подписи, фавиконка, apple-touch-icon, монограмма) перекрашена под палитру отдельно, скриптом: она несёт цвет запечённым в пиксели. Фотографии, разумеется, не трогали. Прежняя палитра (charcoal #101111, cream #E6E2DA, emerald #154230, burgundy #5D1E21, gold #A6824A) удалена целиком; до неё была ещё одна — графит/беж/янтарь, см. историю. */ :root { --bp-balsamico: #150C0C; --bp-champagne: #EACEAA; --bp-honey: #85431E; --bp-whiskey: #D39858; --bp-coffee: #34150F; /* Прежние имена оставлены ПСЕВДОНИМАМИ новых: на них завязано под сотню правил по всему файлу, и переименование ради переименования дало бы диф, в котором не видно смысловых изменений. Каждое имя ниже — это роль, а не оттенок, и роли сохранились. --bp-black / --bp-page — обе роли («тёмная плашка» и «фон страницы») схлопнулись в balsamico: фон один на всю страницу. --bp-ivory — светлая поверхность; отдельного бежевого больше нет. --bp-amber-text — акцент для МЕЛКОГО текста на СВЕТЛОМ. Здесь honey: на шампани он даёт 4.93:1 при норме 4.5. Красного в новом наборе нет вовсе, поэтому эта же роль обслуживает и ошибки формы — #85431E из всех пяти ближе всего к тревожному тону. --bp-green / --bp-wine (изумруд и бордо прошлой палитры) удалены: их места заняли coffee и whiskey, и роли при этом РАЗОШЛИСЬ — whiskey светлый, чернила на нём тёмные. Оставить их псевдонимами значило бы спрятать смену роли за прежним именем. */ --bp-charcoal: var(--bp-balsamico); --bp-page: var(--bp-balsamico); --bp-black: var(--bp-balsamico); --bp-dark-text: var(--bp-balsamico); --bp-cream: var(--bp-champagne); --bp-off-white: var(--bp-champagne); --bp-ivory: var(--bp-champagne); --bp-gold: var(--bp-honey); --bp-amber: var(--bp-honey); --bp-amber-text: var(--bp-honey); --bp-accent-ink: var(--bp-whiskey); /* приглушённый тёмный текст на светлом — тот же balsamico, просто тише. Именно ПРОЗРАЧНОСТЬЮ, а не подмешкой шампани: подмешка дала бы шестой сплошной цвет, а полупрозрачный balsamico на шампани выглядит так же и палитру не расширяет. На шампани даёт 4.67:1. */ --bp-graphite: color-mix(in srgb, var(--bp-balsamico) 62%, transparent); /* 4.2 Типографика — правка заказчика 26.07: три роли — - заголовки/крупные тексты: Roslindale Cyrillic Display Condensed Medium ITALIC (семейство-алиас "Roslindale Italic" в fonts.css — курсивное начертание как основное); - подзаголовки/служебные капс-надписи (eyebrow, пилюли, кнопки, навигация, лейблы): Copperplate (Brut Dept); - основной текст: Apoc Regular Trial (кириллица полная; только 400, жирный — синтетический). Откат к «единому Copperplate» (правка 17.07) = все три строки на "Copperplate". Playfair из проекта УДАЛЁН — не возвращать. */ --font-serif: "Roslindale Italic", "Roslindale Display Condensed", "Times New Roman", serif; --font-grotesk: "Copperplate", "Arial Narrow", sans-serif; --font-text: "Apoc", "Golos Text", system-ui, sans-serif; /* 4.5 Сетка и отступы (шкала 8px) */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px; --s-16: 128px; /* Правка 29.07: сайт идёт ВО ВСЮ ШИРИНУ экрана (референс buckssauce.com). Раньше контейнер был 1360px с полями 24/48px — на широких мониторах это давало большие пустые поля слева и справа. Теперь контейнер ограничения не имеет, а по краям остаётся только узкая кромка. Откат: --container 1360px, --gutter 24px / 48px на ≥1024. */ --container: 100%; --gutter: 16px; --header-h: 56px; /* 4.6 СТУПЕНЧАТАЯ ТИПОГРАФИКА (правка 30.07) Раньше кегли считались от 1vw и «дышали» вместе с окном: при любом изменении ширины текст внутри блока менялся, заголовки карточек то складывались в две строки, то распрямлялись в одну. --vw-step — ступенчатая замена 1vw: ВНУТРИ брейкпоинта он постоянен, поэтому кегль не зависит от ширины окна и остаётся одинаковым относительно своего блока; между брейкпоинтами меняется один раз. Значения = 1% от опорной ширины (390 / 820 / 1440), так что на этих ширинах размеры совпадают с прежним расчётом пиксель в пиксель. Вилки clamp() сохранены — они по-прежнему держат нижний и верхний предел. Исключение одно: .scn-head__title, он по замыслу заполняет экран во всю ширину, и ему нужен НАСТОЯЩИЙ vw. */ --vw-step: 3.9px; --ease: cubic-bezier(.22,.61,.36,1); } @media (min-width: 600px) { :root { --vw-step: 8.2px; } } /* с 768 шапка выше (56 → 72): с этой ширины появляется кнопка-стикер, а её наклонённый габарит в 56px не помещается */ @media (min-width: 768px) { :root { --header-h: 72px; } } /* Ступеней на десктопе две: на 1024–1439 опора 1280, дальше 1440. Без промежуточной ступени текст, замороженный по 1440, не помещался в барный блок на невысоких ноутбучных окнах (проверено: 1024×680 — перелив 17px). На 1440 значения совпадают с прежними до пикселя. */ @media (min-width: 1024px) { :root { --header-h: 72px; --gutter: 20px; --vw-step: 12.8px; } } @media (min-width: 1440px) { :root { --vw-step: 14.4px; } } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* scroll-behavior:smooth отключён — плавный скролл делает Lenis (ТЗ2 §2), нативный smooth с ним конфликтует */ html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; } /* Официальный CSS Lenis */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { font-family: var(--font-text); font-size: 17px; line-height: 1.6; color: var(--bp-off-white); background: var(--bp-page); /* ТЗ5 §5: цвет фона живёт на body и перетекает по скроллу (как у PINEA). Правка 30.07: CSS-переход СНЯТ. Раньше цвет переключался скачком, а этот переход растягивал скачок во времени — он шёл сам по себе, не связанный со скроллом. Теперь цвет считается от позиции прокрутки покадрово (main.js), и переход поверх него только смазывал бы картину. Откат: transition: background-color .6s ease. */ -webkit-font-smoothing: antialiased; } /* ТЗ5 §5: при активной body-механике (класс bgflow ставит JS, при prefers-reduced-motion его нет — секции сохраняют свои фоны) цветовые секции прозрачны, просвечивает переливающийся body */ .bgflow section[data-bg], .bgflow footer[data-bg] { background: transparent; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } /* кольцо фокуса лежит на фоне страницы, а он тёмный на всю высоту, — значит это «знак», а не «пятно»: honey дал бы 2.59:1 и кольцо просто не читалось бы. На светлых поверхностях (поля формы, документы) свои правила ниже, там honey. */ :focus-visible { outline: 2px solid var(--bp-accent-ink); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; /* чернила на honey — светлые: тёмные дали бы 2.59:1 (было 6.5 на золоте) */ background: var(--bp-amber); color: var(--bp-cream); padding: 10px 18px; font-weight: 600; } .skip-link:focus { left: 0; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Вертикальный ритм секций (правка 03.08) ---------- Расстояние между секциями = два паддинга подряд, собственных полей у секций нет. Числа сняты с референса buckssauce.com (1440×900): там стыки идут margin-top’ами 120 / 152 / 160 и 160px при нулевом низе, то есть 160px между блоками — верхняя граница его шкалы. Берём её же: 80px сверху и снизу. Было 96/128 плюс пустая проставка .seam (234px на экране 900) — 490px между блоками, больше половины экрана пустоты. Проставка существовала ради перетекания фона (см. ниже), которого больше нет. Мобильная ступень — 64 (128 между блоками): у референса стыки на узком экране идут от 60 до 152px, это середина его же вилки. Ступеней ровно две, как и у референса (его порог — lg, 1024): дробить мельче незачем, 80px читаются одинаково и на планшете, и на мониторе. Проверка «на экране только один блок» (1440×900, шапка 72px): самая короткая секция — «Три сценария», 767px чернил; окно прокрутки, где она на экране целиком и соседей не видно, — 60px. Упирается оно в высоту самой секции (900 − 72 − 767 = 61), а не в стыки: увеличение отступов его уже не расширит. То же на 1920×1080 и 1024×768. Самое узкое место — планшет 768×1024: «Кейсы» встают одни в притык, с запасом ровно в 1px (от низа чернил услуг до верха чернил команды 953px при свободном экране 952). Это замер, а не гарантия: подрастёт лента кейсов на строку — и верхняя кромка фотографии «Команды» начнёт заглядывать в кадр. Лечится там же, отступом .section на ≥600. */ .section { padding-block: var(--s-8); } @media (min-width: 600px) { .section { padding-block: var(--s-10); } } /* Правка 03.08: секции больше не носят собственный цвет — фон один на всю страницу (--bp-page). Модификаторы остались только ради тех правил, что на них завязаны (лиды, обводки, контурные заголовки). */ .section--ivory, .section--black, .section--burgundy { background: var(--bp-page); color: var(--bp-off-white); } /* Тонкая линия-разделитель (4.6) */ .rule { border: 0; border-top: 1px solid var(--bp-accent-ink); opacity: .6; } /* ---------- Тихие зоны стыков .seam — УДАЛЕНЫ (правка 03.08) ---------- Проставка `.seam { height: clamp(140px, 26vh, 340px) }` стояла на трёх стыках: «Три сценария → Услуги», «Услуги → Кейсы», «Кейсы → Команда». Она была пустой и прозрачной и существовала ровно ради одного: дать воздух ПЕРЕТЕКАНИЮ ФОНА (см. одноимённый блок в main.js) — цвет body менялся от секции к секции, и менять его поверх плотного содержимого было нельзя. С правки 03.08 фон на всей странице один (--bp-page, все data-bg = #150C0C), перетекать нечему, а 234 лишних пикселя на экране 900px остались. Отсюда и жалоба заказчика на «большие промежутки». Ритм стыков теперь целиком на паддингах .section — см. выше. Откат: вернуть правило и три
в index.html. Историю градиентных вариантов (.seam--ivory-in/out, .seam--long) см. в ревизии 52 памяти проекта — все они сняты ещё 31.07. */ /* ---------- Типографика ---------- */ /* Serif — смысл/история; grotesk-слой — служебные надписи (4.2, ТЗ3 §1) */ /* ============================================================ ТРЕКИНГ ЗАГОЛОВКОВ И ТЕКСТА — НОЛЬ. Правка 05.08, ориентир сменился. Заказчик написал, что «расстояние между буквами везде очень маленькое», и показал, каким оно должно быть, — презентацией Barpoint Coffee NEW. Она обмерена целиком, программой, а не на глаз: из PDF вынуты позиции каждого знака на всех 24 полосах и сопоставлены с метриками вложенных шрифтов. Итог одинаков в обоих слоях и на всех кеглях от 20 до 150pt: Roslindale Cyrillic Deck Narrow (заголовки) 786 пар знаков 0.0000 em HeadingNow 64 Regular (текст) 1628 пар знаков 0.0000 em Квартили тоже нулевые, оператора Tc в потоках почти нет — то есть трекинг не задавали вовсе, обе гарнитуры идут на своих метриках. Отсюда правило: у всех заголовков и running text проекта трекинг normal. Прежние значения (−.02em у карточек услуг и оверлея кейсов, −.01em здесь, +.005…+.012em у капсовых заголовков) сняты. ДВА ИСКЛЮЧЕНИЯ, И ОБА ОБЪЯСНИМЫ: 1. .wcards-head .h2 и .cases-head .h2 несут -webkit-text-stroke в .0135em — обводка тем же цветом, которой заголовку добавляли веса. Она наращивает штрих в обе стороны и съедает 2 × .0135 просвета, поэтому там стоит +.027em: это не трекинг, а возврат к нулю. 2. Капсовые надписи на Copperplate (.eyebrow, кнопки, навигация, таблички) остаются с прежними .06….42em. Это разрядка как приём, в презентации такого слоя просто нет, и обнулять её было бы не «как в презентации», а поломкой. Наш текстовый шрифт — Apoc, а не HeadingNow презентации; заголовочный у нас Display Condensed, у неё Deck Narrow. Совпадает величина трекинга, но не собственные боковые поля гарнитур — их подгонкой заниматься не стали, это уже подмена шрифта, а не интервала. ============================================================ */ .h-serif { font-family: var(--font-serif); font-weight: 600; line-height: 1.12; letter-spacing: normal; } .h1 { font-size: clamp(2rem, calc(5.6 * var(--vw-step)), 4.4rem); } .h2 { font-size: clamp(1.7rem, calc(3.6 * var(--vw-step)), 3rem); } .h3 { font-size: clamp(1.25rem, calc(2.2 * var(--vw-step)), 1.75rem); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-grotesk); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } /* Бейдж-пилюля (4.6) */ .pill { display: inline-block; padding: 8px 18px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--font-grotesk); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } /* фон везде тёмный, поэтому лид светлый по умолчанию (правка 03.08) */ .lead { font-size: 1.1rem; color: color-mix(in srgb, var(--bp-off-white) 72%, transparent); max-width: 46em; } .section--black .lead, .section--burgundy .lead { color: color-mix(in srgb, var(--bp-off-white) 72%, transparent); } /* ПРАВКА 08.08 (заказчик: «расстояние между названиями блоков и самими блоками большевато»): подвал шапки секции ужат на ступень — 48 -> 40 на мобильном, 64 -> 48 на десктопе. Тот же шаг у .scn-head («Три сценария работы»), чтобы ритм заголовков был единый. */ .sec-head { margin-bottom: 40px; } .sec-head .pill { margin-bottom: var(--s-3); } .sec-head .h2 { max-width: 18em; } .sec-head .lead { margin-top: var(--s-2); } @media (min-width: 1024px) { .sec-head { margin-bottom: var(--s-6); } } /* ---------- Кнопки (4.6) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 30px; font-family: var(--font-grotesk); font-size: .84rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; text-align: center; border-radius: 2px; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } /* ПРАВКА 04.08: главная кнопка — КРЕМОВАЯ (просьба заказчика: «для CTA используй soft cream»). Была золотая. Наведение уводит её в золото — акцент никуда не делся, он стал реакцией; тот же приём, что у .btn--send. Прежние подсветки #D9AC55 / #DDB25E были осветлённым янтарём и в новой палитре лишние. */ /* will-change (правка 08.08): обе CTA двигаются на ховере (translateY), и без подсказки браузер выносил кнопку на собственный слой ПРЯМО в момент наведения — растеризация на первом кадре давала видимый затык (жалоба заказчика: «кнопка „обсудить проект“ при наведении подлагивает»). С will-change слой существует заранее, ховер начинается без рывка. */ .btn--primary, .btn--send { will-change: transform; } .btn--primary { background: var(--bp-cream); color: var(--bp-charcoal); } /* на наведении кнопка заливается honey, и чернила ОБЯЗАНЫ смениться на светлые: тёмные на honey — 2.59:1 (на прежнем золоте было 6.5, и переключать цвет не требовалось). Светлые дают 4.93:1. */ .btn--primary:hover { background: var(--bp-gold); color: var(--bp-cream); transform: translateY(-1px); } .btn--ghost { border: 1px solid var(--bp-off-white); color: var(--bp-off-white); } /* призрачная кнопка стоит на тёмном фоне — акцент «знаковый», whiskey */ .btn--ghost:hover { border-color: var(--bp-accent-ink); color: var(--bp-accent-ink); } .btn--ghost-dark { border: 1px solid var(--bp-dark-text); color: var(--bp-dark-text); } /* а эта — на светлой поверхности, здесь honey читается (4.93:1) */ .btn--ghost-dark:hover { border-color: var(--bp-amber); color: var(--bp-amber); } /* Правка 31.07 (четвёртая): главная кнопка формы заявки. Заказчик: «она должна быть точно выразительнее, шрифт сделай больше». Отличия от .btn--primary: кегль +26% (.84 → 1.06rem), габарит 52 → 66px, тёмная заливка вместо амбера (на молочной карточке она контрастнее амбера почти вдвое), радиус заодно с полями и стрелка-указатель, которая на наведении уезжает вправо-вверх. Амбер остаётся ролью наведения — акцент никуда не делся, он стал реакцией. */ /* Правка 31.07 (пятая): стрелка-указатель убрана по просьбе заказчика — вместе с ней снят её SVG из разметки и правила .btn--send svg. */ /* ПРАВКА 08.08 (вторая, просьба заказчика: «кнопку нужно сделать немного другим цветом, чтобы она отличалась от полей»). Кнопка была balsamico — тем же цветом, которым 08.08 залили поля-колодцы, и на карточке получилось три одинаковых тёмных прямоугольника подряд. Теперь кнопка honey: он и от кремовой карточки далеко, и от тёмных полей отличается сразу, и это тот же акцент, что у отмеченного чекбокса строкой выше и у кнопки в развороте кейса. Наведение уводит в balsamico — прежний цвет кнопки остался в деле как реакция. */ .btn--send { min-height: 66px; padding: 18px 28px; background: var(--bp-honey); color: var(--bp-champagne); border-radius: 12px; font-size: 1.06rem; font-weight: 700; letter-spacing: .14em; box-shadow: 0 10px 24px color-mix(in srgb, var(--bp-charcoal) 22%, transparent); transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .btn--send:hover { background: var(--bp-balsamico); color: var(--bp-champagne); transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb, var(--bp-charcoal) 30%, transparent); } @media (max-width: 480px) { .btn--send { min-height: 58px; padding: 15px 20px; font-size: .95rem; letter-spacing: .1em; } } /* ============================================================ 6.0 Шапка ============================================================ */ /* Правка 31.07: шапка ЗАФИКСИРОВАНА (никогда не прячется при скролле вниз) и полностью ПРОЗРАЧНА — подложка `.header--solid` и её тень удалены, инлайновую заливку по прогрессу полёта логотипа тоже снял main.js. Читаемость держат «чернила»: каждый элемент шапки сам определяет цвет по фону ПОД СОБОЙ (см. блок «чернила шапки» в main.js) плюс мягкое гало. Откат: вернуть .header--solid/.header--hidden и строки с header.style.backgroundColor / classList в main.js. */ .header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: transparent; /* ПРАВКА 04.08 (вторая): у шапки ОДИН цвет на всю страницу — кремовый. Здесь стояла пара начертаний: светлое по умолчанию и тёмное через класс .is-on-light, который JS вешал каждому элементу отдельно, замерив фон в его собственной точке. Заказчик попросил убрать переключение — «пусть шапка всегда будет в своём цвете». ЧТО ЭТО СТОИТ (замер по всей странице шагом 40px, 1440×900; норма WCAG для капса шапки — 3:1, это крупный текст): пункты навигации и знак — 1160px прокрутки из 12640 ниже нормы: 5120…5760 над золотой панелью услуг (2.75:1 — на грани, видно) и 7600…8120 над кремовой карточкой ленты кейсов (1:1, не видно); кнопка «Обсудить проект» — 2760px: к тем же двум участкам добавляются 1280…1840, 2320…3320 и 6480…7160, где кремовая заливка идёт по золотой карточке сценария и золотым панелям (везде 2.75:1 — форма кнопки читается, но контраст ниже нормы). То есть по-настоящему слепой участок один — 520px в ленте кейсов. Лечится либо мягкой charcoal-подложкой под шапкой, либо возвратом переключения. Ни того, ни другого заказчик не просил. Переменная --hdr-ink оставлена: на неё завязаны бургер (полоски рисуются currentColor) и векторный знак (fill=currentColor), и через неё цвет шапки меняется одной строкой. Вернуть переключение: механизм целиком — в истории git, последний коммит с ним 7fc5d36 (блок «чернила шапки» в main.js, атрибуты data-ink в разметке и правила .is-on-light здесь). */ --hdr-ink: var(--bp-off-white); color: var(--hdr-ink); } /* Правка 31.07 (пятая): ГАЛО УБРАНО ВЕЗДЕ — переменная --hdr-halo и все её потребители (text-shadow у пунктов, drop-shadow у знака и бургера, тень под кнопкой «Обсудить проект») удалены по просьбе заказчика. Читаемость держат только «чернила»: контраст в худшей точке 3.84:1, а весь текст шапки — капс 700 кеглем ≥18.66px, для которого норма WCAG AA равна 3:1. Откат: см. ревизию 54 в памяти проекта. */ .header__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); } .header__left { display: flex; align-items: center; justify-self: start; } /* ТЗ4 §3: ячейка-слот — «посадочное место» летящего логотипа */ .header__logoslot { width: 150px; height: 100%; display: flex; align-items: center; justify-content: center; } /* На 1024–1279 в шапке тесно: навигация выросла дважды, кнопка тоже. Слот — это посадочное место логотипа (сам знак 101px при высоте 24px), поэтому 120px ему хватает с запасом, а строка получает +30px воздуха. */ @media (min-width: 1024px) and (max-width: 1279.98px) { .header__logoslot { width: 120px; } } /* ГРАБЛИ (правка 31.07, пятая). Здесь стояло will-change: transform — и оно же портило знак. Эта подсказка говорит браузеру «трансформ будет меняться постоянно»: Chrome выносит элемент в отдельный композитный слой, растрирует его ОДИН раз и дальше просто тянет готовую картинку видеокартой. В полёте знак растёт почти в 10 раз, поэтому при возврате вверх на экран разворачивался растр, снятый с пристыкованного знака высотой 24px — отсюда «ужасное качество». Векторность источника тут ни при чём, её убивал именно кэш слоя. Без will-change (и с force3D: false у твина в main.js, иначе GSAP сам поднимет слой через matrix3d) браузер каждый кадр перерисовывает SVG заново, в его настоящем размере. */ .header__logo { display: block; color: var(--hdr-ink); } /* Знак — инлайновый SVG (правка 31.07, вторая итерация). Сначала он был маской из wordmark-light.png; растр не годится: в полёте знак растёт почти в 10 раз (transform: scale ≈ 9.4 на 1440), а исходник всего 800px по ширине — на первом экране буквы расплывались. Вектор из фирменного PDF масштабируется без потерь и красится через fill: currentColor, то есть слушается --hdr-ink шапки. width: auto — пропорцию держит сам viewBox (1854.6 × 441.9). Откат: см. ревизию 54 в памяти проекта. */ .header__logo-mark { display: block; height: 20px; width: auto; transition: color .25s var(--ease); } @media (min-width: 1024px) { .header__logo-mark { height: 24px; } } /* Гало у знака (drop-shadow) убрано 31.07 по просьбе заказчика вместе с классом-переключателем .header.is-flying. */ .header__cta { justify-self: end; } .header__nav { display: none; } @media (min-width: 1024px) { .header__nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); } /* Правка 30.07: пункты плохо читались на светлых участках фото — были тонкие (500), в нижнем регистре и приглушены до .88. Теперь капс, Copperplate Bold (настоящее начертание 700, не синтетика), разрядка и полная непрозрачность + мягкая тень: надпись держится и на кадре геро, и на тёмной подложке шапки. Откат: font-weight 500, opacity .88, без uppercase/letter-spacing. */ .header__nav a { position: relative; font-family: var(--font-grotesk); /* правка 30.07: кегль растили дважды — .8/1.05/1.06 → .9/1.19/1.2 → сейчас ещё +12%. На 1440 это 19.2px против исходных 15.1px. */ font-size: clamp(1rem, calc(1.33 * var(--vw-step)), 1.34rem); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; text-decoration: none; opacity: 1; /* цвет — из «чернил» элемента, их пересчитывает main.js; свечение (text-shadow) убрано 31.07 по просьбе заказчика */ color: var(--hdr-ink); white-space: nowrap; padding-block: 6px; transition: color .25s var(--ease); } /* янтарная линия выезжает слева направо — тот же жест, что у ссылок в кейсах; на клавиатуре срабатывает по :focus-visible */ .header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bp-accent-ink); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease); } .header__nav a:hover, .header__nav a:focus-visible { color: var(--bp-accent-ink); } .header__nav a:hover::after, .header__nav a:focus-visible::after { transform: scaleX(1); } } .header__cta { display: none; } /* ---------- Кнопка «Обсудить проект» (правка 30.07, третья итерация) ---- Наклон снят — кнопка снова прямая, но заметно крупнее прежней: кегль, поля и скругление выросли, тёмный контур (inset-обводка) убран, осталась чистая янтарная плашка с мягкой тенью и бликом по наведению. Кегль и поля заданы вилками: на 1024 в правой колонке шапки места мало (навигация стала крупнее и отъедает ширину), там кнопка ужимается сама. Откат к наклонной «наклейке»: transform translateY(14px) rotate(16deg), flex-direction column и метка в две строки в разметке. */ @media (min-width: 768px) { .header__cta { position: relative; display: inline-flex; min-height: 0; padding: clamp(14px, calc(1.2 * var(--vw-step)), 19px) clamp(20px, calc(2.1 * var(--vw-step)), 32px); font-size: clamp(.9rem, calc(1.2 * var(--vw-step)), 1.25rem); font-weight: 700; line-height: 1.2; letter-spacing: .1em; white-space: nowrap; border-radius: 16px; overflow: hidden; /* Свечение вокруг кнопки (box-shadow 0 10px 26px) убрано 31.07 по просьбе заказчика — и в покое, и на наведении. */ transition: transform .35s var(--ease), background-color .25s var(--ease); } .header__cta::after { content: ""; position: absolute; inset: -40% -60%; /* блик по кнопке: кнопка светлая, и белая полоса на ней не видна вовсе — блик идёт основным акцентом (04.08 золото, 07.08 honey) */ background: linear-gradient(100deg, transparent 42%, color-mix(in srgb, var(--bp-gold) 55%, transparent) 50%, transparent 58%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; } .header__cta:hover, .header__cta:focus-visible { transform: scale(1.05); /* цвет чернил на наведении переключает .btn--primary:hover выше */ background: var(--bp-gold); } .header__cta:hover::after, .header__cta:focus-visible::after { transform: translateX(120%); } } /* Мобильное меню */ .burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; margin-left: -10px; color: var(--hdr-ink); /* полоски рисуются currentColor */ /* гало убрано вместе со свечением остальных элементов шапки (31.07) */ } .burger span { width: 22px; height: 2px; background: currentColor; transition: transform .3s, opacity .3s; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 1024px) { .burger { display: none; } } .mnav { position: fixed; inset: 0; z-index: 90; background: var(--bp-black); display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; } .mnav.is-open { opacity: 1; visibility: visible; } /* Пока шторка открыта, знак в шапке убран: на первом экране он ещё «в полёте» — крупный — и накрывал бы собой пункты меню. */ .menu-open .header__logo { opacity: 0; pointer-events: none; } .header__logo { transition: opacity .25s var(--ease); } /* тот же капс, что и в десктопной навигации (правка 30.07) */ .mnav a { font-family: var(--font-grotesk); font-size: 1.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bp-off-white); text-decoration: none; padding: 10px 0; /* волосяная линия по тёмному фону меню: honey на 25% с фоном почти сливается, поэтому здесь whiskey */ border-bottom: 1px solid color-mix(in srgb, var(--bp-accent-ink) 25%, transparent); } .mnav a.btn { margin-top: var(--s-4); font-family: var(--font-grotesk); font-size: .82rem; letter-spacing: .12em; color: var(--bp-black); border-bottom: 0; } /* ============================================================ 6.1 Hero ============================================================ */ .hero { position: relative; /* Две строки, и обе нужны. svh — «малый» вьюпорт, то есть высота при ПОКАЗАННОЙ адресной строке; по спецификации она не меняется, когда браузер прячет и снова показывает панель, поэтому первый экран не дёргается при прокрутке (правка 09.08, см. .wcard__list li). Но браузеры до Safari 15.4 / Chrome 108 про svh не знают и отбросили бы правило целиком — герой остался бы без min-height и схлопнулся по содержимому. Строка с vh идёт первой как запасная: кто знает svh, перезапишет её следующей. */ min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: var(--bp-off-white); background: var(--bp-black); overflow: hidden; } .hero__media { position: absolute; inset: 0; } .hero__media picture { display: contents; } /* ПРАВКА 07.08: кадр героя сменился (двое в креслах, столик с коктейлями между ними) — точка кадрирования пересчитана под него. Здесь честный центр: композиция симметричная, столик ровно посередине, фигуры по краям. Прежние 46% 42% были подобраны под ретро-натюрморт с негрони, где стакан стоял левее центра. На рабочих окнах вертикаль почти не работает: кадр 1.777 против 1.68 на 1512×900 (ходу по ширине 86px) и против 1.78 на 1920×1080 — там он ложится в окно один в один. */ .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* ТЗ11 §5.3: фон затемнён сильнее — вертикальный градиент глубже + левый скрим под текстово-логотипной зоной: и логотип, и заголовок читаются безусловно */ .hero__media::after { content: ""; position: absolute; inset: 0; /* правка 04.08: затемнение набрано фоновым charcoal, а не прежним графитом */ background: linear-gradient(90deg, color-mix(in srgb, var(--bp-charcoal) 72%, transparent) 0%, color-mix(in srgb, var(--bp-charcoal) 28%, transparent) 48%, color-mix(in srgb, var(--bp-charcoal) 5%, transparent) 72%, transparent 100%), linear-gradient(180deg, color-mix(in srgb, var(--bp-charcoal) 62%, transparent) 0%, color-mix(in srgb, var(--bp-charcoal) 30%, transparent) 36%, color-mix(in srgb, var(--bp-charcoal) 92%, transparent) 100%); } /* ТЗ15 §4.2: трастлайн удалён — кнопки не должны липнуть к нижней кромке, отступ снизу ≥ 8vh */ .hero__content { position: relative; z-index: 2; padding-block: 0 max(var(--s-4), 8vh); } /* Правка 30.07: строка-eyebrow героя удалена вместе с разметкой. Правка 30.07 (вторая): фраза идёт СПЛОШНЫМ текстом по центру экрана, капсом и тем же шрифтом, что навигация (Copperplate, --font-grotesk) — размер, разумеется, свой. Разбивка на серифный заголовок + капс-хвост (.hero__kicker) снята целиком вместе с янтарной линейкой. Кегль подобран так, чтобы фраза ложилась в три строки на десктопе: капс Copperplate с разрядкой широкий, ~0.8 кегля на знак. Откат: font-family serif, text-align left, max-width 13em + отдельный .hero__kicker (см. историю правок в памяти проекта). */ .hero__title { max-width: 36em; margin-inline: auto; text-align: center; font-family: var(--font-grotesk); font-style: normal; font-weight: 700; /* правка 30.07: +30% к кеглю (было .95/1.5/1.55) */ /* правка 08.08: ещё +15% (заказчик: «сделать чуть большим шрифтом, нижний край на месте»). Низ держится сам: .hero — flex-колонка с justify-content: flex-end, контент прижат к низу и растёт вверх. */ font-size: clamp(1.4rem, calc(2.25 * var(--vw-step)), 2.3rem); line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 24px color-mix(in srgb, var(--bp-charcoal) 60%, transparent); } /* На узком экране в строку влезает ~21 знак — это длина самих неразрывных групп, и они начинают рвать текст на огрызки («ЗАКРЫВАЯ», «ПОЛНЫЙ ЦИКЛ:» каждый отдельной строкой). Там переносы отдаём браузеру. */ @media (max-width: 599.98px) { .hero__title .nw { white-space: normal; } } /* ТЗ6 §5 / ТЗ15: жёсткая сетка героя в 100svh — логотип (центр ~32vh), текстовая группа с 42vh, кнопки; всё в одном экране. .hero__sub и .hero__trust удалены по ТЗ15 §2.3/§4. */ .hero__content { margin-top: 42vh; } .hero__title em { font-style: italic; color: var(--bp-accent-ink); } /* ТЗ15 §3.3: неразрывные группы (союз/предлог + слово) — nbsp не работает под SplitText, переносы держит nowrap-обёртка */ .nw { white-space: nowrap; } /* ============================================================ 6.2 Полоса ключевых проектов (marquee) Правка 29.07: полоса стала выше и спокойнее — тонкие линейки сверху и снизу, крупный шаг между проектами, ромб-разделитель вместо точки. Каждый проект набран СВОИМ фирменным начертанием (см. комментарий в разметке), поэтому у элементов нет общего font-family: базовый кегль задаёт --mq, а каждый знак берёт от него свою долю — так разнородные логотипы стоят на одной оптической высоте. ============================================================ */ .trust { /* правка 03.08: полоса потеряла свой беж — фон общий, знаки светлые */ background: transparent; color: var(--bp-off-white); /* правка 30.07: полоса дважды понижена — сперва срезаны поля (172 → 124px), затем ещё на ~17% вместе с самими знаками (124 → ~104px): поля 24 → 20px, базовый кегль --mq 40 → 33.6px. */ padding-block: clamp(12px, 1.6vw, 20px); overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--bp-off-white) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--bp-off-white) 18%, transparent); /* базовый кегль полосы — от него считаются все начертания и логотипы */ --mq: clamp(1.2rem, calc(2.55 * var(--vw-step)), 2.1rem); } .marquee { position: relative; overflow: hidden; } .marquee__track { display: flex; align-items: center; /* правка 29.07: шаг сокращён — строка стала заметно короче и плотнее */ gap: clamp(var(--s-3), 2.6vw, var(--s-6)); width: max-content; animation: marquee 36s linear infinite; will-change: transform; } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: var(--s-4); } /* строка не зациклена — хвостовой ромб после последнего проекта лишний */ .marquee__item:last-child::after { display: none; } } .marquee__item { white-space: nowrap; display: flex; align-items: center; gap: clamp(var(--s-3), 2.6vw, var(--s-6)); color: var(--bp-off-white); } /* разделитель — маленький амберовый ромб вместо точки */ .marquee__item::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; /* ромб в 7px лежит прямо на фоне строки — знак, а не пятно */ background: var(--bp-accent-ink); transform: rotate(45deg); } /* ---------- фирменные начертания проектов ---------- */ /* Duran Bar — контрастная антиква смешанным регистром, как в презентации. Правка 06.08: то же начертание получил класс .mq--type — под ним идут YUMMS и Poison Drop, у которых знака ещё нет. Приём общий с плашками кейсов (mark.type "antiqua", см. .pmark-type), поэтому и в ленте, и в строке имя выглядит одинаково. Когда заказчик пришлёт знаки, элемент меняется на mq--logo с картинкой — правило можно будет снять. */ .mq--duran, .mq--type { font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-weight: 500; font-style: normal; font-size: calc(var(--mq) * 1.06); letter-spacing: .01em; } /* BURO. ЦУМ — тонкая разряжённая антиква в две строки, как в лого ресторана. Локап отдельным столбцом: сам .marquee__item — строка, в ней ещё и ромб. */ .mq__lockup { display: flex; flex-direction: column; align-items: center; } .mq__buro, .mq__tsum { display: block; text-align: center; font-family: var(--font-grotesk); font-weight: 300; text-transform: uppercase; line-height: 1.1; } /* у Copperplate капитель низкая — 0.53 кегля, поэтому множитель выше, чем кажется по числу: так «BURO» встаёт вровень с остальными знаками */ .mq__buro { font-size: calc(var(--mq) * 1.13); letter-spacing: .18em; text-indent: .18em; } .mq__tsum { margin-top: .3em; font-size: calc(var(--mq) * .44); letter-spacing: .42em; text-indent: .42em; color: color-mix(in srgb, var(--bp-off-white) 72%, transparent); } /* ---------- знаки, извлечённые из презентации ---------- Высоты подобраны ПОШТУЧНО по оптике, а не по коробке файла: у «Зойки» больше половины кадра занимают росчерки, у Lúwo сверху висит акцент, у АЙНЫ — плотные капители. */ .mq--logo { align-items: center; } .mq__img { display: block; width: auto; } .mq__img--zoyka { height: calc(var(--mq) * 1.45); } .mq__img--aina { height: calc(var(--mq) * .95); } .mq__img--luwo { height: calc(var(--mq) * 1.04); } /* PIMS — чистая капитель без выносных, поэтому высота знака = высота капители соседей (у «S» лишь типографский овершут в пару пикселей) */ .mq__img--pims { height: calc(var(--mq) * .76); } /* YUMMS (правка 08.08): слово толстое и округлое, как у PIMS — та же ступень высоты даёт им одинаковый оптический вес в строке */ .mq__img--yumms { height: calc(var(--mq) * .76); } /* LEPS.ASIA — та же история, что у PIMS: файл (600×88) обрезан ровно по капители, выносных нет, поэтому и множитель тот же. Знак вчетверо длиннее прочих — это длина самого слова, ужимать его по высоте ради ширины нельзя, иначе капитель уедет ниже соседей. */ .mq__img--leps { height: calc(var(--mq) * .76); } /* 6.3 PAS и 6.4 Философия — секции и стили УДАЛЕНЫ по ТЗ14 §2–3; «Три сценария» (id=about) занял место PAS сразу после трастстрипа */ /* ============================================================ 6.5 Услуги — СТОПКА карточек «тёмная часть ↔ цветная панель». Референс: buckssauce.com/wholesale, блок who / what / why; разобран по чанку 600d175e16e55ce6.js (модуль 83386) и обмерен живьём. ГЛАВНОЕ: это не колонка карточек, а стопка. Контейнер [data-wcards] ровно в один экран (height:100vh, min-height:880px), ряды из него вываливаются наружу и по скрабу запиненной секции наезжают друг на друга — см. main.js. Отсюда два обязательных требования к ряду: он НЕПРОЗРАЧЕН (иначе сквозь него виден предыдущий) и стоит в position:relative — порядок наложения тогда равен порядку в DOM, и каждый следующий ряд закрывает все предыдущие. ЧИСЛА СНЯТЫ С РЕФЕРЕНСА ЖИВЬЁМ (1440×900, getComputedStyle): ряд 2 равные колонки, gap 10px, поля 10px сверху и снизу, разделитель — dashed 1px, 30% от цвета текста; панель padding 40, gap 40, радиус 10, min-height 480, содержимое разнесено по краям (space-between); заголовок 80px, интерлиньяж 1.0, трекинг −0.02em, капс; слово 180px, интерлиньяж 1.0, трекинг −0.02em, наклон ±3°; пункт 18px / 27px, иконка и текст в 20px друг от друга, поля по 5px, галочка 16×16 с отступом 4px сверху. На экранах ниже 720px у референса своя ступень (класс sh:, реально «(min-width:64rem) and (max-height:719px)»): поля ряда 8, панель 28/24, min-height 400, заголовок 60, пункт 16/4. Перенесена дословно. Цвет панели идёт по кругу янтарь → айвори → вино, как index%3. Появление карточки — общей лентой (playCard в reveal.js). ============================================================ */ .wcards { /* ПРАВКА 04.08: панели идут ровно тремя акцентами палитры. Добавочный тон --wc-wine #7A2B2E удалён: он существовал потому, что бордо #2B0E12 было почти чёрным и панелью не читалось. ПРАВКА 07.08: акценты сменились на honey → coffee → whiskey, и третья панель стала СВЕТЛОЙ — чернила на ней тёмные, см. блок .wcard--amber/--ivory/--wine ниже. */ /* Полоска, на которую встаёт очередной ряд стопки, — та же величина, что у референса (64px). Используется и в CSS, и в main.js. */ --wc-top: 64px; /* Галочка — маска, а не в разметке: красится currentColor и на светлой панели, и на винной, а список остаётся чистым текстом. Штрих тонкий (1.7): у референса галочка лёгкая, жирная «птица» спорит с жирным зачином пункта. */ --wc-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.7l3.7 3.7L13.4 3.9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .wcards-head { text-align: center; } /* Заголовок секции — тот же приём, что у «НАШИ ПРОЕКТЫ» (6.8): прямой Roslindale капсом по центру. */ .wcards-head .h2 { max-width: none; font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-style: normal; font-weight: 700; /* правка 08.08 (заказчик: «шрифт соответственно побольше» — вместе со сменой текста на «Кофейни, бары, рестораны»): вилка поднята на ~17%. Требование одной строки в силе: новый текст короче прежнего, на 1024 влезает с запасом. */ font-size: clamp(2.9rem, calc(7 * var(--vw-step)), 6.3rem); line-height: 1.04; letter-spacing: .027em; text-transform: uppercase; color: var(--bp-off-white); -webkit-text-stroke: max(1px, .0135em) currentColor; } /* Правка 04.08: заголовок обязан стоять В ОДНУ СТРОКУ (просьба клиента). Ступенчатый --vw-step для этого не годится: он постоянен внутри брейкпоинта, а строка обязана ужиматься на каждом пикселе ширины, иначе на 1024–1439 она переламывается. Поэтому здесь — единственное на секцию исключение с настоящим 100vw. ЧИСЛО 20.6 — НЕ НА ГЛАЗ: это отношение ширины набранной строки к кеглю, снятое живьём для ЭТОЙ фразы в Roslindale Display Condensed капсом с текущим трекингом и обводкой. Меняется текст заголовка ИЛИ трекинг — пересчитать отношение, иначе строка либо переломится, либо вылезет за край. Именно это и случилось 05.08, когда трекинг подняли с .012 до .027em: при прежних 19.9 строка выходила 1415px против 1385 доступных, и страница получала 10px горизонтальной прокрутки. Замер после правки: 1415 / 69.15 = 20.46, взято 20.6 — процент запаса на округления. Вычет 24px — запас на полосу прокрутки (100vw её включает, ширина контента — нет). nowrap здесь страховка: если кегль всё-таки окажется великоват, лучше лёгкий перелив, чем молчаливый перенос на вторую строку. */ @media (min-width: 1024px) { .wcards-head .h2 { font-size: min(5.4rem, calc((100vw - 2 * var(--gutter) - 24px) / 20.6)); white-space: nowrap; } } /* Подзаголовок .lead из разметки снят вместе с текстом (04.08); правило удалено, чтобы не висело мёртвым. Откат: max-width 38em, курсив --font-serif, кегль clamp(1.08rem, 1.5 * --vw-step, 1.5rem). */ /* ---------- контейнер стопки ---------- */ .wcards__stack { position: relative; display: flex; flex-direction: column; padding-inline: var(--gutter); overflow: visible; /* ряды обязаны вываливаться наружу */ } @media (min-width: 1024px) { /* Рост коробки уточняет main.js через --wc-stack-h на : он равен конечному состоянию стопки. У референса коробка ровно в экран (h-screen) и хвоста под последней карточкой нет — ряд там почти во весь экран. У нас ряд ~500px, и на экран в 900 под ним оставалось 143px пустоты: стык «Услуги → Кейсы» получался 303px против 160 на всех остальных. Переменная, а не инлайновый height, — потому что пин откатывает инлайновые стили коробки на каждом refresh (см. ГРАБЛИ в main.js). min-height отсюда убран вместе с его же сбросом в блоке низких экранов: он перебивал бы height и возвращал коробке лишний рост. Запасное значение — auto, а НЕ прежние 100vh. Переменную ставит только ветка стопки, а она не запускается ни при prefers-reduced-motion, ни если GSAP не загрузился. Коробка в экран без своего таймлайна — это все ряды стопки (было семь общей высотой 3600px, с правкой 07.08 — четыре, около 2700), вываленные (overflow: visible) поверх блока кейсов. При auto ряды просто идут обычной колонкой — ровно то, что видит мобайл. */ .wcards__stack { height: var(--wc-stack-h, auto); /* Правка 04.08: поля ряда 10px, а не --gutter (20). Ровно p-container референса: у него ряд шириной «окно минус 20», у нас был «минус 40». На 1512 это 1477 против 1457 — колонка 733.5 вместо 723.5. */ padding-inline: 10px; } } /* ---------- ряд ---------- */ .wcard { /* position + непрозрачный фон — механика стопки, см. шапку раздела */ position: relative; background: var(--bp-page); display: grid; gap: 10px; padding-block: 10px; border-bottom: 1px dashed color-mix(in srgb, var(--bp-cream) 30%, transparent); } .wcard:first-child { border-top: 1px dashed color-mix(in srgb, var(--bp-cream) 30%, transparent); } @media (min-width: 1024px) { /* ГРАБЛИ: именно minmax(0,1fr), а не 1fr. У 1fr нижняя граница — min-content, и одно длинное слово тёмной части крупным кеглем раздувало свою колонку, отбирая ширину у панели: ряд переставал делиться пополам и выпадал из общего ритма. */ .wcard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } /* чередование сторон: у нечётных карточек тёмная часть уходит вправо */ .wcard--flip .wcard__aside { order: 2; } .wcard { will-change: transform; } } /* ---------- тёмная часть ---------- */ .wcard__aside { display: flex; align-items: center; justify-content: center; text-align: center; } @media (max-width: 1023.98px) { .wcard__aside { padding: var(--s-3) 0; } } /* Крупная надпись тёмной части. Наклон ±3° — конечное состояние твина (см. playCard); здесь он же прописан в CSS как состояние без JS. */ .wcard__q { margin: 0; /* у --word это

: заголовком служит .wcard__title в панели */ font-family: "Roslindale Display Condensed", "Times New Roman", serif; /* 400, а не 700, — как у референса (.wholesale-question идёт нормальным начертанием). На экране это НИЧЕГО не меняет: оба @font-face Roslindale Display Condensed объявлены с диапазоном «400 700» на один статический файл, поэтому браузер не синтезирует жирность и рисует одно и то же начертание на любом весе из диапазона (проверено замером: строка в 100px шириной 1016.3px при 400, 500, 600 и 700). Ставим 400 ради буквального совпадения объявления с референсом. */ font-style: normal; font-weight: 400; text-transform: uppercase; /* ПРАВКА 05.08: трекинг снят. Было −.02em — число с buckssauce, и именно из-за него заказчик написал, что «расстояние между буквами везде очень маленькое». Ориентир теперь свой, презентация Barpoint Coffee NEW: обмер всех 24 полос (786 пар знаков в заголовках, 1628 в тексте) даёт трекинг РОВНО НОЛЬ, квартили тоже нулевые. Подробнее — у .h-serif. */ line-height: 1; letter-spacing: normal; color: var(--bp-off-white); transform: rotate(-3deg); } .wcard--flip .wcard__q { transform: rotate(3deg); } /* КЕГЕЛЬ — ФОРМУЛА РЕФЕРЕНСА, СНЯТАЯ ЗАМЕРОМ НА ТРЁХ ШИРИНАХ. Класс lg:text-180 у buckssauce — это не 180 фиксированных пикселей, а доля ширины окна: 1024 → 128px, 1440 → 180px, 1920 → 240px, то есть ровно 12.5vw (180/1440) без верхнего предела. Прежняя ступенчатая лесенка (11.4/14/180 от --vw-step) давала на 1024–1279 кегль КРУПНЕЕ референсного (146 против 128), а на мониторе шире 1440 — мельче. Настоящий vw здесь допустим по той же причине, что и у .wcards-head .h2: слово обязано ужиматься на каждом пикселе ширины, иначе оно вылезает из своей половины ряда. Проверено самым широким словом («ЦИФРЫ», габарит с наклоном 569px при кегле 180): на 1024 просит 405 при колонке 502, на 1280 — 506 при 630, на 1920 — 759 при 950. Запас есть везде. */ .wcard__aside--word .wcard__q { font-size: 12.5vw; } /* СТУПЕНЬ ДЛЯ ДЛИННЫХ СЛОВ (правка 05.08, вместе с «Цикл» → «Система» и «Нормы» → «Порядок»). У референса в этой половине стоят WHY? / WHAT? / WHO? — четыре-пять знаков, и один кегль на все карточки ему хватает. Русское слово в семь знаков при 12.5vw занимает ровно свою половину и даже чуть больше: замер на 1024 дал габарит 495 и 496 при колонке 490, то есть перелив в 5–6px, а на 1440 оставалось по одному пикселю запаса — это не раскладка, а совпадение. Дело не в ширине окна: и кегль, и колонка считаются от неё, поэтому их отношение постоянно, и слово либо не влезает нигде, либо влезает везде. 11.3vw дают тому же «ПОРЯДКУ» габарит 448 при колонке 490 на 1024 и 630 при 698 на 1440 — запас около 9% на обеих. Он нужен не для красоты: пока Roslindale не подгрузился, строка набирается запасным Times New Roman, а он на четверть шире (816px против 679 при кегле 180). Ниже 1024 ступень не работает намеренно: там тёмная половина занимает всю ширину, и вилки 22vw хватает любому слову. */ @media (min-width: 1024px) { .wcard__aside--word .wcard__q--long { font-size: 11.3vw; } } /* Полный заголовок на тёмной части — своя, куда более мелкая ступень: тут не одно слово, а фраза в несколько строк. */ .wcard__aside--head .wcard__q { font-size: clamp(2rem, calc(4.6 * var(--vw-step)), 4.6rem); letter-spacing: .01em; /* 9em, а не вся колонка: наклон в 3° раздувает габарит строки, и на полной ширине фраза упиралась в край ряда */ max-width: 9em; } /* Кадр в тёмной части заполняет свою половину целиком — так же, как панель заполняет свою: обе половины ряда одной высоты. ГРАБЛИ: кадр вынут из потока (absolute + inset). Высота ряда обязана определяться ТОЛЬКО панелью: у картинки 900×1054 в колонке 687px своя высота — 805px, и ряд раздувало до 826 при соседях в 500–650. */ .wcard__media { width: 100%; margin: 0; border-radius: 10px; overflow: hidden; } @media (min-width: 1024px) { .wcard__aside--media { position: relative; } .wcard__aside--media .wcard__media { position: absolute; inset: 0; width: auto; } } @media (max-width: 1023.98px) { .wcard__media { aspect-ratio: 4 / 3; } } .wcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- цветная панель ---------- */ .wcard__panel { display: flex; flex-direction: column; /* ПРАВКА 04.08 (четвёртая): содержимое стоит одной группой ПОСЕРЕДИНЕ. Было space-between — заголовок к верхнему краю, список к нижнему; так у референса. Пока рост панели задавало содержимое, между ними оставалось 100–150px, и это читалось как воздух. После того как рост стал считаться от окна (100vh − 240), дыра выросла до 200–350px — у карточек с четырьмя пунктами панель выглядела наполовину пустой. Уменьшать панель нельзя: её рост — это и есть то, из-за чего карточка занимает экран целиком и следующая не лезет снизу (см. выше). Поэтому свободное место ушло из середины к краям: сверху и снизу поровну, а заголовок со списком стоят вплотную друг к другу через свой gap. Пустота у края читается как поле, пустота в середине — как ошибка вёрстки; места столько же, вид другой. ПРАВКА 05.08: содержимое прижато к ВЕРХУ панели. Заказчик уточнил по скриншотам референса: список стоит не у нижней кромки, а на одном и том же небольшом расстоянии под заголовком — сколько бы пунктов в нём ни было; весь остаток высоты копится внизу. Поэтому не center (было 04.08) и не space-between (был до того и полдня 05.08), а flex-start с фиксированным gap между заголовком и списком. */ justify-content: flex-start; gap: var(--s-3); padding: var(--s-3); border-radius: 10px; min-height: 440px; /* min-h-110 референса на узком экране */ } /* ПРАВКА 04.08 — РОСТ РЯДА. Главная причина жалобы «блок не доходит до центра, а его уже накрывает следующий». У референса ряд 609–663px при экране 900 (замер живьём), то есть встав на своё место, он занимает экран почти целиком, и следующий ряд в этот момент ещё ниже кромки. У нас ряд был 501–568: карточка вставала на 128px от верха, кончалась на 629, и оставшиеся 271px экрана занимал уже наехавший снизу сосед — прочитать её целиком было нельзя НИКОГДА. Поэтому рост панели считается не от содержимого, а от окна: 100vh − 240. Ряд тогда = 100vh − 220 (плюс поля 10+10), а stepCap() в main.js от такого роста сам даёт cap = 2, то есть глубже 64·2 = 128 от верха стопки ряд не опускается. Итог на 900: карточка стоит 192…872 при экране 900 — открыта полностью, сосед торчит на 28px. Соотношение то же, что у референса, и держится на любой высоте окна. Вилка: снизу 480 (прежнее значение референса — на низких окнах ниже опускаться некуда), сверху 760 — иначе на мониторе в 1440 точек между заголовком панели и списком разверзается полтысячи пикселей пустоты. */ @media (min-width: 1024px) { /* ПРОСВЕТ «ЗАГОЛОВОК → СПИСОК» = 60px, И ЭТО ЗАМЕР, А НЕ ГЛАЗОМЕР. 05.08 он был поставлен в 80 по присланным скриншотам. Живой обмер buckssauce на 1440×900 даёт другое число и объясняет, из чего оно складывается: у панели flex-gap 40px (gap-10), а у самого списка сверху ещё margin-top 20px от прозаических стилей — суммарно ровно 60px между нижней кромкой заголовка и первым пунктом. Проверено на обеих карточках, где просвет измерим: 408−348 и 1033−973. */ /* ПРАВКА 07.08 (третья), ПРОСЬБА ЗАКАЗЧИКА «чуть больше воздуха между заголовком и текстом и между самими пунктами». Просвет 60 → 72, поля 40 → 36. Поля отданы не ради вида, а ради высоты: карточка со всеми правками этого дня и так впритык к кромке, а четыре пикселя с каждой стороны работают дважды — минус 8 по вертикали и плюс 8 к ширине текстовой колонки, то есть ещё и меньше переносов. */ /* ПРАВКА 08.08 (вторая) — ПОЛЯ И ПРОСВЕТ СЧИТАЮТСЯ ОТ ВЫСОТЫ ОКНА. Заказчик: «на Windows блок смещён вниз». Дело не в системе, а в том, что виндовые ноутбуки отдают браузеру короткий CSS-вьюпорт (масштаб 125–150%: 1536×864, 1366×768, 1280×720), а ниже 900px включалась тесная ступень, посчитанная под 1024×768. Замер: карточка занимала 90% окна на 1512×900 и лишь 71–74% на виндовых — отсюда пустота под ней и ощущение съехавшего блока. 36px и 72px здесь — ровно те же числа, что стояли жёстко: 4vh и 8vh на высоте 900. То есть на рабочем маке не меняется ничего, а на коротких окнах карточка ужимается плавно, а не обрывом. */ .wcard__panel { padding: clamp(18px, 4vh, 40px); gap: clamp(20px, 8vh, 76px); /* svh (правка 08.08, адаптация): на планшете ≥1024 стопка активна, а vh там не видит тулбаров Safari — панель считалась бы от высоты, которой на экране нет, и низ ряда уходил бы под кромку. Десктопу безразлично (svh = vh), а JS стопки меряет window.innerHeight — он на старте равен как раз малой высоте, формулы сходятся. */ min-height: clamp(420px, calc(100svh - 190px), 900px); } } /* Классы-модификаторы остались прежними по именам — они отмечают позицию в цикле, а не оттенок, и разметка на них завязана. ПРАВКА 07.08 (вторая, просьба заказчика): цветов в стопке ДВА, через один — honey → coffee → honey → coffee. Цикл был на три (index%3), из-за чего четвёртая карточка повторяла первую; теперь чередование ровное, а --wine из разметки убран совсем (см. index.html). Правило ниже оставлено на случай, если третий цвет вернут: whiskey светлее шампани, поэтому чернила на нём ОБЯЗАНЫ быть тёмными — светлые дали бы 1.66:1. Чернила: на honey 4.93:1, на coffee 11.04:1 (было на золоте 2.75). */ .wcard--amber .wcard__panel { background: var(--bp-honey); color: var(--bp-champagne); } .wcard--ivory .wcard__panel { background: var(--bp-coffee); color: var(--bp-champagne); } .wcard--wine .wcard__panel { background: var(--bp-whiskey); color: var(--bp-balsamico); } /* Несущий якорь панели: у референса это единственная крупная строка сверху, и без неё панель выглядит пустой. Стоит в КАЖДОЙ карточке. */ .wcard__title { margin: 0; font-family: "Roslindale Display Condensed", "Times New Roman", serif; /* 400 — начертание референса; на экране равно прежним 700, см. .wcard__q */ font-style: normal; font-weight: 400; text-transform: uppercase; /* Тот же приём, что у слова выше: text-80 у buckssauce — доля ширины окна, а не 80 фиксированных пикселей. Замер на трёх ширинах: 1024 → 56.89px, 1440 → 80.00px, 1920 → 106.67px, то есть ровно 5.5556vw (80/1440), предела сверху нет. Прежняя лесенка 4.4/5.4/5rem от --vw-step отставала на 1024–1279 (56.3 против 56.9…71.1) и замирала на 80px выше 1440. Самое широкое слово («ОБОРУДОВАНИЕ», 507px при кегле 80) просит 361px при поле панели 422 на 1024, 451 при 550 на 1280 и 507 при 630 на 1440 — влезает на всех ширинах. Правка 07.08 (вторая) опускала кегль до 4.9vw по просьбе заказчика, правка 07.08 (третья) вернула его обратно — заказчик посмотрел вживую. Число референсное, трогать без нужды не стоит: 4.9 держалось ровно полчаса. Подросли при этом только маленький заголовок (2.2vw) и пункт (1.35rem), так что отношение «заголовок к пункту» теперь 3.70 против 4.04 до всего этого захода. */ font-size: 5.5556vw; /* трекинг снят вместе со всеми заголовками проекта, см. .h-serif */ line-height: 1; letter-spacing: normal; color: inherit; /* ПРАВКА 05.08: заголовок снова по ЛЕВОМУ краю — как на референсе, скриншот которого прислал заказчик. Центровка (max-width 13em + margin-inline auto + text-align center) держалась ровно один день, с правки 04.08. Откат — вернуть эти три строки. */ text-align: left; } /* Ступень sh: референса — «(min-width:64rem) and (max-height:719px)», внутри неё text-60, то есть 60/1440 = 4.1667vw. Условие перенесено дословно; наш собственный блок низких экранов ниже шире по порогам, но кегля заголовка он больше не трогает — иначе на 1280×760 заголовок уезжал бы вниз против референса без всякой на то причины. */ @media (min-width: 1024px) and (max-height: 719px) { .wcard__title { font-size: 4.1667vw; } } /* ---------- группы с маленьким заголовком (правка 07.08) ---------- Второй и третий блоки в файле заказчика устроены иначе первых: вместо «Названия» и одного списка там три группы, у каждой строка капсом и свои пункты. Обёртка нужна ровно затем, чтобы не трогать просвет .wcard__panel: у панели gap 60px (40 + margin-top списка у референса), и между группами он был бы вдвое велик — три группы с таким просветом не влезают в ряд ни на одном десктопном окне. Здесь просвет свой. Панель при этом видит ОДИН дочерний узел, её собственный gap в дело не вступает вовсе. Просветы были 28 и 12 — не из референса (у buckssauce групп нет), а из пропорции самой панели: между группами тот же шаг, что у неё между заголовком и списком в тесной ступени, а заголовок к своему списку вдвое плотнее, чтобы группа читалась как одно целое, а не как три равноудалённые строки. Правка 07.08 (вторая и третья): 22 и 13. Заказчик поднял кегли, и вторая карточка на 1440×900 стала 773px при 772 доступных — перелив в один пиксель. Просветы здесь — единственное, что можно резать, не трогая кегли, поэтому между группами осталось 22. А просвет «заголовок группы → её пункты» третьей правкой, наоборот, поднят с 9 до 13: заказчик просил больше воздуха ровно там. Отношение 1.7 — группа по-прежнему видна группой, но заголовок уже не приклеен к списку. Итог замера на 1440×900: ряд 755, запас 17. */ .wcard__groups { display: flex; flex-direction: column; gap: 22px; width: 100%; } .wcard__group { display: flex; flex-direction: column; gap: 13px; } /* Маленький заголовок группы. Семейство — то же, что у большого (.wcard__title), и это не украшение: рядом с ним пункт набран Apoc, и различить заголовок от пункта на 22–28px даёт именно смена гарнитуры, а не кегль. Жирность НЕ поднимаем — у Roslindale оба @font-face объявлены диапазоном «400 700» на один статический файл, вес там ничего не меняет (см. .wcard__q). Кегль — та же доля окна, что у .wcard__title, только вдвое с лишним мельче. Правка 07.08 (вторая), просьба заказчика «маленькие заголовки чуть больше»: 1.9444 → 2.2vw, на 13%. На 1440 это 31.7px против прежних 28. Пол поднят с 22 до 24 по той же причине, по какой он вообще существует: на 1024–1279 пункт идёт ступенью мельче (19.2px после этой же правки), и заголовок обязан отрываться от него хотя бы на четверть кегля, иначе группа читается сплошным текстом. Потолок 44 — чтобы на 1920 группа не спорила с большим заголовком соседних карточек (там он теперь 94.1). */ .wcard__sub { margin: 0; font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-style: normal; font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 2.2vw, 44px); line-height: 1.05; letter-spacing: normal; color: inherit; } .wcard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; width: 100%; } .wcard__list li { display: flex; align-items: flex-start; gap: 20px; /* 19.8px — просьба заказчика 05.08: пункт на 10% крупнее. Это единственное сознательное расхождение с типографикой референса, у него text-[18px] на любой ширине. Интерлиньяж считать не нужно, он безразмерный: 1.5 сам даёт 29.7px вместо 27. Правка 07.08 (вторая), просьба заказчика «текст внутри блоков тоже чуть больше»: ещё +9%, 1.2375 → 1.35rem (21.6px). От референсных 18 это уже +20%, и расхождение теперь не в кегле, а в самой плотности карточки — учитывать при любой сверке с buckssauce. Поля пункта 5 → 7 (правка 07.08, третья, та же просьба про воздух). ВОСЕМЬ БЫЛО НЕЛЬЗЯ, И ЭТО ЗАМЕР: на 1440×900 вторая карточка встала 766px при 772 доступных — шесть пикселей до кромки, то есть не раскладка, а везение. При семи она 755, запас 17. Каждый пиксель здесь идёт восьмикратно: пунктов в карточке восемь, поля с двух сторон. ПРАВКА 08.08 (заказчик: «на Windows текст занимает только часть блока, на macOS блок заполнен»). Причина не в системе, а в высоте окна: панель растёт от окна (100vh − 240), а кегль был жёсткий — 21.6px. На маковских ~900px всё сходилось, на виндовых 1080 панель выше на 180px, и тот же текст заполнял её на две трети. Кегль и вертикальные поля пункта теперь считаются от ВЫСОТЫ окна с той же точкой отсчёта: 2.4vh на 900 — ровно прежние 21.6px (на маке не меняется ничего), на 1080 — 25.9px, и панель заполнена так же. Замер выше (766/772 на 1440×900) остаётся в силе: на этой высоте формула даёт прежние числа один в один. Правка 08.08 (вторая): полы вилок опущены (1.2 -> 1.05rem, 6 -> 3px). Прежние полы упирались уже на 768 и глушили масштабирование ровно там, где оно нужнее всего, — на коротких виндовых окнах. ПРАВКА 09.08 — ВИЛКА ОТ vh ПЕРЕЕХАЛА В ДЕСКТОПНУЮ ВЕТКУ (жалоба заказчика: «на телефоне при смене направления прокрутки страница сильно прыгает»). Причина была здесь. Мобильный браузер на смене направления показывает или прячет адресную строку, высота вьюпорта меняется — и кегль, привязанный к vh, переверстывал ВСЕ ЧЕТЫРЕ карточки услуг, которые на телефоне идут обычным потоком. Замер 390×844 -> 390×784 (панель в 60px): карточки стали ниже на 77, 110, 107 и 26px, документ укоротился на 399, и всё, что ниже услуг, подскакивало на 379px под пальцем. На десктопе вилка нужна и остаётся (там панель растёт от высоты окна, см. .wcard__panel), а на телефоне высота окна к раскладке карточки отношения не имеет — кегль фиксированный. 1.25rem = 20px: то же, что давали 2.4vh на 844, вид не меняется. */ font-size: 1.25rem; line-height: 1.5; padding-block: 7px; border-bottom: 1px dashed; } .wcard__list li:first-child { border-top: 1px dashed; } /* ГРАБЛИ: текст пункта лежит в НЕ ДЛЯ КРАСОТЫ. У li display:flex, и без обёртки «зачин — пояснение» распадается на два анонимных флекс-элемента: зачин встаёт отдельной узкой колонкой, а тире с пояснением — рядом. Ровно так выглядел предыдущий заход. */ .wcard__list li > span { min-width: 0; } /* Капсовый зачин пункта (правка 07.08, четвёртая карточка). В файле заказчика капс там стоит не отдельной строкой, а началом самой строки: «СЕНСОРИКА и тестирование ингредиентов». ЖИРНОСТЬ ЗДЕСЬ ВЗЯТЬ НЕЛЬЗЯ, И ЭТО НЕ ВКУСОВЩИНА. У Apoc в проекте один-единственный файл — 400 (см. fonts.css), поэтому font-weight: 700 заставляет браузер синтезировать жирность: он обводит контур поверх заливки, и на тонких штрихах получаются два края с просветом между ними. Ровно этим 06.08 оказалась «незаполненная» Ы в подписи под логотипом кейса, и лечится это тем же — настоящим 400 плюс обводка. .022em — то же число, что у .cinfo__sub: на 19.8px это 0.44px, ровно полпикселя добавочного веса без удвоения края. Прежнее правило .wcard__list strong удалено вместе с последним в разметке: до правки зачины пунктов были им набраны и страдали тем же синтетическим полужирным, просто в строчных знаках это не так заметно. */ .wcard__lead { font-weight: 400; text-transform: uppercase; -webkit-text-stroke: .022em currentColor; } /* Пунктир — от чернил панели. Правка 07.08: раньше здесь стоял крем, потому что чернила во всех трёх панелях были светлые. Теперь на whiskey они тёмные, и светлый пунктир на светлой панели пропал бы, — берём currentColor, он и есть цвет чернил конкретной панели. */ .wcard--amber .wcard__list li, .wcard--ivory .wcard__list li, .wcard--wine .wcard__list li { border-color: color-mix(in srgb, currentColor 30%, transparent); } .wcard__list li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; background: currentColor; opacity: .85; -webkit-mask: var(--wc-tick) center / contain no-repeat; mask: var(--wc-tick) center / contain no-repeat; } /* ВИЛКА КЕГЛЯ ОТ ВЫСОТЫ ОКНА — ТОЛЬКО ДЕСКТОП (правка 09.08; почему её убрали из базового правила — разбор там же, у .wcard__list li). Стоит ЗДЕСЬ, а не в блоке .wcard__panel выше: специфичность у обоих правил одинаковая (.wcard__list li), медиазапрос её не поднимает, и из двух побеждает тот, что ниже в файле. Базовое правило лежит выше этой строки, тесная ступень 1024–1279 — ниже; порядок «база -> десктоп -> тесная» соблюдён, каждая следующая перебивает предыдущую как задумано. Числа прежние: 2.4vh и 0.78vh на высоте 900 дают 21.6px и 7px — на рабочем маке не меняется ничего. */ @media (min-width: 1024px) { .wcard__list li { font-size: clamp(1.05rem, 2.4vh, 1.72rem); padding-block: clamp(3px, 0.78vh, 9px); } } /* ---------- тесные экраны ---------- Родня этой ступени — sh: у референса, «(min-width:64rem) and (max-height:719px)» с полями 28 и просветом 24. Наши пороги другие, и ниже расписано, почему; значения внутри — его, кроме двух, тоже объяснённых на месте. АРИФМЕТИКА, ИЗ КОТОРОЙ ВСЁ СЛЕДУЕТ. Карточке достаётся не вся высота окна: коробка стопки пинится на 64px ниже кромки, и ряд садится ещё на 64·cap ниже её верха. При cap = 1 это высота окна минус 128, и в них обязан уместиться самый высокий ряд — иначе низ списка уходит под кромку и прочитать карточку нельзя (проверяется прокруткой всей сцены до посадки каждого ряда, а не одной высотой ряда: сравнивать надо именно с окном минус посадка). ПОЧЕМУ ПОРОГ ПО ВЫСОТЕ — 900, А НЕ 760 И НЕ РЕФЕРЕНСНЫЕ 719. Правка 05.08. Раньше здесь стояло 760, и это работало, пока пункт был 16–18px. С кеглем 19.8 (просьба заказчика) русская фраза в колонке 550–630px уходит в две строки почти всегда, и карточка из семи пунктов вырастает до 738px. На 1280×800 в неё есть 672 — перелив 66px; на 1024×768 те же 683 против 640. Замер по всей сетке окон показал, что граница проходит около 900: на 1280×900 ряд в 738 ещё помещается (запас 34), на 1280×870 — уже нет. Отсюда 899.98: на окне ровно в 900 точек и выше карточка идёт крупной, ниже — этой ступенью. Референсные 719 не годятся тем более: с полями оригинала на 1280×720 до кромки остаётся 5 пикселей, а на 1024×768 ряд вылезает за экран. ВТОРАЯ ВЕТКА (1024–1279, любая высота) — не про короткий экран, а про узкую колонку: там она ~420px, и рост ряда задаёт содержимое, а не вилка min-height. Ограничение по высоте (было 860) снято 05.08: ровно над ним, на 1024×900, самая длинная карточка занимала 769px при доступных 772 — три пикселя запаса, то есть случайность, а не раскладка. На высоких окнах ветка ничего не стоит: там рост ряда всё равно задаёт вилка, и карточка получается той же. Своего min-height у ступени нет намеренно — вилка выше сама даёт 480 на любой высоте меньше 720. Вернуть референсные 400 нельзя: они перебили бы вилку и вернули мелкий ряд. */ /* ПРАВКА 08.08 (вторая): ветка по ВЫСОТЕ (max-height: 899.98px) отсюда убрана — её работу забрало непрерывное масштабирование от vh (см. .wcard__panel и .wcard__list li выше). Осталась только ветка по ШИРИНЕ: на 1024–1279 колонка под текст ~420px, пункты почти всегда двухстрочные, и без этих сжатых чисел десять пунктов не влезают ни при какой высоте. Вся арифметика ниже — про неё, и она в силе. */ @media (min-width: 1024px) and (max-width: 1279.98px) { .wcard { padding-block: 8px; } /* ПРОСВЕТ И ПОЛЯ ПУНКТА СЖАТЫ СИЛЬНЕЕ РЕФЕРЕНСНЫХ — И ЭТО НЕ ПРИХОТЬ. Ряд стопки садится на своё место на 64px ниже верха коробки, а сама коробка стоит ещё на 64px ниже кромки экрана, — значит на карточку остаётся высота окна минус 128. На 1024×768 это 640px, а карточка из семи русских пунктов при кегле 19.8 и референсных отступах (просвет 44, поля 4) занимает 683: низ уходил под кромку на 43px. Замерено прокруткой всей сцены до посадки каждого ряда. Отсюда просвет 24 вместо 44 и поля пункта 2 вместо 4. С кеглем ниже (см. следующее правило) ряд становится 562px на 1024×700 и 616px на 1024×768 — обе величины с запасом внутри своих 572 и 640. Правка 07.08 (вторая): поля 28 → 24. Это уже второе расхождение с референсом в этом правиле, и причина та же арифметика — заказчик поднял кегли, а 640 доступных пикселей на 1024×768 никуда не делись. Четыре пикселя с каждой стороны отдают 8 по вертикали И 8 по ширине текстовой колонки, то есть работают дважды. */ .wcard__panel { padding: 24px; gap: 30px; } /* 17.6px = прежние компактные 16 плюс те же 10%, что заказчик попросил для крупного экрана. Ступень кегля на низких экранах была снята днём ранее ради буквального совпадения с референсом — и оказалось, что снимать её было нельзя: у buckssauce пункт помещается в одну строку и на узкой колонке, русский на 1024 уходит в две почти всегда, а семь таких пунктов в 768-пиксельное окно не влезают ни при каких отступах. Проверено перебором: при 19.8px не спасает даже просвет 24 с полями панели в 20 — остаётся перелив в 7px. Правка 07.08 (вторая): 1.1 → 1.2rem, те же +9%, что и на крупном экране. Ступень остаётся ступенью — на 1024 она по-прежнему на 11% мельче основной. ИНТЕРЛИНЬЯЖ 1.4 ВМЕСТО ОБЩИХ 1.5 — тоже правка 07.08 (вторая), и это самый крупный источник высоты в тесной ступени. Пункт здесь почти всегда двухстрочный (колонка под текст 410px при потребности 450–570), значит на карточке из восьми пунктов набирается 15 строк, и каждая десятая доля интерлиньяжа стоит 15 × 1.9 = 29px — больше, чем все просветы группы вместе взятые. 1.4 на 19.2px даёт 26.9px — это всё ещё обычный книжный интерлиньяж, а не сжатый. Поля пункта убраны совсем (1 → 0): пунктирная линейка и так отбивает пункты друг от друга, а два пикселя на восьми пунктах — это ещё 16. */ .wcard__list li { gap: 16px; padding-block: 0; font-size: 1.2rem; line-height: 1.4; } /* Правка 07.08 — ГРУППЫ В ТЕСНОЙ СТУПЕНИ. Здесь та же арифметика, что и у просвета панели строкой выше, только считать её пришлось заново: карточка из трёх групп — это ещё и три заголовка, которых у прежних карточек не было вовсе. Замер на 1024×768 (самый тесный десктоп, ряд садится на 128px и ему остаётся 640): третья карточка при просветах 28/12 занимала 673px — 33px уходило под кромку. Восемь её пунктов ломаются в две строки почти все (колонка 405px под текст при кегле 17.6), а сжимать кегль дальше нельзя — он и так ступень от 19.8. Поэтому режем то, что не трогает читаемость строк: просвет между группами 28 → 16, внутри группы 12 → 8, поля пункта 2 → 1 (строкой выше). Замер после правки: ряд 621px против 640 доступных, запас 19. Для сравнения, прежняя самая высокая карточка (семь пунктов, без групп) занимала здесь 616 — то есть ряд подрос всего на пять пикселей, и вилка осталась той же, что была. Правка 07.08 (вторая) — заказчик поднял все три кегля, и та же карточка выросла до 689px, снова на 49 больше кромки. Просветы были дожаты до 10 и 6; остальное добрано интерлиньяжем, полями пункта и полями панели — см. соседние правила, каждое со своим числом. Правка 07.08 (третья) — просьба про воздух. Здесь её удалось выполнить только наполовину и только там, где был запас: просветы 12 и 8 (было 10 и 6) плюс просвет «заголовок → список» у панели 30 вместо 24. Поля пункта в этой ступени так и остались нулевыми: плюс один пиксель стоит тут шестнадцать, а до кромки на 1024×768 после всего осталось двенадцать. Ряд 628 против 640. */ .wcard__groups { gap: 12px; } .wcard__group { gap: 8px; } } /* Отдельная планшетная ступень 1024–1279 отсюда удалена 05.08: она ставила пункту gap 16px, а теперь ровно то же делает вторая ветка блока выше — условие у них посимвольно одинаковое. */ /* ---------- мобильные ---------- У референса тёмная часть на узком экране скрыта совсем. Нам так нельзя: у варианта --head там лежит заголовок карточки, у --media — единственный кадр ряда. Поэтому оставляем её сверху и уменьшаем. Стопки на мобильном нет — ряды идут обычным потоком (как у референса, там сцепка тоже только с 1024). */ @media (max-width: 1023.98px) { .wcard__aside--word .wcard__q { font-size: clamp(3.5rem, 22vw, 8rem); } .wcard__aside--head .wcard__q { font-size: clamp(1.75rem, 8vw, 2.4rem); max-width: none; } /* Заголовку панели нужен пол: доля окна, взятая с референса (5.5556vw), на 375px вырождается в 21px. У самого buckssauce тёмная половина на узком экране скрыта совсем, и заголовок там живёт по своим правилам; нам эта половина нужна, поэтому кегль держим вилкой 32…56px. */ /* Доля окна и потолок приведены к новому десктопному кеглю (4.9vw, правка 07.08 вторая) — иначе на самой границе брейкпоинта заголовок СКАЧЕТ: при прежних 5.5556vw и потолке 3.5rem на 1023px он вставал 56px, а на 1024px — уже 50.2. Теперь 49.6 против 50.2, шов не виден. Пол 2rem не трогаем: 4.9vw на 375px вырождается в 18px, и держит заголовок именно он, а не доля окна. */ .wcard__title { font-size: clamp(2rem, 5.5556vw, 3.5rem); } /* А здесь доля окна не нужна вовсе, и это видно из чисел: на 375px 2.2vw дают 8px, на 1023px — 22.5, то есть на всём мобильном диапазоне работали бы только границы clamp. Ставим одно число. 28px против пункта в 21.6 — те же 1.3, что и на десктопе, а против десктопного пола (24px на 1024) шов в 4px, вместо прежних 10. */ .wcard__sub { font-size: 28px; } .wcard__list li { gap: 14px; } .wcard__panel { min-height: 0; } } /* ============================================================ 6.7 «Кому мы полезны» — три карточки-сценария. Формат по референсу buckssauce.com/shop: равные цветные карточки в ряд, у каждой пунктирная рамка внутри, активная насыщенная — соседние приглушены; под ними тёмная плашка с описанием активного сценария и кнопкой. Прежняя запиненная сцена (.sc*) снята целиком. Правка 29.07: переключение по наведению убрано — все карточки всегда в насыщенном состоянии, описание видно постоянно. Класса is-active больше нет, JS-логики у блока нет вообще. ============================================================ */ /* ---------- заголовок блока ---------- По референсу заказчика: одна строка капсом по центру, буквы во всю ширину экрана. Без обводки и без разнобоя в кеглях — вся строка одного размера и одной заливки. Шрифт — ПРЯМОЙ Roslindale Display Condensed (не курсивный алиас --font-serif): курсив снят по правке. Размер задан в vw, а строка не переносится, поэтому её ширина остаётся постоянной долей экрана на любой ширине окна. */ /* margin: s-8 -> s-6 (правка 08.08, общий шаг с .sec-head — см. там) */ .scn-head { text-align: center; margin-bottom: var(--s-6); } .scn-head__title { font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-style: normal; font-weight: 700; font-size: clamp(2.2rem, 9.6vw, 15rem); /* НАСТОЯЩИЙ vw: строка заполняет экран во всю ширину */ line-height: .94; letter-spacing: normal; text-transform: uppercase; color: var(--bp-off-white); white-space: nowrap; } /* узкие экраны: строка в одну линию стала бы нечитаемо мелкой — разрешаем перенос и снимаем nowrap */ @media (max-width: 599.98px) { .scn-head__title { white-space: normal; font-size: clamp(2.2rem, 13vw, 4rem); } } /* Правка 30.07 (вторая): вся геометрия карточки задана В ДОЛЯХ ЕЁ ШИРИНЫ. Раньше кегли считались от ширины ЭКРАНА, а ширина карточки — от числа колонок, и одно с другим не совпадало: на 768 карточка сжималась до 230px, а текст оставался 18px — он выглядел огромным; на большом мониторе карточка вырастала, а текст упирался в потолок clamp() и казался мелким. Теперь единица измерения одна — ширина самой карточки: поля в %, кегли в cqi, высота через aspect-ratio. Пропорции блока одинаковы на любом разрешении, меняется только масштаб. row-gap оставлен в пикселях: процентный row-gap в гриде считается от высоты, а она здесь не определена, и зазор схлопнулся бы в ноль. */ .scn { display: grid; row-gap: var(--s-2); column-gap: 1.15%; margin-top: var(--s-6); /* стопкой карточка не должна растягиваться на весь планшет; ограничение стоит на СЕТКЕ, а не на карточке: проценты полей внутри карточки считаются от ширины её ячейки в гриде, и при max-width на самой карточке поля брались бы от полной ширины колонки — шире карточки */ max-width: 460px; /* ≈ ширина карточки на опорном десктопе 1440 (451px) */ margin-inline: auto; /* без stretch: высоту карточки задаёт aspect-ratio, а не строка грида */ align-items: start; } /* Три колонки — с 1024, а не с 768: на планшете колонка выходила шириной 230px, и в такой карточке пропорциональный текст был бы 8–9px. До 1024 карточки идут стопкой и ограничены по ширине, чтобы не растянуться на весь планшет. Откат: @media (min-width:768px) с repeat(3,1fr). */ @media (min-width: 1024px) { .scn { grid-template-columns: repeat(3, 1fr); /* потолок для очень широких мониторов: без него на 2560 карточка выросла бы до 830px и по высоте не влезла бы в экран */ max-width: 1700px; } } .scn__card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; /* поля в процентах от ширины карточки (у padding ОБЕ оси считаются от inline-размера) — те же 48/24px на опорной ширине 451px */ padding: 10.6% 5.3%; /* карточка — контейнер для cqi: кегли внутри считаются от ЕЁ ширины */ container-type: inline-size; border-radius: 12px; overflow: hidden; /* Форма карточки постоянна. Правка 30.07: −8% по высоте (138 → 127) — блок целиком не помещался в экран. Кегли привязаны к ШИРИНЕ карточки, поэтому текст от этого не изменился, ужался только запас по высоте. */ aspect-ratio: 100 / 127; width: 100%; box-shadow: 0 24px 60px color-mix(in srgb, var(--bp-charcoal) 38%, transparent); } /* ПРАВКА 07.08 (вторая, просьба заказчика): ЦВЕТНОЙ ПОДЛОЖКИ У КАДРОВ БОЛЬШЕ НЕТ. С 29.07 карточка была цветным пятном, а фотография лежала на нём с прозрачностью .4 — цвет просвечивал сквозь кадр и тонировал его. Теперь кадр идёт в полную силу, и цвет карточки из-под него убран целиком: три правила .scn__card:nth-child(n) { background } удалены, вместе с ними — уплотнённая вуаль третьей карточки (она была нужна ровно потому, что подложка была светлой, whiskey). Под кадром остаётся фон страницы: он виден только пока картинка не загрузилась и в скруглениях, поэтому отдельного цвета ему не нужно. Откат: вернуть три nth-child с honey / coffee / whiskey, opacity .4 у .scn__photo img и вуаль 62/32/68 (для whiskey — 70/46/72). Прежние жжёные тона (#6B4A16 / #8A3D14 / #7A1F2A) из ревизии 04.08 подмешивались вручную и удалены ещё тогда. */ /* Правка 29.07: фото занимает ВСЮ карточку и лежит ПОД текстом. Порядок слоёв: фото (0) → притеняющая вуаль (1) → пунктирная рамка (2) → заголовок (3). Надписи «Сценарий 0X» убраны. */ .scn__photo { position: absolute; inset: 0; z-index: 0; margin: 0; width: auto; aspect-ratio: auto; overflow: hidden; border-radius: inherit; } .scn__photo img { width: 100%; height: 100%; object-fit: cover; } /* Вуаль поверх фото: без неё светлые участки кадров (лёд, белая одежда) роняют контраст заголовка ниже нормы 4.5 — замерено по пикселям самих фотографий. Цвет вуали — тот же графит, что и фон секции. ПРАВКА 07.08 (вторая): вуаль пересобрана под кадр БЕЗ подложки. Раньше цвет карточки уже съедал 60% яркости фотографии, и вуали хватало мягкой — 62/32/68. Теперь кадр идёт в полную силу, и на прежних значениях худшая точка падает до 2.30:1. Простое равномерное уплотнение (78/62/80) норму вытягивает, но гасит кадр целиком — то есть возвращает ровно то, от чего уходили. Поэтому вуаль сделана ПО МЕСТУ ТЕКСТА, а не по всей карточке: плотно там, где стоят заголовок (8–24% высоты) и описание (76–92%), и почти прозрачно в промежутке между ними. В этом окне кадр виден как есть. Замер попиксельно в canvas на 1440×900, худшее из трёх карточек: 62/32/68 (прежняя) — 2.30 / 2.81 ✗ 78/62/80 (равномерная) — 5.58 / 4.73, но окно гаснет до 36–57 74/68/08/72/76 (эта) — 4.85 / 5.42, окно 79/51/93 Ещё светлее (нулевая вуаль в окне) даёт 4.56 — запас к норме 0.06, слишком тонко для разных кадров и кропов. */ .scn__card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--bp-charcoal) 74%, transparent) 0%, color-mix(in srgb, var(--bp-charcoal) 68%, transparent) 26%, color-mix(in srgb, var(--bp-charcoal) 8%, transparent) 47%, color-mix(in srgb, var(--bp-charcoal) 72%, transparent) 75%, color-mix(in srgb, var(--bp-charcoal) 76%, transparent) 100%); pointer-events: none; } /* пунктирная рамка внутри — приём референса, рифмуется с плашками бренда */ /* отступ рамки тоже в долях ширины: у margin все четыре процента считаются от inline-размера, поэтому сверху и сбоку он одинаковый (у inset проценты по вертикали считались бы от высоты) */ .scn__frame { position: absolute; inset: 0; margin: 2.66%; z-index: 2; border: 1px dashed color-mix(in srgb, var(--bp-off-white) 55%, transparent); border-radius: 8px; opacity: .9; pointer-events: none; } /* Заголовок карточки — тоже ПРЯМЫМ Roslindale: курсив снят по правке 29.07. Заголовок ВСЕГДА в две строки — перенос задан
прямо в разметке, а не отдан на откуп ширине колонки. Самая длинная строка — «МАСШТАБИРОВАТЬСЯ»: она обязана влезать в карточку на всех разрешениях (проверено на 375–2560). */ .scn__title { position: relative; z-index: 3; font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-style: normal; font-weight: 700; /* кегль привязан к ширине карточки, а не к ширине экрана: 1cqi = 1% контентной коробки карточки. Потолок — 11.17cqi: «МАСШТАБИРОВАТЬСЯ» шириной 8.95 кегля, при 10.5cqi слово занимает 94% строки, и до пунктирной рамки остаётся запас с обеих сторон. */ font-size: 10.5cqi; line-height: 1.05; text-transform: uppercase; color: var(--bp-off-white); max-width: 12em; text-shadow: 0 2px 18px color-mix(in srgb, var(--bp-charcoal) 55%, transparent); } /* ---------- описание: видно всегда ---------- Правка 29.07: всплывание по наведению снято по просьбе заказчика — текст стоит в карточке постоянно и стал чуть крупнее. */ .scn__desc { position: relative; z-index: 3; margin-top: auto; /* прижато к низу карточки */ max-width: 26em; font-family: var(--font-text); font-size: 5.2cqi; line-height: 1.45; color: var(--bp-off-white); text-shadow: 0 2px 16px color-mix(in srgb, var(--bp-charcoal) 60%, transparent); } /* ============================================================ 6.8 Кейсы ============================================================ */ /* Правка 31.07: фильтр «Все / Бар / Кофе» снят с вёрстки — показываем все проекты сразу. Стили .cases-filter удалены; обработчик в main.js оставлен (querySelectorAll по пустому списку безвреден) — если фильтр когда-нибудь вернут, достаточно вернуть разметку и эти правила. */ /* ---------- Шапка секции кейсов (правка 31.07) ---------- Заказчик: пилюлю «Портфолио» убрать, «НАШИ ПРОЕКТЫ» — капсом, без курсива, крупнее и по центру; подпись — курсивом, по центру, тише. Кегль и начертание перекликаются с манифестами COFFEE / BAR CONSULTING: прямой Roslindale Display Condensed (у --font-serif алиас курсивный). Откат: убрать класс cases-head в index.html. */ .cases-head { text-align: center; } .cases-head .h2 { max-width: none; font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-style: normal; font-weight: 700; /* правка 08.08 (заказчик: «„наши проекты“ сделай большим шрифтом»): вилка поднята на ~13% — дальше некуда, на 1024 упрётся в края */ font-size: clamp(3.4rem, calc(8.4 * var(--vw-step)), 7.6rem); line-height: 1.02; letter-spacing: .027em; text-transform: uppercase; color: var(--bp-off-white); /* правка 03.08: секция кейсов стала тёмной */ /* «Жирнее» упирается в шрифт: у Roslindale Display Condensed объявлен диапазон 400–700, и 700 уже взято. Добавочный вес даёт обводка тем же цветом — она наращивает штрих, а не рисует контур. */ -webkit-text-stroke: max(1px, .0135em) currentColor; } /* ПРАВКА 08.08 (заказчик: «лучше убрать курсив и сделать более гармонично»): лид набирался --font-serif, а его первый шрифт — Roslindale ITALIC, отсюда курсив. Теперь это спокойная капс-строка Copperplate — тот же голос, что у навигации и подзаголовка героя; под гигантским серифным заголовком она читается подписью, а не вторым заголовком. Кегль снижен соразмерно смене роли. */ .cases-head .lead { max-width: 46em; margin-inline: auto; margin-top: var(--s-3); font-family: var(--font-grotesk); font-style: normal; font-weight: 600; font-size: clamp(.92rem, calc(1.1 * var(--vw-step)), 1.08rem); letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; } /* «Тише» — только там, где подпись уже крупная (≥24px): на этом кегле AA требует 3:1, и приглушённый графит его держит (3.26:1). Ниже 1280 цвет остаётся штатным .lead — иначе мелкий текст ушёл бы под порог. */ @media (min-width: 1280px) { .cases-head .lead { color: color-mix(in srgb, var(--bp-off-white) 78%, transparent); } } .cases-grid { display: grid; gap: var(--s-3); margin-top: var(--s-6); } /* Те же грабли, что у .case-card[hidden] и .cbox[hidden]: display:grid перебивает браузерное [hidden]{display:none}, и запасная сетка (её показывают только при reduced-motion вместо ленты) висела в потоке пустой коробкой — своей высоты 0, но margin-top в 48px оставался и растягивал низ секции кейсов. Замер 1440×900: −48px (правка 03.08). */ .cases-grid[hidden] { display: none; } @media (min-width: 640px) { .cases-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cases-grid { grid-template-columns: repeat(3, 1fr); } } .case-card { background: var(--bp-cream); border: 1px solid color-mix(in srgb, var(--bp-charcoal) 8%, transparent); border-radius: 4px; overflow: hidden; text-align: left; display: flex; flex-direction: column; transition: box-shadow .3s var(--ease), transform .3s var(--ease); } .case-card:hover { box-shadow: 0 18px 44px color-mix(in srgb, var(--bp-charcoal) 12%, transparent); transform: translateY(-3px); } .case-card__logo { height: 108px; display: flex; align-items: center; justify-content: center; padding: var(--s-3); } .case-card__logo img { max-height: 100%; max-width: 72%; width: auto; object-fit: contain; } .case-card__logo .tlogo { font-family: var(--font-serif); font-weight: 600; font-size: 1.9rem; } .case-card__logo .tlogo--grotesk { font-family: var(--font-serif); font-weight: 600; font-size: 1.6rem; letter-spacing: .04em; } .case-card__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .case-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .case-card:hover .case-card__photo img { transform: scale(1.05); } .case-card__meta { padding: var(--s-3); display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); } .case-card__meta .cat { font-family: var(--font-grotesk); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bp-graphite); } .case-card__meta .more { font-size: .9rem; color: var(--bp-amber-text); white-space: nowrap; } .case-card[hidden] { display: none; } /* ============================================================ РАЗВОРОТ КЕЙСА — по ТЗ «переработка разворота кейса BARPOINT по структуре Bucks Sauce» (эталон block_3.html). Слева галерея с вырезом под крестик, справа заголовок, подзаголовок и сетка карточек 2×2. Старые правила .cover* (44 штуки) удалены целиком, а не закомментированы. Отступление от ТЗ §3.2, о котором надо знать: шрифтовые файлы Bucks (PeperoncinoSans, Inter Tight) с их CDN на коммерческий сайт не переносим — это чужие лицензии, ровно та же история, что и с графикой в §7.4. Роли отданы фирменной паре BARPOINT: заголовки/кнопки/названия карточек — Roslindale Display Condensed (прямое начертание), основной текст — Apoc. Ступени кеглей, интерлиньяж и трекинг — как в ТЗ. ============================================================ */ .cover { /* ПРАВКА 04.08: разворот кейса переведён на общую палитру. Здесь стояли цвета эталона Bucks Sauce (фон #100b06, текст #f5e4c7, акцент — оранжевый #f15726); оранжевого в новом наборе нет, его роль забрало золото, а с правкой 07.08 — Honey Garlic, который к тому оранжевому заметно ближе. Переменные оставлены: на них завязано два десятка правил разворота, и держать их отдельным слоем удобно — сменить акцент всего разворота по-прежнему можно одной строкой. */ --cv-bg: var(--bp-charcoal); --cv-fg: var(--bp-cream); --cv-theme: var(--bp-gold); --cv-serif: "Roslindale Display Condensed", "Times New Roman", serif; --cv-sans: "Apoc", "Golos Text", system-ui, sans-serif; --cv-ease: cubic-bezier(.4, 0, .2, 1); /* сетка оригинала: 12 колонок от ширины экрана */ --cv-col: calc(100vw / 12); --cv-ggap: .625rem; /* ступени кеглей — мобильная ступень */ --cv-base: 16px; --cv-small: 14px; --cv-2xl: 18px; --cv-30: 24px; --cv-40: 28px; /* Правка 03.08 (вторая): текст в обеих карточках — «Описание» и «Что сделали» — набирается ОДНИМ кеглем, на два пункта крупнее прежнего. Заголовки карточек при этом остаются как были. */ --cv-cardtext: 16px; /* высота полосы под знак заведения в заголовке: у знаков очень разные пропорции (Зойка 1.5, Marcelo 6.0), и от общей формулы «Зойка» вырастала вдвое против соседей — фиксируем полосу */ --cv-mark-h: 62px; position: fixed; inset: 0; z-index: 200; /* выше шапки (100) */ display: none; /* фон — ТОЛЬКО здесь: слой паттерна лежит внутри и должен быть виден */ background: var(--cv-bg); color: var(--cv-fg); font-family: var(--cv-sans); font-size: var(--cv-base); line-height: 1.5; } .cover.is-open { display: block; } @media (min-width: 1024px) { .cover { --cv-ggap: 1.25rem; --cv-small: clamp(.6222rem, .9722vw, 1.1667rem); --cv-2xl: clamp(1.0667rem, 1.6667vw, 2rem); --cv-30: clamp(1.3333rem, 2.0833vw, 2.5rem); --cv-40: clamp(1.7778rem, 2.7778vw, 3.3333rem); --cv-100: clamp(4.4444rem, 6.9444vw, 8.3333rem); /* ПРАВКА 04.08 — добавлен потолок по ВЫСОТЕ окна (min(…, 2.22vh)). Кегль текстов внутри карточек разворота считался только от ширины, а сами карточки после укорочения занимают половину ЭКРАНА: на 1512×900 описание влезало впритык (запас 3px у самых длинных), а на 860 те же три кейса уже вылезали за кромку — прокрутки-то больше нет, она снята по просьбе клиента. 2.22vh = 20px на высоте 900, то есть на рабочем размере кегль ОСТАЛСЯ прежним и ничего не поехало; ужимается он только на более низких окнах, где иначе текст просто не поместится. min(), а не третий аргумент clamp: нужен меньший из двух потолков — по ширине колонки и по высоте карточки, а не «либо тот, либо этот». Переменная общая с «Что сделали» намеренно: описание и список стоят рядом, и разный кегль в соседних карточках сразу видно. */ --cv-cardtext: clamp(1rem, min(1.3vw, 2.22vh), 1.25rem); --cv-mark-h: clamp(66px, 7.2vw, 112px); } } /* ---------- фоновый паттерн: плитка со знаком BARPOINT ---------- 95×158 и прозрачность 10% — как в эталоне; графика своя (рукописный знак «B» из Materials v3, см. assets/img/case-pattern.png) */ .cover__pattern { display: none; } @media (min-width: 1024px) { .cover__pattern { display: block; position: absolute; inset: 0; top: -40px; height: calc(100% + 2.5rem); z-index: 0; opacity: .1; overflow: hidden; } /* ПРАВКА 06.08 (вторая): тайл переехал на ::before, а лента — с background-position на transform. Сдвиг фона — paint-свойство: браузер перерисовывал полноэкранную плитку КАЖДЫЙ КАДР на главном потоке всё время, пока открыт кейс, и этим отъедал бюджет у всех анимаций разворота (вступление, подмена кадров, влёт блоков). transform едет на композиторе — главный поток свободен, рисунок движения тот же. Слой на 95px (один тайл) шире и сдвинут влево на столько же: за цикл он уезжает вправо ровно на тайл, левый свес закрывает открывающуюся кромку, а фаза узора в нулевой и конечной точках совпадает — шва нет. opacity интро-твина живёт на родителе и на ::before действует как раньше. */ .cover__pattern::before { content: ""; position: absolute; inset: 0; left: -95px; background-image: url(../img/case-pattern.png); background-repeat: repeat; background-size: 95px 158px; animation: 12s linear infinite cover-pattern; } } @keyframes cover-pattern { 0% { transform: translate3d(0, 0, 0); } to { transform: translate3d(95px, 0, 0); } } @media (prefers-reduced-motion: reduce) { .cover__pattern::before { animation: none; } } /* ---------- контейнер ---------- */ .cover__inner { position: relative; z-index: 1; height: 100%; padding: 10px 5px; overflow-y: auto; overscroll-behavior: contain; /* ПРАВКА 04.08 — полоса прокрутки, вылезавшая сбоку при наведении на плавающий предмет: он уезжал к курсору за правую кромку, а у блока задан overflow-y: auto, и по спецификации вторая ось не может остаться visible — она становится auto, из-за чего и поднималась ГОРИЗОНТАЛЬНАЯ полоса. Сам предмет удалён 05.08 (см. раздел «плавающий предмет» ниже), но правило ОСТАВЛЕНО намеренно: пара «overflow-y: auto + вторая ось auto» никуда не делась, и любой будущий элемент, вылезающий вбок, поднимет ту же полосу. clip в вычисленных стилях покажется как hidden — это норма: когда одна ось clip, а вторая auto, clip приводится к hidden. Важно одно — ось перестала быть auto. */ overflow-x: clip; -webkit-overflow-scrolling: touch; } @media (min-width: 1024px) { .cover__inner { padding: 10px; } } .cover__grid { display: flex; flex-direction: column; gap: 40px; } @media (min-width: 1024px) { /* обе колонки строго minmax(0, 1fr): с обычным 1fr содержимое карточек растягивает колонки неравномерно (расхождение до 40px). Отступление от ТЗ §2.1: вместо height calc(100vh - 2rem) + min-height 800px здесь min-height по высоте окна. Эталон — секция прокручиваемой страницы, у нас слой на весь экран, и фиксированные 800px на ноутбучном окне давали скролл при любом содержимом. Описания кейсов втрое длиннее эталонных, поэтому правая колонка при необходимости прокручивается, а галерея остаётся на месте (sticky) — обрезки текста ТЗ не допускает. */ .cover__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; /* svh, а не vh (правка 08.08, адаптация): на планшете vh не видит тулбаров Safari, и низ разворота уходил бы под них. На десктопе svh равен vh — там не меняется ничего. Та же замена — у .cgal, .cinfo и .cboxes ниже. */ min-height: calc(100svh - 20px); } } /* ---------- крестик: садится в вырез левого верхнего угла ---------- */ .cover__close { position: absolute; top: 12px; left: 9px; z-index: 6; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cv-fg); border: 2px solid var(--cv-fg); color: var(--cv-bg); transition: background-color .3s var(--cv-ease), color .3s var(--cv-ease); } .cover__close:hover { background: var(--cv-bg); color: var(--cv-fg); } .cover__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } @media (min-width: 1024px) { /* вырез 146×68 начинается в (10,10) — кнопка 60px встаёт в него с полями */ .cover__close { top: 14px; left: 14px; width: 60px; height: 60px; } .cover__close svg { width: 20px; height: 20px; } } /* ============ галерея кейса ============ */ .cgal { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; flex: 1 1 0%; overflow: hidden; border-radius: 10px; } @media (min-width: 1024px) { .cgal { aspect-ratio: auto; height: calc(100svh - 20px); position: sticky; top: 0; } } .cgal__clipsvg { position: absolute; width: 0; height: 0; } .cgal__stage { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; } /* два слоя-слота: входящий едет на полную ширину, уходящий — на 10% назад */ .cgal__layer { position: absolute; inset: 0; overflow: hidden; background: color-mix(in oklab, var(--cv-fg) 10%, transparent); will-change: transform; } .cgal__img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; } .cgal__preload { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; } .cgal__arrows { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; left: 4px; right: 4px; display: flex; justify-content: space-between; gap: 10px; } @media (min-width: 1024px) { /* Правка 03.08: column-REVERSE — сверху стрелка «вперёд», снизу «назад». Порядок в разметке при этом не трогаем: на мобильном стрелки стоят строкой, и там «назад» обязана остаться слева. */ .cgal__arrows { left: auto; right: 20px; flex-direction: column-reverse; justify-content: flex-start; } } /* анимация «стрелки уезжают в scale 0» висит на обёртке, не на кнопке */ .cgal__slot { will-change: transform; } .carrow { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; } .carrow__bg { position: absolute; inset: 0; border-radius: 50%; z-index: 0; background: var(--cv-fg); border: 2px solid var(--cv-fg); transition-property: color, background-color, border-color; transition-duration: .3s; transition-timing-function: var(--cv-ease); } .carrow:hover .carrow__bg { background: var(--cv-bg); } .carrow[data-disabled] .carrow__bg { background: color-mix(in oklab, var(--cv-fg) 10%, transparent); border-color: color-mix(in oklab, var(--cv-fg) 10%, transparent); } .carrow__ico { position: relative; z-index: 1; display: block; width: 20px; color: var(--cv-bg); transition: color .3s var(--cv-ease); } .carrow:hover .carrow__ico { color: var(--cv-fg); } .carrow--prev .carrow__ico { transform: rotate(180deg); } .carrow__ico svg { width: 100%; height: auto; display: block; fill: currentColor; } /* ============ правая колонка ============ */ .cinfo { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; } @media (min-width: 1024px) { .cinfo { height: auto; min-height: calc(100svh - 20px); } } .cinfo__head { flex-grow: 1; display: flex; flex-direction: column; gap: 32px; align-items: center; justify-content: center; text-align: center; } .cinfo__title { width: 100%; text-transform: uppercase; font-family: var(--cv-serif); font-weight: 700; font-style: normal; font-size: 70px; line-height: .9; letter-spacing: normal; } @media (min-width: 1024px) { /* ширина w-col-4 по формуле оригинала */ .cinfo__title { width: calc(((var(--cv-col) - var(--cv-ggap)) * 4) + (var(--cv-ggap) * 3)); flex-shrink: 0; font-size: var(--cv-100); } } /* Sixty, Duran Bar, Buro Tsum — знака нет, имя набирается прямой антиквой смешанным регистром: так они стоят в презентации и на плашке в ленте, капслок бы этот характер сломал */ .cinfo__title--type { text-transform: none; font-weight: 500; font-family: "Roslindale Display Condensed", "Times New Roman", serif; /* кегль считаем от той же полосы, что и у знаков: при line-height .9 строка встаёт ровно в --cv-mark-h, и заголовок у всех 13 кейсов занимает одинаковую высоту независимо от того, знак это или набор */ font-size: calc(var(--cv-mark-h) / .9); } /* Правка 03.08: заголовок кейса — это ЗНАК заведения, а не набор. Файлы -light.png те же, что на плашках в ленте. Правка 03.08 (вторая): габарит задаёт не формула от пропорции знака, а ФИКСИРОВАННАЯ полоса --cv-mark-h. Раньше высота считалась от --ar, и «Зойка» (пропорция 1.5) выходила 254px против 77px у Marcelo — заголовок прыгал от кейса к кейсу и утягивал за собой всю колонку. object-fit: contain вписывает любой знак в полосу без искажений: широкие упираются в ширину, высокие — в высоту. */ .cinfo__title--mark { height: var(--cv-mark-h); display: flex; align-items: center; justify-content: center; } .cinfo__mark { display: block; width: 100%; height: 100%; object-fit: contain; } /* «+ hide» у Memo в развороте (правка 08.08): раньше суффикс жил только на плашке в ленте, в заголовке разворота знак стоял без него. Кегль — от полосы знака, той же логикой, что .cinfo__title--type. */ .cinfo__marksuffix { flex: 0 0 auto; margin-left: .4em; font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-weight: 500; font-style: normal; text-transform: none; font-size: calc(var(--cv-mark-h) * .42); line-height: 1; opacity: .85; } .cinfo__subwrap { width: 50%; } @media (min-width: 1024px) { /* Правка 03.08 (вторая): w-col-3 → w-col-4, вровень с заголовком. На узкой колонке подзаголовки разной длины давали то 2, то 4 строки, шапка «дышала» от кейса к кейсу и утягивала блоки вниз. */ .cinfo__subwrap { width: calc(((var(--cv-col) - var(--cv-ggap)) * 4) + (var(--cv-ggap) * 3)); flex-shrink: 0; } } /* ПРАВКА 06.08 (клиент: «у буквы Ы часть не заполнена, сделай как остальные буквы»). Дело было не в букве, а в синтетическом жире. У Apoc в наборе только 400 — это триал, других начертаний нет, — поэтому font-weight: 700 браузер подделывал сам, обводя контур глифа поверх заливки. На толстых штрихах это просто утолщение, а волосяные линии Apoc на 16px тоньше пикселя: обводка рисует им ДВА края с пустотой между ними. У «Ы» такая линия самая длинная — верх и низ чаши, — и буква разваливалась на стойки с провалом посередине. Замер на канвасе тем же шрифтом и кеглем: при 700 в строках чаши стоят два бледных края и тёмный разрыв, при 400 — сплошная линия. Жирность теперь настоящая (400), а вес возвращён обводкой в 0.022em: она нарастает равномерно и волосяные линии не разрывает, а утолщает. Тем же способом лечится «+» в рубрике карточки, см. .cat__plus. ВАЖНО: синтетический жир у Apoc остаётся везде, где стоит вес выше 400 (strong, служебные подписи 600) — там строки короче и разрывы в глаза не бросаются, но лечится это так же. */ .cinfo__sub { font-size: 16px; font-weight: 400; text-transform: uppercase; line-height: 1.2; -webkit-text-stroke: .022em currentColor; } /* ============ сетка карточек ============ Правка 03.08: было 2×2 (Описание / Что сделали / Факты / Действие), стало две колонки-стопки. слева — строка перелистывания кейсов, под ней описание до низа; справа — «Что сделали» до самого низа, под ним кнопка. Строка перелистывания и «Что сделали» начинаются на одном уровне, описание — на строку ниже. Карточка «Факты» убрана целиком. */ .cboxes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 40px; } @media (min-width: 1024px) { /* Правка 03.08 (вторая): высота блока ФИКСИРОВАНА и одинакова у всех кейсов. Раньше её задавала длина описания, и карточки прыгали от кейса к кейсу (у Landy текст короткий, у Aina втрое длиннее), а на длинных приходилось подкручивать разворот вниз. 560px — потолок по самому длинному описанию; calc(100vh - 260px) оставляет место шапке, чтобы разворот влезал в экран целиком и на ноутбучных 800px; 470px — пол, ниже которого длинное описание уже не помещается в карточку. */ .cboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0, 1fr) обязателен: у строки по умолчанию размер auto, и фиксированная высота контейнера её не удерживает — колонки вырастали по содержимому и вылезали за разворот на 4…52px */ grid-template-rows: minmax(0, 1fr); margin-top: 0; /* ПРАВКА 04.08 — блоки ниже и короче (просьба клиента: «верх этих блоков должен быть примерно на уровне между стрелками, то есть по центру экрана»). Стопка прижата к НИЗУ разворота: .cinfo — колонка-флекс, а у .cinfo__head стоит flex-grow: 1, он и выдавливает .cboxes вниз. Значит верхняя кромка блоков = низ разворота минус эта высота, и чтобы её опустить, высоту надо УМЕНЬШИТЬ — что клиент и просил. Низ разворота — на 10px от кромки окна (.cover__inner, padding). Хотим верх на середине экрана → высота = 50vh − 10px. На 880 это 430px вместо прежних 560, верх опускается с 310 на 440 — ровно между стрелками галереи, они центрированы по её высоте. Вилка: снизу 360 (на 760-й высоте ниже уже нечитаемо), сверху 470 — на большом мониторе половина экрана дала бы блок-переросток. Описание длиннее блока не ломает раскладку: у .cbox--desc .cbox__text стоит overflow-y: auto, текст прокрутится ВНУТРИ карточки, и высота у всех кейсов остаётся одинаковой. */ height: clamp(360px, calc(50svh - 10px), 470px); } } /* колонка-стопка: тянущийся элемент внутри растёт, остальные по контенту */ .ccol { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; } .cbox { position: relative; border-radius: 10px; background: var(--cv-bg); border: 1px solid var(--cv-fg); padding: 20px; display: flex; flex-direction: column; gap: 24px; } /* display:flex перебил бы браузерное [hidden]{display:none} — а карточка «Что сделали» именно так и прячется, пока в data.js нет works */ .cbox[hidden] { display: none; } .cbox__title { text-transform: uppercase; font-family: var(--cv-serif); font-weight: 700; font-style: normal; font-size: var(--cv-30); line-height: 1; letter-spacing: normal; } .cbox__text { font-size: var(--cv-base); line-height: 1.5; } /* «Описание» заняло место снятых «Фактов» и тянется до низа колонки. Кегль у него ТОТ ЖЕ, что у списка в «Что сделали» (--cv-cardtext): заголовки карточек остаются крупными, а тексты под ними одинаковы. */ .cbox--desc { flex: 1 1 auto; min-height: 0; } .cbox--desc .cbox__text { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; font-size: var(--cv-cardtext); line-height: 1.45; /* ПРАВКА 04.08: прокрутка ВНУТРИ описания снята (просьба клиента — «очень плохо выглядит, когда текст можно пролистать»). Раньше здесь стоял overflow-y: auto как страховка на случай, если описание не влезет: оно прокручивалось внутри карточки, а высота блоков у всех кейсов оставалась одинаковой. После того как блоки укоротили до половины экрана, страховка стала срабатывать постоянно — на 900 не влезали четыре описания из тринадцати (Inta, Aina, LEPS.ASIA, Buro Tsum), и в карточке висела полоса. Вместо прокрутки описания СОКРАЩЕНЫ в data.js до ~230 знаков; потолок карточки — 256px, то есть 8 строк по 29. Если однажды описание снова перестанет влезать, правильный ход — подрезать текст, а НЕ возвращать сюда overflow: он вернёт и полосу. */ } /* «Что сделали» дотягивается до кнопки «Обсудить проект» */ .cbox--works { flex: 1 1 auto; min-height: 0; } /* «Что сделали» */ .cworks li { display: flex; align-items: flex-start; gap: 4px; width: 100%; } .cworks__bullet { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 4px; } /* Маркер списка в 12px лежит на фоне разворота, а фон тёмный: --cv-theme (honey) дал бы 2.59:1 и маркер потерялся бы. Заливка кнопки ниже — другое дело, там honey работает пятном под светлыми чернилами. */ /* fill: accent-ink -> --cv-theme (правка 08.08, заказчик: «точки такого же цвета, как и кнопка») — тот же honey, которым залита .cbtn__bg */ .cworks__bullet svg { width: 100%; height: 100%; display: block; fill: var(--cv-theme); } .cworks li + li { margin-top: 6px; } .cworks__text { font-size: var(--cv-cardtext); line-height: 1.3; } /* Карточка «Факты» (категория / метрика / номер в портфолио) снята целиком по правке 03.08 — её место отдано описанию. Правила .cfacts и .cfact удалены, а не закомментированы. */ /* ============ строка перелистывания кейсов ============ Стоит сверху левой колонки, на одном уровне с «Что сделали»; высота держится в пару к кнопке «Обсудить проект» справа. */ .cact__row { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; background: var(--cv-bg); border-radius: 10px; border: 1px solid var(--cv-fg); overflow: hidden; } @media (min-width: 1024px) { .cact__row { min-height: 72px; } } /* ниже 1440 колонка карточек всего ~240px, и при полных отступах эталона на само название оставалось 42px — поджимаем поля и кегль */ .cact__name { flex: 1 1 auto; min-width: 0; padding: 16px 14px; font-size: 15px; line-height: 1.5; color: color-mix(in oklab, var(--cv-fg) 50%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cact__nav { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 8px; border-left: 1px solid var(--cv-fg); } @media (min-width: 1440px) { .cact__name { padding: 24px 20px; font-size: 18px; } .cact__nav { gap: 12px; padding: 0 12px; } } .cact__navbtn { position: relative; width: 32px; height: 32px; border-radius: 8px; background: transparent; display: flex; align-items: center; justify-content: center; transition: background-color .15s var(--cv-ease); } /* Невидимое расширение зоны нажатия до 44×44 (правка 08.08, адаптация): кнопка 32px — меньше пальцевого минимума, а расти ей самой нельзя, вся строка перелистывания обмерена под высоту кнопки «Обсудить проект». Псевдоэлемент ловит тапы за пределами видимой кнопки, вида не меняет. Просвет до счётчика между кнопками 8px — перекрытие зон по 2px с каждой стороны безвредно: счётчик не кликабелен. */ .cact__navbtn::before { content: ""; position: absolute; inset: -6px; } .cact__navbtn:hover { background: color-mix(in oklab, var(--cv-fg) 5%, transparent); } .cact__navbtn svg { width: 12px; height: auto; display: block; fill: var(--cv-fg); } .cact__count { min-width: 16px; text-align: center; font-weight: 500; } /* ---------- главная кнопка ---------- */ .cbtn { flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; border-radius: 10px; font-family: var(--cv-serif); font-weight: 700; font-style: normal; text-transform: uppercase; color: var(--cv-fg); padding: 16px 12px; font-size: var(--cv-40); line-height: 1.1; letter-spacing: normal; } @media (min-width: 1024px) { .cbtn { min-width: 192px; min-height: 72px; padding: 12px 20px; font-size: var(--cv-2xl); line-height: 1.25; } } /* подложка отдельным слоем — её и масштабирует ховер */ .cbtn__bg { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; border: 2px solid var(--cv-theme); background: var(--cv-theme); } .cbtn__content { position: relative; z-index: 20; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; } /* clbl__ghost — невидимая распорка: держит ширину, чтобы при подмене слоёв кнопка не дёргалась */ .clbl { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; line-height: 1; } .clbl--right { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: flex-end; } .clbl__ghost { visibility: hidden; white-space: pre; } .clbl__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; white-space: pre; } .clbl--right .clbl__layer { justify-content: flex-end; white-space: nowrap; } .cbtn__arrow { width: 1.15em; height: auto; display: block; fill: currentColor; } /* ---------- плавающий предмет: УДАЛЁН 05.08 ---------- Заказчик: «модельки летающие не нужны нигде». Здесь стояли .cbox__food (десктопная вырезка в карточке «Что сделали»), .cinfo__foodmob (мобильная, между заголовком и подзаголовком) и общие .cfood / .cfood__inner / .cfood img. ВАЖНО для отката: .cbox__food был не абсолютом, а обычным элементом потока с flex: 1 1 auto — он забирал всю высоту под списком, поэтому физически не мог на него наехать при разной высоте карточек. Габарит задавался ВЫСОТОЙ, а не шириной: вырезки сняты в разных пропорциях (float-invasion-1 — 278×640), и при фиксированной ширине предмет вырастал вдвое против соседних кейсов. Разметка снята в index.html, механика — в main.js, поле float — в data.js. Файлы assets/img/float-*.webp на диске оставлены. */ /* Правило .cover__ghost снято вместе с перелётом фото (правка 06.08, просьба заказчика: «пусть картинки просто будут на своём месте»). Здесь описывался клон, летевший из карточки ленты в галерею разворота и обратно; механика и разбор — в main.js у openCase. */ /* ============================================================ 6.10 Команда ============================================================ */ /* 6.11 Ценности / этика — секция и её стили УДАЛЕНЫ по ТЗ12 §3 */ /* ============================================================ 6.12 Как мы работаем ============================================================ */ /* ============================================================ 6.14 FAQ ============================================================ */ .faq { max-width: 860px; } /* тёмная тема FAQ (ТЗ4 §5.1): фон bp-black, вопросы ivory, акценты амбер */ .faq details { border-top: 1px solid color-mix(in srgb, var(--bp-cream) 14%, transparent); } .faq details:last-child { border-bottom: 1px solid color-mix(in srgb, var(--bp-cream) 14%, transparent); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ic { flex: 0 0 auto; width: 28px; height: 28px; position: relative; transition: transform .3s var(--ease); } .faq summary .ic::before, .faq summary .ic::after { content: ""; position: absolute; inset: 0; margin: auto; /* «плюс» в полтора пикселя лежит на фоне секции — знак, не пятно */ background: var(--bp-accent-ink); } .faq summary .ic::before { width: 16px; height: 1.5px; } .faq summary .ic::after { width: 1.5px; height: 16px; transition: transform .3s var(--ease); } .faq details[open] summary .ic { transform: rotate(45deg); } .faq .faq__a { padding: 0 0 var(--s-3); color: color-mix(in srgb, var(--bp-off-white) 72%, transparent); max-width: 52em; } /* ---------- Форма заявки (живёт в мега-футере, ТЗ4 §7) ---------- */ .field { margin-bottom: var(--s-3); } .field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 13px 14px; font: inherit; font-size: .95rem; color: var(--bp-dark-text); background: var(--bp-cream); border: 1px solid color-mix(in srgb, var(--bp-charcoal) 25%, transparent); border-radius: 3px; } .field input::placeholder { color: color-mix(in srgb, var(--bp-charcoal) 32%, transparent); } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--bp-amber); outline-offset: 0; border-color: var(--bp-amber); } .field textarea { min-height: 96px; resize: vertical; } /* ПРАВКА 07.08: бордо из палитры ушло, красного в новом наборе нет вовсе. Ближе всего к тревожному тону Honey Garlic — жжёный красно-коричневый; на шампани он даёт 4.93:1 (было 9.7 у бордо). Это тот же --bp-amber-text, что у рубрик на светлых карточках: отдельного сигнального цвета в пятёрке просто нет, и заводить шестой ради ошибок формы правилу файла противоречит. */ .field .err { display: none; font-size: .78rem; color: var(--bp-amber-text); margin-top: 4px; } .field.is-invalid input, .field.is-invalid select { border-color: var(--bp-amber-text); } .field.is-invalid .err { display: block; } /* ПРАВКА 09.08: сообщение о неудавшейся отправке — под кнопкой, а не в поле: оно относится ко всей форме, а не к одному значению. Цвет тот же янтарный, что и у ошибок полей, чтобы не заводить шестой цвет. */ .send-err { font-size: .78rem; color: var(--bp-amber-text); line-height: 1.45; margin: 12px 0 0; } .send-err a { color: inherit; text-decoration: underline; } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: var(--bp-graphite); margin-bottom: var(--s-3); } /* ПРАВКА 08.08 (заказчик: «белый квадратик для галочки сделай под цвет формы»): нативный чекбокс всегда рисуется белым — appearance: none и рисуем сами. Пустой — квадрат цвета карточки с тёмной рамкой, отмеченный заливается янтарём, галочка — вписанный SVG-штрих кремом. */ .consent input { appearance: none; -webkit-appearance: none; margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; background: var(--bp-off-white); border: 2px solid var(--bp-dark-text); border-radius: 4px; display: inline-grid; place-content: center; cursor: pointer; } .consent input::before { content: ""; width: 11px; height: 11px; transform: scale(0); background: var(--bp-cream); clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 16%, 84% 2%, 38% 66%); } .consent input:checked { background: var(--bp-amber); border-color: var(--bp-amber); } .consent input:checked::before { transform: scale(1); } .consent input:focus-visible { outline: 2px solid var(--bp-amber); outline-offset: 2px; } .consent a { color: var(--bp-dark-text); } .form-card .btn { width: 100%; } /* .form-note («Ответим в течение рабочего дня. Звонок-знакомство — бесплатно.») удалена 31.07 по просьбе заказчика вместе с правилом. */ /* Правка 31.07 (шестая): форма и «спасибо» — в одной ячейке грида, друг поверх друга. Оба остаются в потоке, поэтому высота ячейки всегда равна высоте более крупного из них (формы) и карточка не меняет размер при отправке. Переключение — visibility, а не display: display:none выкинул бы форму из потока, и ячейка снова схлопнулась бы. visibility заодно убирает поля из таба и из дерева доступности — как и прежний display. */ .form-card__stack { display: grid; } .form-card__stack > * { grid-area: 1 / 1; } .form-success { visibility: hidden; align-self: center; text-align: center; padding: var(--s-6) 0; } .form-success.is-visible { visibility: visible; } /* Правка 31.07 (пятая): на экране благодарности осталась одна строка. Курсив снят (у --font-serif алиас курсивный, прямое начертание пишем явно), кегль 1.4 → 1.75rem (+25%). */ .form-success h4 { font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-style: normal; font-weight: 700; font-size: 1.75rem; line-height: 1.1; } /* было display:none — см. комментарий у .form-card__stack выше */ form.is-hidden { visibility: hidden; } /* ---------- система появления текста (assets/js/reveal.js) ---------- Правило прячет только помеченные элементы и только при включённом JS: класс js-reveal ставится строкой в , а reveal.js снимает его, если GSAP не загрузился или включён prefers-reduced-motion. Прежнее [data-reveal] { opacity: 0 } удалено вместе со своей механикой. */ @media (prefers-reduced-motion: no-preference) { html.js-reveal [data-gsap-title], html.js-reveal [data-gsap-title-on-scroll], html.js-reveal [data-gsap-text], html.js-reveal [data-gsap-text-on-scroll], html.js-reveal [data-gsap-big-copy], html.js-reveal [data-gsap-big-copy-on-scroll], html.js-reveal [data-gsap-appear], html.js-reveal [data-gsap-appear-on-scroll], html.js-reveal [data-gsap-slide-in], html.js-reveal [data-gsap-slide-in-on-scroll], html.js-reveal [data-gsap-scale-up], html.js-reveal [data-gsap-scale-up-on-scroll] { opacity: 0; will-change: opacity; } html.js-reveal .char, html.js-reveal .word { will-change: transform, opacity; } /* Карточки услуг помечены не атрибутом, а классом: их ведёт своя общая лента (playCard), а не карта атрибутов. Прятать нужно те же два узла, что лента поднимает с нуля, — иначе они успевают мигнуть. Правка 04.08: панель ненадолго перевели в «видна всегда», пытаясь убрать чёрный блок на едущем ряду, — и вернули обратно. Замер референса покадрово (buckssauce, .cards-row №2) показал, что у него ровно так же: в момент, когда ряд виден на 8%, панель стоит opacity 0 / scale .8, а вся лента карточки трогается с 10–20% видимости. Чёрным ряд там бывает — но какие-то 76px хода, и этого никто не замечает. Настоящей причиной затянувшегося чёрного блока был не этот opacity, а поднятый до .9 порог наблюдателя; он снят, см. initCards в reveal.js. */ html.js-reveal .wcard__q, html.js-reveal .wcard__panel { opacity: 0; will-change: opacity, transform; } /* Правка 05.08: заголовок панели и пункты списка тоже прячутся заранее. Раньше лента гасила их сама в нулевой момент, поэтому CSS был не нужен; теперь она это делает на 0.35с и ~1.0с — ровно как у референса, — и без guard-правила оба успевали бы мигнуть на проявляющейся панели. У buckssauce ровно та же страховка, только инлайновым style="opacity:0" из разметки. Снимают её сами твины: GSAP пишет opacity инлайном, а он сильнее правила из таблицы. */ html.js-reveal .wcard__title, html.js-reveal .wcard__list li { opacity: 0; will-change: opacity, transform; } } /* ---------- 404 / служебные страницы ---------- */ .page-plain { /* запасная строка для браузеров без svh — см. .hero */ min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--bp-black); color: var(--bp-off-white); padding: var(--gutter); } .page-plain .code { font-family: var(--font-grotesk); font-weight: 700; font-size: clamp(4rem, calc(16 * var(--vw-step)), 9rem); color: var(--bp-accent-ink); line-height: 1; } .page-plain h1 { font-family: var(--font-serif); font-weight: 600; font-size: 1.6rem; margin-top: var(--s-3); } .page-plain p { margin-top: var(--s-2); color: color-mix(in srgb, var(--bp-off-white) 65%, transparent); } .page-plain .btn { margin-top: var(--s-4); } .doc-page { background: var(--bp-ivory); color: var(--bp-dark-text); min-height: 100vh; min-height: 100svh; padding-block: calc(var(--header-h) + var(--s-8)) var(--s-12); } .doc-page .container { max-width: 860px; } .doc-page h1 { font-family: var(--font-serif); font-size: 2rem; margin-bottom: var(--s-4); } .doc-page h2 { font-family: var(--font-serif); font-size: 1.3rem; margin: var(--s-4) 0 var(--s-2); } .doc-page p, .doc-page li { margin-bottom: var(--s-2); color: color-mix(in srgb, var(--bp-charcoal) 88%, transparent); } .doc-page ul { list-style: disc; padding-left: 22px; } /* правка 04.08: заливка врезки была отдельным светлым бежем (#FBEFD8), а страница теперь кремовая — врезка растворилась бы. Берём золото прозрачностью: на кремовой странице оно даёт ту же тёплую подложку, но остаётся золотом, а не шестым цветом. */ .doc-page .todo { background: color-mix(in srgb, var(--bp-gold) 16%, transparent); border: 1px solid var(--bp-amber); border-radius: 4px; padding: var(--s-2); font-size: .9rem; } /* ============================================================ ТЗ2 — анимационная доработка ============================================================ */ /* ---------- Плашка-шильдик с точками-заклёпками (фирменный приём ТЗ2) ---------- */ .plaque { position: relative; display: inline-flex; align-items: center; justify-content: center; background: var(--bp-off-white); color: var(--bp-dark-text); border: 1px solid color-mix(in srgb, var(--bp-charcoal) 18%, transparent); border-radius: 999px; padding: 9px 36px; font-family: var(--font-grotesk); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 14px color-mix(in srgb, var(--bp-charcoal) 14%, transparent); } /* Точки-заклёпки — те самые «кружки», которые заказчик просил увести в акцент (правка 04.08 — в золото, правка 07.08 — в Honey Garlic: формулировка «для комбиков, кружков и т.д.» относится ровно к ним). Были цвета чернил плашки: тёмные на светлой, светлые на тёмной. Теперь акцент на обеих, и заклёпка читается как украшение, а не как часть надписи. На тёмной плашке кейса honey звучит тише прежнего золота (2.59:1 против 3.9) — но это украшение, и таково пожелание. */ .plaque::before, .plaque::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--bp-gold); opacity: 1; transform: translateY(-50%); } .plaque::before { left: 13px; } .plaque::after { right: 13px; } .plaque b { color: var(--bp-amber-text); font-weight: 700; } /* Секция «Как мы работаем» (.steps) и её стили удалены 29.07 по просьбе заказчика. */ /* ============================================================ ТЗ2 §5 — «Команда»: горизонтальный проезд ============================================================ */ .hteam { position: relative; /* Правка 04.08: секция окрашена в общий фон страницы. Раньше здесь стояло --bp-burgundy, но прежнее бордо #2B0E12 было почти чёрным и читалось как «чуть тёплый чёрный» — то есть фактически тем же фоном. Бордо #5D1E21 было куда светлее, и та же строка залила бы весь блок команды сплошным цветным полем. С палитрой 07.08 вывод не изменился: залить секцию можно только balsamico (это и есть фон) либо coffee, который от фона отличается на 1.15:1 — то есть неотличим. Откат: background: var(--bp-coffee). */ background: var(--bp-page); color: var(--bp-off-white); overflow: clip; /* ТЗ6 §2: ничто не видно за границами секции */ } /* Стык «Кейсы → Команда» — в общем ритме секций (80 + 80). Своей половины стыка у секции нет: паддингов она не носит, её высота на десктопе ровно экран. Поэтому именно MARGIN, а не padding: пин заворачивает секцию в .pin-spacer и переносит поля на него, а коробка обязана остаться высотой в экран — от паддинга пин сдвинул бы содержимое вниз на его величину. На мобильном правила нет: там вместо пина обычная лента, и у .hteam__track уже есть свои 96px сверху. */ @media (min-width: 1024px) { .hteam { margin-top: var(--s-10); } } .hteam__viewport { position: relative; } .hteam__track { position: relative; display: flex; /* ТЗ16 §3: станции равняются по ВЕРХНЕЙ кромке фото (flex-start) — разная длина текста под фото больше не толкает рамки по вертикали; интро-станция центрируется отдельно (align-self) */ align-items: flex-start; gap: 5.5vw; /* ТЗ14 §4.3: пятеро — плотнее (−~25% от прежнего ориентира), проезд не утомляет */ width: max-content; padding: var(--s-12) 8vw; } /* .hteam__tail удалён по ТЗ16 §5.2 — конец проезда считается от центра последней станции, «выходной хвост» вызывал перелёт влево */ .hteam__path { position: absolute; left: 0; top: 50%; width: 100%; height: 220px; transform: translateY(-50%); pointer-events: none; } .hteam__path path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; } /* Своя заливка у корневого — только ради аудита палитры: по умолчанию она чёрная, а чёрного в наборе нет. Ни одна фигура внутри её не использует (у path fill:none, у маски — свои стопы), но в вычисленных стилях она числится, и проверка «на странице только пять цветов» без этой строки каждый раз спотыкается о ложную находку. */ .hteam__path, .cgal__clipsvg { fill: none; } /* трасса — волосяная линия по фону секции, оба слоя «знаковые» */ .hteam__path-base { stroke: color-mix(in srgb, var(--bp-accent-ink) 50%, transparent); stroke-dasharray: .012 .008; } .hteam__path-glow { stroke: var(--bp-accent-ink); } /* .hteam__float (декоры-напитки) удалены по ТЗ16 §2 */ .hstation { position: relative; flex: 0 0 auto; display: flex; align-items: flex-start; } /* ТЗ16 §3: интро центрируется сама — карточки равняются без неё */ .hstation--intro { width: 50vw; max-width: 640px; display: block; align-self: center; } /* ТЗ16 §4: заголовок интро крупнее (+~22% к верху clamp). Правка 31.07 (пятая): вся вилка умножена ровно на 1.3 по просьбе заказчика — 2.1/4.4/3.7 → 2.73/5.72/4.81. Правка 03.08 (третья): заголовок ПРЯМОЙ. Курсив давал не .h-serif как стиль, а сама гарнитура: --font-serif это «Roslindale Italic», отдельное семейство, и font-style: normal его бы не выпрямил — нужна смена семейства на прямой «Roslindale Display Condensed». Он же стоит у всех прочих заголовков секций (услуги, кейсы). */ .hstation--intro .h2 { font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-style: normal; font-weight: 700; letter-spacing: normal; font-size: clamp(2.73rem, calc(5.72 * var(--vw-step)), 4.81rem); } /* Правка 31.07 (четвёртая): правила .hstation--intro .pill и .hteam__sub удалены вместе с самими надписями («Команда» и «Команда, которая собирает систему…») — в интро остался один заголовок. */ /* ТЗ16 §4.2: карточка шире — укрупнённые регалии (Маяков) не ужимаем */ .hstation__card { position: relative; width: clamp(300px, 32vw, 470px); text-align: center; /* ПРАВКА 08.08 (адаптация): карточка — контейнер для cqi. Кегль плашки с именем ниже считается от ЕЁ ширины: на узких карточках (планшет 1024×1366 — 328px, телефон 390 — ~288px, ноутбук 1024×768 — 287px) фиксированные 1.34rem не влезали, и «Артур Шустериовас» уходил ПОД заклёпки с обеих сторон. Замер после правки — у .plaque ниже. */ container-type: inline-size; } /* Правка 03.08 (третья): кадр подрезан с 3/4 до 4/5 — заказчик разрешил («относительно этого можешь немного обрезать фотографии команды»). Это плата за укрупнённые подписи: карточка стала выше на текст, и без подрезки трек переставал помещаться между шапкой и нижней кромкой. Исходники 800×1200, object-fit: cover режет по центру — при 4/5 видно 960px из 1200, по 120 сверху и снизу. Проверено на всех пятерых: лица в кадре целиком. Дальше 4/5 не резать без просмотра — у Гордышева и Маякова головы стоят ближе к верхней кромке. */ .hstation__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; box-shadow: 0 18px 44px color-mix(in srgb, var(--bp-charcoal) 40%, transparent); } .hstation__photo img { width: 100%; height: 100%; object-fit: cover; } /* ТЗ16 §4: имя в плашке ~1rem (было .74) — плашка пропорционально выше. Правка 03.08 (третья): весь текстовый блок станции укрупнён — заказчик: «очень плохо читаются фамилия и имя, роль и снизу текст». Ступени 1.18 / 1.12 / .95rem держат заданный порядок: имя чуть крупнее роли, роль крупнее подписи. Место под это дала фотография (см. --hst-ratio). */ .hstation__card .plaque { position: absolute; top: auto; left: 50%; transform: translate(-50%, -50%); max-width: 96%; /* ПРАВКА 08.08 (заказчик): обводка плашки с именем снята (кромку держат контраст и тень), кегль имени поднят 1.18 -> 1.34rem, а точки-заклёпки уравнены с плашками кейсов — 9px против базовых 7 (см. .ccard .plaque в блоке ленты, там тот же размер). */ border: 0; font-size: 1.34rem; padding: 14px 50px; /* ПРАВКА 08.08 (адаптация): кегль и боковые поля — доли ширины карточки. Числа не с потолка, а из замера: самое ШИРОКОЕ имя — «Александр Гордышев», его строка в Copperplate с разрядкой .12em занимает 15.14px на каждый пиксель кегля. Бюджет плашки — 96% карточки минус два поля по 8.5cqi, отсюда потолок кегля 5.22cqi; взято 5.05 — 3% запаса на округления рендера. 1.34rem остаётся верхним пределом: на рабочем десктопе (карточка 470px) формула даёт 23.7 и не работает, там не меняется ничего. На 358px (1280×720) выходит 18.1, на 287 (1024×768) — 14.5: имя встаёт между заклёпками на всей сетке от телефона до монитора. Если cqi не поддержан (старые браузеры), строки ниже игнорируются целиком и работает пара значений выше. Прежние две ступени-переопределения кегля (1.18rem на низких десктопах, 1.14rem на мобильном) сняты: их работу забрала формула. */ font-size: min(1.34rem, 5.05cqi); padding: 14px min(8.5cqi, 50px); } /* заклёпки на узких плашках едут к краю вместе с полями: на карточке 266px поле 22.6px, и заклёпка на прежних left 13 (габарит 13..22) упиралась бы в текст — теперь 8.5, габарит 8.5..17.5, до текста ≥5px */ .hstation__card .plaque::before { left: min(3.2cqi, 13px); } .hstation__card .plaque::after { right: min(3.2cqi, 13px); } .hstation__card .plaque::before, .hstation__card .plaque::after { width: 9px; height: 9px; } /* ГРАБЛИ: это поле НЕ равно просвету под плашкой. Плашка вынута из потока (position: absolute) и приподнята на половину своей высоты, поэтому отсчёт идёт от нижней кромки ФОТО, а нижние 29px плашки съедают то же поле. При прежних 32px между плашкой и ролью оставалось 3px — заказчик: «роль слишком близко к имени». 46px дают просвет в 17px. Меняется кегль плашки — пересчитать и это число. */ .hstation__role { margin-top: 46px; /* 1.12 -> 1.26rem (правка 08.08: «шрифт у роли соответственно больше» — в паре с ростом имени на плашке) */ font-family: var(--font-grotesk); font-size: 1.26rem; font-weight: 600; /* .13 → .11em: самая длинная роль («Creative Head Bartender & R&D Lead») при .13em переставала вставать в строку даже на карточке 461px */ letter-spacing: .11em; text-transform: uppercase; color: var(--bp-accent-ink); } /* Строки-регалии (.hstation__creds) сняты 08.08 по просьбе заказчика вместе с разметкой — под фото осталась только янтарная роль. */ /* десктоп: пин на 100vh (движение ведёт GSAP) */ @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { /* ГРАБЛИ: шапка фиксированная и лежит ПОВЕРХ секции, а трек центрируется во всю высоту экрана — верхняя кромка фотографий заезжала под неё (замер 1440×900: трек 762px, верх на 69 при высоте шапки 72). Отдаём шапке её полосу паддингом: центрирование считается уже от свободной высоты. Одного сокращения подписей мало — на низких экранах (1280×720) трек и без них выше свободного места. */ .hteam__viewport { height: 100vh; padding-top: var(--header-h); display: flex; align-items: center; overflow: hidden; } .hteam__track { padding-block: 0; } /* Правка 31.07 (пятая): линия длиннее трека на ширину экрана. Раньше SVG был ровно по треку, а трек в финальном кадре кончается примерно на трети экрана от правой кромки (после ТЗ16 §5.2 «выходного хвоста» нет) — линия обрывалась в воздухе. Продлевать можно только здесь: ниже 1024 вьюпорт команды — нативный горизонтальный скроллер (overflow-x: auto), и элемент шире трека добавил бы экран пустой прокрутки. Секция обрезает лишнее сама (.hteam { overflow: clip }). */ .hteam__path { width: calc(100% + 100vw); } } /* мобайл и reduced-motion: нативный свайп со scroll-snap (ТЗ2 §5) */ /* ПРАВКА 08.08 (адаптация под все устройства). Прежняя раскладка прятала ленту: интро 82vw + gap 8vw + поле 9vw = 99vw, то есть первая фотография начиналась РОВНО за правой кромкой — на экране оставался один заголовок в пустом тёмном блоке, и о свайпе никто не догадывался (замер 390×844: видимых станций ноль). Теперь интро 64vw и станции 74vw: первая карточка выглядывает на ~22vw уже при входе в секцию и сама зовёт тянуть. Поле трека ужато 96 -> 48px: пустоты вокруг самой высокой станции и так хватает. */ @media (max-width: 1023.98px) { .hteam__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .hteam__track { gap: 6vw; padding: var(--s-6) 8vw; } /* Потолок 420px — правка 09.08. Доля 74vw придумана под телефон, где она даёт 266–318px и соседняя карточка выглядывает на 47–52px, зазывая тянуть. На планшете та же доля разворачивается в 568–607px, карточка внутри упирается в свои 360px и центрируется — соседняя станция уезжала за кромку целиком (замер 768×1024: вторая начиналась на 780px при экране 768, то есть ноль видимых пикселей), и лента выглядела неподвижной картинкой. 400, а не 420: при 420 на самой границе действия потолка (экран 568, где 74vw как раз равны потолку) соседняя карточка выглядывала всего на 38px — меньше, чем на телефоне. С 400 подсказка везде заметная: 69px на 568, 241px на 768, 285px на 820. Ниже 540px ширины экрана потолок не работает вовсе — там по-прежнему чистые 74vw. */ .hstation { width: min(74vw, 400px); scroll-snap-align: center; flex-direction: column; align-items: flex-start; gap: 0; } /* ПРАВКА 09.08 (просьба заказчика: «на телефоне удали надпись BARPOINT в лицах, нужно чтобы сразу начиналось с лица Артура, иначе люди не поймут, что их можно пролистать»). Станция-интро занимала первый экран ленты целиком, и о свайпе никто не догадывался — теперь лента открывается фотографией. Заголовок не удалён, а спрятан приёмом sr-only: display: none выкинул бы

из дерева доступности и из выдачи, а секция осталась бы вовсе без заголовка. position: absolute забирает станцию из флекс-ленты, так что места она не занимает и в снап-точки не попадает. */ .hstation--intro { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* карточка занимает всю станцию: прежний min(78vw, 360px) был ШИРЕ новой станции в 74vw и вылезал бы из неё */ .hstation__card { width: min(100%, 360px); margin-inline: auto; } .hstation__role { font-size: 1.12rem; letter-spacing: .1em; } } @media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .hteam__viewport { overflow-x: auto; scroll-snap-type: x mandatory; } .hstation { scroll-snap-align: center; } } /* ТЗ16 §4.2: на низких десктопных экранах (720–800px) укрупнённая станция Маякова занимала весь вьюпорт впритык (719/720) — ужимаем КАРТОЧКУ (фото), а не тексты: воздух сверху/снизу возвращается */ @media (min-width: 1024px) and (max-height: 800px) { .hstation__card { width: clamp(280px, 28vw, 400px); } /* та же вилка ×1.3, что и в базовом правиле (правка 31.07, пятая) */ .hstation--intro .h2 { font-size: clamp(2.47rem, calc(4.94 * var(--vw-step)), 4.03rem); } /* Правка 03.08 (вторая): на 1280×720 запаса над шапкой оставалось 19px. Самой высокой была карточка Марушко: его роль «Creative Head Bartender & R&D Lead» на 358px не вставала в строку и добавляла карточке лишний ряд. Кегль и поля подписей ужаты — роль встаёт в одну строку, а под фото уходит на 30+px меньше. Станцию Марушко сняли 05.08, но ступень нужна и без неё: высоту трека теперь задаёт Маяков с его тремя строками регалий. Правка 03.08 (третья): вся ступень поднята вслед за базовой — порядок «имя > роль > подпись» тот же, просто на шаг мельче. ПРАВКА 08.08 (адаптация): своя ступень кегля плашки отсюда снята — кегль теперь ведёт формула от ширины карточки (см. базовое правило), и на карточке 287px (1024×768) она даёт 16.9px против прежних 18.9, при которых имя вылезало под заклёпки. */ /* тот же расчёт, что и в базовом правиле: плашка здесь ниже, её половина съедает ~25px, оставляем просвет ~13px */ .hstation__role { margin-top: 38px; font-size: 1.14rem; letter-spacing: .1em; } } /* ============================================================ ТЗ2 §6 — кейсы: бесконечная лента ============================================================ */ /* full-bleed лента не должна давать горизонтальный скроллбар (ТЗ3 §2.3) */ #cases { overflow-x: clip; } /* Своего фона у секции НЕТ (как у всех остальных): его целиком даёт переливающийся body. */ .crail { overflow: hidden; /* ТЗ3 §2.3: full-bleed — лента на всю ширину вьюпорта, карточки входят из-за правой кромки экрана и уходят за левую целиком */ width: 100vw; margin-inline: calc(50% - 50vw); margin-top: var(--s-6); /* Место под выступающие плашки сверху и под тени карточек снизу: overflow:hidden режет по padding-box, и без нижнего поля тень обрубалась ровно по нижней кромке карточки. */ padding-top: clamp(46px, calc(4.4 * var(--vw-step)), 64px); padding-bottom: 46px; cursor: grab; /* при протяжке мышью не должно выделяться подписи карточек */ user-select: none; -webkit-user-select: none; } .crail.is-dragging { cursor: grabbing; } .crail__track { /* зазор 20 → 12px (правка 03.08): карточки стоят плотнее, как отзывы на buckssauce. Ширину карточки при этом не трогаем — делитель в .ccard считает от вычета 40px, и он остаётся прежним. */ display: flex; gap: 12px; width: max-content; touch-action: pan-y; will-change: transform; } /* статичный режим (фильтр «кофе»: 2 кейса по центру, ТЗ2 §6) */ .crail--static { cursor: default; } .crail--static .crail__track { width: 100%; justify-content: center; flex-wrap: wrap; } /* ТЗ11 §7.1: кремовые карточки вместо чёрных — не «дырявят» бежевую секцию; фон чуть светлее секции, тёмный текст, мягкая тень; плашка — ТЁМНАЯ (инверсия прежней молочной) с молочным текстом и амбер-номером */ .ccard { position: relative; flex: 0 0 auto; /* Правка 31.07 (вторая): плашка с названием выросла ещё в 1.5 раза, и карточка под неё расширена — в прежние 430px самое длинное имя («Memo Dine & Bar + hide») не влезало ни при каких полях. Делитель 3 → 2.3: на 1440 в кадре ~2.8 карточки вместо 3.3. Ниже 768 ширину задаёт vw-правило в конце блока. */ width: clamp(320px, calc((100vw - 2 * var(--gutter) - 40px) / 2.3), 500px); background: var(--bp-cream); color: var(--bp-dark-text); /* ПРАВКА 08.08 (заказчик: «оставь только жёлтую обводку при наведении, тонкую вокруг карточек убери»). Рамка не удалена, а обесцвечена: border: 0 сдвинул бы раскладку ленты на 2px и замер её периода. */ border: 1px solid transparent; border-radius: 12px; /* Верхнее поле держит зазор до плашки: она садится наполовину выше кромки, и с укрупнённым кеглем прежние 32px упирались в фото. */ padding: clamp(36px, calc(3.6 * var(--vw-step)), 56px) var(--s-3) var(--s-3); text-align: left; box-shadow: 0 12px 32px color-mix(in srgb, var(--bp-charcoal) 10%, transparent); transition: transform .3s var(--ease); } /* Тень наведения — заранее отрисованный ::after, ховер меняет только его прозрачность (правка 08.08). Раньше transition стоял на самом box-shadow: каждый кадр ховера браузер перерисовывал размытие 44px на карточке 450×540, а лента при этом ещё и едет — карточки проезжают под неподвижным курсором, и ховер вспыхивает на каждой. Opacity едет на композиторе и главному потоку не стоит ничего. */ .ccard::after { content: ""; position: absolute; inset: -1px; border-radius: 12px; box-shadow: 0 18px 44px color-mix(in srgb, var(--bp-charcoal) 16%, transparent); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; z-index: -1; } /* Правка 04.08: на ховере карточка получает ТУ ЖЕ янтарную обводку, что и после возврата из кейса. Клиент увидел её на просмотренной карточке (там это кольцо :focus-visible из базовых стилей — разворот при закрытии возвращает фокус на карточку) и попросил показывать её на наведении всегда. Значения один в один с :focus-visible, иначе на карточке под курсором И в фокусе было бы два разных кольца. */ .ccard:hover { /* правка 08.08: подсветка тонкой рамки снята вместе с самой рамкой — осталось только жёлтое кольцо на тёмном фоне секции */ outline: 2px solid var(--bp-accent-ink); outline-offset: 3px; transform: translateY(-3px); } .ccard:hover::after { opacity: 1; } /* Правка 31.07: плашка с названием кейса заметно крупнее и длиннее — кегль 11.8 → 24.8px на 1440 (два захода: +40%, затем ещё ×1.5). Посадка через translate(-50%,-50%) при top:0 — плашка сама садится ровно наполовину выше кромки карточки при любой своей высоте (кегль и поля меняются по брейкпоинтам, фиксированный top пришлось бы пересчитывать вручную). Откат: top -17px, padding 9px 36px. */ .ccard .plaque { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--bp-black); color: var(--bp-off-white); border-color: color-mix(in srgb, var(--bp-cream) 20%, transparent); /* Боковые поля — ДОЛЯ ширины карточки (проценты у абсолютного элемента считаются от padding-box .ccard), поэтому плашка остаётся одинаково «длинной» на любом брейкпоинте, а длинные названия («Memo Dine & Bar + hide») не упираются в многоточие на узких карточках. 58px — потолок на 1440. Откат: padding 9px 36px и кегль от .plaque. */ padding: clamp(13px, calc(1.3 * var(--vw-step)), 19px) min(9%, 46px); font-size: clamp(1.02rem, calc(1.72 * var(--vw-step)), 1.55rem); font-weight: 700; letter-spacing: .1em; } /* ---------- фирменные начертания в плашке (правка 02.08) ---------- Каждое название стоит своим знаком — тот же приём, что в трастстрипе (см. 6.2). --ar = ширина/высота файла, --k = оптический множитель высоты относительно кегля плашки; оба приходят из data.js, где для каждого знака подобраны поштучно (у «Зойки» полкадра занимают росчерки, у Marcelo под словом висит вторая строка «SHOP & BAR»). Габарит задан ОБЕИМИ сторонами в em, без процентов: плашка сама ужимается по содержимому, и процент внутри неё циклический — Chrome резолвит его в 0 и знак схлопывается (проверено). Самый широкий знак (Marcelo) на 375px даёт 195px при доступных 264px, так что ограничение не нужно; страховка — max-width у .plaque. Знак — обычная картинка, уже перекрашенная в молочный (файлы -light.png). CSS-маска с заливкой currentColor тут НЕ годится: маска ограничена по origin, и при открытии страницы через file:// она не применяется — знак пропадает целиком (проверено). */ .ccard .plaque { gap: .5em; } .pmark-img { display: block; flex: 0 0 auto; width: calc(var(--k) * var(--ar) * 1em); height: calc(var(--k) * 1em); object-fit: contain; } /* «+ hide» у Memo: знак второго бара, набранный текстом плашки */ .pmark-suffix { font-size: .62em; letter-spacing: .1em; opacity: .8; } /* Sixty, Duran Bar, Buro Tsum — знака нет, в презентации имя набрано контрастной антиквой смешанным регистром (стр. 20, 22, 23) */ .pmark-type { font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-weight: 500; font-style: normal; font-size: 1.16em; line-height: 1.06; letter-spacing: .01em; text-transform: none; } .ccard .plaque::before, .ccard .plaque::after { background: var(--bp-gold); width: 9px; height: 9px; } .ccard .plaque::before { left: max(10px, min(4.9%, 21px)); } .ccard .plaque::after { right: max(10px, min(4.9%, 21px)); } .ccard__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; margin-top: var(--s-1); } .ccard__photo img { width: 100%; height: 100%; object-fit: cover; } /* .ccard__badge (пилюля с метрикой поверх фото) удалён 31.07 по правке заказчика — цифры «2 млн → 5 млрд» мешали кадру у PIMS и Landy. Разметку бейджа снял main.js, метрики остались в развороте кейса. */ .ccard__meta { display: block; margin-top: var(--s-2); } /* Правка 04.08 (просьба клиента: «сделай текст покрупнее, а „БАР“ — ещё на несколько пунктов крупнее, и шрифт подбери красивый»). Категория переведена с гротеска на «Roslindale Display Condensed» — тот же прямой капительный знак, которым набраны заголовки панелей услуг и «НАШИ ПРОЕКТЫ»; на карточке он звучит как рубрика, а не как служебная подпись. Кегль .66 → 1.05rem (+59%), трекинг с .14 до .08em: у Roslindale знаки и так узкие, прежний разгон на таком кегле рвал слово. Откат: var(--font-grotesk), .66rem, .14em. */ .ccard__meta .cat { font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-style: normal; font-size: 1.05rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--bp-amber-text); } /* Правка 05.08 (просьба клиента: «„+“ плохо видно»). В рубрике «Ресторан + бар» плюс у Roslindale нарисован волосяными штрихами и на 16.8px терялся между литыми буквами. font-weight здесь не помог бы: оба @font-face шрифта объявлены как «400 700» на одном статическом файле, поэтому 700 у .cat выше не делает знак ни на пиксель толще — единственный способ утолщить его — обводка. Кегль поднят на 15%, боковые поля возвращают знаку прежний просвет: обводка нарастает наружу и без них поджимала бы соседние слова. В сетке-fallback (.case-card__meta .cat) правило не нужно — там рубрика набрана гротеском, у него плюс и так плотный. */ .ccard__meta .cat__plus { font-size: 1.15em; -webkit-text-stroke: .055em currentColor; padding-inline: .05em; } /* Дефис рубрики («Десерт-бар» у YUMMS) — заказчик 08.08: «чуть жирнее». Тот же приём обводкой, что у плюса выше, но вдвое легче: дефис — не волосяной штрих, ему хватает лёгкого утолщения. */ .ccard__meta .cat__dash { -webkit-text-stroke: .03em currentColor; } .ccard__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; /* .92 → 1.02rem: клиент просил «чуть-чуть покрупнее». Больше нельзя — при двух строках (-webkit-line-clamp: 2) описание начинает обрезаться на середине фразы у половины кейсов. */ font-family: var(--font-text); font-size: 1.02rem; line-height: 1.45; color: color-mix(in srgb, var(--bp-dark-text) 82%, transparent); } @media (max-width: 767.98px) { /* 78 → 86vw: укрупнённая плашка требует ширины; соседняя карточка всё ещё выглядывает краем и подсказывает, что ленту можно тянуть. */ .ccard { width: 86vw; } } /* На узких карточках трекинг чуть плотнее — иначе самое длинное название («Memo Dine & Bar + hide») не укладывается и уходит в многоточие. */ @media (max-width: 1279.98px) { .ccard .plaque { letter-spacing: .085em; } } /* ============================================================ 6.15 Финальный CTA + форма (возврат по ТЗ5 §7; фон даёт body) ============================================================ */ /* ТЗ12 §4: при упоре скролла в низ карточка формы видна ЦЕЛИКОМ вместе с футером — хвост страницы ниже верха формы ужат до высоты вьюпорта: нижний паддинг секции срезан, воздух под контактами/подписью убран */ .final { color: var(--bp-off-white); padding-block: var(--s-12) var(--s-6); } @media (min-width: 1024px) { .final { padding-block: var(--s-16) var(--s-4); } } /* компактификация финала для низких экранов — в КОНЦЕ файла (ТЗ12 §4), иначе базовые .footer/.form-card ниже по файлу перебивают её */ .final__grid { display: grid; gap: var(--s-8); } /* Правка 04.08: колонки выровнены ПО ЦЕНТРУ, было align-items:start. Левая колонка ниже карточки формы (замер 1440×900: 390 против 529), и при выравнивании по верху весь остаток — 139px — копился одним пустым пятном под подписью. Теперь он делится поровну сверху и снизу: текст стоит против середины карточки, а раз карточку main.js доводит до центра экрана (см. data-final-tail), то и против середины экрана. */ @media (min-width: 1024px) { .final__grid { grid-template-columns: 6fr 5fr; align-items: center; } } /* Правка 04.08: фраза до тире — ПРЯМАЯ, курсив остался только у выделенного хвоста «давайте создавать его вместе». ГРАБЛИ те же, что у заголовка блока команды: курсив здесь даёт не font-style, а сама гарнитура — --font-serif это алиас «Roslindale Italic» (см. fonts.css), отдельное семейство, и font-style:normal его не выпрямит. Поэтому прямое начертание — это смена семейства на «Roslindale Display Condensed», а возвращает алиас обратно. Начертание и трекинг подобраны как у остальных прямых заголовков проекта (.hstation--intro .h2, .cases-head .h2). */ .final__title { max-width: 15em; font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-style: normal; font-weight: 700; letter-spacing: normal; } .final__title em { font-family: var(--font-serif); font-style: italic; font-weight: 600; letter-spacing: normal; color: var(--bp-accent-ink); } /* Шаг между строками ужат с 16 до 8px: сами строки подросли до 44px ради пальца (см. .final__contact), и при прежнем шаге просвет между номером и ником доходил бы до 34px — вдвое больше прежнего. */ .final__contacts { margin-top: var(--s-4); display: grid; gap: var(--s-1); justify-items: start; } .final__contacts a { text-decoration: none; } /* Строка контакта: янтарный глиф + светлое значение. Прежнее правило .final__contacts .lbl (капс-подпись «ТЕЛЕФОН»/«TELEGRAM») удалено вместе с самими подписями — их заменили иконки. Правило и не работало: в разметке у подписей стоял класс clbl (он же занят «ярлыком кейса» — .clbl около строки 1650), а стиль был написан на .lbl, поэтому слово «Телефон» шло базовым кеглем и вплотную к номеру. */ .final__contact { display: inline-flex; align-items: center; gap: 12px; color: inherit; min-height: 44px; /* палец: минимальная цель нажатия */ } .final__ico { width: 22px; height: 22px; flex: none; fill: var(--bp-accent-ink); transition: fill .25s var(--ease); } .final__contacts .value { font-size: 1.15rem; transition: color .25s var(--ease); } .final__contact:hover .value, .final__contact:focus-visible .value { color: var(--bp-accent-ink); } .final__sig { width: 120px; margin-top: var(--s-2); opacity: .8; } /* Правка 31.07 (четвёртая): карточка формы МОЛОЧНАЯ. Заказчик: «цвет формы сделай как цвет кнопок сверху на данном блоке» — над бордовым финальным блоком «чернила» шапки светлые (--hdr-ink = --bp-off-white), этот же тон и взят фоном карточки. Поэтому весь тёмный слой оверрайдов ниже снят: текст, поля, согласие и вторичная кнопка возвращаются к базовым «тёмным на светлом» правилам. Собственной обводки у карточки нет (убрана по просьбе заказчика) — её границу держит контраст со фоном плюс мягкая тень. Правка 04.08: заказчик подтвердил тот же ход в новой палитре — «форму для заполнения заявки тоже сделай soft cream». Карточка держится на --bp-off-white, а он теперь псевдоним Soft Cream, так что менять здесь нечего; поля внутри — того же крема, их «колодец» рисует толстая charcoal-обводка (см. ниже). Откат к тёмной: background charcoal, color cream, border 1px от крема на 18% + прежний блок оверрайдов (ревизия 55 в памяти). */ .form-card { background: var(--bp-off-white); color: var(--bp-dark-text); border: 0; border-radius: 16px; padding: var(--s-4); box-shadow: 0 24px 60px color-mix(in srgb, var(--bp-charcoal) 32%, transparent); } @media (min-width: 768px) { .form-card { padding: var(--s-6); } } /* Заголовок: прямой Roslindale (курсив снят), кегль поднят с 1.5rem до вилки ~1.85–2.35rem — по просьбе заказчика «убери курсив и сделай чуть больше шрифт». */ .form-card h3 { font-family: "Roslindale Display Condensed", "Times New Roman", serif; font-style: normal; font-weight: 700; font-size: clamp(1.85rem, calc(2.6 * var(--vw-step)), 2.35rem); line-height: 1.06; letter-spacing: normal; margin-bottom: var(--s-4); color: var(--bp-dark-text); } .form-card .btn { width: 100%; } /* Поля: толстая рамка и заметный радиус — референс buckssauce.com/shop. Правка 04.08: подложка поля была на тон светлее карточки (#F5EEDD на молочном) — в палитре из пяти цветов такого оттенка нет, и заводить шестой ради подложки незачем: «колодец» здесь и так очерчен рамкой в два пикселя, поле и карточка теперь одного крема. */ .form-card .field label { font-size: 1rem; color: var(--bp-dark-text); } /* ПРАВКА 08.08 (заказчик: «заливку полей сделай как у фона»): поля-колодцы теперь ФОНОВОГО цвета страницы — тёмный balsamico на кремовой карточке, в паре с такой же тёмной кнопкой «Отправить заявку» под ними. Прежняя тёмная рамка на тёмной заливке не видна и снята; текст внутри — крем. Фокус остаётся янтарным кольцом (общее правило .field input:focus). */ .form-card .field input, .form-card .field select, .form-card .field textarea { background: var(--bp-charcoal); color: var(--bp-off-white); border: 2px solid var(--bp-charcoal); border-radius: 12px; padding: 15px 16px; font-size: 1rem; } .form-card .field input::placeholder { color: color-mix(in srgb, var(--bp-off-white) 45%, transparent); } .form-card .field.is-invalid input { border-color: var(--bp-amber-text); } /* графит (--bp-graphite) на креме даёт всего 4.25:1 — ниже нормы 4.5:1 для мелкого текста (ТЗ 9.3); берём тот же тон, но глубже */ .form-card .consent { color: color-mix(in srgb, var(--bp-charcoal) 68%, transparent); } .form-card .consent a { color: var(--bp-dark-text); } .form-card .form-success h4 { color: var(--bp-dark-text); } /* Пустой хвост под контактами (правка 31.07, седьмая). Своего фона нет — сквозь него виден переливающийся body. Высоту ставит main.js; ноль по умолчанию нужен и как значение «места не требуется» (узкие/низкие окна, где карточка и так занимает больше половины экрана), и как исходное состояние на время замера. */ .final-tail { height: 0; } /* ============================================================ 6.16 Футер (компактный, возврат по ТЗ5 §7; фон даёт body) ============================================================ */ /* Правка 31.07 (четвёртая): верхняя полоса футера убрана целиком (лого + подпись + дублирующая навигация), вместе с ней удалены правила .footer__top / .footer__logo / .footer__tag / .footer__nav. Осталась служебная строка: копирайт и ссылка на политику 152-ФЗ. Разделительная линия над ней снята — отделять больше нечего. */ .footer { color: var(--bp-off-white); padding-block: var(--s-3); } .footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); /* 50% → 58% (правка 07.08): шампань темнее прежнего крема, и на половине прозрачности служебная строка давала 3.90:1 при норме 4.5 (на креме было 4.37 — тоже мимо, просто ближе). На 58% выходит 4.87. Замер попиксельный, как и всё в этом файле. */ font-size: .78rem; color: color-mix(in srgb, var(--bp-off-white) 58%, transparent); } .footer__bottom a { color: inherit; } /* ============================================================ ТЗ12 §4 — низкие экраны (1280×720, ноутбуки 13" с масштабом ОС): компактный финал и футер, чтобы при упоре скролла в самый низ карточка формы была видна ЦЕЛИКОМ вместе с футером. Блок стоит В КОНЦЕ файла осознанно: базовые .footer/.form-card объявлены ниже секции .final и при равной специфичности перебивали бы эти правила, стой они выше. ============================================================ */ @media (min-width: 1024px) and (max-height: 800px) { /* зазор форма↔футер (≥40px по ТЗ12 §4.4) держит свес левой колонки: gap = свес + этот паддинг, поэтому паддинг здесь минимальный */ .final { padding-block: var(--s-8) var(--s-2); } .final__contacts { margin-top: var(--s-3); gap: 12px; } .final__sig { display: none; } /* декоративная подпись уходит первой */ .form-card { padding: var(--s-3); } /* кегль ужимается, но остаётся крупнее прежней базы (было 1.5rem) */ .form-card h3 { font-size: 1.65rem; margin-bottom: var(--s-3); } .form-card .field { margin-bottom: 12px; } .btn--send { min-height: 58px; padding: 15px 22px; } .form-card .consent { margin-bottom: var(--s-2); } .footer { padding-block: var(--s-2); } } /* ============================================================ Плашка «поиск по картинке» Яндекс Браузера (правка 03.08) Панель с иконками лупы/глаза/камеры рисует сам браузер, и только тогда, когда курсор попадает в как в цель событий мыши. Замер (Яндекс 26.4.0.0): обычный — плашка есть; та же картинка с pointer-events:none — плашки нет; на buckssauce.com плашки нет ни на одной картинке. Все клики, hover и жесты лендинга висят на РОДИТЕЛЬСКИХ элементах (карточка кейса, рамка галереи, лента), поэтому картинкам события мыши не нужны. Цена: по картинке не сработает правый клик «Сохранить изображение» и перетаскивание мышью. ============================================================ */ img { pointer-events: none; }