/* ================================================================
crt.css — drop-in CRT effect stylesheet
No barrel distortion (removed for performance).
USAGE:
← for chromatic aberration
Override variables per-page after this import:
:root { --crt-blur: 0px; --scanline-opacity: 0.06; }
Classes:
.crt-screen — blur + scanlines + tint + vignette on an element
.crt-chroma — chromatic aberration (requires crt.js)
Apply to whole page:
================================================================ */
:root {
--scanline-opacity: 0.12;
--scanline-size: 3px;
--crt-blur: .8px;
--crt-tint: 0.15;
--crt-vignette: 0.7;
--crt-chroma: 3px; /* used by crt.js */
}
/* ----------------------------------------------------------------
.crt-screen
---------------------------------------------------------------- */
.crt-screen {
position: relative;
overflow: hidden;
filter: blur(var(--crt-blur));
}
/* scanlines */
.crt-screen::before {
content: '';
position: absolute;
inset: 0;
z-index: 9000;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
rgba(0,0,0,var(--scanline-opacity)) 0px,
rgba(0,0,0,var(--scanline-opacity)) var(--scanline-size),
transparent var(--scanline-size),
transparent calc(var(--scanline-size) * 2)
);
}
/* tint + vignette */
.crt-screen::after {
content: '';
position: absolute;
inset: 0;
z-index: 8999;
pointer-events: none;
background:
radial-gradient(
ellipse at center,
transparent 35%,
rgba(0,0,0,calc(var(--crt-vignette) * 0.5)) 70%,
rgba(0,0,0,var(--crt-vignette)) 100%
),
rgba(0,0,0,var(--crt-tint));
}
/* ----------------------------------------------------------------
body.crt-scanlines-global
Puts scanlines over the entire page (fixed, above everything)
---------------------------------------------------------------- */
body.crt-scanlines-global::after {
content: '';
position: fixed;
inset: 0;
z-index: 99999;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
rgba(0,0,0,var(--scanline-opacity)) 0px,
rgba(0,0,0,var(--scanline-opacity)) var(--scanline-size),
transparent var(--scanline-size),
transparent calc(var(--scanline-size) * 2)
);
}
/* ----------------------------------------------------------------
.crt-chroma
CSS-only text-shadow fallback when crt.js is not loaded.
crt.js replaces this with a proper SVG filter.
---------------------------------------------------------------- */
.crt-chroma {
text-shadow:
calc(var(--crt-chroma) * -0.5) 0 0 rgba(255,0,0,0.25),
calc(var(--crt-chroma) * 0.5) 0 0 rgba(0,0,255,0.25);
}