/* iAmAI Accessibility Widget — תקן ת"י 5568 / WCAG 2.1 AA */ :root { --a11y-font-scale: 1; } html { font-size: calc(16px * var(--a11y-font-scale)); } /* Hide widget completely inside the Studio (authenticated dashboard) */ body.user-is-authenticated .a11y-fab, body.user-is-authenticated .a11y-panel { display: none !important; } /* Floating button — Code Space DNA */ .a11y-fab { position: fixed; top: 50%; inset-inline-start: 8px; transform: translateY(-50%); z-index: 2147483646; width: 40px; height: 40px; border-radius: 50%; background: #00D4FF; color: #04141A; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 18px rgba(0, 212, 255, 0.40); border: 2px solid rgba(0, 212, 255, 0.7); cursor: pointer; opacity: 0.72; transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, box-shadow 0.2s ease; padding: 0; } .a11y-fab:hover { opacity: 1; background: #4DDEFF; box-shadow: 0 0 28px rgba(0, 212, 255, 0.60); transform: translateY(-50%) scale(1.12); } .a11y-fab:focus-visible { opacity: 1; outline: 3px solid #FBBF24; outline-offset: 3px; } .a11y-fab svg { width: 22px; height: 22px; } /* Panel — opens to the side of the button */ .a11y-panel { position: fixed; top: 50%; inset-inline-start: 60px; transform: translateY(-50%); z-index: 2147483647; width: 320px; max-width: calc(100vw - 80px); max-height: 80vh; overflow-y: auto; background: #131A24; color: #E6EAF2; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); padding: 14px; font-family: 'Heebo', Arial, sans-serif; direction: rtl; } .a11y-panel[hidden] { display: none !important; } .a11y-panel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 8px; margin-bottom: 10px; } .a11y-panel-header h2 { font-size: 16px; font-weight: 700; color: #00D4FF; margin: 0; } .a11y-close { width: 28px; height: 28px; border-radius: 50%; background: #1B2330; color: #8B93A7; font-size: 20px; border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; line-height: 1; } .a11y-close:hover { background: #24304B; color: #E6EAF2; } .a11y-section { margin-bottom: 10px; } .a11y-section-title { font-size: 12px; font-weight: 600; color: #8B93A7; margin-bottom: 6px; } .a11y-font-controls { display: flex; gap: 6px; } .a11y-font-controls button { flex: 1; padding: 8px; border-radius: 8px; background: #0D1117; color: #E6EAF2; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer; font-size: 13px; } .a11y-font-controls button:hover { background: #1B2330; border-color: #00D4FF; } .a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; } .a11y-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; background: #0D1117; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; cursor: pointer; font-size: 10.5px; color: #8B93A7; text-align: center; min-height: 60px; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; font-family: inherit; } .a11y-tile:hover { background: rgba(0, 212, 255, 0.08); border-color: #00D4FF; color: #00D4FF; } .a11y-tile.is-active { background: #00D4FF; color: #04141A; border-color: #00D4FF; } .a11y-tile-icon { font-size: 18px; } .a11y-tile-label { font-weight: 600; line-height: 1.2; } .a11y-reset { width: 100%; padding: 8px; border-radius: 8px; background: rgba(248, 113, 113, 0.10); color: #F87171; font-weight: 700; border: 1px solid #F87171; cursor: pointer; margin-bottom: 6px; font-size: 13px; font-family: inherit; } .a11y-reset:hover { background: rgba(248, 113, 113, 0.18); } .a11y-footer { font-size: 10px; color: #5A6478; text-align: center; } /* Accessibility modes (on ) */ html.a11y-high-contrast, html.a11y-high-contrast body, html.a11y-high-contrast body *:not(.a11y-fab):not(.a11y-fab *):not(.a11y-panel):not(.a11y-panel *) { background: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-high-contrast a:not(.a11y-fab):not(.a11y-panel a) { color: #ffeb3b !important; } html.a11y-invert { filter: invert(1) hue-rotate(180deg); } html.a11y-invert img, html.a11y-invert video, html.a11y-invert iframe, html.a11y-invert .a11y-fab, html.a11y-invert .a11y-panel { filter: invert(1) hue-rotate(180deg); } html.a11y-monochrome { filter: grayscale(1); } html.a11y-monochrome.a11y-invert { filter: grayscale(1) invert(1) hue-rotate(180deg); } html.a11y-highlight-links a:not(.a11y-fab):not(.a11y-panel a) { background: #ffeb3b !important; color: #000 !important; text-decoration: underline !important; font-weight: 700 !important; padding: 0 4px; border-radius: 3px; } html.a11y-big-cursor, html.a11y-big-cursor *:not(.a11y-panel):not(.a11y-panel *) { cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important; } html.a11y-stop-animations *, html.a11y-stop-animations *::before, html.a11y-stop-animations *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-readable-font, html.a11y-readable-font body, html.a11y-readable-font body *:not(.a11y-fab):not(.a11y-fab *) { font-family: Arial, Verdana, Tahoma, sans-serif !important; } html.a11y-letter-spacing body, html.a11y-letter-spacing body *:not(.a11y-panel):not(.a11y-panel *) { letter-spacing: 0.12em !important; } html.a11y-line-height body, html.a11y-line-height body *:not(.a11y-panel):not(.a11y-panel *) { line-height: 2 !important; } @media (max-width: 480px) { .a11y-panel { width: calc(100vw - 80px); inset-inline-start: 56px; } .a11y-fab { width: 38px; height: 38px; } .a11y-fab svg { width: 20px; height: 20px; } }