/* The reCAPTCHA badge, and the attribution that replaces it. Leo B. 09/17/2026. WHAT THIS REVERSES, AND WHY. Views/Shared/_RecaptchaV3.cshtml carried this from 08/21/2026: THE BADGE IS DELIBERATELY LEFT VISIBLE. [...] It costs no layout space, so there is nothing to gain. The first half is still true and the conclusion was wrong. A position:fixed panel that costs no layout space costs POINTER EVENTS instead. Google's badge parks itself in the bottom-right corner of the viewport -- bottom:14px, right:0, 70x60 collapsed and 256x60 once hovered or tapped -- and takes every click that lands there, on all sixteen member-facing pages that render the partial. On fourteen of them the member cannot scroll out from under it: Css/portal-shell.css puts height:100dvh and overflow:hidden on body.portal-shell-page, so the document does not scroll and only the pane inside it does. THE PAGE THIS WAS REPORTED ON is Membership/TempMembershipApplication, at 425x644, with In-Person Application selected -- so the visible branch is .Face-PMES, which ends with two coop-green .btn.button pills: Download, and Back To Home Page as the last element in the block. The pane bottom-right is permanently under the badge. See docs/recaptcha-badge/PLAN.md. HIDING THE BADGE IS ONLY ALLOWED WITH THE ATTRIBUTION BESIDE IT. Google's FAQ permits it on exactly that condition, and a hidden badge with no attribution is a terms breach rather than a style choice -- which is what the old note was protecting, and it was right to. So the two ship TOGETHER, out of the one block in _RecaptchaV3.cshtml that already runs once per page. Not from the three layouts: a layout can be added, and the failure when somebody forgets a is a silent terms breach rather than a broken page. Tier 1 fails the build if either half appears without the other. BYTE-IDENTICAL TWIN: the other portal tree carries the same file at the same path, Css/recaptcha-badge.css, and Tier 1 asserts they stay identical. Change both together. Worth a sentence, because the back office renders _RecaptchaV3.cshtml from no view at all today and this file is therefore unused there. It is twinned anyway, for the reason Scripts/recaptcha-v3.js and Security/CaptchaVerifier.cs already are (twin-files.txt, 08/21/2026): both trees verify a captcha, both must treat one the same way, and the day a back-office form grows a captcha it must get the hidden badge and the attribution together rather than inheriting a corner-blocking panel nobody remembered. "Unused today" is a fact about mounting, not about whether two copies of one component may disagree. visibility:hidden AND NOT display:none. It is the form Google's own guidance uses, and it leaves the element laid out so grecaptcha's internals keep the box they expect while it takes no clicks and draws nothing. The badge is position:fixed either way, so neither reserves space -- nothing is gained by the more destructive one. THE SUPPORT FLOOR this is written against: evergreen desktop, iOS 12 and newer, older Android WebView; IE11 out of scope. Nothing below needs a fallback -- no flex gap, no custom-property dependency, no media query at all. The attribution is one paragraph and reflows on its own. */ /* --------------------------------------------------------------------------- 1. The badge draws nothing and takes no clicks. The selector is bare and unqualified because Google's element is appended to the end of and is not inside anything of ours to scope to. --------------------------------------------------------------------------- */ .grecaptcha-badge { visibility: hidden; } /* --------------------------------------------------------------------------- 2. The attribution Google requires in its place. THE SPACING HERE IS THE SECOND ATTEMPT, and the first one is why it is written down. The first shipped 12px/1.5 with margin-top:14px, no bottom margin, and a 1px #dbe6f2 rule across the top -- borrowed wholesale from .auth-legal in Css/portal-forms.css. On Register that landed inside .auth-field.auth-actions, directly above the SIGN UP button, and the hairline read as a divider cutting the button off from the form it belongs to. It was reverted on sight the same day, then reinstated with the values below. So: NO border-top. Whitespace separates; a rule partitions, and this text is a footnote to the form rather than a new section of it. The separation is carried by margin instead, and there is a bottom margin now -- the first attempt had none, which is most of why it read as welded to the button beneath it. max-width in ch is line length, not decoration. It matters more here than it would elsewhere because this paragraph renders in SIX different containers: it goes wherever the partial is called, and the call sites range from a full-width .auth-field down to a Bootstrap column. 46ch keeps the measure readable at both ends, and on the three Temp* views it is also what stops the sentence stretching the full 785px .captcha-container-b gives it above 1170px. 13px rather than 12: at 12px this was the smallest text on every page it appears on. #55697f is 5.6:1 on white, comfortably over the 4.5:1 AA floor at either size, and is NOT a --coop-* token on purpose -- the same reasoning .auth-legal states beside its own copy. A regulatory line has to recede on whatever palette a white-labelled deployment sets, and --coop-primary is 3.6:1 on white. Keeping this file free of theme tokens also means it renders correctly on any layout the partial is dropped onto, including one nobody has written yet. --------------------------------------------------------------------------- */ .recaptcha-legal { max-width: 46ch; margin: 24px auto 16px; font-size: 13px; line-height: 1.6; text-align: center; color: #55697f; } /* The two links are Google's own and must stay recognisable as links -- the attribution is only served if a member can actually reach the policies from it. Underlined rather than coloured apart: at this size on this grey a second colour either fails contrast or shouts, and the underline carries the affordance on its own. No display or padding change: these sit inside a sentence, so making them 44px touch targets would break the line box they live in. The 44px rule is for controls, and a sentence is not one. */ .recaptcha-legal a { color: inherit; text-decoration: underline; } .recaptcha-legal a:hover, .recaptcha-legal a:focus { color: #37475c; }