/* WEBOM Lead Gate — overlay. Blur is applied to body children rather than a wrapper, so the theme's markup does not have to change to accommodate the gate. */ body.wbm-locked { overflow: hidden !important; } body.wbm-locked > *:not(.wbm-gate) { filter: blur(8px); pointer-events: none; user-select: none; } /* CookieYes appends its bar straight to , so the blur rule above would catch it — leaving a gated visitor unable to accept cookies at the very moment the gate is asking them for personal data. It stays live and on top. */ body.wbm-locked > #cookie-law-info-bar, body.wbm-locked > #cookie-law-info-again, body.wbm-locked > .cli-modal { filter: none; pointer-events: auto; user-select: auto; z-index: 1000000; } /* Test-mode bar — also a body child, so it needs the same exemption. */ body.wbm-locked > .wbm-debug { filter: none; pointer-events: auto; user-select: auto; } .wbm-debug { position: fixed; left: 12px; bottom: 12px; z-index: 1000001; display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 10px; background: #b4232a; color: #fff; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .05em; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); } .wbm-debug button { padding: 5px 9px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-weight: 500; cursor: pointer; } .wbm-debug button:hover { background: rgba(255, 255, 255, .3); } /* ── the floating button ─────────────────────────────────────── Replaces the theme's WhatsApp float, in the same corner and at the same size, so the muscle memory of anyone who has used the site survives. */ .wbm-gate-fab { position: fixed; right: 28px; bottom: 28px; z-index: 9998; display: inline-flex; align-items: center; gap: 0; height: 54px; padding: 0 15px; border: 0; border-radius: 27px; background: #16202e; color: #fff; font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; box-shadow: 0 6px 20px rgba(12, 16, 24, .35); transition: gap .22s ease, padding .22s ease, transform .22s ease, box-shadow .22s ease; } .wbm-gate-fab svg { width: 24px; height: 24px; flex: 0 0 auto; } /* The label is folded away and unfurls on hover, so the resting state is the same 54px circle the WhatsApp button was. */ .wbm-gate-fab__label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .22s ease, opacity .18s ease; } .wbm-gate-fab:hover, .wbm-gate-fab:focus-visible { gap: 9px; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(12, 16, 24, .45); } .wbm-gate-fab:hover .wbm-gate-fab__label, .wbm-gate-fab:focus-visible .wbm-gate-fab__label { max-width: 160px; opacity: 1; } body.wbm-locked .wbm-gate-fab { display: none; } @media (max-width: 600px) { .wbm-gate-fab { right: 18px; bottom: 18px; } } /* Only ever rendered when the visitor opened the chat themselves. The timed lock has no close button by design. Scoped under .wbm-gate and given an explicit zero padding: Astra pads every bare `button`, which stretched this one into an ellipse and shoved the glyph off its own centre. Same lesson as the chips — state the box, don't inherit it. */ .wbm-gate .wbm-gate__close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; color: #8b97a8; font: 400 22px/1 system-ui, -apple-system, sans-serif; text-transform: none; letter-spacing: normal; cursor: pointer; transition: background .15s ease, color .15s ease; } .wbm-gate .wbm-gate__close:hover, .wbm-gate .wbm-gate__close:focus-visible { background: #f1f4f9; color: #16202e; } /* The refusal. Quiet, but a real sentence in the reading order — an X in a corner reads as "dismiss this box", which is not the same offer. */ .wbm-gate .wbm-gate__decline { align-self: center; margin: 2px 0 0; padding: 6px 4px; border: 0; background: none; color: #8b97a8; font: inherit; font-size: 13px; text-transform: none; letter-spacing: normal; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .wbm-gate .wbm-gate__decline:hover, .wbm-gate .wbm-gate__decline:focus-visible { color: #16202e; } .wbm-gate { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(12, 16, 24, .55); overscroll-behavior: contain; } .wbm-gate__card { width: 100%; /* One width for every step. The card used to widen for the writing and snap back for the contact fields, which resized the dialog under the visitor between one answer and the next. */ max-width: 760px; /* dvh, not vh. On iOS Safari `vh` is the *large* viewport — the height the page would have with the URL bar hidden — so a card sized in vh is taller than what the visitor can actually see, and the bottom of it (the button, the way out) sits under the browser chrome. dvh is the height that is really there. The vh line stays first for anything that lacks dvh. */ max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); position: relative; display: flex; flex-direction: column; /* A max-height with nothing scrollable inside it does not clip politely — it puts the rest of the card out of reach. Whatever the step and whatever the phone, the card itself can always be scrolled. */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; gap: 12px; padding: 20px 22px; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #16202e; } /* The header is the whole point of the photo: a popup with a face and a name is a person interrupting you, which is forgivable. Without one it is software interrupting you, which is not. */ .wbm-gate__who { display: flex; /* Centred, not top-aligned: the greeting is usually one or two lines, and next to a 44px photo a top-aligned line hangs off the forehead. */ align-items: center; gap: 12px; padding-right: 34px; padding-bottom: 13px; border-bottom: 1px solid #eef2f7; } .wbm-gate__intro { margin: 0; min-width: 0; font-size: 14px; line-height: 1.45; color: #16202e; } .wbm-gate__face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #e8edf4; } .wbm-row__face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #e8edf4; margin-top: 2px; } /* No photo, no broken image — the initials stand in. */ .wbm-gate__face--text, .wbm-row__face--text { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #4a586b; font-size: 15px; } .wbm-row__face--text { font-size: 11px; } .wbm-row { display: flex; align-items: flex-start; gap: 8px; } .wbm-row .wbm-msg--bot { max-width: none; } .wbm-gate__log { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 30vh; max-height: 30dvh; /* The card scrolls now, so the log must not stretch to fill it. */ flex: 0 0 auto; } .wbm-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 15px; } .wbm-msg--bot { align-self: flex-start; background: #f1f4f9; border-bottom-left-radius: 4px; } .wbm-msg--me { align-self: flex-end; margin-left: 34px; background: #16202e; color: #fff; border-bottom-right-radius: 4px; } .wbm-typing { display: flex; gap: 4px; align-items: center; min-height: 20px; } .wbm-typing span { width: 6px; height: 6px; border-radius: 50%; background: #8b97a8; animation: wbm-bounce 1.2s infinite; } .wbm-typing span:nth-child(2) { animation-delay: .15s; } .wbm-typing span:nth-child(3) { animation-delay: .3s; } @keyframes wbm-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } /* Every interactive rule is scoped under .wbm-gate and states its own colour. Astra styles bare `button` globally, colour included, and an unscoped rule loses to it — `font: inherit` carries family and size but never colour. */ .wbm-gate__panel { display: flex; flex-direction: column; gap: 10px; } .wbm-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: stretch; min-height: 210px; } .wbm-split__main { display: flex; flex-direction: column; gap: 10px; } .wbm-why { padding: 13px 15px; border-radius: 12px; background: #f7f9fc; border: 1px solid #e8edf4; font-size: 13px; line-height: 1.45; color: #4a586b; } /* The summary is the heading. On a wide screen it is styled exactly as the

