/* ───────────────────────────────────────────────────────────────── Inter — четыре начертания, свои файлы, только woff2. Взято из Cornerstone → Globals → Fonts: имя семейства «Inter», запасное «sans-serif». Курсивных начертаний нет. Замер document.fonts на стенде: объявлено четыре, загружены все четыре, лишних нет. Остальные девять объявлений на странице — иконочные шрифты (восемь Font Awesome и dashicons); в этой теме их не будет: значки печатаются встроенным SVG. ───────────────────────────────────────────────────────────────── */ @font-face{ font-family:"Inter"; src:url("../assets/fonts/inter-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Inter"; src:url("../assets/fonts/inter-medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:"Inter"; src:url("../assets/fonts/inter-semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:"Inter"; src:url("../assets/fonts/inter-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } :root{ --font-body:"Inter",sans-serif; } /* font-display: в панели Cornerstone есть своя настройка Font Display, её значение на снимке обрезано. Здесь стоит swap — текст виден сразу запасным шрифтом и переключается по загрузке. Если на стенде задано другое, перенести оттуда. */ :root{ /* ───────────────────────────────────────────────────────────────── ПАЛИТРА — девять именованных цветов Theme Options staging.sambo.ru. Подтверждены трижды и независимо: манифест экспортов, набор Figma, сгенерированный CSS (ровно девять различных global-color). Ни один цвет не взят из div.studio. Каждый цвет объявлен тройкой каналов «R G B» и готовым rgb(). Тройка нужна там, где требуется прозрачность: background: rgb(var(--red-rgb) / .1) ───────────────────────────────────────────────────────────────── */ --red-rgb:218 40 27; /* @kind color */ /* Red */ --red:rgb(var(--red-rgb)); --blue-rgb:32 78 147; /* @kind color */ /* Blue */ --blue:rgb(var(--blue-rgb)); --blue-line-rgb:54 109 183; /* @kind color */ /* Blue Line */ --blue-line:rgb(var(--blue-line-rgb)); --blue-hover-rgb:138 177 230; /* @kind color */ /* Blue Hover */ --blue-hover:rgb(var(--blue-hover-rgb)); --black-rgb:0 0 0; /* @kind color */ /* Black */ --black:rgb(var(--black-rgb)); --white-rgb:255 255 255; /* @kind color */ /* White */ --white:rgb(var(--white-rgb)); --grey-bg-rgb:248 248 248; /* @kind color */ /* Grey Background */ --grey-bg:rgb(var(--grey-bg-rgb)); --grey-light-rgb:232 232 232; /* @kind color */ /* Grey Light */ --grey-light:rgb(var(--grey-light-rgb)); --grey-dark-rgb:128 128 128; /* @kind color */ /* Grey Dark */ --grey-dark:rgb(var(--grey-dark-rgb)); /* ───────────────────────────────────────────────────────────────── СМЫСЛОВЫЕ ЦВЕТА — измерены в состояниях, в покое их не видно. Вне палитры и вне Figma; по правилу «staging выигрывает там, где построено и принято» входят в систему как есть. ───────────────────────────────────────────────────────────────── */ --error-rgb:255 102 102; /* @kind color */ /* рамка поля с ошибкой */ --error:rgb(var(--error-rgb)); --error-surface-rgb:255 218 218; /* @kind color */ /* фон поля с ошибкой */ --error-surface:rgb(var(--error-surface-rgb)); --success-rgb:28 138 74; /* @kind color */ /* .copytip.is-copied */ --success:rgb(var(--success-rgb)); /* ───────────────────────────────────────────────────────────────── ПРОИЗВОДНЫЕ — ответы на замеры контраста, а не новые цвета. ───────────────────────────────────────────────────────────────── */ /* Grey Dark даёт на белом 3.95 — ниже порога AA 4.5 для обычного текста. Для поверхностей и рамок остаётся --grey-dark, для ТЕКСТА и значков берётся затемнённый вариант: 4.81 на белом, 4.53 на --grey-bg. */ --grey-text-rgb:114 114 114; /* @kind color */ --grey-text:rgb(var(--grey-text-rgb)); /* Текст плашки «ничего не найдено»: Grey Dark на Red@10 % давал 3.37. Затемнённый красный даёт 6.28 и читается заодно как часть плашки. */ --notice-text-rgb:168 31 21; /* @kind color */ --notice-text:rgb(var(--notice-text-rgb)); /* ── Цвета дисциплин. Спортивное и боевое — палитровые; песочного в палитре нет. Исходный #f79d2b давал 2.14 — ниже даже порога 3.0 для значимой графики. Тот же тон и насыщенность, светлота 32 %. */ --discipline-sport:var(--blue-line); /* 5.21 на белом */ --discipline-fight:var(--red); /* 4.88 */ --discipline-beach-rgb:157 91 6; /* @kind color */ /* 5.34, решено 20.09 */ --discipline-beach:rgb(var(--discipline-beach-rgb)); /* ───────────────────────────────────────────────────────────────── РОЛИ — в шаблонах используются только они, не цвета напрямую. ───────────────────────────────────────────────────────────────── */ /* Поверхности */ --surface-page:var(--white); --surface-muted:var(--grey-bg); --surface-notice:rgb(var(--red-rgb) / .1); --surface-error:var(--error-surface); --surface-highlight:rgb(var(--blue-hover-rgb) / .15); --surface-highlight-hover:rgb(var(--blue-hover-rgb) / .08); /* Текст */ --text-body:var(--black); --text-secondary:var(--grey-text); --text-on-dark:var(--white); --text-notice:var(--notice-text); --text-link:var(--grey-text); /* Текущая страница в навигации: не ссылка, но помечена цветом — так набраны «хлебные крошки» в билдере. */ --text-current:var(--blue-line); --text-link-hover:var(--blue-line); --text-link-strong:var(--blue); --text-link-strong-hover:var(--blue-hover); /* Рамки */ --border-subtle:var(--grey-light); --border-default:var(--grey-dark); --border-error:var(--error); /* Состояния */ --status-error:var(--error); --status-success:var(--success); /* Значки. Двухцветные (Duotone) печатаются двумя контурами: основной берёт currentColor, вторичный — этот токен. В Font Awesome то же делалось двумя слоями ::before/::after с прозрачностью 0.4 и парой переменных --fa-*; здесь это обычный токен, который можно заменить. */ --icon-secondary:currentColor; /* Фокус. Замер состояний: собственный слой контур не гасит, гасят его только базовые правила Pro, и все — с видимой заменой. */ --focus-ring:var(--blue-line); } :root{ /* ───────────────────────────────────────────────────────────────── ШКАЛА КЕГЛЕЙ — авторская, из Theme Options staging. Восемь ступеней clamp() с ростом по «vi» (логический аналог vw). Проверено: при корне 14px она воспроизводит 7 из 8 измеренных кеглей ТОЧНО на всех трёх ширинах (1440 / 768 / 375). При корне 16px не совпадает ни один — отсюда и решение по --root-size. Шкала переносится как есть: она построена и принята. ───────────────────────────────────────────────────────────────── */ --text-xm:clamp(0.79rem, 0.02vi + 0.78rem, 0.8rem); --text-sm:clamp(0.89rem, 0.21vi + 0.83rem, 1rem); --text-base:clamp(1rem, 0.48vi + 0.86rem, 1.25rem); --text-md:clamp(1.13rem, 0.83vi + 0.88rem, 1.56rem); --text-lg:clamp(1.27rem, 1.31vi + 0.87rem, 1.95rem); --text-xl:clamp(1.42rem, 1.94vi + 0.84rem, 2.44rem); --text-xxl:clamp(1.6rem, 2.76vi + 0.77rem, 3.05rem); /* ───────────────────────────────────────────────────────────────── НЕРАСТУЩИЙ КЕГЕЛЬ ДЛЯ ТЕКСТА АБЗАЦАМИ. Шкала выше растёт по ширине окна, и для заголовков это верно: они короткие, и на широком экране крупный заголовок читается как заголовок. Для абзаца — нет. `--text-base` идёт от 14px на телефоне до 17.5px на мониторе, то есть на четверть крупнее, и рядом с остальным сайтом текст карточки выглядит раздутым. Длина строки при этом не растёт вместе с кеглем: колонка карточки шире не становится, и на каждую строку попадает МЕНЬШЕ слов. Кегль вырос, а читать стало труднее — ровно наоборот к замыслу. Поэтому абзацы и подписи-ссылки берут этот токен, а не ступень шкалы. Заголовки остаются на шкале. ───────────────────────────────────────────────────────────────── */ --text-static-base:1rem; /* --text-xxm НЕ переносится. В исходной шкале он объявлен как clamp(0.7rem, -0.12vi + 0.74rem, 0.64rem): минимум БОЛЬШЕ максимума, то есть clamp() всегда возвращает 0.7rem (9.8px) и рост не работает. На сайте не используется ни разу. Если понадобится ступень ниже --text-xm, её нужно посчитать заново, а не чинить эту. */ /* ───────────────────────────────────────────────────────────────── ИНТЕРЛИНЬЯЖ — семь измеренных значений, сведённые к пяти ролям. 1.4 преобладает (41 объявление), следом 1.3 (15). ───────────────────────────────────────────────────────────────── */ --leading-flat:1; /* значки, однострочные подписи */ --leading-tight:1.2; --leading-heading:1.3; --leading-body:1.4; /* основной */ --leading-loose:1.65; /* мелкий текст подвала */ /* ── Начертания. Ровно четыре, все четыре загружаются и все в деле. */ --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; /* ── Трекинг. Три измеренных значения, нулевой — умолчание. */ --tracking-body:0em; --tracking-slight:0.02em; --tracking-notice:0.05em; --tracking-caps:0.1em; /* прописные: подписи кнопок и разделов */ /* ───────────────────────────────────────────────────────────────── СОСТАВНЫЕ РОЛИ — в шаблонах используются они, а не голые кегли. Соответствие заголовков ступеням взято из схем компонентов Atoms: H1 «600 - xxl», H2 и H3 «600 - xl». ───────────────────────────────────────────────────────────────── */ --type-h1:var(--weight-semibold) var(--text-xxl)/var(--leading-tight) var(--font-body); --type-h2:var(--weight-semibold) var(--text-xl)/var(--leading-heading) var(--font-body); --type-h3:var(--weight-semibold) var(--text-xl)/var(--leading-heading) var(--font-body); --type-h4:var(--weight-semibold) var(--text-lg)/var(--leading-heading) var(--font-body); --type-section:var(--weight-semibold) var(--text-md)/var(--leading-heading) var(--font-body); --type-body-lg:var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-body); --type-body:var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-body); --type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-body) var(--font-body); --type-caption:var(--weight-regular) var(--text-xm)/var(--leading-loose) var(--font-body); --type-button:var(--weight-medium) var(--text-sm)/var(--leading-flat) var(--font-body); } :root{ /* ───────────────────────────────────────────────────────────────── ОТСТУПЫ — одиннадцать ступеней в rem при корне 14px. Со стенда снят 81 различный отступ, но это артефакт единицы, а не 81 решение: билдер писал их в `em`, и одно значение размножалось местным кеглем. В объявлениях их всего 40 (21 em + 19 px). На эту шкалу ложатся 809 объявлений из 823 (98 %): средний сдвиг 1.1px, наибольший 6px. Сетка 4px проверена и отвергнута — 13 % точных попаданий против 49 % и сдвиг у 712 объявлений из 823. Единица — rem, не em: отступ не должен зависеть от кегля соседа. ───────────────────────────────────────────────────────────────── */ --space-1:0.25rem; /* 3.5px */ --space-2:0.375rem; /* 5.25 */ --space-3:0.5rem; /* 7 */ --space-4:0.75rem; /* 10.5 */ --space-5:1rem; /* 14 */ --space-6:1.5rem; /* 21 */ --space-7:2rem; /* 28 */ --space-8:3rem; /* 42 */ --space-9:4rem; /* 56 */ --space-10:5rem; /* 70 */ --space-11:6rem; /* 84 */ /* ── Роли. В шаблонах используются они. */ --gap-inline:var(--space-3); /* между значком и подписью */ --gap-stack:var(--space-4); /* между строками в блоке */ --gap-group:var(--space-6); /* между блоками внутри колонки */ --gap-grid:var(--space-6); /* между карточками */ --pad-field:var(--space-4); /* поля ввода */ --pad-card:var(--space-5); /* карточки документов и плашки */ --pad-block:var(--space-7); /* крупные блоки */ --section-y:var(--space-9); /* вертикальный ритм разделов */ --section-y-lg:var(--space-11); /* ── Поля кнопок. Взяты из схем компонентов Atoms как авторское решение: 12.5px / 32px у обычной кнопки, 10px / 32px у кнопки со значком. На шкалу не ложатся и остаются собственными значениями компонента. */ --pad-button-y:12.5px; --pad-button-y-icon:10px; --pad-button-x:32px; } :root{ /* ───────────────────────────────────────────────────────────────── СКРУГЛЕНИЯ — пять ступеней, в ПИКСЕЛЯХ. Не в rem: скругление не должно расти вместе с кеглем, это свойство формы, а не текста. Со стенда снято 427 ненулевых объявлений и 17 различных значений — дрейф, а не шкала: 10px, 11px и 12px стоят в одних и тех же карточках. Пять ступеней собирают 407 объявлений из 427 (95 %), наибольший сдвиг 2px. ───────────────────────────────────────────────────────────────── */ --radius-sm:6px; /* 6px, 0.35em, 0.5em, 3px, 2px — 141 объявление */ --radius-button:8px; /* 8px — 56. НЕ дрейф: записано в схемах всех трёх вариантов кнопки в Atoms, с включённым переключателем. Авторское решение с именем. */ --radius-md:12px; /* 12px, 11px, 10px — 146 */ --radius-lg:16px; /* 16px, 1em — 28 */ --radius-pill:9999px; /* 100px, 100em — 36 */ /* ── Роли */ --radius-field:var(--radius-sm); --radius-card:var(--radius-md); --radius-panel:var(--radius-lg); --radius-media:var(--radius-md); --radius-avatar:50%; /* флаги и гербы. В билдере стоит 5em, что считается от кегля картинки, а не от её ширины: круг получался случайно. */ } :root{ /* ───────────────────────────────────────────────────────────────── ТЕНИ — три уровня. Со стенда снято 37 ненулевых объявлений и почти два десятка различных значений: у каждого свой размыв и своя прозрачность, повторов почти нет. Это не набор уровней, а набор отдельных подборов, и полка собирается сильнее всех прочих. Семь объявлений из 37 — с прозрачностью 0, то есть не рисуют ничего: билдер объявлял невидимую тень, чтобы было что анимировать на :hover. Здесь это не значение, а переход `none → var(--shadow-md)`; подтверждено замером состояний. Тени чёрные, а не подкрашенные: так на стенде. ───────────────────────────────────────────────────────────────── */ --shadow-none:none; --shadow-sm:0 1px 3px rgb(var(--black-rgb) / .1); --shadow-md:0 2px 12px rgb(var(--black-rgb) / .15); --shadow-lg:0 4px 28px rgb(var(--black-rgb) / .22); /* Цветная тень — собрана из токена палитры, а не из литерала. */ --shadow-accent:2px 1px 3px rgb(var(--black-rgb) / .3); /* ── Не тени, хотя записаны через box-shadow. */ --ring-white:0 0 0 4px var(--white); /* белое кольцо вокруг элемента */ /* `1px 1px 2px 2px rgb(241,241,241)` со стенда сюда НЕ переносится: сплошное смещение без размыва — это имитация рамки. В новой теме это border, а сам #f1f1f1 подтягивается к --grey-light. */ /* Две тени страницы проекта записаны в em, а не в px: они растут вместе с кеглем блока, и на широком экране это видно. Переносятся как есть. */ --shadow-figure:0 0.65em 1.65em rgb(var(--black-rgb) / .16); /* карточка попечителя */ --shadow-quote:0 0.35em 0.85em rgb(var(--black-rgb) / .06); /* плашка цитаты и её стрелки */ /* ── Роли */ --shadow-card:var(--shadow-sm); --shadow-card-hover:var(--shadow-md); --shadow-panel:var(--shadow-md); --shadow-modal:var(--shadow-lg); --shadow-header:var(--shadow-md); } :root{ /* ───────────────────────────────────────────────────────────────── ДВИЖЕНИЕ — три длительности и ОДНА кривая. Кривая на стенде ровно одна на весь сайт: cubic-bezier(0.4, 0, 0.2, 1). Ни одного исключения. Длительностей снято семь: 300, 444, 500, 600, 650, 777, 1000 мс. 444 и 777 — умолчания Pro и не переносятся; 600 сводится к 650. ───────────────────────────────────────────────────────────────── */ --dur-fast:300ms; /* @kind other */ /* наведение, фокус */ --dur-base:500ms; /* @kind other */ /* раскрытие, смена состояния */ --dur-slow:650ms; /* @kind other */ /* модалки, крупные переходы */ --dur-slide:1000ms; /* @kind other */ /* слайдеры */ --ease:cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ /* ── Сдвиг при наведении. Замер состояний: translate(0,-2px) — девять случаев из двадцати пяти, остальные в пределах пары пикселей. */ --lift-y:-2px; /* @kind other */ /* ── Составной переход для интерактивных элементов. */ --transition-control:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease); /* @kind other */ } :root{ /* ───────────────────────────────────────────────────────────────── РАСКЛАДКА ───────────────────────────────────────────────────────────────── */ /* Контейнер. Из пресета Stack «Starter» на стенде: максимум 1320px, ширина 88 %. Замер подтверждает — 1320px встречается 155 раз. */ --container-max:1320px; --container-width:88%; /* Брейкпоинты Pro, взяты как есть (решение 20.09.2026). На стенде восемь условий @media сводятся к четырём границам. */ --breakpoint-sm:480px; --breakpoint-md:767px; --breakpoint-lg:979px; --breakpoint-xl:1200px; /* Толщины рамок — три значения. 1px покрывает 1356 объявлений. */ --border-hairline:1px; --border-thick:2px; --border-heavy:3px; /* Контур фокуса: живой на стенде, смещение 2px. */ --focus-ring-width:2px; --focus-ring-offset:2px; /* ───────────────────────────────────────────────────────────────── СЛОИ — единственная полка, которую пришлось назначить, а не измерить: в сгенерированном CSS z-index осмысленно не задаётся. Шаг 100 — чтобы вставить слой между существующими можно было без пересчёта всей шкалы. ───────────────────────────────────────────────────────────────── */ --z-base:0; /* @kind other */ /* поток, назначения макетов */ --z-sticky:100; /* @kind other */ /* липкая шапка */ --z-dropdown:200; /* @kind other */ /* выпадающие меню, фильтры */ --z-overlay:300; /* @kind other */ /* затемнение под модалкой */ --z-modal:400; /* @kind other */ /* модалки, редакции документов */ } /* ───────────────────────────────────────────────────────────────── Корень 14px — основание всей системы. Именно при нём авторская шкала clamp() воспроизводит семь из восьми измеренных кеглей точно на всех трёх ширинах, и именно в нём посчитаны одиннадцать ступеней отступов. При 16px не совпадает ни один кегль. ───────────────────────────────────────────────────────────────── */ html{font-size:14px} *,*::before,*::after{box-sizing:border-box} body{ margin:0; font:var(--type-body); color:var(--text-body); background:var(--surface-page); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4,p,figure{margin:0} a{ color:var(--text-link); text-decoration:none; transition:color var(--dur-fast) var(--ease); } a:hover{color:var(--text-link-hover)} /* Контур фокуса. Замер состояний: собственный слой его нигде не гасит — гасят только базовые правила Pro, и все с видимой заменой. В этой теме кольцо есть всегда. */ :focus-visible{ outline:var(--focus-ring-width) solid var(--focus-ring); outline-offset:var(--focus-ring-offset); } img,svg{display:block;max-width:100%} /* Значки красятся из CSS: SVG печатается без собственного fill. */ .icon{width:1em;height:1em;fill:currentColor} .icon .secondary{fill:var(--icon-secondary,currentColor);opacity:.4} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} }