/* * Anti-FOUC (flash of unstyled content) styles. * * This stylesheet is linked render-blocking in the document (served from * the same origin, so it satisfies the strict production CSP that disallows * inline styles). It keeps the app shell hidden until the main bundled * stylesheet has loaded and the React app has mounted, at which point app code * adds the `app-ready` class to and the content fades in cleanly. * * Without this, on a cold/incognito load the raw "Make Industry" logo markup * could paint in the top-left corner in an unstyled state for a split second * before the JS-loaded styles applied. * * Failsafe: #root also runs a zero-duration, delayed animation that forces it * visible after a few seconds. This guarantees the page can never get stuck * permanently blank if JS is disabled, the bundle fails to load, or a runtime * error happens before `app-ready` is set. In production the main stylesheet is * a render-blocking , so even a failsafe reveal shows fully styled * content. */ #root { opacity: 0; animation: fouc-failsafe-reveal 0s linear 5s forwards; } @keyframes fouc-failsafe-reveal { to { opacity: 1; } } html.app-ready #root { opacity: 1; animation: none; transition: opacity 0.15s ease-in; } @media (prefers-reduced-motion: reduce) { html.app-ready #root { transition: none; } }