/* ============================================================ Scuola Intelligente — sistema di design Montserrat · palette #b5c0e3 #1993b8 #2f55a0 #223a7e #1a3e77 ============================================================ */ /* * Un elemento con «hidden» sta nascosto, punto. * * L'attributo hidden è nascosto dal foglio di stile del browser con una * regola display:none che vale quanto una qualunque regola di classe — quindi * la prima classe che dichiara un display la batte, e l'elemento resta in * vista anche dopo che il JavaScript lo ha nascosto. È il motivo per cui il * pannello della modifica rapida non si chiudeva: la × faceva il suo lavoro, * ma «.si-quick-panel{display:flex}» lo teneva sullo schermo. Vale una volta * per tutte, invece che rattoppato caso per caso. */ [hidden]{display:none !important} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important} } body{ margin:0; background:var(--page); color:var(--body); font-family:var(--f); font-size:var(--fs-base); line-height:var(--lh-base); font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg{display:block; max-width:100%} a{color:var(--blue); text-decoration:none} a:hover{color:var(--ink)} button{font:inherit; color:inherit; border:0; background:none; cursor:pointer} :focus-visible{outline:var(--focus-w) solid var(--focus); outline-offset:3px; border-radius:4px} .dark :focus-visible, .hero :focus-visible{outline-color:var(--accent-lt)} .skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:14px 22px; border-radius:0 0 var(--r-sm) 0; font-weight:700; font-size:14px} .skip:focus{left:0; color:#fff} .wrap{max-width:var(--max); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)} .sec{padding-top:var(--sec); padding-bottom:var(--sec)} .tint{background:var(--tint)} .tint2{background:var(--tint2)} /* ---------- tipografia ---------- */ h1,h2,h3,h4,h5,h6{font-family:var(--f-display); color:var(--ink); margin:0; font-weight:var(--fw-heading); letter-spacing:var(--ls-heading); text-wrap:var(--tw-heading)} .display,h1{font-size:clamp(var(--fs-h1-min),5.6vw,var(--fs-h1-max)); line-height:1.03; letter-spacing:var(--ls-h1)} h2,.h2{font-size:clamp(var(--fs-h2-min),3.5vw,var(--fs-h2-max)); line-height:1.08; letter-spacing:var(--ls-h2)} h3,.h3{font-size:clamp(19px,1.5vw,22px); line-height:1.28; font-weight:700; letter-spacing:var(--ls-h3)} h4{font-size:17px; line-height:1.3; letter-spacing:var(--ls-h3)} .eyebrow{font-size:12px; font-weight:800; letter-spacing:var(--ls-label); text-transform:var(--tt-label); color:var(--accent-tx); margin:0 0 18px; display:flex; align-items:center; gap:12px} .eyebrow::before{content:""; width:26px; height:3px; background:var(--accent); border-radius:2px; flex:0 0 auto} .eyebrow.ctr{justify-content:center} .lead{font-size:clamp(17px,1.35vw,19.5px); line-height:1.62; color:var(--muted); margin:0} .lead-lg{font-size:clamp(19px,1.7vw,24px); line-height:1.5; color:var(--body); font-weight:500; margin:0} .small{font-size:14px; line-height:1.55; color:var(--muted)} .num{font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-.02em} .mw{max-width:62ch} .ctr{text-align:center} .ctr .lead{margin-left:auto; margin-right:auto} /* ---------- bottoni ---------- */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:15.5px; letter-spacing:-.005em; padding:16px 30px; border-radius:var(--r-pill); transition:background .18s, color .18s, transform .18s, box-shadow .18s, border-color .18s; white-space:nowrap} .btn:active{transform:translateY(1px)} .btn-p{background:var(--deep); color:#fff; box-shadow:0 10px 24px -10px rgba(26,62,119,.6)} .btn-p:hover{background:var(--ink); color:#fff; box-shadow:0 16px 34px -12px rgba(26,62,119,.7)} .btn-a{background:var(--accent-tx); color:#fff; box-shadow:0 10px 24px -10px rgba(18,115,144,.55)} .btn-a:hover{background:#0E5F79; color:#fff} .btn-o{border:1.6px solid var(--line); color:var(--ink); background:#fff} .btn-o:hover{border-color:var(--blue); color:var(--blue); background:#fff} .btn-w{background:#fff; color:var(--ink)} .btn-w:hover{background:var(--tint); color:var(--ink)} .btn-gho{border:1.6px solid rgba(181,192,227,.45); color:#fff} .btn-gho:hover{border-color:#fff; background:rgba(255,255,255,.08); color:#fff} .btn-sm{padding:12px 22px; font-size:14px} .btn .sub{display:block; font-weight:500; font-size:11.5px; letter-spacing:.02em; opacity:.8; margin-top:1px} .btn.stack{flex-direction:column; align-items:flex-start; gap:0; text-align:left; padding-top:12px; padding-bottom:12px} .btn svg{width:17px; height:17px; flex:0 0 auto} .btnrow{display:flex; gap:14px; flex-wrap:wrap; align-items:center} .tlink{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--blue); border-bottom:2px solid transparent; transition:border-color .18s, gap .18s} .tlink:hover{border-bottom-color:var(--blue); gap:12px} .tlink.on-dark,.dark .tlink,.cta-band .tlink{color:var(--accent-lt)} .tlink.on-dark:hover,.dark .tlink:hover,.cta-band .tlink:hover{border-bottom-color:var(--accent-lt); color:var(--accent-lt)} .tlink svg{width:16px; height:16px; flex:0 0 auto} /* ---------- ribbon prototipo ---------- */ .ribbon{background:var(--deepest); color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.02em} .ribbon .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:9px; padding-bottom:9px; flex-wrap:wrap} .ribbon b{color:var(--accent-lt); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:11px} .ribbon span{color:var(--light); font-weight:500} /* ---------- header ---------- */ .hdr{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s} .hdr.stuck{border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(22,48,93,.4)} .hdr .wrap{display:flex; align-items:center; gap:clamp(16px,2.4vw,40px); padding-top:15px; padding-bottom:15px} .logo{display:flex; align-items:center; gap:11px; flex:0 0 auto} .logo .gl{width:38px; height:38px; color:#fff; border-radius:11px; background:linear-gradient(140deg,var(--deep) 0%,var(--blue) 100%); display:grid; place-items:center; box-shadow:0 6px 14px -6px rgba(26,62,119,.7)} .logo .gl svg{width:21px; height:21px} .logo .tx b{display:block; font-weight:800; font-size:16.5px; color:var(--ink); letter-spacing:-.02em; line-height:1.1} .logo .tx span{display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em; color:var(--muted); text-transform:uppercase} /* * Chi cede, quando nella barra non ci sta tutto. * * Logo, menu e pulsante vivono in una riga larga al massimo quanto il * contenuto: 1240 pixel, anche su un monitor da 1920. Con il logo vero * caricato — duecento pixel, più il nome accanto — e le voci scritte per * esteso, quella riga va in sofferenza: marchio 353, menu 687, pulsante * 167, più gli spazi. Sono una trentina di pixel di troppo, e qualcosa deve * cedere. * * Le due volte precedenti ha ceduto la cosa sbagliata. Prima il pulsante * finiva sopra l'ultima voce del menu. Poi, lasciando andare a capo l'intera * riga, il pulsante si staccava e si piazzava da solo sotto il menu, a * sinistra: è la schermata che mi è arrivata. * * Qui cede il menu, e solo lui. La riga non va mai a capo — logo a sinistra, * pulsante a destra, sempre —; è il menu che si stringe e, all'occorrenza, * manda le ultime voci su una seconda riga. Il caso peggiore diventa un menu * su due righe, che è brutto ma si legge, mentre logo e pulsante restano al * loro posto. Perché capiti il meno possibile, lo spazio fra i tre blocchi è * il minimo che serve a separarli: il menu ha già «margin-left:auto», che da * solo lo stacca dal logo, e ogni pixel di stacco in più è un pixel tolto * alle voci. */ .nav{display:flex; align-items:center; flex-wrap:wrap; row-gap:6px; min-width:0; flex:0 1 auto; gap:var(--menu-gap); margin-left:auto} .hdr .wrap{flex-wrap:nowrap; gap:clamp(14px,1.4vw,24px)} .hdr .logo{flex:0 0 auto} /* * La barra in alto è più larga del testo, sugli schermi larghi. * * Fin qui logo, menu e pulsante si dividevano i 1240 pixel del contenuto — * anche su un monitor da 1920, con seicentottanta pixel liberi per lato che * nessuno usava. Con un logo di una certa misura non ci stavano, e il menu * finiva su due righe: non perché lo schermo fosse piccolo, ma perché la * barra si era messa un limite che lì non serviva a niente. * * Il testo lungo continua a fermarsi a 1240, che è la misura giusta per * leggere. La barra no: una riga di tre elementi non ha nessun bisogno di * stare stretta. Sotto i 1280 non cambia niente — il limite non è più il * massimo, è lo schermo — quindi portatili e tablet restano come prima. * * Resta tutto quello di prima come rete: il menu si stringe e va a capo se * proprio non ci sta. Solo che adesso «non ci sta» capita molto più di rado. * * Si spegne da Personalizza → Intestazione. Chi vuole il logo allineato al * testo della pagina — com'era nel prototipo approvato — toglie la spunta e * torna esattamente com'era, menu su due righe compreso. */ .si-hdr-wide .hdr .wrap, .si-hdr-wide .ribbon .wrap{max-width:max(var(--max), min(calc(100vw - 72px), 1560px))} .nav a{font-size:var(--menu-fs); font-weight:600; color:var(--body); padding:6px 0; border-bottom:2px solid transparent; transition:color .16s, border-color .16s; white-space:nowrap} .nav a:hover{color:var(--ink); border-bottom-color:var(--light)} .nav a[aria-current]{color:var(--ink); font-weight:700; border-bottom-color:var(--accent)} .hdr-cta{flex:0 0 auto; white-space:nowrap} .burger{display:none; margin-left:auto; width:44px; height:44px; border-radius:12px; border:1.6px solid var(--line); align-items:center; justify-content:center} .burger:hover{border-color:var(--blue)} .burger span{display:block; width:19px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:transform .2s, background .2s} .burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s} .burger span::before{top:-6px} .burger span::after{top:6px} .burger[aria-expanded="true"] span{background:transparent} .burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)} .mobnav{display:none} /* Aspetto del pannello di menu compatto. A quale larghezza si mostra — e con esso la scomparsa di navigazione e pulsante — lo decide il CSS generato dalle impostazioni, che conosce il punto di rottura scelto: qui c'è solo come è fatto. */ .mobnav{border-top:1px solid var(--line); background:var(--page)} .mobnav ul{list-style:none; margin:0; padding:10px var(--gut) 18px} .mobnav li{border-bottom:1px solid var(--line)} .mobnav li:last-child{border-bottom:0} .mobnav a{display:block; padding:15px 2px; font-size:16px; font-weight:600; color:var(--ink)} .mobnav .btn{width:100%; margin-top:16px} /* ---------- hero scuro ---------- */ .dark{background:var(--deep); color:#fff; position:relative; overflow:hidden} .dark::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(900px 520px at 82% -10%, rgba(25,147,184,.42), transparent 62%), radial-gradient(700px 500px at 8% 105%, rgba(47,85,160,.55), transparent 60%);} .dark .wrap{position:relative; z-index:1} .dark h1,.dark h2,.dark h3{color:#fff} .dark .lead{color:var(--light)} .dark .eyebrow{color:var(--accent-lt)} .dark .eyebrow::before{background:var(--accent-lt)} .grid-lines{position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:linear-gradient(to right, rgba(181,192,227,.10) 1px, transparent 1px); background-size:clamp(60px,7vw,104px) 100%;} /* ---------- card ---------- */ .card{background:var(--page); border:var(--card-border) solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); transition:transform .2s, box-shadow .2s, border-color .2s} .card.lift:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#C9D5EE} .card-p{padding:clamp(22px,2.4vw,30px)} .grid{display:grid; gap:clamp(14px,1.6vw,22px)} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1000px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:760px){ .g3,.g2{grid-template-columns:1fr} } @media (max-width:520px){ .g4{grid-template-columns:1fr} } .ico{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto} .ico svg{width:22px; height:22px} /* ---------- striscia numeri ---------- */ .stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:860px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} } .stats>div{padding:clamp(24px,3vw,38px) clamp(16px,2vw,30px); border-right:1px solid var(--line-dk)} .stats>div:last-child{border-right:0} @media (max-width:860px){ .stats>div:nth-child(2n){border-right:0} .stats>div:nth-child(-n+2){border-bottom:1px solid var(--line-dk)} } .stats .k{font-size:clamp(28px,3.4vw,42px); font-weight:800; letter-spacing:-.03em; color:#fff; line-height:1; font-variant-numeric:tabular-nums} .stats .k em{font-style:normal; color:var(--accent-lt)} .stats .v{font-size:13.5px; font-weight:500; color:var(--light); margin-top:10px; line-height:1.45} /* ---------- media ---------- */ .figure{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3); background:var(--tint); --si-ar:16/9; --si-fit:cover; --si-pos:50% 50%} /* Il fondo scelto per questa foto vince su quello del tema. */ .figure.si-bg-set{background:var(--si-bg)} /* Senza fondo non c'è più un riquadro: niente ombra e niente angoli arrotondati. L'arrotondamento con «overflow:hidden» rasa i quattro angoli di quello che sta dentro — su una fotografia non si nota, su un logo che arriva ai bordi si mangia le punte. */ .figure.si-bg-none{box-shadow:none; border-radius:0} /* Margine interno: la foto non tocca i bordi del riquadro. Serve ai loghi, che altrimenti finiscono sotto l'arrotondamento. */ .figure{box-sizing:border-box; padding:var(--si-pad,0)} .figure img{width:100%; height:100%; aspect-ratio:var(--si-ar); object-fit:var(--si-fit); object-position:var(--si-pos)} .figure.tall{--si-ar:5/6} .figure.wide{--si-ar:16/9} .figure.sq{--si-ar:1/1} /* «L'area segue la foto»: nessuna proporzione imposta, quindi nessun taglio e nessuna aria intorno — l'immagine si vede intera, alta quanto è. */ .figure.si-fit-free img{aspect-ratio:auto; height:auto} /* «Tutta la foto» dentro un'area di proporzioni fisse: quello che resta è aria, e va riempita con una tinta invece di restare bianca a caso. */ .figure.si-fit-contain{background:var(--tint)} .figure.si-fit-contain.on-dark{background:color-mix(in srgb, var(--deepest) 60%, transparent)} /* …ma se il fondo è stato scelto, è quello che conta. */ .figure.si-fit-contain.si-bg-set, .figure.si-fit-contain.on-dark.si-bg-set{background:var(--si-bg)} .fig-frame{position:relative} .fig-frame.plate::before{content:""; position:absolute; inset:-16px -16px 26px 26px; border-radius:var(--r-xl); background:linear-gradient(150deg,var(--accent) 0%,var(--blue) 100%); opacity:.16; z-index:0} .fig-frame .figure{position:relative; z-index:1} .stats .k.sm{font-size:clamp(24px,2.7vw,34px)} .fig-tag{position:absolute; z-index:2; background:#fff; border-radius:var(--r); box-shadow:var(--sh-3); padding:16px 20px; max-width:250px} .fig-tag .k{font-size:24px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1} .fig-tag .v{font-size:12.5px; font-weight:500; color:var(--muted); margin-top:5px; line-height:1.4} /* ---------- elenco spuntato ---------- */ .checks{list-style:none; margin:0; padding:0; display:grid; gap:14px} .checks li{display:flex; gap:13px; align-items:flex-start; font-size:16px; line-height:1.55; color:var(--body)} .checks li b{color:var(--ink); font-weight:700} .checks .ck{flex:0 0 auto; width:23px; height:23px; border-radius:50%; background:var(--accent-tx); display:grid; place-items:center; margin-top:2px} .checks .ck svg{width:12px; height:12px} .dark .checks li{color:var(--light)} .dark .checks li b{color:#fff} .dark .checks .ck{background:var(--accent-lt)} .dark .checks .ck svg path{stroke:var(--deepest)} /* ---------- badge ---------- */ .badge{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:7px 14px; border-radius:var(--r-pill)} .badge.b-ok{background:var(--ok-bg); color:var(--ok)} .badge.b-adv{background:var(--warn-bg); color:var(--warn)} .badge.b-acc{background:rgba(25,147,184,.12); color:var(--accent-tx)} .badge.b-dark{background:rgba(255,255,255,.12); color:#fff} .badge.b-out{border:1.4px solid var(--line); color:var(--muted); background:#fff} /* ---------- CTA finale ---------- */ .cta-band{background:linear-gradient(125deg,var(--accent-tx) 0%,var(--blue) 46%,var(--deep) 100%); color:#fff; position:relative; overflow:hidden} .cta-band::after{content:""; position:absolute; inset:0; background:radial-gradient(600px 400px at 88% 15%, rgba(255,255,255,.16), transparent 60%); pointer-events:none} .cta-band h2{color:#fff} .cta-band p{color:#E4EBF7} /* ---------- footer ---------- */ .ft{background:var(--deepest); color:var(--light); font-size:14.5px} .ft h4{color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:0 0 18px} .ft a{color:var(--light)} .ft a:hover{color:#fff} .ft .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(28px,3vw,52px); padding-top:clamp(48px,6vw,76px); padding-bottom:44px} @media (max-width:900px){ .ft .cols{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .ft .cols{grid-template-columns:1fr} } .ft ul{list-style:none; margin:0; padding:0; display:grid; gap:11px} .ft .logo .tx b{color:#fff} .ft .logo .tx span{color:var(--light)} .ft .logo .gl{background:linear-gradient(140deg,var(--blue) 0%,var(--accent) 100%)} .ft .base{border-top:1px solid #22355E; padding:22px 0; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:13px; color:#8B9BC6} .ft .base p{margin:0} /* ---------- form ---------- */ .field{display:grid; gap:7px} .field label{font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.01em} .field label .req{color:#A3282B; margin-left:2px} .field input,.field textarea,.field select{font:inherit; font-size:15px; width:100%; padding:14px 16px; border-radius:var(--r-sm); border:1.6px solid var(--line); background:#fff; color:var(--ink); transition:border-color .16s, box-shadow .16s} .field input::placeholder,.field textarea::placeholder{color:#8E9BBE} .field input:hover,.field textarea:hover,.field select:hover{border-color:#C3D0EA} .field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent-tx); box-shadow:0 0 0 3px rgba(18,115,144,.16)} .field .hint{font-size:12.5px; color:var(--muted)} .consent{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--muted)} .consent input{width:18px; height:18px; margin-top:2px; accent-color:var(--accent-tx); flex:0 0 auto} .formmsg{border-radius:var(--r-sm); padding:13px 16px; font-size:14.5px; font-weight:600; margin-top:4px} .formmsg.ok{background:var(--ok-bg); color:var(--ok)} .formmsg[hidden]{display:none} /* ---------- utilità ---------- */ /* La proporzione fra testo e immagine si può cambiare per pagina: senza una variabile, l'unico modo di far vedere una schermata più grande era rifare il foglio di stile. */ .split{display:grid; grid-template-columns:var(--si-col-tx,1.05fr) var(--si-col-img,.95fr); gap:clamp(32px,5vw,80px); align-items:center} .split.rev>*:first-child{order:2} @media (max-width:900px){ .split{grid-template-columns:1fr; gap:40px} .split.rev>*:first-child{order:0} } .rule{height:1px; background:var(--line); border:0; margin:0} .dark .rule{background:var(--line-dk)} .reveal{opacity:1} /* elenco funzioni dentro le card modulo */ .mfeat{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:9px; font-size:13.5px; color:var(--muted); line-height:1.45} .mfeat li{position:relative; padding-left:15px} .mfeat li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--light)} .card.flag{border-color:#BFD3EF; box-shadow:0 2px 4px rgba(22,48,93,.07), 0 22px 44px -22px rgba(47,85,160,.32)} .card .rec{display:none} .card.flag .rec{display:inline-flex} /* ============ PAGINE INTERNE ============ */ /* ---------- page hero ---------- */ .phero{padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(48px,6vw,84px)} .phero .crumb{display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--light); margin:0 0 26px; flex-wrap:wrap} .phero .crumb a{color:var(--light); border-bottom:1px solid rgba(181,192,227,.4)} .phero .crumb a:hover{color:#fff; border-bottom-color:#fff} .phero .crumb span[aria-current]{color:#fff} .phero .crumb i{opacity:.5; font-style:normal} .phero h1{font-size:clamp(31px,4.4vw,54px); line-height:1.06; letter-spacing:-.028em; max-width:22ch} .phero .lead{margin-top:22px; max-width:56ch} .phero-split{display:grid; grid-template-columns:minmax(0,var(--si-col-tx,1.1fr)) minmax(0,var(--si-col-img,.9fr)); gap:clamp(30px,4vw,64px); align-items:end} @media (max-width:940px){ .phero-split{grid-template-columns:1fr; gap:34px} } /* ---------- blocco a due colonne problema/soluzione ---------- */ .duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,26px)} @media (max-width:800px){ .duo{grid-template-columns:1fr} } .duo>div{border-radius:var(--r-lg); padding:clamp(26px,3vw,36px); border:1px solid var(--line)} .duo .neg{background:var(--tint2)} .duo .neg .tag{color:#8A5A05} .duo .pos{background:linear-gradient(170deg,#ECF7FB 0%,#F5FBFD 100%); border-color:#C3E2ED} .duo .pos .tag{color:var(--accent-tx)} .duo .tag{display:block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px} .duo h3{margin-bottom:12px; font-size:clamp(20px,1.8vw,24px)} .duo p{margin:0; font-size:16px; line-height:1.6; color:var(--body)} /* ---------- chip modulo compatta ---------- */ .mgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px} @media (max-width:1000px){ .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))} } .mlink{display:flex; align-items:center; gap:12px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; transition:border-color .18s, box-shadow .18s, transform .18s} .mlink:hover{border-color:#BFD3EF; box-shadow:var(--sh-2); transform:translateY(-2px)} .mlink .ico{width:38px; height:38px; border-radius:11px} .mlink .ico svg{width:19px; height:19px} .mlink b{font-size:14.5px; font-weight:700; color:var(--ink); display:block; line-height:1.2} .mlink em{font-style:normal; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-tx); display:block; margin-top:2px} .dark .mlink{background:rgba(255,255,255,.06); border-color:#33538D} .dark .mlink b{color:#fff} .dark .mlink:hover{border-color:var(--accent-lt); background:rgba(255,255,255,.1)} .dark .mlink .ico{background:rgba(255,255,255,.12)!important; color:var(--accent-lt)!important} /* ---------- scheda modulo estesa ---------- */ .mrow{display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:clamp(24px,3vw,48px); padding:clamp(28px,3.4vw,42px) 0; border-top:1px solid var(--line)} @media (max-width:860px){ .mrow{grid-template-columns:1fr; gap:20px} } .mrow:first-of-type{border-top:0; padding-top:0} .mrow .head{display:flex; align-items:flex-start; gap:14px} .mrow h2{font-size:clamp(23px,2.2vw,29px); margin:0 0 8px} .mrow .head .ico{width:50px; height:50px; border-radius:14px} .mrow .head .ico svg{width:24px; height:24px} .mrow .desc{font-size:16px; line-height:1.6; color:var(--muted); margin:0} .frow{list-style:none; margin:0; padding:0; display:grid; gap:0} .frow li{display:grid; grid-template-columns:minmax(120px,.3fr) 1fr; gap:6px 22px; padding:13px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.5} .frow li:first-child{padding-top:0} .frow li:last-child{border-bottom:0} .frow b{color:var(--ink); font-weight:700} .frow span{color:var(--body)} @media (max-width:560px){ .frow li{grid-template-columns:1fr; gap:3px} } /* ---------- documenti ---------- */ .dlbig{display:flex; align-items:center; gap:clamp(18px,2.4vw,28px); padding:clamp(22px,2.6vw,30px); border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; transition:border-color .18s, box-shadow .18s, transform .18s} .dlbig:hover{border-color:#BFD3EF; box-shadow:var(--sh-2); transform:translateY(-2px)} .dlbig .pg{flex:0 0 auto; width:64px; height:80px; border-radius:8px; background:linear-gradient(160deg,var(--deep),var(--blue)); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:800; letter-spacing:.08em; box-shadow:var(--sh-2)} .dlbig h3{margin:0 0 6px} .dlbig p{margin:0; font-size:13.5px; color:var(--muted); font-weight:600} .dlbig .go{margin-left:auto; flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:1.6px solid var(--line); display:grid; place-items:center; color:var(--blue)} .dlbig:hover .go{border-color:var(--blue); background:var(--blue); color:#fff} .dlbig .go svg{width:17px; height:17px} .dlsm{display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:#fff; transition:border-color .18s, box-shadow .18s} .dlsm:hover{border-color:#BFD3EF; box-shadow:var(--sh-1)} .dlsm .ico{width:36px; height:36px; border-radius:10px} .dlsm .ico svg{width:18px; height:18px} .dlsm b{display:block; font-size:14px; font-weight:700; color:var(--ink); line-height:1.2} /* * Solo la riga sotto il titolo, non ogni span della scheda. * * «.dlsm span» colpiva anche lo span dell'icona — che è uno span — e gli * dava «display:block» e un margine sopra, cancellando il «display:grid; * place-items:center» con cui l'icona centra il proprio segno. Il risultato: * il simbolo appoggiato in alto a sinistra nel suo quadrato colorato invece * che in mezzo, e il quadrato spostato di due pixel rispetto al testo. Si * vede su tutte le schede piccole, e da fuori sembra un difetto delle icone. */ .dlsm > span:not(.ico){min-width:0} .dlsm > span:not(.ico) > span{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-top:2px} /* ---------- video ---------- */ .vcard{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; transition:border-color .18s, box-shadow .18s, transform .18s; display:block} .vcard:hover{border-color:#BFD3EF; box-shadow:var(--sh-2); transform:translateY(-3px)} .vthumb{position:relative; aspect-ratio:var(--si-ar,16/9); background:linear-gradient(150deg,var(--deep) 0%,var(--deepest) 100%); display:grid; place-items:center; overflow:hidden; --si-fit:cover; --si-pos:50% 50%} .vthumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:var(--si-fit); object-position:var(--si-pos)} .vthumb.si-bg-set{background:var(--si-bg)} .vthumb.si-fit-free{aspect-ratio:auto} .vthumb.si-fit-free img{position:relative; height:auto} .vthumb::after{content:""; position:absolute; inset:0; background:radial-gradient(420px 260px at 70% 20%, rgba(25,147,184,.36), transparent 62%)} .vthumb .play{position:relative; z-index:1; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.94); display:grid; place-items:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.6)} .vthumb .play svg{width:20px; height:20px; margin-left:2px; color:var(--deep)} .vcard:hover .vthumb .play{background:#fff; transform:scale(1.06)} .vthumb .dur{position:absolute; z-index:1; right:11px; bottom:11px; background:rgba(9,20,42,.86); color:#fff; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:6px; font-variant-numeric:tabular-nums} /* * Il riquadro del testo sotto la miniatura è uno , quindi di suo è * inline — e su un elemento inline che contiene dei blocchi il riempimento * non regge: il titolo e la riga sotto finivano appoggiati al bordo della * scheda, a un pixel, mentre il foglio di stile dichiarava diciannove. * Dichiararlo blocco è tutto quello che serviva. */ .vmeta{display:block; padding:17px 19px 19px} .vmeta b{display:block; font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.32; letter-spacing:-.008em} .vmeta span{display:block; font-size:12.5px; font-weight:600; color:var(--accent-tx); margin-top:7px; letter-spacing:.03em} /* ---------- partner ---------- */ .pcard{border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; padding:clamp(26px,3vw,38px); display:grid; gap:18px} .pcard .top{display:flex; align-items:center; gap:14px; flex-wrap:wrap} .pcard h2{font-size:clamp(22px,2vw,27px); margin:0} .pcard p{margin:0; font-size:15.5px; line-height:1.62; color:var(--body)} .isos{display:flex; flex-wrap:wrap; gap:7px; padding-top:4px; border-top:1px solid var(--line); margin-top:2px} .iso{font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--muted); border:1.4px solid var(--line); border-radius:6px; padding:5px 9px; background:var(--tint2); margin-top:14px} /* ---------- sedi ---------- */ .venues{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px} @media (max-width:860px){ .venues{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .venues{grid-template-columns:1fr} } .venue{border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; background:#fff} .venue b{display:block; font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.01em} .venue span{display:block; font-size:13px; color:var(--muted); margin-top:4px; font-weight:600} .venue.main{border-color:#BFD3EF; background:linear-gradient(170deg,#F4F8FD,#fff); box-shadow:var(--sh-1)} /* ---------- prose (pagine legali) ---------- */ .prose{max-width:min(70ch,100%); width:100%} .prose h2{font-size:clamp(21px,2vw,26px); margin:44px 0 14px} .prose h2:first-child{margin-top:0} .prose h3{font-size:17.5px; margin:28px 0 10px} .prose p{margin:0 0 16px; font-size:16.5px; line-height:1.68} .prose ul,.prose ol{margin:0 0 18px; padding-left:22px} .prose li{margin-bottom:9px; font-size:16.5px; line-height:1.6} .prose li b{color:var(--ink)} .prose .meta{font-size:13.5px; color:var(--muted); font-weight:600; border-left:3px solid var(--accent); padding:4px 0 4px 15px; margin:0 0 30px} .dtable{width:100%; border-collapse:collapse; font-size:15px; margin:0 0 22px; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden} .dtable th,.dtable td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top} .dtable th{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--tint2)} .dtable tbody th{font-size:15px; text-transform:none; letter-spacing:0; color:var(--ink); background:#fff; font-weight:700; white-space:nowrap} .dtable tr:last-child th,.dtable tr:last-child td{border-bottom:0} .tocbox{border:1px solid var(--line); border-radius:var(--r); background:var(--tint2); padding:22px 24px; margin-bottom:34px} .tocbox h4{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 12px} .tocbox ol{margin:0; padding-left:20px; display:grid; gap:7px} .tocbox li{font-size:14.5px; font-weight:600} /* ---------- barra di stato / callout ---------- */ .statebar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 22px; border-radius:var(--r); background:var(--ok-bg); border:1px solid #BFE0CE} .statebar .ic{width:38px; height:38px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; flex:0 0 auto} .statebar .ic svg{width:19px; height:19px} .statebar b{display:block; font-size:15.5px; color:var(--ok); font-weight:800} .statebar span{display:block; font-size:13.5px; color:#2C6146; font-weight:600; margin-top:2px} /* ============ FINTA SCHERMATA DI PRODOTTO ============ */ .app{border-radius:var(--r-lg); overflow:hidden; background:#0F2144; border:1px solid #21396A; box-shadow:0 40px 90px -34px rgba(15,33,68,.6)} .app-chrome{display:flex; align-items:center; gap:7px; padding:12px 16px; background:#0B1A38; border-bottom:1px solid #21396A} .app-chrome .dot{width:9px; height:9px; border-radius:50%; background:#31507F} .app-url{margin-left:12px; font-size:11.5px; font-weight:600; color:#8195C0; background:#132749; border-radius:6px; padding:5px 12px; letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .app-body{display:grid; grid-template-columns:158px minmax(0,1fr); min-height:396px} @media (max-width:560px){ .app-body{grid-template-columns:1fr} .app-side{display:none!important} } .app-side{background:#0B1A38; border-right:1px solid #1B3060; padding:14px 10px; display:flex; flex-direction:column; gap:2px} .app-side .sl{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; font-size:12px; font-weight:600; color:#8195C0} .app-side .sl i{width:16px; height:16px; display:block; flex:0 0 auto; opacity:.75} .app-side .sl i svg{width:16px; height:16px} .app-side .sl.on{background:#1B3C70; color:#fff} .app-side .sl.on i{opacity:1; color:#5FC9E8} .app-main{background:#fff; padding:20px 22px 22px; display:flex; flex-direction:column; gap:16px} .app-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--line)} .app-crumb{margin:0 0 3px; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-tx)} .app-top h3{font-size:16.5px; margin:0; letter-spacing:-.014em} .app-user{display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap} .app-user .av{width:28px; height:28px; border-radius:50%; background:var(--deep); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center} .app-kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px} @media (max-width:640px){ .app-kpis{grid-template-columns:1fr} } .app-kpi{background:var(--tint2); border:1px solid var(--line); border-radius:12px; padding:13px 14px} .app-kpi .kl{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:5px} .app-kpi .kv{font-size:21px; font-weight:800; color:var(--ink); letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1.1} .app-kpi .kd{font-size:11px; font-weight:600; color:var(--ok); margin-top:4px} .app-table{border:1px solid var(--line); border-radius:12px; overflow:hidden; overflow-x:auto} .app-table table{border-collapse:collapse; width:100%; min-width:420px; font-size:12.5px} .app-table th{text-align:left; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--tint2); padding:9px 14px; border-bottom:1px solid var(--line); white-space:nowrap} .app-table td{padding:11px 14px; border-bottom:1px solid #EDF1F8; color:var(--body); font-weight:500; white-space:nowrap} .app-table tr:last-child td{border-bottom:0} .app-table td:first-child{font-weight:700; color:var(--ink)} .app-table td.n{text-align:right; font-variant-numeric:tabular-nums} .app-table .tg{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.04em; padding:3px 8px; border-radius:20px; background:var(--ok-bg); color:var(--ok)} .app-table .tg.w{background:var(--warn-bg); color:var(--warn)} .app-bar{height:6px; border-radius:4px; background:var(--line); overflow:hidden; min-width:56px} .app-bar i{display:block; height:100%; background:var(--accent-tx); border-radius:4px} .app.mini .app-body{grid-template-columns:1fr; min-height:0} .app.mini .app-side{display:none} .app.mini .app-main{padding:16px 18px 18px; gap:12px} .app.mini .app-top h3{font-size:14.5px} .app.mini .app-kpis{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px} .app.mini .app-kpi{padding:10px 11px} .app.mini .app-kpi .kv{font-size:17px} .app.mini .app-table table{min-width:0; font-size:11.5px} .app.mini .app-table th,.app.mini .app-table td{padding:8px 11px} .chatline{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.45} .chatline .who{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:800} .chatline.q .who{background:var(--tint); color:var(--muted)} .chatline.a .who{background:var(--accent-tx); color:#fff} .chatline p{margin:0; padding:9px 13px; border-radius:12px; max-width:88%} .chatline.q p{background:var(--tint); color:var(--body); border-top-left-radius:4px} .chatline.a p{background:rgba(18,115,144,.09); color:var(--ink); font-weight:500; border-top-left-radius:4px} .filerow{display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; font-size:12.5px; font-weight:600; color:var(--ink)} .filerow .fi{width:26px; height:26px; border-radius:7px; background:var(--tint); color:var(--blue); display:grid; place-items:center; flex:0 0 auto} .filerow .fi svg{width:14px; height:14px} .filerow .sz{margin-left:auto; font-size:11.5px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums} /* Tabelle scritte nell'editor: stile del tema e, sotto i 660px, una striscia che scorre per conto suo invece di allargare la pagina. */ .entry-content table,.prose table{width:100%; border-collapse:collapse; font-size:15px; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden} .entry-content table th,.entry-content table td,.prose table th,.prose table td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top} .entry-content table thead th,.prose table thead th{font-size:11.5px; font-weight:800; letter-spacing:var(--ls-label); text-transform:var(--tt-label); color:var(--muted); background:var(--tint2)} .entry-content table tr:last-child th,.entry-content table tr:last-child td,.prose table tr:last-child th,.prose table tr:last-child td{border-bottom:0} .wp-block-table{margin:1.8em 0; max-width:100%} .wp-block-table>table{margin:0} @media (max-width:660px){ .wp-block-table:not(:has(.dtable)){overflow-x:auto; -webkit-overflow-scrolling:touch} .wp-block-table:not(:has(.dtable))>table{min-width:520px} } @media (max-width:660px){ .dtable,.dtable tbody,.dtable tr,.dtable th,.dtable td{display:block; width:100%} .dtable thead{display:none} .dtable tr{border-bottom:1px solid var(--line); padding:14px 0} .dtable tr:last-child{border-bottom:0} .dtable th,.dtable td{border-bottom:0; padding:4px 16px; white-space:normal} .dtable tbody th{font-size:16px; padding-top:0; padding-bottom:8px} .dtable td::before{content:attr(data-l) ""; display:block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px} } .dark .mlink em{color:var(--accent-lt)} /* ============================================================ WordPress — integrazione ============================================================ */ /* ---------- contenitori ---------- */ .wrap-flush{padding-left:0; padding-right:0} .wrap-prose{max-width:min(78ch, var(--max))} .si-main{display:block} .si-content-sec .entry-content{max-width:min(72ch,100%)} .si-content-sec .entry-content.prose{max-width:min(70ch,100%)} .si-tpl-fullwidth .si-content-full{padding-top:var(--sec); padding-bottom:var(--sec)} .si-sec-head{margin-bottom:clamp(32px,4vw,48px); max-width:min(660px,100%)} .si-sec-head.ctr{margin-left:auto; margin-right:auto} .si-sec-head-split{display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; max-width:none} .si-sec-head-split>div{max-width:min(640px,100%)} .si-sec-head-split .tlink{margin-bottom:6px} .si-sec-head .lead{margin-top:18px} .si-hero-body{max-width:min(64ch,100%)} .ctr .si-hero-body{margin-left:auto; margin-right:auto} .si-hero-btns{margin-top:34px} .si-hero-note{margin:32px 0 0; padding-left:15px; border-left:2px solid color-mix(in srgb, var(--accent-lt) 50%, transparent); font-size:14px; line-height:1.55; color:var(--light); max-width:46ch} .si-hero-light .si-hero-note{color:var(--muted)} .ctr .si-hero-note{margin-left:auto; margin-right:auto; border-left:0; padding-left:0; text-align:center} .ctr .btnrow{justify-content:center} .si-hero-bg{position:absolute; inset:0; z-index:0; display:block} .si-hero-bg img{width:100%; height:100%; object-fit:var(--si-fit,cover); object-position:var(--si-pos,50% 50%); opacity:var(--overlay)} .si-hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(96deg, var(--deep) 4%, color-mix(in srgb, var(--deep) 92%, transparent) 44%, color-mix(in srgb, var(--deepest) 34%, transparent) 100%)} .si-hero-bg::before{display:none} .si-hero.dark .si-hero-bg~.wrap{position:relative; z-index:1} .si-hero-bg~.grid-lines{display:none} /* Intestazione grande della pagina iniziale: è la misura del progetto approvato. Il titolo torna alla scala «display» (che «.phero h1» altrimenti riporterebbe alla misura delle pagine interne), la colonna dell'immagine si allinea al centro e il riquadro informativo scende a cavallo della fascia dei numeri. */ .si-hero-home{padding-top:clamp(52px,7vw,92px); padding-bottom:clamp(84px,9vw,132px)} .si-hero .phero-split{align-items:center} .si-hero h1.display{font-size:clamp(var(--fs-h1-min),5.6vw,var(--fs-h1-max)); line-height:1.03; letter-spacing:var(--ls-h1); max-width:16ch} .si-hero-home .lead{margin-top:26px; max-width:50ch} .si-hero-home .si-hero-btns{margin-top:38px} .si-hero-home .fig-tag{right:-8px; bottom:-30px} .si-hero .fig-tag{right:-8px; bottom:-26px} @media (max-width:900px){ .si-hero .fig-tag{right:0; bottom:-20px} } /* Sezione di contenuto affiancata a un'immagine. */ .si-content-split{display:grid; grid-template-columns:var(--si-col-tx,1.05fr) var(--si-col-img,.95fr); gap:clamp(32px,5vw,80px); align-items:center} .si-content-split .entry-content{max-width:none} .si-content-split .entry-content>h2:first-child{margin-top:0} .si-content-sec .si-content-link{margin-top:28px} .si-content-split .entry-content>p:first-of-type{font-size:clamp(17px,1.35vw,19.5px); line-height:1.62; color:var(--muted)} .si-content-split .checks{margin-top:30px} .has-text-align-center{text-align:center} .has-text-align-right{text-align:right} .has-text-align-left{text-align:left} .si-content-ctr .entry-content,.si-content-ctr .si-sec-head{margin-left:auto; margin-right:auto} .si-content-ctr{text-align:center} .si-content-ctr .eyebrow{justify-content:center} .si-content-ctr .entry-content{max-width:min(660px,100%)} .si-content-ctr .checks{text-align:left; max-width:560px; margin-left:auto; margin-right:auto} .si-content-ctr .si-content-link{justify-content:center} @media (max-width:900px){ .si-content-split{grid-template-columns:1fr} .si-content-split>.fig-frame{order:2} } /* Una schermata larga in mezza colonna non si legge. Con «sotto, a tutta larghezza» il testo sta sopra e la fotografia prende tutta la riga. */ .split.si-img-full, .si-content-split.si-img-full, .phero-split.si-img-full{grid-template-columns:1fr} .split.si-img-full>*:last-child, .si-content-split.si-img-full>.fig-frame, .phero-split.si-img-full>*:last-child{order:2; margin-top:clamp(24px,3vw,40px)} .si-content-split.si-img-full>.fig-frame{order:2} /* Riquadro largo in coda alla fascia conformità. */ .si-conf-wide{margin-top:26px; padding:clamp(24px,3vw,34px); display:flex; gap:26px; align-items:center; justify-content:space-between; flex-wrap:wrap} .si-conf-wide>div{max-width:56ch} .si-conf-wide p{margin-top:7px} /* Prova sul campo: le misure di riga del progetto approvato. */ .si-proof-sec h2{max-width:22ch} .si-proof-sec .lead{max-width:48ch; margin-top:22px} .si-proof-sec .si-quote{margin-top:30px} /* Elenco spuntato nella colonna del modulo di contatto. */ .si-form-aside .checks{margin-top:30px} /* ---------- intestazione: varianti di disposizione ---------- */ .si-header-center .hdr .wrap{flex-wrap:wrap; justify-content:center; text-align:center} .si-header-center .hdr .logo{flex:1 1 100%; justify-content:center; margin-bottom:10px} .si-header-center .nav{margin:0 auto} .si-header-split .nav{margin:0 auto} .hdr-search{max-width:220px} .hdr-search .si-searchform input{padding:9px 12px; font-size:13.5px} /* ---------- sottomenu ---------- */ /* * L'elenco che va a capo davvero. * * Il permesso di andare a capo era sul