/* ============================================================ JANNUZZIO — FREE ESTIMATE TAB + POPUP WIRING HOW TO USE: 1. Paste the CSS block into Elementor → Site Settings → Custom CSS 2. Paste the JS block into Elementor → Site Settings → Custom Code (or a Custom HTML widget in the footer, or functions.php wp_footer hook) 3. In your Elementor popup settings: - Animation: Slide In from Left - Close Button: keep Elementor's default or add your own - No trigger needed — the tab JS handles it 4. Find your popup ID: look at the URL when editing the popup in Elementor e.g. /wp-admin/post.php?post=123 — 123 is the ID. Replace POPUP_ID_HERE in the JS with that number. ============================================================ */ /* ============================================================ CSS — paste into Elementor → Site Settings → Custom CSS ============================================================ */ .drawheader p { color: #000 !important; } .jannuzzio .drawbody .gform_wrapper textarea { max-height: 100px; } .jannuzzio .drawheader h3, .drawheader h3:before{ color:#111 !important; } /* ── THE TAB ── */ .jn-estimate-tab { position: fixed; left: 0; top: 50%; z-index: 9990; /* Rotate the tab so text reads bottom-to-top */ transform: translateY(-50%) rotate(-90deg) translateX(-50%); transform-origin: left center; background: var(--flash); color: var(--obsidian); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 18px; border: none; border-radius: 0 0 6px 6px; /* rounded on bottom (visually the sides when rotated) */ cursor: pointer; white-space: nowrap; box-shadow: 2px 0 16px rgba(0,0,0,0.14); transition: background 0.2s, padding 0.2s; } .jn-estimate-tab:hover { background: #e8c228; padding: 9px 22px; /* subtle grow on hover */ } /* When the popup is open, tab stays attached — shifts right with the drawer */ /* Elementor adds .elementor-popup--open to the on their popup */ body.jn-popup-open .jn-estimate-tab { /* Move tab to sit on the right edge of the open drawer. 400px is a typical Elementor slide-in popup width — adjust this value to match your actual popup width */ left: 400px; border-radius: 0 6px 6px 0; transform: translateY(-50%); /* no rotation when open — tab sits on the side edge */ transform-origin: center center; } /* ── OVERLAY (dims the page behind the drawer) ── */ .jn-estimate-overlay { position: fixed; inset: 0; background: rgba(17, 17, 17, 0.55); z-index: 9980; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .jn-estimate-overlay.open { opacity: 1; pointer-events: all; } /* ── ELEMENTOR POPUP OVERRIDES ── Forces the popup to look/behave like the HTML reference drawer. .elementor-popup-modal is the class Elementor adds to its popup overlay. .elementor-location-popup is on the popup content wrapper. */ /* Remove Elementor's own overlay — we're using ours */ .elementor-popup-modal .dialog-lightbox-close-button { display: none; /* hide default X — wire your own close inside the popup */ } /* Ensure popup sits above our overlay but below the tab */ .elementor-popup-modal { z-index: 9985 !important; } /* Popup content panel sizing and position */ .elementor-popup-modal .elementor-popup-modal__overlay { background: transparent !important; /* we handle the overlay ourselves */ } /* ── RESPONSIVE ── On mobile the drawer goes full width, tab hides */ @media (max-width: 767px) { .jn-estimate-tab { display: none; } }