/* ====================================================================== HERE ReadMe Custom CSS — Reorganized & Hardened ====================================================================== Section index: 1. DESIGN TOKENS (:root, dark, system) 2. LAYOUT / CONTAINER 3. HEADER / TOP NAV 4. SEARCH 5. SIDEBAR (light + dark + system dark) 6. HDS DOC BODY — TYPOGRAPHY & COLORS 7. HDS DOC BODY — LISTS 8. HDS DOC BODY — CODE (inline + block + tabs) 9. HDS DOC BODY — TABLES 10. HDS DOC BODY — CARDS, TABS, ACCORDIONS, BANNERS 11. HDS DOC BODY — FIGURES & CAPTIONS 12. LIGHTBOX / IMAGES 13. NON-HDS MARKDOWN (links, em fix) 14. CUSTOM EMBEDS / UTILITIES 15. MISC / OVERRIDES ====================================================================== */ @media (prefers-color-scheme: dark) { [data-color-mode="system"] .App .rm-Container { background: #0C0E10; } } [data-color-mode="dark"] .App .rm-Container { background: #0C0E10; } /*Login Button*/ a.rm-Header-top-link_login { /* Reset ReadMe base interference */ transition: none !important; -webkit-font-smoothing: antialiased !important; appearance: none !important; font-weight: 600 !important; /* Our styles */ background: rgba(0, 153, 204, 0.04) !important; border: 1px solid #3F7183 !important; border-radius: 50px !important; padding: 8px 12px !important; height: 32px !important; color: #092732 !important; font-size: 14px !important; letter-spacing: -0.4px !important; line-height: 16px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: none !important; text-decoration: none !important; } a.rm-Header-top-link_login:hover { background: rgba(0, 153, 204, 0.10) !important; } a.rm-Header-top-link_login::before { content: ''; display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background-color: #092732; -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3' stroke='%23092732' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 11l3-3-3-3M13 8H6' stroke='%23092732' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3' stroke='%23092732' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 11l3-3-3-3M13 8H6' stroke='%23092732' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* System preference dark */ @media (prefers-color-scheme: dark) { [data-color-mode="system"] a.rm-Header-top-link_login { background: rgba(0, 153, 204, 0.08) !important; border-color: #1DF3E4 !important; color: #e8f4f8 !important; } [data-color-mode="system"] a.rm-Header-top-link_login:hover { background: rgba(0, 153, 204, 0.18) !important; } [data-color-mode="system"] a.rm-Header-top-link_login::before { background-color: #e8f4f8 !important; } } /* Explicitly set to dark */ [data-color-mode="dark"] a.rm-Header-top-link_login { background: rgba(0, 153, 204, 0.08) !important; border-color: #1DF3E4 !important; color: #e8f4f8 !important; } [data-color-mode="dark"] a.rm-Header-top-link_login:hover { background: rgba(0, 153, 204, 0.18) !important; } [data-color-mode="dark"] a.rm-Header-top-link_login::before { background-color: #e8f4f8 !important; } /* ====================================================================== 1) DESIGN TOKENS (:root, dark, system) ---------------------------------------------------------------------- Targets: :root, [data-color-mode="dark"], @media system dark Why: Single source of truth for all color / font / radius variables used across sidebar, header, and doc body. Gotchas: --hds-* tokens are NOT available here; they only exist inside .rm-Markdown[data-styles="hds"] (injected by HDS stylesheet). Rules outside that scope must use the legacy --color-* / --here-font* vars defined below. ====================================================================== */ .App header .rm-Container { height: 55px; } .ThemeContext_line:not(:has(.Header-links-buttons)) .Header-subnavnVH8URdkgvEl { position: relative; margin-left: 30px; gap: 2em !important; } span.here-mm-label { font-weight: bold; } /* Swap user menu (1st child) and theme toggle (3rd child) */ .Header-right21PC2XTT6aMg .rm-Header-top-link_login { order: 3; margin-right:10px !important; } .Header-right21PC2XTT6aMg .ThemeToggle-wrapper1ZcciJoF3Lq3 { order: 1; } .Spinner svg, .Spinner-icon { fill: none !important; } svg:not([fill]):not(.Spinner-icon):not(.Spinner svg) { fill: currentColor; } a.Button.Button_md.rm-Header-link.rm-Header-bottom-link.Button_slate_text.Header-bottom-link_mobile, .rm-Header-bottom-link { color: #2C596A !important; font-style: normal !important; font-size: 14px !important; } [data-color-mode="dark"] a.Button.Button_md.rm-Header-link.rm-Header-bottom-link.Button_slate_text.Header-bottom-link_mobile, [data-color-mode="dark"] .rm-Header-bottom-link { color: #e0edf0 !important; } @media (prefers-color-scheme: dark) { [data-color-mode="system"] a.Button.Button_md.rm-Header-link.rm-Header-bottom-link.Button_slate_text.Header-bottom-link_mobile, [data-color-mode="system"] .rm-Header-bottom-link { color: #e0edf0 !important; } } :root { /* ---------------------------------------------------------- Typography (legacy HERE variables used by sidebar/header) ---------------------------------------------------------- */ --here-font: 'FiraGO-Regular', 'FiraGO', 'Fira GO', 'Fira Sans', 'NotoSansJP', 'NotoSansJP-Bold', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --here-font-bold: 'FiraGO-Bold', 'FiraGO', 'Fira GO', 'Fira Sans', 'NotoSansJP-Bold', 'NotoSansJP', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* ---------------------------------------------------------- Brand colors (legacy HERE variables used by sidebar/header) ---------------------------------------------------------- */ --color-ink: #092732; --color-ink-muted: #2C596A; --color-teal-active: #0D7E75; --color-teal-glow: #1ef3e4; --color-blue-link: #126EF8; --color-blue-utility: rgb(101, 165, 254); --color-blue-utility-hover: rgb(96, 123, 230); /* ---------------------------------------------------------- Sidebar – light ---------------------------------------------------------- */ --color-sidebar-bg: #fbfbfb; --color-sidebar-border: rgba(0, 129, 177, 0.20); --color-sidebar-heading-fg: #2C596A; --color-sidebar-link-fg: #2C596A; --color-sidebar-sublink-fg: #2C596A; --color-sidebar-hover-bg: rgba(0, 148, 215, 0.06); --color-sidebar-active-bg: rgba(0, 130, 121, 0.08); --color-sidebar-active-border: #0D7E75; --color-sidebar-subpages-border: rgba(0, 129, 177, 0.25); /* ---------------------------------------------------------- Sidebar – dark ---------------------------------------------------------- */ --color-sidebar-dark-bg: #0C0E10; --color-sidebar-dark-border: rgba(255, 255, 255, 0.08); --color-sidebar-dark-link-fg: rgba(232, 237, 240, 0.85); --color-sidebar-dark-heading-fg: rgba(232, 237, 240, 0.35); --color-sidebar-dark-sublink-fg: rgba(232, 237, 240, 0.65); --color-sidebar-dark-active-fg: #e8edf0; --color-sidebar-dark-active-bg: rgba(0, 148, 215, 0.12); --color-sidebar-dark-active-border: #1ef3e4; --color-sidebar-dark-subpages-border: rgba(255, 255, 255, 0.12); --color-sidebar-dark-hover-bg: rgba(255, 255, 255, 0.05); /* ---------------------------------------------------------- Map / misc UI ---------------------------------------------------------- */ --color-map-border: rgba(51, 51, 51, 0.5); --color-caption-bg: #8080801a; --color-custom-block: #ff0000; --color-input-border: #ccc; /* ---------------------------------------------------------- Radii ---------------------------------------------------------- */ --radius: 8px; --radius-sm: 4px; --radius-pill: 999px; /* ---------------------------------------------------------- ReadMe project/recipe colors (keep in one place) ---------------------------------------------------------- */ --project-color-primary: #018ef5; --project-color-inverse: #fff; --recipe-button-color: #018ef5; --recipe-button-color-hover: #01538f; --recipe-button-color-active: #00365d; --recipe-button-color-focus: rgba(1, 142, 245, 0.25); --recipe-button-color-disabled: #c3e6ff; /* ---------------------------------------------------------- Header tokens ---------------------------------------------------------- */ /* Ask AI — light mode: dark button, teal text */ --color-ai-bg: #092732; --color-ai-fg: #1ef3e4; --color-ai-hover-bg: #0e3d50; --color-ai-icon: #1ef3e4; --color-ctrl-border: rgba(9, 39, 50, 0.20); --color-ctrl-hover-bg: rgba(9, 39, 50, 0.06); --color-header-ink: #092732; --color-header-bg: #ffffff; --color-header-border: rgba(9, 39, 50, 0.10); } /* Dark mode token overrides */ [data-color-mode="dark"] { --color-ink: #e8edf0; /* Ask AI — dark mode: keep dark button, teal text (same as light) */ --color-ai-bg: #1a3a47; --color-ai-fg: #1ef3e4; --color-ai-hover-bg: #0e3d50; --color-ai-icon: #1ef3e4; --color-ctrl-border: rgba(255, 255, 255, 0.18); --color-ctrl-hover-bg: rgba(255, 255, 255, 0.06); --color-header-ink: #e8edf0; --color-header-bg: #0C0E10; --color-header-border: rgba(255, 255, 255, 0.08); } /* System mode: only apply dark tokens when user prefers dark */ @media (prefers-color-scheme: dark) { [data-color-mode="system"] { --color-ink: #e8edf0; --color-ai-bg: #1a3a47; --color-ai-fg: #1ef3e4; --color-ai-hover-bg: #0e3d50; --color-ai-icon: #1ef3e4; --color-ctrl-border: rgba(255, 255, 255, 0.18); --color-ctrl-hover-bg: rgba(255, 255, 255, 0.06); --color-header-ink: #e8edf0; --color-header-bg: #0C0E10; --color-header-border: rgba(255, 255, 255, 0.08); } } /* ====================================================================== 2) LAYOUT / CONTAINER ---------------------------------------------------------------------- Targets: .rm-Container, .rm-Article Why: Full-width container + left margin for article body. ====================================================================== */ .App .rm-Container { margin-left: auto; margin-right: auto; max-width: 100%; width: 100%; } .rm-Guides .rm-Article { margin-left: 20px; } /* ====================================================================== 3) HEADER / TOP NAV ---------------------------------------------------------------------- Targets: Header logo, project picker, header bar, search toggle, Ask AI button, theme toggle, login button, right-side layout. Why: Brand-aligned header with pill-shaped controls and HERE colors. Gotchas: - #content-head h1: data-styles="hds" is now on the article wrapper, so HDS tokens ARE available and used (see rule below). - !important used throughout because ReadMe's inline styles and specificity from hashed class names require overrides. ====================================================================== */ /* Page title — data-styles="hds" is on the article wrapper, so HDS tokens are available here. Maps to .hds-heading1 per HDS type scale. Hardcoded fallbacks mirror the previous values in case tokens are unavailable (e.g. HDS stylesheet loads late or is absent). */ #content-head h1 { font: var(--hds-heading1-font); letter-spacing: var(--hds-heading1-letter-spacing); color: var(--hds-foreground-primary); /* fallbacks */ font-family: 'FiraGO-Bold', 'FiraGO', 'Fira GO', sans-serif; font-size: 38px; line-height: 40px; } /* Dark mode fallback (only fires if HDS token above doesn't resolve) */ [data-color-mode="dark"] #content-head h1 { color: #e8edf0; } @media (prefers-color-scheme: dark) { [data-color-mode="system"] #content-head h1 { color: #e8edf0; } } .Header-logo-img_small1Whup8HPsbv4 { height: 50px; margin-top: 5px; } /* Project picker truncation */ button.Button.Button_slate_text.Button_md.NavItem2xSfFaVqfRjy.Button.Button_slate_text.Button_md.rm-Header-bottom-link.rm-ProjectPicker.Dropdown-toggle.Button_primary { max-width: 185px; overflow: hidden; } button.Button.Button_slate_text.Button_md.NavItem2xSfFaVqfRjy.Button.Button_slate_text.Button_md.rm-Header-bottom-link.rm-ProjectPicker.Dropdown-toggle.Button_primary span { max-width: 165px; overflow: hidden; } /* Header bar */ .Header-bottom2eLKOFXMEmh5 { background-color: var(--color-header-bg) !important; border-bottom: 1px solid var(--color-header-border) !important; } /* Search toggle — pill control */ .rm-SearchToggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: var(--radius-pill) !important; border: 1px solid var(--color-ctrl-border) !important; background: transparent !important; color: var(--color-header-ink) !important; padding: 0 !important; overflow: visible !important; } .rm-SearchToggle:hover, .rm-SearchToggle:focus { background: var(--color-ctrl-hover-bg) !important; border-color: var(--color-ctrl-border) !important; color: var(--color-header-ink) !important; outline: none !important; box-shadow: none !important; } .rm-SearchToggle:hover .icon-search1, .rm-SearchToggle:focus .icon-search1 { color: var(--color-header-ink) !important; } .rm-SearchToggle-placeholder, .rm-SearchToggle-shortcut { display: none !important; } .rm-SearchToggle .icon-search1 { font-size: 16px !important; color: var(--color-header-ink) !important; } /* Ask AI button */ .rm-AskAi-button, .Header-askai1MTDknILiJku .Button { background: var(--color-ai-bg) !important; color: var(--color-ai-fg) !important; border: none !important; border-radius: var(--radius-pill) !important; padding: 8px 18px !important; height: 36px !important; min-height: 36px !important; font-size: 13px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; line-height: 1 !important; white-space: nowrap !important; } .rm-AskAi-button *, .Header-askai1MTDknILiJku .Button * { color: var(--color-ai-fg) !important; } .rm-AskAi-button:hover, .rm-AskAi-button:focus, .rm-AskAi-button:active, .rm-AskAi-button:focus-visible, .Header-askai1MTDknILiJku .Button:hover, .Header-askai1MTDknILiJku .Button:focus, .Header-askai1MTDknILiJku .Button:active, .Header-askai1MTDknILiJku .Button:focus-visible, .rm-AskAi .Button:hover, .rm-AskAi .Button:focus, .rm-AskAi .Button:active { background: var(--color-ai-hover-bg) !important; color: var(--color-ai-fg) !important; border: none !important; border-radius: var(--radius-pill) !important; outline: none !important; box-shadow: none !important; } .rm-AskAi-button .Sparkle2v30M7Hw3dl4 path, .rm-AskAi-button:hover .Sparkle2v30M7Hw3dl4 path, .rm-AskAi-button:focus .Sparkle2v30M7Hw3dl4 path, .rm-AskAi-button svg path { fill: var(--color-ai-icon) !important; stroke: none !important; } .rm-AskAi-button svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; } /* Ask AI panel width */ .ContentWithOwlbotx4PaFDoA1KMz { --AskAi-width: 600px; } .EmptyChatOptions2sW9u7BPOSdJ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; width: 100%; align-content: space-around; align-items: center; } /* Theme toggle — pill control */ .rm-ThemeToggle { background: transparent !important; border: 1px solid var(--color-ctrl-border) !important; border-radius: var(--radius-pill) !important; color: var(--color-header-ink) !important; width: 32px !important; height: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .rm-ThemeToggle:hover, .rm-ThemeToggle:focus { background: var(--color-ctrl-hover-bg) !important; border-color: var(--color-ctrl-border) !important; color: var(--color-header-ink) !important; outline: none !important; box-shadow: none !important; } /* Login — pill control */ .rm-Header-top-link_login .Button { background: transparent !important; border: 1px solid var(--color-ctrl-border) !important; border-radius: var(--radius-pill) !important; width: 32px !important; height: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--color-header-ink) !important; } .rm-Header-top-link_login .Button:hover, .rm-Header-top-link_login .Button:focus, .rm-Header-top-link_login .Button:active { background: var(--color-ctrl-hover-bg) !important; border-color: var(--color-ctrl-border) !important; color: var(--color-header-ink) !important; outline: none !important; box-shadow: none !important; } /* Focus rings for accessibility */ .rm-SearchToggle:focus-visible, .rm-ThemeToggle:focus-visible, .rm-Header-top-link_login .Button:focus-visible { outline: 2px solid var(--color-ai-fg) !important; outline-offset: 2px !important; box-shadow: none !important; } /* Right-side spacing */ .Header-right21PC2XTT6aMg { display: flex !important; align-items: center !important; gap: 8px !important; } /* ====================================================================== 4) SEARCH ---------------------------------------------------------------------- Targets: .SearchProjectsFilter (project filter in search modal) Why: Left-border separator and fixed width on wider viewports. ====================================================================== */ @media (min-width: 701px) { .SearchProjectsFilter42xPy-5IUDdk { border-left: 1px solid var(--color-border-default); flex: 0 0 200px; padding: 30px; } } /* ====================================================================== 5) SIDEBAR (light + dark + system dark) ---------------------------------------------------------------------- Targets: .rm-Sidebar, .hub-sidebar, category headings, nav links, subpages, expand chevrons. Why: Full HERE-branded sidebar with custom fonts, colors, active states, and proper dark-mode parity. Gotchas: - !important is needed on nearly every property because ReadMe's hashed-class inline styles have very high specificity. - Some selectors use html[data-color-mode="dark"] and others omit `html`. Both work. We are NOT doing a mass normalize — only fixing if we touch a rule for another reason. (Noted for future.) - DO NOT merge [data-color-mode="dark"] and @media system blocks into combined selector lists — ReadMe processes them separately. ====================================================================== */ /* ── Reference redesign base resets ── */ .reference-redesign { --Sidebar-border-color: var(--color-border-default); --Sidebar-font-weight: 700; --Sidebar-indent: 10px; --Sidebar-link-padding-y: 0.429em; } .reference-redesign .Sidebar-link-iconnjiqEiZlPn0W { opacity: 1; } .reference-redesign .Sidebar1t2G1ZJq-vU1 { padding: 0; } .reference-redesign .Sidebar-listWrapper6Q9_yUrG906C + .Sidebar-listWrapper6Q9_yUrG906C { margin-top: 0; margin-bottom: 0; } .reference-redesign .Sidebar-list_sidebarLayout3RaX72iQNOEI { margin-top: 0; } .rm-Sidebar-list, .Sidebar-list3cZWQLaBf9k8 { padding: 0 !important; list-style: none !important; } .Sidebar-item23D-2Kd61_k3 { list-style: none !important; padding: 0 !important; margin: 0 !important; } .Sidebar-item23D-2Kd61_k3 > .rm-Sidebar-list, .Sidebar-item23D-2Kd61_k3 > .Sidebar-list3cZWQLaBf9k8 { margin: 0 !important; } .subpages > li.Sidebar-item23D-2Kd61_k3:first-child { padding-top: 16px !important; } .subpages > li.Sidebar-item23D-2Kd61_k3:last-child { padding-bottom: 16px !important; margin-top: -.1px !important; } /* ── Category headings (section separators) ── */ nav#hub-sidebar .rm-cat__heading, .Sidebar-headingTRQyOa2pk0gh.rm-Sidebar-category { font-family: var(--here-font) !important; font-size: 14px !important; line-height: 20px !important; letter-spacing: -0.1px !important; text-transform: none !important; color: var(--color-sidebar-link-fg) !important; opacity: 1 !important; padding: 14px 16px !important; min-height: unset !important; height: auto !important; width: 100% !important; margin: 0 !important; border: none !important; border-bottom: 1px solid var(--color-sidebar-border) !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between; flex-direction: row; gap: 6px !important; cursor: pointer !important; background: transparent !important; transition: background 0.12s !important; white-space: normal !important; overflow-wrap: anywhere !important; border-radius: 0 !important; } nav#hub-sidebar .rm-cat__heading > * { min-width: 0 !important; } nav#hub-sidebar .rm-cat__heading:hover { background: var(--color-sidebar-hover-bg) !important; } /* ── Category toggle chevron ── */ nav#hub-sidebar .rm-cat__toggle { cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; min-width: 16px !important; height: 16px !important; flex-shrink: 0 !important; align-self: center !important; color: var(--color-sidebar-link-fg) !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; order: -1 !important; opacity: 0.5 !important; } nav#hub-sidebar .rm-cat__toggle::before { content: "›" !important; font-family: inherit !important; font-size: 18px !important; line-height: 1 !important; color: var(--color-sidebar-link-fg) !important; display: inline-block !important; transform-origin: center !important; transition: transform 0.18s ease !important; transform: rotate(0deg) !important; } nav#hub-sidebar .rm-cat__toggle[aria-expanded="true"]::before { transform: rotate(90deg) !important; } /* ── Top-level nav links ── */ .rm-Sidebar-link, .Sidebar-link2Dsha-r-GKh2 { font-family: var(--here-font) !important; font-size: 14px !important; line-height: 20px !important; letter-spacing: -0.1px !important; color: var(--color-sidebar-link-fg) !important; padding: 14px 16px !important; min-height: unset !important; height: auto !important; width: 100% !important; border: none !important; border-radius: 0 !important; border-bottom: 1px solid var(--color-sidebar-border) !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-direction: row !important; gap: 8px !important; background: transparent !important; transition: background 0.12s !important; box-sizing: border-box !important; text-decoration: none !important; } .rm-Sidebar-link > *, .Sidebar-link2Dsha-r-GKh2 > * { min-width: 0 !important; } .rm-Sidebar-link:hover, .Sidebar-link2Dsha-r-GKh2:hover { background: var(--color-sidebar-hover-bg) !important; color: var(--color-sidebar-link-fg) !important; } /* Active / current page */ .rm-Sidebar-link.active, .Sidebar-link2Dsha-r-GKh2.active, a.rm-Sidebar-link[aria-current="page"], a.Sidebar-link2Dsha-r-GKh2[aria-current="page"] { background: var(--color-sidebar-active-bg) !important; color: var(--color-sidebar-active-fg, var(--color-sidebar-link-fg)) !important; font-family: var(--here-font-bold) !important; font-weight: 700 !important; border-left: none !important; box-shadow: inset 4px 0 0 var(--color-sidebar-active-border) !important; } /* Link text container */ .Sidebar-link-textLuTE1ySm4Kqn { flex: 1 1 auto !important; min-width: 0 !important; display: block !important; } .Sidebar-link-text_label1gCT_uPnx7Gu { display: block !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; line-height: 20px !important; } .Sidebar-link-metaLhOiyAaGZrkY { flex: 0 0 auto !important; min-width: 0 !important; } /* ── Expand chevron button (left of label, only on parent links) ── */ .Sidebar-link-buttonWrapper3hnFHNku8_BJ { background: transparent !important; border: none !important; color: var(--color-sidebar-link-fg) !important; opacity: 0.6 !important; width: 20px !important; min-width: 20px !important; height: 20px !important; flex-shrink: 0 !important; align-self: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; order: -1 !important; } .Sidebar-link-buttonWrapper3hnFHNku8_BJ:hover { opacity: 1 !important; } /* Use icon font chevron; rotate when expanded */ .Sidebar-link-expandIcon2yVH6SarI6NW { display: inline-block !important; transition: transform 0.18s ease !important; transform-origin: center !important; transform: rotate(0deg) !important; } a[aria-expanded="true"] .Sidebar-link-expandIcon2yVH6SarI6NW, [aria-expanded="true"] .Sidebar-link-expandIcon2yVH6SarI6NW, .Sidebar-link_parent.active .Sidebar-link-expandIcon2yVH6SarI6NW { transform: rotate(90deg) !important; } /* Childless links: no chevron button space, so nudge text left */ .Sidebar-link2Dsha-r-GKh2.childless .Sidebar-link-textLuTE1ySm4Kqn, .rm-Sidebar-link.childless .Sidebar-link-textLuTE1ySm4Kqn { padding-left: 28px !important; /* align with parent link text that has chevron */ } /* Light-mode active text color for reference-redesign */ .reference-redesign .Sidebar-link2Dsha-r-GKh2:active, .reference-redesign .Sidebar-link2Dsha-r-GKh2.active { color: #092732 !important; } /* ── Subpages ── */ .subpages { border-left: none !important; border-top: none !important; border-right: none !important; border-bottom: none !important; margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 0 0 24px !important; list-style: none !important; box-sizing: border-box !important; } li.subnav-expanded, .Sidebar-item23D-2Kd61_k3.subnav-expanded { border-bottom: none !important; } .subpages .Sidebar-item23D-2Kd61_k3 { margin: 0 !important; padding: 0 !important; } .subpages .rm-Sidebar-link, .subpages .Sidebar-link2Dsha-r-GKh2 { font-family: var(--here-font) !important; font-weight: 500 !important; font-size: 14px !important; line-height: 20px !important; letter-spacing: -0.4px !important; padding: 10px 16px 10px 12px !important; min-height: unset !important; height: auto !important; width: 100% !important; border-left: 2px solid rgba(0, 129, 177, 0.25) !important; border-top: none !important; border-right: none !important; border-bottom: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-direction: row !important; gap: 8px !important; transition: background 0.12s !important; box-sizing: border-box !important; } .subpages .rm-Sidebar-link:hover, .subpages .Sidebar-link2Dsha-r-GKh2:hover { background: var(--color-sidebar-hover-bg) !important; border-left: 2px solid rgba(0, 129, 177, 0.25) !important; box-shadow: none !important; } .subpages .rm-Sidebar-link.active, .subpages .Sidebar-link2Dsha-r-GKh2.active, .subpages a[aria-current="page"] { font-weight: 500 !important; color: #092732 !important; background: rgba(0, 148, 215, 0.07) !important; border-left: 2px solid #48DAD0 !important; box-shadow: none !important; } .subpages .Sidebar-link-text_label1gCT_uPnx7Gu { line-height: 16px !important; } .subpages .Sidebar-link2Dsha-r-GKh2.childless .Sidebar-link-textLuTE1ySm4Kqn, .subpages .rm-Sidebar-link.childless .Sidebar-link-textLuTE1ySm4Kqn { padding-left: 0 !important; } /* ── Sidebar dark mode — explicit [data-color-mode="dark"] ── */ [data-color-mode="dark"] .rm-Sidebar, [data-color-mode="dark"] .hub-sidebar, [data-color-mode="dark"] .Sidebar1t2G1ZJq-vU1 { background: var(--color-sidebar-dark-bg) !important; border-right-color: var(--color-sidebar-dark-border) !important; } [data-color-mode="dark"] nav#hub-sidebar .rm-cat__heading, [data-color-mode="dark"] nav#hub-sidebar .rm-Sidebar-heading { color: var(--color-sidebar-dark-link-fg) !important; border-bottom-color: var(--color-sidebar-dark-border) !important; } [data-color-mode="dark"] nav#hub-sidebar .rm-cat__heading:hover, [data-color-mode="dark"] nav#hub-sidebar .rm-Sidebar-heading:hover { background: var(--color-sidebar-dark-hover-bg) !important; } [data-color-mode="dark"] nav#hub-sidebar .rm-cat__toggle, [data-color-mode="dark"] nav#hub-sidebar .rm-cat__toggle::before { color: var(--color-sidebar-dark-link-fg) !important; } [data-color-mode="dark"] .rm-Sidebar-link, [data-color-mode="dark"] .Sidebar-link2Dsha-r-GKh2 { color: var(--color-sidebar-dark-link-fg) !important; border-bottom-color: var(--color-sidebar-dark-border) !important; } [data-color-mode="dark"] .rm-Sidebar-link:hover, [data-color-mode="dark"] .Sidebar-link2Dsha-r-GKh2:hover { background: var(--color-sidebar-dark-hover-bg) !important; box-shadow: none !important; } [data-color-mode="dark"] .rm-Sidebar-link:hover *, [data-color-mode="dark"] .Sidebar-link2Dsha-r-GKh2:hover * { color: var(--color-sidebar-dark-link-fg) !important; } [data-color-mode="dark"] .rm-Sidebar-link.active, [data-color-mode="dark"] .Sidebar-link2Dsha-r-GKh2.active { background: var(--color-sidebar-dark-active-bg) !important; color: var(--color-sidebar-dark-active-fg) !important; border-left-color: var(--color-sidebar-dark-active-border) !important; } [data-color-mode="dark"] .Sidebar-link-buttonWrapper3hnFHNku8_BJ { color: var(--color-sidebar-dark-link-fg) !important; } [data-color-mode="dark"] .subpages { border-left-color: var(--color-sidebar-dark-subpages-border) !important; } [data-color-mode="dark"] .subpages .rm-Sidebar-link, [data-color-mode="dark"] .subpages .Sidebar-link2Dsha-r-GKh2 { color: var(--color-sidebar-dark-sublink-fg) !important; } [data-color-mode="dark"] .subpages .rm-Sidebar-link.active, [data-color-mode="dark"] .subpages .Sidebar-link2Dsha-r-GKh2.active { color: var(--color-sidebar-dark-active-fg) !important; background: var(--color-sidebar-dark-active-bg) !important; } [data-color-mode="dark"] nav#hub-sidebar .rm-cat__heading, [data-color-mode="dark"] .Sidebar-headingTRQyOa2pk0gh.rm-Sidebar-category { color: #ffffff !important; } /* Dark-mode parity for hardcoded light-mode styles */ [data-color-mode="dark"] .reference-redesign .Sidebar-link2Dsha-r-GKh2:active, [data-color-mode="dark"] .reference-redesign .Sidebar-link2Dsha-r-GKh2.active { color: var(--color-sidebar-dark-active-fg) !important; } [data-color-mode="dark"] .subpages .rm-Sidebar-link.active, [data-color-mode="dark"] .subpages .Sidebar-link2Dsha-r-GKh2.active, [data-color-mode="dark"] .subpages a[aria-current="page"] { font-weight: 500 !important; color: var(--color-sidebar-dark-active-fg) !important; background: var(--color-sidebar-dark-active-bg) !important; border-left: 2px solid var(--color-sidebar-dark-active-border) !important; box-shadow: none !important; } [data-color-mode="dark"] .subpages .rm-Sidebar-link:hover, [data-color-mode="dark"] .subpages .Sidebar-link2Dsha-r-GKh2:hover { background: var(--color-sidebar-dark-hover-bg) !important; border-left: 2px solid var(--color-sidebar-dark-subpages-border) !important; box-shadow: none !important; } [data-color-mode="dark"] .Sidebar-link-expandIcon2yVH6SarI6NW { color: var(--color-sidebar-dark-link-fg) !important; } /* ── Sidebar dark mode — system/auto @media ── */ @media (prefers-color-scheme: dark) { [data-color-mode="system"] .rm-Sidebar, [data-color-mode="system"] .hub-sidebar, [data-color-mode="system"] .Sidebar1t2G1ZJq-vU1 { background: var(--color-sidebar-dark-bg) !important; border-right-color: var(--color-sidebar-dark-border) !important; } [data-color-mode="system"] nav#hub-sidebar .rm-cat__heading, [data-color-mode="system"] nav#hub-sidebar .rm-Sidebar-heading { color: var(--color-sidebar-dark-link-fg) !important; border-bottom-color: var(--color-sidebar-dark-border) !important; } [data-color-mode="system"] nav#hub-sidebar .rm-cat__heading:hover, [data-color-mode="system"] nav#hub-sidebar .rm-Sidebar-heading:hover { background: var(--color-sidebar-dark-hover-bg) !important; } [data-color-mode="system"] nav#hub-sidebar .rm-cat__toggle, [data-color-mode="system"] nav#hub-sidebar .rm-cat__toggle::before { color: var(--color-sidebar-dark-link-fg) !important; } [data-color-mode="system"] .rm-Sidebar-link, [data-color-mode="system"] .Sidebar-link2Dsha-r-GKh2 { color: var(--color-sidebar-dark-link-fg) !important; border-bottom-color: var(--color-sidebar-dark-border) !important; } [data-color-mode="system"] .rm-Sidebar-link:hover, [data-color-mode="system"] .Sidebar-link2Dsha-r-GKh2:hover { background: var(--color-sidebar-dark-hover-bg) !important; box-shadow: none !important; } [data-color-mode="system"] .rm-Sidebar-link:hover *, [data-color-mode="system"] .Sidebar-link2Dsha-r-GKh2:hover * { color: var(--color-sidebar-dark-link-fg) !important; } [data-color-mode="system"] .rm-Sidebar-link.active, [data-color-mode="system"] .Sidebar-link2Dsha-r-GKh2.active { background: var(--color-sidebar-dark-active-bg) !important; color: var(--color-sidebar-dark-active-fg) !important; border-left-color: var(--color-sidebar-dark-active-border) !important; } [data-color-mode="system"] .Sidebar-link-buttonWrapper3hnFHNku8_BJ { color: var(--color-sidebar-dark-link-fg) !important; } [data-color-mode="system"] .subpages { border-left-color: var(--color-sidebar-dark-subpages-border) !important; } [data-color-mode="system"] .subpages .rm-Sidebar-link, [data-color-mode="system"] .subpages .Sidebar-link2Dsha-r-GKh2 { color: var(--color-sidebar-dark-sublink-fg) !important; } [data-color-mode="system"] .subpages .rm-Sidebar-link.active, [data-color-mode="system"] .subpages .Sidebar-link2Dsha-r-GKh2.active { color: var(--color-sidebar-dark-active-fg) !important; background: var(--color-sidebar-dark-active-bg) !important; } [data-color-mode="system"] nav#hub-sidebar .rm-cat__heading, [data-color-mode="system"] .Sidebar-headingTRQyOa2pk0gh.rm-Sidebar-category { color: #ffffff !important; } /* System dark parity for hardcoded light-mode styles */ [data-color-mode="system"] .reference-redesign .Sidebar-link2Dsha-r-GKh2:active, [data-color-mode="system"] .reference-redesign .Sidebar-link2Dsha-r-GKh2.active { color: var(--color-sidebar-dark-active-fg) !important; } [data-color-mode="system"] .subpages .rm-Sidebar-link.active, [data-color-mode="system"] .subpages .Sidebar-link2Dsha-r-GKh2.active, [data-color-mode="system"] .subpages a[aria-current="page"] { font-weight: 500 !important; color: var(--color-sidebar-dark-active-fg) !important; background: var(--color-sidebar-dark-active-bg) !important; border-left: 2px solid var(--color-sidebar-dark-active-border) !important; box-shadow: none !important; } [data-color-mode="system"] .subpages .rm-Sidebar-link:hover, [data-color-mode="system"] .subpages .Sidebar-link2Dsha-r-GKh2:hover { background: var(--color-sidebar-dark-hover-bg) !important; border-left: 2px solid var(--color-sidebar-dark-subpages-border) !important; box-shadow: none !important; } [data-color-mode="system"] .Sidebar-link-expandIcon2yVH6SarI6NW { color: var(--color-sidebar-dark-link-fg) !important; } } /* ====================================================================== 6) HDS DOC BODY — TYPOGRAPHY & COLORS ---------------------------------------------------------------------- Targets: .rm-Markdown[data-styles="hds"] body text, links, headings, anchor icons, horizontal rules. Why: Maps HDS design tokens to ReadMe's rendered markdown body. Gotchas: These rules ONLY apply when data-styles="hds" is stamped by the JS bundle. On /page/ routes (isCustomPageRoute) the attribute is absent, so none of these fire. ====================================================================== */ .rm-Markdown[data-styles="hds"] { color: var(--hds-foreground-primary); } .rm-Markdown[data-styles="hds"] a { color: var(--hds-action); } .rm-Markdown[data-styles="hds"] a:hover { color: var(--hds-action-hover); } .rm-Markdown[data-styles="hds"] .heading-text { color: var(--hds-foreground-primary); } .rm-Markdown[data-styles="hds"] .heading-anchor-icon { color: var(--hds-foreground-tertiary); opacity: 0.9; } .rm-Markdown[data-styles="hds"] .heading-anchor-icon:hover { color: var(--hds-action); opacity: 1; } .rm-Markdown[data-styles="hds"] hr { border: 0; border-top: var(--hds-border-width, 1px) solid var(--hds-foreground-divider); } .rm-Markdown[data-styles="hds"] .Columns { gap: var(--hds-spacing-6); } /* ── Heading scale — maps ReadMe h1–h6 to HDS type tokens ── ReadMe markdown headings are offset by one level relative to HDS: Page title (#content-head h1) → hds-heading1 (see section 3) Doc body h1 → hds-heading2 Doc body h2 → hds-heading3 Doc body h3 → hds-heading4 Doc body h4 → hds-heading5 Doc body h5/h6 → hds-heading6 (no deeper scale in HDS) These rules target .heading-text (ReadMe's text wrapper inside each heading) so that the anchor icon and wrapper div don't inherit block-level font shorthand unexpectedly. Color is already set on .heading-text above; font + letter-spacing are the delta here. */ .rm-Markdown[data-styles="hds"] h1 .heading-text { font: var(--hds-heading2-font); letter-spacing: var(--hds-heading2-letter-spacing); } .rm-Markdown[data-styles="hds"] h2 .heading-text { font: var(--hds-heading3-font); letter-spacing: var(--hds-heading3-letter-spacing); } .rm-Markdown[data-styles="hds"] h3 .heading-text { font: var(--hds-heading4-font); letter-spacing: var(--hds-heading4-letter-spacing); } .rm-Markdown[data-styles="hds"] h4 .heading-text { font: var(--hds-heading5-font); letter-spacing: var(--hds-heading5-letter-spacing); } .rm-Markdown[data-styles="hds"] h5 .heading-text, .rm-Markdown[data-styles="hds"] h6 .heading-text { font: var(--hds-heading6-font); letter-spacing: var(--hds-heading6-letter-spacing); } /* ====================================================================== 7) HDS DOC BODY — LISTS ---------------------------------------------------------------------- Targets: ul/ol list items, li > p (ReadMe wraps li content in

when blank lines appear between items), inline code copy buttons inside list paragraphs. Why: Fix bullet misalignment caused by ReadMe's .rdmd-code-copy button injection and

-wrapping behavior. Gotchas: - ReadMe injects .rdmd-code-copy as a SIBLING of inside

inside

. The button has explicit height/width that
       expands the line-box, making the bullet marker float.
     - The li > p { margin: 0 } rule and li > p + p spacing rule are
       COMPLEMENTARY, not redundant: the first collapses default 
       margin so list items don't double-space; the second adds back
       controlled spacing between consecutive paragraphs within a
       single

. Do NOT remove either one.
     - !important on margin: 0 is needed because ReadMe's .markdown-body
       p has a margin rule at high specificity.
   ====================================================================== */

.rm-Markdown[data-styles="hds"].markdown-body li {
  word-break: normal !important;
  overflow-wrap: anywhere;
}

/* Collapse default  margin inside list items.
   Complementary with li > p + p rule below — see comment above. */
.rm-Markdown[data-styles="hds"].markdown-body li > p {
  margin: 0 !important;
}

/* Add controlled spacing between consecutive 
 tags within one


   (occurs when markdown has blank lines within a list item).
   Complementary with li > p { margin: 0 } above — see section header comment. */
.rm-Markdown[data-styles="hds"].markdown-body li > p + p {
  margin-top: var(--hds-spacing-2) !important;
}

/* [BUG FIX #1a] Hide copy buttons injected as siblings of inline code
   inside list paragraphs. The existing .rdmd-code-copy hiding rules
   (section 8) cover :not(pre)>, li>, p>, td>, th> but miss the nested
   li p > context. This rule fills that gap. */
.rm-Markdown[data-styles="hds"] li p > .rdmd-code-copy {
  display: none !important;
}

/* [BUG FIX #1b] Suppress HDS ::before bullet, use native markers.
   
   HDS renders bullets via a ::before pseudo-element with
   position: absolute, an SVG mask-image, and list-style-type: none.
   This system assumes

 contains direct text — but ReadMe wraps
   content in  tags (blank-line behavior), which breaks the
   absolute positioning alignment.
   
   Rather than fighting HDS's absolute-positioned ::before, we
   suppress it entirely and restore native list-style-type markers.
   Native markers with list-style-position: outside automatic

200Success