/* ============================================================ SKYNET — Terminal UI Static replica per blueprint 017-skynet-design. Tokens, reset, CRT overlays, app shell skeleton. ============================================================ */ :root { --bg: #050a05; --bg-2: #081008; --bg-3: #0b160b; --fg: #c8ffd0; --fg-2: #5dff86; --fg-3: #2faa54; --dim: #1f5a2b; --hot: #ffb347; --hot-2: #ff6a2c; --red: #ff4d6d; --shadow: 0 0 8px rgba(93, 255, 134, 0.35); } /* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg-2); } body { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5; min-height: 100vh; overflow-x: hidden; } a { color: var(--fg-2); text-decoration: none; } a:hover { color: var(--hot); } button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; } /* ===== Utility text tones ===== */ .glow { text-shadow: 0 0 6px rgba(93, 255, 134, 0.55); } .dim { color: var(--fg-3); } .very-dim { color: var(--dim); } .hot { color: var(--hot); text-shadow: 0 0 6px rgba(255, 179, 71, 0.5); } .red { color: var(--red); } .acc { color: var(--hot); } /* Blinking cursor — used in boot, login, headings */ .cursor { display: inline-block; width: 0.55ch; height: 1em; background: var(--fg-2); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(2, end) infinite; box-shadow: 0 0 6px rgba(93, 255, 134, 0.7); } @keyframes blink { 50% { opacity: 0; } } /* ===== CRT scanlines + soft vignette ===== Layer cake: body::after below (green glow, z-99), body::before above it (scanlines + outer vignette, z-100). Both pointer-events:none so they never block clicks. Modals (z-50–70) and gating overlays (z-200+) sit ABOVE these, so they remain visually crisp. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.55) 100%); mix-blend-mode: multiply; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99; background: radial-gradient(ellipse at 50% 30%, rgba(93, 255, 134, 0.04), transparent 70%); } /* ===== Slow CRT scan-sweep band ===== */ .scan-sweep { position: fixed; left: 0; right: 0; pointer-events: none; z-index: 90; height: 110px; background: linear-gradient( 180deg, transparent 0%, rgba(93, 255, 134, 0.05) 35%, rgba(93, 255, 134, 0.12) 50%, rgba(93, 255, 134, 0.05) 65%, transparent 100% ); mix-blend-mode: screen; animation: sweep 7s linear infinite; } @keyframes sweep { 0% { top: -110px; } 100% { top: 100vh; } } /* Motion-reduce overrides — set on by skynet.js */ html.no-scanlines body::before { display: none; } /* Stop the rolling scan-sweep band too — it's the most visible scanline */ html.no-scanlines .scan-sweep { display: none; } html.no-pulse .ai-core svg, html.no-pulse .core-pulse { animation: none; } html.no-spin .vault-badge.spin .gear, html.no-spin .page-header-mark .rotor { animation: none; } /* NOTE: Skynet's visual identity (scan-sweep, blinking cursor, vault rotor, AI-core pulse) is part of the brand and stays on regardless of OS-level prefers-reduced-motion. Users who want to disable the effects can do so via the Settings → Appearance toggles which add the html.no-spin / no-pulse / no-scanlines classes manually. */ /* ===== Boot overlay (screen 01) ===== Full-screen terminal boot sequence. Sits at z-1000 above the CRT layers and the gating login (z-200). Auto-advances via skynet.js once the typing loop finishes. */ .boot { position: fixed; inset: 0; z-index: 1000; background: var(--bg); padding: 24px clamp(16px, 5vw, 64px); overflow: hidden; } .boot pre { margin: 0; white-space: pre-wrap; font: inherit; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; line-height: 1.55; color: var(--fg-3); } .boot pre .ok { color: var(--fg-2); text-shadow: 0 0 6px rgba(93, 255, 134, 0.55); } .boot pre .warn { color: var(--hot); text-shadow: 0 0 6px rgba(255, 179, 71, 0.5); } .boot pre .ready { color: var(--hot); text-shadow: 0 0 8px rgba(255, 179, 71, 0.6); } /* ===== App shell — CSS grid pinned to viewport ===== titlebar / sidebar+main / fkeybar. Only .main scrolls. Chrome partials (titlebar, sidebar, fkeybar) get their visual styling in stap 4; this stap only defines the skeleton + scroll regions. */ .shell { height: 100vh; display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 52px 1fr 28px; grid-template-areas: "title title" "side main" "fkeys fkeys"; } .titlebar { grid-area: title; } .sidebar { grid-area: side; overflow-y: auto; } .main { grid-area: main; overflow-y: auto; padding: 18px clamp(14px, 3vw, 32px) 24px; } .fkeybar { grid-area: fkeys; } /* ===== Custom scrollbar — only on .main, .sidebar, .modal, .drawer ===== */ .main::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .modal::-webkit-scrollbar, .drawer::-webkit-scrollbar { width: 12px; } .main::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track, .drawer::-webkit-scrollbar-track { background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(47, 170, 84, 0.18) 2px 3px), var(--bg); } .main::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .drawer::-webkit-scrollbar-thumb { background: var(--fg-3); border: 2px solid var(--bg); box-shadow: inset 0 0 0 1px var(--fg-2); } .main::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover, .drawer::-webkit-scrollbar-thumb:hover { background: var(--hot); } /* Firefox fallback */ .main, .sidebar, .modal, .drawer { scrollbar-color: var(--fg-3) transparent; scrollbar-width: thin; } /* ===== Body-scroll lock — set by skynet.js when an overlay opens ===== */ body.overlay-open { overflow: hidden; } /* ===== Mobile breakpoint stub ===== Full mobile rules (sidebar/fkeybar hidden, mobile-dock visible, tables → cards, modals fullscreen) come in later steps. This is only the shell collapse so the body lays out correctly even before the chrome partials exist. */ @media (max-width: 820px) { .shell { grid-template-columns: 1fr; grid-template-rows: 48px 1fr; grid-template-areas: "title" "main"; } .sidebar, .fkeybar { display: none; } .main { padding: 14px 14px calc(80px + env(safe-area-inset-bottom, 0px)); } } /* ============================================================ CHROME PARTIALS — titlebar, sidebar, fkeybar (stap 4) ============================================================ */ /* ===== Titlebar ===== */ .titlebar { display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--fg-3); background: linear-gradient(180deg, rgba(93, 255, 134, 0.07), transparent); font-size: 12px; overflow: hidden; } .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; color: inherit; } .brand:hover { color: inherit; } /* Vault badge — small spinning variant */ .vault-badge { display: block; color: var(--fg-2); filter: drop-shadow(0 0 6px rgba(93, 255, 134, 0.45)); flex-shrink: 0; } .vault-badge.spin .gear { /* See .page-header-mark .rotor for the transform-box rationale. */ transform-box: fill-box; transform-origin: center; animation: spin 28s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } html.no-spin .vault-badge.spin .gear { animation: none; } .wordmark { line-height: 1.2; } .wordmark .name { font-family: "VT323", monospace; font-size: 26px; color: var(--fg); text-shadow: 0 0 8px rgba(93, 255, 134, 0.5); white-space: nowrap; } .wordmark .name .blink { color: var(--hot); animation: blink 1.1s steps(2) infinite; } .wordmark .tag { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; } .wordmark .tag b { font-weight: 400; color: var(--fg-2); } .crumb { color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; letter-spacing: 0.08em; flex-shrink: 1; min-width: 0; } .titlebar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; } .ai-core { display: flex; align-items: center; gap: 6px; color: var(--fg-2); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .ai-core svg { animation: corePulse 2.2s ease-in-out infinite; transform-origin: 50% 50%; } @keyframes corePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.92); } } html.no-pulse .ai-core svg { animation: none; } .ai-core b { font-weight: 500; } .clock { color: var(--fg-2); white-space: nowrap; font-size: 12px; letter-spacing: 0.1em; } .user-chip { color: var(--hot); font-size: 12px; letter-spacing: 0.1em; text-shadow: 0 0 6px rgba(255, 179, 71, 0.45); white-space: nowrap; } /* ===== Sidebar ===== */ .sidebar { padding: 14px 0; border-right: 1px solid var(--fg-3); background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 40%); } .menu-h { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); padding: 0 14px 8px; border-bottom: 1px dashed var(--fg-3); margin-bottom: 4px; } .nav-row { display: grid; grid-template-columns: 28px 1fr 36px; align-items: center; padding: 5px 14px; border-left: 2px solid transparent; text-decoration: none; color: var(--fg-2); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; position: relative; transition: background 0.1s; } .nav-row:hover { background: rgba(93, 255, 134, 0.08); color: var(--fg); } .nav-row.active { background: rgba(255, 179, 71, 0.12); border-left-color: var(--hot); color: var(--fg); } /* L-bracket corners on active row */ .nav-row.active::before, .nav-row.active::after { content: ""; position: absolute; width: 9px; height: 9px; } .nav-row.active::before { top: -1px; right: -1px; border-top: 1.5px solid var(--hot); border-right: 1.5px solid var(--hot); } .nav-row.active::after { bottom: -1px; left: -1px; border-bottom: 1.5px solid var(--hot); border-left: 1.5px solid var(--hot); } .nav-icon { width: 22px; height: 22px; border: 1px solid var(--dim); display: flex; align-items: center; justify-content: center; color: var(--fg-3); } .nav-row.active .nav-icon { color: var(--hot); border-color: var(--hot); } .nav-label { padding-left: 8px; } .nav-cmd { color: var(--fg-3); text-align: right; font-size: 10px; letter-spacing: 0.14em; } /* Overseer panel */ .overseer-panel { margin: 14px 14px 0; padding: 10px 12px; border: 1px solid var(--fg-3); background: var(--bg-2); position: relative; } .overseer-head { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .overseer-list { list-style: none; margin: 0; padding: 0; } .overseer-list li { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 0; color: var(--fg-3); } .overseer-list b { font-weight: 500; color: var(--fg-2); } .overseer-list b.ok { color: var(--fg-2); } .overseer-list b.warn-txt { color: var(--hot); } /* ===== F-key bar ===== */ .fkeybar { display: flex; height: 28px; border-top: 1px solid var(--fg-3); background: var(--bg-2); overflow: hidden; } .fkey-cell { display: flex; align-items: center; padding: 0 14px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; border-right: 1px dashed var(--fg-3); color: var(--fg-3); white-space: nowrap; user-select: none; } .fkey-cell .k { background: #000; color: var(--fg-3); padding: 0 4px; margin-right: 6px; border: 1px solid var(--fg-3); font-size: 10px; flex-shrink: 0; } .fkey-cell.active { background: var(--hot); color: #000; } .fkey-cell.active .k { background: #000; color: var(--hot); border-color: #000; } .fkey-cell.primary { color: var(--hot); } .fkey-cell.primary .k { color: var(--hot); border-color: var(--hot); } /* Dynamic fkeybar states — driven by keyboard-service.js. .always-on = green (e.g. F1 HELP), .contextual = amber (state-dependent). */ .fkey-cell.always-on { color: var(--fg-2); } .fkey-cell.always-on .k { color: var(--fg-2); border-color: var(--fg-2); } .fkey-cell.contextual { color: var(--hot); } .fkey-cell.contextual .k { color: var(--hot); border-color: var(--hot); } /* ============================================================ SHARED PATTERNS — corners, pips, ribbons (stap 5) ============================================================ */ /* L-bracket corner ornaments */ .corner { position: absolute; width: 12px; height: 12px; pointer-events: none; } .corner.tl { top: -2px; left: -2px; border-top: 1.5px solid var(--hot); border-left: 1.5px solid var(--hot); } .corner.tr { top: -2px; right: -2px; border-top: 1.5px solid var(--hot); border-right: 1.5px solid var(--hot); } .corner.bl { bottom: -2px; left: -2px; border-bottom: 1.5px solid var(--hot); border-left: 1.5px solid var(--hot); } .corner.br { bottom: -2px; right: -2px; border-bottom: 1.5px solid var(--hot); border-right: 1.5px solid var(--hot); } /* Blinking pips */ .pip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .pip-green { background: var(--fg-2); box-shadow: 0 0 6px rgba(93, 255, 134, 0.6); animation: blink 1.1s steps(2) infinite; } .pip-amber { background: var(--hot); box-shadow: 0 0 6px rgba(255, 179, 71, 0.6); animation: blink 1.4s steps(2) infinite; } /* ============================================================ PAGE HEADER (stap 5) ============================================================ */ .page-header { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: stretch; border: 1px solid var(--fg-3); padding: 18px 20px; background: repeating-linear-gradient( 45deg, rgba(47, 170, 84, 0.025) 0px, rgba(47, 170, 84, 0.025) 1px, transparent 1px, transparent 6px ), var(--bg-2); position: relative; margin-bottom: 18px; } .ribbon { position: absolute; top: -1px; left: 18px; transform: translateY(-50%); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); padding: 2px 8px; background: var(--bg); pointer-events: none; } .page-header-body { min-width: 0; } .page-header-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hot); margin-bottom: 6px; } .page-header h1 { font-family: "VT323", monospace; font-size: clamp(40px, 7vw, 72px); line-height: 0.9; color: var(--fg); text-shadow: 0 0 10px rgba(93, 255, 134, 0.45); margin: 0 0 10px; } .page-header h1 .acc { color: var(--hot); text-shadow: 0 0 10px rgba(255, 179, 71, 0.5); } .page-header-intro { color: var(--fg-2); max-width: 60ch; font-size: 13px; margin: 0 0 12px; } .stat-row { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; } .stat { display: flex; flex-direction: column; gap: 2px; } .stat-val { font-family: "VT323", monospace; font-size: 24px; color: var(--fg); line-height: 1; } .stat-lbl { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); } .page-header-mark-wrap { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--fg-2); } .page-header-mark { color: var(--fg-2); filter: drop-shadow(0 0 8px rgba(93, 255, 134, 0.35)); } .page-header-mark .rotor { /* SVG needs transform-box: fill-box for transform-origin to resolve against the element's bounding box instead of the SVG viewport — without it, Chrome rotates around (0,0) and the gear plates orbit off-screen instead of spinning in place. */ transform-box: fill-box; transform-origin: center; animation: spin 28s linear infinite; } html.no-spin .page-header-mark .rotor { animation: none; } /* Mobile page-header collapse */ @media (max-width: 820px) { .page-header { grid-template-columns: 1fr; padding-right: 80px; } .page-header h1 { font-size: 44px; } .page-header-mark-wrap { position: absolute; top: 14px; right: 14px; } .page-header-mark { width: 64px !important; height: 64px !important; } } @media (max-width: 380px) { .page-header h1 { font-size: 38px; } .page-header-mark { width: 54px !important; height: 54px !important; } } /* ============================================================ STAT CARDS (stap 8) ============================================================ */ .stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; } .stat-card { border: 1px solid var(--fg-3); padding: 18px; background: var(--bg-2); position: relative; } .stat-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .stat-card-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); } .stat-card-value { font-family: "VT323", monospace; font-size: 36px; line-height: 1; color: var(--fg); text-shadow: 0 0 8px rgba(93, 255, 134, 0.4); margin-bottom: 4px; } .stat-card-value.hot { color: var(--hot); text-shadow: 0 0 8px rgba(255, 179, 71, 0.4); } .stat-card-sub { font-size: 11px; color: var(--fg-3); letter-spacing: 0.1em; } @media (max-width: 820px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 380px) { .stat-cards { grid-template-columns: 1fr; } } /* ============================================================ PRIORITY PANEL (stap 8) ============================================================ */ .priority-panel { border: 1px solid var(--fg-3); background: var(--bg-2); margin-bottom: 18px; } /* Dashboard: todos + suggestions side by side (50/50) on wide screens, the grid gap replaces the panels' bottom margin; stacked full-width below 900px (#9). */ .dashboard-panels { display: grid; /* minmax(0, 1fr) — NOT 1fr — so a track can shrink below its content's min-content width. With plain 1fr (= minmax(auto, 1fr)) a wide, non- shrinking child (e.g. a long suggested_by chip) blows the track out past the viewport. minmax(0,…) lets the inner ellipsis/clamps do their job. (#18) */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; } .dashboard-panels > .priority-panel { margin-bottom: 0; } @media (max-width: 900px) { .dashboard-panels { grid-template-columns: 1fr; } } .priority-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px dashed var(--fg-3); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); } .priority-all { color: var(--hot); font-size: 11px; letter-spacing: 0.14em; text-decoration: none; } .priority-all:hover { color: var(--fg); } .priority-row { display: flex; align-items: center; gap: 10px; /*