/** * TextImage — aspetto. COPIA NOSTRA, indipendente da Elementor. * * Il componente più diffuso del sito: 258 usi su 70 pagine. * * PROVENIENZA, DUE SORGENTI: * 1. elewidget/assets/css/textimage.css — 397 righe, il grosso * 2. hello-theme-child-master/style.css — sezione "ANCHOR: TEXT-IMAGE" e dintorni * Copiate una volta, non collegate: elewidget è congelato (07-piano-widget.md). * * LO SCOPE. Tutto prefissato `.se-gjs-page`, che esiste sia sul frontend (il div del * filtro the_content) sia nel canvas (classe sull' dell'iframe). Sulle pagine del * builder queste regole vincono per specificità; sulle pagine Elementor non arrivano. * * ⚠ IL CONTESTO DEL TEMA È STATO TOLTO, e non è un dettaglio. Diverse regole del tema * erano scritte `.page-content .textImage h2` o `.wp-singular .page-content …`. Prefissarle * meccanicamente avrebbe dato `.se-gjs-page .page-content .textImage`, che NON FA MAI MATCH: * su una pagina del builder `.se-gjs-page` sta DENTRO `.page-content`, non fuori. Sarebbe * stato un TextImage diverso fra editor e sito, senza nessun errore a segnalarlo. * Il prefisso `.page-content` è quindi rimosso e sostituito da `.se-gjs-page`: stesso * effetto, ancestor giusto. * * ⚠ COSA È STATO LASCIATO FUORI. Le regole `.home_section_2 .textImage …`: sono * aggiustamenti per una sezione specifica della homepage, non aspetto del componente. * Chi ricostruirà quella sezione col builder le rifarà come stile del suo contenuto. */ /* ⚠ `.textImageWrapper` NON esiste più: la radice del componente è il `.textImage`. Il wrapper faceva due cose. Centrare — e quel lavoro è passato qui sotto, a `margin-inline`. Dare 4rem di padding sopra e sotto — e quello NON è stato riportato: era spazio verticale che nel builder nessuno ha chiesto, e chi lo vuole lo mette dallo Style Manager sul blocco, dove si vede e si toglie. */ .se-gjs-page .textImage { display: flex; /* `gap` era 5rem, ed è il valore che veniva da elewidget. Qui parte da ZERO: lo spazio fra le due colonne è una scelta di impaginazione del singolo blocco, non una costante del componente, e con un valore di partenza si toglie soltanto — da zero si aggiunge quello che serve, dal settore "Flex e allineamenti". */ gap: 0; /* Dichiarato QUI e non solo trecento righe più giù, dove il blocco copiato dal tema figlio diceva già la stessa cosa: il comportamento di partenza del contenitore si legge dove il contenitore è definito, non in fondo al foglio. Stesso valore, quindi niente cambia — cambia dove lo si trova. */ align-items: center; flex-wrap: wrap; width: 100%; /* ⚠ IL CENTRAGGIO NON STA QUI, e non è una svista: sta in fondo al foglio. Due regole copiate dal tema figlio (`margin: 2rem 0` e, più sotto, `margin: 0`) usano la scorciatoia `margin`, che azzera anche i margini orizzontali. Scritto qui veniva cancellato da loro, e il blocco finiva appoggiato a sinistra — sul sito e nel canvas. Vedi «Il blocco resta centrato», ultima sezione. */ } .se-gjs-page .textImage.image-text { flex-direction: row-reverse; justify-content: space-between; gap: 2rem !important; } .se-gjs-page .textImage .left-area { flex: 1; max-width: 660px; width: 100%; /* Contenitore flex come tutti gli altri del blocco. `column` NON è un di più: i figli qui sono titolo, sottotitolo, testo e bottone, che stanno uno sotto l'altro — con la direzione predefinita (`row`) si affiancherebbero, e la colonna del testo diventerebbe una riga. `align-items` resta su `stretch`, il valore di serie: i figli continuano a prendere tutta la larghezza, come facevano da blocco. ⚠ Da flex i margini verticali fra fratelli NON si fondono più: h3 e h4 che prima collassavano nel maggiore ora sommano. Se la spaziatura risulta più larga di prima, si regola con `gap` qui, non togliendo i margini agli elementi. */ display: flex; flex-direction: column; gap: 0; } .se-gjs-page .textImage .left-area p { font-size: 18px; font-weight: 400; line-height: 1.5; } .se-gjs-page .textImage .left-area h3 { font-size: 40px; font-weight: 500; } .se-gjs-page .textImage .right-area { flex: 0 1 644px; text-align: center; position: relative; overflow: hidden; height: 489px; /* La colonna del media è un contenitore flex centrato, e non è un dettaglio di impaginazione: l'area ha un'ALTEZZA FISSA (i 489px qui sopra) mentre l'immagine che ci finisce dentro no. Senza questo, un'immagine più bassa si appoggiava in alto e lasciava il vuoto sotto. `text-align: center` centrava solo in orizzontale, e solo perché l' è inline. Si imposta qui e non sul componente, così vale per OGNI TextImage; chi ne vuole uno diverso lo cambia dal settore "Flex e allineamenti". */ display: flex; justify-content: center; align-items: center; } .se-gjs-page .textImage .right-area .video-cover-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 100; } /* SWITCHED AREA 1 */ .se-gjs-page .textImage.image-text .right-area .video_cover_c2a { position: absolute; z-index: 100; right: 40px; top: 50%; transform: translateY(-50%); cursor: pointer; } .se-gjs-page .textImage.image-text .right-area .video_cover_c2a .circle { width: 100px; height: 100px; border-radius: 50%; background-color: #2c4f9e59; right: -150px; position: relative; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .se-gjs-page .textImage.image-text .right-area.has-cover video { filter: grayscale(1) blur(2px); } .se-gjs-page .textImage.image-text:hover .right-area .video_cover_c2a .circle { z-index: 100; right: 0px; animation: circle-click 7s ease-in-out 1s infinite; } .se-gjs-page .textImage.image-text:hover .right-area .video_cover_c2a .circle .innerCircle { right: -5px; opacity: 1; } .se-gjs-page .textImage.image-text .right-area .video_cover_c2a .circle .innerCircle { width: 110px; height: 110px; background: #2c4f9e59; border: 5px solid #4366945e; opacity: 0; position: absolute; border-radius: 50%; z-index: -1; right: -80px; transition: all .5s ease; } /* SWITCHED AREA 2 */ .se-gjs-page .textImage:not(.image-text) .right-area .video_cover_c2a { position: absolute; z-index: 100; left: 40px; top: 50%; transform: translateY(-50%); cursor: pointer; } .se-gjs-page .textImage:not(.image-text) .right-area .video_cover_c2a .circle { width: 100px; height: 100px; border-radius: 50%; background-color: #2c4f9e59; left: -150px; position: relative; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .se-gjs-page .textImage:not(.image-text) .right-area.has-cover video { filter: grayscale(1) blur(2px); } .se-gjs-page .textImage:not(.image-text):hover .right-area .video_cover_c2a .circle { z-index: 100; left: 0px; animation: circle-click 7s ease-in-out 1s infinite; } .se-gjs-page .textImage:not(.image-text):hover .right-area .video_cover_c2a .circle .innerCircle { left: -5px; opacity: 1; } .se-gjs-page .textImage:not(.image-text) .right-area .video_cover_c2a .circle .innerCircle { width: 110px; height: 110px; background: #2c4f9e59; border: 5px solid #4366945e; opacity: 0; position: absolute; border-radius: 50%; z-index: -1; left: -80px; transition: all .5s ease; } @keyframes circle-click { .se-gjs-page 0% { transform: scale(1); } .se-gjs-page 5% { transform: scale(0.88); } .se-gjs-page 10% { transform: scale(1.05); } .se-gjs-page 15% { transform: scale(1); } .se-gjs-page 100% { transform: scale(1); } } .se-gjs-page .circle span { font-size: 15px; font-weight: 500; letter-spacing: -.5px; color: white; } .se-gjs-page .textImage .right-area .video_cover_c2a .circle .cursor-icon { position: absolute; opacity: 0; right: 10%; top: 50%; transition: all 0.3s .6s ease; display: none; } .se-gjs-page .textImage:hover .right-area .video_cover_c2a .circle .cursor-icon { right: 30%; opacity: 1; animation: mouse-click 7s ease-in-out 1s infinite; } @keyframes mouse-click { .se-gjs-page 0% { transform: translateY(0) scale(1); } .se-gjs-page 5% { transform: translateY(4px) scale(0.85); } .se-gjs-page 10% { transform: translateY(0) scale(1); } .se-gjs-page 100% { transform: translateY(0) scale(1); } } .se-gjs-page .textImage .right-area .video-cover-wrapper img { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; object-fit: cover; } .se-gjs-page .loader { position: absolute; top: 0; left: 0; z-index: 2000; animation: fadeOut 1s ease-in-out forwards; width: 100%; height: 100%; background: #86bdf4; border-radius: 20px; } @keyframes fadeOut { .se-gjs-page 0% { opacity: 1; } .se-gjs-page 99% { opacity: 0; } .se-gjs-page 100% { opacity: 0; display: none; } } .se-gjs-page .loader .spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; animation: rotate 1s linear infinite; } .se-gjs-page .loader .spinner .path { stroke: #134B84; stroke-linecap: round; animation: dash 1s ease-in-out infinite; } @keyframes rotate { .se-gjs-page 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes dash { .se-gjs-page 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } .se-gjs-page 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } .se-gjs-page 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } } .se-gjs-page .slide-out-br { animation: slide-out-br 0.5s cubic-bezier(.76, .02, 1, .3) both; } .se-gjs-page .animazione-video { animation: animazione-video 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both; } @keyframes slide-out-br { .se-gjs-page 0% { transform: translateX(0); opacity: 1; } .se-gjs-page 100% { transform: translateX(-1000px); opacity: 0; } } @keyframes animazione-video { .se-gjs-page 0% { filter: grayscale(.5) blur(2px); } .se-gjs-page 100% { filter: grayscale(0) blur(0px); } } @media screen and (max-width: 1400px) { .se-gjs-page .textImage { padding: 20px 2rem; } } @media screen and (max-width:1200px) { /* ⚠ QUI IL BLOCCO INVERTITO NON SI SMONTA, e la differenza col sorgente è voluta. elewidget (assets/css/textimage.css, riga 344) qui manda `.image-text` in colonna, 200px prima del blocco normale, che invece resta affiancato fino a 991. Risultato: due blocchi identici a parte lo specchio cambiavano assetto a due larghezze diverse, e su un tablet se ne vedeva uno impilato e l'altro no. Non è una scelta di impaginazione, è una toppa rimasta nel foglio d'origine: l'unica cosa che il verso cambia è da che parte sta l'immagine, non a quale larghezza il blocco si arrende. Le due varianti si smontano quindi insieme, nella query a 991. */ .se-gjs-page .textImage.image-text { flex-direction: row-reverse; } .se-gjs-page .textImage .left-area { flex: 1; max-width: 100%; width: 100%; margin-bottom: 1rem; } /* ⚠ QUI C'ERA `.image-text .right-area { width: 100%; max-width: 100% }`, ed è stata tolta insieme alla riga qui sopra: serviva SOLO perché in questa fascia il blocco invertito andava in colonna, e in colonna `align-items: center` stringeva la colonna del media sul contenuto finché non collassava a zero. Restando affiancato il problema non si pone, e quella coppia di dichiarazioni faceva un secondo danno — essendo più specifica (0,4,0) della regola a 991, l'immagine del blocco invertito si prendeva tutta la larghezza mentre quella del blocco normale si fermava a 600px. Un'altra asimmetria fra due blocchi che devono comportarsi allo stesso modo. */ .se-gjs-page .textImage .right-area img { max-width: 100%; height: auto; } } @media screen and (max-width: 991px) { /* ⚠ QUI IL BLOCCO SI IMPILA, e questa regola era andata persa nella copia: stava a 767px, un breakpoint che nel sorgente non esiste. Il TextImage del sito passa in colonna a 991 (elewidget/assets/css/textimage.css, riga 375), non a 767 — fra le due misure c'è tutta la fascia dei tablet e dei telefoni in orizzontale, dove il blocco restava affiancato e le due colonne si stringevano invece di incolonnarsi. 991 è anche la larghezza dichiarata dal device «Mobile portrait» dell'editor (`widthMedia`, se-builder-glue.js): quello che si progetta su quel device e quello che fa il sito ora rispondono alla stessa soglia. */ .se-gjs-page .textImage { flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 20px 20px 20px 10px; } /* La variante invertita si impila QUI, insieme all'altra, e nello stesso verso: il testo sopra, l'immagine sotto. Le serve una riga sua perché `.textImage.image-text` (0,3,0) è più specifico di `.textImage` (0,2,0) e il `row-reverse` dichiarato in cima al foglio le vincerebbe contro. `column` e non `column-reverse`: sul telefono il testo va letto prima dell'immagine in tutti e due i blocchi — lo specchio è una scelta di impaginazione orizzontale, e in verticale non c'è niente da specchiare. */ .se-gjs-page .textImage.image-text { flex-direction: column; /* Le altre due dichiarazioni della variante — `justify-content: space-between` e `gap: 2rem !important` — sopravvivevano anche impilate, e la seconda per via dell'`!important` batteva l'1rem del blocco normale: la stessa coppia di elementi, distanziata in due modi a seconda del verso. Qui le due varianti tornano a misurare uguale. L'`!important` è la sola moneta che il `gap` della regola in cima accetta. */ justify-content: center; gap: 1rem !important; } .se-gjs-page .textImage .left-area h3 { font-size: 30px; font-weight: 500; } .se-gjs-page .textImage .right-area { text-align: left; max-width: 600px; width: 100%; flex: 1; /* Sotto i 991px la colonna era già allineata a sinistra (il `text-align` qui sopra, che era la riga originale). Il centraggio aggiunto al blocco base è `justify-content`, e su un flex container il `text-align` non lo contrasta: senza questa riga l'immagine si sarebbe spostata al centro sul telefono, cambiando in silenzio una scelta che qualcuno aveva già preso. */ justify-content: flex-start; } .se-gjs-page .textImage .left-area p { font-size: 18px; } /* ⚠ `!important`, ed è l'unico modo. Trascinando il bordo fra le due colonne nell'editor si scrive una regola PER-ID — `.se-gjs-page #iuc79f{flex:0 0 53.7%}` — che sta nel CSS del design, fuori da qualsiasi media query, e ha specificità (1,1,0). Nessuna regola di questo foglio la batte: le due colonne si tengono le percentuali del desktop a qualunque larghezza, e con `flex-shrink: 0` non cedono nemmeno sotto pressione. Il blocco andava in colonna e le colonne restavano larghe come sul desktop — «non scala». È lo stesso problema, e la stessa cura, di `.gjs-cell` in se-builder-content.css: lì la riga è `flex: 0 0 100% !important`, qui è `auto` perché il contenitore in colonna ha come asse principale l'ALTEZZA — una percentuale finirebbe sull'altezza, non sulla larghezza. La larghezza piena la danno `width`/`max-width`, che le due colonne hanno già dalle regole qui sopra. */ .se-gjs-page .textImage>.left-area, .se-gjs-page .textImage>.right-area { flex: 0 0 auto !important; } /* L'altezza fissa della colonna del media (489px, dalla regola di base) è misura da desktop: sul telefono lasciava una fascia vuota sotto l'immagine, perché l'immagine si adatta e il riquadro no. In colonna il riquadro non deve più tenere il passo con niente, quindi segue l'immagine. */ .se-gjs-page .textImage .right-area { height: auto; } } /* Sotto i 767 NON si rimette in colonna: a quel punto ci si è già da 224px. Qui resta soltanto quello che è davvero del telefono — il blocco centrato e il contenuto allineato a sinistra invece che al centro. Le tre righe che duplicavano la direzione (una per il blocco, una per la variante invertita) sono state tolte: dicevano la stessa cosa della query a 991, ma facevano credere che l'impilamento cominciasse qui. */ @media screen and (max-width: 767px) { .se-gjs-page .textImage { margin-left: auto; margin-right: auto; align-items: flex-start !important; } } /* ========================================================================== Dal tema figlio (ANCHOR: TEXT-IMAGE) — contesto .page-content rimosso, vedi testata ========================================================================== */ .se-gjs-page .textImage { align-items: center; } .se-gjs-page .textImage .left-area h2 { font-size: var(--title--normal); line-height: 1; font-weight: 500; text-transform: none; } .se-gjs-page .textImage h4 { margin-top: 1rem; font-size: 24px; font-weight: 200; } .se-gjs-page .textImage .left-area { flex: 1; } .se-gjs-page .textImage .right-area { text-align: center; justify-content: flex-start !important; } .se-gjs-page .textImage .right-area img { max-width: 680px; border-radius: 15px; } .se-gjs-page .textImage ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; } .se-gjs-page .textImage ul li::before { content: "•"; color: black; font-weight: bold; font-size: 1.3rem; display: inline-block; width: 1em; text-align: center; } .se-gjs-page .textImage ul li { font-size: 24px; width: 300px; text-indent: -1px; } .se-gjs-page .textImage.hero p { font-size: 18px; margin: var(--spacing--small) 0; font-weight: 300; line-height: 27px; } .se-gjs-page .textImage.hero h2 { font-size: var(--text--big); line-height: 1; } .se-gjs-page .textImage.hero h4 { margin-top: 0rem; font-size: 56px; font-weight: 700; line-height: 1.1; } .se-gjs-page .textImage .text_button_wrapper { display: flex; justify-content: flex-start; } .se-gjs-page .textImage .text_button_wrapper a { text-decoration: none; } /* ⚠ COLORE, GRADIENTE E HOVER NON STANNO PIÙ QUI: sono in css/se-builder-bottoni.css, insieme a quelli dell'Hero e del blocco Button di base. Il pulsante del sito ha un proprietario solo, e non è il blocco che lo contiene — vedi la testata di quel foglio. Qui restano le due misure che riguardano QUESTO blocco e nessun altro: lo stacco dal testo sopra e la larghezza minima nella colonna. */ .se-gjs-page .text_button { margin-top: 1rem; min-width: 40%; } .se-gjs-page .textImage .right-area.video video { border-radius: 20px } .se-gjs-page .textImage { margin: 2rem 0; } .se-gjs-page .textImage h2 { font-weight: 200; line-height: 1.2; text-transform: uppercase; margin-bottom: .5rem; } .se-gjs-page .textImage ul { display: block; } .se-gjs-page .textImage ul li { font-size: 18px; font-weight: 400; width: 100%; } /* ⚠ QUI il mio estrattore aveva catturato una regola COMMENTATA nel tema figlio (`.page-content .textImage p { font-size: 20px }`), producendo CSS rotto. Era commentata da chi ha scritto il tema: non la reintroduco per conto mio — se quel font-size servisse, andrebbe deciso, non ereditato da una riga spenta. */ .se-gjs-page .textImage { margin: 0; } /* ========================================================================== L'immagine si adatta alla colonna — REGOLA NOSTRA, non copiata ========================================================================== La colonna del media ha un'altezza FISSA (489px) e `overflow: hidden`: un'immagine più grande di quel riquadro veniva semplicemente tagliata. Il cap che c'era — `max-width: 680px`, dal tema figlio — non serviva a niente, perché la colonna è larga 644px, e sull'altezza non diceva nulla. Qui si vincolano tutte e due le misure alla colonna e si lascia libero il resto: `width/height: auto` fa il lavoro, il rapporto fra i lati lo tiene il browser. L'immagine entra intera, con il vuoto attorno — mai ritagliata. `object-fit: contain` non fa niente finché le misure sono automatiche, ed è messo apposta: è il presidio per quando qualcuno forza larghezza e altezza dal settore Dimension. Senza, in quel caso l'immagine si schiaccerebbe. Sta in fondo al foglio perché deve vincere sul `max-width: 680px` del tema figlio, che ha la stessa specificità e viene prima. ========================================================================== */ .se-gjs-page .textImage .right-area img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* ========================================================================== Il blocco resta centrato — REGOLA NOSTRA, e deve stare IN FONDO ========================================================================== `.textImage` ha `max-width: 1370px`: su uno schermo più largo deve stare in mezzo, non appoggiato a sinistra. Nel widget Elementor lo centrava il `.textImageWrapper` con un `justify-content: center`; tolto quello, il lavoro tocca al blocco stesso. Perché non è dichiarato insieme alle altre proprietà del contenitore, in cima: due regole copiate dal tema figlio — `.textImage { margin: 2rem 0 }` e, più sotto, `.textImage { margin: 0 }` — usano la SCORCIATOIA `margin`, che riscrive anche i margini orizzontali portandoli a zero. Hanno la stessa specificità e vengono dopo: qualunque `margin-left: auto` scritto prima veniva cancellato, e il blocco usciva a sinistra sia sul sito sia nel canvas dell'editor, che carica questo stesso foglio. Solo i margini orizzontali: quelli verticali restano come li ha voluti il tema (zero, che è l'ultima parola delle due regole qui sopra). ========================================================================== */ .se-gjs-page .textImage { margin-left: auto; margin-right: auto; }