/* * Critical Performance CSS * This file ensures fast rendering and better Core Web Vitals * Inline this in your HTML for best results */ :root { /* Colors */ --primary: #0066cc; --primary-dark: #004399; --text-dark: #1a1a1a; --text-light: #ffffff; --bg-light: #f5f5f5; --bg-white: #ffffff; --border-color: #e0e0e0; /* Fonts */ --font-family-base: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-base: 16px; --line-height-base: 1.5; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; } /* Prevent layout shift on scrollbar appearance */ html { scrollbar-gutter: stable; } /* Base text rendering optimization */ body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--text-dark); background-color: var(--bg-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Prevent font loading flicker (FOIT) */ @font-face { font-display: swap; } /* Heading hierarchy with proper spacing to prevent CLS */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 600; margin-top: 0; margin-bottom: var(--spacing-md); } h1 { font-size: 2.25rem; } h2 { font-size: 1.875rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; } /* Links with proper focus states */ a { color: var(--primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--primary-dark); } a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; } /* Buttons with proper dimensions to prevent CLS */ button, input[type="button"], input[type="submit"], .btn { font-family: inherit; font-size: inherit; padding: var(--spacing-sm) var(--spacing-md); border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; min-height: 44px; /* Touch target size */ display: inline-flex; align-items: center; justify-content: center; } button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Images with proper sizing to prevent CLS */ img { max-width: 100%; height: auto; display: block; } /* Responsive images without layout shift */ /*img[width][height] {*/ /* width: auto;*/ /* aspect-ratio: attr(width) / attr(height);*/ /*}*/ /* Forms with proper spacing */ input, textarea, select { font-family: inherit; font-size: inherit; min-height: 44px; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-color); border-radius: 4px; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-color: var(--primary); } /* Tables with better readability */ table { width: 100%; border-collapse: collapse; margin-bottom: var(--spacing-lg); } th, td { padding: var(--spacing-md); text-align: left; border-bottom: 1px solid var(--border-color); } th { background-color: var(--bg-light); font-weight: 600; } /* Lists with proper spacing */ ul, ol { margin-bottom: var(--spacing-lg); padding-left: var(--spacing-lg); } li { margin-bottom: var(--spacing-sm); } /* Code with better readability */ code, pre { font-family: 'Monaco', 'Courier New', monospace; background-color: var(--bg-light); padding: 0.25rem 0.5rem; border-radius: 2px; font-size: 0.875em; } pre { padding: var(--spacing-md); overflow-x: auto; margin-bottom: var(--spacing-lg); } /* Utility classes for common patterns */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-1 { margin-top: var(--spacing-xs); } .mb-1 { margin-bottom: var(--spacing-xs); } .mt-2 { margin-top: var(--spacing-sm); } .mb-2 { margin-bottom: var(--spacing-sm); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Skip to content link */ .skip-to-content { position: absolute; top: -40px; left: 0; background: var(--text-dark); color: var(--text-light); padding: var(--spacing-sm) var(--spacing-md); text-decoration: none; z-index: 100; border-radius: 0 0 var(--spacing-sm) 0; } .skip-to-content:focus { top: 0; } /* Animations with better performance */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Ensure proper contrast for accessibility */ .text-light { color: var(--text-light) !important; } .bg-dark { background-color: var(--text-dark) !important; } .text-muted { color: #666; } /* Print styles for accessibility */ @media print { body { background: var(--text-light); } a[href]:after { content: " (" attr(href) ")"; } img, video { max-width: 100%; } }