/* ========================================================================== רכיב נגישות (Accessibility Toolbar) תקן ישראלי 5568 (רמה AA) / WCAG 2.1 · חוק שוויון זכויות לאנשים עם מוגבלות הרכיב הוא תוספת — הנגישות הבסיסית מובנית בקוד (סמנטיקה, פוקוס, ניגודיות). כל ההגדרות נשמרות ב-localStorage ומיושמות על (class-based). ========================================================================== */ /* ---------- מיקום צף: נגישות שמאל-תחתון, "חזרה למעלה" מעליו (וואטסאפ נשאר בימין) ---------- */ #back-to-top { bottom: calc(var(--space-8, 2rem) + 64px) !important; } /* ---------- כפתור הפעלה צף (צד נגדי לוואטסאפ = שמאל-תחתון) ---------- */ .a11y-toggle { position: fixed; bottom: var(--space-8, 2rem); left: var(--space-8, 2rem); z-index: 1200; width: 52px; height: 52px; border-radius: 9999px; background: var(--color-brand, #4f5244); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .28); border: 2px solid #fff; transition: transform .2s ease, background .2s ease; } .a11y-toggle:hover { transform: scale(1.06); background: var(--color-brand-dark, #3e4136); } .a11y-toggle:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 3px; } .a11y-toggle svg { width: 28px; height: 28px; } @media (max-width: 640px) { .a11y-toggle { width: 46px; height: 46px; bottom: 1rem; left: 1rem; } .a11y-toggle svg { width: 24px; height: 24px; } #back-to-top { bottom: calc(1rem + 58px) !important; } } /* ---------- הפאנל ---------- */ .a11y-panel { position: fixed; bottom: 6rem; left: var(--space-8, 2rem); z-index: 1201; width: min(330px, calc(100vw - 2rem)); max-height: min(80vh, 640px); overflow-y: auto; background: #fff; color: #1a1a1a; border: 1px solid #d4cec6; border-radius: 14px; box-shadow: 0 10px 44px rgba(0, 0, 0, .30); padding: 1rem 1rem 1.25rem; display: none; font-family: var(--font-main, Arial, sans-serif); } .a11y-panel[aria-hidden="false"] { display: block; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-bottom: 1px solid #e5e0d8; padding-bottom: .6rem; margin-bottom: .75rem; } .a11y-panel__title { font-size: 1.05rem; font-weight: 700; color: #1a1a1a; margin: 0; } .a11y-panel__close { width: 32px; height: 32px; border-radius: 8px; background: #f0ece5; color: #1a1a1a; font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .a11y-panel__close:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; } /* ---------- גריד כפתורים ---------- */ .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .75rem; } .a11y-btn { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .4rem; border: 1.5px solid #d4cec6; border-radius: 10px; background: #fafafa; color: #1a1a1a; font-size: .82rem; font-weight: 600; text-align: center; line-height: 1.25; transition: border-color .15s ease, background .15s ease; } .a11y-btn svg { width: 22px; height: 22px; flex-shrink: 0; } .a11y-btn:hover { border-color: var(--color-brand, #4f5244); background: #fff; } .a11y-btn:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; } .a11y-btn[aria-pressed="true"] { border-color: var(--color-brand, #4f5244); background: var(--color-brand, #4f5244); color: #fff; } .a11y-btn__span { display: block; } /* שורת שליטה בגודל טקסט */ .a11y-fontrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; border: 1.5px solid #d4cec6; border-radius: 10px; margin-bottom: .5rem; background: #fafafa; } .a11y-fontrow__label { font-size: .85rem; font-weight: 600; } .a11y-fontrow__controls { display: flex; align-items: center; gap: .4rem; } .a11y-step { width: 34px; height: 34px; border-radius: 8px; background: #fff; border: 1.5px solid #d4cec6; color: #1a1a1a; font-size: 1.1rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; } .a11y-step:hover { border-color: var(--color-brand, #4f5244); } .a11y-step:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; } .a11y-step[disabled] { opacity: .4; cursor: not-allowed; } .a11y-fontval { min-width: 3ch; text-align: center; font-weight: 700; font-size: .9rem; } /* איפוס */ .a11y-reset { width: 100%; padding: .6rem; border-radius: 10px; background: #1a1a1a; color: #fff; font-weight: 600; font-size: .88rem; } .a11y-reset:hover { background: #333; } .a11y-reset:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; } /* קישור להצהרת נגישות */ .a11y-panel__link { display: block; text-align: center; margin-top: .7rem; font-size: .82rem; color: var(--color-brand-dark, #3e4136); text-decoration: underline; } /* ========================================================================== מצבי תצוגה המופעלים על (data/class) ========================================================================== */ /* --- הגדלת/הקטנת טקסט: נשלט ע"י --a11y-font-scale על :root --- */ html[data-a11y-font] body { font-size: calc(1rem * var(--a11y-font-scale, 1)); } /* --- קו תחתון לכל הקישורים --- */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 2px; } /* --- גופן קריא (מוותר על הסריף הדקורטיבי + מרווח שורות) --- */ html.a11y-readable body, html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3, html.a11y-readable h4, html.a11y-readable h5, html.a11y-readable h6, html.a11y-readable .section-title, html.a11y-readable .page-hero-title { font-family: Arial, "Arial Hebrew", sans-serif !important; letter-spacing: .01em; } html.a11y-readable body, html.a11y-readable p, html.a11y-readable li { line-height: 1.9 !important; } /* --- עצירת אנימציות ומעברים --- */ html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.a11y-pause video { /* עצירת וידאו רקע נעשית ב-JS */ } /* --- ניגודיות גבוהה (שחור/צהוב) --- */ html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast .site-header, html.a11y-contrast .site-footer, html.a11y-contrast .section, html.a11y-contrast .section-alt, html.a11y-contrast .page-hero, html.a11y-contrast .hero, html.a11y-contrast .card, html.a11y-contrast .project-card, html.a11y-contrast .contact-form-wrap, html.a11y-contrast .contact-aside, html.a11y-contrast .form-control { background: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast h5, html.a11y-contrast h6, html.a11y-contrast p, html.a11y-contrast span, html.a11y-contrast li, html.a11y-contrast label, html.a11y-contrast .section-title, html.a11y-contrast .page-hero-title, html.a11y-contrast .page-hero-subtitle { color: #fff !important; } html.a11y-contrast a, html.a11y-contrast .nav-link { color: #ffff00 !important; } html.a11y-contrast .btn, html.a11y-contrast .btn-primary { background: #ffff00 !important; color: #000 !important; border: 2px solid #ffff00 !important; } html.a11y-contrast img, html.a11y-contrast .hero-video, html.a11y-contrast video { filter: grayscale(1) contrast(1.1); } /* הרכיב עצמו נשאר קריא במצב ניגודיות */ html.a11y-contrast .a11y-panel { background: #fff !important; color: #000 !important; } html.a11y-contrast .a11y-panel *, html.a11y-contrast .a11y-panel .a11y-btn { color: #1a1a1a !important; } html.a11y-contrast .a11y-btn[aria-pressed="true"] { color: #fff !important; } /* --- הדגשת כותרות --- */ html.a11y-highlight h1, html.a11y-highlight h2, html.a11y-highlight h3 { outline: 2px dashed var(--color-brand, #4f5244); outline-offset: 3px; } /* --- סמן גדול --- */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l30 18-12 3-3 12z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important; }