/* ========================================================================== ZIP — Accessibility widget + display modes (WCAG helpers) ========================================================================== */ /* ---- Widget trigger ------------------------------------------------------ */ .a11y { position: fixed; left: 20px; bottom: 20px; z-index: 999997; } .a11y__toggle { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--zip-red); color: #fff; border: 0; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.25); cursor: pointer; transition: background .25s, transform .25s; } .a11y__toggle:hover { background: var(--zip-red-dark); transform: scale(1.06); } .a11y__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--zip-red); } /* ---- Panel --------------------------------------------------------------- */ .a11y__panel { position: absolute; left: 0; bottom: 64px; width: 320px; max-width: calc(100vw - 40px); background: #fff; color: var(--zip-text); border: 1px solid var(--zip-border); box-shadow: 0 12px 40px rgba(0,0,0,.2); padding: 20px; } .a11y__panel[hidden] { display: none; } .a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .a11y__title { font-size: 1.25rem; font-weight: 800; margin: 0; color: var(--zip-black); } .a11y__close { width: 32px; height: 32px; line-height: 1; font-size: 1.5rem; background: none; border: 0; cursor: pointer; color: var(--zip-text); } .a11y__close:hover { color: var(--zip-red); } .a11y__group { margin-bottom: 18px; } .a11y__label { display: block; font-size: .875rem; font-weight: 700; margin-bottom: 8px; color: var(--zip-text-muted); text-transform: uppercase; letter-spacing: .04em; } .a11y__fontctl { display: flex; align-items: center; gap: 8px; } .a11y__fontval { min-width: 56px; text-align: center; font-weight: 700; } .a11y__modes, .a11y__toggles { display: flex; flex-wrap: wrap; gap: 8px; } .a11y__btn, .a11y__chip { font-family: var(--zip-font); font-size: .9375rem; font-weight: 600; padding: 8px 14px; background: #fff; color: var(--zip-black); border: 1px solid var(--zip-black); border-radius: 0; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .a11y__btn:hover, .a11y__chip:hover { background: var(--zip-pink); } .a11y__chip[aria-pressed="true"] { background: var(--zip-red); color: #fff; border-color: var(--zip-red); } .a11y__btn:focus-visible, .a11y__chip:focus-visible, .a11y__close:focus-visible, .a11y__reset:focus-visible { outline: 2px solid var(--zip-red); outline-offset: 2px; } .a11y__reset { width: 100%; font-family: var(--zip-font); font-weight: 700; font-size: 1rem; padding: 12px; margin-top: 4px; background: var(--zip-black); color: #fff; border: 0; border-radius: 0; cursor: pointer; } .a11y__reset:hover { background: #000; } /* ========================================================================== Display modes — applied to ========================================================================== */ /* High contrast: override colour tokens so the whole theme follows */ html.a11y-contrast { --zip-text: #000; --zip-text-muted: #161616; --zip-black: #000; --zip-border: #000; --zip-pink: #fff; } html.a11y-contrast a { text-decoration: underline; } html.a11y-contrast .news-card, html.a11y-contrast .field input, html.a11y-contrast .field textarea { border-color: #000; } /* Colour-blind helpers via filters (single colour mode at a time) */ html.a11y-grayscale { filter: grayscale(100%); } html.a11y-invert { filter: invert(100%) hue-rotate(180deg); } html.a11y-invert img, html.a11y-invert video, html.a11y-invert iframe, html.a11y-invert .image-band__img, html.a11y-invert .page-hero__img { filter: invert(100%) hue-rotate(180deg); } /* keep media natural */ /* Underline every link */ html.a11y-underline a { text-decoration: underline !important; } /* Highlight links (clear non-colour cue) */ html.a11y-links a { outline: 2px solid var(--zip-red); outline-offset: 2px; background: #fff3cd; color: #000 !important; } /* More readable typography */ html.a11y-readable body, html.a11y-readable input, html.a11y-readable textarea, html.a11y-readable button, html.a11y-readable select { font-family: Verdana, Tahoma, Arial, sans-serif !important; } html.a11y-readable body { letter-spacing: .03em; word-spacing: .08em; line-height: 1.8; } /* Larger cursor */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='1.5' d='M5 3l14 7-6 2-2 6z'/%3E%3C/svg%3E") 4 4, auto; } /* Pause animations */ html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Keep the widget itself usable in invert/grayscale */ html.a11y-invert .a11y__panel, html.a11y-invert .a11y__toggle { filter: invert(100%) hue-rotate(180deg); } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 520px) { .a11y { left: 12px; bottom: 12px; } .a11y__panel { left: 0; width: calc(100vw - 24px); } } @media print { .a11y { display: none; } }