v3.2 look: violet→cyan signature palette, slower calm drift, scanline+grid overlay

app.py

@@ -114,18 +114,18 @@ BASE = """<!doctype html><html lang=en><head><meta charset=utf-8><meta name=view
 <meta name=theme-color content="#070a13">
 <link rel=canonical href="https://dark0rbits.thetempleofdoom.com">
 <style>
-:root{--bg:#070a13;--card:rgba(19,25,44,.82);--line:#242e4d;--fg:#e9edf8;--dim:#93a0c2;--acc:#ffc94d;--acc2:#6fd6ff;--acc3:#a78bfa;--ok:#42e8a4;--bad:#ff6161}
+:root{--bg:#070a13;--card:rgba(19,25,44,.82);--line:#242e4d;--fg:#e9edf8;--dim:#93a0c2;--acc:#a78bfa;--acc2:#6fd6ff;--acc3:#6fd6ff;--ok:#42e8a4;--bad:#ff6161}
 *{box-sizing:border-box}
 html{scroll-behavior:smooth}
 body{margin:0;min-height:100vh;color:var(--fg);font:16px/1.6 ui-monospace,Menlo,Consolas,monospace;text-align:center;overflow-x:hidden;background:var(--bg)}
 #space{position:fixed;inset:0;z-index:0;display:block}
 .vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% -10%,var(--neb1,rgba(120,85,255,.16)),transparent 55%),radial-gradient(ellipse at 80% 110%,var(--neb2,rgba(0,190,255,.10)),transparent 50%),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,5,.55) 100%)}
 main{position:relative;z-index:2;max-width:920px;margin:0 auto;padding:1.6rem 1.1rem 4rem;text-align:center}
-#lbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--acc),var(--acc3));z-index:50;transition:width .3s;box-shadow:0 0 10px var(--acc)}
+#lbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));z-index:50;transition:width .3s;box-shadow:0 0 10px var(--acc)}
 #lbar.done{width:100%;opacity:0;transition:opacity .5s}
 header{position:sticky;top:0;z-index:40;background:rgba(7,10,19,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
 .hbar{max-width:920px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.55rem 1rem}
-.logo{color:var(--acc);text-decoration:none;font-weight:800;letter-spacing:.28em;font-size:1rem;text-shadow:0 0 18px rgba(255,201,77,.35)}
+.logo{color:var(--acc);text-decoration:none;font-weight:800;letter-spacing:.28em;font-size:1rem;text-shadow:0 0 18px rgba(167,139,250,.4)}
 .burger{background:none;border:1px solid var(--line);color:var(--fg);font-size:1.15rem;border-radius:8px;padding:.35rem .7rem;cursor:pointer}
 .burger:hover{border-color:var(--acc);color:var(--acc)}
 .dnav{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
@@ -150,10 +150,10 @@ h1 span{color:var(--acc)}
 .kv div:nth-child(even){background:rgba(255,255,255,.03);border-radius:8px;padding:.35rem .6rem}
 @media(min-width:640px){.kv{grid-template-columns:180px 1fr}.kv div:nth-child(odd){padding-top:.35rem}}
 input,select,button,textarea{font:inherit;background:rgba(10,15,30,.9);color:var(--fg);border:1px solid #2c3860;border-radius:10px;padding:.6rem .8rem;max-width:100%}
-button{background:linear-gradient(135deg,var(--acc),#ff9d3c);color:#161000;border:0;font-weight:800;cursor:pointer;transition:.2s;letter-spacing:.05em}
+button{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#0d0722;border:0;font-weight:800;cursor:pointer;transition:.2s;letter-spacing:.05em}
-button:hover{filter:brightness(1.12);box-shadow:0 0 18px -4px var(--acc)}
+button:hover{filter:brightness(1.15);box-shadow:0 0 20px -4px var(--acc)}
 button.ghost{background:transparent;color:var(--acc);border:1px solid var(--acc)}
-button.big{font-size:1.02rem;padding:.75rem 1.4rem;margin:.25rem}
+button.big{font-size:1.02rem;padding:.75rem 1.4rem;margin:.25rem;color:#0d0722}
 .grid2{display:grid;grid-template-columns:1fr;gap:.9rem;text-align:center}
 @media(min-width:700px){.grid2{grid-template-columns:1fr 1fr}}
 .tag{display:inline-block;padding:.14rem .6rem;border-radius:999px;font-size:.74rem;border:1px solid;margin:.15rem}
@@ -167,18 +167,19 @@ code{background:rgba(10,15,30,.9);padding:.08rem .4rem;border-radius:5px;font-si
 a{color:var(--acc2)}
 pre{text-align:left;white-space:pre-wrap;overflow-x:auto}
 .drop{border:2px dashed #33406b;border-radius:14px;padding:1.8rem 1rem;cursor:pointer;transition:.2s}
-.drop:hover,.drop.over{border-color:var(--acc);background:rgba(255,201,77,.05)}
+.drop:hover,.drop.over{border-color:var(--acc);background:rgba(167,139,250,.06)}
 .msg{background:rgba(10,15,30,.75);border-left:3px solid var(--acc);border-radius:0 10px 10px 0;padding:.6rem .9rem;margin:.55rem 0;text-align:left}
 .msg.me{border-left-color:var(--acc2)}
 .msg .who{color:var(--dim);font-size:.74rem}
-.bar{height:7px;background:rgba(10,15,30,.9);border-radius:4px;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc3));width:0;transition:width .5s}
+.bar{height:7px;background:rgba(10,15,30,.9);border-radius:4px;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));width:0;transition:width .5s}
 #dev{position:fixed;bottom:14px;right:14px;z-index:45;background:rgba(19,25,44,.92);border:1px solid var(--acc);color:var(--acc);border-radius:999px;padding:.5rem .9rem;font-size:.8rem;text-decoration:none;box-shadow:0 0 18px -6px var(--acc)}
 #dev:hover{background:var(--acc);color:#161000}
 img{max-width:100%;border-radius:10px}
 li{text-align:left;margin:.2rem 0}
+.gridlines{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),linear-gradient(rgba(111,214,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(111,214,255,.03) 1px,transparent 1px);background-size:auto,80px 80px,80px 80px;mask-image:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.25))}
 </style></head><body>
 <div id="lbar"></div>
-<canvas id="space"></canvas><div class="vignette" style="--neb1:{{n1}};--neb2:{{n2}}"></div>
+<canvas id="space"></canvas><div class="gridlines"></div><div class="vignette" style="--neb1:{{n1}};--neb2:{{n2}}"></div>
 <header><div class="hbar">
 <a class=logo href=/ >◈ DARK0RBITS</a>
 <div class="dnav">
@@ -233,7 +234,7 @@ var c=document.getElementById('space'),x=c.getContext('2d'),W,H,stars=[],dust=[]
 function rs(){W=c.width=innerWidth;H=c.height=innerHeight;
 stars=[];var n=Math.min(220,Math.floor(W*H/7000));
 for(var i=0;i<n;i++)stars.push({x:Math.random()*W,y:Math.random()*H,z:Math.random()+.3,tw:Math.random()*6.28});
-dust=[];for(i=0;i<14;i++)dust.push({x:Math.random()*W,y:Math.random()*H,r:40+Math.random()*90,vx:(Math.random()-.5)*.08,vy:(Math.random()-.5)*.06,h:Math.random()<.5?120:265,a:.05+Math.random()*.05});}
+dust=[];for(i=0;i<14;i++)dust.push({x:Math.random()*W,y:Math.random()*H,r:40+Math.random()*90,vx:(Math.random()-.5)*.035,vy:(Math.random()-.5)*.028,h:Math.random()<.5?120:265,a:.05+Math.random()*.05});}
 rs();addEventListener('resize',rs);
 var mx=0,my=0,tx=0,ty=0;
 addEventListener('mousemove',function(e){tx=(e.clientX/W-.5);ty=(e.clientY/H-.5)});
@@ -246,9 +247,9 @@ var g=x.createRadialGradient(d.x,d.y,0,d.x,d.y,d.r);
 g.addColorStop(0,'hsla('+d.h+',70%,60%,'+d.a+')');g.addColorStop(1,'transparent');
 x.fillStyle=g;x.beginPath();x.arc(d.x,d.y,d.r,0,6.29);x.fill();}
 mx+=(tx-mx)*.03;my+=(ty-my)*.03;
-for(i=0;i<stars.length;i++){var s=stars[i];s.tw+=.02;
+for(i=0;i<stars.length;i++){var s=stars[i];s.tw+=.011;
 var px=s.x+mx*s.z*40, py=s.y+my*s.z*40;
-var a=.35+.45*Math.abs(Math.sin(s.tw));
+var a=.28+.4*Math.abs(Math.sin(s.tw));
 x.fillStyle='rgba(220,228,255,'+(a*s.z)+')';
 x.beginPath();x.arc(px,py,s.z*1.25,0,6.29);x.fill();}
 requestAnimationFrame(frame);}