/* ========================================================================== Angelic Medi Spa — accessibility menu, page-level effects -------------------------------------------------------------------------- Self-hosted replacement for the UserWay widget. This file holds only the rules that reshape the PAGE. The menu's own chrome lives in a shadow root built by /custom/js/a11y-menu.js, so nothing here can leak into it and none of the !important below can be leaked back out. Every effect keys off a class on , set by the script (and re-set from localStorage before first paint by the inline bootstrap in ). ========================================================================== */ /* --- OpenDyslexic (SIL Open Font License 1.1) ---------------------------- */ @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_local/fonts/files/f007004af3cd.woff2) format('woff2'); } @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_local/fonts/files/dd9fa9c79911.woff2) format('woff2'); } /* -------------------------------------------------------------------------- Host element A viewport-sized, click-through fixed layer. Everything the widget draws is an absolutely positioned child inside its shadow root, so the host needs no painting of its own — and must be immunised against the aggressive colour forcing further down. -------------------------------------------------------------------------- */ #ams-a11y-host { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background: none !important; background-color: transparent !important; border: 0 !important; filter: none; /* Inheritable properties are guarded because the shadow tree inherits them from the host, and the contrast/spacing rules below match the host too. */ color: #1c1c1c !important; font-size: 16px !important; letter-spacing: normal !important; word-spacing: normal !important; line-height: normal !important; text-align: left !important; font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } @media print { #ams-a11y-host { display: none !important; } } /* Skip link — first thing in the tab order, invisible until focused. */ #ams-a11y-skip { position: fixed; top: 0; left: 0; z-index: 2147483001; transform: translateY(-120%); transition: transform .15s ease-out; background: #053e67 !important; color: #fff !important; font: 700 16px/1 'Source Sans Pro', sans-serif; padding: 14px 22px; border-radius: 0 0 6px 0; text-decoration: none !important; } #ams-a11y-skip:focus { transform: translateY(0); outline: 3px solid #ffbf47; outline-offset: -6px; } /* -------------------------------------------------------------------------- Contrast — invert filter on the ROOT element is explicitly exempted from creating a containing block for fixed descendants, so the site's sticky header, back-to-top button and popups keep working. Media is inverted a second time to bring it back to its true colours, and the host is counter- inverted so the menu itself is unaffected (the transform is self-inverse). -------------------------------------------------------------------------- */ html.ams-a11y-invert { filter: invert(1) hue-rotate(180deg); background: #fff; } html.ams-a11y-invert img, html.ams-a11y-invert video, html.ams-a11y-invert picture, html.ams-a11y-invert iframe, html.ams-a11y-invert canvas, html.ams-a11y-invert svg image, html.ams-a11y-invert [style*="background-image"] { filter: invert(1) hue-rotate(180deg); } html.ams-a11y-invert #ams-a11y-host { filter: invert(1) hue-rotate(180deg); } /* -------------------------------------------------------------------------- Contrast — dark and light Colour forcing rather than a filter, so photographs stay readable. Specificity matters more than usual here. The blanket rule is deliberately left at (0,1,1) so the link and form-control overrides below — same weight, later in the file — win, and so the (1,0,0) ID rules for #ams-a11y-host and #ams-a11y-skip outrank all of it. Adding :not(#ams-a11y-host) to the blanket selector would silently beat every one of those. -------------------------------------------------------------------------- */ html.ams-a11y-dark, html.ams-a11y-dark body, html.ams-a11y-dark * { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #6b6b6b !important; text-shadow: none !important; box-shadow: none !important; } html.ams-a11y-dark a, html.ams-a11y-dark a * { color: #ffff00 !important; } html.ams-a11y-dark a:hover, html.ams-a11y-dark a:focus, html.ams-a11y-dark a:hover *, html.ams-a11y-dark a:focus * { color: #ffd0ff !important; } html.ams-a11y-dark input, html.ams-a11y-dark select, html.ams-a11y-dark textarea, html.ams-a11y-dark button { background-color: #111 !important; color: #fff !important; border: 1px solid #8f8f8f !important; } html.ams-a11y-dark ::placeholder { color: #c9c9c9 !important; } html.ams-a11y-light, html.ams-a11y-light body, html.ams-a11y-light * { background-color: #fff !important; background-image: none !important; color: #000 !important; border-color: #545454 !important; text-shadow: none !important; box-shadow: none !important; } html.ams-a11y-light a, html.ams-a11y-light a * { color: #0000cc !important; } html.ams-a11y-light a:hover, html.ams-a11y-light a:focus, html.ams-a11y-light a:hover *, html.ams-a11y-light a:focus * { color: #7a0099 !important; } html.ams-a11y-light input, html.ams-a11y-light select, html.ams-a11y-light textarea, html.ams-a11y-light button { background-color: #fff !important; color: #000 !important; border: 1px solid #545454 !important; } html.ams-a11y-light ::placeholder { color: #4a4a4a !important; } /* Media keeps its own colours under dark/light so the page stays usable. */ html.ams-a11y-dark img, html.ams-a11y-light img, html.ams-a11y-dark video, html.ams-a11y-light video, html.ams-a11y-dark iframe, html.ams-a11y-light iframe { background-color: transparent !important; } /* -------------------------------------------------------------------------- Saturation -------------------------------------------------------------------------- */ html.ams-a11y-sat-low { filter: saturate(.5); } html.ams-a11y-sat-high { filter: saturate(3); } html.ams-a11y-sat-mono { filter: grayscale(1); } /* Exact inverses where one exists, so the menu keeps its own colour. */ html.ams-a11y-sat-low #ams-a11y-host { filter: saturate(2); } html.ams-a11y-sat-high #ams-a11y-host { filter: saturate(.3333); } /* Invert + saturation together: compose both on the root. */ html.ams-a11y-invert.ams-a11y-sat-low { filter: invert(1) hue-rotate(180deg) saturate(.5); } html.ams-a11y-invert.ams-a11y-sat-high { filter: invert(1) hue-rotate(180deg) saturate(3); } html.ams-a11y-invert.ams-a11y-sat-mono { filter: invert(1) hue-rotate(180deg) grayscale(1); } html.ams-a11y-invert.ams-a11y-sat-low #ams-a11y-host { filter: invert(1) hue-rotate(180deg) saturate(2); } html.ams-a11y-invert.ams-a11y-sat-high #ams-a11y-host { filter: invert(1) hue-rotate(180deg) saturate(.3333); } html.ams-a11y-invert.ams-a11y-sat-mono #ams-a11y-host { filter: invert(1) hue-rotate(180deg); } /* -------------------------------------------------------------------------- Highlight links The theme's main navigation is not marked up with anchors — it is `
  • ` driven by jQuery — so those are matched explicitly. Without this the menu bar is the one thing on the page that "highlight links" visibly misses. -------------------------------------------------------------------------- */ html.ams-a11y-links [role="button"][data-url], html.ams-a11y-links a:not(#ams-a11y-skip) { outline: 2px solid #ff0 !important; outline-offset: 2px !important; background-color: #00007a !important; color: #ffff00 !important; text-decoration: underline !important; text-underline-offset: 2px !important; box-decoration-break: clone; } html.ams-a11y-links [role="button"][data-url] *, html.ams-a11y-links a:not(#ams-a11y-skip) * { background-color: transparent !important; color: #ffff00 !important; } html.ams-a11y-links [role="button"][data-url]:hover, html.ams-a11y-links [role="button"][data-url]:focus, html.ams-a11y-links a:not(#ams-a11y-skip):hover, html.ams-a11y-links a:not(#ams-a11y-skip):focus { background-color: #ffff00 !important; color: #000 !important; outline-color: #000 !important; } html.ams-a11y-links [role="button"][data-url]:hover *, html.ams-a11y-links [role="button"][data-url]:focus *, html.ams-a11y-links a:not(#ams-a11y-skip):hover *, html.ams-a11y-links a:not(#ams-a11y-skip):focus * { color: #000 !important; } /* -------------------------------------------------------------------------- Fonts Icon fonts are excluded by class — forcing a family onto a FontAwesome turns every icon into a tofu box. -------------------------------------------------------------------------- */ html.ams-a11y-dyslexic body, html.ams-a11y-dyslexic body *:not(#ams-a11y-host):not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal) { font-family: 'OpenDyslexic', 'Comic Sans MS', Verdana, sans-serif !important; } html.ams-a11y-legible body, html.ams-a11y-legible body *:not(#ams-a11y-host):not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal) { font-family: Verdana, 'Segoe UI', Tahoma, Arial, sans-serif !important; font-style: normal !important; font-variant: normal !important; text-transform: none !important; } /* -------------------------------------------------------------------------- Text spacing / line height / alignment -------------------------------------------------------------------------- */ html[class*="ams-a11y-spacing-"] body *:not(#ams-a11y-host):not(i):not([class*="fa-"]) { word-spacing: var(--ams-word-spacing) !important; letter-spacing: var(--ams-letter-spacing) !important; } html.ams-a11y-spacing-1 { --ams-letter-spacing: .05em; --ams-word-spacing: .10em; } html.ams-a11y-spacing-2 { --ams-letter-spacing: .10em; --ams-word-spacing: .18em; } html.ams-a11y-spacing-3 { --ams-letter-spacing: .18em; --ams-word-spacing: .30em; } html[class*="ams-a11y-lineheight-"] body *:not(#ams-a11y-host):not(i):not([class*="fa-"]) { line-height: var(--ams-line-height) !important; } html.ams-a11y-lineheight-1 { --ams-line-height: 1.6; } html.ams-a11y-lineheight-2 { --ams-line-height: 2; } html.ams-a11y-lineheight-3 { --ams-line-height: 2.5; } html[class*="ams-a11y-align-"] body *:not(#ams-a11y-host):not(i):not([class*="fa-"]) { text-align: var(--ams-text-align) !important; } html.ams-a11y-align-left { --ams-text-align: left; } html.ams-a11y-align-center { --ams-text-align: center; } html.ams-a11y-align-right { --ams-text-align: right; } /* -------------------------------------------------------------------------- Pause animations -------------------------------------------------------------------------- */ html.ams-a11y-noanim *:not(#ams-a11y-host), html.ams-a11y-noanim *:not(#ams-a11y-host)::before, html.ams-a11y-noanim *:not(#ams-a11y-host)::after { animation: none !important; animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; } html.ams-a11y-noanim { scroll-behavior: auto !important; } /* -------------------------------------------------------------------------- Hide images -------------------------------------------------------------------------- */ html.ams-a11y-noimg img, html.ams-a11y-noimg picture, html.ams-a11y-noimg video, html.ams-a11y-noimg canvas, html.ams-a11y-noimg object, html.ams-a11y-noimg embed { visibility: hidden !important; } html.ams-a11y-noimg *:not(#ams-a11y-host) { background-image: none !important; } /* -------------------------------------------------------------------------- Big cursor Two SVG cursors (arrow + pointer) at 3x scale with a heavy outline so they read against both light and dark backgrounds. -------------------------------------------------------------------------- */ html.ams-a11y-cursor, html.ams-a11y-cursor * { cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNNiAyIEw2IDI2IEwxMi41IDE5LjUgTDE2LjUgMjkgTDIxIDI3IEwxNyAxNy41IEwyNiAxNy41IFoiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==") 8 4, auto !important; } html.ams-a11y-cursor a, html.ams-a11y-cursor button, html.ams-a11y-cursor [role="button"], html.ams-a11y-cursor input[type="submit"], html.ams-a11y-cursor label, html.ams-a11y-cursor select { cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNMTEgMTlWNi41YTIuNSAyLjUgMCAwIDEgNSAwVjE0aDEuNXYtMmEyIDIgMCAwIDEgNCAwdjJIMjNhMiAyIDAgMCAxIDQgMHY4YzAgNS0zLjUgOC04IDhoLTNjLTMgMC00LjUtMS41LTYtNGwtMy41LTZhMi4yIDIuMiAwIDAgMSAzLjUtMi41WiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4K") 22 6, pointer !important; } /* -------------------------------------------------------------------------- Keyboard navigation A focus ring that survives the theme's own outline resets, plus a marker for the element the shortcut keys most recently jumped to. -------------------------------------------------------------------------- */ html.ams-a11y-kbd :focus { outline: 4px solid #ff6a00 !important; outline-offset: 2px !important; box-shadow: 0 0 0 8px rgba(255, 106, 0, .35) !important; } html.ams-a11y-kbd :focus:not(:focus-visible) { outline: 4px solid #ff6a00 !important; } .ams-a11y-jump-target { outline: 4px dashed #ff6a00 !important; outline-offset: 3px !important; scroll-margin-top: 120px; } /* Element currently being read aloud. */ .ams-a11y-reading { background-color: #fff4a3 !important; color: #000 !important; outline: 3px solid #b58900 !important; outline-offset: 2px !important; scroll-margin-top: 120px; }