/* ========================================================================= The free-estimate pop-up. Opened by every "Get a Free Quote" button on the site. Sits on , above everything, with the page behind it dimmed and held still. ========================================================================= */ .qp-veil { position: fixed; inset: 0; z-index: 300; background: rgba(1, 19, 33, .68); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; } .qp-veil { pointer-events: none; } .qp-veil.show { opacity: 1; pointer-events: auto; } /* * Closed means closed. * * `.qp` sets `display: flex`, which beats the browser's own * `[hidden] { display: none }` on specificity — so the `hidden` attribute did * nothing and the panel stayed in the page at `opacity: 0`, invisible but * still over the middle of the screen, swallowing every click and hover meant * for the content underneath. The GoHighLevel frame inside makes it worse by * forcing its own visibility. * * Two guards: honour `hidden`, and refuse pointer events until it is open. */ .qp[hidden], .qp-veil[hidden] { display: none; } .qp { position: fixed; z-index: 310; pointer-events: none; top: 50%; left: 50%; width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 780px); display: flex; flex-direction: column; background: var(--paper); border-radius: 16px; box-shadow: 0 40px 90px -20px rgba(1, 19, 33, .6); overflow: hidden; transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: opacity .3s ease, transform .35s cubic-bezier(.16, 1, .3, 1); } .qp.show { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } /* Its heading, with the close button. */ .qp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 0; } .qp-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: var(--ink-2); } .qp-title strong { color: var(--accent-deep, var(--accent)); } .qp-close { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--border-light); border-radius: 50%; background: none; color: var(--ink-2); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .3s ease; } .qp-close:hover, .qp-close:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(90deg); } .qp-sub { margin: 8px 24px 0; color: var(--muted); font-size: .96rem; line-height: 1.6; } /* The form. It sizes itself, so the panel scrolls rather than the page. */ .qp-body { flex: 1; min-height: 0; padding: 14px 18px 20px; overflow-y: auto; overscroll-behavior: contain; } .qp-body iframe { display: block; width: 100%; min-height: 460px; border: 0; } /* The page behind does not scroll with it. */ html.qp-locked, body.qp-locked { overflow: hidden; } @media (max-width: 600px) { .qp { width: calc(100vw - 20px); max-height: 90vh; border-radius: 14px; } .qp-head { padding: 18px 18px 0; } .qp-title { font-size: 1.28rem; } .qp-sub { margin-left: 18px; margin-right: 18px; } } @media (prefers-reduced-motion: reduce) { .qp, .qp-veil, .qp-close { transition: none; } }