` for screen readers. */ /* ---------- Logo sizing ---------- */ .site-branding .site-title-wrap .custom-logo-link img, .site-header-row .site-branding img.custom-logo { max-height: 64px; width: auto; } /* When the header floats over a dark hero, the navy logo blends into the * background. Whiten it via filter so it reads as the brand mark on dark * surfaces. Long-term replacement: upload a separate light-version PNG * to Kadence's transparent_header_logo theme_mod and remove this rule. */ body.transparent-header .site-branding img.custom-logo { filter: brightness(0) invert(1); } /* ---------- Hide visual site-title text (logo IS the wordmark) ---------- * * Visually hidden, not display:none, so screen readers still announce * the site name on landing pages. */ .site-title-wrap .site-title, .site-title-wrap .site-description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Header surface ---------- * * * Kadence ships #masthead with a hard `background: #ffffff`. Override to * transparent so the body's radial-Brand-Wash gradient (see 10-globals.css) * reads as one continuous surface from top of viewport down through the * page — eliminates the "header is a separate slab" feel that paper-on-paper * had. Nav text is ink (#020726) on the gradient's lightest area (Paper + * faint Brand Wash), still > 12:1 contrast for AAA. Transparent-header * pages keep their float-over-hero treatment further down (which inverts * the nav text to Paper for contrast against the navy hero). */ #masthead, .site-header-wrap, .site-header-inner-wrap { background-color: transparent; } /* ---------- Primary nav — type rhythm ---------- */ .header-menu-container .menu-item > a, .primary-menu-container .menu-item > a { font-family: "DM Sans", system-ui, sans-serif; font-size: 1rem; font-weight: 500; color: var(--isjac-color-ink); transition: color 150ms ease-out; } .header-menu-container .menu-item > a:hover, .header-menu-container .menu-item > a:focus-visible, .primary-menu-container .menu-item > a:hover, .primary-menu-container .menu-item > a:focus-visible { color: var(--isjac-color-brand-deep); } /* Active page indicator. */ .header-menu-container .current-menu-item > a, .primary-menu-container .current-menu-item > a { color: var(--isjac-color-brand-deep); font-weight: 600; } /* ---------- Transparent header — WCAG-compliant contrast ---------- * * * When `body.transparent-header` is set (Kadence floats the header over * the hero), the nav text must remain legible regardless of what hero * image is loaded. Two-pronged approach: * * 1. Force nav text to Paper (#FFFAFC). Against the brand-deep gradient * overlay (rgba(2,7,38,0.7) → rgba(21,82,111,0.55)) the contrast * ratio is 12.6:1 → 7.4:1 — both above WCAG AAA (7:1) for body text. * * 2. Add a top-fading scrim under the header so even on a bright hero * image the area behind the nav guarantees ≥ 4.5:1 contrast. The * scrim is darkest at the top edge, fully transparent ~120px down, * so it doesn't affect hero visual weight below the header. */ /* Float the header OVER the hero (absolute position) so the navy hero * gradient bleeds to viewport top. Without this, the header stays in * normal flow above the hero and our white nav text reads as white-on- * white because the page bg (paper) shows through. * * Kadence ships a CSS rule for this on transparent-header bodies, but * its specificity is low enough that minor child-theme rules can knock * it back to static — define it here so it's deterministic. * * The contrast scrim that protects nav legibility lives INSIDE the hero * block (see 40-hero.css ::after) — it scrolls with the hero and fades * out, instead of floating permanently with the nav. */ body.transparent-header #main-header, body.mobile-transparent-header #main-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; z-index: 5; } body.transparent-header .site-header-wrap, body.transparent-header .site-header-inner-wrap, body.transparent-header .site-header-upper-wrap, body.transparent-header .site-header-row-container, body.mobile-transparent-header .site-header-wrap, body.mobile-transparent-header .site-header-inner-wrap, body.mobile-transparent-header .site-header-upper-wrap, body.mobile-transparent-header .site-header-row-container { background: transparent; } /* Hero pages: kill the top page-padding stack so the hero bleeds to the * viewport top edge. Without this, Kadence pushes the article down 80px * (header-spacer compensation) and the content-wrap adds another 32px, * producing a paper-colored band above the hero with the floating * header rendering as white-on-white inside it. * * The hero block itself reserves space for the floating nav via its * `padding-top: var(--header-height-overlap)` rule in 40-hero.css. */ body.transparent-header .content-wrap, body.transparent-header .entry.content-bg, body.transparent-header .entry-content-wrap, body.mobile-transparent-header .content-wrap, body.mobile-transparent-header .entry.content-bg, body.mobile-transparent-header .entry-content-wrap { padding-top: 0; margin-top: 0; } body.transparent-header.content-vertical-padding-show #main, body.mobile-transparent-header.content-vertical-padding-show #main { padding-top: 0; } /* Kadence ships `#primary { margin-top: 80px }` on transparent-header * pages as a header-height spacer — but our hero needs to start at * viewport top (0,0) so the header floats over it. The hero block * reserves its own header-height padding internally. */ body.transparent-header #primary, body.mobile-transparent-header #primary { margin-top: 0; } /* Specificity has to beat Kadence's `.site .header-navigation * .header-menu-container .menu-item > a` (0,4,2). Adding the body class * + .site prefix gets us to 0,5,2 — wins cleanly without !important. */ body.transparent-header .site .header-navigation .header-menu-container .menu-item > a, body.transparent-header .site .header-navigation .menu-item > a, body.transparent-header .site-branding a, body.transparent-header .site-title-wrap .site-title { color: var(--isjac-color-paper); } body.mobile-transparent-header .mobile-toggle-open, body.mobile-transparent-header .header-mobile-toggles button, body.mobile-transparent-header .menu-toggle-open, body.mobile-transparent-header .drawer-toggle { color: var(--isjac-color-paper); } /* Hover treatment for primary nav items only — utility buttons handle their * own hover state in the .isjac-utility--* rules below, and underlining a * button reads as off-brand (buttons aren't text links). The * `:not(.isjac-utility) > a` exclusion keeps the underline OFF the utility * row in both default and transparent-header surfaces. */ body.transparent-header .site .header-navigation .header-menu-container .menu-item:not(.isjac-utility) > a:hover, body.transparent-header .site .header-navigation .header-menu-container .menu-item:not(.isjac-utility) > a:focus-visible { color: var(--isjac-color-brand-wash); text-decoration: underline; text-underline-offset: 0.25em; } /* Hamburger icon strokes inherit currentColor in Kadence; force just in case. */ body.mobile-transparent-header .menu-toggle-open .menu-toggle-icon, body.mobile-transparent-header .drawer-toggle .menu-toggle-icon { color: var(--isjac-color-paper); } /* Mobile drawer (when opened) reverts to opaque/light surface so menu items * sit on a solid background — the floating-on-hero treatment only applies * to the closed nav bar. */ .mobile-drawer { background: var(--isjac-color-ink); } .mobile-drawer .menu-item > a { color: var(--isjac-color-paper); } /* ---------- Utility nav items (T-201/T-205) ---------- * The new "ISJAC Primary 2026" menu mixes 6 navigational items with 3 * utility CTAs (Sign in / Become a member / Donate) inside a single WP * menu — admin-friendly because it doesn't require a second theme location. * Authors mark utility items with `.isjac-utility` (and optionally * `.isjac-btn--primary`/`--secondary`) on the menu-item LI; CSS below * floats them right and applies button styling to the inner anchor. * * The first .isjac-utility item gets `margin-left: auto` so the whole row * pushes flush right — works inside Kadence's flex header without needing * a second nav slot. Long-term: when we add a separate "utility" theme * location, drop the auto-margin trick and remove these LI-to-A bridges. */ /* Spacing rhythm: * primary-nav ─── (auto) ─── Sign in ── (md) ── Member ── (sm) ── Donate * The auto-margin pushes the utility cluster flush right. Inside the cluster, * the text link sits a comfortable distance from the first button (md), and * the two buttons read as a paired call-to-action (sm). Tokens — no magic. */ .menu-item.isjac-utility { display: flex; align-items: center; } /* Push the cluster flush right: the FIRST utility item that follows a * non-utility nav item gets `margin-left: auto`. `:first-of-type` was the * old approach but it matches only when an .isjac-utility LI is literally * the first