/* Accessibility widget (floating button + offcanvas drawer). Ported from the NCSS Portal (Drupal) theme's accessibility.css/js. Effects are driven by attributes set on by assets/website/js/accessibility.js and persisted to localStorage, e.g. . */ html { transition: filter .3s ease, background-color .3s ease, color .3s ease; } /* Saturation */ html[saturation="low"] { filter: saturate(.2); } html[saturation="medium"] { filter: saturate(.5); } html[saturation="high"] { filter: saturate(.8); } html[saturation="desaturated"] { filter: saturate(0); } /* Contrast */ html[contrast="invert"] { filter: invert(100%) hue-rotate(180deg); } html[contrast="dark-contrast"] { background-color: #000; color: #fff; } html[contrast="light-contrast"] { background-color: #fff; color: #000; } /* Hyperlink highlighting. `:not(.btn-close)` keeps Bootstrap's offcanvas dismiss button visible. `!important` + the html[...] ancestor selector is required to beat the site's more specific nav/dropdown/link selectors (e.g. `.footer__col__list__item__link`, `.dropdown-item`). */ html[hyperlink="highlighted"] a, html[hyperlink="highlighted"] button:not(.btn-close), html[hyperlink="highlighted"] .btn:not(.btn-close) { background-color: #000 !important; color: #ff0 !important; } /* Font size */ html[fontsize="large"] h1, html[fontsize="large"] .h1, html[fontsize="large"] h2, html[fontsize="large"] .h2, html[fontsize="large"] h3, html[fontsize="large"] .h3, html[fontsize="large"] h4, html[fontsize="large"] .h4, html[fontsize="large"] h5, html[fontsize="large"] .h5, html[fontsize="large"] h6, html[fontsize="large"] .h6, html[fontsize="large"] p, html[fontsize="large"] a { zoom: 1.1; } html[fontsize="xlarge"] h1, html[fontsize="xlarge"] .h1, html[fontsize="xlarge"] h2, html[fontsize="xlarge"] .h2, html[fontsize="xlarge"] h3, html[fontsize="xlarge"] .h3, html[fontsize="xlarge"] h4, html[fontsize="xlarge"] .h4, html[fontsize="xlarge"] h5, html[fontsize="xlarge"] .h5, html[fontsize="xlarge"] h6, html[fontsize="xlarge"] .h6, html[fontsize="xlarge"] p, html[fontsize="xlarge"] a { zoom: 1.2; } html[fontsize="xxlarge"] h1, html[fontsize="xxlarge"] .h1, html[fontsize="xxlarge"] h2, html[fontsize="xxlarge"] .h2, html[fontsize="xxlarge"] h3, html[fontsize="xxlarge"] .h3, html[fontsize="xxlarge"] h4, html[fontsize="xxlarge"] .h4, html[fontsize="xxlarge"] h5, html[fontsize="xxlarge"] .h5, html[fontsize="xxlarge"] h6, html[fontsize="xxlarge"] .h6, html[fontsize="xxlarge"] p, html[fontsize="xxlarge"] a { zoom: 1.3; } /* Text (letter) spacing */ html[textspacing="wide"] { letter-spacing: .5px; } html[textspacing="extra-wide"] { letter-spacing: 1px; } /* Line height */ html[lineheight="extra-tight"] h1, html[lineheight="extra-tight"] .h1, html[lineheight="extra-tight"] h2, html[lineheight="extra-tight"] .h2, html[lineheight="extra-tight"] h3, html[lineheight="extra-tight"] .h3, html[lineheight="extra-tight"] h4, html[lineheight="extra-tight"] .h4, html[lineheight="extra-tight"] h5, html[lineheight="extra-tight"] .h5, html[lineheight="extra-tight"] h6, html[lineheight="extra-tight"] .h6, html[lineheight="extra-tight"] p, html[lineheight="extra-tight"] a { line-height: .75; } html[lineheight="tight"] h1, html[lineheight="tight"] .h1, html[lineheight="tight"] h2, html[lineheight="tight"] .h2, html[lineheight="tight"] h3, html[lineheight="tight"] .h3, html[lineheight="tight"] h4, html[lineheight="tight"] .h4, html[lineheight="tight"] h5, html[lineheight="tight"] .h5, html[lineheight="tight"] h6, html[lineheight="tight"] .h6, html[lineheight="tight"] p, html[lineheight="tight"] a { line-height: .9; } html[lineheight="loose"] h1, html[lineheight="loose"] .h1, html[lineheight="loose"] h2, html[lineheight="loose"] .h2, html[lineheight="loose"] h3, html[lineheight="loose"] .h3, html[lineheight="loose"] h4, html[lineheight="loose"] .h4, html[lineheight="loose"] h5, html[lineheight="loose"] .h5, html[lineheight="loose"] h6, html[lineheight="loose"] .h6, html[lineheight="loose"] p, html[lineheight="loose"] a { line-height: 1.1; } html[lineheight="extra-loose"] h1, html[lineheight="extra-loose"] .h1, html[lineheight="extra-loose"] h2, html[lineheight="extra-loose"] .h2, html[lineheight="extra-loose"] h3, html[lineheight="extra-loose"] .h3, html[lineheight="extra-loose"] h4, html[lineheight="extra-loose"] .h4, html[lineheight="extra-loose"] h5, html[lineheight="extra-loose"] .h5, html[lineheight="extra-loose"] h6, html[lineheight="extra-loose"] .h6, html[lineheight="extra-loose"] p, html[lineheight="extra-loose"] a { line-height: 1.7; } /* Text align. Bootstrap sets `body { text-align: var(--bs-body-text-align) }` explicitly (not just inherited), which blocks a plain `html[textalign]` rule from reaching page content — target body directly too. */ html[textalign="left"], html[textalign="left"] body { text-align: left; } html[textalign="center"], html[textalign="center"] body { text-align: center; } html[textalign="right"], html[textalign="right"] body { text-align: right; } html[textalign="justify"], html[textalign="justify"] body { text-align: justify; } /* Hide images */ html[hideImages="partially-hidden"] img { opacity: 40%; } html[hideImages="hidden"] img { opacity: 0; pointer-events: none; visibility: hidden; } /* Custom cursor */ html[cursor="pointer"] * { cursor: url('/assets/website/images/icons/accessibility-cursor.svg'), auto; } html[cursor="line"] #a11y-cursor { display: block; pointer-events: none; position: fixed; left: 50%; top: 50%; z-index: 999999; transform: translate(-50%, -50%); width: 200vw; height: 100px; border-top: 5px solid currentColor; border-bottom: 5px solid currentColor; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .4); } #a11y-cursor { display: none; } /* Animations */ html[animations="paused"] * { animation: none !important; transition-duration: 0s !important; } /* Accessibility button + offcanvas drawer. Positioned opposite the existing back-to-top button (`.prgoress_indicator`, which sits at inset-inline-end 40px/bottom 40px) so the two floating controls never overlap in either LTR or RTL. `.btn.accessibility-btn` (not just `.accessibility-btn`) so its specificity beats Bootstrap's `.btn { position: relative }` regardless of stylesheet load order. */ .btn.accessibility-btn { border-radius: 50%; width: 56px; height: 56px; min-height: 56px; display: flex; align-items: center; justify-content: center; position: fixed; bottom: 2.5rem; inset-inline-start: 24px; z-index: 100000; } .a11y-drawer-body { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; background: #eaeaea; padding: 28px; } .a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .a11y-btn { position: relative; width: 100%; height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background-color: #fff; color: #1b8354; font-weight: 700; box-shadow: none; border: 1px solid transparent; border-radius: 6px; transition: border-color .15s, background-color .15s; } .a11y-btn:hover { background-color: #f9fafb; border-color: #1b8354; } .a11y-btn.active::after { content: "check_circle"; position: absolute; top: 5px; left: 5px; font-size: 20px; } .a11y-btn > span { width: 24px; height: 24px; font-size: 24px; } .a11y-btn > p { font-size: 14px; margin-bottom: 0; } .a11y-btn.active::after, .a11y-btn > span { font-family: "Material Symbols Outlined"; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }