.ast-sites-dark-mode { --dark-mode-background-color: #1f2124; --dark-mode-background-hover-color: #2b2c31; --dark-mode-border-color: #3f444b; } .ast-sites-dark-mode #ast-sites-modal .astra-sites-library-template-inner, .ast-sites-dark-mode #ast-sites-modal .inner, .ast-sites-dark-mode #ast-sites-modal .astra-sites-library-template:not( .elementor-template-library-template-page ) .elementor-template-library-template-footer, .ast-sites-dark-mode #ast-sites-modal .elementor-template-library-order-input { background-color: var( --dark-mode-background-color ); } .ast-sites-dark-mode #ast-sites-modal .astra-sites__sync-wrap:hover span, .ast-sites-dark-mode #ast-sites-modal .ast-sites-modal__header__close--normal:hover i, .ast-sites-dark-mode #ast-sites-modal .back-to-layout:hover i { color: #ffffff; } .ast-sites-dark-mode #ast-sites-modal .astra-blocks-filter, .ast-sites-dark-mode #ast-sites-modal .elementor-template-library-order-input { border-color: var( --dark-mode-border-color ); } .ast-sites-dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #e0e1e3 transparent transparent transparent; } .ast-sites-dark-mode #ast-sites-modal .single-site-pages::-webkit-scrollbar, .ast-sites-dark-mode #ast-sites-modal .astra-sites-content-wrap::-webkit-scrollbar, .ast-sites-dark-mode #ast-sites-modal .single-site-pages::-webkit-scrollbar { background-color: #34383c; } .ast-sites-dark-mode #ast-sites-modal .astra-sites-content-wrap::-webkit-scrollbar-thumb, .ast-sites-dark-mode #ast-sites-modal .single-site-pages::-webkit-scrollbar-thumb { background-color: #7d7e82; } .ast-sites-dark-mode .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #e0e1e3 transparent; } .ast-sites-dark-mode #ast-sites-modal .ast-sites-floating-notice-wrap { background: #404349; } .ast-sites-dark-mode #ast-sites-modal .notice-dismiss:before { color: #e0e1e3; } .ast-sites-dark-mode #ast-sites-modal .dialog-widget-content, .ast-sites-dark-mode #ast-sites-modal .elementor-template-library-menu-item, .ast-sites-dark-mode #ast-sites-modal .astra-sites-sync-library-button span, .ast-sites-dark-mode #ast-sites-modal .ast-sites-modal__header__item > i:not( :hover ), .ast-sites-dark-mode #ast-sites-modal .astra-blocks-filter, .ast-sites-dark-mode #ast-sites-modal .elementor-template-library-order-input, .ast-sites-dark-mode.astra-sites__elementor-open #ast-sites-modal .select2-container--default .select2-selection__rendered, .ast-sites-dark-mode #ast-sites-modal .astra-sites-no-sites h3, .ast-sites-dark-mode #ast-sites-modal .back-to-layout, .ast-sites-dark-mode #ast-sites-modal .astra-sites-tooltip .dashicons-editor-help { color: #e0e1e3; } .ast-sites-dark-mode #ast-sites-modal .dialog-widget-content, .ast-sites-dark-mode #ast-sites-modal .astra-sites-no-sites .inner { background-color: var( --dark-mode-background-color ); } .ast-sites-dark-mode #ast-sites-modal .dialog-header { border-block-end: 1px solid #333438; } .ast-sites-dark-mode #ast-sites-modal.dialog-type-lightbox .dialog-header { background-color: var( --dark-mode-background-color ); } .ast-sites-dark-mode #ast-sites-modal .ast-tooltip-wrap::before { border: 8px solid #7d7e82; border-bottom-style: solid; border-right-color: transparent; border-left-color: transparent; border-top: none; } .ast-sites-dark-mode #ast-sites-modal .ast-tooltip-wrap { background: #7d7e82; } .ast-sites-dark-mode #ast-sites-modal #wp-filter-search-input { border-color: #d5dadf; border-block-end: 1px solid var( --dark-mode-border-color ); } .ast-sites-dark-mode #ast-sites-modal .ast-sites-modal__header__logo, .ast-sites-dark-mode #ast-sites-modal .back-to-layout, .ast-sites-dark-mode #ast-sites-modal .astra-sites-tooltip { border-left: 1px solid #32363a; } .ast-sites-dark-mode #ast-sites-modal .astra-sites__sync-wrap, .ast-sites-dark-mode #ast-sites-modal .ast-sites-modal__header__close--normal, .ast-sites-dark-mode #ast-sites-modal .astra-sites-tooltip { border-right: 1px solid #32363a; } .ast-sites-dark-mode #ast-sites-modal .elementor-template-library-menu-item.elementor-active { background-image: none; border-color: #fff; color: #fff; } #ast-sites-modal .inner { border: 1px solid var( --dark-mode-border-color ); } .ast-sites-dark-mode #ast-sites-modal .inner:hover { background: var( --dark-mode-background-hover-color ); } .ast-sites-dark-mode #ast-sites-modal .astra-blocks-filter { background: none; } .ast-sites-dark-mode .astra-blocks-filter option { background-color: var( --dark-mode-background-color ); } .ast-sites-dark-mode .astra-blocks-filter option:hover { background: var( --dark-mode-background-hover-color ); color: var( --dark-mode-border-color ); } /* 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; }