/* Same palette and metrics as the local interface, from the design handoff. Kept as one stylesheet rather than the prototype's inline styles: the landing and the cabinet share every token, and two copies drift. */ /* ТЁМНАЯ ПАЛИТРА — И ПО УМОЛЧАНИЮ, И КАК ИМЕНОВАННАЯ. Селектор перечисляет `:root` (страница без атрибута — работает даже с выключенным JS) и `[data-theme="dark"]` — чтобы ту же палитру можно было навесить на ОТДЕЛЬНЫЙ элемент. Без второго селектора палитры были асимметричны: светлая жила под `[data-theme="light"]` и на любой элемент ложилась, а тёмная — только на `:root`, поэтому `data-theme="dark"` на кнопке не делал ничего. Значения при этом не дублируются: это один и тот же блок объявлений. */ :root, [data-theme="dark"] { --bg: #17171a; --panel: #1c1c20; --panel-2: #1e1e23; --line: #2b2b31; --line-2: #34343b; --line-3: #232329; --edge: #3d3d45; --text: #e8e7ec; --text-2: #cfced6; --text-3: #b5b4bf; --dim: #a9a8b3; --dim-2: #94939e; --dim-3: #82818d; --faint: #43434c; --accent: #b3a0ea; --accent-2: #cec0f2; --accent-bg: #242134; --accent-bg-2: #282437; --green: #93cfaa; --amber: #dcbd85; --amber-bg: #3b3427; --warn-bg-deep: #221d12; --warn-line: #3f3728; --ok-line: #2c3f34; --ok-bg: #17211b; --bad-line: #4a2f3c; --bad-bg: #241a1f; --pink: #e293b4; --pink-2: #e5aec6; /* ЧТО ЗАВИСИТ ОТ ТЕМЫ, А НЕ ОТ ОТТЕНКА: фон карточки и шапка. Карточка в тёмной теме — тот же фон, что у страницы (линии рисует зазор), а в светлой — БЕЛАЯ БУМАГА: на бумажном фоне карточка цвета страницы перестала бы читаться карточкой. */ --card-bg: #17171a; --header-bg: rgba(23,23,26,.88); --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* СВЕТЛАЯ ТЕМА. Не «инверсия»: тёмная палитра — ночная, светлая — бумажная. Акцент взят из брендбука буквально — там уже написано «акцент на светлом (документы, счета) #6f6486»: на белом #b3a0ea не читается как текст, а #6f6486 читается и остаётся тем же лиловым. Линии и тени пересчитаны ОТ БУМАГИ, а не вывернуты из тьмы: вывернутая палитра даёт серую грязь, а бумажная — воздух. */ [data-theme="light"] { --bg: #f7f7f9; --panel: #ffffff; --panel-2: #fcfcfe; --line: #e4e4ea; --line-2: #d6d6de; --line-3: #ececf1; --edge: #c3c3cd; --text: #16161a; --text-2: #3b3b45; --text-3: #55555f; --dim: #5c5c68; --dim-2: #5f5f6b; --dim-3: #6c6c78; --faint: #c9c9d2; --accent: #6f6486; --accent-2: #564d6b; --accent-bg: #eeeaf6; --accent-bg-2: #e5dfef; --green: #2f7d52; --amber: #8a6a1f; --amber-bg: #f2e9d2; --warn-bg-deep: #fbf4e2; --warn-line: #e6d9b6; --ok-line: #bfdcc9; --ok-bg: #eef7f1; --bad-line: #e8c3cf; --bad-bg: #fbeef2; --pink: #b04a72; --pink-2: #9c3f63; --card-bg: #ffffff; --header-bg: rgba(247,247,249,.86); } /* СВЕТ — ТОТ ЖЕ, ИСТОЧНИК ДРУГОЙ. В тёмной теме виньетка акцентная, а низ темнеет; на бумаге затемнять нечего, поэтому снизу бумага чуть теплеет, а виньетка остаётся той же формы, но слабее. */ [data-theme="light"] body { background-image: linear-gradient(180deg, transparent 62%, rgba(22,22,26,.04) 100%); } /* Self-hosted, no CDN: a font request to a third party from a page a customer is logged into is a beacon, and this product's whole claim is about where data goes. Inter rather than the mock's Archivo, which has no Cyrillic subset at all — see pseudex/localui/static/app.css. */ @font-face { font-family: 'Inter'; src: url("/static/fonts/Inter-latin.260c81a4759b.woff2") format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Inter'; src: url("/static/fonts/Inter-cyrillic.06ab411342ac.woff2") format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; src: url("/static/fonts/JetBrainsMono-latin.b058178d7f30.woff2") format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: 'JetBrains Mono'; src: url("/static/fonts/JetBrainsMono-cyrillic.615bf869ebeb.woff2") format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } * { box-sizing: border-box; } /* Переход по якорю (#start, #demo и т.д.) едет плавно на всём сайте, а не телепортирует. Отключаем для тех, кто попросил у системы поменьше движения: у них это укачивает, а не помогает ориентироваться. */ html { background: var(--bg); scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; color: var(--text); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; /* СВЕТ И ГЛУБИНА БЕЗ «ДОРОГОГО ГРАДИЕНТА». Плоская заливка читается как заливка; дорогая поверхность — это когда у света есть ИСТОЧНИК. Два слоя: слабая радиальная виньетка сверху (акцент, ≤7%) и мягкое затемнение к низу (≤14%). Оба лежат В ФОНЕ САМОГО body — значит гарантированно под контентом, без возни со стеками; оба неподвижны (fixed), поэтому свет не «плывёт» при прокрутке. Границы размыты настолько, что градиент не читается градиентом: видно свет, а не переход цвета. */ background-color: var(--bg); background-image: linear-gradient(180deg, transparent 62%, rgba(0,0,0,.13) 100%); background-repeat: no-repeat; background-attachment: fixed; } /* ЗЕРНО — стратегическая шероховатость вместо глянца. Лёгкая плёнка из шума поверх страницы делает поверхность «материальной»: при 3–4% это читается как бумага/терминал, а не как фиолетовый градиент «дорого выглядит». Позади шапки и кнопок (z-индексы у них выше), не перехватывает клики. */ body::after { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-2); } ::selection { background: var(--accent); color: var(--bg); } pre, code, .mono, input, textarea, select { font-family: var(--mono); } /* No drafting grid on any page, theme or viewport (owner's decision). Keep layout columns and card borders: only the decorative background goes. */ .frame { max-width: 1600px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } header.top { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 36px; height: 76px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--header-bg); backdrop-filter: blur(12px); z-index: 20; } .brand { display: flex; align-items: center; gap: 11px; } .brand b { font-size: 20px; font-weight: 700; letter-spacing: -.025em; } /* ЛОГОТИП ЖИВЁТ, ПОТОМУ ЧТО ОН И ЕСТЬ ПРОДУКТ: два прямоугольника внахлёст — настоящее и подменённое. ОБА едут при загрузке (расходятся-сходятся, как подмена значения) и оба меняются местами по наведению. Раньше двигался только второй, и знак читался как картинка, а не как схема. `backwards`, а не `both`: с `both` заливка удерживает конечный кадр и перебивает :hover — наведение не срабатывало бы вовсе. */ .brand svg rect { transition: transform .42s cubic-bezier(.2,.7,.2,1); } .brand svg .logo-a { animation: logoSwapA 1.15s cubic-bezier(.2,.7,.2,1) backwards; } .brand svg .logo-b { animation: logoSwapB 1.15s cubic-bezier(.2,.7,.2,1) backwards; } @keyframes logoSwapA { from { transform: translate(12px, -12px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes logoSwapB { from { transform: translate(-12px, 12px); opacity: 0; } to { transform: none; opacity: 1; } } .brand:hover svg .logo-a { transform: translate(9px, -9px); } .brand:hover svg .logo-b { transform: translate(-9px, 9px); } @media (prefers-reduced-motion: reduce) { .brand svg rect { transition: none; animation: none; } .brand:hover svg .logo-a, .brand:hover svg .logo-b { transform: none; } } /* НАВИГАЦИЯ: БЕЗ ПЕРЕНОСА И БЕЗ ИСЧЕЗНОВЕНИЯ. Ссылки были обычными флекс-элементами, поэтому на 1000–1100 px они переносились на две-три строки ВНУТРИ шапки высотой 72 px: «КАК РАБОТАЕТ» ломалось пополам, ряд разъезжался вправо, и это читалось как сломанная вёрстка. Запрещаю перенос совсем, а место освобождаю честно: сначала сокращаю зазор, потом убираю ВТОРОСТЕПЕННЫЕ ссылки (152-ФЗ и FAQ — обе есть в подвале и в теле страниц), а на узких экранах оставляю ряд прокручиваемым. Раньше на ≤900 px навигация просто исчезала: попасть на другую страницу с телефона было нельзя. */ header.top nav { display: flex; align-items: center; gap: 30px; flex-wrap: nowrap; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; } header.top nav a { flex: none; white-space: nowrap; } @media (max-width: 1240px) { header.top nav { gap: 18px; font-size: 11.5px; } } @media (max-width: 1080px) { header.top nav .nav-secondary { display: none; } } @media (max-width: 900px) { header.top { gap: 16px; } /* `min-width: 0` ОБЯЗАТЕЛЕН, И БЕЗ НЕГО `overflow-x` НЕ РАБОТАЕТ. Флекс-элемент по умолчанию имеет `min-width: auto`, то есть не сжимается ниже своего содержимого: ряд ссылок не прокручивался, а выдавливал шапку шире вьюпорта — и горизонтальный скролл появлялся у ВСЕЙ страницы (на 375 px замерено 443). `flex: 1 1 auto` отдаёт навигации остаток ширины, и дальше она скроллится. */ header.top nav { gap: 16px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 auto; } header.top nav::-webkit-scrollbar { display: none; } } /* ШАПКА НА ТЕЛЕФОНЕ — ДВЕ СТРОКИ, А НЕ СКРЫТАЯ НАВИГАЦИЯ. В одну строку не помещаются ни знак, ни ряд ссылок, ни три кнопки действий: на 375 px это 112 + 198 px без навигации вовсе. Ссылки убирать нельзя — они и так исчезали до ≤900 px, и попасть на другую страницу с телефона было нечем (см. комментарий у `header.top nav`). Поэтому навигация переезжает на вторую строку целиком и прокручивается там, а шапка перестаёт быть фиксированной высоты: 76 px в две строки не влезают, и текст вылезал за границу. */ @media (max-width: 760px) { header.top { height: auto; min-height: 0; flex-wrap: wrap; padding: 8px 18px 0; gap: 6px 12px; /* НЕ ЛИПНЕТ: две строки — это 83–111 px, восьмая часть экрана. Всё, что человек уже прочитал, не должно занимать вьюпорт. */ position: static; } header.top nav { order: 3; flex: 1 1 100%; width: 100%; gap: 16px; font-size: 11px; padding-bottom: 4px; } header.top .brand b { font-size: 18px; } header.top .head-cta { gap: 8px; margin-left: auto; } header.top .head-cta .btn, header.top .head-cta .theme-toggle { padding: 9px 12px; font-size: 11px; } } /* САМЫЕ УЗКИЕ ЭКРАНЫ (320–420 px): строка «знак + три кнопки» не помещается — на 320 px замерено 341 px, то есть 21 px за вьюпорт и горизонтальный скролл у всей страницы. Ужимается всё, что можно ужать без потери действий: знак и имя остаются (имя — узнаваемость, а не украшение), поля кнопок и трекинг — нет. */ @media (max-width: 420px) { header.top { padding: 10px 14px; gap: 8px 10px; } header.top .brand { gap: 8px; } header.top .brand b { font-size: 16px; } header.top .head-cta { gap: 6px; } header.top .head-cta .btn, header.top .head-cta .theme-toggle { padding: 8px 10px; font-size: 10.5px; letter-spacing: .08em; } } header.top nav a { color: var(--dim); } header.top nav a:hover { color: var(--text); } /* ПОДЧЁРКИВАНИЕ НАВИГАЦИИ рисуется, а не появляется рывком: тонкая акцентная линия выезжает слева направо. Это «состояние», а не украшение — та же линия отмечает активный пункт на вложенных страницах (см. `style="color:var(--accent-2)"`). */ header.top nav a { position: relative; } header.top nav a::after { content: ""; position: absolute; left: 0; bottom: -7px; height: 1px; width: 0; background: var(--accent); transition: width .22s ease; } header.top nav a:hover::after { width: 100%; } .head-cta { display: flex; align-items: center; gap: 10px; } /* `[hidden]` ПРОИГРЫВАЕТ ЛЮБОМУ СВОЕМУ `display`, и это ловушка, а не тонкость: браузерное правило `[hidden]{display:none}` идёт из UA-стилей, поэтому `.btn{display:inline-block}` его перебивает — кнопка, которой в JS выставлен `hidden`, остаётся ВИДНОЙ. Поймано браузерной проверкой конфигуратора: там кнопка «отправить как заявку» не должна показываться, когда всё отмеченное мы находим, и она показывалась. Правило стоит ДО `.btn`, но с `!important`, потому что специфичность здесь ни при чём. */ [hidden] { display: none !important; } .btn { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; padding: 11px 16px; border: 1px solid var(--line-2); color: var(--dim); background: transparent; cursor: pointer; /* ТАКТИЛЬНОСТЬ: нажатие чувствуется, а не просто меняет цвет. Переход общий, чтобы hover и :active не спорили двумя разными кривыми. */ transition: background .18s ease, color .18s ease, border-color .18s ease, transform .1s ease; } .btn:hover { color: var(--text); border-color: var(--edge); } .btn:active { transform: translateY(1px); } .btn.solid { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 700; } .btn.accent { background: var(--accent); color: var(--bg); border: 0; font-weight: 700; } .btn.accent:hover { background: var(--accent-2); color: var(--bg); } .btn.lg { font-size: 13px; letter-spacing: .1em; padding: 16px 24px; } .btn.block { display: block; width: 100%; text-align: center; } /* «НАЧАТЬ» в шапке — та же кнопка, что в шапке лендинга: фиолетовая рамка, при наведении фон и свечение (как `.hv-btn-glow` в landing.css). Здесь, а не в landing.css, потому что шапка base.html есть на каждой странице. */ .btn.cta { font-size: 11.5px; letter-spacing: .14em; padding: 10px 15px; border-color: var(--accent); color: var(--accent-2); transition: background .25s, border-color .25s; } .btn.cta:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-2); } /* ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ. Оформление живёт здесь, а не в шапке, потому что кнопка стоит в ДВУХ шапках (у лендинга своя), и стиль, привязанный к одной, во второй потерялся бы. Ширина фиксирована: подпись меняется между «СВЕТ» и «ТЬМА», и без этого соседние кнопки прыгали бы на каждом нажатии. Подпись называет то, что БУДЕТ, а не то, что есть. */ .theme-toggle { display: inline-block; min-width: 76px; text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; padding: 10px 15px; border: 1px solid var(--line-2); color: var(--dim); background: transparent; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .1s ease; } /* НАВЕДЕНИЕ ПОКАЗЫВАЕТ ТО, ЧТО БУДЕТ, — И БЕЗ ЕДИНОГО ПРОДУБЛИРОВАННОГО ЦВЕТА. `theme.js` вешает на саму кнопку атрибут целевой темы (`data-theme="light"` в тёмной теме и наоборот). Для элемента с этим атрибутом переменные резолвятся в палитру ЦЕЛЕВОЙ темы, поэтому одни и те же строки ниже дают ровно тот вид, который кнопка будет иметь в той теме. Плодить «светлые» литералы не нужно: источник цвета остаётся один — блок `[data-theme]`. Правило `[data-theme]` без `:hover` — для активации с клавиатуры: там наведения нет, а показать целевую тему тоже надо. */ .theme-toggle:hover, .theme-toggle[data-theme] { color: var(--text); background: var(--panel); border-color: var(--edge); } .theme-toggle:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } .theme-toggle:active { transform: none; } } section { border-top: 1px solid var(--line); padding: 80px 36px; } section:first-of-type { border-top: 0; } h1.hero { margin: 0; font-size: clamp(40px, 7vw, 104px); line-height: .92; font-weight: 900; letter-spacing: -.04em; max-width: 1180px; text-wrap: balance; } h1.hero span { color: var(--accent); } h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); font-weight: 900; letter-spacing: -.03em; } .eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; } .eyebrow i { width: 56px; height: 1px; background: var(--accent); display: block; } .eyebrow span { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; color: var(--accent); } .lede { margin: 0; max-width: 620px; font-size: 19px; line-height: 1.62; color: var(--text-3); text-wrap: pretty; } .sub { margin: 0 0 44px; font-size: 17px; color: var(--dim); max-width: 720px; } .hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,460px); gap: 56px; margin-top: 56px; align-items: end; } .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 36px; } .sec-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--dim-2); } .card { border: 1px solid var(--line-2); background: var(--panel-2); padding: 20px 20px 22px; } .label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--dim-2); } .report { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: var(--green); white-space: pre-wrap; } .copybar { display: flex; border: 1px solid var(--line-2); background: var(--panel-2); max-width: 640px; margin-top: 36px; } .copybar code { flex: 1; padding: 16px 18px; font-size: 13px; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .copybar button { border: 0; border-left: 1px solid var(--line-2); background: transparent; color: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; padding: 0 20px; cursor: pointer; } .fineprint { margin-top: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--dim-2); line-height: 2; } .tabs { display: flex; border: 1px solid var(--line-2); flex-wrap: wrap; } .tabs button { flex: 1; min-width: 160px; border: 0; border-right: 1px solid var(--line-2); padding: 15px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; cursor: pointer; text-align: left; background: transparent; color: var(--dim-2); } .tabs button[aria-selected="true"] { background: var(--accent-bg-2); color: var(--accent); } /* Вкладки [role="tab"] — примеры на лендинге и провайдеры в _setup.html (лендинг И кабинет), поэтому здесь, а не в landing.css. Видимое состояние и есть aria-состояние; цвета не ставить в style="" — инлайн перебил бы и выбор, и наведение. Выбранная вкладка идёт ПОСЛЕ :hover с той же специфичностью, поэтому при наведении не теряет свой фон. */ [role="tab"] { background: transparent; color: var(--dim-2); } [role="tab"]:hover { background: var(--panel); } [role="tab"][aria-selected="true"] { background: var(--accent-bg); color: var(--accent-2); } .demo { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); border-top: 0; } .demo > div { padding: 26px 24px 28px; } .demo > div:first-child { border-right: 1px solid var(--line-2); background: var(--panel); } .demo > div:last-child { background: var(--panel-2); } .demo .body { font-family: var(--mono); font-size: 14px; line-height: 2; color: var(--text-2); white-space: pre-wrap; } .mark-pii { background: rgba(226,147,180,.16); color: var(--pink-2); padding: 2px 4px; border-radius: 2px; } .mark-fake { background: rgba(179,160,234,.18); color: var(--accent-2); padding: 2px 4px; border-radius: 2px; } .notes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 26px; } .notes div { font-size: 14.5px; line-height: 1.65; color: var(--dim); text-wrap: pretty; } .notes b { color: var(--text); } .rows { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 56px; } .numbered { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; } .numbered .n { font-family: var(--mono); font-size: 13px; color: var(--faint); font-weight: 700; } .numbered h3 { margin: 0 0 10px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; } .numbered p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--dim); max-width: 760px; text-wrap: pretty; } .flow { border: 1px solid var(--line-2); background: var(--panel-2); padding: 28px 26px; font-family: var(--mono); font-size: 13.5px; line-height: 2.4; color: var(--dim); overflow-x: auto; } .flow em { color: var(--accent); font-style: normal; } .flow i { color: var(--faint); font-style: normal; } .trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); margin-top: 32px; } .trio > div { background: var(--panel); padding: 26px 24px 30px; } .trio .step { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--accent); margin-bottom: 20px; } .trio h3 { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .trio p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--dim); text-wrap: pretty; } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 56px; align-items: start; } .boundary, .gap-table { background: var(--card-bg); } .boundary { border: 1px solid var(--line-2); } .boundary .row { display: grid; grid-template-columns: minmax(120px,1fr) minmax(70px,.5fr) minmax(80px,.6fr); border-bottom: 1px solid var(--line); align-items: center; } .boundary .row > * { padding: 14px 18px; } .boundary .row > *:not(:first-child) { border-left: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; } .boundary .head { background: var(--panel); border-bottom: 0; } .boundary .head > * { padding: 12px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--dim-2); } .yes { color: var(--green); } .no { color: var(--pink); } .warnbox { border: 1px solid var(--amber-bg); background: var(--warn-bg-deep); padding: 22px; margin-top: 20px; } .warnbox .label { color: var(--amber); margin-bottom: 14px; } .warnbox p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; } .steps { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); } .steps > div { background: var(--panel); display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr) 120px; align-items: center; gap: 24px; } .steps .what { padding: 22px 24px; } .steps .step { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--accent); margin-bottom: 8px; } .steps h3 { margin: 0; font-size: 17px; font-weight: 600; } .steps .note { font-size: 13.5px; color: var(--dim-2); margin-top: 6px; } .steps pre { margin: 0; padding: 22px 0; font-size: 13px; line-height: 1.9; color: var(--text-2); white-space: pre-wrap; overflow-x: auto; } .steps button { height: 100%; border: 0; border-left: 1px solid var(--line-2); background: transparent; color: var(--dim); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; cursor: pointer; } .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); } .plan { background: var(--panel); padding: 30px 26px 32px; display: flex; flex-direction: column; gap: 20px; } .plan.featured { background: var(--accent-bg); } .plan .tag { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--dim-2); } .plan.featured .tag { color: var(--accent); } .plan .price { font-size: 40px; font-weight: 900; letter-spacing: -.03em; margin-top: 18px; } .plan .per { font-size: 13.5px; color: var(--dim-2); margin-top: 6px; } .plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text-3); } .plan li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; } .plan li::before { content: "→"; color: var(--accent); font-family: var(--mono); font-size: 12px; } .plan form { margin-top: auto; } .pricing-foot { border: 1px solid var(--line-2); border-top: 0; padding: 20px 26px; display: flex; gap: 32px; flex-wrap: wrap; font-size: 14px; color: var(--dim); } details.faq { border-bottom: 1px solid var(--line); } details.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; display: flex; justify-content: space-between; gap: 24px; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: "+"; font-family: var(--mono); font-size: 14px; color: var(--dim-3); } details.faq[open] summary::after { content: "−"; color: var(--accent); } details.faq p { margin: 0 0 26px; max-width: 820px; font-size: 16px; line-height: 1.65; color: var(--dim); text-wrap: pretty; } footer { border-top: 1px solid var(--line); padding: 32px 28px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--dim-3); letter-spacing: .06em; } footer a { color: var(--dim-3); } /* ---- signup + cabinet ---- */ .signup { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px; } .signup input:not([type="checkbox"]), .signup select, .field { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); font-family: var(--mono); font-size: 13px; padding: 14px 15px; outline: none; width: 100%; } .signup input:focus, .field:focus { border-color: var(--edge); } /* Поля кабинета — ОДНОЙ высоты. Без явной высоты select выходил на 49px, а input на 47px, и строка «название + прод + кнопка» стояла лесенкой. */ .field { box-sizing: border-box; height: 48px; } /* Своя стрелка вместо системной: у системной положение не настраивается, и она прижата к самому краю. Рисуется SVG в data:-адресе (img-src CSP это разрешает), цвет — --dim. */ select.field { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238f8e99' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } /* Кнопка действия рядом с полями — той же высоты, что поле. */ .btn.tall { box-sizing: border-box; height: 48px; display: inline-flex; align-items: center; justify-content: center; } .signup .wide { grid-column: 1 / -1; } .app { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); } .app > div { background: var(--panel); padding: 24px; } .kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-3); font-size: 14px; } .kv .k { color: var(--dim-2); } .kv .v { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); text-align: right; word-break: break-all; } .meter { height: 8px; background: var(--line-3); margin-top: 12px; } .meter i { display: block; height: 8px; background: var(--accent); } .meter i.over { background: var(--amber); } table.list { width: 100%; border-collapse: collapse; font-size: 14px; } table.list th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--dim-3); font-weight: 400; padding: 10px 0; border-bottom: 1px solid var(--line); } table.list td { padding: 12px 0; border-bottom: 1px solid var(--line-3); color: var(--text-2); } table.list td.mono { font-family: var(--mono); font-size: 12.5px; } .pill { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; padding: 4px 8px; border: 1px solid var(--line-2); color: var(--dim); } .pill.ok { color: var(--green); border-color: var(--ok-line); } .pill.warn { color: var(--amber); border-color: var(--warn-line); } .pill.bad { color: var(--pink); border-color: var(--bad-line); } .msg { padding: 14px 18px; border: 1px solid var(--line-2); margin-bottom: 20px; font-size: 14px; } .msg.error { border-color: var(--bad-line); background: var(--bad-bg); color: var(--pink-2); } .msg.success { border-color: var(--ok-line); background: var(--ok-bg); color: var(--green); } .keybox { border: 1px solid var(--accent); background: var(--accent-bg); padding: 22px; margin: 24px 0; } .keybox .value { font-family: var(--mono); font-size: 17px; color: var(--accent-2); word-break: break-all; margin: 12px 0; } .keybox .warn { font-size: 13.5px; color: var(--amber); line-height: 1.6; } @media (max-width: 900px) { .hero-grid, .demo, .notes, .rows, .split, .signup { grid-template-columns: 1fr; } .steps > div { grid-template-columns: 1fr; } .steps button { border-left: 0; border-top: 1px solid var(--line-2); padding: 14px; } } /* The setup tutorial. `.tabs` is reused from the demo, so only the note and the generated code blocks need anything new. */ .setup-note { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--dim); max-width: 780px; text-wrap: pretty; } #setup .steps pre { white-space: pre-wrap; word-break: break-word; } #provider-tabs { flex-wrap: wrap; } .plan .fits { font-size: 13px; color: var(--dim-2); border-top: 1px solid var(--line); padding-top: 14px; } /* The Claude Code onboarding block. Accent border because this is the path we want taken — the manual commands below it are the fallback, not the default. */ .claude-block { border: 1px solid var(--accent); background: var(--accent-bg); padding: 26px; margin-top: 32px; } .claude-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .claude-prompt { margin: 20px 0 0; padding: 20px; max-height: 340px; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--text-3); white-space: pre-wrap; } /* Legal documents. Narrow measure and generous leading: these are read end to end by a lawyer or a security officer, not scanned like a landing. */ .legal-doc { max-width: 780px; } .legal-doc h2 { font-size: 21px; letter-spacing: -.01em; margin: 38px 0 12px; } .legal-doc p { font-size: 16px; line-height: 1.7; color: var(--text-3); margin: 0 0 14px; } .legal-doc a { color: var(--accent); } .legal-list { margin: 0 0 14px; padding-left: 22px; font-size: 16px; line-height: 1.7; color: var(--text-3); } .legal-list li { margin-bottom: 8px; } .legal-note { border-left: 2px solid var(--accent); background: var(--accent-bg); padding: 18px 22px; margin: 28px 0; font-size: 15.5px; line-height: 1.65; color: var(--text-3); } .legal-doc .missing { color: var(--pink); } /* ---- конфигуратор ---- */ /* Ни одной новой переменной: те же токены, что у остальных секций. Экран, нарисованный своим словарём, расходится с соседними при первой правке темы. */ .cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); } .cfg-item { display: flex; align-items: center; gap: 12px; padding: 15px 18px; background: var(--panel); cursor: pointer; min-width: 0; } .cfg-item:hover { background: var(--panel-2); } .cfg-item input { flex: none; width: 15px; height: 15px; accent-color: var(--accent); } .cfg-label { flex: 1; font-size: 14.5px; color: var(--text-2); min-width: 0; } .cfg-tag { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; } .cfg-tag.yes { color: var(--green); } .cfg-tag.no { color: var(--amber); } .cfg-out { margin-top: 22px; border: 1px solid var(--line-2); background: var(--panel); } .cfg-verdict { display: grid; grid-template-columns: 92px minmax(0, 200px) minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 14px 18px; border-bottom: 1px solid var(--line-3); font-size: 14px; line-height: 1.6; } .cfg-verdict b { color: var(--text-2); } .cfg-verdict span:last-child { color: var(--dim); } .cfg-mark { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; } .cfg-mark.yes { color: var(--green); } .cfg-mark.no { color: var(--amber); } .cfg-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 16px 18px; } .cfg-note { font-size: 14px; line-height: 1.6; color: var(--dim); max-width: 620px; } @media (max-width: 700px) { .cfg-verdict { grid-template-columns: 1fr; gap: 6px; } } /* Баннер согласия на аналитику. Показывается ТОЛЬКО в режиме `full` и только пока выбор не сделан; в режиме без куки хранить нечего, значит и отказываться не от чего. ДВЕ КНОПКИ ОДНОГО РАЗМЕРА. Отказ, нарисованный мельче и бледнее согласия, — это имитация выбора, и по 152-ФЗ ст. 9 согласие должно быть свободным. */ .consent-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line-2); background: var(--panel-2); padding: 16px 18px; box-shadow: 0 8px 28px rgba(0,0,0,.45); } .consent-text { flex: 1; min-width: 260px; font-size: 13.5px; line-height: 1.6; color: var(--dim); } .consent-text a { color: var(--accent); } .consent-buttons { display: flex; gap: 10px; } .consent-buttons .btn { min-width: 120px; text-align: center; } /* --- Страницы входа/регистрации (django-allauth в брендовом каркасе) --- */ .auth { display: flex; justify-content: center; padding: 56px 20px 96px; } .auth-card { width: 100%; max-width: 440px; border: 1px solid var(--line-2); background: var(--line-3); padding: 34px 32px; } .auth-card h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: var(--text); } .auth-card > p, .auth-card form > p { color: var(--dim); font-size: 14px; line-height: 1.65; margin: 0 0 18px; } .auth-card a { color: var(--accent); } .auth-card a:hover { color: var(--accent-2); } .auth-card form { display: flex; flex-direction: column; gap: 15px; margin-top: 4px; } .auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-3); letter-spacing: .02em; } .auth-card input:not([type=checkbox]):not([type=radio]) { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line-2); color: var(--text); font-size: 14px; font-family: inherit; box-sizing: border-box; } .auth-card input:focus { outline: none; border-color: var(--accent); } .auth-card input::placeholder { color: var(--dim-2); } .auth-card label:has(input[type=checkbox]) { flex-direction: row; align-items: center; gap: 9px; color: var(--text-3); font-size: 13.5px; } .auth-card button[type=submit], .auth-card .btn.accent { margin-top: 6px; padding: 13px 18px; font-size: 13px; letter-spacing: .08em; cursor: pointer; text-align: center; } .auth-card .helptext, .auth-card [class*="help"] { color: var(--dim-2); font-size: 12.5px; } .auth-card .errorlist, .auth-card [class*="error"] { color: var(--amber); font-size: 13px; list-style: none; padding: 0; margin: 0 0 4px; } .auth-msg { padding: 11px 13px; border: 1px solid var(--line-2); margin-bottom: 8px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; } .auth-msgs { margin-bottom: 20px; } .auth-msg--error { border-color: var(--amber); color: var(--amber); } .auth-msg--success { border-color: var(--accent); color: var(--accent-2); } /* вторичные ссылки под формой (забыли пароль / войти по коду) */ .auth-card hr { border: 0; border-top: 1px solid var(--line-2); margin: 22px 0 16px; } /* Кнопка, которая обязана выглядеть ссылкой. Повтор кода — это POST (рейт-лимит и счётчик попыток остаются на стороне allauth), но для клиента это «ссылка рядом с вопросом», а не вторая крупная кнопка, спорящая с «Войти». */ .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; } .linkish:hover { color: var(--text); } /* ── кнопка поддержки ───────────────────────────────────────────────────── */ /* Живёт в каркасе, а не на лендинге: написать нам может понадобиться с любой страницы, включая кабинет и счёт. */ .support { position: fixed; right: 20px; bottom: 20px; z-index: 40; font-family: var(--mono); } .support > summary { list-style: none; } .support > summary::-webkit-details-marker { display: none; } .support-btn { display: block; cursor: pointer; padding: 11px 18px; font-size: 11.5px; letter-spacing: .14em; color: var(--accent-2); background: var(--panel); border: 1px solid var(--accent); transition: background .2s ease, color .2s ease; } .support-btn:hover, .support[open] .support-btn { background: var(--accent-bg); } .support-menu { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(360px, calc(100vw - 40px)); display: grid; gap: 1px; background: var(--line-3); border: 1px solid var(--line); } .support-lead { padding: 16px 18px; background: var(--panel); font-family: Inter, system-ui, sans-serif; font-size: 13px; line-height: 1.55; color: var(--dim); } .support-menu a { display: grid; gap: 4px; padding: 14px 18px; background: var(--bg); text-decoration: none; transition: background .2s ease; } .support-menu a:hover { background: var(--panel-2); } .support-where { font-size: 13px; color: var(--text); } .support-how { font-size: 11px; letter-spacing: .04em; color: var(--dim-2); } /* org_id рядом с поддержкой в шапке кабинета — копируемый (§2.6.5) */ .orgid-chip { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--dim-2); border:1px solid var(--line-2); padding:4px 8px; align-self:stretch; } .orgid-chip code { color:var(--text-3); } .orgid-chip .btn { padding:2px 8px; font-size:10px; } /* «?» рядом с числом — одна строка на экране, подробности по клику (§2.6.2) */ .qmark { display:inline; } .qmark > summary { display:inline-block; cursor:pointer; width:16px; height:16px; line-height:15px; text-align:center; border:1px solid var(--line-2); border-radius:50%; color:var(--dim-2); font-size:11px; list-style:none; } .qmark > summary::-webkit-details-marker { display:none; } .qmark[open] > summary { color:var(--text); border-color:var(--edge); } .qmark > div { margin-top:10px; font-size:13px; color:var(--dim); line-height:1.6; max-width:70ch; border-left:2px solid var(--line-2); padding-left:12px; } /* одна полоса объёма с метками включено/потолок/стоп (§2.6.1) */ .usebar { position:relative; height:10px; background:var(--line-3); margin:16px 0 8px; } .usebar > i { position:absolute; left:0; top:0; bottom:0; background:var(--accent); max-width:100%; } .usebar > i.warn { background:var(--amber); } .usebar > i.stop { background:var(--pink); } .usebar > span { position:absolute; top:-4px; bottom:-4px; width:1px; } /* ── смена темы как маска, исходящая от кнопки ─────────────────────────────── Новая тема накрывает старую кругом из кнопки; форма шага и длина приходят из `theme.js` (clip-path ставится на `::view-transition-new`). Базовый кроссфейд браузера выключен намеренно: он идёт ОДНОВРЕМЕННО с clip-path, и переход читается двойным — сначала наплыв, потом маска. Порядок слоёв обязателен: новая тема сверху (z-index 2), старая снизу (1). Без этого браузер кладёт их в порядке объявления, и на половине переходов маска открывала бы старую тему вместо новой. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } /* ЗДЕСЬ ЖЕ ЛЕЖИТ НАЧАЛЬНЫЙ КЛИП, И БЕЗ НЕГО БЫЛО МИГАНИЕ. Анимация приезжает не мгновенно: браузер сначала снимает снимки, и только потом разрешается `transition.ready`, где мы навешиваем движение. Всё это время `::view-transition-new(root)` показывался БЕЗ клипа — новая тема на ~100 мс вставала на весь экран целиком, и уже потом её накрывала маска. Замер это подтверждал: первые кадры давали `clip = None`. Радиус старта — `--theme-r0`, то есть круг, описанный вокруг КНОПКИ: кнопка целиком внутри, она первой получает новый цвет, и только потом свет идёт наружу. Тот же радиус стоит первым кадром анимации в theme.js, поэтому стык «до анимации / в анимации» не виден — значения совпадают. `fill: "forwards"` в theme.js обязателен — без него после анимации вернулось бы это же значение и новая тема исчезла бы в конце. */ ::view-transition-new(root) { z-index: 2; /* Начальная форма — ПРЯМОУГОЛЬНИК КНОПКИ, тот же, что в первом кадре анимации (theme.js кладёт его в переменную). Пока анимация не приехала, новая тема занимает ровно кнопку: она получает свой цвет первой, и стык «до анимации / в анимации» не виден, потому что форма совпадает. */ clip-path: var(--theme-shape-start, circle(var(--theme-r0, 0px) at var(--theme-x, 50%) var(--theme-y, 0%))); } /* КУДА ИДЁТ ТЕМА — ТУДА ИДЁТ И МАСКА, И ЭТО НЕ СИММЕТРИЯ РАДИ СИММЕТРИИ. К светлому свет РАСХОДИТСЯ от кнопки; к тёмному — СХОДИТСЯ к ней, как гаснущая лампа. Поэтому роли снимков меняются местами: в обратную сторону сворачивается СТАРАЯ (светлая) тема, а тёмная ждёт под ней — значит старая обязана лежать СВЕРХУ, а новая снизу, иначе маска открывала бы не то. Начальные клипы стоят здесь по той же причине, что и выше: к моменту прихода анимации (~100 мс) экран уже обязан выглядеть правильно. В обратную сторону это `circle(var(--theme-r))` на старой теме — полный круг, то есть ровно та светлая страница, которая и была на экране; без него снова мигало бы, только теперь тёмным. */ html[data-theme-direction="to-dark"]::view-transition-new(root) { z-index: 1; clip-path: none; } html[data-theme-direction="to-dark"]::view-transition-old(root) { z-index: 2; clip-path: circle(var(--theme-r, 150%) at var(--theme-x, 50%) var(--theme-y, 0%)); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ ДВУХКОЛОНОЧНЫЕ СЕТКИ, У КОТОРЫХ КОЛОНКА ШИРЕ ЭКРАНА ═══════════════════════════════════════════════════════════════════════════ ЗАМЕРЕНО НА 320 px: `.rows` — это «260px + текст» с зазором 56 px, то есть одна левая колонка уже шире вьюпорта; `.split` — `minmax(440px, 1fr)`, и такая колонка не сожмётся НИКОГДА, сколько бы узким ни был экран. Обе дают горизонтальный скролл у всей страницы, а не у себя. `!important` здесь потому, что часть таких сеток задана инлайном в разметке: инлайновое значение сильнее селектора, и без пометки правило молча не срабатывает — именно так и остался незакрытым первый заход. */ @media (max-width: 760px) { .rows { grid-template-columns: minmax(0, 1fr) !important; gap: 0; } .split, .gap-row { grid-template-columns: minmax(0, 1fr) !important; gap: 28px; } .split > * { min-width: 0; } } /* ТАБЛИЦЫ-РЕШЁТКИ НА ТЕЛЕФОНЕ. `.boundary`/`.gap-table` — сетка из трёх колонок с минимумами 120/70/80 px плюс паддинги: уже 270 px, то есть шире 320-px вьюпорта. Разложить их в одну колонку нельзя — заголовки столбцов стоят одной строкой сверху, и без них ячейка теряет, к какому столбцу относится. Поэтому прокручивается САМ блок, а не страница. */ @media (max-width: 760px) { .boundary, .gap-table { overflow-x: auto; } .boundary .row, .gap-table .row { min-width: 480px; } /* РАМКИ `frame` НА ТЕЛЕФОНЕ СНИМАЮТСЯ. Это 1 px слева и 1 px справа на всю ширину документа: на 320 px они давали 322 и горизонтальную прокрутку. Витрина снимала их через `body.v2`, остальные страницы — нет. */ .frame { border-left: 0; border-right: 0; /* И ОБРЕЗКА: `background-position: 36px` с повтором и отрицательные отступы панели демо дают документу лишние 2 px на 320-px экране — этого хватает на горизонтальную прокрутку всей страницы. Витрина обрезала их через `body.v2 .frame`, остальные страницы — нет. */ overflow-x: clip; } } /* НУМЕРОВАННЫЙ ПУНКТ — НОМЕР УЗКИМ, ТЕКСТ ПЕРЕНОСИМЫМ. `.numbered` держит колонку номера в 64 px плюс зазор 24 px: на 320-px экране под текст остаётся 158 px, и длинное слово (адрес, идентификатор) вылезает за карточку на 58 px — замерено. Номеру хватает 40 px, а тексту нужен `overflow-wrap`, иначе он переносится только по пробелам. */ @media (max-width: 760px) { .numbered { grid-template-columns: 40px minmax(0, 1fr) !important; gap: 14px; } .numbered > * { min-width: 0; } .numbered h3, .numbered p, .numbered pre { overflow-wrap: anywhere; } } /* ── ВЫБОР ТАРИФА: НАШ ЭЛЕМЕНТ, А НЕ СИСТЕМНЫЙ SELECT ───────────────────────── Системный