website: fade badges iframe in, no load flash

website/src/badges.html

@@ -54,7 +54,16 @@ templateEngineOverride: njk
         /* The frame sits under the fixed navbar (the app pads its own top to clear it) and is sized
            to its content by the app's height messages, so the page — not the frame — scrolls, and
            the footer follows naturally. 100vh is only the size before the first message arrives. */
-        #badges-frame { display: block; width: 100%; height: 100vh; border: 0; }
+        #badges-frame {
+            display: block; width: 100%; height: 100vh; border: 0;
+            /* An empty frame paints transparent-dark before its document loads, and the app's own
+               ground flashes before the site hands in its colour. Give the frame the page's own
+               background so any gap reads as the site, and fade the app in once it is sized and
+               themed, so neither flash is seen. */
+            background: #F3FAFF;
+            opacity: 0; transition: opacity .25s ease;
+        }
+        html.dark #badges-frame { background: #000832; }
         @media (max-width: 640px) { .b-links { gap: 24px; } }
     </style>
 </head>
@@ -103,6 +112,10 @@ templateEngineOverride: njk
             function post(msg) { try { frame.contentWindow.postMessage(msg, APP); } catch (e) { /* not ready */ } }
             function postRoute() { post({ type: "simplex-route", hash: location.hash }); }
             function postColors() { post({ type: "simplex-colors", bg: siteBg() }); }
+            function reveal() { frame.style.opacity = "1"; }
+            // Fallback: reveal even if the app never posts a height (an older deploy), so the frame
+            // can never stay invisible. The first height message reveals it sooner, once themed.
+            frame.addEventListener("load", function () { setTimeout(reveal, 400); });
 
             // Buy a code / Your codes are hash links; changing the hash — from a click or from the
             // address bar — is what carries the route into the frame.
@@ -121,6 +134,7 @@ templateEngineOverride: njk
                 // The frame reports its content height; size it so the site's page scrolls, not the frame.
                 if (e.data.type === "simplex-height" && typeof e.data.height === "number") {
                     frame.style.height = Math.max(0, e.data.height) + "px";
+                    reveal();
                 }
             });