/* ============================================================ faro.css — foglio di marca di Faro 2016, sopra il tema Antra (theme/antra/index-5.html, «versione 5», header base). Modellato su sites/studior/assets/css/studior.css e sites/alpiadelmo/assets/css/alpi.css, che sono la ricetta approvata: 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 -> il blu notte di Faro 2016) 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 non abbiamo o su una misura che il nostro testo non rispetta; 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 una scala tipografica o un sistema di spaziature. Il tema decide. OGNI OVERRIDE HA ACCANTO LA MISURA CHE L'HA RESO NECESSARIO. Se la misura non c'e', la riga non doveva esserci. ORDINE DI CARICAMENTO (lo scrive tools/faro-shell.mjs): bootstrap · fontawesome · venobox · nice-select · carouselTicker · animation · swiper · main.css (il TEMA, intatto) -> variables.css (solo :root, i token di marca di build/faro) -> faro-guscio.css (le riparazioni strutturali, GENERATO) -> faro.css (questo file) components/shared/base.css NON e' nella catena: ridefinisce .container (72rem) e h1-h4/p/a sopra il tema, e la tipografia del tema e' criterio di collaudo (CLAUDE.md §1). Stessa decisione di alpi (2026-08-20), savorani (2026-09-07) e studior (2026-09-08). ============================================================ */ /* ============================================================ 1. LO STRATO DI VARIABILI DEL TEMA E L'ACCENTO ------------------------------------------------------------ CONTRASTI MISURATI SULLE SUPERFICI VERE, non su bianco: il fondo di pagina del tema e' #F6F6F6 (`body{background-color:#f6f6f6}`, e `.tl-bg-color` idem); le fasce scure di index-5 sono #1C1C1D (hero) e #151515 (i quattro pilastri); il velo della CTA e' nero al 54%. #2F4A75 (accento, --ramo-investimenti) su #FFFFFF 8,91 · su #F6F6F6 8,24 bianco sopra 8,91 -> segni, testo su chiaro, fondo di componente col bianco sopra: ok #263C5F (--color-primary-strong) su #F6F6F6 10,26 -> stati premuti e testo piccolo, con margine #698CC3 (--color-primary-on-dark) su #191919 5,14 · #1C1C1D 4,98 · #151515 5,34 -> testo e segni sulle fasce scure PIENE -> e' anche il colore della parola evidenziata dentro i titoli bianchi e del fuoco visibile sulle superfici scure (art direction §3.2 e §3.7: la tavola dei colori la fissa il ui-designer, qui si applica e si misura) #0F70B7 (blu di gruppo) su #F6F6F6 4,83 -> SOLO firma endorsed e footer di gruppo (regola di piattaforma) #7FB6E0 su #191919 8,10 · su #151515 8,41 -> la firma endorsed sulle superfici scure TOKEN CORE IMMUTABILI: qui non si ridefinisce nessun --ink-*, --sand-*, --blue-*; si leggono e si usano. I valori vengono da tokens/brand/faro.json (build/faro/variables.css). ============================================================ */ :root{ --tl-color-theme-primary: #2F4A75; /* L'ACCENTO: cambia tutto insieme */ --fa-accento: #2F4A75; --fa-accento-scuro: #263C5F; /* stati premuti, testo piccolo su chiaro */ --fa-accento-su-scuro: #698CC3; /* testo e segni su fascia scura piena */ --fa-accento-soft: #E9EEF6; /* SOLO sfondo (token primary-soft) */ --fa-blu-gruppo: #0F70B7; /* SOLO firma endorsed e footer di gruppo */ --fa-blu-gruppo-chiaro: #7FB6E0; /* la firma sulle superfici scure */ /* IL PUNTO D'ARRIVO DELLE ANCORE. La testata agganciata di questo tema misura 88px a 390 e 98px a 1280 (`.primary-header.fixed`): 110px sono la piu' alta delle due piu' un filo d'aria, cosi' il titolo della sezione richiesta si legge sotto la barra invece di finirci dietro. LA LEGGE ANCHE IL JAVASCRIPT: `faro-menu.js` prende questo valore da getComputedStyle invece di riscriverlo, cosi' la misura sta in UN posto solo (senza JS agisce lo `scroll-margin-top` del §6). */ --fa-ancora-offset: 110px; /* caratteri del tema; corretto solo il FALLBACK. Il tema scrive `--tl-ff-heading: 'Cal Sans', serif`: se Cal Sans non carica, i titoli passano da una sans geometrica a un Times, e a 92px nella hero il salto di larghezza e di interlinea sposta tutto l'impaginato. system-ui e' molto piu' vicina per metrica. */ --tl-ff-heading: 'Cal Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --tl-ff-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; --tl-ff-p: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; /* colori del tema RIDICHIARATI: se il :root di main.css non arrivasse alla pagina (e' successo sul portale, ed e' il bug noto di CLAUDE.md §2.2), 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-bg-2: #ffffff; --tl-color-grey-1: #59585D; --tl-color-grey-2: #9F9FA4; --tl-color-border-1: #E3E3E8; --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; /* l'accordion del tema scrive `--lt-` invece di `--tl-`: e' un refuso del venditore, e senza queste due righe il testo delle risposte eredita `color: inherit` (serve a WP4, che monta le FAQ) */ --lt-color-heading-primary: #191919; --lt-color-text-body: #4D4D52; } body{ font-family: var(--tl-ff-body); } h1, h2, h3, h4, h5, h6, .section-title, .sub-heading, .tl-primary-btn, .cta-btn{ font-family: var(--tl-ff-heading); } /* ============================================================ 2. LINGUA — via il Title Case, «edilgetica» minuscolo ------------------------------------------------------------ Il tema applica `text-transform: capitalize` a titoli, voci di menu e bottoni: in inglese e' una convenzione tipografica, in italiano e' un errore di ortografia, e su un titolo di 92px si vede da lontano («La Tua Casa, Un Unico Referente»). L'occhiello (`.sub-heading`) resta MAIUSCOLO: e' del tema, e in maiuscolo «FARO 2016 · SOCIETÀ IMMOBILIARE INTEGRATA» non ha maiuscole sbagliate. ============================================================ */ .section-heading .section-title, .header .primary-header-inner .header-menu-wrap ul li a, .tl-primary-btn, .cta-btn, .feature-item .title, .project-item-5 .project-content .title, .process-item-wrap-5 .process-item-5 .content .title, .counter-item .sub-title, .footer-list li a, h1, h2, h3, h4, h5, h6{ text-transform: none; } /* L'OCCHIELLO E' UN

(TRAPPOLA 7: come

aveva data-text-animation e restava invisibile senza JS). Il tema lo veste con `.section-heading .sub-heading`, che vale anche su un

, ma le regole di paragrafo gli aggiungono `margin-bottom:15px` e `line-height:1.625`: MISURATO su alpi, la pillola cresceva da 30 a 44px di altezza. Qui torna la geometria dell'h4 del tema. */ .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; /* LA PILLOLA NON E` UN PARAGRAFO, anche se ora e` un

. main.css da` `width:100%` ai

di certi contenitori, e la regola varrebbe anche su di lei: il bordo arriverebbe a fine colonna con il testo finito a un terzo. width:auto la rimanda a stringersi sul testo, come fa l`

del tema. */ width: auto; } /* il nome del gruppo e' sempre minuscolo, anche dentro un titolo */ .eg-lockup__firma, .eg-endorse{ text-transform: lowercase; } /* ============================================================ 3. IL LOCKUP — il wordmark (o il PNG di WP3) + la firma endorsed ------------------------------------------------------------ Faro 2016 non ha un marchio storico. Finche' WP3 non consegna i due PNG (`faro-2016-340.png` su chiaro, `faro-2016-scuro-360.png` su scuro), il guscio rende un WORDMARK TESTUALE, che e' esattamente quello che fa il demo: index-5 monta in testata un file che e' la scritta «antra» in bianco, alta 40px. Il wordmark e' un dentro l', non un

e non un : il nome accessibile del link non dipende da un file che potrebbe non arrivare. ============================================================ */ .eg-lockup{ display: inline-flex; align-items: baseline; column-gap: 10px; flex-wrap: wrap; } /* MISURATO: con il PNG a max-height 44px l' chiudeva a 43,98px e shoot.mjs lo contava sotto la soglia dei 44. min-height lo fissa. */ .eg-lockup__nome{ display: inline-flex; align-items: center; min-height: 44px; } .eg-wordmark{ font-family: var(--tl-ff-heading); font-size: 30px; line-height: 1.1; letter-spacing: .01em; color: var(--tl-color-common-white); white-space: nowrap; } .eg-wordmark b{ font-weight: 400; color: var(--fa-accento-su-scuro); } /* il pannello del menu mobile e' l'UNICA superficie chiara del guscio (main.css riga 813: `.mobile-side-menu{background-color:var(--tl-color-common-white)}`) */ .eg-lockup--side .eg-wordmark{ color: var(--tl-color-heading-primary); } .eg-lockup--side .eg-wordmark b{ color: var(--fa-accento); } /* il logo, quando WP3 lo consegna: `img{max-width:100%}` del tema senza `height:auto` schiaccerebbe il PNG appena una regola ne stringe la larghezza (faro-guscio.css §1 rimette height:auto; qui c'e' il tetto) */ .eg-logo{ max-height: 44px; width: auto; } /* la firma endorsed: e' il link al portale, e vive su superfici scure (testata, preloader, footer) e su una chiara (il pannello) */ .eg-lockup__firma{ font-family: var(--tl-ff-body); font-size: 13px; line-height: 1; color: var(--fa-blu-gruppo-chiaro); white-space: nowrap; /* 28px di bersaglio: sopra il minimo AA di 24px per un link inline. A 44 la barra della testata andava a due righe (misurato su studior a 768), e la firma NON e' un controllo autonomo: e' la seconda meta' di un lockup. */ padding: 7px 0; } .eg-lockup__firma:hover, .eg-lockup__firma:focus-visible{ color: var(--tl-color-common-white); } .eg-lockup--side .eg-lockup__firma{ color: var(--fa-blu-gruppo); } .eg-lockup--side .eg-lockup__firma:hover{ color: var(--fa-accento-scuro); } /* nel preloader la firma e' TESTO e non link: tutto il preloader e' aria-hidden e main.js lo rimuove dopo qualche secondo */ .eg-lockup__firma--testo{ display: inline-block; } .eg-site-name{ display: flex; align-items: baseline; column-gap: 10px; } /* sotto i 576px la firma non ci sta accanto al marchio: va sotto, e la testata resta su una riga sola */ @media only screen and (max-width: 575px){ .eg-lockup--header{ flex-direction: column; row-gap: 0; } /* MISURATO a 360: con padding 2px la firma chiudeva a 16px, sotto anche il minimo AA di 24 per un link inline. Il padding resta, cala il corpo. */ .eg-lockup--header .eg-lockup__firma{ font-size: 12px; padding: 6px 0; } .eg-wordmark{ font-size: 24px; } } /* ============================================================ 4. LA HERO — un solo scaglione ritoccato, e la misura che lo impone ------------------------------------------------------------ Il tema scrive 110px sul titolo della hero (`.hero-wrap-2 .hero-content-2 .section-heading .section-title`), 80 sotto i 1200 e 60 sotto i 768. MISURATO con getBoundingClientRect() su OGNI scaglione, con l'H1 del copy §2.1 dentro (che e' piu' lungo del titolo del demo): 360 60px -> testo fino a 328 in una colonna di 348 TIENE 390 60px -> testo fino a 351 in una colonna di 366 TIENE 768 80px -> testo fino a 743 in una colonna di 744 TIENE 1024 80px -> testo fino a 536 in una colonna di 550 TIENE 1280 110px -> CINQUE righe, 605px di titolo, e la fotografia dell'hero scende a y=895, cioe' FUORI dalla prima schermata di un portatile (800px). Nel demo la fotografia sta a y=675 ed e' meta' del colpo d'occhio. 92px -> quattro righe, 405px, fotografia a y=695: la stessa resa del demo. 92 = 110 x (15/18), cioe' il rapporto fra i caratteri della riga piu' lunga del demo («Interior Design») e della nostra («un unico referente»). Stesso metodo di studior.css §4. 1600 92px -> tre righe, fotografia a y=594 (110px terrebbe, ma la scala deve restare una sola sopra i 1200). Gli altri due scaglioni NON si toccano: il corpo del tema tiene, e una riga di CSS che non serve e' una riga che allontana dal demo. ============================================================ */ @media only screen and (min-width: 1200px){ .hero-wrap-2 .hero-content-2 .section-heading .section-title{ font-size: 92px; } } /* LA PAROLA EVIDENZIATA DENTRO UN TITOLO BIANCO. Il tema la dipinge con l'accento pieno (main.css riga 75): #2F4A75 su #1C1C1D fa 1,73:1 e su #151515 2,05:1, cioe' sparisce. Ci va la variante chiara che l'art direction §2 calcola per i fondi scuri, #698CC3: 4,98:1 sull'hero e 5,34:1 sulla fascia dei pilastri. Specificita' (0,4,0) contro la (0,3,0) del tema. */ .white-content .section-heading .section-title span, .section-heading.white-content .section-title span, .cta-wrap-5 .section-heading .section-title span{ color: var(--fa-accento-su-scuro); } /* il pallino della pillola sulle fasce scure: stesso motivo, stessa cura (main.css riga 73 lo dipinge con l'accento pieno) */ .white-content .section-heading .sub-heading:before, .section-heading.white-content .sub-heading:before{ background-color: var(--fa-accento-su-scuro); } /* ============================================================ 5. LA TESTATA — header base, il tondo del menu, il pannello ============================================================ */ /* --- F6: il chevron della tendina diventa il FILETTO ------------------ Il motivo a punta e' abolito (CLAUDE.md §2.3). Il tema lo scrive in DUE posti: main.css riga 701 (`.menu-item-has-children:after`, in barra) e riga 857 (`.mean-expand:before`, dentro il pannello mobile, dove si vede solo ad accordion aperto). Il sito di Faro 2016 non ha tendine — quattro pagine non ne hanno bisogno — ma le due regole restano: il giorno in cui WP4 ne aggiunge una, il chevron non rientra dalla finestra. `\f068` = fa-minus, che e' ancora un glifo del tema. Sul pannello via anche il `rotate(90deg)` della voce aperta: su un filetto diventerebbe un trattino verticale. */ .header .primary-header-inner .header-menu-wrap ul .menu-item-has-children:after{ content: "\f068"; } .mean-bar .mean-nav.mean-nav > ul li a.mean-expand:before{ content: "\f068"; } .mean-bar .mean-nav.mean-nav > ul li a.mean-expand.mean-clicked:before{ transform: none; opacity: .55; } /* --- «Home» e' una voce del SOLO pannello mobile ---------------------- In barra il marchio e' gia' il link alla home, e una voce «Home» a dieci pixel dal marchio e' rumore. Sotto i 992px il pannello lo riempie meanmenu clonando questa