/* El-Amin97 member navigation — stylesheet half of the nav shim. * * The mirrored pages already contain GoDaddy's full membership menu: both * states, as siblings. Measured on the served page, their own bundle runs and * expresses the state with INLINE display styles, for a signed-out visitor: * * .membership-icon-logged-out display:block <- the header control * .membership-icon-logged-in display:none * .membership-links-logged-out display:block <- mobile nav * .membership-links-logged-in display:none * .membership-header-logged-in display:none * * So the menu machinery is intact; the only thing wrong is the identity behind * it, which is the placeholder captured from the live site * ("filler@godaddy.com"). nav.js supplies the real identity from OUR auth * service, and the rules below flip the state. * * Their state lives in inline styles, so ours must outrank inline => !important. * It is scoped to a class on , so nothing changes until nav.js has an * answer, and the login/admin pages (which never get that class) are unaffected. * * DELIBERATELY NOT TOUCHED: .membership-sign-in / .membership-sign-out. Despite * the names these are the two DROPDOWN CONTAINERS, not the two states: the * signed-out dropdown carries membership-sign-out and the signed-in one carries * membership-sign-in. They are display:none because they are CLOSED, and the * site's dropdown JS opens them on click. Styling them here would break the menu. */ html.elamin-signed-out :is(.membership-icon-logged-in, .membership-links-logged-in, .membership-header-logged-in) { display: none !important; } html.elamin-signed-out :is(.membership-icon-logged-out, .membership-links-logged-out) { display: block !important; } html.elamin-signed-in :is(.membership-icon-logged-in, .membership-links-logged-in, .membership-header-logged-in) { display: block !important; } html.elamin-signed-in :is(.membership-icon-logged-out, .membership-links-logged-out) { display: none !important; } /* "Sign out" is a

on the live site; nav.js makes it clickable. Give it the affordance the rest of the menu links have. */ html.elamin-signed-in [id$="-membership-sign-out"] { cursor: pointer; } /* ---- site search --------------------------------------------------------- * Styles for the search control that nav.js injects into the header, and for * the results list on /search. * * These live in nav.css — NOT in the auth service's own inline stylesheet — * because the mirrored pages load nav.css and never see the service's CSS. The * first version of this feature put the rules in the service's sheet, so on a * mirrored page the `.sr` screen-reader rule never applied and the "Search the * site" label rendered as visible text next to the box. The control is injected * into MIRRORED pages, so its styles must ship with the shim. * * Colours are the measured site tokens (accent #0075c1, body font Gudea) written * out literally: nav.css has no :root block of its own to inherit from. */ .head-search{flex:0 0 auto;display:flex;align-items:center;margin-right:12px} .head-search form{display:flex;align-items:stretch;margin:0} .head-search input[type=search]{width:170px;padding:6px 9px;font:14px Gudea,Georgia,serif; border:1px solid #d9d9d9;border-right:0;background:#fcfcfc;color:#2b2b2b;border-radius:0} .head-search input[type=search]:focus{outline:2px solid #0075c1;outline-offset:-1px;background:#fff} .head-search button{margin:0;width:auto;padding:6px 10px;cursor:pointer;border:0; background:#0075c1;color:#fff;display:inline-flex;align-items:center;gap:6px; font-family:Gudea,Georgia,serif} .head-search button:hover{background:#0068ad} .head-search button svg{width:14px;height:14px;display:block} /* Visually hidden but available to screen readers. Needed because the input has a placeholder, not a visible label. */ .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---- search results (the /search page) ---- */ .hits{list-style:none;margin:4px 0 26px;padding:0} .hits .hit{padding:16px 0;border-bottom:1px solid #d9d9d9} .hits .hit:last-child{border-bottom:0} .hit-t{font-family:'Old Standard TT',serif;font-size:20px;color:#0075c1;text-decoration:none} .hit-t:hover{text-decoration:underline} .hit-p{font-size:12px;color:#5f5f5f;margin:3px 0 6px;word-break:break-all} .hit-s{margin:0;font-size:14px;color:#2b2b2b;line-height:1.55} .hit-s mark{background:#fff3b0;color:inherit;padding:0 1px} /* The kind badge ("Page" / "Document") is appended straight after the title * anchor — `.hit-t` — so with no left margin it butted * flush against the last glyph and read as part of the title. The base `.pill` * rule lives in the SERVICE's inline sheet and carries no margin, so it is * overridden here where it is needed instead of globally: the admin `.top` * pills sit in a flex row that already supplies `gap:14px`, and a global * margin-left would double-space those. */ .hits .hit .pill{margin-left:8px} .pill.locked{background:#f4f4f4;border-color:#d9d9d9;color:#5f5f5f} /* ---- the /search page layout -------------------------------------------- * Three things change on this page, and only on this page, via the * `search-page` class the service puts on (see page(html_class=...)): * * 1. The header control is hidden. On /search the hero below is the ONLY * search box, so leaving the header one visible would offer two inputs * competing for the same query. * 2. The column widens. The default .wrap is 620px — sized for a sign-in * form — which cramps a result listing that carries a title, path badge * and two-line snippet. `wide` takes it to 880px. * 3. The snippet keeps a readable measure (~72ch) inside the wider card, so * widening the container does not stretch body text into unreadable * lines. The container expands; the field stays constrained. * * The hero form lives OUTSIDE .card — it sits above it, centred — and is gone * from the bottom of the results, where it used to duplicate the header box. */ html.search-page .head-search{display:none} main.wrap.wide{max-width:880px} .search-page .hits .hit-s{max-width:72ch} .search-hero{display:flex;align-items:stretch;gap:0;margin:0 0 22px; justify-content:center;max-width:560px;margin-left:auto;margin-right:auto} .search-hero input[type=search]{flex:1 1 auto;min-width:0;padding:12px 14px; font:15px Gudea,Georgia,serif;border:1px solid #d9d9d9;border-right:0; background:#fff;color:#2b2b2b;border-radius:0} .search-hero input[type=search]:focus{outline:2px solid #0075c1;outline-offset:-1px} .search-hero button{margin:0;width:auto;padding:12px 22px;cursor:pointer;border:0; background:#0075c1;color:#fff;font:700 13px Gudea,Georgia,serif; text-transform:uppercase;letter-spacing:.819px} .search-hero button:hover{background:#0068ad} /* ---- pager (bottom of the /search card) ---------------------------------- * The hero form above the card is a GET to /search with only `q`, so submitting * a new search intentionally drops `page` and returns to page 1 — the pager is * the only thing that carries the page number. * * The pager stays INSIDE the (now wider) results card, aligned left under the * listing, because it belongs to the listing rather than to the page. Disabled * Prev/Next are , not a dead , so they are not focusable and screen * readers do not announce a link that does nothing. */ .pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px; margin:22px 0 2px;padding-top:18px;border-top:1px solid #d9d9d9} .pager .pg{display:inline-block;min-width:34px;padding:7px 10px;text-align:center; font:14px Gudea,Georgia,serif;color:#0075c1;text-decoration:none; border:1px solid #d9d9d9;background:#fff} .pager a.pg:hover{background:#0075c1;border-color:#0075c1;color:#fff} .pager .pg.cur{background:#0075c1;border-color:#0075c1;color:#fff;font-weight:700} .pager .pg.off{color:#b4b4b4;background:#fafafa;border-color:#e6e6e6} .pager .pg.gap{border:0;background:transparent;color:#5f5f5f;min-width:18px} .pager a.pg:focus-visible{outline:2px solid #0075c1;outline-offset:2px} /* ---- mobile: the /search page and the injected control ------------------- * * MEASURED at 390x844, /search?q=the, before these rules: * hero 346 wide (input 251 + 95 button) — a single row, fine * card 346 wide but hits only 276, and 246 at 360px, because .card kept its * desktop 34px side padding and the page kept .wrap's 22px * h1 34px, .hit-t 20px — sized for a 880px desktop column * pager 6 items on ONE 276px row (93px tall at 390, wrapping badly) * * So: give the results back the horizontal space (.card padding and .wrap * gutter both shrink), scale the type down, let the pager wrap deliberately, * and stack the hero only where a phone really cannot fit input+button. * * The hero stacks at <=400px rather than at the usual 480: at 390 it still fits * on one row with a usable ~250px input, and a stacked form would consume more * vertical space than it buys. It stacks only when the input would fall below * ~200px (360 - 28 gutter - 36 padding - 95 button = 201). */ @media (max-width:760px){ html.search-page .head-search{display:none} main.wrap.wide{max-width:100%} .search-hero{max-width:none;margin:0 0 16px} .search-page .hits .hit-s{max-width:none} .hits .hit{padding:13px 0} .hit-t{font-size:17px;line-height:1.3} .hit-p{font-size:11px} .hit-s{font-size:14px} /* Deliberate wrap, centred, so 6 chips break into two tidy rows instead of one cramped row that overflows its card. */ .pager{justify-content:center;gap:5px;margin:18px 0 0} .pager .pg{min-width:30px;padding:6px 8px;font-size:13px} } @media (max-width:400px){ /* Below ~400px the input would be under 200px wide beside the button, so stack them: full-width input, full-width button under it. */ .search-hero{flex-direction:column;gap:8px} .search-hero input[type=search]{width:100%;border-right:1px solid #d9d9d9} .search-hero button{width:100%;padding:12px 14px} .hit-t{font-size:16px} .pager .pg{min-width:28px;padding:5px 7px;font-size:12px} } /* The control nav.js injects into mirrored pages: at <=760 it must not crowd the site's own utilities row, so it shrinks rather than pushing the row over. Measured at 390 on the mirrored home: 204x32 at x=126 — it fits, but 204px is half the viewport, so it is narrowed and the button collapsed to the icon. The width is FLUID, not a fixed 120/96. A fixed width wastes the space the header has spare: measured at 390, the brand column reserves 262px while the brand mark itself paints only 96px, so the control sat in a hard 96px box with ~110px of dead space beside it. Sizing it off the viewport instead lets it take that slack and stop short of the hamburger. The 232px subtracted is the space the header genuinely needs, measured at every phone width: 8px row padding + 80px brand mark + ~50px clearance from it + 40px hamburger + 8px right margin + 30px collapsed button. Subtracting it holds the control's right edge a constant 8px left of the hamburger and ~50px clear of the brand mark at 360/390/414/480, with no horizontal overflow at any width (verified 320-1280). The clamp floor is 96px — exactly the value this rule used to hard-code below 480px — so no width gets narrower than before; 320px views are unchanged. Capped at 240px so a small tablet does not get an absurdly long field. Above the 760px breakpoint the original 170px desktop width is untouched. */ @media (max-width:760px){ .head-search{margin-right:8px} .head-search input[type=search]{ width:clamp(96px, calc(100vw - 232px), 240px);padding:5px 7px;font-size:13px} .head-search button{padding:5px 8px} } /* No separate <=480 rule: the clamp floor already bottoms out at 96px, which is what the old @media (max-width:480px){width:96px} rule set. Keeping both would re-pin the width at exactly the small widths the clamp exists to un-pin. */ /* ---- read aloud ---------------------------------------------------------- * The "Listen" control beside every document link, and the page-level control in the header. Both live HERE rather than in the service's inline sheet, because this is the only stylesheet the MIRRORED pages load — a rule written only into authsvc.py's CSS block is invisible on the site itself, which is exactly how the "Search the site" label once ended up rendering as visible text on mirrored pages. One source, both surfaces. The button is deliberately inline and small: it sits beside download links in lists the site's own CSS already lays out, so it must not disturb their flow. `inline-flex` keeps the icon and the word on one line, and `vertical-align:middle` stops it from sitting on the text baseline, which reads as misaligned next to a 16px link. */ /* Sized down after overshooting. The history ran 12px -> 15px -> 17px, each step fixing a real problem (unreadable beside the site's 16px links, then fine print next to the download link), but 17px with a 22px icon and 9/20 padding made the pill as heavy as the download link it sits beside -- it started competing with the primary action instead of annotating it. Settled at 14px with a 19px icon: still clearly larger than the 12px it started at, still legible, but no longer the loudest thing in the row. The border and pill radius scale with it so it does not read as a stretched small control. */ .listen-wrap{display:inline-block;margin-left:10px;vertical-align:middle;white-space:nowrap} /* ---- form-control reset for the injected buttons ------------------------- * The Listen controls changed from to