From c2c5e2802e88f1fda54ecb2141a29cd6670aca3a Mon Sep 17 00:00:00 2001 From: bengizmo Date: Fri, 23 May 2025 09:48:30 -0300 Subject: [PATCH] feat: Implement harmonized CSS framework with theme-based styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Created comprehensive harmonized CSS framework (hvac-harmonized.css) based on Astra theme analysis - Built enhanced styling for all plugin pages using CSS custom properties and modern design patterns - Updated CSS enqueue system to load harmonized framework as foundation for all pages - Enhanced dashboard, login, and certificate pages with consistent theme-integrated styling - Maintained backward compatibility with existing CSS files - Added proper dependency management and versioning for CSS files - Improved accessibility with WCAG-compliant color contrasts and focus states - Implemented responsive design patterns and modern typography scale 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../tests/e2e/ui-styling-analysis.test.ts | 145 +++++ .../tests/e2e/ui-styling-review.test.ts | 199 ++++++ .../assets/css/community-login-enhanced.css | 451 +++++++++++++ .../assets/css/hvac-certificates-enhanced.css | 598 +++++++++++++++++ .../assets/css/hvac-dashboard-enhanced.css | 451 +++++++++++++ .../assets/css/hvac-harmonized.css | 605 ++++++++++++++++++ .../hvac-community-events.php | 49 +- 7 files changed, 2488 insertions(+), 10 deletions(-) create mode 100644 wordpress-dev/tests/e2e/ui-styling-analysis.test.ts create mode 100644 wordpress-dev/tests/e2e/ui-styling-review.test.ts create mode 100644 wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login-enhanced.css create mode 100644 wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-certificates-enhanced.css create mode 100644 wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-dashboard-enhanced.css create mode 100644 wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-harmonized.css diff --git a/wordpress-dev/tests/e2e/ui-styling-analysis.test.ts b/wordpress-dev/tests/e2e/ui-styling-analysis.test.ts new file mode 100644 index 00000000..f9c0e640 --- /dev/null +++ b/wordpress-dev/tests/e2e/ui-styling-analysis.test.ts @@ -0,0 +1,145 @@ +import { test, expect } from '@playwright/test'; + +test.describe('UI Styling Analysis', () => { + test('WordPress Homepage and Theme Analysis', async ({ page }) => { + console.log('=== Analyzing WordPress Theme ==='); + + // Capture homepage + await page.goto('https://upskill-staging.measurequick.com/', { waitUntil: 'networkidle' }); + await page.waitForTimeout(2000); + + await page.screenshot({ + path: 'test-results/ui-review-wordpress-homepage.png', + fullPage: true + }); + + // Extract theme styling information + const themeAnalysis = await page.evaluate(() => { + const body = document.body; + const bodyStyle = getComputedStyle(body); + const header = document.querySelector('h1, .site-title, header h1, .wp-block-site-title') || body; + const headerStyle = getComputedStyle(header); + const link = document.querySelector('a') || body; + const linkStyle = getComputedStyle(link); + const button = document.querySelector('button, .wp-block-button__link') || body; + const buttonStyle = getComputedStyle(button); + + // Try to get CSS custom properties + const root = document.documentElement; + const rootStyle = getComputedStyle(root); + + return { + // Typography + bodyFont: bodyStyle.fontFamily, + bodyFontSize: bodyStyle.fontSize, + bodyLineHeight: bodyStyle.lineHeight, + bodyFontWeight: bodyStyle.fontWeight, + + // Colors + bodyColor: bodyStyle.color, + bodyBackground: bodyStyle.backgroundColor, + headerColor: headerStyle.color, + linkColor: linkStyle.color, + linkHoverColor: getComputedStyle(link, ':hover').color, + buttonColor: buttonStyle.color, + buttonBackground: buttonStyle.backgroundColor, + + // Layout + bodyMargin: bodyStyle.margin, + bodyPadding: bodyStyle.padding, + containerMaxWidth: getComputedStyle(document.querySelector('.container, .wp-site-blocks, main') || body).maxWidth, + + // WordPress specific + primaryColor: rootStyle.getPropertyValue('--wp--preset--color--primary').trim(), + secondaryColor: rootStyle.getPropertyValue('--wp--preset--color--secondary').trim(), + accentColor: rootStyle.getPropertyValue('--wp--preset--color--accent').trim(), + + // Theme name detection + themeClasses: document.body.className, + stylesheets: Array.from(document.styleSheets).map(sheet => { + try { + return sheet.href || 'inline'; + } catch (e) { + return 'cross-origin'; + } + }).filter(href => href.includes('theme') || href.includes('style')) + }; + }); + + console.log('🎨 WordPress Theme Analysis:', JSON.stringify(themeAnalysis, null, 2)); + + // Save theme analysis to file + await page.evaluate((analysis) => { + const blob = new Blob([JSON.stringify(analysis, null, 2)], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'theme-analysis.json'; + a.click(); + }, themeAnalysis); + }); + + test('Event Summary Page - Direct Access', async ({ page }) => { + console.log('=== Capturing Event Summary Page ==='); + + // Login first + await page.goto('https://upskill-staging.measurequick.com/community-login'); + await page.fill('#user_login', 'test_trainer'); + await page.fill('#user_pass', 'Test123!'); + await page.click('#wp-submit'); + await page.waitForURL('**/hvac-dashboard/**'); + await page.waitForLoadState('networkidle'); + + // Try to access an event summary directly with a known event ID + await page.goto('https://upskill-staging.measurequick.com/event-summary/?event_id=5443', { + waitUntil: 'networkidle' + }); + await page.waitForTimeout(2000); + + await page.screenshot({ + path: 'test-results/ui-review-event-summary-direct.png', + fullPage: true + }); + + console.log('✅ Event Summary captured'); + }); + + test('Mobile Responsiveness Analysis', async ({ page }) => { + console.log('=== Mobile Responsiveness Analysis ==='); + + // Set mobile viewport + await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE + + // Login + await page.goto('https://upskill-staging.measurequick.com/community-login'); + await page.fill('#user_login', 'test_trainer'); + await page.fill('#user_pass', 'Test123!'); + await page.click('#wp-submit'); + await page.waitForURL('**/hvac-dashboard/**'); + await page.waitForLoadState('networkidle'); + + // Key pages for mobile testing + const mobilePages = [ + { name: 'dashboard', url: '/hvac-dashboard' }, + { name: 'generate-certificates', url: '/generate-certificates' }, + { name: 'certificate-reports', url: '/certificate-reports' }, + { name: 'my-events', url: '/my-events' } + ]; + + for (const pageInfo of mobilePages) { + console.log(`📱 Mobile: ${pageInfo.name}`); + + await page.goto(`https://upskill-staging.measurequick.com${pageInfo.url}`, { + waitUntil: 'networkidle' + }); + await page.waitForTimeout(2000); + + await page.screenshot({ + path: `test-results/ui-review-${pageInfo.name}-mobile.png`, + fullPage: true + }); + } + + console.log('✅ Mobile screenshots complete'); + }); +}); \ No newline at end of file diff --git a/wordpress-dev/tests/e2e/ui-styling-review.test.ts b/wordpress-dev/tests/e2e/ui-styling-review.test.ts new file mode 100644 index 00000000..c72b579b --- /dev/null +++ b/wordpress-dev/tests/e2e/ui-styling-review.test.ts @@ -0,0 +1,199 @@ +import { test, expect } from '@playwright/test'; + +test.describe('UI Styling Review - Full Page Screenshots', () => { + const pages = [ + { name: 'Community Login', url: '/community-login' }, + { name: 'HVAC Dashboard', url: '/hvac-dashboard' }, + { name: 'Generate Certificates', url: '/generate-certificates' }, + { name: 'Certificate Reports', url: '/certificate-reports' }, + { name: 'Trainer Profile', url: '/trainer-profile' }, + { name: 'My Events', url: '/my-events' }, + { name: 'Create Event', url: '/create-event' }, + { name: 'Event Summary', url: '/event-summary' }, + { name: 'Email Attendees', url: '/email-attendees' } + ]; + + // Test logged out states + test('Screenshot all pages - Logged Out', async ({ page }) => { + console.log('=== Taking Screenshots of All Pages (Logged Out) ==='); + + for (const pageInfo of pages) { + try { + console.log(`📸 Capturing: ${pageInfo.name} (${pageInfo.url})`); + + await page.goto(`https://upskill-staging.measurequick.com${pageInfo.url}`, { + waitUntil: 'networkidle', + timeout: 30000 + }); + + // Wait for page to fully load + await page.waitForLoadState('networkidle'); + await page.waitForTimeout(2000); + + // Take full page screenshot + await page.screenshot({ + path: `test-results/ui-review-${pageInfo.name.toLowerCase().replace(/\s+/g, '-')}-logged-out.png`, + fullPage: true + }); + + console.log(`✅ Captured: ${pageInfo.name}`); + } catch (error) { + console.log(`⚠️ Failed to capture ${pageInfo.name}: ${error.message}`); + } + } + }); + + // Test logged in states + test('Screenshot all pages - Logged In', async ({ page }) => { + console.log('=== Taking Screenshots of All Pages (Logged In) ==='); + + // Login first + await page.goto('https://upskill-staging.measurequick.com/community-login'); + await page.fill('#user_login', 'test_trainer'); + await page.fill('#user_pass', 'Test123!'); + await page.click('#wp-submit'); + await page.waitForURL('**/hvac-dashboard/**'); + await page.waitForLoadState('networkidle'); + + console.log('✅ Logged in successfully'); + + for (const pageInfo of pages) { + try { + console.log(`📸 Capturing: ${pageInfo.name} (${pageInfo.url})`); + + await page.goto(`https://upskill-staging.measurequick.com${pageInfo.url}`, { + waitUntil: 'networkidle', + timeout: 30000 + }); + + // Wait for page to fully load + await page.waitForLoadState('networkidle'); + await page.waitForTimeout(2000); + + // Special handling for pages with dynamic content + if (pageInfo.name === 'Generate Certificates') { + // Try to select an event to show the full interface + const eventSelector = page.locator('#event_id'); + if (await eventSelector.isVisible()) { + const options = await eventSelector.locator('option:not([value=""])').count(); + if (options > 0) { + await eventSelector.selectOption({ index: 1 }); + await page.waitForTimeout(2000); // Wait for AJAX + } + } + } + + if (pageInfo.name === 'Event Summary') { + // Try to find any event to view + const eventLinks = page.locator('a[href*="/event-summary/"]'); + const linkCount = await eventLinks.count(); + if (linkCount > 0) { + await eventLinks.first().click(); + await page.waitForLoadState('networkidle'); + await page.waitForTimeout(2000); + } + } + + // Take full page screenshot + await page.screenshot({ + path: `test-results/ui-review-${pageInfo.name.toLowerCase().replace(/\s+/g, '-')}-logged-in.png`, + fullPage: true + }); + + console.log(`✅ Captured: ${pageInfo.name}`); + } catch (error) { + console.log(`⚠️ Failed to capture ${pageInfo.name}: ${error.message}`); + + // Take screenshot anyway to see error state + try { + await page.screenshot({ + path: `test-results/ui-review-${pageInfo.name.toLowerCase().replace(/\s+/g, '-')}-error.png`, + fullPage: true + }); + } catch (screenshotError) { + console.log(`❌ Could not take error screenshot: ${screenshotError.message}`); + } + } + } + }); + + // Test WordPress theme analysis + test('Analyze WordPress Theme Styling', async ({ page }) => { + console.log('=== Analyzing WordPress Theme Styling ==='); + + // Go to homepage to analyze theme + await page.goto('https://upskill-staging.measurequick.com/', { waitUntil: 'networkidle' }); + + // Extract theme colors, fonts, and styling + const themeAnalysis = await page.evaluate(() => { + const computedStyle = getComputedStyle(document.body); + const headerStyle = getComputedStyle(document.querySelector('h1, .site-title, header') || document.body); + const linkStyle = getComputedStyle(document.querySelector('a') || document.body); + + return { + bodyFont: computedStyle.fontFamily, + bodyFontSize: computedStyle.fontSize, + bodyColor: computedStyle.color, + bodyBackground: computedStyle.backgroundColor, + headerFont: headerStyle.fontFamily, + headerColor: headerStyle.color, + linkColor: linkStyle.color, + primaryColor: getComputedStyle(document.documentElement).getPropertyValue('--wp--preset--color--primary') || 'not-set', + secondaryColor: getComputedStyle(document.documentElement).getPropertyValue('--wp--preset--color--secondary') || 'not-set' + }; + }); + + console.log('🎨 WordPress Theme Analysis:', themeAnalysis); + + // Take homepage screenshot + await page.screenshot({ + path: 'test-results/ui-review-wordpress-homepage.png', + fullPage: true + }); + + console.log('✅ WordPress theme analysis complete'); + }); + + // Test mobile responsiveness + test('Mobile Responsiveness Check', async ({ page }) => { + console.log('=== Mobile Responsiveness Check ==='); + + // Set mobile viewport + await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE + + // Login + await page.goto('https://upskill-staging.measurequick.com/community-login'); + await page.fill('#user_login', 'test_trainer'); + await page.fill('#user_pass', 'Test123!'); + await page.click('#wp-submit'); + await page.waitForURL('**/hvac-dashboard/**'); + await page.waitForLoadState('networkidle'); + + // Test key pages on mobile + const mobilePages = [ + { name: 'Dashboard', url: '/hvac-dashboard' }, + { name: 'Generate Certificates', url: '/generate-certificates' }, + { name: 'Certificate Reports', url: '/certificate-reports' } + ]; + + for (const pageInfo of mobilePages) { + try { + console.log(`📱 Mobile test: ${pageInfo.name}`); + + await page.goto(`https://upskill-staging.measurequick.com${pageInfo.url}`, { + waitUntil: 'networkidle' + }); + await page.waitForTimeout(2000); + + await page.screenshot({ + path: `test-results/ui-review-${pageInfo.name.toLowerCase().replace(/\s+/g, '-')}-mobile.png`, + fullPage: true + }); + + console.log(`✅ Mobile captured: ${pageInfo.name}`); + } catch (error) { + console.log(`⚠️ Mobile test failed for ${pageInfo.name}: ${error.message}`); + } + } + }); +}); \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login-enhanced.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login-enhanced.css new file mode 100644 index 00000000..0c71a096 --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login-enhanced.css @@ -0,0 +1,451 @@ +/** + * HVAC Community Login - Enhanced Styling + * + * Updated login form styles using the harmonized framework + * to integrate seamlessly with the Astra theme. + * + * @version 3.0.0 + */ + +/* Login page wrapper */ +.hvac-login-page { + background: linear-gradient(135deg, var(--hvac-theme-background) 0%, var(--hvac-primary-subtle) 100%); + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: var(--hvac-spacing-6); + position: relative; + overflow: hidden; +} + +/* Background decoration */ +.hvac-login-page::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, var(--hvac-primary-light) 0%, transparent 70%); + opacity: 0.3; + animation: hvac-float 20s ease-in-out infinite; +} + +@keyframes hvac-float { + 0%, 100% { transform: translate(0, 0) rotate(0deg); } + 50% { transform: translate(-20px, -20px) rotate(1deg); } +} + +/* Main login container */ +.hvac-login-container { + position: relative; + z-index: 10; + width: 100%; + max-width: 480px; + margin: 0 auto; +} + +/* Login card */ +.hvac-login-card { + background-color: var(--hvac-background-white); + border-radius: var(--hvac-radius-2xl); + box-shadow: var(--hvac-shadow-xl); + overflow: hidden; + border: 1px solid var(--hvac-border); + backdrop-filter: blur(10px); + transition: transform var(--hvac-transition-normal); +} + +.hvac-login-card:hover { + transform: translateY(-8px); +} + +/* Login header */ +.hvac-login-header { + background: linear-gradient(135deg, var(--hvac-primary) 0%, var(--hvac-primary-dark) 100%); + color: white; + padding: var(--hvac-spacing-8) var(--hvac-spacing-6); + text-align: center; + position: relative; + overflow: hidden; +} + +.hvac-login-header::before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 150px; + height: 150px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + transform: translate(50px, -50px); +} + +.hvac-login-header h1 { + font-size: var(--hvac-font-size-2xl); + font-weight: var(--hvac-font-weight-bold); + margin: 0 0 var(--hvac-spacing-2) 0; + color: white; +} + +.hvac-login-header p { + font-size: var(--hvac-font-size-md); + margin: 0; + opacity: 0.9; + color: white; +} + +/* Login form */ +.hvac-login-form { + padding: var(--hvac-spacing-8) var(--hvac-spacing-6); +} + +.hvac-login-form-group { + margin-bottom: var(--hvac-spacing-6); + position: relative; +} + +.hvac-login-form-label { + display: block; + margin-bottom: var(--hvac-spacing-2); + font-weight: var(--hvac-font-weight-semibold); + color: var(--hvac-theme-text-dark); + font-size: var(--hvac-font-size-sm); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.hvac-login-form-input { + width: 100%; + padding: var(--hvac-spacing-4) var(--hvac-spacing-5); + border: 2px solid var(--hvac-border); + border-radius: var(--hvac-radius-lg); + font-size: var(--hvac-font-size-md); + font-family: var(--hvac-font-family); + background-color: var(--hvac-background-white); + transition: all var(--hvac-transition-fast); + box-sizing: border-box; +} + +.hvac-login-form-input:focus { + border-color: var(--hvac-primary); + box-shadow: 0 0 0 4px var(--hvac-primary-light); + outline: none; + transform: translateY(-2px); +} + +.hvac-login-form-input::placeholder { + color: var(--hvac-theme-text-light); + font-style: italic; +} + +/* Enhanced input with icon support */ +.hvac-input-group { + position: relative; +} + +.hvac-input-icon { + position: absolute; + left: var(--hvac-spacing-4); + top: 50%; + transform: translateY(-50%); + color: var(--hvac-theme-text-light); + font-size: var(--hvac-font-size-lg); + pointer-events: none; + transition: color var(--hvac-transition-fast); +} + +.hvac-input-group .hvac-login-form-input { + padding-left: var(--hvac-spacing-12); +} + +.hvac-input-group .hvac-login-form-input:focus + .hvac-input-icon { + color: var(--hvac-primary); +} + +/* Login button */ +.hvac-login-submit { + width: 100%; + background: linear-gradient(135deg, var(--hvac-primary) 0%, var(--hvac-primary-dark) 100%); + color: white; + border: none; + padding: var(--hvac-spacing-4) var(--hvac-spacing-6); + border-radius: var(--hvac-radius-lg); + font-size: var(--hvac-font-size-lg); + font-weight: var(--hvac-font-weight-semibold); + font-family: var(--hvac-font-family); + cursor: pointer; + transition: all var(--hvac-transition-normal); + text-transform: uppercase; + letter-spacing: 0.05em; + position: relative; + overflow: hidden; + min-height: 52px; + display: flex; + align-items: center; + justify-content: center; + gap: var(--hvac-spacing-2); +} + +.hvac-login-submit:hover:not(:disabled) { + transform: translateY(-3px); + box-shadow: var(--hvac-shadow-lg); +} + +.hvac-login-submit:active:not(:disabled) { + transform: translateY(-1px); +} + +.hvac-login-submit:disabled { + opacity: 0.7; + cursor: not-allowed; + transform: none; +} + +/* Login submit ripple effect */ +.hvac-login-submit::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + transition: width 0.6s, height 0.6s; + transform: translate(-50%, -50%); +} + +.hvac-login-submit:active::before { + width: 300px; + height: 300px; +} + +/* Remember me checkbox */ +.hvac-remember-group { + display: flex; + align-items: center; + gap: var(--hvac-spacing-2); + margin-bottom: var(--hvac-spacing-6); +} + +.hvac-remember-checkbox { + width: 18px; + height: 18px; + accent-color: var(--hvac-primary); +} + +.hvac-remember-label { + font-size: var(--hvac-font-size-sm); + color: var(--hvac-theme-text); + cursor: pointer; + user-select: none; +} + +/* Links */ +.hvac-login-links { + text-align: center; + margin-top: var(--hvac-spacing-6); + padding-top: var(--hvac-spacing-6); + border-top: 1px solid var(--hvac-border-light); +} + +.hvac-login-link { + color: var(--hvac-primary); + text-decoration: none; + font-weight: var(--hvac-font-weight-medium); + font-size: var(--hvac-font-size-sm); + transition: color var(--hvac-transition-fast); +} + +.hvac-login-link:hover { + color: var(--hvac-primary-dark); + text-decoration: underline; +} + +/* Error and success messages */ +.hvac-login-message { + margin-bottom: var(--hvac-spacing-6); + padding: var(--hvac-spacing-4); + border-radius: var(--hvac-radius-lg); + font-size: var(--hvac-font-size-sm); + font-weight: var(--hvac-font-weight-medium); + text-align: center; +} + +.hvac-login-message--error { + background-color: var(--hvac-error-light); + color: var(--hvac-error); + border: 1px solid var(--hvac-error); +} + +.hvac-login-message--success { + background-color: var(--hvac-success-light); + color: var(--hvac-success); + border: 1px solid var(--hvac-success); +} + +.hvac-login-message--info { + background-color: var(--hvac-info-light); + color: var(--hvac-accent); + border: 1px solid var(--hvac-accent); +} + +/* Loading state */ +.hvac-login-loading { + display: inline-flex; + align-items: center; + gap: var(--hvac-spacing-2); +} + +.hvac-login-spinner { + width: 20px; + height: 20px; + border: 2px solid rgba(255, 255, 255, 0.3); + border-top: 2px solid white; + border-radius: 50%; + animation: hvac-spin 1s linear infinite; +} + +/* Alternative login methods */ +.hvac-login-divider { + text-align: center; + margin: var(--hvac-spacing-6) 0; + position: relative; + color: var(--hvac-theme-text-light); + font-size: var(--hvac-font-size-sm); +} + +.hvac-login-divider::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background-color: var(--hvac-border); + z-index: 1; +} + +.hvac-login-divider span { + background-color: var(--hvac-background-white); + padding: 0 var(--hvac-spacing-4); + position: relative; + z-index: 2; +} + +/* Responsive design */ +@media (max-width: 640px) { + .hvac-login-page { + padding: var(--hvac-spacing-4); + min-height: 100vh; + align-items: flex-start; + padding-top: var(--hvac-spacing-8); + } + + .hvac-login-container { + max-width: 100%; + } + + .hvac-login-header, + .hvac-login-form { + padding: var(--hvac-spacing-6) var(--hvac-spacing-4); + } + + .hvac-login-header h1 { + font-size: var(--hvac-font-size-xl); + } + + .hvac-login-form-input { + padding: var(--hvac-spacing-3) var(--hvac-spacing-4); + font-size: var(--hvac-font-size-md); + } + + .hvac-input-group .hvac-login-form-input { + padding-left: var(--hvac-spacing-10); + } + + .hvac-login-submit { + padding: var(--hvac-spacing-3) var(--hvac-spacing-5); + font-size: var(--hvac-font-size-md); + min-height: 48px; + } +} + +@media (max-width: 480px) { + .hvac-login-page { + padding: var(--hvac-spacing-3); + } + + .hvac-login-header, + .hvac-login-form { + padding: var(--hvac-spacing-5) var(--hvac-spacing-3); + } + + .hvac-login-header h1 { + font-size: var(--hvac-font-size-lg); + } + + .hvac-login-header p { + font-size: var(--hvac-font-size-sm); + } +} + +/* Accessibility improvements */ +.hvac-login-form-input:focus { + outline: 2px solid var(--hvac-primary); + outline-offset: 2px; +} + +.hvac-login-submit:focus { + outline: 2px solid white; + outline-offset: 2px; +} + +/* High contrast mode support */ +@media (prefers-contrast: high) { + .hvac-login-card { + border: 2px solid var(--hvac-theme-text-dark); + } + + .hvac-login-form-input { + border: 2px solid var(--hvac-theme-text-dark); + } +} + +/* Reduced motion support */ +@media (prefers-reduced-motion: reduce) { + .hvac-login-page::before { + animation: none; + } + + .hvac-login-card, + .hvac-login-form-input, + .hvac-login-submit { + transition: none; + } + + .hvac-login-card:hover { + transform: none; + } +} + +/* Print styles */ +@media print { + .hvac-login-page { + background: white; + min-height: auto; + } + + .hvac-login-card { + box-shadow: none; + border: 1px solid #000; + } + + .hvac-login-header { + background: #000; + color: white; + } +} \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-certificates-enhanced.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-certificates-enhanced.css new file mode 100644 index 00000000..caf4c8c5 --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-certificates-enhanced.css @@ -0,0 +1,598 @@ +/** + * HVAC Certificates - Enhanced Styling + * + * Updated certificate styling using the harmonized framework + * for Generate Certificates and Certificate Reports pages. + * + * @version 3.0.0 + */ + +/* Certificate pages wrapper */ +.hvac-certificates-page { + background-color: var(--hvac-theme-background); + min-height: 70vh; + padding: var(--hvac-spacing-6) 0; +} + +/* Main container */ +.hvac-certificates-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--hvac-spacing-4); +} + +/* Page header */ +.hvac-certificates-header { + background: linear-gradient(135deg, var(--hvac-primary) 0%, var(--hvac-accent) 100%); + color: white; + padding: var(--hvac-spacing-8) var(--hvac-spacing-6); + border-radius: var(--hvac-radius-xl); + margin-bottom: var(--hvac-spacing-8); + box-shadow: var(--hvac-shadow-lg); + position: relative; + overflow: hidden; +} + +.hvac-certificates-header::before { + content: ''; + position: absolute; + top: -50px; + right: -50px; + width: 200px; + height: 200px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + transform: scale(0.8); +} + +.hvac-certificates-header h1 { + font-size: var(--hvac-font-size-3xl); + font-weight: var(--hvac-font-weight-bold); + margin: 0 0 var(--hvac-spacing-2) 0; + color: white; +} + +.hvac-certificates-header p { + font-size: var(--hvac-font-size-lg); + margin: 0; + opacity: 0.9; + color: white; +} + +/* Navigation breadcrumb */ +.hvac-certificates-nav { + display: flex; + gap: var(--hvac-spacing-3); + flex-wrap: wrap; + margin-top: var(--hvac-spacing-6); +} + +.hvac-certificates-nav .hvac-btn { + background-color: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.3); + color: white; + backdrop-filter: blur(10px); +} + +.hvac-certificates-nav .hvac-btn:hover { + background-color: rgba(255, 255, 255, 0.25); + transform: translateY(-2px); +} + +/* Main content area */ +.hvac-certificates-content { + background-color: var(--hvac-background-white); + border-radius: var(--hvac-radius-xl); + box-shadow: var(--hvac-shadow-lg); + border: 1px solid var(--hvac-border); + overflow: hidden; + margin-bottom: var(--hvac-spacing-8); +} + +/* Section headers */ +.hvac-certificates-section-header { + background: linear-gradient(135deg, var(--hvac-secondary-light) 0%, var(--hvac-background-gray) 100%); + padding: var(--hvac-spacing-5) var(--hvac-spacing-6); + border-bottom: 1px solid var(--hvac-border); +} + +.hvac-certificates-section-header h2 { + margin: 0; + color: var(--hvac-theme-text-dark); + font-size: var(--hvac-font-size-xl); + font-weight: var(--hvac-font-weight-semibold); +} + +/* Form sections */ +.hvac-certificates-form-section { + padding: var(--hvac-spacing-6); + border-bottom: 1px solid var(--hvac-border-light); +} + +.hvac-certificates-form-section:last-child { + border-bottom: none; +} + +.hvac-certificates-form-section h3 { + margin-top: 0; + margin-bottom: var(--hvac-spacing-4); + color: var(--hvac-theme-text-dark); + font-size: var(--hvac-font-size-lg); + font-weight: var(--hvac-font-weight-semibold); + display: flex; + align-items: center; + gap: var(--hvac-spacing-2); +} + +.hvac-section-number { + background-color: var(--hvac-primary); + color: white; + width: 28px; + height: 28px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--hvac-font-size-sm); + font-weight: var(--hvac-font-weight-bold); +} + +/* Enhanced form controls */ +.hvac-certificates-form-group { + margin-bottom: var(--hvac-spacing-5); +} + +.hvac-certificates-form-label { + display: block; + margin-bottom: var(--hvac-spacing-2); + font-weight: var(--hvac-font-weight-semibold); + color: var(--hvac-theme-text-dark); + font-size: var(--hvac-font-size-sm); +} + +.hvac-certificates-select, +.hvac-certificates-input { + width: 100%; + padding: var(--hvac-spacing-3) var(--hvac-spacing-4); + border: 2px solid var(--hvac-border); + border-radius: var(--hvac-radius-lg); + font-size: var(--hvac-font-size-md); + font-family: var(--hvac-font-family); + background-color: var(--hvac-background-white); + transition: all var(--hvac-transition-fast); + box-sizing: border-box; +} + +.hvac-certificates-select:focus, +.hvac-certificates-input:focus { + border-color: var(--hvac-primary); + box-shadow: 0 0 0 3px var(--hvac-primary-light); + outline: none; +} + +.hvac-certificates-select { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.75rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + appearance: none; +} + +/* Attendee selection area */ +.hvac-attendees-section { + background-color: var(--hvac-primary-subtle); + border: 2px dashed var(--hvac-primary); + border-radius: var(--hvac-radius-lg); + padding: var(--hvac-spacing-6); + margin: var(--hvac-spacing-5) 0; + transition: all var(--hvac-transition-normal); +} + +.hvac-attendees-section.hvac-attendees-loaded { + background-color: var(--hvac-background-white); + border-style: solid; + box-shadow: var(--hvac-shadow-md); +} + +.hvac-attendees-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: var(--hvac-spacing-4); + margin-top: var(--hvac-spacing-4); +} + +.hvac-attendee-card { + background-color: var(--hvac-background-white); + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-radius-lg); + padding: var(--hvac-spacing-4); + transition: all var(--hvac-transition-fast); + cursor: pointer; + position: relative; +} + +.hvac-attendee-card:hover { + transform: translateY(-2px); + box-shadow: var(--hvac-shadow-md); + border-color: var(--hvac-primary); +} + +.hvac-attendee-card.selected { + border-color: var(--hvac-primary); + background-color: var(--hvac-primary-light); + box-shadow: var(--hvac-shadow-md); +} + +.hvac-attendee-checkbox { + position: absolute; + top: var(--hvac-spacing-3); + right: var(--hvac-spacing-3); + width: 18px; + height: 18px; + accent-color: var(--hvac-primary); +} + +.hvac-attendee-info h4 { + margin: 0 0 var(--hvac-spacing-1) 0; + color: var(--hvac-theme-text-dark); + font-size: var(--hvac-font-size-md); + font-weight: var(--hvac-font-weight-semibold); +} + +.hvac-attendee-info p { + margin: 0; + color: var(--hvac-theme-text-light); + font-size: var(--hvac-font-size-sm); +} + +/* Action buttons */ +.hvac-certificates-actions { + padding: var(--hvac-spacing-6); + background-color: var(--hvac-background-gray); + border-top: 1px solid var(--hvac-border); + display: flex; + gap: var(--hvac-spacing-4); + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} + +.hvac-certificates-actions-left { + display: flex; + gap: var(--hvac-spacing-3); + align-items: center; +} + +.hvac-certificates-actions-right { + display: flex; + gap: var(--hvac-spacing-3); + align-items: center; +} + +/* Results and messages */ +.hvac-certificates-results { + margin-top: var(--hvac-spacing-6); + padding: var(--hvac-spacing-6); + background-color: var(--hvac-success-light); + border: 1px solid var(--hvac-success); + border-radius: var(--hvac-radius-lg); + color: var(--hvac-success); +} + +.hvac-certificates-error { + margin-top: var(--hvac-spacing-6); + padding: var(--hvac-spacing-6); + background-color: var(--hvac-error-light); + border: 1px solid var(--hvac-error); + border-radius: var(--hvac-radius-lg); + color: var(--hvac-error); +} + +/* Certificate previews */ +.hvac-certificate-previews { + margin-top: var(--hvac-spacing-6); + padding: var(--hvac-spacing-6); + background-color: var(--hvac-background-white); + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-radius-lg); + box-shadow: var(--hvac-shadow-md); +} + +.hvac-certificate-previews h4 { + margin-top: 0; + margin-bottom: var(--hvac-spacing-4); + color: var(--hvac-theme-text-dark); +} + +.hvac-preview-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: var(--hvac-spacing-3); +} + +.hvac-preview-button { + display: flex; + align-items: center; + gap: var(--hvac-spacing-2); + padding: var(--hvac-spacing-3) var(--hvac-spacing-4); + background-color: var(--hvac-accent-light); + border: 1px solid var(--hvac-accent); + border-radius: var(--hvac-radius-md); + color: var(--hvac-accent); + text-decoration: none; + font-size: var(--hvac-font-size-sm); + font-weight: var(--hvac-font-weight-medium); + transition: all var(--hvac-transition-fast); +} + +.hvac-preview-button:hover { + background-color: var(--hvac-accent); + color: white; + transform: translateY(-1px); + box-shadow: var(--hvac-shadow-md); + text-decoration: none; +} + +/* Certificate reports specific styles */ +.hvac-certificate-stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--hvac-spacing-4); + margin-bottom: var(--hvac-spacing-8); +} + +.hvac-stat-card { + background: linear-gradient(135deg, var(--hvac-background-white) 0%, var(--hvac-primary-subtle) 100%); + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-radius-xl); + padding: var(--hvac-spacing-5); + text-align: center; + box-shadow: var(--hvac-shadow-md); + position: relative; + overflow: hidden; +} + +.hvac-stat-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--hvac-primary), var(--hvac-accent)); +} + +.hvac-stat-number { + font-size: var(--hvac-font-size-3xl); + font-weight: var(--hvac-font-weight-bold); + color: var(--hvac-primary); + margin-bottom: var(--hvac-spacing-1); + line-height: 1; +} + +.hvac-stat-label { + font-size: var(--hvac-font-size-sm); + color: var(--hvac-theme-text); + font-weight: var(--hvac-font-weight-medium); + margin: 0; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* Certificate table */ +.hvac-certificate-table-container { + background-color: var(--hvac-background-white); + border-radius: var(--hvac-radius-xl); + box-shadow: var(--hvac-shadow-lg); + overflow: hidden; + border: 1px solid var(--hvac-border); +} + +.hvac-certificate-table { + width: 100%; + border-collapse: collapse; + margin: 0; +} + +.hvac-certificate-table th { + background: linear-gradient(135deg, var(--hvac-secondary-light) 0%, var(--hvac-background-gray) 100%); + color: var(--hvac-theme-text-dark); + font-weight: var(--hvac-font-weight-semibold); + text-align: left; + padding: var(--hvac-spacing-4) var(--hvac-spacing-5); + border-bottom: 2px solid var(--hvac-border); + font-size: var(--hvac-font-size-sm); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.hvac-certificate-table td { + padding: var(--hvac-spacing-4) var(--hvac-spacing-5); + border-bottom: 1px solid var(--hvac-border-light); + vertical-align: middle; + font-size: var(--hvac-font-size-sm); +} + +.hvac-certificate-table tbody tr:hover { + background-color: var(--hvac-primary-subtle); +} + +.hvac-certificate-table tbody tr:last-child td { + border-bottom: none; +} + +/* Certificate status badges */ +.hvac-certificate-status { + display: inline-flex; + align-items: center; + padding: var(--hvac-spacing-1) var(--hvac-spacing-3); + border-radius: var(--hvac-radius-lg); + font-size: var(--hvac-font-size-xs); + font-weight: var(--hvac-font-weight-medium); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.hvac-certificate-status--active { + background-color: var(--hvac-success-light); + color: var(--hvac-success); + border: 1px solid var(--hvac-success); +} + +.hvac-certificate-status--revoked { + background-color: var(--hvac-error-light); + color: var(--hvac-error); + border: 1px solid var(--hvac-error); +} + +.hvac-certificate-status--pending { + background-color: var(--hvac-warning-light); + color: var(--hvac-warning); + border: 1px solid var(--hvac-warning); +} + +/* Certificate actions */ +.hvac-certificate-actions { + display: flex; + gap: var(--hvac-spacing-2); + align-items: center; +} + +.hvac-certificate-actions .hvac-btn { + padding: var(--hvac-spacing-1) var(--hvac-spacing-3); + font-size: var(--hvac-font-size-xs); + min-height: 32px; +} + +/* Loading states */ +.hvac-certificates-loading { + text-align: center; + padding: var(--hvac-spacing-8); + color: var(--hvac-theme-text-light); +} + +.hvac-certificates-spinner { + width: 32px; + height: 32px; + border: 3px solid var(--hvac-border); + border-top: 3px solid var(--hvac-primary); + border-radius: 50%; + animation: hvac-spin 1s linear infinite; + margin: 0 auto var(--hvac-spacing-4); +} + +/* Empty states */ +.hvac-certificates-empty { + text-align: center; + padding: var(--hvac-spacing-12) var(--hvac-spacing-6); + background-color: var(--hvac-background-white); + border-radius: var(--hvac-radius-xl); + border: 2px dashed var(--hvac-border); + color: var(--hvac-theme-text-light); +} + +.hvac-certificates-empty-icon { + font-size: 4rem; + margin-bottom: var(--hvac-spacing-4); + color: var(--hvac-border-dark); +} + +.hvac-certificates-empty h3 { + color: var(--hvac-theme-text); + margin-bottom: var(--hvac-spacing-3); +} + +/* Responsive design */ +@media (max-width: 768px) { + .hvac-certificates-container { + padding: 0 var(--hvac-spacing-3); + } + + .hvac-certificates-header { + padding: var(--hvac-spacing-6) var(--hvac-spacing-4); + text-align: center; + } + + .hvac-certificates-header h1 { + font-size: var(--hvac-font-size-2xl); + } + + .hvac-certificates-form-section { + padding: var(--hvac-spacing-4); + } + + .hvac-certificate-stats { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: var(--hvac-spacing-3); + } + + .hvac-attendees-grid { + grid-template-columns: 1fr; + } + + .hvac-certificates-actions { + flex-direction: column; + gap: var(--hvac-spacing-3); + align-items: stretch; + } + + .hvac-certificates-actions-left, + .hvac-certificates-actions-right { + justify-content: center; + } + + .hvac-preview-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .hvac-certificates-header, + .hvac-certificates-form-section { + padding: var(--hvac-spacing-3); + } + + .hvac-certificate-table-container { + overflow-x: auto; + } + + .hvac-certificate-table th, + .hvac-certificate-table td { + padding: var(--hvac-spacing-2) var(--hvac-spacing-3); + font-size: var(--hvac-font-size-xs); + } + + .hvac-certificate-actions { + flex-direction: column; + gap: var(--hvac-spacing-1); + } + + .hvac-certificate-actions .hvac-btn { + width: 100%; + justify-content: center; + } +} + +/* Print styles */ +@media print { + .hvac-certificates-page { + background: white; + } + + .hvac-certificates-header { + background: #000; + color: white; + box-shadow: none; + } + + .hvac-certificates-content, + .hvac-certificate-table-container { + box-shadow: none; + border: 1px solid #000; + } + + .hvac-certificates-actions { + display: none; + } +} \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-dashboard-enhanced.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-dashboard-enhanced.css new file mode 100644 index 00000000..609c05e2 --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-dashboard-enhanced.css @@ -0,0 +1,451 @@ +/** + * HVAC Dashboard - Enhanced Styling + * + * Updated dashboard styles using the harmonized framework + * to integrate seamlessly with the Astra theme. + * + * @version 3.0.0 + */ + +/* Dashboard page wrapper */ +.hvac-dashboard-page { + background-color: var(--hvac-theme-background); + min-height: 70vh; + padding: var(--hvac-spacing-6) 0; +} + +/* Main dashboard container */ +.hvac-dashboard { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--hvac-spacing-4); +} + +/* Dashboard header */ +.hvac-dashboard-header { + background: linear-gradient(135deg, var(--hvac-primary) 0%, var(--hvac-primary-dark) 100%); + color: white; + padding: var(--hvac-spacing-8) var(--hvac-spacing-6); + border-radius: var(--hvac-radius-xl); + margin-bottom: var(--hvac-spacing-8); + box-shadow: var(--hvac-shadow-lg); + position: relative; + overflow: hidden; +} + +.hvac-dashboard-header::before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 100px; + height: 100px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + transform: translate(30px, -30px); +} + +.hvac-dashboard-header h1 { + font-size: var(--hvac-font-size-3xl); + font-weight: var(--hvac-font-weight-bold); + margin: 0 0 var(--hvac-spacing-2) 0; + color: white; +} + +.hvac-dashboard-header p { + font-size: var(--hvac-font-size-lg); + margin: 0; + opacity: 0.9; + color: white; +} + +/* Navigation */ +.hvac-dashboard-nav { + display: flex; + gap: var(--hvac-spacing-3); + flex-wrap: wrap; + margin-top: var(--hvac-spacing-6); +} + +.hvac-dashboard-nav .hvac-btn { + background-color: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.3); + color: white; + backdrop-filter: blur(10px); +} + +.hvac-dashboard-nav .hvac-btn:hover { + background-color: rgba(255, 255, 255, 0.25); + transform: translateY(-2px); +} + +/* Stats grid */ +.hvac-dashboard-stats { + margin-bottom: var(--hvac-spacing-8); +} + +.hvac-dashboard-stats h2 { + color: var(--hvac-theme-text-dark); + margin-bottom: var(--hvac-spacing-6); + text-align: center; +} + +.hvac-stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--hvac-spacing-6); +} + +.hvac-stat-card { + background: linear-gradient(135deg, var(--hvac-background-white) 0%, var(--hvac-primary-subtle) 100%); + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-radius-xl); + padding: var(--hvac-spacing-6); + text-align: center; + box-shadow: var(--hvac-shadow-md); + transition: all var(--hvac-transition-normal); + position: relative; + overflow: hidden; +} + +.hvac-stat-card:hover { + transform: translateY(-4px); + box-shadow: var(--hvac-shadow-xl); +} + +.hvac-stat-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--hvac-primary), var(--hvac-accent)); +} + +.hvac-stat-number { + font-size: var(--hvac-font-size-4xl); + font-weight: var(--hvac-font-weight-bold); + color: var(--hvac-primary); + margin-bottom: var(--hvac-spacing-2); + line-height: 1; +} + +.hvac-stat-label { + font-size: var(--hvac-font-size-md); + color: var(--hvac-theme-text); + font-weight: var(--hvac-font-weight-medium); + margin: 0; +} + +/* Events section */ +.hvac-dashboard-events { + margin-bottom: var(--hvac-spacing-8); +} + +.hvac-dashboard-events h2 { + color: var(--hvac-theme-text-dark); + margin-bottom: var(--hvac-spacing-6); + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--hvac-spacing-4); +} + +.hvac-events-header-actions { + display: flex; + gap: var(--hvac-spacing-3); + align-items: center; +} + +/* Events table container */ +.hvac-events-table-container { + background-color: var(--hvac-background-white); + border-radius: var(--hvac-radius-xl); + box-shadow: var(--hvac-shadow-lg); + overflow: hidden; + border: 1px solid var(--hvac-border); +} + +.hvac-events-table { + width: 100%; + border-collapse: collapse; + margin: 0; +} + +.hvac-events-table th { + background: linear-gradient(135deg, var(--hvac-secondary-light) 0%, var(--hvac-background-gray) 100%); + color: var(--hvac-theme-text-dark); + font-weight: var(--hvac-font-weight-semibold); + text-align: left; + padding: var(--hvac-spacing-4) var(--hvac-spacing-5); + border-bottom: 2px solid var(--hvac-border); + font-size: var(--hvac-font-size-sm); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.hvac-events-table td { + padding: var(--hvac-spacing-4) var(--hvac-spacing-5); + border-bottom: 1px solid var(--hvac-border-light); + vertical-align: middle; + font-size: var(--hvac-font-size-sm); +} + +.hvac-events-table tbody tr { + transition: background-color var(--hvac-transition-fast); +} + +.hvac-events-table tbody tr:hover { + background-color: var(--hvac-primary-subtle); +} + +.hvac-events-table tbody tr:last-child td { + border-bottom: none; +} + +/* Event status badges */ +.hvac-event-status { + display: inline-flex; + align-items: center; + padding: var(--hvac-spacing-1) var(--hvac-spacing-3); + border-radius: var(--hvac-radius-lg); + font-size: var(--hvac-font-size-xs); + font-weight: var(--hvac-font-weight-medium); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.hvac-event-status--published { + background-color: var(--hvac-success-light); + color: var(--hvac-success); + border: 1px solid var(--hvac-success); +} + +.hvac-event-status--draft { + background-color: var(--hvac-warning-light); + color: var(--hvac-warning); + border: 1px solid var(--hvac-warning); +} + +.hvac-event-status--upcoming { + background-color: var(--hvac-info-light); + color: var(--hvac-accent); + border: 1px solid var(--hvac-accent); +} + +/* Event actions */ +.hvac-event-actions { + display: flex; + gap: var(--hvac-spacing-2); + align-items: center; +} + +.hvac-event-actions .hvac-btn { + padding: var(--hvac-spacing-1) var(--hvac-spacing-3); + font-size: var(--hvac-font-size-xs); + min-height: 32px; +} + +/* Empty state */ +.hvac-empty-state { + text-align: center; + padding: var(--hvac-spacing-12) var(--hvac-spacing-6); + background-color: var(--hvac-background-white); + border-radius: var(--hvac-radius-xl); + border: 2px dashed var(--hvac-border); + margin: var(--hvac-spacing-6) 0; +} + +.hvac-empty-state-icon { + font-size: 4rem; + color: var(--hvac-border-dark); + margin-bottom: var(--hvac-spacing-4); +} + +.hvac-empty-state h3 { + color: var(--hvac-theme-text); + margin-bottom: var(--hvac-spacing-3); +} + +.hvac-empty-state p { + color: var(--hvac-theme-text-light); + margin-bottom: var(--hvac-spacing-6); + max-width: 400px; + margin-left: auto; + margin-right: auto; +} + +/* Quick actions panel */ +.hvac-quick-actions { + background: linear-gradient(135deg, var(--hvac-background-white) 0%, var(--hvac-accent-light) 100%); + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-radius-xl); + padding: var(--hvac-spacing-6); + box-shadow: var(--hvac-shadow-md); +} + +.hvac-quick-actions h3 { + margin-top: 0; + margin-bottom: var(--hvac-spacing-4); + color: var(--hvac-theme-text-dark); +} + +.hvac-quick-actions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--hvac-spacing-4); +} + +.hvac-quick-action-item { + display: flex; + align-items: center; + padding: var(--hvac-spacing-4); + background-color: var(--hvac-background-white); + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-radius-lg); + text-decoration: none; + color: var(--hvac-theme-text); + transition: all var(--hvac-transition-fast); +} + +.hvac-quick-action-item:hover { + transform: translateY(-2px); + box-shadow: var(--hvac-shadow-md); + text-decoration: none; + color: var(--hvac-primary); +} + +.hvac-quick-action-icon { + margin-right: var(--hvac-spacing-3); + font-size: var(--hvac-font-size-xl); + color: var(--hvac-primary); +} + +.hvac-quick-action-text { + font-weight: var(--hvac-font-weight-medium); +} + +/* Responsive design */ +@media (max-width: 768px) { + .hvac-dashboard { + padding: 0 var(--hvac-spacing-3); + } + + .hvac-dashboard-header { + padding: var(--hvac-spacing-6) var(--hvac-spacing-4); + text-align: center; + } + + .hvac-dashboard-header h1 { + font-size: var(--hvac-font-size-2xl); + } + + .hvac-dashboard-nav { + justify-content: center; + } + + .hvac-stats-grid { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--hvac-spacing-4); + } + + .hvac-stat-card { + padding: var(--hvac-spacing-4); + } + + .hvac-stat-number { + font-size: var(--hvac-font-size-3xl); + } + + .hvac-events-table-container { + overflow-x: auto; + } + + .hvac-events-table th, + .hvac-events-table td { + padding: var(--hvac-spacing-2) var(--hvac-spacing-3); + font-size: var(--hvac-font-size-xs); + } + + .hvac-quick-actions-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .hvac-dashboard-header { + padding: var(--hvac-spacing-4); + } + + .hvac-dashboard-header h1 { + font-size: var(--hvac-font-size-xl); + } + + .hvac-dashboard-nav .hvac-btn { + width: 100%; + margin-bottom: var(--hvac-spacing-2); + } + + .hvac-stats-grid { + grid-template-columns: 1fr; + } + + .hvac-events-table th, + .hvac-events-table td { + padding: var(--hvac-spacing-1) var(--hvac-spacing-2); + } + + .hvac-event-actions { + flex-direction: column; + gap: var(--hvac-spacing-1); + } + + .hvac-event-actions .hvac-btn { + width: 100%; + padding: var(--hvac-spacing-2); + font-size: var(--hvac-font-size-xs); + } +} + +/* Loading states */ +.hvac-loading { + display: inline-flex; + align-items: center; + gap: var(--hvac-spacing-2); +} + +.hvac-loading-spinner { + width: 16px; + height: 16px; + border: 2px solid var(--hvac-border); + border-top: 2px solid var(--hvac-primary); + border-radius: 50%; + animation: hvac-spin 1s linear infinite; +} + +@keyframes hvac-spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Focus styles for better accessibility */ +.hvac-events-table tbody tr:focus-within { + outline: 2px solid var(--hvac-primary); + outline-offset: -2px; +} + +/* Dark mode support (if theme supports it) */ +@media (prefers-color-scheme: dark) { + .hvac-dashboard-page { + background-color: #1a202c; + } + + .hvac-stat-card, + .hvac-events-table-container, + .hvac-quick-actions { + background-color: #2d3748; + border-color: #4a5568; + } +} \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-harmonized.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-harmonized.css new file mode 100644 index 00000000..8433a681 --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-harmonized.css @@ -0,0 +1,605 @@ +/** + * HVAC Community Events - Harmonized Styling Framework + * + * This file provides harmonized styling that integrates seamlessly with the + * Astra WordPress theme while maintaining accessibility and responsive design. + * + * Based on Astra theme analysis: + * - Font: Mulish, sans-serif + * - Body color: rgba(0, 0, 0, 0.65) + * - Background: rgb(236, 244, 243) (light teal) + * - Base font size: 16px + * - Line height: 1.7 (27.2px) + * + * @version 3.0.0 + */ + +:root { + /* Theme-harmonized color palette */ + --hvac-theme-background: rgb(236, 244, 243); + --hvac-theme-text: rgba(0, 0, 0, 0.65); + --hvac-theme-text-dark: rgba(0, 0, 0, 0.87); + --hvac-theme-text-light: rgba(0, 0, 0, 0.54); + + /* Primary colors - Teal/Blue harmony */ + --hvac-primary: #008080; /* Teal to match theme background */ + --hvac-primary-dark: #006666; /* Darker teal */ + --hvac-primary-light: #e0f2f2; /* Very light teal */ + --hvac-primary-subtle: #f0f9f9; /* Subtle teal background */ + + /* Secondary colors - Natural grays */ + --hvac-secondary: #4a5568; /* Neutral gray */ + --hvac-secondary-dark: #2d3748; /* Dark gray */ + --hvac-secondary-light: #f7fafc; /* Very light gray */ + + /* Accent colors */ + --hvac-accent: #2b6cb0; /* Blue accent */ + --hvac-accent-dark: #2a5396; + --hvac-accent-light: #ebf8ff; + + /* Semantic colors */ + --hvac-success: #38a169; /* Green */ + --hvac-success-light: #f0fff4; + --hvac-warning: #d69e2e; /* Orange */ + --hvac-warning-light: #fffaf0; + --hvac-error: #e53e3e; /* Red */ + --hvac-error-light: #fed7d7; + --hvac-info: --hvac-accent; /* Use accent color */ + --hvac-info-light: var(--hvac-accent-light); + + /* Border and background colors */ + --hvac-border: #e2e8f0; + --hvac-border-light: #f7fafc; + --hvac-border-dark: #cbd5e0; + --hvac-background-white: #ffffff; + --hvac-background-gray: #f8f9fa; + + /* Typography settings to match Astra theme */ + --hvac-font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; + --hvac-font-size-base: 16px; + --hvac-line-height-base: 1.7; + --hvac-font-weight-normal: 400; + --hvac-font-weight-medium: 500; + --hvac-font-weight-semibold: 600; + --hvac-font-weight-bold: 700; + + /* Font sizes - Type scale */ + --hvac-font-size-xs: 0.75rem; /* 12px */ + --hvac-font-size-sm: 0.875rem; /* 14px */ + --hvac-font-size-md: 1rem; /* 16px */ + --hvac-font-size-lg: 1.125rem; /* 18px */ + --hvac-font-size-xl: 1.25rem; /* 20px */ + --hvac-font-size-2xl: 1.5rem; /* 24px */ + --hvac-font-size-3xl: 1.875rem; /* 30px */ + --hvac-font-size-4xl: 2.25rem; /* 36px */ + + /* Spacing scale - Consistent with Astra */ + --hvac-spacing-1: 0.25rem; /* 4px */ + --hvac-spacing-2: 0.5rem; /* 8px */ + --hvac-spacing-3: 0.75rem; /* 12px */ + --hvac-spacing-4: 1rem; /* 16px */ + --hvac-spacing-5: 1.25rem; /* 20px */ + --hvac-spacing-6: 1.5rem; /* 24px */ + --hvac-spacing-8: 2rem; /* 32px */ + --hvac-spacing-10: 2.5rem; /* 40px */ + --hvac-spacing-12: 3rem; /* 48px */ + --hvac-spacing-16: 4rem; /* 64px */ + + /* Border radius */ + --hvac-radius-sm: 0.25rem; /* 4px */ + --hvac-radius-md: 0.375rem; /* 6px */ + --hvac-radius-lg: 0.5rem; /* 8px */ + --hvac-radius-xl: 0.75rem; /* 12px */ + --hvac-radius-2xl: 1rem; /* 16px */ + + /* Shadows - Subtle and modern */ + --hvac-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --hvac-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --hvac-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --hvac-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + + /* Transitions */ + --hvac-transition-fast: 150ms ease-out; + --hvac-transition-normal: 250ms ease-out; + --hvac-transition-slow: 350ms ease-out; + + /* Z-index scale */ + --hvac-z-dropdown: 1000; + --hvac-z-modal: 1050; + --hvac-z-popover: 1060; + --hvac-z-tooltip: 1070; +} + +/* Base typography - Apply Astra theme styling */ +.hvac-page, +.hvac-content { + font-family: var(--hvac-font-family); + font-size: var(--hvac-font-size-base); + line-height: var(--hvac-line-height-base); + color: var(--hvac-theme-text); +} + +/* Typography hierarchy */ +.hvac-content h1, +.hvac-content .hvac-h1 { + font-size: var(--hvac-font-size-3xl); + font-weight: var(--hvac-font-weight-bold); + line-height: 1.2; + color: var(--hvac-theme-text-dark); + margin-bottom: var(--hvac-spacing-6); + margin-top: 0; +} + +.hvac-content h2, +.hvac-content .hvac-h2 { + font-size: var(--hvac-font-size-2xl); + font-weight: var(--hvac-font-weight-semibold); + line-height: 1.3; + color: var(--hvac-theme-text-dark); + margin-bottom: var(--hvac-spacing-4); + margin-top: var(--hvac-spacing-8); +} + +.hvac-content h3, +.hvac-content .hvac-h3 { + font-size: var(--hvac-font-size-xl); + font-weight: var(--hvac-font-weight-semibold); + line-height: 1.4; + color: var(--hvac-theme-text-dark); + margin-bottom: var(--hvac-spacing-3); + margin-top: var(--hvac-spacing-6); +} + +.hvac-content h4, +.hvac-content .hvac-h4 { + font-size: var(--hvac-font-size-lg); + font-weight: var(--hvac-font-weight-medium); + line-height: 1.4; + color: var(--hvac-theme-text-dark); + margin-bottom: var(--hvac-spacing-3); + margin-top: var(--hvac-spacing-5); +} + +.hvac-content p, +.hvac-content .hvac-text { + margin-bottom: var(--hvac-spacing-4); + line-height: var(--hvac-line-height-base); + color: var(--hvac-theme-text); +} + +/* Text utilities */ +.hvac-text-xs { font-size: var(--hvac-font-size-xs); } +.hvac-text-sm { font-size: var(--hvac-font-size-sm); } +.hvac-text-md { font-size: var(--hvac-font-size-md); } +.hvac-text-lg { font-size: var(--hvac-font-size-lg); } +.hvac-text-xl { font-size: var(--hvac-font-size-xl); } + +.hvac-text-light { color: var(--hvac-theme-text-light); } +.hvac-text-normal { color: var(--hvac-theme-text); } +.hvac-text-dark { color: var(--hvac-theme-text-dark); } + +.hvac-font-normal { font-weight: var(--hvac-font-weight-normal); } +.hvac-font-medium { font-weight: var(--hvac-font-weight-medium); } +.hvac-font-semibold { font-weight: var(--hvac-font-weight-semibold); } +.hvac-font-bold { font-weight: var(--hvac-font-weight-bold); } + +/* Enhanced button system */ +.hvac-btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--hvac-spacing-3) var(--hvac-spacing-6); + font-family: var(--hvac-font-family); + font-size: var(--hvac-font-size-md); + font-weight: var(--hvac-font-weight-medium); + line-height: 1.5; + text-decoration: none; + text-align: center; + vertical-align: middle; + cursor: pointer; + user-select: none; + border: 1px solid transparent; + border-radius: var(--hvac-radius-md); + transition: all var(--hvac-transition-fast); + min-height: 44px; /* WCAG touch target size */ + position: relative; + overflow: hidden; + background-image: none; +} + +.hvac-btn:focus { + outline: 2px solid var(--hvac-primary); + outline-offset: 2px; + z-index: 10; +} + +/* Button variants */ +.hvac-btn-primary { + background-color: var(--hvac-primary); + border-color: var(--hvac-primary); + color: white; + box-shadow: var(--hvac-shadow-sm); +} + +.hvac-btn-primary:hover:not(:disabled) { + background-color: var(--hvac-primary-dark); + border-color: var(--hvac-primary-dark); + color: white; + transform: translateY(-1px); + box-shadow: var(--hvac-shadow-md); +} + +.hvac-btn-primary:active { + transform: translateY(0); + box-shadow: var(--hvac-shadow-sm); +} + +.hvac-btn-secondary { + background-color: var(--hvac-secondary); + border-color: var(--hvac-secondary); + color: white; + box-shadow: var(--hvac-shadow-sm); +} + +.hvac-btn-secondary:hover:not(:disabled) { + background-color: var(--hvac-secondary-dark); + border-color: var(--hvac-secondary-dark); + color: white; + transform: translateY(-1px); + box-shadow: var(--hvac-shadow-md); +} + +.hvac-btn-outline { + background-color: transparent; + border-color: var(--hvac-primary); + color: var(--hvac-primary); +} + +.hvac-btn-outline:hover:not(:disabled) { + background-color: var(--hvac-primary); + color: white; +} + +.hvac-btn-ghost { + background-color: transparent; + border-color: transparent; + color: var(--hvac-primary); +} + +.hvac-btn-ghost:hover:not(:disabled) { + background-color: var(--hvac-primary-light); + color: var(--hvac-primary-dark); +} + +/* Button sizes */ +.hvac-btn-sm { + padding: var(--hvac-spacing-2) var(--hvac-spacing-4); + font-size: var(--hvac-font-size-sm); + min-height: 36px; +} + +.hvac-btn-lg { + padding: var(--hvac-spacing-4) var(--hvac-spacing-8); + font-size: var(--hvac-font-size-lg); + min-height: 52px; +} + +.hvac-btn-xl { + padding: var(--hvac-spacing-5) var(--hvac-spacing-10); + font-size: var(--hvac-font-size-xl); + min-height: 60px; +} + +/* Button states */ +.hvac-btn:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none !important; + box-shadow: none !important; +} + +/* Form elements */ +.hvac-form-group { + margin-bottom: var(--hvac-spacing-6); +} + +.hvac-form-label { + display: block; + margin-bottom: var(--hvac-spacing-2); + font-weight: var(--hvac-font-weight-medium); + color: var(--hvac-theme-text-dark); + font-size: var(--hvac-font-size-sm); +} + +.hvac-form-control { + display: block; + width: 100%; + padding: var(--hvac-spacing-3); + font-family: var(--hvac-font-family); + font-size: var(--hvac-font-size-md); + font-weight: var(--hvac-font-weight-normal); + line-height: var(--hvac-line-height-base); + color: var(--hvac-theme-text); + background-color: var(--hvac-background-white); + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-radius-md); + transition: border-color var(--hvac-transition-fast), box-shadow var(--hvac-transition-fast); +} + +.hvac-form-control:focus { + border-color: var(--hvac-primary); + outline: 0; + box-shadow: 0 0 0 3px var(--hvac-primary-light); +} + +.hvac-form-control:disabled { + background-color: var(--hvac-background-gray); + opacity: 0.6; +} + +/* Select elements */ +.hvac-select { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + appearance: none; +} + +/* Card component */ +.hvac-card { + background-color: var(--hvac-background-white); + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-radius-lg); + box-shadow: var(--hvac-shadow-sm); + overflow: hidden; + transition: box-shadow var(--hvac-transition-normal); +} + +.hvac-card:hover { + box-shadow: var(--hvac-shadow-md); +} + +.hvac-card-header { + padding: var(--hvac-spacing-6); + border-bottom: 1px solid var(--hvac-border-light); + background-color: var(--hvac-background-gray); +} + +.hvac-card-body { + padding: var(--hvac-spacing-6); +} + +.hvac-card-footer { + padding: var(--hvac-spacing-6); + border-top: 1px solid var(--hvac-border-light); + background-color: var(--hvac-background-gray); +} + +/* Tables */ +.hvac-table-container { + overflow-x: auto; + margin-bottom: var(--hvac-spacing-6); + border-radius: var(--hvac-radius-lg); + border: 1px solid var(--hvac-border); +} + +.hvac-table { + width: 100%; + border-collapse: collapse; + background-color: var(--hvac-background-white); + font-size: var(--hvac-font-size-sm); +} + +.hvac-table th { + background-color: var(--hvac-background-gray); + color: var(--hvac-theme-text-dark); + font-weight: var(--hvac-font-weight-semibold); + text-align: left; + padding: var(--hvac-spacing-4); + border-bottom: 1px solid var(--hvac-border); + white-space: nowrap; +} + +.hvac-table td { + padding: var(--hvac-spacing-4); + border-bottom: 1px solid var(--hvac-border-light); + vertical-align: middle; +} + +.hvac-table tbody tr:hover { + background-color: var(--hvac-primary-subtle); +} + +.hvac-table tbody tr:last-child td { + border-bottom: none; +} + +/* Alert components */ +.hvac-alert { + padding: var(--hvac-spacing-4); + margin-bottom: var(--hvac-spacing-6); + border: 1px solid transparent; + border-radius: var(--hvac-radius-md); + font-size: var(--hvac-font-size-sm); +} + +.hvac-alert-success { + background-color: var(--hvac-success-light); + border-color: var(--hvac-success); + color: var(--hvac-success); +} + +.hvac-alert-warning { + background-color: var(--hvac-warning-light); + border-color: var(--hvac-warning); + color: var(--hvac-warning); +} + +.hvac-alert-error { + background-color: var(--hvac-error-light); + border-color: var(--hvac-error); + color: var(--hvac-error); +} + +.hvac-alert-info { + background-color: var(--hvac-info-light); + border-color: var(--hvac-accent); + color: var(--hvac-accent); +} + +/* Spacing utilities */ +.hvac-m-0 { margin: 0; } +.hvac-m-1 { margin: var(--hvac-spacing-1); } +.hvac-m-2 { margin: var(--hvac-spacing-2); } +.hvac-m-3 { margin: var(--hvac-spacing-3); } +.hvac-m-4 { margin: var(--hvac-spacing-4); } +.hvac-m-5 { margin: var(--hvac-spacing-5); } +.hvac-m-6 { margin: var(--hvac-spacing-6); } +.hvac-m-8 { margin: var(--hvac-spacing-8); } + +.hvac-mt-0 { margin-top: 0; } +.hvac-mt-1 { margin-top: var(--hvac-spacing-1); } +.hvac-mt-2 { margin-top: var(--hvac-spacing-2); } +.hvac-mt-3 { margin-top: var(--hvac-spacing-3); } +.hvac-mt-4 { margin-top: var(--hvac-spacing-4); } +.hvac-mt-6 { margin-top: var(--hvac-spacing-6); } +.hvac-mt-8 { margin-top: var(--hvac-spacing-8); } + +.hvac-mb-0 { margin-bottom: 0; } +.hvac-mb-1 { margin-bottom: var(--hvac-spacing-1); } +.hvac-mb-2 { margin-bottom: var(--hvac-spacing-2); } +.hvac-mb-3 { margin-bottom: var(--hvac-spacing-3); } +.hvac-mb-4 { margin-bottom: var(--hvac-spacing-4); } +.hvac-mb-6 { margin-bottom: var(--hvac-spacing-6); } +.hvac-mb-8 { margin-bottom: var(--hvac-spacing-8); } + +.hvac-p-0 { padding: 0; } +.hvac-p-1 { padding: var(--hvac-spacing-1); } +.hvac-p-2 { padding: var(--hvac-spacing-2); } +.hvac-p-3 { padding: var(--hvac-spacing-3); } +.hvac-p-4 { padding: var(--hvac-spacing-4); } +.hvac-p-6 { padding: var(--hvac-spacing-6); } +.hvac-p-8 { padding: var(--hvac-spacing-8); } + +/* Layout utilities */ +.hvac-flex { display: flex; } +.hvac-inline-flex { display: inline-flex; } +.hvac-block { display: block; } +.hvac-inline-block { display: inline-block; } +.hvac-hidden { display: none; } + +.hvac-flex-row { flex-direction: row; } +.hvac-flex-col { flex-direction: column; } +.hvac-flex-wrap { flex-wrap: wrap; } +.hvac-flex-nowrap { flex-wrap: nowrap; } + +.hvac-items-start { align-items: flex-start; } +.hvac-items-center { align-items: center; } +.hvac-items-end { align-items: flex-end; } +.hvac-items-stretch { align-items: stretch; } + +.hvac-justify-start { justify-content: flex-start; } +.hvac-justify-center { justify-content: center; } +.hvac-justify-end { justify-content: flex-end; } +.hvac-justify-between { justify-content: space-between; } +.hvac-justify-around { justify-content: space-around; } + +.hvac-gap-1 { gap: var(--hvac-spacing-1); } +.hvac-gap-2 { gap: var(--hvac-spacing-2); } +.hvac-gap-3 { gap: var(--hvac-spacing-3); } +.hvac-gap-4 { gap: var(--hvac-spacing-4); } +.hvac-gap-6 { gap: var(--hvac-spacing-6); } + +/* Grid utilities */ +.hvac-grid { display: grid; } +.hvac-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } +.hvac-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } +.hvac-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } +.hvac-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + +/* Responsive design */ +@media (max-width: 640px) { + .hvac-grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .hvac-grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .hvac-grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + + .hvac-btn { + width: 100%; + margin-bottom: var(--hvac-spacing-2); + } + + .hvac-flex { + flex-direction: column; + } + + .hvac-content h1 { + font-size: var(--hvac-font-size-2xl); + } + + .hvac-content h2 { + font-size: var(--hvac-font-size-xl); + } +} + +@media (max-width: 480px) { + .hvac-card-body, + .hvac-card-header, + .hvac-card-footer { + padding: var(--hvac-spacing-4); + } + + .hvac-table th, + .hvac-table td { + padding: var(--hvac-spacing-2); + font-size: var(--hvac-font-size-xs); + } +} + +/* Focus management for accessibility */ +.hvac-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; +} + +/* High contrast mode support */ +@media (prefers-contrast: high) { + :root { + --hvac-border: #000000; + --hvac-border-light: #333333; + } +} + +/* Reduced motion support */ +@media (prefers-reduced-motion: reduce) { + .hvac-btn, + .hvac-card, + .hvac-form-control { + transition: none; + } +} + +/* Print styles */ +@media print { + .hvac-btn, + .hvac-card { + box-shadow: none; + } + + .hvac-table { + border-collapse: collapse; + } + + .hvac-table th, + .hvac-table td { + border: 1px solid #000; + } +} \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/hvac-community-events.php b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/hvac-community-events.php index 7024e759..df095354 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/hvac-community-events.php +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/hvac-community-events.php @@ -197,11 +197,19 @@ register_deactivation_hook(__FILE__, 'hvac_ce_remove_roles'); * Enqueue common styles and scripts for all HVAC Community Events pages */ function hvac_ce_enqueue_common_assets() { - // Enqueue the common CSS file for all pages + // Enqueue the harmonized framework first - this provides the base styling + wp_enqueue_style( + 'hvac-harmonized-framework', + HVAC_CE_PLUGIN_URL . 'assets/css/hvac-harmonized.css', + [], // No dependencies - this is the foundation + HVAC_CE_VERSION . '-v3.0.0' + ); + + // Enqueue the legacy common CSS file for backward compatibility wp_enqueue_style( 'hvac-common-style', HVAC_CE_PLUGIN_URL . 'assets/css/hvac-common.css', - [], // No dependencies + ['hvac-harmonized-framework'], // Depends on harmonized framework HVAC_CE_VERSION ); @@ -209,7 +217,7 @@ function hvac_ce_enqueue_common_assets() { wp_enqueue_style( 'hvac-animations', HVAC_CE_PLUGIN_URL . 'assets/css/hvac-animations.css', - ['hvac-common-style'], // Depends on common styles + ['hvac-harmonized-framework'], // Depends on harmonized framework HVAC_CE_VERSION ); @@ -217,7 +225,7 @@ function hvac_ce_enqueue_common_assets() { wp_enqueue_style( 'hvac-mobile-nav', HVAC_CE_PLUGIN_URL . 'assets/css/hvac-mobile-nav.css', - ['hvac-common-style'], // Depends on common styles + ['hvac-harmonized-framework'], // Depends on harmonized framework HVAC_CE_VERSION ); @@ -225,7 +233,7 @@ function hvac_ce_enqueue_common_assets() { wp_enqueue_style( 'hvac-print-style', HVAC_CE_PLUGIN_URL . 'assets/css/hvac-print.css', - ['hvac-common-style'], // Depends on common styles + ['hvac-harmonized-framework'], // Depends on harmonized framework HVAC_CE_VERSION, 'print' // Print media only ); @@ -257,21 +265,35 @@ function hvac_ce_enqueue_common_assets() { true // Load in footer ); - // Enqueue page-specific styles based on current page + // Enqueue page-specific enhanced styles based on current page if (is_page('hvac-dashboard')) { + wp_enqueue_style( + 'hvac-dashboard-enhanced', + HVAC_CE_PLUGIN_URL . 'assets/css/hvac-dashboard-enhanced.css', + ['hvac-harmonized-framework'], // Depends on harmonized framework + HVAC_CE_VERSION . '-v3.0.0' + ); + // Keep legacy for compatibility wp_enqueue_style( 'hvac-dashboard-style', HVAC_CE_PLUGIN_URL . 'assets/css/hvac-dashboard.css', - ['hvac-common-style'], // Depends on common styles + ['hvac-dashboard-enhanced'], // Load after enhanced HVAC_CE_VERSION ); } if (is_page('community-login')) { + wp_enqueue_style( + 'hvac-community-login-enhanced', + HVAC_CE_PLUGIN_URL . 'assets/css/community-login-enhanced.css', + ['hvac-harmonized-framework'], // Depends on harmonized framework + HVAC_CE_VERSION . '-v3.0.0' + ); + // Keep legacy for compatibility wp_enqueue_style( 'hvac-community-login-style', HVAC_CE_PLUGIN_URL . 'assets/css/community-login.css', - ['hvac-common-style'], // Depends on common styles + ['hvac-community-login-enhanced'], // Load after enhanced HVAC_CE_VERSION ); } @@ -289,7 +311,7 @@ function hvac_ce_enqueue_common_assets() { wp_enqueue_style( 'hvac-email-attendees-style', HVAC_CE_PLUGIN_URL . 'assets/css/hvac-email-attendees.css', - ['hvac-common-style'], // Depends on common styles + ['hvac-harmonized-framework'], // Depends on harmonized framework HVAC_CE_VERSION ); } @@ -320,10 +342,17 @@ function hvac_ce_enqueue_common_assets() { // Enqueue certificate-related styles if (is_page('certificate-reports') || is_page('generate-certificates') || is_page('certificate-fix')) { + wp_enqueue_style( + 'hvac-certificates-enhanced', + HVAC_CE_PLUGIN_URL . 'assets/css/hvac-certificates-enhanced.css', + ['hvac-harmonized-framework'], // Depends on harmonized framework + HVAC_CE_VERSION . '-v3.0.0' + ); + // Keep legacy for compatibility wp_enqueue_style( 'hvac-certificates-admin-style', HVAC_CE_PLUGIN_URL . 'assets/css/hvac-certificates-admin.css', - ['hvac-common-style'], // Depends on common styles + ['hvac-certificates-enhanced'], // Load after enhanced HVAC_CE_VERSION );