.md-header {
background-color: #000072 !important;
}
.md-header {
--primary: #0001CD;
--secondary: #000072;}
/*:root > * {*/
/* --md-primary-fg-color: #0d0d79;*/
/* --md-primary-fg-color--light: #0d0d79;*/
/* --md-primary-fg-color--dark: #0d0d79;*/
/*}*/
/*:root {*/
/* !* Primary color shades *!*/
/* --md-primary-fg-color: #861f41;*/
/* --md-primary-fg-color--light: #861f4194;*/
/* --md-primary-fg-color--dark: #ac325a;*/
/* --md-primary-bg-color: hsla(0, 0%, 100%, 1);*/
/* --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);*/
/* --md-text-link-color: hsla(231, 48%, 48%, 1);*/
/* !* Accent color shades *!*/
/* --md-accent-fg-color: rgb(98, 18, 189);*/
/* --md-accent-fg-color--transparent: hsla(189, 100%, 37%, 0.1);*/
/* --md-accent-bg-color: hsla(0, 0%, 100%, 1);*/
/* --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);*/
/* }*/
/* */
/* :root > * {*/
/* */
/* !* Code block color shades *!*/
/* --md-code-bg-color: hsla(0, 0%, 96%, 1);*/
/* --md-code-fg-color: hsla(200, 18%, 26%, 1);*/
/* !* Footer *!*/
/* --md-footer-bg-color: #861f41;*/
/* --md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32);*/
/* --md-footer-fg-color: hsla(0, 0%, 100%, 1);*/
/* --md-footer-fg-color--light: hsla(0, 0%, 100%, 0.7);*/
/* --md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.3);*/
/* }*/
/* ----------------------------------------------------------------------
Lock icon on authenticated-only nav tabs for logged-out visitors.
JS in overrides/main.html sets data-locked on the relevant tab links
when /api/me returns no user, and adds .sa-logged-in to when
the user is authenticated (which suppresses the icon).
---------------------------------------------------------------------- */
:root {
--sa-lock-icon: url("data:image/svg+xml;utf8,");
}
.md-tabs__link[data-locked]::after {
content: "";
display: inline-block;
width: 0.75rem;
height: 0.75rem;
flex: 0 0 auto;
margin-left: 0.3rem;
vertical-align: middle;
background-color: currentColor;
opacity: 0.6;
-webkit-mask: var(--sa-lock-icon) no-repeat center / contain;
mask: var(--sa-lock-icon) no-repeat center / contain;
}
body.sa-logged-in .md-tabs__link[data-locked]::after {
display: none;
}
/* ----------------------------------------------------------------------
Support Assistant nav tab — gradient pill button with magic-wand icon.
Last item in top-level nav (see docs/.nav.yml). On the Support Assistant
page itself, the link's href becomes "./", so we also target the last
tab item by position via :last-child.
---------------------------------------------------------------------- */
:root {
/* Material Symbols "auto_awesome" (sparkles) — the standard "AI" glyph. */
--sa-wand-icon: url("data:image/svg+xml;utf8,");
}
/* The pill itself — applied whether the link is rendered with its full href
or as "./" on the active page. */
.md-tabs__link[href*="support_assistant"],
.md-tabs__list > .md-tabs__item:last-child > .md-tabs__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0 0.6rem;
padding: 0.25rem 0.9rem;
margin-top: 0.375rem; /* centre the taller pill in the 2.4rem tab */
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #c026d3 100%);
color: #ffffff !important;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
opacity: 1 !important;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* Keep white text on focus / active state. */
.md-tabs__list > .md-tabs__item--active:last-child > .md-tabs__link,
.md-tabs__link[href*="support_assistant"]:focus,
.md-tabs__list > .md-tabs__item:last-child > .md-tabs__link:focus {
color: #ffffff !important;
}
.md-tabs__link[href*="support_assistant"]:hover,
.md-tabs__list > .md-tabs__item:last-child > .md-tabs__link:hover {
filter: brightness(1.08);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.5);
transform: translateY(-1px);
}
/* Magic wand / sparkles icon, recoloured via CSS mask so it inherits text colour. */
.md-tabs__link[href*="support_assistant"]::before,
.md-tabs__list > .md-tabs__item:last-child > .md-tabs__link::before {
content: "";
display: inline-block;
width: 1.05rem;
height: 1.05rem;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: var(--sa-wand-icon) no-repeat center / contain;
mask: var(--sa-wand-icon) no-repeat center / contain;
}