diff --git a/web/sandbox/studio.html b/web/sandbox/studio.html
index 824b96f..5a93bff 100644
--- a/web/sandbox/studio.html
+++ b/web/sandbox/studio.html
@@ -29,6 +29,24 @@
--hw-syn-fn: #c8a878;
--hw-syn-id: #b8b0a0;
--hw-syn-op: #6c6660;
+
+ /* shared brushed-metal language for all rack frames + sub-panels */
+ --metal-specular: linear-gradient(180deg,
+ rgba(255, 248, 230, 0.08) 0%,
+ rgba(255, 248, 230, 0.03) 28%,
+ rgba(255, 248, 230, 0) 45%,
+ rgba(0, 0, 0, 0) 70%,
+ rgba(0, 0, 0, 0.10) 100%);
+ --metal-brush: repeating-linear-gradient(0deg,
+ rgba(255, 250, 235, 0.018) 0px,
+ rgba(255, 250, 235, 0.018) 1px,
+ rgba(0, 0, 0, 0.030) 1px,
+ rgba(0, 0, 0, 0.030) 2px);
+ --metal-bevel:
+ inset 0 1px 0 rgba(255, 248, 230, 0.18),
+ inset 0 -1px 0 rgba(0, 0, 0, 0.70),
+ inset 1px 0 0 rgba(255, 248, 230, 0.06),
+ inset -1px 0 0 rgba(0, 0, 0, 0.45);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--hw-fg);
@@ -49,16 +67,18 @@
/* ===================================================================== */
.hardware {
position: relative;
+ /* darker base than the sub-panels so they stand out against it */
background:
- radial-gradient(ellipse at 30% 0%, var(--hw-bg-hi) 0%, var(--hw-bg) 50%, var(--hw-bg-lo) 100%);
+ var(--metal-specular),
+ var(--metal-brush),
+ linear-gradient(180deg, #181513 0%, #100c08 60%, #080604 100%);
border: 1px solid var(--hw-edge);
border-radius: 10px;
box-shadow:
- inset 0 1px 0 rgba(255, 220, 180, 0.05),
- inset 0 -1px 0 rgba(0, 0, 0, 0.7),
+ var(--metal-bevel),
inset 0 0 0 1px rgba(232, 160, 80, 0.04),
- 0 1px 0 rgba(255, 220, 180, 0.02),
- 0 8px 24px rgba(0, 0, 0, 0.55);
+ 0 8px 32px rgba(0, 0, 0, 0.65),
+ 0 1px 0 rgba(255, 220, 180, 0.04);
padding: 14px;
display: grid;
grid-template-columns: 1fr 220px;
@@ -104,12 +124,14 @@
font-size: 10px;
letter-spacing: 0.08em;
background:
- linear-gradient(180deg, #1f1d1a 0%, #14130f 100%);
+ var(--metal-specular),
+ var(--metal-brush),
+ linear-gradient(180deg, #25211d 0%, #16130f 100%);
border: 1px solid var(--hw-edge);
border-radius: 4px;
box-shadow:
- inset 0 1px 0 rgba(255,220,180,0.05),
- inset 0 -1px 0 rgba(0,0,0,0.6);
+ var(--metal-bevel),
+ 0 2px 4px rgba(0, 0, 0, 0.4);
}
.top-bar > *, .bottom-bar > * { align-self: center; }
.top-bar .btn-group { align-self: stretch; }
@@ -212,36 +234,18 @@
/* Right column */
/* ===================================================================== */
- /* shared brushed-metal panel treatment for sub-panels inside the rack.
- Applied to .knobs and .seq. Multiple layered backgrounds + bevels. */
+ /* shared brushed-metal panel treatment for sub-panels inside the rack */
.knobs, .seq {
border: 1px solid var(--hw-edge);
border-radius: 6px;
background:
- /* (1) horizontal specular band on the upper portion */
- linear-gradient(180deg,
- rgba(255, 248, 230, 0.08) 0%,
- rgba(255, 248, 230, 0.03) 28%,
- rgba(255, 248, 230, 0) 45%,
- rgba(0, 0, 0, 0) 70%,
- rgba(0, 0, 0, 0.10) 100%),
- /* (2) brushed horizontal stripes — very fine, very subtle */
- repeating-linear-gradient(0deg,
- rgba(255, 250, 235, 0.018) 0px,
- rgba(255, 250, 235, 0.018) 1px,
- rgba(0, 0, 0, 0.030) 1px,
- rgba(0, 0, 0, 0.030) 2px),
- /* (3) base vertical gradient (light from above on dark anodised metal) */
- linear-gradient(180deg, #2a2622 0%, #1a1612 55%, #110d09 100%);
+ var(--metal-specular),
+ var(--metal-brush),
+ /* brighter base than .hardware so they read as plates mounted on top */
+ linear-gradient(180deg, #2c2823 0%, #1a1612 55%, #110d09 100%);
box-shadow:
- /* bevel — bright top edge + dark bottom edge + side strokes */
- inset 0 1px 0 rgba(255, 248, 230, 0.18),
- inset 0 -1px 0 rgba(0, 0, 0, 0.70),
- inset 1px 0 0 rgba(255, 248, 230, 0.06),
- inset -1px 0 0 rgba(0, 0, 0, 0.45),
- /* warm rim light pooling at the very bottom */
+ var(--metal-bevel),
inset 0 -10px 14px -10px rgba(255, 220, 180, 0.10),
- /* drop shadow under the panel for depth */
0 2px 4px rgba(0, 0, 0, 0.45),
0 6px 14px rgba(0, 0, 0, 0.30);
}