Tone of my voice

Tone of my voice

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tone of Voice — Mindful Writing</title>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,600;1,300;1,600&family=Instrument+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
  :root {
    --ink: #161412;
    --ink-soft: #3d3830;
    --ink-muted: #8a8078;
    --bg: #f5f2ec;
    --bg-warm: #ece7dd;
    --bg-card: #ffffff;
    --accent: #3a5a6e;
    --accent-light: #7ba4b8;
    --accent-pale: #ddeaf0;
    --queer: #5c4a7a;
    --queer-pale: #ede8f5;
    --men: #7a4a3a;
    --men-pale: #f5ebe8;
    --no: #b53a2a;
    --no-pale: #fceee9;
    --yes: #3a6b4a;
    --yes-pale: #eaf3ee;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Instrument Sans', sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.75;
  }

  .page {
    max-width: 800px;
    margin: 0 auto;
    padding: 64px 44px 100px;
  }

  /* ── Header ── */
  .header {
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--bg-warm);
  }

  .eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
  }

  h1 {
    font-family: 'Fraunces', serif;
    font-size: 46px;
    font-weight: 300;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 14px;
  }

  .subtitle {
    font-size: 16px;
    color: var(--ink-soft);
    font-weight: 300;
    max-width: 540px;
    line-height: 1.65;
  }

  /* ── Sezioni ── */
  .section { margin-bottom: 60px; }

  h2 {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bg-warm);
  }

  h3 {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 10px;
    margin-top: 22px;
  }

  p { color: var(--ink-soft); margin-bottom: 12px; }

  /* ── Blocco citazione essenza ── */
  .essenza {
    border-left: 3px solid var(--accent);
    background: var(--accent-pale);
    padding: 26px 30px;
    border-radius: 0 10px 10px 0;
    margin-bottom: 28px;
  }
  .essenza p {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    font-style: italic;
    font-weight: 300;
    color: var(--ink);
    margin: 0;
    line-height: 1.6;
  }

  /* ── Badge queer / sezione ── */
  .badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .badge-queer { background: var(--queer-pale); color: var(--queer); }
  .badge-men   { background: var(--men-pale);   color: var(--men); }
  .badge-all   { background: var(--accent-pale); color: var(--accent); }

  /* ── Tratti della voce ── */
  .tratti-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .tratto {
    background: var(--bg-card);
    border: 1px solid var(--bg-warm);
    border-radius: 10px;
    padding: 22px 24px;
  }

  .tratto-num {
    font-size: 11px;
    color: var(--accent-light);
    font-weight: 500;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
  }

  .tratto-titolo {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
  }

  .tratto p { font-size: 13px; color: var(--ink-muted); margin: 0; line-height: 1.6; }

  /* ── Approccio queer ── */
  .queer-box {
    background: var(--queer-pale);
    border: 1px solid #c8bcde;
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 20px;
  }

  .queer-box h3 {
    color: var(--queer);
    margin-top: 0;
    margin-bottom: 14px;
  }

  .queer-box p { color: var(--ink-soft); }

  .queer-principi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
  }

  .principio {
    background: white;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
    border: 1px solid #d8cee8;
  }

  .principio strong {
    display: block;
    font-size: 12px;
    color: var(--queer);
    font-weight: 500;
    margin-bottom: 4px;
  }

  /* ── Sezione uomini separati ── */
  .men-box {
    background: var(--men-pale);
    border: 1px solid #dfc3b8;
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 20px;
  }

  .men-box h3 {
    color: var(--men);
    margin-top: 0;
    margin-bottom: 14px;
  }

  .men-box p { color: var(--ink-soft); }

  .men-punti {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
  }

  .men-punto {
    background: white;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
    border: 1px solid #dfc3b8;
  }

  .men-punto strong {
    display: block;
    font-size: 12px;
    color: var(--men);
    font-weight: 500;
    margin-bottom: 4px;
  }

  /* ── Sì / No ── */
  .sino-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .si-box, .no-box {
    border-radius: 10px;
    padding: 22px 24px;
  }

  .si-box { background: var(--yes-pale); border: 1px solid #c0d9c8; }
  .no-box { background: var(--no-pale);  border: 1px solid #e8bfb6; }

  .sino-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }

  .si-box .sino-label { color: var(--yes); }
  .no-box .sino-label { color: var(--no); }

  .sino-list { list-style: none; }

  .sino-list li {
    font-size: 13px;
    color: var(--ink-soft);
    padding: 5px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    line-height: 1.5;
  }

  .sino-list li:last-child { border-bottom: none; }

  /* ── Esempi ── */
  .esempi { display: flex; flex-direction: column; gap: 18px; }

  .esempio {
    border: 1px solid var(--bg-warm);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
  }

  .esempio-header {
    background: var(--bg-warm);
    padding: 9px 20px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .esempio-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .esempio-col {
    padding: 18px 22px;
    font-size: 14px;
    line-height: 1.65;
  }

  .esempio-col:first-child {
    border-right: 1px solid var(--bg-warm);
    color: var(--ink-muted);
    font-style: italic;
  }

  .esempio-col:last-child { color: var(--ink); }

  .tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .tag-no  { background: var(--no-pale);  color: var(--no); }
  .tag-si  { background: var(--yes-pale); color: var(--yes); }

  /* ── Piattaforme ── */
  .piattaforme { display: flex; flex-direction: column; gap: 12px; }

  .piattaforma {
    display: grid;
    grid-template-columns: 140px 1fr;
    border: 1px solid var(--bg-warm);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
  }

  .piattaforma-nome {
    background: var(--bg-warm);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .piattaforma-nome strong {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    display: block;
    margin-bottom: 3px;
  }

  .piattaforma-nome span {
    font-size: 11px;
    color: var(--ink-muted);
  }

  .piattaforma-desc {
    padding: 18px 22px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.65;
  }

  /* ── Mantra ── */
  .mantra {
    background: var(--ink);
    color: var(--bg);
    border-radius: 14px;
    padding: 40px 44px;
    text-align: center;
  }

  .mantra .eyebrow { color: var(--accent-light); margin-bottom: 16px; }

  .mantra p {
    font-family: 'Fraunces', serif;
    font-size: 21px;
    font-style: italic;
    font-weight: 300;
    color: var(--bg);
    margin: 0;
    line-height: 1.6;
  }

  /* ── Footer ── */
  .footer {
    margin-top: 60px;
    padding-top: 22px;
    border-top: 1px solid var(--bg-warm);
    font-size: 12px;
    color: var(--ink-muted);
    display: flex;
    justify-content: space-between;
  }

  @media (max-width: 600px) {
    .page { padding: 36px 20px 60px; }
    h1 { font-size: 32px; }
    .tratti-grid, .sino-grid, .esempio-body,
    .piattaforma, .queer-principi { grid-template-columns: 1fr; }
    .piattaforma-nome { border-bottom: 1px solid var(--bg-warm); }
  }
</style>
</head>
<body>
<div class="page">

  <!-- Header -->
  <div class="header">
    <div class="eyebrow">Brand Document · Mindful Writing</div>
    <h1>Tone of Voice</h1>
    <p class="subtitle">La voce con cui parli a chiunque attraversi un momento di rottura — indipendentemente da genere, identità o orientamento. Con un'attenzione specifica agli uomini separati.</p>
  </div>

  <!-- Essenza -->
  <div class="section">
    <h2>L'essenza della voce</h2>
    <div class="essenza">
      <p>Sei un uomo che ha attraversato il burnout e ha ritrovato sé stesso attraverso la scrittura. Non parli a una categoria — parli a chiunque si sia perso. La tua voce non ha un genere. Ha una direzione.</p>
    </div>
    <p>Il tuo pubblico è eterogeneo nell'identità, ma omogeneo nel bisogno: ha bisogno di ritrovare una voce propria in un momento in cui sembra scomparsa. Burnout, separazione, crisi di senso — sono esperienze che attraversano tutti i corpi e tutte le storie.</p>
    <p>Il fatto che tu sia un uomo con un approccio queer è una risorsa, non un paradosso. Rompe l'aspettativa. Crea credibilità su più fronti. E ti permette di parlare agli uomini — soprattutto a quelli separati — da dentro, non dall'esterno.</p>
  </div>

  <!-- Tratti -->
  <div class="section">
    <h2>I 4 tratti della voce</h2>
    <div class="tratti-grid">
      <div class="tratto">
        <div class="tratto-num">01</div>
        <div class="tratto-titolo">Concreto senza essere freddo</div>
        <p>Dai strumenti reali, passi piccoli, esercizi fattibili. Non lasci le persone nel vago emotivo. Ma lo fai con una voce calda — non da manuale di self-help.</p>
      </div>
      <div class="tratto">
        <div class="tratto-num">02</div>
        <div class="tratto-titolo">Onesto senza essere duro</div>
        <p>Dici la verità anche quando è scomoda — che crescere fa fatica, che non sempre si ha voglia, che alcune cose non si risolvono in fretta. Senza ammorbidire troppo, senza colpevolizzare.</p>
      </div>
      <div class="tratto">
        <div class="tratto-num">03</div>
        <div class="tratto-titolo">Vicino senza confondersi</div>
        <p>Sei una guida che ha vissuto quel percorso. Condividi in modo autentico, ma mantieni la tua posizione: non sei il loro terapeuta, sei la persona che ha trovato una via e vuole indicarla.</p>
      </div>
      <div class="tratto">
        <div class="tratto-num">04</div>
        <div class="tratto-titolo">Inclusivo senza essere generico</div>
        <p>Parli a tutti senza parlare a nessuno in modo vago. Usi un linguaggio che non esclude — senza farne una bandiera, senza spiegare l'inclusività: la pratichi e basta.</p>
      </div>
    </div>
  </div>

  <!-- Approccio queer -->
  <div class="section">
    <h2>L'approccio queer</h2>
    <div class="queer-box">
      <h3>Cos'è — e cosa non è — nella tua comunicazione</h3>
      <p>Queer non è un'etichetta da mettere nel profilo. È un modo di stare nel contenuto: mettere in discussione le categorie rigide, non dare per scontato chi sei tu e chi è chi ti legge, lasciare spazio alle identità fluide senza nominarle ogni volta.</p>
      <p>Non è necessario spiegare l'approccio queer in ogni post. È sufficiente che sia visibile nel modo in cui scrivi, nelle storie che racconti, nelle parole che scegli.</p>
      <div class="queer-principi">
        <div class="principio">
          <strong>Linguaggio aperto</strong>
          Eviti pronomi e forme che presuppongono un genere. "Chi scrive", "le persone", "ognuno di noi" — non "gli uomini e le donne".
        </div>
        <div class="principio">
          <strong>Storie plurali</strong>
          Le esperienze che racconti non hanno un solo volto. Puoi parlare di separazione, di paternità, di burnout senza assegnarlo a un tipo umano preciso.
        </div>
        <div class="principio">
          <strong>Nessuna norma implicita</strong>
          Non dai per scontato che il "normale" sia eterosessuale, cisgender, in coppia. La scrittura mindful appartiene a tutti i modi di stare al mondo.
        </div>
        <div class="principio">
          <strong>La tua presenza come modello</strong>
          Il fatto che tu — uomo — parli di emozioni, vulnerabilità, cura di sé è già un atto politico. Non devi dichiararlo: basta farlo.
        </div>
      </div>
    </div>
  </div>

  <!-- Uomini separati -->
  <div class="section">
    <h2>La sezione uomini separati</h2>
    <div class="men-box">
      <h3>Un pubblico specifico, dentro il framework queer</h3>
      <p>Gli uomini separati sono uno dei pubblici più silenziosi sui social. Attraversano una delle esperienze più destabilizzanti — la perdita di un nucleo familiare, spesso della casa, a volte della relazione quotidiana con i figli — in una cultura che non gli ha insegnato a parlarne.</p>
      <p>Tu puoi arrivarci perché hai vissuto qualcosa di simile. E puoi farlo in modo che non sia né la solita retorica del "uomo ferito" né la tossicità mascherata da empowerment maschile. La scrittura è lo spazio.</p>
      <div class="men-punti">
        <div class="men-punto">
          <strong>Tono specifico per questo pubblico</strong>
          Più diretto. Meno metaforico. Gli uomini separati spesso non cercano poesia — cercano qualcuno che dica le cose in modo chiaro, senza drammatizzare né minimizzare. "Scrivere quando non sai cosa senti" è un titolo che li ferma.
        </div>
        <div class="men-punto">
          <strong>Evita la retorica della vittimizzazione</strong>
          Non è un pubblico da salvare. È un pubblico da accompagnare verso strumenti che non ha mai avuto. Il tono è: "so com'è, ecco qualcosa che ha funzionato per me."
        </div>
        <div class="men-punto">
          <strong>Temi chiave per questa sezione</strong>
          Solitudine dopo la separazione · Ricostruire un'identità senza la coppia · Paternità a distanza · Il silenzio degli uomini sui social · Scrivere la rabbia senza sfogare · Ritrovare il corpo e la voce.
        </div>
        <div class="men-punto">
          <strong>Coerenza con l'approccio queer</strong>
          Anche quando parli agli uomini separati, non presupponi eterosessualità, non usi stereotipi di genere, non dai per scontato la struttura familiare classica. Un uomo separato può essere gay, non-binario, in una famiglia allargata. La tua voce resta aperta.
        </div>
      </div>
    </div>
  </div>

  <!-- Sì / No -->
  <div class="section">
    <h2>Cosa fa la tua voce — e cosa non fa</h2>
    <div class="sino-grid">
      <div class="si-box">
        <div class="sino-label">✓ Sì</div>
        <ul class="sino-list">
          <li>Nomina le difficoltà senza amplificarle</li>
          <li>Usa "ognuno", "chi legge", "le persone"</li>
          <li>Propone passi piccoli e concreti</li>
          <li>Parla di sé in modo misurato e utile</li>
          <li>Fa domande che aprono, non che guidano</li>
          <li>Lascia spazio al silenzio e alla lentezza</li>
          <li>Chiude i post con un invito, non un imperativo</li>
          <li>Nomina la vulnerabilità maschile senza eroizzarla</li>
        </ul>
      </div>
      <div class="no-box">
        <div class="sino-label">✗ No</div>
        <ul class="sino-list">
          <li>"Ce la puoi fare!" e slogan motivazionali</li>
          <li>"Uomini e donne", "lui/lei" come default</li>
          <li>Frasi con "trasformazione", "rivoluziona"</li>
          <li>Tono da esperto infallibile</li>
          <li>Diagnosi o analisi del pubblico</li>
          <li>Retorica dell'uomo forte che si è "rimesso in piedi"</li>
          <li>Urgenza artificiale o leve di marketing aggressivo</li>
          <li>Citazioni di guru, teorie psicologiche in mostra</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Esempi -->
  <div class="section">
    <h2>La voce in pratica</h2>
    <p style="margin-bottom: 20px;">Quattro esempi concreti — incluso uno pensato per gli uomini separati.</p>
    <div class="esempi">

      <div class="esempio">
        <div class="esempio-header">
          <span class="badge badge-all">Tutti</span>
          Apertura di un post sul burnout
        </div>
        <div class="esempio-body">
          <div class="esempio-col">
            <div class="tag tag-no">Evita</div><br>
            "Se senti che non ce la fai più, è il momento di agire! Il burnout è un segnale che qualcosa deve cambiare. Inizia oggi il tuo percorso di guarigione ✨"
          </div>
          <div class="esempio-col">
            <div class="tag tag-si">La tua voce</div><br>
            "C'è un momento in cui smetti di scrivere — anche solo un messaggio — e ti rendi conto che non hai più parole. Non è pigrizia. È il segnale che qualcosa si è svuotato. La scrittura può essere il primo posto dove tornare a cercarlo."
          </div>
        </div>
      </div>

      <div class="esempio">
        <div class="esempio-header">
          <span class="badge badge-queer">Approccio queer</span>
          Parlare di identità e scrittura
        </div>
        <div class="esempio-body">
          <div class="esempio-col">
            <div class="tag tag-no">Evita</div><br>
            "La scrittura mindful è per tutti — uomini, donne, e chiunque altro. Ognuno merita di trovare la propria voce, qualunque sia la propria identità 🌈"
          </div>
          <div class="esempio-col">
            <div class="tag tag-si">La tua voce</div><br>
            "La pagina non ti chiede chi sei prima di lasciarti scrivere. È uno dei pochi posti così. Puoi arrivarci con qualsiasi storia addosso — e la storia, mentre scrivi, comincia a diventare tua."
          </div>
        </div>
      </div>

      <div class="esempio">
        <div class="esempio-header">
          <span class="badge badge-men">Uomini separati</span>
          Post specifico per questo pubblico
        </div>
        <div class="esempio-body">
          <div class="esempio-col">
            <div class="tag tag-no">Evita</div><br>
            "La separazione è un momento difficile per ogni uomo. Ma puoi uscirne più forte di prima! Con le giuste strategie puoi ritrovare te stesso e ricostruire la tua vita 💪"
          </div>
          <div class="esempio-col">
            <div class="tag tag-si">La tua voce</div><br>
            "Il primo weekend senza i figli è una cosa strana da descrivere. Non è silenzio — è un'assenza che fa rumore. Ho iniziato a scriverlo, quel rumore. Non per trovare risposte. Per smettere di fare finta che non ci fosse."
          </div>
        </div>
      </div>

      <div class="esempio">
        <div class="esempio-header">
          <span class="badge badge-all">Tutti</span>
          Invito a un esercizio di scrittura
        </div>
        <div class="esempio-body">
          <div class="esempio-col">
            <div class="tag tag-no">Evita</div><br>
            "Scrivi ogni giorno 3 cose per cui sei grato/a. Questo esercizio cambierà il tuo mindset in poche settimane! 📓"
          </div>
          <div class="esempio-col">
            <div class="tag tag-si">La tua voce</div><br>
            "Prendi un foglio. Scrivi una sola frase su come ti senti adesso — non come vorresti sentirti. Niente da risolvere, solo da notare. È già abbastanza."
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Piattaforme -->
  <div class="section">
    <h2>La voce su ogni piattaforma</h2>
    <p style="margin-bottom: 20px;">Stessa voce, grammatica diversa.</p>
    <div class="piattaforme">
      <div class="piattaforma">
        <div class="piattaforma-nome"><strong>Facebook</strong><span>Community</span></div>
        <div class="piattaforma-desc">Post più lunghi e riflessivi. Puoi raccontare episodi personali, momenti, scoperte. È la piattaforma giusta per la sezione uomini separati — il pubblico è più maturo e disposto alla lettura profonda. Chiudi con domande aperte che invitano senza forzare.</div>
      </div>
      <div class="piattaforma">
        <div class="piattaforma-nome"><strong>Instagram</strong><span>Visivo e diretto</span></div>
        <div class="piattaforma-desc">La prima riga ferma lo scroll. I caroselli funzionano per esercizi pratici in più passi. Le stories sono il posto più spontaneo — meno costruito. I reel ti permettono di usare la tua voce letteralmente: il tono e la misura con cui parli vale quanto le parole.</div>
      </div>
      <div class="piattaforma">
        <div class="piattaforma-nome"><strong>LinkedIn</strong><span>Thought leadership</span></div>
        <div class="piattaforma-desc">Qui il burnout professionale ha la sua casa naturale. Parla al professionista esausto con autorevolezza — non da coach, da persona che l'ha attraversato. L'approccio queer su LinkedIn è dirompente nel senso migliore: raro, riconoscibile, credibile.</div>
      </div>
      <div class="piattaforma">
        <div class="piattaforma-nome"><strong>Pinterest</strong><span>Ispirazione visiva</span></div>
        <div class="piattaforma-desc">Testi brevissimi, massima chiarezza. Funziona per prompt di scrittura, citazioni essenziali, esercizi in un'immagine. Il pin deve rispondere subito a: "a cosa mi serve?" Buona piattaforma per intercettare chi cerca "journaling", "crescita personale", "mindfulness".</div>
      </div>
    </div>
  </div>

  <!-- Mantra -->
  <div class="section">
    <div class="mantra">
      <div class="eyebrow">Il tuo mantra editoriale</div>
      <p>"Non devi ispirare tutti — devi essere riconoscibile da chi ha bisogno esattamente di te. La tua voce non ha un genere. Ha una direzione."</p>
    </div>
  </div>

  <div class="footer">
    <span>Mindful Writing · Tone of Voice — versione 2</span>
    <span>Documento interno · uso editoriale</span>
  </div>

</div>
</body>
</html>