/** * Which navigation item is the current one. * * The header is a single Elementor Theme Builder template, so its markup is written * once and reused on every page. That leaves nowhere in the stored layout to say * "this item is current" — whichever item were given the active classes there would * claim to be current site-wide, which is exactly what happened while the homepage * was the only page that existed. * * So the answer comes from the request instead: functions.php puts bff-section- * and bff-page- on (bff_current_section()), 06-chrome.php gives each * item a matching bff-nav-, and the pairs below apply the reference's active * treatment. Server-rendered, so unlike a JavaScript pass there is no first paint * with the wrong item lit. * * The declarations are the reference's own, transcribed from its active item: * * pill bg-white/95 text-slate-900 shadow-md shadow-slate-900/[0.06] * ring-1 ring-slate-200/60 * underline absolute bottom-1 left-3 right-3 h-[3px] rounded-full * bg-gradient-to-r from-primary to-secondary opacity-90 * submenu bg-sky-50 text-secondary * * Loaded after app.css so these win over the idle utilities on the same element. */ /* The underline ships on every item and is revealed only on the current one. */ .bff-nav-underline { display: none; } /* "About us" has no of its own — its label is a span — so that span has to be the positioning context for the underline inside it. */ .bff-nav-parent { position: relative; } /* The section-to-item mapping, written out rather than generated: the navigation is a fixed list, and an explicit table is greppable from either end. */ body.bff-section-home .bff-nav-home > a, body.bff-section-services .bff-nav-services > a, body.bff-section-advocacy .bff-nav-advocacy > a, body.bff-section-news .bff-nav-news > a, body.bff-section-events .bff-nav-events > a, body.bff-section-get-involved .bff-nav-get-involved > a, body.bff-section-contact .bff-nav-contact > a, body.bff-section-about-us .bff-nav-about-us .bff-nav-parent { background-color: #fffffff2; color: var(--color-slate-900); /* shadow-md, then ring-1 as the outermost shadow layer. */ box-shadow: 0 4px 6px -1px #0f172b0f, 0 2px 4px -2px #0f172b0f, 0 0 0 1px #e2e8f099; } body.bff-section-home .bff-nav-home .bff-nav-underline, body.bff-section-services .bff-nav-services .bff-nav-underline, body.bff-section-advocacy .bff-nav-advocacy .bff-nav-underline, body.bff-section-news .bff-nav-news .bff-nav-underline, body.bff-section-events .bff-nav-events .bff-nav-underline, body.bff-section-get-involved .bff-nav-get-involved .bff-nav-underline, body.bff-section-contact .bff-nav-contact .bff-nav-underline, body.bff-section-about-us .bff-nav-about-us .bff-nav-underline { display: block; opacity: 0.9; } /* The submenu marks the exact page, not just the section. */ body.bff-page-about .bff-nav-child-about > a, body.bff-page-letter .bff-nav-child-letter > a, body.bff-page-board .bff-nav-child-board > a { background-color: var(--color-sky-50); color: var(--color-secondary); }