/* ========================================================= A11y — Версия для слабовидящих (ГОСТ Р 52872-2019 / WCAG) ========================================================= */ /* -------- Toggle button (sticky, top-right) -------- */ .a11y-toggle-btn { position: fixed; top: 120px; right: 16px; z-index: 9000; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; min-height: 44px; border-radius: 24px; border: 1px solid #1a365d; background: #fff; color: #1a365d; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: background 0.15s, color 0.15s; } .a11y-toggle-btn:hover, .a11y-toggle-btn--active { background: #1a365d; color: #fff; } .a11y-toggle-btn svg { width: 20px; height: 20px; } .a11y-toggle-btn__label { display: inline-block; } @media (max-width: 640px) { .a11y-toggle-btn { top: auto; bottom: 70px; right: 10px; padding: 8px 10px; } .a11y-toggle-btn__label { display: none; } } /* -------- Panel -------- */ .a11y-panel { position: fixed; top: 170px; right: 16px; z-index: 9001; width: 320px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16); padding: 16px; font-family: inherit; color: #1a365d; } .a11y-panel__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #e0e0e0; } .a11y-panel__title { font-size: 15px; font-weight: 700; margin: 0; color: #1a365d; } .a11y-panel__close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: #555; padding: 4px 8px; min-height: 32px; min-width: 32px; } .a11y-panel__close:hover { color: #1a365d; } .a11y-panel__group { margin-bottom: 14px; } .a11y-panel__label { font-size: 12px; font-weight: 600; margin-bottom: 6px; color: #555; text-transform: uppercase; letter-spacing: 0.05em; } .a11y-panel__buttons { display: flex; gap: 6px; flex-wrap: wrap; } .a11y-panel__buttons--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .a11y-panel__btn { flex: 1; min-width: 60px; padding: 10px 12px; min-height: 44px; border: 1px solid #d0d0d0; background: #f8f8f8; color: #1a365d; font-size: 13px; cursor: pointer; border-radius: 4px; } .a11y-panel__btn:hover { background: #e8e8e8; } .a11y-panel__btn.is-selected { background: #1a365d; color: #fff; border-color: #1a365d; } .a11y-panel__checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: #1a365d; } .a11y-panel__checkbox input { width: 16px; height: 16px; accent-color: #1a365d; } .a11y-panel__footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e0e0e0; } .a11y-panel__reset { width: 100%; padding: 10px; min-height: 44px; background: #fff; border: 1px solid #999; color: #555; font-size: 13px; cursor: pointer; border-radius: 4px; } .a11y-panel__reset:hover:not(:disabled) { background: #f5f5f5; color: #1a365d; } .a11y-panel__reset:disabled { opacity: 0.4; cursor: not-allowed; } /* -------- Applied settings via data-attributes on -------- */ /* Font size */ html[data-a11y-font="large"] body { font-size: 18px; } html[data-a11y-font="large"] body * { font-size: inherit; } html[data-a11y-font="xlarge"] body { font-size: 22px; } html[data-a11y-font="xlarge"] body * { font-size: inherit; } /* Theme: high contrast dark (black bg, yellow/white text) */ html[data-a11y-theme="high-contrast-dark"] body { background: #000 !important; color: #fff !important; } html[data-a11y-theme="high-contrast-dark"] a { color: #ffeb3b !important; text-decoration: underline !important; } html[data-a11y-theme="high-contrast-dark"] a:visited { color: #ffc107 !important; } html[data-a11y-theme="high-contrast-dark"] header, html[data-a11y-theme="high-contrast-dark"] main, html[data-a11y-theme="high-contrast-dark"] footer, html[data-a11y-theme="high-contrast-dark"] section, html[data-a11y-theme="high-contrast-dark"] article, html[data-a11y-theme="high-contrast-dark"] aside, html[data-a11y-theme="high-contrast-dark"] nav, html[data-a11y-theme="high-contrast-dark"] div, html[data-a11y-theme="high-contrast-dark"] .card, html[data-a11y-theme="high-contrast-dark"] [class*="section"], html[data-a11y-theme="high-contrast-dark"] [class*="card"] { background: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; } html[data-a11y-theme="high-contrast-dark"] h1, html[data-a11y-theme="high-contrast-dark"] h2, html[data-a11y-theme="high-contrast-dark"] h3, html[data-a11y-theme="high-contrast-dark"] h4, html[data-a11y-theme="high-contrast-dark"] h5, html[data-a11y-theme="high-contrast-dark"] h6 { color: #ffeb3b !important; } html[data-a11y-theme="high-contrast-dark"] button, html[data-a11y-theme="high-contrast-dark"] .butn, html[data-a11y-theme="high-contrast-dark"] [class*="btn"] { background: #ffeb3b !important; color: #000 !important; border: 2px solid #fff !important; } html[data-a11y-theme="high-contrast-dark"] input, html[data-a11y-theme="high-contrast-dark"] textarea, html[data-a11y-theme="high-contrast-dark"] select { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } /* Theme: high contrast light (white bg, black text) */ html[data-a11y-theme="high-contrast-light"] body { background: #fff !important; color: #000 !important; } html[data-a11y-theme="high-contrast-light"] * { color: #000 !important; } html[data-a11y-theme="high-contrast-light"] a { color: #0000ee !important; text-decoration: underline !important; } html[data-a11y-theme="high-contrast-light"] a:visited { color: #551a8b !important; } html[data-a11y-theme="high-contrast-light"] [style*="background"], html[data-a11y-theme="high-contrast-light"] [class*="bg-"] { background: #fff !important; } /* Theme: sepia (warm beige — easier for dyslexia) */ html[data-a11y-theme="sepia"] body { background: #f4ecd8 !important; color: #5c4a2e !important; } html[data-a11y-theme="sepia"] a { color: #8b4513 !important; } /* Images off */ html[data-a11y-images="off"] img, html[data-a11y-images="off"] picture, html[data-a11y-images="off"] video, html[data-a11y-images="off"] svg:not(.a11y-toggle-btn svg) { display: none !important; } html[data-a11y-images="off"] [style*="background-image"] { background-image: none !important; } /* No animations */ html[data-a11y-motion="reduce"] *, html[data-a11y-motion="reduce"] *::before, html[data-a11y-motion="reduce"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* System preference — respect if user set it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }