/* * Applicazioni / settori — dall'originale index.html r.279–378. * * In questo file: tutto l'aspetto e l'impaginato. * Markup in templates/services.php, controlli in includes/widgets/class-services.php, * apertura dell'elenco in assets/js/services.js (l'unica cosa non esprimibile in CSS). * Entrate: meccanismo condiviso del tema. * * Come about e linee, il contenitore NON è `.adea-sect`: `.sect` dell'originale * non ha padding orizzontale di base, solo 20px sotto 960px. * * ⚠️ Le schede oltre il limite NON si nascondono con `:nth-child(n+9)` come * nell'originale: `nth-child` non sa leggere una variabile, quindi il numero * sarebbe fisso e non modificabile dal pannello. Qui il PHP marca le schede in * eccesso con `--extra` e il CSS nasconde quelle: stesso risultato, ma il * limite diventa un controllo dell'editor. * * Cascata MISURATA sull'originale (1440/1200/1024/900/700/560/375): * * >1040 1024–1040 621–960 ≤620 * sezione 70/0/78 70/0/78 72/0/84 58/0/66 * shell pad 0 0 0 20px 0 20px * testata mb 44px 44px 36px 36px * titolo 58px lh1.02 50px 42px 34px lh1.06 * occhiello 13px 8/20 13px 8/20 13px 8/20 12px 8/16 * griglia 4 colonne 2 colonne 2 colonne 1 colonna * scheda minh 236px 236px 210px 0 * scheda pad 22/22/20 22/22/20 22/20 22/20 * icona 56px 56px 58px 58px * h3 19px 19px 20px 20px * * Indice: sezione e trama · testata · occhiello · titolo · griglia · scheda · * icona · testi · link · bottone "esplora" · breakpoint · reduced-motion */ /* ---------- sezione e trama di puntini ---------- La trama è un ::before, non un'immagine: un radial-gradient ripetuto ogni 24px costa un decoro e nessuna richiesta di rete. */ .adea-services-section{ position:relative;overflow:hidden;scroll-margin-top:90px; background:var(--adea-services-bg,var(--adea-blu,#004F9E)); padding:var(--adea-services-pad-t,70px) 0 var(--adea-services-pad-b,78px); font-family:var(--adea-font-testo,'Source Sans 3',system-ui,sans-serif); line-height:normal; /* il Kit impone 1.5; l'originale eredita normal dal body */ } .adea-services-section::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.28; background:radial-gradient(rgba(255,255,255,.05) 1.2px,transparent 1.2px) 0 0/24px 24px; } .adea-services-shell{position:relative;z-index:1;max-width:var(--adea-services-maxw,1240px);margin:0 auto} /* ---------- testata ---------- */ .adea-services-head{max-width:760px;margin:0 auto var(--adea-services-head-mb,44px);text-align:center} /* ---------- occhiello ---------- Variante scura del componente condiviso: `.adea-c-kicker--dark` nasce da questo stesso elemento. Qui solo il margine sotto, l'icona e il gradino ≤620 (dove l'originale lo rimpicciolisce e il componente no). */ .adea-services-section .adea-c-kicker{margin-bottom:24px} .adea-services-kicker-ico{display:inline-flex;align-items:center;justify-content:center;line-height:0} .adea-services-kicker-ico svg{transition:transform .35s var(--adea-ease-spring)} .adea-c-kicker:hover .adea-services-kicker-ico svg{transform:scale(1.18) rotate(-6deg)} /* ---------- titolo ---------- */ .adea-services-title{ font-family:var(--adea-font-titoli,'Poppins',sans-serif); font-size:var(--adea-services-title-size,58px); line-height:var(--adea-services-title-lh,1.02); letter-spacing:-.05em;color:#fff;margin:0;font-weight:400;text-wrap:balance; } /* ---------- griglia ---------- */ .adea-services-grid{ display:grid; grid-template-columns:var(--adea-services-cols,repeat(4,minmax(0,1fr))); gap:var(--adea-services-gap,16px); } /* ⚠️ Le schede in eccesso si nascondono SOLO se il JavaScript c'è davvero: `adea-services-js` la mette services.js all'avvio. Senza JS il bottone non funzionerebbe e quattro schede resterebbero irraggiungibili — invece così l'elenco è completo e il bottone, inutile, sparisce (§8 del prompt). */ .adea-services-js .adea-services-grid:not(.is-expanded) .adea-service-card--extra{display:none} /* ---------- scheda ---------- NON è `.adea-c-card`: quella è bianca su fondo chiaro. Questa è un vetro sul blu (gradiente semitrasparente + blur + bordo chiaro). */ .adea-service-card{ position:relative;overflow:hidden;text-decoration:none; min-height:var(--adea-services-card-minh,236px); padding:var(--adea-services-card-pad,22px 22px 20px); border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(4px); cursor:pointer;display:flex;flex-direction:column;align-items:flex-start; transition:transform .28s cubic-bezier(.34,1.4,.64,1),box-shadow .28s ease, border-color .22s ease,background .28s ease; } /* alone luminoso dall'alto: si accende in hover */ .adea-service-card::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.7; background:radial-gradient(130% 90% at 50% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 62%); transition:opacity .3s ease; } .adea-service-card:hover::after, .adea-service-card:focus-visible::after{opacity:1} /* i figli sopra l'alone, altrimenti il testo ci finisce sotto */ .adea-service-card>*{position:relative;z-index:1} .adea-service-card:hover,.adea-service-card:focus-visible{ transform:translateY(-5px);box-shadow:0 24px 44px -24px rgba(0,0,0,.4); border-color:rgba(143,214,161,.5); background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07)); } /* ---------- icona ---------- */ .adea-service-icon{ width:var(--adea-services-ico,56px);height:var(--adea-services-ico,56px); border-radius:12px;background:rgba(66,173,89,.16);color:var(--adea-verde-chiaro,#8fd6a1); display:flex;align-items:center;justify-content:center;margin-bottom:16px; border:1px solid rgba(143,214,161,.22); transition:transform .38s var(--adea-ease-spring),background .3s ease,border-color .3s ease; } .adea-service-icon svg{width:26px;height:26px} .adea-service-card:hover .adea-service-icon, .adea-service-card:focus-visible .adea-service-icon{ transform:scale(1.1) translateY(-2px); background:rgba(66,173,89,.3);border-color:rgba(143,214,161,.55); } /* ---------- testi ---------- */ .adea-service-card h3{ font-family:var(--adea-font-titoli,'Poppins',sans-serif); font-size:var(--adea-services-h3,19px);line-height:1.12;letter-spacing:-.03em; color:#fff;margin:0 0 9px;font-weight:400; } .adea-service-card p{ font-size:var(--adea-services-p,13.5px);line-height:1.5; color:#c2d3e7;margin:0 0 16px;max-width:none; } /* ---------- link in fondo ---------- `margin-top:auto` lo spinge in fondo alla scheda: allineato fra colonne anche quando i testi hanno lunghezze diverse. */ .adea-service-link{ margin-top:auto;font-family:var(--adea-font-titoli,'Poppins',sans-serif); font-size:13px;font-weight:600;color:var(--adea-verde-chiaro,#8fd6a1); display:inline-flex;align-items:center;gap:8px; transition:gap .3s var(--adea-ease-spring); } .adea-service-card:hover .adea-service-link, .adea-service-card:focus-visible .adea-service-link{gap:13px} /* ---------- bottone "esplora di più" ---------- */ .adea-apps-more-wrap{display:none;text-align:center;margin-top:34px} .adea-services-js .adea-apps-more-wrap{display:block} /* ⚠️ Due classi, non una: `hello-elementor/reset.css` dichiara `button:hover,button:focus{background-color:#c36;color:#fff}` con specificità (0,1,1) e batterebbe una classe sola. La rete di sicurezza in adea-tokens.css §9 toglie il rosa, ma il fondo e il colore di RIPOSO li deve riaffermare la sezione: altrimenti al clic (`:focus` senza `:focus-visible`) il bottone resterebbe senza fondo. Segnalato dall'utente il 2026-08-04. */ .adea-services-section .adea-apps-more{ display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px; border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:#fff; font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;font-size:15px; cursor:pointer; /* ⚠️ come per i campi della fascia CTA: un