85583772a3
Root cause: CSS was setting display: flex by default which overrode inline style="display: none" attribute on the modal element. Solution: Changed .hvac-filter-modal default display to 'none' and only show as 'flex' when .active or .show classes are present. This ensures the modal respects inline styles and only appears when explicitly activated by JavaScript. Fixes modal overlay showing permanently on find-trainer page.
1562 lines
No EOL
30 KiB
CSS
1562 lines
No EOL
30 KiB
CSS
/**
|
|
* Find a Trainer Page Styles
|
|
* Matches the specification mockups exactly
|
|
*
|
|
* @package HVAC_Plugin
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* ========================================
|
|
Page Layout & Container Structure
|
|
======================================== */
|
|
|
|
.hvac-find-trainer-page {
|
|
background: #fff;
|
|
padding: 20px 0;
|
|
width: 100%;
|
|
clear: both;
|
|
}
|
|
|
|
.hvac-find-trainer-page .ast-container {
|
|
max-width: 1200px !important;
|
|
margin: 0 auto !important;
|
|
padding: 0 20px !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
/* Single column layout */
|
|
display: block !important;
|
|
}
|
|
|
|
/* Page Title */
|
|
.hvac-page-title {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
margin: 0 0 20px 0;
|
|
color: #333;
|
|
}
|
|
|
|
/* ========================================
|
|
Container 1: Summary
|
|
======================================== */
|
|
|
|
.hvac-summary-container {
|
|
background: #fff;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-summary-container p {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
}
|
|
|
|
/* ========================================
|
|
Container 2: Map & Filters Layout (SINGLE ROW)
|
|
======================================== */
|
|
|
|
.hvac-map-filters-container {
|
|
display: flex !important;
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
min-height: 500px;
|
|
width: 100%;
|
|
background: #fff;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Map Section (LEFT - 2/3 width) */
|
|
.hvac-map-section {
|
|
flex: 2;
|
|
min-width: 0;
|
|
position: relative;
|
|
min-height: 450px;
|
|
overflow: hidden !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
/* MapGeo Integration - Force map to display properly */
|
|
.hvac-map-section .map_wrapper {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
height: 450px !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Ensure map render div is visible even with loading class */
|
|
.hvac-map-section .map_render,
|
|
.hvac-map-section .map_loading {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Make sure the map container and box are visible with proper width */
|
|
.hvac-map-section .map_box {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
overflow: hidden !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.hvac-map-section .map_container {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Ensure SVG inside map is visible */
|
|
.hvac-map-section .map_render svg {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Hide ONLY the sidebar content area if MapGeo creates one */
|
|
.hvac-find-trainer-page .igm_content_right_1_3 {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Prevent MapGeo from showing any trainer profiles in its own containers */
|
|
.igm_content_right_1_3 .hvac-trainer-card,
|
|
.igm_content_left_2_3 .hvac-trainer-card,
|
|
.map_wrapper .hvac-trainer-card {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Force MapGeo containers to have dimensions */
|
|
.hvac-map-section .map_box,
|
|
.hvac-map-section .map_aspect_ratio {
|
|
width: 100% !important;
|
|
height: 450px !important;
|
|
min-height: 450px !important;
|
|
position: relative !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.hvac-map-section .map_container {
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
bottom: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.hvac-map-section .map_render {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
}
|
|
|
|
/* Force the map ID to show */
|
|
.hvac-map-section #map_5872 {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
min-height: 450px !important;
|
|
}
|
|
|
|
/* Override MapGeo aspect ratio if needed */
|
|
.hvac-map-section .map_aspect_ratio {
|
|
padding-top: 56% !important; /* 16:9 aspect ratio */
|
|
position: relative !important;
|
|
max-width: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* Ensure map canvas is visible and constrained */
|
|
.hvac-map-section canvas {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* Comprehensive MapGeo element constraints */
|
|
.hvac-map-section svg,
|
|
.hvac-map-section g,
|
|
.hvac-map-section path,
|
|
.hvac-map-section circle {
|
|
max-width: 100% !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Prevent any MapGeo elements from overflowing */
|
|
.hvac-map-section * {
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.hvac-map-section .map_render,
|
|
.hvac-map-section .map_wrapper,
|
|
.hvac-map-section .map_box,
|
|
.hvac-map-section .map_container,
|
|
.hvac-map-section .map_aspect_ratio {
|
|
max-width: 100% !important;
|
|
overflow: hidden !important;
|
|
contain: layout size style !important;
|
|
}
|
|
|
|
.hvac-map-placeholder {
|
|
width: 100%;
|
|
height: 450px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f5f5f5;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.hvac-map-placeholder img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Filters Section (RIGHT - 1/3 width) */
|
|
.hvac-filters-section {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
min-width: 250px;
|
|
padding-left: 20px;
|
|
border-left: 1px solid #e0e0e0;
|
|
}
|
|
|
|
/* Search Box */
|
|
.hvac-search-box {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.hvac-search-box input {
|
|
width: 100%;
|
|
padding: 12px 40px 12px 15px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
background: #fff;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hvac-search-box input:focus {
|
|
outline: none;
|
|
border-color: #0073aa;
|
|
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
|
|
}
|
|
|
|
.hvac-search-box input::placeholder {
|
|
color: #999;
|
|
}
|
|
|
|
.hvac-search-box .dashicons {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #666;
|
|
font-size: 18px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Filters Header */
|
|
.hvac-filters-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 10px 0 5px 0;
|
|
}
|
|
|
|
/* Filters Label */
|
|
.hvac-filters-label {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
/* Clear Filters Button */
|
|
.hvac-clear-filters {
|
|
padding: 6px 12px;
|
|
background: #dc3545;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hvac-clear-filters:hover {
|
|
background: #c82333;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.hvac-clear-filters:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
|
|
}
|
|
|
|
/* Filter Buttons */
|
|
.hvac-filter-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 12px 15px;
|
|
background: #fff;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
text-align: left;
|
|
}
|
|
|
|
.hvac-filter-btn:hover {
|
|
background: #f8f9fa;
|
|
border-color: #0073aa;
|
|
}
|
|
|
|
.hvac-filter-btn:focus {
|
|
outline: none;
|
|
border-color: #0073aa;
|
|
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
|
|
}
|
|
|
|
.hvac-filter-btn .dashicons {
|
|
font-size: 16px;
|
|
color: #666;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Active Filters */
|
|
.hvac-active-filters {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hvac-active-filter {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 6px 12px;
|
|
background: #0073aa;
|
|
color: white;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hvac-active-filter button {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
padding: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.hvac-active-filter button:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* ========================================
|
|
Container 3: Trainer Directory
|
|
======================================== */
|
|
|
|
.hvac-trainer-directory-container {
|
|
background: #fff;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Trainer Grid - 2 columns */
|
|
.hvac-trainer-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Trainer Card */
|
|
.hvac-trainer-card {
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
background: #f8f8f8;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
/* Only trainers (not champions) should have hover effects and cursor */
|
|
.hvac-trainer-card:not(.hvac-champion-card) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hvac-trainer-card:not(.hvac-champion-card):hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Champion cards have a different visual treatment */
|
|
.hvac-trainer-card.hvac-champion-card {
|
|
cursor: default;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Certified measureQuick Trainer cards - green styling */
|
|
.hvac-trainer-card.hvac-trainer-card-certified {
|
|
background-color: rgba(137, 201, 46, 0.5); /* #89c92e @ 50% transparency */
|
|
border-color: rgba(137, 201, 46, 0.3);
|
|
}
|
|
|
|
.hvac-trainer-card.hvac-trainer-card-certified:hover {
|
|
background-color: #89c92e; /* Solid green on hover */
|
|
border-color: #7bb528;
|
|
box-shadow: 0 4px 12px rgba(137, 201, 46, 0.3);
|
|
}
|
|
|
|
.hvac-trainer-card-content {
|
|
display: flex;
|
|
gap: 15px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* Trainer Image/Avatar */
|
|
.hvac-trainer-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.hvac-trainer-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
background: #ddd;
|
|
}
|
|
|
|
.hvac-trainer-avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #6c757d;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hvac-trainer-avatar .dashicons {
|
|
font-size: 40px;
|
|
color: white;
|
|
}
|
|
|
|
/* mQ Certified Trainer Badge Overlay */
|
|
.hvac-trainer-image,
|
|
.hvac-modal-image {
|
|
position: relative; /* Enable positioning for overlay */
|
|
}
|
|
|
|
.hvac-mq-badge-overlay {
|
|
position: absolute;
|
|
top: -5px; /* Slightly outside the circle */
|
|
right: -5px; /* Positioned in top-right corner */
|
|
width: 35px;
|
|
height: 35px;
|
|
z-index: 10; /* Ensure it appears above the profile image */
|
|
pointer-events: none; /* Don't interfere with clicks */
|
|
}
|
|
|
|
.hvac-mq-badge {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); /* Add subtle shadow for visibility */
|
|
}
|
|
|
|
/* Trainer Details */
|
|
.hvac-trainer-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.hvac-trainer-name {
|
|
margin: 0 0 8px 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hvac-trainer-name a {
|
|
color: #333;
|
|
text-decoration: none;
|
|
font-weight: 600; /* Bold for clickable trainers */
|
|
}
|
|
|
|
.hvac-trainer-name a:hover {
|
|
color: #0073aa;
|
|
}
|
|
|
|
/* Champion names - not clickable, not bold */
|
|
.hvac-champion-name {
|
|
color: #333;
|
|
font-weight: 400; /* Normal weight for champions */
|
|
cursor: default;
|
|
}
|
|
|
|
.hvac-trainer-location {
|
|
margin: 0 0 8px 0;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.hvac-trainer-certification {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #0073aa;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hvac-see-events {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-top: 10px;
|
|
color: #333;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.hvac-see-events:hover {
|
|
color: #0073aa;
|
|
}
|
|
|
|
.hvac-see-events .dashicons {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Pagination */
|
|
.hvac-pagination {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.hvac-pagination a,
|
|
.hvac-pagination span {
|
|
display: inline-block;
|
|
padding: 8px 12px;
|
|
margin: 0 3px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
color: #333;
|
|
text-decoration: none;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hvac-pagination a:hover {
|
|
background: #0073aa;
|
|
color: white;
|
|
border-color: #0073aa;
|
|
}
|
|
|
|
.hvac-pagination .current {
|
|
background: #0073aa;
|
|
color: white;
|
|
border-color: #0073aa;
|
|
}
|
|
|
|
/* No Results */
|
|
.hvac-no-trainers {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #666;
|
|
}
|
|
|
|
.hvac-no-trainers p {
|
|
font-size: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ========================================
|
|
Container 4: CTA Section
|
|
======================================== */
|
|
|
|
.hvac-cta-container {
|
|
background: #fff;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.hvac-cta-text {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-style: italic;
|
|
color: #333;
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.hvac-cta-button {
|
|
display: inline-block;
|
|
padding: 12px 30px;
|
|
background: #333;
|
|
color: white;
|
|
border-radius: 25px;
|
|
text-decoration: none;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
transition: all 0.3s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hvac-cta-button:hover {
|
|
background: #555;
|
|
color: white;
|
|
text-decoration: none;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* ========================================
|
|
Filter Modal
|
|
======================================== */
|
|
|
|
.hvac-filter-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 999998;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.hvac-filter-modal.active,
|
|
.hvac-filter-modal.show {
|
|
display: flex;
|
|
}
|
|
|
|
.hvac-filter-modal-content {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
width: 90%;
|
|
max-width: 450px;
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.hvac-filter-modal-title {
|
|
margin: 0 0 25px 0;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.hvac-filter-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.hvac-filter-option {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 15px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hvac-filter-option:hover {
|
|
background: #f8f9fa;
|
|
border-color: #0073aa;
|
|
}
|
|
|
|
.hvac-filter-option input {
|
|
margin-right: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hvac-filter-option label {
|
|
cursor: pointer;
|
|
margin: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.hvac-filter-apply {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background: #0073aa;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.hvac-filter-apply:hover {
|
|
background: #005a87;
|
|
}
|
|
|
|
/* ========================================
|
|
Trainer Profile Modal
|
|
======================================== */
|
|
|
|
.hvac-trainer-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 999999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.hvac-trainer-modal-content {
|
|
background: white;
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
max-width: 700px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
padding: 30px;
|
|
}
|
|
|
|
/* Close Button */
|
|
.hvac-modal-close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
background: white;
|
|
border: 2px solid #333;
|
|
border-radius: 50%;
|
|
width: 32px;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hvac-modal-close:hover {
|
|
background: #333;
|
|
}
|
|
|
|
.hvac-modal-close .dashicons {
|
|
font-size: 20px;
|
|
color: #333;
|
|
}
|
|
|
|
.hvac-modal-close:hover .dashicons {
|
|
color: white;
|
|
}
|
|
|
|
/* Modal Title */
|
|
.hvac-modal-title {
|
|
margin: 0 0 25px 0;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Container 1: Profile Info */
|
|
.hvac-modal-profile {
|
|
display: flex;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-modal-image {
|
|
width: 120px;
|
|
height: 120px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.hvac-modal-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
background: #dee2e6;
|
|
}
|
|
|
|
.hvac-modal-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.hvac-modal-info p {
|
|
margin: 0 0 10px 0;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.hvac-modal-location {
|
|
font-size: 18px !important;
|
|
color: #666 !important;
|
|
}
|
|
|
|
.hvac-modal-certification {
|
|
color: #0073aa !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hvac-modal-business {
|
|
color: #666;
|
|
}
|
|
|
|
.hvac-modal-events span {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Container 2: Training Details */
|
|
.hvac-modal-training {
|
|
padding: 20px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-training-row {
|
|
margin-bottom: 15px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.hvac-training-row strong {
|
|
display: inline-block;
|
|
min-width: 150px;
|
|
color: #333;
|
|
}
|
|
|
|
.hvac-training-events {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.hvac-training-events strong {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.hvac-events-list {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.hvac-events-list li {
|
|
margin-bottom: 8px;
|
|
color: #666;
|
|
}
|
|
|
|
.hvac-events-list a {
|
|
color: #0073aa;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.hvac-events-list a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Container 3: Contact Form */
|
|
.hvac-modal-contact {
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.hvac-modal-contact h3 {
|
|
margin: 0 0 20px 0;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
.hvac-contact-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.hvac-form-row {
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
.hvac-form-row input {
|
|
flex: 1;
|
|
}
|
|
|
|
.hvac-form-full {
|
|
width: 100%;
|
|
}
|
|
|
|
.hvac-contact-form input,
|
|
.hvac-contact-form textarea {
|
|
width: 100%;
|
|
padding: 10px 15px;
|
|
border: 2px solid #dee2e6;
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
background: #fff;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hvac-contact-form textarea {
|
|
border-radius: 15px;
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.hvac-contact-form input:focus,
|
|
.hvac-contact-form textarea:focus {
|
|
outline: none;
|
|
border-color: #0073aa;
|
|
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
|
|
}
|
|
|
|
.hvac-contact-form input::placeholder,
|
|
.hvac-contact-form textarea::placeholder {
|
|
color: #999;
|
|
}
|
|
|
|
.hvac-form-submit {
|
|
padding: 12px 40px;
|
|
background: #333;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 25px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
align-self: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.hvac-form-submit:hover {
|
|
background: #555;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.hvac-form-submit:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Form Messages */
|
|
.hvac-form-message {
|
|
margin-top: 15px;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hvac-form-success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.hvac-form-error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
/* ========================================
|
|
Mobile Responsive
|
|
======================================== */
|
|
|
|
@media (max-width: 768px) {
|
|
/* Stack map and filters vertically */
|
|
.hvac-map-filters-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hvac-map-section {
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-filters-section {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Single column trainer grid on mobile */
|
|
.hvac-trainer-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* Stack CTA content */
|
|
.hvac-cta-container {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.hvac-cta-text {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Stack form fields on mobile */
|
|
.hvac-form-row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Adjust modal padding */
|
|
.hvac-trainer-modal-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.hvac-modal-profile {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.hvac-modal-image {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hvac-page-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.hvac-trainer-card-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.hvac-trainer-image {
|
|
margin: 0 auto 15px auto;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Loading States
|
|
======================================== */
|
|
|
|
.hvac-loading {
|
|
position: relative;
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hvac-loading::after {
|
|
content: "Loading...";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: white;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* ========================================
|
|
Direct Profile Display
|
|
======================================== */
|
|
|
|
.hvac-direct-profile-container {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.hvac-direct-profile-header {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-back-to-directory {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #0073aa;
|
|
text-decoration: none;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.hvac-back-to-directory:hover {
|
|
color: #005a87;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.hvac-back-to-directory .dashicons {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.hvac-direct-profile-card {
|
|
background: #fff;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 12px;
|
|
padding: 40px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hvac-direct-profile-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 40px;
|
|
}
|
|
|
|
.hvac-direct-profile-image {
|
|
width: 200px;
|
|
height: 200px;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.hvac-direct-profile-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
background: #ddd;
|
|
}
|
|
|
|
.hvac-direct-profile-avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #6c757d;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hvac-direct-profile-avatar .dashicons {
|
|
font-size: 80px;
|
|
color: white;
|
|
}
|
|
|
|
.hvac-direct-profile-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.hvac-direct-profile-details h2 {
|
|
margin: 0 0 12px 0;
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.hvac-direct-business-name {
|
|
margin: 0 0 12px 0;
|
|
font-size: 20px;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hvac-direct-location {
|
|
margin: 0 0 12px 0;
|
|
font-size: 18px;
|
|
color: #666;
|
|
}
|
|
|
|
.hvac-direct-certification {
|
|
margin: 0 0 24px 0;
|
|
font-size: 18px;
|
|
color: #0073aa;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hvac-contact-trainer-btn {
|
|
display: inline-block;
|
|
padding: 16px 32px;
|
|
background: #333;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 25px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.hvac-contact-trainer-btn:hover {
|
|
background: #555;
|
|
transform: translateY(-2px);
|
|
color: white;
|
|
}
|
|
|
|
/* Mobile responsive for direct profile */
|
|
@media (max-width: 768px) {
|
|
.hvac-direct-profile-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.hvac-direct-profile-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.hvac-direct-profile-image {
|
|
width: 150px;
|
|
height: 150px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hvac-direct-profile-details h2 {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.hvac-direct-profile-avatar .dashicons {
|
|
font-size: 60px;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Utility Classes
|
|
======================================== */
|
|
|
|
.hvac-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.hvac-visible {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Fix for Astra theme conflicts */
|
|
.hvac-find-trainer-page .ast-separate-container .ast-article-single {
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
.hvac-find-trainer-page .entry-content {
|
|
margin: 0;
|
|
}
|
|
|
|
/* ========================================
|
|
MapGeo Plugin Minimal Fixes
|
|
======================================== */
|
|
|
|
/* Hide MapGeo hidden footer content */
|
|
#igm-hidden-footer-content {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Force proper display context */
|
|
.hvac-find-trainer-page .hvac-map-section > * {
|
|
position: relative !important;
|
|
}
|
|
|
|
/* Override any absolute positioning from MapGeo */
|
|
.hvac-find-trainer-page .map_wrapper .map_box {
|
|
position: relative !important;
|
|
top: auto !important;
|
|
left: auto !important;
|
|
right: auto !important;
|
|
bottom: auto !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Direct Profile Display Styles
|
|
======================================== */
|
|
|
|
.hvac-direct-profile-container {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.hvac-direct-profile-header {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-back-to-directory {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #0073aa;
|
|
text-decoration: none;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.hvac-back-to-directory:hover {
|
|
color: #005a87;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.hvac-back-to-directory .dashicons {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Full Trainer Profile Display */
|
|
.hvac-trainer-profile-full {
|
|
background: #fff;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Profile Header Section */
|
|
.hvac-trainer-profile-header {
|
|
display: flex;
|
|
gap: 30px;
|
|
align-items: flex-start;
|
|
margin-bottom: 30px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 2px solid #f0f0f0;
|
|
}
|
|
|
|
.hvac-trainer-image-section {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.hvac-trainer-main-image {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 4px solid #e0e0e0;
|
|
}
|
|
|
|
.hvac-trainer-avatar-large {
|
|
width: 150px;
|
|
height: 150px;
|
|
background: #6c757d;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 4px solid #e0e0e0;
|
|
}
|
|
|
|
.hvac-trainer-avatar-large .dashicons {
|
|
font-size: 80px;
|
|
color: white;
|
|
}
|
|
|
|
.hvac-trainer-header-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.hvac-trainer-header-info .hvac-trainer-name {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
margin: 0 0 8px 0;
|
|
color: #333;
|
|
}
|
|
|
|
.hvac-trainer-header-info .hvac-trainer-location {
|
|
font-size: 18px;
|
|
color: #666;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.hvac-trainer-header-info .hvac-trainer-certification {
|
|
font-size: 16px;
|
|
color: #0073aa;
|
|
font-weight: 500;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.hvac-trainer-header-info .hvac-trainer-business {
|
|
font-size: 16px;
|
|
color: #666;
|
|
font-weight: 500;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.hvac-trainer-header-info .hvac-trainer-events-stat {
|
|
font-size: 16px;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Training Details Section */
|
|
.hvac-trainer-details-section,
|
|
.hvac-upcoming-events-section,
|
|
.hvac-trainer-about-section,
|
|
.hvac-contact-section {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.hvac-trainer-details-section h3,
|
|
.hvac-upcoming-events-section h3,
|
|
.hvac-trainer-about-section h3,
|
|
.hvac-contact-section h3 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0 0 15px 0;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid #f0f0f0;
|
|
}
|
|
|
|
.hvac-training-details-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.hvac-training-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.hvac-training-detail strong {
|
|
color: #333;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hvac-training-detail span {
|
|
color: #666;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Events List */
|
|
.hvac-events-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.hvac-events-list li {
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.hvac-events-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.hvac-events-list a {
|
|
color: #0073aa;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hvac-events-list a:hover {
|
|
color: #005a87;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* About Section */
|
|
.hvac-trainer-bio {
|
|
color: #333;
|
|
line-height: 1.6;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.hvac-trainer-bio p {
|
|
margin: 0 0 15px 0;
|
|
}
|
|
|
|
.hvac-trainer-bio p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Mobile Responsive for Direct Profile */
|
|
@media (max-width: 768px) {
|
|
.hvac-trainer-profile-full {
|
|
padding: 20px;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.hvac-trainer-profile-header {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.hvac-trainer-image-section {
|
|
align-self: center;
|
|
}
|
|
|
|
.hvac-trainer-main-image,
|
|
.hvac-trainer-avatar-large {
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
.hvac-trainer-avatar-large .dashicons {
|
|
font-size: 60px;
|
|
}
|
|
|
|
.hvac-trainer-header-info .hvac-trainer-name {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.hvac-training-details-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
} |