Hero: fields of lasagna

index.html

@@ -42,7 +42,9 @@ nav .wrap{display:flex;align-items:center;gap:22px;height:56px}
 .tbtn{border:1px solid var(--line);background:var(--card);color:var(--ink2);border-radius:8px;padding:5px 10px;cursor:pointer;font:inherit;font-size:13px}
 header.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
 .hero .wrap{padding-top:72px;padding-bottom:64px;position:relative;z-index:1}
-.stack{position:absolute;right:-60px;top:40px;width:520px;height:360px;opacity:.9;pointer-events:none}
+.fields{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
+.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0,color-mix(in srgb,var(--bg) 92%,transparent) 34%,color-mix(in srgb,var(--bg) 35%,transparent) 62%,transparent 80%)}
+.hero .wrap{z-index:2}
 .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;color:var(--accent)}
 .hero h1{font-size:clamp(38px,6vw,68px);max-width:760px;margin:12px 0 18px}
 .lede{font-size:19px;color:var(--ink2);max-width:640px}
@@ -115,7 +117,7 @@ footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
 @media (max-width:900px){
   .detail,.region{grid-template-columns:1fr}
   .cards3{grid-template-columns:1fr}
-  .stack{display:none}
+  .hero:after{background:linear-gradient(180deg,var(--bg) 0,color-mix(in srgb,var(--bg) 88%,transparent) 55%,color-mix(in srgb,var(--bg) 30%,transparent) 100%)}
   .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 }
 @media (max-width:560px){
@@ -137,10 +139,7 @@ footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
 </div></nav>
 
 <header class="hero" id="top">
-  <svg class="stack" viewBox="0 0 520 360" aria-hidden="true">
-    <defs><linearGradient id="g" x1="0" x2="1"><stop offset="0" stop-color="var(--accent)" stop-opacity=".0"/><stop offset=".35" stop-color="var(--accent)" stop-opacity=".9"/><stop offset="1" stop-color="var(--accent2)" stop-opacity=".9"/></linearGradient></defs>
-    <g fill="none" stroke-linecap="round" id="sheets"></g>
-  </svg>
+  <svg class="fields" id="fields" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice" aria-hidden="true"></svg>
   <div class="wrap">
     <div class="eyebrow">Vesuvius Challenge open data, made usable</div>
     <h1>Lasagna fields for ten Herculaneum scrolls</h1>
@@ -298,12 +297,27 @@ let cur=0,view='xy',tab='get';
  $('theme').onclick=()=>{const dark=document.documentElement.dataset.theme?document.documentElement.dataset.theme==='dark':matchMedia('(prefers-color-scheme: dark)').matches;
   const n=dark?'light':'dark';document.documentElement.dataset.theme=n;try{localStorage.setItem('lf-theme',n)}catch(e){}};})();
 
-/* hero sheets */
-(function(){const g=$('sheets');let h='';
- for(let i=0;i<16;i++){const y=30+i*20,a=10+i%3*4,ph=i*.7;let d='M 0 '+y;
-  for(let x=0;x<=520;x+=20){d+=' L '+x+' '+(y+Math.sin(x/70+ph)*a).toFixed(1)}
-  h+='<path d="'+d+'" stroke="url(#g)" stroke-width="'+(i%4===0?5:3)+'" opacity="'+(0.25+0.05*(i%5))+'"/>'}
- g.innerHTML=h;})();
+/* hero: fields of lasagna */
+(function(){const W=1600,H=900,svg=$('fields');let seed=7;const rnd=()=>(seed=(seed*16807)%2147483647)/2147483647;
+ const dark=()=>document.documentElement.dataset.theme?document.documentElement.dataset.theme==='dark':matchMedia('(prefers-color-scheme: dark)').matches;
+ function draw(){const d=dark();seed=7;
+  let h='<defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">'+(d?'<stop offset="0" stop-color="#141210"/><stop offset=".6" stop-color="#3a1f17"/><stop offset="1" stop-color="#6b3020"/>':'<stop offset="0" stop-color="#f7f2ea"/><stop offset=".55" stop-color="#fbe3c4"/><stop offset="1" stop-color="#f6b98a"/>')+'</linearGradient>'+
+   '<radialGradient id="sun"><stop offset="0" stop-color="'+(d?'#ffd9a0':'#fff4d6')+'"/><stop offset="1" stop-color="'+(d?'#ffd9a0':'#ffe2a8')+'" stop-opacity="0"/></radialGradient></defs>';
+  h+='<rect width="'+W+'" height="'+H+'" fill="url(#sky)"/><circle cx="1240" cy="330" r="190" fill="url(#sun)" opacity="'+(d?.55:.9)+'"/>';
+  const pasta=d?['#d9b45c','#c99f48']:['#f2cf78','#e6bb5e'],sauce=d?'#a8321c':'#c2462b',cheese=d?'#e9d9b0':'#fff3d1',basil=d?'#5f8f45':'#4f7a3a';
+  const bands=7;
+  for(let b=0;b<bands;b++){const t=b/(bands-1),base=430+t*t*430,A=10+t*38,f=.0026+rnd()*.0016,ph=rnd()*6.3,th=2.5+t*11,L=7;
+   const top=x=>base+Math.sin(x*f+ph)*A+Math.sin(x*f*2.7+ph*1.7)*A*.35;
+   for(let k=0;k<=L;k++){const pastaLayer=k%2===0,col=k===L?(d?'#b98a3e':'#e2ac58'):k===0?pasta[0]:(pastaLayer?pasta[1]:(k%4===1?sauce:cheese));
+    let path='M -10 '+H;for(let x=-10;x<=W+10;x+=12){let y=top(x)+k*th;if(pastaLayer)y+=Math.sin(x*.09+k)*th*.18;path+=' L '+x+' '+y.toFixed(1)}
+    path+=' L '+(W+10)+' '+H+' Z';h+='<path d="'+path+'" fill="'+col+'"/>'}
+   let ridge='M -10 '+top(-10).toFixed(1);for(let x=-10;x<=W+10;x+=12)ridge+=' L '+x+' '+(top(x)+Math.sin(x*.09)*th*.18).toFixed(1);
+   h+='<path d="'+ridge+'" fill="none" stroke="'+(d?'#f0d48a':'#fff0c2')+'" stroke-width="'+(1+t*2)+'" opacity=".7"/>';
+   const n=Math.round(6+t*14);for(let i=0;i<n;i++){const x=rnd()*W,y=top(x)-1,s=2.5+t*7,r=rnd()*60-30;
+    h+='<ellipse cx="'+x.toFixed(0)+'" cy="'+y.toFixed(1)+'" rx="'+(s*1.6).toFixed(1)+'" ry="'+s.toFixed(1)+'" fill="'+basil+'" transform="rotate('+r.toFixed(0)+' '+x.toFixed(0)+' '+y.toFixed(1)+')"/>';
+    if(rnd()<.35)h+='<circle cx="'+(x+s*2).toFixed(0)+'" cy="'+(y+s*.4).toFixed(1)+'" r="'+(s*.8).toFixed(1)+'" fill="'+cheese+'"/>'}}
+  svg.innerHTML=h}
+ draw();matchMedia('(prefers-color-scheme: dark)').addEventListener('change',draw);$('theme').addEventListener('click',()=>setTimeout(draw,0));})();
 
 /* stats */
 const totB=D.reduce((a,s)=>a+s.bytes,0),totP=D.reduce((a,s)=>a+s.parts.length,0);