/* ============================================================ NAV POLISH — load ONLY for the base theme (CssID == base). Every selector is scoped under .theme-base (set on by the _Campaign-1/2 layout when IsBaseTheme), so even if this file is ever pulled in on a legacy theme it stays completely inert. Palette/font-agnostic: inherits themed values (currentColor / no font rules) or reads optional variables emitted only for base-theme sites. ============================================================ */ /* ------------------------------------------------------------ 0. (Optional) Knobs the generator can fill in FOR BASE-THEME SITES. :root { --nav-accent: ; } :root { --nav-link-color: ; } If absent, the fallbacks below keep everything working. ------------------------------------------------------------ */ /* ------------------------------------------------------------ 1. Hover / focus underline (currentColor = the link's themed color). ------------------------------------------------------------ */ .theme-base #navigation .menu > li:not(.nav-highlight) > a { position: relative; } .theme-base #navigation .menu > li:not(.nav-highlight) > a::after { content: ''; position: absolute; left: clamp(8px, 1.2vw, 16px); /* matches the themed link padding */ right: clamp(8px, 1.2vw, 16px); bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease; } .theme-base #navigation .menu > li:not(.nav-highlight) > a:focus-visible::after { transform: scaleX(1); } /* ------------------------------------------------------------ 1a. Dropdown panel shape & sizing. ------------------------------------------------------------ */ .theme-base #navigation .menu ul { border-radius: 0 !important; min-width: 250px; } /* Hide the box-shadow on the side that connects back to the parent dropdown. Right-opening flyouts clip the left edge; left-opening (.flyout-left) flyouts clip the right edge. The -20px overflow on the other three sides is generous enough for any theme shadow. */ .theme-base #navigation .menu li.has-submenu > ul:not(.flyout-left) { clip-path: inset(-20px -20px -20px 0); } .theme-base #navigation .menu li.has-submenu > ul.flyout-left { clip-path: inset(-20px 0 -20px -20px); } /* Drop the theme's hover BACKGROUND swap (transparent = show nav bg). The .menuHover half covers the class nav-enhancements.js adds to the
  • on hover/open. The hover FONT COLOR still comes from the theme; to also remove it, emit --nav-link-color for base sites and uncomment the rule in section 1b below. */ /* The .menuHover class is added by nav-enhancements.js on hover/open. Keep it working always; the CSS :hover half is in the pointer block. */ .theme-base #navigation .menu > li:not(.nav-highlight).menuHover { background-color: transparent !important; } /* Right-align top-level dropdowns that would overflow the viewport. The .dropdown-align-right class is toggled by nav-enhancements.js. */ .theme-base #navigation .menu > li > ul.dropdown-align-right { right: 0; left: auto; } /* ------------------------------------------------------------ 1b. (Optional) Make hover font color == the non-hover color. Requires :root{--nav-link-color:…} to be emitted for base sites; without it this degrades to inherit (wrong), so it stays commented until the variable exists. ------------------------------------------------------------ */ /* .theme-base #navigation .menu > li:not(.nav-highlight) > a:hover { color: var(--nav-link-color) !important; } */ /* ------------------------------------------------------------ 2. Current-page indicator. ------------------------------------------------------------ */ .theme-base #navigation .menu > li:not(.nav-highlight) > a[aria-current="page"] { color: var(--nav-accent, inherit); } .theme-base #navigation .menu > li:not(.nav-highlight) > a[aria-current="page"]::after { transform: scaleX(1); } /* ------------------------------------------------------------ 3. Fix the dead "Contribute" / amount-button hover via brightness() so it lightens whatever themed background the button has. ------------------------------------------------------------ */ .theme-base ul.menu li.nav-highlight a { transition: filter 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease; } .theme-base ul.menu li.nav-highlight a:active { transform: translateY(0); box-shadow: none; filter: brightness(1.04); } .theme-base .amountLink { transition: filter 0.25s ease, transform 0.3s ease; } /* ------------------------------------------------------------ 4. Keyboard focus ring. ------------------------------------------------------------ */ .theme-base #navigation .menu a:focus-visible, .theme-base #navigation .menu-toggle:focus-visible { outline: 2px solid var(--nav-accent, currentColor); outline-offset: 3px; border-radius: 2px; } .theme-base ul.menu li.nav-highlight a:focus-visible { outline-color: var(--nav-accent, rgba(0, 0, 0, 0.6)); } /* ------------------------------------------------------------ 5. Keyboard-openable dropdowns (CSS half; JS handles the rest). ------------------------------------------------------------ */ .theme-base #navigation .menu > li:focus-within > ul { visibility: visible !important; } /* ------------------------------------------------------------ 5½. Pointer-device hover effects. All visual hover feedback gated so touch devices don't get sticky hover states. ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { /* Underline sweep on hover */ .theme-base #navigation .menu > li:not(.nav-highlight) > a:hover::after { transform: scaleX(1); } /* Transparent bg on hover (matches base theme) */ .theme-base #navigation .menu > li:not(.nav-highlight) > a:hover { background-color: transparent !important; } /* Donate / nav-highlight lift + brighten */ .theme-base ul.menu li.nav-highlight a:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22); text-decoration: none !important; } /* Amount link brighten */ .theme-base .amountLink:hover { filter: brightness(1.06); text-decoration: none !important; } } /* ------------------------------------------------------------ 6. Respect reduced-motion preferences. (The close-button reset moved to nav-base.css — it applies to all themes, since the