upskill-event-manager/assets/css/hvac-animations.css
ben 054639c95c
Some checks failed
HVAC Plugin CI/CD Pipeline / Code Quality & Standards (push) Has been cancelled
HVAC Plugin CI/CD Pipeline / Unit Tests (push) Has been cancelled
Security Monitoring & Compliance / Secrets & Credential Scan (push) Has been cancelled
Security Monitoring & Compliance / WordPress Security Analysis (push) Has been cancelled
HVAC Plugin CI/CD Pipeline / Security Analysis (push) Has been cancelled
HVAC Plugin CI/CD Pipeline / Integration Tests (push) Has been cancelled
Security Monitoring & Compliance / Dependency Vulnerability Scan (push) Has been cancelled
Security Monitoring & Compliance / Static Code Security Analysis (push) Has been cancelled
Security Monitoring & Compliance / Security Compliance Validation (push) Has been cancelled
HVAC Plugin CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
HVAC Plugin CI/CD Pipeline / Deploy to Production (push) Has been cancelled
HVAC Plugin CI/CD Pipeline / Notification (push) Has been cancelled
Security Monitoring & Compliance / Security Summary Report (push) Has been cancelled
Security Monitoring & Compliance / Security Team Notification (push) Has been cancelled
feat: complete master trainer system transformation from 0% to 100% success
- Deploy 6 simultaneous WordPress specialized agents using sequential thinking and Zen MCP
- Resolve all critical issues: permissions, jQuery dependencies, CDN mapping, security vulnerabilities
- Implement bulletproof jQuery loading system with WordPress hook timing fixes
- Create professional MapGeo Safety system with CDN health monitoring and fallback UI
- Fix privilege escalation vulnerability with capability-based authorization
- Add complete announcement admin system with modal forms and AJAX handling
- Enhance import/export functionality (54 trainers successfully exported)
- Achieve 100% operational master trainer functionality verified via MCP Playwright E2E testing

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-02 16:41:51 -03:00

595 lines
No EOL
16 KiB
CSS

