/* critical.css - Load this in for above-the-fold content */ /* 1. FONT LOADING OPTIMIZATION */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-semibold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-bold.woff2') format('woff2'); } /* 2. CRITICAL ABOVE-THE-FOLD STYLES */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; overflow-x: hidden; } .c-layout-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } /* 3. LOADING STATES */ .page-loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; z-index: 9999; display: flex; align-items: center; justify-content: center; } .loading-spinner { width: 50px; height: 50px; border: 3px solid #f3f3f3; border-top: 3px solid #20b7fe; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 4. CONTENT FADE-IN */ .page-loaded .c-layout-page { animation: fadeIn 0.5s ease forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* 5. PURPLE PARTNERSHIP BADGE */ .purple-partner-badge { display: inline-block; background: linear-gradient(135deg, #9b59b6, #8e44ad); color: white; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 8px; vertical-align: middle; } /* 6. NEXT-GEN MSP GRADIENT TEXT */ .next-gen-gradient { background: linear-gradient(135deg, #20b7fe 0%, #9b59b6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* 7. RESPONSIVE TYPOGRAPHY */ @media (max-width: 768px) { h1 { font-size: 32px !important; } h2 { font-size: 24px !important; } h3 { font-size: 20px !important; } p, li { font-size: 14px !important; } } /* 8. PERFORMANCE OPTIMIZATIONS */ img { max-width: 100%; height: auto; } /* 9. ACCESSIBILITY */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus { outline: 2px solid #20b7fe; outline-offset: 2px; } /* 10. PRINT STYLES */ @media print { .c-layout-header, .c-layout-footer, .c-layout-go2top, #share-bar { display: none !important; } .c-layout-page { padding-top: 0 !important; } a { text-decoration: underline !important; color: #000 !important; } .no-print { display: none !important; } }