.page-skeleton { display: none; }
html.page-skeleton-loading,
html.page-skeleton-loading body { overflow: hidden; }
html.page-skeleton-loading .page-skeleton {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
flex-direction: column;
background: #fff;
overflow: hidden;
}
.page-skeleton__block {
display: block;
border-radius: 8px;
background: linear-gradient(90deg, #f0f0f0 25%, #fafafa 37%, #f0f0f0 63%);
background-size: 400% 100%;
animation: page-skeleton-shimmer 1.35s ease-in-out infinite;
}
.page-skeleton__logo { width: 96px; height: 20px; }
.page-skeleton__link { width: 70px; height: 14px; }
.page-skeleton__icon { width: 24px; height: 24px; border-radius: 50%; }
.page-skeleton__benefit-icon { width: 62px; height: 62px; border-radius: 50%; }
.page-skeleton__benefit-copy { width: 100%; height: 13px; }
@media (min-width: 768px) {
.page-skeleton__nav {
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5vw;
border-bottom: 1px solid #e8e8e8;
}
.page-skeleton__hero {
position: relative;
min-height: 68vh;
padding: 13vh 8vw 0;
}
.page-skeleton__media {
position: absolute;
top: 9vh;
right: 8vw;
width: 42%;
height: min(30vw, 420px);
}
.page-skeleton__cta {
width: 230px;
height: 52px;
margin-top: 26px;
border-radius: 28px;
}
.page-skeleton__benefits {
padding: 0 12vw;
}
.page-skeleton__benefit-row {
display: flex;
justify-content: space-between;
margin-top: 28px;
}
.page-skeleton__benefit {
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.page-skeleton__title { width: 37%; height: 38px; margin: 0 0 16px; }
.page-skeleton__title--short { width: 28%; }
.page-skeleton__copy { width: 34%; height: 16px; margin: 10px 0 0; }
.page-skeleton__copy--short { width: 18%; }
.page-skeleton__section-title { width: 31%; height: 30px; margin: 0 auto; }
}
@media (max-width: 767.98px) {
.page-skeleton__nav {
height: 51px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
border-bottom: 1px solid #e8e8e8;
}
.page-skeleton__hero {
padding: 38px 16px 0;
}
.page-skeleton__media {
width: 100%;
height: 53vw;
margin-top: 28px;
}
.page-skeleton__cta {
width: 62%;
height: 52px;
margin: 14px auto 0;
border-radius: 28px;
}
.page-skeleton__benefits {
padding: 28px 16px 0;
}
.page-skeleton__benefit-row {
display: flex;
justify-content: space-between;
margin-top: 24px;
}
.page-skeleton__benefit {
width: 28%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.page-skeleton__title { width: 82%; height: 29px; margin: 0 auto 12px; }
.page-skeleton__title--short { width: 66%; }
.page-skeleton__copy { width: 90%; height: 15px; margin: 8px auto 0; }
.page-skeleton__copy--short { width: 42%; }
.page-skeleton__section-title { width: 72%; height: 27px; margin: 0 auto; }
}
.set-skeleton__hero { display: flex; width: min(1200px, 100%); margin: 0 auto; }
.set-skeleton__details { display: flex; flex-direction: column; gap: 16px; }
.set-skeleton__heading { width: 92%; height: 36px; }
.set-skeleton__heading--short { width: 67%; }
.set-skeleton__description { width: 82%; height: 17px; }
.set-skeleton__description--short { width: 58%; }
.set-skeleton__price { width: 44%; height: 30px; margin-top: 12px; }
.set-skeleton__button { width: 64%; height: 52px; border-radius: 28px; }
.set-skeleton__covers { position: relative; height: 390px; }
.set-skeleton__cover { position: absolute; top: 42px; width: 42%; height: 270px; border-radius: 5px; }
.set-skeleton__cover--left { left: 0; transform: rotate(-12deg); }
.set-skeleton__cover--center { left: 29%; top: 14px; z-index: 1; }
.set-skeleton__cover--right { right: 0; transform: rotate(12deg); }
.set-skeleton__books { width: min(1100px, 100%); margin: 0 auto; }
.set-skeleton__section-heading { width: 32%; height: 28px; margin: 0 auto 25px; }
.set-skeleton__book-row { display: flex; justify-content: space-between; gap: 24px; }
.set-skeleton__book { width: 22%; height: 220px; border-radius: 5px; }
@media (min-width: 768px) {
.set-skeleton__hero { min-height: 570px; align-items: center; padding: 30px 5vw; gap: 4%; }
.set-skeleton__details, .set-skeleton__covers { width: 48%; }
.set-skeleton__books { padding: 0 5vw; }
}
@media (max-width: 767.98px) {
.set-skeleton__hero { flex-direction: column; padding: 32px 16px 0; }
.set-skeleton__details { gap: 11px; }
.set-skeleton__heading { width: 88%; height: 27px; }
.set-skeleton__heading--short { width: 62%; }
.set-skeleton__description { height: 15px; }
.set-skeleton__price { height: 24px; margin-top: 3px; }
.set-skeleton__button { width: 75%; height: 48px; margin: 4px auto 0; }
.set-skeleton__covers { width: min(100%, 390px); height: 265px; margin: 18px auto 0; }
.set-skeleton__cover { top: 35px; height: 190px; }
.set-skeleton__cover--center { top: 12px; }
.set-skeleton__books { padding: 0 16px; }
.set-skeleton__section-heading { width: 70%; height: 24px; }
.set-skeleton__book-row { gap: 12px; }
.set-skeleton__book { width: 30%; height: 145px; }
.set-skeleton__book:nth-child(4) { display: none; }
}
@keyframes page-skeleton-shimmer {
0% { background-position: 100% 0; }
100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.page-skeleton__block { animation: none; }
}