/* ENTTEC Contact Popup (.ecp) * * Redesigned "Contact an Expert" dialog for enquiry-only product pages. * See enttec-contact-popup.php for what this replaces and why. * * PALETTE IS NOT A NEW ONE. Every token below carries over from the dialog this * one replaced, so the button and the panel still look like one product. * * Bump ENTTEC_CONTACT_POPUP_VER on every edit here. These load with that constant * as ?ver=, not filemtime(), so an unbumped edit ships a stylesheet no browser * refetches and the change looks like it silently failed. */ /* ========================================================================== SCROLL LOCK: hold the scrollbar open so opening the dialog moves nothing. THE BUG THIS FIXES: clicking Contact an Expert made the page jolt sideways. The lock in contact-popup.js fixes the body, the document stops overflowing, and the scrollbar vanishes. The viewport gains its width (15px on Windows and Linux; macOS overlay bars cost nothing, which is why this never showed on a Mac). The JS compensates the BODY for that, but body compensation CANNOT reach a position: fixed element, whose containing block is the viewport and not the body. So the fixed site header and the fixed cookie bar each widened by 15px and their centred contents slid while the page itself held still. Forcing the scrollbar to stay means the viewport width never changes, so there is nothing to compensate anywhere, fixed or not. Measured on local: documentElement.clientWidth is 1497 both sides of the lock, and the header, mega-menu and cookie bar all report a zero delta. NOT scrollbar-gutter: stable, which is the fix used for html:has(body.rc-endpoint) in css/remote-control.css. It does not work here: the gutter is only reserved on a scroll container, and fixing the body stops html being one, so the gutter collapses on lock and the 15px comes back. The class is added by JS and ONLY when a scrollbar was actually taking up space. On macOS overlay bars, or a page too short to scroll, forcing overflow-y would CREATE a scrollbar and cause the very shift this prevents. ========================================================================== */ html.ecp-locked { overflow-y: scroll; } .ecp { --p-surface: #2a2a2a; --p-surface-2: #232323; --p-text: #fff; --p-text-2: rgba(255,255,255,.82); --p-muted: rgba(255,255,255,.62); --p-rule: rgba(255,255,255,.14); --p-rule-strong: rgba(255,255,255,.24); --ecp-blue: #0EA5DF; --ecp-font: var(--enttec-font-display, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); --ecp-ease: cubic-bezier(.22,.61,.36,1); --ecp-dur: .3s; --ecp-dur-fast: .2s; } /* ========================================================================== THE TRIGGER These rules live here, with the dialog they open, so there is ONE copy of how the Contact an Expert button looks. This stylesheet is enqueued whenever the dialog is active (see the enqueue in enttec-contact-popup.php). Scoped to the two body classes so it cannot reach Find Your Local Dealer or any other product's enquiry button. ========================================================================== */ /* !important on background-color only, and it is not decoration: the theme pins it from a six-class selector in main-style.css that this cannot outweigh. Everything else wins on specificity alone and is left un-important so it stays easy to override later. border-radius is NOT set: that same six-class selector pins it to 25px, and 25 against the prototype's 28 is imperceptible. Not worth a fourth override to win by three pixels. */ body.ecc-enabled .contact_us_btn.contact_an_expert, body.ecp-enabled .contact_us_btn.contact_an_expert { /* 22px sides, was 30. With an icon and a 9px gap now inside it, 30 each side made the button read as mostly empty space. gap does the separating; the padding only has to keep the label off the edge. */ display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 22px !important; /* The 20px above the button is a MARGIN from the theme, not padding, which is why trimming the padding did nothing to the gap. */ margin-top: 10px; border: 1px solid transparent; background-color: #0EA5DF !important; color: #fff; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; box-shadow: 0 10px 24px -14px rgba(0,0,0,.65); transition: transform .3s cubic-bezier(.22,.61,.36,1), background-color .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1); } /* FONT AWESOME, not an inlined SVG. The theme already loads Font Awesome 6 Free, so this costs no extra bytes, it inherits `color` instead of hard-coding white inside a data URI, and it scales with font-size like text rather than like a picture. font-weight: 900 is NOT decoration, it is how Font Awesome selects the SOLID face. The button itself is 600, and at 600 this renders the regular weight, which in FA 6 FREE is a mostly empty set: the glyph silently disappears. */ body.ecc-enabled .contact_us_btn.contact_an_expert::after, body.ecp-enabled .contact_us_btn.contact_an_expert::after { content: "\f075"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 15px; line-height: 1; flex: none; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /* Darker blue, not black: black on a dark band reads as the button switching off at the exact moment somebody commits to pressing it. */ body.ecc-enabled .contact_us_btn.contact_an_expert:hover, body.ecc-enabled .contact_us_btn.contact_an_expert:focus, body.ecp-enabled .contact_us_btn.contact_an_expert:hover, body.ecp-enabled .contact_us_btn.contact_an_expert:focus { background-color: #0b8dbf !important; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(0,0,0,.7); } body.ecc-enabled .contact_us_btn.contact_an_expert:active, body.ecp-enabled .contact_us_btn.contact_an_expert:active { transform: translateY(0); } /* NO RING FOR THE MOUSE, A REAL ONE FOR THE KEYBOARD. On a mouse press the button matches :focus but NOT :focus-visible, so without the first rule what shows is the browser's own `outline: auto`, a light halo on a dark band. Never outline:none on its own, and the two rules must stay in this order: equal specificity, so the later one wins. */ body.ecc-enabled .contact_us_btn.contact_an_expert:focus, body.ecc-enabled .contact_us_btn.contact_an_expert:active, body.ecp-enabled .contact_us_btn.contact_an_expert:focus, body.ecp-enabled .contact_us_btn.contact_an_expert:active { outline: none; } body.ecc-enabled .contact_us_btn.contact_an_expert:focus-visible, body.ecp-enabled .contact_us_btn.contact_an_expert:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body.ecc-enabled .contact_us_btn.contact_an_expert, body.ecc-enabled .contact_us_btn.contact_an_expert:hover, body.ecp-enabled .contact_us_btn.contact_an_expert, body.ecp-enabled .contact_us_btn.contact_an_expert:hover { transition: none !important; transform: none !important; } } /* ========================================================================== THE DIALOG ========================================================================== */ /* z-index 600001 for the same reason the product-page lightbox uses it: this theme runs a very high z-index ladder (navbar 111111, geo nudge 500000) and a modal has to clear all of it. It deliberately stays UNDER the cookie bar at 1000020, because a consent control nobody can click is a compliance problem. */ .ecp { position: fixed; inset: 0; z-index: 600001; display: none; align-items: center; justify-content: center; padding: 20px; font-family: var(--ecp-font); -webkit-font-smoothing: antialiased; } .ecp.is-open { display: flex; } .ecp *, .ecp *::before, .ecp *::after { box-sizing: border-box; } /* ROOM FOR THE COOKIE BAR. This dialog sits UNDER #gdpr-notice on purpose, so the bar can cover the panel's lower edge. --ecp-bottom is measured per open in the JS and drops to 0 once the bar is answered. Mirrored at the top so the panel reads as centred rather than shoved upwards. */ .ecp.is-open { padding-top: calc(20px + var(--ecp-top, 0px)); padding-bottom: calc(20px + var(--ecp-bottom, 0px)); } .ecp__backdrop { position: absolute; inset: 0; background: rgba(8,8,10,.78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: ecp-fade var(--ecp-dur) var(--ecp-ease) both; } /* 400px, not the shared popup's 519. With one line per row the content no longer needs the width, and a narrower panel reads as a focused list, not a page. ONE FLAT calc(), NOT min() WRAPPED AROUND A calc(). Learned the hard way on the dialog this replaced: the page's CSS minifier drops a min() containing a calc() carrying two custom properties, max-height computes to `none`, and the panel hangs off both ends of the screen. A single flat calc cannot be mangled. */ .ecp__panel { position: relative; width: min(400px, 100%); max-height: calc(100vh - 40px - var(--ecp-top, 0px) - var(--ecp-bottom, 0px)); display: flex; flex-direction: column; overflow: hidden; background: var(--p-surface); border: 1px solid var(--p-rule); border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.55); animation: ecp-rise var(--ecp-dur) var(--ecp-ease) both; } @keyframes ecp-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ecp-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .ecp__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--p-surface-2); color: var(--p-text-2); cursor: pointer; transition: background var(--ecp-dur-fast) var(--ecp-ease), color var(--ecp-dur-fast) var(--ecp-ease), transform var(--ecp-dur-fast) var(--ecp-ease); } .ecp__close:hover { background: var(--p-rule); color: var(--p-text); transform: rotate(90deg); } .ecp__close:focus, .ecp__close:active { outline: none; } .ecp__close:focus-visible { outline: 3px solid var(--ecp-blue); outline-offset: 2px; } .ecp__close svg { width: 15px; height: 15px; } /* NO SUBTITLE. The shared popup has none either, and every line of chrome here is height the contact list pays for. The title says what the dialog is. */ .ecp__head { padding: 24px 24px 14px; } /* Full width. The theme capped this title at 167px, which is what forced the ragged "Get in touch with us / today" break. */ .ecp__title { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 0; padding-right: 34px; color: var(--p-text); letter-spacing: -.01em; } .ecp__title span { color: var(--ecp-blue); } .ecp__body { padding: 0 24px; overflow: auto; } /* CONSISTENT BOTTOM EDGE. The panel's children are close, head, body and then OPTIONALLY the region footer, and that footer carries the bottom padding for the whole panel. When it does not render (a visitor already in the right region, so there is nothing to correct) the body was the last child and the final contact row sat flush against the panel edge, which is what Kim saw on local. :last-child is exactly the "no footer" case, so this needs no PHP change and cannot double up when the footer IS there. 24px matches the head's own top padding, so the panel is evenly inset top and bottom. */ .ecp__body:last-child { padding-bottom: 24px; } .ecp__routes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } /* ONE LINE PER ROW, 52px tall. Stacking the label over the value cost ~16px a row and bought nothing: the label is one word and the value fits beside it. The whole row is the target, not a 20px icon and a text baseline, which is what the shared popup gives you (Fitts's law: roughly 8x the area). */ .ecp__route { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: 11px; text-decoration: none; background: var(--p-surface-2); border: 1px solid transparent; color: var(--p-text); transition: background var(--ecp-dur-fast) var(--ecp-ease), border-color var(--ecp-dur-fast) var(--ecp-ease), transform var(--ecp-dur-fast) var(--ecp-ease); } .ecp__route:hover { background: #2e2e2e; border-color: var(--p-rule-strong); transform: translateX(2px); color: var(--p-text); } .ecp__route:focus-visible { outline: 3px solid var(--ecp-blue); outline-offset: 2px; } .ecp__icon { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(14,165,223,.14); color: var(--ecp-blue); transition: background var(--ecp-dur-fast) var(--ecp-ease), color var(--ecp-dur-fast) var(--ecp-ease); } .ecp__route:hover .ecp__icon { background: var(--ecp-blue); color: #fff; } .ecp__icon svg { width: 17px; height: 17px; } /* WhatsApp keeps its own green rather than the blue every other row uses. It is a third-party product with a colour people recognise faster than the label, and the row only renders where a number is configured (AU and AE today), so the exception is rare enough to read as deliberate rather than as inconsistency. */ .ecp__route--wa .ecp__icon { background: rgba(37,211,102,.16); color: #3ddc7f; } .ecp__route--wa:hover .ecp__icon { background: #25d366; color: #fff; } /* THE CONTENT FIX. In the shared popup sales@ and support@ render as two identical links, so the visitor has to read the address to work out which team they are writing to. A fixed-width label column names the route first. Label and value share a wrapper so the mobile query can column them in one rule. */ .ecp__text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; } .ecp__route-label { flex: none; width: 58px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--p-muted); transition: color var(--ecp-dur-fast) var(--ecp-ease); } .ecp__route:hover .ecp__route-label { color: var(--p-text-2); } .ecp__route-value { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--p-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ecp__arrow { flex: none; color: rgba(255,255,255,.3); display: grid; place-items: center; transition: transform var(--ecp-dur-fast) var(--ecp-ease), color var(--ecp-dur-fast) var(--ecp-ease); } .ecp__route:hover .ecp__arrow { color: var(--ecp-blue); transform: translateX(3px); } .ecp__arrow svg { width: 15px; height: 15px; display: block; } /* ---- region footer ---- Demoted on purpose, and on ONE row. The theme's black bar was the loudest thing in the dialog while being the least important thing in it: a correction, not an action. Stacking its two sentences cost another 60px. */ .ecp__region { margin-top: 16px; padding: 14px 24px 18px; border-top: 1px solid var(--p-rule); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ecp__region-line { margin: 0; font-size: 12.5px; color: var(--p-muted); flex: 1; min-width: 120px; line-height: 1.4; } .ecp__region-line b { font-weight: 600; color: var(--p-text); } .ecp__select { position: relative; flex: none; width: 190px; } .ecp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* The bare