/* HI Promo Block — nessun font-family: eredita dal tema del sito. Classi dedicate (prefisso hipb-) + !important per non farsi sovrascrivere dal tema. */ .hipb-block { position: absolute !important; z-index: 9999 !important; box-sizing: border-box !important; width: var(--hipb-width, 440px) !important; max-width: calc(100% - 32px) !important; margin: 0 !important; padding: 22px 22px 18px !important; background: var(--hipb-bg, #ffffff) !important; color: var(--hipb-text, #1f1f1f) !important; border-radius: var(--hipb-radius, 10px) !important; box-shadow: 0 14px 44px rgba(0, 0, 0, .22) !important; overflow: visible !important; text-align: left !important; line-height: 1.2 !important; } .hipb-block *, .hipb-standalone * { box-sizing: border-box !important; } /* Lingue RTL (es. arabo) */ .hipb-block[dir="rtl"] { text-align: right !important; } .hipb-block[dir="rtl"] .hipb-close { left: auto !important; right: 12px !important; } /* Pulsante chiusura */ .hipb-block .hipb-close { position: absolute !important; top: 8px !important; left: 12px !important; width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; font-size: 22px !important; color: inherit !important; background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer !important; opacity: .6 !important; } .hipb-block .hipb-close:hover { opacity: 1 !important; } /* Riga superiore: badge + testi affiancati */ .hipb-block .hipb-top { display: flex !important; align-items: center !important; gap: 16px !important; margin: 6px 0 16px !important; } /* Badge circolare (usato nel blocco e nello shortcode [hi_promo_sconto]) */ .hipb-badge { flex: 0 0 auto !important; position: relative !important; box-sizing: border-box !important; width: var(--hipb-badge-size, 84px) !important; height: var(--hipb-badge-size, 84px) !important; border-radius: 50% !important; background: var(--hipb-badge, #f4c020) !important; color: var(--hipb-badge-text, #1f1f1f) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; } .hipb-badge-value { display: inline-flex !important; align-items: flex-start !important; font-size: min(40px, calc(var(--hipb-badge-size, 84px) * .48)) !important; line-height: .9 !important; font-weight: 800 !important; } .hipb-badge-pct { font-size: min(18px, calc(var(--hipb-badge-size, 84px) * .21)) !important; font-weight: 800 !important; margin-top: .15em !important; } .hipb-badge-off { font-size: min(14px, calc(var(--hipb-badge-size, 84px) * .16)) !important; font-weight: 700 !important; letter-spacing: .5px !important; margin-top: 2px !important; } /* Testi */ .hipb-block .hipb-head { flex: 1 1 auto !important; min-width: 0 !important; } .hipb-block .hipb-kicker { margin: 0 0 2px !important; padding: 0 !important; font-style: italic !important; font-size: 17px !important; font-weight: 400 !important; } .hipb-block .hipb-title { margin: 0 0 4px !important; padding: 0 !important; font-size: 21px !important; line-height: 1.05 !important; font-weight: 800 !important; text-transform: uppercase !important; color: inherit !important; } .hipb-block .hipb-subtitle { margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 600 !important; text-transform: uppercase !important; } /* Timer */ .hipb-timer { display: flex !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .hipb-timer .hipb-unit { flex: 1 1 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } .hipb-timer .hipb-circle { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 62px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; background: var(--hipb-timer-bg, #2b2b2b) !important; color: var(--hipb-timer-text, #ffffff) !important; } .hipb-timer .hipb-num { font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; color: inherit !important; } .hipb-timer .hipb-lbl { margin-top: 6px !important; font-size: 9px !important; letter-spacing: .5px !important; opacity: .7 !important; text-transform: uppercase !important; text-align: center !important; } /* Validità */ .hipb-block .hipb-validity { margin: 14px 0 0 !important; padding: 0 !important; font-size: 10px !important; letter-spacing: .3px !important; opacity: .7 !important; text-transform: uppercase !important; } /* Bottone "Vai alla promo" */ .hipb-block .hipb-cta { display: inline-block !important; margin: 14px 0 0 !important; padding: 13px 28px !important; background: var(--hipb-btn-bg, #b89b6a) !important; color: var(--hipb-btn-text, #ffffff) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; text-decoration: none !important; text-align: center !important; line-height: 1 !important; border: 0 !important; border-radius: 0 !important; cursor: pointer !important; transition: opacity .2s ease !important; } .hipb-block .hipb-cta:hover { opacity: .88 !important; } /* Shortcode standalone (pagina offerta): stile timer identico al blocco, ma con cerchi a dimensione fissa perché il contenitore non ha larghezza definita. */ .hipb-standalone-timer { display: inline-block !important; } .hipb-standalone-timer .hipb-timer { gap: 14px !important; } .hipb-standalone-timer .hipb-unit { flex: 0 0 auto !important; } .hipb-standalone-timer .hipb-circle { width: 62px !important; max-width: 62px !important; } .hipb-standalone-percent { font-weight: 800 !important; } /* [hi_promo_sconto]: bollino giallo identico alla homepage */ .hipb-standalone-badge { display: inline-block !important; } /* Ingresso (solo opacità: non tocca il transform del posizionamento) */ @media (prefers-reduced-motion: no-preference) { .hipb-block { animation: hipb-in .35s ease !important; } } @keyframes hipb-in { from { opacity: 0; } to { opacity: 1; } } /* Responsive: solo dimensioni. La posizione è gestita per-dispositivo dallo