Il sistema, non il singolo pezzo

Contenitore

Tutto il contenuto sta dentro un .container: larghezza massima 1160 px, margini automatici, 24 px di respiro ai lati che diventano il margine di sicurezza sui telefoni. Le pagine di testo lungo aggiungono .container-narrow e scendono a 780 px, perché una riga di 66 caratteri si legge e una di 140 no.

vive in tutte le 43 pagine

<div class="section"><div class="container">…</div></div>
<div class="section"><div class="container container-narrow legal-doc">…</div></div>

Bande

Una pagina è una sequenza di .section. Da sole hanno il fondo ambientale; con .white prendono un velo bianco e con .dim uno azzurrino. Alternarle serve a far capire dove finisce un argomento e comincia il successivo, senza righe divisorie.

<section class="section white"><div class="container">…</div></section>

Spaziatura

96 px sopra e sotto, 56 px sotto i 700 px di larghezza

Non annidare

una banda dentro un'altra raddoppia lo spazio e si vede

Intestazione di sezione

Occhiello, titolo, sottotitolo. Sempre in quest'ordine e sempre con le stesse tre classi: chi arriva alla pagina a metà capisce dove si trova dal solo occhiello.

vive in 15 pagine

<div class="head">
  <div class="eyebrow">Occhiello</div>
  <h2 class="h2">Titolo con <em>una parte in corsivo</em></h2>
  <p class="sub">Una riga che spiega cosa c'è sotto.</p>
</div>

em nel titolo

diventa corsivo e prende --accent-2: serve a far cadere l'occhio, non a decorare

Larghezza

il titolo si ferma a 22 caratteri per riga, il sottotitolo a 62

Griglie

Tre larghezze: due, tre o quattro colonne. Sotto i 900 px diventano tutte una colonna sola. Le tracce sono minmax(0,1fr) e non 1fr: con 1fr una colonna non scende mai sotto il suo contenuto, e basta una tabella larga o una riga che non va a capo per spingere la pagina fuori dallo schermo. È esattamente quello che era successo a questa pagina.

<div class="grid g3">
  <div class="crd">…</div>
  <div class="crd">…</div>
</div>

Distanza

20 px fra le celle, 36 px sopra la griglia

Rottura

una colonna sola sotto i 900 px

Testata di pagina

.hero è la testata della home: più alta, con il titolo che arriva a 54 px. .phero è quella delle pagine interne: stessa struttura, un terzo in meno di altezza. Entrambe ospitano un .blob, l'alone sfocato in alto a destra, che è decorativo e viene ritagliato dal bordo della testata.

<header class="phero"><div class="container">
  <div class="blob" aria-hidden="true"></div>
  <div class="bcrumb">…</div>
  <div class="eyebrow">Occhiello</div>
  <h1>Titolo</h1>
  <p class="lead">Sommario.</p>
</div></header>

Un solo h1

sta qui e da nessun'altra parte

.blob

decorativo: aria-hidden obbligatorio

Sfondo ambientale

Due strati fissi dietro tutto: .liquid, quattro macchie di colore che non si muovono, e .orbz, quattro sfere che derivano lentamente passando per un filtro di rifrazione SVG. Servono a dare al vetro qualcosa da piegare: senza uno sfondo colorato dietro, un pannello semitrasparente è solo un pannello grigio. Si spengono da soli con prefers-reduced-motion e con prefers-reduced-transparency.

vive in tutte le 43 pagine

<div class="liquid" aria-hidden="true"></div>
<div class="orbz" aria-hidden="true">
  <div class="o o1"></div><div class="o o2"></div>
  <div class="o o3"></div><div class="o o4"></div>
</div>

Costo

nessuno: sono gradienti CSS, non immagini e non canvas

aria-hidden

obbligatorio su entrambi: non c'è niente da leggere

Livello

z-index:-1 e -2, sotto tutto il resto

Titolo intermedio

