and no page title. Moving them to the standard template fixes * the missing landmark and heading, but the theme's default dark navy * title and pink links then sit on the pages' near-black background. * Scoped by page id so no other page is affected. * ----------------------------------------------------------------------- */ body.page-id-9599 .hpc-main .entry-title, body.page-id-11236 .hpc-main .entry-title, body.page-id-11233 .hpc-main .entry-title, body.page-id-11232 .hpc-main .entry-title, body.page-id-9599 .entry-title, body.page-id-11236 .entry-title, body.page-id-11233 .entry-title, body.page-id-11232 .entry-title { color: #ffffff !important; } body.page-id-9599 .entry-content a, body.page-id-11236 .entry-content a, body.page-id-11233 .entry-content a, body.page-id-11232 .entry-content a, body.page-id-9599 .elementor-widget-container a, body.page-id-11236 .elementor-widget-container a, body.page-id-11233 .elementor-widget-container a, body.page-id-11232 .elementor-widget-container a { color: #ff6f9c !important; } /* -------------------------------------------------------------------------- * 7. Raise specificity so the `.whitea` light-on-dark panel rule beats the * dark-ink bold-link rule above, which matches at the same weight. * ----------------------------------------------------------------------- */ .elementor-element.whitea .elementor-element .elementor-widget-container p strong a, .elementor-element.whitea .elementor-element .elementor-widget-container p a { color: #ffffff !important; } /* -------------------------------------------------------------------------- * 8. The mid-blue panel's class is `whitea` (not `white` - it reads as a * truncation but is the real class in the page content). Any link inside * it must be white: dark ink measured 4.07:1, white measures 4.55:1. * ----------------------------------------------------------------------- */ .elementor-element.whitea a, .elementor-element.whitea p a, .elementor-element.whitea strong a, .elementor-element.whitea .elementor-widget-container p strong a { color: #ffffff !important; text-decoration: underline; text-underline-offset: 2px; } /* -------------------------------------------------------------------------- * 9. The `whitea` panel class is used on two different backgrounds: the * mid-blue (#4d79ac), where white text is correct, and the amber * (#f6ae2d), where white measures 1.91:1. CSS cannot branch on a computed * background, so the amber panel is named directly. Dark ink on amber * measures 9.78:1. * * Durable fix: set this panel's link colour in the page itself, then this * rule can be deleted. * ----------------------------------------------------------------------- */ .elementor-element.whitea.elementor-element-6541fe2 a, .elementor-element.whitea .elementor-element.elementor-element-b692589 a, .elementor-element.whitea .elementor-element.elementor-element-b692589 p strong a { color: #00171f !important; text-decoration: underline; text-underline-offset: 2px; } /* -------------------------------------------------------------------------- * 10. Visually hidden labels (see hpc_a11y_add_hidden_labels). Present for * assistive technology, invisible on screen. * ----------------------------------------------------------------------- */ .hpc-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; } /* -------------------------------------------------------------------------- * 11. WCAG 1.4.10 Reflow (AA) - no horizontal scrolling at 320px. * Four pages scrolled sideways at 320px: * - /cookie-policy/ and /in-your-parish/hellesdon-neighbourhood-plan/ * print full URLs as link text (426px and 378px wide) * - /in-your-parish/road-maintenance/ has an 800px fixed-width image * - /responsibilities/ overflows via a background slideshow image and * an animated headline * ----------------------------------------------------------------------- */ img, video, canvas { max-width: 100%; height: auto; } iframe, object, embed, table { max-width: 100%; } /* Long URLs used as link text must be allowed to break. */ a, p, li, dd, dt, td, th, figcaption, blockquote, .elementor-widget-container { overflow-wrap: anywhere; word-break: break-word; } /* Decorative slideshow / animated headline must not extend the page. */ .elementor-background-slideshow__slide__image { max-width: 100%; } .elementor-headline-dynamic-wrapper, .elementor-headline-dynamic-text { max-width: 100%; overflow: hidden; } /* -------------------------------------------------------------------------- * 12. WCAG 2.5.8 Target Size (Minimum), AA in WCAG 2.2 - 24x24 CSS px. * The carousel previous/next controls render at 20x20. * ----------------------------------------------------------------------- */ .elementor-swiper-button, .elementor-swiper-button-prev, .elementor-swiper-button-next, .swiper-button-prev, .swiper-button-next, .swiper-pagination-bullet { min-width: 24px; min-height: 24px; display: flex; align-items: center; justify-content: center; } /* -------------------------------------------------------------------------- * 13. An 800px image on /in-your-parish/road-maintenance/ still overflowed at * 320px despite max-width:100%, because it sits inside a shrink-to-fit * inline-block : the percentage resolves against a parent that is * itself sized by the image, so it never binds. Constrain the wrappers. * ----------------------------------------------------------------------- */ figure, picture, a, .wp-caption { max-width: 100%; } a > img, figure > img, picture > img { max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- * 14. WCAG 2.5.8 - a carousel's off-screen neighbouring slide leaves a ~20px * sliver of its link exposed, which is an unusable pointer target. Slides * that are not the active one should not be pointer targets at all; the * link becomes available when its slide is brought into view. * ----------------------------------------------------------------------- */ .swiper-slide:not(.swiper-slide-active) > a, .swiper-slide:not(.swiper-slide-active) .elementor-carousel-image-overlay { pointer-events: none; }