/* The scanline texture, painted by the `crt` class all three layouts put on . Both overlays are fixed over the whole viewport at a z-index far above the scale in 01-settings, so no component can paint over the texture, and both are pointer-events: none, so nothing under them loses a click. Nothing else in the tree refers to them: a page opts out with is-flat below. */ .crt { position: relative; } /* Multiply, so the scanlines darken the rows they fall on rather than tinting them, and lighter than the amber-bloom version this was taken from: the text under it is gray and has no glow to carry a heavier one. */ .crt::before { content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0, transparent 2px, rgba(0, 0, 0, 0.28) 3px, rgba(0, 0, 0, 0.28) 3px ); background-size: 100% 3px; mix-blend-mode: multiply; } .crt::after { content: ""; position: fixed; inset: 0; z-index: 9001; pointer-events: none; background: radial-gradient(125% 125% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.45) 100%); } /* A page drops the texture by setting content_for(:body_class) to "is-flat", which the layouts append to the crt class — the escape a dense reading page needs. */ .crt.is-flat::before, .crt.is-flat::after { display: none; } @media (prefers-reduced-motion: reduce) { .crt::after { animation: none; } }