/* ============================================================ AREA 51 // ADAPTIVE REGIME & ENTROPY ANALYSIS base.css — phosphor tokens, CRT layer, primitives ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap'); :root{ --bg: #03070a; --bg-1: #060d11; --bg-2: #08151a; --panel: rgba(6,16,20,.72); --line: #0d2529; --line-2: #143b3e; --line-3: #1d5a58; --dim: #2c6a66; --mid: #4aa79a; --fg: #7ff3d6; --hot: #d6fff4; --green: #39ff88; --red: #ff2b3d; --red-dim: #7d1520; --amber: #ffb03a; --violet: #9b6dff; --f-disp: 'Share Tech Mono', ui-monospace, monospace; --f-data: 'IBM Plex Mono', ui-monospace, monospace; --glow: 0 0 2px rgba(127,243,214,.55), 0 0 10px rgba(57,255,136,.14); --glow-r: 0 0 3px rgba(255,43,61,.6), 0 0 14px rgba(255,43,61,.22); --gut: 16px; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:var(--f-data); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } /* only the terminal is a fixed, non-scrolling instrument panel. The landing must scroll — an overflow:hidden on blocks it no matter what says. */ body.terminal{ overflow:hidden; } html:has(body.landing){ overflow-x:hidden; overflow-y:auto; } body.landing{ overflow-x:hidden; } ::selection{ background:rgba(57,255,136,.25); color:var(--hot); } /* ---------- scrollbars ---------- */ ::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-track{ background:#050c0f; } ::-webkit-scrollbar-thumb{ background:#12383a; border:1px solid #0b2225; } ::-webkit-scrollbar-thumb:hover{ background:#1c5c58; } /* ============================================================ CRT / SIGNAL LAYER ============================================================ */ .crt-layer{ position:fixed; inset:0; z-index:9000; pointer-events:none; } /* scanlines */ .crt-layer::before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient( to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.20) 3px, rgba(0,0,0,.20) 4px ); mix-blend-mode:multiply; opacity:.55; } /* aperture grille + vignette + phosphor bloom wash */ .crt-layer::after{ content:''; position:absolute; inset:0; background: repeating-linear-gradient(to right, rgba(255,0,60,.018) 0px, rgba(0,255,190,.018) 1px, rgba(60,120,255,.018) 2px, rgba(0,0,0,0) 3px), radial-gradient(ellipse 130% 110% at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.30) 86%, rgba(0,0,0,.62) 100%); } /* rolling refresh bar */ .crt-roll{ position:fixed; left:0; right:0; height:170px; z-index:9001; pointer-events:none; background:linear-gradient(to bottom, rgba(127,243,214,0) 0%, rgba(127,243,214,.028) 45%, rgba(214,255,244,.055) 50%, rgba(127,243,214,.028) 55%, rgba(127,243,214,0) 100%); animation:roll 7.5s linear infinite; } @keyframes roll{ from{ top:-180px } to{ top:100% } } /* analog noise */ .crt-noise{ position:fixed; inset:-50%; z-index:8999; pointer-events:none; opacity:.032; background-image:url("data:image/svg+xml;utf8,"); animation:grain .6s steps(4) infinite; } @keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,1%)} } /* whole-screen flicker */ .crt-flicker{ position:fixed; inset:0; z-index:9002; pointer-events:none; background:rgba(127,243,214,.03); animation:flick 4.2s infinite steps(1); opacity:0; } @keyframes flick{ 0%,96%,100%{opacity:0} 96.5%{opacity:.5} 97%{opacity:0} 97.4%{opacity:.32} 97.8%{opacity:0} } /* horizontal tear — fires rarely */ .crt-tear{ position:fixed; left:0; right:0; z-index:9003; height:0; pointer-events:none; background:rgba(214,255,244,.12); box-shadow:0 0 22px rgba(57,255,136,.4); } /* ============================================================ RGB DISTORTION (text) ============================================================ */ .rgb{ text-shadow: .55px 0 0 rgba(255,0,72,.55), -.55px 0 0 rgba(0,222,255,.55), 0 0 8px rgba(57,255,136,.18); } .rgb-hard{ text-shadow: 1.4px 0 0 rgba(255,0,72,.75), -1.4px 0 0 rgba(0,222,255,.75), 0 0 14px rgba(57,255,136,.3); } .glitch{ position:relative; display:inline-block; } .glitch::before,.glitch::after{ content:attr(data-t); position:absolute; left:0; top:0; width:100%; overflow:hidden; pointer-events:none; } .glitch::before{ color:rgba(255,0,72,.85); animation:gx1 3.4s infinite steps(2); } .glitch::after { color:rgba(0,222,255,.85); animation:gx2 2.9s infinite steps(2); } @keyframes gx1{ 0%,93%,100%{ clip-path:inset(100% 0 0 0); transform:translate(0) } 94%{ clip-path:inset(12% 0 62% 0); transform:translate(-3px) } 96%{ clip-path:inset(48% 0 24% 0); transform:translate(2px) } 98%{ clip-path:inset(70% 0 8% 0); transform:translate(-2px) } } @keyframes gx2{ 0%,91%,100%{ clip-path:inset(100% 0 0 0); transform:translate(0) } 92%{ clip-path:inset(30% 0 40% 0); transform:translate(3px) } 95%{ clip-path:inset(62% 0 16% 0); transform:translate(-3px) } 97%{ clip-path:inset(6% 0 78% 0); transform:translate(2px) } } /* ============================================================ PRIMITIVES ============================================================ */ .mono{ font-family:var(--f-data); } .disp{ font-family:var(--f-disp); letter-spacing:.06em; } .up{ text-transform:uppercase; } .dimt{ color:var(--dim); } .midt{ color:var(--mid); } .hott{ color:var(--hot); } .grn{ color:var(--green); } .rd { color:var(--red); } .amb{ color:var(--amber); } .tiny{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; } .xs{ font-size:11px; letter-spacing:.08em; } .num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } .right{ text-align:right; } .nowrap{ white-space:nowrap; } hr.rule{ border:0; height:1px; margin:8px 0; background:linear-gradient(to right,var(--line-2),transparent); } /* bracketed panel — the core chrome of the whole build */ .panel{ position:relative; background:var(--panel); border:1px solid var(--line-2); } .panel > .panel-hd{ display:flex; align-items:center; gap:8px; padding:4px 8px; border-bottom:1px solid var(--line-2); background:linear-gradient(to right,rgba(20,59,62,.5),rgba(6,16,20,0)); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mid); } .panel > .panel-hd .idx{ color:var(--line-3); } .panel > .panel-hd .spacer{ flex:1; } .panel > .panel-bd{ padding:8px; } /* corner ticks */ .ticks::before,.ticks::after{ content:''; position:absolute; width:7px; height:7px; pointer-events:none; border-color:var(--line-3); border-style:solid; } .ticks::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; } .ticks::after { bottom:-1px; right:-1px; border-width:0 1px 1px 0; } /* labelled key/value row */ .kv{ display:flex; justify-content:space-between; gap:10px; padding:1px 0; } .kv > span:first-child{ color:var(--dim); text-transform:uppercase; font-size:10px; letter-spacing:.12em; } .kv > span:last-child{ color:var(--fg); font-variant-numeric:tabular-nums; } /* buttons */ .btn{ font-family:var(--f-data); font-size:11px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; padding:6px 12px; color:var(--fg); background:rgba(11,32,35,.6); border:1px solid var(--line-3); transition:background .12s, color .12s, box-shadow .12s; user-select:none; white-space:nowrap; } .btn:hover{ background:rgba(28,92,88,.45); color:var(--hot); box-shadow:var(--glow); } .btn:active{ transform:translateY(1px); } .btn.on{ background:rgba(57,255,136,.14); border-color:var(--green); color:var(--green); box-shadow:0 0 12px rgba(57,255,136,.22) inset; } .btn.danger{ border-color:var(--red-dim); color:var(--red); } .btn.danger:hover{ background:rgba(255,43,61,.14); box-shadow:var(--glow-r); } .btn[disabled]{ opacity:.35; pointer-events:none; } /* inputs */ .field{ font-family:var(--f-data); font-size:13px; width:100%; padding:8px 10px; color:var(--hot); background:rgba(3,10,12,.85); border:1px solid var(--line-2); outline:none; letter-spacing:.04em; } .field:focus{ border-color:var(--green); box-shadow:0 0 0 1px rgba(57,255,136,.18), var(--glow); } .field::placeholder{ color:#1d4a4a; } select.field{ appearance:none; cursor:pointer; text-transform:uppercase; letter-spacing:.14em; font-size:10px; } select.field option{ background:#040d10; color:var(--fg); } select.field{ font-size:11px; } /* blinking cursor */ .cursor{ display:inline-block; width:7px; height:12px; background:var(--green); vertical-align:-2px; animation:blink 1.05s steps(1) infinite; } @keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} } /* status dot */ .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s ease-in-out infinite; } .dot.rd{ background:var(--red); box-shadow:0 0 8px var(--red); } .dot.am{ background:var(--amber); box-shadow:0 0 8px var(--amber); } @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} } /* barcode strip */ .barcode{ height:11px; width:100%; background:repeating-linear-gradient(to right, var(--line-3) 0 1px, transparent 1px 3px, var(--line-3) 3px 5px, transparent 5px 6px, var(--line-3) 6px 7px, transparent 7px 11px, var(--line-3) 11px 14px, transparent 14px 15px); opacity:.65; } /* classified stamp */ .stamp{ display:inline-block; padding:2px 8px; border:1px solid var(--red); color:var(--red); font-size:10px; letter-spacing:.3em; text-transform:uppercase; box-shadow:var(--glow-r); text-shadow:0 0 8px rgba(255,43,61,.6); } /* screen-boot wipe */ .boot-wipe{ position:fixed; inset:0; z-index:9500; background:var(--bg); animation:bootwipe 1.1s ease-in forwards; pointer-events:none; } @keyframes bootwipe{ 0%{ clip-path:inset(0 0 0 0); background:#0a1a1c } 45%{ clip-path:inset(49.6% 0 49.6% 0); background:#bffff0 } 70%{ clip-path:inset(49.9% 0 49.9% 0); background:#e6fffa } 100%{ clip-path:inset(50% 0 50% 0); background:#e6fffa; opacity:0 } } @media (prefers-reduced-motion:reduce){ .crt-roll,.crt-noise,.crt-flicker,.glitch::before,.glitch::after,.dot{ animation:none; } .crt-noise{ opacity:.03 } }