/* Nagish accessibility widget. * Trigger sits bottom inline-end (opposite the floating actions). Contrast modes * apply filters to (root keeps position:fixed working); the widget is * counter-inverted under negative contrast so it stays usable. light-background * is body-level (bg on body/sections, not a filter) — the architecture that * avoids the contrast trap. */ /* ---- Trigger + panel ---- */ .hb-nagish { position: fixed; inset-block-end: clamp(16px, 4vw, 28px); inset-inline-end: clamp(16px, 4vw, 28px); z-index: var(--z-nagish); } .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); } .hb-nagish__panel { position: absolute; inset-block-end: calc(100% + 12px); inset-inline-end: 0; width: min(330px, 88vw); background: var(--hb-white); color: var(--hb-charcoal); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-5); opacity: 0; transform: translateY(10px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .hb-nagish__panel.is-open { opacity: 1; transform: translateY(0); } .hb-nagish__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--sp-4); } .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; } .hb-nagish__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .hb-nagish__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-3); border-radius: var(--radius); background: var(--hb-cream); color: var(--hb-charcoal); font-size: var(--fs-small); font-weight: var(--fw-medium); text-align: center; box-shadow: inset 0 0 0 1px var(--surface-border); transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .hb-nagish__btn svg { width: 26px; height: 26px; } .hb-nagish__btn:hover { background: var(--hb-gold-light); } .hb-nagish__btn[aria-pressed="true"] { background: var(--hb-charcoal); color: var(--hb-cream); box-shadow: inset 0 0 0 2px var(--hb-gold); } .hb-nagish__resize { display: flex; gap: var(--sp-2); } .hb-nagish__btn--sm { flex: 1; flex-direction: row; font-size: var(--fs-h4); font-weight: var(--fw-bold); padding: var(--sp-2); } .hb-nagish__foot { display: flex; align-items: center; justify-content: space-between; margin-block-start: var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--surface-border); } .hb-nagish__reset { font-weight: var(--fw-bold); color: var(--hb-gold-deep); } .hb-nagish__reset:hover { color: var(--hb-charcoal); } .hb-nagish__statement { font-size: var(--fs-small); color: var(--surface-text-muted); text-decoration: underline; } @media (max-width: 560px) { .hb-nagish__trigger { width: 48px; height: 48px; } } /* ---- Modes (classes on ) ---- */ html.hb-a11y-grayscale { filter: grayscale(1); } html.hb-a11y-high-contrast { filter: contrast(1.45); } html.hb-a11y-negative { filter: invert(1) hue-rotate(180deg); } /* grayscale + contrast combos (single filter property — must be compounded) */ html.hb-a11y-grayscale.hb-a11y-high-contrast { filter: grayscale(1) contrast(1.45); } html.hb-a11y-grayscale.hb-a11y-negative { filter: grayscale(1) invert(1) hue-rotate(180deg); } /* keep the widget readable under negative contrast */ html.hb-a11y-negative .hb-nagish { filter: invert(1) hue-rotate(180deg); } /* Light background — body-level, containers transparent (avoids filter trap) */ html.hb-a11y-light-bg body { background: #ffffff !important; color: #111111 !important; } html.hb-a11y-light-bg .hb-section, html.hb-a11y-light-bg .hb-header, html.hb-a11y-light-bg .hb-footer { background: #ffffff !important; color: #111111 !important; } html.hb-a11y-light-bg .hb-section--dark, html.hb-a11y-light-bg .hb-footer { --surface-text: #111111; --surface-text-muted: #333333; } /* Readable font */ html.hb-a11y-readable * { font-family: Arial, 'Arial Hebrew', 'David Libre', sans-serif !important; letter-spacing: .01em; } /* Underline links */ html.hb-a11y-underline a { text-decoration: underline !important; } /* Stop animations (CSS side; GSAP halts via the hb-stop-anim event) */ html.hb-a11y-stop-anim *, html.hb-a11y-stop-anim *::before, html.hb-a11y-stop-anim *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; scroll-behavior: auto !important; }