/* Pro Junk Removals - Enhanced with modern fonts */ /* Fonts are self-hosted via css/fonts.css — loaded in HTML before this file */ :root { --site-background-color: #fff; --color-primary: #FD8000; --color-primary-light: #FD8000; --color-primary-dark: #FD8000; --color-black: #000; --color-white: #fff; --color-light-grey-1: #e0e0e0; --color-light-grey-2: #c7c7c7; --color-dark-grey: #3a3a3a; --color-dark-grey-1: #808080; --section-bg-color: #f2f2f2; --shadow-1: rgba(0, 0, 0, 0.24) 0px 3px 8px; --shadow-2: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6; --shadow-3: rgba(0, 0, 0, 0.16) 0px 1px 4px; --marquee-scroll-gap: 1rem; --scrollbar-width: .5rem; --scrollbar-background-color: #e0e0e0; --scrollbar-thumb-color: #FD8000; --navbar-height: 10rem; --navbar-background-color-1: #FFFFFF; --navbar-background-color-2: #FFFFFF; --navbar-link-active-font-color: #fff; --navbar-link-active-background-color: #000; --navbar-logo-height: 5rem; --navbar-logo-width: 14rem; --navbar-log-margin-left: 1rem; --navbar-log-margin-right: 1rem; --navbar-top-minibar-background-color: #ffffff; --navbar-top-minibar-color: #000; --navbar-top-minibar-height: 2.5rem; --navbar-top-minibar-font-family: "Inter", system-ui, -apple-system, sans-serif; --navbar-top-minibar-font-size: 1.25rem; --footer-background-color: #2D651A !important; --footer-font-color: #FD8000; --footer-font-size: 1.4rem; --footer-font-family: "Source Sans 3", system-ui, -apple-system, sans-serif; --footer-heading-font-color: #000; --footer-heading-font-size: 1.6rem; --footer-heading-font-weight: 600; --footer-heading-font-family: "Montserrat", system-ui, -apple-system, sans-serif; --footer-heading-letter-spacing: 0.02rem; --footer-bottom-background-color: #c05f19; --footer-bottom-font-color: #fff; --footer-bottom-font-size: 1.4rem; --footer-bottom-font-family: "Source Sans 3", system-ui, -apple-system, sans-serif; --footer-bottom-links-font-color: #fff; --footer-bottom-links-font-size: 1.4rem; --footer-icon-color: #616161; --footer-icon-size: 2rem; --navbar-brand-font-size: 3.0rem; --navbar-brand-font-weight: 700; --navbar-brand-font-color: #306935; --navbar-brand-font-family: "Montserrat", system-ui, -apple-system, sans-serif; --navbar-link-font-size: 1.8rem; --navbar-link-font-weight: 600; --navbar-link-font-color: #FD8000; --navbar-link-highlight-color: #fff; --navbar-link-font-family: "Roboto", "Arial Narrow", Arial, sans-serif; --default-font-size: 1.5rem; --default-font-weight: 400; --default-font-family: "Source Sans 3", system-ui, -apple-system, sans-serif; --main-heading-font-size: 2.4rem; --main-heading-font-color: #000; --main-heading-font-weight: 700; --main-heading-font-family: "Montserrat", system-ui, -apple-system, sans-serif; --main-heading-line-height: 1.4; --main-heading-letter-spacing: -0.02rem; --secondary-heading-font-family: "Montserrat", system-ui, -apple-system, sans-serif; --secondary-heading-font-size: 1.6rem; --secondary-heading-font-color: #000; --secondary-heading-font-weight: 600; --secondary-heading-line-height: 1.3; --secondary-heading-letter-spacing: -0.01rem; --pre-heading-font-family: "Inter", system-ui, -apple-system, sans-serif; --pre-heading-font-size: 1.4rem; --pre-heading-font-color: #000; --pre-heading-font-weight: 500; --pre-heading-line-height: 1.4; --pre-heading-letter-spacing: 0.01rem; --paragraph-font-family: "Source Sans 3", system-ui, -apple-system, sans-serif; --paragraph-font-size: 16px; --paragraph-font-color: #000; --paragraph-font-weight: 400; --paragraph-line-height: 1.6; --paragraph-letter-spacing: normal; --price-font-family: "Montserrat", system-ui, -apple-system, sans-serif; --price-font-color: #000; --price-font-weight: 600; --price-letter-spacing: -0.01rem; --cookies-bar-background-color: #5a728a; --cookies-bar-font-family: "Source Sans 3", system-ui, -apple-system, sans-serif; --cookies-bar-font-weight: 400; --cookies-bar-font-size: 1.5rem; --cookies-bar-font-color: #fff; --cookies-bar-icon-size: 1.5rem; --cookies-bar-border-color: #e0e0e0; --cookies-bar-border-width: 1px; --cookies-bar-border-radius: 3px; --cookies-bar-position-left: 0; --cookies-bar-position-bottom: 0; --cookies-bar-width: 100%; --cookies-bar-height: 10%; --cookies-bar-vertical-padding: 1rem; --cookies-bar-horizontal-padding: 1rem; --cookies-bar-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; --cookies-bar-button-background-color: #6c99f5; --cookies-bar-button-border-radius: 3px; --cookies-bar-button-font-family: "Inter", system-ui, -apple-system, sans-serif; --cookies-bar-button-font-size: 1.4rem; --cookies-bar-button-vertical-padding: 0.5rem; --cookies-bar-button-horizontal-padding: 1rem; --cookies-bar-button-margin: 2rem; --hero-height: 50rem; --hero-background-image-position-right: 0%; --hero-background-image-position-top: 8%; --hero-font-color: #fff; --hero-font-size: 2.5rem; --hero-letter-spacing: -0.02rem; --hero-font-weight: 700; --site-background-color-dark: #7e8185; --section-bg-color-dark: #7e8185; --navbar-background-color-1-dark: #FFFFFF; --navbar-background-color-2-dark: #FFFFFF; --navbar-link-active-font-color-dark: #f7f7f7; --navbar-link-active-background-color-dark: #b3b3b3; --navbar-link-font-color-dark: #ffffff; --scrollbar-background-color-dark: #ffffff; --scrollbar-thumb-color-dark: #196dd4; --footer-background-color-dark: #2D651A; --footer-font-color-dark: #ffffff; --footer-heading-font-color-dark: #ffffff; --secondary-heading-font-color-dark: #ffffff; --footer-bottom-background-color-dark: #646566; --footer-bottom-font-color-dark: #ffffff; --footer-icon-color-dark: #e9e9e9; --main-heading-font-color-dark: #fcfcfc; --pre-heading-font-color-dark: #ffffff; --paragraph-font-color-dark: #ffffff; --price-font-color-dark: #ffffff; --cookies-bar-background-color-dark: #0580fcb7; --cookies-bar-font-color-dark: #ffffff; --cookies-bar-border-color-dark: #e0e0e0; --cookies-bar-button-background-color-dark: #6c99f5; } /* Utility classes */ .gold-star { color: #FD8000 !important; } /* Modern Typography Enhancements */ body { font-family: var(--default-font-family); font-optical-sizing: auto; opacity: 0; transition: opacity 0.3s ease-in; } body.page-loaded { opacity: 1; } /* Enhanced heading styles */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .main-heading, .secondary-heading, .hero-title { font-family: var(--main-heading-font-family); font-weight: var(--main-heading-font-weight); line-height: var(--main-heading-line-height); letter-spacing: var(--main-heading-letter-spacing); } /* Hero padding — consolidated override (see also the hero-single block near bottom) */ /* Scale hero title on mid-range desktops so it fits above the fold on laptops */ @media (min-width: 1200px) { .hero-single .hero-content .hero-title { font-size: clamp(44px, 3.6vw, 70px) !important; } } /* Enhanced paragraph and content styles */ p, span, div, .paragraph, .content, .description { font-family: var(--paragraph-font-family); line-height: 1.5; text-align: left; } /* Navigation layout fixes */ .navbar-nav .nav-link { padding: 33px 0 13px 0 !important; font-family: 'Yantramanav', sans-serif !important; font-size: 18px !important; } .main-navigation .container { max-width: 1400px; } @media (min-width: 992px) and (max-width: 1199px) { .navbar-nav .nav-link { font-size: 16px !important; } } /* Fix for header phone section spacing */ .header-nav-right { margin-left: 1rem; } .header-phone-content span { font-size: 1.4rem !important; } /* Prevent phone button circle from being squished when nav is full */ .header-phone-icon { flex-shrink: 0 !important; } /* Target only the nav-link's own pseudo-elements, not FontAwesome icons inside */ .header .nav-link::before, .header .nav-link::after { display: none !important; content: none !important; opacity: 0 !important; width: 0 !important; height: 0 !important; visibility: hidden !important; } /* Base reset for nav elements */ .nav-item, .nav-link { position: relative !important; border: 0 !important; border-bottom: 0 !important; text-decoration: none !important; box-shadow: none !important; } /* Nav active/hover indicator — orange bar below the active link */ html body .header .main-navigation .navbar .navbar-nav .nav-item .nav-link::before { display: block !important; content: "" !important; position: absolute !important; width: 25px !important; height: 3px !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; background: #FD8000 !important; bottom: 8px !important; opacity: 0 !important; z-index: 99 !important; visibility: visible !important; transition: opacity 0.2s ease !important; } html body .header .main-navigation .navbar .navbar-nav .nav-item .nav-link.active::before, html body .header .main-navigation .navbar .navbar-nav .nav-item:hover .nav-link::before { opacity: 1 !important; width: 25px !important; } /* Navbar background and shadow */ .main-navigation .navbar { background: #fff !important; box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important; } /* Sticky main nav on mobile — top bar scrolls away, nav stays fixed */ @media (max-width: 991px) { .main-navigation { position: sticky !important; top: 0 !important; z-index: 1000 !important; } } /* Unified Master Button System */ .theme-btn, .cp-btn, .quote-submit-btn, .button-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; background: #FD8000 !important; color: #fff !important; padding: 14px 32px !important; font-size: 18px !important; font-weight: 700 !important; border-radius: 6px !important; border: none !important; text-decoration: none !important; transition: all 0.25s ease !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(253, 128, 0, 0.3) !important; position: relative !important; overflow: hidden !important; line-height: 1.2 !important; } /* Unified Hover State */ .theme-btn:hover, .cp-btn:hover, .quote-submit-btn:hover, .button-link:hover { background: #e07200 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(253, 128, 0, 0.4) !important; color: #fff !important; } /* Secondary Button Variant (Brand Green) */ .theme-btn--secondary { background: #558E4C !important; box-shadow: 0 4px 14px rgba(85, 142, 76, 0.3) !important; } .theme-btn--secondary:hover { background: #467a3d !important; box-shadow: 0 6px 20px rgba(85, 142, 76, 0.4) !important; } /* Remove legacy animated overlays that clash with modern design */ .theme-btn::before, .cp-btn::before, .quote-submit-btn::before { display: none !important; content: none !important; } /* Consistent Icon Spacing */ .theme-btn i, .cp-btn i, .quote-submit-btn i { margin: 0 !important; font-size: 1.1em !important; } /* Outline variant for secondary actions (e.g. Blog) */ .theme-btn-outline { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,0.8) !important; box-shadow: none !important; } .theme-btn-outline:hover { background: #fff !important; color: #FD8000 !important; border-color: #fff !important; } /* Button enhanced typography */ .btn, .button, .button-link, .cp-btn { font-family: var(--default-font-family); letter-spacing: 0.02rem; } /* Card titles enhanced typography */ .card-title, .feature-title, .service-title { font-family: var(--secondary-heading-font-family); font-weight: var(--secondary-heading-font-weight); line-height: var(--secondary-heading-line-height); } /* Service tiles — full-width Get Quote button */ .service-arrow .theme-btn { display: block; width: 100%; text-align: center; } main { background: var(--site-background-color); /* padding-bottom: 1.5rem; */ padding-bottom: 0 !important; } /* → wastex-legacy.css: .navbar-minibar, .section-component, .template-text-alignment, .template-divider-alignment */ /* Custom Settings */ .feature a { text-decoration: underline; } .demo { font-weight: 700; } nav.navbar { background-color: white; } .backgroundImageText h2 { font-size: 3rem; } .footer { /* background-color: #1667af; */ background-color: #0e0d0c; color: #fff; margin-left: 0 !important; margin-right: 0 !important; } .footer h3 { color: #fff !important; } .footer strong { color: #fff !important; } .navbar-brand { justify-content: flex-start; } /* → wastex-legacy.css: .footer-below, .text-with-bg-img__*, .logo-parade__gallery, .navbar__logo, .content-feature */ .navbar { background-color: white !important; background-image: none !important; } .navbar-brand--text { color: #FD8000 !important; } .navbar-with-contacts { align-items: flex-start; } @media(max-width: 1024px) { .navbar-with-contacts { align-items: center; } } /* → wastex-legacy.css: .form__heading h2, .form__button */ /* f4f1e5 */ /* home page button */ .button-link { display: inline-block; padding: 10px 20px; background-color: var(--color-primary); /* Or any color you prefer */ color: white; /* Text color */ text-align: center; text-decoration: none; border-radius: 5px; font-size: 18px; font-weight: bold; transition: all .2s ease; } .button-link:hover { background-color: var(--color-primary-dark); color: #ffffff; /* Darker shade for hover effect */ } .simple-text { width: 100%; } .service-cards, .c-2307 .features-container { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; max-width: 1200px; margin: 0 auto; } @media(max-width: 1200px) { .service-cards, .c-2307 .features-container { grid-template-columns: repeat(3, 1fr); padding: 0 20px; } } @media(max-width: 991px) { .service-cards, .c-2307 .features-container { grid-template-columns: repeat(2, 1fr); } } @media(max-width: 600px) { .service-cards, .c-2307 .features-container { grid-template-columns: repeat(1, 1fr); } } .service-cards .card, .c-2307 .features-container .feature { margin: 0; width: 100%; max-width: 100%; } .service-cards .card .card-img-top, .c-2307 .features-container .feature .feature-icon { width: 140px; margin: auto; } .service-cards .card .card-body { overflow: hidden; } .service-cards .card .card-title, .c-2307 .features-container .feature .card-title { text-transform: none; white-space: pre-line; font-size: 1.75rem; font-weight: 600; font-family: var(--main-heading-font-family); letter-spacing: 0.125rem; margin-bottom: 1rem; } @media(max-width: 600px) { .service-cards .card .card-title, .c-2307 .features-container .feature .card-title { text-align: center; } } .service-cards .card .card-body ul, .c-2307 .features-container .feature ul { margin: 0 auto; list-style: disc; } .service-cards .card .card-body ul li, .c-2307 .features-container .feature ul li { font-family: var(--paragraph-font-family); font-size: 1.45rem; font-weight: var(--paragraph-font-weight); letter-spacing: 0; word-wrap: normal; overflow-wrap: normal; margin-bottom: .5rem; } /* → wastex-legacy.css: .footer-terms, .footer__links-list, .section-component min-height, .contact-quote-request */ /* → wastex-legacy.css: .c-2345, .c-2344, .c-2431 component overrides */ /* ── Clean Up Made Easy — cubic sizing guide ─────────────────────────────── */ .pjr-container { margin: 0; padding: 0; } .pjr-layout { display: flex; gap: 36px; align-items: flex-start; } /* LEFT column */ .pjr-left { flex: 0 0 36%; max-width: 36%; display: flex; flex-direction: column; gap: 14px; } .pjr-truck-img { width: 100%; height: auto; mix-blend-mode: multiply; border-radius: 8px; } .pjr-left h2 { margin: 0; font-size: 1.85rem; } .pjr-left > p { font-size: 1rem; color: #555; line-height: 1.7; margin: 0; } .pjr-photo-tip { font-size: 0.83rem; color: #888; font-style: italic; margin: 0; } /* RIGHT column */ .pjr-right { flex: 1; } .pjr-guide-heading { font-size: 1.15rem; font-weight: 700; color: #2d3a2a; text-align: center; margin: 0 0 14px; } /* 2×2 card grid */ .pjr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pjr-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 14px; display: flex; flex-direction: column; gap: 10px; position: relative; } /* Truck fill bar */ .truck-fill-visual { padding-bottom: 2px; } .truck-outline { border: 2px solid #ddd; border-radius: 5px; height: 42px; position: relative; background: #f5f5f5; overflow: hidden; } .truck-fill { position: absolute; left: 0; top: 0; height: 100%; opacity: 0.5; } .cubic-label { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 0.75rem; color: #444; white-space: nowrap; } /* Card body */ .pjr-card-body { display: flex; flex-direction: column; gap: 5px; } .pjr-load-label { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .pjr-cubic { font-size: 1.3rem; font-weight: 800; line-height: 1.15; } .pjr-items { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: #666; } .pjr-items li::before { content: "• "; opacity: 0.5; } .pjr-tagline { font-size: 0.78rem; color: #999; font-style: italic; border-top: 1px solid #eee; padding-top: 6px; margin-top: 2px; } /* Best value badge — inline flow so it doesn't overlap the fill bar */ .pjr-best-value { display: inline-block; background: #c0392b; color: #fff; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; margin-bottom: 4px; align-self: flex-start; } /* Accent colours — brand palette, escalating warmth toward the top tier */ .pjr-card--quarter .truck-fill { background: #7cbd7c; } .pjr-card--quarter .pjr-load-label, .pjr-card--quarter .pjr-cubic { color: #4a9a4a; } .pjr-card--half .truck-fill { background: #558E4C; } .pjr-card--half .pjr-load-label, .pjr-card--half .pjr-cubic { color: #3d6e36; } .pjr-card--threequarter .truck-fill { background: #f0a830; } .pjr-card--threequarter .pjr-load-label, .pjr-card--threequarter .pjr-cubic { color: #c97d00; } /* Full truck uses brand orange — matches CTA buttons, signals primary action */ .pjr-card--full .truck-fill { background: #FD8000; } .pjr-card--full .pjr-load-label, .pjr-card--full .pjr-cubic { color: #FD8000; } .pjr-card--full { border: 2px solid rgba(253,128,0,0.35); } /* Best value badge matches full-truck accent */ .pjr-best-value { background: #FD8000; } /* Responsive */ @media (max-width: 991px) { .pjr-layout { flex-direction: column; } .pjr-left { flex: 0 0 100%; max-width: 100%; } .pjr-truck-img { max-width: 420px; margin: 0 auto; display: block; } .pjr-left h2, .pjr-left > p, .pjr-left .theme-btn, .pjr-photo-tip { text-align: center; } .pjr-left .theme-btn { display: inline-block; } } @media (max-width: 480px) { .pjr-cards { grid-template-columns: 1fr; } } /* ===================================================== About Page ===================================================== */ .about-page-banner { background: #558E4C; padding: 48px 0 40px; } .about-page-banner nav { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 10px; } .about-page-banner nav ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; } .about-page-banner nav a { color: rgba(255, 255, 255, 0.75); text-decoration: none; } .about-page-banner .breadcrumb-sep { padding: 0 4px; } .about-page-banner .breadcrumb-current { color: var(--color-primary); } .about-page-banner h1 { color: #fff; font-size: 2.2rem; font-weight: 700; margin: 0 0 8px; } .about-banner-sub { color: rgba(255, 255, 255, 0.75); margin: 0; font-size: 1.05rem; } /* Section vertical rhythm */ .about-section-pad { padding: 56px 0; } /* Image with floating badge */ .about-img-wrapper { position: relative; } .about-img-wrapper img { width: 100%; border-radius: 12px; box-shadow: 0 4px 28px rgba(0, 0, 0, 0.14); } .about-img-badge { position: absolute; bottom: 24px; left: 24px; background: var(--color-primary); color: #fff; padding: 12px 20px; border-radius: 8px; font-weight: 700; box-shadow: 0 4px 16px rgba(253, 128, 0, 0.4); text-align: center; line-height: 1.2; } .about-img-badge-number { font-size: 2rem; } .about-img-badge-label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; } /* Body text */ .about-body-text { color: #666; line-height: 1.85; margin-bottom: 14px; } /* Trust badges */ .about-trust-badges { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 28px; } .about-trust-badge { display: flex; align-items: center; gap: 8px; } .about-trust-badge i { color: var(--color-primary); font-size: 1rem; flex-shrink: 0; } .about-trust-badge span { font-weight: 600; font-size: 0.9rem; color: #333; } /* Stats bar */ .about-stats-bar { background: #2b2b2b; padding: 48px 0; } .about-stat-number { color: var(--color-primary); font-size: 2.8rem; font-weight: 800; line-height: 1; } .about-stat-number--multiline { line-height: 1.1; } .about-stat-star { font-size: 1.8rem; } .about-stat-label { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; margin-top: 8px; } /* Why choose us */ .about-why-section { background: var(--section-bg-color); padding: 56px 0; } .about-why-card { background: #fff; border-radius: 12px; padding: 32px 24px; height: 100%; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); text-align: center; } .about-why-icon { width: 68px; height: 68px; background: #FFF3E6; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .about-why-icon img { width: 38px; height: 38px; object-fit: contain; } .about-why-card h3 { color: #333; font-size: 1.05rem; margin-bottom: 10px; font-weight: 700; } .about-why-card p { color: #666; font-size: 0.88rem; line-height: 1.75; margin: 0; } /* Section images */ .about-section-img { width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); } /* Pull quote */ .about-quote { border-left: 4px solid var(--color-primary); padding: 16px 20px; margin: 0 0 28px; background: var(--section-bg-color); border-radius: 0 8px 8px 0; } .about-quote p { margin: 0 0 8px; font-style: italic; color: #444; line-height: 1.75; } .about-quote footer { font-weight: 700; color: #333; font-size: 0.88rem; background: none; padding: 0; } /* Gallery */ .about-gallery-section { background: var(--section-bg-color); padding: 56px 0; } .about-gallery-img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; } .about-gallery-link { display: inline-block; padding: 12px 28px; border: 2px solid #333; color: #333; border-radius: 6px; font-weight: 600; text-decoration: none; font-size: 0.95rem; transition: background 0.2s, color 0.2s; } .about-gallery-link:hover { background: #333; color: #fff; text-decoration: none; } /* Map */ .about-map-lead { color: #666; max-width: 580px; margin: 12px auto 0; } .about-map-lead a { color: #558E4C; } #service-area-map { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12); height: 500px; } /* CTA bar */ .about-cta-bar { background: var(--color-primary); padding: 48px 0; text-align: center; } .about-cta-bar h2 { color: #fff; font-size: 1.8rem; font-weight: 700; margin-bottom: 10px; } .about-cta-bar p { color: rgba(255, 255, 255, 0.9); margin-bottom: 28px; font-size: 1.05rem; } .about-cta-btn { display: inline-block; background: #fff; color: var(--color-primary); font-weight: 700; padding: 14px 32px; border-radius: 6px; text-decoration: none; font-size: 1rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); transition: opacity 0.2s; } .about-cta-btn:hover { opacity: 0.9; color: var(--color-primary); text-decoration: none; } /* Match button widths on mobile — both "Request Quote" and "Get Quote" full-width */ @media (max-width: 767px) { #pickupSubmitButton, .pjr-left .theme-btn { display: block !important; width: 100% !important; box-sizing: border-box; } } .quote-link { font-size: 18px; color: #ffffff; padding: 12px 25px; position: relative; cursor: pointer; text-align: center; font-weight: 600; overflow: hidden; z-index: 1; border: none; border-radius: 0px; background: #558E4C; box-shadow: 0 3px 24px rgb(0 0 0 / 10%); transition: all 0.5sease-in-out; text-decoration: none; } .quote-link::before { content: ""; position: absolute; left: -2px; top: -2px; width: 0; height: 0; background: #FD8000; z-index: -1; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .quote-link:hover { color: #ffffff; } .quote-link:hover::before { width: 105%; height: 105%; } @media(max-width: 767px) { .c-2347 .pjr-container { } } .footer { background-color: #2D651A !important; padding: 0 !important; } /* → wastex-legacy.css: .footer__links-container, .newsletter CSS var, .navbar-with-contacts bg */ /* waste images */ .image-container { display: flex; justify-content: center; /* Centers the entire container */ align-items: center; /* Centers items vertically */ flex-wrap: wrap; gap: 16px; margin: 0 auto; /* Center the container within the parent element */ max-width: 1200px; /* Set a maximum width for the container */ } .image-item { flex: 1 1 calc(25% - 16px); max-width: 300px; /* Ensures images don't get too wide */ text-align: center; /* Center the content inside the item */ } .image-item img { width: 100%; height: auto; } @media (max-width: 768px) { .image-item { flex: 1 1 100%; } } /* → wastex-legacy.css: .c-2404, .c-2400, .c-2401, .section-component padding, .newsletter__title, .contact-quote-request form inputs */ /* =================== Construction / Service Landing Page Layout (cp-*) ====================== */ .construction-page-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px 60px; } .cp-wrapper { display: flex; gap: 40px; align-items: flex-start; } .cp-main-content { flex: 1; min-width: 0; } .cp-side-panel { width: 320px; flex-shrink: 0; position: sticky; top: 100px; } /* Hero card */ .cp-hero-card { border-left: 5px solid #558E4C; padding: 30px 35px; margin-bottom: 30px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .cp-title { font-size: 28px; font-weight: 700; color: #404A3D; line-height: 1.3; letter-spacing: 0.5px; margin-bottom: 12px; } .cp-accent { color: #558E4C; } .cp-lead { font-size: 16px; color: #757F95; margin: 0; line-height: 1.6; } /* Main content typography */ .cp-main-content > p { font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 20px; } .cp-feature-img { width: 100%; border-radius: 6px; margin: 20px 0 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); } .cp-section-heading { font-size: 22px; font-weight: 700; color: #404A3D; margin: 30px 0 15px; padding-bottom: 10px; border-bottom: 2px solid #558E4C; letter-spacing: 0.5px; } /* Service list */ .cp-service-list { list-style: none; padding: 0; margin: 0 0 25px; } .cp-service-list li { position: relative; padding: 10px 0 10px 28px; font-size: 15px; line-height: 1.7; color: #555; border-bottom: 1px solid #f0f0f0; } .cp-service-list li:last-child { border-bottom: none; } .cp-service-list li::before { content: "\f058"; font-family: "Font Awesome 5 Pro"; font-weight: 900; position: absolute; left: 0; top: 12px; color: #558E4C; font-size: 14px; } .cp-service-list li strong { color: #404A3D; } /* Sites grid */ .cp-sites-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 25px; } .cp-site-item { background: #f9f9f9; padding: 18px 20px; border-radius: 4px; font-size: 15px; line-height: 1.6; color: #555; border-left: 3px solid #FD8000; } .cp-site-item strong { color: #404A3D; display: block; margin-bottom: 5px; } /* FAQ section */ .cp-faq-section { margin-top: 35px; } .cp-faq-item { background: #fff; padding: 18px 22px; margin-bottom: 12px; border-radius: 4px; box-shadow: 0 1px 6px rgba(0,0,0,0.04); border-left: 3px solid #558E4C; } .cp-faq-item strong { display: block; color: #404A3D; font-size: 15px; margin-bottom: 8px; } .cp-faq-item p { font-size: 15px; line-height: 1.7; color: #666; margin: 0; } /* Side panel */ .cp-side-img { width: 100%; border-radius: 6px; margin-bottom: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); } .cp-side-video { position: relative; display: block; width: 100%; border-radius: 6px; overflow: hidden; margin-bottom: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.15); text-decoration: none; background: #000; } .cp-side-video:hover .cp-side-video__play svg path:first-child { fill: #cc0000; } .cp-side-video__thumb { display: block; width: 100%; height: auto; opacity: 0.85; transition: opacity 0.2s ease; } .cp-side-video:hover .cp-side-video__thumb { opacity: 0.7; } .cp-side-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); } .cp-side-video__play svg path:first-child { transition: fill 0.2s ease; } .cp-side-video__label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.8rem; text-align: center; padding: 6px; letter-spacing: 0.02em; } /* Embedded YouTube player in side panel */ .cp-side-video-embed { position: relative; width: 100%; padding-bottom: 177.78%; /* 9:16 for Shorts */ border-radius: 6px; overflow: hidden; margin-bottom: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.15); background: #000; } .cp-side-video-embed iframe, .cp-side-video-embed .yt-facade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; aspect-ratio: unset; border-radius: 0; } .cp-side-box { background: #f9f9f9; border-radius: 6px; padding: 25px; margin-bottom: 25px; } .cp-side-heading { font-size: 20px; font-weight: 700; color: #404A3D; margin-bottom: 12px; letter-spacing: 0.5px; } .cp-side-box p { font-size: 15px; line-height: 1.7; color: #555; margin-bottom: 10px; } .cp-area-list { padding-left: 18px; margin: 0; } .cp-area-list li { list-style: disc; font-size: 15px; color: #555; margin-bottom: 6px; } /* --- SIDEBAR CTA SWAP --- */ .cp-form-placeholder .cp-side-box { background: #558E4C !important; color: #fff !important; } .cp-form-placeholder .cp-side-box .cp-side-heading, .cp-form-placeholder .cp-side-box p { color: #fff !important; } .cp-call-box { background: #f9f9f9 !important; color: #333 !important; padding: 25px; border-radius: 6px; text-align: center; margin-bottom: 25px; } .cp-call-box strong { color: #404A3D !important; } .cp-call-box p, .cp-call-box .cp-fast-track { color: #666 !important; } /* --- PREMIUM FOOTER REFINEMENTS --- */ /* Social Icons — Transparent Circle Style */ .footer-social li a i { background: transparent !important; border: 1px solid rgba(255,255,255,0.25) !important; color: #fff !important; transition: all 0.3s ease !important; } .footer-social li a i:hover { background: #FD8000 !important; border-color: #FD8000 !important; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(253, 128, 0, 0.3); } /* Newsletter widget removed — CSS rules deleted */ /* Dim the Selltime credit */ .selltime-credit { opacity: 0.5; } /* Footer Heading standard margin */ .footer-widget-title { margin-bottom: 20px !important; } /* CTA / Call box */ .cp-call-box { background: #558E4C; color: #fff; padding: 25px; border-radius: 6px; text-align: center; margin-bottom: 25px; } .cp-call-box strong { display: block; font-size: 20px; margin-bottom: 10px; color: #fff; } .cp-call-box p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.9); margin-bottom: 15px; } .cp-btn { display: inline-block; background: #FD8000; color: #fff; padding: 12px 30px; font-size: 18px; font-weight: 700; border-radius: 4px; text-decoration: none; transition: background 0.3s; } .cp-btn:hover { background: #e06e00; color: #fff; } .cp-fast-track { font-size: 13px; margin-top: 12px; color: rgba(255,255,255,0.8); } .cp-form-placeholder { margin-bottom: 25px; } /* Responsive */ @media (max-width: 991px) { .cp-wrapper { flex-direction: column; } .cp-side-panel { width: 100%; position: static; } .cp-sites-grid { grid-template-columns: 1fr; } .cp-hero-card { padding: 20px 25px; } .cp-title { font-size: 24px; } } /* CTA estimate bar */ .cta-estimate-bar { display: flex; align-items: center; justify-content: center; background: #FD8000; color: #fff; padding: 14px 30px; border-radius: 6px; margin-bottom: 35px; cursor: pointer; text-decoration: none; gap: 14px; transition: background 0.3s; } .cta-estimate-bar:hover { background: #E06E00; color: #fff; text-decoration: none; } .cta-estimate-bar i { font-size: 24px; } .cta-estimate-bar span { font-size: 22px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } @media (max-width: 575px) { .cta-estimate-bar { padding: 16px 18px; gap: 10px; } .cta-estimate-bar span { font-size: 16px; letter-spacing: 0.5px; white-space: normal; } .cta-estimate-bar i { font-size: 20px; flex-shrink: 0; } } /* Quote popup modal */ #quotePopupModal .modal-dialog { max-width: 620px; } #quotePopupModal .modal-header { background: #FD8000; color: #fff; border-bottom: none; } #quotePopupModal .modal-title { color: #fff; font-size: 20px; font-weight: 700; } #quotePopupModal .btn-close { filter: invert(1); } #quotePopupModal .modal-body { padding: 30px; } #quotePopupModal .form-group { margin-bottom: 15px; } #quotePopupModal .form-control { border-radius: 4px; border: 1px solid #ddd; padding: 10px 14px; } #quotePopupModal .form-message { margin-top: 10px; font-weight: 600; } #quotePopupModal .form-message.success { color: #2e7d32; } #quotePopupModal .form-message.error { color: #c62828; } /* ===== Before & After Marquee Section ===== */ .ba-section { background: #2a4a2a; padding: 50px 0 60px; overflow: hidden; } .ba-heading { text-align: center; margin-bottom: 36px; padding: 0 20px; } .ba-label { font-size: 14px; font-weight: 700; letter-spacing: 3px; color: rgba(255,255,255,0.6); text-transform: uppercase; margin-bottom: 8px; } .ba-title { font-size: 32px; font-weight: 700; color: #fff; margin: 0; } /* Scroll mask — clips the moving track */ .ba-scroll-mask { overflow: hidden; width: 100%; } /* Single track — all pairs move together left */ .ba-track { display: flex; flex-direction: row; gap: 12px; width: max-content; animation: ba-scroll-left 45s linear infinite; } .ba-track:hover { animation-play-state: paused; } @keyframes ba-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Each pair: before stacked above after */ .ba-pair { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } /* Individual image tile */ .ba-img-wrap { position: relative; width: 280px; height: 200px; border-radius: 6px; overflow: hidden; flex-shrink: 0; } .ba-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Before / After badges */ .ba-badge { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; color: #fff; pointer-events: none; } .ba-before { background: rgba(0,0,0,0.55); } .ba-after { background: #FD8000; } @media (max-width: 575px) { .ba-title { font-size: 24px; } .ba-img-wrap { width: 200px; height: 150px; } } /* cp-faq-section accordion — matches .faq-area styling */ .cp-faq-section .accordion-item { border: none; margin-bottom: 30px; border-radius: 0px !important; box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%); } .cp-faq-section .accordion-button:not(.collapsed) { color: #558E4C; background-color: #fff; box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%); } /* ===== Reviews Page Redesign ===== */ .reviews-page-section { padding: 60px 0; background: #f9f9f9; } .reviews-hero-bar { background: linear-gradient(135deg, #FD8000 0%, #e06e00 100%); border-radius: 10px; padding: 30px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; color: #fff; } .reviews-hero-score { font-size: 72px; font-weight: 900; line-height: 1; color: #fff; margin-right: 20px; } .reviews-hero-left { display: flex; align-items: center; gap: 16px; } .reviews-hero-stars { font-size: 20px; color: #FFD700; margin: 6px 0; } .reviews-hero-count { font-size: 15px; color: rgba(255,255,255,0.9); } .reviews-hero-source { height: 42px; width: auto; margin-bottom: 6px; display: block; } .reviews-hero-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .reviews-qr { height: 90px; width: 90px; border-radius: 6px; background: #fff; padding: 4px; display: block; max-width: 100%; } .reviews-qr-label { font-size: 11px; color: rgba(255,255,255,0.8); margin-top: 5px; } .reviews-write-btn { background: #fff !important; color: #FD8000 !important; border-color: #fff !important; font-weight: 700; white-space: nowrap; } .reviews-write-btn::before { background: #f0f0f0 !important; } .reviews-write-btn:hover { color: #E06E00 !important; } .reviews-stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 50px; } .reviews-stat-box { background: #fff; border-radius: 8px; padding: 20px; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.07); border-top: 4px solid #FD8000; } .reviews-stat-box .stat-number { font-size: 32px; font-weight: 800; color: #FD8000; display: block; line-height: 1.1; } .reviews-stat-box .stat-label { font-size: 13px; color: #666; margin-top: 4px; } .reviews-section-heading { font-size: 26px; font-weight: 700; color: #222; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 3px solid #FD8000; display: inline-block; } .reviews-featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 50px; } .reviews-featured-card { background: #fff8f0; border: 2px solid #FD8000; border-radius: 10px; padding: 28px; position: relative; } .reviews-featured-badge { position: absolute; top: -12px; left: 20px; background: #FD8000; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 20px; letter-spacing: 0.5px; text-transform: uppercase; } .reviews-featured-card .review-author-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .review-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; flex-shrink: 0; } .review-avatar-sm { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; } .review-author-name { font-size: 15px; font-weight: 700; color: #222; margin: 0; } .review-author-date { font-size: 12px; color: #999; margin: 0; } .review-stars { color: #F4B942; font-size: 13px; margin-bottom: 10px; } .review-stars.one-star i:not(:first-child) { color: #ddd; } .review-text-full { font-size: 14px; color: #444; line-height: 1.7; } .reviews-all-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .review-grid-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); border: 1px solid #eee; display: flex; flex-direction: column; } .review-grid-card .review-author-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .review-text-clamp { font-size: 13px; color: #555; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; flex: 1; } .review-grid-card.one-star-card { border-left: 4px solid #e74c3c; } @media (max-width: 991px) { .reviews-stats-strip { grid-template-columns: repeat(2, 1fr); } .reviews-featured-grid { grid-template-columns: 1fr; } .reviews-all-grid { grid-template-columns: repeat(2, 1fr); } .reviews-hero-score { font-size: 52px; } } @media (max-width: 575px) { .reviews-stats-strip { grid-template-columns: repeat(2, 1fr); } .reviews-all-grid { grid-template-columns: 1fr; } .reviews-hero-bar { padding: 24px 20px; flex-direction: column; align-items: flex-start; } .reviews-hero-right { width: 100%; justify-content: space-between; } .reviews-hero-score { font-size: 52px; } } /* → wastex-legacy.css: .site-title fix, .header-top* compact, .cta-area, .industry-item/img, inner-page py-120 padding, mobile Wastex utility overrides */ /* Quote page — pitch column with background image + overlay */ .quote-pitch { position: relative; overflow: hidden; border-radius: 8px; padding: 44px 36px; min-height: 480px; background-color: #2a3d29; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; } /* Dark overlay for text readability */ .quote-pitch::before { content: ''; position: absolute; inset: 0; background: rgba(18, 38, 18, 0.74); z-index: 0; } /* All children sit above the overlay */ .quote-pitch > * { position: relative; z-index: 1; } .quote-pitch .site-title-tagline { display: block; margin-bottom: 10px; color: #FD8000; font-weight: 600; } .quote-pitch .site-title { font-size: 1.9rem; margin-bottom: 16px; line-height: 1.25; color: #fff !important; } .quote-intro { color: rgba(255, 255, 255, 0.88); font-size: 1.05em; line-height: 1.65; margin-bottom: 24px; } .quote-benefits { list-style: none; padding: 0; margin: 0 0 24px; } .quote-benefits li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-weight: 500; } .quote-benefits li i { color: #FD8000; font-size: 1.05em; flex-shrink: 0; width: 18px; text-align: center; } .quote-tip { background: rgba(255, 255, 255, 0.1); border-left: 3px solid #FD8000; padding: 12px 16px; border-radius: 4px; color: rgba(255, 255, 255, 0.88); font-size: 0.95em; margin: 0; } .quote-tip i { color: #FD8000; } /* Google rating badge */ .quote-google-rating { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; text-decoration: none; } .quote-stars { color: #FD8000; font-size: 1.15em; letter-spacing: 2px; line-height: 1; } .quote-rating-text { color: rgba(255, 255, 255, 0.82); font-size: 0.88em; } .quote-rating-text strong { color: #fff; } .quote-google-rating:hover .quote-rating-text { color: #fff; text-decoration: underline; } /* 2-hour response highlight strip */ .quote-response-strip { display: flex; align-items: center; gap: 10px; background: rgba(253, 128, 0, 0.15); border-left: 3px solid #FD8000; border-radius: 4px; padding: 10px 14px; margin-bottom: 20px; color: #fff; font-weight: 600; font-size: 0.98em; } .quote-response-strip i { color: #FD8000; } /* ── Quote page hero layout ──────────────────────────────────────────────── */ .quote-hero { background: #2a3d29; min-height: calc(100vh - 78px); display: flex; align-items: center; padding: 44px 24px; } .quote-hero__inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; width: 100%; } /* LEFT column */ .quote-hero__left { color: #fff; display: flex; flex-direction: column; gap: 18px; } .quote-badge { display: inline-block; background: #FD8000; color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; align-self: flex-start; } .quote-hero__title { font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 800; line-height: 1.2; color: #fff; margin: 0; } .quote-hero__title span { color: #FD8000; } .quote-hero__sub { font-size: 1.08rem; color: rgba(255,255,255,0.82); line-height: 1.65; margin: 0; } /* Stars row */ .quote-stars-row { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; cursor: pointer; transition: opacity 0.2s ease; } .quote-stars-row:hover { opacity: 0.8; text-decoration: none; } .quote-stars-icons { color: #FD8000; font-size: 1.2rem; letter-spacing: 2px; line-height: 1; } .quote-stars-row strong { color: #fff; font-size: 1rem; } .quote-stars-count { color: rgba(255,255,255,0.65); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 5px; } .quote-stars-row:hover .quote-stars-count { color: #fff; } .google-g-logo { width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; } /* Trust list */ .quote-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; } .quote-trust li { font-size: 1rem; color: rgba(255,255,255,0.85); } /* Contact options box */ .quote-contact-options { display: flex; flex-direction: column; gap: 4px; } .quote-contact-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); margin: 0 0 6px; } .quote-cta-phone, .quote-cta-whatsapp, .quote-cta-email { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-weight: 500; text-decoration: none; transition: opacity 0.15s; line-height: 1.4; background: none; border: none; } .quote-cta-phone i, .quote-cta-whatsapp i, .quote-cta-email i { width: 20px; text-align: center; font-size: 1.1rem; color: var(--color-primary); flex-shrink: 0; } .quote-cta-phone:hover, .quote-cta-whatsapp:hover, .quote-cta-email:hover { color: var(--color-primary) !important; opacity: 1; text-decoration: underline !important; } .quote-cta-phone { color: rgba(255,255,255,0.9); font-size: 1.1rem; font-weight: 600; transition: all 0.2s ease; } .quote-cta-phone--secondary { color: rgba(255,255,255,0.65); font-size: 1rem; transition: all 0.2s ease; } .quote-cta-whatsapp { color: rgba(255,255,255,0.65); font-size: 1rem; transition: all 0.2s ease; } .quote-cta-email { color: rgba(255,255,255,0.5); font-size: 0.92rem; transition: all 0.2s ease; } .quote-hours { display: flex; align-items: center; gap: 12px; font-size: 0.78rem; color: rgba(255,255,255,0.4); margin: 0; } .quote-hours i { width: 20px; text-align: center; flex-shrink: 0; } /* contact.html — quote-contact-options on a white background */ .contact-area .quote-cta-phone { color: #1a1a1a; } .contact-area .quote-cta-phone--secondary { color: #444; } .contact-area .quote-cta-whatsapp { color: #1a7a3c; } .contact-area .quote-cta-email { color: #555; } .contact-area .quote-hours { color: #777; font-size: 0.88rem; } .contact-area .quote-cta-phone i, .contact-area .quote-cta-whatsapp i, .contact-area .quote-cta-email i, .contact-area .quote-hours i { color: var(--color-primary) !important; } /* Footer contact links hover standardization */ .footer-contact li a { transition: all 0.2s ease; } .footer-contact li a:hover { color: #fff !important; /* Keep white for visibility on dark green */ text-decoration: underline !important; } .footer-contact li a:hover i { color: #fff !important; } /* RIGHT column — form card */ .quote-hero__right { position: sticky; top: 20px; } .quote-form-card { background: #fff; border-radius: 16px; padding: 32px 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .quote-form-title { font-size: 1.35rem; font-weight: 700; color: #2a3d29; margin-bottom: 4px; } .quote-form-tip { font-size: 0.82rem; color: #888; margin-bottom: 18px; } #quote-form-fields.fields-locked { pointer-events: none; user-select: none; } #quote-form-fields { transition: opacity 0.25s ease; } .quote-submit-btn { display: block; width: 100%; background: #FD8000; color: #fff; font-size: 1.05rem; font-weight: 700; padding: 16px; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s, transform 0.15s; text-align: center; margin-top: 4px; } .quote-submit-btn:hover { background: #e07200; transform: translateY(-1px); } /* Responsive */ @media (max-width: 768px) { .quote-hero { min-height: auto; padding: 28px 16px 40px; } .quote-hero__inner { grid-template-columns: 1fr; gap: 28px; } .quote-hero__right { position: static; } .quote-form-card { padding: 22px 18px; } } /* Hero slider — padding and alignment */ .hero-single { min-height: 0 !important; padding-top: 50px !important; padding-bottom: 70px !important; align-items: flex-start !important; position: relative; z-index: 1; } /* Subtle scrim overlay to ensure white text is readable over any photo background */ .hero-single::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%); z-index: -1; } @media (max-width: 991px) { .hero-single { min-height: 0 !important; padding-top: 80px !important; padding-bottom: 90px !important; align-items: flex-start !important; } } @media (max-width: 767px) { .hero-single { min-height: 0 !important; padding-top: 60px !important; padding-bottom: 50px !important; align-items: flex-start !important; } .hero-single .hero-content p { min-height: 3em; } } /* ── Custom hero slider ──────────────────────────────────────────────────── */ .hero-slider { display: grid; position: relative; overflow: hidden; } .hero-slider .hero-single { grid-area: 1 / 1; opacity: 0; transition: opacity 0.8s ease-in-out; pointer-events: none; } .hero-slider .hero-single.active { opacity: 1; pointer-events: auto; } .hero-prev, .hero-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.5); color: #fff; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; transition: background 0.3s, border-color 0.3s; line-height: 1; } .hero-prev { left: 16px; } .hero-next { right: 16px; } .hero-prev:hover, .hero-next:hover, .hero-prev:active, .hero-next:active { background: #FD8000; border-color: #FD8000; } .hero-prev:focus, .hero-next:focus { outline: none; } @media (max-width: 991px) { .hero-prev, .hero-next { top: unset; transform: none; bottom: 16px; width: 40px; height: 40px; font-size: 1rem; } .hero-prev, .hero-next { display: none; } } /* ── Hero slide content entrance animations ─────────────────────────────── */ .hero-single .hero-sub-title, .hero-single .hero-title, .hero-single .hero-content > p, .hero-single .hero-btn { opacity: 0; transform: translateY(25px); } @keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } } .hero-single.active .hero-sub-title { animation: heroFadeUp 0.6s ease forwards 0.3s; } .hero-single.active .hero-title { animation: heroFadeUp 0.6s ease forwards 0.55s; } .hero-single.active .hero-content > p { animation: heroFadeUp 0.6s ease forwards 0.75s; } .hero-single.active .hero-btn { animation: heroFadeUp 0.6s ease forwards 0.95s; } @media (prefers-reduced-motion: reduce) { .hero-single .hero-sub-title, .hero-single .hero-title, .hero-single .hero-content > p, .hero-single .hero-btn { opacity: 1; transform: none; animation: none; } } /* ── Homepage single-row photo ticker ────────────────────────────────────── */ .hw-scroll-mask { overflow: hidden; width: 100%; } .hw-track { display: flex; flex-direction: row; gap: 10px; width: max-content; animation: ba-scroll-left 50s linear infinite; cursor: pointer; } .hw-track:hover { animation-play-state: paused; } .hw-item { flex-shrink: 0; width: 280px; height: 200px; border-radius: 6px; overflow: hidden; position: relative; } .hw-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .hw-item:hover img { transform: scale(1.06); } @media (max-width: 575px) { .hw-item { width: 200px; height: 150px; } } /* ── Custom lightbox ─────────────────────────────────────────────────────── */ #pjr-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.93); z-index: 9999; align-items: center; justify-content: center; } #pjr-lightbox.open { display: flex; } .pjr-lb-img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 3px; user-select: none; display: block; } .pjr-lb-close { position: absolute; top: 18px; right: 22px; background: none; border: none; color: #fff; font-size: 1.8rem; cursor: pointer; opacity: 0.75; transition: opacity 0.2s; line-height: 1; padding: 0; } .pjr-lb-close:hover { opacity: 1; } .pjr-lb-prev, .pjr-lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.3); color: #fff; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: background 0.2s, border-color 0.2s; line-height: 1; } .pjr-lb-prev { left: 20px; } .pjr-lb-next { right: 20px; } .pjr-lb-prev:hover, .pjr-lb-next:hover { background: #FD8000; border-color: #FD8000; } .pjr-lb-prev:focus, .pjr-lb-next:focus { outline: none; } .pjr-lb-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.65); font-size: 0.85rem; white-space: nowrap; } @media (max-width: 576px) { .pjr-lb-prev { left: 8px; width: 40px; height: 40px; font-size: 1rem; } .pjr-lb-next { right: 8px; width: 40px; height: 40px; font-size: 1rem; } } /* → wastex-legacy.css: justify text in Wastex content sections */ /* Replace JS-driven fixed-top with CSS sticky nav — eliminates the content jump that hides headings behind the navbar on scroll */ .main-navigation .navbar { position: sticky !important; top: 0; background: #fff !important; box-shadow: 0 2px 10px rgba(0,0,0,0.08); z-index: 999; } /* → wastex-legacy.css: .copyright row/menu/col centering */ /* ===== Load size guide (quote page) ===== */ .load-guide-section { padding: 56px 0 48px; background: #f8f9fa; } .load-guide-intro { text-align: center; margin-bottom: 36px; } .load-guide-eyebrow { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #FD8000; margin-bottom: 6px; } .load-guide-title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; color: #2a3d29; margin: 0; } .load-guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .load-card { background: #fff; border-radius: 14px; padding: 28px 20px 24px; text-align: center; box-shadow: 0 2px 14px rgba(0,0,0,0.07); border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; transition: box-shadow 0.2s; } .load-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.12); } .load-card--popular { border-color: #FD8000; } .load-card__popular-badge { background: #FD8000; color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; } .load-card__fraction { font-size: 1.15rem; font-weight: 800; color: #2a3d29; margin-bottom: 4px; } .load-card__volume { font-size: 2rem; font-weight: 900; color: #FD8000; line-height: 1; margin-bottom: 4px; } .load-card__cubic { font-size: 0.76rem; color: #999; margin-bottom: 14px; } .load-card__items { list-style: none; padding: 0; margin: 0 0 10px; flex: 1; } .load-card__items li { font-size: 0.85rem; color: #555; padding: 3px 0; border-bottom: 1px solid #f3f3f3; } .load-card__items li:last-child { border-bottom: none; } .load-card__usecase { font-size: 0.78rem; color: #FD8000; font-style: italic; margin: 0; } @media (max-width: 991px) { .load-guide-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .load-guide-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .load-card { padding: 18px 12px 16px; } .load-card__volume { font-size: 1.5rem; } .load-card__fraction { font-size: 1rem; } } /* ===== Suburb gate ===== */ #suburb-gate { margin-bottom: 4px; } .suburb-gate-label { font-size: 0.82rem; font-weight: 600; color: #444; margin-bottom: 6px; display: block; } .suburb-input-wrap { position: relative; } .suburb-suggestions { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 8px 8px; margin: 0; padding: 0; list-style: none; z-index: 100; box-shadow: 0 6px 16px rgba(0,0,0,0.1); max-height: 280px; overflow-y: auto; } .suburb-suggestions li { padding: 10px 14px; font-size: 0.92rem; cursor: pointer; border-bottom: 1px solid #f0f0f0; color: #333; } .suburb-suggestions li:last-child { border-bottom: none; } .suburb-suggestions li:hover, .suburb-suggestions li.active { background: #fff5eb; color: #FD8000; } .suburb-error { display: none; font-size: 0.82rem; color: #c0392b; margin: 6px 0 0; } /* Confirmed suburb pill */ .suburb-confirmed-bar { display: flex; align-items: center; gap: 7px; background: #f0faf0; border: 1px solid #b8ddb8; border-radius: 6px; padding: 7px 12px; font-size: 0.88rem; color: #2d6e2d; margin-bottom: 12px; } .suburb-confirmed-bar i { color: #3a9c3a; font-size: 0.85rem; } #suburb-change { margin-left: auto; font-size: 0.78rem; color: #888; text-decoration: underline; } #suburb-change:hover { color: #FD8000; } /* ===== Quote page — minimal header ===== */ .quote-minimal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 32px; background: #fff; border-bottom: 1px solid #eee; } .quote-minimal-logo img { height: 52px; width: auto; } .quote-minimal-back { font-size: 0.88rem; color: #555; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color 0.15s; } .quote-minimal-back:hover { color: #FD8000; text-decoration: none; } /* ===== Voice input mic button ===== */ .voice-btn { position: absolute; bottom: 6px; right: 6px; width: 44px; height: 44px; border-radius: 50%; border: none; background: #f0f0f0; color: #555; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, color 0.2s; z-index: 2; } .voice-btn:hover { background: #e0e0e0; } .voice-btn--on { background: #e53935; color: #fff; animation: voice-pulse 1.2s ease-in-out infinite; } @keyframes voice-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,57,53,0.5); } 50% { box-shadow: 0 0 0 7px rgba(229,57,53,0); } } .voice-status { font-size: 0.78rem; color: #888; margin: 4px 0 0; } /* ================================================= Semantic Section System Each section type owns its spacing and background. Adding or removing sections never breaks the rhythm. To change all section padding globally, edit here. ================================================= */ section.features { padding: 40px 0 0 !important; } section.services { padding: 25px 0 30px !important; margin-bottom: 4rem !important; background: #F6F1EA; } section.process { padding: 30px 0 50px !important; background: #fff; } section.split { padding: 30px 0 !important; } section.gallery { padding: 50px 0 20px !important; } section.cta { padding: 0 !important; } section.logos { padding: 30px 0 !important; } section.logos .site-heading { margin-bottom: 20px; } .dont-collect-icons img { width: 160px; max-width: 160px; } section.form { padding: 0 !important; background: #3D473A; } section.reviews { padding: 40px 0 !important; } section.faq { padding: 30px 0 50px !important; } /* FAQ accordion button alignment */ .faq-area .accordion-button { display: flex; align-items: center; text-align: left; padding: 1.25rem 1.5rem; } .faq-area .accordion-item { height: 100%; } section.social { padding: 40px 0 !important; } section.text { padding: 30px 0 40px !important; } section.attributes { padding: 25px 0 !important; } /* → wastex-legacy.css: section.* .py-120 stripping */ /* Remove feature card bottom margin so it doesn't bleed into the next section */ section.features .feature-item { margin-bottom: 0; } @media (max-width: 767px) { section.features, section.services, section.split, section.reviews, section.social, section.text, section.attributes { padding: 25px 0 !important; } section.process, section.gallery, section.cta, section.form, section.faq { padding: 30px 0 !important; } section.logos { padding: 15px 0 !important; } } /* Service cards padding enhancement */ .service-cards .card .card-body, .c-2307 .features-container .feature .card-body { padding: 2.5rem !important; overflow: hidden; } /* Subtle Selltime watermark */ .selltime-credit { font-size: 0.78em; color: rgba(255,255,255,0.35); font-weight: 400; letter-spacing: 0.01em; } .selltime-credit a, .selltime-credit a:visited, .selltime-credit a:active { color: rgba(255,255,255,0.35) !important; text-decoration: none !important; } .selltime-credit a:hover { color: rgba(255,255,255,0.6) !important; text-decoration: underline !important; } /* Quote / contact form floating labels (white background) */ .form-field { position: relative; margin-bottom: 0; } .form-field .form-control { height: 56px !important; padding-top: 26px !important; padding-bottom: 8px !important; } .form-field textarea.form-control { height: auto !important; padding-top: 32px !important; min-height: 100px; } .form-field label { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); font-size: 0.95em; color: #aaa; pointer-events: none; transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease; white-space: nowrap; margin: 0; line-height: 1; } .form-field textarea ~ label { top: 20px; transform: none; } .form-field .form-control:focus ~ label, .form-field .form-control:not(:placeholder-shown) ~ label { top: 8px; font-size: 0.72em; color: var(--color-primary); transform: none; } .form-field .form-control:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 0.15rem rgba(253, 128, 0, 0.15) !important; outline: none !important; } /* Quote popup modal — make form-group tall enough for the floated label */ #quotePopupModal .form-group { margin-top: 6px; } #quotePopupModal .form-field .form-control { height: 56px !important; padding-top: 26px !important; padding-bottom: 8px !important; padding-left: 14px !important; } /* Newsletter floating labels removed */ /* → wastex-legacy.css: .industry-arrow .theme-btn */ /* ── Services submenu dropdown ────────────────────────────────────────── Re-enables the caret hidden by the blanket .header .nav-link::after rule, overrides wastex green to brand orange, widens the menu, and wires up Bootstrap's .show class so click-toggle works on mobile. ─────────────────────────────────────────────────────────────────────── */ /* Re-enable dropdown caret — higher specificity wins over the ::after:none rule */ html body .header .main-navigation .navbar .navbar-nav .nav-item .nav-link.dropdown-toggle::after { display: inline-block !important; content: "\f107" !important; font-family: "Font Awesome 5 Pro" !important; font-weight: 400 !important; border: none !important; font-size: 11px !important; margin-left: 5px !important; vertical-align: middle !important; opacity: 1 !important; width: auto !important; height: auto !important; visibility: visible !important; } /* Widen to fit "Construction Rubbish Removal" */ .navbar .nav-item .dropdown-menu { width: 270px !important; min-width: 270px !important; } /* Dropdown item base — ensure position context and smooth transition */ .navbar .nav-item .dropdown-menu .dropdown-item { position: relative !important; transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease !important; } /* Left accent bar — hidden by default */ .navbar .nav-item .dropdown-menu .dropdown-item::before { content: "" !important; display: block !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 4px !important; height: 100% !important; background: #FD8000 !important; opacity: 0 !important; transition: opacity 0.2s ease !important; } /* Hover / focus / touch-press indication — orange tint, orange text, bar appears */ .navbar .nav-item .dropdown-menu .dropdown-item:hover, .navbar .nav-item .dropdown-menu .dropdown-item:focus, .navbar .nav-item .dropdown-menu .dropdown-item:active, .navbar .nav-item .dropdown-menu .dropdown-item.is-touched { background-color: rgba(253, 128, 0, 0.08) !important; color: #FD8000 !important; padding-left: 22px !important; } .navbar .nav-item .dropdown-menu .dropdown-item:hover::before, .navbar .nav-item .dropdown-menu .dropdown-item:focus::before, .navbar .nav-item .dropdown-menu .dropdown-item:active::before, .navbar .nav-item .dropdown-menu .dropdown-item.is-touched::before { opacity: 1 !important; } /* Reveal dropdown when Bootstrap JS adds .show (needed for mobile click) */ .navbar .nav-item .dropdown-menu.show { opacity: 1 !important; visibility: visible !important; top: 100% !important; } /* ── Mobile dropdown ────────────────────────────────────────────────── */ @media (max-width: 991px) { /* Give the collapsed nav room to scroll if many items are open */ .navbar-collapse { max-height: 80vh !important; overflow-x: hidden !important; overflow-y: auto !important; } /* Dropdown sits inline in the mobile nav, not absolutely positioned */ .navbar .nav-item .dropdown-menu { position: static !important; float: none !important; box-shadow: none !important; width: 100% !important; min-width: unset !important; padding: 0 0 8px 12px !important; border: none !important; border-left: 3px solid #FD8000 !important; margin: 4px 0 4px 0 !important; /* Reset Bootstrap's absolute positioning transforms */ transform: none !important; inset: auto !important; } /* Bootstrap adds/removes .show — honour it */ .navbar .nav-item .dropdown-menu:not(.show) { display: none !important; } .navbar .nav-item .dropdown-menu.show { display: block !important; } /* Caret floats to the right on mobile */ html body .header .main-navigation .navbar .navbar-nav .nav-item .nav-link.dropdown-toggle::after { float: right !important; margin-top: 6px !important; } } /* ── Locations hub page ── */ .locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 32px; } .locations-region { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 24px 28px; box-shadow: var(--shadow-3); } .locations-region-title { font-size: 1.7rem; font-weight: 700; color: #222; margin-bottom: 14px; } .locations-region-title i { color: var(--color-primary); margin-right: 6px; } .locations-list { list-style: none; padding: 0; margin: 0 0 12px 0; } .locations-list li { padding: 5px 0; font-size: 1.5rem; } .locations-list li a { color: #333; text-decoration: none; font-weight: 600; transition: color 0.2s; } .locations-list li a:hover { color: var(--color-primary); } .locations-list li.locations-placeholder { color: #999; font-style: italic; font-weight: 400; } .locations-coming-soon { font-size: 1.3rem; color: #888; margin: 8px 0 0 0; font-style: italic; } /* → wastex-legacy.css: .collect-content h3, .collect-content-info ul */ /* Footer areas grid */ .footer-areas-section { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 24px 0 32px; } .footer-areas-grid { display: block; column-count: 6; column-gap: 1rem; padding: 0; margin: 0; } .footer-areas-grid li { break-inside: avoid; margin-bottom: 6px; } @media (max-width: 1199px) { .footer-areas-grid { column-count: 5; } } @media (max-width: 991px) { .footer-areas-grid { column-count: 4; } } @media (max-width: 767px) { .footer-areas-grid { column-count: 3; } } @media (max-width: 480px) { .footer-areas-grid { column-count: 2; } } /* Hero title responsive line break — hidden on desktop, visible on mobile */ .hero-title-br { display: none; } @media (max-width: 767px) { .hero-title-br { display: inline; } } /* ── ISSUE 1: Accordion arrow direction fix ───────────────────────────────── Bootstrap default + wastex both inject a downward SVG but wastex also sets it on :not(.collapsed), leaving the collapsed state with an upward icon from the theme's background-image default. Force the correct direction explicitly. Collapsed (default) = ∨ (down) Expanded (.not.collapsed) = ∧ (up, rotated) --------------------------------------------------------------------------- */ .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23204066'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; transform: rotate(0deg) !important; transition: transform 0.25s ease !important; } .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23558E4C'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; transform: rotate(180deg) !important; } /* → wastex-legacy.css: .feature-item mobile shadow fix, .feature-area-wrapper max-width */ /* ── Viewport lock: prevent horizontal scrollbar ──────────────────────────── Chrome treats overflow-x:clip on ANY ancestor as confining position:sticky to that element. So we must keep html/body/content-wrapper free of any overflow-x restriction. Individual sections already have overflow:hidden set by wastex, which is enough to prevent actual horizontal scrollbars. --------------------------------------------------------------------------- */ html { overflow-x: visible; } body { max-width: 100%; overflow-x: visible; /* override wastex's clip */ position: relative; } /* Hero section: clip nav arrow shadows that can trigger mobile overflow */ .hero-area, .hero-slider-area, section.hero-single { overflow: hidden; max-width: 100%; position: relative; } /* ── ISSUE 4: Form validation visual feedback ────────────────────────────── */ #contact-form .is-invalid, .quote-form .is-invalid { border: 2px solid #dc3545 !important; border-radius: 4px; outline: none; } #contact-form .is-invalid:focus, .quote-form .is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important; } /* ── Mobile nav CTA (Need Pickup? strip) ─────────────────────────────────── */ .mobile-nav-cta { background: #558E4C; margin: 0 -20px 6px; padding: 10px 20px; } .mobile-nav-cta a { display: flex; align-items: center; gap: 14px; text-decoration: none; } .mobile-nav-cta-icon { width: 44px; height: 44px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mobile-nav-cta-icon i { color: #558E4C; font-size: 1.1rem; } .mobile-nav-cta-text { display: flex; flex-direction: column; line-height: 1.3; } .mobile-nav-cta-label { color: #FD8000; font-weight: 700; font-size: 0.9rem; } .mobile-nav-cta-number { color: #fff; font-weight: 600; font-size: 1rem; } /* ── Mobile nav menu ─────────────────────────────────────────────────────── */ @media (max-width: 991px) { .navbar .nav-item .nav-link { padding-top: 7px !important; padding-bottom: 7px !important; } .navbar .navbar-collapse { padding-bottom: 8px; /* Remove height cap so all items + CTA are visible without inner scroll */ max-height: none !important; overflow-y: visible !important; } /* Hide the desktop active-indicator bar — looks broken when nav is stacked */ html body .header .main-navigation .navbar .navbar-nav .nav-item .nav-link::before, html body .header .main-navigation .navbar .navbar-nav .nav-item .nav-link.active::before, html body .header .main-navigation .navbar .navbar-nav .nav-item:hover .nav-link::before { display: none !important; opacity: 0 !important; } /* Ensure Services sub-menu shows when Bootstrap adds .show */ .navbar .nav-item .dropdown-menu.show { display: block !important; opacity: 1 !important; visibility: visible !important; } } /* ── Sticky header ───────────────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 1000; } .main-navigation { background: #fff; transition: box-shadow 0.3s ease; } .nav-scrolled .main-navigation { box-shadow: 0 2px 14px rgba(0,0,0,0.12); } /* Logo smooth resize */ .navbar-brand img { transition: max-height 0.3s ease; } /* Mobile: shrink logo by capping height — avoids top-clip that width-only causes. width:auto overrides wastex's fixed width:190px so aspect ratio is preserved. */ @media (max-width: 991px) { .navbar-brand img { width: auto !important; max-height: 60px; } .nav-scrolled .navbar-brand img { width: auto !important; max-height: 40px !important; } } /* ── Mobile search button — hidden site-wide: no backend, overlaps call btn ─ */ .mobile-search-btn { display: none !important; } /* ── Mobile call button (phone icon next to hamburger) ──────────────────── */ .mobile-call-btn { display: none; /* hidden on desktop */ } @media (max-width: 991px) { .mobile-call-btn { display: inline-flex; align-items: center; justify-content: center; color: #558E4C; font-size: 1rem; text-decoration: none; margin-right: 10px; padding: 4px; flex-shrink: 0; } .mobile-call-btn i { color: #558E4C !important; } .mobile-call-btn:hover i { color: #FD8000 !important; } } /* ── Hamburger menu: standard size and colour ────────────────────────────── */ button.navbar-toggler { font-size: 1.4rem !important; padding: 6px 10px !important; line-height: 1; border-color: rgba(0,0,0,0.2) !important; } button.navbar-toggler .fa-bars { color: #444 !important; font-size: 1.4rem !important; } /* ═══════════════════════════════════════════════════════════════════════════ BLOG — listing page & post pages ═══════════════════════════════════════════════════════════════════════════ */ /* ── Blog listing hero ───────────────────────────────────────────────────── */ .blog-listing-hero { position: relative; background: url('../assets/img/cdn/garage-cleanout-melbourne.jpg') center/cover no-repeat; padding: 100px 0 70px; overflow: hidden; } .blog-listing-hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); } .blog-listing-title { color: #fff; font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; } .blog-listing-subtitle { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin: 0; } /* ── Blog breadcrumb (shared by listing + post hero) ─────────────────────── */ .blog-breadcrumb { margin-bottom: 1.25rem; } .blog-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; font-size: 0.85rem; } .blog-breadcrumb ol li { color: rgba(255,255,255,0.7); } .blog-breadcrumb ol li a { color: rgba(255,255,255,0.85); text-decoration: none; transition: color 0.2s; } .blog-breadcrumb ol li a:hover { color: #FD8000; } /* ── Blog listing section ────────────────────────────────────────────────── */ .blog-listing-section { padding: 60px 0 80px; background: #f8f8f8; } /* ── Blog card ───────────────────────────────────────────────────────────── */ .blog-card { display: block; background: #fff; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 4px 18px rgba(0,0,0,0.08); transition: transform 0.28s ease, box-shadow 0.28s ease; height: 100%; } .blog-card:hover { transform: translateY(-6px); box-shadow: 0 10px 32px rgba(0,0,0,0.14); color: inherit; text-decoration: none; } .blog-card-img-wrap { position: relative; overflow: hidden; } .blog-card-img-wrap img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.4s ease; } .blog-card:hover .blog-card-img-wrap img { transform: scale(1.04); } .blog-card-badge { position: absolute; top: 14px; left: 14px; background: #FD8000; color: #fff; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 10px; border-radius: 20px; } .blog-card-body { padding: 22px 22px 26px; } .blog-card-date { font-size: 0.82rem; color: #888; margin-bottom: 0.6rem; } .blog-card-date i { margin-right: 5px; } .blog-card-title { font-size: 1.1rem; font-weight: 700; color: #222; margin-bottom: 0.65rem; line-height: 1.4; } .blog-card-excerpt { font-size: 0.9rem; color: #555; line-height: 1.65; margin-bottom: 1rem; } .blog-card-read-more { font-size: 0.88rem; font-weight: 600; color: #FD8000; } .blog-card-read-more i { margin-left: 4px; transition: transform 0.2s; } .blog-card:hover .blog-card-read-more i { transform: translateX(4px); } /* ── Blog post hero ──────────────────────────────────────────────────────── */ .blog-post-hero { position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; padding: 110px 0 75px; overflow: hidden; } .blog-post-hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); } .blog-post-hero-badge { display: inline-block; background: #FD8000; color: #fff; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 14px; border-radius: 20px; margin-bottom: 1rem; } .blog-post-hero-title { color: #fff; font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.25; margin-bottom: 1.1rem; } .blog-post-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.85rem; color: rgba(255,255,255,0.78); } .blog-post-hero-meta i { margin-right: 5px; color: #FD8000; } /* ── Offer banner ────────────────────────────────────────────────────────── */ .blog-offer-banner { background: #FD8000; padding: 20px 0; } .blog-offer-banner-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .blog-offer-pct { font-size: 2.6rem; font-weight: 900; color: #fff; line-height: 1; text-align: center; min-width: 80px; } .blog-offer-pct span { font-size: 1.5rem; } .blog-offer-pct small { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; } .blog-offer-text { flex: 1; display: flex; flex-direction: column; gap: 3px; } .blog-offer-text strong { color: #fff; font-size: 1.05rem; font-weight: 700; } .blog-offer-text span { color: rgba(255,255,255,0.88); font-size: 0.9rem; } .blog-offer-btns { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } .blog-offer-btn { background: #fff !important; color: #FD8000 !important; border: 2px solid #fff !important; white-space: nowrap; text-align: center; } .blog-offer-btn:hover { background: transparent !important; color: #fff !important; } .blog-offer-call { display: block; text-align: center; font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.9); text-decoration: none; transition: color 0.2s; } .blog-offer-call:hover { color: #fff; text-decoration: none; } .blog-offer-call i { margin-right: 5px; } /* ── Blog article body ───────────────────────────────────────────────────── */ .blog-post-body { padding: 60px 0 40px; } .blog-post-body h2 { font-size: 1.45rem; font-weight: 700; color: #222; margin-top: 2rem; margin-bottom: 0.9rem; } .blog-post-body p { font-size: 1rem; color: #444; line-height: 1.8; margin-bottom: 1.1rem; } .blog-post-lead { font-size: 1.15rem !important; color: #333 !important; line-height: 1.75 !important; margin-bottom: 1.75rem !important; } /* ── Highlight box ───────────────────────────────────────────────────────── */ .blog-highlight-box { display: flex; gap: 16px; align-items: flex-start; background: #fff8f0; border-left: 4px solid #FD8000; border-radius: 8px; padding: 20px 22px; margin: 2rem 0; } .blog-highlight-icon { font-size: 1.4rem; color: #FD8000; margin-top: 2px; flex-shrink: 0; } .blog-highlight-box strong { display: block; font-size: 1rem; font-weight: 700; color: #222; margin-bottom: 0.35rem; } .blog-highlight-box p { margin: 0 !important; font-size: 0.95rem !important; } /* ── Item checklist ──────────────────────────────────────────────────────── */ .blog-item-list { list-style: none; padding: 0; margin: 1rem 0 1.75rem; } .blog-item-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.97rem; color: #444; padding: 7px 0; border-bottom: 1px solid #f0f0f0; } .blog-item-list li:last-child { border-bottom: none; } .blog-item-list li .fas.fa-check { color: #FD8000; margin-top: 3px; flex-shrink: 0; } /* ── Before / After photos ───────────────────────────────────────────────── */ .blog-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.75rem 0; } .blog-ba-card { position: relative; border-radius: 10px; overflow: hidden; } .blog-ba-card img { width: 100%; height: 220px; object-fit: cover; display: block; } .blog-ba-label { position: absolute; top: 10px; left: 10px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 11px; border-radius: 20px; color: #fff; } .blog-ba-before { background: rgba(0,0,0,0.6); } .blog-ba-after { background: #558E4C; } @media (max-width: 575px) { .blog-before-after { grid-template-columns: 1fr; } } /* ── Figure ──────────────────────────────────────────────────────────────── */ .blog-figure { margin: 1.75rem 0; } .blog-figure img { width: 100%; border-radius: 10px; display: block; } .blog-figure figcaption { font-size: 0.82rem; color: #888; text-align: center; margin-top: 8px; } /* ── Steps ───────────────────────────────────────────────────────────────── */ .blog-steps { display: flex; flex-direction: column; gap: 20px; margin: 1.5rem 0 2rem; } .blog-step { display: flex; gap: 18px; align-items: flex-start; } .blog-step-num { width: 42px; height: 42px; border-radius: 50%; background: #FD8000; color: #fff; font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .blog-step-content { padding-top: 8px; flex: 1; } .blog-step-content strong { display: block; font-size: 1rem; font-weight: 700; color: #222; margin-bottom: 0.3rem; } .blog-step-content p { margin: 0 !important; font-size: 0.95rem !important; color: #555 !important; } /* ── CTA box ─────────────────────────────────────────────────────────────── */ .blog-cta-box { background: #111; border-radius: 12px; padding: 36px 32px; text-align: center; margin: 2.5rem 0; } .blog-cta-box h3 { color: #fff; font-size: 1.4rem; font-weight: 700; margin-bottom: 0.6rem; } .blog-cta-box > p { color: rgba(255,255,255,0.75); font-size: 0.97rem; margin-bottom: 1.5rem; } .blog-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 1rem; } .blog-cta-fine { font-size: 0.78rem !important; color: rgba(255,255,255,0.45) !important; margin: 0 !important; } /* ── Outline button variant ──────────────────────────────────────────────── */ .theme-btn-outline { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,0.6) !important; } .theme-btn-outline:hover { background: #fff !important; color: #222 !important; border-color: #fff !important; } /* ── Post footer (back link + share) ─────────────────────────────────────── */ .blog-post-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 28px 0 10px; border-top: 1px solid #e8e8e8; margin-top: 2rem; } .blog-back-link { display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; font-weight: 600; color: #FD8000; text-decoration: none; border: 2px solid #FD8000; border-radius: 6px; padding: 7px 16px; transition: background 0.2s, color 0.2s; } .blog-back-link::before { font-family: "Font Awesome 5 Pro"; font-weight: 400; content: "\f061"; display: inline-block; transform: scaleX(-1); color: #FD8000; margin-right: 6px; } .blog-back-link:hover { background: #FD8000; color: #fff; text-decoration: none; } .blog-back-link:hover::before { color: #fff; } .blog-share { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; } .blog-share-label { font-weight: 700; color: #444; padding-right: 10px; border-right: 2px solid #e0e0e0; line-height: 1; } .blog-share a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: transparent; border: 2px solid #ccc; font-size: 0.9rem; color: #666; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; } .blog-share a i { color: #666 !important; } .blog-share a:hover i { color: #fff !important; } .blog-share a:hover { border-color: #FD8000; background: #FD8000; color: #fff; } .blog-share a.share-fb:hover { border-color: #1877f2; background: #1877f2; } .blog-share a.share-x:hover { border-color: #000; background: #000; } .blog-share a.share-wa:hover { border-color: #25d366; background: #25d366; } .blog-share a.share-mail:hover { border-color: #555; background: #555; } .blog-share a.share-native:hover { border-color: #833ab4; background: #833ab4; } /* ── Footer logo — smaller than header ───────────────────────────────────── */ .footer-logo img { width: 120px !important; } /* ── Blog responsive ─────────────────────────────────────────────────────── */ @media (max-width: 767px) { .blog-listing-title { font-size: 1.8rem; } .blog-post-hero { padding: 80px 0 55px; } .blog-cta-box { padding: 26px 20px; } .blog-offer-banner-inner { gap: 16px; } .blog-offer-pct { font-size: 2rem; min-width: 60px; } } /* ── Mobile overflow containment ─────────────────────────────────────────── */ /* Bootstrap .row negative margins can push past the container on small screens. Clip at the section level rather than globally. */ .about-area, .instagram-feed-section, .facebook-feed-section, .youtube-feed-section { overflow-x: hidden; } /* ── Suburb page small-text overrides (mobile) ───────────────────────────── */ /* Bootstrap .small / .text-muted small renders at 85% = 13.6px — nudge to 14px */ @media (max-width: 767px) { .text-muted.small, .text-muted small, p.text-muted small { font-size: 0.875rem; } } /* ── Breadcrumb nav — override inline 0.85rem so text stays readable on mobile */ nav[aria-label="Breadcrumb"] { font-size: 0.875rem !important; } /* ── YouTube facade — zero-JS-cost until user clicks play ─────────────────── */ .yt-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; cursor: pointer; border-radius: 4px; overflow: hidden; } .yt-facade::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.15); transition: background 0.2s; } .yt-facade:hover::after { background: rgba(0, 0, 0, 0.05); } .yt-facade__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; padding: 0; border: none; background: transparent; cursor: pointer; z-index: 1; transition: transform 0.2s; } .yt-facade:hover .yt-facade__play { transform: translate(-50%, -50%) scale(1.1); } .yt-facade--loaded { cursor: default; aspect-ratio: unset; } .yt-facade--loaded iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ═══════════════════════════════════════════════════════════════════════════ ACCESSIBILITY / CONTRAST FIXES (header bar, footer, forms) Body default color #757F95 was bleeding into header-top spans (hours) and other non-link text on green/dark backgrounds — unreadable. ═══════════════════════════════════════════════════════════════════════════ */ /* Top green bar: all values white; labels light peach (readable on #558E4C) */ .header-top, .header-top-contact-info { color: #ffffff !important; } .header-top-contact-info h6 { color: #FFE0B2 !important; /* was #FD8000 — too low contrast on green */ font-weight: 700 !important; } .header-top-contact-info span, .header-top-contact-info a, .header-top-contact ul li a, .header-top-contact ul li span { color: #ffffff !important; } .header-top-contact ul li { color: #ffffff !important; } .header-top-social a { color: #ffffff !important; } /* Breadcrumb on green banners */ .breadcrumb-item a, .breadcrumb-item, nav[aria-label="Breadcrumb"] a, nav[aria-label="Breadcrumb"] .breadcrumb-current { color: #ffffff !important; } .breadcrumb-item.active, nav[aria-label="Breadcrumb"] .breadcrumb-current { color: #FFE0B2 !important; font-weight: 600; } /* Footer: force light text (body grey must not win) */ .footer-area, .footer-area p, .footer-widget-box p, .footer-list li, .footer-list li a, .footer-areas-grid li, .footer-areas-grid li a, .footer-contact li, .footer-contact li a, .footer-menu li a, .copyright-text, .copyright .footer-menu li a { color: #ffffff !important; } .footer-list li a i, .footer-areas-grid li a i { color: #ECDD5E !important; } .footer-list li a:hover, .footer-areas-grid li a:hover, .footer-contact li a:hover { color: #FD8000 !important; } .footer-widget-title, .footer-area h4, .footer-area h6 { color: #ffffff !important; } /* Form floating labels — #aaa on white fails WCAG */ .form-field label { color: #555555 !important; } .form-field .form-control:focus ~ label, .form-field .form-control:not(:placeholder-shown) ~ label { color: var(--color-primary, #FD8000) !important; } /* Contact/quote helper text */ .contact-area .quote-hours { color: #444444 !important; } /* Quote stars row on dark panels */ .quote-stars-row { color: #FFD700 !important; }