/*
* #102-107 - Performance Optimizations
* Critical CSS, lazy loading, and resource optimization
*/
/* ===== #102 - Critical CSS Inlining ===== */
/* Critical above-the-fold styles should be inlined in */
/* Non-critical styles loaded asynchronously */
/* Critical styles helper */
.critical-css {
/* These styles are already in styles.css */
/* This is just a marker for build tools */
}
/* ===== #103 - Lazy Loading Styles ===== */
/* Lazy loaded images */
img[loading="lazy"] {
opacity: 0;
transition: opacity 0.3s ease-in;
}
img[loading="lazy"].loaded {
opacity: 1;
}
/* Placeholder for lazy images */
.lazy-placeholder {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.05) 100%
);
background-size: 200% 100%;
animation: lazy-shimmer 2s infinite linear;
}
@keyframes lazy-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Lazy loaded iframes */
iframe[loading="lazy"] {
opacity: 0;
transition: opacity 0.3s ease-in;
}
iframe[loading="lazy"].loaded {
opacity: 1;
}
/* ===== #104 - Resource Hints ===== */
/* Preconnect to important third-party origins */
/* */
/* */
/* Prefetch for likely next pages */
.prefetch-link {
/* Marker for prefetch links */
}
/* Preload critical resources */
/* */
/* ===== #105 - Font Optimization ===== */
/* Font display strategy */
@font-face {
font-display: swap; /* Show fallback font immediately */
}
/* System font fallback */
.system-font {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue',
sans-serif;
}
/* Variable fonts for reduced file size */
.variable-font {
font-variation-settings: 'wght' 400;
transition: font-variation-settings 0.3s ease;
}
.variable-font:hover {
font-variation-settings: 'wght' 600;
}
/* ===== #106 - Image Optimization ===== */
/* Responsive images */
.responsive-image {
max-width: 100%;
height: auto;
display: block;
}
/* Aspect ratio boxes */
.aspect-ratio-box {
position: relative;
height: 0;
overflow: hidden;
}
.aspect-ratio-box.aspect-16-9 {
padding-top: 56.25%; /* 16:9 */
}
.aspect-ratio-box.aspect-4-3 {
padding-top: 75%; /* 4:3 */
}
.aspect-ratio-box.aspect-1-1 {
padding-top: 100%; /* 1:1 */
}
.aspect-ratio-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Object-fit utilities */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
/* ===== #107 - Performance Utilities ===== */
/* GPU acceleration */
.gpu-accelerated {
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
/* Reduce paint operations */
.contain-paint {
contain: paint;
}
.contain-layout {
contain: layout;
}
.contain-strict {
contain: strict;
}
/* Content visibility for off-screen content */
.content-auto {
content-visibility: auto;
}
.content-hidden {
content-visibility: hidden;
}
/* Reduce layout shifts */
.no-layout-shift {
position: relative;
overflow: hidden;
}
/* Smooth scrolling with fallback */
.smooth-scroll {
scroll-behavior: smooth;
}
@supports (scroll-behavior: smooth) {
.smooth-scroll {
scroll-behavior: smooth;
}
}
/* Reduce animations on low-end devices */
@media (prefers-reduced-data: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Don't load decorative images */
img[loading="lazy"] {
content-visibility: hidden;
}
}
/* Print optimizations */
@media print {
/* Hide non-essential elements */
nav, .navbar, footer, .footer {
display: none !important;
}
/* Optimize for print */
body {
font-size: 12pt;
line-height: 1.5;
color: black;
background: white;
}
/* Avoid page breaks inside elements */
.card, .deal-card, article {
break-inside: avoid;
}
/* Show URLs for links */
a[href]:after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
}
/* Critical rendering path optimization */
.render-blocking {
/* Marker for scripts that should be deferred */
}
/* Async script loading helper */
.async-script {
/* Marker for async loaded scripts */
}
/* Defer non-critical JavaScript */
/* */
/* ===== Performance Measurement ===== */
/* Element timing API support */
.element-timing {
/* Add elementtiming attribute to measure */
}
/* Largest Contentful Paint optimization */
.lcp-target {
/* Priority target for LCP optimization */
content-visibility: auto;
contain-intrinsic-size: 400px;
}
/* Cumulative Layout Shift prevention */
.cls-prevent {
/* Reserve space for dynamic content */
min-height: 200px;
}
/* First Input Delay optimization */
.fid-optimization {
/* Break up long tasks */
/* Use requestIdleCallback for non-critical work */
}
/* Total Blocking Time reduction */
.tbt-reduce {
/* Avoid long-running JavaScript */
/* Use web workers for heavy computation */
}
/* ===== Resource Prioritization ===== */
/* High priority resources */
.priority-high {
/* */
}
/* Low priority resources */
.priority-low {
/* */
}
/* ===== Bundle Size Optimization ===== */
/* Use CSS custom properties instead of repeating values */
/* Use shorthand properties */
/* Remove unused CSS */
/* ===== Network Optimization ===== */
/* Avoid synchronous XHR */
/* Use fetch with async/await */
/* Implement request coalescing */
/* Use HTTP/2 multiplexing */
/* ===== Memory Optimization ===== */
/* Avoid memory leaks */
/* Clean up event listeners */
/* Use WeakMap/WeakSet for references */
/* Detach DOM nodes when removed */
/* ===== Rendering Optimization ===== */
/* Avoid forced reflows */
.batch-reads {
/* Read all layout values first */
}
.batch-writes {
/* Then write all changes */
}
/* Use requestAnimationFrame for visual updates */
/* Use ResizeObserver instead of resize events */
/* Use IntersectionObserver for lazy loading */
/* Accessibility: Enhanced contrast mode */
@media (prefers-contrast: more) {
:root {
--gray: #333;
--gray-light: #555;
--gray-dark: #111;
}
body { color: #000; }
a { text-decoration: underline; }
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark light;
}
img:not([src*=".svg"]) {
opacity: 0.9;
}
}
/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Keep scroll-triggered elements visible */
.animate-on-scroll,
.animate-on-scroll.animated,
[class*="animate"],
.fade-in,
.fade-up,
.fade-down,
.slide-in,
.slide-up {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
}
/* Accessibility: Visible focus indicators */
:focus-visible {
outline: 3px solid #4f46e5;
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 3px solid #4f46e5;
outline-offset: 2px;
border-radius: 2px;
}