/* Theme Name: Hello Elementor Child - Pablo Beer Theme URI: https://pablobeer.it/ Description: Tema figlio di Hello Elementor per pablobeer.it. Tutte le personalizzazioni del sito vivono qui, cosi un aggiornamento del tema padre non le cancella. Author: Antonello Zaccaria Template: hello-elementor Version: 1.4.1 Text Domain: hello-theme-child License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ /* ========================================================================== Banner cookie - contrasto del pannello preferenze (29.07.2026) -------------------------------------------------------------------------- Complianz genera .cmplz-categories .cmplz-category con sfondo rgba(239,239,239,.5): composito sul banner #0C0C0C diventa circa #7D7D7D, e il testo #A5A5A5 sopra scendeva a 1,67:1 (soglia WCAG AA: 4,5:1). Quel valore e fisso nel CSS generato dal plugin, non esiste un'impostazione: si corregge solo da qui. Non rimettere queste regole nei file di uploads/complianz/css/: vengono rigenerati a ogni salvataggio delle impostazioni e sparirebbero. Colori presi dalla palette gia in uso nel banner. Risultato: 7,07:1 sui testi, 10,51:1 sul «​Sempre attivo». ========================================================================== */ body .cmplz-cookiebanner { --cmplz_category_header_always_active_color: #C9C9C9; --cmplz_slider_inactive_color: #6B6B6B; } body .cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: #1A1A1A; border: 1px solid #2E2E2E; border-radius: 4px; } /* ===================================================================== PABLO BEER - «LO SCATTO SI SVILUPPA» (29.07.2026) Micro-interazione del pulsante «Invia la tua foto» Widget form Elementor f6df1a2 - home (pagina 6) Racconto in tre tempi: riposo -> poche bollicine rade che salgono (birra + grana pellicola) hover -> un fronte di luce attraversa il pulsante dal centro ai bordi, le staffe di messa a fuoco si chiudono con uno scatto, il bordo tratteggiato si accende, il testo va a fuoco rilascio -> il lampo del flash Il colore di fondo NON e' scritto qui, in nessuno stato: lo decide il widget Elementor (Stile -> Sfondo, normale e hover). Questo foglio si occupa solo della luce che ci passa sopra. Nessuna modifica all'HTML: tutto su pseudo-elementi. Specificita' (0,5,1): batte le regole generate da Elementor (0,5,0), quindi vince a prescindere dall'ordine di caricamento dei CSS - inclusa la transizione da 1000ms impostata nel widget. ===================================================================== */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"] { --pb-cream: #FFEFD6; --pb-grain-time: 11s; position: relative; overflow: hidden; /* ritaglia i livelli interni; le ombre esterne restano */ isolation: isolate; -webkit-tap-highlight-color: transparent; transform: translateZ(0); /* background-color e' in elenco solo per la DURATA della dissolvenza: il colore in se' resta quello del widget. Toglierlo dall'elenco significherebbe niente transizione e cambio di tinta di scatto. */ transition: transform .45s cubic-bezier(.22,.9,.24,1.06), box-shadow .45s ease, border-color .45s ease, background-color .45s ease; } /* --------------------------------------------------------------------- 1. BOLLICINE RADE - sei in tutto, che salgono (stato di riposo) Erano sette trame ripetute su tutta la superficie: ognuna disegnava una decina di bolle, oltre settanta in tutto - troppo fitte. Ora ogni trama ha un tile largo quanto il pulsante (100%) e piu' alto del pulsante stesso, quindi disegna UNA bolla sola. Sei livelli = sei bolle al massimo; e poiche' i tile sono piu' alti della superficie visibile, ciascuna esce dall'alto e resta fuori un momento prima di rientrare dal basso: in media se ne vedono tre o quattro. La posizione orizzontale sta dentro il gradiente (circle at 9% 62%) ed e' in percentuale: le bolle restano distribuite anche quando il pulsante si stringe sul telefono. La verticale (62%) e' solo la fase di partenza. Le velocita' sono diverse (da 8,7 a 15,6 px/s) e le bolle piu' grandi salgono piu' in fretta, come nella birra. Ogni salita e' un multiplo esatto dell'altezza del proprio tile, quindi il ciclo chiude senza salti. A meta' corsa ognuna scarta di due o tre px di lato e torna: e' quel pendolio a togliere loro l'aria di riga verticale. Nota: un background-position con !important batterebbe l'animazione (le regole !important vincono sulle animazioni). Qui non ce n'e'. --------------------------------------------------------------------- */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 9% 62%, rgba(255,243,226,.92) 0 2.5px, rgba(255,243,226,.28) 3.3px, transparent 4.1px), radial-gradient(circle at 26% 24%, rgba(255,228,196,.76) 0 1.5px, transparent 2.2px), radial-gradient(circle at 41% 78%, transparent 0 2.5px, rgba(255,236,212,.74) 2.9px 3.7px, transparent 4.4px), radial-gradient(circle at 59% 40%, rgba(255,238,216,.86) 0 2.0px, transparent 2.7px), radial-gradient(circle at 78% 66%, rgba(255,224,190,.72) 0 1.4px, transparent 2.0px), radial-gradient(circle at 91% 14%, rgba(255,216,172,.66) 0 1.2px, transparent 1.8px); background-size: 100% 86px, 100% 112px, 100% 74px, 100% 128px, 100% 96px, 100% 104px; background-position: 0 0; opacity: .58; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]::before { animation: pb-bolle var(--pb-grain-time) linear infinite; } } /* Salite per ciclo - 172, 112, 148, 128, 96, 104 px: 2, 1, 2, 1, 1 e 1 volta l'altezza del rispettivo tile. Al 50% la y e' esattamente a meta' di ogni salita, quindi la corsa resta lineare, e la x e' al massimo dello scarto laterale. */ @keyframes pb-bolle { 0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px; } 50% { background-position: 3px -86px, -2px -56px, 4px -74px, -3px -64px, 2px -48px, -2px -52px; } 100% { background-position: 0px -172px, 0px -112px, 0px -148px, 0px -128px, 0px -96px, 0px -104px; } } /* --------------------------------------------------------------------- 2. IL FRONTE DI SVILUPPO - un'onda di luce che attraversa e svanisce Solo un anello luminoso: il centro e' trasparente, quindi il fondo del pulsante resta intatto. background-size animato, cosi' il fronte resta a distanza relativa fissa dal centro e cresce con il disco - come il bordo di un'immagine che compare nello sviluppo. --------------------------------------------------------------------- */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"] .elementor-button-content-wrapper::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(circle closest-side, rgba(255,236,214,0) 0 58%, rgba(255,236,214,.55) 76%, rgba(255,214,180,.28) 89%, rgba(255,200,160,0) 100%); background-repeat: no-repeat; background-position: 50% 50%; background-size: 0% 0%; opacity: 0; } /* --------------------------------------------------------------------- 3. STAFFE DI MESSA A FUOCO - otto tratti agli angoli che si chiudono con un piccolo scatto oltre il bersaglio (overshoot 1.22) --------------------------------------------------------------------- */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"] .elementor-button-content-wrapper::after { content: ""; position: absolute; inset: 9px 14px; z-index: 2; pointer-events: none; --c: var(--pb-cream); --L: 17px; /* lunghezza del braccio */ --t: 2px; /* spessore */ background: linear-gradient(var(--c),var(--c)) 0 0 / var(--L) var(--t) no-repeat, linear-gradient(var(--c),var(--c)) 0 0 / var(--t) var(--L) no-repeat, linear-gradient(var(--c),var(--c)) 100% 0 / var(--L) var(--t) no-repeat, linear-gradient(var(--c),var(--c)) 100% 0 / var(--t) var(--L) no-repeat, linear-gradient(var(--c),var(--c)) 0 100% / var(--L) var(--t) no-repeat, linear-gradient(var(--c),var(--c)) 0 100% / var(--t) var(--L) no-repeat, linear-gradient(var(--c),var(--c)) 100% 100% / var(--L) var(--t) no-repeat, linear-gradient(var(--c),var(--c)) 100% 100% / var(--t) var(--L) no-repeat; opacity: 0; transform: scale(1.09); transition: opacity .26s ease, transform .5s cubic-bezier(.16,.9,.2,1.22); } /* --------------------------------------------------------------------- 4. IL LAMPO - parte al RILASCIO, non alla pressione. Lo stato di riposo e' gia' quello finale (grande e trasparente): :active ci salta sopra istantaneamente (transition:none) e al rilascio il lampo si espande da solo. Cosi' l'animazione si completa sempre, anche con un clic velocissimo. --------------------------------------------------------------------- */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 16%, rgba(255,242,222,.62) 36%, rgba(255,255,255,0) 64%); opacity: 0; transform: scale(2.9); transition: transform .72s cubic-bezier(.08,.72,.2,1), opacity .72s ease-out; } .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:active::after { opacity: 1; transform: scale(.18); transition: none; } /* --------------------------------------------------------------------- 5. L'ETICHETTA CHE VA A FUOCO - a riposo un alone caldo (immagine non ancora nitida), all'hover l'alone si spegne e le lettere respirano. --------------------------------------------------------------------- */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"] .elementor-button-text { position: relative; z-index: 3; text-shadow: 0 0 12px rgba(255,214,178,.55), 0 0 28px rgba(255,120,40,.30); transition: letter-spacing .55s cubic-bezier(.2,.8,.2,1), text-shadow .40s ease; } /* ===================================================================== STATO ATTIVO - hover, tastiera e tocco insieme ===================================================================== */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:hover, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:focus-visible, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:active { /* nessun background-color: in hover il fondo e' quello impostato nel widget */ border-color: var(--pb-cream); /* il bordo tratteggiato, finora invisibile, si rivela */ transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(255,70,20,.70), 0 0 44px -14px rgba(255,140,50,.50), 0 0 0 1px rgba(255,239,214,.16); } /* il fronte di sviluppo attraversa e se ne va: il rosso resta quello */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:hover .elementor-button-content-wrapper::before, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:focus-visible .elementor-button-content-wrapper::before, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:active .elementor-button-content-wrapper::before { animation: pb-develop .9s cubic-bezier(.18,.82,.22,1) forwards; } @keyframes pb-develop { 0% { background-size: 0% 0%; opacity: 0; } 14% { opacity: 1; } 62% { opacity: 1; } 100% { background-size: 340% 1150%; opacity: 0; } } /* le staffe si chiudono */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:hover .elementor-button-content-wrapper::after, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:focus-visible .elementor-button-content-wrapper::after, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:active .elementor-button-content-wrapper::after { opacity: .95; transform: scale(1); } /* Le bollicine NON cambiano in hover: restano come a riposo, per scelta. E' l'unico elemento che non reagisce - il fondo vivo su cui succede tutto il resto. */ /* il testo va a fuoco: l'alone si spegne, le lettere respirano */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:hover .elementor-button-text, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:focus-visible .elementor-button-text, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:active .elementor-button-text { letter-spacing: .055em; text-shadow: 0 1px 0 rgba(120,0,0,.38); } /* pressione: il pulsante cede. Il colore non cambia: a sovraesporre ci pensa il lampo bianco del livello 4. */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:active { transform: translateY(-1px) scale(.985); transition-duration: .06s; } /* ===================================================================== ACCESSIBILITA' ===================================================================== */ .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:focus-visible { outline: 3px solid var(--pb-cream); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"], .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]::before, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]::after, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"] .elementor-button-content-wrapper::before, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"] .elementor-button-content-wrapper::after, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"] .elementor-button-text { animation: none !important; transition-duration: .12s !important; } .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:hover, .elementor-6 .elementor-element.elementor-element-f6df1a2 button.elementor-button[type="submit"]:focus-visible { transform: none; } } /* ===================================================================== AGE GATE - verifica dell'eta' (01.08.2026) --------------------------------------------------------------------- 1) SEQUENZA CON COMPLIANZ. Il banner cookie ha z-index 99999, il wrapper dell'age gate 10000: senza questa regola il banner cookie esce DAVANTI alla verifica dell'eta'. Age Gate mette la classe age-gate__restricted su finche' la verifica e' aperta e la toglie quando viene superata, quindi il banner ricompare da solo: nessun JavaScript e nessuno stato di Complianz toccato. NON usare cmplz_set_banner_status('dismissed') per ottenere lo stesso effetto: scrive il cookie cmplz_banner-status e il consenso non verrebbe piu' chiesto (complianz.js, riga 1488). Regge sul piano legale perche' su questo sito nessun tracciante parte prima del consenso: non c'e' GA4 ne' alcun tag di terze parti. 2) IDENTITA' VISIVA. La verifica non e' una finestra di sistema: e' la prima schermata del sito e usa il suo stesso linguaggio. Fondo nero + pattern floreale BG_fondo-pablo_01 al 35% (impostati dalle opzioni del plugin), pannello #0C0C0C, logo SVG, domanda in Rubik Marker Hatch obliquo maiuscolo rosso come i titoli della home, chiusa in Roboto Slab spaziato come gli overline. Il plugin scrive :root{--ag-background-color, --ag-form-background, --ag-text-color} dalle sue opzioni; qui usiamo html:root per vincere a parita' di specificita' e per le variabili che non copre. ===================================================================== */ html.age-gate__restricted .cmplz-cookiebanner, html.age-gate__restricted #cmplz-manage-consent { display: none !important; } /* Rubik Marker Hatch e Roboto Slab sono self-hosted da Elementor, ma Elementor li mette in coda solo dove un widget li usa: sulla privacy o sulla cookie policy non ci sarebbero. L'age gate sta su ogni pagina, quindi li dichiariamo qui puntando agli stessi file - stessa risorsa, stessa cache, nessun download in piu' dove Elementor li carica gia'. */ @font-face { font-family: 'Rubik Marker Hatch'; font-style: normal; font-weight: 400; font-display: swap; src: url(/wp-content/uploads/elementor/google-fonts/fonts/rubikmarkerhatch-e0a80e0f.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } html:root { --ag-form-max-width: 440px; --ag-form-padding: 2.5rem 2rem 2.25rem; --ag-form-radius: 2px; /* --ag-form-border-width e' obbligatoria: la regola .age-gate del plugin dichiara border-width DOPO border, quindi senza questa il bordo viene riazzerato a 0 e --ag-form-border non ha alcun effetto visibile. */ --ag-form-border: 1px solid #1E1E1E; --ag-form-border-width: 1px; --ag-form-shadow: 0 24px 70px rgba(0,0,0,.75); --ag-logo-max-width: 200px; --ag-text-heading-margin: 0; --ag-button-gap: 14px; --ag-button-radius: 2px; --ag-button-padding: .75rem 2rem; --ag-button-size: .95rem; --ag-button-weight: 800; --ag-text-error-color: #FF2835; --ag-text-additional-size: .7rem; } .age-gate { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; } /* Il fregio del sito sotto il logo, come sulla home. E' decorativo: background-image e non , cosi' gli screen reader lo ignorano. */ .age-gate__heading { margin: 0 0 1.6rem; padding: 0 0 1.5rem; position: relative; } .age-gate__heading::after { background-image: url(/wp-content/uploads/2026/07/decor_01.svg); background-position: center; background-repeat: no-repeat; background-size: contain; bottom: 0; content: ""; height: 18px; left: 50%; opacity: .5; position: absolute; transform: translateX(-50%); width: 120px; } /* La domanda: il carattere display del sito. Rubik Marker Hatch non ha un corsivo vero - il sito stesso usa l'obliquo sintetico, e qui facciamo lo stesso. Il rosso #D9000D su #0C0C0C da' 3,69:1: sotto la soglia per il testo normale, sopra quella del testo grande, per questo la misura non scende mai sotto i 24px nemmeno su schermo piccolo. */ .age-gate__challenge { color: #D9000D; font-family: "Rubik Marker Hatch", "Plus Jakarta Sans", sans-serif; font-size: 2rem; font-style: italic; font-weight: 400; letter-spacing: .01em; line-height: 1.12; margin: 0 0 1.9rem; text-transform: uppercase; } /* Si': l'azione attesa. Bianco su #D9000D e' 5,31:1. */ button.age-gate__submit--yes { background-color: #D9000D; color: #FFFFFF; min-width: 8rem; } button.age-gate__submit--yes:hover, button.age-gate__submit--yes:focus-visible { background-color: #FF2835; color: #FFFFFF; } /* No: pari dignita' visiva, non un ripensamento. #A5A5A5 su #0C0C0C e' 7,94:1, piu' leggibile del bianco sul rosso. */ button.age-gate__submit--no { background-color: transparent; border: 1px solid #2E2E2E; color: #A5A5A5; min-width: 8rem; } button.age-gate__submit--no:hover, button.age-gate__submit--no:focus-visible { background-color: #1A1A1A; border: 1px solid #4A4A4A; color: #FFFFFF; } button.age-gate__submit--yes, button.age-gate__submit--no { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } button.age-gate__submit--yes:focus-visible, button.age-gate__submit--no:focus-visible { outline: 3px solid var(--pb-cream); outline-offset: 3px; } /* Il richiamo al consumo responsabile, nel registro degli overline del sito: Roboto Slab maiuscolo spaziato. #7A7A7A su #0C0C0C e' 4,55:1. */ .age-gate__additional-information { border-top: 1px solid #1E1E1E; color: #7A7A7A; font-family: "Roboto Slab", Georgia, serif; letter-spacing: .2em; line-height: 1.7; margin: 2rem 0 0; padding: 1.2rem 0 0; text-transform: uppercase; } .age-gate__errors { margin: 0 0 1.2rem; } .age-gate__error { font-family: "Plus Jakarta Sans", sans-serif; font-size: .9rem; line-height: 1.5; } @media (max-width: 480px) { html:root { --ag-form-padding: 2rem 1.4rem 1.75rem; --ag-logo-max-width: 165px; --ag-button-padding: .75rem 1.5rem; } .age-gate__challenge { font-size: 1.6rem; } .age-gate__buttons { flex-direction: column; width: 100%; } button.age-gate__submit--yes, button.age-gate__submit--no { width: 100%; } } @media (prefers-reduced-motion: reduce) { html:root { --ag-transition-duration: .01s; } button.age-gate__submit--yes, button.age-gate__submit--no { transition: none; } }