# "Website door invoker" — signature voor klantsites

De ondertekening die onderaan een site komt die wij bouwen. Bedoeld als
**signature, niet als tweede merk**: in rust neemt hij de kleur van de site over
en valt hij nauwelijks op; pas bij hover of focus springt hij naar het
invoker-groen `#00ff9c` met een knipperende blokcursor.

Eerste implementatie: [gat.invoker.nl](https://gat.invoker.nl/) (juli 2026).

## Bestanden

| Bestand | Waarvoor |
|---|---|
| `invoker-signature.css` | De styling. Framework-onafhankelijk, met custom properties om te tunen. |
| `invoker-signature.html` | Vanilla HTML-snippet, plakken en klaar. |
| `InvokerSignature.tsx` | React/Next-component (de variant die op gat.invoker.nl draait). |
| `voorbeeld.html` | Testpagina op donker, donker-met-eigen-font en licht. Open lokaal in de browser. |


Het woordmerk is **niet nagetekend**: het is het echte vectorpad uit
`~/projects/invoker/public/logo/invoker-wordmark.svg`, inclusief de `$`-prompt
die volgens de brand-kit een vast merkelement is. Het staat inline in de HTML
zodat `currentColor` werkt; als `<img>` zou je de kleur niet kunnen sturen.

## Gebruiken

```html
<link rel="stylesheet" href="/invoker-signature.css" />
<!-- plak de inhoud van invoker-signature.html in je footer -->
```

Tunen via custom properties op het element:

```css
.invoker-signature {
  --invoker-sig-h: 0.82rem;              /* hoogte woordmerk */
  --invoker-sig-label: 0.64rem;          /* fontgrootte label */
  --invoker-sig-font: "Jouw Font", sans-serif;
  --invoker-sig-rust: #8b7c9b;           /* kleur in rust */
  --invoker-sig-actief: #c3b7ce;         /* label bij hover */
}
```

Op een **lichte** achtergrond: zet `--invoker-sig-rust` op ink `#06110d` en
verlaag het groen (bv. `#0a8f5c`), want `#00ff9c` op wit heeft te weinig
contrast.

## De twee valkuilen (hier zit het werk)

De bijgesneden viewBox is **89,2 eenheden** hoog. Daarvan zitten **9** onder de
basislijn (de staart van het `$`) en beslaan **53,4** de x-hoogte, de kleine
letters van "invoker". Beide getallen heb je nodig.

**1. Schaal op de x-hoogte, niet op de totale hoogte.**
Het `$`-teken reikt veel hoger dan de letters. Geef je het merk dezelfde totale
hoogte als de tekst ernaast, dan worden de kleine letters van "invoker" optisch
veel groter en oogt de signature te zwaar. Vuistregel:

```
--invoker-sig-h  ≈  kapitaalhoogte van je label / 0,6
```

Bij een label van `0.64rem` (kapitaalhoogte ≈ 0,72 × fontgrootte ≈ 7,4 px) komt
dat uit op ongeveer `0.82rem`, wat een x-hoogte van 7,85 px geeft. Het merk mag
net iets groter zijn dan de tekst; het is tenslotte een logo.

**2. Lijn uit op de basislijn, niet op het midden.**
Om dezelfde reden ligt het optische midden van het merk lager dan dat van
kapitalen ernaast. `align-items: center` zet het merk dus zichtbaar scheef.

Daarbij één addertje: een browser neemt de **onderrand** van een SVG als
basislijn, en die onderrand is de staart van het `$`. Het merk staat daardoor
precies die staarthoogte te hoog. Corrigeren doe je met `translate`, niet met
een negatieve marge: die telt namelijk niet mee voor de basislijn van een
flex-item.

```css
--_staart: calc(var(--invoker-sig-h) * 9 / 89.2);
.invoker-signature__merk { translate: 0 var(--_staart); }
```

## Controleren of het klopt

Niet op het oog. Meet de twee basislijnen in de console; het verschil hoort 0 te
zijn:

```js
const sig = document.querySelector('.invoker-signature');
const label = sig.querySelector('.invoker-signature__label');
const svg = sig.querySelector('.invoker-signature__merk');
const probe = document.createElement('span');           // 0x0 inline-block staat
probe.style.cssText = 'display:inline-block;width:0;height:0'; // met z'n onderrand
label.appendChild(probe);                               // exact op de basislijn
const labelBaseline = probe.getBoundingClientRect().bottom;
probe.remove();
const r = svg.getBoundingClientRect();
console.log((r.bottom - r.height * 9 / 89.2) - labelBaseline);  // → 0
```

## Als het logo ooit verandert

De viewBox `20 20 531 89.2` is de gemeten inkt-bounding-box van het pad. Wijzigt
`invoker-wordmark.svg`, meet dan opnieuw met `getBBox()` op de `<g>` (die geeft
de bbox zónder de eigen transform, dus tel `translate(15.8 100.2)` erbij op) en
werk ook de verhoudingen 9/89,2 en 53,4/89,2 bij.