/* =============================================================================
MUSEI CIVICI — PIXEL-PERFECT ADDITIONS
Vedi `CONVENTIONS.md` (root tema) per il pattern. Tutte le regole sono
scoped sotto `.mc-page` o sotto componenti `.mc-*` specifici. Per il
debito tecnico sull'uniformazione dei selettori vedi `TECH_DEBT.md`.
Append-only file. Caricato dopo musei-civici.css per override mirati.
Tutti i selettori prefissati .mc-page (specificità minima 0,2,0).
No !important salvo casi documentati. No font esterni. No modifiche PHP.
============================================================================= */
/* ============================================================================
GLOBAL — CONTAINER WIDTH (vale per tutte le pagine A/B/C/D)
============================================================================ */
/* fix: nel Figma il design è progettato a 1440px. Su schermi più larghi le
sezioni interne devono restare centrate con max-width 1440px (le bg colorate
restano edge-to-edge perché la bg è sulla section esterna).
Strategia:
- Le sezioni con bg colorato (.mc-lhero, .mc-feed) restano full-width;
il loro contenuto interno (.mc-lhero__copy, .mc-feed__card) è capped.
- Le sezioni con bg trasparente/bianco (.mc-bc, .mc-filt, .mc-list, .mc-main)
vengono cappate direttamente loro stesse a 1440px con margin auto.
*/
:root { --mc-container-max: 1440px; }
/* Sezioni a contenuto centrato (bg neutro) */
.mc-page .mc-bc,
.mc-page .mc-filt,
.mc-page .mc-list,
.mc-page .mc-main {
max-width: var(--mc-container-max);
margin-left: auto;
margin-right: auto;
}
/* Hero listing: bg full-width, contenuto interno capped */
.mc-page .mc-lhero {
/* bg resta full-width (già sulla section esterna) */
padding-left: 0;
padding-right: 0;
}
.mc-page .mc-lhero__copy {
width: 100%;
max-width: var(--mc-container-max);
margin: 0 auto;
padding-left: var(--mc-safe);
padding-right: var(--mc-safe);
box-sizing: border-box;
}
/* Hero single (split copy + img): bg full-width MA contenuto centrato max 1440.
Pattern "inset boxed": padding-inline calcolato per spostare TUTTI i figli
(copy + img) dentro il container centrato. Su schermi <=1440 il padding è 0,
su schermi più larghi cresce in modo che il content sia max 1440 centrato.
Risultato: bg arriva al viewport, ma copy e foto restano allineati al
container come tutte le altre sezioni (.mc-bc, .mc-filt, .mc-list, .mc-main).
*/
.mc-page .mc-hero {
max-width: none;
padding-left: max(0px, calc((100% - var(--mc-container-max)) / 2));
padding-right: max(0px, calc((100% - var(--mc-container-max)) / 2));
}
/* fix: copy items sempre allineati a sinistra, no centering, no margin-auto */
.mc-page .mc-hero__copy {
align-items: flex-start;
}
/* Feedback section: bg full-width, card già centrata via flex */
.mc-page .mc-feed {
/* bg resta full-width, no cap sulla section */
}
/* ============================================================================
PAGINA A — LISTING SERVIZI (/servizi/)
Frame Figma: [D] L 2liv _ Servizi.jpg + [M] L 2liv _ Servizi.jpg
============================================================================ */
/* --- Hero: pattern decorativo a onde diagonali sulla destra --- */
/* fix: nel Figma l'hero ha un pattern decorativo (linee curve diagonali bianche
con opacity bassa) sulla metà destra. Replicato con SVG inline come
background-image (data URI). */
.mc-page .mc-lhero {
/* SVG inline: 4 linee curve diagonali parallele bianche, opacity 0.12.
Il pattern occupa ~55% della destra dell'hero, con repeat-x. */
background-image:
url("data:image/svg+xml;utf8, dentro mc-lhero__copy.
Nel Figma il listing non ha sub-text. Hide solo per la pagina servizi. */
.mc-page .mc-lhero__copy p {
display: none;
}
/* --- Hero: padding verticale moderato (Figma ~50-60px) --- */
.mc-page .mc-lhero {
padding-top: 56px;
padding-bottom: 56px;
min-height: 0;
}
/* --- Filtri: layout più compatto, allineato a sinistra --- */
/* fix: nel Figma c'è un solo filtro "Luogo" largo ~280px allineato a sinistra
con margine ~40px sopra e sotto. Il sito attuale ha 2 filtri (Stato + Ordina).
Allargo il gap e tengo l'allineamento sinistro. Larghezza dropdown limitata. */
.mc-page .mc-filt {
padding-top: 40px;
padding-bottom: 8px;
}
.mc-page .mc-filt__item {
flex: 0 1 280px;
min-width: 220px;
}
/* --- Listing: padding e gap griglia (card "respirano" verticalmente) --- */
/* fix: nel Figma le card hanno gap orizzontale ~32px e gap verticale ~64-72px
(il doppio dell'orizzontale per dare aria). Sito attuale: gap uniforme 40px. */
.mc-page .mc-list {
padding-top: 40px;
padding-bottom: 80px;
}
.mc-page .mc-list__grid {
gap: 64px 32px;
}
@media (max-width: 991px) {
.mc-page .mc-list__grid {
gap: 48px 24px;
}
}
@media (max-width: 600px) {
.mc-page .mc-list__grid {
gap: 40px 0;
}
}
/* --- Card servizio: layout puramente tipografico (no thumb, no badge) --- */
/* fix: il listing del Figma ha card flat senza immagine e senza badge.
Sito attuale renderizza thumbnail e badge "Attivo" anche sul listing.
Hide via CSS per la pagina servizi listing. */
.mc-page .mc-list__grid .mc-lcard__img {
display: none;
}
.mc-page .mc-list__grid .mc-lcard__badges {
display: none;
}
/* --- Card servizio: padding interno e linea separatrice violetta --- */
/* fix: la linea separatrice in basso card va color accent (#7D2670), non grigio
né rosa-chiaro. È l'accento violetto pieno del kit Musei Civici. */
.mc-page .mc-list__grid .mc-lcard {
padding-bottom: 24px;
border-bottom: 1px solid var(--mc-c-accent);
gap: 16px;
}
/* --- Card servizio: titolo con chevron > a destra (su 1 riga, justify space) --- */
/* fix: nel Figma il titolo card ha un chevron > sulla destra (indicatore
"vai al dettaglio"). Replicato via ::after con SVG inline. Solo su card
che linkano a un dettaglio (ovvero card che hanno href: tutte le mc-lcard
sono con href). */
.mc-page .mc-list__grid .mc-lcard__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font: 700 22px/30px var(--mc-f-sans);
color: var(--mc-c-text-base);
}
.mc-page .mc-list__grid .mc-lcard__title::after {
content: "";
flex-shrink: 0;
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,/)
Frame Figma: [D] Foglia _ Servizio.jpg + [M] Foglia _ Servizio.jpg
============================================================================ */
/* --- Hero: titolo H1 — spec PDF Figma: 48/56 --- */
.mc-page .mc-hero__title {
font: 700 48px/56px var(--mc-f-sans);
letter-spacing: 0;
}
/* --- Hero: gap copy interno --- */
.mc-page .mc-hero__copy {
gap: 32px;
padding-top: 48px;
padding-bottom: 48px;
}
.mc-page .mc-hero__copy-block {
gap: 16px;
}
/* --- Hero sub: spec Figma 18/28 in serif Lora (body/intro) --- */
.mc-page .mc-hero__sub {
font: 400 18px/28px var(--mc-f-serif);
color: var(--mc-c-text-base);
}
/* --- Hero actions: dropdown Condividi + Altre azioni (pattern Bootstrap Italia) --- */
/* I dropdown del tema usano classi BI: .dropdown / .btn-dropdown / .dropdown-menu /
.link-list. Allineato in basso a sinistra dello mc-hero__copy come nel pattern
single-oggetto-reperto.php (margin-top:auto consuma lo spazio sopra spingendo
il blocco al fondo del flex column). */
.mc-page .mc-hero__actions {
display: flex;
align-items: center;
gap: 24px;
align-self: flex-start;
margin-top: auto;
}
.mc-page .mc-hero__actions .btn-dropdown {
padding: 4px 0;
color: var(--mc-c-text-secondary);
font: 600 14px/20px var(--mc-f-sans);
}
.mc-page .mc-hero__actions .btn-dropdown:hover,
.mc-page .mc-hero__actions .btn-dropdown:focus {
color: var(--mc-c-accent);
}
.mc-page .mc-hero__actions .btn-dropdown svg {
flex-shrink: 0;
}
/* --- Sidebar Indice: typography esatta da specifica utente --- */
/* spec: Titillium Web 600 semibold, 18/28, letter-spacing 0.
Applicato sia al titolo "Indice della pagina" sia alle voci della lista. */
.mc-page .mc-nav__title {
font: 600 18px/28px var(--mc-f-sans);
letter-spacing: 0;
color: var(--mc-c-text-base);
padding: 16px 24px 12px;
text-transform: none;
margin-bottom: 0;
border-bottom: 3px solid var(--mc-c-border-light);
}
/* Progress bar: visibile, gestita da Bootstrap Italia [data-bs-navscroll]
con .it-navscroll-progressbar che aggiorna step-by-step lo scroll. */
/* Prima voce: padding-top come le altre voci (12px) */
.mc-page .mc-side .mc-nav__list .mc-nav__item:first-child a {
padding-top: 12px;
}
/* Title indice tutto maiuscolo (come pagina luogo) */
.mc-page .mc-nav__title {
text-transform: uppercase;
}
/* Toggle button (accordion-button BI): override stile pixel-perfect */
.mc-page .mc-side .accordion-button.mc-nav__title {
font: 600 18px/28px var(--mc-f-sans);
color: var(--mc-c-text-base);
background: transparent;
padding: 16px 24px 12px;
width: 100%;
text-align: left;
border: 0;
border-bottom: 3px solid var(--mc-c-border-light);
border-radius: 0;
box-shadow: none;
}
.mc-page .mc-side .accordion-button.mc-nav__title:focus,
.mc-page .mc-side .accordion-button.mc-nav__title:not(.collapsed) {
background: transparent;
color: var(--mc-c-text-base);
box-shadow: none;
}
/* Accordion-button con title tutto maiuscolo */
.mc-page .mc-side .accordion-button.mc-nav__title {
text-transform: uppercase;
}
/* Spec utente: padding 12px 24px, font 600 18/28 Titillium, border-left 3px nero
sull'item attivo. Reset border BI .nav-link, poi imposta solo border-left. */
.mc-page .mc-side .navbar .link-list-wrapper .mc-nav__item a,
.mc-page .mc-side .mc-nav__item a {
font: 600 18px/28px var(--mc-f-sans);
letter-spacing: 0;
color: var(--mc-c-accent);
padding: 12px 24px;
margin: 0;
border: 0 !important;
border-left: 3px solid transparent !important;
border-radius: 0 !important;
transition: color 0.15s ease, border-color 0.15s ease;
text-decoration: none;
display: block;
}
.mc-page .mc-side .navbar .link-list-wrapper .mc-nav__item.is-active a,
.mc-page .mc-side .navbar .link-list-wrapper .mc-nav__item a.active,
.mc-page .mc-side .mc-nav__item.is-active a,
.mc-page .mc-side .mc-nav__item a.active {
color: var(--mc-c-text-base) !important;
border-left: 3px solid var(--mc-c-text-base) !important;
}
.mc-page .mc-side .mc-nav__item:not(.is-active) a:not(.active):hover {
color: var(--mc-c-accent-dark);
}
/* Accordion-body: rimuovi padding default BI per allineare la lista col bordo */
.mc-page .mc-side .accordion-body {
padding: 0;
}
/* Progress bar: track grigio + fill violet (#7D2670) */
.mc-page .mc-side .progress.mc-nav__progress {
height: 4px;
margin: 0;
background: #D9DADB;
overflow: hidden;
}
.mc-page .mc-side .progress-bar.mc-nav__progress-bar {
background: var(--mc-c-accent);
transition: width 0.25s ease;
}
/* --- Sidebar progress bar: thinner --- */
.mc-page .mc-nav__progress {
height: 2px;
margin-bottom: 8px;
}
/* --- Sezioni h2: spec PDF Figma 40/48 --- */
.mc-page .mc-content .mc-sec h2 {
font: 700 40px/48px var(--mc-f-sans);
color: var(--mc-c-text-base);
margin: 0 0 8px 0;
letter-spacing: 0;
}
/* --- Sezioni: gap interno e padding sopra moderati --- */
.mc-page .mc-content .mc-sec {
padding: 40px 0;
gap: 16px;
}
/* Prima sezione: padding-top 0 in modo che il primo H2 sia allineato col
top del titolo "Indice della pagina" della sidebar. */
.mc-page .mc-content .mc-sec:first-child {
padding-top: 0;
}
/* --- Body sezione: spec Figma 18/28 in Lora (serif) --- */
/* Tutte le body delle sezioni (Descrizione, Orari, Costi, Prenotazione intro,
Dove, Accessibilità, Ulteriori) sono in Lora come da Figma. */
.mc-page .mc-content .mc-sec p,
.mc-page .mc-content .mc-sec li {
font: 400 18px/28px var(--mc-f-serif);
color: var(--mc-c-text-base);
letter-spacing: 0;
}
/* --- Sezione Prenotazione: intro + 2 colonne tel/email + CTA bottone --- */
/* spec PDF: label 24px bold (come Contatti), valore 18/28 link viola, intro
"Oppure prenota online:" 18/28, bottone "Prenota online" violet primary. */
.mc-page .mc-content .mc-sec#prenotazione {
gap: 24px;
}
.mc-page .mc-prenot__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 32px;
margin-top: 8px;
}
@media (max-width: 600px) {
.mc-page .mc-prenot__grid {
grid-template-columns: 1fr;
}
}
.mc-page .mc-prenot__col {
display: flex;
flex-direction: column;
gap: 8px;
}
.mc-page .mc-prenot__label {
font: 700 24px/32px var(--mc-f-sans);
color: var(--mc-c-text-base);
margin: 0;
letter-spacing: 0;
}
.mc-page .mc-prenot__value {
font: 400 18px/28px var(--mc-f-sans);
margin: 0;
letter-spacing: 0;
}
.mc-page .mc-prenot__value a {
color: var(--mc-c-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.mc-page .mc-prenot__value a:hover {
text-decoration: none;
}
.mc-page .mc-prenot__cta-text {
font: 400 18px/28px var(--mc-f-serif);
color: var(--mc-c-text-base);
margin: 16px 0 8px 0;
letter-spacing: 0;
}
.mc-page .mc-prenot__cta {
align-self: flex-start;
width: -moz-fit-content;
width: fit-content;
}
/* --- Card Place "Dove": no bg, titolo 32 violet, body 18/28 --- */
.mc-page .mc-card-place {
background: transparent;
border: 0;
max-width: 100%;
border-radius: 0;
}
.mc-page .mc-card-place:hover {
box-shadow: none;
}
.mc-page .mc-card-place__body {
padding: 32px;
gap: 16px;
}
/* spec utente: heading3/h3-lg, weight 700 solid, 32/40, ls 0, color violet #7D2670 */
.mc-page .mc-card-place .mc-card-place__title,
h3.mc-card-place__title {
font-family: var(--mc-f-sans);
font-weight: 700;
font-style: normal;
font-size: 32px;
line-height: 40px;
letter-spacing: 0;
color: var(--mc-c-accent);
margin: 0;
}
.mc-page .mc-card-place__text {
font: 400 18px/28px var(--mc-f-serif);
color: var(--mc-c-text-base);
letter-spacing: 0;
}
/* --- Galleria multimediale: grid 2 col × max 3 righe + paginazione --- */
.mc-page .mc-gallery {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
.mc-page .mc-gallery__pages {
position: relative;
}
.mc-page .mc-gallery__page {
display: none;
}
.mc-page .mc-gallery__page.is-active {
display: block;
}
.mc-page .mc-gallery__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
width: 100%;
}
@media (max-width: 600px) {
.mc-page .mc-gallery__grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* Item: aspect 4/3 fisso con object-fit cover per uniformità */
.mc-page .mc-gallery__item {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.mc-page .mc-gallery__media {
position: relative;
display: block;
aspect-ratio: 16/9;
background: var(--mc-c-bg-muted);
overflow: hidden;
border-radius: 0;
text-decoration: none;
}
/* Bottone immagine: reset chrome, mantiene ratio del media */
.mc-page .mc-gallery__media--btn {
width: 100%;
padding: 0;
border: 0;
margin: 0;
color: inherit;
font: inherit;
text-align: left;
cursor: zoom-in;
}
.mc-page .mc-gallery__media--btn:focus-visible {
outline: 3px solid var(--mc-c-accent);
outline-offset: 2px;
}
.mc-page .mc-gallery__media img,
.mc-page .mc-gallery__media video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mc-page .mc-gallery__item--image .mc-gallery__media {
cursor: zoom-in;
}
.mc-page .mc-gallery__item--image:hover .mc-gallery__media img {
transform: scale(1.04);
transition: transform .3s ease;
}
.mc-page .mc-gallery__item--image .mc-gallery__media img {
transition: transform .3s ease;
}
/* Overlay icona "ingrandisci" che appare in hover su immagini */
.mc-page .mc-gallery__expand--inline {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
width: 36px;
height: 36px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.mc-page .mc-gallery__item--image:hover .mc-gallery__expand--inline,
.mc-page .mc-gallery__media--btn:focus-visible .mc-gallery__expand--inline {
opacity: 1;
}
.mc-page .mc-gallery__expand--inline svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* Embed iframe responsive dentro media */
.mc-page .mc-gallery__embed {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.mc-page .mc-gallery__embed iframe,
.mc-page .mc-gallery__embed > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Bottone fullscreen sui video (file + embed) */
.mc-page .mc-gallery__expand {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 4px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.mc-page .mc-gallery__expand:hover,
.mc-page .mc-gallery__expand:focus {
background: var(--mc-c-accent);
}
.mc-page .mc-gallery__expand svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* Caption sotto media (titolo + autore) */
.mc-page .mc-gallery__caption {
font: 400 14px/20px var(--mc-f-sans);
color: var(--mc-c-text-muted);
margin: 0;
padding: 0;
}
.mc-page .mc-gallery__caption strong {
font-weight: 600;
color: var(--mc-c-text-base);
}
/* Pagination — componente Bootstrap Italia .pagination
Markup identico a /esplora-il-museo/collezioni/; forziamo Titillium per
sovrascrivere eventuali ereditarietà di .mc-page (font-serif Lora). */
.mc-page .mc-gallery__pagination .pagination,
.mc-page .mc-gallery__pagination .pagination .page-link {
font-family: var(--mc-f-sans);
}
/* Modal lightbox immagine: contiene