/* ============================================================ Design tokens Единственный источник цветов и размеров. Все размеры — fluid через clamp(min, preferred, max): на маленьких экранах минимум, на больших — растут до максимума. ============================================================ */ :root { /* ---------- Colors ---------- */ --bg: #12141a; --surface-30: rgba(52, 61, 79, 0.3); /* Приглушённый цвет в макетах SEO Studio: рамки карты поискового продукта (на панели даёт ровно 37,43,56 — как в макете) и подписи свёрнутых строк аккордеона (35,40,52 на фоне страницы). Не --text-12 и не --text-30: текстовые заметно светлее и холоднее. */ --surface-50: rgba(52, 61, 79, 0.5); --surface-15: rgba(52, 61, 79, 0.15); --track: #343d4f; /* Тот же цвет: имя оставлено за полосами прогресса. */ --track-50: var(--surface-50); --text: #e8edf7; --text-50: rgba(232, 237, 247, 0.5); --text-30: rgba(232, 237, 247, 0.3); --text-25: rgba(232, 237, 247, 0.25); --text-20: rgba(232, 237, 247, 0.2); /* Самая слабая рамка: снята с карточек экрана 2 «О нас» — там она заметно тише обычной карточной (43,46,54 на фоне страницы). */ --text-12: rgba(232, 237, 247, 0.12); /* Плоский цвет панели: ровно surface-15, сведённый с фоном страницы. Нужен там, где полупрозрачность мешает (дырка кольца-прогресса должна сливаться с панелью под ним). */ --panel: #171a22; /* Панель-окно: первый экран Development Studio. В макете это ровно 21,24,31 и без кромки — темнее обычной карточной surface-15 и без рамки, потому что панель там читается как окно приложения с полосой закладок, а не как карточка. */ --panel-window: #15181f; /* Плоский цвет карточки-стекла: два слоя фона .mech-card (rgba(18,20,26,.6) над rgba(52,61,79,.3)), сведённые с --bg. Нужен активной карточке веера: у неё снят backdrop-filter (он размывал собственный текст), а без него полупрозрачный фон показывал карточки, лежащие сзади. */ --panel-glass: #161920; /* Статусные цвета дашбордов (сняты с макета SEO-страницы) */ --ok: #27c840; --warn: #f0b22e; /* Ошибка. В макетах дашбордов красного нет — взят тон в одном семействе с --ok и --warn, для сообщений об ошибке отправки форм. */ --danger: #e0483a; --accent: #4d6bff; --accent-50: rgba(77, 107, 255, 0.5); --accent-49: rgba(77, 107, 255, 0.49); --accent-30: rgba(77, 107, 255, 0.3); --accent-15: rgba(77, 107, 255, 0.15); /* Состояния шага на схеме сценария (экран 1 Development Studio): «сервис недоступен» и «доступен». Сняты пипеткой с макета. Это не --danger и не акцент: у схемы свой светофор, и в макете он ровно этих двух цветов. Каждый используется тремя альфами — заливка 15%, кольцо 50%, глиф и текст без прозрачности. */ --tone-warn: #ffcc00; --tone-warn-50: rgba(255, 204, 0, 0.5); --tone-warn-15: rgba(255, 204, 0, 0.15); --tone-ok: #34c759; --tone-ok-50: rgba(52, 199, 89, 0.5); --tone-ok-15: rgba(52, 199, 89, 0.15); /* ---------- Layout ---------- */ --design-w: 1680px; /* 90px @1440, 105 @1680 и дальше без изменений. Именно 90 при 1440 стоит во всех макетах сентября: контент 90..1350 и на главной, и на SEO Studio. Верхняя граница не случайная: 105 — это ровно 6.25vw при 1680, то есть при --design-w. Выше 1680 контейнер уже не растёт (max-width), и если поля продолжают расти, контент начинает СУЖАТЬСЯ: при 1920 было 1440 вместо 1470, а кегли к тому моменту на максимуме — на первом экране SEO Studio от этого переносилась пара кнопок и лид уезжал в три строки. С этой границей выше 1680 раскладка просто замирает. */ --pad-x: clamp(48px, 6.25vw, 105px); --header-h: 72px; /* ---------- Typography (fluid) ---------- */ /* Шкала подобрана так, чтобы уменьшение приходилось на широкие экраны, где контенту не хватало места, а на мобильных размеры остались прежними. Поэтому уменьшен vw-коэффициент (он работает в середине диапазона), а не весь размер целиком: сдвиг вида calc(clamp(...) - Npx) утянул бы за собой и минимум, а на 320px основной текст и так на границе читаемости. Ориентир — значения на 1440px, они указаны в комментариях. Максимум clamp() — это размер на самых широких экранах (от ~1500– 1700px и выше). Его нужно считать от прежнего максимума минус нужное уменьшение, а НЕ как vw-коэффициент на 1920px: во втором случае на широких мониторах шрифт получается больше прежнего. --fs-body и --fs-card позже подняли обратно на 2px: подзаголовки под заголовками и текст внутри карточек читались слишком мелко. Самые мелкие размеры (--fs-label/--fs-micro/--fs-pp-micro/ --fs-pp-tiny) не уменьшались. --fs-nav (шапка) исключён специально: шапка набрана крупнее остального сайта. */ /* Заголовки одинаковы на всех страницах: --fs-hero — H1 первого экрана, --fs-h2 — заголовок секции на всех остальных экранах. Отдельной, более мелкой шкалы для сервисных страниц больше нет. */ /* H1 чуть крупнее прежнего (решение Алекса от 31.08): 41px на 1440 вместо 39px. Макетные 48px пробовали и откатили — заголовки уходили в лишнюю строку, а «Кейсы», «Форматы работы» и «Проблемы» перестали влезать в 100vh. H2 и кнопки оставлены как были: в макетном кегле они выглядели хуже. Минимумы clamp не двигались: мобильная вёрстка собрана по макетам Reconversia_18/19 на 375px, там кегль уже согласован. Максимум 47px, а не 48px: на 48px заголовок «Контактов» на 1920 уходил в четвёртую строку. */ --fs-hero: clamp(29px, 2.85vw, 47px); /* 41px @1440, 47px @1650+ — Экран 1, H1 */ /* Прежний кегль H1 — для тех hero, где у заголовка нет запаса по строке: на «Продуктах» (текст заголовка самый длинный на сайте, и колонка под него взята из макета) прибавка даже в 0.5px уводила его с трёх строк на четыре. Такие заголовки остаются как были, остальные растут. */ --fs-hero-tight: clamp(29px, 2.72vw, 46px); /* 39px @1440, 46px @1920+ */ --fs-h2: clamp(25px, 2.42vw, 41px); /* 35px @1440, 41px @1920+ — заголовки секций, экраны 2+ */ --fs-title: clamp(17px, 1.43vw, 24px); /* 21px @1440, 24px @1920+ — Product name, Active layer */ --fs-body: clamp(14px, 1.27vw, 20px); /* 18px @1440, 20px @1920+ — Body, подзаголовки */ --fs-card: clamp(13px, 1.06vw, 16px); /* 15px @1440, 16px @1920+ — Тексты внутри карточек */ --fs-label: clamp(12px, 0.95vw, 15px); /* Маленькие лейблы, badges */ --fs-micro: clamp(11px, 0.85vw, 14px); /* Micro captions */ --fs-nav: clamp(14px, 1.05vw, 16px); /* Шапка: логотип, меню, поиск, «Войти» */ --fs-btn: clamp(12px, 1.02vw, 16px); /* 15px @1440, 16px @1920+ — Кнопки */ /* Не заголовок: осталось только на числовом значении в Live Console (technical). Для заголовков секций используется --fs-h2. */ --fs-h3: clamp(21px, 1.49vw, 26px); /* 21px @1440, 26px @1920+ */ /* Сервисные страницы (seo/onpage/offpage/technical/serm) и «Продукты»/«Услуги» изначально набирались по отдельным Figma- макетам с собственной, заметно мельче главной, шкалой — из-за этого один и тот же по смыслу текст (лид, описание карточки, заголовок панели) выглядел разного размера на разных страницах. fs-svc-*/fs-pp-* — алиасы на общую шкалу, единую для всего сайта; сами названия токенов оставлены, чтобы не переписывать все места использования в screens/*.css. */ --fs-svc-lead: var(--fs-body); --fs-svc-body: var(--fs-card); --fs-svc-title: var(--fs-title); /* Главная. В макетах сентября у неё своя шкала, отличная от общей: H1 крупнее, заголовки секций и весь текст — мельче. Кегли сняты с макетов обратным расчётом (ширина строки в Onest при известном размере ↔ ширина той же строки в PNG), поэтому в комментариях — ровно то, что в макете при окне 1440. Токены отдельные, а не правка общих: те же --fs-h2/--fs-body стоят на остальных страницах, которые по этим макетам не менялись. Когда до них дойдёт очередь, шкалы можно будет свести. Имя --fs-home-* осталось от первой такой страницы. Шкала уже не только у главной: по ней же сделана новая версия SEO Studio (services/seo-studio/) — там те же 48 / 42 / 32 / 16 / 14. */ --fs-home-hero: clamp(30px, 3.33vw, 56px); /* 48px @1440 — H1 первого экрана */ --fs-home-h2: clamp(24px, 2.22vw, 38px); /* 32px @1440, 24px на мобильном — заголовки экранов с правой панелью */ --fs-home-h2-wide: clamp(26px, 2.92vw, 50px); /* 42px @1440 — заголовки экранов во всю ширину (6 и 8) */ --fs-home-lead: clamp(14px, 1.11vw, 19px); /* 16px @1440 — лид под заголовком */ --fs-home-title: clamp(17px, 1.53vw, 26px); /* 22px @1440 — заголовок карточки */ --fs-home-body: clamp(12px, 0.97vw, 16px); /* 14px @1440 — текст внутри карточек */ --fs-home-micro: clamp(10px, 0.83vw, 14px); /* 12px @1440 — плашки-статусы */ /* 10px @1440 — только плотные схемы: карта поискового продукта на SEO Studio. Мельче на сайте ничего нет, для обычного текста этот размер не годится. */ --fs-seo-nano: clamp(9px, 0.69vw, 12px); /* 14px @1440 — текст в карточках технологий (экран 7 SEO Studio). Размер тот же, что у --fs-home-body, но нижняя граница ниже. У общего токена она 12px и включается на 1237px: текст перестаёт уменьшаться, а свёрнутая карточка продолжает сужаться вместе с окном, и самая длинная строка уходит на пятую строку — карточка становится выше активной. Здесь граница на 1020px, то есть за мобильным порогом, и в пределах десктопа размер строго линейный. */ --fs-seo-tech: clamp(9.9px, 0.97vw, 16px); /* 18.6px @1440 — надпись на кнопке SEO Studio. Кнопки этой страницы крупнее общих (--fs-btn, 15px): во всех макетах SEO Studio они 52px высотой, а размер получен обратным расчётом сразу по четырём кнопкам разной длины (ширина = ширина строки + 2 × 24.5). */ --fs-seo-cta: clamp(15px, 1.294vw, 22px); /* 13.5px @1440 — заголовок панели «КАРТА ПОИСКОВОГО ПРОДУКТА». Единственная надпись такого размера, зато без межбуквенного: ширина строки в макете (220px) сходится ровно на этой паре. */ /* Заголовок секции в МОБИЛЬНЫХ макетах услуговых страниц. Замерено обратным расчётом по шести строкам на двух страницах: SEO Studio дала 23.51 / 23.56 / 23.63, Web Studio — 23.78 / 23.68 / 23.72. Общий --fs-home-h2 даёт 24, и при нём строка «Позиции и трафик — не равно» на SEO уже не влезает в колонку 343: последнее слово срывается на вторую строку, чего в макете нет. */ --fs-svc-h2-mob: 23.5px; /* Список кейсов на шестом экране главной. Своя пара размеров: в макете заголовок кейса заметно крупнее общего --fs-home-body, а текст под ним, наоборот, мельче. Снято обратным расчётом по ширине чернил — «100% в TOP-1 Bing» дало 161px (18px/600), «Более 220% релевантного трафика» 322px, строка лида 355px (13px/400). На одном --fs-home-body оба были 14 и различались только насыщенностью. */ --fs-s6-case-title: clamp(15px, 1.25vw, 21px); /* 18px @1440 */ --fs-s6-case-text: clamp(11.5px, 0.90vw, 15px); /* 13px @1440 */ --fs-seo-panel: clamp(11px, 0.94vw, 16px); --fs-pp-hero: var(--fs-hero); --fs-pp-h2: var(--fs-h2); --fs-pp-title: var(--fs-title); --fs-pp-lead: var(--fs-body); --fs-pp-body: var(--fs-card); --fs-pp-label: var(--fs-label); --fs-pp-btn: var(--fs-btn); /* Микро-пилюли и капшены внутри мелких карточек — у главной нет аналога такого масштаба, оставлены отдельными размерами. */ --fs-pp-micro: clamp(7px, 0.56vw, 8px); /* Микро-пилюли (бейджи продуктов) */ --fs-pp-tiny: clamp(8px, 0.69vw, 10px); /* Подписи внутри мелких карточек (Услуги — Live Console) */ /* Декоративные мокапы-«скриншоты» интерфейса (hero «О нас»: карточка исследования и панель комментариев). У них своя, заметно мельче сайта, шкала: панель должна читаться как снимок чужого экрана, а не как текст страницы. Значения сняты с макета на 1440px. На общую шкалу их сажать нельзя — панель раздувается, перестаёт влезать в 100vh и внутри неё расходятся пустоты. */ --fs-mock-title: clamp(10px, 0.76vw, 13px); /* 11px @1440 — заголовок панели, табы */ --fs-mock-body: clamp(8px, 0.63vw, 11px); /* 9px @1440 — текст внутри панели */ --fs-mock-micro: clamp(7px, 0.56vw, 9px); /* 8px @1440 — лейблы блоков, время, подписи */ /* Футер — размеры сняты пиксель-в-пиксель с макета (нод 124:5493): vw-коэффициент подобран так, чтобы на 1440px (базовая ширина макета) получались ровно значения макета, а min совпадал с мобильным макетом (375px). Отдельная шкала здесь не создаёт расхождений между страницами — футер на всех один и тот же. */ --fs-ft-h2: clamp(24px, 2.222vw, 37px); /* 32px @1440 — заголовок футера */ --fs-ft-lead: clamp(15px, 1.25vw, 21px); /* 18px @1440 — заголовки аккордеона, кнопка */ --fs-ft-body: clamp(14px, 1.111vw, 19px); /* 16px @1440 / 14px @375 — описание, ссылки, копирайт */ --fs-ft-micro: clamp(12px, 0.833vw, 14px); /* 12px @1440 и @375 — каптион, мобильные ссылки */ /* ---------- Component sizes (fluid) ---------- */ /* Карточка шага на экране 3. Снято с макета «Экран 3. Как Reconversia находит решение»: 360x379 при окне 1440, внутренние поля 24. */ --card-w-slim: clamp(300px, 25vw, 420px); /* Веер причин на экране 2 главной. Ширина снята с макета: 360px при окне 1440 = 25vw. Высота НЕ задана — её считает fitFan() в main.js по самому длинному тексту. */ --card-w-s2: clamp(300px, 25vw, 420px); --card-h-slim: clamp(330px, 26.3vw, 440px); /* Карточка студии на экране 4. Снято с макета «Экран 4. Три студии»: 569x402 при окне 1440. Прежняя карточка продукта была шире — справа к ней примыкала панель превью, которой в новых макетах нет (вместе с ней ушёл и токен --card-w-preview). */ --card-w-studio: clamp(320px, 39.5vw, 600px); /* Максимум 470, а не 402 как на 1440: кегли растут до ~1650px, а высота карточки на прежнем максимуме 420 останавливалась раньше — контенту становилось тесно, и кнопка внизу сжималась. */ --card-h-studio: clamp(340px, 27.9vw, 470px); --card-w-layers-l: clamp(360px, 28vw, 460px); --card-w-layers-r: clamp(720px, 60vw, 1010px); --card-h-layers: clamp(445px, 35vw, 520px); --card-w-hero-vid: clamp(560px, 50vw, 800px); --card-h-hero-vid: clamp(360px, 32vw, 505px); --card-w-stack: clamp(440px, 42vw, 640px); /* Web — стек слоёв в hero */ --card-h-stack: clamp(394px, 38vw, 573px); --card-h-accordion: clamp(420px, 34vw, 492px); /* Web — карточка методологии/среды */ /* Высота ограничена и по vh: на невысоких экранах (1366×768) ряд вместе с заголовком выходил за высоту экрана. */ --card-h-envs: min(clamp(420px, 42vw, 536px), 55vh); /* Web — ряд карточек "Цифровые среды" */ --icon-feature: clamp(51px, 4.3vw, 64px); /* Плашка иконки в карточке шага (экран 3): 54x54 при окне 1440 — снято с макета. */ --icon-mech: clamp(44px, 3.75vw, 62px); --icon-tile: clamp(44px, 3.8vw, 54px); /* Web — иконка в тайле "Системное мышление" */ --gap-section: clamp(64px, 7vw, 120px); /* Вертикальный отступ между секциями внутр. страниц */ /* ---------- Radii ---------- */ --r-btn: 10px; --r-card: 15px; --r-card-lg: 20px; --r-hero: 25px; --r-pill: 3px; --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SFMono-Regular', 'Consolas', 'Menlo', monospace; /* Technical — лог-консоль */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* Поля по 16: в мобильных макетах карточка 343 при экране 375. */ @media (max-width: 640px) { :root { --pad-x: 16px; } }