/* ============================================================================= Vault — портал сервиса. Единая таблица стилей. Собрана вручную, без препроцессора и без внешних ресурсов: ни @import, ни url() наружу, ни шрифтовых файлов. Страницы полностью работают с выключенным JavaScript — интерактив сведён к
и :focus-visible. Порядок секций: 01 Токены и темы 02 Сброс и база документа 03 Типографика 04 Каркас: контейнеры, секции, разделители 05 Шапка и навигация (мобильное меню без JS) 06 Кнопки 07 Поверхности: панели, стекло, оконный макет 08 Таблицы 09 Бейджи, статусы, полоса аптайма 10 Код и моноширинные фрагменты 11 Схема потока, шаги, списки определений 12 Формы 13 Оглавление документации и якоря 14 Сетки и утилиты 15 Футер 16 Появление, движение, печать ========================================================================== */ /* ============================================================================= 01. ТОКЕНЫ И ТЕМЫ Светлая тема лежит в :root и служит фолбэком. Тёмная приходит двумя путями: системной настройкой (prefers-color-scheme) и явным атрибутом data-theme на . Атрибут всегда сильнее системы — так переключатель, если его когда-нибудь добавят вместе с assets/app.js, работает в обе стороны. ========================================================================== */ :root { /* --- монохромная база: не меняется между темами --- */ --white: #ffffff; --very-light-gray: #e8e8e8; --light-gray: #c4c4c4; --gray: #676767; --dark-gray: #191919; --very-dark-gray: #141414; --black: #111111; /* --- шрифты --- */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PT Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace; /* --- шкала кегля --- */ --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px; /* --- веса --- */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --- отступы --- */ --sp-2xs: 2px; --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-2xl: 32px; --sp-3xl: 48px; --sp-4xl: 72px; /* --- радиусы --- */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; /* --- тайминги --- */ --t-fast: 0.15s ease; --t-normal: 0.2s ease; --t-slow: 0.3s ease; /* --- геометрия каркаса --- */ --header-h: 60px; --wrap: 1180px; --wrap-narrow: 900px; --pad-x: clamp(16px, 4vw, 40px); /* --- слои --- */ --z-bg: 0; --z-content: 1; --z-header: 100; --z-menu: 110; } /* --- Светлая тема (по умолчанию) ------------------------------------------ */ :root, :root[data-theme="light"] { --page-bg: #ffffff; --surface: #ffffff; --surface-alt: #fafafa; --surface-sunken: #f4f4f4; --text-primary: #191919; --text-secondary: #676767; --text-faint: #8a8a8a; --border: #d6d6d6; --border-strong: #c4c4c4; --accent: #191919; --button-bg: #191919; --button-bg-hover: #141414; --button-bg-active: #111111; --button-text: #ffffff; --button-bg-disabled: #c4c4c4; --button-text-disabled: rgba(255, 255, 255, 0.72); --button-outline-border: #c4c4c4; --button-outline-text: #4a4a4a; --button-outline-bg-hover: #e8e8e8; --button-subtle-text: #676767; --button-subtle-bg-hover: #e8e8e8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08); --form-shadow: rgba(0, 0, 0, 0.08); --form-shadow-hover: rgba(0, 0, 0, 0.12); --glass-overlay: rgba(255, 255, 255, 0.62); --glass-border: rgba(255, 255, 255, 0.7); --glass-inset: rgba(255, 255, 255, 0.9); --header-bg: rgba(255, 255, 255, 0.82); --tile-bg: #c4c4c4; --tint: rgba(59, 130, 246, 0.045); /* статусные цвета: приглушённые, чтобы монохром оставался главным */ --ok: #3f7a48; --ok-bg: rgba(63, 122, 72, 0.1); --warn: #8a6a1c; --warn-bg: rgba(138, 106, 28, 0.12); --error: #d32f2f; --error-bg: rgba(211, 47, 47, 0.09); color-scheme: light; } /* --- Тёмная тема (явный выбор) -------------------------------------------- */ :root[data-theme="dark"] { --page-bg: #141414; --surface: #191919; --surface-alt: #1d1d1d; --surface-sunken: #111111; --text-primary: #ffffff; --text-secondary: #c4c4c4; --text-faint: #949494; --border: #333333; --border-strong: #4a4a4a; --accent: #e8e8e8; --button-bg: #ffffff; --button-bg-hover: #e8e8e8; --button-bg-active: #c4c4c4; --button-text: #191919; --button-bg-disabled: #676767; --button-text-disabled: rgba(25, 25, 25, 0.72); --button-outline-border: #4a4a4a; --button-outline-text: #c4c4c4; --button-outline-bg-hover: #232323; --button-subtle-text: #c4c4c4; --button-subtle-bg-hover: #232323; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); --form-shadow: rgba(0, 0, 0, 0.35); --form-shadow-hover: rgba(0, 0, 0, 0.45); --glass-overlay: rgba(25, 25, 25, 0.55); --glass-border: rgba(255, 255, 255, 0.12); --glass-inset: rgba(255, 255, 255, 0.14); --header-bg: rgba(20, 20, 20, 0.82); --tile-bg: #1f1f1f; --tint: rgba(59, 130, 246, 0.06); --ok: #7bbd85; --ok-bg: rgba(123, 189, 133, 0.12); --warn: #d8b551; --warn-bg: rgba(216, 181, 81, 0.12); --error: #f44336; --error-bg: rgba(244, 67, 54, 0.14); color-scheme: dark; } /* --- Тёмная тема по системной настройке ----------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page-bg: #141414; --surface: #191919; --surface-alt: #1d1d1d; --surface-sunken: #111111; --text-primary: #ffffff; --text-secondary: #c4c4c4; --text-faint: #949494; --border: #333333; --border-strong: #4a4a4a; --accent: #e8e8e8; --button-bg: #ffffff; --button-bg-hover: #e8e8e8; --button-bg-active: #c4c4c4; --button-text: #191919; --button-bg-disabled: #676767; --button-text-disabled: rgba(25, 25, 25, 0.72); --button-outline-border: #4a4a4a; --button-outline-text: #c4c4c4; --button-outline-bg-hover: #232323; --button-subtle-text: #c4c4c4; --button-subtle-bg-hover: #232323; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); --form-shadow: rgba(0, 0, 0, 0.35); --form-shadow-hover: rgba(0, 0, 0, 0.45); --glass-overlay: rgba(25, 25, 25, 0.55); --glass-border: rgba(255, 255, 255, 0.12); --glass-inset: rgba(255, 255, 255, 0.14); --header-bg: rgba(20, 20, 20, 0.82); --tile-bg: #1f1f1f; --tint: rgba(59, 130, 246, 0.06); --ok: #7bbd85; --ok-bg: rgba(123, 189, 133, 0.12); --warn: #d8b551; --warn-bg: rgba(216, 181, 81, 0.12); --error: #f44336; --error-bg: rgba(244, 67, 54, 0.14); color-scheme: dark; } } /* ============================================================================= 02. СБРОС И БАЗА ДОКУМЕНТА Минимальный сброс: только то, что мешает. Тег остаётся тегом. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* якорь не должен уезжать под липкую шапку */ scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-size: var(--fs-md); line-height: 1.55; color: var(--text-primary); background-color: var(--page-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color var(--t-slow), color var(--t-slow); } img, svg, video { max-width: 100%; } svg { display: block; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-2xl) 0; } ::selection { background: var(--text-primary); color: var(--page-bg); } /* Скрытие для скринридеров наоборот: видно только читалке */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Ссылка «к содержимому» — первый фокусируемый элемент страницы */ .skip-link { position: absolute; left: var(--sp-lg); top: -100px; z-index: 200; padding: 10px 16px; border-radius: var(--r-lg); background: var(--button-bg); color: var(--button-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); transition: top var(--t-fast); } .skip-link:focus { top: var(--sp-sm); } /* --- Фокус ---------------------------------------------------------------- */ :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } summary:focus { outline: none; } summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================================= 03. ТИПОГРАФИКА Заголовки чуть плотнее по интерлиньяжу и с лёгким отрицательным трекингом — так системный шрифт ближе к фирменному оригиналу. ========================================================================== */ h1, h2, h3, h4 { margin: 0 0 var(--sp-md); font-weight: var(--fw-semibold); letter-spacing: -0.4px; line-height: 1.18; text-wrap: balance; } h1 { font-size: clamp(28px, 4.6vw, 44px); line-height: 1.08; letter-spacing: -1px; font-weight: var(--fw-bold); } h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.6px; } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-md); font-weight: var(--fw-semibold); } p { margin: 0 0 var(--sp-lg); } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } /* Ссылка внутри текста — подчёркнута, чтобы её видно было без цвета */ .prose a, a.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: text-decoration-color var(--t-normal), color var(--t-normal); } .prose a:hover, a.link:hover { text-decoration-color: currentColor; } strong, b { font-weight: var(--fw-semibold); } small { font-size: var(--fs-sm); } /* Надзаголовок секции: мелкий капс моноширинным */ .eyebrow { margin: 0 0 var(--sp-md); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-secondary); } /* Лид-абзац под заголовком */ .lede { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-secondary); max-width: 62ch; } /* Мелкая сноска под таблицей или блоком */ .note { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); max-width: 78ch; } /* Абзацный текст документации: ограниченная мера строки */ .prose { max-width: 74ch; } .prose h2 { margin-top: var(--sp-2xl); } .prose h3 { margin-top: var(--sp-xl); } .prose ul, .prose ol { margin: 0 0 var(--sp-lg); padding-left: 1.35em; } .prose li { margin-bottom: var(--sp-sm); } .prose li:last-child { margin-bottom: 0; } /* Список с тире вместо маркеров — суше и ближе к техдоку */ .list-dash { list-style: none; margin: 0 0 var(--sp-lg); padding: 0; } .list-dash li { position: relative; padding-left: 20px; margin-bottom: var(--sp-sm); } .list-dash li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--border-strong); } /* ============================================================================= 04. КАРКАС: КОНТЕЙНЕРЫ, СЕКЦИИ, РАЗДЕЛИТЕЛИ ========================================================================== */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .wrap--narrow { max-width: var(--wrap-narrow); } main { flex: 1 0 auto; } /* Секция — вертикальный ритм страницы. Модификаторы меняют плотность, а не только размер: разреженные и плотные секции должны чередоваться. */ .section { padding-top: var(--sp-4xl); padding-bottom: var(--sp-4xl); } .section--tight { padding-top: var(--sp-2xl); padding-bottom: var(--sp-2xl); } .section--airy { padding-top: calc(var(--sp-4xl) * 1.35); padding-bottom: calc(var(--sp-4xl) * 1.35); } .section--divided { border-top: 1px solid var(--border); } .section--sunken { background: var(--surface-alt); } /* Заголовок секции с надзаголовком и подписью */ .section-head { margin-bottom: var(--sp-2xl); max-width: 68ch; } .section-head h2 { margin-bottom: var(--sp-md); } .section-head p { color: var(--text-secondary); margin-bottom: 0; } /* Хлебные крошки */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-lg); font-size: var(--fs-sm); color: var(--text-secondary); } .crumbs a { transition: color var(--t-normal); } .crumbs a:hover { color: var(--text-primary); } .crumbs span[aria-current] { color: var(--text-primary); font-weight: var(--fw-semibold); } .crumbs .sep { color: var(--text-faint); } /* ============================================================================= 05. ШАПКА И НАВИГАЦИЯ Мобильное меню — на
/: раскрывается без единой строки JS, доступно с клавиатуры, читается скринридером как кнопка-раскрытие. ========================================================================== */ .hdr { position: sticky; top: 0; z-index: var(--z-header); border-bottom: 1px solid var(--border); background: var(--header-bg); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); } .hdr__in { display: flex; align-items: center; gap: var(--sp-xl); height: var(--header-h); } /* --- логотип --- */ .brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--text-primary); } .brand__mark { width: 21px; height: auto; color: var(--text-primary); transition: transform var(--t-slow); } .brand:hover .brand__mark { transform: scale(1.03); } .brand__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.5px; } .brand__desc { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--border); white-space: nowrap; } /* --- горизонтальное меню (десктоп) --- */ .nav { display: flex; align-items: center; gap: var(--sp-xs); margin-left: auto; } .nav a { position: relative; padding: 8px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); transition: color var(--t-normal), background-color var(--t-normal); } .nav a:hover { color: var(--text-primary); background: var(--button-subtle-bg-hover); } .nav a[aria-current="page"] { color: var(--text-primary); font-weight: var(--fw-semibold); } .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: currentColor; } .hdr__actions { display: flex; align-items: center; gap: var(--sp-sm); flex: none; } /* --- мобильное меню на details --- */ .menu { position: relative; flex: none; display: none; } .menu > summary { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); color: var(--text-secondary); cursor: pointer; list-style: none; transition: color var(--t-normal), border-color var(--t-normal); } .menu > summary::-webkit-details-marker { display: none; } .menu > summary::marker { content: ""; } .menu > summary:hover { color: var(--text-primary); border-color: var(--text-secondary); } .menu[open] > summary { color: var(--text-primary); border-color: var(--text-primary); } .menu__icon-close { display: none; } .menu[open] .menu__icon-open { display: none; } .menu[open] .menu__icon-close { display: block; } .menu__panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-menu); min-width: 232px; padding: var(--sp-sm); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-lg); } .menu__panel a { display: block; padding: 10px 12px; border-radius: var(--r-lg); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); transition: color var(--t-normal), background-color var(--t-normal); } .menu__panel a:hover { color: var(--text-primary); background: var(--button-subtle-bg-hover); } .menu__panel a[aria-current="page"] { color: var(--text-primary); font-weight: var(--fw-semibold); } @media (max-width: 900px) { .nav { display: none; } .menu { display: block; } .brand__desc { display: none; } .hdr__actions { margin-left: auto; } } @media (max-width: 380px) { .hdr__actions .btn { padding: 8px 12px; } } /* ============================================================================= 06. КНОПКИ Фирменный приём: кнопка инвертирована относительно фона. На светлой теме тёмная, на тёмной — светлая. ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm); padding: 10px 20px; border: 1px solid transparent; border-radius: var(--r-lg); font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.2; text-align: center; cursor: pointer; background: var(--button-bg); color: var(--button-text); box-shadow: var(--shadow-md); transition: background-color var(--t-normal), transform var(--t-normal), border-color var(--t-normal), color var(--t-normal); } .btn:hover { background: var(--button-bg-hover); transform: translateY(-1px); } .btn:active { background: var(--button-bg-active); transform: none; } .btn[disabled], .btn[aria-disabled="true"] { background: var(--button-bg-disabled); color: var(--button-text-disabled); box-shadow: none; cursor: not-allowed; transform: none; } .btn--outline { background: transparent; border-color: var(--button-outline-border); color: var(--button-outline-text); box-shadow: none; } .btn--outline:hover { background: var(--button-outline-bg-hover); color: var(--text-primary); } .btn--subtle { background: transparent; border-color: transparent; color: var(--button-subtle-text); box-shadow: none; } .btn--subtle:hover { background: var(--button-subtle-bg-hover); color: var(--text-primary); } .btn--lg { padding: 13px 26px; font-size: var(--fs-md); } .btn--sm { padding: 7px 14px; font-size: var(--fs-xs); } .btn--block { display: flex; width: 100%; } .btn__icon { width: 16px; height: 16px; flex: none; } /* Ряд кнопок */ .actions { display: flex; flex-wrap: wrap; gap: var(--sp-md); } /* ============================================================================= 07. ПОВЕРХНОСТИ: ПАНЕЛИ, СТЕКЛО, ОКОННЫЙ МАКЕТ ========================================================================== */ /* Панель — рабочая лошадка: 1px-граница, скромный радиус, без тени */ .panel { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); padding: var(--sp-xl); } .panel--flat { background: transparent; } .panel--sunken { background: var(--surface-alt); } .panel--raised { box-shadow: var(--shadow-md); } .panel__title { margin: 0 0 var(--sp-sm); font-size: var(--fs-md); font-weight: var(--fw-semibold); } .panel__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); } /* Врезка-оговорка: то, о чём честно предупреждают в доке */ .callout { border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--surface-alt); padding: var(--sp-lg) var(--sp-xl); font-size: var(--fs-sm); line-height: 1.55; } .callout__label { display: block; margin-bottom: var(--sp-xs); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); } .callout--warn { border-left-color: var(--warn); background: var(--warn-bg); } .callout--warn .callout__label { color: var(--warn); } .callout--legacy { border-left-color: var(--text-faint); } /* Стекло. Базовый вариант — только blur, работает везде. Модификатор .glass--warp дополнительно тянет SVG-фильтр #glass-warp, который страница обязана объявить у себя инлайном; без него слой деградирует до обычного размытия и ничего не ломает. */ .glass { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-3xl); background: transparent; box-shadow: 0 0 32px var(--form-shadow), 0 8px 32px var(--form-shadow-hover), inset 0 1px 0 var(--glass-inset); } .glass > * { position: relative; z-index: 1; } .glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--glass-overlay); border: 1px solid var(--glass-border); } .glass::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); } .glass--warp::after { filter: url(#glass-warp); -webkit-filter: url(#glass-warp); } /* Фоновая сетка плиток. Живёт только за первым экраном и за формой входа — на внутренних страницах её быть не должно. */ .tilebg { position: absolute; inset: 0; z-index: var(--z-bg); overflow: hidden; pointer-events: none; display: grid; grid-template-rows: repeat(4, 1fr); gap: 16px; width: 160vw; height: 160vh; left: -30vw; top: -30vh; transform: rotate(-15deg); transform-origin: center; opacity: 0.55; } .tilebg__row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; will-change: transform; } .tilebg__row:nth-child(odd) { animation: drift-right 26s linear infinite alternate; } .tilebg__row:nth-child(even) { animation: drift-left 30s linear infinite alternate; } .tilebg__tile { border-radius: 10px; background: var(--tile-bg); } @keyframes drift-right { from { transform: translateX(-52px); } to { transform: translateX(52px); } } @keyframes drift-left { from { transform: translateX(52px); } to { transform: translateX(-52px); } } /* Виньетка, топящая края сетки в фон страницы */ .vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 92% at 58% 22%, transparent 0%, var(--page-bg) 76%); } /* Едва заметная холодная подсветка первого экрана. Монохром сохраняется — это оттенок стекла, а не акцентный цвет. */ .tinted { position: relative; overflow: hidden; } .tinted::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(680px 460px at 88% -8%, var(--tint), transparent 70%); } .tinted > * { position: relative; } /* --- Оконный макет кабинета (иллюстрация на первом экране) ----------------- */ .mock { border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-lg); } .mock__chrome { display: flex; align-items: center; gap: var(--sp-sm); padding: 11px var(--sp-lg); border-bottom: 1px solid var(--border); background: var(--surface-alt); } .mock__chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); flex: none; } .mock__title { margin-left: var(--sp-sm); font-size: var(--fs-xs); color: var(--text-secondary); } .mock__body { display: grid; grid-template-columns: 156px minmax(0, 1fr); } .mock__rail { padding: var(--sp-md); border-right: 1px solid var(--border); background: var(--surface-alt); } .mock__main { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-lg); min-width: 0; } .mock__foot { display: flex; flex-wrap: wrap; gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-secondary); } .mock__foot span { display: inline-flex; align-items: center; gap: 6px; } .railgroup { margin-bottom: var(--sp-lg); } .railgroup:last-child { margin-bottom: 0; } .railgroup h4 { margin: 0 0 var(--sp-sm); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); } .railgroup ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); } .railgroup li { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: var(--r-md); color: var(--text-secondary); } .railgroup li.is-active { color: var(--text-primary); background: var(--button-subtle-bg-hover); } /* Полоса прогресса чанковой передачи */ .progress { height: 8px; border-radius: 20px; background: var(--surface-sunken); border: 1px solid var(--border); overflow: hidden; } .progress > i { display: block; height: 100%; background: repeating-linear-gradient( 45deg, var(--text-primary) 0 6px, var(--text-secondary) 6px 12px ); } .progress__meta { display: flex; justify-content: space-between; gap: var(--sp-md); margin-top: var(--sp-sm); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); } /* ============================================================================= 08. ТАБЛИЦЫ Любую таблицу оборачивать в .table-scroll — на 320px иначе поедет вёрстка. ========================================================================== */ .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-xl); -webkit-overflow-scrolling: touch; } .table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-sm); } .table caption { padding: var(--sp-md) var(--sp-lg); text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid var(--border); background: var(--surface-alt); } .table th { text-align: left; padding: var(--sp-md) var(--sp-lg); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-secondary); background: var(--surface-alt); border-bottom: 1px solid var(--border); white-space: nowrap; } .table td { padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-secondary); } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover td { background: var(--surface-alt); color: var(--text-primary); } .table td.is-key, .table td .code-inline { color: var(--text-primary); } .table th[scope="row"] { background: transparent; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--text-primary); border-bottom: 1px solid var(--border); } .table--fixed { min-width: 640px; } .table--compact th, .table--compact td { padding: var(--sp-sm) var(--sp-md); } /* ============================================================================= 09. БЕЙДЖИ, СТАТУСЫ, ПОЛОСА АПТАЙМА Статусные цвета намеренно приглушены: на странице статуса они работают, на остальных не спорят с монохромом. ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 20px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.5; color: var(--text-secondary); white-space: nowrap; } .badge--ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); } .badge--warn { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); } .badge--error { color: var(--error); border-color: var(--error); background: var(--error-bg); } .badge--legacy { color: var(--text-secondary); border-style: dashed; background: transparent; } .badge--mono { font-family: var(--font-mono); font-weight: var(--fw-medium); } /* Точка-индикатор */ .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: none; } .dot--ok { background: var(--ok); } .dot--warn { background: var(--warn); } .dot--error { background: var(--error); } .dot--live { background: var(--ok); animation: dot-pulse 2.2s ease-in-out infinite; } @keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* Крупная плашка сводного состояния (страница статуса) */ .state { display: flex; align-items: center; gap: var(--sp-lg); padding: var(--sp-xl); border: 1px solid var(--border); border-left: 4px solid var(--ok); border-radius: var(--r-xl); background: var(--surface); } .state--warn { border-left-color: var(--warn); } .state--error { border-left-color: var(--error); } .state__title { margin: 0 0 var(--sp-xs); font-size: var(--fs-xl); font-weight: var(--fw-semibold); } .state__sub { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } /* Строка компонента: имя слева, бейдж справа, полоса аптайма под ними */ .component { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-sm) var(--sp-lg); align-items: center; padding: var(--sp-lg) 0; border-bottom: 1px solid var(--border); } .component:last-child { border-bottom: 0; } .component__name { font-weight: var(--fw-medium); } .component__path { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; } .component__uptime { grid-column: 1 / -1; } /* Полоса аптайма: отдельные сегменты с нативной подсказкой в title */ .uptime { display: flex; gap: 2px; height: 26px; align-items: stretch; } .uptime i { flex: 1 1 auto; min-width: 2px; border-radius: 2px; background: var(--ok); opacity: 0.72; transition: opacity var(--t-fast); } .uptime i:hover { opacity: 1; } .uptime i.is-warn { background: var(--warn); } .uptime i.is-error { background: var(--error); } .uptime i.is-none { background: var(--border); } .uptime__scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--fs-xs); color: var(--text-secondary); } /* Инцидент в истории */ .incident { padding: var(--sp-lg) 0; border-bottom: 1px solid var(--border); } .incident:last-child { border-bottom: 0; } .incident__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-md); margin-bottom: var(--sp-sm); } .incident__date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; } .incident__title { font-weight: var(--fw-semibold); } .incident p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } /* ============================================================================= 10. КОД И МОНОШИРИННЫЕ ФРАГМЕНТЫ ========================================================================== */ code, kbd, samp, pre { font-family: var(--font-mono); } .code-inline { font-family: var(--font-mono); font-size: 0.9em; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-alt); white-space: nowrap; } /* Блок кода: заголовок с методом и путём, тело со скроллом по горизонтали */ .code { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface-sunken); overflow: hidden; margin: 0 0 var(--sp-lg); } .code__head { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-sm) var(--sp-lg); border-bottom: 1px solid var(--border); background: var(--surface-alt); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); } .code__method { font-weight: var(--fw-bold); color: var(--text-primary); letter-spacing: 0.5px; } .code__path { color: var(--text-primary); } .code__tag { margin-left: auto; } .code pre { margin: 0; padding: var(--sp-lg); overflow-x: auto; font-size: 13px; line-height: 1.65; color: var(--text-primary); -webkit-overflow-scrolling: touch; tab-size: 2; } .code pre .c { color: var(--text-faint); } /* комментарий */ .code pre .k { color: var(--text-secondary); } /* ключ/заголовок */ /* Список пар «ключ — значение» моноширинным (паспорт сервиса, лимиты) */ .speclist { margin: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--sp-md) var(--sp-lg); font-family: var(--font-mono); font-size: 13px; } .speclist dt { color: var(--text-secondary); } .speclist dd { margin: 0; color: var(--text-primary); text-align: right; overflow-wrap: anywhere; } /* ============================================================================= 11. СХЕМА ПОТОКА, ШАГИ, ЛЕНТА ========================================================================== */ /* Горизонтальный поток init → parts → complete → resume. Узлы намеренно разной ширины: ровная сетка из одинаковых блоков читается как шаблон. */ .flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-md); margin: 0 0 var(--sp-lg); padding: 0; list-style: none; } .flow__node { flex: 1 1 150px; padding: var(--sp-lg); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); } .flow__node--wide { flex: 1.6 1 220px; } .flow__node--aside { flex: 0 1 190px; border-style: dashed; background: transparent; } .flow__step { display: block; margin-bottom: var(--sp-xs); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); } .flow__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); } .flow__desc { margin: var(--sp-xs) 0 0; font-size: var(--fs-xs); color: var(--text-secondary); } .flow__arrow { align-self: center; flex: none; color: var(--text-faint); font-size: var(--fs-lg); line-height: 1; } @media (max-width: 640px) { .flow { flex-direction: column; } .flow__arrow { transform: rotate(90deg); align-self: flex-start; margin-left: var(--sp-lg); } } /* Нумерованные шаги с крупной цифрой */ .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; } .steps > li { counter-increment: step; position: relative; padding-left: 46px; padding-bottom: var(--sp-xl); } .steps > li:last-child { padding-bottom: 0; } .steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 50%; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); } .steps h3 { margin: 2px 0 var(--sp-sm); font-size: var(--fs-md); } .steps p { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); } /* Полоса кодов регионов под первым экраном */ .strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .strip__in { display: flex; flex-wrap: wrap; padding: 0; } .strip a { flex: 1 1 150px; display: flex; flex-direction: column; gap: 3px; padding: var(--sp-lg) var(--sp-lg); border-right: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); transition: background-color var(--t-normal), color var(--t-normal); } .strip a:last-child { border-right: 0; } .strip a:hover { background: var(--surface-alt); color: var(--text-primary); } .strip__code { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); } @media (max-width: 640px) { .strip a { flex-basis: 50%; border-bottom: 1px solid var(--border); } .strip a:nth-child(2n) { border-right: 0; } } /* ============================================================================= 12. ФОРМЫ На портале нет ни одного поля пароля и ни одной отправки данных наружу. Стили нужны для страницы входа: рабочая почта в поле и кнопка SSO. ========================================================================== */ .field { position: relative; margin-bottom: var(--sp-xl); } .field__label { display: block; margin-bottom: var(--sp-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); } .field__control { display: block; width: 100%; padding: 11px 14px; font-family: inherit; font-size: var(--fs-md); color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); outline: none; transition: border-color var(--t-normal), box-shadow var(--t-normal); } .field__control::placeholder { color: var(--text-faint); } .field__control:hover { border-color: var(--text-secondary); } .field__control:focus { border-color: var(--text-primary); box-shadow: 0 0 0 3px var(--surface-alt); } .field__hint { margin-top: var(--sp-sm); font-size: var(--fs-xs); color: var(--text-secondary); } .field--error .field__control { border-color: var(--error); background: var(--error-bg); } .field__error { margin-top: var(--sp-sm); padding: 6px 12px; border-radius: var(--r-lg); background: var(--error-bg); color: var(--error); font-size: var(--fs-sm); } /* Разделитель «или» между способами входа */ .divider { display: flex; align-items: center; gap: var(--sp-md); margin: var(--sp-xl) 0; font-size: var(--fs-xs); letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); } .divider::before, .divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); } /* ============================================================================= 13. ОГЛАВЛЕНИЕ ДОКУМЕНТАЦИИ И ЯКОРЯ ========================================================================== */ .doc { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--sp-3xl); align-items: start; } .doc__toc { position: sticky; top: calc(var(--header-h) + var(--sp-xl)); max-height: calc(100vh - var(--header-h) - var(--sp-3xl)); overflow-y: auto; padding-right: var(--sp-sm); font-size: var(--fs-sm); } .doc__toc h2 { margin: 0 0 var(--sp-md); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); } .doc__toc ol { list-style: none; margin: 0; padding: 0; } .doc__toc li { margin-bottom: 2px; } .doc__toc a { display: block; padding: 6px 10px; border-left: 1px solid var(--border); color: var(--text-secondary); transition: color var(--t-normal), border-color var(--t-normal), background-color var(--t-normal); } .doc__toc a:hover { color: var(--text-primary); border-left-color: var(--text-primary); background: var(--surface-alt); } .doc__body > section { padding-bottom: var(--sp-3xl); } .doc__body > section:last-child { padding-bottom: 0; } /* Заголовок раздела с постоянной ссылкой-якорем */ .anchor { display: inline-flex; align-items: baseline; gap: var(--sp-sm); } .anchor__hash { font-family: var(--font-mono); font-size: 0.6em; font-weight: var(--fw-normal); color: var(--text-faint); opacity: 0; transition: opacity var(--t-normal); } .anchor:hover .anchor__hash, .anchor__hash:focus-visible { opacity: 1; } @media (max-width: 900px) { .doc { grid-template-columns: 1fr; gap: var(--sp-2xl); } .doc__toc { position: static; max-height: none; padding: var(--sp-lg); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface-alt); } .doc__toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px; } } /* ============================================================================= 14. СЕТКИ И УТИЛИТЫ Сетки сознательно неравные: .split даёт асимметричные колонки, а .cards разрешает элементам занимать разную ширину через .span-2. ========================================================================== */ .split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-3xl); align-items: start; } .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } .split--center { align-items: center; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-xl); } .cards--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .span-2 { grid-column: span 2; } .stack > * + * { margin-top: var(--sp-lg); } .stack--tight > * + * { margin-top: var(--sp-sm); } .stack--loose > * + * { margin-top: var(--sp-2xl); } .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-md); } .row--between { justify-content: space-between; } .mono { font-family: var(--font-mono); } .muted { color: var(--text-secondary); } .faint { color: var(--text-faint); } .nowrap { white-space: nowrap; } .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-lg { margin-top: var(--sp-lg); } .mt-xl { margin-top: var(--sp-xl); } .mt-2xl { margin-top: var(--sp-2xl); } .mb-lg { margin-bottom: var(--sp-lg); } .mb-xl { margin-bottom: var(--sp-xl); } .mb-2xl { margin-bottom: var(--sp-2xl); } /* Элемент показывается только когда на есть класс js. Без скрипта такой элемент не появится — значит, мёртвых кнопок не будет. */ .js-only { display: none; } .js .js-only { display: revert; } @media (max-width: 900px) { .split, .split--even, .split--reverse { grid-template-columns: 1fr; gap: var(--sp-2xl); } .span-2 { grid-column: auto; } } @media (max-width: 560px) { .cards, .cards--2 { grid-template-columns: 1fr; } .speclist { grid-template-columns: 1fr; gap: var(--sp-xs) 0; } .speclist dd { text-align: left; margin-bottom: var(--sp-sm); } .panel { padding: var(--sp-lg); } .state { flex-direction: column; align-items: flex-start; } } /* ============================================================================= 15. ФУТЕР ========================================================================== */ .ftr { flex: none; margin-top: var(--sp-4xl); border-top: 1px solid var(--border); background: var(--surface-alt); } .ftr__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-2xl); padding-top: var(--sp-3xl); padding-bottom: var(--sp-2xl); } .ftr__col h3 { margin: 0 0 var(--sp-md); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); } .ftr__col ul { list-style: none; margin: 0; padding: 0; } .ftr__col li { margin-bottom: var(--sp-sm); } .ftr__col a { font-size: var(--fs-sm); color: var(--text-secondary); transition: color var(--t-normal); } .ftr__col a:hover { color: var(--text-primary); } .ftr__col p { margin: 0 0 var(--sp-sm); font-size: var(--fs-sm); color: var(--text-secondary); } .ftr__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-md) var(--sp-xl); padding-top: var(--sp-lg); padding-bottom: var(--sp-2xl); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-secondary); } .ftr__bottom .brand__mark { width: 16px; } .ftr__sign { display: inline-flex; align-items: center; gap: var(--sp-sm); } /* ============================================================================= 16. ПОЯВЛЕНИЕ, ДВИЖЕНИЕ, ПЕЧАТЬ Правило: контент виден всегда. Анимация только добавляет вход, никогда не оставляет элемент невидимым, если что-то не поддержано. ========================================================================== */ /* Вход при загрузке — для первого экрана. Заканчивается видимым состоянием. */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rise { animation: rise 0.55s ease both; } .rise-1 { animation-delay: 0.04s; } .rise-2 { animation-delay: 0.1s; } .rise-3 { animation-delay: 0.17s; } .rise-4 { animation-delay: 0.24s; } /* Появление по скроллу — только там, где браузер умеет view()-таймлайн. Где не умеет, ничего не происходит и контент просто на месте. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .reveal { animation: rise 0.7s ease both; animation-timeline: view(); animation-range: entry 8% cover 26%; } } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .tilebg__row, .dot--live { animation: none !important; } html { scroll-behavior: auto; } } @media print { .hdr, .ftr, .tilebg, .vignette, .menu, .skip-link { display: none !important; } body { background: #fff; color: #000; } .panel, .code, .table-scroll { border-color: #999; } .code pre { white-space: pre-wrap; word-break: break-word; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; } }