/* ============================================================
Travel by Galy — Accessibility Widget
============================================================
Floating button (bottom-left in RTL) + slide-out tools panel.
All toggles work by adding classes to , persisted to
localStorage. Implements common Israeli a11y widget features
per IS 5568 / WCAG 2.0 AA best practice. */
/* ----- The floating launch button ----- */
.a11y-launch {
position: fixed !important;
bottom: 20px;
left: 20px;
z-index: 99999 !important; /* very high so nothing in the host page can cover it */
width: 52px;
height: 52px;
border-radius: 50%;
background: #898AC4;
color: #fff;
border: 2px solid #fff;
box-shadow: 0 6px 20px rgba(26,27,46,.35);
cursor: pointer;
display: flex !important;
align-items: center;
justify-content: center;
visibility: visible !important;
opacity: 1 !important;
transition: transform .2s ease, background .2s ease;
-webkit-appearance: none;
appearance: none;
}
/* When the survey is in "onboard" mode, a sticky continue-button bar sits at bottom:0
across the full width (~90px tall). Lift the accessibility button well clear of it.
Using calc(env(safe-area-inset-bottom)) so the button also clears the iOS home indicator. */
html body.onboard .a11y-launch {
bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 480px) {
html body.onboard .a11y-launch {
bottom: calc(105px + env(safe-area-inset-bottom, 0px)) !important;
}
}
.a11y-launch:hover { background: #6B6FAB; transform: scale(1.05); }
.a11y-launch:focus { outline: 3px solid #FBBF24; outline-offset: 3px; }
.a11y-launch svg {
width: 32px !important;
height: 32px !important;
fill: #ffffff !important;
display: block !important;
}
.a11y-launch svg * {
fill: #ffffff !important; /* belt-and-suspenders: force every inner shape to white */
}
/* When the panel is open, hide the launch button */
.a11y-open .a11y-launch { display: none; }
/* ----- The slide-out panel ----- */
.a11y-panel {
position: fixed;
bottom: 0;
left: 0;
top: 0;
width: 340px;
max-width: 90vw;
background: #fff;
z-index: 9999;
box-shadow: 4px 0 32px rgba(26,27,46,.25);
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform .35s cubic-bezier(.4, 0, .2, 1);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Heebo', 'Assistant', 'Rubik', Arial, system-ui, sans-serif;
direction: rtl;
text-align: right;
color: #1A1B2E;
}
.a11y-open .a11y-panel { transform: translateX(0); }
.a11y-panel-header {
background: #EEF0F9;
padding: 18px 20px;
border-bottom: 1px solid #D8DCEC;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
}
.a11y-panel-header h2 {
margin: 0;
font-family: 'Frank Ruhl Libre', 'David Libre', Georgia, serif;
font-size: 20px;
font-weight: 700;
color: #1A1B2E;
}
.a11y-panel-close {
background: #fff;
border: 1px solid #D8DCEC;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
font-size: 22px;
line-height: 1;
color: #1A1B2E;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, border-color .15s;
}
.a11y-panel-close:hover { background: #EEF0F9; border-color: #898AC4; }
.a11y-panel-close:focus { outline: 3px solid #898AC4; outline-offset: 2px; }
.a11y-panel-body {
padding: 18px 20px;
overflow-y: auto;
flex: 1;
}
/* ----- Section groupings inside the panel ----- */
.a11y-section { margin-bottom: 22px; }
.a11y-section-title {
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #7E83A6;
margin: 0 0 10px;
}
/* ----- Individual toggle button ----- */
.a11y-tool-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.a11y-tool {
background: #fff;
border: 1.5px solid #D8DCEC;
border-radius: 10px;
padding: 14px 10px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: #1A1B2E;
text-align: center;
transition: background .15s, border-color .15s, transform .15s;
min-height: 78px;
-webkit-appearance: none;
appearance: none;
}
.a11y-tool .ico {
font-size: 22px;
line-height: 1;
}
.a11y-tool:hover {
background: #EEF0F9;
border-color: #A2AADB;
}
.a11y-tool:focus { outline: 3px solid #898AC4; outline-offset: 2px; }
.a11y-tool.is-active {
background: #898AC4;
border-color: #898AC4;
color: #fff;
}
.a11y-tool.is-active:hover { background: #6B6FAB; border-color: #6B6FAB; }
/* ----- Action row (reset + statement link) ----- */
.a11y-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
.a11y-btn {
flex: 1;
padding: 12px 14px;
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
text-align: center;
border: 1.5px solid transparent;
display: flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
}
.a11y-btn-reset {
background: #fff;
border-color: #D8DCEC;
color: #1A1B2E;
}
.a11y-btn-reset:hover { background: #EEF0F9; border-color: #898AC4; }
.a11y-btn-statement {
background: #898AC4;
color: #fff;
}
.a11y-btn-statement:hover { background: #6B6FAB; }
.a11y-btn:focus { outline: 3px solid #898AC4; outline-offset: 2px; }
/* ----- Overlay behind panel on mobile ----- */
.a11y-overlay {
position: fixed;
inset: 0;
background: rgba(26,27,46,.45);
z-index: 9997;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.a11y-open .a11y-overlay { opacity: 1; pointer-events: auto; }
/* ============================================================
ACCESSIBILITY MODIFIER CLASSES
These are applied to when the user toggles a tool.
They override the page's own styles using high specificity
and !important so they win over inline/themed CSS.
============================================================ */
/* --- Font size steps --- */
html.a11y-font-large { font-size: 112.5% !important; }
html.a11y-font-larger { font-size: 125% !important; }
html.a11y-font-largest { font-size: 140% !important; }
html.a11y-font-small { font-size: 87.5% !important; }
/* --- Increased letter / line spacing --- */
html.a11y-spacing *,
html.a11y-spacing *::before,
html.a11y-spacing *::after {
letter-spacing: 0.08em !important;
word-spacing: 0.2em !important;
line-height: 1.85 !important;
}
/* --- High-contrast (yellow on black) --- */
html.a11y-high-contrast,
html.a11y-high-contrast body {
background: #000 !important;
color: #FFEB3B !important;
}
html.a11y-high-contrast *,
html.a11y-high-contrast *::before,
html.a11y-high-contrast *::after {
background-color: #000 !important;
color: #FFEB3B !important;
border-color: #FFEB3B !important;
text-shadow: none !important;
box-shadow: none !important;
}
html.a11y-high-contrast a,
html.a11y-high-contrast a * { color: #00FFFF !important; text-decoration: underline !important; }
html.a11y-high-contrast button,
html.a11y-high-contrast input,
html.a11y-high-contrast textarea {
background: #000 !important; color: #FFEB3B !important; border: 2px solid #FFEB3B !important;
}
/* Don't touch the a11y panel itself in high-contrast mode (so users can still see the controls) */
html.a11y-high-contrast .a11y-panel,
html.a11y-high-contrast .a11y-panel *,
html.a11y-high-contrast .a11y-launch,
html.a11y-high-contrast .a11y-overlay { all: revert; }
/* --- Negative (invert all colors) --- */
html.a11y-negative {
filter: invert(100%) hue-rotate(180deg) !important;
background: #fff !important;
}
html.a11y-negative img,
html.a11y-negative video,
html.a11y-negative picture,
html.a11y-negative svg,
html.a11y-negative iframe {
filter: invert(100%) hue-rotate(180deg) !important;
}
/* --- Grayscale (black + white only) --- */
html.a11y-grayscale {
filter: grayscale(100%) !important;
}
/* --- Highlight links (yellow box around every link) --- */
html.a11y-highlight-links a,
html.a11y-highlight-links a * {
background-color: #FFEB3B !important;
color: #1A1B2E !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
outline: 2px solid #1A1B2E !important;
outline-offset: 1px !important;
}
/* --- Readable font (replace serif/decorative fonts with Arial) --- */
html.a11y-readable-font *,
html.a11y-readable-font *::before,
html.a11y-readable-font *::after {
font-family: Arial, 'Heebo', 'Assistant', sans-serif !important;
}
/* --- Larger cursor --- */
html.a11y-big-cursor,
html.a11y-big-cursor * {
cursor: url("data:image/svg+xml;utf8,") 0 0, auto !important;
}
html.a11y-big-cursor a,
html.a11y-big-cursor button,
html.a11y-big-cursor input,
html.a11y-big-cursor textarea,
html.a11y-big-cursor label {
cursor: url("data:image/svg+xml;utf8,") 24 24, pointer !important;
}
/* --- Stop animations / freeze motion --- */
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
animation-play-state: paused !important;
animation-duration: 0s !important;
animation-iteration-count: 1 !important;
transition: none !important;
scroll-behavior: auto !important;
}
html.a11y-no-motion video,
html.a11y-no-motion .slide { animation: none !important; }
/* --- Skip-to-content link (used on index.html and survey.html too) --- */
.skip-link {
position: absolute;
top: -50px; right: 0;
background: #1A1B2E; color: #fff;
padding: 10px 18px;
text-decoration: none;
font-weight: 700;
border-radius: 0 0 8px 0;
z-index: 10000;
font-family: inherit;
font-size: 14px;
transition: top .15s ease;
}
.skip-link:focus { top: 0; outline: 3px solid #FBBF24; outline-offset: 2px; }
/* ----- Mobile tuning ----- */
@media (max-width: 480px) {
.a11y-launch { width: 48px; height: 48px; bottom: 16px; left: 16px; }
.a11y-launch svg { width: 28px !important; height: 28px !important; }
.a11y-panel { width: 100%; max-width: 100vw; }
}