/* ============================================================ base.css — базовые стили страницы и проектные дополнения. Всё, чего нет в выгрузке Figma, живёт здесь под префиксом --sc-* и помечено как согласуемое: если значение станет системным, его место в tokens.css, а отсюда оно уйдёт. ============================================================ */ html, body { margin: 0; } /* Переходы по якорям внутри страницы — плавные. Шапка фиксированная, поэтому у секций с якорем свой запас сверху, иначе заголовок уезжает под неё. */ html { scroll-behavior: smooth; } section[id] { scroll-margin-block-start: var(--sc-anchor-offset); } /* ---------- Стыки светлых блоков (2026-09-28) ---------- Когда два соседних блока одного светлого фона, их поля складывались: 160 снизу у первого + 160 сверху у второго = 320 пустоты (и 224 у плит с полем 64). На таком стыке остаётся один шаг — поле первого блока, --section-padding-y (160, на телефоне 80). Стыки со сменой фона (тёмные полосы, «Історія» после «рішення») не трогаем: там два поля читаются как поля двух разных блоков. Порядок секций — как на лендинге. */ .sc-cdata + .sc-scenarios, .sc-cdata + .sc-usg, .sc-cdata + .sc-cases, /* «До — Після» на месте скрытых «Сценаріїв» */ .sc-cases + .sc-ambassador, .sc-usg + .sc-kit, .sc-usg + .sc-ambassador, .sc-scenarios + .sc-ambassador, .sc-cases + .sc-kit, .sc-reviews + .sc-saving, .sc-notfit + .sc-neo { padding-block-start: 0; } /* Плиты (амбассадор, нейро-блок): их нижнее поле уходит, если ниже светлый блок со своим полным полем */ .sc-ambassador:has(+ .sc-cases), .sc-ambassador:has(+ .sc-usg), .sc-neo:has(+ .sc-usg) { padding-block-end: 0; } /* Перед тёмной полосой — полный шаг светлого поля, как у welcome kit перед «Наукой»: 64 у плиты читались как недорезанный край (нейро-блок → FAQ, 2026-09-29) */ .sc-neo:has(+ .sc-faq) { padding-block-end: var(--section-padding-y); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--background); color: var(--foreground); font: 400 var(--p-size) / var(--p-lh) var(--font-sans); -webkit-font-smoothing: antialiased; } /* ============================================================ Ширина полосы · решение 2026-09-04 Три слоя: окно (фон и волосяные линии) → полоса --page-width, центрированная → контент с полями --page-margin-x. Значения перекрывают выгрузку Figma: там --page-margin-x фиксированные 80/20 без промежуточного поведения. Когда решение попадёт в переменные Figma, эти три строки уйдут отсюда. ============================================================ */ :root { --page-width: 1440px; /* запас под фиксированную шапку при переходе по якорю */ --sc-anchor-offset: var(--sc-space-24); /* 96 */ /* Липкая колонка (зачіпка B02 v3, интро B04a) висит ниже шапки: на этом расстоянии она не липнет к хедеру и читается как часть полосы. --header-h проставляет header.js по факту высоты шапки. */ --sc-sticky-top: calc(var(--header-h, 80px) + var(--sc-space-28) + var(--sc-space-16)); --page-margin-x: clamp(20px, 5.56vw, 80px); /* 80/1440 */ /* Поле округляем до целого пикселя: на дробном поле кромки и волосяные линии попадают между пикселями и рендерятся полупрозрачными. Строка ниже перекрывает предыдущую там, где round() поддержан. */ --page-margin-x: round(clamp(20px, 5.56vw, 80px), 1px); /* Гаттер полосы — 24 на 1440. В выгрузке --grid-gap означает другие 16, поэтому имя своё, чтобы не ломать места, где нужны именно 16. */ --sc-gutter: clamp(12px, 1.67vw, 24px); /* 24/1440 */ /* Воздух между краем окна и полосой; до 1440 равен нулю. Процент, а не 100vw: vw считает вместе с полосой прокрутки и уводит всю раскладку на её половину. Цена процента: считать можно только там, где содержащий блок — всё окно, то есть на самой секции или на её прямом блочном потомке. Внутри колонок сетки процент означает уже колонку. */ --sc-band: round(max(0px, calc((100% - var(--page-width)) / 2)), 1px); /* Поле от края окна до контента */ --sc-pad-x: calc(var(--sc-band) + var(--page-margin-x)); } /* Единственный брейкпоинт проекта */ @media (max-width: 640px) { :root { --page-margin-x: 20px; } /* Ручные переносы размечены под десктопную строку: на узком экране отключаем их везде — строку ломает сама ширина. Правило 2026-09-11; до этого касалось только заголовков, и переносы в лидах доживали до телефона. Условие разметки: перед каждым
в тексте обязателен пробел — иначе с выключенным переносом слова склеятся. */ br { display: none; } } :root { /* ---------- мера строки ---------- Правило Impeccable: проза 45–75ch. В макетах строки до 114ch. */ /* Чернила для мелкого текста на светлых бэндах и на стекле. CLAUDE.md предписывает здесь --neutral-600, но в выгрузке Figma такой роли нет: --muted-foreground на светлом даёт 3.2:1. */ --sc-neutral-600: #4A453F; /* Самый мелкий текст — подписи авторства фото (2026-09-25). В выгрузке Figma меньше 12 ничего нет — согласуемое значение, при появлении токена заменить */ --sc-fine-size: 10px; --sc-fine-lh: 14px; --sc-weight-medium: 500; /* «Smart Age» в названии журнала на лендинге (B17) */ --sc-weight-bold: 700; /* подписи переключателей: в макете Onest Bold */ --sc-weight-xlight: 200; /* «Journal» в шапке журнала: Onest ExtraLight */ --sc-weight-light: 300; /* счётчик в переключателях: в макете Onest Light */ /* ПРОБА 2026-09-11: все линии кита были на 0.5 — разделители (--hairline в tokens.css) и кромки контейнеров, контролов и кнопок (эта переменная). 2026-09-14 кромки подняты до 0.7; --hairline остаётся 0.5, пока значение не поменяют в Figma и не перевыгрузят tokens.css (его правка запрещена). Раньше кромки писались литералом 1px в каждой секции; на время пробы они собраны сюда, откат — поставить здесь 1px и вернуть --hairline. Фокус-рамка (outline 2px) и кольцо активной миниатюры B06 не участвуют: это не линии вёрстки, а индикаторы состояния. */ --sc-line: 0.7px; /* 2026-09-14: с 0.5 подняли до 0.7 — на ретине полулиния местами пропадала совсем */ /* Тонкая прожилка внутри карточек: половина кромки. Решение 2026-09-07 — исключение из правила «все линии 1px»: на плотных списках в карточке полная кромка спорит с текстом. Снаружи карточек по-прежнему --hairline. */ --sc-hairline-fine: 0.5px; /* Ревизия 2026-09-14: общие размеры, которые до этого писались литералами в секциях. Чип — 6/10 из макета chip · category. Фокус-рамка одна на весь кит: 2px кольцо с отступом 3, у полей — кольцо 3px тенью. Полоса прогресса — 2px везде (слайдеры, чтение статьи). */ --sc-chip-pad: var(--sc-space-1_5) var(--sc-space-2_5); --sc-focus-w: var(--sc-space-0_5); --sc-focus-offset: 3px; --sc-field-ring-w: 3px; --sc-progress-h: var(--sc-space-0_5); /* Кнопка формы: расстояние от последнего поля до кнопки. Шаг колонки управления из макета — --control-gap (12 / 10), тот же, что между полем и кнопкой в ряду (B11, подписка блога). Решение 2026-09-12: было --card-padding (28), кнопка отрывалась от поля. См. правило ниже. */ --sc-form-cta-gap: var(--control-gap); /* Воздух вокруг фото: до и после снимка — не меньше 80 на любом экране. См. сквозное правило ниже. */ --sc-media-gap: var(--sc-space-20); --sc-measure: 65ch; --sc-measure-narrow: 55ch; /* ---------- движение ---------- */ --sc-ease: cubic-bezier(0.4, 0, 0.2, 1); --sc-dur-fast: 160ms; --sc-dur: 280ms; --sc-dur-slow: 600ms; --sc-dur-arrow: 320ms; /* задано в описании Icon/ArrowTurn */ --sc-ease-out: cubic-bezier(0, 0, 0.2, 1); /* торможение к концу, без разгона */ --sc-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* выраженное торможение: быстрый старт, долгий доезд (промо в статье) */ /* Синий конверсионных кнопок (B11 и далее). В выгрузке 2026-09-04 синий остался только фоновым --accent, отдельной роли под кнопку нет — значение взято из макета, согласовать и завести токен. */ /* ---------- Фирменный синий ---------- Шкала blue/* есть в переменных Figma, но в выгрузку 2026-09-04 не попала: там синий остался только в --accent (blue/900) и --ring (blue/500). Держим здесь ступени, которые реально используются. */ --sc-blue-200: #C3DBF2; --sc-blue-300: #96BFE7; --sc-blue-600: #12559F; --sc-blue-400: #5D97D5; --sc-blue-500: #2E6EBF; --sc-blue-700: #00448B; --sc-blue-800: #083868; /* Чорнильно-синій: blue-800 навпіл із глибоким чорним, ~#07213B. «Ніч» у «рішенні» B02v3 і фон промо Face Control у статтях (у макеті — --promo #07213b). */ --sc-ink-blue: color-mix(in srgb, var(--sc-blue-800) 55%, var(--sc-ink-deep)); --sc-action: var(--sc-blue-500); --sc-action-foreground: #FFFFFF; /* Круглые метки таймлайна. Блочный радиус системно нулевой (--radius). */ --sc-round-full: 999px; /* ---------- сетка ---------- Правило квадрата: 12 колонок, поля 80, гаттер 24 (колонка 84.67). NB: --grid-gap в токенах равен 16 — это другой зазор, не колоночный. */ --sc-grid-columns: 12; --sc-grid-gutter: var(--sc-space-6); /* 24 */ /* Button/Block из макета — плита 320×76 с подписью и стрелкой. Один размер на все блоки (первый экран, сценарии, «Історія», FAQ): раньше повторялся в каждом */ --sc-cta-block-w: 320px; --sc-cta-block-h: 76px; /* Щель между плитками с квадратным кадром (лента журнала, врачи, филиалы, плитки меню) — узкая, как у OneSkin (правка 2026-10-04; было --grid-gap 16). Согласуемое; при переходе в колонку на телефоне — разрядка секции. */ --sc-tile-gap: var(--sc-space-1); /* 4 */ /* От заголовка секции до её содержимого — одно расстояние на весь журнал, статью и страницу напрямку (2026-10-05). 56, на телефоне 32 — следует за --section-gap. Блоки лендинга держат свои отбивки из Figma. */ --sc-head-gap: var(--section-gap); /* Полоса хлібних крихт — одна высота на весь сайт: главная журнала, статьи, страницы напрямку и лікаря (2026-10-11). Было: 70 в блоге, 50 на напрямку. */ --sc-crumbs-h: 70px; /* При такой посадке текст плитки не подходит к соседней ближе чем на 5% её ширины: строка занимает не больше 95% (правка 2026-10-05). Процент в padding считается от ширины плитки; волосяная линия меты — во всю ширину. */ --sc-tile-text-inset: 5%; /* было 10% (2026-10-05) */ /* ---------- прозрачности ---------- Для текста и накладок поверх фото и видео: скримы, hairline на видео. */ --sc-white-alpha-10: rgb(255 255 255 / 10%); --sc-white-alpha-15: rgb(255 255 255 / 15%); --sc-white-alpha-20: rgb(255 255 255 / 20%); --sc-white-alpha-40: rgb(255 255 255 / 40%); --sc-white-alpha-60: rgb(255 255 255 / 60%); --sc-white-alpha-80: rgb(255 255 255 / 80%); --sc-black-alpha-0: rgb(16 14 12 / 0%); --sc-black-alpha-20: rgb(16 14 12 / 20%); --sc-black-alpha-40: rgb(16 14 12 / 40%); --sc-black-alpha-50: rgb(16 14 12 / 50%); --sc-black-alpha-60: rgb(16 14 12 / 60%); --sc-black-alpha-80: rgb(16 14 12 / 80%); /* Скрим подписки блога: accent 68% поверх видео, как в макете VM/Subscribe */ /* Скрим плиты неофиброліфтинга: цвет задан в макете заливкой поверх фото */ --sc-navy-alpha-60: rgb(11 43 76 / 60%); /* Глубокий чёрный для полос вокруг тёмных фото. --background в inverse (#100E0C) светлее кадров: рядом с ними полоса читалась как подложка. Замер по снимку B13 — углы #010101…#060606 (2026-09-13). */ --sc-ink-deep: #050505; /* ---------- шкала отступов ×4 ---------- В выгрузке её нет, а вертикальный ритм секций на неё опирается. */ --sc-space-0_5: 2px; --sc-space-1: 4px; --sc-space-1_5: 6px; --sc-space-2: 8px; --sc-space-2_5: 10px; --sc-space-3: 12px; --sc-space-4: 16px; --sc-space-3_5: 14px; --sc-space-5: 20px; --sc-space-6: 24px; --sc-space-7: 28px; --sc-space-8: 32px; --sc-space-10: 40px; --sc-space-12: 48px; --sc-space-14: 56px; --sc-space-16: 64px; --sc-space-20: 80px; --sc-space-24: 96px; --sc-space-28: 112px; } /* ============================================================ Заплата к выгрузке 2026-09-04 — снять, когда поправят в Figma. В tokens.css --primary и --primary-foreground объявлены в :root как алиасы на --foreground / --background. Такое значение вычисляется в точке объявления, поэтому в inverse-секциях они остаются цветами светлой темы и кнопка не инвертируется. Перечисляем их здесь ещё раз — в контексте inverse они пересчитаются с уже переопределённым --foreground. Кромку (--border, --input, --field-border) отсюда убрали: с выгрузки 2026-09-04 у неё в inverse свои значения в tokens.css, и повтор здесь их перекрывал. ============================================================ */ [data-theme="inverse"] { --primary: var(--foreground); --primary-foreground: var(--background); } /* ============================================================ Наведение на залитую кнопку · сквозное правило 2026-09-12 (пересчитано 2026-09-13 под чёрную заливку) У кнопки с заливкой --primary ховер меняет только фон, текст остаётся --primary-foreground. Значит ступень фона должна идти в ту же сторону, что и сама кнопка: на светлой теме кнопка чёрная со светлым текстом — уходим к мягкому углю; в inverse кнопка светлая с тёмным текстом — тёмная заливка съела бы текст, поэтому берём тёплую светлую ступень. Секции не пишут цвет руками: только var(--sc-primary-hover). ============================================================ */ /* Значение одно и то же в обеих темах — --secondary-foreground сам переворачивается вместе с темой (светлая #1A1815 — уголь, inverse #F2EEEA — тёплый беж). Строку приходится повторить в inverse не по ошибке: var() в :root вычисляется на :root, и без повтора в тёмной секции ховер остался бы углём под светлой кнопкой — тот же случай, что с --primary выше. */ :root { --sc-primary-hover: var(--secondary-foreground); } [data-theme="inverse"] { --sc-primary-hover: var(--secondary-foreground); } /* ============================================================ Кнопка после текста · сквозное правило 2026-09-06 Между текстом и кнопкой под ним — --card-padding (28 на десктопе, 20 на мобильном). Если колонка уже даёт свой шаг, секция объявляет --sc-cta-gap, и здесь добавляется только недостающее. Блоки, где кнопку отбивает разрядка секции (B02, B13, футер, хиро), в список не входят: там расстояние задано макетом и больше 28. Кнопки форм живут в своих мобильных блоках — на десктопе они стоят в ряду с полями, а не под ними. ============================================================ */ .sc-journey__cta, .sc-ambassador__cta, .sc-kit__cta, .sc-science__cta, .sc-faq__cta, .sc-neo__cta, .sc-scenarios__cta { margin-block-start: calc(var(--card-padding) - var(--sc-cta-gap, 0px)); } /* ============================================================ Кнопка после поля формы · сквозное правило 2026-09-08 Когда кнопка стоит под последним полем, расстояние до неё — --sc-form-cta-gap (= --control-gap, 12 / 10 — значение из макета). Если колонка формы уже даёт свой шаг, секция объявляет --sc-form-gap, и здесь добавляется только недостающее. Где кнопка стоит в ряд с полем (десктопные B11, подписка блога, строка футера), правило не работает: там шаг ряда задаёт --control-gap. Мобильные версии этих форм становятся колонкой и правило подхватывают — у себя в медиазапросе, потому что на десктопе оно им вредит. ============================================================ */ .vm-article__subscribe-cta, .sc-modal__actions { margin-block-start: calc(var(--sc-form-cta-gap) - var(--sc-form-gap, 0px)); } /* ============================================================ Стекло · уточнение к .is-glass из tokens.css (2026-09-14) В выгрузке у плиты равномерная кромка white 40 % и размытие 28. На светлом ровном фоне это не читается: белая кромка на светлом невидима, а размывать под плитой нечего — подложка почти однотонная. Настоящая панель читается краем и тоном: блик по верхней и левой кромке, притенение по нижней и правой, косой отблеск по поверхности. Тени наружу нет (2026-09-14): плита не парит над фоном, она в нём — толщину выдаёт кромка, а не отрыв. Токены не трогаем — правим только модификатор. ============================================================ */ :root { --sc-glass-edge-shade: rgb(16 14 12 / 12%); /* нижняя и правая кромка */ --sc-glass-sheen-hi: var(--sc-white-alpha-20); /* верх косого отблеска */ --sc-glass-sheen-mid: var(--sc-white-alpha-10); --sc-glass-sheen-lo: rgb(255 255 255 / 0%); } [data-theme="inverse"] { --sc-glass-edge-shade: rgb(0 0 0 / 35%); --sc-glass-sheen-hi: var(--sc-white-alpha-15); --sc-glass-sheen-mid: var(--sc-white-alpha-10); } .is-glass { box-shadow: /* блик по верхней и левой кромке — свет ложится сверху слева */ inset 0 var(--glass-edge-width) 0 0 var(--glass-edge), inset var(--glass-edge-width) 0 0 0 var(--glass-edge), /* притенение по нижней и правой — оно и выдаёт толщину стекла */ inset 0 calc(-1 * var(--glass-edge-width)) 0 0 var(--sc-glass-edge-shade), inset calc(-1 * var(--glass-edge-width)) 0 0 0 var(--sc-glass-edge-shade); /* Косой отблеск по поверхности: без него плита читается плоской заливкой. Цвет плиты приходит из tokens.css, здесь только слой. */ background-image: linear-gradient( 135deg, var(--sc-glass-sheen-hi) 0%, var(--sc-glass-sheen-mid) 32%, var(--sc-glass-sheen-lo) 58%, var(--sc-glass-sheen-mid) 100%); /* Только размытие. Насыщенность и яркость под стеклом не трогаем: на синем фоне saturate уводил плиту в голубой, и она читалась чужим тоном, а не тем же фоном за стеклом (правка 2026-09-14). */ -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); } @media (prefers-reduced-transparency: reduce) { .is-glass { box-shadow: inset 0 0 0 var(--glass-edge-width) var(--border); background-image: none; } } /* ============================================================ Числовая выноска · сквозное правило 2026-09-13 Цифра и подпись под ней выключены влево. По центру подписи разной длины пляшут относительно числа, а сама колонка цифр не совпадает с осью текста секции. Секции своей выключки не задают — правило одно. ============================================================ */ .sc-clinical__stat, .sc-cdata__stat, .sc-science__stat { align-items: flex-start; text-align: start; } /* ============================================================ Воздух вокруг фото · сквозное правило 2026-09-12 До и после фотографии остаётся не меньше --sc-media-gap (80). На мобильном значение не уменьшается: снимок должен читаться как пауза в тексте, а не как ещё один абзац. Если колонка уже даёт свой шаг (flex-gap родителя), секция объявляет --sc-media-own-gap, и здесь добавляется только недостающее. ============================================================ */ .sc-story__photo, .vm-article__figure { margin-inline: 0; margin-block: calc(var(--sc-media-gap) - var(--sc-media-own-gap, 0px)); } /* Блок после фото не добавляет свой шаг: воздух задаёт снимок. Два класса в селекторе — чтобы правило перебивало ритм секции (файлы секций подключаются после base.css) */ .sc-story__part > .sc-story__photo + *, .vm-article__main > .vm-article__figure + * { margin-block-start: 0; } /* ============================================================ Типографические роли Были в старом tokens.css; в выгрузке 2026-09-04 их нет, поэтому держим здесь. Имена с префиксом — против каскада темы virtus. ============================================================ */ .sc-t-display { font: var(--display-weight) var(--display-size) / var(--display-lh) var(--font-headings); letter-spacing: var(--display-ls); } .sc-t-stat { font: var(--stat-weight) var(--stat-size) / var(--stat-lh) var(--font-headings); letter-spacing: var(--stat-ls); } .sc-t-h1 { font: var(--h1-weight) var(--h1-size) / var(--h1-lh) var(--font-headings); letter-spacing: var(--h1-ls); } .sc-t-h2 { font: var(--h2-weight) var(--h2-size) / var(--h2-lh) var(--font-headings); letter-spacing: var(--h2-ls); } .sc-t-h3 { font: var(--h3-weight) var(--h3-size) / var(--h3-lh) var(--font-headings); letter-spacing: var(--h3-ls); } .sc-t-caption { font: var(--caption-weight) var(--caption-size) / var(--caption-lh) var(--font-headings); letter-spacing: var(--caption-ls); text-transform: uppercase; } .sc-t-lead { font: 400 var(--p-large-size) / var(--p-large-lh) var(--font-sans); } .sc-t-body { font: 400 var(--p-size) / var(--p-lh) var(--font-sans); } .sc-t-small { font: 400 var(--p-small-size) / var(--p-small-lh) var(--font-sans); } .sc-t-mini { font: 400 var(--p-mini-size) / var(--p-mini-lh) var(--font-sans); } .sc-t-fine { font: 400 var(--sc-fine-size) / var(--sc-fine-lh) var(--font-sans); } /* подписи авторства фото */ /* ============================================================ Медиа Все изображения проекта — квадраты: пропорцию держит контейнер, картинка кроется. Радиуса нет нигде. ============================================================ */ .sc-media--square { display: block; aspect-ratio: 1; overflow: hidden; background: var(--muted); } .sc-media--square img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } /* Подпись, нужная скринридеру, но не показанная в макете */ .sc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }