/* ======================================== Contrast Toggle Plugin Styles v2.0.0 ======================================== */ /* ======================================== Screen Reader Utilities ======================================== */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ======================================== Main Container ======================================== */ #contrast-toggle-container { position: fixed; bottom: 20px; left: 20px; z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ======================================== Toggle Button Base Styles ======================================== */ #contrast-toggle-btn { background: #f1f1f1; color: #222222; border: none; border-radius: 50px; padding: 12px 20px; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; min-width: 120px; justify-content: center; position: relative; overflow: hidden; } /* ======================================== Focus Management & Accessibility ======================================== */ /* Enhanced focus styles for better visibility */ #contrast-toggle-btn:focus-visible, #contrast-toggle-btn.keyboard-focused { outline: 3px solid #3498db; outline-offset: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(52, 152, 219, 0.3); } /* Different focus style for mouse interactions */ #contrast-toggle-btn.mouse-interaction:focus { outline: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* High contrast mode focus enhancement */ body.high-contrast #contrast-toggle-btn:focus-visible, body.high-contrast #contrast-toggle-btn.keyboard-focused { outline: 3px solid #000000; outline-offset: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(0, 0, 0, 0.5); } /* ======================================== Button States & Interactions ======================================== */ /* Hover state */ #contrast-toggle-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } /* Active/pressed state */ #contrast-toggle-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Processing state */ #contrast-toggle-btn.processing { opacity: 0.7; cursor: not-allowed; pointer-events: none; } /* Success feedback animation */ #contrast-toggle-btn.success-flash { transform: scale(1.05); box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4); } /* Active contrast mode styling */ #contrast-toggle-btn.contrastToggleActive_c1s4tfqb { background: #222222; color: #f1f1f1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } #contrast-toggle-btn.contrastToggleActive_c1s4tfqb:hover { background: #333333; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); } /* Icon rotation for active state */ #contrast-toggle-btn.contrastToggleActive_c1s4tfqb .contrast-icon svg { transform: rotate(180deg); transition: transform 0.3s ease; } /* ======================================== Icon & Text Elements ======================================== */ .contrast-icon { font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } .contrast-icon svg { transition: transform 0.3s ease, fill 0.3s ease; width: 14px; height: 15px; } .contrast-text { font-size: 14px; font-weight: 500; user-select: none; } /* ======================================== Smooth Transitions ======================================== */ body.contrast-transitions, body.contrast-transitions * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ======================================== High Contrast Mode Styles ======================================== */ /* Target Uncode theme specific elements */ body.high-contrast .style-accent-bg { background-color: #f1f1f1 !important; } body.high-contrast .style-dark, body.high-contrast .style-dark p, body.high-contrast .style-dark p strong, body.high-contrast .style-dark h1, body.high-contrast .style-dark h2, body.high-contrast .style-dark h3, body.high-contrast .style-dark h4, body.high-contrast .style-dark h5, body.high-contrast .style-dark h6 { color: #222222 !important; } body.high-contrast svg.uncode-row-divider path { fill: #f1f1f1 !important; } body.high-contrast .style-light .link-hover, body.high-contrast .style-dark .style-light .link-hover, body.high-contrast .style-light a:not(.btn-text-skin):hover, body.high-contrast .style-dark .style-light a:not(.btn-text-skin):hover, body.high-contrast .style-light a:not(.btn-text-skin):focus, body.high-contrast .style-dark .style-light a:not(.btn-text-skin):focus, body.high-contrast .style-light a.active, body.high-contrast .style-dark .style-light a.active, body.high-contrast .style-light .tmb .t-entry-text .t-entry-title a:hover, body.high-contrast .style-dark .style-light .tmb .t-entry-text .t-entry-title a:hover, body.high-contrast .style-light .tmb .t-entry-text .t-entry-title a:focus, body.high-contrast .style-dark .style-light .tmb .t-entry-text .t-entry-title a:focus, body.high-contrast .style-light .tmb-content-under.tmb .t-entry p.t-entry-author a:hover span, body.high-contrast .style-dark .style-light .tmb-content-under.tmb .t-entry p.t-entry-author a:hover span, body.high-contrast .style-light .tmb-content-lateral.tmb .t-entry p.t-entry-author a:hover span, body.high-contrast .style-dark .style-light .tmb-content-lateral.tmb .t-entry p.t-entry-author a:hover span, body.high-contrast .style-light .tmb .t-entry p.t-entry-comments .extras a:hover i, body.high-contrast .style-dark .style-light .tmb .t-entry p.t-entry-comments .extras a:hover i, body.high-contrast .style-light .tmb .t-entry p.t-entry-comments .extras a.active i, body.high-contrast .style-dark .style-light .tmb .t-entry p.t-entry-comments .extras a.active i, body.high-contrast .style-light .tmb .t-entry p.t-entry-comments .extras a:focus i, body.high-contrast .style-dark .style-light .tmb .t-entry p.t-entry-comments .extras a:focus i, body.high-contrast .style-light .drop-hover-accent.uncode-post-titles .tmb:hover .t-entry-title *, body.high-contrast .style-dark .style-light .drop-hover-accent.uncode-post-titles .tmb:hover .t-entry-title *, body.high-contrast .style-light .tmb.tmb-table .t-inside-post-table a.t-entry-table-typography:hover, body.high-contrast .style-dark .style-light .tmb.tmb-table .t-inside-post-table a.t-entry-table-typography:hover, body.high-contrast .style-light .tmb.tmb-table .t-inside-post-table .t-entry-table-typography a:hover, body.high-contrast .style-dark .style-light .tmb.tmb-table .t-inside-post-table .t-entry-table-typography a:hover, body.high-contrast .style-light .tmb.tmb-table .t-inside-post-table a.t-entry-table-typography:focus, body.high-contrast .style-dark .style-light .tmb.tmb-table .t-inside-post-table a.t-entry-table-typography:focus, body.high-contrast .style-light .tmb.tmb-table .t-inside-post-table .t-entry-table-typography a:focus, body.high-contrast .style-dark .style-light .tmb.tmb-table .t-inside-post-table .t-entry-table-typography a:focus, body.high-contrast .style-light .widget_nav_menu li.active>a, body.high-contrast .style-dark .style-light .widget_nav_menu li.active>a, body.high-contrast .style-light div[class*=sharer-].share-button label:hover, body.high-contrast .style-dark .style-light div[class*=sharer-].share-button label:hover, body.high-contrast .style-light div[class*=sharer-].share-button label:focus, body.high-contrast .style-dark .style-light div[class*=sharer-].share-button label:focus { color: #222222 !important; } /* Enhanced contrast for better readability */ body.high-contrast .btn-accent { background-color: #222222 !important; color: #f1f1f1 !important; border-color: #222222 !important; } body.high-contrast .btn-accent:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover, body.high-contrast .btn-accent:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):focus, body.high-contrast .btn-accent:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):active { color: #222222 !important; } body.high-contrast .btn-accent:not(.btn-hover-nobg):not(.icon-animated):hover, body.high-contrast .btn-accent:not(.btn-hover-nobg):not(.icon-animated):focus, body.high-contrast .btn-accent:not(.btn-hover-nobg):not(.icon-animated):active { border-color: #222222 !important; text-decoration: none !important; } body.high-contrast a.btn-link:hover { text-decoration: underline; } body.high-contrast .btn-color-848289:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover, body.high-contrast .btn-color-848289:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):focus, body.high-contrast .btn-color-848289:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):active { color: #222222 !important; } body.high-contrast .btn-color-848289:not(.btn-hover-nobg):not(.icon-animated):hover, body.high-contrast .btn-color-848289:not(.btn-hover-nobg):not(.icon-animated):focus, body.high-contrast .btn-color-848289:not(.btn-hover-nobg):not(.icon-animated):active { border-color: #222222 !important; } body.high-contrast .text-accent-color { color: #222222 !important; fill: #222222 !important; } body.high-contrast .border-accent-color { border-color: #222222 !important; } body.high-contrast .btn-color-848289 { color: #ffffff !important; background-color: #222222 !important; border-color: #222222 !important; } body.high-contrast .text-color-848289-color { color: #222222 !important; fill: #222222 !important; } body.high-contrast .badge { background-color: #222222 !important; color: #ffffff !important; } /* Fluent Forms Enhanced contrast for better readability */ /* fluent forms header */ body.high-contrast .uncode-divider-wrap svg path { fill: #f1f1f1 !important; } body.high-contrast .ff_conv_app_3 { background-color: #f1f1f1 !important } body.high-contrast .ff_conv_app_3 .fh2 .f-text { color: #222222 !important; } body.high-contrast .ff_conv_app_3 .ffc-counter-div .counter-icon-span svg { fill: #222222 !important; } body.high-contrast .ff_conv_app_3 .ffc-counter-div span { color: #222222 !important; } body.high-contrast .ff_conv_app_3 .f-answer .f-radios-wrap ul li { border: 1px solid #222222 !important; } body.high-contrast .ff_conv_app_3 .f-label-wrap, .ff_conv_app_3 .f-answer { color: #222222 !important; } body.high-contrast .ff_conv_app_3 .q-inner .o-btn-action span, body.high-contrast .ff_conv_app_3 .footer-inner-wrap .f-nav a { color: #222222 !important; } body.high-contrast .ff_conv_app_3 .footer-inner-wrap .f-nav a svg { fill: #222222 !important; } body.high-contrast .link, body.high-contrast .style-dark .link, body.high-contrast .style-dark a, body.high-contrast .style-light .style-dark a, body.high-contrast .style-dark input[type=checkbox]:checked:before, body.high-contrast .style-light .style-dark input[type=checkbox]:checked:before, body.high-contrast .style-dark .widget-container a:not(.btn-text-skin), body.high-contrast .style-light .style-dark .widget-container a:not(.btn-text-skin), body.high-contrast .style-dark .widget-container a:not(.btn-text-skin):hover, body.high-contrast .style-light .style-dark .widget-container a:not(.btn-text-skin):hover, body.high-contrast .style-dark .widget-container select, body.high-contrast .style-light .style-dark .widget-container select, body.high-contrast .style-dark .widget-container option, body.high-contrast .style-light .style-dark .widget-container option, body.high-contrast .style-dark .ajax-grid-system .grid-filters .filter-list li a, body.high-contrast .style-light .style-dark .ajax-grid-system .grid-filters .filter-list li a, body.high-contrast .style-dark .widget-ajax-active-filters .filter-list li a, body.high-contrast .style-light .style-dark .widget-ajax-active-filters .filter-list li a, body.high-contrast .style-dark .ajax-grid-system .grid-filters .filter-list li a:hover, body.high-contrast .style-light .style-dark .ajax-grid-system .grid-filters .filter-list li a:hover, body.high-contrast .style-dark .widget-ajax-active-filters .filter-list li a:hover, body.high-contrast .style-light .style-dark .widget-ajax-active-filters .filter-list li a:hover { color: #222222 !important; } /* Image swapping is now handled by JavaScript - no CSS filters needed */ /* Images are replaced with proper high-contrast versions via the media library custom field */ /* ======================================== Loading & Error States ======================================== */ /* Loading spinner for processing state */ #contrast-toggle-btn.processing::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: contrast-loading-spin 1s linear infinite; } @keyframes contrast-loading-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #contrast-toggle-btn.processing .contrast-icon, #contrast-toggle-btn.processing .contrast-text { opacity: 0; } /* ======================================== Mobile Responsiveness ======================================== */ @media (max-width: 768px) { #contrast-toggle-container { bottom: 10px; left: 10px; } #contrast-toggle-btn { padding: 10px 16px; font-size: 12px; min-width: 100px; gap: 6px; } .contrast-icon { font-size: 16px; } .contrast-icon svg { width: 12px; height: 13px; } .contrast-text { font-size: 12px; } } /* ======================================== Accessibility & Motion Preferences ======================================== */ /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { body.contrast-transitions, body.contrast-transitions *, #contrast-toggle-btn, #contrast-toggle-btn *, .contrast-icon svg { transition: none !important; animation: none !important; } #contrast-toggle-btn.success-flash { transform: none !important; } } /* High contrast mode enhancements for accessibility */ @media (prefers-contrast: high) { #contrast-toggle-btn { border: 2px solid #000000; } #contrast-toggle-btn:focus-visible { outline: 4px solid #000000; outline-offset: 3px; } } /* ======================================== Print Styles ======================================== */ @media print { #contrast-toggle-container { display: none !important; } } /* ======================================== RTL Language Support ======================================== */ [dir="rtl"] #contrast-toggle-container { left: auto; right: 20px; } @media (max-width: 768px) { [dir="rtl"] #contrast-toggle-container { right: 10px; } } /* ======================================== Dark Mode Support (OS Level) ======================================== */ @media (prefers-color-scheme: dark) { #contrast-toggle-btn { background: #333333; color: #f1f1f1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } #contrast-toggle-btn:hover { background: #444444; } #contrast-toggle-btn.contrastToggleActive_c1s4tfqb { background: #f1f1f1; color: #222222; } #contrast-toggle-btn.contrastToggleActive_c1s4tfqb:hover { background: #e1e1e1; } }