/* ========================================================================== AIclinics Accessibility Panel Fixed side panel with toggle options for font, contrast, grayscale, etc. ========================================================================== */ /* --- Panel Container --- */ .a11y-panel { position: fixed; right: -320px; top: 50%; transform: translateY(-50%); z-index: 99999; width: 290px; max-height: 80vh; overflow-y: auto; background: var(--bg); box-shadow: -4px 0 24px rgba(0,0,0,.14); border-radius: var(--radius) 0 0 var(--radius); padding: 24px 20px; transition: right .35s cubic-bezier(.4,0,.2,1); } .a11y-panel.active { right: 0; } /* --- Panel Header --- */ .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .a11y-panel__title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; } .a11y-panel__close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: var(--bg-alt); color: var(--text-light); font-size: 20px; line-height: 1; border-radius: 50%; cursor: pointer; transition: background .2s, color .2s; padding: 0; } .a11y-panel__close:hover { background: var(--border); color: var(--text); } /* --- Option Buttons --- */ .a11y-panel__options { display: flex; flex-direction: column; gap: 8px; } .a11y-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; transition: background .2s, border-color .2s, color .2s; text-align: left; } .a11y-option:hover { background: var(--bg-alt); border-color: var(--primary-color); } .a11y-option:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } .a11y-option.active { background: rgba(9,202,143,.08); border-color: var(--primary-color); color: var(--primary-color); } .a11y-option__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 6px; background: var(--bg-alt); font-size: 16px; transition: background .2s; } .a11y-option.active .a11y-option__icon { background: rgba(9,202,143,.15); } .a11y-option__label { flex: 1; line-height: 1.3; } .a11y-option__label small { display: block; font-size: 11px; font-weight: 400; color: var(--text-light); margin-top: 2px; } /* --- Status Indicator --- */ .a11y-option__status { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--border); border-radius: 4px; position: relative; transition: border-color .2s, background .2s; } .a11y-option.active .a11y-option__status { border-color: var(--primary-color); background: var(--primary-color); } .a11y-option.active .a11y-option__status::after { content: ''; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* --- Reset Button --- */ .a11y-panel__reset { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 16px; padding: 10px; border: 1px dashed var(--border); border-radius: var(--radius); background: transparent; font-size: 13px; font-weight: 600; color: var(--text-light); cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .a11y-panel__reset:hover { background: var(--bg-alt); color: var(--text); border-color: var(--text-light); } /* ========================================================================== A11Y CSS CLASSES (applied on ) Duplicated from components.css for standalone loading ========================================================================== */ html.a11y-large-font { font-size: 120%; } html.a11y-large-font h1 { font-size: 2.2rem; } html.a11y-large-font h2 { font-size: 1.8rem; } html.a11y-large-font h3 { font-size: 1.5rem; } html.a11y-high-contrast { filter: contrast(1.4); } html.a11y-high-contrast body { background: #000; color: #fff; } html.a11y-high-contrast a { color: #ff0; } html.a11y-high-contrast .btn-primary, html.a11y-high-contrast .promo-btn, html.a11y-high-contrast .sale-teaser__cta { background: #ff0; color: #000; } html.a11y-high-contrast .site-footer { background: #000; border-top: 2px solid #fff; } html.a11y-grayscale { filter: grayscale(1); } html.a11y-line-height { line-height: 2; } html.a11y-line-height p, html.a11y-line-height li, html.a11y-line-height td { line-height: 2.2; } html.a11y-letter-spacing { letter-spacing: 0.08em; } html.a11y-letter-spacing p, html.a11y-letter-spacing li, html.a11y-letter-spacing td, html.a11y-letter-spacing span { letter-spacing: 0.1em; } /* --- Trigger Button (hidden - moved to footer and mobile menu) --- */ .a11y-trigger { display: none; } /* --- Inline trigger (footer / menu) --- */ .a11y-trigger-inline { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: none; border-radius: 0; background: transparent; color: #6b7280; font-size: 11px; font-family: var(--font, 'Nunito', sans-serif); cursor: pointer; transition: color .2s; } .a11y-trigger-inline:hover { color: var(--primary-color, #09CA8F); } .a11y-trigger-inline svg { width: 14px; height: 14px; flex-shrink: 0; } /* --- Mobile menu trigger variant --- */ .a11y-trigger-menu { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 24px; border: none; background: transparent; color: var(--text-light, #6B7280); font-size: 13px; font-family: var(--font, 'Nunito', sans-serif); font-weight: 500; cursor: pointer; margin-top: 8px; transition: background .2s; } .a11y-trigger-menu:hover { background: var(--bg-alt, #FAFAFA); } .a11y-trigger-menu svg { width: 20px; height: 20px; color: var(--primary-color, #09CA8F); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 599px) { .a11y-panel { width: 260px; padding: 20px 16px; } .a11y-option { padding: 10px 12px; font-size: 13px; } .a11y-option__icon { width: 28px; height: 28px; font-size: 14px; } } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .a11y-panel { transition-duration: 0.01ms !important; } }