/** * Colour contrast corrections. * * WCAG 2.1 — 1.4.3 Contrast (Minimum) (Level AA) * * This is the one part of the accessibility work that is visible. Contrast is a * property of the palette itself, so unlike everything else in this theme it * cannot be fixed without touching colour values. * * The good news is that the brand orange #E8431F clears 3:1 against white, * cream and navy, which is all that 1.4.3 asks of large text (24px, or 18.66px * when bold) and of non-text UI. Every headline, every big display number and * every icon therefore keeps the exact brand colour. Only small text needed to * move, and only far enough to reach 4.5:1 — the shifts below were solved in * OKLCh so hue and chroma are preserved and only lightness changes. * * role was now ratio change * ---------------------------------------------------------------- * orange small text #E8431F #D12900 4.50 ΔE ~6 * eyebrow labels (h5) #F25A39 #D12900 4.50 ΔE ~11 * orange button surface #E8431F #DD3810 4.52 ΔE ~3 * orange on navy #E8431F #F7512F 4.52 ΔE ~4 * muted body grey #8A8BA6 #74748F 4.53 ΔE ~8 * neutral form grey #7A7A7A #767676 4.54 ΔE ~1 * * Two caveats worth knowing: * * 1. The permanent fix is to change these values in Elementor (Site Settings → * Global Colors, and the handful of per-widget colour pickers listed * below). Elementor regenerates its CSS from those, and this file can then * be deleted. Until that happens this layer overrides Elementor's * generated CSS, which is why every rule needs !important. * * 2. The selectors keyed to .elementor-element- are tied to the widgets * that exist today. If a section is rebuilt, its id changes and its rule * here stops matching. Re-run `npm run audit:live` after any significant * page edit to catch that. */ :root { /* Small text on white or cream. Passes 5.21:1 on white, 4.50:1 on cream. */ --sd-orange-on-light: #d12900; /* Small text on the navy panels. Lightened rather than darkened. Measured against the accordion panel ground; axe can resolve that background from the cascade and reports it passing. */ --sd-orange-on-dark: #f7512f; /* Small text on the lighter, textured navy that carries the section eyebrow labels. That ground measures rgb(47,46,92) behind the glyphs — light enough that neither --sd-orange-on-dark (3.70:1) nor the brand #F25A39 (3.78:1) reaches the 4.5:1 these 16px labels need. Solved in OKLCh with the brand hue and chroma held, lightness raised until it cleared with margin: 4.74:1 there, 5.60:1 on the panel navy. Scoped to those sections only — on cream it would measure 2.29:1. */ --sd-orange-on-navy-light: #fe7558; /* Orange surfaces that carry white text. */ --sd-orange-surface: #dd3810; /* Muted body copy on white. */ --sd-grey-on-light: #74748f; /* Neutral grey for form supporting text. */ --sd-grey-neutral: #767676; } /* --------------------------------------------------------------------------- * Durable rules — keyed to a value or a stable structure, so these keep working * even if the page is rebuilt. * ------------------------------------------------------------------------ */ /* Inline "color:#E8431F" set from the Elementor text editor. Three elements use it: the emphasis on the homepage and the two prose links on the policy pages — all small text, all failing. No inline #F25A39 exists. */ [style*="color:#E8431F" i], [style*="color: #E8431F" i] { color: var(--sd-orange-on-light) !important; } /* Nested accordion titles sit on the navy panel, where orange must go lighter, not darker. */ .e-n-accordion-item-title-text, .e-n-accordion-item-title .e-n-accordion-item-title-text { color: var(--sd-orange-on-dark) !important; } /* The consent checkbox's supporting text. */ label[for="form-field-consimtamant"], .elementor-field-type-acceptance .elementor-field-option label { color: var(--sd-grey-neutral) !important; } /* --------------------------------------------------------------------------- * Widget-specific rules — generated from the axe report for the current build. * Each block notes what it fixes so it can be retired individually once the * colour is corrected at source in Elementor. * ------------------------------------------------------------------------ */ /* Eyebrow labels in #F25A39 on the cream background, 16px at weight 900. At 2.88:1 these were the worst failures on the site. The larger #F25A39 and #E8431F headings — the 88px "Floreasca", the 60px "E un takeover urban.", the 26px district names — clear the 3:1 that applies at their size, so they keep the exact brand colour. "Program" and "Unde are loc" are handled separately below. Both are 16px at weight 900, which is NOT large text: large-scale means 24px, or 18.66px when bold, so 4.5:1 applies to them and not 3:1. An earlier revision grouped "Program" here on the assumption it sat on cream and cleared "Unde are loc" against the 3:1 threshold; measuring the painted pixels showed both to be wrong. See scripts/a11y-contrast-pixels.mjs. */ .elementor-element-1ff4553 .elementor-heading-title, .elementor-element-6e9bde79 .elementor-heading-title { color: var(--sd-orange-on-light) !important; } /* The two eyebrow labels that sit on the lighter textured navy rather than on cream. axe cannot judge these itself — a pseudo-element overlay sits between the text and the section background, so it reports them as "needs review" rather than pass or fail, which is where they had been sitting unexamined. Measured from the painted pixels: "Program" was 2.42:1, "Unde are loc" 4.47:1 against a 4.5:1 requirement. */ .elementor-element-b5a0508 .elementor-heading-title, .elementor-element-75188798 .elementor-heading-title { color: var(--sd-orange-on-navy-light) !important; } /* Muted grey body copy under the newsletter heading and in the footer. */ .elementor-element-6e3ef3df, .elementor-element-6e3ef3df p, .elementor-element-a6863a2, .elementor-element-a6863a2 p, .elementor-element-15700a27, .elementor-element-15700a27 p { color: var(--sd-grey-on-light) !important; } /* Orange surfaces carrying white text: the header CTA, the in-page CTA and the newsletter submit button. Darkening the surface keeps the white text and is a smaller visual change than tinting the text would be. */ .elementor-element-693d626 .elementor-button, .elementor-element-3835126 .elementor-button, .elementor-element-5fa03c3 .elementor-button[type="submit"], .elementor-element-5fa03c3 .e-form__buttons__wrapper__button-next { background-color: var(--sd-orange-surface) !important; } /* The full-width orange band. Its heading and icon list are white, so the band itself is what has to move. */ .elementor-element-41eb1271:not(.elementor-motion-effects-element-type-background) { background-color: var(--sd-orange-surface) !important; } /* --------------------------------------------------------------------------- * Placeholder text * * Placeholders are the only visible cue on the newsletter fields, so they carry * real information and must meet 4.5:1 rather than being treated as decorative. * ------------------------------------------------------------------------ */ .elementor-field-textual::placeholder { color: var(--sd-grey-neutral) !important; opacity: 1 !important; } /* --------------------------------------------------------------------------- * 1.4.1 Use of Color (Level A) * * Prose links are distinguished from surrounding body copy by colour alone. * axe measures link colour against the text around it and wants 3:1 without a * non-colour cue; the original orange scraped past at 3.06:1 against the * #33344F body text, and darkening it for 1.4.3 dropped that to 2.30:1. * * Chasing both thresholds with a single colour is a losing game — one of them * always gives. An underline settles it permanently: with a non-colour cue * present the ratio no longer matters, and it is what readers expect a link in * a paragraph to look like anyway. * * Scoped to prose only. Buttons, nav menus, icon lists and gallery tiles are * unaffected, so nothing in the page's visual design changes except that links * inside sentences are now underlined. * ------------------------------------------------------------------------ */ .elementor-widget-text-editor a:not([class*="elementor-button"]), .elementor-widget-theme-post-content a:not([class*="elementor-button"]), .entry-content p a:not([class*="elementor-button"]), .entry-content li a:not([class*="elementor-button"]), .sd-main-content p > a:not([class]), .sd-main-content li > a:not([class]) { text-decoration: underline !important; text-underline-offset: 0.18em; text-decoration-thickness: max(1px, 0.06em); } /* Keep the underline out of layout elements that merely happen to sit in a text widget, such as an inline logo or icon link. */ .elementor-widget-text-editor a:has(> img), .elementor-widget-theme-post-content a:has(> img) { text-decoration: none !important; } /* --------------------------------------------------------------------------- * 1.4.11 Non-text Contrast (Level AA) — mobile menu toggle * * The hamburger toggle rendered as #33373D on the #171938 header: a contrast * ratio of 1.42:1 against a required 3:1, which in practice means it was very * nearly invisible. On mobile it is the only route into the navigation, so this * was the most functionally serious contrast problem on the site — and one that * automated text-contrast checking cannot see, because it is an icon, not text. * * White matches the logo and the other header icons (15.39:1) and is almost * certainly what the design intended; the dark value looks like an Elementor * default that was never overridden. * ------------------------------------------------------------------------ */ .elementor-menu-toggle, .elementor-menu-toggle svg, .elementor-menu-toggle .e-font-icon-svg { color: #ffffff !important; fill: #ffffff !important; }