/**
* EVAS Accessibility Features Styles
*
* Styles for all 40+ accessibility features.
*
* @package Everyone_Accessibility_Suite
* @version 1.0.0
*/
/* ==========================================================================
CSS Variables
========================================================================== */
:root {
--evas-content-scale: 1;
--evas-font-size: 100%;
--evas-line-height: 1.5;
--evas-letter-spacing: 0px;
--evas-highlight-color: #ffeb3b;
--evas-highlight-title-bg: rgba(255, 235, 59, 0.3);
--evas-highlight-link-bg: rgba(33, 150, 243, 0.2);
--evas-cursor-size: 48px;
}
/* box-sizing safeguard for the plugin's other fixed-position UI elements that
live outside #evas-panel's own subtree (see panel.css for the panel's own
version of this rule and the reasoning behind it). */
#evas-text-magnifier,
#evas-reading-guide,
#evas-reading-mask-top,
#evas-reading-mask-bottom,
#evas-useful-links,
#evas-useful-links *,
#evas-keyboard-container,
#evas-keyboard-container *,
#evas-voice-indicator,
#evas-voice-transcript,
.evas-af-hint {
box-sizing: border-box !important;
}
/* Inheritance barrier for `color` on the same set of elements - Text Colors
sets `color` on , which every one of these would otherwise inherit
even though the generated selectors exclude them. See the equivalent rule
in panel.css for the full reasoning. */
#evas-useful-links,
#evas-keyboard-container,
#evas-voice-indicator,
#evas-voice-transcript,
.evas-af-hint {
color: var(--evas-text, #2c3e50);
}
/* ==========================================================================
Readable Font
========================================================================== */
.evas-readable-font,
.evas-readable-font * {
font-family: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif !important;
}
/* ==========================================================================
Dyslexia Font
========================================================================== */
.evas-dyslexia-font,
.evas-dyslexia-font * {
font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
}
/* Keep the panel's own UI font stable regardless of Readable Font / Dyslexia
Font (same isolation intent as the filter exclusions further down: these
features are meant to change how page content reads, not the control
panel used to switch them off). #evas-panel's ID specificity already beats
the two class-based rules above, both sides being !important. */
#evas-panel,
#evas-panel *,
.evas-toggle-wrapper,
.evas-toggle-wrapper *,
#evas-af-hint {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
/* ==========================================================================
Color Modes
========================================================================== */
/* Dark Contrast */
.evas-dark-contrast {
background-color: #000 !important;
color: #fff !important;
}
.evas-dark-contrast *:not(.evas-panel):not(.evas-panel *) {
background-color: #000 !important;
color: #fff !important;
border-color: #fff !important;
}
.evas-dark-contrast a:not(.evas-panel a) {
color: #ffff00 !important;
}
.evas-dark-contrast img:not(.evas-panel img) {
filter: invert(1) hue-rotate(180deg);
}
/* Light Contrast */
.evas-light-contrast {
background-color: #fff !important;
color: #000 !important;
}
.evas-light-contrast *:not(.evas-panel):not(.evas-panel *) {
background-color: #fff !important;
color: #000 !important;
border-color: #000 !important;
}
.evas-light-contrast a:not(.evas-panel a) {
color: #0000ff !important;
}
/* Monochrome, High/Low Saturation and High Contrast are all implemented with
`filter`. `filter` on an ancestor rasterizes its whole subtree as one unit -
a descendant setting `filter: none` on itself cannot undo a filter already
applied by a parent (same family of behavior as `opacity`). So the filter
can't be put on and then "cancelled" on #evas-panel; instead it's
applied individually to each direct child of except the panel/toggle
button/virtual keyboard, which are siblings and therefore never touched. */
body.evas-monochrome > *:not(.evas-toggle-wrapper):not(#evas-panel):not(#evas-keyboard-container):not(#evas-af-hint) {
filter: grayscale(100%) !important;
}
/* High Saturation */
body.evas-high-saturation > *:not(.evas-toggle-wrapper):not(#evas-panel):not(#evas-keyboard-container):not(#evas-af-hint) {
filter: saturate(200%) !important;
}
/* Low Saturation */
body.evas-low-saturation > *:not(.evas-toggle-wrapper):not(#evas-panel):not(#evas-keyboard-container):not(#evas-af-hint) {
filter: saturate(50%) !important;
}
/* High Contrast */
body.evas-high-contrast > *:not(.evas-toggle-wrapper):not(#evas-panel):not(#evas-keyboard-container):not(#evas-af-hint) {
filter: contrast(150%) !important;
}
/* ==========================================================================
Visual Adjustments
========================================================================== */
/* Highlight Titles */
.evas-highlighted-title {
background-color: var(--evas-highlight-title-bg) !important;
padding: 0.25em 0.5em !important;
border-left: 4px solid var(--evas-highlight-color) !important;
}
/* Highlight Links */
.evas-highlighted-link {
background-color: var(--evas-highlight-link-bg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
padding: 0.1em 0.2em !important;
}
/* Highlight Hover */
.evas-highlight-hover *:hover:not(.evas-panel):not(.evas-panel *):not(.evas-toggle-wrapper):not(.evas-toggle-wrapper *):not(#evas-af-hint) {
outline: 3px solid #2196f3 !important;
outline-offset: 2px !important;
}
/* Highlight Focus */
.evas-highlight-focus *:focus:not(.evas-panel):not(.evas-panel *):not(.evas-toggle-wrapper):not(.evas-toggle-wrapper *):not(#evas-af-hint) {
outline: 3px solid #ff5722 !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 6px rgba(255, 87, 34, 0.3) !important;
}
/* Text Alignment */
.evas-align-left *:not(.evas-panel):not(.evas-panel *):not(#evas-af-hint) {
text-align: left !important;
}
.evas-align-center *:not(.evas-panel):not(.evas-panel *):not(#evas-af-hint) {
text-align: center !important;
}
.evas-align-right *:not(.evas-panel):not(.evas-panel *):not(#evas-af-hint) {
text-align: right !important;
}
/* ==========================================================================
Media Control
========================================================================== */
/* Hide Images */
.evas-hidden-image {
opacity: 0.1 !important;
filter: blur(5px) !important;
}
/* Hide Emoji */
.evas-hide-emoji img.emoji,
.evas-hide-emoji img.wp-smiley,
.evas-hide-emoji .emoji {
display: none !important;
}
/* Stop Animations */
.evas-stop-animations *,
.evas-stop-animations *::before,
.evas-stop-animations *::after {
animation-duration: 0s !important;
animation-delay: 0s !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
/* ==========================================================================
Helpful Tools
========================================================================== */
/* Text Magnifier */
#evas-text-magnifier {
position: fixed;
background: rgba(0, 0, 0, 0.9);
color: #fff;
padding: 15px 20px;
border-radius: 8px;
font-size: 24px;
line-height: 1.4;
max-width: 400px;
pointer-events: none;
/* Below #evas-panel (999998, panel.css) so the panel stays on top of this
overlay when both happen to be visible at once - see panel.css for the
full z-index scale. */
z-index: 999997;
display: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border: 2px solid #fff;
}
/* Reading Guide */
#evas-reading-guide {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, transparent, #ff5722, transparent);
pointer-events: none;
z-index: 999996;
box-shadow: 0 0 10px rgba(255, 87, 34, 0.5);
/* Positioned via `transform: translateY()` (features.js) rather than
`top` so the browser can move it on the compositor thread instead of
re-running layout/paint on every mousemove frame. */
will-change: transform;
}
/* Reading Mask */
#evas-reading-mask-top,
#evas-reading-mask-bottom {
position: fixed;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
pointer-events: none;
z-index: 999995;
}
#evas-reading-mask-top {
top: 0;
}
#evas-reading-mask-bottom {
bottom: 0;
}
/* Cognitive Reading */
.evas-cognitive-bold {
font-weight: 700 !important;
color: inherit;
}
/* Useful Links Panel - unlike the other helper overlays (reading guide/mask,
text magnifier), this is an interactive flyout the user opens FROM inside
the accessibility panel and needs to read/click right away, so it must
stay visible above the panel rather than tucked behind it - same tier as
.evas-toggle-wrapper (see panel.css z-index scale). */
#evas-useful-links {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
z-index: 999999;
width: 300px;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
#evas-useful-links .evas-useful-links-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #2271b1;
color: #fff;
}
#evas-useful-links .evas-useful-links-header h3 {
margin: 0;
font-size: 16px;
}
#evas-useful-links .evas-close-useful-links {
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
padding: 0;
line-height: 1;
}
#evas-useful-links .evas-useful-links-list {
list-style: none;
margin: 0;
padding: 10px;
overflow-y: auto;
flex: 1;
}
#evas-useful-links .evas-useful-links-list li {
margin: 0;
padding: 0;
}
#evas-useful-links .evas-useful-links-list a {
display: block;
padding: 10px 15px;
color: #1e1e1e;
text-decoration: none;
border-radius: 6px;
transition: background 0.2s;
}
#evas-useful-links .evas-useful-links-list a:hover {
background: #f0f0f1;
}
/* ==========================================================================
Big Cursors
========================================================================== */
.evas-big-black-cursor,
.evas-big-black-cursor * {
cursor: url('data:image/svg+xml,') 0 0, auto !important;
}
.evas-big-black-cursor a,
.evas-big-black-cursor button,
.evas-big-black-cursor [role="button"],
.evas-big-black-cursor input[type="submit"],
.evas-big-black-cursor input[type="button"] {
cursor: url('data:image/svg+xml,') 12 12, pointer !important;
}
.evas-big-white-cursor,
.evas-big-white-cursor * {
cursor: url('data:image/svg+xml,') 0 0, auto !important;
}
.evas-big-white-cursor a,
.evas-big-white-cursor button,
.evas-big-white-cursor [role="button"],
.evas-big-white-cursor input[type="submit"],
.evas-big-white-cursor input[type="button"] {
cursor: url('data:image/svg+xml,') 12 12, pointer !important;
}
/* ==========================================================================
Keyboard Navigation
========================================================================== */
.evas-keyboard-navigation *:focus {
outline: 3px solid #2271b1 !important;
outline-offset: 2px !important;
}
.evas-keyboard-navigation a:focus,
.evas-keyboard-navigation button:focus,
.evas-keyboard-navigation input:focus,
.evas-keyboard-navigation select:focus,
.evas-keyboard-navigation textarea:focus {
box-shadow: 0 0 0 4px rgba(34, 113, 177, 0.3) !important;
}
/* ==========================================================================
Controls Panel Styles
========================================================================== */
.evas-af-controls-wrapper {
padding: 10px 0;
}
.evas-section {
margin-bottom: 20px;
}
/* Panel chrome follows the active colour scheme - see --evas-surface* in
panel.css. These used to be fixed light greys, which left white blocks
sitting inside a dark panel. */
.evas-section-title {
font-size: 14px;
font-weight: 600;
color: var(--evas-text, #1e1e1e);
margin: 0 0 12px 0;
padding: 8px 12px;
background: var(--evas-surface, #f6f7f7);
border-radius: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.evas-controls-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.evas-profiles-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Action Box (Toggle) */
.evas-action-box {
background: #fff;
border: 1px solid #dcdcde;
border-radius: 8px;
padding: 12px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-height: 80px;
justify-content: center;
}
.evas-action-box:hover {
border-color: #2271b1;
background: #f0f6fc;
}
.evas-action-box:focus {
outline: 2px solid #2271b1;
outline-offset: 2px;
}
.evas-action-box.evas-active {
background: #2271b1;
border-color: #2271b1;
color: #fff;
}
.evas-action-box-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.evas-action-box .evas-icon {
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.8;
}
.evas-action-box.evas-active .evas-icon {
filter: brightness(0) invert(1);
}
.evas-action-box .evas-title {
font-size: 12px;
font-weight: 500;
line-height: 1.3;
text-align: center;
padding-bottom: 10px;
}
/* Spinner Box */
.evas-spinner-box {
flex-direction: row;
justify-content: space-between;
min-height: 50px;
padding: 8px 12px;
}
.evas-spinner-box .evas-action-box-content {
flex-direction: row;
gap: 8px;
}
.evas-input-spinner-box {
display: flex;
align-items: center;
/* This box sits inside a 3-column .evas-actions-grid (~110-130px per
column), so its own width must fit that, not the other way round -
see the compact button/value sizing below. */
width: 100%;
justify-content: center;
}
.evas-input-spinner-box .evas-control {
display: flex;
align-items: center;
gap: 2px;
background: var(--evas-surface-strong, #f0f0f1);
border-radius: 20px;
padding: 2px;
max-width: 100%;
}
.evas-input-spinner-box button {
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
border-radius: 50%;
border: none;
background: var(--evas-surface-raised, #fff);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
color: var(--evas-text, #1e1e1e);
flex-shrink: 0;
padding: 0;
transition: background 0.2s, transform 0.2s;
}
.evas-input-spinner-box button:hover {
background: var(--evas-color, #2271b1);
/* Paired with --evas-color, which every preset guarantees is dark enough
for white text (checked against WCAG AA when the presets are defined). */
color: #fff;
transform: scale(1.1);
}
.evas-input-spinner-box button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--evas-color-transparent, rgba(34, 113, 177, 0.4));
}
.evas-input-spinner-box .evas-value {
min-width: 42px;
max-width: 64px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-size: 11px;
font-weight: 500;
padding: 0 2px;
}
/* Profile Box styling lived here once, from an earlier icon-circle design
(.evas-profile-icon, a solid-fill active state, etc.) that panel.css's
current profile-box/accordion implementation has fully superseded -
.evas-profile-icon is never rendered anywhere in the current markup, so
that whole design is dead. It's removed rather than left in place because
it wasn't actually harmless: both files are enqueued together, and this
file's `.evas-profile-box:hover`/`:focus` rules (pseudo-classes add
specificity) were quietly beating panel.css's real, current border/
background rules on hover/focus, showing the old design's colors through
the new one. */
/* Reset Button */
.evas-reset-section {
padding-top: 10px;
border-top: 1px solid #dcdcde;
margin-top: 10px;
}
.evas-reset-button {
width: 100%;
padding: 12px;
background: #fff;
border: 1px solid #dc3232;
color: #dc3232;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.evas-reset-button:hover {
background: #dc3232;
color: #fff;
}
/* ==========================================================================
Prevent Horizontal Scroll
========================================================================== */
/* Fix WooCommerce drawer causing horizontal scroll */
.wc-block-components-drawer__screen-overlay--is-hidden,
.wc-block-components-drawer__screen-overlay--is-hidden * {
display: none !important;
}
/* Prevent horizontal overflow */
html,
body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 400px) {
.evas-controls-grid {
grid-template-columns: 1fr;
}
}