/* Knowledge Base - Minimal Black & White Design */ /* ─── View Transitions opt-in ────────────────────────────────── Cross-document navigations between the Knowledge surface and the Support portal share the same SSR-emitted header, but each click is still a full document swap (Express renders a fresh HTML doc per route). Opting in to the View Transitions API gives the browser permission to crossfade between the two documents instead of instant-painting the new one, hiding the header flicker. The named transition on `.kb-header` tells the browser to treat the header as the same logical element across both pages — it morphs in place rather than fading out + in. The center nav appears to stay put while the page body underneath swaps. Supported in Chromium and Safari TP. Firefox no-ops the @rule and falls back to today's instant navigation — no regression. */ @view-transition { navigation: auto; } * { margin: 0; padding: 0; box-sizing: border-box; } :root { --kb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --kb-font-family: var(--kb-font); --kb-bg: #ffffff; --kb-text: #1a1a1a; --kb-text-muted: #666666; --kb-border: #e5e5e5; --kb-hover: #f5f5f5; --kb-active: #1a1a1a; --kb-active-text: #ffffff; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--kb-font-family); line-height: 1.6; color: var(--kb-text); background-color: var(--kb-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Layout */ .kb-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* AI Assistant is an overlay panel — it sits on top of the page and does NOT reflow the layout regardless of viewport width or resize- handle drags. The page underneath stays at its natural width and remains scrollable behind the panel. `ask-assistant.js` still toggles `data-kb-assistant-open` on (and keeps the `--kb-assistant-width` var in sync) so other rules can react to the open state — currently just hiding the Ask Assistant pill below. The var itself is unused by layout now. */ body[data-kb-assistant-open="true"] .kb-ask-pill { display: none; } .kb-header { position: sticky; top: 0; z-index: 100; background: var(--kb-bg); border-bottom: 1px solid var(--kb-border); /* Stable identity across document navigations — the View Transitions API morphs the header between routes rather than fading old/new, so the center nav links appear to stay in place. Pair with @view-transition { navigation: auto } above. */ view-transition-name: kb-header; } .kb-header-inner { /* Full-viewport header — logo flush-left, actions flush-right, nav absolutely centered against the viewport so it doesn't shift when the left cluster's width changes (e.g. hamburger present on KB article pages, absent on KB home / support portal). */ position: relative; padding: 0 24px; height: 64px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; } .kb-header-cluster { display: flex; align-items: center; gap: 12px; min-width: 0; } .kb-header-cluster--left { justify-self: start; } .kb-header-cluster--right { justify-self: end; } /* Center cluster — primary surface links (Knowledge / Tickets) + admin-defined nav links (kbNavLinks). Lives in the grid's center `1fr` column (the header is `grid: auto 1fr auto`), centered within the space BETWEEN the left/right clusters. This is overlap-proof by construction: the grid reserves the clusters' space first, so the nav can never paint under the search/actions — the previous absolute-centering (relative to the viewport, ignoring cluster widths) caused exactly that bug on mid-width screens. If the links don't fit they scroll within the column. */ .kb-header-nav { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 24px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .kb-header-nav::-webkit-scrollbar { display: none; } .kb-header-nav a { position: relative; color: var(--kb-text-muted); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; /* Reserve the pill geometry on every link so swapping the active state in/out doesn't reflow the row. The active link gets a visible outline; inactive links keep the same padding with a transparent border. */ padding: 4px 12px; border: 1px solid transparent; border-radius: 999px; transition: color 0.15s, border-color 0.15s, background-color 0.15s; } .kb-header-nav a:hover { color: var(--kb-text); } .kb-header-nav a[aria-current="page"] { color: var(--kb-text); border-color: currentColor; } /* "Unseen ticket update" indicator — a red dot top-right of the nav link. Toggled by kb.js setting [data-has-update="true"] on the link after polling /api/ticket-portal/.../has-updates. Pulses by default; reduced-motion users get a static dot. */ .kb-header-nav a[data-has-update="true"]::after { content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 999px; background: #ef4444; box-shadow: 0 0 0 2px var(--kb-bg, #ffffff); animation: kb-nav-dot-pulse 1.5s ease-in-out infinite; } @keyframes kb-nav-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } @media (prefers-reduced-motion: reduce) { .kb-header-nav a[data-has-update="true"]::after { animation: none; } } .kb-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--kb-text); font-weight: 600; font-size: 18px; } .kb-logo img { height: 32px; width: auto; } /* Shared pill base — search + Ask Assistant share this shape. */ .kb-toolbar-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--kb-border); background: var(--kb-hover); color: var(--kb-text-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .kb-toolbar-pill:hover { background: var(--kb-bg); border-color: var(--kb-text-muted); color: var(--kb-text); } .kb-pill-icon { width: 14px; height: 14px; flex-shrink: 0; } .kb-pill-shortcut { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 1px 6px; border-radius: 4px; background: var(--kb-bg); border: 1px solid var(--kb-border); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; color: var(--kb-text-muted); } /* Mac default. The kb script sets data-platform="other" on non-Mac. */ .kb-pill-shortcut::before { content: "⌘"; } [data-platform="other"] .kb-pill-shortcut::before { content: "Ctrl "; } .kb-pill-shortcut::after { content: attr(data-shortcut); } /* Language switcher — a JS-free native
dropdown. The closed pill shows the current locale's flag + a caret; opening reveals an anchored menu of every supported language. Mirrors the .kb-copy-page-menu popover so the visual language matches. */ .kb-lang-switcher { position: relative; flex-shrink: 0; /* The
base would otherwise stretch; keep it pill-shaped. */ height: 36px; padding: 0; overflow: visible; } .kb-lang-summary { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; list-style: none; /* strip the default disclosure triangle (Firefox) */ cursor: pointer; } .kb-lang-summary::-webkit-details-marker { display: none; /* strip the default disclosure triangle (WebKit) */ } .kb-lang-summary:focus-visible { outline: 2px solid var(--kb-active); outline-offset: 2px; } .kb-lang-flag { font-size: 16px; line-height: 1; } /* CSS-drawn caret — a small chevron that flips when the menu is open. */ .kb-lang-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform 0.15s ease; } .kb-lang-switcher[open] .kb-lang-caret { transform: rotate(-135deg); margin-top: 2px; } .kb-lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--kb-bg); border: 1px solid var(--kb-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: 6px; z-index: 50; } .kb-lang-switcher:not([open]) .kb-lang-menu { display: none; } .kb-lang-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--kb-text); font-size: 13px; font-weight: 500; text-decoration: none; } .kb-lang-option:hover, .kb-lang-option:focus-visible { background: var(--kb-hover); outline: none; } .kb-lang-option .kb-lang-name { flex: 1; } /* Green checkmark on the active language, echoing the design reference. */ .kb-lang-option[aria-current="true"]::after { content: "✓"; color: #15803d; font-weight: 700; } /* Search pill — overrides for the input + results dropdown. Compact at rest (it doesn't need to be big until engaged); it grows on focus. The smaller resting width also keeps the absolutely-centered nav from colliding with the right cluster on mid-width viewports. */ .kb-search-pill { position: relative; width: 180px; padding: 0 8px 0 12px; } .kb-search-pill:focus-within { background: var(--kb-bg); border-color: var(--kb-text); width: 320px; } .kb-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 13px; color: var(--kb-text); height: 100%; min-width: 0; } .kb-search-input::placeholder { color: var(--kb-text-muted); } .kb-search-icon { color: var(--kb-text-muted); } /* Hide the shortcut chip when the search has focus — let the text breathe. */ .kb-search-pill:focus-within .kb-pill-shortcut { display: none; } /* Ask Assistant pill — same base, distinct accent. */ .kb-ask-pill { border-color: var(--kb-border); } .kb-ask-pill .kb-pill-icon { color: var(--kb-text); } /* Ask Assistant modal — built on demand by ask-assistant.js. */ .kb-ask-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 300; } .kb-ask-modal { width: 100%; max-width: 420px; background: var(--kb-bg); border: 1px solid var(--kb-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); padding: 24px; } .kb-ask-modal-header { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--kb-text); margin-bottom: 12px; } .kb-ask-modal-body { margin: 0 0 20px; color: var(--kb-text-muted); font-size: 14px; line-height: 1.5; } .kb-ask-modal-actions { display: flex; justify-content: flex-end; gap: 8px; } .kb-ask-btn { height: 34px; padding: 0 16px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; } .kb-ask-btn--ghost { background: transparent; border-color: var(--kb-border); color: var(--kb-text-muted); } .kb-ask-btn--ghost:hover { border-color: var(--kb-text-muted); color: var(--kb-text); } .kb-ask-btn--primary { background: var(--kb-text); color: var(--kb-bg); } .kb-ask-btn--primary:hover { opacity: 0.9; } .kb-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--kb-bg); border: 1px solid var(--kb-border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 400px; overflow-y: auto; display: none; } .kb-search-results.active { display: block; } .kb-search-result { display: block; padding: 12px 16px; text-decoration: none; color: var(--kb-text); border-bottom: 1px solid var(--kb-border); transition: background 0.15s; } .kb-search-result:last-child { border-bottom: none; } .kb-search-result:hover { background: var(--kb-hover); } .kb-search-result-title { font-weight: 500; font-size: 14px; margin-bottom: 4px; } .kb-search-result-desc { font-size: 12px; color: var(--kb-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kb-menu-btn { display: none; background: none; border: none; padding: 8px; cursor: pointer; color: var(--kb-text); } /* Main Layout — spans the viewport. Sidebar sits at the left edge, content column is centered inside its (now wider) flex slot. */ .kb-main { flex: 1; display: flex; width: 100%; } /* Sidebar */ .kb-sidebar { width: 280px; flex-shrink: 0; border-right: 1px solid var(--kb-border); padding: 24px; height: calc(100vh - 64px); position: sticky; top: 64px; overflow-y: auto; } /* The portal nav drawer only exists as a mobile drawer — never on desktop, where the base .kb-sidebar styles above would otherwise show it inline. */ .kb-sidebar--nav { display: none; } .kb-sidebar-overlay { display: none; } /* Home/welcome pages don't render the sidebar at all (no