/* ============================================================================ TETHER — "MACHINED" for the WEB. The trademark look, ported from the phone app so the website and the product are visibly the same object. Three sources, and where they disagree the first one wins: 1. Desktop/tetherdesign/app/proto/tether.css .... the material recipes 2. Desktop/tetherdesign/app/MACHINED_SPEC.md .... the locked rules 3. tether/phone/lib/theme_machined.dart ......... the shipped app's values WHAT IS COPIED VERBATIM, and must stay that way: every colour token, the brushed-metal gradient stack, the grain filter, the button bevels, the readout window, the lamp shapes, and the wordmark recipe. Those are not taste — they are the agreed design, and a website that re-eyeballs them is a second design wearing the first one's name. WHAT IS NEW HERE, and why it had to be: a phone screen is 412px wide, fixed, and never scrolls. A web page is 390px to 1440px+ and always scrolls. So this file ADDS a display type scale above the phone's 21px ceiling, a page shell, a nav, a footer, and the panel/chip/field components a marketing page needs and a phone app never had. Each addition is built from the SAME materials — nothing new was invented at the material level. NAMESPACE: every class is `mch-`. The live site has its own stylesheet; this one has to be droppable beside it without a single collision. The custom properties are `--mch-*` for the same reason. ORDER MATTERS: materials are declared before components, because components layer on top of them and several rely on losing a specificity tie. ========================================================================= */ /* --------------------------------------------------------------------------- 0. FONTS — self-hosted, exactly two families. NO CDN, DELIBERATELY. The prototype opens with an @import from fonts.googleapis.com; that is fine for a design file on a laptop and wrong for this product's website. The privacy policy promises no trackers, and a webfont request hands the visitor's IP and user-agent to a third party before a single word is read. Same reasoning, same pattern, as assets/fonts/fonts.css, which is already self-hosted for exactly this. BOTH ARE VARIABLE FONTS — one file per family carrying a continuous weight axis, so 100..900 costs one request instead of five. They are the SAME FILES the phone app ships (phone/assets/fonts/*.ttf, converted to woff2), so the two products can never drift onto two different cuts of Archivo. AXIS RANGES ARE MEASURED, not assumed — read from each file's `fvar` table: Archivo ...... wght 100..900 (default 600), wdth 62..125 (default 100) Martian Mono .. wght 100..800 (default 400), wdth 75..112.5 (default 112.5) THE `font-stretch` DESCRIPTORS ARE LOAD-BEARING, NOT DECORATION. A variable font's `wdth` axis is driven by `font-stretch`, and an element that never sets one computes to `normal` = 100%. For Archivo that IS its default, so nothing moves. For Martian Mono the font's own default is 112.5% — so leaving it alone would silently render the web's mono NARROWER than the phone's, on every engraved label in the product. `.mch-mono` pins it back to 112.5%. See section 3. LICENCE: both faces are SIL OFL 1.1 and the licence travels with them in fonts/OFL.txt, which carries BOTH copyright lines (Archivo Project Authors; Martian Mono Project Authors) as the OFL requires. Adding a third face means adding its copyright line to that file in the same edit. ------------------------------------------------------------------------ */ @font-face{ font-family:'Archivo'; src:url('fonts/archivo-var.woff2') format('woff2-variations'), url('fonts/archivo-var.woff2') format('woff2'); font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap; } @font-face{ font-family:'Martian Mono'; src:url('fonts/martian-mono-var.woff2') format('woff2-variations'), url('fonts/martian-mono-var.woff2') format('woff2'); font-weight:100 800; font-stretch:75% 112.5%; font-style:normal; font-display:swap; } /* --------------------------------------------------------------------------- 1. TOKENS — every colour has a ROLE. Nothing here is arbitrary. Values are the prototype's, verbatim. Do not "tidy" one into a near-neighbour. ------------------------------------------------------------------------ */ :root{ /* ── METAL SURFACES — the body of the instrument ─────────────────────── */ --mch-void:#0f1012; /* behind everything; the unlit shell */ --mch-metal-1:#3b3f47; --mch-metal-2:#34383f; --mch-metal-3:#2d3138; --mch-metal-4:#282c33; --mch-deck-1:#40454d; /* the raised control deck */ --mch-deck-2:#363a42; --mch-deck-3:#2e323a; --mch-body-1:#43464c; /* phone-body metal, for device chrome */ --mch-body-2:#232529; --mch-body-3:#16171a; --mch-ground:#26292f; /* faceplate ground — the page background */ --mch-stage-1:#35383e; /* the stage a picture or hero element sits on */ --mch-stage-2:#24262b; --mch-stage-3:#17181c; --mch-stage-4:#101114; /* ── MACHINED EDGES — a milled edge catches light on top, shade under ── */ --mch-edge:#c7cbd0; --mch-etch:#e7ebef; --mch-edge-hi:rgba(233,238,242,.34); /* the crisp top-edge highlight */ --mch-edge-soft:rgba(199,203,208,.22); /* hairlines, rules, faint chamfers */ --mch-shade:rgba(0,0,0,.42); /* the shadow under any raised lip */ /* ── TEXT — one cool near-white, hierarchy by OPACITY only ──────────── Never introduce a new hue for text. These four alphas are MEASURED against a 4.5:1 floor on the surfaces they actually sit on; the prototype raised --t3 from .46 after a review found facts printed at 3.9:1. --t1/--t2/--t3 are the three inks a FACT may use. --t4 is for dead controls only and is deliberately below the floor: a control that is off is allowed to look off, and it may never carry a fact. */ --mch-t1:rgba(238,242,245,.92); --mch-t2:rgba(231,235,239,.80); --mch-t3:rgba(231,235,239,.72); --mch-t4:rgba(231,235,239,.30); /* The pilot lamp's WORD has its own ink, and this is why it is not --t2. It is the second carrier of a state otherwise told in colour, so a colour-blind reader has nothing else. Measured at .78 on the three metals a lamp sits on: 10.5:1 / 8.2:1 / 6.5:1. The floor case is the brightest surface and still clears 4.5:1 with 45% to spare. */ --mch-lamp-word:rgba(238,242,245,.78); /* ── THE ONE GREEN, AND THE CLOSED LIST OF PLACES IT MAY APPEAR ──────── Green means ONE thing: a real, current, end-to-end link, right now. Not focus. Not hover. Not selection. Not readiness. Not progress. Not "this section is about connecting". Amber is the warning colour and is the only other hue in the system. THE LIST IS CLOSED. On the web it is four: .mch-lamp.is-live ........ the pilot lamp when a link is up .mch-channel--live ....... a readout window reporting a live line .mch-channel--live .mch-slot, .mch-slot--live .......... the characters inside that window .mch-dot ................. the pilot pip beside a live label Adding a fifth is a change to THIS list, made in THIS comment, in the same edit. That is enforceable because every one of them is an OPT-IN class setting custom properties on a material that is hueless by default: there is no green in any base component, so a page cannot inherit green by accident — it has to type one of those names, and typing one is a claim that the link is up. Audit it in one command, from this directory: grep -nE "green|57a07c|8fd6a8|2c5642|120,220,170|150,220,185|133,214,170|214,238,226" machined.css Every hit must be a token declaration in this block, one of the rules above, or prose explaining this law. Anything else is the defect. */ --mch-green:#57a07c; --mch-green-bright:#8fd6a8; /* glow highlight only, never neon */ --mch-green-deep:#2c5642; /* Backlit readout — the lit characters inside a dark-glass window. */ --mch-readout:#eaf1f4; --mch-readout-dim:#8b968f; /* Transient fault ONLY (a warning that will clear). Never decoration. */ --mch-amber:#c69a55; /* Destructive LABEL only, never a fill — keeps "one accent" intact. */ --mch-red:#c1705c; /* ── TYPE — exactly two families. Nothing else may be introduced. ────── */ --mch-f-ui:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mch-f-mono:'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* TYPE SCALE. The four sizes at the bottom are the phone's, verbatim, because they are read at the same distance on any device and the product has a 14px floor that is written down as never-below. The three at the top are NEW and are the honest part of this port: the phone's largest heading is 21px, which is a caption on a 1440px page. A website needs display type, so it gets its own steps — built on the same clamp() idiom so a 390px phone and a 1440px desktop are one continuous scale rather than two designs joined by a breakpoint. */ --mch-fs-display:clamp(38px, 6.4vw, 76px); /* the one hero line per page */ --mch-fs-h1:clamp(27px, 3.6vw, 44px); /* section heading */ --mch-fs-h2:clamp(19px, 1.7vw, 24px); /* sub-section title */ --mch-fs-h3:17px; /* card title */ --mch-fs-lead:clamp(16px, 1.25vw, 19px); /* the sentence under a heading */ --mch-fs-body:15px; /* body — never below 14px */ --mch-fs-sub:14px; /* supporting line */ /* THE READING SIZE, AND IT IS NOT --mch-fs-body. A UI label is SCANNED: the eye lands on it, takes one word, and leaves, so 15px is generous. A terms page is READ, line after line, for two thousand words, and at that length 15/1.55 is measurably harder work — the line is too tight and the letters too small to fall into. The legal pages already ran at 17/1.72 before this port, so taking them to the UI body size would have been a legibility REGRESSION shipped under the word "restyle". Used only by .mch-prose. */ --mch-fs-prose:17px; --mch-lh-prose:1.7; --mch-fs-btn:clamp(14px, 1.05vw, 15px); /* button label, tracked caps */ --mch-fs-readout:clamp(21px, 2.6vw, 34px); /* lit characters */ --mch-fs-micro:11.5px; /* engraved micro-label */ --mch-fs-nano:11px; /* pilot-lamp label — A FLOOR, NOT A SIZE. It is the only reading of machine state a colour-blind visitor gets, so it never scales down. */ --mch-wordmark:clamp(20px, 1.7vw, 26px); /* scaled per use; recipe LOCKED */ /* ── SPACING — a 4px rhythm, so nothing is eyeballed ─────────────────── */ --mch-s1:4px; --mch-s2:8px; --mch-s3:12px; --mch-s4:16px; --mch-s5:20px; --mch-s6:24px; --mch-s7:32px; --mch-s8:40px; --mch-s9:48px; --mch-s10:64px; /* Two web-only steps. A page has section rhythm; a phone screen does not. */ --mch-s11:96px; --mch-s12:128px; /* Page gutter and content measure. The phone's 6.8vw gutter is right for a 412px screen and absurd at 1440 (98px of air before a word), so the web gutter is a clamp with a real ceiling and the CONTENT gets a max-width. */ --mch-gutter:clamp(20px, 4vw, 48px); --mch-measure:1200px; /* the widest a content column ever runs */ --mch-measure-narrow:760px; /* prose: a readable line, never 1200px of it */ /* ── RADII — milled corners, consistent across every surface ─────────── */ --mch-r1:6px; --mch-r2:10px; --mch-r3:14px; --mch-r4:18px; --mch-r-deck:26px; --mch-r-pill:999px; /* ── MOTION — the design's timings ──────────────────────────────────── */ --mch-spring:cubic-bezier(.16,.84,.3,1); /* fast start, settles, no overshoot */ --mch-press:.09s; /* 2px of travel under a thumb */ --mch-ink:.16s; /* a label's colour crossfade */ /* ── SURFACE TUNING — the two knobs the web needs and the phone did not ─ A phone surface is 412px wide. A web panel can be 1200. These expose the brush and the grain so a very large surface can hold the same APPARENT texture density as a small one; see the wide-viewport block in section 9, which is the only place they are retuned. */ --mch-brush-alpha:.014; /* the fine vertical streak's hairline */ --mch-brush-period:11px; /* its repeat */ --mch-grain-opacity:.42; /* Minimum physical target. A control you can SEE at 40px and can only HIT at 48px is a lie told to the eye — so the metal IS the target. */ --mch-tap:48px; } /* --------------------------------------------------------------------------- 2. BASE — a web page, not an app shell. DELIBERATELY MUCH LIGHTER THAN THE PROTOTYPE'S RESET. The phone file sets `user-select:none`, `overscroll-behavior:none` and `position:fixed` on the screen, because it is an app and text selection there is an accident. On a website, killing selection breaks copy-paste of a licence key, a price or an address, and killing overscroll breaks the scroll the whole page depends on. Porting that reset verbatim would have been the easy move and a real defect. ------------------------------------------------------------------------ */ .mch{ background-color:var(--mch-ground); color:var(--mch-t1); font-family:var(--mch-f-ui); font-size:var(--mch-fs-body); line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; -webkit-tap-highlight-color:transparent; } .mch *,.mch *::before,.mch *::after{box-sizing:border-box} .mch h1,.mch h2,.mch h3,.mch h4,.mch p,.mch figure,.mch blockquote{margin:0} .mch ul,.mch ol{margin:0;padding:0;list-style:none} .mch img,.mch svg{display:block;max-width:100%} .mch button,.mch input,.mch textarea,.mch select{font:inherit;color:inherit} .mch button{background:none;border:0;cursor:pointer} /* THE ANCHOR RESET IS WRAPPED IN :where() SO IT CANNOT OUTRANK A COMPONENT. Written as `.mch a` it scores (0,1,1) — one class plus one type — while every link component in this file is a single class at (0,1,0). The reset therefore beat all of them, silently. Read back off a rendered page with getComputedStyle, before this change: .mch-nav__link ..... designed --t2 (.62) .... rendered --t1 (.92) .mch-footer__link .. designed --t2 (.62) .... rendered --t1 (.92) Both were pinned at full ink, so their `:hover{color:var(--mch-t1)}` rules could not brighten anything and were dead code on every page — the nav and the footer had no hover feedback at all. The same trap caught .mch-link, which is documented at length in section 7B. :where() has zero specificity, so this becomes (0,0,1): a bare type selector. It still only touches anchors inside .mch, and it still beats the browser's blue-and-underlined default, because an author rule outranks the UA sheet whatever its specificity. What changes is that a component no longer has to know this line exists in order to style a link. Fixed here once rather than per component, so the next link component added does not ship broken. */ :where(.mch) a{color:inherit;text-decoration:none} /* FOCUS RING — a milled double-ring, deliberately HUELESS. It is an `outline`, and that is load-bearing: components in this file set box-shadow for their material, and a focus ring drawn as box-shadow loses the specificity fight and never paints. The prototype shipped exactly that bug once — an invisible focus ring on dark metal, a WCAG 2.4.11 failure, under a comment claiming it was unmistakable. Green is not used here either: green means a live link, not "where is my keyboard". */ .mch :focus-visible{ outline:2px solid rgba(216,222,228,.88); outline-offset:3px; border-radius:4px; } .mch ::selection{background:rgba(199,203,208,.26)} /* Skip link — invisible until tabbed to, then a real milled plate. IT IS CLIPPED, NOT PARKED AT left:-9999px. The old trick puts a real 189px box in the layout at a huge negative offset, which some engines count toward the scrollable area; measured here it was one of five elements reported outside the viewport at 390px. Clipping to a 1px box removes it from the layout's extents entirely while keeping it focusable and readable by a screen reader, which -9999px was only ever an approximation of. */ .mch-skip{ position:absolute;top:0;left:0;z-index:100; width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; padding:var(--mch-s3) var(--mch-s5);border-radius:0 0 var(--mch-r2) 0; background-image:linear-gradient(180deg,#44484f,#303339); box-shadow:inset 0 1.5px 0 var(--mch-edge-hi),0 4px 12px -4px rgba(0,0,0,.6); font-family:var(--mch-f-mono);font-stretch:112.5%;font-size:var(--mch-fs-micro); letter-spacing:1.9px;text-transform:uppercase;color:var(--mch-t1); } .mch-skip:focus{width:auto;height:auto;overflow:visible;clip-path:none} /* --------------------------------------------------------------------------- 3. TYPE — the two faces, and the locked wordmark. ------------------------------------------------------------------------ */ /* GRAYSCALE ANTIALIASING FOR DISPLAY-SIZED TYPE — a Windows correction. THE PROBLEM. `-webkit-font-smoothing:antialiased` is a macOS-only property. Chrome on Windows renders through DirectWrite and ignores it, so that line does nothing at all for most of this product's visitors — Tether is a Windows PC app, so the platform where it has no effect is the platform nearly everyone reads this page on. Screenshotted at device scale, every letter of the 42px wordmark carried a cyan left edge and an orange right edge: LCD subpixel antialiasing, which on a large heavy weight over brushed metal reads as a printing misregistration — on the one element the owner has LOCKED. THE FIX IS `opacity`, AND THE OBVIOUS CANDIDATE DOES NOT WORK HERE. The usual remedy is `transform:translateZ(0)`, which promotes the text to its own layer and forces grayscale. It was tried first and it FAILED silently, because `transform` does not apply to non-replaced INLINE elements and every one of these classes is used on a `` somewhere. The first test looked like it passed only because the specimens were flex children, and a flex child is blockified — so the test was measuring a situation the product does not have. Re-run with genuine inline spans in normal flow and compared at device scale: inline + translateZ still fringed, plain inline (the control) fringed, `inline-block` + translateZ was clean, and `opacity:.999` was clean. `opacity` is chosen over forcing `display:inline-block` because it works whatever the element's display is and changes no layout. A 0.1% alpha step is below one 8-bit quantisation level, so nothing dims. Note that computed style CANNOT be used to check this: Chrome reports `translateZ(0)` as the 2D identity `matrix(1,0,0,1,0,0)` whether it applied or not. Judge it by rendering, never by `getComputedStyle`. IT IS DELIBERATELY NOT APPLIED PAGE-WIDE. Subpixel antialiasing HELPS at reading sizes; stripping it from 14-15px body copy would trade a real legibility gain for a fringe nobody can see at that size. It belongs only on type big enough for the fringe to be visible. */ .mch-wordmark,.mch-display,.mch-h1,.mch-h2,.mch-price__num,.mch-slot{ opacity:.999; } /* THE WORDMARK — LOCKED by the spec and by the owner (2026-07-25). Near-black letters pressed INTO the metal: light catches the lower lip of the groove, shadow sits on the upper. Scale it with --mch-wordmark; never restyle the family, weight, tracking, colour or engrave. It asks for the family through --mch-f-ui rather than naming 'Archivo' directly, so the product's NAME is the one element that still has a fallback on the day the webfont fails to load. */ .mch-wordmark{ font-family:var(--mch-f-ui);font-weight:800; font-size:var(--mch-wordmark);letter-spacing:7px;text-transform:uppercase; color:#1a1c20;line-height:1; text-shadow:0 1.5px 0 rgba(255,255,255,.16), 0 -1px 1px rgba(0,0,0,.4); } /* Trailing letter-spacing shifts a centred wordmark right by one 7px step. Cancel it on the LEFT — padding the right doubles the error. */ .mch-wordmark--center{margin-right:-7px} /* A wordmark on DARK stage metal cannot be near-black — engraving needs a surface bright enough to cut into. On the stage the letters are the light and the groove is the shadow: the same physical idea, inverted. */ .mch-wordmark--light{ color:rgba(238,242,245,.94); text-shadow:0 1px 0 rgba(0,0,0,.55), 0 -1px 0 rgba(255,255,255,.10); } /* THE DISPLAY LINE — one per page. Archivo 700, tight, slightly negative tracking because at 76px the phone's +0.2 reads as a gap. */ .mch-display{ font-family:var(--mch-f-ui);font-weight:700; font-size:var(--mch-fs-display);line-height:1.02;letter-spacing:-.02em; color:var(--mch-t1); text-wrap:balance; } .mch-h1{ font-family:var(--mch-f-ui);font-weight:600; font-size:var(--mch-fs-h1);line-height:1.12;letter-spacing:-.01em; color:var(--mch-t1);text-wrap:balance; } .mch-h2{ font-family:var(--mch-f-ui);font-weight:600; font-size:var(--mch-fs-h2);line-height:1.25;letter-spacing:.2px; color:var(--mch-t1); } .mch-h3{ font-family:var(--mch-f-ui);font-weight:600; font-size:var(--mch-fs-h3);line-height:1.3;color:var(--mch-t1); } /* The sentence under a heading. Wider line-height than body: it is the one paragraph a visitor actually reads before deciding. */ .mch-lead{ font-family:var(--mch-f-ui);font-weight:400; font-size:var(--mch-fs-lead);line-height:1.55;color:var(--mch-t2); max-width:var(--mch-measure-narrow);text-wrap:pretty; } .mch-body{font-size:var(--mch-fs-body);line-height:1.55;color:var(--mch-t2)} .mch-sub{font-size:var(--mch-fs-sub);line-height:1.45;color:var(--mch-t3)} /* THE MONO FACE. font-stretch is pinned to the font's own default width (112.5%) — see the note in section 0. Without it every engraved label on the website renders narrower than the same label in the app. */ .mch-mono{font-family:var(--mch-f-mono);font-stretch:112.5%} /* ENGRAVED MICRO-LABEL — stamped into the faceplate; names a thing without ever competing with it. Tracked caps, mono, with a 1px dark drop that reads as the groove's shadow. */ .mch-micro{ font-family:var(--mch-f-mono);font-stretch:112.5%;font-weight:400; font-size:var(--mch-fs-micro);letter-spacing:1.9px;text-transform:uppercase; color:var(--mch-t2);text-shadow:0 1px 0 rgba(0,0,0,.35); } .mch-micro--dim{color:var(--mch-t3)} /* The model line under a wordmark. Same engraving, wider tracking. */ .mch-submark{ font-family:var(--mch-f-mono);font-stretch:112.5%;font-weight:400; font-size:var(--mch-fs-micro);letter-spacing:2.2px;text-transform:uppercase; color:var(--mch-t2);text-shadow:0 1px 0 rgba(0,0,0,.35); } /* MICRO-SIZED PROSE, IN THE UI FACE — the small print that is a SENTENCE rather than a stamped label. A LABEL is engraved; a SENTENCE is set. The app learned this the expensive way: a two-line caution rendered in the mono face became a nine-line wall of typewriter text. No tracking either — tracking is what makes an engraved label read as engraved, and what makes a sentence read as a ransom note. */ .mch-fine{ font-family:var(--mch-f-ui);font-weight:400; font-size:var(--mch-fs-micro);line-height:1.45;letter-spacing:0; color:var(--mch-t3); } /* ENGRAVED HAIRLINE — a groove with a lit lower lip, not a grey 1px line. */ .mch-rule{ height:1px;width:100%;flex:1 1 auto;min-width:0;border:0; background:linear-gradient(90deg, transparent, rgba(0,0,0,.45) 12%, rgba(0,0,0,.45) 88%, transparent); box-shadow:0 1px 0 rgba(233,238,242,.06); } /* A SPEC RAIL — micro-label, groove, micro-label. The pattern that carries a fact across a surface without spending a headline on it. */ /* IT WRAPS, AND THAT IS NOT A MEDIA QUERY. Measured at a 375px viewport: the rail had 302.8px and its two labels alone needed 326.3px, with the groove already collapsed to 0 — so there was no slack left to find. The three ways out were shrink the type (§9 forbids it at the small end, on purpose), truncate a label (a clipped label is a different label — the same argument §9 makes about digits), or let the second label drop to its own line. Only the third keeps both labels whole. Keyed to the CONTAINER, not the viewport, because a rail inside a narrow plate or a two-column grid runs out of room at 1440px just as easily as at 390px; a max-width media query would fix the phone and leave that broken. The groove is flex:1 1 auto with min-width:0, so it takes the slack on line one and the label below sits clear of it. */ .mch-rail{display:flex;align-items:center;flex-wrap:wrap;gap:var(--mch-s2) var(--mch-s3);width:100%} .mch-rail > .mch-micro{flex:none;white-space:nowrap} /* THE GROOVE'S BASIS MUST BE 0 INSIDE A RAIL, AND ENABLING THE WRAP ABOVE IS WHAT MADE THAT MANDATORY. .mch-rule is `width:100%; flex:1 1 auto` so it can also be used alone as a plain divider — but `auto` basis resolves to that 100%, and the moment the rail was allowed to wrap the groove began demanding a full line of its own and pushing the trailing label onto a THIRD line. Measured right after the wrap went in: the rail stood 52px tall at 1440px and at 390px, where one line is ~18px. Basis 0 makes the groove take only the slack that is left, so it stays on line one and the label below it wraps only when the labels genuinely cannot share a line. min-width keeps it reading as a groove rather than vanishing to nothing. */ .mch-rail > .mch-rule{flex:1 1 0;width:auto;min-width:24px} /* --------------------------------------------------------------------------- 4. MATERIALS — the physical language. THE PART THAT MAKES IT MACHINED. Every recipe below is the prototype's, layer for layer. On the phone some of these cost real frames; on the web they are a few gradients and one inline SVG, so nothing had to be dropped. Where the app had to APPROXIMATE (Flutter has no inset shadow, so its lit lips are gradient stops), the web uses the real inset shadow the design was drawn with — the web is the medium these recipes were authored in. ------------------------------------------------------------------------ */ /* BRUSHED ANODISED ALUMINIUM — the body of the instrument. Six layers, and every one is doing a job: 1. form vignette ...... light gathers where the surface faces you 2. floor shade ........ the surface turns away at the bottom 3. crown light ........ and catches at the top 4. studio sheen ....... a diagonal band of light landing across it 5. brush streak ....... the fine vertical grain of the machining 6. metal gradient ..... the load-bearing colour Then five inset shadows put a milled edge on it: a crisp lit top lip, a soft bloom under it, a light left chamfer, a dark right one, and shade at the floor. Delete any of the six and it reads as a grey rectangle. */ .mch-metal{ position:relative; background-color:var(--mch-metal-3); background-image: radial-gradient(150% 108% at 50% 42%, transparent 52%, rgba(0,0,0,.30) 100%), radial-gradient(120% 44% at 50% 110%, rgba(0,0,0,.40), rgba(0,0,0,0) 58%), radial-gradient(135% 56% at 50% -8%, rgba(255,255,255,.16), rgba(255,255,255,0) 48%), linear-gradient(122deg, transparent 4%, rgba(255,255,255,.03) 30%, rgba(255,255,255,.075) 50%, rgba(255,255,255,.03) 70%, transparent 96%), repeating-linear-gradient(90deg, transparent 0 calc(var(--mch-brush-period) - 7px), rgba(255,255,255,var(--mch-brush-alpha)) calc(var(--mch-brush-period) - 7px) calc(var(--mch-brush-period) - 6px), transparent calc(var(--mch-brush-period) - 6px) var(--mch-brush-period)), linear-gradient(180deg, var(--mch-metal-1) 0%, var(--mch-metal-2) 26%, var(--mch-metal-3) 58%, var(--mch-metal-4) 100%); box-shadow: inset 0 1.5px 0 var(--mch-edge-hi), inset 0 3px 1px -2px rgba(255,255,255,.10), inset 2px 0 0 rgba(199,203,208,.06), inset -2px 0 0 rgba(0,0,0,.30), inset 0 -4px 8px rgba(0,0,0,.42); } /* THE BRUSH ITSELF: anisotropic noise — wide in x, fine in y — in soft-light. Without this the metal reads as flat grey. The host must be positioned. THE FILTER REGION IS PINNED, AND THAT IS LOAD-BEARING. Do not remove x='0' y='0' width='100%25' height='100%25' from the tag. stitchTiles='stitch' makes feTurbulence wrap seamlessly across the FILTER REGION; CSS then wraps the IMAGE. With no region declared, SVG defaults it to -10%/-10%/120%/120% of the rect — so the noise stitches on one period while background-size repeats it on another, and a hard brightness step runs the full height of the surface. The prototype measured that seam at 5.6% of full scale before pinning it. A bigger mismatched region seams just as hard, only at a different pitch. THE feColorMatrix IS A WEB-ONLY CORRECTION, AND IT IS MEASURED. feTurbulence generates its R, G and B channels INDEPENDENTLY, so the raw filter output is COLOURED noise, not grey noise. Rasterised and sampled at the tile's native 240x460: mean chroma 36.1 of 255, peak 146, and 75.1% of pixels above a chroma of 20. On a 412px phone under soft-light that is invisible; across a 1200px plate on a monitor it is visible RGB speckle on a surface that is supposed to be neutral anodised aluminium. `saturate 0` takes chroma to exactly 0 while leaving the brush itself alone — re-measured after: mean luminance 186.0 -> 186.7, luminance range 114.8 -> 107.0. Same texture, no confetti. It is applied AFTER the turbulence and changes no frequency, so the stitch period is untouched and no seam can be introduced by it. */ .mch-grain{position:relative} .mch-grain::after{ content:"";position:absolute;inset:0;pointer-events:none; opacity:var(--mch-grain-opacity);mix-blend-mode:soft-light;border-radius:inherit; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='460'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:240px 460px; } /* THE STAGE — the dark ground a picture, a screenshot or a hero element sits on. Darker than the faceplate so the thing on it is the brightest object. IT IS STILL METAL, AND THE FIRST CUT OF THIS RULE FORGOT THAT. Rendered beside .mch-metal it read as a flat near-black box: it had the four stage stops and nothing else — no brush, no sheen, no side chamfers — so at 1440px the vertical gradient alone spread over 700px and became an invisible wash. Dark is the point; FLAT is the defect. It now carries the same brush streak and the same diagonal sheen as every other surface, at lower amplitude because a dark surface shows a highlight more readily than a light one, and the floor is lifted off pure black so there is something for the light to land on. */ .mch-stage{ position:relative; background-image: radial-gradient(120% 86% at 50% -6%, rgba(255,255,255,.075), transparent 58%), radial-gradient(150% 110% at 50% 46%, transparent 46%, rgba(0,0,0,.40) 100%), linear-gradient(122deg, transparent 6%, rgba(255,255,255,.016) 32%, rgba(255,255,255,.042) 50%, rgba(255,255,255,.016) 68%, transparent 94%), repeating-linear-gradient(90deg, transparent 0 calc(var(--mch-brush-period) - 7px), rgba(255,255,255,calc(var(--mch-brush-alpha) * 1.6)) calc(var(--mch-brush-period) - 7px) calc(var(--mch-brush-period) - 6px), transparent calc(var(--mch-brush-period) - 6px) var(--mch-brush-period)), linear-gradient(180deg, var(--mch-stage-1) 0%, var(--mch-stage-2) 34%, var(--mch-stage-3) 74%, #14161a 100%); box-shadow: inset 0 1.5px 0 rgba(233,238,242,.16), inset 2px 0 0 rgba(199,203,208,.045), inset -2px 0 0 rgba(0,0,0,.34), inset 0 -1px 0 rgba(0,0,0,.5); } /* RAISED BOLTED DECK — where the controls live, lifted off the faceplate so the eye reads "this is the part I touch". Bolt it with .mch-screw, tab it with .mch-seam-tab. Round at the top, square where it meets the edge. */ .mch-deck{ position:relative;z-index:2; padding:var(--mch-s7) var(--mch-gutter) var(--mch-s5); border-radius:var(--mch-r-deck) var(--mch-r-deck) 0 0; background-image:linear-gradient(180deg, var(--mch-deck-1) 0%, var(--mch-deck-2) 42%, var(--mch-deck-3) 100%); box-shadow: inset 0 2px 0 rgba(199,203,208,.42), inset 0 -1px 0 rgba(0,0,0,.5), 0 -16px 26px -14px rgba(0,0,0,.6); } /* A PLATE — the web's workhorse surface, and the one component here with no phone ancestor. A marketing page is made of cards; the app had none, because an app screen IS the card. So a plate is milled from the same metal as everything else: a lifted panel with a lit top lip and a real cast shadow, one step brighter than the faceplate it sits on. Bolt it if it is a control surface; leave it plain if it is only holding words. */ .mch-plate{ position:relative; padding:var(--mch-s7); border-radius:var(--mch-r4); background-image: radial-gradient(130% 90% at 50% -10%, rgba(255,255,255,.055), transparent 62%), linear-gradient(122deg, transparent 6%, rgba(255,255,255,.022) 34%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.022) 68%, transparent 94%), repeating-linear-gradient(90deg, transparent 0 calc(var(--mch-brush-period) - 7px), rgba(255,255,255,var(--mch-brush-alpha)) calc(var(--mch-brush-period) - 7px) calc(var(--mch-brush-period) - 6px), transparent calc(var(--mch-brush-period) - 6px) var(--mch-brush-period)), linear-gradient(180deg, #3a3e46 0%, #32363d 46%, #2b2f36 100%); box-shadow: inset 0 1.5px 0 rgba(206,211,216,.26), inset 0 -2px 4px rgba(0,0,0,.34), inset 1px 0 0 rgba(199,203,208,.05), inset -1px 0 0 rgba(0,0,0,.24), 0 10px 26px -14px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.35); } /* A plate that is a LINK gets travel, like every other control on this metal. 1px, not 2 — it is a surface being nudged, not a button being pressed. */ .mch-plate--link{transition:transform var(--mch-press) ease, box-shadow var(--mch-press) ease} .mch-plate--link:hover{ box-shadow: inset 0 1.5px 0 rgba(206,211,216,.36), inset 0 -2px 4px rgba(0,0,0,.34), inset 1px 0 0 rgba(199,203,208,.05), inset -1px 0 0 rgba(0,0,0,.24), 0 14px 30px -14px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.35); } .mch-plate--link:active{ transform:translateY(1px); box-shadow: inset 0 1px 0 rgba(199,203,208,.18), inset 0 2px 5px rgba(0,0,0,.4), 0 4px 12px -8px rgba(0,0,0,.6); } /* A RECESSED plate — for a thing that sits BELOW the surface: a quote, a note, a code block, a de-emphasised aside. The inverse lighting of .mch-plate. */ .mch-plate--sunk{ background-image:linear-gradient(180deg,#24272c 0%, #1e2126 100%); box-shadow: inset 0 3px 8px rgba(0,0,0,.5), inset 0 -1px 0 rgba(233,238,242,.06), 0 1px 0 rgba(233,238,242,.04); } /* HEX SOCKET SCREW — the detail that says "machined", not "drawn". Position is the HOST's business: retune with --mch-screw-inset-x/y rather than re-solving the geometry. The app shipped a bolt through a pilot lamp once because these insets were hard-coded. */ .mch-screw{ position:absolute;width:15px;height:15px;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 38% 32%, #4a4f57, #212328 72%); box-shadow:inset 0 1px 1px rgba(255,255,255,.28), inset 0 -1px 1px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.4); } .mch-screw::after{ content:"";position:absolute;inset:3.5px; clip-path:polygon(50% 1%, 94% 26%, 94% 74%, 50% 99%, 6% 74%, 6% 26%); background:linear-gradient(155deg, #17191c, #3a3e45 54%, #191b1e); box-shadow:inset 0 0 2px rgba(0,0,0,.8); } .mch-screw--tl{top:var(--mch-screw-inset-y,13px);left:var(--mch-screw-inset-x,14px)} .mch-screw--tr{top:var(--mch-screw-inset-y,13px);right:var(--mch-screw-inset-x,14px)} .mch-screw--bl{bottom:var(--mch-screw-inset-y,13px);left:var(--mch-screw-inset-x,14px)} .mch-screw--br{bottom:var(--mch-screw-inset-y,13px);right:var(--mch-screw-inset-x,14px)} /* SEAM TAB — a small stamped plate straddling an edge; carries a label without spending a whole row on it. */ .mch-seam-tab{ position:absolute;top:-13px;left:50%;transform:translateX(-50%); padding:5px 16px;border-radius:var(--mch-r-pill);white-space:nowrap; background:linear-gradient(180deg,#3f444c,#33373e); box-shadow:inset 0 1px 0 rgba(199,203,208,.28), inset 0 -1px 1px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4); font-family:var(--mch-f-mono);font-stretch:112.5%; font-size:var(--mch-fs-micro);letter-spacing:1.9px; /* --t1, NOT --t2, AND THE DIFFERENCE WAS MEASURED RATHER THAN JUDGED. This tab is the one label in the system that sits on its OWN metal, and that metal is the brightest surface here (#3f444c→#33373e) — brighter than the faceplate every other micro-label sits on. Sampled off a rendered page, inside the tab's left padding where no glyph falls: painted tab metal ... rgb(60,65,72) --t2 (.62) .......... 4.41:1 FAILS 4.5 at 11.5px --t1 (.92) .......... 8.04:1 The tab is also NAMING the panel it straddles, which is a job for full ink. A quieter label belongs on the faceplate, where t2 clears the floor with room to spare. */ text-transform:uppercase;color:var(--mch-t1); } /* KNURLED GRIP — the milled cross-hatch on a thing meant to be gripped. Two opposed hairline gratings; the detail vocabulary the spec asks for. */ .mch-knurl{ background-image: repeating-linear-gradient(62deg, rgba(255,255,255,.055) 0 1px, transparent 1px 4px), repeating-linear-gradient(-62deg, rgba(0,0,0,.30) 0 1px, transparent 1px 4px); } /* RECESSED DARK-GLASS WINDOW — the ONLY place characters are backlit. Inner vignette makes lit glyphs pop; a bleed of light comes from under the glass; a sheen lands on the cover, not on the digits; scanlines make it read as a real lit panel rather than a dark box. THE BLEED IS HUELESS BY DEFAULT, AND THAT IS THE LAW. It used to be green in every state on every screen, connected or not — signalling nothing at all while spending the one colour reserved for a real link. A text field existing is not a connection. Green returns only behind .mch-channel--live, which sets two custom properties and never restates the material. */ .mch-channel{ --mch-channel-bleed:rgba(199,203,208,.13); --mch-channel-lip:rgba(199,203,208,.12); position:relative;overflow:hidden; min-height:clamp(62px, 8vw, 88px); display:flex;align-items:center;justify-content:center;gap:6px; padding:0 var(--mch-s4);border-radius:var(--mch-r3); background-image: radial-gradient(135% 150% at 50% 50%, transparent 52%, rgba(0,0,0,.5) 100%), radial-gradient(90% 130% at 50% 128%, var(--mch-channel-bleed), transparent 60%), linear-gradient(180deg, #090b0e 0%, #0d1114 52%, #0a0d10 100%); box-shadow: inset 0 5px 12px rgba(0,0,0,.85), inset 0 2px 2px rgba(0,0,0,.9), inset 0 -1.5px 1px var(--mch-channel-lip), 0 1px 0 rgba(199,203,208,.16); } /* THE OPT-IN. Sets only custom properties, so it never competes on specificity with the material above. Values are the spine's former defaults, verbatim. */ .mch-channel--live{ --mch-channel-bleed:rgba(87,160,124,.20); --mch-channel-lip:rgba(150,205,178,.14); } .mch-channel::before{ /* glass sheen — light on the cover, not the digits */ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 16%); } .mch-channel::after{ /* fine display scanlines */ content:"";position:absolute;inset:0;pointer-events:none;opacity:.35; background:repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px); } /* A LIT CHARACTER. Its halo follows the same rule as the window it sits in: hueless until the line is live. */ .mch-slot{ --mch-slot-bloom:rgba(226,236,242,.30); --mch-slot-halo:rgba(226,234,240,.55); position:relative;z-index:2; min-width:calc(var(--mch-fs-readout) * 1.06);text-align:center; font-family:var(--mch-f-mono);font-stretch:112.5%;font-weight:500; font-size:var(--mch-fs-readout);line-height:1; color:var(--mch-readout); text-shadow:0 0 12px var(--mch-slot-bloom), 0 0 3px var(--mch-slot-halo), 0 1px 1px rgba(0,0,0,.45); } /* An EMPTY slot never opts in, under any parent: a placeholder mark cannot be reporting a live line, so its halo is hueless in both modes by construction. */ .mch-slot.is-empty{ color:rgba(150,164,156,.42);font-weight:400; text-shadow:0 0 4px rgba(199,203,208,.14); } .mch-channel--live .mch-slot,.mch-slot--live{ --mch-slot-bloom:rgba(150,220,185,.32); --mch-slot-halo:rgba(214,238,226,.55); } /* A READOUT CARRYING A VARIABLE-LENGTH STRING, rather than a row of fixed slots. Added 2026-08-02 for the 404 page, which lights up the address the visitor actually asked for. The window above was built for a pairing code: a known count of characters, one line, centred. A URL is not that — it can be four characters or ninety — and .mch-channel is overflow:hidden because the scanlines and the vignette have to be painted to its edges. So an unmodified window would simply cut a long address off. §9 has already settled the principle for digits: a clipped digit is not a smaller number, it is a DIFFERENT number. A clipped address is a different address, and letting someone see their own typo is the entire job of this particular window, so the WINDOW gives and the string never does. The size drops from --mch-fs-readout to the lead size for the same reason a price is not set in body text: 34px is right for six characters and wrong for a path, which is a fact to be read rather than a number to be seen across a room. It stays in the lit face on dark glass, so it is still a readout. */ .mch-channel--text{ min-height:0; padding:var(--mch-s4) var(--mch-s5); } .mch-slot--text{ min-width:0;max-width:100%; font-size:var(--mch-fs-lead);letter-spacing:.4px;line-height:1.5; /* A URL has no spaces to break at, so `anywhere` is the only wrap rule that works on one. Without it a long path forces the window wider than its parent and the page grows a horizontal scrollbar. */ overflow-wrap:anywhere; } /* --------------------------------------------------------------------------- 5. CONTROLS — buttons, fields, and the pilot lamp. ------------------------------------------------------------------------ */ /* RAISED BEVEL BUTTON — metal with a milled top edge and 2px of real travel. Green NEVER fills it; at most it under-glows, and even then hueless. */ .mch-btn{ --mch-btn-glow:0 0 0 0 rgba(0,0,0,0); /* holds the slot, paints nothing */ --mch-btn-glow-press:0 0 0 0 rgba(0,0,0,0); position:relative;display:inline-flex;align-items:center;justify-content:center; gap:10px;min-height:52px;padding:12px var(--mch-s6); border-radius:var(--mch-r3); font-family:var(--mch-f-ui);font-weight:600;font-size:var(--mch-fs-btn); letter-spacing:2.2px;text-transform:uppercase;color:var(--mch-t2); /* A LABEL THAT WRAPS MUST STILL LOOK DELIBERATE. Uppercase tracked caps at the default 1.5 line-height fall apart over two lines, and a narrow column WILL wrap them. line-height pulls the two lines into one block; `balance` splits them evenly instead of leaving one orphan word; and the padding is vertical rather than zero so the box grows with the label rather than letting it touch the bevel. The system's own advice still stands — if a label needs two lines, shorten the label — but the day someone doesn't, this fails tidily instead of looking broken. */ line-height:1.25;text-align:center;text-wrap:balance; -webkit-appearance:none;appearance:none; background-image:linear-gradient(180deg, #44484f 0%, #383c43 52%, #303339 100%); box-shadow: inset 0 1.5px 0 rgba(206,211,216,.24), inset 0 -2px 3px rgba(0,0,0,.42), 0 6px 14px -8px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.38); transition:transform var(--mch-press) ease, box-shadow var(--mch-press) ease, color var(--mch-ink) ease; } /* DO NOT write `--mch-btn-glow:none` or leave it empty: an empty custom property is invalid at computed-value time and would wipe the ENTIRE bevel, not just the glow. A zero-spread transparent shadow is the correct no-op. */ .mch-btn:hover{color:var(--mch-t1)} .mch-btn:active,.mch-btn.is-pressed{ transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(199,203,208,.2), inset 0 -1px 1px rgba(0,0,0,.5), 0 4px 8px -5px rgba(0,0,0,.6); } .mch-btn--block{display:flex;width:100%} /* PRIMARY = the one action in view, so it is the only button milled from bright metal: taller, brighter lip, white label, a deeper cast shadow. A secondary sits visibly lower — hierarchy without a colour fill. */ .mch-btn--primary{ min-height:56px;font-weight:700;letter-spacing:2.6px;color:#f2f5f7; background-image:linear-gradient(180deg, #4c515a 0%, #3b3f47 52%, #33373d 100%); } .mch-btn--primary:not(:disabled):not(.is-disabled):not([aria-disabled="true"]){ box-shadow: inset 0 1.5px 0 rgba(206,211,216,.46), inset 0 -2px 3px rgba(0,0,0,.45), 0 12px 22px -8px rgba(0,0,0,.6), var(--mch-btn-glow, 0 0 0 0 rgba(0,0,0,0)), 0 2px 4px rgba(0,0,0,.4); } .mch-btn--primary:not(:disabled):not(.is-disabled):not([aria-disabled="true"]):active, .mch-btn--primary:not(:disabled):not(.is-disabled):not([aria-disabled="true"]).is-pressed{ transform:translateY(2px); box-shadow: inset 0 1.5px 0 rgba(206,211,216,.30), inset 0 -1px 2px rgba(0,0,0,.5), 0 4px 10px -6px rgba(0,0,0,.7), var(--mch-btn-glow-press, 0 0 0 0 rgba(0,0,0,0)); } /* THE UNDERGLOW IS HUELESS, AND THAT IS A CORRECTION, NOT A PREFERENCE. It used to be green. READY means "this action can be taken now" — on a marketing page a Download button is ready precisely BECAUSE nothing is connected yet, so lighting it green says LINKED underneath the word DOWNLOAD. The glow keeps its whole job (the button lifts off the plate when it becomes usable) in polished-aluminium light. */ .mch-btn.mch-btn--ready{ --mch-btn-glow:0 6px 20px -10px rgba(199,203,208,.30); --mch-btn-glow-press:0 2px 8px -6px rgba(199,203,208,.22); } /* An engraved glyph inside a label. Never stretches, never competes with the word — it exists so the eye finds the control before it reads it. */ .mch-btn__ico{flex:none;opacity:.72;color:currentColor} .mch-btn--primary .mch-btn__ico{opacity:.9} /* GHOST = a real secondary. No metal, just an engraved outline: it cannot be mistaken for the primary and it costs no visual weight. */ .mch-btn--ghost{ min-height:var(--mch-tap);background-image:none;color:var(--mch-t2); font-weight:600;letter-spacing:2px; box-shadow:inset 0 0 0 1px rgba(199,203,208,.18), inset 0 1px 0 rgba(233,238,242,.05), 0 1px 0 rgba(0,0,0,.35); } .mch-btn--ghost:hover{ color:var(--mch-t1); box-shadow:inset 0 0 0 1px rgba(199,203,208,.30), inset 0 1px 0 rgba(233,238,242,.07), 0 1px 0 rgba(0,0,0,.35); } .mch-btn--ghost:active,.mch-btn--ghost.is-pressed{ transform:translateY(1px); box-shadow:inset 0 0 0 1px rgba(199,203,208,.14), inset 0 2px 5px rgba(0,0,0,.4); } /* DANGER = recessed, not raised: a destructive action should feel like it sits BELOW the surface. Red is a label colour only, never a fill. */ .mch-btn--danger{ color:var(--mch-red);background-image:linear-gradient(180deg,#2c2f35 0%, #26292e 100%); box-shadow:inset 0 2px 5px rgba(0,0,0,.55), inset 0 -1px 0 rgba(233,238,242,.07), 0 1px 0 rgba(233,238,242,.04); } .mch-btn--danger:active,.mch-btn--danger.is-pressed{ transform:translateY(1px);box-shadow:inset 0 3px 7px rgba(0,0,0,.7); } /* COMPACT — an action that sits inside a row or beside a title. THE BOX SHRINKS AND THE TYPE DOES NOT: it inherits --mch-fs-btn untouched, whose floor IS the product's 14px floor. If a label will not fit, shorten the label. Height floor stays --mch-tap. */ .mch-btn--compact{ min-width:var(--mch-tap);min-height:var(--mch-tap); padding:0 var(--mch-s4);gap:8px;border-radius:var(--mch-r2); font-size:var(--mch-fs-btn);letter-spacing:1.8px; } /* HONESTLY DISABLED: dead metal, dead label, no glow, no travel. Three selectors, one state — aria-disabled is included because a control retired WITH A REASON must stay focusable to be read, so it cannot use the disabled attribute and must still paint dead. */ .mch-btn:disabled,.mch-btn.is-disabled,.mch-btn[aria-disabled="true"]{ color:var(--mch-t4);cursor:not-allowed;transform:none; background-image:linear-gradient(180deg, #3d4148 0%, #33373d 52%, #2e3138 100%); box-shadow:inset 0 1px 0 rgba(199,203,208,.14), inset 0 -1px 2px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.35); } /* WHY THIS CONTROL IS OFF — a second line inside the button, and the reason a disabled control is not simply a dead end. NOT uppercase: everything else on a button is a shouted verb, and the case change is what tells the eye this is an explanation. Deliberately BRIGHTER than the dead label above it — when a control is off, the reason is the part worth reading. */ .mch-btn:has(.mch-btn__why){flex-direction:column;gap:3px;padding-top:10px;padding-bottom:10px} .mch-btn__why{ display:block;max-width:100%; font-family:var(--mch-f-ui);font-weight:400;font-size:var(--mch-fs-sub); text-transform:none;letter-spacing:0;line-height:1.3;color:var(--mch-t3); } /* A CHIP — a stamped plate carrying one short engraved fact. This is how the spec's tracked-caps vocabulary lands on a page: END-TO-END ENCRYPTED · PEER-TO-PEER · NO ACCOUNT. It is not a button and must never look tappable, so it has a lit lip and NO travel and NO hover. */ .mch-chip{ display:inline-flex;align-items:center;gap:8px; padding:7px 14px;border-radius:var(--mch-r-pill);white-space:nowrap; background:linear-gradient(180deg,#3b4048,#2f333a); box-shadow: inset 0 1px 0 rgba(199,203,208,.22), inset 0 -1px 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); font-family:var(--mch-f-mono);font-stretch:112.5%;font-weight:400; font-size:var(--mch-fs-micro);letter-spacing:1.9px;text-transform:uppercase; color:var(--mch-t2); } /* A chip milled INTO the surface rather than onto it — for a quieter fact. */ .mch-chip--sunk{ background:linear-gradient(180deg,#25282d,#1f2226); box-shadow:inset 0 2px 4px rgba(0,0,0,.5), 0 1px 0 rgba(233,238,242,.05); color:var(--mch-t3); } /* A FIELD — a milled slot, not a web input. The recess is the same physics as the readout window: dark, sunk, with a lit lower lip where the light gets under the edge. The caret is HUELESS — a cursor blinking in a field means the field has focus, not that anything is connected. */ .mch-field{ width:100%;min-height:var(--mch-tap); padding:0 var(--mch-s4);border-radius:var(--mch-r2);border:0; font-family:var(--mch-f-ui);font-size:var(--mch-fs-body);color:var(--mch-t1); caret-color:var(--mch-edge); background-image:linear-gradient(180deg, #1e2126 0%, #23262b 100%); box-shadow: inset 0 3px 7px rgba(0,0,0,.6), inset 0 1px 1px rgba(0,0,0,.7), inset 0 -1.5px 1px rgba(199,203,208,.10), 0 1px 0 rgba(199,203,208,.12); transition:box-shadow var(--mch-ink) ease; } .mch-field::placeholder{color:var(--mch-t4)} .mch-field:hover{ box-shadow: inset 0 3px 7px rgba(0,0,0,.6), inset 0 1px 1px rgba(0,0,0,.7), inset 0 -1.5px 1px rgba(199,203,208,.16), 0 1px 0 rgba(199,203,208,.18); } /* A field for a code or a key takes the mono face and real tracking, because the reader's job there is character-by-character, not word-by-word. */ .mch-field--code{ font-family:var(--mch-f-mono);font-stretch:112.5%; letter-spacing:3px;text-transform:uppercase;text-align:center; } .mch-label{ display:block;margin-bottom:var(--mch-s2); font-family:var(--mch-f-mono);font-stretch:112.5%;font-weight:400; font-size:var(--mch-fs-micro);letter-spacing:1.9px;text-transform:uppercase; color:var(--mch-t2);text-shadow:0 1px 0 rgba(0,0,0,.35); } /* PILOT LAMP — a recessed ring with a real bulb in it. The single element that says, at a glance, whether the machine is alive. SHAPE IS THE CHANNEL THAT SURVIVES EVERYTHING. Print the page in black and white, or hand it to a red-green colour-blind reader, and the states must still be distinct: LIVE a SOLID DOT · filled disc, green, breathing STANDBY a HOLLOW RING · open centre, hueless, idling FAULT a DASH · a bar, not a circle, amber, blinking Do not "simplify" these into three coloured circles — that is the exact defect the shapes replaced, and the third carrier, the WORD under the lamp, is not optional either. */ .mch-lamp{ position:relative;width:26px;height:26px;border-radius:50%;flex:none; display:inline-flex;align-items:center;justify-content:center; background:radial-gradient(circle at 42% 34%, #3a3e45, #1d2025 78%); box-shadow:inset 0 1px 1px rgba(255,255,255,.22), inset 0 -1px 2px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.4); } .mch-lamp::after{ content:"";width:13px;height:13px;border-radius:50%; background:radial-gradient(circle at 40% 34%, #4b5158, #1d2025 80%); box-shadow:inset 0 -1px 1px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.5); transition:background .5s ease, box-shadow .5s ease; } .mch-lamp.is-standby::after{ background:radial-gradient(circle at 40% 34%, #23272d, #16181c 80%); box-shadow: inset 0 0 0 3px #c3c9d0, inset 0 -1px 1px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.5), 0 0 7px rgba(210,218,226,.28); animation:mch-lamp-idle 4.2s ease-in-out infinite; } .mch-lamp.is-live::after{ background:radial-gradient(circle at 40% 34%, var(--mch-green-bright), var(--mch-green) 55%, var(--mch-green-deep) 100%); box-shadow:0 0 14px 3px rgba(120,220,170,.55), inset 0 0 2px rgba(255,255,255,.6); animation:mch-lamp-breathe 3.4s ease-in-out infinite; } .mch-lamp.is-fault::after{ width:14px;height:4px;border-radius:2px; background:linear-gradient(180deg, #e3c096 0%, var(--mch-amber) 62%, #8a6533 100%); box-shadow:0 0 12px 2px rgba(198,154,85,.5), inset 0 0 2px rgba(255,255,255,.4); animation:mch-lamp-blink 1.1s steps(1) infinite; } /* THE WORD UNDER THE LAMP. Tiny by design — it is a legend, not a headline — but not optional: it is the only reading of machine state a colour-blind visitor gets. Floored at 11px so a page that retunes --mch-fs-nano for its own reasons still gets 11. */ .mch-lamp-label{ font-family:var(--mch-f-mono);font-stretch:112.5%;font-weight:400; font-size:max(11px, var(--mch-fs-nano));letter-spacing:2.2px; text-transform:uppercase;color:var(--mch-lamp-word); } /* THE PILOT PIP — a discrete lit dot beside a label that is genuinely reporting a live line. This exists so a whole control never has to wear green to say one thing about itself. */ .mch-dot{ width:9px;height:9px;border-radius:50%;flex:none; background:var(--mch-green-bright); box-shadow:0 0 10px rgba(133,214,170,.85); } /* --------------------------------------------------------------------------- 6. NAVIGATION + FOOTER — web-only, built from the same metal. ------------------------------------------------------------------------ */ /* THE NAV IS A MILLED RAIL ACROSS THE TOP — a bolted strip of the instrument's own faceplate, not a translucent floating bar. It is opaque on purpose: a blurred glass bar over brushed metal turns the grain to mud, and the grain is the thing carrying the whole impression. */ .mch-nav{ position:sticky;top:0;z-index:50; display:flex;align-items:center;gap:var(--mch-s6); min-height:68px;padding:0 var(--mch-gutter); background-image: linear-gradient(122deg, transparent 8%, rgba(255,255,255,.022) 40%, rgba(255,255,255,.045) 52%, transparent 92%), repeating-linear-gradient(90deg, transparent 0 calc(var(--mch-brush-period) - 7px), rgba(255,255,255,var(--mch-brush-alpha)) calc(var(--mch-brush-period) - 7px) calc(var(--mch-brush-period) - 6px), transparent calc(var(--mch-brush-period) - 6px) var(--mch-brush-period)), linear-gradient(180deg, #3f434b 0%, #34383f 60%, #2b2f35 100%); box-shadow: inset 0 1.5px 0 var(--mch-edge-hi), inset 0 -1px 0 rgba(0,0,0,.55), 0 10px 24px -16px rgba(0,0,0,.8); } /* A BAR THAT SPANS THE WINDOW WHILE ITS CONTENTS LINE UP WITH THE COLUMN BELOW. The rail itself must stay full-bleed — it is a strip of the instrument's own faceplate, and a 760px-wide "bar" floating in the middle of a 1440px page is not a faceplate. But on a document page the brand has to sit directly above the first word of the prose, or the eye reads two unrelated objects. So the METAL keeps the window and only what sits ON it is measured. Deliberately built from .mch-wrap rather than a fresh max-width here: `