/* ========================================================= A11Y — ווידג'ט הנגישות + מצבי התאמה כל מצב מופעל דרך data-attribute על ונשמר ב-localStorage ========================================================= */ .a11y-toggle { position: fixed; inset-block-end: max(1rem, env(safe-area-inset-bottom)); inset-inline-start: 1rem; z-index: 58; inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-strong); color: var(--ink); transition: border-color var(--t-fast) var(--ease); } @media (hover: hover) { .a11y-toggle:hover { border-color: var(--ink); } } .a11y-toggle svg { inline-size: 22px; block-size: 22px; } .a11y-panel { position: fixed; inset-block-end: calc(3.75rem + max(1rem, env(safe-area-inset-bottom))); inset-inline-start: 1rem; z-index: 59; inline-size: min(330px, calc(100vw - 2rem)); max-block-size: min(70dvh, 600px); overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line-strong); opacity: 0; translate: 0 10px; visibility: hidden; transition: opacity var(--t) var(--ease), translate var(--t) var(--ease), visibility var(--t); } .a11y-panel.is-open { opacity: 1; translate: 0 0; visibility: visible; } /* במובייל: מרימים את הווידג'ט מעל פס ה-CTA, ומעבירים אותו לצד המסיים. בעברית שורות כפתורים מתחילות מימין, ולכן הפעולה הראשית תמיד בצד ההתחלה — הצבה בצד המסיים מבטיחה שהכפתור הצף לעולם לא יכסה אותה. הבלוק חייב לבוא אחרי כללי הבסיס: media query לא מוסיף ספציפיות. */ @media (max-width: 767px) { .a11y-toggle, .a11y-panel { inset-inline-start: auto; inset-inline-end: 1rem; } .a11y-toggle { inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + var(--cta-bar-h, 0px)); } .a11y-panel { inset-block-end: calc(3.75rem + max(1rem, env(safe-area-inset-bottom)) + var(--cta-bar-h, 0px)); } } .a11y-panel h2 { font-size: var(--fs-h3); margin-block-end: var(--s-1); } .a11y-panel__sub { font-size: var(--fs-xs); color: var(--muted); margin-block-end: var(--s-4); } .a11y-group { margin-block-end: var(--s-4); } .a11y-group h3 { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-block-end: var(--s-2); font-weight: var(--w-medium); } .a11y-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); } .a11y-opt { display: flex; align-items: center; gap: var(--s-2); min-block-size: 44px; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: var(--w-medium); text-align: start; line-height: 1.25; transition: all var(--t-fast) var(--ease); } @media (hover: hover) { .a11y-opt:hover { border-color: var(--ink); } } .a11y-opt[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .a11y-opt .ico { flex-shrink: 0; font-size: .95rem; line-height: 1; } .a11y-size { display: flex; align-items: center; gap: var(--s-2); } .a11y-size button { inline-size: 44px; block-size: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: 1.05rem; font-weight: var(--w-medium); } @media (hover: hover) { .a11y-size button:hover { border-color: var(--ink); } } .a11y-size output { flex: 1; text-align: center; font-weight: var(--w-medium); font-variant-numeric: tabular-nums; } .a11y-panel__footer { display: grid; gap: var(--s-2); margin-block-start: var(--s-4); padding-block-start: var(--s-4); border-block-start: 1px solid var(--line); } .a11y-panel__footer a { font-size: var(--fs-sm); text-align: center; min-block-size: 44px; display: grid; place-items: center; } .a11y-reset { min-block-size: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: var(--w-medium); } @media (hover: hover) { .a11y-reset:hover { border-color: var(--ink); } } /* ========================================================= מצבי ההתאמה ========================================================= */ /* גודל טקסט — כל הסקאלה נזילה ומגיבה אוטומטית */ html[data-fontscale] { font-size: calc(100% * var(--fontscale, 1)); } /* הדגשת קישורים */ html[data-links='underline'] :is(main, footer, header) a:not(.btn) { text-decoration: underline !important; text-underline-offset: .2em; font-weight: var(--w-medium); } /* גווני אפור — האתר ממילא מונוכרום, זה משפיע על התמונות */ html[data-saturation='gray'] img { filter: grayscale(1); } /* טקסט קריא */ html[data-readable='on'] body { letter-spacing: .04em; word-spacing: .12em; line-height: 1.95; } html[data-readable='on'] :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: 1.3; } /* סמן גדול */ html[data-cursor='big'], html[data-cursor='big'] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M7 3l24 14-10 3-4 11z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto !important; } /* ניגודיות גבוהה — גבולות מלאים, בלי אפורים */ html[data-contrast='high'] :is(.pkg, .a11y-panel, .a11y-opt, .vibe-btn, .btn, .field input, .field select, .field textarea, .socials a, .lightbox__nav button) { border-color: #000 !important; } html[data-contrast='high'] .pkg--featured, html[data-contrast='high'] .section--invert { background: #000 !important; color: #FFF !important; } html[data-contrast='high'] :is(.section-lead, .step p, .quote small, p) { color: inherit; } /* הדפסה */ @media print { .a11y-toggle, .a11y-panel, .cta-bar, .site-header, .hero__viz, .mixer__wave, .ticker { display: none !important; } body { background: #fff !important; color: #000 !important; } .section, .section--invert { padding-block: 1.5rem; break-inside: avoid; background: #fff !important; color: #000 !important; } a[href^='http']::after { content: ' (' attr(href) ')'; font-size: .8em; } }