.an-site-header {
--an-header-bg: #fff;
--an-header-fg: #233647;
--an-header-icon: #3f5f9d;
--an-header-hover: #fff5e7;
--an-header-edge: #fff;
--an-header-facebook-bg: #1877f2;
--an-header-facebook-fg: #fff;
--an-header-light-logo: block;
--an-header-dark-logo: none;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
.an-site-header {
--an-header-bg: #0d141d;
--an-header-fg: #fff;
--an-header-icon: #fff;
--an-header-hover: #253746;
--an-header-edge: #0d141d;
--an-header-facebook-bg: transparent;
--an-header-light-logo: none;
--an-header-dark-logo: block;
color-scheme: dark;
}
}
html[data-an-contrast="dark"] .an-site-header,
html[data-an-contrast="inverse"] .an-site-header {
--an-header-bg: #000;
--an-header-fg: #fff;
--an-header-icon: #fff;
--an-header-hover: #253746;
--an-header-edge: #000;
--an-header-facebook-bg: transparent;
--an-header-light-logo: none;
--an-header-dark-logo: block;
color-scheme: dark;
}
html[data-an-contrast="inverse"] .an-site-header {
--an-header-fg: #ffeb3b;
--an-header-icon: #ffeb3b;
--an-header-facebook-fg: #ffeb3b;
}
html[data-an-contrast="yellow"] .an-site-header {
--an-header-bg: #ffeb3b;
--an-header-fg: #111;
--an-header-icon: #111;
--an-header-hover: #f19b2c;
--an-header-edge: #ffeb3b;
--an-header-facebook-bg: transparent;
--an-header-facebook-fg: #111;
--an-header-light-logo: block;
--an-header-dark-logo: none;
color-scheme: light;
}
.an-site-header .an-site-logo--light { display: var(--an-header-light-logo); }
.an-site-header .an-site-logo--dark { display: var(--an-header-dark-logo); }
.an-site-brand-text { display: none; font: 600 16px/1.25 var(--an-font); } html .an-site-header .an-primary-navigation,
html .an-site-header .an-primary-menu .sub-menu {
background: var(--an-header-bg) !important;
}
html .an-site-header .an-primary-menu a { color: var(--an-header-fg) !important; }
html .an-site-header .an-primary-menu > li:hover > a,
html .an-site-header .an-primary-menu > li:focus-within > a,
html .an-site-header .an-primary-menu > .current-menu-item > a,
html .an-site-header .an-primary-menu > .current-menu-parent > a,
html .an-site-header .an-primary-menu > .current_page_item > a {
background: var(--an-brand);
color: #233647 !important;
}
html .an-site-header .an-public-tools,
html .an-site-header .an-tool > summary,
html .an-site-header .an-tool__access-icon,
html .an-site-header .an-facebook-link,
html .an-site-header .an-menu-toggle {
background: transparent !important;
box-shadow: none;
}
html .an-site-header .an-tool > summary,
html .an-site-header .an-tool__label,
html .an-site-header .an-menu-toggle,
html .an-site-header .an-menu-caption {
color: var(--an-header-fg) !important;
}
html .an-site-header .an-tool__access-icon {
color: var(--an-header-icon) !important;
flex-shrink: 0;
border-color: currentColor;
}
.an-access-symbol {
display: block;
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
html .an-site-header .an-facebook-link .an-icon {
color: var(--an-header-facebook-fg) !important;
fill: currentColor;
background: var(--an-header-facebook-bg);
border-radius: 50%;
width: 29px;
height: 29px;
padding: 5px;
}
.an-site-header .an-facebook-link {
width: 44px;
height: 44px;
flex-shrink: 0;
}
.an-site-header .an-tool > summary { min-width: 44px; min-height: 44px; justify-content: center; }
.an-site-header__tools { gap: 4px; top: 0; }
.an-menu-toggle {
place-items: center;
align-content: center;
gap: 0;
width: 58px;
min-height: 52px;
padding: 2px;
order: 3;
cursor: pointer;
}
.an-menu-symbol { display: block; width: 29px; height: 29px; overflow: visible; fill: none; stroke-linecap: square; }
.an-menu-symbol__edge { stroke: var(--an-header-edge); stroke-width: 5; }
.an-menu-symbol__ink { stroke: currentColor; stroke-width: 3; }
.an-menu-caption { display: block; font: 400 14px/1.15 var(--an-font); } .an-site-header :is(.an-menu-toggle, .an-facebook-link, .an-tool > summary):focus-visible {
outline: 3px solid currentColor;
outline-offset: 2px;
}
.an-site-header .an-facebook-link:hover .an-icon { outline: 1px solid var(--an-header-icon); outline-offset: 2px; }
.an-site-header .an-tool > summary:hover .an-tool__label { text-decoration: underline; } .an-site-header .an-tool__panel { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow: auto; }
.an-site-header .an-accessibility-panel .an-contrast-dark { color: #fff !important; }
.an-site-header .an-accessibility-panel .an-contrast-yellow { color: #111 !important; }
.an-site-header .an-accessibility-panel .an-contrast-inverse { color: #ffeb3b !important; }
@media (max-width: 960px) {
.an-site-header__tools { position: static; }
.an-site-header .an-tool__label {
position: absolute !important; width: 1px !important; height: 1px !important;
margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
}
}
@media (max-width: 700px) {
.an-site-header .an-tool__panel { top: 88px; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); }
body.admin-bar .an-site-header .an-tool__panel { top: 134px; max-height: calc(100vh - 146px); max-height: calc(100dvh - 146px); }
} html:is([data-an-font-size="150"], [data-an-font-size="200"]) .an-site-header {
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
}
html:is([data-an-font-size="150"], [data-an-font-size="200"]) .an-site-header__tools { position: static; order: 2; }
html:is([data-an-font-size="150"], [data-an-font-size="200"]) .an-primary-menu > li { display: block; }
html:is([data-an-font-size="150"], [data-an-font-size="200"]) .an-primary-menu > li > a { justify-content: flex-start; white-space: normal; font-size: 1rem; }
html:is([data-an-font-size="150"], [data-an-font-size="200"]) .an-primary-menu .sub-menu { position: static; visibility: visible; opacity: 1; box-shadow: none; }
@media (forced-colors: active) {
html .an-site-header {
--an-header-bg: Canvas; --an-header-fg: CanvasText; --an-header-icon: ButtonText;
--an-header-edge: Canvas; --an-header-facebook-bg: transparent; --an-header-facebook-fg: LinkText;
}
.an-site-header .an-site-logo { display: none; }
.an-site-brand-text { display: block; }
.an-menu-symbol__edge { stroke: none; }
}