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); }