/** * @fileoverview Critical CSS - Above the Fold Styles * @description Inline critical CSS for faster initial page render. Contains only * styles needed for above-the-fold content including navigation, * hero sections, and base typography. * @author Vidya Chaitanya Samakhya * @version 1.0.0 * @note This file should be inlined in the for optimal performance */ /* ============================================ RESET & BASE STYLES ============================================ */ /* Reset and base styles */ html { overflow-x: hidden; scroll-behavior: smooth; } body { overflow-x: hidden; width: 100%; max-width: 100vw; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; } /* ============================================ SCROLL PROGRESS BAR ============================================ */ /* Scroll Progress Bar - Critical for above fold */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: linear-gradient(to right, #1E40AF, #F59E0B); z-index: 9999; transform-origin: left; transform: scaleX(0) translateZ(0); will-change: transform; backface-visibility: hidden; } /* ============================================ NAVIGATION ============================================ */ /* Navigation - Critical for above fold */ #navbar { position: fixed; top: 0.5rem; left: 50%; transform: translateX(-50%); width: 95%; max-width: 80rem; z-index: 50; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(16px); border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); box-sizing: border-box; } /* ============================================ MOBILE MENU ============================================ */ /* Mobile menu overlay - Critical */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); z-index: 40; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .mobile-menu-overlay.active { opacity: 1; visibility: visible; } .mobile-menu { position: fixed; top: 0; right: 0; width: 85%; max-width: 400px; height: 100vh; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); z-index: 50; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); overflow-y: auto; } .mobile-menu.active { transform: translateX(0); } /* ============================================ TYPOGRAPHY ============================================ */ /* Typography - Critical */ h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; letter-spacing: 0.025em; margin: 0; } /* ============================================ PERFORMANCE OPTIMIZATIONS ============================================ */ /* Performance optimizations */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .transform { backface-visibility: hidden; perspective: 1000px; } [data-aos] { will-change: transform, opacity; backface-visibility: hidden; } /* ============================================ LOGO STYLES ============================================ */ /* Logo optimizations */ .logo-navbar { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); will-change: transform; backface-visibility: hidden; transform: translateZ(0); } /* ============================================ BACK TO TOP BUTTON ============================================ */ /* Back to top button */ #backToTop { position: fixed; bottom: 2rem; right: 2rem; width: 3rem; height: 3rem; background: #F59E0B; color: white; border-radius: 9999px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); display: none; align-items: center; justify-content: center; z-index: 100; cursor: pointer; border: none; transition: transform 0.2s ease, background-color 0.2s ease; } #backToTop.flex { display: flex; } #backToTop:hover { background: #D97706; transform: scale(1.1); } /* ============================================ RESPONSIVE STYLES ============================================ */ /* Mobile responsive */ @media (max-width: 768px) { #navbar { left: 0.5rem; right: 0.5rem; width: auto; transform: none; margin-left: 0; } }