/* ========================================================= Accessibility Mode v3 (High-Usability & Style-Safe) Scope: Goals: – максимальная читаемость и контраст – крупные цели, фокус без бликов – поддержка светлой и тёмной тем – сохраняет общий стиль интерфейса AC UI ========================================================= */ :root[data-a11y="on"] { --header-h: 64px; --aside-w-min: 72px; --aside-w: 296px; /* Цвета в зависимости от темы */ color-scheme: light dark; --a11y-bg-light: #ffffff; --a11y-bg-dark: #181a1f; --a11y-text-light: #0a0a0a; --a11y-text-dark: #f2f3f8; --a11y-border-light: #b7bbc3; --a11y-border-dark: #4c5060; --a11y-accent: #0a5bd6; --a11y-accent-alt: #ffd84d; --a11y-focus: 0 0 0 .28rem rgba(10, 91, 214, .45); --a11y-shadow: 0 2px 8px rgba(0, 0, 0, .15); /* Контрастные токены */ --border: var(--a11y-border-light); --focus: var(--a11y-focus); } /* ========================================================= Базовая типографика ========================================================= */ [data-a11y="on"] body { font-family: "Public Sans", "Inter", "Rubik", system-ui, sans-serif !important; font-size: clamp(18px, 1.2vw + .8rem, 20px) !important; line-height: 1.9 !important; font-weight: 400; color: var(--a11y-text-light); background: var(--a11y-bg-light); -webkit-font-smoothing: auto; text-rendering: optimizeSpeed; } :root[data-bs-theme="dark"][data-a11y="on"] body { color: var(--a11y-text-dark); background: var(--a11y-bg-dark); } /* Заголовки крупнее и контрастнее */ [data-a11y="on"] h1 { font-size: clamp(32px, 3.2vw, 44px); font-weight: 800; } [data-a11y="on"] h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; } [data-a11y="on"] h3 { font-size: clamp(20px, 2vw, 28px); font-weight: 700; } /* Ссылки всегда подчёркнуты */ [data-a11y="on"] a { color: var(--a11y-accent) !important; text-decoration: underline !important; text-underline-offset: .2em; font-weight: 600; } [data-a11y="on"] a:hover { color: #0843a3 !important; } /* ========================================================= Контейнеры и карточки ========================================================= */ [data-a11y="on"] .card, [data-a11y="on"] .kpi, [data-a11y="on"] .dashboard-section, [data-a11y="on"] .alert, [data-a11y="on"] .modal-content, [data-a11y="on"] .offcanvas, [data-a11y="on"] .table, [data-a11y="on"] .empty-state { background: var(--a11y-bg-light); color: var(--a11y-text-light); border: 2px solid var(--border); box-shadow: var(--a11y-shadow); } :root[data-bs-theme="dark"][data-a11y="on"] .card, :root[data-bs-theme="dark"][data-a11y="on"] .dashboard-section, :root[data-bs-theme="dark"][data-a11y="on"] .alert, :root[data-bs-theme="dark"][data-a11y="on"] .table { background: #222533 !important; color: var(--a11y-text-dark); border-color: var(--a11y-border-dark); } /* ========================================================= Навигация / Header / Sidebar ========================================================= */ [data-a11y="on"] .app-bar .nav-link, [data-a11y="on"] .navbar .nav-link { font-weight: 800; border: 2px solid var(--border); border-radius: .75rem; background: var(--a11y-bg-light); color: var(--a11y-text-light); padding: .8rem 1.2rem; text-align: center; } [data-a11y="on"] .app-bar .nav-link:hover, [data-a11y="on"] .navbar .nav-link:hover { background: #f2f6ff !important; border-color: var(--a11y-accent); } [data-a11y="on"] .fixed-aside { background: #f8f9fb; border-right: 2px solid var(--border); } :root[data-bs-theme="dark"][data-a11y="on"] .fixed-aside { background: #1f2232; border-color: var(--a11y-border-dark); } [data-a11y="on"] .sidebar-brand .brand-name { font-size: 1.2rem; font-weight: 700; } /* ========================================================= Кнопки и формы ========================================================= */ [data-a11y="on"] .btn { font-size: 1.05em; font-weight: 800; padding: .8rem 1.2rem !important; border-width: 2px !important; border-radius: .8rem; transition: none !important; } [data-a11y="on"] .btn-primary { background: var(--a11y-accent-alt); color: #111; border-color: #d4b100; } [data-a11y="on"] .btn-dark { background: #222; color: #fff; border-color: #111; } [data-a11y="on"] .form-control, [data-a11y="on"] .form-select, [data-a11y="on"] .input-group-text { font-size: 1.05em !important; min-height: 50px !important; border-width: 2px !important; border-radius: .65rem !important; box-shadow: none !important; } [data-a11y="on"] ::placeholder { color: #444 !important; opacity: 1 !important; } [data-a11y="on"] .form-label { font-weight: 700 !important; color: inherit !important; } /* ========================================================= Фокус и клавиатура ========================================================= */ [data-a11y="on"] :focus { outline: 3px solid var(--a11y-accent) !important; outline-offset: 2px; box-shadow: var(--focus); border-radius: .3rem; } [data-a11y="on"] .btn:focus-visible, [data-a11y="on"] a:focus-visible { outline: 3px solid var(--a11y-accent-alt) !important; } /* ========================================================= Таблицы ========================================================= */ [data-a11y="on"] .table { border-width: 2px !important; font-size: 1.05em !important; } [data-a11y="on"] .table > :not(caption) > * > * { padding: 1rem 1rem !important; border-bottom-width: 2px !important; } [data-a11y="on"] .table thead th { background: #f5f7fb !important; font-weight: 700; } :root[data-bs-theme="dark"][data-a11y="on"] .table thead th { background: #2d3150 !important; color: var(--a11y-text-dark); } /* ========================================================= Прогресс, алерты, уведомления ========================================================= */ [data-a11y="on"] .progress { height: 20px !important; border: 2px solid var(--border); border-radius: 999px; } [data-a11y="on"] .progress-bar { background: linear-gradient(90deg, var(--a11y-accent-alt), #ffcd00); color: #111; font-weight: 700; } [data-a11y="on"] .alert { background: #fff5cc !important; border: 2px solid #e6b800 !important; color: #111 !important; } :root[data-bs-theme="dark"][data-a11y="on"] .alert { background: #403400 !important; color: #fff6d4 !important; } /* ========================================================= Пагинация / хлебные / тултипы ========================================================= */ [data-a11y="on"] .pagination .page-link { font-weight: 800; border: 2px solid var(--border); padding: .8rem 1.1rem; border-radius: .75rem; } [data-a11y="on"] .tooltip .tooltip-inner, [data-a11y="on"] .popover { font-size: 1rem !important; line-height: 1.5; border: 2px solid var(--border); background: var(--a11y-bg-light); color: var(--a11y-text-light); } :root[data-bs-theme="dark"][data-a11y="on"] .tooltip .tooltip-inner, :root[data-bs-theme="dark"][data-a11y="on"] .popover { background: #2b2e48; color: var(--a11y-text-dark); border-color: var(--a11y-border-dark); } /* ========================================================= Адаптив и движение ========================================================= */ @media (prefers-reduced-motion: reduce) { [data-a11y="on"] * { transition: none !important; animation: none !important; } } /* ========================================================= Footer / Мелкий текст ========================================================= */ [data-a11y="on"] .site-footer, [data-a11y="on"] .ac-footer, [data-a11y="on"] .ac-footer-sm { background: var(--a11y-bg-light) !important; color: var(--a11y-text-light) !important; border-top: 3px solid var(--a11y-accent-alt); } :root[data-bs-theme="dark"][data-a11y="on"] .site-footer { background: #1a1d2b !important; color: var(--a11y-text-dark) !important; border-top-color: var(--a11y-border-dark); } /* ========================================================= Дополнительно: курсор, spacing и минимальные зоны клика ========================================================= */ [data-a11y="on"] button, [data-a11y="on"] .btn, [data-a11y="on"] a, [data-a11y="on"] input, [data-a11y="on"] select { cursor: pointer; min-height: 44px; } /* === Конец Accessibility Mode v3 === */