/* QueBIT brand tokens (Material theme overrides) ------------------------------------------------------------------ Single source of truth for site-wide colors. mkdocs.yml uses palette: custom, which disables Material's named palettes and lets us drive primary/accent entirely from these custom properties. Accent decision history (kept for the record): - #FF5630 — original captured-brand orange. Visually loud against navy on white; only ~3.5:1 contrast (fails WCAG AA normal). - #C95A2A — muted terracotta alternative. Same warm hue family, desaturated. ~4.6:1 contrast. - #8B6508 — dark amber alternative. Complementary to navy, financial-doc feel. ~5.2:1 contrast. - #0E7C86 — deep teal (current). Cool-on-cool with navy, calm and professional. ~4.5:1 contrast. Uncomment one of the alternates above and comment out the teal block to swap. */ :root { --md-primary-fg-color: #0F4B83; --md-primary-fg-color--light: #1F5F9E; --md-primary-fg-color--dark: #0A3863; --md-primary-bg-color: #FFFFFF; --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); --md-accent-fg-color: #0E7C86; --md-accent-fg-color--transparent: rgba(14, 124, 134, 0.10); --md-accent-bg-color: #FFFFFF; --md-accent-bg-color--light: rgba(255, 255, 255, 0.7); /* Per-product variant token. Defaults to the global accent. Override per-product via [data-product="..."] selectors below. */ --product-accent: var(--md-accent-fg-color); } /* Dark-scheme variant — keep the same brand identity, lighten the primary and accent slightly for legibility on dark surfaces. */ [data-md-color-scheme="slate"] { --md-primary-fg-color: #1F5F9E; --md-primary-fg-color--light: #3E7BB8; --md-primary-fg-color--dark: #0F4B83; --md-accent-fg-color: #1FA0AC; --md-accent-fg-color--transparent: rgba(31, 160, 172, 0.15); } /* Per-product variants ------------------------------------------------------------------ product-class.js sets data-product="controlworq" or "dataworq" on based on URL path. Add overrides below as per-product styling diverges. Both products currently inherit the global accent — the variant mechanism is wired and ready, but no visual differentiation is applied yet. Uncomment to enable. */ /* [data-product="controlworq"] { --product-accent: #...; } [data-product="dataworq"] { --product-accent: #...; } */ /* Apply the product-scoped accent to chrome that should vary per product. Add selectors here as we identify elements that should reflect the variant. */ .lookbook-product-accent { background: var(--product-accent); } /* Lookbook-specific helpers --------------------------------------- */ .lookbook-swatch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin: 1rem 0; } .lookbook-swatch { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; overflow: hidden; font-size: 0.85rem; } .lookbook-swatch-color { height: 80px; display: flex; align-items: flex-end; padding: 0.5rem; color: #FFFFFF; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .lookbook-swatch-meta { padding: 0.5rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); display: flex; flex-direction: column; gap: 0.15rem; } .lookbook-swatch-meta code { font-size: 0.75rem; background: transparent; padding: 0; } /* Layout — wider content, clearer pane boundaries ------------------------------------------------------------------ Material's default .md-grid clamps header / tabs / main / footer to ~61rem (976px) and centers everything, which leaves a lot of unused horizontal space on wide monitors. Drop the cap so the chrome and sidebars extend to the viewport edges; Material's internal padding still keeps content off the edge. */ .md-grid { max-width: none; } /* Subtle vertical dividers between the article tree (left), main content, and TOC (right). Desktop only — sidebars collapse on mobile and the dividers would be visually noisy there. 76.25em is Material's breakpoint for permanent-sidebar layout. Borders sit on .md-content (not on the sidebars) so they extend the full article height. Sidebar borders would only reach the bottom of their sticky scrollwrap — Document360 renders these as full-height column dividers, so we match that. */ @media screen and (min-width: 76.25em) { .md-content { border-left: 1px solid var(--md-default-fg-color--lightest); border-right: 1px solid var(--md-default-fg-color--lightest); } } /* Header customizations ------------------------------------------------------------------ Vertical divider between the QueBIT logo and the product title; right-aligned QueBIT Website / Email Support links injected by docs/javascripts/header-customizations.js. */ @media screen and (min-width: 60em) { .md-header__title { border-left: 1px solid var(--md-primary-bg-color--light); padding-left: 1rem; margin-left: 0.4rem; } } .qb-header-links { margin-left: auto; margin-right: 0.4rem; display: none; gap: 1.25rem; } @media screen and (min-width: 60em) { .qb-header-links { display: flex; align-items: center; } } .qb-header-link { color: var(--md-primary-bg-color); font-size: 0.78rem; font-weight: 600; text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; transition: opacity 0.2s; } .qb-header-link:hover { opacity: 0.7; color: var(--md-primary-bg-color); text-decoration: underline; } /* Left-pane filter input ------------------------------------------------------------------ Inserted by docs/javascripts/nav-filter.js as a sibling above the primary nav. Type to filter the nav by link text; matched items + their ancestor categories stay visible. */ .qb-nav-filter { display: flex; align-items: stretch; margin: 0.5rem 0.6rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; background: var(--md-default-bg-color); overflow: hidden; box-sizing: border-box; } .qb-nav-filter__input { flex: 1 1 auto; min-width: 0; /* let the input shrink below its intrinsic width */ border: 0; outline: 0; background: transparent; color: var(--md-default-fg-color); font: inherit; font-size: 0.78rem; padding: 0.3rem 0.5rem; box-sizing: border-box; } .qb-nav-filter__input::placeholder { color: var(--md-default-fg-color--light); } .qb-nav-filter__clear { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; color: var(--md-default-fg-color--light); font-size: 1.1rem; line-height: 1; padding: 0 0.5rem; display: flex; align-items: center; } .qb-nav-filter__clear:hover { color: var(--md-default-fg-color); } .qb-nav-hidden { display: none !important; } /* Sidebar nav scoping ------------------------------------------------------------------ When the user is inside a product's pages, the left sidebar should show only that product's tree. Top-level

items are tagged with data-product by docs/javascripts/nav-filter.js based on each section's link. The body's data-product attribute (set by product-class.js) drives which top-level sections to hide. Also hide the .md-nav__title at the top of the sidebar — it duplicates the site name and serves no navigational purpose once the product context is shown in the header. */ .md-sidebar--primary .md-nav--primary > .md-nav__title { display: none; } body[data-product="controlworq"] .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item[data-product="dataworq"], body[data-product="dataworq"] .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item[data-product="controlworq"] { display: none; } /* Per-product search filter ------------------------------------------------------------------ Hide search-result entries whose URL points at a different product than the one the user is currently in. product-class.js sets the data-product attribute on from the URL path. On the home page (no data-product), all results show. Uses :has() (modern browsers) to hide the entire list-item, not just the link, so the results list stays compact. */ body[data-product="controlworq"] .md-search-result__item:has(.md-search-result__link[href*="/dataworq/"]), body[data-product="dataworq"] .md-search-result__item:has(.md-search-result__link[href*="/controlworq/"]) { display: none; } /* Hide Material's nav status badges. These render when a page's frontmatter has a recognized `status:` value (new, deprecated, etc.) and place a small info-circle icon next to every leaf article in the left nav. We don't use the feature; the icon is distracting. Migrate.py emits `source_status:` (not `status:`) so the badge wouldn't render anyway, but the rule below catches any third-party page that might trigger it. */ .md-nav .md-status { display: none; } /* Heading permalinks → copy-link buttons ------------------------------------------------------------------ Replace the default ¶ pilcrow with a link icon, and let docs/javascripts/headerlink-copy.js handle clicks (copies the anchor URL to clipboard with brief "Copied!" feedback). The pilcrow is technically a permalink anchor in Material; users almost always want to share/copy the URL rather than navigate. This replacement makes the affordance obvious. */ .md-typeset .headerlink { font-size: 0.85em; opacity: 0; margin-left: 0.4rem; color: var(--md-default-fg-color--lighter); vertical-align: middle; position: relative; text-decoration: none; transition: opacity 0.15s, color 0.15s; } .md-typeset h1:hover .headerlink, .md-typeset h2:hover .headerlink, .md-typeset h3:hover .headerlink, .md-typeset h4:hover .headerlink, .md-typeset h5:hover .headerlink, .md-typeset h6:hover .headerlink, .md-typeset .headerlink:focus { opacity: 1; } .md-typeset .headerlink:hover { color: var(--md-accent-fg-color); } /* Replace pilcrow text content with a chain-link glyph. */ .md-typeset .headerlink::before { content: "🔗"; font-size: 0.85em; } /* Hide the default pilcrow text so only the icon shows. */ .md-typeset .headerlink { font-size: 0; } .md-typeset .headerlink::before { font-size: 0.85rem; } /* "Copied!" feedback tooltip while data-qb-copied is set by JS. */ .md-typeset .headerlink[data-qb-copied="1"]::after { content: "Copied!"; position: absolute; left: 1.4rem; top: -0.2rem; background: var(--md-accent-fg-color); color: var(--md-accent-bg-color); font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 3px; white-space: nowrap; pointer-events: none; opacity: 1; } /* Last-updated marker rendered at the top of every migrated article ------------------------------------------------------------------ Source: Document360's CSV "Date" column (last-edited timestamp). Migrate.py writes

Last updated: ...

as the first body element. */ .md-typeset .qb-updated { color: var(--md-default-fg-color--light); font-size: 0.78rem; font-style: italic; margin: -0.5rem 0 1.5rem; }