/* * 2fox4 Accessibility Suite — Widget Styles * Apple-inspired glassmorphism design with SF Pro font stack. * * @package Fox4A11y */ /* ========================================================================== Custom Properties ========================================================================== */ :root { --fox4a11y-accent: #007AFF; --fox4a11y-radius-sm: 12px; --fox4a11y-radius-md: 16px; --fox4a11y-radius-lg: 20px; --fox4a11y-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); --fox4a11y-shadow-btn: 0 4px 14px rgba(0, 0, 0, 0.18); --fox4a11y-glass-bg: rgba(255, 255, 255, 0.72); --fox4a11y-glass-border: rgba(255, 255, 255, 0.45); --fox4a11y-text: #1d1d1f; --fox4a11y-text-secondary: #6e6e73; --fox4a11y-divider: rgba(0, 0, 0, 0.08); --fox4a11y-switch-bg: #e5e5ea; --fox4a11y-switch-active: var(--fox4a11y-accent); --fox4a11y-transition: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); --fox4a11y-font: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ========================================================================== Root Container — IMPORTANT: position: fixed can break when ANY ancestor has transform, filter, will-change, or perspective set. We use !important and the JS re-parents this element directly onto document.body to escape those stacking contexts. The container uses px-only sizing so it is immune to the font-size scaling applied to . ========================================================================== */ #fox4a11y-root { position: fixed !important; z-index: 2147483647 !important; /* max 32-bit — above every layer */ font-family: var(--fox4a11y-font) !important; font-size: 15px !important; /* px — never inherits % scaling */ line-height: 1.47 !important; color: var(--fox4a11y-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Nullify any inherited transforms that break fixed positioning */ transform: none !important; will-change: auto !important; filter: none !important; perspective: none !important; contain: layout !important; } #fox4a11y-root *, #fox4a11y-root *::before, #fox4a11y-root *::after { box-sizing: border-box; } /* Position variants */ .fox4a11y-pos-bottom-right { bottom: 24px !important; right: 24px !important; left: auto !important; top: auto !important; } .fox4a11y-pos-bottom-left { bottom: 24px !important; left: 24px !important; right: auto !important; top: auto !important; } /* ========================================================================== Toggle Button ========================================================================== */ #fox4a11y-toggle { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: none; border-radius: 50%; color: #fff; cursor: pointer; box-shadow: var(--fox4a11y-shadow-btn); transition: transform var(--fox4a11y-transition), box-shadow var(--fox4a11y-transition); position: relative; } #fox4a11y-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24); } #fox4a11y-toggle:focus-visible { outline: 3px solid var(--fox4a11y-accent); outline-offset: 3px; } #fox4a11y-toggle[aria-expanded="true"] { transform: rotate(45deg) scale(1); } /* Pulse ring on idle — draws attention without being distracting */ #fox4a11y-toggle::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--fox4a11y-accent); opacity: 0; animation: fox4a11y-pulse 3s ease-in-out infinite; pointer-events: none; } #fox4a11y-toggle[aria-expanded="true"]::after { animation: none; opacity: 0; } @keyframes fox4a11y-pulse { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 0.35; transform: scale(1.15); } } /* ========================================================================== Panel (Dialog) ========================================================================== */ #fox4a11y-panel { position: absolute; width: 340px; max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--fox4a11y-radius-lg); background: var(--fox4a11y-glass-bg); border: 1px solid var(--fox4a11y-glass-border); box-shadow: var(--fox4a11y-shadow); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); transition: opacity var(--fox4a11y-transition), transform var(--fox4a11y-transition); } /* Positioning relative to toggle */ .fox4a11y-pos-bottom-right #fox4a11y-panel { bottom: 72px; right: 0; } .fox4a11y-pos-bottom-left #fox4a11y-panel { bottom: 72px; left: 0; } /* Hidden state */ #fox4a11y-panel[hidden] { display: block !important; opacity: 0; pointer-events: none; transform: translateY(12px) scale(0.97); } /* Visible state */ #fox4a11y-panel:not([hidden]) { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .fox4a11y-panel-inner { padding: 20px; } /* ========================================================================== Header ========================================================================== */ .fox4a11y-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--fox4a11y-divider); } .fox4a11y-header h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; margin: 0; color: var(--fox4a11y-text); } #fox4a11y-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 50%; background: #ff3b30; color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(255, 59, 48, 0.3); transition: background var(--fox4a11y-transition), box-shadow var(--fox4a11y-transition), transform var(--fox4a11y-transition); } #fox4a11y-close:hover { background: #e0352b; box-shadow: 0 3px 10px rgba(255, 59, 48, 0.4); transform: scale(1.1); } #fox4a11y-close:focus-visible { outline: 3px solid #ff3b30; outline-offset: 2px; } /* ========================================================================== Controls ========================================================================== */ .fox4a11y-body { display: flex; flex-direction: column; gap: 4px; } .fox4a11y-control { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--fox4a11y-radius-sm); transition: background var(--fox4a11y-transition); } .fox4a11y-control:hover { background: rgba(0, 0, 0, 0.03); } .fox4a11y-control span, .fox4a11y-control label { font-size: 15px; font-weight: 400; color: var(--fox4a11y-text); user-select: none; } /* ---------- Font-size range ---------- */ .fox4a11y-control--range { flex-direction: column; align-items: stretch; gap: 8px; } .fox4a11y-range-wrap { display: flex; align-items: center; gap: 8px; } .fox4a11y-step { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 8px; background: rgba(0, 0, 0, 0.06); font-size: 14px; font-weight: 600; color: var(--fox4a11y-text); cursor: pointer; transition: background var(--fox4a11y-transition); flex-shrink: 0; } .fox4a11y-step:hover { background: rgba(0, 0, 0, 0.1); } .fox4a11y-step:focus-visible { outline: 3px solid var(--fox4a11y-accent); outline-offset: 2px; } /* Range input — webkit + moz */ #fox4a11y-fontsize { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 2px; background: var(--fox4a11y-switch-bg); outline: none; transition: background var(--fox4a11y-transition); } #fox4a11y-fontsize::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--fox4a11y-accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); cursor: pointer; transition: transform 0.15s ease; } #fox4a11y-fontsize::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--fox4a11y-accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); cursor: pointer; } #fox4a11y-fontsize:focus-visible { outline: 3px solid var(--fox4a11y-accent); outline-offset: 4px; border-radius: 2px; } .fox4a11y-output { font-size: 13px; font-weight: 500; color: var(--fox4a11y-text-secondary); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Toggle switches ---------- */ .fox4a11y-control--toggle [role="switch"] { position: relative; display: inline-flex; align-items: center; width: 50px; height: 30px; padding: 0; border: none; border-radius: 15px; background: #e5e5ea !important; cursor: pointer; transition: background var(--fox4a11y-transition); flex-shrink: 0; } .fox4a11y-control--toggle [role="switch"][aria-checked="true"] { background: var(--fox4a11y-switch-active) !important; } .fox4a11y-control--toggle [role="switch"][aria-checked="false"] { background: #e5e5ea !important; } .fox4a11y-switch-knob { position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); transition: transform var(--fox4a11y-transition); pointer-events: none; } .fox4a11y-control--toggle [role="switch"][aria-checked="true"] .fox4a11y-switch-knob { transform: translateX(20px); } .fox4a11y-control--toggle [role="switch"]:focus-visible { outline: 3px solid var(--fox4a11y-accent); outline-offset: 2px; } /* ========================================================================== Footer ========================================================================== */ .fox4a11y-footer { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--fox4a11y-divider); } #fox4a11y-reset { width: 100%; padding: 12px 16px; border: 2px solid #ff3b30; border-radius: var(--fox4a11y-radius-sm); background: #ff3b30; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: 0.01em; box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3); transition: background var(--fox4a11y-transition), box-shadow var(--fox4a11y-transition), transform var(--fox4a11y-transition); } #fox4a11y-reset:hover { background: #e0352b; box-shadow: 0 4px 14px rgba(255, 59, 48, 0.4); transform: translateY(-1px); } #fox4a11y-reset:focus-visible { outline: 3px solid #ff3b30; outline-offset: 2px; } .fox4a11y-credit { margin: 10px 0 0; text-align: center; font-size: 11px; font-weight: 400; color: var(--fox4a11y-text-secondary); letter-spacing: 0.01em; } .fox4a11y-credit a { color: var(--fox4a11y-accent); text-decoration: none; font-weight: 500; transition: opacity var(--fox4a11y-transition); } .fox4a11y-credit a:hover { opacity: 0.75; } .fox4a11y-credit a:focus-visible { outline: 2px solid var(--fox4a11y-accent); outline-offset: 2px; border-radius: 2px; } /* ========================================================================== Reading Guide Overlay ========================================================================== */ #fox4a11y-reading-guide { position: fixed; left: 0; width: 100%; height: 12px; background: rgba(0, 122, 255, 0.18); border-top: 2px solid var(--fox4a11y-accent); border-bottom: 2px solid var(--fox4a11y-accent); pointer-events: none; z-index: 999998; transition: opacity 0.15s ease; } /* ========================================================================== Global Feature Classes (applied to ) — CRITICAL: The widget (#fox4a11y-root) lives as a direct child of , OUTSIDE of . This means: - `body *` selectors naturally do NOT reach the widget. - `filter` on does NOT break the widget's position:fixed. - Features that target `body` or `body *` are safely isolated. We keep explicit :not() guards on html-level selectors for safety. ========================================================================== */ /* Dyslexia-friendly font — scoped to body content only */ html.fox4a11y-dyslexia body, html.fox4a11y-dyslexia body p, html.fox4a11y-dyslexia body li, html.fox4a11y-dyslexia body span, html.fox4a11y-dyslexia body td, html.fox4a11y-dyslexia body th, html.fox4a11y-dyslexia body input, html.fox4a11y-dyslexia body textarea, html.fox4a11y-dyslexia body select, html.fox4a11y-dyslexia body button { font-family: "OpenDyslexic", "Comic Sans MS", "Arial", sans-serif !important; letter-spacing: 0.05em !important; word-spacing: 0.12em !important; line-height: 1.8 !important; } /* * High contrast * * IMPORTANT: We must NOT put filter on because: * CSS filter creates a new Containing Block, which breaks position:fixed * for ALL children — including the WordPress admin bar (#wpadminbar), * sticky headers, and any theme fixed elements. * * Instead we apply contrast to the main content wrapper elements. * This targets the actual page content without affecting fixed-position * UI elements like the WP admin bar. */ html.fox4a11y-high-contrast body > *:not(#fox4a11y-root):not(#wpadminbar):not(script):not(style):not(link) { filter: contrast(1.5) !important; } html.fox4a11y-high-contrast body img { filter: contrast(1.2) !important; } /* * Dark mode — comprehensive recoloring scoped to body content. * * Most themes set explicit color/background on deep elements (h1, p, div, span…). * A single `body { color }` is NOT enough because those theme rules are more * specific. We therefore target all common content elements with !important. * The WP admin bar is excluded so it stays untouched. */ html.fox4a11y-dark-mode body { background: #1a1a1a !important; color: #f0f0f0 !important; } /* Force light text on ALL content elements inside body (excluding admin bar) */ html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link), html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) * { color: #f0f0f0 !important; border-color: #444 !important; } /* Dark backgrounds for containers that themes color explicitly */ html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) header, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) nav, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) main, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) section, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) article, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) aside, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) footer, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) div { background-color: transparent !important; } /* Links stay clearly distinguishable */ html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) a, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) a * { color: #6cb4ff !important; } /* Buttons stay readable */ html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) button, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) .button, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) .wp-block-button__link, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) input[type="submit"] { background-color: #333 !important; color: #f0f0f0 !important; border-color: #555 !important; } /* Form fields */ html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) textarea, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) select { background-color: #2a2a2a !important; color: #f0f0f0 !important; border-color: #555 !important; } /* Tables */ html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) table, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) th, html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) td { background-color: #222 !important; color: #f0f0f0 !important; border-color: #444 !important; } /* Images dimmed slightly */ html.fox4a11y-dark-mode body > *:not(#wpadminbar):not(#fox4a11y-root):not(script):not(style):not(link) img { opacity: 0.85; } /* * Dark mode: style the widget panel itself. * The widget sits outside so it doesn't inherit dark-mode body styles. * We target it explicitly via its ID. */ html.fox4a11y-dark-mode #fox4a11y-panel { --fox4a11y-glass-bg: rgba(40, 40, 42, 0.82); --fox4a11y-glass-border: rgba(255, 255, 255, 0.1); --fox4a11y-text: #f5f5f7; --fox4a11y-text-secondary: #a1a1a6; --fox4a11y-divider: rgba(255, 255, 255, 0.1); } html.fox4a11y-dark-mode #fox4a11y-close { background: #ff3b30; color: #fff; } html.fox4a11y-dark-mode .fox4a11y-step { background: rgba(255, 255, 255, 0.1); color: #f5f5f7; } /* Highlight links — yellow background for maximum visibility */ html.fox4a11y-highlight-links body a { background-color: #ffe600 !important; color: #000 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-decoration-color: #000 !important; outline: 2px solid #ffe600 !important; outline-offset: 1px !important; border-radius: 2px; padding: 1px 3px !important; box-decoration-break: clone !important; -webkit-box-decoration-break: clone !important; } /* Keyboard navigation enhanced focus — scoped to body only */ html.fox4a11y-keyboard-nav body *:focus-visible { outline: 3px solid var(--fox4a11y-accent, #007AFF) !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(0, 122, 255, 0.25) !important; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 400px) { #fox4a11y-panel { width: calc(100vw - 32px); right: 0 !important; left: 0 !important; margin: 0 auto; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { #fox4a11y-root *, #fox4a11y-root *::before, #fox4a11y-root *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }