/** * Critical CSS - Inline in for faster LCP * Contains only above-the-fold styles */ :root { --color-primary: #0077B6; --color-dark: #1a1a2e; --color-white: #ffffff; --color-light: #f8fafc; --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-family); color: var(--color-dark); background: var(--color-white); line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* Navigation - Critical for LCP */ .nav-header { position: fixed; top: 0; left: 0; right: 0; height: 72px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); z-index: 1000; display: flex; align-items: center; } .nav-container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .nav-logo { font-size: 1.5rem; font-weight: 800; color: var(--color-primary); text-decoration: none; letter-spacing: 0.1em; } /* Hero - Critical for LCP */ .hero { min-height: 70vh; display: flex; align-items: center; background: linear-gradient(135deg, #0077B6 0%, #005a8c 100%); color: var(--color-white); text-align: center; padding: 120px 0 80px; } .hero-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; max-width: 900px; margin: 0 auto 1rem; } .hero-text { font-size: 1.125rem; opacity: 0.9; max-width: 600px; margin: 0 auto 2rem; } /* Buttons - Critical */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 0.75rem; text-decoration: none; transition: all 0.2s; cursor: pointer; border: none; } .btn-primary { background: var(--color-primary); color: var(--color-white); } .btn-outline { background: transparent; border: 2px solid var(--color-white); color: var(--color-white); } .btn-white { background: var(--color-white); color: var(--color-primary); } /* Prevent layout shift */ img { max-width: 100%; height: auto; display: block; } /* Skeleton loading */ .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton 1.5s infinite; } @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }