/* Critical CSS - Above-the-fold content only */ /* This is inlined in the HTML for optimal performance */ /* CSS Reset - Critical only */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* CSS Custom Properties */ :root{--background:#111216;--foreground:#f5f5dc;--muted:#a6a6a6;--panel:#1a1b20;--border:#2a2b31;--accent:#e6e6e6;--font-mono:'JetBrains Mono','Courier New',monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--radius-sm:0.125rem;--radius-md:0.375rem;--radius-lg:0.5rem} /* Light theme - system preference */ @media(prefers-color-scheme:light){:root:not([data-theme="dark"]){--background:#f5f5f0;--foreground:#1a1a1a;--muted:#6b7280;--panel:#faf9f6;--border:#e5e7eb;--accent:#1a1a1a}} /* Light theme - manual override */ [data-theme="light"]{--background:#f5f5f0;--foreground:#1a1a1a;--muted:#6b7280;--panel:#faf9f6;--border:#e5e7eb;--accent:#1a1a1a} /* Base styles - Critical */ html{font-size:16px} body{background:var(--background);color:var(--foreground);font-family:var(--font-mono);font-size:var(--font-size-sm);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* Typography - Critical */ h1,h2,h3{font-weight:600;line-height:1.2;margin-bottom:var(--space-4)} h1{font-size:var(--font-size-xl)} h2{font-size:var(--font-size-lg)} p{margin-bottom:var(--space-3)} a{color:var(--foreground);text-decoration:none} /* Layout - Critical */ .container{max-width:1024px;margin:0 auto;padding:0 var(--space-4)} @media(min-width:640px){.container{padding:0 var(--space-6)}} @media(min-width:1024px){.container{padding:0 var(--space-8)}} /* Header - Critical (above the fold) */ .header{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:rgba(26,27,32,0.7);border-bottom:1px solid var(--border)} [data-theme="light"] .header{background:rgba(245,245,240,0.8)} @media(prefers-color-scheme:light){.header{background:rgba(245,245,240,0.8)}} .header-content{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) 0;gap:var(--space-4)} /* Logo - Critical */ .logo{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-md)} .logo:hover{background:rgba(26,27,32,0.5)} .logo-symbol{font-size:var(--font-size-xs);color:var(--muted)} .logo-text{font-size:var(--font-size-xs);color:var(--foreground)} /* Navigation - Critical */ .nav{display:none;align-items:center;gap:var(--space-4);margin-left:auto;margin-right:var(--space-4)} @media(min-width:1024px){.nav{display:flex}} .nav-link{font-size:var(--font-size-sm);color:var(--muted);text-decoration:none;font-weight:500;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md)} .nav-link:hover{color:var(--foreground);background:var(--panel)} /* Theme toggle - Critical */ .theme-toggle{background:none;border:1px solid var(--border);color:var(--foreground);cursor:pointer;padding:var(--space-2);border-radius:var(--radius-md);font-size:var(--font-size-lg);flex-shrink:0;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center} .theme-toggle:hover{background:var(--panel);border-color:var(--accent)} /* Mobile toggle - Critical */ .mobile-toggle{display:none;background:none;border:none;font-size:1.25rem;color:var(--foreground);cursor:pointer;padding:var(--space-2);border-radius:50%;width:40px;height:40px;align-items:center;justify-content:center;margin-left:auto} @media(max-width:991px){.mobile-toggle{display:flex}} /* Main content - Critical */ .main{padding:var(--space-4) 0} @media(min-width:640px){.main{padding:var(--space-6) 0}} @media(min-width:768px){.main{padding:var(--space-8) 0}} /* Sections - Critical */ .section{margin-bottom:var(--space-8)} .section-header{margin-bottom:var(--space-4)} .section-title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--space-1)} /* Blog posts - Critical (above fold) */ .blog-posts{display:flex;flex-direction:column;gap:0} .blog-post{padding:var(--space-3) 0;border-bottom:1px solid var(--border)} .blog-post:last-child{border-bottom:none} .blog-post:hover{background:var(--panel);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md)} .blog-post-link{display:block} .blog-post-title{font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--space-2);line-height:1.4} .blog-post-meta{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-1)} .blog-post-date{font-size:var(--font-size-xs);color:var(--muted);white-space:nowrap;margin-left:var(--space-4)} .blog-post-excerpt{font-size:var(--font-size-xs);color:var(--muted);line-height:1.4} /* Projects - Critical (above fold) */ .project-grid{display:flex;flex-direction:column;gap:0} .project-card{padding:var(--space-3) 0;border-bottom:1px solid var(--border)} .project-card:last-child{border-bottom:none} .project-card:hover{background:var(--panel);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md)} .project-title{font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--space-2)} .project-title a{color:var(--foreground);text-decoration:none} .project-description{font-size:var(--font-size-xs);color:var(--muted);line-height:1.5} /* Footer - Critical */ .footer{margin-top:var(--space-12);padding:var(--space-6) 0;border-top:1px solid var(--border)} .footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4)} .footer-links{display:flex;gap:var(--space-6)} .footer-links a{color:var(--muted);text-decoration:none;font-size:var(--font-size-sm)} .footer-links a:hover{color:var(--accent)} .footer-credit{color:var(--muted);text-decoration:none;font-size:var(--font-size-xs)} .footer-terminal-hint{font-size:var(--font-size-xs);color:var(--muted)} /* Reduced motion - Critical */ @media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* Print styles - Critical */ @media print{.header,.footer,.theme-toggle{display:none}.main{padding:0}}