/** * SOLΞ Accessibility Standard — portable CSS * Light chrome by default (Hub parity). Page scale via body zoom; chrome under . */ @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/opendyslexic-latin-400.woff2') format('woff2'); } @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/opendyslexic-latin-700.woff2') format('woff2'); } :root { --solx-a11y-surface: #ffffff; --solx-a11y-surface-2: #f1f5f9; --solx-a11y-white: #0f172a; --solx-a11y-muted: #64748b; --solx-a11y-line: rgba(15, 23, 42, 0.14); --solx-a11y-amber: #d97706; --solx-font-scale: 1; --solx-font-family: Figtree, system-ui, sans-serif; } /* Chrome must stay optically constant when body { zoom } is applied */ .solx-a11y-root, .solx-a11y-panel { font-size: 16px !important; line-height: 1.4; -webkit-text-size-adjust: 100%; } .solx-a11y-root { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 99999; display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; font-family: Figtree, system-ui, sans-serif; color: var(--solex-white, var(--solx-a11y-white)); } .solx-a11y-fab { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--solex-amber, var(--solx-a11y-amber)); background: var(--solex-surface, var(--solx-a11y-surface)); color: var(--solex-amber, var(--solx-a11y-amber)); font-size: 14px !important; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12); overflow: hidden; line-height: 1; padding: 0; } .solx-a11y-fab:focus-visible { outline: 3px solid var(--solex-amber, var(--solx-a11y-amber)); outline-offset: 3px; } .solx-a11y-quick { display: flex; flex-direction: column; gap: 0.35rem; opacity: 0; pointer-events: none; transform: translateX(8px); transition: opacity 0.15s ease, transform 0.15s ease; } .solx-a11y-quick.is-open, .solx-a11y-root:hover .solx-a11y-quick, .solx-a11y-root:focus-within .solx-a11y-quick { opacity: 1; pointer-events: auto; transform: none; } .solx-a11y-quick__btn { min-width: 44px; height: 36px; border-radius: 10px; border: 1px solid var(--solex-line, var(--solx-a11y-line)); background: var(--solex-surface, var(--solx-a11y-surface)); color: var(--solex-white, var(--solx-a11y-white)); font-weight: 700; font-size: 13px !important; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } .solx-a11y-quick__btn:focus-visible { outline: 3px solid var(--solex-amber, var(--solx-a11y-amber)); outline-offset: 2px; } .solx-a11y-panel { position: fixed; right: 80px; top: 50%; transform: translateY(-50%); z-index: 99999; width: min(320px, calc(100vw - 100px)); max-width: calc(100vw - 32px); max-height: min(70vh, 520px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--solex-surface, var(--solx-a11y-surface)); color: var(--solex-white, var(--solx-a11y-white)); border: 1px solid var(--solex-line, var(--solx-a11y-line)); border-radius: 14px; padding: 1rem; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14); box-sizing: border-box; } .solx-a11y-panel *, .solx-a11y-panel *::before, .solx-a11y-panel *::after { box-sizing: border-box; } .solx-a11y-panel h2 { margin: 0 0 0.75rem; font-size: 18px !important; color: inherit; } .solx-a11y-panel fieldset { border: 1px solid var(--solex-line, var(--solx-a11y-line)); border-radius: 12px; margin: 0 0 0.75rem; padding: 0.7rem; background: var(--solex-surface-2, var(--solx-a11y-surface-2)); min-width: 0; display: block; float: none; width: 100%; max-width: 100%; } /* Section titles live inside the rounded fieldset (no — themes push those out) */ .solx-a11y-panel .solx-a11y-section-title { display: block !important; float: none !important; position: static !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 0 0.55rem !important; padding: 0.4rem 0.65rem !important; border-radius: 8px !important; border: 1px solid var(--solex-line, var(--solx-a11y-line)) !important; background: var(--solex-surface, var(--solx-a11y-surface)) !important; color: var(--solex-white, var(--solx-a11y-white)) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.01em; opacity: 1 !important; transform: none !important; clip: auto !important; clip-path: none !important; height: auto !important; overflow: visible !important; } .solx-a11y-panel label { display: flex; align-items: center; gap: 0.45rem; font-size: 14px !important; margin: 0.25rem 0; cursor: pointer; color: inherit; max-width: 100%; } .solx-a11y-panel label small { display: block; margin-top: 0.1rem; color: var(--solex-muted, var(--solx-a11y-muted)); font-size: 11px !important; font-weight: 400; } .solx-a11y-preset { align-items: flex-start !important; } .solx-a11y-choice { align-items: flex-start !important; } .solx-a11y-preset span { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .solx-a11y-preset small { color: var(--solex-muted, var(--solx-a11y-muted)); font-size: 11px !important; font-weight: 400; } .solx-a11y-advanced { margin: 0.5rem 0 0.75rem; } .solx-a11y-advanced summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; color: inherit; font-size: 14px !important; } .solx-a11y-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; border: 1px solid var(--solex-line, var(--solx-a11y-line)); background: var(--solex-surface, var(--solx-a11y-surface)); color: inherit; border-radius: 10px; padding: 0.4rem 0.7rem; font-size: 13px !important; font-family: inherit; cursor: pointer; flex: 0 0 auto; } .solx-a11y-btn:hover { border-color: var(--solex-amber, var(--solx-a11y-amber)); } .solx-a11y-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 100%; overflow: hidden; position: relative; } /* Never paint native file-picker chrome / “No file selected” */ .solx-a11y-file, input.solx-a11y-file[type='file'] { display: none !important; position: absolute !important; width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } /* —— Page font force (themes / Elementor / Doctor often use !important) —— */ html[data-solx-font] body, html[data-solx-font] body p, html[data-solx-font] body li, html[data-solx-font] body h1, html[data-solx-font] body h2, html[data-solx-font] body h3, html[data-solx-font] body h4, html[data-solx-font] body h5, html[data-solx-font] body h6, html[data-solx-font] body a, html[data-solx-font] body button, html[data-solx-font] body input, html[data-solx-font] body textarea, html[data-solx-font] body select, html[data-solx-font] .entry-content, html[data-solx-font] .entry-content p, html[data-solx-font] .wp-block-post-content, html[data-solx-font] .site-main, html[data-solx-font] .site-content, html[data-solx-font] main, html[data-solx-font] article, html[data-solx-font] .elementor-widget-text-editor, html[data-solx-font] .elementor-text-editor, html[data-solx-font] .elementor-widget-container, html[data-solx-font] .elementor-heading-title, html[data-solx-font] .wpb_text_column, html[data-solx-font] .wpb_wrapper { font-family: var(--solx-font-family) !important; } html[data-solx-font='opendyslexic'] body, html[data-solx-font='opendyslexic'] body p, html[data-solx-font='opendyslexic'] body li, html[data-solx-font='opendyslexic'] body h1, html[data-solx-font='opendyslexic'] body h2, html[data-solx-font='opendyslexic'] body h3, html[data-solx-font='opendyslexic'] .elementor-heading-title, html[data-solx-font='opendyslexic'] .elementor-widget-text-editor { font-family: OpenDyslexic, 'Comic Sans MS', sans-serif !important; letter-spacing: 0.03em; word-spacing: 0.08em; } /* Firefox rem fallback when zoom unsupported */ html[data-solx-font-scaled='true'] .entry-content, html[data-solx-font-scaled='true'] .entry-content p, html[data-solx-font-scaled='true'] .entry-content li, html[data-solx-font-scaled='true'] .wp-block-post-content, html[data-solx-font-scaled='true'] .wp-block-post-content p, html[data-solx-font-scaled='true'] .wp-block-post-content li, html[data-solx-font-scaled='true'] .site-main, html[data-solx-font-scaled='true'] .site-main p, html[data-solx-font-scaled='true'] .site-content, html[data-solx-font-scaled='true'] .site-content p, html[data-solx-font-scaled='true'] main p, html[data-solx-font-scaled='true'] article p, html[data-solx-font-scaled='true'] .elementor-widget-text-editor, html[data-solx-font-scaled='true'] .elementor-text-editor, html[data-solx-font-scaled='true'] .elementor-widget-container p, html[data-solx-font-scaled='true'] .elementor-heading-title { font-size: 1rem !important; } html[data-solx-theme='dark'] { --solx-a11y-surface: #0f172a; --solx-a11y-surface-2: #1e293b; --solx-a11y-white: #f8fafc; --solx-a11y-muted: #94a3b8; --solx-a11y-line: rgba(148, 163, 184, 0.35); --solx-a11y-amber: #fbbf24; color-scheme: dark; } /* * Site-wide Dark: invert body only (NOT html). * Filter on breaks position:fixed for the A11y FAB (jumps to page bottom). * A11y mount lives under as sibling of , so it stays viewport-fixed. */ html[data-solx-theme='dark']:not([data-solx-contrast='true']) body { filter: invert(1) hue-rotate(180deg); background: #0b1220 !important; } html[data-solx-theme='dark']:not([data-solx-contrast='true']) body img, html[data-solx-theme='dark']:not([data-solx-contrast='true']) body video, html[data-solx-theme='dark']:not([data-solx-contrast='true']) body picture, html[data-solx-theme='dark']:not([data-solx-contrast='true']) body iframe, html[data-solx-theme='dark']:not([data-solx-contrast='true']) body svg image { filter: invert(1) hue-rotate(180deg); } html[data-solx-contrast='true'] { --solex-surface: #000; --solex-surface-2: #111; --solex-white: #fff; --solex-muted: #ddd; --solex-line: #fff; --solex-amber: #ffe066; --solx-a11y-surface: #000; --solx-a11y-surface-2: #111; --solx-a11y-white: #fff; --solx-a11y-muted: #ddd; --solx-a11y-line: #fff; --solx-a11y-amber: #ffe066; background: #000 !important; color: #fff !important; color-scheme: dark; filter: none !important; } html[data-solx-contrast='true'] body { background: #000 !important; color: #fff !important; filter: none !important; } /* High Contrast: force readable black/white on common WP/builder surfaces */ html[data-solx-contrast='true'] body, html[data-solx-contrast='true'] body .site, html[data-solx-contrast='true'] body .site-content, html[data-solx-contrast='true'] body .site-main, html[data-solx-contrast='true'] body main, html[data-solx-contrast='true'] body article, html[data-solx-contrast='true'] body .entry-content, html[data-solx-contrast='true'] body .wp-site-blocks, html[data-solx-contrast='true'] body .elementor, html[data-solx-contrast='true'] body .elementor-section, html[data-solx-contrast='true'] body .elementor-container, html[data-solx-contrast='true'] body .elementor-column, html[data-solx-contrast='true'] body .elementor-widget-wrap, html[data-solx-contrast='true'] body .elementor-element, html[data-solx-contrast='true'] body .wpb_row, html[data-solx-contrast='true'] body .wpb_column, html[data-solx-contrast='true'] body .vc_row, html[data-solx-contrast='true'] body .vc_column_container { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; } html[data-solx-contrast='true'] body p, html[data-solx-contrast='true'] body li, html[data-solx-contrast='true'] body h1, html[data-solx-contrast='true'] body h2, html[data-solx-contrast='true'] body h3, html[data-solx-contrast='true'] body h4, html[data-solx-contrast='true'] body h5, html[data-solx-contrast='true'] body h6, html[data-solx-contrast='true'] body span, html[data-solx-contrast='true'] body .elementor-heading-title, html[data-solx-contrast='true'] body .elementor-widget-text-editor { color: #fff !important; background-color: transparent !important; } html[data-solx-contrast='true'] body a { color: #ffe066 !important; text-decoration: underline !important; } html[data-solx-contrast='true'] body button, html[data-solx-contrast='true'] body .button, html[data-solx-contrast='true'] body input, html[data-solx-contrast='true'] body select, html[data-solx-contrast='true'] body textarea { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } /* Keep A11y chrome readable under contrast without inheriting page noise */ html[data-solx-contrast='true'] #solx-accessibility-root, html[data-solx-contrast='true'] [data-solx-a11y-root], html[data-solx-contrast='true'] .solx-a11y-panel, html[data-solx-contrast='true'] .solx-a11y-root { filter: none !important; color: #fff !important; } html[data-solx-motion='reduce'] *, html[data-solx-motion='reduce'] *::before, html[data-solx-motion='reduce'] *::after { animation: none !important; transition: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Reading Mode: denser reading comfort (spacing + measure) */ html[data-solx-reading='true'] body { letter-spacing: 0.03em; word-spacing: 0.06em; line-height: 1.75 !important; } html[data-solx-reading='true'] body p, html[data-solx-reading='true'] body li, html[data-solx-reading='true'] .entry-content, html[data-solx-reading='true'] .wp-block-post-content, html[data-solx-reading='true'] .elementor-widget-text-editor { max-width: 42rem; line-height: 1.75 !important; } html[data-solx-reading='true'] .sx-main__context { display: none; } /* Focus Mode: stronger keyboard focus (independent of Reading) */ html[data-solx-focus='strong'] :focus, html[data-solx-focus='strong'] :focus-visible { outline: 3px solid var(--solex-amber, var(--solx-a11y-amber)) !important; outline-offset: 3px !important; } html[data-solx-focus='strong'] a:focus, html[data-solx-focus='strong'] button:focus, html[data-solx-focus='strong'] input:focus, html[data-solx-focus='strong'] select:focus, html[data-solx-focus='strong'] textarea:focus, html[data-solx-focus='strong'] summary:focus { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35) !important; } .solx-a11y-skip, .swnv-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 0.75rem 1rem; background: #000; color: #fff; } .solx-a11y-skip:focus, .swnv-skip-link:focus { left: 1rem; top: 1rem; } @media (max-width: 720px) { .solx-a11y-root { top: auto; bottom: 20px; transform: none; } .solx-a11y-quick { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; max-width: 200px; } .solx-a11y-panel { right: 16px; bottom: 88px; top: auto; transform: none; width: calc(100vw - 32px); } }