better cybersigilism
This commit is contained in:
+112
-65
@@ -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,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.31 0 0 0 0 0.91 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.31 0 0 0 0 0.91 0 0 0 0 1 0 0 0 0.42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.011 0.02' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.32 0 0 0 0 0.38 0 0 0 0.11 0'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>"),
|
||||
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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><path d='M30,285 C70,250 55,215 100,188 C150,158 120,120 175,96 C225,74 205,46 250,28 M100,188 C95,160 110,150 140,138 C160,130 168,116 170,98 M175,96 C190,108 210,104 232,112' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/><path d='M100,188 C78,176 60,170 44,150 C66,168 84,176 102,192 Z M175,96 C196,84 214,84 236,72 C214,90 196,98 177,100 Z M140,138 C128,118 124,100 122,78 C136,98 146,116 152,134 Z M250,28 C262,44 280,46 296,40 C280,54 264,52 250,42 Z M64,238 C46,228 36,214 26,196 C42,216 54,230 70,244 Z M205,46 C220,34 238,32 256,22 C238,40 222,46 207,50 Z' fill='%23fff'/></svg>");
|
||||
--cs-sprout: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M4,4 C24,14 30,30 34,52 C36,66 44,78 60,90' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/><path d='M30,30 C18,22 12,12 8,2 C20,12 30,20 36,34 Z M34,52 C50,46 60,46 74,40 C58,54 46,58 34,60 Z M48,76 C40,62 38,52 38,40 C48,54 54,64 56,74 Z' fill='%23fff'/></svg>");
|
||||
--cs-barbline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'><path d='M0,8 C20,8 26,7 40,8 L48,2 L52,8 C70,9 78,8 96,8 L92,13 L102,8 C120,7 134,9 150,8 L158,3 L162,8 C182,8 196,7 210,8 L206,12 L214,8 C226,8 232,8 240,8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/></svg>");
|
||||
}
|
||||
|
||||
/* 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'><path d='M12 1 L12 23 M12 1 L9 4 M12 1 L15 4 M12 7 L7 10 M12 7 L17 10 M12 13 L8.5 16 M12 13 L15.5 16'/></svg>");
|
||||
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); }
|
||||
|
||||
Reference in New Issue
Block a user