.ti è il titolo che apre un blocco dentro una sezione, quando la sezione ne contiene più di uno e l'intestazione grande sarebbe troppo. Sta fra .h2 e un normale h3.

vive in 4 pagine servizio

<h3 class="ti">Titolo del blocco</h3>

Barra di navigazione

Capsula di vetro sospesa, incollata in alto quando si scorre. Sotto i 1100 px il menù si chiude nel pulsante a tre righe e le due chiamate all'azione si spostano dentro il menù a tendina. Il valore non è casuale: a 1080 px le voci non ci stavano più e la barra spingeva fuori tutta la pagina di 56 px — succedeva su tutte e 42 le pagine, su ogni schermo da tablet in orizzontale in giù.

<nav class="nav" aria-label="Navigazione principale"><div class="container">
  <a class="brand" href="index.html">…</a>
  <div class="menu"><a href="…">Voce</a></div>
  <div class="navactions">
    <a class="giocacta" href="gioca.html">Gioca</a>
    <a class="btn primary" href="contatti.html">Parliamone</a>
    <button class="burger" aria-expanded="false" aria-controls="mobileMenu">☰</button>
  </div>
</div></nav>
<div class="mnav" id="mobileMenu" hidden>…</div>

Rottura

1100 px — il menù disteso ne chiede 1081

Pagina corrente

aria-current="page" sulla voce attiva

Menù a tendina

contiene anche Gioca e Parliamone: niente sparisce

Piè di pagina

Quattro colonne che diventano due sotto gli 800 px, più la riga legale. Gli indirizzi email vanno a capo dentro la colonna invece di allargarla: senza overflow-wrap dimmi@confumedia.com è una parola sola da 195 px e spingeva fuori il piè di pagina sui telefoni.

<footer class="footer"><div class="container">
  <div class="cols">…</div>
  <div class="legal">…</div>
</div></footer>

Pulsanti

Un solo pulsante primario per schermata: se tutto è primario, niente lo è. Il fantasma è per le azioni secondarie, il silenzioso per le terziarie.

<button type="button" class="btn primary">Primario</button>
<button type="button" class="btn ghost">Fantasma</button>

Altezza minima

44 px — soglia WCAG 2.5.8 per l'area cliccabile

Focus

contorno 3 px in --accent-2, distanziato di 2 px

Stato occupato

aggiungi .is-busy: compare la rotella

Link con freccia

La freccia dice che si va da qualche parte senza aggiungere una parola. Si scrive con la classe, non con il carattere: così quando il link è dentro un testo la freccia non viene letta dallo screen reader come parte della frase. Il link di ritorno ha già la sua freccia nel testo e quindi non prende .arrow: in ventun pagine c’erano tutte e due, «← Tutti gli articoli →».

vive in 26 pagine

<a class="lnk arrow" href="…">Esplora</a>
<a class="backlink" href="media.html">← Tutti gli articoli</a>

Briciole di pane

Dove sono e come torno indietro. Sono sottolineate, non solo colorate: chi non distingue i colori deve poterle riconoscere lo stesso (WCAG 1.4.1).

vive in 22 pagine

<div class="bcrumb"><a href="index.html">Home</a> / <a href="media.html">Media</a> / Titolo corrente</div>

Dati strutturati

ogni pagina ha anche un BreadcrumbList in JSON-LD

Etichette

.chip per i fatti brevi, .pill per marcare una scheda, .badge per la categoria di un articolo. Sono tre cose diverse e si somigliano apposta.

<span class="chip">Fatto breve</span>
<span class="pill">Il pilastro</span>
<span class="badge">Categoria</span>

Campi di modulo

L'etichetta sta sopra il campo e resta visibile mentre si scrive. Il placeholder è un esempio, non un'etichetta: sparisce appena si digita, e chi ha difficoltà di memoria a breve termine perde il riferimento.

