/** * HVAC Forms & Profile CSS Bundle */ /* === hvac-registration.css === */ /* Reduced Motion Support Added - 2025-07-23 */ /* Vendor Prefixes Added - 2025-07-23 */ /** * HVAC Trainer Registration Form Enhanced Styles * * @version 2.0.0 */ /* Error Styles */ .hvac-form-errors { background-color: #fee; border: 1px solid #fcc; border-radius: 4px; padding: 1rem; margin-bottom: 2rem; } .hvac-form-errors h3 { color: #d8000c; margin-top: 0; margin-bottom: 0.5rem; font-size: 1.1rem; } .hvac-form-errors ul { margin: 0; padding-left: 1.5rem; } .hvac-form-errors li { color: #d8000c; margin-bottom: 0.25rem; } .error-message { color: #d8000c; font-size: 0.875rem; margin-top: 0.25rem; margin-bottom: 0; } input.error, select.error, textarea.error { border-color: #fcc; } /* Main Container */ .hvac-registration-form-wrapper { max-width: 1200px; margin: 0 auto; padding: 2rem; /* IE fallback */ padding: var(--hvac-spacing-xl) var(--hvac-spacing-md); background-color: #f9fafb; } /* Mobile Container Fixes */ @media screen and (max-width: 768px) { .hvac-registration-form-wrapper { padding: 20px !important; /* Ensure generous mobile padding */ margin: 0 !important; max-width: none !important; width: 100% !important; box-sizing: border-box !important; } } @media screen and (max-width: 480px) { .hvac-registration-form-wrapper { padding: 15px !important; /* Slightly less but still comfortable */ } } @media screen and (max-width: 375px) { .hvac-registration-form-wrapper { padding: 12px !important; /* Minimum comfortable padding for small screens */ } } /* Form Card */ .hvac-registration-form { max-width: 800px; margin: 0 auto; padding: 2rem; /* IE fallback */ padding: var(--hvac-spacing-xl); background-color: white; -webkit-webkit-webkit-border-radius: 4px; border-radius: 4px; border-radius: 4px; /* IE fallback */ -webkit-border-radius: var(--hvac-border-radius); -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* IE fallback */ -webkit-box-shadow: var(--hvac-shadow-lg); box-shadow: var(--hvac-shadow-lg); border: 1px solid #e0e0e0; /* IE fallback */ border: 1px solid var(--hvac-border); } /* Form Header */ .hvac-registration-form-header { text-align: center; margin-bottom: 2rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-xl); padding-bottom: 1rem; /* IE fallback */ padding-bottom: var(--hvac-spacing-md); border-bottom: 1px solid #f0f0f0; /* IE fallback */ border-bottom: 1px solid var(--hvac-border-light); } .hvac-registration-form h2 { color: #0274be; /* IE fallback */ color: var(--hvac-primary); font-size: 1.8rem; margin-bottom: 0.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-sm); font-weight: 700; } .hvac-registration-form-header p { color: #757575; /* IE fallback */ color: var(--hvac-text-light); font-size: 1rem; max-width: 600px; margin: 0 auto; } /* Form Sections */ .hvac-registration-form .form-section { margin-bottom: 2rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-xl); padding-bottom: 1.5rem; /* IE fallback */ padding-bottom: var(--hvac-spacing-lg); border-bottom: 1px solid #f0f0f0; /* IE fallback */ border-bottom: 1px solid var(--hvac-border-light); } .hvac-registration-form .form-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .hvac-registration-form .form-section h3 { color: #3a3f44; /* IE fallback */ color: var(--hvac-secondary-dark); margin-bottom: 1rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-md); font-size: 1.3rem; font-weight: 600; padding-bottom: 0.5rem; /* IE fallback */ padding-bottom: var(--hvac-spacing-sm); border-bottom: 1px dashed #f0f0f0; /* IE fallback */ border-bottom: 1px dashed var(--hvac-border-light); } /* Form Grid Layout */ .hvac-registration-form .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1rem; /* IE fallback */ gap: var(--hvac-spacing-md); } /* Form Rows */ .hvac-registration-form .form-row { margin-bottom: 1rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-md); } /* Two-column layout */ .form-row-half { display: flex; gap: 1rem; } .form-row-half > div { flex: 1; } /* Three-column layout */ .form-row-thirds { display: flex; gap: 1rem; } .form-row-thirds > div { flex: 1; } /* Form Fields */ .hvac-registration-form label { display: block; margin-bottom: 0.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-sm); font-weight: 600; color: #333333; /* IE fallback */ color: var(--hvac-text); font-size: 0.95rem; } .hvac-registration-form label .required { color: #d63638; /* IE fallback */ color: var(--hvac-error); margin-left: 0.25rem; /* IE fallback */ margin-left: var(--hvac-spacing-xs); } .hvac-registration-form input[type="text"], .hvac-registration-form input[type="email"], .hvac-registration-form input[type="password"], .hvac-registration-form input[type="url"], .hvac-registration-form textarea, .hvac-registration-form select { width: 100%; padding: 0.85rem; border: 1px solid #e0e0e0; /* IE fallback */ border: 1px solid var(--hvac-border); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); font-size: 1rem; -webkit-transition: border-color 0.2s, box-shadow 0.2s; background-color: #f9fafb; } .hvac-registration-form input[type="text"]:focus, .hvac-registration-form input[type="email"]:focus, .hvac-registration-form input[type="password"]:focus, .hvac-registration-form input[type="url"]:focus, .hvac-registration-form textarea:focus, .hvac-registration-form select:focus { border-color: #0274be; /* IE fallback */ border-color: var(--hvac-primary); outline: none; -webkit-box-shadow: 0 0 0 3px #e6f3fb;/* IE fallback */ -webkit-box-shadow: 0 0 0 3px var(--hvac-primary-light); background-color: white; } .hvac-registration-form textarea { min-height: 120px; resize: vertical; } .hvac-registration-form select { -webkit-appearance: none; -moz-appearance: none; background-image: url("data: image/svg+xml; charset=utf-8,%3Csvg xmlns='; http: //www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; padding-right: 2.5rem; } /* Field Helper Text */ .hvac-registration-form .field-help { margin-top: 0.25rem; /* IE fallback */ margin-top: var(--hvac-spacing-xs); font-size: 0.85rem; color: #757575; /* IE fallback */ color: var(--hvac-text-light); } /* Submit Button Section */ .hvac-registration-form .form-submit { margin-top: 2rem; /* IE fallback */ margin-top: var(--hvac-spacing-xl); text-align: center; } .hvac-registration-form input[type="submit"] { display: inline-block; padding: 0.85rem 2.5rem; background-color: #0274be; /* IE fallback */ background-color: var(--hvac-primary); color: white; border: none; border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); font-size: 1.1rem; font-weight: 600; cursor: pointer; text-align: center; -webkit-transition: background-color 0.2s, transform 0.1s; text-transform: uppercase; letter-spacing: 0.5px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* IE fallback */ -webkit-box-shadow: var(--hvac-shadow); } .hvac-registration-form input[type="submit"]:hover { background-color: #005fa3; /* IE fallback */ background-color: var(--hvac-primary-dark); -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* IE fallback */ box-shadow: var(--hvac-shadow-lg); } .hvac-registration-form input[type="submit"]:active { -webkit-transform: translateY(0); -ms-transform: translateY(0); } /* Checkbox & Radio Styles */ .hvac-registration-form .checkbox-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; gap: 0.5rem; /* IE fallback */ gap: var(--hvac-spacing-sm); margin-top: 0.5rem; /* IE fallback */ margin-top: var(--hvac-spacing-sm); } .hvac-registration-form .checkbox-group label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5rem; /* IE fallback */ gap: var(--hvac-spacing-sm); font-weight: normal; cursor: pointer; margin-bottom: 0; } .hvac-registration-form .checkbox-group input[type="checkbox"], .hvac-registration-form .checkbox-group input[type="radio"] { width: 18px; height: 18px; cursor: pointer; } /* Error Messages */ .hvac-registration-form .hvac-errors { background-color: #ffebe9; /* IE fallback */ background-color: var(--hvac-error-light); border: 1px solid #d63638; /* IE fallback */ border: 1px solid var(--hvac-error); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); margin-bottom: 1.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-lg); color: #d63638; /* IE fallback */ color: var(--hvac-error); } .hvac-registration-form .hvac-errors .error { margin: 0.25rem; /* IE fallback */ margin: var(--hvac-spacing-xs) 0; } .hvac-registration-form .form-row.has-error input, .hvac-registration-form .form-row.has-error select, .hvac-registration-form .form-row.has-error textarea { border-color: #d63638; /* IE fallback */ border-color: var(--hvac-error); } .hvac-registration-form .form-row.has-error .field-error { color: #d63638; /* IE fallback */ color: var(--hvac-error); font-size: 0.85rem; margin-top: 0.25rem; /* IE fallback */ margin-top: var(--hvac-spacing-xs); } /* Success Message */ .hvac-registration-form .hvac-success { background-color: #e8f5e9; /* IE fallback */ background-color: var(--hvac-success-light); border: 1px solid #4caf50; /* IE fallback */ border: 1px solid var(--hvac-success); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); margin-bottom: 1.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-lg); color: #4caf50; /* IE fallback */ color: var(--hvac-success); } /* Login Link */ .hvac-login-link { margin-top: 1.5rem; /* IE fallback */ margin-top: var(--hvac-spacing-lg); text-align: center; padding-top: 1rem; /* IE fallback */ padding-top: var(--hvac-spacing-md); border-top: 1px solid #f0f0f0; /* IE fallback */ border-top: 1px solid var(--hvac-border-light); font-size: 0.95rem; } .hvac-login-link a { color: #0274be; /* IE fallback */ color: var(--hvac-primary); font-weight: 600; text-decoration: none; } .hvac-login-link a:hover { text-decoration: underline; } /* Progress Indicator for Multi-step Forms */ .hvac-registration-progress { margin-bottom: 2rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-xl); padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); background-color: #f0f0f1; /* IE fallback */ background-color: var(--hvac-secondary-light); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; } .hvac-registration-progress::before { content: ''; position: absolute; top: 50%; left: 1rem; /* IE fallback */ left: var(--hvac-spacing-md); right: 1rem; /* IE fallback */ right: var(--hvac-spacing-md); height: 2px; background-color: #e0e0e0; /* IE fallback */ background-color: var(--hvac-border); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 1; } .hvac-registration-step { width: 30px; height: 30px; -webkit-border-radius: 50%; background-color: white; border: 2px solid #e0e0e0; /* IE fallback */ border: 2px solid var(--hvac-border); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: 600; position: relative; z-index: 2; } .hvac-registration-step.active { background-color: #0274be; /* IE fallback */ background-color: var(--hvac-primary); border-color: #0274be; /* IE fallback */ border-color: var(--hvac-primary); color: white; } .hvac-registration-step.completed { background-color: #4caf50; /* IE fallback */ background-color: var(--hvac-success); border-color: #4caf50; /* IE fallback */ border-color: var(--hvac-success); color: white; } /* Responsive Adjustments */ /* Reduced Motion Support Added - WCAG 2.1 Accessibility */ /* Respects user preference for reduced motion to prevent vestibular disorders */ @media (prefers-reduced-motion: reduce) { /* Disable all animations and transitions globally */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Remove specific transform animations */ .hvac-animate-fade-in, .hvac-animate-scale-up, .hvac-animate-pulse, .hvac-animate-slide-in-right, .hvac-animate-slide-in-left, .hvac-animate-slide-in-bottom { animation: none !important; opacity: 1 !important; transform: none !important; } /* Disable hover transformations */ .hvac-card:hover, .hvac-stat-card:hover, .hvac-event-stat-card:hover, .hvac-button:hover, .hvac-email-submit:hover { transform: none !important; animation: none !important; } /* Keep essential visual feedback but remove motion */ .hvac-card:hover, .hvac-stat-card:hover, .hvac-event-stat-card:hover { border-color: var(--hvac-primary, #0274be) !important; box-shadow: 0 0 0 2px rgba(2, 116, 190, 0.2) !important; } /* Disable loading spinner animation but keep visibility */ .hvac-loading::after { animation: none !important; border-radius: 50% !important; border: 2px solid rgba(0, 0, 0, 0.2) !important; border-top-color: #333 !important; } /* Disable focus pulse animation */ .hvac-button:focus, .hvac-email-submit:focus, .hvac-content button[type="submit"]:focus { animation: none !important; } /* Ensure smooth scrolling is disabled */ html { scroll-behavior: auto !important; } /* Disable CSS Grid/Flexbox animations if any */ .hvac-dashboard-stats .hvac-stat-card:nth-child(n), .hvac-event-summary-stats .hvac-event-stat-card:nth-child(n) { animation: none !important; opacity: 1 !important; } } /* Provide alternative visual feedback for reduced motion users */ @media (prefers-reduced-motion: reduce) { /* Enhanced border feedback instead of transform */ .hvac-content button:hover, .hvac-content input[type="submit"]:hover, .hvac-content a:hover { outline: 2px solid var(--hvac-primary, #0274be) !important; outline-offset: 2px !important; } /* Enhanced color changes for interactive elements */ .hvac-attendee-item:hover { background-color: var(--hvac-primary-light, #e6f3fb) !important; border-left: 4px solid var(--hvac-primary, #0274be) !important; } /* Static loading indicator */ .hvac-loading { opacity: 0.7 !important; } .hvac-loading::after { content: "Loading..." !important; display: inline-block !important; font-size: 12px !important; color: #666 !important; border: none !important; background: none !important; border-radius: 0 !important; width: auto !important; height: auto !important; position: static !important; margin-left: 8px !important; } } @media (max-width: 768px) { .hvac-registration-form { padding: 1.5rem; /* IE fallback */ padding: var(--hvac-spacing-lg); } .hvac-registration-form .form-grid { grid-template-columns: 1fr; } .hvac-registration-form h2 { font-size: 1.5rem; } .hvac-registration-progress { padding: 0.5rem; /* IE fallback */ padding: var(--hvac-spacing-sm); } } @media (max-width: 480px) { .hvac-registration-form { padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); } .hvac-registration-form h2 { font-size: 1.3rem; } .hvac-registration-form .form-submit input[type="submit"] { width: 100%; } } /* Focus Management Styles - WCAG 2.1 Compliance */ /* Added for keyboard accessibility and screen reader support */ /* Button Focus Styles */ .hvac-button:focus, .hvac-content .button:focus, .hvac-content button:focus, .hvac-content input[type="submit"]:focus, .hvac-email-submit:focus, .hvac-filter-submit:focus, .hvac-certificate-actions button:focus, .hvac-certificate-actions a:focus { outline: 2px solid #005fcc; outline-offset: 2px; -webkit-box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); border-radius: 4px; } /* Input Focus Styles */ .hvac-form-input:focus, .hvac-content input[type="text"]:focus, .hvac-content input[type="email"]:focus, .hvac-content input[type="password"]:focus, .hvac-content input[type="url"]:focus, .hvac-content textarea:focus, .hvac-content select:focus, .hvac-email-form-row input:focus, .hvac-email-form-row textarea:focus, .hvac-filter-group input:focus, .hvac-filter-group select:focus { outline: 2px solid #005fcc; outline-offset: 2px; border-color: #005fcc; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); } /* Link Focus Styles */ .hvac-content a:focus, .hvac-event-link:focus, .hvac-certificate-link:focus, .hvac-attendee-profile-icon:focus, .hvac-dashboard-nav a:focus, .hvac-email-navigation a:focus { outline: 2px solid #005fcc; outline-offset: 2px; text-decoration: underline; background-color: rgba(0, 95, 204, 0.1); -webkit-border-radius: 2px; } /* Interactive Element Focus Styles */ .hvac-attendee-checkbox:focus, .hvac-select-all-container input[type="checkbox"]:focus, .hvac-modal-close:focus, .hvac-certificate-table tr:focus { outline: 2px solid #005fcc; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); } /* High Contrast Mode Support */ @media (prefers-contrast: high) { .hvac-content *:focus { outline: 3px solid #000000; outline-offset: 2px; background-color: #ffff00; color: #000000; } } /* Focus-visible polyfill support */ /* Reset focus for mouse users while preserving keyboard accessibility */ .js-focus-visible:focus:not(.focus-visible) { outline: none; -webkit-box-shadow: none; } /* Ensure focus is visible for keyboard users */ .js-focus-visible .focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; } /* CSS Grid Fallbacks for IE */ .hvac-stats-row, .hvac-dashboard-stats, .hvac-certificate-stats { display: -ms-grid; -ms-grid-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* Progressive enhancement for modern browsers */ @supports (display: grid) { .hvac-stats-row, .hvac-dashboard-stats, .hvac-certificate-stats { display: grid; } } /* Feature Detection Support */ @supports not (display: flex) { .hvac-content [class*="flex"] { display: table-cell; vertical-align: middle; } } @supports not (display: grid) { .hvac-content [class*="grid"] { display: block; overflow: hidden; } .hvac-content [class*="grid"] > * { float: left; width: 50%; } } /* === hvac-trainer-profile.css === */ /** * 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; } } /* Certification section styling */ .hvac-certification-section { border: 2px solid #0073aa; border-radius: 8px; padding: 20px; margin-bottom: 30px; background: linear-gradient(135deg, #f8fdff 0%, #e6f7ff 100%); position: relative; } .hvac-certification-section h2, .hvac-certification-section h3 { color: #0073aa; margin-top: 0; display: flex; align-items: center; gap: 10px; } .hvac-certification-section h2::before, .hvac-certification-section h3::before { content: "🏆"; font-size: 1.2em; } /* Certification status badges */ .hvac-cert-status { padding: 4px 12px; border-radius: 20px; font-weight: bold; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.5px; } .hvac-cert-status-active { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .hvac-cert-status-expired { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .hvac-cert-status-pending { background-color: #fff3cd; color: #856404; border: 1px solid #ffeaa7; } .hvac-cert-status-disabled { background-color: #e2e3e5; color: #495057; border: 1px solid #ced4da; } /* Read-only field styling for certification edit */ .hvac-certification-edit-section .hvac-read-only-field { background-color: #f8f9fa; border: 1px solid #e9ecef; padding: 8px 12px; border-radius: 4px; color: #6c757d; font-style: italic; } .hvac-read-only-note { font-size: 0.8em; color: #6c757d; font-weight: normal; margin-left: 10px; } /* Enhanced form styling for certification fields */ .hvac-certification-edit-section .hvac-form-row select, .hvac-certification-edit-section .hvac-form-row input[type="date"] { border: 2px solid #e9ecef; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .hvac-certification-edit-section .hvac-form-row select:focus, .hvac-certification-edit-section .hvac-form-row input[type="date"]:focus { border-color: #0073aa; box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.25); outline: none; } /* === hvac-profile-sharing.css === */ /** * HVAC Profile Sharing Styles * * @package HVAC_Community_Events * @version 1.0.0 */ /* ======================================== Page Header Actions ======================================== */ .hvac-page-header-actions { display: flex; gap: 15px; align-items: center; } .hvac-button.hvac-button-secondary { background: #f8f9fa; color: #333; border: 2px solid #dee2e6; transition: all 0.3s; } .hvac-button.hvac-button-secondary:hover { background: #e9ecef; border-color: #adb5bd; color: #333; text-decoration: none; } .hvac-share-profile-btn .dashicons { font-size: 16px; margin-right: 8px; vertical-align: middle; } /* ======================================== Share Profile Modal ======================================== */ .hvac-share-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-share-modal-content { background: white; border-radius: 12px; width: 100%; max-width: 800px; max-height: 90vh; overflow-y: auto; position: relative; padding: 40px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } /* Modal Header */ .hvac-share-modal-title { margin: 0 0 16px 0; font-size: 32px; font-weight: 600; color: #333; text-align: center; line-height: 1.2; } .hvac-share-description { margin: 0 0 32px 0; font-size: 18px; color: #666; text-align: center; line-height: 1.5; } /* Close Button */ .hvac-modal-close { position: absolute; top: 15px; right: 15px; background: white; border: 2px solid #333; border-radius: 50%; width: 40px; height: 40px; 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; } /* ======================================== Share URL Section ======================================== */ .hvac-share-url-section { margin-bottom: 40px; padding: 24px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; } .hvac-share-url-label { display: block; margin-bottom: 12px; font-size: 18px; color: #333; font-weight: 600; } .hvac-share-url-container { display: flex; gap: 12px; align-items: stretch; } .hvac-share-url-input { flex: 1; padding: 12px 16px; border: 2px solid #dee2e6; border-radius: 8px; font-size: 16px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; background: white; color: #495057; transition: border-color 0.3s; } .hvac-share-url-input:focus { outline: none; border-color: #0073aa; box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1); } .hvac-copy-url-btn { padding: 12px 24px; background: #0073aa; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; white-space: nowrap; } .hvac-copy-url-btn:hover { background: #005a87; transform: translateY(-1px); } .hvac-copy-url-btn:active { transform: translateY(0); } .hvac-copy-url-btn.copied { background: #28a745; } /* ======================================== Profile Card Section ======================================== */ .hvac-share-card-section { text-align: center; } .hvac-share-card-description { margin: 0 0 24px 0; font-size: 18px; color: #666; font-weight: 500; } .hvac-share-profile-card-container { display: flex; justify-content: center; align-items: center; min-height: 320px; background: #f8f9fa; border: 2px dashed #dee2e6; border-radius: 12px; padding: 20px; transition: all 0.3s; } .hvac-share-profile-card-container.loaded { background: transparent; border: none; padding: 0; } /* Loading State */ .hvac-share-card-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #666; } .hvac-share-card-loading .dashicons { font-size: 48px; animation: spin 1s linear infinite; } .hvac-share-card-loading p { margin: 0; font-size: 16px; font-weight: 500; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ======================================== Shareable Profile Card ======================================== */ .hvac-share-profile-card { border: 2px solid #e0e0e0; border-radius: 16px; padding: 32px; background: white; display: flex; align-items: center; gap: 32px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); max-width: 700px; margin: 0 auto; } .hvac-share-avatar { width: 160px; height: 160px; flex-shrink: 0; position: relative; } .hvac-share-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #dee2e6; } .hvac-share-avatar-placeholder { width: 100%; height: 100%; background: #6c757d; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 48px; font-weight: bold; } .hvac-share-details { flex: 1; min-width: 0; } .hvac-share-details h2 { margin: 0 0 12px 0; font-size: 32px; font-weight: 700; color: #212529; line-height: 1.2; } .hvac-share-business-name { margin: 0 0 8px 0; font-size: 20px; color: #6c757d; font-weight: 600; } .hvac-share-location { margin: 0 0 8px 0; font-size: 18px; color: #6c757d; font-weight: 500; } .hvac-share-certification { margin: 0 0 16px 0; font-size: 18px; color: #0073aa; font-weight: 700; } .hvac-share-qr { width: 120px; height: 120px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 8px; } .hvac-share-qr img { width: 100%; height: 100%; object-fit: contain; } /* mQ Badge Overlay on Share Card */ .hvac-share-avatar .hvac-mq-badge-overlay { position: absolute; top: -8px; right: -8px; width: 40px; height: 40px; z-index: 10; pointer-events: none; } .hvac-share-avatar .hvac-mq-badge { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); } /* ======================================== Mobile Responsive ======================================== */ @media (max-width: 768px) { .hvac-share-modal-content { padding: 24px; margin: 10px; } .hvac-share-modal-title { font-size: 24px; } .hvac-share-description { font-size: 16px; } .hvac-page-header-actions { flex-direction: column; gap: 10px; align-items: stretch; } .hvac-share-url-container { flex-direction: column; } .hvac-share-profile-card { flex-direction: column; text-align: center; gap: 24px; padding: 24px; } .hvac-share-avatar { width: 120px; height: 120px; margin: 0 auto; } .hvac-share-details h2 { font-size: 24px; } .hvac-share-qr { width: 100px; height: 100px; margin: 0 auto; } } @media (max-width: 480px) { .hvac-share-modal { padding: 10px; } .hvac-share-modal-content { padding: 20px; } .hvac-share-modal-title { font-size: 20px; } .hvac-share-profile-card { padding: 20px; } } /* === hvac-organizers.css === */ /** * HVAC Organizers Styles * * @package HVAC_Community_Events * @version 2.0.0 */ /* Page Layout */ .hvac-organizers-list, .hvac-organizer-manage { 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; } /* Filters */ .hvac-organizers-filters { background-color: #f5f5f5; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; } .hvac-filter-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .hvac-filter-row { display: flex; gap: 1rem; width: 100%; } .hvac-filter-group { flex: 1; min-width: 200px; } .hvac-filter-group input { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } /* Table */ .hvac-organizers-table-wrapper { overflow-x: auto; margin-bottom: 2rem; } .hvac-organizers-table { width: 100%; border-collapse: collapse; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .hvac-organizers-table th { background-color: #f8f9fa; padding: 1rem; text-align: left; font-weight: 600; color: #333; border-bottom: 2px solid #e0e0e0; } .hvac-organizers-table td { padding: 1rem; border-bottom: 1px solid #e0e0e0; vertical-align: middle; } .hvac-organizers-table tbody tr:hover { background-color: #f8f9fa; } .hvac-no-results { text-align: center; color: #666; font-style: italic; padding: 3rem !important; } /* Logo Styles */ .hvac-org-logo { width: 60px; } .hvac-org-logo img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; } .hvac-logo-placeholder { width: 50px; height: 50px; background-color: #0274be; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 600; border-radius: 4px; } .hvac-logo-placeholder-large { width: 200px; height: 200px; background-color: #f0f0f0; color: #999; display: flex; align-items: center; justify-content: center; font-size: 1rem; border-radius: 8px; border: 2px dashed #ddd; } /* Logo Upload */ .hvac-org-logo-upload { display: flex; align-items: flex-start; gap: 2rem; } .hvac-current-logo img { max-width: 200px; max-height: 200px; object-fit: contain; border-radius: 8px; border: 1px solid #e0e0e0; } .hvac-logo-actions { display: flex; flex-direction: column; gap: 1rem; } .hvac-help-text { color: #666; font-size: 0.875rem; margin-top: 0.5rem; } /* 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 { background-color: #dc3545; color: white; } .hvac-button-danger:hover { background-color: #c82333; } .hvac-button-danger-outline { background-color: transparent; color: #dc3545; border: 1px solid #dc3545; } .hvac-button-danger-outline:hover { background-color: #dc3545; color: white; } .hvac-button-small { padding: 0.5rem 1rem; font-size: 0.875rem; } .hvac-text-muted { color: #6c757d; font-style: italic; } /* Pagination */ .hvac-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; } .hvac-pagination a, .hvac-pagination span { padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #333; } .hvac-pagination a:hover { background-color: #f5f5f5; } .hvac-pagination .current { background-color: #0274be; color: white; border-color: #0274be; } /* 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; } .hvac-form-actions { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e0e0e0; } .hvac-form-actions .hvac-button-danger { margin-left: auto; } /* 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 Error Styles */ .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-organizers-list, .hvac-organizer-manage { padding: 1rem; } .hvac-page-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .hvac-filter-row { flex-direction: column; } .hvac-filter-group { width: 100%; } .hvac-form-row-half { flex-direction: column; } .hvac-form-actions { flex-wrap: wrap; } .hvac-form-actions .hvac-button-danger { margin-left: 0; width: 100%; } .hvac-organizers-table { font-size: 0.875rem; } .hvac-organizers-table th, .hvac-organizers-table td { padding: 0.5rem; } .hvac-org-logo-upload { flex-direction: column; align-items: center; } .hvac-logo-actions { width: 100%; align-items: stretch; } } /* === hvac-venues.css === */ /** * HVAC Venues Styles * * @package HVAC_Community_Events * @version 2.0.0 */ /* Page Layout */ .hvac-venues-list, .hvac-venue-manage { 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; } /* Filters */ .hvac-venues-filters { background-color: #f5f5f5; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; } .hvac-filter-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .hvac-filter-group { flex: 1; min-width: 200px; } .hvac-filter-group input, .hvac-filter-group select { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } /* Table */ .hvac-venues-table-wrapper { overflow-x: auto; margin-bottom: 2rem; } .hvac-venues-table { width: 100%; border-collapse: collapse; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .hvac-venues-table th { background-color: #f8f9fa; padding: 1rem; text-align: left; font-weight: 600; color: #333; border-bottom: 2px solid #e0e0e0; } .hvac-venues-table td { padding: 1rem; border-bottom: 1px solid #e0e0e0; } .hvac-venues-table tbody tr:hover { background-color: #f8f9fa; } .hvac-no-results { text-align: center; color: #666; font-style: italic; padding: 3rem !important; } /* Badges */ .hvac-badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 3px; font-size: 0.75rem; font-weight: 600; margin-left: 0.5rem; } .hvac-badge-owner { background-color: #e3f2fd; color: #1976d2; } /* 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 { background-color: #dc3545; color: white; } .hvac-button-danger:hover { background-color: #c82333; } .hvac-button-small { padding: 0.5rem 1rem; font-size: 0.875rem; } .hvac-text-muted { color: #6c757d; font-style: italic; } /* Pagination */ .hvac-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; } .hvac-pagination a, .hvac-pagination span { padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #333; } .hvac-pagination a:hover { background-color: #f5f5f5; } .hvac-pagination .current { background-color: #0274be; color: white; border-color: #0274be; } /* 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; } .hvac-form-actions { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e0e0e0; } .hvac-form-actions .hvac-button-danger { margin-left: auto; } /* Responsive */ @media (max-width: 768px) { .hvac-venues-list, .hvac-venue-manage { padding: 1rem; } .hvac-page-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .hvac-filter-form { flex-direction: column; } .hvac-filter-group { width: 100%; } .hvac-form-row-half { flex-direction: column; } .hvac-form-actions { flex-wrap: wrap; } .hvac-form-actions .hvac-button-danger { margin-left: 0; width: 100%; } .hvac-venues-table { font-size: 0.875rem; } .hvac-venues-table th, .hvac-venues-table td { padding: 0.5rem; } } /* 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 Error Styles */ .hvac-form-error { border-color: #dc3545 !important; } .hvac-error-message { display: block; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; }