/* * Aree di attività / "About Us" — dall'originale index.html r.171–207. * * In questo file: tutto l'aspetto e l'impaginato. * Markup in templates/about.php, controlli in includes/widgets/class-about.php, * contatori animati in assets/js/about.js (l'unica cosa che il CSS non può fare). * Le entrate usano il meccanismo CONDIVISO (data-adea-scene / data-adea-enter): * qui l'originale usa revealRegister, non un'animazione propria. * * ⚠️ Il contenitore NON è `.adea-sect`. Nell'originale la shell ha classe * `sect adea-about-shell`, ma `.sect` non ha padding orizzontale di base: * ne prende 20px solo sotto 960px. `.adea-sect` del tema invece ne mette 40px * sempre. Misurato: a 1440 la shell è larga 1240 con padding 0. Usare il * componente condiviso avrebbe stretto tutta la sezione di 80px. * * Cascata MISURATA sull'originale (1440/1200/1024/900/700/560/375): * * >1040 1024–1040 961–1024 621–960 ≤620 * sezione 96/0/44 96/0/44 96/0/44 72/0/44 72/0/44 * shell pad 0 0 0 0 20px 0 20px * head 1.05fr .9fr g72 1fr g28 1fr g28 1fr g28 1fr g28 * titolo 54px 46px 46px 40px 34px * copycol pt 74px 24px 24px 0 0 * copy 17px 17px 17px 17px 16px * visual AR 2.55/1 a ogni larghezza (vedi nota) · raggio 24px sempre * overlay abs -182 w470 abs -132 w360 abs -132 w360 statico m18 statico m14 * stats pad 68/10/0/620 64/0/0/390 64/0/0/390 24/0/0 20/0/0 * stats col 3 3 3 3 1 * numero 58px 58px 58px 48px 40px * * ⚠️ NOTA sull'aspect-ratio e sul raggio del visual. L'originale sembra * cambiarli tre volte (r.297 → 2.15/1, r.346 → 1.7/1, r.414 → 1.22/1 e raggio * 22px), ma sono TUTTE regole morte. Il gruppo di r.138–139 è * `.adea-about-visual, .adea-about-visual.adea-media { … }`: in una lista di * selettori la specificità si calcola per ciascun selettore che corrisponde, e * l'elemento ha entrambe le classi — quindi vale (0,2,0) e batte le regole * (0,1,0) delle media query, anche quelle con `!important` (a pari importanza * decide la specificità). Misurato a 1440/1200/1024/900/700/560/375: sempre * 2.55/1 e sempre 24px. È quello che replichiamo. * * Variabili controllate dall'editor: ripiego = valore dell'originale, un * controllo per gradino (Elementor stampa il desktop su un selettore con l'id * del documento, che batterebbe le media query di questo foglio — §13). * * Indice: sezione e shell · testata · occhiello · titolo · colonna testo · * CTA · visual e immagine · card sovrapposta · numeri · breakpoint */ /* ---------- sezione e shell ---------- */ .adea-about-section{ background:var(--adea-about-bg,#fff); padding:var(--adea-about-pad-t,96px) 0 var(--adea-about-pad-b,44px); 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-about-shell{max-width:var(--adea-about-maxw,1240px);margin:0 auto} /* ---------- testata ---------- */ .adea-about-head{ display:grid; grid-template-columns:var(--adea-about-head-cols,minmax(0,1.05fr) minmax(320px,.9fr)); gap:var(--adea-about-head-gap,72px);align-items:start;margin-bottom:40px; } /* ---------- occhiello ---------- È il componente condiviso .adea-c-kicker: nasce proprio da questo elemento (fondo chiaro, bordo #d7e4d8, Poppins 13/600, verde #379a4c). Qui si aggiunge solo ciò che nel componente non c'è: il margine sotto e l'icona. */ .adea-about-section .adea-c-kicker{margin-bottom:22px} .adea-about-kicker-ico{display:inline-flex;align-items:center;justify-content:center;line-height:0} .adea-about-kicker-ico svg{transition:transform .35s var(--adea-ease-spring)} .adea-c-kicker:hover .adea-about-kicker-ico svg{transform:scale(1.18) rotate(-6deg)} /* ---------- titolo ---------- */ .adea-about-title{ font-family:var(--adea-font-titoli,'Poppins',sans-serif); font-size:var(--adea-about-title-size,54px);line-height:1.08;letter-spacing:-.04em; color:#15171b;margin:0;max-width:640px;font-weight:400; } /* ---------- colonna del testo ---------- `padding-top:74px` allinea l'inizio del paragrafo con la seconda riga del titolo: è un allineamento ottico, non una spaziatura. Sotto 1040 scende a 24px e sotto 960 a 0, perché le due colonne diventano una. */ .adea-about-copycol{padding-top:var(--adea-about-copy-pt,74px);max-width:640px} .adea-about-copy{ font-size:var(--adea-about-copy-size,17px);line-height:1.55; color:#4c5864;margin:0 0 26px; } /* ---------- CTA ---------- È .adea-c-cta del tema. Il componente nasce da .adea-company-cta, che è più grande: qui si sovrascrivono SOLO le misure che differiscono, così hover, sheen e avanzamento della freccia restano quelli condivisi e non divergono. Il selettore ha specificità (0,2,0) e vince anche dentro le media query del componente (che usa .adea-c-cta, (0,1,0)). */ .adea-about-copycol .adea-c-cta{ gap:14px;padding:8px 10px 8px 22px; font-size:var(--adea-about-cta-size,16px); box-shadow:0 16px 32px -16px rgba(66,173,89,.42); } .adea-about-copycol .adea-c-cta:hover, .adea-about-copycol .adea-c-cta:focus-visible{box-shadow:0 14px 28px -14px rgba(66,173,89,.5)} .adea-about-copycol .adea-c-cta__icon{ width:var(--adea-about-cta-ico,40px);height:var(--adea-about-cta-ico,40px); } /* ---------- visual e immagine ---------- `overflow:visible` è voluto: la card bianca sporge di 182px sotto la foto. Per questo l'ingrandimento in hover è sull'IMMAGINE, che ha un raggio proprio, e non su un contenitore con ritaglio. Delle regole di .adea-media dell'originale qui sopravvivono solo queste due (il resto è annullato da `overflow:visible!important` e `box-shadow:none!important`): non vale la pena promuoverle a componente condiviso finché non le usa una seconda sezione. */ .adea-about-visual{ position:relative;border-radius:var(--adea-about-radius,24px);overflow:visible; /* ⚠️ min-height:0 — senza, l'aspect-ratio cede all'altezza minima del contenuto (la card bianca) e la foto diventa alta il doppio. */ aspect-ratio:2.55/1;min-height:0;height:auto;background:#eef3f7; } .adea-about-visual .adea-about-image{ width:100%;height:100%;object-fit:cover;object-position:center center; border-radius:var(--adea-about-radius,24px);will-change:transform; transition:transform var(--adea-dur-slow,.6s) var(--adea-ease), filter var(--adea-dur,.28s) var(--adea-ease); } .adea-about-visual:hover .adea-about-image{transform:scale(1.05);filter:saturate(1.03)} /* ---------- card sovrapposta ---------- Il `padding-bottom` enorme (140px) è lo spazio riservato al bottone, che è in posizione assoluta in fondo alla card: senza, il testo ci finirebbe sotto. */ .adea-about-overlay{ position:absolute;left:var(--adea-about-ovl-left,18px);bottom:var(--adea-about-ovl-bottom,-182px); width:var(--adea-about-ovl-w,470px);max-width:calc(100% - 36px); background:#fff;border:1.5px solid #d5dbe1;border-radius:18px; padding:var(--adea-about-ovl-pad,34px 28px 140px);z-index:3; } .adea-about-overlay h3{ font-family:var(--adea-font-titoli,'Poppins',sans-serif); font-size:24px;line-height:1.12;color:#171a1f;margin:0 0 18px; font-weight:400;letter-spacing:-.02em; } .adea-about-overlay p{font-size:16px;line-height:1.55;color:#4f5964;margin:0 0 22px;max-width:none} .adea-about-mini{font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-size:15px;font-weight:600;color:#171a1f} /* bottone della card: sempre .adea-c-cta, con le sue misure */ .adea-about-overlay .adea-c-cta{ position:absolute;left:var(--adea-about-obtn-left,28px);bottom:var(--adea-about-obtn-bottom,28px); justify-content:center;gap:16px;min-height:var(--adea-about-obtn-minh,54px); padding:8px 8px 8px var(--adea-about-obtn-padl,26px); font-size:var(--adea-about-obtn-size,15px); box-shadow:0 16px 30px -16px rgba(66,173,89,.52); } .adea-about-overlay .adea-c-cta:hover, .adea-about-overlay .adea-c-cta:focus-visible{box-shadow:0 14px 28px -14px rgba(66,173,89,.5)} .adea-about-overlay .adea-c-cta__icon{ width:var(--adea-about-obtn-ico,46px);height:var(--adea-about-obtn-ico,46px); } /* ---------- numeri ---------- `padding-left:620px` non è un capriccio: è lo spazio che la card bianca occupa sporgendo sotto la foto. Quando la card torna nel flusso (≤960) il padding sparisce. */ .adea-about-stats{ display:grid;grid-template-columns:var(--adea-about-stats-cols,repeat(3,minmax(0,1fr))); gap:var(--adea-about-stats-gap,34px); padding:var(--adea-about-stats-pad,68px 10px 0 620px);align-items:start; } .adea-about-stat{display:flex;flex-direction:column;gap:10px} .adea-about-num{ font-family:var(--adea-font-titoli,'Poppins',sans-serif); font-size:var(--adea-about-num-size,58px);line-height:.95;font-weight:500; letter-spacing:-.045em;color:#111922; } .adea-about-lbl{font-size:var(--adea-about-lbl-size,15px);line-height:1.35;color:#51606d;max-width:180px} /* ---------- variante "pagina interna" ---------- L'originale riusa `.adea-about-section` sulle pagine interne, ma la ridefinisce (styles.css r.40–48 e r.1470–1483): «nasce per la home e riusata su Azienda stonava accanto ai titoli blu delle altre sezioni». Le differenze, MISURATE sulla pagina Azienda a 1440/1024/900/620/560/375: · shell con 40px di margine laterale, che scende a 20px sotto **960**; · titolo blu #004F9E, peso 500, **42px a ogni larghezza** (l'originale usa `!important`, quindi i gradini della home non si applicano); · occhiello senza pillola: niente fondo, bordo né raggio, verde #42AD59, e l'icona sparisce; · paragrafo 16px con interlinea 1.75. ⚠️ Il `@media(max-width:560px)` dell'originale per questo margine è codice morto: a 960 vince già `.sect{padding-left:20px!important}`. */ .adea-about-section--interna .adea-about-shell{padding-left:40px;padding-right:40px} .adea-about-section--interna .adea-about-title{ font-size:var(--adea-t-h2,42px);line-height:var(--adea-t-h2-lh,1.1); letter-spacing:var(--adea-t-h2-ls,-.035em);color:var(--adea-blu,#004F9E);font-weight:500; } .adea-about-section--interna .adea-c-kicker{ padding:0;border:0;border-radius:0;background:none; font-size:var(--adea-t-kicker,12px);font-weight:600; letter-spacing:var(--adea-t-kicker-ls,.16em);text-transform:uppercase; color:var(--adea-verde,#42AD59);gap:8px; } .adea-about-section--interna .adea-about-kicker-ico{display:none} .adea-about-section--interna .adea-about-copy{font-size:var(--adea-t-lead,16px);line-height:1.75;color:#5b6b78} /* ⚠️ la variante annulla i gradini del titolo della home: sull'originale il `!important` di r.1472 li batte tutti. Qui basta la specificità (0,2,0). */ @media(max-width:1040px){.adea-about-section--interna .adea-about-title{font-size:var(--adea-t-h2,42px)}} @media(max-width:960px){ .adea-about-section--interna .adea-about-title{font-size:var(--adea-t-h2,42px)} /* ⚠️ il gradino è QUI, a 960: la regola `.sect{padding-left:20px!important}` dell'originale batte per !important il `40px` delle pagine interne, che pure ha specificità più alta. Il `@media(max-width:560px)` di r.44 è quindi codice morto. Misurato: 40px a 1024, 20px a 900. */ .adea-about-section--interna .adea-about-shell{padding-left:20px;padding-right:20px} } @media(max-width:620px){.adea-about-section--interna .adea-about-title{font-size:var(--adea-t-h2,42px)}} /* ---------- breakpoint originali (misurati) ---------- ⚠️ Come funziona il rimappaggio: il controllo del gradino scrive `--…-size-960` sulla SEZIONE (selettore con l'id del documento, specificità alta ma fuori da ogni media query). Qui la media query riscrive la variabile di base `--…-size` sull'ELEMENTO che la legge, prendendo il valore dal gradino. Vince perché è l'elemento stesso a dichiararla, mentre il valore desktop gli arriva solo per ereditarietà. Senza questo passaggio i controlli dei gradini sarebbero scritti e mai letti. */ @media(max-width:1040px){ .adea-about-head{ --adea-about-head-cols:1fr; --adea-about-head-gap:28px; } .adea-about-title{--adea-about-title-size:var(--adea-about-title-size-1040,46px)} .adea-about-copycol{--adea-about-copy-pt:24px} .adea-about-overlay{ --adea-about-ovl-left:16px;--adea-about-ovl-bottom:-132px; --adea-about-ovl-w:360px;--adea-about-ovl-pad:26px 22px 118px; } .adea-about-overlay .adea-c-cta{--adea-about-obtn-left:22px;--adea-about-obtn-bottom:22px;--adea-about-obtn-minh:50px} .adea-about-stats{--adea-about-stats-pad:64px 0 0 390px;--adea-about-stats-gap:24px} } @media(max-width:960px){ /* ⚠️ qui si scrive la PROPRIETÀ, non la variabile: Elementor stampa --adea-about-pad-t sullo stesso elemento con specificità (0,3,0) e vincerebbe. Il rimappaggio a variabile funziona solo quando la media query colpisce un elemento DISCENDENTE rispetto a quello su cui Elementor scrive. */ .adea-about-section{padding-top:var(--adea-about-pad-t-960,72px)} /* `.sect` dell'originale: sotto 960 il margine laterale è 20px */ .adea-about-shell{padding-left:20px;padding-right:20px} .adea-about-title{--adea-about-title-size:var(--adea-about-title-size-960,40px)} .adea-about-copycol{--adea-about-copy-pt:0px} /* la card esce dalla sovrapposizione e torna nel flusso, sotto la foto */ .adea-about-overlay{position:static;max-width:none;width:auto;margin:18px 18px 0;--adea-about-ovl-pad:22px 22px 110px} .adea-about-overlay .adea-c-cta{--adea-about-obtn-bottom:20px} .adea-about-stats{--adea-about-stats-pad:24px 0 0;--adea-about-stats-gap:20px} .adea-about-num{--adea-about-num-size:var(--adea-about-num-size-960,48px)} } @media(max-width:620px){ .adea-about-title{--adea-about-title-size:var(--adea-about-title-size-620,34px)} .adea-about-copy{--adea-about-copy-size:var(--adea-about-copy-size-620,16px)} .adea-about-copycol .adea-c-cta{--adea-about-cta-size:15px;padding-left:18px;--adea-about-cta-ico:36px} /* niente raggio a 22px qui: nell'originale r.414 è codice morto (vedi nota in testa) */ .adea-about-overlay{margin:14px 14px 0;--adea-about-ovl-pad:20px 20px 98px} .adea-about-overlay .adea-c-cta{ --adea-about-obtn-left:20px;--adea-about-obtn-bottom:18px;--adea-about-obtn-minh:48px; --adea-about-obtn-size:14px;--adea-about-obtn-padl:22px;--adea-about-obtn-ico:38px; } .adea-about-stats{--adea-about-stats-cols:1fr;--adea-about-stats-pad:20px 0 0} .adea-about-num{--adea-about-num-size:var(--adea-about-num-size-620,40px)} .adea-about-lbl{--adea-about-lbl-size:14px} } /* ---------- reduced-motion ed editor ---------- Le entrate le spegne già il meccanismo condiviso (adea-tokens §8). Qui resta solo l'ingrandimento della foto in hover, come fa l'originale (r.653–654). */ @media(prefers-reduced-motion:reduce){ .adea-about-image{transition:none!important} .adea-about-visual:hover .adea-about-image{transform:none!important} }