<p class="field">
  <label class="lbl" for="email">Email di lavoro<span class="req" aria-hidden="true">*</span></label>
  <input class="input" id="email" name="email" type="email"
         data-required="email" data-label="Email di lavoro" data-work="true">
</p>

<label class="consent-line">
  <input type="checkbox" name="privacy" data-privacy-consent required>
  <span>Ho letto l'<a href="privacy.html">informativa</a>…</span>
</label>

Gli attributi data-required e data-label vengono letti da cm-forms.js, che pensa a validazione, messaggi d'errore e filtro anti-bot. Al modulo basta data-cm-form.

Interruttore

Usato nel pannello dei cookie. Lo stato è leggibile anche da chi non distingue i colori, perché la pallina si sposta. Fino a poco fa non lo era: il nastro dei loghi partner definiva un .track senza contesto, e si prendeva anche il binario dell'interruttore, che diventava largo 2 px e scorreva da solo. Ora quella regola vive solo dentro .marquee.

<label>
  <span class="sw"><input type="checkbox" checked><span class="track"></span></span>
  Statistiche
</label>

Avvisi

Errore e conferma non si distinguono solo per il colore: hanno un'icona, un bordo laterale spesso e un testo esplicito. È il requisito 1.4.1 delle WCAG.

<div class="form-err" role="alert">Cosa è andato storto.</div>
<div class="form-ok" role="status">Cosa è andato bene.</div>

Tabelle

Intestazioni con scope, didascalia per lo screen reader, e un contenitore che scorre quando la tabella non ci sta. Il contenitore prende tabindex="0" perché una regione che scorre deve poter scorrere anche senza mouse (WCAG 2.1.1): senza di lui la tabella dei prezzi usciva dallo schermo sui telefoni.

<div class="tablewrap" tabindex="0" role="region" aria-label="Prezzi">
  <table>
    <caption class="sr-only">Prezzi dei siti</caption>
    <thead><tr><th scope="col">Cosa</th>…</tr></thead>
    <tbody>…</tbody>
  </table>
</div>

Banner del consenso

Accetta e rifiuta hanno lo stesso peso visivo e la stessa distanza dal dito. Le linee guida dell'EDPB di gennaio 2023 sono esplicite: rifiutare non può costare più clic che accettare.

Blocco preventivo

gli script di terze parti non partono finché non arriva il sì

Prova del consenso

data, ora e versione dell'informativa, art. 7.1 GDPR

Revoca

il collegamento nel piè di pagina riapre il pannello

Schede

Quattro varianti sulla stessa superficie di vetro. .crd è quella generica; .svc porta numero e occhiello per gli elenchi di offerta; .stat è il riquadro con la cifra grande; .pcard quella dei percorsi Academy, con badge e icona.

<div class="crd">…</div>
<a class="svc" href="…"><div class="svchead"><span class="no">01</span></div>…</a>
<div class="stat"><b>20M</b><span>account al mese</span></div>

Vetro

sfondo semitrasparente più backdrop-filter; con prefers-reduced-transparency diventa opaco

Sollevamento

5 px al passaggio del mouse, spento con movimento ridotto

Nastri di numeri

.statstrip sotto la testata della home, .kstrip nei casi studio, .bignum quando il numero è il messaggio. In tutti e tre il numero è scritto in cifre nel markup: l'animazione che lo fa salire da zero è un di più, non il modo in cui l'informazione arriva.

<div class="statstrip">
  <div class="stat"><b data-count="20" data-suffix="M">20M</b>
    <span>account al mese</span></div>
</div>

<div class="bignum"><b data-count="50" data-suffix="%">50%</b>
  <span>in meno sul costo di hiring</span>
  <span class="src">in dodici mesi</span></div>

data-count

valore finale; il testo dentro b è già quello giusto

Fonte

.src dice da dove viene il numero. Un numero senza fonte non si pubblica

Nastro delle prove

