/* help-center.css * * Shell styles of the PUBLIC help center (/help/{provider}/{lang}/…): entrance motion and the article * rail. The search field and its panel live in help-center-search.css. Plain CSS on purpose, not Tailwind * utilities: the search panel is built by JavaScript at runtime, so its class names never appear in a * file the Tailwind content scan reads — utilities for it would be compiled away. Everything here is * prefixed `hc-` and scoped to that one page. * * The page carries both schemes: the `dark` class on is stamped by the layout's FOUC guard and * maintained by help-center-theme.js, so every rule here that hard-codes a colour has a `.dark` answer at * the bottom of the file. */ /* ---------- entrance motion ---------- */ @keyframes hc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .fbx-rise, .fbx-stagger > * { animation: hc-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } .fbx-stagger > :nth-child(2) { animation-delay: 60ms; } .fbx-stagger > :nth-child(3) { animation-delay: 120ms; } .fbx-stagger > :nth-child(4) { animation-delay: 180ms; } .fbx-stagger > :nth-child(5) { animation-delay: 240ms; } .fbx-stagger > :nth-child(6) { animation-delay: 300ms; } .fbx-stagger > :nth-child(n + 7) { animation-delay: 360ms; } /* ---------- article count badge ---------- */ /* The count beside a collection's name. A pill rather than loose grey text: it is a measurement, not a sentence, and the enclosure is what stops it from reading as the start of the description under it. Neutral on purpose — the provider's accent belongs to what the reader can act on, and a count is not. */ .hc-count { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #f4f4f5; color: #52525b; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .dark .hc-count { background: #27272a; color: #a1a1aa; } /* ---------- article table of contents ---------- */ /* The rail beside an article: sticky under the header, one entry per h2, the current section marked on a vertical guide. Hidden below 1180px: the article page already gives its left column to the sidebar (help-center-nav.css), and a third column narrower than that squeezes the article itself. The article's own headings are the map there. */ .hc-toc { display: none; } @media (min-width: 1180px) { .hc-toc:not([hidden]) { display: block; flex: none; width: 216px; position: sticky; top: 96px; max-height: calc(100vh - 128px); overflow-y: auto; } } .hc-toc-list { display: flex; flex-direction: column; border-inline-start: 2px solid #e4e4e7; } .hc-toc-link { display: block; margin-inline-start: -2px; padding: 7px 0 7px 16px; border-inline-start: 2px solid transparent; color: #71717a; font-size: 13.5px; font-weight: 400; line-height: 1.45; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; } .hc-toc-link:hover { color: #18181b; } .hc-toc-link[data-hc-active="true"] { border-inline-start-color: #18181b; color: #18181b; font-weight: 500; } @media (prefers-reduced-motion: reduce) { .fbx-rise, .fbx-stagger > * { animation: none; } } /* ---------- overlay scrollbar ---------- */ /* The sidebar tree and the search suggestions scroll under a bar of their own (help-center-scrollbar.js, which drives the app's OverlayScrollbar): a native scrollbar cannot show the hand, whatever cursor it is given. Until the script runs, each area keeps its native bar. Same quiet grey as the house pill; under the pointer it only darkens a shade, since the accent already marks the current article. */ [data-hc-overlay-on] > [data-hc-overlay-viewport] { scrollbar-width: none; } [data-hc-overlay-on] > [data-hc-overlay-viewport]::-webkit-scrollbar { display: none; } .hc-scrollbar { display: none; } /* The track is wider than the thumb it holds, so the pointer finds it; OverlayScrollbar.razor.js shows it while the area is hovered and places the thumb. The thumb keeps to the outer edge of the track, close to the area's border, so it stays clear of a highlighted row. */ [data-hc-overlay-on] > .hc-scrollbar { position: absolute; top: 6px; right: 0; bottom: 6px; z-index: 1; display: block; width: 12px; opacity: 0; transition: opacity 0.2s ease; } .hc-scrollbar-thumb { position: absolute; left: 6px; right: 2px; border-radius: 9999px; background-color: rgba(0, 0, 0, 0.1); cursor: pointer; transition: background-color 0.15s ease, left 0.15s ease, right 0.15s ease; } .hc-scrollbar:hover .hc-scrollbar-thumb, .hc-scrollbar-thumb.dragging { left: 5px; right: 1px; background-color: rgba(0, 0, 0, 0.22); } .hc-scrollbar-thumb.dragging { cursor: grabbing; } /* ---------- dark scheme ---------- */ /* The `dark` class is stamped on by the layout's FOUC guard and maintained by help-center-theme.js. Accent-driven surfaces switch to the palette's dark counterparts, the same pair the widget's own chrome uses — a contractor's colour has to stay readable on both grounds. */ .hc-card-icon { background: var(--lw-widget-tint, #eef2ff); color: var(--lw-widget-on-light, #4f46e5); } /* Not --lw-widget-tint-dark, which every other dark surface of the agent uses. That tint is mixed far into the WIDGET's own ground (#0f1116) on purpose: the widget floats over a stranger's page and has to stay quiet there. These cards stand on the help center's own plate, which is several steps lighter, and the same tint landed on it as a patch nobody could see. A wash of the accent itself instead, at a strength that reads on whatever the card is: it carries its own contrast rather than inheriting a ground it is not standing on. */ .dark .hc-card-icon { background: color-mix(in srgb, var(--lw-widget-on-dark, #a5b4fc) 18%, transparent); color: var(--lw-widget-on-dark, #a5b4fc); } .dark .hc-toc-list { border-inline-start-color: #3f3f46; } .dark .hc-toc-link { color: #a1a1aa; } .dark .hc-toc-link:hover { color: #fafafa; } .dark .hc-toc-link[data-hc-active="true"] { border-inline-start-color: #fafafa; color: #fafafa; } .dark .hc-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.1); } .dark .hc-scrollbar:hover .hc-scrollbar-thumb, .dark .hc-scrollbar-thumb.dragging { background-color: rgba(255, 255, 255, 0.22); }