/* Reduced Motion Support Added - 2025-07-23 */
/* Vendor Prefixes Added - 2025-07-23 */
/**
* HVAC Community Events Animation Effects
*
* This stylesheet contains animations and transitions for UI elements
* to create a more polished, responsive feel to the interface.
*/
/* Base transition properties */
:root {
--hvac-transition-speed: 0.2s;
--hvac-transition-timing: ease-out;
}
/* Scale-up animation for cards and important elements */
@keyframes scale-up {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-ms-transform: scale(1);
-ms-transform: scale(1);
opacity: 0.95;
}
100% {
-webkit-transform: scale(1.02);
-ms-transform: scale(1.02);
opacity: 1;
}
}
/* Fade-in animation */
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Pulse animation for notices and alerts */
@keyframes pulse {
0% {
transform: scale(1);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
}
70% {
-webkit-transform: scale(1.01);
-ms-transform: scale(1.01);
-webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(1);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
/* Slide-in animation */
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
-ms-transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
opacity: 1;
}
}
/* Common element transitions */
/* Card hover animation */
.hvac-card {
-webkit-transition: transform var(--hvac-transition-speed) var(--hvac-transition-timing),
box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing),
border-color var(--hvac-transition-speed) var(--hvac-transition-timing);
transition: transform var(--hvac-transition-speed) var(--hvac-transition-timing),
box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing),
border-color var(--hvac-transition-speed) var(--hvac-transition-timing);
}
.hvac-card:hover {
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-color: var(--hvac-primary-light, #e6f3fb);
}
/* Stat cards animation */
.hvac-event-stat-card,
.hvac-stat-card {
transition: transform var(--hvac-transition-speed) var(--hvac-transition-timing),
box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing);
}
.hvac-event-stat-card:hover,
.hvac-stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Button hover animations */
.hvac-button,
.hvac-content .button,
.hvac-content button[type="submit"],
.hvac-content input[type="submit"] {
-webkit-transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing),
color var(--hvac-transition-speed) var(--hvac-transition-timing),
transform var(--hvac-transition-speed) var(--hvac-transition-timing),
box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing);
transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing),
color var(--hvac-transition-speed) var(--hvac-transition-timing),
transform var(--hvac-transition-speed) var(--hvac-transition-timing),
box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing);
}
/* Form field transitions */
.hvac-form-input,
.hvac-content input[type="text"],
.hvac-content input[type="email"],
.hvac-content input[type="password"],
.hvac-content input[type="url"],
.hvac-content textarea,
.hvac-content select {
-webkit-transition: border-color var(--hvac-transition-speed) var(--hvac-transition-timing),
box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing),
background-color var(--hvac-transition-speed) var(--hvac-transition-timing);
transition: border-color var(--hvac-transition-speed) var(--hvac-transition-timing),
box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing),
background-color var(--hvac-transition-speed) var(--hvac-transition-timing);
}
/* Table row hover transition */
.hvac-table tbody tr,
.events-table tbody tr,
.hvac-transactions-table tbody tr {
transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing);
}
/* Link hover transition */
.hvac-content a {
-webkit-transition: color var(--hvac-transition-speed) var(--hvac-transition-timing),
text-decoration var(--hvac-transition-speed) var(--hvac-transition-timing);
transition: color var(--hvac-transition-speed) var(--hvac-transition-timing),
text-decoration var(--hvac-transition-speed) var(--hvac-transition-timing);
}
/* Alert/message transitions */
.hvac-alert,
.hvac-email-sent,
.hvac-email-error,
.login-error,
.hvac-errors,
.hvac-success {
-webkit-transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing),
transform var(--hvac-transition-speed) var(--hvac-transition-timing);
transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing),
transform var(--hvac-transition-speed) var(--hvac-transition-timing);
}
/* Animation classes that can be applied to elements */
/* Apply fade-in animation */
.hvac-animate-fade-in {
-webkit-animation: fade-in 0.5s ease-out forwards;
animation: fade-in 0.5s ease-out forwards;
}
/* Apply scale-up animation */
.hvac-animate-scale-up {
-webkit-animation: scale-up 0.3s ease-out forwards;
animation: scale-up 0.3s ease-out forwards;
}
/* Apply pulse animation */
.hvac-animate-pulse {
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}
/* Apply slide-in animations */
.hvac-animate-slide-in-right {
-webkit-animation: slide-in-right 0.3s ease-out forwards;
animation: slide-in-right 0.3s ease-out forwards;
}
.hvac-animate-slide-in-left {
-webkit-animation: slide-in-left 0.3s ease-out forwards;
animation: slide-in-left 0.3s ease-out forwards;
}
.hvac-animate-slide-in-bottom {
-webkit-animation: slide-in-bottom 0.3s ease-out forwards;
animation: slide-in-bottom 0.3s ease-out forwards;
}
/* Apply animations to specific elements */
.hvac-dashboard-stats .hvac-stat-card:nth-child(1) {
-webkit-animation: slide-in-bottom 0.3s ease-out 0.1s both;
animation: slide-in-bottom 0.3s ease-out 0.1s both;
}
.hvac-dashboard-stats .hvac-stat-card:nth-child(2) {
-webkit-animation: slide-in-bottom 0.3s ease-out 0.2s both;
animation: slide-in-bottom 0.3s ease-out 0.2s both;
}
.hvac-dashboard-stats .hvac-stat-card:nth-child(3) {
-webkit-animation: slide-in-bottom 0.3s ease-out 0.3s both;
animation: slide-in-bottom 0.3s ease-out 0.3s both;
}
.hvac-dashboard-stats .hvac-stat-card:nth-child(4) {
-webkit-animation: slide-in-bottom 0.3s ease-out 0.4s both;
animation: slide-in-bottom 0.3s ease-out 0.4s both;
}
/* Event summary stats sequence */
.hvac-event-summary-stats .hvac-event-stat-card:nth-child(1) {
animation: slide-in-bottom 0.3s ease-out 0.1s both;
}
.hvac-event-summary-stats .hvac-event-stat-card:nth-child(2) {
animation: slide-in-bottom 0.3s ease-out 0.2s both;
}
.hvac-event-summary-stats .hvac-event-stat-card:nth-child(3) {
animation: slide-in-bottom 0.3s ease-out 0.3s both;
}
/* Initial loading state for animated elements - only on HVAC pages */
.hvac-content .hvac-animate-fade-in,
.hvac-content .hvac-animate-scale-up,
.hvac-content .hvac-animate-slide-in-right,
.hvac-content .hvac-animate-slide-in-left,
.hvac-content .hvac-animate-slide-in-bottom,
.hvac-content .hvac-dashboard-stats .hvac-stat-card,
.hvac-content .hvac-event-summary-stats .hvac-event-stat-card {
opacity: 0;
}
/* Focus Animation Styles */
/* Smooth transitions for focus indicators */
.hvac-content *:focus {
-webkit-transition: outline 0.2s ease-out,
box-shadow 0.2s ease-out,
background-color 0.2s ease-out;
transition: outline 0.2s ease-out,
box-shadow 0.2s ease-out,
background-color 0.2s ease-out;
}
/* Focus indicator animation for better visibility */
@keyframes focus-pulse {
0% {
-webkit-box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3);
box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3);
}
50% {
-webkit-box-shadow: 0 0 0 5px rgba(0, 95, 204, 0.2);
box-shadow: 0 0 0 5px rgba(0, 95, 204, 0.2);
}
100% {
-webkit-box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3);
box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3);
}
}
/* Apply focus pulse to critical interactive elements */
.hvac-button:focus,
.hvac-email-submit:focus,
.hvac-content button[type="submit"]:focus {
-webkit-animation: focus-pulse 2s ease-in-out infinite;
animation: focus-pulse 2s ease-in-out infinite;
}
/* Disable focus animations for reduced motion users */
/* Reduced Motion Support Added - WCAG 2.1 Accessibility */
/* Respects user preference for reduced motion to prevent vestibular disorders */
@media (prefers-reduced-motion: reduce) {
/* Disable all animations and transitions globally */
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
/* Remove specific transform animations */
.hvac-animate-fade-in,
.hvac-animate-scale-up,
.hvac-animate-pulse,
.hvac-animate-slide-in-right,
.hvac-animate-slide-in-left,
.hvac-animate-slide-in-bottom {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* Disable hover transformations */
.hvac-card:hover,
.hvac-stat-card:hover,
.hvac-event-stat-card:hover,
.hvac-button:hover,
.hvac-email-submit:hover {
transform: none !important;
animation: none !important;
}
/* Keep essential visual feedback but remove motion */
.hvac-card:hover,
.hvac-stat-card:hover,
.hvac-event-stat-card:hover {
border-color: var(--hvac-primary, #0274be) !important;
box-shadow: 0 0 0 2px rgba(2, 116, 190, 0.2) !important;
}
/* Disable loading spinner animation but keep visibility */
.hvac-loading::after {
animation: none !important;
border-radius: 50% !important;
border: 2px solid rgba(0, 0, 0, 0.2) !important;
border-top-color: #333 !important;
}
/* Disable focus pulse animation */
.hvac-button:focus,
.hvac-email-submit:focus,
.hvac-content button[type="submit"]:focus {
animation: none !important;
}
/* Ensure smooth scrolling is disabled */
html {
scroll-behavior: auto !important;
}
/* Disable CSS Grid/Flexbox animations if any */
.hvac-dashboard-stats .hvac-stat-card:nth-child(n),
.hvac-event-summary-stats .hvac-event-stat-card:nth-child(n) {
animation: none !important;
opacity: 1 !important;
}
}
/* Provide alternative visual feedback for reduced motion users */
@media (prefers-reduced-motion: reduce) {
/* Enhanced border feedback instead of transform */
.hvac-content button:hover,
.hvac-content input[type="submit"]:hover,
.hvac-content a:hover {
outline: 2px solid var(--hvac-primary, #0274be) !important;
outline-offset: 2px !important;
}
/* Enhanced color changes for interactive elements */
.hvac-attendee-item:hover {
background-color: var(--hvac-primary-light, #e6f3fb) !important;
border-left: 4px solid var(--hvac-primary, #0274be) !important;
}
/* Static loading indicator */
.hvac-loading {
opacity: 0.7 !important;
}
.hvac-loading::after {
content: "Loading..." !important;
display: inline-block !important;
font-size: 12px !important;
color: #666 !important;
border: none !important;
background: none !important;
border-radius: 0 !important;
width: auto !important;
height: auto !important;
position: static !important;
margin-left: 8px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.hvac-content *:focus {
-webkit-transition: none;
-webkit-animation: none;
transition: none;
animation: none;
}
}
/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001s !important;
animation-delay: 0s !important;
transition-duration: 0.001s !important;
}
.hvac-content .hvac-animate-fade-in,
.hvac-content .hvac-animate-scale-up,
.hvac-content .hvac-animate-slide-in-right,
.hvac-content .hvac-animate-slide-in-left,
.hvac-content .hvac-animate-slide-in-bottom,
.hvac-content .hvac-dashboard-stats .hvac-stat-card,
.hvac-content .hvac-event-summary-stats .hvac-event-stat-card {
opacity: 1;
}
}
/* 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;
-webkit-box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2);
box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2);
-webkit-border-radius: 4px;
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);
-webkit-border-radius: 2px;
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;
-webkit-box-shadow: none;
box-shadow: none;
}
/* Ensure focus is visible for keyboard users */
.js-focus-visible .focus-visible {
outline: 2px solid #005fcc;
outline-offset: 2px;
}
/* Feature Detection Support */
@supports not (display: flex) {
.hvac-content [class*="flex"] {
display: table-cell;
vertical-align: middle;
}
}
@supports not (display: grid) {
.hvac-content [class*="grid"] {
display: block;
overflow: hidden;
}
.hvac-content [class*="grid"] > * {
float: left;
width: 50%;
}
}