/** * Branike Business — F3 Konverzia: oznamovacia lišta + CTA. * * Farby idú cez premenné s fallbackom na paletu témy (Blocksy), takže lišta * vyzerá ako súčasť webu aj keď admin nič nenastaví. */ /* ── Oznamovacia lišta ─────────────────────────────────────────────── */ /* Zavretá lišta: trieda na padne PRED paintom → žiadny flash, žiadny CLS. */ .bbiz-ab-off .bbiz-ab { display: none; } .bbiz-ab { --bbiz-ab-bg: var(--theme-palette-color-1, #7c3aed); --bbiz-ab-fg: #fff; background: var(--bbiz-ab-bg); color: var(--bbiz-ab-fg); font-size: 15px; line-height: 1.45; } .bbiz-ab__inner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 10px 44px 10px 16px; /* miesto vpravo pre zatváracie tlačidlo */ position: relative; } .bbiz-ab__text { margin: 0; } .bbiz-ab__cta { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--bbiz-ab-fg); color: var(--bbiz-ab-bg); text-decoration: none; font-weight: 600; white-space: nowrap; } .bbiz-ab__cta:hover, .bbiz-ab__cta:focus-visible { opacity: .88; } .bbiz-ab__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .bbiz-ab__close:hover { background: rgba(255, 255, 255, .18); } /* Viditeľný fokus je podmienka WCAG 2.1 — nikdy ho neruš bez náhrady. */ .bbiz-ab__close:focus-visible, .bbiz-ab__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Spodná poloha = fixed → nezaberá miesto v toku, teda ani neposúva obsah. */ .bbiz-ab--bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; box-shadow: 0 -2px 12px rgba(0, 0, 0, .16); } @media (max-width: 600px) { .bbiz-ab { font-size: 14px; } .bbiz-ab__inner { gap: 10px; padding: 10px 42px 10px 12px; } } /* ── CTA sekcia ────────────────────────────────────────────────────── */ .bbiz-cta { --bbiz-accent: var(--theme-palette-color-1, #7c3aed); padding: clamp(28px, 5vw, 56px) 20px; border-radius: 14px; background: var(--theme-palette-color-6, #f6f5fb); } .bbiz-cta.is-center { text-align: center; } .bbiz-cta.is-left { text-align: left; } .bbiz-cta__heading { margin: 0 0 10px; font-size: clamp(22px, 3vw, 32px); line-height: 1.2; } .bbiz-cta__text { margin: 0 auto 20px; max-width: 60ch; } .bbiz-cta.is-left .bbiz-cta__text { margin-left: 0; } .bbiz-cta__actions { margin: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; } .bbiz-cta.is-left .bbiz-cta__actions { justify-content: flex-start; } .bbiz-cta__btn { display: inline-block; padding: 12px 26px; border-radius: 8px; background: var(--bbiz-accent); border: 2px solid var(--bbiz-accent); color: #fff; text-decoration: none; font-weight: 600; transition: transform .15s ease, opacity .15s ease; } .bbiz-cta__btn:hover { transform: translateY(-1px); opacity: .92; } .bbiz-cta.is-outline .bbiz-cta__btn { background: transparent; color: var(--bbiz-accent); } .bbiz-cta.is-outline .bbiz-cta__btn:hover { background: var(--bbiz-accent); color: #fff; } .bbiz-cta.is-soft { background: transparent; padding-left: 0; padding-right: 0; } .bbiz-cta__link { color: var(--bbiz-accent); text-decoration: underline; text-underline-offset: 3px; } .bbiz-cta__btn:focus-visible, .bbiz-cta__link:focus-visible { outline: 2px solid var(--bbiz-accent); outline-offset: 3px; } /* Pohyb je dekorácia — kto ho má vypnutý v systéme, nesmie ho dostať. */ @media (prefers-reduced-motion: reduce) { .bbiz-cta__btn { transition: none; } .bbiz-cta__btn:hover { transform: none; } }