/* SciTools / Understand branding — match the scitools.com header: charcoal navbar, blue Understand app icon, blue "Understand" wordmark, blue accents. Brand blue #3e9bd6 (wordmark / Free-Trial button); logo cyan #30c3e8. NOTE: Material defines --md-primary-fg-color on via the color-scheme attribute, so the override must target those body-level selectors (not :root) to win the cascade. */ [data-md-color-scheme="default"], [data-md-color-scheme="slate"] { /* Charcoal header in both schemes. MaterialX drives the header off its own --mx-topbar-* vars (default: light page background), so set those directly; the older --md-primary-* header vars below are kept for anything still on them (e.g. the tabs bar). */ --mx-topbar-bg: #2b2b2b; --mx-topbar-fg: #ffffff; --mx-topbar-fg-muted: rgba(255,255,255,0.7); --md-primary-fg-color: #2b2b2b; --md-primary-fg-color--light: #3a3a3a; --md-primary-fg-color--dark: #1f1f1f; /* Header foreground (nav links / search) stays light. */ --md-primary-bg-color: #ffffff; --md-primary-bg-color--light: rgba(255,255,255,0.7); /* Brand blue for hover/active accents. */ --md-accent-fg-color: #3e9bd6; --md-accent-fg-color--transparent: rgba(62,155,214,0.1); } /* Body-link color per scheme (readable on the page background). The slate selector needs the extra [data-md-color-primary] to out-rank the theme palette's [scheme=slate][primary=indigo] rule (0,2,0). */ [data-md-color-scheme="default"] { --md-typeset-a-color: #2f8bc4; } [data-md-color-scheme="slate"], [data-md-color-scheme="slate"][data-md-color-primary] { --md-typeset-a-color: #4aa8e0; } /* Header logo = the app icon; keep it in full color (no invert). */ .md-header__button.md-logo img { height: 1.5rem; width: auto; } /* "Understand …" wordmark in the header rendered in the brand blue, echoing scitools.com. */ .md-header__title, .md-header__title .md-header__topic > .md-ellipsis { color: #3e9bd6; font-weight: 700; } /* Two-part wordmark (built by assets/portal-home.js): "Understand Documentation" (brand blue, → portal root) - "User Guide" (→ help home). */ .md-header__title a.mx-brand-home { color: #3e9bd6; text-decoration: none; } .md-header__title a.mx-brand-home:hover { color: #6bb7e4; } .md-header__title .mx-brand-sep { color: rgba(255, 255, 255, 0.4); font-weight: 400; } .md-header__title a.mx-brand-section { color: rgba(255, 255, 255, 0.85); font-weight: 500; text-decoration: none; } .md-header__title a.mx-brand-section:hover { color: #3e9bd6; } /* MaterialX colors the active nav item and the active "Page Contents" entry with --md-primary-fg-color — our charcoal header override — which is unreadable on the slate (dark) page background. Use the body-link blue in dark mode instead. */ /* Specificity note: must out-rank the theme's `.md-nav--primary .md-nav__item .md-nav__link--active` (0,3,0). */ [data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active, [data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active, [data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active code { color: var(--md-typeset-a-color); } /* Blue hover on header nav tabs. */ .md-tabs__link:hover { color: var(--md-accent-fg-color); opacity: 1; } /* Make the top-level parent-group headers stand out from the collapsible sections beneath them (default is a muted gray that blends in). */ .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link { color: var(--md-default-fg-color); /* full-strength, not the muted --light */ font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 1; } /* A subtle divider + extra top spacing above each group (except the first). */ .md-nav--primary > .md-nav__list > .md-nav__item--section { margin-top: 1.1rem; padding-top: 0.5rem; border-top: 1px solid var(--md-default-fg-color--lightest); } .md-nav--primary > .md-nav__list > .md-nav__item--section:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* Brand-blue accent bar to the left of each group header. */ .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link { border-left: 3px solid var(--md-accent-fg-color); padding-left: 0.5rem; } /* App screenshots (tag with { .screenshot } — see CONTRIBUTING.md). A hairline border + soft shadow so the app's white chrome doesn't bleed into the page background; slightly dimmed in the dark scheme. */ .md-typeset img.screenshot { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); max-width: 100%; height: auto; } [data-md-color-scheme="slate"] .md-typeset img.screenshot { filter: brightness(0.9); } /* Captions under screenshot figures: smaller + muted, like Material's docs. */ .md-typeset figure:has(> img.screenshot) > figcaption { max-width: 40rem; margin: 0.4rem auto 0; font-size: 0.7rem; color: var(--md-default-fg-color--light); } /* Contact support: one unmistakable "email us" panel at the top of the page, so the address is the thing you see rather than a sentence you have to read. Markup lives in getting-started/contact-support.md. */ .md-typeset .support-cta { margin: 1.4em 0 1.8em; padding: 1.6em 1.2em 1.3em; border: 1px solid var(--md-default-fg-color--lightest); border-top: 3px solid var(--md-accent-fg-color); border-radius: 0.3rem; background: var(--md-accent-fg-color--transparent); text-align: center; } /* Oversized so the address reads as the page's one action. Material sizes .md-button from its own font-size, so scale that rather than the padding. The fill stays charcoal (--md-primary-fg-color) rather than brand blue: white on #3e9bd6 is only ~2.6:1, well short of readable. A brand-blue edge gives the button its shape on the dark scheme, where charcoal-on-slate would otherwise nearly disappear. */ .md-typeset .support-cta__button { font-size: 1.15em; font-weight: 700; padding: 0.55em 1.4em; border: 1px solid var(--md-accent-fg-color); } .md-typeset .support-cta__button:focus, .md-typeset .support-cta__button:hover { background-color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); color: #ffffff; } .md-typeset .support-cta__button .twemoji svg { height: 1.2em; width: 1.2em; vertical-align: -0.25em; margin-right: 0.45em; fill: currentcolor; } /* The reassurance under the button: present, but never competing with it. */ .md-typeset .support-cta__note { max-width: 30rem; margin: 0.9em auto 0; font-size: 0.85em; line-height: 1.55; color: var(--md-default-fg-color--light); } /* Fallback contacts (phone, distributors) read as a short list of options rather than prose, and stay visibly quieter than the email panel above. */ .md-typeset p.support-alt { margin: 0.5em 0; color: var(--md-default-fg-color--light); } .md-typeset p.support-alt .twemoji svg { height: 1.1em; width: 1.1em; vertical-align: -0.2em; margin-right: 0.4em; fill: currentcolor; } /* Version-releases index: each release is a full-width clickable row (styled like a table, but the whole data row is a single so the entire row links to the release page — a can't itself be a link). */ .md-typeset .releases { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.2rem; overflow: hidden; margin: 1em 0; } .md-typeset .releases .rel-row { display: grid; grid-template-columns: 4rem 6.5rem 1fr; gap: 1rem; align-items: baseline; padding: 0.55rem 0.9rem; border-top: 1px solid var(--md-default-fg-color--lightest); } .md-typeset .releases .rel-row:first-child { border-top: 0; } .md-typeset .releases .rel-head { font-weight: 700; text-transform: uppercase; font-size: 0.64rem; letter-spacing: 0.06em; color: var(--md-default-fg-color--light); background: var(--md-default-fg-color--lightest); } .md-typeset a.rel-row { text-decoration: none; color: var(--md-typeset-color); } .md-typeset a.rel-row:hover { background: var(--md-accent-fg-color--transparent); } .md-typeset a.rel-row .rel-ver { font-weight: 700; color: var(--md-typeset-a-color); } .md-typeset .releases .rel-date { color: var(--md-default-fg-color--light); font-size: 0.85em; white-space: nowrap; } .md-typeset .releases .rel-hl { font-size: 0.9em; } @media (max-width: 480px) { .md-typeset .releases .rel-row { grid-template-columns: 1fr; gap: 0.1rem; } .md-typeset .releases .rel-head { display: none; } } /* ---- Compact scale -------------------------------------------------------- Bring the theme closer to the docs portal (docs/html, portal.css: a 16px base with tight spacing). Material's desktop root inflates to 137.5–150%, which makes the whole layout — and especially the headings and their top margins — read oversized next to the portal. Pull the root to a flat 125% and bump the body back to ~16px, then trim the headings and their margins to the portal's ratios (h1 1.8×, h2 1.35×, h3 1.2× body). Body copy and colors are otherwise unchanged. */ html { font-size: 125%; } .md-typeset { font-size: 0.8rem; line-height: 1.6; } .md-typeset h1 { font-size: 1.8em; line-height: 1.3; margin: 0 0 0.6em; } .md-typeset h2 { font-size: 1.35em; line-height: 1.4; margin: 1.2em 0 0.5em; } .md-typeset h3 { font-size: 1.2em; line-height: 1.5; margin: 1.1em 0 0.4em; }