I numeri che contano, in scorrimento continuo sotto la testata. La copia che serve al ciclo è marcata aria-hidden: chi usa uno screen reader non la sente due volte. Con movimento ridotto il nastro si ferma e va a capo.

vive in 6 pagine servizio

<div class="proofbar"><div class="proofbar-track">
  <span><b>+23%</b> fatturato con un brand coerente</span>
</div></div>

Barre proporzionali

Per i numeri che si confrontano fra loro. Si riempiono quando entrano in vista; con movimento ridotto sono già piene. Il valore è scritto in cifre accanto all'etichetta: la barra è un rinforzo, non l'unica informazione.

<div class="bar-row">
  <div class="bar-head">
    <span class="bar-label">Etichetta</span><span class="bar-value">+23%</span>
  </div>
  <div class="bar-track"><div class="bar-fill" style="--w:92%"></div></div>
  <p class="bar-note">Nota facoltativa.</p>
</div>

Fisarmonica

Per gli elenchi lunghi in cui chi legge cerca una voce sola. .faqbox è la stessa fisarmonica marcata come FAQPage nei dati strutturati, così le domande possono comparire direttamente nei risultati di ricerca.

<div class="faqbox">
  <div class="acc">
    <button type="button">Domanda<span class="ic">+</span></button>
    <div class="body"><div class="in"><p>Risposta.</p></div></div>
  </div>
</div>

Stato

aria-expanded sul pulsante, .open sul blocco

Senza JS

tutti i pannelli risultano aperti: niente si perde

Banda di richiamo

Chiude quasi tutte le pagine: una domanda, una riga, un pulsante. Uno solo. Se una banda di richiamo ha due pulsanti, non è più un richiamo, è un bivio.

vive in 32 pagine

<div class="band dots" style="text-align:center">
  <h2>Domanda diretta</h2>
  <p>Una riga che dice cosa succede dopo.</p>
  <a class="btn primary" href="contatti.html">Azione</a>
</div>

Riquadro del banco di prova

.ethics: il riquadro chiaro con la trama a puntini, per le affermazioni che l'azienda fa su se stessa. Si usa una volta per pagina, mai due.

<div class="ethics dots">
  <div class="eyebrow">Occhiello</div>
  <h2>Affermazione.</h2>
  <p>Il perché. <em>La conseguenza.</em></p>
</div>

Corpo dell'articolo

Tutto quello che sta dentro un articolo del blog: sommario, paragrafi, elenchi puntati, citazione in rilievo. Larghezza fissa a 720 px e corpo a 18,6 px, perché un articolo si legge per intero e una colonna di 66 caratteri è la misura che stanca meno.

vive in 20 articoli

<div class="article-body">
  <p class="lead">Sommario.</p>
  <p>Testo.</p>
  <blockquote class="pull">La frase che si ricorda.</blockquote>
  <ul><li>Punto.</li></ul>
</div>
<div class="artcta">…</div>
<a class="backlink" href="media.html">← Tutti gli articoli</a>

Nota della mascotte

Fulvio dice una cosa sola, di lato, e non interrompe la lettura. Con .right si specchia. Non va dentro le schede: lì diventa un adesivo e distrae.

vive in 20 articoli

Fulvio — «Quattro numeri e una calcolatrice. Meno romantico di un piano marketing, ma almeno non mente.»

<div class="fulvio-aside">
  <img src="sg-assets/mascotte/6t.webp" alt="Fulvio, la mascotte di ConfuMedia"
       width="290" height="322" loading="lazy" decoding="async">
  <div class="bub"><b>Fulvio</b> — «La battuta.»</div>
</div>

Citazione di un caso

.casequote per le parole del cliente, .pull per quelle di chi scrive. Si assomigliano ma dicono due cose diverse: la prima è una testimonianza, la seconda un rilievo tipografico.

<blockquote class="casequote">"Le parole del cliente."</blockquote>

Passi

Cosa succede dopo aver premuto invio. Numerati, brevi, al presente.

