feat: update mobile theme color for status bar and apply gradient to root element

index.html

@@ -7,7 +7,7 @@
   <title>devpage</title>
   <!-- mobile browser UI theming -->
   <meta name="theme-color" id="themeColorMeta" content="#4d22b3">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-status-bar-style" content="#4d22b3">
 
   <!-- Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />

src/styles/gradient.css

@@ -29,7 +29,10 @@
 }
 
 /* ── Background application ──────────────────────────────── */
-body {
+html, body {
+  /* apply the gradient to the root element as well so the
+     translucent iOS bars always show a matching colour even
+     when the page hasn't been scrolled */
   background: linear-gradient(
     var(--gradient-angle),
     var(--color-1)  0%,