/* ===== OLNY — Precision Operations Console — design system ===== */ /* Two-layer tokens: raw palette → semantic roles. Light is the base; dark via [data-theme="dark"] or system preference. Toggle writes data-theme on . */ :root { /* raw */ --teal-500:#0e9995; --teal-600:#0b807d; --teal-050:#e4f4f2; --green:#2ea043; --amber:#c77d20; --red:#dc3b40; /* semantic — LIGHT (warm paper) */ --bg:#f7f4ef; --bg-tint:#efeae1; --surface:#fffefb; --surface-2:#f4f1ea; --surface-3:#ece7dd; --ink:#1b1d21; --ink-2:#4a4e56; --ink-soft:#787d86; --line:#e5dfd3; --line-strong:#d6cfc0; --brand:var(--teal-500); --brand-strong:var(--teal-600); --brand-tint:var(--teal-050); --ok:var(--green); --warn:var(--amber); --crit:var(--red); --shadow-sm:0 1px 2px rgba(40,34,24,.06), 0 1px 3px rgba(40,34,24,.05); --shadow-md:0 4px 14px rgba(40,34,24,.09), 0 2px 5px rgba(40,34,24,.06); --shadow-lg:0 18px 50px rgba(40,34,24,.16); /* scale */ --r-sm:7px; --r:11px; --r-lg:16px; --r-pill:999px; --f-ui:'Rubik',system-ui,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace; --ease:cubic-bezier(.4,0,.2,1); --dur:.2s; color-scheme:light; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0d1014; --bg-tint:#11151b; --surface:#161b22; --surface-2:#1b212a; --surface-3:#222a35; --ink:#e9ecf1; --ink-2:#aeb6c2; --ink-soft:#7a828f; --line:#242c37; --line-strong:#313a47; --brand:#19b3ad; --brand-strong:#14a099; --brand-tint:#0f2b2b; --ok:#38c26a; --warn:#e0973a; --crit:#f0575c; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.6); color-scheme:dark; }} :root[data-theme="dark"]{ --bg:#0d1014; --bg-tint:#11151b; --surface:#161b22; --surface-2:#1b212a; --surface-3:#222a35; --ink:#e9ecf1; --ink-2:#aeb6c2; --ink-soft:#7a828f; --line:#242c37; --line-strong:#313a47; --brand:#19b3ad; --brand-strong:#14a099; --brand-tint:#0f2b2b; --ok:#38c26a; --warn:#e0973a; --crit:#f0575c; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.6); color-scheme:dark; } *{ box-sizing:border-box; } html,body{ margin:0; } body{ min-height:100dvh; background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:14px; line-height:1.5; -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; } .mono{ font-family:var(--f-mono); font-feature-settings:"zero" 1; letter-spacing:-.2px; } h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.01em; } a{ color:var(--brand); text-decoration:none; } ::selection{ background:var(--brand); color:#fff; } :focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; } /* ---- header ---- */ header{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:15; } .brandmark{ display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.2px; } .brandmark .glyph{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand-strong)); color:#fff; box-shadow:var(--shadow-sm); } header .spacer{ flex:1; } .hamb{ display:none; background:none; border:0; color:var(--ink); font-size:22px; cursor:pointer; padding:2px 4px; } /* ---- status pill ---- */ .statuspill{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; padding:5px 13px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--surface-2); } .statuspill .s{ width:8px; height:8px; border-radius:50%; background:var(--ink-soft); } .statuspill.ok .s{ background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent); } .statuspill.warning .s{ background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent); } .statuspill.critical .s{ background:var(--crit); box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 25%,transparent); } .statuspill.ok, .statuspill.warning, .statuspill.critical{ animation:none; } /* ---- buttons ---- */ .btn{ font-family:inherit; font-size:13px; font-weight:500; padding:8px 14px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:all var(--dur) var(--ease); } .btn:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-1px); } .btn:active{ transform:translateY(0); } .btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 35%,transparent); } .btn.primary:hover{ background:var(--brand-strong); border-color:var(--brand-strong); color:#fff; } .btn.danger:hover{ border-color:var(--crit); color:var(--crit); } .btn.icon{ padding:8px 10px; } .btn.on{ color:var(--ok); border-color:var(--ok); background:color-mix(in srgb,var(--ok) 8%,var(--surface)); } /* ---- layout ---- */ .wrap{ display:grid; grid-template-columns:264px 1fr; min-height:calc(100dvh - 54px); } aside{ border-inline-end:1px solid var(--line); padding:16px 14px; overflow:auto; background:var(--surface); } aside h3{ margin:6px 6px 10px; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.7px; font-weight:600; } .navitem{ padding:9px 11px; border-radius:var(--r-sm); cursor:pointer; display:flex; align-items:center; gap:10px; margin-bottom:2px; color:var(--ink-2); transition:background var(--dur) var(--ease); } .navitem:hover{ background:var(--surface-2); color:var(--ink); } .navitem.active{ background:var(--brand-tint); color:var(--brand-strong); font-weight:500; } .navitem .mini{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); flex:none; } .navitem .mini.ok{ background:var(--ok); } .navitem .mini.warning{ background:var(--warn); } .navitem .mini.critical{ background:var(--crit); } .navitem .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } main{ padding:26px 30px; overflow:auto; } .pagehead{ margin-bottom:20px; } .pagehead h2{ font-size:22px; } .pagehead .sub{ color:var(--ink-soft); font-size:13px; margin-top:4px; } .empty{ color:var(--ink-soft); text-align:center; margin-top:64px; } /* ---- status instrument (signature) ---- */ .instrument{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-md); margin-bottom:24px; } .instrument .pulse{ display:block; width:100%; height:120px; } .instrument .readout{ position:absolute; inset-block-start:18px; inset-inline-start:22px; } .instrument .readout .lab{ font-size:12px; color:var(--ink-soft); letter-spacing:.4px; text-transform:uppercase; } .instrument .readout .big{ font-size:30px; font-weight:600; margin-top:3px; } .instrument.ok .big{ color:var(--ok); } .instrument.warning .big{ color:var(--warn); } .instrument.critical .big{ color:var(--crit); } .instrument .meta{ position:absolute; inset-block-end:14px; inset-inline-end:20px; font-size:11.5px; color:var(--ink-soft); } /* ---- KPI cards ---- */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:14px; margin-bottom:26px; } .kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow-sm); } .kpi .lab{ color:var(--ink-soft); font-size:12px; margin-bottom:9px; letter-spacing:.2px; } .kpi .val{ font-size:27px; font-weight:600; line-height:1.1; } .kpi .val small{ font-size:12px; font-weight:400; color:var(--ink-soft); } /* ---- NS rows ---- */ .section-h{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.6px; font-weight:600; margin:8px 0 12px; } .hint{ font-size:12.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-inline-start:3px solid var(--line-strong); border-radius:10px; padding:10px 13px; line-height:1.6; } .nsrow{ display:flex; align-items:center; gap:11px; padding:12px 15px; border:1px solid var(--line); border-radius:var(--r); margin-bottom:9px; background:var(--surface); } .nsrow .s{ width:9px; height:9px; border-radius:50%; background:var(--ink-soft); flex:none; } .nsrow .s.ok{ background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent); } .nsrow .s.bad{ background:var(--crit); box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 22%,transparent); } .nsrow .role{ margin-inline-start:auto; font-size:11.5px; color:var(--ink-soft); font-family:var(--f-mono); } /* ---- table ---- */ .tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); } table{ width:100%; border-collapse:collapse; } th,td{ text-align:right; padding:11px 14px; border-bottom:1px solid var(--line); font-size:13px; } th{ color:var(--ink-soft); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; background:var(--surface-2); } tr:last-child td{ border-bottom:0; } tbody tr:hover{ background:var(--surface-2); } td.type b{ font-family:var(--f-mono); color:var(--brand-strong); font-size:12.5px; } td .val{ font-family:var(--f-mono); direction:ltr; text-align:right; word-break:break-all; font-size:12.5px; } .rec-actions{ white-space:nowrap; } .rec-actions button{ background:none; border:0; color:var(--ink-soft); cursor:pointer; padding:5px 7px; font-size:14px; border-radius:5px; } .rec-actions button:hover{ color:var(--brand); background:var(--surface-3); } .toolbar{ display:flex; gap:10px; margin:16px 0; flex-wrap:wrap; } /* ---- inputs ---- */ input,select{ font-family:inherit; font-size:14px; padding:10px 12px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm); color:var(--ink); transition:border-color var(--dur); } input:focus,select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent); } input::placeholder{ color:var(--ink-soft); } /* ---- modal ---- */ .modal-bg{ position:fixed; inset:0; background:rgba(15,18,22,.55); backdrop-filter:blur(3px); display:none; place-items:center; z-index:40; padding:16px; } .modal-bg.on{ display:grid; } .modal{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:24px; width:min(94vw,460px); box-shadow:var(--shadow-lg); } .modal h4{ margin-bottom:18px; font-size:17px; } .field{ margin-bottom:13px; } .field label{ display:block; font-size:12px; color:var(--ink-soft); margin-bottom:6px; font-weight:500; } .field input,.field select{ width:100%; } .row2{ display:grid; grid-template-columns:1fr 1fr; gap:11px; } .modal-actions{ display:flex; gap:10px; margin-top:20px; } /* ---- toast ---- */ .toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(8px); background:var(--surface); border:1px solid var(--brand); color:var(--ink); padding:12px 20px; border-radius:var(--r); opacity:0; pointer-events:none; transition:all .3s var(--ease); z-index:50; max-width:90vw; text-align:center; box-shadow:var(--shadow-lg); font-weight:500; } .toast.on{ opacity:1; transform:translateX(-50%) translateY(0); } .scrim{ display:none; } @media (max-width:820px){ .hamb{ display:block; } .wrap{ grid-template-columns:1fr; } aside{ position:fixed; inset-block:54px 0; inset-inline-end:0; width:80vw; max-width:310px; transform:translateX(105%); transition:transform .28s var(--ease); z-index:30; box-shadow:var(--shadow-lg); } html[dir=rtl] aside{ transform:translateX(105%); } aside.open{ transform:translateX(0) !important; } .scrim{ position:fixed; inset:54px 0 0; background:rgba(0,0,0,.45); z-index:25; } .scrim.on{ display:block; } main{ padding:20px 16px; } header{ gap:9px; padding:11px 15px; } .hidesm{ display:none; } .instrument .readout .big{ font-size:24px; } } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }