/* ===== מודול נגישות: תפריט צף + מצבי התאמה ===== קובץ עצמאי. חלק א' — עיצוב הווידג'ט. חלק ב' — כללי ההתאמות, כולם מופעלים דרך data-a11y-* על (מנוהל ב-accessibility-menu.js). */ /* ===== חלק א': הווידג'ט הצף ===== */ .a11y-widget { position: fixed; bottom: 18px; left: 18px; z-index: 950; } .a11y-toggle { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); border: 1px solid var(--glass-border); color: var(--gold); cursor: pointer; box-shadow: var(--shadow-soft); transition: border-color 0.2s, transform 0.2s var(--ease); } .a11y-toggle:hover, .a11y-toggle:focus-visible { border-color: var(--gold-dim); transform: scale(1.06); } .a11y-menu { position: absolute; bottom: calc(100% + 10px); left: 0; width: min(280px, calc(100vw - 36px)); max-height: min(80vh, 640px); overflow-y: auto; padding: 10px; background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 4px; } .a11y-menu[hidden] { display: none; } .a11y-menu-title { padding: 6px 14px 10px; font-size: 1rem; font-weight: 700; color: var(--gold); border-bottom: 1px solid var(--glass-border); margin-bottom: 4px; } .a11y-option, .a11y-reset { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 14px; border: none; border-radius: 10px; background: transparent; color: var(--text); font-family: inherit; font-size: 0.95rem; text-align: right; cursor: pointer; transition: background 0.15s, color 0.15s; } .a11y-option:hover, .a11y-option:focus-visible, .a11y-reset:hover, .a11y-reset:focus-visible { background: var(--glass-strong); } /* נקודת מצב לכפתורי הפעלה/כיבוי: זהב כשהאפשרות פעילה */ .a11y-option .a11y-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--text-dim); flex-shrink: 0; } .a11y-option[aria-pressed="true"] { color: var(--gold); } .a11y-option[aria-pressed="true"] .a11y-dot { background: var(--gold); border-color: var(--gold); } /* מחוון רמה לכפתורי מדרגות (גודל טקסט, ריווח שורות) */ .a11y-level { flex-shrink: 0; min-width: 34px; text-align: center; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--text-dim); border: 1px solid var(--glass-border); border-radius: 8px; padding: 2px 6px; } .a11y-option.is-active .a11y-level { color: var(--gold); border-color: var(--gold-dim); } .a11y-option.is-active { color: var(--gold); } .a11y-reset { color: var(--text-dim); border-top: 1px solid var(--glass-border); border-radius: 0 0 10px 10px; margin-top: 4px; } /* קישור להצהרת הנגישות המלאה, בתחתית התפריט */ .a11y-statement { display: block; padding: 8px 14px 6px; font-size: 0.85rem; color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; text-align: right; border-radius: 10px; } .a11y-statement:hover, .a11y-statement:focus-visible { background: var(--glass-strong); } /* ===== חלק ב': מצבי ההתאמה ===== */ /* --- גודל טקסט: שלוש רמות, דרך גודל הבסיס של rem --- */ html[data-a11y-text-size="1"] { font-size: 112.5%; } html[data-a11y-text-size="2"] { font-size: 125%; } html[data-a11y-text-size="3"] { font-size: 137.5%; } /* --- ריווח שורות: שתי רמות --- */ html[data-a11y-line-spacing="1"] :is(p, li, blockquote, dt, dd, figcaption, label) { line-height: 2 !important; } html[data-a11y-line-spacing="2"] :is(p, li, blockquote, dt, dd, figcaption, label) { line-height: 2.4 !important; } /* --- ניגודיות גבוהה: דריסת משתני העיצוב הגלובליים --- */ html[data-a11y-contrast] { --bg: #000000; --bg-alt: #000000; --surface: #0a0a0a; --surface-deep: #000000; --text: #ffffff; --text-dim: #e8ebee; --text-warm: #ffffff; --border: rgba(255, 255, 255, 0.35); --glass-border: rgba(255, 255, 255, 0.35); --glass: rgba(255, 255, 255, 0.08); --glass-strong: rgba(255, 255, 255, 0.12); --gold: #ffd75e; --gold-light: #ffe9a8; --gold-dim: rgba(255, 215, 94, 0.5); --purple: #c79bff; --purple-soft: #c79bff; --champagne: #ffd75e; --iridium: #ffffff; --glow-gold: none; --glow-purple: none; --shadow-soft: none; } html[data-a11y-contrast] body { background: #000; } /* --- הדגשת קישורים --- */ html[data-a11y-links] a { text-decoration: underline !important; text-underline-offset: 3px; color: var(--gold-light) !important; } /* --- הדגשת כותרות --- */ html[data-a11y-headings] :is(h1, h2, h3, h4, h5, h6) { background: rgba(212, 175, 55, 0.16); outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* --- גופן קריא: החלפת משתני הגופן לגופן מערכת בסיסי --- */ html[data-a11y-readable-font] { --font: Arial, 'Segoe UI', 'Helvetica Neue', sans-serif; --font-display: Arial, 'Segoe UI', 'Helvetica Neue', sans-serif; } /* --- עצירת אנימציות: ביטול כל תנועת CSS; אנימציות קנבס נעצרות ב-JS --- */ html[data-a11y-no-motion] *, html[data-a11y-no-motion] *::before, html[data-a11y-no-motion] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* אלמנטים שנחשפים בגלילה מוצגים מיד, בלי להמתין לאנימציה */ html[data-a11y-no-motion] .reveal { opacity: 1 !important; transform: none !important; } /* --- סמן גדול / סמן שחור: SVG מוטמע כ-data URI (מותר לפי ה-CSP: img-src data:) --- */ html[data-a11y-big-cursor] *, html[data-a11y-big-cursor] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpolygon points='3,1 3,21 8.5,16 12,23 15,21.5 11.5,14.5 18,14.5' fill='%23ffffff' stroke='%23000000' stroke-width='1.2'/%3E%3C/svg%3E") 6 2, auto !important; } html[data-a11y-black-cursor] *, html[data-a11y-black-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%3Cpolygon points='3,1 3,21 8.5,16 12,23 15,21.5 11.5,14.5 18,14.5' fill='%23000000' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E") 4 1, auto !important; } /* שילוב של שניהם: סמן גדול ושחור */ html[data-a11y-big-cursor][data-a11y-black-cursor] *, html[data-a11y-big-cursor][data-a11y-black-cursor] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpolygon points='3,1 3,21 8.5,16 12,23 15,21.5 11.5,14.5 18,14.5' fill='%23000000' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E") 6 2, auto !important; }