/* * CampusCore brand palette for Material for MkDocs. * Values mirror the marketing site (website/src/index.html :root vars) so the * docs portal and the marketing page stay visually one product. */ /* * Material sets its palette vars on the element via * [data-md-color-primary=...], which sits closer in the inheritance chain than * :root - so brand vars must be declared on the same selectors to win. * palette.primary/accent are "custom" in mkdocs.yml, giving us these hooks. */ [data-md-color-primary="custom"] { --md-primary-fg-color: #f97316; /* orange */ --md-primary-fg-color--light: #fdba74; /* orange-light */ --md-primary-fg-color--dark: #ea580c; } [data-md-color-accent="custom"] { --md-accent-fg-color: #ea580c; } :root { --md-typeset-a-color: #ea580c; } /* * Always reserve space for the vertical scrollbar so the centered layout does * not jump sideways between a short page (e.g. Welcome, no scrollbar) and a * long page (scrollbar present). scrollbar-gutter is the modern fix; the * overflow-y fallback covers browsers without it. */ html { scrollbar-gutter: stable; overflow-y: scroll; } /* Keep the header readable on the orange primary. */ .md-header { background-color: var(--md-primary-fg-color); } /* The logo is a wide transparent mark; give it a touch of breathing room. */ .md-header__button.md-logo img { height: 1.6rem; width: auto; } /* * Darker left navigation. Material's default nav text is a muted gray; deepen * page links and make the section names (e.g. "SSO Setup") clearly stronger. */ .md-nav { color: #18181b; } .md-nav__link { color: #3f3f46; /* zinc-700: darker than Material's default nav gray */ } /* Section names: near-black and bold so they read as headings. */ .md-nav__item--section > .md-nav__link, .md-nav__item--nested > label.md-nav__link, .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link { color: #18181b; font-weight: 700; } /* Active page stays brand orange. */ .md-nav__link--active, .md-nav__link--active:focus, .md-nav__link--active:hover { color: var(--md-primary-fg-color); }