AISC · Guida agli stili Elementor

Testi e documenti

Riquadri informativi, intestazioni di documento e articoli numerati: tutto ciò che serve per statuti, regolamenti e pagine di testo lungo.

.aisc-info copiato

Globale · tutte le pagine

Riquadro informativo con barra laterale blu — per note, avvisi o precisazioni dentro un testo.

Nota: le iscrizioni chiudono una settimana prima dell’inizio dei lavori.

Per richieste dell’ultimo minuto scrivere alla segreteria organizzativa.

CSS

.aisc-info {
  border-left: 4px solid #2f6fb0;
  background: #eef5fb;
  padding: 22px 28px;
  font-family: Georgia, serif;
}
.aisc-info p { margin: 0 0 10px; line-height: 1.8; font-size: 1rem; color: #1c3a52; }
.aisc-info p:last-child { margin-bottom: 0; }

.aisc-eyebrow · aisc-page-title · aisc-subtitle copiato

Globale · tutte le pagine

Intestazione di un documento (regolamenti, statuti, pagine dei premi): tre widget Titolo uno sotto l’altro, nella stessa colonna. Nel primo scrivi l’etichetta (classe aisc-eyebrow), nel secondo il titolo della pagina (classe aisc-page-title, livello H1), nel terzo, se serve, il sottotitolo (classe aisc-subtitle). La colonna diventa da sola il blocco centrato con il filetto nero sotto.

Associazione Italiana di Scienze Cognitive

Regolamento

Governing Rules

intestazione documento (essenziale)

/* la colonna che contiene il titolo diventa il blocco centrato */
.elementor-column:has(> .elementor-widget-wrap > .aisc-page-title) {
  text-align: center;
  padding: 36px 20px 32px;
  border-bottom: 3px solid #111;
}
.aisc-eyebrow .elementor-heading-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #c0392b;
}
.aisc-page-title .elementor-heading-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #111;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.aisc-subtitle .elementor-heading-title {
  font-family: Georgia, serif;
  font-size: .85rem;
  color: #888;
  letter-spacing: .12em;
  text-transform: uppercase;
}

ⓘ

Testo puro: nei widget si scrive solo testo (al massimo grassetto, corsivo, elenchi e link dalla barra). Ogni pezzo con uno stile diverso è un widget a sé, con la classe nel campo Avanzato → Classi CSS; quando i pezzi formano una card o una riga, la classe del componente va sul contenitore (la colonna o la Sezione interna).

.aisc-art-badge · aisc-art-title copiato

Globale · tutte le pagine

Intestazione di un articolo fatta con due widget Titolo, uno sotto l’altro: nel primo scrivi solo “Art. 15” (classe aisc-art-badge, diventa il badge rosso), nel secondo solo il titolo, es. “Rinvio” (classe aisc-art-title, diventa maiuscolo nero). Solo testo puro, nessun codice: lo stile arriva tutto dal campo Classi CSS. Per un nuovo articolo duplica i due widget e cambia i testi (il numero si scrive a mano).

Art. 15Rinvio

.aisc-art-badge · .aisc-art-title

.aisc-art-badge .elementor-heading-title {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: #c0392b;
  padding: 4px 10px;
}
.aisc-art-title .elementor-heading-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.aisc-article-* · 3 classi copiato

Globale · tutte le pagine

Il set per documenti “ad articoli” (regolamenti, statuti): paragrafi giustificati, un elenco a lettere ed eventuali box-regola in evidenza. L’intestazione dell’articolo (“Art. 7” + titolo) si fa con i due widget Titolo aisc-art-badge + aisc-art-title della card sopra. Usato su Governing Rules.

ⓘ

“Art. 1”, “Art. 2″… come fa a essere in progressione? Non lo fa da sé: non c’è un contatore automatico. Ogni numero è testo scritto a mano nel widget Titolo aisc-art-badge di quell’articolo. Se aggiungi, togli o sposti un articolo, i numeri successivi vanno corretti a mano. È voluto: permette anche articoli come “Art. 4-bis”. Per un nuovo articolo conviene duplicare i due Titoli di un articolo esistente e cambiare i testi.

L’Assemblea Ordinaria dei Soci è convocata in via ordinaria dal Presidente almeno una volta all’anno, d’intesa con il Consiglio Direttivo.

aisc-article-body (Editor di testo): solo paragrafi normali, il CSS li giustifica.

.aisc-article-body

.aisc-article-body p {
  font-family: Georgia, serif;
  line-height: 1.85;
  font-size: .97rem;
  margin: 0 0 14px;
  text-align: justify;
  color: #2c2c2c;
}
.aisc-article-body p:last-child { margin-bottom: 0; }

Sede delle elezioni. Le elezioni si svolgono di norma nel corso di un’Assemblea Ordinaria…
Validità delle elezioni. Tutte le elezioni si svolgono a scrutinio segreto…

aisc-article-sublist (Editor di testo): un normale elenco numerato (pulsante della barra). Le lettere a) b) c) le mette il CSS da solo e si aggiornano se aggiungi, togli o sposti una voce. Il grassetto iniziale di ogni voce è facoltativo.

.aisc-article-sublist

.aisc-article-sublist ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: aiscsub;
}
.aisc-article-sublist ol > li {
  counter-increment: aiscsub;
  position: relative;
  padding: 12px 0 12px 34px;
  border-top: 1px solid #efefef;
}
.aisc-article-sublist ol > li:first-child {
  border-top: none;
  padding-top: 0;
}
.aisc-article-sublist ol > li::before {
  content: counter(aiscsub, lower-alpha) ")";
  position: absolute;
  left: 0;
  color: #c0392b;
  font-weight: 700;
}

