/* בלק צ'רי — פאנל נגישות (BCa11y) ──────────────────────────────────────────────────────────────────────── מקורי, בלי סקריפט צד-שלישי. הסיבה: ווידג'טים מסוג overlay דורסים הגדרות דפדפן ומתנגשים עם קוראי מסך (overlayfactsheet.com), ותקנה 35 ממילא אינה מחייבת ווידג'ט — היא מחייבת שהאתר עצמו יעמוד בת"י 5568 (AA). ראו סקיל israeli-web-legal-a11y. מוסכמות: · כל המחלקות מוחלות על (documentElement) — a11y-* · הפאנל עצמו מודד ב-px בלבד, כדי שלא יגדל יחד עם הגדלת-הגופן · שום כלל כאן אינו פעיל לפני שהמשתמש בחר בו — האתר הרגיל לא מושפע ──────────────────────────────────────────────────────────────────────── */ /* ═══════════ 1. הכפתור הצף ═══════════ */ /* פינה נגדית לכפתור הוואטסאפ (.float-assist, inset-inline-end) כדי שלא יסתירו זה את זה. */ .bc-a11y-btn { position: fixed; inset-inline-start: 44px; inset-block-end: 28px; z-index: 90; /* מעל .float-assist (80) ומעל הבר הדביק */ inline-size: 48px; block-size: 48px; border-radius: 12px; background: var(--bc-primary); color: var(--bc-cream); display: grid; place-items: center; padding: 0; box-shadow: 0 8px 24px rgba(59, 15, 26, .28); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .bc-a11y-btn:hover { background: var(--bc-primary-deep); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(59, 15, 26, .34); } .bc-a11y-btn svg { inline-size: 26px; block-size: 26px; display: block; fill: currentColor; } @media (max-width: 960px) { .bc-a11y-btn { inset-inline-start: 16px; inset-block-end: 16px; } } /* הבר הדביק של העגלה (cart.css) מרים את הכפתור הצף — מרימים גם את זה, באותו חישוב. */ body:has(.bc-sticky-bar:not([hidden])) .bc-a11y-btn { inset-block-end: calc(100px + 16px); } /* ═══════════ 2. הפאנל ═══════════ */ .bc-a11y-panel { position: fixed; inset-inline-start: 44px; inset-block-end: 88px; z-index: 91; inline-size: 320px; max-block-size: min(74vh, 620px); overflow-y: auto; overscroll-behavior: contain; background: var(--bc-white); color: var(--bc-ink); border-radius: 16px; border: 1px solid var(--bc-rose-line); box-shadow: 0 18px 48px rgba(59, 15, 26, .22); font-family: var(--font-body); font-size: 15px; line-height: 1.5; } .bc-a11y-panel[hidden] { display: none; } @media (max-width: 640px) { .bc-a11y-panel { inset-inline: 0; inset-block-end: 0; inline-size: auto; /* 62vh ולא 82vh: מסבב-ההשוואה 26.7 עלה שתפריט שמכסה את כל המסך במובייל (enable) מונע מהמשתמש לראות מה משתנה תוך כדי — והוא בדיוק מה שהוא בא לכוון. אחרי שהפאנל גדל ל-15 התאמות (28.7) הוא הפך לקיר; הגובה הוקטן כדי שכשליש מהעמוד יישאר גלוי. הגלילה הפנימית קיימת ממילא. */ max-block-size: 62vh; border-radius: 18px 18px 0 0; border-inline: 0; border-block-end: 0; } .bc-a11y-body { padding: 12px 14px 6px; } .bc-a11y-group + .bc-a11y-group { margin-block-start: 14px; } } /* ── ראש הפאנל — דביק, כדי שהסגירה תמיד בהישג יד ── */ .bc-a11y-head { position: sticky; inset-block-start: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 16px; background: var(--bc-primary); color: var(--bc-white); border-radius: 15px 15px 0 0; } @media (max-width: 640px) { .bc-a11y-head { border-radius: 17px 17px 0 0; } } .bc-a11y-head h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.2; color: inherit; } .bc-a11y-close { inline-size: 44px; block-size: 44px; /* --bc-close-size — יעד מגע WCAG 2.5.5 */ border-radius: 10px; display: grid; place-items: center; color: var(--bc-white); font-size: 20px; line-height: 1; background: rgba(255, 255, 255, .1); } .bc-a11y-close:hover { background: rgba(255, 255, 255, .22); } .bc-a11y-body { padding: 14px 16px 8px; } /* ── קבוצות ── */ .bc-a11y-group + .bc-a11y-group { margin-block-start: 18px; } .bc-a11y-group > h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--bc-ink-soft); text-transform: none; } /* ── פריט/טוגל ── */ .bc-a11y-item { inline-size: 100%; min-block-size: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bc-base-2); color: var(--bc-ink); text-align: start; font-size: 15px; transition: background .15s ease; } .bc-a11y-item + .bc-a11y-item { margin-block-start: 6px; } .bc-a11y-item:hover { background: var(--bc-cream-warm); } .bc-a11y-item .ico { inline-size: 22px; text-align: center; font-size: 15px; color: var(--bc-primary); flex: none; } .bc-a11y-item .txt { flex: 1 1 auto; } /* נורית מצב — לא מסתמכת על צבע בלבד: המסגרת מתמלאת ומופיע ✓ */ .bc-a11y-item .dot { flex: none; inline-size: 20px; block-size: 20px; border-radius: 6px; border: 2px solid var(--bc-rose-line); display: grid; place-items: center; font-size: 12px; line-height: 1; color: transparent; } .bc-a11y-item[aria-checked="true"] { background: var(--bc-cream-warm); font-weight: 600; } .bc-a11y-item[aria-checked="true"] .dot { background: var(--bc-primary); border-color: var(--bc-primary); color: var(--bc-white); } .bc-a11y-item[aria-checked="true"] .dot::before { content: "\2713"; } /* ── מדרגות גופן ── */ .bc-a11y-steps { display: flex; align-items: center; gap: 8px; } .bc-a11y-steps .lbl { flex: 1 1 auto; font-size: 15px; } .bc-a11y-step { inline-size: 44px; block-size: 44px; border-radius: 10px; background: var(--bc-base-2); color: var(--bc-primary); display: grid; place-items: center; font-size: 18px; font-weight: 700; line-height: 1; } .bc-a11y-step:hover { background: var(--bc-cream-warm); } .bc-a11y-step[disabled] { opacity: .4; cursor: default; } .bc-a11y-level { min-inline-size: 40px; text-align: center; font-size: 13px; color: var(--bc-ink-soft); font-variant-numeric: tabular-nums; } /* ── מבנה העמוד: רשימת ניווט שנבנית מה-DOM החי ── */ .bc-a11y-item .chev { margin-inline-start: auto; font-size: 12px; color: var(--bc-ink-soft); transition: transform .18s ease; } .bc-a11y-item[aria-expanded="true"] .chev { transform: rotate(180deg); } .bc-a11y-struct { margin-block-start: 6px; max-block-size: 240px; overflow-y: auto; border: 1px solid var(--bc-rose-line); border-radius: 10px; background: var(--bc-base-2); padding: 6px; } .bc-a11y-struct[hidden] { display: none; } .bc-a11y-struct button { display: flex; gap: 8px; align-items: baseline; inline-size: 100%; text-align: start; min-block-size: 34px; padding: 6px 8px; border-radius: 8px; font-size: 13px; line-height: 1.35; color: var(--bc-ink); } .bc-a11y-struct button:hover { background: var(--bc-cream-warm); } .bc-a11y-struct button .lv { flex: none; color: var(--bc-ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; } /* isolate ולא plaintext: שניהם מונעים את ההידבקות לתווית ("H2Black Cherry"), אבל plaintext גוזר את הכיוון מהתו הראשון — ולכן כותרת שפותחת באנגלית קפצה ליישור שמאל ויצרה רשימה עם שני יישורים. isolate שומר על בסיס RTL, כלומר על אותו רינדור בדיוק שהכותרת מקבלת בעמוד עצמו. */ .bc-a11y-struct button .tx { flex: 1 1 auto; unicode-bidi: isolate; text-align: start; } .bc-a11y-struct .d1 { padding-inline-start: 20px; } .bc-a11y-struct .d2 { padding-inline-start: 34px; } .bc-a11y-struct .d3 { padding-inline-start: 48px; } .bc-a11y-struct .bc-a11y-struct-empty { padding: 8px; font-size: 13px; color: var(--bc-ink-soft); } /* ── תחתית הפאנל: איפוס · הצהרה · דיווח (שלושתם חובה) ── */ .bc-a11y-foot { margin-block-start: 14px; padding: 12px 16px 14px; border-block-start: 1px solid var(--bc-rose-line); display: grid; gap: 8px; } .bc-a11y-foot .bc-a11y-reset { min-block-size: 44px; border-radius: 10px; background: var(--bc-primary); color: var(--bc-white); font-size: 15px; font-weight: 600; display: grid; place-items: center; } .bc-a11y-foot .bc-a11y-reset:hover { background: var(--bc-primary-deep); } .bc-a11y-foot .bc-a11y-hide { min-block-size: 44px; border-radius: 10px; border: 1px solid var(--bc-rose-line); background: var(--bc-base-2); color: var(--bc-ink); font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; } .bc-a11y-foot .bc-a11y-hide:hover { background: var(--bc-cream-warm); } .bc-a11y-note kbd { font-family: var(--font-body); font-size: 11px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--bc-rose-line); background: var(--bc-white); } .bc-a11y-foot a { min-block-size: 44px; display: flex; align-items: center; gap: 8px; padding-inline: 4px; font-size: 14px; color: var(--bc-primary); text-decoration: underline; } .bc-a11y-foot a i { font-size: 14px; } .bc-a11y-note { margin: 2px 0 0; font-size: 12px; color: var(--bc-ink-soft); line-height: 1.45; } /* קורא-מסך בלבד */ .bc-a11y-sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════════════════════════════════ 3. ההתאמות עצמן — מוחלות על ולכן על כל האתר ═══════════════════════════════════════════════════════════════════════ */ /* ── 3.1 גודל טקסט ── rem נגזר מ-font-size של :root, ולכן שינוי כאן מרחיב את כל הסקאלה. הפאנל עצמו מודד ב-px ולכן אינו גדל. */ html.a11y-fs-1 { font-size: 112.5%; } html.a11y-fs-2 { font-size: 125%; } html.a11y-fs-3 { font-size: 137.5%; } html.a11y-fs-4 { font-size: 150%; } /* ── 3.2 גופן קריא ── בלי letter-spacing: בעברית הוא פוגע בקריאוּת ולא משפר אותה. */ html.a11y-font, html.a11y-font body, html.a11y-font button, html.a11y-font input, html.a11y-font select, html.a11y-font textarea, html.a11y-font h1, html.a11y-font h2, html.a11y-font h3, html.a11y-font h4 { font-family: Arial, 'Noto Sans Hebrew', 'Segoe UI', sans-serif !important; } html.a11y-font body { font-weight: 500; } /* ── 3.3 ריווח שורות ── */ html.a11y-lh body { line-height: 2.1 !important; } html.a11y-lh p, html.a11y-lh li, html.a11y-lh td { line-height: 2.1 !important; } /* ── 3.4 הדגשת קישורים ── */ html.a11y-links a:not(.btn):not(.bc-a11y-btn) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px !important; } html.a11y-links a:not(.btn):not(.bc-a11y-btn):hover { outline: 2px dashed currentColor; outline-offset: 2px; } /* ── 3.5 הדגשת מיקוד מוגברת ── */ html.a11y-focus :focus-visible { outline: 4px solid #ff8a00 !important; outline-offset: 3px !important; } html.a11y-focus a:focus, html.a11y-focus button:focus { outline: 4px solid #ff8a00 !important; outline-offset: 3px !important; } /* ── 3.6 סמן גדול ── SVG משובץ (data-uri) — בלי בקשת רשת ובלי תלות בקובץ חיצוני. */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M6 2 L6 36 L15 28 L21 41 L27 38 L21 26 L33 26 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 2, auto !important; } html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor [role="button"] { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M14 2 C11 2 10 4 10 7 L10 22 L8 20 C5 17 2 20 4 23 L13 37 C15 40 17 41 21 41 L30 41 C34 41 36 38 36 34 L36 18 C36 15 33 14 32 16 C31 13 28 13 27 15 C26 12 23 12 22 14 L22 7 C22 4 20 2 17 2 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 14 2, pointer !important; } /* ── 3.7 עצירת אנימציות ── ⚠ ה-CSS כאן עוצר רק אנימציות/מעברי-CSS. אנימציות ה-Lottie (נגן-JS, פס-השירותים בדף הבית) נעצרות ומתחדשות ב-js/lottie-icons.js, שמאזין לאותה מחלקה בדיוק. */ html.a11y-nomotion, html.a11y-nomotion * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.a11y-nomotion video { display: none; } html.a11y-nomotion .reveal { opacity: 1 !important; transform: none !important; } /* ═══════════ 3.8 מצבי צבע — בלעדיים הדדית ═══════════ filter על בטוח: מפרט CSS Filter Effects מחריג במפורש את document root מיצירת containing block, ולכן position:fixed לא נשבר. (נבדק חי בכרום 26.7.26.) שימו לב: ניגודיות אינה נבנית מטוקנים בלבד — יש באתר ~370 צבעים קשיחים ולכן דרושה שכבת כפייה, ואחריה שחזור הפאנל עצמו בספציפיות גבוהה יותר. */ /* מונוכרום — filter על השורש; פשוט ובטוח. */ html.a11y-mono { filter: grayscale(1); } /* ניגודיות כהה (שחור/צהוב) — הקונבנציה שמשתמשים ישראלים מכירים. */ html.a11y-cd body, html.a11y-cd body * { background-color: #000 !important; background-image: none !important; color: #ffff00 !important; border-color: #ffff00 !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-cd a, html.a11y-cd a * { color: #00ffff !important; text-decoration: underline !important; } html.a11y-cd img, html.a11y-cd video, html.a11y-cd svg:not(.bc-a11y-btn svg) { opacity: .82; } html.a11y-cd input, html.a11y-cd select, html.a11y-cd textarea { border: 2px solid #ffff00 !important; } /* ניגודיות בהירה (לבן/שחור) */ html.a11y-cl body, html.a11y-cl body * { background-color: #fff !important; background-image: none !important; color: #000 !important; border-color: #000 !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-cl a, html.a11y-cl a * { color: #00309c !important; text-decoration: underline !important; } html.a11y-cl input, html.a11y-cl select, html.a11y-cl textarea { border: 2px solid #000 !important; } /* הלוגו מצויר ב-mask + background-color (base.css:72), ולא כתמונה. לכן שכבת-הכפייה שצובעת כל רקע ב-#000 הפכה אותו לשחור-על-שחור — הלוגו נעלם והמשתמש איבד את זהות האתר ואת הקישור לדף הבית. (אותר בבדיקת צילום, 26.7.26.) התיקון: לצבוע את הלוגו בצבע-הטקסט של המצב — כך הלוגוטייפ האמיתי נשאר גלוי. */ html.a11y-cd .brand-logo { background-color: #ffff00 !important; } html.a11y-cl .brand-logo { background-color: #000000 !important; } /* שחזור הפאנל והכפתור מעל שכבות הכפייה. ספציפיות: html.a11y-cd .bc-a11y-panel * = (0,3,1) גובר על html.a11y-cd body * = (0,1,2). */ html.a11y-cd .bc-a11y-panel, html.a11y-cd .bc-a11y-panel *, html.a11y-cl .bc-a11y-panel, html.a11y-cl .bc-a11y-panel * { background-color: transparent !important; color: #1a1a1a !important; border-color: #d6c2c4 !important; } html.a11y-cd .bc-a11y-panel, html.a11y-cl .bc-a11y-panel { background-color: #fff !important; border: 2px solid #000 !important; } html.a11y-cd .bc-a11y-head, html.a11y-cl .bc-a11y-head, html.a11y-cd .bc-a11y-reset, html.a11y-cl .bc-a11y-reset, html.a11y-cd .bc-a11y-btn, html.a11y-cl .bc-a11y-btn { background-color: #3b0f1a !important; color: #ffffff !important; } html.a11y-cd .bc-a11y-head *, html.a11y-cl .bc-a11y-head * { color: #ffffff !important; } html.a11y-cd .bc-a11y-item, html.a11y-cl .bc-a11y-item { background-color: #f2f0ec !important; } html.a11y-cd .bc-a11y-item[aria-checked="true"] .dot, html.a11y-cl .bc-a11y-item[aria-checked="true"] .dot { background-color: #3b0f1a !important; color: #fff !important; border-color: #3b0f1a !important; } html.a11y-cd .bc-a11y-foot a, html.a11y-cl .bc-a11y-foot a { color: #3b0f1a !important; } html.a11y-cd .bc-a11y-btn svg, html.a11y-cl .bc-a11y-btn svg { fill: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════════════ 4. ההשלמות מסבב-ההשוואה 28.7.26 הושווינו מול ארבעה פאנלים ישראליים חיים — enable/uPress, Ally by Elementor, Planwize ו-Seret — וכל התאמה שהייתה אצל מי מהם ולא אצלנו נוספה כאן. ═══════════════════════════════════════════════════════════════════════ */ /* ── 4.1 יישור טקסט לימין (Ally) ── המטרה היא ביטול יישור-לשני-הצדדים ומרכוז: שניהם יוצרים "נהרות" של רווח ומקשים על מי שמאתר את תחילת השורה. מוחל על טקסט-רץ בלבד — לא על כפתורים, תגיות-מחיר ותאי-לוח, ששם המרכוז הוא חלק מהקריאוּת ולא נגדה. */ html.a11y-align :is(p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6, .legal-body, .legal-body *) { text-align: right !important; text-align-last: right !important; } /* ── 4.2 הדגשת כותרות (enable) ── דורש שהכותרות יהיו h1-h6 אמיתיות. נבדק ב-28.7: 20/20 עמודים משתמשים בתגיות אמיתיות; אין כותרת שהיא div מעוצב. */ html.a11y-heads :is(h1, h2, h3, h4, h5, h6):not(.bc-a11y-panel *) { outline: 2px dashed #b3005c !important; outline-offset: 3px; background-color: #fff4f8 !important; } /* ── 4.3 תמונות ── ‏.bc-a11y-alt מוזרק ע"י a11y.js ליד כל תמונה שיש לה שם נגיש. */ .bc-a11y-alt { display: block; margin: 6px 0; padding: 6px 10px; border-inline-start: 3px solid var(--bc-primary); background: var(--bc-base-2); color: var(--bc-ink); font-size: 13px; line-height: 1.5; text-align: start; } html:not(.a11y-alttext):not(.a11y-noimg) .bc-a11y-alt { display: none; } /* הסתרת תמונות — התיאור נשאר, ולכן המידע אינו הולך לאיבוד */ html.a11y-noimg :is(img, picture, video):not(.bc-a11y-panel *):not(.brand-logo) { display: none !important; } html.a11y-noimg :is(.hero, .pc-media, .pk-media, [style*="background-image"]):not(.bc-a11y-panel *) { background-image: none !important; } /* ── 4.4 הגדלת התצוגה (enable · Planwize) ── ‏zoom ולא transform: ‏transform יוצר containing block ומנתק position:fixed. מוחל על ילדי-body ולא על השורש, כדי שהפאנל והכפתור יישארו בגודלם. */ html.a11y-zoom-1 body > *:not(.bc-a11y-panel):not(.bc-a11y-btn) { zoom: 1.1; } html.a11y-zoom-2 body > *:not(.bc-a11y-panel):not(.bc-a11y-btn) { zoom: 1.2; } html.a11y-zoom-3 body > *:not(.bc-a11y-panel):not(.bc-a11y-btn) { zoom: 1.35; } /* ── 4.5 ספיה והיפוך צבעים (enable) ── */ html.a11y-sepia { filter: sepia(.85) contrast(1.05); } /* היפוך: הכל מתהפך, והמדיה מתהפכת בחזרה — כך הטקסט נעשה בהיר-על-כהה אבל התצלומים נשארים מזוהים. ⚠ סדר הפילטרים במדיה הוא ההפוך מזה שבשורש, וזה לא קישוט: ‏CSS מחיל את פילטר-האב על התוצאה של פילטר-הילד, ולכן כדי לבטלו צריך ‏F כך ש-O(F(x)) = x. עם O = hue∘invert מתקבל F = invert∘hue, כלומר ‏hue-rotate קודם ו-invert אחריו. עם אותו סדר כמו בשורש התצלומים יוצאים דהויים־ורודים — נראה בצילום 28.7 לפני התיקון. */ html.a11y-invert { filter: invert(1) hue-rotate(180deg); background: #fff; } html.a11y-invert :is(img, video, picture, .hero, [style*="background-image"]) { filter: hue-rotate(180deg) invert(1); } /* שחזור הפאנל והכפתור מעל מצבי-ה-filter: היפוך-נגדי מחזיר אותם לצבעם האמיתי. */ html.a11y-invert :is(.bc-a11y-panel, .bc-a11y-btn) { filter: invert(1) hue-rotate(180deg); } html.a11y-sepia :is(.bc-a11y-panel, .bc-a11y-btn) { filter: sepia(0); } /* הכפתור מוסתר לבקשת המשתמש (Ally · Planwize · Seret). לגלישה הנוכחית בלבד — a11y.js שומר ב-sessionStorage ולא ב-localStorage, כך שסגירת הלשונית מחזירה אותו גם למי ששכח את קיצור המקלדת. */ html.a11y-btn-hidden .bc-a11y-btn { display: none !important; } /* בהדפסה — בלי כפתור ובלי פאנל */ @media print { .bc-a11y-btn, .bc-a11y-panel { display: none !important; } }