/* Academy DataDeep — quello che si aggiunge a datadeep.css. datadeep.css e' il foglio del sito principale, copiato tale e quale: colori, font, header, footer e bottoni vengono da li'. Qui c'e' solo cio' che l'Academy ha in piu': il corpo delle pagine, il menu che cambia con l'accesso, la barra del Metodo, i moduli, i video, la ricerca. */ /* ------------------------------------------------ visitatore / iscritto */ /* Nella pagina ci sono entrambi i menu. La classe "iscritto" su la mette uno script nel , prima del disegno: niente lampeggio. */ html:not(.iscritto) [data-menu="iscritto"], html.iscritto [data-menu="ospite"]{display:none!important} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ------------------------------------------------------------- header */ .brandmark{gap:10px} .brandsub{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--purple);border-left:1px solid var(--line);padding-left:10px;line-height:1} .hd nav{gap:1.35rem} .navvoci{display:flex;gap:1.35rem;align-items:center} .hd nav a.lnk[aria-current]{color:var(--ink);font-weight:600} .navazioni{display:flex;gap:.9rem;align-items:center} .hd .btn-ghost{padding:.55rem 1.05rem;font-size:.9rem} .navpanel.md{width:280px} .navpanel.md .npbox{grid-template-columns:1fr} .cerca-apri{display:inline-flex;align-items:center;color:var(--muted);padding:4px} .cerca-apri:hover{color:var(--ink)} .cerca-apri svg{width:19px;height:19px} @media(max-width:1080px){.hd nav,.navvoci{gap:1rem}.hd nav a.lnk,.navtrig{font-size:.93rem}} @media(max-width:860px){.navvoci,.navazioni,.cerca-apri{display:none!important}} .mobcta{justify-content:center;margin-top:8px;color:#fff!important} .cerca{position:fixed;inset:0 0 auto 0;z-index:70;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 50px rgba(26,20,48,.14)} .cerca-box{display:flex;align-items:center;gap:12px;height:96px} .cerca-box input{flex:1;font-size:1.6rem;font-weight:600;color:var(--ink);border:none;outline:none;background:transparent} .cerca-chiudi{font-size:2rem;line-height:1;color:var(--muted);padding:0 6px} /* ------------------------------------------------------------- pagina */ .pagina{padding-top:28px;padding-bottom:72px} .briciole{font-size:.84rem;color:var(--muted2);margin-bottom:28px} .briciole a{color:var(--muted)} .briciole a:hover{color:var(--purple)} /* Il testo: la tipografia che sul WordPress faceva il tema. */ .testo{max-width:860px;color:var(--body);font-size:1.05rem;line-height:1.7} .testo.largo,.con-barra .testo{max-width:none} .testo > * + *,.testo div > * + *{margin-top:1rem} .testo h1{font-size:clamp(2rem,4.4vw,3rem);margin-top:0} .testo h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:2.4rem} .testo h3{font-size:1.35rem;margin-top:2rem} .testo h4{font-size:1.12rem;margin-top:1.6rem} .testo h5,.testo h6{font-size:1rem;color:var(--ink);font-weight:700;margin-top:1.4rem;line-height:1.5} .testo h5 strong{font-weight:800} .testo .accento{color:var(--purple)} .testo mark{background:linear-gradient(transparent 58%,rgba(187,49,199,.22) 58%);color:inherit;padding:0 .1em} .testo a:not(.btn):not(.icona){color:var(--purple);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .testo ul,.testo ol{padding-left:1.4rem} .testo ul{list-style:disc} .testo ol{list-style:decimal} .testo li + li{margin-top:.4rem} .testo li > * + *{margin-top:.5rem} .testo hr{border-color:var(--line);margin:2.4rem 0} .testo figure img{border-radius:14px} .testo blockquote{border-left:3px solid var(--purple);padding:.4rem 0 .4rem 1.2rem;color:var(--ink);font-size:1.1rem} .testo .separatore{text-align:center;color:var(--muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.1em} .testo .cta-riga{font-weight:600} /* elenchi del tema: spunte e numeri */ .testo ul.spunte,.testo ol.numeri{list-style:none;padding:0;display:grid;gap:14px} .testo ul.spunte > li,.testo ol.numeri > li{position:relative;padding:16px 18px 16px 58px;border:1px solid var(--line);border-radius:14px;background:var(--tint);margin:0} .testo ul.spunte > li::before{content:"";position:absolute;left:18px;top:19px;width:22px;height:22px;border-radius:50%;background:var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat} .testo ol.numeri{counter-reset:n} .testo ol.numeri > li{counter-increment:n} .testo ol.numeri > li::before{content:counter(n);position:absolute;left:16px;top:15px;width:28px;height:28px;border-radius:50%;background:var(--purple);color:#fff;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center} .testo ul.spunte h4,.testo ol.numeri h4{margin-top:0} /* colonne di WPBakery */ .colonne{display:grid;gap:28px;align-items:start} .colonne.c2{grid-template-columns:1fr 1fr} .colonne.c3{grid-template-columns:repeat(3,1fr)} .colonne.c4{grid-template-columns:repeat(4,1fr)} .colonne > div > :first-child{margin-top:0} .colonne .btn{width:100%;justify-content:center;text-align:center} @media(max-width:760px){.colonne.c2,.colonne.c3{grid-template-columns:1fr}.colonne.c4{grid-template-columns:1fr 1fr}} /* icone con link (la home: "come possiamo aiutarti") */ .icona{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;background:var(--tint2);color:var(--purple)} .icona svg{width:30px;height:30px} .icona + h5{margin-top:.6rem} .punto{display:flex;gap:14px;align-items:flex-start} .punto > svg{flex:none;width:22px;height:22px;color:var(--purple);margin-top:.2rem} .punto h5{margin-top:0;font-weight:400} .riquadro{background:#0a0a28;color:#fff;border-radius:16px;padding:24px} .riquadro h5,.riquadro h4,.riquadro p{color:#fff} .tabella{overflow-x:auto} .tabella table{width:100%;font-size:.94rem} .tabella td{border:1px solid var(--line);padding:10px 12px;vertical-align:top} .tabella tr:first-child td{background:var(--tint2);color:var(--ink)} .domande details{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:#fff} .domande details + details{margin-top:10px} .domande summary{cursor:pointer;font-weight:700;color:var(--ink)} .domande details[open] summary{margin-bottom:10px} /* ------------------------------------------------------------- video */ /* Il lettore di Vimeo parte solo al clic: prima Vimeo non riceve niente. */ .video{position:relative;border-radius:14px;overflow:hidden;background:#0a0a28;aspect-ratio:16/9} .video img{width:100%;height:100%;object-fit:cover;opacity:.85} .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;background:var(--purple);color:#fff;font-weight:700;border-radius:999px;padding:.8rem 1.4rem .8rem 1.1rem;box-shadow:0 10px 30px rgba(0,0,0,.35)} .video-play::before{content:"";width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent} .video-link{position:absolute;right:12px;bottom:10px;font-size:.78rem;color:#fff!important;opacity:.8;text-decoration:none!important} .video.attivo img,.video.attivo .video-play,.video.attivo .video-link{display:none} /* -------------------------------------------------------- barra Metodo */ .con-barra{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start} .metodo-nav{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--tint);font-size:.9rem} .metodo-nav details + details{border-top:1px solid var(--line)} .metodo-nav summary{cursor:pointer;font-weight:800;color:var(--ink);padding:10px 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em} .metodo-nav a{display:block;padding:7px 10px;border-radius:9px;color:var(--muted);line-height:1.35} .metodo-nav a:hover{background:#fff;color:var(--purple)} .metodo-nav a[aria-current]{background:#fff;color:var(--purple);font-weight:700;box-shadow:0 2px 8px rgba(26,20,48,.06)} @media(max-width:900px){.con-barra{grid-template-columns:1fr}.metodo-nav{position:static;max-height:none}} /* ------------------------------------------------------------- moduli */ .modulo-pagina{max-width:560px} .modulo{display:grid;gap:16px;margin-top:1.4rem} .modulo label{display:block;font-weight:600;color:var(--ink);font-size:.94rem} .modulo label input:not([type=checkbox]){display:block;width:100%;margin-top:6px} .modulo label small{display:block;margin-top:4px} .modulo input[type=text],.modulo input[type=email],.modulo input[type=password]{border:1px solid var(--line);border-radius:11px;padding:.75rem .9rem;font-weight:400;color:var(--ink);background:#fff} .modulo input:focus{outline:2px solid rgba(133,49,138,.35);border-color:var(--purple)} .modulo small{font-weight:400;color:var(--muted2);font-size:.8rem} .modulo .due{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:560px){.modulo .due{grid-template-columns:1fr}} .modulo .spunta{display:flex;gap:8px;align-items:center;font-weight:400} .modulo .spunta input{width:18px;height:18px;accent-color:var(--purple)} .obbl{color:#b94a48} .modulo-azioni{display:flex;gap:12px;flex-wrap:wrap} .modulo-azioni.esci{margin-top:2.4rem} .modulo-nota{font-size:.9rem;color:var(--muted)} .esito{border-radius:11px;padding:.75rem .9rem;font-size:.92rem;background:#fdf2f2;color:#9b2c2c;border:1px solid #f5d0d0} .esito.ok{background:#f0faf3;color:#166534;border-color:#c9ecd3} .trappola{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .elimina{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1rem} .elimina summary{cursor:pointer;color:var(--muted);font-size:.9rem} button[disabled]{opacity:.6;cursor:wait} /* ------------------------------------------------------------- ricerca */ .cerca-pagina{display:flex;gap:12px;margin-top:1.2rem} .cerca-pagina input{flex:1;border:1px solid var(--line);border-radius:11px;padding:.75rem .9rem} #risultati{margin-top:1.6rem} #risultati a{display:block;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none!important} #risultati a b{display:block;color:var(--ink)} #risultati a span{display:block;color:var(--muted);font-size:.9rem} /* -------------------------------------------------------------- footer */ .invito{padding:0 0 40px} .invito-box{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border:1px solid var(--line);background:var(--tint);border-radius:20px;padding:24px 28px} .invito-box p{font-weight:700;color:var(--ink);font-size:1.1rem} .footcols{grid-template-columns:repeat(2,1fr)} @media(max-width:900px){.footcols{grid-template-columns:1fr 1fr}} @media(max-width:560px){.footcols{grid-template-columns:1fr}} .footbrand .footvision{max-width:340px} .footaddr{margin-top:14px;font-size:.84rem;line-height:1.6;color:rgba(255,255,255,.6)} .footsocial{display:flex;gap:12px;margin-top:14px} .footsocial a{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.1);padding:0} .footsocial svg{width:17px;height:17px} /* Le colonne stanno affiancate: il margine fra blocchi di testo non vale per loro. */ .testo .colonne > div{margin-top:0} /* Riquadro con icona e link (la home): una card cliccabile. */ .colonne > div:has(> .icona){text-align:center;border:1px solid var(--line);border-radius:18px;padding:22px 14px;background:#fff;transition:.2s} .colonne > div:has(> .icona):hover{border-color:var(--purple);box-shadow:0 12px 30px rgba(133,49,138,.12)} .colonne > div > .icona{margin:0 auto} .colonne > div:has(> .icona) a:not(.icona){text-decoration:none!important;color:var(--ink)!important} .colonne > div:has(> .icona) h5{margin-top:.8rem;font-size:.98rem} .colonne > div:has(> .icona) h5 + h5{margin-top:0} .colonne:has(> div > .icona){gap:16px} /* Le icone dentro i bottoni (download, carrello) hanno la misura del testo. */ .btn svg{width:18px;height:18px;flex:none} /* Nei moduli la spaziatura la fa la griglia: il margine del testo si toglie. */ .testo .modulo > *,.testo .modulo .due > *{margin-top:0} /* Il menu mobile ha i due gruppi (visitatore, iscritto) in un contenitore ciascuno. */ .mobnav > div{display:flex;flex-direction:column;gap:2px}