Iscrizione, dati e tabelle

Titolo di sezione: piccolo, rosso, tutto maiuscolo e con un filetto sotto. Va sul widget Titolo (non su un Editor di testo), così resta un vero H2 per la struttura della pagina.

.aisc-section-title .elementor-heading-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #c0392b;
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 10px;
  margin: 0 0 16px;
}

La scheda scura con i dati bancari. È fatta come la tabella: ogni riga della scheda è una Sezione interna, ogni dato è una colonna con classe aisc-data-item, e dentro la colonna ci sono i pezzi del dato, uno per widget. Una riga con una colonna = dato largo; una riga con due colonne = due dati affiancati. La colonna della sezione che contiene le righe diventa da sola la scheda nera.

I pezzi di un dato (dentro la colonna aisc-data-item):

• aisc-data-label — Titolo: l’etichetta piccola rossa (“IBAN”)
• aisc-data-value — Editor di testo: il valore, bianco (il grassetto resta grassetto)
• aisc-data-hint — Editor di testo: facoltativo: la nota in corsivo grigio sotto il valore

Modificatori da aggiungere a aisc-data-value, separati da uno spazio:

• aisc-data-mono — valore: carattere a spaziatura fissa (numeri di conto, codici)
• aisc-data-box — valore: valore dentro un riquadro evidenziato (IBAN, causale)
• aisc-data-copy — valore: aggiunge da solo il pulsante “copia” accanto al valore (copia il testo senza spazi, ideale per l’IBAN)

Le operazioni più comuni:

1. Cambiare un dato: clicchi il valore sulla pagina e riscrivi il testo.
2. Aggiungere un dato largo: tasto destro sulla riga di un dato largo (o nel Navigatore) → Duplica, poi cambi etichetta e valore.
3. Affiancare due dati: in una riga, tasto destro sulla colonna del dato → Duplica. Le due colonne si dividono la riga a metà.
4. Togliere la nota: elimini il widget aisc-data-hint; per aggiungerla, duplichi il valore e cambi la classe in aisc-data-hint.

/* la colonna che contiene le righe = la scheda nera */
.elementor-top-section > .elementor-container > .elementor-column:has(.aisc-data-item) {
  background: #111;
  border-top: 4px solid #c0392b;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
.elementor-top-section > .elementor-container > .elementor-column:has(.aisc-data-item) > .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #262626;
}
/* ogni dato è una colonna */
.elementor-column.aisc-data-item {
  background: #161616;
  padding: 22px 26px;
}
.aisc-data-label .elementor-heading-title {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c0392b;
}
.aisc-data-value p {
  font-size: 1rem;
  color: #fff;
}
.aisc-data-hint p {
  font-family: 'Cormorant Garamond', serif;
  font-size: .82rem;
  font-style: italic;
  color: #888;
}
.aisc-data-mono p { font-family: 'SF Mono', Consolas, monospace; }
.aisc-data-box p {
  display: inline-block;
  font-family: 'SF Mono', Consolas, monospace;
  background: rgba(192,57,43,.12);
  padding: 10px 16px;
  border: 1px solid rgba(192,57,43,.35);
}

Avviso breve con bordo rosso a sinistra. L’emoji (📅 🏛️ ✉️…) si scrive semplicemente a inizio testo, come una lettera qualsiasi. Il grassetto diventa nero e in carattere “DM Sans” per far risaltare le parole chiave.

.aisc-callout {
  padding: 16px 20px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-left: 3px solid #c0392b;
}
.aisc-callout p {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: .95rem;
  line-height: 1.75;
  color: #444;
}
.aisc-callout strong {
  font-family: 'DM Sans', sans-serif;
  color: #111;
  font-size: .88em;
}

Le tabelle (tariffe, prezzi, scadenze). Elementor non ha un widget tabella, quindi la tabella è fatta a scatole separate: ogni riga è una Sezione interna, ogni cella è una colonna con dentro un Editor di testo che contiene solo il testo della cella. Clicchi la cella e scrivi: niente codice, niente paragrafi da contare.

