/* ============================================================
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
============================================================ */
/* 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;
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;
}
/* 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,
.provider-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,
.provider-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;
}
/* Full-title skeleton: icon + text shimmer together until
fonts load. Avoids the awkward "text rendered, icon still
shimmering" state. Width is preserved by the actual text
node (color: transparent ≠ display: none) so layout is
stable when fonts-loaded flips. */
html:not(.fonts-loaded) .home-widget-title {
color: transparent;
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;
border-radius: var(--radius-sm, 4px);
overflow: hidden;
}
/* Suppress child icon's own shimmer — parent already shimmers */
html:not(.fonts-loaded) .home-widget-title .material-symbols-rounded {
background: transparent;
animation: none;
}
/* Full-card skeleton: while .provider-logo lacks .loaded,
the entire card flattens to a single shimmer block. Once
JS adds .loaded to .provider-logo, the card returns to its
normal gradient + name + logo design. Scoped to
.provider-scroll only — .provider-grid uses different
classes and has no skeleton state. */
.provider-scroll .provider-card:has(.provider-logo:not(.loaded)) {
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;
border-color: transparent;
box-shadow: none;
}
.provider-scroll .provider-card:has(.provider-logo:not(.loaded))::before {
display: none;
}
.provider-scroll .provider-card:has(.provider-logo:not(.loaded)) .provider-logo,
.provider-scroll .provider-card:has(.provider-logo:not(.loaded)) .provider-name {
visibility: hidden;
animation: none;
background: none;
}