.elementor-28027 .elementor-element.elementor-element-f6d67c9{--display:flex;--padding-top:120px;--padding-bottom:56px;--padding-left:40px;--padding-right:40px;}.elementor-28027 .elementor-element.elementor-element-8cabf34{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-28027 .elementor-element.elementor-element-4b5ddc9{--display:flex;}.elementor-28027 .elementor-element.elementor-element-3ef619a{--display:flex;}.elementor-28027 .elementor-element.elementor-element-633bed3{--display:flex;--padding-top:0px;--padding-bottom:80px;--padding-left:40px;--padding-right:40px;}.elementor-28027 .elementor-element.elementor-element-d4dd65a{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}@media(max-width:768px){.elementor-28027 .elementor-element.elementor-element-f6d67c9{--padding-top:120px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-28027 .elementor-element.elementor-element-633bed3{--padding-top:0px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for theme-post-content, class: .elementor-element-52c2a9f *//* ═══════════════════════════════════════════════════════════════════════ ACM · Nuovo sito 2026 — STILE CONTENUTI GUTENBERG IMPORTATI Per i post già importati dal vecchio sito nei CPT "Articolo" (News native) e "Industry Project" (slug "progetto"), il cui contenuto resta HTML/ Gutenberg (non va ricostruito). Selettori verificati sul markup REALE di 5 post live del nuovo sito (rooted-in-nature, ricami-laura-industry- project, my-wardrobe-man, windows-of-talents, editoriale-d-la-repubblica). COME USARLO 1. Nel Template Singolo (Theme Builder) condiviso per Articolo + Industry Project, apri il widget "Contenuto" (Post Content). 2. In "Avanzate → CSS ID / Classi CSS aggiuntive" aggiungi la classe: acm-content 3. Incolla questo file nel CSS Personalizzato globale di Elementor (dove hai già tokens.css — questo file lo usa come fonte dei valori, va caricato DOPO tokens.css). Nota: al momento (prima che il Template Singolo esista) queste pagine sono renderizzate dal template generico del tema dentro
, non ancora dal widget Elementor. Il CSS qui sotto resta valido comunque: si attiva quando "acm-content" arriva sul wrapper giusto, cioè quando il Template Singolo sarà collegato. Ultimo aggiornamento: 2026-09-17 (dopo verifica su markup reale) ═══════════════════════════════════════════════════════════════════════ */ .acm-content { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter-mobile); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--g1); } @media (min-width: 769px) { .acm-content { padding-inline: 0; } } /* ── TITOLO (Campo Testo → Titolo, importato come

) NB: la stessa classe viene usata anche per titoli di sezione scritti a mano nel corpo (es. "INDUSTRY BRIEF"): nel markup sono indistinguibili dal titolo "ufficiale", quindi prendono tutti lo stesso stile. ─────── */ .acm-content h2.acm-blocco-testo { font-weight: var(--fw-light); font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -1px; line-height: 1.15; color: var(--black); margin: 48px 0 16px; } .acm-content h2.acm-blocco-testo:first-child { margin-top: 0; } /* ── LABEL (Campo Testo → Label,

) Compare tipicamente subito PRIMA del titolo: eyebrow in font condensato. */ .acm-content p.acm-blocco-testo__label { font-family: var(--font-c); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--g3); margin: 0 0 10px; } .acm-content p.acm-blocco-testo__label:first-child { margin-top: 0; } /* se il label è subito seguito dal titolo, li avvicina come un unico blocco */ .acm-content p.acm-blocco-testo__label + h2.acm-blocco-testo { margin-top: 4px; } /* ── CORPO (Campo Testo → Testo,

) Contiene

annidati in

senza classe (retaggio dell'editor ACF originale): i selettori discendenti funzionano a qualunque profondità. */ .acm-content .acm-blocco-testo__corpo p { margin: 0 0 20px; } .acm-content .acm-blocco-testo__corpo p:last-child { margin-bottom: 0; } .acm-content a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--g4); transition: text-decoration-color var(--dur-fast) ease; } .acm-content a:hover { text-decoration-color: var(--black); } .acm-content strong { font-weight: var(--fw-medium); } .acm-content em { font-style: italic; } .acm-content ul, .acm-content ol { margin: 0 0 20px; padding-left: 20px; } .acm-content li { margin-bottom: 8px; } .acm-content li::marker { color: var(--g3); } /* ── IMMAGINE SINGOLA (
) Stessa regola copre anche ogni immagine dentro la griglia (vedi sotto): entrambe usano "wp-block-image" sul
. ─────────────────────── */ .acm-content .wp-block-image { margin: 40px 0; } .acm-content .wp-block-image img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); } .acm-content .wp-block-image figcaption { margin-top: 10px; font-family: var(--font-c); font-size: var(--fs-xs); color: var(--g3); text-align: center; } /* ── GRIGLIA IMMAGINI (
) Usa il lightbox NATIVO di Gutenberg (core/gallery + core/image), non GLightbox: non toccare data-wp-* / .lightbox-trigger, si tocca solo il layout. Le immagini interne ereditano già lo stile .wp-block-image sopra (radius incluso). ───────────────────────────────────────────── */ .acm-content .acm-blocco-gallery { margin: 40px 0 !important; gap: 12px !important; } .acm-content .acm-blocco-gallery .wp-block-image { margin: 0; /* dentro la griglia niente margine verticale per-immagine */ } /* icona di zoom nativa: solo colore/contrasto, forma invariata */ .acm-content .acm-blocco-gallery .lightbox-trigger { background: rgba(29, 29, 31, 0.72); border-radius: 50%; } /* ── PULSANTE / DOWNLOAD (Campo Pulsante — blocco bottone nativo,
) ─────────────────── */ .acm-content .wp-block-buttons { margin: 32px 0; } .acm-content .wp-block-button__link { display: inline-flex; align-items: center; gap: 9px; padding: 14px 24px; border-radius: var(--r-pill); background: var(--black) !important; color: var(--white) !important; font-family: var(--font); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.3px; text-decoration: none !important; transition: background var(--dur-fast) ease, transform var(--dur-fast) ease; } .acm-content .wp-block-button__link:hover { background: rgba(29, 29, 31, 0.86) !important; transform: translateY(-1px); } /* ── VIDEO (HTML personalizzato + GLightbox) Struttura reale:
Il bottone play è già un elemento dedicato (.acm-blocco-video__play): lo si stila direttamente, nessun trucco con ::before/::after sul link. */ .acm-content .acm-blocco-video { margin: 40px 0; } .acm-content .acm-blocco-video__link { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; } .acm-content .acm-blocco-video__cover { display: block; width: 100%; height: auto; transition: transform var(--dur-med) ease; } .acm-content .acm-blocco-video__link:hover .acm-blocco-video__cover { transform: scale(1.03); } .acm-content .acm-blocco-video__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: var(--sh-fab); transition: transform var(--dur-fast) ease, background var(--dur-fast) ease; } /* triangolo play disegnato in CSS dentro lo span vuoto */ .acm-content .acm-blocco-video__play::before { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; transform: translateX(4px); border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--black); } .acm-content .acm-blocco-video__link:hover .acm-blocco-video__play { background: var(--white); transform: scale(1.08); } /* ── GRID4 / CAROSELLO SWIPER (HTML personalizzato) Struttura reale grid4:
…
Stessa struttura per il carosello a immagine singola con più immagini, classe "acm-blocco-carosello-singolo-swiper" (non ancora presente nei 5 post di test, ma documentata nello script di init). ─────────────── */ .acm-content .acm-blocco-griglia, .acm-content .acm-blocco-carosello-singolo-swiper { margin: 40px 0; } .acm-content .acm-blocco-griglia .swiper-slide img, .acm-content .acm-blocco-carosello-singolo-swiper .swiper-slide img { display: block; width: 100%; height: auto; border-radius: var(--r-md); } .acm-content .acm-blocco-griglia .swiper-button-prev, .acm-content .acm-blocco-griglia .swiper-button-next, .acm-content .acm-blocco-carosello-singolo-swiper .swiper-button-prev, .acm-content .acm-blocco-carosello-singolo-swiper .swiper-button-next { width: 40px; height: 40px; background: var(--black); border-radius: 50%; box-shadow: var(--sh-soft); } .acm-content .acm-blocco-griglia .swiper-button-prev::after, .acm-content .acm-blocco-griglia .swiper-button-next::after, .acm-content .acm-blocco-carosello-singolo-swiper .swiper-button-prev::after, .acm-content .acm-blocco-carosello-singolo-swiper .swiper-button-next::after { font-size: 14px; color: var(--white); } .acm-content .acm-blocco-griglia .swiper-button-disabled, .acm-content .acm-blocco-carosello-singolo-swiper .swiper-button-disabled { opacity: 0.35; } /* ═══════════════════════════════════════════════════════════════════════ OPZIONALE — far "sfondare" i blocchi media oltre la colonna di lettura (760px) fino al container standard (1200px). Non richiesto di default: scommentare e assegnare la classe "acm-wide" ai blocchi interessati (immagine, galleria, grid4) solo se in futuro si vuole questo effetto. .acm-content .acm-wide { max-width: var(--container); width: calc(100vw - 2 * var(--gutter-mobile)); margin-left: 50%; transform: translateX(-50%); } @media (min-width: 1024px) { .acm-content .acm-wide { width: min(calc(100vw - 2 * var(--gutter)), var(--container)); } } ═══════════════════════════════════════════════════════════════════════ *//* End custom CSS */