/* ═══════════════════════════════════════════════════════════════════════════ EVERYTHING BELOW IS IN @layer skew, AND THAT IS THE ONE LINE AN ADOPTER CARES ABOUT. An unlayered rule beats a layered one no matter what the specificity says. So an app that has its own `.row`, `.box`, `.key`, `.head`, `.page` or `.wrap` — and every app has some of those — keeps its own, without renaming anything and without a single `!important`. It also disarms the trap this file's own notes describe three times over: `[data-skin=light] .sw` out-ranking `.sw.on`, a material rule silently un-pressing a key. Layers order by DECLARATION, not by specificity, so the state rules an app writes on top can no longer lose to a material rule underneath. The app declares the order it wants, once, before it loads anything: @layer skew, app; Omit it and the browser orders layers by first appearance, which puts skew first anyway. So the default is already right; declaring it is how you say it on purpose. ═══════════════════════════════════════════════════════════════════════════ */ @layer skew { /* ═══════════════════════════════════════════════════════════════════════════ PHYSICAL UI — an exploration, not the design system. This file answers one question: if the targz visual language were rebuilt as machined hardware — anodised chassis, backlit keys, jewel LEDs, engraved plates — what would the LAYER PANEL of Portrait-Typo look like? Nothing here is adopted. index.html is untouched. The layer panel's anatomy (rows, switches, colour bar, TONE badge, duplicate/delete, the chevron and the stroke strip it opens, the counted Clear-all) is the REAL one, lifted from Portrait-Typo/ui.js — so the comparison is like for like and this is a re-skin of a shipping component rather than an invented one. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── the material palette ─────────────────────────────────────────────── */ --room: #0b0b0d; /* the desk it sits on */ --case: #191a1d; /* anodised aluminium chassis */ --case-lo: #101113; /* the shaded half of every bevel */ --case-hi: #2e3137; /* the lit half */ --bay: #0e0f11; /* the recessed well the rows sit in */ --plate: #232529; /* a raised key / module face */ --plate-hi: #34373d; --groove: #08090a; /* milled channel */ --rim: rgba(255,255,255,.09); /* the 1px lit top edge */ --rim-lo: rgba(0,0,0,.75); /* the 1px dark bottom edge */ --txt: #d3d6dc; /* laser-etched white infill */ --txt-dim: #7d828c; --txt-etch: #0a0b0c; /* engraved-into-metal text */ --led: #FF6A00; /* the accent is a LAMP here, not a fill */ --led-hot: #FFB273; --led-red: #FF2D2D; /* ── THE RECESS, ONCE ───────────────────────────────────────────────── Everything that goes IN uses these two, whatever its size. It took the whole layer switch to arrive at them and there is no reason for the nav bar or a tab to relearn it — worse, five copies is five things that drift apart the next time one is tuned. One place to change, one place to read. --recess the four walls, sharp: a hard near-black line under the top edge, the sides tight, the bottom softer because that is the wall light reaches, and a lit lip under it all --chamfer the broken edge of the cutout, lit DIRECTIONALLY and with concave polarity — dark where it turns from the lamp at the top, bright where it turns into it at the bottom. Get this backwards and the control reads as a bump, every time. */ --recess: inset 0 0 0 1px rgba(0,0,0,.73), inset 0 2.4px 1.2px rgba(0,0,0,.86), inset 0 3.6px 4.8px -1.2px rgba(0,0,0,.51), inset 3.6px 0 3.6px -2.4px rgba(0,0,0,.57), inset -3.6px 0 3.6px -2.4px rgba(0,0,0,.57), inset 0 -3.6px 4.8px -2.4px rgba(0,0,0,.31), inset 0 -1px 0 rgba(255,255,255,.15), 0 1px 0 #101317, 0 1px 1px rgba(0,0,0,.4); --chamfer: linear-gradient(152deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.20) 24%, rgba(255,255,255,0) 50%, rgba(255,255,255,.30) 100%); --font: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; /* Grain. One texture, reused everywhere — real metal is never flat, and a gradient with no grain reads as plastic within about two seconds. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } *{ box-sizing:border-box; } html,body{ margin:0; } body{ background: radial-gradient(120% 90% at 50% -10%, #1c1d21 0%, var(--room) 62%), var(--room); color:var(--txt); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; min-height:100vh; } /* THE AIR IN THE ROOM, NOT A TEXTURE ON THE PANELS, and `fixed` is what says so: an absolute grain swims with the canvas when you pan, and a grain that travels with the artwork is read as dirt on the paper. THE Z IS A TOKEN BECAUSE 99 IS ONLY RIGHT HERE. This page has no floating panels, so the grain can sit over everything. An app has panels, and the grain belongs UNDER them and OVER the canvas — Portrait-Typo sets 90 against panels at 96 and up. Take this rule at 99 into an app and it lays a haze over your own panels, which is an afternoon spent looking for it in the panel's CSS. */ body::after{ content:''; position:fixed; inset:0; pointer-events:none; z-index:var(--grain-z, 99); background-image:var(--grain); opacity:.035; mix-blend-mode:overlay; } /* ══════════════════════════════════════════════════════════════════════════ THE SHEET The one rule the whole block exists for: A THEME THAT TINTS THE THING BEING DRAWN IS A THEME THAT LIES ABOUT THE DRAWING. The chrome is anodised metal on a near-black desk. The paper is paper. Nothing here reaches inside it — no grain, no tint, no filter, no blend mode — and the only thing this class does is put it on the desk convincingly. THE SHADOW IS BIGGER THAN ANY PANEL'S, and it has to be. Every raised thing in this language uses one wide soft shadow plus one tight contact shadow; at panel size that is 6px and 2px. A white sheet on a near-black desk at those numbers reads as a sticker. Same recipe, ten times the throw. ══════════════════════════════════════════════════════════════════════════ */ .sheet{ background:#fff; box-shadow: 0 30px 60px -18px rgba(0,0,0,.9), /* the throw: how far off the desk it is */ 0 6px 16px -4px rgba(0,0,0,.7); /* the contact: where it actually touches */ } /* A CANVAS OR AN SVG IS A REPLACED ELEMENT and sits on the text baseline, so the sheet gets a few pixels of white under it that no padding explains. */ .sheet > canvas, .sheet > svg{ display:block; } /* AND SOMETIMES THE SHEET IS NOT THE SUBJECT. A 3D view, a depth map or a debug pass is a WINDOW onto something, not a piece of paper laid on a desk, and a window does not throw a shadow. */ .sheet.window{ box-shadow:none; } /* ══════════════════════════════════════════════════════════════════════════ THE GRID ON THE SHEET Paper you are about to plot on is not blank paper. The grid is the only thing on the sheet that is NOT the work, which is the whole difficulty: it has to be readable enough to align against and faint enough that you never mistake a rule for a stroke. So it is ink, in millimetres, with its own colour and its own opacity, and it sits on the sheet rather than in it. TWO WEIGHTS, AND THE SECOND IS THE POINT. A single pitch is either too coarse to place anything against or so dense it greys the page. Majors carry the count, sublines subdivide them, and the sublines are thinner AND fainter — a grid you read as a hierarchy rather than as a texture. EVERY NUMBER IS A CUSTOM PROPERTY because every one of them is a setting in the app: the panel writes them and the CSS draws. Nothing here is hard-coded that a Grid bay does not expose. ══════════════════════════════════════════════════════════════════════════ */ .grid{ --grid-pitch: 15px; /* major spacing. SQUARE: same both ways */ --grid-minor: 3px; /* subline spacing. AN EXACT DIVISOR of it */ --grid-w: 1px; /* major weight */ --grid-subw: 1px; /* subline weight */ --grid-ink: #7FB2E5; --grid-op: 1; --grid-subink: color-mix(in srgb, var(--grid-ink) 40%, transparent); position:absolute; inset:0; pointer-events:none; opacity:var(--grid-op); background-image: repeating-linear-gradient(to right, var(--grid-subink) 0 var(--grid-subw), transparent var(--grid-subw) var(--grid-minor)), repeating-linear-gradient(to bottom, var(--grid-subink) 0 var(--grid-subw), transparent var(--grid-subw) var(--grid-minor)), repeating-linear-gradient(to right, var(--grid-ink) 0 var(--grid-w), transparent var(--grid-w) var(--grid-pitch)), repeating-linear-gradient(to bottom, var(--grid-ink) 0 var(--grid-w), transparent var(--grid-w) var(--grid-pitch)); } /* ── THREE RULES THAT LOOK LIKE FUSSING AND ARE NOT ──────────────────────── SQUARE CELLS. One pitch for both axes, so a cell is a square unit — which is what ruled paper is. Dividing each axis into the same COUNT gave 15 x 21 cells on a 300 x 424 sheet: a grid describing the sheet's proportions rather than a unit of measure, and you cannot count a distance on it. THE PITCHES ARE WHOLE PIXELS AND THE MINOR EXACTLY DIVIDES THE MAJOR. A repeating gradient at 3.04px does not land on the device grid, so the renderer rounds each repeat independently and the error walks — which draws a staircase across the sheet and looks like a bug in the drawing rather than in the ruling. The panel does that arithmetic and hands CSS integers. AND THE WEIGHT IS 1px, NOT 0.5. Below one device pixel a line does not get thinner, it gets rounded up to one and drawn at full strength, so a 0.2mm subline and a 0.5mm major came out identical and the hierarchy vanished at exactly the density it matters. Weight below 1px is carried by ALPHA — which is what `--grid-subink` is for. */ /* THE RULERS ARE ENGRAVED ON THE DESK, so they are LIGHT lines. This is the one place the engraving rule inverts: everywhere else a cut is darker than its surface with a lit far wall, but the desk is already near black and a near black tick on it is not a tick. */ .ruler-tick{ background:rgba(255,255,255,.34); opacity:1; } .ruler-label{ color:#6d727c; font-family:var(--font); font-size:8px; letter-spacing:.1em; text-shadow:0 1px 0 rgba(0,0,0,.8); } /* ── THE DESK SPECIMEN'S FURNITURE ──────────────────────────────────────── A ruler is a strip with ticks in it, and the strip is the app's to place — Portrait-Typo hangs one on each edge of `#canvas-container` and insets both with the drawer. What the language owns is what a tick LOOKS like on this ground, above; this is the minimum frame that lets you see it. */ .ruler{ position:absolute; pointer-events:none; } .ruler-top{ top:-13px; left:0; right:0; height:11px; } .ruler-left{ left:-13px; top:0; bottom:0; width:11px; } .ruler-tick{ position:absolute; } .ruler-top .ruler-tick{ bottom:0; width:1px; height:4px; } .ruler-top .ruler-tick.long{ height:9px; } .ruler-left .ruler-tick{ right:0; height:1px; width:4px; } .ruler-left .ruler-tick.long{ width:9px; } /* THE SPECIMEN'S STAGE, and it is doc-only — the exclude list in tools/build-dist.mjs names `.deskdemo`, so it does not reach an app. The sheet itself is a part; the box it is posed in is this page. THE SPECIMEN'S OWN SIZE IS INLINE ON THE ELEMENT, not a `.deskdemo .sheet` rule here, and that is the exclude list's one sharp edge: a selector naming a doc class AND a part is KEPT, because dropping `.mat .knob` would take a part's geometry with it. Correct in general, and here it would have shipped a dead rule sizing a sheet inside a container an app does not have. */ /* THE SHEET SITS ON A STAGE LIKE EVERY OTHER SPECIMEN, and the loupe needs it: a glass overhanging the paper has to overhang ONTO something. */ .deskdemo{ display:flex; align-items:center; justify-content:center; gap:56px; flex-wrap:wrap; padding:18px 0 6px; margin:0; width:100%; } /* THE BAY IS THE SPECIMEN'S OTHER HALF. A grid you cannot change is a picture of a grid; the panel is what makes the sheet an argument. Doc-only. */ /* ══════════════════════════════════════════════════════════════════════════ THE LOUPE — a magnifier lying on the paper A rectangular inset off to one side is a second picture you have to relate to the first. A round glass sitting ON the sheet, overhanging its corner and throwing a shadow onto the desk, is the same object as everything else here: a thing on a table, at 1:1, that you would pick up. IT IS ROUND BECAUSE LENSES ARE, and that is not decoration — a circle is the one silhouette on this page that cannot be mistaken for a panel, so nothing about it reads as another control to operate. THREE PARTS, SAME AS EVERY OTHER OBJECT: a machined bezel with the lit edge at the top, glass cut into it, and a specular that runs off the lamp at 158° like the rest of the room. ══════════════════════════════════════════════════════════════════════════ */ .loupe{ position:absolute; right:-46px; top:-46px; width:146px; height:146px; padding:7px; border-radius:50%; pointer-events:none; background:linear-gradient(158deg,#3a3e45 0%,#22252a 46%,#15171a 72%,#2b2e34 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.20), /* the lit top of the ring */ inset 0 -2px 0 rgba(0,0,0,.9), /* and its shaded underside */ 0 26px 40px -14px rgba(0,0,0,.95), /* the throw onto the desk */ 0 6px 12px -3px rgba(0,0,0,.8), /* the contact */ 0 0 0 1px rgba(0,0,0,.85); /* the lifted edge, all round */ } /* THE GLASS IS CUT INTO THE BEZEL, so it takes the well's inset and not a border: a lens sits below the ring that holds it, never on top of it. */ .loupe-glass{ position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; background:#fff; box-shadow: inset 0 3px 7px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.35); } /* THE SPECULAR IS ON THE OUTSIDE OF THE GLASS and does not care what is under it, so it runs the full disc rather than stopping at the grid. */ .loupe-glass::after{ content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none; background: linear-gradient(158deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.14) 15%, rgba(255,255,255,.02) 30%, transparent 46%), radial-gradient(120% 120% at 78% 88%, rgba(0,0,0,.16), transparent 52%); } /* THE MAGNIFICATION IS ENGRAVED ON THE BEZEL, because it is a property of the instrument rather than a value the panel sets. */ /* THE MARK MOVED UNDER THE GLASS WITH IT. At the top-right corner the label would otherwise sit on the top ruler. */ .loupe-mark{ position:absolute; left:0; right:0; bottom:-15px; text-align:center; font-family:var(--font); font-size:8px; letter-spacing:.16em; color:#4c515a; text-shadow:0 1px 0 rgba(255,255,255,.10); } /* THE CONTROLS MOVED AND THE SHEET SAYS SO. A stage that used to carry its own panel and now carries nothing reads as unfinished; one line of engraving is what a real case does when the knob is on the other side. */ .gridmoved{ margin:10px 0 0; } .gridbody{ padding:9px 10px 11px; gap:9px; } .gridrow{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 8px; } /* THE VALUE SITS BESIDE THE DIAL. `bare` was the first choice and it showed only the pointer, which on a control whose whole subject is tenths of a millimetre is a control you cannot read — you could turn Sub mm all the way and never learn what you had set it to. */ .gridrow .kwrap.compact{ gap:8px; } .gridrow .kwrap.compact .kval{ min-width:46px; } .gridcol{ display:flex; align-items:center; gap:8px; } /* THE SWATCH IS A CAP, not a colour box: it goes down when you press it and it carries the ink on its face, the way every other lit thing here does. */ .gridswatch{ width:34px; height:22px; flex:0 0 34px; border:0; padding:0; cursor:pointer; border-radius:6px; background:var(--sw, #7FB2E5); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.6); transition:transform .1s; } .gridswatch:active{ transform:translateY(1px); } /* ── page furniture ──────────────────────────────────────────────────────── */ .wrap{ max-width:1160px; margin:0 auto; padding:56px 32px 120px; } .masthead{ margin-bottom:14px; } .kicker{ font-family:var(--font); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--led); margin:0 0 14px; } h1{ font-size:clamp(30px,5vw,52px); line-height:1.02; margin:0 0 16px; font-weight:700; letter-spacing:-.02em; color:#f2f4f7; } .lede{ font-size:15px; line-height:1.65; color:#9ba0aa; max-width:62ch; margin:0 0 8px; } .lede b{ color:#d3d6dc; font-weight:600; } .warn{ display:flex; gap:12px; align-items:flex-start; margin:28px 0 0; padding:14px 16px; border:1px solid rgba(255,106,0,.28); border-radius:10px; background:linear-gradient(180deg, rgba(255,106,0,.10), rgba(255,106,0,.04)); font-size:13px; line-height:1.6; color:#c8bdb2; max-width:76ch; } .warn svg{ flex:0 0 16px; width:16px; height:16px; margin-top:2px; stroke:var(--led); fill:none; stroke-width:1.8; } h2{ font-size:12px; font-family:var(--font); letter-spacing:.18em; text-transform:uppercase; color:#6d727c; font-weight:600; margin:78px 0 6px; padding-bottom:10px; border-bottom:1px solid #212327; } h2 span{ color:#3d4149; } /* `.sub` IS GONE. Twelve paragraphs across four pages introduced sections that introduce themselves — a heading, then a specimen you can put your hands on, with a sentence in between explaining what you were about to see. The `.stage-note` on each specimen already says what it is, in six words, in the place you are already looking. */ /* ═══════════════════════════════════════════════════════════════════════════ THE STAGE — a lit desk. The light comes from above-left and every bevel, glow and cast shadow in the panel agrees with it. One light source is the whole difference between "3D" and "a pile of gradients". ═══════════════════════════════════════════════════════════════════════════ */ .stage{ position:relative; margin-top:34px; padding:64px 40px; border-radius:18px; background: radial-gradient(70% 60% at 28% 0%, rgba(255,255,255,.055), transparent 60%), linear-gradient(180deg,#141518,#0c0d0f); border:1px solid #1e2024; display:flex; gap:56px; align-items:flex-start; justify-content:center; flex-wrap:wrap; } .stage-note{ position:absolute; left:18px; top:14px; font-family:var(--font); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#3f434a; } /* ═══════════════════════════════════════════════════════════════════════════ THE CHASSIS Five shadows do the whole job: 1 a wide soft cast shadow on the desk (it is above the surface) 2 a tight contact shadow (it TOUCHES the surface) 3 inset 1px light on the top edge (the lit chamfer) 4 inset 1px dark on the bottom edge (the shaded chamfer) 5 a broad inset dark from below (the body has thickness) ═══════════════════════════════════════════════════════════════════════════ */ .dock{ width:318px; flex:0 0 318px; position:relative; border-radius:14px; background:linear-gradient(176deg,#26282d 0%,#1b1c20 26%,#161719 78%,#1c1d21 100%); box-shadow: 0 42px 60px -24px rgba(0,0,0,.9), 0 8px 14px -6px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.9), inset 0 -18px 26px -20px rgba(0,0,0,.8); padding:3px; user-select:none; } /* Brushed anodising: fine vertical striation + grain. Two cheap layers, and without them the chassis is a plastic toy. */ .dock::before{ content:''; position:absolute; inset:0; border-radius:14px; pointer-events:none; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.020) 0 1px, transparent 1px 3px), var(--grain); background-size:auto, 140px 140px; opacity:.5; mix-blend-mode:overlay; } /* The specular sweep — one soft diagonal band. Placed high-left, matching the room light. Never centred: a centred highlight reads as a sticker. */ .dock::after{ content:''; position:absolute; left:0; right:0; top:0; height:52%; border-radius:14px 14px 40% 40%/14px 14px 100% 100%; pointer-events:none; background:linear-gradient(158deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.016) 42%, transparent 70%); } /* Corner screws. Four, real, at the same inset — the cheapest single detail that says "this is an object". Each is a countersunk pit + a domed head. */ .screw{ position:absolute; width:9px; height:9px; border-radius:50%; z-index:3; background: radial-gradient(circle at 34% 28%, #6a6f78 0%, #3c4046 42%, #202225 100%); box-shadow: inset 0 -1px 1px rgba(0,0,0,.85), inset 0 1px 1px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.85); } .screw::after{ /* the slot, oriented differently on each — nobody torques four screws to the same angle */ content:''; position:absolute; inset:0; background:linear-gradient(var(--a,20deg), transparent 44%, rgba(0,0,0,.85) 44%, rgba(0,0,0,.85) 56%, transparent 56%); border-radius:50%; box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } .screw.tl{ left:7px; top:7px; --a:24deg; } .screw.tr{ right:7px; top:7px; --a:-58deg; } .screw.bl{ left:7px; bottom:7px; --a:82deg; } .screw.br{ right:7px; bottom:7px; --a:-12deg; } /* ── the header: an engraved faceplate ───────────────────────────────────── */ .head{ display:flex; align-items:center; gap:9px; padding:14px 13px 12px 17px; position:relative; z-index:2; border-bottom:1px solid rgba(0,0,0,.7); box-shadow:0 1px 0 rgba(255,255,255,.05); } .head .t{ flex:1; font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; /* ENGRAVED, not printed: the glyph is darker than the metal and carries a 1px light line UNDER it, which is the lit far wall of the cut. */ color:#5d626b; text-shadow:0 1px 0 rgba(255,255,255,.10), 0 -1px 0 rgba(0,0,0,.6); } /* The count is a LAMP — a 7-segment window, dark glass with the digit lit behind it. The panel's numbers stop being text and become a readout. */ .readout{ min-width:30px; height:22px; padding:0 7px; display:flex; align-items:center; justify-content:center; border-radius:4px; background:linear-gradient(180deg,#0a0c0b,#111413); box-shadow: inset 0 2px 4px rgba(0,0,0,.95), inset 0 -1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.06); font-family:var(--font); font-size:13px; font-weight:700; color:#7CFFB0; text-shadow:0 0 7px rgba(124,255,176,.75), 0 0 18px rgba(124,255,176,.35); font-variant-numeric:tabular-nums; } /* ── a KEY: the physical push button primitive ───────────────────────────── */ /* Everything clickable in this panel is one of these at some size. Raised face, chamfered rim, cast shadow; pressed = travel down + the shadow collapses + the top highlight moves to the bottom. That last part is what sells the travel — a button that only moves 1px still looks flat. */ .key{ display:flex; align-items:center; justify-content:center; border:0; padding:0; cursor:pointer; position:relative; border-radius:7px; color:#9aa0aa; background:linear-gradient(180deg,var(--plate-hi),var(--plate) 52%,#1a1c20); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.7), 0 2px 0 #0e0f11, 0 3px 5px rgba(0,0,0,.65); transition:box-shadow .09s ease, transform .09s ease, color .12s; } .key:hover{ color:#e2e5ea; background:linear-gradient(180deg,#3b3f46,#2a2d32 52%,#1e2024); } .key:active,.key.pressed{ transform:translateY(2px); background:linear-gradient(180deg,#1a1c20,#232529); box-shadow: inset 0 2px 4px rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.07), 0 0 0 #0e0f11, 0 1px 2px rgba(0,0,0,.6); } .key:disabled{ opacity:.32; cursor:not-allowed; transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 #0e0f11; } .key svg{ stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .add{ width:26px; height:26px; border-radius:8px; } .add svg{ width:14px; height:14px; stroke-width:2.2; } .add:hover{ color:var(--led-hot); } /* ── the BAY: the milled well the rows drop into ─────────────────────────── */ .bay{ position:relative; z-index:2; margin:11px 9px; padding:8px 7px; border-radius:9px; /* THE WELL CAME UP IN VALUE WITH THE CAPS. It was near-black, which was fine when the switches were near-black too — now they are grey, and a grey cap on a black floor is a cut-out sitting on nothing. A recess is not a hole into space; it is the same case seen deeper, so it is the case's colour minus some light, not minus all of it. The inset shadow is what makes it read as below the surface; the fill only has to be darker than the surface, not black. */ background:linear-gradient(180deg,#17191d,#1e2126); box-shadow: inset 0 3px 7px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(255,255,255,.055); display:flex; flex-direction:column; gap:5px; } /* ══════════════════════════════════════════════════════════════════════════ THE INTERLOCK — n latching keys on one bar, one down at a time. It is not a new mechanism and it never needed a new part. `pkey` carries the interlock (press one, the others pop out) and the bar is `.piano`, the same milled floor every bay uses. What the two add together is a CLAIM: these n things are ONE setting, and exactly one of them is true right now. A row of separate keys says n independent things; sunk into one bar they say one thing with n positions, which is what a mode is. THREE SHAPES, AND ALL THREE ARE IN SHIPPING APPS. A bar (`.piano`), a PALETTE stood on end (`.palette`), and a bar that WRAPS when the names stop fitting (`.piano.sm.hb-tabs`). A fourth was written from scratch as `.seg`, documented as a new part, and never once rendered upright in four attempts. It is gone. The rule it broke is the oldest one here: if a component is not in a real app, it does not belong in Skew. AGAINST THE ROTARY, and the line is about how you read it rather than how many there are: a rotary POINTS at its position, so it is right when the positions are an ordered scale you aim along. An interlock LIGHTS one, which is right when they are unrelated alternatives and each needs its own name and icon at full size. Three tools are not a scale from Pan to Select. ── THE RIG. Doc-only, and it is three widths and nothing else. `.piano` and `.palette` size themselves; the wrapped bar is `width:100%` because in the hatch bay it fills a panel, so here it needs a number to fill. That was the whole of what kept collapsing: a bar sized by its keys while its keys are sized by the bar has no answer on a stage, and every previous fix supplied the number from a chassis wrapped round the outside — so the specimen only stood up inside a case it is never inside in an app. */ .intrig{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:34px 44px; } .intcell{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; } .intcell-cap{ align-self:stretch; } .intcell-wrap{ width:412px; } /* ── THE TOGGLE RIG. Doc-only, and it is one width and nothing else. A `.tog` is `width:100%` because on a panel it fills the bay, so on a stage it needs a number to fill — the same trap the interlock rig spent four rebuilds on. 258px is the settings panel's body width, which is where these actually live. */ .togrig{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:34px 44px; } .togcell{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:258px; } .togcell > .bay-cap{ align-self:stretch; } /* THE HEADING IS THE PANEL'S, NOT THE BAR'S. An interlock sits under a `.bay-cap` like anything else, so it carries no title of its own and cannot disagree with the one above it. */ /* ── a ROW: a module card seated in the bay ──────────────────────────────── */ .item{ display:flex; flex-direction:column; } .row{ display:flex; align-items:center; gap:5px; height:40px; padding:0 8px 0 0; width:100%; border:0; border-radius:7px; cursor:pointer; text-align:left; font-family:inherit; position:relative; overflow:hidden; background:linear-gradient(180deg,#31353b,#25282d 60%,#202328); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.6); transition:box-shadow .12s, background .12s, transform .09s; } .row::after{ /* faceplate grain, per module */ content:''; position:absolute; inset:0; pointer-events:none; background-image:var(--grain); background-size:140px; opacity:.05; mix-blend-mode:overlay; } .row:hover{ background:linear-gradient(180deg,#3a3f46,#2c3036 60%,#26292f); } .row:active{ transform:translateY(1px); } /* THE LAYER'S COLOUR IS A LIGHT PIPE, not a painted bar. An edge-lit acrylic strip: a solid core, a bloom on the metal beside it, and a hot white line up its middle where the LED is brightest. This is the single biggest win of the physical language — the list stops being a legend and starts glowing in the layer's own ink. */ .pipe{ flex:0 0 4px; align-self:stretch; margin:6px 7px 6px 4px; border-radius:3px; position:relative; background:linear-gradient(180deg, var(--lyr), color-mix(in srgb, var(--lyr) 72%, #000)); box-shadow: 0 0 5px color-mix(in srgb, var(--lyr) 85%, transparent), 0 0 14px color-mix(in srgb, var(--lyr) 45%, transparent), inset 0 0 3px rgba(255,255,255,.55); } .pipe::after{ content:''; position:absolute; left:1px; right:1px; top:14%; bottom:14%; border-radius:2px; background:rgba(255,255,255,.55); filter:blur(1px); } .row.off .pipe{ background:#2a2c30; box-shadow:inset 0 1px 1px rgba(0,0,0,.8); } .row.off .pipe::after{ display:none; } /* ── a SWITCH: backlit key, 24px. Off is a dead lamp behind smoked plastic; on is the lamp lit, and the light SPILLS onto the surrounding metal. ───── */ /* ── THE SWITCH IS AN OBJECT WITH A SKIRT, AND IT TRAVELS ──────────────── The cap had light on it but no BODY: an inset chamfer and nothing outside, so it was a painted square rather than a thing standing on a panel. Three additions fix that, and they are the same three that make the big keys work. A SKIRT 0 2px 0 of near-black — the wall of the cap you can see because it is raised off the face A CAST a soft shadow under that wall, on the panel A DOMED FACE a radial sheen from the top-left, so the face is curved rather than a flat ramp And then it MOVES. Off is up; on is driven 2px down and the skirt collapses to nothing, so the cap ends where its own wall used to be. Mixed sits at 1px with half a skirt, which is the only honest place for "some". Three physical positions, readable from across the panel and readable in a greyscale screenshot — the state is in the geometry, not in a colour. ON keeps the CAP'S OWN COLOUR with the gradient inverted (dark at the top where the bezel now shades it, light at the bottom where the well bounces), and lights the GLYPH. Same recipe as the big keys' :active, at 24px. */ .sw{ width:24px; height:24px; flex:0 0 24px; border-radius:7px; display:flex; align-items:center; justify-content:center; border:0; padding:0; cursor:pointer; position:relative; color:#a3aab4; /* a printed legend, not a dimmed one */ /* A GREY CAP, NOT A BLACK ONE. Shadow is a difference, and the cap was already so dark that a hole cut into it had almost nowhere to go — the recess could only be drawn by taking away light that was not there. Lift the unpressed face into real grey and the same shadow suddenly has two stops of room to fall through. This is the one change that makes the pressed state read, and it is a change to the UNPRESSED one. */ background: radial-gradient(125% 95% at 32% 16%, rgba(255,255,255,.14), transparent 62%), linear-gradient(180deg,#474d57 0%,#3a3f48 36%,#2c3138 68%,#22262c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.55), 0 2px 0 #101317, 0 3px 6px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.45); transition:color .12s, box-shadow .1s, background .12s, transform .1s; } /* NO HIT PAD ON A SWITCH CAP, and that is a decision rather than an omission. `::before` is this grain and `::after` is the chamfer, so a pad would have to share one of them — and the only way to share this one is to clip the grain to a content box, which changes what the corner of a 24px cap looks like. A switch travels 1px. Trading the grain on every cap in the kit against 1px of edge on the one control that is usually pressed in the middle of a `.tog` row is not a trade. If it ever is, it needs a third pseudo, not this one. */ .sw::before{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:7px; background-image:var(--grain); background-size:90px; opacity:.09; mix-blend-mode:overlay; } .sw svg{ position:relative; width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transform-origin:50% 50%; transition:transform .1s; } /* AND THE PLATE ANSWERS FOR THE CAP. In a `.tog` the button is the whole line and the cap is a span inside it, so `.sw:hover` and `.sw:active` never fire when the pointer is on the name — which is most of the line. The two states are added to the rules that already own them rather than written again next to them: a second copy of this gradient is a second thing to tune. */ .sw:hover, .tog:hover .sw{ color:#eef1f5; background: radial-gradient(125% 95% at 32% 16%, rgba(255,255,255,.18), transparent 62%), linear-gradient(180deg,#525965 0%,#434955 36%,#343a42 68%,#282d33 100%); } /* pressed by a finger: the cap drops onto its own skirt */ /* ── A SUNK CAP IS A CAP IN SHADOW, and at 24px that has to be overdrawn. The recess was there in the geometry and almost invisible in the paint: one soft 4px inset spread across a 24px face is a suggestion, and a suggestion at this size is nothing. What sells a hole is CONTRAST ACROSS A SHORT DISTANCE, so the shadow is now two layers doing two jobs — a tight, nearly black 2px line immediately under the top edge (the wall of the cutout, hard because it is close), and a wider soft one below it (the light that does get in, falling off). Then the opposite wall: a bright lip along the bottom, where the well bounces light back up into the cap. Top almost black, bottom lit, a hard dark ring round the whole thing. Big keys can be subtle about this because they have room for a gradient to describe the fall-off; a 24px cap has about six pixels to say "deep" in. */ /* SHADOW ON ALL FOUR WALLS — SHARP, NOT HEAVY. The walls were right and the rendering of them was not: 6–12px of blur at near-full black is a cap sitting in fog, and it swallowed the grey it was supposed to be sitting on. A recess this small has HARD edges — the wall is two or three pixels from the face, so the shade it throws cannot have softened over that distance. Blur radii are 1–4px now and the alphas are roughly half what they were. Less ink, placed more exactly, and the cap stays visibly grey underneath it. ALSO ONLY 1px OF TRAVEL. Two corrections that go together. The recess only had a top wall, so it read as a cap with a dark stripe rather than a cap down a hole — a hole has sides, and at 24px the sides are most of what you see of it. There are four inner shadows now: the top hard and near-black, the two sides tight against the edge, the bottom softer, because that is the wall light actually reaches. The lit lip stays under it so the bottom does not just go muddy. And the drop came back to 1px. 2px was a third of the gap between rows — enough that toggling a switch looked like the row twitched. With the walls drawn properly the depth no longer needs the travel to carry it, so the movement can be the small confirming one it should have been. */ /* DOWN IS THE SAME CAP. It declares no fill of its own — it inherits the raised cap's, so the two cannot drift apart when that one is tuned. All that changes is the box-shadow: the skirt goes (it is resting on it now) and the four walls of the recess come on. Plus 1px of travel, and the legend lights. Three declarations, one object. */ .sw:active, .tog:active .sw{ transform:translateY(1px); box-shadow:var(--recess); } /* ── DOWN IS ONE STATE. THE LEGEND SAYS WHICH KIND OF DOWN. ───────────── ON and MIXED are the same cap in the same position with the same recess, and they differ only in the colour of what is printed on it: up + grey legend nothing is on down + WHITE legend some of them are down + ORANGE legend all of them are That is the honest reading of a master over eight switches. A master whose column is half on is NOT half-pressed — the thing it commands is genuinely engaged, just not everywhere — so parking it at its own intermediate height was inventing a mechanical position to stand for a logical one. Down means "this is happening"; the colour says how completely. And white against orange is a difference you can still see with no colour vision at all, because it is a difference in brightness, which the old dim-orange was not. */ .sw.on, .sw.mixed{ transform:translateY(1px); box-shadow:var(--recess); } /* NO FILL ON EITHER, DELIBERATELY. Every attempt at a separate pressed colour was a way of drawing shade with paint, and it kept killing the shadow: a darker cap has nothing left for a shadow to take away. The moulding is one piece of grey plastic in two positions, so it gets ONE fill — the raised cap's, inherited — and the recess is drawn entirely by the walls above. A knock-on worth having: tune .sw's background and every state follows. */ /* ── THE CHAMFER, AS A RING WITH A DIRECTION ──────────────────────────── A 1px white line along the top was the right idea drawn the wrong way. The broken edge of a cutout runs all the way round, and it is not equally lit anywhere: it FLARES where it faces the lamp, fades as it turns away, and goes to shadow on the far side. A box-shadow cannot say that — it is the same value the whole way round — so it always reads as a drawn outline. This is the gradient-border trick: a 1.6px ring made by padding a pseudo-element and masking its own middle out, filled with a gradient running from the light. Bright at 152° (top-left, where every other highlight in this panel comes from), through nothing at the equator, into a soft dark on the bottom-right where the lip turns away. Half a pixel of blur, because an edge that has been broken is round, and a round edge has no hard line on it anywhere. Only on the pressed states: when the cap is up it fills its hole and there is no lip to see. */ .sw.on{ color:var(--led); } .sw.mixed{ color:#eef1f5; } .sw.on:hover{ color:var(--led-hot); } .sw.mixed:hover{ color:#fff; } /* THE LEGEND SHRINKS WITH THE CAP. A face that has dropped into the panel is a face further from the eye, so what is printed on it subtends a smaller angle — 10% at this depth. Too small to notice as a change, which is the point: one more thing agreeing with the others, so the state reads as an object that moved rather than as a colour swap. */ /* …AND THE SHRINK IS ESSENTIALLY GONE: .9 × 1.1 lands on .99, so the pressed legend is now the same size as the raised one to within a rounding error. Kept as a literal .99 rather than deleted, because the rule is still the place the depth-versus-legend-size relationship lives — if the cap ever goes deeper than 1px, this is the number that has to follow it. */ .sw.on svg, .sw.mixed svg, .sw:active svg{ transform:scale(.99); } .sw.on svg{ filter:drop-shadow(0 0 3px rgba(255,130,30,.7)); } /* white is a legend, not a lamp — it gets no bloom */ .sw.mixed svg{ filter:none; } /* ═══════════════════════════════════════════════════════════════════════════ THE SLIDE SWITCH — a machined actuator standing proud of a milled slot ═══════════════════════════════════════════════════════════════════════════ A CAP IS FOR A BOOLEAN WITH A LEGEND. Most have none: "Invert tone", "Apply edits", "Weave crossings" — nineteen in the app this was written for, three with an honest glyph. A cap with nothing printed on it is not a blank legend but a missing one, and a lamp in the middle of it is not the answer either: it says "lit" where this panel already has jewels, pipes and lit arcs saying that, and it turns every switch on the plate into a dot. SO THE LEGEND IS THE POSITION, and the part is the switch a console has most of: a knurled actuator thrown left or right in a slot milled through the faceplate. You read it from the far side of the room without reading anything. ── WHY IT IS FIVE SURFACES AND NOT TWO ──────────────────────────────────── The first two passes drew it with the slot's own ::before and ::after and it read as cheap, which is a specific failure and not a vague one. A small part looks cheap when its shading does not describe a SOLID: stripes instead of ridges, one flat fill instead of a chamfer and a face, nothing cast anywhere, and every highlight pure white. Pure white is the tell — a lamp has a colour and metal has a colour, and their product is never #fff. So the slot builds two children and they carry three more pseudo-surfaces: .slide the CUT: the walls of the slot, dark at the top where the wall overhangs, lit along the bottom where the floor bounces .sl-bed the FLOOR: painted, and darkened into its own corners because a floor meets its walls in shadow. This is the part that lights, and what lights is a painted surface catching a lamp, not a coloured rectangle .sl-act the ACTUATOR: a moulded grip, chamfered top and left where the lamp is, falling to shade bottom and right, standing on a skirt and casting onto the plate ::before the KNURL, cut into the middle of its face ::after the SPECULAR, one anisotropic streak across the crowns ── AND IT IS WIDER THAN THE SLOT ────────────────────────────────────────── The single biggest thing that stopped it reading as an object. A rectangle inside a rectangle is two rectangles; an actuator with a FLANGE — 24px in a 22px opening, overhanging a pixel top and bottom — is a part sitting IN something, and its shadow falls on the slot's own edge. Every real slide switch has this flange, because the actuator has to hold itself in the panel. ── THE MATERIAL IS THE KIT'S OWN, AND THERE IS NO METAL IN IT ───────────── THIS KIT HAS NO ALUMINIUM ANYWHERE and this part does not get to be the exception. The plates are anodised and the keys are moulded, and a bright machined bar dropped into that is a part borrowed from another machine — which is exactly what the first two passes at this looked like. It is a moulded grip: a dark face, a hard bright chamfer along the broken edge, deep groove shadows, and one soft streak across the crowns. The contrast lives in the EDGE, not in the face, which is also how a real one works. */ .slide{ position:relative; flex:0 0 46px; width:46px; height:22px; border-radius:7px; /* THE CUT ITSELF. The top wall overhangs and is nearly black under it; the bottom wall is the one the floor throws light back onto. */ background:linear-gradient(180deg,#08090b 0%,#0e1114 48%,#0a0c0e 100%); /* EVERY INSET HERE CARRIES BLUR, and that is not a taste. An inset shadow with an offset and NO blur cannot follow a radius: it is the shape pushed one pixel sideways, so at each rounded corner the offset copy pulls away from the edge and leaves a bright or dark spot sitting in the turn. Two of those on the actuator were visible as dots. One pixel of blur closes the gap; where an edge has to stay crisp, it is drawn as a clipped background band instead, because a background IS clipped by the radius. */ box-shadow: inset 0 2px 3px rgba(0,0,0,.95), inset 0 1px 1px rgba(0,0,0,.9), inset 1px 0 2px rgba(0,0,0,.75), inset 0 -1px 1px rgba(255,255,255,.11), 0 1px 0 rgba(255,255,255,.055); } /* ── THE FLOOR ───────────────────────────────────────────────────────────── DARK IN ITS OWN CORNERS, both states. A floor meets its walls in shadow, and the version without that corner darkening was the single flattest thing in the part — a coloured rectangle with a border-radius. The radial goes FIRST in the list because background layers paint first-on-top. */ .sl-bed{ display:block; position:absolute; inset:3px; border-radius:4px; background-image: radial-gradient(120% 200% at 50% 45%, transparent 34%, rgba(0,0,0,.55) 100%), linear-gradient(180deg,#06070a,#0c0f12 55%,#080a0c); box-shadow: inset 0 1px 2px rgba(0,0,0,.95), inset 0 -1px 1px rgba(255,255,255,.05); transition:background-image .18s, box-shadow .18s; } /* LIT IS A PAINTED FLOOR CATCHING A LAMP, so it is brightest across its middle and turns down at both walls, with a hard specular line just under the top wall. It keeps its inset shadow — it is a hole either way, and a lit floor that loses its shadow becomes a sticker laid on the panel. */ .slide.on .sl-bed{ background-image: radial-gradient(120% 200% at 50% 45%, transparent 30%, rgba(0,0,0,.5) 100%), linear-gradient(180deg, color-mix(in srgb, var(--lyr, var(--led)) 52%, #000) 0%, color-mix(in srgb, var(--lyr, var(--led)) 90%, #fff) 34%, color-mix(in srgb, var(--lyr, var(--led)) 88%, #000) 62%, color-mix(in srgb, var(--lyr, var(--led)) 50%, #000) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.4), 0 0 4px color-mix(in srgb, var(--lyr, var(--led)) 8%, transparent), 0 0 9px color-mix(in srgb, var(--lyr, var(--led)) 4%, transparent); } /* ── THE ACTUATOR ────────────────────────────────────────────────────────── SIX STOPS, NOT TWO. An extrusion has a chamfer, a face, a turn and an under-edge, and a two-stop gradient can only say "lighter at the top". The bottom stop comes back UP a little: that is the floor of the slot bouncing into the underside, and it is the difference between a part sitting in a hole and a part pasted over one. */ .sl-act{ display:block; position:absolute; top:2px; left:2px; width:22px; height:18px; border-radius:4.5px; /* ── THE CLEARANCE IS THE PART ─────────────────────────────────────── ONE PIXEL OF SLOT AROUND A CAP IS NOT A GAP, IT IS A DRAWING ERROR. At 24×20 in a 46×22 cut the actuator very nearly WAS the slot, and the only thing separating them was a 1px black outline — which is a stroke, and a stroke around a shape is the single loudest way to say "this is a picture of a switch". Every physical control in §05 has air around it: the knob's cap is inset NINETEEN PER CENT of its collar, and the shadow that falls in that gap is most of why it reads as an object sitting in a fitting rather than as a disc on a circle. 22×18 leaves two pixels on every side. The travel is untouched — 2 + 22 + 20 + 2 = 46 — so the throw, the timing and the end stops are exactly what they were and only the air is new. */ /* THE CHAMFERS ARE BACKGROUND BANDS, NOT INSET HAIRLINES. A background is clipped by the border-radius, so a 1px bright band across the top simply STOPS where the corner rolls away from the lamp — which is what a chamfer does. The same line drawn as `inset 0 1px 0` is the shape offset downward, and it left a lit dot in each top corner and a pale one at the bottom right. Those were the two dots. AND IT IS PLASTIC, NOT ALLOY, WHICH TOOK THREE GOES TO ADMIT. It ran #646b76 to #202429 — a warm blue-grey whose top end is the lightest object on the panel, which a 24px cap has no business being. Darkening it once helped and left the real problem standing: a SIX-STOP 180° LINEAR is an EXTRUSION. It says "lighter at the top, darker at the bottom", which is true of a bar of metal cut to length and false of anything moulded. §05's cap is the material this system already has for dark plastic, and what makes it read is not its colour but its RADIAL — brighter in the middle, falling away in every direction, because that is what a dome does and a dome is what a moulding tool makes. SO THE BODY IS A DOME IN THE KNOB'S OWN FOUR VALUES, and the chamfer bands stay exactly as they were, because their reasoning never depended on the material: a background is clipped by the radius, so a 1px bright band across the top STOPS where the corner rolls away from the lamp. They go neutral rather than warm — the warmth was there to sell alloy. */ background-image: linear-gradient(180deg, rgba(255,255,255,.15) 0 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.26) 0%, transparent 16%, transparent 82%, rgba(0,0,0,.34) 100%), linear-gradient(180deg, #34383f 0%, #2e3239 30%, #26292f 68%, #1f2227 100%); /* ── THREE TIERS OF SHADOW, AND NO OUTLINE ────────────────────────── THE 1px HARD RING WENT WITH THE CLEARANCE. `0 0 0 1px` at .62 is a STROKE — zero blur, uniform on all four sides, indifferent to where the lamp is — and it was the only thing holding the cap off the slot floor. A stroke can separate two shapes; it cannot seat an object, because nothing in a lit room has an even dark line all the way round it. What does the seating is depth, in three tiers: CONTACT at 1px, tight and nearly black, which is the line where the part meets what it stands on; FORM at 3px, the body of the shadow; AMBIENT at 6px, wide and weak, the room. Small objects read as sitting on a surface when all three are present and as floating on it when only one is. */ box-shadow: inset 0 -2px 4px rgba(0,0,0,.75), inset 0 -1px 1px rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.85), 0 3px 5px rgba(0,0,0,.7), 0 6px 10px rgba(0,0,0,.42); /* IT SNAPS. A slide switch is spring-loaded over centre — it does not ease into place, it arrives and stops hard, which is what the overshoot on this curve is. 160ms is the whole throw. */ transition:transform .16s cubic-bezier(.34,1.25,.5,1), filter .12s, box-shadow .18s; } .slide.on .sl-act{ transform:translateX(20px); } /* AND WHEN THE FLOOR IS LIT IT BOUNCES ONTO THE ACTUATOR — FROM THE LEFT. THE BOUNCE HAS TO COME FROM WHERE THE LIGHT IS, and the light is not under the part. Throwing the switch on puts the actuator at the RIGHT end and uncovers the floor to its LEFT: that is the whole lit surface, it is beside the actuator rather than beneath it, and it is what any of this bounces off. The first version lit the underside, which is a second light source nothing on the panel can account for — the exact failure this language spends its whole shadow budget avoiding. So it is a warm wash coming in through the left flank, hottest at the edge nearest the floor and gone by the middle of the face, with a lit lip on the left edge itself. It is the only place in this language where a colour reaches something it is not printed on. AND IT IS THE PART OF THAT IDEA THAT KEEPS OVERSHOOTING. The lip is one pixel of orange on the actuator's own edge, which is a correct observation — the cap is standing in a lit slot and its near edge catches it — and at 58% it stopped being a catch and became a STROKE, an orange outline down the side of a grey part. A pixel of colour reads twice as loud as a hundred pixels of the same colour, because it has a hard edge on both sides and nothing to average against. AND THE PERCENTAGE WAS NEVER THE BRIGHTNESS, which is why turning it down twice barely moved it. `color-mix(var(--lyr) 22%, #e6dbcd)` is not a dim orange — it is SEVENTY-EIGHT PER CENT CREAM with a little orange in it, an opaque near-white hairline down the side of a charcoal part, and lowering the first number made it WHITER. The number reads like an opacity and is a ratio between two colours, so the whole scale ran the wrong way. THE OTHER COLOUR IS THE FIX. Mixed into #2b2f35 — the cap's own mid grey — 40% lands a warm edge a shade above the material instead of a bright line across it, and now the number does what it looks like it does. The bleed inboard of it is a genuine alpha and comes down to 12%. THE BLOOM CAME DOWN WITH IT, twice, and is now roughly a third of where it started — 5px at 15% and 11px at 7% on the machined dress. What a lamp under a 40x18 window throws onto the plate around it is not much. */ .slide.on .sl-act{ box-shadow: inset 0 -2px 4px rgba(0,0,0,.42), inset 6px 0 8px -3px color-mix(in srgb, var(--lyr, var(--led)) 12%, transparent), inset 1px 0 1px color-mix(in srgb, var(--lyr, var(--led)) 40%, #2b2f35), 0 1px 2px rgba(0,0,0,.85), 0 3px 5px rgba(0,0,0,.7), 0 6px 10px rgba(0,0,0,.42); } /* ── THE KNURL ───────────────────────────────────────────────────────────── THREE RIBS, ROUNDED, CUT INTO THE MIDDLE OF THE FACE. The first cut was a 3px repeating gradient across the whole part: seven one-pixel ridges, which at this size the eye reads as NOISE rather than as grip, and which on a dark face turns to grey mush. A real grip has a countable number of grooves and they stop short of the edges, where the moulding radius is. AND EACH GROOVE IS A CROSS-SECTION, NOT A STRIPE. A ridge lit from above-left is bright on its left flank, falls through the crown, drops into a dark floor and comes back up — five stops per 5.2px, ramped rather than stepped, so the ribs read as round. Stepped stops give flat bands, which is exactly what "cheap" looked like. The overlay on top of it is the band's own vertical shading: the crowns catch the lamp at the top and the whole knurl sits in shade at the bottom, because the face it is cut into is curving away there. */ /* THE PITCH WAS RE-OPENED AND PUT STRAIGHT BACK. Halving it to 2.6px for six ribs is exactly the seven-ridge version described above, which was tried, turned to grey mush and got replaced by this. The note is why the note is here. What was actually cheap was never the count — it was that the ribs were painted in WARM WHITE on a face with no dome under it, so they read as ink rather than as cut. Same three ribs, same 5.2px, neutral now and a stop quieter, over a body that curves. */ .sl-act::before{ content:''; position:absolute; left:50%; top:50%; width:15px; height:11px; transform:translate(-50%, -50%); border-radius:2px; background-image: linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.02) 24%, rgba(0,0,0,.05) 58%, rgba(0,0,0,.26) 100%), repeating-linear-gradient(90deg, rgba(255,255,255,.11) 0px, rgba(255,255,255,.025) 1.5px, rgba(0,0,0,.14) 2.3px, rgba(0,0,0,.40) 3.3px, rgba(0,0,0,.14) 4.1px, rgba(255,255,255,.11) 5.2px); box-shadow:inset 0 1px 1px rgba(0,0,0,.3); } /* ── THERE IS NO SPECULAR, AND THAT IS THE ANSWER ──────────────────────── THIS HAS NOW BEEN A STREAK, A BLOB AND A DOT, and all three were the same mistake at different sizes: a separate layer of white put on top of the part to say "this is shiny". Every reference for it — the toggles, the knob collar, the two recessed keys — has NONE. What they have is a face whose own gradient does the whole job, over a very narrow range, with the light at the top and the value falling steadily to the bottom, and a single hairline of rim where the moulding radius breaks. THE RANGE IS THE POINT: #34383f to #1f2227 is about a stop and a half, and the parts read as SOLID because nothing on them is far from anything else. Wide-range shading is what makes small plastic look like a rendering of plastic. A moulded matte face has almost no specular to give — it scatters — and the light you do see on one is the ambient of the room arriving at a surface that is tilted slightly toward it. THE SIDES TURN AWAY INSTEAD. The 90° layer used to put a light pixel on the leading edge; it darkens both ends now, hard at the far one and soft at the near, because that is what a rounded edge does and it is the only shading here that is about form rather than finish. */ .tog:hover .sl-act{ filter:brightness(1.07); } /* ═══════════════════════════════════════════════════════════════════════════ VARIANT B — THE LIT PILL. Same part, same markup, same 46×22, one class ═══════════════════════════════════════════════════════════════════════════ A CANDIDATE, NOT A SECOND PART. `.slide` and `.slide.pill` are the same object in two dresses and only one of them will survive; they are up together so the choice can be made by looking rather than by describing. Whichever loses gets deleted, not kept as an option — an option is a decision nobody made. WHAT IT ARGUES. The machined version puts the material in the ACTUATOR: a knurled moulded grip with the light on its broken edges, and the colour is a floor behind it. This one inverts that. The actuator goes matte charcoal and nearly vanishes, and the lit half becomes the whole object — a glowing window with a word in it, blooming out onto the plate. It is louder, it is legible from further away, and it is one more thing on a dark panel that GLOWS, which is either the point or the problem. THE LEGENDS ARE CUT INTO THE FLOOR AT BOTH ENDS AND THE ACTUATOR COVERS ONE. That is the mechanism the reference is drawing and it is honest: nothing changes the word, nothing swaps it, there is no state in it. ON is engraved at the left end and OFF at the right, permanently, and which one you can see is which end the actuator is not standing on. THE GRIP IS A DOT MATRIX rather than ribs, and that is the other half of the comparison: dimples read as moulded, ribs read as machined. Each dot is a PIT, not a bump — dark rim on the side facing the lamp, lit crescent on the far wall — which is the same reasoning as the recess under a key cap. */ .slide.pill{ border-radius:999px; } .slide.pill .sl-bed{ inset:2px; border-radius:999px; } .slide.pill.on .sl-bed{ box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.35), 0 0 5px color-mix(in srgb, var(--lyr, var(--led)) 10%, transparent), 0 0 11px color-mix(in srgb, var(--lyr, var(--led)) 5%, transparent); } /* ── THE ENGRAVED ENDS ───────────────────────────────────────────────────── Silkscreened, not backlit: the word is INK on the floor, so it goes dark where the floor is lit and stays a dim grey where it is not. A light word on a lit panel is a word cut through to a lamp, which is a different part. */ .slide.pill .sl-bed::before, .slide.pill .sl-bed::after{ position:absolute; top:50%; transform:translateY(-50%); font-family:var(--font); font-size:7px; font-weight:700; letter-spacing:.08em; line-height:1; pointer-events:none; color:rgba(226,232,240,.13); text-shadow:0 1px 0 rgba(0,0,0,.7); transition:color .18s, text-shadow .18s; } .slide.pill .sl-bed::before{ content:'ON'; left:5.5px; } .slide.pill .sl-bed::after { content:'OFF'; right:4.5px; } .slide.pill.on .sl-bed::before{ color:color-mix(in srgb, var(--lyr, var(--led)) 26%, #000); text-shadow:0 1px 0 color-mix(in srgb, var(--lyr, var(--led)) 55%, #fff); } /* ── THE ACTUATOR, MATTE ─────────────────────────────────────────────────── Charcoal, four stops, no specular streak and no bright chamfer. It is the piece that is NOT lit, and everything about it stands back so the window does the talking. */ .slide.pill .sl-act{ border-radius:999px; background-image: linear-gradient(180deg, rgba(255,255,255,.11) 0 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.24) 0%, transparent 16%, transparent 84%, rgba(0,0,0,.30) 100%), linear-gradient(180deg, #31353c 0%, #2b2f35 30%, #24272d 68%, #1d2025 100%); box-shadow: inset 0 -2px 4px rgba(0,0,0,.7), inset 0 -1px 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.85), 0 3px 5px rgba(0,0,0,.7), 0 6px 10px rgba(0,0,0,.45); } .slide.pill.on .sl-act{ box-shadow: inset 0 -2px 4px rgba(0,0,0,.5), inset 7px 0 9px -4px color-mix(in srgb, var(--lyr, var(--led)) 13%, transparent), inset 1px 0 1px color-mix(in srgb, var(--lyr, var(--led)) 44%, #2b2f35), 0 1px 2px rgba(0,0,0,.85), 0 3px 5px rgba(0,0,0,.7), 0 6px 10px rgba(0,0,0,.45); } /* THE DIMPLES. Two circles per cell: the pit, and the crescent of its far wall catching the lamp half a pixel below. Five across, three down, in a patch that stops short of the ends. */ .slide.pill .sl-act::before{ width:16px; height:10.5px; border-radius:0; background-image: radial-gradient(circle at 1.2px 1.2px, rgba(0,0,0,.62) .62px, transparent .72px), radial-gradient(circle at 1.2px 1.9px, rgba(226,232,240,.17) .62px, transparent .72px); background-size:3.5px 3.5px, 3.5px 3.5px; background-position:center, center; background-repeat:repeat, repeat; box-shadow:none; } /* THE ORIGINAL NOTE HERE SAID "NO SPECULAR ON A MATTE PART" and it was right the first time. It got argued out of on the grounds that matte scatters BROADLY rather than not at all — true of a big surface and useless at 22px, where a broad dim highlight is indistinguishable from the part simply being lighter. Both dresses have none now; the rule moved up to §A where it belongs, and B needs no override to say the same thing. What B still does differently is start a stop lower, so the cap stands back and the window is the object. */ /* ═══════════════════════════════════════════════════════════════════════════ VARIANT C — THE ROCKER · ALTERNATIVE, WIP, NOT VALIDATED ═══════════════════════════════════════════════════════════════════════════ NOTHING BELOW THIS LINE IS SETTLED. A and B are two dresses of one part and one of them is going to be deleted; C is a third thing that arrived after them and has not been picked. It has been rebuilt four times — an SVG trapezoid, one flat slab under a perspective, two folded faces, and finally the rigid bent slab that is here now — and every one of those rewrites changed the geometry rather than the finish, which is what an unsettled part looks like. IT IS FLAGGED ON THE PAGE, on its own cap, in §06. Do not copy it into an app yet: the class names, the element count and the state mapping have all moved inside a single afternoon and they may move again. What IS worth keeping out of it is written in the notes below — the projection arithmetic, the two-value crease, the wall normal, the rule about foreshortening pulling marks toward the seam. Those are true whatever this ends up being. ─────────────────────────────────────────────────────────────────────────── THE FIRST TWO ATTEMPTS BOTH DREW THE WRONG MACHINE. Eight passes of stacked gradients gave a light pill in a dark slot, and the SVG that replaced them gave a trapezoid that MIRRORED — one geometry flipped about its centre, so throwing it read as a card turning over rather than a part moving. Both were solving the same problem the same wrong way: BAKING THE PERSPECTIVE INTO THE DRAWING. A shape with the foreshortening painted on has only two states and no way to be between them, and the in-between is the entire thing you feel when a switch throws. SO THE PERSPECTIVE IS REAL AND THE MOTION IS THE GEOMETRY: THE HOLE IS A HOLE. `.slide.rocker` is the CUT — its own black, its own overhang, and `overflow:hidden` on the well inside it, so the end that goes down is swallowed by the plate rather than drawn shorter. A rocker is a part you can see less of, not a part that shrinks. THE PADDLE IS ONE FLAT SLAB, `rotateY` about its own middle, under a 120px perspective. The near end genuinely comes at you and the far end genuinely goes away — the taper, the difference in height end to end, the way the sunk end loses its edge, all of it falls out of the projection instead of being approximated by a path. THE PIVOT IS BEHIND THE FACE (`transform-origin` z of -7px), because the pin in a real one is inside the housing and not on the surface you touch. IT PASSES THROUGH FLAT. Halfway through the throw the paddle IS flat and the lighting IS even, which is exactly what the part does at the moment the spring goes over centre. Nothing mirrors, so nothing can flip. THE LIGHTING IS TWO OVERLAYS CROSS-FADING, not one gradient reversing. A gradient that swaps direction has to swap at some frame and that frame is a pop; two of them at opposing weights sum to even light exactly when the paddle is level. Same for the marks: they are printed on the panel's own left and right, and the one on the end that has turned away dims, because a surface out of the light does not show its legend either. AND THE CORNERS ARE SQUARE. It went 11px, then 6, then 4, and each step helped, which was the signal that the answer was 0 and the steps were flinching. A radius on a part this small is a TAX ON EVERYTHING ELSE: the end wall has to be inset to stay behind it, the seam cannot be a clean butt joint, the cut's own edge has to curve away where the light is strongest, and every one of those compromises spends detail on softening a corner nobody asked to be soft. The reference part is square. Take the radius out and the walls, the seam and the crease all get simpler at once — which is what SQUARE BUYS: not a look, a budget. The cut keeps 1.5px, because a hole drilled in a plate is not razored either. */ .slide.rocker{ flex:0 0 auto; width:60px; height:30px; border-radius:1.5px; /* THE WALL OF THE CUT, blackest thing in the assembly, and darkest right under the top lip where nothing reaches. */ background:linear-gradient(180deg,#020304 0%,#07090b 52%,#0c0f13 100%); box-shadow: inset 0 3px 4px rgba(0,0,0,.95), inset 1px 0 3px rgba(0,0,0,.7), inset 0 -1px 1px rgba(255,255,255,.07), 0 1px 0 rgba(255,255,255,.06); } /* the CSS children are the other dresses' — this one has its own parts */ .slide.rocker .sl-bed, .slide.rocker .sl-act{ display:none; } /* ── THE WELL: the clip, and the eye ────────────────────────────────────── THE CLIP IS WHAT MAKES IT A HOLE. Without it the paddle's sunk end hangs out past the plate and the part is a tile lying on the panel. And the perspective origin sits ABOVE centre because a console is seen from above: you look slightly down into the cut, so the top wall is the one you see the inside of. */ /* ── WHAT STANDS PROUD THROWS ONTO WHAT IT STANDS ON ───────────────────── THE RAISED HALF IS OUT OF THE PLATE, so it has to darken the plate. Every other shadow on this part is INSIDE the cut and the well clips them all, which is right for them and wrong for this one: the shadow of something sticking up lands on the panel, outside the hole entirely, and a part that is proud of a surface and leaves that surface clean is a part pasted on. IT IS ITS OWN ELEMENT, ahead of the well and outside its clip, transparent with nothing but an OUTER box-shadow — a shadow drawn outside a border box never paints inside it, so this covers the plate and never the switch. `::before` is the lamp and `::after` is the cut's near lip; both are spoken for, and neither is outside the clip anyway. AND IT IS NOT THE SAME SHADOW IN BOTH POSITIONS, which is the whole reason it is worth having. The lamp is up and to the left, so what is thrown goes down and to the RIGHT — always, whichever end is up. With the right half raised that lands on open plate and reads long and dark. With the LEFT half raised it falls across the cut's own mouth, into a hole that is already black, and almost nothing reaches the panel. Same light, same part, two different marks, and drawing them the same is the tell. */ .slide.rocker .rk-cast{ position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; box-shadow:12px 6px 11px -3px rgba(0,0,0,.62); transition:box-shadow .16s; } .slide.rocker.on .rk-cast{ box-shadow:3px 6px 9px -3px rgba(0,0,0,.40); } .slide.rocker .rk-well{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; perspective:100px; perspective-origin:50% 34%; pointer-events:none; } /* ── THE PADDLE IS A BENT SLAB ──────────────────────────────────────────── FROM A SIDE-VIEW SKETCH OF THE REAL PART, which settled three arguments at once and killed the two versions before it. THE CROSS-SECTION IS `___/` — a slab of CONSTANT THICKNESS, level for its first half, kinked at the middle, rising for its second. Not a plane. Not two planes fanned symmetrically about a centre. A moulding with a permanent 26° bend in it, and the bend never changes, because the part is RIGID. WHICH MAKES THE THROW OBVIOUS AND MAKES THE OLD ONE WRONG. If the bend is fixed and one half comes to rest LEVEL — which is what the sketch shows, and what the photograph shows, the sunk half lying flat in the plate — then the two positions are: left flat and right up 26°, or left up 26° and right flat. Never both leaning. Every version before this rotated the whole part and folded the halves symmetrically on top, so neither half was ever level and the thing read as a card creased down the middle. SO THERE IS NO PAD ROTATION AT ALL. Each half is either 0° or 26°, and each animates between its own two numbers: state left face right face ───────────────────────────────────────── off 0° flat −26° raised on +26° raised 0° flat THE DIFFERENCE IS ALWAYS 26°, at rest and on every frame in between, which is the definition of a rigid body and is why the throw looks like a part moving rather than two parts negotiating. Halfway across, the two are at +13° and −13° — the symmetric trough — and that is the moulding passing level, not a shape being interpolated. AND IT HAS THICKNESS, which is the other thing the sketch is about: the raised half shows its END WALL, a 4px cut edge square to its own face, hinged off the outer edge and folded back into the part. It is the only surface here facing the lamp head-on and it is the whole of what says SOLID. The flat half has one too and you never see it — at 0° that wall is exactly edge-on, which is correct and costs nothing. THE PART SITS 3px INTO THE PLATE (`translateZ` on the pad), so the level half is BELOW the rim rather than flush with it. A rocker whose sunk half is level with the panel has not been pressed, it has been drawn. */ .slide.rocker .rk-pad{ position:absolute; inset:3px 2px; transform-style:preserve-3d; transform:translateZ(-4px); /* THE SHADOW STAYS ON THE PAD, not on the faces. Put it on each face and the two shadows meet at the seam and draw a dark seam of their own, which is the one line on the part that has to be built out of value. */ box-shadow:0 4px 7px rgba(0,0,0,.8); } /* ── THE TWO HALVES ─────────────────────────────────────────────────────── EACH HINGES ON THE SEAM: the left one's origin is its RIGHT edge, the right one's its LEFT, so the two share one line and cannot drift apart however far either turns. A SPRING GOES OVER CENTRE AND THE PART HITS ITS STOP. Fast, and just enough overshoot to be a stop being hit rather than a value being eased to — a long soft curve here is the single thing that made the first version feel like software. AND THERE IS NO RADIUS ON EITHER, which is what lets the end wall run the FULL height of its half rather than being inset to hide behind a corner it would otherwise poke through. Square corners are why the thickness can be the thickness. */ /* THE PLASTIC IS THE KNOB'S PLASTIC, and not a family of its own. It had been running #171c23 to #525a65 — a blue-grey whose light end is a full stop above anything else on the panel, which is what made a moulded switch arrive as a machined one. §05's cap is the material this system already has for dark plastic and it tops out at #3a3e45, so the face is that cap's own four values top-lit. A part invented its own palette; the fix was to stop. */ .slide.rocker .rk-f{ position:absolute; top:0; width:50%; height:100%; transform-style:preserve-3d; background:linear-gradient(180deg,#3a3e45 0%,#34383f 8%,#23262b 62%,#1c1e22 100%); transition:transform .16s cubic-bezier(.34,1.28,.5,1); } .slide.rocker .rk-f-l{ left:0; transform-origin:100% 50%; transform:rotateY(0deg); } .slide.rocker .rk-f-r{ right:0; transform-origin:0 50%; transform:rotateY(-42deg); } .slide.rocker.on .rk-f-l{ transform:rotateY(42deg); } .slide.rocker.on .rk-f-r{ transform:rotateY(0deg); } /* THE FINGER GETS AN ANSWER BEFORE THE STATE DOES. Pressing takes the raised half down about 40% of its travel and brings the level one up by the same amount — the part still rigid, still 26° across the bend, just short of the detent. That is the travel before the spring goes, which is the half of the action a click handler cannot show you. */ .tog:active .slide.rocker .rk-f-l{ transform:rotateY(17deg); } .tog:active .slide.rocker .rk-f-r{ transform:rotateY(-25deg); } .tog:active .slide.rocker.on .rk-f-l{ transform:rotateY(25deg); } .tog:active .slide.rocker.on .rk-f-r{ transform:rotateY(-17deg); } /* ── THE END WALL: the cut edge of the moulding ─────────────────────────── HINGED OFF THE OUTER EDGE AND FOLDED BACK, which is the only way to get a wall that stays square to a face that is turning. 90° about that edge sends its 5px straight into -Z, so the wall is the part's thickness and nothing else has to know about it. A WALL HAS TWO THINGS TO GET RIGHT AND THEY PULL AGAINST EACH OTHER: where its body goes, and which way its face LOOKS. The first build got the body right and the normal backwards, and the whole thing was invisible — a strip whose front pointed back at the middle of the paddle, so what you had a line of sight on was its unlit reverse, behind the face that was casting it. Nothing renders and nothing errors, which is the worst kind of wrong. An element's face looks along +Z, and rotateY(90°) turns that to +X while sweeping the element's own width into -Z. So the strip has to START at the outer edge and run OUTWARD — `left:100%` on the right half, `right:100%` on the left — with the origin on the edge it hinges about. Put it inside the face instead and the same rotation lands the body in the same place with the normal reversed, which is exactly the bug. IT NEEDS NO STATE. At 0° the wall is edge-on and projects to nothing; at 42° it opens to about 6.7px of lit cut edge. The geometry hides and shows it, so there is no rule here that can fall out of step with the rule above. AND THE NUMBER TO WATCH IS NOT THE DEPTH, IT IS THE PROJECTION. Nine pixels of wall at 26° looks like four until you work it through the lens, and then it is 1.44 — the far edge of the wall is a third of the way to the eye further back than the near one, so perspective eats nearly two thirds of it before it reaches the screen. That is why three passes of `make the wall thicker` moved almost nothing. What opens a wall is the ANGLE, because the angle turns it toward you and shortens the run away from you at the same time. 26°/9px gives 1.44px. 42°/13px gives 6.7px — four and a half times the edge for less than half again the material. Measure the projection, never the part. */ /* AND THE CUT EDGE IS THE SAME PLASTIC AS THE FACE. It was #7b8490 at its top — brighter than any surface in §05 and the single loudest thing on the panel, which is a lot to spend on 6px of a switch. It is the brightest surface HERE because it faces the lamp square, and that is a ranking within one material, not a licence for a second one. */ .slide.rocker .rk-w{ position:absolute; top:0; height:100%; width:13px; background:linear-gradient(180deg,#3a3e45 0%,#2b2f35 50%,#1c1e22 100%); } .slide.rocker .rk-f-l .rk-w{ right:100%; transform-origin:100% 50%; transform:rotateY(-90deg); } .slide.rocker .rk-f-r .rk-w{ left:100%; transform-origin:0 50%; transform:rotateY(90deg); } /* ── WHICH HALF IS IN THE LIGHT ─────────────────────────────────────────── TWO LAYERS PER HALF, CROSS-FADING, and every half carries both: `::before` is how it looks RAISED, `::after` how it looks lying flat in the plate. They swap together with the tilt, and because they are opacities rather than one gradient reversing, the moment halfway through the throw is both at half — even light on a level paddle, exactly right, and impossible to get from a gradient that has to flip on some frame. THE CREASE IS THE VALUE STEP BETWEEN THEM, not a line drawn on either. A half tilted 26° toward the lamp against a half lying flat in a hole is already the largest difference on the part; the seam is where those two meet and it needs no help. What it gets is one hard band, 3% of a half wide, at the RAISED side's inner edge — the bottom of the bend, the one place on that half the light cannot reach. Dark against dark, then bright above it. That is a fold. */ .slide.rocker .rk-f::before, .slide.rocker .rk-f::after{ content:''; position:absolute; inset:0; border-radius:inherit; z-index:0; transition:opacity .16s linear; } /* THE TWO HALVES ARE THE SAME PIECE OF PLASTIC, and the first pass forgot it: the raised half went to +20% white and the level one under a 78% black veil, which is a two-stop range on a part that has one material and one lamp. It read as a lit tile beside a dead one. Tilt buys a MODEST amount of extra light — enough to tell which half is up, nowhere near enough to change what the half is made of. What carries the read is the crease and the cut edge, which is the right way round: geometry says which half is up, shading only agrees. AND THE LIFT IS A SPECULAR, NOT A WASH. A broad white ramp along the raised half is how it went grey: spread thin enough to cover a face, white stops being a highlight and becomes the colour of the material, and dark plastic lit across its whole width is aluminium. The knob had already solved this — ONE tight bright spot out to 46% of a radius, everything else left alone — so the raised half gets the same thing at the same .30, sitting over its outer end. Small and bright reads as a lamp on plastic. Wide and pale reads as metal, every time. */ /* RAISED: brightest at the outer end, which is the end nearest the lamp and the end the cut edge is on, falling away to the fold */ .slide.rocker .rk-f-l::before{ background: radial-gradient(circle at 16% 24%, rgba(255,255,255,.20) 0%, transparent 46%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,.18) 86%, rgba(0,0,0,.24) 97%, rgba(0,0,0,.44) 97.01%, rgba(0,0,0,.44) 100%); } .slide.rocker .rk-f-r::before{ background: radial-gradient(circle at 84% 24%, rgba(255,255,255,.20) 0%, transparent 46%), linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,.18) 86%, rgba(0,0,0,.24) 97%, rgba(0,0,0,.44) 97.01%, rgba(0,0,0,.44) 100%); } /* FLAT: level, in the plate, under its overhang. EVEN, and that evenness is the point — a flat plane has no reason to grade across itself, and the gentle turn-down at the outer end is the hole's own top wall reaching over it, not the part doing something. */ .slide.rocker .rk-f-l::after{ background:linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.30) 46%, rgba(0,0,0,.34) 100%); } .slide.rocker .rk-f-r::after{ background:linear-gradient(270deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.30) 46%, rgba(0,0,0,.34) 100%); } /* OFF is the right half raised, which is the half the ring is on. */ .slide.rocker .rk-f-l::before{ opacity:0; } .slide.rocker .rk-f-l::after { opacity:1; } .slide.rocker .rk-f-r::before{ opacity:1; } .slide.rocker .rk-f-r::after { opacity:0; } .slide.rocker.on .rk-f-l::before{ opacity:1; } .slide.rocker.on .rk-f-l::after { opacity:0; } .slide.rocker.on .rk-f-r::before{ opacity:0; } .slide.rocker.on .rk-f-r::after { opacity:1; } /* ── THE LEGENDS: A GRIP AND A LENS ─────────────────────────────────────── `|` AND `○` WERE THE WRONG PAIR, and the reason is not that they are the wrong symbols — they are the right ones, on a part that is not asking that question. IEC's pair says MAINS ON and MAINS OFF, and half of it is always the mark for the state you are NOT in, sitting there in the dark being read as an option. At 11px a side there is no room to also explain that one of them is a label and the other is a leftover. SO THERE IS ONE LEGEND, NOT TWO, AND IT IS A LAMP. The right half carries a round lens in a black bezel: dark when the switch is off, lit through when it is on. Nothing has to be read — a lit thing is on. That is the whole of why this beat the bar, which lit perfectly well and still looked like a glowing dash rather than a light behind glass. A ring reads as a LENS because a bezel is a thing that holds glass, and a dash is a thing that is printed. AND THE OTHER HALF IS NOT BLANK, IT IS THE GRIP. A rocker's other end is where your thumb goes, so it gets the knurl §04's pill switch already uses, at the same numbers — a pit and the crescent of its far wall catching the lamp half a pixel below, 3.5px on centre. Texture, not a symbol: it says PRESS HERE, which is true of that end in both states, rather than naming a state that is not the one you are in. ON IS THE RIGHT HALF LYING FLAT, AND THAT IS WHERE THE LAMP IS. It was built the other way up first — lamp on the end that stands proud, on the theory that a light aimed at you beats a light down in the plate. That theory is about lamps and this is a SWITCH: you press a side down and it STAYS down for as long as the thing is on, so the pressed side IS the state and the lit legend belongs on it. Every illuminated rocker on a wall works this way, and the giveaway that the other version was wrong is that its light moved to whichever end happened to be up — which is a lamp with an opinion about geometry rather than about the circuit. WHICH ALSO PUTS THE LIT LENS ON THE FLAT FACE, so it is seen square and whole rather than foreshortened 42° away — the glow reads as a round lamp instead of an ellipse, and it stops moving under your eye as the part throws. What the earlier version gained in aim it lost twice over in shape. AND BOTH MARKS SIT NEAR THEIR OUTER ENDS, NOT MID-HALF, which is a consequence of the 42° and not a taste. A mark centred in its half is at 14 of 28, and once that half turns 42° it projects to 68.7% of the switch — four per cent from where the same mark sits when the half is level. It read as a ring near the middle that changes colour rather than as the right-hand lamp. Out at 18 of 28 it lands at 74.6% turned against 79.2% flat: still barely any travel, but unmistakably at one END. Foreshortening pulls everything toward the seam, so anything that has to stay in its half has to start further out than looks right on the flat. */ .slide.rocker .rk-mk{ position:absolute; top:50%; z-index:1; box-sizing:border-box; transform:translateY(-50%); transition:opacity .16s; } /* the thumb pad — §04's knurl, same pit, same crescent, same 3.5px pitch */ .slide.rocker .rk-grip{ left:5px; width:14px; height:11px; background-image: radial-gradient(circle at 1.2px 1.2px, rgba(0,0,0,.62) .62px, transparent .72px), radial-gradient(circle at 1.2px 1.9px, rgba(226,232,240,.17) .62px, transparent .72px); background-size:3.5px 3.5px, 3.5px 3.5px; background-position:center, center; background-repeat:repeat, repeat; opacity:.52; } /* THE MARK IS THE RING, AND THE RING IS WHAT LIGHTS. First pass lit the disc inside it and kept the ring black around the outside — a lit lens in a bezel, which is a real object and the wrong one. It fills in the O. What is on this paddle is a legend CUT THROUGH the moulding, and the cut is the stroke: light comes through the shape you drew and nowhere else, so the middle stays plastic. A filled circle is a different symbol from an O, and at 9.5px it is the only difference there is room for. */ .slide.rocker .rk-lens{ right:5px; width:9.5px; height:9.5px; border-radius:50%; border:2px solid #04060a; box-shadow:0 .6px 0 rgba(255,255,255,.15); opacity:1; } /* LIT IS THE STROKE GOING HOT AND THROWING. The border takes the lamp colour with a little white in it — the core of a lit edge is always paler than the light it is made of — and three shadows carry it out to 20px. No inset: an inner glow is colour in the middle of the O, which is the thing this is not. The glows are §04's jewel radii walked in one step, because a 2px stroke throws less far than a 11px lamp and a bloom wider than its source reads as fog rather than as light. */ .slide.rocker.on .rk-lens{ opacity:1; border-color:color-mix(in srgb,var(--lyr,var(--led)) 84%,#fff); box-shadow: 0 0 4px color-mix(in srgb,var(--lyr,var(--led)) 80%,transparent), 0 0 11px color-mix(in srgb,var(--lyr,var(--led)) 45%,transparent), 0 0 20px color-mix(in srgb,var(--lyr,var(--led)) 22%,transparent); } /* THE LEGEND ON THE HALF THAT HAS GONE LEVEL DIMS — a surface out of the light does not show its legend either. WITH ONE EXCEPTION, and it is the whole point of the part: the lens on the flat half does not dim when it is LIT, because a lamp is not a surface catching light, it is a source. The dimming rule is about reflectance and it does not apply to something making its own. */ .slide.rocker.on .rk-grip{ opacity:1; } /* ── THE BROKEN EDGE OF THE CUT, over the part that sits in it ──────────── The plate is thick and the paddle is inside it, so the near lip of the hole is IN FRONT of the switch and has to be drawn after it. Every inset here carries blur for the reason the top of this file gives: an offset with none pulls away from the radius at each corner and leaves a dot in the turn. */ .slide.rocker::after{ content:''; position:absolute; inset:0; border-radius:inherit; z-index:3; pointer-events:none; box-shadow: inset 0 2.5px 3px rgba(0,0,0,.75), inset 1.5px 0 3px rgba(0,0,0,.45), inset 0 -2px 2px rgba(0,0,0,.4), inset 0 -1px 1px rgba(255,255,255,.10); } /* ── THERE IS NO PILOT LAMP. THE LENS IS THE LAMP ───────────────────────── A SEPARATE LED ABOVE THE SWITCH IS A SECOND OBJECT SAYING THE SAME THING the switch has already said with its own position, and the assembly was paying for it twice: once in the 15px of plate it needed above the cut, and once in the reading — eye goes to the lamp, then down to the switch, then back up to check they agree. They always agree. That is the definition of a part that is not needed. SO THE LIGHT MOVED INTO THE PART, and it went into the LENS rather than into a legend — see the block above. Every illuminated rocker ever made works the same way: the mark is not printed on the plastic and lit from outside, it is a hole in the plastic with a lamp behind it. The rule lives with the lens now, which is where the numbers are. */ /* ── THE ASSEMBLY — the row stands up ───────────────────────────────────── `.tog` is a line: switch, then name. A rocker is a COLUMN, so the same button turns ninety degrees and the name becomes an engraved plate under the switch — which is what a console does, because a bank needs its names in a row you can read across. AND THE 20px ABOVE IT WENT WITH THE LAMP. That padding was clearance for a part that no longer exists, and clearance for nothing is just a bank that does not stack as tight as it should. */ .tog.stack{ flex-direction:column; gap:7px; width:auto; min-height:0; padding:5px; } .tog.stack .name{ max-width:64px; text-align:center; font-size:8px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#6d727a; text-shadow:0 1px 0 rgba(255,255,255,.08); } .tog.stack.off .name{ color:#585d65; } /* ═══════════════════════════════════════════════════════════════════════════ THE TOGGLE — a switch mounted on the faceplate, its name engraved beside it ═══════════════════════════════════════════════════════════════════════════ THERE IS NO PLATE, AND THAT IS THE PART. A `.row` is a module card, and a card is a claim: this is a thing with contents, a colour and an editor behind it. A boolean has none of that. A settings bay engraves its names straight onto the metal and mounts the control on the face, and nineteen booleans each on their own raised card is a stack of pallets rather than a panel. THE WHOLE LINE IS THE BUTTON, so the hit target is the name — which is what you were aiming at — rather than a 24px cap floating at the end of it. The only thing saying the line is live before you press it is the metal warming under the pointer, which is what a faceplate does and what a card cannot do without moving. */ .tog{ display:flex; align-items:center; gap:9px; width:100%; min-height:30px; padding:2px 6px; border:0; border-radius:6px; background:transparent; cursor:pointer; text-align:left; font-family:inherit; position:relative; transition:background .12s; } .tog:hover{ background:rgba(255,255,255,.035); } .tog:active{ background:rgba(0,0,0,.20); } /* THE NAME IS THE ROW'S NAME, ONE SIZE DOWN. A setting sits under a bay cap that has already said what the bay is, so its own name does not need the 12px a layer's does — and at 11.5px a column of them lines up with the engraved captions beside it instead of shouting over them. */ .tog .name{ font-size:11.5px; } .tog.off .name{ color:#8b9099; } /* OFF IS DIMMER, NOT GREYED OUT. `.row.off` takes the name down to #6a6f77 because a hidden layer is a layer you have parked; a boolean that is off is still the control you are about to press, and at that grey a column of mostly-off switches reads as a panel of disabled ones. */ /* THE PIPE IS A LAYER'S OWN INK, and it only appears when the switch was given a colour. A pipe on every boolean is a column of light saying nothing, which is the fastest way to spend the one signal in this language that carries across a room. */ .tog .pipe{ flex:0 0 3px; align-self:stretch; margin:4px 2px 4px 0; } .tog.off .pipe{ background:#2a2c30; box-shadow:inset 0 1px 1px rgba(0,0,0,.8); } .tog.off .pipe::after{ display:none; } /* ── the jewel LED: the layer's colour as a lens ─────────────────────────── */ .jewel{ width:11px; height:11px; flex:0 0 11px; border-radius:50%; position:relative; background: radial-gradient(circle at 34% 28%, #fff 0%, color-mix(in srgb,var(--lyr) 60%,#fff) 16%, var(--lyr) 52%, color-mix(in srgb,var(--lyr) 55%,#000) 100%); box-shadow: 0 0 6px color-mix(in srgb,var(--lyr) 75%,transparent), 0 0 15px color-mix(in srgb,var(--lyr) 40%,transparent), inset 0 -1px 2px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.55); } .jewel.all{ background:var(--all-grad); } /* the ALL row is the only jewel left in the dock */ .row.off .jewel{ filter:grayscale(1) brightness(.42); box-shadow:inset 0 -1px 2px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6); } /* ── the name: laser-etched infill on the faceplate ──────────────────────── */ .name{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:.02em; color:#dfe2e7; text-shadow:0 1px 0 rgba(0,0,0,.85); } .sum{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font); font-size:9.5px; letter-spacing:.04em; color:#61666f; } .row.off .name{ color:#6a6f77; } /* TONE — an etched brass plate. A different METAL is how hardware says "a different kind of thing"; a second colour would have fought the light pipe. */ .tone{ flex:0 0 auto; font-family:var(--font); font-size:8.5px; font-weight:700; letter-spacing:.09em; padding:2px 5px; border-radius:3px; color:#2a1c05; background:linear-gradient(180deg,#E8B45C,#B8862F); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.6); text-shadow:0 1px 0 rgba(255,255,255,.28); } /* micro keys — duplicate / delete. Recessed, not raised: they are destructive or duplicative and should not invite the thumb the way the switches do. */ .micro{ width:22px; height:22px; flex:0 0 22px; border-radius:5px; display:flex; align-items:center; justify-content:center; border:0; padding:0; cursor:pointer; color:#575c65; background:linear-gradient(180deg,#151719,#1e2024); box-shadow:inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.06); transition:color .12s, box-shadow .12s; } .micro svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .micro:hover{ color:#d7dae0; box-shadow:inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.09); } .micro.del:hover{ color:#FF6B6B; box-shadow:inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px rgba(255,45,45,.35), 0 0 8px rgba(255,45,45,.2); } .micro:disabled{ opacity:.3; cursor:not-allowed; } /* the milled channel between the row's actions and its chevron */ .sep{ width:1px; height:18px; flex:0 0 1px; margin:0 3px; background:#0a0b0c; box-shadow:1px 0 0 rgba(255,255,255,.07); } /* the chevron is a knurled thumbwheel edge — grip texture, so it reads as the thing you flick rather than a thing you press */ /* Knurled — but the teeth stay UNDER the glyph. At 20px a 3px knurl and an 11px chevron are the same spatial frequency, and the eye loses the chevron in the texture: the grip has to be a whisper (.05) and the glyph has to be brighter than anything around it, with a dark halo holding it off the metal. */ .chev{ width:20px; height:22px; flex:0 0 20px; border-radius:4px; display:flex; align-items:center; justify-content:center; border:0; padding:0; cursor:pointer; color:#aeb4be; /* POSITIONED, like every other control with a chamfer. Without it the .chev.open::after ring resolved against .row — a 2px chamfer drawn around the whole row and then clipped away by its overflow, so the one control the rule names by name was the one control not getting it. */ position:relative; background-image:repeating-linear-gradient(72deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.16) 1px 3px); background-color:#202226; box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.5); transition:transform .16s, color .12s, box-shadow .12s; } .chev svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.9)); } .chev:hover{ color:#fff; } .chev.open{ color:var(--led); } .chev.open svg{ transform:scale(.9); filter:drop-shadow(0 0 3px rgba(255,130,30,.65)); } /* ── the ALL row is a BUS BAR — a different material, once ───────────────── */ .row.all{ background: repeating-linear-gradient(96deg, rgba(255,255,255,.045) 0 1px, transparent 1px 2px), linear-gradient(180deg,#3a3e45,#2a2d33 55%,#232629); box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(0,0,0,.75), 0 2px 4px rgba(0,0,0,.6); } .row.all:hover{ background: repeating-linear-gradient(96deg, rgba(255,255,255,.055) 0 1px, transparent 1px 2px), linear-gradient(180deg,#43474f,#31353b 55%,#282b30); } /* ALL never truncates — it is three characters and the row's whole subject. */ .row.all .name{ letter-spacing:.14em; flex:0 0 auto; } /* selected — the module is UNDER power: a rim of its own colour and a lit face */ .row.sel{ background:linear-gradient(180deg,#34383f,#232629 60%,#1e2023); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--lyr) 55%, transparent), 0 0 12px -2px color-mix(in srgb, var(--lyr) 45%, transparent), 0 2px 5px rgba(0,0,0,.65); } /* ── the stroke strip: a sub-bay, wired to its row by the light pipe's rail ── */ .strokes{ display:flex; align-items:center; gap:4px; margin:4px 8px 2px 22px; padding:6px 8px; border-radius:6px; border-left:2px solid var(--lyr); background:linear-gradient(180deg,#191c20,#22262b); box-shadow:inset 0 2px 5px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.055), -3px 0 8px -4px color-mix(in srgb, var(--lyr) 60%, transparent); } .strokes.allstrip{ margin-left:16px; border-left-color:#4a4e56; box-shadow:inset 0 2px 5px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.055); } .gap{ width:8px; flex:0 0 8px; height:16px; background:linear-gradient(90deg,transparent,#000,transparent); opacity:.6; } /* ── the footer: a guarded action. Hazard stripes are the affordance — this is the one control in the panel that destroys work. ────────────────────── */ .foot{ padding:0 9px 12px; position:relative; z-index:2; } .wipe{ width:100%; height:32px; gap:8px; border-radius:8px; font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:.06em; color:#8d929b; } .wipe svg{ width:13px; height:13px; } .wipe:hover:not(:disabled){ color:#FFD3D3; background:linear-gradient(180deg,#5c1414,#3a0d0d 55%,#280909); box-shadow: inset 0 1px 0 rgba(255,140,140,.3), inset 0 -1px 0 rgba(0,0,0,.8), 0 2px 0 #180505, 0 0 12px rgba(255,45,45,.35); } .wipe:hover:not(:disabled)::before{ content:''; position:absolute; inset:0; border-radius:8px; pointer-events:none; opacity:.14; background:repeating-linear-gradient(45deg,#FF2D2D 0 6px, transparent 6px 12px); } .key.skirt{ box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.7), 0 3px 0 #0e0f11, 0 5px 8px rgba(0,0,0,.7); } /* ── EVERY CONTROL THAT IS IN, DRAWN THE ONE WAY ───────────────────────── Finger-held and mechanism-held are the same physical position, so they are the same rule. None of them declares a fill: each inherits its own raised face, which is what keeps a pressed cap recognisably the same object as the cap next to it, and means tuning a surface tunes both its states at once. Travel is 2px on the big keys and 1px on the small ones, down from 3-4px. With the walls and the chamfer doing the work the drop no longer has to carry the message, and a tab that fell 4px was moving further than the gap to its neighbour. */ .key.skirt:active, .key.skirt.is-down, .pkey:active, .pkey.is-down, .chip:active, .chip.is-down, .chev.open{ transform:translateY(2px); box-shadow:var(--recess); } /* the small ones travel half as far — 2px on a 24px cap is a lurch */ .sw:active, .sw.on, .sw.mixed{ transform:translateY(1px); } .chev.open{ transform:rotate(90deg) translateY(1px); } /* THE CHAMFER, on everything with a hole to sit in. --ring-r is the control's own radius plus the 2px the ring sits outside it. */ .sw.on::after, .sw.mixed::after, .sw:active::after, .key.skirt.is-down::after, .key.skirt:active::after, .pkey.is-down::after, .pkey:active::after, .chip.is-down::after, .chip:active::after, .chev.open::after{ content:''; position:absolute; inset:-2px; border-radius:var(--ring-r,9px); pointer-events:none; padding:1.6px; background:var(--chamfer); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:blur(.5px); } .sw{ --ring-r:9px; } .key{ --ring-r:9px; } .pkey{ --ring-r:10px; } .chip{ --ring-r:9px; } .chev{ --ring-r:6px; } /* LATCHED: down AND lit. The lamp is what separates "held by a finger" from "held by the mechanism". */ /* LATCHED: down AND lit. The lamp is what separates "held by a finger" from "held by the mechanism" — but the cap being 3px lower than its neighbours is already most of the message, so the lamp is a warm glyph and a little light in the well, not a bloom on the chassis. */ /* LATCHED IS EXACTLY WHAT :active ALREADY DRAWS, held. That state was right all along and the latched one kept inventing a darker cap instead of reusing it — which is why a lit key read as a hole rather than as a key that is in. The recipe, and it is the whole of it: the cap keeps ITS OWN COLOUR, the gradient INVERTS (dark at the top, light at the bottom — the bezel is now shading the top of a face that has dropped below it, and the light that reaches it bounces off the well), a hard black inset runs along the top edge, and a hairline of light sits along the bottom. Nothing is tinted, so the cap you press and the cap that is held down are recognisably the same object in two positions. Then the LEGEND lights: orange, with just enough glow to read as backlit rather than as printed. That is where all the colour in this state lives. */ .key.is-down{ color:var(--led); } .key.is-down svg{ filter:drop-shadow(0 0 3px rgba(255,130,30,.7)); } .key.is-down:hover{ color:var(--led-hot); background:linear-gradient(180deg,#1d1f24,#282b30); } /* MOMENTARY actuation: the lamp pulses once and dies. Added for 260ms on click. A key that does something and shows nothing is a key you press twice. */ @keyframes actuate{ 0% { box-shadow:inset 0 2px 5px rgba(0,0,0,.85), 0 0 0 1px rgba(255,106,0,.65), 0 0 16px rgba(255,106,0,.55); color:#FFD9BC; } 100% { box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 3px 0 #0e0f11, 0 5px 8px rgba(0,0,0,.7); } } .key.flash{ animation:actuate .26s ease-out; } /* ── THE SAME SURGE WHEN A TOGGLE GOES IN ──────────────────────────────── A momentary key pulses once when you hit it, and that pulse turned out to be the most convincing thing on the panel — it is the only moment the UI behaves like something with current in it. A toggle deserves it more, not less: a momentary key's pulse reports an event, a toggle's reports that a circuit has just closed and is now staying closed. IT IS LITERALLY THE MOMENTARY KEY'S ANIMATION. I wrote a second one for toggles — a filter with a brightness ramp — on the theory that a latching control wanted its own gesture. It did not. Two surges that are nearly the same read as one done badly, and the filter version was the worse of the two: brightness lifts the whole cap, including the shadow inside it, so the recess washes out at exactly the moment the eye is on it. The good one puts the light OUTSIDE — a hot rim on the cutout and a 16px bloom on the panel around it — and leaves the cap alone. Same keyframe shape as :active, same 260ms, and the only difference is where it lands: the momentary key settles back to its raised shadow, this one settles into the recess, because that is where a toggle stops. */ /* THE LEGEND IS ORANGE FROM FRAME ONE. It was starting at #FFD9BC — near white — and animating to the accent, so for a quarter second the icon was pale and only arrived at orange as the glow died: the switch appeared to turn on AFTER the surge rather than because of it. That washed-out start works on the momentary key, where the lamp is the whole event and there is no lit state waiting at the end. Here there is one, so the colour is simply already there and the animation only carries the light around it. */ @keyframes engage{ 0% { box-shadow:var(--recess), 0 0 0 1px rgba(255,106,0,.65), 0 0 16px rgba(255,106,0,.55); } 100% { box-shadow:var(--recess); } } .engage{ animation:engage .26s ease-out; } /* ── NO FOCUS RING, AT ALL ─────────────────────────────────────────────── Skew paints no focus indicator and lets no browser paint one either. `*:focus` alone is not enough: deleting our outlines does not remove a focus ring, it removes the one we control — Chrome's default comes back underneath, 2-3px of white-blue. `:focus-visible` has to be answered explicitly, not ignored. Same for Firefox's inner border on buttons and the highlight flash on touch. Honest note, and it is in the bill: this removes the WCAG focus indicator entirely. Keyboard focus moves invisibly across every control on the panel. Deliberate — a rectangle floating off a moulded cap is the one thing here that is unmistakably a web page, and it lands hardest exactly where the illusion is most expensive. Menu and listbox row highlights are NOT focus rings and stay: they are how you see which row you are on in an open dropdown. See .menu-row and .sel-row below, and .skip, which needs :focus to appear at all. */ html{ -webkit-tap-highlight-color:transparent; } *:focus, *:focus-visible{ outline:none; } ::-moz-focus-inner{ border:0; } /* ═══════════════════════════════════════════════════════════════════════════ THE NAV BAR — a control strip screwed to the desk ═══════════════════════════════════════════════════════════════════════════ */ .strip{ display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:15px; position:relative; background:linear-gradient(176deg,#26282d 0%,#1b1c20 30%,#161719 80%,#1d1e22 100%); box-shadow: 0 30px 44px -20px rgba(0,0,0,.9), 0 6px 12px -5px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.9); } .strip::before{ content:''; position:absolute; inset:0; border-radius:15px; pointer-events:none; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), var(--grain); background-size:auto,140px; opacity:.5; mix-blend-mode:overlay; } .strip .key{ width:34px; height:34px; border-radius:9px; } .strip .key svg{ width:16px; height:16px; } /* A MILLED CHANNEL, not a border. Two 1px lines: the cut, and its lit far wall. */ .chan{ width:2px; height:26px; flex:0 0 2px; margin:0 5px; border-radius:1px; background:#08090a; box-shadow:1px 0 0 rgba(255,255,255,.08), inset 0 0 2px rgba(0,0,0,.9); } /* the status readout — a lit window, not a label */ .lcd{ height:26px; padding:0 11px; margin-left:3px; display:flex; align-items:center; gap:7px; border-radius:5px; background:linear-gradient(180deg,#080a09,#0f1211); box-shadow: inset 0 2px 5px rgba(0,0,0,.95), inset 0 -1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.07); font-family:var(--font); font-size:10.5px; letter-spacing:.09em; color:#7CFFB0; text-shadow:0 0 6px rgba(124,255,176,.7); font-variant-numeric:tabular-nums; } .lcd.dim{ color:#3f6d55; text-shadow:none; } /* ═══════════════════════════════════════════════════════════════════════════ THE PAGE SWITCHER — piano keys with a mechanical interlock Pressing one POPS THE OTHERS OUT. That is what a segmented control has always been pretending to be, and in metal it is literally true: three latching keys on one bar, and the bar can only hold one down. ═══════════════════════════════════════════════════════════════════════════ */ .piano{ display:inline-flex; gap:5px; padding:6px; border-radius:12px; position:relative; /* SAME FLOOR AS THE BAY, and for the same reason it was raised there: the caps came up in value and the well did not. A key's skirt is #0d0e10, so on a #0a0b0d floor the one part that proves the cap has a BODY was invisible: the cap read as a grey rectangle printed on black. The floor only has to be darker than the surface it is cut into, not black. The inset shadow is what puts it below; the fill just has to stay out of the way of the skirt. */ background:linear-gradient(180deg,#17191d,#1e2126); box-shadow: inset 0 3px 8px rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(255,255,255,.07); } .pkey{ height:36px; padding:0 22px; min-width:78px; display:flex; align-items:center; justify-content:center; border:0; border-radius:8px; cursor:pointer; font-family:var(--font); font-size:11.5px; font-weight:700; letter-spacing:.12em; color:#8d929b; background:linear-gradient(180deg,#34373d,#232529 55%,#1b1d20); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.7), 0 4px 0 #0d0e10, 0 6px 10px rgba(0,0,0,.7); transition:transform .1s cubic-bezier(.3,1.4,.5,1), box-shadow .1s, color .12s, background .12s; } .pkey:hover{ color:#d6dae0; } .pkey:active{ transform:translateY(4px); } /* A piano key that is DOWN is already saying so with 4px of travel, and it carries a lamp bar under the engraving. That is two signals; a halo round the cap would be a third saying the same thing. */ .pkey.is-down{ color:var(--led); text-shadow:0 0 6px rgba(255,130,30,.5); } /* the lamp bar under the engraved label — the key is lit from inside */ .pkey{ position:relative; } /* ── THE GUTTER BELONGS TO THE KEYS ────────────────────────────────────── A GROUP WITH `gap` AND `padding` HAS PIXELS INSIDE IT THAT BELONG TO NO BUTTON, and every one of them is a small lie: the thing looks like one continuous control, the pointer is over it, and the click goes nowhere. Worse on this part than most, because the keys carry 4px of travel and a chamfer that reaches 2px OUTSIDE them — so the lit edge of a key is already standing in the gutter, and the gutter is exactly where a click does nothing. THE HIT AREA IS A PSEUDO-ELEMENT AND THE PAINTED KEY IS NOT TOUCHED. A pseudo is not its own event target — a hit on it is a hit on the element that owns it — so `::before` stretched past the cap gives the key the gutter without moving, resizing or restyling anything you can see. Doing it with padding or a negative margin would have shifted the layout; doing it by removing the gap would have welded the keys into one slab. THE REACH IS HALF THE GAP, DECLARED PER GROUP, and it has to be: a flat 3px would close the nav's 6px gutter exactly and OVERLAP the hatch tabs' 4px row gap by two pixels each way, so the key below would claim the bottom of the key above and you would press the wrong tab by aiming at the right one. Half a gap always meets its neighbour at the midline and never crosses it. Every group that overrides `gap` owes this variable a value; the defaults are `.piano`'s own 5px gap and a vertical reach that fits inside its 6px padding. THE OUTER FRAME STAYS INERT ON PURPOSE. The group's padding is the case the keys are set into, not a gutter between two of them, and the edge of a case is not a button. IT MUST STAY TRANSPARENT AND MUST NOT SET `pointer-events:none`. Those are the two ways to write this rule and have it do nothing at all. AND IT IS A RECTANGLE. `border-radius:inherit` was the third way, and the one that survived two rounds of looking straight at it: browsers hit-test the ROUNDED box, so a pad that copies the cap's 8px corner is dead in the crescent outside every one of its four curves. At the top of a seam the crescents of two neighbouring pads meet and make a notch about 8px wide — which is the exact spot a pointer arrives at when it aims between two keys, and the exact spot this was reported from, twice. A PAD IS NOT DRAWN, SO IT HAS NO SHAPE TO KEEP. Rounding it inherits the look of the cap and none of the reason for it, and hands back at the corners the area the reach was added to claim. Square, and the seam is straight all the way to the top of the strip. */ .pkey::before, .key::before, .chip::before{ content:''; position:absolute; border-radius:0; inset:calc(var(--pkey-reach-y, 4px) * -1) calc(var(--pkey-reach-x, 2.5px) * -1); } .nav-pages{ --pkey-reach-x:3px; } /* gap 6 */ .piano.sm{ --pkey-reach-x:3.5px; } /* gap 7 */ .piano.sm.hb-tabs{ --pkey-reach-x:2.5px; --pkey-reach-y:2px; } /* 5 / row 4 */ .keypad{ --pkey-reach-y:5.5px; } /* row gap 11 */ .strip{ --pkey-reach-x:3.5px; --pkey-reach-y:9px; } /* gap 7, padding 9 13 */ /* ── AND THE PRESS MUST NOT TAKE THE HIT AREA WITH IT ───────────────────── A CAP THAT TRAVELS MOVES OUT FROM UNDER THE POINTER THAT PRESSED IT, and that is a whole class of click that animates and then does nothing. `:active` lands on pointerDOWN and drops the cap 2px; if the press landed in the top 2px, the pointer is now above the element, pointerUP goes to the chassis, and `click` fires on the nearest common ancestor of the two — the group. You get the full press and release, and no handler. It is worst where it is least visible: the dead band is exactly the travel, so it is 2px on every big cap and it hugs the top edge, which is the edge a pointer arrives at. THE PAD MOVES THE OTHER WAY BY THE SAME AMOUNT, so it stays where it was in screen space while the cap falls through it. Nothing visible moves — the pad was never drawn — and the pointer never leaves the element it pressed. This is the whole fix, and it has to be stated for the LATCHED states too: a key sitting `.is-down` is a key holding 2px of travel permanently, and its top 2px would be dead at rest. THE NUMBER IS COPIED, NOT DERIVED, and that is deliberate. It must equal the travel in the rule above it or it makes a second dead band pointing the other way, so it is written next to nothing else and changed with that rule. */ .key:active::before, .key.is-down::before, .key.skirt:active::before, .key.skirt.is-down::before, .pkey:active::before, .pkey.is-down::before, .chip:active::before, .chip.is-down::before{ transform:translateY(-2px); } /* `.sw` is absent here on purpose — see the note on its grain pseudo above. */ /* THE SMALL STRIPS DO NOT TRAVEL, so their pads must not compensate for travel that never happens — that would open the same dead band along the BOTTOM. */ .piano.sm .pkey:active::before, .piano.sm .pkey.is-down::before{ transform:none; } /* ── THE OUTER FRAME BELONGS TO THE END KEYS ────────────────────────────── THE CASE IS NOT A BUTTON WAS THE WRONG CALL, and it was made about a part nobody had pressed yet. In use the frame reads as dead, not as the edge of the object: the strip looks like one continuous control, the pointer is over it, and the click goes nowhere. That is the same sentence the gutter rule above opens with, and the gutter and the rim are the same complaint. HALF A GAP INWARD, THE WHOLE PADDING OUTWARD. A key meets its neighbour at the midline and never crosses it; toward the case there is no neighbour to meet, so it takes the lot. A single-row strip has no neighbour above or below either, which is why the vertical reach here is the padding rather than the 4px default — in a one-row group every key touches the top and bottom frame. THE CORNER NEEDS NO RADIUS AT ALL, and giving it one was the mistake that cost a round: the pad is square everywhere now, so an end pad reaching the case fills the chassis corner completely rather than leaving the crescent the chassis's own 12px would have cut out of it. */ /* EACH GROUP NAMES ITSELF AND EXCLUDES THE OTHERS. `.nav-pages` and `.piano.sm` both carry `.piano`, so an unscoped `.piano` rule reaches into them at equal specificity and the winner is whichever was written last — a padding value decided by source order. */ .piano:not(.sm):not(.nav-pages) > .pkey::before{ top:-6px; bottom:-6px; } .piano:not(.sm):not(.nav-pages) > .pkey:first-child::before{ left:-6px; } .piano:not(.sm):not(.nav-pages) > .pkey:last-child::before{ right:-6px; } /* the two single-row 5px strips */ .piano.sm:not(.hb-tabs) > .pkey::before, .nav-pages > .pkey::before{ top:-5px; bottom:-5px; } .piano.sm:not(.hb-tabs) > .pkey:first-child::before, .nav-pages > .pkey:first-child::before{ left:-5px; } .piano.sm:not(.hb-tabs) > .pkey:last-child::before, .nav-pages > .pkey:last-child::before{ right:-5px; } /* THE TAB STRIP IS A GRID AND `:first-child` IS NOT ITS LEFT EDGE. Six keys auto-flow into three columns across two rows, then `.chan` and ALL are placed in columns 4 and 5 — so the LAST DOM CHILD IS NOT THE LAST KEY, and the key at the left of row two is child four. What the rim depends on is column and row position, so that is what this asks for. `nth-child` is safe here for the same reason the grid is: the count is fixed at six by the same rule that fixes the template at three columns. IT ALSO MUST NOT TAKE THE SINGLE-ROW RULE ABOVE, which is why that one is scoped away from `.hb-tabs`: a -5px reach off the top AND the bottom of a grid whose row gap is 4px would put row one's pad 6px inside row two, and the row you pressed would depend on which pad painted last. COLUMN 3 HAS THE MILLED CHANNEL TO ITS RIGHT, not the case — so it keeps the half-gap default and owes nothing here. */ .hb-tabs > .pkey:nth-child(-n+3)::before{ top:-5px; } /* row 1 → the frame */ .hb-tabs > .pkey:nth-child(n+4)::before{ bottom:-5px; } /* row 2 → the frame */ .hb-tabs > .pkey:nth-child(3n+1)::before{ left:-5px; } /* column 1 → the frame */ /* THE DOCK STRIP IS THE SAME OBJECT WITH A WIDER FRAME — 13px of padding either end against a piano's 6, and a 15px corner. The `.chan` is a child of it, so `:first-child`/`:last-child` are the end keys only while it stays between them, which is what §09's slot list fixes. */ .strip > .key:first-child::before{ left:-13px; } .strip > .key:last-child::before{ right:-13px; } /* ═══════════════════════════════════════════════════════════════════════════ THE LIGHT DIRECTION SETTER — a hemisphere, flattened, with the lamp on it ═══════════════════════════════════════════════════════════════════════════ IT IS A WELL, NOT A DIAL, and the difference decides every value below. A dial is a part you turn and it has a cap, a collar and a pointer; this is a HOLE cut in the plate with the sky drawn on its floor and one lit thing sitting in it. So it takes the slot's language — the same near-black floor, the same overhanging top wall, the same bounce off the bottom — rather than the knob's, even though the two sit side by side in the same group. THE FLOOR IS DARKER AT ITS RIM THAN AT ITS MIDDLE, which is doing two jobs at once and is the only reason a flat disc reads as a bowl: it is what a round well does under a lamp, and it is also what the CONTENT means, since the rim is the horizon and the middle is the zenith. The one gradient says both. */ .lwrap{ display:flex; flex-direction:column; gap:9px; align-items:center; } .lwrap .lcap{ align-self:flex-start; } .ldisc{ position:relative; width:var(--ld,132px); height:var(--ld,132px); border-radius:50%; flex:0 0 auto; cursor:crosshair; touch-action:none; box-shadow: inset 0 3px 7px rgba(0,0,0,.9), inset 0 -1px 1px rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.06); } .ld-well{ position:absolute; inset:0; border-radius:50%; display:block; background: radial-gradient(circle at 50% 42%, #1b1e23 0%, #131519 46%, #0a0c0e 82%, #06080a 100%); } /* ── THE MARKS ──────────────────────────────────────────────────────────── THE 45° RING IS DRAWN AND THE OTHERS ARE NOT, and that is the whole of the scale. A dial with a ring every fifteen degrees is a protractor, and nobody aims a lamp by counting rings — but 45° is a place people ASK for by name, so it gets a line and the rest of the hemisphere gets none. The rim is the second ring and it is the horizon, which needs no naming. THE LEGENDS SIT AT THE FOUR QUARTERS, INSIDE the rim, because a number outside the cut is printed on the plate and would have to move when the control is resized. Everything here scales with the viewBox. */ .ld-face{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; } .ld-ring{ fill:none; stroke:rgba(255,255,255,.075); stroke-width:.7; } .ld-45{ stroke:rgba(255,255,255,.05); stroke-dasharray:1.6 2.4; } .ld-cross{ stroke:rgba(255,255,255,.045); stroke-width:.6; } .ld-deg{ fill:#5a606a; font-family:var(--font); font-size:5.4px; letter-spacing:.04em; } /* ── THE LAMP ───────────────────────────────────────────────────────────── THE ONE LIT THING, and it is §04's jewel at the numbers §04 uses. A light picker whose light is a different light from the panel's other lights is two lamps, and this document has spent long enough learning that. What it adds is a hairline of dark UNDER it — the puck is standing on the floor of the well and something has to say so, or a glowing dot at the middle of a dark disc is a hole rather than an object. IT WAS A SHADED 3D ARROW FOR ONE VERSION, and the note is worth keeping because the arrow is the obvious idea and somebody will have it again. On paper it wins: a vector says WHICH WAY and a dot only says WHERE. On a 118px disc it loses, and for a reason that is not a matter of taste — the head has to scale with the length or it eats the shaft, so above about 60° of elevation the arrow is a stub, and the one shape that has to stay recognisable is changing shape across exactly the range you care about. A dot is the same mark at every elevation, and the rings already carry the reading the arrow was there to give. */ .ld-puck{ position:absolute; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%; display:block; pointer-events:none; background:radial-gradient(circle at 34% 28%, #fff 0%, color-mix(in srgb, var(--lyr, var(--led)) 60%, #fff) 16%, var(--lyr, var(--led)) 52%, color-mix(in srgb, var(--lyr, var(--led)) 55%, #000) 100%); box-shadow: 0 0 6px color-mix(in srgb, var(--lyr, var(--led)) 70%, transparent), 0 0 15px color-mix(in srgb, var(--lyr, var(--led)) 36%, transparent), inset 0 -1px 2px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.55); /* IT FOLLOWS THE FINGER AND EASES EVERYWHERE ELSE. A transition on a puck being dragged is lag; the same transition when a host calls `set` or an arrow key fires is the lamp swinging rather than teleporting. */ transition:left .12s ease-out, top .12s ease-out; } .ldisc.dragging .ld-puck{ transition:none; } /* ── THE TWO NUMBERS ────────────────────────────────────────────────────── STILL THERE, AND STILL TYPEABLE. The picker replaces the arithmetic, not the value: 325 is a thing you copy out of one panel into another, and a control that can only be dragged cannot be handed a number somebody read to you over the phone. */ .lrow{ display:flex; gap:7px; width:100%; } .lfield{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; } .lfield .kval{ width:100%; } /* ═══════════════════════════════════════════════════════════════════════════ LAUNCHPAD — one rack module per project ═══════════════════════════════════════════════════════════════════════════ */ .console{ border-radius:16px; padding:18px; background:linear-gradient(176deg,#1d1f23,#141517 60%,#17181b); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.85), 0 26px 44px -22px rgba(0,0,0,.9); position:relative; } .console::before{ content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none; background-image:var(--grain); background-size:140px; opacity:.05; mix-blend-mode:overlay; } .con-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; position:relative; z-index:1; } /* folder chips are latching radio keys, same interlock as the page switcher */ .chip{ height:28px; padding:0 12px; display:inline-flex; align-items:center; gap:7px; /* POSITIONED, OR THE HIT PAD AND THE CHAMFER BOTH GO SOMEWHERE ELSE. This was missing and only worked by accident: `:active` puts a `transform` on the chip, and a transform makes a containing block — so the chamfer, which exists only while pressed, always found one. The hit pad has to be there at REST, where there is no transform, so it needs the real thing. */ position:relative; border:0; border-radius:7px; cursor:pointer; font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:.08em; color:#8d929b; background:linear-gradient(180deg,#2c2f34,#1e2024); box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 2px 0 #0e0f11, 0 3px 5px rgba(0,0,0,.6); transition:transform .1s, box-shadow .1s, color .12s, background .12s; } .chip:hover{ color:#dfe2e7; } .chip:active{ transform:translateY(2px); } .chip.is-down{ color:var(--led); text-shadow:0 0 6px rgba(255,130,30,.5); } .chip .ct{ font-size:9.5px; padding:1px 5px; border-radius:3px; background:rgba(0,0,0,.45); color:#7CFFB0; text-shadow:0 0 5px rgba(124,255,176,.5); box-shadow:inset 0 1px 2px rgba(0,0,0,.8); } .chip.is-down .ct{ color:#FFD9BC; text-shadow:0 0 5px rgba(255,140,60,.6); } .chip.new{ color:#6d727c; background:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.05); } .chip.new:hover{ color:#c6cad1; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); } /* the search slot — a milled well with a real input in it */ .slot{ display:flex; align-items:center; gap:8px; height:30px; padding:0 11px; border-radius:7px; flex:1 1 190px; max-width:280px; background:linear-gradient(180deg,#0a0b0d,#131518); box-shadow:inset 0 2px 5px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(255,255,255,.06); } .slot svg{ width:13px; height:13px; stroke:#5b6069; fill:none; stroke-width:1.8; flex:0 0 13px; } .slot input{ flex:1; min-width:0; background:none; border:0; outline:0; padding:0; font-family:var(--font); font-size:11px; letter-spacing:.06em; color:#7CFFB0; text-shadow:0 0 6px rgba(124,255,176,.5); } .slot input::placeholder{ color:#3f444c; text-shadow:none; letter-spacing:.1em; } .rack{ display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:14px; position:relative; z-index:1; } .module{ position:relative; display:flex; flex-direction:column; gap:9px; padding:14px 14px 12px 17px; border-radius:11px; background:linear-gradient(178deg,#282b30,#1e2023 55%,#1a1c1f); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.75), 0 3px 6px rgba(0,0,0,.6); overflow:hidden; } .module::after{ content:''; position:absolute; inset:0; pointer-events:none; background-image:var(--grain); background-size:140px; opacity:.05; mix-blend-mode:overlay; } /* THE RUNNING RAIL — the green bar down the left of the shipping card, as a light pipe. Dark and dead when the project is not up. */ .module::before{ content:''; position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius:0 3px 3px 0; background:#26282c; box-shadow:inset -1px 0 2px rgba(0,0,0,.8); transition:background .2s, box-shadow .2s; } .module.up::before{ background:linear-gradient(180deg,#7CFFB0,#22C55E); box-shadow:0 0 7px rgba(60,230,140,.8), 0 0 18px rgba(60,230,140,.35), inset 0 0 3px rgba(255,255,255,.7); } .mod-head{ display:flex; align-items:center; gap:9px; } /* the status LED — a jewel, dark until the process is alive */ .pilot{ width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:radial-gradient(circle at 34% 28%, #4a4f57, #26282c 70%); box-shadow:inset 0 -1px 1px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.6); transition:background .2s, box-shadow .2s; } .module.up .pilot{ background:radial-gradient(circle at 34% 28%, #fff 0%, #B6FFD4 18%, #2BE07A 55%, #128C45 100%); box-shadow:0 0 6px rgba(43,224,122,.85), 0 0 15px rgba(43,224,122,.4), inset 0 -1px 1px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.5); } .mod-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font); font-size:12.5px; font-weight:700; letter-spacing:.01em; color:#e3e6eb; text-shadow:0 1px 0 rgba(0,0,0,.85); } /* NODE — a stamped plate, not a coloured pill */ .stamp{ font-family:var(--font); font-size:8.5px; font-weight:700; letter-spacing:.14em; padding:2px 5px; border-radius:3px; color:#0d1a12; background:linear-gradient(180deg,#8FE9B4,#3FA96C); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.6); } .mod-desc{ font-size:11.5px; line-height:1.5; color:#7e838d; margin:0; min-height:34px; } /* the port display — a lit strip. It is a LINK, so it also has a key on it. */ .port{ display:flex; align-items:center; gap:8px; height:30px; padding:0 10px; border-radius:6px; cursor:pointer; border:0; width:100%; text-align:left; background:linear-gradient(180deg,#06110c,#0c1a13); box-shadow:inset 0 2px 5px rgba(0,0,0,.9), inset 0 0 12px rgba(60,230,140,.10), inset 0 -1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(255,255,255,.06); font-family:var(--font); font-size:11px; letter-spacing:.06em; color:#7CFFB0; text-shadow:0 0 7px rgba(124,255,176,.7); } .port:hover{ box-shadow:inset 0 2px 5px rgba(0,0,0,.9), inset 0 0 16px rgba(60,230,140,.2), 0 0 8px rgba(60,230,140,.2); } .port span:last-child{ margin-left:auto; font-size:9px; color:#3f7a5c; text-shadow:none; letter-spacing:.1em; } .port svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8; } .mod-acts{ display:flex; align-items:center; gap:7px; } /* LAUNCH — an illuminated green key. The lamp lens is INSIDE the cap, left of the label, the way a real illuminated pushbutton is built. */ .act{ height:32px; padding:0 13px; gap:8px; border-radius:8px; flex:0 0 auto; font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:.08em; } .act svg{ width:12px; height:12px; } .act.go{ color:#CFFFE3; background:linear-gradient(180deg,#1E7A47,#12613A 55%,#0C4529); box-shadow: inset 0 1px 0 rgba(190,255,220,.35), inset 0 -1px 0 rgba(0,0,0,.6), 0 3px 0 #06301c, 0 5px 9px rgba(0,0,0,.65), 0 0 12px rgba(43,224,122,.22); } .act.go:hover{ background:linear-gradient(180deg,#279456,#167544 55%,#0F5533); box-shadow:inset 0 1px 0 rgba(190,255,220,.45), 0 3px 0 #06301c, 0 5px 9px rgba(0,0,0,.65), 0 0 18px rgba(43,224,122,.4); } .act.go:active{ transform:translateY(3px); box-shadow:inset 0 2px 6px rgba(0,0,0,.8), 0 0 0 #06301c, 0 1px 2px rgba(0,0,0,.5), 0 0 14px rgba(43,224,122,.35); } /* STOP — red, and it reads as red BEFORE you read the word. The lens is lit because the thing it stops is running; a dark stop button is a lie. */ .act.halt{ color:#FFD6D6; background:linear-gradient(180deg,#8E1F1F,#661616 55%,#490F0F); box-shadow: inset 0 1px 0 rgba(255,190,190,.35), inset 0 -1px 0 rgba(0,0,0,.6), 0 3px 0 #2c0808, 0 5px 9px rgba(0,0,0,.65), 0 0 12px rgba(255,45,45,.25); } .act.halt:hover{ background:linear-gradient(180deg,#A82626,#7C1B1B 55%,#5A1313); box-shadow:inset 0 1px 0 rgba(255,190,190,.45), 0 3px 0 #2c0808, 0 5px 9px rgba(0,0,0,.65), 0 0 18px rgba(255,45,45,.45); } .act.halt:active{ transform:translateY(3px); box-shadow:inset 0 2px 6px rgba(0,0,0,.85), 0 0 0 #2c0808, 0 1px 2px rgba(0,0,0,.5), 0 0 14px rgba(255,45,45,.4); } /* the lamp lens inside an illuminated key */ .lens{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; } .act.go .lens{ background:radial-gradient(circle at 35% 30%, #fff, #7CFFB0 40%, #1FA85C); box-shadow:0 0 6px rgba(124,255,176,.9), inset 0 -1px 1px rgba(0,0,0,.4); } .act.halt .lens{ background:radial-gradient(circle at 35% 30%, #fff, #FF9B9B 40%, #C21B1B); box-shadow:0 0 6px rgba(255,80,80,.9), inset 0 -1px 1px rgba(0,0,0,.4); } /* secondary keys — unlit, plain metal. They open something elsewhere. */ .act.aux{ padding:0 11px; color:#9aa0aa; } /* …unless one of them LATCHES. `.act.aux` and `.key.is-down` have the same specificity and this file declares aux later, so a latched aux key was quietly keeping its grey glyph — the one thing the lit state is made of. */ .act.is-down{ color:var(--led); } .mod-tags{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } /* an engraved tag: cut into the module face, so it is a MARK not a control */ .tagcut{ font-family:var(--font); font-size:9px; letter-spacing:.1em; padding:2px 7px; border-radius:4px; color:#797e88; background:linear-gradient(180deg,#171a1c,#1e2124); box-shadow:inset 0 1px 3px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.06); text-shadow:0 1px 0 rgba(255,255,255,.06); } .tagcut.folder{ color:#C99A5B; } /* the drag grip — knurled, bottom right, exactly where the shipping card has it */ .grip{ position:absolute; right:9px; bottom:9px; width:14px; height:14px; border-radius:3px; background-image:radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1.2px); background-size:5px 5px; opacity:.35; cursor:grab; } .grip:hover{ opacity:.7; } .empty{ grid-column:1/-1; padding:38px; text-align:center; border-radius:11px; font-family:var(--font); font-size:10.5px; letter-spacing:.18em; color:#4a4e56; background:linear-gradient(180deg,#0a0b0d,#131518); box-shadow:inset 0 3px 7px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05); text-shadow:0 1px 0 rgba(255,255,255,.06); } /* ═══════════════════════════════════════════════════════════════════════════ THE KNOB — what a slider becomes when it has to exist as an object ─────────────────────────────────────────────────────────────────────────── A slider is a track and a lump. A knob is FOUR parts and each one earns it: 1 THE COLLAR a milled ring the cap sits in, so it looks fitted 2 THE ARC the value, drawn as a lit trace around the collar from the minimum to where you are. This is the readout you actually use — the number is for confirming, the arc is for judging. A slider's filled track does the same job badly, because it is straight and everything else is not 3 THE CAP knurled aluminium, conic-gradient teeth, domed with an off-centre specular that stays put as the cap turns 4 THE POINTER one cut line, and it ROTATES. The knob's angle is the value, which is why you can read it from across the room 270° of travel, -135° to +135°, the way every real knob is built. Drag up or right to raise it; the wheel works too; shift for fine. WHERE A KNOB IS WRONG: a range with two ends you compare (Zone from / Zone to) still wants a track, because "from here to there" is a LENGTH and a length is a straight thing. Those stay faders — see .fader below. ═══════════════════════════════════════════════════════════════════════════ */ .knob{ width:var(--kd,54px); height:var(--kd,54px); position:relative; flex:0 0 auto; touch-action:none; cursor:ns-resize; } /* the collar it is fitted into */ .knob-collar{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 50%, #0c0d0f 56%, #1d1f23 57%, #101113 100%); box-shadow:inset 0 2px 5px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(255,255,255,.06); } /* THE VALUE ARC IS AN SVG STROKE, and it has to be. It was a conic-gradient behind a CSS mask, and both halves of that alias: a conic hard stop is a hard pixel edge with no antialiasing, and a radial-gradient mask has two more hard edges at the ring's inner and outer walls. Three stair-stepped boundaries on a 54px circle — which is exactly what a stepped orange arc looks like. A stroked with stroke-dasharray is antialiased by the renderer, scales to any size, gets a round cap for free, and the glow is one drop-shadow on currentColor instead of a colour-mix per state. */ .knob-ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; transform:rotate(135deg); /* put the 90° dead zone at the bottom */ color:var(--arc,#FF6A00); } /* AND AN ENDLESS KNOB HAS NO DEAD ZONE TO PUT ANYWHERE. An SVG circle starts at three o'clock, so the ring turns back to −90° to start the trace at twelve — which is where zero is on a knob that reads an angle. */ .knob.endless .knob-ring{ transform:rotate(-90deg); } /* ── AN ENDLESS KNOB'S POINTER IS ITS TRACE ───────────────────────────────── A POT PAINTS `--arc` ROUND THE RING because the arc is its readout. An endless knob draws no arc — the length of one on a closed ring is meaningless — so the same colour goes on the pointer, which is what carries the value here. One option, `arc`, used where each kind of knob actually says its number. AND IT IS ALWAYS ON, because it is not a state: it is what the knob IS. Colouring it only while something is being turned makes the dial go dark the moment you let go, and a dial that is only readable while you are touching it is not a readout. */ .knob.endless .knob-cap::after{ background:var(--arc); box-shadow:0 0 0 1px color-mix(in srgb, var(--arc) 40%, transparent), 0 0 5px color-mix(in srgb, var(--arc) 70%, transparent); } /* A BIPOLAR knob reads from the CENTRE, not from the minimum — Yaw at 0° with a half-full arc says "half way up the range", which is true and useless; what you want to see is how far off centre you are, and which side. So the trace grows out of 12 o'clock in whichever direction you turned, and the collar carries an etched centre mark for it to grow out of. */ .knob.bi .knob-collar::after{ content:''; position:absolute; left:50%; top:-2px; width:2px; height:5px; margin-left:-1px; border-radius:1px; background:#767d88; box-shadow:0 1px 1px rgba(0,0,0,.85); } /* ── AND THE MARK ON THE COLLAR IS THE SAME CHANNEL, ARRIVING ─────────────── IT IS ALREADY IN LINE WITH THE WIRE — a tick at twelve o'clock directly under where the trace comes down — so drawing it as a bright etched notch while the trace is a dark groove makes two different things out of one. Cut it the same way and the wire does not stop above the dial; it runs under the name and comes out on the collar, which is what the eye was going to assume anyway. Scoped to this panel: everywhere else the etched mark is right, because everywhere else there is no wire arriving at it. */ .orbay .knob.bi .knob-collar::after{ height:7px; top:-3px; border-radius:0; background:#0d1013; box-shadow:0 1px 0 rgba(255,255,255,.085), 0 -1px 0 rgba(0,0,0,.55); transition:background .16s linear, box-shadow .16s linear; } .kr-track,.kr-val{ fill:none; stroke-linecap:round; stroke-width:7; } .kr-track{ stroke:rgba(255,255,255,.075); } .kr-val{ stroke:currentColor; filter:drop-shadow(0 0 3px currentColor); transition:stroke-dasharray .05s linear; } .knob.dragging .kr-val{ transition:none; } /* the cap: knurled edge, domed face, fixed specular */ .knob-cap{ position:absolute; inset:19%; border-radius:50%; background: radial-gradient(circle at 36% 26%, rgba(255,255,255,.30) 0%, transparent 46%), conic-gradient(#3a3e45 0deg, #23262b 3deg, #3a3e45 6deg, #23262b 9deg), radial-gradient(circle at 50% 50%, #34383f 55%, #1c1e22 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 4px rgba(0,0,0,.75), 0 2px 4px rgba(0,0,0,.8); transform:rotate(var(--deg,0deg)); transition:transform .05s linear; } /* the pointer — a CUT, so it is dark with a lit lower wall */ .knob-cap::after{ content:''; position:absolute; left:50%; top:9%; width:2px; height:34%; margin-left:-1px; border-radius:1px; background:#0a0b0c; box-shadow:0 0 0 1px rgba(255,255,255,.13), 0 0 5px rgba(255,255,255,.10); } .knob.dragging .knob-cap{ transition:none; } /* ── the furniture, and it is the part that was too big ────────────────── A caption line, a knob and a readout line stacked is THREE rows for ONE control — a 54px knob in a 100px box. Stacked is kept only for a BANK, where three of them side by side is the point (Yaw / Pitch / Roll). Everything else is a ROW: knob, engraved label, readout, on one 42px line — the same height a slider row already was, so the knob costs nothing. */ .kwrap{ display:flex; flex-direction:column; align-items:center; gap:4px; } /* The inline form is a PARAM STRIP: its own small plate, so a column of them reads as a rack of channels rather than as controls floating on the body. (The modifier is `inline`, not `row` — `.row` is the layer module, and a knob strip was silently inheriting its plate, its hover and its grain.) */ .kwrap.inline{ flex-direction:row; align-items:center; gap:12px; width:100%; /* THE DIAL IS BIGGER THAN ITS BOX. The value arc sits at r=43 of 50 with a 3px glow in rendered pixels, so on a 40px knob the light spills about 1.6px outside the element. At 4px of padding against a 9px corner radius the plate's own edge was cutting diagonally through that spill, which is what a knob crammed into a slot looks like. 9px of air and a radius that follows the knob rather than fighting it. */ padding:9px 13px 9px 10px; border-radius:13px; /* A STRIP HAS AN INTRINSIC WIDTH AND MUST NOT GO UNDER IT. width:100% with nothing holding the floor lets a narrow parent squeeze the row until the label and the value climb onto the dial, which reads as a broken knob rather than as a container that is too small. */ min-width:178px; background:linear-gradient(180deg,#25282c,#1c1e21); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.5); } .kwrap.inline .klab{ flex:1; text-align:left; } .kwrap.inline .kval{ min-width:58px; } /* TILE — the stack on a PROUD PLATE, which makes it a module rather than a control. Same plate recipe as the inline strip, because they are the same decision in two orientations: a lit hairline on top, a dark one under, and a short cast shadow. The plate is the edge that says where one channel stops and the next begins, so this is what a GRID of knobs wants. */ .kwrap.tile{ gap:7px; padding:11px 13px 10px; border-radius:11px; background:linear-gradient(180deg,#25282c,#1c1e21); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.55); } /* COMPACT — dial and value, no caption, and no plate under it either: a strip earns its plate by being one of several in a column, and a single control sitting inside a row that already names it does not. */ .kwrap.compact{ flex-direction:row; align-items:center; gap:9px; } .kwrap.compact .kval{ min-width:52px; } /* BARE — the dial alone. Not a stack with its parts deleted: a caller that removes .klab and .kval by hand is a caller that has to be updated when the markup changes, and there were two of those before this existed. */ .kwrap.bare{ gap:0; } .klab{ font-family:var(--font); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:#5d626b; text-shadow:0 1px 0 rgba(255,255,255,.09); line-height:1; } .kval{ min-width:50px; height:18px; padding:0 7px; border-radius:4px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#080a09,#0f1211); box-shadow:inset 0 2px 4px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.06); font-family:var(--font); font-size:10.5px; color:#7CFFB0; text-shadow:0 0 6px rgba(124,255,176,.65); font-variant-numeric:tabular-nums; } /* THE FIELD IS THE WINDOW, not a box drawn inside it. A readout being typed into is the same lit glass with a cursor in it — same phosphor, same tabular figures, no border and no white ground, because nothing about it has become a form. Only the caret says it is live. */ /* NO I-BEAM ON THE WINDOW. A text cursor over a readout says "this is a text field", and it is not one — it is a display that will take a value if you ask it twice. The pointer stays a pointer until the caret is actually in there. */ .kedit-able{ cursor:default; } .kval input.kedit, .lcd input.kedit{ width:100%; min-width:0; border:0; padding:0; margin:0; background:none; text-align:center; font:inherit; color:inherit; text-shadow:inherit; font-variant-numeric:tabular-nums; letter-spacing:inherit; caret-color:#7CFFB0; } .kval input.kedit:focus, .lcd input.kedit:focus{ outline:none; } /* the window brightens while it is taking input, the way a lit display does */ .kval:has(input.kedit), .lcd:has(input.kedit){ box-shadow:inset 0 2px 4px rgba(0,0,0,.95), 0 0 0 1px rgba(124,255,176,.35), 0 0 7px rgba(124,255,176,.20); } /* ── the FADER, built like one ─────────────────────────────────────────── Kept only where the value is a LENGTH. The first pass was a rounded bar and a rounded lump, which is the flat slider with a bevel painted on. A real fader is four things: THE SLOT cut, not drawn — dark core, lit far wall at the bottom, and the ends CAPPED so the travel has a physical limit THE SCALE engraved ticks at 0 · ¼ · ½ · ¾ · 1 under the slot. Ticks are what make a track readable without a number, and they are the reason a fader can be a fader instead of a bar with a lump THE TRACE the lit part of the slot, glowing onto the metal around it THE CAP a moulded thumb: chamfered top, a knurled grip, a WAIST where the finger sits, and one bright indicator line on the exact value — the line is the pointer, the cap is just what holds it ─────────────────────────────────────────────────────────────────────────── */ .fader{ display:flex; align-items:center; gap:12px; padding:3px 0; } .fader .flab{ flex:0 0 62px; font-family:var(--font); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:#5d626b; text-shadow:0 1px 0 rgba(255,255,255,.09); } /* The scale sits BELOW the cap's travel, not under it — a 24px cap on a 26px slot covers its own ticks, which is the scale and the pointer fighting for the same 4px. */ .fslot{ flex:1; position:relative; height:30px; display:flex; align-items:center; } .ftrack{ position:absolute; left:0; right:0; top:7px; height:9px; border-radius:5px; cursor:pointer; touch-action:none; background:linear-gradient(180deg,#060708 0%,#0d0f11 55%,#191c20 100%); box-shadow: inset 0 2px 4px rgba(0,0,0,.98), inset 0 -1px 0 rgba(255,255,255,.09), inset 2px 0 3px -2px rgba(0,0,0,.9), inset -2px 0 3px -2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.07); } /* the engraved scale, under the slot */ .fticks{ position:absolute; left:0; right:0; top:25px; height:4px; pointer-events:none; background-image:linear-gradient(90deg, #000 0 1px, transparent 1px); background-size:calc(25% - .25px) 3px; background-repeat:repeat-x; box-shadow:0 1px 0 rgba(255,255,255,.05); opacity:.85; } .fticks::after{ content:''; position:absolute; right:0; top:0; width:1px; height:3px; background:#000; box-shadow:1px 0 0 rgba(255,255,255,.06); } .ffill{ position:absolute; left:2px; top:2px; bottom:2px; border-radius:3px; background:linear-gradient(180deg,#FFC58F,var(--led) 55%,#C24E00); box-shadow:0 0 5px rgba(255,106,0,.7), 0 0 13px rgba(255,106,0,.35), inset 0 1px 0 rgba(255,255,255,.45); } /* THE BAND between two caps is a PIECE, not a fill that starts late. A fine hatch is what says so — the same reason the caps are knurled. */ .ffill.band{ top:1px; bottom:1px; border-radius:4px; background-image: repeating-linear-gradient(74deg, rgba(0,0,0,.26) 0 1px, transparent 1px 3px), linear-gradient(180deg,#FFC58F,var(--led) 55%,#C24E00); box-shadow:0 0 6px rgba(255,106,0,.6), 0 0 14px rgba(255,106,0,.3), inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(0,0,0,.35); } .kval.wide{ min-width:78px; } /* the cap — waisted, knurled, with the indicator line on the value */ .fcap{ position:absolute; top:50%; width:17px; height:24px; margin:-12px 0 0 -8.5px; border-radius:5px; cursor:grab; background: linear-gradient(180deg,#585d66 0%,#3a3e45 16%,#22252a 46%,#1a1c20 54%,#33373d 86%,#4c5158 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.22), inset 1px 0 0 rgba(255,255,255,.10), inset -1px 0 0 rgba(0,0,0,.6), 0 3px 6px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.65); } .fcap:active{ cursor:grabbing; } /* knurl: fine teeth on the two shoulders, none across the waist */ .fcap::before{ content:''; position:absolute; inset:2px 3px; background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 1px, rgba(0,0,0,.30) 1px 2.5px); -webkit-mask:linear-gradient(180deg,#000 0 34%, transparent 36% 64%, #000 66% 100%); mask:linear-gradient(180deg,#000 0 34%, transparent 36% 64%, #000 66% 100%); border-radius:3px; } /* THE INDICATOR — this is the part that carries the value */ .fcap::after{ content:''; position:absolute; left:2px; right:2px; top:50%; height:2px; margin-top:-1px; border-radius:1px; background:var(--led-hot); box-shadow:0 0 5px var(--led), 0 0 10px rgba(255,106,0,.55), 0 1px 0 rgba(0,0,0,.8); } /* ── THE JAW: the range fader's end, and why it is not a cap ────────────── A cap is centred on its value, so two of them merge into one lump as soon as the span drops under a cap's width — see the note in the kit. A jaw puts its MASS on the far side of the piece that carries the value, so the two bodies cannot overlap however close the values get. [▓▓]━┃■■■■■■■■■■■■┃━[▓▓] grip · neck · blade · band · blade · neck · grip NO TRIANGLE. Two of them shipped and both were wrong, the second for the same reason as the first: a tapering shape has its least material exactly where you look at it hardest, so there is nothing there to shade and it reads as a DRAWING of a part. There is no lighting fix for a point. The EQ-200's caps are the reference and they are square, solid blocks — bright top rim, black waist, hard shadow underneath, mass everywhere. So the jaw is built out of that block, which is the one shape this panel already knows how to make. AND EVERY PIECE IS A ROUNDED RECTANGLE, WHICH IS HALF THE WIN. `clip-path` was the whole source of the trouble on the pointed versions: it clips pointer events, so the part was ungrabbable exactly at the tip where the two ends meet; it clips inset shadows, so the diagonals — the only edges that made the shape anything — were the two edges with no light on them; and it is applied AFTER filters, so a drop-shadow standing in for the bevel got trimmed off at the very silhouette it was meant to sit outside. Every one of those went away with the taper. The three pieces below take the cap's own six inset shadows unmodified, because they ARE the cap's shape. THE BOX IS STILL THE HIT TARGET and the three pieces are inert, because a 19px part with a 3px waist in it is not a thing to ask a hand to hit precisely. It is also taller than anything it draws — the jaws sit on opposite sides of their own blades, so growing them cannot make them collide. */ .fend{ position:absolute; top:50%; width:19px; height:28px; margin-top:-14px; cursor:grab; touch-action:none; } .fend:active{ cursor:grabbing; } /* ONE MOULDING FOR ALL THREE PIECES — the cap's gradient and the cap's six shadows, copied and not adapted. Waist dark, both shoulders lit, a white hairline along the top, a black one down the inboard side, and the part sitting on its own shadow. */ .fend > i{ position:absolute; top:50%; pointer-events:none; background:linear-gradient(180deg,#585d66 0%,#3a3e45 16%,#22252a 46%,#1a1c20 54%,#33373d 86%,#4c5158 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.22), inset 1px 0 0 rgba(255,255,255,.10), inset -1px 0 0 rgba(0,0,0,.6), 0 3px 6px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.65); } /* THE GRIP — the square cap, outboard, and the only piece a thumb is invited to. 12 x 20 with the cap's 4px corners: near enough square to read as the button it is borrowed from, short enough that the blade beside it is clearly the taller thing. */ .fend-grip{ width:12px; height:20px; margin-top:-10px; border-radius:4px; } .fend-a .fend-grip{ left:0; } .fend-b .fend-grip{ right:0; } /* the cap's knurl, same 1px/2.5px pitch, teeth on the two shoulders and none across the waist — a grip texture over the thin part is a grip on nothing */ .fend-grip::before{ content:''; position:absolute; inset:2px 3px; background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 1px, rgba(0,0,0,.30) 1px 2.5px); -webkit-mask:linear-gradient(180deg,#000 0 34%, transparent 36% 64%, #000 66% 100%); mask:linear-gradient(180deg,#000 0 34%, transparent 36% 64%, #000 66% 100%); border-radius:3px; } /* AND THE LIT LINE ACROSS ITS WAIST, the cap's own indicator, because a grip that looks like the cap and is missing the one mark the cap wears reads as a cap with its lamp out. On the plain fader that line IS the value; here the BLADE carries the value and this is the mark that says the piece is live — the same part doing the lighter job, which is why it sits on the grip and never on the blade. Orange on the blade would be orange against the orange band, and cutting that band is the blade's whole job. The knurl's mask has already cleared the waist for it, exactly as it does on the cap. */ .fend-grip::after{ content:''; position:absolute; left:2px; right:2px; top:50%; height:2px; margin-top:-1px; border-radius:1px; background:var(--led-hot); box-shadow:0 0 5px var(--led), 0 0 10px rgba(255,106,0,.55), 0 1px 0 rgba(0,0,0,.8); } /* THE BLADE — the vertical bar standing at the value, and the tallest piece because it is the one that means something: its INNER face is where the band stops. It is NOT lit, and that is the whole reason its edge reads — the band it terminates is orange, so a dark blade cuts it clean, where an orange indicator would dissolve into the very thing it is there to bound. The plain cap's lit hairline was marking a value against bare track and had nothing to lose to. This one does. */ .fend-blade{ width:4px; height:24px; margin-top:-12px; border-radius:2px; } /* THE BLADE EASES OUTWARD TO KEEP THE SEAM OPEN when the two ends close on each other — `--nudge`, set from the kit, never more than a pixel and a half and zero for any span with room to be exact. It moves the DRAWN blade only: the jaw's box, which is the hit target, stays where the value put it. */ .fend-a .fend-blade{ right:var(--nudge, 0px); } .fend-b .fend-blade{ left:var(--nudge, 0px); } /* THE NECK — the thin section that carries the load between them, 6 wide and tucked 2px under the grip and 1px under the blade so both seams close. It goes down FIRST in the kit so the two thick pieces paint over its ends: three parts in a row is three parts, but a thin section under two thick ones is one moulding with a waist in it. Its own shadows are lighter than the others' for the same reason a waist is darker than a shoulder — less of it is facing the lamp. */ .fend-neck{ width:6px; height:8px; margin-top:-4px; border-radius:1.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.6); } .fend-a .fend-neck{ left:10px; } .fend-b .fend-neck{ right:10px; } /* THE HELD JAW CATCHES MORE LIGHT, and it is told to from the kit rather than read off `:active` — the TRACK captures the pointer, so the jaw never sees the press. With the two ends a pixel apart this is the only feedback left that says which one you have. */ .fend[data-hold] > i{ filter:brightness(1.22); } /* THE BAND IS A GRIP NOW. It always claimed to be a piece — that is what the hatch is for — and it was the one part of this control you could not pick up, because every pointer event on the line was already spoken for by a cap. Dragging it slides the window with its span held. */ .ffill.band{ cursor:grab; } .ftrack[data-on="band"] .ffill.band{ cursor:grabbing; } /* A CLOSED BAND IS A LEGAL STATE, AND IT IS LIT. The two blades hold a three pixel seam open between them however far the values close, right down to a === b, and what shows in it is the band itself — so a shut span reads as a hairline of light where the two ends have met, rather than as a dark join you have to read the numbers to interpret. The values are not touched by it; only the drawn blades move. AT THAT WIDTH THE BAND IS A GLOW, NOT A PIECE. The hatch says "solid thing you can pick up" and cannot say it in three pixels; the inset black ring would eat two of the three. Both come off and the light is turned up. */ .ffill.band.tight{ background-image:none; background:linear-gradient(180deg,#FFD9B4,var(--led-hot) 55%,#FF7A1A); box-shadow:0 0 7px var(--led), 0 0 17px rgba(255,106,0,.5); } /* THE SCALE MOVES IN BY A WHOLE JAW AT EACH END. A jaw is one-sided, so the value cannot reach the last 19px of groove at either end without walking its grip out of the slot — and a tick engraved where the value cannot go is a tick that lies. */ .fader.range .fticks{ left:19px; right:19px; } /* ── THE CENTRE-DETENT SCALE ────────────────────────────────────────────── A trim fader's zero is a PLACE, so it is marked like one: a full-height tick at the middle where the others are stubs, and the cap notches into it. The quarter marks stay, because the scale still has to say how far. */ .fader.bi .fticks::before{ content:''; position:absolute; left:50%; top:-1px; width:1px; height:5px; margin-left:-.5px; background:#000; box-shadow:1px 0 0 rgba(255,255,255,.07); } /* ── THE SAME FADER, STOOD UP ───────────────────────────────────────────── Everything that was horizontal turns: the slot, the groove's lighting (a vertical cut is lit on one WALL, not on its top edge), the scale, the cap's waist and its knurl, and the indicator line, which has to stay across the travel to point at a value. Column-reverse puts the readout at the top and the legend at the foot, which is where a mixer has always put them: you read the number while your hand is on the cap, and the channel name is under the strip. */ .fader.vert{ flex-direction:column-reverse; align-items:center; gap:7px; } .fader.vert .flab{ flex:0 0 auto; text-align:center; } .fader.vert .fslot{ flex:0 0 auto; width:34px; height:136px; } .fader.vert .ftrack{ left:12px; right:auto; top:0; bottom:0; width:9px; height:auto; background:linear-gradient(90deg,#060708 0%,#0d0f11 55%,#191c20 100%); box-shadow: inset 2px 0 4px rgba(0,0,0,.98), inset -1px 0 0 rgba(255,255,255,.09), inset 0 2px 3px -2px rgba(0,0,0,.9), inset 0 -2px 3px -2px rgba(0,0,0,.9), 1px 0 0 rgba(255,255,255,.07); } .fader.vert .fticks{ left:auto; right:1px; top:0; bottom:0; width:4px; height:auto; background-image:linear-gradient(180deg, #000 0 1px, transparent 1px); background-size:3px calc(25% - .25px); background-repeat:repeat-y; box-shadow:1px 0 0 rgba(255,255,255,.05); } .fader.vert .fticks::after{ right:auto; left:0; bottom:0; top:auto; width:3px; height:1px; } .fader.vert.bi .fticks::before{ left:0; top:50%; width:5px; height:1px; margin:-.5px 0 0; box-shadow:0 1px 0 rgba(255,255,255,.07); } .fader.vert .ffill{ left:2px; right:2px; top:auto; bottom:2px; } .fader.vert .fcap{ top:auto; left:50%; width:24px; height:17px; margin:-8.5px 0 0 -12px; background:linear-gradient(90deg,#585d66 0%,#3a3e45 16%,#22252a 46%,#1a1c20 54%,#33373d 86%,#4c5158 100%); box-shadow: inset 1px 0 0 rgba(255,255,255,.45), inset -1px 0 0 rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.6), 0 3px 6px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.65); } .fader.vert .fcap::before{ inset:3px 2px; background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1px, rgba(0,0,0,.30) 1px 2.5px); -webkit-mask:linear-gradient(90deg,#000 0 34%, transparent 36% 64%, #000 66% 100%); mask:linear-gradient(90deg,#000 0 34%, transparent 36% 64%, #000 66% 100%); } .fader.vert .fcap::after{ left:50%; right:auto; top:2px; bottom:2px; height:auto; width:2px; margin:0 0 0 -1px; } /* a bank: the reason vertical exists at all is that the caps line up into a profile you read across, so the sample has to be more than one */ .fbank{ display:flex; gap:10px; align-items:flex-end; } /* ── the ROTARY SELECTOR: a dropdown with detents ──────────────────────── A