/* ============================================================
skeleton.css — Global shimmer placeholders
Uses @keyframes shimmer from style.css (globally available)
Two systems:
1. Icon skeletons — shimmer until fonts load (html.fonts-loaded)
2. Image skeletons — shimmer behind ![]()
, stops on .loaded
============================================================ */
/* ── ICON SKELETONS ─────────────────────────────────────── */
/* Material Symbols Rounded is ~250KB+ from Google Fonts.
Show shimmer pill in place of icon until font is ready.
JS adds .fonts-loaded to via document.fonts API.
Global scope: covers sidebar, header, footer, and content. */
html:not(.fonts-loaded) .material-symbols-rounded {
color: transparent !important;
display: inline-block;
min-width: 1em;
height: 1em;
border-radius: var(--radius-sm, 4px);
overflow: hidden;
vertical-align: middle;
background: linear-gradient(90deg,
var(--surface) 25%,
var(--surface2) 50%,
var(--surface) 75%);
background-size: 400% 100%;
animation: shimmer 1.8s ease-in-out infinite;
}
/* Sidebar labels: shimmer text placeholder until font ready */
html:not(.fonts-loaded) .sidebar-label {
color: transparent !important;
border-radius: var(--radius-sm, 4px);
background: linear-gradient(90deg,
var(--surface) 25%,
var(--surface2) 50%,
var(--surface) 75%);
background-size: 400% 100%;
animation: shimmer 1.8s ease-in-out infinite;
min-width: 60px;
}
/* Sidebar logo text */
html:not(.fonts-loaded) .sidebar-logo-text {
color: transparent !important;
border-radius: var(--radius-sm, 4px);
background: linear-gradient(90deg,
var(--surface) 25%,
var(--surface2) 50%,
var(--surface) 75%);
background-size: 400% 100%;
animation: shimmer 1.8s ease-in-out infinite;
}
/* Smooth reveal transition when fonts load */
.material-symbols-rounded,
.sidebar-label,
.sidebar-logo-text {
transition: color 0.3s ease, background 0.3s ease;
}
/* ── IMAGE SKELETONS ────────────────────────────────────── */
/* Shimmer background sits behind ![]()
. Once image loads,
it covers the shimmer naturally (object-fit: cover).
JS adds .loaded to stop animation and save CPU. */
.game-card-image,
.brand-logo,
.highlight-scroll > li figure,
#banner .splide__slide figure,
.sidebar-logo,
.sidebar-social-link,
.footer-social-btn,
.footer-brand-name figure {
background: linear-gradient(90deg,
var(--surface) 25%,
var(--surface2) 50%,
var(--surface) 75%);
background-size: 400% 100%;
animation: shimmer 1.8s ease-in-out infinite;
}
/* Stop shimmer once image is loaded (JS adds .loaded) */
.game-card-image.loaded,
.brand-logo.loaded,
.highlight-scroll > li figure.loaded,
#banner .splide__slide figure.loaded,
.sidebar-logo.loaded,
.sidebar-social-link.loaded,
.footer-social-btn.loaded,
.footer-brand-name figure.loaded {
animation: none;
background: none;
}