/* * local_adapta - public stylesheet. * * @package local_adapta * @copyright 2026 Accessibility plugin authors * @license https://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ /* ------------------------------------------------------------------ */ /* Bundled font: OpenDyslexic (SIL OFL). */ /* See fonts/OFL.txt for full license terms. */ /* ------------------------------------------------------------------ */ @font-face { font-family: "OpenDyslexic"; src: url("fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("fonts/OpenDyslexic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------ */ /* Floating button (FAB) and side panel chrome. */ /* All sizes in px so that text-size scaling on doesn't */ /* compound on the panel itself. */ /* ------------------------------------------------------------------ */ .local-adapta-fab { position: fixed; bottom: 16px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #1f4e8c; color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); cursor: pointer; /* Above panel (9991) and backdrop (9990) so it stays clickable while open. */ z-index: 9992; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 14px; transition: background 0.15s, transform 0.2s; } .local-adapta-fab--right { right: 16px; } .local-adapta-fab--left { left: 16px; } .local-adapta-fab:hover { background: #16386a; } .local-adapta-fab:focus-visible { outline: 3px solid #ffd400; outline-offset: 3px; } /* When the panel is open the FAB doubles as a close affordance. */ .local-adapta-fab.is-active { background: #b03a2e; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 4px 14px rgba(0, 0, 0, 0.4); } .local-adapta-fab.is-active:hover { background: #8a2c22; } .local-adapta-fab.is-active .local-adapta-fab__icon { transform: rotate(45deg); } .local-adapta-fab__icon { display: inline-flex; transition: transform 0.2s; } @media (prefers-reduced-motion: reduce) { .local-adapta-fab, .local-adapta-fab__icon { transition: none; } } .local-adapta-panel { position: fixed; top: 0; bottom: 0; width: 360px; max-width: 100vw; background: #fff; color: #1a1a1a; box-shadow: 0 0 28px rgba(0, 0, 0, 0.25); z-index: 9991; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.2s ease-in-out; font-size: 14px; line-height: 1.4; letter-spacing: normal; word-spacing: normal; } .local-adapta-panel--right { right: 0; } .local-adapta-panel--left { left: 0; transform: translateX(-100%); } .local-adapta-panel.is-open { transform: translateX(0); } .local-adapta-panel[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .local-adapta-panel { transition: none; } } .local-adapta-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #ddd; } .local-adapta-panel__title { margin: 0; font-size: 17px; font-weight: 600; } .local-adapta-close { background: #f0f0f0; border: 1px solid #ccc; border-radius: 999px; padding: 0 12px 0 10px; height: 36px; color: #1a1a1a; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; } .local-adapta-close:hover { background: #e5e5e5; } .local-adapta-close:active { background: #d8d8d8; } .local-adapta-close:focus-visible { outline: 3px solid #1f4e8c; outline-offset: 2px; } .local-adapta-close svg { display: block; flex-shrink: 0; } .local-adapta-close__text { white-space: nowrap; } .local-adapta-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.32); z-index: 9990; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; } .local-adapta-backdrop.is-visible { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .local-adapta-backdrop { transition: none; } } .local-adapta-panel__body { overflow-y: auto; padding: 16px; flex: 1; } .local-adapta-panel__footer { padding: 12px 16px; border-top: 1px solid #ddd; text-align: right; } .local-adapta-disclaimer { font-size: 12px; color: #555; margin: 0 0 16px; line-height: 1.45; } .local-adapta-section { border: 1px solid #ccc; border-radius: 4px; padding: 12px 16px; margin: 0 0 16px; } .local-adapta-section legend { font-weight: 600; font-size: 14px; padding: 0 6px; width: auto; margin-bottom: 4px; } .local-adapta-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .local-adapta-profile, .local-adapta-level__btn, .local-adapta-radio__btn { background: #f4f4f4; border: 2px solid transparent; border-radius: 4px; padding: 8px 10px; cursor: pointer; font-size: 13px; color: #1a1a1a; text-align: center; min-height: 36px; font-family: inherit; } .local-adapta-profile:focus-visible, .local-adapta-level__btn:focus-visible, .local-adapta-radio__btn:focus-visible { outline: 3px solid #1f4e8c; outline-offset: 2px; } .local-adapta-profile.is-active, .local-adapta-level__btn.is-active, .local-adapta-radio__btn.is-active { background: #e2ecfa; border-color: #1f4e8c; font-weight: 600; } /* Toggle = full-width button with switch-style indicator on the right. */ .local-adapta-toggle { display: block; width: 100%; background: #f4f4f4; border: 2px solid transparent; border-radius: 6px; padding: 10px 60px 10px 14px; margin: 6px 0; cursor: pointer; text-align: left; color: #1a1a1a; font-size: 13px; line-height: 1.35; min-height: 44px; font-family: inherit; position: relative; transition: background 0.15s, border-color 0.15s; } .local-adapta-toggle:hover { background: #ececec; } .local-adapta-toggle:focus-visible { outline: 3px solid #1f4e8c; outline-offset: 2px; } .local-adapta-toggle.is-active { background: #e2ecfa; border-color: #1f4e8c; font-weight: 600; } .local-adapta-toggle::after { content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 32px; height: 18px; border-radius: 999px; background: #c4c4c4; transition: background 0.2s; } .local-adapta-toggle::before { content: ''; position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: right 0.2s; } .local-adapta-toggle.is-active::after { background: #1f4e8c; } .local-adapta-toggle.is-active::before { right: 16px; } @media (prefers-reduced-motion: reduce) { .local-adapta-toggle, .local-adapta-toggle::before, .local-adapta-toggle::after { transition: none; } } /* Voice section action buttons. */ .local-adapta-voice { display: flex; flex-wrap: wrap; gap: 6px; } .local-adapta-voice__btn { flex: 1 1 calc(50% - 6px); min-height: 40px; padding: 8px 12px; background: #f4f4f4; border: 1px solid #ccc; border-radius: 6px; color: #1a1a1a; font-size: 13px; font-family: inherit; cursor: pointer; } .local-adapta-voice__btn:hover { background: #ececec; } .local-adapta-voice__btn:focus-visible { outline: 3px solid #1f4e8c; outline-offset: 2px; } .local-adapta-voice__btn--primary { flex-basis: 100%; background: #1f4e8c; color: #fff; border-color: #1f4e8c; font-weight: 600; } .local-adapta-voice__btn--primary:hover { background: #16386a; } .local-adapta-level, .local-adapta-radio { margin: 10px 0; } .local-adapta-level__label, .local-adapta-radio__label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 13px; } .local-adapta-level__group, .local-adapta-radio__group { display: flex; gap: 4px; flex-wrap: wrap; } .local-adapta-reset { min-width: 128px; font-size: 13px; } /* Visually hidden but readable by screen readers (aria-live region). */ .local-adapta-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Reading aids overlays (created at runtime). */ .local-adapta-reading-guide { position: fixed; left: 0; right: 0; height: 40px; background: rgba(255, 235, 59, 0.30); border-top: 2px solid rgba(255, 193, 7, 0.7); border-bottom: 2px solid rgba(255, 193, 7, 0.7); pointer-events: none; z-index: 9988; top: 50%; } .local-adapta-reading-mask { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); pointer-events: none; z-index: 9989; } .local-adapta-reading-mask--top { top: 0; height: 30vh; } .local-adapta-reading-mask--bottom { top: 70vh; bottom: 0; } /* ------------------------------------------------------------------ */ /* Effects applied via data attributes on . */ /* ------------------------------------------------------------------ */ [data-adapta-font-legible="true"] body, [data-adapta-font-legible="true"] body *:not(#local-adapta-root):not(#local-adapta-root *) { font-family: Verdana, "Helvetica Neue", Arial, sans-serif !important; } [data-adapta-font-dyslexia="true"] body, [data-adapta-font-dyslexia="true"] body *:not(#local-adapta-root):not(#local-adapta-root *) { font-family: "OpenDyslexic", "Comic Sans MS", "Comic Sans", cursive !important; letter-spacing: 0.04em !important; } [data-adapta-highlight-headings="true"] h1, [data-adapta-highlight-headings="true"] h2, [data-adapta-highlight-headings="true"] h3, [data-adapta-highlight-headings="true"] h4, [data-adapta-highlight-headings="true"] h5, [data-adapta-highlight-headings="true"] h6 { background: #fff200 !important; color: #1a1a1a !important; padding: 0.15em 0.3em !important; border-left: 4px solid #1f4e8c !important; } [data-adapta-highlight-links="true"] body a:not(#local-adapta-root *) { background: #fff200 !important; color: #1a1a1a !important; text-decoration: underline !important; outline: 1px solid #1a1a1a !important; } [data-adapta-highlight-buttons="true"] body button:not(.local-adapta-fab):not(.local-adapta-close):not(#local-adapta-root *), [data-adapta-highlight-buttons="true"] body .btn:not(#local-adapta-root *), [data-adapta-highlight-buttons="true"] body [role="button"]:not(#local-adapta-root *), [data-adapta-highlight-buttons="true"] body input[type="submit"], [data-adapta-highlight-buttons="true"] body input[type="button"] { outline: 3px solid #f0a500 !important; outline-offset: 2px !important; } [data-adapta-hide-images="true"] body img, [data-adapta-hide-images="true"] body picture, [data-adapta-hide-images="true"] body video, [data-adapta-hide-images="true"] body svg:not(.local-adapta-fab svg):not(#local-adapta-root *) { visibility: hidden !important; } [data-adapta-stop-animations="true"] *:not(#local-adapta-root):not(#local-adapta-root *), [data-adapta-stop-animations="true"] *:not(#local-adapta-root):not(#local-adapta-root *)::before, [data-adapta-stop-animations="true"] *:not(#local-adapta-root):not(#local-adapta-root *)::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Text size: scale at root so rem-based layouts (Boost/Bootstrap) follow. */ html[data-adapta-text-size="1"] { font-size: 110%; } html[data-adapta-text-size="2"] { font-size: 125%; } html[data-adapta-text-size="3"] { font-size: 150%; } /* Line height and letter/word spacing. Excludes the panel so its own typography stays controlled by the panel rules above. */ [data-adapta-line-height="1"] body, [data-adapta-line-height="1"] body *:not(#local-adapta-root):not(#local-adapta-root *) { line-height: 1.6 !important; } [data-adapta-line-height="2"] body, [data-adapta-line-height="2"] body *:not(#local-adapta-root):not(#local-adapta-root *) { line-height: 2 !important; } [data-adapta-line-height="3"] body, [data-adapta-line-height="3"] body *:not(#local-adapta-root):not(#local-adapta-root *) { line-height: 2.5 !important; } [data-adapta-text-spacing="1"] body *:not(#local-adapta-root):not(#local-adapta-root *) { letter-spacing: 0.04em !important; word-spacing: 0.10em !important; } [data-adapta-text-spacing="2"] body *:not(#local-adapta-root):not(#local-adapta-root *) { letter-spacing: 0.08em !important; word-spacing: 0.16em !important; } [data-adapta-text-spacing="3"] body *:not(#local-adapta-root):not(#local-adapta-root *) { letter-spacing: 0.12em !important; word-spacing: 0.20em !important; } [data-adapta-contrast="dark"] body, [data-adapta-contrast="dark"] body :not(input):not(select):not(textarea):not(button):not(.local-adapta-fab):not(.local-adapta-fab *):not(#local-adapta-root):not(#local-adapta-root *) { background-color: #000 !important; color: #fff !important; } [data-adapta-contrast="dark"] body a:not(#local-adapta-root *) { color: #ffd400 !important; } [data-adapta-contrast="light"] body, [data-adapta-contrast="light"] body :not(input):not(select):not(textarea):not(button):not(.local-adapta-fab):not(.local-adapta-fab *):not(#local-adapta-root):not(#local-adapta-root *) { background-color: #fff !important; color: #000 !important; } [data-adapta-contrast="light"] body a:not(#local-adapta-root *) { color: #00007a !important; } [data-adapta-invert="true"] body { filter: invert(100%) hue-rotate(180deg); } [data-adapta-invert="true"] body img, [data-adapta-invert="true"] body picture, [data-adapta-invert="true"] body video { filter: invert(100%) hue-rotate(180deg); } [data-adapta-high-contrast="true"] body { filter: contrast(150%); } [data-adapta-monochrome="true"] body { filter: grayscale(100%); } [data-adapta-high-saturation="true"] body { filter: saturate(200%); } [data-adapta-low-saturation="true"] body { filter: saturate(40%); } /* Keep our own UI readable when filters are applied on . */ [data-adapta-invert="true"] #local-adapta-root, [data-adapta-high-contrast="true"] #local-adapta-root, [data-adapta-monochrome="true"] #local-adapta-root, [data-adapta-high-saturation="true"] #local-adapta-root, [data-adapta-low-saturation="true"] #local-adapta-root { filter: none !important; isolation: isolate; } /* Custom cursors. */ [data-adapta-cursor="big_black"] body, [data-adapta-cursor="big_black"] body *:not(input):not(textarea) { cursor: url("data:image/svg+xml;utf8,") 0 0, auto !important; } [data-adapta-cursor="big_white"] body, [data-adapta-cursor="big_white"] body *:not(input):not(textarea) { cursor: url("data:image/svg+xml;utf8,") 0 0, auto !important; } [data-adapta-cursor] body a, [data-adapta-cursor] body button { cursor: pointer !important; }