/* ============================================================ alpi.css — foglio di marca di Alpi Adelmo dal 1960, sopra il tema Antra (theme/antra/index-6.html, «layout 6»). RISCRITTO DA ZERO il 2026-08-20. La stesura precedente (2.791 righe) reinterpretava il tema: rifaceva la tipografia con i caratteri di gruppo, sostituiva la pillola dell'occhiello con un filetto, ridisegnava la testata, il pannello mobile, le card, i numeri, il footer. Il committente ha confrontato il demo index-6 con la nostra home e ha bocciato: «state adattando un vostro tema con effetti antra, io ho chiesto antra». Quel foglio non conteneva errori: conteneva un altro progetto. Questo file e' modellato su sites/edilgetica/assets/css/edilgetica.css, che e' la ricetta approvata dal committente sulla demo di rete (host ritirato il 2026-09-22: il portale sta su www.edilgeticasrl.it), e fa le stesse cinque cose e basta: 1. rimette in piedi lo strato di variabili del tema; 2. sposta l'accento (l'oro di Antra -> l'azzurro di Alpi Adelmo) da UN punto solo, la variabile del tema; 3. corregge la lingua (il Title Case inglese in italiano e' un errore); 4. garantisce leggibilita' e contrasti dove il tema conta su una fotografia che noi non abbiamo o su un colore che non passa AA; 5. veste i pochi componenti NOSTRI (.eg-*) che il tema non conosce. Quello che NON fa: ridisegnare sezioni, cambiare spaziature (pt-130/pb-130 sono criterio di collaudo), sostituire icone, inventare pattern. Se una regola qui dentro non rientra in quei cinque punti, e' fuori posto. ORDINE DI CARICAMENTO (lo scrive tools/alpi-shell.mjs): bootstrap · fontawesome · venobox · nice-select · carouselTicker · animation · swiper · main.css (il TEMA, intatto) -> variables.css (solo :root, i token di marca) -> alpi-guscio.css (le sei riparazioni strutturali del guscio) -> alpi.css (questo file) components/shared/base.css NON e' piu' nella catena: riscriveva sopra il tema tipografia, scala dei titoli e larghezza dei contenitori. Le due sole classi che servivano davvero (.skip-link, .visually-hidden) stanno qui sotto, §6. ============================================================ */ /* ============================================================ 1. LO STRATO DI VARIABILI DEL TEMA ------------------------------------------------------------ MISURATO il 2026-08-20 sul demo servito nel browser (getComputedStyle(document.documentElement)): --tl-ff-heading -> "'Cal Sans', serif" --tl-color-theme-primary -> "#CAA05C" quindi su index-6 le variabili del tema ARRIVANO, al contrario di quanto misurato sul portale (vedi edilgetica.css §1). Questo blocco percio' non e' un ripristino d'emergenza: e' il punto unico in cui dichiariamo l'accento e in cui mettiamo al sicuro i due valori che il tema sbaglia. I valori sono quelli del tema, ricopiati fedelmente da theme/antra/assets/scss/utilities/_colors.scss e _typography.scss: qui non si cambia il progetto. ============================================================ */ :root{ /* --- L'ACCENTO. E' l'unica cosa che il tema non decide piu'. #139DD9 e' l'azzurro del logo di Alpi Adelmo (cambio committente 2026-08-20, era ocra) (tokens/brand/alpiadelmo.json -> --color-primary, ripreso da variables.css). Il tema lo usa per il pallino della pillola, la parola in accento dei titoli, il fondo del bottone di testata, gli hover: cambiandolo QUI cambia tutto insieme, che e' il motivo per cui il tema centralizza il colore. ATTENZIONE, ED E' LA CAUSA DI META' DEI RILIEVI DI CONTRASTO (WP9, qa-report §5.2): IL FONDO DI PAGINA DEL TEMA E' #F6F6F6, NON BIANCO. `main.css` scrive `body{background-color:#f6f6f6}`. Ogni rapporto calcolato su #FFFFFF qui scende del 7% circa, e le prime tre varianti dell'accento erano state tarate su bianco: #0F7EAF passava per «4,54:1 AA» e in pagina misurava 4,20. Le varianti qui sotto sono ricalcolate SU #F6F6F6, che e' la superficie vera. Contrasti MISURATI con scripts/contrast.mjs (su #F6F6F6 / su #FFFFFF): #139DD9 2,84 / 3,06 -> SOLO componenti grafici e fasce scure #0F7EAF 4,20 / 4,54 -> FONDO di componente, col bianco sopra #0E76A4 4,69 / 5,06 -> TESTO sotto i 18px su fondo chiaro (AA) #1292CA 3,24 / 3,51 -> TESTO da 24px in su su fondo chiaro (AA) #139DD9 su #191919 5,74 · su #232525 5,03 · su #100D0B 6,32 #1292CA su #191919 5,02 · su #232525 4,40 · su #100D0B 5,53 E C'E' UNA QUARTA SUPERFICIE CHIARA, che il QA non aveva campionata: `main.css` dipinge `.process-section{background-color:#eee}` — un grigio piu' scuro del fondo di pagina. MISURATO a pixel sulla home («sempre a che punto sei», 60px): li' il #1298D2 che il QA aveva calcolato su #F6F6F6 scende a **2,81:1** e non passa. #1292CA fa **3,02:1 su #EEEEEE**, cioe' regge sulla PIU' SCURA delle tre superfici chiare del sito, non solo su quella di pagina. Sei punti di luminosita' sotto il valore del QA: la differenza non e' percepibile, la soglia si', ed e' l'unico valore che chiude B5 su tutte le sezioni invece che su nove su dieci. (l'oro del tema, #CAA05C, su bianco sta a 2,42:1: il difetto di contrasto e' del tema, e con l'azzurro migliora invece di peggiorare) */ --tl-color-theme-primary: #139DD9; /* B1 di WP9: il FONDO del bottone di testata. Con il bianco sopra fa 4,54:1 (era 3,06 con l'accento pieno). NON e' un colore di testo: su #F6F6F6 sta a 4,20 e per il testo piccolo non basta. */ --alpi-accento-fondo: #0F7EAF; /* B2 di WP9: l'accento come TESTO PICCOLO (<18px) su fondo chiaro. Era #0F7EAF, che sul #F6F6F6 del tema misurava 4,20:1. Cambiato QUI e non nelle dieci regole che lo usano: sono tutte e dieci testo su superficie chiara (etichette, recapiti, link in mezzo al testo, indice), verificate una per una prima di spostare il token. PERCHE' #0E76A4 E NON IL #0F79A7 CHE IL QA AVEVA CALCOLATO: il QA ha calcolato su #F6F6F6, dove #0F79A7 fa esattamente 4,51. Campionando a pixel i 31 testi che usano questo token si trovano DUE superfici piu' scure di #F6F6F6, e sono entrambe FILIGRANE del tema, non fondi dichiarati: le tre percentuali delle maestranze stanno sopra `.skill-text` — la filigrana «alpi» a 390px, `color:#9F9FA4` con `opacity:.13` su bianco, cioe' un #F2F2F2 effettivo: li' #0F79A7 misurava **4,35**; l'occhiello del blocco «Il gruppo» sta sopra la sua forma di fondo: **4,40**. #0E76A4 porta il PEGGIORE dei 31 a **4,52** e non cambia nient'altro (su #F6F6F6 4,69, su bianco 5,06). Tre punti di luminosita' sotto il valore del QA, e chiudono i due casi che il calcolo su una superficie sola non poteva vedere. */ --alpi-accento-scuro: #0E76A4; /* B5 di WP9: l'accento come TESTO GRANDE (>=24px) su fondo chiaro — la parola in accento dei titoli e il bottone dell'accordion aperto. 3,02:1 sul #EEEEEE della process-section (la superficie chiara PIU' scura del sito), 3,24 su #F6F6F6, 3,51 su bianco, contro i 2,64-2,84 dell'accento pieno. Sulle fasce scure resta sopra 4,4:1 — che per il testo grande basta — quindi la stessa variante vale su TUTTE le superfici e non serve una seconda regola per il fondo scuro: MISURATO a pixel sull'hero (5,21:1 nel 2% peggiore) e sulle tre fasce fotografiche (4,01-4,47 nel 2% peggiore). */ --alpi-accento-grande: #1292CA; --alpi-accento-su-scuro: #139DD9; /* testo e segni su fondo scuro */ --alpi-blu-gruppo: #0F70B7; /* SOLO firma endorsed e rimandi al portale */ --alpi-blu-gruppo-chiaro: #7FB6E0; /* --- caratteri: sono i due del tema. L'unica correzione e' 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. */ --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: se un giorno il blocco :root di main.css non arrivasse (e' successo sul portale), qui c'e' la rete. 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: sono 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 (stessa cura del portale, edilgetica.css §21). */ --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. LINGUA — via il Title Case, «edilgetica» minuscolo ------------------------------------------------------------ Il tema applica `text-transform: capitalize` a titoli, menu e bottoni. In inglese e' una convenzione, in italiano e' un errore: «Preventivo Certo» e «Impresa Edile A Faenza» non si scrivono cosi'. L'occhiello resta MAIUSCOLO: quella e' grafica, non ortografia, ed e' la pillola del tema (`.section-heading .sub-heading`: 12px, uppercase, bordo, pallino in accento) — non si tocca, e' uno degli elementi che il committente confronta col demo. ============================================================ */ .section-heading .section-title, .header .primary-header-inner .header-menu-wrap ul li a, .tl-primary-btn, .service-item-5 .title, .project-content .title, .process-item-6 .title, .details-title, h1, h2, h3, h4, h5, h6{ text-transform: none; } /* L'OCCHIELLO E' UN

, E IL TEMA LO VESTIVA COME

— MISURATO. Il tema scrive `

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

, che e' corretto, ma cosi' la pillola cade sotto le regole di paragrafo del tema, che hanno specificita' maggiore: `.hero-wrap-6 .hero-content-6 p{font-size:18px;font-weight:500;margin-top:30px}` MISURATO in pagina: la pillola della hero era 251x44 con testo a 18px, dove il demo la fa 215x30 con testo a 12px — piu' 30px di margine superiore che spingevano giu' tutto il blocco. Qui la scatola torna quella dell'h4 del tema: stessa semantica corretta, stessa geometria del demo. (Stessa cura del portale, edilgetica.css §2.) */ .section-heading .sub-heading, .hero-wrap-6 .hero-content-6 .section-heading .sub-heading, .section-heading.section-heading-2 .sub-heading{ font-size: 12px; font-weight: 400; line-height: 1.2; margin-top: 0; margin-bottom: 20px; } /* Il nome del gruppo va sempre in minuscolo, anche dentro un blocco che il tema stampa in maiuscolo (e' la regola di marca, e vale quanto la fedelta' al tema perche' riguarda il MARCHIO, non il layout). Stessa soluzione del portale, che lo fa sulla filigrana: `.about-text span`. Qui la porta il markup, con . */ .eg-marchio{ text-transform: lowercase; } /* ============================================================ 3. IL LOGO E LA FIRMA ENDORSED ------------------------------------------------------------ Il logo di Alpi Adelmo e' un PNG 146x120 SENZA canale alpha (misurato: PNG color type 2, RGB), cioe' con il suo fondo bianco dentro. Il tema mette il logo su una testata trasparente sopra la foto scura della hero: un file bianco li' sopra e' una targa bianca, non una wordmark. Finche' non arriva una variante su fondo scuro (voce da mettere in checklist), si contiene: si limita l'ALTEZZA — non la larghezza, o l'attributo height diventa una deformazione — e si da' alla targa un contorno e un raggio, cosi' legge come lockup e non come immagine sbagliata. ALTEZZA 44px: nel demo la wordmark «antra» e' alta 30px di inchiostro dentro un file da 150px di larghezza. Il nostro logo ha il marchio piu' alto del testo, quindi a 44px l'inchiostro della scritta «ALPI ADELMO» sta sui 12px e la sagoma pesa quanto quella del demo. ============================================================ */ .eg-lockup{ display: inline-flex; align-items: center; gap: 12px; } .eg-lockup__nome{ display: inline-flex; padding: 6px 0; } /* 44px di bersaglio col marchio dentro */ /* B6 DEL MANDATO CORRETTIVO (2026-08-20) — VIA LA TARGA BIANCA. Qui c'erano tre dichiarazioni che mettevano sotto il PNG del logo un fondo bianco arrotondato (`background:#FFFFFF;border-radius:8px; padding:4px 6px`), perche' il file consegnato e' RGB SENZA ALPHA (PNG color type 2) e il suo bianco e' opaco. Effetto misurato in testata a 1280px: un francobollo bianco di 78x52px nell'angolo di una fotografia di cantiere. Nel demo, al suo posto, c'e' la wordmark bianca del tema. Il PNG resta SOLO nel pannello del menu mobile, che main.css dipinge di bianco: li' il suo fondo non si vede. Su tutte le superfici scure — testata (trasparente sopra l'hero, #191919 quando si aggancia), footer, preloader — il marchio e' la wordmark testuale qui sotto. Il PNG torna appena il committente consegna la variante in bianco su trasparente: vedi la nota in tools/alpi-shell.mjs, lockup(). */ .eg-lockup--side img{ height: 44px; width: auto; max-width: none; /* il tema mette max-width:170px sulla larghezza */ } /* LA WORDMARK. Cal Sans bianco (il carattere dei titoli del tema) e «impresa edile» sotto, piu' piccolo e con la spaziatura larga: e' il lockup del logo vero, scritto. Le due righe stanno in una colonna flessibile perche' la firma endorsed accanto resta allineata al centro del blocco, non alla prima riga. */ .eg-wordmark{ display: flex; flex-direction: column; justify-content: center; line-height: 1; } .eg-wordmark__nome{ font-family: var(--tl-ff-heading); font-size: 26px; line-height: 1; color: #FFFFFF; letter-spacing: .2px; /* MISURATO nel footer a 1280px: dentro la colonna col-lg-3 (~200px utili) con la firma endorsed di fianco, «Alpi Adelmo» andava a capo e si leggeva «Alpi / Adelmo». Il nome dell'impresa non si spezza mai. */ white-space: nowrap; } /* Nel FOOTER la firma sta sotto il nome, come nell'header stretto: la colonna e' larga un quarto di contenitore e affiancarle le mandava a capo tutte e due. Non e' nascosta, e' impilata (network-map §2.2 chiede che ci sia). */ .footer-section .eg-lockup{ flex-direction: column; align-items: flex-start; gap: 4px; } /* nel footer lo spazio non e' contato: la firma tiene i suoi 44px di bersaglio (MISURATA a 25px prima di questa riga). */ .footer-section .eg-lockup__firma{ min-height: 44px; padding: 12px 0; } /* 12px E NON 10: e' il minimo che la piattaforma si e' data (regola 6, e tools/shoot.mjs lo misura). A 10px la sottoriga stava piu' comoda sotto il nome, ma «impresa edile» e' informazione, non ornamento: chi legge poco deve poterla leggere. La larghezza torna con la spaziatura, non col corpo: 13 caratteri a 12px + 2px di letter-spacing fanno ~132px contro i ~140 di «Alpi Adelmo» a 26px. MISURATO: prima erano 2 elementi sotto i 12px in pagina (testata e footer), ora zero. */ .eg-wordmark__ruolo{ font-family: var(--tl-ff-body); font-size: 12px; line-height: 1.1; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-top: 3px; } @media only screen and (max-width: 767px){ .eg-wordmark__nome{ font-size: 21px; } .eg-wordmark__ruolo{ font-size: 12px; letter-spacing: .6px; } } /* nel preloader il tema scriveva «ANTRA» a 40px: la wordmark tiene la stessa presenza, centrata come vuole `.site-name{text-align:center}` */ .eg-site-name .eg-wordmark{ align-items: center; } .eg-site-name .eg-wordmark__nome{ font-size: 46px; } .eg-site-name .eg-wordmark__ruolo{ font-size: 13px; letter-spacing: 5px; margin-top: 8px; } @media only screen and (max-width: 767px){ .eg-site-name .eg-wordmark__nome{ font-size: 34px; } .eg-site-name .eg-wordmark__ruolo{ font-size: 11px; letter-spacing: 3px; } } /* la firma endorsed: e' un link al portale (network-map §2.2) e resta il solo punto della pagina in cui compare il blu di gruppo */ .eg-lockup__firma{ display: inline-flex; align-items: center; min-height: 44px; /* controllo autonomo: MISURATO 28px prima */ font-family: var(--tl-ff-heading); font-size: 14px; line-height: 1.2; color: var(--alpi-blu-gruppo-chiaro); white-space: nowrap; } .eg-lockup__firma:hover{ color: #FFFFFF; } /* La firma resta SULLA STESSA RIGA del logo anche su telefono, com'e' nel demo (logo a sinistra, tondo a destra, una riga sola). MISURATO a 390px con il logo contenuto in altezza: 48 (logo) + 10 + 107 (firma) + 56 (tondo) = 221px su 366 utili. Andava a capo quando il logo era largo 132px, cioe' prima che §3 gli desse un'altezza. */ @media only screen and (max-width: 991px){ .eg-lockup{ gap: 10px; } .eg-lockup__firma{ font-size: 13px; } } /* B6: il preloader e' #111 e non ospita piu' il PNG con la sua targa bianca. La wordmark e' vestita sopra (.eg-site-name). */ /* ============================================================ 4. LA HERO — solo l'accento della filigrana ------------------------------------------------------------ Tutto il resto della hero (foto full-bleed con velo .64, pillola, titolo a 100px bianco con la seconda riga in accento, paragrafo, bottone tondo «Preventivo certo») e' del tema e funziona: non c'e' niente da correggere, e infatti qui non c'e' niente. L'unica riga necessaria: la filigrana `.hero-text` ha l'oro del tema SCRITTO A MANO nel gradiente (`linear-gradient(180deg,#CAA05C…)`, main.css) invece che nella variabile. E' l'unico punto del tema in cui l'accento non passa da --tl-color-theme-primary: senza questa regola resterebbe una filigrana dorata sopra un sito azzurro. ============================================================ */ .hero-section-6 .hero-text span{ background: linear-gradient(180deg, #139DD9 14.9%, rgba(153, 153, 153, 0) 65.95%); -webkit-background-clip: text; background-clip: text; } /* La filigrana del demo e' UNA PAROLA su UNA riga («Interior»). La nostra sono due («Dal 1960») e a 390px il blocco, che e' in posizione assoluta e quindi largo quanto il contenuto disponibile, andava a capo: due righe di lettere alte 150px, cioe' mezza schermata di filigrana. `nowrap` la riporta a una riga sola come nel demo; il corpo scende perche' su 390px una riga da 320px sarebbe larga 1.200px, e il ritaglio (.hero-section-6.overflow-hidden) coprirebbe tutto tranne una lettera. Non si sposta e non si toglie l'overflow-hidden: senza quel ritaglio si aprirebbe uno scorrimento laterale su ogni schermo sotto i 1.600px. */ .hero-section-6 .hero-text span{ white-space: nowrap; } @media only screen and (max-width: 991px){ .hero-section-6 .hero-text span{ font-size: 190px; } } @media only screen and (max-width: 767px){ .hero-section-6 .hero-text span{ font-size: 120px; } } /* ============================================================ 5. LA TESTATA A 1280 — misurata, non stimata ------------------------------------------------------------ IL DIFETTO: a 1280px le sette voci italiane andavano a capo e la testata si sdoppiava su due righe, con la firma di gruppo a mezz'aria. Il demo non lo fa perche' ha sei voci inglesi corte («Home», «Blog», «Contact»): le nostre sono «Riqualificazione energetica» e «Ristrutturazioni». LE MISURE, a 1280 (contenitore utile 1256px: main.css porta .container a max-width 1795px, quindi qui e' il viewport meno 24px di gronda): logo del tema 150px logo nostro contenuto ~54px column-gap left-wrap 56px sette voci a 16px ~765px + 14 margini da 15px = 975px bottone CTA ~170px 150 + 56 + 975 + 170 = 1351 > 1256 -> va a capo. LA CORREZIONE usa le manopole che il tema ha gia' e nella banda in cui il tema stesso stringe (sotto i 1399 nasconde il recapito, sotto i 1199 porta i margini a 10px): fra 993 e 1399 le voci prendono il margine dei 1199 e mezzo punto in meno di corpo, e la colonna di sinistra respira 24px invece di 56. 54 + 24 + (717 + 112) + 170 = 1077 su 1256 -> una riga sola, con 179px di margine di sicurezza per un menu che un domani si allunghi. Sopra i 1400 non cambia niente rispetto al demo. ============================================================ */ @media only screen and (min-width: 993px) and (max-width: 1439px){ .header .primary-header-inner .header-left-wrap{ column-gap: 24px; } .header .primary-header-inner .header-menu-wrap ul li{ margin: 0 8px; } .header .primary-header-inner .header-menu-wrap ul li a{ font-size: 15px; } } /* ------------------------------------------------------------ LE DUE BANDE CHE MANCAVANO — 2026-08-20, MISURATE una per una. Le tre righe qui sopra bastavano a 1280 (ed era la misura che le ha scritte), ma la testata andava a capo in DUE altre bande, che nessuno aveva guardato. `.primary-header-inner` e' un flex che va a capo: quando la somma non ci sta, il blocco di destra (recapito + CTA) finisce SOTTO il menu, a sinistra, e la testata diventa alta 152px invece di 96. MISURATO (larghezza utile = viewport meno 24px di gronda; il `.container` di questa sezione e' fluido): 993px utili 969 servivano 1085 -> a capo (misurato: h 152) 1024px utili 1000 servivano 1085 -> a capo 1100px utili 1076 servivano 1085 -> a capo 1120px utili 1096 servivano 1085 -> una riga 1400px utili 1376 servivano 1395 -> a capo: a 1400 il TEMA rimette il recapito telefonico (`.header-contact`, 138px) e nello stesso punto finiva la nostra banda, quindi il menu tornava a corpo 16 e margini 15 (+155px) nel momento in cui arrivava piu' roba. Due salti nello stesso pixel. 1440px utili 1416 servivano 1239 -> una riga Da qui le due correzioni: la banda base arriva a 1439 (non 1399), cosi' il recapito entra mentre il menu e' ancora compatto; e sotto i 1120 si stringe di piu', con le stesse manopole del tema — margini fra le voci, corpo del menu, gronda della colonna di sinistra, e il bottone che passa al padding simmetrico. La firma di gruppo NON si nasconde: e' un obbligo di rete (regia §0), e in questa banda scende solo di un punto, come fa il tema col suo menu. ------------------------------------------------------------ */ @media only screen and (min-width: 993px) and (max-width: 1119px){ .header .primary-header-inner .header-left-wrap{ column-gap: 14px; } .header .primary-header-inner .header-menu-wrap ul li{ margin: 0 4px; } .header .primary-header-inner .header-menu-wrap ul li a{ font-size: 14px; } .header .primary-header-inner .eg-lockup{ gap: 8px; } .header .primary-header-inner .eg-lockup__firma{ font-size: 13px; } .header .primary-header-inner .header-btn-wrap .tl-primary-btn{ font-size: 15px; padding: 10px 18px; } } /* Il recapito in testata resta com'e' nel tema, compreso il fatto che sotto i 1400px sparisce (`.header-contact{display:none}`): e' una sua scelta di densita' e sul telefono il numero e' nel pannello, nel blocco «Raccontaci il tuo cantiere» e nel footer. Non si forza. */ /* ------------------------------------------------------------ B1 DI WP9 (qa-report §5.6) — IL FONDO DELLA CTA DI TESTATA. MISURATO in pagina: `.header-btn` ha `color:#fff` a 16px sopra `background-color:var(--tl-color-theme-primary)`, cioe' bianco su #139DD9 = **3,06:1**, contro i 4,5 che AA chiede al testo normale. E' la CTA principale del sito, su tutte e sette le pagine. La regola del tema e' `.header .primary-header-inner .header-right-wrap .header-btn{ background-color:var(--tl-color-theme-primary)}` (0,4,0) quindi qui serve la stessa specificita' o piu': una regola a due classi NON aggancia (e' l'errore gia' fatto e misurato sulle FAQ, §10.12). NON si cambia --tl-color-theme-primary: quello e' l'accento di tutto il sito (pallini, bordi, icone, hover) e sulle fasce scure sta a 5,03-6,32:1. Si cambia il FONDO DI QUESTO COMPONENTE, che e' l'unico posto dove l'accento porta del bianco a 16px. Bianco su #0F7EAF = **4,54:1**. Il bordo e l'hover del tema restano suoi: `:hover` riempie con `:before` bianco e il testo diventa #191919 (16,4:1). ------------------------------------------------------------ */ .header .primary-header-inner .header-right-wrap .header-btn{ background-color: var(--alpi-accento-fondo); } /* Niente regola per `.header-btn .icon`: il markup del guscio scrive `Preventivo certo` senza tondo (verificato sulle 7 pagine), quindi sarebbe una regola morta. */ /* ============================================================ 6. ACCESSIBILITA' — quello che base.css portava, piu' il fuoco ------------------------------------------------------------ .skip-link e .visually-hidden erano le uniche due classi di components/shared/base.css che il markup del guscio usa davvero (misurato: 7 e 2 occorrenze sulle 7 pagine; dei suoi componenti — .card .btn .kicker .tag .grid .stat e il suo elenco col motivo a punta — zero: il nome di quella classe non si scrive nemmeno qui, perche' il controllo di WP8 sul motivo abolito e' un grep secco su tutto il ramo e deve tornare zero senza falsi allarmi). Il foglio e' uscito dalla catena perche' riscriveva la tipografia del tema: le due classi restano, con le stesse dichiarazioni. `left:-9999px` non e' un difetto: e' la tecnica standard per un elemento fuori schermo che deve restare leggibile dagli assistivi e tornare visibile al fuoco. ============================================================ */ .skip-link{ position: absolute; left: -9999px; top: 0; z-index: 1100; background: var(--tl-color-heading-primary); color: #FFFFFF; font-family: var(--tl-ff-heading); padding: 12px 20px; border-radius: 0 0 10px 0; } .skip-link:focus{ left: 0; } .visually-hidden{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Il tema si affida all'outline di sistema e in piu' punti lo azzera. Requisito AA: ogni elemento attivabile deve mostrarsi quando ha il fuoco, anche sopra le fotografie. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{ outline: 2px solid var(--alpi-accento-scuro); outline-offset: 2px; } .hero-section-6 a:focus-visible, .service-section-5 a:focus-visible, .counter-section a:focus-visible, .request-section a:focus-visible, .request-section button:focus-visible, .footer-section a:focus-visible, .mobile-side-menu a:focus-visible, .mobile-side-menu button:focus-visible, .header a:focus-visible, .header button:focus-visible, /* AGGIUNTE CON WP9. Erano le due fasce scure che mancavano all'elenco, e si sono viste ricalcolando --alpi-accento-scuro (B2): l'anello di fuoco su fondo scuro deve stare sopra 3:1 e quel token, che serve al TESTO su fondo chiaro, sulle fasce scure scende a 3,47. Le due fasce hanno link veri: la testata di pagina porta le briciole (`.eg-briciole a`, 6 pagine) e la fascia di chiusura porta i due bottoni della CTA. Sopra una fotografia l'anello si fa bianco, come nelle altre otto. */ .page-header a:focus-visible, .eg-cta a:focus-visible, .eg-cta button:focus-visible{ outline-color: #FFFFFF; } /* ------------------------------------------------------------ B3 DI WP9 (qa-report §5.6) — I SETTE BOTTONI DELL'ACCORDION NON MOSTRAVANO IL FUOCO, E LA REGOLA QUI SOPRA C'ERA GIA'. E' una COLLISIONE DI SPECIFICITA', misurata con Tab veri e getComputedStyle su document.activeElement (4 bottoni in index.html, 4 in ristrutturazioni.html, tutti e otto `outline-width: 0px`): bootstrap.min.css `.accordion-button:focus{outline:0;box-shadow:var(--bs-accordion-btn-focus-box-shadow)}` -> (0,2,0), e azzera l'OUTLINE main.css `.faq-content-2 .faq-accordion .accordion-item .accordion-button{box-shadow:none}` -> (0,4,0), e spegne anche l'ANELLO che bootstrap metteva al posto dell'outline alpi.css:505 `button:focus-visible{outline:2px solid …}` -> (0,1,1): PERDE contro (0,2,0). Le due regole del tema si annullano a vicenda e non resta niente: nessun outline (bootstrap) e nessuna ombra (main.css). La prova che la nostra regola agganciava comunque e' che `outline-offset` misurava 2px mentre `outline-width` misurava 0: passava la proprieta' che bootstrap non nomina, non quella che azzera. Servono i QUATTRO selettori di accordion del tema, che sono (0,4,0)+ -> con `:focus-visible` battono bootstrap senza `!important`. `.faq-content` e `.service-faq` oggi non sono in pagina (usate solo `.about-content-6 .about-faq` in home e `.faq-content-2` in ristrutturazioni): restano perche' sono i quattro modi in cui questo tema scrive un accordion, e la prossima pagina che ne monta uno non deve ritrovare il difetto. Stesso elenco di §10.12. L'accento SCURO e non il bianco: gli accordion stanno su fondo chiaro. ------------------------------------------------------------ */ .faq-content .faq-accordion .accordion-item .accordion-button:focus-visible, .faq-content-2 .faq-accordion .accordion-item .accordion-button:focus-visible, .about-content-6 .about-faq .faq-accordion .accordion-item .accordion-button:focus-visible, .service-details-content .service-faq .faq-accordion .accordion-item .accordion-button:focus-visible{ outline: 2px solid var(--alpi-accento-scuro); outline-offset: 3px; } /* ============================================================ 7. I COMPONENTI NOSTRI (.eg-*) ------------------------------------------------------------ Sono i pochi blocchi che il tema non ha: il guscio e le sette pagine li introducono e nessuno li veste. La regola che mi sono dato: ogni componente prende tipografia, colori e raggi dal TEMA (variabili --tl-*), cosi' sta nella stessa pagina invece di sembrarci appoggiato sopra. ============================================================ */ /* --- 7.1 Elenco con la freccia tonda del tema ------------------------ B10 DEL MANDATO CORRETTIVO (2026-08-20). Fino a ieri qui c'era un FILETTO ORIZZONTALE disegnato con `.eg-lista li::before` — 14x2px in accento — nato per non usare il motivo a punta del tema (`fa-circle-chevron-right`, abolito dalla regia R7). Ha esagerato: il divieto e' sul MOTIVO, non sulle icone, e CLAUDE.md §2.3 dice l'opposto, che le icone del tema restano. Un trattino di due pixel accanto a una voce di elenco non dice niente; il tondo del tema dice «questa voce e' una cosa in piu'». Ora lista() scrive `` e qui c'e' la sua misura. Il tema veste gia' `li i` dentro questi elenchi (`.content-info .content-list li i{color:var(--tl-color-theme-primary)}`): il colore lo mette lui, noi mettiamo il corpo e la posizione — perche' il tema incollava la alla prima parola e le righe di continuazione rientravano sotto il bollino invece che sotto il testo. L'accento pieno su bianco e' 3,88:1: sopra il 3:1 richiesto ai COMPONENTI GRAFICI, e questo lo e' (un marcatore d'elenco, aria-hidden, non testo). */ .eg-lista{ list-style: none; margin: 0; padding: 0; } .eg-lista li{ position: relative; padding-left: 34px; } .eg-lista li > i{ position: absolute; left: 0; top: .62em; /* allineato alla prima riga, non al blocco */ font-size: 18px; line-height: 1; color: var(--tl-color-theme-primary); } /* IL FLEX DEL TEMA VA TOLTO, e serve la specificita' giusta o non succede niente. Il tema dichiara `display:flex;align-items:center;column-gap:10px` su questi

  • in DUE posti, con due selettori diversi: .content-info .content-list li (0,2,1) .service-details-content .service-details-list-wrap ul li (0,2,2) Con il flex attivo, un
  • che contiene `Cappotto termico: coibentazione...` diventa DUE colonne: l'etichetta stretta a sinistra e la descrizione a destra. MISURATO su riqualificazione-energetica.html a 390px: «Cappotto termico» si incolonnava su due righe in 100px mentre accanto il testo ne aveva 240. Sei voci cosi' di fila non si leggono. In un elenco il testo e' UNA colonna e l'etichetta apre la frase: display block, e il segno resta dove lo mette il ::before assoluto qui sopra. `line-height` torna a 1.5: il tema lo mette a 1 perche' da lui queste voci sono di tre parole e non vanno mai a capo. */ .eg-lista li, .content-info .content-list.eg-lista li, .service-details-content .service-details-list-wrap ul.eg-lista li{ display: block; line-height: 1.5; } /* --- 7.2 Passi numerati (service-details-items del tema) ------------- */ .eg-passo__numero{ font-family: var(--tl-ff-heading); font-size: 20px; line-height: 1; color: var(--tl-color-theme-primary); margin: 0; } /* MISURATO su costruzioni.html a 390px: .service-details-item usciva a 655px, cioe' 265px oltre il viewport, e non si vedeva perche' main.css mette overflow-x:hidden su html e body. La causa e' nel tema: `.service-details-items{grid-template-columns:repeat(2,1fr)}` senza nessuna media query. Sotto i 768px una colonna sola; il min-width:0 toglie il blocco alla radice (un elemento di griglia ha min-width:auto e non si stringe). */ .service-details-content .service-details-items .service-details-item, .service-details-content .service-details-items .service-details-item .content{ min-width: 0; } @media only screen and (max-width: 767px){ .service-details-content .service-details-items{ grid-template-columns: 1fr; } } /* LA COLONNA DA 80px CHE NON CONTIENE NIENTE — C1 del mandato correttivo (2026-08-20), e la causa esatta dei «250-266px» che i revisori hanno misurato. Il tema scrive .service-details-content .service-details-items .service-details-item{ display:grid; grid-template-columns:80px 1fr; grid-gap:20px } e gli 80px sono per il TONDO in accento con l'icona PNG del venditore. Il nostro passi() al suo posto mette il numero («01»), che ne occupa ~30: 50px per colonna buttati, piu' i 20 di gap. MISURATO su costruzioni.html a 390px: `.eg-passo .content` largo 266px su 366 disponibili, cioe' 34 caratteri per riga. La colonna diventa `auto`: la larghezza del numero, non quella dell'icona che non c'e'. E il selettore ha la specificita' del tema piu' una classe nostra, perche' `.eg-passi .eg-passo` (due classi) perdeva contro le tre del tema — era il difetto della prima stesura di questa correzione. Il tema mette anche `max-width:334px` sul

    : sotto i 768 va via, o il testo resta incolonnato anche a colonna piena. */ .service-details-content .service-details-items .service-details-item.eg-passo{ grid-template-columns: auto 1fr; grid-gap: 14px; } @media only screen and (max-width: 767px){ /* a colonna singola il numero va SOPRA il titolo, in linea: e' la stessa forma che B12 chiede per le cinque prove, ed e' la piu' leggibile a 360-390px */ .service-details-content .service-details-items .service-details-item.eg-passo{ display: block; } .service-details-content .service-details-items .service-details-item.eg-passo .content p{ max-width: none; } } /* --- 7.3 Briciole, occhiello e sommario della testata di pagina ------ Il tema mette qui `

    Home — About Us

    `: un titolo finto che nel DOM viene PRIMA dell'h1. Il markup nostro le fa diventare un