/* ========================================================================== GoneFinder — application layer -------------------------------------------------------------------------- One file, assembled from the eight separate stylesheets index.html used to load in exactly this order. The concatenation is byte-for-byte, so the cascade is unchanged; only the request count dropped (8 -> 1). Cascade position (see the of index.html): styles.css base + legacy palette -> gf-app.css THIS FILE - component layers design-tokens.css design system: colours, spacing, type (source of truth) gf-ui.css token-native UI layer, wins last Anything you add here should read from the design tokens, not from raw hex. ========================================================================== */ /* ========================================================================== >>> merged from professional-theme.css ========================================================================== */ /** * Professional Government Theme * Based on U.S. Web Design System and international government standards * WCAG 2.2 AA Compliant - Professional color palette for serious use cases */ :root { /* Professional Government Colors - Based on USWDS */ --gov-blue-60: #005ea2; /* Primary action color */ --gov-blue-70: #0050d8; /* Hover state */ --gov-blue-80: #1a4480; /* Active state */ --gov-blue-90: #162e51; /* Dark variant */ --gov-gray-5: #f9f9f9; /* Background light */ --gov-gray-10: #e6e6e6; /* Border light */ --gov-gray-30: #a9aeb1; /* Text muted */ --gov-gray-50: #71767a; /* Text secondary */ --gov-gray-70: #454545; /* Text primary */ --gov-gray-90: #1b1b1b; /* Text strong */ --gov-red-60: #d63031; /* Error/Alert */ --gov-red-70: #b92c28; /* Error hover */ --gov-green-60: #00a91c; /* Success */ --gov-green-70: #008817; /* Success hover */ --gov-orange-60: #fa9441; /* Warning */ --gov-gold-20: #fef7e5; /* Warning background */ /* Professional Theme Override */ --primary-600: var(--gov-blue-60); --primary-700: var(--gov-blue-70); --primary-800: var(--gov-blue-80); --primary-50: #eff6ff; --primary-100: #bfdbfe; --primary-200: #93c5fd; /* Trust and Authority Colors */ --trust-600: var(--gov-blue-60); --trust-700: var(--gov-blue-70); --trust-50: #eff6ff; --trust-100: #dbeafe; --trust-200: #bfdbfe; /* Professional Text Colors */ --text-primary: var(--gov-gray-90); --text-secondary: var(--gov-gray-70); --text-muted: var(--gov-gray-50); /* Professional Backgrounds */ --bg-primary: #ffffff; --bg-secondary: var(--gov-gray-5); --bg-tertiary: #f1f3f6; /* Professional Borders */ --border-primary: var(--gov-gray-10); --border-secondary: var(--gov-gray-30); /* Status Colors */ --success-600: var(--gov-green-60); --success-700: var(--gov-green-70); --error-600: var(--gov-red-60); --error-700: var(--gov-red-70); --warning-600: var(--gov-orange-60); --warning-50: var(--gov-gold-20); } /* Dark Mode Professional Theme */ [data-theme="dark"] { --gov-blue-20: #73b3e7; --gov-blue-30: #4f97d1; --gov-blue-40: #2e7bbb; --primary-600: var(--gov-blue-20); --primary-700: var(--gov-blue-30); --primary-800: var(--gov-blue-40); --trust-600: var(--gov-blue-20); --trust-700: var(--gov-blue-30); --bg-primary: #1a1a1a; --bg-secondary: #2d2d2d; --bg-tertiary: #3d3d3d; --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-muted: #b3b3b3; --border-primary: #404040; --border-secondary: #555555; } /* Professional Navigation Styling */ .navbar { background: rgba(255, 255, 255, 0.98); border-bottom: 2px solid var(--gov-blue-60); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .navbar { background: rgba(26, 26, 26, 0.98); border-bottom: 2px solid var(--gov-blue-20); } .nav-brand { color: var(--gov-blue-60); font-weight: 700; font-size: 1.25rem; } [data-theme="dark"] .nav-brand { color: var(--gov-blue-20); } /* Professional Hero Section */ .hero { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-bottom: 1px solid var(--border-primary); } [data-theme="dark"] .hero { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); } .hero-title { color: var(--text-primary); font-weight: 600; } .hero-gradient { color: var(--gov-blue-60); font-weight: 700; } [data-theme="dark"] .hero-gradient { color: var(--gov-blue-20); } /* Professional Search Styling */ .search-box-hero { background: white; border: 2px solid var(--gov-blue-60); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .search-box-hero { background: var(--bg-secondary); border: 2px solid var(--gov-blue-20); } .search-btn-hero { background: var(--gov-blue-60); color: white; font-weight: 600; } .search-btn-hero:hover { background: var(--gov-blue-70); } [data-theme="dark"] .search-btn-hero { background: var(--gov-blue-20); color: var(--gov-gray-90); } [data-theme="dark"] .search-btn-hero:hover { background: var(--gov-blue-30); } /* Professional Button Styling */ .btn-primary { background: var(--gov-blue-60); border: 2px solid var(--gov-blue-60); color: white; font-weight: 600; text-transform: none; letter-spacing: 0; } .btn-primary:hover:not(:disabled) { background: var(--gov-blue-70); border-color: var(--gov-blue-70); } .btn-secondary { background: transparent; border: 2px solid var(--gov-gray-50); color: var(--gov-gray-70); font-weight: 600; } .btn-secondary:hover:not(:disabled) { background: var(--gov-gray-5); border-color: var(--gov-gray-70); color: var(--gov-gray-90); } /* Professional Form Styling */ .form-input, input[type="text"], input[type="email"], input[type="date"], textarea, select { border: 1px solid var(--gov-gray-30); border-radius: 0; font-family: inherit; } .form-input:focus, input:focus, textarea:focus, select:focus { border-color: var(--gov-blue-60); box-shadow: 0 0 0 3px rgba(0, 94, 162, 0.25); outline: none; } /* Professional Status Indicators */ .status-stolen { background: var(--gov-red-60); color: white; font-weight: 600; } .status-recovered { background: var(--gov-green-60); color: white; font-weight: 600; } /* Professional Trust Indicators */ .trust-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--trust-50); color: var(--trust-700); border: 1px solid var(--trust-200); padding: 0.5rem 1rem; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 600; } .security-indicator { display: flex; align-items: center; gap: 0.25rem; color: var(--gov-green-60); font-size: 0.875rem; font-weight: 500; } .security-indicator i { color: var(--gov-green-60); } /* Remove Playful Elements */ .whimsy-delight, .celebration-particles, .easter-egg-modal, [id*="whimsy"], [class*="whimsy"], [id*="celebration"], [class*="celebration"] { display: none !important; } /* Professional Loading States */ .loading-spinner { border: 3px solid var(--gov-gray-10); border-top: 3px solid var(--gov-blue-60); } /* Professional Accessibility Enhancements */ .skip-link { position: absolute; top: -40px; left: 6px; background: var(--gov-blue-60); color: white; padding: 8px; border-radius: 0 0 4px 4px; text-decoration: none; font-weight: 600; z-index: 100; } .skip-link:focus { top: 0; } /* High Contrast Mode Support */ @media (prefers-contrast: high) { :root { --primary-600: #0000ff; --text-primary: #000000; --bg-primary: #ffffff; --border-primary: #000000; } [data-theme="dark"] { --primary-600: #ffff00; --text-primary: #ffffff; --bg-primary: #000000; --border-primary: #ffffff; } } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== >>> merged from mobile-enhancements.css ========================================================================== */ /** * Mobile-First Responsive Enhancements * Touch-friendly interactions and improved mobile UX */ /* Enhanced Touch Targets */ @media (max-width: 768px) { /* Minimum 44x44px touch targets */ .btn, .nav-link, .theme-toggle, button, input[type="button"], input[type="submit"] { min-height: 44px; min-width: 44px; } /* Enhanced navigation for mobile */ .nav-container { height: 60px; /* Slightly smaller for mobile */ padding: 0 var(--space-3); } .nav-brand { font-size: var(--font-size-lg); } .nav-brand span { display: none; /* Show icon only on very small screens */ } .nav-menu { gap: var(--space-1); } .nav-link { flex-direction: column; padding: var(--space-2) var(--space-2); border-radius: var(--radius); position: relative; min-width: 48px; height: 48px; justify-content: center; align-items: center; } .nav-link span { position: absolute; bottom: -12px; font-size: 10px; line-height: 1; opacity: 0.8; white-space: nowrap; } .nav-link i { font-size: 1.1em; margin-bottom: 2px; } /* Hero section mobile optimization */ .hero { padding: var(--space-8) var(--space-4) var(--space-6); min-height: 50vh; display: flex; align-items: center; } .hero-title { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: var(--space-4); } .hero-subtitle { font-size: var(--font-size-base); margin-bottom: var(--space-6); } .hero-search { max-width: 100%; } /* Improved mobile search box */ .search-box-hero { padding: var(--space-2); flex-direction: row; align-items: center; gap: var(--space-2); } .search-input-hero { min-height: 44px; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12); font-size: var(--font-size-base); } .search-btn-hero { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex-shrink: 0; border-radius: var(--radius); } /* Form improvements */ .form-grid { grid-template-columns: 1fr; gap: var(--space-4); } .form-group label { font-size: var(--font-size-sm); } .form-group input, .form-group textarea { min-height: 44px; padding: var(--space-3) var(--space-4); font-size: var(--font-size-base); } /* Better mobile modals */ .confirmation-modal-content { width: 95%; max-width: 350px; margin: var(--space-4); } .confirmation-modal-header, .confirmation-modal-body { padding: var(--space-4); } .confirmation-modal-actions { flex-direction: column; gap: var(--space-3); } .confirmation-modal-actions .btn { width: 100%; min-height: 48px; } /* Mobile-optimized file upload */ .file-upload-area { padding: var(--space-6); min-height: 120px; } .upload-text p { font-size: var(--font-size-base); } /* Item cards mobile layout */ .item-card { grid-template-columns: 80px 1fr; gap: var(--space-3); padding: var(--space-4); } .item-image { width: 80px; height: 80px; } .item-actions { grid-column: 1 / -1; flex-direction: row; gap: var(--space-2); margin-top: var(--space-3); justify-content: center; flex-wrap: wrap; } .item-actions .btn { flex: 1; min-width: 120px; min-height: 40px; } /* Toast notifications mobile */ .toast-container { left: var(--space-3); right: var(--space-3); top: 80px; max-width: none; } .toast { padding: var(--space-3); } /* Stats grid mobile */ .stats-grid { grid-template-columns: 1fr; gap: var(--space-4); } .stat-card { padding: var(--space-6); text-align: center; } } /* Very small screens (phones in portrait) */ @media (max-width: 480px) { .nav-brand span { display: none; } .nav-container { padding: 0 var(--space-2); } .nav-link { min-width: 40px; height: 40px; padding: var(--space-1); } .nav-link span { font-size: 9px; bottom: -10px; } .hero { padding: var(--space-6) var(--space-3) var(--space-4); text-align: center; } .hero-title { font-size: 1.75rem; line-height: 1.3; } .container { padding: 0 var(--space-3); } .section-header h2 { font-size: var(--font-size-xl); flex-direction: column; gap: var(--space-1); } /* Form adjustments for very small screens */ .form-container { padding: var(--space-4); } .form-actions { flex-direction: column; gap: var(--space-3); } .form-actions .btn { width: 100%; justify-content: center; } /* Search controls mobile */ .search-controls { padding: var(--space-4); } .filter-controls { flex-direction: column; gap: var(--space-3); align-items: stretch; } .filter-select, .filter-controls .btn { width: 100%; min-height: 44px; text-align: center; } /* Map controls mobile */ .map-controls { flex-direction: column; gap: var(--space-3); } .date-filter-group { flex-direction: column; gap: var(--space-3); width: 100%; } .date-input-group { width: 100%; justify-content: space-between; } .date-input { flex: 1; margin-left: var(--space-2); } .main-map { height: 350px; } } /* Landscape orientation adjustments */ @media (max-width: 768px) and (orientation: landscape) { .hero { min-height: 40vh; padding: var(--space-6) var(--space-4); } .main-map { height: 300px; } } /* Touch-specific enhancements */ @media (pointer: coarse) { /* Larger touch targets for touch devices */ .btn { min-height: 48px; padding: var(--space-3) var(--space-6); } .nav-link { min-height: 48px; min-width: 48px; } /* Better hover states for touch */ .btn:hover, .nav-link:hover { transform: none; /* Remove hover animations on touch devices */ } /* Focus states more prominent on touch */ .form-group input:focus, .form-group textarea:focus { border-width: 3px; outline: 3px solid var(--primary-200); outline-offset: 2px; } /* Larger close buttons */ .confirmation-modal-close, .toast-close { min-width: 44px; min-height: 44px; } } /* High contrast mode support */ @media (prefers-contrast: high) { :root { --text-muted: var(--text-secondary); } .status-badge { border-width: 2px; } .btn { border: 2px solid currentColor; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero::before { animation: none; } .detective-glass { animation: none; } } /* Focus visible enhancements */ .btn:focus-visible, .nav-link:focus-visible, .theme-toggle:focus-visible { outline: 3px solid var(--primary-600); outline-offset: 2px; border-radius: var(--radius); } /* Skip link for keyboard navigation */ .skip-link { position: absolute; top: -40px; left: 6px; background: var(--primary-600); color: white; padding: 8px; text-decoration: none; border-radius: var(--radius); z-index: 1000; transition: top 0.3s; } .skip-link:focus { top: 6px; } /* Print optimizations for mobile */ @media print { .nav-container { height: auto; padding: var(--space-2) 0; } .hero { display: none; } .item-card { break-inside: avoid; margin-bottom: var(--space-4); grid-template-columns: 60px 1fr; gap: var(--space-2); padding: var(--space-3); } .item-image { width: 60px; height: 60px; } } /* Dark mode mobile adjustments */ @media (max-width: 768px) { [data-theme="dark"] .search-box-hero { background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(10px); } [data-theme="dark"] .upload-status { background: rgba(15, 23, 42, 0.98); } } /* Sticky navigation enhancement for mobile */ @media (max-width: 768px) { .navbar { position: fixed; bottom: 0; top: auto; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); border-top: 1px solid var(--border-primary); border-bottom: none; padding: var(--space-2) 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .navbar { background: rgba(15, 23, 42, 0.98); border-top: 1px solid var(--border-primary); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); } .main-content { margin-top: 0; margin-bottom: 80px; /* Space for bottom navigation */ } .nav-container { height: 70px; max-width: 100%; justify-content: space-around; padding: 0 var(--space-2); } .nav-brand { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); background: var(--primary-600); color: white; padding: var(--space-2) var(--space-4); border-radius: var(--radius-xl); font-size: var(--font-size-sm); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: all var(--transition-normal); } .nav-brand.show { opacity: 1; top: -40px; } } /* ========================================================================== >>> merged from enhanced-loading.css ========================================================================== */ /* Enhanced Loading States & Micro-interactions */ /* Contextual Loading Animations */ .search-loading { display: flex; flex-direction: column; align-items: center; padding: var(--space-12) var(--space-6); gap: var(--space-6); } .detective-scanner { position: relative; width: 120px; height: 120px; border: 3px solid var(--primary-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .detective-scanner::before { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border: 3px solid transparent; border-top-color: var(--primary-600); border-radius: 50%; animation: detective-scan 2s linear infinite; } .detective-scanner i { font-size: 2.5rem; color: var(--primary-600); animation: detective-pulse 1.5s ease-in-out infinite; } @keyframes detective-scan { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes detective-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } /* Progressive Loading for Images */ .image-skeleton { background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: var(--radius); } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Success Celebration */ .success-celebration { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 9999; } .celebration-particle { position: absolute; width: 10px; height: 10px; background: var(--success-600); border-radius: 50%; animation: celebrate-fall 3s ease-in-out forwards; } @keyframes celebrate-fall { 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } /* Enhanced Button States */ .btn-enhanced { position: relative; overflow: hidden; transform-style: preserve-3d; transition: all var(--transition-normal); } .btn-enhanced::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .btn-enhanced:hover::before { left: 100%; } .btn-enhanced:active { transform: translateY(1px) scale(0.98); } /* Status Indicators with Animation */ .status-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-xl); font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; position: relative; } .status-stolen { background: var(--error-50); color: var(--error-800); border: 1px solid var(--error-200); } .status-recovered { background: var(--success-50); color: var(--success-800); border: 1px solid var(--success-200); } .status-recovered::before { content: ''; position: absolute; left: var(--space-2); width: 6px; height: 6px; background: var(--success-600); border-radius: 50%; } @keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } /* Enhanced Form Focus States */ .form-input-enhanced { position: relative; border: 2px solid var(--border-primary); transition: all var(--transition-normal); background: var(--bg-primary); } .form-input-enhanced:focus { border-color: var(--primary-600); box-shadow: 0 0 0 3px var(--primary-50), 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-1px); } /* Contextual Empty States */ .empty-state { text-align: center; padding: var(--space-16) var(--space-6); color: var(--text-muted); } .empty-state-icon { width: 120px; height: 120px; margin: 0 auto var(--space-6); background: var(--gray-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--gray-400); position: relative; } .empty-state-icon::before { content: ''; position: absolute; inset: -4px; border: 2px dashed var(--gray-300); border-radius: 50%; animation: rotate-border 8s linear infinite; } @keyframes rotate-border { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ========================================================================== >>> merged from trust-indicators.css ========================================================================== */ /* Trust & Engagement Enhancement Components */ /* Security Badges & Trust Indicators */ .security-certification { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: rgba(255, 255, 255, 0.95); border-radius: var(--radius-lg); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); margin: var(--space-6) 0; box-shadow: var(--shadow-md); } .security-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--trust-600), var(--trust-700)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; position: relative; animation: trust-pulse 3s ease-in-out infinite; } @keyframes trust-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); } } .security-text { flex: 1; } .security-title { font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-1); font-size: var(--font-size-base); } .security-subtitle { font-size: var(--font-size-sm); color: var(--text-muted); margin: 0; } /* Enhanced Item Cards with Trust Signals */ .item-card-enhanced { background: var(--bg-primary); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-lg); border: 1px solid var(--border-primary); transition: all var(--transition-normal); position: relative; overflow: hidden; } .item-card-enhanced::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-600), var(--primary-700)); transform: scaleX(0); transition: transform var(--transition-normal); transform-origin: left; } .item-card-enhanced:hover::before { transform: scaleX(1); } .item-card-enhanced:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .item-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-4); } .item-image-container { width: 80px; height: 80px; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-100); display: flex; align-items: center; justify-content: center; position: relative; } .item-image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); } .item-image-container:hover .item-image { transform: scale(1.05); } .item-status-badge { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; box-shadow: var(--shadow-sm); border: 2px solid var(--bg-primary); } .status-stolen .item-status-badge { background: var(--error-600); color: white; } .status-recovered .item-status-badge { background: var(--success-600); color: white; } /* Verification Levels */ .verification-level { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .verification-stars { display: flex; gap: var(--space-1); } .verification-star { width: 16px; height: 16px; color: var(--gray-300); transition: color var(--transition-fast); } .verification-star.filled { color: #fbbf24; } .verification-label { font-size: var(--font-size-sm); color: var(--text-muted); font-weight: 500; } /* Contact Confidence Indicator */ .contact-confidence { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-xl); font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .confidence-high { background: var(--success-50); color: var(--success-800); border: 1px solid var(--success-200); } .confidence-medium { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; } .confidence-low { background: var(--error-50); color: var(--error-800); border: 1px solid var(--error-200); } /* Time-sensitive Urgency Indicators */ .urgency-indicator { position: absolute; top: var(--space-4); right: var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; animation: urgency-pulse 2s ease-in-out infinite; } .urgency-high { background: var(--error-600); color: white; } .urgency-medium { background: #f59e0b; color: white; } @keyframes urgency-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } /* Social Proof Elements */ .social-proof { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--gray-50); border-radius: var(--radius-lg); margin: var(--space-6) 0; } .proof-stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); } .proof-number { font-size: var(--font-size-xl); font-weight: 800; color: var(--primary-600); } .proof-label { font-size: var(--font-size-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } /* Progress Indicators */ .recovery-progress { width: 100%; height: 8px; background: var(--gray-200); border-radius: var(--radius); overflow: hidden; margin: var(--space-4) 0; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--success-600), var(--success-700)); border-radius: var(--radius); transition: width 1s ease-in-out; position: relative; } .progress-fill::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: progress-shine 2s ease-in-out infinite; } @keyframes progress-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Call-to-Action Enhancement */ .cta-enhanced { background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); color: white; padding: var(--space-6) var(--space-8); border-radius: var(--radius-xl); text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-xl); border: none; cursor: pointer; transition: all var(--transition-normal); } .cta-enhanced::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%); opacity: 0; transition: opacity var(--transition-normal); } .cta-enhanced:hover::before { opacity: 1; } .cta-enhanced:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(234, 88, 12, 0.3); } .cta-text { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--space-2); } .cta-subtitle { opacity: 0.9; font-size: var(--font-size-sm); } /* ========================================================================== >>> merged from professional-trust-system.css ========================================================================== */ /** * Professional Trust & Security System * Government-grade trust indicators and security badges * Based on federal standards and best practices */ /* Security Header Banner */ .security-banner { background: var(--gov-blue-60); color: white; padding: 0.5rem 0; text-align: center; font-size: 0.875rem; font-weight: 500; border-bottom: 1px solid var(--gov-blue-70); } .security-banner i { margin-right: 0.5rem; color: #ffd700; } /* Trust Indicators Container */ .trust-indicators { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 0.25rem; margin-bottom: 2rem; } /* Individual Trust Badges */ .trust-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: white; border: 1px solid var(--gov-gray-30); padding: 0.75rem 1rem; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--gov-gray-70); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); text-decoration: none; transition: all 0.2s ease; } .trust-badge:hover { border-color: var(--gov-blue-60); color: var(--gov-blue-60); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .trust-badge i { font-size: 1.1em; } /* SSL Security Badge */ .ssl-badge { background: var(--gov-green-60); color: white; border-color: var(--gov-green-70); } .ssl-badge:hover { background: var(--gov-green-70); color: white; } .ssl-badge i { color: #ffd700; } /* Government Compliance Badge */ .compliance-badge { background: var(--gov-blue-60); color: white; border-color: var(--gov-blue-70); } .compliance-badge:hover { background: var(--gov-blue-70); color: white; } /* WCAG Accessibility Badge */ .accessibility-badge { background: var(--trust-600); color: white; border-color: var(--trust-700); } .accessibility-badge:hover { background: var(--trust-700); color: white; } /* Privacy Policy Badge */ .privacy-badge { background: var(--gov-gray-70); color: white; border-color: var(--gov-gray-90); } .privacy-badge:hover { background: var(--gov-gray-90); color: white; } /* Data Security Indicators */ .security-indicators { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 2rem 0; } .security-card { background: white; border: 1px solid var(--border-primary); border-radius: 0.5rem; padding: 1.5rem; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .security-card h3 { color: var(--gov-blue-60); font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .security-card p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; margin: 0; } .security-card i { font-size: 1.5rem; color: var(--gov-green-60); } /* Verification Status */ .verification-status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--success-50); border: 1px solid var(--success-200); border-radius: 0.25rem; color: var(--success-700); font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; } .verification-status.pending { background: var(--warning-50); border-color: var(--warning-200); color: var(--warning-700); } .verification-status.error { background: var(--error-50); border-color: var(--error-200); color: var(--error-700); } /* Professional Footer with Trust Elements */ .trust-footer { background: var(--bg-tertiary); border-top: 1px solid var(--border-primary); padding: 2rem 0; margin-top: 4rem; } .trust-footer-content { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .trust-section h4 { color: var(--text-primary); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; } .trust-section ul { list-style: none; padding: 0; margin: 0; } .trust-section li { margin-bottom: 0.5rem; } .trust-section a { color: var(--text-secondary); text-decoration: none; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s ease; } .trust-section a:hover { color: var(--gov-blue-60); } .trust-section i { font-size: 0.75rem; color: var(--gov-blue-60); } /* Professional Form Trust Elements */ .form-trust-indicator { display: flex; align-items: center; gap: 0.5rem; color: var(--gov-green-60); font-size: 0.875rem; font-weight: 500; margin-top: 0.5rem; } .form-trust-indicator i { color: var(--gov-green-60); } /* Data Protection Notice */ .data-protection-notice { background: var(--trust-50); border: 1px solid var(--trust-200); border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; } .data-protection-notice h4 { color: var(--trust-700); font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .data-protection-notice p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; margin: 0; } /* Mobile Responsive Trust Elements */ @media (max-width: 768px) { .trust-indicators { flex-direction: column; gap: 0.5rem; } .trust-badge { justify-content: center; text-align: center; } .security-indicators { grid-template-columns: 1fr; } .trust-footer-content { grid-template-columns: 1fr; gap: 1.5rem; } } /* Dark Mode Adjustments */ [data-theme="dark"] .trust-badge { background: var(--bg-secondary); border-color: var(--border-secondary); color: var(--text-secondary); } [data-theme="dark"] .trust-badge:hover { border-color: var(--gov-blue-20); color: var(--gov-blue-20); } [data-theme="dark"] .security-card { background: var(--bg-secondary); border-color: var(--border-primary); } [data-theme="dark"] .security-card h3 { color: var(--gov-blue-20); } [data-theme="dark"] .trust-footer { background: var(--bg-secondary); border-color: var(--border-primary); } [data-theme="dark"] .data-protection-notice { background: var(--bg-tertiary); border-color: var(--border-secondary); } [data-theme="dark"] .data-protection-notice h4 { color: var(--gov-blue-20); } /* High Contrast Support */ @media (prefers-contrast: high) { .trust-badge { border-width: 2px; font-weight: 700; } .security-card { border-width: 2px; } } /* ========================================================================== >>> merged from emergency-forms.css ========================================================================== */ /** * Emergency-Optimized Form Design * Designed for quick reporting in stressful situations * Following government form design standards */ /* Emergency Form Container */ .emergency-form-wrapper { background: white; border: 2px solid var(--gov-blue-60); border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); padding: 2rem; margin: 2rem 0; } .emergency-form-wrapper .section-header { border-bottom: 2px solid var(--gov-blue-60); padding-bottom: 1rem; margin-bottom: 2rem; } .emergency-form-wrapper .section-header h2 { color: var(--gov-blue-60); font-weight: 700; display: flex; align-items: center; gap: 0.75rem; } .emergency-form-wrapper .section-header p { color: var(--text-secondary); font-size: 1rem; margin-top: 0.5rem; font-weight: 500; } /* Emergency Priority Indicators */ .priority-indicator { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--gov-red-60); color: white; padding: 0.5rem 1rem; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; } .priority-indicator.high { background: var(--gov-red-60); animation: pulse 2s infinite; } .priority-indicator.medium { background: var(--gov-orange-60); } .priority-indicator.low { background: var(--gov-blue-60); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Required Field Enhancement for Emergency Situations */ .form-group.required label::after { content: " *"; color: var(--gov-red-60); font-weight: 700; font-size: 1.1em; } .form-group.critical { border-left: 4px solid var(--gov-red-60); padding-left: 1rem; background: rgba(214, 48, 49, 0.05); border-radius: 0.25rem; margin-bottom: 1.5rem; } .form-group.critical label { color: var(--gov-red-60); font-weight: 600; font-size: 1rem; } /* Large Touch-Friendly Inputs for Emergency Use */ .emergency-input { min-height: 48px; font-size: 1.125rem; padding: 1rem; border: 2px solid var(--gov-gray-30); border-radius: 0.25rem; background: white; transition: all 0.2s ease; font-family: inherit; } .emergency-input:focus { border-color: var(--gov-blue-60); box-shadow: 0 0 0 3px rgba(0, 94, 162, 0.25); outline: none; background: #fafbfc; } .emergency-input.error { border-color: var(--gov-red-60); box-shadow: 0 0 0 3px rgba(214, 48, 49, 0.25); } .emergency-input.success { border-color: var(--gov-green-60); box-shadow: 0 0 0 3px rgba(0, 169, 28, 0.25); } /* Emergency Button Styling */ .emergency-submit { background: var(--gov-red-60); border: 2px solid var(--gov-red-60); color: white; font-size: 1.125rem; font-weight: 700; padding: 1rem 2rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s ease; min-height: 56px; width: 100%; text-transform: uppercase; letter-spacing: 0.5px; } .emergency-submit:hover:not(:disabled) { background: var(--gov-red-70); border-color: var(--gov-red-70); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(214, 48, 49, 0.3); } .emergency-submit:active { transform: translateY(0); } .emergency-submit:disabled { background: var(--gov-gray-30); border-color: var(--gov-gray-30); cursor: not-allowed; transform: none; box-shadow: none; } /* Quick Action Buttons */ .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .quick-action-btn { background: white; border: 2px solid var(--gov-blue-60); color: var(--gov-blue-60); padding: 1rem; border-radius: 0.25rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-height: 80px; justify-content: center; } .quick-action-btn:hover { background: var(--gov-blue-60); color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 94, 162, 0.3); } .quick-action-btn i { font-size: 1.5rem; } .quick-action-btn span { font-size: 0.875rem; font-weight: 600; } /* Emergency Help Text */ .emergency-help { background: var(--gov-gold-20); border: 1px solid var(--gov-orange-60); border-radius: 0.25rem; padding: 1rem; margin-bottom: 1.5rem; } .emergency-help h4 { color: var(--gov-orange-60); font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .emergency-help p { color: var(--text-primary); font-size: 0.875rem; line-height: 1.5; margin: 0; } .emergency-help ul { margin: 0.5rem 0 0 1.5rem; color: var(--text-primary); font-size: 0.875rem; } /* Progress Indicator for Multi-Step Forms */ .form-progress { display: flex; justify-content: space-between; margin-bottom: 2rem; padding: 0 1rem; } .progress-step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex: 1; position: relative; } .progress-step::after { content: ""; position: absolute; top: 20px; left: 50%; width: 100%; height: 2px; background: var(--gov-gray-30); z-index: -1; } .progress-step:last-child::after { display: none; } .progress-step.completed::after { background: var(--gov-green-60); } .progress-step.active::after { background: linear-gradient(to right, var(--gov-green-60) 50%, var(--gov-gray-30) 50%); } .progress-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--gov-gray-30); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; } .progress-step.completed .progress-circle { background: var(--gov-green-60); } .progress-step.active .progress-circle { background: var(--gov-blue-60); box-shadow: 0 0 0 3px rgba(0, 94, 162, 0.25); } .progress-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-align: center; } .progress-step.completed .progress-label, .progress-step.active .progress-label { color: var(--text-primary); } /* Emergency Contact Information */ .emergency-contact { background: var(--gov-red-60); color: white; padding: 1.5rem; border-radius: 0.5rem; margin: 2rem 0; text-align: center; } .emergency-contact h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .emergency-contact p { font-size: 1.125rem; font-weight: 600; margin: 0.5rem 0; } .emergency-contact a { color: #ffd700; text-decoration: none; font-weight: 700; font-size: 1.25rem; } .emergency-contact a:hover { text-decoration: underline; } /* Mobile Emergency Optimizations */ @media (max-width: 768px) { .emergency-form-wrapper { padding: 1rem; margin: 1rem 0; border-radius: 0.25rem; } .quick-actions { grid-template-columns: 1fr; gap: 0.75rem; } .quick-action-btn { min-height: 60px; padding: 0.75rem; } .emergency-submit { font-size: 1rem; padding: 0.875rem 1.5rem; min-height: 48px; } .emergency-input { font-size: 1rem; min-height: 44px; padding: 0.875rem; } .form-progress { padding: 0 0.5rem; margin-bottom: 1.5rem; } .progress-circle { width: 32px; height: 32px; font-size: 0.75rem; } .progress-label { font-size: 0.625rem; } } /* Dark Mode Emergency Forms */ [data-theme="dark"] .emergency-form-wrapper { background: var(--bg-secondary); border-color: var(--gov-blue-20); } [data-theme="dark"] .emergency-input { background: var(--bg-tertiary); border-color: var(--border-secondary); color: var(--text-primary); } [data-theme="dark"] .emergency-input:focus { background: var(--bg-secondary); border-color: var(--gov-blue-20); box-shadow: 0 0 0 3px rgba(115, 179, 231, 0.25); } [data-theme="dark"] .quick-action-btn { background: var(--bg-secondary); border-color: var(--gov-blue-20); color: var(--gov-blue-20); } [data-theme="dark"] .quick-action-btn:hover { background: var(--gov-blue-20); color: var(--bg-primary); } /* Emergency help section - dark mode with black text */ [data-theme="dark"] .emergency-help { background: rgba(255, 237, 213, 0.95); /* Light peachy background */ border-color: var(--gov-orange-40); color: #000000; /* Black text */ } [data-theme="dark"] .emergency-help h4 { color: #000000; /* Black heading */ } [data-theme="dark"] .emergency-help p { color: #000000; /* Black paragraph text */ } [data-theme="dark"] .emergency-help ul { color: #000000; /* Black list text */ } [data-theme="dark"] .emergency-help li { color: #000000; /* Black list items */ } /* High Contrast Emergency Mode */ @media (prefers-contrast: high) { .emergency-form-wrapper { border-width: 3px; } .emergency-input { border-width: 3px; font-weight: 600; } .emergency-submit { border-width: 3px; font-weight: 800; } .quick-action-btn { border-width: 3px; font-weight: 700; } } /* ========================================================================== >>> merged from professional-analytics.css ========================================================================== */ /** * Professional Analytics & Data Visualization * Government-grade statistics and reporting dashboard * Based on federal data visualization standards */ /* Analytics Dashboard Container */ .analytics-dashboard { background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 2rem; margin-bottom: 2rem; } .analytics-dashboard .section-header { border-bottom: 2px solid var(--gov-blue-60); padding-bottom: 1rem; margin-bottom: 2rem; } .analytics-dashboard .section-header h2 { color: var(--gov-blue-60); font-weight: 700; } /* Professional Statistics Grid */ .professional-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } .professional-stat-card { background: white; border: 1px solid var(--border-primary); border-radius: 0.5rem; padding: 2rem; text-align: center; position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .professional-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .professional-stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 0.5rem 0.5rem 0 0; } .professional-stat-card.stat-total::before { background: var(--gov-blue-60); } .professional-stat-card.stat-recovered::before { background: var(--gov-green-60); } .professional-stat-card.stat-pending::before { background: var(--gov-orange-60); } .professional-stat-card.stat-rate::before { background: var(--trust-600); } .stat-icon-professional { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; color: white; } .stat-total .stat-icon-professional { background: var(--gov-blue-60); } .stat-recovered .stat-icon-professional { background: var(--gov-green-60); } .stat-pending .stat-icon-professional { background: var(--gov-orange-60); } .stat-rate .stat-icon-professional { background: var(--trust-600); } .stat-number-professional { font-size: 2.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; display: block; } .stat-label-professional { font-size: 1rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; } .stat-description { font-size: 0.875rem; color: var(--text-muted); line-height: 1.4; } .stat-trend { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.875rem; font-weight: 600; } .stat-trend.positive { color: var(--gov-green-60); } .stat-trend.negative { color: var(--gov-red-60); } .stat-trend.neutral { color: var(--gov-gray-50); } /* Recovery Rate Visualization */ .recovery-rate-chart { background: white; border: 1px solid var(--border-primary); border-radius: 0.5rem; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .recovery-rate-chart h3 { color: var(--gov-blue-60); font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; } .rate-display { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; } .rate-circle { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient( var(--gov-green-60) 0deg, var(--gov-green-60) var(--recovery-angle, 0deg), var(--gov-gray-10) var(--recovery-angle, 0deg), var(--gov-gray-10) 360deg ); display: flex; align-items: center; justify-content: center; position: relative; } .rate-circle::before { content: ""; width: 80px; height: 80px; background: white; border-radius: 50%; position: absolute; } .rate-percentage { font-size: 1.5rem; font-weight: 700; color: var(--gov-green-60); z-index: 1; } /* Time-based Analytics */ .time-analytics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .time-period-card { background: white; border: 1px solid var(--border-primary); border-radius: 0.25rem; padding: 1.5rem; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .time-period-card h4 { color: var(--text-primary); font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; } .time-period-number { font-size: 1.75rem; font-weight: 700; color: var(--gov-blue-60); margin-bottom: 0.25rem; } .time-period-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; } /* Professional Data Table */ .professional-data-table { background: white; border: 1px solid var(--border-primary); border-radius: 0.5rem; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .professional-data-table table { width: 100%; border-collapse: collapse; } .professional-data-table th { background: var(--gov-blue-60); color: white; padding: 1rem; font-weight: 600; text-align: left; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; } .professional-data-table td { padding: 1rem; border-bottom: 1px solid var(--border-primary); color: var(--text-primary); font-size: 0.875rem; } .professional-data-table tr:last-child td { border-bottom: none; } .professional-data-table tr:nth-child(even) { background: var(--bg-secondary); } .professional-data-table tr:hover { background: rgba(0, 94, 162, 0.05); } /* Performance Metrics */ .performance-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .performance-card { background: white; border: 1px solid var(--border-primary); border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .performance-card h4 { color: var(--gov-blue-60); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .performance-metric { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .performance-metric:last-child { margin-bottom: 0; } .metric-label { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; } .metric-value { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .metric-value.positive { color: var(--gov-green-60); } .metric-value.negative { color: var(--gov-red-60); } /* Export and Report Actions */ .report-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-primary); } .export-btn { background: white; border: 2px solid var(--gov-blue-60); color: var(--gov-blue-60); padding: 0.75rem 1.5rem; border-radius: 0.25rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; } .export-btn:hover { background: var(--gov-blue-60); color: white; } .export-btn i { font-size: 1rem; } /* Mobile Responsive Analytics */ @media (max-width: 768px) { .professional-stats-grid { grid-template-columns: 1fr; gap: 1rem; } .professional-stat-card { padding: 1.5rem; } .stat-number-professional { font-size: 2rem; } .time-analytics { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .time-period-card { padding: 1rem; } .time-period-number { font-size: 1.5rem; } .performance-metrics { grid-template-columns: 1fr; } .rate-circle { width: 100px; height: 100px; } .rate-circle::before { width: 70px; height: 70px; } .rate-percentage { font-size: 1.25rem; } .report-actions { flex-direction: column; } .export-btn { justify-content: center; width: 100%; } .professional-data-table { overflow-x: auto; } .professional-data-table th, .professional-data-table td { padding: 0.75rem 0.5rem; font-size: 0.75rem; } } /* Dark Mode Analytics */ [data-theme="dark"] .analytics-dashboard, [data-theme="dark"] .professional-stat-card, [data-theme="dark"] .recovery-rate-chart, [data-theme="dark"] .time-period-card, [data-theme="dark"] .professional-data-table, [data-theme="dark"] .performance-card { background: var(--bg-secondary); border-color: var(--border-primary); } [data-theme="dark"] .professional-data-table th { background: var(--gov-blue-20); color: var(--bg-primary); } [data-theme="dark"] .professional-data-table tr:nth-child(even) { background: var(--bg-tertiary); } [data-theme="dark"] .professional-data-table tr:hover { background: rgba(115, 179, 231, 0.1); } [data-theme="dark"] .export-btn { background: var(--bg-secondary); border-color: var(--gov-blue-20); color: var(--gov-blue-20); } [data-theme="dark"] .export-btn:hover { background: var(--gov-blue-20); color: var(--bg-primary); } [data-theme="dark"] .rate-circle::before { background: var(--bg-secondary); } /* High Contrast Analytics */ @media (prefers-contrast: high) { .professional-stat-card, .recovery-rate-chart, .time-period-card, .professional-data-table, .performance-card { border-width: 2px; } .professional-stat-card::before { height: 6px; } .export-btn { border-width: 3px; font-weight: 700; } } /* ========================================================================== >>> merged from components/ImageComponent.css ========================================================================== */ /* ======================================== Enhanced Image Component Styles Modern card design with glassmorphism and micro-interactions ======================================== */ /* Image Container with Modern Card Design */ .image-container { position: relative; display: inline-block; overflow: hidden; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: var(--shadow-sm); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Add subtle glow effect */ .image-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); opacity: 0; transition: opacity 0.6s ease; z-index: 1; pointer-events: none; } /* Floating effect on hover */ .image-container:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 20px rgba(234, 88, 12, 0.15); } .image-container:hover::before { opacity: 1; } .image-container:active { transform: translateY(-2px) scale(1.01); transition: transform 0.1s ease; } /* Aspect Ratio Containers with Enhanced Sizing */ .image-container[data-aspect-ratio="1:1"] { aspect-ratio: 1 / 1; width: 140px; height: 140px; min-width: 120px; min-height: 120px; } .image-container[data-aspect-ratio="16:9"] { aspect-ratio: 16 / 9; min-width: 280px; border-radius: var(--radius-xl); } .image-container[data-aspect-ratio="4:3"] { aspect-ratio: 4 / 3; min-width: 240px; border-radius: var(--radius-lg); } /* Size variants */ .image-container.size-sm { transform: scale(0.8); } .image-container.size-lg { transform: scale(1.2); } .image-container.size-xl { transform: scale(1.5); } /* Enhanced Lazy Image with Modern Effects */ .lazy-image { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease; will-change: opacity, transform, filter; /* Subtle initial blur for better loading experience */ filter: blur(0px) brightness(1) contrast(1); } .lazy-image.loaded { opacity: 1 !important; filter: blur(0px) brightness(1.05) contrast(1.02); } .lazy-image.loading { filter: blur(2px) brightness(0.95); } /* Image enhancement on hover */ .image-container:hover .lazy-image { transform: scale(1.08); filter: blur(0px) brightness(1.1) contrast(1.05) saturate(1.1); } /* Image Placeholder */ .image-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)); background-size: cover; background-position: center; transition: opacity 0.3s ease; z-index: 1; } /* Modern Loading Skeleton with Glassmorphism */ .image-skeleton { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%), var(--bg-secondary); display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2; border-radius: inherit; color: var(--text-secondary); font-size: var(--font-size-sm); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; } /* Enhanced Shimmer Animation */ .skeleton-shimmer { position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: linear-gradient( 105deg, transparent 35%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.2) 55%, transparent 65% ); animation: shimmer 2s infinite ease-in-out; transform: skewX(-15deg); } .skeleton-content { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-2); z-index: 1; } .skeleton-content i { font-size: var(--font-size-xl); opacity: 0.3; } @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Modern Hover Overlay with Glassmorphism */ .image-hover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-2); color: white; font-size: var(--font-size-lg); opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 3; border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.1); } /* Add scale effect on icon */ .image-hover-overlay i { transition: transform 0.3s var(--bounce); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } /* Optional text hint */ .image-hover-overlay .overlay-text { font-size: var(--font-size-sm); font-weight: 500; opacity: 0.9; text-align: center; margin-top: var(--space-1); transform: translateY(10px); transition: all 0.3s ease; } /* Enhanced Hover States */ .image-container:hover .image-hover-overlay { opacity: 1; visibility: visible; } .image-container:hover .image-hover-overlay i { transform: scale(1.2) rotate(5deg); } .image-container:hover .image-hover-overlay .overlay-text { transform: translateY(0); opacity: 1; } /* Add status badges for items */ .status-badge { position: absolute; top: var(--space-2); right: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; z-index: 4; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: var(--shadow-sm); transition: all 0.3s ease; } .status-badge.stolen { background: linear-gradient(135deg, rgba(220, 38, 38, 0.9), rgba(185, 28, 28, 0.9)); color: white; } .status-badge.recovered { background: linear-gradient(135deg, rgba(22, 163, 74, 0.9), rgba(21, 128, 61, 0.9)); color: white; } .status-badge.pending { background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(245, 158, 11, 0.9)); color: var(--gray-900); } /* Quick action buttons */ .quick-actions { position: absolute; bottom: var(--space-2); left: var(--space-2); right: var(--space-2); display: flex; gap: var(--space-1); opacity: 0; transform: translateY(10px); transition: all 0.3s ease; z-index: 4; } .image-container:hover .quick-actions { opacity: 1; transform: translateY(0); } .quick-action-btn { flex: 1; padding: var(--space-1) var(--space-2); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius); color: var(--gray-700); font-size: var(--font-size-xs); font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-align: center; } .quick-action-btn:hover { background: var(--primary-600); color: white; transform: translateY(-1px); box-shadow: var(--shadow-md); } .quick-action-btn:active { transform: translateY(0); } .quick-action-btn i { margin-right: var(--space-1); } /* Loading States */ .image-container.loading .image-skeleton { display: flex; } .image-container.loaded .image-skeleton { display: none; } .image-container.load-complete .image-placeholder { opacity: 0; } /* Load success micro-interaction */ .image-container.load-success { animation: loadSuccess 0.6s ease-out; } @keyframes loadSuccess { 0% { transform: scale(1); } 50% { transform: scale(1.03); box-shadow: var(--shadow-md), 0 0 15px rgba(234, 88, 12, 0.2); } 100% { transform: scale(1); } } /* Error State */ .image-container.error .image-skeleton { background: var(--error-50); color: var(--error-600); display: flex; } .error-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .error-content i { color: var(--error-500); font-size: var(--font-size-lg); } .retry-btn { background: var(--primary-600); color: white; border: none; padding: var(--space-1) var(--space-2); border-radius: var(--radius); font-size: var(--font-size-xs); cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: center; gap: var(--space-1); } .retry-btn:hover { background: var(--primary-700); } /* Ultra-Modern Image Modal with Advanced Effects */ .image-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.95) 100%); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Add animated background pattern */ .image-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 20%, rgba(234, 88, 12, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 70%, rgba(16, 163, 74, 0.1) 0%, transparent 50%); animation: backgroundShift 8s ease-in-out infinite; pointer-events: none; } @keyframes backgroundShift { 0%, 100% { transform: scale(1) rotate(0deg); } 33% { transform: scale(1.1) rotate(1deg); } 66% { transform: scale(0.95) rotate(-1deg); } } .image-modal.active { opacity: 1; visibility: visible; } .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } /* Premium Modal Container with Glassmorphism */ .modal-container { position: relative; width: 95vw; height: 95vh; max-width: 1400px; max-height: 1000px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%), var(--bg-primary); backdrop-filter: blur(25px) saturate(1.2); -webkit-backdrop-filter: blur(25px) saturate(1.2); border-radius: var(--radius-xl); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6), 0 25px 50px -12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.8) translateY(20px); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Add subtle glow effect */ .modal-container::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, rgba(234, 88, 12, 0.3) 0%, rgba(124, 58, 237, 0.3) 25%, rgba(16, 163, 74, 0.3) 50%, rgba(234, 88, 12, 0.3) 75%, rgba(124, 58, 237, 0.3) 100%); border-radius: var(--radius-xl); z-index: -1; opacity: 0; transition: opacity 0.3s ease; filter: blur(8px); } .image-modal.active .modal-container { transform: scale(1) translateY(0); } .image-modal.active .modal-container::after { opacity: 0.5; } /* Enhanced Modal Header with Glassmorphism */ .modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6) var(--space-6) var(--space-4); background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%), linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; } /* Add gradient accent */ .modal-header::after { content: ''; position: absolute; bottom: 0; left: var(--space-6); right: var(--space-6); height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(234, 88, 12, 0.3) 25%, rgba(124, 58, 237, 0.3) 75%, transparent 100%); } .image-info h3 { margin: 0; color: var(--text-primary); font-size: var(--font-size-lg); font-weight: 600; } .image-serial { color: var(--text-secondary); font-size: var(--font-size-sm); font-family: var(--font-mono); background: var(--bg-tertiary); padding: var(--space-1) var(--space-2); border-radius: var(--radius); margin-top: var(--space-1); display: inline-block; } .modal-controls { display: flex; align-items: center; gap: var(--space-2); } /* Premium Control Buttons with Advanced Effects */ .control-btn { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-primary); border-radius: var(--radius-md); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } /* Add shimmer effect */ .control-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); transition: left 0.5s ease; } /* Icon styling */ .control-btn i { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } .control-btn:hover { background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); color: white; transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 25px rgba(234, 88, 12, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-color: var(--primary-500); } .control-btn:hover::before { left: 100%; } .control-btn:hover i { transform: scale(1.1); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .control-btn:active { transform: translateY(0); } .control-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Enhanced Zoom Display with Modern Styling */ .zoom-display { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%); backdrop-filter: blur(15px) saturate(1.2); -webkit-backdrop-filter: blur(15px) saturate(1.2); color: var(--text-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg); font-weight: 700; font-size: var(--font-size-sm); min-width: 70px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1); font-family: 'Inter', monospace; letter-spacing: 0.5px; position: relative; } /* Add subtle pulse animation */ .zoom-display::after { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; background: linear-gradient(45deg, var(--primary-500) 0%, var(--trust-600) 100%); border-radius: var(--radius-lg); z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .zoom-display.highlight::after { opacity: 0.3; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } .close-modal { background: var(--error-600) !important; color: white !important; } .close-modal:hover { background: var(--error-700) !important; transform: scale(1.1); } /* Enhanced Modal Image Content Area */ .modal-image-content { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); } /* Add subtle texture pattern */ .modal-image-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.02) 1px, transparent 1px), radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.02) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; opacity: 0.5; } /* Premium Modal Image with Advanced Interactions */ .modal-image { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease, box-shadow 0.3s ease; will-change: transform, filter; border-radius: var(--radius); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.05); /* Add subtle enhancement */ filter: contrast(1.02) brightness(1.01) saturate(1.02); } /* Smooth loading transition */ .modal-image.loading { filter: blur(1px) brightness(0.95); transform: scale(0.98); } .modal-image.loaded { filter: contrast(1.02) brightness(1.01) saturate(1.02); transform: scale(1); } .modal-image[style*="scale"] { cursor: grab; } .modal-image[style*="scale"]:active { cursor: grabbing; } /* Loading Indicator */ .loading-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); color: var(--text-secondary); opacity: 0; visibility: hidden; transition: all 0.3s ease; } .loading-indicator.active { opacity: 1; visibility: visible; } .spinner { width: 48px; height: 48px; border: 4px solid var(--border-primary); border-top: 4px solid var(--primary-600); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Error State */ .error-state { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); color: var(--error-600); text-align: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .error-state.active { opacity: 1; visibility: visible; } .error-state i { font-size: 3rem; opacity: 0.7; } .error-state p { margin: 0; font-size: var(--font-size-lg); color: var(--text-secondary); } .error-state .retry-btn { background: var(--primary-600); color: white; border: none; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--font-size-base); cursor: pointer; transition: all 0.2s ease; } .error-state .retry-btn:hover { background: var(--primary-700); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } /* Enhanced Modal Hint with Modern Styling */ .modal-hint { padding: var(--space-4) var(--space-6); background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%), var(--bg-tertiary); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; position: relative; } /* Add gradient accent */ .modal-hint::before { content: ''; position: absolute; top: 0; left: var(--space-6); right: var(--space-6); height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(234, 88, 12, 0.3) 25%, rgba(124, 58, 237, 0.3) 75%, transparent 100%); } .modal-hint p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); display: flex; align-items: center; justify-content: center; gap: var(--space-4); } .modal-hint i { color: var(--primary-600); } /* Enhanced Responsive Design */ @media (max-width: 768px) { .image-container[data-aspect-ratio="1:1"] { width: 100px; height: 100px; min-width: 80px; min-height: 80px; } .modal-container { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; transform: scale(0.95) translateY(20px); } .modal-container::after { border-radius: 0; } .image-modal.active .modal-container { transform: scale(1) translateY(0); } .modal-header { padding: var(--space-4) var(--space-4) var(--space-3); flex-wrap: wrap; gap: var(--space-3); } .modal-header::after { left: var(--space-4); right: var(--space-4); } .modal-controls { gap: var(--space-2); order: 1; width: 100%; justify-content: center; } .control-btn { width: 40px; height: 40px; min-width: 40px; } .zoom-display { min-width: 60px; padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); } .modal-hint { padding: var(--space-3) var(--space-4); } .modal-hint::before { left: var(--space-4); right: var(--space-4); } .modal-hint p { flex-direction: column; gap: var(--space-2); font-size: var(--font-size-xs); } /* Mobile-optimized status badges */ .status-badge { top: var(--space-1); right: var(--space-1); padding: 2px var(--space-1); font-size: 10px; } /* Larger touch targets for mobile */ .quick-action-btn { padding: var(--space-2); font-size: var(--font-size-xs); min-height: 44px; } } /* Dark Mode Adjustments */ [data-theme="dark"] .image-container { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); } [data-theme="dark"] .image-skeleton { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.05) 100%), var(--bg-tertiary); color: var(--text-secondary); } [data-theme="dark"] .skeleton-shimmer { background: linear-gradient( 105deg, transparent 35%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 55%, transparent 65% ); } [data-theme="dark"] .image-modal { background: radial-gradient(circle at center, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%); } [data-theme="dark"] .modal-container { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%), var(--bg-primary); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8), 0 25px 50px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); } [data-theme="dark"] .zoom-display { background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%); color: var(--text-primary); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .control-btn { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .control-btn:hover { background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); } /* Performance Optimizations */ @media (prefers-reduced-motion: reduce) { .image-container, .lazy-image, .image-modal, .modal-container, .control-btn, .spinner { animation: none !important; transition: none !important; } .skeleton-shimmer { display: none; } .image-modal::before { animation: none !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { .image-container { border: 2px solid var(--text-primary); } .control-btn { border: 2px solid var(--text-primary); background: var(--bg-primary); } .zoom-display { border: 2px solid var(--text-primary); background: var(--bg-primary); } } /* Focus indicators for accessibility */ .control-btn:focus-visible, .retry-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; } .image-container:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; } /* Touch-specific optimizations */ @media (pointer: coarse) { .image-container:hover .image-hover-overlay { opacity: 0; /* Hide hover effects on touch devices */ visibility: hidden; } .control-btn { min-width: 44px; min-height: 44px; } .modal-image { touch-action: none; /* We handle touch events manually */ } /* Add touch feedback */ .image-container:active { transform: scale(0.98); } .quick-action-btn:active { transform: scale(0.95); } .control-btn:active { transform: scale(0.95); } } /* Add global modal open class to prevent body scroll */ body.modal-open { overflow: hidden; } /* Loading success animation for enhanced feedback */ @media (prefers-reduced-motion: no-preference) { .image-container.load-success::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; background: var(--success-600); border-radius: 50%; transform: translate(-50%, -50%) scale(0); animation: successPulse 0.5s ease-out; pointer-events: none; z-index: 5; } } @keyframes successPulse { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } /* Utility classes for dynamic styling */ .image-container.pulse { animation: pulse 1s ease-in-out; } .image-container.shake { animation: shake 0.5s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } } /* Zoom level indicators for modal */ .zoom-level-indicator { position: absolute; top: var(--space-4); left: var(--space-4); background: rgba(0, 0, 0, 0.7); color: white; padding: var(--space-1) var(--space-2); border-radius: var(--radius); font-size: var(--font-size-xs); font-weight: 500; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 10; } .zoom-level-indicator.show { opacity: 1; } /* Enhanced focus styles for better accessibility */ .image-container:focus-visible { outline: 3px solid var(--primary-600); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(234, 88, 12, 0.2), var(--shadow-lg); } .quick-action-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 1px; } /* High performance GPU acceleration hints */ .image-container, .modal-container, .lazy-image, .image-hover-overlay, .skeleton-shimmer { transform: translateZ(0); will-change: transform; }