/* ═══════════════════════════════════════════════════ CIU INSPECTOR — ACCESSIBILITY / VISUAL IMPAIRMENT TOOLS Appended via header.php — does NOT modify style.css ═══════════════════════════════════════════════════ */ /* ── ACCESSIBILITY TOOLBAR ──────────────────────────── */ #a11y-toolbar { display: flex; align-items: center; gap: 0.35rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.5rem; flex-shrink: 0; } #a11y-toolbar .a11y-label { font-family: var(--font-head); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 0.15rem; white-space: nowrap; } /* All toolbar buttons */ .a11y-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); cursor: pointer; font-family: var(--font-head); font-weight: 700; line-height: 1; padding: 0.3rem 0.5rem; transition: background 0.15s, border-color 0.15s, color 0.15s; font-size: 0.82rem; min-width: 30px; min-height: 30px; white-space: nowrap; } .a11y-btn:hover { border-color: var(--accent); color: var(--accent); } .a11y-btn.active { background: var(--accent); border-color: var(--accent); color: #000; } /* Font size buttons */ #a11y-fs-down { font-size: 0.7rem; } #a11y-fs-reset { font-size: 0.82rem; } #a11y-fs-up { font-size: 0.95rem; } /* Divider between groups */ .a11y-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; margin: 0 0.1rem; } /* ── FONT SIZE STEPS ────────────────────────────────── */ /* Applied to element so everything scales with em/rem */ html.a11y-fs-1 { font-size: 90%; } /* smaller */ html.a11y-fs-2 { font-size: 100%; } /* default */ html.a11y-fs-3 { font-size: 115%; } /* large */ html.a11y-fs-4 { font-size: 130%; } /* x-large */ html.a11y-fs-5 { font-size: 150%; } /* xx-large */ html.a11y-fs-6 { font-size: 175%; } /* huge */ html.a11y-fs-7 { font-size: 200%; } /* x-huge */ html.a11y-fs-8 { font-size: 225%; } /* xx-huge */ html.a11y-fs-9 { font-size: 250%; } /* max */ /* ── HIGH CONTRAST: WHITE ON BLACK ─────────────────── */ html.a11y-hc-wb { --bg: #000000; --surface: #1c1c1c; --surface2: #2e2e2e; --border: #ffffff; --text: #ffffff; --muted: #cccccc; --accent: #ffff00; --accent2: #ff9900; --danger: #ff4444; --good: #00ff88; } html.a11y-hc-wb body { background: #000 !important; color: #fff !important; } html.a11y-hc-wb a { color: #ffff00 !important; text-decoration: underline !important; } html.a11y-hc-wb input[type="text"], html.a11y-hc-wb input[type="password"], html.a11y-hc-wb input[type="email"], html.a11y-hc-wb input[type="number"], html.a11y-hc-wb input[type="tel"], html.a11y-hc-wb select, html.a11y-hc-wb textarea { background: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-hc-wb .insp-number, html.a11y-hc-wb .insp-detail { color: #ffffff !important; } /* ── HIGH CONTRAST: YELLOW ON BLACK ────────────────── */ html.a11y-hc-yb { --bg: #000000; --surface: #1a1a00; --surface2: #2a2a00; --border: #ffff00; --text: #ffff00; --muted: #cccc00; --accent: #ffd700; --accent2: #ff9900; --danger: #ff6666; --good: #00ff88; } html.a11y-hc-yb body { background: #000 !important; color: #ffff00 !important; } html.a11y-hc-yb a { color: #ffd700 !important; text-decoration: underline !important; } html.a11y-hc-yb input[type="text"], html.a11y-hc-yb input[type="password"], html.a11y-hc-yb input[type="email"], html.a11y-hc-yb input[type="number"], html.a11y-hc-yb input[type="tel"], html.a11y-hc-yb select, html.a11y-hc-yb textarea { background: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important; } html.a11y-hc-yb .insp-number, html.a11y-hc-yb .insp-detail { color: #ffff00 !important; } /* ── TEXT SPACING (Dyslexia-friendly) ───────────────── */ html.a11y-spacing body, html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing label, html.a11y-spacing td, html.a11y-spacing th, html.a11y-spacing input, html.a11y-spacing select, html.a11y-spacing textarea { line-height: 1.9 !important; letter-spacing: 0.04em !important; word-spacing: 0.16em !important; } html.a11y-spacing p, html.a11y-spacing li { margin-bottom: 0.6em !important; } /* ── RESPONSIVE: COLLAPSE TOOLBAR ON SMALL SCREENS ─── */ @media (max-width: 600px) { #a11y-toolbar .a11y-label { display: none; } #a11y-toolbar { gap: 0.25rem; padding: 0.2rem 0.35rem; } } @media (max-width: 420px) { #a11y-toolbar { order: 10; width: 100%; justify-content: center; border-radius: 0; border-left: none; border-right: none; border-top: none; } } /* ── HIGH CONTRAST: CARD & SECTION VISIBILITY ────────── Cards use --surface/--surface2 variables (improved above vs original to give clear separation from --bg). These rules handle elements with hardcoded colours that the variable changes cannot reach. ──────────────────────────────────────────────────────── */ /* Thicker borders on every card/section variant */ html.a11y-hc-wb .card, html.a11y-hc-wb .card-header, html.a11y-hc-wb .insp-card, html.a11y-hc-wb .insp-row, html.a11y-hc-wb .section-card, html.a11y-hc-wb .modal, html.a11y-hc-wb #section { border-width: 2px !important; } html.a11y-hc-yb .card, html.a11y-hc-yb .card-header, html.a11y-hc-yb .insp-card, html.a11y-hc-yb .insp-row, html.a11y-hc-yb .section-card, html.a11y-hc-yb .modal, html.a11y-hc-yb #section { border-width: 2px !important; } /* .subsection-header — hardcoded purple #9470dc in prepurchase-report2.php */ html.a11y-hc-wb .subsection-header { background: #2e2e2e !important; color: #ffffff !important; border: 2px solid #ffffff !important; } html.a11y-hc-yb .subsection-header { background: #2a2a00 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; } /* .p2-insp-num — hardcoded rgba border & background */ html.a11y-hc-wb .p2-insp-num { background: #1c1c1c !important; border-color: #ffffff !important; color: #ffffff !important; } html.a11y-hc-yb .p2-insp-num { background: #1a1a00 !important; border-color: #ffff00 !important; color: #ffff00 !important; } /* Focus rings — replace rgba(accent, 0.12) with solid ring */ html.a11y-hc-wb input:focus, html.a11y-hc-wb select:focus, html.a11y-hc-wb textarea:focus { box-shadow: 0 0 0 3px #ffffff !important; } html.a11y-hc-yb input:focus, html.a11y-hc-yb select:focus, html.a11y-hc-yb textarea:focus { box-shadow: 0 0 0 3px #ffff00 !important; } /* .jim-alert — hardcoded dark-red background */ html.a11y-hc-wb .jim-alert { background: #2e2e2e !important; border-left-color: #ff4444 !important; color: #ff4444 !important; } html.a11y-hc-yb .jim-alert { background: #2a2a00 !important; border-left-color: #ff6666 !important; color: #ff6666 !important; } /* .insp-card hover */ html.a11y-hc-wb .insp-card:hover { border-color: #ffff00 !important; } html.a11y-hc-yb .insp-card:hover { border-color: #ffd700 !important; } /* ── HIGH CONTRAST: INSPECTION CARD BUTTON FIX ────────── .insp-open-btn is