etna.foundation - User contributions [en]

Template:IntestazionePagine

2026-06-16T23:14:44Z

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>

<noinclude>
{{Documentazione template}}

== IntestazioneArchivio ==

Template per uniformare l’intestazione delle pagine di archivio.

Serve a:
* visualizzare un titolo “pulito” (senza namespace);
* indicare chiaramente l’archivio (namespace) di appartenenza;
* creare un collegamento diretto alla dashboard dell’archivio.

=== Uso base ===
<pre>
{{IntestazioneArchivio}}
</pre>

Mostra:
* titolo della pagina senza namespace;
* riga: “Archivio: NomeNamespace” con link a <code>Namespace:Dashboard</code>.

=== Uso con titolo personalizzato ===
<pre>
{{IntestazioneArchivio|titolo=Casamatta}}
</pre>

Il parametro <code>titolo</code> consente di forzare il titolo visualizzato.

=== Parametri ===
{| class="wikitable"
! Parametro !! Descrizione !! Obbligatorio
|-
| <code>titolo</code> || Titolo visualizzato della pagina || No
|}

=== Note redazionali ===
* Il template va inserito **all’inizio della pagina**.
* Presuppone l’esistenza di una pagina <code>Dashboard</code> nel namespace di riferimento.
* È pensato per le pagine di contenuto degli archivi fondativi.

[[Categoria:Template di struttura]]
</noinclude>

MediaWiki:Common.css

2026-06-16T23:14:30Z

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

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

/* === Footer MediaWiki/Citizen === */

#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 === */

.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;
}

/* ==========================================================
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;
}
}

/* === [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 === */

/* === [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 === */

/* === [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 il menu" in fondo al widget indice (niente riga separatrice) */
.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 (toggle apri/chiudi su tutto l'header) */
.archivio-indice .ai-testata {
cursor: pointer;
}
/* === [INDICE] 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:14:16Z

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:57:20Z

Cranio is thinking: brand Opera (colori malastradafilm) [NS-OPERAFILOSOFICA]

Template:Indice Operafilosoficanomade

2026-06-16T22:56:33Z

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>

Template:Indice Malastradafilm

2026-06-16T21:53:47Z

Cranio is thinking: cornice indice malastradafilm (transclude Malastradafilm:Menu)

<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>

Template:Dashboard archivio

2026-06-16T21:53:36Z

Cranio is thinking: testata editoriale d'archivio (TemplateData, VE-safe)

<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>

MediaWiki:Citizen.js

2026-06-16T21:53:24Z

Cranio is thinking: toggle indice: testata cliccabile per intero

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

mw.hook('wikipage.content').add(function ($content) {

// 1) trova il box StatoArchivio nel contenuto
const box = $content.find('[data-stato-archivio="1"]').first();
if (!box.length) return;

// 2) trova la sidebar/rail di Citizen
const sidebar =
document.querySelector('.citizen-page-sidebar') ||
document.querySelector('.citizen-sidebar') ||
document.querySelector('.citizen-toc-container');

if (!sidebar) return;

// 3) inserisci il box come PRIMO widget del rail
sidebar.prepend(box[0]);

// 4) spacing coerente con gli altri widget
box[0].style.marginBottom = '1rem';
});

/* 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;
}

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 ] : false;
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:53:09Z

Cranio is thinking: malastradafilm: indice a liste + brand acromatico [NS-MALASTRADA] + testata cliccabile

MediaWiki:Common.css

2026-06-16T14:05:09Z

Cranio is thinking: rimosso blocco [SEZIONI]: si usa il chevron nativo di Citizen

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

/* === Footer MediaWiki/Citizen === */

#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 === */

.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;
}

/* ==========================================================
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;
}
}

/* === [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 === */

/* === [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 === */

/* === [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 === */

/* === [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 === */

MediaWiki:Citizen.js

2026-06-16T14:04:51Z

Cranio is thinking: sezioni: pilota la funzione nativa di Citizen (un solo chevron) invece di aggiungerne una seconda

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

