/* Theme Name: Design Scuole Italia Child - Senza Hero Theme URI: https://designers.italia.it/ Description: Tema child per Design Scuole Italia — versione di prova senza l'hero (identità della scuola spostata nel Banner in evidenza, hero del tema padre nascosto) Author: [Fernando Chiurazzi] Template: design-scuole-wordpress-theme Version: 2.18.2 */ /* Spazio sotto lo slider in Pubblicità e Informazione */ .home .section .my-home-slider { margin-bottom: 4.0rem; margin-top: 4.0rem; } /* ========================================================================== Banner in evidenza (fascia avvisi sotto il menu principale, in home page) ========================================================================== */ .banner-evidenza-home { /* Colori in base alla priorità: coerenti su tutto il sito, non a scelta libera. Definiti qui una sola volta e riusati sia sullo sfondo degli avvisi sia nei pallini della legenda, così restano sempre allineati. */ /* "Informazione" resta blu (coerente con il resto del sito e con lo standard PA: blu=informazione, ambra=scadenza, sono già due colori semanticamente diversi — un arancione qui li avrebbe confusi). Non serve più differenziarlo "a forza" dal blu scuro del banner fisso a sinistra (#0317a2): con il nuovo stile a card bianca + accento colorato (vedi .banner-evidenza-content più sotto) il colore non riempie più un intero blocco, quindi il rischio di confusione visiva con la colonna a fianco è già risolto dal layout, non dalla tinta. */ --banner-evidenza-colore-informazione: #0b6fb8; --banner-evidenza-colore-opportunita: #1e7145; --banner-evidenza-colore-scadenza: #92400e; --banner-evidenza-colore-urgente: #d9364f; /* Altezza condivisa tra colonna identità e carosello: espressa in px (non in %) perché Splide calcola l'altezza delle slide via JS e non segue in modo affidabile uno stretch percentuale del genitore. Più vicina alle dimensioni dell'hero attuale rispetto alla prima prova. */ --banner-evidenza-altezza: 300px; padding-top: 0.75rem; padding-bottom: 0.75rem; } @media (min-width: 768px) { .banner-evidenza-home { --banner-evidenza-altezza: 360px; } } @media (min-width: 1200px) { .banner-evidenza-home { --banner-evidenza-altezza: 420px; } } /* Le due colonne (identità + carosello) non stanno più dentro un ".container" Bootstrap: coprono l'intera larghezza della pagina, esattamente come fa la sezione dell'hero reale (che non ha la classe "container" sulla sezione, solo sul testo al suo interno). Qui il testo usa un padding fisso, non calcolato sul margine del container: un tentativo precedente con calc()/100vw per allinearlo esattamente al margine del sito cresceva troppo sugli schermi larghi, schiacciando testo e decorazioni. */ .banner-evidenza-home { --bev-gutter: 6px; } .banner-evidenza-home .banner-evidenza-riga { display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .banner-evidenza-home .banner-evidenza-identita-col, .banner-evidenza-home .banner-evidenza-carosello-col { flex: 0 0 100%; max-width: 100%; } @media (min-width: 768px) { .banner-evidenza-home .banner-evidenza-identita-col, .banner-evidenza-home .banner-evidenza-carosello-col { flex-basis: 50%; max-width: 50%; } } /* Colonna sinistra: identità della scuola (tipologia, nome, luogo), stesse informazioni e stesso colore dell'hero di QUESTO sito. Non è il rosso "bg-redbrown" di serie del tema padre: questo sito ha un CSS personalizzato (nel , via plugin di CSS custom) che sovrascrive .section-hero-left con un gradiente blu->bianco ("linear-gradient(to right,#0317a2 0,#fff 100%)"). Sul sito reale la parte bianca del gradiente non si vede mai (è coperta dal collage a destra); qui, con una colonna più stretta della metà pagina della sezione originale, si allunga il gradiente con background-size per mostrare solo il tratto blu, senza arrivare al bianco (che coprirebbe il testo bianco sopra). */ .banner-evidenza-home .banner-evidenza-identita { position: relative; z-index: 0; min-height: var(--banner-evidenza-altezza); height: 100%; display: flex; align-items: center; overflow: hidden; color: #ffffff; background: linear-gradient(to right, #0317a2 0%, #fff 100%); background-size: 250% 100%; background-position: left center; padding: 1.5rem; } /* Stesso motivo a pallini usato come sfondo dell'hero (stessa immagine SVG, stessa opacità). */ .banner-evidenza-home .banner-evidenza-identita:before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 65 65' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg%3E%3Cpath d='M23.646,31.575l7.702,0l0,-7.702l2.007,0l0,7.702l7.703,0l0,2.007l-7.703,0l0,7.702l-2.007,0l0,-7.702l-7.702,0l0,-2.007Z'/%3E%3Cpath d='M33.355,59.428l0,2.019l-2.007,0l0,-2.019l2.007,0Zm0,-5.095l0,2.018l-2.007,0l0,-2.018l2.007,0Zm0,-5.096l0,2.018l-2.007,0l0,-2.018l2.007,0Zm0,-5.096l0,2.018l-2.007,0l0,-2.018l2.007,0Zm12.858,-12.545l0,2.007l-2.019,0l0,-2.007l2.019,0Zm5.095,0l0,2.007l-2.018,0l0,-2.007l2.018,0Zm5.096,0l0,2.007l-2.018,0l0,-2.007l2.018,0Zm5.096,0l0,2.007l-2.018,0l0,-2.007l2.018,0Zm-55.982,0l0,2.007l-2.018,0l0,-2.007l2.018,0Zm5.096,0l0,2.007l-2.018,0l0,-2.007l2.018,0Zm5.096,0l0,2.007l-2.018,0l0,-2.007l2.018,0Zm5.096,0l0,2.007l-2.019,0l0,-2.007l2.019,0Zm12.549,-12.755l0,2.018l-2.007,0l0,-2.018l2.007,0Zm0,-5.096l0,2.018l-2.007,0l0,-2.018l2.007,0Zm0,-5.096l0,2.018l-2.007,0l0,-2.018l2.007,0Zm0,-5.096l0,2.019l-2.007,0l0,-2.019l2.007,0Z' style='fill-opacity:0.4;'/%3E%3C/g%3E%3C/svg%3E"); background-size: 65px 65px; opacity: 0.12; } /* Le due decorazioni SVG dell'hero reale (stesso file, stesso colore #f83e5a), riprodotte qui identiche — vedi banner-evidenza-decorazioni.php. Il cerchio a pallini si affaccia sul bordo destro della colonna (come nell'hero, dove sta tra il testo e le foto); l'icona a forma di atomo sta in basso a sinistra, come nell'hero. Entrambe nascoste sotto i 768px per non affollare la versione impilata e più compatta. */ .banner-evidenza-home .banner-evidenza-identita-decorazione-cerchio, .banner-evidenza-home .banner-evidenza-identita-decorazione-atomo { display: none; position: absolute; z-index: 0; opacity: 0.9; pointer-events: none; } @media (min-width: 768px) { /* Stessa dimensione dell'hero reale (312x311px, verificata nel CSS del tema padre): centrata sul bordo destro della colonna, con metà tagliata da "overflow:hidden" — come nell'hero, dove la metà destra è coperta dalle foto. */ .banner-evidenza-home .banner-evidenza-identita-decorazione-cerchio { display: block; top: 50%; right: -156px; width: 312px; height: 312px; opacity: 0.85; transform: translateY(-50%); } /* Stessa dimensione dell'hero reale (102x114px). */ .banner-evidenza-home .banner-evidenza-identita-decorazione-atomo { display: block; bottom: 0.75rem; left: 1.5rem; width: 102px; height: 114px; } } .banner-evidenza-home .banner-evidenza-identita-testo { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 0.35rem; line-height: 1.2; /* Spostato via dal bordo destro (dove sta la decorazione a cerchio), altrimenti il testo vi si appoggia sopra. Resta allineato a destra, solo più staccato dal margine. */ margin-right: 5rem; } @media (min-width: 992px) { .banner-evidenza-home .banner-evidenza-identita-testo { margin-right: 8rem; } } @media (min-width: 1200px) { .banner-evidenza-home .banner-evidenza-identita-testo { margin-right: 11rem; } } /* Valori fissi per fascia di larghezza (niente calc/container query: più prevedibili). "nowrap" impedisce che vadano a capo; se il testo reale è più lungo dell'esempio e non entra più in una riga a queste dimensioni, vanno ridotti questi font-size oppure allargata banner-evidenza-identita-col. */ .banner-evidenza-home .banner-evidenza-identita-tipologia, .banner-evidenza-home .banner-evidenza-identita-nome, .banner-evidenza-home .banner-evidenza-identita-luogo { white-space: nowrap; } /* Stesse dimensioni dell'hero reale, verificate nel CSS del tema padre: tipologia (h4) = 1.5rem sempre; nome (h1) = 2.4rem/2.5rem/3rem/3.32rem a seconda della larghezza. "Luogo" non ha un valore dedicato nel tema padre (usa la classe generica ".h3" di Bootstrap): qui si usa una via di mezzo ragionevole tra tipologia e nome. */ .banner-evidenza-home .banner-evidenza-identita-tipologia { font-weight: 500; font-size: 1.75rem; } .banner-evidenza-home .banner-evidenza-identita-nome { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.5px; } .banner-evidenza-home .banner-evidenza-identita-luogo { font-weight: 500; font-size: 1.4rem; opacity: 0.95; } @media (min-width: 992px) { .banner-evidenza-home .banner-evidenza-identita-tipologia { font-size: 2rem; } .banner-evidenza-home .banner-evidenza-identita-nome { font-size: 3.5rem; } .banner-evidenza-home .banner-evidenza-identita-luogo { font-size: 1.6rem; } } @media (min-width: 1200px) { .banner-evidenza-home .banner-evidenza-identita-tipologia { font-size: 2.2rem; } .banner-evidenza-home .banner-evidenza-identita-nome { font-size: 4rem; } .banner-evidenza-home .banner-evidenza-identita-luogo { font-size: 1.75rem; } } /* Colonna destra: il carosello usa tutto lo spazio fino al bordo destro dello schermo (solo un piccolo margine fisso, non calcolato — quello calcolato in precedenza cresceva troppo sugli schermi larghi, lasciando vuoto proprio lo spazio che doveva riempire). */ .banner-evidenza-home .banner-evidenza-carosello-col { padding: 0 var(--bev-gutter) var(--bev-gutter); /* Sfondo neutro chiaro: fa risaltare le card bianche degli avvisi e bilancia otticamente il blocco blu pieno della colonna identità. */ background-color: #f5f6f8; } @media (min-width: 768px) { .banner-evidenza-home .banner-evidenza-carosello-col { padding: 0.5rem 1.5rem 0.5rem 1rem; } } /* Card degli avvisi: prima era un blocco a tinta unita (colore di priorità a piena pagina + testo bianco). Rivista in uno stile "accento colorato" più elegante e leggibile: sfondo bianco, testo scuro, e il colore di priorità concentrato in tre punti soli — bordo sinistro, etichetta e pulsante (vedi le regole .priorita-X più sotto per come viene impostata la variabile --banner-evidenza-colore-corrente). */ .banner-evidenza-home .priorita-informazione .banner-evidenza-content { --banner-evidenza-colore-corrente: var(--banner-evidenza-colore-informazione); } .banner-evidenza-home .priorita-opportunita .banner-evidenza-content { --banner-evidenza-colore-corrente: var(--banner-evidenza-colore-opportunita); } .banner-evidenza-home .priorita-scadenza .banner-evidenza-content { --banner-evidenza-colore-corrente: var(--banner-evidenza-colore-scadenza); } .banner-evidenza-home .priorita-urgente .banner-evidenza-content { --banner-evidenza-colore-corrente: var(--banner-evidenza-colore-urgente); } .banner-evidenza-home .banner-evidenza-content { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; min-height: var(--banner-evidenza-altezza); border-radius: 0.5rem; /* Alone colorato al posto dell'ombra neutra piatta: un'ombra scura stretta per dare profondità (invariata) più un bagliore ampio e sfumato nel colore di priorità, che "illumina" la card invece di incorniciarla — più elegante di un bordo colorato su tutti i lati, e più capace di attirare l'attenzione di un'ombra grigia. color-mix evita di dover definire una seconda tinta trasparente per ciascuna delle 4 priorità (supportato da tutti i browser correnti). */ box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 16px 32px -8px color-mix(in srgb, var(--banner-evidenza-colore-corrente, var(--banner-evidenza-colore-informazione)) 40%, transparent); background-color: #ffffff; color: #1f2933; border: 1px solid rgba(15, 23, 42, 0.07); border-left: 6px solid var(--banner-evidenza-colore-corrente, var(--banner-evidenza-colore-informazione)); overflow: hidden; } .banner-evidenza-home .banner-evidenza-corpo { flex: 1 1 0%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; min-height: 4.5rem; padding: 1.5rem; /* Spazio riservato in basso per il pulsante, che non fa più parte di questo flusso: è ancorato in una posizione fissa (vedi .banner-evidenza-btn), così non si sposta più in base alla lunghezza del titolo/sottotitolo. */ padding-bottom: 4rem; } .banner-evidenza-home .banner-evidenza-etichetta { flex: 0 0 auto; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.25rem 0.75rem; border-radius: 999px; /* Sfondo: tinta leggera (14%) del colore di priorità su bianco, testo nella stessa tinta a piena saturazione: coppia leggibile su sfondo chiaro, senza dover definire due colori per priorità. */ background-color: color-mix(in srgb, var(--banner-evidenza-colore-corrente) 14%, white); color: var(--banner-evidenza-colore-corrente); white-space: nowrap; } .banner-evidenza-home .banner-evidenza-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .banner-evidenza-home .banner-evidenza-titolo, .banner-evidenza-home .banner-evidenza-sottotitolo { display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Testi delle notizie nel carosello a destra, ingranditi per essere proporzionati a una card ora molto più alta di quella originale. */ .banner-evidenza-home .banner-evidenza-titolo { font-size: 1.5rem; font-weight: 700; } .banner-evidenza-home .banner-evidenza-sottotitolo { font-size: 1.15rem; color: #4b5563; } /* Autore e data di pubblicazione (solo per gli avvisi collegati a un contenuto reale: circolare, articolo, evento...) */ .banner-evidenza-home .banner-evidenza-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.1rem; margin-top: 0.3rem; font-size: 0.9rem; color: #6b7280; } .banner-evidenza-home .banner-evidenza-meta-voce { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .banner-evidenza-home .banner-evidenza-meta-icona { flex: 0 0 auto; width: 16px; height: 16px; } /* Posizione fissa (basso a destra della card), non più dentro il flusso del testo: prima la sua posizione dipendeva da quante righe occupavano titolo/sottotitolo/meta sopra di lui, risultando "fluttuante". */ .banner-evidenza-home .banner-evidenza-btn { position: absolute; right: 1.5rem; bottom: 1.5rem; font-size: 1rem; padding: 0.4rem 1rem; /* Pulsante pieno nel colore di priorità: sulla card ora bianca è l'unico punto ad alta saturazione oltre al bordo e all'etichetta, pensato per attirare l'attenzione verso la call-to-action. */ color: #ffffff; background-color: var(--banner-evidenza-colore-corrente); border-color: var(--banner-evidenza-colore-corrente); } @media (min-width: 992px) { .banner-evidenza-home .banner-evidenza-titolo { font-size: 1.75rem; } .banner-evidenza-home .banner-evidenza-sottotitolo { font-size: 1.3rem; } .banner-evidenza-home .banner-evidenza-meta { font-size: 1rem; } } @media (min-width: 1200px) { .banner-evidenza-home .banner-evidenza-titolo { font-size: 2rem; } .banner-evidenza-home .banner-evidenza-sottotitolo { font-size: 1.4rem; } } .banner-evidenza-home .banner-evidenza-btn:hover, .banner-evidenza-home .banner-evidenza-btn:focus { color: #ffffff; /* color-mix scurisce leggermente il colore di priorità per l'hover, senza dover definire una seconda tinta "scura" per ciascuna delle 4 priorità. Supportato da tutti i browser correnti (Chrome/Edge 111+, Firefox 113+, Safari 16.4+). */ background-color: color-mix(in srgb, var(--banner-evidenza-colore-corrente) 85%, black); border-color: color-mix(in srgb, var(--banner-evidenza-colore-corrente) 85%, black); } /* Legenda colori, in orizzontale sotto il carosello */ .banner-evidenza-home .banner-evidenza-legenda { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 1.5rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; } .banner-evidenza-home .banner-evidenza-legenda-voce { display: flex; align-items: center; gap: 0.4rem; } .banner-evidenza-home .banner-evidenza-legenda-pallino { display: inline-block; flex: 0 0 auto; width: 0.7rem; height: 0.7rem; border-radius: 50%; } .banner-evidenza-home .banner-evidenza-legenda-pallino.priorita-informazione { background-color: var(--banner-evidenza-colore-informazione); } .banner-evidenza-home .banner-evidenza-legenda-pallino.priorita-opportunita { background-color: var(--banner-evidenza-colore-opportunita); } .banner-evidenza-home .banner-evidenza-legenda-pallino.priorita-scadenza { background-color: var(--banner-evidenza-colore-scadenza); } .banner-evidenza-home .banner-evidenza-legenda-pallino.priorita-urgente { background-color: var(--banner-evidenza-colore-urgente); } /* Frecce e pallini spostati sotto il carosello, in un'unica riga: frecce agli estremi, pallini al centro — invece della posizione di default di Splide (frecce sovrapposte ai lati della slide, pallini in basso sopra l'immagine). Tecnica: ".splide__arrows" e ".splide__pagination" condividono la stessa area della griglia ("controls"), ciascuno con il proprio allineamento interno (le frecce ai bordi via flex space-between, i pallini centrati via margin:auto), così appaiono nella stessa riga senza che i due elementi (generati separatamente da Splide) debbano conoscersi a vicenda. */ .banner-evidenza-home .banner-evidenza-splide { display: grid; grid-template-areas: "track" "controls"; row-gap: 0.6rem; } .banner-evidenza-home .banner-evidenza-splide .splide__track { grid-area: track; } .banner-evidenza-home .banner-evidenza-splide .splide__arrows, .banner-evidenza-home .banner-evidenza-splide .splide__pagination { grid-area: controls; position: static; } .banner-evidenza-home .banner-evidenza-splide .splide__arrows { display: flex; justify-content: space-between; align-items: center; width: 100%; pointer-events: none; } .banner-evidenza-home .splide__arrow { position: static; transform: none; background: rgba(255, 255, 255, 0.85); opacity: 1; pointer-events: auto; } .banner-evidenza-home .splide__arrow svg { fill: #1a1a1a; } .banner-evidenza-home .banner-evidenza-splide .splide__pagination { justify-self: center; margin: 0 auto; padding: 0; } /* Colore di riserva del pallino attivo (usato solo se, per qualche motivo, non risultasse applicata la regola dedicata generata dinamicamente dal PHP per ciascun avviso — vedi lo