Add animated glass background, breadcrumbs, and brand mark polish

Cards now sit on an animated signature-gradient background and use a
translucent, blurred bp-glass surface so it shines through; extended
bp-glass to every stat surface on the Stats page and to its tab switcher.
Adds a Breadcrumbs component below the header on all app pages.

Also: drop the gradient text fill from the wordmark/heading, animate the
BrandMark's heart and curve on the dashboard hero instead of a plain pulse
ring, recenter the heart/curve artwork in icon.svg and BrandMark, close the
mobile nav menu on link click, remove the redundant "back to recordings"
button, and match the "Start session"/"Scan for devices" button sizes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-26 18:47:30 +02:00
co-authored by Claude Sonnet 5
parent 9e0380ec75
commit c46adf788f
14 changed files with 248 additions and 93 deletions
+14 -12
View File
@@ -7,16 +7,18 @@
</linearGradient>
</defs>
<rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGrad)" />
<path
d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
fill="rgba(255,255,255,0.22)"
/>
<polyline
points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
fill="none"
stroke="#ffffff"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
/>
<g transform="translate(0 0.7)">
<path
d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
fill="rgba(255,255,255,0.22)"
/>
<polyline
points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
fill="none"
stroke="#ffffff"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 884 B

After

Width:  |  Height:  |  Size: 950 B