/* =========================================================================== sv-innesti.css — quello che la consegna non aveva e il tema richiede. La base (sv-base.css) è il design system della consegna, preso così com'è: nav, drawer mobile, footer, bottoni, card immobile, filtri, form e FAQ erano già completi e coerenti, e tenerne il vocabolario di classi significa che il markup dei template parla la stessa lingua del design. Qui stanno solo le aggiunte, riscritte sui token della consegna (--navy, --orange, --line… invece di --accent, --border…): 1. .reveal — sv-app.js dello scheletro se lo aspetta 2. skin WPForms — WPForms stampa markup proprio, va rivestito 3. .form-placeholder — mostrato finché il modulo non è collegato 4. .b-trattativa — il sesto badge, che la consegna non prevedeva 5. utility e accessibilità =========================================================================== */ /* ===== 1. Reveal on scroll ===== */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ===== 2. Skin WPForms ===== I selettori di WPForms sono molto specifici: senza !important non si vestono. */ .wpforms-container { margin: 0 !important; } .wpforms-container .wpforms-form { display: flex; flex-direction: column; gap: 16px; } .wpforms-container .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .wpforms-container .wpforms-field { padding: 0 !important; width: auto !important; } /* Nome e telefono affiancati, il resto a tutta larghezza. Il consenso privacy di WPForms NON è un wpforms-field-checkbox: il campo "Consenso GDPR" ha una classe sua (wpforms-field-gdpr-checkbox), quindi restava in mezza colonna e la sua frase andava a capo ogni due parole, sillabata. Si vedeva su contatti, cerchiamo e sulla scheda immobile. */ .wpforms-container .wpforms-field-select, .wpforms-container .wpforms-field-textarea, .wpforms-container .wpforms-field-email, .wpforms-container .wpforms-field-checkbox, .wpforms-container .wpforms-field-gdpr-checkbox { grid-column: 1 / -1; } .wpforms-container .wpforms-field-label { font-family: var(--head) !important; font-size: .88rem !important; font-weight: 600 !important; color: var(--ink-soft) !important; margin-bottom: 6px !important; } .wpforms-container .wpforms-required-label { color: var(--orange); } .wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"], .wpforms-container input[type="number"], .wpforms-container select, .wpforms-container textarea { background: #fff !important; border: 1px solid var(--line) !important; padding: .85em 1em !important; border-radius: var(--r) !important; font-size: .98rem !important; font-family: var(--body) !important; color: var(--ink) !important; outline: none !important; box-shadow: none !important; width: 100% !important; max-width: 100% !important; height: auto !important; transition: border-color .15s ease, box-shadow .15s ease; } .wpforms-container input:focus, .wpforms-container select:focus, .wpforms-container textarea:focus { border-color: var(--navy) !important; box-shadow: 0 0 0 4px var(--bg-navy-tint) !important; } .wpforms-container textarea { resize: vertical; min-height: 110px !important; } /* Stesso motivo del blocco qui sopra: il consenso GDPR ha una classe sua e va nominato accanto a .wpforms-field-checkbox in OGNI regola, non solo nella larghezza — altrimenti resta con la spunta e i margini di serie di WPForms. */ .wpforms-container .wpforms-field-checkbox ul, .wpforms-container .wpforms-field-gdpr-checkbox ul { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; } .wpforms-container .wpforms-field-checkbox li, .wpforms-container .wpforms-field-gdpr-checkbox li { display: flex; align-items: flex-start; gap: 10px; } .wpforms-container .wpforms-field-checkbox input[type="checkbox"], .wpforms-container .wpforms-field-gdpr-checkbox input[type="checkbox"] { width: auto !important; margin-top: 3px; accent-color: var(--navy); } .wpforms-container .wpforms-field-checkbox label, .wpforms-container .wpforms-field-gdpr-checkbox label { font-size: .86rem !important; color: var(--ink-soft) !important; font-weight: 400 !important; } /* L'etichetta "Privacy" del gruppo è ridondante: conta il testo dell'opzione */ .wpforms-container .wpforms-field-checkbox > .wpforms-field-label, .wpforms-container .wpforms-field-gdpr-checkbox > .wpforms-field-label { display: none; } /* Il link all'informativa dentro il consenso deve vedersi che è un link. */ .wpforms-container .wpforms-field-gdpr-checkbox label a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; } /* Il codice immobile era un campo di testo in sola lettura, vestito qui da una .sv-campo-bloccato. Ora è un campo `hidden` e non si vede più: le regole che lo vestivano sono state tolte con lui (vedi inc/immobili.php §8). */ .wpforms-container .wpforms-submit-container { padding: 0 !important; margin-top: 8px; } .wpforms-container button.wpforms-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--orange) !important; color: #fff !important; border: 1px solid transparent !important; border-radius: var(--pill) !important; padding: .95em 1.9em !important; font-size: 1rem !important; font-weight: 700 !important; font-family: var(--head) !important; transition: transform .15s ease, background .2s ease; } .wpforms-container button.wpforms-submit:hover { background: var(--orange-600) !important; transform: translateY(-2px); } .wpforms-container .wpforms-error, .wpforms-container label.wpforms-error { color: #c0392b !important; font-size: .8rem !important; } .wpforms-container .wpforms-confirmation-container-full { background: var(--orange-soft) !important; border: 1px solid var(--orange) !important; border-radius: var(--r-lg) !important; color: var(--ink) !important; padding: 24px !important; } @media (max-width: 640px) { .wpforms-container .wpforms-field-container { grid-template-columns: 1fr; } } /* ===== 3. Placeholder finché il modulo WPForms non è collegato ===== */ .form-placeholder { border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 24px; background: var(--bg-alt); } .form-placeholder-title { font-family: var(--head); font-weight: 700; font-size: .96rem; margin-bottom: 10px; } .form-placeholder-note { font-size: .86rem; color: var(--ink-soft); line-height: 1.6; } .form-placeholder-list { margin: 14px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: .86rem; color: var(--ink-soft); line-height: 1.5; } .form-placeholder-list li { padding-left: 14px; position: relative; } .form-placeholder-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: var(--pill); background: var(--orange); } /* I nomi dei campi elencati nel promemoria */ .form-placeholder-list .mono { font-family: ui-monospace, monospace; color: var(--ink); } /* template-parts/cta-form.php con aside=false: la pagina ha già la propria colonna di testo accanto al modulo (è il caso di #valuta su Cerchiamo). La regola è scritta ora perché quando .cta-form-wrap diventerà la griglia a due colonne della consegna, questa variante deve restare a colonna singola. */ .cta-form-wrap--solo { display: block; } /* ===== 4. Badge "In trattativa" ===== La consegna prevedeva quattro colori di badge (.b-novita, .b-venduto, .b-occasione, .b-affitto) ma la tassonomia "etichetta" ha sei termini. Cinque si accorpano per significato (vedi template-parts/card-immobile.php); "In trattativa" non ne aveva uno adatto: non è né venduto né un'occasione. */ .b-trattativa { background: var(--navy-soft); } /* ===== 5. Utility e accessibilità ===== */ .hidden { display: none !important; } .text-soft { color: var(--ink-soft); } .text-mute { color: var(--muted); } /* WordPress genera da sé markup con questa classe (titolo della paginazione, etichette del modulo di ricerca, "Vai al contenuto"): il testo è destinato ai soli screen reader e senza questa regola compariva a schermo — sopra la paginazione del blog si leggeva "Navigazione degli articoli". */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip-path: none; white-space: normal; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: var(--r-sm); box-shadow: var(--sh); } ::selection { background: var(--navy); color: #fff; } /* ===== 5-bis. Il drawer chiuso deve sparire davvero ===== sv-base.css chiude il drawer con `transform: translateX(100%)`, che lo porta fuori dallo schermo ma NON lo toglie dalla pagina: da chiuso le sue voci restano raggiungibili col Tab e continuano a essere annunciate dai lettori di schermo. Su un telefono si traduce in una decina di tabulazioni verso un menu che l'utente non vede — e su desktop, dove il drawer non si usa mai, in voci duplicate rispetto alla barra di navigazione. `visibility: hidden` lo toglie per davvero. Il ritardo pari alla durata della transizione lascia intatta l'animazione di chiusura: l'elemento diventa invisibile quando ha già finito di scorrere via, non prima. In apertura il ritardo è zero, altrimenti il pannello comparirebbe a scorrimento concluso. La regola sta qui e non in sv-base.css perché quel file è il design system della consegna, ripreso com'era. */ .drawer { visibility: hidden; transition: transform .26s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .26s; } body.menu-open .drawer { visibility: visible; transition: transform .26s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s; } /* ===== 6. Marchio dell'associazione nel footer ===== Il riquadro bianco (.foot-fimaa) era già nel design system della consegna ma nessuna pagina lo usava: qui si aggiunge solo il contorno — come sta nella colonna e come si comporta la riga di testo accanto. Perché il testo: "F.I.M.A.A." da solo è una sigla, e una sigla non comunica l'associazione a chi compra casa una volta nella vita. Il marchio NON riceve nessun filtro. Il logo dell'agenzia, quando stava qui, veniva schiacciato a bianco pieno da .foot-logo img: su un marchio altrui sarebbe peggio che scorretto, sarebbe irriconoscibile. */ .foot-assoc { display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; } .foot-fimaa img { display: block; width: 100%; height: auto; border-radius: 4px; } .foot-assoc__t { margin: 0; font-size: .82rem; line-height: 1.4; color: #92a2b6; max-width: 16ch; } /* Sotto i 720px il footer va a colonna singola: senza questo il riquadro da 84px resterebbe da solo in fondo con la sua riga di testo a penzoloni. Affiancati e con un filo di respiro sopra la riga legale. */ @media (max-width: 720px) { .foot-assoc { margin-top: 1.4rem; } .foot-assoc__t { max-width: none; } } /* ===== 7. Tabelle dentro il testo ===== La consegna non aveva tabelle: nessuna delle sedici pagine ne conteneva una. Gli articoli del blog ne sono invece pieni — quotazioni per zona, aliquote, confronti fra contratti — e senza queste regole rendevano come tabelle HTML nude, che su telefono sfondano la colonna. ┌─ PERCHÉ LO STILE STA TUTTO QUI E NON NEL JAVASCRIPT ────────────────────┐ │ sv-app.js aggiunge l'involucro scorrevole e le etichette per │ │ l'impilamento su schermo stretto, ma NON deve essere necessario per │ │ leggere la tabella. │ │ │ │ Il motivo non è solo la robustezza: i crawler dei motori generativi │ │ (GPTBot, ClaudeBot, PerplexityBot) non eseguono JavaScript. Una tabella │ │ di dati che dipendesse dal JS per essere impaginata resterebbe │ │ leggibile per loro — il markup c'è — ma qualunque comportamento │ │ affidato al solo script sarebbe invisibile. Regola pratica: il │ │ contenuto e la sua leggibilità stanno nell'HTML e nel CSS, il JS │ │ migliora e basta. │ └─────────────────────────────────────────────────────────────────────────┘ */ .prose table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .94rem; line-height: 1.5; background: #fff; } .prose thead th { background: var(--navy); color: #fff; font-family: var(--head); font-weight: 700; font-size: .84rem; letter-spacing: .01em; text-align: left; padding: .75rem .9rem; vertical-align: bottom; } .prose thead th:first-child { border-top-left-radius: var(--r-sm); } .prose thead th:last-child { border-top-right-radius: var(--r-sm); } .prose tbody td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; } .prose tbody tr:nth-child(even) td { background: var(--bg-alt); } .prose tbody tr:last-child td { border-bottom: 0; } .prose tbody td strong { color: var(--ink); } /* Prima colonna: è quasi sempre l'etichetta della riga (la zona, la voce, il caso). Darle il peso del titolo rende la tabella leggibile in diagonale. */ .prose tbody td:first-child { color: var(--ink); font-weight: 600; } /* Colonne di soli numeri: allineate a destra e a cifre di larghezza fissa, così le migliaia si incolonnano e i prezzi si confrontano con l'occhio invece che leggendoli. La classe la mette sv-app.js, che sa quali colonne lo sono. */ .prose td.is-num, .prose th.is-num { text-align: right; font-variant-numeric: tabular-nums; } /* La didascalia sotto la tabella (fonte del dato) è un in un

