/* Church Pilot — header/footer globali (pagine diverse dalla home) */ @font-face{font-family:"CPJost";src:url(../../extendable/assets/fonts/jost/jost-variable.woff2) format("woff2");font-weight:100 900;font-display:swap} @font-face{font-family:"CPPlex";src:url(../../extendable/assets/fonts/ibm-plex-sans/ibm-plex-sans-regular.woff2) format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"CPPlex";src:url(../../extendable/assets/fonts/ibm-plex-sans/ibm-plex-sans-semibold.woff2) format("woff2");font-weight:600;font-display:swap} @font-face{font-family:"CPMono";src:url(../../extendable/assets/fonts/space-mono/space-mono-regular.woff2) format("woff2");font-weight:400;font-display:swap} :root{--cp-navy:#00245A;--cp-orange:#FF6A00;--cp-orange-d:#E85D00;--cp-ink:#0B1A33;--cp-muted:#56668A;--cp-line:#E1E9F2;--cp-surface-2:#F4F8FD; /* Aggiunte per la navbar, che riprende quella della landing: li servono .cp-lang-menu (fondo e ombra del dropdown) e lo sfondo semitrasparente. */ --cp-bg:#FFFFFF;--cp-surface:#FFFFFF;--cp-radius-sm:11px; --cp-shadow:0 18px 40px -22px rgba(11,26,51,.45)} .cp-wrap{max-width:1140px;margin:0 auto;padding:0 24px} /* IL BORDO NERO SULLA NAVBAR — due regole, in quest'ordine. Segnalato dall'utente il 09/08/2026: cliccando una voce della navbar su una pagina diversa dalla home compariva un rettangolo nero attorno alla voce. Il colpevole è il tema GENITORE, che porta: :where(.wp-site-blocks *:focus){outline-width:1px;outline-style:solid} Senza outline-color, quindi il colore è quello del TESTO: #0B1A33, che si legge come nero. Scatta su `:focus`, cioè anche col MOUSE. Sulla landing non si vede perché lì il CSS del genitore è tolto (vedi Prestazioni mobile). Sta dentro un :where(), quindi pesa (0,0,0): basta (0,1,0) per annullarla. */ :focus{outline:none} /* ...e qui l'anello vero, gemello della riga che landing.css ha nella sua base. Stessa specificità della precedente (0,1,0) ma DOPO, quindi vince quando entrambe si applicano — cioè con la tastiera. Col mouse `:focus-visible` non scatta e resta il `outline:none` di sopra. ⚠️ NON sostituire questa coppia con un solo `:focus{outline:none}`: chi naviga da tastiera perderebbe ogni traccia di dove si trova. */ :focus-visible{outline:2.5px solid var(--cp-orange);outline-offset:3px;border-radius:4px} /* ===== HEADER ================================================================= La navbar deve essere la STESSA su tutto il sito: queste regole ricalcano una per una quelle di .nav / .nav-links / .nav-cta / .nav-burger / .nav-mobile della landing (in landing.css), con il prefisso .cp- e le variabili di questo foglio. Se tocchi una delle due, tocca anche l'altra — come per i due footer. Differenza voluta: qui non c'e il toggle del tema (site.css non ha tema scuro) e la sezione corrente non si evidenzia (non ci sono ancore in queste pagine). */ .cp-siteheader{position:sticky;top:0;z-index:50;font-family:"CPPlex",system-ui,sans-serif; background:color-mix(in srgb,var(--cp-bg) 88%,transparent); backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--cp-line)} .cp-nav-in{display:flex;align-items:center;gap:24px;height:66px} .cp-brand{display:inline-flex;align-items:center;gap:10px;font-family:"CPJost",sans-serif;font-weight:600;font-size:1.15rem;color:var(--cp-ink);text-decoration:none;letter-spacing:-.01em} .cp-brand svg{height:26px;width:auto;flex:none} .cp-nav{display:flex;gap:26px;margin-left:auto} .cp-nav a{position:relative;color:var(--cp-muted);text-decoration:none;font-weight:500; font-size:.95rem;padding-block:6px;transition:color .18s ease} .cp-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px; background:var(--cp-orange);transform:scaleX(0);transform-origin:left;transition:transform .24s ease} .cp-nav a:hover{color:var(--cp-ink)} .cp-nav a:hover::after{transform:scaleX(.4)} .cp-nav-cta{display:flex;gap:10px;align-items:center} .cp-nav+.cp-nav-cta{margin-left:26px} .cp-siteheader .cp-btn{background:var(--cp-orange);color:#fff;font-weight:600;font-size:.9rem; padding:.5em 1.05em;border-radius:8px;text-decoration:none;white-space:nowrap} .cp-siteheader .cp-btn:hover{background:var(--cp-orange-d)} .cp-burger{display:none;background:transparent;border:1px solid var(--cp-line);border-radius:10px; width:46px;height:46px;cursor:pointer;padding:0;flex-direction:column;gap:5px; align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent} .cp-burger span{width:22px;height:2px;background:var(--cp-ink);border-radius:2px; transition:transform .2s ease,opacity .2s ease} .cp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .cp-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .cp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .cp-burger:focus-visible{outline:2px solid var(--cp-orange);outline-offset:2px} .cp-mobile{display:none;flex-direction:column;padding:6px 24px 18px; border-top:1px solid var(--cp-line);background:var(--cp-bg)} /* Solo i link DIRETTI del menu: senza il ">" la regola pescherebbe anche l'ultima pillola delle lingue, che e :last-child del PROPRIO contenitore — perderebbe il bordo, diventerebbe 1px piu bassa e il flex le abbasserebbe il contenuto di mezzo pixel. Stessa trappola gia pagata sulla landing. */ .cp-mobile > a{padding:13px 4px;color:var(--cp-ink);text-decoration:none;font-weight:600; font-size:1rem;border-bottom:1px solid var(--cp-line)} .cp-mobile > a:last-child{border-bottom:0} /* .cp-btn e inline-flex: in colonna si stira gia a tutta larghezza, il testo si centra con justify-content (text-align non basta su un contenitore flex). */ .cp-mobile a.cp-btn{border-bottom:0;color:#fff;justify-content:center;margin-top:16px; padding:.9em 1.5em;font-size:1rem} /* Selettore lingua: dropdown con bandiere (navbar) + pillole (menu mobile). Classi identiche alla landing, cosi il markup di cp_language_switcher() vale per entrambe senza varianti. */ .cp-lang{position:relative;display:inline-flex;align-items:center} .cp-flag{display:block;width:20px;height:14px;flex:none;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(11,26,51,.14)} .cp-flag svg,.cp-flag img{display:block;width:100%;height:100%} .cp-lang-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 10px;border:1px solid var(--cp-line);border-radius:9px;background:transparent;color:var(--cp-ink);font:inherit;line-height:1;cursor:pointer;transition:border-color .15s,background .15s} .cp-lang-btn:hover{border-color:var(--cp-orange)} .cp-lang-btn:focus-visible{outline:2px solid var(--cp-orange);outline-offset:2px} .cp-lang-code{font-family:"CPMono",monospace;font-size:.68rem;letter-spacing:.06em;color:var(--cp-muted);transition:color .15s} .cp-lang-btn:hover .cp-lang-code{color:var(--cp-ink)} .cp-lang-caret{flex:none;color:var(--cp-muted);transition:transform .18s} .cp-lang.open .cp-lang-caret{transform:rotate(180deg)} .cp-lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:170px;margin:0;padding:6px;list-style:none;background:var(--cp-surface);border:1px solid var(--cp-line);border-radius:var(--cp-radius-sm);box-shadow:var(--cp-shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s} .cp-lang.open .cp-lang-menu{opacity:1;visibility:visible;transform:none} .cp-lang-menu li{margin:0} .cp-lang-menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;color:var(--cp-ink);text-decoration:none;font-size:.9rem;white-space:nowrap;transition:background .15s,color .15s} .cp-lang-menu a:hover{background:var(--cp-surface-2)} .cp-lang-menu a.cur{color:var(--cp-orange);font-weight:600} .cp-lang-pills{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px;padding-bottom:12px;border-bottom:1px solid var(--cp-line)} .cp-lang-pills a{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;padding:8px 12px;border:1px solid var(--cp-line);border-radius:9px;color:var(--cp-ink);text-decoration:none} .cp-lang-pills a.cur{border-color:var(--cp-orange);color:var(--cp-orange)} /* Stessa soglia della landing (940px), cosi passando dalla home a una pagina interna la navbar cambia forma nello stesso punto. Sopra i 940 le quattro voci piu lingua e due pulsanti stanno in riga; sotto andavano a capo. */ @media (max-width:940px){ .cp-nav-in .cp-lang{display:none} .cp-nav{display:none} .cp-nav-cta .cp-btn{display:none} .cp-burger{display:flex} .cp-nav-in .cp-nav-cta{margin-left:auto} .cp-mobile.open{display:flex} } /* FOOTER */ .cp-sitefooter{background:var(--cp-surface-2);border-top:1px solid var(--cp-line);font-family:"CPPlex",system-ui,sans-serif;color:var(--cp-ink)} .cp-sitefooter .cp-wrap{padding-top:60px;padding-bottom:28px} .cp-foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px 32px} @media(max-width:760px){.cp-foot-grid{grid-template-columns:1fr 1fr}} .cp-foot-brand p{color:var(--cp-muted);font-size:.92rem;margin:14px 0 0;max-width:30ch} .cp-foot-col h4{font-family:"CPMono",monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:var(--cp-muted);margin:0 0 14px;font-weight:700} .cp-foot-col h4::before{content:"";display:block;width:18px;height:2px;border-radius:2px;background:var(--cp-orange);margin-bottom:11px} .cp-foot-col a{display:block;color:var(--cp-ink);font-size:.92rem;padding:5px 0;text-decoration:none;transition:color .15s ease,transform .15s ease} .cp-foot-col a:hover{color:var(--cp-orange);transform:translateX(3px)} @media (prefers-reduced-motion:reduce){.cp-foot-col a:hover{transform:none}} .cp-foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:22px;border-top:1px solid var(--cp-line);color:var(--cp-muted);font-size:.85rem} /* Selettore lingua compatto (bandiera + sigla) nella riga in basso, come nel footer della landing: su una pagina lunga evita di risalire fino al nav. */ .cp-lang-mini{display:flex;align-items:center;gap:6px;margin-inline-start:auto} .cp-lang-mini a{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px; border:1px solid transparent;color:var(--cp-muted);text-decoration:none;font-family:"CPMono",monospace; font-size:.66rem;letter-spacing:.06em;transition:color .15s,border-color .15s,background .15s} .cp-lang-mini a:hover{color:var(--cp-ink);border-color:var(--cp-line)} .cp-lang-mini a.cur{color:var(--cp-orange);border-color:var(--cp-line);background:var(--cp-surface)} .cp-lang-mini .cp-flag{width:16px;height:11px} @media (max-width:600px){.cp-foot-bottom>span{flex:1 0 100%} .cp-lang-mini{margin-inline-start:0;margin-inline-end:auto}} .cp-socials{display:flex;gap:10px} .cp-socials a{width:36px;height:36px;border:1px solid var(--cp-line);border-radius:9px;display:grid;place-items:center;color:var(--cp-muted)} .cp-socials a:hover{color:var(--cp-orange);border-color:var(--cp-orange)} .cp-socials svg{width:17px;height:17px;fill:currentColor} /* 404 */ .cp-404{padding:90px 24px;text-align:center;font-family:"CPPlex",system-ui,sans-serif} .cp-404 .eb{font-family:"CPMono",monospace;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--cp-orange);font-weight:700} .cp-404 h1{font-family:"CPJost",sans-serif;font-size:clamp(2rem,5vw,3rem);color:var(--cp-ink);margin:14px 0 0;letter-spacing:-.02em} .cp-404 p{color:var(--cp-muted);margin:16px auto 0;max-width:46ch;font-size:1.05rem} .cp-404 .cp-btn{display:inline-block;margin-top:26px;background:var(--cp-orange);color:#fff;font-weight:600;padding:.8em 1.6em;border-radius:8px;text-decoration:none} .cp-404 .cp-btn:hover{background:var(--cp-orange-d)} /* LegalBlink — contieni l'iframe dei documenti legali (evita overflow da 100vw/100vh) */ .cp-legal-wrap{max-width:900px;margin:0 auto;padding:24px} iframe[src*="legalblink"]{display:block;width:100%!important;max-width:100%;height:80vh!important;border:0!important;margin:8px 0 16px} /* ===== Pagine-modulo ([churchpilot_pagina]) ===================================== Usano header e footer del tema, quindi vivono qui e non in landing.css. Prefisso .cp-pg- per non collidere con .cp-foot- e .cp-nav-, gia presenti. ATTENZIONE: mai scrivere una sequenza asterisco-barra dentro un commento CSS, lo chiude in anticipo e fa scartare la regola che segue. */ /* Il template del tema stampa il titolo della pagina come h1: sulle pagine-modulo va nascosto, perche l hero dello shortcode ha gia il suo. ATTENZIONE: non basta nascondere l h1. Sta dentro un .wp-block-group con sfondo tinto e 32px di padding sopra e sotto: nascondendo solo il testo resta una fascia azzurra vuota da 64px. Va via il contenitore. */ .cp-pagina .wp-block-group:has(> .wp-block-post-title){display:none} .cp-pagina .wp-block-post-title{display:none} /* I temi a blocchi restringono i figli di .entry-content alla "content size" (qui 672px): la pagina-modulo verrebbe schiacciata al centro e la fascia dell hero non sarebbe a tutta larghezza. Qui la si lascia libera; il respiro lo danno .cp-wrap e il max-width della colonna di lettura. */ .cp-pagina .entry-content > .cp-pg{max-width:none;width:auto;margin-left:0;margin-right:0} /* .entry-content ha 32px di padding laterale: la fascia tinta dell hero si fermerebbe prima dei bordi. Qui si azzera, perche la pagina contiene solo lo shortcode e il respiro interno lo da gia .cp-wrap (24px). */ .cp-pagina .entry-content{padding-left:0;padding-right:0} /* Corpo del testo: senza questa riga la misura la eredita da .entry-content, che nel tema genitore e fluida col viewport — a 390px scendeva a 14,3px, troppo piccola per leggere. Qui parte da 16px e sale a 18 sul desktop. */ .cp-pg{color:var(--cp-ink);font-family:"CPPlex",system-ui,sans-serif; font-size:clamp(1rem,.93rem + .3vw,1.125rem)} .cp-pg h1,.cp-pg h2{font-family:"CPJost",system-ui,sans-serif;font-weight:600; line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin:0} /* Testata su fondo tinto, per staccare dall'header */ .cp-pg-hero{background:var(--cp-surface-2);border-bottom:1px solid var(--cp-line); padding:56px 0 48px} /* Briciole di pane: percorso visibile in cima alla testata, gemello del BreadcrumbList JSON-LD (vedi cp_briciole()). Riga sottile e grigia: deve orientare, non competere col titolo. Il separatore e un ::before e non testo nel markup, cosi non finisce nel copia-incolla. flex-wrap perche i titoli delle pagine-modulo sono lunghi (fino a 52 caratteri) e su telefono devono andare a capo, non tagliarsi. */ .cp-briciole{margin:0 0 12px} .cp-briciole ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px; margin:0;padding:0;list-style:none; font-family:"CPPlex",system-ui,sans-serif;font-size:.8rem;line-height:1.5} .cp-briciole li{display:flex;align-items:center;gap:6px;min-width:0} .cp-briciole li+li::before{content:"\203A";color:var(--cp-muted);opacity:.6} .cp-briciole a{color:var(--cp-muted);text-decoration:none;transition:color .15s} .cp-briciole a:hover{color:var(--cp-orange)} .cp-briciole [aria-current]{color:var(--cp-ink);font-weight:600} .cp-pg-hero h1{font-size:clamp(2rem,4.4vw,3rem);margin:14px 0 0;max-width:18ch} .cp-pg-eyebrow{display:block;font-family:"CPMono",monospace;text-transform:uppercase; letter-spacing:.14em;font-size:.66rem;font-weight:700;color:var(--cp-orange)} .cp-pg-deck{color:var(--cp-muted);font-size:1.06rem;line-height:1.62; margin:16px 0 0;max-width:56ch} .cp-pg-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .cp-btn,.cp-btn-ghost{display:inline-flex;align-items:center;justify-content:center; font-weight:600;font-size:.95rem;padding:.72em 1.35em;border-radius:9px; text-decoration:none;transition:background .15s,border-color .15s,color .15s} .cp-btn{background:var(--cp-orange);color:#fff} .cp-btn:hover{background:var(--cp-orange-d)} .cp-btn-ghost{background:#fff;color:var(--cp-ink);border:1px solid var(--cp-line)} .cp-btn-ghost:hover{border-color:var(--cp-orange);color:var(--cp-orange)} /* Colonna di lettura centrata: .cp-wrap è largo ~1140px e il testo, limitato a 64ch, resterebbe schiacciato a sinistra con mezza pagina vuota. */ .cp-pg-hero .cp-wrap,.cp-pg-body{max-width:820px} /* ATTENZIONE: padding-block, non lo shorthand. .cp-pg-body sta sullo STESSO elemento di .cp-wrap, e "padding:8px 0" azzerava i 24px laterali: fra 390 e 868px il testo toccava i due bordi dello schermo. Stessa trappola gia vista sulla landing con .wrap.hero-in e .wrap.diff. */ .cp-pg-body{padding-block:8px} .cp-pg-sec{padding:44px 0;border-bottom:1px solid var(--cp-line)} .cp-pg-sec:last-of-type{border-bottom:0} .cp-pg-sec h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:8px 0 0} .cp-pg-sec p{color:var(--cp-muted);line-height:1.68;margin:14px 0 0} .cp-pg-sec strong{color:var(--cp-ink);font-weight:600} .cp-pg-kicker{display:block;font-family:"CPMono",monospace;text-transform:uppercase; letter-spacing:.14em;font-size:.64rem;font-weight:700;color:var(--cp-muted)} .cp-pg-kicker::before{content:"";display:block;width:18px;height:2px;border-radius:2px; background:var(--cp-orange);margin-bottom:10px} .cp-pg-list{margin:18px 0 0;padding:0;list-style:none} .cp-pg-list li{position:relative;padding-left:26px;margin-top:12px; color:var(--cp-muted);line-height:1.62} .cp-pg-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px; border-radius:50%;border:2px solid var(--cp-orange)} /* Chiusura: stessa card navy della CTA finale della landing */ /* Stessa card della CTA finale della landing, alone compreso: senza il radial-gradient qui il navy restava piatto e le due chiusure di pagina non si somigliavano piu. overflow:hidden perche l alone deborda dagli angoli tondi, e i figli vanno rialzati di z-index o finiscono sotto lo pseudo-elemento. */ .cp-pg-final{margin:44px 0 56px;padding:44px 32px;border-radius:20px;text-align:center; background:linear-gradient(135deg,var(--cp-navy),#001A3D);color:#fff; position:relative;overflow:hidden} .cp-pg-final::after{content:"";position:absolute;inset:0; background-image:radial-gradient(circle at 20% 120%,rgba(255,106,0,.28),transparent 45%)} .cp-pg-final>*{position:relative;z-index:1} .cp-pg-final h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);max-width:20ch;margin:0 auto} .cp-pg-final p{color:#cdddf3;margin:14px auto 0;max-width:52ch;line-height:1.6} .cp-pg-final .cp-pg-cta{justify-content:center} .cp-pg-final .cp-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)} .cp-pg-final .cp-btn-ghost:hover{border-color:#fff;color:#fff} /* SCHERMATE REALI DEL PLUGIN Sono catture vere dell'admin (stesso CSS del plugin, dati di esempio), quindi vanno viste larghe: escono dalla colonna di lettura (820px) fino alla larghezza di .cp-wrap, restando centrate sul viewport. Il min() con calc(100vw - 48px) evita lo scroll orizzontale sugli schermi stretti: 100vw include la scrollbar, i 48px la coprono con margine. */ .cp-shot{margin:26px 0 0;width:min(1092px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)} /* L ombra sta sul contenitore, non sull immagine: quando il contenitore scorre (overflow-x) taglia i propri discendenti, e un ombra sull img sparirebbe ai bordi. L ombra di un elemento non e mai tagliata dal proprio overflow. */ .cp-shot-scroll{border-radius:12px;box-shadow:0 10px 30px rgba(0,36,90,.10)} .cp-shot img{display:block;box-sizing:border-box;width:100%;height:auto;border:1px solid var(--cp-line); border-radius:12px;background:#fff} .cp-shot figcaption{margin:12px auto 0;max-width:772px;font-size:.88rem;line-height:1.55; color:var(--cp-muted);text-align:center} .cp-shot p.cp-shot-hint{display:none} @media (max-width:640px){ .cp-pg-hero{padding:40px 0 36px} .cp-pg-sec{padding:34px 0} .cp-pg-final{padding:36px 22px;margin:34px 0 44px} .cp-shot figcaption{text-align:left} /* Su schermo stretto i due pulsanti stanno per forza in colonna: larghi uguali sembrano una scelta, larghi quanto il testo sembrano un incidente. */ .cp-pg-cta .cp-btn,.cp-pg-cta .cp-btn-ghost{flex:1 1 190px} } /* Le schermate sono griglie larghe: la Matrix e resa a 1400px CSS, con testo da 13px. Rimpicciolita per stare nello schermo diventa illeggibile — a 342px era alta 131px, e a 768px il testo scendeva sotto i 7px. Quindi sotto i 1100px l immagine tiene una larghezza minima leggibile e si scorre in orizzontale dentro il suo contenitore, invece di rimpicciolirsi. La soglia e 1100 e non 1092 di proposito: fino a li .cp-shot e gia larga abbastanza da non far scattare nessuno scorrimento. */ @media (max-width:1100px){ .cp-shot-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .cp-shot img{min-width:1000px} } /* Sul telefono la schermata esce fino ai bordi, per mostrarne piu che si puo, e la larghezza minima scende (meno strada da scorrere con il pollice). Il break-out usa i 24px di .cp-wrap (margin negativo), NON 100vw: 100vw include la scrollbar e riaprirebbe lo scroll orizzontale di pagina. */ @media (max-width:760px){ .cp-shot{width:calc(100% + 48px);margin-left:-24px;transform:none} .cp-shot-scroll{border-radius:0;box-shadow:none} .cp-shot img{min-width:940px;border-radius:0;border-left:0;border-right:0} .cp-shot figcaption{padding:0 24px} .cp-shot p.cp-shot-hint{display:block;margin:9px 24px 0;font-size:.78rem;color:var(--cp-muted); font-style:italic} } /* Tetto all'altezza. A piena larghezza (1092px) il report veniva reso alto 681px e il calendario 654: molto piu' di quanto serva per capirli, e la pagina diventava un elenco di figuroni. Il tetto vale solo sopra i 1100px, cioe' esattamente dove NON c'e' il min-width dello scorrimento: min-width e max-height insieme si contendono le due dimensioni e deformano l'immagine. */ @media (min-width:1101px){ .cp-shot img{width:auto;max-width:100%;max-height:560px;margin-inline:auto} /* ⚠️ Il contenitore deve STRINGERSI sull'immagine. Col tetto all'altezza l'immagine diventa piu' stretta della figura (es. 1056 o 897 contro 1092), ma il contenitore porta ombra e angoli arrotondati: restando largo quanto la figura lasciava due bande bianche a sinistra e a destra, che si leggono come un secondo bordo. Segnalato dall'utente l'08/08/2026. */ .cp-shot-scroll{width:fit-content;max-width:100%;margin-inline:auto} } /* Schermate in VERTICALE (modulo d'iscrizione, email, scaletta). Larghe come le altre venivano rese alte 1067, 1356 e 1328px: piu' di uno schermo per una sola immagine. Restano nella colonna di lettura, centrate, e non scorrono mai — rimpicciolite si leggono lo stesso, perche' sono documenti, non griglie. Questo blocco sta DOPO le media query di proposito: a parita' di specificita' vince l'ultima regola, e cosi' annulla il break-out e lo scorrimento. */ .cp-shot-alta{width:min(560px,100%);margin-left:auto;margin-right:auto;transform:none} .cp-shot-alta .cp-shot-scroll{overflow:visible;border-radius:12px; box-shadow:0 10px 30px rgba(0,36,90,.10)} .cp-shot-alta img{width:100%;min-width:0;max-height:none;border-radius:12px; border-left:1px solid var(--cp-line);border-right:1px solid var(--cp-line)} .cp-shot-alta p.cp-shot-hint{display:none} /* Nota sui dati di esempio nelle schermate. Sta una volta sola in fondo al corpo, non sotto ogni immagine: ripetuta quattro volte sarebbe rumore. E' figlia diretta di .cp-pg-body, quindi .cp-pg-sec p non la raggiunge. */ .cp-pg-nota{margin:36px 0 0;padding:13px 16px;border-left:3px solid var(--cp-line); border-radius:0 8px 8px 0;background:var(--cp-surface-2); font-size:.84rem;line-height:1.55;color:var(--cp-muted)} .cp-pg-nota strong{color:var(--cp-ink);font-weight:600} /* ---------- Micro-interazioni ---------- Gemelle di quelle di landing.css: se tocchi una delle due, tocca anche l altra. Dentro @media (hover:hover) perche sul telefono il :hover resta appiccicato dopo il tocco e l elemento toccato sembra rotto. */ @media (hover:hover){ .cp-btn,.cp-btn-ghost{transition:background .15s,border-color .15s,color .15s, transform .06s ease,box-shadow .18s ease} .cp-btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px -10px color-mix(in srgb,var(--cp-orange) 75%,transparent)} .cp-btn-ghost:hover{transform:translateY(-1px)} /* L ombra sta su .cp-shot-scroll, non sull immagine: vedi la nota nella sezione delle schermate, un contenitore con overflow taglia i discendenti. */ .cp-shot-scroll{transition:box-shadow .2s ease} .cp-shot:hover .cp-shot-scroll{box-shadow:0 16px 40px rgba(0,36,90,.16)} .cp-pg-list li::before{transition:background .16s ease} .cp-pg-list li:hover::before{background:var(--cp-orange)} } .cp-btn:active,.cp-btn-ghost:active{transform:translateY(1px)} @media (prefers-reduced-motion:reduce){ .cp-btn,.cp-btn-ghost{transition:none} .cp-btn:hover,.cp-btn-ghost:hover,.cp-btn:active,.cp-btn-ghost:active{transform:none} } /* ===== MODULO DI CONTATTO (Fluent Forms) ===================================== Il markup lo genera il plugin, quindi qui si veste soltanto: tutte le regole sono dentro .cp-form, cosi nessuna tocca altri moduli che un domani potrebbero stare altrove nel sito. I nomi .ff-* sono quelli pubblici di Fluent Forms. Il colore di FONDO del pulsante non sta qui: e nelle impostazioni del modulo (arancio, scritte da build/ff-contatti.py), che FF stampa come