/* * Support styles for member profile pages, scoped via the Twig template body * class and loaded through the extensions registry. */ /* Tighten the About table rows toward the mockup spacing. */ .twig_default-member-profile .box--profile-fields .table__row { padding-top: 0.125rem; padding-bottom: 0.125rem; } /* Guest field gate holding state, set on during head parse. Script-only, so with JS off the attribute is absent and the server's rows render as sent. */ [data-apn-fields="pending"] .twig_default-member-profile .box--profile-fields .table__row { display: none; } /* Skeleton stand-in: three bars, sized to the shortest real table. currentColor keeps it correct in either theme without depending on token scope. */ [data-apn-fields="pending"] .twig_default-member-profile .box--profile-fields .profile-fields::after { content: ""; display: block; height: 4.5rem; margin-top: 0.5rem; border-radius: 3px; background-image: repeating-linear-gradient( to bottom, currentColor 0, currentColor 0.75rem, transparent 0.75rem, transparent 1.5rem ); opacity: 0.18; animation: apn-fields-pulse 1.2s ease-in-out infinite; } @keyframes apn-fields-pulse { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.24; } } /* Rows fade in once the gate has run, so the resolved table doesn't snap in. */ [data-apn-fields="ready"] .twig_default-member-profile .box--profile-fields .table__row { animation: apn-fields-reveal 0.18s ease-out both; } @keyframes apn-fields-reveal { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { [data-apn-fields="pending"] .twig_default-member-profile .box--profile-fields .profile-fields::after, [data-apn-fields="ready"] .twig_default-member-profile .box--profile-fields .table__row { animation: none; } }