/* help-site additions layered on the shipped docviewer.css */ /* Collapsible sidebar groups. docviewer.css styles .sci-navgroup as an inert label; here it is a button, so reset the UA chrome and keep the shipped type treatment. Without JS every group stays open (the markup ships expanded), so no link is ever unreachable. */ .sci-navgroup { display:block; width:100%; box-sizing:border-box; text-align:left; font:inherit; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#8a8886; background:none; border:0; cursor:default; position:relative; } .sci-js .sci-navgroup { cursor:pointer; padding-right:34px; } .sci-js .sci-navgroup:hover { color:#323130; } .sci-js .sci-navgroup::after { content:""; position:absolute; right:20px; top:50%; width:6px; height:6px; margin-top:-5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); transition:transform .15s ease; } .sci-js .sci-navgroup[aria-expanded="true"]::after { transform:rotate(45deg); margin-top:-3px; } .sci-navgroup:focus-visible { outline:2px solid #0f6cbd; outline-offset:-2px; } .sci-js .sci-groupitems { display:none; } .sci-js .sci-groupitems.sci-expanded { display:block; } @media (prefers-reduced-motion: reduce) { .sci-js .sci-navgroup::after { transition:none; } } .sci-search::-webkit-search-cancel-button { cursor:pointer; } .sci-navlink.sci-cursor { background:#f3f2f1; } /* Breadcrumb: "Group › Parent › This page", above the topic header. */ .sci-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 14px; font-size:12px; line-height:1.5; color:#8a8886; } .sci-crumb { color:#605e5c; } a.sci-crumb { color:#0f6cbd; text-decoration:none; } a.sci-crumb:hover { text-decoration:underline; } .sci-crumbhere { color:#8a8886; } .sci-crumbsep { color:#c8c6c4; } .sci-appbadge { display:inline-block; margin-left:6px; padding:1px 6px; font-size:9px; font-weight:600; letter-spacing:.04em; color:#8a5700; background:#fff4ce; border-radius:9px; vertical-align:middle; } .sci-provenance { margin:0 0 18px; padding:10px 14px; background:#fff4ce; border:1px solid #f2d998; border-left:4px solid #d9a200; border-radius:4px; font-size:13px; color:#513c06; } .sci-toolbar { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-bottom:8px; } .sci-copybtn { font:inherit; font-size:12px; padding:5px 12px; color:#0f6cbd; background:#fff; border:1px solid #c7c6c4; border-radius:4px; cursor:pointer; } .sci-copybtn:hover { background:#f3f2f1; } .sci-copied { color:#0b6a0b; border-color:#0b6a0b; } .sci-copyfail { color:#a4262c; border-color:#a4262c; } /* Light/dark theme toggle (top-right of the toolbar). Icons swap with the effective theme. */ .sci-themetoggle { font:inherit; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; color:#0f6cbd; background:#fff; border:1px solid #c7c6c4; border-radius:4px; cursor:pointer; } .sci-themetoggle:hover { background:#f3f2f1; } .sci-themetoggle svg { width:15px; height:15px; } .sci-themetoggle .sci-sun { display:none; } .sci-themetoggle .sci-moon { display:inline-flex; } html[data-theme="dark"] .sci-themetoggle .sci-moon { display:none; } html[data-theme="dark"] .sci-themetoggle .sci-sun { display:inline-flex; } @media (prefers-color-scheme: dark) { html:not([data-theme]) .sci-themetoggle .sci-moon { display:none; } html:not([data-theme]) .sci-themetoggle .sci-sun { display:inline-flex; } } /* Skip link — visually offscreen until focused (keyboard users land on it first). */ .sci-skip { position:absolute; left:-9999px; top:0; z-index:100; background:#0f6cbd; color:#fff; padding:8px 14px; text-decoration:none; border-radius:0 0 4px 0; } .sci-skip:focus { left:0; } /* The flex-column layout + full-width .sci-footer bar are shared (docviewer.css). The static site just pins the column to the viewport height so the footer sits at the bottom of the screen. */ html, body { margin:0; } #controlAddIn { height:100vh; } /* Mobile nav toggle + backdrop — created by docviewer-static.js, shown only on small screens. */ .sci-navtoggle, .sci-backdrop { display:none; } /* ---- Responsive / mobile ---- */ @media (max-width:720px) { #controlAddIn, #sciDocRoot { height:auto; min-height:100%; } .sci-layout { flex-direction:column; height:auto; } .sci-content { overflow:visible; padding:0 20px 60px; } /* On mobile the content pane isn't a scroll container, so drop the pin and let the headers flow normally — avoids overlap with the fixed nav toggle. */ .sci-endpoint, .sci-content > h1 { position:static; margin:0 0 16px; padding:0 0 10px; } .sci-norail .sci-content { max-width:none; } .sci-resizer { display:none; } .sci-fields { flex-basis:auto; width:100%; border-left:none; border-top:1px solid #edebe9; } .sci-sidebar { flex-basis:auto; width:100%; } /* no-JS fallback: sidebar stacks on top */ /* With JS (docviewer-static.js adds .sci-js to the root) the sidebar becomes an off-canvas drawer. */ .sci-js .sci-navtoggle { display:inline-flex; flex-direction:column; justify-content:center; gap:4px; position:fixed; top:10px; left:10px; z-index:80; width:40px; height:40px; padding:9px; background:#0f6cbd; border:none; border-radius:6px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.3); } .sci-js .sci-navtoggle span { display:block; height:2px; background:#fff; border-radius:1px; } .sci-js .sci-content { padding-top:60px; } .sci-js .sci-sidebar { position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px; z-index:90; transform:translateX(-100%); transition:transform .2s ease; box-shadow:2px 0 16px rgba(0,0,0,.35); } .sci-js .sci-layout.sci-navopen .sci-sidebar { transform:none; } .sci-js .sci-layout.sci-navopen ~ .sci-backdrop { display:block; position:fixed; inset:0; z-index:85; background:rgba(0,0,0,.45); } } /* ============================================================ PopdockAI brand layer — PUBLIC SITE ONLY. Layered over the shipped docviewer.css (loaded first), which the in-app BC viewer keeps native/unbranded. Palette + type from the popdockai-brand skill. Notes: - NB International Pro is licensed and can't be embedded under the site CSP, so headings use the brand-sanctioned Arial/Helvetica fallback. - IBM Plex Mono (OFL) drives eyebrows/labels/code and IS self-hosted (the @font-face block below, woff2 under assets/fonts/), so it renders for every visitor rather than only those who happen to have it installed locally. - Blue 500 #33B6FF fails WCAG as link TEXT on white, so link/accent text uses Blue 700 #3533FF (the logo mark, ~6.5:1); #33B6FF stays decorative (underline + gradients), matching the brand's own usage. ============================================================ */ /* Self-hosted IBM Plex Mono (SIL OFL 1.1 — licence served at assets/fonts/OFL.txt). Only the three weights the mono-styled selectors ask for; no italic face is used anywhere. font-display:swap so a slow font never blocks first paint; the swap reflows only the mono runs (eyebrows, badges, code) rather than the body copy. */ @font-face { font-family:"IBM Plex Mono"; src:url("assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"IBM Plex Mono"; src:url("assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:"IBM Plex Mono"; src:url("assets/fonts/IBMPlexMono-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } :root { --pai-blue-700:#3533FF; --pai-blue-500:#33B6FF; --pai-blue-200:#B0F2FF; --pai-ink:#1E1D1B; --pai-orange:#FE7F43; --pai-n0:#F6F5F3; --pai-n1:#ECE9E4; --pai-n2:#E2DED7; --pai-n4:#A9A59E; --pai-n5:#83807A; --pai-n6:#5F5D58; --pai-radius:8px; --pai-sans:"NB International Pro", Arial, Helvetica, "Segoe UI", system-ui, sans-serif; --pai-mono:"IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace; --pai-link-hover:#2725d6; /* accessible darkened indigo for link hover text */ } /* Type — brand sans for body/headings (NB Intl Pro → Arial); tight headlines; brand ink. */ #controlAddIn, #sciDocRoot { font-family:var(--pai-sans); color:var(--pai-ink); } .sci-content h1, .sci-content h2 { letter-spacing:-.02em; line-height:1.12; } .sci-content p, .sci-content li { color:var(--pai-ink); } /* Mono eyebrows / labels / technical accents + code. */ .sci-navgroup, .sci-fieldhead, .sci-method, .sci-appbadge, .sci-hookbadge, .sci-content code, .sci-content pre, .sci-url, .sci-fieldtable td code { font-family:var(--pai-mono); } /* Neutrals — warm-grey surfaces + borders. */ .sci-sidebar, .sci-fields, .sci-fieldhead, .sci-footer, .sci-table th { background:var(--pai-n0); } .sci-sidebar { border-right-color:var(--pai-n1); } .sci-fields { border-left-color:var(--pai-n1); } .sci-brand, .sci-content h2 { border-bottom-color:var(--pai-n1); } .sci-table th, .sci-table td { border-color:var(--pai-n1); } /* Brand blue — wordmark (+ gradient rule), active nav, accents, focus. */ .sci-brand { color:var(--pai-blue-700); position:relative; } .sci-brand::after { content:""; position:absolute; left:22px; right:22px; bottom:-1px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--pai-blue-700),var(--pai-blue-500),var(--pai-blue-200)); } .sci-sidebar a.active { background:#eeeefe; border-left-color:var(--pai-blue-700); color:var(--pai-blue-700); } .sci-webhook, .sci-fieldhead, .sci-legend > summary { color:var(--pai-blue-700); } .sci-resizer:hover, body.sci-resizing .sci-resizer { background:var(--pai-blue-700); } .sci-search:focus { border-color:var(--pai-blue-700); box-shadow:0 0 0 2px rgba(53,51,255,.2); } .sci-fieldtable td code { background:#eeeefe; color:var(--pai-blue-700); } .sci-hookbadge { background:#e7e7ff; color:var(--pai-link-hover); } .sci-hookbadge .sci-webhook { color:var(--pai-link-hover); } /* Links — accessible brand-indigo text, Blue 500 animated underline. */ .sci-content a { color:var(--pai-blue-700); background-image:linear-gradient(var(--pai-blue-500),var(--pai-blue-500)); } .sci-content a:hover { color:var(--pai-link-hover); } .sci-footer a { color:var(--pai-blue-700); } .sci-content h2::before { background:linear-gradient(var(--pai-blue-700),var(--pai-blue-500)); } /* POST badge → brand blue (GET/PATCH/DELETE keep their semantic colours). */ .sci-post { background:var(--pai-blue-700); } /* Callouts + code/URL — 8px brand radius; the "note" callout adopts brand blue. */ .sci-note { border-left-color:var(--pai-blue-700); background:#f0f0ff; border-radius:0 var(--pai-radius) var(--pai-radius) 0; } .sci-warn, .sci-info, .sci-tip, .sci-danger { border-radius:0 var(--pai-radius) var(--pai-radius) 0; } .sci-content pre, .sci-url { border-radius:var(--pai-radius); } .sci-url:hover { border-color:var(--pai-blue-700); box-shadow:0 2px 8px rgba(53,51,255,.12); } .sci-table tbody tr:hover { background:#f4f4ff; } /* Pills — brand-blue hover; the resolver pill picks up the brand tint. */ .sci-pill:hover { background:var(--pai-blue-700); } .sci-pill-res { background:#e0e0ff; color:var(--pai-link-hover); } .sci-pill-res:hover { background:var(--pai-blue-700); color:#fff; } /* Buttons / toolbar / skip link / mobile nav / search → brand blue + 8px radius. */ .sci-copybtn { color:var(--pai-blue-700); border-color:#c9c8ff; border-radius:var(--pai-radius); } /* The split button is an half plus a