/** * HVAC Trainer Profile Styles * * @package HVAC_Community_Events * @version 2.0.0 */ /* Page Layout */ .hvac-trainer-profile-view, .hvac-trainer-profile-edit { max-width: 1200px; margin: 0 auto; padding: 2rem; } /* Page Header */ .hvac-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #e0e0e0; } .hvac-page-header h1 { margin: 0; color: #0274be; font-size: 2rem; } /* Breadcrumb */ .hvac-breadcrumb { margin-bottom: 1.5rem; color: #666; font-size: 0.9rem; } .hvac-breadcrumb a { color: #0274be; text-decoration: none; } .hvac-breadcrumb a:hover { text-decoration: underline; } /* Profile Content Layout */ .hvac-profile-content { display: flex; gap: 2rem; } /* Profile Sidebar */ .hvac-profile-sidebar { flex: 0 0 300px; } /* Profile Photo */ .hvac-profile-photo { margin-bottom: 2rem; text-align: center; } .hvac-profile-photo img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 5px solid #f0f0f0; } .hvac-profile-photo-placeholder { width: 200px; height: 200px; border-radius: 50%; background-color: #0274be; color: white; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 600; margin: 0 auto; } /* Profile Stats */ .hvac-profile-stats { background-color: #f8f9fa; padding: 1.5rem; border-radius: 8px; } .hvac-stat-item { text-align: center; margin-bottom: 1.5rem; } .hvac-stat-item:last-child { margin-bottom: 0; } .hvac-stat-value { display: block; font-size: 2rem; font-weight: 700; color: #0274be; margin-bottom: 0.5rem; } .hvac-stat-label { display: block; font-size: 0.875rem; color: #666; text-transform: uppercase; letter-spacing: 0.05em; } /* Profile Main Content */ .hvac-profile-main { flex: 1; } .hvac-profile-section { background-color: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; } .hvac-profile-section h2 { margin-top: 0; margin-bottom: 1.5rem; color: #333; font-size: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid #e0e0e0; } /* Profile Details */ .hvac-profile-details { display: grid; gap: 1rem; } .hvac-detail-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; } .hvac-detail-label { font-weight: 600; color: #666; } .hvac-detail-value { color: #333; } .hvac-detail-value a { color: #0274be; text-decoration: none; } .hvac-detail-value a:hover { text-decoration: underline; } /* Profile Bio */ .hvac-profile-bio { color: #333; line-height: 1.6; } /* Certifications List */ .hvac-certifications-list { display: grid; gap: 0.75rem; } .hvac-certification-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background-color: #f8f9fa; border-radius: 4px; } .hvac-certification-item .dashicons { color: #0274be; width: 20px; height: 20px; } /* Edit Form Styles */ .hvac-form { background-color: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .hvac-form-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #e0e0e0; } .hvac-form-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .hvac-form-section h3 { margin-bottom: 1.5rem; color: #333; font-size: 1.25rem; } .hvac-form-row { margin-bottom: 1.5rem; } .hvac-form-row label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #333; } .hvac-form-row input, .hvac-form-row select, .hvac-form-row textarea { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } .hvac-form-row input:focus, .hvac-form-row select:focus, .hvac-form-row textarea:focus { outline: none; border-color: #0274be; box-shadow: 0 0 0 3px rgba(2, 116, 190, 0.1); } .hvac-form-row-half { display: flex; gap: 1rem; } .hvac-form-row-half > div { flex: 1; } /* Profile Photo Upload */ .hvac-profile-photo-upload { display: flex; align-items: center; gap: 2rem; } .hvac-current-photo img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; } .hvac-photo-placeholder { width: 100px; height: 100px; border-radius: 50%; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #999; font-size: 0.875rem; } .hvac-photo-actions { display: flex; gap: 1rem; } /* Buttons */ .hvac-button { display: inline-block; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s ease; } .hvac-button-primary { background-color: #0274be; color: white; } .hvac-button-primary:hover { background-color: #005fa3; } .hvac-button-secondary { background-color: #6c757d; color: white; } .hvac-button-secondary:hover { background-color: #5a6268; } .hvac-button-danger-outline { background-color: transparent; color: #dc3545; border: 1px solid #dc3545; } .hvac-button-danger-outline:hover { background-color: #dc3545; color: white; } /* Form Actions */ .hvac-form-actions { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e0e0e0; } /* Messages */ .hvac-message { padding: 1rem 1.5rem; border-radius: 4px; margin-bottom: 1.5rem; font-weight: 500; } .hvac-message-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .hvac-message-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* Form Errors */ .hvac-form-error { border-color: #dc3545 !important; } .hvac-error-message { display: block; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; } /* Responsive */ @media (max-width: 768px) { .hvac-trainer-profile-view, .hvac-trainer-profile-edit { padding: 1rem; } .hvac-page-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .hvac-profile-content { flex-direction: column; } .hvac-profile-sidebar { flex: none; width: 100%; } .hvac-detail-row { grid-template-columns: 1fr; gap: 0.25rem; } .hvac-detail-label { font-size: 0.875rem; } .hvac-form-row-half { flex-direction: column; } .hvac-profile-photo-upload { flex-direction: column; align-items: flex-start; } .hvac-photo-actions { flex-wrap: wrap; } }