/* * Blocco "testo e fotografia affiancati" — dall'originale index.html r.1126–1137 * (miscelazione). Lo stesso blocco torna su **bio** e **apicoltura**: è per * questo che è un widget e non tre. * * Nell'originale è tutto in stili INLINE su una `
`; * l'unica cosa che arriva dal foglio è la classe `.about-grid` (che a ≤960 * manda tutto in colonna con `!important`), la classe `.adea-media` (cornice e * ombra) e il movimento lento della foto. * * Markup in templates/split.php, controlli in includes/widgets/class-split.php. * Nessun .js. * * Cascata MISURATA sull'originale (1440/1024/960/700/560/375): * * >960 ≤960 * imbottitura 70 / 40 / 60 70 / 20 / 60 * colonne 1.05fr .95fr una sola * spazio 60 60 * occhiello 13px · .08em idem * titolo 32px · peso 400 idem * paragrafi 16.5px / 1.65 idem * fotografia 4/3 · raggio 16 idem * * ⚠️ Il titolo è scritto `font-weight:700` INLINE nell'originale, ma vale * **400**: `.page:not([data-page="home"]) h2{font-weight:400!important}` batte * anche lo stile inline, perché `!important`. La stessa regola porta la * spaziatura a **-.03em**. Misurato: 400 e -0.96px su 32px. I 700 dell'inline * sono codice morto. * * ⚠️ Un solo gradino: **960**, e arriva da `.about-grid` con `!important`. * Non è un punto di rottura del Kit. * * Indice: sezione · testo · fotografia · movimento lento · breakpoint · * reduced-motion */ /* ---------- sezione ---------- */ .adea-split{ position:relative;overflow:hidden; max-width:var(--adea-split-maxw,1240px);margin:0 auto; padding:var(--adea-split-pt,70px) var(--adea-split-pad-x,40px) var(--adea-split-pb,60px); display:grid;grid-template-columns:var(--adea-split-cols,1.05fr .95fr); gap:var(--adea-split-gap,60px);align-items:center; 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 */ } /* ⚠️ Il rovesciamento (foto a sinistra) NON si fa con `order`: si stampa la foto prima del testo, come fa l'originale. Con `order` il desktop veniva uguale, ma in colonna no: l'originale non ha nessuna regola d'ordine, quindi sotto 960px la foto resta SOPRA il testo. Con `order` + reset a 0 il testo finiva sopra. Misurato su Apicoltura, dove il rovesciamento c'è davvero. */ /* ---------- testo ---------- */ .adea-split-kicker{ font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600; font-size:13px;letter-spacing:.08em;text-transform:uppercase; color:var(--adea-verde,#42AD59);margin-bottom:12px; } .adea-split-copy h2{ font-family:var(--adea-font-titoli,'Poppins',sans-serif); font-weight:400; /* 400 / -.03em: vedi la nota in testa */ font-size:var(--adea-split-title,32px); /* interlinea e spazio sotto cambiano da pagina a pagina: 32px/1.15/18 su Miscelazione e BIO, 30px/1.18/16 su Apicoltura. Sono controlli. */ line-height:var(--adea-split-title-lh,1.15);letter-spacing:-.03em; color:var(--adea-blu,#004F9E);margin:0 0 var(--adea-split-title-mb,18px); } .adea-split-copy p{font-size:16.5px;line-height:1.65;color:#5b6b78;margin:0 0 16px} .adea-split-copy p:last-child{margin-bottom:0} /* ---------- striscia dei loghi (facoltativa) ---------- Compare solo nella Linea BIO, sotto i paragrafi. Quando c'è, l'ultimo paragrafo prende più aria sotto (26px invece di 0): è così nell'originale. */ .adea-split-copy:has(.adea-split-logos) p:last-of-type{ margin-bottom:var(--adea-split-copy-mb,26px); } .adea-split-logos{ display:flex;align-items:stretch;justify-content:flex-start;flex-wrap:wrap;gap:18px; } .adea-split-logo{ display:flex;align-items:center;justify-content:center;background:#fff; border:1px solid #e8e3dc;border-radius:18px; box-shadow:0 20px 44px -30px rgba(10,37,64,.3); /* riquadro uguale per tutti: loghi verticali e orizzontali risultano otticamente della stessa dimensione invece di seguire la propria altezza */ width:var(--adea-split-logo-w,198px);height:var(--adea-split-logo-h,174px); padding:22px;flex:none; transition:transform .38s var(--adea-ease-spring),box-shadow .38s ease; } .adea-split-logo:hover{transform:translateY(-5px);box-shadow:0 30px 56px -30px rgba(10,37,64,.38)} .adea-split-logo img{ max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block; } /* ---------- fotografia ---------- */ .adea-split-media{ position:relative;overflow:hidden;border-radius:var(--adea-split-radius,16px); aspect-ratio:var(--adea-split-ratio,4/3);background:#dfe9f4; min-height:0; /* senza, `aspect-ratio` cede all'altezza del contenuto */ box-shadow:var(--adea-shadow-frame,0 24px 60px -28px rgba(10,37,64,.4)); transition:box-shadow .4s ease; } /* ⚠️ L'ombra in hover NON è `--adea-shadow-frame-hover` del tema (0 30px 66px -26px): l'originale r.68 usa 0 30px 60px -30px. Misurata. */ .adea-split-media:hover,.adea-split-media:focus-within{ box-shadow:0 30px 60px -30px rgba(10,37,64,.4); } .adea-split-media img{ width:100%;height:100%;object-fit:cover;display:block; max-width:none; /* il Kit dà `max-width:100%` a ogni immagine */ transition:transform .6s cubic-bezier(.22,.8,.3,1); } /* ---------- variante "senza cornice" ---------- Su BIO e Apicoltura la fotografia non ha cornice, ombra, ritaglio né movimento: è l'immagine e basta, alla sua proporzione naturale. */ .adea-split-media--nuda{ border-radius:0;background:none;box-shadow:none;overflow:visible;aspect-ratio:auto; } .adea-split-media--nuda:hover,.adea-split-media--nuda:focus-within{box-shadow:none} .adea-split-media--nuda img{height:auto;object-fit:fill} /* ---------- movimento lento della fotografia ---------- Originale r.522–524: 22s avanti e indietro fra 1 e 1.08. Nell'originale è una regola globale su `.about-grid img`; qui vive dentro il widget. */ @media(prefers-reduced-motion:no-preference){ .adea-split-media:not(.adea-split-media--nuda) img{ animation:adeaSplitKen var(--adea-split-ken,22s) ease-in-out infinite alternate; } } @keyframes adeaSplitKen{from{transform:scale(1)}to{transform:scale(1.08)}} /* nell'editor sta ferma, altrimenti l'anteprima "respira" mentre si lavora */ .elementor-editor-active .adea-split-media img{animation:none!important} /* ---------- breakpoint originale (misurato) ---------- */ @media(max-width:960px){ /* ⚠️ Proprietà, non variabili: i controlli scrivono le variabili su un selettore a due classi e vincerebbero su questa media query. */ .adea-split{ grid-template-columns:1fr; padding-left:var(--adea-split-pad-x-960,20px); padding-right:var(--adea-split-pad-x-960,20px); } } @media(max-width:560px){ /* i riquadri dei loghi diventano due per riga */ .adea-split-logos{gap:12px} .adea-split-logo{ width:calc(50% - 6px);height:var(--adea-split-logo-h-560,132px); padding:16px;border-radius:14px; } } /* ---------- reduced-motion ---------- Come l'originale (r.524 e r.1011): si ferma il movimento lento e il sollevamento dei riquadri dei loghi. L'ombra in hover della foto resta: non è movimento, e l'originale non la elenca. */ @media(prefers-reduced-motion:reduce){ .adea-split-media img{animation:none!important} .adea-split-logo:hover{transform:none!important} }