<div class="steps">
  <div class="step"><div class="n">1</div>
    <div><b>Titolo</b><br>Cosa succede.</div></div>
</div>

Filtri

Pulsanti veri, non finti pulsanti. Quello attivo porta .on e aria-pressed: lo stato non è affidato al solo colore di sfondo.

<div class="filters">
  <button class="on" type="button" aria-pressed="true">Tutti</button>
  <button type="button" aria-pressed="false">Categoria</button>
</div>

Carosello e lente

Le immagini scorrono da sole; il clic apre la lente. Ogni figure è raggiungibile da tastiera e si apre con Invio: prima erano article con role="button", che non è valido.

<div class="gallery"><div class="gtrack">
  <figure class="gcard" data-big="…-big.webp">
    <img src="….webp" alt="Descrizione" width="448" height="560"
         loading="lazy" decoding="async" draggable="false">
  </figure>
</div></div>

Lente

.glb, si chiude con Esc e riporta il focus alla figura di partenza

alt

descrive il contenuto, non «immagine della gallery»

Finestra modale

Focus intrappolato finché è aperta, Esc per chiudere, focus che torna al pulsante di partenza. Se una di queste tre cose manca, la modale è una trappola.

<div class="modal" id="idModale" role="dialog" aria-modal="true" aria-labelledby="idTitolo">
  <div class="modal-panel">
    <div class="modal-head"><h3 id="idTitolo">Titolo</h3>
      <button class="modal-close" aria-label="Chiudi">×</button></div>
    <div>…</div>
  </div>
</div>

Comparsa all'ingresso

.reveal su un blocco lo fa salire di 18 px quando entra in vista. .reveal-words su un titolo lo compone una parola alla volta e accende quelle elencate in data-highlight. In entrambi i casi il testo è già intero nel DOM: senza JavaScript, o con movimento ridotto, si vede tutto subito.

vive in 36 pagine

<div class="reveal">…</div>

<h2 class="reveal-words" data-highlight="tre,modi,diversi">
  Apri sito, profilo e deck: si presentano in tre modi diversi.
</h2>

La ricetta di una pagina

Nell'ordine, sempre lo stesso: barra, testata, striscia di prove, poi da tre a sei sezioni alternando fondo neutro e .white, una banda di richiamo, il piè di pagina. I blocchi qui sotto sono i pezzi ammessi in mezzo: se serve qualcosa che non c'è, prima si aggiunge qui e poi nelle pagine.

Sezione

Il contenitore di ogni blocco. Tre fondi possibili: neutro, .white per il vetro chiaro, .dim per lo stacco scuro. Dentro sempre un .container, e .reveal per l'entrata in scena.

vive in 39 pagine

<section class="section white"><div class="container reveal">
  <div class="head">
    <div class="eyebrow">Occhiello</div>
    <h2 class="h2">Titolo della sezione. <em>Parte in corsivo.</em></h2>
    <p class="sub">Una riga di contesto, non due.</p>
  </div>
  …
</div></section>

Alternanza

mai due .white di fila: il ritmo si perde

Titoli

un solo h2 per sezione

Movimento

.reveal è disattivato se il sistema chiede meno animazioni

Testata di pagina

Occhiello, h1, sommario, riga di chip e coppia di pulsanti. È l'unico posto dove vive l'h1.

vive in 40 pagine

<header class="phero"><div class="container">
  <div class="eyebrow">Sezione</div>
  <h1>Promessa della pagina</h1>
  <p class="lead">Due righe che spiegano a chi serve e perché.</p>
  <div class="fw-chips"><span class="chip">Tema</span><span class="chip">Tema</span></div>
  <div class="cta-row"><a class="btn primary" href="/prezzi">Scopri il tuo budget</a>
  <a class="btn ghost" href="/contatti">Parliamone</a></div>
</div></header>

Primo pulsante

sempre l'azione principale della pagina

