/* 1. stile della landing originale per le parti riusate */ /* Popup del video dello stand (07/10): alla prima visita, con audio, «Salta» sempre in vista */ .ld-vpop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,16,38,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s} .ld-vpop[hidden]{display:none} .ld-vpop.is-on{opacity:1} .ld-vcol{display:flex;flex-direction:column;gap:12px;width:min(1120px,92vw,calc((100dvh - 120px)*16/9))} .ld-vpop.is-m .ld-vcol{width:min(92vw,calc((100dvh - 110px)*9/16))} .ld-vpop.is-m .ld-vtit{display:none} .ld-vpop.is-m .ld-vtools{justify-content:flex-end} .ld-vtools{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font)} .ld-vtit{flex:1;min-width:0;font-size:14px;font-weight:700;line-height:1.25;opacity:.9} .ld-vtit b{color:var(--yellow)} .ld-vbtn{font:800 14px/1 var(--font);border:0;cursor:pointer;border-radius:999px;padding:11px 16px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .ld-vaudio{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.45)} .ld-vaudio[aria-pressed="false"]{background:transparent} .ld-vskip{background:var(--orange);color:#fff;font-size:15px;padding:12px 18px;box-shadow:0 8px 24px -8px rgba(245,93,62,.8)} .ld-vbtn:hover{filter:brightness(1.08)} .ld-vbtn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px} .ld-vbox{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px 14px 0 14px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)} .ld-vpop.is-m .ld-vbox{aspect-ratio:9/16} .ld-vbox video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer} .ld-vbar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.2)} .ld-vbar i{display:block;height:100%;width:0;background:var(--yellow)} .ld-ico{width:18px;height:18px;flex:none} .ld-vaudio .is-on{display:none}.ld-vaudio[aria-pressed="true"] .is-on{display:block}.ld-vaudio[aria-pressed="true"] .is-off{display:none} html.vp-open{overflow:hidden} @media (max-width:560px){.ld-vtit{font-size:12px}.ld-vbtn{padding:10px 13px;font-size:13px}.ld-vskip{font-size:14px}} @media (prefers-reduced-motion: reduce){.ld-vpop{transition:none}} /* Layout: fascia blu C2 in apertura (come l'apertura di sezione del catalogo), poi pagina bianca a colonne, programma a righe orarie, colori d'area presi dai colori di sezione del catalogo. Firma: angolo 3+1. */ :root{--blue:#0074C5;--blue-dark:#003E87;--blue-light:#DFF1FF;--yellow:#F7B32B;--orange:#F55D3E; --bg:#FFFFFF;--bg-alt:#F4F7FB;--card:#FFFFFF;--title:#0F2137;--text:#33475B;--muted:#5B6B7B;--rule:#E3E9F0; --hero:#003E87;--hero-ink:#FFFFFF;--hero-soft:#DFF1FF;--btn:#0074C5;--btn-ink:#FFFFFF;--chip:#F4F7FB;--logo-bg:#FFFFFF; --font:Montserrat,Arial,Helvetica,sans-serif} .ar-apple{--a:#0074C5;--a-ink:#005794;--a-tenue:#E6F1F9;--a-on:#fff}.ar-stem{--a:#0B7A78;--a-ink:#085C5A;--a-tenue:#E7F2F2;--a-on:#fff}.ar-arena{--a:#003E87;--a-ink:#003E87;--a-tenue:#DFF1FF;--a-on:#fff}.ar-ml{--a:#A5660A;--a-ink:#7C4C08;--a-tenue:#F6F0E6;--a-on:#fff}.ar-google{--a:#B8325A;--a-ink:#8A2644;--a-tenue:#F8EAEE;--a-on:#fff}.ar-software{--a:#4338CA;--a-ink:#322A98;--a-tenue:#ECEBFA;--a-on:#fff} [hidden]{display:none!important} html{scroll-behavior:smooth;scroll-padding-top:90px} @media (max-width:860px){html{scroll-padding-top:130px}} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--c2-white);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased} *,*::before,*::after{box-sizing:border-box} img{max-width:100%;display:block} a{color:var(--btn)} a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px} h1,h2,h3,h4{color:var(--title);text-wrap:balance;margin:0} .ld-wrap{max-width:1180px;margin:0 auto;padding-inline:24px} @media (max-width:600px){.ld-wrap{padding-inline:16px}} .ld-skip{position:absolute;left:-999px;top:8px;background:var(--btn);color:var(--btn-ink);padding:8px 12px;z-index:50} .ld-skip:focus{left:16px} .ld-eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin-bottom:8px} .ld-sec h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;line-height:1.1;max-width:720px} .ld-sec h2::after{content:"";display:block;width:52px;height:5px;background:var(--orange);border-radius:4px 4px 0 4px;margin:14px 0 0} .ld-lead{max-width:680px;margin:14px 0 0;color:var(--text)} /* pulsanti */ .ld-btn{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;text-decoration:none;color:var(--btn-ink);background:var(--btn);padding:10px 16px;border-radius:9px 9px 0 9px;line-height:1.15;white-space:nowrap;border:1.5px solid transparent} .ld-btn:hover{filter:brightness(1.08)} .ld-btn .arr{font-size:13px} .ld-btn.is-sm{font-size:12px;padding:6px 10px} .ld-btn.is-cta{background:var(--orange);color:#fff} .ld-btn.is-line{background:transparent;color:var(--hero-ink);border-color:rgba(255,255,255,.6)} .ld-btn.is-ghost{background:var(--blue-dark);color:#fff} .ld-btn.is-todo{background:transparent;color:var(--btn);border:1.5px dashed var(--btn);cursor:help} .ld-btn .todo-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)} /* barra */ .ld-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s} .ld-top.is-scrolled{border-bottom-color:var(--rule);box-shadow:0 6px 24px -18px rgba(0,30,70,.5)} .ld-topin{display:flex;align-items:center;gap:24px;min-height:68px} .ld-logo img{height:30px;width:auto} .lg-d{display:none} /* menu a segmenti: voce attiva piena (blu C2 scuro) seguendo lo scroll, contatore accanto a ogni voce */ .ld-menu{display:flex;gap:4px;margin-left:auto;padding:4px;background:var(--chip);border:1px solid var(--rule);border-radius:13px 13px 0 13px} .ld-menu a{position:relative;display:inline-flex;align-items:center;gap:8px;color:var(--title);text-decoration:none;font-weight:700;font-size:14px;padding:8px 14px;border-radius:9px 9px 0 9px;transition:background-color .18s,color .18s} .ld-menu a em{font-style:normal;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--muted);background:var(--card);padding:2px 7px;border-radius:6px 6px 0 6px;transition:inherit} .ld-menu a:hover{background:var(--card)} .ld-menu a:hover em{background:var(--chip)} .ld-menu a[aria-current="true"]{background:var(--blue-dark);color:#fff} .ld-menu a[aria-current="true"] em{background:rgba(255,255,255,.14);color:var(--yellow)} .ld-menu a[aria-current="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-5px;height:3px;border-radius:2px 2px 0 2px;background:var(--yellow)} @media (prefers-reduced-motion: reduce){.ld-menu a,.ld-top{transition:none}} @media (max-width:860px){ .ld-topin{flex-wrap:wrap;gap:10px 16px;padding-block:10px} .ld-top .ld-btn{margin-left:auto;font-size:12px;padding:8px 12px} .ld-menu{order:3;width:100%;margin-left:0;overflow-x:auto;scrollbar-width:none} .ld-menu::-webkit-scrollbar{display:none} .ld-menu a{flex:1 0 auto;justify-content:center;font-size:13px;padding:7px 10px} .ld-menu a[aria-current="true"]::after{bottom:-4px}} @media (max-width:420px){.ld-menu a em{display:none}} /* apertura */ .ld-hero{background:var(--hero);color:var(--hero-ink);overflow:hidden} .ld-heroin{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:64px} .ld-kick{display:block;font-size:12px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--hero-soft)} .ld-kick b{color:var(--yellow)} .ld-hero h1{color:#fff;font-size:clamp(52px,8vw,104px);line-height:.9;font-weight:900;letter-spacing:-.045em;margin:18px 0 22px} .ld-hero h1 span{color:var(--yellow)} .ld-herot>p{max-width:560px;margin:0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.92)} .ld-herocta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .ld-herof{margin:0;position:relative} .ld-herof img{width:100%;aspect-ratio:4/3.4;object-fit:cover;object-position:62% 50%;border-radius:24px 24px 0 24px} .ld-herof figcaption{position:absolute;left:-20px;bottom:24px;background:var(--yellow);color:#3A2800;font-size:14px;font-weight:700;line-height:1.35;padding:14px 18px;border-radius:14px 14px 0 14px} .ld-herof figcaption b{font-size:22px;font-weight:900} @media (max-width:860px){.ld-heroin{grid-template-columns:1fr;padding-block:40px;gap:32px}.ld-herof figcaption{left:12px}} /* formati */ .ld-band{background:var(--bg-alt);padding-block:40px} .ld-formats{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:20px;align-items:stretch} .ld-format{background:var(--card);border-radius:18px 18px 0 18px;padding:22px 24px;position:relative} .ld-format b{display:block;font-size:34px;font-weight:900;letter-spacing:-.02em;color:var(--title);line-height:1.05;margin-bottom:8px} .ld-format p{margin:0;font-size:14px;max-width:300px} .ld-format.is-arena{background:var(--blue-dark);color:#E6F1FB} .ld-format.is-arena b{color:var(--yellow)} .ld-format.is-arena .ld-eyebrow{color:var(--hero-soft)} .ld-fn{position:absolute;right:20px;top:22px;font-size:12px;font-weight:800;color:var(--muted)} .ld-format.is-arena .ld-fn{color:var(--hero-soft)} .ld-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:s;align-self:center} .ld-steps li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:center;font-size:14px} .ld-steps li::before{content:counter(s);width:32px;height:32px;border-radius:11px 11px 0 11px;background:var(--btn);color:var(--btn-ink);font-weight:900;display:grid;place-items:center} .ld-steps b{color:var(--title)} @media (max-width:960px){.ld-formats{grid-template-columns:1fr 1fr}.ld-steps{grid-column:1/-1}} @media (max-width:600px){.ld-formats{grid-template-columns:1fr}} /* programma */ .ld-sec{padding-block:72px} .ld-sec.is-alt{background:var(--bg-alt)} /* filtri: pannello con etichette, giorni come radio grandi, aree come pulsanti con spunta e conteggio */ .ld-filters{margin:28px 0 22px;background:var(--bg-alt);border:1px solid var(--rule);border-radius:18px 18px 0 18px;padding:18px 20px 14px} .ld-flabel{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--title);margin:0 0 10px} .ld-flabel svg{width:18px;height:18px;fill:none;stroke:var(--btn);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ld-flabel span{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)} .ld-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 20px} .ld-day{position:relative;font:inherit;text-align:left;cursor:pointer;border:2px solid var(--rule);background:var(--card);color:var(--title);padding:14px 18px 14px 50px;border-radius:14px 14px 0 14px;transition:border-color .15s,transform .15s,box-shadow .15s} .ld-day:hover{border-color:var(--btn);transform:translateY(-2px);box-shadow:0 10px 22px -16px rgba(0,30,70,.6)} .ld-radio{position:absolute;left:17px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:2px solid var(--muted);background:var(--card)} .ld-day b{display:block;font-size:20px;font-weight:900} .ld-day span{font-size:13px;color:var(--muted);font-weight:600} .ld-day[aria-selected="true"]{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff} .ld-day[aria-selected="true"] b{color:#fff} .ld-day[aria-selected="true"] span{color:var(--hero-soft)} .ld-day[aria-selected="true"] .ld-radio{border-color:var(--yellow);background:var(--blue-dark);box-shadow:inset 0 0 0 3px var(--blue-dark),inset 0 0 0 10px var(--yellow)} @media (max-width:600px){.ld-day{padding:10px}.ld-radio{position:static;display:block;width:16px;height:16px;margin:0 0 6px}.ld-day b{font-size:15px}.ld-day span{font-size:11px}} .ld-chips{display:flex;flex-wrap:wrap;gap:8px} .ld-chip{font:inherit;font-size:13px;font-weight:700;cursor:pointer;border:2px solid var(--rule);background:var(--card);color:var(--title);padding:7px 10px 7px 8px;border-radius:9px 9px 0 9px;display:inline-flex;align-items:center;gap:7px;transition:border-color .15s,background-color .15s,transform .15s,box-shadow .15s} .ld-chip:hover{border-color:var(--a,var(--btn));background:var(--a-tenue,var(--chip));transform:translateY(-2px);box-shadow:0 8px 18px -14px rgba(0,30,70,.6)} .ld-chip i{font-style:normal;font-size:11px;font-weight:900;color:#fff;background:var(--a);width:22px;height:22px;border-radius:7px 7px 0 7px;display:grid;place-items:center} .ld-ck{width:16px;height:16px;border:2px solid var(--muted);border-radius:5px 5px 0 5px;display:grid;place-items:center;flex:none} .ld-n{font-size:11px;font-weight:800;color:var(--muted);background:var(--chip);padding:1px 7px;border-radius:6px 6px 0 6px;font-variant-numeric:tabular-nums} .ld-chip[aria-pressed="true"]{border-color:var(--a,var(--blue-dark));background:var(--a,var(--blue-dark));color:#fff} .ld-chip[aria-pressed="true"] i{background:rgba(255,255,255,.22)} .ld-chip[aria-pressed="true"] .ld-ck{border-color:#fff;background:#fff} .ld-chip[aria-pressed="true"] .ld-ck::after{content:"✓";font-size:11px;font-weight:900;line-height:1;color:var(--a,var(--blue-dark))} .ld-chip[aria-pressed="true"] .ld-n{background:rgba(255,255,255,.2);color:#fff} .ld-chip.is-zero:not([aria-pressed="true"]){opacity:.5} .ld-fstat{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:14px;color:var(--text)} .ld-fstat b{color:var(--title)} .ld-reset{font:inherit;font-size:13px;font-weight:800;cursor:pointer;color:var(--btn);background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px} @media (prefers-reduced-motion: reduce){.ld-day,.ld-chip{transition:none}.ld-day:hover,.ld-chip:hover{transform:none}} @media (max-width:600px){.ld-filters{padding:14px 12px 12px}.ld-chip{font-size:12px}} .ld-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--title)} .ld-row{display:grid;grid-template-columns:76px minmax(0,1fr) 120px 190px;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule)} .ld-time b{display:block;font-size:22px;font-weight:900;color:var(--title);font-variant-numeric:tabular-nums;line-height:1} .ld-time span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .ld-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--a-ink)} .ld-tag i{font-style:normal;background:var(--a);color:#fff;font-size:11px;width:24px;height:24px;border-radius:8px 8px 0 8px;display:grid;place-items:center} .ld-rmain h4{font-size:17px;font-weight:800;line-height:1.3;margin:6px 0 4px} .ld-rmain h4 a{color:var(--title);text-decoration:none} .ld-rmain h4 a:hover{text-decoration:underline;text-decoration-color:var(--a)} .ld-rmain p{margin:0;font-size:13px;color:var(--text);font-weight:600} .ld-rmain p span{color:var(--muted);font-weight:500} .ld-rlogo{background:var(--logo-bg);border-radius:9px 9px 0 9px;height:48px;display:grid;place-items:center;padding:8px 12px} .ld-rlogo img{max-height:26px;max-width:96px;width:auto;object-fit:contain} .ld-rcta{justify-self:end} .ld-empty{padding:24px 0;color:var(--muted)} @media (max-width:860px){.ld-row{grid-template-columns:64px minmax(0,1fr);gap:8px 14px}.ld-rlogo{display:none}.ld-rcta{grid-column:2;justify-self:start}} /* aree e interventi */ .ld-asec{margin-top:48px} .ld-ahead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;background:var(--a-tenue);border-radius:24px 24px 0 24px;padding:16px} .ld-aimg{position:relative} .ld-aimg img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px 14px 0 14px} .ld-aimg span{position:absolute;left:12px;top:12px;background:var(--a);color:#fff;font-weight:900;font-size:20px;width:46px;height:46px;border-radius:14px 14px 0 14px;display:grid;place-items:center} .ld-atext .ld-eyebrow{color:var(--a-ink)} .ld-atext h3{font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:-.02em;line-height:1.05} .ld-atext p{margin:10px 0 12px;font-size:16px;max-width:460px} .ld-acount{font-size:13px;font-weight:800;color:var(--a-ink)} @media (max-width:760px){.ld-ahead{grid-template-columns:1fr;gap:16px}} .ld-wgrid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:18px;margin-top:18px} @media (max-width:1000px){.ld-wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:680px){.ld-wgrid{grid-template-columns:1fr}} .ld-wcard{background:var(--card);border:1px solid var(--rule);border-radius:14px 14px 0 14px;padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0} .ld-wcard header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start} .ld-wcard h4{font-size:19px;font-weight:800;line-height:1.25;color:var(--a-ink)} .ld-wlogo{height:24px;width:auto;max-width:96px;object-fit:contain;flex:none;background:var(--logo-bg);padding:3px;border-radius:5px 5px 0 5px;box-sizing:content-box} .ld-wmeta{display:flex;flex-wrap:wrap;gap:6px} .ld-wmeta span{font-size:12px;font-weight:700;color:var(--a-ink);background:var(--a-tenue);padding:4px 9px;border-radius:7px 7px 0 7px} .ld-abs{margin:0;font-size:14.5px;line-height:1.6} .ld-rels{display:flex;flex-direction:column;gap:8px} .ld-rel{display:flex;gap:10px;align-items:center} .ld-rel img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none} .ld-rel b{display:block;font-size:14px;color:var(--title)} .ld-rel i{display:block;font-style:normal;font-size:12px;color:var(--muted);line-height:1.35} .ld-reps{margin-top:auto;border-top:1px solid var(--rule);padding-top:12px} .ld-reps h5{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)} .ld-reps ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .ld-reps li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--title);font-variant-numeric:tabular-nums} .ld-reps li>span{white-space:nowrap} .ld-reps em{font-style:normal;font-size:11px;font-weight:800;background:var(--blue-dark);color:#fff;padding:2px 6px;border-radius:5px 5px 0 5px;margin-left:8px} /* stand */ .ld-3d{position:relative;margin-top:28px;height:600px;border-radius:24px 24px 0 24px;overflow:hidden;background:var(--bg-alt)} .ld-3d.is-3d{border:1px solid var(--rule)} @media (max-width:760px){.ld-3d{height:460px}} .ld-3d>.ld-map{height:100%;display:grid;place-items:center} .ld-map{position:relative;border-radius:18px 18px 0 18px;overflow:hidden} .ld-map img{width:100%} .ld-pin{position:absolute;transform:translate(-50%,-50%);text-decoration:none;display:flex;align-items:center;gap:6px} .ld-pin span{width:40px;height:40px;border-radius:13px 13px 0 13px;background:var(--a);color:#fff;font-weight:900;font-size:15px;display:grid;place-items:center;border:2.5px solid #fff;transition:transform .15s} .ld-pin em{font-style:normal;font-size:12px;font-weight:800;color:#fff;background:var(--a);padding:3px 7px;border-radius:6px 6px 0 6px;opacity:0;transition:opacity .15s;white-space:nowrap} .ld-pin:hover span,.ld-pin:focus-visible span{transform:scale(1.1)} .ld-pin:hover em,.ld-pin:focus-visible em{opacity:1} .ld-mapcap{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#fff;background:rgba(0,62,135,.8);padding:3px 9px;border-radius:6px 6px 0 6px} .ld-standimg{margin:0} .ld-standimg img{border-radius:14px 14px 0 14px} .ld-standimg figcaption{font-size:12px;color:var(--muted);margin-top:6px} @media (max-width:860px){.ld-pin span{width:30px;height:30px;font-size:12px;border-width:2px}} /* relatori */ .ld-relg{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:24px 20px} .ld-relg li{display:flex;flex-direction:column;gap:3px} .ld-relg img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:8px} .ld-relg b{color:var(--title);font-size:15px} .ld-relg span{font-size:13px;color:var(--muted);line-height:1.4} /* loghi partner: le tessere 340×150 della DEM ufficiale, tutte uguali, in griglia regolare */ .ld-partners{margin-top:44px;background:#FFFFFF;border-radius:18px 18px 0 18px;padding:14px;display:flex;flex-wrap:wrap;justify-content:center;border:1px solid var(--rule)} .ld-partners img{flex:0 0 calc(100% / 6);width:calc(100% / 6);min-width:0;height:auto} @media (max-width:760px){.ld-partners img{flex-basis:calc(100% / 3);width:calc(100% / 3)}} /* chiusura */ .ld-end{background:var(--hero);color:var(--hero-ink);padding-block:64px} .ld-endin{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end} .ld-end h2{color:#fff;font-size:clamp(40px,6vw,64px);font-weight:900;line-height:.95;letter-spacing:-.03em} .ld-end h2 span{color:var(--yellow)} .ld-end p{margin:18px 0 0;max-width:480px;color:rgba(255,255,255,.9)} .ld-contacts{margin:0;display:grid;gap:16px} .ld-contacts dt{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--hero-soft)} .ld-contacts dd{margin:2px 0 0;font-size:22px;font-weight:800;color:#fff;user-select:all} .ld-contacts a{color:#fff} @media (max-width:760px){.ld-endin{grid-template-columns:1fr}} .ld-hero.is-cine{position:relative;background:radial-gradient(90% 70% at 85% 0%,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#0074C5 0%,#005BA6 45%,#003E87 100%);color:#fff;overflow:hidden} /* azzurro C2 in alto → blu scuro C2 in basso */ .ld-hero.is-cine::before{content:"";position:absolute;inset:0;background:url(assets/foto/stand.jpg) 70% 30%/cover no-repeat;opacity:.12;mix-blend-mode:screen;pointer-events:none} .ld-hero.is-cine .ld-wrap{position:relative;padding-block:56px 48px} .ld-cine{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:34px} .ld-hero.is-cine h1{font-size:clamp(54px,8.6vw,124px);line-height:.86;letter-spacing:-.055em;margin:18px 0 0} .ld-cine-r>p{margin:0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.88)} .ld-hero.is-cine .ld-herocta{margin-top:22px} @media (max-width:860px){.ld-cine{grid-template-columns:1fr}} .ld-3dwrap{scroll-margin-top:90px} .ld-hero.is-cine .ld-3d{margin-top:0;height:640px;border:1px solid transparent;border-bottom-color:rgba(255,255,255,.14);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 100%)} .ld-hero.is-cine .ld-3d .s3d-root{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.04) 100%)} /* 05/10: riquadro del 3D trasparente, lo stand risalta sul blu */ .ld-hero.is-cine .ld-3d .s3d-hint{color:rgba(255,255,255,.85)} @media (max-width:760px){.ld-hero.is-cine .ld-3d{height:470px}} .ld-3dcap{position:relative;z-index:1;margin:14px 0 0;font-size:13.5px;color:rgba(255,255,255,.75)} /* sopra l'ombra del riquadro 3D (05/10) */ .ld-3dcap b{color:var(--yellow)} /* agenda a palinsesto */ .ag-sec{background:linear-gradient(180deg,#003E87 0%,#005BA6 55%,#0074C5 100%);color:#E6F1FB} /* opposto della hero: blu scuro C2 in alto → azzurro C2 in basso */ /* opposto della hero: scuro in alto, più chiaro in basso */ .ag-sec h2{color:#fff} .ag-sec .ld-lead{color:#C3D1E0} .ag-pdf{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#fff;font-weight:800;font-size:15px;text-decoration:none;border:2px solid rgba(255,255,255,.55);padding:9px 14px;border-radius:10px 10px 0 10px} .ag-pdf:hover{background:rgba(255,255,255,.12)} .ag-pdf em{font-style:normal;font-size:12px;font-weight:600;opacity:.8} .ag{position:relative;margin-top:28px;--lab:150px} .ag-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between} .ag-days{display:flex;gap:4px;background:rgba(0,30,70,.45);border:1px solid rgba(255,255,255,.18);border-radius:14px 14px 0 14px;padding:4px} .ag-days button{border:0;cursor:pointer;background:none;color:#C3D1E0;font-size:15px;padding:9px 16px;border-radius:10px 10px 0 10px;display:inline-flex;gap:8px;align-items:center;transition:background .15s,color .15s} .ag-days button b{font-weight:800} .ag-days button b i{font-style:normal} .ag-days .ds{display:none} @media (max-width:640px){ .ag-top{gap:10px} .ag-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%} .ag-days button{flex-direction:column;gap:3px;padding:8px 4px;font-size:15px;justify-content:center;text-align:center} .ag-days .dl{display:none}.ag-days .ds{display:inline} .ag-mine{width:100%;text-align:center} .ag-leg{gap:6px} .ag-leg button{font-size:12px;padding:6px 9px}} .ag-days button span{font-size:11.5px;font-weight:800;background:#1A2E4B;color:#9DB0C5;padding:1px 7px;border-radius:6px 6px 0 6px} .ag-days button:hover{background:#1A2E4B;color:#fff} .ag-days button[aria-pressed="true"]{background:#F7B32B;color:#1E2530} .ag-days button[aria-pressed="true"] span{background:rgba(0,0,0,.12);color:#1E2530} .ag-mine{border:2px solid #7FC0F0;background:none;color:#E6F1FB;font-weight:800;font-size:14px;border-radius:11px 11px 0 11px;padding:9px 14px;cursor:pointer} .ag-mine:hover{background:rgba(0,30,70,.45)} .ag-mine b{display:inline-block;min-width:22px;background:#3D9BE0;color:#06121F;border-radius:6px 6px 0 6px;margin-left:6px;text-align:center} .ag-leg{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px} .ag-leg button{border:2px solid rgba(255,255,255,.18);background:rgba(0,30,70,.45);color:#E6F1FB;font-weight:700;font-size:13px;padding:7px 11px;border-radius:9px 9px 0 9px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;transition:border-color .15s,opacity .15s,transform .15s} .ag-leg button:hover{border-color:var(--c);transform:translateY(-2px)} .ag-leg button i{width:12px;height:12px;border-radius:4px 4px 0 4px;background:var(--c)} .ag-leg button i,.ag-lab i{box-shadow:0 0 0 1.5px rgba(255,255,255,.4)} .ag-s,.ag-li{border-color:color-mix(in srgb,var(--c) 70%,#FFFFFF)} .ag-leg button[aria-pressed="false"]{opacity:.45} .ag-leg button[aria-pressed="false"] i{background:transparent;box-shadow:inset 0 0 0 2px var(--c)} .ag-body{border:1px solid rgba(255,255,255,.18);border-radius:18px 18px 0 18px;overflow:auto;background:#06306A} .ag-grid{position:relative;min-width:calc(var(--lab) + var(--cols) * 118px);padding:0 14px 10px} .ag-hours{display:grid;gap:0 8px;position:sticky;top:0;z-index:2;background:#06306A;padding:14px 0 10px;font-size:15px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums} .ag-hours span.is-pm,.ag-cell.is-pm{border-left:2px dashed #2A4366;padding-left:8px} .ag-hours span.is-pm::before{content:'pausa · ';font-size:11px;font-weight:700;color:#5E7690} .ag-row{display:grid;gap:0 8px;border-top:1px solid rgba(255,255,255,.1);min-height:96px} .ag-cell{padding:8px 0;display:flex} .ag-lab{position:sticky;left:0;z-index:1;background:#06306A;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;padding-right:10px} .ag-lab i{font-style:normal;flex:none;width:26px;height:26px;border-radius:8px 8px 0 8px;background:var(--c);display:grid;place-items:center;font-size:11px} .ag-track{position:relative;height:84px;background:none} .ag-s{position:relative;width:100%;min-height:78px;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 32%,#06306A);color:#fff;border-radius:11px 11px 0 11px;padding:7px 9px;text-align:left;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s,box-shadow .2s} .ag-s b{font-size:13px;font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .ag-s small{font-size:11px;font-weight:700;opacity:.8} .ag-s:hover,.ag-s:focus-visible{transform:translateY(-3px);background:color-mix(in srgb,var(--c) 62%,#06306A);box-shadow:0 14px 26px -16px #000;z-index:2} .ag-s.is-mine{box-shadow:inset 0 0 0 2px #F7B32B} .ag-s.is-live{outline:2px solid #F55D3E;outline-offset:2px} .ag-none{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:#5E7690} .ag-now{position:absolute;top:36px;bottom:10px;width:2px;background:#F55D3E;z-index:3;pointer-events:none} .ag-now::before{content:"ORA";position:absolute;top:-16px;left:-10px;font-size:10px;font-weight:900;color:#F55D3E} .ag-list{display:none;list-style:none;margin:0;padding:6px 12px 12px} .ag-list li{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #1A2E4B} .ag-lt{font-size:12px;color:#9DB0C5;font-variant-numeric:tabular-nums} .ag-lt b{display:block;font-size:18px;color:#fff} .ag-li{text-align:left;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 26%,#06306A);color:#fff;border-radius:12px 12px 0 12px;padding:10px 12px;cursor:pointer} .ag-li i{display:block;font-style:normal;font-size:11px;font-weight:800;opacity:.85;margin-bottom:3px} .ag-li b{display:block;font-size:15px;line-height:1.3} .ag-li small{display:block;font-size:12px;opacity:.8;margin-top:3px} .ag-li.is-mine{box-shadow:inset 0 0 0 2px #F7B32B} @media (max-width:899px){.ag-grid{display:none}.ag-list{display:block}} .ag-empty{padding:30px;color:#9DB0C5} .ag-panel{position:absolute;right:14px;top:120px;width:min(400px,calc(100% - 28px));max-height:calc(100% - 134px);overflow:auto;background:#12223A;border:1px solid #22385A;border-radius:20px 20px 0 20px;padding:22px;z-index:5;box-shadow:0 40px 70px -24px rgba(0,0,0,.8);color:#E6F1FB; opacity:0;transform:translateX(30px) scale(.98);transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .25s} .ag-panel.open{opacity:1;transform:none} .ag-panel:focus{outline:none} .ag-panel{scroll-margin-top:96px;scroll-margin-bottom:16px} .ag-x{position:sticky;top:0;float:right;margin:-8px -8px 0 10px;z-index:2;border:0;background:#1A2E4B;color:#fff;width:34px;height:34px;border-radius:10px 10px 0 10px;cursor:pointer;font-weight:800} .ag-pk{display:block;font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--c);filter:brightness(1.6);padding-right:40px} .ag-panel h3{margin:6px 0 8px;font-size:21px;line-height:1.2;color:#fff;padding-right:30px} .ag-when{font-size:15px;margin-bottom:10px} .ag-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .ag-tags span{font-size:12px;font-weight:700;background:#1A2E4B;padding:3px 8px;border-radius:6px 6px 0 6px} .ag-panel p{margin:0 0 12px;font-size:14px;line-height:1.6;color:#C3D1E0} .ag-rel{font-size:14px;margin-bottom:16px} .ag-pb{display:flex;gap:8px} .ag-book{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:800;font-size:15px;text-decoration:none;background:#3D9BE0;color:#06121F;padding:11px 14px;border-radius:11px 11px 0 11px} .ag-book.is-todo{background:none;color:#7FC0F0;border:2px dashed #3D9BE0;flex-direction:column;gap:0;padding:7px 10px} .ag-book .todo-tag{font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:#9DB0C5} .ag-book.is-sm{flex:none;font-size:13px;padding:7px 10px} .ag-star{border:0;cursor:pointer;background:#1A2E4B;color:#fff;font-weight:800;font-size:14px;padding:11px 14px;border-radius:11px 11px 0 11px} .ag-star[aria-pressed="true"]{background:#F7B32B;color:#1E2530} .ag-more{display:inline-block;margin-top:14px;color:#7FC0F0;font-weight:700;font-size:14px} .ag-mylist{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:10px} .ag-mylist li{border-left:4px solid var(--c);padding:4px 0 4px 10px;display:grid;gap:6px} .ag-mylist span{font-size:14px;color:#C3D1E0} .ag-note{font-size:12.5px;color:#9DB0C5} @media (max-width:899px){.ag-panel{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));top:auto;width:auto;max-height:78vh;transform:translateY(30px)}} /* quiz */ .qz{position:relative;overflow:hidden;background:#FFEDCB;color:#0F2137;border-radius:28px 28px 0 28px} .qz-blob{position:absolute;border-radius:70px 70px 0 70px;pointer-events:none} .qz-blob.a{width:260px;height:260px;background:#0B7A78;right:-70px;top:-80px} .qz-blob.b{width:180px;height:180px;background:#4338CA;left:-60px;bottom:-60px} .qz-in{position:relative;padding:44px clamp(20px,5vw,64px) 48px;max-width:900px} .qz-kick{display:inline-block;background:#0F2137;color:#F7B32B;font-weight:900;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;padding:7px 11px;border-radius:9px 9px 0 9px;transform:rotate(-2deg)} .qz-h{margin:16px 0 8px;font-size:clamp(38px,5.4vw,64px);line-height:.95;font-weight:900;letter-spacing:-.03em;color:#0F2137} .qz-h mark{background:#F55D3E;color:#fff;padding:0 12px;border-radius:16px 16px 0 16px;display:inline-block;transform:rotate(-1.5deg)} .qz-q{margin-top:24px;background:#fff;border-radius:24px 24px 0 24px;padding:22px;box-shadow:0 14px 0 -6px #0F2137} .qz-q h3{margin:0 0 14px;font-size:21px;color:#0F2137} .qz-q h3 small{display:block;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#F55D3E} .qz-prog{display:flex;gap:6px;margin-bottom:14px} .qz-prog i{height:6px;flex:1;border-radius:3px;background:#EDEFF2} .qz-prog i.on{background:#F55D3E} .qz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px} .qz-opts button{border:2.5px solid #0F2137;background:#fff;color:#0F2137;border-radius:16px 16px 0 16px;padding:14px;font-weight:800;font-size:15.5px;cursor:pointer;text-align:left;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s} .qz-opts button span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px 10px 0 10px;background:#0F2137;color:#F7B32B;font-size:14px;font-weight:900;margin-bottom:8px;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s} .qz-opts button:hover{transform:translateY(-3px) rotate(-1deg);background:#DFF1FF} .qz-opts button:hover span{transform:rotate(-10deg) scale(1.1);background:#F55D3E;color:#fff} .qz-res{display:grid;gap:10px} .qz-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border:2.5px solid #0F2137;border-radius:16px 16px 0 16px;padding:12px 14px;background:#fff;animation:qzpop .5s cubic-bezier(.34,1.56,.64,1) both} @keyframes qzpop{from{transform:scale(.88) rotate(-2deg);opacity:0}} .qz-card>i{width:44px;height:44px;border-radius:13px 13px 0 13px;background:var(--c);color:#fff;font-style:normal;font-weight:900;display:grid;place-items:center} .qz-card b{display:block;font-size:16px;line-height:1.25} .qz-card small{color:#5B6B7B;font-weight:600;font-size:13px} .qz-cta{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .qz-book{display:inline-flex;align-items:center;gap:6px;border:0;background:#F55D3E;color:#fff;font-weight:900;padding:10px 14px;border-radius:11px 11px 0 11px;text-decoration:none;white-space:nowrap} .qz-book.is-todo{background:#fff;color:#F55D3E;border:2px dashed #F55D3E;flex-direction:column;gap:0;padding:6px 10px} .qz-book .todo-tag{font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:#5B6B7B} .qz-oth{font-size:12.5px;font-weight:700;color:#0F2137} @media (max-width:600px){.qz-card{grid-template-columns:auto 1fr}.qz-cta{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}} .qz-again{margin-top:14px;border:0;background:none;font-weight:800;text-decoration:underline;cursor:pointer;color:#0F2137;font-size:14px} .qz-conf{position:absolute;width:10px;height:14px;border-radius:3px 3px 0 3px;pointer-events:none;z-index:9} @media (prefers-reduced-motion: reduce){.ag-s,.ag-panel,.qz-opts button,.qz-opts button span{transition:none}.qz-card{animation:none}} /* filtro interventi */ .wf{position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:6;margin:26px 0 6px;background:color-mix(in srgb,var(--bg-alt) 94%,transparent);backdrop-filter:blur(10px);padding:12px 0 6px;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:10px 16px;align-items:center} .wf-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:2px} @media (max-width:860px){.wf-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}} .wf-tabs::-webkit-scrollbar{display:none} .wf-tabs button{flex:none;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:2px solid var(--rule);background:var(--card);color:var(--title);padding:8px 12px;border-radius:10px 10px 0 10px;font-size:14px;transition:border-color .15s,background-color .15s,transform .15s} .wf-tabs button:hover{border-color:var(--a,var(--btn));transform:translateY(-2px)} .wf-tabs i{font-style:normal;font-size:11px;font-weight:900;color:#fff;background:var(--a);width:24px;height:24px;border-radius:8px 8px 0 8px;display:grid;place-items:center} .wf-tabs b{font-weight:800} .wf-tabs span{font-size:11.5px;font-weight:800;color:var(--muted);background:var(--chip);padding:1px 7px;border-radius:6px 6px 0 6px} .wf-tabs button[aria-selected="true"]{background:var(--a,var(--blue-dark));border-color:var(--a,var(--blue-dark));color:#fff} .wf-tabs button[aria-selected="true"] i{background:rgba(255,255,255,.22)} .wf-tabs button[aria-selected="true"] span{background:rgba(255,255,255,.2);color:#fff} .wf-search{display:flex;align-items:center;gap:8px;background:var(--card);border:2px solid var(--rule);border-radius:11px 11px 0 11px;padding:0 12px} .wf-search:focus-within{border-color:var(--btn)} .wf-search svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round} .wf-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14.5px;color:var(--title);padding:10px 0;outline:none} .wf-stat{grid-column:1/-1;margin:0;font-size:13.5px;font-weight:700;color:var(--muted)} .wf-empty{padding:30px 0;color:var(--muted)} #wfList .ld-asec:first-child{margin-top:18px} @media (max-width:860px){.wf{grid-template-columns:1fr;top:calc(env(safe-area-inset-top,0px) + 108px)}} .ld-foot{background:var(--bg);color:var(--muted);font-size:12px;padding-block:18px;border-top:1px solid var(--rule)} .ld-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--blue-dark);color:#fff;font-size:14px;font-weight:700;padding:12px 18px;border-radius:12px 12px 0 12px;z-index:40;max-width:calc(100% - 32px)} /* 2. DS «C2 Landing Education»: token, componenti, stile digitale */ :root{--c2-blue:#0074C5;--c2-blue-dark:#003E87;--c2-blue-light:#DFF1FF;--c2-orange:#F55D3E;--c2-orange-dark:#D94A2D;--c2-orange-light:#FFE6D9;--c2-yellow:#F7B32B;--c2-yellow-dark:#AD7500;--c2-yellow-light:#FFEDCB;--c2-green:#31C192;--c2-green-dark:#00522D;--c2-green-light:#CBFBE6;--c2-ink:#1E2530;--c2-black:#0F1419;--c2-cool-gray:#5F6368;--c2-gray:#DADCE0;--c2-gray-soft:#EDEFF2;--c2-light:#F9FAFB;--c2-white:#FFFFFF;--cat-title:#0F2137;--cat-text:#3A4D60;--cat-body:#33475B;--cat-muted:#5B6B7B;--cat-strike:#8A97A4;--cat-chip:#F4F7FB;--cat-rule:#E3E9F0;--cat-reco-bg:#EAFBF4;--cat-reco-rule:#BFE9D8;--cat-yellow-ink:#5A3D00;--cat-terminati:#D32F2F;--cat-off-1:#B0BAC5;--cat-off-2:#8A97A4;--sez-ambienti:#B8325A;--sez-ambienti-tinta:#EFD2DB;--sez-ambienti-tenue:#F8EAEE;--sez-ambienti-ink:#8A2644;--sez-it:var(--c2-blue);--sez-it-tinta:#C7E0F2;--sez-it-tenue:#E6F1F9;--sez-it-ink:#005794;--sez-visual:#7B3FA0;--sez-visual-tinta:#E2D5EA;--sez-visual-tenue:#F2ECF6;--sez-visual-ink:#5C2F78;--sez-stem:#0B7A78;--sez-stem-tinta:#C9E2E1;--sez-stem-tenue:#E7F2F2;--sez-stem-ink:#085C5A;--sez-laboratori:#A5660A;--sez-laboratori-tinta:#EBDDC9;--sez-laboratori-tenue:#F6F0E6;--sez-laboratori-ink:#7C4C08;--sez-software:#4338CA;--sez-software-tinta:#D6D3F3;--sez-software-tenue:#ECEBFA;--sez-software-ink:#322A98;--sez-formazione:#5B7A1F;--sez-formazione-tinta:#DBE2CE;--sez-formazione-tenue:#EFF2E9;--sez-formazione-ink:#445C17;--sez-pa:#3A4D60;--sez-pa-tinta:#D4D8DC;--sez-pa-tenue:#EBEDEF;--sez-pa-ink:#2C3A48;--sez-progetti:var(--c2-blue-dark);--sez-progetti-tinta:var(--c2-yellow);--sez-progetti-tenue:var(--c2-blue-light);--sez-progetti-ink:var(--c2-blue-dark);--tema-evento:var(--c2-blue-dark);--tema-campagna:var(--c2-blue);--c2-space-1:8px;--c2-space-2:12px;--c2-space-3:16px;--c2-space-4:22px;--c2-space-6:34px;--c2-space-8:56px;--l-max:1200px;--l-gutter:32px;--l-gutter-tel:20px;--l-sec:88px;--l-sec-tight:48px;--l-sec-tel:56px;--bp-tel:760px;--r-badge:6px;--r-chip:8px;--r-btn:9px;--r-box:14px;--r-panel:18px;--c2-r:24px;--font-sans:Montserrat, Arial, Helvetica, sans-serif;} /* C2 Landing Education — blocchi per le landing di c2group.it. Estende il DS «C2 Catalogo Education»: stessi token c2-*, cat-*, sez-*; firma di forma «3+1» (angolo in basso a destra vivo su ogni forma). Misure in px CSS. Responsive per CONTENITORE: .c2l è container-type:inline-size; sotto i 760 px (bp-tel) ogni blocco passa alla versione telefono, quindi la stessa pagina funziona dentro un'anteprima stretta. */ .c2l, .c2l * { box-sizing: border-box; } .c2l { container-type: inline-size; container-name: c2l; font-family: var(--font-sans); color: var(--c2-ink); background: var(--c2-white); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .c2l p, .c2l h1, .c2l h2, .c2l h3, .c2l h4, .c2l ul, .c2l ol, .c2l figure, .c2l blockquote { margin: 0; } .c2l img { display: block; max-width: 100%; } .c2l a { color: inherit; } .c2l svg { flex: none; } .c2l :focus-visible { outline: 3px solid var(--c2-orange); outline-offset: 3px; } /* ── Colore per regola ─────────────────────────────── Ogni landing imposta la tipologia sul contenitore .c2l: --t (base), --t-tinta (parola su base, solo ≥24px), --t-tenue (fondi), --t-ink (testo nel colore su bianco). Prodotto, case history e partner prendono la SEZIONE del catalogo; eventi e campagne generali i colori C2. Arancio, prezzi, codici e logo non seguono mai il tema. */ .c2l { --t: var(--c2-blue); --t-tinta: var(--c2-yellow); --t-tenue: var(--c2-blue-light); --t-ink: var(--c2-blue-dark); } .tema-evento { --t: var(--c2-blue-dark); --t-tinta: var(--c2-yellow); --t-tenue: var(--c2-blue-light); --t-ink: var(--c2-blue-dark); } .tema-campagna { --t: var(--c2-blue); --t-tinta: var(--c2-yellow); --t-tenue: var(--c2-blue-light); --t-ink: var(--c2-blue-dark); } .sez-ambienti { --t: var(--sez-ambienti); --t-tinta: var(--sez-ambienti-tinta); --t-tenue: var(--sez-ambienti-tenue); --t-ink: var(--sez-ambienti-ink); } .sez-it { --t: var(--sez-it); --t-tinta: var(--sez-it-tinta); --t-tenue: var(--sez-it-tenue); --t-ink: var(--sez-it-ink); } .sez-visual { --t: var(--sez-visual); --t-tinta: var(--sez-visual-tinta); --t-tenue: var(--sez-visual-tenue); --t-ink: var(--sez-visual-ink); } .sez-stem { --t: var(--sez-stem); --t-tinta: var(--sez-stem-tinta); --t-tenue: var(--sez-stem-tenue); --t-ink: var(--sez-stem-ink); } .sez-laboratori { --t: var(--sez-laboratori); --t-tinta: var(--sez-laboratori-tinta); --t-tenue: var(--sez-laboratori-tenue); --t-ink: var(--sez-laboratori-ink); } .sez-software { --t: var(--sez-software); --t-tinta: var(--sez-software-tinta); --t-tenue: var(--sez-software-tenue); --t-ink: var(--sez-software-ink); } .sez-formazione { --t: var(--sez-formazione); --t-tinta: var(--sez-formazione-tinta); --t-tenue: var(--sez-formazione-tenue); --t-ink: var(--sez-formazione-ink); } .sez-pa { --t: var(--sez-pa); --t-tinta: var(--sez-pa-tinta); --t-tenue: var(--sez-pa-tenue); --t-ink: var(--sez-pa-ink); } .sez-progetti { --t: var(--sez-progetti); --t-tinta: var(--sez-progetti-tinta); --t-tenue: var(--sez-progetti-tenue); --t-ink: var(--sez-progetti-ink); } /* ── Griglia e sezioni ─────────────────────────────── */ .c2l-wrap { width: 100%; max-width: calc(var(--l-max) + 2 * var(--l-gutter)); margin-inline: auto; padding-inline: var(--l-gutter); } .c2l-sec { padding-block: var(--l-sec); } .c2l-sec.is-tight { padding-block: var(--l-sec-tight); } .c2l-sec.is-tenue { background: var(--t-tenue); } .c2l-sec.is-light { background: var(--cat-chip); } .c2l-sec.is-fill { background: var(--t); color: var(--c2-white); } .c2l-sec.is-deep { background: var(--c2-blue-dark); color: var(--c2-white); } .c2l-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 44px; } .c2l-head.is-center { margin-inline: auto; text-align: center; justify-items: center; } .c2l-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .c2l-2col > * { min-width: 0; } /* ── Tipografia ───────────────────────────────────── */ .c2l-eyebrow { font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--t-ink); display: inline-flex; align-items: center; gap: 10px; } .is-fill .c2l-eyebrow, .is-deep .c2l-eyebrow, .c2l-onfill .c2l-eyebrow { color: var(--c2-white); } .c2l-eyebrow .sep { width: 5px; height: 5px; border-radius: 2px 2px 0 2px; background: currentColor; opacity: .6; } .c2l-h1 { font-size: 60px; line-height: 1.0; font-weight: 900; letter-spacing: -.03em; text-wrap: balance; color: var(--c2-blue-dark); } .c2l-h2 { font-size: 40px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; color: var(--c2-blue-dark); } .c2l-h3 { font-size: 21px; line-height: 1.25; font-weight: 800; color: var(--cat-title); text-wrap: balance; } .is-fill .c2l-h1, .is-fill .c2l-h2, .is-fill .c2l-h3, .is-deep .c2l-h1, .is-deep .c2l-h2, .is-deep .c2l-h3, .c2l-onfill .c2l-h1, .c2l-onfill .c2l-h2 { color: var(--c2-white); } .c2l-hl { color: var(--t-ink); } .is-fill .c2l-hl, .is-deep .c2l-hl, .c2l-onfill .c2l-hl { color: var(--t-tinta); } .c2l-lead { font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--cat-title); max-width: 60ch; } .is-fill .c2l-lead, .is-deep .c2l-lead, .c2l-onfill .c2l-lead { color: var(--c2-white); } .c2l-text { font-size: 17.5px; line-height: 1.6; font-weight: 500; color: var(--cat-body); max-width: 62ch; } .is-fill .c2l-text, .is-deep .c2l-text, .c2l-onfill .c2l-text { color: var(--c2-white); } .c2l-small { font-size: 14.5px; line-height: 1.45; font-weight: 500; color: var(--cat-muted); } .c2l-bar { width: 48px; height: 5px; background: var(--c2-orange); border-radius: 3px 3px 0 3px; } .c2l-tab { font-variant-numeric: tabular-nums; } /* ── Icone (Tabler outline in linea, stroke=currentColor) ── */ .c2l-ico { width: 22px; height: 22px; } .c2l-tile { width: 52px; height: 52px; display: grid; place-items: center; background: var(--t-tenue); color: var(--t-ink); border-radius: var(--r-box) var(--r-box) 0 var(--r-box); } .c2l-tile svg { width: 26px; height: 26px; } .is-fill .c2l-tile, .is-deep .c2l-tile { background: rgba(255,255,255,.14); color: var(--c2-white); } /* ── Pulsanti ─────────────────────────────────────── */ .c2l-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border: 2px solid transparent; border-radius: var(--r-btn) var(--r-btn) 0 var(--r-btn); font: 800 16px/1.1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; } .c2l-btn svg { width: 20px; height: 20px; } .c2l-btn.is-cta { background: var(--c2-orange); color: var(--c2-white); } .c2l-btn.is-cta:hover { background: var(--c2-orange-dark); } .c2l-btn.is-blue { background: var(--c2-blue); color: var(--c2-white); } .c2l-btn.is-mepa { background: var(--c2-blue-dark); color: var(--c2-white); } .c2l-btn.is-line { background: transparent; border-color: currentColor; color: var(--c2-blue-dark); } .is-fill .c2l-btn.is-line, .is-deep .c2l-btn.is-line, .c2l-onfill .c2l-btn.is-line { color: var(--c2-white); } .c2l-btn.is-sm { min-height: 40px; padding: 9px 16px; font-size: 14px; } .c2l-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--c2-blue); text-decoration: none; } .c2l-link svg { width: 18px; height: 18px; } .c2l-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* ── Pastiglie e bollini ──────────────────────────── */ .c2l-pills { display: flex; flex-wrap: wrap; gap: 8px; } .c2l-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; font-size: 15px; line-height: 1.2; font-weight: 700; background: var(--cat-chip); color: var(--cat-title); border-radius: var(--r-chip) var(--r-chip) 0 var(--r-chip); } .c2l-pill svg { width: 18px; height: 18px; color: var(--t-ink); } .is-fill .c2l-pill, .is-deep .c2l-pill, .c2l-onfill .c2l-pill { background: rgba(255,255,255,.14); color: var(--c2-white); } .is-fill .c2l-pill svg, .is-deep .c2l-pill svg, .c2l-onfill .c2l-pill svg { color: var(--c2-white); } .c2l-pill.is-stand { background: var(--c2-yellow); color: var(--cat-yellow-ink); } .c2l-pill.is-stand svg { color: var(--cat-yellow-ink); } .c2l-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; border-radius: var(--r-badge) var(--r-badge) 0 var(--r-badge); } .c2l-badge.is-promo { background: var(--c2-orange); color: var(--c2-white); } .c2l-badge.is-ultimi { background: var(--c2-yellow); color: var(--cat-yellow-ink); } .c2l-badge.is-ok { background: var(--c2-green-light); color: var(--c2-green-dark); } .c2l-badge.is-tema { background: var(--t); color: var(--c2-white); } .c2l-badge.is-fondi { background: var(--c2-blue-dark); color: var(--c2-white); } .c2l-badge svg { width: 14px; height: 14px; } /* ── Testata ──────────────────────────────────────── */ .c2l-top { position: sticky; top: 0; z-index: 20; background: var(--c2-white); border-bottom: 1px solid var(--cat-rule); } .c2l-top .c2l-wrap { display: flex; align-items: center; gap: 28px; min-height: 72px; } .c2l-logo { height: 34px; width: auto; } .c2l-cob { display: flex; align-items: center; gap: 14px; padding-left: 18px; border-left: 1px solid var(--cat-rule); } .c2l-cob img { height: 40px; width: auto; } .c2l-anchors { display: flex; gap: 22px; margin-left: auto; font-size: 15px; font-weight: 700; } .c2l-anchors a { text-decoration: none; color: var(--cat-body); padding-block: 6px; border-bottom: 3px solid transparent; } .c2l-anchors a[aria-current="true"] { color: var(--t-ink); border-bottom-color: var(--t); } .c2l-top .c2l-btn { min-height: 44px; padding: 10px 18px; font-size: 15px; } /* ── Passi Capire · Applicare · Scegliere (sottomenu ancorato) ── */ .c2l-steps { display: flex; gap: 6px; padding: 6px; background: var(--c2-white); border: 1px solid var(--cat-rule); border-radius: var(--r-panel) var(--r-panel) 0 var(--r-panel); width: max-content; max-width: 100%; } .c2l-steps a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; font-size: 15px; font-weight: 800; color: var(--cat-muted); border-radius: var(--r-box) var(--r-box) 0 var(--r-box); } .c2l-steps a b { font-variant-numeric: tabular-nums; width: 24px; height: 24px; display: grid; place-items: center; font-size: 12px; border-radius: 7px 7px 0 7px; background: var(--cat-chip); color: var(--cat-muted); } .c2l-steps a[aria-current="true"] { background: var(--t); color: var(--c2-white); } .c2l-steps a[aria-current="true"] b { background: rgba(255,255,255,.22); color: var(--c2-white); } /* ── Foto ─────────────────────────────────────────── */ .c2l-photo { position: relative; overflow: hidden; border-radius: var(--c2-r) var(--c2-r) 0 var(--c2-r); background: var(--c2-light); } .c2l-photo img { width: 100%; height: 100%; object-fit: cover; } .c2l-photo.is-contain img { object-fit: contain; padding: 28px; } .c2l-cap { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--cat-muted); } /* ── HERO · comune ────────────────────────────────── */ .c2l-hero { position: relative; padding-block: 72px 80px; } .c2l-hero .c2l-2col { grid-template-columns: 1.05fr .95fr; } .c2l-hero-tx { display: grid; gap: 22px; align-content: center; } .c2l-hero .c2l-photo { aspect-ratio: 5 / 4; } /* HeroCapitolo (sistema 1): fondo tenue di sezione, passi in testa, foto d'uso */ .c2l-hero.is-capitolo { background: var(--t-tenue); } .c2l-hero.is-capitolo .c2l-steps { margin-bottom: 8px; } /* HeroBiglietto (sistema 4): fondo pieno, il biglietto con data/luogo/stand a destra */ .c2l-hero.is-biglietto { background: var(--t); color: var(--c2-white); overflow: hidden; } .c2l-hero.is-biglietto .c2l-2col { grid-template-columns: 1.2fr .8fr; } .c2l-ticket { background: var(--c2-white); color: var(--cat-title); border-radius: var(--c2-r) var(--c2-r) 0 var(--c2-r); overflow: hidden; display: grid; } .c2l-ticket-top { padding: 26px 28px 22px; display: grid; gap: 16px; } .c2l-ticket-date { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline; } .c2l-ticket-date b { font-size: 64px; line-height: .9; font-weight: 900; letter-spacing: -.04em; color: var(--c2-blue-dark); font-variant-numeric: tabular-nums; } .c2l-ticket-date span { font-size: 18px; font-weight: 800; color: var(--c2-blue-dark); line-height: 1.25; } .c2l-ticket-rows { display: grid; gap: 10px; font-size: 16px; font-weight: 600; } .c2l-ticket-rows div { display: flex; gap: 10px; align-items: center; } .c2l-ticket-rows svg { width: 20px; height: 20px; color: var(--c2-blue); } .c2l-ticket-cut { height: 0; border-top: 2px dashed var(--cat-rule); margin-inline: 18px; position: relative; } .c2l-ticket-bot { padding: 22px 28px 26px; display: grid; gap: 12px; } .c2l-ticket-bot .c2l-btn { width: 100%; } /* HeroStoria (sistema 3): foto al vivo con velo del tema, scuola e città in testa */ .c2l-hero.is-storia { padding: 0; color: var(--c2-white); min-height: 560px; display: grid; align-items: end; overflow: hidden; } .c2l-hero.is-storia > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .c2l-hero.is-storia::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--t) 22%, transparent) 0%, color-mix(in srgb, var(--t) 90%, transparent) 64%); } .c2l-hero.is-storia .c2l-wrap { position: relative; padding-block: 120px 64px; display: grid; gap: 20px; } .c2l-hero.is-storia .c2l-h1 { color: var(--c2-white); max-width: 18ch; } .c2l-hero.is-storia .c2l-lead { color: var(--c2-white); } .c2l-where { display: inline-flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 800; } .c2l-where svg { width: 20px; height: 20px; color: var(--t-tinta); } /* HeroMarchio (sistema 5): lockup C2 × marchio, badge del programma, prodotto su c2-light */ .c2l-hero.is-marchio { background: var(--c2-white); border-bottom: 1px solid var(--cat-rule); } .c2l-lockup { display: flex; align-items: center; gap: 18px; } .c2l-lockup img { height: 40px; width: auto; } .c2l-lockup .x { font-size: 26px; font-weight: 400; color: var(--cat-muted); } .c2l-lockup .prog { height: 64px; } .c2l-hero.is-marchio .c2l-photo { background: var(--t-tenue); } /* HeroPorte (sistema 2): titolo su fondo pieno, le porte per ruolo a cavallo del bordo */ .c2l-hero.is-porte { background: var(--t); color: var(--c2-white); padding-block: 72px 0; } .c2l-hero.is-porte .c2l-hero-tx { max-width: 820px; padding-bottom: 56px; } .c2l-hero.is-porte .c2l-porte { margin-bottom: -72px; position: relative; } .c2l-hero.is-porte + * { padding-top: calc(var(--l-sec) + 72px); } /* ── Numeri ───────────────────────────────────────── */ .c2l-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px 36px; } .c2l-num { display: grid; gap: 8px; align-content: start; border-top: 3px solid var(--t); padding-top: 16px; } .c2l-num b { font-size: 60px; line-height: .9; font-weight: 900; letter-spacing: -.04em; color: var(--c2-blue-dark); font-variant-numeric: tabular-nums; } .c2l-num span { font-size: 16px; line-height: 1.4; color: var(--cat-body); font-weight: 600; } .is-fill .c2l-num, .is-deep .c2l-num { border-top-color: var(--c2-yellow); } .is-fill .c2l-num b, .is-deep .c2l-num b { color: var(--c2-yellow); } .is-fill .c2l-num span, .is-deep .c2l-num span { color: var(--c2-white); } .c2l-fonte { margin-top: 18px; font-size: 13px; color: var(--cat-muted); } .is-fill .c2l-fonte, .is-deep .c2l-fonte { color: var(--c2-white); opacity: .8; } /* ── Perché (Capire) ──────────────────────────────── */ .c2l-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .c2l-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .c2l-cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .c2l-why { display: grid; gap: 14px; align-content: start; } .c2l-why .c2l-text { font-size: 17px; } .c2l-pr { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-panel) var(--r-panel) 0 var(--r-panel); overflow: hidden; border: 1px solid var(--cat-rule); } .c2l-pr > div { padding: 30px 32px; display: grid; gap: 12px; align-content: start; } .c2l-pr > div + div { background: var(--t-tenue); } .c2l-pr ul { padding-left: 20px; display: grid; gap: 8px; color: var(--cat-text); } /* ── Porte per ruolo (sistema 2) ──────────────────── */ .c2l-porte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .c2l-porta { background: var(--c2-white); color: var(--cat-title); padding: 24px; display: grid; gap: 12px; align-content: start; text-decoration: none; border: 1px solid var(--cat-rule); border-radius: var(--r-panel) var(--r-panel) 0 var(--r-panel); } .c2l-porta:hover { border-color: var(--t); } .c2l-porta .who { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-ink); } .c2l-porta h3 { font-size: 19px; line-height: 1.25; font-weight: 800; } .c2l-porta p { font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--cat-body); } .c2l-porta .c2l-link { margin-top: auto; font-size: 15px; } .c2l-porta.is-pa { --t: var(--sez-pa); --t-tenue: var(--sez-pa-tenue); --t-ink: var(--sez-pa-ink); } /* ── Aula in uso (Applicare) ──────────────────────── */ .c2l-aula { display: grid; grid-template-columns: 1.35fr .65fr; gap: 40px; align-items: start; } .c2l-aula .c2l-photo { aspect-ratio: 16 / 10; } .c2l-dot { position: absolute; transform: translate(-50%, -50%); width: 36px; height: 36px; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: var(--c2-white); background: var(--t); border: 3px solid var(--c2-white); border-radius: 12px 12px 0 12px; font-variant-numeric: tabular-nums; } .c2l-callouts { display: grid; gap: 22px; counter-reset: c; list-style: none; padding: 0; } .c2l-callouts li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; } .c2l-callouts li::before { counter-increment: c; content: counter(c); width: 36px; height: 36px; display: grid; place-items: center; font-weight: 900; color: var(--c2-white); background: var(--t); border-radius: 12px 12px 0 12px; } .c2l-callouts b { display: block; font-size: 17px; color: var(--cat-title); } .c2l-callouts span { font-size: 15.5px; font-weight: 500; color: var(--cat-body); } .c2l-callouts .cod { font-size: 13px; font-weight: 800; color: var(--c2-blue-dark); } /* ── Lezione pronta (Applicare) ───────────────────── */ .c2l-lez { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; border-radius: var(--c2-r) var(--c2-r) 0 var(--c2-r); overflow: hidden; background: var(--c2-white); border: 1px solid var(--cat-rule); } .c2l-lez .c2l-photo { border-radius: 0; height: 100%; min-height: 320px; } .c2l-lez-tx { padding: 36px 40px; display: grid; gap: 18px; align-content: start; } .c2l-lez-tx .c2l-h3 { font-size: 26px; color: var(--t-ink); } .c2l-lez dl { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; } .c2l-lez dt { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-ink); } .c2l-lez dd { margin: 0 0 10px; color: var(--cat-body); font-weight: 500; font-size: 16.5px; } .c2l-lez ol { padding-left: 22px; display: grid; gap: 8px; color: var(--cat-body); font-weight: 500; font-size: 16.5px; } .c2l-lez ol li::marker { font-weight: 900; color: var(--t-ink); } /* ── Agenda prenotabile (sistema 4) ───────────────── */ .c2l-days { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .c2l-day { display: grid; gap: 2px; padding: 12px 18px; min-width: 120px; text-align: left; border: 2px solid var(--cat-rule); background: var(--c2-white); cursor: pointer; border-radius: var(--r-box) var(--r-box) 0 var(--r-box); font: 800 15px/1.2 var(--font-sans); color: var(--cat-title); } .c2l-day small { font-size: 13px; font-weight: 600; color: var(--cat-muted); } .c2l-day[aria-pressed="true"] { background: var(--c2-blue-dark); border-color: var(--c2-blue-dark); color: var(--c2-white); } .c2l-day[aria-pressed="true"] small { color: var(--c2-yellow); } .c2l-agenda { display: grid; gap: 0; border-top: 1px solid var(--cat-rule); } .c2l-sess { display: grid; grid-template-columns: 84px 1fr auto; gap: 22px; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--cat-rule); } .c2l-sess time { font-size: 22px; font-weight: 900; color: var(--c2-blue-dark); font-variant-numeric: tabular-nums; } .c2l-sess .t { display: grid; gap: 6px; min-width: 0; } .c2l-sess .t b { font-size: 18px; line-height: 1.3; color: var(--cat-title); } .c2l-sess .t span { font-size: 14px; color: var(--cat-muted); } .c2l-area { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--t-ink); } .c2l-area::before { content: ""; width: 10px; height: 10px; background: var(--t); border-radius: 3px 3px 0 3px; } /* ── Relatori ─────────────────────────────────────── */ .c2l-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; } .c2l-person { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; } .c2l-person img, .c2l-person .ini { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--t-tenue); } .c2l-person .ini { display: grid; place-items: center; font-weight: 900; color: var(--t-ink); font-size: 22px; } .c2l-person b { display: block; font-size: 17px; color: var(--cat-title); line-height: 1.25; } .c2l-person span { font-size: 14px; color: var(--cat-muted); line-height: 1.35; } /* ── Sfida · Soluzione · Risultati (sistema 3) ────── */ .c2l-ssr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 3px solid var(--t); } .c2l-ssr > div { padding: 26px 28px 0 0; display: grid; gap: 12px; align-content: start; } .c2l-ssr > div + div { padding-left: 28px; border-left: 1px solid var(--cat-rule); } .c2l-ssr .k { font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--t-ink); } .c2l-ssr ul { padding-left: 18px; display: grid; gap: 8px; color: var(--cat-body); font-weight: 500; font-size: 16.5px; } .c2l-timeline { display: grid; gap: 0; list-style: none; padding: 0; } .c2l-timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding-block: 14px; border-bottom: 1px solid var(--cat-rule); } .c2l-timeline time { font-weight: 800; color: var(--t-ink); font-variant-numeric: tabular-nums; } /* ── Voce di una scuola vera (BuonaPratica) ───────── */ .c2l-voce { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; padding: 44px 48px; background: var(--c2-blue-light); border-radius: var(--c2-r) var(--c2-r) 0 var(--c2-r); } .c2l-voce svg.q { width: 56px; height: 56px; color: var(--c2-blue); } .c2l-voce blockquote { font-size: 28px; line-height: 1.3; font-weight: 800; color: var(--c2-blue-dark); text-wrap: balance; } .c2l-voce figcaption { margin-top: 22px; display: flex; gap: 14px; align-items: center; } .c2l-voce figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .c2l-voce figcaption b { display: block; color: var(--cat-title); } .c2l-voce figcaption span { font-size: 15px; color: var(--cat-body); } .c2l-voce.is-segnaposto { background: var(--c2-white); border: 2px dashed var(--cat-off-1); } .c2l-voce.is-segnaposto blockquote { color: var(--cat-muted); } /* ── Schede prodotto (Scegliere) ──────────────────── */ .c2l-schede { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: start; } .c2l-scheda { display: grid; grid-template-rows: auto 1fr; background: var(--c2-white); border: 1px solid var(--cat-rule); border-radius: var(--r-panel) var(--r-panel) 0 var(--r-panel); overflow: hidden; } .c2l-scheda .c2l-photo { border-radius: 0; height: 260px; background: var(--c2-light); } .c2l-scheda .c2l-photo .c2l-badge { position: absolute; top: 14px; left: 14px; } .c2l-scheda-tx { padding: 22px 24px 24px; display: grid; gap: 14px; align-content: start; } .c2l-cod { font-size: 14px; font-weight: 800; color: var(--c2-blue-dark); letter-spacing: .3px; font-variant-numeric: tabular-nums; } .c2l-scheda h3 { font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--cat-title); } .c2l-campi { display: grid; gap: 12px; } .c2l-campo { display: grid; grid-template-columns: 22px 1fr; gap: 10px; } .c2l-campo svg { width: 22px; height: 22px; color: var(--t-ink); } .c2l-campo b { display: block; font-size: 15px; font-weight: 800; color: var(--t-ink); margin-bottom: 2px; } .c2l-campo p { font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--cat-body); } .c2l-chips { display: flex; flex-wrap: wrap; gap: 6px; } .c2l-chips span { font-size: 13px; font-weight: 700; padding: 5px 9px; background: var(--cat-chip); color: var(--cat-title); border-radius: 6px 6px 0 6px; } .c2l-prezzo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--cat-rule); } .c2l-prezzo b { font-size: 26px; font-weight: 800; color: var(--c2-blue-dark); font-variant-numeric: tabular-nums; } .c2l-prezzo s { color: var(--cat-strike); font-weight: 600; } .c2l-prezzo b.is-promo { color: var(--c2-orange); } .c2l-prezzo span { font-size: 14px; color: var(--cat-muted); font-weight: 600; } .c2l-scheda .c2l-btns .c2l-btn { flex: 1 1 auto; min-height: 46px; padding: 11px 14px; font-size: 14px; } .c2l-scheda.is-wide { grid-template-columns: .9fr 1.1fr; grid-template-rows: none; } .c2l-scheda.is-wide .c2l-photo { height: 100%; min-height: 380px; } /* ── Servizi C2 / Perché da C2 (fascia) ───────────── */ .c2l-serv { display: grid; gap: 14px; align-content: start; } .c2l-serv h3 { font-size: 19px; } .c2l-serv p { font-size: 15.5px; line-height: 1.5; } .is-fill .c2l-serv p, .is-deep .c2l-serv p { color: var(--c2-white); opacity: .92; } /* ── Da scaricare ─────────────────────────────────── */ .c2l-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .c2l-file { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 22px; background: var(--c2-white); border: 1px solid var(--cat-rule); border-radius: var(--r-panel) var(--r-panel) 0 var(--r-panel); text-decoration: none; } .c2l-file .k { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-ink); } .c2l-file b { display: block; font-size: 17px; line-height: 1.3; color: var(--cat-title); margin: 4px 0; } .c2l-file span { font-size: 14px; color: var(--cat-muted); } .c2l-file .c2l-link { grid-column: 2; font-size: 15px; } /* ── Domande frequenti ───────────────────────────── */ .c2l-faq { display: grid; border-top: 1px solid var(--cat-rule); max-width: 880px; } .c2l-faq details { border-bottom: 1px solid var(--cat-rule); } .c2l-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding-block: 20px; font-size: 18px; font-weight: 800; color: var(--cat-title); } .c2l-faq summary::-webkit-details-marker { display: none; } .c2l-faq summary svg { width: 24px; height: 24px; color: var(--c2-blue); transition: transform .2s; } .c2l-faq details[open] summary svg { transform: rotate(45deg); } .c2l-faq details p { padding-bottom: 22px; font-weight: 500; color: var(--cat-body); max-width: 68ch; } @media (prefers-reduced-motion: reduce) { .c2l-faq summary svg { transition: none; } } /* ── Contatto finale ─────────────────────────────── */ .c2l-contatto .c2l-2col { align-items: start; } .c2l-contatto .c2l-hero-tx { gap: 20px; } .c2l-nv { height: 46px; width: auto; background: var(--c2-white); padding: 4px; border-radius: 8px 8px 0 8px; } .c2l-mail { font-size: 18px; font-weight: 800; color: var(--c2-yellow); } .c2l-form { background: var(--c2-white); color: var(--cat-title); padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; border-radius: var(--c2-r) var(--c2-r) 0 var(--c2-r); align-items: start; } .c2l-form .full { grid-column: 1 / -1; } .c2l-field { display: grid; gap: 6px; } .c2l-field label { font-size: 13px; font-weight: 800; color: var(--cat-title); } .c2l-field input, .c2l-field select, .c2l-field textarea { font: 500 16px/1.4 var(--font-sans); color: var(--cat-title); padding: 12px 14px; border: 1.5px solid var(--cat-off-1); border-radius: var(--r-chip) var(--r-chip) 0 var(--r-chip); background: var(--c2-white); width: 100%; } .c2l-field input:focus, .c2l-field select:focus, .c2l-field textarea:focus { outline: 3px solid var(--c2-blue-light); border-color: var(--c2-blue); } .c2l-field small { font-size: 12.5px; color: var(--cat-muted); } .c2l-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--cat-body); } .c2l-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c2-blue); } .c2l-form .c2l-btn { width: 100%; } /* ── Altre storie / altri eventi ─────────────────── */ .c2l-storie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .c2l-storia { display: grid; gap: 12px; text-decoration: none; color: inherit; } .c2l-storia .c2l-photo { aspect-ratio: 16 / 10; border-bottom: 4px solid var(--t); } .c2l-storia .w { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-ink); } .c2l-storia b { font-size: 19px; line-height: 1.3; color: var(--cat-title); } /* ── Piede ───────────────────────────────────────── */ .c2l-foot { background: var(--c2-black); color: var(--c2-white); padding-block: 40px; font-size: 14px; } .c2l-foot .c2l-wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-between; } .c2l-foot img { height: 30px; } .c2l-foot p { opacity: .8; } /* Formati per la classe dentro la scheda (kit venduti per 2, 8, 12, 24 studenti) */ .c2l-taglie { display: grid; gap: 0; border-top: 1px solid var(--cat-rule); } .c2l-taglie a { display: grid; grid-template-columns: 1fr auto 18px; gap: 10px; align-items: center; padding-block: 9px; border-bottom: 1px solid var(--cat-rule); text-decoration: none; font-size: 14.5px; color: var(--cat-body); } .c2l-taglie a b { font-weight: 800; color: var(--c2-blue-dark); font-variant-numeric: tabular-nums; white-space: nowrap; } .c2l-taglie a svg { width: 16px; height: 16px; color: var(--c2-blue); } .c2l-taglie a:hover { color: var(--c2-blue-dark); } /* Gruppo di schede con titolo d'ordine di scuola */ .c2l-gruppo { display: grid; gap: 22px; scroll-margin-top: 90px; } .c2l-gruppo + .c2l-gruppo { margin-top: 56px; } .c2l-gruppo-h { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 3px solid var(--t); } .c2l-gruppo-h h3 { font-size: 26px; font-weight: 900; color: var(--c2-blue-dark); letter-spacing: -.01em; } .c2l-porta .c2l-photo { aspect-ratio: 16 / 10; margin: -24px -24px 6px; border-radius: var(--r-panel) var(--r-panel) 0 0; } .c2l-badge-img { height: 96px; width: auto; margin-left: -12px; } .c2l-legal { font-size: 12.5px; line-height: 1.5; opacity: .7; max-width: 100%; } /* ═══════════════════════════════════════════════════════════════════ STILE DIGITALE (.c2d-*) · dal 07/10/2026, dopo la landing C2 × LEGO Education («sembra una pagina di catalogo, poco digital, navigazione piatta»: approvata la versione digitale). Si attiva con
. Colori dalla tipologia (--t, --t-tinta, --t-tenue, --t-ink); fondo scuro dell'apertura = --t-ink scurito. Comportamento in components/bundle.js (C2Landing.init). ═══════════════════════════════════════════════════════════════════ */ .c2d { --c2d-deep: color-mix(in srgb, var(--t-ink) 72%, #021c1c); --c2d-r: 24px 24px 0 24px; --c2d-r-s: 14px 14px 0 14px; --c2d-ombra: 0 2px 6px rgba(15,33,55,.06), 0 18px 40px rgba(15,33,55,.10); --c2d-ease: cubic-bezier(.2,.7,.2,1); } .c2d main { display: block; } .c2d h1, .c2d h2, .c2d h3 { text-wrap: balance; } .c2d p { text-wrap: pretty; } /* ── Comparsa allo scorrimento (solo con JS; senza JS tutto è visibile) ── */ html.js .c2d .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--c2d-ease), transform .8s var(--c2d-ease); transition-delay: calc(var(--d, 0) * 90ms); } html.js .c2d .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .c2d .rv { opacity: 1; transform: none; transition: none; } } /* ── Testata ── */ .c2d-top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--c2-white) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--cat-rule) 70%, transparent); } .c2d-top .c2l-wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; } .c2d-logo img { height: 32px; width: auto; display: block; } .c2d-nav { display: flex; gap: 4px; margin-left: auto; } .c2d-nav a { position: relative; padding: 9px 14px; font-size: 15px; font-weight: 700; color: var(--cat-body); text-decoration: none; border-radius: 10px 10px 0 10px; transition: background .2s, color .2s; } .c2d-nav a:hover { background: var(--t-tenue); color: var(--t-ink); } .c2d-nav a[aria-current="true"] { background: var(--t); color: var(--c2-white); } .c2d-top .c2l-btn { min-height: 44px; padding: 10px 18px; font-size: 15px; } .c2d-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; } .c2d-bar i { display: block; height: 100%; width: 100%; background: var(--t); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); } /* ── Sezioni ── */ .c2d-sec { padding-block: 88px; position: relative; } .c2d-tint { background: var(--t-tenue); } .c2d-dark { background: var(--c2-blue-dark); color: var(--c2-white); } .c2d-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: 40px; } .c2d-head h2 { font-size: 46px; line-height: 1.04; font-weight: 900; letter-spacing: -.03em; color: var(--c2-blue-dark); } .c2d-head h2 span { color: var(--t-ink); } .c2d-head p { font-size: 19px; line-height: 1.55; font-weight: 500; color: var(--cat-body); } .c2d-dark .c2d-head h2, .c2d-dark .c2d-head p { color: var(--c2-white); } .c2d-dark .c2d-head h2 span { color: var(--c2-yellow); } .c2d-dark .c2l-eyebrow { color: var(--c2-yellow); } .c2d-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } .c2d-split > * { min-width: 0; } .c2d-split .c2d-head { margin-bottom: 0; position: sticky; top: 110px; } .c2d-ico { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: var(--c2d-r-s); background: var(--t-tenue); color: var(--t-ink); } .c2d-ico svg { width: 24px; height: 24px; } /* ── Apertura ── */ .c2d-hero { background: radial-gradient(120% 90% at 85% 10%, var(--t) 0%, var(--c2d-deep) 62%); color: var(--c2-white); padding-block: 56px 72px; overflow: hidden; } .c2d-hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .c2d-hero-tx { display: grid; gap: 24px; min-width: 0; } .c2d-badge { height: 92px; width: auto; background: var(--c2-white); padding: 6px 14px; border-radius: var(--c2d-r-s); justify-self: start; } .c2d-hero h1 { font-size: 64px; line-height: .98; font-weight: 900; letter-spacing: -.035em; color: var(--c2-white); } .c2d-hero h1 span { color: var(--t-tinta); } .c2d-hero-tx > p { font-size: 20px; line-height: 1.5; font-weight: 500; max-width: 52ch; color: color-mix(in srgb, var(--c2-white) 92%, transparent); } .c2d-hero .c2l-btn.is-line { color: var(--c2-white); } .c2d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 0; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--c2-white) 22%, transparent); } .c2d-stats dt { font-size: 44px; line-height: 1; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .c2d-stats dd { margin: 6px 0 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: color-mix(in srgb, var(--c2-white) 82%, transparent); } /* mazzo di foto che si alternano */ .c2d-deck { position: relative; aspect-ratio: 1; width: min(100%, 500px); justify-self: center; margin: 24px; } .c2d-deck-card { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--c2d-r); box-shadow: 0 30px 60px rgba(0,0,0,.35); transition: transform 1s var(--c2d-ease), opacity .8s ease, filter .8s ease; will-change: transform; } .c2d-deck-card[data-pos="0"] { z-index: 4; transform: none; } .c2d-deck-card[data-pos="1"] { z-index: 3; transform: translate(26px, -22px) rotate(5deg) scale(.95); filter: brightness(.82); } .c2d-deck-card[data-pos="2"] { z-index: 2; transform: translate(-24px, -34px) rotate(-6deg) scale(.9); filter: brightness(.7); } .c2d-deck-card[data-pos="3"] { z-index: 1; transform: translate(0, -40px) scale(.86); opacity: 0; } .c2d-deck-card.is-via { z-index: 5; transform: translate(-115%, 40px) rotate(-14deg); opacity: 0; } /* ingressi per ordine di scuola */ .c2d .c2d-doors-h { margin: 56px 0 16px; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--t-tinta); } .c2d-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .c2d-door { position: relative; display: block; min-height: 220px; border-radius: var(--c2d-r); overflow: hidden; color: var(--c2-white); text-decoration: none; isolation: isolate; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c2-white) 16%, transparent); } .c2d-door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--c2d-ease); } .c2d-door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--c2d-deep) 92%, transparent) 88%); } .c2d-door-tx { position: absolute; left: 22px; right: 70px; bottom: 20px; display: grid; gap: 4px; } .c2d-door small { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-tinta); } .c2d-door b { font-size: 26px; line-height: 1.05; font-weight: 900; letter-spacing: -.02em; } .c2d-door em { font-style: normal; font-size: 15px; font-weight: 500; opacity: .9; } .c2d-door > svg { position: absolute; right: 20px; bottom: 22px; width: 42px; height: 42px; padding: 10px; border-radius: 12px 12px 0 12px; background: var(--c2-orange); color: var(--c2-white); transition: transform .4s var(--c2d-ease); } .c2d-door:hover img { transform: scale(1.07); } .c2d-door:hover > svg { transform: translateX(4px); } /* ── Esploratore dei kit ── */ .c2d-explorer-bar { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-bottom: 18px; } .c2d-tabs { position: relative; display: inline-flex; padding: 6px; gap: 4px; background: var(--c2-white); border-radius: 18px 18px 0 18px; box-shadow: var(--c2d-ombra); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .c2d-tabs button { position: relative; z-index: 1; display: grid; gap: 1px; text-align: left; padding: 10px 20px; border: 0; background: none; cursor: pointer; border-radius: 13px 13px 0 13px; font: 800 16px/1.2 var(--font-sans); color: var(--cat-title); white-space: nowrap; transition: color .3s; } .c2d-tabs button small { font-size: 12.5px; font-weight: 600; color: var(--cat-muted); transition: color .3s; } .c2d-tabs button[aria-selected="true"], .c2d-tabs button[aria-selected="true"] small { color: var(--c2-white); } .c2d-tab-ink { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; background: var(--t); border-radius: 13px 13px 0 13px; transition: left .45s var(--c2d-ease), width .45s var(--c2d-ease); } .c2d-rail-ctrl { display: flex; align-items: center; gap: 12px; } .c2d-arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 0; cursor: pointer; background: var(--c2-white); color: var(--c2-blue-dark); border-radius: 14px 14px 0 14px; box-shadow: var(--c2d-ombra); transition: transform .2s, background .2s, opacity .2s; } .c2d-arrow:hover { background: var(--c2-blue-dark); color: var(--c2-white); } .c2d-arrow:disabled { opacity: .35; cursor: default; background: var(--c2-white); color: var(--c2-blue-dark); } .c2d-arrow svg { width: 22px; height: 22px; } .c2d-progress { width: 140px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--t) 22%, transparent); overflow: hidden; } .c2d-progress i { display: block; height: 100%; width: 30%; background: var(--t); border-radius: 2px; transition: transform .25s, width .25s; } .c2d .c2d-rail-sub { font-size: 16px; font-weight: 600; color: var(--t-ink); margin-bottom: 10px; } .c2d-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(372px, 84%); gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 8px 4px 28px; margin-inline: -4px; scrollbar-width: none; cursor: grab; } .c2d-rail::-webkit-scrollbar { display: none; } .c2d-rail.is-drag { cursor: grabbing; scroll-snap-type: none; } .c2d-rail.is-drag * { pointer-events: none; } .c2d-rail > * { scroll-snap-align: start; } .c2d-rail-wrap.is-entra .c2d-card { animation: c2d-entra .7s var(--c2d-ease) both; } .c2d-rail-wrap.is-entra .c2d-card:nth-child(2) { animation-delay: .08s; } .c2d-rail-wrap.is-entra .c2d-card:nth-child(3) { animation-delay: .16s; } @keyframes c2d-entra { from { opacity: 0; transform: translateX(40px); } } @media (prefers-reduced-motion: reduce) { .c2d-rail-wrap.is-entra .c2d-card { animation: none; } } /* scheda leggera */ .c2d-card { display: grid; grid-template-rows: auto 1fr; background: var(--c2-white); border-radius: var(--c2d-r); overflow: hidden; box-shadow: var(--c2d-ombra); transition: transform .4s var(--c2d-ease), box-shadow .4s; } .c2d-card:hover { transform: translateY(-6px); box-shadow: 0 4px 10px rgba(15,33,55,.08), 0 28px 60px rgba(15,33,55,.16); } .c2d-card-tx { display: grid; gap: 10px; padding: 20px 22px 22px; align-content: start; } .c2d-cod { font-size: 13px; font-weight: 800; color: var(--c2-blue-dark); font-variant-numeric: tabular-nums; letter-spacing: .3px; } .c2d-card h3 { font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--cat-title); } .c2d-chips { display: flex; flex-wrap: wrap; gap: 6px; } .c2d-chips span { font-size: 13px; font-weight: 700; padding: 5px 10px; background: var(--t-tenue); color: var(--t-ink); border-radius: 8px 8px 0 8px; } .c2d-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--cat-rule); } .c2d-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 26px; white-space: nowrap; line-height: 1; font-weight: 900; letter-spacing: -.02em; color: var(--c2-blue-dark); font-variant-numeric: tabular-nums; } .c2d-price small { font-size: 14px; font-weight: 700; color: var(--cat-muted); letter-spacing: 0; } .c2d-price span { font-size: 13px; font-weight: 600; color: var(--cat-muted); letter-spacing: 0; } .c2d-card-foot .c2l-btn { flex: none; } /* galleria che scorre */ .c2d-sl { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(160deg, var(--c2-white) 30%, var(--t-tenue)); touch-action: pan-y; user-select: none; } .c2d-sl-track { display: flex; height: 100%; transition: transform .65s var(--c2d-ease); } .c2d-sl-item { flex: 0 0 100%; height: 100%; margin: 0; } .c2d-sl-item img { width: 100%; height: 100%; object-fit: contain; padding: 22px; mix-blend-mode: multiply; transition: transform 1.2s var(--c2d-ease); } .c2d-sl-item.is-foto img { object-fit: cover; padding: 0; mix-blend-mode: normal; } .c2d-card:hover .c2d-sl-item img { transform: scale(1.04); } .c2d-sl-prev, .c2d-sl-next { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; display: grid; place-items: center; border: 0; cursor: pointer; border-radius: 12px 12px 0 12px; background: color-mix(in srgb, var(--c2-white) 92%, transparent); color: var(--c2-blue-dark); box-shadow: 0 4px 14px rgba(15,33,55,.15); opacity: 0; transition: opacity .25s, transform .25s; } .c2d-sl-prev { left: 12px; transform: translateX(-6px); } .c2d-sl-next { right: 12px; transform: translateX(6px); } .c2d-sl:hover .c2d-sl-prev, .c2d-sl:hover .c2d-sl-next, .c2d-sl:focus-within .c2d-sl-prev, .c2d-sl:focus-within .c2d-sl-next { opacity: 1; transform: none; } .c2d-sl-prev svg, .c2d-sl-next svg { width: 20px; height: 20px; } .c2d-sl-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; } .c2d-sl-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; cursor: pointer; background: color-mix(in srgb, var(--c2-blue-dark) 25%, transparent); transition: width .35s var(--c2d-ease), background .35s; } .c2d-sl-dots button[aria-current="true"] { width: 26px; background: var(--t); } .c2d-sl.is-big { aspect-ratio: 1; border-radius: var(--c2d-r); } .c2d-sl.is-big .c2d-sl-prev, .c2d-sl.is-big .c2d-sl-next { opacity: 1; transform: none; } .c2d .c2d-all { margin-top: 18px; font-size: 16px; font-weight: 500; color: var(--cat-body); } /* ── Pannello «Dettagli» ── */ .c2d-drawer { position: fixed; inset: 0; z-index: 60; } .c2d-drawer-bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--c2-black) 55%, transparent); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; } .c2d-drawer-in { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); background: var(--c2-white); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .5s var(--c2d-ease); box-shadow: -20px 0 60px rgba(0,0,0,.2); padding-bottom: env(safe-area-inset-bottom, 0px); } .c2d-drawer.is-aperto .c2d-drawer-bg { opacity: 1; } .c2d-drawer.is-aperto .c2d-drawer-in { transform: none; } .c2d-close { position: sticky; top: 14px; float: right; margin: 14px 14px 0 0; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; border: 0; cursor: pointer; border-radius: 12px 12px 0 12px; background: var(--c2-blue-dark); color: var(--c2-white); } .c2d-close svg { width: 22px; height: 22px; } .c2d-det { padding: 24px 28px 36px; display: grid; gap: 24px; clear: both; } .c2d-det-tx { display: grid; gap: 16px; } .c2d-det h2 { font-size: 28px; line-height: 1.12; font-weight: 900; letter-spacing: -.02em; color: var(--c2-blue-dark); } .c2d-campo { display: grid; grid-template-columns: 26px 1fr; gap: 12px; } .c2d-campo svg { width: 24px; height: 24px; color: var(--t-ink); } .c2d-campo b { display: block; font-size: 16px; font-weight: 800; color: var(--t-ink); margin-bottom: 2px; } .c2d-campo p { font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--cat-body); } .c2d-taglie { display: grid; border-radius: var(--c2d-r-s); overflow: hidden; background: var(--t-tenue); padding: 6px 16px; } .c2d-taglie > b { padding: 10px 0 6px; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-ink); } .c2d-taglie a { display: grid; grid-template-columns: 1fr auto auto 18px; gap: 12px; align-items: center; padding-block: 11px; border-top: 1px solid color-mix(in srgb, var(--t) 18%, transparent); text-decoration: none; color: var(--cat-title); font-size: 15.5px; font-weight: 700; } .c2d-taglie a em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--cat-muted); } .c2d-taglie a strong { font-weight: 900; color: var(--c2-blue-dark); font-variant-numeric: tabular-nums; } .c2d-taglie a svg { width: 16px; height: 16px; color: var(--c2-blue); } .c2d-taglie a:hover strong { color: var(--c2-orange); } /* ── Perché LEGO: mosaico ── */ .c2d-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(270px, auto); gap: 18px; } .c2d-tile { position: relative; border-radius: var(--c2d-r); overflow: hidden; background: var(--t-tenue); isolation: isolate; display: grid; } .c2d-tile img { position: absolute; z-index: -1; transition: transform 1s var(--c2d-ease); } .c2d-tile-tx { align-self: end; display: grid; gap: 8px; padding: 22px; } .c2d-tile h3 { font-size: 21px; line-height: 1.2; font-weight: 800; color: var(--cat-title); } .c2d-tile p { font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--cat-body); } .c2d-tile .c2d-ico { background: var(--c2-white); } .c2d-tile:hover img { transform: scale(1.06); } .c2d-b1 { grid-column: span 2; grid-row: span 2; color: var(--c2-white); } .c2d-b1 img { inset: 0; width: 100%; height: 100%; object-fit: cover; } .c2d-b1::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--c2d-deep) 70%, transparent) 55%, color-mix(in srgb, var(--c2d-deep) 96%, transparent)); } .c2d-b1 h3 { font-size: 30px; color: var(--c2-white); } .c2d-b1 p { color: var(--c2-white); font-size: 17px; max-width: 44ch; } .c2d-b2 { grid-column: span 2; } .c2d-b2 img, .c2d-b3 img, .c2d-b4 img { right: -6%; top: 6%; width: 58%; height: 88%; object-fit: contain; mix-blend-mode: multiply; } .c2d-b2 .c2d-tile-tx { max-width: 54%; } .c2d-b3 img, .c2d-b4 img { right: 6%; top: 6%; width: 42%; height: 40%; } .c2d-b3 .c2d-tile-tx, .c2d-b4 .c2d-tile-tx { padding-top: 0; } /* ── Perché C2 ── */ .c2d-list { display: grid; } .c2d-li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding-block: 24px; border-top: 1px solid color-mix(in srgb, var(--c2-white) 18%, transparent); } .c2d-li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--c2-white) 18%, transparent); } .c2d-li .c2d-ico { width: 56px; height: 56px; background: color-mix(in srgb, var(--c2-white) 12%, transparent); color: var(--c2-yellow); } .c2d .c2d-li h3 { font-size: 22px; font-weight: 800; margin-bottom: 4px; } .c2d-li p { font-size: 16.5px; line-height: 1.55; font-weight: 500; color: color-mix(in srgb, var(--c2-white) 88%, transparent); } .c2d-person { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; margin-top: 12px; } .c2d-person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--c2-yellow); } .c2d-person b { display: block; font-size: 17px; } .c2d-person span { font-size: 14px; font-weight: 500; opacity: .85; } /* ── Didacta ── */ .c2d-ev-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: 28px; } .c2d-ev-head .c2d-head { margin-bottom: 0; } .c2d-count { display: grid; justify-items: start; gap: 6px; padding: 22px 26px; border-radius: var(--c2d-r); background: var(--c2-blue-dark); color: var(--c2-white); min-width: 220px; } .c2d-count b { font-size: 64px; line-height: .9; font-weight: 900; letter-spacing: -.04em; color: var(--c2-yellow); font-variant-numeric: tabular-nums; } .c2d-count small { font-size: 14px; font-weight: 600; } .c2d-ev-rail { grid-auto-columns: min(300px, 78%); } .c2d-ev { display: grid; gap: 12px; align-content: start; padding: 22px; min-height: 230px; border-radius: var(--c2d-r); background: var(--t-tenue); color: var(--cat-title); text-decoration: none; transition: transform .35s var(--c2d-ease), background .35s, color .35s; } .c2d-ev-d { display: flex; align-items: baseline; gap: 10px; font-size: 30px; font-weight: 900; letter-spacing: -.02em; color: var(--t-ink); font-variant-numeric: tabular-nums; } .c2d-ev-d b { font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .c2d-ev-t { font-size: 18px; line-height: 1.3; font-weight: 800; } .c2d-ev-f { font-size: 14px; font-weight: 600; color: var(--cat-muted); } .c2d-ev-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 9px 14px; border-radius: 10px 10px 0 10px; background: var(--c2-orange); color: var(--c2-white); font-size: 14px; font-weight: 800; } .c2d-ev-cta svg { width: 16px; height: 16px; } .c2d-ev:hover { transform: translateY(-6px); background: var(--t); color: var(--c2-white); } .c2d-ev:hover .c2d-ev-d, .c2d-ev:hover .c2d-ev-f { color: var(--c2-white); } /* ── Domande e contatto ── */ .c2d-chiaro { background: var(--c2-light); } .c2d-contact .c2l-form { box-shadow: 0 30px 70px rgba(0,0,0,.25); } .c2d-contacts { display: grid; gap: 10px; margin-top: 18px; justify-items: start; } .c2d-contacts img { height: 46px; background: var(--c2-white); padding: 4px; border-radius: 8px 8px 0 8px; } .c2d-contacts span { font-size: 18px; font-weight: 800; color: var(--c2-yellow); } .c2d .c2l-faq { border-top: 0; } .c2d .c2l-faq details { background: var(--c2-white); border: 0; border-radius: 16px 16px 0 16px; margin-bottom: 10px; padding-inline: 22px; box-shadow: 0 1px 3px rgba(15,33,55,.06); } .c2d .c2l-faq details p { font-weight: 500; color: var(--cat-body); } /* ── Pezzi in più del DS ── */ .c2d-hero .c2l-eyebrow { flex-wrap: wrap; row-gap: 6px; } .c2d-hero .c2l-eyebrow { color: var(--t-tinta); } .c2d-tabs:not(.has-ink) button[aria-selected="true"] { background: var(--t); } .c2d-dark .c2l-num { border-top-color: var(--c2-yellow); } .c2d-dark .c2l-num b { color: var(--c2-yellow); } .c2d-dark .c2l-num span, .c2d-dark .c2l-fonte { color: var(--c2-white); } .c2l-frame .c2d-mobcta { display: none !important; } .c2d-sl.is-uno .c2d-sl-dots, .c2d-sl.is-uno .c2d-sl-prev, .c2d-sl.is-uno .c2d-sl-next { display: none; } .c2d-ini { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 22px; background: var(--c2-white); color: var(--c2-blue-dark); } .c2d-hero .c2l-ticket { justify-self: center; width: min(100%, 420px); box-shadow: 0 30px 60px rgba(0,0,0,.3); } .c2d-hero .c2l-ticket .c2l-btn { width: 100%; } .c2d .c2d-head h2 span { color: var(--t-ink); } .c2d .c2d-dark .c2d-head h2 span { color: var(--c2-yellow); } .c2d-hero.is-foto-piena { background: none; } /* ── Azione fissa sul telefono ── */ .c2d-mobcta { display: none; } /* ── Telefono ── */ @container c2l (max-width: 760px) { .c2d-sec { padding-block: 56px; } .c2d-head { margin-bottom: 26px; } .c2d-head h2 { font-size: 32px; } .c2d-head p { font-size: 17px; } .c2d-nav, .c2d-top .c2l-btn { display: none; } .c2d-top .c2l-wrap { min-height: 58px; } .c2d-hero { padding-block: 28px 48px; } .c2d-hero-in { grid-template-columns: 1fr; gap: 28px; } .c2d-hero h1 { font-size: 40px; } .c2d-hero-tx > p { font-size: 17.5px; } .c2d-badge { height: 60px; } .c2d-deck { width: 82%; margin: 18px auto 0; } .c2d-stats { gap: 12px; } .c2d-stats dt { font-size: 32px; } .c2d-stats dd { font-size: 12.5px; } .c2d-doors-h { margin-top: 40px; } .c2d-doors { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .c2d-door { scroll-snap-align: start; min-height: 190px; } .c2d-explorer-bar { flex-direction: column; align-items: stretch; } .c2d-tabs { width: 100%; } .c2d-tabs button { padding: 9px 14px; font-size: 15px; } .c2d-rail-ctrl { display: none; } .c2d-rail { grid-auto-columns: 86%; gap: 14px; } .c2d-price { font-size: 24px; } .c2d-card-foot { flex-direction: column; align-items: stretch; } .c2d-card-foot .c2l-btn { width: 100%; } .c2d-b2 img, .c2d-b3 img, .c2d-b4 img { position: static; width: 62%; height: 150px; margin: 18px auto 0; } .c2d-bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .c2d-b1, .c2d-b2 { grid-column: auto; grid-row: auto; } .c2d-b1 { min-height: 420px; } .c2d-b1 h3 { font-size: 24px; } .c2d-tile { min-height: 230px; } .c2d-b2 .c2d-tile-tx { max-width: none; } .c2d-split { grid-template-columns: 1fr; gap: 28px; } .c2d-split .c2d-head { position: static; } .c2d-li { grid-template-columns: 48px 1fr; gap: 14px; padding-block: 18px; } .c2d-li .c2d-ico { width: 48px; height: 48px; } .c2d-li h3 { font-size: 19px; } .c2d-ev-head { grid-template-columns: 1fr; } .c2d-count { min-width: 0; grid-template-columns: auto auto 1fr; align-items: center; justify-items: start; padding: 16px 18px; gap: 12px; } .c2d-count b { font-size: 40px; } .c2d-drawer-in { top: auto; left: 0; width: 100%; max-height: 92%; border-radius: 24px 24px 0 0; transform: translateY(100%); } .c2d-det { padding: 8px 18px 28px; } .c2d-det h2 { font-size: 23px; } .c2d-taglie a { grid-template-columns: 1fr auto 18px; } .c2d-taglie a em { display: none; } .c2d-mobcta { display: inline-flex; position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 12px 30px rgba(0,0,0,.3); transform: translateY(160%); transition: transform .45s var(--c2d-ease); } .c2d-mobcta.is-su { transform: none; } .c2l-foot { padding-bottom: 96px; } } /* ── Telefono ── */ @container c2l (max-width: 760px) { .c2d-sec { padding-block: 56px; } .c2d-head { margin-bottom: 26px; } .c2d-head h2 { font-size: 32px; } .c2d-head p { font-size: 17px; } .c2d-nav, .c2d-top .c2l-btn { display: none; } .c2d-top .c2l-wrap { min-height: 58px; } .c2d-hero { padding-block: 28px 48px; } .c2d-hero-in { grid-template-columns: 1fr; gap: 28px; } .c2d-hero h1 { font-size: 40px; } .c2d-hero-tx > p { font-size: 17.5px; } .c2d-badge { height: 60px; } .c2d-deck { width: 82%; margin: 18px auto 0; } .c2d-stats { gap: 12px; } .c2d-stats dt { font-size: 32px; } .c2d-stats dd { font-size: 12.5px; } .c2d-doors-h { margin-top: 40px; } .c2d-doors { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .c2d-door { scroll-snap-align: start; min-height: 190px; } .c2d-explorer-bar { flex-direction: column; align-items: stretch; } .c2d-tabs { width: 100%; } .c2d-tabs button { padding: 9px 14px; font-size: 15px; } .c2d-rail-ctrl { display: none; } .c2d-rail { grid-auto-columns: 86%; gap: 14px; } .c2d-price { font-size: 24px; } .c2d-card-foot { flex-direction: column; align-items: stretch; } .c2d-card-foot .c2l-btn { width: 100%; } .c2d-b2 img, .c2d-b3 img, .c2d-b4 img { position: static; width: 62%; height: 150px; margin: 18px auto 0; } .c2d-bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .c2d-b1, .c2d-b2 { grid-column: auto; grid-row: auto; } .c2d-b1 { min-height: 420px; } .c2d-b1 h3 { font-size: 24px; } .c2d-tile { min-height: 230px; } .c2d-b2 .c2d-tile-tx { max-width: none; } .c2d-split { grid-template-columns: 1fr; gap: 28px; } .c2d-split .c2d-head { position: static; } .c2d-li { grid-template-columns: 48px 1fr; gap: 14px; padding-block: 18px; } .c2d-li .c2d-ico { width: 48px; height: 48px; } .c2d-li h3 { font-size: 19px; } .c2d-ev-head { grid-template-columns: 1fr; } .c2d-count { min-width: 0; grid-template-columns: auto auto 1fr; align-items: center; justify-items: start; padding: 16px 18px; gap: 12px; } .c2d-count b { font-size: 40px; } .c2d-drawer-in { top: auto; left: 0; width: 100%; max-height: 92%; border-radius: 24px 24px 0 0; transform: translateY(100%); } .c2d-det { padding: 8px 18px 28px; } .c2d-det h2 { font-size: 23px; } .c2d-taglie a { grid-template-columns: 1fr auto 18px; } .c2d-taglie a em { display: none; } .c2d-mobcta { display: inline-flex; position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 12px 30px rgba(0,0,0,.3); transform: translateY(160%); transition: transform .45s var(--c2d-ease); } .c2d-mobcta.is-su { transform: none; } .c2l-foot { padding-bottom: 96px; } } /* ── Anteprima nel DS (non va nelle landing vere) ─── */ .c2l-demo { display: flex; gap: 40px; align-items: flex-start; padding: 40px; background: var(--c2-gray-soft); width: max-content; } .c2l-frame { width: 1280px; background: var(--c2-white); box-shadow: 0 2px 18px rgba(15,33,55,.10); flex: none; overflow: hidden; } .c2l-frame.is-tel { width: 390px; } .c2l-frame-cap { font: 800 22px/1.2 var(--font-sans); color: var(--cat-muted); margin-bottom: 14px; } /* ── Telefono: sotto i 760 px del contenitore ─────── */ @container c2l (max-width: 760px) { .c2l { font-size: 16px; } .c2l-wrap { padding-inline: var(--l-gutter-tel); } .c2l-sec { padding-block: var(--l-sec-tel); } .c2l-head { margin-bottom: 28px; } .c2l-h1 { font-size: 38px; line-height: 1.02; } .c2l-h2 { font-size: 28px; line-height: 1.12; } .c2l-h3 { font-size: 19px; } .c2l-lead { font-size: 17.5px; } .c2l-2col, .c2l-hero .c2l-2col, .c2l-hero.is-biglietto .c2l-2col, .c2l-aula, .c2l-lez, .c2l-pr, .c2l-scheda.is-wide { grid-template-columns: 1fr; gap: 28px; } .c2l-cards2, .c2l-cards3, .c2l-cards4, .c2l-porte, .c2l-storie { grid-template-columns: 1fr; gap: 16px; } .c2l-schede { grid-template-columns: 1fr; } .c2l-hero { padding-block: 36px 44px; } .c2l-hero.is-storia { min-height: 520px; } .c2l-hero.is-storia .c2l-wrap { padding-block: 160px 36px; } .c2l-hero.is-porte { padding-block: 40px 0; } .c2l-hero.is-porte .c2l-hero-tx { padding-bottom: 28px; } .c2l-hero.is-porte .c2l-porte { margin-bottom: 0; padding-bottom: 28px; } .c2l-hero.is-porte + * { padding-top: var(--l-sec-tel); } .c2l-ticket-date b { font-size: 52px; } .c2l-num b { font-size: 46px; } .c2l-nums { grid-template-columns: 1fr 1fr; gap: 22px 18px; } .c2l-anchors, .c2l-cob, .c2l-top .c2l-btn.is-line { display: none; } .c2l-top .c2l-wrap { min-height: 60px; justify-content: space-between; } .c2l-logo { height: 28px; } .c2l-top .c2l-btn { min-height: 40px; padding: 8px 14px; font-size: 14px; white-space: normal; text-align: center; max-width: 62%; } .c2l-steps { width: 100%; overflow-x: auto; } .c2l-steps a { padding: 9px 12px; font-size: 14px; white-space: nowrap; } .c2l-sess { grid-template-columns: 64px 1fr; gap: 6px 14px; } .c2l-sess .c2l-btn { grid-column: 2; justify-self: start; } .c2l-sess time { font-size: 19px; } .c2l-ssr { grid-template-columns: 1fr; } .c2l-ssr > div, .c2l-ssr > div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--cat-rule); } .c2l-timeline li { grid-template-columns: 1fr; gap: 2px; } .c2l-voce { grid-template-columns: 1fr; padding: 28px 24px; gap: 14px; } .c2l-voce svg.q { width: 40px; height: 40px; } .c2l-voce blockquote { font-size: 21px; } .c2l-lez-tx { padding: 24px; } .c2l-lez .c2l-photo { min-height: 220px; } .c2l-scheda.is-wide .c2l-photo { min-height: 260px; } .c2l-form { grid-template-columns: 1fr; padding: 22px; } .c2l-pr > div { padding: 22px; } .c2l-lockup img { height: 30px; } .c2l-lockup .prog { height: 50px; } .c2l-badge-img { height: 52px; } .c2l-gruppo-h h3 { font-size: 22px; } .c2l-btns .c2l-btn { flex: 1 1 100%; } .c2l-foot .c2l-wrap { flex-direction: column; align-items: flex-start; } } /* 3. raccordo fra le due */ /* Raccordo fra le parti riusate della landing originale (agenda, schede, filtro, pianta, video) e lo stile digitale del DS. */ .nd { --bg: var(--c2-white); --bg-alt: var(--cat-chip); --card: var(--c2-white); --title: var(--cat-title); --text: var(--cat-body); --muted: var(--cat-muted); --rule: var(--cat-rule); } /* apertura: titolo + informazioni pratiche, poi lo stand 3D a tutta larghezza (07/10: «riporta il 3D nell'apertura») */ .nd-hero { padding-block: 48px 64px; } .nd-hero-top { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: end; } .nd-hero-top .c2d-hero-tx { gap: 20px; } .nd-info { margin: 0; display: grid; gap: 0; padding: 6px 22px 18px; border-radius: 24px 24px 0 24px; background: color-mix(in srgb, var(--c2-white) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c2-white) 16%, transparent); } .nd-info div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; padding-block: 11px; border-bottom: 1px solid color-mix(in srgb, var(--c2-white) 14%, transparent); } .nd-info dt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--c2-yellow); } .nd-info dt svg { width: 18px; height: 18px; } .nd-info dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--c2-white); } .nd-info .c2l-pill.is-stand { padding: 4px 12px; font-size: 15px; } .nd-info p { margin: 12px 0 0; font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--c2-white) 80%, transparent); } .nd-hero-3d { margin-top: 40px; } .nd-hero-3d .ld-3d { margin-top: 0; height: 600px; border-radius: 24px 24px 0 24px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--c2-white) 0%, transparent) 0%, color-mix(in srgb, var(--c2-white) 0%, transparent) 40%, color-mix(in srgb, var(--c2-white) 10%, transparent) 100%); box-shadow: none; border: 0; position: relative; } /* contorno con la stessa sfumatura dello sfondo: invisibile fino al 40% dell'altezza, pieno in basso */ .nd-hero-3d .ld-3d::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; border: 1.5px solid color-mix(in srgb, var(--c2-white) 45%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 40%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, transparent 40%, #000 100%); } .nd-hero-3d .ld-3d.is-3d { border: 0; } .nd-hero-3d .s3d-root { background: linear-gradient(180deg, color-mix(in srgb, var(--c2-white) 0%, transparent) 0%, color-mix(in srgb, var(--c2-white) 0%, transparent) 40%, color-mix(in srgb, var(--c2-white) 10%, transparent) 100%); } .nd-hero-3d .s3d-hint { color: color-mix(in srgb, var(--c2-white) 85%, transparent); } .nd-hero-3d .ld-3dcap { color: color-mix(in srgb, var(--c2-white) 80%, transparent); font-size: 14px; margin-top: 14px; } .nd-hero-3d .ld-3dcap b { color: var(--c2-yellow); } .nd-stats { margin-top: 36px; } /* comandi delle aree dello stand: barra sotto la fila, solo quando la fila scorre di lato (telefono). Colori senza color-mix(): devono leggersi anche sui browser meno recenti */ .nd-doors-wrap { position: relative; } .nd-hudbar { display: none; } .nd-doors-wrap.is-scorre .nd-hudbar { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 12px; margin-top: 16px; } .nd-mid { display: grid; justify-items: center; gap: 6px; } .nd-hud { width: 48px; height: 48px; margin: 0; display: grid; place-items: center; padding: 0; cursor: pointer; border: 0; border-radius: 50%; line-height: 0; box-sizing: border-box; background: #FFFFFF; color: #003E87; box-shadow: 0 6px 18px rgba(0,0,0,.35); -webkit-appearance: none; appearance: none; } .nd-hud svg { width: 26px; height: 26px; stroke-width: 2.5; } .nd-hud:disabled { background: rgba(255,255,255,.16); color: rgba(255,255,255,.45); box-shadow: none; cursor: default; } .nd-dots { display: flex; gap: 6px; align-items: center; } .nd-dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.35); transition: width .3s, background .3s; } .nd-dots i.on { width: 24px; background: #F7B32B; } .nd-pos { font-size: 13px; line-height: 1; font-weight: 800; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; text-align: center; } .nd-doors-wrap:not(.is-usato) .nd-hud.is-next { animation: nd-spinta 1.6s ease-in-out infinite; } @keyframes nd-spinta { 0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 0 rgba(247,179,43,.7); } 60% { box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 10px rgba(247,179,43,0); } } @media (prefers-reduced-motion: reduce) { .nd-doors-wrap:not(.is-usato) .nd-hud.is-next { animation: none; } } /* sfumatura sul bordo destro: ci sono altre aree */ .nd-doors-wrap.is-scorre::after { content: ""; position: absolute; top: 0; right: -20px; width: 56px; height: 250px; pointer-events: none; background: linear-gradient(90deg, rgba(0,44,98,0), rgba(0,44,98,.85)); transition: opacity .3s; } .nd-doors-wrap.is-fine::after { opacity: 0; } /* ingressi dell'apertura: sei aree, tre per riga */ .nd .c2d-doors { grid-template-columns: repeat(3, 1fr); } .nd .c2d-door { min-height: 190px; } /* lo stand in 3D su blu scuro */ .nd-stand .ld-3dwrap { margin-top: 8px; } /* sfondo del 3D: trasparente fino al 40% dell'altezza (si fonde con la sezione), poi sfuma fino al bianco pieno in basso */ .nd-stand .ld-3d { border-radius: 24px 24px 0 24px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--c2-white) 0%, transparent) 0%, color-mix(in srgb, var(--c2-white) 0%, transparent) 40%, var(--c2-white) 100%); box-shadow: none; } .nd-stand .s3d-root { background: linear-gradient(180deg, color-mix(in srgb, var(--c2-white) 0%, transparent) 0%, color-mix(in srgb, var(--c2-white) 0%, transparent) 40%, var(--c2-white) 100%); } .nd-stand .ld-3dcap { color: var(--cat-body); font-weight: 500; margin-top: 14px; font-size: 15px; } .nd-stand .ld-3dcap b { color: var(--c2-blue-dark); } /* formati e passi */ .nd .nd-steps { list-style: none; counter-reset: p; padding: 0; margin: 10px 0 0; display: grid; gap: 14px; } .nd .nd-steps li { counter-increment: p; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; font-size: 17px; font-weight: 500; color: var(--cat-body); } .nd .nd-steps li::before { content: counter(p); width: 40px; height: 40px; display: grid; place-items: center; font-weight: 900; color: var(--c2-white); background: var(--c2-blue-dark); border-radius: 12px 12px 0 12px; } .nd .nd-steps b { color: var(--cat-title); } .nd-fmts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .nd-fmt { background: var(--c2-white); border-radius: 24px 24px 0 24px; overflow: hidden; box-shadow: var(--c2d-ombra); display: grid; grid-template-rows: auto 1fr; transition: transform .4s var(--c2d-ease); } .nd-fmt:hover { transform: translateY(-6px); } .nd-fmt img { display: block; width: 100%; height: 190px; max-width: none; object-fit: cover; } /* altezza fissa: Safari non risolve il 100% dentro la riga della griglia */ .nd-fmt > div { padding: 20px 22px 22px; display: grid; gap: 8px; align-content: start; } .nd-fmt b { font-size: 36px; line-height: 1; font-weight: 900; letter-spacing: -.03em; color: var(--c2-blue-dark); } .nd-fmt p { font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--cat-body); } .nd-fn { justify-self: start; font-size: 13px; font-weight: 800; padding: 6px 10px; border-radius: 8px 8px 0 8px; background: var(--c2-blue-light); color: var(--c2-blue-dark); } /* programma e interventi dentro le sezioni del DS */ .nd .ag-sec { background: var(--c2-blue-dark); } .nd .ag-pdf { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-weight: 800; color: var(--c2-yellow); text-decoration: none; } .nd .ag-pdf svg { width: 18px; height: 18px; } .nd .ag-pdf em { font-style: normal; font-weight: 600; color: var(--c2-white); opacity: .75; } .nd .wf { margin-bottom: 24px; } .nd .ld-asec { margin-top: 48px; } .nd .ld-wcard { box-shadow: 0 1px 2px rgba(15,33,55,.06), 0 10px 26px rgba(15,33,55,.08); border-color: transparent; } .nd .ld-abs { font-weight: 500; color: var(--cat-body); } /* relatori e partner */ .nd-relg { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 20px; } .nd-relg li { display: grid; justify-items: center; text-align: center; gap: 6px; } .nd-relg img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--c2-white), 0 0 0 6px var(--c2-blue-light); margin-bottom: 6px; transition: transform .4s var(--c2d-ease); } .nd-relg li:hover img { transform: scale(1.06); } .nd-relg b { font-size: 16px; color: var(--cat-title); } .nd-relg span { font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--cat-muted); } .nd-partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 52px; padding-top: 36px; border-top: 1px solid var(--cat-rule); } .nd-partners img { height: 58px; width: auto; border-radius: 12px 12px 0 12px; box-shadow: 0 1px 3px rgba(15,33,55,.08); } /* chiusura */ .nd-contacts { margin: 0; display: grid; gap: 0; } .nd-contacts div { padding-block: 20px; border-top: 1px solid color-mix(in srgb, var(--c2-white) 18%, transparent); } .nd-contacts div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--c2-white) 18%, transparent); } .nd-contacts dt { font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--c2-yellow); } .nd-contacts dd { margin: 6px 0 0; font-size: 22px; font-weight: 800; color: var(--c2-white); } .nd-contacts a { color: var(--c2-white); } /* link del video nell'apertura: secondario, non un pulsante */ .nd .nd-video { display: inline-flex; align-items: center; gap: 10px; padding: 8px 4px; border: 0; background: none; cursor: pointer; font: 700 16px/1.2 var(--font-sans); color: var(--c2-white); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--c2-white) 45%, transparent); } .nd .nd-video svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: color-mix(in srgb, var(--c2-white) 16%, transparent); color: var(--c2-yellow); } .nd .nd-video:hover { text-decoration-color: var(--c2-yellow); } /* pianta di riserva (quando il 3D non si carica): il riquadro segue l'immagine, così i pin restano al loro posto */ .nd .ld-3d:not(.is-3d) { height: auto; } .nd .ld-3d:not(.is-3d) > .ld-map { height: auto; display: block; } .nd .ld-mapcap { font-size: 12px; } @container c2l (max-width: 760px) { .nd .c2l-foot { padding-bottom: 40px; } .nd-hero { padding-block: 28px 44px; } .nd-hero-top { grid-template-columns: 1fr; gap: 24px; } .nd-info { padding: 4px 16px 14px; } .nd-info div { grid-template-columns: 96px 1fr; padding-block: 9px; } .nd-info dd { font-size: 15px; } .nd-hero-3d { margin-top: 28px; } .nd-hero-3d .ld-3d.is-3d { height: 440px; } .nd .c2d-hero .c2l-btns .c2l-btn { flex: 1 1 100%; } .nd .nd-video { flex: 1 1 100%; justify-content: center; } .nd .ld-3d.is-3d { height: 440px; } .nd .ld-pin span { width: 40px; height: 40px; font-size: 15px; } /* pianta 17,5 × 6 m: sul telefono la si allarga e la si scorre di lato */ .nd .ld-3d:not(.is-3d) { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .nd .ld-3d:not(.is-3d) > .ld-map { width: 820px; max-width: none; } .nd a.ld-btn.is-sm { min-height: 40px; padding: 10px 16px; font-size: 14px; } .nd .ag-leg button, .nd .wf-tabs button { min-height: 40px; } .nd .c2d-doors { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; } .nd .c2d-door { min-height: 250px; } .nd-fmts { grid-template-columns: 1fr; } .nd-relg { grid-template-columns: 1fr 1fr; } .nd-relg img { width: 88px; height: 88px; } .nd-partners img { height: 44px; } .nd-contacts dd { font-size: 18px; } } /* pulsanti «Prenota» riusati (schede degli interventi e pannello dell'agenda): nel DS i link ereditano il colore del testo, quindi qui il colore va ridato. Prenotare è l'azione della pagina: arancio con scritta bianca, come le altre CTA. */ .nd a.ld-btn, .nd a.ag-book { background: var(--c2-orange); color: var(--c2-white); } .nd a.ld-btn:hover, .nd a.ag-book:hover { background: var(--c2-orange-dark); filter: none; } .nd a.ld-btn.is-todo { background: transparent; color: var(--c2-blue-dark); border: 1.5px dashed var(--c2-blue); } .nd a.ag-book.is-todo { background: transparent; color: var(--c2-white); border: 2px dashed var(--c2-yellow); }