diff --git a/audio.js b/audio.js index 8137b7a..90e8961 100644 --- a/audio.js +++ b/audio.js @@ -120,7 +120,7 @@ export const zombieMusic = () => loopBed('zombie-mode.m4a', 800, 0.2, 20.47077); // — which is the loopEnd, because the decoded buffer is NOT (measured 48.0174 s in Chrome; see the // padding note in loopBed). Re-encode the file and you must re-measure that number: // fetch(f).then(r=>r.arrayBuffer()).then(a=>new AudioContext().decodeAudioData(a)).then(b=>b.duration) -export const menuMusic = () => loopBed('background-music.m4a', 30, 0.5, 48); +export const menuMusic = () => loopBed('background-music.m4a', 30, 0.65, 48); // duck a bed to silence (out=true) or back to its base level over `secs` — the sudden-death duel mutes the music function fadeBed(file, out, secs = 0.7) { diff --git a/index.html b/index.html index 83fe3f1..55f9d45 100644 --- a/index.html +++ b/index.html @@ -97,7 +97,18 @@ .btn.plate, .btn.plate2 { padding: 15px 10px; font-size: 15px; letter-spacing: 2px; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; text-shadow: 0 2px 0 rgba(0,0,0,0.9); } - .btn.plate { background-image: url('assets/btn_start.png?v=94'); color: #f7ecb8; } + /* No gold frame on START any more — the sweep below is what draws the eye, and the two buttons + now share one border so the pair reads as a pair. */ + .btn.plate { background-image: url('assets/btn_start.png?v=94'); color: #f7ecb8; + border-color: #3b4354; position: relative; overflow: hidden; } + /* a light passing over the sign: across in ~0.8s, then still for the rest of the cycle. + pointer-events:none so the sweep can never eat the tap. */ + .btn.plate::after { content: ''; position: absolute; inset: 0; pointer-events: none; + background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.34) 50%, + transparent 58%); + transform: translateX(-140%); animation: shine 4.5s ease-in-out infinite; } + @keyframes shine { 0% { transform: translateX(-140%); } 18%, 100% { transform: translateX(140%); } } + @media (prefers-reduced-motion: reduce) { .btn.plate::after { animation: none; opacity: 0; } } .btn.plate2 { background-image: url('assets/btn_tut.png?v=94'); color: #d6dfec; } .btn.back { font-size: 10px; padding: 9px 10px; color: #8a96ab; } /* a row, not a stacked tile: three 3:2 tiles stacked fill a phone twice over, and the art still @@ -139,7 +150,7 @@
Fifteen. Thirty. Forty. Dead.
- +