feat: add alpha preview brand badge

frontend/src/static/components/LandingSiteMenu.vue

@@ -6,7 +6,17 @@
                 to="/"
             >
                 <span class="site-brand-mark">S</span>
-                <span class="site-brand-text">Socialize</span>
+                <span class="site-brand-heading">
+                    <span class="site-brand-text-wrap">
+                        <span class="site-brand-text">Socialize</span>
+                        <span
+                            class="site-brand-stage-badge"
+                            :aria-label="t('nav.brandStageLabel')"
+                        >
+                            <span>{{ t('nav.brandStage') }}</span>
+                        </span>
+                    </span>
+                </span>
             </router-link>
 
             <nav
@@ -262,7 +272,7 @@
     }
 
     .site-brand {
-        @apply flex min-w-0 items-center gap-3 no-underline;
+        @apply flex min-w-0 items-start gap-3 no-underline;
         color: #172033;
     }
 
@@ -272,8 +282,27 @@
         color: #fffaf2;
     }
 
+    .site-brand-heading {
+        @apply flex min-w-0 items-center;
+    }
+
+    .site-brand-text-wrap {
+        @apply relative inline-flex min-w-0 items-center;
+    }
+
     .site-brand-text {
         @apply truncate text-lg font-black uppercase tracking-[0.18em];
+        line-height: 2.5rem;
+    }
+
+    .site-brand-stage-badge {
+        @apply absolute inline-flex h-4 items-center rounded-sm border px-1.5 text-[0.55rem] font-black uppercase tracking-[0.08em];
+        background: rgba(255, 231, 199, 0.46);
+        border-color: rgba(242, 179, 107, 0.38);
+        color: #925000;
+        left: 0;
+        line-height: 1;
+        top: calc(100% - 0.45rem);
     }
 
     .site-nav {
@@ -390,7 +419,7 @@
     }
 
     @media (max-width: 420px) {
-        .site-brand-text {
+        .site-brand-heading {
             @apply hidden;
         }