CHANNEL OPEN · HUMAN ON THE LINE
This file is deliberately additive — it sets tokens, the frame, the header and the texture. It does NOT set page layout, so it can be dropped onto an existing page without moving anything. ============================================================ */ :root{ /* the void and the light in it */ --tx-void:#070a0e; --tx-ink:#F4EDE1; --tx-muted:#9aa0a8; --tx-muted-2:#6b7280; /* projection light — violet speaks, magenta listens */ --tx-violet:#A855F7; --tx-magenta:#D84678; /* the one warm accent, kept from the original brand for CTAs */ --tx-gold:#E8B04B; --tx-line:rgba(168,85,247,.18); --tx-card:rgba(255,255,255,.02); --tx-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } /* ---------- the ground ---------- */ .tx-void{ background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(168,85,247,.13), transparent 70%), radial-gradient(ellipse 120% 80% at 50% 105%, rgba(216,70,120,.10), transparent 65%), var(--tx-void); color:var(--tx-ink); } /* ---------- scanline texture ---------- Applied to whatever element carries .tx-scan (usually body). */ .tx-scan::after{ content:'';position:fixed;inset:0;pointer-events:none;z-index:9; mix-blend-mode:overlay;opacity:.5; background:repeating-linear-gradient(0deg, rgba(244,237,225,.06) 0 1px, transparent 1px 3px); } /* ---------- the comms viewscreen frame ---------- */ .comms{ position:fixed;inset:10px;z-index:8;pointer-events:none; border:2px solid rgba(168,85,247,.34);border-radius:4px; box-shadow: inset 0 0 0 1px rgba(7,10,14,.8), inset 0 0 140px rgba(7,10,14,.65), inset 0 0 30px rgba(168,85,247,.07); } .comms b{ position:absolute;width:19px;height:19px;border:0; border-top:3px solid var(--tx-violet);border-left:3px solid var(--tx-violet); } .comms b:nth-child(1){top:-2px;left:-2px} .comms b:nth-child(2){top:-2px;right:-2px;transform:rotate(90deg)} .comms b:nth-child(3){bottom:-2px;right:-2px;transform:rotate(180deg)} .comms b:nth-child(4){bottom:-2px;left:-2px;transform:rotate(270deg)} /* listening state flips the channel to magenta */ [data-state="listening"] .comms{border-color:rgba(216,70,120,.34)} [data-state="listening"] .comms b{border-color:var(--tx-magenta)} /* ---------- CRT curvature / edge burn ---------- */ .crt{ position:fixed;inset:0;z-index:7;pointer-events:none; background:radial-gradient(ellipse 92% 88% at 50% 50%, transparent 58%, rgba(7,10,14,.55) 92%, rgba(7,10,14,.85) 100%); } /* ---------- transmission header ---------- */ .txhead{ display:flex;align-items:center;justify-content:center;gap:9px; font-family:var(--tx-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--tx-violet);opacity:.85;white-space:nowrap;margin:0 0 14px; } .txhead i{ width:5px;height:5px;border-radius:50%;background:currentColor;display:block; animation:tx-blip 1.6s ease-in-out infinite; } @keyframes tx-blip{0%,100%{opacity:.35}50%{opacity:1}} /* signal-strength bars, optional: */ .txbars{display:inline-flex;align-items:flex-end;gap:2px;height:11px} .txbars i{width:2.5px;background:currentColor;opacity:.34;animation:tx-bar 1.1s ease-in-out infinite;border-radius:0} .txbars i:nth-child(1){height:35%;animation-delay:0s} .txbars i:nth-child(2){height:55%;animation-delay:.13s} .txbars i:nth-child(3){height:75%;animation-delay:.26s} .txbars i:nth-child(4){height:100%;animation-delay:.39s} @keyframes tx-bar{0%,100%{opacity:.3}50%{opacity:1}} /* ---------- static burst ---------- Add .burst to fire it once (remove, reflow, re-add to replay). */ .static{ position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); transition:opacity .25s ease; } .static.burst{animation:tx-static .85s steps(3,end) 1} @keyframes tx-static{ 0%{opacity:.85}30%{opacity:.5}55%{opacity:.7}80%{opacity:.22}100%{opacity:0} } @media (max-width:680px){ .comms{inset:6px} .txhead{font-size:8.5px;gap:6px;letter-spacing:.16em} } @media (prefers-reduced-motion: reduce){ .txhead i,.txbars i,.static.burst{animation:none!important} }