/* ========================================================================== gio.css — foglio di marca di Giò Soluzioni Casa · gruppo edilgetica -------------------------------------------------------------------------- Che cos'è. Il tema Antra è comprato e generico: parla inglese, ha l'accento blu del portale e una scala tipografica che non è la nostra. Questo foglio non riscrive il tema: lo corregge dove sbaglia e gli dà la voce di Giò — «la persona di fiducia che ti accompagna in casa: caldo, umano, concreto» (docs/satellite-personalities.md §gio). Ordine di caricamento (tools/gio-shell.mjs): bootstrap … nice-select … main.css → variables.css → base.css → gio.css Quindi qui si può sovrascrivere sia il tema sia base.css usando la cascata: a parità di specificità vince chi viene dopo. `!important` è usato SOLO dove il valore da battere è uno stile inline scritto da JavaScript, e ogni occorrenza è commentata: sono SETTE in tutto il file e stanno tutte nel §14 — tre per rimettere in vista i blocchi che il tema anima e quattro dentro `prefers-reduced-motion`, dove la regola d'accessibilità deve battere qualunque cosa. Cercare "important" per contarle. Regole di casa rispettate qui dentro: - «edilgetica» sempre minuscolo · separatore «·» · niente emoji; - motivo chevron ABOLITO: mai come bullet, divider, decorazione o pseudo-elemento. Dove serve un punto elenco c'è un filetto orizzontale; - il blu di gruppo (--color-group) solo per la firma endorsed, il footer di gruppo e i link al portale: mai in CTA, tag, barre o hover locali; - nessun colore scritto a mano: solo i token di variables.css. Accento terracotta — dove sì, dove no (§gio + docs/contrast-report.md): sì barra sopra il kicker, badge/tag delle fasi, CTA primaria piena, hover dei link di sezione, numeri dei percorsi; no mai come campitura di sezione, mai su testi lunghi, mai nel footer. AA: --color-primary #c05b3c vale 4,37:1 su bianco → SOLO elementi grandi e componenti di interfaccia (≥3:1). Per il testo si usa sempre --color-primary-strong #bc593b (4,54:1 su bianco). Su sand nemmeno strong basta (4,17:1): lì il testo d'accento diventa --ink-800 (10,94:1) e resta accento solo il filetto. La commutazione è automatica, vedi §1.3. Componenti, non pagine. Le pagine interne sono state scritte da un altro agente mentre questo foglio nasceva: qui si aggancia SOLO il vocabolario del tema (.section-title, .tl-primary-btn, …) e le classi eg-*. Nessun selettore dipende dall'ordine dei figli o dalla struttura di una singola pagina — l'unica eccezione è il :nth-child del §11.1, che serve a BATTERE un :nth-child del tema e non a descrivere una pagina. Gli attributi data-gio-* sono il contratto del JavaScript (docs/gio-modulo-ricerca.md §7.1) e NON compaiono mai come selettori: l'unica eccezione ammessa dal contratto è [hidden], che è HTML standard. INDICE 1 il ponte con le variabili del tema 9 la card immobile 2 lingua (Title Case, «edilgetica») 10 il motore di ricerca 3 tipografia e superfici 11 i blocchi della home 4 ritmo delle sezioni 12 footer 5 bottoni 13 note di bozza 6 testata 14 accessibilità 7 hero 15 le otto pagine interne 8 la barra di ricerca 16 modo revisione e residui 17 la regola scritta: scala, occhiello, ritmo, superfici (mappa §17.8, pannelli in colonna §17.10) 18 modo revisione e residui DOVE SI GUARDA PRIMA. Il §17 è l'unico capitolo che vale su tutte e nove le pagine insieme: ci sono scritte la scala dei titoli, la regola del colore dell'occhiello e il ritmo delle sezioni con la mappa delle superfici. Chi aggiunge una pagina legge quello, non misura gli screenshot. Chi aggiunge un BLOCCO dentro una delle due pagine lunghe legge il §17.10, che è la stessa regola applicata dentro una colonna. PESO: 170,3 KB non compresso (174.399 byte in UTF-8), 49,1 KB gzip, 3.988 righe — di cui il 56% sono commenti. Il foglio serve nove pagine, un tema comprato da correggere e un motore di ricerca. ========================================================================== */ /* ========================================================================== 1. IL PONTE CON IL TEMA Il tema centralizza colore e caratteri in variabili --tl-*. Ridefinirle è il modo più economico e meno invasivo di cambiargli voce: una regola qui sistema centinaia di regole in main.css, e i punti in cui il tema cambia idea (fondo scuro, footer) si governano ri-dichiarando la stessa variabile più in basso nell'albero, senza inseguire selettori. ========================================================================== */ :root{ /* --- l'accento del tema diventa il terracotta di ramo --------------------- Vale --color-primary-strong e non --color-primary perché main.css usa questa variabile anche per testo piccolo (hover dei link, numeri, voci di menu): strong regge 4,54:1 su bianco, primary si fermerebbe a 4,37:1. */ --tl-color-theme-primary: var(--color-primary-strong); /* --- i caratteri di gruppo al posto del Cal Sans del tema --------------- base.css ha già portato Montserrat/Source Sans su h1-h4 e sul corpo; qui si completa il lavoro per tutto ciò che il tema imposta con var(--tl-ff-*) (bottoni, occhielli, menu, footer, filigrane). Senza questo il sito resterebbe bilingue: titoli nostri, bottoni del tema. */ --tl-ff-heading: var(--font-display); --tl-ff-body: var(--font-body); --tl-ff-p: var(--font-body); /* --- i neutri del tema allineati ai token ------------------------------- Antra usa #191919 per i titoli e #4D4D52 per il corpo: due grigi che non stanno nella nostra scala. Passano a ink-900 e text-body, così l'inchiostro è uno solo su tutto il sito. */ --tl-color-heading-primary: var(--ink-900); --tl-color-text-body: var(--text-body); --tl-color-grey-1: var(--text-muted); --tl-color-grey-2: var(--ink-400); --tl-color-border-1: var(--line); --tl-color-bg-1: var(--surface-dark); /* --- variabili di questo foglio ----------------------------------------- --gio-accento colore ammesso per il TESTO d'accento sulla superficie corrente (cambia da solo entrando in sand o nel buio); --gio-filetto colore delle barrette decorative (non è testo: soglia 3:1); --gio-bordo-campo bordo dei campi di modulo: --line (1,31:1) non basta per un componente di interfaccia, che vuole 3:1 (WCAG 1.4.11 — docs/gio-modulo-ricerca.md §8.2); --gio-riga filetto di separazione fra blocchi. */ --gio-accento: var(--color-primary-strong); --gio-accento-titolo: var(--color-primary-strong); --gio-filetto: var(--color-primary); --gio-bordo-campo: var(--ink-400); --gio-riga: var(--line); --gio-campo-h: 46px; } /* main.css dichiara `img{max-width:100%}` e si ferma lì. È mezza regola: con gli attributi `width`/`height` in pagina (che servono, e servono giusti, per non far ballare il layout mentre le foto arrivano) l'altezza resta una misura assoluta mentre la larghezza viene compressa dal max-width. Risultato misurato su /home-staging: una foto 1200×686 impaginata a 446×800, cioè schiacciata del 68%. `height:auto` è l'altra metà della regola: l'altezza la ricava il browser dal rapporto vero. Sta qui e non su una classe perché il difetto è del foglio di base, non di un blocco. */ img{ height: auto; } /* Il tema dipinge il fondo pagina di #f6f6f6: un grigio freddo che non è nella nostra scala. La pagina è bianca, e il calore lo porta il sand. */ body{ background-color: var(--surface-page); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body); color: var(--text-body); } /* ========================================================================== 2. LINGUA — via il Title Case, via l'uppercase sul nome del gruppo Il tema applica text-transform:capitalize a titoli, menu e bottoni: è una convenzione inglese. In italiano «Richiedi La Valutazione» è un errore di ortografia, non una scelta grafica. ========================================================================== */ h1, h2, h3, h4, h5, h6, .section-heading .section-title, .header .primary-header-inner .header-menu-wrap ul li a, .service-details-left-content .service-details-cta .cta-btn a, .mean-bar .mean-nav.mean-nav > ul li ul li a, .tab-navigation button, .video-content .video-title, .shop-content .title, .post-meta li, .tl-primary-btn, .accordion-button, .service-item-4 .title, .project-item-2 .title, .blog-item .title, .eg-immobile-card__titolo{ text-transform: none; } /* L'occhiello resta in maiuscolo: è grafica, e in maiuscolo pieno non esistono iniziali sbagliate. UNA eccezione, e vale come regola di marca: nella hero l'occhiello è la firma endorsed «Giò Soluzioni Casa · gruppo edilgetica», e «edilgetica» va SEMPRE minuscolo. Lì l'uppercase è un bug di marca, non una scelta tipografica: si spegne su tutta la testata, non su un singolo nodo, così vale anche per le pagine interne che avranno un'altra hero. */ .sub-heading{ text-transform: uppercase; } .hero-section .section-heading .sub-heading, .hero-content .section-heading .sub-heading{ text-transform: none; letter-spacing: .01em; /* firma, non etichetta: niente maiuscoletto spaziato */ font-size: var(--text-sm); } /* La filigrana giganta del tema stampa il nome del sito: minuscolo, come il marchio. Vale per .service-text e .footer-text. */ .service-text span, .footer-text span, .about-text span{ text-transform: lowercase; } /* Il preloader del tema scriveva «ANTRA» in maiuscolo a 80px. Qui c'è il wordmark di Giò: nome proprio, quindi nessuna trasformazione. */ .preloader .site-name span, .eg-wordmark{ text-transform: none; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(1.5rem, 5vw, 2.75rem); letter-spacing: -.01em; } /* ========================================================================== 3. TIPOGRAFIA DI MARCA Il più morbido dei cinque satelliti: display 700 (mai 800, troppo duro), kicker in maiuscoletto terracotta, corpo a interlinea piena. ========================================================================== */ /* 3.1 Titoli ------------------------------------------------------------- */ /* .section-title del tema è 80px/400 in Cal Sans: la scala la danno i token. La classe batte il selettore di elemento di base.css, quindi va nominata. */ .section-title{ display: block; font-family: var(--font-display); font-weight: var(--weight-bold); /* 700: mai 800 su gio */ line-height: var(--leading-tight); letter-spacing: -.01em; color: var(--ink-900); overflow: visible; /* il tema tagliava i discendenti */ margin-bottom: 0; } /* 3.1-bis Come vanno a capo i titoli -------------------------------------- Difetto misurato: «Non siamo soli in questa casa» a 1600px cadeva su due righe con «casa» sola in fondo, e l'accento terracotta («in questa casa») spezzato a metà fra le due righe. Succedeva perché il titolo era libero di prendere tutta la colonna: 1104px, cioè ~34 battute a 60px, e l'ultima parola avanzava. Due leve, in quest'ordine: 1. una MISURA MASSIMA in unità di testo. Un titolo display non è un paragrafo: oltre le ~20 battute per riga l'occhio non lo legge più a colpo. Il limite in `ch` scala col corpo del carattere, quindi tiene a tutte e cinque le larghezze senza media query. 2. `text-wrap: balance`, che distribuisce le righe per larghezza uguale invece di riempire la prima e lasciare l'avanzo sull'ultima: è esattamente il rimedio all'ultima riga con una parola sola. Dove non è supportato (Safari < 17.5) il titolo torna al comportamento normale e la misura massima del punto 1 continua a valere: nessuna regressione. `pretty` non basta qui: lavora solo sull'ultima riga, e su un titolo di due righe la riga da sistemare è anche la prima. */ /* `balance` su TUTTI i titoli, non solo su quelli grandi: la parola sola in fondo capita anche a un h3 di card, e a 390px capita di più. Non porta max-width con sé, quindi è innocua sui titoli che vivono in colonna stretta. Il bottone dell'accordion è il blocco di testo del suo h3. */ h1, h2, h3, h4, h5, h6, .accordion-button{ text-wrap: balance; } /* La misura massima invece vale solo per i titoli di scala display, che sono quelli che hanno spazio per allungarsi troppo. */ .section-title, .details-title, .eg-page-header .title{ max-width: 24ch; } /* Nella hero il titolo vive già in metà griglia: lì il limite in ch arriverebbe prima della colonna e stringerebbe la hero. */ .hero-wrap .hero-content .section-heading .section-title, .slider-content-wrap .section-heading .section-title{ max-width: 18ch; } /* NIENTE `display:inline-block` sull'accento e niente `white-space:nowrap`: misurati tutti e due, e tutti e due peggiorano. L'inline-block diventa un blocco atomico che `balance` non sa più distribuire («Quello che possiamo dimostrare» passava da 2 righe a 4, una parola per riga); il nowrap su un accento di quattro parole sfonda il viewport a 390px, e uno sforamento è peggio di un a capo brutto. Dove cade l'accento si decide dove si scrive: nei generatori lo racchiude un'unità di senso intera, mai mezza locuzione. */ h1, h1.section-title{ font-size: var(--text-display); font-weight: var(--weight-bold); /* base.css qui metteva 800 */ } /* COLLISIONE DI CASCATA, risolta qui. `h2.section-title` (0,1,1) non ha mai vinto contro il tema: main.css (una riga, minificata) dichiara `.section-heading .section-title` (0,2,0) a 80/60/42/36px e `.section-heading .section-title.title-2` (0,3,0) a 60/50/42/36px. Risultato misurato: i titoli di sezione stavano a 60px invece dei 52px del token — il 15% più grandi di quanto la scala prevede, ed è una delle ragioni per cui andavano a capo male. Come già si fa in questo foglio per l'occhiello e per la hero, il rimedio è ricalcare la profondità del tema, non un !important. */ h2, h2.section-title{ font-size: var(--text-3xl); } .section-heading .section-title, .section-heading .section-title.title-2{ font-size: var(--text-3xl); } /* Il corpo di un titolo display deve guardare la COLONNA in cui vive, non la larghezza della finestra. La scala display è tarata su una colonna larga; nelle colonne strette — il box «Dicci cosa cerchi» di /immobili e /comprare-casa misura 446px anche a 1600 — la stessa misura spezzava il titolo in sei righe da due parole. Una media query non lo vede, perché la finestra è larga: lo vede solo una container query. Sta QUI e non più in alto perché deve venire dopo la riga di sopra: stessa specificità, e in caso di pari vince l'ultima. Dove le container query non ci sono (Safari < 16) il titolo resta grande e si comporta come prima: nessuna regressione, solo nessun miglioramento. */ .section-heading:not(.hero-content .section-heading), .eg-prove{ container-type: inline-size; } /* Il @media intorno al @container NON è ridondante: sotto i 992px la colonna stretta è tutto lo schermo, e senza questa guardia un titolo di sezione a 390px scendeva a 24px, cioè al corpo di un h3. La container query deve agire solo dove una colonna stretta è davvero una scelta d'impaginazione, non la conseguenza di uno schermo piccolo. Misurato: «Vendi o compri?» a 390px passava da 36px a 24px. */ @media (min-width: 62rem){ @container (max-width: 34rem){ .section-heading .section-title, .section-heading .section-title.title-2{ font-size: var(--text-2xl); } .details-title{ font-size: var(--text-2xl); } } } /* Il tema porta il titolo della hero a 120px con un selettore a tre classi (.hero-content .section-heading .section-title): per riportarlo nella scala dei token serve la stessa profondità, non un !important. 120px in Montserrat 700 su una frase di quattro parole italiane è una riga che non sta in nessuno schermo, e a 1440x900 spingeva la barra di ricerca sotto la piega. */ .hero-wrap .hero-content .section-heading .section-title, .slider-content-wrap .section-heading .section-title{ /* Non --text-display: quel token è tarato su una hero a colonna piena, mentre qui il titolo vive in metà griglia (col-lg-6 = 552px a 1440). A 72px «Vendiamo case che abbiamo guardato bene» prendeva CINQUE righe e 382px di altezza, e spingeva la barra di ricerca sotto la piega. A 3,5rem la stessa frase sta in tre righe e la hero respira. */ font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: var(--weight-bold); line-height: 1.08; } h3{ font-size: var(--text-xl); font-weight: var(--weight-bold); } /* La parola in accento dentro il titolo. Qui l'accento resta terracotta anche su sand, e non è una deroga: un titolo è testo grande (≥24px, ≥18,66px bold), soglia 3:1, e strong su sand vale 4,17:1. La commutazione a inchiostro riguarda solo il testo piccolo — occhielli, link, note — che di soglia ne chiede 4,5. Due variabili diverse perché sono due regole diverse. */ .section-title span, .section-heading .section-title span{ color: var(--gio-accento-titolo); } /* 3.2 Corpo -------------------------------------------------------------- */ p{ font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body); /* interlinea piena: si legge, non si scorre */ color: var(--text-body); } /* La misura della riga: oltre le ~70 battute l'occhio perde il ritorno a capo. Vale per i paragrafi lunghi delle sezioni, non per le card (che sono strette di loro) né per il footer. */ .section-heading p, .eg-exp-testo-intro p, .eg-gruppo-wrap p, .eg-voci p, .eg-immobili-coda, .accordion-body p{ max-width: 68ch; } /* Link di testo: colore + sottolineatura. Il colore da solo non basta (WCAG 1.4.1), e nel corpo di un paragrafo la sottolineatura è anche il modo più veloce di far capire che si può cliccare. */ /* Solo i link dentro un testo corrente. NON `li a`: nella griglia dei risultati il titolo della card è un senza classe dentro un
  • , e `li a:not([class])` — più specifico di .eg-immobile-card__titolo a — lo stampava terracotta e sottolineato, cioè come un link di paragrafo. */ p a:not([class]), address a:not([class]), .eg-lista a:not([class]){ color: var(--gio-accento); text-decoration: underline; text-underline-offset: .18em; } p a:not([class]):hover, .eg-lista a:not([class]):hover{ text-decoration-thickness: 2px; } /* 3.3 Kicker (occhiello) -------------------------------------------------- Il tema lo disegna come una pastiglia con un pallino colorato dentro. Su gio l'occhiello è tipografico: una barra d'accento sopra e il maiuscoletto. La barra è l'unico punto in cui l'accento pieno compare in testata. */ /* Il selettore ricalca quello del tema (.section-heading .sub-heading): la pastiglia sta lì, e senza la stessa profondità l'occhiello resterebbe un bottone finto con dentro un pallino colorato. */ .sub-heading, .section-heading .sub-heading, .slider-content .sub-heading{ display: block; padding: 0; border: 0; border-radius: 0; overflow: visible; font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); line-height: 1.3; color: var(--gio-accento); margin: 0 0 var(--space-5); } .sub-heading::before, .section-heading .sub-heading::before, .slider-content .sub-heading::before{ /* la barra: 2,5rem × 3px. Statica, non assoluta come il pallino del tema. */ content: ""; display: block; width: 2.5rem; height: 3px; border-radius: var(--radius-pill); background-color: var(--gio-filetto); margin-bottom: var(--space-3); transform: none; position: static; } /* Sul buio il tema disegna l'occhiello dentro una pastiglia bordata di bianco e lo colora di bianco (selettore .section-heading.white-content .sub-heading): stessa profondità, stesso trattamento di sopra. Il colore lo decide comunque --gio-accento, che sulle superfici scure vale primary-on-dark (4,54:1). */ .section-heading.white-content .sub-heading, .white-content .sub-heading{ border: 0; padding: 0; color: var(--gio-accento); } /* 3.4 Le tre superfici, e la commutazione automatica dell'accento --------- Ogni superficie ridichiara --gio-accento e --gio-bordo-campo nello STESSO blocco in cui dichiara il fondo: così colore del testo e sfondo non possono più divergere quando qualcuno cambia una sezione di superficie. */ /* sand — il tema la chiamava #f6f6f6, noi usiamo il sand di gruppo. Su sand il terracotta non regge il testo normale (4,17:1): l'accento testuale passa a ink-800 (10,94:1) e resta accento solo il filetto (4,02:1, sopra il 3:1). */ .tl-bg-color, .bg-grey{ background-color: var(--surface-alt); --gio-accento: var(--ink-800); --gio-bordo-campo: var(--text-muted); } /* Due sezioni tornano bianche per non avere quattro fasce sand di fila: il ritmo di gio è morbido, non monotono. Sono classi di componente del tema, quindi la regola vale su qualunque pagina le usi. */ .service-section-4.tl-bg-color, .faq-section.tl-bg-color{ background-color: var(--surface-page); --gio-accento: var(--color-primary-strong); --gio-bordo-campo: var(--ink-400); } /* buio — sull'inchiostro l'unico accento ammesso è primary-on-dark (4,54:1). */ .exp-section, .cta-section-3, .footer-section{ --gio-accento: var(--color-primary-on-dark); --gio-accento-titolo: var(--color-primary-on-dark); --gio-filetto: var(--color-primary-on-dark); --gio-bordo-campo: rgba(255,255,255,.55); --tl-color-theme-primary: var(--color-primary-on-dark); } .exp-section{ background-color: var(--surface-dark); } .exp-section h2, .exp-section h3, .exp-section .section-title, .cta-section-3 h2, .cta-section-3 .section-title, .white-content .section-title, .white-content .title{ color: var(--text-inverse); } .exp-section p, .cta-section-3 p, .white-content p{ color: rgba(255,255,255,.86); } /* Il footer è l'unico posto dove il terracotta non entra mai: lì restano i neutri e il blu di gruppo. La variabile del tema viene spenta sul bianco, così tutti gli hover che main.css colora d'accento diventano neutri. */ .footer-section{ --tl-color-theme-primary: var(--text-inverse); --gio-accento: var(--text-inverse); --gio-accento-titolo: var(--text-inverse); --gio-filetto: rgba(255,255,255,.32); } /* La sezione "voci" e le sezioni senza classe di fondo stanno sul bianco. */ .testimonial-section-4{ background-color: var(--surface-page); } /* ========================================================================== 4. RITMO DELLE SEZIONI «Padding pieno, molta aria attorno alle persone, mai sezioni sotto --space-8» (§gio). Il tema scende a 60px sotto i 768px: troppo poco. ========================================================================== */ .pt-130{ padding-top: clamp(var(--space-8), 9vw, 8.125rem); } .pb-130{ padding-bottom: clamp(var(--space-8), 9vw, 8.125rem); } .pt-150{ padding-top: clamp(var(--space-8), 10vw, 9.375rem); } .pb-150{ padding-bottom: clamp(var(--space-8), 10vw, 9.375rem); } /* Il container resta quello di gruppo (72rem = 1152px): è la misura su cui sono tarate tutte le griglie del design system, e il tema porterebbe le sezioni a 1425px, cioè a una riga di testo troppo lunga per il corpo 17px. .container-2 vale quanto .container e sta in main.css: senza questa riga la larghezza dipenderebbe dall'ordine dei fogli. */ .container, .container-2{ max-width: var(--container); padding-inline: var(--space-5); } /* La testata di sezione del tema porta un'immagine decorativa (un filetto d'angolo). Il nostro segno di testata è la barra del kicker: due segni per la stessa cosa sono uno di troppo. Il markup non la produce più: la regola resta per il guscio del tema, dove qualche `.shape` sopravvive. */ .section-heading-wrap .shape{ display: none; } /* LA TESTATA DI SEZIONE È UNA COLONNA SOLA. Il tema la impagina su due colonne (`col-lg-4` con l'occhiello, `col-lg-8` col titolo): regge se l'occhiello è una frase. I nostri sono di due parole — «DA CHE PARTE STAI» misura 130px — quindi la colonna di sinistra restava vuota per ~400px su 1600 e il titolo partiva a x=648 con la voragine di fianco. Ora l'occhiello sta sopra il titolo, nella stessa colonna, e la testata comincia dove comincia il resto della sezione. Il markup lo produce intestazioneSezione() in tools/gio-shell.mjs: un solo componente per tutte e nove le pagine. */ .section-heading-wrap{ max-width: none; padding-top: 0; margin-bottom: var(--space-7); } .section-heading-wrap .section-heading-2 p{ margin-top: var(--space-4); max-width: 68ch; } /* Le filigrane «giò» del tema sono 420px e 480px: a 1024px sfondavano dalla colonna. Restano, perché sono l'unico ornamento di marca del tema, ma diventano una misura relativa e non escono mai dal loro contenitore. */ .service-section-4, .project-section-4{ overflow: clip; } .service-text{ font-size: clamp(5rem, 16vw, 14rem); line-height: .8; left: var(--space-5); bottom: -.1em; opacity: .06; /* filigrana, non fondale */ pointer-events: none; } .footer-text span{ font-size: clamp(5rem, 22vw, 18rem); opacity: .12; } /* ========================================================================== 5. BOTTONI Una sola CTA primaria per blocco, piena di terracotta. Il tema disegna un bottone a filo con un cerchietto colorato: il cerchietto resta (è il suo carattere), il resto diventa nostro. ========================================================================== */ .tl-primary-btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; /* tap target ≥44px, con margine */ padding: .6rem .75rem .6rem 1.6rem; border-radius: var(--radius-pill); border: 1px solid transparent; background-color: var(--button-primary-bg); color: var(--button-primary-text); /* bianco su #bc593b = 4,54:1 */ font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.2; text-decoration: none; transition: transform var(--dur-fast) var(--ease-brand), box-shadow var(--dur-fast) var(--ease-brand), background-color var(--dur-fast) var(--ease-brand), color var(--dur-fast) var(--ease-brand); } /* senza icona il bottone non ha bisogno dell'asimmetria destra */ .tl-primary-btn:not(:has(.icon)){ padding-inline: 1.6rem; } .tl-primary-btn:hover, .tl-primary-btn:focus-visible{ background-color: var(--button-primary-bg); color: var(--button-primary-text); border-color: transparent; box-shadow: var(--shadow-lift); transform: translateY(-2px); } .tl-primary-btn:active{ transform: translateY(0); } .tl-primary-btn .icon{ height: 34px; width: 34px; margin-left: var(--space-1); background-color: var(--surface-card); color: var(--color-primary-strong); /* freccia terracotta su bianco: 4,54:1 */ flex: none; } .tl-primary-btn:hover .icon{ background-color: var(--surface-card); } /* Secondaria: contorno, per la seconda scelta di una coppia di CTA. */ .eg-btn-secondario, .tl-primary-btn.eg-btn-secondario{ background-color: transparent; color: var(--ink-900); border-color: var(--ink-400); /* 3,29:1 sul bianco: è un bordo di controllo */ } .eg-btn-secondario:hover, .tl-primary-btn.eg-btn-secondario:hover{ background-color: transparent; color: var(--ink-900); border-color: var(--ink-900); box-shadow: none; } .eg-btn-secondario .icon{ background-color: var(--color-primary-strong); color: var(--text-inverse); } /* Sul buio e sulla fotografia: bianca piena, inchiostro dentro. Un bottone a filo bianco su una foto non garantisce il 3:1 in tutti i punti dello scatto. */ .tl-primary-btn.white-btn{ background-color: var(--surface-card); color: var(--ink-900); border-color: var(--surface-card); } .tl-primary-btn.white-btn:hover{ background-color: var(--surface-card); color: var(--ink-900); border-color: var(--surface-card); } .tl-primary-btn.white-btn .icon{ background-color: var(--color-primary-strong); color: var(--text-inverse); } /* La secondaria sul buio resta a filo, ma con il bianco pieno del bordo. */ .exp-section .eg-btn-secondario, .cta-section-3 .eg-btn-secondario{ color: var(--text-inverse); border-color: rgba(255,255,255,.7); } .exp-section .eg-btn-secondario:hover, .cta-section-3 .eg-btn-secondario:hover{ color: var(--text-inverse); border-color: var(--text-inverse); } /* I gruppi di CTA. La nota di bozza che il generatore infila accanto ai bottoni è un blocco: senza flex-basis diventerebbe una colonna stretta schiacciata fra due pastiglie. */ .hero-btn, .cta-btn-wrap, .eg-cta-btn-wrap{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); } /* max-width:none serve davvero: la nota ha una misura di riga di 62ch e in un contenitore flex quella diventa la larghezza usata, così la nota restava in riga accanto ai bottoni invece di andare a capo. */ .hero-btn .eg-draft-note, .eg-cta-btn-wrap .eg-draft-note{ flex: 1 0 100%; max-width: none; margin-top: 0; margin-bottom: 0; } .eg-section-cta{ margin-top: var(--space-7); } .section-heading .eg-section-cta{ margin-top: var(--space-5); } /* ========================================================================== 6. TESTATA Lockup tipografico (Giò non ha un logo), sette voci, telefono e CTA. ========================================================================== */ /* PERCHÉ LA TESTATA RESTA SOVRAPPOSTA (position:absolute del tema, non toccata). Misurato: main.js avvia ScrollSmoother di GSAP, che porta #antra-smooth-wrapper a `position:fixed` ancorato in cima al viewport. La testata sta FUORI da quel contenitore: metterla nel flusso non sposta di un pixel il contenuto, che parte comunque da y=0, e testata e hero finiscono una sopra l'altra. L'unica soluzione onesta è quella del tema — testata sovrapposta e hero che si tiene lo spazio — con una differenza: lo spazio non è un numero magico ma --gio-header-h, dichiarata qui accanto alle misure che la determinano e ridichiarata a ogni soglia in cui la testata cambia forma. Chi tocca l'una tocca l'altra. */ :root{ --gio-header-h: 7.5rem; } /* due piani: marchio+contatti, menu */ /* La testata ha SEMPRE un fondo pieno. Sulla home poggia sul bianco della hero e non si vede, ma sulle otto pagine interne la fascia della testata è una fotografia: senza fondo, marchio e menu (inchiostro) ci finivano sopra e scendevano sotto il 3:1. Un fondo pieno è anche la scelta più prevedibile per chi scriverà le prossime pagine. */ .primary-header{ background-color: var(--surface-page); } .primary-header.fixed{ background-color: var(--surface-page); box-shadow: 0 1px 0 var(--line), var(--shadow-card); } .primary-header-inner{ padding-block: var(--space-2); gap: var(--space-2) var(--space-5); } /* Due piani, e non per vezzo: marchio + contatto + CTA non stanno su una riga sola insieme a sette voci dentro 72rem, e lasciare che il menu vada a capo per conto suo produceva la riga «Contatti» orfana sotto il marchio. `display:contents` scioglie il contenitore intermedio del tema e fa dei suoi figli tre celle della stessa riga flex: marchio e contatti sul primo piano, menu a tutta larghezza sul secondo. Il div sciolto non porta semantica, quindi l'albero di accessibilità non cambia. */ .header .primary-header-inner .header-left-wrap{ display: contents; } .primary-header-inner .header-logo{ order: 1; } .primary-header-inner .header-right-wrap{ order: 2; margin-left: auto; display: flex; align-items: center; gap: var(--space-5); } .primary-header-inner .header-menu-wrap{ order: 3; flex: 1 0 100%; border-top: 1px solid var(--gio-riga); } .primary-header-inner .header-menu-wrap ul{ display: flex; flex-wrap: wrap; column-gap: var(--space-6); } /* 6.1 Lockup -------------------------------------------------------------- Nome in display 700, firma endorsed in blu di gruppo. Sono due link autonomi (uno alla home, uno al portale): entrambi devono arrivare a 44px di altezza toccabile, e nel tema ne misuravano 24. */ .eg-lockup{ display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2); } .eg-lockup__nome{ font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: -.01em; color: var(--ink-900); text-decoration: none; padding-block: 12px; /* 22px di testo + 24 = 46 */ } .eg-lockup__nome:hover{ color: var(--color-primary-strong); } .eg-lockup__firma{ font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.1; color: var(--header-signature-color); /* #0f70b7 su bianco: 5,22:1 */ text-decoration: none; padding-block: 16px; /* 14px di testo + 32 = 46 */ align-self: center; } .eg-lockup__firma:hover{ text-decoration: underline; } /* Sul fondo scuro (pannello mobile, footer) il blu di gruppo pieno scende a 2,95:1: la firma passa al blu chiaro del token, 5,68:1 su ink-900. */ .footer-section .eg-lockup__nome, .mobile-side-menu .eg-lockup__nome{ color: var(--text-inverse); } .footer-section .eg-lockup__firma, .mobile-side-menu .eg-lockup__firma{ color: var(--blue-400); } /* 6.2 Menu ---------------------------------------------------------------- */ .header .primary-header-inner .header-menu-wrap ul li a{ font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-800); padding: var(--space-3) 0; /* 15px di testo + 24 = 44px toccabili */ min-height: 44px; display: flex; align-items: center; letter-spacing: 0; } .header .primary-header-inner .header-menu-wrap ul li a:hover, .header .primary-header-inner .header-menu-wrap ul li a[aria-current="page"]{ color: var(--color-primary-strong); } /* La pagina corrente non si segnala con il solo colore (WCAG 1.4.1): sotto la voce attiva c'è anche un filetto d'accento. */ .header .primary-header-inner .header-menu-wrap ul li a[aria-current="page"]{ box-shadow: inset 0 -3px 0 var(--color-primary); } /* 6.3 Telefono e CTA ------------------------------------------------------ */ .header-contact{ text-decoration: none; padding-block: var(--space-1); column-gap: var(--space-3); } .header-4 .primary-header-inner .header-right-wrap .header-contact .icon{ color: var(--color-primary-strong); font-size: 22px; } .header-contact .content .call-text{ font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.2; color: var(--text-muted); } .header-contact .content .call-number{ font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.3; color: var(--ink-900); } .header-4 .primary-header-inner .header-right-wrap .header-btn-wrap .header-btn{ border-color: transparent; background-color: var(--button-primary-bg); color: var(--button-primary-text); padding: .7rem 1.5rem; } .header-4 .primary-header-inner .header-right-wrap .header-btn-wrap .header-btn:hover{ border-color: transparent; color: var(--button-primary-text); } /* 6.4 Testata sotto i 992px ---------------------------------------------- IL DIFETTO È STATO CORRETTO ALLA FONTE. header-4 non ha mai avuto il bottone .mobile-side-menu-toggle: meanmenu clonava le sette voci dentro .side-menu-wrap, cioè dentro un pannello che nessuno poteva aprire, e sotto i 992px il sito restava senza navigazione. Il bottone ora lo scrive il guscio (tools/gio-shell.mjs, passo «il tasto che apre il menu»); qui resta solo il CSS, che si divide in due casi perché il pannello ha due dipendenze diverse dal JavaScript: · lo RIEMPIE meanmenu (clona le voci in .side-menu-wrap) · lo APRE main.js (.is-open su .mobile-side-menu) Con JavaScript: si vede il tasto, l'elenco in testata resta nascosto (lo nasconde già il tema a 992) e la navigazione vive nel pannello. Senza JavaScript: il pannello è vuoto e non apribile, quindi il tasto NON deve comparire — un bottone che non apre niente è peggio della sua assenza — e le sette voci tornano in testata come riga scorrevole. La classe `js` sull' la mette uno script in linea nel : se aspettasse gio-menu.js, in fondo al corpo, si vedrebbe il menu comparire e sparire a pagina già disegnata. */ /* BREAKPOINT: 992px INCLUSO, non 991.98. Il tema nasconde il menu di testata e accende il pannello con `max-width: 992px`, e meanmenu si attiva con `currentWidth <= 992`. Con 991.98 restava una fessura larga un pixel — a viewport esattamente 992 — in cui la testata era in versione desktop, il menu vero era già nascosto dal tema e il pannello era nel DOM ma senza tasto: nessuna navigazione, e sette link fuori tela nell'ordine di tabulazione. Qui e nel resto del capitolo il confine è lo stesso del tema. */ @media (max-width: 992px){ /* Due piani — marchio + tasto del menu · telefono + CTA — e l'altezza è la stessa a 390 e a 768, così --gio-header-h resta una promessa mantenuta. `display:contents` scioglie il contenitore di destra del tema, altrimenti telefono e CTA si porterebbero via una riga ciascuno. .header-menu-wrap resta nel flusso a fare da interruzione di riga (il tema le mette `display:flex !important`, e da vuota è alta zero): è il filetto che separa i due piani. */ :root{ --gio-header-h: 9.75rem; } /* misurata 154px a 768 con JS */ .header .primary-header-inner{ flex-wrap: wrap; row-gap: var(--space-2); column-gap: var(--space-3); } .header-4 .primary-header-inner .header-right-wrap{ display: contents; } /* il lockup può restringersi e mandare a capo la firma endorsed: a larghezza intrinseca (294px a 390) spingeva il tasto del menu su una riga tutta sua, e la testata saliva a 208px */ .primary-header-inner .header-logo{ flex: 1 1 0; min-width: 0; } html.js .eg-menu-toggle{ display: inline-flex; order: 2; margin-left: auto; flex: none; } /* min-width:0 e non per scaramanzia: un elemento flex ha `min-width:auto`, cioè non scende sotto il suo min-content, e senza JavaScript il min-content di questa cella sono le sette voci in fila — 868px. La riga usciva larga 868 su un viewport di 390, e `overflow-x:auto` sull'