/* GENERALE */
html{
scroll-padding-top: 70px;
}
body{
font-family: 'Titillium Web';
/*color: #101D35;*/
overflow-x: hidden;
font-weight: 300;
color: #455b71;
}
h1, .h2, .h3, .h4, h1, h2, h3, h4{
/*color:#17324d;*/
font-weight: 600;
}
h1 a, h2 a, h3 a, h4 a{
color:#455b71;
}
@media (min-width: 576px){
html, body {
font-size: 17px;
line-height: 1.555;
}
h1, .h1 {
font-size: 2rem;
letter-spacing: -1.2px;
line-height: 1.25;
}
h4, .h4{
font-size: 1.35rem;
line-height: 1.428;
font-weight: 600;
}
}
a{
text-decoration: none;
color: #455b71;
}
a:hover{
text-decoration: underline;
color:#004080;
}
.wrapperbreadcrumbs{
/*border-bottom: 1px solid #DEDEDE;*/
}
.breadcrumb{
margin-bottom: 0;
}
.breadcrumb-item a{
font-weight: 600;
}
.lh100{
line-height: 100%;
}
.text-underline{
text-decoration: underline;
}
.text-right{
text-align: right;
}
/* TOPBAR */
.link-list-wrapper ul li a span{
color: #455b71;
}
.link-list-wrapper ul li a:hover span{
color: #004080!important;
}
@media(max-width:991px){
.container {
max-width: 100%;
}
}
/* TESTATA */
.it-nav-wrapper{
color: #455b71;
box-shadow: 0 0.1rem 1.55rem rgba(0,0,0,.1);
}
.it-header-center-wrapper{
background:#fff!important;
}
@media(min-width:992px){
.it-header-navbar-wrapper {
background:#fff!important;
border-top: 1px solid #e7eaed;
}
.mod-finder_nolightbox, .mod-finder_nolightbox .awesomplete{
flex: 1 0 0%;
}
.bs-it-sticky-wrapper .mod-finder_nolightbox{
flex: unset;
}
}
.it-header-slim-wrapper{
background:#003183;
}
.it-header-center-wrapper .it-header-center-content-wrapper .it-right-zone .it-socials ul .icon,
.it-header-center-wrapper .it-header-center-content-wrapper .it-search-wrapper a.rounded-icon svg{
fill: #455b71;
}
.it-header-center-wrapper .it-header-center-content-wrapper .it-right-zone,
.it-header-center-wrapper .it-header-center-content-wrapper .it-brand-wrapper a{
color: #17324d;
}
.it-header-center-wrapper .it-header-center-content-wrapper .it-search-wrapper a.rounded-icon {
background: #f2f2f2;
}
.it-header-center-wrapper .it-header-center-content-wrapper .it-right-zone .it-socials ul li a:hover{
fill: #455b71;
color:#455b71;;
}
.awesomplete{
display: contents!important;
}
.mod-finder__search{
position: relative;
}
button.btn.btn-nobg{
background: transparent;
border: 0;
box-shadow: none;
}
.search_button{
position: absolute;
top: 13px;
left: 0;
}
.search_button button .icon{
height: 35px;
width: 35px;
}
input.js-finder-search-query.form-control{
padding: 30px 50px!important;
font-size: 34px;
color: #19314d;
}
input[type=text].js-finder-search-query.form-control{
border-color: #d1d6db;
}
input.js-finder-search-query.form-control::placeholder{
font-size: 34px;
font-weight: 300;
}
ul.menucerca li{
list-style: none;
}
.custom-control-submit, .custom-control-submit:focus, .custom-control-submit:hover{
padding: 7px 20px 7px 20px;
border: 2px solid #0066cc;
color: #0066cc;
border-radius: 4px;
line-height: 1;
font-weight: 600;
cursor: pointer;
background-color: transparent;
margin: 0 10px 10px 0;
}
#searchmodal.modal-title{
font-size: 3.5rem;
font-weight: 600;
}
.awesomplete > ul, .awesomplete > ul[hidden], .awesomplete > ul:empty{
top:70px!important;
}
/*SLIDE BANNER HOME*/
.section-hero-left {
background: #d1344c;
background: -moz-linear-gradient(left, #d1344c 0%, #ab2b3e 100%);
background: -webkit-linear-gradient(left, #d1344c 0%, #ab2b3e 100%);
background: linear-gradient(to right, #d1344c 0%, #ab2b3e 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1344c', endColorstr='#ab2b3e', GradientType=1);
color: #ffffff;
position: relative;
z-index: 0;
min-height: 480px;
display: flex;
align-items: center;
}
.section-hero-left .hero-img {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-color: #455b71;
background-size: cover;
background-attachment: scroll;
}
.section-hero-left .item-banner{
height: 480px;
position: relative;
}
.section-hero-left .item-banner::before {
content: "";
background-image: url(../images/bgplus.svg);
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 65px 65px;
opacity: 0.12;
}
.section-hero-left .decoration-01 {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
width: 312px;
height: 311px;
display: block;
margin: -156px 0 0 -156px;
}
.section-hero-left .decoration-01::before {
content: "";
background-image: url(../images/circle.svg);
width: 312px;
height: 311px;
display: block;
position: relative;
}
.section-hero-left .decoration-02 {
position: absolute;
z-index: 0;
bottom: 50px;
left: 50px;
width: 102px;
height: 114px;
display: block;
}
.section-hero-left .decoration-02::before {
content: "";
background-image: url(../images/scienza.svg);
width: 102px;
height: 114px;
display: block;
}
.text-bannerhome{
position: relative;
z-index: 2;
}
@media(max-width:991px){
.item-banner h1{
font-size: calc(1.375rem + 1.5vw);
}
.item-banner h2.h3{
font-size: calc(1.3rem + 0.6vw);
}
.item-banner .h4{
font-size: 1rem;
}
.section-hero-left .decoration-01 {
right:0;
margin: -156px 0 0 -156px;
background-repeat: no-repeat;
}
.section-hero-left .decoration-02 {
display: none;
}
}
.footersito{
background: #003183;
color: #fff;
position: relative;
padding-top: 60px;
}
.footersito img{
max-width: 100%;
height: auto;
}
.footersito p{
font-size: .8rem;
line-height: 1.4rem;
}
.footersito a{
color: #fff;
}
.footersito a:hover{
text-decoration: underline!important;
}
.footersito .area-legale .navbar-nav.navbar-secondary{
flex-direction: row;
flex-wrap: wrap;
font-weight: 500;
list-style: none;
padding: 0;
row-gap: 10px;
column-gap: 30px;
}
.footersito .area-legale .navbar-nav.navbar-secondary li.nav-item a.nav-link{
font-size: .92rem;
text-decoration: underline;
padding: 0;
}
.footersito .area-legale .navbar-nav.navbar-secondary li.nav-item a.nav-link:hover{
text-decoration: unset!important;
}
.footer-credits a{
text-decoration: underline;
font-size: .9rem;
font-weight: 100;
color:#ffffffe2;
}
.footer-credits a:hover{
text-decoration: unset!important;
}
.copyright{
border-top: 1px solid #fff3;
border-bottom: 1px solid #fff3;
font-weight: 300;
color:#ffffffe2;
}
.copyright a{
color:#ffffffe2;
}
.copyright p{
font-size: .85rem;
line-height: 1.2rem;
margin-bottom: 0;
}
.footersito h3, .footersito h4, .footersito h5, .footersito h6, .footersito .moduletable p{
padding-bottom: 0px;
margin-right: 50px;
margin-bottom: 10px;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: normal;
}
.footersito .footermenu li.nav-item a.nav-link {
padding: 3px 0;
font-size: .88rem;
font-weight: 300;
color:#ffffffe2;
}
.footersito li.nav-item:first-child a.nav-link {
padding-top: 0!important;
}
.logos-wrapper {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
.logos-wrapper .logo-footer h1, .logos-wrapper .logo-footer .h1 {
display: block;
font-weight: 400;
font-size: 1.1rem;
line-height: 1.29;
letter-spacing: 0;
margin: 0 0 0 25px;
color: #ffffff;
}
.logos-wrapper .logo-footer h1 span, .logos-wrapper .logo-footer .h1 span {
display: block;
}
.logos-wrapper .logo-footer img {
width: 64px;
height: 72px;
display: block;
}
@media(min-width:992px){
img.ue-logo {
height: 80px;
}
.logos-wrapper {
align-items: center;
gap: 30px;
}
}
img.ue-logo {
max-width: 60%;
}
.logos-wrapper .logo-footer {
display: flex;
align-items: center;
}
@media(max-width:991px){
.footersito h3, .footersito h4, .footersito h5, .footersito h6{
margin: 0 0 20px 0;
}
}
a.leggimore{
color: #455b71;
font-weight: 600;
font-size: .75rem;
}
a.leggimore{
fill: #455b71;
-webkit-text-fill-color: #455b71;
}
a.leggimore svg{
margin-top: -3px;
}
.font-weight-normal{
font-weight: 300;
}
.hero-title .h1, .hero-title h1 {
font-size: 2.8rem;
font-weight: 400;
letter-spacing: -1px;
color: #455b71;
line-height: 1.17;
}
.card.card-bg:after {
margin:0;
}
.card.card-bg{
margin-left: 0;
margin-right: 0;
}
.bg-petrol {
background-color: #51758d!important
}
a.bg-petrol:focus,a.bg-petrol:hover,button.bg-petrol:focus,button.bg-petrol:hover {
background-color: #3e5a6d!important
}
.bg-redbrown {
background-color: #d1344c!important
}
.bg-gray-light {
background-color: #f5f5f5;
}
a.bg-redbrown:focus,a.bg-redbrown:hover,button.bg-redbrown:focus,button.bg-redbrown:hover {
background-color: #ab273b!important
}
.bg-purplelight {
background-color: #b21dd0!important
}
.bg-bluelectricdark{
background-color: #0b00d9!important;
}
.card.purplelight {
background-color: #fbeaff;
box-shadow: none;
font-size: .85rem;
}
.card.purplelight::after {
margin:0;
padding-bottom: 24px;
}
.card.in-evidence {
background-color: #0E865C;
color: #ffffff;
font-size: 1.13rem;
}
.card.in-evidence a{
color: #fff;
}
.card.card-simple:before {
content: "";
width: 3px;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
background-color: #51758d;
}
.bluelectric .card.card-simple:before {
background-color: #0d00ff!important;
}
a.bg-purplelight:focus,a.bg-purplelight:hover,button.bg-purplelight:focus,button.bg-purplelight:hover {
background-color: #8c17a3!important;
}
.bg-greendark {
background-color: #0e865c!important;
}
a.bg-greendark:focus,a.bg-greendark:hover,button.bg-greendark:focus,button.bg-greendark:hover {
background-color: #095c3f!important;
}
.bg-bluelectric {
background-color: #0d00ff!important;
color: #ffffff;
}
a.bg-bluelectric:focus,a.bg-bluelectric:hover,button.bg-bluelectric:focus,button.bg-bluelectric:hover {
background-color: #0a00cc!important;
}
.bg-blue-dark {
background-color: #001a33;
color: #ffffff;
}
.btn-purplelight {
color: #fff;
background-color: #b21dd0;
border-color: #b21dd0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
.btn-purplelight:hover {
color: #fff;
background-color: #9518ae;
border-color: #8c17a3;
}
.btn-redbrown {
color: white;
background-color: #D1344C;
border-color: #D1344C;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}
.btn-redbrown:hover, .btn-redbrown:active{
color: white!important;
background-color: #b6293f!important;
border-color: #ab273b!important;
}
.text-white a{
color: #fff;
}
.modal.fade.show{
background-color: #000;
}
.modal.modal-actions .modal-dialog {
max-width: 278px;
}
.modal.modal-actions .modal-dialog .modal-content .link-list-wrapper ul li a .icon {
width: 18px;
height: 18px;
margin: 0 0 0 0;
position: absolute;
z-index: 1;
left: 0px;
top: 10px;
fill: #51758d;
}
.modal.modal-actions .modal-dialog .modal-content .link-list-wrapper ul li a .icon.icon-right {
left: unset;
right: 20px;
width: 24px;
height: 24px;
top: 5px;
}
.modal.modal-actions .modal-dialog .modal-content .link-list-wrapper ul li a {
position: relative;
z-index: 0;
padding-left: 30px;
color: #17324d;
line-height: 2.4;
}
@media print{
.no-print, .no-print * {
display: none !important;
}
}
.purple-oval-forms {
width: 578px;
height: 359px;
position: absolute;
z-index: 0;
top: 0;
right: 40px
}
.purple-oval-forms svg {
width: 578px;
height: 359px
}
.people-red-forms {
width: 364px;
height: 245px;
position: absolute;
z-index: 0;
top: 0;
right: 100px;
}
.people-red-forms svg {
width: 364px;
height: 245px;
}
.green-square-forms {
width: 726px;
height: 360px;
position: absolute;
z-index: 0;
top: 0;
right: 0
}
.green-square-forms svg {
width: 726px;
height: 360px
}
.people-red-forms {
width: 364px;
height: 245px;
position: absolute;
z-index: 0;
top: 0;
right: 100px
}
/* PAGE HEADER */
.section.bg-purplelight {
color: #fff
}
.section.bg-purplelight .h1,.section.bg-purplelight .h2,.section.bg-purplelight .h3,.section.bg-purplelight h1,.section.bg-purplelight h2,.section.bg-purplelight h3,.section.bg-purplelight p {
color: #fff
}
.section.bg-purplegradient {
color: #fff;
background: #b21dd0;
background: -moz-linear-gradient(left,#b21dd0 0,#590e61 100%);
background: -webkit-linear-gradient(left,#b21dd0 0,#590e61 100%);
background: linear-gradient(to right,#b21dd0 0,#590e61 100%)
}
.section.bg-purplegradient .h1,.section.bg-purplegradient .h2,.section.bg-purplegradient .h3,.section.bg-purplegradient h1,.section.bg-purplegradient h2,.section.bg-purplegradient h3,.section.bg-purplegradient p {
color: #fff
}
.section.bg-greendarkgradient {
color: #fff;
background: #0f842e;
background: -moz-linear-gradient(left,#0f842e 0,#5cc984 100%);
background: -webkit-linear-gradient(left,#0f842e 0,#5cc984 100%);
background: linear-gradient(to right,#0f842e 0,#5cc984 100%)
}
.bg-red-gradient {
background: #ab2b3e;
background: -moz-linear-gradient(left, #ab2b3e 0%, #f83e5a 100%);
background: -webkit-linear-gradient(left, #ab2b3e 0%, #f83e5a 100%);
background: linear-gradient(to right, #ab2b3e 0%, #f83e5a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ab2b3e', endColorstr='#f83e5a', GradientType=1);
color: #ffffff;
}
.section.bg-greendarkgradient .h1,.section.bg-greendarkgradient .h2,.section.bg-greendarkgradient .h3,.section.bg-greendarkgradient h1,.section.bg-greendarkgradient h2,.section.bg-greendarkgradient h3,.section.bg-greendarkgradient p,
.section.bg-red-gradient .h1,.section.bg-red-gradient .h2,.section.bg-red-gradient .h3,.section.bg-red-gradient h1,.section.bg-red-gradient h2,.section.bg-red-gradient h3,.section.bg-red-gradient p,
.section.bg-bluelectricgradient .h1,.section.bg-bluelectricgradient .h2,.section.bg-bluelectricgradient .h3,.section.bg-bluelectricgradient h1,.section.bg-bluelectricgradient h2,.section.bg-bluelectricgradient h3,.section.bg-bluelectricgradient p {
color: #fff;
}
.pt84{
padding-top: 84px;
}
.bg-white-left:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
background-color: #ffffff;
--widthA: calc(100vw - 1200px);
--widthB: calc(-100vw + 1200px);
width: calc(var(--widthA) / 2);
left: calc(var(--widthB) / 2);
height: 100%;
}
.bg-white-left {
position: relative;
z-index: 0;
}
.aside-list {
padding: 40px 0 40px 0;
}
.aside-list ul {
list-style: none;
padding: 0;
}
.aside-list ul li {
margin: 0 0 7px 0;
list-style: none;
}
.aside-title {
position: relative;
z-index: 0;
}
.aside-title:before {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: #e7eaed;
}
.aside-title:after {
content: "";
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 37px;
height: 4px;
background: #455b71;
}
.aside-main .toggle-link-list {
display: block;
padding: 15px 30px 19px 0;
color: #17324d;
font-size: .88rem;
font-weight: 600;
position: relative;
z-index: 0;
}
.aside-main .link-list-wrapper {
padding: 20px 0 0 0;
}
@media(max-width:991px){
.aside-main .link-list-wrapper {
padding: 20px 30px;
}
}
.aside-main .link-list-wrapper ul li a {
font-size: .97rem;
}
.pagina-servizio .link-list-wrapper ul li a {
font-size: .889em;
line-height: 2.3em;
display: block;
padding: 0 24px!important;
position: relative;
text-decoration: none;
}
.aside-main .toggle-link-list .icon-toggle {
position: absolute;
z-index: 1;
right: 20px;
fill: #455b71;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.aside-main .toggle-link-list.collapsed .icon-toggle {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.purplelight.aside-title:after {
background: #b21dd0;
}
.purplelight.aside-main .link-list-wrapper ul.link-list li a {
color: #b21dd0;
}
.purplelight.aside-main .link-list-wrapper ul.link-list li a:hover {
text-decoration: underline;
}
.purplelight.aside-main .toggle-link-list .icon-toggle {
fill: #B21DD0;
}
.purplelight .aside-title:after {
background: #b21dd0;
}
.purplelight .actions-wrapper .toggle-actions {
color: #b21dd0;
}
.purplelight .card.card-icon svg {
fill: #B21DD0;
}
.bluelectric .card.card-icon svg {
fill: #0D00FF !important;
}
.bluelectric .aside-title:after {
background: #0D00FF;
}
/*redbrown*/
.redbrown.aside-title:after {
background: #ab273b;
}
.redbrown.aside-main .link-list-wrapper ul.link-list li a {
color: #ab273b;
}
.redbrown.aside-main .link-list-wrapper ul.link-list li a:hover {
text-decoration: underline;
}
.redbrown.aside-main .toggle-link-list .icon-toggle {
fill: #ab273b;
}
.redbrown .aside-title:after {
background: #ab273b;
}
.redbrown .actions-wrapper .toggle-actions {
color: #ab273b;
}
.redbrown .card.card-icon svg {
fill: #ab273b;
}
.greendark.aside-title:after {
background: #0E865C;
}
.greendark.aside-main .link-list-wrapper ul.link-list li a {
color: #0E865C;
}
.bluelectric.aside-main .link-list-wrapper ul.link-list li a {
color: #0d00ff;
}
.bluelectric .actions-wrapper .toggle-actions {
color: #0d00ff;
}
.greendark.aside-main .toggle-link-list .icon-toggle {
fill: #0E865C;
}
.greendark .aside-title:after {
background: #0E865C;
}
.greendark .actions-wrapper .toggle-actions {
color: #0E865C;
}
.greendark .card.card-icon svg {
fill: #0E865C;
}
.btn-outline-purplelight {
color: #B21DD0;
background-color: transparent;
background-image: none;
box-shadow: inset 0 0 0 1px #B21DD0;
}
.text-large {
font-size: 1.8rem;
font-weight: 400;
line-height: 1.2;
}
.section.bg-purplegradient {
color: #ffffff;
background: #b21dd0;
background: -moz-linear-gradient(left, #b21dd0 0%, #590e61 100%);
background: -webkit-linear-gradient(left, #b21dd0 0%, #590e61 100%);
background: linear-gradient(to right, #b21dd0 0%, #590e61 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b21dd0', endColorstr='#590e61', GradientType=1);
}
.redbrown .card.card-bg.bg-color {
background-color: #ffebee;
}
.card.card-bg.bg-color {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.bg-linear-vertical-blue-light {
position: relative;
z-index: 0;
}
.slided-top {
position: relative;
z-index: 1;
margin-top: -50px;
}
.bg-linear-vertical-blue-light:before {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #7a73ff;
background: -moz-linear-gradient(top, #7a73ff 0%, #50e3c2 100%);
background: -webkit-linear-gradient(top, #7a73ff 0%, #50e3c2 100%);
background: linear-gradient(to bottom, #7a73ff 0%, #50e3c2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a73ff', endColorstr='#50e3c2', GradientType=0);
content: "";
display: block;
opacity: 0.15;
}
.text-greendark{
color:#0E865C !important;
font-size: .88rem;
}
/*badge*/
.badge-outline{
background: #fff!important;
border: 1px solid #455b71;
color: #455b71;
margin: 0 7px 12px 0;
padding: 4px 15px!important;
}
a.badge.badge-outline:hover{
color: #455b71;
text-decoration: underline;
}
.purplelight .badge-outline{
border: 1px solid #B21DD0;
color: #B21DD0;
}
.purplelight .badge-outline:hover{
color: #B21DD0!important;
}
.redbrown .badge-outline{
border: 1px solid #ab273b;
color: #ab273b;
}
.redbrown .badge-outline:hover{
color: #ab273b!important;
}
.greenlight .badge-outline{
border: 1px solid #0E865C;
color: #0E865C;
}
.greenlight .badge-outline:hover{
color: #0E865C!important;
}
.bluelectric .badge-outline{
border: 1px solid #0D00FF;
color: #0D00FF;
}
.bluelectric .badge-outline:hover{
color:#0D00FF!important;
}
.carousel-theme .owl-dots .owl-dot span {
width: 18px!important;
height: 18px!important;
margin: 0px 5px 0px 5px;
background: transparent;
border: 2px solid #51758d;
display: block;
-webkit-backface-visibility: visible;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
opacity: 0.5;
}
a.view-all{
font-size: .88rem;
text-decoration: underline;
}
.card-servizio ul{
margin-bottom: 0;
}
@media(max-width:992px){
.aside-main .toggle-link-list {
padding-left: 20px;
}
.article-wrapper {
padding-left: 15px;
padding-right: 15px;
}
.tipologia-menu{
position: fixed;
z-index: 10000;
top: 0;
right: -350px;
max-width: 350px;
height: 100%;
-webkit-transition: all 0.20s ease-out;
-moz-transition: all 0.20s ease-out;
-ms-transition: all 0.20s ease-out;
-o-transition: all 0.20s ease-out;
transition: all 0.20s ease-out;
}
.tipologia-menu.attivomenu{
right: 0;
-webkit-transition: all 0.20s ease-out;
-moz-transition: all 0.20s ease-out;
-ms-transition: all 0.20s ease-out;
-o-transition: all 0.20s ease-out;
transition: all 0.20s ease-out;
}
.aside-list ul li {
margin: 0 0 0 0;
border-bottom: 1px solid #d1d6db;
padding: 14px 0 14px 0;
}
}
.title-img {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-color: #455b71;
background-size: cover;
background-attachment: scroll;
}
.section-hero {
position: relative;
z-index: 0;
display: flex;
align-items: center;
}
.hero-title small {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 25px 0;
display: block;
}
.hero-title h1, .hero-title .h1 {
font-size: 2.5rem;
margin: 0 0 35px 0;
font-weight: 300;
letter-spacing: -1.8px;
color: #455b71;
padding: 0 20px 0 20px;
line-height: 1.17;
}
#mappaluogo{
height: 300px;
}
.it-carousel-wrapper .splide__arrows {
position: absolute;
top: 50%;
left: -8px;
right: -8px;
display: flex;
z-index: 1;
justify-content: space-between;
pointer-events: none;
}
.it-carousel-wrapper .splide__arrows .splide__arrow[disabled] {
background: unset;
}
.it-carousel-wrapper .splide__arrows .splide__arrow[disabled] {
background: unset;
opacity: 0.3;
}
.it-carousel-wrapper .splide__arrows .splide__arrow[disabled] {
background: #d8d9da;
}
.it-carousel-wrapper .splide__arrows .splide__arrow.splide__arrow--prev {
transform: rotate(180deg);
}
.it-carousel-wrapper .splide__arrows .splide__arrow {
width: 40px;
height: 40px;
background: unset;
border-radius: 50px;
border: 1px solid #D1344C;
display: flex;
align-items: center;
justify-content: center;
pointer-events: all;
}
.it-carousel-wrapper .splide__arrows .splide__arrow svg {
fill: #D1344C;
}
.it-carousel-wrapper .splide__arrows .splide__arrow svg {
width: 16px;
height: 16px;
}
@media(min-width:992px){
.section-hero {
min-height: 480px;
}
}
@media (max-width: 767.98px){
.section-hero .title-img {
position: relative;
z-index: 0;
right: auto;
width: 100%;
height: 380px;
margin-bottom: 20px;
}
.section-hero {
padding: 0!important;
}
}
/* LOGIN */
.control-group.com-users-login__input,
.com-users-reset .control-group,
.com-users-reset-confirm .control-group,
.com-users-reset-complete .control-group,
.com-users-remind .control-group,
.com-users-registration .control-group,
.com-users-profile__edit .control-group{
position: relative;
}
.control-group.com-users-login__input .controls,
.com-users-reset-confirm .control-group,
.com-users-reset-complete .control-group,
.com-users-remind .control-group,
.com-users-registration .control-group,
.com-users-profile__edit .control-group{
padding-bottom: 25px;
}
.control-group.com-users-login__input .control-label,
.com-users-login__remember .form-check [type=checkbox]+label,
.com-users-login__remember .form-check [type=radio]+label,
.com-users-reset .control-group .control-label,
.com-users-reset-confirm .control-group .control-label,
.com-users-reset-complete .control-group .control-label,
.com-users-remind .control-group .control-label,
.com-users-registration .control-group .control-label,
.com-users-profile__edit .control-group .control-label{
font-size: .777rem;
padding-bottom: 5px;
font-weight: 600;
}
.text-login-reset,
.com-users-reset-complete .password-group{
font-size: .777rem;
}
.text-login-reset a{
font-weight: 600;
}
.com-users-login__remember .form-check [type=checkbox]+label, .com-users-login__remember .form-check [type=radio]+label{
font-weight: 300;
}
.form-control-feedback{
position: absolute;
bottom: 1px;
left: 0;
font-weight:300;
color: #d1344c;
}
.com-users-login,
.com-users-reset,
.com-users-reset-confirm,
.com-users-reset-complete,
.com-users-remind,
.com-users-registration,
.com-users-registration-complete,
.com-users-profile,
.com-users-profile__edit {
max-width: 480px;
margin: 0 auto;
}
.btn.btn-secondary.input-password-toggle{
background: transparent;
box-shadow: none;
border-radius: 0;
border-bottom: 1px solid #000;
}
.btn.btn-secondary.input-password-toggle .icon-eye, .btn.btn-secondary.input-password-toggle .icon-eye-slash{
width: 16px;
height: 14px;
display: block;
}
.btn.btn-secondary.input-password-toggle .icon-eye-slash{
background: url(../images/icon-eye-barrato.svg) no-repeat;
}
.btn.btn-secondary.input-password-toggle .icon-eye{
background: url(../images/icon-eye.svg) no-repeat;
}
.com-users-reset fieldset legend,
.com-users-reset-confirm fieldset legend,
.com-users-reset-complete fieldset legend,
.com-users-remind fieldset legend,
.com-users-registration fieldset legend{
text-overflow: unset;
white-space: unset;
line-height: 1.2rem;
font-weight: 500;
padding: 0 0 0.75rem 0;
}
.com-users-profile fieldset legend,
.com-users-profile__edit fieldset legend{
font-size: 1.4rem;
padding: 0;
border-bottom: 1px solid #e7eaed;
width: 100%;
margin-bottom: 10px;
}
.com-users-reset .form-control-feedback {
bottom: -30px;
}
@media (min-width: 576px){
.com-users-reset-complete small, .small {
font-size: .777rem;
}
}
.controls select {
border: none;
border-bottom: 1px solid #5b6f82;
border-radius: 0;
padding: 0.375rem 0.5rem;
outline: 0;
height: 2.5rem;
width: 100%;
box-shadow: none;
transition: .2s ease-out;
font-weight: 700;
color: #1a1a1a;
background-color: #fff;
}
.com-users-methods-list-method.card::after{
margin-top: 0;
margin-left: 0;
}
.com-content-category__table th{
font-size: 1rem;
font-weight: 600;
padding: 1rem .8rem!important;
}
.com-content-category__table th a{
color:#06c;
}
.com-content-category__table thead th a{
color: #455b71;
}
.com-content-category.category-list{
padding: 0 18px;
}
/* MIG-2026-001 WP-6.3 — spaziatura schede video */
.video-card {
margin-top: 1rem;
margin-bottom: 1rem !important;
}
@media (max-width: 767.98px) {
.video-card {
margin-top: 0.75rem;
margin-bottom: 1rem !important;
}
}
/* MIG-2026-001 - hero desktop proporzionale con limite massimo */
@media (min-width: 1200px) {
.section-hero {
min-height: min(31.25vw, 600px);
}
}
/* MIG-2026-001 - hero articolo: punto focale progressivo su desktop largo */
@media (min-width: 1600px) {
.section-hero .title-img {
background-position: center 58%;
}
}
@media (min-width: 1900px) {
.section-hero .title-img {
background-position: center 64%;
}
}
@media (min-width: 2200px) {
.section-hero .title-img {
background-position: center 70%;
}
}
/* =========================================================
ALLEGATI ARTICOLO - CARD DOCUMENTI
MIG-2026-001
========================================================= */
.article-attachments {
margin-top: 2rem;
}
.article-attachments__list {
list-style: none;
padding: 0;
margin: 1rem 0 0;
}
.article-attachments__list li {
position: relative;
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
column-gap: 1rem;
align-items: start;
width: 100%;
max-width: none;
box-sizing: border-box;
margin: 0 0 1rem;
padding: 1rem 1.25rem;
background: #fff;
border: 1px solid rgba(0, 0, 0, .06);
box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}
/* Icona documento/PDF */
.article-attachments__list li::before {
content: "";
display: block;
width: 24px;
height: 30px;
margin-top: .1rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30' fill='none' stroke='%23d9364f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.5h8l4.5 4.5v21A1.5 1.5 0 0 1 17 28.5H6A1.5 1.5 0 0 1 4.5 27V3A1.5 1.5 0 0 1 6 1.5Z'/%3E%3Cpath d='M14 1.5V6h4.5'/%3E%3Cpath d='M8 18h8M8 22h6M8 14h5'/%3E%3C/svg%3E");
}
/* Link documento */
.article-attachments__list li > a {
grid-column: 2;
color: #0666cc;
font-weight: 600;
line-height: 1.4;
text-decoration: underline;
text-decoration-thickness: .08em;
text-underline-offset: .16em;
overflow-wrap: anywhere;
transition:
color .15s ease-in-out,
text-decoration-thickness .15s ease-in-out;
}
/* Link visitato */
.article-attachments__list li > a:visited {
color: #4b4fa3;
}
/* Mouse */
.article-attachments__list li > a:hover {
color: #003d80;
text-decoration-thickness: .14em;
}
/* Tastiera */
.article-attachments__list li > a:focus-visible {
color: #003d80;
outline: 3px solid #ffbf47;
outline-offset: 4px;
border-radius: 2px;
}
/* Informazioni tipo/dimensione */
.article-attachments__list .file-info {
grid-column: 2;
display: block;
margin-top: .25rem;
color: #455b71;
font-size: .92rem;
line-height: 1.35;
}
/* Migliore resa su schermi piccoli */
@media (max-width: 575.98px) {
.article-attachments__list li {
grid-template-columns: 24px minmax(0, 1fr);
column-gap: .75rem;
padding: .9rem 1rem;
}
.article-attachments__list li::before {
width: 21px;
height: 27px;
}
}
/* =========================================================
LE PERSONE - CARD DIRIGENTE SCOLASTICO
MIG-2026-001
========================================================= */
.dirigente-card {
overflow: hidden;
border-top: 3px solid #c62f4b;
}
.dirigente-card .dirigente-card-inner {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
min-height: 190px;
}
.dirigente-card .dirigente-card-image {
display: block;
min-height: 190px;
background: #f2f4f7;
overflow: hidden;
}
.dirigente-card .dirigente-card-image img {
display: block;
width: 100%;
height: 100%;
min-height: 190px;
object-fit: cover;
}
.dirigente-card .dirigente-card-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem 1.75rem;
}
.dirigente-card .dirigente-card-role {
color: #5c6f82;
font-size: .95rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .02em;
}
.dirigente-card h3 {
line-height: 1.25;
}
.dirigente-card h3 a {
color: #17324d;
text-decoration: none;
}
.dirigente-card h3 a:hover,
.dirigente-card h3 a:focus {
text-decoration: underline;
}
.dirigente-card .dirigente-card-link {
align-self: flex-start;
margin-top: auto;
color: #0666cc;
font-weight: 600;
text-decoration: underline;
text-underline-offset: .16em;
}
.dirigente-card .dirigente-card-link:hover {
color: #003d80;
}
.dirigente-card .dirigente-card-link:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 4px;
}
@media (max-width: 767.98px) {
.dirigente-card .dirigente-card-inner {
grid-template-columns: 1fr;
}
.dirigente-card .dirigente-card-image {
min-height: 0;
aspect-ratio: 16 / 9;
}
.dirigente-card .dirigente-card-image img {
min-height: 0;
height: 100%;
}
.dirigente-card .dirigente-card-content {
padding: 1.25rem;
}
}
/* ==========================================================
MIG-2026-001 - LINK INTERNO DA CONSULTARE
Standard sito:
- collegamento interno nella stessa scheda
- icona catenella decorativa
- blu + grassetto
- utilizzabile in testo, elenchi e card
========================================================== */
.cnet-internal-link {
color: #06c;
font-weight: 700;
text-decoration: none;
}
.cnet-internal-link:hover,
.cnet-internal-link:focus {
color: #06c;
text-decoration: underline;
}
.cnet-internal-link:focus-visible {
outline: 3px solid rgba(0, 102, 204, .35);
outline-offset: 3px;
border-radius: 2px;
}
.cnet-internal-link__icon {
display: inline-block;
margin-right: .4em;
font-size: .9em;
line-height: 1;
}
/* MIG-2026-001 - Organizzazione foglia: hero compatto solo smartphone */
@media (max-width: 575.98px) {
.organizzazione-foglia-hero {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.organizzazione-foglia-hero .title-img {
margin-top: -1.25rem;
margin-bottom: -1.25rem;
}
}
/* ==========================================================
MIG-2026-001 - Organizzazione foglia
Hero compatto SOLO smartphone
========================================================== */
@media (max-width: 575.98px) {
.organizzazione-foglia-hero .row {
--bs-gutter-y: 0;
}
.organizzazione-foglia-hero .col-12.col-md-6.py-4.py-lg-5 {
padding-top: .75rem !important;
padding-bottom: 0 !important;
}
.organizzazione-foglia-hero .organizzazione-foglia-type {
margin-bottom: .5rem !important;
}
.organizzazione-foglia-visual {
min-height: 230px !important;
height: 230px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.organizzazione-foglia-photo {
width: 220px !important;
height: 220px !important;
max-width: 100% !important;
background-size: contain !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.organizzazione-foglia-page {
margin-top: 0 !important;
}
}
/* ==========================================================
MIG-2026-001 - Organizzazione foglia
HERO MOBILE V3 - compatto, immagine leggibile
========================================================== */
@media (max-width: 575.98px) {
.organizzazione-foglia-hero {
overflow: hidden;
}
.organizzazione-foglia-hero .row {
--bs-gutter-y: 0;
}
.organizzazione-foglia-hero .col-12.col-md-6.py-4.py-lg-5 {
padding-top: .65rem !important;
padding-bottom: 0 !important;
}
.organizzazione-foglia-hero .organizzazione-foglia-type {
margin-bottom: .35rem !important;
}
.organizzazione-foglia-visual {
height: 175px !important;
min-height: 175px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.organizzazione-foglia-photo {
width: 300px !important;
height: 300px !important;
max-width: none !important;
background-size: 300px 300px !important;
background-position: center center !important;
background-repeat: no-repeat !important;
flex: 0 0 300px !important;
}
.organizzazione-foglia-page {
margin-top: 0 !important;
}
}
/* ==========================================================
MIG-2026-001 - Organizzazione foglia
Indice Dettagli più compatto SOLO smartphone
========================================================== */
@media (max-width: 575.98px) {
.organizzazione-foglia-aside .link-list li {
margin-bottom: 0 !important;
}
.organizzazione-foglia-aside .link-list a {
padding-top: .45rem !important;
padding-bottom: .45rem !important;
line-height: 1.25 !important;
}
.organizzazione-foglia-aside .link-list-wrapper {
padding-top: .15rem !important;
padding-bottom: .15rem !important;
}
}
/* ==========================================================
MIG-2026-001 - GLOBAL INTERNAL DOCUMENT LINKS
Standard visuale documenti interni
Derivato da organizzazione-document-card
========================================================== */
/*
* Allegati migrati / Attachments.
* La CARD è il ; il link resta semanticamente un link.
*/
.article-attachments__list {
list-style: none;
padding-left: 0;
}
.article-attachments__list > li {
border: 1px solid #d8dde3 !important;
border-top: 3px solid #c6283d !important;
border-radius: .25rem;
background: #fff;
box-shadow: 0 .2rem .65rem rgba(0, 0, 0, .08) !important;
padding: 1.25rem 1.4rem;
margin-bottom: 1rem;
}
.article-attachments__list > li:last-child {
margin-bottom: 0;
}
.article-attachments__list > li > a {
display: block;
overflow-wrap: anywhere;
}
/*
* Link diretti a file inseriti manualmente nel contenuto.
*
* Vengono riconosciuti i principali formati documentali
* e di download usati nel corpus scolastico.
*/
.article-content a:is(
[href*=".pdf" i],
[href*=".p7m" i],
[href*=".doc" i],
[href*=".docx" i],
[href*=".xls" i],
[href*=".xlsx" i],
[href*=".ppt" i],
[href*=".pptx" i],
[href*=".odt" i],
[href*=".ods" i],
[href*=".odp" i],
[href*=".rtf" i],
[href*=".csv" i],
[href*=".txt" i],
[href*=".zip" i]
):not(.btn):not(.list-item) {
display: block;
border: 1px solid #d8dde3 !important;
border-top: 3px solid #c6283d !important;
border-radius: .25rem;
background: #fff;
box-shadow: 0 .2rem .65rem rgba(0, 0, 0, .08) !important;
padding: 1.25rem 1.4rem;
margin: 1rem 0;
overflow-wrap: anywhere;
}
/*
* Se il file è già dentro article-attachments, la card
* è il LI: evitiamo una seconda card attorno all'anchor.
*/
.article-content .article-attachments__list > li > a {
border: 0 !important;
border-top: 0 !important;
border-radius: 0;
background: transparent;
box-shadow: none !important;
padding: 0;
margin: 0;
}
/* Mobile */
@media (max-width: 767.98px) {
.article-attachments__list > li,
.article-content a:is(
[href*=".pdf" i],
[href*=".p7m" i],
[href*=".doc" i],
[href*=".docx" i],
[href*=".xls" i],
[href*=".xlsx" i],
[href*=".ppt" i],
[href*=".pptx" i],
[href*=".odt" i],
[href*=".ods" i],
[href*=".odp" i],
[href*=".rtf" i],
[href*=".csv" i],
[href*=".txt" i],
[href*=".zip" i]
):not(.btn):not(.list-item) {
padding: 1rem 1.1rem;
}
}
/* ==========================================================
MIG-2026-001 - NEUTRAL INTERNAL PAGE CARDS
Card che aprono PAGINE INTERNE:
nessuna barra superiore colorata/marcata.
Il bordo superiore rosso resta riservato ai link diretti
a documenti/file interni.
========================================================== */
.card.card-article.persone-structure-card::before,
.card.card-article.luoghi-structure-card::before,
.card.card-article.organizzazione-structure-card::before {
display: none !important;
content: none !important;
}
.card.card-article.persone-structure-card,
.card.card-article.luoghi-structure-card,
.card.card-article.organizzazione-structure-card {
border-top: 1px solid #d8dde3 !important;
}
/* ==========================================================
MIG-2026-001 - FIX DOUBLE CARD ATTACHMENTS
Se il file e gia dentro article-attachments, la card
e il LI. L'anchor interno non deve diventare una seconda card.
========================================================== */
.article-attachments__list > li > a,
.article-attachments__list > li > a[href] {
display: inline !important;
border: 0 !important;
border-top: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* ==========================================================
MIG-2026-001 - SPACING AFTER ATTACHMENTS
Separazione della sezione Documenti dalla sezione successiva.
========================================================== */
.article-attachments {
margin-bottom: 2.5rem !important;
}
/* ==========================================================
MIG-2026-001 - ATTACHMENT ANCHOR HARD RESET
La card e il LI. Il link interno deve restare solo testo.
========================================================== */
.article-content .article-attachments .article-attachments__list > li > a,
.article-attachments .article-attachments__list > li > a[href] {
display: inline !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
position: static !important;
transform: none !important;
}
.article-content .article-attachments .article-attachments__list > li > a::before,
.article-content .article-attachments .article-attachments__list > li > a::after,
.article-attachments .article-attachments__list > li > a[href]::before,
.article-attachments .article-attachments__list > li > a[href]::after {
content: none !important;
display: none !important;
}
/* ==========================================================
MIG-2026-001 - ATTACHMENT LINK SPECIFICITY FIX
Quando un file e gia contenuto in article-attachments:
- la card e esclusivamente il LI
- l'anchor resta un normale link testuale
Questo selettore prevale sulla regola globale dei file diretti.
========================================================== */
.article-content
.article-attachments.article-attachments
.article-attachments__list > li > a[href] {
display: inline !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
position: static !important;
transform: none !important;
}
.article-content
.article-attachments.article-attachments
.article-attachments__list > li > a[href]::before,
.article-content
.article-attachments.article-attachments
.article-attachments__list > li > a[href]::after {
content: none !important;
display: none !important;
}
/* ============================================================
MIG-2026-001 - INTERNAL ARTICLE LINK CARDS
Elenchi espliciti di collegamenti a pagine interne Joomla
============================================================ */
.article-content ul.article-link-cards {
list-style: none;
margin: 1rem 0 1.5rem;
padding: 0;
}
.article-content ul.article-link-cards > li {
display: block;
width: 100%;
margin: 0 0 1rem;
padding: 1rem 1.25rem;
background: #fff;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
box-sizing: border-box;
}
.article-content ul.article-link-cards > li > a {
display: inline-flex;
align-items: flex-start;
gap: .55rem;
color: #06c;
font-weight: 600;
text-decoration: none;
}
.article-content ul.article-link-cards > li > a::before {
content: "";
display: inline-block;
flex: 0 0 18px;
width: 18px;
height: 18px;
margin-top: .1em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07.07l2-2a5 5 0 0 0-7.07-7.07l-1.15 1.15'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07-.07l-2 2A5 5 0 0 0 12 20l1.15-1.15'/%3E%3C/svg%3E");
}
.article-content ul.article-link-cards > li > a:hover,
.article-content ul.article-link-cards > li > a:focus {
color: #004d99;
text-decoration: underline;
}
.article-content ul.article-link-cards > li:last-child {
margin-bottom: 0;
}
/* MIG-2026-001 - AUTO INTERNAL ARTICLE CARDS */
p:has(> a[href*="option=com_content"][href*="view=article"]:only-child) {
display: block;
width: 100%;
margin: 1rem 0;
padding: 1rem 1.25rem;
box-sizing: border-box;
background: #fff;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
p:has(> a[href*="option=com_content"][href*="view=article"]:only-child) > a {
display: inline-flex;
align-items: center;
gap: .55rem;
color: #06c;
font-weight: 600;
text-decoration: none;
}
p:has(> a[href*="option=com_content"][href*="view=article"]:only-child) > a::before {
content: "\1F517";
font-size: 1rem;
line-height: 1;
}
p:has(> a[href*="option=com_content"][href*="view=article"]:only-child) > a:hover,
p:has(> a[href*="option=com_content"][href*="view=article"]:only-child) > a:focus {
color: #004d99;
text-decoration: underline;
}
/* ============================================================
MIG-2026-001 - AUTO INTERNAL ARTICLE CARDS V7
Solo link editoriali Joomla isolati e privi di classi.
Esclude card/componenti gia stilizzati dal template.
============================================================ */
p:not([class]):has(> a:not([class])[href^="/index.php/"]:only-child),
p:not([class]):has(> a:not([class])[href*="option=com_content"][href*="view=article"]:only-child) {
display: block;
width: 100%;
margin: 1rem 0;
padding: 1rem 1.25rem;
box-sizing: border-box;
background: #fff;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
p:not([class]):has(> a:not([class])[href^="/index.php/"]:only-child) > a,
p:not([class]):has(> a:not([class])[href*="option=com_content"][href*="view=article"]:only-child) > a {
display: inline-flex;
align-items: center;
gap: .55rem;
color: #06c;
font-weight: 600;
text-decoration: none;
}
p:not([class]):has(> a:not([class])[href^="/index.php/"]:only-child) > a::before,
p:not([class]):has(> a:not([class])[href*="option=com_content"][href*="view=article"]:only-child) > a::before {
content: "\1F517";
font-size: 1rem;
line-height: 1;
}
p:not([class]):has(> a:not([class])[href^="/index.php/"]:only-child) > a:hover,
p:not([class]):has(> a:not([class])[href*="option=com_content"][href*="view=article"]:only-child) > a:hover,
p:not([class]):has(> a:not([class])[href^="/index.php/"]:only-child) > a:focus,
p:not([class]):has(> a:not([class])[href*="option=com_content"][href*="view=article"]:only-child) > a:focus {
color: #004d99;
text-decoration: underline;
}
/* ============================================================
MIG-2026-001 - TAG ORDINE DI SCUOLA
Infanzia / Primaria / Secondaria
============================================================ */
/* Base comune */
.tags.list-inline a,
.tags.list-unstyled a,
ul.tags a,
dd.tags a {
display: inline-block;
padding: .22rem .65rem;
border-radius: 999px;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
border: 1px solid transparent;
}
/* INFANZIA */
a[data-element="topic-list"][href*="tag/infanzia"],
a[data-element="topic-list"][href*="tag-infanzia"],
a[data-element="topic-list"][href*="view=tag"][href*="infanzia"] {
background-color: #6F42C1 !important;
border-color: #6F42C1 !important;
color: #fff !important;
}
/* PRIMARIA */
a[data-element="topic-list"][href*="tag/primaria"],
a[data-element="topic-list"][href*="tag-primaria"],
a[data-element="topic-list"][href*="view=tag"][href*="primaria"] {
background-color: #0F6B5A !important;
border-color: #0F6B5A !important;
color: #fff !important;
}
/* SECONDARIA */
a[data-element="topic-list"][href*="tag/secondaria"],
a[data-element="topic-list"][href*="tag-secondaria"],
a[data-element="topic-list"][href*="view=tag"][href*="secondaria"] {
background-color: #0056B3 !important;
border-color: #0056B3 !important;
color: #fff !important;
}
/* Hover */
a[data-element="topic-list"][href*="tag/infanzia"]:hover,
a[data-element="topic-list"][href*="tag/primaria"]:hover,
a[data-element="topic-list"][href*="tag/secondaria"]:hover,
a[data-element="topic-list"][href*="tag-infanzia"]:hover,
a[data-element="topic-list"][href*="tag-primaria"]:hover,
a[data-element="topic-list"][href*="tag-secondaria"]:hover,
a[data-element="topic-list"][href*="view=tag"][href*="infanzia"]:hover,
a[data-element="topic-list"][href*="view=tag"][href*="primaria"]:hover,
a[data-element="topic-list"][href*="view=tag"][href*="secondaria"]:hover {
color: #fff !important;
text-decoration: underline;
filter: brightness(.88);
}
/* Focus tastiera */
a[data-element="topic-list"][href*="tag/infanzia"]:focus-visible,
a[data-element="topic-list"][href*="tag/primaria"]:focus-visible,
a[data-element="topic-list"][href*="tag/secondaria"]:focus-visible,
a[data-element="topic-list"][href*="tag-infanzia"]:focus-visible,
a[data-element="topic-list"][href*="tag-primaria"]:focus-visible,
a[data-element="topic-list"][href*="tag-secondaria"]:focus-visible {
outline: 3px solid #000;
outline-offset: 2px;
}
/* ============================================================
MIG-2026-001 - TAG NOVITA: GERARCHIA CROMATICA
Soft = istituto / ordine di scuola
Full = singolo plesso
============================================================ */
/* ISTITUTO COMPRENSIVO - soft neutro istituzionale */
a[data-element="topic-list"][href*="istituto-comprensivo"] {
background-color: #eef2f6 !important;
border-color: #9aa9b8 !important;
color: #334e68 !important;
}
/* INFANZIA - soft viola */
a[data-element="topic-list"][href*="tag/infanzia"],
a[data-element="topic-list"][href*="tag-infanzia"],
a[data-element="topic-list"][href*="view=tag"][href*="infanzia"] {
background-color: #f1eafb !important;
border-color: #c8b5eb !important;
color: #6f42c1 !important;
}
/* PRIMARIA - soft verde petrolio */
a[data-element="topic-list"][href*="tag/primaria"],
a[data-element="topic-list"][href*="tag-primaria"],
a[data-element="topic-list"][href*="view=tag"][href*="primaria"] {
background-color: #e6f3ef !important;
border-color: #9fcabf !important;
color: #0f6b5a !important;
}
/* SECONDARIA - soft blu */
a[data-element="topic-list"][href*="tag/secondaria"],
a[data-element="topic-list"][href*="tag-secondaria"],
a[data-element="topic-list"][href*="view=tag"][href*="secondaria"] {
background-color: #e7f1fb !important;
border-color: #9fc3e7 !important;
color: #0056b3 !important;
}
/* PLESSI - colori pieni da Palette Tag di Plesso */
/* Infanzia Satta - indaco */
a[data-element="topic-list"][href*="infanzia-satta"] {
background-color: #2f8f3a !important;
border-color: #2f8f3a !important;
color: #060606 !important;
}
/* Infanzia Via Falzarego - arancio */
a[data-element="topic-list"][href*="infanzia-via-falzarego"] {
background-color: #f28b14 !important;
border-color: #f28b14 !important;
color: #212121 !important;
}
/* Primaria Satta - verde */
a[data-element="topic-list"][href*="primaria-satta"] {
background-color: #61ba1f !important;
border-color: #61ba1f !important;
color: #212121 !important;
}
/* Primaria De Amicis - magenta */
a[data-element="topic-list"][href*="primaria-de-amicis"] {
background-color: #c533c7 !important;
border-color: #c533c7 !important;
color: #060606 !important;
}
/* Secondaria Spano - rosso */
a[data-element="topic-list"][href*="secondaria-spano"] {
background-color: #d34536 !important;
border-color: #d34536 !important;
color: #060606 !important;
}
/* Secondaria Manno - azzurro */
a[data-element="topic-list"][href*="secondaria-manno"] {
background-color: #268fd0 !important;
border-color: #268fd0 !important;
color: #212121 !important;
}
/* ============================================================
MIG-2026-001 - NOVITA CARD: SFONDO AREA IMMAGINE
Le immagini legacy mantengono le proporzioni;
eventuale spazio residuo resta bianco come la card.
============================================================ */
.card.card-article .card-article-img {
background-color: #fff;
}
/* MIG-2026-001 - NOVITA CARD: override definitivo sfondo immagine */
.blogj4a .card.card-article .card-article-img {
background-color: #fff !important;
}
/* =========================================================
MIG-2026-001 BTN SECONDARY PETROLIO
Override globale pulsanti secondari frontend
========================================================= */
.btn-secondary,
.btn.btn-secondary {
background-color: #0b6f70 !important;
border-color: #0b6f70 !important;
color: #ffffff !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
background-color: #07585a !important;
border-color: #07585a !important;
color: #ffffff !important;
}
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
background-color: #064b4d !important;
border-color: #064b4d !important;
color: #ffffff !important;
}
.btn-secondary:focus,
.btn.btn-secondary:focus {
box-shadow: 0 0 0 0.25rem rgba(11, 111, 112, 0.28) !important;
}
/* ==========================================================
MIG-2026-001 - Calendario eventi
Badge periodo su mesi/anni diversi
========================================================== */
.card.card-article .card-article-img .date.date-event-period {
width: 108px;
padding: 8px 6px;
}
.card.card-article .card-article-img .date.date-event-period span.event-period-line {
display: block;
font-weight: 700;
white-space: nowrap;
}
.card.card-article .card-article-img .date.date-event-period.same-month-range .year,
.card.card-article .card-article-img .date.date-event-period.cross-month .year {
font-size: 1rem;
line-height: 1.05;
margin-bottom: 4px;
}
.card.card-article .card-article-img .date.date-event-period.same-month-range .day {
font-size: 2.05rem;
line-height: .95;
}
.card.card-article .card-article-img .date.date-event-period.same-month-range .month {
font-size: 1.35rem;
line-height: 1.05;
}
.card.card-article .card-article-img .date.date-event-period.cross-month {
width: 112px;
}
.card.card-article .card-article-img .date.date-event-period.cross-month span.event-period-line {
font-size: 1.22rem;
line-height: 1.08;
}
.card.card-article .card-article-img .date.date-event-period.cross-year {
width: 118px;
gap: 2px;
padding-top: 7px;
padding-bottom: 7px;
}
.card.card-article .card-article-img .date.date-event-period.cross-year span.event-period-line {
font-size: 1.1rem;
line-height: 1.05;
}
.card.card-article .card-article-img .date.date-event-period.cross-year span.event-period-year {
display: block;
font-size: 1.28rem;
line-height: 1.02;
font-weight: 700;
white-space: nowrap;
}
.card.card-article .card-article-img .date.date-event-period.cross-year span.event-period-separator {
display: block;
font-size: 1rem;
line-height: .85;
font-weight: 700;
}
/* ==========================================================
MIG-2026-001 - Fine tuning badge calendario eventi
Rifinitura finale leggibilità:
- stesso giorno
- intervallo stesso mese
- mesi diversi
========================================================== */
.card.card-article .card-article-img .date.date-event-period.standard {
width: 92px;
padding: 8px 6px;
}
.card.card-article .card-article-img .date.date-event-period.standard .year {
font-size: 1.08rem;
line-height: 1.05;
margin-bottom: 4px;
}
.card.card-article .card-article-img .date.date-event-period.standard .day {
font-size: 1.92rem;
line-height: .94;
}
.card.card-article .card-article-img .date.date-event-period.standard .month {
font-size: 1.42rem;
line-height: 1.02;
}
.card.card-article .card-article-img .date.date-event-period.same-month-range .year {
font-size: 1.1rem;
line-height: 1.05;
margin-bottom: 4px;
}
.card.card-article .card-article-img .date.date-event-period.same-month-range .day {
font-size: 1.88rem;
line-height: .95;
}
.card.card-article .card-article-img .date.date-event-period.same-month-range .month {
font-size: 1.42rem;
line-height: 1.02;
}
.card.card-article .card-article-img .date.date-event-period.cross-month .year {
font-size: 1.12rem;
line-height: 1.05;
margin-bottom: 5px;
}
/* ==========================================================
MIG-2026-001 - Badge orizzontale data evento hero
========================================================== */
.section-hero .title-img .event-hero-date {
position: absolute;
z-index: 4;
top: 1rem;
right: 1rem;
max-width: calc(100% - 2rem);
padding: .55rem .9rem;
background-color: #0E865C;
color: #fff;
font-size: 1.05rem;
line-height: 1.15;
font-weight: 700;
white-space: nowrap;
border-radius: .2rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
/* Smartphone: badge sempre visibile sulla fotografia */
@media (max-width: 575.98px) {
.section-hero .title-img .event-hero-date {
top: .75rem;
right: .75rem;
max-width: calc(100% - 1.5rem);
padding: .48rem .65rem;
font-size: .9rem;
line-height: 1.1;
}
}
/* Stress test telefoni molto stretti */
@media (max-width: 360px) {
.section-hero .title-img .event-hero-date {
font-size: .8rem;
padding-left: .5rem;
padding-right: .5rem;
}
}
/* ==========================================================
MIG-2026-001 - EVENT HERO FINAL RESPONSIVE
Badge mobile + desktop + large screen
========================================================== */
/* Desktop ordinario */
.event-article-hero .title-img .event-hero-date {
top: 1rem;
right: 1rem;
max-width: calc(100% - 2rem);
width: auto;
padding: .6rem 1rem;
box-sizing: border-box;
font-size: 1.12rem;
line-height: 1.15;
text-align: center;
white-space: nowrap;
}
/* Smartphone */
@media (max-width: 575.98px) {
.event-article-hero .title-img .event-hero-date {
top: .75rem;
right: .75rem;
width: 55%;
max-width: none;
padding: .52rem .6rem;
font-size: .92rem;
line-height: 1.1;
}
}
/* Telefoni particolarmente stretti */
@media (max-width: 360px) {
.event-article-hero .title-img .event-hero-date {
font-size: .8rem;
padding-left: .5rem;
padding-right: .5rem;
}
}
/*
* Monitor molto grandi / 2K / 4K / schermo da convegno.
*
* Impedisce all'immagine di continuare a espandersi
* indefinitamente oltre la scala editoriale prevista.
*/
@media (min-width: 1800px) {
.event-article-hero .container {
max-width: 1800px;
}
.event-article-hero .title-img {
width: 900px;
right: calc((100vw - 1800px) / 2);
}
.event-article-hero .hero-title h1 {
font-size: 3rem;
line-height: 1.1;
}
.event-article-hero .title-img .event-hero-date {
top: 1.25rem;
right: 1.25rem;
width: auto;
max-width: calc(100% - 2.5rem);
padding: .7rem 1.1rem;
font-size: 1.25rem;
line-height: 1.15;
}
}
/* ==========================================================
MIG-2026-001 - Pulsante interno Circolari
Link verso archivio interno: verde smeraldo
========================================================== */
.circolari-landing .btn-circolari {
display: inline-block;
padding: .6rem 1rem;
background-color: #0E865C;
border: 1px solid #0E865C;
border-radius: .2rem;
color: #fff;
font-weight: 700;
text-decoration: none;
}
.circolari-landing .btn-circolari:hover,
.circolari-landing .btn-circolari:focus {
background-color: #0B6F4C;
border-color: #0B6F4C;
color: #fff;
text-decoration: underline;
}
.circolari-landing .btn-circolari:focus-visible {
outline: 3px solid rgba(14, 134, 92, .35);
outline-offset: 3px;
}
/* ==========================================================
MIG-2026-001 - Card elenco Circolari
========================================================== */
@media (min-width: 992px) {
.card.card-article.card-circolare .card-body {
min-height: 170px;
height: auto;
}
.card.card-article.card-circolare .card-article-img {
width: 24%;
max-width: 24%;
flex: 0 0 24%;
min-height: 170px;
}
.card.card-article.card-circolare .card-article-content {
width: auto;
max-width: none;
flex: 1 1 76%;
min-width: 0;
}
.card.card-article.card-circolare .card-article-img figure,
.card.card-article.card-circolare .card-article-img figure a {
height: 100%;
}
.card.card-article.card-circolare .card-article-img img {
width: 100%;
height: 100%;
min-height: 170px;
object-fit: cover;
}
}
.card.card-article.card-circolare .card-article-content p {
margin-bottom: .65rem;
}
.card.card-article.card-circolare .circolare-readmore {
display: inline-block;
margin-top: .15rem;
color: #0E865C;
font-weight: 700;
text-decoration: underline;
}
.card.card-article.card-circolare .circolare-readmore:hover,
.card.card-article.card-circolare .circolare-readmore:focus {
color: #0B6F4C;
}
/* ==========================================================
MIG-2026-001 - Foglia Circolari strutturata
========================================================== */
@media (min-width: 768px) {
.circolare-article-hero .title-img {
width: 38%;
}
.circolare-article-hero .hero-title {
max-width: 100%;
}
.circolare-article-hero .circolare-hero-oggetto {
margin-top: 1rem;
max-width: 760px;
font-size: 1.05rem;
line-height: 1.45;
}
}
@media (max-width: 767.98px) {
.circolare-article-hero .circolare-hero-oggetto {
margin-top: .75rem;
font-size: .95rem;
line-height: 1.4;
}
}
/* ==========================================================
MIG-2026-001 - Override hero oggetto Circolari
Ingrandisce il testo dell'Oggetto nell'hero
========================================================== */
.circolare-article-hero .circolare-hero-oggetto {
font-size: 1.1rem;
line-height: 1.55;
font-weight: 400;
max-width: 46rem;
}
.circolare-article-hero .circolare-hero-oggetto strong,
.circolare-article-hero .circolare-hero-oggetto b {
font-weight: 700;
}
@media (min-width: 992px) {
.circolare-article-hero .circolare-hero-oggetto {
font-size: 1.3rem;
line-height: 1.55;
}
}
/* ==========================================================
MIG-2026-001 - Hero Circolari più compatta
========================================================== */
.circolare-article-hero {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.circolare-article-hero .hero-title h1 {
margin-bottom: .75rem;
}
.circolare-article-hero .circolare-hero-oggetto {
margin-top: .5rem;
margin-bottom: 0;
}
@media (min-width: 992px) {
.circolare-article-hero {
min-height: 320px;
}
}
@media (max-width: 991.98px) {
.circolare-article-hero {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
}
/* ==========================================================
MIG-2026-001 - Immagine hero Circolari su smartphone
========================================================== */
@media (max-width: 767.98px) {
.circolare-article-hero {
display: flex !important;
flex-direction: column;
}
.circolare-article-hero .container {
order: 1;
}
.circolare-article-hero .circolare-mobile-image {
display: block !important;
position: relative;
order: 2;
width: calc(100% - 3rem);
height: 120px;
margin: 1.25rem 1.5rem 0;
background-size: cover;
background-position: center;
border-radius: .25rem;
}
}
/* ==========================================================
MIG-2026-001 - Hero Circolari mobile: immagine sempre visibile
Vale sia per placeholder sia per eventuale immagine reale.
========================================================== */
@media (max-width: 767.98px) {
.circolare-article-hero .title-img {
display: block !important;
position: relative !important;
order: 2;
top: auto !important;
right: auto !important;
left: auto !important;
width: calc(100% - 3rem) !important;
height: 120px !important;
margin: 1.25rem 1.5rem 0 !important;
background-size: cover !important;
background-position: center !important;
border-radius: .25rem;
}
}
/* ==========================================================
MIG-2026-001 - Banner ID2456 landing Circolari
========================================================== */
.circolari-info-banner {
margin-bottom: 2.25rem;
padding: 1.75rem 2rem;
background: #fff;
border-left: 4px solid #0e865c;
box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.circolari-info-banner > p:first-child {
margin-top: 0;
}
.circolari-info-banner > p:last-child {
margin-bottom: 0;
}
/* Accessi Argo */
.circolari-info-banner .circolari-argo-access {
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
gap: 1rem;
margin: 1.75rem 0;
}
.circolari-info-banner .circolari-argo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 390px;
min-height: 56px;
padding: .75rem 1.25rem;
border: 0 !important;
border-radius: 8px;
color: #fff !important;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-decoration: none !important;
}
/* Famiglie */
.circolari-info-banner .circolari-argo-famiglie {
background-color: #009fe3 !important;
}
.circolari-info-banner .circolari-argo-famiglie:hover,
.circolari-info-banner .circolari-argo-famiglie:focus {
background-color: #007fb6 !important;
color: #fff !important;
}
/* Personale scolastico */
.circolari-info-banner .circolari-argo-personale {
background-color: #ff6900 !important;
}
.circolari-info-banner .circolari-argo-personale:hover,
.circolari-info-banner .circolari-argo-personale:focus {
background-color: #d95700 !important;
color: #fff !important;
}
.circolari-years-heading {
margin-top: 0;
}
/* Mobile */
@media (max-width: 767.98px) {
.circolari-info-banner {
margin-bottom: 1.75rem;
padding: 1.25rem;
}
.circolari-info-banner .circolari-argo-access {
flex-direction: column;
align-items: stretch;
}
.circolari-info-banner .circolari-argo-btn {
width: 100%;
min-height: 54px;
}
}
/* ==========================================================
MIG-2026-001 - Albo Online external service
========================================================== */
.albo-online-info-banner {
max-width: 100%;
}
.albo-online-access {
display: flex;
justify-content: center;
align-items: stretch;
margin: 1.75rem 0 .5rem;
}
.albo-online-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 390px;
min-height: 56px;
padding: .75rem 1.25rem;
border: 0 !important;
border-radius: 8px;
background-color: #009fe3 !important;
color: #fff !important;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-decoration: none !important;
}
.albo-online-btn:hover,
.albo-online-btn:focus {
background-color: #007fb6 !important;
color: #fff !important;
text-decoration: none !important;
}
.albo-online-btn:focus-visible {
outline: 3px solid rgba(0, 159, 227, .35);
outline-offset: 3px;
}
@media (max-width: 767.98px) {
.albo-online-access {
align-items: stretch;
}
.albo-online-btn {
width: 100%;
min-height: 54px;
}
}
/* ==========================================================
MIG-2026-001 - Sidebar Convocazioni Consiglio Istituto
Solo categorie annuali figlie di CAT 35
========================================================== */
/* ==========================================================
MIG-2026-001 - Convocazioni Consiglio annualita nowrap
Solo categorie annuali figlie di CAT 35
========================================================== */
@media (min-width: 992px) {
.consiglio-documenti-sidebar {
flex: 0 0 30%;
width: 30%;
max-width: 30%;
}
.consiglio-documenti-content {
flex: 0 0 61.666667%;
width: 61.666667%;
max-width: 61.666667%;
}
}
.consiglio-school-year {
white-space: nowrap;
}
/* ==========================================================
MIG-2026-001 - PANORAMICA NOVITA
========================================================== */
.panoramica-novita {
width: 100%;
}
.panoramica-novita-hero {
padding: 3rem 0;
background-color: #08783f;
color: #fff;
}
.panoramica-novita-hero h1 {
color: #fff;
font-size: 2.5rem;
font-weight: 700;
}
.panoramica-novita-hero p {
color: #fff;
font-size: 1.15rem;
}
.panoramica-novita-section {
padding: 3.5rem 0;
}
.panoramica-novita-section--soft-green {
background: #f0f7f3;
}
.panoramica-novita-section--white {
background: #fff;
}
.panoramica-novita-section--gray {
background: #f4f4f4;
}
.panoramica-novita-section-title {
margin-bottom: 2rem;
color: #17324d;
}
.panoramica-novita-card {
height: 100%;
min-height: 310px;
overflow: hidden;
background: #fff;
border: 1px solid #e2e5e8;
border-radius: 4px;
box-shadow: 0 .15rem .55rem rgba(0, 0, 0, .08);
}
.panoramica-novita-card-image {
display: block;
width: 100%;
height: 150px;
overflow: hidden;
background: #fff;
}
.panoramica-novita-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.panoramica-novita-card-body {
padding: 1.25rem;
}
.panoramica-novita-card-body h3 {
margin-bottom: .75rem;
}
.panoramica-novita-card-body h3 a {
color: #17324d;
text-decoration: none;
}
.panoramica-novita-card-body h3 a:hover,
.panoramica-novita-card-body h3 a:focus {
text-decoration: underline;
}
.panoramica-novita-card-body p {
margin-bottom: 0;
color: #455b71;
}
.panoramica-novita-all {
margin-top: 1.35rem;
text-align: center;
}
.panoramica-novita-all a {
font-weight: 600;
color: #086b43;
text-decoration: underline;
}
.panoramica-novita-carousel .owl-nav {
display: flex;
justify-content: center;
gap: .75rem;
margin-top: 1rem;
}
.panoramica-novita-carousel .owl-nav button.owl-prev,
.panoramica-novita-carousel .owl-nav button.owl-next {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 2px solid #087a4c !important;
border-radius: 50%;
background: #fff !important;
color: #087a4c !important;
font-size: 1.8rem !important;
line-height: 1 !important;
}
.panoramica-novita-carousel .owl-nav button:hover,
.panoramica-novita-carousel .owl-nav button:focus {
background: #087a4c !important;
color: #fff !important;
}
.panoramica-novita-carousel .owl-nav button.disabled {
opacity: .35;
}
@media (max-width: 767.98px) {
.panoramica-novita-hero {
padding: 2.25rem 0;
}
.panoramica-novita-hero h1 {
font-size: 2rem;
}
.panoramica-novita-section {
padding: 2.5rem 0;
}
.panoramica-novita-card {
min-height: 0;
}
}
/* ==========================================================
MIG-2026-001 - PANORAMICA NOVITA CARD EQUAL HEIGHT META
========================================================== */
/*
* Owl usa flex per rendere tutte le card della stessa altezza.
*/
.panoramica-novita-carousel .owl-stage {
display: flex;
}
.panoramica-novita-carousel .owl-item {
display: flex;
height: auto;
}
.panoramica-novita-carousel .panoramica-novita-card {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 390px;
}
/*
* Immagine sempre della stessa altezza.
*/
.panoramica-novita-carousel .panoramica-novita-card-image {
flex: 0 0 150px;
height: 150px;
}
/*
* Corpo card:
* titolo + estratto occupano lo spazio disponibile;
* tag e data restano allineati in basso.
*/
.panoramica-novita-carousel .panoramica-novita-card-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
/*
* Limitiamo soltanto l'estratto.
* Il titolo resta libero di andare su più righe.
*/
.panoramica-novita-card-excerpt {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
}
/*
* Metadata sempre nella parte inferiore.
*/
.panoramica-novita-card-meta {
margin-top: auto;
padding-top: 1rem;
}
.panoramica-novita-card-tags {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-bottom: .8rem;
}
.panoramica-novita-card-tags .badge {
max-width: 100%;
overflow-wrap: anywhere;
text-decoration: none;
}
.panoramica-novita-card-date {
padding-top: .65rem;
border-top: 1px solid #e5e8eb;
color: #455b71;
font-size: .875rem;
}
.panoramica-novita-card-date span {
font-weight: 600;
}
@media (max-width: 767.98px) {
/*
* Mobile: niente altezza minima artificiale eccessiva.
*/
.panoramica-novita-carousel .panoramica-novita-card {
min-height: 0;
}
}
/* ==========================================================
MIG-2026-001 - PANORAMICA NOVITA HERO DECORATION
========================================================== */
.panoramica-novita-hero {
position: relative;
overflow: hidden;
}
.panoramica-novita-hero::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 46%;
height: 100%;
background:
linear-gradient(
58deg,
transparent 0 34%,
rgba(255,255,255,.08) 34% 50%,
transparent 50% 100%
),
linear-gradient(
122deg,
transparent 0 48%,
rgba(255,255,255,.10) 48% 64%,
transparent 64% 100%
),
linear-gradient(
15deg,
rgba(255,255,255,.05) 0 32%,
transparent 32% 100%
);
pointer-events: none;
}
.panoramica-novita-hero .container {
position: relative;
z-index: 1;
}
/* ==========================================================
MIG-2026-001 - PANORAMICA STRUCTURED CARDS
Circolari + Calendario eventi
========================================================== */
.panoramica-event-fields {
display: flex;
flex-direction: column;
gap: .8rem;
}
.panoramica-event-fields > div {
display: flex;
flex-direction: column;
gap: .15rem;
}
.panoramica-event-fields strong {
color: #17324d;
font-size: .9rem;
}
.panoramica-event-fields span {
color: #455b71;
}
/* ==========================================================
MIG-2026-001 - PANORAMICA CIRCOLARI COMPACT
========================================================== */
.panoramica-novita-card--circolare {
min-height: 320px !important;
}
.panoramica-novita-card--circolare
.panoramica-novita-card-image {
flex: 0 0 120px;
height: 120px;
}
.panoramica-novita-card--circolare
.panoramica-novita-card-body {
padding: .9rem 1rem;
}
@media (max-width: 767.98px) {
.panoramica-novita-card--circolare {
min-height: 0 !important;
}
}
/* ==========================================================
MIG-2026-001 - PANORAMICA EVENT CARD COMPACT
========================================================== */
.panoramica-event-title {
margin-bottom: .8rem !important;
}
.panoramica-event-date {
display: inline-block;
align-self: flex-start;
margin-bottom: .7rem;
padding: .4rem .7rem;
border-radius: 4px;
background: #087a4c;
color: #fff;
font-weight: 700;
line-height: 1.15;
}
.panoramica-event-participation {
margin-bottom: .5rem !important;
color: #455b71;
}
/*
* Le card Eventi possono essere leggermente più compatte
* rispetto alle card editoriali standard.
*/
.panoramica-novita-carousel
.panoramica-novita-card:has(.panoramica-event-title) {
min-height: 330px;
}
@media (max-width: 767.98px) {
.panoramica-novita-carousel
.panoramica-novita-card:has(.panoramica-event-title) {
min-height: 0;
}
}
/* ==========================================================
MIG-2026-001
I NUMERI DELLA SCUOLA
========================================================== */
.numeri-scuola {
position: relative;
color: #17324d;
}
/* ----------------------------------------------------------
HERO / RIEPILOGO GENERALE
---------------------------------------------------------- */
.numeri-scuola-hero {
position: relative;
overflow: hidden;
padding: 4rem 0 4.5rem;
background-color: #f6f7f7;
}
.numeri-scuola-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .42;
background:
linear-gradient(
135deg,
transparent 0 67%,
rgba(23, 50, 77, .045) 67% 72%,
transparent 72% 100%
),
linear-gradient(
45deg,
transparent 0 76%,
rgba(211, 47, 70, .045) 76% 81%,
transparent 81% 100%
);
}
.numeri-scuola-hero .container {
position: relative;
z-index: 1;
}
.numeri-scuola-kicker {
margin-bottom: .5rem;
font-size: .95rem;
font-weight: 600;
}
.numeri-scuola-hero h1 {
margin-bottom: .75rem;
color: #17324d;
}
.numeri-scuola-intro {
max-width: 48rem;
margin-bottom: 3rem;
color: #455b71;
font-size: 1.05rem;
}
/* ----------------------------------------------------------
TRE NUMERI PRINCIPALI
---------------------------------------------------------- */
.numeri-scuola-summary {
align-items: center;
}
.numeri-scuola-summary-item {
min-height: 13rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.numeri-scuola-summary-item strong {
display: block;
color: #d32f46;
font-size: clamp(3.8rem, 7vw, 6.5rem);
font-weight: 400;
line-height: .95;
letter-spacing: -.04em;
}
.numeri-scuola-summary-item span {
display: block;
max-width: 10rem;
margin-top: .8rem;
color: #d32f46;
font-weight: 600;
line-height: 1.25;
}
.numeri-scuola-summary-item--ratio {
width: 13rem;
height: 13rem;
min-height: 13rem;
margin-left: auto;
border-radius: 50%;
align-items: center;
justify-content: center;
text-align: center;
background: #d32f46;
}
.numeri-scuola-summary-item--ratio strong {
color: #fff;
font-size: 4.4rem;
}
.numeri-scuola-summary-item--ratio span {
max-width: 9rem;
margin-top: .55rem;
color: #fff;
font-size: .9rem;
}
/* ----------------------------------------------------------
DETTAGLIO ORDINI / PLESSI
---------------------------------------------------------- */
.numeri-scuola-details {
padding: 4rem 0 4.5rem;
background: #fff;
}
.numeri-scuola-order {
height: 100%;
overflow: hidden;
border: 1px solid #dfe5e8;
border-radius: 4px;
background: #fff;
box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
}
.numeri-scuola-order > header {
padding: 1.6rem 1.6rem 1.4rem;
border-bottom: 4px solid #d32f46;
background: #f7f8f8;
}
.numeri-scuola-order-kicker {
margin-bottom: .45rem;
color: #17324d;
font-weight: 700;
}
.numeri-scuola-order > header h2 {
margin: 0;
color: #d32f46;
font-size: 2.2rem;
line-height: 1.1;
}
.numeri-scuola-order > header > p:last-child {
margin: .4rem 0 0;
color: #455b71;
font-weight: 600;
}
.numeri-scuola-place {
padding: 1.4rem 1.6rem;
}
.numeri-scuola-place + .numeri-scuola-place {
border-top: 1px solid #e5e9ec;
}
.numeri-scuola-place h3 {
margin-bottom: .45rem;
color: #17324d;
font-size: 1.3rem;
}
.numeri-scuola-place p {
margin-bottom: .7rem;
color: #455b71;
}
.numeri-scuola-place ul {
margin: .65rem 0 0;
padding-left: 1.25rem;
color: #455b71;
}
.numeri-scuola-place li + li {
margin-top: .35rem;
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 767.98px) {
.numeri-scuola-hero {
padding: 2.5rem 0 3rem;
}
.numeri-scuola-intro {
margin-bottom: 2rem;
}
.numeri-scuola-summary-item {
min-height: auto;
align-items: center;
text-align: center;
padding: 1rem 0;
}
.numeri-scuola-summary-item span {
max-width: none;
}
.numeri-scuola-summary-item--ratio {
width: 11rem;
height: 11rem;
min-height: 11rem;
margin: 1rem auto 0;
}
.numeri-scuola-summary-item--ratio strong {
font-size: 3.6rem;
}
.numeri-scuola-details {
padding: 2.5rem 0 3rem;
}
.numeri-scuola-order > header,
.numeri-scuola-place {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
/* ==========================================================
MIG-2026-001
I NUMERI DELLA SCUOLA
HERO ROSSO + INTRO GRIGIA + DETAILS ROSSI
========================================================== */
/* Nasconde il kicker "La scuola" */
.numeri-scuola-kicker {
display: none !important;
}
/* HERO BICOLORE:
- parte alta rossa con pattern e titolo bianco
- parte bassa grigia con intro e numeri */
.numeri-scuola-hero {
position: relative;
overflow: hidden;
padding: 0;
background:
linear-gradient(
to bottom,
#d7334c 0,
#cf3049 190px,
#f3f4f4 190px,
#f3f4f4 100%
);
}
/* Pattern combinato rosso/grigio */
.numeri-scuola-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(168deg, rgba(255,255,255,.08) 0 15%, transparent 15% 100%),
linear-gradient(12deg, transparent 0 54%, rgba(0,0,0,.07) 54% 63%, transparent 63% 100%),
linear-gradient(145deg, transparent 0 71%, rgba(255,255,255,.07) 71% 82%, transparent 82% 100%),
linear-gradient(132deg, transparent 0 68%, rgba(255,255,255,.14) 68% 76%, transparent 76% 100%);
opacity: .95;
}
.numeri-scuola-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(135deg, transparent 0 63%, rgba(255,255,255,.20) 63% 74%, transparent 74% 100%),
linear-gradient(42deg, transparent 0 78%, rgba(211,47,70,.05) 78% 83%, transparent 83% 100%),
linear-gradient(148deg, transparent 0 82%, rgba(23,50,77,.03) 82% 86%, transparent 86% 100%);
opacity: .9;
}
.numeri-scuola-hero .container {
position: relative;
z-index: 1;
padding-top: 2rem;
padding-bottom: 3rem;
}
/* Titolo principale nella fascia rossa */
.numeri-scuola-hero h1 {
margin: 0 0 4.35rem;
color: #fff;
font-size: 2.55rem;
line-height: 1.08;
font-weight: 700;
}
/* Intro nella parte grigia */
.numeri-scuola-intro {
position: relative;
max-width: 48rem;
margin-bottom: 2.25rem;
color: #455b71;
font-size: 1.15rem;
line-height: 1.55;
}
/* Titolettino nero sopra la frase */
.numeri-scuola-intro::before {
content: "La scuola in numeri";
display: block;
margin-bottom: .6rem;
color: #17324d;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
/* Un po' più aria ai numeri riassuntivi */
.numeri-scuola-summary {
margin-top: 1.25rem;
}
/* Sfondo rosso geometrico per la parte delle card bianche */
.numeri-scuola-details {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, #d7334c 0%, #c92e46 100%);
}
.numeri-scuola-details::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(165deg, rgba(255,255,255,.08) 0 16%, transparent 16% 100%),
linear-gradient(16deg, transparent 0 52%, rgba(0,0,0,.07) 52% 61%, transparent 61% 100%),
linear-gradient(145deg, transparent 0 70%, rgba(255,255,255,.06) 70% 82%, transparent 82% 100%);
}
.numeri-scuola-details::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(36deg, transparent 0 72%, rgba(255,255,255,.07) 72% 78%, transparent 78% 100%),
linear-gradient(160deg, transparent 0 76%, rgba(0,0,0,.05) 76% 84%, transparent 84% 100%);
}
.numeri-scuola-details .container {
position: relative;
z-index: 1;
}
/* Card più leggibili sopra il rosso */
.numeri-scuola-order {
background: #fff;
border: 1px solid rgba(223,229,232,.95);
box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.numeri-scuola-order > header {
background: #fbfbfb;
}
/* Mobile */
@media (max-width: 767.98px) {
.numeri-scuola-hero {
background:
linear-gradient(
to bottom,
#d7334c 0,
#cf3049 150px,
#f3f4f4 150px,
#f3f4f4 100%
);
}
.numeri-scuola-hero .container {
padding-top: 1.5rem;
padding-bottom: 2.5rem;
}
.numeri-scuola-hero h1 {
font-size: 2.15rem;
line-height: 1.08;
margin-bottom: 2.8rem;
}
.numeri-scuola-intro {
font-size: 1.05rem;
margin-bottom: 2rem;
}
.numeri-scuola-intro::before {
font-size: .95rem;
}
.numeri-scuola-details {
padding-top: 2.75rem;
}
}
/* ==========================================================
MIG-2026-001
I NUMERI DELLA SCUOLA - REFINING v2
========================================================== */
.numeri-scuola-page {
margin: 0;
}
.numeri-scuola-hero {
background: #f2f3f4;
}
.numeri-scuola-hero-band {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #d7324c 0%, #e14061 100%);
padding: 1.1rem 0 1.2rem;
}
.numeri-scuola-hero-band::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(168deg, rgba(255,255,255,.10) 0 18%, transparent 18% 100%),
linear-gradient(10deg, transparent 0 60%, rgba(0,0,0,.07) 60% 72%, transparent 72% 100%),
linear-gradient(140deg, transparent 0 72%, rgba(255,255,255,.12) 72% 82%, transparent 82% 100%),
linear-gradient(132deg, transparent 0 84%, rgba(255,255,255,.16) 84% 90%, transparent 90% 100%);
}
.numeri-scuola-hero-band .container {
position: relative;
z-index: 1;
}
.numeri-scuola-hero h1 {
margin: 0;
color: #fff;
font-size: 2.5rem;
line-height: 1.08;
font-weight: 700;
}
.numeri-scuola-hero-body {
position: relative;
overflow: hidden;
padding: 1.2rem 0 2.5rem;
background: #f2f3f4;
}
.numeri-scuola-hero-body::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(168deg, rgba(255,255,255,.28) 0 18%, transparent 18% 100%),
linear-gradient(12deg, transparent 0 60%, rgba(0,0,0,.05) 60% 68%, transparent 68% 100%),
linear-gradient(135deg, transparent 0 73%, rgba(255,255,255,.24) 73% 81%, transparent 81% 100%),
linear-gradient(145deg, transparent 0 83%, rgba(0,0,0,.03) 83% 89%, transparent 89% 100%);
}
.numeri-scuola-hero-body .container {
position: relative;
z-index: 1;
}
.numeri-scuola-hero-eyebrow {
margin: 0 0 .5rem;
color: #17324d;
font-size: 1rem;
line-height: 1.3;
font-weight: 700;
}
.numeri-scuola-intro {
max-width: 46rem;
margin: 0 0 2rem;
color: #455b71;
font-size: 1.12rem;
line-height: 1.55;
}
.numeri-scuola-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
align-items: center;
}
.numeri-scuola-summary-item {
min-height: 165px;
display: flex;
flex-direction: column;
justify-content: center;
}
.numeri-scuola-summary-item--ratio {
align-items: flex-end;
}
.numeri-scuola-summary-value {
margin: 0 0 .55rem;
color: #d7324c;
font-size: 4.2rem;
line-height: 1;
font-weight: 300;
letter-spacing: -.02em;
}
.numeri-scuola-summary-label {
display: inline-flex;
align-items: center;
gap: .45rem;
color: #d7324c;
font-size: 1rem;
line-height: 1.25;
font-weight: 600;
}
.numeri-scuola-summary-icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: inline-block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.numeri-scuola-summary-icon--alunni {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7324c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.numeri-scuola-summary-icon--classi {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7324c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M9 4v16'/%3E%3Cpath d='M15 4v16'/%3E%3C/svg%3E");
}
.numeri-scuola-summary-badge {
width: 10.25rem;
height: 10.25rem;
border-radius: 50%;
background: #d7324c;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
}
.numeri-scuola-summary-badge-value {
display: block;
font-size: 3.1rem;
line-height: 1;
font-weight: 300;
margin-bottom: .45rem;
letter-spacing: -.02em;
}
.numeri-scuola-summary-badge-label {
display: block;
font-size: .96rem;
line-height: 1.2;
font-weight: 700;
max-width: 7.5rem;
}
.numeri-scuola-cta {
margin-top: 1.5rem;
}
.numeri-scuola-cta-link {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .68rem 1rem;
background: #d7324c;
color: #fff !important;
text-decoration: none !important;
font-weight: 600;
line-height: 1.2;
border-radius: 0;
box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.numeri-scuola-cta-link:hover,
.numeri-scuola-cta-link:focus {
background: #be2941;
color: #fff !important;
text-decoration: none !important;
}
.numeri-scuola-details {
position: relative;
overflow: hidden;
padding: 3rem 0 3.5rem;
background: linear-gradient(180deg, #fcf8f9 0%, #fdfcfc 100%);
}
.numeri-scuola-details::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(165deg, rgba(215,50,76,.05) 0 15%, transparent 15% 100%),
linear-gradient(18deg, transparent 0 50%, rgba(215,50,76,.04) 50% 60%, transparent 60% 100%),
linear-gradient(144deg, transparent 0 68%, rgba(215,50,76,.035) 68% 79%, transparent 79% 100%),
linear-gradient(36deg, transparent 0 80%, rgba(215,50,76,.03) 80% 86%, transparent 86% 100%);
}
.numeri-scuola-details .container {
position: relative;
z-index: 1;
}
.numeri-scuola-order-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
.numeri-scuola-order {
background: #fff;
border: 1px solid #dfe5e8;
box-shadow: 0 10px 24px rgba(23, 50, 77, .08);
min-height: 100%;
display: flex;
flex-direction: column;
}
.numeri-scuola-order-header {
padding: 1rem 1.1rem 1rem;
border-bottom: 4px solid #d7324c;
}
.numeri-scuola-order-kicker {
margin: 0 0 .55rem;
color: #17324d;
font-size: .98rem;
line-height: 1.2;
font-weight: 700;
}
.numeri-scuola-order-total {
margin: 0 0 .35rem;
color: #d7324c;
font-size: 1.25rem;
line-height: 1.15;
font-weight: 700;
}
.numeri-scuola-order-meta {
color: #455b71;
font-size: 1rem;
line-height: 1.35;
font-weight: 600;
}
.numeri-scuola-order-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.numeri-scuola-place {
padding: 1rem 1.1rem;
}
.numeri-scuola-place--border {
border-top: 1px solid #e6eaed;
}
.numeri-scuola-place h2 {
margin: 0 0 .5rem;
color: #17324d;
font-size: 1rem;
line-height: 1.25;
font-weight: 700;
}
.numeri-scuola-total-line {
margin: 0;
color: #455b71;
font-size: .98rem;
line-height: 1.45;
font-weight: 600;
}
.numeri-scuola-sublist {
margin: .7rem 0 0 1.1rem;
padding: 0;
color: #455b71;
}
.numeri-scuola-sublist li {
margin: 0 0 .35rem;
line-height: 1.45;
}
@media (max-width: 991.98px) {
.numeri-scuola-summary {
grid-template-columns: 1fr 1fr;
}
.numeri-scuola-summary-item--ratio {
grid-column: 1 / -1;
align-items: center;
}
.numeri-scuola-order-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 767.98px) {
.numeri-scuola-hero-band {
padding: .9rem 0 1rem;
}
.numeri-scuola-hero h1 {
font-size: 2.15rem;
line-height: 1.08;
}
.numeri-scuola-hero-body {
padding: 1rem 0 2rem;
}
.numeri-scuola-hero-eyebrow {
font-size: .95rem;
}
.numeri-scuola-intro {
font-size: 1.05rem;
margin-bottom: 1.6rem;
}
.numeri-scuola-summary {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.numeri-scuola-summary-item {
min-height: auto;
align-items: center;
text-align: center;
}
.numeri-scuola-summary-label {
justify-content: center;
}
.numeri-scuola-summary-item--ratio {
align-items: center;
}
.numeri-scuola-summary-value {
font-size: 3.9rem;
}
.numeri-scuola-summary-badge {
width: 11rem;
height: 11rem;
}
.numeri-scuola-summary-badge-value {
font-size: 3rem;
}
.numeri-scuola-cta {
text-align: center;
}
.numeri-scuola-cta-link {
justify-content: center;
max-width: 100%;
}
.numeri-scuola-details {
padding: 2rem 0 2.5rem;
}
}
/* === MIG-2026-001 NUMERI SCUOLA START === */
.numeri-scuola-layout {
margin-bottom: 0;
}
.numeri-scuola-hero {
position: relative;
overflow: hidden;
padding: 2rem 0 2.15rem;
background: linear-gradient(135deg, #c92f4f 0%, #e63d5b 52%, #ef5a73 100%);
color: #fff;
}
.numeri-scuola-hero::before,
.numeri-scuola-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.numeri-scuola-hero::before {
background:
linear-gradient(12deg, rgba(255,255,255,.00) 0 18%, rgba(255,255,255,.10) 18% 26%, rgba(255,255,255,0) 26% 100%),
linear-gradient(-18deg, rgba(0,0,0,.00) 0 58%, rgba(0,0,0,.10) 58% 72%, rgba(0,0,0,0) 72% 100%);
}
.numeri-scuola-hero::after {
background:
linear-gradient(135deg, transparent 0 72%, rgba(255,255,255,.18) 72% 79%, transparent 79% 100%),
linear-gradient(135deg, transparent 0 80%, rgba(122,0,32,.16) 80% 86%, transparent 86% 100%);
}
.numeri-scuola-page-title {
position: relative;
z-index: 1;
margin: 0;
color: #fff;
font-weight: 700;
font-size: clamp(2.3rem, 3.9vw, 4.4rem);
line-height: 1.05;
}
.numeri-scuola-summary-band {
position: relative;
overflow: hidden;
padding: 1.95rem 0 2.25rem;
background: #f2f3f5;
}
.numeri-scuola-summary-band::before,
.numeri-scuola-summary-band::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.numeri-scuola-summary-band::before {
background:
linear-gradient(12deg, transparent 0 52%, rgba(0,0,0,.045) 52% 60%, transparent 60% 100%),
linear-gradient(-28deg, transparent 0 65%, rgba(255,255,255,.40) 65% 74%, transparent 74% 100%);
}
.numeri-scuola-summary-band::after {
background:
linear-gradient(35deg, transparent 0 42%, rgba(255,255,255,.42) 42% 58%, transparent 58% 100%),
linear-gradient(-40deg, transparent 0 70%, rgba(0,0,0,.035) 70% 78%, transparent 78% 100%);
}
.numeri-scuola-summary-band .container {
position: relative;
z-index: 1;
}
.numeri-scuola-intro {
margin: 0 0 1.2rem;
max-width: 50rem;
color: #5f7188;
font-size: 1.35rem;
line-height: 1.45;
}
.numeri-scuola-topmetrics {
display: flex;
align-items: center;
gap: 4.4rem;
flex-wrap: wrap;
}
.numeri-metric {
min-width: 11rem;
}
.numeri-metric__value {
color: #d8354f;
font-weight: 300;
line-height: .92;
letter-spacing: -0.04em;
font-size: clamp(4.9rem, 7.5vw, 7rem);
margin: 0 0 .55rem;
}
.numeri-metric__label {
display: inline-flex;
align-items: center;
gap: .55rem;
color: #d8354f;
font-weight: 700;
font-size: 1rem;
line-height: 1.2;
}
.numeri-metric__icon {
display: inline-flex;
width: 1.15rem;
height: 1.15rem;
}
.numeri-metric__icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
.numeri-metric--ratio {
margin-left: auto;
}
.numeri-metric__circle {
width: 12rem;
height: 12rem;
border-radius: 50%;
background: #d8354f;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 1rem;
}
.numeri-metric__circle-value {
font-size: clamp(3.5rem, 5.4vw, 5rem);
font-weight: 300;
line-height: .9;
letter-spacing: -0.04em;
margin-bottom: .45rem;
}
.numeri-metric__circle-label {
font-size: 1rem;
line-height: 1.18;
font-weight: 700;
max-width: 7.6rem;
}
.numeri-scuola-actions {
margin-top: 1.2rem;
}
.numeri-scuola-btn {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .8rem 1.2rem;
font-weight: 700;
text-decoration: none;
}
.numeri-scuola-orders {
position: relative;
overflow: hidden;
padding: 2.6rem 0 3.2rem;
background: linear-gradient(135deg, #d93453 0%, #e64562 42%, #d93453 100%);
}
.numeri-scuola-orders::before,
.numeri-scuola-orders::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.numeri-scuola-orders::before {
background:
linear-gradient(18deg, rgba(255,255,255,0) 0 38%, rgba(255,255,255,.09) 38% 48%, rgba(255,255,255,0) 48% 100%),
linear-gradient(-32deg, rgba(0,0,0,0) 0 52%, rgba(0,0,0,.08) 52% 63%, rgba(0,0,0,0) 63% 100%);
}
.numeri-scuola-orders::after {
background:
linear-gradient(140deg, transparent 0 72%, rgba(255,255,255,.10) 72% 83%, transparent 83% 100%),
linear-gradient(140deg, transparent 0 58%, rgba(142,10,44,.12) 58% 67%, transparent 67% 100%);
}
.numeri-scuola-orders .container {
position: relative;
z-index: 1;
}
.numeri-scuola-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.numeri-order-card {
background: #fff;
border-radius: .35rem;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,.08);
display: flex;
flex-direction: column;
height: 100%;
}
.numeri-order-card__summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.15rem 1.2rem 1rem;
border-bottom: 4px solid #d8354f;
}
.numeri-order-card__title {
color: #17324d;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: .7rem;
}
.numeri-order-card__numbers {
display: flex;
align-items: baseline;
gap: .4rem;
margin-bottom: .2rem;
flex-wrap: wrap;
}
.numeri-order-card__number {
color: #d8354f;
font-size: 3rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
}
.numeri-order-card__unit {
color: #d8354f;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.1;
}
.numeri-order-card__classes {
color: #455b74;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.2;
}
.numeri-order-card__circle {
width: 6.8rem;
height: 6.8rem;
border-radius: 50%;
background: #d8354f;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: .55rem;
flex-shrink: 0;
}
.numeri-order-card__circle-number {
font-size: 2rem;
font-weight: 700;
line-height: .95;
margin-bottom: .25rem;
letter-spacing: -0.03em;
}
.numeri-order-card__circle-label {
font-size: .72rem;
line-height: 1.1;
font-weight: 700;
max-width: 4.9rem;
}
.numeri-order-card__body {
display: flex;
flex-direction: column;
}
.numeri-place {
padding: 1rem 1.2rem 1.05rem;
border-top: 1px solid #e1e6ec;
}
.numeri-place:first-child {
border-top: 0;
}
.numeri-place__title {
margin: 0 0 .35rem;
color: #17324d;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
}
.numeri-place__totals {
margin: 0;
color: #455b74;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
}
.numeri-place__list {
margin: .65rem 0 0 1.15rem;
padding: 0;
color: #566b84;
}
.numeri-place__list li {
margin: .3rem 0;
line-height: 1.45;
}
@media (max-width: 1199.98px) {
.numeri-scuola-grid {
grid-template-columns: 1fr;
}
.numeri-order-card__summary {
align-items: center;
}
}
@media (max-width: 991.98px) {
.numeri-scuola-topmetrics {
gap: 2rem;
}
.numeri-metric--ratio {
margin-left: 0;
}
}
@media (max-width: 767.98px) {
.numeri-scuola-hero {
padding: 1.5rem 0 1.55rem;
}
.numeri-scuola-page-title {
font-size: 2.7rem;
}
.numeri-scuola-summary-band {
padding: 1.45rem 0 1.8rem;
}
.numeri-scuola-intro {
font-size: 1.08rem;
margin-bottom: 1rem;
}
.numeri-scuola-topmetrics {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.4rem;
}
.numeri-metric {
min-width: 0;
}
.numeri-metric__value {
font-size: 4.8rem;
margin-bottom: .35rem;
}
.numeri-metric__circle {
width: 10rem;
height: 10rem;
}
.numeri-metric__circle-value {
font-size: 3.6rem;
}
.numeri-scuola-actions {
text-align: center;
}
.numeri-order-card__summary {
flex-direction: column;
align-items: flex-start;
}
.numeri-order-card__ratio {
align-self: center;
}
}
/* === MIG-2026-001 NUMERI SCUOLA END === */
/* === MIG-2026-001 NUMERI SCUOLA FINAL TUNING === */
/* 1) Elimina il titoletto superfluo "La scuola in numeri" */
.numeri-scuola-kicker,
.numeri-scuola-intro .numeri-scuola-kicker {
display: none !important;
}
/* 2) Hero alto: più sottile e con pattern standard sezione Scuola */
.numeri-scuola-hero {
padding: 1.8rem 0 !important;
background:
linear-gradient(165deg, rgba(255,255,255,.08) 0 18%, transparent 18% 100%),
linear-gradient(24deg, rgba(255,255,255,.08) 0 14%, transparent 14% 100%),
linear-gradient(132deg, transparent 0 67%, rgba(255,255,255,.14) 67% 79%, transparent 79% 100%),
linear-gradient(90deg, #cf2e4f 0%, #de3a5d 52%, #eb5476 100%) !important;
}
.numeri-scuola-hero h1 {
margin: 0 !important;
color: #fff !important;
font-size: 3.05rem !important;
line-height: 1.08 !important;
font-weight: 700 !important;
}
/* 3) Fascia grigia: più compatta, più elegante e con pattern più mosso */
.numeri-scuola-intro {
padding: 1.25rem 0 1.6rem !important;
background:
linear-gradient(165deg, rgba(255,255,255,.42) 0 17%, transparent 17% 100%),
linear-gradient(26deg, rgba(255,255,255,.26) 0 18%, transparent 18% 100%),
linear-gradient(138deg, transparent 0 62%, rgba(255,255,255,.24) 62% 73%, transparent 73% 100%),
linear-gradient(12deg, transparent 0 78%, rgba(255,255,255,.18) 78% 88%, transparent 88% 100%),
#f1f2f4 !important;
}
.numeri-scuola-intro p {
margin-bottom: 1rem !important;
font-size: 1.15rem !important;
color: #53697f !important;
}
/* 4) Riavvicina e rafforza i tre numeri della fascia grigia */
.numeri-scuola-summary {
display: grid !important;
grid-template-columns: 1fr 1fr 1.1fr !important;
align-items: center !important;
gap: 1.25rem !important;
}
.numeri-scuola-summary-item {
align-self: center !important;
}
.numeri-scuola-summary-item:not(.numeri-scuola-summary-item--ratio) > :first-child {
font-size: 5.3rem !important;
line-height: .92 !important;
font-weight: 700 !important;
color: #d73252 !important;
margin: 0 0 .35rem 0 !important;
}
.numeri-scuola-summary-item:not(.numeri-scuola-summary-item--ratio) > :last-child {
display: flex !important;
align-items: center !important;
gap: .45rem !important;
font-weight: 700 !important;
color: #d73252 !important;
}
/* 5) Cerchio rosso della media: più grande, più leggibile, etichetta su una riga */
.numeri-scuola-summary-item--ratio {
justify-self: end !important;
}
.numeri-scuola-summary-item--ratio > :first-child {
width: 265px !important;
height: 265px !important;
border-radius: 50% !important;
background: #d73252 !important;
color: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
padding: 1rem !important;
}
.numeri-scuola-summary-item--ratio > :first-child > :first-child {
font-size: 5.3rem !important;
line-height: .92 !important;
font-weight: 700 !important;
margin-bottom: .35rem !important;
}
.numeri-scuola-summary-item--ratio > :first-child > :last-child {
font-size: 1rem !important;
line-height: 1.15 !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
/* 6) Pulsante blu: lasciato intenzionalmente blu */
.numeri-scuola-intro .btn,
.numeri-scuola-intro .btn-primary {
margin-top: 1rem !important;
}
/* 7) Sezione card ordini di scuola: torna al rosso mosso */
.numeri-scuola-order {
background:
linear-gradient(165deg, rgba(255,255,255,.08) 0 18%, transparent 18% 100%),
linear-gradient(28deg, rgba(255,255,255,.07) 0 13%, transparent 13% 100%),
linear-gradient(135deg, transparent 0 64%, rgba(255,255,255,.10) 64% 74%, transparent 74% 100%),
linear-gradient(92deg, #cf2e4f 0%, #de3a5d 52%, #eb5476 100%) !important;
}
/* 8) Card: numeri per ordine di scuola più evidenti */
.numeri-order-card__lead {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 1rem !important;
}
.numeri-order-card__numbers {
display: flex !important;
align-items: baseline !important;
gap: .45rem !important;
margin: .45rem 0 .15rem 0 !important;
}
.numeri-order-card__number {
font-size: 3.2rem !important;
line-height: .92 !important;
font-weight: 700 !important;
color: #d73252 !important;
}
.numeri-order-card__unit {
font-size: 1.2rem !important;
font-weight: 700 !important;
color: #d73252 !important;
}
.numeri-order-card__classes {
font-size: 1.18rem !important;
font-weight: 700 !important;
color: #455b71 !important;
}
.numeri-order-card__circle {
width: 124px !important;
height: 124px !important;
border-radius: 50% !important;
background: #d73252 !important;
color: #fff !important;
}
.numeri-order-card__circle-number {
font-size: 2.55rem !important;
line-height: .92 !important;
font-weight: 700 !important;
}
.numeri-order-card__circle-label {
font-size: .72rem !important;
line-height: 1.15 !important;
}
/* 9) Responsive */
@media (max-width: 991.98px) {
.numeri-scuola-summary {
grid-template-columns: 1fr 1fr !important;
gap: 1.2rem !important;
}
.numeri-scuola-summary-item--ratio {
grid-column: 1 / -1 !important;
justify-self: center !important;
}
}
@media (max-width: 767.98px) {
.numeri-scuola-hero {
padding: 1.35rem 0 !important;
}
.numeri-scuola-hero h1 {
font-size: 2.35rem !important;
}
.numeri-scuola-intro {
padding: 1.15rem 0 1.4rem !important;
}
.numeri-scuola-summary {
grid-template-columns: 1fr !important;
gap: 1.15rem !important;
}
.numeri-scuola-summary-item,
.numeri-scuola-summary-item--ratio {
justify-self: center !important;
text-align: center !important;
}
.numeri-scuola-summary-item:not(.numeri-scuola-summary-item--ratio) > :first-child,
.numeri-scuola-summary-item--ratio > :first-child > :first-child {
font-size: 4.25rem !important;
}
.numeri-scuola-summary-item:not(.numeri-scuola-summary-item--ratio) > :last-child {
justify-content: center !important;
}
.numeri-scuola-summary-item--ratio > :first-child {
width: 235px !important;
height: 235px !important;
}
.numeri-scuola-summary-item--ratio > :first-child > :last-child {
font-size: .92rem !important;
}
.numeri-order-card__number {
font-size: 2.7rem !important;
}
.numeri-order-card__unit {
font-size: 1.05rem !important;
}
.numeri-order-card__classes {
font-size: 1.08rem !important;
}
}
/* === /MIG-2026-001 NUMERI SCUOLA FINAL TUNING === */
/* ==========================================================
MIG-2026-001
NUMERI SCUOLA - ROLLBACK CARD + CENTRAL BAND ONLY
========================================================== */
/* ----------------------------------------------------------
1. ELIMINA DEFINITIVAMENTE IL TITOLETTO
generato da una precedente regola ::before
---------------------------------------------------------- */
.numeri-scuola-intro::before {
content: none !important;
display: none !important;
}
/* ----------------------------------------------------------
2. FASCIA CENTRALE GRIGIA
Da qui in poi modifichiamo SOLO il riepilogo istituto
---------------------------------------------------------- */
.numeri-scuola-summary-band {
position: relative !important;
overflow: hidden !important;
padding: 1.45rem 0 1.75rem !important;
background: #f2f3f5 !important;
}
.numeri-scuola-summary-band::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background:
linear-gradient(
12deg,
transparent 0 50%,
rgba(0,0,0,.045) 50% 58%,
transparent 58% 100%
),
linear-gradient(
-28deg,
transparent 0 64%,
rgba(255,255,255,.48) 64% 74%,
transparent 74% 100%
) !important;
}
.numeri-scuola-summary-band::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background:
linear-gradient(
36deg,
transparent 0 41%,
rgba(255,255,255,.38) 41% 57%,
transparent 57% 100%
),
linear-gradient(
-40deg,
transparent 0 72%,
rgba(0,0,0,.03) 72% 79%,
transparent 79% 100%
) !important;
}
.numeri-scuola-summary-band .container {
position: relative !important;
z-index: 1 !important;
}
/* Frase introduttiva: unica intestazione della fascia */
.numeri-scuola-summary-band .numeri-scuola-intro {
display: block !important;
max-width: 52rem !important;
margin: 0 0 1rem !important;
padding: 0 !important;
background: none !important;
color: #53697f !important;
font-size: 1.15rem !important;
line-height: 1.45 !important;
}
/* ----------------------------------------------------------
3. TRE DATI GENERALI ISTITUTO
---------------------------------------------------------- */
.numeri-scuola-topmetrics {
display: grid !important;
grid-template-columns: 1fr 1fr 1.25fr !important;
align-items: center !important;
column-gap: 2.3rem !important;
row-gap: 1rem !important;
margin: 0 !important;
}
.numeri-metric {
min-width: 0 !important;
}
.numeri-metric__value {
margin: 0 0 .45rem !important;
color: #d8354f !important;
font-size: clamp(5.4rem, 7.5vw, 7rem) !important;
font-weight: 300 !important;
line-height: .88 !important;
letter-spacing: -.04em !important;
}
.numeri-metric__label {
display: inline-flex !important;
align-items: center !important;
gap: .5rem !important;
color: #d8354f !important;
font-size: 1rem !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
/* Media: stessa forza visiva degli altri numeri */
.numeri-metric--ratio {
margin-left: 0 !important;
justify-self: end !important;
}
.numeri-metric__circle {
width: 15rem !important;
height: 15rem !important;
padding: 1.15rem !important;
border-radius: 50% !important;
background: #d8354f !important;
}
.numeri-metric__circle-value {
margin: 0 0 .55rem !important;
color: #fff !important;
font-size: clamp(5.4rem, 7.5vw, 7rem) !important;
font-weight: 300 !important;
line-height: .88 !important;
letter-spacing: -.04em !important;
}
.numeri-metric__circle-label {
max-width: none !important;
color: #fff !important;
font-size: .98rem !important;
line-height: 1.15 !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
/* Pulsante: resta blu e nella posizione attuale */
.numeri-scuola-actions {
margin-top: .9rem !important;
}
/* ----------------------------------------------------------
4. ROLLBACK CARD ORDINI DI SCUOLA
Ripristino dello stato precedente alla regressione.
---------------------------------------------------------- */
/* La SEZIONE resta rossa geometrica */
.numeri-scuola-orders {
position: relative !important;
overflow: hidden !important;
padding: 2.6rem 0 3.2rem !important;
background:
linear-gradient(
135deg,
#d93453 0%,
#e64562 42%,
#d93453 100%
) !important;
}
/* La CARD torna bianca */
.numeri-scuola-order,
.numeri-order-card {
background: #fff !important;
}
/* Annulla il flex erroneamente aggiunto al blocco sinistro */
.numeri-order-card__lead {
display: block !important;
}
/* Ripristino intestazione card */
.numeri-order-card__summary {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 1rem !important;
padding: 1.15rem 1.2rem 1rem !important;
border-bottom: 4px solid #d8354f !important;
}
/* Ripristino numero alunni */
.numeri-order-card__numbers {
display: flex !important;
align-items: baseline !important;
gap: .4rem !important;
margin: 0 0 .2rem !important;
flex-wrap: wrap !important;
}
.numeri-order-card__number {
color: #d8354f !important;
font-size: 3rem !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -.03em !important;
}
.numeri-order-card__unit {
color: #d8354f !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
line-height: 1.1 !important;
}
.numeri-order-card__classes {
color: #455b74 !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
/* Ripristino cerchietto media della card */
.numeri-order-card__circle {
width: 6.8rem !important;
height: 6.8rem !important;
padding: .55rem !important;
border-radius: 50% !important;
background: #d8354f !important;
}
.numeri-order-card__circle-number {
font-size: 2rem !important;
font-weight: 700 !important;
line-height: .95 !important;
margin-bottom: .25rem !important;
}
.numeri-order-card__circle-label {
max-width: 4.9rem !important;
font-size: .72rem !important;
line-height: 1.1 !important;
font-weight: 700 !important;
}
/* ----------------------------------------------------------
5. MOBILE
---------------------------------------------------------- */
@media (max-width: 767.98px) {
.numeri-scuola-summary-band {
padding: 1.25rem 0 1.6rem !important;
}
.numeri-scuola-summary-band .numeri-scuola-intro {
margin-bottom: 1.2rem !important;
font-size: 1.05rem !important;
}
.numeri-scuola-topmetrics {
grid-template-columns: 1fr !important;
gap: 1.35rem !important;
text-align: center !important;
}
.numeri-metric {
justify-self: center !important;
}
.numeri-metric__label {
justify-content: center !important;
}
.numeri-metric__value {
font-size: 4.8rem !important;
}
.numeri-metric--ratio {
justify-self: center !important;
}
.numeri-metric__circle {
width: 12.5rem !important;
height: 12.5rem !important;
}
.numeri-metric__circle-value {
font-size: 4.8rem !important;
}
.numeri-metric__circle-label {
font-size: .88rem !important;
white-space: nowrap !important;
}
/* Card: mantiene la struttura precedente anche mobile */
.numeri-order-card__summary {
flex-direction: row !important;
align-items: flex-start !important;
}
.numeri-order-card__ratio {
align-self: auto !important;
}
}
/* === /MIG-2026-001 NUMERI SCUOLA CENTRAL ONLY === */
/* ==========================================================
MIG-2026-001
NUMERI SCUOLA - HERO pattern standard sezione Scuola
========================================================== */
.numeri-scuola-hero {
position: relative !important;
overflow: hidden !important;
padding: 3rem 0 2.8rem !important;
background: linear-gradient(90deg, #cf2e4f 0%, #e63f61 100%) !important;
}
.numeri-scuola-hero::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background:
linear-gradient(
12deg,
transparent 0 44%,
rgba(255,255,255,.10) 44% 54%,
transparent 54% 100%
),
linear-gradient(
-36deg,
transparent 0 68%,
rgba(255,255,255,.12) 68% 78%,
transparent 78% 100%
),
linear-gradient(
28deg,
transparent 0 18%,
rgba(0,0,0,.08) 18% 31%,
transparent 31% 100%
) !important;
}
.numeri-scuola-hero::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background:
linear-gradient(
-10deg,
transparent 0 58%,
rgba(255,255,255,.08) 58% 65%,
transparent 65% 100%
),
linear-gradient(
40deg,
transparent 0 72%,
rgba(0,0,0,.06) 72% 82%,
transparent 82% 100%
) !important;
}
.numeri-scuola-hero .container {
position: relative !important;
z-index: 1 !important;
}
.numeri-scuola-hero h1,
.numeri-scuola-hero .page-title,
.numeri-scuola-hero .numeri-scuola-title {
color: #fff !important;
}
/* === /MIG-2026-001 NUMERI SCUOLA HERO SCHOOL PATTERN === */
/* ==========================================================
MIG-2026-001
I numeri della scuola - uso hero standard sezione Scuola
========================================================== */
.numeri-scuola-school-hero {
min-height: 0 !important;
}
.numeri-scuola-school-hero .hero-title h1 {
margin: 0 !important;
padding: 0 !important;
color: #fff !important;
font-weight: 700 !important;
}
@media (max-width: 767.98px) {
.numeri-scuola-school-hero {
padding: 2rem 0 !important;
}
}
/* ==========================================================
MIG-2026-001 - PANORAMICA SCUOLA START
========================================================== */
.panoramica-scuola {
position: relative;
color: #17324d;
overflow-x: clip;
}
/*
* Le sezioni devono occupare l'intera larghezza viewport
* anche se l'override articolo viene renderizzato dentro
* il container principale del template.
*/
.panoramica-scuola > section {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* ----------------------------------------------------------
1. HERO ISTITUZIONALE
---------------------------------------------------------- */
.panoramica-scuola-hero {
padding: 3.5rem 0;
background: #fff;
}
.panoramica-scuola-hero-copy {
max-width: 28rem;
}
.panoramica-scuola-kicker {
margin: 0 0 .45rem;
color: #455b71;
font-size: 1rem;
font-weight: 600;
letter-spacing: .025em;
text-transform: uppercase;
}
.panoramica-scuola-hero h1 {
margin: 0;
color: #17324d;
font-size: clamp(2rem, 3.1vw, 3.25rem);
line-height: 1.08;
font-weight: 700;
overflow-wrap: normal;
word-break: normal;
}
.panoramica-scuola-city {
margin: .8rem 0 0;
color: #d32f46;
font-size: 1.45rem;
line-height: 1.2;
font-weight: 700;
}
/* Carousel hero: nessun crop delle grafiche 1400x550 */
.panoramica-scuola-carousel {
width: 100%;
}
.panoramica-scuola-slide {
width: 100%;
overflow: hidden;
border-radius: .45rem;
background: #fff;
}
.panoramica-scuola-slide img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
object-position: center;
}
.panoramica-scuola-carousel.owl-theme .owl-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: .7rem;
}
.panoramica-scuola-carousel.owl-theme .owl-nav button.owl-prev,
.panoramica-scuola-carousel.owl-theme .owl-nav button.owl-next {
display: inline-flex;
width: 2.75rem;
height: 2.75rem;
align-items: center;
justify-content: center;
margin: 0;
border: 2px solid #08783f;
border-radius: 50%;
background: #fff;
color: #08783f;
font-size: 2rem;
line-height: 1;
}
.panoramica-scuola-carousel.owl-theme .owl-nav button.owl-prev:hover,
.panoramica-scuola-carousel.owl-theme .owl-nav button.owl-next:hover,
.panoramica-scuola-carousel.owl-theme .owl-nav button.owl-prev:focus,
.panoramica-scuola-carousel.owl-theme .owl-nav button.owl-next:focus {
background: #08783f;
color: #fff;
}
.panoramica-scuola-carousel.owl-theme .owl-dots {
position: absolute;
left: 50%;
bottom: .75rem;
transform: translateX(-50%);
margin: 0;
padding: .15rem .4rem;
border-radius: 1rem;
background: rgba(255,255,255,.82);
}
.panoramica-scuola-carousel.owl-theme .owl-dots .owl-dot span {
width: .7rem;
height: .7rem;
margin: .25rem;
background: #8b98a5;
}
.panoramica-scuola-carousel.owl-theme .owl-dots .owl-dot.active span {
background: #08783f;
}
/* ----------------------------------------------------------
2. MANIFESTO
---------------------------------------------------------- */
.panoramica-scuola-manifesto {
position: relative;
overflow: hidden;
padding: 4.5rem 0;
color: #fff;
}
.panoramica-scuola-manifesto::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .7;
background:
linear-gradient(
135deg,
transparent 0 62%,
rgba(255,255,255,.08) 62% 72%,
transparent 72% 100%
),
linear-gradient(
35deg,
transparent 0 72%,
rgba(255,255,255,.06) 72% 83%,
transparent 83% 100%
);
}
.panoramica-scuola-manifesto .container {
position: relative;
z-index: 1;
}
.panoramica-scuola-manifesto-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1.4rem;
align-items: start;
max-width: 66rem;
margin: 0 auto;
}
.panoramica-scuola-quote-mark {
margin-top: -.65rem;
color: rgba(255,255,255,.9);
font-family: Georgia, "Times New Roman", serif;
font-size: 6rem;
line-height: .8;
}
.panoramica-scuola-manifesto blockquote {
margin: 0;
padding: 0;
border: 0;
color: #fff;
font-size: clamp(1.45rem, 2.25vw, 2.15rem);
line-height: 1.45;
font-weight: 600;
}
/* ----------------------------------------------------------
TITOLI E CTA CONDIVISI
---------------------------------------------------------- */
.panoramica-scuola-section-heading {
max-width: 50rem;
margin: 0 auto 2.5rem;
text-align: center;
}
.panoramica-scuola-section-heading h2 {
margin: 0 0 .65rem;
color: #17324d;
font-size: clamp(2rem, 3vw, 2.7rem);
line-height: 1.15;
font-weight: 700;
}
.panoramica-scuola-section-heading p {
margin: 0;
color: #455b71;
font-size: 1.075rem;
line-height: 1.6;
}
.panoramica-scuola-section-heading--light h2,
.panoramica-scuola-section-heading--light p {
color: #fff;
}
.panoramica-scuola-section-cta {
margin-top: 2.5rem;
text-align: center;
}
/* ----------------------------------------------------------
3. ORGANIZZAZIONE
---------------------------------------------------------- */
.panoramica-scuola-organizzazione {
position: relative;
overflow: hidden;
padding: 4.5rem 0 5rem;
background: #f6f7f7;
}
.panoramica-scuola-organizzazione::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .7;
background:
linear-gradient(
135deg,
transparent 0 74%,
rgba(23,50,77,.035) 74% 80%,
transparent 80% 100%
),
linear-gradient(
45deg,
transparent 0 84%,
rgba(211,47,70,.04) 84% 89%,
transparent 89% 100%
);
}
.panoramica-scuola-organizzazione .container {
position: relative;
z-index: 1;
}
.panoramica-scuola-org-card {
display: flex;
height: 100%;
min-height: 18rem;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.6rem 1.35rem;
border: 1px solid #dfe3e7;
border-radius: .6rem;
background: #fff;
color: #17324d;
text-align: center;
text-decoration: none;
box-shadow: 0 .2rem .75rem rgba(23,50,77,.07);
transition:
transform .18s ease,
box-shadow .18s ease;
}
.panoramica-scuola-org-card:hover,
.panoramica-scuola-org-card:focus {
color: #17324d;
text-decoration: none;
transform: translateY(-3px);
box-shadow: 0 .5rem 1.1rem rgba(23,50,77,.13);
}
.panoramica-scuola-org-image {
display: flex;
width: 9.5rem;
height: 9.5rem;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
}
.panoramica-scuola-org-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.panoramica-scuola-org-card h3 {
margin: 0;
color: #17324d;
font-size: 1.25rem;
line-height: 1.3;
font-weight: 700;
}
/* ----------------------------------------------------------
4. LE NOSTRE SCUOLE
---------------------------------------------------------- */
.panoramica-scuola-buildings {
position: relative;
overflow: hidden;
padding: 4.5rem 0 5rem;
}
.panoramica-scuola-buildings::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .55;
background:
linear-gradient(
145deg,
transparent 0 66%,
rgba(255,255,255,.08) 66% 75%,
transparent 75% 100%
),
linear-gradient(
28deg,
transparent 0 82%,
rgba(255,255,255,.07) 82% 90%,
transparent 90% 100%
);
}
.panoramica-scuola-buildings .container {
position: relative;
z-index: 1;
}
.panoramica-scuola-building-card {
height: 100%;
overflow: hidden;
border-radius: .6rem;
background: #fff;
box-shadow: 0 .35rem 1rem rgba(58,0,12,.17);
}
.panoramica-scuola-building-card > img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.panoramica-scuola-building-body {
padding: 1.5rem 1.5rem 1.75rem;
}
.panoramica-scuola-building-body h3 {
margin: 0 0 1rem;
color: #17324d;
font-size: 1.4rem;
line-height: 1.25;
font-weight: 700;
}
.panoramica-scuola-building-body ul {
margin: 0;
padding-left: 1.3rem;
color: #455b71;
}
.panoramica-scuola-building-body li + li {
margin-top: .55rem;
}
.panoramica-scuola-buildings .btn-light {
color: #ab2b3e;
font-weight: 700;
}
/* ----------------------------------------------------------
5. I NUMERI DELLA SCUOLA
---------------------------------------------------------- */
.panoramica-scuola-numeri {
position: relative;
overflow: hidden;
padding: 4.5rem 0 5rem;
background: #f6f7f7;
}
.panoramica-scuola-numeri::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .6;
background:
linear-gradient(
135deg,
transparent 0 68%,
rgba(23,50,77,.035) 68% 74%,
transparent 74% 100%
),
linear-gradient(
45deg,
transparent 0 78%,
rgba(211,47,70,.04) 78% 84%,
transparent 84% 100%
);
}
.panoramica-scuola-numeri .container {
position: relative;
z-index: 1;
}
.panoramica-scuola-numeri-grid {
max-width: 56rem;
margin-right: auto;
margin-left: auto;
}
.panoramica-scuola-number {
text-align: center;
}
.panoramica-scuola-number strong {
display: block;
color: #17324d;
font-size: clamp(3rem, 6vw, 4.6rem);
line-height: 1;
font-weight: 700;
}
.panoramica-scuola-number span {
display: block;
margin-top: .65rem;
color: #455b71;
font-size: 1.075rem;
font-weight: 600;
}
.panoramica-scuola-average {
display: flex;
width: 10.5rem;
height: 10.5rem;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto;
border-radius: 50%;
background: #d32f46;
color: #fff;
text-align: center;
}
.panoramica-scuola-average strong {
display: block;
color: #fff;
font-size: 2.8rem;
line-height: 1;
font-weight: 700;
}
.panoramica-scuola-average span {
display: block;
max-width: 8rem;
margin-top: .45rem;
color: #fff;
font-size: .9rem;
line-height: 1.2;
font-weight: 600;
}
/* ----------------------------------------------------------
RESPONSIVE
---------------------------------------------------------- */
@media (max-width: 991.98px) {
.panoramica-scuola-hero {
padding: 2.75rem 0 3.25rem;
}
.panoramica-scuola-hero-copy {
max-width: none;
text-align: center;
}
.panoramica-scuola-organizzazione,
.panoramica-scuola-buildings,
.panoramica-scuola-numeri {
padding: 3.75rem 0 4rem;
}
}
@media (max-width: 767.98px) {
.panoramica-scuola-hero {
padding: 2.25rem 0 2.75rem;
}
.panoramica-scuola-kicker {
font-size: .85rem;
}
.panoramica-scuola-hero h1 {
font-size: 2rem;
}
.panoramica-scuola-city {
font-size: 1.25rem;
}
.panoramica-scuola-slide {
border-radius: .3rem;
}
.panoramica-scuola-carousel.owl-theme .owl-nav button.owl-prev,
.panoramica-scuola-carousel.owl-theme .owl-nav button.owl-next {
width: 2.4rem;
height: 2.4rem;
font-size: 1.7rem;
}
.panoramica-scuola-manifesto {
padding: 3.4rem 0;
}
.panoramica-scuola-manifesto-inner {
grid-template-columns: 1fr;
gap: .25rem;
}
.panoramica-scuola-quote-mark {
margin: 0;
font-size: 4.2rem;
}
.panoramica-scuola-manifesto blockquote {
font-size: 1.35rem;
line-height: 1.5;
}
.panoramica-scuola-organizzazione,
.panoramica-scuola-buildings,
.panoramica-scuola-numeri {
padding: 3.25rem 0 3.5rem;
}
.panoramica-scuola-section-heading {
margin-bottom: 2rem;
}
.panoramica-scuola-org-card {
min-height: 0;
padding: 1.4rem 1.2rem;
}
.panoramica-scuola-org-image {
width: 8rem;
height: 8rem;
}
.panoramica-scuola-numeri-grid {
row-gap: 2.5rem !important;
}
.panoramica-scuola-average {
width: 9.5rem;
height: 9.5rem;
}
}
/* ==========================================================
MIG-2026-001 - PANORAMICA SCUOLA END
========================================================== */
/* ==========================================================
MIG-2026-001 - PANORAMICA SCUOLA TUNING 02 START
Manifesto + Organizzazione compatta
========================================================== */
/* ----------------------------------------------------------
MANIFESTO
Virgoletta finale separata e speculare a quella iniziale
---------------------------------------------------------- */
.panoramica-scuola-manifesto-inner {
gap: .65rem 1.2rem;
}
.panoramica-scuola-quote-mark {
margin-top: -.25rem;
font-family: Georgia, "Times New Roman", serif;
font-size: 6rem;
line-height: .7;
}
.panoramica-scuola-quote-close {
display: block;
width: 100%;
margin-top: -.15rem;
color: rgba(255,255,255,.92);
font-family: Georgia, "Times New Roman", serif;
font-size: 6rem;
font-weight: 400;
line-height: .7;
text-align: right;
}
/* ----------------------------------------------------------
ORGANIZZAZIONE
Riduzione generale dell'altezza della sezione
---------------------------------------------------------- */
.panoramica-scuola-organizzazione {
padding-top: 2.25rem;
padding-bottom: 2.35rem;
}
.panoramica-scuola-organizzazione
.panoramica-scuola-section-heading {
margin-bottom: 1.35rem;
}
.panoramica-scuola-organizzazione
.panoramica-scuola-section-heading h2 {
margin-bottom: .35rem;
}
.panoramica-scuola-organizzazione
.panoramica-scuola-section-heading p {
line-height: 1.4;
}
/* ----------------------------------------------------------
CARD ORIZZONTALI
---------------------------------------------------------- */
.panoramica-scuola-org-card {
display: flex;
min-height: 0;
height: 6.6rem;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: .9rem;
padding: .75rem .9rem;
text-align: left;
}
/* Cerchio rosso a sinistra */
.panoramica-scuola-org-image {
display: flex;
flex: 0 0 5rem;
width: 5rem;
height: 5rem;
align-items: center;
justify-content: center;
margin: 0;
}
.panoramica-scuola-org-image img {
display: block;
width: 5rem;
height: 5rem;
object-fit: contain;
}
/* Titolo a destra, centrato verticalmente */
.panoramica-scuola-org-card h3 {
display: flex;
flex: 1 1 auto;
min-width: 0;
min-height: 100%;
align-items: center;
margin: 0;
color: #17324d;
font-size: 1rem;
line-height: 1.18;
font-weight: 700;
text-align: left;
}
/* CTA più vicina alle card */
.panoramica-scuola-organizzazione
.panoramica-scuola-section-cta {
margin-top: 1.25rem;
}
/* ----------------------------------------------------------
DESKTOP >= 992
Cinque card sulla stessa riga
---------------------------------------------------------- */
@media (min-width: 992px) {
.panoramica-scuola-organizzazione .row {
--bs-gutter-x: .8rem;
--bs-gutter-y: .8rem;
}
.panoramica-scuola-organizzazione
.row > .col-lg-4 {
flex: 0 0 20%;
width: 20%;
max-width: 20%;
}
.panoramica-scuola-org-card {
height: 6.4rem;
gap: .75rem;
padding: .7rem .75rem;
}
.panoramica-scuola-org-image,
.panoramica-scuola-org-image img {
flex-basis: 4.65rem;
width: 4.65rem;
height: 4.65rem;
}
.panoramica-scuola-org-card h3 {
font-size: .94rem;
}
}
/* ----------------------------------------------------------
MOBILE
Una card per riga, molto più bassa
---------------------------------------------------------- */
@media (max-width: 767.98px) {
.panoramica-scuola-manifesto {
padding-top: 2.7rem;
padding-bottom: 2.7rem;
}
.panoramica-scuola-manifesto-inner {
gap: .15rem;
}
.panoramica-scuola-quote-mark {
margin: 0 0 -.4rem;
font-size: 4.2rem;
line-height: .7;
}
.panoramica-scuola-quote-close {
margin-top: -.15rem;
font-size: 4.2rem;
line-height: .7;
}
.panoramica-scuola-organizzazione {
padding-top: 2.25rem;
padding-bottom: 2.4rem;
}
.panoramica-scuola-organizzazione
.panoramica-scuola-section-heading {
margin-bottom: 1.3rem;
}
.panoramica-scuola-organizzazione .row {
--bs-gutter-y: .65rem;
}
.panoramica-scuola-org-card {
height: 5.75rem;
min-height: 5.75rem;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 1rem;
padding: .55rem 1rem;
text-align: left;
}
.panoramica-scuola-org-image {
flex: 0 0 4.55rem;
width: 4.55rem;
height: 4.55rem;
margin: 0;
}
.panoramica-scuola-org-image img {
width: 4.55rem;
height: 4.55rem;
}
.panoramica-scuola-org-card h3 {
display: flex;
flex: 1 1 auto;
align-items: center;
min-height: 0;
margin: 0;
font-size: 1.05rem;
line-height: 1.18;
text-align: left;
}
.panoramica-scuola-organizzazione
.panoramica-scuola-section-cta {
margin-top: 1.25rem;
}
}
/* ==========================================================
MIG-2026-001 - PANORAMICA SCUOLA TUNING 02 END
========================================================== */
/* ==========================================================
MIG-2026-001 - PANORAMICA SCUOLA TUNING 03 START
Manifesto + chevron + indirizzi sedi
========================================================== */
/* ----------------------------------------------------------
MANIFESTO
Equilibrio verticale e virgoletta finale
---------------------------------------------------------- */
.panoramica-scuola-manifesto {
padding-top: 3.8rem;
padding-bottom: 3.8rem;
}
.panoramica-scuola-quote-close {
margin-top: .45rem;
}
/* ----------------------------------------------------------
ORGANIZZAZIONE
Piccolo chevron a destra della card
---------------------------------------------------------- */
.panoramica-scuola-org-card {
position: relative;
padding-right: 2rem;
}
.panoramica-scuola-org-card::after {
content: "›";
position: absolute;
top: 50%;
right: .8rem;
transform: translateY(-52%);
color: #17324d;
font-size: 1.65rem;
line-height: 1;
font-weight: 400;
opacity: .8;
}
.panoramica-scuola-org-card:hover::after,
.panoramica-scuola-org-card:focus::after {
color: #005ea8;
opacity: 1;
}
/* ----------------------------------------------------------
LE NOSTRE SCUOLE
Indirizzo chiaramente visibile
---------------------------------------------------------- */
.panoramica-scuola-building-address {
display: block !important;
margin: .15rem 0 1rem !important;
color: #455b71 !important;
font-size: .95rem !important;
line-height: 1.35 !important;
font-weight: 600 !important;
}
/* ----------------------------------------------------------
Link alle singole scuole
---------------------------------------------------------- */
.panoramica-scuola-building-body ul {
list-style: none;
padding-left: 0;
}
.panoramica-scuola-building-body li {
position: relative;
margin: 0;
}
.panoramica-scuola-building-body li + li {
margin-top: .5rem;
}
.panoramica-scuola-building-body li a {
position: relative;
display: block;
padding-right: 1.35rem;
color: #455b71;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
line-height: 1.4;
}
.panoramica-scuola-building-body li a::after {
content: "›";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-52%);
color: #17324d;
font-size: 1.35rem;
line-height: 1;
text-decoration: none;
}
.panoramica-scuola-building-body li a:hover,
.panoramica-scuola-building-body li a:focus {
color: #005ea8;
}
.panoramica-scuola-building-body li a:hover::after,
.panoramica-scuola-building-body li a:focus::after {
color: #005ea8;
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 767.98px) {
.panoramica-scuola-manifesto {
padding-top: 3rem;
padding-bottom: 3rem;
}
/*
* Manteniamo la virgoletta iniziale vicina al testo,
* ma diamo alla chiusura un respiro equivalente.
*/
.panoramica-scuola-quote-mark {
margin-bottom: -.1rem;
}
.panoramica-scuola-quote-close {
margin-top: .65rem;
}
.panoramica-scuola-org-card {
padding-right: 2.4rem;
}
.panoramica-scuola-org-card::after {
right: 1rem;
font-size: 1.7rem;
}
.panoramica-scuola-building-address {
margin-bottom: 1.1rem !important;
font-size: .93rem !important;
}
}
/* ==========================================================
MIG-2026-001 - PANORAMICA SCUOLA TUNING 03 END
========================================================== */
/* ==========================================================
MIG-2026-001 NUMERI MICROFIX CTA START
========================================================== */
.numeri-scuola-orders .numeri-scuola-actions--orders {
margin-top: 2.25rem;
text-align: center;
}
@media (max-width: 767.98px) {
.numeri-scuola-orders .numeri-scuola-actions--orders {
margin-top: 1.75rem;
}
}
/* ==========================================================
MIG-2026-001 NUMERI MICROFIX CTA END
========================================================== */
/* ==========================================================
MIG-2026-001 PANORAMICA NUMERI RED START
========================================================== */
.panoramica-scuola-numbers .numeri-metric:not(.numeri-metric--ratio)
.numeri-metric__value,
.panoramica-scuola-numbers .numeri-metric:not(.numeri-metric--ratio)
.numeri-metric__label,
.panoramica-scuola-numbers .numeri-metric:not(.numeri-metric--ratio)
.numeri-metric__icon,
.panoramica-scuola-numbers .numeri-metric:not(.numeri-metric--ratio)
.numeri-metric__icon svg {
color: #d92d48;
fill: #d92d48;
}
/* ==========================================================
MIG-2026-001 PANORAMICA NUMERI RED END
========================================================== */
/* ==========================================================
MIG-2026-001 PANORAMICA NUMERI RED FIX START
========================================================== */
.panoramica-scuola-numeri .panoramica-scuola-number strong,
.panoramica-scuola-numeri .panoramica-scuola-number span {
color: #d92d48;
}
/* ==========================================================
MIG-2026-001 PANORAMICA NUMERI RED FIX END
========================================================== */
/* ==========================================================
MIG-2026-001 PANORAMICA A11Y RED START
Contrasto WCAG - numeri e relative etichette
========================================================== */
.panoramica-scuola-numeri .panoramica-scuola-number strong,
.panoramica-scuola-numeri .panoramica-scuola-number span {
color: #c32642;
}
/* ==========================================================
MIG-2026-001 PANORAMICA A11Y RED END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 START
Hero istituzionale + carousel sedi
========================================================== */
.home-satta {
position: relative;
overflow-x: clip;
color: #17324d;
}
.home-satta > section {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* ----------------------------------------------------------
HERO
---------------------------------------------------------- */
.home-satta-hero {
padding: 0;
background: #fff;
}
.home-satta-hero > .container {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.home-satta-hero .row {
margin: 0;
}
/* Parte sinistra: identita istituzionale */
.home-satta-hero-copy-column {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(
to right,
#ab2b3e 0%,
#f83e5a 100%
);
color: #fff;
}
.home-satta-hero-copy-column::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .7;
background:
linear-gradient(
135deg,
transparent 0 62%,
rgba(255,255,255,.08) 62% 72%,
transparent 72% 100%
),
linear-gradient(
35deg,
transparent 0 72%,
rgba(255,255,255,.06) 72% 83%,
transparent 83% 100%
);
}
.home-satta-hero-copy {
position: relative;
z-index: 1;
width: 100%;
max-width: 31rem;
margin-left: auto;
padding: 2.25rem 2.4rem 2.25rem max(2rem, calc((100vw - 1320px) / 2));
}
.home-satta-kicker {
margin: 0 0 .4rem;
color: #fff;
font-size: .95rem;
line-height: 1.25;
font-weight: 600;
letter-spacing: .025em;
text-transform: uppercase;
}
.home-satta-hero h1 {
margin: 0;
color: #fff;
font-size: clamp(2rem, 3vw, 3.15rem);
line-height: 1.06;
font-weight: 700;
overflow-wrap: normal;
word-break: normal;
}
.home-satta-city {
margin: .7rem 0 0;
color: #fff;
font-size: 1.35rem;
line-height: 1.2;
font-weight: 700;
}
/* Parte destra: carousel */
.home-satta-hero-carousel-column {
position: relative;
min-width: 0;
background: #fff;
}
.home-satta-hero-carousel {
width: 100%;
}
.home-satta-hero-slide {
width: 100%;
overflow: hidden;
background: #fff;
}
.home-satta-hero-slide img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
object-position: center;
}
/* Navigazione carousel */
.home-satta-hero-carousel.owl-theme .owl-nav {
position: absolute;
inset: 50% 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0 .8rem;
transform: translateY(-50%);
pointer-events: none;
}
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-prev,
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-next {
display: inline-flex;
width: 2.75rem;
height: 2.75rem;
align-items: center;
justify-content: center;
margin: 0;
border: 2px solid #08783f;
border-radius: 50%;
background: rgba(255,255,255,.94);
color: #08783f;
font-size: 2rem;
line-height: 1;
pointer-events: auto;
}
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-prev:hover,
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-next:hover,
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-prev:focus,
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-next:focus {
background: #08783f;
color: #fff;
}
.home-satta-hero-carousel.owl-theme .owl-dots {
position: absolute;
left: 50%;
bottom: .65rem;
transform: translateX(-50%);
margin: 0;
padding: .12rem .4rem;
border-radius: 1rem;
background: rgba(255,255,255,.86);
}
.home-satta-hero-carousel.owl-theme .owl-dots .owl-dot span {
width: .7rem;
height: .7rem;
margin: .25rem;
background: #8b98a5;
}
.home-satta-hero-carousel.owl-theme .owl-dots .owl-dot.active span {
background: #08783f;
}
/*
* Il controllo Play/Pausa e gia presente nel markup,
* ma resta nascosto durante il primo pass statico.
*/
.home-satta-hero-player {
display: none;
}
/* ----------------------------------------------------------
RESPONSIVE
---------------------------------------------------------- */
@media (max-width: 991.98px) {
.home-satta-hero-copy {
max-width: none;
margin: 0;
padding: 1.8rem 2rem;
text-align: center;
}
.home-satta-hero h1 {
font-size: clamp(2rem, 7vw, 2.75rem);
}
}
@media (max-width: 767.98px) {
.home-satta-hero-copy {
padding: 1.45rem 1.25rem 1.55rem;
}
.home-satta-kicker {
font-size: .85rem;
}
.home-satta-hero h1 {
font-size: 2rem;
}
.home-satta-city {
margin-top: .5rem;
font-size: 1.2rem;
}
.home-satta-hero-carousel.owl-theme .owl-nav {
padding: 0 .45rem;
}
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-prev,
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-next {
width: 2.75rem;
height: 2.75rem;
font-size: 1.75rem;
}
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TUNING 01 START
Pattern Scuola + XL title + hero dots
========================================================== */
/* ----------------------------------------------------------
Pattern standard sezione Scuola
Identico alla grammatica validata sul sito
---------------------------------------------------------- */
.home-satta-hero-copy-column {
position: relative;
overflow: hidden;
background:
linear-gradient(
90deg,
#cf2e4f 0%,
#e63f61 100%
);
}
/* Sostituisce l'overlay provvisorio del primo pass */
.home-satta-hero-copy-column::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(
12deg,
transparent 0 44%,
rgba(255,255,255,.10) 44% 54%,
transparent 54% 100%
),
linear-gradient(
-36deg,
transparent 0 68%,
rgba(255,255,255,.12) 68% 78%,
transparent 78% 100%
),
linear-gradient(
28deg,
transparent 0 18%,
rgba(0,0,0,.08) 18% 31%,
transparent 31% 100%
);
}
.home-satta-hero-copy-column::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 1;
background:
linear-gradient(
-10deg,
transparent 0 58%,
rgba(255,255,255,.08) 58% 65%,
transparent 65% 100%
),
linear-gradient(
40deg,
transparent 0 72%,
rgba(0,0,0,.06) 72% 82%,
transparent 82% 100%
);
}
/* ----------------------------------------------------------
Titolo stabile anche su viewport extra-large
---------------------------------------------------------- */
.home-satta-hero-copy {
position: relative;
z-index: 1;
width: 100%;
max-width: none;
margin: 0;
padding:
2.25rem
clamp(1.5rem, 2.5vw, 3rem);
}
.home-satta-hero h1 {
max-width: 100%;
}
/* ----------------------------------------------------------
Indicatori carousel
Più alti per non coprire la didascalia incorporata
nelle immagini delle sedi.
Regola esclusiva della Home.
---------------------------------------------------------- */
.home-satta-hero-carousel.owl-theme .owl-dots {
bottom: 3.15rem;
}
/* ----------------------------------------------------------
Responsive
---------------------------------------------------------- */
@media (max-width: 991.98px) {
.home-satta-hero-copy {
padding: 1.8rem 2rem;
}
.home-satta-hero-carousel.owl-theme .owl-dots {
bottom: 2.8rem;
}
}
@media (max-width: 767.98px) {
.home-satta-hero-copy {
padding: 1.45rem 1.25rem 1.55rem;
}
.home-satta-hero-carousel.owl-theme .owl-dots {
bottom: 2.55rem;
}
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TUNING 01 END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TUNING 02 START
Posizione titolo + carousel controls responsive
========================================================== */
/* ----------------------------------------------------------
DESKTOP
Il testo resta ancorato al confine con il carousel.
La distanza non aumenta con la larghezza della viewport.
---------------------------------------------------------- */
@media (min-width: 992px) {
.home-satta-hero-copy {
width: calc(100% - 2rem);
max-width: 29rem;
margin-left: auto;
margin-right: 2rem;
padding: 2.25rem 0;
}
}
/* ----------------------------------------------------------
FRECCE
Colore sezione Scuola
---------------------------------------------------------- */
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-prev,
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-next {
border-color: #cf2e4f;
color: #cf2e4f;
}
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-prev:hover,
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-next:hover,
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-prev:focus,
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-next:focus {
border-color: #cf2e4f;
background: #cf2e4f;
color: #fff;
}
/* ----------------------------------------------------------
DOTS
Posizione e proporzioni responsive
---------------------------------------------------------- */
.home-satta-hero-carousel.owl-theme .owl-dots {
bottom: 3.15rem;
padding: .1rem .32rem;
}
.home-satta-hero-carousel.owl-theme .owl-dots .owl-dot span {
width: .65rem;
height: .65rem;
margin: .21rem;
background: #8b98a5;
}
.home-satta-hero-carousel.owl-theme .owl-dots .owl-dot.active span,
.home-satta-hero-carousel.owl-theme .owl-dots .owl-dot:hover span,
.home-satta-hero-carousel.owl-theme .owl-dots .owl-dot:focus span {
background: #cf2e4f;
}
/* Tablet */
@media (max-width: 991.98px) {
.home-satta-hero-carousel.owl-theme .owl-dots {
bottom: 2.7rem;
padding: .08rem .26rem;
}
.home-satta-hero-carousel.owl-theme .owl-dots .owl-dot span {
width: .52rem;
height: .52rem;
margin: .18rem;
}
}
/* Smartphone */
@media (max-width: 575.98px) {
.home-satta-hero-carousel.owl-theme .owl-dots {
bottom: 2.05rem;
padding: .05rem .18rem;
border-radius: .75rem;
}
.home-satta-hero-carousel.owl-theme .owl-dots .owl-dot span {
width: .38rem;
height: .38rem;
margin: .13rem;
}
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-prev,
.home-satta-hero-carousel.owl-theme .owl-nav button.owl-next {
width: 2.75rem;
height: 2.75rem;
}
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TUNING 02 END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 SCHOOL PATTERN START
Pattern originale sezione Scuola / Presentazione
========================================================== */
/*
* Rimuove i gradienti geometrici provvisori.
* Il motivo decorativo viene ora fornito dall'SVG originale
* .people-red-forms del template.
*/
.home-satta-hero-copy-column::before,
.home-satta-hero-copy-column::after {
content: none !important;
display: none !important;
}
/*
* Pattern originale della sezione Scuola.
* Le dimensioni e la posizione di base restano quelle
* definite dal template per .people-red-forms.
*/
.home-satta-hero-copy-column > .people-red-forms {
z-index: 0;
pointer-events: none;
}
/*
* Il contenuto testuale resta sopra la decorazione.
*/
.home-satta-hero-copy {
position: relative;
z-index: 1;
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 SCHOOL PATTERN END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 COPY SHIFT START
Sposta il testo verso il centro su desktop/tablet.
Smartphone invariato.
========================================================== */
/* desktop medio / tablet orizzontale */
@media (min-width: 768px) and (max-width: 1399.98px) {
.home-satta-hero-copy-column {
display: flex;
align-items: center;
justify-content: flex-end;
padding-left: 2.25rem;
padding-right: 1.75rem;
}
.home-satta-hero-copy {
width: 100%;
max-width: 360px;
margin-left: auto;
margin-right: 0;
}
}
/* schermi un po' più stretti: avvicina ancora di più al carousel */
@media (min-width: 768px) and (max-width: 1199.98px) {
.home-satta-hero-copy-column {
padding-left: 2.5rem;
padding-right: 1.25rem;
}
.home-satta-hero-copy {
max-width: 320px;
}
}
/* sicurezza: su desktop grande mantieni una distanza elegante dal carousel */
@media (min-width: 1400px) and (max-width: 1599.98px) {
.home-satta-hero-copy-column {
padding-left: 2rem;
padding-right: 2rem;
}
.home-satta-hero-copy {
max-width: 380px;
margin-left: auto;
margin-right: 0;
}
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 COPY SHIFT END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 ULTRAWIDE START
Hero con larghezza massima centrata su schermi molto larghi
========================================================== */
@media (min-width: 1600px) {
/*
* Stage massimo:
* 1/3 titolo rosso + 2/3 carousel.
*
* Oltre 1440px il contenuto non cresce più.
*/
.home-satta-hero > .container {
width: 100%;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
/*
* Il confine rosso/bianco deve continuare anche fuori
* dallo stage centrale.
*
* 1440 / 6 = 240px
* Confine della colonna rossa:
* centro viewport - 240px.
*/
.home-satta-hero {
background:
linear-gradient(
to right,
#d1344c 0,
#d1344c calc(50% - 240px),
#ffffff calc(50% - 240px),
#ffffff 100%
);
}
/*
* La row non viene più dilatata dalla viewport.
*/
.home-satta-hero .row {
width: 100%;
margin-left: 0;
margin-right: 0;
}
/*
* Mantiene le proporzioni 1/3 + 2/3 dello stage.
*/
.home-satta-hero-copy-column {
flex: 0 0 33.333333%;
width: 33.333333%;
max-width: 33.333333%;
}
.home-satta-hero-carousel-column {
flex: 0 0 66.666667%;
width: 66.666667%;
max-width: 66.666667%;
}
/*
* Il carousel resta alla sua dimensione naturale.
* Niente crop: l'immagine continua a essere contain.
*/
.home-satta-hero-carousel,
.home-satta-hero-slide {
width: 100%;
background: #fff;
}
.home-satta-hero-slide img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
object-position: center;
}
/*
* Titolo ancorato al lato destro della parte rossa,
* quindi resta vicino al carousel anche su viewport enormi.
*/
.home-satta-hero-copy {
width: calc(100% - 2rem);
max-width: 24rem;
margin-left: auto;
margin-right: 2rem;
padding-left: 0;
padding-right: 0;
}
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 ULTRAWIDE END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 CTA REDFIX START
Pulsante hero + uniformazione rosso fondo sinistro
========================================================== */
.home-satta-hero {
--home-satta-red-fill: #d93b5a;
}
/* uniforma il fondo del blocco rosso */
.home-satta-hero-copy-column {
background-color: var(--home-satta-red-fill);
}
/* CTA stile Pertini */
.home-satta-hero-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin-top: 1rem;
padding: .75rem 1.25rem;
border: 2px solid #ffffff;
border-radius: .35rem;
background: transparent;
color: #ffffff;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.home-satta-hero-cta:hover,
.home-satta-hero-cta:focus {
background: #ffffff;
color: var(--home-satta-red-fill);
border-color: #ffffff;
text-decoration: none;
}
/* su desktop il pulsante resta allineato al blocco testo */
@media (min-width: 768px) {
.home-satta-hero-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
/* su schermi molto larghi il riempimento rosso esterno usa lo stesso rosso */
@media (min-width: 1600px) {
.home-satta-hero {
background:
linear-gradient(
to right,
var(--home-satta-red-fill) 0,
var(--home-satta-red-fill) calc(50% - 240px),
#ffffff calc(50% - 240px),
#ffffff 100%
);
}
}
/* piccolo respiro su tablet piccoli */
@media (min-width: 768px) and (max-width: 1199.98px) {
.home-satta-hero-copy {
padding-left: 1rem;
}
}
/* smartphone: nessun cambiamento invasivo */
@media (max-width: 767.98px) {
.home-satta-hero-cta {
margin-top: .85rem;
}
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 CTA REDFIX END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TUNING 05 START
Uniformazione rosso + gerarchia tipografica + CTA softer
========================================================== */
/* rosso uniforme del blocco sinistro */
.home-satta-hero {
--home-satta-red-uniform: #e53b61;
}
.home-satta-hero-copy-column {
background-color: var(--home-satta-red-uniform) !important;
}
/* su schermi larghi, anche il riempimento laterale deve usare
lo stesso identico rosso del pannello sinistro */
@media (min-width: 1600px) {
.home-satta-hero {
background:
linear-gradient(
to right,
var(--home-satta-red-uniform) 0,
var(--home-satta-red-uniform) calc(50% - 240px),
#ffffff calc(50% - 240px),
#ffffff 100%
) !important;
}
}
/* blocco testo */
.home-satta-hero-copy {
max-width: 30rem;
}
.home-satta-kicker {
font-size: 1.15rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
margin-bottom: 1.15rem !important;
}
.home-satta-hero h1 {
margin-bottom: 1.45rem !important;
}
.home-satta-city {
font-size: 1.8rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
margin-bottom: 1.85rem !important;
}
/* pulsante meno evidente */
.home-satta-hero-cta {
font-weight: 500 !important;
font-size: 1.05rem !important;
border-width: 2px !important;
padding: .82rem 1.5rem !important;
}
/* tablet / desktop medio: miglior equilibrio del blocco testo */
@media (min-width: 768px) and (max-width: 1199.98px) {
.home-satta-kicker {
font-size: 1.05rem !important;
}
.home-satta-city {
font-size: 1.6rem !important;
}
}
/* smartphone: manteniamo equilibrio senza far esplodere le righe */
@media (max-width: 767.98px) {
.home-satta-kicker {
font-size: 1rem !important;
}
.home-satta-city {
font-size: 1.45rem !important;
margin-bottom: 1.4rem !important;
}
.home-satta-hero-cta {
font-size: 1rem !important;
font-weight: 500 !important;
}
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TUNING 05 END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TUNING 06 START
Rosso realmente uniforme + rollback geometria mobile
========================================================== */
.home-satta-hero {
--home-satta-red-uniform: #e53b61;
}
/*
* IMPORTANTE:
* background-color non basta perché precedenti regole
* impostano background con gradient.
* Qui sostituiamo l'intero background.
*/
.home-satta-hero-copy-column {
background: var(--home-satta-red-uniform) !important;
}
/*
* Ultrawide:
* esattamente lo stesso valore usato dalla colonna.
*/
@media (min-width: 1600px) {
.home-satta-hero {
background:
linear-gradient(
to right,
var(--home-satta-red-uniform) 0,
var(--home-satta-red-uniform) calc(50% - 240px),
#ffffff calc(50% - 240px),
#ffffff 100%
) !important;
}
}
/* ----------------------------------------------------------
Gerarchia più marcata SOLO da tablet in su
---------------------------------------------------------- */
@media (min-width: 768px) {
.home-satta-kicker {
font-size: 1.15rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
margin-bottom: 1.15rem !important;
}
.home-satta-hero h1 {
margin-bottom: 1.45rem !important;
}
.home-satta-city {
font-size: 1.8rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
margin-bottom: 1.85rem !important;
}
}
/* ----------------------------------------------------------
CTA: manteniamo il miglioramento già approvato
---------------------------------------------------------- */
.home-satta-hero-cta {
font-weight: 500 !important;
}
/* ----------------------------------------------------------
SMARTPHONE
Ripristina una composizione compatta.
---------------------------------------------------------- */
@media (max-width: 767.98px) {
.home-satta-hero-copy {
padding: 1.45rem 1.25rem 1.55rem !important;
}
.home-satta-kicker {
font-size: .9rem !important;
line-height: 1.15 !important;
font-weight: 600 !important;
white-space: nowrap !important;
margin-bottom: .55rem !important;
}
.home-satta-hero h1 {
margin-bottom: .65rem !important;
}
.home-satta-city {
font-size: 1.15rem !important;
line-height: 1.15 !important;
font-weight: 600 !important;
margin-bottom: .9rem !important;
}
.home-satta-hero-cta {
min-height: 44px;
margin-top: 0 !important;
padding: .65rem 1.15rem !important;
font-size: .95rem !important;
font-weight: 500 !important;
}
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TUNING 06 END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TUNING 07 START
Rosso contrasto AA + centratura viewport intermedia
========================================================== */
.home-satta-hero {
--home-satta-red-uniform: #d92f52;
}
/* stesso identico rosso nel pannello */
.home-satta-hero-copy-column {
background: var(--home-satta-red-uniform) !important;
}
/* stesso identico rosso nel riempimento ultrawide */
@media (min-width: 1600px) {
.home-satta-hero {
background:
linear-gradient(
to right,
var(--home-satta-red-uniform) 0,
var(--home-satta-red-uniform) calc(50% - 240px),
#ffffff calc(50% - 240px),
#ffffff 100%
) !important;
}
}
/*
* Desktop stretto / tablet orizzontale:
* centra meglio il blocco testuale nella colonna rossa.
* Il vero mobile <=767px resta invariato.
*/
@media (min-width: 768px) and (max-width: 991.98px) {
.home-satta-hero-copy-column {
justify-content: center !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.home-satta-hero-copy {
width: 100% !important;
max-width: 25rem !important;
margin-left: auto !important;
margin-right: auto !important;
align-items: center !important;
text-align: center !important;
}
.home-satta-kicker {
text-align: center !important;
}
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TUNING 07 END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TABLET COMPACT START
Solo tablet / viewport intermedia.
Smartphone e desktop invariati.
========================================================== */
@media (min-width: 600px) and (max-width: 991.98px) {
/*
* La fascia rossa resta sopra il carousel,
* ma non deve assumere altezza da hero desktop.
*/
.home-satta-hero-copy-column {
min-height: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.home-satta-hero-copy {
width: 100% !important;
max-width: 34rem !important;
margin: 0 auto !important;
padding: 1.35rem 1.5rem 1.45rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.home-satta-kicker {
font-size: .95rem !important;
line-height: 1.15 !important;
margin: 0 0 .55rem !important;
white-space: nowrap !important;
text-align: center !important;
}
.home-satta-hero h1 {
font-size: 2rem !important;
line-height: 1.05 !important;
margin: 0 0 .7rem !important;
text-align: center !important;
}
.home-satta-city {
font-size: 1.3rem !important;
line-height: 1.15 !important;
margin: 0 0 .85rem !important;
text-align: center !important;
}
.home-satta-hero-cta {
min-height: 44px;
margin: 0 !important;
padding: .65rem 1.25rem !important;
font-size: .95rem !important;
font-weight: 500 !important;
}
/*
* Il pattern rimane importante ma non determina
* visivamente l'altezza della fascia.
*/
.home-satta-hero-copy-column > .people-red-forms {
top: 50% !important;
right: 50% !important;
width: 360px !important;
height: 245px !important;
transform: translate(58%, -50%) !important;
opacity: .9;
}
.home-satta-hero-copy-column > .people-red-forms svg {
width: 360px !important;
height: 245px !important;
}
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 TABLET COMPACT END
========================================================== */
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 CAROUSEL VCENTER START
Centra verticalmente il carousel quando hero e foto
sono affiancati. Mobile/tablet stacked invariati.
========================================================== */
@media (min-width: 992px) {
.home-satta-hero-carousel-column {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: stretch !important;
}
.home-satta-hero-carousel {
width: 100%;
margin-top: auto;
margin-bottom: auto;
}
}
/* ==========================================================
MIG-2026-001 - HOME SECTION 1 CAROUSEL VCENTER END
========================================================== */
/* =========================================================
MIG-2026-001 - HOME SECTION 2 - COLLEGAMENTI UTILI
========================================================= */
.home-collegamenti {
background: #f5f5f5;
}
.home-collegamenti-band {
position: relative;
overflow: hidden;
background: #eeeeee;
border-top: 1px solid rgba(0, 0, 0, .06);
}
.home-collegamenti-heading {
padding: 1.15rem 0 .85rem;
}
.home-collegamenti-heading h2 {
margin: 0;
color: #263f56;
font-size: 1.65rem;
line-height: 1.15;
font-weight: 700;
}
.home-collegamenti-content {
padding: .9rem 0 1.1rem;
}
.home-collegamenti-grid {
align-items: stretch;
}
.home-collegamenti-card {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border-radius: .25rem;
background: #fff;
box-shadow: 0 .1rem .35rem rgba(0, 0, 0, .11);
text-decoration: none;
}
a.home-collegamenti-card {
transition:
transform .15s ease,
box-shadow .15s ease;
}
a.home-collegamenti-card:hover {
transform: translateY(-2px);
box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .16);
}
a.home-collegamenti-card:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
}
.home-collegamenti-image-wrap {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #fff;
}
.home-collegamenti-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.home-collegamenti-card-disabled {
cursor: default;
}
.home-collegamenti-external {
position: absolute;
right: .4rem;
bottom: .4rem;
display: flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
border-radius: 50%;
background: rgba(255, 255, 255, .94);
color: #17324d;
font-size: .9rem;
line-height: 1;
font-weight: 700;
box-shadow: 0 .05rem .2rem rgba(0, 0, 0, .18);
}
.home-collegamenti-footer {
display: flex;
justify-content: flex-end;
padding-top: .9rem;
}
.home-collegamenti-cta {
color: #17324d;
font-weight: 600;
text-decoration: underline;
text-underline-offset: .18em;
}
.home-collegamenti-cta:hover,
.home-collegamenti-cta:focus {
color: #005fcc;
}
@media (max-width: 767.98px) {
.home-collegamenti-heading {
padding: .85rem 0 .65rem;
}
.home-collegamenti-heading h2 {
font-size: 1.35rem;
}
.home-collegamenti-content {
padding: .7rem 0 .9rem;
}
.home-collegamenti-grid {
--bs-gutter-x: .75rem;
--bs-gutter-y: .75rem;
}
.home-collegamenti-external {
right: .3rem;
bottom: .3rem;
width: 1.35rem;
height: 1.35rem;
font-size: .8rem;
}
.home-collegamenti-footer {
padding-top: .75rem;
}
}
/* MIG-2026-001 - HOME SECTION 2 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 2 - TUNING 01
Compressione verticale
========================================================= */
.home-collegamenti-heading {
padding: .8rem 0 .55rem;
}
.home-collegamenti-heading h2 {
font-size: 1.45rem;
line-height: 1.1;
}
.home-collegamenti-content {
padding: .7rem 0 .85rem;
}
.home-collegamenti-grid {
--bs-gutter-y: .65rem;
}
.home-collegamenti-footer {
padding-top: .6rem;
}
@media (max-width: 767.98px) {
.home-collegamenti-heading {
padding: .65rem 0 .45rem;
}
.home-collegamenti-heading h2 {
font-size: 1.25rem;
}
.home-collegamenti-content {
padding: .55rem 0 .75rem;
}
.home-collegamenti-grid {
--bs-gutter-y: .55rem;
}
.home-collegamenti-footer {
padding-top: .5rem;
}
}
/* MIG-2026-001 - HOME SECTION 2 - TUNING 01 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - NOVITA
========================================================= */
.home-novita {
background: #fff;
}
/* fascia principale */
.home-novita-hero {
background: #008758;
color: #fff;
}
.home-novita-hero .container {
padding-top: 1.15rem;
padding-bottom: 2.8rem;
}
.home-novita-hero h2 {
margin: 0;
color: #fff;
font-size: 1.8rem;
line-height: 1.1;
font-weight: 700;
}
/* blocchi */
.home-novita-block {
position: relative;
padding: 0 0 1.25rem;
}
.home-novita-block--soft {
background: #eef7f3;
}
.home-novita-block--white {
background: #fff;
}
.home-novita-block .container {
position: relative;
}
/*
* Primo blocco sovrapposto alla fascia Novità.
* Gli altri mantengono una sovrapposizione più leggera.
*/
.home-novita-block:first-of-type .container {
margin-top: -2rem;
}
.home-novita-block + .home-novita-block {
padding-top: .45rem;
}
.home-novita-block-heading {
padding: .65rem 0 .55rem;
}
.home-novita-block-heading h3 {
margin: 0;
color: #17324d;
font-size: 1.4rem;
line-height: 1.15;
font-weight: 700;
}
/* carousel */
.home-novita-carousel {
position: relative;
}
.home-novita-carousel .owl-stage {
display: flex;
}
.home-novita-carousel .owl-item {
display: flex;
}
.home-novita-card {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
overflow: hidden;
background: #fff;
border-radius: .25rem;
box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .12);
}
.home-novita-card-image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #fff;
}
.home-novita-card-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.home-novita-card--circolare .home-novita-card-image img {
object-fit: contain;
}
.home-novita-card-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: .75rem .85rem .8rem;
}
.home-novita-card-body h4 {
margin: 0;
font-size: 1rem;
line-height: 1.25;
font-weight: 700;
}
.home-novita-card-body h4 a {
color: #17324d;
text-decoration: none;
}
.home-novita-card-body h4 a:hover,
.home-novita-card-body h4 a:focus {
text-decoration: underline;
}
.home-novita-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .4rem .6rem;
margin-top: auto;
padding-top: .65rem;
font-size: .78rem;
color: #52697d;
}
.home-novita-tags {
display: flex;
flex-wrap: wrap;
gap: .25rem;
}
.home-novita-tags .badge {
font-size: .68rem;
}
.home-novita-event-date {
display: inline-block;
align-self: flex-start;
margin-bottom: .45rem;
padding: .25rem .5rem;
border-radius: .2rem;
background: #008758;
color: #fff;
font-size: .78rem;
line-height: 1.1;
font-weight: 700;
}
.home-novita-circolare-oggetto {
margin: .45rem 0 0;
font-size: .82rem;
line-height: 1.3;
color: #33475b;
}
/* CTA */
.home-novita-block-cta {
display: flex;
justify-content: flex-end;
padding-top: .55rem;
}
.home-novita-block-cta a {
color: #17324d;
font-size: .9rem;
font-weight: 600;
text-decoration: underline;
text-underline-offset: .18em;
}
/* frecce laterali */
.home-novita-carousel .owl-nav {
position: static;
height: 0;
margin: 0;
}
.home-novita-carousel .owl-nav button.owl-prev,
.home-novita-carousel .owl-nav button.owl-next {
position: absolute;
top: 50%;
z-index: 4;
width: 2.3rem;
height: 2.3rem;
margin: 0 !important;
border: 1px solid #008758 !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, .96) !important;
color: #008758 !important;
transform: translateY(-50%);
}
.home-novita-carousel .owl-nav button.owl-prev {
left: -1.15rem;
}
.home-novita-carousel .owl-nav button.owl-next {
right: -1.15rem;
}
.home-novita-carousel .owl-nav button:hover,
.home-novita-carousel .owl-nav button:focus {
background: #008758 !important;
color: #fff !important;
}
.home-novita-carousel .owl-dots {
margin-top: .35rem !important;
}
.home-novita-carousel .owl-dot span {
width: .45rem !important;
height: .45rem !important;
}
/* tablet/mobile */
@media (max-width: 991.98px) {
.home-novita-carousel .owl-nav button.owl-prev {
left: -.7rem;
}
.home-novita-carousel .owl-nav button.owl-next {
right: -.7rem;
}
}
@media (max-width: 767.98px) {
.home-novita-hero .container {
padding-top: .85rem;
padding-bottom: 2.35rem;
}
.home-novita-hero h2 {
font-size: 1.45rem;
}
.home-novita-block:first-of-type .container {
margin-top: -1.65rem;
}
.home-novita-block {
padding-bottom: .9rem;
}
.home-novita-block-heading {
padding: .55rem 0 .45rem;
}
.home-novita-block-heading h3 {
font-size: 1.2rem;
}
.home-novita-card-body {
padding: .65rem .75rem .7rem;
}
.home-novita-card-body h4 {
font-size: .95rem;
}
.home-novita-carousel .owl-nav button.owl-prev,
.home-novita-carousel .owl-nav button.owl-next {
width: 2rem;
height: 2rem;
}
.home-novita-carousel .owl-nav button.owl-prev {
left: -.35rem;
}
.home-novita-carousel .owl-nav button.owl-next {
right: -.35rem;
}
.home-novita-block-cta {
padding-top: .4rem;
}
}
/* MIG-2026-001 - HOME SECTION 3 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 02
Banda Novità + interlock verticale
========================================================= */
/* Banda principale più presente */
.home-novita-hero .container {
padding-top: 1.15rem;
padding-bottom: 4.2rem;
}
.home-novita-hero h2 {
font-size: 1.65rem;
}
/* Ogni blocco crea spazio sotto per ricevere il successivo */
.home-novita-block {
padding-top: 0;
padding-bottom: 2.15rem;
}
/*
* La prima sezione entra nella banda verde.
*/
.home-novita-block:first-of-type .container {
margin-top: -3.15rem;
}
/*
* Tutte le sezioni successive salgono nella precedente.
*/
.home-novita-block + .home-novita-block .container {
margin-top: -1.45rem;
}
/*
* Titolo del blocco:
* resta vicino alle card e diventa parte dell'incastro.
*/
.home-novita-block-heading {
padding: .45rem 0 .45rem;
}
.home-novita-block-heading h3 {
font-size: 1.3rem;
}
/* CTA aderente alle card */
.home-novita-block-cta {
padding-top: .25rem;
margin-bottom: 0;
}
/*
* Evitiamo che il fondo del blocco crei troppo vuoto
* dopo la CTA.
*/
.home-novita-carousel {
margin-bottom: 0;
}
.home-novita-carousel .owl-dots {
margin-top: .2rem !important;
margin-bottom: 0 !important;
}
/*
* Il contenitore successivo deve poter sovrapporsi
* senza essere nascosto.
*/
.home-novita-block {
overflow: visible;
}
.home-novita-block .container {
z-index: 2;
}
/* Mobile: interlock più contenuto */
@media (max-width: 767.98px) {
.home-novita-hero .container {
padding-top: .9rem;
padding-bottom: 3.3rem;
}
.home-novita-block {
padding-bottom: 1.55rem;
}
.home-novita-block:first-of-type .container {
margin-top: -2.45rem;
}
.home-novita-block + .home-novita-block .container {
margin-top: -1rem;
}
.home-novita-block-heading {
padding: .4rem 0 .35rem;
}
.home-novita-block-cta {
padding-top: .2rem;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 02 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 03
Effetto "ripiano colorato" + crop immagini + pattern
========================================================= */
/* ---------- Struttura generale ---------- */
.home-novita-hero,
.home-novita-block {
position: relative;
overflow: visible;
}
.home-novita-block .container {
position: relative;
z-index: 2;
}
/* ---------- Fascia principale Novità ---------- */
.home-novita-hero {
position: relative;
}
.home-novita-hero .container {
position: relative;
padding-top: 1.15rem;
padding-bottom: 7.2rem; /* fascia molto più alta */
z-index: 2;
}
.home-novita-hero h2 {
font-size: 1.7rem;
margin-bottom: 0;
}
/* Motivo geometrico leggero sulla fascia */
.home-novita-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .16;
background:
radial-gradient(circle at 14% 62%, transparent 0 44px, rgba(255,255,255,.55) 45px 48px, transparent 49px 100%),
radial-gradient(circle at 14% 62%, transparent 0 78px, rgba(255,255,255,.30) 79px 82px, transparent 83px 100%),
radial-gradient(circle at 86% 28%, transparent 0 38px, rgba(255,255,255,.22) 39px 42px, transparent 43px 100%),
radial-gradient(circle at 86% 28%, transparent 0 90px, rgba(255,255,255,.12) 91px 94px, transparent 95px 100%),
linear-gradient(135deg, rgba(255,255,255,.06) 25%, transparent 25%) 0 0 / 26px 26px;
}
/* ---------- Effetto incastro netto ---------- */
.home-novita-block {
padding-top: 0;
padding-bottom: 1.35rem;
}
/* Prima fila: entra in modo evidente nella fascia Novità */
.home-novita-block:first-of-type .container {
margin-top: -5.6rem;
}
/* Blocchi successivi: entrano nettamente nella sezione precedente */
.home-novita-block + .home-novita-block .container {
margin-top: -2.6rem;
}
/* ---------- Titoli dei blocchi ---------- */
.home-novita-block-heading {
padding-top: .25rem;
padding-bottom: .35rem;
margin-bottom: .15rem;
}
.home-novita-block-heading h3 {
font-size: 1.35rem;
line-height: 1.15;
margin-bottom: 0;
}
/* ---------- CTA molto più vicina alle card ---------- */
.home-novita-block-cta {
padding-top: .15rem;
margin-top: .25rem;
margin-bottom: 0;
}
.home-novita-block-cta a,
.home-novita-block-cta .btn {
margin-bottom: 0;
}
/* ---------- Carousel / dots compatti ---------- */
.home-novita-carousel {
margin-bottom: 0;
}
.home-novita-carousel .owl-dots {
margin-top: .15rem !important;
margin-bottom: 0 !important;
}
/* ---------- Card più compatte ---------- */
.home-novita-card {
margin-bottom: 0;
}
.home-novita-card .card-body {
padding: .70rem .85rem .80rem;
}
/* Crop immagini: card più rettangolari e meno alte */
.home-novita-card .card-img-top,
.home-novita-card img.card-img-top,
.home-novita-card figure img,
.home-novita-card .img-fluid,
.home-novita-card .home-novita-thumb img,
.home-novita-card .article-image img {
display: block;
width: 100%;
height: 160px;
object-fit: cover;
}
/* Testi più compatti */
.home-novita-card .card-title,
.home-novita-card h3,
.home-novita-card h4 {
font-size: 1rem;
line-height: 1.20;
margin-bottom: .35rem;
}
.home-novita-card .card-text,
.home-novita-card p,
.home-novita-card .small {
line-height: 1.20;
margin-bottom: .25rem;
}
/* ---------- Eventuale pattern leggerissimo sui blocchi colorati ---------- */
/* Se le sezioni hanno già background colorato, questo aiuta a non farle apparire piatte */
.home-novita-block::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .05;
background:
linear-gradient(45deg, rgba(255,255,255,.6) 12%, transparent 12%, transparent 50%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.6) 62%, transparent 62%, transparent 100%) 0 0 / 34px 34px;
}
/* Manteniamo il contenuto sopra al pattern */
.home-novita-block > * {
position: relative;
z-index: 1;
}
/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
.home-novita-hero .container {
padding-bottom: 6rem;
}
.home-novita-block:first-of-type .container {
margin-top: -4.7rem;
}
.home-novita-block + .home-novita-block .container {
margin-top: -2rem;
}
.home-novita-card .card-img-top,
.home-novita-card img.card-img-top,
.home-novita-card figure img,
.home-novita-card .img-fluid,
.home-novita-card .home-novita-thumb img,
.home-novita-card .article-image img {
height: 145px;
}
}
/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
.home-novita-hero .container {
padding-top: .9rem;
padding-bottom: 4.8rem;
}
.home-novita-block {
padding-bottom: 1rem;
}
.home-novita-block:first-of-type .container {
margin-top: -3.7rem;
}
.home-novita-block + .home-novita-block .container {
margin-top: -1.45rem;
}
.home-novita-block-heading {
padding-top: .2rem;
padding-bottom: .3rem;
}
.home-novita-block-heading h3 {
font-size: 1.2rem;
}
.home-novita-block-cta {
padding-top: .1rem;
margin-top: .2rem;
}
.home-novita-card .card-body {
padding: .6rem .7rem .7rem;
}
.home-novita-card .card-img-top,
.home-novita-card img.card-img-top,
.home-novita-card figure img,
.home-novita-card .img-fluid,
.home-novita-card .home-novita-thumb img,
.home-novita-card .article-image img {
height: 128px;
}
.home-novita-card .card-title,
.home-novita-card h3,
.home-novita-card h4 {
font-size: .96rem;
line-height: 1.18;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 03 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 04
Overlap più deciso stile Pertini 1
========================================================= */
/* Fascia Novità molto più alta */
.home-novita-hero .container {
padding-top: 1.2rem;
padding-bottom: 10.2rem !important;
}
/* Prima sezione: card ben infilate nella fascia */
.home-novita-block:first-of-type .container {
margin-top: -8.4rem !important;
}
/* Sezioni successive: incastro più netto */
.home-novita-block + .home-novita-block .container {
margin-top: -3.6rem !important;
}
/* Heading più compatto */
.home-novita-block-heading {
padding-top: .15rem !important;
padding-bottom: .15rem !important;
margin-bottom: 0 !important;
}
.home-novita-block-heading h3 {
margin-bottom: 0 !important;
line-height: 1.1 !important;
}
/* CTA molto più vicina alle card */
.home-novita-block-cta {
padding-top: 0 !important;
margin-top: -.15rem !important;
margin-bottom: 0 !important;
}
.home-novita-block-cta .btn,
.home-novita-block-cta a {
margin-bottom: 0 !important;
}
/* Dots molto vicini */
.home-novita-carousel .owl-dots {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Card più "rettangolari" e meno alte */
.home-novita-card .card-img-top,
.home-novita-card img.card-img-top,
.home-novita-card figure img,
.home-novita-card .img-fluid,
.home-novita-card .home-novita-thumb img,
.home-novita-card .article-image img {
width: 100%;
height: 138px !important;
object-fit: cover;
}
/* Card un pelo più compatte */
.home-novita-card .card-body {
padding: .65rem .8rem .75rem !important;
}
.home-novita-card .card-title,
.home-novita-card h3,
.home-novita-card h4 {
font-size: .98rem !important;
line-height: 1.16 !important;
margin-bottom: .25rem !important;
}
.home-novita-card .card-text,
.home-novita-card p,
.home-novita-card .small {
line-height: 1.16 !important;
margin-bottom: .15rem !important;
}
/* Fascia con pattern un po' più leggibile */
.home-novita-hero::after {
opacity: .22 !important;
}
/* Mobile */
@media (max-width: 767.98px) {
.home-novita-hero .container {
padding-top: .9rem;
padding-bottom: 7rem !important;
}
.home-novita-block:first-of-type .container {
margin-top: -5.9rem !important;
}
.home-novita-block + .home-novita-block .container {
margin-top: -2.1rem !important;
}
.home-novita-block-heading {
padding-top: .1rem !important;
padding-bottom: .1rem !important;
}
.home-novita-block-cta {
margin-top: -.1rem !important;
}
.home-novita-card .card-img-top,
.home-novita-card img.card-img-top,
.home-novita-card figure img,
.home-novita-card .img-fluid,
.home-novita-card .home-novita-thumb img,
.home-novita-card .article-image img {
height: 116px !important;
}
.home-novita-card .card-body {
padding: .55rem .65rem .65rem !important;
}
.home-novita-card .card-title,
.home-novita-card h3,
.home-novita-card h4 {
font-size: .92rem !important;
line-height: 1.14 !important;
}
}
/* Desktop largo: possiamo osare ancora un po' */
@media (min-width: 1200px) {
.home-novita-hero .container {
padding-bottom: 11rem !important;
}
.home-novita-block:first-of-type .container {
margin-top: -9rem !important;
}
.home-novita-block + .home-novita-block .container {
margin-top: -3.9rem !important;
}
.home-novita-card .card-img-top,
.home-novita-card img.card-img-top,
.home-novita-card figure img,
.home-novita-card .img-fluid,
.home-novita-card .home-novita-thumb img,
.home-novita-card .article-image img {
height: 132px !important;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 04 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 06
Primo ripiano Novità -> In evidenza
========================================================= */
/*
* Il problema non è più la posizione del container:
* è lo sfondo della prima sezione.
*
* Creiamo quindi un vero "ripiano":
* parte superiore verde Novità,
* parte inferiore verde chiaro In evidenza.
*/
.home-novita-block:first-of-type {
background:
linear-gradient(
to bottom,
#008758 0,
#008758 5.4rem,
#eef7f3 5.4rem,
#eef7f3 100%
) !important;
}
/*
* Il titolo In evidenza appartiene visivamente
* alla fascia verde.
*/
.home-novita-block:first-of-type
.home-novita-block-heading h3 {
color: #fff !important;
}
/*
* Manteniamo il pattern anche nella prosecuzione
* della fascia verde dietro le card.
*/
.home-novita-block:first-of-type::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5.4rem;
z-index: 0;
pointer-events: none;
opacity: .16;
background:
radial-gradient(
circle at 86% 25%,
transparent 0 38px,
rgba(255,255,255,.30) 39px 42px,
transparent 43px 100%
),
linear-gradient(
135deg,
rgba(255,255,255,.09) 25%,
transparent 25%
) 0 0 / 26px 26px;
}
.home-novita-block:first-of-type > .container {
position: relative;
z-index: 2;
}
/*
* Mobile: il ripiano deve essere più profondo
* perché abbiamo una card larga singola.
*/
@media (max-width: 767.98px) {
.home-novita-block:first-of-type {
background:
linear-gradient(
to bottom,
#008758 0,
#008758 6.4rem,
#eef7f3 6.4rem,
#eef7f3 100%
) !important;
}
.home-novita-block:first-of-type::after {
height: 6.4rem;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 06 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 06
Primo ripiano Novità -> In evidenza
========================================================= */
/*
* Il problema non è più la posizione del container:
* è lo sfondo della prima sezione.
*
* Creiamo quindi un vero "ripiano":
* parte superiore verde Novità,
* parte inferiore verde chiaro In evidenza.
*/
.home-novita-block:first-of-type {
background:
linear-gradient(
to bottom,
#008758 0,
#008758 5.4rem,
#eef7f3 5.4rem,
#eef7f3 100%
) !important;
}
/*
* Il titolo In evidenza appartiene visivamente
* alla fascia verde.
*/
.home-novita-block:first-of-type
.home-novita-block-heading h3 {
color: #fff !important;
}
/*
* Manteniamo il pattern anche nella prosecuzione
* della fascia verde dietro le card.
*/
.home-novita-block:first-of-type::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5.4rem;
z-index: 0;
pointer-events: none;
opacity: .16;
background:
radial-gradient(
circle at 86% 25%,
transparent 0 38px,
rgba(255,255,255,.30) 39px 42px,
transparent 43px 100%
),
linear-gradient(
135deg,
rgba(255,255,255,.09) 25%,
transparent 25%
) 0 0 / 26px 26px;
}
.home-novita-block:first-of-type > .container {
position: relative;
z-index: 2;
}
/*
* Mobile: il ripiano deve essere più profondo
* perché abbiamo una card larga singola.
*/
@media (max-width: 767.98px) {
.home-novita-block:first-of-type {
background:
linear-gradient(
to bottom,
#008758 0,
#008758 6.4rem,
#eef7f3 6.4rem,
#eef7f3 100%
) !important;
}
.home-novita-block:first-of-type::after {
height: 6.4rem;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 06 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 07
Fascia verde "Novità" - pattern geometrico angolare
========================================================= */
/*
* Non tocchiamo più indentatura e quote.
* Sostituiamo solo il pattern circolare con un motivo
* più discreto, fatto di pannelli diagonali / triangoli.
*/
.home-novita-block:first-of-type::after,
.panoramica-novita .panoramica-novita-section:first-of-type::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6.4rem;
z-index: 0;
pointer-events: none;
opacity: .22;
background-image:
linear-gradient(135deg,
rgba(255,255,255,.10) 0%,
rgba(255,255,255,.10) 18%,
transparent 18%,
transparent 100%),
linear-gradient(315deg,
rgba(255,255,255,.08) 0%,
rgba(255,255,255,.08) 14%,
transparent 14%,
transparent 100%),
linear-gradient(45deg,
transparent 0%,
transparent 56%,
rgba(255,255,255,.07) 56%,
rgba(255,255,255,.07) 74%,
transparent 74%,
transparent 100%),
linear-gradient(90deg,
transparent 0%,
transparent 8%,
rgba(255,255,255,.05) 8%,
rgba(255,255,255,.05) 22%,
transparent 22%,
transparent 100%),
linear-gradient(135deg,
transparent 0%,
transparent 70%,
rgba(255,255,255,.06) 70%,
rgba(255,255,255,.06) 100%);
background-size:
420px 100%,
360px 100%,
300px 100%,
220px 100%,
260px 100%;
background-position:
left top,
right top,
18% 0,
68% 0,
88% 0;
background-repeat: no-repeat;
}
/*
* Manteniamo il contenuto sopra il pattern.
*/
.home-novita-block:first-of-type > .container,
.panoramica-novita .panoramica-novita-section:first-of-type > .container {
position: relative;
z-index: 2;
}
/*
* Se qualche vecchio pseudo-elemento aggiuntivo genera ancora
* i cerchi in altri layer, lo neutralizziamo sul primo blocco.
*/
.home-novita-block:first-of-type::before,
.panoramica-novita .panoramica-novita-section:first-of-type::before {
background-image: none !important;
}
/* Mobile: stessa logica, solo un filo più morbida */
@media (max-width: 767.98px) {
.home-novita-block:first-of-type::after,
.panoramica-novita .panoramica-novita-section:first-of-type::after {
height: 6.8rem;
opacity: .18;
background-size:
280px 100%,
240px 100%,
210px 100%,
160px 100%,
180px 100%;
background-position:
left top,
right top,
12% 0,
70% 0,
92% 0;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 07 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 10
Pattern verde definitivo - pannelli geometrici
NON modifica indentatura/card/layout
========================================================= */
/*
* Fascia principale NOVITA:
* sostituzione completa dei vecchi radial-gradient.
*/
.home-novita-hero::after {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
opacity: 1 !important;
background:
linear-gradient(
132deg,
rgba(255,255,255,.10) 0 18%,
transparent 18% 100%
),
linear-gradient(
48deg,
transparent 0 30%,
rgba(255,255,255,.065) 30% 48%,
transparent 48% 100%
),
linear-gradient(
138deg,
transparent 0 58%,
rgba(0,80,55,.10) 58% 76%,
transparent 76% 100%
),
linear-gradient(
35deg,
transparent 0 76%,
rgba(255,255,255,.075) 76% 91%,
transparent 91% 100%
) !important;
background-size:
36% 100%,
44% 100%,
39% 100%,
34% 100% !important;
background-position:
0 0,
27% 0,
67% 0,
100% 0 !important;
background-repeat: no-repeat !important;
}
/*
* Prosecuzione verde dietro IN EVIDENZA:
* stesso linguaggio geometrico.
*/
.home-novita-block:first-of-type::after {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 6.4rem !important;
z-index: 0 !important;
pointer-events: none !important;
opacity: 1 !important;
background:
linear-gradient(
132deg,
rgba(255,255,255,.10) 0 18%,
transparent 18% 100%
),
linear-gradient(
48deg,
transparent 0 31%,
rgba(255,255,255,.065) 31% 49%,
transparent 49% 100%
),
linear-gradient(
138deg,
transparent 0 60%,
rgba(0,80,55,.10) 60% 77%,
transparent 77% 100%
),
linear-gradient(
35deg,
transparent 0 77%,
rgba(255,255,255,.075) 77% 92%,
transparent 92% 100%
) !important;
background-size:
36% 100%,
44% 100%,
39% 100%,
34% 100% !important;
background-position:
0 0,
27% 0,
67% 0,
100% 0 !important;
background-repeat: no-repeat !important;
}
/*
* Il vecchio pattern generico del blocco non deve
* interferire con la prima fascia.
*/
.home-novita-block:first-of-type::before {
content: none !important;
display: none !important;
background: none !important;
}
/* Titoli sopra la decorazione */
.home-novita-hero > .container,
.home-novita-block:first-of-type > .container {
position: relative !important;
z-index: 2 !important;
}
/* Novità leggermente più importante */
.home-novita-hero h2 {
font-size: 2.15rem !important;
line-height: 1.05 !important;
font-weight: 700 !important;
}
/* Mobile */
@media (max-width: 767.98px) {
.home-novita-hero h2 {
font-size: 1.9rem !important;
}
.home-novita-block:first-of-type::after {
height: 6.4rem !important;
}
.home-novita-hero::after,
.home-novita-block:first-of-type::after {
background-size:
65% 100%,
70% 100%,
65% 100%,
55% 100% !important;
background-position:
-25% 0,
28% 0,
78% 0,
125% 0 !important;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 10 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 11
CTA più vicine alle card
========================================================= */
.home-novita-block-cta {
padding-top: 0 !important;
margin-top: -1.15rem !important;
margin-bottom: .35rem !important;
position: relative;
z-index: 4;
}
/* Mobile: spostamento leggermente più contenuto */
@media (max-width: 767.98px) {
.home-novita-block-cta {
margin-top: -.85rem !important;
margin-bottom: .3rem !important;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 11 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 12
CTA allineate alla sezione di appartenenza
========================================================= */
.home-novita-block-cta {
padding-top: 0 !important;
margin-top: -1.9rem !important;
margin-bottom: .85rem !important;
position: relative;
z-index: 5;
}
/* Mobile */
@media (max-width: 767.98px) {
.home-novita-block-cta {
margin-top: -1.45rem !important;
margin-bottom: .7rem !important;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 12 END */
/* =========================================================
MIG-2026-001 - MAIN MENU
Evidenziazione persistente voce di primo livello attiva
========================================================= */
.navbar-nav > .nav-item.active > .nav-link.dropdown-toggle > span {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: .28em;
}
/* MIG-2026-001 - MAIN MENU ACTIVE UNDERLINE END */
/* =========================================================
MIG-2026-001 - HOME SECTION 4 SERVIZI
========================================================= */
.home-servizi {
position: relative;
background: #f6eef8;
padding-bottom: 1.35rem;
}
.home-servizi-band {
position: relative;
min-height: 9rem;
overflow: hidden;
background: linear-gradient(
120deg,
#b312c7 0%,
#9916ad 54%,
#78107f 100%
);
}
.home-servizi-band-inner {
position: relative;
z-index: 2;
padding-top: 1.2rem;
}
.home-servizi-band h2 {
margin: 0;
color: #fff;
font-size: 2.15rem;
font-weight: 700;
line-height: 1.1;
}
/* Pattern geometrico, stessa grammatica visiva di Novità */
.home-servizi-pattern {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .34;
background:
linear-gradient(
132deg,
transparent 0 59%,
rgba(255,255,255,.18) 59% 74%,
transparent 74%
),
linear-gradient(
42deg,
transparent 0 67%,
rgba(72,0,88,.28) 67% 83%,
transparent 83%
);
}
.home-servizi-content {
position: relative;
z-index: 3;
margin-top: -4.65rem;
}
.home-servizi-grid {
position: relative;
}
.home-servizi-card {
display: flex;
align-items: center;
width: 100%;
min-height: 5rem;
padding: .85rem 1rem;
gap: .8rem;
border: 1px solid rgba(23,50,77,.10);
border-radius: .3rem;
background: #fff;
box-shadow: 0 .14rem .55rem rgba(23,50,77,.12);
color: #17324d;
text-decoration: none;
}
.home-servizi-card:hover,
.home-servizi-card:focus {
color: #17324d;
text-decoration: underline;
box-shadow: 0 .28rem .8rem rgba(23,50,77,.17);
}
.home-servizi-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.65rem;
height: 2.65rem;
flex: 0 0 2.65rem;
color: #a315b8;
}
.home-servizi-card-icon .icon {
width: 1.65rem;
height: 1.65rem;
fill: #a315b8;
}
.home-servizi-card-title {
flex: 1 1 auto;
min-width: 0;
font-size: 1.08rem;
font-weight: 700;
line-height: 1.2;
}
.home-servizi-card-arrow {
flex: 0 0 auto;
color: #a315b8;
font-size: 1.6rem;
font-weight: 600;
line-height: 1;
}
.home-servizi-cta {
display: flex;
justify-content: flex-end;
padding-top: .75rem;
}
.home-servizi-cta a {
color: #17324d;
font-size: .9rem;
font-weight: 600;
text-decoration: underline;
text-underline-offset: .18em;
}
.home-servizi-cta a:hover,
.home-servizi-cta a:focus {
color: #751184;
}
@media (max-width: 767.98px) {
.home-servizi-band {
min-height: 8.25rem;
}
.home-servizi-band-inner {
padding-top: 1rem;
}
.home-servizi-band h2 {
font-size: 1.9rem;
}
.home-servizi-content {
margin-top: -4.15rem;
}
.home-servizi-grid {
--bs-gutter-y: .65rem;
}
.home-servizi-card {
min-height: 4.25rem;
padding: .65rem .8rem;
}
.home-servizi-card-icon {
width: 2.3rem;
height: 2.3rem;
flex-basis: 2.3rem;
}
.home-servizi-card-icon .icon {
width: 1.4rem;
height: 1.4rem;
}
.home-servizi-card-title {
font-size: 1rem;
}
.home-servizi-cta {
padding-top: .55rem;
}
}
/* MIG-2026-001 - HOME SECTION 4 SERVIZI END */
/* =========================================================
MIG-2026-001 - HOME SECTION 4 SERVIZI - TUNING 02
Ripiano al centro verticale delle card
========================================================= */
.home-servizi-band {
min-height: 6.75rem !important;
}
.home-servizi-content {
margin-top: -2.5rem !important;
}
@media (max-width: 767.98px) {
.home-servizi-band {
min-height: 6.25rem !important;
}
.home-servizi-content {
margin-top: -2.125rem !important;
}
}
/* MIG-2026-001 - HOME SECTION 4 SERVIZI - TUNING 02 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 4 SERVIZI - TUNING 03
Pittogrammi più evidenti senza aumento dimensione
========================================================= */
.home-servizi-card-icon .icon {
stroke-width: 1.35;
filter: drop-shadow(0 0 .18px currentColor);
}
/* MIG-2026-001 - HOME SECTION 4 SERVIZI - TUNING 03 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 4 SERVIZI - TUNING 04
Pittogrammi più grandi, card invariata
========================================================= */
.home-servizi-card-icon .icon {
width: 2rem !important;
height: 2rem !important;
}
@media (max-width: 767.98px) {
.home-servizi-card-icon .icon {
width: 1.75rem !important;
height: 1.75rem !important;
}
}
/* MIG-2026-001 - HOME SECTION 4 SERVIZI - TUNING 04 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 14
Ombra visibile card Novità
========================================================= */
.home-novita-block .owl-item article {
box-shadow:
0 .18rem .75rem rgba(23, 50, 77, .20),
0 .04rem .18rem rgba(23, 50, 77, .10) !important;
border: 1px solid rgba(23, 50, 77, .06);
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 14 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 15
Distanza semantica Eventi -> Circolari
========================================================= */
.home-novita-block--circolari {
margin-top: -2rem !important;
}
@media (max-width: 767.98px) {
.home-novita-block--circolari {
margin-top: -1.2rem !important;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 15 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 16
Ulteriore separazione Eventi -> Circolari desktop
========================================================= */
@media (min-width: 768px) {
.home-novita-block--circolari {
margin-top: -0.35rem !important;
}
}
/* Mobile già validato: invariato */
@media (max-width: 767.98px) {
.home-novita-block--circolari {
margin-top: -1.2rem !important;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 16 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 17
Più profondità alla fascia Eventi
Circolari non viene riposizionata direttamente
========================================================= */
@media (min-width: 768px) {
.home-novita-block--eventi {
padding-bottom: 2.5rem !important;
}
}
/* Mobile già PASS: nessuna variazione */
/* MIG-2026-001 - HOME SECTION 3 - TUNING 17 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 18
Maggiore profondità fascia Eventi desktop
========================================================= */
@media (min-width: 768px) {
.home-novita-block--eventi {
padding-bottom: 4.25rem !important;
}
}
/* Mobile invariato */
/* MIG-2026-001 - HOME SECTION 3 - TUNING 18 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 19
Spazio tecnico per ombra inferiore card carousel
========================================================= */
.home-novita-block .owl-stage-outer {
padding-bottom: .65rem !important;
margin-bottom: -.65rem !important;
}
.home-novita-block .owl-item article {
box-shadow:
0 .28rem .65rem rgba(23, 50, 77, .18),
0 .08rem .20rem rgba(23, 50, 77, .10) !important;
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 19 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 20
CTA desktop sopra il livello interattivo Owl
Nessuna modifica alla geometria
========================================================= */
.home-novita-block .home-novita-carousel {
position: relative;
z-index: 1;
}
.home-novita-block .home-novita-block-cta {
position: relative !important;
z-index: 30 !important;
pointer-events: auto !important;
}
.home-novita-block .home-novita-block-cta a {
position: relative;
z-index: 31;
pointer-events: auto !important;
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 20 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 21
Ordine stacking blocchi Novita desktop
Nessuna modifica geometrica
========================================================= */
@media (min-width: 768px) {
.home-novita-block--evidenza,
.home-novita-block--articoli,
.home-novita-block--eventi,
.home-novita-block--circolari {
position: relative;
}
.home-novita-block--evidenza {
z-index: 40;
}
.home-novita-block--articoli {
z-index: 30;
}
.home-novita-block--eventi {
z-index: 20;
}
.home-novita-block--circolari {
z-index: 10;
}
.home-novita-block-cta {
position: relative !important;
z-index: 50 !important;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 21 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 22
Ripristino interlock grafico + hit testing CTA
Nessuna modifica geometrica
========================================================= */
@media (min-width: 768px) {
/*
* Neutralizza lo stacking introdotto dal TUNING 21:
* le sezioni tornano alla stratificazione grafica originale.
*/
.home-novita-block--evidenza,
.home-novita-block--articoli,
.home-novita-block--eventi,
.home-novita-block--circolari {
z-index: auto !important;
}
/*
* Il contenitore Owl non deve catturare il click
* nelle proprie zone trasparenti/debordanti.
*/
.home-novita-carousel {
pointer-events: none;
}
/*
* Restano interattivi gli elementi reali del carousel.
*/
.home-novita-carousel .owl-item,
.home-novita-carousel .owl-item article,
.home-novita-carousel .owl-item a,
.home-novita-carousel .owl-nav,
.home-novita-carousel .owl-nav button,
.home-novita-carousel .owl-dots,
.home-novita-carousel .owl-dot {
pointer-events: auto;
}
/*
* CTA sempre interattiva, senza modificare posizione.
*/
.home-novita-block-cta,
.home-novita-block-cta a {
position: relative;
pointer-events: auto !important;
z-index: 5 !important;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 22 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 23
CTA inline con titolo sottosezione
========================================================= */
.home-novita-block-heading {
display: flex !important;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.home-novita-block-heading h3 {
flex: 1 1 auto;
min-width: 0;
}
.home-novita-block-heading .home-novita-block-cta {
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 20 !important;
pointer-events: auto !important;
}
.home-novita-block-heading .home-novita-block-cta a {
display: inline-block;
position: relative;
z-index: 21;
pointer-events: auto !important;
}
@media (max-width: 767.98px) {
.home-novita-block-heading {
gap: .75rem;
}
.home-novita-block-heading .home-novita-block-cta a {
white-space: nowrap;
}
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 23 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 3 - TUNING 24
CTA Evidenza bianco + aria Articoli/Eventi
========================================================= */
/* CTA della prima sottosezione sopra fascia verde scuro */
.home-novita-block--evidenza
.home-novita-block-cta a {
color: #fff !important;
}
/*
* Più respiro sopra Articoli ed Eventi.
* Non modifica card, carousel o interlock generale.
*/
.home-novita-block--articoli
.home-novita-block-heading,
.home-novita-block--eventi
.home-novita-block-heading {
padding-top: .55rem !important;
}
/* MIG-2026-001 - HOME SECTION 3 - TUNING 24 END */
/* ============================================================
MIG-2026-001 - AUTO INTERNAL ARTICLE CARDS V8
Stabilizzazione definitiva link editoriali interni
============================================================ */
/*
* La resa della card NON dipende dalla presenza/assenza
* dell'attributo class sull'anchor.
*
* Ambito ristretto:
* - paragrafo editoriale privo di classe
* - un solo elemento figlio
* - destinazione interna Joomla /index.php/
* - esclusi controlli/componenti gia' stilizzati
*/
p:not([class]):has(
> a[href^="/index.php/"]:only-child
):not(:has(
> a.btn,
> a.list-item,
> a.nav-link,
> a.dropdown-item
)) {
display: block;
width: 100%;
margin: 1rem 0;
padding: 1rem 1.25rem;
box-sizing: border-box;
background: #fff;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
/* Link interno */
p:not([class]):has(
> a[href^="/index.php/"]:only-child
):not(:has(
> a.btn,
> a.list-item,
> a.nav-link,
> a.dropdown-item
)) > a {
display: inline-flex;
align-items: center;
gap: .55rem;
color: #06c;
font-weight: 600;
text-decoration: none;
}
/* Icona collegamento */
p:not([class]):has(
> a[href^="/index.php/"]:only-child
):not(:has(
> a.btn,
> a.list-item,
> a.nav-link,
> a.dropdown-item
)) > a::before {
content: "\1F517";
flex: 0 0 auto;
font-size: 1rem;
line-height: 1;
}
/* Hover / focus */
p:not([class]):has(
> a[href^="/index.php/"]:only-child
):not(:has(
> a.btn,
> a.list-item,
> a.nav-link,
> a.dropdown-item
)) > a:hover,
p:not([class]):has(
> a[href^="/index.php/"]:only-child
):not(:has(
> a.btn,
> a.list-item,
> a.nav-link,
> a.dropdown-item
)) > a:focus {
color: #004d99;
text-decoration: underline;
}
/* Focus tastiera */
p:not([class]):has(
> a[href^="/index.php/"]:only-child
):not(:has(
> a.btn,
> a.list-item,
> a.nav-link,
> a.dropdown-item
)) > a:focus-visible {
outline: 3px solid rgba(0, 102, 204, .35);
outline-offset: 3px;
border-radius: 2px;
}
/* MIG-2026-001 - AUTO INTERNAL ARTICLE CARDS V8 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 5 DIDATTICA
========================================================= */
.home-didattica {
position: relative;
background: #eef5ff;
}
.home-didattica-band {
position: relative;
overflow: hidden;
background: #0057b8;
}
.home-didattica-pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .28;
background:
linear-gradient(
135deg,
transparent 0 20%,
rgba(255,255,255,.24) 20% 22%,
transparent 22% 48%,
rgba(255,255,255,.15) 48% 50%,
transparent 50% 100%
),
linear-gradient(
45deg,
transparent 0 32%,
rgba(255,255,255,.13) 32% 35%,
transparent 35% 70%,
rgba(255,255,255,.12) 70% 73%,
transparent 73% 100%
);
background-size:
180px 180px,
240px 240px;
}
.home-didattica-band-inner {
position: relative;
z-index: 1;
padding-top: 1.35rem;
padding-bottom: 1.35rem;
}
.home-didattica-band h2 {
margin: 0;
color: #fff;
font-weight: 700;
}
.home-didattica-content {
padding-top: 2rem;
padding-bottom: 2.25rem;
}
.home-didattica-layout {
display: grid;
grid-template-columns:
minmax(230px, .82fr)
minmax(0, 1.78fr);
gap: 0;
overflow: hidden;
border-radius: .35rem;
box-shadow: 0 .25rem .9rem rgba(23,50,77,.12);
}
.home-didattica-orders {
position: relative;
overflow: hidden;
padding: 1.5rem;
background: #003b7a;
color: #fff;
}
.home-didattica-orders::before {
content: "";
position: absolute;
inset: 0;
opacity: .22;
pointer-events: none;
background:
linear-gradient(
135deg,
transparent 0 28%,
rgba(255,255,255,.16) 28% 30%,
transparent 30% 64%,
rgba(255,255,255,.12) 64% 67%,
transparent 67% 100%
);
background-size: 140px 140px;
}
.home-didattica-orders > * {
position: relative;
z-index: 1;
}
.home-didattica-orders h3 {
margin: 0 0 1rem;
color: #fff;
font-size: 1.25rem;
}
.home-didattica-order-buttons {
display: grid;
gap: .55rem;
}
.home-didattica-order-button {
width: 100%;
padding: .9rem 1rem;
border: 1px solid rgba(255,255,255,.35);
background: rgba(255,255,255,.08);
color: #fff;
text-align: left;
font-weight: 600;
line-height: 1.25;
cursor: pointer;
}
.home-didattica-order-button:hover,
.home-didattica-order-button:focus {
background: rgba(255,255,255,.18);
}
.home-didattica-order-button.is-active {
background: #fff;
color: #003b7a;
border-color: #fff;
}
.home-didattica-order-button:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 2px;
}
.home-didattica-offer {
position: relative;
overflow: hidden;
padding: 1.65rem;
background: #dcecff;
}
.home-didattica-offer::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .55;
background:
linear-gradient(
135deg,
transparent 0 26%,
rgba(0,87,184,.12) 26% 29%,
transparent 29% 62%,
rgba(0,87,184,.09) 62% 65%,
transparent 65% 100%
),
linear-gradient(
45deg,
transparent 0 38%,
rgba(255,255,255,.45) 38% 41%,
transparent 41% 100%
);
background-size:
190px 190px,
240px 240px;
}
.home-didattica-offer > * {
position: relative;
z-index: 1;
}
.home-didattica-offer-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.home-didattica-kicker {
display: block;
margin-bottom: .2rem;
color: #315c88;
font-size: .9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
}
.home-didattica-offer-heading h3 {
margin: 0;
color: #17324d;
font-size: 1.65rem;
}
.home-didattica-panel[hidden] {
display: none !important;
}
.home-didattica-accordion {
display: grid;
gap: .7rem;
}
.home-didattica-accordion-item {
overflow: hidden;
background: #fff;
border: 1px solid rgba(23,50,77,.12);
border-radius: .25rem;
box-shadow: 0 .12rem .45rem rgba(23,50,77,.08);
}
.home-didattica-accordion-header {
margin: 0;
}
.home-didattica-accordion-button {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.1rem;
border: 0;
background: #fff;
color: #17324d;
text-align: left;
font-weight: 700;
cursor: pointer;
}
.home-didattica-accordion-button:hover,
.home-didattica-accordion-button:focus {
background: #f6f9fc;
}
.home-didattica-accordion-button:focus-visible {
outline: 3px solid rgba(0,87,184,.35);
outline-offset: -3px;
}
.home-didattica-accordion-icon {
flex: 0 0 auto;
color: #0057b8;
font-size: 1.4rem;
line-height: 1;
}
.home-didattica-accordion-content {
padding: 0 1.1rem 1.1rem;
color: #455b71;
}
.home-didattica-accordion-content p {
margin: 0 0 .8rem;
}
.home-didattica-school-link,
.home-didattica-school-link:visited {
display: inline-flex;
align-items: center;
color: #0057b8;
font-weight: 700;
text-decoration: underline;
text-underline-offset: .15em;
}
.home-didattica-school-link:hover,
.home-didattica-school-link:focus {
color: #003b7a;
}
.home-didattica-cta {
display: flex;
justify-content: flex-end;
padding-top: 1.15rem;
}
.home-didattica-cta a {
display: inline-flex;
align-items: center;
padding: .72rem 1rem;
background: #0057b8;
color: #fff;
font-weight: 700;
text-decoration: none;
}
.home-didattica-cta a:hover,
.home-didattica-cta a:focus {
background: #003b7a;
color: #fff;
text-decoration: underline;
}
.home-didattica-cta a:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 3px;
}
@media (max-width: 767.98px) {
.home-didattica-content {
padding-top: 1.35rem;
padding-bottom: 1.65rem;
}
.home-didattica-layout {
grid-template-columns: 1fr;
}
.home-didattica-orders,
.home-didattica-offer {
padding: 1.2rem;
}
.home-didattica-order-buttons {
grid-template-columns: 1fr;
}
.home-didattica-offer-heading h3 {
font-size: 1.4rem;
}
.home-didattica-cta {
justify-content: stretch;
}
.home-didattica-cta a {
width: 100%;
justify-content: center;
text-align: center;
}
}
/* MIG-2026-001 - HOME SECTION 5 DIDATTICA END */
/* =========================================================
MIG-2026-001 - HOME SECTION 5 DIDATTICA - VISUAL 01
Blu elettrico + pattern Servizi + CTA in header
========================================================= */
/* Colore autorevole Didattica */
.home-didattica {
background: #0d00ff !important;
}
/* Banda titolo */
.home-didattica-band {
background: #0d00ff !important;
}
/*
* Pattern IDENTICO a HOME SECTION 4 SERVIZI:
* stessi gradienti, angoli, stop e opacita'.
*/
.home-didattica-pattern {
z-index: 1;
opacity: .34 !important;
background:
linear-gradient(
132deg,
transparent 0 59%,
rgba(255,255,255,.18) 59% 74%,
transparent 74%
),
linear-gradient(
42deg,
transparent 0 67%,
rgba(72,0,88,.28) 67% 83%,
transparent 83%
) !important;
background-size: auto !important;
}
/* Titolo e CTA sulla stessa linea */
.home-didattica-band-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
position: relative;
z-index: 2;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
}
.home-didattica-band h2 {
margin: 0;
color: #fff;
font-size: 2.15rem;
font-weight: 700;
line-height: 1.1;
}
/* CTA integrato nella banda */
.home-didattica-band-cta {
flex: 0 0 auto;
}
.home-didattica-band-cta a,
.home-didattica-band-cta a:visited {
color: #fff !important;
font-weight: 700;
text-decoration: underline;
text-underline-offset: .18em;
}
.home-didattica-band-cta a:hover,
.home-didattica-band-cta a:focus {
color: #fff !important;
text-decoration-thickness: .12em;
}
.home-didattica-band-cta a:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 3px;
}
/* Fascia sottostante: stesso blu principale */
.home-didattica-content {
background: #0d00ff !important;
}
/* Area destra accordion: stesso blu */
.home-didattica-offer {
background: #0d00ff !important;
}
/* Anche qui pattern identico a Servizi */
.home-didattica-offer::before {
opacity: .34 !important;
background:
linear-gradient(
132deg,
transparent 0 59%,
rgba(255,255,255,.18) 59% 74%,
transparent 74%
),
linear-gradient(
42deg,
transparent 0 67%,
rgba(72,0,88,.28) 67% 83%,
transparent 83%
) !important;
background-size: auto !important;
}
/* Testi intestazione destra sul nuovo fondo */
.home-didattica-kicker,
.home-didattica-offer-heading h3 {
color: #fff !important;
}
/*
* Il vecchio CTA inferiore non esiste piu' nel markup.
* Reset precauzionale se restasse qualche frammento cache.
*/
.home-didattica-cta {
display: none !important;
}
@media (max-width: 767.98px) {
.home-didattica-band-inner {
gap: .75rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.home-didattica-band h2 {
font-size: 1.75rem;
}
.home-didattica-band-cta {
max-width: 55%;
text-align: right;
}
.home-didattica-band-cta a {
font-size: .9rem;
line-height: 1.2;
}
}
/* MIG-2026-001 - HOME SECTION 5 DIDATTICA - VISUAL 01 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 5 DIDATTICA - VISUAL 02
Split footer-blue / didattica-blue + menu tab
========================================================= */
/* ---------------------------------------------------------
1. FASCIA INTRODUTTIVA
Sinistra blu footer, destra blu Didattica
--------------------------------------------------------- */
.home-didattica-band {
background:
linear-gradient(
to right,
#003183 0%,
#003183 31.5%,
#0d00ff 31.5%,
#0d00ff 100%
) !important;
}
/*
* Il pattern resta quello gia' allineato a Servizi.
* Si estende sopra entrambi i blocchi cromatici.
*/
.home-didattica-pattern {
z-index: 1;
}
/* ---------------------------------------------------------
2. FASCIA CONTENUTI
Stessa divisione cromatica
--------------------------------------------------------- */
.home-didattica {
background:
linear-gradient(
to right,
#003183 0%,
#003183 31.5%,
#0d00ff 31.5%,
#0d00ff 100%
) !important;
}
.home-didattica-content {
background:
linear-gradient(
to right,
#003183 0%,
#003183 31.5%,
#0d00ff 31.5%,
#0d00ff 100%
) !important;
}
/* ---------------------------------------------------------
3. COLONNA SINISTRA
--------------------------------------------------------- */
.home-didattica-orders {
overflow: visible !important;
background: #003183 !important;
color: #fff;
}
.home-didattica-orders::before {
opacity: .24;
}
/* Nuovo titolo */
.home-didattica-orders h3 {
color: #fff;
}
/* Un po' di spazio per la linguetta attiva */
.home-didattica-order-buttons {
position: relative;
padding-right: .8rem;
gap: .7rem;
}
/* ---------------------------------------------------------
4. VOCI MENU SINISTRO
Tab e non pulsanti tradizionali
--------------------------------------------------------- */
.home-didattica-order-button {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
width: 100%;
min-height: 3.2rem;
padding: .75rem .9rem .75rem 1rem;
background: #003183 !important;
color: #fff !important;
/*
* Contorno bianco aperto verso destra.
*/
border-top: 1px solid rgba(255,255,255,.78) !important;
border-bottom: 1px solid rgba(255,255,255,.78) !important;
border-left: 1px solid rgba(255,255,255,.78) !important;
border-right: 0 !important;
/*
* Stondato solo sul lato sinistro.
* Lato destro perfettamente rettangolare.
*/
border-radius: .65rem 0 0 .65rem !important;
box-shadow: none !important;
text-align: left;
font-weight: 600;
cursor: pointer;
transition:
background-color .15s ease-in-out,
transform .15s ease-in-out;
}
/* Freccia di esplorazione */
.home-didattica-order-button::after {
content: "›";
flex: 0 0 auto;
margin-left: auto;
color: #fff;
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
}
/* Hover non modifica la geometria */
.home-didattica-order-button:hover,
.home-didattica-order-button:focus {
background: #003183 !important;
color: #fff !important;
}
/* ---------------------------------------------------------
5. TAB ATTIVO
Linguetta che entra nel pannello destro
--------------------------------------------------------- */
.home-didattica-order-button.is-active {
z-index: 4;
width: calc(100% + 1.55rem);
background: #0d00ff !important;
color: #fff !important;
border: 1px solid #fff !important;
border-radius: .65rem 0 0 .65rem !important;
box-shadow:
.2rem .12rem .4rem rgba(0,0,0,.10) !important;
}
.home-didattica-order-button.is-active::after {
color: #fff;
}
/* ---------------------------------------------------------
6. PANNELLO DESTRO
--------------------------------------------------------- */
.home-didattica-offer {
position: relative;
z-index: 2;
background: #0d00ff !important;
}
/*
* La linguetta attiva deve sembrare provenire
* dal foglio sinistro e inserirsi nel pannello.
*/
.home-didattica-layout {
overflow: visible !important;
}
/* ---------------------------------------------------------
MOBILE
I due pannelli diventano naturalmente sovrapposti:
menu scuro seguito da foglio blu.
--------------------------------------------------------- */
@media (max-width: 767.98px) {
.home-didattica,
.home-didattica-content {
background: #0d00ff !important;
}
.home-didattica-band {
/*
* Su viewport stretto titolo e CTA devono restare
* leggibili: la banda principale resta Didattica.
*/
background: #0d00ff !important;
}
.home-didattica-orders {
background: #003183 !important;
}
.home-didattica-order-buttons {
padding-right: 0;
}
.home-didattica-order-button {
width: 100%;
}
.home-didattica-order-button.is-active {
/*
* Niente fuoriuscita laterale sul piccolo schermo:
* manteniamo comunque cromia e forma del tab.
*/
width: 100%;
}
.home-didattica-offer {
background: #0d00ff !important;
}
}
/* MIG-2026-001 - HOME SECTION 5 DIDATTICA - VISUAL 02 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 5 DIDATTICA - VISUAL 03
Allineamento split, tab unificato, heading unificato
========================================================= */
/* ---------------------------------------------------------
1. SPLIT ALLINEATO SINISTRA/DESTRA
Stesso taglio cromatico su fascia titolo e fascia contenuti
--------------------------------------------------------- */
.home-didattica-band {
position: relative;
overflow: hidden;
background:
linear-gradient(
to right,
#003183 0%,
#003183 31.5%,
#0d00ff 31.5%,
#0d00ff 100%
) !important;
}
.home-didattica,
.home-didattica-content {
position: relative;
background:
linear-gradient(
to right,
#003183 0%,
#003183 31.5%,
#0d00ff 31.5%,
#0d00ff 100%
) !important;
}
/* ---------------------------------------------------------
2. PATTERN GEOMETRICO TIPO SEZIONE 4
Applicato a entrambe le aree blu
--------------------------------------------------------- */
.home-didattica-band::before,
.home-didattica-orders::before,
.home-didattica-offer::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
135deg,
transparent 0 40%,
rgba(255,255,255,.08) 40% 58%,
transparent 58% 100%
),
linear-gradient(
45deg,
transparent 0 52%,
rgba(255,255,255,.06) 52% 68%,
transparent 68% 100%
),
linear-gradient(
315deg,
transparent 0 62%,
rgba(255,255,255,.05) 62% 76%,
transparent 76% 100%
);
background-size:
340px 100%,
280px 100%,
360px 100%;
background-repeat: repeat;
}
.home-didattica-band::before {
opacity: .45;
}
.home-didattica-orders::before {
opacity: .22;
}
.home-didattica-offer::before {
opacity: .20;
}
.home-didattica-band > *,
.home-didattica-orders > *,
.home-didattica-offer > * {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------
3. LAYOUT SENZA FUGA TRA SINISTRA E DESTRA
--------------------------------------------------------- */
.home-didattica-layout {
display: grid;
grid-template-columns: 31.5% 68.5%;
column-gap: 0 !important;
row-gap: 0 !important;
align-items: stretch;
overflow: visible !important;
}
.home-didattica-orders {
position: relative;
overflow: visible !important;
padding: 1.45rem 0 1.45rem 1.15rem !important;
background: transparent !important;
}
.home-didattica-order-buttons {
position: relative;
padding-right: 0 !important;
gap: .55rem;
}
.home-didattica-offer {
position: relative;
margin-left: 0 !important;
padding: 1.45rem 1.35rem 1.35rem 1.35rem !important;
background: transparent !important;
}
/* ---------------------------------------------------------
4. MENU SINISTRO
Tab non attivi = blu footer
Attivo = blu didattica fuso con pannello destro
--------------------------------------------------------- */
.home-didattica-orders h3 {
margin: 0 0 .9rem;
color: #fff !important;
font-size: 1rem !important;
font-weight: 700;
}
.home-didattica-order-button {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
width: 100%;
min-height: 3.1rem;
padding: .78rem 1rem .78rem 1rem;
background: #003183 !important;
color: #fff !important;
border-top: 1px solid rgba(255,255,255,.82) !important;
border-bottom: 1px solid rgba(255,255,255,.82) !important;
border-left: 1px solid rgba(255,255,255,.82) !important;
border-right: 0 !important;
border-radius: .85rem 0 0 .85rem !important;
box-shadow: none !important;
text-align: left;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
}
.home-didattica-order-button::after {
content: "›";
flex: 0 0 auto;
margin-left: auto;
color: #fff;
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
}
.home-didattica-order-button:hover,
.home-didattica-order-button:focus {
background: #003183 !important;
color: #fff !important;
}
.home-didattica-order-button.is-active {
z-index: 5;
width: calc(100% + 1.2rem);
margin-right: -1.2rem;
background: #0d00ff !important;
color: #fff !important;
border-top: 1px solid #fff !important;
border-bottom: 1px solid #fff !important;
border-left: 1px solid #fff !important;
border-right: 0 !important;
border-radius: .85rem 0 0 .85rem !important;
box-shadow: none !important;
}
.home-didattica-order-button.is-active::after {
color: #fff;
}
/* ---------------------------------------------------------
5. HEADING DESTRO
"La nostra offerta formativa" su una sola riga
con stesso font
--------------------------------------------------------- */
.home-didattica-offer-heading {
margin-bottom: .95rem;
}
.home-didattica-offer-heading > div {
display: flex;
align-items: baseline;
gap: .38rem;
flex-wrap: nowrap;
white-space: nowrap;
}
.home-didattica-kicker,
.home-didattica-offer-heading h3 {
margin: 0 !important;
color: #fff !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.home-didattica-kicker {
display: inline !important;
font-size: 1.08rem !important;
}
.home-didattica-offer-heading h3 {
display: inline !important;
font-size: 1.08rem !important;
}
/* ---------------------------------------------------------
6. CTA
Nessuna modifica strutturale, solo tenuta visiva
--------------------------------------------------------- */
.home-didattica-cta a {
white-space: nowrap;
}
/* ---------------------------------------------------------
7. MOBILE
Manteniamo l'impianto ma senza fuoriuscita orizzontale
--------------------------------------------------------- */
@media (max-width: 767.98px) {
.home-didattica-band {
background: #0d00ff !important;
}
.home-didattica,
.home-didattica-content {
background: #0d00ff !important;
}
.home-didattica-layout {
grid-template-columns: 1fr !important;
}
.home-didattica-orders {
background: #003183 !important;
padding: 1rem !important;
}
.home-didattica-offer {
background: #0d00ff !important;
padding: 1rem !important;
}
.home-didattica-order-button.is-active {
width: 100%;
margin-right: 0;
}
.home-didattica-offer-heading > div {
gap: .28rem;
}
.home-didattica-kicker,
.home-didattica-offer-heading h3 {
font-size: 1rem !important;
}
}
/* MIG-2026-001 - HOME SECTION 5 DIDATTICA - VISUAL 03 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 5 DIDATTICA - VISUAL 04
Eliminazione gradini, tab attivo allineato, pattern unificato
========================================================= */
:root {
--didattica-left-blue: #003b88; /* blu tipo footer */
--didattica-right-blue: #0d00ff; /* blu sezione didattica */
--didattica-split: 31.5%;
}
/* ---------------------------------------------------------
1. SFONDI ALLINEATI SENZA "GRADINI"
--------------------------------------------------------- */
.home-didattica-band,
.home-didattica-content,
.home-didattica {
position: relative;
background:
linear-gradient(
to right,
var(--didattica-left-blue) 0,
var(--didattica-left-blue) var(--didattica-split),
var(--didattica-right-blue) var(--didattica-split),
var(--didattica-right-blue) 100%
) !important;
}
/* pattern geometrico su tutta la fascia */
.home-didattica-band::before,
.home-didattica-orders::before,
.home-didattica-offer::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
135deg,
transparent 0 38%,
rgba(255,255,255,.08) 38% 58%,
transparent 58% 100%
),
linear-gradient(
45deg,
transparent 0 52%,
rgba(255,255,255,.06) 52% 68%,
transparent 68% 100%
),
linear-gradient(
315deg,
transparent 0 62%,
rgba(255,255,255,.05) 62% 76%,
transparent 76% 100%
);
background-size:
340px 100%,
280px 100%,
360px 100%;
background-repeat: repeat;
}
.home-didattica-band::before {
opacity: .35;
}
.home-didattica-orders::before {
opacity: .22;
}
.home-didattica-offer::before {
opacity: .18;
}
.home-didattica-band > *,
.home-didattica-orders > *,
.home-didattica-offer > * {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------
2. LAYOUT SINISTRA / DESTRA
--------------------------------------------------------- */
.home-didattica-layout {
display: grid;
grid-template-columns: var(--didattica-split) calc(100% - var(--didattica-split));
column-gap: 0 !important;
row-gap: 0 !important;
align-items: stretch;
}
.home-didattica-orders {
padding: 1.45rem 0 1.45rem 1.15rem !important;
margin: 0 !important;
background: transparent !important;
overflow: hidden !important;
}
.home-didattica-offer {
padding: 1.45rem 1.35rem 1.35rem 1.35rem !important;
margin: 0 !important;
background: transparent !important;
}
/* ---------------------------------------------------------
3. MENU SINISTRO
- niente sfondamento del tab attivo
- no gradini
--------------------------------------------------------- */
.home-didattica-orders h3 {
margin: 0 0 .9rem;
color: #fff !important;
font-size: 1rem !important;
font-weight: 700;
}
.home-didattica-order-buttons {
gap: .55rem;
padding-right: 0 !important;
}
.home-didattica-order-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
width: 100%;
min-height: 3.1rem;
margin: 0 !important;
padding: .78rem 1rem;
background: var(--didattica-left-blue) !important;
color: #fff !important;
border-top: 1px solid rgba(255,255,255,.82) !important;
border-bottom: 1px solid rgba(255,255,255,.82) !important;
border-left: 1px solid rgba(255,255,255,.82) !important;
border-right: 0 !important;
border-radius: .85rem 0 0 .85rem !important;
box-shadow: none !important;
text-align: left;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
}
.home-didattica-order-button::after {
content: "›";
flex: 0 0 auto;
margin-left: auto;
color: #fff;
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
}
.home-didattica-order-button:hover,
.home-didattica-order-button:focus {
background: var(--didattica-left-blue) !important;
color: #fff !important;
}
.home-didattica-order-button.is-active {
width: 100% !important;
margin: 0 !important;
background: var(--didattica-right-blue) !important;
color: #fff !important;
border-top: 1px solid #fff !important;
border-bottom: 1px solid #fff !important;
border-left: 1px solid #fff !important;
border-right: 0 !important;
border-radius: .85rem 0 0 .85rem !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------
4. TITOLO DESTRO
--------------------------------------------------------- */
.home-didattica-offer-heading {
margin-bottom: .95rem;
}
.home-didattica-offer-heading > div {
display: block;
white-space: nowrap;
}
.home-didattica-kicker,
.home-didattica-offer-heading h3 {
display: inline !important;
margin: 0 !important;
color: #fff !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.home-didattica-kicker {
font-size: 1rem !important;
}
.home-didattica-offer-heading h3 {
font-size: 1.08rem !important;
}
/* ---------------------------------------------------------
5. MENU ACCORDION DESTRO
- testo maiuscolo
- plus molto più grande
--------------------------------------------------------- */
.home-didattica-accordion-button {
text-transform: uppercase !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
.home-didattica-accordion-icon {
font-size: 2rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
/* ---------------------------------------------------------
6. CTA
--------------------------------------------------------- */
.home-didattica-cta a {
white-space: nowrap;
}
/* ---------------------------------------------------------
7. MOBILE
--------------------------------------------------------- */
@media (max-width: 767.98px) {
.home-didattica-band,
.home-didattica-content,
.home-didattica {
background: var(--didattica-right-blue) !important;
}
.home-didattica-layout {
grid-template-columns: 1fr !important;
}
.home-didattica-orders {
background: var(--didattica-left-blue) !important;
padding: 1rem !important;
}
.home-didattica-offer {
background: var(--didattica-right-blue) !important;
padding: 1rem !important;
}
.home-didattica-order-button,
.home-didattica-order-button.is-active {
width: 100% !important;
margin: 0 !important;
}
.home-didattica-accordion-icon {
font-size: 2.15rem !important;
}
}
/* MIG-2026-001 - HOME SECTION 5 DIDATTICA - VISUAL 04 END */
/* =========================================================
MIG-2026-001 - HOME SECTION 5 DIDATTICA - VISUAL 05
Split superiore allineato al container inferiore
Pattern Servizi continuo sui due blu
========================================================= */
/*
* La banda esterna non decide piu' il punto di split.
* Lo split viene calcolato sullo stesso container
* utilizzato dal menu sottostante.
*/
.home-didattica-band {
position: relative;
overflow: hidden;
background: transparent !important;
}
/*
* Il vecchio layer unico non serve piu':
* il pattern viene disegnato separatamente sui due lati.
*/
.home-didattica-band > .home-didattica-pattern {
display: none !important;
}
.home-didattica-band-inner {
position: relative;
z-index: 1;
display: grid !important;
grid-template-columns:
var(--didattica-split)
calc(100% - var(--didattica-split));
align-items: center;
gap: 0 !important;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
}
/* ---------------------------------------------------------
LATO SINISTRO DELLA BANDA
Blu footer + pattern identico a Servizi
--------------------------------------------------------- */
.home-didattica-band-inner::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: calc((100vw - 100%) / -2);
width: calc(
(100vw - 100%) / 2
+ var(--didattica-split)
);
background-color: #003183;
background-image:
linear-gradient(
132deg,
transparent 0 59%,
rgba(255,255,255,.18) 59% 74%,
transparent 74%
),
linear-gradient(
42deg,
transparent 0 67%,
rgba(72,0,88,.28) 67% 83%,
transparent 83%
);
opacity: 1;
pointer-events: none;
}
/* ---------------------------------------------------------
LATO DESTRO DELLA BANDA
Blu Didattica + stesso identico pattern
--------------------------------------------------------- */
.home-didattica-band-inner::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: var(--didattica-split);
width: calc(
(100vw - 100%) / 2
+ 100%
- var(--didattica-split)
);
background-color: #0d00ff;
background-image:
linear-gradient(
132deg,
transparent 0 59%,
rgba(255,255,255,.18) 59% 74%,
transparent 74%
),
linear-gradient(
42deg,
transparent 0 67%,
rgba(72,0,88,.28) 67% 83%,
transparent 83%
);
opacity: 1;
pointer-events: none;
}
/* Titolo esattamente nella colonna sinistra */
.home-didattica-band h2 {
grid-column: 1;
justify-self: start;
position: relative;
z-index: 2;
}
/* CTA esattamente nella colonna destra */
.home-didattica-band-cta {
grid-column: 2;
justify-self: end;
position: relative;
z-index: 2;
}
/* ---------------------------------------------------------
PANNELLO SINISTRO SOTTOSTANTE
Rafforziamo lo stesso pattern della fascia superiore
senza cambiare pulsanti/layout.
--------------------------------------------------------- */
.home-didattica-orders::before {
background:
linear-gradient(
132deg,
transparent 0 59%,
rgba(255,255,255,.18) 59% 74%,
transparent 74%
),
linear-gradient(
42deg,
transparent 0 67%,
rgba(72,0,88,.28) 67% 83%,
transparent 83%
) !important;
opacity: .34 !important;
background-size: auto !important;
}
/* Anche destra resta nella stessa grammatica geometrica */
.home-didattica-offer::before {
background:
linear-gradient(
132deg,
transparent 0 59%,
rgba(255,255,255,.18) 59% 74%,
transparent 74%
),
linear-gradient(
42deg,
transparent 0 67%,
rgba(72,0,88,.28) 67% 83%,
transparent 83%
) !important;
opacity: .34 !important;
background-size: auto !important;
}
/*
* DESKTOP:
* pulsanti sinistri congelati - nessuna modifica.
*/
/* VISUAL 05 mobile verra' valutato solo dopo PASS desktop. */
/* MIG-2026-001 - HOME SECTION 5 DIDATTICA - VISUAL 05 END */