/* ========================================================================= Archivio Memoria di Airuno - foglio di stile unico Palette a due valori: #ffffff e #1a1a1a. Nessuna occorrenza di #6ec1e4. Mobile first. Font self-hostati: vedi css/fonts.css (generato dal cliente). Famiglie e pesi usati: Titillium Web 300, 400, 600 - Raleway 400 (+ 400 italico). ========================================================================= */ /* --- 1. Variabili ------------------------------------------------------- */ :root { --bianco: #ffffff; --inchiostro: #1a1a1a; --inchiostro-hover: #333333; --testo: #555555; --testo-enfasi: #212121; --testo-tenue: #767676; /* 4,54:1 su bianco - solo disabilitati */ --filetto: #e5e5e5; --filetto-tenue: #efefef; --fondo-tenue: #f6f6f6; --su-scuro: #e6e6e6; /* 13,94:1 su inchiostro (ricalcolato: il commento diceva 11,3, il LEGGIMI 14,20) */ --su-scuro-tenue: #cfcfcf; /* 11,17:1 (ricalcolato: diceva 11,58, impossibile - e' piu' scuro di --su-scuro) */ --su-scuro-debole: #9a9a9a; /* 6,19:1 - barra copyright */ --titoli: 'Titillium Web', sans-serif; --corpo: 'Raleway', sans-serif; /* 1240 = 1200 di CONTENUTO + 2x20 di padding di .contenitore. Il brief misura 1200 come larghezza del contenuto (1440 meno i due margini da 120), e da li' discendono le 3 colonne da 380 col gutter da 30: 380x3 + 30x2 = 1200. Con --contenitore a 1200 il padding lo mangiava e le colonne uscivano a 366,66, quindi le miniature d'archivio - ritagliate su Bunny a 380x380 apposta per la griglia - venivano ricampionate del 3,5%. */ --contenitore: 1240px; --gutter: 30px; --margine: 20px; --header-h: 118px; /* 90 di marchio + 14 sopra e sotto */ --fascia-h: 201px; } /* --- 2. Azzeramenti ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--corpo); font-size: 16px; line-height: 30px; color: var(--testo); background: var(--bianco); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--inchiostro); text-decoration: none; } a:hover { color: var(--testo); } h1, h2, h3, h4 { margin: 0; font-family: var(--titoli); font-weight: 300; color: var(--inchiostro); } p { margin: 0; } ul, ol { margin: 0; padding: 0; } button { font: inherit; } /* --- 3. Focus visibile (oggi il sito non ne ha) ------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; } .su-scuro a:focus-visible, .su-scuro button:focus-visible, .su-scuro input:focus-visible { outline-color: var(--bianco); } .salta-al-contenuto { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--inchiostro); color: var(--bianco); padding: 12px 18px; font-family: var(--titoli); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .salta-al-contenuto:focus { left: 0; color: var(--bianco); } /* --- 4. Impianto -------------------------------------------------------- */ .contenitore { width: 100%; max-width: var(--contenitore); margin: 0 auto; padding: 0 var(--margine); } .sezione { padding: 56px 0; } .sezione--stretta { padding: 36px 0; } .sezione--scura { background: var(--inchiostro); } .centrata { display: flex; flex-direction: column; align-items: center; text-align: center; } .solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* --- 5. Tipografia ----------------------------------------------------- */ .h1 { font-size: 38px; font-weight: 300; line-height: 48px; } .h2 { font-size: 32px; font-weight: 300; line-height: 42px; } .h3 { font-size: 26px; font-weight: 300; line-height: 36px; } .occhiello { font-family: var(--titoli); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--testo); } .filetto-punti { display: block; width: 96px; height: 2px; margin: 20px 0; background-image: radial-gradient(var(--testo) 1px, transparent 1.2px); background-size: 9px 2px; background-repeat: repeat-x; } .centrata .filetto-punti { margin-left: auto; margin-right: auto; } .introduttivo { font-size: 18px; line-height: 28px; color: var(--testo-enfasi); text-wrap: pretty; } .testo { font-size: 16px; line-height: 30px; color: var(--testo); text-wrap: pretty; } .etichetta-piccola { font-family: var(--titoli); font-size: 14px; letter-spacing: .04em; color: var(--testo); } .datazione { font-family: var(--titoli); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo); } /* --- 6. Bottoni -------------------------------------------------------- */ .bottone { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; background: var(--inchiostro); color: var(--bianco); font-family: var(--titoli); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 0; cursor: pointer; text-align: center; } .bottone:hover { background: var(--inchiostro-hover); color: var(--bianco); } .bottone::after { content: ''; position: absolute; left: 9px; top: 9px; right: -9px; bottom: -9px; border-right: 1px solid var(--inchiostro); border-bottom: 1px solid var(--inchiostro); pointer-events: none; } .bottone--cornice-chiara::after { border-color: rgba(255,255,255,.9); } .bottone--chiaro { background: var(--bianco); color: var(--inchiostro); } .bottone--chiaro:hover { background: var(--su-scuro); color: var(--inchiostro); } .bottone--chiaro::after { border-color: rgba(255,255,255,.9); } .bottone--contorno { background: var(--bianco); color: var(--inchiostro); border: 1px solid var(--inchiostro); } .bottone--contorno:hover { background: var(--inchiostro); color: var(--bianco); } .bottone--contorno::after { content: none; } .bottone--contorno-chiaro { background: transparent; color: var(--bianco); border: 1px solid var(--bianco); } .bottone--contorno-chiaro:hover { background: var(--bianco); color: var(--inchiostro); } .bottone--contorno-chiaro::after { content: none; } .bottone[disabled], .bottone--disabilitato { background: var(--filetto-tenue); color: var(--testo-tenue); border: 1px solid var(--filetto); cursor: default; } .bottone[disabled]::after, .bottone--disabilitato::after { content: none; } .collegamento-continua { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--inchiostro); font-family: var(--titoli); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--inchiostro); } .collegamento-continua:hover { color: var(--testo); border-color: var(--testo); } /* --- 7. Intestazione --------------------------------------------------- */ .intestazione { position: relative; z-index: 40; background: var(--bianco); } .intestazione__barra { max-width: 1440px; margin: 0 auto; min-height: 70px; display: flex; align-items: center; gap: 16px; padding: 0 var(--margine); } .marchio { display: flex; align-items: center; flex: 0 0 auto; } .marchio img { display: block; height: 44px; width: auto; } .marchio__sigla { font-family: var(--titoli); font-size: 26px; font-weight: 300; letter-spacing: .08em; color: var(--inchiostro); } .intestazione__azioni { margin-left: auto; display: flex; align-items: center; gap: 4px; } .icona-bottone { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--inchiostro); cursor: pointer; } .icona-bottone:hover { color: var(--testo); } .menu { display: none; } .menu__lista { list-style: none; display: flex; align-items: center; gap: 38px; } .menu__voce { position: relative; } .menu__collegamento { display: flex; align-items: center; gap: 7px; font-family: var(--titoli); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--inchiostro); } .menu__collegamento:hover { color: var(--testo); } .sottomenu { display: none; position: absolute; top: 100%; left: -24px; min-width: 220px; background: var(--bianco); border: 1px solid var(--filetto); padding: 8px 0; box-shadow: 0 18px 40px rgba(26,26,26,.1); list-style: none; } .menu__voce--aperta .sottomenu { display: block; } .sottomenu::before { content: ''; position: absolute; top: -7px; left: 70px; width: 12px; height: 12px; background: var(--bianco); border-left: 1px solid var(--filetto); border-top: 1px solid var(--filetto); transform: rotate(45deg); } .sottomenu a { display: block; padding: 11px 24px; font-family: var(--titoli); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--inchiostro); } .sottomenu a:hover { background: var(--fondo-tenue); } .ricerca-intestazione { display: none; border-top: 1px solid var(--filetto); background: var(--bianco); } .ricerca-intestazione[data-aperto] { display: block; } .ricerca-intestazione__corpo { padding-top: 26px; padding-bottom: 30px; } /* menu di telefono */ .menu-telefono { display: none; border-top: 1px solid var(--filetto-tenue); } .menu-telefono[data-aperto] { display: block; } .menu-telefono ul { list-style: none; } .menu-telefono > ul > li { border-bottom: 1px solid var(--filetto-tenue); } .menu-telefono a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 var(--margine); font-family: var(--titoli); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--inchiostro); } .menu-telefono ul ul { background: #fafafa; padding-bottom: 8px; } .menu-telefono ul ul a { min-height: 48px; padding-left: 36px; font-size: 14px; color: var(--testo); } .menu-telefono__ricerca { padding: 18px var(--margine); } /* --- 8. Fascia-titolo e briciole -------------------------------------- */ .fascia-titolo { position: relative; overflow: hidden; background: var(--inchiostro); } .fascia-titolo__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; } .fascia-titolo::after { content: ''; position: absolute; inset: 0; background: rgba(26,26,26,.55); } .fascia-titolo__titolo { position: relative; z-index: 1; min-height: 140px; display: flex; align-items: center; justify-content: center; padding: 24px var(--margine); text-align: center; font-size: 34px; font-weight: 300; line-height: 44px; color: var(--bianco); } .briciole { border-bottom: 1px solid var(--filetto-tenue); } .briciole ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 16px; padding-bottom: 16px; font-family: var(--titoli); font-size: 14px; color: var(--testo); } /* min-height 24px = minimo di WCAG 2.2 AA per l'area di tocco. Il testo resta a 14px: cambia solo l'area cliccabile, che su telefono era alta 21px. */ .briciole a { color: var(--testo); display: inline-block; min-height: 24px; line-height: 24px; } .briciole a:hover { color: var(--inchiostro); text-decoration: underline; } .briciole [aria-current] { color: var(--inchiostro); } .briciole__separatore { color: #999999; } /* --- 9. Home: hero, citazione, richiamo ------------------------------- */ .eroe { position: relative; overflow: hidden; background: var(--inchiostro); min-height: 520px; } .eroe__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; } .eroe__foto[data-attiva] { opacity: 1; } .eroe::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,.34) 0%, rgba(26,26,26,.3) 45%, rgba(26,26,26,.52) 100%); } .eroe__corpo { position: relative; z-index: 1; min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px var(--margine); } .eroe__pila { position: relative; display: flex; align-items: center; justify-content: center; } .eroe__contorno { position: absolute; font-family: var(--titoli); font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: .1em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.75); white-space: nowrap; } /* ⚠️ `font-family` esplicita: dal 2026-08-30 questo elemento e' un

(era uno ), e l'azzeramento di §2 manda h1..h4 su --titoli. Il kit lo rende col font del CORPO, ed e' quello che si tiene. */ .eroe__titolo { position: relative; font-family: var(--corpo); font-size: 34px; font-weight: 300; line-height: 46px; color: var(--bianco); } .eroe__sottotitolo { margin-top: 14px; font-size: 16px; line-height: 26px; color: var(--bianco); } .eroe__bottone { margin-top: 36px; } .eroe__frecce { position: absolute; right: 0; bottom: 0; z-index: 2; display: flex; } .eroe__freccia { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(26,26,26,.34); border: 0; color: var(--bianco); cursor: pointer; } .eroe__freccia + .eroe__freccia { border-left: 1px solid rgba(255,255,255,.28); } .eroe__freccia:hover { background: rgba(26,26,26,.7); } .damascata { position: relative; overflow: hidden; background: var(--inchiostro); } .damascata::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.014) 0 9px, transparent 10px), radial-gradient(circle at 75% 70%, rgba(255,255,255,.012) 0 12px, transparent 13px); background-size: 96px 84px; } .damascata > * { position: relative; z-index: 1; } .citazione { display: grid; gap: 34px; padding-top: 60px; padding-bottom: 60px; } .citazione blockquote { margin: 0; } .citazione p { font-style: italic; font-size: 21px; line-height: 36px; color: var(--bianco); text-wrap: pretty; } .citazione__autore { display: flex; align-items: center; gap: 22px; } .citazione__ritratto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #2a2a2a; flex: 0 0 auto; } .citazione__nome { font-family: var(--titoli); font-size: 22px; line-height: 30px; color: var(--bianco); } .citazione__ruolo { margin-top: 4px; font-family: var(--titoli); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #b9b9b9; } .richiamo { display: grid; gap: 26px; padding-top: 54px; padding-bottom: 54px; align-items: center; } .richiamo__titolo { font-size: 30px; font-weight: 300; line-height: 40px; color: var(--bianco); } .richiamo__testo { margin-top: 8px; font-size: 16px; line-height: 28px; color: var(--su-scuro-tenue); } /* --- 10. Card di raccolta -------------------------------------------- */ .raccolte { list-style: none; display: grid; gap: var(--gutter); } .card-raccolta { position: relative; display: block; aspect-ratio: 380 / 272; overflow: hidden; background: var(--inchiostro); } .card-raccolta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .card-raccolta__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,.3) 0%, rgba(26,26,26,.42) 55%, rgba(26,26,26,.7) 100%); } .card-raccolta__cornice { position: absolute; left: 16px; right: 16px; top: 16px; bottom: 16px; border-right: 1px solid rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.85); } .card-raccolta__numero { position: absolute; right: 22px; bottom: 8px; font-family: var(--titoli); font-size: 100px; font-weight: 300; line-height: 1; color: rgba(255,255,255,.22); } .card-raccolta__nome { position: absolute; left: 26px; right: 100px; bottom: 30px; font-family: var(--titoli); font-size: 26px; font-weight: 300; line-height: 34px; color: var(--bianco); text-wrap: pretty; } /* --- 11. Accordion --------------------------------------------------- */ .accordion { border: 1px solid var(--filetto); } .accordion + .accordion { margin-top: 20px; } .accordion__testa { margin: 0; } .accordion__bottone { width: 100%; display: flex; align-items: center; gap: 14px; padding: 19px 24px; background: var(--bianco); border: 0; cursor: pointer; text-align: left; font-family: var(--titoli); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--inchiostro); } .accordion__bottone:hover { background: #fafafa; } .accordion__segno { flex: 0 0 auto; width: 20px; height: 20px; background: var(--inchiostro); color: var(--bianco); display: flex; align-items: center; justify-content: center; font-family: var(--titoli); font-size: 15px; line-height: 1; } .accordion__corpo { display: none; border-top: 1px solid var(--filetto); padding: 28px 24px 34px; } .accordion[data-aperto] .accordion__corpo { display: block; } /* --- 11-bis. Accordion NATIVO (
) ----------------------------- */ /* Le pagine delle raccolte arrivano dal WordPress con un `
` nativo, e si e' scelto di tenerlo invece di convertirlo nel `.accordion` del kit: fa la stessa cosa SENZA JavaScript, e' accessibile per costruzione e sopravvive a qualsiasi salvataggio dall'editor del pannello, che le classi le puo' perdere. Queste regole gli danno l'aspetto dell'accordion disegnato. */ .prosa details, .accordion-nativo { border: 1px solid var(--filetto); margin-top: 36px; } .prosa details + details, .accordion-nativo + .accordion-nativo { margin-top: 20px; } .prosa summary, .accordion-nativo > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 19px 24px; background: var(--bianco); cursor: pointer; font-family: var(--titoli); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--inchiostro); } .prosa summary::-webkit-details-marker, .accordion-nativo > summary::-webkit-details-marker { display: none; } /* la freccetta di serie */ .prosa summary::marker, .accordion-nativo > summary::marker { content: ''; } .prosa summary::before, .accordion-nativo > summary::before { content: '+'; flex: 0 0 auto; width: 20px; height: 20px; background: var(--inchiostro); color: var(--bianco); display: flex; align-items: center; justify-content: center; font-family: var(--titoli); font-size: 15px; line-height: 1; } .prosa details[open] summary::before, .accordion-nativo[open] > summary::before { content: '\2013'; } /* trattino ad accordion aperto */ .prosa summary:hover, .accordion-nativo > summary:hover { background: #fafafa; } .prosa details > *:not(summary), .accordion-nativo > *:not(summary) { padding-left: 24px; padding-right: 24px; } .prosa details > *:not(summary):first-of-type, .accordion-nativo > *:not(summary):first-of-type { border-top: 1px solid var(--filetto); padding-top: 28px; } .prosa details > *:last-child, .accordion-nativo > *:last-child { padding-bottom: 34px; } /* 🐛 2026-08-30 - IL TESTO DELL'ACCORDION ERA SCHIACCIATO A SINISTRA. Nelle quattro pagine con l'accordion (archivio e le tre raccolte) il corpo e' un `
`, e `.prosa` e' largo al massimo 800 SENZA margini automatici: dentro un riquadro che sta sul contenitore pieno (1200) il testo si appoggiava a sinistra e mezza scheda restava vuota. Si portava dietro anche il FILETTO sotto il titolo, che nasce sullo stesso elemento e finiva a meta' riquadro - il segnale piu' visibile che qualcosa non tornava. ⚠️ NON e' una regressione nostra: il kit fa lo stesso (`.accordion__corpo prosa` dentro `.contenitore`, `.prosa` a 800 senza `auto`). E' una deviazione VOLUTA dal kit, la seconda dopo l'altezza delle card delle notizie. ⭐ La misura di lettura RESTA 800: una riga di 1200px sono ~180 caratteri, cioe' il rimedio peggiore del male. Cambia solo dove sta la colonna: al centro. 🔴 Il `max-width: none` sul contenitore serve perche' bordo e imbottitura tornino a tutta larghezza; sono la cornice del riquadro, non del testo. */ .accordion-nativo > .prosa { max-width: none; } .accordion-nativo > .prosa > * { max-width: 800px; margin-left: auto; margin-right: auto; } /* --- 12. Griglia d'archivio ------------------------------------------ */ .barra-elenco { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--filetto-tenue); } /* Filtro per categoria dell'elenco notizie. Non e' un componente nuovo del kit: e' la ricetta dell'`.etichetta` e dell'`.occhiello` - Titillium 13, 600, maiuscolo, spaziato - applicata a una fila di collegamenti, con la voce attiva sul fondo inchiostro come le targhette. Sta nella `.barra-elenco` al posto in cui la pagina raccolta mette l'ordinamento. */ .filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .filtri__voce { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--filetto); background: var(--bianco); font-family: var(--titoli); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--inchiostro); text-decoration: none; } .filtri__voce:hover { border-color: var(--inchiostro); } .filtri__voce[aria-current] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--bianco); } .campo-ordina { display: flex; align-items: center; gap: 12px; } .campo-ordina > span { font-family: var(--titoli); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--inchiostro); } .selettore { height: 44px; padding: 0 14px; border: 1px solid var(--inchiostro); background: var(--bianco); font-family: var(--titoli); font-size: 14px; color: var(--inchiostro); cursor: pointer; } .griglia-archivio { list-style: none; display: grid; gap: 40px var(--gutter); margin-top: 40px; } .miniatura { display: block; text-align: center; } .miniatura img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f2f2f2; } .miniatura__senza-foto { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; background: var(--fondo-tenue); border: 1px solid var(--filetto); font-family: var(--titoli); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-tenue); } .miniatura__titolo { display: block; margin-top: 18px; font-family: var(--titoli); font-size: 21px; font-weight: 400; line-height: 29px; color: var(--inchiostro); text-wrap: pretty; } .miniatura__data { display: block; margin-top: 8px; } .stato-vuoto { border: 1px solid var(--filetto); padding: 54px 24px; text-align: center; } .stato-vuoto__titolo { font-family: var(--titoli); font-size: 24px; font-weight: 300; color: var(--inchiostro); } .stato-vuoto__testo { margin: 10px auto 26px; max-width: 620px; font-size: 16px; line-height: 28px; } .scorciatoie { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } /* --- 13. Paginazione ------------------------------------------------- */ .paginazione { margin-top: 50px; padding-top: 34px; border-top: 1px solid var(--filetto-tenue); display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; justify-content: space-between; } .paginazione__lista { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .paginazione__voce { min-width: 46px; height: 46px; padding: 0 12px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--filetto); background: var(--bianco); font-family: var(--titoli); font-size: 15px; font-weight: 600; color: var(--inchiostro); } a.paginazione__voce:hover, button.paginazione__voce:hover { border-color: var(--inchiostro); } .paginazione__voce[aria-current] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--bianco); } .paginazione__voce[aria-disabled='true'], .paginazione__voce[disabled] { color: #bdbdbd; cursor: default; } /* --- 14. Scheda d'archivio ------------------------------------------- */ .scheda__intestazione { padding-top: 46px; } .scheda__anno { font-family: var(--titoli); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--testo); } .scheda__titolo { margin-top: 14px; font-size: 32px; font-weight: 300; line-height: 44px; text-wrap: pretty; } .scheda__corpo { display: grid; gap: 44px; padding-top: 40px; align-items: start; } .scheda__foto { background: var(--inchiostro); padding: 18px; display: flex; align-items: center; justify-content: center; min-height: 260px; } .scheda__foto img { display: block; max-width: 100%; max-height: 620px; width: auto; } /* La fotografia si ingrandisce (2026-08-29). Il vecchio WordPress la apriva nella lightbox di Elementor e ci metteva sopra un «+»: senza un segnale visibile quasi nessuno prova a cliccare, e su un archivio fotografico storico il dettaglio dei volti E' il contenuto - in pagina le foto si vedono al 44-66% della loro risoluzione vera. 🔴 `line-height: 0` sul collegamento: l'`` e' una riga di testo e sotto l'immagine lascerebbe lo spazio del discendente, cioe' una fascia scura di qualche pixel dentro il riquadro. */ .scheda__lente { position: relative; display: inline-block; line-height: 0; cursor: zoom-in; } .scheda__lente img { transition: opacity 200ms ease; } .scheda__lente:hover img, .scheda__lente:focus-visible img { opacity: .82; } /* Il segnale: sempre visibile ma discreto, pieno al passaggio del puntatore e col fuoco da tastiera. Sta sopra la foto, che ha il fondo scuro del riquadro. */ .scheda__lente-segno { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; /* 🔴 .70 e non .55: il segno sta SOPRA LA FOTOGRAFIA, e le fotografie qui vanno dal quasi nero al quasi bianco. Nel caso peggiore - una foto chiara sotto - il fondo composito e' #5f5f5f e il «+» bianco ci sta a 6,39:1; con .55 era #818181 e 3,90:1, cioe' SOTTO la soglia AA. Calcolato, non stimato a occhio: e' lo stesso errore della targhetta di categoria del report 808, li' addirittura 1:1. */ background: rgba(26,26,26,.7); color: var(--bianco); font-family: var(--titoli); font-size: 26px; line-height: 1; font-weight: 300; opacity: .8; transition: opacity 200ms ease, background 200ms ease; pointer-events: none; /* il click e' del collegamento, non del segno */ } .scheda__lente:hover .scheda__lente-segno, .scheda__lente:focus-visible .scheda__lente-segno { opacity: 1; background: rgba(26,26,26,.85); } /* Il fuoco da tastiera deve VEDERSI: il contorno sta fuori dall'immagine, sul fondo scuro del riquadro, dove ha contrasto. */ .scheda__lente:focus-visible { outline: 2px solid var(--bianco); outline-offset: 4px; } /* 44x44 e' la misura minima di un'area di tocco (stessa regola dei toggle del pannello): sul telefono il segno non si rimpicciolisce. */ .scheda__codice { margin-top: 16px; text-align: center; font-family: var(--titoli); font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro); } .scheda__nota { margin-top: 12px; text-align: center; font-family: var(--titoli); font-size: 13px; color: var(--testo); } .titolo-blocco { font-family: var(--titoli); font-size: 26px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--inchiostro); } .scheda-tecnica { display: grid; gap: 22px 30px; margin-top: 24px; } .scheda-tecnica dt { font-family: var(--titoli); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro); } .scheda-tecnica dd { margin: 6px 0 0; font-size: 16px; line-height: 26px; color: var(--testo); } .vicine { border-top: 1px solid var(--filetto-tenue); padding-top: 34px; display: grid; gap: 24px; } .vicine__collegamento { display: flex; align-items: center; gap: 18px; font-family: var(--titoli); font-size: 17px; } .vicine__collegamento img { width: 110px; height: 110px; object-fit: cover; background: #f2f2f2; flex: 0 0 auto; } .vicine__collegamento--successiva { justify-content: flex-end; } .condivisione { display: flex; justify-content: center; gap: 14px; padding: 40px 0 0; } .cerchietto { width: 38px; height: 38px; border: 1px solid var(--filetto); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--inchiostro); font-family: var(--titoli); font-size: 17px; font-weight: 600; line-height: 1; } .cerchietto:hover { background: var(--inchiostro); color: var(--bianco); } .cerchietto--su-scuro { border-color: rgba(255,255,255,.4); color: var(--bianco); } .cerchietto--su-scuro:hover { background: var(--bianco); color: var(--inchiostro); } /* --- 15. Notizie ------------------------------------------------------ */ /* ⚠️ Il kit aveva `align-items: start`, cioe' ogni riquadro alto quanto il suo contenuto: con estratti di lunghezza diversa i riquadri di una riga finivano sfalsati. Richiesta esplicita del 2026-08-29: riquadri della stessa altezza. Si ottiene lasciando lo `stretch` predefinito della griglia e facendo del collegamento una colonna flessibile, cosi' il bordo della card arriva in fondo e il "Continua a leggere" si allinea in basso su tutti (`margin-top: auto`) invece di galleggiare dietro l'ultima riga di testo. */ .griglia-news { list-style: none; display: grid; gap: var(--gutter); } .card-news { border: 1px solid var(--filetto-tenue); } .card-news > a { display: flex; flex-direction: column; height: 100%; } .card-news__foto { position: relative; display: block; overflow: hidden; background: var(--fondo-tenue); } .card-news__foto img { display: block; width: 100%; aspect-ratio: 340 / 230; object-fit: cover; } .etichette { position: absolute; left: 0; bottom: 0; display: flex; gap: 1px; } .etichetta { padding: 7px 14px; background: var(--inchiostro); color: var(--bianco); font-family: var(--titoli); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } /* Variante IN FLUSSO delle targhette (scheda della notizia). 🔴 `.etichette` nasce come sovrapposizione sulla foto della card ed e' `position:absolute`: fuori da un antenato posizionato si stacca dal flusso e finisce nell'angolo della pagina. Qui le targhette stanno in colonna di testo. 🔴 E dentro `.prosa` va rialzata la specificita': `.prosa a` (0,1,1) batte `.etichetta` (0,1,0) e la targhetta uscirebbe INCHIOSTRO SU INCHIOSTRO, cioe' invisibile, per giunta sottolineata. */ .etichette--riga { position: static; flex-wrap: wrap; } .prosa a.etichetta { color: var(--bianco); text-decoration: none; } .prosa a.etichetta:hover { background: var(--testo); color: var(--bianco); } /* `align-items: flex-start` serve al "Continua a leggere": e' un `inline-flex` e da elemento flessibile si stirerebbe a tutta la larghezza della card, portandosi dietro il filetto sottolineato che nel kit sta sotto le sole parole. */ .card-news__corpo { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; padding: 22px 24px 28px; } .card-news__data { display: block; font-family: var(--titoli); font-size: 14px; letter-spacing: .06em; color: var(--testo); } .card-news__titolo { display: block; margin-top: 10px; font-family: var(--titoli); font-size: 24px; font-weight: 400; line-height: 32px; color: var(--inchiostro); text-wrap: pretty; } .card-news__estratto { display: block; margin-top: 12px; font-size: 16px; line-height: 28px; color: var(--testo); } .card-news__continua { margin-top: auto; padding-top: 20px; } /* --- 15-bis. Corpo dell'articolo ------------------------------------- */ /* 🔴 Le due regole vanno qualificate con `.prosa`: `.prosa figure` (0,1,1) e `.prosa figure img` (0,1,2) batterebbero una classe da sola, e la locandina resterebbe larga come la colonna. */ .prosa .figura-copertina { margin: 30px 0 44px; } /* prima erano 24 sotto: il testo stava addosso alla foto */ /* La locandina in fondo e' un manifesto VERTICALE (636x900): centrata alla sua misura vera. Con `width: 100%` di `.prosa figure img` verrebbe portata agli 800 della colonna, cioe' ingrandita del 26% e sgranata. */ .prosa .locandina { margin: 44px 0 0; text-align: center; } .prosa .locandina img { display: inline-block; width: auto; max-width: 100%; height: auto; } /* La locandina si ingrandisce: in pagina c'e' la miniatura, il collegamento porta alla piena. 🔴 `.prosa a` sottolinea e colora ogni collegamento - qui dentro c'e' un'immagine, non del testo, e il filetto uscirebbe sotto la locandina. */ .prosa .locandina__lente { display: inline-block; text-decoration: none; cursor: zoom-in; } .prosa .locandina__lente img { transition: opacity 200ms ease; } .prosa .locandina__lente:hover img { opacity: .88; } /* Ingrandimento a schermo intero. Senza JavaScript il collegamento apre comunque l'immagine, quindi questo strato e' una comodita', non un requisito. */ .lente { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(26,26,26,.92); } .lente[hidden] { display: none; } .lente img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .lente__chiudi { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--bianco); font-size: 30px; line-height: 1; cursor: pointer; } .lente__chiudi:hover { color: var(--su-scuro-tenue); } /* --- 16. Località ----------------------------------------------------- */ .griglia-luoghi { display: grid; gap: 50px var(--gutter); } .luogo { display: flex; flex-direction: column; } .luogo img { display: block; width: 100%; aspect-ratio: 380 / 480; object-fit: cover; background: #f2f2f2; filter: grayscale(1); } .luogo__nome { margin-top: 24px; text-align: center; font-size: 28px; font-weight: 300; line-height: 38px; } .luogo__testo { margin-top: 14px; text-align: center; } .luogo__collegamento { margin: 20px auto 0; } /* --- 17. Corpo editoriale (stili per discendenza) --------------------- */ .prosa { max-width: 800px; } /* ⭐ Colonna di prosa a tutta larghezza del contenitore (1200). La chiede uno script di modulo con `$ama_prosa_larga = true` e la usano le due informative legali, che nel testo standard di flotta sono lunghissime e dentro gli 800px del corpo editoriale sembravano una striscia stretta in mezzo alla pagina. Le regole tipografiche di `.prosa` restano tutte: cambia solo la misura. */ .prosa--larga { max-width: none; } .prosa > * + * { margin-top: 22px; } .prosa p { font-size: 16px; line-height: 30px; color: var(--testo); text-wrap: pretty; } .prosa p.introduttivo { font-size: 18px; line-height: 28px; color: var(--testo-enfasi); } .prosa h2 { font-size: 32px; font-weight: 300; line-height: 42px; margin-top: 40px; } .prosa h3 { font-size: 26px; font-weight: 300; line-height: 36px; margin-top: 34px; } .prosa h4 { font-family: var(--titoli); font-size: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: 28px; } .prosa ul, .prosa ol { padding-left: 22px; font-size: 16px; line-height: 30px; color: var(--testo); } .prosa li + li { margin-top: 6px; } .prosa a { color: var(--inchiostro); text-decoration: underline; } .prosa a:hover { color: var(--testo); } .prosa strong { font-weight: 700; color: var(--inchiostro); } .prosa blockquote { margin: 0; padding: 6px 0 6px 26px; border-left: 2px solid var(--inchiostro); } .prosa blockquote p { font-style: italic; font-size: 19px; line-height: 34px; color: var(--inchiostro); } .prosa figure { margin: 0; } .prosa figure img { display: block; width: 100%; } .prosa figcaption { margin-top: 10px; font-family: var(--titoli); font-size: 14px; color: var(--testo); } .prosa table { width: 100%; border-collapse: collapse; font-size: 15px; } .prosa th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--inchiostro); font-family: var(--titoli); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro); } .prosa td { padding: 10px 12px; border-bottom: 1px solid var(--filetto-tenue); color: var(--testo); } /* --- 18. Moduli ------------------------------------------------------- */ .modulo { display: grid; gap: 24px 30px; } .campo { display: block; } .campo__etichetta { display: block; margin-bottom: 9px; font-family: var(--titoli); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--inchiostro); } .campo input, .campo textarea, .campo select { width: 100%; border: 1px solid var(--inchiostro); background: var(--bianco); font-family: var(--corpo); font-size: 16px; color: var(--inchiostro); } .campo input, .campo select { height: 50px; padding: 0 14px; } .campo textarea { padding: 12px 14px; line-height: 28px; resize: vertical; } .campo__aiuto { display: block; margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--testo); } .campo--errore input, .campo--errore textarea { border-width: 2px; } .campo__errore { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--inchiostro); } .campo__errore svg { flex: 0 0 auto; margin-top: 3px; } .campo__errore strong { font-weight: 600; } .campo-consenso { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 26px; } .campo-consenso input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--inchiostro); flex: 0 0 auto; } .conferma-invio { border: 1px solid var(--inchiostro); padding: 24px 26px; display: flex; align-items: flex-start; gap: 16px; } .conferma-invio svg { flex: 0 0 auto; margin-top: 5px; } .conferma-invio__titolo { font-family: var(--titoli); font-size: 22px; font-weight: 400; color: var(--inchiostro); } .modulo-ricerca { display: flex; align-items: flex-end; gap: 16px; max-width: 720px; } .modulo-ricerca .campo { flex: 1 1 auto; } .modulo-ricerca button { height: 50px; padding: 0 26px; } .ricerca-sottolineata { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 10px; } .ricerca-sottolineata input { flex: 1 1 auto; height: 34px; border: 0; background: transparent; font-family: var(--corpo); font-size: 16px; color: var(--bianco); } .ricerca-sottolineata input::placeholder { color: rgba(255,255,255,.7); } .ricerca-sottolineata button { background: none; border: 0; color: var(--bianco); cursor: pointer; width: 34px; height: 34px; } /* --- 19. Contatti ----------------------------------------------------- */ .contatti-riquadro { display: grid; gap: 40px; align-items: center; } .contatti-stemma { display: flex; align-items: center; justify-content: center; padding: 20px; } /* Lo stemma vero al posto del segnaposto del kit: stessa misura, stesso posto. E' l'unica immagine a colori della pagina, quindi niente grayscale. */ .contatti-stemma img { width: 100%; max-width: 340px; height: auto; } .contatti-stemma__segnaposto { width: 100%; max-width: 340px; aspect-ratio: 1 / 1; border: 1px solid var(--filetto); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; font-family: var(--titoli); font-size: 13px; line-height: 22px; color: var(--testo-tenue); } .contatti-pannello { padding: 44px 30px; } .contatti-pannello__titolo { margin-top: 14px; font-size: 32px; font-weight: 300; line-height: 44px; color: var(--bianco); } .contatti-pannello__testo { margin: 16px 0 30px; max-width: 440px; font-size: 16px; line-height: 30px; color: var(--su-scuro-tenue); } .riferimenti { margin: 0; display: flex; flex-direction: column; gap: 24px; } .riferimento { display: flex; align-items: flex-start; gap: 16px; } .riferimento svg { flex: 0 0 auto; margin-top: 4px; } .riferimento dt { font-family: var(--titoli); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bianco); } .riferimento dd { margin: 4px 0 0; font-size: 16px; line-height: 26px; color: var(--su-scuro); } .riferimento dd a { color: var(--su-scuro); } .riferimento dd a:hover { color: var(--bianco); text-decoration: underline; } .social { display: flex; gap: 12px; margin-top: 30px; } .mappa-segnaposto { border: 1px solid var(--filetto); min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 30px; } .mappa-segnaposto__indirizzo { font-family: var(--titoli); font-size: 20px; font-weight: 400; color: var(--inchiostro); } .mappa-segnaposto p { max-width: 560px; font-size: 15px; line-height: 26px; } /* --- 20. 404 e manutenzione ------------------------------------------ */ .pagina-piena { position: relative; overflow: hidden; background: var(--inchiostro); min-height: 100vh; } .pagina-piena__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pagina-piena::after { content: ''; position: absolute; inset: 0; background: rgba(26,26,26,.58); } .pagina-piena__corpo { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 40px; padding: 34px var(--margine) 60px; text-align: center; } .pagina-piena__blocco { display: flex; flex-direction: column; align-items: center; } /* 🔴 `.pagina-piena p` (0,1,1) batte `.numero-404` (0,1,0): senza alzare la specificita' il numerale esce a 17px invece che a 96. Vale anche nelle due varianti responsive piu' sotto. */ .pagina-piena .numero-404 { font-family: var(--titoli); font-size: 96px; font-weight: 300; line-height: 1; color: var(--bianco); } .pagina-piena h1 { margin-top: 20px; font-size: 32px; font-weight: 300; line-height: 44px; color: var(--bianco); } .pagina-piena p { margin-top: 14px; max-width: 620px; font-size: 17px; line-height: 30px; color: var(--su-scuro); } .manutenzione { background: var(--inchiostro); padding: 70px 24px; text-align: center; } .manutenzione img { width: 160px; } .manutenzione__titolo { margin-top: 30px; font-family: var(--titoli); font-size: 30px; font-weight: 300; line-height: 42px; color: var(--bianco); } .manutenzione p { margin: 10px auto 0; max-width: 560px; font-size: 16px; line-height: 28px; color: var(--su-scuro-tenue); } /* --- 21. Banner cookie ----------------------------------------------- */ .banner-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--bianco); border-top: 1px solid var(--inchiostro); padding: 20px var(--margine); } .banner-cookie__corpo { max-width: var(--contenitore); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; justify-content: space-between; } .banner-cookie p { max-width: 620px; font-size: 15px; line-height: 26px; } .banner-cookie__azioni { display: flex; gap: 14px; } .banner-cookie__azioni .bottone { min-height: 48px; padding: 0 24px; } /* --- 20-bis. Ricerca del CORE, vestita col kit ------------------------- * 🔴 La pagina di ricerca la rende il CORE (`inc/search.inc.php`) col proprio * markup `.lcr-search-*`, che il kit non conosce: senza queste regole la * schermata usciva NUDA - campo Arial 13px largo 177, bottone grigio di * sistema, elenco dei risultati COI PALLINI - dentro un sito per il resto * disegnato. Si veste il markup del core invece di riscrivere la ricerca, * cosi' l'indice, l'evidenziazione e l'impaginazione restano quelle del core. * ⚠️ Tutto questo vive dentro `.prosa`, che sottolinea i link, mette i pallini * agli elenchi e li rientra di 22px: le regole qui sotto devono batterla, ed * e' per questo che diverse partono da `.prosa`. * 📐 Corrispondenze col kit (design-consegna/ricerca.html): modulo di ricerca = * `.modulo-ricerca` + `.campo`, risultati = `.griglia-news`/`.card-news`, * impaginazione = `.paginazione`, stato vuoto = `.stato-vuoto`. */ /* modulo di ricerca = .modulo-ricerca */ .lcr-search-form { display: flex; align-items: flex-end; gap: 16px; max-width: 720px; margin-bottom: 28px; } .lcr-search-input { flex: 1 1 auto; width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--inchiostro); background: var(--bianco); font-family: var(--corpo); font-size: 16px; color: var(--inchiostro); } .lcr-search-btn { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; background: var(--inchiostro); color: var(--bianco); font-family: var(--titoli); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 0; border-radius: 0; cursor: pointer; } .lcr-search-btn:hover { background: var(--inchiostro-hover); color: var(--bianco); } .lcr-search-btn::after { /* la cornice sfalsata, come su ogni .bottone del sito */ content: ''; position: absolute; left: 9px; top: 9px; right: -9px; bottom: -9px; border-right: 1px solid var(--inchiostro); border-bottom: 1px solid var(--inchiostro); pointer-events: none; } /* riga di riepilogo = .etichetta-piccola */ .prosa .lcr-search-summary, .lcr-search-summary { margin: 28px 0; font-family: var(--titoli); font-size: 14px; letter-spacing: .04em; color: var(--testo); } /* elenco dei risultati = .griglia-news di .card-news senza fotografia */ .prosa .lcr-search-results, .lcr-search-results { list-style: none; display: grid; gap: var(--gutter); align-items: start; padding-left: 0; margin: 0; } .prosa .lcr-search-result, .lcr-search-result { border: 1px solid var(--filetto-tenue); margin: 0; } .lcr-search-result-body { display: block; padding: 22px 24px 28px; } .prosa .lcr-search-result-title, .lcr-search-result-title { display: block; font-family: var(--titoli); font-size: 24px; font-weight: 400; line-height: 32px; color: var(--inchiostro); text-decoration: none; text-wrap: pretty; } .prosa .lcr-search-result-title:hover { color: var(--testo); } .prosa .lcr-search-result-snippet, .lcr-search-result-snippet { margin-top: 12px; font-size: 16px; line-height: 28px; color: var(--testo); } /* l'evidenziazione del core: niente giallo di serie, il sito e' monocromatico */ .lcr-search mark { background: var(--fondo-tenue); color: var(--inchiostro); font-weight: 600; } /* impaginazione = .paginazione */ .lcr-search-pagination { margin-top: 50px; padding-top: 34px; border-top: 1px solid var(--filetto-tenue); display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; justify-content: space-between; } .lcr-search-page { font-family: var(--titoli); font-size: 14px; letter-spacing: .04em; color: var(--testo); } .prosa .lcr-search-prev, .prosa .lcr-search-next, .lcr-search-prev, .lcr-search-next { min-width: 46px; height: 46px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--filetto); background: var(--bianco); font-family: var(--titoli); font-size: 15px; font-weight: 600; color: var(--inchiostro); text-decoration: none; } .prosa .lcr-search-prev:hover, .prosa .lcr-search-next:hover { border-color: var(--inchiostro); color: var(--inchiostro); } /* stato vuoto = .stato-vuoto. Il core emette DUE

fratelli, non un riquadro: il bordo si compone dando la meta' alta al primo e la meta' bassa al secondo. */ .prosa .lcr-search-noresults, .lcr-search-noresults { margin: 0; border: 1px solid var(--filetto); border-bottom: 0; padding: 54px 24px 0; text-align: center; font-family: var(--titoli); font-size: 24px; font-weight: 300; line-height: 34px; color: var(--inchiostro); } /* le scorciatoie le aggiunge js/site.js: stanno FUORI dal riquadro dello stato vuoto, come nel kit, quindi il bordo del riquadro si chiude sull'aiuto */ .lcr-search-noresults ~ .scorciatoie { margin-top: 26px; } .prosa .lcr-search-hint, .lcr-search-hint { /* margine ZERO: e' la meta' bassa dello stesso riquadro, un margine qui aprirebbe una fessura fra i due bordi. Lo spazio si fa col padding. */ margin: 0; border: 1px solid var(--filetto); border-top: 0; padding: 10px 24px 54px; text-align: center; font-size: 16px; line-height: 28px; color: var(--testo); } .prosa .lcr-search-empty, .lcr-search-empty { margin: 0; border: 1px solid var(--filetto); padding: 54px 24px; text-align: center; font-family: var(--titoli); font-size: 24px; font-weight: 300; line-height: 34px; color: var(--inchiostro); } /* --- 21-bis. Banner cookie del CORE, vestito col kit ------------------ * 🔴 Il banner che il sito mostra davvero NON e' `.banner-cookie` qui sopra: e' * quello del core (`app/lcRaptor5.0/js/cookie_banner.js`), che si porta dentro * il proprio CSS e fa cose che il kit non fa - Consent Mode v2, finestra delle * preferenze, ping delle statistiche. Si tiene quello e lo si VESTE, invece di * sostituirlo con markup che non farebbe nulla di tutto cio'. * 🔴 Il core stila per ID (`#lcr-cb`, specificita' 1,0,0) e inietta il proprio *