mw.hook('wikipage.content').add(function ($content) {

// 1) trova il box StatoArchivio nel contenuto
const box = $content.find('[data-stato-archivio="1"]').first();
if (!box.length) return;

// 2) trova la sidebar/rail di Citizen
const sidebar =
document.querySelector('.citizen-page-sidebar') ||
document.querySelector('.citizen-sidebar') ||
document.querySelector('.citizen-toc-container');

if (!sidebar) return;

// 3) inserisci il box come PRIMO widget del rail
sidebar.prepend(box[0]);

// 4) spacing coerente con gli altri widget
box[0].style.marginBottom = '1rem';
});

/* 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
document.querySelectorAll( '.archivio-indice .ai-toggle' ).forEach( function ( t ) {
if ( t.dataset.bound ) {
return;
}
t.dataset.bound = '1';
var act = function () {
var b = t.closest( '.archivio-indice' );
b.classList.toggle( 'ai-collapsed' );
try {
localStorage.setItem( KEY, b.classList.contains( 'ai-collapsed' ) ? '1' : '0' );
} catch ( e ) {}
};
t.addEventListener( 'click', act );
t.addEventListener( 'keydown', function ( e ) {
if ( e.key === 'Enter' || e.key === ' ' ) {
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;
}

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 ] : false;
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 === */

Template:Dev-TBC-Navigation

2026-06-16T13:54:55Z

Cranio is thinking: sostituito il vecchio box col widget indice {{Indice TBC|rail=1}}

<includeonly>{{Indice TBC|rail=1}}</includeonly><noinclude>
'''Alias di compatibilità.''' Questo template ora rende il widget indice unificato
<code><nowiki>{{Indice TBC|rail=1}}</nowiki></code>, che sostituisce il vecchio box di navigazione.
Le pagine <code>Dev:TBC/*</code> lo richiamano ancora come <code><nowiki>{{Dev-TBC-Navigation}}</nowiki></code>;
in futuro possono usare direttamente <code><nowiki>{{Indice TBC|rail=1}}</nowiki></code>.
[[Category:Template di struttura]]
</noinclude>

MediaWiki:Common.css

2026-06-16T13:54:37Z

Cranio is thinking: stile sezioni collassabili (blocco [SEZIONI])

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

/* === Footer MediaWiki/Citizen === */

#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 === */

.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;
}

/* ==========================================================
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;
}
}

/* === [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 === */

/* === [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 === */

/* === [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 === */

