/* ============================================================ gio.css — foglio di marca di Giò Soluzioni Casa, sopra il tema Antra (theme/antra/index-8.html, «layout 8», testata header-4). RISCRITTO DA ZERO il 2026-08-20. La stesura precedente (4.584 righe, 210 KB) non era un foglio di marca: era un altro progetto appoggiato sopra il tema. Aveva una scala tipografica propria a quattro gradi (§17), tre «respiri» di sezione (§18), una mappa delle superfici (§19) e un ritmo interno (§20); usava 17 volte le variabili del tema e più di mille volte quelle del design system. Il committente confronta lo screenshot del demo con la pagina prodotta: con quel foglio la home non somigliava a index-8 in nessun punto — testata su due righe, contenitore a 1152px, H1 su cinque righe in Montserrat, occhiello senza pillola. Questo file è modellato su sites/edilgetica/assets/css/edilgetica.css (la ricetta approvata su demo.edilgetica.it) e su sites/alpiadelmo/assets/css/alpi.css, e fa le stesse cinque cose: 1. rimette in piedi lo strato di variabili del tema; 2. sposta l'accento — l'oro di Antra diventa il terracotta di Giò — da UN punto solo, la variabile del tema; 3. corregge la lingua (il Title Case inglese in italiano è un errore) e tiene «edilgetica» minuscolo; 4. garantisce leggibilità, fuoco e bersagli dove il tema conta su una fotografia o su un colore che non passa AA; 5. veste i componenti NOSTRI (.eg-*) che il tema non conosce: la barra di ricerca, la card immobile, il motore dei filtri, la scheda, i moduli spenti, le note di bozza. Quello che NON fa: ridisegnare sezioni, cambiare corpi e spaziature del tema (pt-130/pb-130 sono criterio di collaudo), sostituire icone, inventare scale. Se una regola qui dentro non rientra in quei cinque punti, è fuori posto. ORDINE DI CARICAMENTO (lo scrive tools/gio-shell.mjs): bootstrap · fontawesome · venobox · nice-select · carouselTicker · animation · swiper · main.css (il TEMA, intatto) -> variables.css (solo :root, i token di marca) -> base.css (il foglio comune dei satelliti, pre-tema) -> gio.css (questo file) base.css è ancora nella catena e riscrive sopra il tema tipografia, scala dei titoli e larghezza dei contenitori: §2 lo disinnesca voce per voce. La correzione vera è toglierlo dal guscio, come è già stato fatto su alpiadelmo — vedi §9, nota 1. ============================================================ */ /* ============================================================ 1. LO STRATO DI VARIABILI DEL TEMA ------------------------------------------------------------ Le variabili --tl-* del tema stanno in un :root generato da main.css. Sul portale sono risultate VUOTE a runtime (edilgetica.css §1), su index-6 arrivavano: in un caso o nell'altro questo blocco non fa danno, perché i valori sono quelli del tema, ricopiati da theme/antra/assets/scss/utilities/_colors.scss e _typography.scss. Qui non si cambia il progetto: si dichiara l'accento e si mette al sicuro tutto il resto. ============================================================ */ :root{ /* --- L'ACCENTO. È l'unica cosa che il tema non decide più. #C05B3C è il terracotta di ramo di Giò (tokens/brand/gio.json -> --color-primary, lo stesso di variables.css). Il tema lo usa per il pallino della pillola, la parola in accento dei titoli, il fondo del bottone di testata, il tondo delle frecce e ogni hover: cambiandolo QUI cambia tutto insieme, ed è il motivo per cui il tema centralizza il colore. Contrasti MISURATI con scripts/contrast.mjs: #C05B3C su bianco 4,37:1 -> componenti e testo grande, non corpo #A24427 su bianco 6,19:1 -> la variante per il testo piccolo #CB7459 su #232525 4,54:1 -> la variante sulle fasce scure (l'oro del tema, #CAA05C, su bianco sta a 2,42:1: col terracotta il contrasto migliora invece di peggiorare.) */ --tl-color-theme-primary: #C05B3C; --gio-terra-scura: #A24427; /* testo piccolo e link su fondo chiaro */ --gio-terra-chiara: #CB7459; /* testo e segni su fondo scuro */ --gio-blu-gruppo: #0F70B7; /* SOLO firma endorsed e rimandi al portale */ --gio-blu-gruppo-chiaro: #7FB6E0; --gio-grigio-testo: #5F5F66; /* 6,1:1 su bianco: le note piccole */ /* --- caratteri: sono i due del tema. L'unica correzione è il fallback: il tema scrive `'Cal Sans', serif`, quindi se il woff2 non arriva i titoli diventano un Times. Un carattere che non carica non deve cambiare il progetto in un altro progetto. I file sono serviti dal vhost (assets/css/font-face.css li dichiara tutti e quattro, in locale): nessuna richiesta a Google, che era la causa misurata del CLS su tre pagine. */ --tl-ff-heading: 'Cal Sans', system-ui, sans-serif; --tl-ff-body: 'Golos Text', system-ui, sans-serif; --tl-ff-p: 'Golos Text', system-ui, sans-serif; /* --- colori del tema, ridichiarati per intero: la rete se il :root di main.css non arriva alla pagina. Valori del tema, non nostri. */ --tl-color-common-white: #ffffff; --tl-color-common-black: #000000; --tl-color-heading-primary: #191919; --tl-color-text-body: #4D4D52; --tl-color-bg-1: #1C1C1D; --tl-color-grey-1: #59585D; --tl-color-grey-2: #9F9FA4; --tl-color-border-1: #E3E3E8; /* Questi tre il tema li USA ma non li DICHIARA: variabili orfane, rotte anche nel tema originale. I valori sono dedotti dagli esadecimali che il tema usa altrove per gli stessi ruoli. */ --tl-color-bg-2: #252627; --tl-color-border-6: #2E2F31; --tl-color-text-black: #191919; --tl-fw-normal: normal; --tl-fw-thin: 100; --tl-fw-elight: 200; --tl-fw-light: 300; --tl-fw-regular: 400; --tl-fw-medium: 500; --tl-fw-sbold: 600; --tl-fw-bold: 700; --tl-fw-ebold: 800; --tl-fw-black: 900; --tl-fs-body: 16px; --tl-fs-p: 16px; --tl-fs-p-bold: 20px; --tl-fs-h1: 80px; --tl-fs-h2: 60px; --tl-fs-h3: 50px; --tl-fs-h4: 40px; --tl-fs-h5: 30px; --tl-fs-h6: 20px; /* le FAQ del tema scrivono `var(--lt-color-…)` con «lt» invece di «tl»: 13 dichiarazioni invalide, che cadono sull'ereditato. Due alias e tornano a funzionare (edilgetica.css §21, alpi.css §1). */ --lt-color-heading-primary: #191919; --lt-color-text-body: #4D4D52; } /* cintura: se una regola del tema perde la variabile, il testo resta nel carattere giusto invece di cadere su Times */ body{ font-family: 'Golos Text', system-ui, sans-serif; } h1, h2, h3, h4, h5, h6, .section-title, .sub-heading, .tl-primary-btn{ font-family: 'Cal Sans', system-ui, sans-serif; } /* ============================================================ 2. IL FOGLIO COMUNE DEI SATELLITI, DISINNESCATO ------------------------------------------------------------ base.css è lo scaffold nato PRIMA che il gruppo comprasse Antra: porta una tipografia sua (Montserrat/Source Sans 3, scala a clamp), un contenitore da 72rem e una serie di componenti (.card .btn .kicker .grid .stat .tag .ph) che nessuna delle 21 pagine di Giò usa più — contate: zero occorrenze. Resta in catena perché lo scrive il guscio, che non è di mia competenza (§9, nota 1); intanto quello che riscriveva sopra il tema si annulla qui, voce per voce, rimettendo i valori del TEMA e non valori nuovi. MISURATO sulla home a 1600px prima di questa riscrittura: .container 1152px (base.css) -> 1795px è il tetto del tema H1 Montserrat 72px -> Cal Sans 110px l'H1 andava su CINQUE righe e la barra di ricerca cadeva a y=1219; con il solo CSS del tema sta a y=860. ============================================================ */ /* 2.1 Il contenitore. Il tema NON usa la scala di bootstrap: la sovrascrive con due sole misure, senza media query, e il container resta fluido con 12px di gronda (--bs-gutter-x/2). base.css lo stringeva a 72rem e portava la gronda a 24px: la hero perdeva 640px di larghezza a 1600. */ .container{ max-width: 1795px; padding-inline: calc(var(--bs-gutter-x) * .5); } .container-2{ max-width: 1425px; } /* 2.2 La tipografia di base. Sono le stesse dichiarazioni di main.css: il tema le mette su selettori di elemento (specificità 0,0,1) e base.css, caricato dopo, le vinceva a parità di peso. */ body{ background-color: #f6f6f6; font-size: 16px; line-height: 1.625; font-weight: 400; color: var(--tl-color-text-body); } h1, h2, h3, h4, h5, h6{ color: var(--tl-color-heading-primary); line-height: 1.2; font-weight: 600; letter-spacing: normal; margin-top: 0; } h1{ font-size: var(--tl-fs-h1); } h2{ font-size: var(--tl-fs-h2); } h3{ font-size: var(--tl-fs-h3); } h4{ font-size: var(--tl-fs-h4); } p{ font-family: var(--tl-ff-p); font-size: 16px; line-height: 28px; color: var(--tl-color-text-body); margin: 0 0 15px; } /* base.css dava a ogni il colore del ramo: nel tema i link prendono il colore dal contesto (bianchi sulle fasce scure, inchiostro sulle chiare). I link DENTRO il testo tornano riconoscibili in §8.3, dove è un requisito e non un residuo. */ a{ color: inherit; } /* `img,svg{max-width:100%;display:block}` di base.css va tenuto (evita il gap della riga di base sotto le foto), ma le icone dentro i bottoni e le dentro le frasi devono restare in linea. `height:auto` è la riparazione CLS: le nostre dichiarano width/height e senza questa riga una foto larga meno del suo attributo si deforma in altezza. */ img{ height: auto; } .tl-primary-btn svg, p svg, li svg, button svg, .icon svg{ display: inline-block; } /* ============================================================ 3. LINGUA — via il Title Case, «edilgetica» minuscolo ------------------------------------------------------------ Il tema applica `text-transform: capitalize` a titoli, menu e bottoni. In inglese è una convenzione, in italiano è un errore: «Vendiamo Case Che Abbiamo Guardato Bene» non si scrive così. L'occhiello resta MAIUSCOLO: quella è grafica, non ortografia, ed è la pillola del tema — uno degli elementi che il committente confronta col demo, quindi non si tocca. ============================================================ */ .section-heading .section-title, .header .primary-header-inner .header-menu-wrap ul li a, .tl-primary-btn, .feature-item .title, .project-content .title, .service-details-item .title, .details-title, .details-title-2, .post-title, h1, h2, h3, h4, h5, h6{ text-transform: none; } /* L'OCCHIELLO È UN

, E IL TEMA LO VESTIVA COME

. Il tema scrive `

`: un titolo finto, che produceva h4 -> h2 su ogni sezione e, senza ScrollTrigger, restava invisibile per sempre. Il markup nostro usa

, che è corretto, ma così la pillola eredita l'interlinea di paragrafo del tema (`p{line-height:28px}`) e il suo margine: la scatola passava da 30px a 44px e spingeva in basso tutto il blocco della hero. Qui torna la geometria dell'h4, con la semantica giusta (stessa cura di edilgetica.css §2 e alpi.css §2). */ .sub-heading, .section-heading .sub-heading, .page-header .page-header-content .sub-heading{ font-size: 12px; font-weight: 400; line-height: 1.2; margin-top: 0; margin-bottom: 20px; } /* «GRUPPO EDILGETICA» non esiste: il nome del gruppo è sempre minuscolo, ed è una regola di marca, non una scelta tipografica. L'occhiello della hero e la filigrana della sezione feature lo stampano, e il tema le mette in maiuscolo. */ .eg-wordmark, .feature-text span, .hero-content-8 .section-heading .sub-heading{ text-transform: lowercase; } /* dentro la pillola il maiuscoletto è del tema, ma «gruppo edilgetica» deve restare com'è scritto: la firma non è un occhiello. */ .eg-lockup__firma{ text-transform: none; } /* ============================================================ 4. LA HERO DI index-8 — l'unica misura che cambia ------------------------------------------------------------ La hero è quella del tema e resta quella: pillola, titolo con la parola in accento, bottone tondo, fotografia 510x267 a destra col paragrafo sotto, fotografia larga in basso. Le due sole misure che si spostano servono a un requisito dichiarato: la barra di ricerca deve stare INTERA sopra la piega a 1440x900 (gio-sito-ia.md §2.1.1), e la barra sta dentro la hero, fra il blocco di testo e la foto grande. IL CONTO, misurato a 1440x900 con il solo CSS del tema: padding della hero 150 pillola + margine 50 titolo 110px x 3 righe 396 bottoni (mt-50 + 62) 112 margine sotto il blocco 80 -> la barra comincia a y=860 e finisce a y=984: 84px sotto la piega. Servono ~110px in meno sopra. Si tolgono dai due valori che il demo può concedere senza cambiare impianto: il padding (150 -> 100) e il corpo del titolo (110 -> 92px, il 16% in meno, tre righe che restano tre righe). Solo da 1200px in su: sotto quella soglia il tema ha già le sue misure (80px e 60px di titolo) e non si toccano. ============================================================ */ @media (min-width: 1200px){ .hero-wrap-8{ padding-top: 100px; } .hero-wrap-8 .hero-content-8 .section-heading .section-title{ font-size: 92px; } } /* L'ELEMENTO CHE SCORRE SULLA FASCIA SOTTO (.feature-element .scroll-img). Il tema non dà nessuna misura a .scroll-img, quindi vale quella naturale del file: la PNG del demo è 1018x594, le nostre fotografie sono 1200x800. MISURATO a 1600px: l'immagine scendeva fino a y=4250 mentre il titolo della fascia scura comincia a y=4154, e ne copriva 96 dei 116px. Con il tetto del demo la sovrapposizione torna quella sua, 29px, cioè il filo dell'ultima riga. */ .feature-element .scroll-img{ max-width: 1018px; } /* La fotografia grande in fondo alla hero e quella del riquadro di destra arrivano con proporzioni diverse da quelle del tema (864x1184 e 1200x686 contro i suoi tagli): `cover` fa il taglio senza deformare. Il tema lo dichiara già su .hero-thumb img e .hero-bottom-img img; qui serve solo perché §2.2 rimette `height:auto` su ogni e quella regola, da sola, batterebbe l'altezza al 100% del riquadro. */ .hero-wrap-8 .hero-thumb img, .hero-wrap-8 .hero-bottom-img img{ height: 100%; object-fit: cover; } /* ============================================================ 5. LE QUATTRO MISURE DEI COMPONENTI NOSTRI ------------------------------------------------------------ I capitoli che seguono vestono pezzi che nel tema NON esistono: una barra di ricerca, una card immobile, un pannello filtri, gli stati di un motore che cerca. Non sono una scala nostra rimessa dalla finestra: sono quattro misure, e ognuna e^ ancorata al tema o a un requisito misurabile. ============================================================ */ :root{ /* l^accento nel corpo del testo: #C05B3C su bianco sta a 4,37:1 e non passa AA per il testo piccolo, quindi i componenti usano la variante scura gia^ dichiarata al ^1 (6,19:1). */ --gio-accento: var(--gio-terra-scura); /* bordo dei campi: il --tl-color-border-1 del tema (#E3E3E8) su bianco vale 1,3:1, sotto la soglia 3:1 di un bordo che delimita un controllo. Qui si scurisce QUANTO BASTA per passare. */ --gio-bordo-campo: #767680; /* altezza dei controlli: 44px e^ il bersaglio minimo (WCAG 2.5.8), non un gusto. */ --gio-campo-h: 44px; /* filetto di separazione, tono del bordo del tema */ --gio-riga: var(--tl-color-border-1); } /* ============================================================ 6. LA BARRA DI RICERCA — .eg-search-band È il pezzo che nessun altro satellite ha, ed è il punto in cui il sito rischia di sembrare un aggregatore. Tre scelte per evitarlo: 1. non è una fascia colorata a piena larghezza, è una SCHEDA appoggiata sul bordo inferiore della hero: si legge come l'ultima riga della hero, non come la prima riga di un portale; 2. tre campi e un bottone, mai di più (docs/gio-modulo-ricerca.md §3.1); 3. sotto la barra una riga sola, e parla a chi vende — il pubblico che i tre portali dimenticano. Tetti di misura (gio-sito-ia.md §2.1.1): ≤128px desktop, ≤96px mobile con il solo campo «Dove», ≤15% del viewport. I conti stanno nei commenti. ========================================================================== */ .eg-search-band{ position: relative; z-index: 5; margin-top: calc(-1 * var(--space-6)); /* aggancio al bordo inferiore della hero */ background-color: transparent; /* mai una campitura d'accento */ } .eg-search-bar{ /* 14 + 66 + 14 = 94px di scheda; con la riga sotto (22 + 8) la fascia misura ~124px: sotto il tetto di 128. */ display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); padding: var(--space-3) var(--space-4); background-color: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .eg-search-field{ display: flex; flex-direction: column; min-width: 0; } .eg-search-field label{ font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: .04em; color: var(--text-muted); /* 7,35:1 su bianco */ margin-bottom: var(--space-1); } /* I campi. Il bordo è --ink-400 (3,29:1) e non --line (1,31:1): il contorno di un controllo è un componente di interfaccia e WCAG 1.4.11 chiede 3:1. font-size 16px o iOS zooma da solo al focus e la pagina si sposta. */ .eg-search-field input, .eg-search-field select{ min-height: var(--gio-campo-h); padding: 0 var(--space-3); font-family: var(--font-body); font-size: 1rem; line-height: 1.2; color: var(--ink-900); background-color: var(--surface-card); border: 1px solid var(--gio-bordo-campo); border-radius: var(--radius-md); width: 100%; } .eg-search-field input::placeholder{ color: var(--text-muted); opacity: 1; } .eg-search-field input:hover, .eg-search-field select:hover{ border-color: var(--ink-600); } .eg-search-field input:focus-visible, .eg-search-field select:focus-visible{ border-color: var(--color-primary); } /* I due restano nel DOM e continuano a serializzare il loro valore vuoto: il degrado senza JavaScript non cambia di una virgola. Conto dell'altezza: 10 + 48 + 10 = 68 di scheda, + 6 + 20 della riga sotto = 94px, sotto il tetto mobile di 96. L'etichetta va in linea con il campo perché resti visibile senza costare una riga (§3.6: mai solo placeholder). */ @media (max-width: 767.98px){ .eg-search-band{ margin-top: calc(-1 * var(--space-5)); } .eg-search-bar{ grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: var(--space-2) var(--space-3); gap: var(--space-2); } .eg-search-field--dove{ display: contents; /* etichetta e campo diventano celle */ } .eg-search-field--dove label{ margin: 0 var(--space-1) 0 0; align-self: center; color: var(--ink-800); } .eg-search-field--tipologia, .eg-search-field--prezzo{ display: none; } .eg-search-field input{ min-height: 48px; } .eg-search-submit, .tl-primary-btn.eg-search-submit{ min-height: 48px; padding-inline: var(--space-4); } .eg-search-aside{ margin-top: var(--space-2); font-size: var(--text-xs); } } /* Se una pagina interna monta un .) */ .eg-filtro-scelta label::before{ content: ""; position: absolute; inset: 0; border-radius: var(--radius-pill); } .eg-filtro--bandiera{ gap: var(--space-2); } .eg-filtro__aiuto{ margin: 0; font-size: var(--text-sm); color: var(--text-muted); max-width: 46ch; } .eg-filtri-azioni{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-5); } .eg-altri-filtri-btn, .eg-azzera{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); background: none; border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-900); cursor: pointer; } .eg-altri-filtri-btn{ border-color: var(--gio-bordo-campo); } .eg-altri-filtri-btn:hover{ border-color: var(--ink-900); } .eg-azzera{ text-decoration: underline; text-underline-offset: .18em; padding-inline: var(--space-2); } /* «Applica i filtri» esiste per chi non ha JavaScript e sparisce solo quando il motore è vivo: la classe .js-attivo la mette ricerca.js sull', e la toglie da sola se il JSON non arriva (§4.8). Senza questa riga il bottone resterebbe visibile anche a filtro istantaneo attivo. */ .js-attivo .eg-applica-filtri{ display: none; } .eg-altri-filtri{ display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); } /* 10.2 Riga di servizio: conteggio, ordinamento, criterio dichiarato ------ */ .eg-riga-servizio{ display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); } .eg-conteggio{ margin: 0; font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ink-900); } .eg-ordina{ display: flex; flex-direction: column; } /* La riga che dichiara il criterio non è una nota a piè di pagina: è la cosa più credibile che possiamo scrivere e non si nasconde mai (§4.4). */ .eg-criterio{ margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-muted); } .eg-noscript{ margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--color-primary); background-color: var(--color-primary-soft); color: var(--ink-800); /* 10,24:1 sul soft */ } /* 10.3 Intestazione dei risultati e griglia ------------------------------ Sulla pagina risultati la griglia è un

    con
  1. senza classi (il contratto §7.3 vieta al JavaScript di lavorare per classe): le colonne le mette il CSS, non bootstrap. La classe è .eg-immobili-griglia e vale SOLO qui — la riga di card della home si chiama .eg-immobili-riga (§9), così la regola non ha più bisogno di `ol.` per distinguere due strutture diverse che portavano lo stesso nome. */ .eg-risultati-intro p{ font-size: var(--text-lg); color: var(--text-body); } .eg-risultati-titolo{ font-size: var(--text-xl); margin: var(--space-7) 0 var(--space-5); } .eg-immobili-griglia{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 48rem){ .eg-immobili-griglia{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 64rem){ .eg-immobili-griglia{ grid-template-columns: repeat(3, minmax(0,1fr)); } } .eg-immobili-griglia > li{ display: flex; } /* 10.4 Stati: caricamento, errore, nessun risultato ---------------------- «Nessun immobile con questi criteri» ha lo stesso peso tipografico di un contenuto vero: dice il fatto, spiega, propone il filtro da togliere e lascia due vie d'uscita. Niente rosso, niente punti esclamativi, niente faccine: non è un errore dell'utente. */ .eg-caricamento{ color: var(--text-muted); font-size: var(--text-sm); } .eg-errore{ padding: var(--space-5); border: 1px solid var(--ink-400); border-left: 4px solid var(--error); border-radius: var(--radius-md); background-color: var(--surface-card); } .eg-errore p:last-child{ margin-bottom: 0; } .eg-vuoto{ margin: var(--space-6) 0; padding: var(--space-7); background-color: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); } .eg-vuoto h2{ font-size: var(--text-2xl); line-height: var(--leading-snug); margin-bottom: var(--space-4); } .eg-vuoto p{ max-width: 62ch; } .eg-suggerimento{ font-size: var(--text-lg); color: var(--ink-900); } /* il filtro citato nel suggerimento si evidenzia con una sottolineatura piena di soft: l'accento non finisce mai sotto al testo lungo */ .eg-suggerimento em, .eg-suggerimento strong{ font-style: normal; font-weight: var(--weight-medium); box-shadow: inset 0 -.35em 0 var(--color-primary-soft); } .eg-vuoto-azioni{ display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-5) 0; } /* 10.5 Paginazione numerica ---------------------------------------------- */ .eg-paginazione{ margin-top: var(--space-7); } .eg-paginazione ol{ list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; } .eg-paginazione a, .eg-paginazione [aria-current="page"]{ display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); font-family: var(--font-display); font-size: var(--text-sm); color: var(--ink-900); text-decoration: none; } .eg-paginazione a:hover{ border-color: var(--ink-900); } /* la pagina corrente non è un link e non si distingue col solo colore */ .eg-paginazione [aria-current="page"]{ background-color: var(--ink-900); color: var(--text-inverse); border-color: var(--ink-900); font-weight: var(--weight-bold); } /* 10.6 Ricerca inversa e code editoriali --------------------------------- */ .eg-ricerca-inversa, .eg-rimando-portafoglio{ margin-top: var(--space-7); } .eg-selezione-punti{ display: grid; gap: var(--space-5); margin-top: var(--space-5); } @media (min-width: 48rem){ .eg-selezione-punti{ grid-template-columns: repeat(3, minmax(0,1fr)); } } /* ========================================================================== 9. NOTE DI BOZZA — .eg-draft-note Finché i dati non sono reali chi guarda deve poterlo capire. Non è decorazione: statistiche e recapiti inventati vengono letti come impegni presi. Restano leggibili (AA) ma non competono col contenuto. ========================================================================== */ .eg-draft-note{ display: block; margin-top: var(--space-3); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); /* 7,35:1 su bianco, 6,75:1 su sand */ max-width: 62ch; } .eg-draft-note::before{ content: "bozza — "; font-weight: var(--weight-medium); color: var(--gio-accento); } /* Nelle note di lavorazione compaiono percorsi e nomi di file: il monospazio del browser li stampava in magenta, che non è un colore di questo sito. */ code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; color: var(--ink-800); background-color: var(--sand-050); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 .3em; } .exp-section .eg-draft-note, .cta-section-3 .eg-draft-note, .white-content .eg-draft-note, .footer-section .eg-draft-note{ color: rgba(255,255,255,.72); } /* ========================================================================== 10. ACCESSIBILITÀ Non è un capitolo a parte: è la ragione di metà delle misure di sopra. Qui restano le regole trasversali. ========================================================================== */ /* 14.1 Fuoco visibile --------------------------------------------------- base.css lo definisce con l'accento; qui si aggiunge solo ciò che il tema non copre (campi e summary) e la variante sul buio, dove un contorno terracotta su inchiostro scenderebbe a 3,4:1. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline: 3px solid var(--color-primary-strong); outline-offset: 2px; border-radius: var(--radius-sm); } .exp-section a:focus-visible, .exp-section button:focus-visible, .cta-section-3 a:focus-visible, .cta-section-3 button:focus-visible, .footer-section a:focus-visible, .footer-section button:focus-visible, .mobile-side-menu a:focus-visible, .mobile-side-menu button:focus-visible{ outline-color: var(--text-inverse); } /* 14.2 Aree di tocco ------------------------------------------------------ Rete di sicurezza per i link che nascono dentro un testo ma sono controlli autonomi (chiusure di colonna, «vedi tutto», voci di elenco del footer). I casi puntuali sono già risolti nei rispettivi blocchi. */ .eg-side-title + ul a, .side-menu-list a{ min-height: 44px; display: inline-flex; align-items: center; } /* 14.3 Movimento --------------------------------------------------------- Il tema anima l'ingresso di quasi tutti i blocchi con GSAP, che scrive opacity e transform INLINE: con la preferenza «meno movimento» attiva quegli stili resterebbero al valore iniziale (opacità 0) e mezza pagina sarebbe invisibile. Da qui i tre !important: sono l'unico modo di battere uno stile inline scritto da JavaScript, e servono a mostrare contenuto, non a nasconderlo. */ @media (prefers-reduced-motion: reduce){ .fade-top, .fade-wrapper > *, .slide-anim, .hero-content, .hero-img, .section-heading, .eg-immobile-card{ opacity: 1 !important; transform: none !important; visibility: visible !important; } *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* 14.4 Il preloader senza JavaScript ------------------------------------- Il preloader del tema è un pannello fisso a tutta pagina con z-index 999, che main.js fa sparire. Senza JavaScript resterebbe lì: invisibile (non ha fondo) ma sopra a tutto, e intercetterebbe ogni click sulla hero e sulla barra di ricerca. Due cinture: non prende mai il puntatore, e dove il browser sa dire che gli script sono spenti sparisce del tutto. */ .preloader{ pointer-events: none; } .preloader .site-name{ color: var(--ink-900); } @media (scripting: none){ .preloader{ display: none; } } /* 14.5 Il cursore finto del tema — spento ovunque ------------------------- main.js appende a due dischi che seguono il puntatore (.mt-cursor, .mt-cursor-view). Erano già spenti dove il puntatore non esiste; adesso sono spenti e basta, per tre motivi misurati: 1. .mt-cursor è un disco di 10px colorato con --tl-color-theme-primary, che alla radice vale terracotta. Sopra il footer di gruppo diventa un puntino terracotta che galleggia sulle voci — e nel footer l'accento terracotta non entra: lì vivono i neutri e il blu di gruppo. Non è un dettaglio, è una violazione della regola di marca; 2. su .cursor-effect il disco si ingrandiva di 7 volte in `difference`: un'invenzione grafica che su un sito di agenzia immobiliare non racconta niente e non aiuta a leggere; 3. su touch non esiste, quindi non è nemmeno un elemento del linguaggio: è un ornamento per metà del pubblico. Le classi `.cursor-effect` sono state tolte dal markup dei generatori, così il tema non ha nemmeno più a cosa agganciarsi. Questa regola resta per il guscio, che i due div li appende comunque. */ .mt-cursor, .mt-cursor-view{ display: none; } /* 14.6 Il segnalino di scorrimento --------------------------------------- */ #scroll-percentage-value{ color: var(--color-primary-strong); font-family: var(--font-display); } /* 14.6 Moduli delle pagine interne --------------------------------------- Le pagine /valutazione e /contatti montano i moduli del tema (.form-control). Stessa griglia di misure e stesso bordo dei campi di ricerca: un modulo che si comporta come il resto del sito è un modulo che si compila. */ .form-control, .form-item input, .form-item textarea, .form-item select{ min-height: var(--gio-campo-h); padding: var(--space-3); font-family: var(--font-body); font-size: 1rem; color: var(--ink-900); background-color: var(--surface-card); border: 1px solid var(--gio-bordo-campo); border-radius: var(--radius-md); width: 100%; } .form-item textarea{ min-height: 8rem; } .form-control::placeholder{ color: var(--text-muted); opacity: 1; } .form-title{ font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--ink-900); } /* 14.7 Stampa ------------------------------------------------------------- Chi porta in banca o dal notaio la scheda di un immobile la stampa. */ @media print{ .preloader, .mobile-side-menu, .mobile-side-menu-overlay, #scroll-percentage, .service-text, .footer-text, .eg-search-band, .eg-cta-sticky{ display: none; } .eg-immobile-card{ break-inside: avoid; box-shadow: none; } body{ background: var(--surface-page); color: var(--ink-900); } } /* ========================================================================== 11. MODO REVISIONE E RESIDUI DEL TEMA Sezione aggiunta dall'intervento «seconda ondata» (generatori in tools/). Sta in coda apposta: non riscrive nessuna regola dei capitoli precedenti, li commuta soltanto. Tre blocchi, in tutto una ventina di dichiarazioni. ========================================================================== */ /* 18.1 Le note di bozza escono dall'impaginato ----------------------------- §13 le compone; qui si decide QUANDO si vedono. Erano 69 in nove pagine, e sulla home una cadeva fra i bottoni della hero e la barra di ricerca, in terracotta, cioè nel colore delle CTA: chi guardava non leggeva un sito in lavorazione, leggeva un sito rotto. Restano TUTTE nel DOM — sono il registro di ciò che è segnaposto, e servono a chi rivede — ma di default non si vedono. Si accendono con `?bozza=1` (lo scrive lo script in linea di tools/gio-shell.mjs, che mette `data-bozza` su e lo ricorda in sessionStorage), si spengono con `?bozza=0`. In fondo a ogni pagina resta UNA riga di registro, §16.2, che dice quante sono e come si rivedono. Senza JavaScript `data-bozza` non compare mai: il comportamento predefinito, cioè la pagina pulita, è anche quello di riserva. */ .eg-draft-note{ display: none; } /* Due note sfuggivano (misurate su /contatti: la nota del WhatsApp e quella dentro
    ). Non e' un caso limite, e' specificita': main.css del tema porta `.request-content .request-item-wrap .request-item p` e `... span` con `display:block`, cioe' (0,3,1) contro lo (0,1,0) della riga qui sopra. Chi aggiunge una nota dentro un blocco del tema che imposta `display` deve aggiungere qui il selettore corrispondente — e il modo di accorgersene e' contare quante .eg-draft-note hanno display != none in pagina, che deve essere ZERO su tutte e nove. */ .request-content .request-item-wrap .request-item p.eg-draft-note, .request-content .request-item-wrap .request-item span.eg-draft-note, .request-content .request-item-wrap .request-item address .eg-draft-note{ display: none; } html[data-bozza] .request-content .request-item-wrap .request-item p.eg-draft-note, html[data-bozza] .request-content .request-item-wrap .request-item span.eg-draft-note, html[data-bozza] .request-content .request-item-wrap .request-item address .eg-draft-note{ display: block; } html[data-bozza] .eg-draft-note{ display: block; border-left: 2px dashed var(--ink-400); padding-left: var(--space-3); } /* Anche in revisione la parola «bozza» non è terracotta: l'accento del marchio non si spende per dire «questo pezzo non è finito». */ html[data-bozza] .eg-draft-note::before{ color: var(--ink-600); } html[data-bozza] .exp-section .eg-draft-note, html[data-bozza] .cta-section-3 .eg-draft-note, html[data-bozza] .white-content .eg-draft-note, html[data-bozza] .footer-section .eg-draft-note{ border-left-color: rgba(255,255,255,.32); } html[data-bozza] .exp-section .eg-draft-note::before, html[data-bozza] .cta-section-3 .eg-draft-note::before, html[data-bozza] .white-content .eg-draft-note::before, html[data-bozza] .footer-section .eg-draft-note::before{ color: rgba(255,255,255,.72); } /* 18.2 La riga di registro in fondo al footer ------------------------------ Una riga, nei neutri del footer (§12: lì dentro l'accento non entra). Il numero lo scrive la build contando le .eg-draft-note della pagina finita. I due comandi sono due link veri: uno solo si vede per volta, e senza JavaScript resta visibile «Mostra», che è lo stato di partenza. */ .eg-bozza-registro{ margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.16); font-size: var(--text-xs); line-height: 1.6; color: rgba(255,255,255,.72); /* 8,63:1 sul fondo del footer */ } .eg-bozza-registro a{ display: inline-flex; align-items: center; min-height: 44px; /* è un controllo autonomo, non un link di testo */ padding-inline: var(--space-2); /* Nel footer entrano solo i neutri e il blu di gruppo: senza questa riga il link ereditava il terracotta di ramo, cioè l'accento del marchio speso su un comando di lavorazione. Bianco all'86% = 10,4:1 sul fondo scuro. */ color: rgba(255,255,255,.86); text-decoration: underline; text-underline-offset: 3px; } .eg-bozza-registro a:hover{ color: var(--text-inverse); } /* Specificità pari a quella della riga qui sopra: con il solo `.eg-bozza-off` (0,1,0) contro `.eg-bozza-registro a` (0,2,1) si vedevano tutti e due i comandi, misurato. */ .eg-bozza-registro a.eg-bozza-off{ display: none; } html[data-bozza] .eg-bozza-registro a.eg-bozza-on{ display: none; } html[data-bozza] .eg-bozza-registro a.eg-bozza-off{ display: inline-flex; } /* 18.3 La CTA della scatola contatto --------------------------------------- Sostituisce `.service-details-cta.eg-box-contatto .cta-btn a` (§15): il markup non porta più `.cta-btn`, perché su quella classe main.css del tema monta un disco di 120x120 con border-radius:50% e sfondo rgba(152,152,152,.36) — il cerchio che nel tema si espande all'hover, e che qui restava fermo allo stato iniziale come ellisse grigia con l'etichetta fuori. L'effetto non si ripara: si toglie l'aggancio. Vedi il commento in tools/build-gio-pages.mjs. */ .eg-box-contatto__azione{ width: 100%; } .eg-box-contatto__azione > a{ width: 100%; justify-content: space-between; } /* SECONDO residuo, che il disco teneva nascosto. Il tema veste OGNI dentro la scatola contatto come una didascalia: `.service-details-left-content .service-details-cta span` -> display:block, margin 20px 0 15px, font-size 20px, color bianco — specificità (0,3,1), che batte il `.tl-primary-btn .icon` di §5 (0,2,0). Quel selettore prende anche il tondo della freccia del bottone. Finché il bottone era un disco di 120px non si notava; appena è tornato una pill, la pill cresceva a 90px (contro i 55 di sistema) e la freccia restava bianca su fondo bianco, cioè invisibile. Misurato a 1600 su /vendere-casa e /comprare-casa. */ .service-details-left-content .service-details-cta.eg-box-contatto .tl-primary-btn .icon, .eg-box-contatto .eg-box-contatto__azione .tl-primary-btn .icon{ display: flex; margin: 0 0 0 var(--space-1); font-size: 1rem; color: var(--color-primary-strong); } /* 18.4 IL MODULO SPENTO ---------------------------------------------------- Non e' una nota di bozza ed e' apposta che non lo sia: le note si spengono (§18.1), questo avviso no. Finche' non c'e' l'endpoint, un modulo che si compila e non manda niente e' una trappola, e su questo sito e' la peggiore possibile. Il markup lo scrive tools/gio-shell.mjs (moduloContatto, opzione `attivo`), che mette anche i campi dentro un
    . Superficie sand e filetto in inchiostro: e' un avviso, non una CTA, e l'accento terracotta non si spende per dire «questo pezzo non funziona». */ .eg-modulo-spento{ margin-bottom: var(--space-5); padding: var(--space-5); border-left: 3px solid var(--ink-800); border-radius: var(--radius-md); background-color: var(--surface-alt); } .eg-modulo-spento__titolo{ font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--ink-900); margin-bottom: var(--space-2); } /* niente `color` qui: p{} lo dà già, e con .eg-modulo-spento p (0,1,1) il titolo — che è un

    con la sua classe (0,1,0) — perdeva contro la mia stessa regola e usciva in --text-body invece che in --ink-900. Misurato. */ .eg-modulo-spento p{ margin-bottom: 0; } /* I due recapiti sono l'unica via che funziona davvero, quindi non stanno dentro il paragrafo: stanno su una riga propria, come due controlli. Dentro il testo servivano comunque 44px di altezza, e quei 44px gonfiavano le righe del paragrafo intorno (misurato: interlinea a 44px invece di 27). */ .eg-modulo-spento__vie{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); } /* Il colore NON si dichiara qui: lo dà il sistema, con `p a:not([class])` -> var(--gio-accento) del §3.4, che a (0,1,2) batteva comunque questo selettore (0,1,1) — misurato, la dichiarazione era morta. Ed è giusto così: sono link, e questo è il colore dei link del sito. Contrasto verificato: #bc593b su sand-050 #f7f5f1 = 4,17:1, e a 20px bold siamo in «testo grande» (soglia AA 3:1). */ .eg-modulo-spento__vie a{ display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 4px; } /* Il fieldset non deve introdurre geometria propria: e' un involucro semantico attorno alla griglia dei campi, non un riquadro. */ .eg-modulo-campi{ border: 0; margin: 0; padding: 0; min-width: 0; /* senza, un fieldset non si restringe sotto la min-content dei figli */ } /* Che i campi siano spenti si deve VEDERE, non solo scoprire al click. Il tema dipinge .form-control con fondo e bordo espliciti, quindi il grigio predefinito del browser non arriva mai. La profondità è ricalcata, non forzata: main.css porta la regola .contact-page-area .request-form-wrap .form-item .form-control a (0,4,0), e con un selettore più corto il fondo restava bianco — misurato, i campi di /contatti erano #ffffff con il fieldset gia' disabilitato. Stesso metodo dei §3.1, §6 e §17.2: si pareggia la profondità e si vince sull'ordine. Le ETICHETTE restano a contrasto pieno: spegnere i controlli serve a non far scrivere, non a rendere illeggibile il modulo — che in questa fase è anche il testo che il cliente deve rileggere. */ .request-form-wrap .eg-modulo-campi[disabled] .form-item .form-control, .request-form-wrap .eg-modulo-campi[disabled] .form-item .eg-select{ color: var(--text-muted); background-color: var(--sand-050); border-color: var(--line); cursor: not-allowed; } .eg-modulo-campi[disabled] .tl-primary-btn{ background-color: var(--ink-400); border-color: var(--ink-400); cursor: not-allowed; } .eg-modulo-campi[disabled] .tl-primary-btn::before{ display: none; } /* niente hover su un bottone spento */ .eg-modulo-campi[disabled] .tl-primary-btn .icon{ background-color: var(--surface-card); color: var(--ink-600); } /* ========================================================================== 12. INGEGNERIA FRONTEND -------------------------------------------------------------------------- CHI L'HA SCRITTA E PERCHÉ È QUI. Questo foglio è di chi cura lo spacing dentro le sezioni. Le regole qui sotto servono alle correzioni di robustezza fatte in `tools/gio-shell.mjs`, `tools/build-gio-pages.mjs` e `sites/gio/assets/js/ricerca.js`, e stanno IN CODA — dopo tutto il resto — per due motivi: non spostano niente di quello che c'è sopra (nessuna sovrascrittura di regole esistenti, solo classi e stati nuovi), e chi lavora al §17 può leggerle e assorbirle senza andarle a cercare in mezzo. Nessuna tocca i token core: consumano solo `--space-*`, `--text-*`, `--ink-*`, `--line`, `--color-primary*`. Sono nove regole, in cinque gruppi. Ogni gruppo dice a quale difetto misurato risponde. ========================================================================== */ /* 19.1 Skip link — WCAG 2.4.1 ----------------------------------------------- Il markup è nuovo (`applicaGuscio`), il disegno è già in base.css:29-30, e quella regola è corretta così com'è — `left:-9999px` è la tecnica standard dell'off-screen accessibile e non va toccata. Qui servono due sole correzioni, entrambe dovute a com'è fatto QUESTO sito: 1. `position: fixed` invece di `absolute`. Il tema scorre dentro ScrollSmoother e il link vive fuori da `#antra-smooth-content`: da `absolute` resterebbe ancorato a y=0 del documento, cioè fuori schermo per chiunque prema Tab dopo aver scorso. 2. z-index sopra `.header`, che main.css tiene a 99 mentre base.css dà 100 allo skip link: uno sopra l'altro è troppo poco margine per un elemento che deve essere visibile quando compare. */ .skip-link{ position: fixed; z-index: 1000; font-family: var(--font-display); font-weight: var(--weight-medium); } /* 19.2 Icone in linea — al posto di FontAwesome ------------------------------ 725 KB sul filo per pagina servivano a rendere quattro glifi. Adesso sono SVG dentro l'HTML, disegnati a 1em con `currentColor`: ereditano corpo e colore dalle regole del tema (.tl-primary-btn .icon 34px, .header-contact .icon 22px, .mobile-side-menu-close 17px) senza che nessuna vada riscritta. Serve solo l'allineamento verticale, che su un inline è quello della baseline del testo e non del centro ottico come su un glifo. */ .eg-icona{ display: inline-block; /* dentro un contenitore flex viene comunque blockificato */ flex: none; vertical-align: middle; } /* 19.3 «Altri filtri»: chiuso con JavaScript, aperto senza ------------------- Difetto misurato: il pannello nasceva aperto e a 390 la prima casa stava a y = 3.122 px, dietro tre schermate di modulo, con il bottone «Altri filtri» che invitava ad aprire una cosa già aperta (aria-expanded="true" all'arrivo). Ma senza JavaScript quei filtri devono restare raggiungibili, perché il bottone che li apre non funziona. La soluzione non richiede una riga di JavaScript in più: il markup nasce con [hidden] (chiuso, coerente con aria-expanded="false") e qui si rimette il pannello visibile SOLO nello stato `html.no-js`, che è quello in cui lo scambio di classe nel non è mai avvenuto. `hidden` è un `display:none` della UA stylesheet: una regola d'autore lo scavalca senza `!important`. Il valore è `flex` e non `block` perché è così che il §10.1 compone questo pannello: rimetterlo a `block` lo spezzerebbe in colonna. L'`!important` NON è una scorciatoia, ed è l'unico di tutta questa sezione: `bootstrap.min.css` porta `[hidden]{display:none!important}`, e contro un `!important` la specificità non serve a niente — misurato, senza questa parola il pannello resta `display:none` anche in `no-js`. Si pareggia l'arma, non si alza il volume. */ html.no-js .eg-altri-filtri[hidden]{ display: flex !important; } /* e senza JavaScript il bottone che apre non apre: si toglie, invece di lasciare un controllo che mente sul proprio stato */ html.no-js .eg-altri-filtri-btn{ display: none; } /* 19.4 Quando manca un canale, lo si scrive --------------------------------- `.eg-recapito-assente` è la riga che dichiara che il numero della sede non c'è ancora; compare nel footer, nel pannello mobile, nelle due scatole contatto e su /contatti. Non è una nota di bozza — quelle sono spente di default (§18) — perché è un'informazione per il VISITATORE, non per il committente: chi cerca un telefono deve sapere subito che non lo troverà. Colore `--text-body` e non `--text-muted`: una riga che il lettore deve leggere davvero non si compone in grigio chiaro. Sparisce da sola il giorno in cui NAP.telHref viene valorizzato: non è nascosta dal CSS, è proprio il generatore a non scriverla più. */ .eg-recapito-assente, .eg-modulo-spento__manca{ margin: var(--space-3) 0 0; font-size: var(--text-sm); line-height: var(--leading-body); color: var(--text-body); } .eg-modulo-spento__manca{ padding-top: var(--space-3); border-top: 1px solid var(--color-primary-soft); } /* Il recapito in testata a TUTTE le larghezze. `main.css` mostra `.header-contact` solo sopra i ~1400px e il §6.3 di questo foglio lo rimette sotto i 992: nel mezzo — 1024 e 1280, cioè la fascia dei portatili, cioè di chi guarda casa la sera sul divano — non c'era né l'uno né l'altro, e il recapito diretto non era mai a portata (gio-ux-review.md §2.8, misurato a 1024 e riconfermato a 1280). Finché il canale è uno solo, quel buco costa più di prima: è l'unico modo di farsi sentire. La specificità è pareggiata a quella del tema (0,4,0) e vince per ordine, non per forza. AGGANCIO SU `.header` E NON SU `.header-4` (corretto il 2026-08-20): dal momento in cui le pagine interne perdono `header-4` — come nel tema, perché sotto la loro testata c'è la page-header scura — la regola scritta su `.header-4` smetteva di valere lì, e il recapito spariva dalla testata di otto pagine su nove sotto i 1400px. MISURATO a 390 su /contatti: `.header-contact` a `display: none`, mentre in home era `flex`. Il guscio deve essere lo stesso su tutte e nove le pagine: quella è la sua unica ragione di esistere. */ .header .primary-header-inner .header-right-wrap .header-contact{ display: flex; } /* 19.5 L'avviso «senza JavaScript i filtri non filtrano» --------------------- `.eg-noscript` esisteva già (§10.2) ed era un

    : adesso è un blocco con un titolo e due righe, perché deve dire tre cose — che i filtri non funzionano, che il conteggio si riferisce a tutto il portafoglio, e dove scrivere se si cerca qualcosa di preciso. La regola esistente dà fondo, filetto e colore; qui si sistemano solo i margini interni, che senza questa riga sarebbero quelli di paragrafo del tema (15 px, fuori scala). */ .eg-noscript p{ margin: 0 0 var(--space-3); } .eg-noscript p:last-child{ margin-bottom: 0; } .eg-noscript__titolo{ font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--ink-900); } /* 19.6 «Nessun immobile a «Lugo»» — i comuni che seguiamo -------------------- Riga che si accende dentro lo stato vuoto quando il luogo chiesto non è in portafoglio (ricerca.js, scriviLuogoIgnoto). I quattro comuni sono link veri e devono essere toccabili con il pollice: la riga sta dentro un paragrafo, quindi i link sono in linea, ma `min-height` e `padding-block` li portano comunque a 44 px senza spezzare il flusso del testo. */ .eg-comuni-coperti{ margin: var(--space-4) 0 0; font-size: var(--text-lg); color: var(--ink-900); } .eg-comuni-coperti a{ display: inline-block; min-height: 44px; padding-block: var(--space-2); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 4px; } /* 19.7 Il link che sta da solo dentro un paragrafo --------------------------- Un link dentro una frase è esente dalla soglia dei 44 px: è testo, non un controllo. Un link che occupa da solo il suo paragrafo, no — quello è una CTA travestita, e va toccato con il pollice. Era l'unico bersaglio autonomo sotto soglia rimasto in tutto il sito: `a "Come funziona l'home staging"`, 215 × 24 px a 390 (docs/gio-collaudo.md §7.3, unica voce). `inline-flex` e non `block`: il link non deve prendersi la riga intera, o l'area di tocco diventa larga quanto la colonna. */ .eg-link-blocco{ display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; } /* ============================================================ 13. TESTATA — il lockup, il tasto del menu, il pannello ------------------------------------------------------------ Il tema mette un LOGO nella testata. Giò non ha un file logo, e non se ne inventa uno: al suo posto un lockup tipografico col nome e la firma endorsed. È l'unica ragione per cui questo capitolo esiste sopra i 992px. Sotto i 992 il tema nasconde il menu di testata e conta su un pannello laterale, che però header-4 non sa aprire: nel tema il tasto non c'è proprio (`grep -c mobile-side-menu-toggle theme/antra/*.html` -> 0). Il guscio lo aggiunge, e qui gli si dà una forma. Senza JavaScript il pannello non lo riempie nessuno, quindi lì tornano le voci vere in testata. ============================================================ */ /* --- il lockup al posto del logo --- */ .eg-lockup{ display: inline-flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; } .eg-lockup__nome{ font-family: 'Cal Sans', system-ui, sans-serif; font-size: 20px; line-height: 1.1; color: var(--tl-color-heading-primary); } .eg-lockup__firma{ font-size: 13px; /* il blu di gruppo: qui e nel footer, mai altrove */ color: var(--gio-blu-gruppo); } .eg-lockup__nome:hover{ color: var(--tl-color-theme-primary); } .eg-lockup__firma:hover{ text-decoration: underline; } /* --- il tasto del menu: esiste SOLO sotto i 992px --- */ .eg-menu-toggle{ display: none; } @media (max-width: 62rem){ /* `html.js` la scrive uno script in linea nel : senza JavaScript il pannello resta vuoto, quindi il tasto non si mostra e restano le voci vere (vedi sotto). */ html.js .eg-menu-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; /* bersaglio WCAG 2.5.8 */ border: 1px solid var(--tl-color-border-1); border-radius: 999px; background: transparent; font-size: 0; /* l'etichetta resta al lettore di schermo */ } html.js .eg-menu-toggle:hover{ border-color: var(--tl-color-theme-primary); } /* le tre barre disegnate in CSS: se FontAwesome non carica, il tasto che apre la navigazione deve esserci lo stesso */ .eg-menu-toggle__barre, .eg-menu-toggle__barre::before, .eg-menu-toggle__barre::after{ display: block; width: 18px; height: 2px; background: var(--tl-color-heading-primary); content: ""; } .eg-menu-toggle__barre{ position: relative; } .eg-menu-toggle__barre::before{ position: absolute; top: -6px; } .eg-menu-toggle__barre::after{ position: absolute; top: 6px; } /* senza JavaScript: le sette voci restano in testata, su una riga che scorre. Meglio una riga da trascinare che nessuna navigazione. I DUE `min-width: 0` CHE MANCAVANO. `overflow-x: auto` sull'

      non basta: `.header-left-wrap` e `.mobile-menu-items` stanno dentro il flex di `.primary-header-inner` e hanno `min-width: auto`, cioe' si allargano fino al contenuto invece di lasciar scorrere il figlio. MISURATO a 390 con JavaScript spento, su tutte e otto le pagine interne: `body.scrollWidth` = 938 (documentElement diceva 390, che e' il numero falso dell'overflow-x del tema), con `div.header-left-wrap` largo 843. Non era un difetto delle pagine nuove: c'era gia', e si vedeva solo a script spenti. */ html:not(.js) .primary-header-inner .header-left-wrap, html:not(.js) .primary-header-inner .header-menu-wrap .mobile-menu-items{ min-width: 0; } html:not(.js) .primary-header-inner .header-menu-wrap{ display: block; min-width: 0; } html:not(.js) .primary-header-inner .header-menu-wrap ul{ display: flex; gap: 1.25rem; overflow-x: auto; margin: 0; padding: .5rem 0; } html:not(.js) .primary-header-inner .header-menu-wrap ul li{ flex: 0 0 auto; } } /* --- il pannello laterale: il tema lo dipinge chiaro e ci scrive sopra in scuro, ma il fondo che arriva è scuro: testo invisibile. Qui si rimette il contrasto, non si ridisegna il pannello. --- */ .mobile-side-menu .side-menu-content, .mobile-side-menu .side-menu-wrap a, .mobile-side-menu .side-menu-list li, .mobile-side-menu .side-menu-contact p, .mobile-side-menu .side-menu-head .mobile-side-menu-close{ color: var(--tl-color-common-white); } .mobile-side-menu .mean-bar .mean-nav.mean-nav > ul li a{ color: var(--tl-color-common-white); min-height: 44px; display: flex; align-items: center; } .mobile-side-menu .mean-bar .mean-nav.mean-nav > ul li.active > a{ color: var(--gio-terra-chiara); /* 4,54:1 sul fondo scuro */ } .mobile-side-menu .eg-lockup__nome{ color: var(--tl-color-common-white); } .mobile-side-menu .eg-lockup__firma{ color: var(--gio-blu-gruppo-chiaro); } /* ============================================================ 14. LE OTTO PAGINE INTERNE E LE DODICI SCHEDE ------------------------------------------------------------ AGGIUNTO IL 2026-08-20, quando le pagine interne sono state riportate sul tema (tools/build-gio-pages.mjs, base index-8). REGOLA DI QUESTO CAPITOLO, e vale per chi lo tocca dopo: ogni riga qui dentro esiste perché il tema NON ha il componente, o perché ce l'ha e il nostro contenuto è più lungo del suo. Non c'è una sola misura inventata: dove il tema ha già una regola, il markup è stato cambiato per usarla (`service-details-items` col disco, `service-details-list-wrap` con l'icona FontAwesome, `details-meta`, `sub-title` sulle briciole, `mb-60` fra i blocchi delle pagine lunghe) invece di riscriverla qui. Questo capitolo è quello che resta: cinque componenti nostri e sette correzioni di lunghezza. Se cresce, quasi sempre vuol dire che qualcuno ha smesso di usare il componente del tema. ============================================================ */ /* 14.1 TESTATA DI PAGINA — quello che il tema non ha ------------------------ `page-header` del tema ha DUE cose: il titolone bianco e il breadcrumb. Le briciole adesso portano la classe `sub-title` del tema, quindi carattere, corpo, maiuscoletto e colore arrivano da main.css e non si ridichiarano: qui si toglie solo la lista e si mette il separatore — il FILETTO, perché il chevron è abolito e il trattino dentro uno del tema finirebbe nel testo letto ad alta voce. */ .eg-briciole{ list-style: none; margin: 0 0 18px 0; padding: 0; } /* NON è un flex: le voci sono TESTO, e il testo va a capo con il suo separatore attaccato. Con `display: flex` la voce lunga («Trilocale ristrutturato nel borgo di San Biagio a Ravenna») diventava un blocco largo quanto la riga e il filetto restava da solo all'estremità sinistra, tre righe più in basso della voce che separa (misurato a 390 su ogni scheda). `display: inline` sul
    • e separatore inline-block: la briciola e il suo filetto sono la stessa riga di testo. */ .eg-briciole li{ display: inline; } .eg-briciole li + li::before{ content: ""; display: inline-block; width: 12px; height: 1px; margin: 0 10px; vertical-align: middle; background: currentColor; opacity: .7; } .eg-briciole a{ color: inherit; } .eg-briciole a:hover{ color: var(--tl-color-theme-primary); } /* l'ultima briciola porta `.inner-page`, che il tema colora d'accento: #C05B3C sul fondo scuro della testata sta sotto AA, e questa è l'unica riga che dice DOVE SEI. Si usa la variante chiara già dichiarata al §1. */ .page-header .page-header-content .sub-title .inner-page{ color: var(--gio-terra-chiara); } /* IL LOCKUP SULLA TESTATA DELLE PAGINE INTERNE. Il tema, sulle pagine interne, cambia il FILE del logo: logo-1.png (scuro) diventa logo-2.png (bianco). Giò non ha un file logo, ha un lockup di testo, quindi lo stesso passaggio è un colore. Si aggancia all'assenza di `header-4`, che è esattamente il segno con cui il tema distingue i due casi (vedi tools/gio-shell.mjs, «testata su fondo scuro»): niente classe nuova, niente :has(), e se un giorno una pagina interna nascesse chiara basta rimetterle header-4. */ .header:not(.header-4) .eg-lockup__nome{ color: var(--tl-color-common-white); } .header:not(.header-4) .eg-lockup__firma{ color: var(--gio-blu-gruppo-chiaro); } /* L'OCCHIELLO DENTRO LA TESTATA SCURA. `.sub-heading` del tema eredita il colore del testo di pagina (#4D4D52): misurato rgb(77,77,82) sopra il velo nero al 64% della page-header, cioè invisibile. Nel tema l'occhiello nella testata non esiste (c'è solo titolo + breadcrumb), quindi non c'è una regola da riusare. */ .page-header .page-header-content .sub-heading{ color: var(--tl-color-common-white); } /* IL TITOLONE DELLA TESTATA A 80px NON HA UNA MEDIA QUERY NEL TEMA. Verificato: main.css dà `.page-header .page-header-content .title` 80px e sotto i 992 cambia solo il padding. Nel demo il titolo è «About us» e a 390 ci sta; il nostro è «Trilocale ristrutturato nel borgo di San Biagio a Ravenna», e a 390 andava a capo DENTRO le parole («ristruttura|to»), perché base.css dà `overflow-wrap: break-word` ai titoli — cioè il ripiego funzionava, ma su un titolo di 80px in una colonna di 366px. MISURATO a 390: h1 alto 1.860px, cinque parole spezzate. I due gradini sono quelli che il tema usa per i suoi titoli (`.section-heading .section-title`: 60 -> 42 a 992 -> 36 a 767): stessi breakpoint, e 36px è esattamente il suo valore più piccolo. Nessuna scala nuova. */ @media (max-width: 992px){ .page-header .page-header-content .title{ font-size: 48px; } } @media (max-width: 767px){ .page-header .page-header-content .title{ font-size: 36px; } } /* Il sommario sotto il titolo: è contenuto nostro dentro un blocco del tema, e il tema non ha niente con cui vestirlo. */ .eg-page-header__sommario{ color: var(--tl-color-common-white); max-width: 62ch; margin: 0 auto; } /* Prezzo ed etichette della scheda, sempre dentro `page-header-content`. Il corpo del prezzo è quello che il tema dà a `.service-details-cta .number` (40px): stesso ruolo, stesso peso, nessuna misura nuova. */ .eg-prezzo-testata{ font-family: var(--tl-ff-heading); font-size: 40px; line-height: 1; color: var(--tl-color-common-white); margin: 22px 0 14px 0; } .eg-etichette{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .eg-etichette li{ font-family: var(--tl-ff-heading); font-size: 13px; line-height: 1; padding: 9px 14px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: var(--tl-color-common-white); } /* 14.2 ELENCHI — il componente del tema con testo lungo -------------------- `.service-details-list-wrap ul li` del tema è `display:flex; align-items:center; line-height:1`: giusto per le sue voci di quattro parole, sbagliato per le nostre, che sono frasi intere e vanno a capo. Con `center` l'icona si allinea a metà del paragrafo e con `line-height:1` le righe si toccano. Si correggono quei due valori e nient'altro: corpo, carattere, colore e colore dell'icona restano del tema. Il `` intorno al testo serve proprio a questo — un testo sciolto dentro un flex non si può allineare in alto. */ .service-details-list-wrap ul li{ align-items: flex-start; line-height: 1.6; } .service-details-list-wrap ul li i{ margin-top: .35em; flex: 0 0 auto; } /* il tema affianca DUE
        con `justify-content: space-between`; qui di
          ce n'è sempre uno solo, e senza questa riga resta largo quanto la frase più lunga invece che quanto la colonna. */ .service-details-list-wrap.eg-lista-wrap{ display: block; max-width: none; } /* 14.3 PASSI NUMERATI — il numero dentro il disco del tema ----------------- Il disco `.icon` (80px, fondo d'accento) è del tema e resta suo: nel demo ci sta una PNG, qui il numero del passo. Servono le tre dichiarazioni che una non chiede — carattere, corpo, colore. */ .eg-passi .service-details-item .icon span{ font-family: var(--tl-ff-heading); font-size: 26px; /* = .service-details-item .content .title */ line-height: 1; color: var(--tl-color-common-white); } /* LA GRIGLIA DEL TEMA È `repeat(2, 1fr)` E NON HA UNA MEDIA QUERY. A 390px le due colonne non si stringono: `1fr` ha `min-width: auto`, e il contenuto minimo di una voce è 80px di disco + 20 di gap + i 334px che il tema dà a `.content p` — cioè 434px per colonna, 908 in due. MISURATO a 390 su /vendere-casa prima della correzione: `div.service-details-item` largo 589px e `body.scrollWidth` = 589 (documentElement diceva 390: lo falsifica l'overflow-x del tema). Il selettore ripete l'ambito `.service-details-content` perché quello del tema ce l'ha, e senza non lo batte. */ @media (max-width: 48rem){ .service-details-content .service-details-items{ grid-template-columns: 1fr; } .service-details-content .service-details-items .service-details-item .content p{ max-width: none; } } /* 14.4 I DATI DELLA SCHEDA — `details-meta` del tema, semantica corretta --- Markup del tema (`project-details-meta` > `details-meta`), ma
          con
          /
          invece di +
          : un valore non è un titolo di livello 5, ed è la stessa correzione già fatta sulle briciole. Le due regole qui sotto RIPETONO, su
          e
          , le dichiarazioni che main.css dà a `.details-meta span` e `.details-meta h5`: stessi valori, non nuovi. */ .eg-dati .details-meta dt{ font-family: var(--tl-ff-heading); color: var(--tl-color-grey-2); font-size: 16px; font-weight: 400; margin-bottom: 5px; } .eg-dati .details-meta dd{ font-family: var(--tl-ff-p); font-size: 18px; font-weight: 500; margin-bottom: 0; } /* il tema impagina SEI voci su una riga flex; qui sono fino a diciassette e su una riga sola diventano illeggibili. Passo della griglia 30px: è il `column-gap` che il tema usa fra le sue colonne. */ .eg-dati.project-details-meta{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px 30px; } .eg-dati__voce--energia dd{ color: var(--gio-terra-scura); } /* 14.5 GALLERIA DELLA SCHEDA ---------------------------------------------- Contenitore e cornice sono del tema (`service-details-img-wrap` e `.details-img`: 310px, `object-fit: cover`, raggio 24). Il tema ne affianca DUE senza andare a capo; le schede ne hanno da tre a cinque, e ognuna porta la sua didascalia. */ .eg-galleria{ flex-wrap: wrap; align-items: stretch; } /* `min-width: 0`: senza, un flex item non scende sotto la larghezza del suo contenuto e le foto da 1200px facevano sfondare la riga. */ .eg-galleria .eg-galleria__scatto{ flex: 1 1 300px; min-width: 0; margin: 0 0 30px 0; } /* altezza (310px), `object-fit: cover` e raggio 24 li da' il tema: qui resta il margine, perche' sotto la foto c'e' la didascalia e non i 50px che il tema mette fra due foto. */ .service-details-content .eg-galleria .details-img{ display: block; margin-bottom: 12px; } .eg-galleria figcaption{ font-size: 14px; line-height: 1.5; color: var(--gio-grigio-testo); } .eg-galleria__nota{ font-size: 14px; color: var(--gio-grigio-testo); } /* 14.6 LE RIGHE CHE RESTANO ----------------------------------------------- Elementi nostri che il tema non ha e che senza una regola cadono sul paragrafo di base. Nessuno introduce una scala: 14px è il corpo già in uso per le note in tutto il foglio, 26px è la misura che il tema dà a `.service-details-item .content .title`, 24px è il suo raggio. */ .eg-colonna-titolo, .eg-sopralluogo__voce{ font-size: 26px; font-weight: 400; margin-bottom: 12px; } .eg-sopralluogo__data, .eg-dati__nota, .eg-legenda-sopralluogo, .eg-form-hint{ font-size: 14px; color: var(--gio-grigio-testo); } .eg-chiusura, .eg-sopralluogo__chiusura{ border-left: 2px solid var(--tl-color-theme-primary); padding-left: 18px; } /* i due riquadri dichiarati (mappa da fare, foto da scattare): stessa veste, perché dicono la stessa cosa — «qui ci va una cosa che non c'è ancora». */ .eg-mappa-segnaposto, .eg-foto-attesa, .eg-prima-dopo-vuoto{ border: 1px dashed var(--gio-bordo-campo); border-radius: 24px; padding: 30px; text-align: center; color: var(--gio-grigio-testo); /* centra il testo anche quando il riquadro prende l'altezza dello slot del tema (.contact-img, 420px su /contatti) */ display: grid; align-content: center; } .eg-foto-attesa__titolo{ font-family: var(--tl-ff-heading); font-size: 20px; margin-bottom: 8px; } .eg-cta-sticky__prezzo{ font-family: var(--tl-ff-heading); margin: 0; } /* ============================================================ 15. FOOTER — i bersagli delle voci di menu ------------------------------------------------------------ Il tema dà a `.footer-widget .footer-list li a` `line-height: 1` e stacca le voci con 20px di margine. Sono voci di MENU, non link dentro una frase: non godono dell'esenzione di WCAG 2.5.8, e a 390px misuravano 21-23px di altezza (11 bersagli su ogni pagina). La spaziatura fra le voci non cambia: i 20px di margine diventano altezza del bersaglio, quindi il footer resta alto uguale e il dito ha 44px su cui cadere. ============================================================ */ .footer-widget .footer-list li a, .footer-widget .footer-list li .eg-lockup__nome, .footer-widget .footer-list li .eg-lockup__firma{ display: inline-flex; align-items: center; min-height: 44px; } .footer-widget .footer-list li{ margin-bottom: 0; } /* ============================================================ 16. FOOTER — la colonna «Il gruppo»: due righe per voce ------------------------------------------------------------ COLLISIONE MISURATA (2026-09-20, screenshot di /contatti a 1600px; e' la stessa gia' corretta in faro.css): la regola della §15 `.footer-widget .footer-list li a{display:inline-flex}` (0,2,2), che da' 44px di bersaglio alle voci di menu, rendeva nome e descrittore di ogni realta' due elementi flex AFFIANCATI: si leggeva «Savorani Tourismaffitti brevi e gestione» su una riga e «Studio R» spezzato. Qui la specificita' e' (0,3,2): la colonna del gruppo torna a due righe per voce, e il bersaglio resta >= 44px (due righe + padding). ============================================================ */ .eg-footer-gruppo .eg-realta, .eg-footer-gruppo .eg-endorse{ display: block; } .eg-footer-gruppo .eg-endorse{ font-size: 14px; opacity: .72; line-height: 1.3; } .footer-widget .footer-list.eg-footer-gruppo li{ margin-bottom: 12px; } .footer-widget .footer-list.eg-footer-gruppo li a{ display: block; min-height: 44px; padding: 4px 0; line-height: 1.3; }