. */ .prose table + p em { font-size: .84rem; } /* ---- Involucro scorrevole (lo crea sv-app.js) --------------------------- */ .sv-tablewrap { margin: 1.6rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-sm); } .sv-tablewrap table { margin: 0; } /* ---- Ripiego senza JavaScript ------------------------------------------ Finché lo script non è intervenuto la tabella è figlia diretta di .prose: la si rende scorrevole da sé. Appena viene incartata questa regola smette di valere, perché il genitore non è più .prose. */ @media (max-width: 700px) { .prose > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ---- Schermi stretti: la tabella diventa un elenco di schede ------------- Una tabella a cinque colonne su un telefono non si legge nemmeno scorrendola, perché si perde di vista l'intestazione. Impilata a schede ogni riga diventa autonoma, con l'etichetta accanto al valore. Si attiva solo su .sv-tablewrap--stack, che sv-app.js mette quando ha trovato le intestazioni e ha potuto scriverle nei data-label: senza etichette l'impilamento produrrebbe numeri senza nome. */ @media (max-width: 700px) { .sv-tablewrap--stack { overflow-x: visible; } .sv-tablewrap--stack table, .sv-tablewrap--stack tbody, .sv-tablewrap--stack tr, .sv-tablewrap--stack td { display: block; width: 100%; } .sv-tablewrap--stack thead { display: none; } .sv-tablewrap--stack tr { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: .7rem; overflow: hidden; } .sv-tablewrap--stack tr:last-child { margin-bottom: 0; } /* Le zebre non servono più: a separare le righe ci pensa il bordo della scheda, e uno sfondo alternato renderebbe alcune schede più scure senza alcun significato. */ .sv-tablewrap--stack tbody tr:nth-child(even) td { background: transparent; } .sv-tablewrap--stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding: .55rem .85rem; border-bottom: 1px solid var(--line); text-align: right; } .sv-tablewrap--stack td:last-child { border-bottom: 0; } /* La prima cella è il titolo della scheda: a tutta larghezza, senza etichetta. */ .sv-tablewrap--stack td:first-child { background: var(--bg-alt); font-family: var(--head); font-weight: 700; color: var(--navy); text-align: left; display: block; } .sv-tablewrap--stack td:first-child::before { content: none; } .sv-tablewrap--stack td::before { content: attr(data-label); font-weight: 600; color: var(--ink-soft); text-align: left; flex: 0 1 auto; } /* Colonna senza intestazione: nessuna etichetta da mostrare. */ .sv-tablewrap--stack td[data-label=""]::before { content: none; } /* Impilata, l'allineamento a destra non serve: il valore è già l'ultimo elemento della riga. */ .sv-tablewrap--stack td.is-num { font-variant-numeric: tabular-nums; } } /* ===== 8. Blog: caricamento progressivo ===== Il bottone lo crea sv-app.js. La paginazione vera resta nel documento — è la versione che funziona senza JavaScript ed è quella che i crawler dei motori generativi percorrono — e viene solo nascosta a chi lo script ce l'ha. Resta nascosta anche quando gli articoli finiscono: farla ricomparire in fondo a uno scorrimento infinito la fa sembrare un residuo, per giunta con "1" evidenziato dopo che si sono caricate cinque pagine. Riappare in un caso solo — se una richiesta fallisce — perché lì è l'unico modo rimasto per andare avanti. `display: none` e non `visibility: hidden`: lo spazio non deve restare occupato sotto il bottone. I link restano comunque nel DOM, che è ciò che conta per la scansione. */ .bl-pagination--js { display: none; } .bl-altri { display: block; margin: 2.2rem auto 0; } .bl-altri[disabled] { opacity: .6; cursor: default; } /* ===== 9. Finestra di condivisione ===== La costruisce sv-app.js al primo click su [data-share], e solo da scrivania: sul telefono si apre il foglio di condivisione del sistema e questa finestra non nasce nemmeno. Replica il comportamento del tema di riferimento del vecchio sito, che faceva la stessa distinzione (old/tema-sv/tema/sv-theme/single-immobile.php, righe 817-841). Le misure sono quelle della finestra della planimetria (scheda-immobile.css §5): sono due finestre dello stesso sito e devono sembrare la stessa cosa. */ .sv-share { position: fixed; inset: 0; z-index: 90; background: rgba(18, 38, 61, .55); display: flex; align-items: center; justify-content: center; padding: 20px; } .sv-share[hidden] { display: none; } .sv-share__box { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); width: min(400px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 1.5rem 1.5rem 1.2rem; position: relative; } .sv-share__h { font-family: var(--head); font-weight: 800; color: var(--navy); font-size: 1.2rem; margin: 0 0 1rem; padding-right: 40px; } /* La X è due tratti incrociati, come sugli altri pannelli del sito: nessun carattere Unicode, che i font del tema non coprono. */ .sv-share__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: var(--pill); background: var(--bg-alt); cursor: pointer; } .sv-share__close:hover { background: var(--line); } .sv-share__close::before, .sv-share__close::after { content: ""; position: absolute; left: 9px; top: 16px; width: 16px; height: 2px; background: var(--ink); } .sv-share__close::before { transform: rotate(45deg); } .sv-share__close::after { transform: rotate(-45deg); } .sv-share__list { list-style: none; margin: 0; padding: 0; } .sv-share__list li + li { border-top: 1px solid var(--line-soft); } /* Link e bottone si vestono insieme: "Copia link" è un