/* --------------------------------------------------------------------------- WP-MEMBERS FORMS - the control layer (§5.4, §5.5) WP-Members renders the login, registration, password-reset and username-reminder forms with its own markup and its own stylesheet (`assets/css/forms/generic-no-float.min.css`). This file is what makes those controls the site's controls, on every surface they appear on. Everything here is expressed in the --tcf-field-* tokens defined in style.css. Before those existed, seven rules across five files each invented a padding, a type size, a border and a width for the same control; the audit and the reasoning are in docs/reviews/DESIGN_SYSTEM_FIELDS.md. THREE THINGS MEASURED ON THE BUILD SITE BEFORE THIS FILE WAS WRITTEN, all of which the rules below depend on: 1. `height: auto` is not optional. Blocksy sets `height` on every form control from --theme-form-field-height (40px), and box-sizing is border-box, so a declared padding is SWALLOWED rather than added. Every text input on this site measured 40px tall no matter what its stylesheet said - four different paddings, one height. `height: auto` binds without !important; it is the declaration that makes the rest of this file real. 2. `padding` and `max-width` need !important, on every surface. Blocksy emits its form settings as inline CSS AFTER every stylesheet, so specificity cannot win and priority has to. Verified by injecting each declaration at (0,3,2) and reading the computed value back: without !important, padding stayed at Blocksy's 8px/10px and max-width stayed at 100%. 3. `min-height` binds without !important. That is how the directory search was already getting 44px while everything else got 40. SCOPE. This sheet is `member-`-prefixed, so functions.php only enqueues it in the /members/ tree and on any page carrying a WP-Members shortcode - which is what keeps 36 KB of member CSS off the home page and the page under §5.9's 900 KB budget. Do not rename it out of that prefix. LOAD ORDER. css/*.css is globbed alphabetically, so this file lands after interior-b.css (the sign-in card's furniture) and before member-profile.css (the profile form's layout). Both of those refine what is set here; neither restates it. --------------------------------------------------------------------------- */ /* ---- the control ---------------------------------------------------------- */ /* * One rule, every WP-Members text control, both surfaces. * * `form.form` is the plugin's own class and is on every form it renders, so it * matches regardless of which id the wrapper happens to carry - which matters, * because #wpmem_login wraps the password-reset and username-reminder forms as * well as the login one. * * `textarea` and `select` are named here and were not named on the sign-in * card, which is why the registration form's Address field rendered at 16px * with a --tcf-rule border among five siblings at 15.5px with no border at all. * Measured on /members/?a=register, 2026-08-09. */ form.form input[type="text"], form.form input[type="email"], form.form input[type="password"], form.form input[type="tel"], form.form input[type="url"], form.form select, form.form textarea { display: block; width: 100%; /* See the header, point 1. Without this the padding below does nothing. */ height: auto; min-height: var(--tcf-field-min-h); /* See the header, point 2. */ padding: var(--tcf-field-pad-y) var(--tcf-field-pad-x) !important; font-family: var(--tcf-font-ui); font-size: var(--tcf-field-text) !important; line-height: 1.4; color: var(--tcf-ink); background-color: var(--tcf-field-fill); border: var(--tcf-field-border-w) solid var(--tcf-field-border); border-radius: var(--tcf-radius); transition: border-color var(--tcf-motion-hover) var(--tcf-ease); } /* A placeholder is not a label (§5.5) so it may be quiet, but it still has to be readable: muted is 5.64:1 on the fill, on both surfaces, because the value always sits on paper. `opacity: 1` because several browsers fade their own placeholder and would fade this one on top of that. Five of the seven field surfaces were inheriting the browser's placeholder colour - roughly #757575 in Chrome, lighter in Safari. */ form.form ::placeholder { color: var(--tcf-muted); opacity: 1; } /* The textarea keeps its own height. Blocksy sets --theme-form-field-height to 170px on `form textarea` from an inline rule, which put a six-line box under "Address" on a form whose longest realistic value is three lines. This wins on specificity - the inline rule is (0,0,2) and this is (0,1,2) - which is the one place on this page where specificity IS enough, because the value is read through a custom property rather than set on the property directly. */ form.form textarea { --theme-form-field-height: 6.5rem; /* 104px, about four lines */ min-height: 6.5rem; max-width: var(--tcf-measure-lede) !important; resize: vertical; } /* ---- the measures --------------------------------------------------------- */ /* * A field is as wide as the longest value it is expected to hold, never as wide * as the box it sits in. The bands and the four questions for choosing between * them are in DESIGN_SYSTEM_FIELDS.md §3; the short version is that `md` is the * answer unless the data has a reason to be otherwise. * * `max-width`, never `width`, and always with `width: 100%` above it, so a band * caps a field on a desktop and gets out of the way at 320px. * * !important on every one of them - see the header, point 2. Without it the * computed max-width stays at Blocksy's `100%` and the whole ladder is * invisible. This was measured, not assumed. */ form.form input[type="text"], form.form input[type="email"], form.form input[type="password"], form.form input[type="url"], form.form select { max-width: var(--tcf-field-measure-md) !important; /* 320px */ } /* A phone number has a bounded, known shape: `(859) 555-0134` is 111.6px of glyphs, and 160px holds it with 14px to spare. */ form.form input[name="tcf_phone"], form.form input[type="tel"] { max-width: var(--tcf-field-measure-sm) !important; /* 160px */ } /* ---- labels, help and the required mark ----------------------------------- */ /* * 15px, sentence case, weight 600, 8px under it. §1.2 has no form-label step, * so this takes the nearest defined role - `ui`, "15 / Public Sans 500-600 / * nav, buttons, chips" - which is what interface text is. Both the sign-in card * and the profile form had already reached this independently; the login page * at /log-in/ and the registration form had not, and were rendering the * browser's inline 15px/400. * * The colour is a token because it is the one field property a dark surface has * to move: ink on the sign-in card is 1.15:1. */ form.form label { display: block; margin: 0 0 var(--tcf-space-2); font-family: var(--tcf-font-ui); font-size: var(--tcf-text-ui); font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--tcf-field-label); } /* The plugin's own required marker and its "* required" note. */ form.form .req { color: var(--tcf-accent); } form.form .req-text { margin-top: var(--tcf-space-4); font-size: var(--tcf-text-meta); color: var(--tcf-muted); } /* * A field's own help line. 15.5px, not 14: these are sentences a member reads, * and §1.2 puts a 15px floor under anything that is. Capped at the lede measure * rather than at the field's, because a sentence and a field want different * measures and matching them would set help in a 320px column. */ form.form .tcf-field-help { display: block; max-width: var(--tcf-measure-lede); margin-top: 6px; font-family: var(--tcf-font-ui); font-size: var(--tcf-text-body-sm); line-height: var(--tcf-leading-sm); color: var(--tcf-muted); } /* The legend names the fieldset, and on the recovery forms it is the only thing that does. It was rendering in the browser's Arial at 24px bold - the only element on the site set in neither of its two typefaces. `:not(.tcf-mb-signin *)` because the sign-in card owns its own legend treatment (interior-b.css): on the login branch it is visually hidden, and on the recovery branches it is set to the button's type so check_canvas.py does not report the button as having lost its typeface. Two rules, one owner each, rather than a tie broken by file order. The construct was verified in a browser before it was relied on - it parses, and it correctly does not match a legend inside the card. EVERY OTHER WP-Members form gets this, not just /log-in/. check_design.py failed the profile form on "Newsreader above weight 400 (§1.2 forbids 500+, and the browser will fake it): legend @ 700 (24px)" - the browser's own legend styling, inheriting the page's serif and synthesising a bold that Newsreader's variable range cannot produce. That is the single most visible way to make a self-hosted font look cheap, and it was on the profile form. */ form.form legend:not(.tcf-mb-signin *) { padding: 0; font-family: var(--tcf-font-ui); /* !important, and measured before reaching for it: without it the legend computes at the browser's 24px/700, which is the BLOCK EDITOR's own legend rule landing after this stylesheet. interior-b.css hit the same thing on the sign-in card and reached for the same fix. `lede` rather than a card heading: every surface that shows this legend already carries a serif headline above it - the profile form's page title, and the panel h1 on anything drawn by page-members.php - and a second serif headline underneath that is two titles for one form. This is a form's own heading, so it takes the UI face and sits a step below the page. */ font-size: var(--tcf-text-lede) !important; font-weight: 600 !important; line-height: var(--tcf-leading-card); /* The UA gives a legend its own inline padding and offset, which put "Sign in" 15px to the left of the "Email" label under it - measured at x=60 against a form at x=75. A form's heading has to start on the same line as its fields. */ margin-inline: 0; margin-bottom: var(--tcf-space-4); color: var(--tcf-field-label); } /* ---- hover and focus ------------------------------------------------------ */ form.form input[type="text"]:hover, form.form input[type="email"]:hover, form.form input[type="password"]:hover, form.form input[type="tel"]:hover, form.form select:hover, form.form textarea:hover { border-color: var(--tcf-ink); } /* * Every control in these forms was landing with no visible focus indicator at * all, which check_a11y.py reports one line per control: a keyboard user could * not see where they were on the one page where getting it wrong locks them * out. The plugin's own stylesheet paints over the global rule, so it is * restated here rather than fixed globally. * * --tcf-field-focus is not a token: a focus ring is a property of the BAND, not * of the field - every focusable element on a dark band needs the same * substitution, links included - and interior-b.css already scopes the sign-in * band's ring to --tcf-on-ink-accent at a specificity that beats this. */ form.form input:focus-visible, form.form select:focus-visible, form.form textarea:focus-visible, input.username:focus-visible, input.password:focus-visible, input.textbox:focus-visible, input.buttons:focus-visible { outline: 2px solid var(--tcf-accent); outline-offset: 2px; border-color: var(--tcf-accent); } /* §5.4 names 2px offset and the gate enforces it, so the checkbox takes the same ring as everything else rather than the wider one it wants. */ form.form input[type="checkbox"]:focus-visible { outline-offset: 2px; } /* ---- checkboxes ----------------------------------------------------------- */ /* * 24px, not the user agent's 13. 13px is under WCAG 2.5.8's 24px minimum with * no spacing exemption to fall back on when three of them stack, which is what * the registration form does. The sign-in card's own remember-me box is 20px * inside a 44px row and is left alone; this is for every other form. * * The blanket control rule above would otherwise paint a checkbox as a text * field, which is why the reset comes after it rather than before. */ form.form input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; padding: 0 !important; border: 0; background: none; accent-color: var(--tcf-accent); cursor: pointer; } /* ---- submit --------------------------------------------------------------- */ /* The plugin's submit buttons are , which the block editor's button styles never reach. §1.4's primary button: brick fill, paper text, 2px radius, 600. The padding is space-4 / space-5 (16 / 28), the same pair the profile form's own button already uses. */ form.form input[type="submit"], input.buttons { height: auto; min-height: var(--tcf-field-min-h); padding: var(--tcf-space-4) var(--tcf-space-5); font-family: var(--tcf-font-ui); font-size: var(--tcf-text-body-sm); font-weight: 600; line-height: 1.2; color: var(--tcf-page); background-color: var(--tcf-accent); border: var(--tcf-field-border-w) solid var(--tcf-accent); border-radius: var(--tcf-radius); cursor: pointer; transition: background-color var(--tcf-motion-hover) var(--tcf-ease); } form.form input[type="submit"]:hover, input.buttons:hover { background-color: var(--tcf-accent-strong); border-color: var(--tcf-accent-strong); color: var(--tcf-page); } /* ---- a WP-Members form on an ordinary paper page -------------------------- * * WHAT THIS BLOCK IS NOW, AND WHY IT IS STILL HERE. * * It was written for /log-in/, which carried its own [wpmem_form login] on a * plain page and got none of the sign-in card's furniture: measured on the build * site at 1440, the email field was 967.5px wide and 40px tall, indented 236px * from the left of a 1290px content column because WP-Members' own stylesheet * centres `form.form` at 75%. It also said, out loud on the page members use to * sign in, "Placeholder wording - final copy comes with the Phase 3 content * work". These rules made the form defensible; they could not make it the same * design as /members/, and Jay reported the mismatch on 2026-08-10. * * §2i of docs/handoff/02-page-specs.md is titled "Member area - `/log-in/` and * `/members/`" - one design, drawn for both. So /log-in/ was moved onto * page-members.php and the ink card, and the reasoning that used to sit here - * "the card belongs to /members/ ... a form column on paper is the right answer * here" - is wrong and has been removed rather than corrected in place. * * **As of 2026-08-10 no page on this site matches this block.** It is kept * deliberately, as the fallback for the next WP-Members form that appears * outside the member area - a standalone registration page is the obvious * candidate, and `?a=register` is still an open decision. Without it such a page * renders a 967px field again. Do not delete it because a grep says it is * unused; delete it when WP-Members is gone. * * SCOPED WITH `body:not(.tcf-member-area)`, and that guard is doing real work. * `.tcf-member-area` marks the /members/ tree AND anything on the member-area * template (tcf_is_member_area() in functions.php), so this block reaches * neither the sign-in card - which owns its own field margins - nor the profile * form, whose spacing is one number on `.tcf-pf-group`. Without it these rules * tie on specificity with interior-b.css and win on file order, adding a second * gap under every field on both surfaces. That is exactly the failure * MAINTAINABILITY_REVIEW M-5 records, and it is why widening * tcf_is_member_area() to cover /log-in/ was a prerequisite for the move rather * than a tidy-up alongside it. * ------------------------------------------------------------------------- */ /* The ids are in the selector, and they have to be. WP-Members' own stylesheet sets `width: 75%; margin: 0 auto` on `#wpmem_login` / `#wpmem_reg`, which is an id and beats any class selector. Measured after the first deploy of this file: the fields were correctly capped at 320px and the whole block was still sitting 236px in from the left of a 1290px column, so the form floated in the middle of the page under a left-aligned heading. */ body:not(.tcf-member-area) #wpmem_login, body:not(.tcf-member-area) #wpmem_reg, body:not(.tcf-member-area) form.form { width: 100%; max-width: none; margin-inline: 0; } body:not(.tcf-member-area) form.form fieldset { margin: 0; padding: 0; border: 0; } /* One gap between one field and the next, owned in one place. WP-Members emits a `.div_text` wrapper per field and nothing else to hang it off. */ body:not(.tcf-member-area) form.form .div_text, body:not(.tcf-member-area) form.form .div_textarea, body:not(.tcf-member-area) form.form .div_password, body:not(.tcf-member-area) form.form .div_email { margin: 0 0 var(--tcf-space-5); /* 28 - the same 8-binds / 28-separates rhythm the sign-in card uses */ } /* The plugin's button row and its "Forgot password?" line, which arrive right-aligned against the far edge of a form whose every other line starts at the left. */ /* `text-align: left !important`, and it was measured: WP-Members right-aligns both of these rows from its own stylesheet, which put "Keep me signed in" and "Forgot password?" against the far edge of a 1290px column while every other line on the page started at the left. A plain declaration here lost. */ body:not(.tcf-member-area) form.form .button_div, body:not(.tcf-member-area) form.form .link-text { margin: var(--tcf-space-4) 0 0; text-align: left !important; } body:not(.tcf-member-area) form.form .link-text { font-size: var(--tcf-text-ui); line-height: var(--tcf-leading-sm); color: var(--tcf-muted); } /* The remember-me row on a paper login form. Same 44px target the sign-in card takes, for the same reason: the row is alone above a button, so the AAA number is free here. The label is the target; the box is 24px because that is the size it wants to be looked at. */ body:not(.tcf-member-area) form.form .button_div { display: flex; flex-wrap: wrap; align-items: center; /* zero, not a gap: WP-Members puts a literal   between the checkbox and its label, and that text node is an anonymous flex item - a gap on top of it opens a hole. */ gap: 0; /* The row shares the fields' edge rather than the page's. Without this the checkbox and the button spread across a 1290px content column while the fields above them are 320px, which is what made this page look assembled rather than drawn. */ max-width: var(--tcf-field-measure-md); } body:not(.tcf-member-area) form.form .button_div label { /* `order: 1` because WP-Members emits the label BEFORE the box. It is safe where an `order` on the submit would not be: a