/* ========================================================================== T21 — Login (route customer/account/login, body class customer-account-login) Comp: design/store-theme/03-harvest-food/colors/Wheat/pages/T21 Login.dc.html Two equal cards on one row: registered customers on a plain surface, "New here?" on an accent tint. Centred h1 above them. --------------------------------------------------------------------------- THE CENSUS. 29 classed elements in the VISIBLE `.login-container`, ALL of them listed. Not "on the live route" (S4 MINOR 3): the route also carries the hidden `.block-authentication` copy - 39 descendants, 25 of them classed - which is exactly what produced this task's popup false-positive probe. No rule here reaches inside it - measured, 0 of 45 comma-split selectors match any node in that subtree. THE REASON THIS FILE USED TO GIVE FOR THAT WAS FALSE (S7 MINOR): it said "every selector requires `.login-container`". Five of the 45 do not - `.page-main` (x2), `.page-title-wrapper` and `.page-title` (x2) - and they SHOULD not, because they are page-frame selectors rather than card selectors. The conclusion held; the stated reason did not, which is this task's single most repeated failure and is worth correcting even when nothing shipped changes. The first version of this file claimed 27, listed 21, and the eight it omitted were exactly the elements §4 styles — a section resting on a census that omitted its own targets. S1 caught that, and the two CRITICALs below came out of the same edge. .login-container > .block.block-customer-login > .block-title > .block-content > form.form.form-login > fieldset.fieldset.login > .field.note > .field.email.required > label.label > .control > input.input-text > .field.password.required > label.label > .control > input.input-text > .field.choice > input.checkbox > label.label > .actions-toolbar > .primary > button.action.login.primary > .secondary > a.action.remind > .block.block-new-customer > .block-title > .block-content > .actions-toolbar > .primary > a.action.create.primary --------------------------------------------------------------------------- WHAT BLANK DOES TO THIS PAGE, read out of the DEPLOYED styles-l.css. Six rules, not four. The two marked NEW are the ones the first census missed, and both were live geometry defects measured at 768 and 1440: .login-container .block { width: 48.8% } (0,2,0) .login-container .block:nth-child(odd) { clear:left; float:left } .login-container .block:nth-child(even) { float:right } .login-container::before/::after { content:''; display:table } .column:not(.sidebar-main) form .actions-toolbar, (0,3,1) .column:not(.sidebar-additional) form .actions-toolbar { margin-left: 25.8% } (0,3,1) .fieldset > .field.choice::before { width:25.8%; float:left; content:' '; height:1px } (0,3,1) .fieldset > .field::before/::after { content:''; display:table } >=768 S4 .actions-toolbar::before/::after { content:''; display:table } >=768 S4 .login-container .block-new-customer .actions-toolbar { margin-top: 25px } (0,3,0) S4 .login-container .block .login .actions-toolbar > .primary { margin-right: 30px } (0,5,0) S4 .login-container .block .login .actions-toolbar > .secondary { float: left } (0,5,0) S4 .login-container .block .block-title { border-bottom; 1.8rem } (0,3,0) S4 .login-container .fieldset::after { attr(data-hasrequired) } (0,2,1) S4 THIS TABLE HAS NOW BEEN WRONG TWICE, IN THE SAME DIRECTION. It first claimed four rules and had six; S1 caught that and it claimed six. S4 counted 89 Blank rules matching something in this subtree and found the six still omitted the seven marked S4 above - including the two ::before/::after pairs that were live defects, and the SECOND SELECTOR of the very margin-left:25.8% block whose first selector this file already tells the story of missing. A table asserting completeness is a claim like any other, and this one has failed every audit it has been given. 1. THE CLEARFIX PSEUDOS BECOME GRID ITEMS. A theme sets display:grid on a core container, Blank's ::before/::after still generate boxes, and they eat two tracks — two cards plus two phantoms in a 2-column grid land on separate rows, diagonally. Switched off below; `display:table` is not inert inside a grid. 2. THE SAME TRAP RECURS ON `.field.choice::before`, and the first version of this file walked into it while declaring trap 1 four sections above. Making `.field.choice` a flex row activates Blank's 25.8%-wide floated pseudo as a FLEX ITEM (float is inert in flex; the box is not). Measured: the pseudo took 116.61px and pushed the checkbox 124.61px right of the card's content edge. Magento neutralises this same pseudo with `display:none` in four other contexts in the very file the census read. A declared trap is only handled where it was declared — the abstraction does not generalise itself. 3. `.actions-toolbar` INHERITS A 25.8% LEFT MARGIN, and the first version reset the WRONG HALF of the declaration. `margin-left: 25.8%` is one block containing both `.login-container .fieldset:after` (0,2,1) — which was reset — and `.column:not(.sidebar-main) form .actions-toolbar` (0,3,1) — which was not. `:not()` carries its argument's weight, so (0,3,0) loses to it. Measured before the fix: the sign-in CTA indented 72.75px at 768 and 116.61px at 1440, while the file's own docblock claimed it was "full-bleed" and "375/768/1440 all verified." It was not verified; the defect is 116px wide and visible in a capture. **Reset the rule you found, not one selector of it.** 4. SPECIFICITY, NOT LOAD ORDER. `styles-l.css` does load before this sheet — that is measured, in the served : styles-m -> styles-l -> components -> pages/_t21.css. So an equal-specificity later rule WOULD win. The resets below still out-specify, because load order is a weaker guarantee than specificity and this theme has already been bitten by relying on the weaker one. 5. `.login-container .fieldset::after` renders `attr(data-hasrequired)`, the "* Required Fields" note. The comp does not draw it. It is NOT hidden: it is the only thing telling a user which fields are mandatory, and a comp omitting a usability affordance is not authority to delete it. Restyled, and see §4 below for the colour it is NOT given. PALETTE: every colour is a var(--hrv-*). Zero hex, zero !important, zero dead selectors — all verified by S1 against the live page under the render rig. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Page frame -------------------------------------------------------------------------- */ .customer-account-login .page-main { max-width: 1108px; /* 1060 comp column + 2x24 padding; measured content width 1060.00 */ padding-left: 24px; padding-right: 24px; padding-top: 48px; } .customer-account-login .page-title-wrapper { text-align: center; } .customer-account-login .page-title-wrapper .page-title { font-family: var(--hrv-font-display); font-weight: 700; font-size: 32px; line-height: 1.12; margin: 0; text-wrap: balance; } /* -------------------------------------------------------------------------- 2. The two-card row -------------------------------------------------------------------------- */ .customer-account-login .login-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; } /* Trap 1 — Blank's clearfix would occupy two of the four tracks. */ .customer-account-login .login-container::before, .customer-account-login .login-container::after { display: none; } /* Traps in the table above — reset what Blank set on the cards. Measured after: 518.00px track, not the 517.28px that 48.8% would have produced. */ .customer-account-login .login-container .block { width: auto; float: none; clear: none; margin: 0; background: var(--hrv-surface); border: 1px solid var(--hrv-border); border-radius: var(--hrv-radius); padding: 32px; display: flex; flex-direction: column; gap: 14px; } .customer-account-login .login-container .block-new-customer { background: var(--hrv-accent-tint); } /* -------------------------------------------------------------------------- 3. Card headings S1 MINOR: Blank's `.login-container .block .block-title` is ALSO (0,3,0) and carries a border-bottom plus 15px/12px spacing. The previous version won on load order — the exact guarantee §4 above says this file avoids relying on. Now (0,4,0). -------------------------------------------------------------------------- */ .customer-account-login .login-container .block .block-title { margin: 0; padding: 0; border: 0; } .customer-account-login .login-container .block .block-title strong { font-family: var(--hrv-font-display); font-weight: 700; font-size: 19px; line-height: 1.12; color: var(--hrv-text); } .customer-account-login .login-container .block-content { display: flex; flex-direction: column; gap: 14px; margin: 0; } /* -------------------------------------------------------------------------- 4. Fields -------------------------------------------------------------------------- */ .customer-account-login .login-container .fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 14px; } .customer-account-login .login-container .fieldset > .field { margin: 0; display: flex; flex-direction: column; gap: 6px; } /* `.field.note` — core's "If you have an account, sign in with your email address." The comp has no such element. Kept (it is orienting copy on an auth page, and deleting core guidance to match an artboard is the same overreach as hiding the required-fields note), toned to match the card's secondary text. DECLARED. */ .customer-account-login .login-container .fieldset > .field.note { font-size: 13px; line-height: 1.6; color: var(--hrv-text-muted); } /* S1 MINOR: the previous version reset width/text-align/margin but NOT padding, so Blank's `padding: 6px 15px 0 0` survived and every field sat 6px taller than the comp. The label->input gap was correct at 6.00 the whole time, which is why it read as fine — the extra space was ABOVE the label, not below it. */ .customer-account-login .login-container .fieldset > .field > .label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hrv-text-muted); margin: 0; padding: 0; width: auto; text-align: left; } .customer-account-login .login-container .fieldset > .field > .control { width: auto; } /* Comp radius is 12px (--hrv-radius-sm) while _forms.css gives every other input in the theme 14px (--hrv-radius-md). The comp is followed here; the divergence is the same class as registers #4/#11 and is noted rather than silently normalised. */ .customer-account-login .login-container .fieldset .input-text { border: 1px solid var(--hrv-border-strong); background: var(--hrv-surface); color: var(--hrv-text); padding: 12px 16px; font-size: 14px; font-family: var(--hrv-font-body); border-radius: var(--hrv-radius-sm); box-sizing: border-box; width: 100%; height: auto; } .customer-account-login .login-container .fieldset .input-text:focus { outline: 2px solid var(--hrv-focus-ring); outline-offset: 2px; } /* THIS IS NOT "REMEMBER ME". S1 MAJOR 6: the previous version's comment named it that, and the layout docblock reasoned about placing the forgot-link "beside Remember me". The live element is Magento's SHOW PASSWORD toggle — `.field.choice` bound to `scope:'showPassword'`, rendering Magento_Customer/template/show-password.html with the label "Show Password". The comp's Remember-me checkbox DOES NOT EXIST on this route; it needs Magento_Persistent or a template override, and it is now declared as a third comp delta in the layout handle. A row that cannot exist cannot be the anchor another delta is described against. */ .customer-account-login .login-container .fieldset > .field.choice { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--hrv-text-muted); } /* Traps 1 and 2 again, in the two places S4 found them STILL FIRING. This is the third time this one mechanism has been found live on this page, and the second time after the file declared it handled. Blank puts content:''; display:table on `.fieldset > .field` and on `.actions-toolbar` too, inside @media (min-width: 768px), print. This sheet makes BOTH of those flex containers (section 4 for the fields, section 5 for the toolbar), so each phantom became a flex item and consumed one `gap`. Measured at 1440 with a counterfactual, a negative control (an inert property on the same selectors, which moved nothing) and a restore: .field.note 32.80 -> 20.80 (+12.00) .field.email 82.78 -> 70.78 (+12.00) .field.password 82.78 -> 70.78 (+12.00) .actions-toolbar 102.19 -> 82.19 (+20.00) LOGIN CARD 519.33 -> 463.33 (+56.00) At 375 the same counterfactual moves nothing, because those Blank rules start at 768 - which also falsifies section 7's claim that the resets are written to hold at every width regardless. They were not: the card's internal spacing differed by 56px between mobile and desktop for a reason nobody had declared. */ .customer-account-login .login-container .fieldset > .field.choice::before, .customer-account-login .login-container .fieldset > .field::before, .customer-account-login .login-container .fieldset > .field::after, .customer-account-login .login-container .actions-toolbar::before, .customer-account-login .login-container .actions-toolbar::after { display: none; } .customer-account-login .login-container .fieldset > .field.choice input[type="checkbox"] { accent-color: var(--hrv-accent); margin: 0; } .customer-account-login .login-container .fieldset > .field.choice .label { margin: 0; padding: 0; font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 13px; color: inherit; } /* The required-fields note. `margin: 0` already zeroes Blank's 25.8% left margin — the previous version carried a SECOND block restating that, which measured as a no-op and is removed (a redundant rule whose comment claims it is doing work is how a later editor deletes the wrong one of the pair). COLOUR, S1 MAJOR 4: this was --hrv-text-subtle, which measured 3.86:1 on wheat and 3.82/4.02/4.06/3.91 on the other four — an AA FAIL in every palette, and a REGRESSION, since Luma's #e02b27 passed at 4.62. 12px is not large text, so 4.5 applies with no exemption. Now --hrv-text-muted. The wider finding — that --hrv-text-subtle is ~3.9:1 on surface theme-wide and is used in eight other component sheets — is register #39, filed with this commit. */ .customer-account-login .login-container .fieldset::after { margin: 0; text-align: left; font-size: 12px; color: var(--hrv-text-muted); } /* -------------------------------------------------------------------------- 5. Actions -------------------------------------------------------------------------- */ /* CRITICAL, §3 of the header. Blank's `.column:not(.sidebar-main) form .actions-toolbar` is (0,3,1) — `:not()` carries its argument's weight and `form` adds a type. The previous (0,3,0) rule lost, and the sign-in CTA shipped indented 116.61px at 1440. This selector is (0,4,0). The internal control that isolated the mechanism: the new-customer toolbar, same classes, no `form` ancestor, measured the full 452.00. */ .customer-account-login .login-container .block .actions-toolbar { margin: 0; display: flex; flex-direction: column; gap: 10px; } .customer-account-login .login-container .block .login .actions-toolbar > .primary, .customer-account-login .login-container .block .login .actions-toolbar > .secondary { float: none; margin: 0; } .customer-account-login .login-container .block .actions-toolbar > .primary { display: block; } /* Register: "inline-block wrapper defeats width:100%" — width on the BUTTON resolves against `.primary`, so `.primary` is the element that must be full width. Both are set. NOTE the previous version cited this register while the real cause was the toolbar's inherited margin one level up: the wrapper genuinely did fill its parent, and the parent was displaced. A correct register applied to the wrong element reads exactly like a diagnosis. */ .customer-account-login .login-container .block .actions-toolbar > .primary .action.login { width: 100%; box-sizing: border-box; } .customer-account-login .login-container .block .actions-toolbar > .secondary { display: block; text-align: center; } .customer-account-login .login-container .actions-toolbar > .secondary .action.remind { font-size: 13px; text-decoration: none; } .customer-account-login .login-container .actions-toolbar > .secondary .action.remind:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 6. The new-customer card. NOTE THE HEADING. Core renders "New Customers"; the comp says "New here?". It is NOT built. S3 MAJOR 2: this section used to be titled with the COMP's wording and §5 of the header described the layout the same way, so a reader concluded it had been built. It is now a declared delta in the handle, with the option set the first declaration omitted. -------------------------------------------------------------------------- */ .customer-account-login .login-container .block-new-customer .block-content p { font-size: 14px; line-height: 1.6; color: var(--hrv-text-muted); margin: 0; } .customer-account-login .login-container .block-new-customer .actions-toolbar { margin-top: 6px; } /* S1 MAJOR 3 — the comp draws this CTA OUTLINED and it was shipping SOLID, because the element is `a.action.create.primary` and _buttons.css's filled `.action.primary` landed with nothing overriding it. Two equal-weight primaries sat side by side. WHAT IS BUILT AND WHAT IS NOT, stated because this is a deliberate partial: the comp specifies `background: transparent; border: 1.5px solid var(--ac); color: var(--ac)`. The SHAPE ships — transparent fill and the accent border — because that is what carries the visual hierarchy the comp is expressing. THE ACCENT LABEL COLOUR DOES NOT. Accent-as-text measures 3.04:1 on wheat and 4.39:1 on honey, against a required 4.5 — the identical failure already recorded as registers #14, #16 and #38, all three of which are open and awaiting the user's decision. Shipping it here would knowingly add a fourth instance of a defect this theme has agreed not to patch unilaterally, and it would REPLACE a currently-passing label with a failing one. The label therefore stays on --hrv-text (AA-clear against both the tint and the surface) and the colour question is routed to that same pending decision rather than pre-empted here. S3 MAJOR 1 THEN FOUND THAT THIS FIX INTRODUCED AN ACCESSIBILITY FAILURE WHILE THE PROSE ABOVE PRESENTED IT AS THE ACCESSIBILITY-SAFE HALF. It withheld the accent LABEL against a 4.5:1 bar and then shipped an accent BORDER without measuring it against its own, different, lower bar. On a transparent button the border is the ONLY thing identifying the control, so WCAG 1.4.11 applies at 3:1 - and the accent fails it on WHEAT, the DEFAULT palette, at 2.82. Before the fix this CTA was solid and passed; the fix created the exposure, under a comment about safety. THE "ALL FIVE FAIL" THIS COMMENT USED TO CLAIM WAS FALSE, and S4 caught it. Re-measured twice with independent instruments: wheat 2.82 FAIL, basil 4.54, honey 3.98, plum 6.74, tomato 4.50 - four of five PASS. The likely cause is the shape this task has now produced three times: a probe whose accent endpoint never switched palette while the near-white tint did, leaving five readings clustered in a 0.15 band. The same probe run reproduced registers #39 and #40 exactly on all five palettes, which is what identifies the third row as the broken one rather than the instrument. The ship decision is unchanged - wheat is the default and 2.82 < 3.0 - but the overstated claim is corrected here and in register #41. So the boundary moves to --hrv-text, the body-text token, which clears 3:1 with room in every palette. What ships is the comp's SHAPE — transparent fill, 1.5px boundary, visibly secondary beside the filled sign-in CTA — in a colour the comp did not specify. Both the accent boundary and the accent label are routed to the same pending decision as #14/#16/#38/#39, and the accent-as-BOUNDARY case is filed separately as register #41: 1.4.11 at 3:1 is a different criterion from 1.4.3 at 4.5:1, and no existing row covered it. S1 measured the border as `rgba(0,0,0,0)` before any of this — register #20. S3 MINOR 2: `1.5px` COMPOSITES TO 1px at DPR 1 (computed `borderTopWidth: "1px"`, and exactly one border pixel column in the capture). The comp's 1.5px is authored and renders on a 2x display; on 1x the shape ships at two thirds the specified weight. Stated rather than quietly rounded, because this comment quotes the comp's figure precisely. */ .customer-account-login .login-container .block-new-customer .action.create { background: transparent; border: 1.5px solid var(--hrv-text); color: var(--hrv-text); width: fit-content; } /* Hover and focus fill with the accent and switch to the accent's PAIRED text token — the same pair the filled sign-in CTA already uses, so this state inherits that pair's measured contrast instead of introducing a new one to measure. S3 verified Blank's `.action.primary:focus { background:#006bb4 }` does not repaint this button: Blank's rule is (0,2,0), these are (0,6,0), and the base rule is (0,5,0). S4 MINOR 4 corrected that arithmetic - the previous comment called them all (0,4,0). The conclusion was right and the numbers were not, which is the kind of error that survives because nobody re-counts a figure supporting a conclusion they already accept. */ .customer-account-login .login-container .block-new-customer .action.create:hover, .customer-account-login .login-container .block-new-customer .action.create:focus { background: var(--hrv-accent); color: var(--hrv-accent-text); border-color: var(--hrv-accent); } /* S1 MINOR: this CTA was centred at 375 and left-aligned above it, purely by inheritance (`.primary` inherits text-align:center; the anchor is inline-flex at mobile and flex above). The comp has no mobile artboard, so the alignment was never specified — it is now CHOSEN rather than inherited, and it is left at every width to match the card's other left-aligned content. */ .customer-account-login .login-container .block-new-customer .actions-toolbar > .primary { display: block; text-align: left; } /* -------------------------------------------------------------------------- 7. Responsive — 375 / 768 / 1440 Blank's float/width rules live in styles-l.css and so apply only from 768 up; the resets above are written to hold at every width regardless, because a rule that is only correct inside one media query is a rule waiting for the next breakpoint change. THIS CLAIM WAS FALSE WHEN S4 REVIEWED AND IS TRUE AGAIN NOW. It was falsified by the unreset `::before/::after` on `.field` and `.actions-toolbar`, which are >=768 only and so made the card's internal spacing differ by 56px between mobile and desktop. The reset that closed that (section 4) is unconditional, and S7 re-measured 320 / 375 / 767 / 768 / 1024 / 1440 / 1920 with no width-dependent phantom at any of them. The note in section 4 recording the falsification is history, not a live contradiction - S7 MINOR flagged that a reader could not tell which line was current. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .customer-account-login .login-container { grid-template-columns: 1fr; gap: 16px; } .customer-account-login .login-container .block { padding: 24px; } .customer-account-login .page-main { padding-top: 32px; } .customer-account-login .page-title-wrapper .page-title { font-size: 26px; } }