@charset "UTF-8"; /* Copyright (C) 2026 Moko Consulting * * This file is part of a Moko Consulting project. * * SPDX-License-Identifier: GPL-3.0-or-later * * FILE INFORMATION * DEFGROUP: Joomla.Template.Site * INGROUP: MokoCassiopeia.Accessibility * REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia * PATH: ./media/css/a11y-high-contrast.css * VERSION: 03.09.14 * BRIEF: High-contrast stylesheet for accessibility toolbar */ /* =================================================================== * HIGH CONTRAST MODE * Applied when .a11y-high-contrast is on . * Overrides theme variables to maximise contrast ratios (WCAG AAA). * =================================================================== */ /* ── Light mode high contrast ─────────────────────────────────────── */ :root[data-bs-theme="light"].a11y-high-contrast { --body-color: #000; --body-color-rgb: 0, 0, 0; --body-bg: #fff; --body-bg-rgb: 255, 255, 255; --heading-color: #000; --emphasis-color: #000; --secondary-color: #000000bf; --tertiary-color: #00000080; --muted-color: #333; /* Links — strong blue on white */ --color-link: #0000ee; --link-color: #0000ee; --link-color-rgb: 0, 0, 238; --color-hover: #cc0000; --link-hover-color: #cc0000; --link-hover-color-rgb: 204, 0, 0; /* Borders — visible on all backgrounds */ --border-color: #000; --border-color-soft: #333; /* Backgrounds */ --secondary-bg: #e0e0e0; --secondary-bg-rgb: 224, 224, 224; --tertiary-bg: #f0f0f0; --tertiary-bg-rgb: 240, 240, 240; /* Navigation */ --nav-bg-color: #000; --nav-text-color: #fff; --mainmenu-nav-link-color: #fff; /* Buttons */ --btn-color: #fff; --btn-bg: #000; --btn-border-color: #000; --btn-hover-color: #000; --btn-hover-bg: #ffff00; --btn-hover-border-color: #000; --btn-active-color: #000; --btn-active-bg: #ffff00; --btn-active-border-color: #000; /* Forms */ --input-color: #000; --input-bg: #fff; --input-border-color: #000; --input-focus-color: #000; --input-focus-bg: #ffffcc; --input-focus-border-color: #0000ee; --input-placeholder-color: #555; /* Cards */ --card-border-color: #000; --card-bg: #fff; --card-cap-bg: #e0e0e0; /* Tables */ --table-color: #000; --table-bg: #fff; --table-border-color: #000; --table-striped-bg: #f0f0f0; --table-hover-bg: #ffff99; /* Alerts */ --alert-border-width: 2px; /* Code */ --code-color: #000; --code-bg-color: #ffffcc; /* Selection */ --selection-bg: #0000ee; --selection-ink: #fff; /* Focus indicator — always visible */ --focus-ring-color: #0000ee; --focus-ring-width: 3px; } /* ── Dark mode high contrast ──────────────────────────────────────── */ :root[data-bs-theme="dark"].a11y-high-contrast { --body-color: #fff; --body-color-rgb: 255, 255, 255; --body-bg: #000; --body-bg-rgb: 0, 0, 0; --heading-color: #fff; --emphasis-color: #fff; --secondary-color: #ffffffbf; --tertiary-color: #ffffff80; --muted-color: #ccc; /* Links — bright yellow on black */ --color-link: #ffff00; --link-color: #ffff00; --link-color-rgb: 255, 255, 0; --color-hover: #00ffff; --link-hover-color: #00ffff; --link-hover-color-rgb: 0, 255, 255; /* Borders */ --border-color: #fff; --border-color-soft: #ccc; /* Backgrounds */ --secondary-bg: #1a1a1a; --secondary-bg-rgb: 26, 26, 26; --tertiary-bg: #111; --tertiary-bg-rgb: 17, 17, 17; /* Navigation */ --nav-bg-color: #000; --nav-text-color: #fff; --mainmenu-nav-link-color: #ffff00; /* Buttons */ --btn-color: #000; --btn-bg: #ffff00; --btn-border-color: #ffff00; --btn-hover-color: #000; --btn-hover-bg: #00ffff; --btn-hover-border-color: #00ffff; --btn-active-color: #000; --btn-active-bg: #00ffff; --btn-active-border-color: #00ffff; /* Forms */ --input-color: #fff; --input-bg: #000; --input-border-color: #fff; --input-focus-color: #fff; --input-focus-bg: #1a1a1a; --input-focus-border-color: #ffff00; --input-placeholder-color: #aaa; /* Cards */ --card-border-color: #fff; --card-bg: #000; --card-cap-bg: #1a1a1a; /* Tables */ --table-color: #fff; --table-bg: #000; --table-border-color: #fff; --table-striped-bg: #111; --table-hover-bg: #333; /* Alerts */ --alert-border-width: 2px; /* Code */ --code-color: #00ff00; --code-bg-color: #1a1a1a; /* Selection */ --selection-bg: #ffff00; --selection-ink: #000; /* Focus indicator */ --focus-ring-color: #ffff00; --focus-ring-width: 3px; } /* ── Shared high-contrast overrides (both modes) ──────────────────── */ .a11y-high-contrast * { border-color: var(--border-color) !important; } .a11y-high-contrast *:focus-visible { outline: var(--focus-ring-width, 3px) solid var(--focus-ring-color, #0000ee) !important; outline-offset: 2px !important; } .a11y-high-contrast img { outline: 2px solid var(--border-color); } .a11y-high-contrast a { text-decoration: underline !important; text-decoration-thickness: 2px !important; } .a11y-high-contrast button, .a11y-high-contrast .btn, .a11y-high-contrast input, .a11y-high-contrast select, .a11y-high-contrast textarea { border-width: 2px !important; border-style: solid !important; } .a11y-high-contrast .badge, .a11y-high-contrast .alert { border: 2px solid var(--border-color) !important; } /* Ensure disabled states are still distinguishable */ .a11y-high-contrast [disabled], .a11y-high-contrast .disabled { opacity: .5 !important; text-decoration: line-through !important; }