/* Операторская — стиль Карты стройки («Матрица» + G.MEDIA), токены один в один (docs/second-screen-4-windows.md). HQ1.1, 30.09 */ :root { --ground: #020604; --surface: #06100a; --ink: #c8f5d3; --muted: #6fa982; --line: #123a22; --chip: #0a1c11; --accent: #33d37f; --accent-soft: rgba(51, 211, 127, .09); --review: #38d9ff; --decide: #ffd23f; --blocked: #ff4d5e; --done: #7ee2a8; --claude: #33d37f; --codex: #38d9ff; --display: "Unbounded", "Inter", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* прежние имена — на новые токены */ --bg: var(--ground); --panel: var(--surface); --panel2: var(--chip); --text: var(--ink); --dim: #3f6b4f; --info: var(--review); --warn: var(--decide); --crit: var(--blocked); --work: var(--accent); --wait: var(--decide); --pause: #a78bfa; --unseen: #1a2e22; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.45 var(--body); } body { overflow-x: hidden; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--muted); } .dim { color: var(--dim); } .mono { font-family: var(--mono); } /* ── Матрица: дождь и скан-линии, приглушённо ── */ #rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .13; pointer-events: none; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; } #app { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { #rain { display: none; } } .sec-h, .col h2 { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; margin: 0; text-shadow: 0 0 8px rgba(51,211,127,.5); } .sec-h::before, .col h2::before { content: "> "; color: var(--muted); } .pulse-h { display: none; } @media (max-width: 640px) { body.screen .pulse-h { display: block; } } body.tile.screen .pulse-h { display: block; } /* ── вход ── */ .login { min-height: 100vh; display: grid; place-items: center; padding: 16px; } .login .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; max-width: 440px; width: 100%; text-align: center; box-shadow: 0 0 18px rgba(51,211,127,.05) inset; } .login h1 { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 0 0 6px; color: var(--accent); text-transform: uppercase; text-shadow: 0 0 12px rgba(51,211,127,.45); } .login p { margin: 8px 0 18px; color: var(--muted); } .login #gbtn { display: flex; justify-content: center; min-height: 44px; } /* вход — как Карта: строка бренда, «> ЗАГОЛОВОК», подсказка моноширинным */ .brand-eb { margin: 0 0 8px; font: 12px var(--mono); letter-spacing: .28em; color: var(--muted); } .brand-eb::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: repeating-linear-gradient(0deg, var(--accent) 0 2px, transparent 2px 3px); vertical-align: -1px; box-shadow: 0 0 8px rgba(51,211,127,.6); } .login h1::before { content: "> "; color: var(--muted); text-shadow: none; } .login h1::after { content: "_"; margin-left: 4px; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .login h1::after { animation: none; } } .login p:not(.brand-eb) { font: 13px/1.6 var(--mono); } .login .err { color: var(--blocked); margin-top: 14px; min-height: 1.4em; font-family: var(--mono); font-size: 13px; } /* ── пульт ── */ .top { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 3; flex-wrap: wrap; } .brand { font-family: var(--display); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 14px; } /* BRANDFIX1: знак G.MEDIA (контур брендбука) над словом зала — как в общей шапке залов */ a.brand { display: inline-flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; line-height: 1; } .brand .gm-word { display: block; height: 13px; width: auto; fill: var(--ink); } .brand b { font-size: 10.5px; letter-spacing: .3em; } a.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } .brand b { color: var(--accent); text-shadow: 0 0 8px rgba(51,211,127,.5); } .tabs { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; } .tabs button { background: none; border: 0; color: var(--muted); font: 13px var(--mono); padding: 5px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; } .tabs button.on { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px rgba(51,211,127,.35); } .spacer { flex: 1; } .fresh { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 12px var(--mono); } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; box-shadow: 0 0 6px currentColor; } .dot.warn { background: var(--decide); } .dot.crit { background: var(--blocked); } .dot.info { background: var(--review); } .dot.idle { background: var(--dim); } .btn { background: var(--chip); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 5px 10px; font: 12px var(--mono); cursor: pointer; } .btn:hover { border-color: var(--accent); } main { padding: 14px 18px 40px; max-width: 1400px; margin: 0 auto; } /* фильтры ленты */ .filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; } .fchip { background: var(--chip); border: 1px solid var(--line); color: var(--muted); border-radius: 3px; padding: 3px 9px; font: 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; } .fchip.on { background: var(--accent-soft); color: var(--accent); border-color: rgba(51,211,127,.5); } .feed { list-style: none; margin: 0; padding: 0; } .feed li { display: grid; grid-template-columns: 48px 10px 1fr; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--line); align-items: baseline; } .feed li.fresh-in { animation: flash 2.5s ease-out; } @keyframes flash { from { background: rgba(51,211,127,.14); } to { background: transparent; } } .feed .t { color: var(--dim); font: 12px var(--mono); font-variant-numeric: tabular-nums; } .feed .meta { color: var(--muted); font: 11px var(--mono); margin-right: 6px; text-transform: uppercase; letter-spacing: .04em; } .feed .ttl { word-break: break-word; min-width: 0; } .feed li.grp .ttl { color: var(--muted); font-style: italic; } .machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; } .mcard { background: linear-gradient(180deg, rgba(51,211,127,.03), transparent 40%), var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .mcard.silent { border-color: var(--decide); } .mhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .mhead h3 { margin: 0; font: 500 15px var(--display); } .mstate { color: var(--muted); font-size: 13px; margin-bottom: 8px; } .acc { margin: 6px 0 10px; } .acc .name { font: 12px var(--mono); color: var(--muted); margin-bottom: 4px; } .bar { display: grid; grid-template-columns: 64px 1fr 108px; align-items: center; gap: 8px; font: 12px var(--mono); margin: 3px 0; } .bar .track { height: 7px; background: rgba(51,211,127,.08); border-radius: 2px; overflow: hidden; } .bar .fill { height: 100%; background: var(--accent); box-shadow: 0 0 8px rgba(51,211,127,.7); } .bar .fill.warn { background: var(--decide); box-shadow: 0 0 8px rgba(255,210,63,.6); } .bar .fill.crit { background: var(--blocked); box-shadow: 0 0 8px rgba(255,77,94,.6); } .bar .v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .agent { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); } .pill { font: 11px var(--mono); border-radius: 3px; padding: 1px 6px; text-align: center; height: fit-content; background: var(--chip); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .pill::before { content: "["; } .pill::after { content: "]"; } .pill.work { color: var(--accent); background: rgba(51,211,127,.08); } .pill.wait, .pill.decide { color: var(--decide); background: rgba(255,210,63,.08); } .pill.pause { color: var(--pause); } .pill.blocked { color: var(--blocked); background: rgba(255,77,94,.1); } .pill.review { color: var(--review); background: rgba(56,217,255,.08); } .pill.done { color: var(--done); } .pill.unseen, .pill.idle, .pill.queue { color: var(--dim); } .agent .title { font-weight: 600; } .agent .sub { color: var(--muted); font-size: 13px; } .empty { color: var(--muted); padding: 20px 0; font-family: var(--mono); font-size: 13px; } .pair { font: 11px var(--mono); letter-spacing: .08em; margin-top: 6px; } .pair.cl { color: var(--claude); } .pair.cx { color: var(--codex); } .wgroup { margin: 0 0 20px; } .wgroup h3 { font: 500 14px var(--display); margin: 0 0 6px; color: var(--accent); text-transform: uppercase; } .wrow { display: grid; grid-template-columns: 96px 1fr 140px; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); } .wrow .next { color: var(--muted); font-size: 13px; } /* ── проблемы (HQ2) ── */ .pform { display: grid; gap: 8px; margin-bottom: 14px; } .pform textarea { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; resize: vertical; } .pform textarea:focus { outline: 1px solid var(--accent); } .pform .btn { justify-self: start; } .prob { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; } .prob.overdue { border-color: var(--blocked); } .prob.closed { opacity: .6; border-left-color: var(--done); } .prob .ph { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; } .prob .ph > span:last-child { font: 12px var(--mono); white-space: nowrap; } .prob .od { color: var(--blocked); font-weight: 700; } .prob .sub { color: var(--muted); font-size: 13px; margin: 3px 0; } .steps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .st { font: 11px var(--mono); padding: 1px 6px; border-radius: 3px; background: var(--chip); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; } .st.on { background: var(--accent-soft); color: var(--accent); } .probs { overflow: hidden; display: grid; gap: 10px; } /* ── экран: широкий вид (отдельный монитор) ── */ body.screen { overflow: hidden; height: 100vh; font-size: 19px; } .scr { display: grid; grid-template-rows: auto 1fr; height: 100vh; } .hbar { display: flex; gap: 24px; align-items: center; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--line); font: 18px var(--mono); flex-wrap: wrap; } .hbar .lbl { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .8em; margin-right: 6px; } .hbar .big { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); text-shadow: 0 0 8px rgba(51,211,127,.5); } .hbar .big.down, .hbar .down { color: var(--blocked); text-shadow: none; } .down-n { color: var(--blocked); font-weight: 600; margin-left: 6px; } .hbar .clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); } .cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; padding: 16px 24px; min-height: 0; } .col { min-height: 0; display: flex; flex-direction: column; gap: 12px; } .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; overflow: hidden; } .tile { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 10px 14px; } .tile .pn { font: 500 17px var(--display); margin-bottom: 4px; } .tile .m { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; } .tile .m .n { font: 700 17px var(--mono); font-variant-numeric: tabular-nums; color: var(--accent); } .tile .m .l { color: var(--muted); } .scr .feed { flex: 1; overflow: hidden; min-height: 0; } .scr .feed li { grid-template-columns: 64px 12px 1fr; font-size: 18px; padding: 8px 2px; } .procs { overflow: hidden; max-height: 44vh; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; } .proc { background: linear-gradient(180deg, rgba(51,211,127,.03), transparent 40%), var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 16px; } .proc.silent { border-color: var(--decide); } .proc .ph { display: flex; justify-content: space-between; gap: 8px; font: 500 15px var(--display); margin-bottom: 4px; } .proc .ph span:last-child { font: 12px var(--mono); } .proc .ar { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 3px 0; } .proc .ar .tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proc .bar { grid-template-columns: 56px 1fr 52px; font-size: 12px; } .proc .accl { font: 11px var(--mono); color: var(--dim); margin-top: 4px; } .stale-banner { position: fixed; right: 16px; bottom: 14px; padding: 6px 12px; border-radius: 6px; font: 15px var(--mono); display: none; z-index: 4; } .stale-banner.warn { display: block; background: var(--decide); color: #1a1204; } .stale-banner.crit { display: block; background: var(--blocked); color: #fff; } .stale { opacity: .45; filter: grayscale(1); } .screen .prob { font-size: 16px; margin: 0; } .screen .st { font-size: 12px; } /* ── плитка 420–600 × 900–1000 (второй экран 2×2): @media или ?tile=1 ── */ @media (max-width: 640px) { main { padding: 10px 12px 32px; } .top { padding: 8px 12px; gap: 8px; } .top .ext { display: none; } .machines { grid-template-columns: 1fr; } .wrow { grid-template-columns: 90px 1fr; } .wrow .own { display: none; } .bar { grid-template-columns: 52px 1fr 96px; } .feed li { grid-template-columns: 42px 10px 1fr; font-size: 14px; } } @media (max-width: 640px) { body.screen { font-size: 15px; overflow-y: auto; height: auto; } } body.tile.screen { font-size: 15px; overflow-y: auto; height: auto; } @media (max-width: 640px) { body.screen .scr { height: auto; grid-template-rows: auto auto; } body.screen .hbar { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px; font-size: 15px; } body.screen .hbar .spacer { display: none; } body.screen .cols { display: flex; flex-direction: column; padding: 12px 14px; gap: 14px; } body.screen .col-left { order: 2; } body.screen .col-right { order: 1; } body.screen .gm-h, body.screen #tiles, body.screen .feed-h, body.screen #feed { display: none; } body.screen .procs { max-height: none; grid-template-columns: 1fr; } body.screen .proc { font-size: 14px; } } body.tile.screen .scr { height: auto; grid-template-rows: auto auto; } body.tile.screen .hbar { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px; font-size: 15px; } body.tile.screen .hbar .spacer { display: none; } body.tile.screen .cols { display: flex; flex-direction: column; padding: 12px 14px; gap: 14px; } body.tile.screen .col-left { order: 2; } body.tile.screen .col-right { order: 1; } body.tile.screen .gm-h, body.tile.screen #tiles, body.tile.screen .feed-h, body.tile.screen #feed { display: none; } body.tile.screen .procs { max-height: none; grid-template-columns: 1fr; } body.tile.screen .proc { font-size: 14px; } /* ═══ HQ1.2 «настоящая Матрица» (Роман 30.09) ═══ */ /* дождь ярче, но за полупрозрачными панелями — под текстом приглушён */ #rain { opacity: .34; } .top, .hbar, .mcard, .proc, .prob, .tile, .login .card, .fchip { background-color: rgba(6, 16, 10, .84); backdrop-filter: blur(1.5px); } .feed li { background: rgba(2, 6, 4, .72); } /* виньетка CRT поверх всего, скан-линии уже есть (body::after) */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); } /* фосфор: цифры и метки светятся */ .big, .bar .v, .tile .m .n, .hbar .clock, .proc .ph span:last-child, .feed .t, .fresh { text-shadow: 0 0 6px rgba(51, 211, 127, .55), 0 0 16px rgba(51, 211, 127, .18); } .big { color: var(--accent); } .mhead h3, .proc .ph span:first-child, .brand { text-shadow: 0 0 10px rgba(51, 211, 127, .35); } /* заголовки > СЕКЦИЯ_ с мигающим курсором */ .sec-h::after, .col h2::after, .brand::after { content: "_"; margin-left: 3px; color: var(--accent); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* метки ленты — моно-чипами */ .feed .meta::before { content: "["; } .feed .meta::after { content: "]"; } .feed .meta { color: var(--muted); } /* новые строки: вспышка фосфора, текст проявляется «расшифровкой» (JS) */ .feed li.fresh-in .ttl { text-shadow: 0 0 8px rgba(51, 211, 127, .6); } /* тревога — красный глитч */ .feed li.alarm.critical .ttl, .glitch, .down-n { color: var(--blocked); text-shadow: 0 0 6px rgba(255, 77, 94, .55); animation: glitch 2.8s infinite steps(1); } .feed li.alarm.warn .ttl { color: var(--decide); text-shadow: 0 0 6px rgba(255, 210, 63, .4); } @keyframes glitch { 0%, 86%, 100% { transform: none; text-shadow: 0 0 6px rgba(255, 77, 94, .55); } 88% { transform: translateX(-1px); text-shadow: 2px 0 rgba(56, 217, 255, .7), -2px 0 rgba(255, 77, 94, .9); } 90% { transform: translateX(1px) skewX(-6deg); text-shadow: -2px 0 rgba(56, 217, 255, .7), 2px 0 rgba(255, 77, 94, .9); } 92% { transform: none; clip-path: inset(10% 0 40% 0); } 94% { clip-path: none; } } .hbar .quiet .big, .hbar .quiet .muted { color: var(--decide); text-shadow: 0 0 6px rgba(255, 210, 63, .45); } @media (prefers-reduced-motion: reduce) { .sec-h::after, .col h2::after, .brand::after, .glitch, .down-n, .feed li.alarm.critical .ttl { animation: none; } } /* ═══ HQ1.3: широкий «Пульс» ≥1200×700 — три колонки, всё главное в один экран: витрина | процессы | лента ═══ */ @media (min-width: 1200px) and (min-height: 700px) and (orientation: landscape) { body.screen:not(.tile) .cols { grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.1fr) minmax(380px, 1.25fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px 16px; padding: 12px 20px; } body.screen:not(.tile) .col-left { grid-column: 1; grid-row: 1 / span 2; overflow: hidden; } body.screen:not(.tile) .col-right { display: contents; } body.screen:not(.tile) .procs-h { grid-column: 2; grid-row: 1; } body.screen:not(.tile) #procs { grid-column: 2; grid-row: 2; max-height: none; grid-template-columns: 1fr; align-content: start; overflow: hidden; } body.screen:not(.tile) .feed-h { grid-column: 3; grid-row: 1; } body.screen:not(.tile) #feed { grid-column: 3; grid-row: 2; min-height: 0; } body.screen:not(.tile) .hbar { padding: 8px 20px; font-size: 16px; } body.screen:not(.tile) .tiles { gap: 8px; } body.screen:not(.tile) .tile { padding: 6px 10px; border-left-width: 3px; } body.screen:not(.tile) .tile .pn { font-size: 14px; margin-bottom: 2px; } body.screen:not(.tile) .tile { min-width: 0; } body.screen:not(.tile) .tile .m { font-size: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; } body.screen:not(.tile) .tile .m .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.screen:not(.tile) .tile .m .n { font-size: 14px; white-space: nowrap; } body.screen:not(.tile) .tile .m ~ .m ~ .m { display: none; } body.screen:not(.tile) .scr .feed li { font-size: 15px; padding: 5px 2px; grid-template-columns: 52px 10px 1fr; } body.screen:not(.tile) .proc { font-size: 14px; padding: 8px 12px; } body.screen:not(.tile) .screen .prob, body.screen:not(.tile) .prob { font-size: 14px; padding: 7px 10px; } } /* ═══ HQ1.4 (30.09): ничего не вылезает за рамку; шапка узкого экрана в две строки; новая строка ленты проявляется мягко ═══ */ /* Дети grid/flex сжимаются (min-width: 0), длинное переносится или обрывается многоточием; заголовки — через clamp() */ .top > *, .hbar > *, .tile > *, .mhead > *, .agent > *, .wrow > *, .proc .ar > *, .bar > * { min-width: 0; } .tabs { flex-wrap: wrap; overflow: visible; } .brand { font-size: clamp(12px, 3.4vw, 14px); } .tile .pn { font-size: clamp(13px, 3.4vw, 17px); overflow-wrap: anywhere; } .tile .m .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mhead h3 { font-size: clamp(13px, 3.6vw, 15px); overflow-wrap: anywhere; } .wgroup h3 { font-size: clamp(12px, 3.4vw, 14px); overflow-wrap: anywhere; } /* шапка проблемы и процесса: сжимается заголовок, срок/возраст (nowrap) держит свою ширину — иначе он сам вылезает из строки */ .prob .ph > span:first-child, .proc .ph > span:first-child { min-width: 0; overflow-wrap: anywhere; } .prob .ph > span:last-child, .proc .ph > span:last-child { flex: none; } .mstate, .acc .name, .agent .title, .agent .sub, .wrow .next, .wrow > div { overflow-wrap: anywhere; } .login h1 { font-size: clamp(16px, 5vw, 20px); overflow-wrap: anywhere; } @media (max-width: 640px) { .top { row-gap: 4px; } .top .brand { order: 1; } .top .spacer { order: 2; } .top .fresh { order: 3; min-width: 0; } .top > .btn { order: 4; } .top .tabs { order: 5; flex: 1 1 100%; } } /* новая строка ленты (стена): проявляется и раскрывается за 0,4 с, остальные строки не трогаем (очередь показа — Motion.queue в pult.js) */ .feed li.fresh-in { animation: flash 2.5s ease-out, feedin .4s cubic-bezier(.22, .7, .2, 1) backwards; } @keyframes feedin { from { opacity: 0; transform: translateY(-8px); max-height: 0; overflow: hidden; } to { opacity: 1; transform: none; max-height: 12em; overflow: hidden; } } /* режимы движения (motion.js ставит data-motion на ): «Работа» — фон приглушён до 30%, новая строка только подсвечивается цветом 2 с; «Тишина» — фона нет, строки без движения */ :root[data-motion="work"] #rain { opacity: .1; } :root[data-motion="work"] .feed li.fresh-in { animation: flash 2s ease-out; } :root[data-motion="quiet"] #rain { display: none; } :root[data-motion="quiet"] .feed li.fresh-in { animation: none; } @media (prefers-reduced-motion: reduce) { .feed li.fresh-in { animation: none; } } /* отчёт самопроверки ?check=1 (pult.js): пусто — маленькая галочка, есть находки — красный список внизу */ #overflow-report { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; margin: 0; max-height: 45vh; overflow: auto; padding: 6px 8px; font: 11px/1.35 var(--mono); color: #ff8a96; background: rgba(20, 2, 4, .94); white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; } #overflow-report:empty { left: auto; right: 6px; bottom: 6px; padding: 2px 8px; color: var(--accent); background: rgba(2, 6, 4, .8); border: 1px solid var(--line); border-radius: 4px; } #overflow-report:empty::before { content: "✓ overflow 0"; } /* ═══ PUBMODE1 (06.10): публичный режим, живые «Работы», светлая тема ═══ Стоит ДО блока HQ1.6: портретный @media (orientation: portrait) and (min-width: 641px) — хвост файла, в нём только правила экрана (сосед HQ1.6). Типографика — токены --k-* канона hall.css (те же значения: «работа» и телефон 390); цвета статусов — токены пульта, совпадающие с hall.css (--accent = --ok #33D37F, --decide = --wait #FFD23F, --review = --work #38D9FF, --blocked #FF4D5E; в светлой — значения body.white). */ :root { --k-t2: 14px; --k-b1: 16px; --k-b2: 13px; --k-d1: 13px; --k-l1: 11px; --g: 16px; } @media (max-width: 520px) { :root { --k-t2: 13px; --k-b1: 15px; --k-b2: 13px; --k-d1: 13px; --k-l1: 11px; --g: 12px; } } /* плашка и кнопка режима */ .pub-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 600 var(--k-l1)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #000; background: var(--decide); box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 0 14px rgba(255,210,63,.45); white-space: nowrap; } body.pub .top { box-shadow: inset 0 -2px 0 var(--decide); } .pub-btn { white-space: nowrap; } .pub-btn.on { border-color: var(--decide); color: var(--decide); } .pub-msg { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--blocked); color: var(--ink); font: var(--k-b2)/1.4 var(--body); box-shadow: 0 6px 24px rgba(0,0,0,.4); } .pub-note { color: var(--muted); font: var(--k-b2)/1.4 var(--mono); padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; } .hid-n { font: var(--k-b2)/1.4 var(--mono); padding: 10px 2px; } /* «Работы»: продукт → статус → строки; статус — чипом, владелец — аватаром */ .wfil { margin-bottom: 6px; } .wfresh { font: var(--k-l1)/1.4 var(--mono); margin: 0 0 12px; } .wgroup2 { margin: 0 0 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 4px; } .wgroup2 h3 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font: 500 var(--k-t2)/1.3 var(--display); text-transform: uppercase; } .wgroup2 .wp { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-transform: inherit; cursor: pointer; text-align: left; overflow-wrap: anywhere; } .wsg { margin: 6px 0 8px; } .wsh { font: 600 var(--k-l1)/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .wsh::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; } .wsh.s-work { color: var(--accent); } .wsh.s-review { color: var(--review); } .wsh.s-blocked { color: var(--blocked); } .wsh.s-done { color: var(--done); } .wrow2 { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); } .wrow2:first-of-type { border-top: 0; } .wmain { min-width: 0; } .wt { font: 500 var(--k-b2)/1.35 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wsub { font: var(--k-l1)/1.4 var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wrow2.g-done .wt { color: var(--muted); } .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--mono); letter-spacing: .02em; color: #000; flex: none; } .av0 { background: var(--accent); } .av1 { background: var(--review); } .av2 { background: var(--decide); } .av3 { background: var(--pause); } .av4 { background: var(--done); } .chip { font: 600 var(--k-l1)/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 5px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid currentColor; } .chip.s-work { color: var(--accent); background: rgba(51,211,127,.1); } .chip.s-review { color: var(--review); background: rgba(56,217,255,.1); } .chip.s-blocked { color: var(--blocked); background: rgba(255,77,94,.12); } .chip.s-done { color: var(--done); background: rgba(126,226,168,.08); opacity: .85; } .arch-h { font: var(--k-b2)/1.5 var(--mono); color: var(--decide); border: 1px dashed var(--decide); border-radius: 10px; padding: 8px 12px; margin: 0 0 14px; } /* телефон 390: без горизонтального скролла — вкладки переносятся, чип статуса уходит под строку */ @media (max-width: 640px) { .tabs { flex-wrap: wrap; overflow-x: visible; } .top .fresh { display: none; } .wgroup2 { padding: 8px 10px 2px; } .wrow2 { grid-template-columns: 30px minmax(0, 1fr); row-gap: 4px; } .wrow2 .chip { grid-column: 2; justify-self: start; } .wt { white-space: normal; overflow-wrap: anywhere; } } /* светлая тема (?theme=light или системная): значения body.white из hall.css; Матрица (дождь, скан-линии, свечение) — только в тёмной */ :root[data-theme="light"] { --ground: #F5F7F6; --surface: #FFFFFF; --ink: #0B0F0D; --muted: #4A5650; --line: #D9E0DC; --chip: #EEF2F0; --dim: #7C8983; --accent: #0A5C33; --accent-soft: rgba(10, 92, 51, .08); --review: #00708F; --decide: #8A5A00; --blocked: #B3261E; --done: #0A5C33; --pause: #5B3FB0; --unseen: #C9D1CD; color-scheme: light; } :root[data-theme="light"] #rain, :root[data-theme="light"] body::after, :root[data-theme="light"] body::before { display: none; } :root[data-theme="light"] .top, :root[data-theme="light"] .hbar, :root[data-theme="light"] .mcard, :root[data-theme="light"] .proc, :root[data-theme="light"] .prob, :root[data-theme="light"] .tile, :root[data-theme="light"] .login .card, :root[data-theme="light"] .fchip { background-color: #FFFFFF; backdrop-filter: none; } :root[data-theme="light"] .feed li { background: transparent; } :root[data-theme="light"] * { text-shadow: none !important; } :root[data-theme="light"] .mcard { background: #FFFFFF; } :root[data-theme="light"] .bar .track { background: #E3E9E6; } :root[data-theme="light"] .bar .fill { box-shadow: none; } :root[data-theme="light"] .pub-badge { color: #FFF; background: var(--decide); box-shadow: none; } :root[data-theme="light"] .av { color: #FFF; } :root[data-theme="light"] .chip.s-work { background: rgba(10,92,51,.08); } :root[data-theme="light"] .chip.s-review { background: rgba(0,112,143,.08); } :root[data-theme="light"] .chip.s-blocked { background: rgba(179,38,30,.08); } :root[data-theme="light"] .chip.s-done { background: rgba(10,92,51,.05); } :root[data-theme="light"] .tabs button.on { box-shadow: 0 0 0 1px rgba(10,92,51,.35); } :root[data-theme="light"] .fchip.on { border-color: rgba(10,92,51,.5); } :root[data-theme="light"] .brand b { text-shadow: none; } /* ═══ HQ1.6 (30.09): /pult/screen на вертикальном мониторе ═══ */ /* 1) Ничего не распирает окно (страница была шире окна: 967 > 720): колонки и ячейки сжимаются, «репо#номер» и пути переносятся, строка лога — не больше двух строк с многоточием */ .scr { grid-template-columns: minmax(0, 1fr); } .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } .col, .col > * { min-width: 0; } .scr .feed li { min-width: 0; } .scr .feed .ttl, .scr .feed .ttl a { overflow-wrap: anywhere; } .scr .feed .ttl { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .tile .m .n { white-space: nowrap; } /* название плитки — одна строка: кегль подстраивается под ширину плитки (container query), не влезло — многоточие (не рвём «@deepseek_gidbo|t») */ .tile { container-type: inline-size; } .tile .pn { font-size: clamp(11px, 7.4cqi, 17px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 2) Портрет (высота ≥ ширины) шире плитки: строка здоровья → витрина компактно → проблемы → процессы → лог на всю оставшуюся высоту. Обе колонки растворяются (display: contents) и выстраиваются одним столбцом по order; лог тянется (flex: 1) и режется по высоте. */ @media (orientation: portrait) and (min-width: 641px) { body.screen:not(.tile) .hbar { gap: 6px clamp(14px, 2.4vw, 28px); padding: 10px clamp(16px, 2.6vw, 32px); font-size: clamp(14px, 2.3vw, 22px); } body.screen:not(.tile) .cols { display: flex; flex-direction: column; gap: 10px; padding: 12px clamp(16px, 2.6vw, 32px) 14px; min-height: 0; overflow: hidden; } body.screen:not(.tile) .col { display: contents; } body.screen:not(.tile) .cols > *, body.screen:not(.tile) .col > * { flex: 0 0 auto; } body.screen:not(.tile) .gm-h { order: 1; } body.screen:not(.tile) #tiles { order: 2; } body.screen:not(.tile) .col-left > h2:not(.gm-h) { order: 3; } body.screen:not(.tile) #probs { order: 4; max-height: 26vh; } body.screen:not(.tile) .procs-h { order: 5; } body.screen:not(.tile) #procs { order: 6; max-height: 30vh; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); align-content: start; } body.screen:not(.tile) .feed-h { order: 7; } body.screen:not(.tile) #feed { order: 8; flex: 1 1 0; min-height: 0; } /* витрина компактно: плитки в 3–8 колонок по ширине, две строки метрик, подписи с многоточием */ body.screen:not(.tile) .tiles { grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 21vw, 340px), 1fr)); gap: 8px; } body.screen:not(.tile) .tile { padding: 6px 10px; border-left-width: 3px; min-width: 0; } body.screen:not(.tile) .tile .pn { font-size: clamp(12px, 7.4cqi, 22px); margin-bottom: 2px; } body.screen:not(.tile) .tile .m { font-size: clamp(11px, 1.6vw, 16px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; } body.screen:not(.tile) .tile .m .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.screen:not(.tile) .tile .m .n { font-size: clamp(12px, 1.8vw, 18px); } body.screen:not(.tile) .tile .m ~ .m ~ .m { display: none; } body.screen:not(.tile) .scr .feed li { font-size: clamp(15px, 2.3vw, 24px); padding: 6px 2px; grid-template-columns: clamp(48px, 7vw, 72px) 10px minmax(0, 1fr); } body.screen:not(.tile) .proc { font-size: clamp(13px, 2vw, 18px); padding: 8px 12px; } body.screen:not(.tile) .screen .prob, body.screen:not(.tile) .prob { font-size: clamp(14px, 2vw, 19px); padding: 7px 10px; } } /* M1: заголовок открытой critical в полосе «Пульса» — одной строкой, не шире окна */ .hbar .crit-t { display: inline-block; max-width: min(42ch, 70vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* OPFEED1 (02.10): свёрнутая строка («Карта: 20 строк», «repo#N — 5 комментариев», всплеск с концом) и обрезанная длинная заметка раскрываются по тапу */ .feed li.grp, .feed li.cut { cursor: pointer; } .feed li .more { grid-column: 3; margin: 4px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .9em; word-break: break-word; } .feed li .more li { display: block; padding: 2px 0; border: 0; background: none; } /* HQLOGIN1: вход — чистая рабочая поверхность, общие токены штаба, без CRT поверх элементов. */ /* LOGIN-HQ-CONNECT2 (16.10): /connect — то же правило: скан-линии body::after поверх карточки подключения убраны (аудит 15.10, LOGIN-HQ п.13) */ body.hq-login::before, body.hq-login::after, body[data-page="login"]::before, body[data-page="login"]::after, body[data-page="connect"]::before, body[data-page="connect"]::after { display: none; } body.hq-login #rain, body[data-page="login"] #rain, body[data-page="connect"] #rain { display: none; } .hq-login .login, body[data-page="login"] .login, body[data-page="connect"] .login { min-height: 100vh; min-height: 100svh; max-width: none; margin: 0; padding: 24px 16px; } .login .card { max-width: 460px; padding: clamp(20px, 5vw, 36px); border-radius: 20px; background: var(--surface); backdrop-filter: none; box-shadow: 0 16px 56px rgba(0,0,0,.12); } .login h1 { margin: 12px 0 8px; font-size: clamp(24px, 6vw, 30px); line-height: 1.25; text-transform: none; letter-spacing: -.025em; color: var(--ink); text-shadow: none; } .login h1::before, .login h1::after { content: none; animation: none; } .login p:not(.brand-eb) { font: 15px/1.55 var(--body); margin: 8px 0 16px; } .login .brand-eb { margin: 0; font-size: 11px; letter-spacing: .18em; } /* HQWC (20.10): было 10 px — ниже пола канона 11 px */ .login .brand-eb::before { width: 7px; height: 7px; background: var(--accent); box-shadow: none; } .login .login-intro { margin: 0 0 28px; } .login-methods { display: grid; gap: 22px; } .login-method { min-width: 0; } .login-method h2 { font: 600 15px/1.4 var(--body); color: var(--ink); margin: 0; } .login-method p { text-wrap: pretty; } .login-method code { color: var(--ink); background: var(--chip); padding: 2px 5px; border-radius: 4px; font: 13px var(--mono); } .login-telegram { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 46px; max-width: 320px; margin: auto; border: 1px solid var(--line); border-radius: 24px; color: var(--ink); background: var(--chip); font: 500 14px/1.4 var(--body); padding: 10px 16px; } .login-telegram:hover { border-color: var(--accent); text-decoration: none; } .login-telegram:focus-visible, .login-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .login-divider { display: flex; align-items: center; gap: 14px; color: var(--muted); font: 12px var(--body); } .login-divider::before, .login-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; } /* GIS iframe поддерживает светлый canvas: локальный color-scheme убирает непрозрачную UA-подложку. Сам Google button рисует GIS; не обрезаем iframe, логотип и кольцо фокуса. */ .login #gbtn { width: 100%; max-width: 320px; margin: 0 auto; min-height: 44px; color-scheme: light; } .login #gbtn iframe { color-scheme: light; } .login .login-status { margin: 18px 0 0; font-size: 13px; } .login .err { margin: 18px 0 0; min-height: 0; font: 13px/1.5 var(--body); overflow-wrap: anywhere; } .login .login-status:empty, .login .err:empty { display: none; } .login-retry { margin-top: 14px; background: var(--chip); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; min-height: 44px; padding: 10px 20px; font: 500 14px var(--body); cursor: pointer; } .login [hidden] { display: none; } body.screen.hq-login { height: auto; overflow-y: auto; } /* LOGIN-HQ-CONNECT2 (16.10): /connect без тупиков (аудит 15.10, LOGIN-HQ пп.11–13). Поля — 44 px с подписью