/* =========================================== theme-corrupted.css Used from Act 3 onward. The "Verona Gazette" look is still recognizable underneath, but degraded: desaturated, scanlines, jittery headlines. Apply class "decay-2" (Act 3) or "decay-3" (Act 4) to to control how far gone it is. =========================================== */ :root { --paper-dead: #d8d2c4; --ink-dead: #0c0c0c; --accent-blood: #7a0d0d; --rule-dead: #3a3a3a; } body.theme-corrupted { background-color: #1b1b1b; color: var(--ink-dead); position: relative; } /* Scanline overlay, like a dying CRT/Flash player */ body.theme-corrupted::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50; background: repeating-linear-gradient( to bottom, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 3px ); mix-blend-mode: multiply; } body.theme-corrupted .page { background: var(--paper-dead); filter: saturate(0.55) contrast(1.05); } /* decay-2 = Act 3: cracking, but still readable */ body.decay-2 .page { filter: saturate(0.45) contrast(1.1) sepia(0.15); } /* decay-3 = Act 4: badly degraded */ body.decay-3 .page { filter: saturate(0.25) contrast(1.2) brightness(0.92); } body.decay-3::before { background-size: 100% 2px; opacity: 0.9; } .masthead.dead h1 { font-family: 'Times New Roman', serif; font-size: 3.2rem; letter-spacing: 2px; color: var(--ink-dead); position: relative; } /* Chromatic-aberration-ish glitch text, toggled by glitch-effects.js */ .glitchable { position: relative; display: inline-block; } .glitchable.glitch-tick { animation: glitchTick 0.15s steps(2, end); } @keyframes glitchTick { 0% { transform: translate(0,0); text-shadow: none; } 30% { transform: translate(-2px, 1px); text-shadow: -2px 0 var(--accent-blood), 2px 0 #1d6e6e; } 60% { transform: translate(2px, -1px); text-shadow: 2px 0 var(--accent-blood), -2px 0 #1d6e6e; } 100% { transform: translate(0,0); text-shadow: none; } } /* Images get a brief "tracking error" jump when glitch-effects.js ticks them */ .glitchable-img.glitch-tick { animation: imgGlitchTick 0.18s steps(3, end); filter: hue-rotate(15deg) contrast(1.3); } @keyframes imgGlitchTick { 0% { clip-path: inset(0 0 0 0); transform: translateX(0); } 33% { clip-path: inset(10% 0 40% 0); transform: translateX(-6px); } 66% { clip-path: inset(60% 0 5% 0); transform: translateX(6px); } 100% { clip-path: inset(0 0 0 0); transform: translateX(0); } } .story-body.dead p { color: #1a1a1a; } .pull-quote.dead { border-color: var(--accent-blood); color: var(--accent-blood); } .act-nav a.dead { background: var(--accent-blood); border-color: #000; } /* "Click to look closer" image hotspots used in Act 4 */ .look-closer { cursor: pointer; position: relative; } .look-closer::after { content: 'look closer'; position: absolute; bottom: 6px; right: 6px; font-size: 0.7rem; background: rgba(0,0,0,0.6); color: #fff; padding: 2px 6px; letter-spacing: 1px; text-transform: uppercase; }