/* * css/accessibility.css * Стили для режима доступности (для слабовидящих/слабослышащих). * Применяются, когда к добавлен класс 'accessibility-mode'. */ /* Стили для плавающей кнопки */ .floating-btn { position: fixed; bottom: 30px; right: 30px; background-color: var(--main-accent-color); /* Синий цвет как на оригинале */ color: white; border: none; border-radius: 50%; width: 65px; height: 65px; font-size: 2em; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 1000; transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; } .floating-btn:hover { background-color: var(--hover-color); transform: translateY(-5px); } /* --- Панель настроек доступности --- */ .accessibility-panel-overlay { display: none; /* Скрыто по умолчанию, управляется JS */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); /* Полупрозрачный фон */ z-index: 10000; /* Очень высокий z-index, поверх всего */ justify-content: flex-end; /* Выдвигается справа */ align-items: flex-start; opacity: 0; /* Для плавного появления оверлея */ transition: opacity 0.3s ease-in-out; } .accessibility-panel-content { background-color: #fff; width: 350px; /* Ширина панели */ height: 100%; padding: 30px; box-shadow: -5px 0 20px rgba(0,0,0,0.3); transform: translateX(100%); /* Изначально скрыто справа */ transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; overflow-y: auto; position: relative; } .accessibility-panel-overlay.active .accessibility-panel-content { transform: translateX(0); /* Выдвигаем при активном состоянии */ } .accessibility-panel-close { background: none; border: none; font-size: 40px; color: #333; position: absolute; top: 15px; right: 15px; cursor: pointer; } .accessibility-panel-content h3 { font-size: 1.8em; color: var(--main-accent-color); margin-bottom: 30px; text-align: center; } .accessibility-options { flex-grow: 1; /* Чтобы опции занимали доступное пространство */ } .option-group { background-color: #f8f8f8; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-color); } .option-group h4 { font-size: 1.2em; color: var(--dark-text-color); margin-bottom: 15px; } .option-group button { background-color: var(--main-accent-color); color: #fff; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 1em; margin-right: 10px; margin-bottom: 10px; /* Для обтекания */ transition: background-color 0.3s ease; } .option-group button:hover { background-color: var(--hover-color); } .option-group button.btn-sm { padding: 8px 12px; font-size: 0.9em; } /* Стили для конкретных кнопок контраста */ #contrast-default { background-color: #000; color: #fff; } #contrast-high { background-color: #fff; color: #000; border: 1px solid #000;} #contrast-dark { background-color: #333; color: #fff; } #contrast-blue { background-color: #007bff; color: #fff; } /* Кнопка сброса всех настроек */ #accessibility-reset-all { width: 100%; margin-top: 30px; padding: 15px; font-size: 1.1em; } .accessibility-note { font-size: 0.85em; color: var(--light-text-color); text-align: center; margin-top: 20px; } /* --- ОСНОВНЫЕ СТИЛИ РЕЖИМА ДОСТУПНОСТИ (применяются к только при активном режиме) --- */ /* Класс 'accessibility-mode' теперь будет применяться только когда выбраны контрастные режимы, скрыты изображения или включено озвучивание, но НЕ при изменении только шрифта. */ body.accessibility-mode { background-color: #000 !important; /* Общий темный фон для всего сайта */ color: #fff !important; /* Общий светлый цвет текста */ } /* Сброс фоновых цветов и теней для всех элементов внутри accessibility-mode */ body.accessibility-mode *, body.accessibility-mode *:before, body.accessibility-mode *:after { background-color: transparent !important; /* Делаем фоны прозрачными, чтобы фон body был виден */ color: inherit !important; /* Наследуем цвет текста от body, который будет #fff */ border-color: #555 !important; /* Более светлые границы */ box-shadow: none !important; /* Убираем все тени */ text-shadow: none !important; /* Убираем тени текста */ } /* Элементы, которые должны быть темными на светлом тексте */ body.accessibility-mode .site-header, body.accessibility-mode .site-footer { background-color: #111 !important; /* Темный фон для хедера/футера */ color: #eee !important; } body.accessibility-mode .header-top-bar { background-color: #222 !important; /* Чуть светлее для верхнего бара */ } /* Ссылки */ body.accessibility-mode a { color: #ffff00 !important; /* Яркий желтый для ссылок */ text-decoration: underline !important; /* Всегда подчеркиваем ссылки */ } body.accessibility-mode a:hover { color: #ffd700 !important; /* Чуть темнее желтый при наведении */ } /* Элементы навигации и заголовки, которым нужен светлый цвет */ body.accessibility-mode .main-navigation li a, body.accessibility-mode .client-login-btn, body.accessibility-mode .mobile-menu-toggle, body.accessibility-mode .mobile-nav-close { color: #fff !important; } body.accessibility-mode .main-navigation li a:hover, body.accessibility-mode .client-login-btn:hover { color: #ffff00 !important; } body.accessibility-mode .main-navigation li.current-menu-item a::after { background-color: #ffff00 !important; /* Активная линия меню - желтая */ } body.accessibility-mode .site-branding img { /* Если логотип светлый на темном фоне, возможно, ему нужна инверсия или реколоризация */ filter: brightness(1.5) !important; /* Просто сделать его ярче */ } /* Формы */ body.accessibility-mode input, body.accessibility-mode select, body.accessibility-mode textarea { background-color: #333 !important; /* Темный фон для полей ввода */ color: #fff !important; border: 1px solid #777 !important; } body.accessibility-mode input:focus, body.accessibility-mode select:focus, body.accessibility-mode textarea:focus { box-shadow: 0 0 0 4px #ffff00 !important; /* Желтая обводка при фокусе */ border-color: #ffff00 !important; } body.accessibility-mode .form-message.success { background-color: #444 !important; color: #00ff00 !important; /* Ярко-зеленый для успеха */ border: 1px solid #00ff00 !important; } body.accessibility-mode .form-message.error { background-color: #444 !important; color: #ff0000 !important; /* Ярко-красный для ошибки */ border: 1px solid #ff0000 !important; } body.accessibility-mode .checkbox-group input[type="checkbox"] { background-color: #333 !important; border-color: #777 !important; } body.accessibility-mode .checkbox-group input[type="checkbox"]:checked { background-color: #ffff00 !important; /* Желтый фон для отмеченного чекбокса */ border-color: #ffff00 !important; } body.accessibility-mode .checkbox-group input[type="checkbox"]:checked::after { color: #333 !important; /* Темный крестик на желтом фоне */ } /* Цены - аккордеон */ body.accessibility-mode .accordion-item, body.accessibility-mode .accordion-header { background-color: #222 !important; border-color: #444 !important; box-shadow: none !important; } body.accessibility-mode .accordion-header:hover { background-color: #333 !important; } body.accessibility-mode .accordion-header .category-title { color: #fff !important; } body.accessibility-mode .accordion-icon { color: #ffff00 !important; } body.accessibility-mode .price-table-header { background-color: #444 !important; color: #fff !important; border-color: #666 !important; } body.accessibility-mode .price-table-row { border-color: #555 !important; } body.accessibility-mode .price-table-row:hover { background-color: #333 !important; } body.accessibility-mode .service-name-col, body.accessibility-mode .service-price-col { color: #fff !important; } body.accessibility-mode .service-code, body.accessibility-mode .service-description-text { color: #ccc !important; } body.accessibility-mode .price-notes { background-color: #222 !important; color: #fff !important; border-color: #444 !important; } body.accessibility-mode .price-notes p strong { color: #ffff00 !important; /* Выделяем жирный текст */ } /* Врачи, Документы, Отзывы, Вакансии, Контакты - карточки */ body.accessibility-mode .doctor-card, body.accessibility-mode .document-item, body.accessibility-mode .review-card, body.accessibility-mode .vacancy-item, body.accessibility-mode .contact-block-item, body.accessibility-mode .map-wrapper, body.accessibility-mode .contacts-intro, body.accessibility-mode .about-intro, body.accessibility-mode .about-mission, body.accessibility-mode .about-advantages, body.accessibility-mode .about-equipment, body.accessibility-mode .doctors-intro, body.accessibility-mode .reviews-intro, body.accessibility-mode .add-review-section, body.accessibility-mode .documents-intro, body.accessibility-mode .documents-cta, body.accessibility-mode .politics-page-content, body.accessibility-mode .vacancies-intro, body.accessibility-mode .send-resume-section, body.accessibility-mode .contacts-intro, body.accessibility-mode .contact-form-section, body.accessibility-mode .appointment-intro, body.accessibility-mode .appointment-form-wrapper, body.accessibility-mode .client-area-container, body.accessibility-mode .client-login-container, body.accessibility-mode .auth-form-box { /* Добавлены контейнеры ЛК */ background-color: #222 !important; box-shadow: none !important; border: 1px solid #444 !important; } body.accessibility-mode .doctor-card:hover, body.accessibility-mode .document-item:hover { transform: none !important; /* Убираем hover-эффекты */ box-shadow: none !important; } /* Для текста, который должен оставаться светлым на темном фоне */ body.accessibility-mode .section-category, body.accessibility-mode .doctor-name, body.accessibility-mode .vacancy-title, body.accessibility-mode .contact-block-title, body.accessibility-mode .client-area-container h1, body.accessibility-mode .client-area-container h2, body.accessibility-mode .client-area-container h3, body.accessibility-mode .client-login-container h1, body.accessibility-mode .auth-form-box .form-title { /* Добавлены заголовки ЛК/авторизации */ color: #ffff00 !important; /* Выделяем заголовки разделов */ } body.accessibility-mode .site-branding a { /* Логотип-текст */ color: #ffff00 !important; } body.accessibility-mode .mobile-contact-info p, body.accessibility-mode .mobile-contact-info i { color: #ccc !important; } body.accessibility-mode .status-badge { /* Цвет для бейджей статусов в ЛК */ color: #000 !important; /* Черный текст на цветном фоне */ } body.accessibility-mode .appointments-table thead th { background-color: #444 !important; color: #fff !important; } body.accessibility-mode .appointments-table tbody tr:nth-child(even) { background-color: #333 !important; } body.accessibility-mode .appointments-table tbody tr:hover { background-color: #555 !important; } /* --- КОНТРАСТНЫЕ РЕЖИМЫ (применяются ТОЛЬКО к ) --- */ /* Высокий контраст (белый по черному) */ body.contrast-high { filter: invert(100%) hue-rotate(180deg); /* Инвертирует цвета, но сохраняет оттенки */ /* Важно: background-color: #fff !important; при этом не требуется, т.к. инверсия работает от текущих цветов. */ } /* Сбрасываем инверсию для изображений, иначе они дважды инвертируются */ body.contrast-high img, body.contrast-high video { filter: invert(100%) hue-rotate(180deg) !important; } /* Если в режиме contrast-high есть элементы с явно заданным background-color: transparent, которые должны быть черными, их нужно доопределить. */ /* Темный фон (темно-серый по светло-серому) */ body.contrast-dark { background-color: #222 !important; color: #f0f0f0 !important; } body.contrast-dark *, body.contrast-dark *:before, body.contrast-dark *:after { background-color: transparent !important; color: #f0f0f0 !important; border-color: #555 !important; } body.contrast-dark a { color: #92e0ff !important; /* Светло-голубые ссылки */ } body.contrast-dark img { filter: brightness(0.8) contrast(1.2); /* Сделать изображения чуть темнее и контрастнее */ } /* Синий фон (очень темный синий по светло-голубому/желтому) */ body.contrast-blue { background-color: #000033 !important; /* Очень темный синий */ color: #ccffff !important; /* Светло-голубой текст */ } body.contrast-blue *, body.contrast-blue *:before, body.contrast-blue *:after { background-color: transparent !important; color: #ccffff !important; border-color: #003366 !important; } body.contrast-blue a { color: #ffff99 !important; /* Светло-желтые ссылки */ } body.contrast-blue img { filter: grayscale(80%) brightness(0.9); /* Обесцветить и осветлить изображения */ } /* --- РАЗМЕРЫ ШРИФТА (применяются к ) --- */ /* Используем em, чтобы изменения были пропорциональны */ body.font-size-sm { font-size: 0.95em; } /* Чуть меньше стандартного */ body.font-size-md { font-size: 1em; } /* Стандартный размер */ body.font-size-lg { font-size: 1.15em; } /* 15% больше */ body.font-size-xl { font-size: 1.3em; } /* 30% больше */ body.font-size-xxl { font-size: 1.45em; } /* 45% больше */ /* Увеличенный межстрочный интервал для лучшей читаемости в режиме доступности */ body.accessibility-mode { line-height: 1.8 !important; /* Увеличенный межстрочный интервал */ } /* --- СКРЫТИЕ ИЗОБРАЖЕНИЙ (применяется к ) --- */ body.hide-images img { opacity: 0 !important; visibility: hidden !important; } body.hide-images [style*="background-image"] { background-image: none !important; } /* Если изображения скрыты, возможно, нужны заглушки для элементов, которые зависят от изображений */ body.hide-images .doctor-photo, body.hide-images .about-us-image, body.hide-images .advantages-image-col { background-color: #ccc !important; /* Цвет-заглушка вместо скрытого изображения */ min-height: 50px !important; /* Минимальная высота, чтобы элемент не схлопнулся */ border: 1px solid #777 !important; } /* --- ОТКЛЮЧЕНИЕ АНИМАЦИЙ (по желанию пользователя) --- */ body.no-animations * { transition: none !important; animation: none !important; }