.legal-section { padding: 80px; max-width: 960px; margin: 0 auto; } /* While legal copy is fetched async from the API, fill the content area and center the loading spinner within that white space (between header and footer) instead of cramping it into a short empty strip above the footer. */ html:not(.loaded) .legal-section { min-height: calc(100vh - 220px); display: flex; align-items: center; justify-content: center; } /* Re-home the loader from into the content area so it sits dead-center of the white space regardless of header/footer heights. */ html:not(.loaded) body::before { display: none; } html:not(.loaded) .legal-section::before { content: ""; width: 24px; height: 24px; border-radius: 100%; animation: load-spin ease infinite 3s; box-shadow: 8px 8px var(--primary-color-ih), -8px 8px #dfdfdf, -8px -8px var(--primary-color-ih), 8px -8px #dfdfdf; } /* Hide the empty .text-template box (border + padding pill) while loading so only the centered spinner is visible. */ html:not(.loaded) .text-template { border: 0; padding: 0; } @media (max-width: 991px) { .legal-section { padding: 48px 24px; } } .legal-section .page-title { font-size: 32px; font-weight: 600; line-height: 40px; letter-spacing: -0.4px; color: var(--text-primary); margin: 0; } .legal-section .page__descr { font-size: 14px; line-height: 20px; color: var(--text-secondary); margin: 8px 0 0; }