/* ========================================================================= Aman IT — Knowledge Base Design system: "operations console" — dark RTL rail + light reading canvas. Wayfinding signature: --accent shifts per section (data-section on ). All UI strings live in the HTML/content (Hebrew). This file is theming only. ========================================================================= */ /* ------- Tokens ------- */ :root{ /* Dark navigation rail */ --rail: #161b26; --rail-2: #1e2634; /* hover / active surface */ --rail-line: #2a3344; --rail-ink: #c7cfdd; --rail-ink-dim:#7b8698; /* Reading canvas */ --canvas: #f5f6f8; --surface: #ffffff; --ink: #1a2230; --ink-2: #4f5a6a; --ink-3: #8791a1; --line: #e5e9ef; --line-2: #eef1f5; /* Accent — default (Systems / blue). Overridden per section below. */ --accent: #3b6ef5; --accent-ink: #2b53d0; --accent-soft: #eaf0ff; /* Code + status */ --code-bg: #0f1522; --code-ink:#dbe4f5; --ok: #12a150; --warn: #d98200; --danger: #e0484d; --info: #3b6ef5; /* Shape + type */ --radius: 12px; --radius-sm:8px; --shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 28px rgba(16,24,40,.06); --shadow-sm:0 1px 2px rgba(16,24,40,.06); --font-body:"Assistant","Segoe UI",system-ui,-apple-system,"Arial Hebrew",Arial,sans-serif; --font-head:"Heebo","Segoe UI",system-ui,-apple-system,sans-serif; --font-mono:"IBM Plex Mono","JetBrains Mono","SFMono-Regular",Consolas,"Courier New",monospace; --rail-w:302px; } /* Section-accent wayfinding */ body[data-section="onboarding"] {--accent:#0f9d8f;--accent-ink:#0b7c71;--accent-soft:#e1f6f2;} body[data-section="systems"] {--accent:#3b6ef5;--accent-ink:#2b53d0;--accent-soft:#eaf0ff;} body[data-section="troubleshooting"]{--accent:#e07b1a;--accent-ink:#bd6413;--accent-soft:#fceede;} /* ------- Reset ------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--font-body); background:var(--canvas); color:var(--ink); font-size:15.5px; line-height:1.7; -webkit-font-smoothing:antialiased; } a{color:var(--accent-ink);text-decoration:none} a:hover{text-decoration:underline} ::selection{background:var(--accent-soft)} /* ------- App shell ------- */ .app{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh} /* ========== RAIL (right, RTL-native) ========== */ .rail{ background:var(--rail); color:var(--rail-ink); border-inline-start:1px solid var(--rail-line); display:flex;flex-direction:column; position:sticky;top:0;height:100vh; overflow:hidden; } .brand{ display:flex;align-items:center;gap:12px; padding:20px 22px 16px; border-bottom:1px solid var(--rail-line); } .brand .mark{ width:38px;height:38px;border-radius:10px;flex:0 0 auto; background:linear-gradient(145deg,var(--accent),var(--accent-ink)); display:grid;place-items:center;color:#fff;font-family:var(--font-head); font-weight:800;font-size:17px;box-shadow:0 4px 14px rgba(0,0,0,.35); transition:background .35s ease; } .brand .brand-txt strong{display:block;font-family:var(--font-head);font-weight:700;color:#fff;font-size:16px;letter-spacing:.2px} .brand .brand-txt span{display:block;color:var(--rail-ink-dim);font-size:12.5px;margin-top:1px} /* Search */ .search{padding:16px 18px 8px} .search-box{position:relative} .search-box input{ width:100%;background:var(--rail-2);border:1px solid var(--rail-line); color:#fff;border-radius:10px;padding:10px 38px 10px 14px; font-family:var(--font-body);font-size:14px;outline:none;transition:border-color .15s; } .search-box input::placeholder{color:var(--rail-ink-dim)} .search-box input:focus{border-color:var(--accent)} .search-box .ico{ position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%); color:var(--rail-ink-dim);pointer-events:none;width:16px;height:16px; } /* Nav tree */ .nav{flex:1;overflow-y:auto;padding:8px 12px 24px} .nav::-webkit-scrollbar{width:8px} .nav::-webkit-scrollbar-thumb{background:#2c3648;border-radius:8px} .nav-group{margin-top:14px} .nav-group > .grp-head{ display:flex;align-items:center;gap:9px;width:100%; background:none;border:0;cursor:pointer;color:var(--rail-ink); padding:9px 10px;border-radius:9px;font-family:var(--font-head); font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase; } .nav-group > .grp-head:hover{background:var(--rail-2)} .nav-group .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto} .nav-group[data-sec="onboarding"] .dot{background:#0f9d8f} .nav-group[data-sec="systems"] .dot{background:#3b6ef5} .nav-group[data-sec="troubleshooting"] .dot{background:#e07b1a} .grp-head .chev{margin-inline-start:auto;transition:transform .2s;color:var(--rail-ink-dim)} .nav-group.collapsed .chev{transform:rotate(-90deg)} .nav-group.collapsed .grp-items{display:none} .grp-items{margin:2px 0 4px;padding-inline-start:6px} .nav-link{ display:flex;align-items:center;gap:8px; padding:8px 12px;margin:1px 0;border-radius:8px; color:var(--rail-ink);font-size:14px;cursor:pointer; border-inline-start:2px solid transparent;transition:background .12s,color .12s; } .nav-link:hover{background:var(--rail-2);text-decoration:none;color:#fff} .nav-link.active{ background:var(--rail-2);color:#fff;font-weight:600; border-inline-start-color:var(--accent); } .nav-link .tag-draft{ margin-inline-start:auto;font-size:10px;font-weight:700; background:#33405499;color:#9fb0c9;padding:2px 7px;border-radius:20px;letter-spacing:.3px; } /* ========== MAIN ========== */ .main{display:flex;flex-direction:column;min-width:0} .topbar{ position:sticky;top:0;z-index:20; display:flex;align-items:center;gap:14px; background:rgba(255,255,255,.85);backdrop-filter:saturate(1.6) blur(8px); border-bottom:1px solid var(--line); padding:14px 30px;min-height:62px; } .hamburger{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:6px} .crumbs{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-3);min-width:0} .crumbs .sec-pill{ display:inline-flex;align-items:center;gap:7px; background:var(--accent-soft);color:var(--accent-ink); font-weight:700;font-size:12.5px;padding:5px 12px;border-radius:20px; transition:background .35s,color .35s;white-space:nowrap; } .crumbs .sec-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)} .crumbs .sep{color:var(--line)} .crumbs .cur{color:var(--ink-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar-spacer{flex:1} .top-meta{font-size:12.5px;color:var(--ink-3);white-space:nowrap} /* Content canvas */ .content{padding:38px 30px 90px;display:flex;justify-content:center} .content-inner{width:100%;max-width:860px} /* Section landing (grid of topic cards) */ .landing-head{margin-bottom:26px} .landing-head .eyebrow{ display:inline-flex;align-items:center;gap:8px; color:var(--accent-ink);font-family:var(--font-head);font-weight:700; font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px; } .landing-head .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)} .landing-head h1{font-family:var(--font-head);font-size:30px;font-weight:800;margin:0 0 8px;letter-spacing:-.3px} .landing-head p{color:var(--ink-2);font-size:16px;margin:0;max-width:60ch} .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px} .topic-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:18px 18px 16px;cursor:pointer;text-align:start; transition:border-color .15s,box-shadow .15s,transform .15s;position:relative;overflow:hidden; } .topic-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--accent);opacity:0;transition:opacity .15s} .topic-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)} .topic-card:hover::before{opacity:1} .topic-card h3{font-family:var(--font-head);font-size:16px;font-weight:700;margin:0 0 6px} .topic-card p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.55} .topic-card .card-tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px} .chip{font-size:11.5px;color:var(--ink-2);background:var(--line-2);border-radius:20px;padding:3px 9px} .chip.draft{background:#fff4e0;color:#b06a00} /* ========== DOCUMENT (rendered guide) ========== */ .doc-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px} .doc-head .eyebrow{ display:inline-flex;align-items:center;gap:8px;color:var(--accent-ink); font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.5px; text-transform:uppercase;margin-bottom:10px; } .doc-head .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)} .doc-head h1{font-family:var(--font-head);font-size:29px;font-weight:800;margin:0;letter-spacing:-.3px;line-height:1.25} .doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--ink-3)} .doc-meta .chip{background:var(--line-2)} .doc-meta .version{font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:1px 7px;border-radius:10px;font-size:11.5px} .doc-meta .updated{margin-inline-start:auto} .doc{font-size:16px;color:var(--ink)} .doc .lead{font-size:18px;color:var(--ink-2);line-height:1.6;margin:0 0 24px} .doc h2{font-family:var(--font-head);font-size:21px;font-weight:700;margin:34px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-2);letter-spacing:-.2px} .doc h3{font-family:var(--font-head);font-size:17px;font-weight:700;margin:24px 0 8px} .doc p{margin:0 0 14px} .doc ul,.doc ol{margin:0 0 16px;padding-inline-start:24px} .doc li{margin:6px 0} .doc strong{font-weight:700;color:var(--ink)} .doc a{border-bottom:1px solid var(--accent-soft)} .doc hr{border:0;border-top:1px solid var(--line);margin:30px 0} /* Inline + block code */ .doc code{font-family:var(--font-mono);font-size:.88em;background:var(--line-2);color:#334;padding:2px 6px;border-radius:6px} .doc pre{position:relative;background:var(--code-bg);border-radius:var(--radius-sm);padding:16px 18px;margin:0 0 18px;overflow:auto;direction:ltr;text-align:left} .doc pre code{background:none;color:var(--code-ink);padding:0;font-size:13.5px;line-height:1.65} .copy-btn{ position:absolute;top:8px;inset-inline-end:8px; background:#ffffff14;border:1px solid #ffffff26;color:#cfd8ea; font-family:var(--font-body);font-size:11.5px;font-weight:600; padding:4px 10px;border-radius:6px;cursor:pointer;transition:background .12s; } .copy-btn:hover{background:#ffffff28} .copy-btn.done{background:var(--ok);border-color:var(--ok);color:#fff} /* Callouts */ .callout{ display:flex;gap:12px;border-radius:var(--radius-sm); padding:14px 16px;margin:0 0 18px;font-size:14.5px;line-height:1.6; border:1px solid var(--line);background:var(--surface); } .callout .c-ico{flex:0 0 auto;width:20px;height:20px;margin-top:1px} .callout p:last-child{margin-bottom:0} .callout.info {background:#f0f5ff;border-color:#d8e4ff;color:#1f3a75} .callout.tip {background:#eafaf1;border-color:#c9efd9;color:#0d5a34} .callout.warn {background:#fff6e6;border-color:#ffe1ab;color:#8a5300} .callout.danger{background:#fdecec;border-color:#f7c9cb;color:#9c2a2e} .callout .c-ico{color:currentColor} /* Step timeline (order matters → numbered) */ .steps{list-style:none;counter-reset:step;padding:0;margin:0 0 20px} .steps > li{ position:relative;padding:2px 44px 20px 0;margin:0; border-inline-start:2px solid var(--line); } .steps > li:last-child{border-inline-start-color:transparent;padding-bottom:0} .steps > li::before{ counter-increment:step;content:counter(step); position:absolute;inset-inline-start:-16px;top:-2px; width:30px;height:30px;border-radius:50%; background:var(--accent);color:#fff;font-family:var(--font-head);font-weight:700; font-size:14px;display:grid;place-items:center; box-shadow:0 0 0 4px var(--canvas); } .steps > li .s-title{font-family:var(--font-head);font-weight:700;font-size:16px;margin-bottom:4px;display:block} /* Tables */ .doc table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden} .doc th,.doc td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line-2)} .doc thead th{background:var(--line-2);font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--ink-2)} .doc tbody tr:last-child td{border-bottom:0} .doc tbody tr:hover{background:var(--line-2)} /* Draft / empty state */ .draft-state{text-align:center;padding:64px 20px;color:var(--ink-3)} .draft-state .badge{ display:inline-block;background:#fff4e0;color:#b06a00;font-weight:700; font-size:12px;letter-spacing:.4px;padding:5px 14px;border-radius:20px;margin-bottom:18px; } .draft-state h2{font-family:var(--font-head);color:var(--ink);font-size:22px;margin:0 0 8px;border:0;padding:0} .draft-state p{max-width:44ch;margin:0 auto;color:var(--ink-2)} /* Mobile drawer scrim */ .scrim{display:none;position:fixed;inset:0;background:rgba(12,16,24,.5);z-index:40} /* ------- Responsive ------- */ @media (max-width:920px){ .app{grid-template-columns:1fr} .rail{position:fixed;top:0;inset-inline-start:0;width:min(88vw,var(--rail-w));z-index:50; transform:translateX(-100%);transition:transform .22s ease} html[dir="rtl"] .rail{inset-inline-start:auto;inset-inline-end:0;transform:translateX(100%)} body.nav-open .rail{transform:translateX(0)} body.nav-open .scrim{display:block} .hamburger{display:inline-flex} .content{padding:26px 18px 80px} .topbar{padding:12px 18px} .top-meta{display:none} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} } /* ========================================================================= Contribute widget ("+" FAB, action menu, modals, status toast) Injected by js/contribute.js. FAB sits bottom-left (opposite the RTL rail). ========================================================================= */ .kb-fab{position:fixed;bottom:24px;left:24px;z-index:1200;width:56px;height:56px;border:none;border-radius:50%; background:var(--accent);color:#fff;box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center; transition:transform .15s ease,background .2s ease;font-family:var(--font-body)} .kb-fab:hover{transform:translateY(-2px)} .kb-fab svg{width:26px;height:26px;transition:transform .2s ease} .kb-fab[aria-expanded="true"] svg{transform:rotate(45deg)} .kb-fab.kb-disabled{background:var(--ink-3);cursor:not-allowed} .kb-menu{position:fixed;bottom:92px;left:24px;z-index:1200;display:none;flex-direction:column;gap:8px;min-width:210px} .kb-menu.open{display:flex} .kb-menu button{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-sm); background:var(--surface);color:var(--ink);font:600 14px/1 var(--font-body);box-shadow:var(--shadow-sm);cursor:pointer;text-align:right} .kb-menu button:hover{border-color:var(--accent);color:var(--accent-ink)} .kb-menu button svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto} .kb-overlay{position:fixed;inset:0;z-index:1300;background:rgba(16,24,40,.45);display:none;align-items:center;justify-content:center;padding:20px} .kb-overlay.open{display:flex} .kb-modal{background:var(--surface);color:var(--ink);width:100%;max-width:520px;border-radius:var(--radius);box-shadow:var(--shadow); max-height:88vh;overflow:auto;font-family:var(--font-body);direction:rtl} .kb-modal header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)} .kb-modal header h3{margin:0;font:700 17px/1.3 var(--font-head)} .kb-modal header button{background:none;border:none;font-size:22px;line-height:1;color:var(--ink-3);cursor:pointer} .kb-modal .body{padding:20px 22px} .kb-modal label{display:block;font:600 13px/1.5 var(--font-body);color:var(--ink-2);margin:14px 0 6px} .kb-modal label:first-child{margin-top:0} .kb-modal input[type=text],.kb-modal textarea,.kb-modal select{width:100%;padding:10px 12px;border:1px solid var(--line); border-radius:var(--radius-sm);font:400 14px/1.5 var(--font-body);color:var(--ink);background:var(--surface);box-sizing:border-box} .kb-modal textarea{min-height:80px;resize:vertical} .kb-modal .drop{border:2px dashed var(--line);border-radius:var(--radius-sm);padding:22px;text-align:center;color:var(--ink-3); cursor:pointer;transition:border-color .2s} .kb-modal .drop.hot{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)} .kb-modal .drop strong{color:var(--ink-2)} .kb-modal .file-name{font:600 13px var(--font-mono);color:var(--accent-ink);margin-top:8px;word-break:break-all} .kb-modal .hint{font:400 12px/1.5 var(--font-body);color:var(--ink-3);margin-top:6px} .kb-modal footer{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-start} .kb-btn{padding:10px 18px;border-radius:var(--radius-sm);font:700 14px var(--font-body);cursor:pointer;border:1px solid transparent} .kb-btn.primary{background:var(--accent);color:#fff} .kb-btn.primary:disabled{background:var(--ink-3);cursor:not-allowed} .kb-btn.ghost{background:transparent;border-color:var(--line);color:var(--ink-2)} .kb-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1400;background:var(--ink);color:#fff; padding:12px 20px;border-radius:var(--radius-sm);font:600 14px var(--font-body);box-shadow:var(--shadow);display:none;max-width:90vw;direction:rtl} .kb-toast.show{display:block} .kb-toast.err{background:var(--danger)} .kb-toast.ok{background:var(--ok)} .kb-toast a{color:#fff;text-decoration:underline} .kb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .kb-chip{padding:7px 12px;border:1px solid var(--line);border-radius:20px;font:600 13px var(--font-body);cursor:pointer;color:var(--ink-2)} .kb-chip.sel{background:var(--accent);color:#fff;border-color:var(--accent)} @media (max-width:560px){.kb-fab{bottom:16px;left:16px}.kb-menu{bottom:80px;left:16px}}