/* CRITICAL CSS - Above the fold only */ /* Inline this in for fastest rendering */ /* CSS Reset & Base (essential) */ *, *::before, *::after { box-sizing: border-box; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: ui-sans-serif, system-ui, sans-serif; } body { margin: 0; line-height: inherit; } /* Critical layout */ .container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } /* Header/Navigation (critical) */ header { position: relative; background-color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .header-container { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } /* Hero section (critical above-the-fold) */ .hero { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 80vh; background-color: #f8fafc; text-align: center; padding: 2rem 1rem; } .hero h1 { font-size: 2.5rem; font-weight: 700; color: #1e3a8a; margin-bottom: 1rem; line-height: 1.2; } .hero p { font-size: 1.125rem; color: #6b7280; margin-bottom: 2rem; max-width: 600px; } /* Critical buttons */ .btn-primary { background-color: #3b82f6; color: #ffffff; padding: 0.75rem 1.5rem; border-radius: 0.375rem; font-weight: 600; text-decoration: none; display: inline-block; transition: background-color 0.2s; } .btn-primary:hover { background-color: #2563eb; } /* Mobile menu button (critical for mobile) */ .mobile-menu-btn { display: block; background: none; border: none; padding: 0.5rem; cursor: pointer; } @media (min-width: 768px) { .mobile-menu-btn { display: none; } } /* Hide non-critical content initially */ .lazy-load { opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .lazy-load.loaded { opacity: 1; transform: translateY(0); } /* Critical CSS */ :root { --primary: #00875F; --primary-dark: #015F43; --primary-light: #00B37E; --secondary: #7C3AED; --secondary-dark: #5B21B6; --secondary-light: #8B5CF6; --background: #121214; --surface: #202024; --text: #C4C4CC; --title: #E1E1E6; --shape: #323238; --placeholder: #7C7C8A; --border: #323238; --error: #F75A68; --success: #00875F; --warning: #FBA94C; --info: #81D8F7; } /* Reset básico */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--background); color: var(--text); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } /* Layout crítico */ .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1rem; } /* Tipografia crítica */ h1, h2, h3, h4, h5, h6 { color: var(--title); font-weight: 700; line-height: 1.2; } /* Botões críticos */ .button { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; transition: all 0.2s; cursor: pointer; } .button-primary { background: var(--primary); color: white; } .button-primary:hover { background: var(--primary-dark); } /* Loading states críticos */ .loading { opacity: 0.7; pointer-events: none; user-select: none; } /* Formulários críticos */ .input { width: 100%; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; color: var(--text); } .input:focus { border-color: var(--primary); outline: none; } /* Feedback crítico */ .error-message { color: var(--error); font-size: 0.875rem; margin-top: 0.25rem; } .success-message { color: var(--success); font-size: 0.875rem; margin-top: 0.25rem; } /* Critical CSS - Apenas estilos essenciais para o first paint */ @tailwind base; /* Estilos críticos do layout */ :root { --primary-color: #3b82f6; --secondary-color: #6b7280; } body { @apply bg-white text-gray-900 antialiased; margin: 0; padding: 0; } /* Header e navegação críticos */ .header { @apply fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-sm; } .nav { @apply flex items-center justify-between px-4 py-2; } /* Hero section crítico */ .hero { @apply min-h-screen flex items-center justify-center; background: linear-gradient(to bottom right, #f0f9ff, #e0f2fe); } /* Tipografia crítica */ h1 { @apply text-4xl font-bold text-gray-900; } /* Botões críticos */ .btn-primary { @apply bg-primary-500 text-white px-6 py-2 rounded-lg; } /* Loading states críticos */ .loading { @apply animate-pulse bg-gray-200; }