/* Performance & SEO Optimizations for fantaspic.ai */ /* === LAZY LOADING OPTIMIZATIONS === */ /* Intersection Observer for lazy loading */ .lazy-image { opacity: 0; transition: opacity 0.3s ease-in-out; } .lazy-image.loaded { opacity: 1; } /* Placeholder while loading */ .lazy-placeholder { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 8px; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* === RESPONSIVE IMAGES === */ /* Responsive image containers */ .responsive-image-container { position: relative; overflow: hidden; border-radius: var(--radius, 8px); } .responsive-image { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.3s ease; } /* Image hover effects for better UX */ .responsive-image:hover { transform: scale(1.02); } /* === PERFORMANCE HINTS === */ /* Critical resource hints - add to */ .preload-fonts { /* These will be added via template */ } /* === WEBP SUPPORT === */ /* Fallback styles for older browsers */ .no-webp .webp-image { display: none; } .webp .fallback-image { display: none; } /* === CORE WEB VITALS OPTIMIZATIONS === */ /* Reduce layout shift */ .aspect-ratio-16-9 { aspect-ratio: 16 / 9; } .aspect-ratio-4-3 { aspect-ratio: 4 / 3; } .aspect-ratio-1-1 { aspect-ratio: 1 / 1; } /* Optimize paint and composite */ .gpu-accelerated { transform: translateZ(0); will-change: transform; } /* === IMAGE GALLERY OPTIMIZATIONS === */ .image-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; padding: 1rem 0; } .image-card { position: relative; border-radius: var(--radius, 8px); overflow: hidden; background: var(--bg-subtle, #f8f9fa); transition: all 0.3s ease; } .image-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } /* Loading state for image cards */ .image-card.loading { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; min-height: 200px; } /* === PERFORMANCE MONITORING === */ /* Critical CSS - inline this in head */ .above-fold { /* Styles for above-the-fold content */ } /* Non-critical CSS - load after first paint */ .below-fold { /* Deferred styles */ } /* === ACCESSIBILITY & SEO === */ /* Screen reader optimizations */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Focus management for keyboard navigation */ .focus-visible { outline: 2px solid var(--accent, #0066cc); outline-offset: 2px; } /* === PRINT OPTIMIZATIONS === */ @media print { .no-print { display: none !important; } .responsive-image { max-width: 100% !important; page-break-inside: avoid; } } /* === BREADCRUMBS === */ .breadcrumbs { margin: 1rem 0; font-size: 0.9rem; } .breadcrumb-list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .breadcrumb-item { display: flex; align-items: center; } .breadcrumb-item:not(:last-child)::after { content: '›'; margin: 0 0.5rem; color: var(--text-dim, #666); font-weight: bold; } .breadcrumb-item a { color: var(--link-color, #0066cc); text-decoration: none; transition: color 0.2s ease; } .breadcrumb-item a:hover { color: var(--link-hover, #004499); text-decoration: underline; } .breadcrumb-current span { color: var(--text, #333); font-weight: 500; } /* === MOBILE OPTIMIZATIONS === */ @media (max-width: 768px) { .image-gallery { grid-template-columns: 1fr; gap: 0.5rem; } .responsive-image-container { margin-bottom: 1rem; } .breadcrumbs { font-size: 0.8rem; margin: 0.5rem 0; } .breadcrumb-item:not(:last-child)::after { margin: 0 0.3rem; } } /* === PROGRESSIVE ENHANCEMENT === */ /* Enhance experience when JS is available */ .js .enhanced-feature { display: block; } .no-js .enhanced-feature { display: none; } /* === CRITICAL PERFORMANCE TWEAKS === */ /* Reduce paint complexity */ * { box-sizing: border-box; } /* Optimize animations */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* GPU acceleration for smooth scrolling */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }