@charset "UTF-8"; /* ============================================= CANVA SANS WEB FONT (variable) ============================================= */ @font-face { font-family: 'Canva Sans'; src: url('../fonts/canva-sans/CanvaSans-VF.ttf') format('truetype'); font-weight: 100 900; /* full variable-weight range */ font-style: normal; font-display: swap; } /* ============================================= iSOLVEPRO BRAND COLORS ============================================= */ :root { /* Layout heights — used by pages that need calc-based height */ --app-toprow-h: 3.5rem; --app-footer-h: 2.25rem; --app-content-pt: 1.1rem; /* Primary — steel blue (from "Solve" wordmark) */ --isp-primary: #3A6EA5; --isp-primary-dark: #2A4E7E; --isp-primary-mid: #4D82BB; --isp-primary-light: #EBF2FA; /* Accent — golden yellow (from icon square) */ --isp-gold: #F9BE1B; --isp-gold-dark: #D99E0A; --isp-gold-light: #FEF3D0; /* Neutral */ --isp-white: #ffffff; --isp-text: #1A2F4A; --isp-text-muted: #6B7A8D; --isp-border: #DDE6F0; --isp-bg: #F4F7FB; --isp-surface: #ffffff; --isp-surface-2: #EBF2FA; /* Sidebar — brand blue at top (logo contrast), fades to white at bottom */ --isp-sidebar-from: #1A3A5E; --isp-sidebar-mid: #3A6EA5; --isp-sidebar-to: #ffffff; --isp-sidebar-text: rgba(255,255,255,.90); --isp-sidebar-text-h: #ffffff; --isp-sidebar-hover-bg: rgba(255,255,255,.15); --isp-sidebar-active-bg:rgba(249,190,27,.28); } /* ============================================= DARK THEME — applied via .theme-dark on ============================================= */ body.theme-dark { --isp-primary: #4D82BB; --isp-primary-dark: #3A6EA5; --isp-primary-mid: #6496CC; --isp-primary-light: #1C3050; --isp-gold: #F9BE1B; --isp-gold-dark: #D99E0A; --isp-gold-light: #3A2E06; --isp-white: #ffffff; --isp-text: #D8E8F4; --isp-text-muted: #8A9DB5; --isp-border: #1E3350; --isp-bg: #0E1E30; --isp-surface: #132238; --isp-surface-2: #1A2E48; --isp-sidebar-from: #0A1520; --isp-sidebar-mid: #0C1927; /* natural 35% interpolation of from→to — preserves original look */ --isp-sidebar-to: #0F2035; --isp-sidebar-text: rgba(255,255,255,.75); --isp-sidebar-text-h: #ffffff; --isp-sidebar-hover-bg: rgba(255,255,255,.10); --isp-sidebar-active-bg:rgba(249,190,27,.18); /* ── MudBlazor palette — overrides the light theme set by MudThemeProvider ── */ --mud-palette-background: #0E1E30; --mud-palette-background-grey: #0A1825; --mud-palette-surface: #132238; --mud-palette-drawer-background: #0A1520; --mud-palette-drawer-text: rgba(255,255,255,0.75); --mud-palette-lines-default: rgba(255,255,255,0.12); --mud-palette-lines-inputs: rgba(255,255,255,0.30); --mud-palette-text-primary: rgba(216,232,244,0.90); --mud-palette-text-secondary: rgba(138,157,181,0.75); --mud-palette-text-disabled: rgba(255,255,255,0.25); --mud-palette-action-default: rgba(216,232,244,0.70); --mud-palette-action-default-hover: rgba(255,255,255,0.08); --mud-palette-action-hover: rgba(255,255,255,0.08); --mud-palette-action-hover-opacity: 0.08; --mud-palette-action-disabled: rgba(255,255,255,0.26); --mud-palette-action-disabled-background: rgba(255,255,255,0.12); --mud-palette-divider: rgba(255,255,255,0.12); --mud-palette-divider-light: rgba(255,255,255,0.06); --mud-palette-overlay-dark: rgba(0,0,0,0.70); --mud-palette-table-hover: rgba(255,255,255,0.06); --mud-palette-table-striped: rgba(255,255,255,0.035); --mud-palette-primary: #4D82BB; --mud-palette-primary-darken: #3A6EA5; --mud-palette-primary-lighten: #6496CC; --mud-palette-primary-text: #ffffff; --mud-palette-on-primary: #ffffff; --mud-palette-input-outlined-border-color: rgba(255,255,255,0.28); } /* ============================================= BASE ============================================= */ html, body { font-family: 'Canva Sans', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: var(--isp-bg); color: var(--isp-text); transition: background-color .25s, color .25s; } h1:focus { outline: none; } a, .btn-link { color: var(--isp-primary-mid); } a:hover { color: var(--isp-primary); } .btn-primary { color: #fff; background-color: var(--isp-primary); border-color: var(--isp-primary-dark); } .btn-primary:hover { background-color: var(--isp-primary-dark); border-color: var(--isp-primary-dark); } .btn:focus, .btn:active:focus, .form-control:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--isp-primary-mid); } /* ============================================= LAYOUT — sidebar + main ============================================= */ .page { position: relative; display: flex; flex-direction: column; } .sidebar { background: linear-gradient(180deg, var(--isp-sidebar-from) 0%, var(--isp-sidebar-mid, var(--isp-sidebar-to)) 35%, var(--isp-sidebar-to) 100%); box-shadow: 2px 0 10px rgba(0,0,0,.12); transition: background .25s, width .16s ease, min-width .16s ease; } .top-row { background-color: var(--isp-surface); border-bottom: 1px solid var(--isp-border); height: 3.5rem; display: flex; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: background-color .25s, border-color .25s; } /* Normal flow — pages scroll via the browser window. flex:1 fills main's remaining height so the footer is always at the bottom. */ .content { padding-top: var(--app-content-pt); flex: 1; } @media (min-width: 641px) { .page { flex-direction: row; } .sidebar { width: 240px; height: 100vh; position: sticky; top: 0; flex-shrink: 0; overflow-y: auto; } main { flex: 1; min-width: 0; overflow-x: clip; /* clip is exempt from the CSS forced-auto rule — no scroll container created, so position:sticky on the footer keeps working against the viewport */ display: flex; flex-direction: column; } .top-row { position: sticky; top: 0; z-index: 1; } .content { padding-left: 2rem !important; padding-right: 1.5rem !important; } .nav-scrollable { display: block !important; } .sidebar-toggler { display: none !important; } /* ── Sidebar collapse — icon-only strip ── */ .page.sidebar-collapsed .sidebar { width: 52px !important; min-width: 52px !important; } .page.sidebar-collapsed .sidebar-header { padding: 0; justify-content: center; } .page.sidebar-collapsed .sidebar-logo-icon { justify-content: center; padding: 0; } .page.sidebar-collapsed .sidebar-logo-icon img { width: 34px; height: 34px; object-fit: contain; } .page.sidebar-collapsed .customer-context-panel { display: none; } /* Collapsed: no justify-content:center — border-left: 3px is symmetric across all items so the icon lands at (margin 4) + (border 3) + (padding 9) = 16px from edge, icon center ~25px in a 52px sidebar (< 1px off true center). */ .page.sidebar-collapsed .nav-link { padding: .55rem .4rem .55rem calc(.75rem - 3px); margin: 2px 4px; } .page.sidebar-collapsed .nav-link .nav-link-icon { margin-right: 0; } .page.sidebar-collapsed .nav-link-text { display: none; } .page.sidebar-collapsed .isp-collapse-btn { justify-content: center; padding: .35rem; } .page.sidebar-collapsed .isp-collapse-label { display: none; } } /* ============================================= FOOTER ============================================= */ .app-footer { flex-shrink: 0; /* Always visible at the bottom of the viewport */ position: sticky; bottom: 0; z-index: 10; /* above card shadows / article content */ height: var(--app-footer-h); display: flex; align-items: center; justify-content: space-between; gap: .35rem; padding: 0 2rem; border-top: 1px solid var(--isp-border); background-color: var(--isp-surface); font-size: .72rem; color: var(--isp-text-muted); transition: background-color .25s, border-color .25s; white-space: nowrap; overflow: hidden; } .app-footer a { color: var(--isp-primary-mid); text-decoration: none; } .app-footer a:hover { color: var(--isp-primary); text-decoration: underline; } .app-footer-phone { white-space: nowrap; } .app-footer-copy { white-space: nowrap; } /* ============================================= TOP BAR BRAND ============================================= */ .top-row-brand { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0 .6rem; line-height: 1.2; } .top-row-company { font-size: 1rem; font-weight: 700; color: var(--isp-text); letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .top-row-sep { font-size: .85rem; color: var(--isp-text-muted); font-weight: 400; flex-shrink: 0; } .top-row-title { font-size: .82rem; font-weight: 500; color: var(--isp-text-muted); letter-spacing: .1px; white-space: nowrap; } .top-row-sub { font-size: .72rem; color: var(--isp-text-muted); letter-spacing: .2px; } /* ============================================= THEME TOGGLE BUTTON ============================================= */ .btn-theme-toggle { background: none; border: 1.5px solid var(--isp-border); border-radius: 20px; color: var(--isp-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; padding: 4px 12px; transition: border-color .15s, color .15s, background .15s; } .btn-theme-toggle:hover { border-color: var(--isp-primary); color: var(--isp-primary); background: var(--isp-primary-light); } /* Sidebar internal collapse row + button */ .isp-collapse-row { position: sticky; top: 0; z-index: 1; padding: .45rem .45rem .35rem; border-bottom: 1px solid rgba(255,255,255,.10); background: inherit; } .isp-collapse-btn { display: flex; align-items: center; justify-content: flex-start; gap: .45rem; width: 100%; border: none; background: rgba(255,255,255,.10); border-radius: 6px; color: rgba(255,255,255,.60); cursor: pointer; padding: .32rem .45rem .32rem .5rem; font-family: inherit; font-size: .75rem; font-weight: 500; transition: background .12s, color .12s; } .isp-collapse-btn:hover { background: rgba(255,255,255,.18); color: #fff; } .isp-collapse-label { color: rgba(255,255,255,.60); white-space: nowrap; } .isp-collapse-btn:hover .isp-collapse-label { color: #fff; } /* Settings icon button (top-row, right side) */ .btn-header-settings { background: none; border: 1.5px solid var(--isp-border); border-radius: 8px; color: var(--isp-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: .9rem; padding: 0; flex-shrink: 0; text-decoration: none; transition: border-color .15s, color .15s, background .15s; } .btn-header-settings:hover { border-color: var(--isp-primary); color: var(--isp-primary); background: var(--isp-primary-light); } /* ============================================= NAVBAR / SIDEBAR STYLES ============================================= */ .sidebar-toggler { background: none; border: 1.5px solid rgba(255,255,255,.25); border-radius: 6px; color: rgba(255,255,255,.8); font-size: 1.3rem; line-height: 1; padding: 4px 8px; cursor: pointer; transition: background .15s, color .15s; flex-shrink: 0; } .sidebar-toggler:hover { background: rgba(255,255,255,.12); color: #ffffff; } .nav-scrollable { overflow-y: auto; padding-top: .5rem; } .nav-item { border-radius: 0; } .nav-link { display: flex; align-items: center; color: var(--isp-sidebar-text) !important; font-size: .93rem; /* Always reserve 3px for the left indicator — no layout shift on active */ padding: .55rem .75rem .55rem calc(.75rem - 3px); border-left: 3px solid transparent; border-radius: 6px; margin: 2px 8px; transition: background .15s, color .15s, border-color .12s; } .nav-link:hover { color: var(--isp-sidebar-text-h) !important; background-color: var(--isp-sidebar-hover-bg); } .nav-link.active { color: var(--isp-sidebar-text-h) !important; background-color: var(--isp-sidebar-active-bg); font-weight: 600; border-left-color: var(--isp-gold); } /* Consistent icon sizing — margin via CSS, not Bootstrap me-* */ .nav-link-icon { font-size: 1.05rem; width: 1.15rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; margin-right: .5rem; } /* ============================================= SIDEBAR HEADER + LOGO ============================================= */ .sidebar-header { display: flex; align-items: center; justify-content: space-between; height: var(--app-toprow-h); /* matches the top bar exactly — no horizontal seam */ padding: 0 12px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.10); } /* Logo sits directly on the dark sidebar — no white box needed */ .sidebar-logo-area { flex: 1; display: flex; align-items: center; padding: 4px 0; } .sidebar-logo-area img { width: 130px; height: auto; display: block; filter: drop-shadow(0 0 6px rgba(255,255,255,.18)); } /* ============================================= NAV SECTION LABELS ============================================= */ .nav-label { display: block; font-size: .70rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.40); padding: .9rem 1.15rem .3rem 1.15rem; pointer-events: none; user-select: none; } /* ============================================= LOADING SCREEN (index.html uses these) ============================================= */ #app-loading { position: fixed; inset: 0; background: linear-gradient(135deg, #0D1B2A 0%, #162840 60%, #1E3A58 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; gap: 0; } .loading-logo-wrap { animation: logoPulse 1.8s ease-in-out infinite; } .loading-logo { width: 240px; height: auto; display: block; filter: drop-shadow(0 0 10px rgba(255,255,255,.15)); } @keyframes logoPulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: .88; } 100% { transform: scale(1); opacity: 1; } } .loading-sub { color: rgba(255,255,255,.65); font-size: .85rem; margin-top: 10px; font-family: 'Segoe UI', sans-serif; } .loading-dots { display: flex; gap: 7px; margin-top: 28px; } .loading-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--isp-gold); animation: dotBounce 1.2s ease-in-out infinite; } .loading-dots span:nth-child(2) { animation-delay: .2s; } .loading-dots span:nth-child(3) { animation-delay: .4s; } @keyframes dotBounce { 0%, 80%, 100% { transform: scale(.7); opacity: .5; } 40% { transform: scale(1); opacity: 1; } } /* Legacy Blazor loading (hidden when we use custom) */ .loading-progress, .loading-progress-text { display: none !important; } /* ============================================= ERROR UI ============================================= */ #blazor-error-ui { background: #fff3cd; border-top: 2px solid #ffc107; bottom: 0; box-shadow: 0 -2px 6px rgba(0,0,0,.1); display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; } .blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* ============================================= DARK MODE — Bootstrap component overrides ============================================= */ /* Headings & body text */ body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6 { color: var(--isp-text); } body.theme-dark p, body.theme-dark label { color: var(--isp-text); } body.theme-dark .text-muted { color: var(--isp-text-muted) !important; } /* Bootstrap cards (used in ArticleList) */ body.theme-dark .card { background-color: var(--isp-surface) !important; border-color: var(--isp-border) !important; color: var(--isp-text) !important; } body.theme-dark .card-title { color: var(--isp-text) !important; } body.theme-dark .card-footer { background-color: var(--isp-surface) !important; border-color: var(--isp-border) !important; } /* Badge */ body.theme-dark .bg-primary-subtle { background-color: var(--isp-primary-light) !important; color: #a8cce8 !important; } /* Top row bar */ body.theme-dark .top-row { background-color: var(--isp-surface); border-bottom-color: var(--isp-border); } /* Container / page background */ body.theme-dark .container-fluid, body.theme-dark .content { background-color: transparent; } /* Article card hover shadow in dark */ body.theme-dark .article-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.45) !important; } /* ── Native Bootstrap inputs ── */ body.theme-dark .form-control, body.theme-dark .form-select { background-color: var(--isp-surface-2) !important; border-color: var(--isp-border) !important; color: var(--isp-text) !important; } body.theme-dark .form-control:focus, body.theme-dark .form-select:focus { background-color: var(--isp-surface-2) !important; border-color: var(--isp-primary) !important; color: var(--isp-text) !important; box-shadow: 0 0 0 .2rem rgba(77,130,187,.25) !important; } body.theme-dark .form-control::placeholder, body.theme-dark .form-select::placeholder { color: var(--isp-text-muted) !important; opacity: 1; } /* ============================================= MUDBLAZOR DARK MODE — targeted fixes Most dark mode is handled by --mud-palette-* variables in body.theme-dark above. These rules cover cases where variables alone are not enough. ============================================= */ /* Remove MudBlazor's default 251ms popover open transition so dropdowns open instantly */ .mud-popover { transition-duration: 50ms !important; } /* Popover box-shadow and border (variables don't control shadow) */ body.theme-dark .mud-popover-paper { box-shadow: 0 8px 32px rgba(0,0,0,.65) !important; border: 1px solid rgba(255,255,255,.10) !important; } /* Outlined button default color — variable controls bg but not border/text directly */ body.theme-dark .mud-button-outlined { border-color: rgba(255,255,255,.28) !important; } /* Input placeholder (not covered by palette vars) */ body.theme-dark .mud-input::placeholder { color: rgba(138,157,181,.8) !important; opacity: 1; } /* ============================================= MISC ============================================= */ .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; } code { color: #c02d76; } /* ============================================= SHARED — Article search autocomplete Used in ArticleList and ArticleDetail sidebar ============================================= */ .ac-wrap { position: relative; width: 100%; } .ac-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--isp-surface, #fff); border: 1px solid var(--isp-border, #dee2e6); border-radius: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 1600; overflow: hidden; } body.theme-dark .ac-dropdown { background: var(--isp-surface); border-color: var(--isp-border); box-shadow: 0 8px 28px rgba(0,0,0,.50); } .ac-item { display: flex; align-items: flex-start; gap: .65rem; padding: .6rem .85rem; cursor: pointer; border-bottom: 1px solid var(--isp-border, #f0f2f5); transition: background .1s; } .ac-item:last-of-type { border-bottom: none; } .ac-item:hover, .ac-item-active { background: var(--isp-primary-light, #EBF2FA); } body.theme-dark .ac-item:hover, body.theme-dark .ac-item-active { background: rgba(58,110,165,.2); } body.theme-dark .ac-item { border-bottom-color: var(--isp-border); } .ac-item-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; background: var(--isp-primary-light, #EBF2FA); display: flex; align-items: center; justify-content: center; color: var(--isp-primary); font-size: .85rem; margin-top: 1px; } body.theme-dark .ac-item-icon { background: rgba(58,110,165,.25); } .ac-item-body { flex: 1; min-width: 0; } .ac-item-title { font-size: .84rem; font-weight: 600; color: var(--isp-text, #212529); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.theme-dark .ac-item-title { color: var(--isp-text); } body.theme-dark .ac-item-snippet { color: var(--isp-text-muted); } .ac-item-snippet { font-size: .74rem; color: var(--isp-text-muted, #6c757d); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-item-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; align-self: center; } .ac-item-product { display: flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600; color: var(--isp-text-muted, #6c757d); background: var(--isp-surface-2, #f1f3f5); border: 1px solid var(--isp-border, #dee2e6); border-radius: 4px; padding: 1px 5px 1px 3px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; } body.theme-dark .ac-item-product { background: rgba(58,110,165,.12); border-color: rgba(58,110,165,.3); color: var(--isp-text-muted); } /* Fixed-size box guarantees the logo can never overflow */ .ac-prod-logo-box { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 14px; overflow: hidden; flex-shrink: 0; } .ac-prod-logo { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } .ac-item-badge { flex-shrink: 0; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 6px; border-radius: 4px; align-self: center; } .ac-badge-title { background: rgba(58,110,165,.12); color: var(--isp-primary); } .ac-badge-keywords { background: rgba(249,190,27,.2); color: #8a6a00; } .ac-badge-content { background: rgba(108,117,125,.12); color: #495057; } body.theme-dark .ac-badge-keywords { color: var(--isp-gold); } body.theme-dark .ac-badge-content { color: #adb5bd; } .ac-footer { padding: .45rem .85rem; font-size: .72rem; color: var(--isp-text-muted, #6c757d); background: var(--isp-surface-2, #f8f9fa); border-top: 1px solid var(--isp-border, #dee2e6); } body.theme-dark .ac-footer { background: rgba(0,0,0,.2); } .ac-mark { background: transparent; color: var(--isp-primary); font-weight: 700; padding: 0; } /* ============================================= KB ARTICLE — Alert callout boxes Stored in Markdown as
Markdig passes
as a CommonMark type-6 HTML block — no preprocessing needed in the Blazor component. ============================================= */ .kb-alert { display: block; padding: .7rem 1rem .7rem 1.1rem; margin: 1.25rem 0; border-left: 4px solid; border-radius: 0 6px 6px 0; line-height: 1.6; } .kb-alert::before { display: none; } .kb-alert p { margin: .3rem 0; } .kb-alert p:last-child { margin-bottom: 0; } .kb-alert ul, .kb-alert ol { list-style: none; padding-left: .6rem; margin: .35rem 0 .15rem; } .kb-alert li { margin-bottom: .25rem; padding-left: .1rem; } .kb-alert li::before { content: "– "; font-weight: 600; opacity: .7; } /* Screenshots embedded in alert callouts — always block, never inline icons */ .kb-alert img { display: block; height: auto; max-width: 100%; margin: .75rem auto; border-radius: 4px; } .kb-alert-success { background: rgba(76,175,80,.12); border-color: #4caf50; color: #2e7d32; } .kb-alert-warning { background: rgba(255,152,0,.12); border-color: #ff9800; color: #b45309; } .kb-alert-info { background: rgba(33,150,243,.12); border-color: #2196f3; color: #1565c0; } .kb-alert-danger { background: rgba(244,67,54,.12); border-color: #f44336; color: #b71c1c; } /* Dark mode — lighter text on dark backgrounds */ body.theme-dark .kb-alert-success { color: #86efac; } body.theme-dark .kb-alert-warning { color: #fde68a; } body.theme-dark .kb-alert-info { color: #93c5fd; } body.theme-dark .kb-alert-danger { color: #fca5a5; } /* body.theme-dark p/span/label (specificity 0,1,2) would override the alert's colour on its child elements. Force inheritance so the alert colour wins. Specificity 0,2,1 beats 0,1,2 — no !important needed. */ body.theme-dark .kb-alert p, body.theme-dark .kb-alert span, body.theme-dark .kb-alert li, body.theme-dark .kb-alert b, body.theme-dark .kb-alert strong { color: inherit; } /* ============================================= KB ARTICLE — Heading colours Fixed brand blue (#0070c0) matching the original Word-exported heading colour used across all migrated articles. Applied to every heading level so the hierarchy reads as a consistent blue family. Dark mode lightens the shade slightly for contrast on dark backgrounds. ============================================= */ .article-body h1, .article-body h2, .article-body h3, .article-body h4 { color: #0070c0; font-weight: normal; } body.theme-dark .article-body h1, body.theme-dark .article-body h2, body.theme-dark .article-body h3, body.theme-dark .article-body h4 { color: #4d9edb; } /* ============================================= KB ARTICLE — Heading weight normalisation Headings have no bold weight by default — only explicit / inside them renders bold, giving full authoring control over emphasis. ============================================= */ .article-body h1 strong, .article-body h1 b, .article-body h2 strong, .article-body h2 b, .article-body h3 strong, .article-body h3 b, .article-body h4 strong, .article-body h4 b { font-weight: bold; } /* ============================================= KB ARTICLE — Inline file download links Migration injects inside file tags. These rules style the icon and give the link a subtle pill appearance. ============================================= */ .article-body a > i.bi { font-size: .85em; margin-left: .3rem; vertical-align: middle; opacity: .75; } /* Pill wrapper for download links (any that contains a bi icon) */ .article-body a:has(> i.bi), .article-body a:has(i.bi) { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem .15rem .45rem; border-radius: 999px; background: var(--isp-primary-light, #EBF2FA); color: var(--isp-primary); font-weight: 500; font-size: .88rem; text-decoration: none; transition: background .15s, color .15s; } .article-body a:has(i.bi):hover { background: var(--isp-primary); color: #fff; } .article-body a:has(i.bi):hover > i.bi { opacity: 1; } /* ============================================= KB ARTICLE — Code block copy button Injected into every 
 by ispHighlightCode().
   Hidden by default; fades in on pre:hover.
   Also always visible on touch devices (no hover state).
   ============================================= */
.isp-copy-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 5px;
    background: rgba(255, 255, 255, .88);
    color: var(--isp-text-muted);
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.isp-copy-btn:hover {
    background: #fff;
    border-color: var(--isp-primary);
    color: var(--isp-primary);
}
.isp-copy-btn:active {
    transform: scale(.92);
}
/* Success state — stays visible until timeout resets it */
.isp-copy-btn--copied {
    background: rgba(76,175,80,.14) !important;
    border-color: #4caf50 !important;
    color: #4caf50 !important;
    opacity: 1 !important;
}

/* Dark mode */
body.theme-dark .isp-copy-btn {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .5);
}
body.theme-dark .isp-copy-btn:hover {
    background: rgba(255, 255, 255, .14);
    border-color: var(--isp-primary-mid);
    color: var(--isp-primary-mid);
}
body.theme-dark .isp-copy-btn--copied {
    background: rgba(76, 175, 80, .18) !important;
    border-color: #66bb6a !important;
    color: #66bb6a !important;
}