/* JunglePet — Accessibility widget (IS 5568 / Regulation 35). UI styles + the a11y-* effect classes toggled on by a11y-widget.js. Comfort tool only: CSS classes, never content-DOM mutation. */ /* ===== Trigger button (bottom-start corner) ===== */ #jps-a11y-trigger { position: fixed; bottom: 18px; right: 18px; left: auto; z-index: 99990; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; background: #1f6e43; color: #fff; font-size: 1.55rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 22px -8px rgba(0,0,0,.5); display: grid; place-items: center; } #jps-a11y-trigger:hover { background: #155233; } #jps-a11y-trigger:focus-visible { outline: 3px solid #1f6e43; outline-offset: 3px; } /* ===== Panel ===== */ #jps-a11y-panel { position: fixed; bottom: 80px; right: 18px; left: auto; z-index: 99991; width: min(330px, calc(100vw - 36px)); background: #fff; color: #16271d; border: 1px solid #e2e8e4; border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); padding: 14px; direction: rtl; font-family: "Rubik", Arial, sans-serif; } #jps-a11y-panel[hidden] { display: none; } .jps-a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .jps-a11y-head h2 { margin: 0; font-size: 1.1rem; font-family: "Suez One", serif; font-weight: 400; } .jps-a11y-close { background: none; border: 0; font-size: 1.05rem; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; color: inherit; } .jps-a11y-close:hover { background: #f0f4f1; } .jps-a11y-close:focus-visible { outline: 3px solid #1f6e43; outline-offset: 2px; } .jps-a11y-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .jps-a11y-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 74px; padding: 10px 6px; text-align: center; border: 1px solid #e2e8e4; border-radius: 12px; background: #f7faf8; color: inherit; font: inherit; cursor: pointer; } .jps-a11y-btn:hover { border-color: #1f6e43; } .jps-a11y-btn:focus-visible { outline: 3px solid #1f6e43; outline-offset: 2px; } .jps-a11y-btn.is-active { background: #1f6e43; color: #fff; border-color: #1f6e43; } .jps-a11y-ic { font-size: 1.3rem; line-height: 1; } .jps-a11y-lbl { font-size: .8rem; } .jps-a11y-val { font-size: .72rem; opacity: .85; } .jps-a11y-reset { width: 100%; margin-top: 10px; padding: 10px; border: 0; border-radius: 10px; background: #eef2ef; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .jps-a11y-reset:hover { background: #e2e8e4; } .jps-a11y-reset:focus-visible { outline: 3px solid #1f6e43; outline-offset: 2px; } .jps-a11y-stmt { display: block; text-align: center; margin-top: 8px; font-size: .82rem; color: #1f6e43; } /* visually-hidden live region */ .jps-a11y-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ===== Effect classes applied to ===== */ /* Contrast (filters on the root) */ html.a11y-contrast-high { filter: contrast(1.35); } html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); } html.a11y-contrast-mono { filter: grayscale(1); } /* Counter-invert so the widget stays usable while a page filter is on */ html.a11y-contrast-invert #jps-a11y-trigger, html.a11y-contrast-invert #jps-a11y-panel { filter: invert(1) hue-rotate(180deg); } /* Text size — scales rem/em-based text */ 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 regardless of text scaling */ html[class*="a11y-text-"] #jps-a11y-trigger, html[class*="a11y-text-"] #jps-a11y-panel { font-size: 16px; } /* Line spacing */ html.a11y-lines-16 p, html.a11y-lines-16 li, html.a11y-lines-16 a, html.a11y-lines-16 span, html.a11y-lines-16 td, html.a11y-lines-16 div { line-height: 1.6 !important; } html.a11y-lines-20 p, html.a11y-lines-20 li, html.a11y-lines-20 a, html.a11y-lines-20 span, html.a11y-lines-20 td, html.a11y-lines-20 div { line-height: 2 !important; } /* Highlight links */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 2px; } /* Readable font (OS stack, no webfont reflow surprises) */ html.a11y-readable-font, html.a11y-readable-font * { font-family: Arial, "Segoe UI", "Helvetica Neue", sans-serif !important; } /* Highlight headings */ html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3, html.a11y-headings h4, html.a11y-headings h5, html.a11y-headings h6 { outline: 2px dashed #1f6e43 !important; outline-offset: 3px; } /* Stop animations */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-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;utf8,') 4 2, auto !important; } /* Print — drop all a11y visual modifiers + hide the widget */ @media print { html[class*="a11y-"] { filter: none !important; font-size: 100% !important; } #jps-a11y-trigger, #jps-a11y-panel { display: none !important; } }