upskill-event-manager/assets/css/hvac-accessibility-fixes.css
Ben Reed cdc5ea85f4 feat: Add comprehensive CSS, JavaScript and theme asset infrastructure
Add massive collection of CSS, JavaScript and theme assets that were previously excluded:

**CSS Files (681 total):**
- HVAC plugin-specific styles (hvac-*.css): 34 files including dashboard, certificates, registration, mobile nav, accessibility fixes, animations, and welcome popup
- Theme framework files (Astra, builder systems, layouts): 200+ files
- Plugin compatibility styles (WooCommerce, WPForms, Elementor, Contact Form 7): 150+ files
- WordPress core and editor styles: 50+ files
- Responsive and RTL language support: 200+ files

**JavaScript Files (400+ total):**
- HVAC plugin functionality (hvac-*.js): 27 files including menu systems, dashboard enhancements, profile sharing, mobile responsive features, accessibility, and animations
- Framework and library files: jQuery plugins, GSAP, AOS, Swiper, Chart.js, Lottie, Isotope
- Plugin compatibility scripts: WPForms, WooCommerce, Elementor, Contact Form 7, LifterLMS
- WordPress core functionality: customizer, admin, block editor compatibility
- Third-party integrations: Stripe, SMTP, analytics, search functionality

**Assets:**
- Certificate background images and logos
- Comprehensive theme styling infrastructure
- Mobile-responsive design systems
- Cross-browser compatibility assets
- Performance-optimized minified versions

**Updated .gitignore:**
- Fixed asset directory whitelisting patterns to properly include CSS/JS/images
- Added proper directory structure recognition (!/assets/css/, !/assets/js/, etc.)
- Maintains security by excluding sensitive files while including essential assets

This commit provides the complete frontend infrastructure needed for:
- Full theme functionality and styling
- Plugin feature implementations
- Mobile responsiveness and accessibility
- Cross-browser compatibility
- Performance optimization
- Developer workflow support
2025-08-11 16:20:31 -03:00

108 lines
No EOL
2.4 KiB
CSS

/**
* HVAC Accessibility Fixes
* Addresses accessibility issues identified by PowerMapper audit
*/
/* Improve color contrast for menu items */
.menu-text {
/* Ensure better contrast ratios for text visibility */
color: #2c3e50 !important; /* Dark blue-gray for better contrast */
}
/* Active/hover states for menu items */
.menu-item:hover .menu-text,
.menu-item:focus .menu-text {
color: #1a252f !important; /* Even darker for active states */
}
/* Ensure ARIA buttons in third-party plugins have better accessibility */
[role="button"] {
/* Add minimum touch target size */
min-width: 44px;
min-height: 44px;
}
/* Improve focus indicators */
[role="button"]:focus,
button:focus,
.hvac-trainer-card:focus,
a:focus {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
/* Ensure trainer badges don't cause layout shift */
.hvac-mq-badge {
width: 35px;
height: 35px;
display: block;
}
/* Screen reader improvements */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Improve MapGeo button accessibility where possible */
.imapsSprite-group[role="button"] {
/* Add screen reader text for map buttons */
position: relative;
}
.imapsSprite-group[role="button"]::before {
content: "Map marker";
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.menu-text {
color: #000000 !important;
}
.hvac-trainer-card {
border: 2px solid #000000;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Focus management for trainer cards */
.hvac-trainer-card {
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hvac-trainer-card:hover,
.hvac-trainer-card:focus {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Ensure proper color contrast for certification badges */
.hvac-trainer-card .certification-type {
background-color: #2c3e50;
color: #ffffff;
padding: 4px 8px;
border-radius: 4px;
font-weight: 500;
}