/* ============================================================ * FILE: static/css/contrast.css * Clarifyr Design System — Contrast & Accessibility Modes * GOLD LEVEL — WCAG 2.2 AA * ============================================================ * Contains: * - High contrast mode * - Dark mode * - Forced colors mode * - Premium contrast overrides * - Admin contrast overrides * - Focus ring overrides * ============================================================ */ /* ------------------------------------------------------------ * HIGH CONTRAST MODE (WCAG 2.2 AA) * Activated via: * ------------------------------------------------------------ */ body.high-contrast { background-color: var(--clr-contrast-bg) !important; color: var(--clr-contrast-fg) !important; } body.high-contrast * { border-color: var(--clr-contrast-border) !important; color: var(--clr-contrast-fg) !important; background-image: none !important; } /* Links */ body.high-contrast a { color: var(--clr-contrast-primary) !important; text-decoration: underline !important; } /* Buttons */ body.high-contrast .btn, body.high-contrast button { background-color: transparent !important; border: 2px solid var(--clr-contrast-primary) !important; color: var(--clr-contrast-primary) !important; } body.high-contrast .btn:hover { background-color: var(--clr-contrast-primary) !important; color: #000 !important; } /* Cards */ body.high-contrast .card, body.high-contrast .metric-card, body.high-contrast .premium-card, body.high-contrast .admin-card { background-color: #000 !important; border: 2px solid var(--clr-contrast-border) !important; } /* Lists */ body.high-contrast .list-item, body.high-contrast .activity-item, body.high-contrast .project-item, body.high-contrast .document-item, body.high-contrast .report-item { background-color: #000 !important; border: 2px solid var(--clr-contrast-border) !important; } /* Alerts */ body.high-contrast .alert-success { background-color: #003300 !important; border-color: #00ff00 !important; } body.high-contrast .alert-warning { background-color: #333300 !important; border-color: #ffff00 !important; } body.high-contrast .alert-danger { background-color: #330000 !important; border-color: #ff0000 !important; } body.high-contrast .alert-info { background-color: #002233 !important; border-color: #00ffff !important; } /* Focus ring */ body.high-contrast .focus-ring:focus-visible { outline: 3px solid var(--clr-contrast-primary) !important; outline-offset: 3px !important; } /* Icons (emoji) */ body.high-contrast [aria-hidden="true"] { filter: invert(1) contrast(200%); } /* ------------------------------------------------------------ * DARK MODE * Activated via: * ------------------------------------------------------------ */ body.dark-mode { background-color: #0b0f19; color: #e5e7eb; } body.dark-mode .card, body.dark-mode .metric-card { background-color: #1a1f2d; border-color: #2a3145; } body.dark-mode .list-item { background-color: #1a1f2d; border-color: #2a3145; } body.dark-mode .btn { background-color: #2a3145; color: #e5e7eb; } body.dark-mode .btn:hover { background-color: #3a425a; } /* ------------------------------------------------------------ * FORCED COLORS MODE (Windows High Contrast) * ------------------------------------------------------------ */ @media (forced-colors: active) { * { forced-color-adjust: none; border-color: ButtonText !important; color: ButtonText !important; background-color: Canvas !important; } a { color: LinkText !important; text-decoration: underline !important; } .btn { border: 2px solid ButtonText !important; background-color: Canvas !important; color: ButtonText !important; } .focus-ring:focus-visible { outline: 2px solid Highlight !important; } } /* ------------------------------------------------------------ * PREMIUM CONTRAST OVERRIDES * ------------------------------------------------------------ */ body.high-contrast .premium-card { background-color: #000 !important; border-color: var(--clr-contrast-border) !important; color: var(--clr-contrast-fg) !important; } body.high-contrast .premium-value { color: var(--clr-contrast-primary) !important; } /* ------------------------------------------------------------ * ADMIN CONTRAST OVERRIDES * ------------------------------------------------------------ */ body.high-contrast .admin-card { background-color: #000 !important; border-color: var(--clr-contrast-border) !important; color: var(--clr-contrast-fg) !important; } body.high-contrast .admin-value { color: var(--clr-contrast-primary) !important; } /* ------------------------------------------------------------ * ORGANIZATION DASHBOARD CONTRAST FIXES * ------------------------------------------------------------ */ body.high-contrast .org-header { border-bottom: 2px solid var(--clr-contrast-border) !important; } body.high-contrast .org-header-logo { border: 2px solid var(--clr-contrast-border) !important; } /* ------------------------------------------------------------ * TABLES * ------------------------------------------------------------ */ body.high-contrast .table th, body.high-contrast .table td { border-color: var(--clr-contrast-border) !important; } /* ------------------------------------------------------------ * UPLOAD COMPONENTS * ------------------------------------------------------------ */ body.high-contrast .upload-box { border-color: var(--clr-contrast-primary) !important; background-color: #000 !important; } body.high-contrast .upload-progress { background-color: #333 !important; } body.high-contrast .upload-progress-bar { background-color: var(--clr-contrast-primary) !important; } /* ------------------------------------------------------------ * PUBLIC TOPBAR + AUTH SCREENS * ------------------------------------------------------------ */ body.high-contrast .topbar, body.high-contrast .topbar-logo-wrapper, body.high-contrast .topbar-mobile-panel, body.high-contrast .topbar-products .product-pill { background-color: var(--clr-contrast-bg) !important; border-color: var(--clr-contrast-border) !important; } body.high-contrast .lang-option { color: var(--clr-contrast-primary) !important; border: 1px solid var(--clr-contrast-primary) !important; text-decoration: underline !important; } body.high-contrast .lang-option.active, body.high-contrast .lang-option[aria-current="page"] { background-color: var(--clr-contrast-primary) !important; color: #000000 !important; } body.high-contrast .login-hero, body.high-contrast .login-container, body.high-contrast .login-box, body.high-contrast .form-input, body.high-contrast input.form-input, body.high-contrast textarea.form-input { background-color: var(--clr-contrast-bg) !important; color: var(--clr-contrast-fg) !important; border-color: var(--clr-contrast-border) !important; } body.high-contrast input, body.high-contrast textarea, body.high-contrast select { background-color: var(--clr-contrast-bg) !important; color: var(--clr-contrast-fg) !important; border: 2px solid var(--clr-contrast-border) !important; -webkit-text-fill-color: var(--clr-contrast-fg) !important; box-shadow: 0 0 0 1000px var(--clr-contrast-bg) inset !important; } body.high-contrast input.form-input::placeholder, body.high-contrast textarea.form-input::placeholder { color: var(--clr-contrast-fg) !important; opacity: 0.9 !important; } body.high-contrast .login-box .button, body.high-contrast .login-box .btn, body.high-contrast .login-box button { background-color: transparent !important; color: var(--clr-contrast-primary) !important; border-color: var(--clr-contrast-primary) !important; } /* ------------------------------------------------------------ * ORGANIZATION PORTAL SURFACES + ACTIONS * ------------------------------------------------------------ */ body.high-contrast .sidebar-header, body.high-contrast .org-hero-card, body.high-contrast .org-panel, body.high-contrast .premium-status-card, body.high-contrast .premium-features-card, body.high-contrast .org-quicklink, body.high-contrast .org-guidance-item, body.high-contrast .project-item, body.high-contrast .engine-item, body.high-contrast .feature-item, body.high-contrast .member-item, body.high-contrast .org-choice-group, body.high-contrast .flash, body.high-contrast .portal-mobile-panel { background: var(--clr-contrast-bg) !important; background-color: var(--clr-contrast-bg) !important; border: 2px solid var(--clr-contrast-border) !important; box-shadow: none !important; } body.high-contrast .button, body.high-contrast .btn, body.high-contrast button, body.high-contrast .topbar-portal-action { background: transparent !important; background-color: transparent !important; border: 2px solid var(--clr-contrast-primary) !important; color: var(--clr-contrast-primary) !important; text-decoration: none !important; } body.high-contrast .button:hover, body.high-contrast .button:focus-visible, body.high-contrast .btn:hover, body.high-contrast .btn:focus-visible, body.high-contrast button:hover, body.high-contrast button:focus-visible, body.high-contrast .topbar-portal-action:hover, body.high-contrast .topbar-portal-action:focus-visible { background: var(--clr-contrast-primary) !important; background-color: var(--clr-contrast-primary) !important; color: var(--clr-contrast-bg) !important; } body.high-contrast .org-quicklink, body.high-contrast .sidebar-item { text-decoration: none !important; } body.high-contrast .text-success { color: #00ff00 !important; } body.high-contrast .text-warning { color: #ffff00 !important; } body.high-contrast .text-danger { color: #ff5c5c !important; }