Same metal treatment now applies to the outer hardware frame, the
top/bottom bars and the sub-panels (knobs + seq). Three CSS custom
properties capture the shared visual language so each frame just
plugs them in:
- --metal-specular: vertical gradient with a soft bright band on the
upper portion
- --metal-brush: very fine repeating horizontal stripes
- --metal-bevel: 4-edge inset shadow set (bright top + dark bottom +
highlighted left + dark right)
Per-element base colours retain a depth hierarchy: the outer
.hardware is the darkest, top/bottom bars sit slightly brighter, and
.knobs/.seq are the brightest plates so they read as mounted on top.
Drop shadows scaled to scope: .hardware gets a strong 0 8px 32px,
the bars get a small 0 2px 4px, and the sub-panels keep their two
layered drop shadows for depth.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
29f1a1e58b