/* =========================================================================== portal.css — the client portal's own layer. [client-portal-2026-08-23] Loaded AFTER css/style.css (the design system: :root tokens, Cinzel and Montserrat, .btn, .form-field, .svc-card) and AFTER css/site.css (the booking-wizard layer: the week strip, .pay-when, .consent-block). NOTHING HERE RESTATES SOMETHING THOSE TWO ALREADY DO. Roughly sixty classes are reused as they stand. What is below is the nine things that genuinely do not exist yet, about thirty lines of pattern lifted out of the staff app's admin.css (which is NOT served to clients and must not become a link on a customer's page), and three fixes to rules that fail WCAG 2.1 AA today. Every foreground/background pair used here was checked against the real hex values in style.css. The ratios are written beside the rules that use them. =========================================================================== */ :root { /* NEW. The smallest gold text — 0.62rem to 0.72rem labels, the price rail, the reveal control — where --gold-deep's 5.08:1 on --bg-soft is closer to the line than a 12px uppercase label should ever be. #6F5222 on --bg #FCFAF6 6.94:1 #6F5222 on --bg-soft #F4F1E8 6.40:1 #6F5222 on --surface #FFFFFF 7.23:1 Note --gold #B68A45 is 3.00:1 on --bg and is therefore DECORATION ONLY in this portal: rules, borders, badge edges. It is never a glyph on cream. The staff app's #8C6A34 is deliberately not imported — it is 4.40:1 on --bg-soft and fails. */ --gold-ink: #6F5222; /* 8.29:1 against --bg. style.css styles focus on form inputs and on nothing else, so every button and link on the public site is currently invisible when focused. The portal does not repeat that. */ --focus: var(--green); --err-ink: #8F3D33; /* 6.99:1 on --bg */ --ok-ink: #235C37; /* 7.58:1 on --bg */ --tabbar-h: 58px; } /* -------------------------------------------------------------------------- 1. Skip link. There is not one anywhere in public/ today (2.4.1). -------------------------------------------------------------------------- */ .skip { position: absolute; left: -9999px; } .skip:focus { left: 10px; top: 10px; z-index: 100; background: var(--surface); border: 1px solid var(--green); color: var(--green); padding: 11px 16px; border-radius: var(--radius); font-family: "Montserrat", sans-serif; font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 2. A visible focus ring on everything, not just inputs (2.4.7). -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; } main:focus { outline: none; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Three existing AA failures the portal must not inherit. site.css .wk-slot borders at 1.46:1 and .wk-dn day names at 2.96:1 are the booking slot buttons and the letters above them — the two things a man is actually aiming at. The placeholder is 4.21:1. All three are corrected here rather than in the shared files, so nothing on the public site moves. -------------------------------------------------------------------------- */ .portal .wk-slot { border-color: var(--line-strong); } /* 3.20:1 */ .portal .wk-dn { color: var(--grey); } /* 5.53:1 */ .portal .form-field input::placeholder { color: var(--grey); }/* 5.53:1 */ .portal .wk-none { color: var(--grey); } .portal .wk-loading { color: var(--grey); } /* -------------------------------------------------------------------------- 4. The tab bar. Three destinations, permanently on screen, at the bottom of the display where a thumb already is. Above 861px the same