/* ============================================================================ CONTENT OPS — интерфейс как полевой измерительный прибор. Почему так: система не «показывает дашборд», она измеряет карточки (0–100), наблюдает за изменениями и увеличивает проблемные места. Язык приборов — засечки, шкалы, табличные цифры, латунные кольца настройки — здесь не декорация, а точное описание того, что происходит внутри. Палитра: графит и холодная сталь (ночная работа, низкая утомляемость), латунь как единственный акцент. Ярких неонов нет намеренно — прибор не мигает. ========================================================================== */ @font-face { font-family: 'Akrobat'; src: url('fonts/Akrobat-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Akrobat'; src: url('fonts/Akrobat-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Akrobat'; src: url('fonts/Akrobat-Black.otf') format('opentype'); font-weight: 900; font-display: swap; } :root { /* поверхности */ --ink: #0B1118; /* корпус прибора */ --ink-2: #0E1620; --panel: #111A24; /* лицевая панель модуля */ --panel-2: #16212D; --line: #1E2C3A; /* гравировка, засечки */ --line-lit: #2B3E52; /* текст */ --paper: #E6EDF3; /* основные показания */ --steel: #8095AA; /* подписи, вторичное */ /* Контраст к фону панели: было 3.6 — мелкие подписи («аудит 503478 от…») читались с трудом. Сейчас 5.7, выше нормы 4.5 для мелкого текста. */ --steel-dim:#7E93A8; /* акцент и состояния */ /* Акцент — личная настройка сотрудника (D-059). Здесь только значение по умолчанию; выбор человека приезжает переменной --accent-raw и подмешивается ниже. Для светлой темы тот же цвет затемняется: яркий акцент на белом слепит и перестаёт быть акцентом. */ --accent-raw: #C9922F; --brass: var(--accent-raw); --brass-lit: color-mix(in srgb, var(--accent-raw) 82%, #FFFFFF 18%); --pine: #4E8C6A; /* норма */ --rust: #B4503C; /* тревога */ --haze: #5B7C99; /* информация */ /* Поверхности взаимодействия и служебные оттенки — тоже переменные: иначе светлая тема получается тёмной в мелочах (наведение, сетка фона, подложка окна). */ --hover: rgba(255,255,255,.03); --hover-2: rgba(255,255,255,.024); --grid: rgba(255,255,255,.014); --scrim: rgba(11,17,24,.86); --btn-hover:#1B2836; --on-brass: #150F02; /* текст на латунной кнопке */ --ok-text: #7FC49B; --bad-text: #E08872; --info-text:#86A9C7; --radius: 10px; --tick: 1px; --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -18px rgba(0,0,0,.9); --display: 'Akrobat', system-ui, sans-serif; --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --data: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; } /* ── СВЕТЛАЯ ТЕМА ───────────────────────────────────────────────────────────── Не «инверсия», а тот же прибор при дневном свете: корпус из светлого металла, гравировка тёмная, латунь приглушена (на белом яркая латунь слепит и теряет роль единственного акцента). Зелёный и ржавый тоже темнее: на светлом фоне их светлые версии не читаются. Тема ставится атрибутом на , а не классом на body: разметка появляется позже CSS, и при классе на body страница успевала моргнуть тёмным. */ :root[data-theme="light"] { --ink: #EDF1F5; --ink-2: #E4EAF0; --panel: #FFFFFF; --panel-2: #F5F8FA; --line: #D3DBE3; --line-lit: #B2C0CE; --paper: #15202B; --steel: #55677A; --steel-dim:#55677A; /* было 2.9 к светлому фону — почти нечитаемо; стало 4.8 */ --brass: color-mix(in srgb, var(--accent-raw) 78%, #1A1206 22%); --brass-lit: color-mix(in srgb, var(--accent-raw) 90%, #1A1206 10%); --pine: #2E6B4A; --rust: #9A3B28; --haze: #3B6488; --hover: rgba(0,0,0,.045); --hover-2: rgba(0,0,0,.035); --grid: rgba(21,32,43,.05); --scrim: rgba(228,234,240,.88); --btn-hover:#E7EDF3; --on-brass: #FFFFFF; --ok-text: #246143; --bad-text: #8E3524; --info-text:#2F567A; --shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 26px -18px rgba(21,32,43,.4); } * { box-sizing: border-box; } /* Собственный display в классе (.app{flex}, .gate{grid}) перебивает браузерное [hidden]{display:none}, и «скрытый» блок остаётся на странице. Это правило возвращает hidden его смысл. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Фон корпуса: очень слабая сетка засечек — прибор, а не пустота */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px; z-index: 0; } /* ─────────────────────────────── типографика */ h1, h2, h3, .display { font-family: var(--display); font-weight: 700; letter-spacing: .01em; margin: 0; } h1 { font-size: 26px; } h2 { font-size: 19px; } h3 { font-size: 15px; } .eyebrow { font-family: var(--data); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-dim); } .num { font-family: var(--data); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ─────────────────────────────── каркас */ .app { display: flex; min-height: 100vh; position: relative; z-index: 1; } /* Рельс навигации — вертикальная шкала прибора с засечками */ .rail { width: 216px; flex: none; border-right: var(--tick) solid var(--line); background: linear-gradient(180deg, var(--ink-2), var(--ink)); padding: 20px 0 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { padding: 0 20px 18px; } .brand .mark { font-family: var(--display); font-weight: 900; font-size: 21px; letter-spacing: .02em; line-height: 1; color: var(--paper); } .brand .mark span { color: var(--brass); } .brand .sub { margin-top: 5px; } .nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 0; background: transparent; color: var(--steel); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; border-radius: 8px; position: relative; transition: color .18s ease, background .18s ease; } .nav-item svg { width: 17px; height: 17px; flex: none; opacity: .75; transition: opacity .18s ease; } .nav-item:hover { color: var(--paper); background: var(--hover); } .nav-item:hover svg { opacity: 1; } .nav-item.on { color: var(--paper); background: var(--panel); } .nav-item.on svg { opacity: 1; color: var(--brass); } /* активная засечка — риска слева, как отметка на шкале */ .nav-item.on::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; background: var(--brass); border-radius: 0 2px 2px 0; animation: tick-in .22s ease; } @keyframes tick-in { from { height: 0; opacity: 0; } to { height: 22px; opacity: 1; } } .nav-count { margin-left: auto; font-family: var(--data); font-size: 11px; padding: 1px 7px; border-radius: 20px; background: var(--line); color: var(--steel); } .nav-count.hot { background: rgba(180,80,60,.2); color: var(--bad-text); } .rail-foot { margin-top: auto; padding: 14px 20px 0; border-top: var(--tick) solid var(--line); } /* ─────────────────────────────── основное поле */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: 58px; flex: none; border-bottom: var(--tick) solid var(--line); display: flex; align-items: center; gap: 18px; padding: 0 26px; background: var(--scrim); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; } /* Индикатор свежести данных — как лампа на приборе */ .freshness { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--steel); } .lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--pine); box-shadow: 0 0 0 3px rgba(78,140,106,.16); animation: pulse 3.4s ease-in-out infinite; } .lamp.stale { background: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-raw) 16%, transparent); } .lamp.cold { background: var(--rust); box-shadow: 0 0 0 3px rgba(180,80,60,.16); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } .who { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13.5px; } .who .role { font-family: var(--data); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); border: var(--tick) solid color-mix(in srgb, var(--accent-raw) 35%, transparent); padding: 2px 8px; border-radius: 20px; } .page { padding: 26px; max-width: 1500px; width: 100%; } .page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-head .hint { color: var(--steel); font-size: 13.5px; max-width: 620px; } /* ─────────────────────────────── модули (bento) */ .grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; } @media (max-width: 1100px) { .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9 { grid-column: span 12; } } .mod { background: var(--panel); border: var(--tick) solid var(--line); border-radius: var(--radius); padding: 17px 19px; box-shadow: var(--shadow); position: relative; transition: border-color .2s ease, transform .2s ease; } .mod:hover { border-color: var(--line-lit); } /* Уголки визира — подпись интерфейса. Появляются на активном модуле */ .mod.sighted::after, .mod.sighted::before { content: ''; position: absolute; width: 11px; height: 11px; border: 1.5px solid var(--brass); opacity: .8; } .mod.sighted::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; } .mod.sighted::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; } .mod-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; } .mod-head .act { margin-left: auto; } /* ─────────────────────────────── показания */ .readout { display: flex; align-items: baseline; gap: 9px; } .readout .val { font-family: var(--data); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--paper); line-height: 1; } .readout .unit { font-size: 13px; color: var(--steel-dim); } .readout.warn .val { color: var(--brass); } .readout.bad .val { color: var(--rust); } /* ШКАЛА-ВИЗИР — главный элемент интерфейса. Не полоска прогресса, а измерительная шкала: засечки через 10, риска на значении. */ .scale { margin-top: 12px; } .scale-track { position: relative; height: 26px; border-bottom: var(--tick) solid var(--line-lit); } .scale-ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; } .scale-ticks i { width: var(--tick); background: var(--line-lit); height: 7px; align-self: flex-end; display: block; } .scale-ticks i:nth-child(5n+1) { height: 12px; background: var(--steel-dim); } .scale-mark { position: absolute; bottom: 0; width: 2px; height: 22px; background: var(--brass); box-shadow: 0 0 10px color-mix(in srgb, var(--accent-raw) 60%, transparent); transition: left .8s cubic-bezier(.22,1,.36,1); } .scale-mark::after { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 6px; height: 6px; background: var(--brass); } .scale-ghost { position: absolute; bottom: 0; width: var(--tick); height: 16px; background: var(--steel-dim); opacity: .8; } .scale-legend { display: flex; justify-content: space-between; font-family: var(--data); font-size: 10px; color: var(--steel-dim); margin-top: 5px; } /* дельта: рост или падение */ .delta { font-family: var(--data); font-size: 12.5px; } .delta.up { color: var(--pine); } .delta.down { color: var(--rust); } .delta.flat { color: var(--steel-dim); } /* ─────────────────────────────── воронка */ .funnel { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; } .funnel-row { display: flex; align-items: center; gap: 11px; } .funnel-row .lbl { width: 96px; font-size: 12.5px; color: var(--steel); flex: none; } .funnel-bar { flex: 1; height: 22px; background: var(--ink-2); border-radius: 3px; border: var(--tick) solid var(--line); overflow: hidden; position: relative; } .funnel-bar span { display: block; height: 100%; background: linear-gradient(90deg, rgba(91,124,153,.5), color-mix(in srgb, var(--accent-raw) 42%, transparent)); transform-origin: left; animation: bar-in .7s cubic-bezier(.22,1,.36,1) both; } @keyframes bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } } .funnel-row .cnt { width: 74px; text-align: right; font-family: var(--data); font-size: 13px; } .funnel-row .pct { width: 54px; text-align: right; font-family: var(--data); font-size: 11.5px; color: var(--steel-dim); } /* ─────────────────────────────── таблицы */ table.rows { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.rows th { text-align: left; font-weight: 500; color: var(--steel-dim); font-family: var(--data); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 0 10px 9px; border-bottom: var(--tick) solid var(--line); } table.rows td { padding: 11px 10px; border-bottom: var(--tick) solid var(--line); vertical-align: top; } table.rows tr:last-child td { border-bottom: 0; } table.rows tr.clickable { cursor: pointer; transition: background .15s ease; } table.rows tr.clickable:hover td { background: var(--hover-2); } table.rows td.n { font-family: var(--data); font-variant-numeric: tabular-nums; text-align: right; } /* ─────────────────────────────── элементы управления */ .btn { font: inherit; font-size: 13.5px; padding: 8px 15px; border-radius: 7px; border: var(--tick) solid var(--line-lit); background: var(--panel-2); color: var(--paper); cursor: pointer; /* Кнопкой бывает и ссылка — скачивание файла честнее делать , а не запросом из JS. Без этого браузер подчёркивает её, и в ряду кнопок одна выглядит чужой. */ text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .1s ease; display: inline-flex; align-items: center; gap: 7px; } .btn:hover { border-color: var(--steel-dim); background: var(--btn-hover); } .btn:active { transform: translateY(1px); } .btn svg { width: 15px; height: 15px; } .btn.primary { background: linear-gradient(180deg, var(--brass-lit), var(--brass)); border-color: rgba(0,0,0,.3); color: var(--on-brass); font-weight: 600; } .btn.primary:hover { filter: brightness(1.07); } .btn.ghost { background: transparent; border-color: var(--line); color: var(--steel); } .btn.ghost:hover { color: var(--paper); border-color: var(--line-lit); } .btn.danger { border-color: rgba(180,80,60,.4); color: var(--bad-text); background: rgba(180,80,60,.08); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn.sm { padding: 5px 11px; font-size: 12.5px; } input[type=text], input[type=number], textarea, select { width: 100%; font: inherit; font-size: 14px; background: var(--ink-2); border: var(--tick) solid var(--line); border-radius: 7px; color: var(--paper); padding: 9px 12px; transition: border-color .16s ease, box-shadow .16s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-raw) 12%, transparent); } textarea { resize: vertical; min-height: 74px; line-height: 1.5; } /* .field — не только на