/* Critical Above-the-Fold CSS - Inlined in for instant first paint */ /* This file contains ~8-12KB of essential styles for LCP elements and layout stability */ /* CSS Variables (Design Tokens) */ :root { --background: 210 50% 98%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --primary: 196 75% 49%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --border: 214.3 31.8% 91.4%; --radius: 0.5rem; } /* Base Resets */ *, ::before, ::after { box-sizing: border-box; border: 0 solid hsl(var(--border)); } html { -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; } body { margin: 0; line-height: inherit; background-color: hsl(var(--background)); color: hsl(var(--foreground)); } /* Layout Containers */ .content-container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; max-width: 80rem; } @media (min-width: 640px) { .content-container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .content-container { padding-left: 2rem; padding-right: 2rem; } } /* Hero Section */ .hero-section { min-height: 44vh; } @media (max-width: 768px) { .hero-section { min-height: 50vh; } } /* Typography - Above the Fold */ h1, h2, h3 { font-size: inherit; font-weight: inherit; margin: 0; } .heading-1 { font-size: 2.25rem; font-weight: 700; line-height: 2.5rem; letter-spacing: -0.025em; } .heading-2 { font-size: 1.875rem; font-weight: 700; line-height: 2.25rem; letter-spacing: -0.025em; } .heading-3 { font-size: 1.5rem; font-weight: 700; line-height: 2rem; } @media (min-width: 1024px) { .heading-1 { font-size: 3rem; line-height: 1; } } /* Buttons - Critical for CTA visibility */ button { cursor: pointer; background-color: transparent; background-image: none; font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; margin: 0; padding: 0; } .bg-primary { background-color: hsl(var(--primary)); } .text-primary-foreground { color: hsl(var(--primary-foreground)); } .hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); } /* Cards - Critical for Pricing/Listing grids */ .card { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border-radius: calc(var(--radius) - 2px); border: 1px solid hsl(var(--border)); } /* Aspect Ratio Locks (CLS Prevention) */ .aspect-4-3 { aspect-ratio: 4/3; } .aspect-16-9 { aspect-ratio: 16/9; } /* Navigation - Above the fold */ nav { position: relative; z-index: 50; } /* Grid Layouts */ .grid { display: grid; } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Common Utility Classes */ .flex { display: flex; } .hidden { display: none; } .text-center { text-align: center; } .font-bold { font-weight: 700; } .rounded-lg { border-radius: calc(var(--radius)); } .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } /* Skeleton Loaders (Lazy Loading Fallbacks) */ .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } /* Prevent FOUC */ #root { min-height: 100vh; }