/* ========================================================= Панель доступності для слабозорих (Feeling of Life) Кнопка-вкладка на лівому краю + панель налаштувань. ========================================================= */ /* ---- Кнопка-вкладка ---- */ .a11yTab { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 4000; width: 46px; height: 52px; border: 0; border-radius: 0 12px 12px 0; background: #1a1206; color: #f5d98a; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); } .a11yTab:hover { background: #241a0c; } /* ---- Панель ---- */ .a11yPanel { position: fixed; left: 54px; top: 50%; transform: translateY(-50%); z-index: 4000; width: 252px; max-width: calc(100vw - 72px); background: #1a1206; color: #f5e6c0; border: 1px solid rgba(245, 217, 138, 0.25); border-radius: 14px; padding: 16px; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55); font-family: Verdana, "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.4; } .a11yPanel[hidden] { display: none; } .a11yPanel__title { margin: 0 0 12px; font-size: 17px; color: #f5d98a; } .a11yPanel button { font-family: inherit; } .a11yRow { display: block; width: 100%; text-align: left; background: rgba(245, 217, 138, 0.08); color: inherit; border: 1px solid rgba(245, 217, 138, 0.22); border-radius: 9px; padding: 11px 13px; margin: 0 0 9px; cursor: pointer; font-size: 15px; } .a11yRow[aria-pressed="true"] { background: #f5d98a; color: #1a1206; font-weight: 700; } .a11yGroup { margin: 0 0 9px; } .a11yGroup > span { display: block; font-size: 13px; opacity: 0.85; margin: 0 0 6px; } .a11ySizes { display: flex; gap: 7px; } .a11ySizes button { flex: 1; background: rgba(245, 217, 138, 0.08); color: inherit; border: 1px solid rgba(245, 217, 138, 0.22); border-radius: 9px; padding: 9px 0; cursor: pointer; line-height: 1; } .a11ySizes button:nth-child(1) { font-size: 14px; } .a11ySizes button:nth-child(2) { font-size: 17px; } .a11ySizes button:nth-child(3) { font-size: 20px; } .a11ySizes button.active { background: #f5d98a; color: #1a1206; font-weight: 700; } .a11yReset { display: block; width: 100%; background: transparent; color: #f5d98a; border: 0; text-decoration: underline; cursor: pointer; padding: 8px; font-size: 14px; } /* ========================================================= Ефекти, що вмикаються класами на ========================================================= */ /* Читабельний шрифт із гарантованою кирилицею + трохи розрядки */ html.a11y-font, html.a11y-font body, html.a11y-font button, html.a11y-font input, html.a11y-font textarea, html.a11y-font .aboutProse { font-family: "PT Sans", Verdana, Tahoma, "Segoe UI", system-ui, sans-serif !important; letter-spacing: 0.012em; } /* Збільшення тексту — масштаб лише основного вмісту (не чіпає панель/плеєр) */ html.a11y-size-1 #mainContent { zoom: 1.15; } html.a11y-size-2 #mainContent { zoom: 1.32; } /* Високий контраст — лише основний вміст, щоб не зачепити фіксовані елементи */ html.a11y-contrast #mainContent { filter: contrast(1.18) brightness(1.06); }