/* ================================================================ CORE WEB VITALS & PERFORMANCE OPTIMIZATIONS Add this to the TOP of your existing style.css ================================================================ */ /* ── Critical CSS (above-the-fold) ──────────────────────────── */ /* Inline these styles in for fastest first paint */ /* Font display swap to prevent FOIT */ @font-face { font-family: 'Playfair Display'; font-display: swap; src: local('Playfair Display'); } @font-face { font-family: 'DM Sans'; font-display: swap; src: local('DM Sans'); } /* Content visibility for below-fold sections */ section:not(.hero):not(.page-hero) { content-visibility: auto; contain-intrinsic-size: 0 500px; } /* Containment for complex components */ .project-card, .skill-card, .track-card, .proj-card, .pillar-card { contain: layout style paint; } /* ── Image Optimization ──────────────────────────────────────── */ img { max-width: 100%; height: auto; display: block; content-visibility: auto; } /* Lazy loading placeholder */ img[loading="lazy"] { background: linear-gradient(110deg, var(--bg-card) 8%, var(--bg-dark) 18%, var(--bg-card) 33%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; } img[loading="lazy"].loaded { animation: none; background: none; } @keyframes skeleton-loading { to { background-position-x: -200%; } } /* Responsive images */ picture, source { display: block; } /* ── Animation Performance ──────────────────────────────────── */ /* Use GPU-accelerated properties only */ .hero-glow-1, .hero-glow-2, .ph-orb, .vinyl, .about-frame-deco { will-change: transform; transform: translateZ(0); } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero-glow-1, .hero-glow-2, .ph-orb, .vinyl, .eq-bar, .track-waves span { animation: none !important; } .scroll-to-top, .music-player-bar, #pageTransition { transition: none !important; } } /* ── Layout Stability (CLS Prevention) ────────────────────── */ /* Reserve space for images before they load */ .about-img-frame, .project-image, .proj-thumb, .track-art { aspect-ratio: attr(width) / attr(height); min-height: 200px; } /* Prevent layout shift from dynamic content */ .music-player-bar { contain: layout; } /* Stabilize filter buttons */ .project-filters { min-height: 48px; } /* ── Font Loading Strategy ──────────────────────────────────── */ /* System font stack fallback */ :root { --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Use system fonts while custom fonts load */ .font-loading body { font-family: var(--font-system); } .font-loaded body { font-family: var(--font-body); } /* ── Resource Hints ────────────────────────────────────────── */ /* Preload critical resources */ link[rel="preload"] { display: none; } /* ── CSS Containment for Isolation ──────────────────────────── */ .navbar { contain: layout style; } .footer { contain: layout style; } .music-player-bar { contain: layout style paint; } /* ── Print Styles ──────────────────────────────────────────── */ @media print { .navbar, .scroll-to-top, .music-player-bar, .faq-chatbot, #pageTransition, .hero-glow-1, .hero-glow-2, .ph-orb, .eq-bars, .vinyl { display: none !important; } body { background: #fff !important; color: #000 !important; } a { color: #000 !important; text-decoration: underline !important; } .project-card, .skill-card, .track-card { break-inside: avoid; page-break-inside: avoid; } section { padding: 24px 0 !important; } } /* ── High Contrast Mode Support ────────────────────────────── */ @media (prefers-contrast: high) { :root { --primary: #00bcd4; --text-primary: #ffffff; --text-secondary: #e0e0e0; --border: #666666; } .btn-primary { border: 2px solid #fff; } .nav-link::after { height: 3px; } } /* ── Focus Visible (Keyboard Navigation) ───────────────────── */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Remove default focus for mouse users */ :focus:not(:focus-visible) { outline: none; } /* ── Selection Styling ────────────────────────────────────── */ ::selection { background: rgba(8,145,178,0.3); color: var(--text-primary); } ::-moz-selection { background: rgba(8,145,178,0.3); color: var(--text-primary); } /* ── Scrollbar Styling ────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-darkest); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg-darkest); } /* ── Touch Action Optimization ─────────────────────────────── */ @media (pointer: coarse) { .btn, .nav-link, .track-play, .music-play, .faq-chat-toggle, .faq-quick-btn { min-height: 44px; min-width: 44px; } .project-filters { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ── Container Queries (Future-proof) ─────────────────────── */ @container (max-width: 400px) { .skill-card, .project-card { padding: 20px; } } /* ── Aspect Ratio Fallbacks ────────────────────────────────── */ @supports not (aspect-ratio: 1) { .about-img-frame::before, .project-image::before, .proj-thumb::before { content: ''; float: left; padding-top: 75%; } .about-img-frame::after, .project-image::after, .proj-thumb::after { content: ''; display: block; clear: both; } }