/* FinanceProspector — Providers mega-menu — v1.1 COMPACT * ===================================================================== * SUPERSEDES v1.0's density treatment by explicit direction, 2026-09-01. * v1.0 shipped a 38.9px dropdown-row pitch and a 414.3px panel; that reads as * a large content panel, not the compact link-dense mega-menu this surface * needs for 28 links. The later compact-dropdown direction governs, and the * component is versioned rather than left knowingly wrong. * * WHAT v1.1 CHANGES, and nothing else: * outer border + radius removed - a nav dropdown is not a card * provider text-to-text pitch 38.9px -> 24.89px * category-heading rule removed - zero internal borders * category-group row gap 24px -> 12px * panel top/bottom padding 8px -> 4px * heading -> first provider 8px -> 2px * category label 13px -> 14px, traced to .fp-subnav__link * panel width header-width -> content width, 4 x 200px tracks * heading geometry NONE - natural flow, no reserved height, no forced wrap * * WHAT v1.1 DOES NOT CHANGE: 4 columns, 7 groups, 4 providers each, category * and provider order, category-heading typography (13/700), provider-link * typography (14/500), colours, panel surface, header geometry, keyboard * order, mobile disclosure architecture. No type shrunk, no name abbreviated, * no provider removed. * * PART 1 below is documents/providers-meganav-frozen-v1.0/providers-mega.css * copied byte-for-byte and retained as the v1.0 base; PART 1B applies the v1.1 * compaction; PART 2 is theme integration. * * PART 2 is theme integration only — behaviour hooks and the mobile tier that * a standalone artifact could not carry. It changes no frozen value. * ===================================================================== */ .site-header__inner{position:relative} .site-header__nav-list li.fp-has-mega{position:static} .site-header__nav-list li.fp-has-mega > ul.fp-mega{ display:grid !important; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:200; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-flow:row; gap:24px 24px; margin:0; padding:8px; list-style:none; background-color:#fff; border:1px solid #E5E7EB; border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,.07), 0 10px 20px rgba(0,0,0,.06); opacity:0; visibility:hidden; pointer-events:none; } .site-header__nav-list li.fp-has-mega.is-subnav-open > ul.fp-mega, .site-header__nav-list li.fp-has-mega:hover > ul.fp-mega, .site-header__nav-list li.fp-has-mega:focus-within > ul.fp-mega{ opacity:1; visibility:visible; pointer-events:auto; } .fp-mega__group{margin:0;padding:0;list-style:none;min-width:0} .fp-mega__cat{display:block;padding:0 16px 8px; font-size:13px;font-weight:700;line-height:1.35;letter-spacing:.01em;color:#173F73; border-bottom:1px solid #E5E7EB;margin:0 0 4px} .fp-mega__list{margin:0;padding:0;list-style:none} .fp-mega__item{margin:0;padding:0;list-style:none} .fp-mega__link{display:block;padding:10px 16px;font-size:14px;font-weight:500;line-height:1.35; color:#173F73;text-decoration:none;border-radius:6px} .fp-mega__link:hover{background:#F9FAFB} .fp-mega__link:focus-visible{outline:2px solid #2563EB;outline-offset:2px} /* ===================================================================== * PART 1B — v1.1 COMPACTION. Supersedes the v1.0 density values above. * ===================================================================== */ /* NO OUTER BORDER, NO RADIUS. A navigation dropdown is not a bordered content card. The radius existed only to round that border, so it goes with it. The governed shadow stays: it is what lifts the panel off the page, and it is not a border, outline or separator. Nothing replaces the removed border. */ .site-header__nav-list li.fp-has-mega > ul.fp-mega{ border:0; border-radius:0; padding:4px; /* panel top/bottom - v1.0 was 8px */ /* Row gap unchanged at 12px. COLUMN GAP 16 -> 0: the visible text-to-text gap is the link's 16px right padding + the column gap + the next link's 16px left padding. 16px of column gap therefore rendered 48px of white space between the text groups; 0 renders exactly 32px, which is the target. The link padding still keeps the text off the track edges, so the columns never touch. Content-sized track logic is untouched. */ gap:12px 0; /* CONTENT-WIDTH, NOT HEADER-WIDTH. v1.0 stretched the panel edge to edge with left:0; right:0 and four 1fr tracks, so every column got hundreds of pixels of unused width and the groups read as four islands. Each track is now max-content - exactly what its longest heading or provider name needs. The panel's right edge reuses the navigation's own anchor, site-header.css:114, so it sits under the nav instead of at the viewport edge. max-width keeps it inside the viewport at any width. */ left:auto; right:calc(max(0px, (100vw - 1092px) / 2) + 20px); width:max-content; max-width:calc(100vw - 40px); /* COMPACT FIXED TRACKS. max-content produced a 301px column purely to keep one long heading on a single line; 1fr stretched every column across the header. 200px is the practical compact width: 168px of content after the link's own 16px inline padding, which carries the longest provider name ("National Business Capital") on one line and lets the two long category headings wrap naturally. Same logic and same value at 1440 and 1024. */ /* CONTENT-SIZED TRACKS, ONE GAP. Four equal tracks stretched the short columns and made the VISIBLE text-to-text gaps unequal even though the CSS column-gap was constant. Each track is now exactly its own column's widest rendered item plus the link's 16px inline padding on each side, so every column's text touches both track edges at the same inset and all three visible gaps come out equal: 16px of right padding + the column gap + 16px of left padding. With the column gap at 0 that is exactly 32px. Widest item per column, measured from the CURRENT wrapped state - not from max-content, which would unwrap the long headings and enlarge the menu: C1 QuickBooks Online 124.44 -> 156.44px track C2 "Crypto & Digital Assets" 149.80 -> 181.80px track (heading line) C3 National Business Capital 167.41 -> 199.41px track C4 GoCardless 76.41 -> 108.41px track Same values at 1440 and 1024. */ grid-template-columns:156.44px 181.8px 199.41px 108.41px; /* Groups stretch to the grid row so the heading can bottom-align inside it. This adds no height: the row was already as tall as its tallest group. */ align-items:stretch; } /* NO CATEGORY-HEADING RULE and a tight heading block. The heading is a label above its four links, not a section header with a divider. TYPOGRAPHY TRACED TO THE EXISTING NAV DROPDOWN, not defined independently: .fp-subnav__link (site-header.css:335-345) computes to 14px / 500 / 18.9px / letter-spacing normal / rgb(23,63,115). The provider links already match it exactly. The category label takes the same 14px and 18.9px at the governed heading weight 700 - LARGER than the 13px it carried, never smaller. All compaction here comes from spacing. */ .fp-mega__cat{ /* 13px / 700. Reuse does not mean flattening hierarchy: the provider links take the existing dropdown-link treatment at 14px / 500, and the category label stays one step down in size and one step up in weight so the group reads as a label over a list. line-height is the same 1.35 convention the navigation uses, which at 13px resolves to 17.55px. */ font-size:13px; line-height:1.35; letter-spacing:normal; padding:0 16px 2px; border-bottom:0; margin:0; /* inline matches the link */ } /* COMPACT TEXT-NAVIGATION RHYTHM. The Providers Index is a page and holds a 30.80px pitch; this is a dropdown carrying 28 links and does not need the same vertical density. The type is untouched at 14px / 1.35, which Chrome resolves to an 18.889px line box; 3px of padding top and bottom gives a 24.89px rendered pitch. The padded row keeps the governed hover and focus affordance a bare text link would lose. */ /* Inline padding is the governed .fp-subnav__link inset, 16px. The 8px trial from the previous pass is reverted: link padding is not the mechanism for column spacing. Vertical 3px unchanged -> 24.90px pitch. */ .fp-mega__link{ padding:3px 16px; } /* ── REUSE BEFORE INVENTION ────────────────────────────── * Every value below is copied from the existing Categories dropdown * (.fp-subnav__link, site-header.css:335-360), which is the governed * navigation-link treatment. Nothing here is component-specific. * * ⚠ REPORTED, NOT INVENTED: the reference declares a SYSTEM font stack with no * Inter. Matching it faithfully is what the reuse rule requires, so the * Providers links now render in the same face as the Categories dropdown. If * the intent is that navigation dropdowns should be Inter like the rest of the * site, the fix belongs in .fp-subnav__link and both surfaces move together - * flagged for decision rather than silently diverging here. */ .fp-mega__link, .fp-mega__cat{ font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* v3.56.0: Inter, with .fp-subnav__link */ } .fp-mega__link{ color:var(--fp-color-navy); /* v3.57.191 - ONLY the properties the hover/focus state changes, as .fp-subnav__link since v3.57.76. The shorthand was `150ms ease` on ALL properties, including the visibility each link inherits from the panel, so on opening the first provider link could still be visibility:hidden and refuse keyboard focus (intermittent Arrow Down miss). */ transition:background-color var(--fp-button-transition), color var(--fp-button-transition); border-radius:0; /* the reference has none */ } /* Governed hover: gray-50 background AND the blue colour swap. The colour is re-asserted on every state for the same reason the reference does it - GeneratePress emits its own a:hover colour at equal specificity, later in source order. */ .fp-mega__link:hover, .fp-mega__link:focus{ background-color:var(--fp-color-gray-50); color:var(--fp-color-blue); } .fp-mega__link:visited{ color:var(--fp-color-navy); } /* Governed focus ring: 2px blue at offset -2px, inset like the reference, not the +2px an independently-defined component would have used. */ .fp-mega__link:focus-visible{ outline:2px solid var(--fp-color-blue); outline-offset:-2px; } .fp-mega__cat{ color:var(--fp-color-navy); font-weight:var(--fp-weight-heading); } /* ── BOTTOM-ALIGNED HEADINGS ───────────────────────────── * Within a grid row every provider list must start on the same Y. The heading * is aligned from its BOTTOM edge, immediately above its own list, so a * wrapped heading spends its second line UPWARD and never pushes its list * down. * * Two rows per group: 1fr absorbs whatever the row is taller than this group, * and the heading sits at the END of it. NOTHING IS RESERVED - no min-height, * no fixed height, no extra padding under one-line headings, no larger row * gap. The grid row was already as tall as its tallest group, so the panel * does not grow by a pixel. */ .fp-mega__group{ display:grid; grid-template-rows:1fr auto; } .fp-mega__cat{ align-self:end; } /* ===================================================================== * PART 2 — INTEGRATION. Not part of the frozen artifact. * ===================================================================== */ /* ── The governed dismiss flag ─────────────────────────── * The header JS closes a panel by adding .is-subnav-dismissed, because a real * click or Escape leaves focus ON the trigger, which sits INSIDE the item — so * :focus-within keeps matching and a rule that only removes .is-subnav-open * cannot win. Every other dropdown in this theme carries this guard; the * frozen artifact was authored standalone and had no JS to guard against. * Same specificity as the :hover / :focus-within rules above and declared * after them, so it wins on source order without !important. */ .site-header__nav-list li.fp-has-mega.is-subnav-dismissed > ul.fp-mega{ opacity:0; visibility:hidden; pointer-events:none; } /* ── "All Providers" row: mobile only ──────────────────── * The desktop trigger is a real link to /providers/, so the row would be a * duplicate destination in the panel. Below 1024 the trigger becomes a * disclosure and stops navigating, which is why the row exists at all. */ .fp-mega__group--all{display:none} /* ── Mobile / tablet: in-flow accordion, not a floating panel ────────── * Below 1024 the header is the hamburger menu and the panel is part of the * document flow. Geometry follows the frozen mobile specification: 44px on * every control, one category open at a time, full provider names, an explicit * All Providers row, and never a flat 28-item list. */ @media (max-width: 1023.98px){ .site-header__nav-list li.fp-has-mega{position:static} .site-header__nav-list li.fp-has-mega > ul.fp-mega{ display:block !important; position:static; grid-template-columns:none; gap:0; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background-color:#F9FAFB; opacity:1; visibility:visible; pointer-events:auto; max-height:0; overflow:hidden; } .site-header__nav-list li.fp-has-mega.is-subnav-open:not(.is-subnav-dismissed) > ul.fp-mega{ max-height:none; } .fp-mega__group{border-top:1px solid #E5E7EB} /* The category label is upgraded to a real