/* ===== Панель доступности (версия для слабовидящих) ===== */ html { --a11y-toolbar-h: 88px; } /* --- Темы (переменные на html) --- */ html.a11y-theme-0 { --a11y-page-bg: #ffffff; --a11y-fg: #000000; --a11y-link: #0044cc; --a11y-nav-bg: #1a4d66; --a11y-nav-fg: #ffffff; --a11y-border: #333333; } html.a11y-theme-1 { --a11y-page-bg: #000000; --a11y-fg: #ffffff; --a11y-link: #99ccff; --a11y-nav-bg: #1a1a1a; --a11y-nav-fg: #ffffff; --a11y-border: #cccccc; } html.a11y-theme-2 { --a11y-page-bg: #cceeff; --a11y-fg: #001a33; --a11y-link: #003399; --a11y-nav-bg: #336699; --a11y-nav-fg: #ffffff; --a11y-border: #001a33; } html.a11y-theme-3 { --a11y-page-bg: #f5e6d3; --a11y-fg: #1a1a1a; --a11y-link: #003366; --a11y-nav-bg: #5c4a3a; --a11y-nav-fg: #fff8f0; --a11y-border: #1a1a1a; } html.a11y-theme-4 { --a11y-page-bg: #1a1208; --a11y-fg: #ffee00; --a11y-link: #66ffff; --a11y-nav-bg: #000000; --a11y-nav-fg: #ffee00; --a11y-border: #ffee00; } /* Масштаб текста: zoom на корне — масштабирует в том числе px в макете и fixed-панель */ html.a11y-zoom-0 { --a11y-zoom: 1; } html.a11y-zoom-1 { --a11y-zoom: 1.06; } html.a11y-zoom-2 { --a11y-zoom: 1.12; } html.a11y-zoom-3 { --a11y-zoom: 1.2; } html.a11y-zoom-4 { --a11y-zoom: 1.3; } /* * Масштаб только для контента страницы. zoom на ломает position:fixed у панели * (панель оказывается вне экрана в Chromium). */ html:has(body.a11y-enabled) #a11y-scale-root { zoom: var(--a11y-zoom, 1); } #a11y-scale-root { transform-origin: top center; } /* Межбуквенное и межстрочное */ html.a11y-letter-normal body.a11y-enabled { letter-spacing: normal; } html.a11y-letter-medium body.a11y-enabled { letter-spacing: 0.06em; } html.a11y-letter-large body.a11y-enabled { letter-spacing: 0.12em; } html.a11y-line-normal body.a11y-enabled { line-height: 1.5; } html.a11y-line-medium body.a11y-enabled { line-height: 1.75; } html.a11y-line-large body.a11y-enabled { line-height: 2.1; } html.a11y-font-sans body.a11y-enabled, html.a11y-font-sans body.a11y-enabled * { font-family: Arial, Helvetica, "Segoe UI", sans-serif !important; } html.a11y-font-serif body.a11y-enabled, html.a11y-font-serif body.a11y-enabled * { font-family: "Times New Roman", Times, Georgia, serif !important; } /* Bootstrap Icons: не подменять гарнитуру иконок */ body.a11y-enabled [class*="bi-"], body.a11y-enabled .bi { font-family: "bootstrap-icons" !important; } /* --- Режимы изображений --- */ body.a11y-enabled.a11y-img-hide img, body.a11y-enabled.a11y-img-hide svg, body.a11y-enabled.a11y-img-hide picture { visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; pointer-events: none !important; } body.a11y-enabled.a11y-img-gray img { filter: grayscale(100%) contrast(1.05) !important; } /* Слайдер: картинки заданы через background-image, не */ body.a11y-enabled.a11y-img-hide .hero-wrapper, body.a11y-enabled.a11y-img-hide .slider-progress { display: none !important; } body.a11y-enabled.a11y-img-gray .hero-slide { filter: grayscale(100%) contrast(1.05); } /* Встроенные объекты */ body.a11y-enabled.a11y-embed-off iframe, body.a11y-enabled.a11y-embed-off embed, body.a11y-enabled.a11y-embed-off object { display: none !important; } /* --- Применение темы к странице и блокам CMS --- */ body.a11y-enabled { background: var(--a11y-page-bg) !important; color: var(--a11y-fg) !important; padding-top: var(--a11y-toolbar-h); transition: none; } body.a11y-enabled .top-bar, body.a11y-enabled .main-header, body.a11y-enabled .cms-content, body.a11y-enabled .content-placeholder, body.a11y-enabled .hero-wrapper, body.a11y-enabled .hero-actions, body.a11y-enabled .counter-section, body.a11y-enabled .main-footer, body.a11y-enabled .card, body.a11y-enabled .info-card, body.a11y-enabled .resource-card, body.a11y-enabled .cms-content tbody tr { background: var(--a11y-page-bg) !important; color: var(--a11y-fg) !important; border-color: var(--a11y-border) !important; } body.a11y-enabled .nav-menu { background: var(--a11y-nav-bg) !important; } body.a11y-enabled .nav-menu .nav-link, body.a11y-enabled .nav-menu .dropdown-item { color: var(--a11y-nav-fg) !important; } body.a11y-enabled .nav-toggle, body.a11y-enabled .nav-wrapper, body.a11y-enabled .nav-menu .dropdown-menu { background: var(--a11y-nav-bg) !important; color: var(--a11y-nav-fg) !important; border-color: var(--a11y-border) !important; } body.a11y-enabled .search-box input { background: var(--a11y-page-bg) !important; color: var(--a11y-fg) !important; border-color: var(--a11y-border) !important; } body.a11y-enabled .top-bar-inner, body.a11y-enabled .top-center, body.a11y-enabled .top-right { background: var(--a11y-page-bg) !important; color: var(--a11y-fg) !important; } body.a11y-enabled .title, body.a11y-enabled .subtitle, body.a11y-enabled .address, body.a11y-enabled .search, body.a11y-enabled h1, body.a11y-enabled h2, body.a11y-enabled h3, body.a11y-enabled p, body.a11y-enabled li, body.a11y-enabled .cms-content th, body.a11y-enabled .cms-content td { color: var(--a11y-fg) !important; } body.a11y-enabled a, body.a11y-enabled .cms-content a { color: var(--a11y-link) !important; } body.a11y-enabled .tg-link { color: var(--a11y-link) !important; } /* Исключения: логотип, поиск и плагины не перекрашиваются */ body.a11y-enabled .logo, body.a11y-enabled .logo-img, body.a11y-enabled .search-box input, body.a11y-enabled .cms-plugin, body.a11y-enabled [class*="cms-plugin"] { background: inherit !important; color: inherit !important; border-color: inherit !important; } /* Кнопки в top-bar перекрашиваются */ body.a11y-enabled .access-btn, body.a11y-enabled .lang-switch button, body.a11y-enabled .accessibility-toggle button { background: var(--a11y-page-bg) !important; color: var(--a11y-fg) !important; border-color: var(--a11y-border) !important; } /* Плагины django CMS и вложенный контент */ body.a11y-enabled .cms-plugin, body.a11y-enabled [class*="cms-plugin"], body.a11y-enabled .plugin { background: var(--a11y-page-bg) !important; color: var(--a11y-fg) !important; } body.a11y-enabled .cms-plugin *, body.a11y-enabled [class*="cms-plugin"] * { border-color: var(--a11y-border) !important; } body.a11y-enabled .news-card, body.a11y-enabled .staff-card, body.a11y-enabled .hero-action-btn, body.a11y-enabled .counter-box, body.a11y-enabled .about-block { background: var(--a11y-page-bg) !important; color: var(--a11y-fg) !important; border-color: var(--a11y-border) !important; } /* ===== Панель инструментов ===== */ .a11y-toolbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; background: linear-gradient(180deg, #eceff1 0%, #dfe4e8 100%); border-bottom: 1px solid #b0b8c1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: 8px 12px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #1a1a1a; } .a11y-toolbar[hidden] { display: none !important; } .a11y-toolbar-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 14px 20px; } .a11y-toolbar.a11y-toolbar-collapsed .a11y-group:not(.a11y-group-settings) { display: none; } .a11y-group { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .a11y-group-label { font-size: 11px; color: #333; text-align: center; white-space: nowrap; } .a11y-group-btns { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; } .a11y-btn { min-height: 32px; min-width: 32px; padding: 4px 10px; border: 1px solid #9aa3ad; border-radius: 6px; background: linear-gradient(180deg, #f7f9fb 0%, #e2e7ec 100%); color: #111; cursor: pointer; font-size: 13px; line-height: 1.2; } .a11y-btn:hover { background: linear-gradient(180deg, #fff 0%, #eef1f5 100%); border-color: #6b7785; } .a11y-btn:active { transform: translateY(1px); } .a11y-btn-text { padding: 6px 12px; white-space: nowrap; max-width: 220px; font-size: 12px; } .a11y-btn-icon { font-size: 16px; line-height: 1; } .a11y-theme-swatches { gap: 5px; } .a11y-swatch { width: 36px; height: 32px; border: 2px solid #888; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; padding: 0; } .a11y-swatch span { pointer-events: none; } .a11y-swatch[data-theme="0"] { background: #fff; color: #000; } .a11y-swatch[data-theme="1"] { background: #000; color: #fff; border-color: #ccc; } .a11y-swatch[data-theme="2"] { background: #cceeff; color: #001a33; } .a11y-swatch[data-theme="3"] { background: #f5e6d3; color: #000; } .a11y-swatch[data-theme="4"] { background: #1a1208; color: #ffee00; border-color: #ffee00; } .a11y-swatch.is-active { outline: 3px solid #0d6efd; outline-offset: 1px; } .a11y-settings-row { flex-wrap: nowrap; } /* ===== Модальное окно ===== */ .a11y-modal { position: fixed; inset: 0; z-index: 100001; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; } .a11y-modal[hidden] { display: none !important; } .a11y-modal-content { background: #fff; color: #111; border-radius: 10px; max-width: 520px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } .a11y-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #ddd; } .a11y-modal-header h3 { margin: 0; font-size: 20px; font-weight: 600; } .a11y-modal-close { border: none; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: #444; padding: 0 4px; } .a11y-modal-close:hover { color: #000; } .a11y-modal-body { padding: 16px 18px 8px; } .a11y-setting-block { margin-bottom: 18px; } .a11y-setting-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #222; } .a11y-segmented { display: flex; flex-wrap: wrap; gap: 6px; } .a11y-segmented button { flex: 1; min-width: 120px; padding: 8px 10px; border: 1px solid #9aa3ad; border-radius: 6px; background: linear-gradient(180deg, #f7f9fb 0%, #e8ecf0 100%); cursor: pointer; font-size: 13px; color: #111; } .a11y-segmented button:hover { border-color: #0d6efd; } .a11y-segmented button.is-active { background: #0d6efd; color: #fff; border-color: #0d6efd; } .a11y-modal-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid #eee; } .a11y-modal-credit { font-size: 12px; color: #666; } .a11y-btn-reset { padding: 8px 14px; border: 1px solid #9aa3ad; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; } .a11y-btn-reset:hover { border-color: #0d6efd; color: #0d6efd; } /* Отключение анимаций в режиме доступности */ body.a11y-enabled * { animation: none !important; transition: none !important; } @media (max-width: 768px) { .a11y-toolbar { padding: 6px 8px 8px; padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); padding-top: max(6px, env(safe-area-inset-top, 0px)); } .a11y-toolbar-inner { gap: 10px 8px; justify-content: flex-start; } .a11y-group-label { font-size: 10px; white-space: normal; max-width: 72px; line-height: 1.2; } .a11y-btn { min-height: 44px; min-width: 44px; padding: 6px 10px; } .a11y-btn-text { white-space: normal; max-width: min(200px, 42vw); font-size: 11px; line-height: 1.25; text-align: center; } .a11y-swatch { width: 32px; height: 30px; } .a11y-segmented button { min-width: 0; font-size: 12px; padding: 10px 8px; } } @media (max-width: 480px) { .a11y-toolbar-inner { flex-direction: column; align-items: stretch; } .a11y-group { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; } .a11y-group-label { max-width: none; flex: 0 0 100%; text-align: left; } .a11y-group-btns { justify-content: flex-start; } } body.a11y-enabled .hospital-name, body.a11y-enabled .hospital-sub { color: var(--a11y-fg) !important; } body.a11y-enabled .access-btn, body.a11y-enabled .lang-switch button, body.a11y-enabled .accessibility-toggle button { background: var(--a11y-page-bg) !important; color: var(--a11y-fg) !important; border: 1px solid var(--a11y-border) !important; }