/**
* Performance Optimizations
* Core Web Vitals improvements
*/
/* ====================
FONT OPTIMIZATION
==================== */
/* Preload critical fonts */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: local('Inter'), url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ====================
LAYOUT STABILITY (CLS)
==================== */
/* Prevent layout shift from images */
img,
video,
iframe {
max-width: 100%;
height: auto;
vertical-align: middle;
}
/* Reserve space for lazy-loaded images */
img[loading="lazy"] {
aspect-ratio: attr(width) / attr(height);
}
/* Skeleton screens for content loading */
.skeleton {
background: linear-gradient(
90deg,
rgba(139, 92, 246, 0.05) 0%,
rgba(139, 92, 246, 0.1) 50%,
rgba(139, 92, 246, 0.05) 100%
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ====================
WILL-CHANGE OPTIMIZATION
==================== */
/* Only apply will-change to actively animating elements */
.nav.is-open,
.lang-selector__dropdown.is-open,
.mobile-menu-overlay.is-visible {
will-change: transform, opacity;
}
/* Remove will-change after animation */
.nav:not(.is-open),
.lang-selector__dropdown:not(.is-open),
.mobile-menu-overlay:not(.is-visible) {
will-change: auto;
}
/* ====================
CRITICAL CSS INLINING
==================== */
/* Above-the-fold styles (inline these in ) */
.topbar {
contain: layout style;
}
.hero {
contain: layout;
}
/* ====================
GPU ACCELERATION
==================== */
/* Use transform3d for better performance */
.nav,
.lang-selector__dropdown,
.mobile-menu-overlay {
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
/* ====================
CONTENT VISIBILITY
==================== */
/* Lazy render off-screen sections */
.section {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}
/* Keep important content always visible */
.hero,
.topbar {
content-visibility: visible;
}
/* ====================
INTERSECTION OBSERVER HINTS
==================== */
/* Prepare elements for lazy loading */
[data-lazy],
[loading="lazy"] {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
[data-lazy].loaded,
[loading="lazy"].loaded {
opacity: 1;
}
/* ====================
MINIMIZE REPAINTS
==================== */
/* Isolate compositing layers */
.card,
.account-card,
.news-slide,
.progression-card {
transform: translateZ(0);
will-change: transform;
}
/* After hover/animation, remove will-change */
.card:not(:hover),
.account-card:not(:hover) {
will-change: auto;
}
/* ====================
REDUCE LAYOUT THRASHING
==================== */
/* Use flexbox/grid instead of floats */
.accounts-grid,
.cards-grid,
.skill-grid,
.progression-grid {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
/* ====================
LOADING OPTIMIZATION
==================== */
/* Defer non-critical animations */
@media (prefers-reduced-motion: no-preference) {
.fade-in {
animation: fadeIn 0.4s ease-in-out;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ====================
JAVASCRIPT DEFER HINTS
==================== */
/*
* Add these attributes to script tags:
* - defer: Non-critical scripts
* - async: Independent scripts (analytics)
* - type="module": Modern JS with automatic defer
*/
/* ====================
IMAGE OPTIMIZATION
==================== */
/* Responsive images hints */
img {
/* Browser hint for image decoding */
decoding: async;
}
/* Prioritize hero images */
.hero img,
.news-slide img {
loading: eager;
decoding: sync;
fetchpriority: high;
}
/* ====================
PREFETCH/PRECONNECT
==================== */
/*
* Add to :
*
*
*
*/
/* ====================
SCROLL PERFORMANCE
==================== */
/* Smooth scrolling with performance in mind */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* Optimize scroll containers */
.nav,
.lang-selector__dropdown {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
/* ====================
PAINT OPTIMIZATION
==================== */
/* Reduce paint areas */
.topbar,
.footer {
isolation: isolate;
}
/* Optimize backdrop-filter */
@supports (backdrop-filter: blur(10px)) {
.topbar,
.lang-selector__dropdown,
.nav {
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
}
}
/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
.topbar {
background: rgba(10, 12, 30, 0.98);
}
.lang-selector__dropdown {
background: rgba(30, 27, 75, 0.98);
}
}
/* ====================
MEMORY OPTIMIZATION
==================== */
/* Limit box-shadow complexity */
.card,
.account-card {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.card:hover,
.account-card:hover {
box-shadow: 0 8px 32px rgba(139, 92, 246, 0.25);
}
/* ====================
CRITICAL CSS BUDGET
==================== */
/* Keep critical CSS under 14KB */
/* Inline only: reset, variables, topbar, hero */
/* Defer: animations, cards, footer */