Le classi si scrivono sulla Sezione interna, cioè sulla riga: selezioni la riga → Avanzato → Classi CSS.

• aisc-table-head — riga d’intestazione, fondo nero e testo bianco in maiuscolo
• aisc-table-row — riga normale
• aisc-table-row aisc-table-highlight — riga evidenziata, fondo rosato
• aisc-row-note — nota finale in corsivo: è un normale Editor di testo messo sotto l’ultima riga (la classe va sul widget)

Le celle non hanno classi: lo stile dipende dalla posizione della colonna.

• 1ª colonna — la voce, in semigrassetto (il formato Piccolo e il corsivo restano grigi e leggeri)
• 2ª colonna — l’importo, rosso e in grassetto
• dalla 3ª in poi — valori secondari in grigio; un pezzo in corsivo diventa verde (es. il risparmio)
• L’allineamento (sinistra/centro/destra) si cambia sul widget della cella: Contenuto → Allineamento

Le operazioni più comuni:

1. Cambiare un valore: clicchi la cella sulla pagina e riscrivi il testo.
2. Aggiungere una riga: tasto destro sulla maniglia della riga (o nel Navigatore) → Duplica, poi cambi i testi. La copia si porta dietro la classe e le larghezze delle colonne.
3. Togliere una riga: tasto destro sulla riga → Elimina.
4. Spostare una riga: trascinala nel Navigatore.
5. Aggiungere una colonna: in ogni riga, intestazione compresa, tasto destro su una cella → Duplica (la cella copiata ha già il suo Editor di testo), poi cambi il testo. Le colonne devono essere lo stesso numero in tutte le righe.
6. Cambiare la larghezza di una colonna: selezioni la colonna → Layout → Larghezza colonna (%). Va fatto uguale in tutte le righe; c’è anche la versione per il telefono (icona del dispositivo).

/* la colonna che contiene le righe = il bordo della tabella */
.elementor-column:has(> .elementor-widget-wrap > .aisc-table-head) > .elementor-widget-wrap {
  padding: 0;
  border: 1px solid #ebebeb;
}
/* ogni riga resta su una linea, anche su telefono */
.aisc-table-head > .elementor-container, .aisc-table-row > .elementor-container { flex-wrap: nowrap; }
.aisc-table-head { background: #111; }
.aisc-table-head p {
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.aisc-table-row { border-bottom: 1px solid #f0f0f0; }
/* lo stile della cella dipende dalla colonna */
.aisc-table-row .elementor-column:nth-child(1) p {
  font-weight: 600;
  color: #222;
}
.aisc-table-row .elementor-column:nth-child(2) p {
  font-weight: 700;
  color: #c0392b;
}
.aisc-table-row .elementor-column:nth-child(n+3) em {
  color: #2e7d32;
  font-style: normal;
}
.aisc-table-highlight { background: #fdf5f4; }

aisc-note-box (Editor di testo) è un riquadro grigio per istruzioni: un paragrafo e un elenco puntato.

aisc-contact-strip è la fascia nera di contatto in fondo alla pagina. La classe va sulla colonna (Avanzato → Classi CSS); dentro, due Editor di testo:

• aisc-contact-text — Editor di testo: la frase (l’emoji si scrive a inizio testo)
• aisc-contact-link — Editor di testo: il link (nome ed email), inserito con il pulsante link della barra; diventa bianco in grassetto

.aisc-note-box {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  padding: 20px 26px;
}
.aisc-note-box a {
  color: #c0392b;
  text-decoration: none;
}
.aisc-note-box li {
  font-family: 'Cormorant Garamond', serif;
  font-size: .92rem;
  line-height: 1.8;
  color: #555;
}
/* la colonna con la classe diventa la fascia nera */
.aisc-contact-strip {
  padding: 22px 26px;
  background: #111;
  border-top: 3px solid #c0392b;
}
.aisc-contact-strip p {
  font-family: 'Cormorant Garamond', serif;
  font-size: .95rem;
  line-height: 1.7;
  color: #ccc;
}
.aisc-contact-strip a {
  color: #fff;
  text-decoration: none;
}
.aisc-contact-link a { font-weight: 700; }