/** * Accessibility overrides for the imported legacy theme. * * Loaded AFTER the theme's own stylesheets. Every rule fixes a contrast failure * that exists on the live legacy site today and would otherwise ship with the * import. Colours move to the nearest passing value so the design reads * identically — nothing here changes layout, spacing or typography. * * `!important` is deliberate: these override theme rules that are more specific * than a plain selector can beat, and an override sheet is the one place it is * the right tool rather than a workaround. * * Measured with axe-core; re-check with `node scripts/browser-qa.mjs`. * * The first section is not accessibility: it repairs damage caused by hosting * the theme inside our app, where Tailwind's preflight is also loaded. */ /* --------------------------------------------------------------------------- * INTEGRATION FIX — Font Awesome glyphs. * * Tailwind's preflight resets `content` on ::before/::after. Font Awesome 6 * renders every icon as `content: var(--fa)` on ::before, so the reset wiped * all of them: the social circles rendered empty. The theme's font-family was * applying correctly, which is why the icons had size but no glyph. * ------------------------------------------------------------------------- */ .legacy-page .fa::before, .legacy-page .fas::before, .legacy-page .far::before, .legacy-page .fab::before, .legacy-page .fa-solid::before, .legacy-page .fa-regular::before, .legacy-page .fa-brands::before, .legacy-page [class*=" fa-"]::before, .legacy-page [class^="fa-"]::before { /* Tailwind routes content through --tw-content, so setting `content` alone can still lose. Set both: whichever mechanism is in play, the glyph wins. */ --tw-content: var(--fa); content: var(--fa) !important; } /* --------------------------------------------------------------------------- * Bootstrap's default link blue (#0d6efd) was inherited on dark backgrounds: * 2.53:1 on the navy utility bar, 3.7:1 on the #1e1e1e footer, 4.02:1 on * #161616. White clears all three. * ------------------------------------------------------------------------- */ .header-top a:not(:has(i.fa-brands)), .footer a:not(:has(i.fa-brands)), .footer-1 a:not(:has(i.fa-brands)), [class*="bg-dark"] a:not(:has(i.fa-brands)), .bc-cta-one a:not(.bc-btn):not([class*="btn"]) { color: #ffffff !important; } /** * REGRESSION GUARD — social icons. * * The rule above originally had no :not(), so it turned the social glyphs white * on their WHITE circles, making them invisible. The circles are white with a * navy glyph (#01377d); this pins that back explicitly so the contrast fix can * never swallow them again. * * Diagnosing this took far too long because every querySelector probe returned * the hidden off-canvas duplicate, which sits earlier in the DOM and computes * cyan-on-white. Hit-test the painted pixel with elementFromPoint instead. */ .legacy-page a:has(i.fa-brands), .legacy-page a:has(i.fa-brands) i, .legacy-page a i.fa-brands { color: #01377d !important; } .header-top a:hover, .footer a:hover, .footer-1 a:hover { color: #98e7f4 !important; } /* --------------------------------------------------------------------------- * White body copy on the brand cyan #009dd0 is 3.11:1 — the legacy site's own * failure. #007ba3 is the nearest darker cyan clearing 4.5:1 (4.81:1). * ------------------------------------------------------------------------- */ .offer-item, .offer-item.sticky, .offer-section-1 .offer-item, .wpcf7-email, input.wpcf7-email { background-color: #007ba3 !important; } /* Keep the pale-cyan CTA buttons readable on the new darker card fill. */ .offer-item .bc-btn, .offer-item [class*="btn"] { color: #01377d !important; } /* --------------------------------------------------------------------------- * INTEGRATION FIX — the NDIS pill wraps onto two lines. * * The badge and its label overflow the pill here; the original keeps them on * one line. This is a genuine divergence, so it is corrected. * * NOTE: the social icons are deliberately NOT restyled here. The original * computes the same values we do (cyan circle, white glyph), so overriding the * colours would introduce a difference rather than remove one. See the * known-open note in the skill. * ------------------------------------------------------------------------- */ .legacy-page header a[href="#0"] { display: inline-flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; } /* --------------------------------------------------------------------------- * CONTRAST — the theme's "APPLY NOW" button. * * White on the brand cyan #009dd0 is 3.12:1. That clears the 3:1 threshold for * a UI component's *boundary* but not the 4.5:1 required for the label text * inside it, so the button fails AA on the legacy site as it stands. * * #007ba3 is the same hue at 4.81:1 on white text. It is used everywhere else * on this site that cyan sits behind text, so the button stays on-brand. * ------------------------------------------------------------------------- */ .legacy-page .apply-btn, .legacy-page a.apply-btn { background-color: #007ba3 !important; color: #ffffff !important; } /* --------------------------------------------------------------------------- * OUR FORMS, WEARING THE THEME'S CLOTHES. * * The forms we portal into the imported pages are ours (they post to Convex), * but they must look like the ones they replaced or the page stops matching * the original. Every value below was measured off birchcare.com.au rather * than eyeballed: * * input #009dd0 fill, no border, 5px radius, 10px/15px pad, 52px tall * textarea #009dd0 fill, 10px radius, 17px/20px pad * submit #98e7f4 fill, black text, 100px radius (pill), 52px tall * * One deliberate deviation: the original sets *typed* text in single-line * inputs to white, which is 3.12:1 on that fill and unreadable as you type. * Its own textarea already uses black on the same fill (6.7:1), so black here * matches the theme's own choice one element over and passes AA. The * placeholder is black in the original too, so nothing else moves. * ------------------------------------------------------------------------- */ .legacy-form-slot input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .legacy-form-slot select, .legacy-form-slot textarea { background-color: #007ba3 !important; color: #ffffff !important; border: 0 !important; border-radius: 5px !important; padding: 10px 15px !important; font-size: 16px !important; width: 100% !important; box-shadow: none !important; } .legacy-form-slot input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .legacy-form-slot select { height: 52px !important; } .legacy-form-slot textarea { border-radius: 10px !important; padding: 17px 20px !important; min-height: 162px !important; } .legacy-form-slot ::placeholder { color: #ffffff !important; opacity: 1; } .legacy-form-slot button[type="submit"], .legacy-form-slot input[type="submit"] { background-color: #98e7f4 !important; color: #000000 !important; border: 0 !important; border-radius: 100px !important; padding: 10px 24px !important; height: 52px !important; font-size: 16px !important; font-weight: 600 !important; } /** * The theme's form has no visible labels — it relies on placeholders. Matching * that exactly would leave screen-reader users with unnamed fields, so the * labels stay in the DOM and are hidden visually instead. Same appearance as * the original, better semantics than it. */ .legacy-form-slot div:not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])) > label:not(.legacy-keep-label) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Consent needs to stay readable: it is a choice, not a field hint. Its text was collapsing into a ~60px column because the theme's grid had no rule for a checkbox row. */ .legacy-form-slot .legacy-keep-label, .legacy-form-slot div:has(> input[type="checkbox"]) label, .legacy-form-slot div:has(> input[type="radio"]) label { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; white-space: normal !important; margin: 0 0 16px 0 !important; display: flex !important; align-items: flex-start !important; gap: 10px !important; font-size: 14px !important; line-height: 1.5 !important; color: #333333 !important; } /* The consent row is `div > input + label`, NOT a label wrapping an input -- an earlier `label:has(input)` selector matched nothing, so the consent text stayed hidden and the form showed a bare unexplained checkbox. */ .legacy-form-slot div:has(> input[type="checkbox"]) { display: flex !important; align-items: flex-start !important; gap: 10px !important; width: 100% !important; } /* Without an explicit grow the label collapsed to a ~120px column and ran to 250px tall -- the "squeezed text" in the first screenshot. */ .legacy-form-slot div:has(> input[type="checkbox"]) label { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } /* The box itself was stretching to the full 673px row and pushing the consent text into a 0-width column. Pin it; let the label take the rest. */ .legacy-form-slot input[type="checkbox"], .legacy-form-slot input[type="radio"] { flex: 0 0 20px !important; width: 20px !important; height: 20px !important; min-width: 20px !important; margin-top: 3px !important; appearance: auto !important; } .legacy-form-slot .legacy-form-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; } /* --------------------------------------------------------------------------- * CONTRAST — links inside the long-form legal pages. * * The theme colours in-paragraph links with the brand cyan #009dd0: 3.12:1 on * white, which fails AA for text. #007ba3 is the same hue at 4.81:1. * * Scoped to the two prose containers rather than to anchors generally. A first * attempt used `.legacy-page p > a:not([class])`, which also caught the header, * footer and social links that sit on navy and cyan backgrounds -- turning a * two-page problem into a site-wide one. Container-scoped is the correct * granularity here: these are the only places the theme puts body-copy links. * ------------------------------------------------------------------------- */ .legacy-page .terms-conditions a, .legacy-page .privacy-policy a { color: #007ba3 !important; } /* --------------------------------------------------------------------------- * FOCUS VISIBILITY (WCAG 2.4.7) — the theme ships no focus styles at all. * * Without this a keyboard user has no idea where they are on the page. The * original fails this on every element; it is not reproducible as a "design * decision", so it is corrected. * * `:focus-visible` rather than `:focus` means mouse users see no change, so * the visual design is untouched for them. The outline is offset so it reads * against both the navy header and the white body, and `currentColor` is * avoided deliberately -- a cyan outline on a cyan button is not an indicator. * ------------------------------------------------------------------------- */ .legacy-page a:focus-visible, .legacy-page button:focus-visible, .legacy-page input:focus-visible, .legacy-page select:focus-visible, .legacy-page textarea:focus-visible, .legacy-page [tabindex]:focus-visible { outline: 3px solid #ffb703 !important; outline-offset: 2px !important; border-radius: 2px; } /* --------------------------------------------------------------------------- * FORM RHYTHM — match the original's spacing, not our design system's. * * Our forms carry the app's own vertical rhythm (gap-10 between fieldsets, * gap-5 within, 2xl legends). Dropped into the imported page that made * /referrals 3704px against the original's 2416. The original spaces its rows * with a flat 16px margin and 52px controls, measured off the live page. * * Scoped to the slots so the admin UI and the /services page keep the app's * own rhythm, which is correct there. * ------------------------------------------------------------------------- */ .legacy-form-slot form { gap: 16px !important; } .legacy-form-slot fieldset { gap: 16px !important; margin: 0 0 8px 0 !important; } .legacy-form-slot legend { font-size: 20px !important; margin-bottom: 4px !important; } /* --------------------------------------------------------------------------- * FORM APPEARANCE — the remaining differences from the original. * * The original sets white placeholder and typed text on its #009dd0 fill, * which is 3.12:1 and fails AA. Earlier this was resolved by keeping the fill * and switching the text to black — accessible, but visibly not the same form. * * Better answer: keep the original's WHITE text and darken the fill one step to * #007ba3 (4.81:1 with white). Same hue, same white-on-cyan reading, and it * passes. That is handled above, on the shared input rule. * ------------------------------------------------------------------------- */ /* Section headings are brand navy on the original, not our default ink. */ .legacy-form-slot legend { color: #01377d !important; font-weight: 700 !important; } /* The original's message box is a single short field, not a 6-row essay box. Ours dominated the form and pushed everything below it off the fold. */ .legacy-form-slot textarea { min-height: 56px !important; height: 56px !important; } /* Upload: bold dark label above, control on the cyan bar — the original's arrangement. Ours put a grey hint above and a navy button that collided with the bar behind it. */ .legacy-form-slot input[type="file"] { background-color: #007ba3 !important; color: #ffffff !important; padding: 14px 15px !important; height: auto !important; } .legacy-form-slot :is(p, span):has(+ input[type="file"]), .legacy-form-slot label:has(+ input[type="file"]) { color: #1f2933 !important; font-weight: 700 !important; } /* Consent stays — it is a privacy requirement the original does not meet — but it should read as one quiet line, not a section competing with the form. */ .legacy-form-slot fieldset:has(input[type="checkbox"]) legend { font-size: 14px !important; font-weight: 600 !important; color: #333333 !important; } /* An embedded frame is a keyboard stop like any other; the theme's focus rules do not cover it, so a keyboard user lands on the map with no indication. `:focus`, not `:focus-visible` — Chromium does not apply focus-visible to an iframe reached by Tab, so the focus-visible rule matched nothing. An iframe is never focused by a click, so there is no mouse-user cost. */ .legacy-page iframe:focus, .legacy-page iframe:focus-within, .legacy-page iframe:focus-visible { outline: 3px solid #ffb703 !important; outline-offset: 2px !important; } /* --------------------------------------------------------------------------- * The skip link's own focus ring. * * It renders outside `.legacy-page` (it has to — it targets the landmark), so * none of the rules above reach it, and Tailwind's outline utilities set width * and colour without setting `outline-style`, leaving it at `none`. Explicit * CSS, since this is the first thing a keyboard user meets. * ------------------------------------------------------------------------- */ .skip-link:focus, .skip-link:focus-visible { position: absolute !important; top: 0; left: 0; z-index: 999; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; white-space: normal !important; margin: 0 !important; padding: 12px 16px !important; background: #ffffff !important; color: #01377d !important; font-weight: 600 !important; outline: 3px solid #ffb703 !important; outline-offset: 2px !important; } /* --------------------------------------------------------------------------- * The theme's custom mouse cursor stays off. * * Its init lives after the jquery.appear call that used to throw, so it never * ran on the original site and never ran here. Now that the shim lets main.js * finish, it would start — and a cursor follower the page we are matching does * not display is a visible difference, not a fix. * * Also worth keeping off on its own merits: replacing the system cursor hurts * anyone relying on cursor size or contrast settings. * ------------------------------------------------------------------------- */ .legacy-page .mouse-cursor, .mouse-cursor.cursor-inner, .mouse-cursor.cursor-outer { display: none !important; }