/* ============================================================================ TOTN Background Enhancement — CSS layer Drop into AFTER your existing styles. All selectors are additive. Zero changes to your existing components. ============================================================================ */ /* -------- Layer stack (fixed behind everything) --------------------------- */ /* Uses z-index:-1 with body { position:relative } so it sits behind ALL descendants of body (regardless of their z-index stacking context) but ABOVE the body's own background color. No changes needed to existing content z-index values. */ html, body { position: relative; } body { background: transparent !important; } html { background: #0a0a12; } .totn-bg-root { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; } /* -------- Layer 1: Paper/dossier grain (SVG data URI, static) ------------- */ .totn-bg-grain { position: absolute; inset: -20%; background-image: url("data:image/svg+xml;utf8,"); background-size: 320px 320px; opacity: 0.055; /* barely there — you feel it, don't see it */ mix-blend-mode: overlay; will-change: transform; } [data-bg-grain="off"] .totn-bg-grain { display: none; } [data-bg-variant="evidence"] .totn-bg-grain { opacity: 0.075; /* warmer paper — swap the fill matrix inline via a second layer */ } [data-bg-variant="evidence"] .totn-bg-grain::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(232,181,58,0.04), transparent 60%); } /* -------- Layer 2: Vignette (subtle depth) -------------------------------- */ .totn-bg-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(160,92,255,0.06), transparent 70%), radial-gradient(ellipse 60% 50% at 90% 80%, rgba(45,226,255,0.04), transparent 70%); } /* -------- Layer 3: Drifting orbs (parallax, JS-driven Y) ------------------ */ .totn-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; will-change: transform; transition: opacity 0.6s ease; } .totn-orb.o1 { width: 520px; height: 520px; left: -8%; top: 10vh; background: radial-gradient(circle, rgba(160,92,255,0.55), transparent 65%); } .totn-orb.o2 { width: 620px; height: 620px; right: -12%; top: 90vh; background: radial-gradient(circle, rgba(45,226,255,0.35), transparent 65%); } .totn-orb.o3 { width: 460px; height: 460px; left: 30%; top: 190vh; background: radial-gradient(circle, rgba(160,92,255,0.40), transparent 65%); } .totn-orb.o4 { width: 380px; height: 380px; right: 15%; top: 280vh; background: radial-gradient(circle, rgba(45,226,255,0.30), transparent 65%); } .totn-orb.o5 { width: 500px; height: 500px; left: -5%; top: 380vh; background: radial-gradient(circle, rgba(160,92,255,0.35), transparent 65%); } /* Variant: signal adds a couple more subtle marks */ [data-bg-variant="signal"] .totn-orb { opacity: 0.35; } [data-bg-variant="signal"] .totn-orb.o1, [data-bg-variant="signal"] .totn-orb.o3, [data-bg-variant="signal"] .totn-orb.o5 { background: radial-gradient(circle, rgba(45,226,255,0.40), transparent 65%); } /* Variant: evidence — one orb becomes warm gold catch-light */ [data-bg-variant="evidence"] .totn-orb.o4 { background: radial-gradient(circle, rgba(232,181,58,0.28), transparent 65%); filter: blur(70px); } [data-bg-variant="evidence"] .totn-orb.o2 { background: radial-gradient(circle, rgba(232,181,58,0.14), transparent 65%); } /* -------- Layer 4: Signal marks (drifting timestamps) — signal variant --- */ .totn-signal-marks { position: absolute; inset: 0; display: none; } [data-bg-variant="signal"] .totn-signal-marks { display: block; } .totn-signal-marks span { position: absolute; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; color: rgba(154,151,184,0.10); animation: totn-drift-up 42s linear infinite; will-change: transform, opacity; } @keyframes totn-drift-up { 0% { transform: translateY(20vh); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-110vh); opacity: 0; } } /* -------- Layer 5: EQ meter (signal variant, left edge) ------------------- */ .totn-eq { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); width: 3px; height: 260px; display: none; flex-direction: column-reverse; gap: 3px; z-index: 2; } [data-bg-variant="signal"] .totn-eq { display: flex; } .totn-eq b { display: block; width: 100%; background: rgba(160,92,255,0.35); border-radius: 1px; animation: totn-eq-pulse 1.2s ease-in-out infinite; } .totn-eq b:nth-child(1) { animation-delay: 0.0s; height: 30%; } .totn-eq b:nth-child(2) { animation-delay: 0.1s; height: 55%; } .totn-eq b:nth-child(3) { animation-delay: 0.2s; height: 40%; } .totn-eq b:nth-child(4) { animation-delay: 0.3s; height: 75%; } .totn-eq b:nth-child(5) { animation-delay: 0.15s; height: 50%; } .totn-eq b:nth-child(6) { animation-delay: 0.4s; height: 65%; } .totn-eq b:nth-child(7) { animation-delay: 0.05s; height: 45%; } .totn-eq b:nth-child(8) { animation-delay: 0.35s; height: 60%; } @keyframes totn-eq-pulse { 50% { transform: scaleY(0.55); opacity: 0.7; } } /* -------- Layer 6: Section headline spotlights (added via JS) ------------- */ /* Injected as ::before on each
whose id is known. Positioned behind the H2 headline. Radial, faint, section-specific hue. */ section[data-totn-spotlight] { position: relative; } section[data-totn-spotlight]::before { content: ""; position: absolute; top: 0; left: 50%; width: 900px; height: 380px; transform: translateX(-50%); background: radial-gradient(ellipse 50% 60% at 50% 30%, var(--totn-spot-color, rgba(160,92,255,0.10)), transparent 70%); pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.8s ease; } section[data-totn-spotlight].totn-lit::before { opacity: 1; } [data-bg-spotlights="off"] section[data-totn-spotlight]::before { display: none; } section[data-totn-spotlight] > * { position: relative; z-index: 1; } section#what { --totn-spot-color: rgba(45,226,255,0.09); } section#chaos { --totn-spot-color: rgba(160,92,255,0.12); } section#evidence { --totn-spot-color: rgba(45,226,255,0.08); } section#room { --totn-spot-color: rgba(160,92,255,0.11); } section#latest { --totn-spot-color: rgba(45,226,255,0.10); } section#chat { --totn-spot-color: rgba(160,92,255,0.09); } /* Evidence variant sprinkles gold satellites */ [data-bg-variant="evidence"] section#evidence { --totn-spot-color: rgba(232,181,58,0.09); } [data-bg-variant="evidence"] section#chaos { --totn-spot-color: rgba(232,181,58,0.07); } [data-bg-variant="evidence"] section#patreon { --totn-spot-color: rgba(232,181,58,0.10); } /* -------- Scroll-triggered reveals ---------------------------------------- */ .totn-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2,0.7,0.2,1); } .totn-reveal.totn-in { opacity: 1; transform: none; } /* -------- Hero particles + signal rings (signal variant + push-hero) ------ */ .totn-hero-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .totn-hero-fx .p { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(242,241,250,0.85); box-shadow: 0 0 6px rgba(160,92,255,0.6); opacity: 0; animation: totn-particle 12s linear infinite; } @keyframes totn-particle { 0% { opacity: 0; transform: translate(var(--sx,0), 40px) scale(0.6); } 20% { opacity: 0.8; } 80% { opacity: 0.8; } 100% { opacity: 0; transform: translate(var(--ex,0), -320px) scale(1.1); } } [data-bg-variant="signal"] .totn-hero-ring { position: absolute; top: 22%; right: 12%; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(45,226,255,0.35); animation: totn-ring-emit 4s ease-out infinite; pointer-events: none; } [data-bg-variant="signal"] .totn-hero-ring.r2 { animation-delay: 1.3s; } [data-bg-variant="signal"] .totn-hero-ring.r3 { animation-delay: 2.6s; } @keyframes totn-ring-emit { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } } /* Non-signal variants: hide rings */ .totn-hero-ring { display: none; } [data-bg-variant="signal"] .totn-hero-ring { display: block; } /* Evidence: warm horizon line at hero bottom */ .totn-hero-horizon { display: none; } [data-bg-variant="evidence"] .totn-hero-horizon { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,181,58,0.35) 30%, rgba(232,181,58,0.35) 70%, transparent); box-shadow: 0 -8px 30px rgba(232,181,58,0.14); } /* -------- Ambient waveform strip (between chat and patreon) --------------- */ .totn-wave-strip { position: relative; height: 60px; margin: 44px auto 0; max-width: 1160px; padding: 0 24px; overflow: hidden; } .totn-wave-strip::before, .totn-wave-strip::after { content: ""; position: absolute; top: 50%; width: 60px; height: 1px; background: rgba(154,151,184,0.15); } .totn-wave-strip::before { left: 0; } .totn-wave-strip::after { right: 0; } .totn-wave-strip svg { width: 100%; height: 100%; display: block; } .totn-wave-strip .wl { stroke: rgba(160,92,255,0.55); fill: none; stroke-width: 1.2; stroke-linecap: round; } .totn-wave-strip .wl.b { stroke: rgba(45,226,255,0.30); stroke-width: 1; } /* -------- Card hover boost (louder / brighter on hover) ------------------- */ /* We target the inline-styled cards by attribute-substring on their background. Zero markup change; JS also stamps a class as backup. */ .totn-card-boost { transition: border-color .18s, transform .18s, box-shadow .28s, background-color .28s; } .totn-card-boost:hover { border-color: rgba(160,92,255,0.85) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 40px rgba(160,92,255,0.28), inset 0 1px 0 rgba(45,226,255,0.18) !important; } /* Evidence variant: gold hairline on hover for Patreon-adjacent cards */ [data-bg-variant="evidence"] .totn-card-boost:hover { border-color: rgba(232,181,58,0.75) !important; box-shadow: 0 12px 40px rgba(232,181,58,0.20), inset 0 1px 0 rgba(232,181,58,0.20) !important; } /* Signal variant: cyan hover glow */ [data-bg-variant="signal"] .totn-card-boost:hover { border-color: rgba(45,226,255,0.75) !important; box-shadow: 0 12px 40px rgba(45,226,255,0.25), inset 0 1px 0 rgba(45,226,255,0.25) !important; } /* -------- Cast pills — gold hover + proximity glow ------------------------ The "witness tag" pills in the "Also in the rotation" strip get: • gold border + lift on direct hover (matches card-boost treatment) • a fading proximity glow — pills near the hovered one pick up a partial gold echo, opacity driven by JS via --totn-glow (0..1) on each pill. Rather than fight the inline `border: 1px solid ...` shorthand, we layer a SECOND ring on top via box-shadow (spread 1px) + a soft outer halo. Both scale with --totn-glow. Cheap, reliable, and the base inline border stays intact underneath. */ /* The current pills are