/** * Correzioni di stile al tema Charitorr per il sito ISPAM. * * Stava nel "CSS personalizzato" del kit Elementor. Quel campo dipende dalla * licenza Pro: quando non è attiva Elementor lo scarta e le regole spariscono * dal sito senza preavviso. Qui il CSS viaggia col repository ed è indipendente * dal plugin. */ /* --- Slider Revolution ---------------------------------------------------- */ /* I bottoni dello slider usavano il colore del modulo demo (#F2553D). */ sr7-module sr7-btn.sr7-btn { background-color: var(--global-palette2) !important; } /* --- Header desktop ------------------------------------------------------- */ /* Con le colonne laterali fisse del tema le voci di menu finivano sotto "More". Le colonne laterali sono anche strette per lasciare piu' spazio al menu. */ @media (min-width: 1025px) { .site-main-header-inner-wrap.site-header-row-has-sides { grid-template-columns: minmax(0, 220px) 1fr minmax(0, 220px) !important; } /* Voci piu' distanziate (il tema parte da 0.45em per lato). */ .main-navigation .primary-menu-container > ul > li.menu-item > a { padding-left: 1.1em; padding-right: 1.1em; } /* Con le colonne laterali piu' strette il bottone andava a capo. */ .header-button { white-space: nowrap; } } /* --- Bottoni ------------------------------------------------------------- */ /* Il tema forza capitalize: "Dona ora" diventava "Dona Ora". */ button, .button, .wp-block-button__link, input[type="submit"], .elementor-button-wrapper .elementor-button { text-transform: none; } /* --- Header mobile ------------------------------------------------------- */ /* Il tema fissa 18px con tre classi: serve la stessa forza per scendere. */ .mobile-header-button, .mobile-header-button-wrap .mobile-header-button-inner-wrap .mobile-header-button { white-space: nowrap; /* stesso corpo dello stato agganciato, per non farlo "saltare" allo scroll */ font-size: 0.9375rem !important; } /* La griglia dell'header riservava al logo una colonna fissa da 170px e l'hamburger finiva fuori schermo. La soglia segue quella dello scambio fra header desktop e mobile (1200px), altrimenti sopra i 1024 il bottone e l'hamburger restavano staccati dal bordo destro. */ @media (max-width: 1199px) { #mobile-header .site-main-header-inner-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important; } } @media (max-width: 420px) { .mobile-header-button { padding: 0 1em; } .site-header-main-section-right > .site-header-item { margin-left: 0.25em; } #mobile-header .site-branding img, #mobile-header .site-branding .custom-logo-link img { width: clamp(105px, 36vw, 170px); max-width: 100%; height: auto; } } /* --- Menu mobile ---------------------------------------------------------- */ /* Le voci con sottomenu hanno il link dentro .drawer-nav-drop-wrap, che il tema non colora: restavano arancioni mentre le altre erano bianche. */ .mobile-navigation ul li > a, .mobile-navigation ul li .drawer-nav-drop-wrap > a { color: #fff; } /* Arancione solo la pagina in cui ci si trova: il tema apre gia' da solo il sottomenu che la contiene, quindi la voce attiva e' comunque in vista. */ .mobile-navigation ul li.current-menu-item > a, .mobile-navigation ul li.current_page_item > a, .mobile-navigation ul li.current-menu-item > .drawer-nav-drop-wrap > a { color: var(--e-global-color-accent, #ef6724); } /* --- Passaggio al menu mobile -------------------------------------------- */ /* Il tema passa all'hamburger solo sotto i 1025px, ma con sette voci il menu andava a capo gia' intorno ai 1100. Anticipiamo lo scambio a 1200px. */ @media (max-width: 1199px) { #main-header { display: none !important; } #mobile-header { display: block !important; } } /* --- Header agganciato allo scroll --------------------------------------- */ /* Il tema comprime la riga a 60px ma lascia logo e bottone a dimensione piena: qui li rimpiccioliscono per stare dentro la barra. La classe e' item-is-stuck: item-is-fixed c'e' anche a pagina ferma, e rimpiccioliva pure l'header alto. */ /* Un'ombra appena accennata stacca la barra dal contenuto, su ogni schermo. */ .thebase-sticky-header.item-is-stuck { box-shadow: 0 3px 18px rgba(0, 0, 0, 0.12); } /* Anche l'header mobile agganciato comprime la riga a 60px. */ @media (max-width: 1199px) { #mobile-header .thebase-sticky-header.item-is-stuck .site-branding img { width: 90px !important; height: auto !important; } #mobile-header .thebase-sticky-header.item-is-stuck .mobile-header-button { display: inline-flex; align-items: center; height: 40px; padding: 0 1.4em !important; } } @media (min-width: 1200px) { /* Il logo e' 300x150: a 105px di larghezza sta nei 60px della barra. */ .thebase-sticky-header.item-is-stuck .site-branding img { width: 105px !important; height: auto !important; } /* La righetta della voce attiva scende un po', cosi' sopra resta bianco. */ .thebase-sticky-header.item-is-stuck .main-navigation .menu-item > a::before { top: 8px !important; } .thebase-sticky-header.item-is-stuck .header-button { display: inline-flex; align-items: center; height: 44px; padding: 0 28px !important; font-size: 15px !important; /* la transizione del tema si blocca a meta' sul corpo del testo */ transition-property: background-color, color, border-color; } } /* --- Home ---------------------------------------------------------------- */ /* Anteprime dei laboratori: immagini quadrate e ritagliate. */ .elementor-element-587e3f6 .elementor-image-box-img img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; border-radius: 0; } /* Anteprime dei post: tutta la card è cliccabile, senza "Leggi di più". */ .elementor-posts .elementor-post { position: relative; } .elementor-posts .elementor-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* --- Fasce "testo + immagine" -------------------------------------------- */ /* Quando le due colonne si impilano (sotto i 768px) il titolo va centrato; finche' restano affiancate resta allineato a sinistra sopra al testo. */ @media (max-width: 767px) { .elementor-section:has(.elementor-widget-image) .elementor-widget-heading .elementor-heading-title, .e-con:has(.elementor-widget-image) .elementor-widget-heading .elementor-heading-title { text-align: center; } } /* --- Team ---------------------------------------------------------------- */ .profilo-team .elementor-image-box-img { width: 180px !important; flex: 0 0 180px; } .profilo-team .elementor-image-box-img img { border-radius: 8px; } /* Sul telefono la foto e' piu' grande e centrata nella colonna; il testo sotto resta allineato a sinistra. */ @media (max-width: 767px) { .profilo-team .elementor-image-box-img { width: 220px !important; flex: 0 0 auto; display: block; margin: 0 auto 1rem !important; } } /* --- Immagini segnaposto ------------------------------------------------- */ .placeholder-alto, .placeholder-alto .elementor-widget-container, .placeholder-alto figure, .placeholder-alto .elementor-image { height: 100%; } .placeholder-alto img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 10px; } /* --- Footer: form newsletter --------------------------------------------- */ footer .elementor-form .elementor-field-label { display: none !important; } footer .elementor-form .elementor-field-textual { border-radius: 50px; padding: 14px 24px; height: auto; line-height: 1.5; } footer .elementor-form .elementor-button { border-radius: 50px; font-size: 18px; font-weight: 500; padding: 18px 34px !important; width: auto !important; flex: 0 0 auto !important; align-self: flex-start; } footer .elementor-form .elementor-field-type-submit { display: flex; justify-content: flex-start; } /* --- Gallerie dei post --------------------------------------------------- */ /* L'incastro verticale lo fa ispam-masonry.js, che posiziona le foto una a una: il CSS da solo non ne e' capace, perche' column-count bilancia le colonne e, con foto alte, ne lascia una vuota ammassando le altre. Quello che segue sono righe regolari da tre, il ripiego per quando lo script non parte. */ .galleria-masonry .gallery { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 0; } .galleria-masonry .gallery .gallery-item { flex: 0 1 calc(33.333% - 8px); width: auto !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Il contenitore della singola foto e' una flex-box: finche' l'immagine non e' arrivata il browser le da' larghezza zero, e con larghezza zero non entra mai nello schermo, quindi non viene mai caricata. Da blocco, invece, lo spazio e' riservato subito in base alle misure scritte nel tag. */ .galleria-masonry .gallery .gallery-icon { display: block; } .galleria-masonry .gallery img { width: 100%; height: auto; display: block; border: 0 !important; border-radius: 8px; } /* Una foto da sola in un terzo di pagina sarebbe sperduta. */ .galleria-masonry .gallery:not(:has(.gallery-item:nth-child(2))) .gallery-item { flex-basis: calc(50% - 6px); } @media (max-width: 1024px) { .galleria-masonry .gallery .gallery-item { flex-basis: calc(50% - 6px); } } @media (max-width: 600px) { .galleria-masonry .gallery .gallery-item, .galleria-masonry .gallery:not(:has(.gallery-item:nth-child(2))) .gallery-item { flex-basis: 100%; } } /* Da qui in giu' comanda lo script: le foto diventano tasselli che lui colloca, e la galleria prende l'altezza che lui le assegna. */ .galleria-masonry .gallery.galleria-pronta { display: block; position: relative; } .galleria-masonry .gallery.galleria-pronta .gallery-item { position: absolute; top: 0; left: 0; flex: none; /* La larghezza del tassello arriva dallo script: deve essere !important per avere la meglio sul width: auto qui sopra, che a sua volta serve a scavalcare le misure in percentuale scritte da WordPress. */ width: var( --larghezza-tassello, auto ) !important; } /* --- Accordion ----------------------------------------------------------- */ /* Il tema non dà dimensioni agli SVG delle icone Elementor. */ .elementor-accordion .elementor-accordion-icon svg, .elementor-toggle .elementor-toggle-icon svg, .elementor-widget .e-font-icon-svg { width: 1em !important; height: 1em !important; display: inline-block; vertical-align: -0.125em; } /* --- Pagina Disagio mentale: i pregiudizi -------------------------------- */ .accordion-pregiudizi .elementor-tab-title { display: flex; align-items: center; gap: 0.5em; padding-left: 0; /* peso normale: il grassetto resta alle parole marcate nel titolo */ font-weight: 400; } .accordion-pregiudizi .elementor-tab-title b, .accordion-pregiudizi .elementor-tab-title strong { font-weight: 700; } .accordion-pregiudizi .elementor-tab-title::before { content: ""; flex: 0 0 64px; width: 64px; height: 64px; background-size: cover; background-position: center; border-radius: 50%; } /* Il "+" va in fondo alla riga, la domanda occupa lo spazio che resta. */ .accordion-pregiudizi .elementor-accordion-title { flex: 1 1 auto; } .accordion-pregiudizi .elementor-accordion-icon { order: 2; margin-left: auto; flex: 0 0 34px; width: 34px; height: 34px; align-self: center; font-size: 16px; /* segue la palette: Elementor > Impostazioni sito > Colori globali */ background: var(--e-global-color-accent, #ef6724); color: #fff; border-radius: 50%; display: flex !important; align-items: center !important; justify-content: center !important; float: none !important; text-align: center; line-height: 0; } .accordion-pregiudizi .elementor-accordion-icon svg { width: 15px !important; height: 15px !important; display: block; margin: 0 auto; fill: #fff !important; } .accordion-pregiudizi .elementor-tab-content { padding-left: calc(64px + 0.5em); } @media (max-width: 767px) { .accordion-pregiudizi .elementor-tab-title::before { flex: 0 0 40px; width: 40px; height: 40px; } .accordion-pregiudizi .elementor-accordion-icon { flex: 0 0 30px; width: 30px; height: 30px; } .accordion-pregiudizi .elementor-tab-content { padding-left: 1em; } } .accordion-pregiudizi .elementor-accordion-item:nth-of-type(1) .elementor-tab-title::before { background-image: url(/wp-content/uploads/2026/09/avatar-01.png); } .accordion-pregiudizi .elementor-accordion-item:nth-of-type(2) .elementor-tab-title::before { background-image: url(/wp-content/uploads/2026/09/avatar-02.png); } .accordion-pregiudizi .elementor-accordion-item:nth-of-type(3) .elementor-tab-title::before { background-image: url(/wp-content/uploads/2026/09/avatar-03.png); } .accordion-pregiudizi .elementor-accordion-item:nth-of-type(4) .elementor-tab-title::before { background-image: url(/wp-content/uploads/2026/09/avatar-04.png); } .accordion-pregiudizi .elementor-accordion-item:nth-of-type(5) .elementor-tab-title::before { background-image: url(/wp-content/uploads/2026/09/avatar-05.png); } .accordion-pregiudizi .elementor-accordion-item:nth-of-type(6) .elementor-tab-title::before { background-image: url(/wp-content/uploads/2026/09/avatar-06.png); } .accordion-pregiudizi .elementor-accordion-item:nth-of-type(7) .elementor-tab-title::before { background-image: url(/wp-content/uploads/2026/09/avatar-07.png); } .accordion-pregiudizi .elementor-accordion-item:nth-of-type(8) .elementor-tab-title::before { background-image: url(/wp-content/uploads/2026/09/avatar-08.png); } .accordion-pregiudizi .elementor-accordion-item:nth-of-type(9) .elementor-tab-title::before { background-image: url(/wp-content/uploads/2026/09/avatar-09.png); } /* --- Tipografia su mobile ------------------------------------------------ */ /* Sotto i 768px i titoli e i testi correnti scendono rispetto al desktop (i sopratitoli da 15px restano invariati, sarebbero troppo piccoli). */ @media (max-width: 767px) { /* Titoli di fascia */ .elementor-widget-heading h2.elementor-heading-title { font-size: 32px !important; line-height: 1.25; } /* Titolo grande della home, gia' ridotto a 38px per il mobile */ .elementor-element-a9928b6 h2.elementor-heading-title { font-size: 30px !important; } /* Domande degli accordion e titoli dei riquadri con icona */ .elementor-widget-accordion .elementor-tab-title, h3.elementor-icon-box-title { font-size: 26px !important; } h5.elementor-icon-box-title { font-size: 21px !important; } h5.elementor-image-box-title { font-size: 18px !important; } /* Titoli delle anteprime degli articoli */ h3.elementor-post__title, h3.elementor-post__title a { font-size: 20px !important; } /* Testi correnti */ .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li, .elementor-widget-accordion .elementor-tab-content, .elementor-widget-accordion .elementor-tab-content p, .elementor-widget-shortcode p, .elementor-icon-box-description, .elementor-icon-list-item, .elementor-post__excerpt p { font-size: 16px !important; } .elementor-image-box-description { font-size: 14px !important; } } /* Domande dei pregiudizi su mobile: corpo ridotto e margini stretti, cosi' quasi tutte stanno su due righe accanto all'avatar. La transizione del tema comprende il font-size e lo lascia a meta' strada: va limitata ai colori. */ @media (max-width: 767px) { .accordion-pregiudizi .elementor-tab-title { padding-left: 8px !important; padding-right: 8px !important; font-size: 14px !important; transition-property: background-color, color, border-color; } .accordion-pregiudizi .elementor-accordion-title { font-size: clamp(13px, 3.6vw, 16px) !important; line-height: 1.35 !important; transition-property: background-color, color, border-color; } .accordion-pregiudizi .elementor-tab-content, .accordion-pregiudizi .elementor-tab-content p, .accordion-pregiudizi .elementor-tab-content li { font-size: 14px !important; line-height: 1.5 !important; } } /* --- Pagina dei risultati di ricerca ------------------------------------- */ /* Il tema mette l'iniziale maiuscola a ogni parola: in italiano "Dopo di noi" diventava "Dopo Di Noi" e il titolo della ricerca "Risultati Della Ricerca Per:". */ .entry-title, .entry-title a, .page-title { text-transform: none !important; } /* --- Pagine di servizio (privacy e cookie policy) ------------------------ */ /* Testi lunghi scritti a mano, non costruiti con Elementor: qui i titoli restano come sono scritti e il testo prende un po' d'aria. */ .page-id-3 .entry-content :is(h2, h3), .page-id-2706 .entry-content :is(h2, h3) { text-transform: none !important; } .page-id-3 .entry-content :is(h2, h3), .page-id-2706 .entry-content :is(h2, h3) { margin-top: 2em; } .page-id-3 .entry-content blockquote { margin: 1.8em 0; padding: 18px 24px; border-left: 3px solid var(--global-palette2, #ef6724); background: var(--global-palette7, #f2f0ec); } /* --- Footer -------------------------------------------------------------- */ /* Il footer era alto quasi mezzo schermo: qui si stringono i vuoti interni dei blocchi (le spaziature delle fasce stanno nel Personalizza). */ #colophon p { margin: 4px 0; line-height: 1.6; } #colophon .widget-title, #colophon .wp-block-heading { margin-bottom: 10px; } #colophon .widget ul { margin: 0; } #colophon .widget li { margin-bottom: 2px; padding: 0 !important; } #colophon .widget li a { display: inline-block; padding-top: 0; padding-bottom: 0; line-height: 1.6; } #colophon .wp-block-group { gap: 4px; } #colophon .wp-block-group, #colophon .wp-block-columns, #colophon .wp-block-column { margin-top: 0; margin-bottom: 0; } /* L'icona di ogni riga sta accanto alla prima riga di testo, non a meta' del paragrafo: 3px la centrano sull'altezza della riga (16/25,6px). */ #colophon .widget_block p > img { align-self: flex-start; margin-top: 3px; } /* La riga con privacy e cookie policy chiude la colonna dei social: piccola, su una riga sola, senza rubare attenzione al resto. */ /* il selettore porta l'id perche' #colophon p fissa un margine di 4px */ #colophon .footer-legali { margin: 26px 0 0; font-size: 13px; line-height: 1.5; white-space: nowrap; } #colophon .footer-legali span { opacity: 0.5; } /* "Dove siamo" sta a destra della fascia, ma al suo interno titolo e righe con le icone partono dallo stesso bordo sinistro. */ @media (min-width: 768px) { #colophon .footer-widget1 .footer-widget-area-inner { display: inline-block; text-align: left; } } /* --- Chi siamo: elenco dei documenti ------------------------------------- */ /* Su mobile icona, titolo e descrizione stanno al centro della colonna. */ @media (max-width: 767px) { .elementor-element-747474f .elementor-icon-box-wrapper { justify-content: center; text-align: center; } .elementor-element-747474f .elementor-icon-box-icon { margin-left: auto; margin-right: auto; text-align: center; } .elementor-element-747474f .elementor-icon-box-title, .elementor-element-747474f .elementor-icon-box-description { text-align: center; } /* senza questo le regole generali del mobile li farebbero piu' grandi che da desktop */ .elementor-element-747474f h5.elementor-icon-box-title { font-size: 17px !important; } .elementor-element-747474f .elementor-icon-box-description { font-size: 14px !important; } } /* --- Home: le tre chiamate all'azione sotto allo slider ------------------- */ /* Sono link, non bottoni: sottolineatura e freccia perche' si capisca che si clicca. La freccia sta fuori dal testo, cosi' non viene sottolineata. */ .elementor-element-ac2ac98 .elementor-button .elementor-button-text { text-decoration: underline; text-underline-offset: 4px; } .elementor-element-ac2ac98 .elementor-button .elementor-button-content-wrapper::after { content: "\203A"; margin-left: 0.45em; font-size: 1.25em; line-height: 1; } /* --- Home: banner "Diventa volontario" ----------------------------------- */ /* Colonna e widget restano statici: cosi' il link di copertura si appoggia alla sezione e la copre tutta. */ .elementor-element-fef88af { position: relative; } .elementor-element-fef88af .elementor-container, .elementor-element-fef88af .elementor-column, .elementor-element-fef88af .elementor-widget-wrap, .elementor-element-fef88af .elementor-widget-html { position: static !important; } /* Il velo scuro resta sopra alla foto; titolo e bottone gli passano davanti con il loro z-index. Un filo piu' trasparente di quanto lo faccia il tema. */ .elementor-element-fef88af > .elementor-background-overlay { /* il valore del pannello di Elementor ha la meglio senza !important */ opacity: 0.35 !important; } /* Il link che copre tutta la fascia: gli antenati sono statici, quindi si appoggia alla sezione. */ .banner-copertura { position: absolute; inset: 0; z-index: 2; } .banner-scrivi-riga { position: relative; z-index: 3; } /* Sopra la foto nessun colore di testo si leggeva: la riga diventa un bottone arancione, come "Dona ora". */ .banner-scrivi, .banner-scrivi:hover, .banner-scrivi:focus { display: inline-block; color: #fff !important; text-decoration: none !important; font-size: 20px; font-weight: 500; line-height: 1.4; padding: 14px 34px; border-radius: 50px; background: var(--e-global-color-accent, #ef6724); } /* Titolo e bottone scendono, altrimenti coprono il viso della foto. */ .elementor-element-fef88af .elementor-widget-wrap { padding-top: 90px; } @media (max-width: 767px) { .banner-scrivi { font-size: 17px; padding: 12px 26px; } .elementor-element-fef88af .elementor-widget-wrap { padding-top: 70px; } } /* --- Mobile: aria ai lati del contenuto ---------------------------------- */ /* Le pagine fatte con Elementor arrivavano quasi a filo schermo. Ogni fascia rientra di 30px per lato: e' la misura della sezione "La riabilitazione e' parte della cura", presa come riferimento. Lo slider resta a tutta larghezza. Solo le pagine a tutta larghezza: altrove il rientro lo mette gia' il contenitore del tema. */ @media (max-width: 767px) { .content-width-fullwidth .entry-content .elementor-top-section:not(:has(.elementor-widget-slider_revolution)) > .elementor-container, .content-width-fullwidth .entry-content > .elementor > .e-con { padding-left: 30px !important; padding-right: 30px !important; } .content-width-fullwidth .entry-content .elementor-top-section { padding-left: 0 !important; padding-right: 0 !important; } /* Le colonne non aggiungono un rientro proprio, altrimenti si somma. */ .content-width-fullwidth .entry-content .elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-left: 0 !important; padding-right: 0 !important; } /* Fanno eccezione i riquadri bordati di "Cosa facciamo": li' il rientro e' il respiro fra il bordo del riquadro e il testo. */ .content-width-fullwidth .entry-content .elementor-element-0467123 > .elementor-container > .elementor-column > .elementor-widget-wrap, .content-width-fullwidth .entry-content .elementor-element-8cea3f8 > .elementor-container > .elementor-column > .elementor-widget-wrap, .content-width-fullwidth .entry-content .elementor-element-1c83fb7 > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-left: 22px !important; padding-right: 22px !important; } /* Il titolo della pagina segue la stessa misura. */ .entry-hero .hero-container { padding-left: 30px; padding-right: 30px; } } /* --- Mobile: stacco fra il titolo della pagina e il primo blocco --------- */ /* Era 80px (90 nel blog, 120 in Contatti): su schermo piccolo e' mezza schermata di bianco, ora sono 30. La home non ha titolo, la sua prima fascia e' lo slider e non va toccata. */ @media (max-width: 767px) { body:not(.home) .entry-content .elementor > .elementor-top-section:first-child { padding-top: 30px !important; } /* In Contatti sotto al titolo c'e' la mappa: nessuno stacco. */ body .entry-content .elementor > .elementor-element-a09654e.elementor-top-section:first-child { padding-top: 0 !important; } } /* --- Mobile: Cosa facciamo ----------------------------------------------- */ /* Impilati uno sull'altro i riquadri bordati si toccavano. */ @media (max-width: 767px) { .elementor-element-0467123 > .elementor-container > .elementor-column, .elementor-element-8cea3f8 > .elementor-container > .elementor-column, .elementor-element-1c83fb7 > .elementor-container > .elementor-column { margin-bottom: 16px; } } /* --- Mobile: Contatti ---------------------------------------------------- */ @media (max-width: 767px) { /* La mappa arriva ai bordi dello schermo. */ .content-width-fullwidth .entry-content .elementor-top-section.elementor-element-a09654e > .elementor-container { padding-left: 0 !important; padding-right: 0 !important; } /* Le icone di telefono ed e-mail erano attaccate al testo che le precede. */ .elementor-element-683563c, .elementor-element-3c2f8ab { margin-top: 60px; } /* L'immagine dopo il form allunga la pagina senza aggiungere nulla. */ .elementor-element-5201b7c { display: none; } } /* --- Mobile: home -------------------------------------------------------- */ /* Qui il contenuto sta nel contenitore del tema, gia' rientrato di 24px: bastano 6px per arrivare ai 30 delle altre pagine. Le fasce "stese" restano a tutto schermo, compresi i tre riquadri sotto allo slider. */ @media (max-width: 767px) { .home .entry-content .elementor-top-section:not(.elementor-section-stretched):not(:has(.elementor-widget-slider_revolution)) > .elementor-container { padding-left: 6px !important; padding-right: 6px !important; } /* L'immagine dopo il form allunga la pagina senza aggiungere nulla. */ .elementor-element-8ce06ef { display: none; } } /* --- Articoli ------------------------------------------------------------ */ /* Nelle anteprime in fondo all'articolo la data non serve. */ .entry-related .entry-meta { display: none; } /* Sul telefono il riquadro bianco si mangiava meta' della foto di apertura. */ @media (max-width: 767px) { .post-thumbnail.thebase-thumbnail-position-behind { margin-bottom: -30px !important; } } /* --- Mobile: pagine a testo centrato ------------------------------------- */ /* Chi siamo, La storia, Disagio mentale, Dopo di noi e Cosa facciamo: sul telefono i paragrafi vanno al centro come i titoli. Restano a sinistra gli elenchi e l'accordion dei pregiudizi, dove le domande stanno accanto all'avatar. */ @media (max-width: 767px) { :is(.page-id-2396, .page-id-2442, .page-id-2443, .page-id-2444, .page-id-1983) .elementor-widget-text-editor { text-align: center; } /* gli elenchi no: puntati e numerati restano a sinistra */ :is(.page-id-2396, .page-id-2442, .page-id-2443, .page-id-2444, .page-id-1983) .elementor-widget-text-editor :is(ul, ol) { text-align: left; } } /* --- Mobile: la foto fra il titolo e il testo ---------------------------- */ /* Impilate, le fasce "testo + immagine" mostravano titolo, paragrafi e solo in fondo la foto. La colonna del testo sparisce come scatola (display: contents) e i suoi blocchi si mettono in fila con l'immagine. */ @media (max-width: 767px) { :is(.page-id-2396, .page-id-2442, .page-id-2443, .page-id-2444, .page-id-1983) .elementor-top-section:has(.elementor-widget-image) > .elementor-container { flex-direction: column; } :is(.page-id-2396, .page-id-2442, .page-id-2443, .page-id-2444, .page-id-1983) .elementor-top-section:has(.elementor-widget-image) > .elementor-container > .elementor-column:has(.elementor-widget-heading), :is(.page-id-2396, .page-id-2442, .page-id-2443, .page-id-2444, .page-id-1983) .elementor-top-section:has(.elementor-widget-image) > .elementor-container > .elementor-column:has(.elementor-widget-heading) > .elementor-widget-wrap { display: contents !important; } :is(.page-id-2396, .page-id-2442, .page-id-2443, .page-id-2444, .page-id-1983) .elementor-top-section:has(.elementor-widget-image) .elementor-widget-heading { order: 1; } :is(.page-id-2396, .page-id-2442, .page-id-2443, .page-id-2444, .page-id-1983) .elementor-top-section:has(.elementor-widget-image) > .elementor-container > .elementor-column:has(.elementor-widget-image), :is(.page-id-2396, .page-id-2442, .page-id-2443, .page-id-2444, .page-id-1983) .elementor-top-section:has(.elementor-widget-image) .elementor-widget-image { order: 2; /* un filo d'aria fra la foto e il paragrafo che la segue */ margin-bottom: 18px; } :is(.page-id-2396, .page-id-2442, .page-id-2443, .page-id-2444, .page-id-1983) .elementor-top-section:has(.elementor-widget-image) :is(.elementor-widget-text-editor, .elementor-widget-icon-list, .elementor-widget-button) { order: 3; } } /* --- Mobile: Team -------------------------------------------------------- */ /* Le testimonianze erano piu' piccole del resto dei testi correnti. */ @media (max-width: 767px) { .profilo-team .elementor-image-box-description { font-size: 16px !important; } } /* --- Pagina Dona ora ----------------------------------------------------- */ /* Il riquadro azzurro con la scelta dell'importo resta nascosto finche' non arriva l'identificativo del bottone PayPal: per rimetterlo online basta togliere questa regola, la sezione e' sempre nel documento Elementor. */ .page-id-2667 .entry-content .elementor-top-section.elementor-element-d37f8b5 { display: none; } /* Il riquadro della donazione: a sinistra la scelta dell'importo, a destra il bottone di PayPal. Tiene i colori di PayPal (blu #003087 e #0070ba), come nel layout: si capisce a colpo d'occhio che li' si paga. */ .dona-box { display: flex; flex-wrap: wrap; gap: 36px; /* le due meta' hanno la stessa altezza: cosi' la righetta le divide da cima a fondo */ align-items: stretch; padding: 36px 40px; border-radius: 16px; background: #eef5fc; } .dona-box__scelta { flex: 1 1 320px; } .dona-box__paypal { flex: 0 1 300px; display: flex; flex-direction: column; justify-content: center; text-align: center; padding-left: 36px; border-left: 1px solid #c3daf1; } .dona-box__sopratitolo { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #0070ba; } .dona-box__titolo { margin: 0 0 22px; /* il tema decide corpo e colore di tutti gli h3 del contenuto */ font-size: 30px !important; color: #003087 !important; } .dona-importi, .dona-frequenze { display: flex; flex-wrap: wrap; gap: 10px; } .dona-frequenze { margin-top: 12px; } /* Il tema colora di arancione qualsiasi