From 57c880a623892d4fca077262e831b1dd66cb1a4e Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 13 Sep 2026 15:58:40 -0400
Subject: [PATCH] feat: the full brand mark as a faint backdrop behind every
 page

The operator asked for one large version of the logo as the site background.
It is pinned to the viewport behind .fc-content at about 6% strength, so it
shows in the gutters and on bare page ground while cards and the nav cover it.
The series reader is immersive, skips the shell, and never draws over it.

It is a layered background (the page colour at 94% over logo.svg), not an
overlay element with opacity. An overlay needs the content z-indexed above it,
which turns every page into one stacking context under the nav's z-index 1000
and can trap an in-page overlay beneath the nav. A background changes nothing
about stacking.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SHQB1YukL3VyvMK8rcbmV9
---
 frontend/src/components/AppShell.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontend/src/components/AppShell.vue b/frontend/src/components/AppShell.vue
index 2123194..24022f6 100644
--- a/frontend/src/components/AppShell.vue
+++ b/frontend/src/components/AppShell.vue
@@ -17,6 +17,22 @@ const route = useRoute()
 
 <style scoped>
 .fc-content {
+  /* The full brand mark as one large, faint backdrop behind every page,
+     pinned to the viewport so content scrolls over it. Opaque surfaces
+     (cards, the nav) cover it; it shows in the gutters and on bare page
+     ground. The series reader is immersive and skips the shell, so reading
+     is never drawn over it.
+
+     Faded by laying the page colour over it at 94%, NOT with `opacity` on an
+     overlay element: an overlay needs this element to be z-indexed above it,
+     which makes all page content one stacking context under the nav and can
+     trap an in-page overlay beneath it. A background changes no stacking.
+     The mark is gold and parchment, close to the text colours, so it has to
+     stay this faint to keep text over it readable. */
+  background:
+    linear-gradient(rgba(var(--v-theme-background), 0.94), rgba(var(--v-theme-background), 0.94)),
+    url('/logo.svg') center / min(88vmin, 1100px) no-repeat;
+  background-attachment: fixed;
   min-height: 100vh;
   /* NO padding-top: the TopNav is position:sticky, so it already reserves its
      own space in the v-app flex column — content flows directly below it. The