/* ═══════════════════════════════════════════════════════════════════════ Accessibility widget (One Click Accessibility / pojo-a11y) themed to the Park Nahal Oren navy + gold premium aesthetic. Overrides plugin defaults. ═══════════════════════════════════════════════════════════════════════ */ /* ── Position the whole widget vertically centred on the left edge ── (the root

is position:fixed top:0; the toggle sits at its top, so offsetting the container by half the toggle height centres the button and makes the panel open from the middle — clear of the nav + mobile hamburger) */ /* id+class (1,1,0) so it beats the plugin's Customizer rule `#pojo-a11y-toolbar{top:100px!important}` (1,0,0). 50vh keeps the toggle mid-screen and degrades gracefully if an ancestor is ever filtered. */ #pojo-a11y-toolbar.pojo-a11y-toolbar-left { top: calc(50vh - 27px) !important; bottom: auto !important; transform: none !important; } /* ── FIX: grayscale mode applies `filter:grayscale()` to , which makes the containing block for position:fixed children → the fixed widget (and the site nav) resolve `top` against the whole document and shoot off-screen ("the plugin disappears"). Move the filter OFF onto its children EXCEPT the toolbar (the plugin already exempts the toolbar from every other mode). Now no shared ancestor is filtered, so fixed positioning keeps working; the page still greys, the toolbar stays put and on-brand. (Only grayscale uses a filter — high/negative-contrast + light-bg use bg/color.) */ body.pojo-a11y-grayscale { filter: none !important; -webkit-filter: none !important; } body.pojo-a11y-grayscale > *:not(#pojo-a11y-toolbar) { filter: grayscale(100%); -webkit-filter: grayscale(100%); } /* ── FIX: "increase text size" scales bare s site-wide, and the toolbar labels are span.pojo-a11y-toolbar-text (the plugin excludes its

title and

items but not the inner spans). Pin the widget's own text so it stays constant. #id beats the plugin's body-class selectors; icons are , untouched. */ #pojo-a11y-toolbar span { font-size: 12.8px !important; } #pojo-a11y-toolbar .pojo-a11y-toolbar-title { font-size: 16px !important; } /* ── Toggle tab — navy with gold icon ── */ .pojo-a11y-toolbar-toggle .pojo-a11y-toolbar-toggle-link { background-color: var(--primary) !important; color: var(--accent) !important; border: 1px solid rgba(200,169,110,0.45) !important; border-left: none !important; border-radius: 0 12px 12px 0 !important; width: 54px !important; height: 54px !important; line-height: 54px !important; box-shadow: 4px 6px 26px rgba(13,21,32,0.35) !important; transition: background-color .3s ease, color .3s ease !important; } .pojo-a11y-toolbar-toggle .pojo-a11y-toolbar-toggle-link:hover, .pojo-a11y-toolbar-toggle .pojo-a11y-toolbar-toggle-link:focus { background-color: var(--accent) !important; color: var(--primary) !important; } .pojo-a11y-toolbar-toggle .pojo-a11y-toolbar-icon, .pojo-a11y-toolbar-toggle .pojo-a11y-toolbar-toggle-link i, .pojo-a11y-toolbar-toggle .pojo-a11y-toolbar-toggle-link svg { color: inherit !important; fill: currentColor !important; } /* ── Panel ── */ .pojo-a11y-toolbar-overlay, .pojo-a11y-toolbar-inner { background: var(--primary) !important; font-family: 'Heebo', 'Assistant', sans-serif !important; } .pojo-a11y-toolbar-inner { border: 1px solid rgba(200,169,110,0.22) !important; border-left: none !important; border-radius: 0 14px 14px 0 !important; box-shadow: 8px 0 44px rgba(13,21,32,0.4) !important; max-height: 92vh; /* short-screen safety net */ overflow-y: auto; overflow-x: hidden; } /* Title */ .pojo-a11y-toolbar-title { color: var(--accent) !important; background: rgba(255,255,255,0.04) !important; border-bottom: 1px solid rgba(200,169,110,0.2) !important; font-weight: 700 !important; letter-spacing: .03em !important; margin: 0 !important; padding: 16px 20px !important; } /* Items */ .pojo-a11y-toolbar-items { margin: 0 !important; padding: 0 !important; } .pojo-a11y-toolbar-items .pojo-a11y-toolbar-link, .pojo-a11y-toolbar-items a { color: rgba(255,255,255,0.86) !important; background-color: transparent !important; border: none !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; font-weight: 400 !important; transition: background-color .25s ease, color .25s ease !important; } .pojo-a11y-toolbar-items .pojo-a11y-toolbar-link:hover, .pojo-a11y-toolbar-items .pojo-a11y-toolbar-link:focus, .pojo-a11y-toolbar-items a:hover, .pojo-a11y-toolbar-items a:focus { background-color: rgba(200,169,110,0.14) !important; color: var(--accent-light) !important; } /* Icons inside items */ .pojo-a11y-toolbar-items .pojo-a11y-toolbar-icon { color: var(--accent) !important; fill: currentColor !important; } .pojo-a11y-toolbar-items .pojo-a11y-toolbar-link:hover .pojo-a11y-toolbar-icon, .pojo-a11y-toolbar-items .pojo-a11y-toolbar-link:focus .pojo-a11y-toolbar-icon { color: var(--accent-light) !important; } /* Font-resize +/- buttons + background group buttons */ .pojo-a11y-btn-resize-plus, .pojo-a11y-btn-resize-minus, .pojo-a11y-btn-background-group .pojo-a11y-toolbar-link { background-color: rgba(255,255,255,0.04) !important; } /* Active (enabled) state — gold accent bar */ .pojo-a11y-toolbar-items .pojo-a11y-toolbar-link.active, .pojo-a11y-toolbar-items li.active .pojo-a11y-toolbar-link { background-color: rgba(200,169,110,0.18) !important; color: var(--accent-light) !important; box-shadow: inset 4px 0 0 var(--accent) !important; } /* Reset row reads as a subtle action */ .pojo-a11y-btn-reset .pojo-a11y-toolbar-link { color: rgba(255,255,255,0.6) !important; text-align: center; } .pojo-a11y-btn-reset .pojo-a11y-toolbar-link:hover { color: var(--accent-light) !important; }