/* ===================================================================== תפריט נגישות — SiloV נטען בשלושת דפי האתר, אחרי ה-CSS הרגיל, כדי שהדריסות ינצחו. שני כללי ברזל שמסבירים כמעט כל החלטה בקובץ: 1. אין filter על html/body. filter על אלמנט יוצר containing block חדש לצאצאים position:fixed — כלומר ה-header הסטיקי, ה-CTA הנייד והכפתור הצף היו מתנתקים מה-viewport ומתחילים לגלול עם הדף. filter מותר רק ישירות על img/video/svg, שאין להם צאצאים קבועים. 2. הגדלת טקסט = zoom על , לא transform. כל גדלי הגופן באתר קשיחים ב-px, אז html{font-size} לא מזיז דבר; transform היה מגדיל כמו זכוכית מגדלת בלי לשבור שורות מחדש, וגם הוא שובר position:fixed. zoom על ה-root מתנהג כמו זום דפדפן אמיתי. ה-namespace .a11y-ui מסמן את רכיבי הווידג'ט עצמם, כדי שדריסות הניגודיות הגורפות יפסחו עליהם והפאנל יישאר קריא בכל מצב. ===================================================================== */ /* ==================== 1 · הכפתור הצף ==================== */ .a11y-btn{ position:fixed; /* inline-end = הקצה הרחוק בכיוון הקריאה: בעברית זו הפינה השמאלית, הרחוקה ביותר מנקודת הכניסה לעין ולכן הכי פחות מפריעה */ inset-inline-end:22px; inset-block-end:22px; z-index:300; width:52px;height:52px; /* מעל מינימום 44×44 */ display:flex;align-items:center;justify-content:center; padding:0;border:0;border-radius:50%; background:#7C4DEE;color:#fff; cursor:pointer; /* הטבעת הלבנה היא מה שמפריד את הכפתור מהמקטעים הסגולים של האתר; על רקע לבן הסגול לבדו כבר נותן 5:1 */ box-shadow:0 0 0 3px #fff, 0 6px 20px rgba(40,15,95,.34); transition:transform .2s cubic-bezier(.22,.7,.3,1), background .2s; } .a11y-btn:hover{background:#5B2FC9;transform:scale(1.06)} .a11y-btn:active{transform:scale(.97)} .a11y-btn svg{width:29px;height:29px;fill:currentColor;pointer-events:none} /* border-radius חוזר כאן במפורש: לאתר יש כלל focus גלובלי שמכריח border-radius:6px על כל כפתור במיקוד, והוא היה הופך את העיגול לריבוע */ .a11y-btn:focus-visible{outline:3px solid #1E1A33;outline-offset:4px;border-radius:50%} @media (max-width:767px){ /* .mobile-cta הוא פס קבוע בגובה 56px בתחתית — הכפתור מרחף מעליו */ .a11y-btn{inset-block-end:calc(56px + 14px);inset-inline-end:14px; width:48px;height:48px} .a11y-btn svg{width:26px;height:26px} } /* ==================== 2 · הפאנל ==================== */ .a11y-panel{ position:fixed; inset-inline-end:22px; inset-block-end:86px; z-index:300; width:min(330px, calc(100vw - 44px)); /* קריטי: ב-zoom מוגדל הפאנל חייב לגלול בתוך עצמו ולא להיחתך מתחת למסך */ max-height:calc(100vh - 130px); overflow-y:auto; background:#fff;color:#1E1A33; border:1px solid #DDD2FB;border-radius:16px; box-shadow:0 18px 48px rgba(40,15,95,.26); font-family:Assistant,'Rubik',Arial,sans-serif; text-align:right; padding:0 0 14px; } .a11y-panel[hidden]{display:none} @media (max-width:767px){ .a11y-panel{ inset-inline-end:14px; inset-block-end:calc(56px + 74px); width:calc(100vw - 28px); max-height:calc(100vh - 200px); } } /* ---- כותרת הפאנל ---- */ .a11y-head{ position:sticky;top:0;z-index:1; display:flex;align-items:center;justify-content:space-between;gap:10px; padding:14px 16px 12px; background:#fff;border-bottom:1px solid #E8E1FA; border-radius:16px 16px 0 0; } .a11y-title{font-size:16px;font-weight:600;color:#1E1A33;margin:0} .a11y-close{ width:36px;height:36px;flex:none; display:flex;align-items:center;justify-content:center; padding:0;border:1px solid #E8E1FA;border-radius:9px; background:#fff;color:#4A4566;font-size:19px;line-height:1;cursor:pointer; } .a11y-close:hover{background:#F7F4FF;color:#1E1A33} /* ---- קבוצה ---- */ .a11y-group{padding:13px 16px 0} .a11y-legend{ display:block;font-size:12.5px;font-weight:500;color:#645E7D; margin-bottom:8px;letter-spacing:.02em; } /* ---- שורת גודל הטקסט ---- */ .a11y-size{display:flex;align-items:center;gap:8px} .a11y-step{ width:44px;height:44px;flex:none; display:flex;align-items:center;justify-content:center; padding:0;border:1px solid #DDD2FB;border-radius:10px; background:#fff;color:#4A4566;font-size:21px;font-weight:500;line-height:1; cursor:pointer; } .a11y-step:hover:not(:disabled){background:#F7F4FF;border-color:#A78BFA;color:#1E1A33} .a11y-step:disabled{opacity:.4;cursor:not-allowed} .a11y-size-val{ flex:1;min-height:44px; display:flex;align-items:center;justify-content:center; border:1px solid #E8E1FA;border-radius:10px;background:#F7F4FF; font-size:14px;font-weight:500;color:#1E1A33; } /* ---- רשת המתגים ---- */ .a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .a11y-opt{ position:relative; min-height:56px; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;padding:8px 6px; border:1px solid #DDD2FB;border-radius:11px; background:#fff;color:#4A4566; font-family:inherit;font-size:12.5px;font-weight:500;line-height:1.25; text-align:center;cursor:pointer; transition:background .15s, border-color .15s, color .15s; } .a11y-opt svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;pointer-events:none} .a11y-opt:hover{background:#F7F4FF;border-color:#A78BFA;color:#1E1A33} .a11y-opt[aria-pressed="true"]{ background:#7C4DEE;border-color:#7C4DEE;color:#fff; } /* המצב הפעיל לא מסומן בצבע בלבד — יש גם סימן ✓, לטובת עיוורי צבעים (1.4.1) */ .a11y-opt[aria-pressed="true"]::after{ content:"✓"; position:absolute;top:4px;inset-inline-end:7px; font-size:12px;line-height:1;font-weight:700; } /* ---- איפוס ---- */ .a11y-reset{ width:100%;min-height:44px;margin-top:4px; display:flex;align-items:center;justify-content:center;gap:7px; border:1px solid #DDD2FB;border-radius:11px; background:#F7F4FF;color:#4A4566; font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer; } .a11y-reset:hover{background:#EFE9FE;border-color:#A78BFA;color:#1E1A33} .a11y-reset svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* ---- כותרת תחתונה ---- */ .a11y-foot{ margin:14px 16px 0;padding-top:12px;border-top:1px solid #E8E1FA; font-size:12.5px;line-height:1.65;color:#645E7D; } .a11y-foot a{color:#7C4DEE;text-decoration:underline;text-underline-offset:3px} .a11y-foot a:hover{color:#5B2FC9} .a11y-foot p{margin:0 0 4px} .a11y-foot kbd{ font-family:inherit;font-size:11.5px; background:#F7F4FF;border:1px solid #DDD2FB;border-radius:5px;padding:1px 5px; } /* טבעת מיקוד אחידה לכל רכיבי הווידג'ט */ .a11y-panel button:focus-visible, .a11y-panel a:focus-visible{outline:3px solid #7C4DEE;outline-offset:2px;border-radius:8px} /* ==================== 3 · סרגל הקריאה ==================== */ /* מסכה שמעמעמת את כל המסך חוץ מרצועה אחת שעוקבת אחרי המצביע. pointer-events:none — אחרת היא הייתה חוסמת כל קליק בדף. */ .a11y-ruler{ position:fixed;inset:0;z-index:299;pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.62) 0, rgba(0,0,0,.62) calc(var(--a11y-y, 50vh) - 30px), transparent calc(var(--a11y-y, 50vh) - 30px), transparent calc(var(--a11y-y, 50vh) + 30px), rgba(0,0,0,.62) calc(var(--a11y-y, 50vh) + 30px), rgba(0,0,0,.62) 100%); } .a11y-ruler[hidden]{display:none} /* ===================================================================== 4 · מצבי ההתאמה — כל אחד class על ===================================================================== */ /* ---------- 4.1 · גודל טקסט ---------- zoom על ה-root בלבד. על wrapper פנימי זה היה מנתק את ה-header הסטיקי ואת ה-CTA הקבוע מה-viewport. */ html.a11y-fs1{zoom:1.15} html.a11y-fs2{zoom:1.3} html.a11y-fs3{zoom:1.5} /* ---------- 4.2 · ניגודיות כהה ---------- דריסה גורפת ולא ערכת נושא כהה מעוצבת: באתר יש עשרות צבעים קשיחים (51 מופעים של #fff לבדם) וגרדיאנטים סגולים, ולכן החלפת משתנים לבדה הייתה משאירה טקסט לבן על רקע שהפך שחור — או להפך. html נשאר שחור ומתחתיו הכול שקוף, כך שאין שום שילוב שנשאר קריא-למחצה. */ html.a11y-dark{background:#000 !important;color:#fff !important} html.a11y-dark body, html.a11y-dark body *:not(.a11y-ui):not(.a11y-ui *){ background-color:transparent !important; background-image:none !important; color:#fff !important; border-color:#fff !important; box-shadow:none !important; text-shadow:none !important; } /* הפסאודו-אלמנטים הם נקודות ואייקונים דקורטיביים בצבע מלא — בלי איפוס background-color נשארות נקודות סגולות וירוקות צפות על רקע שחור */ html.a11y-dark body *:not(.a11y-ui):not(.a11y-ui *)::before, html.a11y-dark body *:not(.a11y-ui):not(.a11y-ui *)::after{ background-color:transparent !important; background-image:none !important; color:#fff !important; box-shadow:none !important; } html.a11y-dark body ::placeholder{color:#fff !important;opacity:1 !important} html.a11y-dark body :is(a,a *):not(.a11y-ui):not(.a11y-ui *){color:#FFE24D !important} html.a11y-dark body :is(button,input,textarea,select):not(.a11y-ui):not(.a11y-ui *){ background-color:#000 !important;color:#fff !important;border:2px solid #fff !important; } html.a11y-dark body :is(a,button,input,textarea,select):not(.a11y-ui):focus-visible{ outline:3px solid #FFE24D !important;outline-offset:3px !important; } /* האייקונים באתר הם קובצי SVG חיצוניים — CSS לא נכנס לתוכם, אז הופכים אותם ללבנים בשלמותם. filter על img בטוח: אין לו צאצאים fixed. */ html.a11y-dark body img[src$=".svg"]{filter:brightness(0) invert(1) !important} html.a11y-dark body :is(svg,svg *):not(.a11y-ui):not(.a11y-ui *){ fill:none !important;stroke:#fff !important; } html.a11y-dark .skip-link{background:#000 !important;color:#FFE24D !important; border:2px solid #FFE24D !important} /* ---- הווידג'ט עצמו במצב כהה ---- */ html.a11y-dark .a11y-btn{background:#000;color:#FFE24D;box-shadow:0 0 0 3px #FFE24D} html.a11y-dark .a11y-btn:hover{background:#1a1a1a} html.a11y-dark .a11y-btn:focus-visible{outline-color:#fff} html.a11y-dark .a11y-panel{background:#000;color:#fff;border-color:#fff} html.a11y-dark .a11y-head{background:#000;border-bottom-color:#fff} html.a11y-dark .a11y-title{color:#fff} html.a11y-dark :is(.a11y-close,.a11y-step,.a11y-opt,.a11y-reset){ background:#000;color:#fff;border-color:#fff; } html.a11y-dark .a11y-size-val{background:#000;color:#fff;border-color:#fff} html.a11y-dark :is(.a11y-close,.a11y-step,.a11y-opt,.a11y-reset):hover:not(:disabled){ background:#333;color:#fff; } html.a11y-dark .a11y-opt[aria-pressed="true"]{background:#FFE24D;color:#000;border-color:#FFE24D} html.a11y-dark .a11y-legend{color:#fff} html.a11y-dark .a11y-foot{color:#fff;border-top-color:#fff} html.a11y-dark .a11y-foot a{color:#FFE24D} html.a11y-dark .a11y-foot kbd{background:#000;color:#fff;border-color:#fff} html.a11y-dark .a11y-panel :is(button,a):focus-visible{outline-color:#FFE24D} /* ---------- 4.3 · ניגודיות בהירה ---------- */ html.a11y-light{background:#fff !important;color:#000 !important} html.a11y-light body, html.a11y-light body *:not(.a11y-ui):not(.a11y-ui *){ background-color:transparent !important; background-image:none !important; color:#000 !important; border-color:#000 !important; box-shadow:none !important; text-shadow:none !important; } html.a11y-light body *:not(.a11y-ui):not(.a11y-ui *)::before, html.a11y-light body *:not(.a11y-ui):not(.a11y-ui *)::after{ background-color:transparent !important; background-image:none !important; color:#000 !important; box-shadow:none !important; } html.a11y-light body ::placeholder{color:#000 !important;opacity:1 !important} html.a11y-light body :is(a,a *):not(.a11y-ui):not(.a11y-ui *){color:#0000C4 !important} html.a11y-light body :is(button,input,textarea,select):not(.a11y-ui):not(.a11y-ui *){ background-color:#fff !important;color:#000 !important;border:2px solid #000 !important; } html.a11y-light body img[src$=".svg"]{filter:brightness(0) !important} html.a11y-light body :is(svg,svg *):not(.a11y-ui):not(.a11y-ui *){ fill:none !important;stroke:#000 !important; } html.a11y-light .a11y-btn{background:#000;color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 5px #000} html.a11y-light .a11y-panel{border-color:#000;border-width:2px} html.a11y-light :is(.a11y-close,.a11y-step,.a11y-opt,.a11y-reset){ background:#fff;color:#000;border-color:#000; } html.a11y-light .a11y-size-val{background:#fff;color:#000;border-color:#000} html.a11y-light .a11y-opt[aria-pressed="true"]{background:#000;color:#fff;border-color:#000} html.a11y-light :is(.a11y-title,.a11y-legend,.a11y-foot){color:#000} html.a11y-light .a11y-foot a{color:#0000C4} /* ---------- 4.4 · גווני אפור ---------- filter על body היה יוצר containing block ומנתק את ה-header הסטיקי ואת ה-CTA הקבוע מה-viewport. הפתרון: להחיל את ה-filter על כל ילד ישיר של body בנפרד. אלמנט שהוא בעצמו fixed ומסונן — נשאר fixed; מה שנשבר הוא רק צאצא fixed של אלמנט מסונן, ואין כזה באתר. החלפת משתני צבע לבדה לא הספיקה: באתר יש ירוקים וסגולים קשיחים שהיו שורדים ככתמי צבע. */ html.a11y-grayscale body > *:not(.a11y-ui){filter:grayscale(1)} html.a11y-grayscale .a11y-btn{background:#3A3A3A} html.a11y-grayscale .a11y-btn:hover{background:#1F1F1F} html.a11y-grayscale .a11y-opt[aria-pressed="true"]{background:#3A3A3A;border-color:#3A3A3A} html.a11y-grayscale .a11y-foot a{color:#3A3A3A} /* ---------- 4.5 · הדגשת קישורים ---------- */ html.a11y-links body :is(a,a:visited):not(.a11y-ui):not(.a11y-ui *){ text-decoration:underline !important; text-underline-offset:3px; text-decoration-thickness:2px; outline:2px dashed currentColor; outline-offset:2px; } /* ---------- 4.6 · גופן קריא ---------- Rubik מוחלף בגופן בעל צורות אות מובחנות יותר, עם ריווח אותיות ושורות מוגדל — ההתאמה המקובלת לדיסלקציה. */ html.a11y-font body, html.a11y-font body *:not(.a11y-ui):not(.a11y-ui *){ font-family:Arial,"Segoe UI","Noto Sans Hebrew",Tahoma,sans-serif !important; letter-spacing:.03em !important; word-spacing:.08em !important; line-height:1.75 !important; } /* ---------- 4.7 · עצירת אנימציות ---------- מקביל מלא לבלוק @media (prefers-reduced-motion:reduce) שכבר קיים בדף, רק מופעל ידנית במקום מהגדרת מערכת ההפעלה. */ html.a11y-nomotion, html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important; } /* כל מה שמתחיל שקוף ומתגלה בגלילה — חייב להיות גלוי מיידית, אחרת "עצירת אנימציות" הייתה מוחקת חצי מהדף */ html.a11y-nomotion :is(.reveal,.anim-wipe,.anim-underline,.anim-zoom, .anim-slide,.anim-focus,.anim-track,.anim-glow), html.a11y-nomotion .stagger > *{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; letter-spacing:normal !important; /* .anim-wipe מסתיר את עצמו במסכה ולא ב-opacity — בלי איפוס המסכה חצי מהכותרת נשארת חתוכה */ -webkit-mask-image:none !important; mask-image:none !important; } html.a11y-nomotion .anim-underline .gradient-text::after{width:100% !important} html.a11y-nomotion :is(.btn-meeting,.btn-green,.form-submit,.mobile-cta)::after{display:none !important} /* ---------- 4.8 · סמן עכבר גדול ---------- */ html.a11y-cursor, html.a11y-cursor *:not(.a11y-ui):not(.a11y-ui *){ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M6 2l0 24 6-6 4 9 5-2-4-9 9 0z' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important; } html.a11y-cursor :is(a,button,label,summary,[role="button"],input[type="checkbox"],input[type="submit"]):not(.a11y-ui):not(.a11y-ui *){ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M12 4a2.5 2.5 0 015 0v10m0-2a2.5 2.5 0 015 0v3m0-1a2.5 2.5 0 015 0v3m0-1a2.5 2.5 0 015 0v6c0 4-3 7-7 7h-4c-4 0-6-2-7-5l-4-8a2.5 2.5 0 014-2l2 3' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 10 3, pointer !important; }