/* ========================================================== CRITICAL CSS - Inline this in for fastest render Below-fold styles load asynchronously Target: < 14KB for optimal First Contentful Paint ========================================================== */ /* CRITICAL RESET & VARIABLES */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root { --bg: #050616; --bg-elevated: rgba(15, 23, 42, 0.95); --accent: #fbbf24; --accent-2: #38bdf8; --text: #f8fafc; --text-muted: rgba(226, 232, 240, 0.75); --border: rgba(148, 163, 184, 0.18); --radius: 22px; --radius-sm: 14px; --transition: 0.28s ease; --container-width: 1180px; } html{font-size:16px;scroll-behavior:smooth} body{ font-family:"Space Grotesk","Inter",-apple-system,sans-serif; background:#03030d; color:var(--text); line-height:1.7; min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden } /* Prevent FOUC and layout shift */ body{visibility:hidden} body.loaded{visibility:visible} /* Fallback: Show content after 3 seconds even if JS fails */ @keyframes showContent { to { visibility: visible; } } body:not(.loaded) { animation: showContent 3s forwards; } /* CRITICAL LAYOUT */ .container{ max-width:var(--container-width); margin:0 auto; padding:0 clamp(1.5rem,4vw,3rem) } /* CRITICAL HEADER (Above fold) */ .site-header{ position:sticky; top:0; z-index:20; background:rgba(3,6,21,0.95); border-bottom:1px solid var(--border); height:70px } .nav-shell{ display:flex; align-items:center; padding:1.2rem 3rem; max-width:var(--container-width); margin:0 auto } .nav-brand{ flex-shrink:0 } .nav-brand a{ display:inline-flex; align-items:center; gap:0.6rem; font-size:1.1rem; font-weight:600; color:var(--text); text-decoration:none } .nav-glow{ width:9px; height:9px; background:var(--accent); border-radius:50%; box-shadow:0 0 18px var(--accent) } .nav-menu{ display:flex; gap:1.5rem; align-items:center; margin-left:auto } .nav-link{ font-size:0.95rem; font-weight:500; color:var(--text-muted); text-decoration:none; transition:color var(--transition); min-height:44px; display:inline-flex; align-items:center; padding:0.5rem 0.8rem } .nav-link:hover,.nav-link.active{ color:var(--text) } /* Search button in nav */ .search-container-nav{ display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--accent); border-radius:var(--radius-sm); background:rgba(255,255,255,0.02); cursor:pointer; transition:all var(--transition); min-height:44px; color:var(--text) } .search-container-nav svg{ stroke:var(--text) } .search-label{ font-size:0.85rem; color:var(--text-muted); font-weight:500 } /* CRITICAL HERO (Above fold) */ .hero{ padding:clamp(3.5rem,8vw,6rem) 0 clamp(2rem,6vw,4rem) } .hero-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(2.5rem,6vw,5rem); align-items:center } .hero-intro{ display:flex; flex-direction:column; gap:clamp(1.5rem,4vw,2.3rem) } .hero-title{ font-size:clamp(2.6rem,6vw,3.9rem); line-height:1.08; font-weight:700; letter-spacing:-0.01em } .hero-subtitle{ font-size:clamp(1.05rem,2vw,1.2rem); color:var(--text-muted); max-width:620px } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.9rem 1.9rem; min-height:44px; min-width:44px; border-radius:999px; font-size:0.95rem; font-weight:600; cursor:pointer; border:1px solid transparent; transition:transform var(--transition),box-shadow var(--transition); text-decoration:none } .btn-primary{ background:linear-gradient(135deg,#ec4899,#38bdf8,#a855f7); color:#050616; box-shadow:0 18px 40px rgba(236,72,153,0.3) } /* Skip link for accessibility */ .skip-link{ position:absolute; top:-40px; left:0; background:var(--accent); color:var(--bg); padding:0.75rem 1.5rem; text-decoration:none; font-weight:600; z-index:100 } .skip-link:focus{ top:0 } /* Focus styles */ *:focus-visible{ outline:3px solid var(--accent); outline-offset:3px } /* MOBILE NAV CRITICAL */ .nav-toggle{ display:none; width:44px; height:44px; background:none; border:none; cursor:pointer; z-index:1000; flex-direction:column; justify-content:center; align-items:center; gap:4px } .hamburger-line{ width:24px; height:2px; background:var(--text); transition:all 0.3s ease } /* CRITICAL MOBILE STYLES */ @media(max-width:640px){ .nav-shell{ padding:1rem; justify-content:space-between } .nav-toggle{ display:flex } .nav-menu{ position:fixed; top:0; right:-100%; width:80%; max-width:300px; height:100vh; background:var(--bg-elevated); border-left:1px solid var(--border); flex-direction:column; align-items:flex-start; padding:4rem 1.5rem 2rem; gap:1rem; transition:right 0.3s ease; z-index:999; overflow-y:auto } .nav-menu.is-open{ right:0 } .hero-grid{ grid-template-columns:1fr } .search-label{ display:none } body:has(.nav-menu.is-open){ overflow:hidden; position:fixed; width:100% } } @media(max-width:480px){ .nav-shell{ padding:1rem 0.75rem } .hero{ padding:clamp(2rem,6vw,3rem) 0 clamp(1.5rem,4vw,2rem) } } /* Prevent invisible text during font load */ @font-face{ font-family:'Space Grotesk'; font-display:swap } /* Loading indicator */ body:not(.loaded)::before{ content:''; position:fixed; top:0; left:0; right:0; height:3px; background:var(--accent); animation:loading 2s ease-in-out infinite; z-index:9999 } @keyframes loading{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} } /* PERFORMANCE: Contain layout shifts */ img,video,iframe{ max-width:100%; height:auto; display:block } /* Prevent layout shift for lazy images */ img[loading="lazy"]{ content-visibility:auto }