From 44d8b2d5335fe570bd54bbf0c4b2cd2b0cc38ca9 Mon Sep 17 00:00:00 2001
From: sHa <sha@shadoll.dev>
Date: Sun, 22 Feb 2026 00:22:09 +0200
Subject: [PATCH] feat: update mobile theme color for status bar and apply
 gradient to root element

---
 index.html              | 2 +-
 src/styles/gradient.css | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 4fc8c0b..637ec4b 100644
--- a/index.html
+++ b/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" />
diff --git a/src/styles/gradient.css b/src/styles/gradient.css
index 61331e9..f7fac4e 100644
--- a/src/styles/gradient.css
+++ b/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%,