/* הגשר של טוקני --hb-* לפלטת mrkey חי ב-assets/css/tokens.css (מקור אמת יחיד). * הקובץ הזה מועתק 1:1 בין אתרי winmove ולכן נשאר בשמות של חגיגת. */ /* Nagish accessibility widget — IL-standard panel (steppers + pill toggles) + * all user-toggled modes. Charcoal+gold brand. Filters apply per direct * child so the fixed widgets stay viewport-fixed (the contrast-trap fix). * Fixed-widget exclusions: .hb-nagish .mk-float .hb-consent .hb-reading-guide */ /* ---- Container + trigger ---- */ /* הפינה הימנית שייכת לכפתורי יצירת הקשר (.mk-float) — הנגישות יושבת מולם * בפינה הנגדית, כך שאין יותר ערימה אנכית ואף אחד לא מסתיר את השני. */ .hb-nagish { position: fixed; bottom: calc(22px + env(safe-area-inset-bottom)); inset-inline-end: 22px; /* ב-RTL זו הפינה השמאלית */ width: 54px; display: flex; justify-content: center; z-index: var(--z-nagish); } .hb-nagish__panel { max-height: min(72vh, calc(100vh - 160px)); } .hb-nagish__trigger { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--hb-charcoal); color: var(--hb-gold-light); box-shadow: var(--shadow), inset 0 0 0 2px var(--hb-gold); transition: transform var(--dur-fast) var(--ease-out); } .hb-nagish__trigger svg { width: 28px; height: 28px; } .hb-nagish__trigger:hover { transform: scale(1.06); } /* ---- Panel ---- */ .hb-nagish__panel { position: absolute; inset-block-end: calc(100% + 12px); inset-inline-end: 0; width: min(340px, 88vw); max-height: 72vh; overflow-y: auto; background: var(--hb-cream); color: var(--hb-charcoal); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-5); opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .hb-nagish__panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .hb-nagish__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--sp-4); padding-block-end: var(--sp-3); border-block-end: 1px solid var(--surface-border); } .hb-nagish__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); } .hb-nagish__close { padding: 4px; color: var(--hb-charcoal); } .hb-nagish__close svg { width: 22px; height: 22px; } /* ---- Group + group title ---- */ .hb-nagish__group { margin-block-end: var(--sp-4); } .hb-nagish__group:last-child { margin-block-end: 0; } .hb-nagish__group-title { margin-block-end: var(--sp-2); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--hb-gold-deep); } /* ---- Stepper ---- */ .hb-nagish__stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--hb-white); border: 1px solid var(--surface-border); border-radius: var(--radius); padding: 4px; } .hb-nagish__step-btn { width: 42px; height: 38px; font-size: 22px; font-weight: var(--fw-bold); color: var(--hb-charcoal); border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease-out); } .hb-nagish__step-btn:hover { background: rgba(215,164,101,.2); } .hb-nagish__step-val { flex: 1; text-align: center; font-weight: var(--fw-bold); color: var(--hb-gold-deep); } /* ---- Pill toggles ---- */ .hb-nagish__toggles { display: flex; flex-direction: column; gap: 6px; } .hb-nagish__toggle { width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px; background: var(--hb-white); color: var(--hb-charcoal); border: 1px solid var(--surface-border); border-radius: var(--radius); font-size: var(--fs-small); font-weight: var(--fw-medium); text-align: start; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .hb-nagish__toggle:hover { border-color: var(--hb-gold); } .hb-nagish__toggle.is-on { background: var(--hb-gold); color: var(--hb-charcoal); border-color: var(--hb-gold); } .hb-nagish__toggle-icon { width: 22px; height: 22px; flex: 0 0 auto; } .hb-nagish__toggle-label { flex: 1; } .hb-nagish__toggle-pill { width: 32px; height: 18px; border-radius: var(--radius-pill); background: rgba(35,31,32,.18); position: relative; flex-shrink: 0; transition: background var(--dur-fast) var(--ease-out); } .hb-nagish__toggle-pill::before { content: ''; position: absolute; top: 2px; inset-inline-end: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: inset-inline-end var(--dur-fast) var(--ease-out); } .hb-nagish__toggle.is-on .hb-nagish__toggle-pill { background: rgba(35,31,32,.35); } .hb-nagish__toggle.is-on .hb-nagish__toggle-pill::before { inset-inline-end: calc(100% - 16px); } /* ---- Actions ---- */ .hb-nagish__actions { margin-block-start: var(--sp-3); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--surface-border); display: flex; flex-direction: column; gap: var(--sp-2); } .hb-nagish__reset { padding: 10px 14px; background: var(--hb-charcoal); color: var(--hb-cream); border-radius: var(--radius); font-weight: var(--fw-bold); transition: background var(--dur-fast) var(--ease-out); } .hb-nagish__reset:hover { background: var(--hb-ink-600); } .hb-nagish__statement { text-align: center; color: var(--hb-gold-deep); text-decoration: underline; font-size: var(--fs-small); font-weight: var(--fw-medium); padding: 6px; } @media (max-width: 560px) { .hb-nagish__trigger { width: 48px; height: 48px; } } @media (prefers-reduced-motion: reduce) { .hb-nagish__panel, .hb-nagish__trigger { transition: none; } } /* ============================== MODES ============================== */ /* Font scale — zoom each direct body child except the fixed widgets, + token bump. */ html[data-hb-fs="1"] body > *:not(.hb-nagish):not(.mk-float):not(.hb-consent):not(.hb-reading-guide) { zoom: 1.12; } html[data-hb-fs="2"] body > *:not(.hb-nagish):not(.mk-float):not(.hb-consent):not(.hb-reading-guide) { zoom: 1.24; } html[data-hb-fs="3"] body > *:not(.hb-nagish):not(.mk-float):not(.hb-consent):not(.hb-reading-guide) { zoom: 1.38; } /* בלי דריסת --fs-* כאן: ה-zoom למעלה כבר מגדיל את כל הסקאלה הנוזלית, * ודריסה נוספת הייתה מכפילה את ההגדלה. */ /* Word spacing */ html[data-hb-ws="1"] body *:not(.hb-nagish *):not(.mk-float):not(.hb-consent *) { word-spacing: .16em !important; } html[data-hb-ws="2"] body *:not(.hb-nagish *):not(.mk-float):not(.hb-consent *) { word-spacing: .32em !important; } html[data-hb-ws="3"] body *:not(.hb-nagish *):not(.mk-float):not(.hb-consent *) { word-spacing: .48em !important; } /* Letter spacing */ html[data-hb-ls="1"] body *:not(.hb-nagish *):not(.mk-float):not(.hb-consent *) { letter-spacing: .06em !important; } html[data-hb-ls="2"] body *:not(.hb-nagish *):not(.mk-float):not(.hb-consent *) { letter-spacing: .12em !important; } html[data-hb-ls="3"] body *:not(.hb-nagish *):not(.mk-float):not(.hb-consent *) { letter-spacing: .18em !important; } /* High contrast — yellow-on-black IL convention. Token override + body floor. */ html.hb-a11y--contrast { --hb-charcoal: #000; --hb-cream: #000; --hb-white: #000; --hb-ink-700: #000; --hb-ink-600: #000; --hb-gold: #ff0; --hb-gold-light: #ff6; --hb-gold-deep: #ff0; --surface-bg: #000; --surface-bg-alt: #000; --surface-text: #ff0; --surface-text-muted: #ff0; --surface-accent: #ff0; --surface-accent-2: #ff0; --surface-border: #ff0; } html.hb-a11y--contrast body { background: #000 !important; color: #ff0 !important; } html.hb-a11y--contrast body *:not(.hb-nagish):not(.hb-nagish *):not(.mk-float):not(.mk-float *):not(.hb-consent):not(.hb-consent *):not(button):not(button *):not(.mk-btn):not(.mk-btn *) { color: #ff0 !important; border-color: #ff0 !important; text-shadow: none !important; box-shadow: none !important; } html.hb-a11y--contrast body *:not(.hb-nagish):not(.hb-nagish *):not(.mk-float):not(.mk-float *):not(.hb-consent):not(.hb-consent *):not([class*="__thumb"]):not([class*="__media"]):not(picture):not(img):not(video):not(svg):not(button):not(.mk-btn) { background-color: transparent !important; background-image: none !important; } html.hb-a11y--contrast :is(button, .mk-btn):not(.hb-nagish *):not(.mk-float) { background: #ff0 !important; color: #000 !important; border: 2px solid #ff0 !important; } html.hb-a11y--contrast :is(button, .mk-btn):not(.hb-nagish *):not(.mk-float) * { color: #000 !important; fill: #000 !important; stroke: #000 !important; } html.hb-a11y--contrast a:not(.mk-btn):not(.hb-nagish *):not(.mk-float):not(.mk-logo) { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px !important; } html.hb-a11y--contrast :is(img, video, picture, svg):not(.hb-nagish *) { background: transparent !important; } /* Black & white (mono) */ html.hb-a11y--bw body > *:not(.hb-nagish):not(.mk-float):not(.hb-consent):not(.hb-reading-guide) { filter: grayscale(1) contrast(1.5); } html.hb-a11y--bw body { overflow-x: hidden !important; max-width: 100vw !important; } /* Invert */ html.hb-a11y--invert body { background: #fff !important; } html.hb-a11y--invert body > *:not(.hb-nagish):not(.mk-float):not(.hb-consent):not(.hb-reading-guide) { filter: invert(1) hue-rotate(180deg); } html.hb-a11y--invert body > :not(.hb-nagish):not(.mk-float):not(.hb-consent):not(.hb-reading-guide) :is(img, video, picture, iframe) { filter: invert(1) hue-rotate(180deg); } /* Grayscale */ html.hb-a11y--grayscale body > *:not(.hb-nagish):not(.mk-float):not(.hb-consent):not(.hb-reading-guide) { filter: grayscale(1); } /* Overflow safety net for filter modes (RTL) */ html:is(.hb-a11y--invert, .hb-a11y--grayscale) body { overflow-x: hidden !important; max-width: 100vw !important; } /* Highlight links */ html.hb-a11y--highlight-links a:not(.mk-btn):not(.skip-link):not(.mk-logo):not(.hb-nagish *):not(.mk-float):not(.hb-consent *) { text-decoration: underline !important; text-decoration-thickness: 3px !important; text-underline-offset: 3px !important; font-weight: 700 !important; background-color: #fff7c2 !important; color: #000 !important; padding: 1px 4px !important; border-radius: 3px !important; outline: 2px dashed var(--hb-gold-deep) !important; outline-offset: 2px !important; } /* Highlight headings */ html.hb-a11y--highlight-headings :is(h1, h2, h3, h4, h5, h6):not(.hb-nagish *) { outline: 2px solid var(--hb-gold) !important; outline-offset: 4px !important; background-color: rgba(215,164,101,.1) !important; padding: 6px 10px !important; border-radius: 4px !important; } /* Readable font (dyslexia-friendly system sans) */ html.hb-a11y--readable-font :is(body, h1, h2, h3, h4, h5, h6, p, li, span, a, button, input, textarea, label) { font-family: Arial, 'Arial Hebrew', 'David Libre', sans-serif !important; letter-spacing: .02em !important; word-spacing: .08em !important; line-height: 1.7 !important; } /* Hide images */ html.hb-a11y--hide-images :is(img, video, picture, iframe):not(.hb-nagish *):not(.mk-float *):not(.hb-consent *) { visibility: hidden !important; } /* Big cursor — dark + light variants */ html.hb-a11y--big-cursor-dark, html.hb-a11y--big-cursor-dark * { cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important; } html.hb-a11y--big-cursor-light, html.hb-a11y--big-cursor-light * { cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important; } /* Stop animations (CSS side; GSAP halted by nagish.js) */ html.hb-a11y--stop-anim *, html.hb-a11y--stop-anim *::before, html.hb-a11y--stop-anim *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.hb-a11y--stop-anim .hb-nagish__panel { transition: opacity var(--dur) ease, transform var(--dur) ease !important; } /* Reader — pointer hint + highlight the element being read */ html.hb-a11y--reader :is(p, h1, h2, h3, h4, h5, h6, li, a, button, span, td, th, label, blockquote, figcaption):not(.hb-nagish *) { cursor: pointer !important; } .hb-reader-active { outline: 3px solid var(--hb-gold) !important; outline-offset: 2px !important; background-color: rgba(215,164,101,.14) !important; border-radius: 3px; } /* Reading guide */ .hb-reading-guide { position: fixed; inset-inline: 0; top: 0; height: 44px; background: rgba(255,230,0,.28); border-block: 3px solid rgba(0,0,0,.55); pointer-events: none; z-index: var(--z-nagish); display: none; } html.hb-a11y--reading-guide .hb-reading-guide { display: block; } /* Panel stays legible under contrast/invert (counter-styled) */ html.hb-a11y--contrast .hb-nagish__panel { background: #000 !important; color: #ff0 !important; border: 2px solid #ff0; } html.hb-a11y--contrast .hb-nagish__toggle { background: #000 !important; color: #ff0 !important; border-color: #ff0 !important; } html.hb-a11y--contrast .hb-nagish__toggle.is-on { background: #ff0 !important; color: #000 !important; } html.hb-a11y--invert .hb-nagish { filter: invert(1) hue-rotate(180deg); } /* mrkey: reveal elements forced visible under stop-anim */ html.hb-a11y--stop-anim .mk-reveal { opacity: 1 !important; transform: none !important; }