/* =========================== Stafflancer's Accessibility Frontend (plugin-only) =========================== */ /* Skip link injected by JS */ /* Skip links (Menu / Content / Footer) */ .sl-skip-links{ position: absolute; top: 12px; left: 16px; z-index: 100000; display: flex; gap: 10px; } .sl-skip-link{ position: absolute; left: -9999px; top: 0; background: #fff; color: #111; padding: 14px 16px; border-radius: 999px; border: 2px solid rgba(59,130,246,.7); /* blue ring */ box-shadow: 0 10px 30px rgba(0,0,0,.18); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } /* Show when focused */ .sl-skip-link:focus{ position: relative; left: 0; outline: none; } /* "ENTER" badge */ .sl-skip-link::after{ content: "ENTER"; font-size: 12px; font-weight: 800; padding: 8px 12px; border-radius: 999px; background: #2563eb; color: #fff; letter-spacing: .5px; } /* Screen-reader only utility */ .sl-sr-only{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } /* Keyboard-only focus ring */ html:not(.sl-has-keyboard) :focus{ outline:none; } html.sl-has-keyboard a:focus, html.sl-has-keyboard button:focus, html.sl-has-keyboard input:focus, html.sl-has-keyboard select:focus, html.sl-has-keyboard textarea:focus, html.sl-has-keyboard [tabindex]:focus{ outline:none; box-shadow:0 0 0 4px var(--sl-a11y-focus-ring, rgba(106,77,255,.25)); border-radius:12px; } /* Focus-visible fallback (helps when browser doesn't trigger our keyboard detector immediately) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--sl-a11y-focus-ring, rgba(106,77,255,.25)); border-radius:12px; } /* Reduced motion (OS setting OR user toggle) */ @media (prefers-reduced-motion: reduce){ html:focus-within{ scroll-behavior:auto !important; } *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } html.sl-a11y-reduce-motion *, html.sl-a11y-reduce-motion *::before, html.sl-a11y-reduce-motion *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } html.sl-a11y-reduce-motion{ scroll-behavior: auto !important; } /* Accessibility modes */ html.sl-a11y-underline-links a{ text-decoration: underline !important; text-underline-offset: 3px; } html.sl-a11y-highlight-links a{ background: rgba(255, 235, 59, .35) !important; border-radius: 6px; padding: 0 2px; } html.sl-a11y-big-cursor, html.sl-a11y-big-cursor *{ cursor: url('data:image/svg+xml;utf8,') 6 2, auto !important; } /* Filters are applied via JS as a combined filter string on to avoid overrides */ html.sl-a11y-line-height body{ line-height: 1.75 !important; } html.sl-a11y-letter-spacing body{ letter-spacing: 0.06em !important; } /* Dyslexia-friendly font (best-effort, overrides Elementor per-element fonts) */ html.sl-a11y-dyslexia body, html.sl-a11y-dyslexia body *{ font-family: Verdana, Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important; } /* Widget wrapper */ .sl-a11y-widget{ position: fixed; z-index: var(--sl-a11y-widget-z, 9999); } /* Positions (set by JS classes on html) */ html.sl-a11y-pos-left_bottom .sl-a11y-widget{left:var(--sl-a11y-widget-side,22px);bottom:var(--sl-a11y-widget-vert,22px);} html.sl-a11y-pos-left_middle .sl-a11y-widget{left:var(--sl-a11y-widget-side,22px);top:50%;transform:translateY(-50%);} html.sl-a11y-pos-left_top .sl-a11y-widget{left:var(--sl-a11y-widget-side,22px);top:var(--sl-a11y-widget-vert,22px);} html.sl-a11y-pos-right_bottom .sl-a11y-widget{right:var(--sl-a11y-widget-side,22px);bottom:var(--sl-a11y-widget-vert,22px);} html.sl-a11y-pos-right_middle .sl-a11y-widget{right:var(--sl-a11y-widget-side,22px);top:50%;transform:translateY(-50%);} html.sl-a11y-pos-right_top .sl-a11y-widget{right:var(--sl-a11y-widget-side,22px);top:var(--sl-a11y-widget-vert,22px);} /* Trigger button */ .sl-a11y-trigger{ padding:0; border:0; border-radius: var(--sl-a11y-widget-radius, 16px); background: var(--sl-a11y-widget-bg, var(--sl-primary, #6A4DFF)); color: var(--sl-a11y-widget-icon, #fff); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 25px rgba(0,0,0,.12); } .sl-a11y-trigger:hover{ filter: brightness(.96); } .sl-a11y-icon{ width: 22px; height: 22px; display:block; } .sl-a11y-icon path{ fill: currentColor; } /* Panel */ .sl-a11y-panel{ /* Viewport-bounded panel (independent from trigger position) */ position: fixed; width: 440px; /* wider to fit statement link */ max-width: calc(100vw - 24px); background: var(--sl-a11y-panel-bg, #fff); color: var(--sl-a11y-panel-text, #0B0B0F); border:1px solid rgba(0,0,0,.10); border-radius: var(--sl-a11y-panel-radius, 18px); overflow: hidden; /* Layout is enabled only when panel is visible (see :not([hidden]) rule below) */ /* Always start from top area of the viewport */ top: calc(env(safe-area-inset-top, 0px) + 12px); bottom: auto; /* If content exceeds available space, scroll INSIDE the panel */ max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); } /* Only apply flex layout when panel is visible; prevents overriding the [hidden] attribute */ .sl-a11y-panel:not([hidden]){ display: flex; flex-direction: column; } .sl-a11y-panel[data-shadow="1"], :root{ /* placeholder */ } .sl-a11y-panel__head{ display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.06); /* Keep the header (and close icon) visible while scrolling */ position: sticky; top: 0; z-index: 2; background: var(--sl-a11y-panel-bg, #fff); } .sl-a11y-panel__title{ font-weight: 800; } .sl-a11y-close{ border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.75); width: 34px; height: 34px; display:inline-flex; align-items:center; justify-content:center; border-radius: 999px; font-size: 20px; line-height: 1; padding: 0; cursor: pointer; color: var(--sl-a11y-panel-text, #0B0B0F); font-weight: 700; } .sl-a11y-close:hover{ background: rgba(255,255,255,1); border-color: rgba(0,0,0,.18); } .sl-a11y-close:focus-visible{ outline: 2px solid rgba(106,77,255,.5); outline-offset: 2px; } /* Dark mode: ensure close icon stays visible */ html.sl-night .sl-a11y-close, body.sl-night .sl-a11y-close, html.dark .sl-a11y-close, body.dark .sl-a11y-close, html[data-theme="dark"] .sl-a11y-close, body[data-theme="dark"] .sl-a11y-close{ background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.25); color: var(--sl-a11y-panel-text, #fff); } html.sl-night .sl-a11y-close:hover, body.sl-night .sl-a11y-close:hover, html.dark .sl-a11y-close:hover, body.dark .sl-a11y-close:hover, html[data-theme="dark"] .sl-a11y-close:hover, body[data-theme="dark"] .sl-a11y-close:hover{ background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.35); } .sl-a11y-panel__body{ padding: 12px 14px 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Allow flex container to properly constrain scrolling area */ flex: 1 1 auto; min-height: 0; max-height: none; /* Prevent scroll chaining to the page (fixes “can’t scroll back to top” feel) */ overscroll-behavior: contain; touch-action: pan-y; } .sl-a11y-row{ display:flex; gap:10px; flex-wrap:wrap; } .sl-a11y-btn{ border:1px solid rgba(0,0,0,.12); background:#fff; color: inherit; padding: 10px 12px; border-radius: 12px; font-weight: 800; font-size: 13px; cursor:pointer; } .sl-a11y-btn:hover{ border-color: rgba(0,0,0,.18); } .sl-a11y-btn--ghost{ background: transparent; } .sl-a11y-btn--danger{ border-color: rgba(220,38,38,.25); color:#b91c1c; } .sl-a11y-toggles{ display:flex; flex-direction:column; gap:10px; margin-top: 12px; } .sl-a11y-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 10px 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; } .sl-a11y-toggle__label{ font-size: 13px; font-weight: 700; } .sl-a11y-toggle input{ position:absolute; opacity:0; pointer-events:none; } .sl-a11y-toggle__ui{ width: 42px; height: 24px; border-radius: 999px; /* OFF state uses a light version of primary so it's still on-brand and visible */ background: rgba(106,77,255,.20); position: relative; flex: 0 0 auto; transition: .2s; } .sl-a11y-toggle__ui::after{ content: ""; width: 18px; height: 18px; border-radius: 999px; background: #fff; position:absolute; top:3px; left:3px; transition: .2s; } /* Always use primary (blue/purple) for active state so it's visible even if widget bg is white */ .sl-a11y-toggle input:checked + .sl-a11y-toggle__ui{ background: var(--sl-primary, #6A4DFF); } .sl-a11y-toggle input:checked + .sl-a11y-toggle__ui::after{ transform: translateX(18px); } /* Toast messages */ .sl-a11y-toast{ position: fixed; left: 18px; bottom: 18px; z-index: 1000000; background: rgba(11,11,15,.92); color: #fff; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.3; box-shadow: 0 12px 30px rgba(0,0,0,.18); opacity: 0; transform: translateY(10px); transition: .18s ease; max-width: min(320px, calc(100vw - 36px)); } .sl-a11y-toast.sl-a11y-toast--show{ opacity: 1; transform: translateY(0); } /* If the widget is on the left-bottom, move toast slightly up to avoid overlap */ html.sl-a11y-pos-left_bottom .sl-a11y-toast{ bottom: 86px; } html.sl-a11y-pos-right_bottom .sl-a11y-toast{ bottom: 86px; } /* Reading ruler & mask overlays (created by JS) */ /* Reading ruler overlay (visible + robust positioning) Note: also adds .sl-a11y-rule alias for easier debugging */ .sl-a11y-reading-ruler, .sl-a11y-rule{ position: fixed; left: 0; right: 0; top: -9999px; /* hidden until enabled */ height: 56px; border-top: 2px solid rgba(106,77,255,.70); border-bottom: 2px solid rgba(106,77,255,.70); background: rgba(106,77,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.12); z-index: 999999; pointer-events: none; transform: translateY(-50%); } .sl-a11y-mask-top, .sl-a11y-mask-bottom{ position: fixed; left: 0; right: 0; background: rgba(0,0,0,.45); z-index: 999998; pointer-events: none; } .sl-a11y-mask-top{ top: 0; height: 0; } .sl-a11y-mask-bottom{ bottom: 0; height: 0; } /* Toast messages */ .sl-a11y-toast{ position: fixed; left: 16px; bottom: 16px; z-index: 1000000; max-width: min(360px, calc(100vw - 32px)); background: rgba(11,11,15,.95); color: #fff; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.3; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; } .sl-a11y-toast.is-show{ opacity: 1; transform: translateY(0); } /* Footer statement link (optional) */ .sl-a11y-footer-link{ text-align:center; padding: 10px 0 20px; font-size: 13px; } .sl-a11y-footer-link a{ text-decoration: underline; text-underline-offset: 3px; } /* Panel responsiveness */ @media (max-width: 768px){ .sl-a11y-panel{ left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; } } @media (max-width: 1024px) and (orientation: landscape){ .sl-a11y-panel{ max-height: calc(100vh - 20px); } } @media (max-width: 520px){ /* Mobile: keep header LEFT-aligned, keep close button clearly visible */ .sl-a11y-panel__head{ justify-content: flex-start; text-align: left; padding-right: 62px; /* room for the close button */ } .sl-a11y-panel__title{ text-align: left; } .sl-a11y-close{ position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; font-size: 26px; background: #fff; border-color: rgba(0,0,0,.18); } } /* =========================== Hide Lead Forms floating CTA while Accessibility is open (Controlled by Accessibility settings) Targets: .slf-float (Stafflancer Lead Forms) =========================== */ @media (max-width: 767px){ body.sl-a11y-open.sl-a11y-hide-cta-mobile .slf-float{ display:none !important; } } @media (min-width: 768px) and (max-width: 1024px){ body.sl-a11y-open.sl-a11y-hide-cta-tablet .slf-float{ display:none !important; } } @media (min-width: 1025px){ body.sl-a11y-open.sl-a11y-hide-cta-desktop .slf-float{ display:none !important; } } /* Ensure A-/A+/Reset keep black text (especially in dark mode) */ .sl-a11y-btn[data-a11y-action="text_minus"], .sl-a11y-btn[data-a11y-action="text_plus"], .sl-a11y-btn[data-a11y-action="text_reset"], .sl-a11y-btn.slc-keep-black{ color:#000 !important; } /* Mobile browsers: prefer dynamic viewport height for scrollable panel */ @supports (height: 100dvh){ .sl-a11y-panel{ max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); } } /* Dark mode: make Reset all button black */ html.sl-night .sl-a11y-btn--danger, body.sl-night .sl-a11y-btn--danger, html.dark .sl-a11y-btn--danger, body.dark .sl-a11y-btn--danger, html[data-theme="dark"] .sl-a11y-btn--danger, body[data-theme="dark"] .sl-a11y-btn--danger{ background:#000; border-color:#000; color:#fff; } /* Statement link: make it look like a pill button and keep it aligned in the A-/A+/Reset row */ .sl-a11y-statement{ text-decoration: none; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* Reset all: keep text black in light + dark */ .sl-a11y-btn--danger{ color:#000 !important; background:#fff !important; } html.sl-night .sl-a11y-btn--danger, body.sl-night .sl-a11y-btn--danger, html.dark .sl-a11y-btn--danger, body.dark .sl-a11y-btn--danger, html[data-theme="dark"] .sl-a11y-btn--danger, body[data-theme="dark"] .sl-a11y-btn--danger{ color:#000 !important; background:#fff !important; } /* Keep the top control row on a single line (A-, A+, Reset, Statement) */ .sl-a11y-row{ flex-wrap: nowrap; gap: 8px; } .sl-a11y-row > .sl-a11y-btn, .sl-a11y-row > .sl-a11y-statement{ white-space: nowrap; } @media (max-width: 420px){ /* On very small screens, allow horizontal scroll instead of wrapping */ .sl-a11y-row{ overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Reset all: force black in dark mode using slc-keep-black */ html.sl-night .sl-a11y-btn--danger.slc-keep-black, body.sl-night .sl-a11y-btn--danger.slc-keep-black, html.dark .sl-a11y-btn--danger.slc-keep-black, body.dark .sl-a11y-btn--danger.slc-keep-black, html[data-theme="dark"] .sl-a11y-btn--danger.slc-keep-black, body[data-theme="dark"] .sl-a11y-btn--danger.slc-keep-black{ background:#000 !important; border-color:#000 !important; color:#fff !important; } /* Reset all button: bigger + bordered + bold (and keep mobile scroll comfortable) */ .sl-a11y-row--resetall .sl-a11y-btn--danger{ width: 100%; justify-content: center; border: 1px solid #000 !important; font-size: 15px; font-weight: 800; padding-top: 10px; padding-bottom: 10px; border-radius: 14px; } /* Give a little extra bottom space so Reset all is reachable on mobile */ .sl-a11y-panel__body{ padding-bottom: 26px; } /* Mobile: add breathing room between the top action row (incl. statement) and the scroller */ @media (max-width: 768px){ .sl-a11y-panel__body{ padding-top: 16px; } .sl-a11y-row{ margin-bottom: 10px; } } /* Mobile (300-400px): push the horizontal scroller (row) down slightly so the scrollbar line is not hugging the buttons */ @media (max-width: 400px){ .sl-a11y-row{ padding-bottom: 10px; } } /* Optional backdrop overlay behind the panel */ .sl-a11y-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: calc(var(--sl-a11y-widget-z, 9999) - 1); }