/* ========================================================================== מנוע נגישות — סגנונות מצב (נשלטים ע"י a11y.js דרך class על ) תקן ישראלי ת"י 5568 / WCAG 2.1 AA ========================================================================== */ /* גדלי גופן */ html.a11y-font-1 { font-size: 112.5%; } html.a11y-font-2 { font-size: 125%; } html.a11y-font-3 { font-size: 140%; } /* ניגודיות גבוהה */ html.a11y-contrast { --c-bg: #fff; --c-surface: #fff; --c-surface-2: #fff; --c-ink: #000; --c-ink-soft: #1a1a1a; --c-line: #000; --c-accent: #6e4a21; --c-accent-dark: #4d3315; --c-accent-soft: #efe4d2; --c-wood: #6b4a16; } html.a11y-contrast .card, html.a11y-contrast .step, html.a11y-contrast .review-card, html.a11y-contrast .lead-form { border-width: 2px; border-color: #000; } /* היפוך צבעים */ html.a11y-invert { filter: invert(1) hue-rotate(180deg); } html.a11y-invert img, html.a11y-invert video, html.a11y-invert .hero-media img { filter: invert(1) hue-rotate(180deg); } /* גווני אפור */ html.a11y-grayscale { filter: grayscale(1); } html.a11y-invert.a11y-grayscale { filter: invert(1) hue-rotate(180deg) grayscale(1); } /* הדגשת קישורים */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed currentColor; outline-offset: 2px; } /* הדגשת כותרות */ html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3, html.a11y-headings h4 { outline: 2px solid var(--c-wood); outline-offset: 3px; background: var(--c-wood-soft); } /* גופן קריא */ html.a11y-readable, html.a11y-readable * { font-family: Arial, "Segoe UI", sans-serif !important; letter-spacing: .01em; } /* ריווח טקסט מוגדל */ html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing blockquote { line-height: 2.1 !important; letter-spacing: .06em !important; word-spacing: .14em !important; } /* סמן גדול */ 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 16-13 3 7 14-5 2-7-14-9 9z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important; } /* עצירת אנימציה */ html.a11y-stop *, html.a11y-stop *::before, html.a11y-stop *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-stop .card-media img, html.a11y-stop .gallery-item img { transform: none !important; } /* ----- כפתור פתיחת הווידג'ט ----- */ .a11y-toggle { position: fixed; right: 18px; left: auto; bottom: 18px; z-index: 960; width: 56px; height: 56px; border-radius: 50%; background: var(--c-accent-dark); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md); transition: transform var(--t); } .a11y-toggle:hover { transform: scale(1.08); } .a11y-toggle svg { width: 30px; height: 30px; } @media (max-width: 720px) { .a11y-toggle { bottom: 78px; } } /* ----- פאנל הנגישות ----- */ .a11y-panel { position: fixed; right: 18px; left: auto; bottom: 84px; z-index: 970; width: min(340px, calc(100vw - 36px)); background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.1rem; max-height: min(80vh, 560px); overflow-y: auto; transform: translateY(14px) scale(.98); opacity: 0; pointer-events: none; transition: transform var(--t), opacity var(--t); } .a11y-panel.is-open { transform: none; opacity: 1; pointer-events: auto; } @media (max-width: 720px) { .a11y-panel { bottom: 144px; } } .a11y-panel h2 { font-size: 1.1rem; margin-bottom: .2rem; } .a11y-panel .a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; } .a11y-panel .a11y-close { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); font-size: 1.2rem; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } .a11y-opt { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: .7rem .4rem; border: 1.5px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); font-size: .8rem; font-weight: 600; color: var(--c-ink); line-height: 1.2; transition: border-color var(--t), background var(--t); } .a11y-opt svg { width: 24px; height: 24px; color: var(--c-accent-dark); } .a11y-opt:hover { border-color: var(--c-accent); } .a11y-opt[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-dark); } .a11y-reset { width: 100%; margin-top: .8rem; padding: .7rem; border-radius: var(--radius); background: var(--c-surface-2); font-weight: 700; color: var(--c-ink); } .a11y-reset:hover { background: var(--c-line); } .a11y-statement-link { display: block; text-align: center; margin-top: .7rem; font-size: var(--fs-300); } /* מדריך קריאה */ .a11y-reading-guide { position: fixed; inset-inline: 0; height: 38px; background: rgb(62 122 94 / .18); border-block: 2px solid var(--c-accent); pointer-events: none; z-index: 1300; display: none; } html.a11y-guide .a11y-reading-guide { display: block; }