/* * Bridge: let the approved Nuxt shell sit on a Blade page. * * approved-shell.css is loaded UNCHANGED from the Nuxt build — nothing here * overrides it. This file only resolves collisions between that stylesheet and * the legacy Blade page styles that were written when the signed-in area had * its own chrome. * * Keep it small. Anything that grows here is a signal the page beneath should * change, not the shell. */ /* The approved header is position:fixed at --approved-shell-height. Blade pages were laid out under a static header, so without this the first section sits behind it. */ body.has-approved-shell main#main-content { /* --rd-header-h is the variable the approved shell actually publishes (66px at the time of writing); the literal is only a floor for the moment before CSS applies. Measured, not guessed. */ padding-top: var(--rd-header-h, 66px); } /* The legacy floating chrome belongs to the old shell and duplicates controls the approved header already provides. */ body.has-approved-shell .mobile-menu-toggle, body.has-approved-shell .dashboard-hamburger { display: none !important; } /* Bootstrap sets a global box-sizing and heading scale that the Nuxt shell assumes for itself; scope the reset so the shell measures as designed. */ body.has-approved-shell .site-header *, body.has-approved-shell .site-footer * { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { body.has-approved-shell .site-header { transition: none !important; } } /* * Open state for a CLICK-driven mega menu. * * approved-shell.css reveals a desktop menu on * `.mega-nav-item:focus-within > .mega-menu` — correct for the Vue original, * where hovering and keyboard focus drive it. On a Blade page the menu is * opened by a click handler, and :focus-within is unreliable for that: it * requires the document itself to hold focus, so a click that moves focus * elsewhere (or a programmatic open) leaves the panel at opacity 0 with its * full height — visually "the menu does nothing". * * approved-shell.js adds .is-open alongside aria-expanded, and this makes that * the authority. It does not override the closed state or the transition — it * supplies the open state the click path needs. */ body.has-approved-shell .site-header .mega-nav-item.is-open > .mega-menu, body.has-approved-shell .site-header .mega-nav-item.is-open > .nav-dropdown, body.has-approved-shell .site-header .nav-item.is-open > .nav-dropdown { /* !important on purpose. The closed state is set by several overlapping rules in approved-shell.css (.mega-menu AND .nav-dropdown), and the open state there is gated on :focus-within, which a click path cannot rely on. This is a deliberate, scoped override of a focus rule for a click context — not a specificity race being won by force. */ clip-path: inset(0) !important; transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; } /* ---- Nav hover, and the logo ----------------------------------------------- THE ACTUAL CAUSE, found 18 Aug 2026 after two wrong guesses. public/assets/css/styles.css carries a bare, unscoped rule: header a:hover { color: #fff; } Every anchor inside any
. The Nuxt homepage never loads styles.css, so it has never seen it; the account pages load the legacy bundle AND the approved shell, so the shell's nav inherits a white hover on a white bar — measured at 1:1 contrast. Two of my own changes are what exposed it. The mega menus were flattened from