/* ============================================================================ texture_metals.css -- brushed silver and brass, RENDERED, split into knobs. Joseph, 2026-09-22: "they should look like realistic metal, like you applied a PBR metal shader to them in blender and angled the spotlight to get a pretty shine." So they are: tools/metal_render/ builds a Blender scene (Cycles, Principled BSDF, metallic 1.0, anisotropic roughness for horizontal brushing, one angled spot light plus a faint second one on the right, a studio world) and renders the FACE of a button. The images in static/brand/metal/ are those renders, brushed along X in post to turn sampling speckle into grain (see tools/metal_render/README.md). WHY ONLY THE FACE IS AN IMAGE Buttons come in many widths and three shapes (rectangle, pill, circle). A rendered rim would stretch or would need one image per radius. So the image is the flat face only, stretched to the button (horizontal grain survives a horizontal stretch unchanged; the heights in use only range 38-62 px), and the rim is drawn here in CSS, where it follows any border-radius: * the border is the rim: lighter on top, darker at the bottom * a 3px inner bevel gradient on top of the face Three aspect renders exist so the spotlight's highlight keeps its shape: wide (4.3:1) .hero-cta, .btn-hiring, .cta-strip .btn-light mid (2.7:1) .topnav-cta, .btn-main, .tcta, the chat launcher pill round (1:1) the chat launcher circle on phones Which button wears which is decided in materials.css. THE KNOBS (visual settings panel), per metal: --tex--base the metal's average colour. Under the render, it is what shows while the image loads and what the shine knob fades towards. In "tint" mode (below) it IS the colour of the metal. --tex--shine 0..1. 1 = the render as lit. Lower fades the face towards the flat base (a softer, duller metal). --tex--face-* which render to use. The default is the COLOURED render. The GREY render + --tex--blend: luminosity is "tint" mode: the render gives the light, the base gives the colour, so the colour picker re- colours the metal. Kept because Joseph asked for base colour and texture to be separate knobs; the coloured render is the default because it looks better (report 72 has the side-by-side). CONTRAST: text is --tex--on. Measured against the rendered face's average and its brightest 5% in report 72 (tools/metal_render/contrast.py). ============================================================================ */ :root { /* ---------------------------------------------------------------- shared -- The rim, same for both metals: light from above, so the top edge catches it and the bottom edge falls into shade. Neutral black/white only. */ --tex-metal-bevel-hi: rgba(255,255,255,.42); --tex-metal-bevel-lo: rgba(0,0,0,.26); --tex-metal-clear: rgba(0,0,0,0); --tex-metal-bevel: linear-gradient(180deg, var(--tex-metal-bevel-hi) 0, var(--tex-metal-clear) 3px, var(--tex-metal-clear) calc(100% - 3px), var(--tex-metal-bevel-lo) 100%); /* ---------------------------------------------------------------- SILVER -- */ --tex-silver-base: #9e9ea6; --tex-silver-shine: 1; --tex-silver-blend: normal; --tex-silver-face-wide: url("brand/metal/silver_wide.r2@2x.webp"); --tex-silver-face-mid: url("brand/metal/silver_mid.r2@2x.webp"); --tex-silver-face-round: url("brand/metal/silver_round.r2@2x.webp"); --tex-silver-rim-top: color-mix(in srgb, var(--tex-silver-base), #ffffff 55%); --tex-silver-rim-side: color-mix(in srgb, var(--tex-silver-base), #000000 18%); --tex-silver-rim-bottom: color-mix(in srgb, var(--tex-silver-base), #000000 45%); --tex-silver-on: #0a0a0c; --tex-silver-on-glow: rgba(255,255,255,.28); /* ----------------------------------------------------------------- BRASS -- Warm yellow-gold: the F0 in the render is set so the face averages to the palette's --mat-brass-avg family, not orange and not mustard. */ --tex-brass-base: #ba9934; --tex-brass-shine: 1; --tex-brass-blend: normal; --tex-brass-face-wide: url("brand/metal/brass_wide.r2@2x.webp"); --tex-brass-face-mid: url("brand/metal/brass_mid.r2@2x.webp"); --tex-brass-face-round: url("brand/metal/brass_round.r2@2x.webp"); --tex-brass-rim-top: color-mix(in srgb, var(--tex-brass-base), #fff4d0 55%); --tex-brass-rim-side: color-mix(in srgb, var(--tex-brass-base), #000000 20%); --tex-brass-rim-bottom: color-mix(in srgb, var(--tex-brass-base), #000000 48%); --tex-brass-on: #0a0700; --tex-brass-on-glow: rgba(255,255,255,.22); /* ---------------------------------------------------------------- COPPER -- The main page's metal (Joseph, 2026-09-22: "Main should be a metal that renders to an average of the current color, so accents can remain the same"). The render's F0 is tuned so its face averages the main accent, --bp-accent #d98a2b (measured in report 73). Its base IS that accent, so the rim follows the Accent knob; the render itself stays copper. The label is the page's own on-accent ink. */ --tex-copper-base: var(--bp-accent, #d98a2b); --tex-copper-shine: 1; --tex-copper-blend: normal; --tex-copper-face-wide: url("brand/metal/copper_wide.r2@2x.webp"); --tex-copper-face-mid: url("brand/metal/copper_mid.r2@2x.webp"); --tex-copper-face-round: url("brand/metal/copper_round.r2@2x.webp"); --tex-copper-rim-top: color-mix(in srgb, var(--tex-copper-base), #ffe6c8 55%); --tex-copper-rim-side: color-mix(in srgb, var(--tex-copper-base), #000000 20%); --tex-copper-rim-bottom: color-mix(in srgb, var(--tex-copper-base), #000000 48%); --tex-copper-on: var(--bp-on-accent, #071d33); --tex-copper-on-glow: rgba(255,255,255,.22); /* "tint" mode sources: the same scene rendered as a colourless metal. Point a --tex--face-* at these and set --tex--blend: luminosity. */ --tex-grey-face-wide: url("brand/metal/grey_wide.r2@2x.webp"); --tex-grey-face-mid: url("brand/metal/grey_mid.r2@2x.webp"); --tex-grey-face-round: url("brand/metal/grey_round.r2@2x.webp"); } /* How a button is composed from these (layers, rim, which face) is in materials.css. */