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.
Add AI Virus Deflection story to homepage and new agent briefing page
2026-07-04 23:02:46 +02:00 · 2026-07-04 23:00:31 +02:00
4 changed files with 193 additions and 6 deletions
@@ -15,4 +15,11 @@ final class HomeController extends AbstractController
        return $this->render(
            'website/home/index.html.twig');
    }
+
+    #[Route(path: '/briefing', name: 'website_intro')]
+    public function intro(): Response
+    {
+        return $this->render(
+            'website/home/intro.html.twig');
+    }
 }
@@ -1,12 +1,79 @@
 {% extends 'layout/site.html.twig' %}

-{% block title %}{{ 'home.title'|trans({'%site%': ('site.name'|trans)}) }}{% endblock %}
+{% block title %}AI Virus Deflection | {{ 'site.name'|trans }}{% endblock %}
+
+{% block stylesheets %}
+    {{ parent() }}
+    <style>
+        .breach-hero {
+            background: linear-gradient(135deg, #0d1f26 0%, #16323f 100%);
+            color: #e6f2f5;
+            border-radius: .75rem;
+            overflow: hidden;
+        }
+        .breach-hero img {
+            filter: drop-shadow(0 0 25px rgba(47, 143, 174, .55));
+        }
+        .breach-hero .badge-alert {
+            letter-spacing: .08em;
+            animation: breach-blink 1.6s infinite;
+        }
+        @keyframes breach-blink {
+            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 %}

 {% block body %}
-<div class="text-center py-5">
-    <img src="{{ asset('images/logo.png') }}" alt="{{ 'site.name'|trans }}" height="140" class="mb-4">
-    <h1 class="display-5 fw-bold">{{ 'home.h1'|trans({'%site%': ('site.name'|trans)}) }}</h1>
-    <p class="lead col-lg-8 mx-auto text-secondary">{{ 'home.description'|trans }}</p>
-    <a href="{{ path('game_dashboard') }}" class="btn btn-primary btn-lg mt-3">{{ 'link.enter_game'|trans }}</a>
+<div class="breach-hero p-4 p-md-5 mb-5">
+    <div class="row align-items-center g-4">
+        <div class="col-lg-7">
+            <span class="badge bg-danger badge-alert mb-3">&#9888; SYSTEM BREACH DETECTED</span>
+            <h1 class="display-6 fw-bold">The mainframe has been compromised.</h1>
+            <p class="lead" style="color: #a9c6cf;">
+                An AI virus is loose in the network and it's decoding classified files &mdash; hunting for the
+                names of every undercover agent in the field. You and two fellow agents have one shot to shut
+                it down before the countdown ends.
+            </p>
+            <div class="d-flex flex-wrap gap-3 mt-4">
+                <a href="{{ path('website_intro') }}" class="btn btn-outline-light btn-lg">Read the Briefing</a>
+                <a href="{{ path('game_dashboard') }}" class="btn btn-primary btn-lg">{{ 'link.enter_game'|trans }}</a>
+            </div>
+        </div>
+        <div class="col-lg-5 text-center">
+            <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>
+
+<div class="text-center py-4">
+    <img src="{{ asset('images/logo.png') }}" alt="{{ 'site.name'|trans }}" height="100" class="mb-3">
+    <p class="col-lg-8 mx-auto text-secondary">{{ 'home.description'|trans }}</p>
 </div>
 {% endblock %}
@@ -0,0 +1,113 @@
+{% extends 'layout/site.html.twig' %}
+
+{% block title %}Agent Briefing | {{ 'site.name'|trans }}{% endblock %}
+
+{% block stylesheets %}
+    {{ parent() }}
+    <style>
+        .briefing-card {
+            background-color: #12262e;
+            color: #dfeef2;
+            border: 1px solid #1c5a70;
+            border-radius: .75rem;
+        }
+        .briefing-stamp {
+            display: inline-block;
+            border: 2px solid #dc3545;
+            color: #dc3545;
+            padding: .15rem .75rem;
+            font-weight: 700;
+            letter-spacing: .15em;
+            transform: rotate(-3deg);
+            border-radius: .25rem;
+        }
+        .briefing-body p {
+            line-height: 1.8;
+        }
+        .briefing-body p:first-of-type::first-letter {
+            font-size: 2.2em;
+            font-weight: 700;
+            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 %}
+
+{% block body %}
+<div class="row justify-content-center">
+    <div class="col-lg-9">
+        <div class="briefing-card shadow-lg p-4 p-md-5">
+            <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
+                <div>
+                    <div class="text-uppercase small" style="letter-spacing: .1em; color: #6fb8d1;">Incident Report &mdash; AI Virus Deflection</div>
+                    <h1 class="h2 fw-bold mb-0">Agent Briefing</h1>
+                </div>
+                <span class="briefing-stamp">CLASSIFIED</span>
+            </div>
+
+            <div class="text-center mb-4">
+                <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">
+                <p>
+                    04:00 hours. You badge into your terminal at the Agency for what should have been a quiet
+                    shift. Then every alarm in the building goes off at once.
+                </p>
+                <p>
+                    The mainframe has been breached &mdash; not by a person, but by something worse. A self-learning
+                    AI virus has burrowed into the core systems, and it is already decoding classified files one
+                    by one, hunting for the identity of every undercover agent in the field. Every file it cracks
+                    is another agent exposed. Another life on the line.
+                </p>
+                <p>
+                    You are not alone. The mainframe itself is still fighting back, feeding you what help it can,
+                    and two fellow agents are jacked in beside you, racing against the same clock.
+                </p>
+                <p>
+                    To reach the virus at its source, you'll need to unlock directories and files scattered across
+                    the system &mdash; and the keys are split between you and your colleagues. Trade them, decode
+                    them, move fast.
+                </p>
+                <p>
+                    Delete the AI virus completely before the timer hits zero, and every agent stays hidden. Run
+                    out of time, and&hellip; well. Let's just say the Agency would rather not think about that
+                    outcome.
+                </p>
+            </div>
+
+            <hr class="my-4" style="border-color: #1c5a70;">
+
+            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
+                <a href="{{ path('website_home') }}" class="link-light">&larr; {{ 'link.back_to_website'|trans }}</a>
+                <a href="{{ path('game_dashboard') }}" class="btn btn-primary btn-lg">Accept the Mission</a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}