Note operative:

• alt descrittivo e coerente con l’AI.
• Dimensioni consigliate: larghezza 1200–1600px, altezza 240–420px.
• Sfondo trasparente o tinta uniforme; evitare testi lunghi sul banner.

3) Parametri standard da definire per ogni AI

Per ogni nuova AI, definire:

• Colore di sfondo (background)
• Colore bordo (border-color)
• Colore testo (color)
• Eventuali note di stile (es. italic, font-weight)

3.1) Specifica Gemini (approvata)

Classe: .firma-gemini
Background: rgba(153, 255, 0, 0.15) (effetto evidenziatore)
Border: var(--accent-yellow-dark)
Text: var(--text-main)
Strong: var(--accent-yellow-dark)
Variante consigliata: firma-variant-shadow

3.2) Specifica Cursor (approvata)

Classe: .firma-cursor
Background: rgba(239, 68, 68, 0.12) (wash rosso elettrico)
Border: #EF4444
Text: #111827
Strong: #EF4444
Variante consigliata: firma-variant-shadow

Emoji consigliate (non hardcode):

• ⚡ (velocita / focus)
• 🧭 (direzione / precisione)
• 🧪 (verifica / validazione)

3.3) Specifica Claude (approvata)

Classe: .firma-claude
Background: linear-gradient(135deg,
rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.12) 100%); Border-left: 4px solid #3B82F6; Border-radius: 6px 12px 6px 12px; // Asimmetrico! Padding: 1.5rem; Color: #1E3A8A; Box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); Strong color: #2563EB; font-weight: 600;
Variante consigliata: firma-variant-shadow

Emoji consigliate (non hardcode):

• 🌊 (ONDA BLU - FLOW NARRATIVO)
• 📖 (LIBRO APERTO - STORY KEEPER)
• 💙 (CUORE BLU - IL NARRATORE EMOTIVO)

3.4) Specifica Copilot (approvata)

Classe: .firma-copilot
Background: linear-gradient(135deg,
rgba(173, 216, 255, 0.18) 0%, rgba(99, 179, 255, 0.22); Border-left: 4px solid #3B82F6; Border-radius: 6px 12px 6px 12px; // Asimmetrico! Padding: 1.5rem; Color: #1E3A8A; Box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); Strong color: #2563EB; font-weight: 600;
Variante consigliata: firma-variant-shadow

4) Varianti consentite (limitate)

Sono permesse solo varianti definite a livello SCSS.

Esempio (già disponibile):

<div class="firma-claude firma-variant-shadow">
  <strong>Claude:</strong> Nota con ombra leggera.
</div>

Varianti possibili:

Se serve una nuova variante, va aggiunta in _sass/_firme.scss.

4.1) Ambito di utilizzo (fase attuale)

• Consentito: articoli (ob-session)
• Non standardizzato: documents (ob-archives/documents, ob-ai, ob-progetti, ecc.)
  • Per i documents servirà una selezione per documento e un passaggio Notion dedicato.

5) Naming convention

• File SCSS: _sass/_firme.scss
• Classi: firma-<ai> in lowercase
• Variante: firma-variant-<nome>

6) Spec operativa (uso)

Questa sezione serve come promemoria operativo quando un’AI deve inserire una firma.

Cosa è fisso:

• Classe principale: firma-<ai> (es: firma-cursor)
• Struttura HTML standard con <strong>Nome:</strong> e testo a seguire
• Nessun inline style

Cosa è variabile (concesso):

• Emoji nel testo
• Emoji come badge (.emoji-signature + eventuale modificatore)
• Testo libero della firma
• Data come testo (.data-firma)
• Immagine banner (.immagini-firma)
• Una variante visiva se già definita in SCSS (es: firma-variant-shadow)

Cosa NON fare:

• Non inventare nuove classi
• Non usare inline style
• Non usare immagini non‑banner (solo orizzontali)
• Non creare nuove varianti SCSS senza approvazione

Metodo operativo (raccolta firme):

1. Se l’articolo è online: fornire il link.
2. Se non è online: fornire il file.
3. L’AI risponde con:
   • frase prima / frase dopo (punto d’ingresso)
   • testo firma
   • posizione emoji (nel testo o badge)
   • eventuale data e/o banner

7) Checklist rapida (per chi implementa)

• Ho usato la classe firma-<ai> corretta?
• Ho rispettato il formato <strong>Nome:</strong>?
• Ho evitato inline style?
• Se ho usato una variante, esiste in _firme.scss?