/* THE nominee-sign material. Extracted from Show/nominee-signs-vog.html on 2026-08-07 so the Stage viewer renders the SAME signs rather than a lookalike. Both pages link this file; there is no second copy to drift. His approved tuning: do not re-tune it in one consumer only. */ :root{ --lg-blur: 16px; --lg-saturate: 108%; --lg-contrast: 1.02; --lg-brightness: 0.60; /* was 0.44 */ --lg-tint: 10 9 14; --lg-tint-a: 0.24; /* was 0.34 */ --lg-spec: 0.58; /* scales the WHOLE rim system coherently */ --lg-edge: 0.26; /* darkened outer edge -- what seats glass on a background */ --lg-shadow: 1.0; --lg-spec-angle: 135deg; --lg-spot: transparent; /* positional highlight, driven per sign as it arrives */ /* THE SHEET'S MARGINS, his call 2026-08-12 — nominee-sheet.html is now the reference for the card, so gap 18 / padding 38 34. Were 13 / 25 / 22. --card-gap and --card-pad-v must equal CARD_GAP and CARD_PAD_V in the builder, or fitTo solves against the wrong free height; check_layout_lock.py asserts that they do. */ --card-gap:18px; --card-pad-v:38px; --card-pad-h:34px; } .glass{ position:relative; border-radius:14px; isolation:isolate; backdrop-filter:var(--lg-refract,) blur(var(--lg-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast)) brightness(var(--lg-brightness)); -webkit-backdrop-filter:var(--lg-refract,) blur(var(--lg-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast)) brightness(var(--lg-brightness)); /* grain UNDER the tint, so it reads as texture in the glass rather than dirt on top */ background-image: var(--lg-spot, linear-gradient(transparent,transparent)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"), linear-gradient(rgb(var(--lg-tint) / var(--lg-tint-a)), rgb(var(--lg-tint) / var(--lg-tint-a))); background-blend-mode:screen, soft-light, normal; background-size:auto, 200px 200px, auto; box-shadow: 0 calc(16px * var(--lg-shadow)) calc(40px * var(--lg-shadow)) rgba(0,0,0,calc(.44 * var(--lg-shadow))), 0 2px 6px rgba(0,0,0,calc(.28 * var(--lg-shadow))), inset 0 -14px 30px rgb(255 255 255 / calc(.07 * var(--lg-spec))); } /* EDGE HIGHLIGHTS, raised to the hub engine's own proportions (public/hub/engines/ liquid-glass.html, read 2026-08-07). This page had been running a muted copy: the specular ring peaked at .80 against the engine's .95, the top-left catch at .74 against 1.35, and the inner ring at .16 against .14 with a much weaker 10px inner bloom. On a dark LED wall the rim IS the read -- it is the only part of the material with real luminance -- so it was the wrong thing to have quietened. z-index 2 on both pseudo-elements and 3 on content, also from the engine: without it the card type sat UNDER the specular ring and the ring greyed the white type. */ /* EDGE HIGHLIGHTS — retuned 2026-08-07 after his "not enjoying... thrown out... thinner". I had raised these to the hub engine's numbers (1.35 corner catch, .95 ring peak, a 10px inner bloom). WRONG FOR THIS CONTEXT, and his eye caught it: those are tuned for large UI cards. Here the sign is 132px, so the same ABSOLUTE widths are proportionally three times fatter, and at those alphas `mix-blend-mode:screen` clips to pure white — the rim stopped being a highlight and became a thick luminous outline. Retuned on two axes: THINNER every dimension roughly halved. The ring goes 1.5px -> 0.7px, the corner catch 1.6/-1.2 -> 0.8/-0.6. The 10px inner bloom is GONE entirely; it was lighting a quarter of the card, which is what made the top-left read as a wedge. QUIETER ring peak .95 -> .42, corner catch 1.35 -> .55. Nothing now reaches the screen blend's clipping point, so the highlight keeps gradient instead of going flat white — which is the whole difference between glass and a white stroke. The panel renders at 1381px and displays at 4368px native, so a 0.7px line arrives on the wall around 2.2px. Thin here is not thin there. */ .glass::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; box-shadow: inset .8px .8px .5px -.6px rgba(255,255,255, calc(.55 * var(--lg-spec))), inset -.6px -.6px .5px -.6px rgba(255,255,255, calc(.26 * var(--lg-spec))), inset 0 0 0 .5px rgba(255,255,255, calc(.07 * var(--lg-spec))), 0 0 0 .5px rgba(0,0,0, var(--lg-edge)); /* the seating edge */ } .glass::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; padding:.7px; background:linear-gradient(var(--lg-spec-angle), rgba(255,255,255,0) 0%, rgba(255,255,255, calc(.14 * var(--lg-spec))) 34%, rgba(255,255,255, calc(.42 * var(--lg-spec))) 50%, rgba(255,255,255, calc(.10 * var(--lg-spec))) 66%, rgba(255,255,255,0) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; mix-blend-mode:screen; } .glass > *{position:relative;z-index:3} /* fallbacks, as his playground has them: no backdrop-filter, or reduced transparency */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:rgb(var(--lg-tint) / .82)} .plate{background:rgb(var(--lg-tint) / .70)} } @media (prefers-reduced-transparency:reduce){ .glass{background:rgb(var(--lg-tint) / .88)} } /* THE BACKING PLATE, his idea: one big frosted plate the signs sit on. SIBLING, not parent -- an element with backdrop-filter becomes a new backdrop root, so a nested .glass would sample the plate's filtered output instead of the video and the blur would double or die. */ /* HIS CALL, and it inverts my earlier pass: the BACKING sheet is the LIGHTER tint and the signs are darker on top of it. That reads far more like iOS glass -- a bright frosted pane with darker elements sitting on it -- and it gives the white type a dark field to sit on while the sheet itself stays luminous. Less blur than the signs, so it stays behind them. */ .plate{position:absolute; /* the TINT ALPHA carries this, not brightness: the set behind is near-black, so there is almost no light for brightness() to amplify -- it lifted the pane barely at all. A light veil at real opacity is what makes it read as a frosted PANE rather than a faint halo, which is how iOS glass works over dark content too. */ /* blur is a VARIABLE so the arrival can animate the material itself, not just its opacity. Frosted glass IS its blur -- ramping that from 0 reads as the pane condensing into existence, which no amount of cross-fading can imitate. */ /* 2026-08-07, his note: less blur on the backing sheet. Was 10px. The sheet is the BACKGROUND glass -- it wants to stay readable as a pane over the set rather than erasing what is behind it, and the signs on top carry the heavier blur (16px) so the two layers still separate. Single source of truth: PLATE_BLUR in the script drives both this resting value and the arrival ramp. */ --plate-blur: 6px; --plate-sweep: -40%; /* off-pane; travels across on the way in */ backdrop-filter:var(--lg-refract,) blur(var(--plate-blur)) saturate(122%) contrast(0.97) brightness(1.06); -webkit-backdrop-filter:var(--lg-refract,) blur(var(--plate-blur)) saturate(122%) contrast(0.97) brightness(1.06); background: linear-gradient(100deg, transparent calc(var(--plate-sweep) - 18%), rgb(255 255 255 / 0.13) var(--plate-sweep), transparent calc(var(--plate-sweep) + 18%)), linear-gradient(180deg, rgb(232 236 250 / 0.215), rgb(206 214 238 / 0.155)); box-shadow:none; /* stepped shape: the rim is an SVG, not an inset shadow */ will-change:opacity,transform} .plateRim{position:absolute;left:0;top:0;pointer-events:none;overflow:visible} .plateRim path{fill:none} /* ---- THE LOCKED CARD, verbatim from nominee-sheet.html ------------------- Replacing a layout I had invented. The real card is 400x400, Gomme Sans, and carries FIVE elements -- logo, name, RULE, project, and for some nominees a project logo. I had dropped the rule entirely and sized logos by percentage; the actual card sizes each logo from measured per-nominee w/h, which is what the logo-sizing audit produced. It renders at its native 400 and is SCALED into the sign, so the authored proportions, gaps and type sizes survive instead of being re-derived at a smaller size. */ @font-face{font-family:"Gomme Sans";src:url("fonts/GommeSans-SemiBold.otf") format("opentype"); font-weight:600;font-display:block} @font-face{font-family:"Gomme Sans";src:url("fonts/GommeSans-Bold.otf") format("opentype"); font-weight:700;font-display:block} /* THE LOCKED CARD, verbatim from nominee-sheet.html / vog-motion-test.html, minus background:#000 -- here the glass is the ground, which is also why the rendered-JPG route had to go: .glass carries isolation:isolate, so mix-blend-mode could never reach past the sign's own veil to the video. Real DOM elements with real alpha have no such problem. fitTo() below is the layout engine: it binary-searches the font size, which is why my hand-set 30/21px never matched. NOMINAL 24 is the measured answer (measured.json nPx/pPx). */ .card{width:400px;height:400px;display:flex;flex-direction:column; align-items:center;justify-content:center; /* HIS ASK: tighter margins so the CONTENT sits slightly bigger. This is a DELIBERATE deviation from nominee-sheet.html, which uses gap 18 / padding 38 34 -- recorded here so it does not look like drift. The numbers below and CARD_PAD_V / CARD_GAP in the script must stay in step, because fitTo's free-height sum depends on them. */ gap:var(--card-gap);padding:var(--card-pad-v) var(--card-pad-h);overflow:hidden; font-family:"Gomme Sans","gomme-sans";font-weight:600;transform-style:preserve-3d} .card .logo{flex:none;display:flex;align-items:center;justify-content:center;max-width:100%} .card .logo img{object-fit:contain;display:block} .card .plogo img{opacity:.92} /* `pre-line` so an AUTHORED newline in the copy is obeyed and everything else still collapses and balances exactly as before. His call 2026-08-10 on the People card: some breaks are a typographic decision, not something to be re-derived. Strings with no newline are unaffected. */ .card .name{color:#fff;font-weight:600;text-align:center;line-height:1.16;text-wrap:balance; white-space:pre-line; width:100%;flex:none;min-height:0;overflow:hidden} .card .rule{width:150px;height:2px;background:#fff;flex:none;opacity:.92} .card .proj{color:#fff;font-weight:400;text-align:center;line-height:1.2;text-wrap:balance; white-space:pre-line; width:100%;flex:none;min-height:0;overflow:hidden} .card .el{will-change:transform,opacity;transform-origin:50% 120%} /* ---- the sign ---------------------------------------------------------- */ /* HIS CALL: the glass FLOATS -- no post. So it pivots about its own centre, not a base hinge: a floating panel has nothing to hinge on, and a base pivot would read as a swing from a support that is not there. */ .sign{position:absolute;transform-origin:50% 50%; will-change:transform,opacity} .face{width:400px;height:400px;transform-origin:0 0;position:absolute;left:0;top:0} /* NO recolouring of any client mark, ever. A brightness/desaturate filter destroyed the brand colour on an earlier pass; the record also flags that EAFL's lime pennant IS the logo. Contrast is answered by the glass, never by tinting someone's logo. */