/* ============================================================ HR Connect — Accessibility panel (standalone, Tailwind-compatible) Adapted from the University of Haifa brand skill. Applies state classes to ; no framework dependency. ============================================================ */ /* ---- Panel container ---- */ #accessibility-panel { position: fixed; top: 4.5rem; inset-inline-end: 1rem; z-index: 9998; background: #ffffff; border: 1px solid #DBE3F1; box-shadow: 0 8px 32px rgba(31, 51, 67, 0.14); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 12rem; } #accessibility-panel[hidden] { display: none; } #accessibility-panel button { min-height: 2.75rem; padding-inline: 1rem; border: 1px solid #DBE3F1; background: #ffffff; color: #1F3343; cursor: pointer; text-align: right; font-size: 0.875rem; font-family: inherit; } #accessibility-panel button:hover { background: #E7F1F9; } #accessibility-panel button[aria-pressed="true"] { background: #F0FEFF; border-color: #08BBE7; font-weight: 700; } #accessibility-panel button[aria-pressed="true"]::before { content: "\2713 "; } /* ============================================================ State classes — toggled on by js/a11y.js ============================================================ */ /* Enlarge / shrink text. Works because the site sizes in rem, which scale relative to the font-size. */ html.a11y-font-lg { font-size: 18px; } /* 112.5% of 16px */ html.a11y-font-xl { font-size: 20px; } /* 125% of 16px */ /* Highlight all links */ html.a11y-links a { text-decoration: underline !important; } /* Stop animations & transitions */ html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; } /* ---- High contrast ---- Deterministic two-tone scheme, independent of light/dark mode: light surfaces → black text on white; dark branded surfaces (header, navy backgrounds, admin sidebar) → white text on black. */ /* 1) Base: white page, black text everywhere (overrides dark-mode too). */ html.a11y-contrast, html.a11y-contrast body { background: #ffffff !important; color: #000000 !important; } html.a11y-contrast :where(div, section, main, article, nav, form, table, thead, tbody, tr, p, h1, h2, h3, h4, h5, span, label, small, td, th, li, figcaption, button, input, select, textarea, a, i) { color: #000000 !important; } /* 2) Common light surfaces forced white (kills dark-mode backgrounds). */ html.a11y-contrast :where(.card, section, article, main, form, table, thead, tbody, tr, td, th, input, select, textarea, [class*="bg-white"], [class*="bg-slate"], [class*="bg-haifa-lightBg"], [class*="bg-haifa-cardDark"]) { background-color: #ffffff !important; } html.a11y-contrast :where([class*="border"]) { border-color: #000000 !important; } /* 3) Dark branded surfaces → black background, white text (element + descendants). Higher specificity + later position, so they win over rules 1 & 2. */ html.a11y-contrast header, html.a11y-contrast header *, html.a11y-contrast aside, html.a11y-contrast aside *, html.a11y-contrast [class*="bg-haifa-navy"], html.a11y-contrast [class*="bg-haifa-navy"] *, html.a11y-contrast [class*="bg-[#1f3343]"], html.a11y-contrast [class*="bg-[#1f3343]"] * { color: #ffffff !important; } html.a11y-contrast header, html.a11y-contrast aside, html.a11y-contrast [class*="bg-haifa-navy"], html.a11y-contrast [class*="bg-[#1f3343]"] { background-color: #000000 !important; }