/* Custom accessibility dropdown — replacement for accessibility-onetap plugin.
Triggered by the existing .js-a11y-btn link in header (desktop + mobile),
positioned via JS (position:fixed) under whichever trigger was clicked.
Visual style matches .header__lang-list (rounded card with golden glow). */
/* ── Panel ── */
.ct-a11y-panel {
position: fixed;
z-index: 1200;
width: 320px;
max-width: calc(100vw - 24px);
max-height: calc(100vh - 100px);
overflow-y: auto;
background: #FFFFFF;
border-radius: 16px;
box-shadow: 0 0 24px 0 rgba(187, 185, 118, 0.30);
padding: 18px 18px 14px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px;
line-height: 1.4;
color: #121212;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.ct-a11y-panel.is-open {
opacity: 1;
visibility: visible;
}
.ct-a11y-panel h2 {
font-size: 15px;
font-weight: 600;
margin: 0 0 14px;
color: #121212;
}
.ct-a11y-panel fieldset {
border: 0;
padding: 0;
margin: 0 0 12px;
}
.ct-a11y-panel legend {
font-weight: 500;
margin-bottom: 6px;
padding: 0;
color: #7D7D7D;
font-size: 12px;
letter-spacing: 0.01em;
}
.ct-a11y-panel__group {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.ct-a11y-panel button {
padding: 6px 12px;
border: 1px solid #ABAFA4;
background: #FFFFFF;
color: #121212;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
line-height: 1.2;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ct-a11y-panel button:hover {
background: #F1EFD9;
border-color: #ACA860;
}
.ct-a11y-panel button[aria-pressed="true"] {
background: #ACA860;
border-color: #ACA860;
color: #FFFFFF;
}
.ct-a11y-panel__reset {
margin-top: 6px;
width: 100%;
padding: 10px !important;
background: #F1EFD9 !important;
color: #121212 !important;
border-color: #ABAFA4 !important;
font-weight: 500 !important;
}
.ct-a11y-panel__reset:hover {
background: #E6E4B9 !important;
}
/* Active-trigger highlight (mirrors lang dropdown) */
.js-a11y-btn[aria-expanded="true"] svg,
.js-a11y-btn[aria-expanded="true"] span {
color: #ACA860 !important;
fill: #ACA860 !important;
}
/* Mobile — full-width bottom sheet */
@media (max-width: 767px) {
.ct-a11y-panel {
left: 12px !important;
right: 12px !important;
top: auto !important;
bottom: 12px !important;
width: auto !important;
max-width: none;
}
}
/* ================================================================ */
/* Active modes — applied via classes on */
/* ================================================================ */
/* Font-size via zoom — scales the whole layout proportionally, so
header items don't shift while body grows. Supported in all evergreens. */
html.ct-a11y-font-110 { zoom: 1.10; }
html.ct-a11y-font-125 { zoom: 1.25; }
html.ct-a11y-font-150 { zoom: 1.50; }
/* Bold everywhere — exclude the panel itself so its UI stays clean */
html.ct-a11y-bold body :not(.ct-a11y-panel):not(.ct-a11y-panel *) {
font-weight: 700 !important;
}
/* Line height */
html.ct-a11y-lineheight-150 body :not(.ct-a11y-panel):not(.ct-a11y-panel *) {
line-height: 1.5 !important;
}
html.ct-a11y-lineheight-200 body :not(.ct-a11y-panel):not(.ct-a11y-panel *) {
line-height: 2 !important;
}
/* Letter spacing */
html.ct-a11y-letter-1 body :not(.ct-a11y-panel):not(.ct-a11y-panel *) {
letter-spacing: 0.05em !important;
}
html.ct-a11y-letter-2 body :not(.ct-a11y-panel):not(.ct-a11y-panel *) {
letter-spacing: 0.1em !important;
}
/* High contrast: yellow on black, cyan links */
html.ct-a11y-contrast,
html.ct-a11y-contrast body { background: #000 !important; color: #FFFF00 !important; }
html.ct-a11y-contrast *:not(.ct-a11y-panel):not(.ct-a11y-panel *) {
background-color: #000 !important;
color: #FFFF00 !important;
border-color: #FFFF00 !important;
box-shadow: none !important;
}
html.ct-a11y-contrast a:not(.ct-a11y-panel *) {
color: #00FFFF !important;
text-decoration: underline !important;
}
html.ct-a11y-contrast img,
html.ct-a11y-contrast svg:not(.ct-a11y-panel *) {
filter: grayscale(1) brightness(1.5);
}
/* Inverted (dark mode for a site without one) */
html.ct-a11y-invert {
filter: invert(1) hue-rotate(180deg);
background: #FFFFFF;
}
html.ct-a11y-invert img,
html.ct-a11y-invert video,
html.ct-a11y-invert iframe {
filter: invert(1) hue-rotate(180deg);
}
/* Underline links */
html.ct-a11y-underline a {
text-decoration: underline !important;
}
/* Big cursor */
html.ct-a11y-cursor,
html.ct-a11y-cursor * {
cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important;
}
html.ct-a11y-cursor a,
html.ct-a11y-cursor button,
html.ct-a11y-cursor a *,
html.ct-a11y-cursor button * {
cursor: url("data:image/svg+xml;utf8,") 4 4, pointer !important;
}
/* Reduced motion */
html.ct-a11y-no-motion *,
html.ct-a11y-no-motion *::before,
html.ct-a11y-no-motion *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}