/* ============================================================================= Студия Аиста — дизайн-система 2026. Тёплая бумага + чернильно-зелёный акцент. Без градиентных заголовков, без орбов, без пилюль. Всё локально, внешних запросов нет. ========================================================================== */ @font-face { font-family: Onest; src: url('fonts/onest-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; } @font-face { font-family: Onest; src: url('fonts/onest-cyrillic.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; } @font-face { font-family: Inter; src: url('fonts/inter-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; } @font-face { font-family: Inter; src: url('fonts/inter-cyrillic-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; } @font-face { font-family: Inter; src: url('fonts/inter-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; } @font-face { font-family: Inter; src: url('fonts/inter-cyrillic-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; } @font-face { font-family: Inter; src: url('fonts/inter-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; } @font-face { font-family: Inter; src: url('fonts/inter-cyrillic-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; } /* --- Токены ---------------------------------------------------------------- */ /* Три уровня линий, а не два: --line рисует декоративные разделители, --line-2 акцентирует их, --line-3 обводит интерактивные элементы (кнопки, карточки- ссылки) и потому обязан давать не меньше 3:1 к фону — WCAG 1.4.11. Все отношения ниже посчитаны, а не прикинуты на глаз. */ :root { --paper: #F6F4F1; --card: #FFFFFF; --sunk: #EFEBE5; --ink: #16150F; /* 16.66:1 на бумаге */ --muted: #5E5A50; /* 6.26:1 на бумаге */ --line: #E4E0D8; /* 1.20:1 — только декоративные разделители */ --line-2: #B5AC9C; /* 2.05:1 — акцент разделителя, не граница кнопки */ --line-3: #8B8172; /* 3.49:1 — границы интерактивных элементов */ --accent: #22513E; /* чернильно-зелёный, 8.26:1 на бумаге */ --accent-h:#2C6A50; --clay: #A94D26; /* терракота — второй план, 5.07:1 */ --on-accent: #F6F4F1; --dark: #191814; /* тёплый графит для вставок */ --dark-2: #211F1A; --on-dark: #EDEBE6; --on-dark-mut: #A7A196; --dark-line: rgba(255,255,255,.10); --dark-line-2: rgba(255,255,255,.42); --accent-on-dark: #6FBF9A; /* 8.12:1 на графите; --accent там даёт 1.96:1 */ --ease: cubic-bezier(.16, 1, .3, 1); --r-s: 10px; --r-m: 14px; --r-l: 20px; --wrap: 1200px; --gutter: clamp(20px, 4vw, 48px); --fs-1: 15px; --fs-2: 17px; --fs-3: clamp(17px, 0.9vw + 14.5px, 20px); --fs-h3: clamp(19px, 1.7vw, 23px); --fs-h2: clamp(29px, 3.9vw, 50px); --fs-h1: clamp(38px, 6.2vw, 76px); --header-h: 64px; color-scheme: light; } /* Тёмная тема включается по двум независимым условиям: системная настройка и ручной выбор в переключателе (атрибут data-theme на ставит boot.js). Медиазапрос нельзя положить в один селектор с атрибутом, поэтому список значений продублирован. Правишь одно — правь и второе. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #141310; --card: #1C1B17; --sunk: #1A1915; --ink: #EDEBE6; /* 15.59:1 */ --muted: #A7A196; /* 7.24:1 */ --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.34); --line-3: rgba(255,255,255,.42); --accent: #6FBF9A; /* 8.49:1 */ --accent-h:#8ED4B3; --clay: #E08A5C; --on-accent: #10231B; --dark: #0F0E0C; --dark-2: #171613; color-scheme: dark; } } :root[data-theme="dark"] { --paper: #141310; --card: #1C1B17; --sunk: #1A1915; --ink: #EDEBE6; --muted: #A7A196; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.34); --line-3: rgba(255,255,255,.42); --accent: #6FBF9A; --accent-h:#8ED4B3; --clay: #E08A5C; --on-accent: #10231B; --dark: #0F0E0C; --dark-2: #171613; color-scheme: dark; } /* --- База ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font: 400 var(--fs-2)/1.6 Inter, system-ui, sans-serif; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3 { font-family: Onest, Inter, sans-serif; text-wrap: balance; } h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.035em; line-height: 1.03; } h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.028em; line-height: 1.08; } h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; } p { text-wrap: pretty; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(80px, 11vw, 156px); } .section--tight { padding-block: clamp(56px, 7vw, 96px); } .lead { font-size: var(--fs-3); line-height: 1.55; color: var(--muted); max-width: 54ch; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .skip-link { position: fixed; left: 16px; top: -80px; z-index: 300; padding: 12px 18px; background: var(--accent); color: var(--on-accent); font-weight: 600; border-radius: var(--r-s); text-decoration: none; transition: top .18s var(--ease); } .skip-link:focus-visible { top: 14px; } /* Тёмная вставка (витрина, финальный экран) */ .on-dark { background: var(--dark); color: var(--on-dark); } .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--on-dark); } .on-dark .lead, .on-dark p { color: var(--on-dark-mut); } /* Ссылки и акценты внутри тёмной вставки берут светлый акцент: в светлой теме обычный --accent на графите даёт 1.96:1. */ .on-dark .tlink { color: var(--accent-on-dark); } .on-dark .p-link:hover { text-decoration-color: var(--accent-on-dark); } /* --- Кнопки ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; font: 600 var(--fs-1)/1 Inter, sans-serif; border: 1px solid transparent; border-radius: var(--r-s); /* background обязателен: у