/* === [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 === */
/* === [SEZIONI] inizio === */
/* Sezioni collassabili (default chiuse, stato ricordato — vedi Citizen.js).
Granularità: intestazioni di 2º livello (== ==). */
.mw-parser-output .mw-heading2.ce-sec-h {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.mw-parser-output .mw-heading2.ce-sec-h > h2::before {
content: '\25B8'; /* freccia ▸ */
display: inline-block;
width: 1em;
margin-right: .3em;
font-size: .72em;
line-height: 1;
vertical-align: middle;
color: var( --color-base--subtle, #9aa0a6 );
transition: transform .15s ease;
transform: rotate( 90deg ); /* aperta: punta in basso */
}
.mw-parser-output .mw-heading2.ce-sec-h.ce-collapsed > h2::before {
transform: rotate( 0 ); /* chiusa: punta a destra */
}
.mw-parser-output .mw-heading2.ce-sec-h.ce-collapsed + .ce-sec-content {
display: none;
}
.mw-parser-output .mw-heading2.ce-sec-h .mw-editsection {
cursor: auto;
-webkit-user-select: auto;
user-select: auto;
}
/* === [SEZIONI] fine === */

MediaWiki:Citizen.js

2026-06-16T13:54:19Z

Cranio is thinking: sezioni collassabili: default chiuse + stato per-pagina; àncore riaprono

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

mw.hook('wikipage.content').add(function ($content) {

// 1) trova il box StatoArchivio nel contenuto
const box = $content.find('[data-stato-archivio="1"]').first();
if (!box.length) return;

// 2) trova la sidebar/rail di Citizen
const sidebar =
document.querySelector('.citizen-page-sidebar') ||
document.querySelector('.citizen-sidebar') ||
document.querySelector('.citizen-toc-container');

if (!sidebar) return;

// 3) inserisci il box come PRIMO widget del rail
sidebar.prepend(box[0]);

// 4) spacing coerente con gli altri widget
box[0].style.marginBottom = '1rem';
});

/* 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
document.querySelectorAll( '.archivio-indice .ai-toggle' ).forEach( function ( t ) {
if ( t.dataset.bound ) {
return;
}
t.dataset.bound = '1';
var act = function () {
var b = t.closest( '.archivio-indice' );
b.classList.toggle( 'ai-collapsed' );
try {
localStorage.setItem( KEY, b.classList.contains( 'ai-collapsed' ) ? '1' : '0' );
} catch ( e ) {}
};
t.addEventListener( 'click', act );
t.addEventListener( 'keydown', function ( e ) {
if ( e.key === 'Enter' || e.key === ' ' ) {
e.preventDefault();
act();
}
} );
} );
} );
/* === [SEZIONI] inizio ===
Sezioni collassabili in tutta la wiki.
- Granularità: intestazioni di 2º livello (== ==). Le sotto-sezioni (=== ===)
restano dentro la loro sezione.
- Default: CHIUSE al primo approdo (nessuno stato salvato per la pagina).
- Lo stato (quali sezioni aperte) è ricordato per-pagina in localStorage.
- I link interni / le voci della TOC riaprono la sezione di destinazione. */
mw.hook( 'wikipage.content' ).add( function () {
var body = document.querySelector( '#mw-content-text .mw-parser-output' );
if ( !body || body.dataset.ceSecDone ) {
return;
}

// intestazioni H2 di primo livello nel corpo (wrapper .mw-heading2 in MW 1.45,
// o <h2> nudo come fallback)
var headings = Array.prototype.slice.call( body.children ).filter( function ( n ) {
return ( n.classList && n.classList.contains( 'mw-heading2' ) ) || n.tagName === 'H2';
} );
if ( !headings.length ) {
return;
}
body.dataset.ceSecDone = '1';

function headingId( h ) {
var hx = h.querySelector ? ( h.querySelector( 'h1,h2,h3,h4' ) || h ) : h;
return hx.id || null;
}

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 ) {}
}

function save() {
var open = [];
headings.forEach( function ( h ) {
if ( !h.classList.contains( 'ce-collapsed' ) ) {
var id = headingId( h );
if ( id ) { open.push( id ); }
}
} );
try { localStorage.setItem( SKEY, JSON.stringify( open ) ); } catch ( e ) {}
}

headings.forEach( function ( h ) {
// avvolge i fratelli fino alla prossima intestazione H2
var content = document.createElement( 'div' );
content.className = 'ce-sec-content';
var sib = h.nextSibling;
while ( sib ) {
var next = sib.nextSibling;
if ( sib.nodeType === 1 &&
( ( sib.classList && sib.classList.contains( 'mw-heading2' ) ) || sib.tagName === 'H2' ) ) {
break;
}
content.appendChild( sib );
sib = next;
}
h.parentNode.insertBefore( content, h.nextSibling );
content._ceHeading = h;
h.classList.add( 'ce-sec-h' );
h.setAttribute( 'tabindex', '0' );

var hid = headingId( h );
var open = stored ? !!openIds[ hid ] : false; // default: chiusa
h.setAttribute( 'aria-expanded', open ? 'true' : 'false' );
if ( !open ) {
h.classList.add( 'ce-collapsed' );
}

var toggle = function () {
var c = h.classList.toggle( 'ce-collapsed' );
h.setAttribute( 'aria-expanded', c ? 'false' : 'true' );
save();
};
h.addEventListener( 'click', function ( e ) {
if ( e.target.closest( 'a' ) || e.target.closest( '.mw-editsection' ) ) {
return; // non interferire con i link / modifica-sezione
}
toggle();
} );
h.addEventListener( 'keydown', function ( e ) {
if ( ( e.key === 'Enter' || e.key === ' ' ) &&
!e.target.closest( 'a' ) && !e.target.closest( '.mw-editsection' ) ) {
e.preventDefault();
toggle();
}
} );
} );

// riapri la sezione di destinazione quando si segue un'àncora
function expandFor( hash ) {
if ( !hash || hash.length < 2 ) { return; }
var id;
try { id = decodeURIComponent( hash.replace( /^#/, '' ) ); } catch ( e ) { id = hash.slice( 1 ); }
var el = document.getElementById( id );
if ( !el ) { return; }
var hWrap = el.closest( '.ce-sec-h' );
if ( hWrap ) {
hWrap.classList.remove( 'ce-collapsed' );
hWrap.setAttribute( 'aria-expanded', 'true' );
} else {
var c = el.closest( '.ce-sec-content' );
if ( c && c._ceHeading ) {
c._ceHeading.classList.remove( 'ce-collapsed' );
c._ceHeading.setAttribute( 'aria-expanded', 'true' );
}
}
save();
setTimeout( function () {
var t = document.getElementById( id );
if ( t && t.scrollIntoView ) { t.scrollIntoView(); }
}, 0 );
}
window.addEventListener( 'hashchange', function () { expandFor( location.hash ); } );
document.addEventListener( 'click', function ( e ) {
var a = e.target.closest( 'a[href^="#"]' );
if ( a ) {
var href = a.getAttribute( 'href' );
setTimeout( function () { expandFor( href ); }, 0 );
}
} );
if ( location.hash ) { expandFor( location.hash ); }
} );
/* === [SEZIONI] fine === */

Template:Indice TBC

2026-06-16T13:37:10Z

Cranio is thinking: testata indice → Dashboard

<includeonly><div class="archivio-indice {{#if:{{{rail|}}}|ai-rail|}}">
<div class="ai-testata">[[Dev:TBC|Dashboard]]<span class="ai-toggle" role="button" tabindex="0"></span></div>
<div class="ai-body">
<div class="ai-sez"><div class="ai-eti">Architettura & hardware</div><div class="ai-voci">[[Dev:TBC/Architettura|Architettura]] · [[Dev:TBC/Hardware|Video & Hardware]] · [[Dev:TBC/ADV7802 Minimal Test Board|ADV7802 Minimal Board]] · [[Dev:TBC/Controller RP2040 Raspberry Pico|Controller RP2040]]</div></div>
<div class="ai-sez"><div class="ai-eti">Sottosistemi</div><div class="ai-voci">[[Dev:TBC/Audio|Audio]] · [[Dev:TBC/MIDI e Controllo|MIDI e controllo]] · [[Dev:TBC/USB e UVC|USB e UVC]]</div></div>
<div class="ai-sez"><div class="ai-eti">Sviluppo</div><div class="ai-voci">[[Dev:TBC/Prima implementazione|Prime implementazioni]] · [[Dev:TBC/Software|Software]] · [[Dev:TBC/Operativo|Operativo]] · [[Dev:TBC/Progetto per l ingegnere|Ingegneria]]</div></div>
<div class="ai-sez"><div class="ai-eti">Contesto</div><div class="ai-voci">[[Dev:TBC/Mercato|Mercato]] · [[Dev:TBC/Risorse|Risorse]] · [[Dev:TBC/Diario|Diario]]</div></div>
</div>
</div></includeonly><noinclude>
Indice del sotto-progetto '''TBC''' (time base corrector). Nel rail con <code><nowiki>{{Indice TBC|rail=1}}</nowiki></code>.
[[Category:Template di struttura]]
</noinclude>

Template:Indice Robota

2026-06-16T13:36:53Z

Cranio is thinking: testata Dashboard + sezione Operatività (Snapshot)

<includeonly><div class="archivio-indice {{#if:{{{rail|}}}|ai-rail|}}">
<div class="ai-testata">[[Dev:Robota|Dashboard]]<span class="ai-toggle" role="button" tabindex="0"></span></div>
<div class="ai-body">
<div class="ai-sez"><div class="ai-eti">Pagine principali</div><div class="ai-voci">[[Dev:Robota/Stack ai documentation|Stack AI: infrastruttura]] · [[Dev:Robota/Knowledge Graph Architecture|Knowledge Graph]] · [[Dev:Robota/Espansione automatizzata del dataset archivistico|Espansione del dataset]] · [[Dev:Robota/Architettura completa di un dataset di conoscenza archivistica per sistemi AI|Architettura del dataset]]</div></div>
<div class="ai-sez"><div class="ai-eti">Operatività</div><div class="ai-voci">[[Dev:Robota/Snapshot operativo|Snapshot operativo dello stack]]</div></div>
</div>
</div></includeonly><noinclude>
Indice del sotto-progetto '''Robota''' (sistema AI). Nel rail con <code><nowiki>{{Indice Robota|rail=1}}</nowiki></code>.
[[Category:Template di struttura]]
</noinclude>

Template:Indice Tapescan

2026-06-16T13:36:36Z

Cranio is thinking: testata indice → Dashboard

<includeonly><div class="archivio-indice {{#if:{{{rail|}}}|ai-rail|}}">
<div class="ai-testata">[[Dev:Tapescan|Dashboard]]<span class="ai-toggle" role="button" tabindex="0"></span></div>
<div class="ai-body">
<div class="ai-sez"><div class="ai-eti">Sintesi operativa</div><div class="ai-voci">[[Dev:Tapescan/Analisi dei gap|Analisi dei gap]] · [[Dev:Tapescan/Roadmap di ricerca|Roadmap di ricerca]]</div></div>
<div class="ai-sez"><div class="ai-eti">Prospettiva prodotto</div><div class="ai-voci">[[Dev:Tapescan/Visione industriale|Visione industriale]] · [[Dev:Tapescan/Indagine fornitori|Indagine fornitori]]</div></div>
<div class="ai-sez"><div class="ai-eti">Ricerca</div><div class="ai-voci">[[Dev:Tapescan/Studi|Studi]] · [[Dev:Tapescan/Glossario tecnico|Glossario tecnico]] · [[Dev:Tapescan/Elementi per universalità|Elementi per universalità]] · [[Dev:Tapescan/Ricognizione probabili tecniche|Ricognizione tecniche]] · [[Dev:Tapescan/Esperimenti|Esperimenti]] · [[Dev:Tapescan/Specifiche meccaniche per la finestra di test|Specifiche meccaniche]]</div></div>
<div class="ai-sez"><div class="ai-eti">Ipotesi tecniche</div><div class="ai-voci">[[Dev:Tapescan/Array testine LTO|Array testine LTO]] · [[Dev:Tapescan/Laser|Laser MOF]]</div></div>
<div class="ai-sez"><div class="ai-eti">Diario</div><div class="ai-voci">[[Dev:Tapescan/Diario|Diario]]</div></div>
</div>
</div></includeonly><noinclude>
Indice del sotto-progetto '''Tapescan''' (dentro Dev). Sorgente unica: sezioni curate dei sottopagine.
Nel rail con <code><nowiki>{{Indice Tapescan|rail=1}}</nowiki></code>. Usa il widget generico <code>.archivio-indice</code> (CSS + Citizen.js già in prod).
[[Category:Template di struttura]]
</noinclude>

MediaWiki:Common.css

2026-06-16T13:36:19Z

Cranio is thinking: Dev: testo lead sotto-progetti col colore base di Citizen

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

/* === Footer MediaWiki/Citizen === */

#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 === */

.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;
}

/* ==========================================================
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;
}
}

/* === [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 === */

/* === [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 === */

/* === [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 === */

/* === [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 === */