/** * Waxman Candles — accessibility remediation stylesheet * WCAG 2.1 A/AA + reduced-motion (2.3.3) * * Colour policy (agreed with client): * Brand gold #DBA742 is KEPT for decorative fills, borders and rules. * It is replaced ONLY where it carries text, using two computed tokens: * --wax-gold-strong #8E6C2B 4.59:1 on white — normal/bold text & small buttons * --wax-gold-large #B28736 3.11:1 on white — text >=24px (or >=18.66px bold) * * Every value was computed, not eyeballed (see audit/colors.js), against * the WORST background actually present on the site (#F9F9F9, not #FFF) * plus a +0.10 margin. Two earlier passes were caught by this: values * computed to land exactly on the threshold measured back 0.01 short * (browsers round), and values computed against pure white failed at * 4.35 on the off-white panel used by /accessibility-statement/. */ :root { --wax-gold: #DBA742; /* unchanged — decorative only */ --wax-gold-strong: #8E6C2B; /* 4.85 on #FFF, 4.61 on #F9F9F9 */ --wax-gold-large: #B28736; /* 3.28 on #FFF, 3.11 on #F9F9F9 */ --wax-star: #9E6515; /* 4.85 on #FFF, 4.61 on #F9F9F9 */ --wax-teal-strong: #559EA0; /* 3.10:1 vs #FFF */ --wax-grey-strong: #777777; /* 4.50:1 vs #FFF */ --wax-peri-strong: #8A8CA8; /* 3.28 on #FFF, 3.12 on #F9F9F9 */ } /* --------------------------------------------------------------- 1.4.3 — The Events Calendar buttons "Find Events" = white on gold; needs 4.5:1 (14px bold). --------------------------------------------------------------- */ .tribe-common .tribe-common-c-btn, .tribe-common button.tribe-common-c-btn, .tribe-events .tribe-events-c-search__button { background-color: var(--wax-gold-strong) !important; border-color: var(--wax-gold-strong) !important; color: #fff !important; } .tribe-common .tribe-common-c-btn:hover, .tribe-common .tribe-common-c-btn:focus, .tribe-events .tribe-events-c-search__button:hover, .tribe-events .tribe-events-c-search__button:focus { background-color: #7C5F26 !important; border-color: #7C5F26 !important; } /* "Add to calendar" / "Subscribe to calendar" = gold text on white */ .tribe-events .tribe-events-c-subscribe-dropdown__button-text, .tribe-events .tribe-events-c-subscribe-dropdown__button, .tribe-events .tribe-events-c-subscribe-dropdown__list-item a { color: var(--wax-gold-strong) !important; } /* Disabled month/list nav was #D5D5D5 on white = 1.47:1. Scoped to the DISABLED state only. An earlier, broader version of this rule also hit the enabled labels and pulled them from 14.3:1 down to 4.7:1 — still passing, but a pointless loss of legibility. */ .tribe-events .tribe-events-c-nav__prev[disabled], .tribe-events .tribe-events-c-nav__next[disabled], .tribe-events .tribe-events-c-nav__prev--disabled, .tribe-events .tribe-events-c-nav__next--disabled, .tribe-events [disabled] .tribe-events-c-nav__prev-label, .tribe-events [disabled] .tribe-events-c-nav__next-label, .tribe-events .tribe-events-c-nav__prev--disabled .tribe-events-c-nav__prev-label, .tribe-events .tribe-events-c-nav__next--disabled .tribe-events-c-nav__next-label { color: var(--wax-grey-strong) !important; } /* Month grid "N events" heading — gold on white at 24px bold */ .tribe-events .tribe-events-calendar-month__day-cell--selected, .tribe-events .tribe-events-calendar-month__header-column-title, .tribe-events .tribe-events-calendar-month__day-date { color: var(--wax-gold-strong) !important; } /* --------------------------------------------------------------- 1.4.3 — Divi fullwidth page-title banners (white on gold, >=24px) --------------------------------------------------------------- */ .et_pb_fullwidth_header.et_pb_bg_layout_dark, .et_pb_fullwidth_header[class*="et_pb_fullwidth_header_"] { background-color: var(--wax-gold-large) !important; } .et_pb_fullwidth_header .et_pb_fullwidth_header_container .header-content h1, .et_pb_fullwidth_header .et_pb_header_content_wrapper, .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead { color: #fff !important; } /* --------------------------------------------------------------- 1.4.3 — Divi buttons that carry gold or teal backgrounds --------------------------------------------------------------- */ .et_pb_button[href="#top"], .et_pb_button.et_pb_bg_layout_light[style*="219,167,66"], .et_pb_button.et_pb_bg_layout_light[style*="#dba742"], .et_pb_button.et_pb_bg_layout_light[style*="#DBA742"] { background-color: var(--wax-gold-strong) !important; color: #fff !important; } /* "LEAVE A REVIEW" teal button — 25px bold, large text, needs 3:1 */ .et_pb_button[href*="g.page/r/"] { background-color: var(--wax-teal-strong) !important; color: #fff !important; } /* --------------------------------------------------------------- 1.4.3 — Gold body copy that carries text (phone / email links). --------------------------------------------------------------- */ .et_pb_text a[href^="tel:"], .et_pb_text a[href^="mailto:"] { color: var(--wax-gold-strong); } /* --------------------------------------------------------------- 1.4.3 — Gold links confirmed failing by axe-core: .tribe-events-c-breadcrumbs__list-item-link 2.18:1 14px bold a[rel="tag"] (event category links) 2.18:1 14px bold --------------------------------------------------------------- */ .tribe-events .tribe-events-c-breadcrumbs__list-item-link, .tribe-events-c-breadcrumbs__list-item-link, .tribe-events a[rel="tag"], .single-tribe_events a[rel="tag"] { color: var(--wax-gold-strong) !important; } /* --------------------------------------------------------------- 1.4.3 — Contact page headings (page id 590). Scoped by page id rather than by .et_pb_text_N, because Divi's module numbering is per-page: .et_pb_text_1 on Contact is a different module from .et_pb_text_1 elsewhere. Targeting the raw class would recolour unrelated headings across the site. h4 #A8ABCC on #FFF 2.24:1 46px h5 #DBA742 on #FFF 2.18:1 33px (x3) --------------------------------------------------------------- */ body.page-id-590 .et_pb_text_inner h4 { color: var(--wax-peri-strong) !important; } body.page-id-590 .et_pb_text_inner h5 { color: var(--wax-gold-large) !important; } /* --------------------------------------------------------------- 1.4.3 — Testimonial star ratings (#EC971F on white = 2.33:1) --------------------------------------------------------------- */ .dipi-testimonial-star-rating, .dipi-testimonial-star-rating * { color: var(--wax-star) !important; } /* --------------------------------------------------------------- 1.4.1 Use of Colour (Level A) — month-grid day numbers. The day numbers in the month calendar are links, but they render in exactly the same colour as the text around them, with no underline and no border. There is therefore no non-colour cue that they are interactive — and in fact no colour cue either. Confirmed against the axe-core rule link-in-text-block (8 nodes on /events/month/). This is a deliberate visible change, approved by the client on 29 September 2026. Underlining is the conventional fix and is the one axe accepts. --------------------------------------------------------------- */ .tribe-events .tribe-events-calendar-month__day-date-link, .tribe-events-calendar-month__day-date-link { text-decoration: underline !important; text-underline-offset: 2px; text-decoration-thickness: 1px; } .tribe-events .tribe-events-calendar-month__day-date-link:hover, .tribe-events .tribe-events-calendar-month__day-date-link:focus-visible, .tribe-events-calendar-month__day-date-link:hover, .tribe-events-calendar-month__day-date-link:focus-visible { text-decoration-thickness: 2px !important; } /* --------------------------------------------------------------- Visually-hidden helper for the accessible-name fixes in a11y.js. Matches the WordPress core .screen-reader-text contract. --------------------------------------------------------------- */ .wax-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------- 2.4.7 — Make the keyboard focus ring visible everywhere. Divi suppresses outlines on several controls. --------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #1A1A1A !important; outline-offset: 2px !important; } /* Skip link must be reachable and visible once focused */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; } .skip-link:focus { left: 0; padding: 12px 20px; background: #fff; color: #1A1A1A; font-weight: 700; text-decoration: underline; } /* --------------------------------------------------------------- 2.3.3 — Honour prefers-reduced-motion. Divi et_pb_button ::after transitions and slider animations. --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }