/* * Correzioni di impaginazione del tema. * * Raccoglie gli aggiustamenti richiesti dopo la messa in linea: spaziature * dell'intestazione, prezzo della scheda immobile, fascia dello stato sulle * fotografie. Il foglio di stile originale del template non viene toccato. */ /* ========================================================================== Intestazione: spazio per il logo e distanza fra i pulsanti ========================================================================== */ @media (min-width: 992px) { /* Il logo desktop e' posizionato in modo assoluto e non occupa spazio nel flusso: senza una larghezza riservata finiva sopra la prima voce del menu. Qui gli viene lasciato il posto che gli spetta. */ .header-brand { /* min-width con flex-shrink disattivato: dentro la barra flessibile una semplice larghezza veniva compressa a zero. */ flex: 0 0 auto; min-width: 130px; margin-right: 32px; } /* Il menu parte quindi piu' a destra, staccato dal logo. */ .custom-primary-menu { padding-left: 12px; } /* Le voci restano su una riga sola: con meno spazio a disposizione "Chi Siamo" e "Richiedi Valutazione" andavano a capo. */ .custom-main-menu > .nav-item { margin: 0 13px; } .custom-main-menu > .nav-item > .nav-link { white-space: nowrap; } /* Il numero dei preferiti sta sopra l'icona, non sopra la scritta. */ .header-desktop-actions .ip-preferiti-btn { padding-right: 10px; } .header-desktop-actions .ip-preferiti-btn__badge { top: -8px; right: auto; /* Il numero era troppo addosso al bordo sinistro del cuore: sette pixel piu' a destra lo portano sopra la punta. */ left: 17px; } /* Preferiti e pulsante telefono: piu' aria fra i due. */ .header-desktop-actions .ip-preferiti-btn { margin-right: 18px; padding: 0 6px 0 4px; } .header-desktop-actions { margin-left: 32px; } } /* ========================================================================== Scheda immobile: caratteristiche principali ========================================================================== */ /* Su schermo largo la griglia e' fissa: quattro voci per riga, due righe. Le posizioni non occupate restano come celle vuote, cosi' il riquadro conserva sempre la stessa forma. */ @media (min-width: 992px) { .property-detail-features { grid-template-columns: repeat(4, minmax(0, 1fr)); } .property-detail-features__item--vuota { min-height: 44px; } } @media (max-width: 991.98px) { /* Sotto il desktop le voci si dispongono in base allo spazio e le celle vuote non vengono mostrate. */ .property-detail-features { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .property-detail-features__item--vuota { display: none; } } @media (max-width: 575.98px) { /* Su telefono restano due per riga, per non stringere troppo il testo. */ .property-detail-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== Scheda immobile: riga con preferiti, stampa e condivisioni ========================================================================== */ .property-detail-azioni { gap: 1rem; } .property-detail-azioni__gruppo { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* Stesse misure del pulsante "Ritorna a elenco annunci", nel viola del tema (--ip-navy) invece del viola generico del template. Altezza ridotta di 4px rispetto a prima, insieme al resto della barra. */ .ip-azione-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 1rem; border: 1.5px solid var(--ip-navy); border-radius: 5px; background-color: var(--ip-superficie); color: var(--ip-navy); font-size: 0.8rem; font-weight: 400; line-height: 1; white-space: nowrap; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .ip-azione-btn:hover, .ip-azione-btn:focus { background-color: var(--ip-navy); border-color: var(--ip-navy); color: #ffffff; text-decoration: none; } /* Quando l'annuncio e' gia' salvato il pulsante resta pieno. */ .ip-azione-btn.is-preferito { background-color: var(--ip-navy); border-color: var(--ip-navy); color: #ffffff; } /* --- Collegamenti per la condivisione ---------------------------------- */ .property-detail-azioni__social { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .property-detail-azioni__etichetta { margin-right: 0.25rem; font-size: 0.8rem; font-weight: 400; color: #6c757d; } /* Icone nel viola del tema; i colori di ogni rete restano solo al passaggio del mouse (regole piu' sotto). Anche qui 4px in meno rispetto a prima. */ .ip-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1.5px solid #e4e6ef; border-radius: 5px; background-color: var(--ip-superficie); color: var(--ip-navy); font-size: 1rem; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .ip-social-btn:hover, .ip-social-btn:focus { color: #ffffff; } .ip-social-btn--whatsapp:hover, .ip-social-btn--whatsapp:focus { background-color: #25d366; border-color: #25d366; } .ip-social-btn--facebook:hover, .ip-social-btn--facebook:focus { background-color: #1877f2; border-color: #1877f2; } .ip-social-btn--twitter:hover, .ip-social-btn--twitter:focus { background-color: #000000; border-color: #000000; } .ip-social-btn--linkedin:hover, .ip-social-btn--linkedin:focus { background-color: #0a66c2; border-color: #0a66c2; } .ip-social-btn--telegram:hover, .ip-social-btn--telegram:focus { background-color: #229ed9; border-color: #229ed9; } .ip-social-btn--email:hover, .ip-social-btn--email:focus { background-color: #6c757d; border-color: #6c757d; } .ip-social-btn--copy:hover, .ip-social-btn--copy:focus { background-color: #6f42c1; border-color: #6f42c1; } /* Conferma dopo la copia del collegamento. */ .ip-social-btn.is-copied { background-color: #28a745; border-color: #28a745; color: #ffffff; } /* ========================================================================== Scheda immobile: prezzo in evidenza ========================================================================== */ /* Prezzo della scheda immobile, nel verde del tema. La dichiarazione e' prioritaria perche' nel foglio del template una regola generica su tutti i paragrafi (main p:not(...)) ha una specificita' molto alta e sovrascriverebbe queste proprieta'. */ .property-detail-summary__price { font-size: 1.75rem !important; line-height: 1.15 !important; color: var(--ip-green) !important; } /* ========================================================================== Fascia inclinata con lo stato dell'immobile ========================================================================== Compare sopra la fotografia in ogni punto del sito. Testo, colori, inclinazione e trasparenza arrivano dal campo "stile_fascia" della tabella degli stati, modificabile dal pannello: qui ci sono solo i valori di partenza, usati quando una voce non e' stata compilata. */ .ip-fascia-stato { --ip-fascia-testo: ""; --ip-fascia-sfondo: #2d8a47; --ip-fascia-colore: #ffffff; --ip-fascia-opacita: .95; --ip-fascia-rotazione: 45deg; --ip-fascia-dimensione: 15px; /* Distanza della fascia dall'angolo, misurata sui due lati: segue la larghezza della fotografia, entro un minimo e un massimo. */ --ip-fascia-angolo: clamp(30px, 13cqw, 56px); /* Verso dell'inclinazione: -1 taglia l'angolo in basso a destra. */ --ip-fascia-verso: -1; /* La fascia e' ancorata all'angolo e spostata lungo la sua diagonale: le due estremita' escono dalla fotografia, che le taglia sui bordi. Cosi' non restano punte a meta' immagine e il testo, centrato nella banda, cade al centro esatto anche rispetto ai due lati. */ position: absolute; right: 0; bottom: 0; z-index: 3; /* Lunghezza della banda. Serve piu' della corda che taglia l'angolo (2,83 volte la distanza dall'angolo): senza il supplemento pari allo spessore, gli angoli interni delle due estremita' restano dentro la fotografia e si vedono i due tagli obliqui. */ width: calc(var(--ip-fascia-angolo) * 3 + 60px); padding: 4px 0; transform: translate(calc(50% - var(--ip-fascia-angolo)), calc(50% - var(--ip-fascia-angolo))) rotate(calc(var(--ip-fascia-rotazione) * var(--ip-fascia-verso))); transform-origin: center; background-color: var(--ip-fascia-sfondo); opacity: var(--ip-fascia-opacita); color: var(--ip-fascia-colore); font-size: clamp(8px, 3cqw, var(--ip-fascia-dimensione)); font-weight: 700; line-height: 1.25; letter-spacing: .04em; text-align: center; text-transform: uppercase; pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); } .ip-fascia-stato::before { content: var(--ip-fascia-testo); } /* Sulle schede dell'elenco e della home la fotografia fa da riferimento: il ritaglio chiude la fascia sui bordi e l'unita' di contenitore fa scalare il testo insieme all'immagine. */ .property-card-home__media { position: relative; overflow: hidden; container-type: inline-size; } .property-card-home__media .ip-fascia-stato { font-size: clamp(8px, 3cqw, 12px); } /* Nella scheda immobile la fascia sta in alto a destra di ogni fotografia: in basso ci sono il riferimento dell'annuncio e i comandi della galleria. */ .ip-detail-desktop-gallery .item, .property-detail-mobile-gallery__slider { position: relative; overflow: hidden; container-type: inline-size; } .ip-detail-desktop-gallery .ip-fascia-stato, .property-detail-mobile-gallery__slider .ip-fascia-stato, .ip-fascia-lightbox .ip-fascia-stato { --ip-fascia-verso: 1; top: 0; bottom: auto; /* Stessa costruzione, ribaltata verso l'alto. */ transform: translate(calc(50% - var(--ip-fascia-angolo)), calc(var(--ip-fascia-angolo) - 50%)) rotate(calc(var(--ip-fascia-rotazione) * var(--ip-fascia-verso))); } .ip-detail-desktop-gallery .ip-fascia-stato, .property-detail-mobile-gallery__slider .ip-fascia-stato { font-size: clamp(8px, 3cqw, 12px); } .ip-fascia-lightbox .ip-fascia-stato { --ip-fascia-angolo: clamp(46px, 9cqw, 92px); font-size: clamp(11px, 2.2cqw, 18px); } /* Sulle miniature del pannello preferiti la fascia si rimpicciolisce insieme all'immagine. */ .ip-preferiti-card__media .ip-fascia-stato { --ip-fascia-angolo: 20px; padding: 1px 0; font-size: 6px; letter-spacing: 0; } /* ========================================================================== Apertura delle pagine: ombra sul testo ========================================================================== Gli sfondi arrivano dai banner caricati nel pannello: la fotografia non viene piu' coperta da alcun velo, e il testo si stacca con un'ombra di un solo pixel, nera ma leggera. La variante "contatti" del template ha testo scuro e resta esclusa. */ .hero-call-left__content:not(.hero-contatti .hero-call-left__content) .hero-call-left__title, .hero-call-left__content:not(.hero-contatti .hero-call-left__content) .hero-call-left__subtitle, .hero-call-left__content:not(.hero-contatti .hero-call-left__content) .hero-call-left__title span { text-shadow: 0 1px 1px rgba(0, 0, 0, .35); } /* ========================================================================== Modulo di ricerca: pulsante "Filtri" e testi dei campi ========================================================================== Al clic il pulsante mostrava l'alone azzurro predefinito di Bootstrap: qui viene sostituito con lo stesso viola del tema. I testi dei campi e delle opzioni contratto passano al viola, come richiesto. */ .property-search-card__button--filter:focus, .property-search-card__button--filter.focus, .property-search-card__button--filter:not(:disabled):not(.disabled):active:focus, .property-search-card__button--filter.is-open:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ip-navy, rgb(19, 34, 144)) 30%, transparent); outline: none; } /* Anche il pulsante "Cerca" e i campi restano nella stessa famiglia di colore quando ricevono il fuoco. */ .property-search-card__button--submit:focus, .property-search-card__button--submit.focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ip-navy, rgb(19, 34, 144)) 18%, transparent); outline: none; } .property-search-card__control, .property-search-card__control option, .property-search-card__control optgroup, .property-search-mobile-card__control, .property-search-mobile-card__control option, .property-search-mobile-card__control optgroup { color: var(--ip-navy); } /* Le voci scelte dall'elenco e le etichette dei contratti (Affitto, Vendita) con lo stesso viola. */ .property-search-card__radio span, .property-search-mobile-card__radio-group .property-search-card__radio span, .property-search-card__label, .property-search-mobile-card__label span { color: var(--ip-navy); } /* Il testo di invito ("Seleziona tipologia") resta piu' tenue, per distinguerlo da una scelta gia' fatta. */ .property-search-card__control option[value=""], .property-search-mobile-card__control option[value=""] { color: var(--ip-bordo-tenue); } /* ========================================================================== Scheda immobile: galleria con una sola fotografia ========================================================================== Quando l'annuncio ha una foto sola il mosaico non ha la colonna di destra: l'immagine occupa tutta la larghezza del riquadro, con un'altezza pari a quella che avrebbe avuto il mosaico completo. */ @media (min-width: 992px) { .galleries > .col-12 .item-size-4-3:after { padding-top: 37.5%; } } /* ========================================================================== Apertura delle pagine: spazio sopra e sotto il testo ========================================================================== I valori arrivano dal pannello (Banner del sito > Spaziatura del testo) e vengono scritti come variabili nell'intestazione della pagina. Quelli indicati qui sono i valori di partenza, usati finche' non si cambia nulla dal gestionale. */ .hero-call-left .container.py-8.py-lg-12 { padding-top: var(--ip-hero-spazio-sopra-mobile, 24px) !important; padding-bottom: var(--ip-hero-spazio-sotto-mobile, 24px) !important; } /* Dove il riquadro di ricerca si sovrappone al banner serve comunque spazio sotto: al valore scelto si aggiunge l'ingombro del riquadro. */ @media (max-width: 991.98px) { .hero-barletta--with-search .container.py-8.py-lg-12 { padding-bottom: calc(var(--ip-hero-spazio-sotto-mobile, 24px) + 48px) !important; } } @media (min-width: 992px) { .hero-call-left .container.py-8.py-lg-12 { padding-top: var(--ip-hero-spazio-sopra, 56px) !important; padding-bottom: var(--ip-hero-spazio-sotto, 56px) !important; } } /* Altezza del banner: anche questa si imposta dal pannello (Banner del sito > Spaziatura del testo). I valori di partenza sono quelli del tema. */ .hero-barletta { min-height: var(--ip-hero-altezza, 620px); } @media (max-width: 991.98px) { .hero-barletta { min-height: var(--ip-hero-altezza-mobile, 300px); } } /* ========================================================================== Apertura delle pagine: larghezza del testo ========================================================================== Il testo occupa tutta la gabbia centrata della pagina, allineato a sinistra: gli a capo e le parole da mandare in verde restano decisi nel contenuto (tag ), non da limiti di larghezza. */ .hero-call-left__content, .hero-servizi .hero-call-left__content, .hero-valutazione .hero-call-left__content, .hero-contatti .hero-call-left__content { max-width: 100%; width: 100%; margin-right: 0; text-align: left; } /* ========================================================================== Comparsa dei contenuti ========================================================================== Il tema faceva entrare i blocchi uno alla volta, in coda: il risultato era una sequenza a scatti mentre si scorreva. Ora il contenuto e' gia' al suo posto e al caricamento pensa la schermata iniziale. */ [data-animate], [data-animate].animated { opacity: 1 !important; animation: none !important; transform: none !important; visibility: visible !important; } /* ========================================================================== Elenco immobili: ricerca a tutta pagina sul telefono ========================================================================== Sul telefono il modulo di ricerca non resta sotto il banner: si apre dal pulsante "Cerca immobili" e copre la pagina, con la sua intestazione e il tasto di chiusura. Da tablet in su tutto resta com'era. */ .ip-ricerca-testa { display: none; } @media (max-width: 991.98px) { #ip-ricerca-mobile { position: fixed; inset: 0; /* Piu' alto della barra fissa in basso (Chiama/WhatsApp/Indicazioni, z-index:2000): a schermo intero deve coprirla del tutto. */ z-index: 2100; display: none; overflow-y: auto; background: var(--ip-superficie); } /* Con priorità: sotto i 768 pixel il tema nasconde del tutto la fascia della ricerca, e senza questa forzatura la finestra non comparirebbe. */ #ip-ricerca-mobile.is-aperta { display: block !important; } #ip-ricerca-mobile .ip-ricerca-testa { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e9ecef; background: var(--ip-superficie); } .ip-ricerca-testa__titolo { font-size: 1rem; font-weight: 700; color: var(--ip-navy); } .ip-ricerca-chiudi { border: 0; background: transparent; color: #6c757d; font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer; } /* Il titolo del modulo ripeterebbe quello dell'intestazione. */ #ip-ricerca-mobile .property-search-mobile-card__title { display: none; } /* Dentro la finestra il riquadro non ha più bisogno di ombre e rialzi: il margine negativo serviva a farlo salire sopra il banner e qui nascondeva la prima riga sotto l'intestazione. */ #ip-ricerca-mobile .property-search-section { box-shadow: none !important; border-radius: 0; top: 0; margin-top: 0 !important; padding-top: 16px !important; padding-bottom: 20px !important; } /* La form non deve stare dentro una "card": qui c'era ancora il riquadro bianco con ombra e padding di .property-search-mobile-card (pensato per stare sopra la foto del banner, fuori dalla modale a tutta pagina). Tolto, i campi guadagnano larghezza e la finestra respiro sopra/sotto invece di un riquadro dentro l'altro. */ #ip-ricerca-mobile .property-search-mobile-card { padding: 0; border-radius: 0; background-color: transparent; box-shadow: none; } /* La pagina sotto resta ferma mentre si compila la ricerca. */ body.ip-ricerca-aperta { overflow: hidden; } } /* --- Anteprima della ricerca sul telefono ------------------------------ Riquadro con i tre campi principali che sale sul banner, come fa il modulo di ricerca sul desktop: al tocco si apre la ricerca completa. */ .ip-ricerca-anteprima-shell { position: relative; z-index: 3; margin-top: -34px; /* Sotto ci pensa il respiro della sezione che segue: un margine in piu' qui allontanerebbe gli annunci rispetto alle altre pagine. */ margin-bottom: 0; } .ip-ricerca-anteprima { display: block; width: 100%; padding: 6px 14px; border: 0; border-radius: 10px; background: var(--ip-superficie); box-shadow: 0 10px 26px rgba(15, 27, 45, .16); text-align: left; cursor: pointer; } .ip-ricerca-anteprima__campo { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid #eef0f6; } .ip-ricerca-anteprima__campo:last-of-type { border-bottom: 0; } .ip-ricerca-anteprima__campo i { width: 16px; color: var(--ip-navy); font-size: .9rem; text-align: center; } .ip-ricerca-anteprima__titolo { flex: 1; color: var(--ip-navy); font-size: .82rem; font-weight: 600; } .ip-ricerca-anteprima__valore { color: #6c6f8a; font-size: .82rem; font-weight: 500; text-align: right; } /* La lente chiude il riquadro e ricorda che di lì si cerca. */ .ip-ricerca-anteprima__lente { display: flex; align-items: center; justify-content: center; height: 40px; margin: 6px 0 8px; border-radius: 8px; background: var(--ip-green-deep); color: #ffffff; font-size: 1rem; } /* La fascia dentro la galleria a schermo intero: la cornice viene misurata dal codice sull'immagine visibile, qui si definisce solo come ritagliarla. */ .ip-fascia-lightbox { position: absolute; z-index: 5; display: block; overflow: hidden; pointer-events: none; container-type: inline-size; } /* ========================================================================== Elenco immobili: barra dei risultati ========================================================================== Sopra gli annunci: quanti ne ha trovati la ricerca, il comando per togliere i filtri e la scelta dell'ordinamento. */ /* Non e' piu' una barra a se' con bordo e sfondo: sta sulla stessa riga del titolo "Elenco annunci" (a destra, su schermo largo), quindi resta un contenitore semplice, senza cornice. */ .ip-elenco-intestazione { margin-bottom: var(--ip-sp-testata); } .ip-risultati { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .ip-risultati__conteggio { color: var(--ip-navy); font-size: .95rem; } .ip-risultati__conteggio strong { font-size: 1.1rem; } .ip-risultati__azzera { margin-left: 14px; color: #c0392b; font-size: .85rem; font-weight: 600; white-space: nowrap; } .ip-risultati__azzera:hover { color: var(--ip-red-dark); text-decoration: underline; } .ip-risultati__ordina { display: flex; align-items: center; gap: 8px; margin: 0; } .ip-risultati__etichetta { margin: 0; color: var(--ip-navy); font-size: .85rem; font-weight: 600; } .ip-risultati__select { height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--ip-navy); border-radius: 5px; background-color: var(--ip-superficie); color: var(--ip-navy); font-size: .85rem; font-weight: 500; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath fill='%235a57b6' d='M0 0h12L6 6z'/%3E%3C/svg%3E"); background-position: calc(100% - 18px) center; background-size: 10px 5px; background-repeat: no-repeat; } @media (max-width: 575.98px) { .ip-risultati { align-items: center; flex-direction: column; } /* Numero immobili trovati e "Reset Filtri" centrati sulla riga, invece che a filo del bordo sinistro. */ .ip-risultati__conteggio { width: 100%; text-align: center; } .ip-risultati__ordina { width: 100%; } .ip-risultati__select { flex: 1; } } /* ========================================================================== Schede dell'elenco: la fotografia porta alla scheda dell'immobile ========================================================================== Il velo con i contrassegni copre l'immagine e intercettava i clic: ora lascia passare il tocco, mentre i comandi che contiene (cuore, riferimento, etichette) restano cliccabili. */ .property-card-home__overlay { pointer-events: none; } .property-card-home__overlay .property-card-home__favorite, .property-card-home__overlay .property-card-home__reference, .property-card-home__overlay a, .property-card-home__overlay button { pointer-events: auto; } /* Il collegamento copre tutta la fotografia. */ .property-card-home__media-link { display: block; width: 100%; height: 100%; } /* La presentazione dell'elenco resta su una riga sola: se lo spazio non basta il testo si restringe un poco invece di andare a capo. */ @media (min-width: 992px) { .ip-elenco-presentazione { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(.82rem, 1.35vw, 1rem); } } /* ========================================================================== Scheda immobile: descrizione impaginata ========================================================================== La descrizione può arrivare con paragrafi ed elenchi (anche scritta dall'assistente del gestionale): qui la resa sul sito. */ .property-detail-description p { margin-bottom: .7rem; } .property-detail-description p:last-child { margin-bottom: 0; } .property-detail-description ul, .property-detail-description ol { margin: 0 0 .7rem; padding-left: 1.15rem; } .property-detail-description li { margin-bottom: .25rem; } /* Icone del sito nelle schede e nella pagina dell'immobile: hanno lo stesso ingombro delle icone del template, così l'allineamento non cambia. */ /* I disegni delle icone della scheda seguono il colore del contenitore: il colore scritto dentro al file (un grigio, lasciato dal programma di grafica) viene coperto da questa riga. */ .ip-icona-scheda, .ip-icona-scheda g, .ip-icona-scheda path, .ip-icona-scheda circle, .ip-icona-scheda rect, .ip-icona-scheda polygon, .ip-icona-scheda ellipse, .ip-icona-scheda line, .ip-icona-scheda polyline { fill: currentColor; } /* Le parti disegnate a tratto invece che a pieno. */ .ip-icona-scheda [stroke]:not([stroke="none"]) { stroke: currentColor; } .ip-icona-scheda { /* Colore di partenza: quello che i disegni avevano gia'. Dove serve la tinta del tema lo stabilisce la regola del punto (vedi piu' sotto). */ color: var(--ip-icona-neutra, #525252); width: 24px; height: 24px; margin-right: 6px; vertical-align: -6px; object-fit: contain; } /* Nella scheda immobile le icone hanno la stessa misura delle schede e prendono il verde del tema, come le icone del template che sostituiscono. Gli SVG arrivano in grigio: il filtro li riporta al colore giusto. */ .property-detail-features__item .ip-icona-scheda { width: 26px; height: 26px; margin-right: 0; flex-shrink: 0; /* Il colore lo decide la palette. */ color: var(--ip-green-deep); } /* Schede degli immobili: superficie, locali e bagni restano sulla stessa riga. Con le icone del sito lo spazio era appena insufficiente e l'ultima voce andava a capo: si recuperano i margini interni e, nel caso limite, e' il pulsante a scendere sotto invece della lista a spezzarsi. */ .property-card-home__footer { flex-wrap: wrap; gap: 8px; padding-left: 14px; padding-right: 14px; } .property-card-home__features { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 6px; } .property-card-home__feature { gap: 3px; } .property-card-home__feature .ip-icona-scheda { margin-right: 0; } /* Scheda immobile su smartphone: nella riga prezzo/caratteristiche i disegni del sito prendono il posto delle icone del template, nella stessa misura e nel verde del tema (gli SVG arrivano in grigio). */ .property-detail-mobile-quickinfo__chip .ip-icona-scheda { width: 18px; height: 18px; margin-right: 0; vertical-align: middle; flex-shrink: 0; /* Il colore lo decide la palette. */ color: var(--ip-green-deep); } /* Scheda immobile su smartphone: cuore dei preferiti sopra la fotografia, in alto a sinistra, come nelle schede dell'elenco. */ .property-detail-mobile-gallery__favorite { position: absolute; top: 12px; left: 12px; z-index: 11; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background-color: rgba(255, 255, 255, .92); color: #111827; font-size: 1rem; box-shadow: 0 6px 16px rgba(15, 23, 42, .12); -webkit-tap-highlight-color: transparent; } .property-detail-mobile-gallery__favorite:focus, .property-detail-mobile-gallery__favorite:active { outline: none; box-shadow: 0 6px 16px rgba(15, 23, 42, .12); } .property-detail-mobile-gallery__favorite.is-preferito, .property-detail-mobile-gallery__favorite.is-preferito i { color: #e0245e; } /* Scheda immobile su smartphone: video, planimetrie e mappa restano visibili anche quando l'annuncio non li ha, ma in grigio chiaro e senza comando. */ .property-detail-mobile-actions__item--vuoto, .property-detail-mobile-actions__item--vuoto i { color: #c7ccd4; } .property-detail-mobile-actions__item--vuoto { cursor: default; pointer-events: none; } /* Il pannello dei preferiti deve coprire anche la riga del prezzo (1500) e la barra dei contatti in fondo (2000), che prima gli restavano sopra. */ .ip-preferiti-pannello { z-index: 9990; } /* Moduli del sito: campo rifiutato al momento dell'invio. Stessa segnalazione nel modulo dei contatti e in quello della valutazione. */ .contact-message-form__control.is-invalid, .valuation-step-form__control.is-invalid { border-color: var(--ip-red); background-color: var(--ip-red-light); background-image: none; } .contact-message-form__control.is-invalid:focus, .valuation-step-form__control.is-invalid:focus { border-color: var(--ip-red); box-shadow: 0 0 0 3px rgba(210, 19, 10, .15); } /* Pagina contatti: il riquadro del modulo era largo al massimo 980 pixel, mentre le altre sezioni usano tutta la colonna. */ .contact-message-card { max-width: none; margin-left: 0; margin-right: 0; } /* Pagina della valutazione: campi e pulsanti uguali a quelli dei contatti. Le icone dentro le caselle sono state tolte, quindi il testo torna al margine come nell'altro modulo. */ .valuation-step-form__control { min-height: 58px; padding: 0.95rem 1rem; border: 1px solid #d7deea; border-radius: 5px; color: var(--ip-navy-title); font-size: 1rem; box-shadow: none; } .valuation-step-form__control::placeholder { color: #77839b; } .valuation-step-form__control:focus { border-color: color-mix(in srgb, var(--ip-green, rgb(36, 136, 69)) 55%, transparent); box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--ip-green, rgb(36, 136, 69)) 12%, transparent); } .valuation-step-form__control--textarea { min-height: 140px; resize: vertical; } .valuation-step-form__submit, .valuation-step-form__back { min-height: 56px; border-radius: 5px; font-size: 1.05rem; font-weight: 700; } @media (max-width: 767.98px) { .valuation-step-form__control--textarea { min-height: 120px; } } /* Pagina contatti: il pulsante delle mappe era della misura grande (53 pixel di altezza) e pesava troppo accanto all'indirizzo. */ .contact-office-card__button { min-height: 40px; padding: 0 0.95rem !important; font-size: 0.85rem !important; align-self: flex-start; } .contact-office-card__button i { font-size: 0.9rem; } /* Pagina della valutazione: le linee fra i passaggi restavano piu' in basso perche' venivano centrate sull'intera colonna (cerchio + etichetta). Ora partono dal bordo alto e scendono di meta' cerchio, cosi' cadono sul suo asse. */ .valuation-step-progress__line { align-self: start; margin-top: calc(var(--ip-passo-cerchio, 42px) / 2 - 0.5px); } /* Pagina servizi, "Come lavoriamo": tolti i numeri progressivi, la riga torna a due colonne (icona e testo). */ .services-process-card__item { grid-template-columns: 46px 1fr; } /* Pagina servizi, "Hai bisogno di una consulenza?": il pulsante prende l'aspetto di "Scrivici su WhatsApp" della scheda immobile. */ .services-cta-card__button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 58px; min-width: 320px; padding: 0.6rem 1.1rem; border-width: 2px !important; border-radius: 5px; border-color: var(--ip-green) !important; background-color: var(--ip-superficie) !important; color: var(--ip-green) !important; font-size: 1.18rem; font-weight: 700 !important; letter-spacing: 0.01em; line-height: 1.1; transition: all 0.22s ease; } .services-cta-card__button:hover, .services-cta-card__button:focus { background-color: var(--ip-green) !important; border-color: var(--ip-green) !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 12px 24px color-mix(in srgb, var(--ip-green, rgb(36, 136, 69)) 22%, transparent); } .services-cta-card__button i { font-size: 1.5rem; line-height: 1; margin-right: 0 !important; } @media (max-width: 767.98px) { .services-cta-card__button { width: 100%; min-width: 0; min-height: 56px; font-size: 1.05rem; } } /* Pagina servizi: disegni del sito al posto delle icone del template. Arrivano gia' nel verde del tema, quindi non serve ritoccarne il colore. */ .ip-icona-servizio { display: block; width: 100%; height: 100%; object-fit: contain; } .services-tech-strip__item .ip-icona-servizio { width: 26px; height: 26px; flex-shrink: 0; } /* Scheda immobile, fascia della stampa: il pulsante prende il viola dell'icona della stampante invece del verde. */ .property-detail-help--print .property-detail-help__button { border-color: var(--ip-navy) !important; color: var(--ip-navy) !important; background-color: var(--ip-superficie) !important; } .property-detail-help--print .property-detail-help__button:hover, .property-detail-help--print .property-detail-help__button:focus, .property-detail-help--print .property-detail-help__button:active { border-color: var(--ip-navy) !important; background-color: var(--ip-navy) !important; color: #ffffff !important; box-shadow: 0 12px 24px color-mix(in srgb, var(--ip-navy, rgb(19, 34, 144)) 22%, transparent); } /* Scheda immobile, fasce "Non e' la casa giusta?" e "Vuoi portare con te questo annuncio?": stessa icona semplice (senza sfondo quadrato) e stesso rapporto titolo/icona della fascia "Hai bisogno di una consulenza?" della pagina Servizi (.listing-support-card). */ .property-detail-help__icon { width: 80px; height: 80px; flex: 0 0 auto; background: none; border-radius: 0; font-size: calc(2.8rem + 5px); display: flex; align-items: center; justify-content: center; } .property-detail-help__icon img { width: 80px; height: 80px; max-width: 80px; max-height: 80px; object-fit: contain; } .property-detail-help--print .property-detail-help__icon { background-color: transparent; } .property-detail-help__title { font-size: 1.7rem; } /* Scheda immobile, fascia "Ti interessa questo immobile?": titolo dello stesso blu di "Potrebbero interessarti anche" (.text-heading, var(--ip-navy-title)) invece del quasi-nero del template. */ .property-detail-panel--interest .property-detail-panel__title { color: var(--ip-navy-title) !important; } /* Scheda immobile, fascia "Ti interessa questo immobile?": i due pulsanti (WhatsApp/Chiama) nelle stesse proporzioni di testo e icona del pulsante della fascia "Hai bisogno di una consulenza?" della pagina Servizi. */ .property-detail-panel--interest .property-detail-contact__button { min-height: 0; padding: calc(0.95rem - 4px) calc(1.5rem - 4px); font-size: calc(1.1rem - 2px); font-weight: 600 !important; } .property-detail-panel--interest .property-detail-contact__button i { font-size: calc(1.5rem + 2px); } /* Scheda immobile, fasce "Non e' la casa giusta?" e "Vuoi portare con te questo annuncio?": il pulsante (Scrivici su WhatsApp / Stampa l'annuncio) nelle stesse dimensioni grafiche dei pulsanti WhatsApp/Chiama della fascia "Ti interessa questo immobile?", invece delle dimensioni piu' grandi del template (min-width 320px, altezza 58px). */ .property-detail-help__button { min-height: 0; min-width: 0; padding: calc(0.95rem - 4px) calc(1.5rem - 4px); font-size: calc(1.1rem - 2px); font-weight: 600 !important; } .property-detail-help__button i { font-size: calc(1.5rem + 2px); } /* Piede: il riquadro bianco attorno al logo del partner era largo 16 pixel; ora aderisce all'immagine. */ .site-footer-home__partner-card { padding: 1px; } /* ========================================================================== Elenco immobili: ricerca senza risultati ========================================================================== Al posto delle schede compare il modulo di richiesta, con lo stesso aspetto della pagina contatti. Qui solo il riepilogo di cosa e' stato cercato. */ .ip-elenco-vuoto__avviso { max-width: 720px; color: #5e6b7a; } .ip-elenco-vuoto__testo { color: #5e6b7a; font-size: 0.95rem; } .ip-elenco-vuoto__ricerca { margin-bottom: 1.5rem; padding: 0.75rem 1rem; border-radius: 5px; background-color: var(--ip-navy-light); color: var(--ip-navy-title); font-size: 0.9rem; } .ip-elenco-vuoto__ricerca i { color: var(--ip-navy); } /* ========================================================================== Ricerca su telefono: pulsante di apertura e leggibilita' dei campi ========================================================================== */ /* Il pulsante verde dice cosa fa: lente piu' dicitura. */ .ip-ricerca-anteprima__lente { gap: 0.5rem; font-weight: 600; } .ip-ricerca-anteprima__lente-testo { font-size: 0.95rem; letter-spacing: 0.01em; } /* Su iPhone il testo delle voci di un elenco a discesa lo disegna il sistema: se il colore e' troppo tenue o la misura sotto i 16px, le voci risultano illeggibili. Qui si impone un testo scuro e la misura piena. */ select.valuation-step-form__control, select.contact-message-form__control, select.property-search-mobile-card__control, select.property-search-card__control { font-size: 1rem; color: var(--ip-navy-title); } select.valuation-step-form__control option, select.contact-message-form__control option, select.property-search-mobile-card__control option, select.property-search-card__control option, select.valuation-step-form__control optgroup, select.contact-message-form__control optgroup, select.property-search-mobile-card__control optgroup, select.property-search-card__control optgroup { color: var(--ip-navy-title); background-color: var(--ip-superficie); font-size: 1rem; } /* La prima voce e' un invito, non una scelta: resta piu' tenue ma leggibile. */ select.valuation-step-form__control option[value=""], select.contact-message-form__control option[value=""], select.property-search-mobile-card__control option[value=""], select.property-search-card__control option[value=""] { color: #6b7590; } /* ========================================================================== Menu del telefono: pagina corrente in evidenza ========================================================================== Nel pannello laterale tutte le voci sono dello stesso viola e non si capiva dove ci si trova. La voce della pagina aperta - e la voce del sottomenu Immobili, quando e' quella attiva - passa al verde del tema. */ @media (max-width: 991.98px) { .custom-main-menu > .nav-item.active > .nav-link, .custom-main-menu > .nav-item.active > .nav-link span, .custom-main-menu > .nav-item.active > .nav-link i, .custom-main-menu > .nav-item.active > .nav-link .caret, .custom-main-menu > .nav-item.active > .nav-link .mobile-menu-item-icon, .custom-main-menu > .nav-item.active > .nav-link .mobile-menu-item-icon i, .custom-main-menu .dropdown-menu .nav-item.active > .nav-link, .custom-main-menu .dropdown-menu li.active > a { color: var(--ip-green) !important; font-weight: 600; } } /* --------------------------------------------------------------------------- Percorso di navigazione della scheda immobile. Sta sotto la riga con i preferiti e le condivisioni e riporta all'elenco filtrato per contratto, tipologia, citta', zona e fascia di prezzo. Sul telefono non viene mostrato (d-none d-lg-block nel markup): occuperebbe piu' righe a scapito del contenuto. --------------------------------------------------------------------------- */ .ip-percorso { /* Venti pixel sopra: stacca la riga dai pulsanti dei preferiti. */ margin-top: 20px; margin-bottom: 0; } /* Nell'elenco il percorso sta sopra la riga del conteggio: li' il margine inferiore non viene assorbito da nessuno, quindi resta sul percorso. */ .ip-percorso--elenco { margin-top: 0; margin-bottom: 20px; } @media (min-width: 992px) { /* I venti pixel sotto stanno sul contenitore, non sul percorso: il margine di un ultimo figlio verrebbe assorbito dal genitore e la distanza dalla prima fotografia non sarebbe quella chiesta. */ .ip-ha-percorso { padding-bottom: 20px; } /* Lo spazio sopra le fotografie e' gia' quello: la sezione non deve aggiungerne altro. Sotto questa misura il percorso non compare e la distanza resta quella della riga delle azioni. */ #content > .ip-ha-percorso + .home-section.ip-detail-desktop-gallery { padding-top: 0; } } .ip-percorso__elenco { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0; padding: 0; list-style: none; } .ip-percorso__voce { display: inline-flex; align-items: center; gap: .5rem; } .ip-percorso__link { color: var(--ip-navy-title); font-size: .8rem; line-height: 1.2; text-decoration: none; transition: color .18s ease; } .ip-percorso__link:hover, .ip-percorso__link:focus { color: var(--ip-green); text-decoration: underline; } .ip-percorso__separatore { color: #9aa2b8; font-size: .7rem; } /* L'ultima voce e' l'annuncio aperto: si distingue perche' non porta da nessuna parte. */ .ip-percorso__corrente { color: var(--ip-navy-title); font-size: .8rem; line-height: 1.2; } /* --------------------------------------------------------------------------- Pagina contatti: i tre riquadri rapidi (chiamaci, WhatsApp, indicazioni) sono per intero un collegamento, non solo il recapito in fondo. --------------------------------------------------------------------------- */ a.contact-quick-card--cliccabile { display: block; color: inherit; text-decoration: none; cursor: pointer; } a.contact-quick-card--cliccabile:hover, a.contact-quick-card--cliccabile:focus { color: inherit; text-decoration: none; } /* Il recapito in fondo non e' piu' un collegamento a se': si accende con tutto il riquadro, cosi' resta chiaro che si puo' toccare ovunque. */ a.contact-quick-card--cliccabile:hover .contact-quick-card__link, a.contact-quick-card--cliccabile:focus .contact-quick-card__link { color: var(--ip-green-dark); } /* Contorno per chi si muove con la tastiera: senza, il riquadro attivo non si distinguerebbe dagli altri. */ a.contact-quick-card--cliccabile:focus-visible { outline: 2px solid var(--ip-green); outline-offset: 3px; } /* --------------------------------------------------------------------------- Scheda immobile: riquadro "+N altre foto" dell'ultimo tassello. Niente fondo scuro: ne' sul tassello ne' dietro al numero. La fotografia si vede per intera e il testo bianco resta staccato grazie a un'ombra, che non aggiunge alcun riquadro. --------------------------------------------------------------------------- */ .ip-detail-desktop-gallery a.card-img-overlay.bg-dark-opacity-04 { background-color: transparent !important; } .ip-detail-desktop-gallery a.card-img-overlay.bg-dark-opacity-04 > p { background-color: transparent; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); } /* --------------------------------------------------------------------------- Modulo contatti: nota sulla riservatezza spostata sopra il pulsante. Il margine superiore serviva quando la nota stava sotto il pulsante: qui lo spazio va messo sotto, per staccarla da quello che segue. --------------------------------------------------------------------------- */ .contact-message-form__privacy--sopra { margin-top: .5rem; margin-bottom: 1rem; } /* --------------------------------------------------------------------------- Pagina contatti: titolo delle tre card rapide (Chiamaci, WhatsApp, Indicazioni) piu' piccolo, icone nei cerchi ingrandite di 15px e cerchio di sfondo ingrandito di 3px per contenerle meglio. --------------------------------------------------------------------------- */ .contact-quick-card .choose-us-stat-value { font-size: 1.1rem; } .contact-quick-card .choose-us-stat-icon i { font-size: calc(1.12rem + 15px); } .contact-quick-card .choose-us-stat-icon { width: calc(52px + 3px); min-width: calc(52px + 3px); min-height: calc(52px + 3px); } @media (max-width: 991.98px) { .contact-quick-card .choose-us-stat-icon { width: calc(48px + 3px); min-width: calc(48px + 3px); min-height: calc(48px + 3px); } } /* --------------------------------------------------------------------------- Intestazione mobile: nuovo logo (formato panoramico), piu' grande di partenza ma abbastanza stretto da lasciare almeno 10px rispetto al cuore dei preferiti a destra (il logo e' centrato in modo assoluto sulla barra, quindi la larghezza massima va calcolata sullo spazio libero, non solo sull'altezza). Object-fit: contain mantiene le proporzioni. --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .mobile-navbar-layout .navbar-brand img.d-inline-block.d-lg-none { max-height: 30px; max-width: 150px; } } /* --------------------------------------------------------------------------- Intestazione desktop: bordo interno di 10px fra il logo e la cornice che lo contiene (il template ne mette 4px), senza ingrandire la cornice stessa: resta 170x170, il box-sizing: border-box del template fa si' che il padding riduca lo spazio per l'immagine invece di aggiungersi fuori. --------------------------------------------------------------------------- */ #logo-container { padding: 10px; } /* --------------------------------------------------------------------------- Pagina contatti: icone SVG al posto delle Font Awesome nei tre box rapidi (Chiamaci, WhatsApp, Indicazioni) e nell'elenco "I nostri contatti". Le nuove icone hanno gia' il cerchio verde chiaro disegnato al loro interno, quindi il cerchio che il CSS del template disegnava dietro l'icona viene tolto per non sovrapporne due; l'immagine riempie il contenitore mantenendo le proporzioni (e' gia' quadrata 1:1 come il contenitore, object-fit la protegge comunque da eventuali deformazioni). --------------------------------------------------------------------------- */ .contact-quick-card .choose-us-stat-icon.choose-us-stat-icon--svg { background-color: transparent; } .choose-us-stat-icon__img { width: 100%; height: 100%; object-fit: contain; } .contact-overview-list__icon.contact-overview-list__icon--svg { background-color: transparent; } .contact-overview-list__icon--svg img { width: 100%; height: 100%; object-fit: contain; } /* Pagina contatti desktop: le icone SVG di "I nostri contatti" (telefono e orari) 3px piu' grandi del cerchio base (34px), solo su schermo largo. */ @media (min-width: 992px) { .contact-overview-list__icon.contact-overview-list__icon--svg { width: calc(34px + 3px); height: calc(34px + 3px); flex-basis: calc(34px + 3px); } } /* Home, sezione "Vieni a trovarci": le righe degli orari (Lun-Ven, Sab, Dom) erano piu' piccole (0.98rem) del numero di telefono e dell'email (1.08rem, ereditato da .contact-overview-list__item): stessa dimensione per tutti e tre i recapiti. */ .contact-overview-list__item--hours span { font-size: 1.08rem; } /* Il selettore del template ".contact-overview-list__item--hours span" sopra colpisce per errore anche lo dell'orologio (e' uno span pure lui), rendendolo grigio come le righe dell'orario invece che verde come telefono ed email. Specificita' piu' alta per riportarlo verde. */ .contact-overview-list__item--hours .contact-overview-list__icon { color: var(--ip-green); } /* Home, sezione "Vieni a trovarci": "Orari di apertura" era piu' grassetto (700) di telefono ed email (600), pur avendo la stessa dimensione: stesso peso per i tre recapiti. */ .contact-overview-list__item--hours strong { font-weight: 600; } /* Home, sezione "Vieni a trovarci": le tre icone (telefono, email, orari) erano allineate in alto insieme al testo (align-items: flex-start del template), ma essendo piu' alte di una riga di testo il loro centro cadeva ~5px piu' in basso del centro della prima riga. Le sposto su di quel tanto cosi' l'icona resta centrata sul titolo anche quando sotto ci sono altre righe (caso "Orari di apertura"). */ .contact-overview-list__icon { margin-top: -4px; } /* --------------------------------------------------------------------------- Pagina Chi Siamo, sezione "La nostra storia": troncamento su mobile fatto con un'altezza massima via CSS, mai riscrivendo il testo in JS (altrimenti sparisce tutta la formattazione scritta dal pannello: grassetti, paragrafi, ecc. - vedi pagina_chi_siamo.php). Da espanso non ha limiti; da compresso (solo sotto i 991.98px, quando il testo e' davvero piu' lungo) si taglia a un'altezza fissa con una dissolvenza verso il basso. --------------------------------------------------------------------------- */ .js-about-story-clamp { position: relative; } @media (max-width: 991.98px) { .js-about-story-clamp--collapsed { max-height: 5.1em; overflow: hidden; } .js-about-story-clamp--collapsed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.7em; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none; } } /* --------------------------------------------------------------------------- Home, sezione "Cosa dicono di noi": sotto l'autore, zona della recensione ed esito della trattativa (gestibili dal pannello, Recensioni). --------------------------------------------------------------------------- */ .google-review-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .google-review-card__zona { margin-top: 2px; color: #56657f; font-size: 0.88rem; font-weight: 500; } .google-review-card__esito { flex: 0 0 auto; display: inline-block; padding: 4px 12px; border-radius: 999px; background-color: #e8f5e9; color: var(--ip-green-dark); font-size: 0.85rem; font-weight: 600; white-space: nowrap; } /* Home, "Cosa dicono di noi" su mobile: autore e zona impilati a sinistra, esito impilato sotto ma centrato nella card (non piu' autore/zona a sinistra ed esito a destra sulla stessa riga come da desktop in poi), con l'etichetta libera di andare a capo se il testo e' piu' largo della card. */ @media (max-width: 767.98px) { .google-review-card__footer { flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; } .google-review-card__zona { margin-top: 0; } .google-review-card__esito { align-self: center; margin-top: 4px; max-width: 100%; white-space: normal; text-align: center; } } /* --------------------------------------------------------------------------- Home, sezione "Ultime proposte" su mobile: sotto i 768px "Ultime proposte" e il pulsante "Vedi tutte" finivano su due righe separate (i .col-md-9/ .col-md-3 sono block pieni sotto md). Li rimetto sulla stessa riga, titolo a sinistra e pulsante a destra allineato verticalmente, restringendo il pulsante quanto serve; il testo di presentazione sotto va comunque a capo su tutta la larghezza. --------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .home-proposte-header { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; } .home-proposte-header > .col-md-9 { flex: 0 1 auto; width: max-content; max-width: 68%; min-width: 0; } .home-proposte-header > .col-md-3 { flex: 0 0 auto; width: auto; margin-bottom: 0; margin-left: auto; } .home-proposte-header > .col-md-3 .section-cta-button { /* !important: le classi utility del tema (.px-7, .fs-14) sono gia' !important, altrimenti vincerebbero comunque loro anche se questa regola e' piu' specifica e caricata dopo. */ padding-left: 10px !important; padding-right: 10px !important; font-size: 0.78rem !important; white-space: nowrap; } .home-proposte-header > .col-12 { flex: 1 1 100%; width: 100%; } } /* --------------------------------------------------------------------------- Pagina contatti: illustrazione dei recapiti. Tolti il riquadro del telefono, la busta e il fumetto disegnati in CSS: resta solo l'immagine, dimensionata in proporzione (formato panoramico, non deformata). --------------------------------------------------------------------------- */ .contact-overview-illustration__phone-img { display: block; width: 100%; max-width: 240px; height: auto; } /* --------------------------------------------------------------------------- Home, sezione "Vuoi vendere casa?": icona della casa e pulsante nel verde del tema (var(--ip-green)) invece del rosso di partenza. --------------------------------------------------------------------------- */ .valuation-strip__icon { background-color: var(--ip-green); } .valuation-strip__button { background-color: var(--ip-green); border-color: var(--ip-green); box-shadow: 0 12px 26px color-mix(in srgb, var(--ip-green, rgb(35, 134, 68)) 30%, transparent); } .valuation-strip__button:hover, .valuation-strip__button:focus { background-color: var(--ip-green-dark); border-color: var(--ip-green-dark); box-shadow: 0 16px 30px color-mix(in srgb, var(--ip-green, rgb(35, 134, 68)) 38%, transparent); } .valuation-strip__button:active { box-shadow: 0 8px 18px color-mix(in srgb, var(--ip-green, rgb(35, 134, 68)) 32%, transparent); } /* --------------------------------------------------------------------------- Home, sezione "Perché scegliere noi": due colonne (Se vendi / Se compri), ciascuna con un'etichetta colorata e due punti di forza. Colori ripresi dalla palette del tema (--ip-green per chi vende, --ip-navy per chi compra), stessi toni di testo gia' usati altrove (var(--ip-navy-title) per i titoli, #5e6b7a per le descrizioni, vedi .choose-us-stat-label/-description). --------------------------------------------------------------------------- */ .why-us-split__col--separata { /* Niente riga grigia sopra "Se compri" in versione mobile: restano solo i filetti che affiancano il badge (quelli sono decorativi, non un divisorio fra le due colonne). */ border-top: 0; padding-top: 32px; margin-top: 32px; } @media (min-width: 992px) { .why-us-split__col--separata { border-top: 0; border-left: 1px solid #e4e6ef; padding-top: 0; padding-left: 48px; margin-top: 0; } } .why-us-split__badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .why-us-split__item { display: flex; align-items: flex-start; gap: 20px; } .why-us-split__item + .why-us-split__item { margin-top: 28px; } .why-us-split__icon { flex: 0 0 88px; width: 88px; height: 88px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--ip-green-light); color: var(--ip-green); font-size: 1.5rem; } .why-us-split__icon--navy { background-color: var(--ip-navy-light); color: var(--ip-navy); } .why-us-split__item-title { margin-bottom: 0; color: var(--ip-navy-title); font-size: 1.1rem; font-weight: 700; line-height: 1.35; } .why-us-split__item-divider { display: block; width: 28px; height: 3px; border-radius: 999px; background-color: var(--ip-green); margin: 10px 0; } .why-us-split__item-divider--navy { background-color: var(--ip-navy); } .why-us-split__item-text { color: #5e6b7a; font-size: 0.98rem; line-height: 1.6; } @media (max-width: 575.98px) { .why-us-split__item { gap: 14px; } } /* Stessa gabbia delle icone della sezione "In cosa possiamo aiutarti" (.help-services-card__image, 88px/56px sul breakpoint 991.98px). */ @media (max-width: 991.98px) { .why-us-split__icon { flex-basis: 56px; width: 56px; height: 56px; font-size: 1.25rem; } } /* --------------------------------------------------------------------------- Foto di Michele Piccolo (home "L'agenzia di fiducia" e pagina Chi siamo): il template lasciava un bordo vuoto fra la foto e la cornice circolare che la contiene (96px dentro un cerchio di 120px, 152px dentro 180px). La foto ora riempie tutta la cornice, restando dentro il cerchio (object-fit: cover, gia' impostato dal template, ritaglia senza deformare). Cornice della home portata a 180x180 come quella della pagina Chi Siamo, cosi' la foto (100% della cornice) e' 180x180 su entrambe le pagine. --------------------------------------------------------------------------- */ .presentation-highlight__image-wrap { width: 180px; height: 180px; } .presentation-highlight__image { width: 100%; height: 100%; } .about-profile-card__image { width: 100%; height: 100%; } /* --------------------------------------------------------------------------- Footer: riorganizzato su 3 colonne (Chi siamo/Servizi/Contatti), fascia "chi siamo in breve" e barra legale in fondo. Riusa le classi .site-footer-home__* gia' definite dal template per logo, titoli e liste; qui solo le parti nuove (tagline, descrizione, social, pulsanti, fascia about, barra legale). --------------------------------------------------------------------------- */ .site-footer-home__tagline { color: var(--ip-green); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .site-footer-home__description { max-width: 300px; color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; line-height: 1.65; } .site-footer-home__social { display: flex; align-items: center; gap: 12px; } /* Stesso tipo (box squadrato, non cerchio) delle icone social della barra superiore desktop (.desktop-header-topbar__social-link), con i colori dell'estetica gia' presente nel footer (verde su sfondo scuro). */ .site-footer-home__social-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1.5px solid var(--ip-green); border-radius: 5px; color: var(--ip-green); font-size: 0.95rem; transition: background-color .18s ease, color .18s ease; } .site-footer-home__social-link:hover, .site-footer-home__social-link:focus { background-color: var(--ip-green); color: #fff; } /* Titoli colonna: stessa classe del template, qui solo il filetto verde sotto */ .site-footer-home__title { margin-bottom: 10px; text-transform: uppercase; font-size: 0.98rem; letter-spacing: 0.02em; } .site-footer-home__title-divider { display: block; width: 32px; height: 3px; margin-bottom: 22px; border-radius: 999px; background-color: var(--ip-green); } /* Elenco "Servizi" con freccia verde al posto del pallino */ .site-footer-home__links--chevron a { display: flex; align-items: center; gap: 10px; } .site-footer-home__links--chevron i { flex: 0 0 auto; color: var(--ip-green); font-size: 0.7rem; } /* Orari nel blocco contatti: due righe compatte invece della griglia */ .site-footer-home__hours-line { display: block; } .site-footer-home__hours-line + .site-footer-home__hours-line { margin-top: 2px; } /* Pulsanti "Vai su Google Maps" / "WhatsApp" */ .site-footer-home__cta { display: flex; flex-wrap: wrap; gap: 12px; } .site-footer-home__cta-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 5px; color: #fff; font-size: 0.84rem; font-weight: 600; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease; } .site-footer-home__cta-button:hover, .site-footer-home__cta-button:focus { background-color: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; } .site-footer-home__cta-button--whatsapp { border-color: var(--ip-green); color: var(--ip-green); } .site-footer-home__cta-button--whatsapp:hover, .site-footer-home__cta-button--whatsapp:focus { background-color: var(--ip-green); color: #fff; } /* Fascia "chi siamo in breve": riga a tutta larghezza fra le colonne e la barra legale, tono leggermente diverso dal resto del footer. */ .site-footer-home__about { margin-top: 52px; padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); background-color: rgba(0, 0, 0, 0.18); color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; line-height: 1.6; text-align: center; } .site-footer-home__about-hl { color: var(--ip-green); font-weight: 600; } /* Barra legale in fondo: partner a sinistra, link legali al centro, copyright a destra. */ .site-footer-home__legal { padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.82rem; } .site-footer-home__legal-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; } .site-footer-home__legal-partner { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.65); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; line-height: 1.3; text-decoration: none; transition: color .18s ease; } .site-footer-home__legal-partner:hover, .site-footer-home__legal-partner:focus { color: #ffffff; text-decoration: none; } /* Logo FIMAA ingrandito rispetto ai 44px di partenza (poi altri 20px: a 64px restava troppo piccolo per leggerlo). */ .site-footer-home__legal-partner img { max-width: calc(64px + 20px); max-height: calc(64px + 20px); width: auto; height: auto; } .site-footer-home__legal-links { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.65); } .site-footer-home__legal-links a { color: rgba(255, 255, 255, 0.85); } .site-footer-home__legal-links a:hover, .site-footer-home__legal-links a:focus { color: #fff; text-decoration: underline; } .site-footer-home__legal-copy { color: rgba(255, 255, 255, 0.65); text-align: right; line-height: 1.5; } .site-footer-home__legal-piva { color: var(--ip-green); font-weight: 600; } @media (max-width: 991.98px) { .site-footer-home__legal-inner { justify-content: center; text-align: center; } .site-footer-home__legal-copy { text-align: center; width: 100%; } } /* --------------------------------------------------------------------------- Pagina richiedi valutazione: icone SVG del tema (img_template_immobiliare) nei riquadri dei vantaggi, dei passaggi della valutazione e dei punti di forza. Hanno lo stesso formato quadrato delle icone della pagina contatti, quindi vengono portate alla stessa misura del riquadro "Chiamaci" (55px su desktop, 51px sotto i 992px). --------------------------------------------------------------------------- */ .valuation-benefits-card__icon, .valuation-flow-card__icon, .valuation-strengths-card__icon { width: calc(52px + 3px); height: calc(52px + 3px); } @media (max-width: 991.98px) { .valuation-benefits-card__icon, .valuation-flow-card__icon, .valuation-strengths-card__icon { width: calc(48px + 3px); height: calc(48px + 3px); } } /* --------------------------------------------------------------------------- Pagina servizi: i riquadri usano i disegni SVG del tema (img_template_immobiliare), dello stesso formato quadrato delle icone della pagina contatti, quindi l'icona di ogni card viene portata alla misura del riquadro "Chiamaci" (55px su desktop, 51px sotto i 992px) al posto dei 56px/48px del template. --------------------------------------------------------------------------- */ .services-card__icon { width: calc(52px + 3px); height: calc(52px + 3px); } @media (max-width: 991.98px) { .services-card__icon { width: calc(48px + 3px); height: calc(48px + 3px); } } /* --------------------------------------------------------------------------- Home page, banner della valutazione: il titolo "Vuoi vendere casa e non sai quanto vale davvero?" a 2rem andava a capo. Da 1200px in su, dove la colonna del titolo e' larga abbastanza, il corpo scende a 1.7rem cosi' il titolo sta su una riga sola. Sotto i 1200px lo spazio non basterebbe comunque e resta la misura del template, che manda il testo a capo. --------------------------------------------------------------------------- */ @media (min-width: 1200px) { .valuation-strip__title { font-size: 1.7rem; } } /* --------------------------------------------------------------------------- Home page, card presentazione: il titolo "L'agenzia di fiducia a ..." usava il blu --ip-text-heading, piu' acceso di quello degli altri titoli di sezione. Prende lo stesso colore di "Cosa dicono di noi", cioe' il blu del tema applicato da .text-heading. Il testo sotto il titolo era limitato a 760px: il vincolo viene tolto cosi' il paragrafo arriva fino al bordo della card. --------------------------------------------------------------------------- */ .presentation-highlight__title, .presentation-highlight__title.home-section-title-match { color: var(--ip-navy-title); } .presentation-highlight__text { max-width: none; } /* --------------------------------------------------------------------------- Frecce dei menu a tendina: il template le disegnava con due mezzi triangoli affiancati (due linear-gradient). Dove i due pezzi si toccano il browser lasciava una riga chiara nel mezzo del triangolo. Al loro posto un solo disegno SVG, che resta pulito a qualsiasi ingrandimento. Misure e posizioni sono quelle di prima, il triangolo occupa lo spazio dei due pezzi uniti. --------------------------------------------------------------------------- */ select.property-search-card__control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath fill='%235a57b6' d='M0 0h12L6 6z'/%3E%3C/svg%3E"); background-position: calc(100% - 22px) center; background-size: 12px 6px; background-repeat: no-repeat; } @media (max-width: 991.98px) { select.property-search-mobile-card__control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath fill='%235a57b6' d='M0 0h12L6 6z'/%3E%3C/svg%3E"); background-position: calc(100% - 10px) center; background-size: 10px 5px; background-repeat: no-repeat; } } select.ip-search-field__control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath fill='%2364748b' d='M0 0h12L6 6z'/%3E%3C/svg%3E"); background-position: calc(100% - 20px) calc(1em + 3px); background-size: 12px 6px; background-repeat: no-repeat; } /* --------------------------------------------------------------------------- Home page, sezione "I nostri contatti": la scheda della sede principale non e' una card dentro la card. Restano la foto, quadrata e con gli angoli arrotondati, e il testo di lato; il riquadro con bordo e sfondo sparisce. Il testo parte in alto come l'elenco dei recapiti a sinistra. --------------------------------------------------------------------------- */ .contact-office-card--nuda { border: 0; background-color: transparent; box-shadow: none; overflow: visible; } .contact-office-card--nuda .contact-office-card__media { aspect-ratio: 1 / 1; height: auto; min-height: 0; border-radius: 8px; overflow: hidden; } .contact-office-card--nuda .contact-office-card__body { height: auto; justify-content: flex-start; padding: 0 0 0 1.5rem; } /* Home, "I nostri contatti": sotto i 576px foto e testo si impilano (niente piu' colonne affiancate) - qui in piu' 10px di distacco fra la foto e "Sede Principale" sotto. */ @media (max-width: 575.98px) { .contact-office-card--nuda .contact-office-card__body { padding-top: 10px; } } /* --------------------------------------------------------------------------- Pagina servizi: testo di presentazione sotto il titolo di ogni gruppo. Sta nella testata centrata della sezione, con la stessa larghezza contenuta degli altri testi introduttivi del tema. --------------------------------------------------------------------------- */ .services-section-text { max-width: 720px; margin-right: auto; margin-left: auto; } /* --------------------------------------------------------------------------- Pagina servizi, fascia dei servizi tecnici: accanto all'icona il titolo e, quando e' compilata nel pannello, la descrizione sotto. Senza descrizione il riquadro resta come prima, con il solo titolo di fianco all'icona. --------------------------------------------------------------------------- */ .services-tech-strip__testo { display: flex; flex-direction: column; gap: 2px; } .services-tech-strip__descrizione { color: #5b6577; font-size: 0.85rem; font-weight: 500; } /* --------------------------------------------------------------------------- Home, "Perche' scegliere noi": la sezione prende l'impaginazione dei gruppi della pagina servizi (titolo centrato con i filetti ai lati, testo di presentazione sotto) e i due blocchi diventano una griglia unica, cosi' le voci della colonna di sinistra e quelle di destra stanno sulla stessa riga anche quando un titolo occupa due righe e l'altro una sola. --------------------------------------------------------------------------- */ /* Etichetta della colonna (Se vendi / Se compri): riquadro pieno al centro, con il filetto che arriva da destra e da sinistra al posto della riga continua che prima stava sotto. */ .why-us-split__intestazione { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; } .why-us-split__intestazione::before, .why-us-split__intestazione::after { content: ''; flex: 1 1 0; height: 1px; background-color: #d8deea; } .why-us-split__badge { flex: 0 0 auto; padding: 7px 20px 7px 7px; background-color: var(--ip-green); color: #fff; } .why-us-split__badge--navy { background-color: var(--ip-navy); } /* Casetta dell'etichetta dentro un tondo chiaro, come nel disegno. */ .why-us-split__badge-icona { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background-color: var(--ip-superficie); color: var(--ip-green); font-size: 0.95rem; } .why-us-split__badge--navy .why-us-split__badge-icona { color: var(--ip-navy); } /* Icona SVG dentro il tondo dell'etichetta: il cerchio bianco e' gia' disegnato nel file (icona_se_vendi/se_compri_pg_home.svg), qui si dimensiona solo perche' riempia il tondo di 28px. */ .why-us-split__badge-icona img { width: 100%; height: 100%; object-fit: contain; } @media (min-width: 992px) { /* Le due colonne si sciolgono nella griglia della sezione: le tre righe sono l'etichetta e le due voci, e il flusso per colonna manda i figli della prima colonna a sinistra e quelli della seconda a destra. */ .why-us-split { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-auto-flow: column; margin-right: 0; margin-left: 0; } .why-us-split__col { display: contents; } .why-us-split__col--verde .why-us-split__intestazione, .why-us-split__col--verde .why-us-split__item { padding-right: 40px; } /* Filetto verticale fra le due colonne. */ .why-us-split__col--navy .why-us-split__intestazione, .why-us-split__col--navy .why-us-split__item { border-left: 1px solid #e4e6ef; padding-left: 40px; } /* Filetto orizzontale fra la prima e la seconda voce. */ .why-us-split__item { padding-bottom: 30px; } .why-us-split__item + .why-us-split__item { margin-top: 0; border-top: 1px solid #e4e6ef; padding-top: 30px; } } /* --------------------------------------------------------------------------- Pagina Chi siamo: pulsante "Scrivimi su WhatsApp" della card di Michele Piccolo. Icona piu' grande, testo piu' piccolo di 3px e senza grassetto. --------------------------------------------------------------------------- */ .about-profile-card__whatsapp { display: inline-flex; align-items: center; padding: calc(0.95rem - 4px) calc(1.5rem - 4px); font-size: calc(1.1rem - 2px); font-weight: 600; } .about-profile-card__whatsapp i { display: inline-flex; align-items: center; font-size: calc(1.5rem + 2px); } /* --------------------------------------------------------------------------- Home, sezione "I nostri contatti": qui a destra c'e' la foto della sede (non l'illustrazione della pagina contatti), quindi il divisore verticale grigio del template non serve piu'. Il riquadro della sede parte inoltre dallo stesso rigo del titolo mentre l'elenco a sinistra parte piu' in basso (sotto titolo e filetto): lo si allinea al primo recapito (telefono) per simmetria. --------------------------------------------------------------------------- */ .contact-overview-card--home .contact-overview-card__left::after { display: none; } @media (min-width: 992px) { .contact-overview-card--home .contact-office-card--nuda { margin-top: 70px; } } /* --------------------------------------------------------------------------- Home: icone SVG del tema al posto delle Font Awesome, sulle card che ne avevano bisogno (sezione "Vuoi vendere casa?" e "Perché scegliere noi"). Le icone "Perché scegliere noi" hanno gia' il proprio cerchio colorato disegnato dentro, quindi qui si toglie lo sfondo che il CSS impostava dietro (era pensato per l'icona Font Awesome semplice). L'icona di "Vuoi vendere casa?" invece e' bianca senza sfondo, pensata proprio per stare dentro al cerchio verde gia' presente: qui si dimensiona soltanto. --------------------------------------------------------------------------- */ .why-us-split__icon--svg { background-color: transparent; } .why-us-split__icon-img { width: 100%; height: 100%; object-fit: contain; } .valuation-strip__icon-img { width: 55%; height: 55%; object-fit: contain; } /* --------------------------------------------------------------------------- Elenco immobili, fascia "Non trovi quello che cerchi?": tolto il quadrato verde chiaro con la codina decorativa attorno all'icona WhatsApp, resta la sola icona verde. Il pulsante "Scrivici su WhatsApp" prende le stesse proporzioni di testo e icona del pulsante omonimo della pagina Chi siamo (.about-profile-card__whatsapp). --------------------------------------------------------------------------- */ .listing-support-card__icon { width: auto; height: auto; flex: 0 0 auto; background: none; border-radius: 0; font-size: calc(2.8rem + 5px); } .listing-support-card__icon::after { display: none; } .listing-support-card__button { display: inline-flex; align-items: center; min-width: 0; min-height: 0; padding: calc(0.95rem - 4px) calc(1.5rem - 4px); font-size: calc(1.1rem - 2px); font-weight: 600; } .listing-support-card__button i { display: inline-flex; align-items: center; font-size: calc(1.5rem + 2px); } /* --------------------------------------------------------------------------- Pagina Chi siamo, "I nostri valori": i titoli (Trasparenza, Territorio, Competenza, Disponibilita') nello stesso blu di "La nostra storia" (.text-heading, var(--ip-navy-title)). La classe .text-secondary del template li portava al blu piu' acceso (--ip-navy) con !important, quindi serve lo stesso peso per riportarli a var(--ip-navy-title). Solo su questa pagina: nella home gli stessi riquadri (Compra/Valuta) restano come sono. --------------------------------------------------------------------------- */ .chisiamo-valori-section .help-services-card__title.text-secondary { color: var(--ip-navy-title) !important; } /* Pagina Chi siamo: il titolo "Michele Piccolo" nello stesso blu di "I nostri valori" / "La nostra storia" (var(--ip-navy-title)) invece del blu piu' acceso di --ip-text-heading. */ .about-profile-card__title { color: var(--ip-navy-title); } /* Pagina Chi siamo mobile: "Michele Piccolo" su un'unica riga invece di andare a capo (il font-size del titolo era pensato per la colonna larga del desktop). */ @media (max-width: 767.98px) { .about-profile-card__title { font-size: 1.6rem; white-space: nowrap; } } /* --------------------------------------------------------------------------- Home, "Ultime proposte": pulsante "Vedi tutte" nello stesso stile (bianco/bordo verde) e stesso effetto hover (fondo verde chiaro) del pulsante "Cerca" del modulo di ricerca (.property-search-card__button--submit). --------------------------------------------------------------------------- */ .section-cta-button { background-color: var(--ip-superficie); border: 1px solid var(--ip-green); color: var(--ip-green) !important; } .section-cta-button i { color: var(--ip-green); } .section-cta-button:hover, .section-cta-button:focus { background-color: var(--ip-green-light); border-color: var(--ip-green-dark); color: var(--ip-green-dark) !important; } .section-cta-button:hover i, .section-cta-button:focus i { color: var(--ip-green-dark); } /* --------------------------------------------------------------------------- Pagina servizi, fascia "Servizi tecnici": stessa formattazione grafica per tutti i riquadri, come "Certificazione energetica APE" (il solo con una descrizione, quindi il piu' alto: il grid pareggia l'altezza di tutti i riquadri su quella). Da grid a flex non basterebbe: con align-items "center" l'icona si centra sull'intero blocco titolo+descrizione e finisce lontana dal titolo; con "flex-start" resta incollata al titolo ma negli altri riquadri (solo titolo, piu' corti) c'e' un vuoto sotto. Qui il riquadro diventa una mini-grid a due colonne (icona / testo): con "align-items: start" le due colonne restano incollate in alto FRA LORO (icona a fianco del titolo, come prima), mentre "align-content: center" centra quella riga, come blocco unico, nello spazio verticale extra del riquadro alto - risultato: identico per il primo riquadro (che occupa gia' quasi tutta l'altezza) e centrato per gli altri. --------------------------------------------------------------------------- */ .services-tech-strip__item { display: grid; grid-template-columns: auto 1fr; align-items: start; align-content: center; justify-content: normal; text-align: left; } .services-tech-strip__testo { text-align: left; } .services-tech-strip__descrizione { display: block; margin-top: 2px; font-weight: 500; font-size: calc(0.95rem - 2px); text-align: left; } /* --------------------------------------------------------------------------- Pagina 404: la prima sezione dopo il banner usa di norma il respiro pieno fra banner e sezione (--ip-sp-sezione); qui va ridotto, cosi' come lo spazio fra l'illustrazione "404" e la frase sotto (margine dell'immagine). --------------------------------------------------------------------------- */ .page-404-content { padding-top: var(--ip-sp-blocco) !important; } .page-404-illustrazione { margin-bottom: 0.75rem !important; } /* --------------------------------------------------------------------------- Pagina 404: le tre colonne di collegamenti al posto del modulo di ricerca. Stessa impostazione (titolo + filetto verde + elenco con freccia) della colonna "Servizi" del piede di pagina, qui su sfondo chiaro in una card bianca invece che sulla fascia scura del footer. --------------------------------------------------------------------------- */ .page-404-links-card { padding: 2.5rem 2.25rem; margin-bottom: 100px; } .page-404-links__col { margin-bottom: 2rem; } .page-404-links__col:last-child { margin-bottom: 0; } .page-404-links__title { margin-bottom: 10px; color: var(--ip-navy-title); text-transform: uppercase; font-size: 0.98rem; font-weight: 600; letter-spacing: 0.02em; } .page-404-links__divider { display: block; width: 32px; height: 3px; margin-bottom: 18px; border-radius: 999px; background-color: var(--ip-green); } .page-404-links__list { display: flex; flex-direction: column; gap: 12px; } .page-404-links__list a { display: flex; align-items: center; gap: 10px; color: #4b5563; font-size: 0.92rem; font-weight: 500; } .page-404-links__list a i { flex: 0 0 auto; color: var(--ip-green); font-size: 0.7rem; } .page-404-links__list a:hover, .page-404-links__list a:focus { color: var(--ip-green); text-decoration: underline; } @media (min-width: 768px) { .page-404-links__col { margin-bottom: 0; } } /* --------------------------------------------------------------------------- Home "In cosa possiamo aiutarti": in versione mobile le quattro card (Compra, Vendi, Valuta, Affitta - posizioni 1,2,3,4 nel pannello) vanno viste nell'ordine Vendi, Affitta, Compra, Valuta. Le due righe del partial diventano "trasparenti" (display:contents) cosi' le quattro card condividono un unico contesto flex e possono essere riordinate con "order"; lo spazio fra le righe/card, prima affidato ai margini di .ip-blocchi-riga, passa al gap del contenitore. --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .ip-blocchi-quattro--home { display: flex; flex-direction: column; gap: var(--ip-sp-blocco); } .ip-blocchi-quattro--home .ip-blocchi-riga { display: contents; } .ip-blocchi-quattro--home .ip-blocchi-riga > [class*="col-"] { margin-bottom: 0 !important; padding-left: 0; padding-right: 0; } /* Compra (riga 1, 1a card): terza in mobile. */ .ip-blocchi-quattro--home .ip-blocchi-riga:nth-of-type(1) > .col-lg-6:nth-child(1) { order: 3; } /* Vendi (riga 1, 2a card): prima in mobile. */ .ip-blocchi-quattro--home .ip-blocchi-riga:nth-of-type(1) > .col-lg-6:nth-child(2) { order: 1; } /* Valuta (riga 2, 1a card): quarta in mobile. */ .ip-blocchi-quattro--home .ip-blocchi-riga:nth-of-type(2) > .col-lg-6:nth-child(1) { order: 4; } /* Affitta (riga 2, 2a card): seconda in mobile. */ .ip-blocchi-quattro--home .ip-blocchi-riga:nth-of-type(2) > .col-lg-6:nth-child(2) { order: 2; } } /* --------------------------------------------------------------------------- Home "In cosa possiamo aiutarti" e Chi siamo "I nostri valori" (stesso componente .help-services-card): sotto i 576px le card erano impilate, icona sopra e testo sotto. Restano appaiate come da tablet in su - icona a sinistra, testo a destra - ma piu' piccole: icona ridotta e descrizione piu' compatta. Il titolo mantiene la sua dimensione. --------------------------------------------------------------------------- */ @media (max-width: 575.98px) { .help-services-card { flex-direction: row !important; align-items: flex-start; } .help-services-card__image { width: 44px; max-width: 44px; margin-bottom: 0 !important; margin-right: 14px; } .help-services-card__text { font-size: 0.8rem; } } /* --------------------------------------------------------------------------- Statistiche (home "Perche' scegliere noi" e Chi siamo): in versione mobile il box e' orizzontale (icona a sinistra, testo a destra) ma l'icona era centrata sull'intero blocco - con la descrizione su piu' righe finiva piu' in basso del titolo. Ora l'icona resta allineata in alto, alla stessa altezza del titolo. --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .choose-us-stat-item { align-items: flex-start; } } /* --------------------------------------------------------------------------- Scheda immobile: il pulsante "indietro" torna all'elenco con l'ancora sulla card di partenza (#ip-scheda-N). Un margine di rispetto sopra la card evita che l'intestazione del sito la copra al primo istante dello scorrimento automatico del browser. --------------------------------------------------------------------------- */ .property-card-home { scroll-margin-top: 100px; } /* --------------------------------------------------------------------------- Pagina Servizi, banner: sotto i 768px il contenitore del pulsante unico ("Richiedi una consulenza") e' gia' a piena larghezza, ma il pulsante restava alla sua larghezza naturale (width:auto) invece di riempirlo. --------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .hero-servizi .hero-call-left__actions--single .hero-call-left__btn { width: 100%; } } /* --------------------------------------------------------------------------- Pagina Servizi, card "Per chi compra / vende / affitta": sotto i 768px erano impilate e centrate (icona sopra, titolo e testo sotto, tutto in centro). Ora l'icona resta a sinistra, titolo e testo a destra e allineati a sinistra fra loro - stessa impostazione delle card di "Servizi tecnici" qui sopra (mini-grid a due colonne, icona che copre le due righe). --------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .services-card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; text-align: left; } /* Il markup ha anche la classe "text-center" (!important) sullo stesso elemento: senza !important qui il centrato vinceva comunque su titolo e testo. */ .services-card__title, .services-card__text { text-align: left !important; } .services-card__icon { grid-column: 1; grid-row: 1 / 3; margin: 0; } .services-card__title { grid-column: 2; grid-row: 1; } .services-card__text { grid-column: 2; grid-row: 2; max-width: none; margin-left: 0; margin-right: 0; } } /* --------------------------------------------------------------------------- Pagina Servizi, "Hai bisogno di una consulenza?": sotto i 768px icona e testo si impilavano centrati (era pensato per il caso senza descrizione sotto il titolo). Ora l'icona WhatsApp resta a sinistra e titolo+testo a destra, sulla stessa riga, allineati a sinistra. --------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .listing-support-card__main { flex-direction: row; align-items: flex-start; text-align: left; } } /* --------------------------------------------------------------------------- Elenco immobili mobile: il pulsante "Cerca Immobile" dentro la modale a schermo intero deve avere lo stesso stile del pulsante "Cerca Immobile" del box comprimibile della pagina che apre la modale (.ip-ricerca-anteprima __lente: verde pieno var(--ip-green-deep), non il bottone bianco/bordo verde del form desktop, che su mobile non e' nemmeno visibile). --------------------------------------------------------------------------- */ .property-search-mobile-card__submit { height: 40px; min-height: 40px; border-radius: 8px; background-color: var(--ip-green-deep); border-color: var(--ip-green-deep); color: #ffffff; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; /* E' un