split global.css

2026-05-17 14:44:45 +02:00
parent ac99cc724a
commit 93fdb8d1fc
19 changed files with 3605 additions and 3397 deletions
@@ -0,0 +1,105 @@
+/* Paper grain — applied as a fixed overlay so every page gets the texture.
+ * All three layers sit behind content (negative z-index) so fixed-positioned
+ * modals (e.g. the search palette) can escape ancestor stacking traps. */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -3;
+  background-color: var(--base);
+}
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 0.32;
+  mix-blend-mode: multiply;
+  background-image:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0 0.04 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+}
+.salon-noir body::after,
+html.salon-noir body::after {
+  opacity: 0.5;
+}
+.gothic body::after,
+html.gothic body::after {
+  opacity: 0.55;
+  background-image:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0 0.10 0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+  mix-blend-mode: screen;
+}
+/* Breakcore: blown-out RGB-tinted digital noise + CRT scanlines. */
+.breakcore body::after,
+html.breakcore body::after {
+  opacity: 0.55;
+  background-image:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.18 0 0 0 0 0.65 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
+    repeating-linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 0) 2px,
+      rgba(0, 0, 0, 0.28) 3px,
+      rgba(0, 0, 0, 0) 4px
+    );
+  mix-blend-mode: screen;
+}
+.breakcore .salon-atmosphere::before { opacity: 0.32; }
+.breakcore .salon-atmosphere::after { opacity: 0.28; }
+
+/* Floating motes of pigment — far background, very subtle. */
+.salon-atmosphere {
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  pointer-events: none;
+  overflow: hidden;
+}
+.salon-atmosphere::before,
+.salon-atmosphere::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0.18;
+}
+.salon-atmosphere::before {
+  width: 55vw; height: 55vw;
+  top: -15vw; left: -10vw;
+  background: var(--mauve);
+}
+.salon-atmosphere::after {
+  width: 45vw; height: 45vw;
+  bottom: -10vw; right: -10vw;
+  background: var(--blue);
+  opacity: 0.12;
+}
+
+code, pre, kbd, samp {
+  font-family: var(--font-mono);
+}
+
+/* Selection */
+::selection {
+  background: var(--mauve);
+  color: var(--rosewater);
+}
+
+/* Breakcore: chromatic-aberration glow on display headings + nameplate. */
+.breakcore .prose h1,
+.breakcore .prose h2,
+.breakcore h1.font-display,
+.breakcore .nameplate-title {
+  text-shadow:
+    -1px 0 0 color-mix(in srgb, var(--teal) 70%, transparent),
+    1px 0 0 color-mix(in srgb, var(--mauve) 70%, transparent),
+    0 0 18px color-mix(in srgb, var(--mauve) 35%, transparent);
+}
+.breakcore ::selection {
+  background: var(--green);
+  color: var(--crust);
+  text-shadow: 0 0 6px var(--mauve);
+}
+