:root { --accent: #02a5bf; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(2, 165, 191, 1), -10px 10px rgba(2, 165, 191, 0.2), -10px -10px rgba(2, 165, 191, 1), 10px -10px rgba(2, 165, 191, 0.2); } 25% { box-shadow: -10px 10px rgba(2, 165, 191, 0.2), -10px -10px rgba(2, 165, 191, 1), 10px -10px rgba(2, 165, 191, 0.2), 10px 10px rgba(2, 165, 191, 1); } 50% { box-shadow: -10px -10px rgba(2, 165, 191, 1), 10px -10px rgba(2, 165, 191, 0.2), 10px 10px rgba(2, 165, 191, 1), -10px 10px rgba(2, 165, 191, 0.2); } 75% { box-shadow: 10px -10px rgba(2, 165, 191, 0.2), 10px 10px rgba(2, 165, 191, 1), -10px 10px rgba(2, 165, 191, 0.2), -10px -10px rgba(2, 165, 191, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #ffffff }/* LGV: Keep "Get Featured" readable on teal header (applies to all header layouts) */ /* LGV: Keep "Get Featured" CTA readable on teal header (covers all header variants) */ header .header-button a, header .header-button button, header a.button-1, header button.button-1, header .buttons.button-1, #c27-site-header .header-button a, #c27-site-header .header-button button, #c27-site-header a.button-1, #c27-site-header button.button-1, #c27-site-header .buttons.button-1, .site-header .header-button a, .site-header .header-button button, .site-header a.button-1, .site-header button.button-1, .site-header .buttons.button-1 { color: #02A5BF !important; /* teal text */ background-color: #ffffff !important; /* white background */ border-color: #ffffff !important; transition: all 0.3s ease; } /* Optional hover polish */ header .header-button a:hover, header .header-button button:hover, header a.button-1:hover, header button.button-1:hover, header .buttons.button-1:hover, #c27-site-header .header-button a:hover, #c27-site-header .header-button button:hover, #c27-site-header a.button-1:hover, #c27-site-header button.button-1:hover, .site-header .header-button a:hover, .site-header .header-button button:hover, .site-header a.button-1:hover, .site-header button.button-1:hover { background-color: #ffffffcc !important; color: #02A5BF !important; } /* LGV: Sign in / Register tab colors (MyListing markup) */ .login-tabs li h3, .login-tabs li h3 a { color: #717a8f !important; /* inactive */ text-decoration: none; } .login-tabs li.active h3, .login-tabs li.active h3 a { color: #02A5BF !important; /* active */ } .login-tabs li h3 a:hover, .login-tabs li h3 a:focus { color: #02A5BF !important; /* hover/focus */ } /* LGV: refined intro banner for Sign In / Register page */ .lgv-form-intro { max-width: 800px; margin: 0 auto 24px; padding: 12px 0 18px; color: #717a8f; font-size: 16px; line-height: 1.6; font-weight: 400; } .lgv-form-intro--inline { text-align: center; margin: 0 0 24px 0; padding: 0; color: #717a8f; max-width: 520px; } .lgv-form-intro strong { display: block; font-size: 26px; color: #02A5BF; margin-bottom: 4px; font-weight: 600; } .lgv-form-intro p { margin: 0; color: #717a8f !important; /* ensure consistent with heading */ } /* LGV: register email hint text */ .mylisting-register-form .form-group > p, .woocommerce-account .register .form-group > p, .elementor-widget-woocommerce-my-account .register .form-group > p { color: #717a8f !important; font-weight: 400 !important; margin-top: 6px; /* optional */ line-height: 1.3; /* optional */ } /* LGV: hint under login email field */ .lgv-field-hint{ display:block; margin-top:6px; font-size:14px; line-height:1.3; color:#717a8f; /* or #717a8f to soften */ font-weight:400; /* matches your screenshot vibe */ } /* LGV: refined banner under "Choose a Package" */ .lgv-package-intro { margin: 20px auto 30px; padding: 0; max-width: 800px; font-size: 16px; line-height: 1.6; text-align: center; color: #555d6d; font-weight: 400; } .lgv-package-intro strong { display: block; font-size: 18px; color: #717a8f; margin-bottom: 4px; font-weight: 600; } /* Center banner full width rather than aligning with package grid */ .lgv-package-intro { width: 100%; text-align: center; display: block; } .i-section.c27-packages .lgv-package-intro { margin-left: auto; margin-right: auto; text-align: center; } /* LGV: style for the "Choose a Package" heading */ .i-section.c27-packages .section-title h2.case27-primary-text { color: #02A5BF !important; font-size: 40px !important; font-weight: 600; /* you can lighten or bold this if needed */ line-height: 1.2; margin-bottom: 0.5em; text-align: center; /* optional – looks balanced on the blank page */ } .lgv-package-intro { margin: 28px auto 50px; /* bumped up bottom spacing */ padding-bottom: 15px; /* optional gentle cushion */ } /* LGV banner styling */ .lgv-package-intro { margin: 20px 0 10px; padding: 14px 16px; background: #f0fbfd; border: 1px solid #d8f3f7; border-radius: 12px; font-size: 16px; line-height: 1.5; } /* ========== HOME HERO: height + fluid width + responsive placement ========== */ /* Add this class to your home hero section */ .home-hero-section{ position: relative; overflow: visible; /* lets dropdowns escape */ /* iOS safe area so nothing hugs the bottom */ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); } /* Height: roomy on desktop, sensible elsewhere */ @supports (height: 100dvh){ .home-hero-section{ min-height: clamp(560px, 85dvh, 900px); } } @media (max-width: 1024px){ .home-hero-section{ min-height: clamp(520px, 70dvh, 820px); } } @media (max-width: 767px){ .home-hero-section{ min-height: auto; padding-top: 56px; padding-bottom: 32px; } } /* Keep search above waves/shapes */ .home-hero-section .lgv-searchwrap{ z-index: 5; } /* ---- Search wrapper width cap (keep this class on the search container) ---- */ .lgv-searchwrap{ width: min(92vw, 1120px); margin-inline: auto; } @media (max-width: 1280px){ .lgv-searchwrap{ width: min(94vw, 980px); } } @media (max-width: 767px){ .lgv-searchwrap{ width: 100%; } } /* --------- Vertical placement (desktop/laptop/tablet/phone) --------- */ /* Laptops / small desktops */ @media (min-width: 1025px) and (max-width: 1279px){ .home-hero-section .lgv-searchwrap{ position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(32px, 10dvh, 160px); /* tweak the middle value for coarse moves */ } } /* Regular desktops */ @media (min-width: 1280px) and (max-width: 1599px){ .home-hero-section .lgv-searchwrap{ position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(48px, 12dvh, 220px); } } /* Large / ultrawide */ @media (min-width: 1600px){ .home-hero-section .lgv-searchwrap{ position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(64px, 14dvh, 300px); } } /* Tablets */ @media (min-width: 768px) and (max-width: 1024px){ .home-hero-section .lgv-searchwrap{ position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(24px, 10vh, 80px); } } /* Phones: let it flow naturally */ @media (max-width: 767px){ .home-hero-section .lgv-searchwrap{ position: static; margin-top: 16px; } } /* Optional: if your tagline is absolutely positioned, keep it above the search */ .home-hero-section #hero-tagline{ z-index: 6; } /*home page hero */ /* Fluid width wrapper: fits small laptops, doesn't blow out on ultrawide */ .lgv-searchwrap{ width: min(92vw, 1120px); margin-inline: auto; } /* Laptop/tablet tweak */ @media (max-width: 1280px){ .lgv-searchwrap{ width: min(94vw, 980px); } } /* Phone: let the widget stack normally */ @media (max-width: 767px){ .lgv-searchwrap{ width: 100%; } } /* Fluid control sizes — keeps fields/buttons feeling consistent */ .lgv-searchwrap input[type="text"], .lgv-searchwrap input[type="search"], .lgv-searchwrap select, .lgv-searchwrap button, .lgv-searchwrap .select2-selection--single{ height: clamp(44px, 5.2vw, 60px); font-size: clamp(14px, 1.05vw, 18px); padding: 0 clamp(12px, 1.2vw, 18px); } /* Select2 alignment (MyListing uses Select2 in filters) */ .lgv-searchwrap .select2-selection--single .select2-selection__rendered{ line-height: clamp(44px, 5.2vw, 60px); } .lgv-searchwrap .select2-selection--single .select2-selection__arrow{ height: clamp(44px, 5.2vw, 60px); } /* end */ /* Footer-only: lock shape dividers + layering for CTA section */ .elementor-location-footer .cta-mountains{ position: relative; overflow: hidden !important; } /* Target shapes at any depth inside the footer CTA */ .elementor-location-footer .cta-mountains .elementor-shape{ position: absolute !important; left: 0; width: 100%; line-height: 0; pointer-events: none; z-index: 2; transition: none !important; animation: none !important; } /* Correct anchors (prevents “both at top” flip) */ .elementor-location-footer .cta-mountains .elementor-shape-top { top: -2px !important; bottom: auto !important; } .elementor-location-footer .cta-mountains .elementor-shape-bottom { bottom: -2px !important; top: auto !important; } /* Safe fallback fill so dividers never render black */ .elementor-location-footer .cta-mountains .elementor-shape .elementor-shape-fill{ fill: #02A5BF !important; opacity: 0.95; } /* Content above shapes, animated gradient below content */ .elementor-location-footer .cta-mountains > .elementor-container, .elementor-location-footer .cta-mountains .elementor-widget-wrap{ position:relative; z-index:3; } .elementor-location-footer .cta-mountains [class*="animated-gradient"], .elementor-location-footer .cta-mountains [class*="ue-animated"]{ position:absolute; inset:0; z-index:1; pointer-events:none; } /* Hairline seam masker (set to the background of the block below the CTA) */ .elementor-location-footer .cta-mountains::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#fff; /* ← change if the next footer block isn't white */ z-index:3; pointer-events:none; } /* CTA mountains — lock shapes + hide hairline seam */ .cta-mountains { position: relative; overflow: hidden; } .cta-mountains > .elementor-shape { position: absolute !important; left: 0; width: 100%; line-height: 0; pointer-events: none; z-index: 2; transition: none !important; animation: none !important; } .cta-mountains > .elementor-shape-top { top: -2px !important; bottom: auto !important; } .cta-mountains > .elementor-shape-bottom { bottom: -1px !important; top: auto !important; } .cta-mountains .elementor-shape-bottom svg { height: calc(100% + 3px) !important; } /* Nudge SVG to avoid sub-pixel gaps on some screens */ .cta-mountains .elementor-shape svg { display: block; width: 101%; } .cta-mountains { border: 0 !important; box-shadow: none !important; } /* Adds a 3px strip over the very bottom edge to hide the hairline seam */ .cta-mountains{ position:relative; } .cta-mountains::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#fff; /* ← change if the next section isn't white */ z-index:3; pointer-events:none; } /* end */ /* ================================ MOBILE HEADER FIXES ================================ */ /* ===================================== FIX/TWEAK: Show mobile menu icon DATE: 2025-09-23 LOCATION: Header – mobile/tablet PURPOSE: Force Material Icons to display ===================================== */ /* Show mobile menu icon in header on mobile & tablet Added Sep 2025 */ .mobile-menu-lines i { font-family: Material Icons; } /* ================================ CATEGORY NAMES ON LISTING PAGES ================================ */ /* ===================================== FIX/TWEAK: Prevent category name truncation DATE: 2025-09-23 LOCATION: Single listing page – category names PURPOSE: Ensure long names wrap correctly ===================================== */ /* Fix: stop category names from being truncated on single listing pages Added Sep 2025 */ #c27-single-listing div.block-type-tags .element .social-nav li span, #c27-single-listing div.block-type-terms .element .social-nav li span, #c27-single-listing .element .pf-body>.listing-details ul li a .category-name { white-space: normal; text-overflow: unset; word-break: break-word; } /* ========================================= LGV — Single listing: mobile hero + title ========================================= */ /* Title colour (phones + tablets). Go grey by swapping the colour. */ @media (max-width: 1024px) { body.single-job_listing h1, body.single-job_listing .entry-title, body.single-job_listing .profile-header h1, body.single-job_listing .single-content-header h1, body.single-job_listing .listing-title, body.single-job_listing .profile-name { color: #02A5BF !important; /* teal */ } } /* Phone-only layout fixes */ @media (max-width: 767px) { /* Make sure we hit *all* possible cover wrappers used by MyListing skins */ body.single-job_listing .profile-cover, body.single-job_listing .listing-cover, body.single-job_listing .cover, body.single-job_listing .page-header, body.single-job_listing .page-head { position: relative !important; overflow: hidden !important; min-height: 48svh !important; height: auto !important; margin: 0 !important; } /* Image should always fill */ body.single-job_listing .profile-cover .bg-image, body.single-job_listing .listing-cover .bg-image, body.single-job_listing .cover .bg-image, body.single-job_listing .profile-cover img, body.single-job_listing .listing-cover img, body.single-job_listing .cover img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; } /* Keep a *light* top overlay on the cover only */ body.single-job_listing .profile-cover:before, body.single-job_listing .listing-cover:before, body.single-job_listing .cover:before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.10) 35%, rgba(0,0,0,0) 65%) !important; pointer-events: none !important; z-index: 0 !important; } /* Nuke *all* extra fades that can create the white band */ body.single-job_listing .profile-cover:after, body.single-job_listing .listing-cover:after, body.single-job_listing .cover:after, body.single-job_listing .profile-header:before, body.single-job_listing .profile-header:after, body.single-job_listing .single-content-header:before, body.single-job_listing .single-content-header:after, body.single-job_listing .page-header:before, body.single-job_listing .page-header:after, body.single-job_listing .page-head:before, body.single-job_listing .page-head:after { content: none !important; display: none !important; background: none !important; opacity: 0 !important; } /* Tighten spacing under the image (catch multiple header variants) */ body.single-job_listing .profile-cover + .profile-header, body.single-job_listing .profile-cover + .single-content-header, body.single-job_listing .cover + .profile-header, body.single-job_listing .cover + .single-content-header, body.single-job_listing .page-header + .profile-header, body.single-job_listing .page-head + .profile-header, body.single-job_listing .profile-header, body.single-job_listing .single-content-header, body.single-job_listing .profile-header .container, body.single-job_listing .profile-header .profile-header-inner, body.single-job_listing .profile-header .head-area, body.single-job_listing .profile-header .content { margin-top: 0 !important; padding-top: 4px !important; } /* Ensure the first block after the cover never inserts extra space */ body.single-job_listing .profile-cover + *, body.single-job_listing .cover + *, body.single-job_listing .page-header + *, body.single-job_listing .page-head + * { margin-top: 0 !important; } } /* LGV — Final sweep for mobile hero gap + title colour */ /* 1) Force teal titles on all single listing templates (mobile & tablet) */ @media (max-width: 1024px) { body.single-job_listing h1, body.single-job_listing .entry-title, body.single-job_listing .profile-header h1, body.single-job_listing .single-content-header h1, body.single-job_listing .c27-page-title, body.single-job_listing [class*="page-title"] { color: #02A5BF !important; } } /* 2) Kill any standalone "fade/gradient" DIVs some skins add under the cover */ @media (max-width: 767px) { body.single-job_listing .profile-cover + .gradient, body.single-job_listing .profile-cover + .cover-gradient, body.single-job_listing .profile-cover + .bottom-fade, body.single-job_listing .cover + .gradient, body.single-job_listing .cover + .cover-gradient, body.single-job_listing .cover + .bottom-fade, body.single-job_listing .page-header + .gradient, body.single-job_listing .page /* Related section heading — readable & teal (all devices) */ body.single-job_listing .related-listings .section-title, body.single-job_listing .related-listings h2, body.single-job_listing .similar-listings .section-title, body.single-job_listing .similar-listings h2 { font-size: 26px !important; line-height: 1.3 !important; font-weight: 600 !important; color: #02A5BF !important; margin-bottom: 26px !important; text-align: center !important; } /* C) Related section heading size/colour (all devices) */ .single-job_listing .related-listings .section-title, .single-job_listing .related-listings h2, .single-job_listing .similar-listings .section-title, .single-job_listing .similar-listings h2 { font-size: 26px !important; line-height: 1.3 !important; font-weight: 600 !important; color: #02A5BF !important; margin-bottom: 26px !important; text-align: center !important; } /* LGV — Related listings section heading to teal */ .single-job_listing .related-listings h2, .single-job_listing .related-listings .section-title, .single-job_listing .similar-listings h2, .single-job_listing .similar-listings .section-title { color: #02A5BF !important; } /* LGV — Adjust "You may also like..." heading size + spacing */ .single-job_listing .related-listings h2, .single-job_listing .related-listings .section-title, .single-job_listing .similar-listings h2, .single-job_listing .similar-listings .section-title { font-size: 28px !important; line-height: 1.3; font-weight: 500; color: #02A5BF !important; margin-bottom: 25px !important; text-align: center; } /* Meta pills/text white on the hero */ .single-post .blogpost-section .blog-title .post-cover-buttons, .single-post .blogpost-section .blog-title .post-cover-buttons *{ color:#fff !important; fill:#fff !important; stroke:#fff !important; } /* Optional: hide the date on posts .single-post .blogpost-section .blog-title .fa-calendar, .single-post .blogpost-section .blog-title .fa-calendar + span{ display:none !important; } */ /* --- Mobile tune for single-post hero --- */ @media (max-width: 767.98px){ /* a little more vertical room for the hero on phones */ body.single-post{ --lgv-hero-h: 360px; } /* keep titles comfy and readable across device sizes */ .single-post .blogpost-section .blog-title h1, .single-post .blogpost-section .blog-title .case27-primary-text{ font-size: clamp(26px, 6vw, 34px); line-height: 1.2; padding: 0 10px; /* safe side gutters */ } /* meta (categories/date/share) spacing and wrap */ .single-post .blogpost-section .post-cover-buttons ul{ gap: 8px 12px !important; } .single-post .blogpost-section .post-cover-buttons i{ font-size: 14px; } } /* optional: extra-compact on very small phones */ @media (max-width: 420px){ /* if you want to hide the date on tiny screens, uncomment: .single-post .blogpost-section .post-cover-buttons .fa-calendar, .single-post .blogpost-section .post-cover-buttons .fa-calendar + span{ display:none !important; } */ } /* === LGV: Mobile hero clean-up (phones) === */ @media (max-width: 767.98px){ /* Slightly smaller hero title for breathing room */ .single-post .blogpost-section .blog-title h1, .single-post .blogpost-section .blog-title .case27-primary-text{ font-size: clamp(28px, 8.2vw, 40px); line-height: 1.10; padding: 0 12px; } /* Neat wrap + small gaps for the chip list */ .single-post .blogpost-section .blog-title .post-cover-buttons ul.no-list-style{ display: flex !important; flex-wrap: wrap !important; justify-content: center !important; row-gap: 6px; column-gap: 10px; margin-top: 10px !important; padding: 0 !important; } /* Chip legibility on small screens */ .single-post .blogpost-section .blog-title .post-cover-buttons li{ font-size: 16px; } /* Keep only the first 4 chips visible; hide the rest */ .single-post .blogpost-section .blog-title .post-cover-buttons li:nth-child(n+5){ display: none !important; } /* (Recommended) Hide date + share entirely on phones */ .single-post .blogpost-section .blog-title .post-cover-buttons .fa-calendar, .single-post .blogpost-section .blog-title .post-cover-buttons .fa-calendar + span, .single-post .blogpost-section .blog-title .post-cover-buttons li:has(.fa-share-alt), .single-post .blogpost-section .blog-title .post-cover-buttons li:has(.fa-share), .single-post .blogpost-section .blog-title .post-cover-buttons a[href*="share"]{ display: none !important; } /* Keep the hero height sensible on mobile */ body.single-post{ --lgv-hero-h: 360px; } } /* === LGV — Fix address wrapping in listing info rows === */ /* 1) Allow the row(s) to wrap */ .single-listing .listing-main-buttons.flex, .single-listing .listing-main-buttons .no-list-style.flex { flex-wrap: wrap !important; } /* 2) Let each item shrink so text can wrap */ .single-listing .listing-main-buttons li { min-width: 0 !important; flex: 1 1 auto !important; } /* 3) Force the address text to wrap instead of ellipses */ .single-listing .listing-main-buttons .price-or-date .value, .single-listing .listing-main-buttons .value, .single-listing .main-info-desktop .value, .single-listing .main-info-mobile .value { display: block !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; text-overflow: clip !important; overflow: visible !important; } /* ===== LGV — Mobile menu (i-nav): CTA at top + colors + button styling ===== */ @media (max-width:1200px){ /* Layout: move CTA to top, above menu */ .mobile-menu-open.i-nav{ display:flex; flex-direction:column; background:#fff !important; /* ensure light panel */ } .mobile-menu-open.i-nav .mobile-nav-head{ order:0; } .mobile-menu-open.i-nav .mobile-nav-button{ order:0; margin:0 0 12px 0; overflow:visible; } .mobile-menu-open.i-nav .mobile-nav-button .buttons{ height:auto; } .mobile-menu-open.i-nav > .main-menu{ order:1; } /* "Get Featured" CTA styled as LGV button */ .mobile-menu-open.i-nav .mobile-nav-button .buttons a, .mobile-menu-open.i-nav .mobile-nav-button a, .i-nav .mobile-nav-button .buttons a { display:block !important; width:90% !important; margin:8px auto 10px auto !important; padding:14px 0 !important; background:#02A5BF !important; color:#ffffff !important; border-radius:8px !important; font-size:17px !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:0.4px; text-align:center !important; text-decoration:none !important; transition:background 0.3s ease, transform 0.2s ease; } .mobile-menu-open.i-nav .mobile-nav-button .buttons a:hover{ background:#0295ac !important; transform:translateY(-1px); } /* ===== LGV — Mobile menu text color fix (final override) ===== */ @media (max-width:1200px){ /* Normal state */ .mobile-menu-open.i-nav .main-menu .menu li.menu-item > a:not(:hover), .mobile-menu-open.i-nav .main-menu .menu li.menu-item > a > span:not(:hover) { color:#555d6d !important; -webkit-text-fill-color:#555d6d !important; opacity:1 !important; } /* Active / hover / current = teal */ .mobile-menu-open.i-nav .main-menu .menu li.menu-item.current-menu-item > a, .mobile-menu-open.i-nav .main-menu .menu li.menu-item.current-menu-ancestor > a, .mobile-menu-open.i-nav .main-menu .menu li.menu-item > a:hover { color:#02A5BF !important; -webkit-text-fill-color:#02A5BF !important; } /* Keep icons grey */ .mobile-menu-open.i-nav .main-menu .menu li.menu-item i, .mobile-menu-open.i-nav .main-menu .submenu-toggle { color:#717a8f !important; } } /* LGV — kill header-skin colours inside i-nav drawer */ @media (max-width:1200px){ body.header-dark-skin .mobile-menu-open.i-nav .main-menu .menu li.menu-item > a, body.header-light-skin .mobile-menu-open.i-nav .main-menu .menu li.menu-item > a, body.header-dark-skin .mobile-menu-open.i-nav .main-menu .menu li.menu-item > a > span, body.header-light-skin .mobile-menu-open.i-nav .main-menu .menu li.menu-item > a > span { color:#555d6d !important; -webkit-text-fill-color:#555d6d !important; } /* keep active/hover teal */ .mobile-menu-open.i-nav .main-menu .menu li.menu-item.current-menu-item > a, .mobile-menu-open.i-nav .main-menu .menu li.menu-item.current-menu-ancestor > a, .mobile-menu-open.i-nav .main-menu .menu li.menu-item > a:hover { color:#02A5BF !important; -webkit-text-fill-color:#02A5BF !important; } } /* LGV — Ensure MyListing 'Back to top' button is always visible */ #c27-back-to-top, .c27-back-to-top, .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } <script> document.addEventListener('DOMContentLoaded', function () { // Cover common button markups: direct <a>, or class on a wrapper with inner <a> var buttons = document.querySelectorAll( 'a.cta-list-event, .cta-list-event a, button.cta-list-event' ); buttons.forEach(function (el) { // Set an explicit aria-label for screen readers el.setAttribute('aria-label', 'List Your Event'); // (Optional) Also set a title tooltip if you like // el.setAttribute('title', 'List Your Event'); }); }); </script> /* LGV: Force mobile (hamburger) earlier to avoid cramped desktop menu */ @media (max-width: 1120px){ /* tweak this number to taste */ #c27-site-header .main-nav, #c27-site-header .header-nav, #c27-site-header nav .menu { display:none !important; } /* hide desktop menu */ #c27-site-header .menu-toggle, #c27-site-header .nav-toggle, #c27-site-header .mobile-toggle { display:flex !important; } /* show hamburger */ } /* Optional: tighten header actions so the toggle doesn’t collide */ @media (max-width: 1120px){ #c27-site-header .header-actions{ gap:8px; } #c27-site-header .header-actions .button{ padding:8px 12px; } } /***** LGV — MOBILE/TABLET ORDER: LOGO LEFT → ICONS → HAMBURGER RIGHT *****/ @media (max-width: 1200px){ /* make the row flexible */ header.header .header-container .header-top, #c27-site-header .header-top{ display:flex; align-items:center; width:100%; } /* 1) LOGO — left */ header.header .header-container .header-top .logo, #c27-site-header .logo, #c27-site-header .site-logo{ order:1; margin:0; /* no auto-centering */ left:auto !important; transform:none !important; flex:0 0 auto; } /* 2) ICONS — middle (account + search) */ header.header .header-right, #c27-site-header .header-right{ order:2; display:flex; align-items:center; gap:12px; margin-left:12px; /* small gap after logo */ margin-right:12px; flex:0 0 auto; } /* 3) HAMBURGER — far right (.header-left holds the toggle in MyListing) */ header.header .header-left, #c27-site-header .header-left{ order:3; margin-left:auto; /* pushes to the edge */ display:flex; align-items:center; flex:0 0 auto; } header.header .header-left .mobile-menu, header.header .menu-toggle, header.header .nav-toggle, #c27-site-header .menu-toggle, #c27-site-header .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; } } /* ===== show the account icon on desktop too ===== */ @media (min-width: 1201px){ #c27-site-header .header-right{ display:flex; align-items:center; gap:12px; } } /* LGV: taxonomy "type" chips should not look clickable anywhere */ .listing-preview a[href*="-type/"], .single-listing a[href*="-type/"], .c27-footer-section.lf-list-style li, .c27-footer-section.lf-list-style a[href*="-type/"] { cursor: default !important; pointer-events: auto; /* let JS handle prevention; we only change cursor look */ text-decoration: none !important; } /* =========================== LGV: Claim Listing Page Styling =========================== */ /* --- Layout container fixes --- */ body.lgv-claim .entry-content, body.lgv-claim .c27-content-margin, body.lgv-claim .site-main, body.lgv-claim .content-area { overflow: visible !important; } /* --- Full-width teal hero --- */ body.lgv-claim .lgv-claim-hero { width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; background: #02A5BF !important; color: #fff !important; padding: 24px 0 !important; text-align: center; z-index: 1; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } body.lgv-claim .lgv-claim-hero__text { margin: 0 auto; font-size: 17px; line-height: 1.5; font-weight: 500; max-width: 800px; } /* --- Main content shell --- */ body.lgv-claim .lgv-claim-shell { max-width: 1180px; margin: 0 auto; padding: 0 20px; } /* --- Intro banner (matches “Choose a Package” style) --- */ body.lgv-claim .lgv-claim-intro { margin: 40px auto 50px; padding: 16px 18px; background: #f0fbfd; border: 1px solid #d8f3f7; border-radius: 12px; font-size: 16px; line-height: 1.6; color: #555d6d; max-width: 800px; text-align: center; font-weight: 400; } body.lgv-claim .lgv-claim-intro strong { display: block; font-size: 18px; color: #717a8f; margin-bottom: 4px; font-weight: 600; } /* --- Buttons --- */ body.lgv-claim a.button, body.lgv-claim button.button, body.lgv-claim .single_add_to_cart_button, body.lgv-claim .button.alt { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border-radius: 999px; font-weight: 600; background: #02A5BF; color: #fff !important; text-decoration: none; transition: filter 0.2s ease; } body.lgv-claim a.button:hover, body.lgv-claim button.button:hover, body.lgv-claim .single_add_to_cart_button:hover, body.lgv-claim .button.alt:hover { filter: brightness(0.95); } /* --- Form + Woo notices --- */ body.lgv-claim form .form-row input.input-text, body.lgv-claim form .form-row textarea, body.lgv-claim form .form-row select { border-radius: 12px; } body.lgv-claim .woocommerce-error, body.lgv-claim .woocommerce-message { border-radius: 14px; padding: 14px 16px; } /* --- Mobile tweaks --- */ @media (max-width: 640px) { body.lgv-claim .lgv-claim-hero__text { font-size: 15px; padding: 0 16px; } } /* ========================= LGV CORE LAYOUT CLAMPS ========================= */ /* A) LISTING FORM (add/edit) — pad under sticky header + teal heading + width clamp */ body.lgv-listing-form .add-listing-step { padding-top: var(--lgv-header-h, 56px); } @media (max-width:768px){ body.lgv-listing-form .add-listing-step { padding-top: calc(var(--lgv-header-h,56px) - 12px); } } /* Clamp the internal container your inspector showed */ body.lgv-listing-form .add-listing-step .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } /* Teal page/section headings in the step */ body.lgv-listing-form .section-title, body.lgv-listing-form .section-title .case27-primary-text, body.lgv-listing-form .page-heading, body.lgv-listing-form h1.page-heading, body.lgv-listing-form h2.page-heading { color: #02A5BF !important; } /* B) CART (ID 8) & CHECKOUT (ID 9) — clamp + center regardless of parents */ body.page-id-8 .wp-site-blocks, body.page-id-9 .wp-site-blocks, body.page-id-8 .entry-content, body.page-id-9 .entry-content, body.page-id-8 .woocommerce, body.page-id-9 .woocommerce, body.page-id-8 .is-layout-constrained, body.page-id-9 .is-layout-constrained, body.page-id-8 .site-main, body.page-id-9 .site-main { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; /* if a parent uses flex and kills margin:auto, self-center */ align-self: center; } /* Neutralize any full-bleed blocks inside */ body.page-id-8 .alignfull, body.page-id-9 .alignfull, body.page-id-8 .wp-block-group.alignfull, body.page-id-9 .wp-block-group.alignfull { width: auto !important; margin-left: auto !important; margin-right: auto !important; } /* Cart/Checkout block roots – keep them centered even if parents are flex */ body.page-id-8 .wc-block-cart, body.page-id-9 .wc-block-checkout { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; align-self: center; place-self: center; } /* Desktop 2-column layout */ @media (min-width: 992px){ body.page-id-8 .wc-block-cart { display: grid !important; grid-template-columns: 1fr 360px !important; gap: 36px !important; align-items: start !important; } body.page-id-9 .wc-block-checkout { display: grid !important; grid-template-columns: 1fr 360px !important; gap: 36px !important; align-items: start !important; } body.page-id-9 .wc-block-checkout .wc-block-components-main { grid-column: 1 !important; } body.page-id-9 .wc-block-checkout .wc-block-components-sidebar { grid-column: 2 !important; } } /* Card feel for summaries/totals */ body.page-id-8 .wc-block-cart [class*="__sidebar"], body.page-id-8 .wc-block-cart [class*="__totals"], body.page-id-9 .wc-block-checkout .wc-block-components-sidebar { background:#fff; border:1px solid #eef2f6; border-radius:12px; padding:16px; } /* Optional: turn on visual debug borders by setting this var to 1 */ :root { --lgv-debug: 0; } body.page-id-8 .wc-block-cart, body.page-id-9 .wc-block-checkout, body.lgv-listing-form .add-listing-step .container { outline: calc(var(--lgv-debug) * 1px) dashed #02A5BF; }