/* Kabir Family Law - people profile pages, round-5 corrections. ========================================================================== Owned by the people-profile template. Loaded after kfl-people-profile.css, kfl-people-profile-r4.css and kfl-mobile-qa.css, so it settles ties by source order rather than by a specificity race. External file. No inline anything, no web font, no library, no import. Motion: none added. Nothing here animates. Every contrast figure below was computed with the WCAG 2.1 relative luminance formula, not estimated. ========================================================================== */ /* ========================================================================== R4-08 Seven near-miss golds, no scale -------------------------------------------------------------------------- Census over the two profile stylesheets before this file: #B28E2E x7 #8A6E24 x4 #C9A23C x3 #9C7B27 x3 #7A6120 x2 #E8B84B x1 Six values, no published relationship between them, three of them doing a job another already did. This is the scale. Three values, each with one job, named for the job: --kflp-gold #B28E2E the accent itself: fills, rules, dividers --kflp-gold-deep #7A6120 the accent as text or as an edge on a LIGHT ground --kflp-gold-bright #E8B84B the accent as text, or as a raised fill, on the NAVY ground Measured pairs, each past the threshold its job needs: #B28E2E on #17243E navy 5.01:1 AA text, AA large, AA non-text #17243E navy on #B28E2E 5.01:1 AA text #7A6120 on #ffffff 5.89:1 AA text #7A6120 on #F2F5F9 card tint 5.39:1 AA text #E8B84B on #17243E navy 8.36:1 AA text #17243E navy on #E8B84B 8.36:1 AA text Three values are retired here and every use of them is re-pointed: #8A6E24 -> --kflp-gold-deep. It was the "gold as text" value at 4.84:1 on white. #7A6120 does the same job at 5.89:1, so the merge also raises the contrast of every prose link on the page. #9C7B27 -> --kflp-gold-deep. It was the hover fill under white text and measured 4.03:1, BELOW the 4.5:1 that 16px text needs: the primary action lost AA the moment a mouse touched it. #7A6120 under white is 5.89:1. That is a contrast repair, not only a palette tidy. #C9A23C -> --kflp-gold-bright. Round 4 chose it so the button brightens on interaction instead of darkening, and that reasoning is kept exactly; #E8B84B brightens further and is already a token: navy on it measures 8.36:1 against 6.42:1, so the button improves as well as losing a value. The edge token is #7A6120 rather than the fill, because on the light card tint the fill alone measures 2.82:1 and a control boundary needs 3:1; the edge carries it there at 5.39:1. On the navy hero the boundary is carried by the fill against the ground at 5.01:1, so both grounds are covered. The site header's own #FAB500 is NOT touched. It is the shared header's colour on every page of the site, and re-pointing it from a stylesheet that loads on two URLs would make the header inconsistent between pages - a worse fault than the one being fixed. It is reported instead. ========================================================================== */ .kflp{ /* Was #8A6E24. Same role, 5.89:1 on white instead of 4.84:1. */ --kflp-gold-text:#7A6120; } /* The primary action: rest, hover, focus and active, on both grounds. !important only because the declarations these answer carry it. */ body.single-our-people .kflp .kflp-btn-primary, body.single-our-people .kflp a.kflp-btn-primary{ background:var(--kflp-gold) !important; border-color:var(--kflp-gold-deep) !important; color:var(--kflp-navy) !important; } body.single-our-people .kflp .kflp-btn-primary:hover, body.single-our-people .kflp .kflp-btn-primary:focus, body.single-our-people .kflp .kflp-btn-primary:focus-visible, body.single-our-people .kflp .kflp-btn-primary:active, body.single-our-people .kflp a.kflp-btn-primary:hover, body.single-our-people .kflp a.kflp-btn-primary:focus, body.single-our-people .kflp a.kflp-btn-primary:focus-visible, body.single-our-people .kflp a.kflp-btn-primary:active{ background:var(--kflp-gold-bright) !important; border-color:var(--kflp-gold-deep) !important; color:var(--kflp-navy) !important; } /* The secondary action takes the accent itself as its edge, so the pair reads as one family rather than as two separate decisions. */ body.single-our-people .kflp .kflp-btn-ghost, body.single-our-people .kflp a.kflp-btn-ghost{ border-color:var(--kflp-gold) !important; } /* ========================================================================== R4-01 (support) The quiet state must not take the back-to-top with it -------------------------------------------------------------------------- kfl-people-profile-r4.css carries body.single-our-people .sticky-footer.kfl042-quiet{ visibility:hidden } on the container. The container also holds the floating back-to-top control, which the theme shows on scroll, so that rule removed a control the reader had just been offered - and from 768px up the container held nothing else, because .sticky-footer > .cta is display:none there. The container stays visible. The call to action inside it is what steps aside, and it is already opacity:0 and pointer-events:none in that state, with the script marking it inert on top - so it is out of sight, out of reach and out of the accessibility tree without a visibility declaration that would also kill the transition. ========================================================================== */ body.single-our-people .sticky-footer.kfl042-quiet{ visibility:visible; } /* ========================================================================== R4-05 The breadcrumb "Home" was not identifiable as a link -------------------------------------------------------------------------- Measured before: .kflp-crumbs a and .kflp-crumbs .breadcrumb_last were identical on all three properties a reader could use - colour rgb(82,92,112), text-decoration none, font-weight 400 so nothing distinguished the link from the plain current-page text beside it. WCAG 1.4.1: colour alone may not carry meaning, and here not even colour carried it. Its hit area measured 42.7 x 44, under this project's 44px bar on the horizontal axis. Three separate cues, so no single one has to do the work: an underline, a heavier weight, and a different colour. #7A6120 on the #ffffff crumb bar measures 5.89:1. The padding widens the target past 44px; the matching negative margin puts the text back exactly where it was, so the separator spacing is unchanged. ========================================================================== */ .kflp-crumbs #breadcrumbs a, .kflp-crumbs a{ color:var(--kflp-gold-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; font-weight:600; padding-inline:6px; margin-inline:-6px; } .kflp-crumbs #breadcrumbs .breadcrumb_last, .kflp-crumbs .breadcrumb_last{ color:var(--kflp-muted); text-decoration:none; font-weight:400; } /* ========================================================================== R4-06 The desktop hero ended in a slab of empty navy -------------------------------------------------------------------------- Measured at 1440x900 before this file: .kflp-id width 644, right edge 1292.5 last action button right edge 1131.8 -> 160.7px empty hero grid columns 460px 644px, gap 56px The identity column was 644px wide and nothing in it was ever 644px wide, so the column ended in a band of bare navy on every profile. Two changes, and the second is what actually closes the gap: 1. The column ratio moves mass to the photograph. 5fr/7fr becomes 6fr/5.6fr, so at 1440 the columns compute 571 / 533 instead of 460 / 644. The photograph becomes the larger element - the right emphasis on a page whose job is showing a real, credentialled person - and the text column comes down to a width that text can fill. 2. The actions become a filling two-up grid instead of a flex row that stops at its content width. auto-fit with a 240px floor gives two buttons across a column wide enough for two, and one full-width button per row on a column that is not - so a profile with one action and a profile with two both end flush with the column edge. Nothing is invented to fill the space: no fabricated credential, no decorative element without a purpose. The container is fitted to the content instead. ========================================================================== */ @media (min-width:900px){ .kflp-hero-grid{ grid-template-columns:minmax(320px,6fr) minmax(0,5.6fr); } .kflp-actions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; align-items:stretch; } .kflp-actions .kflp-btn{ width:100%; text-align:center; justify-content:center; } } /* ========================================================================== R4-07 The narrowest phone got the weakest crop -------------------------------------------------------------------------- Measured at 320x800: the portrait rendered 288 x 144 from a 768 x 987 original - a 2:1 cinematic band, chin and shoulders clipped, roughly the top third given over to the trees behind the subject. The crop was also stepping the wrong way. It ran 4/5 (0.80) at 600px and up, 16/10 (1.60) below 600, then 2/1 (2.00) below 360: the narrower the screen, the more landscape - the more like a banner and the less like a photograph of a person - on the page whose entire job is showing one. 4/3 for every width below 600. At 320 that is 288 x 216 rather than 288 x 144: 72px more of the subject, head and shoulders inside the frame, and the step now runs 0.80 -> 1.33 in one move instead of 0.80 -> 1.60 -> 2.00 in two. The focus point set on the profile still governs where the crop sits, so a photograph framed differently is still handled. ========================================================================== */ @media (max-width:599.98px){ .kflp-portrait img{aspect-ratio:4/3;max-height:none} } @media (max-width:359.98px){ .kflp-portrait img{aspect-ratio:4/3;max-height:none} } /* ========================================================================== R4-13 Body copy ran past a comfortable reading measure -------------------------------------------------------------------------- .kflp-prose already carried max-width:70ch. The ch unit is the width of the digit zero, which in this face is materially narrower than its average letter, so 70ch bought 661.8px and 661.8px bought far more than 70 characters. Counted, not estimated: each paragraph's rendered lines were counted from Range.getClientRects and divided into its own character count. 661.8px -> 75.2, 78.0 and 82.2 characters per line on the three long paragraphs of the biography. The standard in the design skill is 65-75. 580px is the width that lands all three inside the band: 82.2 x 580/661.8 = 72.0 78.0 -> 68.4 75.2 -> 65.9 Applied only from 900px up, where the two-column layout exists; below that the column is already narrower than the measure. ========================================================================== */ @media (min-width:900px){ .kflp .kflp-prose{max-width:580px} } /* ========================================================================== Colour contrast inside the enquiry form (axe-core 4.10.2, serious) -------------------------------------------------------------------------- Measured on this page: "Element has insufficient color contrast of 2.84 (foreground #999999, background #ffffff, font size 14px)" on .iti__selected-dial-code - the international dial-code text in the telephone field of the enquiry form, which is this template's own section. #525C70 on white measures 7.49:1. Scoped to this template's sections, so no other page's form is restyled from here. ========================================================================== */ .kflp .iti__selected-dial-code, .kflp .iti__dial-code, .kflp .iti__country-name{ color:var(--kflp-muted); }