site: slim homepage (hero + 3-step strip), hash redirects

site/assets/css/docs.css

@@ -470,3 +470,99 @@ transition:var(--tr-ui)}
     clip: rect(0 0 0 0);
     white-space: nowrap;
 }
+
+/* == slim home: 3-step strip == */
+
+/* == landing: premium hero + choreography == */
+.lp{position:relative;overflow:hidden;isolation:isolate}
+.lp-aura{position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-image:radial-gradient(40% 35% at 25% 30%,rgba(176,122,42,.22),transparent 70%),radial-gradient(35% 30% at 78% 20%,rgba(176,122,42,.14),transparent 70%),radial-gradient(45% 40% at 60% 85%,rgba(120,120,160,.12),transparent 70%);animation:lp-drift 18s ease-in-out infinite alternate}
+@keyframes lp-drift{to{background-position:6% 4%,-5% 6%,3% -4%;background-size:115% 115%,110% 110%,120% 120%}}
+.lp h1{overflow:hidden;padding-bottom:.08em}
+.lp-w{display:block;opacity:0;transform:translateY(105%) rotate(2deg);animation:lp-up .9s cubic-bezier(.2,.8,.2,1) forwards}
+.lp-w:nth-child(2){animation-delay:.12s}
+.lp-r{opacity:0;transform:translateY(14px);animation:lp-fade .8s cubic-bezier(.2,.8,.2,1) forwards}
+.tag.lp-r{animation-delay:0s}.lead.lp-r{animation-delay:.28s}.hero-cta.lp-r{animation-delay:.4s}.hero-facts.lp-r{animation-delay:.52s}
+@keyframes lp-up{to{opacity:1;transform:none}}
+@keyframes lp-fade{to{opacity:1;transform:none}}
+.lp-tilt{position:relative;opacity:0;transform:perspective(900px) translateY(24px) scale(.97);animation:lp-card 1.1s .35s cubic-bezier(.2,.8,.2,1) forwards;transition:transform .25s ease-out;will-change:transform}
+@keyframes lp-card{to{opacity:1;transform:perspective(900px) none}}
+.lp-tilt.on{animation:none;opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
+.lp-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .3s}
+.lp-tilt.on .lp-shine{opacity:.7}
+.lp-band{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:14px;padding:18px 20px;border:1px solid rgba(128,128,128,.2);border-radius:16px;background:linear-gradient(100deg,rgba(176,122,42,.12),transparent 70%)}
+.lp-band div{display:flex;flex-direction:column;gap:2px}.lp-band span{opacity:.7;font-size:.88rem}
+.lp-on .lp-s{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
+.lp-on .lp-s.in{opacity:1;transform:none}
+.lp-on .lp-s:nth-child(2){transition-delay:.1s}.lp-on .lp-s:nth-child(3){transition-delay:.2s}
+@media (prefers-reduced-motion:reduce){.lp-aura,.lp-w,.lp-r,.lp-tilt{animation:none!important;opacity:1!important;transform:none!important}.lp-on .lp-s{opacity:1;transform:none;transition:none}}
+
+
+/* == landing v2: layout + svg steps == */
+.lp-steps{margin-top:clamp(20px,4vw,48px)}
+.lp-flow{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:1fr}
+.lp-flow li{position:relative;list-style:none;margin:0;padding:0}
+.lp-flow li::before{content:none!important}
+.lp-flow li:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-17px;height:16px;border-left:2px dashed rgba(128,128,128,.4)}
+.lp-card{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;padding:18px 44px 18px 18px;overflow:hidden;text-decoration:none!important;color:inherit;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
+.lp-card *{text-decoration:none!important;font-style:normal}
+.lp-card .lp-ic{grid-row:1/4;grid-column:1;width:64px;height:64px;color:inherit;--a:var(--acc,#b07a2a)}
+.lp-card .lp-ic .a{stroke:var(--a)}
+.lp-card b,.lp-card span{grid-column:2}
+.lp-card b{font-size:1.1rem;letter-spacing:-.01em}
+.lp-card span{opacity:.7;font-size:.88rem;line-height:1.45}
+.lp-n{position:absolute;top:14px;right:16px;font-family:var(--mono,monospace);font-size:.72rem;letter-spacing:.08em;opacity:.45}
+.lp-card em{position:absolute;right:16px;bottom:14px;opacity:.35;transition:transform .35s,opacity .35s}
+.lp-card:hover,.lp-card:focus-visible{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(0,0,0,.3)}
+.lp-card:hover em,.lp-card:focus-visible em{transform:translateX(6px);opacity:1}
+.lp-on .lp-s:not(.in) .lp-ic *{stroke-dasharray:1;stroke-dashoffset:1}
+.lp-on .lp-s.in .lp-ic *{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1) .25s}
+@media (min-width:720px){
+.lp-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
+.lp-flow li:not(:last-child)::after{left:100%;bottom:auto;top:50%;width:18px;height:0;border-left:0;border-top:2px dashed rgba(128,128,128,.4)}
+.lp-card{grid-template-columns:1fr;row-gap:6px;padding:24px 22px 40px}
+.lp-card .lp-ic{grid-row:auto;grid-column:1;width:84px;height:84px;margin-bottom:12px}
+.lp-card b,.lp-card span{grid-column:1}
+}
+@media (min-width:900px){
+.lp .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
+.lp .hero-viz{margin:0}
+}
+@media (prefers-reduced-motion:reduce){.lp-on .lp-s .lp-ic *{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important}}
+
+/* == landing v3: content sections == */
+.lp-more{display:grid;gap:clamp(40px,7vw,88px);margin-top:clamp(40px,7vw,88px);padding-bottom:clamp(24px,5vw,56px)}
+.lp-h{max-width:56ch;margin-bottom:20px}
+.lp-h h2{margin:6px 0 6px;font-size:clamp(1.5rem,4.5vw,2.3rem);letter-spacing:-.025em;line-height:1.1}
+.lp-h p{margin:0;opacity:.7}
+.lp-k{font:600 10.5px/1 var(--mono,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--acc,#b07a2a)}
+.lp-grid{display:grid;gap:14px;grid-template-columns:1fr}
+.lp-f,.lp-d{position:relative;padding:22px;overflow:hidden;color:inherit;text-decoration:none}
+.lp-f h3,.lp-d h3{margin:10px 0 6px;font-size:1.1rem;letter-spacing:-.01em}
+.lp-f p,.lp-d p{margin:0;opacity:.7;font-size:.9rem;line-height:1.5}
+.lp-mi{width:34px;height:34px;padding:8px;border-radius:10px;color:var(--acc,#b07a2a);background:color-mix(in srgb,var(--acc,#b07a2a) 13%,transparent);box-sizing:content-box;width:18px;height:18px}
+.lp-o{position:absolute;top:10px;right:16px;font:700 3.4rem/1 var(--mono,monospace);font-style:normal;color:transparent;-webkit-text-stroke:1px currentColor;opacity:.14}
+.lp-d ul{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
+.lp-d li{padding:5px 10px;border:1px solid rgba(128,128,128,.25);border-radius:999px;font:500 11px var(--mono,monospace);letter-spacing:.04em}
+.lp-d em{position:absolute;right:18px;top:18px;font-style:normal;opacity:.35;transition:transform .35s,opacity .35s}
+.lp-d:hover,.lp-f:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(0,0,0,.3)}
+.lp-d:hover em{transform:translateX(6px);opacity:1}
+.lp-f,.lp-d{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
+.lp-g4{grid-template-columns:1fr 1fr}
+.lp-t{display:flex;flex-direction:column;gap:4px;padding:16px 4px 4px 14px;border-left:2px solid color-mix(in srgb,var(--acc,#b07a2a) 55%,transparent);color:inherit;text-decoration:none}
+.lp-t b{font-size:1.02rem}.lp-t span{opacity:.7;font-size:.86rem;line-height:1.45}
+.lp-t:hover b{color:var(--acc,#b07a2a)}
+.lp-end{position:relative;overflow:hidden;text-align:center;padding:clamp(32px,7vw,72px) 20px;border:1px solid rgba(128,128,128,.2);border-radius:24px;background:radial-gradient(60% 90% at 50% 0%,rgba(176,122,42,.2),transparent 70%),linear-gradient(180deg,rgba(128,128,128,.05),transparent)}
+.lp-end h2{margin:0 0 8px;font-size:clamp(1.6rem,5vw,2.6rem);letter-spacing:-.03em}
+.lp-end p{margin:0 auto 22px;opacity:.7;max-width:44ch}
+.lp-end .hero-cta{justify-content:center}
+@media (min-width:720px){.lp-g3{grid-template-columns:repeat(3,minmax(0,1fr))}.lp-g2{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
+
+/* == landing: contrast-safe step cards == */
+.lp-card .lp-n{opacity:1;color:var(--tx2)}
+.lp-card span{opacity:1;color:var(--tx2)}
+.lp-card em{opacity:1;color:var(--mut)}
+.lp-card b{color:var(--tx)}
+.lp-more .lp-h p,.lp-f p,.lp-d p,.lp-t span,.lp-end p,.lp-band span{opacity:1;color:var(--tx2)}
+.lp-o{opacity:1;color:color-mix(in srgb,var(--tx) 14%,transparent)}
+.lp-on .lp-flow .lp-s{transition-delay:0s!important}
+.lp-on .lp-flow .lp-s{transition-duration:.35s}

site/assets/css/nav.css

@@ -710,3 +710,29 @@ text-overflow:ellipsis}
 }
 
 :root .btn.pri{background:var(--tx)!important;color:var(--bg)!important;border-color:var(--tx)!important}
+
+/* == sidebar icons: light tint, not solid blobs == */
+.ni [fill="currentColor"]{fill-opacity:.12}
+.nl:hover .ni [fill="currentColor"],.nb:hover .ni [fill="currentColor"]{fill-opacity:.2}
+a[aria-current] > .ni [fill="currentColor"],.nl[aria-current] .ni [fill="currentColor"]{fill-opacity:.3}
+.nl .ni{color:var(--tx2)}
+.nl:hover .ni{color:var(--tx)}
+.nl[aria-current] .ni{color:var(--acc)}
+
+/* == footer: copyright wraps instead of clipping == */
+.sf .sf-in{min-width:0}
+.sf .sf-in .sf-cp{box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding-inline:12px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-align:center}
+
+/* == mobile drawer matches desktop sidebar scale == */
+@media (max-width:767px){
+.sb{width:min(80vw,300px);gap:12px}
+.sb .sb-bt b{font-size:14px!important}
+.sb .sb-bt small,.sb .sb-badge,.sb .n-chip-b small{font-size:10px!important;letter-spacing:.12em}
+.sb .sb-h{font:600 10px var(--mono)!important;letter-spacing:.16em;padding:0 12px;margin:8px 0 4px}
+.sb .nl{min-height:44px;gap:12px;padding:0 12px;font:500 13.5px var(--sans)!important}
+.sb .nl .nt{font-size:13.5px!important}
+.sb .nl .ni{width:18px!important;height:18px!important}
+.sb .n-chip{padding:8px 10px;gap:10px}
+.sb .n-chip-t{font-size:12.5px!important}
+.sb .sb-ctl .nb{width:40px;height:40px}
+}

site/assets/js/nav.js

@@ -185,7 +185,7 @@ foot.innerHTML = '<div class="sf-in">' +
 '</span></div>' +
 '<p class="sf-facts"><span>Offline checks</span> <span>No acoustic measurement recorded</span> <span>Tested by Noushad Mostafa</span></p>' +
 '<nav class="sf-n" aria-label="Footer"><a href="/HyperAudio/docs/">Docs</a><a href="/HyperAudio/changelog.html">Changelog</a><a href="/HyperAudio/docs/EVIDENCE.html">Evidence</a></nav>' +
-'<p class="sf-cp">© ' + year + ' Noushad Mostafa<span class="n-ver"></span></p>' +
+'<p class="sf-cp">Created by Noushad M. © ' + year + ' HyperAudio<span class="n-ver"></span></p>' +
 '</div>';
 B.appendChild(foot);
 function themeSync() {
@@ -370,3 +370,13 @@ n.setAttribute("aria-label", "Active profile: " + p.name);
 ;(function(){try{if("serviceWorker"in navigator&&location.protocol!=="file:"){var s=document.currentScript&&document.currentScript.src;if(s)navigator.serviceWorker.register(new URL("../../sw.js",s).href).catch(function(){})}}catch(e){}})();
 
 ;(function(){try{var f=(location.pathname.split("/").pop()||"").replace(/\.html$/,"");document.querySelectorAll("[data-k]").forEach(function(a){if(a.dataset.k===f)a.setAttribute("aria-current","page")})}catch(e){}})();
+
+;(function(){if(!document.querySelector(".lp"))return;var d=document.documentElement,rm=matchMedia("(prefers-reduced-motion:reduce)").matches;
+var els=[].slice.call(document.querySelectorAll(".lp-s"));
+if(rm||!("IntersectionObserver"in window)){els.forEach(function(e){e.classList.add("in")});}else{d.classList.add("lp-on");
+var io=new IntersectionObserver(function(l){l.forEach(function(x){if(x.isIntersecting){x.target.classList.add("in");io.unobserve(x.target)}})},{threshold:.15,rootMargin:"0px 0px -6% 0px"});els.forEach(function(e){io.observe(e)});}
+var t=document.querySelector(".lp-tilt");if(!t||rm||!matchMedia("(hover:hover)").matches)return;
+t.addEventListener("animationend",function(){t.classList.add("on")},{once:true});
+t.addEventListener("pointermove",function(e){var r=t.getBoundingClientRect(),x=(e.clientX-r.left)/r.width,y=(e.clientY-r.top)/r.height;t.style.setProperty("--ry",((x-.5)*8).toFixed(2)+"deg");t.style.setProperty("--rx",((.5-y)*6).toFixed(2)+"deg");t.style.setProperty("--mx",(x*100)+"%");t.style.setProperty("--my",(y*100)+"%")});
+t.addEventListener("pointerleave",function(){t.style.setProperty("--rx","0deg");t.style.setProperty("--ry","0deg")});
+})();

site/assets/js/theme-init.js

@@ -2,3 +2,5 @@ try {
 var t = localStorage.getItem("ha-theme");
 if (t === "light" || t === "dark") document.documentElement.dataset.theme = t;
 } catch (e) {}
+
+;(function(){var m={"setup": "setup.html", "apply": "apply.html", "files": "files.html", "evidence": "evidence.html", "faq": "faq.html", "releases": "files.html#releases", "status": "evidence.html#status", "hardware": "setup.html#hardware"},h=location.hash.slice(1);if(h&&m[h]&&!/\/docs\//.test(location.pathname)&&/(^|\/)(index\.html)?$/.test(location.pathname))location.replace(m[h]);})();

site/files.html

@@ -200,7 +200,7 @@
 </div>
 </section>
 <section class="flow" id="releases" aria-labelledby="h-rel"><div class="sec-h"><div><h2 id="h-rel">All releases</h2><p>Older versions are kept for reference, newest first, each with its checksums.</p></div></div><ul class="rel-l" id="relL"></ul><p class="note" id="relErr" hidden>The release list could not be loaded.</p></section>
-<script>fetch("data/versions.json").then(function(r){return r.json()}).then(function(v){var h="";v.forEach(function(x){var n=x.v.replace(/^v/,""),d=x.dl?x.dl.replace(/SHA256SUMS\.txt$/,""):"";h+='<li><div><b>'+x.v+'</b><small>'+x.date+' · '+x.status+'</small></div>'+(d?'<div class="rel-a"><a class="btn sm" href="'+d+'HyperAudio_'+n+'_all.zip" download>All profiles (.zip)</a><a class="btn sm" href="'+d+'SHA256SUMS.txt">Checksums</a></div>':'<small>Record only, files not kept</small>')+'</li>'});document.getElementById("relL").innerHTML=h}).catch(function(){document.getElementById("relErr").hidden=false});</script>
+<script>fetch("data/versions.json").then(function(r){return r.json()}).then(function(v){var h="";v.forEach(function(x){var n=x.v.replace(/^v/,""),d=x.dl?x.dl.replace(/SHA256SUMS\.txt$/,""):"";h+='<li><div><b>'+x.v+'</b><small>'+(x.date?x.date+' · ':'')+x.status+'</small>'</div>'+(d?'<div class="rel-a"><a class="btn sm" href="'+d+'HyperAudio_'+n+'_all.zip" download>All profiles (.zip)</a><a class="btn sm" href="'+d+'SHA256SUMS.txt">Checksums</a></div>':'<small>Record only, files not kept</small>')+'</li>'});document.getElementById("relL").innerHTML=h}).catch(function(){document.getElementById("relErr").hidden=false});</script>
 <section class="flow" aria-label="Continue"><nav class="dnav" aria-label="Previous and next"><a href="apply.html"><span class="k">&larr; Previous</span><b>Apply</b></a><a class="nxt" href="evidence.html"><span class="k">Next &rarr;</span><b>Evidence</b></a></nav></section>
 </main>
 <script src="assets/js/chart.js"></script>