/* Accessibility menu (floating button + offcanvas in footer.html.twig). Effects are driven by attributes set on by frontend/js/accessibility.js and persisted to localStorage, e.g. . */ html { transition: all .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 — its X is a background-image SVG with dark strokes, which disappears against the forced black background otherwise, making the accessibility drawer impossible to close. `!important` is required: the new-design nav/dropdown markup styles links through highly specific chained-class selectors (e.g. `.navbar .nav-item .nav-item .dropdown-item`, `.nav-item .dropdown-menu li a`) which otherwise beat this rule and leave nav links completely unaffected. */ html[hyperlink="highlighted"] a, html[hyperlink="highlighted"] button:not(.btn-close), html[hyperlink="highlighted"] .btn:not(.btn-close), html[hyperlink="highlighted"] .btn-social, html[hyperlink="highlighted"] .dropdown-toggle, html[hyperlink="highlighted"] .pagination-button, html[hyperlink="highlighted"] .back-btn { 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 at all — it only ever affected itself. Target body directly so the value actually cascades to paragraphs/headings. */ 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('/themes/ncss/frontend/img/icons8-cursor.svg'), auto; } html[cursor="line"] #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); } #cursor { display: none; } /* Animations */ html[animations="paused"] * { animation: none !important; transition-duration: 0s !important; } /* Accessibility button + offcanvas drawer. Selector is `.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: 60px; height: 60px; min-height: 60px; display: flex; align-items: center; justify-content: center; position: fixed; bottom: 20px; right: 20px; /* Keeps the button above all normal page/section stacking contexts (highest other real z-index in the theme is 99999 in _header.scss) so it never gets visually cropped by overlapping content. */ z-index: 100000; } .drawer-body { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; background: #eaeaea; padding: 28px; } .accessibility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .i18n-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; } .i18n-btn:hover { background-color: #f9fafb; border-color: #1b8354; } .i18n-btn.active::after { content: "check_circle"; position: absolute; top: 5px; left: 5px; font-size: 20px; } .i18n-btn > span { width: 24px; height: 24px; font-size: 24px; } .i18n-btn > p { font-size: 14px; margin-bottom: 0; } .i18n-btn.active::after, .i18n-btn > span { font-family: "Material Symbols Outlined"; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }