From f487bb2d95d2a23c69992c7804aa4064b0b3cbe9 Mon Sep 17 00:00:00 2001
From: Jon <git@jonstarkey.co.uk>
Date: Mon, 13 Jul 2026 23:46:02 +0100
Subject: [PATCH] Fix drone dark mode regression and add devkit video
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Apply filter:invert(1) to the SVG element directly instead of the wrapper div,
  with explicit background:#000 on the container in dark mode — more reliable than
  inverting the whole div and avoids edge cases with the white background trick
- Replace devkits img-slot placeholder with droneRun.webm autoplay loop video

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 6 +++---
 style.css  | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index a77b547..86dea05 100644
--- a/index.html
+++ b/index.html
@@ -280,9 +280,9 @@
             <a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit</a>
           </div>
         </div>
-        <div class="img-slot" style="height:clamp(360px,42vw,520px);" role="img" aria-label="Devkit photo">
-          Drop a devkit / PCB photo here
-        </div>
+        <video style="width:100%;height:clamp(360px,42vw,520px);object-fit:cover;border-radius:22px;display:block;" autoplay muted loop playsinline>
+          <source src="droneRun.webm" type="video/webm">
+        </video>
       </div>
     </div>
   </section>
diff --git a/style.css b/style.css
index 24bf019..540fdee 100644
--- a/style.css
+++ b/style.css
@@ -257,7 +257,8 @@ img { display: block; max-width: 100%; }
   height: clamp(360px, 48vw, 640px);
 }
 
-html.dark .drone-vision-bg { filter: invert(1); }
+html.dark .drone-vision-bg { background: #000; }
+html.dark .drone-vision-bg svg { filter: invert(1); }
 
 .hero-caps-strip {
   background: rgba(255,255,255,0.86);