/* ========================================================= Form eventpills — stile boxato, palette Primo Round --------------------------------------------------------- ACCESSIBILITA' (NORMA §2.9). I colori qui dentro NON sono quelli del brand cosi' come sono: l'arancio #E86E30 fa 3,13:1 su bianco e 2,57:1 sul beige dei consensi, cioe' sotto il 4,5:1 di WCAG 1.4.3. Le varianti usate qui sono calcolate e verificate: --ep-orange-txt #B04814 testo: 5,55 su bianco · 4,55 su beige --ep-orange-btn #B5460F fondo: 5,46 col bianco sopra --ep-teal-ui #2E6B76 bordi: 6,03 su bianco · 4,95 su beige L'arancio di brand resta SOLO dove non porta testo (il filetto in alto), dove il contrasto non e' un requisito. Se tocchi un colore, ricalcola il rapporto: non fidarti dell'occhio. ========================================================= */ .ep-form{ --ep-orange:#E86E30; /* brand, solo decorativo */ --ep-orange-txt:#B04814; /* testo arancio, a norma su bianco E su beige */ --ep-orange-btn:#B5460F; /* fondo bottone, testo bianco sopra */ --ep-orange-btn-h:#93380B; /* hover */ --ep-teal-ui:#2E6B76; /* focus e bordi */ --ep-dark:#3C3C3B; --ep-muted:#6b6b68; --ep-beige:#EAE9E0; --ep-grey:#637A85; --ep-line:#e2e0d8; background:#fff; border:1px solid var(--ep-line); border-radius:10px; padding:32px 30px 26px; margin:34px 0; box-shadow:0 1px 2px rgba(60,60,59,.05), 0 8px 24px rgba(60,60,59,.06); font-family:inherit; color:var(--ep-dark); border-top:5px solid var(--ep-orange); } .ep-form__eyebrow{ margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ep-orange-txt); } .ep-form__title{ margin:0 0 10px; font-size:26px; line-height:1.2; font-weight:800; } .ep-form__lead{ margin:0 0 24px; font-size:16px; line-height:1.6; color:#5a5a58; } /* Testo per soli lettori di schermo (es. «si apre in una nuova scheda»). */ .ep-form__sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .ep-form__row--split{ display:flex; gap:14px; } .ep-form__row--split .ep-form__field{ flex:1 1 0; min-width:0; } @media (max-width:520px){ .ep-form__row--split{ display:block; } } .ep-form__field{ margin-bottom:16px; } .ep-form__field label{ display:block; margin-bottom:6px; font-size:14px; font-weight:700; } .ep-form__req{ color:var(--ep-orange-txt); } .ep-form__field input[type=text], .ep-form__field input[type=email]{ width:100%; box-sizing:border-box; padding:12px 14px; font-size:16px; font-family:inherit; color:var(--ep-dark); /* bordo a 3,33:1 sul bianco: WCAG 1.4.11 chiede 3:1 per i confini dei controlli. Il #cfcdc4 di prima faceva 1,59:1 — il campo si intuiva dall'ombra, non si vedeva. */ border:1px solid #8f8d84; border-radius:6px; background:#fff; transition:border-color .15s, box-shadow .15s; } .ep-form__field input[aria-invalid="true"]{ border-color:#c0392b; border-width:2px; } .ep-form__hint{ margin:6px 0 0; font-size:13px; color:var(--ep-muted); } .ep-form__captcha{ margin:18px 0 20px; } /* ---- gruppo consensi: fieldset senza vestito, legend per i soli AT ---- */ .ep-form__consensi{ border:0; padding:0; margin:0; min-width:0; } .ep-form__legend{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .ep-form__consent{ display:flex; gap:11px; align-items:flex-start; padding:12px 14px; margin-bottom:10px; background:var(--ep-beige); border-radius:6px; } .ep-form__consent input{ flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; accent-color:var(--ep-orange-txt); } .ep-form__consent label{ font-size:14px; line-height:1.5; cursor:pointer; } .ep-form__consent label strong{ display:block; margin-bottom:2px; } /* Il link NON si distingue per colore soltanto (WCAG 1.4.1): eredita il testo scuro — 9,06:1 sul beige — ed e' sottolineato. Cosi' resta leggibile anche a chi non percepisce la differenza di tinta. */ .ep-form__consent a{ color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } .ep-form__consent a:hover{ text-decoration-thickness:2px; } .ep-form__submit{ display:block; width:100%; margin-top:18px; padding:15px 24px; font-family:inherit; font-size:17px; font-weight:800; letter-spacing:.01em; color:#fff; background:var(--ep-orange-btn); border:0; border-radius:6px; cursor:pointer; transition:background .15s, transform .05s; } .ep-form__submit:hover{ background:var(--ep-orange-btn-h); } .ep-form__submit:active{ transform:translateY(1px); } .ep-form__submit[disabled]{ background:var(--ep-grey); cursor:not-allowed; } .ep-form__legal{ margin:14px 0 0; font-size:12.5px; line-height:1.5; color:var(--ep-muted); } .ep-form__legal a{ color:var(--ep-muted); text-decoration:underline; } .ep-form__msg{ margin-top:16px; padding:14px 16px; border-radius:6px; font-size:15px; line-height:1.5; } .ep-form__msg--ok{ background:#eef7f0; border-left:4px solid #2f7d45; } .ep-form__msg--ko{ background:#fdf0ee; border-left:4px solid #c0392b; } /* HONEYPOT — fuori dallo schermo, invisibile agli umani, appetitoso per i bot. ⚠️ NON RIMUOVERE E NON RINOMINARE. Se questa regola sparisce, il campo trappola diventa VISIBILE: un utente vero lo compila, l'endpoint risponde 200 finto e il suo lead viene buttato via SENZA che nessuno se ne accorga — niente errore, niente riga nel registro, niente contatto su Brevo. E' successo il 21/08/2026: riscrivendo questo file la regola e' stata persa. Il collaudo dell'accessibilita' guardava il MARKUP (aria-hidden, tabindex=-1), che era giusto, e non si accorgeva che il campo si vedeva. */ .ep-form__hp{ position:absolute !important; left:-9999px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; } /* ---- FOCUS VISIBILE SU TUTTO CIO' CHE E' INTERATTIVO (WCAG 2.4.7) ---- Prima l'outline era rimosso sui campi di testo e sostituito da un'ombra, mentre checkbox, bottone e link restavano con l'outline di sistema: tre comportamenti diversi nello stesso form. Ora l'anello e' uno solo, ed e' sempre presente. :focus-visible non si attiva col mouse, quindi non sporca l'interazione col puntatore. */ .ep-form :focus-visible{ outline:3px solid var(--ep-teal-ui); outline-offset:2px; border-radius:4px; } .ep-form__field input:focus-visible{ outline:3px solid var(--ep-teal-ui); outline-offset:1px; border-color:var(--ep-teal-ui); } /* Browser senza :focus-visible: meglio un anello sempre che nessun anello. */ @supports not selector(:focus-visible){ .ep-form :focus{ outline:3px solid var(--ep-teal-ui); outline-offset:2px; } } /* Chi ha chiesto meno animazioni non deve subire transizioni. */ @media (prefers-reduced-motion:reduce){ .ep-form *, .ep-form *::before, .ep-form *::after{ transition:none !important; animation:none !important; } .ep-form__submit:active{ transform:none; } } /* Modalita' a contrasto forzato (Windows High Contrast): i colori saltano, i confini vanno ridichiarati o il form diventa una serie di rettangoli vuoti. */ @media (forced-colors:active){ .ep-form__submit{ border:2px solid ButtonText; } .ep-form__consent{ border:1px solid CanvasText; } .ep-form :focus-visible{ outline:3px solid Highlight; } } /* ≤520px: il widget Turnstile è largo 300px FISSI e non si ridimensiona. Con padding 30px il contenuto scende a 283px e il captcha mangia il margine destro. 18px lasciano 307px: ci sta, e il box resta simmetrico. */ @media (max-width:520px){ .ep-form{ padding:26px 18px 22px; } .ep-form__title{ font-size:23px; } .ep-form__lead{ font-size:15px; margin-bottom:20px; } } /* ========================================================= LAYOUT «fascione» — banner full-width, fondo scuro (NORMA §3.3, aggiunto 22/08/2026). Stessi campi/gate/JS di sopra (il markup del
arriva da ep-form/fields.php, condiviso con la card): qui cambia SOLO l'impaginazione, mai la logica di invio. Colori ricalcolati sul fondo REALE (non sul bianco della card): #F37335 su #0E0E0F = 6,72:1 (eyebrow/accent, supera 4,5:1) #FAF6F1 su #0E0E0F = >15:1 (titolo/testo primario) #C9C6BC su #0E0E0F = 11,3:1 (hint/legal, secondario) Se tocchi uno di questi colori, ricalcola — stessa regola della card. ========================================================= */ .ep-form--fascione{ --ep-fascione-bg:#0E0E0F; --ep-fascione-fg:#FAF6F1; --ep-fascione-fg-muted:#C9C6BC; --ep-fascione-accent:#F37335; position:relative; overflow:hidden; width:100%; background:var(--ep-fascione-bg); color:var(--ep-fascione-fg); border:0; border-top:3px solid var(--ep-fascione-accent); border-radius:0; box-shadow:none; margin:0; padding:0; } .ep-form--fascione .ep-form__eyebrow{ color:var(--ep-fascione-accent); } .ep-form--fascione .ep-form__title{ color:var(--ep-fascione-fg); font-size:clamp(26px,3.4vw,34px); margin:0 0 10px; } .ep-form--fascione .ep-form__lead{ color:var(--ep-fascione-fg); margin:0 0 22px; max-width:760px; } .ep-form--fascione .ep-form__req{ color:var(--ep-fascione-accent); } .ep-form--fascione .ep-form__hint, .ep-form--fascione .ep-form__legal{ color:var(--ep-fascione-fg-muted); } .ep-form--fascione .ep-form__legal a{ color:var(--ep-fascione-fg-muted); } /* niente box beige sul fondo scuro: il consenso sta a testo pieno, come faceva il vecchio banner .epr-newsletter. Link sottolineato (1.4.1), non solo colore: eredita il cream, gia' altissimo contrasto. */ .ep-form--fascione .ep-form__consent{ background:transparent; padding:0; margin:0 0 14px; } .ep-form--fascione .ep-form__consent label{ color:var(--ep-fascione-fg); } .ep-form--fascione .ep-form__consent a{ color:inherit; } /* il checkbox nativo prende il colore dall'accent: l'arancio "testo" (--ep-orange-txt) e' verificato sul BIANCO, non sul fondo scuro. */ .ep-form--fascione .ep-form__consent input{ accent-color:var(--ep-fascione-accent); } /* lo sfondo del messaggio di esito resta chiaro (verde/rosa) in ogni layout: il testo deve restare scuro sopra, non ereditare il cream del fascione. */ .ep-form--fascione .ep-form__msg{ color:var(--ep-dark); } /* il teal di focus e' verificato sul bianco/beige (6,03 / 4,95): sul quasi-nero il margine e' troppo sottile (3,2:1). Sul fascione l'anello e' color crema. */ .ep-form--fascione :focus-visible{ outline-color:var(--ep-fascione-fg); } .ep-form__illustr{ position:absolute; top:8px; right:-12px; width:360px; height:auto; z-index:1; pointer-events:none; } .ep-form--fascione__in{ position:relative; z-index:2; display:flex; align-items:center; gap:44px; flex-wrap:wrap; padding:48px 44px; } /* 22/08/2026 sera: allargato su richiesta di Marco (il fascione, alzato per 3 consensi invece di 1, lasciava molto nero inutilizzato verso il cavo — che resta comunque posizionato in absolute sulla sezione, non su questa colonna, quindi allargare qui non lo tocca). Da 640/560 a 820/780px. */ .ep-form--fascione__main{ flex:1 1 520px; min-width:0; max-width:820px; } /* Nome|Cognome sono gia' in riga in ogni layout (.ep-form__row--split). Qui in piu': Email e bottone sulla STESSA riga — via grid-area, senza toccare l'ordine del markup (identico a fields.php nella card). */ .ep-form--fascione .ep-form__body{ display:grid; grid-template-columns:1fr auto; gap:12px 14px; grid-template-areas: "row row" "email btn" "hp hp" "captcha captcha" "consensi consensi" "legal legal" "msg msg"; max-width:780px; } .ep-form--fascione .ep-form__row--split{ grid-area:row; margin:0; } .ep-form--fascione .ep-form__field--email{ grid-area:email; margin:0; min-width:220px; } .ep-form--fascione .ep-form__submit{ grid-area:btn; width:auto; margin:0; align-self:end; white-space:nowrap; } .ep-form--fascione .ep-form__hp{ grid-area:hp; } .ep-form--fascione .ep-form__captcha{ grid-area:captcha; margin:2px 0; } .ep-form--fascione .ep-form__consensi{ grid-area:consensi; } .ep-form--fascione .ep-form__legal{ grid-area:legal; margin-top:4px; } .ep-form--fascione .ep-form__msg{ grid-area:msg; margin:8px 0 0; } /* hint_email vuoto per scelta (banner compatto, il "lead" gia' dice tutto): l'elemento resta nel DOM (nessun campo per un lettore di schermo cambia forma da form a form) ma non deve aprire una riga vuota nella griglia. */ .ep-form--fascione .ep-form__hint:empty{ display:none; } @media (max-width:820px){ .ep-form--fascione__in{ padding:36px 26px; gap:26px; } .ep-form--fascione__main{ max-width:none; } .ep-form--fascione .ep-form__body{ max-width:none; } .ep-form__illustr{ width:170px; top:-70px; right:16px; } } @media (max-width:600px){ .ep-form--fascione .ep-form__body{ grid-template-columns:1fr; grid-template-areas:"row" "email" "btn" "hp" "captcha" "consensi" "legal" "msg"; } .ep-form--fascione .ep-form__submit{ width:100%; } .ep-form__illustr{ display:none; } }