:root { --dd-accessibility: #004d99; --dd-accessibility-dark: #003d7a; --dd-accessibility-pale: #e7f1fb; --dd-accessibility-white: #ffffff; --dd-accessibility-text: #1d3436; --dd-accessibility-border: #d7e0e8; } .dd-accessibility { bottom: 15px; position: fixed; right: 15px; z-index: 999999; } .dd-accessibility__trigger { align-items: center; background: var(--dd-accessibility); border: 3px solid var(--dd-accessibility-white); border-radius: 50%; box-shadow: 0 5px 22px rgba(29, 52, 54, .22); display: flex; height: 64px; justify-content: center; padding: 0; width: 64px; } .dd-accessibility__trigger:hover, .dd-accessibility__trigger:focus-visible { background: var(--dd-accessibility-dark); transform: translateY(-2px); } .dd-accessibility__trigger img { display: block; filter: brightness(0) invert(1); height: 34px; width: 34px; } .dd-accessibility__panel { background: var(--dd-accessibility-white); border: 1px solid var(--dd-accessibility-border); border-radius: 1.8rem; bottom: 78px; box-shadow: 0 18px 55px rgba(29, 52, 54, .22); color: var(--dd-accessibility-text); max-height: calc(100vh - 120px); overflow: auto; padding: 2rem; position: absolute; right: 0; width: min(390px, calc(100vw - 30px)); } .dd-accessibility__panel[hidden] { display: none; } .dd-accessibility__option[hidden] { display: none !important; } .dd-accessibility__header { align-items: flex-start; display: flex; gap: 1.5rem; justify-content: space-between; } .dd-accessibility__eyebrow { color: var(--dd-accessibility); font-size: 1.2rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .4rem; text-transform: uppercase; } .dd-accessibility__header h2 { color: var(--dd-accessibility-text); font-family: "ivypresto-headline", serif; font-size: 2.8rem; line-height: 1.05; margin: 0; } .dd-accessibility__close { align-items: center; background: var(--dd-accessibility-pale); border: 0; border-radius: 50%; color: var(--dd-accessibility); display: flex; flex: 0 0 38px; font-size: 2.6rem; height: 38px; justify-content: center; line-height: 1; padding: 0 0 .3rem; width: 38px; } .dd-accessibility__intro { font-size: 1.5rem; line-height: 1.45; margin: 1.2rem 0 1.5rem; } .dd-accessibility__controls { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-accessibility__control, .dd-accessibility__option { background: #fff; border: 1px solid var(--dd-accessibility-border); border-radius: 1.2rem; } .dd-accessibility__control--wide { grid-column: 1 / -1; padding: 1.15rem; } .dd-accessibility__label { display: block; font-size: 1.4rem; font-weight: 800; margin-bottom: .7rem; } .dd-accessibility__segmented { display: grid; gap: .55rem; grid-template-columns: repeat(3, 1fr); } .dd-accessibility__segmented button, .dd-accessibility__option { color: var(--dd-accessibility-text); font-weight: 750; } .dd-accessibility__segmented button { background: var(--dd-accessibility-pale); border: 2px solid transparent; border-radius: .9rem; min-height: 44px; padding: .8rem; } .dd-accessibility__segmented button[aria-pressed="true"], .dd-accessibility__option[aria-pressed="true"] { background: var(--dd-accessibility); border-color: var(--dd-accessibility); color: #fff; } .dd-accessibility__option { align-items: center; display: flex; flex-direction: column; font-size: 1.4rem; gap: .45rem; justify-content: center; line-height: 1.2; min-height: 80px; padding: .9rem .65rem; text-align: center; } .dd-accessibility__option-icon { align-items: center; background: var(--dd-accessibility-pale); border-radius: 50%; color: var(--dd-accessibility); display: flex; font-size: 1.65rem; font-weight: 900; height: 34px; justify-content: center; width: 34px; } .dd-accessibility__option[aria-pressed="true"] .dd-accessibility__option-icon { background: rgba(255, 255, 255, .18); color: #fff; } .dd-accessibility__option--cursor-white:not([aria-pressed="true"]) .dd-accessibility__option-icon { background: var(--dd-accessibility-text); color: #fff; } .dd-accessibility__option--cursor-black:not([aria-pressed="true"]) .dd-accessibility__option-icon { background: #fff; border: 1px solid var(--dd-accessibility-border); color: #000; } .dd-accessibility__option-icon i, .dd-accessibility__close i { display: block; font-size: inherit; line-height: 1; } .dd-accessibility__option-icon { font-weight: 400; } .dd-accessibility__close { padding: 0; } .dd-accessibility__footer { align-items: center; border-top: 1px solid var(--dd-accessibility-border); display: flex; gap: 1rem; justify-content: space-between; margin-top: 1.5rem; padding-top: 1.2rem; } .dd-accessibility__footer a, .dd-accessibility__reset { background: none; border: 0; color: var(--dd-accessibility); font-size: 1.35rem; font-weight: 800; padding: 0; text-decoration: underline; } html.dd-a11y-text-small { font-size: 56.25%; } html.dd-a11y-text-large { font-size: 75%; } html.dd-a11y-readable-font body, html.dd-a11y-readable-font button, html.dd-a11y-readable-font input, html.dd-a11y-readable-font select, html.dd-a11y-readable-font textarea, html.dd-a11y-readable-font h1, html.dd-a11y-readable-font h2, html.dd-a11y-readable-font h3, html.dd-a11y-readable-font h4, html.dd-a11y-readable-font h5, html.dd-a11y-readable-font h6 { font-family: Arial, Helvetica, sans-serif !important; } html.dd-a11y-spacing body { letter-spacing: .08em; line-height: 1.85; word-spacing: .12em; } html.dd-a11y-links a:not(.button):not(.header__logo) { text-decoration: underline !important; text-decoration-thickness: .12em !important; text-underline-offset: .18em !important; } html.dd-a11y-grayscale body > *:not(.dd-accessibility) { filter: grayscale(1); } html.dd-a11y-high-contrast { color-scheme: dark; --dd-hc-black: #000000; --dd-hc-white: #ffffff; --dd-hc-yellow: #ffeb3b; } html.dd-a11y-high-contrast body { background: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } /* Keep photographs, video, maps and uploaded artwork visible. */ html.dd-a11y-high-contrast img:not(.dd-accessibility img):not(.footer__buildings), html.dd-a11y-high-contrast picture, html.dd-a11y-high-contrast video, html.dd-a11y-high-contrast canvas, html.dd-a11y-high-contrast iframe, html.dd-a11y-high-contrast .maplibregl-canvas { filter: none !important; opacity: 1 !important; visibility: visible !important; } html.dd-a11y-high-contrast img.footer__buildings { filter: brightness(0) saturate(100%) invert(1) !important; } /* Core page surfaces. Only background colours are replaced, never images. */ html.dd-a11y-high-contrast body main, html.dd-a11y-high-contrast body section, html.dd-a11y-high-contrast body article, html.dd-a11y-high-contrast body aside, html.dd-a11y-high-contrast body .header, html.dd-a11y-high-contrast body .header__bottom, html.dd-a11y-high-contrast body .header__top-inner, html.dd-a11y-high-contrast body .footer, html.dd-a11y-high-contrast body .footer__top, html.dd-a11y-high-contrast body .footer__bottom { background-color: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } /* All coloured and pale-green sections become black with white content. */ html.dd-a11y-high-contrast body :where( .section--shop-green, .section--pale-green, .section--paler-green, .section--palest-green, .section--yellow, .section--sand, .section--peach, .section--pink, .section--teal, .section--salmon, .section--dark-green, .section--darkest-green, .section--market-blue ) { background-color: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :where( .section--shop-green, .section--pale-green, .section--paler-green, .section--palest-green, .section--yellow, .section--sand, .section--peach, .section--pink, .section--teal, .section--salmon, .section--dark-green, .section--darkest-green, .section--market-blue ) :where( h1, h2, h3, h4, h5, h6, p, li, dt, dd, address, blockquote, figcaption, label, legend, small, .section__primary-title, .section__secondary-title, .section__text, .section__intro, .grid-block__intro, .grid-block__text, .window-block__text ) { color: var(--dd-hc-white) !important; } /* White and grey sections remain light and all ordinary text becomes black. */ html.dd-a11y-high-contrast body :where(.section--white, .section--grey) { background-color: var(--dd-hc-dark) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :where(.section--white, .section--grey) :where( h1, h2, h3, h4, h5, h6, p, li, dt, dd, address, blockquote, figcaption, label, legend, small, strong, b, .section__primary-title, .section__secondary-title, .section__text, .section__intro, .std ) { color: var(--dd-hc-white) !important; } /* Normal links are yellow on dark surfaces and black on light surfaces. */ html.dd-a11y-high-contrast body a:not(.button):not(.dd-accessibility a):not(.news-figure__label) { background-color: transparent !important; color: var(--dd-hc-yellow) !important; text-decoration-color: currentColor !important; } html.dd-a11y-high-contrast body :where(.section--white, .section--grey) a:not(.button), html.dd-a11y-high-contrast body :where( .article__content, .event-figure, .news-figure--event-style, .place-figure, .latest-news-card__link, .places-explorer-card, .place-guide-map-popup .maplibregl-popup-content, .places-explorer__mobile-card, .modal, .modal__content, .accordion-item__content-inner, .tabs__panel ) a:not(.button) { color: var(--dd-hc-black) !important; } /* Deliberately highlighted words in headings remain yellow. */ html.dd-a11y-high-contrast body .section__primary-title b, html.dd-a11y-high-contrast body .section__primary-title strong, html.dd-a11y-high-contrast body .grid-block__title b, html.dd-a11y-high-contrast body .grid-block__title strong, html.dd-a11y-high-contrast body .section__title b, html.dd-a11y-high-contrast body .section__title strong, html.dd-a11y-high-contrast body .window-block__title b, html.dd-a11y-high-contrast body .window-block__title strong { background: transparent !important; color: var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .section__primary-title :where(b, strong) a, html.dd-a11y-high-contrast body .grid-block__title :where(b, strong) a { color: inherit !important; } /* General form controls use a black field, white border and white text. */ html.dd-a11y-high-contrast body :where( input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea ):not(.dd-accessibility *) { background-color: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-white) !important; caret-color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :where(input, textarea):not(.dd-accessibility *)::placeholder { color: var(--dd-hc-white) !important; opacity: 1 !important; } html.dd-a11y-high-contrast body select option { background: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :where(input[type="checkbox"], input[type="radio"]):not(.dd-accessibility *) { accent-color: var(--dd-hc-white) !important; } /* Filled actions are always white with black text and icons. */ html.dd-a11y-high-contrast body :where( .button, .button--white, .button--dark-green, .button--darkest-green, .button--headerenquiry, .button--info, button[type="submit"], input[type="submit"], input[type="button"], input[type="reset"], .wpforms-submit, .places-explorer__apply, .places-explorer__filter-toggle, .places-explorer__filters-close, .places-explorer__mobile-card-close, .slider__button, .modal__close-button ):not(.button--ghost-dark-green):not(.button--dark-green-ghost):not(.button--ghost-white):not(.button--link):not(.dd-accessibility *) { background: var(--dd-hc-white) !important; border-color: var(--dd-hc-black) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :where( .button, button[type="submit"], .wpforms-submit, .places-explorer__apply, .places-explorer__filter-toggle, .places-explorer__filters-close, .places-explorer__mobile-card-close, .slider__button, .modal__close-button ):not(.button--ghost-dark-green):not(.button--dark-green-ghost):not(.button--ghost-white):not(.button--link):not(.dd-accessibility *) :where(span, strong, b, i) { background: transparent !important; color: inherit !important; } html.dd-a11y-high-contrast body :where( .button, button[type="submit"], .wpforms-submit, .places-explorer__apply, .places-explorer__filter-toggle, .places-explorer__filters-close, .places-explorer__mobile-card-close, .slider__button, .modal__close-button ):not(.button--ghost-dark-green):not(.button--dark-green-ghost):not(.button--ghost-white):not(.button--link):not(.dd-accessibility *) svg, html.dd-a11y-high-contrast body :where( .button, button[type="submit"], .wpforms-submit, .places-explorer__apply, .places-explorer__filter-toggle, .places-explorer__filters-close, .places-explorer__mobile-card-close, .slider__button, .modal__close-button ):not(.button--ghost-dark-green):not(.button--dark-green-ghost):not(.button--ghost-white):not(.button--link):not(.dd-accessibility *) svg * { color: var(--dd-hc-black) !important; fill: var(--dd-hc-black) !important; stroke: var(--dd-hc-black) !important; } /* Ghost actions remain black with a white border and white text. */ html.dd-a11y-high-contrast body :where( .button--ghost-dark-green, .button--dark-green-ghost, .button--ghost-white ) { background: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :where( .button--ghost-dark-green, .button--dark-green-ghost, .button--ghost-white ) :where(span, strong, b, i) { background: transparent !important; color: inherit !important; } html.dd-a11y-high-contrast body :where( .button--ghost-dark-green, .button--dark-green-ghost, .button--ghost-white ) svg, html.dd-a11y-high-contrast body :where( .button--ghost-dark-green, .button--dark-green-ghost, .button--ghost-white ) svg * { color: var(--dd-hc-white) !important; fill: var(--dd-hc-white) !important; stroke: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :where( .button--ghost-dark-green, .button--dark-green-ghost, .button--ghost-white ):hover, html.dd-a11y-high-contrast body :where( .button--ghost-dark-green, .button--dark-green-ghost, .button--ghost-white ):focus-visible { background: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :where( .button--ghost-dark-green, .button--dark-green-ghost, .button--ghost-white ):hover svg, html.dd-a11y-high-contrast body :where( .button--ghost-dark-green, .button--dark-green-ghost, .button--ghost-white ):hover svg *, html.dd-a11y-high-contrast body :where( .button--ghost-dark-green, .button--dark-green-ghost, .button--ghost-white ):focus-visible svg, html.dd-a11y-high-contrast body :where( .button--ghost-dark-green, .button--dark-green-ghost, .button--ghost-white ):focus-visible svg * { fill: var(--dd-hc-black) !important; stroke: var(--dd-hc-black) !important; } /* Text-link buttons remain simple and obvious. */ html.dd-a11y-high-contrast body .button--link { background: transparent !important; border-color: currentColor !important; color: var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body :where(.section--white, .section--grey) .button--link { color: var(--dd-hc-black) !important; } /* Never allow a nested span or icon to create its own coloured box. */ html.dd-a11y-high-contrast body .button *, html.dd-a11y-high-contrast body button.button *, html.dd-a11y-high-contrast body a.button *, html.dd-a11y-high-contrast body .header__nav-link *, html.dd-a11y-high-contrast body .header__sub-nav-link *, html.dd-a11y-high-contrast body .section__sub-nav * { background-color: transparent !important; box-shadow: none !important; color: inherit !important; } /* Header, desktop navigation, mobile navigation and dropdowns. */ html.dd-a11y-high-contrast body .header, html.dd-a11y-high-contrast body .header.js-is-sticky, html.dd-a11y-high-contrast body .header.header--expanded, html.dd-a11y-high-contrast body .header__bottom, html.dd-a11y-high-contrast body .header__inner { background-color: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast .header__logo-image { content: url("../img/logo-accesible.svg") !important; } html.dd-a11y-high-contrast body :where( .header__nav-link, .header__sub-nav-link, .header__top-link, .header__nav-link--standalone ) { background: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :where( .header__nav-link, .header__sub-nav-link, .header__top-link, .header__nav-link--standalone ):hover, html.dd-a11y-high-contrast body :where( .header__nav-link, .header__sub-nav-link, .header__top-link, .header__nav-link--standalone ):focus-visible, html.dd-a11y-high-contrast body :where( .header__nav-link--active, .header__sub-nav-link--active, .header__nav-item--parent--active > .header__nav-link ) { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .header__sub-nav-inner, html.dd-a11y-high-contrast body .header__sub-nav, html.dd-a11y-high-contrast body .header__menu-promo { background: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; border-radius: 0 0 1.8rem 1.8rem; box-shadow: 0 0 0 2px var(--dd-hc-white) !important; } html.dd-a11y-high-contrast .header__search #ajaxsearchpro1_1 .promagnifier:hover, html.dd-a11y-high-contrast .header__search #ajaxsearchpro1_2 .promagnifier:hover, html.dd-a11y-high-contrast .header__search div.asp_m.asp_m_1 .promagnifier:hover, html.dd-a11y-high-contrast .header__search #ajaxsearchpro1_1 .promagnifier:focus-visible, html.dd-a11y-high-contrast .header__search #ajaxsearchpro1_2 .promagnifier:focus-visible, html.dd-a11y-high-contrast .header__search div.asp_m.asp_m_1 .promagnifier:focus-visible { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .header__sub-nav-title { color:var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .header__menu-promo :where(h1, h2, h3, h4, p, span) { color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .header__button, html.dd-a11y-high-contrast body .header__search-toggle { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-black) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .header__button :where(svg, svg *), html.dd-a11y-high-contrast body .header__search-toggle :where(svg, svg *) { fill: var(--dd-hc-black) !important; stroke: var(--dd-hc-black) !important; } /* Ajax Search Pro header search. */ html.dd-a11y-high-contrast body .header__search .asp_w_container, html.dd-a11y-high-contrast body .header__search .asp_main_container, html.dd-a11y-high-contrast body .header__search #ajaxsearchpro1_1, html.dd-a11y-high-contrast body .header__search #ajaxsearchpro1_2, html.dd-a11y-high-contrast body .header__search div.asp_m.asp_m_1 { background: transparent !important; box-shadow: none !important; } html.dd-a11y-high-contrast #ajaxsearchpro1_1 .probox .promagnifier .innericon, html.dd-a11y-high-contrast #ajaxsearchpro1_2 .probox .promagnifier .innericon, html.dd-a11y-high-contrast div.asp_m.asp_m_1 .probox .promagnifier .innericon { filter: brightness(0) saturate(100%) !important; } html.dd-a11y-high-contrast body .header__search :where(.probox, .proinput, .proinput form) { background: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .header__search input.orig { background: transparent !important; border: 0 !important; box-shadow: none !important; caret-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .header__search input.orig::placeholder { color: var(--dd-hc-white) !important; opacity: 1 !important; } html.dd-a11y-high-contrast body .header__search .promagnifier { background: var(--dd-hc-white) !important; border: 0 !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .header__search .promagnifier :where(svg, svg *, path), html.dd-a11y-high-contrast body .header__search .proclose :where(svg, svg *, polygon) { fill: var(--dd-hc-black) !important; stroke: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .header__search .proclose { background: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :where( #ajaxsearchprores1_1, #ajaxsearchprores1_2, div.asp_r.asp_r_1 ), html.dd-a11y-high-contrast body :where( #ajaxsearchprores1_1, #ajaxsearchprores1_2, div.asp_r.asp_r_1 ) :where(.results, .resdrg, .item, .asp_content, .asp_res_text) { background: var(--dd-hc-white) !important; border-color: var(--dd-hc-black) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :where( #ajaxsearchprores1_1, #ajaxsearchprores1_2, div.asp_r.asp_r_1 ) a { color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :where( #ajaxsearchprores1_1, #ajaxsearchprores1_2, div.asp_r.asp_r_1 ) .asp_group_header { background: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } /* Grid block: retain every photograph but standardise every colour card. */ html.dd-a11y-high-contrast body .section--grid-block, html.dd-a11y-high-contrast body .section--grid-block .grid-block__intro, html.dd-a11y-high-contrast body .section--grid-block .grid-block__title, html.dd-a11y-high-contrast body .section--grid-block .grid-block__text, html.dd-a11y-high-contrast body .section--grid-block .grid-block__text :where(h1, h2, h3, h4, p) { background-color: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .grid-block-card { --grid-card-bg: var(--dd-hc-black) !important; --grid-card-color: var(--dd-hc-white) !important; background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .grid-block-card__content { background: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .grid-block-card__content :where(h1, h2, h3, h4, p, span) { background: transparent !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .grid-block-card:hover, html.dd-a11y-high-contrast body .grid-block-card:focus-visible { border-color: var(--dd-hc-yellow) !important; outline: 0 !important; } html.dd-a11y-high-contrast body .grid-block-card .button { background: var(--dd-hc-white) !important; border-color: var(--dd-hc-black) !important; color: var(--dd-hc-black) !important; } /* Window block: retain the background image and use a black overlay. */ html.dd-a11y-high-contrast body .window-block__top, html.dd-a11y-high-contrast body :where( .section--market-blue.window-block__top, .section--dark-green.window-block__top, .section--darkest-green.window-block__top, .section--pale-green.window-block__top, .section--palest-green.window-block__top ) { background-color: transparent !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .window-block__top::before { background: var(--dd-hc-black) !important; opacity: 1 !important; } html.dd-a11y-high-contrast body .window-block__title, html.dd-a11y-high-contrast body .window-block__header, html.dd-a11y-high-contrast body .window-block__top :where(h1, h2, h3, p) { color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .window-block__window { border: 2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :where( .section--window-block-top-market-blue, .section--window-block-top-dark-green, .section--window-block-top-darkest-green, .section--window-block-top-pale-green, .section--window-block-top-palest-green ) .window-block__text :where(h2, h3) { color: inherit !important; } /* Light cards and panels sit clearly against the black page. */ html.dd-a11y-high-contrast body :where( .article__content, .article__header, .event-figure, .news-figure--event-style, .place-figure, .latest-news-card__link, .places-explorer-card, .place-guide-map-popup .maplibregl-popup-content, .places-explorer__mobile-card, .modal, .modal__content, .accordion-item__content-inner, .tabs__panel, .notification, .proposition-box, .proposition-box__footer, blockquote ) { background: var(--dd-hc-white) !important; border-color: var(--dd-hc-black) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :where( .article__content, .article__header, .event-figure, .news-figure--event-style, .place-figure, .latest-news-card__link, .places-explorer-card, .place-guide-map-popup .maplibregl-popup-content, .places-explorer__mobile-card, .modal, .modal__content, .accordion-item__content-inner, .tabs__panel, .notification, .proposition-box, .proposition-box__footer, blockquote ) :where(h1, h2, h3, h4, h5, h6, p, li, small, span, address, time) { color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .news-figure--event-style { --news-card-bg: var(--dd-hc-white) !important; --news-card-text: var(--dd-hc-black) !important; --news-card-muted: var(--dd-hc-black) !important; --news-icon: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :where( .event-figure__icon, .news-figure__icon, .place-figure__icon, .places-explorer-card__address svg, .latest-news-card__date svg ), html.dd-a11y-high-contrast body :where( .event-figure__icon, .news-figure__icon, .place-figure__icon, .places-explorer-card__address svg, .latest-news-card__date svg ) * { fill: var(--dd-hc-black) !important; color: var(--dd-hc-black) !important; } /* Tags, labels, badges and active filters use a white chip with black text. */ html.dd-a11y-high-contrast body :where( .pill, .label, .article__tag, .article__taxonomy-link, .event-figure__label, .news-figure__label, .place-figure__label, .places-explorer-card__label, .places-explorer-card__label--category, .places-explorer-card__label--type, .places-explorer-card__label--shop-darwen, .place-guide-map-popup__label, .place-guide-map-popup__label--best, .place-guide-map-popup__label--shop-darwen, .place-guide-map-popup__tag, .latest-news-card__category, .place-tags-strip__tag, .places-explorer__active-filter, .place-figure__shop-darwen ) { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-black) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :where( .pill, .label, .article__tag, .article__taxonomy-link, .event-figure__label, .news-figure__label, .place-figure__label, .places-explorer-card__label, .place-guide-map-popup__label, .latest-news-card__category, .place-tags-strip__tag, .places-explorer__active-filter ) * { background: transparent !important; color: inherit !important; } /* Places filters, pale-green panels and archive controls. */ html.dd-a11y-high-contrast body :where( .places-explorer__stage, .places-explorer__list-panel, .places-explorer__filters, .places-explorer__filters-head, .places-explorer__filters-body, .places-explorer__filters-actions, .places-explorer__views, .places-explorer__toolbar ) { background: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .places-explorer__filter-option, html.dd-a11y-high-contrast body .places-explorer__filter-group, html.dd-a11y-high-contrast body .places-explorer__filter-group legend, html.dd-a11y-high-contrast body .places-explorer__results { color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .places-explorer__view { background: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .places-explorer__view.is-active { background: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .places-explorer__view :where(svg, svg *) { fill: currentColor !important; stroke: currentColor !important; } html.dd-a11y-high-contrast body .places-explorer__filter-option input[type="checkbox"], html.dd-a11y-high-contrast body .places-explorer__filter-option input[type="radio"] { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .places-explorer__filter-option input[type="checkbox"]:checked, html.dd-a11y-high-contrast body .places-explorer__filter-option input[type="radio"]:checked { background: var(--dd-hc-white) !important; border-color: var(--dd-hc-white) !important; } /* Tabs and accordions. */ html.dd-a11y-high-contrast body .tabs__nav, html.dd-a11y-high-contrast body .section__sub-nav { background: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :where(.tabs__nav-button, .section__sub-nav a) { background: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :where(.tabs__nav-button.is-active, .section__sub-nav a.is-active) { background: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .button--info::after { color: var(--dd-hc-black) !important; } /* Newsletter/search-style rows. */ html.dd-a11y-high-contrast body .notice-newsletter-form__row { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .notice-newsletter-form input[type="email"] { background: var(--dd-hc-black) !important; border: 0 !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .notice-newsletter-form button { background: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } /* Tables and map controls. */ html.dd-a11y-high-contrast body :where(table, th, td) { border-color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body th { background: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body td { background: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .maplibregl-ctrl-group, html.dd-a11y-high-contrast body .maplibregl-ctrl button { background: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .maplibregl-ctrl button :where(svg, svg *) { fill: var(--dd-hc-black) !important; stroke: var(--dd-hc-black) !important; } /* Cookie banner remains readable if it is open while contrast mode is active. */ html.dd-a11y-high-contrast body :where(.cky-consent-container, .cky-consent-bar, .cky-preference-center, .cky-modal) { background: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :where(.cky-consent-container, .cky-preference-center, .cky-modal) :where(h1, h2, h3, h4, p, span, label, a) { color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body article.event-figure { border:2px solid #FFF !important; } html.dd-a11y-high-contrast body article.event-figure .event-figure__summary p, html.dd-a11y-high-contrast body article.event-figure span { color:var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body article.event-figure svg path { fill:var(--dd-hc-white) !important; color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body article.event-figure .event-figure__label{ color:var(--dd-hc-black) !important; } /* Strong keyboard focus throughout the site. */ html.dd-a11y-high-contrast body :where( a, button, input, select, textarea, [tabindex] ):not(.dd-accessibility *):focus-visible { outline: 3px solid var(--dd-hc-yellow) !important; outline-offset: 3px !important; } /* Keep the accessibility widget itself in its normal branded colours. */ html.dd-a11y-high-contrast .dd-accessibility, html.dd-a11y-high-contrast .dd-accessibility * { color-scheme: light; } html.dd-a11y-reduce-motion *, html.dd-a11y-reduce-motion *::before, html.dd-a11y-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } @media (max-width: 480px) { .dd-accessibility__trigger { height: 58px; width: 58px; } .dd-accessibility__panel { padding: 1.5rem; } } @media (max-width: 767px) { .dd-accessibility { } .dd-accessibility__panel { bottom: 70px; max-height: calc(100vh - 105px); max-height: calc( 100dvh - 105px - env(safe-area-inset-top, 0px) ); overflow-y: auto; overscroll-behavior: contain; right: 0; top: auto; width: calc(100vw - 24px); } } @media (hover: none) and (pointer: coarse) { .dd-accessibility__option--cursor { display: none !important; } } /* ============================================================ HIGH CONTRAST: DECORATIVE BACKGROUND WINDOWS Convert every coloured window SVG to white while preserving its transparent areas and keeping real photographs visible. ============================================================ */ html.dd-a11y-high-contrast .section--has-background-windows::before, .cta-block__panel--has-windows::after { background-color: transparent !important; filter: brightness(0) saturate(100%) invert(1) !important; opacity: .25 !important; } /* Split-block desktop window artwork */ html.dd-a11y-high-contrast .section--has-background-windows .section__split-background-windows { background-color: transparent !important; filter: brightness(0) saturate(100%) invert(1) !important; opacity: .25 !important; } /* Split-block mobile window artwork */ html.dd-a11y-high-contrast .section--split-block.section--has-background-windows > .container::after { background-color: transparent !important; filter: brightness(0) saturate(100%) invert(1) !important; opacity: .25 !important; } /* Explicitly keep the actual hero photographs unchanged */ html.dd-a11y-high-contrast .section--hero .hero-image, html.dd-a11y-high-contrast .section--hero .hero-image img { background-color: transparent !important; filter: none !important; opacity: 1 !important; } /* ============================================================ HIGH CONTRAST HEADER ============================================================ */ /* * Keep the general yellow-link rule away from the header. * Header links are controlled explicitly below. */ html.dd-a11y-high-contrast body a:not(.button):not(.dd-accessibility a):not(.header a) { background: transparent !important; color: var(--dd-hc-yellow) !important; text-decoration-color: currentColor !important; } /* ------------------------------------------------------------ Proper divider after the complete header ------------------------------------------------------------ */ html.dd-a11y-high-contrast body .header { position: sticky; } html.dd-a11y-high-contrast body .header::after { background: var(--dd-hc-white) !important; bottom: 0; content: ""; height: 2px; left: 0; pointer-events: none; position: absolute; right: 0; width: 100%; z-index: 9999; } /* ------------------------------------------------------------ Default header links ------------------------------------------------------------ */ html.dd-a11y-high-contrast body .header .header__nav-link, html.dd-a11y-high-contrast body .header .header__sub-nav-link, html.dd-a11y-high-contrast body .header .header__top-link, html.dd-a11y-high-contrast body .header .header__nav-link--standalone { background: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } /* ------------------------------------------------------------ Main navigation hover, focus, current and expanded states Includes the parent
  • hover because that is what opens the desktop dropdown in main.css. ------------------------------------------------------------ */ html.dd-a11y-high-contrast body .header .header__nav-link:hover, html.dd-a11y-high-contrast body .header .header__nav-link:focus-visible, html.dd-a11y-high-contrast body .header .header__nav-link--active, html.dd-a11y-high-contrast body .header .header__nav-item--parent:hover > .header__nav-link, html.dd-a11y-high-contrast body .header .header__nav-item--parent--active > .header__nav-link, html.dd-a11y-high-contrast body .header .header__nav-item--expanded > .header__nav-link, html.dd-a11y-high-contrast body .header .current-menu-item > .header__nav-link, html.dd-a11y-high-contrast body .header .current-menu-ancestor > .header__nav-link { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; border-radius: 1.8rem !important; color: var(--dd-hc-black) !important; } /* ------------------------------------------------------------ Dropdown link hover, focus and active states ------------------------------------------------------------ */ html.dd-a11y-high-contrast body .header .header__sub-nav-link:hover, html.dd-a11y-high-contrast body .header .header__sub-nav-link:focus-visible, html.dd-a11y-high-contrast body .header .header__sub-nav-link--active, html.dd-a11y-high-contrast body .header .current-menu-item > .header__sub-nav-link { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } /* ------------------------------------------------------------ Header utility and standalone links ------------------------------------------------------------ */ html.dd-a11y-high-contrast body .header .header__top-link:hover, html.dd-a11y-high-contrast body .header .header__top-link:focus-visible, html.dd-a11y-high-contrast body .header .header__nav-link--standalone:hover, html.dd-a11y-high-contrast body .header .header__nav-link--standalone:focus-visible { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } /* ------------------------------------------------------------ Stop nested spans, labels and icons retaining black boxes ------------------------------------------------------------ */ html.dd-a11y-high-contrast body .header .header__nav-link:hover *, html.dd-a11y-high-contrast body .header .header__nav-link:focus-visible *, html.dd-a11y-high-contrast body .header .header__nav-link--active *, html.dd-a11y-high-contrast body .header .header__nav-item--parent:hover > .header__nav-link *, html.dd-a11y-high-contrast body .header .header__nav-item--parent--active > .header__nav-link *, html.dd-a11y-high-contrast body .header .header__nav-item--expanded > .header__nav-link *, html.dd-a11y-high-contrast body .header .header__sub-nav-link:hover *, html.dd-a11y-high-contrast body .header .header__sub-nav-link:focus-visible *, html.dd-a11y-high-contrast body .header .header__sub-nav-link--active *, html.dd-a11y-high-contrast body .header .header__top-link:hover *, html.dd-a11y-high-contrast body .header .header__nav-link--standalone:hover * { background: transparent !important; color: inherit !important; fill: currentColor !important; stroke: currentColor !important; } /* Parent navigation chevron */ html.dd-a11y-high-contrast body .header .header__nav-link:hover::after, html.dd-a11y-high-contrast body .header .header__nav-link:focus-visible::after, html.dd-a11y-high-contrast body .header .header__nav-link--active::after, html.dd-a11y-high-contrast body .header .header__nav-item--parent:hover > .header__nav-link::after, html.dd-a11y-high-contrast body .header .header__nav-item--parent--active > .header__nav-link::after, html.dd-a11y-high-contrast body .header .header__nav-item--expanded > .header__nav-link::after { background: transparent !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .news-figure--event-style, html.dd-a11y-high-contrast body .place-figure { border:2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .news-figure__label { border:2px solid var(--dd-hc-white) !important; background-color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body section:not(:first-child):not(.slider--news-figures):not(.slider--places):not(.place-map--place):not(.section--place-guide-map){ border-bottom:2px solid #FFF; } html.dd-a11y-high-contrast body .news-figure__meta { border:none !important; } html.dd-a11y-high-contrast body .place-figure__tripadvisor-inner, html.dd-a11y-high-contrast body .place-hero__tripadvisor { background-color: var(--dd-hc-white) !important; color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .place-figure__tripadvisor-inner *, html.dd-a11y-high-contrast body .place-hero__tripadvisor { color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .section--split-block .section__text--ticks li::before { background: var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .section--split-block.section--white.section--has-accent .section__primary-title { color:var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .slider__count { color:var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .section--split-block .text-icon-figure--no-icon, html.dd-a11y-high-contrast body .section--split-block.section--has-accent .text-icon-figure--has-icon .text-icon-figure__icon-wrap { background:var(--dd-hc-yellow) !important; color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .section--split-block .text-icon-figure--has-icon .text-icon-figure__icon { background-color: transparent !important; filter: brightness(0) saturate(100%) invert(0) !important; } /* High-contrast news category pills */ html.dd-a11y-high-contrast body article.news-figure.news-figure--event-style .news-figure__labels > a.news-figure__label, html.dd-a11y-high-contrast body article.news-figure.news-figure--event-style .news-figure__labels > a.news-figure__label:visited { background: var(--dd-hc-white) !important; background-color: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; text-decoration: none !important; } html.dd-a11y-high-contrast body section.section--cta-block { border:none !important; border-bottom:2px solid var(--dd-hc-white) !important; background:var(--dd-hc-black)!important; } /* Obvious hover/focus state */ html.dd-a11y-high-contrast body article.news-figure.news-figure--event-style .news-figure__labels > a.news-figure__label:hover, html.dd-a11y-high-contrast body article.news-figure.news-figure--event-style .news-figure__labels > a.news-figure__label:focus-visible { background: var(--dd-hc-yellow) !important; background-color: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .breadcrumbs--global { border-top:none !important; } html.dd-a11y-high-contrast body .event-tab-figures__tab { background:var(--dd-hc-yellow)!important; } html.dd-a11y-high-contrast body .event-tab-figures__tab *, html.dd-a11y-high-contrast body .event-tab-figures__tab.event-tab-figures__tab.is-active *{ color: var(--dd-hc-black) !important; fill:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .event-tab-figures__panels, html.dd-a11y-high-contrast body .event-tab-figures__panel { background:var(--dd-hc-white)!important; } html.dd-a11y-high-contrast body .event-tab-figures__panel * { color: var(--dd-hc-black) !important; fill:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .event-tab-figures__tab.event-tab-figures__tab.is-active { background:var(--dd-hc-white)!important; } html.dd-a11y-high-contrast body a:not(.button):not(.dd-accessibility a):not(.news-figure__label):not(.header__nav-link):hover { color:var(--dd-hc-white) !important; text-decoration:underline !important; } .section--split-block.section--split-full-width-image * { color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .section--split-block.section--split-full-width-image *, html.dd-a11y-high-contrast body .section--split-block.section--split-full-width-image .section__primary-title b { color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .section--split-block.section--split-full-width-image *, html.dd-a11y-high-contrast body .section--split-block.section--split-full-width-image .section__primary-title b, html.dd-a11y-high-contrast body .section--bigimage-full-width * { color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .footer__bottom { border-top:2px solid var(--dd-hc-white) !important; border-bottom: none !important; } html.dd-a11y-high-contrast body .footer__social-bar { background:var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .footer__social-bar * { color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .section--split-block.section--has-accent .text-icon-figure--no-icon .text-icon-figure__text li::before { background:var(--dd-hc-black)!important; } html.dd-a11y-high-contrast body .section--split-block.section--has-accent .text-icon-figure--no-icon .text-icon-figure__text li::before { background:var(--dd-hc-black)!important; } html.dd-a11y-high-contrast body .section--split-block.section--has-accent .text-icon-figure--no-icon .text-icon-figure__title, html.dd-a11y-high-contrast body .section--split-block.section--has-accent .text-icon-figure--no-icon .text-icon-figure__text li { color:var(--dd-hc-black)!important; } html.dd-a11y-high-contrast body .cta-newsletter-form__row input { border:none !important; } html.dd-a11y-high-contrast body .cta-newsletter-form__row { border:2px solid; } html.dd-a11y-high-contrast body .events-archive-card[data-event-price="free"] .events-archive-card__price, html.dd-a11y-high-contrast body .events-calendar-item[data-event-price="free"] .events-calendar-item__price, html.dd-a11y-high-contrast body .event-hero__status--featured, html.dd-a11y-high-contrast body .section.section--event-quick-info { background:var(--dd-hc-yellow) !important; color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .events-calendar-month__title { border-bottom:2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .events-calendar-item__date { background:var(--dd-hc-yellow) !important; color:var(--dd-hc-black) !important; border:4px solid var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .events-calendar-item__date *, html.dd-a11y-high-contrast body .section.section--event-quick-info *{ color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .event-hero__meta-row { color:var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .section--event-quick-info .quick-info__item-icon { background:var(--dd-hc-white)!important; } html.dd-a11y-high-contrast body .section.section--event-quick-info article { background:none !important; } html.dd-a11y-high-contrast body .events-archive-card__meta-icon, html.dd-a11y-high-contrast body .event-hero__meta-icon svg { fill:var(--dd-hc-yellow) !important; } /* ========================================================================== HIGH CONTRAST: ACCESSIBILITY WIDGET Give the toolbar a complete black / white / yellow treatment and prevent broad page-level high-contrast selectors from leaking into it. ========================================================================== */ html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__panel { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: 0 18px 55px rgba(0, 0, 0, .65) !important; color: var(--dd-hc-white) !important; color-scheme: dark !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__eyebrow { background: transparent !important; color: var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__header h2, html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__intro, html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__label { background: transparent !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__control, html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__control--wide { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__segmented button { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__segmented button:hover, html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__segmented button:focus-visible, html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__segmented button[aria-pressed="true"] { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__option { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__option:hover, html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__option:focus-visible, html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__option[aria-pressed="true"] { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__option-icon { background: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__option:hover .dd-accessibility__option-icon, html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__option:focus-visible .dd-accessibility__option-icon, html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__option[aria-pressed="true"] .dd-accessibility__option-icon { background: var(--dd-hc-black) !important; color: var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__option-icon *, html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__close * { background: transparent !important; color: inherit !important; } html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__close { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__close:hover, html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__close:focus-visible { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__footer { border-top-color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__footer a, html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__reset { background: transparent !important; border: 0 !important; color: var(--dd-hc-yellow) !important; text-decoration: underline !important; text-decoration-color: currentColor !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__footer a:hover, html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__footer a:focus-visible, html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__reset:hover, html.dd-a11y-high-contrast body .dd-accessibility button.dd-accessibility__reset:focus-visible { background: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; text-decoration-color: currentColor !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__trigger { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .dd-accessibility .dd-accessibility__trigger img { filter: brightness(0) saturate(100%) !important; } html.dd-a11y-high-contrast body .dd-accessibility :where( button, a, [tabindex] ):focus-visible { outline: 3px solid var(--dd-hc-yellow) !important; outline-offset: 3px !important; } /* ========================================================================== HIGH CONTRAST: EVENT QUICK INFORMATION Yellow section, black ordinary links and white event-tag pills. ========================================================================== */ html.dd-a11y-high-contrast body section.section.section--event-quick-info { background: var(--dd-hc-yellow) !important; background-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info, html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info__intro, html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info__items, html.dd-a11y-high-contrast body section.section.section--event-quick-info article.quick-info__item, html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info__item-text, html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info__contact-row, html.dd-a11y-high-contrast body section.section.section--event-quick-info .event-quick-info__detail-row, html.dd-a11y-high-contrast body section.section.section--event-quick-info .event-quick-info__tag-group, html.dd-a11y-high-contrast body section.section.section--event-quick-info .event-quick-info__tags { background: transparent !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body section.section.section--event-quick-info :where( h1, h2, h3, h4, p, span, strong, b, small ) { color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body section.section.section--event-quick-info article.quick-info__item { border-color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info__item-icon { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-black) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info__item-icon svg, html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info__item-icon svg * { fill: var(--dd-hc-black) !important; stroke: var(--dd-hc-black) !important; } /* Telephone, email and Visit Website links. */ html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info__item-text a:not(.event-quick-info__tag), html.dd-a11y-high-contrast body section.section.section--event-quick-info a.quick-info__item-link, html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info__item-text a:not(.event-quick-info__tag):visited, html.dd-a11y-high-contrast body section.section.section--event-quick-info a.quick-info__item-link:visited { background: transparent !important; color: var(--dd-hc-black) !important; text-decoration: underline !important; text-decoration-color: currentColor !important; text-decoration-thickness: .12em !important; text-underline-offset: .18em !important; } html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info__item-text a:not(.event-quick-info__tag):hover, html.dd-a11y-high-contrast body section.section.section--event-quick-info .quick-info__item-text a:not(.event-quick-info__tag):focus-visible, html.dd-a11y-high-contrast body section.section.section--event-quick-info a.quick-info__item-link:hover, html.dd-a11y-high-contrast body section.section.section--event-quick-info a.quick-info__item-link:focus-visible { background: var(--dd-hc-black) !important; color: var(--dd-hc-yellow) !important; text-decoration-color: currentColor !important; } /* Event-tag pills. */ html.dd-a11y-high-contrast body section.section.section--event-quick-info .event-quick-info__tags > a.event-quick-info__tag, html.dd-a11y-high-contrast body section.section.section--event-quick-info .event-quick-info__tags > a.event-quick-info__tag:visited { background: var(--dd-hc-white) !important; background-color: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-black) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; text-decoration: none !important; } html.dd-a11y-high-contrast body section.section.section--event-quick-info .event-quick-info__tags > a.event-quick-info__tag:hover, html.dd-a11y-high-contrast body section.section.section--event-quick-info .event-quick-info__tags > a.event-quick-info__tag:focus-visible { background: var(--dd-hc-black) !important; background-color: var(--dd-hc-black) !important; border-color: var(--dd-hc-black) !important; color: var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body section.section.section--event-quick-info a:focus-visible { outline-color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .place-hero__label { background: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .events-calendar-item__meta-icon { fill:var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .section--event-post-content .std ::marker { color:var(--dd-hc-yellow) !important; } /* ============================================================ HIGH CONTRAST MAPS Dark monochrome basemap, original markers retained ============================================================ */ /* Map containers */ html.dd-a11y-high-contrast body .place-map .place-map__canvas, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .places-explorer__map-panel, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .places-explorer__map { background: var(--dd-hc-black) !important; border-bottom: 2px solid var(--dd-hc-white) !important; border-top: 2px solid var(--dd-hc-white) !important; } /* Filter only the actual MapLibre map canvas */ html.dd-a11y-high-contrast body .place-map .maplibregl-canvas, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .maplibregl-canvas { filter: grayscale(1) invert(1) contrast(1.5) brightness(.8) !important; opacity: 1 !important; } /* ============================================================ KEEP ALL CUSTOM MARKERS IN THEIR ORIGINAL COLOURS ============================================================ */ html.dd-a11y-high-contrast body .place-map .maplibregl-marker, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .maplibregl-marker, html.dd-a11y-high-contrast body .place-map .place-map__marker, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .places-explorer-marker, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .place-guide-map__marker { filter: none !important; opacity: 1 !important; } html.dd-a11y-high-contrast body .place-map .place-map__marker img, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .maplibregl-marker img, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .places-explorer-marker img, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .place-guide-map__marker img { filter: none !important; opacity: 1 !important; } /* Active marker keeps its white high-contrast outline */ html.dd-a11y-high-contrast body .place-map .place-map__marker--active img, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .places-explorer-marker.is-active img, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .place-guide-map__marker.is-active img { filter: drop-shadow(2px 0 0 var(--dd-hc-white)) drop-shadow(-2px 0 0 var(--dd-hc-white)) drop-shadow(0 2px 0 var(--dd-hc-white)) drop-shadow(0 -2px 0 var(--dd-hc-white)) !important; } /* ============================================================ MAP CONTROLS ============================================================ */ html.dd-a11y-high-contrast body .place-map .maplibregl-ctrl-group, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .maplibregl-ctrl-group { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-black) !important; box-shadow: 0 0 0 2px var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .place-map .maplibregl-ctrl-group button, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .maplibregl-ctrl-group button { background: var(--dd-hc-white) !important; border-color: var(--dd-hc-black) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .place-map .maplibregl-ctrl-group button:hover, html.dd-a11y-high-contrast body .place-map .maplibregl-ctrl-group button:focus-visible, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .maplibregl-ctrl-group button:hover, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .maplibregl-ctrl-group button:focus-visible { background: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } /* Map attribution */ html.dd-a11y-high-contrast body .place-map .maplibregl-ctrl-attrib, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .maplibregl-ctrl-attrib { background: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .place-map .maplibregl-ctrl-attrib a, html.dd-a11y-high-contrast body .places-explorer__stage.is-map .maplibregl-ctrl-attrib a { color: var(--dd-hc-black) !important; text-decoration: underline !important; } html.dd-a11y-high-contrast body .header__menu-promo { border-radius:1.8rem !important; } html.dd-a11y-high-contrast body .section--bigimage-inner-text_icon_figures_block.section--bigimage-inner-button_group.section--bigimage-full-width .text-icon-figure { background:none !important; } html.dd-a11y-high-contrast body .section--bigimage-has-accent .text-icon-figure--has-icon .text-icon-figure__icon-wrap { background:var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .section--bigimage-has-accent .text-icon-figure--has-icon .text-icon-figure__icon-wrap .text-icon-figure__icon { filter: brightness(0) saturate(100%) invert(0) !important; } html.dd-a11y-high-contrast body .places-explorer__stage.is-map .places-explorer__mobile-card { background:none !important; } html.dd-a11y-high-contrast body .places-explorer__mobile-card [data-places-mobile-card-inner] { border:2px solid var(--dd-hc-yellow) !important; } /* ========================================================================== FINAL SHARED HIGH-CONTRAST FILTER SYSTEM One authoritative treatment for Places, Events and News explorer filters. Keep this block at the absolute end of this stylesheet. ========================================================================== */ /* Panel shell, header, body and sticky action bar. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filters, .events-explorer__filters, .news-explorer__filters, .places-explorer__filters-head, .events-explorer__filters-head, .news-explorer__filters-head, .places-explorer__filters-body, .events-explorer__filters-body, .news-explorer__filters-body, .places-explorer__filters-actions, .events-explorer__filter-actions, .news-explorer__filter-actions ) { background: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } /* Give every modal a clear edge against the page and map beneath it. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filters, .events-explorer__filters, .news-explorer__filters ) { border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; } /* Panel headings, legends and ordinary supporting text. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filters-head, .events-explorer__filters-head, .news-explorer__filters-head, .places-explorer__filter-group, .events-explorer__filter-group, .news-explorer__filter-group ), html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filters-head, .events-explorer__filters-head, .news-explorer__filters-head, .places-explorer__filter-group, .events-explorer__filter-group, .news-explorer__filter-group ) :is(h2, h3, legend, p, span, small, strong, label) { background-color: transparent !important; color: var(--dd-hc-white) !important; } /* Standard filter rows. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filter-option, .events-explorer__filter-option, .news-explorer__filter-option ) { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-white) !important; } /* Row text inherits the row state rather than global link/form colours. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filter-option, .events-explorer__filter-option, .news-explorer__filter-option ) :is(span, small, strong, b) { background: transparent !important; color: inherit !important; opacity: 1 !important; } /* Hover and keyboard focus: white row with black text. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filter-option, .events-explorer__filter-option, .news-explorer__filter-option ):hover, html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filter-option, .events-explorer__filter-option, .news-explorer__filter-option ):focus-within { background: var(--dd-hc-white) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } /* Selected rows always use the same yellow/black state. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filter-option, .events-explorer__filter-option, .news-explorer__filter-option ):has(input:checked) { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } /* Custom checkbox and radio baseline. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filter-option, .events-explorer__filter-option, .news-explorer__filter-option ) input[type="checkbox"], html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filter-option, .events-explorer__filter-option, .news-explorer__filter-option ) input[type="radio"] { appearance: none !important; background-color: var(--dd-hc-black) !important; background-image: none !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; height: 1.9rem !important; margin: 0 !important; opacity: 1 !important; width: 1.9rem !important; } /* Checked checkbox: black square and unmistakable white tick. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filter-option, .events-explorer__filter-option, .news-explorer__filter-option ) input[type="checkbox"]:checked { background-color: var(--dd-hc-black) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3 8 3 3 7-7'/%3E%3C/svg%3E") !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 1.1rem !important; border-color: var(--dd-hc-black) !important; } /* Checked radio: black centre with a white ring. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filter-option, .events-explorer__filter-option, .news-explorer__filter-option ) input[type="radio"]:checked { background: var(--dd-hc-black) !important; border-color: var(--dd-hc-black) !important; box-shadow: inset 0 0 0 4px var(--dd-hc-white) !important; } /* Do not let focus disappear inside a selected yellow row. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filter-option, .events-explorer__filter-option, .news-explorer__filter-option ) input:focus-visible { outline: 3px solid var(--dd-hc-black) !important; outline-offset: 3px !important; } /* Search fields within any explorer filter panel. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__search, .events-explorer__search, .news-explorer__search ) { appearance: none !important; background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; caret-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__search, .events-explorer__search, .news-explorer__search )::placeholder { color: var(--dd-hc-white) !important; opacity: 1 !important; } html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__search, .events-explorer__search, .news-explorer__search ):focus { border-color: var(--dd-hc-yellow) !important; box-shadow: 0 0 0 3px var(--dd-hc-yellow) !important; outline: 0 !important; } /* Close, filter-toggle and apply buttons share one high-contrast action system. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filters-close, .events-explorer__filters-close, .news-explorer__filters-close, .places-explorer__filter-toggle, .events-explorer__filter-toggle, .news-explorer__filter-toggle, .places-explorer__apply, .events-explorer__apply, .news-explorer__apply ) { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; } /* Nested labels, counts and icons must follow the button colour. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filters-close, .events-explorer__filters-close, .news-explorer__filters-close, .places-explorer__filter-toggle, .events-explorer__filter-toggle, .news-explorer__filter-toggle, .places-explorer__apply, .events-explorer__apply, .news-explorer__apply ) :is(span, strong, b, i) { background: transparent !important; color: inherit !important; } html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filters-close, .events-explorer__filters-close, .news-explorer__filters-close, .places-explorer__filter-toggle, .events-explorer__filter-toggle, .news-explorer__filter-toggle, .places-explorer__apply, .events-explorer__apply, .news-explorer__apply ) :is(svg, svg *) { fill: currentColor !important; stroke: currentColor !important; } /* Interactive button state. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filters-close, .events-explorer__filters-close, .news-explorer__filters-close, .places-explorer__filter-toggle, .events-explorer__filter-toggle, .news-explorer__filter-toggle, .places-explorer__apply, .events-explorer__apply, .news-explorer__apply ):not(:disabled):hover, html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filters-close, .events-explorer__filters-close, .news-explorer__filters-close, .places-explorer__filter-toggle, .events-explorer__filter-toggle, .news-explorer__filter-toggle, .places-explorer__apply, .events-explorer__apply, .news-explorer__apply ):not(:disabled):focus-visible { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } /* Disabled result button remains legible rather than becoming low-contrast grey. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__apply, .events-explorer__apply, .news-explorer__apply ):disabled, html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__apply, .events-explorer__apply, .news-explorer__apply )[aria-disabled="true"] { background: var(--dd-hc-white) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; opacity: .65 !important; } /* Clear actions remain obvious text controls. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__clear, .events-explorer__clear, .news-explorer__clear ) { background: transparent !important; border: 0 !important; color: var(--dd-hc-yellow) !important; text-decoration: underline !important; text-decoration-thickness: .12em !important; text-underline-offset: .18em !important; } html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__clear, .events-explorer__clear, .news-explorer__clear ):hover, html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__clear, .events-explorer__clear, .news-explorer__clear ):focus-visible { color: var(--dd-hc-white) !important; } /* Counts within filter-toggle buttons. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__filter-count, .events-explorer__filter-count, .news-explorer__filter-count ) { background: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } /* Applied-filter chips shown outside the modal. */ html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__active-filter, .events-explorer__active-filter, .news-explorer__active-filter ) { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-black) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__active-filter, .events-explorer__active-filter, .news-explorer__active-filter ):hover, html.dd-a11y-high-contrast body :is(.places-explorer, .events-explorer, .news-explorer) :is( .places-explorer__active-filter, .events-explorer__active-filter, .news-explorer__active-filter ):focus-visible { background: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } /* Backdrops should not introduce coloured tints. */ html.dd-a11y-high-contrast body :is( .places-explorer__backdrop, .events-explorer__backdrop, .news-explorer__backdrop ) { background: rgba(0, 0, 0, .82) !important; } /* Special Shop Darwen feature row follows the same selected-row contract. */ html.dd-a11y-high-contrast body .places-explorer .places-explorer__shop-darwen-filter { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .places-explorer .places-explorer__shop-darwen-filter:has(input:checked) { background: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .places-explorer .places-explorer__shop-darwen-filter :is(strong, small, span) { color: inherit !important; } html.dd-a11y-high-contrast body .places-explorer .places-explorer__shop-darwen-check { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .places-explorer .places-explorer__shop-darwen-filter input:checked + .places-explorer__shop-darwen-check { background: var(--dd-hc-black) !important; border-color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .places-explorer .places-explorer__shop-darwen-count { background: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } /* High-contrast scrollbars inside every filter modal. */ html.dd-a11y-high-contrast body :is( .places-explorer__filters, .events-explorer__filters, .news-explorer__filters ) { scrollbar-color: var(--dd-hc-white) var(--dd-hc-black); } html.dd-a11y-high-contrast body :is( .places-explorer__filters, .events-explorer__filters, .news-explorer__filters )::-webkit-scrollbar { width: 1.2rem; } html.dd-a11y-high-contrast body :is( .places-explorer__filters, .events-explorer__filters, .news-explorer__filters )::-webkit-scrollbar-track { background: var(--dd-hc-black); border-left: 2px solid var(--dd-hc-white); } html.dd-a11y-high-contrast body :is( .places-explorer__filters, .events-explorer__filters, .news-explorer__filters )::-webkit-scrollbar-thumb { background: var(--dd-hc-white); border: 2px solid var(--dd-hc-black); } /* Market-stall tabs use the same black/white/yellow state language. */ html.dd-a11y-high-contrast body .market-stall-directory__filter { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .market-stall-directory__filter:hover, html.dd-a11y-high-contrast body .market-stall-directory__filter:focus-visible { background: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .market-stall-directory__filter.is-active { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .market-stall-directory__filter :is( .market-stall-directory__filter-icon, .market-stall-directory__filter-label, svg, svg * ) { color: inherit !important; fill: currentColor !important; stroke: currentColor !important; } html.dd-a11y-high-contrast body .quick-info__item-icon { background:var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .quick-info__background-image { background:none !important; } html.dd-a11y-high-contrast body .quick-info__status { background:none !important; border:2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .quick-info__item-icon svg { filter: brightness(0) saturate(100%) invert(0) !important; } html.dd-a11y-high-contrast body .testimonial-card__title { color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .header__search #ajaxsearchpro1_1, html.dd-a11y-high-contrast body .header__search #ajaxsearchpro1_2, html.dd-a11y-high-contrast body .header__search div.asp_m.asp_m_1 { border:2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .header__search #ajaxsearchpro1_1:has(input.orig:focus), html.dd-a11y-high-contrast body .header__search #ajaxsearchpro1_2:has(input.orig:focus), html.dd-a11y-high-contrast body .header__search div.asp_m.asp_m_1:has(input.orig:focus) { border:2px solid var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .header__search .proclose { background:none !important; } div.asp_m.ajaxsearchpro .probox .proclose svg { fill: var(--dd-hc-yellow) !important; background: var(--dd-hc-yellow) !important; border: none !important; stroke: none !important; } html.dd-a11y-high-contrast body #ajaxsearchprores1_1 .results .item .asp_content h3 a { color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body #ajaxsearchprores1_1 .asp_group_header, html.dd-a11y-high-contrast body #ajaxsearchprores1_2 .asp_group_header, html.dd-a11y-high-contrast body div.asp_r.asp_r_1 .asp_group_header { background:var(--dd-hc-yellow) !important; color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .places-explorer-card { border:2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .places-explorer__stage { border-top:2px solid var(--dd-hc-white) !important; border-bottom:2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .places-explorer-card:hover, html.dd-a11y-high-contrast body .places-explorer-card:focus-within, html.dd-a11y-high-contrast body .places-explorer-card.is-active { border:2px solid var(--dd-hc-yellow) !important; box-shadow:none !important; } /* ========================================================================== FINAL ACCESSIBILITY CONSISTENCY PASS News archive, single news articles, all card sliders, all MapLibre maps, and greyscale support for the accessibility toolbar. Keep this block at the absolute end of the stylesheet. ========================================================================== */ /* Greyscale applies to the page and to the accessibility toolbar itself. */ html.dd-a11y-grayscale .dd-accessibility { filter: grayscale(1) !important; } /* -------------------------------------------------------------------------- News archive: every main surface is black with white text -------------------------------------------------------------------------- */ html.dd-a11y-high-contrast body .news-archive__title, html.dd-a11y-high-contrast body .section--news-explorer, html.dd-a11y-high-contrast body .news-explorer, html.dd-a11y-high-contrast body .news-explorer__toolbar, html.dd-a11y-high-contrast body .news-explorer__layout, html.dd-a11y-high-contrast body .news-explorer__grid, html.dd-a11y-high-contrast body .news-explorer__results, html.dd-a11y-high-contrast body .news-pagination { background: var(--dd-hc-black) !important; background-color: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .news-archive__title .section__primary-title, html.dd-a11y-high-contrast body .news-archive__title .news-archive__intro, html.dd-a11y-high-contrast body .section--news-explorer .news-explorer__results, html.dd-a11y-high-contrast body .section--news-explorer .news-explorer__toolbar, html.dd-a11y-high-contrast body .section--news-explorer .news-explorer__results-count { background: transparent !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .news-archive__title { border-bottom: 2px solid var(--dd-hc-white) !important; } /* -------------------------------------------------------------------------- Single news article: black page, white content and yellow text links -------------------------------------------------------------------------- */ html.dd-a11y-high-contrast body .article.article--single-news, html.dd-a11y-high-contrast body .article--single-news .article__header, html.dd-a11y-high-contrast body .article--single-news .article__header-inner, html.dd-a11y-high-contrast body .article--single-news .article__content, html.dd-a11y-high-contrast body .article--single-news .article__content > .std, html.dd-a11y-high-contrast body .article--single-news .article__footer, html.dd-a11y-high-contrast body.single-post main, html.dd-a11y-high-contrast body.single-post .main { background: var(--dd-hc-black) !important; background-color: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .article--single-news .article__title, html.dd-a11y-high-contrast body .article--single-news .article__meta, html.dd-a11y-high-contrast body .article--single-news .article__date, html.dd-a11y-high-contrast body .article--single-news .article__author, html.dd-a11y-high-contrast body .article--single-news .article__taxonomy-title, html.dd-a11y-high-contrast body .article--single-news .article__content :is( h1, h2, h3, h4, h5, h6, p, li, dt, dd, span, strong, b, small, blockquote, figcaption ) { background: transparent !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .article--single-news .article__meta-divider, html.dd-a11y-high-contrast body .article--single-news .article__content ::marker { color: var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .article--single-news .article__date svg, html.dd-a11y-high-contrast body .article--single-news .article__date svg * { fill: var(--dd-hc-yellow) !important; stroke: var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .article--single-news .article__content a:not(.button), html.dd-a11y-high-contrast body .article--single-news .article__content a:not(.button):visited { background: transparent !important; color: var(--dd-hc-yellow) !important; text-decoration: underline !important; text-decoration-color: currentColor !important; } html.dd-a11y-high-contrast body .article--single-news .article__content a:not(.button):hover, html.dd-a11y-high-contrast body .article--single-news .article__content a:not(.button):focus-visible { background: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .article--single-news .article__figure--inline { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; } html.dd-a11y-high-contrast body .article--single-news .article__main-image { filter: none !important; opacity: 1 !important; } /* Article category and taxonomy pills. */ html.dd-a11y-high-contrast body .article--single-news a.article__tag, html.dd-a11y-high-contrast body .article--single-news a.article__tag:visited, html.dd-a11y-high-contrast body .article--single-news a.article__taxonomy-link, html.dd-a11y-high-contrast body .article--single-news a.article__taxonomy-link:visited { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; text-decoration: none !important; } html.dd-a11y-high-contrast body .article--single-news a.article__tag:hover, html.dd-a11y-high-contrast body .article--single-news a.article__tag:focus-visible, html.dd-a11y-high-contrast body .article--single-news a.article__taxonomy-link:hover, html.dd-a11y-high-contrast body .article--single-news a.article__taxonomy-link:focus-visible { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; transform: none !important; } /* -------------------------------------------------------------------------- Latest-news section and all reusable card/slider surfaces -------------------------------------------------------------------------- */ html.dd-a11y-high-contrast body .section--latest-news, html.dd-a11y-high-contrast body .latest-news-slider__layout, html.dd-a11y-high-contrast body .latest-news-slider__intro, html.dd-a11y-high-contrast body .latest-news-slider__stage { background: var(--dd-hc-black) !important; background-color: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .latest-news-slider__title, html.dd-a11y-high-contrast body .latest-news-slider__count { color: var(--dd-hc-white) !important; } /* Shared card contract: black card, white border, yellow interaction border. */ html.dd-a11y-high-contrast body :is( .news-figure--event-style, .latest-news-card__link, .event-figure, .place-figure, .place-guide-map-card, .places-explorer-card, .grid-block-card, .market-stall-figure, .events-archive-card ) { background: var(--dd-hc-black) !important; background-color: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :is( .news-figure--event-style, .latest-news-card__link, .event-figure, .place-figure, .place-guide-map-card, .places-explorer-card, .grid-block-card, .market-stall-figure, .events-archive-card ):is(:hover, :focus, :focus-visible, :focus-within, .is-active) { border-color: var(--dd-hc-yellow) !important; box-shadow: none !important; } html.dd-a11y-high-contrast body :is( .news-figure--event-style, .latest-news-card__link, .event-figure, .place-figure, .place-guide-map-card, .places-explorer-card, .grid-block-card, .market-stall-figure, .events-archive-card ) :is( .news-figure__content, .latest-news-card__content, .event-figure__content, .place-figure__content, .place-guide-map-card__content, .places-explorer-card__content, .grid-block-card__content, .market-stall-figure__content, .events-archive-card__content ) { background: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :is( .news-figure--event-style, .latest-news-card__link, .event-figure, .place-figure, .place-guide-map-card, .places-explorer-card, .grid-block-card, .market-stall-figure, .events-archive-card ) :is( h1, h2, h3, h4, h5, h6, p, li, span, time, address, small, strong, b ) { color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :is( .news-figure__title a, .latest-news-card__title, .event-figure__title, .place-figure__title, .place-guide-map-card__title, .places-explorer-card__title, .grid-block-card__title, .market-stall-figure__title-button, .events-archive-card__title, .events-archive-card__title a ) { background: transparent !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :is( .news-figure__title a, .latest-news-card__link, .event-figure__title a, .place-figure__title a, .place-guide-map-card__link, .places-explorer-card__link, .market-stall-figure__title-button, .events-archive-card__title a ):is(:hover, :focus-visible) { color: var(--dd-hc-yellow) !important; } /* Card metadata icons remain obvious on black. */ html.dd-a11y-high-contrast body :is( .news-figure__icon, .latest-news-card__date svg, .event-figure__icon, .place-figure__icon, .place-guide-map-card__meta svg, .places-explorer-card__address svg, .events-archive-card__meta-icon ), html.dd-a11y-high-contrast body :is( .news-figure__icon, .latest-news-card__date svg, .event-figure__icon, .place-figure__icon, .place-guide-map-card__meta svg, .places-explorer-card__address svg, .events-archive-card__meta-icon ) * { color: var(--dd-hc-white) !important; fill: var(--dd-hc-white) !important; stroke: var(--dd-hc-white) !important; } /* All card pills are white with black text, yellow on interaction. */ html.dd-a11y-high-contrast body :is( a.news-figure__label, .event-figure__label, .place-figure__label, .place-guide-map-card__label, .places-explorer-card__label, .latest-news-card__category, .events-archive-card__price, .events-archive-card__labels .event-figure__label, .place-figure__shop-darwen ) { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :is( a.news-figure__label, .event-figure__label, .place-figure__label, .place-guide-map-card__label, .places-explorer-card__label, .latest-news-card__category, .events-archive-card__price, .events-archive-card__labels .event-figure__label, .place-figure__shop-darwen ) * { background: transparent !important; color: inherit !important; } html.dd-a11y-high-contrast body :is( a.news-figure__label, .event-figure__label, .place-figure__label, .place-guide-map-card__label, .places-explorer-card__label, .latest-news-card__category, .events-archive-card__price, .events-archive-card__labels .event-figure__label, .place-figure__shop-darwen ):is(:hover, :focus-visible) { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } /* Card buttons use white/black and yellow hover consistently. */ html.dd-a11y-high-contrast body :is( .news-figure--event-style, .latest-news-card__link, .event-figure, .place-figure, .place-guide-map-card, .places-explorer-card, .grid-block-card, .market-stall-figure, .events-archive-card ) .button { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :is( .news-figure--event-style, .latest-news-card__link, .event-figure, .place-figure, .place-guide-map-card, .places-explorer-card, .grid-block-card, .market-stall-figure, .events-archive-card ) .button * { background: transparent !important; color: inherit !important; fill: currentColor !important; stroke: currentColor !important; } html.dd-a11y-high-contrast body :is( .news-figure--event-style, .latest-news-card__link, .event-figure, .place-figure, .place-guide-map-card, .places-explorer-card, .grid-block-card, .market-stall-figure, .events-archive-card ) .button:is(:hover, :focus-visible), html.dd-a11y-high-contrast body .latest-news-card__link:is(:hover, :focus-visible) .button { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } /* Slider arrows: white normally, yellow on hover/focus. */ html.dd-a11y-high-contrast body :is( .section--latest-news, .section--news-image-figures, .section--event-image-figures, .section--place-image-figures, .section--image-figures-slider ) .slider__button { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :is( .section--latest-news, .section--news-image-figures, .section--event-image-figures, .section--place-image-figures, .section--image-figures-slider ) .slider__button:is(:hover, :focus-visible) { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :is( .section--latest-news, .section--news-image-figures, .section--event-image-figures, .section--place-image-figures, .section--image-figures-slider ) .slider__button :is(svg, svg *) { fill: currentColor !important; stroke: currentColor !important; } /* -------------------------------------------------------------------------- Every MapLibre implementation: monochrome canvas, coloured markers retained -------------------------------------------------------------------------- */ html.dd-a11y-high-contrast body :is( .place-map, .place-map__canvas, .places-explorer__stage.is-map, .places-explorer__stage.is-map .places-explorer__map-panel, .places-explorer__stage.is-map .places-explorer__map, .place-guide-map, .place-guide-map__map, .place-guide-map__canvas ) { background: var(--dd-hc-black) !important; background-color: var(--dd-hc-black) !important; border-color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :is( .place-map__canvas, .places-explorer__stage.is-map .places-explorer__map-panel, .places-explorer__stage.is-map .places-explorer__map, .place-guide-map__map, .place-guide-map__canvas ) { border-bottom: 2px solid var(--dd-hc-white) !important; border-top: 2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :is( .place-map, .places-explorer__stage.is-map, .place-guide-map ) .maplibregl-canvas { filter: grayscale(1) invert(1) contrast(1.5) brightness(.8) !important; opacity: 1 !important; visibility: visible !important; } /* Markers remain in their original category colours. */ html.dd-a11y-high-contrast body :is( .place-map, .places-explorer__stage.is-map, .place-guide-map ) :is( .maplibregl-marker, .place-map__marker, .places-explorer-marker, .place-guide-map__marker ) { background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; opacity: 1 !important; } html.dd-a11y-high-contrast body :is( .place-map, .places-explorer__stage.is-map, .place-guide-map ) :is( .maplibregl-marker, .place-map__marker, .places-explorer-marker, .place-guide-map__marker ) img { background: transparent !important; filter: none !important; opacity: 1 !important; } html.dd-a11y-high-contrast body :is( .place-map__marker--active, .places-explorer-marker.is-active, .place-guide-map__marker.is-active ) img { filter: drop-shadow(2px 0 0 var(--dd-hc-white)) drop-shadow(-2px 0 0 var(--dd-hc-white)) drop-shadow(0 2px 0 var(--dd-hc-white)) drop-shadow(0 -2px 0 var(--dd-hc-white)) !important; } /* Map controls. */ html.dd-a11y-high-contrast body :is( .place-map, .places-explorer__stage.is-map, .place-guide-map ) .maplibregl-ctrl-group { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; } html.dd-a11y-high-contrast body :is( .place-map, .places-explorer__stage.is-map, .place-guide-map ) .maplibregl-ctrl-group button { background: var(--dd-hc-white) !important; border-color: var(--dd-hc-black) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :is( .place-map, .places-explorer__stage.is-map, .place-guide-map ) .maplibregl-ctrl-group button:is(:hover, :focus-visible) { background: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :is( .place-map, .places-explorer__stage.is-map, .place-guide-map ) .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: brightness(0) saturate(100%) !important; } /* Attribution panel and its links. */ html.dd-a11y-high-contrast body :is( .place-map, .places-explorer__stage.is-map, .place-guide-map ) :is( .maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib-inner, .maplibregl-ctrl-attrib-button ) { background: var(--dd-hc-black) !important; color:var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body :is( .place-map, .places-explorer__stage.is-map, .place-guide-map ) .maplibregl-ctrl-attrib a { background: transparent !important; color: var(--dd-hc-black) !important; text-decoration: underline !important; } /* Guide map list and cards follow the same black/white/yellow contract. */ html.dd-a11y-high-contrast body .section--place-guide-map, html.dd-a11y-high-contrast body .place-guide-map__list, html.dd-a11y-high-contrast body .place-guide-map__list-inner, html.dd-a11y-high-contrast body .place-guide-map__mobile-card, html.dd-a11y-high-contrast body .place-guide-map__mobile-card-inner { background: var(--dd-hc-black) !important; background-color: var(--dd-hc-black) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .place-guide-map__switch-button { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .place-guide-map__switch-button:is(:hover, :focus-visible, .is-active), html.dd-a11y-high-contrast body .place-guide-map__switch-button[aria-pressed="true"] { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .place-guide-map__switch-button :is(svg, svg *) { fill: currentColor !important; stroke: currentColor !important; } /* ========================================================================== FINAL JULY 2026 ACCESSIBILITY CORRECTIONS Keep this block at the absolute end of accessibility-widget.css. ========================================================================== */ /* -------------------------------------------------------------------------- Text size controls main.css fixes body copy at 16px, so changing only the root rem size leaves much of the site unchanged. Scale both the root and the body copy. -------------------------------------------------------------------------- */ html.dd-a11y-text-small { font-size: 56.25%; } html.dd-a11y-text-small body { font-size: 14px; } html.dd-a11y-text-large { font-size: 75%; } html.dd-a11y-text-large body { font-size: 19px; } html.dd-a11y-text-large body .button svg, html.dd-a11y-text-large body .section--hero:has(.hero-image-stage--main-4-image) .button-group .button svg { display: none !important; } /* -------------------------------------------------------------------------- Mobile high-contrast header and navigation -------------------------------------------------------------------------- */ @media (max-width: 1023px) { html.dd-a11y-text-large body .header.js-is-sticky .header__logo-image, html.dd-a11y-text-large body .header .header__logo-image { width: 12rem !important; } html.dd-a11y-text-large body .grid-block-card__content { width: 80% !important; max-width: 90% !important; } html.dd-a11y-high-contrast .footer__mobile-buildings-wrap { background:var(--dd-hc-black) !important; } html.dd-a11y-text-large body .cta-block__panel--newsletter .cta-block__inner, html.dd-a11y-high-contrast body .cta-block__panel--newsletter .cta-block__inner, html.dd-a11y-text-large body .section--cta-block-split .cta-block__panel--promo.cta-block__panel--has-images .cta-block__inner, html.dd-a11y-high-contrast .section--cta-block-split .cta-block__panel--promo.cta-block__panel--has-images .cta-block__inner { padding-left:0 !important; padding-right:0 !important; } html.dd-a11y-high-contrast body .header, html.dd-a11y-high-contrast body .header.header--expanded, html.dd-a11y-high-contrast body .header__bottom, html.dd-a11y-high-contrast body .header__inner, html.dd-a11y-high-contrast body .header__nav, html.dd-a11y-high-contrast body .header__nav-items, html.dd-a11y-high-contrast body .header__nav-item, html.dd-a11y-high-contrast body .header__sub-nav, html.dd-a11y-high-contrast body .header__sub-nav-inner, html.dd-a11y-high-contrast body .header__sub-nav-layout, html.dd-a11y-high-contrast body .header__sub-nav-main, html.dd-a11y-high-contrast body .header__sub-nav-items, html.dd-a11y-high-contrast body .header__sub-nav-item, html.dd-a11y-high-contrast body .header__menu-promos { background: var(--dd-hc-black) !important; background-color: var(--dd-hc-black) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--dd-hc-white) !important; } /* The burger and close controls use green SVG files as background images. */ html.dd-a11y-high-contrast body .header__button { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .header__button:hover, html.dd-a11y-high-contrast body .header__button:focus-visible { background: transparent !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .header__button-icon, html.dd-a11y-high-contrast body .header__button-icon.icon--close { background-color: transparent !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; filter: brightness(0) saturate(100%) invert(1) !important; } /* Top-level links have no visible border until active, open, hovered or focused. */ html.dd-a11y-high-contrast body .header .header__nav-link:not(.header__nav-link--standalone), html.dd-a11y-high-contrast body .header .header__nav-link--standalone { background: transparent !important; border: 2px solid transparent !important; border-radius: 999rem !important; box-shadow: none !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .header .header__nav-link:hover, html.dd-a11y-high-contrast body .header .header__nav-link:focus-visible, html.dd-a11y-high-contrast body .header .header__nav-link--active, html.dd-a11y-high-contrast body .header .header__nav-item--parent:hover > .header__nav-link, html.dd-a11y-high-contrast body .header .header__nav-item--parent--active > .header__nav-link, html.dd-a11y-high-contrast body .header .header__nav-item--expanded > .header__nav-link, html.dd-a11y-high-contrast body .header .current-menu-item > .header__nav-link, html.dd-a11y-high-contrast body .header .current-menu-ancestor > .header__nav-link { background: transparent !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .header .header__nav-link:hover *, html.dd-a11y-high-contrast body .header .header__nav-link:focus-visible *, html.dd-a11y-high-contrast body .header .header__nav-link--active *, html.dd-a11y-high-contrast body .header .header__nav-item--expanded > .header__nav-link *, html.dd-a11y-high-contrast body .header .header__nav-item--parent--active > .header__nav-link * { background: transparent !important; color: inherit !important; fill: currentColor !important; stroke: currentColor !important; } html.dd-a11y-high-contrast body .header .header__nav-link:hover::after, html.dd-a11y-high-contrast body .header .header__nav-link:focus-visible::after, html.dd-a11y-high-contrast body .header .header__nav-link--active::after, html.dd-a11y-high-contrast body .header .header__nav-item--expanded > .header__nav-link::after, html.dd-a11y-high-contrast body .header .header__nav-item--parent--active > .header__nav-link::after { color: var(--dd-hc-white) !important; } /* Mobile submenu is a simple text list, not a bordered panel. */ html.dd-a11y-high-contrast body .header .header__sub-nav-inner { margin: 1rem 0 2.5rem !important; padding-left: 2.5rem !important; } html.dd-a11y-high-contrast body .header .header__sub-nav-link { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .header .header__sub-nav-link:hover, html.dd-a11y-high-contrast body .header .header__sub-nav-link:focus-visible, html.dd-a11y-high-contrast body .header .header__sub-nav-link--active, html.dd-a11y-high-contrast body .header .current-menu-item > .header__sub-nav-link { background: transparent !important; border: 0 !important; color: var(--dd-hc-white) !important; text-decoration: underline !important; text-decoration-color: var(--dd-hc-yellow) !important; text-decoration-thickness: 2px !important; text-underline-offset: .2em !important; } /* Promo cards are the only bordered elements inside the mobile submenu. */ html.dd-a11y-high-contrast body .header .header__menu-promo { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; border-radius: 1.8rem !important; box-shadow: none !important; color: var(--dd-hc-white) !important; overflow: hidden !important; } html.dd-a11y-high-contrast body .header .header__menu-promo-link { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .header .header__menu-promo-mobile-arrow { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .header .header__menu-promo-mobile-arrow :is(svg, svg *) { fill: currentColor !important; stroke: currentColor !important; } } /* -------------------------------------------------------------------------- Tripadvisor badges on Place hero and Place figure cards -------------------------------------------------------------------------- */ html.dd-a11y-high-contrast body .place-figure__tripadvisor { background: transparent !important; border: 0 !important; } html.dd-a11y-high-contrast body :is( .place-figure__tripadvisor-inner, .place-hero__tripadvisor ) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :is( .place-figure__tripadvisor-inner, .place-hero__tripadvisor ) :is( .place-figure__tripadvisor-copy, .place-figure__tripadvisor-reviews, .place-hero__tripadvisor-copy, .place-hero__tripadvisor-reviews ) { background: transparent !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body :is( .place-figure__tripadvisor-logo, .place-hero__tripadvisor-logo, .place-figure__tripadvisor-rating, .place-hero__tripadvisor-rating, .place-figure__tripadvisor-dot, .place-hero__tripadvisor-dot ) { box-shadow: none !important; } /* -------------------------------------------------------------------------- Shop Darwen pre-image artwork is an external green SVG loaded through img. -------------------------------------------------------------------------- */ html.dd-a11y-high-contrast body img.pre-image--shop-darwen, html.dd-a11y-high-contrast body .pre-image--shop-darwen img { filter: brightness(0) saturate(100%) invert(1) !important; opacity: 1 !important; } /* -------------------------------------------------------------------------- White full-width big-image sections stay genuinely white. -------------------------------------------------------------------------- */ html.dd-a11y-high-contrast body .section--white.section--bigimage-full-width { --bigimage-background: var(--dd-hc-white); background-color: var(--dd-hc-white) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .section--white.section--bigimage-full-width :is( h1, h2, h3, h4, h5, h6, p, li, span, small, .std, .section__primary-title, .section__secondary-title, .section__text, .text-icon-figure__title, .text-icon-figure__text ) { color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .section--white.section--bigimage-full-width .section__primary-title :is(b, strong), html.dd-a11y-high-contrast body .section--white.section--bigimage-full-width .section__title :is(b, strong) { background: transparent !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .section--white.section--bigimage-full-width article, html.dd-a11y-high-contrast body .section--white.section--bigimage-full-width .text-icon-figure { background: transparent !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--dd-hc-black) !important; } /* -------------------------------------------------------------------------- Shop Darwen Place hero eyebrow -------------------------------------------------------------------------- */ html.dd-a11y-high-contrast body .place-hero__eyebrow, html.dd-a11y-high-contrast body button.place-hero__eyebrow--button { background: var(--dd-hc-yellow) !important; border: 2px solid var(--dd-hc-yellow) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .place-hero__eyebrow :is(span, svg, svg *), html.dd-a11y-high-contrast body button.place-hero__eyebrow--button :is(span, svg, svg *) { background: transparent !important; color: var(--dd-hc-black) !important; fill: var(--dd-hc-black) !important; stroke: var(--dd-hc-black) !important; } /* -------------------------------------------------------------------------- CTA newsletter form -------------------------------------------------------------------------- */ html.dd-a11y-high-contrast body .cta-block__panel, html.dd-a11y-high-contrast body .cta-block__inner, html.dd-a11y-high-contrast body .cta-block__content, html.dd-a11y-high-contrast body .cta-newsletter-form, html.dd-a11y-high-contrast body .cta-newsletter-form__privacy { border: 0 !important; box-shadow: none !important; } html.dd-a11y-high-contrast body .cta-newsletter-form__row { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; border-radius: 999rem !important; box-shadow: none !important; } html.dd-a11y-high-contrast body .cta-newsletter-form__row input { background: var(--dd-hc-black) !important; border: 0 !important; box-shadow: none !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .cta-newsletter-form__row input::placeholder { color: var(--dd-hc-white) !important; opacity: 1 !important; } html.dd-a11y-high-contrast body .cta-newsletter-form__submit { background: var(--dd-hc-white) !important; border: 2px solid var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .cta-newsletter-form__submit:hover, html.dd-a11y-high-contrast body .cta-newsletter-form__submit:focus-visible { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } @media (max-width: 1023px) { html.dd-a11y-high-contrast body .cta-newsletter-form__row { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } html.dd-a11y-high-contrast body .cta-newsletter-form__row input { background: var(--dd-hc-black) !important; border: 2px solid var(--dd-hc-white) !important; border-radius: 999rem !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .cta-newsletter-form__submit { border-radius: 999rem !important; } } html.dd-a11y-high-contrast body .site-modal__title, html.dd-a11y-high-contrast body .site-modal__text, html.dd-a11y-high-contrast body .site-modal__close { color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .place-nearby-card__distance { color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .place-nearby-card__distance svg, html.dd-a11y-high-contrast body :is( .news-figure__icon, .latest-news-card__date svg, .event-figure__icon, .place-figure__icon, .place-guide-map-card__meta svg, .places-explorer-card__address svg, .events-archive-card__meta-icon ) { fill:var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .place-nearby-card { border:2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .cky-btn-revisit-wrapper { background: var(--dd-hc-black) url(/wp-content/themes/discoverdarwen/img/dd_cookie_accesibile.svg) center / 100% no-repeat !important; } html.dd-a11y-high-contrast body .place-guide-map__switch-button { border:none !important; } html.dd-a11y-high-contrast body .place-guide-map__mobile-switch::before { background:var(--dd-hc-black) !important; } .place-guide-map__mobile-switch { background:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .place-guide-map__mobile-switch { background: var(--dd-hc-black) !important; } /* -------------------------------------------------------------------------- Mobile MapLibre blocks do not receive decorative section borders. -------------------------------------------------------------------------- */ @media (max-width: 1023px) { html.dd-a11y-high-contrast body :is( .place-map, .place-map__canvas, .places-explorer__stage.is-map, .places-explorer__stage.is-map .places-explorer__map-panel, .places-explorer__stage.is-map .places-explorer__map, .place-guide-map, .place-guide-map__map ) { border: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; } html.dd-a11y-high-contrast body .place-guide-map__canvas { border-top:2px solid var(--dd-hc-white) !important; border-bottom:none !important; } html.dd-a11y-high-contrast body .header .header__nav-link:hover { border:none !important; } html.dd-a11y-high-contrast body .header .header__sub-nav-inner { border-left: 2px solid var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .header .header__nav-link:hover::after, html.dd-a11y-high-contrast body .header .header__nav-link:focus-visible::after, html.dd-a11y-high-contrast body .header .header__nav-link--active::after, html.dd-a11y-high-contrast body .header .header__nav-item--parent:hover > .header__nav-link::after, html.dd-a11y-high-contrast body .header .header__nav-item--parent--active > .header__nav-link::after, html.dd-a11y-high-contrast body .header .header__nav-item--expanded > .header__nav-link::after { color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .market-stall-directory__filter { border-right:none !important; } html.dd-a11y-high-contrast body .market-stall-modal__mobile-header { background:var(--dd-hc-yellow) !important; } } html.dd-a11y-high-contrast body .site-modal__close { background:var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .market-stall-directory__body { background:var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .market-stall-modal__gallery-count { color:var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .market-stall-modal__content * { color:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .market-stall-modal__media { background:var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .market-stall-directory__intro-wrap { background: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .market-stall-directory__filter { border-right:none !important; } html.dd-a11y-high-contrast body .place-nearby-card__distance svg, html.dd-a11y-high-contrast body :is( .news-figure__icon, .latest-news-card__date svg, .event-figure__icon, .place-figure__icon, .place-guide-map-card__meta svg, .places-explorer-card__address svg, .events-archive-card__meta-icon ) *, html.dd-a11y-high-contrast body :is( .news-figure__icon, .latest-news-card__date svg, .event-figure__icon, .place-figure__icon, .place-guide-map-card__meta svg, .places-explorer-card__address svg, .events-archive-card__meta-icon ) { fill:var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast .footer__logo-image { content: url("../img/logo-accesible.svg") !important; filter: none !important; opacity: 1 !important; visibility: visible !important; } /* ========================================================================== WPForms high contrast fixes ========================================================================== */ html.dd-a11y-high-contrast body .wpforms-container, html.dd-a11y-high-contrast body .wpforms-form, html.dd-a11y-high-contrast body .wpforms-field-container, html.dd-a11y-high-contrast body .wpforms-field, html.dd-a11y-high-contrast body .wpforms-field fieldset { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--dd-hc-white) !important; } /* Labels and supporting text */ html.dd-a11y-high-contrast body .wpforms-container :where( .wpforms-field-label, .wpforms-field-label-inline, .wpforms-field-sublabel, legend, label ) { background: transparent !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .wpforms-container .wpforms-required-label { color: var(--dd-hc-yellow) !important; } /* Inputs, selects and textarea */ html.dd-a11y-high-contrast body .wpforms-container :where( input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], input[type="time"], select, textarea ) { background: var(--dd-hc-black) !important; border: 3px solid var(--dd-hc-white) !important; border-radius: 1.4rem !important; box-shadow: none !important; color: var(--dd-hc-white) !important; caret-color: var(--dd-hc-white) !important; outline: 0 !important; } html.dd-a11y-high-contrast body .wpforms-container :where( input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], input[type="time"], select, textarea ):focus { border-color: var(--dd-hc-yellow) !important; box-shadow: 0 0 0 3px var(--dd-hc-black), 0 0 0 6px var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .wpforms-container :where( input, textarea )::placeholder { color: var(--dd-hc-white) !important; opacity: 1 !important; } /* Enquiry-type image choices */ html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices { background: transparent !important; border: 0 !important; } html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-item { background: transparent !important; border: 0 !important; box-shadow: none !important; } html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-item label { background: var(--dd-hc-black) !important; border: 3px solid var(--dd-hc-white) !important; border-radius: 1.4rem !important; box-shadow: none !important; color: var(--dd-hc-white) !important; } html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-image { background: transparent !important; border: 0 !important; box-shadow: none !important; } html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-image img { filter: brightness(0) invert(1) !important; opacity: 1 !important; } html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-label { background: transparent !important; color: var(--dd-hc-white) !important; } /* Selected image choice */ html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-item.wpforms-selected label, html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-item input:checked + .wpforms-image-choices-label, html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-item label:has(input:checked) { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-item.wpforms-selected img, html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-item label:has(input:checked) img { filter: brightness(0) saturate(100%) !important; } html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-item.wpforms-selected .wpforms-image-choices-label, html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-item label:has(input:checked) .wpforms-image-choices-label { color: var(--dd-hc-black) !important; } /* Keyboard focus for enquiry choices */ html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-item label:focus, html.dd-a11y-high-contrast body .wpforms-container .wpforms-image-choices-item label:focus-visible { border-color: var(--dd-hc-yellow) !important; box-shadow: 0 0 0 3px var(--dd-hc-black), 0 0 0 6px var(--dd-hc-yellow) !important; outline: 0 !important; } /* GDPR section */ html.dd-a11y-high-contrast body .wpforms-container .wpforms-field-gdpr-checkbox { background: var(--dd-hc-black) !important; border: 3px solid var(--dd-hc-white) !important; border-radius: 1.4rem !important; box-shadow: none !important; color: var(--dd-hc-white) !important; padding: 2.5rem !important; } html.dd-a11y-high-contrast body .wpforms-container .wpforms-field-gdpr-checkbox ul, html.dd-a11y-high-contrast body .wpforms-container .wpforms-field-gdpr-checkbox li { background: transparent !important; border: 0 !important; color: var(--dd-hc-white) !important; } /* Checkbox */ html.dd-a11y-high-contrast body .wpforms-container input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; background: var(--dd-hc-black) !important; border: 3px solid var(--dd-hc-white) !important; border-radius: .4rem !important; box-shadow: none !important; display: inline-grid !important; height: 2.6rem !important; margin: 0 1.2rem 0 0 !important; place-content: center !important; vertical-align: middle !important; width: 2.6rem !important; } html.dd-a11y-high-contrast body .wpforms-container input[type="checkbox"]::before { color: var(--dd-hc-black) !important; content: "✓"; font-size: 2rem; font-weight: 900; line-height: 1; opacity: 0; } html.dd-a11y-high-contrast body .wpforms-container input[type="checkbox"]:checked { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; } html.dd-a11y-high-contrast body .wpforms-container input[type="checkbox"]:checked::before { opacity: 1; } html.dd-a11y-high-contrast body .wpforms-container input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px var(--dd-hc-black), 0 0 0 6px var(--dd-hc-yellow) !important; outline: 0 !important; } /* Validation messages */ html.dd-a11y-high-contrast body .wpforms-container :where( .wpforms-error, .wpforms-error-container, label.wpforms-error ) { background: transparent !important; color: var(--dd-hc-yellow) !important; } /* Submit button */ html.dd-a11y-high-contrast body .wpforms-container .wpforms-submit { background: var(--dd-hc-white) !important; border: 3px solid var(--dd-hc-white) !important; box-shadow: none !important; color: var(--dd-hc-black) !important; } html.dd-a11y-high-contrast body .wpforms-container .wpforms-submit:hover, html.dd-a11y-high-contrast body .wpforms-container .wpforms-submit:focus-visible { background: var(--dd-hc-yellow) !important; border-color: var(--dd-hc-yellow) !important; color: var(--dd-hc-black) !important; } /* Prevent hidden spam fields becoming visible */ html.dd-a11y-high-contrast body .wpforms-container [aria-hidden="true"][tabindex="-1"], html.dd-a11y-high-contrast body .wpforms-container input[style*="visibility: hidden"] { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ============================================================ READING GUIDE A taller focus band with a slightly higher-contrast reading area and a soft dimming layer above and below it. ============================================================ */ .dd-accessibility-reading-guide { -webkit-backdrop-filter: contrast(1.2); backdrop-filter: contrast(1.2); background: rgba(255, 238, 156, .14) !important; border-bottom: 2px solid rgba(0, 77, 153, .52) !important; border-top: 2px solid rgba(0, 77, 153, .52) !important; box-shadow: 0 0 0 100vmax rgba(2, 25, 48, .22) !important; display: none; height: 5.5rem; left: 0; pointer-events: none; position: fixed; right: 0; top: 42%; transform: translateY(-50%); width: 100%; z-index: 999990; } html.dd-a11y-reading-guide .dd-accessibility-reading-guide { display: block; } @media (max-width: 767px) { .dd-accessibility-reading-guide { box-shadow: 0 0 0 100vmax rgba(2, 25, 48, .18) !important; height: 5.25rem; top: 38%; } } /* ============================================================ BIG CURSORS White and black variants. Both controls are hidden on touch devices. Embedded SVG cursors mean no additional image files are required. ============================================================ */ @media (pointer: fine) { html.dd-a11y-big-cursor-white, html.dd-a11y-big-cursor-white body, html.dd-a11y-big-cursor-white body * { cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNNCAydjMwbDguMi03LjIgNi4xIDEzIDYuMi0yLjktNi4xLTEzSDMwTDQgMnoiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyLjYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=") 4 2, auto !important; } html.dd-a11y-big-cursor-black, html.dd-a11y-big-cursor-black body, html.dd-a11y-big-cursor-black body * { cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNNCAydjMwbDguMi03LjIgNi4xIDEzIDYuMi0yLjktNi4xLTEzSDMwTDQgMnoiIGZpbGw9IiMwMDAiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyLjYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=") 4 2, auto !important; } html.dd-a11y-big-cursor-white body :where( a[href], button, [role="button"], label[for], summary, select, input[type="button"], input[type="submit"], input[type="reset"] ) { cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTQgNGEzIDMgMCAwIDEgMyAzdjktM2EzIDMgMCAwIDEgNiAwdjMtMmEzIDMgMCAwIDEgNiAwdjMtMWEzIDMgMCAwIDEgNiAwdjhjMCA4LTUgMTMtMTMgMTNoLTJjLTUgMC04LTItMTEtNkw0IDIzYTMuNCAzLjQgMCAwIDEgNS42LTMuOEwxMSAyMVY3YTMgMyAwIDAgMSAzLTN6IiBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMi4zIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") 14 5, pointer !important; } html.dd-a11y-big-cursor-black body :where( a[href], button, [role="button"], label[for], summary, select, input[type="button"], input[type="submit"], input[type="reset"] ) { cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTQgNGEzIDMgMCAwIDEgMyAzdjktM2EzIDMgMCAwIDEgNiAwdjMtMmEzIDMgMCAwIDEgNiAwdjMtMWEzIDMgMCAwIDEgNiAwdjhjMCA4LTUgMTMtMTMgMTNoLTJjLTUgMC04LTItMTEtNkw0IDIzYTMuNCAzLjQgMCAwIDEgNS42LTMuOEwxMSAyMVY3YTMgMyAwIDAgMSAzLTN6IiBmaWxsPSIjMDAwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMi4zIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") 14 5, pointer !important; } html:is(.dd-a11y-big-cursor-white, .dd-a11y-big-cursor-black) body :where( input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], textarea, [contenteditable="true"] ) { cursor: text !important; } } /* ============================================================ ACCESSIBILITY WIDGET FOCUS Keep the site-wide focus treatment from producing double rings. ============================================================ */ .dd-accessibility button:focus:not(:focus-visible), .dd-accessibility a:focus:not(:focus-visible) { box-shadow: none !important; outline: 0 !important; } .dd-accessibility button:focus-visible, .dd-accessibility a:focus-visible { box-shadow: none !important; outline: 3px solid var(--dd-accessibility) !important; outline-offset: 3px !important; } .dd-accessibility__trigger:focus, .dd-accessibility__close:focus, .dd-accessibility__option:focus, .dd-accessibility__segmented button:focus, .dd-accessibility__reset:focus, .dd-accessibility__footer a:focus { box-shadow: none !important; } .dd-accessibility__option:focus:not([aria-pressed="true"]), .dd-accessibility__option:focus-visible:not([aria-pressed="true"]) { border-color: var(--dd-accessibility-border) !important; } .dd-accessibility__option[aria-pressed="true"]:focus, .dd-accessibility__option[aria-pressed="true"]:focus-visible { border-color: var(--dd-accessibility) !important; }