feat: the full brand mark as a faint backdrop behind every page
CI / lint (push) Successful in 2s
CI / extension-version (push) Successful in 2s
Build images / sign-extension (push) Successful in 4s
Build images / build-agent (push) Successful in 5s
Build images / build-ml (push) Successful in 6s
CI / frontend-build (push) Successful in 22s
CI / backend-lint-and-test (push) Successful in 31s
Build images / build-web (push) Successful in 1m9s
Build images / smoke-web (push) Skipped
Build images / promote (push) Skipped
CI / integration (push) Successful in 2m36s

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
This commit is contained in:
2026-09-13 15:58:40 -04:00
co-authored by Claude Opus 5
parent dd766eb976
commit 57c880a623
+16
View File
@@ -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