/* ========================================================================== extra.css — gli stili che si scrivono SENZA ricompilare Tailwind. Creato il 2026-08-05. 🔑 A COSA SERVE Il tema è Tailwind: `app.css` è COMPILATO da `input.css`, e la build la fa solo Andrea sul suo computer (sul server le dipendenze non ci sono nemmeno). Questo file invece è servito così com'è: quello che scrivi qui ha effetto subito, appena ricarichi la pagina. ✅ COSA CI VA Regole CSS normali — selettori, proprietà, media query — per ritoccare o aggiungere stile a qualunque parte del sito. ⛔ COSA NON CI VA · utility di Tailwind (`.gap-7`, `.md\:py-2`): quelle si generano solo con la build, e scriverle qui a mano è lavoro che qualcuno rifarà; · copie di regole che esistono già in `app.css`: prima cerca, poi scrivi. ⚠️ REGOLE DELLA CASA 1. Questo file è caricato DOPO `app.css`, quindi vince lui. Non serve `!important` quasi mai: se ti sembra indispensabile, di' che stai combattendo con una regola e guardiamo quale. 2. Scrivi un commento sopra ogni blocco: cosa stai sistemando e dove si vede. Fra due mesi nessuno ricorda a cosa serviva. 3. ⛔ Non toccare `input.css` né `app.css`: sono compilati e misurati. ========================================================================== */ /* -------------------------------------------------------------------------- Da qui in giù si scrive. La forma attesa è: una riga che dice DOVE si vede e PERCHÉ serve, poi la regola. Vedi i blocchi qui sotto come esempio. ⛔ NON scrivere un commento DENTRO un altro commento: in CSS i commenti NON si annidano. Il primo `* /` (senza spazio) chiude tutto, e quello che resta si incolla davanti al selettore successivo rendendolo invalido — il browser butta via quella regola in silenzio, e sembra un problema di cache. 🔑 Misurato il 12/08/2026: era proprio quello che succedeva qui, e la vittima era la PRIMA regola del file, `.gb-hero-icona-categoria`. -------------------------------------------------------------------------- */ /* Pagina categoria — icona dell'hero, resa bianca senza toccare il gestionale. (11/08/2026) Dove si vede: /store/ e /store//, IT e EN — l'icona grande accanto al titolo, dentro la fascia viola con la foto di sfondo. Perché serve: l'icona arriva da offline_mall_categories.tt_icona_menu, che è la STESSA colonna letta dal megamenu. Lì la tendina è bianca e i PNG viola caricati dal gestionale si vedono benissimo; qui lo sfondo è viola, e la stessa immagine risulterebbe quasi invisibile. La colonna è una sola e non si può differenziare senza toccare la catena di sincronizzazione col gestionale, che da qui non si tocca: quindi si corregge in CSS, dal lato che rende. Come: brightness(0) appiattisce l'immagine a nera qualunque sia il suo colore, invert(1) la ribalta a bianco pieno. Il risultato non dipende dalla tinta di partenza: se domani caricassero le icone di un altro colore, qui resterebbero bianche lo stesso. ⚠️ Sono icone a tratto piatto: l'appiattimento non fa perdere nulla. Su un'immagine con sfumature o fotografica lo stesso filtro darebbe una macchia bianca. */ .gb-hero-icona-categoria { filter: brightness(0) invert(1); } /* Pagina categoria — bordi dell'icona induriti, contro la sfocatura. (12/08/2026) Il problema: le icone su OnPage sono 24×24 px e qui vengono rese a 56 (112 su schermo a densità doppia): oltre il doppio della loro dimensione, quindi sfocate. ⛔ Non è un difetto del codice e non si risolve ingrandendo la sorgente da OnPage: chiedendogli 90 o 512 px restituisce lo stesso ingrandimento morbido dei 24 pixel di partenza — misurato il 12/08 scaricando le tre versioni. 🔑 La soluzione VERA è caricare su OnPage icone da 128 px o in SVG. Cosa fa qui: dopo brightness(0)+invert(1) l'icona è una silhouette bianca, e tutta la sfocatura vive nei mezzi toni del canale alpha. Il filtro SVG li spinge verso pieno o verso vuoto, e il contorno torna netto. ⛔ Non inventa dettaglio: rende solo meno molle quello che c'è. ⚠️ La classe è SEPARATA di proposito. `gb-hero-icona-categoria` da sola sbianca e basta e non dipende da niente; questa aggiunge l'indurimento e ha bisogno del filtro `#gb-bordi-netti`, che sta in `pages/store/category.htm`. Se un giorno quel filtro sparisse, un `url()` che non si risolve annullerebbe in Chrome l'INTERA catena di filtri e l'icona tornerebbe viola: tenendo le due classi distinte, il peggio che può succedere è perdere la nitidezza. ⚠️ Se le icone diventeranno grandi, questa regola va TOLTA: su una sorgente nitida indurire i bordi li fa solo seghettare. */ .gb-hero-icona-nitida { filter: brightness(0) invert(1) url(#gb-bordi-netti); } /* Footer — i quadratini social prendono il colore del proprio brand all'hover. (11/08/2026) Dove si vede: in fondo a ogni pagina, colonna «Contatti», i quattro quadratini sotto il telefono e la mail. Perché: prima all'hover diventavano `bg-white` con l'icona viola. Richiesta di davideberni l'11/08: «sarebbe bello che avessero i colori propri del brand». Come: il markup (partials/site/footer.htm) mette su ogni link `gb-social` e `gb-social--`, dove è la chiave della tendina del backend (instagram, facebook, linkedin, youtube, x, tiktok). Qui sotto c'è un blocco per rete. ⚠️ Se il backend offrisse una rete non elencata qui, il pulsante resta semplicemente com'è: nessuna regola, nessun errore. ⚠️ Le icone sono `fill="currentColor"`, quindi basta impostare `color` per colorarle. Il bordo diventa trasparente per non lasciare un contorno biancastro sul colore pieno. */ .gb-social:hover { color: #fff; border-color: transparent; } /* Instagram non ha un colore piatto: il suo marchio è la sfumatura. */ .gb-social--instagram:hover { background-image: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .gb-social--facebook:hover { background-color: #1877f2; } .gb-social--linkedin:hover { background-color: #0a66c2; } .gb-social--youtube:hover { background-color: #ff0000; } .gb-social--x:hover { background-color: #000; } .gb-social--tiktok:hover { background-color: #000; } /* Testo dei documenti legali dal rich text editor. (12/08/2026) Dove si vede: /privacy-policy e /cookie-policy, il corpo del documento. Perché serve: il rich text editor produce

,

    ,
      ,

      … senza classi, e il reset del tema li lascia senza margini né elenchi puntati. Il testo uscirebbe come un unico blocco indistinto. ⛔ Perché NON si usano le varianti Tailwind tipo `[&_p]:mb-4`, che sarebbero la strada ovvia e sono già usate in `condizioni-di-vendita.htm`: NON sono compilate in `app.css` — verificato il 12/08/2026, compaiono nell'elenco di `tailwind.md` come classi mancanti. Lì il testo è infatti senza formattazione. Qui invece la regola ha un selettore proprio, quindi ha effetto subito e non richiede nessuna build. */ .gb-testo-legale h2 { font-size: 1.25rem; font-weight: 600; color: #111827; margin: 2rem 0 .75rem; } .gb-testo-legale h3 { font-size: 1.125rem; font-weight: 600; color: #111827; margin: 1.5rem 0 .5rem; } .gb-testo-legale h4 { font-weight: 600; color: #111827; margin: 1.25rem 0 .5rem; } .gb-testo-legale p { margin-bottom: 1rem; } .gb-testo-legale strong { font-weight: 600; } .gb-testo-legale em { font-style: italic; } .gb-testo-legale ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; } .gb-testo-legale ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; } .gb-testo-legale li { margin-bottom: .5rem; } .gb-testo-legale a { color: var(--color-bormac-primary, #420099); text-decoration: underline; } .gb-testo-legale table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; } .gb-testo-legale th, .gb-testo-legale td { border: 1px solid #e5e7eb; padding: .5rem .75rem; text-align: left; }