/* Общий каркас дизайн-системы: одинаков для всех тем. Тема (css/theme-*.css) задаёт шрифты, начертания, интерлиньяж и цвета; каркас — шкалы и роли. Подключение в продукте: core.css + один theme-*.css, . */ /* ---- Типографика: шкала размеров (TYP-001) ---------------------------------- 8 ступеней. Крупные — плавные: минимум на ширине 390 px, максимум на 1280 px, между ними линейно. Формула: clamp(min, min + (max − min) · (100vw − 390px) / 890, max). */ :root { --fs-xs: 12px; /* метки капсом, сноски */ --fs-sm: 14px; /* подписи, таблицы, плотные интерфейсы */ --fs-md: 16px; /* текст интерфейса */ --fs-lg: 18px; /* текст статей, h4 */ --fs-xl: clamp(19px, calc(19px + 3 * ((100vw - 390px) / 890)), 22px); /* h3, крупный абзац */ --fs-2xl: clamp(22px, calc(22px + 6 * ((100vw - 390px) / 890)), 28px); /* h2 */ --fs-3xl: clamp(28px, calc(28px + 12 * ((100vw - 390px) / 890)), 40px); /* h1 */ --fs-4xl: clamp(36px, calc(36px + 28 * ((100vw - 390px) / 890)), 64px); /* обложка, крупные цифры */ --measure: 68ch; /* предельная длина строки текста (TYP-004) */ } /* ---- Роли текста (TYP-002). Классы не зависят от тега: семантика — тегом, вид — классом ---- */ .t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6 { font-family: var(--ff-heading); font-weight: var(--fw-heading); color: var(--color-text); letter-spacing: var(--ls-heading); text-transform: var(--tt-heading, none); margin: 0; } .t-display { font-size: var(--fs-4xl); line-height: var(--lh-heading); } .t-h1 { font-size: var(--fs-3xl); line-height: var(--lh-heading); } .t-h2 { font-size: var(--fs-2xl); line-height: var(--lh-subheading); } .t-h3 { font-size: var(--fs-xl); line-height: var(--lh-subheading); } .t-h4 { font-size: var(--fs-lg); line-height: var(--lh-subheading); } .t-h5 { font-size: var(--fs-md); line-height: var(--lh-subheading); } .t-h6 { font-size: var(--fs-sm); line-height: var(--lh-subheading); text-transform: uppercase; letter-spacing: var(--ls-overline); } /* заголовок раздела страницы (не статьи): вид задаёт тема — у evstygney капс, как на сайте (TYP-006) */ .t-section { text-transform: var(--tt-section, none); letter-spacing: var(--ls-section, var(--ls-heading)); } .t-lead, .t-body, .t-body-lg, .t-small, .t-caption, .t-overline { font-family: var(--ff-text); font-weight: var(--fw-text); color: var(--color-text); letter-spacing: var(--ls-text); margin: 0; } .t-lead { font-size: var(--fs-xl); line-height: 1.4; } /* абзац: плотный интерлиньяж подзаголовка ему не подходит */ .t-body { font-size: var(--fs-md); line-height: var(--lh-text); } .t-body-lg { font-size: var(--fs-lg); line-height: var(--lh-prose); } .t-small { font-size: var(--fs-sm); line-height: var(--lh-text); } .t-caption { font-size: var(--fs-xs); line-height: 1.4; color: var(--color-text-muted); } .t-overline { font-size: var(--fs-xs); line-height: 1.4; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--color-text-muted); } .t-mono { font-family: var(--ff-mono); font-size: var(--fs-sm); line-height: 1.5; letter-spacing: 0; } /* ---- Длинный текст: статьи и описания (TYP-003) ---- */ .t-prose { font-family: var(--ff-text); font-weight: var(--fw-text); font-size: var(--fs-lg); line-height: var(--lh-prose); letter-spacing: var(--ls-text); color: var(--color-text); max-width: var(--measure); } .t-prose > * { margin: 0 0 1.1em; } .t-prose > :last-child { margin-bottom: 0; } .t-prose h2, .t-prose h3, .t-prose h4 { font-family: var(--ff-heading); font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); line-height: var(--lh-subheading); margin: 1.6em 0 .6em; } .t-prose h2 { font-size: var(--fs-2xl); } .t-prose h3 { font-size: var(--fs-xl); } .t-prose h4 { font-size: var(--fs-lg); } .t-prose ul, .t-prose ol { padding-left: 1.4em; } .t-prose li { margin: .3em 0; } .t-prose li::marker { color: var(--color-text-muted); } .t-prose strong, .t-prose b { font-weight: var(--fw-strong); } .t-prose em { font-style: italic; } .t-prose code { font-family: var(--ff-mono); font-size: .85em; background: var(--color-bg-muted); padding: .1em .35em; border-radius: 4px; } .t-prose blockquote { padding: .1em 0 .1em 1em; border-left: 4px solid var(--color-border-brand); color: var(--color-text-muted); } .t-prose hr { border: 0; border-top: 1px solid var(--color-border); margin: 2em 0; } /* ---- Ссылки (TYP-005) ---- */ .t-prose a, a.t-link { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } .t-prose a:hover, a.t-link:hover { color: var(--color-link-hover); text-decoration-color: currentColor; } .t-prose a:focus-visible, a.t-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; } .t-prose a:visited, a.t-link:visited { color: var(--color-link); } /* ---- Отступы и размеры (SPC-*) ------------------------------------------------ Шкала (SPC-001): шаг 2 px до 20, дальше 24, 28, 32, 40, 48, 64, 80. Подобрана так, чтобы текущие продукты менялись минимально: 87% их отступов уже на шкале, средний сдвиг 0,3 px (решение Егора 18.09: «чтобы минимально отличалось»). Имя ступени = её значение в px. Значения вне шкалы не используются. Исключение (SPC-005): 1–3 px для подгонки тонких линий и оптических сдвигов — это не отступы. */ :root { --space-0: 0px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-80: 80px; /* роли отступов (SPC-002): продукты берут роли, шкалу — только если роли нет */ --gap-inline: var(--space-8); /* между словом и знаком, между кнопками в ряд */ --gap-stack: var(--space-16); /* между блоками внутри карточки или формы */ --gap-grid: var(--space-20); /* между карточками в сетке */ --pad-control-x: var(--space-20); /* внутри кнопки и поля по горизонтали */ --pad-card: var(--space-20); /* внутри карточки */ --gap-section: clamp(40px, calc(40px + 24 * ((100vw - 390px) / 890)), 64px); /* между разделами страницы */ --page-gutter: clamp(16px, calc(16px + 4 * ((100vw - 390px) / 890)), 20px); /* поля страницы: 16 на телефоне, 20 как в продуктах */ /* высоты элементов управления (SPC-003) */ --control-sm: 36px; /* плотные интерфейсы: таблицы, фильтры админок */ --control-md: 44px; /* по умолчанию: кнопки, поля, выпадающие списки */ --control-lg: 56px; /* главное действие на телефоне: как кнопки опроса */ --hit-min: 44px; /* минимальная область нажатия на сенсорном экране (SPC-004) */ } /* Область нажатия больше видимого элемента: маленький видимый элемент получает невидимую рамку до --hit-min */ .hit-area { position: relative; } .hit-area::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--hit-min)); height: max(100%, var(--hit-min)); transform: translate(-50%, -50%); } /* ---- Сетка и раскладки (LAY-*) -------------------------------------------------- Ширины контейнеров (LAY-001) — как в продуктах: опрос и квиз 560, статьи сайта 720, сайт 1080, подбор 1240 (широкий квиз 1200 → 1240). */ :root { --container-narrow: 560px; /* одна колонка: опрос, квиз, формы */ --container-prose: 720px; /* статья: текст + поля */ --container-wide: 1080px; /* сайт: главная, списки статей */ --container-app: 1240px; /* приложения с таблицами: подбор, широкий квиз, админки */ --grid-min: 290px; /* минимальная ширина карточки в автосетке (сайт: 290) */ } /* Точки перестройки (LAY-002). В @media переменные не работают — пишутся числом: 560 — телефон (всё в одну колонку), 640 и 720 — узкий планшет (как на сайте), 900 — появляется вторая колонка. */ .l-container { width: 100%; max-width: var(--container, var(--container-wide)); margin-inline: auto; padding-inline: var(--page-gutter); box-sizing: border-box; } .l-container.is-narrow { --container: var(--container-narrow); } .l-container.is-prose { --container: var(--container-prose); } .l-container.is-app { --container: var(--container-app); } .l-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--gap-stack)); } .l-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--gap-inline)); } .l-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min)), 1fr)); gap: var(--gap-grid); } .l-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grid); } @media (min-width: 900px) { .l-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } } /* как в квизе */ /* ---- Поверхности, границы, тени (SRF-*) ----------------------------------------- Шкала скруглений по значениям продуктов (имя = px). Какое скругление у кнопки, карточки, поля — решает тема через роли --radius-* (theme-*.css). */ :root { --radius-4: 4px; /* код в строке, мелкие метки */ --radius-8: 8px; --radius-10: 10px; --radius-12: 12px; --radius-14: 14px; --radius-16: 16px; --radius-18: 18px; --radius-22: 22px; --radius-full: 999px; /* «пилюля»: кнопки и чипы Авто.ру */ --border-1: 1px; /* обычная граница: карточки, таблицы, разделители */ --border-1-5: 1.5px; /* поля и варианты ответа в опросе и квизе */ --border-2: 2px; /* выбранный вариант, шапка таблицы */ /* слои наложения (SRF-004): чем больше, тем выше */ --z-sticky: 10; /* закреплённая шапка */ --z-dropdown: 20; /* выпадающий список */ --z-overlay: 40; /* затемнение и окно поверх страницы */ --z-toast: 50; /* всплывающее уведомление */ } /* ---- Взаимодействие и доступность (INT-*) ---------------------------------------- */ :root { --dur-fast: 120ms; /* смена цвета рамки и фона (опрос: .12s) */ --dur-base: 150ms; /* наведение на карточку и кнопку (сайт: .15s) */ --dur-slow: 250ms; /* полоса прогресса (опрос: .25s) */ --ease: ease; --focus-width: 2px; /* рамка фокуса с клавиатуры: 2 px, как на сайте и в подборе */ --focus-offset: 2px; } /* INT-004: тем, кто просит меньше движения, анимации и плавные переходы отключены (как в опросе) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ---- Фирменный наклон (TYP-008) ----------------------------------------------------- Жест сайта evstygney.ru: поворот против часовой стрелки от левого нижнего угла. Углы задаёт тема (--tilt-*); у Авто.ру они 0 — наклона в бренде нет. Правило: один наклонный элемент на блок (обложка, подвал, карточка); буквам можно выходить за край блока, смыслу — нет. */ .t-tilt { display: inline-block; transform: rotate(var(--tilt, var(--tilt-cover, 0deg))); transform-origin: left bottom; } .t-tilt.is-sm { --tilt: var(--tilt-title, 0deg); } /* заголовок карточки на цвете бренда: −2° */ @media (max-width: 720px) { .t-tilt:not(.is-sm) { --tilt: var(--tilt-cover-mobile, var(--tilt-cover, 0deg)); } } /* Заголовок обложки и подвала — крупнее шкалы, как на сайте (TYP-009) */ .t-cover { font-family: var(--ff-heading); font-weight: var(--fw-heading); font-size: var(--fs-cover, var(--fs-4xl)); line-height: .95; letter-spacing: -.02em; white-space: nowrap; margin: 8px 0 28px 4px; } .t-cover.is-foot { font-size: var(--fs-cover-foot, var(--fs-4xl)); line-height: 1; margin: 6px 0 22px 4px; } @media (max-width: 720px) { .t-cover:not(.is-foot) { font-size: var(--fs-cover-mobile, var(--fs-cover, var(--fs-4xl))); margin-bottom: 20px; } }