106 lines
3.4 KiB
CSS
106 lines
3.4 KiB
CSS
/* 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);
|
|
}
|
|
|