/* =========================================================================
Accessibility Menu — Apollow-woocommerce theme (rlp.lk-style, in-house)
A full accessibility widget: profiles, content / colour / tool adjustments,
reading guide & mask. No external plugin. The button + panel are appended
to by the JS, so the zoom/filters applied to never touch them.
========================================================================= */
/* ----- Skip to content link (visible only on keyboard focus) ----------- */
.acc-skip-link {
position: absolute;
left: -9999px; top: 0;
z-index: 2147483647;
padding: 12px 20px;
background: #117dd4; color: #fff;
font: 600 16px/1.3 Arial, sans-serif;
text-decoration: none;
border-radius: 0 0 6px 0;
}
.acc-skip-link:focus { left: 0; outline: 3px solid #ffd400; outline-offset: 2px; }
/* ----- Floating toggle button ------------------------------------------ */
.acc-fab {
position: fixed;
right: 20px; top: 10%;
z-index: 2147483640;
width: 58px; height: 58px;
border: none; border-radius: 50%;
background: #117dd4; color: #fff;
cursor: pointer;
box-shadow: 0 4px 16px rgba(0,0,0,.32);
display: flex; align-items: center; justify-content: center;
transition: transform .2s ease, background .2s ease;
}
.acc-fab:hover { background: #0e63aa; transform: scale(1.06); }
.acc-fab:focus-visible, .acc-fab:focus { outline: 2px solid #ffffff; outline-offset: -4px; }
.acc-fab svg { width: 32px; height: 32px; fill: currentColor; }
/* ----- Panel (slides in from the left) --------------------------------- */
.acc-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
z-index: 2147483641;
width: 380px; max-width: 92vw;
background: #f4f6fb; color: #1a1a1a;
box-shadow: -4px 0 28px rgba(0,0,0,.28);
font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
display: flex; flex-direction: column;
transform: translateX(105%);
transition: transform .28s ease;
overscroll-behavior: contain;
}
.acc-panel.is-open { transform: translateX(0); }
/* Header */
.acc-head {
background: linear-gradient(135deg, #117dd4, #2563eb);
color: #fff; padding: 18px 18px 16px;
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
}
.acc-head__icon { width: 30px; height: 30px; fill: #fff; flex-shrink: 0; }
.acc-head__title { margin: 0; font-size: 18px; font-weight: 700; flex: 1; }
.acc-head__btn {
border: none; background: rgba(255,255,255,.16); color: #fff;
width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.acc-head__btn:hover { background: rgba(255,255,255,.3); }
.acc-head__btn:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }
/* Body (scroll area) */
.acc-body { padding: 14px; overflow-y: auto; flex: 1; }
/* Section */
.acc-sec { margin-bottom: 30px; }
.acc-sec__title {
margin: 0 0 10px; font-size: 12px; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase; color: #5a6472;
display: flex; align-items: center; gap: 7px;
}
.acc-sec__title i { color: #117dd4; font-size: 13px; }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Generic option card / toggle */
.acc-card {
border: 2px solid #afdbff; border-radius: 12px;
background: #fff; color: #1a2433;
padding: 12px 10px; cursor: pointer;
font: 600 13px/1.25 "Plus Jakarta Sans", Arial, sans-serif; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 6px;
transition: border-color .15s, background .15s, box-shadow .15s;
min-height: 76px; justify-content: center;
}
.acc-card:hover { border-color: #9fb3d6; background: #f3f7ff; }
.acc-card:focus-visible, .acc-card:focus { outline: 3px solid #008eff; outline-offset: 2px; }
.acc-card[aria-pressed="true"] {
border-color: #117dd4; background: #117dd4; color: #fff;
box-shadow: 0 4px 12px rgba(17,54,107,.3);
}
.acc-card__ico { font-size: 21px; line-height: 1; color: #117dd4; height: 22px; display: flex; align-items: center; }
.acc-card[aria-pressed="true"] .acc-card__ico { color: #fff; }
.acc-card--wide { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; text-align: left; min-height: 0; }
/* Stepper (text size, spacing…) */
.acc-step {
grid-column: 1 / -1;
border: 2px solid #d8deea; border-radius: 12px; background: #fff;
padding: 10px 12px;
}
.acc-step__row { display: flex; align-items: center; gap: 10px; }
.acc-step__label { flex: 1; font-weight: 700; font-size: 13px; color: #1a2433; }
.acc-step__btn {
width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
border: 2px solid #117dd4; background: #fff; color: #117dd4;
font-size: 18px; font-weight: 800; line-height: 1;
display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
}
.acc-step__btn:hover { background: #117dd4; color: #fff; }
.acc-step__btn:disabled { opacity: .35; cursor: not-allowed; }
.acc-step__btn:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }
.acc-step__dots { display: flex; gap: 4px; }
.acc-step__dot { width: 14px; height: 6px; border-radius: 3px; background: #d8deea; }
.acc-step__dot.on { background: #117dd4; }
/* Footer */
.acc-foot { padding: 12px 14px; border-top: 1px solid #e1e6f0; background: #fff; flex-shrink: 0; }
.acc-reset {
width: 100%; padding: 12px; border-radius: 10px; cursor: pointer;
border: 2px solid #d33; background: #fff; color: #d33; font: 700 14px "Plus Jakarta Sans", Arial, sans-serif;
}
.acc-reset:hover { background: #fdecec; }
.acc-reset:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }
.acc-statement { display: block; margin-top: 8px; text-align: center; font-size: 12px; color: #5a6472; }
/* =========================================================================
STATE CLASSES — applied to by accessibility.js
========================================================================= */
/* IMPORTANT: every content effect is scoped to the theme's .body-wrap
wrapper (it contains all visible content). The floating button + panel
are appended by the JS as a SIBLING of .body-wrap, so they are never
scaled, filtered, re-coloured or re-positioned by these rules. This is
what stops the menu jumping when contrast / grayscale is selected. */
/* Text size — zoom on .body-wrap (reliable for px-based themes) */
html.acc-fs-1 .body-wrap { zoom: 1.08 !important; }
html.acc-fs-2 .body-wrap { zoom: 1.18 !important; }
html.acc-fs-3 .body-wrap { zoom: 1.30 !important; }
html.acc-fs-4 .body-wrap { zoom: 1.45 !important; }
html.acc-fs-5 .body-wrap { zoom: 1.62 !important; }
/* Line height */
html.acc-lh-1 .body-wrap * { line-height: 1.6 !important; }
html.acc-lh-2 .body-wrap * { line-height: 2.0 !important; }
html.acc-lh-3 .body-wrap * { line-height: 2.5 !important; }
/* Letter spacing */
html.acc-ls-1 .body-wrap * { letter-spacing: .06em !important; }
html.acc-ls-2 .body-wrap * { letter-spacing: .12em !important; }
html.acc-ls-3 .body-wrap * { letter-spacing: .2em !important; }
/* Word spacing */
html.acc-ws-1 .body-wrap * { word-spacing: .16em !important; }
html.acc-ws-2 .body-wrap * { word-spacing: .32em !important; }
html.acc-ws-3 .body-wrap * { word-spacing: .6em !important; }
/* Fonts */
html.acc-dyslexia .body-wrap * { font-family: "Comic Sans MS", "Comic Neue", "OpenDyslexic", Arial, sans-serif !important; }
html.acc-readable .body-wrap * { font-family: Arial, Verdana, "Segoe UI", Tahoma, sans-serif !important; letter-spacing: .01em; }
html.acc-dyslexia .body-wrap [class^="fa-"], html.acc-dyslexia .body-wrap [class*=" fa-"],
html.acc-readable .body-wrap [class^="fa-"], html.acc-readable .body-wrap [class*=" fa-"] { font-family: inherit !important; }
/* Highlight titles / links */
html.acc-htitles .body-wrap :is(h1,h2,h3,h4,h5,h6) {
background: #fff5b0 !important; color: #1a1a1a !important;
outline: 2px solid #e0c200 !important; outline-offset: 1px;
}
html.acc-hlinks .body-wrap a {
text-decoration: underline !important; text-underline-offset: 2px;
outline: 2px solid #117dd4 !important; background: #fff3b0 !important; color: #0a2a5e !important;
}
/* Text align */
html.acc-align-left .body-wrap :is(p,li,h1,h2,h3,h4,h5,h6,td,span,div) { text-align: left !important; }
html.acc-align-center .body-wrap :is(p,li,h1,h2,h3,h4,h5,h6,td,span,div) { text-align: center !important; }
html.acc-align-right .body-wrap :is(p,li,h1,h2,h3,h4,h5,h6,td,span,div) { text-align: right !important; }
/* Colour + saturation are applied as ONE combined CSS filter on .body-wrap
by accessibility.js (so the two never clash, and no fixed-position
containing block is created on ). Here we only re-invert media
under Dark mode so photos still look natural. */
html.acc-c-dark .body-wrap img, html.acc-c-dark .body-wrap video, html.acc-c-dark .body-wrap iframe,
html.acc-c-dark .body-wrap canvas, html.acc-c-dark .body-wrap [style*="background-image"], html.acc-c-dark .body-wrap svg image {
filter: invert(100%) hue-rotate(180deg) !important;
}
/* This theme paints a dark page background on (#0a0e1a). We can't
filter (it would re-anchor the fixed toolbar), so for invert-based
modes we copy that backdrop onto .body-wrap and make it fill the viewport,
so the whole view inverts cleanly instead of leaving the un-inverted dark
showing through (which looked "full black"). */
html.acc-c-dark .body-wrap,
html.acc-c-invert .body-wrap {
background-color: #0a0e1a !important;
min-height: 100vh;
}
/* Stop animations */
html.acc-stopanim .body-wrap *, html.acc-stopanim .body-wrap *::before, html.acc-stopanim .body-wrap *::after {
animation-duration: .001s !important; animation-iteration-count: 1 !important;
transition-duration: .001s !important; scroll-behavior: auto !important;
}
/* Hide images */
html.acc-hideimg .body-wrap img, html.acc-hideimg .body-wrap picture,
html.acc-hideimg .body-wrap video, html.acc-hideimg .body-wrap svg:not(.acc-ui-svg) { opacity: 0 !important; }
html.acc-hideimg .body-wrap [style*="background-image"] { background-image: none !important; }
/* Highlight focus / hover */
html.acc-focus .body-wrap *:focus { outline: 3px solid #ffbf00 !important; outline-offset: 2px !important; }
html.acc-hover .body-wrap *:hover { outline: 2px dashed #117dd4 !important; }
/* Big cursors */
html.acc-cursor-white, html.acc-cursor-white * {
cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important;
}
html.acc-cursor-black, html.acc-cursor-black * {
cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important;
}
/* Reading guide (line that follows the cursor) */
.acc-guide-line {
position: fixed; left: 0; right: 0; height: 6px;
background: #117dd4; box-shadow: 0 0 0 1px rgba(255,255,255,.6);
pointer-events: none; z-index: 2147483630; top: 0; display: none;
}
/* Reading mask (dims everything except a horizontal strip) */
.acc-mask-strip {
position: fixed; left: 0; right: 0;
pointer-events: none; z-index: 2147483629;
box-shadow: 0 0 0 100vh rgba(0,0,0,.72);
height: 110px; top: 0; display: none;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.acc-panel, .acc-fab { transition: none !important; }
}
/* Mobile */
@media (max-width: 480px) {
.acc-panel { width: 100vw; max-width: 100vw; }
.acc-fab { width: 52px; height: 52px; }
}