/** * 2026 HotWebDesign - Christos A. Daggas * * NOTICE OF LICENSE * * This source file is part of the Accessibility Prestashop module. * It is licensed under the End-User License Agreement (EULA) * bundled with this package in the file LICENSE.md. * * You may not copy, modify, distribute, or resell this file or * the Module without prior written permission from the Licensor. * Unauthorized sharing or resale will result in license termination. * * DISCLAIMER * * This module is provided "as is", without warranties of any kind. * Use at your own risk. The Licensor is not responsible for any * damages resulting from its use. * * @author Christos A. Daggas * @copyright 2026 HotWebDesign * @license Proprietary - See LICENSE.md for details */ /* ------------------------------------------------------------------------- * Font scaling (CSS-variable based) * * front.js writes --psm-font-scale on before paint. We zoom every * direct child of *except* the accessibility toolbar and reading * line, so text and layout scale together (including px-sized text that * a root font-size scale would not catch). The toolbar must live outside * the zoomed subtree, which is why front.js moves it to be a direct child * of on init. * ------------------------------------------------------------------------- */ body > :not(#psm-accessibility-toolbar):not(#psm-reading-line) { zoom: var(--psm-font-scale, 1); } /* ------------------------------------------------------------------------- * Toolbar * ------------------------------------------------------------------------- */ #psm-accessibility-toolbar { --psm-main-color: #222222; position: fixed; bottom: 10px; z-index: 9999; width: 80px; } #psm-accessibility-toggle { background: var(--psm-main-color); border: none; border-radius: 50%; width: 60px; height: 60px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease; } #psm-accessibility-toggle:hover, #psm-accessibility-toggle:focus-visible { transform: scale(1.1); outline: 2px solid var(--psm-main-color); outline-offset: 2px; } #psm-accessibility-toggle svg { width: 36px; height: 36px; } #psm-accessibility-panel { position: absolute; bottom: 80px; width: 320px; background: #ffffff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); border: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-height: calc(100vh - 100px); overflow-y: auto; } .psm-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; background-color: var(--psm-main-color); border-bottom: 1px solid var(--psm-main-color); border-top-left-radius: 12px; border-top-right-radius: 12px; } h2.psm-panel-title { font-size: 16px; font-weight: 600; color: #ffffff; margin: 0; } .psm-panel-close-btn { background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: #ffffff; opacity: 0.9; padding: 8px; margin: 0; min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .psm-panel-close-btn:hover, .psm-panel-close-btn:focus-visible { opacity: 1; outline: 2px solid #ffffff; outline-offset: -2px; } .psm-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; } .psm-panel-button { background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px 6px; min-height: 48px; min-width: 48px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; font-size: 10px; color: #000000; } .psm-panel-button:hover { background-color: #e9ecef; border-color: #dee2e6; } .psm-panel-button:focus-visible { outline: 2px solid var(--psm-main-color); outline-offset: 2px; } .psm-panel-button.active { background-color: #cfe2ff; border-color: #b6d4fe; color: #084298; } .psm-panel-button svg { width: 28px; height: 28px; margin-bottom: 8px; color: #6c757d; } .psm-panel-button.active svg { color: #084298; } .psm-compact-panel .psm-panel-button svg { display: none; } .psm-compact-panel .psm-panel-button { padding: 12px 8px; min-height: 48px; font-size: 13px; } .psm-panel-footer { padding: 16px; border-top: 1px solid #eeeeee; } .psm-reset-button { width: 100%; background-color: var(--psm-main-color); color: white; border: none; border-radius: 8px; padding: 12px; min-height: 48px; box-sizing: border-box; font-size: 16px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; } .psm-reset-button:focus-visible { outline: 2px solid #ffffff; outline-offset: -3px; box-shadow: 0 0 0 5px var(--psm-main-color); } .psm-reset-button svg { width: 20px; height: 20px; } /* ------------------------------------------------------------------------- * Accessibility modes * * High contrast: targeted overrides instead of a `* { background: inherit }` * sledgehammer that would mangle product badges, alerts and images. * ------------------------------------------------------------------------- */ body.psm-theme-dark { background-color: #121212 !important; color: #ffffff !important; } body.psm-theme-dark p, body.psm-theme-dark h1, body.psm-theme-dark h2, body.psm-theme-dark h3, body.psm-theme-dark h4, body.psm-theme-dark h5, body.psm-theme-dark h6, body.psm-theme-dark li, body.psm-theme-dark span, body.psm-theme-dark label, body.psm-theme-dark td, body.psm-theme-dark th { color: #ffffff !important; } body.psm-theme-dark a { color: #bb86fc !important; } body.psm-theme-dark header, body.psm-theme-dark footer, body.psm-theme-dark main, body.psm-theme-dark section, body.psm-theme-dark article, body.psm-theme-dark aside, body.psm-theme-dark nav, body.psm-theme-dark .card, body.psm-theme-dark .container, body.psm-theme-dark .container-fluid, body.psm-theme-dark .row { background-color: #121212 !important; } body.psm-theme-dark input, body.psm-theme-dark textarea, body.psm-theme-dark select { background-color: #1e1e1e !important; color: #ffffff !important; border-color: #555555 !important; } /* Keep the toolbar's own light palette readable inside dark mode. */ body.psm-theme-dark #psm-accessibility-panel .psm-panel-button, body.psm-theme-dark #psm-accessibility-panel .psm-panel-button span { color: #000000 !important; } body.psm-theme-dark #psm-accessibility-panel .psm-panel-button svg { color: #6c757d !important; } body.psm-theme-dark #psm-accessibility-panel .psm-panel-button.active, body.psm-theme-dark #psm-accessibility-panel .psm-panel-button.active span, body.psm-theme-dark #psm-accessibility-panel .psm-panel-button.active svg { color: #084298 !important; } body.psm-theme-dark #psm-accessibility-panel .psm-panel-title, body.psm-theme-dark #psm-accessibility-panel .psm-panel-close-btn, body.psm-theme-dark #psm-accessibility-panel .psm-reset-button { color: #ffffff !important; } body.psm-adjust-spacing, body.psm-adjust-spacing p, body.psm-adjust-spacing li, body.psm-adjust-spacing h1, body.psm-adjust-spacing h2, body.psm-adjust-spacing h3, body.psm-adjust-spacing h4, body.psm-adjust-spacing h5, body.psm-adjust-spacing h6, body.psm-adjust-spacing td, body.psm-adjust-spacing th, body.psm-adjust-spacing span, body.psm-adjust-spacing a { line-height: 1.8 !important; letter-spacing: 0.1em !important; word-spacing: 0.16em !important; } body.psm-reduce-motion *, body.psm-reduce-motion *::before, body.psm-reduce-motion *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } body.psm-font-dyslexia, body.psm-font-dyslexia *:not(.material-icons):not(.material-symbols-outlined):not(.material-symbols-rounded):not([class^="fa-"]):not([class*=" fa-"]):not([class^="icon-"]):not([class*=" icon-"]) { font-family: "OpenDyslexic", "Lexie Readable", "Atkinson Hyperlegible", "Comic Sans MS", "Comic Neue", system-ui, sans-serif !important; } body.psm-links-underline a { text-decoration: underline !important; } body.psm-links-underline *:focus-visible { outline: 2px solid #005fcc !important; outline-offset: 2px !important; } #psm-reading-line { position: fixed; left: 0; width: 100%; height: 10px; background-color: rgba(0, 95, 204, 0.7); z-index: 10001; pointer-events: none; transform: translateY(-50%); } body.psm-big-cursor * { cursor: url('data:image/svg+xml;utf8,') 0 0, auto !important; } body.psm-hide-images img, body.psm-hide-images video, body.psm-hide-images picture, body.psm-hide-images [style*="background-image"] { visibility: hidden !important; } /* Grayscale: filter is applied to every direct child of except the * accessibility toolbar and the reading guide line. CSS `filter` inherits * to all descendants and cannot be cancelled by a child rule, so the * toolbar must live outside any filtered ancestor. front.js moves the * toolbar to be a direct child of on init for exactly this reason * (it would otherwise be deep inside