/* gh#VK13: every page loads this sheet, so the hidden attribute wins here once, for good. A component's own display rule (grid, flex) otherwise beats it and shows what should hide. */ [hidden]{display:none !important} /* ── the masthead OWNS its palette ────────────────────────────────────────────────── Single source of truth: this partial is included by 28 templates, and it used to read --ink / --ink-2 / --green / --green-soft / --rule / --faint with NO fallback, so the shared chrome rendered in whatever colours the HOST page happened to define — and in whatever colours it did NOT define, it rendered invalid. Declaring the palette here, on the partial's own root, makes the masthead identical on every page by construction instead of by convention. These are the standard 990 Scout tokens (green-led accent #1f6b4a, the Ledger redesign's --accent value; the masthead's own copy drifted from _tokens.html's after that rename and every page's header rendered a visibly different green from its body content); the values are the same ones previously duplicated as inline fallbacks throughout this file. */ .mhead{ --ink:#1a1c19; --ink-2:#3a3f3a; --muted:#6b7280; --faint:#9aa39a; --rule:#e6e8e3; --rule-2:#f4f5f2; --green:#1f6b4a; --green-soft:#e7efe8; --paper:#faf7f1; /* gh#4708 — this site's own warm neutral (_tokens.html's --paper), not philanthropy.org's #EEEEEE; the masthead owns a copy like every other colour above so the band renders identically regardless of the host page's own tokens. */ /* gh#5453: the phone drawer's own two values, declared here with the rest rather than inlined as raw rgba() in the rules below -- same reason every colour above is a token. Both are derived from --ink (#1a1c19), the scrim at 42% and the drawer's edge shadow at 16%, so the drawer stays on the palette if --ink ever moves. */ --scrim:rgba(26,28,25,.42); --drawer-shadow:-14px 0 34px rgba(26,28,25,.16); /* gh#6491: the greeting's "not yet verified" dot. Same terracotta as design_tokens.py's --accent-warm -- not imported (this partial owns its own palette, see the file header), just the same hex so an "attention" cue reads the same way it does everywhere else on the site that isn't plain green/ink. */ --warn:#a6472a; /* IBM Plex Mono is the design system's label/data face (design_tokens.py's --mono); the drawer's group labels are labels, so they take it rather than a bare ui-monospace. */ --mono:"IBM Plex Mono",ui-monospace,'SF Mono',Menlo,Consolas,monospace; } /* ── full-bleed header band, painted in this site's own warm paper (gh#4708) ──────── box-shadow paints the fill; clip-path lets it bleed left/right (-100vmax) and UP (-300px, to cover the wrap's top padding and reach the page top) while clipping it at the band's own bottom. box-shadow never affects layout, so no scrollbars, any wrap. */ .mhead{position:relative;padding:5px 0 9px;margin-bottom:14px} /* Paint the full-bleed band on a pseudo-element, NOT on .mhead itself: clip-path clips descendants, so clipping .mhead would crop the dropdown menus that open below the bar (top:100%). The ::before carries the bleed + clip; the menus overflow .mhead freely. */ .mhead::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper); box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(-300px -100vmax 0 -100vmax)} /* utility row — small links + Sign-in button, top-right, above the nav */ /* gh#5453: flex-WRAP, not nowrap. This row is right-anchored, so once its items are wider than the viewport the overflow is silent in BOTH directions -- gh#4527 saw items pushed off the LEFT edge; Reif's 2026-09-12 phone screenshot caught "Sign out" sliced off the RIGHT. Neither produces a scrollbar or an ellipsis, and the row cannot even report it (scrollWidth == clientWidth at every width, because the row's box is sized by its parent while its children spill past the screen). Six stacked breakpoint rules below used to delete one more item until the row happened to fit, each tuned to the width and auth state of the bug that prompted it -- which is why every new item re-broke it, and why a signed-in VERIFIED member was never covered. Wrapping makes a too-wide row two short lines instead of one clipped line, which no future item can break. row-gap is tighter than column-gap so a wrapped second line reads as part of the same row rather than as a new band. */ .mutil{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center; gap:6px 10px;width:100%;font-size:12.5px} .mutil a{color:var(--ink-2);font-weight:600;white-space:nowrap;text-decoration:none} .mutil a:hover{color:var(--green)} .mutil .msep{color:var(--faint);font-weight:400} /* "Sign in" styled as the parent's slate login button (far-right corner) */ .mutil .msignin{display:inline-flex;align-items:center;position:relative;background:#5f6a74; color:#fff;padding:8px 16px;border-radius:5px;font-weight:700;font-size:12.5px;line-height:1; margin-left:4px} .mutil .msignin:hover{background:#49525b;color:#fff} /* gh#6491: the ONE "not yet verified" affordance on the signed-in row -- a dot on the greeting, not a fourth text link. `position:relative` above anchors it to the "Sign in"/greeting pill either way; it only ever renders a visible dot on the greeting instance, since the anon "Sign in" pill has no `.mgreet-dot` child at all. */ .mgreet-dot{position:absolute;top:2px;right:2px;width:7px;height:7px;border-radius:50%; background:var(--warn);box-shadow:0 0 0 2px #5f6a74} /* The drawer's copy sits inline after plain page-background text, not on the grey Sign-in/greeting pill, so it drops the absolute position + pill-colored ring above. */ .mdrawer-dot{position:static;display:inline-block;margin-left:6px;vertical-align:middle; box-shadow:0 0 0 2px var(--paper)} /* "Sign out" — secondary to the Account button (Reif: ONE entry point is the hub), so it's plain text, not a second slate button. Real
, not an : the route is POST-only (CSRF-prone as a GET, and a prefetch/crawler could trigger a bare link). */ .mutil .msignout{display:inline-flex;margin:0;padding:0;border:0;background:none} .mutil .msignout button{background:none;border:0;padding:0;margin:0;font:inherit; color:var(--ink-2);font-weight:600;font-size:12.5px;white-space:nowrap;cursor:pointer} .mutil .msignout button:hover{color:var(--green)} /* notification bell - a followed org filed/updated since the member last checked */ .mutil .mbell{position:relative;display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:7px;color:var(--ink-2,#3a3f3a)} .mutil .mbell:hover{background:var(--green-soft,#e7efe8);color:var(--green,#1f6b4a)} .mutil .mbell svg{width:17px;height:17px} .mutil .mbell-badge{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 3px; border-radius:8px;background:var(--green,#1f6b4a);color:#fff;font-size:9.5px;font-weight:800; line-height:15px;text-align:center;box-shadow:0 0 0 2px var(--paper)} /* gh#3606: bell click opens this dropdown instead of navigating straight to the watchlist. Wrapper carries the position:relative anchor point (NOT .mbell itself, since an cannot legally contain another and every row below is one) -- same absolute-panel shape as .mmenu/.msac above, same tokens. */ .mutil .mbell-wrap{position:relative;display:inline-flex} .mutil .mbell-menu{position:absolute;top:calc(100% + 6px);right:0;width:300px;max-height:360px; overflow-y:auto;background:#fff;border:1px solid var(--rule,#e6e8e3);border-radius:12px; box-shadow:0 12px 34px rgba(26,28,25,.16);z-index:45;text-align:left} .mutil .mbell-item{display:block;padding:9px 14px;border-top:1px solid var(--rule-2,#f4f5f2); text-decoration:none} .mutil .mbell-item:first-child{border-top:0} .mutil .mbell-item:hover{background:var(--green-soft,#e7efe8)} .mutil .mbell-subject{display:block;font-size:12.5px;font-weight:700;color:var(--ink,#1a1c19); white-space:normal} .mutil .mbell-time{display:block;font-size:11px;color:var(--muted,#6b7280);margin-top:2px} .mutil .mbell-empty,.mutil .mbell-error{padding:20px 14px;text-align:center;font-size:12px; color:var(--muted,#6b7280)} .mutil .mbell-viewall{display:block;padding:9px 14px;text-align:center;font-weight:700; font-size:12.5px;color:var(--green,#1f6b4a);text-decoration:none; border-top:1px solid var(--rule-2,#f4f5f2)} .mutil .mbell-viewall:hover{background:var(--green-soft,#e7efe8)} /* main row: the 990 Scout brand lockup left, nav pills pushed right */ .masthead{display:flex;align-items:center;gap:18px;width:100%;padding:1px 0 0} /* The 990 Scout SVG wordmark IS the logo: burgundy "990 SCOUT" with the gold magnifier glyph, sized by height so it scales crisply. The "by philanthropy.org" subtitle sits baseline-aligned beside it. Colors are baked into the SVG (burgundy #441b23 + gold #ccb591): loaded via , external CSS `color` can't reach inside it, so currentColor is not used here. */ .masthead .mbrand{display:flex;flex-direction:row;align-items:baseline;gap:11px;line-height:1.04;white-space:nowrap;text-decoration:none} .masthead .mbrand-logo{height:48px;width:auto;display:block;transition:opacity .12s} .masthead .mbrand-logo.jobs{height:48px} /* same 75-tall viewBox as Scout's lockup */ .masthead .mbrand:hover .mbrand-logo{opacity:.82} .masthead .mnav{margin-left:auto;display:flex;align-items:center;gap:22px} .masthead .mdoors{display:flex;align-items:center;gap:22px} /* vertical padding makes the door a taller hover target so there's no flicker */ .masthead .mdoor{position:relative;padding:6px 0} /* nav links GREEN like the parent header */ .masthead .mdoor-lk{font-size:14px;font-weight:600;color:var(--green);cursor:pointer;white-space:nowrap;text-decoration:none} .masthead .mdoor-lk:hover{color:var(--ink)} /* active section: the door you're on is highlighted (bold) */ .masthead .mdoor.on > .mdoor-lk{color:var(--green);font-weight:700} /* Reif 2026-10-08 "drop down arrows better": a real chevron, not a 10px faded glyph; it flips up while its menu is open. */ .masthead .mcaret{display:inline-block;width:.7em;height:.7em;margin-left:4px;vertical-align:.05em; fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease} .masthead .mdoor:hover .mcaret,.masthead .mdoor:focus-within .mcaret{transform:rotate(180deg)} /* CSS-only dropdown, revealed on hover/focus — hrefs always in source. */ .masthead .mmenu{position:absolute;top:100%;right:0;min-width:200px;background:#fff; border:1px solid var(--rule);border-radius:10px;padding:6px; box-shadow:0 8px 28px rgba(26,28,25,.14);display:none;z-index:30} .masthead .mdoor:hover .mmenu,.masthead .mdoor:focus-within .mmenu{display:block} /* invisible hover BRIDGE over the gap between trigger and menu, so the cursor can travel down into the menu without it closing (present only while hovering). */ .masthead .mdoor:hover::after{content:"";position:absolute;top:100%;right:0;width:200px;height:14px} .masthead .mmenu a{display:block;padding:8px 12px;border-radius:7px;font-size:13.5px;color:var(--ink-2);white-space:nowrap;text-decoration:none} .masthead .mmenu a:hover{background:var(--green-soft);color:var(--green)} /* mobile: utility row stays right; logo on row 1, nav doors wrap below full-width */ @media(max-width:600px){ .mhead{padding:5px 0 9px} .masthead{gap:10px 14px;flex-wrap:wrap;padding:2px 0 0} .masthead .mbrand-logo{height:29px} .masthead .mbrand-logo.jobs{height:35px} .masthead .mnav{margin-left:auto;gap:14px} .masthead .mdoors{gap:16px;order:3;width:100%;margin-top:4px} .masthead .mmenu,.masthead .mdoor:hover::after{left:0;right:auto} /* gh#4527: .mutil is an unwrapped flex-end row with no responsive rule, so once its items' combined width exceeds the viewport, the right-anchored flex pushes the LEFTMOST items off the left edge -- silently, no ellipsis, no scroll affordance (confirmed off-screen at 390/375/360/320px). Drop the redundant self-link first (the logo below already says "990 Scout by philanthropy.org"); Sign in/Verify yourself stay visible -- they're the only conversion-relevant items in this row. */ .mutil .mself,.mutil .mself + .msep{display:none} } /* gh#4527 follow-up: dropping .mself alone only clears the overflow down to 390px -- at 375/360/320px "990 Resource" (now the leftmost visible item) still clips off the left edge (measured x:-6.125/-21.125/-61.125). Same fix, next item in line: drop it and its separator too, narrower breakpoint since it's still needed above 380px. Sign in/Verify yourself are still untouched -- they're the last things this row gives up. */ @media(max-width:380px){ .mutil .mres,.mutil .mres + .msep{display:none} } /* gh#5453 (fix 1, VP round 2): tuned for the signed-in-UNVERIFIED row, which used to carry a standalone "Verify yourself" link AND a standalone "Network" link alongside HQ, the bell, and Sign out -- five items past the brand links, wide enough to clip at 320/360/390/414px where the anon/verified rows fit fine. gh#6491 removed both of those standalone items (Verify yourself is now a dot on the greeting; Network moved onto HQ's own rail), so every signed-in row is the same width as the signed-in-verified row always was -- the extra early shedding this block used to need is gone with the items it was shedding for. Kept as the general 380px mres/mfaq rule above (line ~182), same as anon. */ @media(max-width:600px){ .mutil:has(form.msignout:not([hidden])) .mres, .mutil:has(form.msignout:not([hidden])) .mres + .msep, .mutil:has(form.msignout:not([hidden])) .mfaq{display:none} } /* gh#5436: the product-nav row (People/Nonprofits/Funders/Vendors) is a nowrap flex row whose four doors plus their 16px gaps measure ~305px inside a 286px content box at a 320px viewport, so "Vendors" and its dropdown caret were cut off. On most pages that showed as a horizontal scroll; on the front page, whose .sheet carries overflow:hidden, the door was simply gone with nothing to reveal it. Let the row wrap at that width -- two doors over two lines beats four doors with one missing. The breakpoint is below the 380px and 424px rules above, so every width they were tuned at is untouched. */ @media(max-width:360px){ .masthead .mdoors{flex-wrap:wrap;gap:10px 16px} } /* ── the phone header: one icon row + a drawer (gh#5453 round 2) ─────────────────── Reif's reference is the standard mobile-app header -- a short row of icon tap targets with a hamburger on the end -- and the instruction was "we need the drawer concept". Desktop keeps the row it has always had; everything here is under 700px. Why 700 and not 600: between those widths the brand and nav still had room, but the signed-in strip was already the widest thing in the header. */ /* The drawer trigger only exists on a phone. */ .mutil .mdrawer-btn{display:none} .mdrawer,.mdrawer-scrim{display:none} @media(max-width:700px){ /* One row: the wordmark on the left, tap targets on the right, on the same optical line. .mhead is already position:relative, so pinning the strip here takes it out of the vertical stack entirely rather than shrinking a band that should not exist. gh#7600 (Reif: "990 SCOUT logo sits higher than Verify/Sign in/menu"): `top:9px` centered .mutil's OWN box, not its tallest child (the 44px hamburger) against the logo's box (.mhead padding-top 6px + .masthead padding-top 1px + 30px logo / 2 = ~22px center) -- the 44px button centered at 9+22=31px, 9px below the logo's center. `top:0` centers the hamburger's 44px box on that same ~22px line (0+22=22px), independent of either element's own height, so this stops drifting the next time the logo or icon sizes change. */ .mutil{position:absolute;top:0;right:0;width:auto;gap:0 2px;z-index:6; justify-content:flex-end;align-items:center} /* .mutil being out of flow means .mhead's own height no longer accounts for it, so whatever follows the masthead in normal flow can render UNDER it instead of below it. Measured live (gh#6635): .mutil's tallest child is the 44px hamburger at top:9px, so its box reaches y=53 from .mhead's top -- on landing.html, whose claim CTA row pulls up to sit right under the masthead (`.claimrow{margin-top:-14px}`), that put "Claim your page" at y=36-66, with the hamburger and Sign in pill drawn on top of its top ~18px and physically intercepting the click (Playwright: "
subtree intercepts pointer events", 6s click timeout). A min-height on .mhead reserves the room .mutil actually needs so nothing rendered after the masthead can sit under it, instead of each page having to know .mutil's own box size and stay clear of it. */ .mhead{min-height:56px} /* Words become icons. Every text link in this row is in the drawer instead -- nothing is removed from the page, and the drawer lists more than the row ever showed. gh#6491 removed the standalone Network link and the signed-in-unverified "Verify yourself" link from the markup outright (rather than just hiding them here), so they're gone from this selector list too. */ .mutil .mself,.mutil .mres,.mutil .mfaq,.mutil .msep, /* Anonymous "Verify yourself" STAYS as a word next to Sign in, same reasoning: the two conversion paths are the only things in this row a cold visitor is here to find -- pinned by test_masthead_overlaps_wordmark_gh6071.py::test_sign_in_survives_the_narrowest_phone (the finer-grained per-item tests this comment originally cited were folded into that file by the 2026-09-17 test-suite cut, #6471). */ .mutil > form.msignout, /* The signed-in account button goes -- the drawer greets the member by name and holds Account. "Sign in" STAYS: it is the conversion path for a cold visitor and the one control that must never hide behind a hamburger. */ .mutil .msignin[data-auth="user"]{display:none} .mutil .mdrawer-btn{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer; color:var(--ink);border-radius:8px} .mutil .mdrawer-btn svg{width:22px;height:22px} .mutil .mdrawer-btn:hover,.mutil .mdrawer-btn[aria-expanded="true"]{background:var(--green-soft)} /* 44px is the platform floor for a thumb; the bell was a 12.5px text-row control. */ .mutil .mbell{width:44px;height:44px;border-radius:8px} .mutil .mbell:hover{background:var(--green-soft)} /* The product nav is the SECOND row, and it is the one that has to go: four doors that wrap, under a strip that wraps, under nothing a phone reader asked for. They are in the drawer's Browse group, spelled out in words at 16px -- a better target than a 12.5px caret pill ever was. What is left is ONE row: wordmark, bell, hamburger. gh#4994: `.mutil` (bell + hamburger) is position:absolute and outside this flex row entirely, so "one row" was never about `.masthead`'s own flex children -- with `.mdoors` hidden, they are just `.mbrand` and `.msrch`. Forcing `flex-wrap:nowrap` here silently overrode the older `@media(max-width:600px){.masthead{flex-wrap:wrap}}` rule (this block comes later in the file, same specificity) for every width this block also matches -- i.e. everywhere below 600px too -- which is what let `.msrch`'s own `flex:1 0 100%` collapse rule (line ~459) go dead: the row could no longer wrap, so the search box just shrank against its `min-width:210px` floor until it overflowed the viewport instead. Signed-in pages under 700px wide have been shipping a horizontal-scroll bug since gh#5453 landed; caught here because #4994 happened to touch a template that includes this masthead. `wrap` restores the search box's own row without touching `.mutil`, which was already out of flow. */ .masthead{padding-top:1px;flex-wrap:wrap;gap:10px} .masthead .mdoors{display:none} .masthead .mnav{margin-left:auto} .mhead{padding:6px 0 8px} .masthead .mbrand-logo{height:30px} /* ── the drawer itself. Right-hand slide-in, because the trigger is on the right and a panel should come from the edge the finger touched. */ .mdrawer-scrim{display:block;position:fixed;inset:0;z-index:60; background:var(--scrim);opacity:0;transition:opacity .22s ease} .mdrawer-scrim.on{opacity:1} /* The drawer itself does NOT scroll -- .mdrawer-body does. An unverified member has one more row than a verified one ("Verify yourself"), which pushed the whole column 30px past the fold: Sign out measured bottom 852 in an 844px viewport, sliced by the bottom edge exactly as it was sliced by the right edge in gh#5453's original report. Scrolling the body and pinning Sign out below it means the one control a member on a shared phone must always reach cannot be pushed off by anything added above it. */ .mdrawer{display:flex;flex-direction:column;gap:2px;position:fixed;top:0;right:0; z-index:61;width:min(320px,86vw);height:100%;overflow:hidden; background:var(--paper);border-left:1px solid var(--rule); box-shadow:var(--drawer-shadow); padding:10px 18px calc(22px + env(safe-area-inset-bottom)); transform:translateX(100%);transition:transform .24s ease} .mdrawer-body{flex:1 1 auto;min-height:0;overflow-y:auto; display:flex;flex-direction:column;gap:2px; /* A row cut mid-glyph by the scroll boundary reads as a rendering fault. Fading the last 20px says "there is more below" instead, and the mask costs nothing when the list is short enough not to scroll. */ -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent 100%); mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent 100%)} @media (prefers-reduced-motion:reduce){.mdrawer-body{scroll-behavior:auto}} .mdrawer.on{transform:translateX(0)} .mdrawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:4px 0 12px;border-bottom:1px solid var(--rule)} .mdrawer-who{font:600 16px/1.2 inherit;color:var(--ink);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .mdrawer-x{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;margin-right:-8px;padding:0;border:0;background:none; cursor:pointer;color:var(--ink-2);border-radius:8px;flex:none} .mdrawer-x svg{width:20px;height:20px} .mdrawer-x:hover{background:var(--green-soft);color:var(--green)} .mdrawer-nav{display:flex;flex-direction:column;padding:14px 0 6px; border-bottom:1px solid var(--rule-2)} .mdrawer-nav:last-of-type{border-bottom:0} .mdrawer-k{font:500 10px/1 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--faint);padding:0 0 8px} .mdrawer-nav a{display:block;padding:12px 0;font-size:16px;font-weight:600; color:var(--ink);text-decoration:none} .mdrawer-nav a:hover{color:var(--green)} .mdrawer-nav a.mdrawer-hq,.mdrawer-nav a.mdrawer-hq:hover{display:flex;align-items:center; justify-content:space-between;min-height:48px;padding:0 16px;margin:0 0 6px; border-radius:3px;background:var(--green);color:#fff} .mdrawer-signout{flex:none;padding-top:14px;margin-top:2px; border-top:1px solid var(--rule);background:var(--paper)} .mdrawer-signout button{width:100%;text-align:left;padding:12px 0;border:0; background:none;cursor:pointer;font:600 15px/1 inherit;color:var(--muted)} .mdrawer-signout button:hover{color:var(--green)} /* A drawer that slides is motion; a reader who asked for less of it still gets the drawer, just immediately. */ @media(prefers-reduced-motion:reduce){ .mdrawer,.mdrawer-scrim{transition:none} } } /* gh#6071: the phone strip painted straight over the wordmark on every common phone width. Measured on production at /990/login, anonymous: the logo occupies x 28-188 at every width, while `.mutil` (absolutely positioned since gh#5453, so it cannot push anything) starts at x 152 at 390px, 176 at 414px, 122 at 360px and 82 at 320px -- "Verify yourself" rendered on top of "990 SCOUT" at all four. It cleared only at 430px. Because the strip is out of flow, no amount of gap tuning inside it can help; the row had no idea the wordmark was there. The strip keeps a hard left floor at the wordmark's right edge plus a gutter, so overlap is structurally impossible rather than a width we happened to tune for -- a longer word added to this row later truncates instead of silently painting over the brand. What gives way instead is the wordmark: below 430px it shrinks and its logo caps its width, which buys the ~90px the two links need. Both of the obvious alternatives are closed, and each is closed by a test that caught a draft of this fix: - Shedding "Verify yourself" is refused by gh#4527 (test_masthead_mutil_overflow_gh4527.py::test_sign_in_and_verify_yourself_stay_visible_at_320px): Sign in and Verify yourself are the last two things this row may ever hide, since they are the only reason a cold visitor is in it. - Wrapping the strip onto a second line is refused by gh#5453 (test_masthead_fits_the_viewport_gh5453.py::test_the_phone_header_is_one_row, which caps .mhead at 70px): Reif on the previous two-row attempt, "2 rows on the mobile looks like we crashed a car into a ravine." So the row stays one row and the brand yields the width. The logo is still legible at 24px -- it is a wordmark, not body text -- and this only applies below 430px. */ @media(max-width:700px){ /* Anchored from the right and sized to its content, never given a left edge: an overflowing nowrap flex row with justify-content:flex-end spills past its own START edge, so a left-anchored box painted its children left of the box and back over the wordmark even while the box itself was clear (CI measured at 360px: box x 196-360, "Verify yourself" at x 116). With the box sized to its content, box and children share one left edge and the only question is whether that edge clears the logo. */ .mutil{left:auto;right:12px;width:max-content;justify-content:flex-end; flex-wrap:nowrap;white-space:nowrap} .mutil>*{flex:0 0 auto} } @media(max-width:459px){ /* Below 460px the wordmark yields: the full-size logo ends at x 188 and the full row ("Verify yourself" measured 103px in CI, plus Sign in and the 44px hamburger) needs ~245px, which 430px cannot hold beside it (CI: text at x 186 over a logo ending at 188). At 20px tall the logo measures ~107px, which leaves the row ~210px beside it even at 360px. */ .masthead .mbrand-logo{height:20px} .mutil{gap:0 7px} /* The long link says "Verify" on a phone: same destination, still a real word, so nothing is truncated and nothing is hidden (gh#4527 pins both links as visible). Ellipsis was tried and rendered "Ver..." -- a clipped mid-word label is worse than the overlap it replaced. The full "Verify yourself" returns at 430px with the full-size wordmark. At 12px the links stay above the 11px floor this stylesheet already uses for its other uppercase labels; the 44px hamburger is untouched. */ .mutil a[data-auth="anon"][href="/network/hq/verify"]{font-size:0} .mutil a[data-auth="anon"][href="/network/hq/verify"]::after{content:"Verify";font-size:12px} .mutil .msignin,.mutil a[data-auth="anon"]{font-size:12px} .mutil .msignin{padding:5px 9px} } /* 320px is the hostile width: "Verify" + "Sign in" + the 44px hamburger measured 202px against the 195px left beside a 16px wordmark (logo x 28-113, CI at 320). The last 16px come out of the gutters and the Sign in padding, not out of either link. */ @media(max-width:359px){ .masthead .mbrand-logo{height:16px} .mutil{right:6px;gap:0 4px} .mutil .msignin{padding:5px 6px} } /* gh#4892's lesson, applied: the chat dock and the feedback pill are position:fixed at z-index 2147483000 -- deliberately above everything -- so a drawer cannot out-stack them, and trying just moves the collision. Measured: the dock's "Have a question?" pill sat directly over the drawer's Sign out row. Duck them while the drawer is open and restore them on close, which is what the visitor-intent survey already does for the same dock. Scoped to , set by the drawer script, so nothing here touches either widget on any other surface. */ /* gh#5453: a signed-in member on a phone does not need the cold-visitor claim ask taking a whole band above the headline. The page marks the band; the masthead owns the auth state, so the rule lives here next to the script that sets the flag. Desktop is unaffected -- there the band costs a signed-in reader nothing. */ @media(max-width:700px){ html.pa-signed-in [data-auth-hide-mobile="user"]{display:none} } html.mdrawer-open #scout-dock, html.mdrawer-open #pa-feedback{visibility:hidden} @media(max-width:700px){ /* keeps this block's closing brace paired with the media query above */ } /* ── universal search — ONE box, everything (people + nonprofits + funders), AND Ask Scout's plain-language questions (gh#4511). Both go through the same route: typeahead → /990/api/suggest for name matches, Enter/submit → /990?q= either way — that route already runs the query through search_nlu regardless of which box sent it, so a question typed here resolves exactly like one typed into the landing hero's Ask Scout card. This box previously only advertised the lookup half via its placeholder, so a visitor who never sees the hero (most of them, landing on a record page from Google) never learned Scout answers questions too. The .msf-ask label below is the "distinct affordance" this partial grows instead of a second, separate input: one box, one submit path, but now visibly branded Ask Scout so both jobs are legible at a glance. Namespaced .msrch/#mq/#mac so it can't collide with the splash hero's #hq/.hac (splash includes this masthead too). Literal colour fallbacks: not every page defines --green. */ /* gh#7558 (Reif: "bigger and stand out more... fills the middle of the desktop header capped at ~600px"): raised from 440px so the box actually fills the header's middle on a wide viewport instead of reading as a stub next to the brand and nav. */ .masthead .msrch{position:relative;flex:1;max-width:600px;min-width:110px;display:flex;align-items:center} /* Between 600px and 1040px the masthead was a single nowrap row holding three things that all refuse to shrink: the brand lockup (white-space:nowrap), the nav doors (white-space:nowrap on every .mdoor-lk, 299px of them measured at 820px), and the search box. Flex resolves that by taking the space out of the only item that CAN give -- the search box -- so the site's primary action degraded into a stub while four nav dropdowns kept full width. Measured on an org record page, signed in, before this rule (no literal report URL in this comment: it ships to every page, and tests/test_hub_cat_state_all_4174.py counts org links by scraping that path out of the rendered HTML -- a URL here is indistinguishable from a 101st listed org): viewport search input 1100px 325px 1000px 230px 900px 130px 820px 50px 760px 16px <- placeholder clipped to "Ask a question, o" `.msrch{min-width:110px}` did not save it: that floor is on the WRAPPER, and the wrapper also carries the fixed-width "ASK SCOUT" label and the magnifier icon, so the wrapper can sit at its 110px floor while the input inside it is 16px. Below 600px this never showed up because .masthead already wraps there and the nav drops to its own row. Give the search its own full-width row across the whole gap, the same shape the <=600px rule already uses, and raise the wrapper floor above its own fixed contents so the input can never be squeezed to nothing again. */ @media(max-width:1040px) and (min-width:601px){ .masthead{flex-wrap:wrap;row-gap:10px} /* brand and nav share row 1; search takes row 2 at full width */ .masthead .msrch{order:3;flex:1 1 100%;max-width:none;min-width:0} .masthead .mnav{margin-left:auto} } /* The wrapper must never be narrower than the label + icon + a usable input. Applies at every width, so no future single-row layout can reintroduce the 16px stub. */ .masthead .msrch{min-width:210px} /* gh#7558: 46px tall / 16px text / a visible border + a stronger focus ring -- the old 38px/14px box with a barely-there var(--rule) border read as a minor chrome element, not the site's primary action. */ .masthead .msf{display:flex;align-items:center;width:100%;background:#fff; border:1.5px solid var(--muted,#6b7280);border-radius:10px;padding:0 14px;height:46px; transition:border-color .12s,box-shadow .12s} .masthead .msf:focus-within{border-color:var(--green,#1f6b4a);box-shadow:0 0 0 4px var(--green-soft,#e7efe8)} .masthead .msf .msi{width:18px;height:18px;flex:none;margin-right:10px;opacity:.55;color:var(--muted,#6b7280)} /* Ask Scout label: a static, non-interactive brand cue inside the same box (not a second input) so the box reads as "ask or search" instead of a bare lookup field. flex:none so it never shrinks; the input (flex:1, min-width:0 below) gives up space to it first, same as the masthead's own nav doors do under width pressure. */ .masthead .msf-ask{flex:none;font-size:10px;font-weight:800;letter-spacing:.07em; text-transform:uppercase;color:var(--green,#1f6b4a);white-space:nowrap; padding-right:9px;margin-right:7px;border-right:1px solid var(--rule,#e6e8e3)} .masthead .msf input{flex:1;border:0;background:transparent;font:inherit;font-size:16px; padding:0 8px;outline:0;min-width:0;color:var(--ink,#1a1c19);height:44px} .msac{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:#fff; border:1px solid var(--rule,#e6e8e3);border-radius:12px;box-shadow:0 12px 34px rgba(26,28,25,.16); overflow:hidden;text-align:left} .msac-row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--rule-2,#f4f5f2); cursor:pointer;color:inherit;text-decoration:none} .msac-row:first-child{border-top:0} .msac-row:hover,.msac-row[aria-selected="true"]{background:var(--green-soft,#e7efe8);text-decoration:none} .msac-ico{width:28px;height:28px;border-radius:7px;flex:none;display:grid;place-items:center; font-size:11px;font-weight:800;color:#fff;overflow:hidden} .msac-ico.person{background:#6b4f9e}.msac-ico.org{background:var(--green,#1f6b4a)} .msac-ico.funder{background:#b8860b} .msac-ico.logo{background:var(--rule-2,#f4f5f2)} .msac-ico img{width:18px;height:18px;object-fit:contain} .msac-main{min-width:0;flex:1} .msac-name{font-weight:700;color:var(--ink,#1a1c19);font-size:14px;display:flex;align-items:center;min-width:0} .msac-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .msac-sub{font-size:12px;color:var(--muted,#6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msac-note{padding:8px 12px;font-size:12px;color:var(--muted,#6b7280);border-bottom:1px solid var(--line,#e5e7eb)} /* Verified Badge (#1891) surfaced in the typeahead row itself, board #2083 -- a sibling of the truncating name text (not nested inside it), so a long org name's ellipsis never swallows the badge along with the clipped text. */ .msac-badge{display:inline-flex;align-items:center;gap:2px;margin-left:4px;flex:none;vertical-align:middle} .msac-badge>span{display:inline-flex} @media(max-width:600px){ /* gh#5453 round 2's own `.masthead{flex-wrap:nowrap}` (max-width:700px, above) wins source order over this block at <=600px (the 601-1040px rule that re-asserts `wrap` doesn't reach down here), so a rendered search box was forced onto the same row as the brand and icons instead of wrapping to its own row below them -- 142px past a 390px viewport on any page that renders it (every page except the homepage, which sets masthead_search=false). Re-assert `wrap` here so the search row can actually drop to row 2 as the width:100% flex-basis below intends. */ .masthead{flex-wrap:wrap} .masthead .msrch{order:2;width:100%;max-width:none;flex:1 0 100%;margin-top:6px} .masthead .mbrand{order:1}.masthead .mnav{order:3} } /* Site-wide link style (Reif): every content link is green with a dashed underline, bolder on hover. This bare `a` rule lives in the masthead partial (included on every page, and later in the document than each page's own