diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index d1fb418..f895fa3 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1896,27 +1896,68 @@ input[type="date"] { color-scheme: light; }
* shifted — atmospheric, not blown out. */
.cybersigil body::after,
html.cybersigil body::after {
- opacity: 0.4;
+ opacity: 0.46;
background-image:
- url("data:image/svg+xml;utf8,"),
+ url("data:image/svg+xml;utf8,"),
+ url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0,
- rgba(0, 0, 0, 0) 2px,
- rgba(0, 0, 0, 0.34) 3px,
- rgba(0, 0, 0, 0) 4px
+ rgba(0, 0, 0, 0) 3px,
+ rgba(0, 0, 0, 0.18) 4px,
+ rgba(0, 0, 0, 0) 5px
);
+ background-size: 200px 200px, 760px 760px, auto;
mix-blend-mode: screen;
}
-/* Glow pools — ice-cyan + bruised magenta, large + faint. Moody, not lit. */
+/* Sigil overgrowth — hand-drawn thorny vine sigils bleeding in from two
+ * corners like ink taking over the page. Not a glow, not a HUD: organic
+ * chaos. ::before = cyan primary, ::after = magenta chromatic ghost on a
+ * different drift phase (modern-breakcore RGB tear on a living form). */
+.cybersigil .salon-atmosphere::before,
+.cybersigil .salon-atmosphere::after {
+ border-radius: 0;
+ -webkit-mask: var(--cs-growth) no-repeat;
+ mask: var(--cs-growth) no-repeat;
+}
.cybersigil .salon-atmosphere::before {
+ width: 78vmin;
+ height: 78vmin;
+ top: auto;
+ left: auto;
+ right: -16vmin;
+ bottom: -14vmin;
background: var(--sky);
- opacity: 0.07;
+ opacity: 0.16;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ filter: drop-shadow(0 0 9px color-mix(in srgb, var(--sky) 45%, transparent));
+ transform: rotate(2deg);
+ animation: cs-drift-a 34s ease-in-out infinite alternate;
}
.cybersigil .salon-atmosphere::after {
+ width: 64vmin;
+ height: 64vmin;
+ top: -18vmin;
+ left: -15vmin;
+ right: auto;
+ bottom: auto;
background: var(--mauve);
- opacity: 0.06;
+ opacity: 0.12;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ filter: drop-shadow(0 0 11px color-mix(in srgb, var(--mauve) 42%, transparent));
+ transform: scaleX(-1) rotate(-7deg) translate(3px, -2px);
+ animation: cs-drift-b 41s ease-in-out infinite alternate;
+}
+@keyframes cs-drift-a {
+ from { transform: rotate(2deg) translate(0, 0) scale(1); }
+ to { transform: rotate(-3deg) translate(-2.4vmin, 1.6vmin) scale(1.05); }
+}
+@keyframes cs-drift-b {
+ from { transform: scaleX(-1) rotate(-7deg) translate(3px, -2px) scale(1); }
+ to { transform: scaleX(-1) rotate(-1deg) translate(1.8vmin, 1.4vmin) scale(1.07); }
}
/* Selection — magenta block, bone text, cyan bleed. */
@@ -1993,26 +2034,31 @@ html.cybersigil body::after {
.cybersigil .plate::after {
content: "";
position: absolute;
- width: 26px;
- height: 26px;
- border: 1.5px solid color-mix(in srgb, var(--sky) 70%, transparent);
- filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sky) 45%, transparent));
+ background-color: color-mix(in srgb, var(--sky) 80%, transparent);
+ -webkit-mask: var(--cs-sprout) no-repeat;
+ mask: var(--cs-sprout) no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
pointer-events: none;
- transition: border-color 0.18s ease, filter 0.18s ease;
+ filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sky) 40%, transparent));
+ transition: background-color 0.22s ease, filter 0.22s ease, transform 0.22s ease;
+ z-index: 1;
}
.cybersigil .plate::before {
- top: -1px;
- left: -1px;
- border-right: 0;
- border-bottom: 0;
- clip-path: polygon(0 0, 100% 0, 100% 20%, 32% 20%, 32% 100%, 0 100%);
+ width: 78px;
+ height: 78px;
+ top: -10px;
+ left: -10px;
+ transform-origin: top left;
}
.cybersigil .plate::after {
- right: -1px;
- bottom: -1px;
- border-left: 0;
- border-top: 0;
- clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%, 68% 80%, 68% 0);
+ width: 52px;
+ height: 52px;
+ right: -8px;
+ bottom: -8px;
+ transform: scale(-1);
+ transform-origin: bottom right;
+ opacity: 0.7;
}
.cybersigil .plate:hover {
transform: translateY(-3px);
@@ -2022,10 +2068,15 @@ html.cybersigil body::after {
0 32px 60px -28px rgba(200, 50, 122, 0.42),
0 0 34px -8px color-mix(in srgb, var(--mauve) 48%, transparent);
}
-.cybersigil .plate:hover::before,
+.cybersigil .plate:hover::before {
+ background-color: var(--mauve);
+ filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mauve) 60%, transparent));
+ transform: scale(1.14) rotate(-3deg);
+}
.cybersigil .plate:hover::after {
- border-color: var(--mauve);
- filter: drop-shadow(0 0 7px color-mix(in srgb, var(--mauve) 60%, transparent));
+ background-color: var(--mauve);
+ filter: drop-shadow(0 0 7px color-mix(in srgb, var(--mauve) 55%, transparent));
+ transform: scale(-1.12) rotate(2deg);
}
.cybersigil .plate:focus-visible {
box-shadow:
@@ -2080,7 +2131,18 @@ html.cybersigil body::after {
linear-gradient(135deg, color-mix(in srgb, var(--sky) 40%, var(--surface2)), color-mix(in srgb, var(--mauve) 40%, var(--surface1))) border-box;
}
-/* Section rule — masked barbed sigil glyph between cyan→magenta filaments. */
+/* Hand-authored cybersigil artwork — thorny asymmetric vine sigils (flowing
+ * spine strokes + tapered filled barbs). Used as page overgrowth, card
+ * sprouts, and the barbed divider line. Painted white; tinted per-surface
+ * via mask + background-color. */
+.cybersigil {
+ --cs-growth: url("data:image/svg+xml;utf8,");
+ --cs-sprout: url("data:image/svg+xml;utf8,");
+ --cs-barbline: url("data:image/svg+xml;utf8,");
+}
+
+/* Section rule — barbed sigil filament (organic, irregular) flanking a mono
+ * label. The ornament is a single sharp mark, not an icon. */
.cybersigil .section-rule {
color: var(--sky);
font-family: var(--font-mono);
@@ -2091,27 +2153,20 @@ html.cybersigil body::after {
}
.cybersigil .section-rule::before,
.cybersigil .section-rule::after {
- height: 1px;
- opacity: 0.9;
- background: linear-gradient(
- to right,
- transparent,
- color-mix(in srgb, var(--sky) 75%, transparent) 45%,
- color-mix(in srgb, var(--mauve) 75%, transparent) 55%,
- transparent
- );
+ height: 14px;
+ background: transparent;
+ background-color: color-mix(in srgb, var(--sky) 78%, var(--mauve) 22%);
+ -webkit-mask: var(--cs-barbline) repeat-x center / 220px 100%;
+ mask: var(--cs-barbline) repeat-x center / 220px 100%;
+ opacity: 0.75;
}
.cybersigil .section-rule .ornament {
color: transparent;
- width: 1.1em;
- height: 1.1em;
+ width: 0.5em;
+ height: 0.5em;
background-color: var(--sky);
- -webkit-mask: var(--cs-sigil) center / contain no-repeat;
- mask: var(--cs-sigil) center / contain no-repeat;
- filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sky) 60%, transparent));
-}
-.cybersigil {
- --cs-sigil: url("data:image/svg+xml;utf8,");
+ clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
+ filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sky) 65%, transparent));
}
/* Readability — lift dim-on-near-black copy spots to the subtext ramp. */
@@ -2213,9 +2268,6 @@ html.cybersigil body::after {
/* Back-link → sigil-marked neon return tab. */
.cybersigil .back-link {
- display: inline-flex;
- align-items: center;
- gap: 0.5em;
font-family: var(--font-mono);
font-style: normal;
font-size: 0.7rem;
@@ -2228,16 +2280,6 @@ html.cybersigil body::after {
box-shadow: 3px 3px 0 0 var(--mauve);
text-shadow: 0 0 6px color-mix(in srgb, var(--sky) 50%, transparent);
}
-.cybersigil .back-link::before {
- content: "";
- width: 0.95em;
- height: 0.95em;
- flex: none;
- background-color: currentColor;
- -webkit-mask: var(--cs-sigil) center / contain no-repeat;
- mask: var(--cs-sigil) center / contain no-repeat;
- transform: rotate(-90deg);
-}
.cybersigil .back-link:hover,
.cybersigil .back-link:focus-visible {
color: var(--crust);
@@ -2333,18 +2375,23 @@ html.cybersigil body::after {
padding: 0.5rem 0 0.5rem 1.4rem;
}
.cybersigil .prose hr {
- height: 3px;
- opacity: 0.9;
- background: repeating-linear-gradient(
+ height: 16px;
+ border: 0;
+ opacity: 0.85;
+ background: linear-gradient(
90deg,
- var(--sky) 0 12px,
- var(--mauve) 12px 24px
+ transparent,
+ var(--sky) 22%,
+ var(--mauve) 78%,
+ transparent
);
- box-shadow: 0 0 12px color-mix(in srgb, var(--sky) 42%, transparent);
+ -webkit-mask: var(--cs-barbline) repeat-x center / 220px 100%;
+ mask: var(--cs-barbline) repeat-x center / 220px 100%;
+ box-shadow: none;
+ filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sky) 40%, transparent));
}
.cybersigil .prose hr::before {
- background: var(--sky);
- box-shadow: 0 0 8px var(--sky);
+ display: none;
}
.cybersigil .prose h3 { color: var(--pink); }
.cybersigil .prose h4 { color: var(--teal); }