/* ========================================================================= psicologia-del-lavoro.css — Psicologia del lavoro per le aziende. 25/09/2026. Pagina costruita dal mock idealmedica-psicologia-lavoro.html, di cui si e' preso il testo e buttata la forma. ⚠️ NIENTE COLORI NUOVI, ed e' la ragione per cui questo file e' corto. Il mock portava una palette sua: #2E6EA4 per la psicologia, #B08F5E per la medicina del lavoro, #74927A per la sicurezza — tre tinte per le tre icone della sezione "servizio". Nessuna delle tre esiste nei token del sito, e introdurle da una pagina sola e' esattamente cio' che 01-token.css esiste per impedire (regola dello strato, riga 5 di quel file). Le icone sono in currentColor e le colora una riga qui sotto con --lc-blu-chiaro. Se un giorno servono davvero tre tinte, si aggiungono ai token e si scrivono qui tre var(), non tre esadecimali. Il resto della pagina non ha bisogno di quasi niente: hero, card, griglie, accordion, elenchi, fascia CTA e pannello di chiusura sono tutti blocchi dei nove strati comuni, e il modulo di contatto e' passato oggi allo strato 09-form. Il prefisso delle regole di questa pagina e' pl-, come me- per la Medicina Estetica: lc- e' per i blocchi comuni, lg- resta un residuo storico della Longevity. ========================================================================= */ /* --- Fondo dell'hero ----------------------------------------------------- Gli stessi tre strati e gli stessi valori della Medicina Estetica, della Chirurgia Maxillo-Facciale e della Protesi d'Anca: le pagine devono sembrare parenti. Lo strato in cima e' la sfumatura di uscita verso il bianco della sezione successiva. ⚠️ E' misurata IN PIXEL DAL BASSO e non in percentuale: la sezione cambia altezza col viewport e con la lunghezza dei testi, e una percentuale sposterebbe l'attacco della sfumatura sopra o sotto i bottoni. Il valore SEGUE il padding-bottom di .lc-sezione (03-layout.css): 48px sotto i 992px, 96px da 992px in su. Se quel padding cambia, vanno cambiati tutti e due i valori qui (CLAUDE.md §7.3). */ #lc-psicologia-del-lavoro #hero { background-image: linear-gradient(to top, #fff 0, rgba(255, 255, 255, 0) 48px), radial-gradient(ellipse 46% 62% at 78% 44%, rgba(255, 255, 255, .55) 0%, transparent 70%), linear-gradient(135deg, #d7e6f4 0%, #edf4fa 45%, #bbd5f0 100%); } @media (min-width: 992px) { #lc-psicologia-del-lavoro #hero { background-image: linear-gradient(to top, #fff 0, rgba(255, 255, 255, 0) 96px), radial-gradient(ellipse 46% 62% at 78% 44%, rgba(255, 255, 255, .55) 0%, transparent 70%), linear-gradient(135deg, #d7e6f4 0%, #edf4fa 45%, #bbd5f0 100%); } } /* --- I 90px di bianco fra header e hero, sotto i 990px ------------------ style.css del child fa "#top #main { padding-top: 90px !important }" per tutto il sito. Da 990px in su l'header non occupa spazio nel flusso e quei 90px lo compensano davvero; sotto, l'header sta nel flusso e si prende i suoi, quindi i 90 si sommano e resta una fascia vuota. Si vede solo dove la prima sezione ha un fondo colorato — qui l'hero ce l'ha (PARTICOLARITA-TEMA.md §4). ⚠️ SI AGGANCIA ALL'ID E NON ALLA CLASSE .lc-sezione--recupera-header che 03-layout gia' definisce: LiveCanvas cancella le classi custom dalle
al salvataggio (PARTICOLARITA-TEMA.md §11), quindi quella classe sparirebbe la prima volta che il cliente apre la pagina nell'editor e la fascia tornerebbe senza che nessun errore lo dica. L'id sopravvive. Il contenuto non si sposta: la sezione risale di 90px e se li riprende in padding, coprendo la fascia col proprio fondo. L'header non viene toccato. ⚠️ Il 48px e' il padding-top di .lc-sezione sotto i 992px: se cambia la', cambia qui. */ @media (max-width: 989.98px) { #lc-psicologia-del-lavoro #hero { margin-top: -90px; padding-top: calc(48px + 90px); } } /* --- La fotografia dell'hero -------------------------------------------- ⚠️ IL FILE E' 760x862, cioe' piccolo: a 1440 la colonna dell'hero misura ~540px e l'originale basta appena per gli schermi non retina. Non esiste nessuna derivata utile sopra questa misura. Se il cliente consegna il file grande, si sostituisce e si riscrivono src, width e height nel markup — queste regole non cambiano. Il ritaglio lo fa il CSS e non il file. L'originale e' 0,88 e viene portato a 4:5; sotto i 992px, dove la foto passa a piena larghezza sopra il testo, diventa 4:3 — un ritratto alto quanto lo schermo spingerebbe l'H1 fuori dalla prima videata. object-position: center 30% e non center: a meta' altezza il ritaglio 4:3 taglia la testa alla persona a sinistra. */ #lc-psicologia-del-lavoro .pl-foto { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; } /* ⚠️ LA SOGLIA E' 992px, la stessa a cui .lc-hero passa a due colonne (07-blocchi.css). Se quella cambia, cambia anche questa: sono lo stesso confine visto da due file diversi. */ @media (max-width: 991.98px) { #lc-psicologia-del-lavoro .pl-foto { aspect-ratio: 4 / 3; } } /* --- I quattro fatti del contesto --------------------------------------- "Obbligo", "100 punti", "Costo", "Continuita'" sono .lc-chip, cioe' etichette: nel markup non sono heading e qui non devono sembrarlo. Serve solo l'aria fra l'etichetta e il testo che segue — la regola generale .lc-card > * + * ne da' 8, che sotto una pillola sono pochi. */ #lc-psicologia-del-lavoro .pl-fatti .lc-chip + * { margin-top: 14px; } /* --- Le tre competenze --------------------------------------------------- ⚠️ E' QUI CHE MUOIONO I TRE COLORI DEL MOCK. Le icone arrivano con stroke="currentColor" e il colore lo decide questa riga sola: --lc-blu- chiaro fa 6,08:1 su bianco. Nel mock erano #2E6EA4, #B08F5E e #74927A, una ciascuna; l'oro e il verde non esistono da nessun'altra parte sul sito e avrebbero fatto sembrare questa sezione un innesto. Il colore sta sulla card e non sull' perche' currentColor eredita: cosi' un domani basta cambiare una dichiarazione per cambiare tutte e tre. */ #lc-psicologia-del-lavoro .pl-pilastri .lc-card { display: flex; flex-direction: column; color: var(--lc-blu-chiaro); } #lc-psicologia-del-lavoro .pl-icona { display: block; width: 40px; height: 40px; margin-bottom: 4px; } /* ⚠️ Due card su tre hanno un pulsante e una no. Senza margin-top: auto i due pulsanti si fermerebbero sotto testi di lunghezza diversa e starebbero a due altezze diverse nella stessa riga. Cosi' sono allineati al fondo della card, che grid-auto-rows: 1fr rende gia' della stessa altezza. */ #lc-psicologia-del-lavoro .pl-pilastri .lc-azione { margin-top: auto; padding-top: 16px; } /* --- I cinque ambiti ----------------------------------------------------- Le sigle normative sono .lc-chip dentro l'etichetta del bottone. La pillola e' inline e il titolo le scorre accanto: serve solo impedire che la sigla si spezzi su due righe e dare un filo d'aria a destra. ⚠️ display:inline-block sulla chip la fa gia' stare in linea, ma il suo line-height 1.45 la fa sporgere sotto la riga di testo del titolo: vertical-align: middle la riallinea. Senza, le cinque voci hanno l'altezza del bottone diversa da quella delle voci di un accordion normale. */ #lc-psicologia-del-lavoro .pl-ambiti .lc-chip { margin-right: 10px; vertical-align: middle; white-space: nowrap; } /* L'elenco dentro il pannello: un filo d'aria sopra, o si attacca al paragrafo che lo introduce. */ #lc-psicologia-del-lavoro .pl-ambiti .lc-corpo-card + .lc-elenco { margin-top: 12px; } /* --- I quattro passi del metodo ----------------------------------------- ⚠️ MAI TRE COLONNE. .lc-griglia--4 passa a 3 colonne fra 992 e 1199px (05-card.css): con quattro card darebbe 3+1, cioe' un passo orfano su una riga sua. Lo stesso accorgimento delle quattro fasi della Protesi d'Anca. Qui si resta a 2 fino a 1199 e si va a 4 da 1200, dove le card misurano ~270px — abbastanza per un titolo di due parole e tre righe di testo. */ @media (min-width: 992px) and (max-width: 1199.98px) { #lc-psicologia-del-lavoro .pl-passi { grid-template-columns: repeat(2, 1fr); } } /* --- Per chi e' pensato -------------------------------------------------- Cinque righe lunghe: senza un tetto, a 1440 arriverebbero a ~150 caratteri per riga. --lc-larghezza-testo e' la misura comoda gia' usata altrove (~75 caratteri). Il corpo sale da 15 a 16px perche' qui l'elenco E' il contenuto della sezione, non un dettaglio dentro una card. */ #lc-psicologia-del-lavoro .pl-destinatari { max-width: var(--lc-larghezza-testo); font-size: 16px; line-height: 1.65; } #lc-psicologia-del-lavoro .pl-destinatari li + li { margin-top: 10px; } #lc-psicologia-del-lavoro .pl-destinatari strong { color: var(--lc-blu); }