/* This file contains all styles for the pre-load skeleton screen. It's controlled by the "is-loading" class on the tag. */ /* This is the shimmer animation */ @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } /* Hide real content while loading. We use 'visibility' so the elements still take up space. */ .is-loading .hero-content h1, .is-loading .hero-content p, .is-loading .hero-content .btn, .is-loading .card h3, .is-loading .card p, .is-loading .card ul, .is-loading .card .price, .is-loading .faq-question { visibility: hidden; } /* Style the card placeholders. We apply the animation directly to the card. */ .is-loading .card { background: var(--surface); position: relative; overflow: hidden; /* Prevent hover effects while loading */ transform: none !important; box-shadow: none !important; } .is-loading .card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: shimmer 1.5s linear infinite; /* This gradient creates the moving shine effect */ background: linear-gradient(to right, transparent 8%, rgba(255, 255, 255, 0.05) 18%, transparent 33% ); background-size: 800px 104px; }