.blob

la macchia di sfondo è decorativa e aria-hidden

Striscia di prove

Il nastro di numeri subito sotto la testata: cinque affermazioni brevi, ognuna con una cifra in grassetto. Scorre, e si ferma con prefers-reduced-motion.

vive in 6 pagine

<div class="proofbar"><div class="proofbar-track">
  <span><b>+23%</b> fatturato con un brand coerente</span>
  <span><b>100%</b> file sorgente consegnati</span>
</div></div>

Lunghezza

da quattro a sei voci: sotto sembra vuoto, sopra diventa rumore

Duplicazione

la copia per il ciclo è aria-hidden

Numeri editoriali

La griglia infografica: icona sottile, cifra monumentale, didascalia. Senza riquadri e senza bordi — i numeri si leggono, non si incorniciano. data-count fa partire il conteggio all'ingresso.

vive in 2 pagine + i case study

<div class="statstrip nums reveal">
  <div class="stat"><div class="sic"><svg …></svg></div>
    <b data-count="20" data-suffix="M">20M</b>
    <span>account raggiunti / mese</span></div>
</div>

Quante

tre o quattro celle, mai cinque

Cifra

una unità sola per cella (M, k+, %, anni)

Conteggio

salta se il sistema chiede meno animazioni

Griglia di servizi

Tre schede numerate con occhiello, titolo, promessa e link con freccia. È l'ossatura di ogni pagina di offerta.

vive in 7 pagine

<div class="grid g3">
  <div class="svc"><div class="svchead"><span class="no">01</span></div>
    <h4>Nome del servizio</h4><p>Cosa risolve, in una riga.</p>
    <a class="lnk arrow" href="/marketing">Esplora</a></div>
</div>

Numerazione

progressiva e mai saltata

Rottura

una colonna sola sotto 760 px

Galleria a nastro

Il carosello dei contenuti: 30 tessere (15 immagini duplicate) che scorrono all'infinito, rallentano al passaggio del mouse e aprono la versione grande in una lightbox. Identica su home, media e case study.

vive in 4 pagine

<div class="gallery" id="gal"><div class="gtrack" id="gtrack">
  <figure class="gcard" data-big="sg-assets/…/c01-big.webp">
    <img src="sg-assets/…/c01.webp" alt="Contenuto ConfuMedia"
         loading="lazy" width="512" height="640" decoding="async">
  </figure>
  …
</div></div>
<div class="glb" id="glb" hidden></div>

Tessere

30 esatte, altezza 280 px, gap 16 px

Larghezza

a tutto schermo con margin-left:calc(50% - 50vw)

Velocità

guidata da cm.js; il mouse la dimezza

Immagini

sempre width/height: niente salti di layout

Muro di citazioni

Le frasi che ruotano una alla volta, con i pallini di posizione. La citazione è testo, non immagine: si indicizza e si legge con lo screen reader.

vive in home

<div class="vbx"><span class="vlab">Come la pensiamo</span>
  <div class="vqwrap" id="vqwrap">
    <blockquote class="vq on"><p>La frase.</p><cite>L'ETICHETTA IN MAIUSCOLO</cite></blockquote>
  </div>
  <div class="vdots" id="vdots"></div>
</div>

cite

tutto maiuscolo, è un'etichetta e non una fonte

Rotazione

si ferma al passaggio del mouse e con la tastiera

Barre di confronto

Un dato per riga: etichetta, valore, barra proporzionale via --w. Serve quando i numeri vanno confrontati fra loro, non celebrati.

vive in 3 pagine

<div class="bars"><div class="bar-row">
  <div class="bar-head"><span class="bar-label">Etichetta</span><span class="bar-value">+23%</span></div>
  <div class="bar-track"><div class="bar-fill" style="--w:92%"></div></div>
</div></div>

Valore

sempre scritto anche in cifre: la barra da sola non è accessibile

Larghezza

