/* ═══════════════════════════════════════════════════ Accessibility Suite — Frontend Widget & Modules CSS ═══════════════════════════════════════════════════ */ :root { --accsuite-accent: #00abd1; --accsuite-saturation: 100%; /* Overridable from Settings → "Aspect Widget (fără cod)" — see class-accessibility-suite.php::enqueue_public() for the inline overrides. */ --accsuite-panel-header-bg: var(--accsuite-accent); --accsuite-panel-header-text: #fff; --accsuite-panel-bg: #fff; --accsuite-radius: 12px; } /* Font Size, Line Height, Letter Spacing are applied as inline styles on so they override theme CSS without needing !important. See: MODULES['font-size'].apply(), ['line-height'].apply(), ['letter-spacing'].apply() */ /* ── Device visibility ──────────────────────────── */ @media (min-width: 1025px) { .accsuite-hide-desktop { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { .accsuite-hide-tablet { display: none !important; } } @media (max-width: 767px) { .accsuite-hide-mobile { display: none !important; } } /* ── Saturation ─────────────────────────────────── */ /* NOTE: filter is NOT applied to body/html by default. Applying filter to body breaks position:fixed children (WhatsApp, chat widgets, etc.). Instead, saturation is applied as inline style on only when pct ≠ 0 (see accessibility.js). Contrast modules apply their own filter (which includes saturation) on html via class. */ /* ── Readable Font ──────────────────────────────── */ .accsuite-readable-font, .accsuite-readable-font * { font-family: Arial, Helvetica, sans-serif !important; } /* ── Dyslexic Font ──────────────────────────────── */ @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/open-dyslexic-regular.otf') format('opentype'); font-display: swap; } .accsuite-dyslexic-font, .accsuite-dyslexic-font * { font-family: 'OpenDyslexic', sans-serif !important; } /* ── Big Cursor ─────────────────────────────────── */ .accsuite-big-cursor, .accsuite-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.5' d='M4 3l16 9-7 2-4 7z'/%3E%3C/svg%3E") 4 4, auto !important; } /* ── Font Bold ──────────────────────────────────── */ .accsuite-font-bold, .accsuite-font-bold * { font-weight: 700 !important; } /* ── Align Text ─────────────────────────────────── */ [data-accsuite-align="left"] * { text-align: left !important; } [data-accsuite-align="center"] * { text-align: center !important; } [data-accsuite-align="right"] * { text-align: right !important; } [data-accsuite-align="justify"] * { text-align: justify !important; } /* ── Highlight Links ────────────────────────────── */ .accsuite-highlight-links a, .accsuite-highlight-links a:visited, .accsuite-highlight-links a:hover { text-decoration: underline !important; text-decoration-color: var(--accsuite-accent) !important; text-underline-offset: 3px !important; text-decoration-thickness: 2px !important; } /* ── Highlight Titles ───────────────────────────── */ .accsuite-highlight-titles h1, .accsuite-highlight-titles h2, .accsuite-highlight-titles h3, .accsuite-highlight-titles h4, .accsuite-highlight-titles h5, .accsuite-highlight-titles h6 { background: rgba(0,171,209,.1) !important; border-left: 4px solid var(--accsuite-accent) !important; padding-left: 10px !important; } /* ── Highlight Hover (content) ──────────────────── */ .accsuite-highlight-hover *:hover { outline: 2px solid var(--accsuite-accent) !important; outline-offset: 2px !important; } /* ── Keyboard Navigation ────────────────────────── */ .accsuite-keyboard-nav *:focus { outline: 3px solid var(--accsuite-accent) !important; outline-offset: 3px !important; border-radius: 2px !important; box-shadow: 0 0 0 6px rgba(0,171,209,.2) !important; } /* ── Hide Images ────────────────────────────────── */ .accsuite-hide-images img, .accsuite-hide-images picture, .accsuite-hide-images figure:not(:has(figcaption)), .accsuite-hide-images [style*="background-image"], .accsuite-hide-images [style*="background:"][style*="url("], .accsuite-hide-images [style*="background "][style*="url("] { visibility: hidden !important; } .accsuite-hide-images svg:not(.accsuite-icon):not(#accsuite-widget svg) { visibility: hidden !important; } /* Elemente cu background-image setat prin CSS (clase, ID-uri, etc.) — detectate de JS */ .accsuite-bg-hidden { background-image: none !important; } /* ── Dark Contrast ──────────────────────────────── */ .accsuite-dark-contrast { filter: saturate(var(--accsuite-saturation)) contrast(130%) brightness(75%) !important; } /* ── Light Contrast ─────────────────────────────── */ .accsuite-light-contrast { filter: saturate(var(--accsuite-saturation)) contrast(120%) brightness(130%) !important; } /* ── High Contrast ──────────────────────────────── */ .accsuite-high-contrast { filter: saturate(var(--accsuite-saturation)) contrast(200%) !important; } /* ── Monochrome ─────────────────────────────────── */ .accsuite-monochrome { filter: saturate(var(--accsuite-saturation)) grayscale(100%) !important; } /* ── Stop Animations ────────────────────────────── */ .accsuite-stop-animations *, .accsuite-stop-animations *::before, .accsuite-stop-animations *::after { animation-duration: 0.001ms !important; animation-iteration-count:1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ── Reading Line ───────────────────────────────── */ #accsuite-reading-line { position: fixed; left: 0; right: 0; height: 3px; background: rgba(0,171,209,.7); pointer-events: none; z-index: 999998; display: none; } html.accsuite-reading-line-active #accsuite-reading-line { display: block; } /* ── Reading Mask ───────────────────────────────── */ #accsuite-reading-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 999997; display: none; } html.accsuite-reading-mask-active #accsuite-reading-mask { display: block; } #accsuite-reading-mask-window { position: fixed; left: 0; right: 0; height: 120px; background: transparent; box-shadow: 0 0 0 9999px rgba(0,0,0,.7); pointer-events: none; z-index: 999998; display: none; } html.accsuite-reading-mask-active #accsuite-reading-mask-window { display: block; } /* ── Text Magnifier tooltip ─────────────────────── */ #accsuite-magnifier { position: fixed; background: #fff; border: 2px solid var(--accsuite-accent); border-radius: 8px; padding: 8px 14px; font-size: 200%; line-height: 1.3; max-width: 320px; pointer-events: none; z-index: 999999; display: none; box-shadow: 0 4px 20px rgba(0,0,0,.2); color: #111; word-break: break-word; } body.accsuite-text-magnifier-active #accsuite-magnifier { display: block; } /* ── Widget style isolation ────────────────────────── Themes cascade inherited properties (font, color, line-height, text-align, list-style, letter-spacing, text-transform…) into any element regardless of CSS specificity. font-family/box-sizing are forced via !important on every descendant (no component ever needs to vary them). The rest (color, line-height, text-align, etc.) is reset via :where() ONLY on the widget's root containers — never on `* ` descendants — so the reset blocks the theme's inherited value at the boundary, then flows down normally through the widget's own internal cascade (e.g. .accsuite-mod-btn{text-align:center} still reaches its child label/icon spans, since nothing re-sets it on every element downstream anymore). */ #accsuite-fab, #accsuite-fab *, #accsuite-panel, #accsuite-panel *, #accsuite-backdrop, #accsuite-statement-modal, #accsuite-statement-modal *, #accsuite-reading-line, #accsuite-reading-mask, #accsuite-reading-mask-window, #accsuite-magnifier { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; box-sizing: border-box !important; /* Themes commonly reset these two DIRECTLY on