/** * Unified Accessibility Widget Styles * * ADA/WCAG 2.1 Level AA compliant accessibility widget. * Shared across TOS, VB, and ORB sites. * * CSS Naming: .a11y-* (Accessibility) * Feature Classes: .a11y-feature-* (applied to element) * * Theming: override --a11y-primary via wp_add_inline_style */ /* ======================================== CSS CUSTOM PROPERTIES (Design Tokens) ======================================== */ :root { /* Primary color - override per site via wp_add_inline_style */ --a11y-primary: #2563eb; --a11y-primary-dark: #1d4ed8; --a11y-primary-light: rgba(37, 99, 235, 0.08); /* Neutral palette */ --a11y-text-primary: #374151; --a11y-text-secondary: #6b7280; --a11y-text-muted: #9ca3af; --a11y-bg-panel: #ffffff; --a11y-bg-hover: #f9fafb; --a11y-bg-control: #f3f4f6; --a11y-border: #e5e7eb; --a11y-border-light: #f3f4f6; --a11y-toggle-off: #d1d5db; --a11y-success: #10b981; --a11y-success-bg: #d1fae5; /* Shadows */ --a11y-shadow-button: 0 4px 12px rgba(0, 0, 0, 0.25); --a11y-shadow-button-hover: 0 6px 16px rgba(0, 0, 0, 0.3); --a11y-shadow-panel: 0 10px 40px rgba(0, 0, 0, 0.15); /* Spacing */ --a11y-space-xs: 4px; --a11y-space-sm: 8px; --a11y-space-md: 16px; --a11y-space-lg: 24px; --a11y-space-xl: 32px; /* Border Radius */ --a11y-radius-sm: 8px; --a11y-radius-md: 12px; --a11y-radius-full: 50%; /* Transitions */ --a11y-transition-fast: 150ms ease; --a11y-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* ======================================== WIDGET CONTAINER ======================================== */ .a11y-widget { position: fixed; bottom: 24px; right: 24px; z-index: 99999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ======================================== TOGGLE BUTTON ======================================== */ .a11y-toggle { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; margin: 0; background: var(--a11y-primary); border: none; border-radius: var(--a11y-radius-full); box-shadow: var(--a11y-shadow-button); color: #ffffff; cursor: pointer; transition: transform var(--a11y-transition-fast), box-shadow var(--a11y-transition-fast), background-color var(--a11y-transition-fast); } .a11y-toggle:hover { transform: scale(1.05); box-shadow: var(--a11y-shadow-button-hover); } .a11y-toggle:focus { outline: 3px solid #ffffff; outline-offset: 2px; } .a11y-toggle:focus:not(:focus-visible) { outline: none; } .a11y-toggle:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; } .a11y-toggle[aria-expanded="true"] { background: var(--a11y-primary-dark); } .a11y-toggle[aria-expanded="true"] .a11y-toggle__icon { transform: rotate(45deg); } .a11y-toggle__icon { width: 24px; height: 24px; transition: transform var(--a11y-transition-normal); } /* First visit pulse animation */ @keyframes a11y-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .a11y-toggle--pulse { animation: a11y-pulse 0.6s ease-in-out; } /* ======================================== PANEL ======================================== */ .a11y-panel { position: absolute; bottom: calc(100% + 12px); right: 0; width: 320px; max-height: 80vh; background: var(--a11y-bg-panel); border-radius: var(--a11y-radius-md); box-shadow: var(--a11y-shadow-panel); border: 1px solid var(--a11y-border); overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translateY(10px); transition: opacity var(--a11y-transition-normal), transform var(--a11y-transition-normal); } .a11y-panel[hidden] { display: none; } .a11y-panel.a11y-panel--open { opacity: 1; transform: translateY(0); } /* ======================================== PANEL HEADER ======================================== */ .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--a11y-space-md); border-bottom: 1px solid var(--a11y-border-light); flex-shrink: 0; } .a11y-panel__title-group { display: flex; align-items: center; gap: var(--a11y-space-sm); } .a11y-panel__icon { width: 20px; height: 20px; color: var(--a11y-primary); } .a11y-panel__title { font-size: 16px; font-weight: 600; color: var(--a11y-text-primary); margin: 0; line-height: 1.4; } .a11y-panel__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0; background: transparent; border: none; border-radius: var(--a11y-radius-sm); color: var(--a11y-text-secondary); cursor: pointer; transition: background-color var(--a11y-transition-fast), color var(--a11y-transition-fast); } .a11y-panel__close:hover { background: var(--a11y-bg-hover); color: var(--a11y-text-primary); } .a11y-panel__close:focus { outline: 2px solid var(--a11y-primary); outline-offset: 2px; } .a11y-panel__close:focus:not(:focus-visible) { outline: none; } .a11y-panel__close:focus-visible { outline: 2px solid var(--a11y-primary); outline-offset: 2px; } /* ======================================== PANEL CONTENT ======================================== */ .a11y-panel__content { flex: 1; overflow-y: auto; padding: 0 var(--a11y-space-md); scrollbar-width: thin; scrollbar-color: var(--a11y-toggle-off) transparent; } .a11y-panel__content::-webkit-scrollbar { width: 6px; } .a11y-panel__content::-webkit-scrollbar-track { background: transparent; } .a11y-panel__content::-webkit-scrollbar-thumb { background: var(--a11y-toggle-off); border-radius: 3px; } /* ======================================== SECTIONS ======================================== */ .a11y-section { padding: var(--a11y-space-sm) 0; } .a11y-section:first-child { padding-top: var(--a11y-space-md); } .a11y-section__header { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--a11y-text-muted); margin: 0 0 var(--a11y-space-sm) 0; padding: 0; line-height: 1.4; } /* ======================================== CONTROL ITEMS ======================================== */ .a11y-control { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: var(--a11y-space-sm) var(--a11y-space-sm); margin: 0 calc(var(--a11y-space-sm) * -1); background: transparent; border-radius: var(--a11y-radius-sm); transition: background-color var(--a11y-transition-fast); } .a11y-control:hover { background: var(--a11y-bg-hover); } .a11y-control.a11y-control--active { background: var(--a11y-primary-light); } .a11y-control__info { display: flex; align-items: center; gap: var(--a11y-space-md); } .a11y-control__icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 14px; font-weight: 600; color: var(--a11y-text-secondary); flex-shrink: 0; transition: color var(--a11y-transition-fast); } .a11y-control--active .a11y-control__icon { color: var(--a11y-primary); } .a11y-control__label { font-size: 14px; font-weight: 500; color: var(--a11y-text-primary); line-height: 1.4; } /* ======================================== TOGGLE SWITCH ======================================== */ .a11y-toggle-switch { position: relative; display: flex; align-items: center; width: 48px; height: 24px; padding: 0; margin: 0; background: transparent; border: none; cursor: pointer; } .a11y-toggle-switch:focus { outline: none; } .a11y-toggle-switch:focus-visible .a11y-toggle-switch__track { outline: 2px solid var(--a11y-primary); outline-offset: 2px; } .a11y-toggle-switch__track { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--a11y-toggle-off); border-radius: 12px; transition: background-color var(--a11y-transition-normal); } .a11y-toggle-switch[aria-checked="true"] .a11y-toggle-switch__track { background: var(--a11y-primary); } .a11y-toggle-switch__thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #ffffff; border-radius: var(--a11y-radius-full); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); transition: transform var(--a11y-transition-normal); } .a11y-toggle-switch[aria-checked="true"] .a11y-toggle-switch__thumb { transform: translateX(24px); } /* ======================================== FONT SIZE STEPPER ======================================== */ .a11y-stepper { display: flex; align-items: center; gap: var(--a11y-space-xs); } .a11y-stepper__btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0; background: var(--a11y-bg-control); border: none; border-radius: var(--a11y-radius-full); font-size: 18px; font-weight: 500; color: var(--a11y-text-primary); cursor: pointer; transition: background-color var(--a11y-transition-fast); } .a11y-stepper__btn:hover:not(:disabled) { background: var(--a11y-border); } .a11y-stepper__btn:focus { outline: 2px solid var(--a11y-primary); outline-offset: 2px; } .a11y-stepper__btn:focus:not(:focus-visible) { outline: none; } .a11y-stepper__btn:focus-visible { outline: 2px solid var(--a11y-primary); outline-offset: 2px; } .a11y-stepper__btn:disabled { opacity: 0.5; cursor: not-allowed; } .a11y-stepper__value { min-width: 48px; font-size: 14px; font-weight: 500; color: var(--a11y-text-primary); text-align: center; } /* ======================================== PANEL FOOTER ======================================== */ .a11y-panel__footer { padding: var(--a11y-space-md); border-top: 1px solid var(--a11y-border-light); flex-shrink: 0; } /* ======================================== RESET BUTTON ======================================== */ .a11y-reset-btn { display: flex; align-items: center; justify-content: center; gap: var(--a11y-space-sm); width: 100%; height: 44px; padding: 0 var(--a11y-space-md); margin: 0; background: transparent; border: 1px solid var(--a11y-border); border-radius: var(--a11y-radius-sm); font-size: 14px; font-weight: 500; color: var(--a11y-text-secondary); cursor: pointer; transition: all var(--a11y-transition-fast); } .a11y-reset-btn:hover { background: var(--a11y-bg-hover); border-color: var(--a11y-toggle-off); } .a11y-reset-btn:focus { outline: 2px solid var(--a11y-primary); outline-offset: 2px; } .a11y-reset-btn:focus:not(:focus-visible) { outline: none; } .a11y-reset-btn:focus-visible { outline: 2px solid var(--a11y-primary); outline-offset: 2px; } .a11y-reset-btn--success { background: var(--a11y-success-bg); border-color: var(--a11y-success); color: var(--a11y-success); } .a11y-reset-btn__icon { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--a11y-transition-normal); } .a11y-reset-btn--success .a11y-reset-btn__icon { transform: rotate(-360deg); } /* ======================================== READING GUIDE LINE ======================================== */ .a11y-reading-line { position: fixed; left: 0; width: 100%; height: 2px; background: var(--a11y-primary); box-shadow: 0 0 8px rgba(37, 99, 235, 0.5); pointer-events: none; z-index: 99998; opacity: 0; transition: opacity var(--a11y-transition-fast); } .a11y-reading-line--active { opacity: 1; } /* ======================================== ACCESSIBILITY FEATURE CLASSES Applied to element for global effect ======================================== */ /* Font Size - 125% */ html.a11y-feature-font-125 { zoom: 1.25; } /* Font Size - 150% */ html.a11y-feature-font-150 { zoom: 1.5; } /* Prevent widget from being zoomed */ html.a11y-feature-font-125 .a11y-widget, html.a11y-feature-font-150 .a11y-widget { zoom: 1; } /* Letter Spacing */ html.a11y-feature-letter-spacing, html.a11y-feature-letter-spacing * { letter-spacing: 0.12em !important; } /* Line Height */ html.a11y-feature-line-height, html.a11y-feature-line-height * { line-height: 2 !important; } /* Dyslexia Font */ html.a11y-feature-dyslexia, html.a11y-feature-dyslexia * { font-family: "OpenDyslexic", "Comic Sans MS", Arial, sans-serif !important; } /* Filter overlay for contrast/invert/grayscale modes */ .a11y-filter-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99998; pointer-events: none; } html.a11y-feature-high-contrast .a11y-filter-overlay { display: block; backdrop-filter: contrast(1.4); -webkit-backdrop-filter: contrast(1.4); } html.a11y-feature-invert .a11y-filter-overlay { display: block; backdrop-filter: invert(1) hue-rotate(180deg); -webkit-backdrop-filter: invert(1) hue-rotate(180deg); } html.a11y-feature-grayscale .a11y-filter-overlay { display: block; backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); } html.a11y-feature-high-contrast.a11y-feature-invert .a11y-filter-overlay { display: block; backdrop-filter: contrast(1.4) invert(1) hue-rotate(180deg); -webkit-backdrop-filter: contrast(1.4) invert(1) hue-rotate(180deg); } html.a11y-feature-high-contrast.a11y-feature-grayscale .a11y-filter-overlay { display: block; backdrop-filter: contrast(1.4) grayscale(1); -webkit-backdrop-filter: contrast(1.4) grayscale(1); } html.a11y-feature-invert.a11y-feature-grayscale .a11y-filter-overlay { display: block; backdrop-filter: invert(1) hue-rotate(180deg) grayscale(1); -webkit-backdrop-filter: invert(1) hue-rotate(180deg) grayscale(1); } html.a11y-feature-high-contrast.a11y-feature-invert.a11y-feature-grayscale .a11y-filter-overlay { display: block; backdrop-filter: contrast(1.4) invert(1) hue-rotate(180deg) grayscale(1); -webkit-backdrop-filter: contrast(1.4) invert(1) hue-rotate(180deg) grayscale(1); } /* Counter-invert media in inverted mode */ html.a11y-feature-invert img, html.a11y-feature-invert video, html.a11y-feature-invert iframe { filter: invert(1) hue-rotate(180deg); } /* Highlight Links */ html.a11y-feature-highlight-links a { background-color: #ffff00 !important; color: #000000 !important; text-decoration: underline !important; padding: 2px 4px !important; } /* Exclude widget links from highlight */ html.a11y-feature-highlight-links .a11y-widget a { background-color: transparent !important; color: inherit !important; text-decoration: none !important; padding: 0 !important; } /* Large Cursor */ html.a11y-feature-large-cursor, html.a11y-feature-large-cursor * { cursor: url('data:image/svg+xml,') 8 8, auto !important; } /* Focus Highlight */ html.a11y-feature-focus-highlight *:focus { outline: 3px solid var(--a11y-primary, #2563eb) !important; outline-offset: 2px !important; } /* Hide Images */ html.a11y-feature-hide-images img { opacity: 0 !important; } /* Preserve widget images */ html.a11y-feature-hide-images .a11y-widget img { opacity: 1 !important; } /* Stop Animations */ html.a11y-feature-stop-animations, html.a11y-feature-stop-animations *, html.a11y-feature-stop-animations *::before, html.a11y-feature-stop-animations *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } /* ======================================== SELF-EXCLUSION: Widget not affected by features ======================================== */ html.a11y-feature-letter-spacing .a11y-widget, html.a11y-feature-letter-spacing .a11y-widget * { letter-spacing: normal !important; } html.a11y-feature-line-height .a11y-widget, html.a11y-feature-line-height .a11y-widget * { line-height: normal !important; } html.a11y-feature-dyslexia .a11y-widget, html.a11y-feature-dyslexia .a11y-widget * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } html.a11y-feature-stop-animations .a11y-widget, html.a11y-feature-stop-animations .a11y-widget *, html.a11y-feature-stop-animations .a11y-widget *::before, html.a11y-feature-stop-animations .a11y-widget *::after { animation-duration: 0.2s !important; animation-iteration-count: 1 !important; transition-duration: 0.15s !important; } html.a11y-feature-large-cursor .a11y-widget, html.a11y-feature-large-cursor .a11y-widget * { cursor: auto !important; } html.a11y-feature-large-cursor .a11y-widget button, html.a11y-feature-large-cursor .a11y-widget [role="switch"] { cursor: pointer !important; } /* ======================================== REDUCED MOTION SUPPORT ======================================== */ @media (prefers-reduced-motion: reduce) { .a11y-toggle, .a11y-panel, .a11y-toggle-switch__track, .a11y-toggle-switch__thumb, .a11y-reset-btn, .a11y-reset-btn__icon, .a11y-control, .a11y-reading-line { transition: none !important; animation: none !important; } } /* ======================================== RESPONSIVE - MOBILE (<768px) ======================================== */ @media (max-width: 767px) { .a11y-widget { bottom: 16px; right: 16px; } .a11y-toggle { width: 48px; height: 48px; } .a11y-toggle__icon { width: 20px; height: 20px; } .a11y-panel { position: fixed; bottom: 76px; right: 16px; left: 16px; width: auto; max-height: 70vh; } .a11y-panel__content { padding: 0 var(--a11y-space-sm); } .a11y-control { margin: 0 calc(var(--a11y-space-sm) * -0.5); padding: var(--a11y-space-sm) var(--a11y-space-xs); } .a11y-control__info { gap: var(--a11y-space-sm); } .a11y-control__label { font-size: 13px; } /* Hide reading guide on mobile */ .a11y-reading-line { display: none !important; } } /* ======================================== RESPONSIVE - EXTRA SMALL MOBILE (<375px) ======================================== */ @media (max-width: 374px) { .a11y-widget { bottom: 12px; right: 12px; } .a11y-panel { right: 12px; left: 12px; bottom: 72px; } .a11y-control__label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } } /* ======================================== PRINT STYLES ======================================== */ @media print { .a11y-widget, .a11y-reading-line, .a11y-filter-overlay { display: none !important; } }