/* css/site.css — stili di sezione specifici del sito. Riempito nelle Fasi 2 (.it) e 3 (.tech). */ /* === .it TYPOGRAPHY OVERRIDES === Allineate al mockup approvato (canvas «Referto archiwave.it», artboard «Home — Teatro spento»). Il sito era rimasto alla scala tipografica ereditata dal pannello admin: occhielli in sans grigio, titoli di sezione a 32px. Nel mockup gli occhielli sono in mono terracotta e i titoli a 40px, ed e' quella la resa decisa. */ /* Occhielli: dal sans al MONO. Sul mockup ogni etichetta breve — occhiello di sezione, categoria della scheda, etichetta di campo — e' in IBM Plex Mono: e' la voce «tecnica» del sistema, e distinguerla dal corpo del testo e' quello che le fa leggere come didascalie invece che come titolini. Colore e corpo cambiano per contesto, qui sotto. */ [data-site="it"] .t-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; } /* === .it TYPOGRAPHY OVERRIDES === */ /* Il display era in CORSIVO (31/08/2026: tolto). Un serif inclinato su un titolo grande e' un effetto, e qui si applicava a ogni pagina: il tondo lascia parlare la lettera. Il peso scende a 400 perche' l'EB Garamond a 48px e oltre in 500 impasta le grazie. */ [data-site="it"] .t-display { font-weight: 400; font-style: normal; } [data-site="it"] .t-h1, [data-site="it"] .t-h2 { font-weight: 400; } /* Titoli di sezione a 40px come nel mockup (erano 32). A 32px il serif non reggeva il confronto con l'occhiello sopra e la sezione non aveva una testa: e' la misura che separa un titolo da un sottotitolo. */ [data-site="it"] .t-h1 { font-size: 40px; line-height: 1.12; letter-spacing: -0.012em; } /* === .it HERO: scena "project-lab" — render + griglia tecnica + pannello vetro === */ [data-site="it"] .hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; } [data-site="it"] .hero-media { position: absolute; inset: 0; } [data-site="it"] .hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Velo verticale: l'immagine resta leggibile in alto, il testo poggia sul pieno in basso. ⚠️ TARATO PER UNA FOTOGRAFIA QUALSIASI, non per quella di oggi. Dal 31/08/2026 la copertina non e' piu' un render notturno fisso: e' il progetto pubblicato piu' recente, quindi puo' essere un tetto in cotto in pieno sole come un interno scuro. Il velo deve reggere il caso peggiore, non quello che si ha davanti mentre lo si scrive. Il primo tentativo era tarato sul render scuro e l'occhiello spariva sul cotto. */ [data-site="it"] .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 17, 19, .08) 0%, rgba(15, 17, 19, .30) 34%, rgba(15, 17, 19, .74) 56%, rgba(15, 17, 19, .96) 100%); } /* GRIGLIA BLUEPRINT — RIMOSSA il 31/08/2026. Era un reticolo che si accendeva sotto il cursore: una scenografia da tavolo tecnico sopra un rendering d'archivio, cioe' una misura che non misurava niente. Nella prima stesura restava una regola «display: none» e il div in index.php: una mezza misura che lasciava js/mouse-tracker.js a registrare mousemove e a scrivere --mouse-x/--mouse-y per nessuno. Ora sono spariti insieme il div, lo script e questa regola — e con loro la riga in sync-shared.ps1 e in pacchetto-it.sh. */ /* COORDINATE E SCALA agli angoli della copertina — REGOLE RIMOSSE il 31/08/2026 insieme agli elementi che le portavano. Dicevano «N 41.9028° / E 12.4964°» (il centro di Roma, non un cantiere) e «SCALA 1:100 — REV. 04» (la revisione di nessun disegno). Nessun file PHP genera piu' .hero-coords ne' .hero-coord, su nessuno dei due siti. */ [data-site="it"] .hero-inner { position: relative; z-index: 3; padding: 0 var(--s5) var(--s8); width: 100%; } /* Il pannello era un rettangolo di VETRO SFOCATO sopra l'immagine (31/08/2026: tolto). Resta la sola riga di regola a sinistra: il testo poggia sulla scena come la didascalia di una tavola, invece di galleggiarci sopra dentro un riquadro. Il velo verticale di .hero::after basta gia' a tenere leggibile il testo. */ [data-site="it"] .hero-panel { max-width: 720px; padding: 0 0 0 var(--s5); background: none; border: none; border-left: 2px solid var(--accent); border-radius: 0; } [data-site="it"] .hero-kicker { color: var(--accent); letter-spacing: .14em; text-transform: uppercase; margin: 0; } /* Titolo scalabile: sans display importante, non trabocca su mobile */ [data-site="it"] .hero-title { margin: var(--s3) 0 0; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.08; color: var(--ink); } [data-site="it"] .hero-sub { max-width: 540px; color: var(--ink-soft); margin: var(--s4) 0 var(--s5); } [data-site="it"] .hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; } [data-site="it"] .hero-cta .btn-outline { border-color: var(--ink-faint); } /* PANNELLO «01 progetto / 02 computo / 03 prototipo» — REGOLE RIMOSSE il 31/08/2026 insieme all'elemento. La stessa triade numerata compariva due volte nella stessa pagina: qui, inventata, e sulle schede dei Servizi, dove i numeri vengono dal database. Ne e' rimasta una, quella vera. */ /* Su schermo stretto il testo della copertina risale nella meta' alta dell'immagine, dove il rendering e' chiaro: il velo tarato sul desktop non basta piu'. Il pannello di vetro copriva questo caso senza che si vedesse; togliendolo, il velo deve farlo da solo. */ @media (max-width: 860px) { [data-site="it"] .hero::after { background: linear-gradient(180deg, rgba(15, 17, 19, .26) 0%, rgba(15, 17, 19, .58) 30%, rgba(15, 17, 19, .86) 55%, rgba(15, 17, 19, .97) 100%); } } @media (max-width: 640px) { /* Il pannello non e' piu' un riquadro con imbottitura su quattro lati ma un testo appoggiato a una regola: su mobile si riduce solo lo stacco dalla regola. */ [data-site="it"] .hero-panel { padding: 0 0 0 var(--s4); } } /* === .it PROGETTI === */ [data-site="it"] .portfolio { padding: var(--s8) 0; } [data-site="it"] .portfolio .section-header { max-width: 640px; margin: 0 0 var(--s6); } [data-site="it"] .portfolio .section-header .t-h1 { margin: var(--s2) 0 0; color: var(--ink); } [data-site="it"] .portfolio .section-subtitle { color: var(--ink-soft); margin: var(--s3) 0 0; } [data-site="it"] .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s5); } /* SCHEDA A DIDASCALIA ESTERNA (31/08/2026, allineamento al mockup approvato). Prima il testo stava SOPRA la fotografia, dentro un velo scuro che serviva a renderlo leggibile. Quel velo era il problema: per far leggere quattro righe bisognava spegnere meta' immagine, e le immagini sono la cosa che si e' venuti a vedere. Ora la fotografia e' intera e la didascalia sta sotto, sul fondo della pagina — come la didascalia di una tavola. Nessun velo da tarare, nessun contrasto da inseguire: il testo e' su fondo pieno e si legge sempre, qualunque sia la foto. ⚠️ Vale anche per progetti.php: le due pagine condividono queste classi, ed e' voluto. */ [data-site="it"] .portfolio-item { display: flex; flex-direction: column; position: relative; background: none; border: none; border-radius: 0; overflow: visible; } /* Il sollevamento resta (e' l'unico punto della home dove il movimento serve: dice «questa scheda si apre»), ma senza l'alone colorato — su ogni riquadro era il segno che l'effetto non era stato scelto, solo applicato. ⚠️ Solo su «--link». Quando un progetto non ha slug, index.php genera un
invece di un : si solleva, l'immagine ingrandisce, ma non si apre niente. Un riquadro che reagisce al mouse dichiara di essere cliccabile — e qui sarebbe una bugia. */ /* Con la didascalia fuori dall'immagine, sollevare l'intera scheda muoverebbe anche il testo: il movimento resta dentro la cornice della fotografia, che e' la parte che si apre. Il bordo si accende, l'immagine avanza appena. */ [data-site="it"] .portfolio-item--link:hover .portfolio-image { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } [data-site="it"] .portfolio-image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-alt); border: 1px solid var(--rule); transition: transform .4s ease, border-color .3s ease; /* FILTRO GRIGIO RIMOSSO il 31/08/2026 (era grayscale(.45) brightness(.78)). Ricondurre le miniature al tono del sito le uniformava a una texture: sbiadiva cioe' l'unica cosa in pagina che un altro non potrebbe avere, e restituiva il colore solo a chi ci passava sopra col mouse — su un telefono, mai. */ } [data-site="it"] .portfolio-item--link:hover .portfolio-image { transform: scale(1.04); } /* Il blocco di didascalia, ora fuori dall'immagine e su fondo pagina. ⚠️ Il gradiente che stava qui e' SPARITO, ed e' il punto di tutta la modifica: non c'e' piu' niente da velare, quindi non c'e' piu' un contrasto da rincorrere a ogni foto nuova. Le tre tarature fatte nelle ore scorse — miniature, copertina scheda, mobile — nascevano tutte dallo stesso vincolo, che qui viene rimosso alla radice. */ [data-site="it"] .portfolio-overlay { position: static; display: flex; flex-direction: column; gap: 6px; padding: var(--s4) 0 0; background: none; } /* La card che porta a una scheda è un collegamento: deve comportarsi come tale (nessuna sottolineatura ereditata, fuoco visibile da tastiera). ⚠️ NON «display: block»: la scheda e' una colonna flex (immagine sopra, testo sotto), e block la rimetterebbe in flusso normale. */ [data-site="it"] .portfolio-item--link { text-decoration: none; color: inherit; } [data-site="it"] .portfolio-item--link:focus-visible { outline: none; box-shadow: var(--ring); } /* «Vedi scheda ↗» compare SOLO sulle card che una scheda ce l'hanno davvero. Per anni è stato scritto su tutte, mentre la pagina di dettaglio non esisteva: un invito a cliccare dove non c'era nulla da aprire. ⚠️ Ora e' SEMPRE VISIBILE, come nel mockup. Prima appariva al passaggio del mouse: su un telefono non appariva mai, e l'unico segno che la scheda si apre restava invisibile proprio a chi non ha un mouse. In terracotta solo quando ci si passa sopra. */ [data-site="it"] .portfolio-item--link .portfolio-overlay::after { content: "Vedi scheda ↗"; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-faint); margin-top: var(--s2); transition: color .3s ease; } [data-site="it"] .portfolio-item--link:hover .portfolio-overlay::after, [data-site="it"] .portfolio-item--link:focus-visible .portfolio-overlay::after { opacity: 1; transform: translateY(0); } /* TINTA D'ACCENTO IN HOVER — RIMOSSA il 31/08/2026. Lavava di colore l'intera fotografia al passaggio del mouse: con le miniature a colori pieni sarebbe un danno, non un effetto. */ /* Tipografia della didascalia, dal mockup: categoria e anno in mono terracotta, titolo nel serif, descrizione nel grigio del corpo. Il titolo NON e' piu' sopra una fotografia, quindi non ha bisogno di essere grande per farsi valere: 23px bastano. */ [data-site="it"] .portfolio-overlay .t-label { color: var(--accent); font-size: 11px; letter-spacing: .12em; } [data-site="it"] .portfolio-overlay .t-h2 { margin: 0; color: var(--ink); font-size: 23px; line-height: 1.2; } [data-site="it"] .portfolio-overlay .t-meta { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); } [data-site="it"] .portfolio-cta { display: flex; justify-content: center; margin-top: var(--s7); } /* ⚠️ Su mobile non c'e' piu' NIENTE da correggere qui, e la regola che c'era e' sparita. Serviva a infittire il velo perche' il testo, sovrapposto a una card piu' bassa, finiva nell'area chiara della fotografia. Con la didascalia fuori dall'immagine il problema non esiste piu' a nessuna larghezza: e' il vantaggio vero di questa struttura, non l'estetica. */ /* === .it STUDIO === */ [data-site="it"] .studio { padding: var(--s8) 0; background: var(--surface-alt); } /* Editoriale a due colonne: testo + immagine, collassa a 1 colonna su mobile */ [data-site="it"] .studio-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; } [data-site="it"] .studio-text .t-h1 { margin: var(--s2) 0 var(--s5); color: var(--ink); } [data-site="it"] .studio-text .t-body { color: var(--ink-soft); margin: 0 0 var(--s4); } [data-site="it"] .studio-text .t-body:last-child { margin-bottom: 0; } [data-site="it"] .studio-card { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r4); background: var(--surface); } [data-site="it"] .studio-image { width: 100%; height: 100%; object-fit: cover; } /* Overlay ancorato in basso, coerente con le card portfolio */ [data-site="it"] .studio-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--s5); background: linear-gradient(180deg, transparent 50%, rgba(20, 18, 16, .9) 100%); } /* Didascalia come nel sito 2025: bianca e in tondo, non l'etichetta tecnica maiuscola. Sull'immagine il verde d'accento competeva con le luci del render, e il maiuscoletto da 10px si leggeva come una targhetta invece che come una frase. */ [data-site="it"] .studio-overlay .t-label { color: var(--ink); font-size: 17px; font-weight: 400; letter-spacing: 0; text-transform: none; } @media (max-width: 860px) { [data-site="it"] .studio-content { grid-template-columns: 1fr; gap: var(--s6); } [data-site="it"] .studio-visual { order: -1; } } /* === .it SERVIZI === */ [data-site="it"] .services { padding: var(--s8) 0; } [data-site="it"] .services .section-header { max-width: 640px; margin: 0 0 var(--s6); } [data-site="it"] .services .section-header .t-h1 { margin: var(--s2) 0 0; color: var(--ink); } [data-site="it"] .services .section-subtitle { color: var(--ink-soft); margin: var(--s3) 0 0; } /* Pipeline di processo: griglia di step numerati, connessi da una linea tecnica superiore */ [data-site="it"] .pipeline-grid.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s5); position: relative; } /* Da PANNELLO a COLONNA (31/08/2026). Il riquadro aveva fondo proprio, quattro bordi, angoli tondi, ombra interna piu' ombra esterna, e in hover si sollevava dentro un alone colorato: cinque effetti per dire una cosa sola. Resta una riga sopra il testo — la stessa che divide le colonne di una tavola — e il colore arriva solo quando serve. */ [data-site="it"] .service-card { position: relative; padding: var(--s5) 0 0; background: none; border: none; border-top: 1px solid color-mix(in srgb, var(--ink-soft) 22%, transparent); border-radius: 0; box-shadow: none; transition: border-top-color .3s ease; } [data-site="it"] .service-card:hover { border-top-color: var(--accent); } /* L'immagine del servizio, quando il pannello ne ha scelta una. Nessun bordo, nessuna ombra, nessun angolo arrotondato: la scheda .it e' una voce numerata, non un riquadro, e un'immagine incorniciata rimetterebbe la scatola che questa sezione ha tolto. `aspect-ratio` fissa lo spazio prima che l'immagine arrivi, cosi' il testo sotto non salta a caricamento avvenuto. */ [data-site="it"] .service-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: var(--s3); background: color-mix(in srgb, var(--ink-soft) 8%, transparent); } /* Il numero di passo prende l'accento: e' il solo segno colorato della scheda, e cosi' la colonna si legge come una voce numerata invece che come un riquadro decorato. */ [data-site="it"] .service-step { font-size: 12px; letter-spacing: .12em; color: var(--accent); margin-bottom: var(--s3); } /* L'icona era un riquadro da 44px prima di ogni titolo. Ridotta al segno che serve: nella colonna il titolo deve arrivare per primo. */ [data-site="it"] .service-icon { width: auto; height: auto; display: flex; align-items: center; margin-bottom: var(--s3); color: var(--accent); font-size: 16px; } [data-site="it"] .service-icon svg { width: 18px; height: 18px; } /* Titolo nel serif del sito: nella colonna senza riquadro e' lui a fare la gerarchia. */ [data-site="it"] .service-title { margin: 0 0 var(--s3); color: var(--ink); font-family: var(--font-display); font-size: 25px; font-weight: 400; line-height: 1.2; } [data-site="it"] .service-description { color: var(--ink-soft); } [data-site="it"] .service-description p:last-child { margin-bottom: 0; } [data-site="it"] .service-features { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); } [data-site="it"] .service-features li { font-family: var(--font-sans); font-size: 13px; color: var(--ink-muted); padding-left: var(--s4); position: relative; } [data-site="it"] .service-features li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--accent); } [data-site="it"] .service-link { display: inline-block; margin-top: var(--s5); font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--accent); } /* Badge "In sviluppo": stato neutro, NON usa l'accento */ [data-site="it"] .service-link.disabled { color: var(--ink-faint); cursor: default; } /* === .it CONTATTI === */ [data-site="it"] .contact { padding: var(--s8) 0; background: var(--surface-alt); } /* Editoriale a due colonne: info a sinistra, form a destra; collassa su mobile */ [data-site="it"] .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; } [data-site="it"] .contact-info .t-h1 { margin: var(--s2) 0 var(--s4); color: var(--ink); } [data-site="it"] .contact-description { color: var(--ink-soft); margin: 0 0 var(--s5); } [data-site="it"] .contact-methods { display: flex; flex-direction: column; gap: var(--s3); } [data-site="it"] .contact-method { display: inline-flex; align-items: center; gap: var(--s2); color: var(--accent); } [data-site="it"] .contact-method svg { flex-shrink: 0; } /* Form: pannello di intake tecnico compatto, non brochure — righe accoppiate + superficie "panel" */ /* Il campo-esca contro i programmi che compilano moduli automaticamente. Si porta FUORI DALLO SCHERMO invece di usare display:none, e non e' un dettaglio: molti di quei programmi saltano i campi dichiarati invisibili, e un'esca che il bersaglio evita non serve a niente. Cosi' invece il campo esiste, viene letto, viene compilato — e il backend sa che chi ha compilato non stava guardando la pagina. ⚠️ Non si usa l'attributo [hidden]: in questo stesso progetto si e' gia' visto che una regola con display:flex lo scavalca (agosto 2026). Qui il posizionamento non dipende da nessuna cascata. Senza selettore [data-site]: il campo non deve mai comparire, su nessuno dei due siti. */ .esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } [data-site="it"] .contact-form { display: flex; flex-direction: column; gap: var(--s4); } [data-site="it"] .contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } [data-site="it"] .contact-form .form-group { display: flex; flex-direction: column; gap: var(--s2); } [data-site="it"] .contact-form label { color: var(--ink-faint); } [data-site="it"] .contact-form input, [data-site="it"] .contact-form select, [data-site="it"] .contact-form textarea { width: 100%; padding: var(--s3) var(--s4); background: var(--surface-panel); border: 1px solid var(--rule); border-radius: var(--r1); color: var(--ink); font-family: var(--font-sans); font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease; } [data-site="it"] .contact-form textarea { resize: vertical; min-height: 100px; } [data-site="it"] .contact-form input::placeholder, [data-site="it"] .contact-form textarea::placeholder { color: var(--ink-faint); } /* Focus editoriale: bordo + glow terracotta/cyan (--accent), nessun outline blu di default */ [data-site="it"] .contact-form input:focus, [data-site="it"] .contact-form select:focus, [data-site="it"] .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } [data-site="it"] .contact-form select option[disabled] { color: var(--ink-faint); } [data-site="it"] .contact-form .btn-primary { align-self: flex-start; } @media (max-width: 560px) { [data-site="it"] .contact-form .form-row { grid-template-columns: 1fr; } } @media (max-width: 860px) { [data-site="it"] .contact-content { grid-template-columns: 1fr; gap: var(--s6); } } /* === .tech HERO === */ /* Niente foto full-bleed: sfondo a gradiente scuro "da laboratorio" con griglia mono sottile */ [data-site="tech"] .hero { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(ellipse 60% 50% at 85% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%), linear-gradient(160deg, var(--surface-alt) 0%, #0d0d0d 100%); } /* Griglia tecnica in filigrana, puro dettaglio "laboratorio" */ [data-site="tech"] .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); pointer-events: none; } [data-site="tech"] .hero-inner { position: relative; z-index: 1; padding: var(--s8) var(--s5); width: 100%; } /* Il badge «.hero-version» e' stato rimosso il 05/09/2026 insieme al nodo che lo portava (vedi tech/index.php): regole senza elemento sono codice morto che il prossimo lettore scambia per superficie viva. */ [data-site="tech"] .hero-inner .t-label { color: var(--accent); } [data-site="tech"] .hero-inner .t-display { margin: var(--s3) 0 0; font-size: clamp(40px, 7vw, 88px); color: var(--ink); } [data-site="tech"] .hero-sub { max-width: 540px; color: var(--ink-soft); margin: var(--s4) 0 var(--s5); } [data-site="tech"] .hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; } [data-site="tech"] .hero-cta .btn-outline { border-color: var(--ink-faint); } /* === .tech LAB DASHBOARD (Task 5) === */ /* Home .tech: hero a due colonne, copy + console di stato. Sostituisce l'hero singolo brochure. */ [data-site="tech"] .tech-lab-hero { min-height: 0; padding: var(--s8) 0; align-items: stretch; } [data-site="tech"] .tech-dashboard { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: var(--s7); align-items: center; padding: 0; } [data-site="tech"] .tech-hero-copy .hero-cta { margin-top: var(--s2); } /* Console: pannello "da strumento" — superficie rilevata, righe di stato, moduli. Riusabile in altre pagine .tech dove serva mostrare uno stato sintetico. */ .lab-console { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); background: var(--surface-panel); border: 1px solid var(--rule); border-radius: var(--r2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), var(--shadow-card); } .lab-console-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s4); border-bottom: 1px solid var(--rule); color: var(--ink-muted); } .lab-console-sublabel { margin: var(--s2) 0 0; } /* Riga console: una entità monitorata (prodotto, servizio) con nome/dominio a sinistra, versione+stato a destra */ .console-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); } .console-row:last-of-type { border-bottom: none; } .console-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .console-row-name { color: var(--ink); } .console-row-domain { color: var(--ink-muted); } .console-row-meta { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; } /* Status pill: indicatore di stato riusabile (online/attivo = --ok, in sviluppo/beta = --accent-3) */ .status-pill { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; } .status-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-muted) 20%, transparent); } .status-pill--ok .status-pill-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok), 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); animation: status-pulse-ok 2.4s ease-in-out infinite; } .status-pill--active .status-pill-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); animation: status-pulse-accent 2.4s ease-in-out infinite; } .status-pill--beta .status-pill-dot { background: var(--accent-3); box-shadow: 0 0 8px var(--accent-3), 0 0 0 3px color-mix(in srgb, var(--accent-3) 25%, transparent); animation: status-pulse-beta 2.4s ease-in-out infinite; } @keyframes status-pulse-ok { 0%, 100% { transform: scale(1); box-shadow: 0 0 6px var(--ok), 0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent); } 50% { transform: scale(1.22); box-shadow: 0 0 12px var(--ok), 0 0 0 4px color-mix(in srgb, var(--ok) 15%, transparent); } } @keyframes status-pulse-accent { 0%, 100% { transform: scale(1); box-shadow: 0 0 6px var(--accent), 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } 50% { transform: scale(1.22); box-shadow: 0 0 12px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); } } @keyframes status-pulse-beta { 0%, 100% { transform: scale(1); box-shadow: 0 0 6px var(--accent-3), 0 0 0 2px color-mix(in srgb, var(--accent-3) 30%, transparent); } 50% { transform: scale(1.22); box-shadow: 0 0 12px var(--accent-3), 0 0 0 4px color-mix(in srgb, var(--accent-3) 15%, transparent); } } /* Metric chip: badge mono per versioni/build/metriche — riusabile ovunque serva un valore tecnico compatto */ .metric-chip { display: inline-block; padding: var(--s1) var(--s3); font-family: var(--font-mono); font-size: 12px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--r1); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* Module list: elenco compatto di moduli/funzioni attive, stile terminale */ .module-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); } .module-list li { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); padding-left: var(--s4); position: relative; } .module-list li::before { content: "›"; position: absolute; left: 0; color: var(--accent); } /* === HOME .tech — sezioni "prodotti live" e "ricerca attiva" === Schede "anteprima" ricche, stessa famiglia visiva delle solution-card/research-card: superficie panel staccata dal fondo (non piu' surface-alt quasi invisibile), corpo denso (dominio + descrizione + moduli/output) e piede stato/azione. Riequilibra le fasce che prima restavano quasi vuote e usa tutta la larghezza con 2 colonne piene. */ [data-site="tech"] .tech-strip { position: relative; padding: var(--s6) 0; /* ridotto da s7: meno vuoto verticale tra le fasce */ border-top: none; } [data-site="tech"] .tech-strip::before { content: ""; position: absolute; top: 0; left: var(--s5); right: var(--s5); height: 4px; background: repeating-linear-gradient( 90deg, var(--rule) 0px, var(--rule) 1px, transparent 1px, transparent 10px ); opacity: 0.6; } [data-site="tech"] .tech-strip-label { margin: 0 0 var(--s4); } /* Due colonne piene: le card ricche riempiono la larghezza invece di stirarsi vuote. `.products-strip-grid` e' uscita il 05/09/2026 con la striscia «Prodotti live» della home, che ripeteva i prodotti gia' elencati dalla console di stato. */ [data-site="tech"] .research-strip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } /* Scheda anteprima: superficie panel (si stacca dal fondo), corpo sopra + piede sotto. box-shadow / lift all'hover ereditati dalla regola pannelli condivisa piu' in basso. */ [data-site="tech"] .strip-card { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6) var(--s5); background: var(--surface-panel); border: 1px solid var(--rule); border-radius: var(--r2); } [data-site="tech"] .strip-card:hover { border-color: var(--accent); } [data-site="tech"] .strip-card-main { display: flex; flex-direction: column; gap: var(--s3); } /* flex-wrap di sicurezza: nomi lunghi ("Intelligenza Artificiale") + chip/pill su card strette a 390px */ [data-site="tech"] .strip-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s3); } [data-site="tech"] .strip-card-name { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.15; color: var(--ink); } [data-site="tech"] .strip-card-domain { margin: 0; color: var(--ink-muted); } [data-site="tech"] .strip-card-desc { margin: 0; color: var(--ink-soft); } [data-site="tech"] .strip-card-modules { margin-top: var(--s1); } /* Piede: stato a sx + link a dx (prodotti) oppure solo link a dx (ricerca), ancorato in basso (margin-top:auto -> piedi allineati tra card affiancate) e separato da riga. */ [data-site="tech"] .strip-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--rule); } [data-site="tech"] .strip-card-foot--end { justify-content: flex-end; } [data-site="tech"] .strip-card-link { color: var(--accent); text-decoration: none; white-space: nowrap; } [data-site="tech"] .strip-card-link:hover { text-decoration: underline; } /* CTA finale home .tech: pannello coerente con le schede (superficie panel staccata dal fondo), copy a sinistra + azioni a destra su desktop; impilato e allineato a sinistra sotto i 760px. Riusa il tick tecnico in alto della .tech-strip. */ [data-site="tech"] .tech-home-cta-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s5) var(--s6); padding: var(--s7) var(--s6); background: var(--surface-panel); border: 1px solid var(--rule); border-radius: var(--r2); box-shadow: var(--shadow-panel); } [data-site="tech"] .tech-home-cta-copy { max-width: 560px; } [data-site="tech"] .tech-home-cta-title { margin: 0; } [data-site="tech"] .tech-home-cta-desc { margin: var(--s3) 0 0; color: var(--ink-soft); } [data-site="tech"] .tech-home-cta-actions { flex-wrap: wrap; } @media (max-width: 760px) { [data-site="tech"] .tech-home-cta-panel { flex-direction: column; align-items: flex-start; } } @media (max-width: 860px) { [data-site="tech"] .tech-dashboard { grid-template-columns: 1fr; gap: var(--s6); } /* La console non deve restare larga quanto la colonna 1.1fr del desktop: si allinea al container */ .lab-console { max-width: 100%; } } /* ⚠️ QUI C'ERA un blocco `@media (max-width: 420px)` per .console-row — RIMOSSO il 07/09/2026 perché faceva uscire lo stato dei prodotti fuori dallo schermo del telefono. Diceva: `.console-row { flex-wrap: wrap }` e `.console-row-meta { flex-basis: 100% }`. Era scritto per il layout PRECEDENTE della riga console — nome a sinistra, versione e stato a destra, tutto IN RIGA — dove significava «sotto i 400px manda le metriche a capo, su una seconda riga». Intento giusto, e per quel layout funzionava. Poi il tema «Officina Digital» ha ridisegnato la stessa classe come una SCHEDA IN COLONNA (`#aw-digital .console-row { flex-direction: column }`, più sotto in questo file). Quelle due proprietà non hanno lo stesso significato nelle due direzioni: in colonna «andare a capo» vuol dire aprire una COLONNA A FIANCO, non una riga sotto. Lo stato finiva quindi accanto alla scheda, fuori dallo schermo. Misurato il 07/09/2026 con una sonda a 345px di viewport: documento largo 540px, cioè 195px di scorrimento orizzontale. 🔑 La lezione, che vale oltre questo caso: il tema .tech adatta il layout con CONTAINER QUERY (`@container`), questo blocco era una MEDIA QUERY di viewport. Due sistemi di soglie che non si conoscono, sullo stesso selettore. La scheda si stringe già da sola grazie alle container query, quindi qui non serve nulla: si toglie la regola, non se ne aggiunge una che la contrasti. Presidiato da backend/tests/ConsoleProdottiMobileTest.php. */ /* Kicker mono riusabile per titoli di pagina .tech (Soluzioni, Ricerca...): stesso trattamento cromatico del t-label esistente, ma mono */ [data-site="tech"] .page-kicker { margin: 0; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } /* ⚠️ QUI VIVEVA IL BLOCCO « .tech SOLUZIONI » — rimosso il 05/09/2026 con la pagina che lo usava. `soluzioni.php` e `prodotti.php` erano la stessa vetrina dello stesso catalogo: sono confluite in `prodotti.php`, e queste tredici classi (.solutions*, .solution-card*, .solution-name/domain/desc/modules) non avevano piu' un solo elemento a cui applicarsi. Le ombre e il sollevamento all'hover NON si sono persi: .catalogo-card e' gia' dentro il blocco condiviso piu' sotto, che e' quello che governa davvero quel linguaggio — le regole qui erano le stesse proprieta' scritte due volte, e perdenti. */ /* === .tech RICERCA — experiment panels (Task 7) === */ [data-site="tech"] .research { padding: var(--s8) 0; } [data-site="tech"] .research-title { margin: var(--s2) 0 0; font-size: clamp(32px, 5vw, 56px); color: var(--ink); } [data-site="tech"] .research-sub { max-width: 640px; color: var(--ink-soft); margin: var(--s4) 0 0; } [data-site="tech"] .research-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s5); margin-top: var(--s7); } /* Pannello esperimento: stessa superficie delle solution-card, coerenza visiva "laboratorio" */ [data-site="tech"] .research-card { display: flex; flex-direction: column; padding: var(--s6) var(--s5); background: var(--surface-panel); border: 1px solid var(--rule); border-radius: var(--r2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 30px -14px rgba(0, 0, 0, 0.70); transition: border-color 0.3s ease, box-shadow 0.3s ease; } [data-site="tech"] .research-card:hover { border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 0 20px -5px color-mix(in srgb, var(--accent) 30%, transparent), 0 20px 46px -18px rgba(0, 0, 0, 0.78); } [data-site="tech"] .research-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); } [data-site="tech"] .research-name { margin: 0 0 var(--s2); color: var(--ink); } /* Dominio applicato: riga mono discreta tra titolo e descrizione, coerente con .solution-domain */ [data-site="tech"] .research-domain { color: var(--ink-muted); margin: 0 0 var(--s3); } [data-site="tech"] .research-desc { color: var(--ink-soft); margin: 0 0 var(--s4); } [data-site="tech"] .research-outputs { margin: 0 0 var(--s4); } /* Relazione con l'architettura: chiusura del pannello, separata da riga come i piedi pannello prodotto */ [data-site="tech"] .research-relation { margin: auto 0 0; padding-top: var(--s4); border-top: 1px solid var(--rule); color: var(--ink-muted); } /* === .tech INNOVAZIONE — lab roadmap (Task 7) === */ [data-site="tech"] .innovation { padding: var(--s8) 0; } [data-site="tech"] .innovation-title { margin: var(--s2) 0 0; font-size: clamp(32px, 5vw, 56px); color: var(--ink); } [data-site="tech"] .innovation-sub { max-width: 640px; color: var(--ink-soft); margin: var(--s4) 0 0; } /* Sezione pipeline: riusa .innovation-process esistente (5 step numerati) come stadi della roadmap */ [data-site="tech"] .innovation-process-section { padding: var(--s8) 0; border-top: 1px solid var(--rule); } [data-site="tech"] .innovation-process-title { margin: var(--s2) 0 0; color: var(--ink); } [data-site="tech"] .innovation-process-sub { max-width: 640px; color: var(--ink-soft); margin: var(--s3) 0 0; } [data-site="tech"] .innovation-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s5); margin: var(--s6) 0 0; padding: 0; list-style: none; } [data-site="tech"] .innovation-process-step { text-align: left; } [data-site="tech"] .innovation-process-num { display: block; color: var(--accent); font-size: 24px; margin-bottom: var(--s2); } [data-site="tech"] .innovation-process-name { margin: 0 0 var(--s2); color: var(--ink); } [data-site="tech"] .innovation-process-desc { color: var(--ink-soft); margin: 0; } /* Capacità validate: stadio 05 della pipeline, stessa griglia showcase già esistente */ [data-site="tech"] .innovation-showcase-section { padding: var(--s8) 0; border-top: 1px solid var(--rule); } [data-site="tech"] .innovation-showcase-title { margin: var(--s2) 0 0; color: var(--ink); } [data-site="tech"] .innovation-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); margin-top: var(--s6); } [data-site="tech"] .innovation-showcase-item { background: var(--surface-alt); border: 1px solid var(--rule); border-radius: var(--r2); padding: var(--s5); } [data-site="tech"] .innovation-showcase-item--featured { border-color: var(--accent); } [data-site="tech"] .innovation-showcase-head { margin-bottom: var(--s3); } [data-site="tech"] .innovation-showcase-name { margin: 0 0 var(--s3); color: var(--ink); } [data-site="tech"] .innovation-showcase-desc { color: var(--ink-soft); margin: 0 0 var(--s4); } /* Prossimi esperimenti: stadi 01-03 della pipeline, griglia compatta a 3 colonne */ [data-site="tech"] .innovation-next-section { padding: var(--s8) 0; border-top: 1px solid var(--rule); } [data-site="tech"] .innovation-next-title { margin: var(--s2) 0 0; color: var(--ink); } [data-site="tech"] .innovation-next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); margin-top: var(--s6); } [data-site="tech"] .innovation-next-item { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); background: var(--surface-panel); border: 1px solid var(--rule); border-radius: var(--r2); } [data-site="tech"] .innovation-next-item .status-pill { align-self: flex-start; } [data-site="tech"] .innovation-next-name { margin: 0; color: var(--ink); } [data-site="tech"] .innovation-next-desc { color: var(--ink-soft); margin: 0; } [data-site="tech"] .innovation-next-link { margin: var(--s6) 0 0; } [data-site="tech"] .innovation-next-link a { color: var(--accent); font-family: var(--font-sans); font-weight: 500; } [data-site="tech"] .innovation-next-link a:hover { text-decoration: underline; } [data-site="tech"] .innovation-cta-section { padding: var(--s8) 0; border-top: 1px solid var(--rule); } [data-site="tech"] .innovation-cta-inner { text-align: center; } [data-site="tech"] .innovation-cta-desc { max-width: 560px; margin: var(--s3) auto var(--s5); color: var(--ink-soft); } [data-site="tech"] .innovation-cta-actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; } /* === .tech CONTATTI === */ [data-site="tech"] .contact { padding: var(--s8) 0; background: var(--surface-alt); } /* Editoriale a due colonne: metodi di contatto a sinistra, form a destra; collassa su mobile */ [data-site="tech"] .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; } [data-site="tech"] .contact-info .t-h1 { margin: var(--s2) 0 var(--s4); color: var(--ink); } [data-site="tech"] .contact-description { color: var(--ink-soft); margin: 0 0 var(--s5); } [data-site="tech"] .contact-methods { display: flex; flex-direction: column; gap: var(--s4); } [data-site="tech"] .contact-method { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r1); color: var(--ink); transition: border-color .2s ease; } [data-site="tech"] .contact-method:hover { border-color: var(--accent); } [data-site="tech"] .contact-method svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; } [data-site="tech"] .contact-method-text { display: flex; flex-direction: column; gap: var(--s1); } [data-site="tech"] .contact-method-title { color: var(--ink); } [data-site="tech"] .contact-method-desc { color: var(--ink-muted); } /* Form: pannello di intake tecnico compatto, non brochure — righe accoppiate + superficie "panel" */ [data-site="tech"] .contact-form { display: flex; flex-direction: column; gap: var(--s4); } [data-site="tech"] .contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } [data-site="tech"] .contact-form .form-group { display: flex; flex-direction: column; gap: var(--s2); } [data-site="tech"] .contact-form label { color: var(--ink-faint); } [data-site="tech"] .contact-form input, [data-site="tech"] .contact-form select, [data-site="tech"] .contact-form textarea { width: 100%; padding: var(--s3) var(--s4); background: var(--surface-panel); border: 1px solid var(--rule); border-radius: var(--r1); color: var(--ink); font-family: var(--font-sans); font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease; } [data-site="tech"] .contact-form textarea { resize: vertical; min-height: 100px; } [data-site="tech"] .contact-form input::placeholder, [data-site="tech"] .contact-form textarea::placeholder { color: var(--ink-faint); } /* Focus tecnologico: bordo + glow verde (--accent), nessun outline blu di default */ [data-site="tech"] .contact-form input:focus, [data-site="tech"] .contact-form select:focus, [data-site="tech"] .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } [data-site="tech"] .contact-form select option[disabled] { color: var(--ink-faint); } [data-site="tech"] .contact-form .btn-primary { align-self: flex-start; } @media (max-width: 860px) { [data-site="tech"] .contact-content { grid-template-columns: 1fr; gap: var(--s6); } } @media (max-width: 560px) { [data-site="tech"] .contact-form .form-row { grid-template-columns: 1fr; } } /* ========================================================================== Task 9 — Responsive pass: collasso esplicito a 1 colonna, breakpoint 760px Le grid "card" sotto usano auto-fill/auto-fit con minmax(260–320px, 1fr): tra ~760px e il loro minimo il browser terrebbe 2 colonne strette (compromesso scomodo). Forziamo 1fr per un collasso netto, coerente col resto del sistema (nav/dashboard/studio/contact già collassano a 860px). Pannelli/console restano ancorati alla larghezza del contenitore (niente overflow orizzontale). ========================================================================== */ @media (max-width: 760px) { .tech-dashboard, [data-site="it"] .studio-content, [data-site="tech"] .contact-content { grid-template-columns: 1fr; } .lab-console { max-width: 100%; } /* .it: pipeline servizi e griglia portfolio — stessa logica card-grid */ [data-site="it"] .pipeline-grid.services-grid, [data-site="it"] .portfolio-grid, /* .tech: pannelli prodotto/ricerca e strisce home */ [data-site="tech"] .catalogo-grid, [data-site="tech"] .research-grid, [data-site="tech"] .research-strip-grid, /* .tech: roadmap innovazione (pipeline, capacità validate, prossimi esperimenti) */ [data-site="tech"] .innovation-process, [data-site="tech"] .innovation-showcase, [data-site="tech"] .innovation-next-grid { grid-template-columns: 1fr; } } /* ========================================================================== Design elevation pass (Opus) — profondità dei pannelli, lift all'hover, ingresso scaglionato dell'hero, dettagli tecnici sui kicker. Additivo, stessa direzione "AI Lab": accenti = stato, non decorazione. ========================================================================== */ /* Profondità coerente su tutte le famiglie di pannello (luce dall'alto + drop morbido) */ /* ⚠️ 31/08/2026 — Le voci «[data-site="it"]» sono state TOLTE da questo blocco, non neutralizzate piu' sotto. Il blocco ripeteva ombre e sollevamenti gia' decisi nelle regole di sezione (righe ~139-290): la stessa proprieta' scritta due volte, e chi cambiava la prima non vedeva effetto perche' vinceva la seconda. E' esattamente il difetto che aveva prodotto «tutto ha lo stesso effetto». Adesso ogni regola .it vive in UN SOLO punto: la sua sezione. Questo blocco resta, ma governa solo .tech e .lab-console, dove quel linguaggio e' voluto. */ [data-site="tech"] .catalogo-card, [data-site="tech"] .research-card, [data-site="tech"] .strip-card, [data-site="tech"] .innovation-showcase-item, [data-site="tech"] .innovation-next-item, .lab-console { box-shadow: var(--shadow-panel); transition: border-color .25s ease, border-top-color .25s ease, transform .25s ease, box-shadow .25s ease; } /* Lift all'hover: il pannello si solleva; il bordo si accende (accento = stato attivo) */ [data-site="tech"] .catalogo-card:hover, [data-site="tech"] .research-card:hover, [data-site="tech"] .strip-card:hover, [data-site="tech"] .innovation-showcase-item:hover, [data-site="tech"] .innovation-next-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } /* La card portfolio e il pannello hero .it stavano qui: ora vivono solo nelle loro sezioni (righe ~139-215 e ~68-80). Vedi la nota in cima al blocco. */ /* TRATTINO prima degli occhielli di sezione — REGOLA RIMOSSA il 31/08/2026. Nel mockup approvato non c'e', e con l'occhiello ora in terracotta il trattino raddoppiava lo stesso accento a mezzo centimetro di distanza. ⚠️ Era scoperta solo su .it (`[data-site="it"] .section-header .t-label::before`): sparisce e basta, non si sposta su .tech, che non l'ha mai avuta. */ /* Ingresso scaglionato dell'hero: rivelazione ordinata al load (keyframe in base.css). Sotto prefers-reduced-motion la durata è azzerata -> gli elementi compaiono subito. */ [data-site="it"] .hero-kicker, [data-site="it"] .hero-title, [data-site="it"] .hero-sub, [data-site="it"] .hero-cta, [data-site="tech"] .hero-inner .t-label, [data-site="tech"] .hero-inner .t-display, [data-site="tech"] .hero-sub, [data-site="tech"] .hero-cta, [data-site="tech"] .lab-console { animation: lab-rise .6s cubic-bezier(.2, .7, .2, 1) both; } [data-site="it"] .hero-title, [data-site="tech"] .hero-inner .t-display { animation-delay: .06s; } [data-site="it"] .hero-sub, [data-site="tech"] .hero-sub { animation-delay: .12s; } [data-site="it"] .hero-cta, [data-site="tech"] .hero-cta { animation-delay: .18s; } [data-site="tech"] .lab-console { animation-delay: .24s; } /* === .tech PRODOTTI — catalogo download (Task 6 topologia produzione) === Stessa famiglia visiva delle solution-card: le schede nascono dall'API, quindi qui si descrive solo la superficie, non il contenuto. Nessun token nuovo. */ [data-site="tech"] .catalogo { padding: var(--s8) 0; } [data-site="tech"] .catalogo-title { margin: var(--s2) 0 0; font-size: clamp(32px, 5vw, 56px); color: var(--ink); } [data-site="tech"] .catalogo-sub { max-width: 640px; color: var(--ink-soft); margin: var(--s4) 0 0; } /* Gli stati vivono sopra la griglia e non la sostituiscono: un errore di rete lascia visibile il catalogo gia' caricato. */ [data-site="tech"] .catalogo-stato { margin: var(--s5) 0 0; color: var(--ink-muted); } [data-site="tech"] .catalogo-stato--errore { color: var(--accent); } [data-site="tech"] .catalogo-stato[hidden] { display: none; } /* I due gruppi del catalogo — «Disponibili» e «In sviluppo» (05/09/2026). La gerarchia la fa lo SPAZIO, non un riquadro: due blocchi separati da un respiro ampio si leggono come due insiemi distinti senza aggiungere bordi a una pagina che ne ha gia' uno per scheda. */ [data-site="tech"] .catalogo-gruppo { margin-top: var(--s8); } [data-site="tech"] .catalogo-gruppo:first-of-type { margin-top: var(--s7); } [data-site="tech"] .catalogo-gruppo-titolo { margin: 0; color: var(--ink); } [data-site="tech"] .catalogo-gruppo-nota { margin: var(--s2) 0 0; color: var(--ink-muted); max-width: 60ch; } [data-site="tech"] .catalogo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s5); margin-top: var(--s5); } [data-site="tech"] .catalogo-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s5); padding: var(--s6) var(--s5); background: var(--surface-panel); border: 1px solid var(--rule); border-radius: var(--r2); } [data-site="tech"] .catalogo-card:hover { border-color: var(--accent); } [data-site="tech"] .catalogo-card-main { display: flex; flex-direction: column; gap: var(--s3); } [data-site="tech"] .catalogo-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); } [data-site="tech"] .catalogo-name { margin: 0; color: var(--ink); } [data-site="tech"] .catalogo-domain { margin: 0; color: var(--ink-muted); } [data-site="tech"] .catalogo-desc { color: var(--ink-soft); margin: 0; } /* Come .solution-card-foot: se meta-dati e pulsante non stanno affiancati vanno a capo, invece di stringere il testo del pulsante. */ [data-site="tech"] .catalogo-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3) var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule); } [data-site="tech"] .catalogo-meta { color: var(--ink-muted); } [data-site="tech"] .catalogo-modules { margin-top: var(--s2); } /* ⚠️ QUI VIVEVANO LE REGOLE DELLA LISTA «In sviluppo» — righe basse e senza bordo — tolte il 05/09/2026 insieme alla forma che descrivevano. L'idea era che la forma dicesse da sola la differenza fra «lo scarico adesso» e «e' in lavorazione»; in cambio pero' quei prodotti perdevano descrizione e moduli, cioe' proprio cio' che fa capire a cosa serviranno. Ora usano la stessa scheda dei disponibili: la distinzione la fanno il titolo del gruppo e il chip «In sviluppo» al posto del numero di versione. */ /* I pulsanti della scheda restano un gruppo unico all'estremita' del piede: se lo spazio manca vanno a capo insieme, invece di separare "Scopri" da "Scarica". */ [data-site="tech"] .catalogo-azioni { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } /* --------------------------------------------------------------------------- Pagina legale (informativa privacy) Un testo lungo si legge per riga, non per larghezza: la colonna e' limitata a circa 72 caratteri, che e' il punto oltre il quale l'occhio perde il capo riga. --------------------------------------------------------------------------- */ .legal { padding: var(--s8) 0; } .legal-content { max-width: 72ch; } .legal-content h1 { margin-bottom: var(--s5); } .legal-content h2 { margin: var(--s7) 0 var(--s4); } .legal-content h3 { margin: var(--s5) 0 var(--s3); color: var(--ink-soft); } .legal-content p { margin-bottom: var(--s4); color: var(--ink-soft); } /* Specificita' doppia invece di !important: la regola sopra vale per ogni p della pagina, e l'introduzione deve batterla senza ricorrere alla forza bruta. */ .legal-content .legal-intro { color: var(--ink); } .legal-content a { color: var(--accent); } .legal-list { margin: 0 0 var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s3); } .legal-list li { color: var(--ink-soft); } .legal-date { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--rule); color: var(--ink-muted); } /* Rimando all'informativa sotto il modulo contatti: sta con il pulsante, non compete con lui. Colore attenuato, dimensione della didascalia, link accentato solo al passaggio. */ .form-privacy { margin-top: var(--s4); color: var(--ink-muted); } .form-privacy a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; } .form-privacy a:hover { color: var(--accent); } /* ===================================================================== */ /* === .it SCHEDA PROGETTO (progetto.php) ============================== */ /* Il dettaglio che la card prometteva con «Vedi scheda ↗» senza poterlo mantenere. Stessi token della home: la scheda deve sembrare la stessa casa vista da dentro, non una stanza aggiunta dopo. */ /* --- Testata: la copertina fa da fondale, il testo ci sta sopra --- */ [data-site="it"] .progetto-hero { position: relative; min-height: clamp(340px, 52vh, 560px); display: flex; align-items: flex-end; overflow: hidden; background: var(--surface-alt); border-bottom: 1px solid var(--rule); } [data-site="it"] .progetto-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Stessa cura della griglia — il render arretra, il titolo avanza — ma con mano molto piu' leggera: qui l'immagine è grande e spesso è già un render notturno, e il filtro della card la spegneva fino a farla sparire. Il velo sottostante garantisce già il contrasto del testo. */ filter: grayscale(.12) brightness(.92) contrast(1.03) saturate(.95); } /* Velo in due tempi: scuro pieno in basso dove cade il testo, quasi trasparente in alto perché l'immagine resti riconoscibile. */ [data-site="it"] .progetto-hero-velo { position: absolute; inset: 0; /* Rinforzato il 31/08/2026 insieme alla rimozione del filtro grigio su .progetto-hero-img: senza quel filtro la copertina resta chiara, e la briciola «Progetti / Categoria» — che e' il testo piu' piccolo della pagina — spariva sopra un intonaco giallo. Tolta anche la macchia radiale d'accento in basso a sinistra: tingeva la fotografia. */ background: linear-gradient(180deg, rgba(15, 17, 19, .22) 0%, rgba(15, 17, 19, .58) 45%, rgba(15, 17, 19, .97) 100%); } /* Il pulsante che apre il visore dalla copertina: invisibile, ma e' un vero pulsante. Sta sopra il velo e sotto il testo — vedi l'ordine nel DOM in progetto.php. */ [data-site="it"] .progetto-hero-apri { position: absolute; inset: 0; border: 0; background: transparent; padding: 0; cursor: zoom-in; } /* Un pulsante invisibile senza contorno di fuoco e' irraggiungibile a chi naviga con Tab: ci si arriva e non si sa di esserci. */ [data-site="it"] .progetto-hero-apri:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; } [data-site="it"] .progetto-hero-testo { position: relative; padding-top: var(--s8); padding-bottom: var(--s7); } [data-site="it"] .progetto-briciole { display: flex; gap: var(--s2); align-items: center; margin: 0 0 var(--s4); } [data-site="it"] .progetto-briciole a { color: var(--ink-soft); text-decoration: none; } [data-site="it"] .progetto-briciole a:hover { color: var(--accent); } [data-site="it"] .progetto-titolo { margin: 0; max-width: 18ch; color: var(--ink); } [data-site="it"] .progetto-sintesi { margin: var(--s4) 0 0; max-width: 56ch; color: var(--ink-soft); } /* --- Riga dei dati: sottile, separata da filetti --- */ [data-site="it"] .progetto-dati { border-bottom: 1px solid var(--rule); background: var(--surface-alt); } [data-site="it"] .progetto-dati-riga { display: flex; flex-wrap: wrap; gap: var(--s7); padding-top: var(--s5); padding-bottom: var(--s5); } [data-site="it"] .progetto-dato { display: flex; flex-direction: column; gap: var(--s1); } [data-site="it"] .progetto-dato-valore { color: var(--ink); } /* --- Il testo: una colonna sola, larga quanto si legge bene --- */ [data-site="it"] .progetto-testo { padding: var(--s8) 0 var(--s7); } [data-site="it"] .progetto-colonna { max-width: 68ch; } [data-site="it"] .progetto-colonna p { margin: 0 0 var(--s5); color: var(--ink-soft); line-height: 1.75; } /* Il primo paragrafo apre il racconto: più grande, più chiaro, con un filetto accentato a sinistra che lo lega alla testata. ⚠️ `> p:first-of-type`, non `p:first-child`. Da quando il testo esteso può contenere titoli e citazioni (31/08/2026), `p:first-child` colpiva ANCHE il paragrafo dentro un
— che è primo figlio del suo contenitore — e ogni citazione si presentava col filetto d'apertura, come se il racconto ricominciasse da capo. Con `> ` si guarda solo ai figli diretti della colonna, e con `first-of-type` l'apertura resta al primo paragrafo anche quando il testo comincia con un titolo. ⚠️ `:not(.t-label)` aggiunto il 17/09/2026, e per la stessa ragione di allora. La sezione Video mette un'etichetta `.t-label` dentro la colonna — il primo caso in cui un nodo che non è racconto ci entra — e quell'etichetta è un

, figlia diretta e prima del suo tipo: prendeva l'apertura tutta intera, filetto terracotta compreso. 🔑 Si esclude qui invece di rimediare con una regola più specifica là: questa regola è scritta DUE volte, e la copia dentro `@media (max-width: 640px)` sta più in basso nel file — una toppa a pari specificità avrebbe perso contro di lei, e l'etichetta sarebbe tornata vestita da apertura SOLO sul telefono. Detto così, vale anche per la prossima etichetta che entrerà nella colonna. */ [data-site="it"] .progetto-colonna > p:not(.t-label):first-of-type { font-size: 19px; line-height: 1.65; color: var(--ink); padding-left: var(--s5); border-left: 2px solid var(--accent); } [data-site="it"] .progetto-colonna > p:last-child { margin-bottom: 0; } /* --- Il testo formattato: titoli, elenchi, citazioni, stacchi --- Sono le forme che backend/classes/TestoFormattato.php può produrre a partire dai marcatori scritti nel pannello. Senza queste regole comparirebbero con gli stili predefiniti del browser — corpo sbagliato, margini sbagliati, blu di sistema sui link — dentro una pagina progettata. L'anteprima del pannello (admin/css/admin.css) ripete gli stessi rapporti: se si cambia qui, si cambia anche là, o l'anteprima smette di anticipare quello che si vedrà. Presidiato da backend/tests/AnteprimaFedeleTest.php. */ [data-site="it"] .progetto-colonna h2, [data-site="it"] .progetto-colonna h3, [data-site="it"] .progetto-colonna h4 { font-family: var(--font-serif); font-weight: 500; color: var(--ink); margin: var(--s6) 0 var(--s3); } [data-site="it"] .progetto-colonna h2 { font-size: 27px; font-style: italic; } [data-site="it"] .progetto-colonna h3 { font-size: 22px; font-style: italic; } [data-site="it"] .progetto-colonna h4 { font-size: 18px; } [data-site="it"] .progetto-colonna ul, [data-site="it"] .progetto-colonna ol { margin: 0 0 var(--s5); padding-left: var(--s5); color: var(--ink-soft); line-height: 1.75; } [data-site="it"] .progetto-colonna li { margin-bottom: var(--s2); } /* La citazione ha il filetto come l'apertura, ma sottile e senza accento: è una voce dentro il racconto, non un secondo inizio. */ [data-site="it"] .progetto-colonna blockquote { margin: 0 0 var(--s5); padding-left: var(--s5); border-left: 1px solid var(--rule); font-style: italic; } [data-site="it"] .progetto-colonna blockquote p { color: var(--ink); } [data-site="it"] .progetto-colonna hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s7) 0; } [data-site="it"] .progetto-colonna a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } [data-site="it"] .progetto-colonna a:hover { color: var(--accent); } /* --- Video del progetto (17/09/2026): il lettore del browser, vestito --------------- I file li carica chi ha accesso all'FTP, non il pannello: proporzioni, peso e durata sono ignoti nel momento in cui si scrive questa regola. Per questo il foglio decide la LARGHEZZA e lascia l'altezza al file — l'unica scelta che non puo' sbagliarsi. */ [data-site="it"] .progetto-video-sezione { padding: 0 0 var(--s7); } /* Il `p.` non e' pignoleria: `.progetto-colonna p` porta un `margin-bottom` di --s5 e il colore del corpo del racconto, e batte per un pelo una regola di sola classe (ha un selettore di tipo in piu'). Senza il `p.` davanti, queste due righe non arriverebbero. ⚠️ Che l'etichetta non prenda il vestito d'APERTURA del racconto non si decide qui: si decide con `:not(.t-label)` sulla regola d'apertura, piu' su in questo stesso file. La ragione sta li'. */ [data-site="it"] .progetto-colonna > p.progetto-video-titolo { margin: 0 0 var(--s4); color: var(--ink-muted); } /* Due lettori attaccati, entrambi scuri e senza cornice, si leggono come un video solo. */ [data-site="it"] .progetto-video-lista { display: grid; gap: var(--s5); } /*

nasce con «margin: 1em 40px» nel foglio del browser: senza azzerarlo i video — e soltanto loro — sarebbero rientrati di 40px rispetto a tutto il resto della colonna. */ [data-site="it"] .progetto-video { margin: 0; } [data-site="it"] .progetto-video video { /*