/* ========================================================================== hopala — אפשרויות נגישות (Regulation 35 / IS 5568 user-preference widget) A comfort tool only: it toggles classes on . It never mutates content DOM, never injects alt text, never rewrites ARIA. ========================================================================== */ /* ---------- trigger ---------- */ #a11y-trigger{ position:fixed; inset-block-end:1rem; inset-inline-start:1rem; z-index:9000; inline-size:52px; block-size:52px; padding:0; display:grid; place-items:center; background:#141413; color:#FAF9F5; border:2px solid #FAF9F5; border-radius:50%; box-shadow:0 2px 10px rgba(20,20,19,.28); cursor:pointer; transition:transform .25s cubic-bezier(.3,1.25,.5,1), background .2s; } #a11y-trigger:hover{ background:#A8482A; transform:translateY(-2px); } #a11y-trigger:focus-visible{ outline:3px solid #A8482A; outline-offset:3px; } #a11y-trigger svg{ inline-size:28px; block-size:28px; display:block; } /* ---------- panel ---------- */ #a11y-panel{ position:fixed; inset-block-end:5.2rem; inset-inline-start:1rem; z-index:9001; inline-size:min(340px, calc(100vw - 2rem)); max-block-size:min(72vh, 560px); overflow-y:auto; background:#FAF9F5; color:#141413; border:2px solid #141413; border-radius:16px; box-shadow:0 8px 30px rgba(20,20,19,.22); padding:1rem 1rem 1.1rem; font-family:'Assistant','Arial Hebrew',sans-serif; font-size:15px; line-height:1.5; } #a11y-panel[hidden]{ display:none; } #a11y-panel .a11y-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-block-end:.8rem; padding-block-end:.6rem; border-block-end:1px solid #D1CFC5; } #a11y-panel h2{ font-size:1.05rem; font-weight:700; margin:0; } #a11y-close{ background:none; border:1.5px solid #8A867B; border-radius:9px; inline-size:34px; block-size:34px; cursor:pointer; font-size:18px; line-height:1; color:#141413; } #a11y-close:hover{ border-color:#141413; } #a11y-close:focus-visible{ outline:2.5px solid #A8482A; outline-offset:2px; } .a11y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; } .a11y-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.28rem; min-block-size:74px; padding:.55rem .4rem; background:#FCFAF1; color:#141413; border:1.5px solid #8A867B; border-radius:12px; font-family:inherit; font-size:.85rem; font-weight:600; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; } .a11y-btn:hover{ border-color:#141413; } .a11y-btn:focus-visible{ outline:2.5px solid #A8482A; outline-offset:2px; } .a11y-btn[aria-pressed="true"]{ background:#EBDBBC; border-color:#141413; } .a11y-btn .a11y-val{ font-size:.76rem; font-weight:700; color:#A8482A; } .a11y-btn svg{ inline-size:22px; block-size:22px; } .a11y-reset{ grid-column:1 / -1; min-block-size:0; padding:.6rem; flex-direction:row; gap:.4rem; background:none; border-style:dashed; } #a11y-note{ margin-block-start:.8rem; font-size:.78rem; line-height:1.5; color:#5E5D59; } #a11y-note a{ color:#A8482A; } /* ========================================================================== the preference classes themselves ========================================================================== */ /* text size */ html.a11y-text-115{ font-size:115%; } html.a11y-text-130{ font-size:130%; } html.a11y-text-150{ font-size:150%; } /* keep the widget itself at a fixed size so it never becomes unusable */ html[class*="a11y-text-"] #a11y-panel{ font-size:15px; } /* line spacing */ html.a11y-lines-16 body, html.a11y-lines-16 p, html.a11y-lines-16 li, html.a11y-lines-16 h1, html.a11y-lines-16 h2, html.a11y-lines-16 h3{ line-height:1.6 !important; } html.a11y-lines-20 body, html.a11y-lines-20 p, html.a11y-lines-20 li, html.a11y-lines-20 h1, html.a11y-lines-20 h2, html.a11y-lines-20 h3{ line-height:2 !important; } /* link highlighting */ html.a11y-links a:not(#a11y-trigger):not(.a11y-btn){ text-decoration:underline !important; text-decoration-thickness:2px !important; text-underline-offset:3px !important; color:#8A3A1F !important; background:#FBEFE8 !important; padding-inline:.12em; border-radius:3px; } /* heading highlighting */ html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3{ background:#EBDBBC !important; padding:.15em .35em !important; border-inline-start:5px solid #A8482A !important; border-radius:4px; } /* readable font — OS stack only, never a webfont */ html.a11y-readable, html.a11y-readable body, html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3, html.a11y-readable p, html.a11y-readable a, html.a11y-readable li, html.a11y-readable label, html.a11y-readable input, html.a11y-readable button, html.a11y-readable td, html.a11y-readable th, html.a11y-readable span, html.a11y-readable b{ font-family:Arial, "Arial Hebrew", "Segoe UI", Tahoma, sans-serif !important; letter-spacing:normal !important; } /* big cursor */ html.a11y-cursor-big, html.a11y-cursor-big *{ 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 4 L8 38 L16 30 L21 42 L27 39 L22 28 L34 28 Z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 6 4, auto !important; } /* stop animations */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } /* high contrast — strengthen real colours rather than filtering */ html.a11y-contrast-high body{ background:#fff !important; } html.a11y-contrast-high h1, html.a11y-contrast-high h2, html.a11y-contrast-high h3, html.a11y-contrast-high p, html.a11y-contrast-high li, html.a11y-contrast-high span, html.a11y-contrast-high td, html.a11y-contrast-high th, html.a11y-contrast-high label, html.a11y-contrast-high small, html.a11y-contrast-high b, html.a11y-contrast-high figcaption{ color:#000 !important; background-color:transparent !important; } html.a11y-contrast-high a:not(#a11y-trigger):not(.a11y-btn){ color:#7A2E12 !important; text-decoration:underline !important; } html.a11y-contrast-high input, html.a11y-contrast-high select, html.a11y-contrast-high textarea{ background:#fff !important; color:#000 !important; border-color:#000 !important; } html.a11y-contrast-high section{ border-color:#000 !important; } /* invert / monochrome — root filters, with the widget counter-filtered */ html.a11y-contrast-invert{ filter:invert(1) hue-rotate(180deg); background:#fff; } html.a11y-contrast-mono{ filter:grayscale(1) contrast(1.15); } html.a11y-contrast-invert #a11y-panel, html.a11y-contrast-invert #a11y-trigger{ filter:invert(1) hue-rotate(180deg); } html.a11y-contrast-invert img, html.a11y-contrast-invert svg image{ filter:invert(1) hue-rotate(180deg); } /* print: never carry preferences onto paper */ @media print{ html[class*="a11y-"]{ filter:none !important; font-size:100% !important; } html[class*="a11y-lines-"] *{ line-height:normal !important; } #a11y-trigger, #a11y-panel{ display:none !important; } } @media (max-width:520px){ .a11y-grid{ grid-template-columns:1fr 1fr; } #a11y-panel{ inset-block-end:4.8rem; } }