/* ========================================================================== Panteq Accessibility Widget — ported from the landing-page-builder React component. RTL, Hebrew-first. Brand color via --pq-ac-brand. ========================================================================== */ .lpb-ac-btn { position: fixed; bottom: 4%; inset-inline-start: 4%; /* RTL: visual RIGHT */ z-index: 90; width: 52px; height: 52px; border-radius: 999px; border: 0; background: var(--pq-ac-brand, #023373); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.14); cursor: pointer; transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1); } .admin-bar .lpb-ac-btn { bottom: calc(4% + 0px); } .lpb-ac-btn:hover { transform: scale(1.06); } .lpb-ac-btn:focus-visible { outline: 3px solid var(--pq-ac-brand, #023373); outline-offset: 3px; } .lpb-ac-panel { position: fixed; bottom: calc(4% + 68px); inset-inline-start: 4%; z-index: 91; width: min(320px, calc(100vw - 32px)); max-height: 72vh; overflow-y: auto; background: #fff; color: #0B1B33; border-radius: 18px; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.4); padding: 20px; display: flex; flex-direction: column; gap: 14px; direction: rtl; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.4; } .lpb-ac-panel[hidden] { display: none; } .lpb-ac-panel-head { display: flex; justify-content: space-between; align-items: center; } .lpb-ac-panel-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: #0B1B33; } .lpb-ac-close { width: 28px; height: 28px; border-radius: 999px; border: 0; background: rgba(11, 27, 51, 0.08); color: #0B1B33; font-size: 20px; line-height: 1; cursor: pointer; } .lpb-ac-close:hover { background: rgba(11, 27, 51, 0.14); } .lpb-ac-group { display: flex; flex-direction: column; gap: 8px; } .lpb-ac-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: rgba(11, 27, 51, 0.58); letter-spacing: 0.08em; } .lpb-ac-seg { display: inline-flex; gap: 4px; background: rgba(11, 27, 51, 0.06); padding: 4px; border-radius: 999px; } .lpb-ac-seg button { flex: 1; border: 0; background: transparent; color: #0B1B33; font-size: 13px; padding: 7px 10px; border-radius: 999px; cursor: pointer; font-weight: 600; transition: background 0.2s ease; } .lpb-ac-seg button:hover { background: rgba(11, 27, 51, 0.04); } .lpb-ac-seg button.on { background: var(--pq-ac-brand, #023373); color: #fff; } .lpb-ac-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; padding: 2px 0; } .lpb-ac-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pq-ac-brand, #023373); cursor: pointer; } .lpb-ac-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid rgba(11, 27, 51, 0.1); margin-top: 4px; } .lpb-ac-reset { border: 0; background: transparent; color: #0B1B33; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; } .lpb-ac-link { color: #0B1B33; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } .lpb-ac-link[hidden] { display: none; } @media (max-width: 420px) { .lpb-ac-panel { inset-inline-start: 16px; inset-inline-end: 16px; width: auto; bottom: 76px; } } /* ========================================================================== Global modifier classes toggled on by the widget. ========================================================================== */ /* High contrast — black bg, yellow text, thick borders */ html.lpb-ac-high, html.lpb-ac-high body { background: #000 !important; color: #fff !important; } html.lpb-ac-high * { background-image: none !important; text-shadow: none !important; box-shadow: none !important; } html.lpb-ac-high a, html.lpb-ac-high button, html.lpb-ac-high input, html.lpb-ac-high textarea, html.lpb-ac-high select { color: #FFEB3B !important; background: #000 !important; border: 1px solid #FFEB3B !important; } /* Invert colors — re-invert media so it keeps its native look */ html.lpb-ac-invert { filter: invert(1) hue-rotate(180deg); } html.lpb-ac-invert img, html.lpb-ac-invert video, html.lpb-ac-invert picture { filter: invert(1) hue-rotate(180deg); } /* Grayscale */ html.lpb-ac-grayscale { filter: grayscale(100%); } html.lpb-ac-grayscale.lpb-ac-invert { filter: grayscale(100%) invert(1) hue-rotate(180deg); } /* Underline all links */ html.lpb-ac-underline a { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; } /* Highlight keyboard focus ring */ html.lpb-ac-highlight-focus *:focus-visible { outline: 3px solid #FFEB3B !important; outline-offset: 2px !important; } /* Stop motion — kills animations and transitions */ html.lpb-ac-stop-motion *, html.lpb-ac-stop-motion *::before, html.lpb-ac-stop-motion *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }