etna.foundation [STAGING] - User contributions [en]

Template:IntestazionePagine

2026-06-16T23:06:36Z

Cranio is thinking: fallback all'indice generico per i nuovi archivi

<includeonly>{{DISPLAYTITLE:{{{titolo|{{PAGENAME}}}}}}}<span class="namespace-label">in: '''[[{{NAMESPACE}}:Dashboard|{{NAMESPACE}}]]'''</span>{{#ifeq:{{PAGENAME}}|Dashboard||{{#ifexist:Template:Indice {{NAMESPACE}}|{{Indice {{NAMESPACE}}|rail=1}}|{{Indice|rail=1}}}}}}</includeonly>

MediaWiki:Common.css

2026-06-16T23:05:33Z

Cranio is thinking: temi colore del widget indice [TEMI]

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
display:block;
font-size:0.85em;
margin-top:-0.3em;
margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
color:inherit;
}

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
(ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
color: #ffffff;
}
body.ns-3004 #firstHeading::before {
content: "Cineteca Sarda";
display: block;
margin-bottom: .35rem;
font-size: .8rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
display: none;
}
/* === [NS-BRAND] fine === */

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 300px;
gap: 3.5rem;
align-items: start;
}
.archivio-editoriale .art-main {
min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
margin: 0 0 .7rem;
font-size: .9rem;
letter-spacing: .04em;
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
border: 0;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
margin: 0;
max-width: none;
}
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
margin-bottom: 0;
}
.archivio-editoriale .lead strong {
color: var( --color-base, #fff );
font-weight: 600;
}

/* Riga "Prototipo di consultazione": blocco in evidenza (accent a sinistra) */
.archivio-editoriale .ce-prototipo {
margin: 1.8rem 0 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var( --ns-accent );
}
.archivio-editoriale .ce-prototipo-eti {
font-size: .92rem;
font-weight: 600;
color: #ffffff;
margin-bottom: .2rem;
}
.archivio-editoriale .ce-prototipo p {
margin: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
margin: 0 0 .4rem;
padding-bottom: .55rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
padding: .7rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
border-bottom: 0;
}
.archivio-editoriale .idx-eti {
margin-bottom: .2rem;
font-size: .98rem;
font-weight: 600;
color: #ffffff;
}
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
font-weight: 500;
text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
.archivio-editoriale .art-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
Indice d'archivio (sorgente unica {{Indice <NS>}}).
Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
(sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
Citizen (--font-size-*) per armonia con la TOC.
========================================================== */

.archivio-indice {
font-size: var( --font-size-small, .875rem );
line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
float: right;
width: 280px;
margin: .2rem 0 1.4rem 2rem;
padding-left: 1.4rem;
border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
.archivio-indice.ai-rail {
float: none;
width: auto;
margin: 0 0 1.6rem;
padding-left: 0;
border-left: 0;
}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
float: none;
width: auto;
margin: 0 0 1rem;
padding: 0;
border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
padding-bottom: .45rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
font-size: var( --font-size-x-small, .8125rem );
text-transform: uppercase;
letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
cursor: pointer;
user-select: none;
line-height: 1;
padding: .1rem .25rem;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
content: "▾";
display: inline-block;
font-size: .9em;
transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
display: none;
}
.archivio-indice .ai-toggle:hover {
color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
padding: .5rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
border-bottom: 0;
}
.archivio-indice .ai-eti {
margin-bottom: .12rem;
font-size: var( --font-size-small, .875rem );
font-weight: 600;
color: #ffffff;
}
.archivio-indice .ai-voci {
font-size: var( --font-size-small, .875rem );
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
color: #e7b142;
font-weight: 500;
text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
text-decoration: underline;
}

/* Riga licenza (sempre visibile, anche con indice chiuso) */
.archivio-indice .ai-licenza {
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
font-size: var( --font-size-x-small, .8125rem );
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}
.archivio-indice .ai-licenza a,
.archivio-indice .ai-licenza a:visited {
color: #e7b142;
text-decoration: none;
}
.archivio-indice .ai-licenza a:hover {
text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
color: #e7b142;
font-weight: 600;
}

/* Indice a LISTE native (variante editabile come elenco puntato in VE):
"* sezione" + "** pagina". Stesso look dei blocchi a div .ai-eti/.ai-voci.
Va nel blocco [INDICE] di Common.css. */
.archivio-indice .ai-body ul {
list-style: none;
margin: 0;
padding: 0;
}
.archivio-indice .ai-body > ul > li {
margin: 0 0 .8rem;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-body > ul > li > ul {
margin: .35rem 0 0;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.archivio-indice .ai-body > ul > li > ul > li {
margin: .12rem 0;
font-size: .92rem;
line-height: 1.45;
}
.archivio-indice .ai-body > ul > li > ul a,
.archivio-indice .ai-body > ul > li > ul a:visited {
color: var( --ns-accent, #e7b142 );
text-decoration: none;
}
.archivio-indice .ai-body > ul > li > ul a:hover {
text-decoration: underline;
}

/* link modifica menu */
.archivio-indice .ai-modifica {
margin-top: .6rem;
font-size: .76rem;
}
.archivio-indice .ai-modifica a,
.archivio-indice .ai-modifica a:visited {
color: var( --color-base--subtle, #b8b8b8 );
text-decoration: none;
}
.archivio-indice .ai-modifica a:hover {
text-decoration: underline;
}
/* testata cliccabile per intero */
.archivio-indice .ai-testata {
cursor: pointer;
}
/* === [INDICE] fine === */

/* === [HOME] inizio === */
/* ==========================================================
HOMEPAGE CINETECA DELL'ETNA
Pagina di test: Test_home
========================================================== */

/* Nasconde titolo standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-header,
body.page-Test_home .citizen-body-header,
body.page-Test_home .mw-body-header,
body.page-Test_home #firstHeading,
body.page-Test_home .firstHeading,
body.page-Test_home .mw-first-heading,
body.page-Test_home .mw-page-title-main {
display: none !important;
}

/* Nasconde colonna destra standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-sidebar,
body.page-Test_home .citizen-toc,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-lastmod,
body.page-Test_home .citizen-page-actions-more,
body.page-Test_home .toc,
body.page-Test_home #toc {
display: none !important;
}

/* Nasconde informazioni ultima modifica solo nella pagina Test_home */

body.page-Test_home .mw-parser-output .printfooter,
body.page-Test_home .mw-parser-output .catlinks,
body.page-Test_home .mw-parser-output .mw-footer-info,
body.page-Test_home .page-info,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-page-footer,
body.page-Test_home .citizen-body-footer,
body.page-Test_home .mw-body-footer,
body.page-Test_home .mw-last-modified,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

/* Allarga lo spazio utile della home dentro Citizen */

body.page-Test_home .citizen-body,
body.page-Test_home .citizen-body-container,
body.page-Test_home .citizen-body-content,
body.page-Test_home .citizen-page-container,
body.page-Test_home .mw-body,
body.page-Test_home .mw-body-content,
body.page-Test_home .mw-parser-output,
body.page-Test_home #bodyContent,
body.page-Test_home #content {
max-width: none !important;
width: 100% !important;
}

body.page-Test_home .citizen-body {
grid-template-columns: minmax(0, 1fr) !important;
}

/* Contenitore generale home */

body.page-Test_home .mw-parser-output .ce-home {
width: min(1300px, calc(100vw - 14rem));
max-width: none !important;
min-height: calc(100vh - 7rem);
margin: 0 auto;
padding: 2rem 0 2rem;
box-sizing: border-box;
overflow-x: hidden;
transform: none;

display: flex;
align-items: center;
}

/* Layout generale: contenuto principale + colonna laterale */

body.page-Test_home .mw-parser-output .ce-home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

/* Colonna laterale editoriale */

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
border-left: 0;
padding-left: 2rem;
}

/* Hero: testo a sinistra, foto verticale a destra */

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
min-width: 0;
align-self: start;
margin-top: 0;
padding-top: 0;
}

/* Occhiello / motto identitario */

body.page-Test_home .mw-parser-output .ce-hero-kicker {
margin-bottom: 1.4rem;
color: var(--color-base, #ffffff);
opacity: 0.72;
font-size: 0.92rem;
line-height: 1.2;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
}

/* Immagine verticale della home: solo foto, nessun box */

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 2;
grid-row: 1;
width: 300px;
height: 450px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
}

body.page-Test_home .mw-parser-output .ce-hero-visual > p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description {
display: block;
width: 300px !important;
height: 450px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
display: block;
width: 300px !important;
height: 450px !important;
max-width: none !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

/* Testo principale hero */

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 0.98;
margin: 0 0 1.5rem;
letter-spacing: -0.03em;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.15rem;
line-height: 1.55;
max-width: 760px;
color: var(--color-base--subtle, #b8b8b8);
}

/* Indice editoriale principale: libero, senza box */

body.page-Test_home .mw-parser-output .ce-home-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
width: 100%;
margin: 0;
padding-top: 0;
border: 0;
}

body.page-Test_home .mw-parser-output .ce-index-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-index-number {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.04em;
}

body.page-Test_home .mw-parser-output .ce-index-title {
margin-bottom: 0.65rem;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 600;
}

/* Index / Federated Archives Alliance / Contatti: rosso Citizen */

body.page-Test_home .mw-parser-output .ce-index-title,
body.page-Test_home .mw-parser-output .ce-index-title a,
body.page-Test_home .mw-parser-output .ce-index-title a:visited {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: none;
}

body.page-Test_home .mw-parser-output .ce-index-title a:hover {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: underline;
}

body.page-Test_home .mw-parser-output .ce-index-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 1rem;
line-height: 1.45;
max-width: 32em;
}

/* Box laterali leggeri, senza delimitazioni */

body.page-Test_home .mw-parser-output .ce-side-box {
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-side-box::before {
content: none;
display: none;
}

body.page-Test_home .mw-parser-output .ce-side-label {
margin-bottom: 0.6rem;
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* Titoli colonna destra: bianchi */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:visited {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.1;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}

body.page-Test_home .mw-parser-output .ce-side-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.95rem;
line-height: 1.45;
}

body.page-Test_home .mw-parser-output .ce-side-link {
margin-top: 0.85rem;
font-size: 0.95rem;
}

/* Link azione colonna destra: bianchi, blu Citizen solo all'hover */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:visited {
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:hover {
color: var(--color-progressive, #36c) !important;
text-decoration: underline !important;
}

/* Footer Citizen visibile e alleggerito solo nella home */

body.page-Test_home #footer {
display: block !important;
margin-top: 1.5rem !important;
padding-top: 0 !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
background: transparent !important;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer-info {
display: block !important;
}

body.page-Test_home #footer-places,
body.page-Test_home #footer-icon,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

body.page-Test_home .citizen-footer-tagline,
body.page-Test_home #footer-tagline,
body.page-Test_home #footer .citizen-footer__tagline {
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer a,
body.page-Test_home #footer a:visited {
color: var(--color-base--subtle, #b8b8b8) !important;
text-decoration: none !important;
}

body.page-Test_home #footer a:hover {
color: var(--color-base, #ffffff) !important;
text-decoration: underline !important;
}

/* ==========================================================
RESPONSIVE
========================================================== */

/* Finestra intermedia:
1. hero ancora a due colonne
2. indice sotto
3. colonna informativa sotto l'indice */

@media (max-width: 1250px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 4rem));
min-height: auto;
margin: 0 auto;
padding: 2rem 0 3rem;
display: block;
}

body.page-Test_home .mw-parser-output .ce-home-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
align-items: start;
margin-bottom: 4.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1 / span 2;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 3;
grid-row: 1;
justify-self: start;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding-left: 0;
border-left: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 4rem;
}
}

/* Finestra più stretta:
hero passa a una colonna, ma ordine resta:
titolo/testo, foto, indice, blocchi informativi */

@media (max-width: 900px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 2rem));
padding: 1.5rem 0 3rem;
}

body.page-Test_home .mw-parser-output .ce-hero {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-bottom: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 300px;
height: 450px;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 300px !important;
height: 450px !important;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: 1fr;
gap: 1.7rem;
}

body.page-Test_home .mw-parser-output .ce-index-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2rem;
border-left: 0;
padding-left: 0;
border-top: 0;
padding-top: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 0;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
line-height: 0.98;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.05rem;
}
}

/* Mobile molto stretto */

@media (max-width: 520px) {
body.page-Test_home .mw-parser-output .ce-home {
width: 100%;
padding: 1rem 0 2.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.3rem, 13vw, 3.3rem);
}

body.page-Test_home .mw-parser-output .ce-hero-visual,
body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 260px !important;
height: 390px !important;
}
}
/* === [HOME] fine === */

/* === [MAPPA] inizio === */
/* Index — sommario della "rivista". Tipografia editoriale CONDIVISA con home e
progetti (occhiello / titolo da prima pagina / lead): vedi la "regola
tipografica" nel README. VE-safe: solo wikitext nativo (liste di definizione
; :), nessun div di layout, niente sezioni espandibili. Stile su body.page-Index. */

body.page-Index #bodyContent,
body.page-Index .mw-parser-output {
max-width: 56rem;
}

/* Titolo della pagina = titolo da prima pagina (come i progetti, .ce-headline) */
body.page-Index #firstHeading {
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* riga d'apertura = lead */
body.page-Index .mw-parser-output > p:first-of-type {
margin: .4rem 0 2.6rem;
max-width: 46rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}

/* ogni sezione è un blocco di lista di definizione; numerazione continua */
body.page-Index .mw-parser-output {
counter-reset: sez;
}
body.page-Index .mw-parser-output dl {
margin: 0 0 2.4rem;
}