it replaced and the arrow never appears; on a phone it becomes the one line the whole column collapses to. / .wbm-whyhead { margin: 0; font-size: 13.5px; font-weight: 700; color: #16202e; list-style: none; } .wbm-whyhead::-webkit-details-marker { display: none; } .wbm-why[open] .wbm-whyhead { margin-bottom: 8px; } / Beside the form the column is never collapsed, so the heading must not be clickable — a stray click on a heading that quietly folds the reasons away is a bug, not a feature. / @media (min-width: 701px) { .wbm-whyhead { pointer-events: none; } } .wbm-why ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .wbm-why li { position: relative; padding-left: 16px; } .wbm-why li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: #b6c2d2; } .wbm-whystory { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid #e2e8f1; font-style: italic; } .wbm-gate .wbm-input { width: 100%; padding: 11px 14px; border: 1px solid #d6dde8; border-radius: 10px; font: inherit; font-size: 15px; background: #fff; color: inherit; } .wbm-gate .wbm-input:focus { outline: 2px solid #16202e; outline-offset: 1px; border-color: transparent; } .wbm-gate .wbm-input--bad { border-color: #d64545; background: #fff7f7; } / The box is the invitation. A three-line field says "one line will do"; a tall one says "go on". It also stretches to the reasons column beside it. / .wbm-gate .wbm-textarea { resize: vertical; min-height: 132px; flex: 1 1 auto; } / ── voice ─────────────────────────────────────────────────── / .wbm-voiceor { display: flex; align-items: center; gap: 10px; margin: 2px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #8b97a8; } .wbm-voiceor::before, .wbm-voiceor::after { content: ''; flex: 1; height: 1px; background: #e2e8f1; } .wbm-voicebody { display: flex; flex-direction: column; gap: 6px; } .wbm-gate .wbm-voicebtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 16px; border: 1px solid #d6dde8; border-radius: 10px; background: #fff; color: #16202e; font: inherit; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: normal; cursor: pointer; } .wbm-gate .wbm-voicebtn:hover { background: #f7f9fc; } .wbm-gate .wbm-voicebtn.is-rec { border-color: #b4232a; background: #fdf3f3; color: #b4232a; } .wbm-voicedot { width: 10px; height: 10px; border-radius: 50%; background: #b4232a; flex: 0 0 auto; } .wbm-voicebtn.is-rec .wbm-voicedot { animation: wbm-pulse 1.1s ease-in-out infinite; } @keyframes wbm-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } } .wbm-voicehint { margin: 0; font-size: 12.5px; color: #8b97a8; } .wbm-voicetime { font-variant-numeric: tabular-nums; color: #b4232a; font-weight: 600; } .wbm-voicedone { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wbm-voicedone audio { flex: 1 1 180px; height: 36px; min-width: 0; } .wbm-gate .wbm-voicelink { padding: 0; border: 0; background: none; color: #8b97a8; font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; } .wbm-gate .wbm-voicelink:hover { color: #b4232a; } / Honeypot: off-screen rather than display:none, which some bots skip. / .wbm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } / [hidden] is only a display:none default, and any display rule of ours beats it — the consent label would have stayed visible while marked hidden. / .wbm-gate [hidden] { display: none !important; } / Each field arrives rather than appears, so the eye follows it down. / .wbm-step.is-revealed { animation: wbm-slide-in .22s ease-out; } @keyframes wbm-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .wbm-gate .wbm-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #4a586b; } .wbm-gate .wbm-consent input { margin-top: 3px; flex: 0 0 auto; } .wbm-gate .wbm-consent a { color: inherit; text-decoration: underline; } .wbm-gate .wbm-err { margin: 0; font-size: 13.5px; color: #c23434; } .wbm-gate .wbm-btn { padding: 12px 18px; border: 0; border-radius: 10px; background: #16202e; color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; } .wbm-gate .wbm-btn:hover { background: #24344a; } .wbm-gate .wbm-btn--ghost { background: transparent; color: #4a586b; border: 1px solid #d6dde8; font-weight: 400; } .wbm-gate .wbm-btn--ghost:hover { background: #f7f9fc; } / The budget options are a list to read down, not buttons to weigh against each other — no one of them is the recommended answer. / .wbm-gate .wbm-choice { text-align: left; font-size: 14.5px; padding: 11px 15px; color: #16202e; } .wbm-gate .wbm-choice:hover { border-color: #16202e; background: #f7f9fc; } .wbm-spinner { width: 22px; height: 22px; margin: 6px auto; border: 2px solid #d6dde8; border-top-color: #16202e; border-radius: 50%; animation: wbm-spin .7s linear infinite; } @keyframes wbm-spin { to { transform: rotate(360deg); } } / Below the split's comfortable width the two columns stack, and the side column sits under the box rather than pushing it off the first screenful. / @media (max-width: 700px) { .wbm-gatecard { max-width: 460px; / Every value below is a few pixels bought back. Measured on a 375x667 phone the card was 660px of content in a 614px box: the reasons and the way out were not merely below the fold, they were unreachable. / gap: 10px; padding: 14px 16px; } .wbm-gatewho { gap: 10px; padding-bottom: 10px; } .wbm-gateface { width: 38px; height: 38px; } / The log keeps its own scroll and a tighter ceiling. Letting it run free traded 200px of reasons for 76px of chat history that only grows with every step — and it pins itself to the newest line anyway, so what it hides is what has already been read. / .wbm-gatelog { max-height: 20vh; max-height: 20dvh; } .wbm-split { grid-template-columns: 1fr; gap: 10px; min-height: 0; } / The fullest step — name, e-mail, phone, the consent paragraph, the button — was the one that still spilled, and what it pushed under the fold was the way out. Consent that costs a scroll to refuse is not freely given, so this step in particular has to end on the screen. / .wbm-splitmain { gap: 8px; } .wbm-gate .wbm-consent { font-size: 12.5px; line-height: 1.4; } / Collapsed, the whole reasons column is one tappable line instead of the 244px block that was pushing Odoslať off the screen. Still there, still one tap away, no longer between the visitor and the thing they came to do. The chevron says so. / .wbm-why { padding: 10px 13px; font-size: 13px; } .wbm-whyhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; / A 40px row, so the tap target is a target and not a line of text. / min-height: 20px; padding: 2px 0; } .wbm-whyhead::after { content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 3px; border-right: 2px solid #8b97a8; border-bottom: 2px solid #8b97a8; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; } .wbm-why[open] .wbm-whyhead::after { transform: rotate(-135deg) translate(-2px, -2px); } / Three lines, not five. The box still says "go on"; it no longer says it at the cost of the button underneath. It drags taller if they need it. / .wbm-gate .wbm-textarea { min-height: 92px; } .wbm-whystory { margin-top: 9px; padding-top: 9px; } } / The mobile keyboard eats about half the viewport, so the card goes full-bleed and the log gives up its share of the height rather than pushing the inputs off-screen. */ @media (max-height: 620px), (max-width: 420px) { .wbm-gate { padding: 0; align-items: flex-end; } .wbm-gate__card { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; } } @media (prefers-reduced-motion: reduce) { .wbm-typing span, .wbm-spinner, .wbm-step.is-revealed { animation: none; } }