/* Blue used for field :focus border. */ .wpforms-admin-page input:focus, .wpforms-admin-page select:focus, .wpforms-admin-page textarea:focus { border: 1px solid #2271b1 !important; box-shadow: 0 0 0 1px #2271b1 !important; } /* Blue used for buttons and links. */ .wpforms-admin-page .wpforms-btn-blue { background-color: #2271b1; border-color: #2271b1; } .wpforms-admin-page .wpforms-btn-blue { background-color: #2271b1; border-color: #2271b1; } body div.jconfirm div.jconfirm-box input[type=text]:not(.choices__input):focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; } /* Darker blue for button and link :hover/:focus. */ .wpforms-admin-page .wpforms-btn-blue:hover { background-color: #135e96; border-color: #135e96; } /* Anywhere we use color: red; should be changed to #d63638. Standard red used for errors, trash icons, etc.*/ body div.jconfirm div.jconfirm-box .error { color: #d63638; } #wpforms-entries-single #wpforms-entry-notes .wpforms-entry-notes-byline .note-delete:hover { color: #d63638; } #wpforms-entries-single #wpforms-entry-details .submitdelete:hover { color: #d63638; } #wpforms-entries-list .wp-list-table .delete:hover { color: #d63638; } #wpforms-admin-addons .addon-item .status .status-active { color: #00a32a; } #wpforms-admin-addons .addon-item .status .status-installed { color: #d63638; } #wpforms-admin-addons .addon-item .actions .msg.error { color: #d63638; } .addon-item .action-button button.status-installed .fa { color: #d63638; } .addon-item .action-button button.status-active .fa { color: #00a32a; } .addon-item .action-button button.loading .fa { color: #666; } .wpforms-admin-settings #wpforms-tools-entries-export #wpforms-tools-entries-export-process-msg.wpforms-error, .wpforms-admin-settings #wpforms-tools-entries-export #wpforms-tools-entries-export-selectform-msg.wpforms-error { border-color: #d63638; } .wpforms-admin-settings #wpforms-importer-process .status .item .status-icon.fa-times, .wpforms-admin-settings #wpforms-importer-process .status .item .status-icon.fa-exclamation-circle { color: #d63638; } .wpforms-admin-content-geolocation .msg.error { border-left: 4px solid #d63638; } #wpforms-notifications .dismiss:hover { color: #d63638 !important; } #wpforms-reset-filter .reset:focus, #wpforms-reset-filter .reset:hover { color: #d63638; } .wpforms-dyk .wpforms-dyk-buttons button.wpforms-dismiss-button:hover { color: #d63638; } #wpforms-admin-analytics .step .error, #wpforms-admin-smtp .step .error { color: #d63638; } /* Green used for confirmation on the addons page. */ #wpforms-admin-addons #wpforms-admin-addons-list .list .addon-item .actions .msg.success { color: #00a32a; } #wpforms-admin-about .wpforms-admin-about-section ul.list-features li .fa { color: #00a32a; } .wpforms-admin-settings .wpforms-setting-row .progress-bar.complete { border: 1px solid #00a32a; } .wpforms-admin-settings .checkbox-multiselect-columns ul li label.checked:before { color: #00a32a; } .wpforms-admin-settings #wpforms-importer-process .status .item .status-icon.fa-check { color: #00a32a; } /* Focus Management Styles - WCAG 2.1 Compliance */ /* Added for keyboard accessibility and screen reader support */ /* Button Focus Styles */ .hvac-button:focus, .hvac-content .button:focus, .hvac-content button:focus, .hvac-content input[type="submit"]:focus, .hvac-email-submit:focus, .hvac-filter-submit:focus, .hvac-certificate-actions button:focus, .hvac-certificate-actions a:focus { outline: 2px solid #005fcc; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); border-radius: 4px; } /* Input Focus Styles */ .hvac-form-input:focus, .hvac-content input[type="text"]:focus, .hvac-content input[type="email"]:focus, .hvac-content input[type="password"]:focus, .hvac-content input[type="url"]:focus, .hvac-content textarea:focus, .hvac-content select:focus, .hvac-email-form-row input:focus, .hvac-email-form-row textarea:focus, .hvac-filter-group input:focus, .hvac-filter-group select:focus { outline: 2px solid #005fcc; outline-offset: 2px; border-color: #005fcc; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); } /* Link Focus Styles */ .hvac-content a:focus, .hvac-event-link:focus, .hvac-certificate-link:focus, .hvac-attendee-profile-icon:focus, .hvac-dashboard-nav a:focus, .hvac-email-navigation a:focus { outline: 2px solid #005fcc; outline-offset: 2px; text-decoration: underline; background-color: rgba(0, 95, 204, 0.1); border-radius: 2px; } /* Interactive Element Focus Styles */ .hvac-attendee-checkbox:focus, .hvac-select-all-container input[type="checkbox"]:focus, .hvac-modal-close:focus, .hvac-certificate-table tr:focus { outline: 2px solid #005fcc; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); } /* High Contrast Mode Support */ @media (prefers-contrast: high) { .hvac-content *:focus { outline: 3px solid #000000; outline-offset: 2px; background-color: #ffff00; color: #000000; } } /* Focus-visible polyfill support */ /* Reset focus for mouse users while preserving keyboard accessibility */ .js-focus-visible :focus:not(.focus-visible) { outline: none; box-shadow: none; } /* Ensure focus is visible for keyboard users */ .js-focus-visible .focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }