# s4-turno — «Turno»

**Estado:** PASS · **Acento:** lima de alta visibilidade `#C9DE4A` · **Objeto:** o painel de comando e o colete refletor

**Prova** (2026-08-18)
```
PASS  1440px  overflow=nao  consola=0  ids-dup=0  img-partidas=0/7  verde-max=0.00%
PASS   768px  overflow=nao  consola=0  ids-dup=0  img-partidas=0/7  verde-max=0.00%
PASS   390px  overflow=nao  consola=0  ids-dup=0  img-partidas=0/7  verde-max=0.00%
```
Detetor de design: **0 achados** (dois corrigidos — ver abaixo).

**A ideia em três linhas.** A fábrica à noite. A sinalética que interessa às
03h00 não é a placa na parede — é o **painel**: o que está em linha, que
espessura está a correr, que densidade saiu. É escura porque a cena de uso é
essa, não porque «dark mode é moderno». O lima é a cor do colete refletor: a
única coisa que se lê de longe com pouca luz.

**Contraste — medido.**

| Par | Rácio | Veredicto |
|---|---|---|
| `#C9DE4A` sobre `#0F1210` | 13,09:1 | passa |
| `#C9DE4A` sobre `#161A16` | 12,26:1 | passa (painéis) |
| `#0F1210` sobre `#C9DE4A` | 13,09:1 | passa (botões) |
| `#9AA39C` sobre `#0F1210` | 7,26:1 | passa (corpo) |
| `#57672B` sobre `#0F1210` | **3,44:1** | 🔴 chumba — **é por isto que o verde da marca não entra** |

⚠️ **A última linha é a razão de ser da paleta.** O verde da marca não vive sobre
escuro. Como a arte não se toca, a saída é o logótipo na versão **branca**, que é
a que existe, e um verde **clareado** para tudo o resto — que é o que o lima é.

**Decisões de design.**
- **O mostrador é a gramática**: rótulo à esquerda, pontinhos a ligar, valor à
  direita. O olho salta o meio e vai ao número, que é o que um painel faz.
- **A fotografia entra a meia-luz** (`brightness(.62)`) e acende no hover. É uma
  câmara de vigilância, não um cartaz — e resolve de lado o problema de a
  fotografia disponível não ser boa: aqui não precisa de ser.
- **Barra de LED segmentada** no cabeçalho do painel: 12 traços, 9 acesos.

**Duas correções do detetor de design, e as duas eram reais.**
- 🔴 **`transition: padding-inline`** no hover de uma linha de largura total
  obriga a relayout a cada frame. Passou a `transform: translateX(10px)` no
  conteúdo, mais um filete lima que cresce — mesmo efeito, zero layout.
- 🔴 **`box-shadow: 0 0 0 1px var(--lima)`** é um halo de cor a offset zero num
  fundo escuro, que é o tique visual mais gasto que há. Removido: a borda já é
  lima no hover, o anel era redundante.

**Movimento.** Um momento só, e é o painel a **entrar em linha**: sobe 8 px e
ganha luz (`filter: brightness(.55) → none`, 620 ms). O LED da barra de serviço
pisca em ciclo de 2,6 s.

**Risco.** É a única escura e isso divide opiniões de imediato — não há
meio-termo. E um site B2B industrial escuro é uma aposta: contraria a expectativa
do setor, o que pode ser exactamente a diferenciação ou exactamente o erro.