--w in percentuale, mai in pixel

Schede a linguette

Un pannello per volta, con icona nella linguetta. Le linguette sono button, non link: non cambiano pagina.

vive in 5 pagine

<div class="tabs">
  <div class="tablist" aria-label="Cosa consegniamo">
    <button><span class="ti" aria-hidden="true"><svg …></svg></span>Posizionamento</button>
  </div>
  <div class="tabpanel">…</div>
</div>

Tastiera

frecce per cambiare pannello, gestite da cm-ui.js

Quante

da tre a cinque linguette

Fisarmonica

Le domande frequenti. Ogni voce è un button con il segno che ruota; il corpo si apre in altezza, non in opacità.

vive in 8 pagine

<div class="acc">
  <button>La domanda?<span class="ic">+</span></button>
  <div class="body"><div class="in"><p>La risposta, corta.</p></div></div>
</div>

Apertura

una alla volta non è obbligatoria: si possono tenere aperte più voci

Dati strutturati

le FAQ della pagina finiscono anche in FAQPage JSON-LD

Larghezza

massimo 820 px, altrimenti le righe diventano illeggibili

Espansione

Il pulsante che carica altre schede senza cambiare pagina. Il contenuto in più è già nel markup con .hide: resta indicizzabile.

vive in 8 pagine

<div class="rcard hide">…</div>
<div class="expand"><button class="btn ghost">Carica altre risorse</button></div>

SEO

niente caricamento via fetch: le schede nascoste sono nell'HTML

Etichetta

dice cosa arriva, non «Mostra altro»

Banda di richiamo

Il riquadro punteggiato di fine sezione: titolo, una riga, un pulsante. È il modo standard di chiudere un discorso.

vive in 32 pagine

<div class="band dots" style="text-align:center">
  <h2>La domanda che il lettore si sta facendo.</h2>
  <p>Una riga di risposta.</p>
  <a class="btn primary" href="/contatti">Parlaci del tuo progetto</a>
</div>

Uno per pagina

due bande di seguito annullano l'effetto

Pulsante

uno solo, primario

Blocco di contatto

La banda con copia a sinistra e modulo a destra. Il modulo passa da cm-forms.js: validazione, messaggi d'errore, filtro anti-bot e consenso privacy.

vive in home e contatti

<div class="band dots leadband"><div class="leadgrid">
  <div class="leadcopy">
    <div class="eyebrow">Parliamone</div>
    <h2>Dicci dove sei bloccato.</h2>
    <ul class="leadticks"><li>Prima call di 30 minuti</li></ul>
  </div>
  <form class="leadform" data-cm-form novalidate method="POST"
        action="https://formsubmit.co/…">…</form>
</div></div>

Campi

quattro al massimo: ogni campo in più costa richieste

Consenso

casella non pre-spuntata, con link all'informativa

Conferma

.form-ok in role="status", senza cambio pagina

Impaginato dell'articolo

Il corpo dei venti articoli: briciole, corpo a colonna stretta, inciso della mascotte, virgolettato in evidenza, richiamo finale e ritorno all'archivio.

vive in 21 pagine

<div class="bcrumb"><a href="/">Home</a> / <a href="/media">Media</a> / Titolo</div>
<div class="article-body">
  <p>…</p>
  <div class="fulvio-aside"><img src="sg-assets/mascotte/6t.webp" alt="Fulvio, la mascotte di ConfuMedia" width="290" height="322" loading="lazy">
    <div class="bub"><b>Fulvio</b> — «Il commento fuori dai denti.»</div></div>
  <p class="pull">La frase che vale il tempo di lettura.</p>
</div>
<div class="artcta"><div class="band dots">…</div>
  <a class="backlink" href="/media">← Tutti gli articoli</a></div>

Misura

colonna di lettura, non a tutta pagina

.backlink

ha già la freccia nel testo: niente .arrow

Mascotte

una sola volta per articolo, a metà lettura