/* Theme Name: Houzez Child Theme URI: http://www.favethemes.com/ Author: Favethemes Author URI: http://www.favethemes.com/ Description: Houzez is a premium WordPress theme for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. Whether you are a real estate agent looking to build a website for your company or a web developer seeking a perfect WordPress theme for your next project, you are certain to appreciate the numerous features and benefits that our theme provides. Version: 1.0.1 Tags: white, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready License: GNU General Public License version 3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Text Domain: houzez Template: houzez */ /* Your CSS code goes here -------------------------------------- */ :root { --vale-blu: #0e559e; --vale-rosa: #db5679; --vale-bordo: #dce0e0; /* Corrette il 23/09/2026: puntavano a "Playfair Display" e "Montserrat", ma il sito usa Lora per i titoli e Poppins per il corpo. Playfair non e' caricato da nessuna parte, quindi chi usava questa variabile otteneva un serif di sistema. Non erano usate da nessuno: a video non cambia nulla. */ --vale-font-titoli: "Lora", Georgia, serif; --vale-font-testo: "Poppins", -apple-system, sans-serif; } /* ========================================================================== HEADER MOBILE / TABLET — fix 23/09/2026 -------------------------------------------------------------------------- Problemi risolti: 1. Il menu desktop non veniva nascosto sotto i 1024px: le 6 voci restavano in pagina, bianche su sfondo bianco, in overflow orizzontale, e occupavano 123px di altezza apparentemente vuota. 2. Hamburger e icona telefono erano bianchi su sfondo bianco, invisibili. Su desktop l'header e' trasparente sopra l'hero scuro e il bianco funziona; su mobile l'header sta in una fascia bianca e spariva tutto. 3. Header alto 241px invece di ~64px, per via del wrap del flex container. 1024px = soglia "desktop" di Elementor su questo sito (tablet 768-1024). ========================================================================== */ @media (max-width: 1024px) { /* --- 1. via il menu desktop: qui si naviga con l'offcanvas --- */ header .houzez-nav-menu-main-desktop-wrap { display: none !important; } /* --- 2. una riga sola: [hamburger] [logo] [telefono] --- */ header .e-con-inner { flex-wrap: nowrap !important; gap: 12px !important; padding-top: 8px !important; padding-bottom: 8px !important; } header .elementor-widget-houzez_site_logo { flex: 1 1 auto !important; width: auto !important; text-align: center; } header .elementor-widget-houzez_site_menu, header .elementor-widget-icon { flex: 0 0 auto !important; width: auto !important; } /* --- 3. hamburger: colore brand + area di tocco da 44px (linee guida di accessibilita' per i target touch) --- */ header .houzez-menu-toggle-button { width: 44px !important; height: 44px !important; justify-content: flex-start !important; color: var(--vale-blu) !important; } header .houzez-menu-toggle-button .houzez-icon { font-size: 22px; color: var(--vale-blu) !important; } /* --- 4. icona telefono: era fill bianco --- */ header .elementor-widget-icon .elementor-icon, header .elementor-widget-icon svg { color: var(--vale-blu) !important; fill: var(--vale-blu) !important; } /* --- 5. sfondo pieno e stacco dal contenuto sottostante --- */ header .e-con { background-color: #fff !important; border-bottom: 1px solid var(--vale-bordo); } } /* --- Pannello offcanvas: era largo 400px fissi, quindi sui telefoni stretti (iPhone SE/8/13 mini, 320-375px) la X di chiusura restava tagliata --- */ @media (max-width: 420px) { .offcanvas.offcanvas-mobile-menu { width: 86vw !important; max-width: 340px !important; } } /* ========================================================================== LOGO NELL'HEADER NATIVO HOUZEZ — fix 23/09/2026 -------------------------------------------------------------------------- Le pagine che NON usano l'header Elementor (archivio immobili, schede immobile, agenti, agenzie) usano l'header nativo del tema. Li' il logo viene stampato con attributi HTML width="127" height="24", che arrivano dalle impostazioni del tema e NON rispettano le proporzioni reali dell'immagine: 477x199 (rapporto 2,40) schiacciata in 127x24 (5,29). Risultato: logo compresso a meno di meta' altezza, su desktop e mobile. Questa regola e' una rete di sicurezza: qualunque dimensione venga impostata nel pannello, il logo non puo' piu' deformarsi. Resta da correggere all'origine, in Theme Options > Logo & Favicons. ========================================================================== */ .header-main-wrap .logo img { width: auto !important; height: 40px !important; max-width: 100%; object-fit: contain; } @media (max-width: 767px) { .header-main-wrap .logo img { height: 34px !important; } } /* ========================================================================== RAGGIO DEI BORDI UNIFORME — 23/09/2026 -------------------------------------------------------------------------- Prima c'erano sette raggi diversi in una sola pagina: 2, 3, 4, 6, 8, 12 e 15px. Uniformati su un unico token. NON toccati di proposito: - i cerchi (border-radius 50%): avatar, icone social, pallini - le pillole (border-radius 30px): badge "In vendita", etichette Non sono incoerenze, sono forme volute: arrotondarle a 8px le rovinerebbe. Per cambiare il raggio di tutto il resto basta modificare --vale-raggio qui sotto. ========================================================================== */ :root { --vale-raggio: 8px; } /* contenitori e schede */ .item-wrap, .property-item, .banner-image-module, .ti-inner, .card, .widget-wrap, .agent-wrap, .blog-post-wrap, .listing-tools-wrap select, .houzez-elementor-widget .item-wrap { border-radius: var(--vale-raggio) !important; } /* immagini e media */ .item-wrap img, .property-item img, .banner-image-module img, .elementor-widget-image img, .wp-post-image, .blog-post-wrap img, .agent-wrap img, figure.wp-block-image img { border-radius: var(--vale-raggio); } /* pulsanti e campi — escluse le pillole */ .btn:not(.px-2):not(.rounded-pill), .elementor-button, .form-control, .bootstrap-select .dropdown-toggle, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], textarea, select { border-radius: var(--vale-raggio) !important; } /* restanti a 4px/3px trovati sull'archivio immobili: overlay immagine, badge di stato, pulsantini sulle schede, frecce carosello */ .hover-effect, .label-status, .item-tool-preview, .item-tool-favorite, .houzez_compare, .item-tools span, .slick-arrow, .slick-slide img { border-radius: var(--vale-raggio) !important; } /* le forme volute restano tali */ .ti-platform-icon, .ti-profile-img, .ti-profile-img img, [class*="rounded-circle"], .rounded-pill, .btn.px-2 { border-radius: 50em !important; } .ti-profile-img, .ti-profile-img img, .ti-platform-icon { border-radius: 50% !important; } /* ========================================================================== PAGINA FUCINA TALENTI — riscritta il 23/09/2026 -------------------------------------------------------------------------- Allineata ai pattern visivi reali del sito, rilevati su Chi siamo e Il Metodo Vale: · hero: occhiello + titolo + testo, poi immagine larga con raggio 8px · sezioni a due colonne: immagine quadrata + testo, alternate di lato · bande a tutta larghezza a colori pieni: rosa #DB5679 e scuro #21242E · box immagine sempre con raggio 8px e object-fit cover Tipografia (identica al resto del sito): occhiello Montserrat 14px 600 uppercase ls 6px titoli Lora 38px 400 line-height 1.5 corpo Poppins 18px 400 line-height 1.85 ls 0.5px ========================================================================== */ :root { --vale-font-display: "Lora", Georgia, serif; --vale-font-corpo: "Poppins", -apple-system, sans-serif; --vale-font-occhiello: "Montserrat", sans-serif; --vale-testo: #1f2a33; --vale-scuro: #21242e; } /* --- impianto a bande: la sezione va a tutta larghezza, il contenuto resta dentro 1200px come nel resto del sito --- */ .ft-hero, .ft-banda { width: 100%; font-family: var(--vale-font-corpo); color: var(--vale-testo); padding: 76px 0; } .ft-hero { padding: 84px 0 0; } .ft-wrap { max-width: 1320px; margin-inline: auto; padding-inline: 20px; box-sizing: border-box; } .ft-banda-chiara { background: #f5f7f8; } .ft-banda-rosa { background: var(--vale-rosa); color: #fff; } .ft-banda-scura { background: var(--vale-scuro); color: #fff; } /* --- occhiello --- */ .ft-occhiello { font-family: var(--vale-font-occhiello); font-size: 14px; font-weight: 600; letter-spacing: 6px; text-transform: uppercase; color: var(--vale-rosa); margin: 0 0 18px; line-height: 1.3; } .ft-occhiello-chiaro { color: #fff; } /* --- titoli --- */ .ft-titolo, .ft-banda h2 { font-family: var(--vale-font-display); font-size: 38px; font-weight: 400; line-height: 1.5; color: inherit; margin: 0 0 24px; } .ft-titolo { color: var(--vale-testo); } .ft-sottotitolo-sezione { font-family: var(--vale-font-corpo); font-size: 28px; font-weight: 400; line-height: 1.25; color: inherit; margin: 44px 0 18px; } /* --- corpo --- */ .ft-sottotitolo, .ft-intro, .ft-nota, .ft-card p, .ft-meta p, .ft-riquadro p, .ft-step p, .ft-offerta p, .ft-formato-item p { font-family: var(--vale-font-corpo); font-size: 18px; font-weight: 400; line-height: 1.85; letter-spacing: .5px; } .ft-sottotitolo { max-width: 42em; margin: 0 0 32px; color: var(--vale-testo); } .ft-sottotitolo-chiaro { color: rgba(255,255,255,.82); } .ft-intro { max-width: 44em; margin: 0 0 20px; } .ft-nota { font-size: 16px; color: #5d6670; max-width: 44em; margin: 0; } .ft-nota-chiara { color: rgba(255,255,255,.7); margin-top: 32px; } .ft-card p, .ft-step p, .ft-meta p, .ft-offerta p, .ft-formato-item p { font-size: 16px; line-height: 1.75; } /* --- bottoni --- */ .ft-azioni { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 0; } .ft-btn { display: inline-block; font-family: var(--vale-font-corpo); border-radius: var(--vale-raggio); text-decoration: none; transition: background-color .15s ease, color .15s ease; } .ft-btn:hover { text-decoration: none; } .ft-btn-primario { background: var(--vale-rosa); color: #fff; font-size: 15px; font-weight: 500; padding: 16px 32px; } .ft-btn-primario:hover { background: #c94769; color: #fff; } .ft-btn-secondario { background: transparent; color: var(--vale-scuro); border: 1px solid var(--vale-scuro); font-size: 13px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; padding: 16px 24px; } .ft-btn-secondario:hover { background: var(--vale-scuro); color: #fff; } .ft-btn-chiaro { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); font-size: 13px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; padding: 16px 24px; } .ft-btn-chiaro:hover { background: #fff; color: var(--vale-scuro); } /* --- immagini --- */ .ft-hero-img { max-width: 1200px; margin: 56px auto 0; padding-inline: 20px; } .ft-hero-img img { width: 100%; height: clamp(260px, 34vw, 430px); object-fit: cover; border-radius: var(--vale-raggio); display: block; } .ft-figura { margin: 0; } /* Altezza esplicita invece di aspect-ratio: il lazy load di Houzez riscrive gli attributi width/height dell'immagine e l'aspect-ratio non reggeva, l'immagine veniva alta 785px. Un'altezza fissa vince sempre e blocca anche lo spostamento del layout mentre l'immagine carica. */ .ft-figura img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--vale-raggio); display: block; } /* --- due colonne: immagine + testo --- */ .ft-due { display: grid; grid-template-columns: minmax(0,540px) 1fr; gap: 60px; align-items: center; } .ft-due-invertita { grid-template-columns: 1fr minmax(0,540px); } .ft-due-testo > :first-child { margin-top: 0; } /* --- mete --- */ .ft-mete { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 32px; margin: 36px 0; } .ft-meta-num { display: block; font-family: var(--vale-font-display); font-size: 38px; color: var(--vale-rosa); line-height: 1.2; margin-bottom: 6px; } .ft-meta p { margin: 0; } /* --- formato academy, dentro la banda scura --- */ .ft-formato { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 36px; margin-top: 8px; } .ft-formato-num { display: block; font-family: var(--vale-font-display); font-size: 28px; color: var(--vale-rosa); line-height: 1.2; margin-bottom: 8px; } .ft-formato-item h3 { font-family: var(--vale-font-corpo); font-size: 20px; font-weight: 500; color: #fff; margin: 0 0 10px; line-height: 1.3; } .ft-formato-item p { margin: 0; color: rgba(255,255,255,.72); } /* --- cosa imparerai --- */ .ft-griglia { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 48px; margin: 32px 0; } .ft-card h4 { font-family: var(--vale-font-corpo); font-size: 20px; font-weight: 500; color: var(--vale-testo); margin: 0 0 12px; line-height: 1.35; padding-top: 18px; border-top: 2px solid var(--vale-rosa); } .ft-card p { margin: 0; color: #4a5560; } .ft-riquadro { background: #f5f7f8; border-radius: var(--vale-raggio); padding: 40px; margin-top: 48px; } .ft-riquadro h3 { font-family: var(--vale-font-display); font-size: 28px; font-weight: 400; margin: 0 0 14px; color: var(--vale-testo); } .ft-riquadro p { margin: 0 0 14px; } .ft-riquadro p:last-child { margin-bottom: 0; } /* --- cosa offriamo, dentro la banda rosa --- */ .ft-offerte { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 44px 56px; margin-top: 44px; } .ft-offerta-num { display: block; font-family: var(--vale-font-display); font-size: 28px; color: rgba(255,255,255,.55); line-height: 1.2; margin-bottom: 8px; } .ft-offerta h3 { font-family: var(--vale-font-corpo); font-size: 20px; font-weight: 500; color: #fff; margin: 0 0 10px; line-height: 1.3; } .ft-offerta p { margin: 0; color: rgba(255,255,255,.85); } /* --- posizioni aperte --- */ .ft-posizioni { margin-top: 36px; border-top: 1px solid #dfe4e7; } .ft-posizione { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px 4px; border-bottom: 1px solid #dfe4e7; text-decoration: none; transition: padding-left .15s ease; } .ft-posizione:hover { padding-left: 14px; text-decoration: none; } .ft-posizione-nome { flex: 1 1 220px; font-family: var(--vale-font-corpo); font-size: 22px; color: var(--vale-testo); } .ft-posizione:hover .ft-posizione-nome { color: var(--vale-rosa); } .ft-posizione-sede { color: #6b7280; font-size: 16px; } .ft-posizione-azione { font-family: var(--vale-font-occhiello); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--vale-rosa); white-space: nowrap; } /* --- processo --- */ .ft-step { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 34px; } .ft-step li { display: flex; gap: 24px; align-items: flex-start; } .ft-step li > div { min-width: 0; } .ft-step-num { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--vale-rosa); color: var(--vale-rosa); display: flex; align-items: center; justify-content: center; font-family: var(--vale-font-display); font-size: 20px; } .ft-step h3 { font-family: var(--vale-font-corpo); font-size: 20px; font-weight: 500; margin: 8px 0 10px; color: var(--vale-testo); } .ft-step p, .ft-step a { overflow-wrap: anywhere; } .ft-step p { margin: 0; color: #4a5560; } /* --- chiusura --- */ .ft-chiusura h2 { color: #fff; } .ft-contatti { margin-top: 40px; font-size: 16px; color: rgba(255,255,255,.6); overflow-wrap: anywhere; } .ft-contatti a { color: rgba(255,255,255,.9); text-decoration: underline; } /* --- mobile --- */ @media (max-width: 900px) { .ft-due, .ft-due-invertita { grid-template-columns: 1fr; gap: 36px; } .ft-due-invertita .ft-figura { order: -1; } .ft-figura img { height: 300px; } } @media (max-width: 767px) { .ft-hero, .ft-banda { padding: 52px 0; } .ft-hero { padding: 56px 0 0; } .ft-wrap { padding-inline: 18px; } .ft-hero-img { margin-top: 40px; padding-inline: 18px; } .ft-titolo, .ft-banda h2 { font-size: 30px; } .ft-sottotitolo-sezione, .ft-riquadro h3 { font-size: 24px; } .ft-sottotitolo, .ft-intro { font-size: 17px; } .ft-azioni .ft-btn { flex: 1 1 100%; text-align: center; } .ft-riquadro { padding: 28px 22px; } .ft-posizione { flex-direction: column; align-items: flex-start; gap: 8px; } .ft-posizione-nome { font-size: 20px; } } /* Il tema applica text-transform:capitalize a tutti i titoli del sito ("Il Metodo Vale", "Un Mestiere Fatto Di Persone"). In italiano i titoli si scrivono in stile frase: qui resta disattivato per scelta. Il resto del sito non viene toccato. */ .page-id-20194 h1, .page-id-20194 h2, .page-id-20194 h3, .page-id-20194 h4 { text-transform: none !important; } /* La barra di ricerca immobili di Houzez viene inserita sopra il contenuto di ogni pagina. Su una pagina di carriere non ha senso. */ .page-id-20194 .advanced-search-nav { display: none !important; } /* --- widget recensioni Google (Trustindex) e residui Houzez --- Il plugin applica i propri raggi (12px sulle schede, 15px sulle frecce, 6px sui tooltip) con specificita' alta: servono selettori piu' forti. Le foto dei recensori restano tonde: hanno raggio 30px su 60px di lato, che e' gia' un cerchio, non un'incoerenza. */ html body div.ti-inner, html body div.ti-review-item, html body .ti-verified-tooltip, .item-header, .item-header-1, img.img-fluid { border-radius: var(--vale-raggio) !important; } /* le foto dei recensori sono avatar: tonde, come le altre del sito */ html body .ti-review-item img.ti-profile-img, html body .ti-profile-img img, html body .ti-review-item .ti-profile-img { border-radius: 50% !important; } /* ============================================================ FUCINA TALENTI — respiro nelle bande scure e copertine video ============================================================ */ .ft-banda-scura { padding: 104px 0; } .ft-banda-scura .ft-offerte, .ft-banda-scura .ft-formato { gap: 52px 64px; margin-top: 52px; } .ft-banda-scura .ft-offerta p, .ft-banda-scura .ft-formato-item p { line-height: 1.85; } .ft-banda-scura h2 { margin-bottom: 8px; } @media (max-width: 900px) { .ft-griglia, .ft-offerte { grid-template-columns: 1fr; } .ft-banda-scura { padding: 64px 0; } .ft-banda-scura .ft-offerte, .ft-banda-scura .ft-formato { gap: 36px; margin-top: 36px; } } /* Copertina video: immagine + pulsante, l'iframe si carica al clic */ .ft-video { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; background: #0E1418; cursor: pointer; } .ft-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ft-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ft-video::after { content: ''; position: absolute; inset: 0; background: rgba(15,22,28,.28); transition: background .25s; } .ft-video:hover::after { background: rgba(15,22,28,.12); } .ft-video.is-attivo::after { display: none; } .ft-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 76px; height: 76px; border-radius: 50%; background: #DB5679; display: grid; place-items: center; z-index: 2; transition: transform .25s; } .ft-video:hover .ft-video-play { transform: translate(-50%,-50%) scale(1.08); } .ft-video-play::before { content: ''; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; margin-left: 5px; } .ft-video-cap { margin: 14px 0 0; font-size: 14px; line-height: 1.55; opacity: .72; } /* etichetta form in italiano */ label[for="form-field-message"] { font-size: 0 !important; } label[for="form-field-message"]::after { content: "Messaggio"; font-size: 16px; font-weight: inherit; } /* ========================================================================== SEZIONE SQUADRA (Chi siamo) — 30/09/2026 -------------------------------------------------------------------------- Prima le sei persone erano sei widget image-box clonati dal blocco che ne conteneva due: con sei elementi il flexbox li comprimeva, le foto si riducevano a medaglioni da 45px in cui i visi non si distinguevano, i due originali restavano piu' grandi degli altri quattro e le colonne avevano larghezze diverse. Qui la sezione e' rifatta come griglia, con ritagli e tipografia identici per tutti. Un livello solo, dal 06/10/2026: prima Bruno ed Elisabetta avevano una descrizione scritta e stavano in una griglia a parte, piu' larga. Le descrizioni sono state tolte e le nove schede sono tutte uguali, quindi la griglia e' una sola. Se un giorno si riscrivono le biografie servira' di nuovo un secondo livello: non basta rimettere il testo dentro la scheda, perche' in una colonna da 400px diventa una colonna di parole. Le foto sono i ritratti del servizio fotografico, serviti nel taglio quadrato 780x780 di Houzez: pesano poco e bastano anche sugli schermi ad alta densita'. ========================================================================== */ /* Il rientro laterale di 30px non e' un numero scelto a occhio: misurato il 30/09/2026, in questa pagina i contenuti delle altre sezioni cominciano a 40px dal bordo, perche' ognuna e' fatta di tre contenitori Elementor annidati con 10px di padding ciascuno. Questa sezione e' un contenitore solo, che di padding ne ha 10: i 30 qui sotto pareggiano il conto e la allineano al resto della pagina. Se un giorno cambiasse il padding dei contenitori, questo valore va rimisurato. */ .vt-squadra { width: 100%; padding: 72px 30px; } .vt-occhiello { font-family: "Montserrat", -apple-system, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--vale-rosa); margin: 0 0 12px; } .vt-titolo { font-family: var(--vale-font-titoli); font-size: 38px; line-height: 1.2; color: #1F2A33; margin: 0 0 40px; } .vt-griglia { display: grid; gap: 28px; /* stretch, non start: cosi' le card di una stessa riga arrivano tutte alla stessa altezza e i rettangoli chiari non finiscono a quote diverse. */ align-items: stretch; } .vt-card { display: flex; flex-direction: column; } .vt-card { margin: 0; background: #F5F7F8; border-radius: 8px; overflow: hidden; } /* Il ritaglio quadrato viene dal centro dell'originale, che e' orizzontale: alzando il punto di messa a fuoco i visi restano nel terzo alto e non vengono tagliati in alto. */ .vt-foto { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 22%; } .vt-testo { padding: 20px 22px 24px; } .vt-nome { font-family: var(--vale-font-titoli); font-size: 21px; line-height: 1.25; color: #1F2A33; margin: 0 0 6px; } .vt-ruolo { font-family: "Montserrat", -apple-system, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vale-blu); margin: 0; } @media (max-width: 767px) { /* Sul telefono i contenitori annidati rientrano di meno: le altre sezioni partono da 20px invece che da 40, quindi qui bastano 10px sopra ai 10 del contenitore. Misurato a 375px il 30/09/2026. */ .vt-squadra { padding: 52px 10px; } .vt-titolo { font-size: 30px; margin-bottom: 28px; } .vt-griglia { gap: 20px; } .vt-nome { font-size: 19px; } /* Nelle due colonne strette del telefono "Alessandra Raimondi" e "Marco Di Bartolo" spezzavano su tre righe e il ruolo su due: qui rientrano. */ .vt-griglia-resto .vt-nome { font-size: 17px; } .vt-griglia-resto .vt-ruolo { font-size: 11px; letter-spacing: .04em; } .vt-griglia-resto .vt-testo { padding: 16px 14px 18px; } } /* ========================================================================== MAIUSCOLE NEI TITOLI — 30/09/2026 -------------------------------------------------------------------------- Houzez stampa in pagina una regola che mette text-transform: capitalize su tutti gli h1-h6. In inglese e' una convenzione tipografica; in italiano e' un errore di ortografia, e si leggeva "Un Mestiere Fatto Di Persone", "Le Domande Che Ci Fanno Piu' Spesso". Nel contenuto i titoli sono scritti correttamente ("Un mestiere fatto di persone"): verificato su home, chi siamo, metodo vale e contatti prima di togliere la regola, perche' se fossero stati scritti in minuscolo contando sul capitalize sarebbero diventati tutti minuscoli. Il selettore ha "body" davanti solo per avere un peso maggiore della regola di Houzez, che usa i soli elementi. Gli occhielli e i pulsanti in maiuscolo non sono toccati: hanno classi proprie, che pesano comunque di piu'. ========================================================================== */ body h1, body h2, body h3, body h4, body h5, body h6, body .item-title, body .page-title-mobile { text-transform: none; } /* ========================================================================== ICONA DEI CLUSTER SULLA MAPPA — 30/09/2026 -------------------------------------------------------------------------- Ogni pagina del sito caricava questa icona da demo38.houzez.co, cioe' dal sito dimostrativo del tema: un indirizzo di terzi, su cui non abbiamo controllo e che un giorno puo' sparire o cambiare. Il file identico (2.483 byte) e' gia' dentro il tema installato qui, quindi basta puntarci. L'indirizzo della demo arriva da un'opzione salvata nel database quando il sito e' stato creato dai contenuti dimostrativi; qui viene semplicemente scavalcato. ========================================================================== */ .houzez-osm-cluster { background-image: url(../houzez/img/map/cluster-icon.png); } /* ========================================================================== SQUADRA ESTESA (pagina Agenti) — 30/09/2026 -------------------------------------------------------------------------- Versione distesa della squadra: ritratto a sinistra e scheda a destra, una persona per riga. Su Chi siamo la stessa squadra sta in una griglia compatta (classi vt-): li' serve un colpo d'occhio, qui c'e' spazio per leggere. Le foto sono le stesse del servizio fotografico, nel taglio quadrato 780x780 di Houzez. ========================================================================== */ .vts-squadra { width: 100%; padding: 72px 30px; } .vts-occhiello { font-family: "Montserrat", -apple-system, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vale-rosa); margin: 0 0 12px; } .vts-titolo { font-family: var(--vale-font-titoli); font-size: 38px; line-height: 1.2; color: #1F2A33; margin: 0 0 16px; } .vts-intro { font-family: var(--vale-font-testo); font-size: 18px; line-height: 1.7; color: #1F2A33; max-width: 68ch; margin: 0 0 48px; } .vts-elenco { display: flex; flex-direction: column; gap: 28px; } .vts-persona { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; /* stretch, non center: con i testi di lunghezza diversa una foto centrata lascia bande grigie sopra e sotto, e le schede sembrano sbagliate. */ align-items: stretch; background: #F5F7F8; border-radius: 8px; overflow: hidden; } .vts-ritratto { margin: 0; min-height: 300px; } .vts-ritratto img { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: center 22%; } .vts-scheda { padding: 28px 32px 28px 0; } .vts-nome { font-family: var(--vale-font-titoli); font-size: 26px; line-height: 1.25; color: #1F2A33; margin: 0 0 6px; } .vts-ruolo { font-family: "Montserrat", -apple-system, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vale-blu); margin: 0 0 14px; } .vts-testo { font-family: var(--vale-font-testo); font-size: 17px; line-height: 1.7; color: #1F2A33; max-width: 62ch; margin: 0; } .vts-contatti { margin-top: 40px; padding: 28px 32px; background: #21242E; border-radius: 8px; } .vts-contatti-titolo { font-family: var(--vale-font-titoli); font-size: 22px; color: #fff; margin: 0 0 8px; } .vts-contatti-riga { font-family: var(--vale-font-testo); font-size: 17px; line-height: 1.7; color: #fff; margin: 0; } .vts-contatti-riga a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px) { /* Sotto i 900px la colonna del testo scenderebbe a righe troppo corte: meglio ritratto sopra e scheda sotto. */ .vts-persona { grid-template-columns: minmax(0, 1fr); gap: 0; } .vts-ritratto { min-height: 0; } .vts-ritratto img { height: auto; min-height: 0; aspect-ratio: 16 / 10; object-position: center 25%; } .vts-scheda { padding: 24px 24px 28px; } } @media (max-width: 767px) { .vts-squadra { padding: 52px 10px; } .vts-titolo { font-size: 30px; } .vts-intro { font-size: 17px; margin-bottom: 32px; } .vts-nome { font-size: 22px; } .vts-contatti { padding: 24px 20px; } } /* ========================================================================== ELENCO IMMOBILI onOffice SU FONDO SCURO — 01/10/2026 -------------------------------------------------------------------------- La lista di onOffice ha preso il posto del carosello di Houzez nella sezione scura (#21242E) della pagina Immobili. Il template del plugin scrive in grigio scuro, pensato per fondo chiaro: senza queste regole i titoli degli immobili erano praticamente illeggibili. Le regole valgono solo dentro quel contenitore (elementor-element-d5f46ad): se un domani la stessa vista finisce su fondo chiaro, torna ai suoi colori. ========================================================================== */ .elementor-element-d5f46ad .oo-listframe, .elementor-element-d5f46ad .oo-listobject, .elementor-element-d5f46ad .oo-listobjectwrap, .elementor-element-d5f46ad .oo-listtitle, .elementor-element-d5f46ad .oo-listinfo, .elementor-element-d5f46ad .oo-listinfotable, .elementor-element-d5f46ad .oo-listinfotable td, .elementor-element-d5f46ad .oo-listinfotable th { color: #fff; } .elementor-element-d5f46ad .oo-listobject a, .elementor-element-d5f46ad .oo-detailslink, .elementor-element-d5f46ad .oo-detailslink a { color: #fff; } /* Il titolo del template ("Panoramica degli immobili") ripete quello che la pagina dice gia' sopra, in italiano migliore: "Immobili selezionati a Palermo". Due titoli uno sull'altro sembrano un errore di montaggio. */ .elementor-element-d5f46ad .oo-listheadline { display: none; } /* Il pulsante di dettaglio deve staccarsi dal fondo scuro. */ .elementor-element-d5f46ad .oo-details-btn, .elementor-element-d5f46ad .oo-details-btn a { color: #fff; border-color: rgba(255, 255, 255, .45); } .elementor-element-d5f46ad .oo-details-btn:hover, .elementor-element-d5f46ad .oo-details-btn a:hover { color: #21242E; background: #fff; border-color: #fff; } /* Riga di separazione fra i dati: sul chiaro era un grigio tenue, qui sparisce. */ .elementor-element-d5f46ad .oo-listinfotable tr { border-color: rgba(255, 255, 255, .18); } /* -------------------------------------------------------------------------- Il prezzo in evidenza nelle card dell'elenco 01/10/2026 -------------------------------------------------------------------------- Nella card il prezzo e' l'ultimo dato, dopo tipologia, citta', superficie, locali e bagni: e' pero' la prima cosa che una persona cerca in un annuncio. Qui viene ingrandito e staccato dal resto. Il selettore si appoggia alla posizione (ultimo campo) e non a una classe, perche' il template non ne assegna una al prezzo. Regge entrambe le forme di card osservate - sei righe, oppure cinque quando manca la superficie - dato che in tutte e due il prezzo resta l'ultimo. Se un domani si aggiunge un campo DOPO il prezzo, questa regola va rifatta. -------------------------------------------------------------------------- */ .elementor-element-d5f46ad .oo-listinfotable > div:last-child { font-size: 21px; font-weight: 600; line-height: 1.3; padding-top: 10px; } .elementor-element-d5f46ad .oo-listinfotable > div:nth-last-child(2) { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; padding-top: 14px; } /* ========================================================================== SCHEDA IMMOBILE onOffice — 01/10/2026 -------------------------------------------------------------------------- Il markup lo genera il plugin e non si puo' cambiare: qui si lavora solo su larghezze, allineamenti e proporzioni. Cosa c'era, misurato prima di intervenire: - tre allineamenti diversi nella stessa pagina (titolo a 74px, galleria e dati a 15px, mentre il resto del sito parte da 40px); - la fotografia, che su una scheda immobiliare decide se la persona continua a leggere, in un riquadro da 727x400 piu' piccolo del testo che le sta sotto; - la tabella dei dati su quattro colonne da 182px, dove le etichette lunghe ("Tipologia di commercializzazione") vanno a capo e sfalsano la griglia; - la colonna del contatto larga 252px, con l'indirizzo che va a capo e l'email tagliata, lunga 2.400px accanto alla descrizione; - la descrizione in una colonna da 727px per 1.252px di altezza: un muro. ========================================================================== */ /* La scheda entra nella stessa griglia del resto del sito: stessa larghezza massima delle altre sezioni e contenuto che comincia dove comincia altrove. */ .oo-detailview { max-width: 1320px; margin: 0 auto; padding: 0 25px; align-items: flex-start; } /* Il titolo aveva un rientro suo e partiva piu' a destra di tutto il resto. */ .oo-detailview .oo-detailsheadline { width: 100%; margin: 0; padding: 24px 15px 8px; } .oo-detailview .oo-detailsheadline h1 { font-family: var(--vale-font-titoli); font-size: 34px; line-height: 1.2; margin: 0 0 6px; } /* Alla colonna principale un po' piu' di spazio, alla scheda contatto quanto basta perche' indirizzo ed email non vadano a capo. */ .oo-details-main { flex: 1 1 64%; min-width: 0; } .oo-details-sidebar { flex: 0 1 320px; min-width: 280px; } /* La fotografia e' il contenuto principale: qui respira. L'altezza va data anche ai contenitori dello slider, altrimenti restano all'altezza calcolata in partenza e l'immagine viene tagliata in basso. */ .oo-detailsgallery, .oo-detailsgallery .slick-list, .oo-detailsgallery .slick-track, .oo-detailsgallery .oo-detailspicture, .oo-detailsgallery .oo-picture { height: 520px; } .oo-detailsgallery .oo-picture img, .oo-detailsgallery .oo-responsive-image { height: 520px; object-fit: cover; width: 100%; } /* Dati su due coppie invece di quattro: le etichette lunghe stanno su una riga sola e la griglia non si sfalsa piu'. */ .oo-detailstable .oo-details-fact__label, .oo-detailstable .oo-details-fact__value { width: 50%; flex: 0 0 50%; padding: 12px 0; border-bottom: 1px solid #E6E9EA; } .oo-detailstable .oo-details-fact__label { font-weight: 600; padding-right: 16px; } /* Testo di lettura: oltre una certa lunghezza di riga l'occhio perde il segno. */ .oo-detailsfreetext { max-width: 68ch; } .oo-detailsfreetext p { line-height: 1.75; } /* La scheda contatto resta a portata mentre si scorre la descrizione, invece di accompagnarla per duemila pixel. */ .oo-details-sidebar .oo-detailscontactperson, .oo-details-sidebar > div:first-child { position: sticky; top: 100px; background: #F5F7F8; border-radius: 8px; padding: 22px 20px; } .oo-details-sidebar a { word-break: break-word; } @media (max-width: 900px) { /* Sotto i 900px le due colonne si impilano: la scheda contatto va in fondo, dopo i dati, e smette di essere appiccicata. */ .oo-details-main, .oo-details-sidebar { flex: 1 1 100%; min-width: 0; } .oo-details-sidebar .oo-detailscontactperson, .oo-details-sidebar > div:first-child { position: static; } .oo-detailsgallery, .oo-detailsgallery .slick-list, .oo-detailsgallery .slick-track, .oo-detailsgallery .oo-detailspicture, .oo-detailsgallery .oo-picture, .oo-detailsgallery .oo-picture img, .oo-detailsgallery .oo-responsive-image { height: 360px; } } @media (max-width: 767px) { .oo-detailview { padding: 0 10px; } .oo-detailview .oo-detailsheadline h1 { font-size: 26px; } .oo-detailsgallery, .oo-detailsgallery .slick-list, .oo-detailsgallery .slick-track, .oo-detailsgallery .oo-detailspicture, .oo-detailsgallery .oo-picture, .oo-detailsgallery .oo-picture img, .oo-detailsgallery .oo-responsive-image { height: 260px; } /* A 375px due colonne da 50% darebbero etichette di tre parole incolonnate: meglio etichetta sopra e valore sotto. */ .oo-detailstable .oo-details-fact__label, .oo-detailstable .oo-details-fact__value { width: 100%; flex: 0 0 100%; } .oo-detailstable .oo-details-fact__label { border-bottom: 0; padding-bottom: 0; } } /* ========================================================================== BARRA DI RICERCA DI HOUZEZ — 01/10/2026 -------------------------------------------------------------------------- Toglie la barra che il tema stampa sotto l'intestazione. Era in inglese ("Enter Keyword...", "Search", "Clear"), non configurata, e pescava dal catalogo di Houzez, che e' vuoto: la ricerca vera sara' quella di onOffice. Per rimetterla basta togliere questo blocco. ========================================================================== */ #desktop-header-search, .advanced-search-nav { display: none; } /* ========================================================================== A CAPO DEI TESTI — 01/10/2026 -------------------------------------------------------------------------- Misurato il 01/10/2026 su telefono (375 px) riga per riga, con le posizioni reali delle parole: 46 a capo sbagliati sulle pagine principali. Due tipi. 1. La parola orfana: l'ultima riga di un titolo che contiene una parola sola. "Pagare il Mutuo Senza Conto Corrente: E' / Possibile?" oppure "...incorporano taglio / Bce". 2. La riga che finisce su una preposizione o un articolo, staccandolo dal nome che regge: "Come aumentare il / valore percepito". Si risolve dicendo al browser come distribuire le righe, non mettendo spazi unificatori nei testi: quelli non si adattano alla larghezza dello schermo e su display stretti produrrebbero righe che sbordano. balance distribuisce le righe in modo uniforme ed e' pensato per i titoli (il browser lo applica fino a poche righe, poi lascia perdere da solo: sui paragrafi lunghi non avrebbe senso). pretty lascia il testo com'e' ma impedisce che l'ultima riga resti con una parola sola. Dove non e' supportato il testo resta come adesso: nessuna regressione. ========================================================================== */ h1, h2, h3, h4, h5, h6, .elementor-heading-title, .entry-title, .item-title, .widget-title { text-wrap: balance; } p, li, .elementor-widget-text-editor, .elementor-text-editor { text-wrap: pretty; } /* ========================================================================== CAROSELLO IMMOBILI — 02/10/2026 -------------------------------------------------------------------------- Vista a scorrimento orizzontale per la sezione "Immobili selezionati" della home, alimentata da onOffice tramite il template onoffice-theme/templates/estate/carosello.php. Lo scorrimento e' quello nativo del browser: scroll-snap allinea le schede, le frecce chiamano scrollBy. Niente librerie, niente dipendenze, e con il dito su telefono funziona da solo. Se il JavaScript non parte, resta una fila di schede che si scorre comunque: non si rompe niente. Quante schede per volta: una su telefono, due su tablet, tre da 1100px. ========================================================================== */ .vale-carosello { position: relative; } .vale-carosello-pista { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 8px; margin: 0 -2px; } .vale-carosello-pista::-webkit-scrollbar { display: none; } .vale-carosello-pista:focus-visible { outline: 2px solid var(--vale-blu, #0e559e); outline-offset: 4px; } .vale-card { flex: 0 0 calc(100% - 8px); scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vale-bordo, #dce0e0); border-radius: var(--vale-raggio, 8px); box-shadow: 0 1px 2px rgba(31, 42, 51, .06), 0 8px 24px rgba(31, 42, 51, .07); overflow: hidden; min-width: 0; } @media (min-width: 640px) { .vale-card { flex-basis: calc(50% - 10px); } } @media (min-width: 1100px) { .vale-card { flex-basis: calc(33.333% - 14px); } } .vale-card-foto { display: block; aspect-ratio: 4 / 3; background: #eef1f3; overflow: hidden; } .vale-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .vale-card:hover .vale-card-foto img { transform: scale(1.03); } .vale-card-senza-foto { display: block; width: 100%; height: 100%; background: #eef1f3; } .vale-card-corpo { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; min-width: 0; } .vale-card-titolo { font-family: var(--vale-font-display, "Lora", Georgia, serif); font-size: 18px; font-weight: 500; line-height: 1.3; margin: 0 0 12px; text-wrap: balance; } .vale-card-titolo a { color: var(--vale-testo, #1f2a33); text-decoration: none; } .vale-card-titolo a:hover { color: var(--vale-blu, #0e559e); } .vale-card-dati { margin: 0 0 16px; display: grid; gap: 6px; } .vale-card-riga { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14px; } .vale-card-riga dt { font-family: var(--vale-font-occhiello, "Montserrat", sans-serif); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6a7680; margin: 0; flex: none; } .vale-card-riga dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; } /* L'ultimo dato configurato e' quasi sempre il prezzo: gli diamo peso. */ .vale-card-riga:last-child dd { font-weight: 500; color: var(--vale-blu, #0e559e); } .vale-card-link { margin-top: auto; align-self: flex-start; font-family: var(--vale-font-occhiello, "Montserrat", sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vale-blu, #0e559e); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .vale-card-link:hover { color: var(--vale-rosa, #db5679); } .vale-carosello-freccia { position: absolute; top: calc(50% - 60px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--vale-testo, #1f2a33); border: 1px solid var(--vale-bordo, #dce0e0); box-shadow: 0 2px 10px rgba(31, 42, 51, .14); display: grid; place-items: center; cursor: pointer; z-index: 2; transition: background .15s, color .15s, opacity .15s; } .vale-carosello-freccia:hover { background: var(--vale-blu, #0e559e); color: #fff; border-color: var(--vale-blu, #0e559e); } .vale-carosello-freccia:focus-visible { outline: 2px solid var(--vale-blu, #0e559e); outline-offset: 3px; } .vale-carosello-freccia[disabled] { opacity: 0; pointer-events: none; } .vale-carosello-prec { left: -14px; } .vale-carosello-succ { right: -14px; } /* Su schermo stretto le frecce ai lati coprirebbero le foto, ma servono lo stesso: non tutti scoprono che la fila si scorre col dito. Quindi scendono sotto il carosello, affiancate e centrate, dove non danno fastidio e si vedono. Lo scorrimento col dito resta. */ @media (max-width: 780px) { .vale-carosello { padding-bottom: 60px; } .vale-carosello-freccia { position: absolute; top: auto; bottom: 0; transform: none; width: 46px; height: 46px; } .vale-carosello-prec { left: 50%; margin-left: -52px; } .vale-carosello-succ { right: 50%; margin-right: -52px; } /* Qui la freccia spenta non sparisce, resta visibile ma inerte: se sparisse, quella rimasta si ritroverebbe spostata dal centro. */ .vale-carosello-freccia[disabled] { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .vale-carosello-pista { scroll-behavior: auto; } .vale-card-foto img { transition: none; } } /* ========================================================================== MODULO DI RICERCA IMMOBILI — 02/10/2026 -------------------------------------------------------------------------- Il plugin onOffice genera il modulo senza quasi nessuno stile, e sulla pagina Immobili cade dentro la sezione scura: le etichette, scritte in grigio per fondo chiaro, sparivano del tutto. Struttura generata dal plugin (verificata in pagina il 02/10/2026): .oo-searchform > form > .oo-searchformfieldwrap .oo-searchformfield > label[for] + select (Tipo di immobile: l'etichetta sta a fianco, e il select viene sostituito a video da Tom Select, che crea .ts-wrapper > .ts-control) .oo-searchformfield > label > input (Citta': qui invece l'etichetta avvolge il campo) .oo-searchformfield > fieldset.oo-searchrange > legend + due label .oo-searchformfield > input[type=submit] Il pulsante sta dentro la stessa griglia dei campi: e' il plugin a metterlo li', e tenercelo fa si' che si allinei da solo all'ultima riga. ========================================================================== */ .oo-searchform .oo-searchformfieldwrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 18px; align-items: end; } .oo-searchform .oo-searchformfield { min-width: 0; } /* Etichette: stesso maiuscoletto spaziato del resto del sito. */ .oo-searchform .oo-searchformfield > label, .oo-searchform .oo-searchrange legend { display: block; font-family: var(--vale-font-occhiello, "Montserrat", sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vale-testo, #1f2a33); margin: 0 0 7px; padding: 0; float: none; width: 100%; } .oo-searchform input[type="text"], .oo-searchform input[type="number"], .oo-searchform select:not(.tomselected) { display: block; width: 100%; margin-top: 7px; font-family: var(--vale-font-corpo, "Poppins", sans-serif); font-size: 15px; line-height: 1.4; color: var(--vale-testo, #1f2a33); background: #fff; border: 1px solid var(--vale-bordo, #dce0e0); border-radius: var(--vale-raggio, 8px); padding: 11px 13px; } .oo-searchform input:focus, .oo-searchform select:focus { outline: none; border-color: var(--vale-blu, #0e559e); box-shadow: 0 0 0 3px rgba(14, 85, 158, .18); } /* Intervallo di prezzo: "Da" e "Fino a" affiancati sotto la loro intestazione. Le due etichette interne sono un sottotitolo, non un titolo di campo: quindi niente maiuscoletto, altrimenti gridano piu' del campo stesso. */ .oo-searchform .oo-searchrange { border: 0; padding: 0; margin: 0; } .oo-searchform .oo-searchrange label { display: inline-block; width: calc(50% - 5px); vertical-align: top; font-family: var(--vale-font-corpo, "Poppins", sans-serif); font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6a7680; margin: 0; } .oo-searchform .oo-searchrange label + label { margin-left: 8px; } .oo-searchform input[type="submit"] { width: 100%; font-family: var(--vale-font-corpo, "Poppins", sans-serif); font-size: 15px; font-weight: 500; color: #fff; background: var(--vale-blu, #0e559e); border: 1px solid transparent; border-radius: var(--vale-raggio, 8px); padding: 13px 22px; cursor: pointer; transition: background .15s; } .oo-searchform input[type="submit"]:hover { background: #0a4179; } /* Il menu a scelta multipla e' costruito da Tom Select, che nasconde il