/* etichetta di sezione = OCCHIELLO, nel ROSSO della home + numero (richiamo e
stacco visivo tra le sezioni). */
body.page-Index .mw-parser-output dt {
counter-increment: sez;
margin: 0 0 1rem;
font-size: .9rem;
font-weight: 500;
letter-spacing: .04em;
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.page-Index .mw-parser-output dt::before {
content: counter( sez, decimal-leading-zero );
margin-right: .7em;
font-variant-numeric: tabular-nums;
}

/* voce = titolo da prima pagina (ridotto) + descrizione sotto.
Ritmo verticale regolare: il titolo è un BLOCCO con un solo margin; la
descrizione è il testo della dd, con la sua interlinea. */
body.page-Index .mw-parser-output dd {
margin: 0 0 1.4rem;
color: var( --color-base--subtle, #b8b8b8 );
font-size: 1.02rem;
line-height: 1.55;
}
body.page-Index .mw-parser-output dd:last-child {
margin-bottom: 0;
}

/* titolo della voce: BIANCO TIPOGRAFICO, mai bluetto */
body.page-Index .mw-parser-output dd b {
display: block;
margin: 0 0 .35rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.2;
}
body.page-Index .mw-parser-output dd b a,
body.page-Index .mw-parser-output dd b a:visited {
color: #ffffff;
text-decoration: none;
}
body.page-Index .mw-parser-output dd b a:hover {
text-decoration: underline;
}
/* === [MAPPA] fine === */

/* === [DEV] inizio === */
/* ==========================================================
Dev — Dashboard "a riquadri per progetto" (pagina centrale).
Stesso taglio editoriale di CinetecaSarda, ma l'indice è una griglia
di card (riquadri), non il widget nel rail. Wrapper .dev-dash.
Colori dei link: default Citizen (nessun override).
========================================================== */

.dev-dash {
color: var( --color-base, #fff );
}

/* Testata editoriale */
.dev-dash .occhiello {
margin: 0 0 .7rem;
font-size: var( --font-size-x-small, .8125rem );
letter-spacing: .07em;
text-transform: uppercase;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-headline {
margin: 0 0 1rem;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}
.dev-dash .dev-lead {
margin: 0 0 .5rem;
max-width: 64ch;
font-size: 1.1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* Riquadri "a colonne" (masonry): impacchettano senza vuoti verticali */
.dev-dash .dev-griglia {
columns: 290px;
column-gap: 1.3rem;
margin-top: 2rem;
}

/* Riquadro = progetto */
.dev-dash .dev-card {
break-inside: avoid;
margin: 0 0 1.3rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
border-radius: 8px;
background: rgba( 255, 255, 255, .02 );
}
.dev-dash .dev-card-titolo {
margin-bottom: .5rem;
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
}
.dev-dash .dev-card-sub {
margin: .7rem 0 .2rem;
font-size: var( --font-size-xx-small, .75rem );
text-transform: uppercase;
letter-spacing: .07em;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.dev-dash .dev-card li {
padding: .18rem 0;
line-height: 1.4;
font-size: .95rem;
}

/* Pagine centrali dei sotto-progetti (editoriale + indice nel rail): nascondi
il titolo standard di Citizen — l'headline vive nel contenuto (.ce-headline). */
body.page-Dev_Tapescan #firstHeading,
body.page-Dev_Tapescan .mw-page-title-main,
body.page-Dev_TBC #firstHeading,
body.page-Dev_TBC .mw-page-title-main,
body.page-Dev_Robota #firstHeading,
body.page-Dev_Robota .mw-page-title-main {
display: none !important;
}

/* Dev: link dell'indice e dell'editoriale col colore di DEFAULT di Citizen
(non il giallo brand di CinetecaSarda, hardcodato in [INDICE]). Specificità
più alta → vince senza toccare CinetecaSarda. */
body.ns-3012 .archivio-indice .ai-voci a,
body.ns-3012 .archivio-indice .ai-voci a:visited,
body.ns-3012 .archivio-indice .ai-licenza a,
body.ns-3012 .archivio-indice .ai-licenza a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
body.ns-3012 .archivio-editoriale {
--ns-accent: var( --color-link, var( --color-progressive, #36c ) );
}

/* Testo introduttivo (lead) dei sotto-progetti Dev: colore di DEFAULT di
Citizen (testo base), non il grigio "subtle" editoriale di CinetecaSarda. */
body.ns-3012 .archivio-editoriale .lead p {
color: var( --color-base, #fff );
}
/* === [DEV] fine === */

/* === [NS-MALASTRADA] inizio === */
/* malastradafilm (ns 3010): identità ACROMATICA (bianco/nero), come il sito
malastradafilm.com — niente accent colorato (al contrario del giallo
CinetecaSarda). Link dell'indice grigio tipografico, voce TOC attiva bianca. */

body.ns-3010 .archivio-editoriale {
--ns-accent: var( --color-base, #fff );
}
/* link dell'indice (sia struttura a div .ai-voci, sia elenco puntato .ai-body) */
body.ns-3010 .archivio-indice .ai-body a,
body.ns-3010 .archivio-indice .ai-body a:visited,
body.ns-3010 .archivio-indice .ai-licenza a,
body.ns-3010 .archivio-indice .ai-licenza a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}
/* titoli di sezione del menu (Idee, Opere e azioni, Scritti) nel ROSSO della home */
body.ns-3010 .archivio-indice .ai-body > ul > li {
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* look minimale acromatico: via solo le LINEE del widget (bordo verticale
sinistro del float e riga sotto «Dashboard»), mantenendo lo stacco dal testo
— quindi border-left:0 ma padding-left invariato. */
body.ns-3010 .archivio-indice.ai-rail {
border-left: 0;
}
body.ns-3010 .archivio-indice .ai-testata {
border-bottom: 0;
}

/* Dashboard: il titolo Citizen è nascosto (l'headline vive nella testata-template);
il racconto è scritto come testo nativo della pagina → lo stiliamo come "lead". */
body.page-Malastradafilm_Dashboard #firstHeading,
body.page-Malastradafilm_Dashboard .mw-page-title-main {
display: none !important;
}
body.page-Malastradafilm_Dashboard .mw-parser-output > p {
max-width: 42rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
/* === [NS-MALASTRADA] fine === */

/* === [NS-OPERAFILOSOFICA] inizio === */
/* Opera Filosofica Nomade (ns 3006): stessi colori di malastradafilm —
ACROMATICO (niente accent colorato), titoli di sezione del menu nel ROSSO
della home, niente linee nel widget. */
body.ns-3006 .archivio-editoriale {
--ns-accent: var( --color-base, #fff );
}
body.ns-3006 .archivio-indice .ai-body a,
body.ns-3006 .archivio-indice .ai-body a:visited,
body.ns-3006 .archivio-indice .ai-licenza a,
body.ns-3006 .archivio-indice .ai-licenza a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}
body.ns-3006 .archivio-indice .ai-body > ul > li {
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.ns-3006 .archivio-indice.ai-rail {
border-left: 0;
}
body.ns-3006 .archivio-indice .ai-testata {
border-bottom: 0;
}
/* Dashboard: titolo Citizen nascosto (headline nel template), racconto = lead */
body.page-Operafilosoficanomade_Dashboard #firstHeading,
body.page-Operafilosoficanomade_Dashboard .mw-page-title-main {
display: none !important;
}
body.page-Operafilosoficanomade_Dashboard .mw-parser-output > p {
max-width: 42rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
/* === [NS-OPERAFILOSOFICA] fine === */

/* === [TEMI] inizio === */
/* Temi colore del widget indice (classe .tema-<nome> sul widget, scelta
per-archivio via la pagina <NS>:Tema; default "acromatico"). */

/* acromatico (come malastradafilm/Opera): link grigi, titoli sezione rossi, niente linee */
.archivio-indice.tema-acromatico .ai-body a,
.archivio-indice.tema-acromatico .ai-body a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice.tema-acromatico .ai-body > ul > li {
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
.archivio-indice.tema-acromatico.ai-rail {
border-left: 0;
}
.archivio-indice.tema-acromatico .ai-testata {
border-bottom: 0;
}

/* giallo (come CinetecaSarda): link gialli, titoli sezione grigi */
.archivio-indice.tema-giallo .ai-body a,
.archivio-indice.tema-giallo .ai-body a:visited {
color: #e7b142;
}
.archivio-indice.tema-giallo .ai-body > ul > li {
color: var( --color-base--subtle, #b8b8b8 );
}

/* blu (default Citizen): link blu, titoli sezione grigi */
.archivio-indice.tema-blu .ai-body a,
.archivio-indice.tema-blu .ai-body a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
.archivio-indice.tema-blu .ai-body > ul > li {
color: var( --color-base--subtle, #b8b8b8 );
}
/* === [TEMI] fine === */

Template:Indice

2026-06-16T23:05:30Z

Cranio is thinking: indice d'archivio GENERICO (deriva dal namespace, legge Menu/Tema)

<includeonly>{{#ifexist:{{NAMESPACE}}:Menu|<div class="archivio-indice tema-{{#ifexist:{{NAMESPACE}}:Tema|{{{{NAMESPACE}}:Tema}}|acromatico}} {{#if:{{{rail|}}}|ai-rail|}}">
<div class="ai-testata">[[{{NAMESPACE}}:Dashboard|Dashboard]]<span class="ai-toggle" role="button" tabindex="0"></span></div>
<div class="ai-body">
{{{{NAMESPACE}}:Menu}}
</div>
<div class="ai-modifica plainlinks">[{{fullurl:{{NAMESPACE}}:Menu|veaction=edit}} ✎ Modifica il menu]</div>
</div>|}}</includeonly><noinclude>
'''Indice d'archivio GENERICO.''' Non serve più una cornice per ogni archivio: questo template si
adatta da solo al namespace della pagina. Mostra il widget '''solo se esiste <code><NS>:Menu</code>'''.

Per allestire un archivio bastano '''due pagine''':
* <code><NS>:Menu</code> — l'elenco puntato delle voci (<code>*</code> sezione, <code>**</code> pagina);
* <code><NS>:Dashboard</code> — <code><nowiki>{{Indice|rail=1}}{{Dashboard archivio|occhiello=…|titolo=…}}</nowiki></code> + il racconto come testo nativo.

'''Colore''': crea <code><NS>:Tema</code> con una sola parola — <code>acromatico</code> (default),
<code>giallo</code>, <code>blu</code>. (Vedi i temi in <code>MediaWiki:Common.css</code>, blocco <code>[TEMI]</code>.)

<templatedata>
{
"description": "Indice d'archivio generico: si adatta al namespace, legge <NS>:Menu (le voci) e <NS>:Tema (il colore). rail=1 lo colloca nel rail (già passato da IntestazionePagine).",
"params": { "rail": { "label": "Rail", "type": "string", "required": false } }
}
</templatedata>
[[Category:Template di struttura]]
</noinclude>

MediaWiki:Common.css

2026-06-16T22:19:05Z

Cranio is thinking: Opera: colori come malastradafilm (acromatico + titoli sezione rossi, niente linee)

MediaWiki:Common.css

2026-06-16T22:16:10Z

Cranio is thinking: brand viola Opera Filosofica Nomade [NS-OPERAFILOSOFICA]

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
display:block;
font-size:0.85em;
margin-top:-0.3em;
margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
color:inherit;
}

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
(ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
color: #ffffff;
}
body.ns-3004 #firstHeading::before {
content: "Cineteca Sarda";
display: block;
margin-bottom: .35rem;
font-size: .8rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
display: none;
}
/* === [NS-BRAND] fine === */

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 300px;
gap: 3.5rem;
align-items: start;
}
.archivio-editoriale .art-main {
min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
margin: 0 0 .7rem;
font-size: .9rem;
letter-spacing: .04em;
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
border: 0;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
margin: 0;
max-width: none;
}
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
margin-bottom: 0;
}
.archivio-editoriale .lead strong {
color: var( --color-base, #fff );
font-weight: 600;
}

/* Riga "Prototipo di consultazione": blocco in evidenza (accent a sinistra) */
.archivio-editoriale .ce-prototipo {
margin: 1.8rem 0 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var( --ns-accent );
}
.archivio-editoriale .ce-prototipo-eti {
font-size: .92rem;
font-weight: 600;
color: #ffffff;
margin-bottom: .2rem;
}
.archivio-editoriale .ce-prototipo p {
margin: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
margin: 0 0 .4rem;
padding-bottom: .55rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
padding: .7rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
border-bottom: 0;
}
.archivio-editoriale .idx-eti {
margin-bottom: .2rem;
font-size: .98rem;
font-weight: 600;
color: #ffffff;
}
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
font-weight: 500;
text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
.archivio-editoriale .art-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
Indice d'archivio (sorgente unica {{Indice <NS>}}).
Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
(sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
Citizen (--font-size-*) per armonia con la TOC.
========================================================== */

.archivio-indice {
font-size: var( --font-size-small, .875rem );
line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
float: right;
width: 280px;
margin: .2rem 0 1.4rem 2rem;
padding-left: 1.4rem;
border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
.archivio-indice.ai-rail {
float: none;
width: auto;
margin: 0 0 1.6rem;
padding-left: 0;
border-left: 0;
}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
float: none;
width: auto;
margin: 0 0 1rem;
padding: 0;
border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
padding-bottom: .45rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
font-size: var( --font-size-x-small, .8125rem );
text-transform: uppercase;
letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
cursor: pointer;
user-select: none;
line-height: 1;
padding: .1rem .25rem;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
content: "▾";
display: inline-block;
font-size: .9em;
transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
display: none;
}
.archivio-indice .ai-toggle:hover {
color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
padding: .5rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
border-bottom: 0;
}
.archivio-indice .ai-eti {
margin-bottom: .12rem;
font-size: var( --font-size-small, .875rem );
font-weight: 600;
color: #ffffff;
}
.archivio-indice .ai-voci {
font-size: var( --font-size-small, .875rem );
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
color: #e7b142;
font-weight: 500;
text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
text-decoration: underline;
}

/* Riga licenza (sempre visibile, anche con indice chiuso) */
.archivio-indice .ai-licenza {
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
font-size: var( --font-size-x-small, .8125rem );
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}
.archivio-indice .ai-licenza a,
.archivio-indice .ai-licenza a:visited {
color: #e7b142;
text-decoration: none;
}
.archivio-indice .ai-licenza a:hover {
text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
color: #e7b142;
font-weight: 600;
}

/* Indice a LISTE native (variante editabile come elenco puntato in VE):
"* sezione" + "** pagina". Stesso look dei blocchi a div .ai-eti/.ai-voci.
Va nel blocco [INDICE] di Common.css. */
.archivio-indice .ai-body ul {
list-style: none;
margin: 0;
padding: 0;
}
.archivio-indice .ai-body > ul > li {
margin: 0 0 .8rem;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-body > ul > li > ul {
margin: .35rem 0 0;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.archivio-indice .ai-body > ul > li > ul > li {
margin: .12rem 0;
font-size: .92rem;
line-height: 1.45;
}
.archivio-indice .ai-body > ul > li > ul a,
.archivio-indice .ai-body > ul > li > ul a:visited {
color: var( --ns-accent, #e7b142 );
text-decoration: none;
}
.archivio-indice .ai-body > ul > li > ul a:hover {
text-decoration: underline;
}

/* link modifica menu */
.archivio-indice .ai-modifica {
margin-top: .6rem;
font-size: .76rem;
}
.archivio-indice .ai-modifica a,
.archivio-indice .ai-modifica a:visited {
color: var( --color-base--subtle, #b8b8b8 );
text-decoration: none;
}
.archivio-indice .ai-modifica a:hover {
text-decoration: underline;
}
/* testata cliccabile per intero */
.archivio-indice .ai-testata {
cursor: pointer;
}
/* === [INDICE] fine === */

/* === [HOME] inizio === */
/* ==========================================================
HOMEPAGE CINETECA DELL'ETNA
Pagina di test: Test_home
========================================================== */

/* Nasconde titolo standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-header,
body.page-Test_home .citizen-body-header,
body.page-Test_home .mw-body-header,
body.page-Test_home #firstHeading,
body.page-Test_home .firstHeading,
body.page-Test_home .mw-first-heading,
body.page-Test_home .mw-page-title-main {
display: none !important;
}

/* Nasconde colonna destra standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-sidebar,
body.page-Test_home .citizen-toc,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-lastmod,
body.page-Test_home .citizen-page-actions-more,
body.page-Test_home .toc,
body.page-Test_home #toc {
display: none !important;
}

/* Nasconde informazioni ultima modifica solo nella pagina Test_home */

body.page-Test_home .mw-parser-output .printfooter,
body.page-Test_home .mw-parser-output .catlinks,
body.page-Test_home .mw-parser-output .mw-footer-info,
body.page-Test_home .page-info,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-page-footer,
body.page-Test_home .citizen-body-footer,
body.page-Test_home .mw-body-footer,
body.page-Test_home .mw-last-modified,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

/* Allarga lo spazio utile della home dentro Citizen */

body.page-Test_home .citizen-body,
body.page-Test_home .citizen-body-container,
body.page-Test_home .citizen-body-content,
body.page-Test_home .citizen-page-container,
body.page-Test_home .mw-body,
body.page-Test_home .mw-body-content,
body.page-Test_home .mw-parser-output,
body.page-Test_home #bodyContent,
body.page-Test_home #content {
max-width: none !important;
width: 100% !important;
}

body.page-Test_home .citizen-body {
grid-template-columns: minmax(0, 1fr) !important;
}

/* Contenitore generale home */

body.page-Test_home .mw-parser-output .ce-home {
width: min(1300px, calc(100vw - 14rem));
max-width: none !important;
min-height: calc(100vh - 7rem);
margin: 0 auto;
padding: 2rem 0 2rem;
box-sizing: border-box;
overflow-x: hidden;
transform: none;

display: flex;
align-items: center;
}

/* Layout generale: contenuto principale + colonna laterale */

body.page-Test_home .mw-parser-output .ce-home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

/* Colonna laterale editoriale */

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
border-left: 0;
padding-left: 2rem;
}

/* Hero: testo a sinistra, foto verticale a destra */

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
min-width: 0;
align-self: start;
margin-top: 0;
padding-top: 0;
}

/* Occhiello / motto identitario */

body.page-Test_home .mw-parser-output .ce-hero-kicker {
margin-bottom: 1.4rem;
color: var(--color-base, #ffffff);
opacity: 0.72;
font-size: 0.92rem;
line-height: 1.2;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
}

/* Immagine verticale della home: solo foto, nessun box */

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 2;
grid-row: 1;
width: 300px;
height: 450px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
}

body.page-Test_home .mw-parser-output .ce-hero-visual > p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description {
display: block;
width: 300px !important;
height: 450px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
display: block;
width: 300px !important;
height: 450px !important;
max-width: none !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

/* Testo principale hero */

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 0.98;
margin: 0 0 1.5rem;
letter-spacing: -0.03em;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.15rem;
line-height: 1.55;
max-width: 760px;
color: var(--color-base--subtle, #b8b8b8);
}

/* Indice editoriale principale: libero, senza box */

body.page-Test_home .mw-parser-output .ce-home-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
width: 100%;
margin: 0;
padding-top: 0;
border: 0;
}

body.page-Test_home .mw-parser-output .ce-index-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-index-number {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.04em;
}

body.page-Test_home .mw-parser-output .ce-index-title {
margin-bottom: 0.65rem;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 600;
}

/* Index / Federated Archives Alliance / Contatti: rosso Citizen */

body.page-Test_home .mw-parser-output .ce-index-title,
body.page-Test_home .mw-parser-output .ce-index-title a,
body.page-Test_home .mw-parser-output .ce-index-title a:visited {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: none;
}

body.page-Test_home .mw-parser-output .ce-index-title a:hover {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: underline;
}

body.page-Test_home .mw-parser-output .ce-index-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 1rem;
line-height: 1.45;
max-width: 32em;
}

/* Box laterali leggeri, senza delimitazioni */

body.page-Test_home .mw-parser-output .ce-side-box {
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-side-box::before {
content: none;
display: none;
}

body.page-Test_home .mw-parser-output .ce-side-label {
margin-bottom: 0.6rem;
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* Titoli colonna destra: bianchi */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:visited {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.1;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}

body.page-Test_home .mw-parser-output .ce-side-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.95rem;
line-height: 1.45;
}

body.page-Test_home .mw-parser-output .ce-side-link {
margin-top: 0.85rem;
font-size: 0.95rem;
}

/* Link azione colonna destra: bianchi, blu Citizen solo all'hover */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:visited {
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:hover {
color: var(--color-progressive, #36c) !important;
text-decoration: underline !important;
}

/* Footer Citizen visibile e alleggerito solo nella home */

body.page-Test_home #footer {
display: block !important;
margin-top: 1.5rem !important;
padding-top: 0 !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
background: transparent !important;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer-info {
display: block !important;
}

body.page-Test_home #footer-places,
body.page-Test_home #footer-icon,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

body.page-Test_home .citizen-footer-tagline,
body.page-Test_home #footer-tagline,
body.page-Test_home #footer .citizen-footer__tagline {
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer a,
body.page-Test_home #footer a:visited {
color: var(--color-base--subtle, #b8b8b8) !important;
text-decoration: none !important;
}

body.page-Test_home #footer a:hover {
color: var(--color-base, #ffffff) !important;
text-decoration: underline !important;
}

/* ==========================================================
RESPONSIVE
========================================================== */

/* Finestra intermedia:
1. hero ancora a due colonne
2. indice sotto
3. colonna informativa sotto l'indice */

@media (max-width: 1250px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 4rem));
min-height: auto;
margin: 0 auto;
padding: 2rem 0 3rem;
display: block;
}

body.page-Test_home .mw-parser-output .ce-home-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
align-items: start;
margin-bottom: 4.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1 / span 2;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 3;
grid-row: 1;
justify-self: start;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding-left: 0;
border-left: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 4rem;
}
}

/* Finestra più stretta:
hero passa a una colonna, ma ordine resta:
titolo/testo, foto, indice, blocchi informativi */

@media (max-width: 900px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 2rem));
padding: 1.5rem 0 3rem;
}

body.page-Test_home .mw-parser-output .ce-hero {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-bottom: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 300px;
height: 450px;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 300px !important;
height: 450px !important;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: 1fr;
gap: 1.7rem;
}

body.page-Test_home .mw-parser-output .ce-index-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2rem;
border-left: 0;
padding-left: 0;
border-top: 0;
padding-top: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 0;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
line-height: 0.98;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.05rem;
}
}

/* Mobile molto stretto */

@media (max-width: 520px) {
body.page-Test_home .mw-parser-output .ce-home {
width: 100%;
padding: 1rem 0 2.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.3rem, 13vw, 3.3rem);
}

body.page-Test_home .mw-parser-output .ce-hero-visual,
body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 260px !important;
height: 390px !important;
}
}
/* === [HOME] fine === */

/* === [MAPPA] inizio === */
/* Index — sommario della "rivista". Tipografia editoriale CONDIVISA con home e
progetti (occhiello / titolo da prima pagina / lead): vedi la "regola
tipografica" nel README. VE-safe: solo wikitext nativo (liste di definizione
; :), nessun div di layout, niente sezioni espandibili. Stile su body.page-Index. */

body.page-Index #bodyContent,
body.page-Index .mw-parser-output {
max-width: 56rem;
}

/* Titolo della pagina = titolo da prima pagina (come i progetti, .ce-headline) */
body.page-Index #firstHeading {
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* riga d'apertura = lead */
body.page-Index .mw-parser-output > p:first-of-type {
margin: .4rem 0 2.6rem;
max-width: 46rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}

/* ogni sezione è un blocco di lista di definizione; numerazione continua */
body.page-Index .mw-parser-output {
counter-reset: sez;
}
body.page-Index .mw-parser-output dl {
margin: 0 0 2.4rem;
}

/* etichetta di sezione = OCCHIELLO, nel ROSSO della home + numero (richiamo e
stacco visivo tra le sezioni). */
body.page-Index .mw-parser-output dt {
counter-increment: sez;
margin: 0 0 1rem;
font-size: .9rem;
font-weight: 500;
letter-spacing: .04em;
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.page-Index .mw-parser-output dt::before {
content: counter( sez, decimal-leading-zero );
margin-right: .7em;
font-variant-numeric: tabular-nums;
}

/* voce = titolo da prima pagina (ridotto) + descrizione sotto.
Ritmo verticale regolare: il titolo è un BLOCCO con un solo margin; la
descrizione è il testo della dd, con la sua interlinea. */
body.page-Index .mw-parser-output dd {
margin: 0 0 1.4rem;
color: var( --color-base--subtle, #b8b8b8 );
font-size: 1.02rem;
line-height: 1.55;
}
body.page-Index .mw-parser-output dd:last-child {
margin-bottom: 0;
}

/* titolo della voce: BIANCO TIPOGRAFICO, mai bluetto */
body.page-Index .mw-parser-output dd b {
display: block;
margin: 0 0 .35rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.2;
}
body.page-Index .mw-parser-output dd b a,
body.page-Index .mw-parser-output dd b a:visited {
color: #ffffff;
text-decoration: none;
}
body.page-Index .mw-parser-output dd b a:hover {
text-decoration: underline;
}
/* === [MAPPA] fine === */

/* === [DEV] inizio === */
/* ==========================================================
Dev — Dashboard "a riquadri per progetto" (pagina centrale).
Stesso taglio editoriale di CinetecaSarda, ma l'indice è una griglia
di card (riquadri), non il widget nel rail. Wrapper .dev-dash.
Colori dei link: default Citizen (nessun override).
========================================================== */

.dev-dash {
color: var( --color-base, #fff );
}

/* Testata editoriale */
.dev-dash .occhiello {
margin: 0 0 .7rem;
font-size: var( --font-size-x-small, .8125rem );
letter-spacing: .07em;
text-transform: uppercase;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-headline {
margin: 0 0 1rem;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}
.dev-dash .dev-lead {
margin: 0 0 .5rem;
max-width: 64ch;
font-size: 1.1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* Riquadri "a colonne" (masonry): impacchettano senza vuoti verticali */
.dev-dash .dev-griglia {
columns: 290px;
column-gap: 1.3rem;
margin-top: 2rem;
}

/* Riquadro = progetto */
.dev-dash .dev-card {
break-inside: avoid;
margin: 0 0 1.3rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
border-radius: 8px;
background: rgba( 255, 255, 255, .02 );
}
.dev-dash .dev-card-titolo {
margin-bottom: .5rem;
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
}
.dev-dash .dev-card-sub {
margin: .7rem 0 .2rem;
font-size: var( --font-size-xx-small, .75rem );
text-transform: uppercase;
letter-spacing: .07em;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.dev-dash .dev-card li {
padding: .18rem 0;
line-height: 1.4;
font-size: .95rem;
}

/* Pagine centrali dei sotto-progetti (editoriale + indice nel rail): nascondi
il titolo standard di Citizen — l'headline vive nel contenuto (.ce-headline). */
body.page-Dev_Tapescan #firstHeading,
body.page-Dev_Tapescan .mw-page-title-main,
body.page-Dev_TBC #firstHeading,
body.page-Dev_TBC .mw-page-title-main,
body.page-Dev_Robota #firstHeading,
body.page-Dev_Robota .mw-page-title-main {
display: none !important;
}

/* Dev: link dell'indice e dell'editoriale col colore di DEFAULT di Citizen
(non il giallo brand di CinetecaSarda, hardcodato in [INDICE]). Specificità
più alta → vince senza toccare CinetecaSarda. */
body.ns-3012 .archivio-indice .ai-voci a,
body.ns-3012 .archivio-indice .ai-voci a:visited,
body.ns-3012 .archivio-indice .ai-licenza a,
body.ns-3012 .archivio-indice .ai-licenza a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
body.ns-3012 .archivio-editoriale {
--ns-accent: var( --color-link, var( --color-progressive, #36c ) );
}

/* Testo introduttivo (lead) dei sotto-progetti Dev: colore di DEFAULT di
Citizen (testo base), non il grigio "subtle" editoriale di CinetecaSarda. */
body.ns-3012 .archivio-editoriale .lead p {
color: var( --color-base, #fff );
}
/* === [DEV] fine === */

/* === [NS-MALASTRADA] inizio === */
/* malastradafilm (ns 3010): identità ACROMATICA (bianco/nero), come il sito
malastradafilm.com — niente accent colorato (al contrario del giallo
CinetecaSarda). Link dell'indice grigio tipografico, voce TOC attiva bianca. */

body.ns-3010 .archivio-editoriale {
--ns-accent: var( --color-base, #fff );
}
/* link dell'indice (sia struttura a div .ai-voci, sia elenco puntato .ai-body) */
body.ns-3010 .archivio-indice .ai-body a,
body.ns-3010 .archivio-indice .ai-body a:visited,
body.ns-3010 .archivio-indice .ai-licenza a,
body.ns-3010 .archivio-indice .ai-licenza a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}
/* titoli di sezione del menu (Idee, Opere e azioni, Scritti) nel ROSSO della home */
body.ns-3010 .archivio-indice .ai-body > ul > li {
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* look minimale acromatico: via solo le LINEE del widget (bordo verticale
sinistro del float e riga sotto «Dashboard»), mantenendo lo stacco dal testo
— quindi border-left:0 ma padding-left invariato. */
body.ns-3010 .archivio-indice.ai-rail {
border-left: 0;
}
body.ns-3010 .archivio-indice .ai-testata {
border-bottom: 0;
}

/* Dashboard: il titolo Citizen è nascosto (l'headline vive nella testata-template);
il racconto è scritto come testo nativo della pagina → lo stiliamo come "lead". */
body.page-Malastradafilm_Dashboard #firstHeading,
body.page-Malastradafilm_Dashboard .mw-page-title-main {
display: none !important;
}
body.page-Malastradafilm_Dashboard .mw-parser-output > p {
max-width: 42rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
/* === [NS-MALASTRADA] fine === */

/* === [NS-OPERAFILOSOFICA] inizio === */
/* Opera Filosofica Nomade (ns 3006): accento VIOLA sobrio (misterico/filosofico),
distinto dal giallo CinetecaSarda e dall'acromatico malastradafilm. */
body.ns-3006 .archivio-editoriale {
--ns-accent: #a48cc2;
}
/* link del menu: grigio leggibile; titoli di sezione nel viola di brand */
body.ns-3006 .archivio-indice .ai-body a,
body.ns-3006 .archivio-indice .ai-body a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}
body.ns-3006 .archivio-indice .ai-body > ul > li {
color: #a48cc2;
}
/* Dashboard: titolo Citizen nascosto (headline nel template), racconto = lead */
body.page-Operafilosoficanomade_Dashboard #firstHeading,
body.page-Operafilosoficanomade_Dashboard .mw-page-title-main {
display: none !important;
}
body.page-Operafilosoficanomade_Dashboard .mw-parser-output > p {
max-width: 42rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
/* === [NS-OPERAFILOSOFICA] fine === */

Template:Indice Operafilosoficanomade

2026-06-16T22:16:01Z

Cranio is thinking: cornice indice Opera Filosofica Nomade

<includeonly><div class="archivio-indice {{#if:{{{rail|}}}|ai-rail|}}">
<div class="ai-testata">[[Operafilosoficanomade:Dashboard|Dashboard]]<span class="ai-toggle" role="button" tabindex="0"></span></div>
<div class="ai-body">
{{Operafilosoficanomade:Menu}}
</div>
<div class="ai-modifica plainlinks">[{{fullurl:Operafilosoficanomade:Menu|veaction=edit}} ✎ Modifica il menu]</div>
</div></includeonly><noinclude>
'''Cornice''' dell'indice d'archivio di Opera Filosofica Nomade. Le voci stanno in '''[[Operafilosoficanomade:Menu]]''' (namespace dell'archivio, permessi del gruppo), elenco puntato: <code>*</code> sezione, <code>**</code> pagina. Si modifica in VisualEditor dal link «✎ Modifica il menu» (dalla pagina in lettura).
<templatedata>
{
"description": "Cornice dell'indice d'archivio di Opera Filosofica Nomade (rail). Le voci stanno in Operafilosoficanomade:Menu (elenco puntato). rail=1 lo colloca nel rail, già passato da IntestazionePagine.",
"params": { "rail": { "label": "Rail", "description": "1 per il rail (già impostato da IntestazionePagine).", "type": "string", "required": false } }
}
</templatedata>
[[Category:Template di struttura]]
</noinclude>

MediaWiki:Common.css

2026-06-16T21:50:41Z

Cranio is thinking: testata indice cliccabile (cursor pointer)

MediaWiki:Citizen.js

2026-06-16T21:50:38Z

Cranio is thinking: toggle indice: testata cliccabile per intero

/* All JavaScript here will be loaded for users of the Citizen skin */

/* Indice d'archivio:
1) dove esiste il rail di Citizen lo mettiamo lì SOPRA la TOC nativa (riuso);
dove il rail non c'è, l'indice resta flottante (.ai-rail) e non sparisce.
2) collassabile (chevron nella testata). Stato iniziale:
- se l'utente ha già scelto, si ricorda (localStorage);
- altrimenti default intelligente: chiuso se la TOC della pagina è lunga.
3) la testata (link alla Dashboard) resta sempre visibile. */
mw.hook( 'wikipage.content' ).add( function () {
var KEY = 'ce-indice-collapsed';

// 1) posizionamento
var floatBox = document.querySelector( '.archivio-indice.ai-rail' );
if ( floatBox ) {
var rail =
document.querySelector( '.citizen-page-sidebar' ) ||
document.querySelector( '.citizen-sidebar' ) ||
document.querySelector( '.citizen-toc-container' );
if ( rail ) {
floatBox.classList.remove( 'ai-rail' );
floatBox.classList.add( 'ai-in-rail' );
rail.prepend( floatBox );
}
}

var idx = document.querySelector( '.archivio-indice' );
if ( !idx ) {
return;
}

// 2) stato iniziale
var saved = null;
try {
saved = localStorage.getItem( KEY );
} catch ( e ) {}
var tocCount = document.querySelectorAll( '.citizen-toc-link' ).length;
var collapsed = ( saved === null ) ? ( tocCount > 8 ) : ( saved === '1' );
if ( collapsed ) {
idx.classList.add( 'ai-collapsed' );
}

// 3) toggle + persistenza — TUTTA la testata è cliccabile (bersaglio ampio),
// tranne il link "Dashboard".
document.querySelectorAll( '.archivio-indice .ai-testata' ).forEach( function ( head ) {
if ( head.dataset.bound ) {
return;
}
head.dataset.bound = '1';
var b = head.closest( '.archivio-indice' );
var act = function () {
b.classList.toggle( 'ai-collapsed' );
try {
localStorage.setItem( KEY, b.classList.contains( 'ai-collapsed' ) ? '1' : '0' );
} catch ( e ) {}
};
head.addEventListener( 'click', function ( e ) {
if ( e.target.closest( 'a' ) ) {
return;
}
act();
} );
head.addEventListener( 'keydown', function ( e ) {
if ( ( e.key === 'Enter' || e.key === ' ' ) && !e.target.closest( 'a' ) ) {
e.preventDefault();
act();
}
} );
} );
} );
/* === [SEZIONI] inizio ===
Sezioni collassabili: Citizen le fornisce già di suo (skin: EnableCollapsibleSections,
.citizen-section + .citizen-section-heading + un solo chevron nativo). Qui NON aggiungiamo
un secondo meccanismo: pilotiamo quello nativo perché le sezioni siano CHIUSE al primo
approdo e lo stato (quali aperte) sia ricordato per-pagina in localStorage. Il toggle e il
chevron restano di Citizen; le àncore/TOC riaprono la sezione da sole grazie a
hidden="until-found". */
mw.hook( 'wikipage.content' ).add( function () {
if ( !document.body.classList.contains( 'citizen-sections-enabled' ) ) {
return;
}
var body = document.querySelector( '#mw-content-text .mw-parser-output' );
if ( !body || body.dataset.ceSecDone ) {
return;
}
var headings = Array.prototype.slice.call(
document.querySelectorAll( '.citizen-section-heading' ) );
if ( !headings.length ) {
return;
}
body.dataset.ceSecDone = '1';

function secOf( h ) {
var s = h.nextElementSibling;
return ( s && s.classList.contains( 'citizen-section' ) ) ? s : null;
}
function idOf( h ) {
var hx = h.querySelector( 'h1,h2,h3,h4,h5,h6' ) || h;
return hx.id || null;
}

// Pagine-mappa (Index, home): NON si collassano di default — devono restare
// aperte come dashboard. Le sezioni restano comunque pieghevoli a mano.
var NOAUTO = { 'Index': 1, 'Test_home': 1, 'Main_Page': 1, 'Home': 1 };
var autoCollapse = !NOAUTO[ mw.config.get( 'wgPageName' ) ];

var SKEY = 'ce-sections:' + mw.config.get( 'wgPageName' );
var stored = null;
try { stored = localStorage.getItem( SKEY ); } catch ( e ) {}
var openIds = {};
if ( stored ) {
try {
JSON.parse( stored ).forEach( function ( id ) { openIds[ id ] = 1; } );
} catch ( e ) {}
}

// stato iniziale: chiuse, tranne quelle ricordate aperte
headings.forEach( function ( h ) {
var s = secOf( h );
if ( !s ) { return; }
var id = idOf( h );
var open = stored ? !!openIds[ id ] : !autoCollapse;
if ( !open ) { s.hidden = 'until-found'; }
} );

function save() {
var open = [];
headings.forEach( function ( h ) {
var s = secOf( h );
if ( s && !s.hasAttribute( 'hidden' ) ) {
var id = idOf( h );
if ( id ) { open.push( id ); }
}
} );
try { localStorage.setItem( SKEY, JSON.stringify( open ) ); } catch ( e ) {}
}

// registra lo stato dopo i toggle nativi di Citizen e le riaperture via "until-found"
body.addEventListener( 'click', function ( e ) {
if ( e.target.closest( '.citizen-section-heading' ) &&
!e.target.closest( '.mw-editsection' ) ) {
setTimeout( save, 0 );
}
} );
headings.forEach( function ( h ) {
var s = secOf( h );
if ( s ) {
s.addEventListener( 'beforematch', function () { setTimeout( save, 0 ); } );
}
} );
} );
/* === [SEZIONI] fine === */

MediaWiki:Common.css

2026-06-16T21:40:34Z

Cranio is thinking: malastradafilm: ripristino padding-left del float (posizione widget di prima), via solo la linea

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
display:block;
font-size:0.85em;
margin-top:-0.3em;
margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
color:inherit;
}

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
(ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
color: #ffffff;
}
body.ns-3004 #firstHeading::before {
content: "Cineteca Sarda";
display: block;
margin-bottom: .35rem;
font-size: .8rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
display: none;
}
/* === [NS-BRAND] fine === */

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 300px;
gap: 3.5rem;
align-items: start;
}
.archivio-editoriale .art-main {
min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
margin: 0 0 .7rem;
font-size: .9rem;
letter-spacing: .04em;
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
border: 0;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
margin: 0;
max-width: none;
}
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
margin-bottom: 0;
}
.archivio-editoriale .lead strong {
color: var( --color-base, #fff );
font-weight: 600;
}

/* Riga "Prototipo di consultazione": blocco in evidenza (accent a sinistra) */
.archivio-editoriale .ce-prototipo {
margin: 1.8rem 0 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var( --ns-accent );
}
.archivio-editoriale .ce-prototipo-eti {
font-size: .92rem;
font-weight: 600;
color: #ffffff;
margin-bottom: .2rem;
}
.archivio-editoriale .ce-prototipo p {
margin: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
margin: 0 0 .4rem;
padding-bottom: .55rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
padding: .7rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
border-bottom: 0;
}
.archivio-editoriale .idx-eti {
margin-bottom: .2rem;
font-size: .98rem;
font-weight: 600;
color: #ffffff;
}
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
font-weight: 500;
text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
.archivio-editoriale .art-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
Indice d'archivio (sorgente unica {{Indice <NS>}}).
Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
(sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
Citizen (--font-size-*) per armonia con la TOC.
========================================================== */

.archivio-indice {
font-size: var( --font-size-small, .875rem );
line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
float: right;
width: 280px;
margin: .2rem 0 1.4rem 2rem;
padding-left: 1.4rem;
border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
.archivio-indice.ai-rail {
float: none;
width: auto;
margin: 0 0 1.6rem;
padding-left: 0;
border-left: 0;
}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
float: none;
width: auto;
margin: 0 0 1rem;
padding: 0;
border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
padding-bottom: .45rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
font-size: var( --font-size-x-small, .8125rem );
text-transform: uppercase;
letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
cursor: pointer;
user-select: none;
line-height: 1;
padding: .1rem .25rem;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
content: "▾";
display: inline-block;
font-size: .9em;
transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
display: none;
}
.archivio-indice .ai-toggle:hover {
color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
padding: .5rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
border-bottom: 0;
}
.archivio-indice .ai-eti {
margin-bottom: .12rem;
font-size: var( --font-size-small, .875rem );
font-weight: 600;
color: #ffffff;
}
.archivio-indice .ai-voci {
font-size: var( --font-size-small, .875rem );
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
color: #e7b142;
font-weight: 500;
text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
text-decoration: underline;
}

/* Riga licenza (sempre visibile, anche con indice chiuso) */
.archivio-indice .ai-licenza {
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
font-size: var( --font-size-x-small, .8125rem );
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}
.archivio-indice .ai-licenza a,
.archivio-indice .ai-licenza a:visited {
color: #e7b142;
text-decoration: none;
}
.archivio-indice .ai-licenza a:hover {
text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
color: #e7b142;
font-weight: 600;
}

/* Indice a LISTE native (variante editabile come elenco puntato in VE):
"* sezione" + "** pagina". Stesso look dei blocchi a div .ai-eti/.ai-voci.
Va nel blocco [INDICE] di Common.css. */
.archivio-indice .ai-body ul {
list-style: none;
margin: 0;
padding: 0;
}
.archivio-indice .ai-body > ul > li {
margin: 0 0 .8rem;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-body > ul > li > ul {
margin: .35rem 0 0;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.archivio-indice .ai-body > ul > li > ul > li {
margin: .12rem 0;
font-size: .92rem;
line-height: 1.45;
}
.archivio-indice .ai-body > ul > li > ul a,
.archivio-indice .ai-body > ul > li > ul a:visited {
color: var( --ns-accent, #e7b142 );
text-decoration: none;
}
.archivio-indice .ai-body > ul > li > ul a:hover {
text-decoration: underline;
}

/* link modifica menu */
.archivio-indice .ai-modifica {
margin-top: .6rem;
font-size: .76rem;
}
.archivio-indice .ai-modifica a,
.archivio-indice .ai-modifica a:visited {
color: var( --color-base--subtle, #b8b8b8 );
text-decoration: none;
}
.archivio-indice .ai-modifica a:hover {
text-decoration: underline;
}
/* === [INDICE] fine === */

/* === [HOME] inizio === */
/* ==========================================================
HOMEPAGE CINETECA DELL'ETNA
Pagina di test: Test_home
========================================================== */

/* Nasconde titolo standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-header,
body.page-Test_home .citizen-body-header,
body.page-Test_home .mw-body-header,
body.page-Test_home #firstHeading,
body.page-Test_home .firstHeading,
body.page-Test_home .mw-first-heading,
body.page-Test_home .mw-page-title-main {
display: none !important;
}

/* Nasconde colonna destra standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-sidebar,
body.page-Test_home .citizen-toc,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-lastmod,
body.page-Test_home .citizen-page-actions-more,
body.page-Test_home .toc,
body.page-Test_home #toc {
display: none !important;
}

/* Nasconde informazioni ultima modifica solo nella pagina Test_home */

body.page-Test_home .mw-parser-output .printfooter,
body.page-Test_home .mw-parser-output .catlinks,
body.page-Test_home .mw-parser-output .mw-footer-info,
body.page-Test_home .page-info,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-page-footer,
body.page-Test_home .citizen-body-footer,
body.page-Test_home .mw-body-footer,
body.page-Test_home .mw-last-modified,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

/* Allarga lo spazio utile della home dentro Citizen */

body.page-Test_home .citizen-body,
body.page-Test_home .citizen-body-container,
body.page-Test_home .citizen-body-content,
body.page-Test_home .citizen-page-container,
body.page-Test_home .mw-body,
body.page-Test_home .mw-body-content,
body.page-Test_home .mw-parser-output,
body.page-Test_home #bodyContent,
body.page-Test_home #content {
max-width: none !important;
width: 100% !important;
}

body.page-Test_home .citizen-body {
grid-template-columns: minmax(0, 1fr) !important;
}

/* Contenitore generale home */

body.page-Test_home .mw-parser-output .ce-home {
width: min(1300px, calc(100vw - 14rem));
max-width: none !important;
min-height: calc(100vh - 7rem);
margin: 0 auto;
padding: 2rem 0 2rem;
box-sizing: border-box;
overflow-x: hidden;
transform: none;

display: flex;
align-items: center;
}

/* Layout generale: contenuto principale + colonna laterale */

body.page-Test_home .mw-parser-output .ce-home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

/* Colonna laterale editoriale */

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
border-left: 0;
padding-left: 2rem;
}

/* Hero: testo a sinistra, foto verticale a destra */

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
min-width: 0;
align-self: start;
margin-top: 0;
padding-top: 0;
}

/* Occhiello / motto identitario */

body.page-Test_home .mw-parser-output .ce-hero-kicker {
margin-bottom: 1.4rem;
color: var(--color-base, #ffffff);
opacity: 0.72;
font-size: 0.92rem;
line-height: 1.2;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
}

/* Immagine verticale della home: solo foto, nessun box */

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 2;
grid-row: 1;
width: 300px;
height: 450px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
}

body.page-Test_home .mw-parser-output .ce-hero-visual > p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description {
display: block;
width: 300px !important;
height: 450px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
display: block;
width: 300px !important;
height: 450px !important;
max-width: none !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

/* Testo principale hero */

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 0.98;
margin: 0 0 1.5rem;
letter-spacing: -0.03em;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.15rem;
line-height: 1.55;
max-width: 760px;
color: var(--color-base--subtle, #b8b8b8);
}

/* Indice editoriale principale: libero, senza box */

body.page-Test_home .mw-parser-output .ce-home-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
width: 100%;
margin: 0;
padding-top: 0;
border: 0;
}

body.page-Test_home .mw-parser-output .ce-index-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-index-number {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.04em;
}

body.page-Test_home .mw-parser-output .ce-index-title {
margin-bottom: 0.65rem;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 600;
}

/* Index / Federated Archives Alliance / Contatti: rosso Citizen */

body.page-Test_home .mw-parser-output .ce-index-title,
body.page-Test_home .mw-parser-output .ce-index-title a,
body.page-Test_home .mw-parser-output .ce-index-title a:visited {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: none;
}

body.page-Test_home .mw-parser-output .ce-index-title a:hover {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: underline;
}

body.page-Test_home .mw-parser-output .ce-index-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 1rem;
line-height: 1.45;
max-width: 32em;
}

/* Box laterali leggeri, senza delimitazioni */

body.page-Test_home .mw-parser-output .ce-side-box {
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-side-box::before {
content: none;
display: none;
}

body.page-Test_home .mw-parser-output .ce-side-label {
margin-bottom: 0.6rem;
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* Titoli colonna destra: bianchi */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:visited {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.1;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}

body.page-Test_home .mw-parser-output .ce-side-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.95rem;
line-height: 1.45;
}

body.page-Test_home .mw-parser-output .ce-side-link {
margin-top: 0.85rem;
font-size: 0.95rem;
}

/* Link azione colonna destra: bianchi, blu Citizen solo all'hover */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:visited {
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:hover {
color: var(--color-progressive, #36c) !important;
text-decoration: underline !important;
}

/* Footer Citizen visibile e alleggerito solo nella home */

body.page-Test_home #footer {
display: block !important;
margin-top: 1.5rem !important;
padding-top: 0 !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
background: transparent !important;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer-info {
display: block !important;
}

body.page-Test_home #footer-places,
body.page-Test_home #footer-icon,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

body.page-Test_home .citizen-footer-tagline,
body.page-Test_home #footer-tagline,
body.page-Test_home #footer .citizen-footer__tagline {
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer a,
body.page-Test_home #footer a:visited {
color: var(--color-base--subtle, #b8b8b8) !important;
text-decoration: none !important;
}

body.page-Test_home #footer a:hover {
color: var(--color-base, #ffffff) !important;
text-decoration: underline !important;
}

/* ==========================================================
RESPONSIVE
========================================================== */

/* Finestra intermedia:
1. hero ancora a due colonne
2. indice sotto
3. colonna informativa sotto l'indice */

@media (max-width: 1250px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 4rem));
min-height: auto;
margin: 0 auto;
padding: 2rem 0 3rem;
display: block;
}

body.page-Test_home .mw-parser-output .ce-home-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
align-items: start;
margin-bottom: 4.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1 / span 2;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 3;
grid-row: 1;
justify-self: start;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding-left: 0;
border-left: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 4rem;
}
}

/* Finestra più stretta:
hero passa a una colonna, ma ordine resta:
titolo/testo, foto, indice, blocchi informativi */

@media (max-width: 900px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 2rem));
padding: 1.5rem 0 3rem;
}

body.page-Test_home .mw-parser-output .ce-hero {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-bottom: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 300px;
height: 450px;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 300px !important;
height: 450px !important;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: 1fr;
gap: 1.7rem;
}

body.page-Test_home .mw-parser-output .ce-index-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2rem;
border-left: 0;
padding-left: 0;
border-top: 0;
padding-top: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 0;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
line-height: 0.98;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.05rem;
}
}

/* Mobile molto stretto */

@media (max-width: 520px) {
body.page-Test_home .mw-parser-output .ce-home {
width: 100%;
padding: 1rem 0 2.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.3rem, 13vw, 3.3rem);
}

body.page-Test_home .mw-parser-output .ce-hero-visual,
body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 260px !important;
height: 390px !important;
}
}
/* === [HOME] fine === */

/* === [MAPPA] inizio === */
/* Index — sommario della "rivista". Tipografia editoriale CONDIVISA con home e
progetti (occhiello / titolo da prima pagina / lead): vedi la "regola
tipografica" nel README. VE-safe: solo wikitext nativo (liste di definizione
; :), nessun div di layout, niente sezioni espandibili. Stile su body.page-Index. */

body.page-Index #bodyContent,
body.page-Index .mw-parser-output {
max-width: 56rem;
}

/* Titolo della pagina = titolo da prima pagina (come i progetti, .ce-headline) */
body.page-Index #firstHeading {
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* riga d'apertura = lead */
body.page-Index .mw-parser-output > p:first-of-type {
margin: .4rem 0 2.6rem;
max-width: 46rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}

/* ogni sezione è un blocco di lista di definizione; numerazione continua */
body.page-Index .mw-parser-output {
counter-reset: sez;
}
body.page-Index .mw-parser-output dl {
margin: 0 0 2.4rem;
}

/* etichetta di sezione = OCCHIELLO, nel ROSSO della home + numero (richiamo e
stacco visivo tra le sezioni). */
body.page-Index .mw-parser-output dt {
counter-increment: sez;
margin: 0 0 1rem;
font-size: .9rem;
font-weight: 500;
letter-spacing: .04em;
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.page-Index .mw-parser-output dt::before {
content: counter( sez, decimal-leading-zero );
margin-right: .7em;
font-variant-numeric: tabular-nums;
}

/* voce = titolo da prima pagina (ridotto) + descrizione sotto.
Ritmo verticale regolare: il titolo è un BLOCCO con un solo margin; la
descrizione è il testo della dd, con la sua interlinea. */
body.page-Index .mw-parser-output dd {
margin: 0 0 1.4rem;
color: var( --color-base--subtle, #b8b8b8 );
font-size: 1.02rem;
line-height: 1.55;
}
body.page-Index .mw-parser-output dd:last-child {
margin-bottom: 0;
}

/* titolo della voce: BIANCO TIPOGRAFICO, mai bluetto */
body.page-Index .mw-parser-output dd b {
display: block;
margin: 0 0 .35rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.2;
}
body.page-Index .mw-parser-output dd b a,
body.page-Index .mw-parser-output dd b a:visited {
color: #ffffff;
text-decoration: none;
}
body.page-Index .mw-parser-output dd b a:hover {
text-decoration: underline;
}
/* === [MAPPA] fine === */

/* === [DEV] inizio === */
/* ==========================================================
Dev — Dashboard "a riquadri per progetto" (pagina centrale).
Stesso taglio editoriale di CinetecaSarda, ma l'indice è una griglia
di card (riquadri), non il widget nel rail. Wrapper .dev-dash.
Colori dei link: default Citizen (nessun override).
========================================================== */

.dev-dash {
color: var( --color-base, #fff );
}

/* Testata editoriale */
.dev-dash .occhiello {
margin: 0 0 .7rem;
font-size: var( --font-size-x-small, .8125rem );
letter-spacing: .07em;
text-transform: uppercase;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-headline {
margin: 0 0 1rem;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}
.dev-dash .dev-lead {
margin: 0 0 .5rem;
max-width: 64ch;
font-size: 1.1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* Riquadri "a colonne" (masonry): impacchettano senza vuoti verticali */
.dev-dash .dev-griglia {
columns: 290px;
column-gap: 1.3rem;
margin-top: 2rem;
}

/* Riquadro = progetto */
.dev-dash .dev-card {
break-inside: avoid;
margin: 0 0 1.3rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
border-radius: 8px;
background: rgba( 255, 255, 255, .02 );
}
.dev-dash .dev-card-titolo {
margin-bottom: .5rem;
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
}
.dev-dash .dev-card-sub {
margin: .7rem 0 .2rem;
font-size: var( --font-size-xx-small, .75rem );
text-transform: uppercase;
letter-spacing: .07em;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.dev-dash .dev-card li {
padding: .18rem 0;
line-height: 1.4;
font-size: .95rem;
}

/* Pagine centrali dei sotto-progetti (editoriale + indice nel rail): nascondi
il titolo standard di Citizen — l'headline vive nel contenuto (.ce-headline). */
body.page-Dev_Tapescan #firstHeading,
body.page-Dev_Tapescan .mw-page-title-main,
body.page-Dev_TBC #firstHeading,
body.page-Dev_TBC .mw-page-title-main,
body.page-Dev_Robota #firstHeading,
body.page-Dev_Robota .mw-page-title-main {
display: none !important;
}

/* Dev: link dell'indice e dell'editoriale col colore di DEFAULT di Citizen
(non il giallo brand di CinetecaSarda, hardcodato in [INDICE]). Specificità
più alta → vince senza toccare CinetecaSarda. */
body.ns-3012 .archivio-indice .ai-voci a,
body.ns-3012 .archivio-indice .ai-voci a:visited,
body.ns-3012 .archivio-indice .ai-licenza a,
body.ns-3012 .archivio-indice .ai-licenza a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
body.ns-3012 .archivio-editoriale {
--ns-accent: var( --color-link, var( --color-progressive, #36c ) );
}

/* Testo introduttivo (lead) dei sotto-progetti Dev: colore di DEFAULT di
Citizen (testo base), non il grigio "subtle" editoriale di CinetecaSarda. */
body.ns-3012 .archivio-editoriale .lead p {
color: var( --color-base, #fff );
}
/* === [DEV] fine === */

/* === [NS-MALASTRADA] inizio === */
/* malastradafilm (ns 3010): identità ACROMATICA (bianco/nero), come il sito
malastradafilm.com — niente accent colorato (al contrario del giallo
CinetecaSarda). Link dell'indice grigio tipografico, voce TOC attiva bianca. */

body.ns-3010 .archivio-editoriale {
--ns-accent: var( --color-base, #fff );
}
/* link dell'indice (sia struttura a div .ai-voci, sia elenco puntato .ai-body) */
body.ns-3010 .archivio-indice .ai-body a,
body.ns-3010 .archivio-indice .ai-body a:visited,
body.ns-3010 .archivio-indice .ai-licenza a,
body.ns-3010 .archivio-indice .ai-licenza a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}
/* titoli di sezione del menu (Idee, Opere e azioni, Scritti) nel ROSSO della home */
body.ns-3010 .archivio-indice .ai-body > ul > li {
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* look minimale acromatico: via solo le LINEE del widget (bordo verticale
sinistro del float e riga sotto «Dashboard»), mantenendo lo stacco dal testo
— quindi border-left:0 ma padding-left invariato. */
body.ns-3010 .archivio-indice.ai-rail {
border-left: 0;
}
body.ns-3010 .archivio-indice .ai-testata {
border-bottom: 0;
}

/* Dashboard: il titolo Citizen è nascosto (l'headline vive nella testata-template);
il racconto è scritto come testo nativo della pagina → lo stiliamo come "lead". */
body.page-Malastradafilm_Dashboard #firstHeading,
body.page-Malastradafilm_Dashboard .mw-page-title-main {
display: none !important;
}
body.page-Malastradafilm_Dashboard .mw-parser-output > p {
max-width: 42rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
/* === [NS-MALASTRADA] fine === */

MediaWiki:Common.css

2026-06-16T21:37:41Z

Cranio is thinking: widget malastradafilm: via il bordo sinistro del float e la riga sotto Dashboard

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
display:block;
font-size:0.85em;
margin-top:-0.3em;
margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
color:inherit;
}

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
(ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
color: #ffffff;
}
body.ns-3004 #firstHeading::before {
content: "Cineteca Sarda";
display: block;
margin-bottom: .35rem;
font-size: .8rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
display: none;
}
/* === [NS-BRAND] fine === */

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 300px;
gap: 3.5rem;
align-items: start;
}
.archivio-editoriale .art-main {
min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
margin: 0 0 .7rem;
font-size: .9rem;
letter-spacing: .04em;
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
border: 0;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
margin: 0;
max-width: none;
}
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
margin-bottom: 0;
}
.archivio-editoriale .lead strong {
color: var( --color-base, #fff );
font-weight: 600;
}

/* Riga "Prototipo di consultazione": blocco in evidenza (accent a sinistra) */
.archivio-editoriale .ce-prototipo {
margin: 1.8rem 0 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var( --ns-accent );
}
.archivio-editoriale .ce-prototipo-eti {
font-size: .92rem;
font-weight: 600;
color: #ffffff;
margin-bottom: .2rem;
}
.archivio-editoriale .ce-prototipo p {
margin: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
margin: 0 0 .4rem;
padding-bottom: .55rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
padding: .7rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
border-bottom: 0;
}
.archivio-editoriale .idx-eti {
margin-bottom: .2rem;
font-size: .98rem;
font-weight: 600;
color: #ffffff;
}
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
font-weight: 500;
text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
.archivio-editoriale .art-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
Indice d'archivio (sorgente unica {{Indice <NS>}}).
Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
(sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
Citizen (--font-size-*) per armonia con la TOC.
========================================================== */

.archivio-indice {
font-size: var( --font-size-small, .875rem );
line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
float: right;
width: 280px;
margin: .2rem 0 1.4rem 2rem;
padding-left: 1.4rem;
border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
.archivio-indice.ai-rail {
float: none;
width: auto;
margin: 0 0 1.6rem;
padding-left: 0;
border-left: 0;
}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
float: none;
width: auto;
margin: 0 0 1rem;
padding: 0;
border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
padding-bottom: .45rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
font-size: var( --font-size-x-small, .8125rem );
text-transform: uppercase;
letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
cursor: pointer;
user-select: none;
line-height: 1;
padding: .1rem .25rem;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
content: "▾";
display: inline-block;
font-size: .9em;
transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
display: none;
}
.archivio-indice .ai-toggle:hover {
color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
padding: .5rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
border-bottom: 0;
}
.archivio-indice .ai-eti {
margin-bottom: .12rem;
font-size: var( --font-size-small, .875rem );
font-weight: 600;
color: #ffffff;
}
.archivio-indice .ai-voci {
font-size: var( --font-size-small, .875rem );
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
color: #e7b142;
font-weight: 500;
text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
text-decoration: underline;
}

/* Riga licenza (sempre visibile, anche con indice chiuso) */
.archivio-indice .ai-licenza {
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
font-size: var( --font-size-x-small, .8125rem );
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}
.archivio-indice .ai-licenza a,
.archivio-indice .ai-licenza a:visited {
color: #e7b142;
text-decoration: none;
}
.archivio-indice .ai-licenza a:hover {
text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
color: #e7b142;
font-weight: 600;
}

/* Indice a LISTE native (variante editabile come elenco puntato in VE):
"* sezione" + "** pagina". Stesso look dei blocchi a div .ai-eti/.ai-voci.
Va nel blocco [INDICE] di Common.css. */
.archivio-indice .ai-body ul {
list-style: none;
margin: 0;
padding: 0;
}
.archivio-indice .ai-body > ul > li {
margin: 0 0 .8rem;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-body > ul > li > ul {
margin: .35rem 0 0;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.archivio-indice .ai-body > ul > li > ul > li {
margin: .12rem 0;
font-size: .92rem;
line-height: 1.45;
}
.archivio-indice .ai-body > ul > li > ul a,
.archivio-indice .ai-body > ul > li > ul a:visited {
color: var( --ns-accent, #e7b142 );
text-decoration: none;
}
.archivio-indice .ai-body > ul > li > ul a:hover {
text-decoration: underline;
}

/* link modifica menu */
.archivio-indice .ai-modifica {
margin-top: .6rem;
font-size: .76rem;
}
.archivio-indice .ai-modifica a,
.archivio-indice .ai-modifica a:visited {
color: var( --color-base--subtle, #b8b8b8 );
text-decoration: none;
}
.archivio-indice .ai-modifica a:hover {
text-decoration: underline;
}
/* === [INDICE] fine === */

/* === [HOME] inizio === */
/* ==========================================================
HOMEPAGE CINETECA DELL'ETNA
Pagina di test: Test_home
========================================================== */

/* Nasconde titolo standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-header,
body.page-Test_home .citizen-body-header,
body.page-Test_home .mw-body-header,
body.page-Test_home #firstHeading,
body.page-Test_home .firstHeading,
body.page-Test_home .mw-first-heading,
body.page-Test_home .mw-page-title-main {
display: none !important;
}

/* Nasconde colonna destra standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-sidebar,
body.page-Test_home .citizen-toc,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-lastmod,
body.page-Test_home .citizen-page-actions-more,
body.page-Test_home .toc,
body.page-Test_home #toc {
display: none !important;
}

/* Nasconde informazioni ultima modifica solo nella pagina Test_home */

body.page-Test_home .mw-parser-output .printfooter,
body.page-Test_home .mw-parser-output .catlinks,
body.page-Test_home .mw-parser-output .mw-footer-info,
body.page-Test_home .page-info,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-page-footer,
body.page-Test_home .citizen-body-footer,
body.page-Test_home .mw-body-footer,
body.page-Test_home .mw-last-modified,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

/* Allarga lo spazio utile della home dentro Citizen */

body.page-Test_home .citizen-body,
body.page-Test_home .citizen-body-container,
body.page-Test_home .citizen-body-content,
body.page-Test_home .citizen-page-container,
body.page-Test_home .mw-body,
body.page-Test_home .mw-body-content,
body.page-Test_home .mw-parser-output,
body.page-Test_home #bodyContent,
body.page-Test_home #content {
max-width: none !important;
width: 100% !important;
}

body.page-Test_home .citizen-body {
grid-template-columns: minmax(0, 1fr) !important;
}

/* Contenitore generale home */

body.page-Test_home .mw-parser-output .ce-home {
width: min(1300px, calc(100vw - 14rem));
max-width: none !important;
min-height: calc(100vh - 7rem);
margin: 0 auto;
padding: 2rem 0 2rem;
box-sizing: border-box;
overflow-x: hidden;
transform: none;

display: flex;
align-items: center;
}

/* Layout generale: contenuto principale + colonna laterale */

body.page-Test_home .mw-parser-output .ce-home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

/* Colonna laterale editoriale */

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
border-left: 0;
padding-left: 2rem;
}

/* Hero: testo a sinistra, foto verticale a destra */

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
min-width: 0;
align-self: start;
margin-top: 0;
padding-top: 0;
}

/* Occhiello / motto identitario */

body.page-Test_home .mw-parser-output .ce-hero-kicker {
margin-bottom: 1.4rem;
color: var(--color-base, #ffffff);
opacity: 0.72;
font-size: 0.92rem;
line-height: 1.2;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
}

/* Immagine verticale della home: solo foto, nessun box */

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 2;
grid-row: 1;
width: 300px;
height: 450px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
}

body.page-Test_home .mw-parser-output .ce-hero-visual > p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description {
display: block;
width: 300px !important;
height: 450px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
display: block;
width: 300px !important;
height: 450px !important;
max-width: none !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

/* Testo principale hero */

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 0.98;
margin: 0 0 1.5rem;
letter-spacing: -0.03em;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.15rem;
line-height: 1.55;
max-width: 760px;
color: var(--color-base--subtle, #b8b8b8);
}

/* Indice editoriale principale: libero, senza box */

body.page-Test_home .mw-parser-output .ce-home-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
width: 100%;
margin: 0;
padding-top: 0;
border: 0;
}

body.page-Test_home .mw-parser-output .ce-index-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-index-number {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.04em;
}

body.page-Test_home .mw-parser-output .ce-index-title {
margin-bottom: 0.65rem;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 600;
}

/* Index / Federated Archives Alliance / Contatti: rosso Citizen */

body.page-Test_home .mw-parser-output .ce-index-title,
body.page-Test_home .mw-parser-output .ce-index-title a,
body.page-Test_home .mw-parser-output .ce-index-title a:visited {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: none;
}

body.page-Test_home .mw-parser-output .ce-index-title a:hover {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: underline;
}

body.page-Test_home .mw-parser-output .ce-index-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 1rem;
line-height: 1.45;
max-width: 32em;
}

/* Box laterali leggeri, senza delimitazioni */

body.page-Test_home .mw-parser-output .ce-side-box {
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-side-box::before {
content: none;
display: none;
}

body.page-Test_home .mw-parser-output .ce-side-label {
margin-bottom: 0.6rem;
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* Titoli colonna destra: bianchi */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:visited {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.1;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}

body.page-Test_home .mw-parser-output .ce-side-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.95rem;
line-height: 1.45;
}

body.page-Test_home .mw-parser-output .ce-side-link {
margin-top: 0.85rem;
font-size: 0.95rem;
}

/* Link azione colonna destra: bianchi, blu Citizen solo all'hover */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:visited {
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:hover {
color: var(--color-progressive, #36c) !important;
text-decoration: underline !important;
}

/* Footer Citizen visibile e alleggerito solo nella home */

body.page-Test_home #footer {
display: block !important;
margin-top: 1.5rem !important;
padding-top: 0 !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
background: transparent !important;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer-info {
display: block !important;
}

body.page-Test_home #footer-places,
body.page-Test_home #footer-icon,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

body.page-Test_home .citizen-footer-tagline,
body.page-Test_home #footer-tagline,
body.page-Test_home #footer .citizen-footer__tagline {
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer a,
body.page-Test_home #footer a:visited {
color: var(--color-base--subtle, #b8b8b8) !important;
text-decoration: none !important;
}

body.page-Test_home #footer a:hover {
color: var(--color-base, #ffffff) !important;
text-decoration: underline !important;
}

/* ==========================================================
RESPONSIVE
========================================================== */

/* Finestra intermedia:
1. hero ancora a due colonne
2. indice sotto
3. colonna informativa sotto l'indice */

@media (max-width: 1250px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 4rem));
min-height: auto;
margin: 0 auto;
padding: 2rem 0 3rem;
display: block;
}

body.page-Test_home .mw-parser-output .ce-home-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
align-items: start;
margin-bottom: 4.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1 / span 2;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 3;
grid-row: 1;
justify-self: start;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding-left: 0;
border-left: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 4rem;
}
}

/* Finestra più stretta:
hero passa a una colonna, ma ordine resta:
titolo/testo, foto, indice, blocchi informativi */

@media (max-width: 900px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 2rem));
padding: 1.5rem 0 3rem;
}

body.page-Test_home .mw-parser-output .ce-hero {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-bottom: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 300px;
height: 450px;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 300px !important;
height: 450px !important;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: 1fr;
gap: 1.7rem;
}

body.page-Test_home .mw-parser-output .ce-index-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2rem;
border-left: 0;
padding-left: 0;
border-top: 0;
padding-top: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 0;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
line-height: 0.98;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.05rem;
}
}

/* Mobile molto stretto */

@media (max-width: 520px) {
body.page-Test_home .mw-parser-output .ce-home {
width: 100%;
padding: 1rem 0 2.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.3rem, 13vw, 3.3rem);
}

body.page-Test_home .mw-parser-output .ce-hero-visual,
body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 260px !important;
height: 390px !important;
}
}
/* === [HOME] fine === */

/* === [MAPPA] inizio === */
/* Index — sommario della "rivista". Tipografia editoriale CONDIVISA con home e
progetti (occhiello / titolo da prima pagina / lead): vedi la "regola
tipografica" nel README. VE-safe: solo wikitext nativo (liste di definizione
; :), nessun div di layout, niente sezioni espandibili. Stile su body.page-Index. */

body.page-Index #bodyContent,
body.page-Index .mw-parser-output {
max-width: 56rem;
}

/* Titolo della pagina = titolo da prima pagina (come i progetti, .ce-headline) */
body.page-Index #firstHeading {
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* riga d'apertura = lead */
body.page-Index .mw-parser-output > p:first-of-type {
margin: .4rem 0 2.6rem;
max-width: 46rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}

/* ogni sezione è un blocco di lista di definizione; numerazione continua */
body.page-Index .mw-parser-output {
counter-reset: sez;
}
body.page-Index .mw-parser-output dl {
margin: 0 0 2.4rem;
}

/* etichetta di sezione = OCCHIELLO, nel ROSSO della home + numero (richiamo e
stacco visivo tra le sezioni). */
body.page-Index .mw-parser-output dt {
counter-increment: sez;
margin: 0 0 1rem;
font-size: .9rem;
font-weight: 500;
letter-spacing: .04em;
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.page-Index .mw-parser-output dt::before {
content: counter( sez, decimal-leading-zero );
margin-right: .7em;
font-variant-numeric: tabular-nums;
}

/* voce = titolo da prima pagina (ridotto) + descrizione sotto.
Ritmo verticale regolare: il titolo è un BLOCCO con un solo margin; la
descrizione è il testo della dd, con la sua interlinea. */
body.page-Index .mw-parser-output dd {
margin: 0 0 1.4rem;
color: var( --color-base--subtle, #b8b8b8 );
font-size: 1.02rem;
line-height: 1.55;
}
body.page-Index .mw-parser-output dd:last-child {
margin-bottom: 0;
}

/* titolo della voce: BIANCO TIPOGRAFICO, mai bluetto */
body.page-Index .mw-parser-output dd b {
display: block;
margin: 0 0 .35rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.2;
}
body.page-Index .mw-parser-output dd b a,
body.page-Index .mw-parser-output dd b a:visited {
color: #ffffff;
text-decoration: none;
}
body.page-Index .mw-parser-output dd b a:hover {
text-decoration: underline;
}
/* === [MAPPA] fine === */

/* === [DEV] inizio === */
/* ==========================================================
Dev — Dashboard "a riquadri per progetto" (pagina centrale).
Stesso taglio editoriale di CinetecaSarda, ma l'indice è una griglia
di card (riquadri), non il widget nel rail. Wrapper .dev-dash.
Colori dei link: default Citizen (nessun override).
========================================================== */

.dev-dash {
color: var( --color-base, #fff );
}

/* Testata editoriale */
.dev-dash .occhiello {
margin: 0 0 .7rem;
font-size: var( --font-size-x-small, .8125rem );
letter-spacing: .07em;
text-transform: uppercase;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-headline {
margin: 0 0 1rem;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}
.dev-dash .dev-lead {
margin: 0 0 .5rem;
max-width: 64ch;
font-size: 1.1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* Riquadri "a colonne" (masonry): impacchettano senza vuoti verticali */
.dev-dash .dev-griglia {
columns: 290px;
column-gap: 1.3rem;
margin-top: 2rem;
}

/* Riquadro = progetto */
.dev-dash .dev-card {
break-inside: avoid;
margin: 0 0 1.3rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
border-radius: 8px;
background: rgba( 255, 255, 255, .02 );
}
.dev-dash .dev-card-titolo {
margin-bottom: .5rem;
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
}
.dev-dash .dev-card-sub {
margin: .7rem 0 .2rem;
font-size: var( --font-size-xx-small, .75rem );
text-transform: uppercase;
letter-spacing: .07em;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.dev-dash .dev-card li {
padding: .18rem 0;
line-height: 1.4;
font-size: .95rem;
}

/* Pagine centrali dei sotto-progetti (editoriale + indice nel rail): nascondi
il titolo standard di Citizen — l'headline vive nel contenuto (.ce-headline). */
body.page-Dev_Tapescan #firstHeading,
body.page-Dev_Tapescan .mw-page-title-main,
body.page-Dev_TBC #firstHeading,
body.page-Dev_TBC .mw-page-title-main,
body.page-Dev_Robota #firstHeading,
body.page-Dev_Robota .mw-page-title-main {
display: none !important;
}

/* Dev: link dell'indice e dell'editoriale col colore di DEFAULT di Citizen
(non il giallo brand di CinetecaSarda, hardcodato in [INDICE]). Specificità
più alta → vince senza toccare CinetecaSarda. */
body.ns-3012 .archivio-indice .ai-voci a,
body.ns-3012 .archivio-indice .ai-voci a:visited,
body.ns-3012 .archivio-indice .ai-licenza a,
body.ns-3012 .archivio-indice .ai-licenza a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
body.ns-3012 .archivio-editoriale {
--ns-accent: var( --color-link, var( --color-progressive, #36c ) );
}

/* Testo introduttivo (lead) dei sotto-progetti Dev: colore di DEFAULT di
Citizen (testo base), non il grigio "subtle" editoriale di CinetecaSarda. */
body.ns-3012 .archivio-editoriale .lead p {
color: var( --color-base, #fff );
}
/* === [DEV] fine === */

/* === [NS-MALASTRADA] inizio === */
/* malastradafilm (ns 3010): identità ACROMATICA (bianco/nero), come il sito
malastradafilm.com — niente accent colorato (al contrario del giallo
CinetecaSarda). Link dell'indice grigio tipografico, voce TOC attiva bianca. */

body.ns-3010 .archivio-editoriale {
--ns-accent: var( --color-base, #fff );
}
/* link dell'indice (sia struttura a div .ai-voci, sia elenco puntato .ai-body) */
body.ns-3010 .archivio-indice .ai-body a,
body.ns-3010 .archivio-indice .ai-body a:visited,
body.ns-3010 .archivio-indice .ai-licenza a,
body.ns-3010 .archivio-indice .ai-licenza a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}
/* titoli di sezione del menu (Idee, Opere e azioni, Scritti) nel ROSSO della home */
body.ns-3010 .archivio-indice .ai-body > ul > li {
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* look minimale acromatico: niente linee nel widget — via il bordo verticale
sinistro del box flottante (con il suo rientro) e la riga sotto «Dashboard». */
body.ns-3010 .archivio-indice.ai-rail {
padding-left: 0;
border-left: 0;
}
body.ns-3010 .archivio-indice .ai-testata {
border-bottom: 0;
}

/* Dashboard: il titolo Citizen è nascosto (l'headline vive nella testata-template);
il racconto è scritto come testo nativo della pagina → lo stiliamo come "lead". */
body.page-Malastradafilm_Dashboard #firstHeading,
body.page-Malastradafilm_Dashboard .mw-page-title-main {
display: none !important;
}
body.page-Malastradafilm_Dashboard .mw-parser-output > p {
max-width: 42rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
/* === [NS-MALASTRADA] fine === */

MediaWiki:Common.css

2026-06-16T21:30:35Z

Cranio is thinking: indice: tolta la riga sopra ✎ Modifica il menu

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
display:block;
font-size:0.85em;
margin-top:-0.3em;
margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
color:inherit;
}

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
(ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
color: #ffffff;
}
body.ns-3004 #firstHeading::before {
content: "Cineteca Sarda";
display: block;
margin-bottom: .35rem;
font-size: .8rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
display: none;
}
/* === [NS-BRAND] fine === */

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 300px;
gap: 3.5rem;
align-items: start;
}
.archivio-editoriale .art-main {
min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
margin: 0 0 .7rem;
font-size: .9rem;
letter-spacing: .04em;
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
border: 0;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
margin: 0;
max-width: none;
}
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
margin-bottom: 0;
}
.archivio-editoriale .lead strong {
color: var( --color-base, #fff );
font-weight: 600;
}

/* Riga "Prototipo di consultazione": blocco in evidenza (accent a sinistra) */
.archivio-editoriale .ce-prototipo {
margin: 1.8rem 0 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var( --ns-accent );
}
.archivio-editoriale .ce-prototipo-eti {
font-size: .92rem;
font-weight: 600;
color: #ffffff;
margin-bottom: .2rem;
}
.archivio-editoriale .ce-prototipo p {
margin: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
margin: 0 0 .4rem;
padding-bottom: .55rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
padding: .7rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
border-bottom: 0;
}
.archivio-editoriale .idx-eti {
margin-bottom: .2rem;
font-size: .98rem;
font-weight: 600;
color: #ffffff;
}
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
font-weight: 500;
text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
.archivio-editoriale .art-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
Indice d'archivio (sorgente unica {{Indice <NS>}}).
Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
(sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
Citizen (--font-size-*) per armonia con la TOC.
========================================================== */

.archivio-indice {
font-size: var( --font-size-small, .875rem );
line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
float: right;
width: 280px;
margin: .2rem 0 1.4rem 2rem;
padding-left: 1.4rem;
border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
.archivio-indice.ai-rail {
float: none;
width: auto;
margin: 0 0 1.6rem;
padding-left: 0;
border-left: 0;
}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
float: none;
width: auto;
margin: 0 0 1rem;
padding: 0;
border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
padding-bottom: .45rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
font-size: var( --font-size-x-small, .8125rem );
text-transform: uppercase;
letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
cursor: pointer;
user-select: none;
line-height: 1;
padding: .1rem .25rem;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
content: "▾";
display: inline-block;
font-size: .9em;
transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
display: none;
}
.archivio-indice .ai-toggle:hover {
color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
padding: .5rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
border-bottom: 0;
}
.archivio-indice .ai-eti {
margin-bottom: .12rem;
font-size: var( --font-size-small, .875rem );
font-weight: 600;
color: #ffffff;
}
.archivio-indice .ai-voci {
font-size: var( --font-size-small, .875rem );
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
color: #e7b142;
font-weight: 500;
text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
text-decoration: underline;
}

/* Riga licenza (sempre visibile, anche con indice chiuso) */
.archivio-indice .ai-licenza {
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
font-size: var( --font-size-x-small, .8125rem );
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}
.archivio-indice .ai-licenza a,
.archivio-indice .ai-licenza a:visited {
color: #e7b142;
text-decoration: none;
}
.archivio-indice .ai-licenza a:hover {
text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
color: #e7b142;
font-weight: 600;
}

/* Indice a LISTE native (variante editabile come elenco puntato in VE):
"* sezione" + "** pagina". Stesso look dei blocchi a div .ai-eti/.ai-voci.
Va nel blocco [INDICE] di Common.css. */
.archivio-indice .ai-body ul {
list-style: none;
margin: 0;
padding: 0;
}
.archivio-indice .ai-body > ul > li {
margin: 0 0 .8rem;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-body > ul > li > ul {
margin: .35rem 0 0;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.archivio-indice .ai-body > ul > li > ul > li {
margin: .12rem 0;
font-size: .92rem;
line-height: 1.45;
}
.archivio-indice .ai-body > ul > li > ul a,
.archivio-indice .ai-body > ul > li > ul a:visited {
color: var( --ns-accent, #e7b142 );
text-decoration: none;
}
.archivio-indice .ai-body > ul > li > ul a:hover {
text-decoration: underline;
}

/* link modifica menu */
.archivio-indice .ai-modifica {
margin-top: .6rem;
font-size: .76rem;
}
.archivio-indice .ai-modifica a,
.archivio-indice .ai-modifica a:visited {
color: var( --color-base--subtle, #b8b8b8 );
text-decoration: none;
}
.archivio-indice .ai-modifica a:hover {
text-decoration: underline;
}
/* === [INDICE] fine === */

/* === [HOME] inizio === */
/* ==========================================================
HOMEPAGE CINETECA DELL'ETNA
Pagina di test: Test_home
========================================================== */

/* Nasconde titolo standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-header,
body.page-Test_home .citizen-body-header,
body.page-Test_home .mw-body-header,
body.page-Test_home #firstHeading,
body.page-Test_home .firstHeading,
body.page-Test_home .mw-first-heading,
body.page-Test_home .mw-page-title-main {
display: none !important;
}

/* Nasconde colonna destra standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-sidebar,
body.page-Test_home .citizen-toc,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-lastmod,
body.page-Test_home .citizen-page-actions-more,
body.page-Test_home .toc,
body.page-Test_home #toc {
display: none !important;
}

/* Nasconde informazioni ultima modifica solo nella pagina Test_home */

body.page-Test_home .mw-parser-output .printfooter,
body.page-Test_home .mw-parser-output .catlinks,
body.page-Test_home .mw-parser-output .mw-footer-info,
body.page-Test_home .page-info,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-page-footer,
body.page-Test_home .citizen-body-footer,
body.page-Test_home .mw-body-footer,
body.page-Test_home .mw-last-modified,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

/* Allarga lo spazio utile della home dentro Citizen */

body.page-Test_home .citizen-body,
body.page-Test_home .citizen-body-container,
body.page-Test_home .citizen-body-content,
body.page-Test_home .citizen-page-container,
body.page-Test_home .mw-body,
body.page-Test_home .mw-body-content,
body.page-Test_home .mw-parser-output,
body.page-Test_home #bodyContent,
body.page-Test_home #content {
max-width: none !important;
width: 100% !important;
}

body.page-Test_home .citizen-body {
grid-template-columns: minmax(0, 1fr) !important;
}

/* Contenitore generale home */

body.page-Test_home .mw-parser-output .ce-home {
width: min(1300px, calc(100vw - 14rem));
max-width: none !important;
min-height: calc(100vh - 7rem);
margin: 0 auto;
padding: 2rem 0 2rem;
box-sizing: border-box;
overflow-x: hidden;
transform: none;

display: flex;
align-items: center;
}

/* Layout generale: contenuto principale + colonna laterale */

body.page-Test_home .mw-parser-output .ce-home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

/* Colonna laterale editoriale */

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
border-left: 0;
padding-left: 2rem;
}

/* Hero: testo a sinistra, foto verticale a destra */

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
min-width: 0;
align-self: start;
margin-top: 0;
padding-top: 0;
}

/* Occhiello / motto identitario */

body.page-Test_home .mw-parser-output .ce-hero-kicker {
margin-bottom: 1.4rem;
color: var(--color-base, #ffffff);
opacity: 0.72;
font-size: 0.92rem;
line-height: 1.2;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
}

/* Immagine verticale della home: solo foto, nessun box */

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 2;
grid-row: 1;
width: 300px;
height: 450px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
}

body.page-Test_home .mw-parser-output .ce-hero-visual > p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description {
display: block;
width: 300px !important;
height: 450px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
display: block;
width: 300px !important;
height: 450px !important;
max-width: none !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

/* Testo principale hero */

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 0.98;
margin: 0 0 1.5rem;
letter-spacing: -0.03em;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.15rem;
line-height: 1.55;
max-width: 760px;
color: var(--color-base--subtle, #b8b8b8);
}

/* Indice editoriale principale: libero, senza box */

body.page-Test_home .mw-parser-output .ce-home-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
width: 100%;
margin: 0;
padding-top: 0;
border: 0;
}

body.page-Test_home .mw-parser-output .ce-index-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-index-number {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.04em;
}

body.page-Test_home .mw-parser-output .ce-index-title {
margin-bottom: 0.65rem;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 600;
}

/* Index / Federated Archives Alliance / Contatti: rosso Citizen */

body.page-Test_home .mw-parser-output .ce-index-title,
body.page-Test_home .mw-parser-output .ce-index-title a,
body.page-Test_home .mw-parser-output .ce-index-title a:visited {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: none;
}

body.page-Test_home .mw-parser-output .ce-index-title a:hover {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: underline;
}

body.page-Test_home .mw-parser-output .ce-index-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 1rem;
line-height: 1.45;
max-width: 32em;
}

/* Box laterali leggeri, senza delimitazioni */

body.page-Test_home .mw-parser-output .ce-side-box {
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-side-box::before {
content: none;
display: none;
}

body.page-Test_home .mw-parser-output .ce-side-label {
margin-bottom: 0.6rem;
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* Titoli colonna destra: bianchi */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:visited {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.1;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}

body.page-Test_home .mw-parser-output .ce-side-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.95rem;
line-height: 1.45;
}

body.page-Test_home .mw-parser-output .ce-side-link {
margin-top: 0.85rem;
font-size: 0.95rem;
}

/* Link azione colonna destra: bianchi, blu Citizen solo all'hover */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:visited {
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:hover {
color: var(--color-progressive, #36c) !important;
text-decoration: underline !important;
}

/* Footer Citizen visibile e alleggerito solo nella home */

body.page-Test_home #footer {
display: block !important;
margin-top: 1.5rem !important;
padding-top: 0 !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
background: transparent !important;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer-info {
display: block !important;
}

body.page-Test_home #footer-places,
body.page-Test_home #footer-icon,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

body.page-Test_home .citizen-footer-tagline,
body.page-Test_home #footer-tagline,
body.page-Test_home #footer .citizen-footer__tagline {
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer a,
body.page-Test_home #footer a:visited {
color: var(--color-base--subtle, #b8b8b8) !important;
text-decoration: none !important;
}

body.page-Test_home #footer a:hover {
color: var(--color-base, #ffffff) !important;
text-decoration: underline !important;
}

/* ==========================================================
RESPONSIVE
========================================================== */

/* Finestra intermedia:
1. hero ancora a due colonne
2. indice sotto
3. colonna informativa sotto l'indice */

@media (max-width: 1250px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 4rem));
min-height: auto;
margin: 0 auto;
padding: 2rem 0 3rem;
display: block;
}

body.page-Test_home .mw-parser-output .ce-home-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
align-items: start;
margin-bottom: 4.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1 / span 2;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 3;
grid-row: 1;
justify-self: start;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding-left: 0;
border-left: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 4rem;
}
}

/* Finestra più stretta:
hero passa a una colonna, ma ordine resta:
titolo/testo, foto, indice, blocchi informativi */

@media (max-width: 900px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 2rem));
padding: 1.5rem 0 3rem;
}

body.page-Test_home .mw-parser-output .ce-hero {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-bottom: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 300px;
height: 450px;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 300px !important;
height: 450px !important;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: 1fr;
gap: 1.7rem;
}

body.page-Test_home .mw-parser-output .ce-index-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2rem;
border-left: 0;
padding-left: 0;
border-top: 0;
padding-top: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 0;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
line-height: 0.98;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.05rem;
}
}

/* Mobile molto stretto */

@media (max-width: 520px) {
body.page-Test_home .mw-parser-output .ce-home {
width: 100%;
padding: 1rem 0 2.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.3rem, 13vw, 3.3rem);
}

body.page-Test_home .mw-parser-output .ce-hero-visual,
body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 260px !important;
height: 390px !important;
}
}
/* === [HOME] fine === */

/* === [MAPPA] inizio === */
/* Index — sommario della "rivista". Tipografia editoriale CONDIVISA con home e
progetti (occhiello / titolo da prima pagina / lead): vedi la "regola
tipografica" nel README. VE-safe: solo wikitext nativo (liste di definizione
; :), nessun div di layout, niente sezioni espandibili. Stile su body.page-Index. */

body.page-Index #bodyContent,
body.page-Index .mw-parser-output {
max-width: 56rem;
}

/* Titolo della pagina = titolo da prima pagina (come i progetti, .ce-headline) */
body.page-Index #firstHeading {
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* riga d'apertura = lead */
body.page-Index .mw-parser-output > p:first-of-type {
margin: .4rem 0 2.6rem;
max-width: 46rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}

/* ogni sezione è un blocco di lista di definizione; numerazione continua */
body.page-Index .mw-parser-output {
counter-reset: sez;
}
body.page-Index .mw-parser-output dl {
margin: 0 0 2.4rem;
}

/* etichetta di sezione = OCCHIELLO, nel ROSSO della home + numero (richiamo e
stacco visivo tra le sezioni). */
body.page-Index .mw-parser-output dt {
counter-increment: sez;
margin: 0 0 1rem;
font-size: .9rem;
font-weight: 500;
letter-spacing: .04em;
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.page-Index .mw-parser-output dt::before {
content: counter( sez, decimal-leading-zero );
margin-right: .7em;
font-variant-numeric: tabular-nums;
}

/* voce = titolo da prima pagina (ridotto) + descrizione sotto.
Ritmo verticale regolare: il titolo è un BLOCCO con un solo margin; la
descrizione è il testo della dd, con la sua interlinea. */
body.page-Index .mw-parser-output dd {
margin: 0 0 1.4rem;
color: var( --color-base--subtle, #b8b8b8 );
font-size: 1.02rem;
line-height: 1.55;
}
body.page-Index .mw-parser-output dd:last-child {
margin-bottom: 0;
}

/* titolo della voce: BIANCO TIPOGRAFICO, mai bluetto */
body.page-Index .mw-parser-output dd b {
display: block;
margin: 0 0 .35rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.2;
}
body.page-Index .mw-parser-output dd b a,
body.page-Index .mw-parser-output dd b a:visited {
color: #ffffff;
text-decoration: none;
}
body.page-Index .mw-parser-output dd b a:hover {
text-decoration: underline;
}
/* === [MAPPA] fine === */

/* === [DEV] inizio === */
/* ==========================================================
Dev — Dashboard "a riquadri per progetto" (pagina centrale).
Stesso taglio editoriale di CinetecaSarda, ma l'indice è una griglia
di card (riquadri), non il widget nel rail. Wrapper .dev-dash.
Colori dei link: default Citizen (nessun override).
========================================================== */

.dev-dash {
color: var( --color-base, #fff );
}

/* Testata editoriale */
.dev-dash .occhiello {
margin: 0 0 .7rem;
font-size: var( --font-size-x-small, .8125rem );
letter-spacing: .07em;
text-transform: uppercase;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-headline {
margin: 0 0 1rem;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}
.dev-dash .dev-lead {
margin: 0 0 .5rem;
max-width: 64ch;
font-size: 1.1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* Riquadri "a colonne" (masonry): impacchettano senza vuoti verticali */
.dev-dash .dev-griglia {
columns: 290px;
column-gap: 1.3rem;
margin-top: 2rem;
}

/* Riquadro = progetto */
.dev-dash .dev-card {
break-inside: avoid;
margin: 0 0 1.3rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
border-radius: 8px;
background: rgba( 255, 255, 255, .02 );
}
.dev-dash .dev-card-titolo {
margin-bottom: .5rem;
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
}
.dev-dash .dev-card-sub {
margin: .7rem 0 .2rem;
font-size: var( --font-size-xx-small, .75rem );
text-transform: uppercase;
letter-spacing: .07em;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.dev-dash .dev-card li {
padding: .18rem 0;
line-height: 1.4;
font-size: .95rem;
}

/* Pagine centrali dei sotto-progetti (editoriale + indice nel rail): nascondi
il titolo standard di Citizen — l'headline vive nel contenuto (.ce-headline). */
body.page-Dev_Tapescan #firstHeading,
body.page-Dev_Tapescan .mw-page-title-main,
body.page-Dev_TBC #firstHeading,
body.page-Dev_TBC .mw-page-title-main,
body.page-Dev_Robota #firstHeading,
body.page-Dev_Robota .mw-page-title-main {
display: none !important;
}

/* Dev: link dell'indice e dell'editoriale col colore di DEFAULT di Citizen
(non il giallo brand di CinetecaSarda, hardcodato in [INDICE]). Specificità
più alta → vince senza toccare CinetecaSarda. */
body.ns-3012 .archivio-indice .ai-voci a,
body.ns-3012 .archivio-indice .ai-voci a:visited,
body.ns-3012 .archivio-indice .ai-licenza a,
body.ns-3012 .archivio-indice .ai-licenza a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
body.ns-3012 .archivio-editoriale {
--ns-accent: var( --color-link, var( --color-progressive, #36c ) );
}

/* Testo introduttivo (lead) dei sotto-progetti Dev: colore di DEFAULT di
Citizen (testo base), non il grigio "subtle" editoriale di CinetecaSarda. */
body.ns-3012 .archivio-editoriale .lead p {
color: var( --color-base, #fff );
}
/* === [DEV] fine === */

/* === [NS-MALASTRADA] inizio === */
/* malastradafilm (ns 3010): identità ACROMATICA (bianco/nero), come il sito
malastradafilm.com — niente accent colorato (al contrario del giallo
CinetecaSarda). Link dell'indice grigio tipografico, voce TOC attiva bianca. */

body.ns-3010 .archivio-editoriale {
--ns-accent: var( --color-base, #fff );
}
/* link dell'indice (sia struttura a div .ai-voci, sia elenco puntato .ai-body) */
body.ns-3010 .archivio-indice .ai-body a,
body.ns-3010 .archivio-indice .ai-body a:visited,
body.ns-3010 .archivio-indice .ai-licenza a,
body.ns-3010 .archivio-indice .ai-licenza a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}
/* titoli di sezione del menu (Idee, Opere e azioni, Scritti) nel ROSSO della home */
body.ns-3010 .archivio-indice .ai-body > ul > li {
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Dashboard: il titolo Citizen è nascosto (l'headline vive nella testata-template);
il racconto è scritto come testo nativo della pagina → lo stiliamo come "lead". */
body.page-Malastradafilm_Dashboard #firstHeading,
body.page-Malastradafilm_Dashboard .mw-page-title-main {
display: none !important;
}
body.page-Malastradafilm_Dashboard .mw-parser-output > p {
max-width: 42rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
/* === [NS-MALASTRADA] fine === */

Template:Indice Malastradafilm/voci

2026-06-16T21:30:33Z

Cranio is thinking: spostato in Malastradafilm:Menu

Il menu è stato spostato in '''[[Malastradafilm:Menu]]''' (namespace dell'archivio, permessi ristretti). Questa pagina non è più usata.

Template:Indice Malastradafilm

2026-06-16T21:30:31Z

Cranio is thinking: transclude Malastradafilm:Menu + ✎ verso il namespace ristretto

<includeonly><div class="archivio-indice {{#if:{{{rail|}}}|ai-rail|}}">
<div class="ai-testata">[[Malastradafilm:Dashboard|Dashboard]]<span class="ai-toggle" role="button" tabindex="0"></span></div>
<div class="ai-body">
{{Malastradafilm:Menu}}
</div>
<div class="ai-modifica plainlinks">[{{fullurl:Malastradafilm:Menu|veaction=edit}} ✎ Modifica il menu]</div>
</div></includeonly><noinclude>
'''Cornice''' dell'indice d'archivio di malastradafilm (compare nel rail laterale).

Il '''menu''' (le voci) sta nella pagina '''[[Malastradafilm:Menu]]''' — dentro il namespace dell'archivio, quindi modificabile solo dal gruppo '''malastradafilm''' (+ sysop), come i contenuti. È un semplice elenco puntato:
* <code>*</code> = una '''sezione''' (es. «Idee»);
* <code>**</code> = una '''pagina''': <code><nowiki>** [[Malastradafilm:Titolo|Etichetta]]</nowiki></code>.

Si modifica in VisualEditor dal link «✎ Modifica il menu» nel widget (dalla pagina '''in lettura'''). Questa cornice è solo la struttura e non va toccata.

<templatedata>
{
"description": "SOLO LA CORNICE — non modificare qui. Le voci del menu stanno in Malastradafilm:Menu (namespace dell'archivio, ristretto al gruppo). Per modificarle: dalla pagina IN LETTURA clicca «✎ Modifica il menu». rail=1 lo colloca nel rail, già passato da IntestazionePagine.",
"params": {
"rail": {
"label": "Rail",
"description": "Metti 1 per mostrarlo nel rail laterale (già impostato da IntestazionePagine).",
"type": "string",
"required": false
}
}
}
</templatedata>
[[Category:Template di struttura]]
</noinclude>

MediaWiki:Common.css

2026-06-16T21:21:17Z

Cranio is thinking: menu malastradafilm: titoli di sezione in rosso (come home)

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
display:block;
font-size:0.85em;
margin-top:-0.3em;
margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
color:inherit;
}

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
(ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
color: #ffffff;
}
body.ns-3004 #firstHeading::before {
content: "Cineteca Sarda";
display: block;
margin-bottom: .35rem;
font-size: .8rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
display: none;
}
/* === [NS-BRAND] fine === */

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 300px;
gap: 3.5rem;
align-items: start;
}
.archivio-editoriale .art-main {
min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
margin: 0 0 .7rem;
font-size: .9rem;
letter-spacing: .04em;
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
border: 0;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
margin: 0;
max-width: none;
}
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
margin-bottom: 0;
}
.archivio-editoriale .lead strong {
color: var( --color-base, #fff );
font-weight: 600;
}

/* Riga "Prototipo di consultazione": blocco in evidenza (accent a sinistra) */
.archivio-editoriale .ce-prototipo {
margin: 1.8rem 0 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var( --ns-accent );
}
.archivio-editoriale .ce-prototipo-eti {
font-size: .92rem;
font-weight: 600;
color: #ffffff;
margin-bottom: .2rem;
}
.archivio-editoriale .ce-prototipo p {
margin: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
margin: 0 0 .4rem;
padding-bottom: .55rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
padding: .7rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
border-bottom: 0;
}
.archivio-editoriale .idx-eti {
margin-bottom: .2rem;
font-size: .98rem;
font-weight: 600;
color: #ffffff;
}
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
font-weight: 500;
text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
.archivio-editoriale .art-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
Indice d'archivio (sorgente unica {{Indice <NS>}}).
Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
(sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
Citizen (--font-size-*) per armonia con la TOC.
========================================================== */

.archivio-indice {
font-size: var( --font-size-small, .875rem );
line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
float: right;
width: 280px;
margin: .2rem 0 1.4rem 2rem;
padding-left: 1.4rem;
border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
.archivio-indice.ai-rail {
float: none;
width: auto;
margin: 0 0 1.6rem;
padding-left: 0;
border-left: 0;
}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
float: none;
width: auto;
margin: 0 0 1rem;
padding: 0;
border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
padding-bottom: .45rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
font-size: var( --font-size-x-small, .8125rem );
text-transform: uppercase;
letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
cursor: pointer;
user-select: none;
line-height: 1;
padding: .1rem .25rem;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
content: "▾";
display: inline-block;
font-size: .9em;
transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
display: none;
}
.archivio-indice .ai-toggle:hover {
color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
padding: .5rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
border-bottom: 0;
}
.archivio-indice .ai-eti {
margin-bottom: .12rem;
font-size: var( --font-size-small, .875rem );
font-weight: 600;
color: #ffffff;
}
.archivio-indice .ai-voci {
font-size: var( --font-size-small, .875rem );
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
color: #e7b142;
font-weight: 500;
text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
text-decoration: underline;
}

/* Riga licenza (sempre visibile, anche con indice chiuso) */
.archivio-indice .ai-licenza {
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
font-size: var( --font-size-x-small, .8125rem );
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}
.archivio-indice .ai-licenza a,
.archivio-indice .ai-licenza a:visited {
color: #e7b142;
text-decoration: none;
}
.archivio-indice .ai-licenza a:hover {
text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
color: #e7b142;
font-weight: 600;
}

/* Indice a LISTE native (variante editabile come elenco puntato in VE):
"* sezione" + "** pagina". Stesso look dei blocchi a div .ai-eti/.ai-voci.
Va nel blocco [INDICE] di Common.css. */
.archivio-indice .ai-body ul {
list-style: none;
margin: 0;
padding: 0;
}
.archivio-indice .ai-body > ul > li {
margin: 0 0 .8rem;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-body > ul > li > ul {
margin: .35rem 0 0;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.archivio-indice .ai-body > ul > li > ul > li {
margin: .12rem 0;
font-size: .92rem;
line-height: 1.45;
}
.archivio-indice .ai-body > ul > li > ul a,
.archivio-indice .ai-body > ul > li > ul a:visited {
color: var( --ns-accent, #e7b142 );
text-decoration: none;
}
.archivio-indice .ai-body > ul > li > ul a:hover {
text-decoration: underline;
}

/* link modifica menu */
.archivio-indice .ai-modifica {
margin-top: .8rem;
padding-top: .6rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .08 ) );
font-size: .76rem;
}
.archivio-indice .ai-modifica a,
.archivio-indice .ai-modifica a:visited {
color: var( --color-base--subtle, #b8b8b8 );
text-decoration: none;
}
.archivio-indice .ai-modifica a:hover {
text-decoration: underline;
}
/* === [INDICE] fine === */

/* === [HOME] inizio === */
/* ==========================================================
HOMEPAGE CINETECA DELL'ETNA
Pagina di test: Test_home
========================================================== */

/* Nasconde titolo standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-header,
body.page-Test_home .citizen-body-header,
body.page-Test_home .mw-body-header,
body.page-Test_home #firstHeading,
body.page-Test_home .firstHeading,
body.page-Test_home .mw-first-heading,
body.page-Test_home .mw-page-title-main {
display: none !important;
}

/* Nasconde colonna destra standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-sidebar,
body.page-Test_home .citizen-toc,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-lastmod,
body.page-Test_home .citizen-page-actions-more,
body.page-Test_home .toc,
body.page-Test_home #toc {
display: none !important;
}

/* Nasconde informazioni ultima modifica solo nella pagina Test_home */

body.page-Test_home .mw-parser-output .printfooter,
body.page-Test_home .mw-parser-output .catlinks,
body.page-Test_home .mw-parser-output .mw-footer-info,
body.page-Test_home .page-info,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-page-footer,
body.page-Test_home .citizen-body-footer,
body.page-Test_home .mw-body-footer,
body.page-Test_home .mw-last-modified,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

/* Allarga lo spazio utile della home dentro Citizen */

body.page-Test_home .citizen-body,
body.page-Test_home .citizen-body-container,
body.page-Test_home .citizen-body-content,
body.page-Test_home .citizen-page-container,
body.page-Test_home .mw-body,
body.page-Test_home .mw-body-content,
body.page-Test_home .mw-parser-output,
body.page-Test_home #bodyContent,
body.page-Test_home #content {
max-width: none !important;
width: 100% !important;
}

body.page-Test_home .citizen-body {
grid-template-columns: minmax(0, 1fr) !important;
}

/* Contenitore generale home */

body.page-Test_home .mw-parser-output .ce-home {
width: min(1300px, calc(100vw - 14rem));
max-width: none !important;
min-height: calc(100vh - 7rem);
margin: 0 auto;
padding: 2rem 0 2rem;
box-sizing: border-box;
overflow-x: hidden;
transform: none;

display: flex;
align-items: center;
}

/* Layout generale: contenuto principale + colonna laterale */

body.page-Test_home .mw-parser-output .ce-home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

/* Colonna laterale editoriale */

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
border-left: 0;
padding-left: 2rem;
}

/* Hero: testo a sinistra, foto verticale a destra */

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
min-width: 0;
align-self: start;
margin-top: 0;
padding-top: 0;
}

/* Occhiello / motto identitario */

body.page-Test_home .mw-parser-output .ce-hero-kicker {
margin-bottom: 1.4rem;
color: var(--color-base, #ffffff);
opacity: 0.72;
font-size: 0.92rem;
line-height: 1.2;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
}

/* Immagine verticale della home: solo foto, nessun box */

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 2;
grid-row: 1;
width: 300px;
height: 450px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
}

body.page-Test_home .mw-parser-output .ce-hero-visual > p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description {
display: block;
width: 300px !important;
height: 450px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
display: block;
width: 300px !important;
height: 450px !important;
max-width: none !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

/* Testo principale hero */

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 0.98;
margin: 0 0 1.5rem;
letter-spacing: -0.03em;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.15rem;
line-height: 1.55;
max-width: 760px;
color: var(--color-base--subtle, #b8b8b8);
}

/* Indice editoriale principale: libero, senza box */

body.page-Test_home .mw-parser-output .ce-home-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
width: 100%;
margin: 0;
padding-top: 0;
border: 0;
}

body.page-Test_home .mw-parser-output .ce-index-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-index-number {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.04em;
}

body.page-Test_home .mw-parser-output .ce-index-title {
margin-bottom: 0.65rem;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 600;
}

/* Index / Federated Archives Alliance / Contatti: rosso Citizen */

body.page-Test_home .mw-parser-output .ce-index-title,
body.page-Test_home .mw-parser-output .ce-index-title a,
body.page-Test_home .mw-parser-output .ce-index-title a:visited {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: none;
}

body.page-Test_home .mw-parser-output .ce-index-title a:hover {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: underline;
}

body.page-Test_home .mw-parser-output .ce-index-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 1rem;
line-height: 1.45;
max-width: 32em;
}

/* Box laterali leggeri, senza delimitazioni */

body.page-Test_home .mw-parser-output .ce-side-box {
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-side-box::before {
content: none;
display: none;
}

body.page-Test_home .mw-parser-output .ce-side-label {
margin-bottom: 0.6rem;
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* Titoli colonna destra: bianchi */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:visited {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.1;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}

body.page-Test_home .mw-parser-output .ce-side-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.95rem;
line-height: 1.45;
}

body.page-Test_home .mw-parser-output .ce-side-link {
margin-top: 0.85rem;
font-size: 0.95rem;
}

/* Link azione colonna destra: bianchi, blu Citizen solo all'hover */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:visited {
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:hover {
color: var(--color-progressive, #36c) !important;
text-decoration: underline !important;
}

/* Footer Citizen visibile e alleggerito solo nella home */

body.page-Test_home #footer {
display: block !important;
margin-top: 1.5rem !important;
padding-top: 0 !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
background: transparent !important;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer-info {
display: block !important;
}

body.page-Test_home #footer-places,
body.page-Test_home #footer-icon,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

body.page-Test_home .citizen-footer-tagline,
body.page-Test_home #footer-tagline,
body.page-Test_home #footer .citizen-footer__tagline {
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer a,
body.page-Test_home #footer a:visited {
color: var(--color-base--subtle, #b8b8b8) !important;
text-decoration: none !important;
}

body.page-Test_home #footer a:hover {
color: var(--color-base, #ffffff) !important;
text-decoration: underline !important;
}

/* ==========================================================
RESPONSIVE
========================================================== */

/* Finestra intermedia:
1. hero ancora a due colonne
2. indice sotto
3. colonna informativa sotto l'indice */

@media (max-width: 1250px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 4rem));
min-height: auto;
margin: 0 auto;
padding: 2rem 0 3rem;
display: block;
}

body.page-Test_home .mw-parser-output .ce-home-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
align-items: start;
margin-bottom: 4.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1 / span 2;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 3;
grid-row: 1;
justify-self: start;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding-left: 0;
border-left: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 4rem;
}
}

/* Finestra più stretta:
hero passa a una colonna, ma ordine resta:
titolo/testo, foto, indice, blocchi informativi */

@media (max-width: 900px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 2rem));
padding: 1.5rem 0 3rem;
}

body.page-Test_home .mw-parser-output .ce-hero {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-bottom: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 300px;
height: 450px;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 300px !important;
height: 450px !important;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: 1fr;
gap: 1.7rem;
}

body.page-Test_home .mw-parser-output .ce-index-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2rem;
border-left: 0;
padding-left: 0;
border-top: 0;
padding-top: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 0;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
line-height: 0.98;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.05rem;
}
}

/* Mobile molto stretto */

@media (max-width: 520px) {
body.page-Test_home .mw-parser-output .ce-home {
width: 100%;
padding: 1rem 0 2.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.3rem, 13vw, 3.3rem);
}

body.page-Test_home .mw-parser-output .ce-hero-visual,
body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 260px !important;
height: 390px !important;
}
}
/* === [HOME] fine === */

/* === [MAPPA] inizio === */
/* Index — sommario della "rivista". Tipografia editoriale CONDIVISA con home e
progetti (occhiello / titolo da prima pagina / lead): vedi la "regola
tipografica" nel README. VE-safe: solo wikitext nativo (liste di definizione
; :), nessun div di layout, niente sezioni espandibili. Stile su body.page-Index. */

body.page-Index #bodyContent,
body.page-Index .mw-parser-output {
max-width: 56rem;
}

/* Titolo della pagina = titolo da prima pagina (come i progetti, .ce-headline) */
body.page-Index #firstHeading {
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* riga d'apertura = lead */
body.page-Index .mw-parser-output > p:first-of-type {
margin: .4rem 0 2.6rem;
max-width: 46rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}

/* ogni sezione è un blocco di lista di definizione; numerazione continua */
body.page-Index .mw-parser-output {
counter-reset: sez;
}
body.page-Index .mw-parser-output dl {
margin: 0 0 2.4rem;
}

/* etichetta di sezione = OCCHIELLO, nel ROSSO della home + numero (richiamo e
stacco visivo tra le sezioni). */
body.page-Index .mw-parser-output dt {
counter-increment: sez;
margin: 0 0 1rem;
font-size: .9rem;
font-weight: 500;
letter-spacing: .04em;
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.page-Index .mw-parser-output dt::before {
content: counter( sez, decimal-leading-zero );
margin-right: .7em;
font-variant-numeric: tabular-nums;
}

/* voce = titolo da prima pagina (ridotto) + descrizione sotto.
Ritmo verticale regolare: il titolo è un BLOCCO con un solo margin; la
descrizione è il testo della dd, con la sua interlinea. */
body.page-Index .mw-parser-output dd {
margin: 0 0 1.4rem;
color: var( --color-base--subtle, #b8b8b8 );
font-size: 1.02rem;
line-height: 1.55;
}
body.page-Index .mw-parser-output dd:last-child {
margin-bottom: 0;
}

/* titolo della voce: BIANCO TIPOGRAFICO, mai bluetto */
body.page-Index .mw-parser-output dd b {
display: block;
margin: 0 0 .35rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.2;
}
body.page-Index .mw-parser-output dd b a,
body.page-Index .mw-parser-output dd b a:visited {
color: #ffffff;
text-decoration: none;
}
body.page-Index .mw-parser-output dd b a:hover {
text-decoration: underline;
}
/* === [MAPPA] fine === */

/* === [DEV] inizio === */
/* ==========================================================
Dev — Dashboard "a riquadri per progetto" (pagina centrale).
Stesso taglio editoriale di CinetecaSarda, ma l'indice è una griglia
di card (riquadri), non il widget nel rail. Wrapper .dev-dash.
Colori dei link: default Citizen (nessun override).
========================================================== */

.dev-dash {
color: var( --color-base, #fff );
}

/* Testata editoriale */
.dev-dash .occhiello {
margin: 0 0 .7rem;
font-size: var( --font-size-x-small, .8125rem );
letter-spacing: .07em;
text-transform: uppercase;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-headline {
margin: 0 0 1rem;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}
.dev-dash .dev-lead {
margin: 0 0 .5rem;
max-width: 64ch;
font-size: 1.1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* Riquadri "a colonne" (masonry): impacchettano senza vuoti verticali */
.dev-dash .dev-griglia {
columns: 290px;
column-gap: 1.3rem;
margin-top: 2rem;
}

/* Riquadro = progetto */
.dev-dash .dev-card {
break-inside: avoid;
margin: 0 0 1.3rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
border-radius: 8px;
background: rgba( 255, 255, 255, .02 );
}
.dev-dash .dev-card-titolo {
margin-bottom: .5rem;
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
}
.dev-dash .dev-card-sub {
margin: .7rem 0 .2rem;
font-size: var( --font-size-xx-small, .75rem );
text-transform: uppercase;
letter-spacing: .07em;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.dev-dash .dev-card li {
padding: .18rem 0;
line-height: 1.4;
font-size: .95rem;
}

/* Pagine centrali dei sotto-progetti (editoriale + indice nel rail): nascondi
il titolo standard di Citizen — l'headline vive nel contenuto (.ce-headline). */
body.page-Dev_Tapescan #firstHeading,
body.page-Dev_Tapescan .mw-page-title-main,
body.page-Dev_TBC #firstHeading,
body.page-Dev_TBC .mw-page-title-main,
body.page-Dev_Robota #firstHeading,
body.page-Dev_Robota .mw-page-title-main {
display: none !important;
}

/* Dev: link dell'indice e dell'editoriale col colore di DEFAULT di Citizen
(non il giallo brand di CinetecaSarda, hardcodato in [INDICE]). Specificità
più alta → vince senza toccare CinetecaSarda. */
body.ns-3012 .archivio-indice .ai-voci a,
body.ns-3012 .archivio-indice .ai-voci a:visited,
body.ns-3012 .archivio-indice .ai-licenza a,
body.ns-3012 .archivio-indice .ai-licenza a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
body.ns-3012 .archivio-editoriale {
--ns-accent: var( --color-link, var( --color-progressive, #36c ) );
}

/* Testo introduttivo (lead) dei sotto-progetti Dev: colore di DEFAULT di
Citizen (testo base), non il grigio "subtle" editoriale di CinetecaSarda. */
body.ns-3012 .archivio-editoriale .lead p {
color: var( --color-base, #fff );
}
/* === [DEV] fine === */

/* === [NS-MALASTRADA] inizio === */
/* malastradafilm (ns 3010): identità ACROMATICA (bianco/nero), come il sito
malastradafilm.com — niente accent colorato (al contrario del giallo
CinetecaSarda). Link dell'indice grigio tipografico, voce TOC attiva bianca. */

body.ns-3010 .archivio-editoriale {
--ns-accent: var( --color-base, #fff );
}
/* link dell'indice (sia struttura a div .ai-voci, sia elenco puntato .ai-body) */
body.ns-3010 .archivio-indice .ai-body a,
body.ns-3010 .archivio-indice .ai-body a:visited,
body.ns-3010 .archivio-indice .ai-licenza a,
body.ns-3010 .archivio-indice .ai-licenza a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}
/* titoli di sezione del menu (Idee, Opere e azioni, Scritti) nel ROSSO della home */
body.ns-3010 .archivio-indice .ai-body > ul > li {
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Dashboard: il titolo Citizen è nascosto (l'headline vive nella testata-template);
il racconto è scritto come testo nativo della pagina → lo stiliamo come "lead". */
body.page-Malastradafilm_Dashboard #firstHeading,
body.page-Malastradafilm_Dashboard .mw-page-title-main {
display: none !important;
}
body.page-Malastradafilm_Dashboard .mw-parser-output > p {
max-width: 42rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
/* === [NS-MALASTRADA] fine === */

Template:Indice Malastradafilm

2026-06-16T21:16:19Z

Cranio is thinking: cornice: descrizione dialog più direttiva (edita /voci dalla lettura)

<includeonly><div class="archivio-indice {{#if:{{{rail|}}}|ai-rail|}}">
<div class="ai-testata">[[Malastradafilm:Dashboard|Dashboard]]<span class="ai-toggle" role="button" tabindex="0"></span></div>
<div class="ai-body">
{{Indice Malastradafilm/voci}}
</div>
<div class="ai-modifica plainlinks">[{{fullurl:Template:Indice Malastradafilm/voci|veaction=edit}} ✎ Modifica il menu]</div>
</div></includeonly><noinclude>
'''Indice d'archivio di malastradafilm''' (compare nel rail laterale).

Il '''menu''' (le voci) sta nella sotto-pagina '''[[Template:Indice Malastradafilm/voci]]''', che è un semplice elenco puntato:
* <code>*</code> = una '''sezione''' (es. «Idee»);
* <code>**</code> = una '''pagina''': <code><nowiki>** [[Malastradafilm:Titolo|Etichetta]]</nowiki></code>.

Si modifica '''in VisualEditor''' dal link «✎ Modifica il menu» nel widget (Invio = nuova voce, Tab = rientra sotto una sezione). Questo template è solo la cornice e non va toccato.

<templatedata>
{
"description": "SOLO LA CORNICE — non modificare qui. Per le voci del menu: chiudi questa finestra e, dalla pagina IN LETTURA, clicca «✎ Modifica il menu»; oppure apri direttamente Template:Indice Malastradafilm/voci. (In modifica i link dentro il widget non navigano: è normale in VisualEditor.) rail=1 lo colloca nel rail, già passato da IntestazionePagine.",
"params": {
"rail": {
"label": "Rail",
"description": "Metti 1 per mostrarlo nel rail laterale (già impostato da IntestazionePagine).",
"type": "string",
"required": false
}
}
}
</templatedata>
[[Category:Template di struttura]]
</noinclude>

MediaWiki:Common.css

2026-06-16T20:58:50Z

Cranio is thinking: Dashboard malastradafilm: stile lead nativo

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
display:block;
font-size:0.85em;
margin-top:-0.3em;
margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
color:inherit;
}

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
(ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
color: #ffffff;
}
body.ns-3004 #firstHeading::before {
content: "Cineteca Sarda";
display: block;
margin-bottom: .35rem;
font-size: .8rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
display: none;
}
/* === [NS-BRAND] fine === */

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 300px;
gap: 3.5rem;
align-items: start;
}
.archivio-editoriale .art-main {
min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
margin: 0 0 .7rem;
font-size: .9rem;
letter-spacing: .04em;
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
border: 0;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
margin: 0;
max-width: none;
}
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
margin-bottom: 0;
}
.archivio-editoriale .lead strong {
color: var( --color-base, #fff );
font-weight: 600;
}

/* Riga "Prototipo di consultazione": blocco in evidenza (accent a sinistra) */
.archivio-editoriale .ce-prototipo {
margin: 1.8rem 0 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var( --ns-accent );
}
.archivio-editoriale .ce-prototipo-eti {
font-size: .92rem;
font-weight: 600;
color: #ffffff;
margin-bottom: .2rem;
}
.archivio-editoriale .ce-prototipo p {
margin: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
margin: 0 0 .4rem;
padding-bottom: .55rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
padding: .7rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
border-bottom: 0;
}
.archivio-editoriale .idx-eti {
margin-bottom: .2rem;
font-size: .98rem;
font-weight: 600;
color: #ffffff;
}
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
font-weight: 500;
text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
.archivio-editoriale .art-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
Indice d'archivio (sorgente unica {{Indice <NS>}}).
Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
(sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
Citizen (--font-size-*) per armonia con la TOC.
========================================================== */

.archivio-indice {
font-size: var( --font-size-small, .875rem );
line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
float: right;
width: 280px;
margin: .2rem 0 1.4rem 2rem;
padding-left: 1.4rem;
border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
.archivio-indice.ai-rail {
float: none;
width: auto;
margin: 0 0 1.6rem;
padding-left: 0;
border-left: 0;
}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
float: none;
width: auto;
margin: 0 0 1rem;
padding: 0;
border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
padding-bottom: .45rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
font-size: var( --font-size-x-small, .8125rem );
text-transform: uppercase;
letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
cursor: pointer;
user-select: none;
line-height: 1;
padding: .1rem .25rem;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
content: "▾";
display: inline-block;
font-size: .9em;
transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
display: none;
}
.archivio-indice .ai-toggle:hover {
color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
padding: .5rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
border-bottom: 0;
}
.archivio-indice .ai-eti {
margin-bottom: .12rem;
font-size: var( --font-size-small, .875rem );
font-weight: 600;
color: #ffffff;
}
.archivio-indice .ai-voci {
font-size: var( --font-size-small, .875rem );
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
color: #e7b142;
font-weight: 500;
text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
text-decoration: underline;
}

/* Riga licenza (sempre visibile, anche con indice chiuso) */
.archivio-indice .ai-licenza {
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
font-size: var( --font-size-x-small, .8125rem );
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}
.archivio-indice .ai-licenza a,
.archivio-indice .ai-licenza a:visited {
color: #e7b142;
text-decoration: none;
}
.archivio-indice .ai-licenza a:hover {
text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
color: #e7b142;
font-weight: 600;
}

/* Indice a LISTE native (variante editabile come elenco puntato in VE):
"* sezione" + "** pagina". Stesso look dei blocchi a div .ai-eti/.ai-voci.
Va nel blocco [INDICE] di Common.css. */
.archivio-indice .ai-body ul {
list-style: none;
margin: 0;
padding: 0;
}
.archivio-indice .ai-body > ul > li {
margin: 0 0 .8rem;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-body > ul > li > ul {
margin: .35rem 0 0;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.archivio-indice .ai-body > ul > li > ul > li {
margin: .12rem 0;
font-size: .92rem;
line-height: 1.45;
}
.archivio-indice .ai-body > ul > li > ul a,
.archivio-indice .ai-body > ul > li > ul a:visited {
color: var( --ns-accent, #e7b142 );
text-decoration: none;
}
.archivio-indice .ai-body > ul > li > ul a:hover {
text-decoration: underline;
}

/* link modifica menu */
.archivio-indice .ai-modifica {
margin-top: .8rem;
padding-top: .6rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .08 ) );
font-size: .76rem;
}
.archivio-indice .ai-modifica a,
.archivio-indice .ai-modifica a:visited {
color: var( --color-base--subtle, #b8b8b8 );
text-decoration: none;
}
.archivio-indice .ai-modifica a:hover {
text-decoration: underline;
}
/* === [INDICE] fine === */

/* === [HOME] inizio === */
/* ==========================================================
HOMEPAGE CINETECA DELL'ETNA
Pagina di test: Test_home
========================================================== */

/* Nasconde titolo standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-header,
body.page-Test_home .citizen-body-header,
body.page-Test_home .mw-body-header,
body.page-Test_home #firstHeading,
body.page-Test_home .firstHeading,
body.page-Test_home .mw-first-heading,
body.page-Test_home .mw-page-title-main {
display: none !important;
}

/* Nasconde colonna destra standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-sidebar,
body.page-Test_home .citizen-toc,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-lastmod,
body.page-Test_home .citizen-page-actions-more,
body.page-Test_home .toc,
body.page-Test_home #toc {
display: none !important;
}

/* Nasconde informazioni ultima modifica solo nella pagina Test_home */

body.page-Test_home .mw-parser-output .printfooter,
body.page-Test_home .mw-parser-output .catlinks,
body.page-Test_home .mw-parser-output .mw-footer-info,
body.page-Test_home .page-info,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-page-footer,
body.page-Test_home .citizen-body-footer,
body.page-Test_home .mw-body-footer,
body.page-Test_home .mw-last-modified,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

/* Allarga lo spazio utile della home dentro Citizen */

body.page-Test_home .citizen-body,
body.page-Test_home .citizen-body-container,
body.page-Test_home .citizen-body-content,
body.page-Test_home .citizen-page-container,
body.page-Test_home .mw-body,
body.page-Test_home .mw-body-content,
body.page-Test_home .mw-parser-output,
body.page-Test_home #bodyContent,
body.page-Test_home #content {
max-width: none !important;
width: 100% !important;
}

body.page-Test_home .citizen-body {
grid-template-columns: minmax(0, 1fr) !important;
}

/* Contenitore generale home */

body.page-Test_home .mw-parser-output .ce-home {
width: min(1300px, calc(100vw - 14rem));
max-width: none !important;
min-height: calc(100vh - 7rem);
margin: 0 auto;
padding: 2rem 0 2rem;
box-sizing: border-box;
overflow-x: hidden;
transform: none;

display: flex;
align-items: center;
}

/* Layout generale: contenuto principale + colonna laterale */

body.page-Test_home .mw-parser-output .ce-home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

/* Colonna laterale editoriale */

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
border-left: 0;
padding-left: 2rem;
}

/* Hero: testo a sinistra, foto verticale a destra */

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
min-width: 0;
align-self: start;
margin-top: 0;
padding-top: 0;
}

/* Occhiello / motto identitario */

body.page-Test_home .mw-parser-output .ce-hero-kicker {
margin-bottom: 1.4rem;
color: var(--color-base, #ffffff);
opacity: 0.72;
font-size: 0.92rem;
line-height: 1.2;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
}

/* Immagine verticale della home: solo foto, nessun box */

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 2;
grid-row: 1;
width: 300px;
height: 450px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
}

body.page-Test_home .mw-parser-output .ce-hero-visual > p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description {
display: block;
width: 300px !important;
height: 450px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
display: block;
width: 300px !important;
height: 450px !important;
max-width: none !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

/* Testo principale hero */

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 0.98;
margin: 0 0 1.5rem;
letter-spacing: -0.03em;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.15rem;
line-height: 1.55;
max-width: 760px;
color: var(--color-base--subtle, #b8b8b8);
}

/* Indice editoriale principale: libero, senza box */

body.page-Test_home .mw-parser-output .ce-home-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
width: 100%;
margin: 0;
padding-top: 0;
border: 0;
}

body.page-Test_home .mw-parser-output .ce-index-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-index-number {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.04em;
}

body.page-Test_home .mw-parser-output .ce-index-title {
margin-bottom: 0.65rem;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 600;
}

/* Index / Federated Archives Alliance / Contatti: rosso Citizen */

body.page-Test_home .mw-parser-output .ce-index-title,
body.page-Test_home .mw-parser-output .ce-index-title a,
body.page-Test_home .mw-parser-output .ce-index-title a:visited {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: none;
}

body.page-Test_home .mw-parser-output .ce-index-title a:hover {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: underline;
}

body.page-Test_home .mw-parser-output .ce-index-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 1rem;
line-height: 1.45;
max-width: 32em;
}

/* Box laterali leggeri, senza delimitazioni */

body.page-Test_home .mw-parser-output .ce-side-box {
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-side-box::before {
content: none;
display: none;
}

body.page-Test_home .mw-parser-output .ce-side-label {
margin-bottom: 0.6rem;
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* Titoli colonna destra: bianchi */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:visited {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.1;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}

body.page-Test_home .mw-parser-output .ce-side-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.95rem;
line-height: 1.45;
}

body.page-Test_home .mw-parser-output .ce-side-link {
margin-top: 0.85rem;
font-size: 0.95rem;
}

/* Link azione colonna destra: bianchi, blu Citizen solo all'hover */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:visited {
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:hover {
color: var(--color-progressive, #36c) !important;
text-decoration: underline !important;
}

/* Footer Citizen visibile e alleggerito solo nella home */

body.page-Test_home #footer {
display: block !important;
margin-top: 1.5rem !important;
padding-top: 0 !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
background: transparent !important;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer-info {
display: block !important;
}

body.page-Test_home #footer-places,
body.page-Test_home #footer-icon,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

body.page-Test_home .citizen-footer-tagline,
body.page-Test_home #footer-tagline,
body.page-Test_home #footer .citizen-footer__tagline {
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer a,
body.page-Test_home #footer a:visited {
color: var(--color-base--subtle, #b8b8b8) !important;
text-decoration: none !important;
}

body.page-Test_home #footer a:hover {
color: var(--color-base, #ffffff) !important;
text-decoration: underline !important;
}

/* ==========================================================
RESPONSIVE
========================================================== */

/* Finestra intermedia:
1. hero ancora a due colonne
2. indice sotto
3. colonna informativa sotto l'indice */

@media (max-width: 1250px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 4rem));
min-height: auto;
margin: 0 auto;
padding: 2rem 0 3rem;
display: block;
}

body.page-Test_home .mw-parser-output .ce-home-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
align-items: start;
margin-bottom: 4.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1 / span 2;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 3;
grid-row: 1;
justify-self: start;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding-left: 0;
border-left: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 4rem;
}
}

/* Finestra più stretta:
hero passa a una colonna, ma ordine resta:
titolo/testo, foto, indice, blocchi informativi */

@media (max-width: 900px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 2rem));
padding: 1.5rem 0 3rem;
}

body.page-Test_home .mw-parser-output .ce-hero {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-bottom: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 300px;
height: 450px;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 300px !important;
height: 450px !important;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: 1fr;
gap: 1.7rem;
}

body.page-Test_home .mw-parser-output .ce-index-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2rem;
border-left: 0;
padding-left: 0;
border-top: 0;
padding-top: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 0;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
line-height: 0.98;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.05rem;
}
}

/* Mobile molto stretto */

@media (max-width: 520px) {
body.page-Test_home .mw-parser-output .ce-home {
width: 100%;
padding: 1rem 0 2.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.3rem, 13vw, 3.3rem);
}

body.page-Test_home .mw-parser-output .ce-hero-visual,
body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 260px !important;
height: 390px !important;
}
}
/* === [HOME] fine === */

/* === [MAPPA] inizio === */
/* Index — sommario della "rivista". Tipografia editoriale CONDIVISA con home e
progetti (occhiello / titolo da prima pagina / lead): vedi la "regola
tipografica" nel README. VE-safe: solo wikitext nativo (liste di definizione
; :), nessun div di layout, niente sezioni espandibili. Stile su body.page-Index. */

body.page-Index #bodyContent,
body.page-Index .mw-parser-output {
max-width: 56rem;
}

/* Titolo della pagina = titolo da prima pagina (come i progetti, .ce-headline) */
body.page-Index #firstHeading {
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* riga d'apertura = lead */
body.page-Index .mw-parser-output > p:first-of-type {
margin: .4rem 0 2.6rem;
max-width: 46rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}

/* ogni sezione è un blocco di lista di definizione; numerazione continua */
body.page-Index .mw-parser-output {
counter-reset: sez;
}
body.page-Index .mw-parser-output dl {
margin: 0 0 2.4rem;
}

/* etichetta di sezione = OCCHIELLO, nel ROSSO della home + numero (richiamo e
stacco visivo tra le sezioni). */
body.page-Index .mw-parser-output dt {
counter-increment: sez;
margin: 0 0 1rem;
font-size: .9rem;
font-weight: 500;
letter-spacing: .04em;
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.page-Index .mw-parser-output dt::before {
content: counter( sez, decimal-leading-zero );
margin-right: .7em;
font-variant-numeric: tabular-nums;
}

/* voce = titolo da prima pagina (ridotto) + descrizione sotto.
Ritmo verticale regolare: il titolo è un BLOCCO con un solo margin; la
descrizione è il testo della dd, con la sua interlinea. */
body.page-Index .mw-parser-output dd {
margin: 0 0 1.4rem;
color: var( --color-base--subtle, #b8b8b8 );
font-size: 1.02rem;
line-height: 1.55;
}
body.page-Index .mw-parser-output dd:last-child {
margin-bottom: 0;
}

/* titolo della voce: BIANCO TIPOGRAFICO, mai bluetto */
body.page-Index .mw-parser-output dd b {
display: block;
margin: 0 0 .35rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.2;
}
body.page-Index .mw-parser-output dd b a,
body.page-Index .mw-parser-output dd b a:visited {
color: #ffffff;
text-decoration: none;
}
body.page-Index .mw-parser-output dd b a:hover {
text-decoration: underline;
}
/* === [MAPPA] fine === */

/* === [DEV] inizio === */
/* ==========================================================
Dev — Dashboard "a riquadri per progetto" (pagina centrale).
Stesso taglio editoriale di CinetecaSarda, ma l'indice è una griglia
di card (riquadri), non il widget nel rail. Wrapper .dev-dash.
Colori dei link: default Citizen (nessun override).
========================================================== */

.dev-dash {
color: var( --color-base, #fff );
}

/* Testata editoriale */
.dev-dash .occhiello {
margin: 0 0 .7rem;
font-size: var( --font-size-x-small, .8125rem );
letter-spacing: .07em;
text-transform: uppercase;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-headline {
margin: 0 0 1rem;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}
.dev-dash .dev-lead {
margin: 0 0 .5rem;
max-width: 64ch;
font-size: 1.1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* Riquadri "a colonne" (masonry): impacchettano senza vuoti verticali */
.dev-dash .dev-griglia {
columns: 290px;
column-gap: 1.3rem;
margin-top: 2rem;
}

/* Riquadro = progetto */
.dev-dash .dev-card {
break-inside: avoid;
margin: 0 0 1.3rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
border-radius: 8px;
background: rgba( 255, 255, 255, .02 );
}
.dev-dash .dev-card-titolo {
margin-bottom: .5rem;
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
}
.dev-dash .dev-card-sub {
margin: .7rem 0 .2rem;
font-size: var( --font-size-xx-small, .75rem );
text-transform: uppercase;
letter-spacing: .07em;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.dev-dash .dev-card li {
padding: .18rem 0;
line-height: 1.4;
font-size: .95rem;
}

/* Pagine centrali dei sotto-progetti (editoriale + indice nel rail): nascondi
il titolo standard di Citizen — l'headline vive nel contenuto (.ce-headline). */
body.page-Dev_Tapescan #firstHeading,
body.page-Dev_Tapescan .mw-page-title-main,
body.page-Dev_TBC #firstHeading,
body.page-Dev_TBC .mw-page-title-main,
body.page-Dev_Robota #firstHeading,
body.page-Dev_Robota .mw-page-title-main {
display: none !important;
}

/* Dev: link dell'indice e dell'editoriale col colore di DEFAULT di Citizen
(non il giallo brand di CinetecaSarda, hardcodato in [INDICE]). Specificità
più alta → vince senza toccare CinetecaSarda. */
body.ns-3012 .archivio-indice .ai-voci a,
body.ns-3012 .archivio-indice .ai-voci a:visited,
body.ns-3012 .archivio-indice .ai-licenza a,
body.ns-3012 .archivio-indice .ai-licenza a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
body.ns-3012 .archivio-editoriale {
--ns-accent: var( --color-link, var( --color-progressive, #36c ) );
}

/* Testo introduttivo (lead) dei sotto-progetti Dev: colore di DEFAULT di
Citizen (testo base), non il grigio "subtle" editoriale di CinetecaSarda. */
body.ns-3012 .archivio-editoriale .lead p {
color: var( --color-base, #fff );
}
/* === [DEV] fine === */

/* === [NS-MALASTRADA] inizio === */
/* malastradafilm (ns 3010): identità ACROMATICA (bianco/nero), come il sito
malastradafilm.com — niente accent colorato (al contrario del giallo
CinetecaSarda). Link dell'indice grigio tipografico, voce TOC attiva bianca. */

body.ns-3010 .archivio-editoriale {
--ns-accent: var( --color-base, #fff );
}
/* link dell'indice (sia struttura a div .ai-voci, sia elenco puntato .ai-body) */
body.ns-3010 .archivio-indice .ai-body a,
body.ns-3010 .archivio-indice .ai-body a:visited,
body.ns-3010 .archivio-indice .ai-licenza a,
body.ns-3010 .archivio-indice .ai-licenza a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}

/* Dashboard: il titolo Citizen è nascosto (l'headline vive nella testata-template);
il racconto è scritto come testo nativo della pagina → lo stiliamo come "lead". */
body.page-Malastradafilm_Dashboard #firstHeading,
body.page-Malastradafilm_Dashboard .mw-page-title-main {
display: none !important;
}
body.page-Malastradafilm_Dashboard .mw-parser-output > p {
max-width: 42rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
/* === [NS-MALASTRADA] fine === */

Template:Dashboard archivio

2026-06-16T20:58:46Z

Cranio is thinking: solo testata (occhiello+titolo); racconto e indice nella pagina

<includeonly>{{DISPLAYTITLE:{{{titolo|{{PAGENAME}}}}}}}<div class="archivio-editoriale">
<div class="occhiello">{{{occhiello|}}}</div>
<div class="ce-headline">{{{titolo|{{PAGENAME}}}}}</div>
</div></includeonly><noinclude>
'''Testata''' editoriale della Dashboard di un archivio: solo '''occhiello + titolo'''. Il '''racconto''' e l'''indice''' NON stanno qui — si scrivono direttamente nella pagina (testo normale + <code><nowiki>{{Indice <NS>|rail=1}}</nowiki></code>), così il testo resta '''editabile a mano in VisualEditor''', perimetrato, e l'indice è un widget a sé.

<templatedata>
{
"description": "Testata della Dashboard di un archivio: occhiello (cappello) + titolo da prima pagina. Il racconto e l'indice si scrivono nella pagina, fuori dal template, così il testo resta editabile direttamente in VisualEditor.",
"params": {
"occhiello": {
"label": "Occhiello",
"description": "Il cappello sopra il titolo.",
"type": "string",
"example": "ricerca · diffusione · eresia"
},
"titolo": {
"label": "Titolo",
"description": "Il titolo da prima pagina. Se vuoto usa il nome della pagina.",
"type": "string",
"example": "malastradafilm"
}
},
"format": "block"
}
</templatedata>
[[Category:Template di struttura]]
</noinclude>

Template:Indice Malastradafilm

2026-06-16T20:58:41Z

Cranio is thinking: cornice: transclude /voci + link ✎ in VisualEditor

Template:Indice Malastradafilm/voci

2026-06-16T20:58:40Z

Cranio is thinking: voci del menu (elenco puntato VE-editabile)

* Idee
** [[Malastradafilm:Genio collettivo|Genio collettivo]]
** [[Malastradafilm:Sensibile Comune|Sensibile Comune]]
* Opere e azioni
** [[Malastradafilm:Casamatta|Casamatta]]
** [[Malastradafilm:Comizio di andrea chenier|Comizio di Andrea Chénier]]
** [[Malastradafilm:In omaggio alla edipo re|In omaggio alla Edipo re]]
** [[Malastradafilm:Un mito antropologico televisivo|Un mito antropologico televisivo]]
* Scritti
** [[Malastradafilm:Cronaca. Strappo alla narrazione televisiva di Alessandra Ferlito|Cronaca — Alessandra Ferlito]]
** [[Malastradafilm:Testo della malastrada per Daniele Salaris|Per Daniele Salaris]]
** [[Malastradafilm:Un contributo per Ale di Tommaso Garufi|Per Ale — Tommaso Garufi]]

Template:Indice Malastradafilm

2026-06-16T20:46:56Z

Cranio is thinking: aggiunto link ✎ Modifica il menu + istruzioni

<includeonly><div class="archivio-indice {{#if:{{{rail|}}}|ai-rail|}}">
<div class="ai-testata">[[Malastradafilm:Dashboard|Dashboard]]<span class="ai-toggle" role="button" tabindex="0"></span></div>
<div class="ai-body">
* Idee
** [[Malastradafilm:Genio collettivo|Genio collettivo]]
** [[Malastradafilm:Sensibile Comune|Sensibile Comune]]
* Opere e azioni
** [[Malastradafilm:Casamatta|Casamatta]]
** [[Malastradafilm:Comizio di andrea chenier|Comizio di Andrea Chénier]]
** [[Malastradafilm:In omaggio alla edipo re|In omaggio alla Edipo re]]
** [[Malastradafilm:Un mito antropologico televisivo|Un mito antropologico televisivo]]
* Scritti
** [[Malastradafilm:Cronaca. Strappo alla narrazione televisiva di Alessandra Ferlito|Cronaca — Alessandra Ferlito]]
** [[Malastradafilm:Testo della malastrada per Daniele Salaris|Per Daniele Salaris]]
** [[Malastradafilm:Un contributo per Ale di Tommaso Garufi|Per Ale — Tommaso Garufi]]
</div>
<div class="ai-modifica plainlinks">[{{fullurl:Template:Indice Malastradafilm|action=edit}} ✎ Modifica il menu]</div>
</div></includeonly><noinclude>
'''Indice d'archivio di malastradafilm''' (compare nel rail laterale). Il menu è un '''elenco puntato''':
* <code>*</code> = una '''sezione''' del menu (es. «Idee»);
* <code>**</code> = una '''pagina''': <code><nowiki>** [[Malastradafilm:Titolo|Etichetta]]</nowiki></code>.

'''Per cambiare ordine, etichette o pagine''' modifica la lista qui sopra (modifica sorgente: trascini le righe per riordinare, cambi il testo dopo la <code>|</code> per l'etichetta). Dal widget c'è il link «✎ Modifica il menu» che porta dritto qui.

<templatedata>
{
"description": "Indice d'archivio di malastradafilm (rail). Il menu è un elenco puntato a due livelli (sezione / pagina) nel sorgente di questa pagina: per cambiare ordine, etichette o pagine modifica la lista. Nessun campo da compilare; rail=1 lo colloca nel rail ed è già passato da IntestazionePagine.",
"params": {
"rail": {
"label": "Rail",
"description": "Metti 1 per mostrarlo nel rail laterale (già impostato da IntestazionePagine).",
"type": "string",
"required": false
}
}
}
</templatedata>
[[Category:Template di struttura]]
</noinclude>

Template:Dashboard archivio

2026-06-16T20:46:53Z

Cranio is thinking: indice auto dal namespace (via campo indice → niente freeze in VE)

<includeonly>{{DISPLAYTITLE:{{{titolo|{{PAGENAME}}}}}}}<div class="archivio-editoriale">
<div class="art-layout">
<div class="art-main">
<div class="occhiello">{{{occhiello|}}}</div>
<div class="ce-headline">{{{titolo|{{PAGENAME}}}}}</div>
<div class="lead">
{{{testo|}}}
</div>
</div>
<div class="art-aside">{{#ifexist:Template:Indice {{NAMESPACE}}|{{Indice {{NAMESPACE}}}}|}}</div>
</div>
</div></includeonly><noinclude>
Testata editoriale della '''Dashboard''' di un archivio: occhiello + titolo da prima pagina + racconto. L'indice d'archivio si aggancia '''da solo''' (legge <code>Template:Indice <NomeNamespace></code>): non è un campo da compilare. Pensato per essere editato '''a campi in VisualEditor'''.

Per modificare il '''menu''' dell'indice (ordine, etichette, pagine) si modifica <code>Template:Indice <NomeNamespace></code> — vedi il link «Modifica il menu» nel widget.

<templatedata>
{
"description": "Testata editoriale della Dashboard di un archivio (occhiello, titolo, racconto). L'indice si aggancia automaticamente dal namespace. In VisualEditor si modifica a campi: il layout non si rompe.",
"params": {
"occhiello": {
"label": "Occhiello",
"description": "Il cappello sopra il titolo (piccolo). Es. il sottotitolo dell'archivio.",
"type": "string",
"example": "ricerca · diffusione · eresia"
},
"titolo": {
"label": "Titolo",
"description": "Il titolo da prima pagina. Se vuoto usa il nome della pagina.",
"type": "string",
"example": "malastradafilm"
},
"testo": {
"label": "Racconto (lead)",
"description": "Il testo introduttivo. Più paragrafi: separali con una riga vuota.",
"type": "content"
}
},
"format": "block"
}
</templatedata>
[[Category:Template di struttura]]
</noinclude>

MediaWiki:Common.css

2026-06-16T20:46:47Z

Cranio is thinking: stile link ✎ Modifica il menu

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
display:block;
font-size:0.85em;
margin-top:-0.3em;
margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
color:inherit;
}

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
(ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
color: #ffffff;
}
body.ns-3004 #firstHeading::before {
content: "Cineteca Sarda";
display: block;
margin-bottom: .35rem;
font-size: .8rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
display: none;
}
/* === [NS-BRAND] fine === */

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 300px;
gap: 3.5rem;
align-items: start;
}
.archivio-editoriale .art-main {
min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
margin: 0 0 .7rem;
font-size: .9rem;
letter-spacing: .04em;
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
border: 0;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
margin: 0;
max-width: none;
}
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
margin-bottom: 0;
}
.archivio-editoriale .lead strong {
color: var( --color-base, #fff );
font-weight: 600;
}

/* Riga "Prototipo di consultazione": blocco in evidenza (accent a sinistra) */
.archivio-editoriale .ce-prototipo {
margin: 1.8rem 0 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var( --ns-accent );
}
.archivio-editoriale .ce-prototipo-eti {
font-size: .92rem;
font-weight: 600;
color: #ffffff;
margin-bottom: .2rem;
}
.archivio-editoriale .ce-prototipo p {
margin: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
margin: 0 0 .4rem;
padding-bottom: .55rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
padding: .7rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
border-bottom: 0;
}
.archivio-editoriale .idx-eti {
margin-bottom: .2rem;
font-size: .98rem;
font-weight: 600;
color: #ffffff;
}
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
font-weight: 500;
text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
.archivio-editoriale .art-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
Indice d'archivio (sorgente unica {{Indice <NS>}}).
Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
(sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
Citizen (--font-size-*) per armonia con la TOC.
========================================================== */

.archivio-indice {
font-size: var( --font-size-small, .875rem );
line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
float: right;
width: 280px;
margin: .2rem 0 1.4rem 2rem;
padding-left: 1.4rem;
border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
.archivio-indice.ai-rail {
float: none;
width: auto;
margin: 0 0 1.6rem;
padding-left: 0;
border-left: 0;
}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
float: none;
width: auto;
margin: 0 0 1rem;
padding: 0;
border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
padding-bottom: .45rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
font-size: var( --font-size-x-small, .8125rem );
text-transform: uppercase;
letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
cursor: pointer;
user-select: none;
line-height: 1;
padding: .1rem .25rem;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
content: "▾";
display: inline-block;
font-size: .9em;
transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
display: none;
}
.archivio-indice .ai-toggle:hover {
color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
padding: .5rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
border-bottom: 0;
}
.archivio-indice .ai-eti {
margin-bottom: .12rem;
font-size: var( --font-size-small, .875rem );
font-weight: 600;
color: #ffffff;
}
.archivio-indice .ai-voci {
font-size: var( --font-size-small, .875rem );
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
color: #e7b142;
font-weight: 500;
text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
text-decoration: underline;
}

/* Riga licenza (sempre visibile, anche con indice chiuso) */
.archivio-indice .ai-licenza {
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
font-size: var( --font-size-x-small, .8125rem );
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}
.archivio-indice .ai-licenza a,
.archivio-indice .ai-licenza a:visited {
color: #e7b142;
text-decoration: none;
}
.archivio-indice .ai-licenza a:hover {
text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
color: #e7b142;
font-weight: 600;
}

/* Indice a LISTE native (variante editabile come elenco puntato in VE):
"* sezione" + "** pagina". Stesso look dei blocchi a div .ai-eti/.ai-voci.
Va nel blocco [INDICE] di Common.css. */
.archivio-indice .ai-body ul {
list-style: none;
margin: 0;
padding: 0;
}
.archivio-indice .ai-body > ul > li {
margin: 0 0 .8rem;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-body > ul > li > ul {
margin: .35rem 0 0;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.archivio-indice .ai-body > ul > li > ul > li {
margin: .12rem 0;
font-size: .92rem;
line-height: 1.45;
}
.archivio-indice .ai-body > ul > li > ul a,
.archivio-indice .ai-body > ul > li > ul a:visited {
color: var( --ns-accent, #e7b142 );
text-decoration: none;
}
.archivio-indice .ai-body > ul > li > ul a:hover {
text-decoration: underline;
}

/* link modifica menu */
.archivio-indice .ai-modifica {
margin-top: .8rem;
padding-top: .6rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .08 ) );
font-size: .76rem;
}
.archivio-indice .ai-modifica a,
.archivio-indice .ai-modifica a:visited {
color: var( --color-base--subtle, #b8b8b8 );
text-decoration: none;
}
.archivio-indice .ai-modifica a:hover {
text-decoration: underline;
}
/* === [INDICE] fine === */

/* === [HOME] inizio === */
/* ==========================================================
HOMEPAGE CINETECA DELL'ETNA
Pagina di test: Test_home
========================================================== */

/* Nasconde titolo standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-header,
body.page-Test_home .citizen-body-header,
body.page-Test_home .mw-body-header,
body.page-Test_home #firstHeading,
body.page-Test_home .firstHeading,
body.page-Test_home .mw-first-heading,
body.page-Test_home .mw-page-title-main {
display: none !important;
}

/* Nasconde colonna destra standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-sidebar,
body.page-Test_home .citizen-toc,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-lastmod,
body.page-Test_home .citizen-page-actions-more,
body.page-Test_home .toc,
body.page-Test_home #toc {
display: none !important;
}

/* Nasconde informazioni ultima modifica solo nella pagina Test_home */

body.page-Test_home .mw-parser-output .printfooter,
body.page-Test_home .mw-parser-output .catlinks,
body.page-Test_home .mw-parser-output .mw-footer-info,
body.page-Test_home .page-info,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-page-footer,
body.page-Test_home .citizen-body-footer,
body.page-Test_home .mw-body-footer,
body.page-Test_home .mw-last-modified,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

/* Allarga lo spazio utile della home dentro Citizen */

body.page-Test_home .citizen-body,
body.page-Test_home .citizen-body-container,
body.page-Test_home .citizen-body-content,
body.page-Test_home .citizen-page-container,
body.page-Test_home .mw-body,
body.page-Test_home .mw-body-content,
body.page-Test_home .mw-parser-output,
body.page-Test_home #bodyContent,
body.page-Test_home #content {
max-width: none !important;
width: 100% !important;
}

body.page-Test_home .citizen-body {
grid-template-columns: minmax(0, 1fr) !important;
}

/* Contenitore generale home */

body.page-Test_home .mw-parser-output .ce-home {
width: min(1300px, calc(100vw - 14rem));
max-width: none !important;
min-height: calc(100vh - 7rem);
margin: 0 auto;
padding: 2rem 0 2rem;
box-sizing: border-box;
overflow-x: hidden;
transform: none;

display: flex;
align-items: center;
}

/* Layout generale: contenuto principale + colonna laterale */

body.page-Test_home .mw-parser-output .ce-home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

/* Colonna laterale editoriale */

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
border-left: 0;
padding-left: 2rem;
}

/* Hero: testo a sinistra, foto verticale a destra */

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
min-width: 0;
align-self: start;
margin-top: 0;
padding-top: 0;
}

/* Occhiello / motto identitario */

body.page-Test_home .mw-parser-output .ce-hero-kicker {
margin-bottom: 1.4rem;
color: var(--color-base, #ffffff);
opacity: 0.72;
font-size: 0.92rem;
line-height: 1.2;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
}

/* Immagine verticale della home: solo foto, nessun box */

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 2;
grid-row: 1;
width: 300px;
height: 450px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
}

body.page-Test_home .mw-parser-output .ce-hero-visual > p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description {
display: block;
width: 300px !important;
height: 450px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
display: block;
width: 300px !important;
height: 450px !important;
max-width: none !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

/* Testo principale hero */

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 0.98;
margin: 0 0 1.5rem;
letter-spacing: -0.03em;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.15rem;
line-height: 1.55;
max-width: 760px;
color: var(--color-base--subtle, #b8b8b8);
}

/* Indice editoriale principale: libero, senza box */

body.page-Test_home .mw-parser-output .ce-home-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
width: 100%;
margin: 0;
padding-top: 0;
border: 0;
}

body.page-Test_home .mw-parser-output .ce-index-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-index-number {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.04em;
}

body.page-Test_home .mw-parser-output .ce-index-title {
margin-bottom: 0.65rem;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 600;
}

/* Index / Federated Archives Alliance / Contatti: rosso Citizen */

body.page-Test_home .mw-parser-output .ce-index-title,
body.page-Test_home .mw-parser-output .ce-index-title a,
body.page-Test_home .mw-parser-output .ce-index-title a:visited {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: none;
}

body.page-Test_home .mw-parser-output .ce-index-title a:hover {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: underline;
}

body.page-Test_home .mw-parser-output .ce-index-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 1rem;
line-height: 1.45;
max-width: 32em;
}

/* Box laterali leggeri, senza delimitazioni */

body.page-Test_home .mw-parser-output .ce-side-box {
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-side-box::before {
content: none;
display: none;
}

body.page-Test_home .mw-parser-output .ce-side-label {
margin-bottom: 0.6rem;
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* Titoli colonna destra: bianchi */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:visited {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.1;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}

body.page-Test_home .mw-parser-output .ce-side-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.95rem;
line-height: 1.45;
}

body.page-Test_home .mw-parser-output .ce-side-link {
margin-top: 0.85rem;
font-size: 0.95rem;
}

/* Link azione colonna destra: bianchi, blu Citizen solo all'hover */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:visited {
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:hover {
color: var(--color-progressive, #36c) !important;
text-decoration: underline !important;
}

/* Footer Citizen visibile e alleggerito solo nella home */

body.page-Test_home #footer {
display: block !important;
margin-top: 1.5rem !important;
padding-top: 0 !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
background: transparent !important;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer-info {
display: block !important;
}

body.page-Test_home #footer-places,
body.page-Test_home #footer-icon,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

body.page-Test_home .citizen-footer-tagline,
body.page-Test_home #footer-tagline,
body.page-Test_home #footer .citizen-footer__tagline {
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer a,
body.page-Test_home #footer a:visited {
color: var(--color-base--subtle, #b8b8b8) !important;
text-decoration: none !important;
}

body.page-Test_home #footer a:hover {
color: var(--color-base, #ffffff) !important;
text-decoration: underline !important;
}

/* ==========================================================
RESPONSIVE
========================================================== */

/* Finestra intermedia:
1. hero ancora a due colonne
2. indice sotto
3. colonna informativa sotto l'indice */

@media (max-width: 1250px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 4rem));
min-height: auto;
margin: 0 auto;
padding: 2rem 0 3rem;
display: block;
}

body.page-Test_home .mw-parser-output .ce-home-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
align-items: start;
margin-bottom: 4.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1 / span 2;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 3;
grid-row: 1;
justify-self: start;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding-left: 0;
border-left: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 4rem;
}
}

/* Finestra più stretta:
hero passa a una colonna, ma ordine resta:
titolo/testo, foto, indice, blocchi informativi */

@media (max-width: 900px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 2rem));
padding: 1.5rem 0 3rem;
}

body.page-Test_home .mw-parser-output .ce-hero {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-bottom: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 300px;
height: 450px;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 300px !important;
height: 450px !important;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: 1fr;
gap: 1.7rem;
}

body.page-Test_home .mw-parser-output .ce-index-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2rem;
border-left: 0;
padding-left: 0;
border-top: 0;
padding-top: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 0;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
line-height: 0.98;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.05rem;
}
}

/* Mobile molto stretto */

@media (max-width: 520px) {
body.page-Test_home .mw-parser-output .ce-home {
width: 100%;
padding: 1rem 0 2.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.3rem, 13vw, 3.3rem);
}

body.page-Test_home .mw-parser-output .ce-hero-visual,
body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 260px !important;
height: 390px !important;
}
}
/* === [HOME] fine === */

/* === [MAPPA] inizio === */
/* Index — sommario della "rivista". Tipografia editoriale CONDIVISA con home e
progetti (occhiello / titolo da prima pagina / lead): vedi la "regola
tipografica" nel README. VE-safe: solo wikitext nativo (liste di definizione
; :), nessun div di layout, niente sezioni espandibili. Stile su body.page-Index. */

body.page-Index #bodyContent,
body.page-Index .mw-parser-output {
max-width: 56rem;
}

/* Titolo della pagina = titolo da prima pagina (come i progetti, .ce-headline) */
body.page-Index #firstHeading {
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* riga d'apertura = lead */
body.page-Index .mw-parser-output > p:first-of-type {
margin: .4rem 0 2.6rem;
max-width: 46rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}

/* ogni sezione è un blocco di lista di definizione; numerazione continua */
body.page-Index .mw-parser-output {
counter-reset: sez;
}
body.page-Index .mw-parser-output dl {
margin: 0 0 2.4rem;
}

/* etichetta di sezione = OCCHIELLO, nel ROSSO della home + numero (richiamo e
stacco visivo tra le sezioni). */
body.page-Index .mw-parser-output dt {
counter-increment: sez;
margin: 0 0 1rem;
font-size: .9rem;
font-weight: 500;
letter-spacing: .04em;
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.page-Index .mw-parser-output dt::before {
content: counter( sez, decimal-leading-zero );
margin-right: .7em;
font-variant-numeric: tabular-nums;
}

/* voce = titolo da prima pagina (ridotto) + descrizione sotto.
Ritmo verticale regolare: il titolo è un BLOCCO con un solo margin; la
descrizione è il testo della dd, con la sua interlinea. */
body.page-Index .mw-parser-output dd {
margin: 0 0 1.4rem;
color: var( --color-base--subtle, #b8b8b8 );
font-size: 1.02rem;
line-height: 1.55;
}
body.page-Index .mw-parser-output dd:last-child {
margin-bottom: 0;
}

/* titolo della voce: BIANCO TIPOGRAFICO, mai bluetto */
body.page-Index .mw-parser-output dd b {
display: block;
margin: 0 0 .35rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.2;
}
body.page-Index .mw-parser-output dd b a,
body.page-Index .mw-parser-output dd b a:visited {
color: #ffffff;
text-decoration: none;
}
body.page-Index .mw-parser-output dd b a:hover {
text-decoration: underline;
}
/* === [MAPPA] fine === */

/* === [DEV] inizio === */
/* ==========================================================
Dev — Dashboard "a riquadri per progetto" (pagina centrale).
Stesso taglio editoriale di CinetecaSarda, ma l'indice è una griglia
di card (riquadri), non il widget nel rail. Wrapper .dev-dash.
Colori dei link: default Citizen (nessun override).
========================================================== */

.dev-dash {
color: var( --color-base, #fff );
}

/* Testata editoriale */
.dev-dash .occhiello {
margin: 0 0 .7rem;
font-size: var( --font-size-x-small, .8125rem );
letter-spacing: .07em;
text-transform: uppercase;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-headline {
margin: 0 0 1rem;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}
.dev-dash .dev-lead {
margin: 0 0 .5rem;
max-width: 64ch;
font-size: 1.1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* Riquadri "a colonne" (masonry): impacchettano senza vuoti verticali */
.dev-dash .dev-griglia {
columns: 290px;
column-gap: 1.3rem;
margin-top: 2rem;
}

/* Riquadro = progetto */
.dev-dash .dev-card {
break-inside: avoid;
margin: 0 0 1.3rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
border-radius: 8px;
background: rgba( 255, 255, 255, .02 );
}
.dev-dash .dev-card-titolo {
margin-bottom: .5rem;
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
}
.dev-dash .dev-card-sub {
margin: .7rem 0 .2rem;
font-size: var( --font-size-xx-small, .75rem );
text-transform: uppercase;
letter-spacing: .07em;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.dev-dash .dev-card li {
padding: .18rem 0;
line-height: 1.4;
font-size: .95rem;
}

/* Pagine centrali dei sotto-progetti (editoriale + indice nel rail): nascondi
il titolo standard di Citizen — l'headline vive nel contenuto (.ce-headline). */
body.page-Dev_Tapescan #firstHeading,
body.page-Dev_Tapescan .mw-page-title-main,
body.page-Dev_TBC #firstHeading,
body.page-Dev_TBC .mw-page-title-main,
body.page-Dev_Robota #firstHeading,
body.page-Dev_Robota .mw-page-title-main {
display: none !important;
}

/* Dev: link dell'indice e dell'editoriale col colore di DEFAULT di Citizen
(non il giallo brand di CinetecaSarda, hardcodato in [INDICE]). Specificità
più alta → vince senza toccare CinetecaSarda. */
body.ns-3012 .archivio-indice .ai-voci a,
body.ns-3012 .archivio-indice .ai-voci a:visited,
body.ns-3012 .archivio-indice .ai-licenza a,
body.ns-3012 .archivio-indice .ai-licenza a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
body.ns-3012 .archivio-editoriale {
--ns-accent: var( --color-link, var( --color-progressive, #36c ) );
}

/* Testo introduttivo (lead) dei sotto-progetti Dev: colore di DEFAULT di
Citizen (testo base), non il grigio "subtle" editoriale di CinetecaSarda. */
body.ns-3012 .archivio-editoriale .lead p {
color: var( --color-base, #fff );
}
/* === [DEV] fine === */

/* === [NS-MALASTRADA] inizio === */
/* malastradafilm (ns 3010): identità ACROMATICA (bianco/nero), come il sito
malastradafilm.com — niente accent colorato (al contrario del giallo
CinetecaSarda). Link dell'indice grigio tipografico, voce TOC attiva bianca. */

body.ns-3010 .archivio-editoriale {
--ns-accent: var( --color-base, #fff );
}
/* link dell'indice (sia struttura a div .ai-voci, sia elenco puntato .ai-body) */
body.ns-3010 .archivio-indice .ai-body a,
body.ns-3010 .archivio-indice .ai-body a:visited,
body.ns-3010 .archivio-indice .ai-licenza a,
body.ns-3010 .archivio-indice .ai-licenza a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}

/* Dashboard: nascondi il titolo standard di Citizen (l'headline vive nel
contenuto, .ce-headline). */
body.page-Malastradafilm_Dashboard #firstHeading,
body.page-Malastradafilm_Dashboard .mw-page-title-main {
display: none !important;
}
/* === [NS-MALASTRADA] fine === */

Template:Indice Malastradafilm

2026-06-16T19:55:37Z

Cranio is thinking: indice come elenco puntato editabile (sezione */pagina **) + istruzioni

<includeonly><div class="archivio-indice {{#if:{{{rail|}}}|ai-rail|}}">
<div class="ai-testata">[[Malastradafilm:Dashboard|Dashboard]]<span class="ai-toggle" role="button" tabindex="0"></span></div>
<div class="ai-body">
* Idee
** [[Malastradafilm:Genio collettivo|Genio collettivo]]
** [[Malastradafilm:Sensibile Comune|Sensibile Comune]]
* Opere e azioni
** [[Malastradafilm:Casamatta|Casamatta]]
** [[Malastradafilm:Comizio di andrea chenier|Comizio di Andrea Chénier]]
** [[Malastradafilm:In omaggio alla edipo re|In omaggio alla Edipo re]]
** [[Malastradafilm:Un mito antropologico televisivo|Un mito antropologico televisivo]]
* Scritti
** [[Malastradafilm:Cronaca. Strappo alla narrazione televisiva di Alessandra Ferlito|Cronaca — Alessandra Ferlito]]
** [[Malastradafilm:Testo della malastrada per Daniele Salaris|Per Daniele Salaris]]
** [[Malastradafilm:Un contributo per Ale di Tommaso Garufi|Per Ale — Tommaso Garufi]]
</div>
</div></includeonly><noinclude>
'''Indice d'archivio di malastradafilm''' (compare nel rail laterale). È un '''elenco puntato''':
modificarlo è come modificare una lista.

'''Per gestire il menu''' (aggiungere/togliere/spostare pagine) modifica questa pagina:
* <code>*</code> = una '''sezione''' del menu (es. «Idee»);
* <code>**</code> = una '''pagina''' dentro la sezione: <code><nowiki>** [[Malastradafilm:Titolo|Etichetta]]</nowiki></code>.

In VisualEditor: apri questa pagina, è una lista a due livelli — Invio per una nuova voce, Tab per rientrare sotto una sezione.

<templatedata>
{
"description": "Indice d'archivio di malastradafilm (rail). Il menu è un elenco puntato a due livelli (sezione / pagina) nel sorgente di questa pagina: per aggiungere o spostare pagine modifica la lista. Nessun campo da compilare; rail=1 lo colloca nel rail ed è già passato da IntestazionePagine.",
"params": {
"rail": {
"label": "Rail",
"description": "Metti 1 per mostrarlo nel rail laterale (già impostato da IntestazionePagine).",
"type": "string",
"required": false
}
}
}
</templatedata>
[[Category:Template di struttura]]
</noinclude>

MediaWiki:Common.css

2026-06-16T19:55:33Z

Cranio is thinking: indice a liste: stile generico in [INDICE] + override link malastradafilm

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
display:block;
font-size:0.85em;
margin-top:-0.3em;
margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
color:inherit;
}

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
(ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
color: #ffffff;
}
body.ns-3004 #firstHeading::before {
content: "Cineteca Sarda";
display: block;
margin-bottom: .35rem;
font-size: .8rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
display: none;
}
/* === [NS-BRAND] fine === */

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 300px;
gap: 3.5rem;
align-items: start;
}
.archivio-editoriale .art-main {
min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
margin: 0 0 .7rem;
font-size: .9rem;
letter-spacing: .04em;
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
border: 0;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
margin: 0;
max-width: none;
}
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
margin-bottom: 0;
}
.archivio-editoriale .lead strong {
color: var( --color-base, #fff );
font-weight: 600;
}

/* Riga "Prototipo di consultazione": blocco in evidenza (accent a sinistra) */
.archivio-editoriale .ce-prototipo {
margin: 1.8rem 0 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var( --ns-accent );
}
.archivio-editoriale .ce-prototipo-eti {
font-size: .92rem;
font-weight: 600;
color: #ffffff;
margin-bottom: .2rem;
}
.archivio-editoriale .ce-prototipo p {
margin: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
margin: 0 0 .4rem;
padding-bottom: .55rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
padding: .7rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
border-bottom: 0;
}
.archivio-editoriale .idx-eti {
margin-bottom: .2rem;
font-size: .98rem;
font-weight: 600;
color: #ffffff;
}
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
font-weight: 500;
text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
.archivio-editoriale .art-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
Indice d'archivio (sorgente unica {{Indice <NS>}}).
Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
(sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
Citizen (--font-size-*) per armonia con la TOC.
========================================================== */

.archivio-indice {
font-size: var( --font-size-small, .875rem );
line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
float: right;
width: 280px;
margin: .2rem 0 1.4rem 2rem;
padding-left: 1.4rem;
border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
.archivio-indice.ai-rail {
float: none;
width: auto;
margin: 0 0 1.6rem;
padding-left: 0;
border-left: 0;
}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
float: none;
width: auto;
margin: 0 0 1rem;
padding: 0;
border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
padding-bottom: .45rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
font-size: var( --font-size-x-small, .8125rem );
text-transform: uppercase;
letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
cursor: pointer;
user-select: none;
line-height: 1;
padding: .1rem .25rem;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
content: "▾";
display: inline-block;
font-size: .9em;
transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
display: none;
}
.archivio-indice .ai-toggle:hover {
color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
padding: .5rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
border-bottom: 0;
}
.archivio-indice .ai-eti {
margin-bottom: .12rem;
font-size: var( --font-size-small, .875rem );
font-weight: 600;
color: #ffffff;
}
.archivio-indice .ai-voci {
font-size: var( --font-size-small, .875rem );
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
color: #e7b142;
font-weight: 500;
text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
text-decoration: underline;
}

/* Riga licenza (sempre visibile, anche con indice chiuso) */
.archivio-indice .ai-licenza {
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
font-size: var( --font-size-x-small, .8125rem );
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}
.archivio-indice .ai-licenza a,
.archivio-indice .ai-licenza a:visited {
color: #e7b142;
text-decoration: none;
}
.archivio-indice .ai-licenza a:hover {
text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
color: #e7b142;
font-weight: 600;
}

/* Indice a LISTE native (variante editabile come elenco puntato in VE):
"* sezione" + "** pagina". Stesso look dei blocchi a div .ai-eti/.ai-voci.
Va nel blocco [INDICE] di Common.css. */
.archivio-indice .ai-body ul {
list-style: none;
margin: 0;
padding: 0;
}
.archivio-indice .ai-body > ul > li {
margin: 0 0 .8rem;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-body > ul > li > ul {
margin: .35rem 0 0;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.archivio-indice .ai-body > ul > li > ul > li {
margin: .12rem 0;
font-size: .92rem;
line-height: 1.45;
}
.archivio-indice .ai-body > ul > li > ul a,
.archivio-indice .ai-body > ul > li > ul a:visited {
color: var( --ns-accent, #e7b142 );
text-decoration: none;
}
.archivio-indice .ai-body > ul > li > ul a:hover {
text-decoration: underline;
}
/* === [INDICE] fine === */

/* === [HOME] inizio === */
/* ==========================================================
HOMEPAGE CINETECA DELL'ETNA
Pagina di test: Test_home
========================================================== */

/* Nasconde titolo standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-header,
body.page-Test_home .citizen-body-header,
body.page-Test_home .mw-body-header,
body.page-Test_home #firstHeading,
body.page-Test_home .firstHeading,
body.page-Test_home .mw-first-heading,
body.page-Test_home .mw-page-title-main {
display: none !important;
}

/* Nasconde colonna destra standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-sidebar,
body.page-Test_home .citizen-toc,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-lastmod,
body.page-Test_home .citizen-page-actions-more,
body.page-Test_home .toc,
body.page-Test_home #toc {
display: none !important;
}

/* Nasconde informazioni ultima modifica solo nella pagina Test_home */

body.page-Test_home .mw-parser-output .printfooter,
body.page-Test_home .mw-parser-output .catlinks,
body.page-Test_home .mw-parser-output .mw-footer-info,
body.page-Test_home .page-info,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-page-footer,
body.page-Test_home .citizen-body-footer,
body.page-Test_home .mw-body-footer,
body.page-Test_home .mw-last-modified,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

/* Allarga lo spazio utile della home dentro Citizen */

body.page-Test_home .citizen-body,
body.page-Test_home .citizen-body-container,
body.page-Test_home .citizen-body-content,
body.page-Test_home .citizen-page-container,
body.page-Test_home .mw-body,
body.page-Test_home .mw-body-content,
body.page-Test_home .mw-parser-output,
body.page-Test_home #bodyContent,
body.page-Test_home #content {
max-width: none !important;
width: 100% !important;
}

body.page-Test_home .citizen-body {
grid-template-columns: minmax(0, 1fr) !important;
}

/* Contenitore generale home */

body.page-Test_home .mw-parser-output .ce-home {
width: min(1300px, calc(100vw - 14rem));
max-width: none !important;
min-height: calc(100vh - 7rem);
margin: 0 auto;
padding: 2rem 0 2rem;
box-sizing: border-box;
overflow-x: hidden;
transform: none;

display: flex;
align-items: center;
}

/* Layout generale: contenuto principale + colonna laterale */

body.page-Test_home .mw-parser-output .ce-home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

/* Colonna laterale editoriale */

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
border-left: 0;
padding-left: 2rem;
}

/* Hero: testo a sinistra, foto verticale a destra */

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
min-width: 0;
align-self: start;
margin-top: 0;
padding-top: 0;
}

/* Occhiello / motto identitario */

body.page-Test_home .mw-parser-output .ce-hero-kicker {
margin-bottom: 1.4rem;
color: var(--color-base, #ffffff);
opacity: 0.72;
font-size: 0.92rem;
line-height: 1.2;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
}

/* Immagine verticale della home: solo foto, nessun box */

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 2;
grid-row: 1;
width: 300px;
height: 450px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
}

body.page-Test_home .mw-parser-output .ce-hero-visual > p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description {
display: block;
width: 300px !important;
height: 450px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
display: block;
width: 300px !important;
height: 450px !important;
max-width: none !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

/* Testo principale hero */

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 0.98;
margin: 0 0 1.5rem;
letter-spacing: -0.03em;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.15rem;
line-height: 1.55;
max-width: 760px;
color: var(--color-base--subtle, #b8b8b8);
}

/* Indice editoriale principale: libero, senza box */

body.page-Test_home .mw-parser-output .ce-home-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
width: 100%;
margin: 0;
padding-top: 0;
border: 0;
}

body.page-Test_home .mw-parser-output .ce-index-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-index-number {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.04em;
}

body.page-Test_home .mw-parser-output .ce-index-title {
margin-bottom: 0.65rem;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 600;
}

/* Index / Federated Archives Alliance / Contatti: rosso Citizen */

body.page-Test_home .mw-parser-output .ce-index-title,
body.page-Test_home .mw-parser-output .ce-index-title a,
body.page-Test_home .mw-parser-output .ce-index-title a:visited {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: none;
}

body.page-Test_home .mw-parser-output .ce-index-title a:hover {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: underline;
}

body.page-Test_home .mw-parser-output .ce-index-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 1rem;
line-height: 1.45;
max-width: 32em;
}

/* Box laterali leggeri, senza delimitazioni */

body.page-Test_home .mw-parser-output .ce-side-box {
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-side-box::before {
content: none;
display: none;
}

body.page-Test_home .mw-parser-output .ce-side-label {
margin-bottom: 0.6rem;
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* Titoli colonna destra: bianchi */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:visited {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.1;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}

body.page-Test_home .mw-parser-output .ce-side-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.95rem;
line-height: 1.45;
}

body.page-Test_home .mw-parser-output .ce-side-link {
margin-top: 0.85rem;
font-size: 0.95rem;
}

/* Link azione colonna destra: bianchi, blu Citizen solo all'hover */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:visited {
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:hover {
color: var(--color-progressive, #36c) !important;
text-decoration: underline !important;
}

/* Footer Citizen visibile e alleggerito solo nella home */

body.page-Test_home #footer {
display: block !important;
margin-top: 1.5rem !important;
padding-top: 0 !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
background: transparent !important;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer-info {
display: block !important;
}

body.page-Test_home #footer-places,
body.page-Test_home #footer-icon,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

body.page-Test_home .citizen-footer-tagline,
body.page-Test_home #footer-tagline,
body.page-Test_home #footer .citizen-footer__tagline {
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer a,
body.page-Test_home #footer a:visited {
color: var(--color-base--subtle, #b8b8b8) !important;
text-decoration: none !important;
}

body.page-Test_home #footer a:hover {
color: var(--color-base, #ffffff) !important;
text-decoration: underline !important;
}

/* ==========================================================
RESPONSIVE
========================================================== */

/* Finestra intermedia:
1. hero ancora a due colonne
2. indice sotto
3. colonna informativa sotto l'indice */

@media (max-width: 1250px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 4rem));
min-height: auto;
margin: 0 auto;
padding: 2rem 0 3rem;
display: block;
}

body.page-Test_home .mw-parser-output .ce-home-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
align-items: start;
margin-bottom: 4.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1 / span 2;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 3;
grid-row: 1;
justify-self: start;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding-left: 0;
border-left: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 4rem;
}
}

/* Finestra più stretta:
hero passa a una colonna, ma ordine resta:
titolo/testo, foto, indice, blocchi informativi */

@media (max-width: 900px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 2rem));
padding: 1.5rem 0 3rem;
}

body.page-Test_home .mw-parser-output .ce-hero {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-bottom: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 300px;
height: 450px;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 300px !important;
height: 450px !important;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: 1fr;
gap: 1.7rem;
}

body.page-Test_home .mw-parser-output .ce-index-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2rem;
border-left: 0;
padding-left: 0;
border-top: 0;
padding-top: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 0;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
line-height: 0.98;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.05rem;
}
}

/* Mobile molto stretto */

@media (max-width: 520px) {
body.page-Test_home .mw-parser-output .ce-home {
width: 100%;
padding: 1rem 0 2.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.3rem, 13vw, 3.3rem);
}

body.page-Test_home .mw-parser-output .ce-hero-visual,
body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 260px !important;
height: 390px !important;
}
}
/* === [HOME] fine === */

/* === [MAPPA] inizio === */
/* Index — sommario della "rivista". Tipografia editoriale CONDIVISA con home e
progetti (occhiello / titolo da prima pagina / lead): vedi la "regola
tipografica" nel README. VE-safe: solo wikitext nativo (liste di definizione
; :), nessun div di layout, niente sezioni espandibili. Stile su body.page-Index. */

body.page-Index #bodyContent,
body.page-Index .mw-parser-output {
max-width: 56rem;
}

/* Titolo della pagina = titolo da prima pagina (come i progetti, .ce-headline) */
body.page-Index #firstHeading {
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* riga d'apertura = lead */
body.page-Index .mw-parser-output > p:first-of-type {
margin: .4rem 0 2.6rem;
max-width: 46rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}

/* ogni sezione è un blocco di lista di definizione; numerazione continua */
body.page-Index .mw-parser-output {
counter-reset: sez;
}
body.page-Index .mw-parser-output dl {
margin: 0 0 2.4rem;
}

/* etichetta di sezione = OCCHIELLO, nel ROSSO della home + numero (richiamo e
stacco visivo tra le sezioni). */
body.page-Index .mw-parser-output dt {
counter-increment: sez;
margin: 0 0 1rem;
font-size: .9rem;
font-weight: 500;
letter-spacing: .04em;
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.page-Index .mw-parser-output dt::before {
content: counter( sez, decimal-leading-zero );
margin-right: .7em;
font-variant-numeric: tabular-nums;
}

/* voce = titolo da prima pagina (ridotto) + descrizione sotto.
Ritmo verticale regolare: il titolo è un BLOCCO con un solo margin; la
descrizione è il testo della dd, con la sua interlinea. */
body.page-Index .mw-parser-output dd {
margin: 0 0 1.4rem;
color: var( --color-base--subtle, #b8b8b8 );
font-size: 1.02rem;
line-height: 1.55;
}
body.page-Index .mw-parser-output dd:last-child {
margin-bottom: 0;
}

/* titolo della voce: BIANCO TIPOGRAFICO, mai bluetto */
body.page-Index .mw-parser-output dd b {
display: block;
margin: 0 0 .35rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.2;
}
body.page-Index .mw-parser-output dd b a,
body.page-Index .mw-parser-output dd b a:visited {
color: #ffffff;
text-decoration: none;
}
body.page-Index .mw-parser-output dd b a:hover {
text-decoration: underline;
}
/* === [MAPPA] fine === */

/* === [DEV] inizio === */
/* ==========================================================
Dev — Dashboard "a riquadri per progetto" (pagina centrale).
Stesso taglio editoriale di CinetecaSarda, ma l'indice è una griglia
di card (riquadri), non il widget nel rail. Wrapper .dev-dash.
Colori dei link: default Citizen (nessun override).
========================================================== */

.dev-dash {
color: var( --color-base, #fff );
}

/* Testata editoriale */
.dev-dash .occhiello {
margin: 0 0 .7rem;
font-size: var( --font-size-x-small, .8125rem );
letter-spacing: .07em;
text-transform: uppercase;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-headline {
margin: 0 0 1rem;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}
.dev-dash .dev-lead {
margin: 0 0 .5rem;
max-width: 64ch;
font-size: 1.1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* Riquadri "a colonne" (masonry): impacchettano senza vuoti verticali */
.dev-dash .dev-griglia {
columns: 290px;
column-gap: 1.3rem;
margin-top: 2rem;
}

/* Riquadro = progetto */
.dev-dash .dev-card {
break-inside: avoid;
margin: 0 0 1.3rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
border-radius: 8px;
background: rgba( 255, 255, 255, .02 );
}
.dev-dash .dev-card-titolo {
margin-bottom: .5rem;
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
}
.dev-dash .dev-card-sub {
margin: .7rem 0 .2rem;
font-size: var( --font-size-xx-small, .75rem );
text-transform: uppercase;
letter-spacing: .07em;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.dev-dash .dev-card li {
padding: .18rem 0;
line-height: 1.4;
font-size: .95rem;
}

/* Pagine centrali dei sotto-progetti (editoriale + indice nel rail): nascondi
il titolo standard di Citizen — l'headline vive nel contenuto (.ce-headline). */
body.page-Dev_Tapescan #firstHeading,
body.page-Dev_Tapescan .mw-page-title-main,
body.page-Dev_TBC #firstHeading,
body.page-Dev_TBC .mw-page-title-main,
body.page-Dev_Robota #firstHeading,
body.page-Dev_Robota .mw-page-title-main {
display: none !important;
}

/* Dev: link dell'indice e dell'editoriale col colore di DEFAULT di Citizen
(non il giallo brand di CinetecaSarda, hardcodato in [INDICE]). Specificità
più alta → vince senza toccare CinetecaSarda. */
body.ns-3012 .archivio-indice .ai-voci a,
body.ns-3012 .archivio-indice .ai-voci a:visited,
body.ns-3012 .archivio-indice .ai-licenza a,
body.ns-3012 .archivio-indice .ai-licenza a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
body.ns-3012 .archivio-editoriale {
--ns-accent: var( --color-link, var( --color-progressive, #36c ) );
}

/* Testo introduttivo (lead) dei sotto-progetti Dev: colore di DEFAULT di
Citizen (testo base), non il grigio "subtle" editoriale di CinetecaSarda. */
body.ns-3012 .archivio-editoriale .lead p {
color: var( --color-base, #fff );
}
/* === [DEV] fine === */

/* === [NS-MALASTRADA] inizio === */
/* malastradafilm (ns 3010): identità ACROMATICA (bianco/nero), come il sito
malastradafilm.com — niente accent colorato (al contrario del giallo
CinetecaSarda). Link dell'indice grigio tipografico, voce TOC attiva bianca. */

body.ns-3010 .archivio-editoriale {
--ns-accent: var( --color-base, #fff );
}
/* link dell'indice (sia struttura a div .ai-voci, sia elenco puntato .ai-body) */
body.ns-3010 .archivio-indice .ai-body a,
body.ns-3010 .archivio-indice .ai-body a:visited,
body.ns-3010 .archivio-indice .ai-licenza a,
body.ns-3010 .archivio-indice .ai-licenza a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}

/* Dashboard: nascondi il titolo standard di Citizen (l'headline vive nel
contenuto, .ce-headline). */
body.page-Malastradafilm_Dashboard #firstHeading,
body.page-Malastradafilm_Dashboard .mw-page-title-main {
display: none !important;
}
/* === [NS-MALASTRADA] fine === */

Template:Indice Malastradafilm

2026-06-16T19:30:06Z

Cranio is thinking: aggiunta TemplateData + istruzioni di modifica

<includeonly><div class="archivio-indice {{#if:{{{rail|}}}|ai-rail|}}">
<div class="ai-testata">[[Malastradafilm:Dashboard|Dashboard]]<span class="ai-toggle" role="button" tabindex="0"></span></div>
<div class="ai-body">
<div class="ai-sez"><div class="ai-eti">Idee</div><div class="ai-voci">[[Malastradafilm:Genio collettivo|Genio collettivo]] · [[Malastradafilm:Sensibile Comune|Sensibile Comune]]</div></div>
<div class="ai-sez"><div class="ai-eti">Opere e azioni</div><div class="ai-voci">[[Malastradafilm:Casamatta|Casamatta]] · [[Malastradafilm:Comizio di andrea chenier|Comizio di Andrea Chénier]] · [[Malastradafilm:In omaggio alla edipo re|In omaggio alla Edipo re]] · [[Malastradafilm:Un mito antropologico televisivo|Un mito antropologico televisivo]]</div></div>
<div class="ai-sez"><div class="ai-eti">Scritti</div><div class="ai-voci">[[Malastradafilm:Cronaca. Strappo alla narrazione televisiva di Alessandra Ferlito|Cronaca — Alessandra Ferlito]] · [[Malastradafilm:Testo della malastrada per Daniele Salaris|Per Daniele Salaris]] · [[Malastradafilm:Un contributo per Ale di Tommaso Garufi|Per Ale — Tommaso Garufi]]</div></div>
</div>
</div></includeonly><noinclude>
'''Indice d'archivio di malastradafilm''' (compare nel rail laterale). Sorgente unica: le voci sono curate qui.

'''Per modificare le voci:''' apri questa pagina in '''modifica sorgente''' e cambia i link dentro i blocchi <code>ai-voci</code> (una sezione per riga: etichetta in <code>ai-eti</code>, link separati da <code>·</code>). Non serve toccare nient'altro.

<templatedata>
{
"description": "Indice d'archivio di malastradafilm, mostrato nel rail. NON ha campi da compilare: per aggiungere o togliere voci, modifica il sorgente di questa pagina (i link nelle sezioni). Il parametro rail=1 lo colloca nel rail ed è già passato automaticamente da IntestazionePagine.",
"params": {
"rail": {
"label": "Rail",
"description": "Metti 1 per mostrarlo nel rail laterale (già impostato da IntestazionePagine sulle pagine di contenuto).",
"type": "string",
"required": false
}
}
}
</templatedata>
[[Category:Template di struttura]]
</noinclude>

Template:Dashboard archivio

2026-06-16T19:30:03Z

Cranio is thinking: template Dashboard editoriale con TemplateData (editabile a campi in VE)

<includeonly>{{DISPLAYTITLE:{{{titolo|{{PAGENAME}}}}}}}<div class="archivio-editoriale">
<div class="art-layout">
<div class="art-main">
<div class="occhiello">{{{occhiello|}}}</div>
<div class="ce-headline">{{{titolo|{{PAGENAME}}}}}</div>
<div class="lead">
{{{testo|}}}
</div>
</div>
<div class="art-aside">{{{indice|}}}</div>
</div>
</div></includeonly><noinclude>
Testata editoriale della '''Dashboard''' di un archivio: occhiello + titolo da prima pagina + racconto, con l'indice nella colonna destra. Pensato per essere editato '''a campi in VisualEditor''' (niente div grezzi da toccare a mano).

<templatedata>
{
"description": "Testata editoriale della Dashboard di un archivio (occhiello, titolo, racconto, indice in colonna). In VisualEditor si modifica a campi: il layout non si rompe.",
"params": {
"occhiello": {
"label": "Occhiello",
"description": "Il cappello sopra il titolo (piccolo). Es. il sottotitolo dell'archivio.",
"type": "string",
"example": "ricerca · diffusione · eresia"
},
"titolo": {
"label": "Titolo",
"description": "Il titolo da prima pagina. Se vuoto usa il nome della pagina.",
"type": "string",
"example": "malastradafilm"
},
"testo": {
"label": "Racconto (lead)",
"description": "Il testo introduttivo. Più paragrafi: separali con una riga vuota.",
"type": "content"
},
"indice": {
"label": "Indice",
"description": "Il widget indice d'archivio del namespace, es. {{Indice Malastradafilm}}.",
"type": "content",
"example": "{{Indice Malastradafilm}}"
}
},
"format": "block"
}
</templatedata>
[[Category:Template di struttura]]
</noinclude>

MediaWiki:Common.css

2026-06-16T18:17:50Z

Cranio is thinking: brand malastradafilm (acromatico) + hide titolo Dashboard

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
display:block;
font-size:0.85em;
margin-top:-0.3em;
margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
color:inherit;
}

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
(ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
color: #ffffff;
}
body.ns-3004 #firstHeading::before {
content: "Cineteca Sarda";
display: block;
margin-bottom: .35rem;
font-size: .8rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
display: none;
}
/* === [NS-BRAND] fine === */

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 300px;
gap: 3.5rem;
align-items: start;
}
.archivio-editoriale .art-main {
min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
margin: 0 0 .7rem;
font-size: .9rem;
letter-spacing: .04em;
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
border: 0;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
margin: 0;
max-width: none;
}
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
margin-bottom: 0;
}
.archivio-editoriale .lead strong {
color: var( --color-base, #fff );
font-weight: 600;
}

/* Riga "Prototipo di consultazione": blocco in evidenza (accent a sinistra) */
.archivio-editoriale .ce-prototipo {
margin: 1.8rem 0 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var( --ns-accent );
}
.archivio-editoriale .ce-prototipo-eti {
font-size: .92rem;
font-weight: 600;
color: #ffffff;
margin-bottom: .2rem;
}
.archivio-editoriale .ce-prototipo p {
margin: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
margin: 0 0 .4rem;
padding-bottom: .55rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
padding: .7rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
border-bottom: 0;
}
.archivio-editoriale .idx-eti {
margin-bottom: .2rem;
font-size: .98rem;
font-weight: 600;
color: #ffffff;
}
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
font-weight: 500;
text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
.archivio-editoriale .art-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
Indice d'archivio (sorgente unica {{Indice <NS>}}).
Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
(sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
Citizen (--font-size-*) per armonia con la TOC.
========================================================== */

.archivio-indice {
font-size: var( --font-size-small, .875rem );
line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
float: right;
width: 280px;
margin: .2rem 0 1.4rem 2rem;
padding-left: 1.4rem;
border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
.archivio-indice.ai-rail {
float: none;
width: auto;
margin: 0 0 1.6rem;
padding-left: 0;
border-left: 0;
}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
float: none;
width: auto;
margin: 0 0 1rem;
padding: 0;
border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
padding-bottom: .45rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
font-size: var( --font-size-x-small, .8125rem );
text-transform: uppercase;
letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
cursor: pointer;
user-select: none;
line-height: 1;
padding: .1rem .25rem;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
content: "▾";
display: inline-block;
font-size: .9em;
transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
display: none;
}
.archivio-indice .ai-toggle:hover {
color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
padding: .5rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
border-bottom: 0;
}
.archivio-indice .ai-eti {
margin-bottom: .12rem;
font-size: var( --font-size-small, .875rem );
font-weight: 600;
color: #ffffff;
}
.archivio-indice .ai-voci {
font-size: var( --font-size-small, .875rem );
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
color: #e7b142;
font-weight: 500;
text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
text-decoration: underline;
}

/* Riga licenza (sempre visibile, anche con indice chiuso) */
.archivio-indice .ai-licenza {
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
font-size: var( --font-size-x-small, .8125rem );
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}
.archivio-indice .ai-licenza a,
.archivio-indice .ai-licenza a:visited {
color: #e7b142;
text-decoration: none;
}
.archivio-indice .ai-licenza a:hover {
text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
color: #e7b142;
font-weight: 600;
}
/* === [INDICE] fine === */

/* === [HOME] inizio === */
/* ==========================================================
HOMEPAGE CINETECA DELL'ETNA
Pagina di test: Test_home
========================================================== */

/* Nasconde titolo standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-header,
body.page-Test_home .citizen-body-header,
body.page-Test_home .mw-body-header,
body.page-Test_home #firstHeading,
body.page-Test_home .firstHeading,
body.page-Test_home .mw-first-heading,
body.page-Test_home .mw-page-title-main {
display: none !important;
}

/* Nasconde colonna destra standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-sidebar,
body.page-Test_home .citizen-toc,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-lastmod,
body.page-Test_home .citizen-page-actions-more,
body.page-Test_home .toc,
body.page-Test_home #toc {
display: none !important;
}

/* Nasconde informazioni ultima modifica solo nella pagina Test_home */

body.page-Test_home .mw-parser-output .printfooter,
body.page-Test_home .mw-parser-output .catlinks,
body.page-Test_home .mw-parser-output .mw-footer-info,
body.page-Test_home .page-info,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-page-footer,
body.page-Test_home .citizen-body-footer,
body.page-Test_home .mw-body-footer,
body.page-Test_home .mw-last-modified,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

/* Allarga lo spazio utile della home dentro Citizen */

body.page-Test_home .citizen-body,
body.page-Test_home .citizen-body-container,
body.page-Test_home .citizen-body-content,
body.page-Test_home .citizen-page-container,
body.page-Test_home .mw-body,
body.page-Test_home .mw-body-content,
body.page-Test_home .mw-parser-output,
body.page-Test_home #bodyContent,
body.page-Test_home #content {
max-width: none !important;
width: 100% !important;
}

body.page-Test_home .citizen-body {
grid-template-columns: minmax(0, 1fr) !important;
}

/* Contenitore generale home */

body.page-Test_home .mw-parser-output .ce-home {
width: min(1300px, calc(100vw - 14rem));
max-width: none !important;
min-height: calc(100vh - 7rem);
margin: 0 auto;
padding: 2rem 0 2rem;
box-sizing: border-box;
overflow-x: hidden;
transform: none;

display: flex;
align-items: center;
}

/* Layout generale: contenuto principale + colonna laterale */

body.page-Test_home .mw-parser-output .ce-home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

/* Colonna laterale editoriale */

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
border-left: 0;
padding-left: 2rem;
}

/* Hero: testo a sinistra, foto verticale a destra */

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
min-width: 0;
align-self: start;
margin-top: 0;
padding-top: 0;
}

/* Occhiello / motto identitario */

body.page-Test_home .mw-parser-output .ce-hero-kicker {
margin-bottom: 1.4rem;
color: var(--color-base, #ffffff);
opacity: 0.72;
font-size: 0.92rem;
line-height: 1.2;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
}

/* Immagine verticale della home: solo foto, nessun box */

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 2;
grid-row: 1;
width: 300px;
height: 450px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
}

body.page-Test_home .mw-parser-output .ce-hero-visual > p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description {
display: block;
width: 300px !important;
height: 450px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
display: block;
width: 300px !important;
height: 450px !important;
max-width: none !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

/* Testo principale hero */

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 0.98;
margin: 0 0 1.5rem;
letter-spacing: -0.03em;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.15rem;
line-height: 1.55;
max-width: 760px;
color: var(--color-base--subtle, #b8b8b8);
}

/* Indice editoriale principale: libero, senza box */

body.page-Test_home .mw-parser-output .ce-home-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
width: 100%;
margin: 0;
padding-top: 0;
border: 0;
}

body.page-Test_home .mw-parser-output .ce-index-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-index-number {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.04em;
}

body.page-Test_home .mw-parser-output .ce-index-title {
margin-bottom: 0.65rem;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 600;
}

/* Index / Federated Archives Alliance / Contatti: rosso Citizen */

body.page-Test_home .mw-parser-output .ce-index-title,
body.page-Test_home .mw-parser-output .ce-index-title a,
body.page-Test_home .mw-parser-output .ce-index-title a:visited {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: none;
}

body.page-Test_home .mw-parser-output .ce-index-title a:hover {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: underline;
}

body.page-Test_home .mw-parser-output .ce-index-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 1rem;
line-height: 1.45;
max-width: 32em;
}

/* Box laterali leggeri, senza delimitazioni */

body.page-Test_home .mw-parser-output .ce-side-box {
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-side-box::before {
content: none;
display: none;
}

body.page-Test_home .mw-parser-output .ce-side-label {
margin-bottom: 0.6rem;
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* Titoli colonna destra: bianchi */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:visited {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.1;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}

body.page-Test_home .mw-parser-output .ce-side-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.95rem;
line-height: 1.45;
}

body.page-Test_home .mw-parser-output .ce-side-link {
margin-top: 0.85rem;
font-size: 0.95rem;
}

/* Link azione colonna destra: bianchi, blu Citizen solo all'hover */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:visited {
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:hover {
color: var(--color-progressive, #36c) !important;
text-decoration: underline !important;
}

/* Footer Citizen visibile e alleggerito solo nella home */

body.page-Test_home #footer {
display: block !important;
margin-top: 1.5rem !important;
padding-top: 0 !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
background: transparent !important;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer-info {
display: block !important;
}

body.page-Test_home #footer-places,
body.page-Test_home #footer-icon,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

body.page-Test_home .citizen-footer-tagline,
body.page-Test_home #footer-tagline,
body.page-Test_home #footer .citizen-footer__tagline {
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer a,
body.page-Test_home #footer a:visited {
color: var(--color-base--subtle, #b8b8b8) !important;
text-decoration: none !important;
}

body.page-Test_home #footer a:hover {
color: var(--color-base, #ffffff) !important;
text-decoration: underline !important;
}

/* ==========================================================
RESPONSIVE
========================================================== */

/* Finestra intermedia:
1. hero ancora a due colonne
2. indice sotto
3. colonna informativa sotto l'indice */

@media (max-width: 1250px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 4rem));
min-height: auto;
margin: 0 auto;
padding: 2rem 0 3rem;
display: block;
}

body.page-Test_home .mw-parser-output .ce-home-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
align-items: start;
margin-bottom: 4.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1 / span 2;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 3;
grid-row: 1;
justify-self: start;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding-left: 0;
border-left: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 4rem;
}
}

/* Finestra più stretta:
hero passa a una colonna, ma ordine resta:
titolo/testo, foto, indice, blocchi informativi */

@media (max-width: 900px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 2rem));
padding: 1.5rem 0 3rem;
}

body.page-Test_home .mw-parser-output .ce-hero {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-bottom: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 300px;
height: 450px;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 300px !important;
height: 450px !important;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: 1fr;
gap: 1.7rem;
}

body.page-Test_home .mw-parser-output .ce-index-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2rem;
border-left: 0;
padding-left: 0;
border-top: 0;
padding-top: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 0;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
line-height: 0.98;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.05rem;
}
}

/* Mobile molto stretto */

@media (max-width: 520px) {
body.page-Test_home .mw-parser-output .ce-home {
width: 100%;
padding: 1rem 0 2.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.3rem, 13vw, 3.3rem);
}

body.page-Test_home .mw-parser-output .ce-hero-visual,
body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 260px !important;
height: 390px !important;
}
}
/* === [HOME] fine === */

/* === [MAPPA] inizio === */
/* Index — sommario della "rivista". Tipografia editoriale CONDIVISA con home e
progetti (occhiello / titolo da prima pagina / lead): vedi la "regola
tipografica" nel README. VE-safe: solo wikitext nativo (liste di definizione
; :), nessun div di layout, niente sezioni espandibili. Stile su body.page-Index. */

body.page-Index #bodyContent,
body.page-Index .mw-parser-output {
max-width: 56rem;
}

/* Titolo della pagina = titolo da prima pagina (come i progetti, .ce-headline) */
body.page-Index #firstHeading {
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* riga d'apertura = lead */
body.page-Index .mw-parser-output > p:first-of-type {
margin: .4rem 0 2.6rem;
max-width: 46rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}

/* ogni sezione è un blocco di lista di definizione; numerazione continua */
body.page-Index .mw-parser-output {
counter-reset: sez;
}
body.page-Index .mw-parser-output dl {
margin: 0 0 2.4rem;
}

/* etichetta di sezione = OCCHIELLO, nel ROSSO della home + numero (richiamo e
stacco visivo tra le sezioni). */
body.page-Index .mw-parser-output dt {
counter-increment: sez;
margin: 0 0 1rem;
font-size: .9rem;
font-weight: 500;
letter-spacing: .04em;
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.page-Index .mw-parser-output dt::before {
content: counter( sez, decimal-leading-zero );
margin-right: .7em;
font-variant-numeric: tabular-nums;
}

/* voce = titolo da prima pagina (ridotto) + descrizione sotto.
Ritmo verticale regolare: il titolo è un BLOCCO con un solo margin; la
descrizione è il testo della dd, con la sua interlinea. */
body.page-Index .mw-parser-output dd {
margin: 0 0 1.4rem;
color: var( --color-base--subtle, #b8b8b8 );
font-size: 1.02rem;
line-height: 1.55;
}
body.page-Index .mw-parser-output dd:last-child {
margin-bottom: 0;
}

/* titolo della voce: BIANCO TIPOGRAFICO, mai bluetto */
body.page-Index .mw-parser-output dd b {
display: block;
margin: 0 0 .35rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.2;
}
body.page-Index .mw-parser-output dd b a,
body.page-Index .mw-parser-output dd b a:visited {
color: #ffffff;
text-decoration: none;
}
body.page-Index .mw-parser-output dd b a:hover {
text-decoration: underline;
}
/* === [MAPPA] fine === */

/* === [DEV] inizio === */
/* ==========================================================
Dev — Dashboard "a riquadri per progetto" (pagina centrale).
Stesso taglio editoriale di CinetecaSarda, ma l'indice è una griglia
di card (riquadri), non il widget nel rail. Wrapper .dev-dash.
Colori dei link: default Citizen (nessun override).
========================================================== */

.dev-dash {
color: var( --color-base, #fff );
}

/* Testata editoriale */
.dev-dash .occhiello {
margin: 0 0 .7rem;
font-size: var( --font-size-x-small, .8125rem );
letter-spacing: .07em;
text-transform: uppercase;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-headline {
margin: 0 0 1rem;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}
.dev-dash .dev-lead {
margin: 0 0 .5rem;
max-width: 64ch;
font-size: 1.1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* Riquadri "a colonne" (masonry): impacchettano senza vuoti verticali */
.dev-dash .dev-griglia {
columns: 290px;
column-gap: 1.3rem;
margin-top: 2rem;
}

/* Riquadro = progetto */
.dev-dash .dev-card {
break-inside: avoid;
margin: 0 0 1.3rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
border-radius: 8px;
background: rgba( 255, 255, 255, .02 );
}
.dev-dash .dev-card-titolo {
margin-bottom: .5rem;
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
}
.dev-dash .dev-card-sub {
margin: .7rem 0 .2rem;
font-size: var( --font-size-xx-small, .75rem );
text-transform: uppercase;
letter-spacing: .07em;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.dev-dash .dev-card li {
padding: .18rem 0;
line-height: 1.4;
font-size: .95rem;
}

/* Pagine centrali dei sotto-progetti (editoriale + indice nel rail): nascondi
il titolo standard di Citizen — l'headline vive nel contenuto (.ce-headline). */
body.page-Dev_Tapescan #firstHeading,
body.page-Dev_Tapescan .mw-page-title-main,
body.page-Dev_TBC #firstHeading,
body.page-Dev_TBC .mw-page-title-main,
body.page-Dev_Robota #firstHeading,
body.page-Dev_Robota .mw-page-title-main {
display: none !important;
}

/* Dev: link dell'indice e dell'editoriale col colore di DEFAULT di Citizen
(non il giallo brand di CinetecaSarda, hardcodato in [INDICE]). Specificità
più alta → vince senza toccare CinetecaSarda. */
body.ns-3012 .archivio-indice .ai-voci a,
body.ns-3012 .archivio-indice .ai-voci a:visited,
body.ns-3012 .archivio-indice .ai-licenza a,
body.ns-3012 .archivio-indice .ai-licenza a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
body.ns-3012 .archivio-editoriale {
--ns-accent: var( --color-link, var( --color-progressive, #36c ) );
}

/* Testo introduttivo (lead) dei sotto-progetti Dev: colore di DEFAULT di
Citizen (testo base), non il grigio "subtle" editoriale di CinetecaSarda. */
body.ns-3012 .archivio-editoriale .lead p {
color: var( --color-base, #fff );
}
/* === [DEV] fine === */

/* === [NS-MALASTRADA] inizio === */
/* malastradafilm (ns 3010): identità ACROMATICA (bianco/nero), come il sito
malastradafilm.com — niente accent colorato (al contrario del giallo
CinetecaSarda). Link dell'indice grigio tipografico, voce TOC attiva bianca. */

body.ns-3010 .archivio-editoriale {
--ns-accent: var( --color-base, #fff );
}
body.ns-3010 .archivio-indice .ai-voci a,
body.ns-3010 .archivio-indice .ai-voci a:visited,
body.ns-3010 .archivio-indice .ai-licenza a,
body.ns-3010 .archivio-indice .ai-licenza a:visited {
color: var( --color-base--subtle, #b8b8b8 );
}

/* Dashboard: nascondi il titolo standard di Citizen (l'headline vive nel
contenuto, .ce-headline). */
body.page-Malastradafilm_Dashboard #firstHeading,
body.page-Malastradafilm_Dashboard .mw-page-title-main {
display: none !important;
}
/* === [NS-MALASTRADA] fine === */

Template:Indice Malastradafilm

2026-06-16T18:17:47Z

Cranio is thinking: indice d'archivio malastradafilm (sezioni curate)

MediaWiki:Common.css

2026-06-16T17:13:10Z

Cranio is thinking: [MAPPA]: ritmo verticale regolare (titolo a blocco, un solo margin)

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
display:block;
font-size:0.85em;
margin-top:-0.3em;
margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
color:inherit;
}

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
(ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
color: #ffffff;
}
body.ns-3004 #firstHeading::before {
content: "Cineteca Sarda";
display: block;
margin-bottom: .35rem;
font-size: .8rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
display: none;
}
/* === [NS-BRAND] fine === */

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 300px;
gap: 3.5rem;
align-items: start;
}
.archivio-editoriale .art-main {
min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
margin: 0 0 .7rem;
font-size: .9rem;
letter-spacing: .04em;
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
border: 0;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
margin: 0;
max-width: none;
}
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
margin-bottom: 0;
}
.archivio-editoriale .lead strong {
color: var( --color-base, #fff );
font-weight: 600;
}

/* Riga "Prototipo di consultazione": blocco in evidenza (accent a sinistra) */
.archivio-editoriale .ce-prototipo {
margin: 1.8rem 0 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var( --ns-accent );
}
.archivio-editoriale .ce-prototipo-eti {
font-size: .92rem;
font-weight: 600;
color: #ffffff;
margin-bottom: .2rem;
}
.archivio-editoriale .ce-prototipo p {
margin: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
margin: 0 0 .4rem;
padding-bottom: .55rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
padding: .7rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
border-bottom: 0;
}
.archivio-editoriale .idx-eti {
margin-bottom: .2rem;
font-size: .98rem;
font-weight: 600;
color: #ffffff;
}
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
font-weight: 500;
text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
.archivio-editoriale .art-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
Indice d'archivio (sorgente unica {{Indice <NS>}}).
Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
(sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
Citizen (--font-size-*) per armonia con la TOC.
========================================================== */

.archivio-indice {
font-size: var( --font-size-small, .875rem );
line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
float: right;
width: 280px;
margin: .2rem 0 1.4rem 2rem;
padding-left: 1.4rem;
border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
.archivio-indice.ai-rail {
float: none;
width: auto;
margin: 0 0 1.6rem;
padding-left: 0;
border-left: 0;
}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
float: none;
width: auto;
margin: 0 0 1rem;
padding: 0;
border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
padding-bottom: .45rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
font-size: var( --font-size-x-small, .8125rem );
text-transform: uppercase;
letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
cursor: pointer;
user-select: none;
line-height: 1;
padding: .1rem .25rem;
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
content: "▾";
display: inline-block;
font-size: .9em;
transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
display: none;
}
.archivio-indice .ai-toggle:hover {
color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
padding: .5rem 0;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
border-bottom: 0;
}
.archivio-indice .ai-eti {
margin-bottom: .12rem;
font-size: var( --font-size-small, .875rem );
font-weight: 600;
color: #ffffff;
}
.archivio-indice .ai-voci {
font-size: var( --font-size-small, .875rem );
color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
color: #e7b142;
font-weight: 500;
text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
text-decoration: underline;
}

/* Riga licenza (sempre visibile, anche con indice chiuso) */
.archivio-indice .ai-licenza {
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
font-size: var( --font-size-x-small, .8125rem );
color: var( --color-base--subtle, #b8b8b8 );
opacity: .85;
}
.archivio-indice .ai-licenza a,
.archivio-indice .ai-licenza a:visited {
color: #e7b142;
text-decoration: none;
}
.archivio-indice .ai-licenza a:hover {
text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
color: #e7b142;
font-weight: 600;
}
/* === [INDICE] fine === */

/* === [HOME] inizio === */
/* ==========================================================
HOMEPAGE CINETECA DELL'ETNA
Pagina di test: Test_home
========================================================== */

/* Nasconde titolo standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-header,
body.page-Test_home .citizen-body-header,
body.page-Test_home .mw-body-header,
body.page-Test_home #firstHeading,
body.page-Test_home .firstHeading,
body.page-Test_home .mw-first-heading,
body.page-Test_home .mw-page-title-main {
display: none !important;
}

/* Nasconde colonna destra standard Citizen solo nella pagina Test_home */

body.page-Test_home .citizen-page-sidebar,
body.page-Test_home .citizen-toc,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-lastmod,
body.page-Test_home .citizen-page-actions-more,
body.page-Test_home .toc,
body.page-Test_home #toc {
display: none !important;
}

/* Nasconde informazioni ultima modifica solo nella pagina Test_home */

body.page-Test_home .mw-parser-output .printfooter,
body.page-Test_home .mw-parser-output .catlinks,
body.page-Test_home .mw-parser-output .mw-footer-info,
body.page-Test_home .page-info,
body.page-Test_home .citizen-page-info,
body.page-Test_home .citizen-page-footer,
body.page-Test_home .citizen-body-footer,
body.page-Test_home .mw-body-footer,
body.page-Test_home .mw-last-modified,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

/* Allarga lo spazio utile della home dentro Citizen */

body.page-Test_home .citizen-body,
body.page-Test_home .citizen-body-container,
body.page-Test_home .citizen-body-content,
body.page-Test_home .citizen-page-container,
body.page-Test_home .mw-body,
body.page-Test_home .mw-body-content,
body.page-Test_home .mw-parser-output,
body.page-Test_home #bodyContent,
body.page-Test_home #content {
max-width: none !important;
width: 100% !important;
}

body.page-Test_home .citizen-body {
grid-template-columns: minmax(0, 1fr) !important;
}

/* Contenitore generale home */

body.page-Test_home .mw-parser-output .ce-home {
width: min(1300px, calc(100vw - 14rem));
max-width: none !important;
min-height: calc(100vh - 7rem);
margin: 0 auto;
padding: 2rem 0 2rem;
box-sizing: border-box;
overflow-x: hidden;
transform: none;

display: flex;
align-items: center;
}

/* Layout generale: contenuto principale + colonna laterale */

body.page-Test_home .mw-parser-output .ce-home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

/* Colonna laterale editoriale */

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
border-left: 0;
padding-left: 2rem;
}

/* Hero: testo a sinistra, foto verticale a destra */

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 3rem;
align-items: start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
min-width: 0;
align-self: start;
margin-top: 0;
padding-top: 0;
}

/* Occhiello / motto identitario */

body.page-Test_home .mw-parser-output .ce-hero-kicker {
margin-bottom: 1.4rem;
color: var(--color-base, #ffffff);
opacity: 0.72;
font-size: 0.92rem;
line-height: 1.2;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
}

/* Immagine verticale della home: solo foto, nessun box */

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 2;
grid-row: 1;
width: 300px;
height: 450px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
}

body.page-Test_home .mw-parser-output .ce-hero-visual > p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description {
display: block;
width: 300px !important;
height: 450px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
display: block;
width: 300px !important;
height: 450px !important;
max-width: none !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

/* Testo principale hero */

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 0.98;
margin: 0 0 1.5rem;
letter-spacing: -0.03em;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.15rem;
line-height: 1.55;
max-width: 760px;
color: var(--color-base--subtle, #b8b8b8);
}

/* Indice editoriale principale: libero, senza box */

body.page-Test_home .mw-parser-output .ce-home-index {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
width: 100%;
margin: 0;
padding-top: 0;
border: 0;
}

body.page-Test_home .mw-parser-output .ce-index-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-index-number {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.04em;
}

body.page-Test_home .mw-parser-output .ce-index-title {
margin-bottom: 0.65rem;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 600;
}

/* Index / Federated Archives Alliance / Contatti: rosso Citizen */

body.page-Test_home .mw-parser-output .ce-index-title,
body.page-Test_home .mw-parser-output .ce-index-title a,
body.page-Test_home .mw-parser-output .ce-index-title a:visited {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: none;
}

body.page-Test_home .mw-parser-output .ce-index-title a:hover {
color: var(--color-link-red, var(--color-destructive, #d33)) !important;
text-decoration: underline;
}

body.page-Test_home .mw-parser-output .ce-index-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 1rem;
line-height: 1.45;
max-width: 32em;
}

/* Box laterali leggeri, senza delimitazioni */

body.page-Test_home .mw-parser-output .ce-side-box {
padding: 0;
border: 0;
background: transparent;
}

body.page-Test_home .mw-parser-output .ce-side-box::before {
content: none;
display: none;
}

body.page-Test_home .mw-parser-output .ce-side-label {
margin-bottom: 0.6rem;
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* Titoli colonna destra: bianchi */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:visited {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.1;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-title a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}

body.page-Test_home .mw-parser-output .ce-side-text {
color: var(--color-base--subtle, #b8b8b8);
font-size: 0.95rem;
line-height: 1.45;
}

body.page-Test_home .mw-parser-output .ce-side-link {
margin-top: 0.85rem;
font-size: 0.95rem;
}

/* Link azione colonna destra: bianchi, blu Citizen solo all'hover */

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a,
body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:visited {
color: #ffffff !important;
text-decoration: none !important;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-link a:hover {
color: var(--color-progressive, #36c) !important;
text-decoration: underline !important;
}

/* Footer Citizen visibile e alleggerito solo nella home */

body.page-Test_home #footer {
display: block !important;
margin-top: 1.5rem !important;
padding-top: 0 !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
background: transparent !important;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer-info {
display: block !important;
}

body.page-Test_home #footer-places,
body.page-Test_home #footer-icon,
body.page-Test_home #footer-info-lastmod {
display: none !important;
}

body.page-Test_home .citizen-footer-tagline,
body.page-Test_home #footer-tagline,
body.page-Test_home #footer .citizen-footer__tagline {
color: var(--color-base--subtle, #b8b8b8) !important;
opacity: 0.72;
}

body.page-Test_home #footer a,
body.page-Test_home #footer a:visited {
color: var(--color-base--subtle, #b8b8b8) !important;
text-decoration: none !important;
}

body.page-Test_home #footer a:hover {
color: var(--color-base, #ffffff) !important;
text-decoration: underline !important;
}

/* ==========================================================
RESPONSIVE
========================================================== */

/* Finestra intermedia:
1. hero ancora a due colonne
2. indice sotto
3. colonna informativa sotto l'indice */

@media (max-width: 1250px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 4rem));
min-height: auto;
margin: 0 auto;
padding: 2rem 0 3rem;
display: block;
}

body.page-Test_home .mw-parser-output .ce-home-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-home-main {
min-width: 0;
}

body.page-Test_home .mw-parser-output .ce-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
align-items: start;
margin-bottom: 4.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1 / span 2;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 3;
grid-row: 1;
justify-self: start;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding-left: 0;
border-left: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 4rem;
}
}

/* Finestra più stretta:
hero passa a una colonna, ma ordine resta:
titolo/testo, foto, indice, blocchi informativi */

@media (max-width: 900px) {
body.page-Test_home .mw-parser-output .ce-home {
width: min(100%, calc(100vw - 2rem));
padding: 1.5rem 0 3rem;
}

body.page-Test_home .mw-parser-output .ce-hero {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-bottom: 3.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text {
grid-column: 1;
grid-row: 1;
}

body.page-Test_home .mw-parser-output .ce-hero-visual {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 300px;
height: 450px;
}

body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 300px !important;
height: 450px !important;
}

body.page-Test_home .mw-parser-output .ce-home-index {
grid-template-columns: 1fr;
gap: 1.7rem;
}

body.page-Test_home .mw-parser-output .ce-index-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}

body.page-Test_home .mw-parser-output .ce-home-aside {
display: flex;
flex-direction: column;
gap: 2rem;
border-left: 0;
padding-left: 0;
border-top: 0;
padding-top: 0;
}

body.page-Test_home .mw-parser-output .ce-home-aside .ce-side-box {
padding-left: 0;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
line-height: 0.98;
}

body.page-Test_home .mw-parser-output .ce-hero-text p {
font-size: 1.05rem;
}
}

/* Mobile molto stretto */

@media (max-width: 520px) {
body.page-Test_home .mw-parser-output .ce-home {
width: 100%;
padding: 1rem 0 2.5rem;
}

body.page-Test_home .mw-parser-output .ce-hero-text h1 {
font-size: clamp(2.3rem, 13vw, 3.3rem);
}

body.page-Test_home .mw-parser-output .ce-hero-visual,
body.page-Test_home .mw-parser-output .ce-hero-visual a,
body.page-Test_home .mw-parser-output .ce-hero-visual span,
body.page-Test_home .mw-parser-output .ce-hero-visual figure,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-default-size,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-description,
body.page-Test_home .mw-parser-output .ce-hero-visual img,
body.page-Test_home .mw-parser-output .ce-hero-visual .mw-file-element,
body.page-Test_home .mw-parser-output .ce-hero-img {
width: 260px !important;
height: 390px !important;
}
}
/* === [HOME] fine === */

/* === [MAPPA] inizio === */
/* Index — sommario della "rivista". Tipografia editoriale CONDIVISA con home e
progetti (occhiello / titolo da prima pagina / lead): vedi la "regola
tipografica" nel README. VE-safe: solo wikitext nativo (liste di definizione
; :), nessun div di layout, niente sezioni espandibili. Stile su body.page-Index. */

body.page-Index #bodyContent,
body.page-Index .mw-parser-output {
max-width: 56rem;
}

/* Titolo della pagina = titolo da prima pagina (come i progetti, .ce-headline) */
body.page-Index #firstHeading {
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}

/* riga d'apertura = lead */
body.page-Index .mw-parser-output > p:first-of-type {
margin: .4rem 0 2.6rem;
max-width: 46rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
}

/* ogni sezione è un blocco di lista di definizione; numerazione continua */
body.page-Index .mw-parser-output {
counter-reset: sez;
}
body.page-Index .mw-parser-output dl {
margin: 0 0 2.4rem;
}

/* etichetta di sezione = OCCHIELLO, nel ROSSO della home + numero (richiamo e
stacco visivo tra le sezioni). */
body.page-Index .mw-parser-output dt {
counter-increment: sez;
margin: 0 0 1rem;
font-size: .9rem;
font-weight: 500;
letter-spacing: .04em;
color: var( --color-link-red, var( --color-destructive, #d33 ) );
}
body.page-Index .mw-parser-output dt::before {
content: counter( sez, decimal-leading-zero );
margin-right: .7em;
font-variant-numeric: tabular-nums;
}

/* voce = titolo da prima pagina (ridotto) + descrizione sotto.
Ritmo verticale regolare: il titolo è un BLOCCO con un solo margin; la
descrizione è il testo della dd, con la sua interlinea. */
body.page-Index .mw-parser-output dd {
margin: 0 0 1.4rem;
color: var( --color-base--subtle, #b8b8b8 );
font-size: 1.02rem;
line-height: 1.55;
}
body.page-Index .mw-parser-output dd:last-child {
margin-bottom: 0;
}

/* titolo della voce: BIANCO TIPOGRAFICO, mai bluetto */
body.page-Index .mw-parser-output dd b {
display: block;
margin: 0 0 .35rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.2;
}
body.page-Index .mw-parser-output dd b a,
body.page-Index .mw-parser-output dd b a:visited {
color: #ffffff;
text-decoration: none;
}
body.page-Index .mw-parser-output dd b a:hover {
text-decoration: underline;
}
/* === [MAPPA] fine === */

/* === [DEV] inizio === */
/* ==========================================================
Dev — Dashboard "a riquadri per progetto" (pagina centrale).
Stesso taglio editoriale di CinetecaSarda, ma l'indice è una griglia
di card (riquadri), non il widget nel rail. Wrapper .dev-dash.
Colori dei link: default Citizen (nessun override).
========================================================== */

.dev-dash {
color: var( --color-base, #fff );
}

/* Testata editoriale */
.dev-dash .occhiello {
margin: 0 0 .7rem;
font-size: var( --font-size-x-small, .8125rem );
letter-spacing: .07em;
text-transform: uppercase;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-headline {
margin: 0 0 1rem;
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
font-weight: 700;
letter-spacing: -.02em;
color: #ffffff;
}
.dev-dash .dev-lead {
margin: 0 0 .5rem;
max-width: 64ch;
font-size: 1.1rem;
line-height: 1.55;
color: var( --color-base--subtle, #b8b8b8 );
}

/* Riquadri "a colonne" (masonry): impacchettano senza vuoti verticali */
.dev-dash .dev-griglia {
columns: 290px;
column-gap: 1.3rem;
margin-top: 2rem;
}

/* Riquadro = progetto */
.dev-dash .dev-card {
break-inside: avoid;
margin: 0 0 1.3rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
border-radius: 8px;
background: rgba( 255, 255, 255, .02 );
}
.dev-dash .dev-card-titolo {
margin-bottom: .5rem;
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
}
.dev-dash .dev-card-sub {
margin: .7rem 0 .2rem;
font-size: var( --font-size-xx-small, .75rem );
text-transform: uppercase;
letter-spacing: .07em;
color: var( --color-base--subtle, #b8b8b8 );
}
.dev-dash .dev-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.dev-dash .dev-card li {
padding: .18rem 0;
line-height: 1.4;
font-size: .95rem;
}

/* Pagine centrali dei sotto-progetti (editoriale + indice nel rail): nascondi
il titolo standard di Citizen — l'headline vive nel contenuto (.ce-headline). */
body.page-Dev_Tapescan #firstHeading,
body.page-Dev_Tapescan .mw-page-title-main,
body.page-Dev_TBC #firstHeading,
body.page-Dev_TBC .mw-page-title-main,
body.page-Dev_Robota #firstHeading,
body.page-Dev_Robota .mw-page-title-main {
display: none !important;
}

/* Dev: link dell'indice e dell'editoriale col colore di DEFAULT di Citizen
(non il giallo brand di CinetecaSarda, hardcodato in [INDICE]). Specificità
più alta → vince senza toccare CinetecaSarda. */
body.ns-3012 .archivio-indice .ai-voci a,
body.ns-3012 .archivio-indice .ai-voci a:visited,
body.ns-3012 .archivio-indice .ai-licenza a,
body.ns-3012 .archivio-indice .ai-licenza a:visited {
color: var( --color-link, var( --color-progressive, #36c ) );
}
body.ns-3012 .archivio-editoriale {
--ns-accent: var( --color-link, var( --color-progressive, #36c ) );
}

/* Testo introduttivo (lead) dei sotto-progetti Dev: colore di DEFAULT di
Citizen (testo base), non il grigio "subtle" editoriale di CinetecaSarda. */
body.ns-3012 .archivio-editoriale .lead p {
color: var( --color-base, #fff );
}
/* === [DEV] fine === */