/* * ADEA — design token e componenti condivisi. * * Origine: styles.css del sito statico (adea-repo). Ogni valore qui è copiato * dall'originale, non stimato; dove il valore era un letterale ripetuto * (es. #004F9E) diventa un token. I componenti condivisi sono gli elementi * che nell'originale compaiono in 3+ sezioni. * * Indice: * 1. Token (:root) — colori, font, easing, ombre, scala tipografica * 2. Contenitore di sezione — .adea-sect (1240) / .adea-sect--wide (1480) * 3. Bottone CTA a pillola — .adea-c-cta (+ sheen, + icona in cerchio) * 4. Occhiello a pillola — .adea-c-kicker (+ --dark) * 5. Card — .adea-c-card * 6. Fascia blu in gradiente — .adea-c-blueband * 7. Decorazioni di fondo — .adea-deco (arcs/dots/ring/blob, taglie, angoli) * 8. Meccanismo entrate — contratto data-adea-scene / data-adea-enter * * ⚠️ Nessuna regola di base parte da opacity:0: gli stati iniziali delle * entrate valgono SOLO sotto .adea-armed, che aggiunge lo script. Senza * JavaScript la pagina è completa e visibile (§8 del prompt di porting). */ /* ---------- 1. TOKEN ---------- */ :root{ /* Colori — letterali dell'originale promossi a token */ --adea-blu:#004F9E; --adea-blu-chiaro:#0a5bb0; /* inizio gradiente blueband */ --adea-blu-scuro:#003a75; /* fine gradiente blueband */ --adea-blu-footer:#0a2540; --adea-verde:#42AD59; --adea-verde-scuro:#379a4c; /* hover dei CTA */ --adea-verde-chiaro:#8fd6a1; /* kicker su fondo blu */ --adea-testo:#26313a; --adea-testo-muto:#5b6b78; --adea-titolo:#15171b; --adea-crema:#f6f3ec; --adea-card-bg:#f3f3f1; --adea-bordo-card:#e8edf2; /* Font */ --adea-font-titoli:'Poppins',sans-serif; --adea-font-testo:'Source Sans 3',system-ui,sans-serif; /* Durate/easing — copiati dal :root dell'originale */ --adea-dur-fast:.18s; --adea-dur:.28s; --adea-dur-slow:.6s; --adea-ease:cubic-bezier(.22,.8,.3,1); --adea-ease-spring:cubic-bezier(.34,1.4,.64,1); --adea-lift:-3px; --adea-shadow-soft:0 18px 40px -20px rgba(10,37,64,.28); --adea-shadow-hover:0 24px 50px -24px rgba(10,37,64,.34); --adea-shadow-frame:0 24px 60px -28px rgba(10,37,64,.4); --adea-shadow-frame-hover:0 30px 66px -26px rgba(10,37,64,.46); /* Entrate allo scroll — ampiezza e durata (dal :root dell'originale) */ --adea-reveal-y:70px; --adea-reveal-dur:.85s; /* Scala tipografica unica (dal :root dell'originale) */ --adea-t-kicker:12px; --adea-t-kicker-ls:.16em; --adea-t-h2:42px; --adea-t-h2-ls:-.035em; --adea-t-h2-lh:1.1; --adea-t-h2-md:33px; /* ≤1080px */ --adea-t-h2-sm:27px; /* ≤620px */ --adea-t-h3:16px; --adea-t-lead:16px; --adea-t-pill:11px; --adea-t-pill-ls:.14em; /* z-index di progetto: header sopra tutto, dropdown sopra l'header */ --adea-z-header:220; --adea-z-dropdown:260; } /* ---------- 2. CONTENITORE DI SEZIONE ---------- Dall'originale: contenuti interni a 1240px (pagine interne) o 1480px (header e hero della home), padding orizzontale 40 → 20 sotto i 560px. */ .adea-sect{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px} .adea-sect--wide{max-width:1480px} @media(max-width:560px){ .adea-sect,.adea-sect--wide{padding-left:20px!important;padding-right:20px!important} } /* ---------- 3. BOTTONE CTA A PILLOLA ---------- Dall'originale .adea-company-cta (usato in 7 sezioni) + sheen luminoso. L'hover è transition CSS su :hover E :focus-within (niente JS). */ .adea-c-cta{ display:inline-flex;align-items:center;gap:16px; padding:10px 10px 10px 26px;border-radius:999px; background:var(--adea-verde);color:#fff!important; font-family:var(--adea-font-titoli);font-size:17px;font-weight:600; box-shadow:0 18px 34px -18px rgba(66,173,89,.46); position:relative;overflow:hidden;cursor:pointer;text-decoration:none; transition:transform var(--adea-dur-fast) var(--adea-ease-spring), box-shadow .22s ease,background .2s ease; } /* ⚠️ AGGIUNTA il 2026-08-03 portando "Azienda in breve": Elementor stampa `.elementor a{box-shadow:none;text-decoration:none}` con specificità (0,1,1), che batte `.adea-c-cta` (0,1,0). Il componente perdeva l'ombra ogni volta che il bottone è un e la sezione non la sovrascriveva per conto suo — hero e about non se ne erano accorti perché entrambi la ridichiarano con (0,2,0). Qui la si riafferma con (0,2,0). Misurato: senza questa riga box-shadow=none. */ .elementor .adea-c-cta{box-shadow:0 18px 34px -18px rgba(66,173,89,.46)} .adea-c-cta:hover,.adea-c-cta:focus-visible{ background:var(--adea-verde-scuro); transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(66,173,89,.55); } .adea-c-cta:active{transform:translateY(0) scale(.96)} .adea-c-cta__icon{ display:inline-flex;align-items:center;justify-content:center; width:48px;height:48px;border-radius:50%;background:#fff;color:var(--adea-verde); /* ⚠️ AGGIUNTO il 2026-08-03: mancava. Nell'originale (r.721–726) TUTTI i cerchietti-freccia avanzano di 4px in hover — hero, about, company, overlay e header. Senza, il bottone del widget hero restava fermo mentre quello dell'originale si muoveva (misurato: transform `none` contro `matrix(1,0,0,1,4,0)`). */ transition:transform .32s var(--adea-ease-spring); } .adea-c-cta:hover .adea-c-cta__icon, .adea-c-cta:focus-visible .adea-c-cta__icon{transform:translateX(4px)} /* sheen: la striscia di luce che attraversa il bottone in hover. ⚠️ CORRETTO il 2026-08-03: prima erano qui i valori di styles.css r.72–74 (-140% / 55% / 105deg / .4 / .7s / hover 150%), che l'originale SUPERA con il blocco r.730–731 — stessa specificità, più in basso nel foglio. I valori giusti sono questi, misurati con getComputedStyle(el,"::before") sul `.hero-cta-primary` dell'originale: left -184.6px su 246.15px = -75%, larghezza 45%, hover left 292.98px = 130%. */ .adea-c-cta::before{ content:"";position:absolute;top:0;left:-75%;width:45%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg);z-index:0; transition:left .65s cubic-bezier(.4,0,.2,1);pointer-events:none; } .adea-c-cta:hover::before,.adea-c-cta:focus-visible::before{left:130%} /* l'originale (r.747) nasconde del tutto lo sheen con reduced-motion */ @media(prefers-reduced-motion:reduce){.adea-c-cta::before{display:none!important}} @media(max-width:620px){ .adea-c-cta{font-size:16px;padding-left:22px} .adea-c-cta__icon{width:44px;height:44px} } /* ---------- 4. OCCHIELLO A PILLOLA ---------- Due varianti dell'originale: su fondo chiaro (.adea-about-kicker e simili) e su fondo blu (.adea-band-kicker / .adea-services-kicker). */ .adea-c-kicker{ display:inline-flex;align-items:center;gap:10px; padding:8px 18px;border:1px solid #d7e4d8;border-radius:999px; font-family:var(--adea-font-titoli);font-size:13px;font-weight:600; letter-spacing:.04em;color:var(--adea-verde-scuro); } .adea-c-kicker--dark{ border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05); color:var(--adea-verde-chiaro);padding:8px 20px; } /* ---------- 5. CARD ---------- */ .adea-c-card{ background:#fff;border:1px solid var(--adea-bordo-card);border-radius:16px; box-shadow:0 16px 38px -22px rgba(10,37,64,.22); transition:transform .35s cubic-bezier(.2,.85,.25,1),box-shadow .35s ease; } .adea-c-card:hover{transform:translateY(-6px);box-shadow:0 26px 52px -24px rgba(10,37,64,.34)} /* ---------- 6. FASCIA BLU ---------- */ .adea-c-blueband{ position:relative;overflow:hidden; background:linear-gradient(140deg,var(--adea-blu-chiaro) 0%,var(--adea-blu) 52%,var(--adea-blu-scuro) 100%); } /* ⚠️ AGGIUNTA il 2026-08-03 portando la fascia "Linee dedicate": mancava la trama di puntini dell'originale (r.867–870). È lo stesso motivo della sezione Applicazioni, ma più tenue: 6% invece di 5% di bianco e opacità .55 invece di .28. Senza, il blu risultava piatto. */ .adea-c-blueband::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.55; background:radial-gradient(rgba(255,255,255,.06) 1.2px,transparent 1.2px) 0 0/24px 24px; } .adea-c-blueband__inner{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:78px 40px 84px} @media(max-width:560px){.adea-c-blueband__inner{padding:56px 20px 60px}} /* ---------- 7. DECORAZIONI DI FONDO (originale .adea-deco) ---------- */ .adea-deco-host{position:relative;overflow:hidden} .adea-deco{ position:absolute;z-index:0;pointer-events:none; background-repeat:no-repeat;background-size:contain; will-change:transform; } .adea-deco.dots{background-image:url('../img/hero-dots.svg');opacity:.26} .adea-deco.arcs{background-image:url('../img/arc-lines.svg');opacity:.45} .adea-deco.ring{border-radius:50%;border:1px solid rgba(0,79,158,.09)} .adea-deco.blob{border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(0,79,158,.055) 0%,rgba(0,79,158,.02) 46%,transparent 72%)} .adea-deco.on-dark.ring{border-color:rgba(255,255,255,.14)} .adea-deco.on-dark.blob{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.07) 0%,rgba(255,255,255,.025) 46%,transparent 72%)} /* ⚠️ CORRETTO il 2026-08-03 portando "Linee dedicate": qui mancava `.dots` (l'originale r.1692 raggruppa `.on-dark.dots,.on-dark.arcs`). */ .adea-deco.on-dark.dots, .adea-deco.on-dark.arcs{opacity:.16;filter:brightness(0) invert(1)} .adea-deco.s{width:210px;height:210px} .adea-deco.m{width:330px;height:300px} .adea-deco.l{width:470px;height:430px} .adea-deco.xl{width:640px;height:600px} .adea-deco.tl{left:-9%;top:-8%} .adea-deco.tr{right:-9%;top:-8%} .adea-deco.bl{left:-9%;bottom:-10%} .adea-deco.br{right:-9%;bottom:-10%} /* ⚠️ AGGIUNTE il 2026-08-03: mancavano (originale r.1703–1704). */ .adea-deco.ml{left:-11%;top:50%;margin-top:-15%} .adea-deco.mr{right:-11%;top:50%;margin-top:-15%} /* ⚠️ CORRETTO il 2026-08-03. Qui c'era `@media(max-width:860px){.adea-deco.l{…}}`: inventato. L'originale (r.1735–1740) alleggerisce a **700px**, abbassa l'opacità di TUTTE le decorazioni e stringe `xl` **e** `l` — non solo `l`. Misurato sull'originale a 700 e 375: `.l` = 300×280, `.m` resta 330×300. */ @media(max-width:700px){ .adea-deco{opacity:.5} .adea-deco.xl,.adea-deco.l{width:300px;height:280px} } /* ⚠️ AGGIUNTE il 2026-08-03: le decorazioni dell'originale si MUOVONO (r.1725–1730) e qui non c'era niente. Sono lentissime di proposito: la più veloce fa un giro in 14 secondi, gli archi in due minuti e mezzo. Stanno sotto `no-preference`, quindi con reduced-motion restano ferme senza dover scrivere una regola che le spenga. Verificato sull'originale: arcs `adeaDecoSpin 150s linear infinite`, blob `adeaDecoBreathe 14s ease-in-out infinite alternate`. */ @keyframes adeaDecoDrift{from{transform:translate3d(0,-9px,0)}to{transform:translate3d(0,9px,0)}} @keyframes adeaDecoSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes adeaDecoBreathe{from{transform:scale(1);opacity:.75}to{transform:scale(1.07);opacity:1}} @media(prefers-reduced-motion:no-preference){ .adea-deco.dots{animation:adeaDecoDrift 19s ease-in-out infinite alternate} .adea-deco.arcs{animation:adeaDecoSpin 150s linear infinite} .adea-deco.ring{animation:adeaDecoSpin 110s linear infinite reverse} .adea-deco.blob{animation:adeaDecoBreathe 14s ease-in-out infinite alternate} } /* nell'editor le animazioni ripartirebbero a ogni tasto premuto */ .elementor-editor-active .adea-deco{animation:none!important} /* ---------- 8. MECCANISMO ENTRATE ---------- * Contratto (implementato da adea-core.js): *
← la "scena" da osservare *
← sale con dissolvenza (testi) *
← sale + scala .92→1 (card, foto) * * Lo script: assegna --adea-i (indice fra i fratelli, cap a 9 come * nell'originale), aggiunge .adea-armed alla scena (da lì valgono gli stati * iniziali) e .adea-in all'elemento quando entra in vista * (IntersectionObserver threshold .12, rootMargin -8% — valori originali). * Cascata: card 120ms, testi 100ms (i due step di revealRegister). */ [data-adea-enter="card"]{--adea-step:120ms} /* stati iniziali SOLO ad armamento avvenuto (mai nel CSS di base) */ .adea-armed [data-adea-enter]:not(.adea-in){opacity:0} /* ⚠️ animation-delay va DOPO la shorthand `animation:` e nella stessa regola: la shorthand azzera il delay dichiarato in regole a specificità più bassa. */ .adea-armed [data-adea-enter="rise"].adea-in{ opacity:1;animation:adeaRevealUp var(--adea-reveal-dur) cubic-bezier(.22,.8,.3,1) backwards; animation-delay:calc(var(--adea-i,0) * var(--adea-step,100ms)); } .adea-armed [data-adea-enter="card"].adea-in{ opacity:1;animation:adeaRevealCard var(--adea-reveal-dur) var(--adea-ease) backwards; animation-delay:calc(var(--adea-i,0) * var(--adea-step,100ms)); } @keyframes adeaRevealUp{ from{opacity:0;transform:translateY(var(--adea-reveal-y))} to{opacity:1;transform:translateY(0)} } @keyframes adeaRevealCard{ from{opacity:0;transform:translateY(var(--adea-reveal-y)) scale(.92)} to{opacity:1;transform:translateY(0) scale(1)} } /* Tutto fermo e tutto visibile: reduced-motion e editor di Elementor (nell'editor le animazioni ripartirebbero a ogni tasto premuto). */ @media(prefers-reduced-motion:reduce){ .adea-armed [data-adea-enter]{opacity:1!important;animation:none!important;transform:none!important} } .elementor-editor-active .adea-armed [data-adea-enter], .elementor-editor-active [data-adea-enter]{opacity:1!important;animation:none!important;transform:none!important} /* ---------- 9. RETE DI SICUREZZA SUI