/* ===================================================== a11y.css — accessibility toolbar (js/a11y.js) + effect classes + the skip-to-content link. תפריטיה palette. ===================================================== */ /* screen-reader-only text — visually hidden, read by AT (fixes heading outline without altering the visual design) */ .sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- skip-to-content (first focusable in the body) ---------- */ .skip-link{ position:fixed;top:-100px;right:12px;z-index:200; background:var(--brand,#7a1f2b);color:#fff;font-family:"Heebo",sans-serif; font-size:14px;font-weight:700;padding:10px 18px;border-radius:0 0 8px 8px; text-decoration:none;box-shadow:0 4px 14px rgba(28,25,21,.3);transition:top .15s; } .skip-link:focus{top:0;outline:3px solid #f8f4ea;outline-offset:-6px} /* ---------- floating ♿ button ---------- */ .a11y-fab{ position:fixed;z-index:90; bottom:max(16px,env(safe-area-inset-bottom)); right:max(16px,env(safe-area-inset-right)); width:52px;height:52px;border-radius:50%; background:#7a1f2b;color:#fff;border:3px solid #fff; display:grid;place-items:center;cursor:pointer; box-shadow:3px 3px 0 rgba(28,25,21,.35); transition:transform .18s; } .a11y-fab:hover{transform:scale(1.06)} .a11y-fab:focus-visible{outline:3px solid #8a6a1e;outline-offset:3px} .a11y-fab svg{display:block} /* ---------- backdrop + panel ---------- */ .a11y-backdrop{position:fixed;inset:0;z-index:90} .a11y-panel{ position:fixed;z-index:91; bottom:max(78px,calc(env(safe-area-inset-bottom) + 62px)); right:max(16px,env(safe-area-inset-right)); width:300px;max-width:calc(100vw - 32px);max-height:80vh;overflow-y:auto; background:#fdfaf2;color:#1c1915;border:2px solid #1c1915;border-radius:14px; box-shadow:6px 6px 0 rgba(138,106,30,.5); padding:16px;font-family:"Heebo",sans-serif; } .a11y-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .a11y-title{font-family:"Frank Ruhl Libre",serif;font-size:19px;font-weight:900;letter-spacing:2px;color:#1c1915} .a11y-x{background:none;border:none;font-size:20px;line-height:1;color:#8a817333;color:#7a736a;cursor:pointer;padding:2px 4px} .a11y-x:hover{color:#7a1f2b} .a11y-x:focus-visible,.a11y-fsbtn:focus-visible,.a11y-opt:focus-visible,.a11y-reset:focus-visible,.a11y-stmt:focus-visible{outline:2px solid #7a1f2b;outline-offset:2px;border-radius:6px} .a11y-fs{margin-bottom:12px} .a11y-fslbl{display:block;font-size:13px;font-weight:700;margin-bottom:7px} .a11y-fsrow{display:flex;align-items:center;gap:8px} .a11y-fsbtn{flex:1;border:2px solid #1c1915;background:#fff;border-radius:9px;padding:7px 0;font:inherit;font-weight:900;font-size:15px;cursor:pointer} .a11y-fsbtn:hover{background:#f3ede0} .a11y-pct{width:52px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums} .a11y-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px} .a11y-opt{ border:2px solid #1c1915;background:#fff;border-radius:9px; padding:9px 8px;font:inherit;font-size:12.5px;font-weight:700;color:#1c1915; cursor:pointer;text-align:center;line-height:1.3;transition:background .12s,color .12s; } .a11y-opt:hover{background:#f3ede0} .a11y-opt.a11y-on{background:#1c1915;color:#fff} .a11y-reset{ width:100%;margin-top:12px;border:2px solid #1c1915;background:#fff;border-radius:9px; padding:8px 0;font:inherit;font-weight:700;font-size:13px;cursor:pointer; } .a11y-reset:hover{background:#f6efe2} .a11y-stmt{display:block;text-align:center;margin-top:12px;font-size:12px;color:#7a736a;text-decoration:none} .a11y-stmt:hover{color:#7a1f2b;text-decoration:underline} @media (max-width:480px){ .a11y-panel{width:calc(100vw - 24px);right:12px} } /* ===================================================== EFFECT CLASSES — toggled on by js/a11y.js ===================================================== */ /* high contrast — retheme the CSS variables to max contrast on white */ html.a11y-contrast{ --paper:#fff;--card:#fff;--wash:#fff; --ink:#000;--soft:#111;--soft2:#1a1a1a;--mut:#222;--ph:#333; --faint:#000;--faint2:#e6e6e6;--faint3:#333; --acc:#7a1f2b;--brand:#000; } html.a11y-contrast body{background:#fff} html.a11y-contrast a{text-decoration:underline} html.a11y-contrast .rcard,html.a11y-contrast .dix,html.a11y-contrast .menu-card, html.a11y-contrast .sr-row,html.a11y-contrast .cal-nrow{border-color:#000 !important} /* grayscale */ html.a11y-grayscale{filter:grayscale(1)} /* highlight links — strong, unmissable */ html.a11y-links a:not(.a11y-fab):not(.skip-link){ text-decoration:underline !important;text-underline-offset:2px; background:#fff3b0 !important;color:#1c1915 !important; box-shadow:0 0 0 1px #8a6a1e;border-radius:2px; } /* readable font — drop the serif/spacing for a plain sans */ html.a11y-readable body,html.a11y-readable h1,html.a11y-readable h2,html.a11y-readable h3, html.a11y-readable .dn,html.a11y-readable .sr-name,html.a11y-readable .cal-nfood, html.a11y-readable [class*="ttl"],html.a11y-readable [class*="head"]{ font-family:Arial,"Segoe UI","Heebo",sans-serif !important;letter-spacing:normal !important; } /* stop motion (manual equivalent of prefers-reduced-motion) */ html.a11y-no-motion *,html.a11y-no-motion *::before,html.a11y-no-motion *::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } /* big cursor */ html.a11y-big-cursor,html.a11y-big-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='M6 4l30 16-13 3-3 13z' fill='%23fff' stroke='%231c1915' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4,auto !important; } @media print{ .a11y-fab,.a11y-panel,.a11y-backdrop,.skip-link{display:none !important} }