Le votazioni dell’Assemblea Ordinaria avvengono a maggioranza qualificata dei 2/3 dei partecipanti nei seguenti casi:

Approvazione e modifiche dello Statuto
Scioglimento dell’Associazione

aisc-article-rule (Editor di testo): un paragrafo d’introduzione e, se servono, i casi come elenco puntato normale (pulsante elenco della barra), non con i pallini scritti a mano.

.aisc-article-rule

.aisc-article-rule {
  padding: 12px 18px;
  background: #fdf5f5;
  border-left: 3px solid #c0392b;
  font-size: .93rem;
  line-height: 1.75;
  font-family: Georgia, serif;
}
.aisc-article-rule p { margin: 0 0 6px; }
.aisc-article-rule ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.aisc-article-rule li { margin: 2px 0; }

.aisc-intro-box copiato

Globale · tutte le pagine

Paragrafo introduttivo con barra rossa a sinistra, testo in Cormorant Garamond. Stessa idea di aisc-doc-intro ma globale (usabile ovunque, non solo su Statute).

Le seguenti linee guida si applicano all’organizzazione delle conferenze annuali e definiscono i criteri minimi da rispettare.

CSS

.aisc-intro-box { border-left: 4px solid #c0392b; padding: 20px 28px; background: #fafafa; }
.aisc-intro-box p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: .97rem; line-height: 1.85; color: #444; }

Classi della pagina Statute

Nate per /association/statute/ — per ora funzionano solo lì. Se servono altrove si “globalizzano” in due minuti.

.aisc-doc-intro copiato

Solo pagina Statute

Il riquadro di apertura con barra rossa — introduzione/riassunto in cima alla pagina.

Lo Statuto dell’AISC definisce la natura, le finalità e l’organizzazione dell’Associazione Italiana di Scienze Cognitive.

Il documento è disponibile per la consultazione e il download in formato PDF.

CSS

/* attivo solo sulla pagina Statute */
body.elementor-page-99 .aisc-doc-intro {
  border-left: 4px solid #c0392b;
  padding: 22px 28px;
  background: #fafafa;
  font-family: Georgia, serif;
}
body.elementor-page-99 .aisc-doc-intro p { margin: 0 0 10px; line-height: 1.8; font-size: 1rem; color: #2c2c2c; }
body.elementor-page-99 .aisc-doc-intro p:last-child { margin-bottom: 0; }

.aisc-doc-title copiato

Solo pagina Statute

Etichetta rossa in maiuscolo per introdurre una nuova sezione della pagina.

ⓘ

Perché funziona solo su un widget Intestazione? La classe la scrivi tu sul widget, ma la regola CSS colora nello specifico il testo che Elementor genera al suo interno con la classe .elementor-heading-title — ed esiste solo nei widget “Intestazione” (Heading). Su un Editor di testo o un Bottone quell’elemento interno non c’è, quindi la classe non farebbe nulla.

Documento ufficiale

CSS

body.elementor-page-99 .aisc-doc-title .elementor-heading-title {
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c0392b;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

.aisc-doc-icon + 3 altre copiato

Solo pagina Statute

Il “box download”: si costruisce con 4 widget messi in riga (icona · titolo+descrizione · bottone), ognuno con la sua classe. Vanno usati insieme, non da soli.

ⓘ

Stesso meccanismo della classe qui sopra: aisc-doc-icon, aisc-doc-pdf-title e aisc-doc-pdf-desc vanno su widget Intestazione (stilano .elementor-heading-title al loro interno); aisc-doc-btn va sul widget Bottone (stila .elementor-button al suo interno). Su un widget diverso da quello previsto, non succede nulla.

📄 Statuto AISC Associazione Italiana di Scienze Cognitive — Documento ufficiale (PDF) Scarica PDF

.aisc-doc-icon — widget Heading, colonna 1

body.elementor-page-99 .aisc-doc-icon .elementor-heading-title { font-size: 2.6rem; line-height: 1; text-align: center; }

.aisc-doc-pdf-title — widget Heading, colonna 2 (prima riga)

body.elementor-page-99 .aisc-doc-pdf-title .elementor-heading-title {
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
  font-size: 1rem; font-weight: 700; color: #1a1a1a; margin-bottom: 4px;
}

.aisc-doc-pdf-desc — widget Heading, colonna 2 (seconda riga)

body.elementor-page-99 .aisc-doc-pdf-desc .elementor-heading-title {
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
  font-size: .85rem; font-weight: 400; color: #666;
}

.aisc-doc-btn — widget Bottone, colonna 3

body.elementor-page-99 .aisc-doc-btn { text-align: right; }
body.elementor-page-99 .aisc-doc-btn .elementor-button {
  background: #c0392b; border: 2px solid #c0392b; color: #fff; border-radius: 0;
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif; font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 12px 30px;
}
body.elementor-page-99 .aisc-doc-btn .elementor-button:hover { background: #922b21; border-color: #922b21; }

Guida aggiornata mano a mano che si aggiungono nuove classi. Il CSS mostrato è quello attivo sul sito (Code Snippets → “AISC — Classi di stile riutilizzabili”, “AISC — Classi: iscrizione, dati e tabelle” e i layout delle singole pagine). Sorgenti in aisc-guida-stili/ (uno sections/<sezione>.html per pagina).