From 8554f04735a8a4fe1650d1f82e5f221a2858013b Mon Sep 17 00:00:00 2001
From: Frank <frank.van.den.berg@eleaf.com>
Date: Sat, 4 Jul 2026 23:02:46 +0200
Subject: [PATCH] Add "In Development" watermark badge over AI virus artwork

Overlay a rotated CSS badge on the homepage hero and briefing page
image instead of baking it into the PNG, so it's easy to remove once
the game ships.
---
 templates/website/home/index.html.twig | 27 +++++++++++++++++++++++++-
 templates/website/home/intro.html.twig | 27 +++++++++++++++++++++++++-
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/templates/website/home/index.html.twig b/templates/website/home/index.html.twig
index 85713d7..4b58401 100644
--- a/templates/website/home/index.html.twig
+++ b/templates/website/home/index.html.twig
@@ -22,6 +22,28 @@
             0%, 100% { opacity: 1; }
             50% { opacity: .35; }
         }
+        .dev-watermark-wrap {
+            position: relative;
+            display: inline-block;
+        }
+        .dev-watermark-badge {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(-12deg);
+            background: rgba(220, 53, 69, .85);
+            color: #fff;
+            font-weight: 800;
+            letter-spacing: .12em;
+            text-transform: uppercase;
+            padding: .35rem 1.25rem;
+            border: 2px solid rgba(255, 255, 255, .85);
+            border-radius: .25rem;
+            font-size: .9rem;
+            white-space: nowrap;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
+            pointer-events: none;
+        }
     </style>
 {% endblock %}
 
@@ -42,7 +64,10 @@
             </div>
         </div>
         <div class="col-lg-5 text-center">
-            <img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 260px;">
+            <div class="dev-watermark-wrap">
+                <img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 260px;">
+                <span class="dev-watermark-badge">In Development</span>
+            </div>
         </div>
     </div>
 </div>
diff --git a/templates/website/home/intro.html.twig b/templates/website/home/intro.html.twig
index 3efbeac..fc72133 100644
--- a/templates/website/home/intro.html.twig
+++ b/templates/website/home/intro.html.twig
@@ -30,6 +30,28 @@
             color: var(--brand-teal-light, #6fb8d1);
             padding-right: .1em;
         }
+        .dev-watermark-wrap {
+            position: relative;
+            display: inline-block;
+        }
+        .dev-watermark-badge {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(-12deg);
+            background: rgba(220, 53, 69, .85);
+            color: #fff;
+            font-weight: 800;
+            letter-spacing: .12em;
+            text-transform: uppercase;
+            padding: .35rem 1.25rem;
+            border: 2px solid rgba(255, 255, 255, .85);
+            border-radius: .25rem;
+            font-size: .9rem;
+            white-space: nowrap;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
+            pointer-events: none;
+        }
     </style>
 {% endblock %}
 
@@ -46,7 +68,10 @@
             </div>
 
             <div class="text-center mb-4">
-                <img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 220px;">
+                <div class="dev-watermark-wrap">
+                    <img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 220px;">
+                    <span class="dev-watermark-badge">In Development</span>
+                </div>
             </div>
 
             <div class="briefing-body">